/* Unternehmensassistent (index.html): Anmeldung, Start, Chat,
   Unterlagen, Verwaltung. Tokens, Shell und Knoepfe: basis.css.
   Anmeldung: Nacht auf dem Bauplatz mit 3D-Haus. Interne Gestaltung
   "Architektur" seit 10.09.2026 in der nachgeladenen intern.css. */

/* ---------------- 3D-Buehne (js/szene3d.js) ---------------- */
/* Die Buehne ist der Perspektiv-Container; szene3d.js setzt perspective
   und perspective-origin. Darin liegt eine 0x0-Szene (transform-style:
   preserve-3d) mit Gruppen (.g) und Flaechen (.f); Fenster und
   Holz sind gewoehnliche Kinder der Wandflaechen. Alle Bewegungen sind
   CSS-Animationen mit fester Zeitachse (--t verschiebt sie fuer den
   Pruefmodus ?bau3d=<s>). */
.buehne3d {
  position: relative; overflow: hidden; --t: 0s;
  /* Drehen von Hand: waagerechtes Ziehen gehoert der Buehne, senkrechtes
     Wischen und Zoomen weiter dem Browser; kein Textmarkieren beim Ziehen. */
  touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none;
}
/* Anfassen: Greifhand ueber dem Haus, geschlossene Hand waehrend des Zuges */
.buehne3d .g-haus .f { cursor: grab; }
.buehne3d.greift, .buehne3d.greift * { cursor: grabbing; }
.buehne3d .szene { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.buehne3d .g { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.buehne3d .f {
  position: absolute; left: 0; top: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09);       /* feine Kantenlinie wie im Bauplan */
}
.buehne3d .f > div { position: absolute; }
.buehne3d .boden {
  box-shadow: none; background-color: transparent;
  background-image:
    repeating-linear-gradient(90deg, var(--linie) 0 1px, transparent 1px var(--zelle)),
    repeating-linear-gradient(0deg, var(--linie) 0 1px, transparent 1px var(--zelle));
  background-position: center center;
}
.buehne3d .schatten {
  box-shadow: none; border-radius: 42%;
  background: radial-gradient(ellipse at 50% 50%, var(--schatten) 0%, transparent 72%);
}
.buehne3d .holz { background: rgba(84, 56, 28, 0.42); }
.buehne3d .fenster {
  box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.85);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85));
  background-size: 2px 100%, 100% 2px; background-position: center; background-repeat: no-repeat;
}
.buehne3d .haustuer {
  box-sizing: border-box;
  border: var(--tuer-rahmen) solid #c9b795;
  border-bottom: 0;
  background: #342b24;
  box-shadow: 1px 0 3px rgba(0, 0, 0, .35), inset 0 0 2px #171e19;
}
.buehne3d .haustuer > div { position: absolute; box-sizing: border-box; }
.buehne3d .tuerblatt {
  inset: 3% 4% 0;
  background: repeating-linear-gradient(90deg, transparent 0 17%, rgba(20, 16, 11, .16) 17% 19%),
    linear-gradient(110deg, #886345, #634631 65%, #513e2d);
  box-shadow: inset 1px 1px 1px rgba(244, 223, 181, .3);
}
.buehne3d .tuerglas {
  left: 18%; top: 12%; width: 27%; height: 48%;
  border: 1px solid #bca988;
  background-image: linear-gradient(125deg, rgba(255, 255, 255, .22), transparent 60%);
}
.buehne3d .tuergriff {
  right: 17%; top: 44%; width: 6%; height: 22%;
  border-radius: 2px;
  background: linear-gradient(90deg, #6e716a, #eee4cf 48%, #a49e8c);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
}
.buehne3d .tuerschwelle {
  bottom: 0; left: -8%; width: 116%; height: 4%;
  background: linear-gradient(#d6cfc0, #8c877a);
}
.buehne3d.angehalten * { animation-play-state: paused !important; }

/* ---------------- Anmeldung: Nacht auf dem Bauplatz ---------------- */
/* Drei Spalten: Marke und Text | Buehnenbereich (leer, gibt dem Haus
   Platz und Mitte) | Anmeldekarte. Die Buehne selbst liegt absolut
   hinter allem, damit das Bodenraster die ganze Seite bedeckt. */
.login {
  position: relative; min-height: 100dvh; overflow: hidden; color: #fff;
  display: grid; grid-template-columns: minmax(280px, 30%) minmax(0, 1fr) minmax(360px, 40%);
  background:
    radial-gradient(ellipse 60% 55% at 45% 75%, rgba(22, 138, 92, 0.32), transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 10%, rgba(201, 178, 143, 0.16), transparent 70%),
    linear-gradient(180deg, #021b12 0%, var(--gruen-tief) 45%, #06331f 100%);
}
.login-buehne { position: absolute; inset: 0; z-index: 0; }
/* Bodennebel unten */
.login-buehne::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  background: linear-gradient(180deg, transparent, rgba(2, 27, 18, 0.7));
  pointer-events: none;
}
.login-bezug { grid-column: 2; }
.login-marke {
  position: relative; z-index: 1; grid-column: 1; padding: 56px 40px 40px 56px; pointer-events: none;
  display: flex; flex-direction: column; gap: 16px;
}
.login-marke > * { pointer-events: auto; }
.login-marke .logo { height: clamp(88px, 9vw, 128px); width: auto; align-self: flex-start; }
.login-kicker {
  font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--holz);
  display: flex; align-items: center; gap: 12px; margin-top: 8px;
}
.login-kicker::before { content: ""; width: 28px; height: 2px; background: var(--holz); flex: 0 0 auto; }
.login-marke h1 {
  font-size: clamp(30px, 3.1vw, 48px); font-weight: 600; line-height: 1.02; letter-spacing: -0.015em;
  hyphens: manual; text-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.login-marke p { margin: 0; font-size: 16px; color: rgba(255, 255, 255, 0.78); max-width: 34ch; }
.login-fuss { margin-top: auto; padding-top: 40px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; }
.login-fuss a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.login-fuss a:hover { color: #fff; text-decoration: underline; }

/* Anmeldekarte: ruhige Glasscheibe, flach (kein Kippen - Text bleibt scharf). */
.login-formular {
  position: relative; z-index: 2; grid-column: 3; align-self: center; justify-self: center;
  width: min(440px, calc(100% - 48px)); margin: 48px 24px;
  padding: 40px 40px 36px; display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 16px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.login-formular h2 { font-size: 24px; margin-bottom: 2px; }
.login-formular .hinweis { margin: 0 0 16px; color: rgba(255, 255, 255, 0.65); }
.login-formular label { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-top: 8px; }
.login-formular input {
  width: 100%; padding: 12px 14px; color: #fff;
  background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}
.login-formular input:focus { border-color: var(--holz); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(201, 178, 143, 0.3); }
.login-formular input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: inset 0 0 0 100px #0b3f2a; }
.login-formular .fehlertext { color: #ffb3b3; font-size: 13.5px; min-height: 1.3em; margin: 4px 0; }
.login-formular button {
  padding: 13px; font-size: 16px; margin-top: 8px; color: var(--gruen-tief);
  background: linear-gradient(180deg, #e3d3b4, var(--holz)); border-color: var(--holz);
  box-shadow: 0 4px 0 var(--holz-dunkel), 0 16px 30px -12px rgba(0, 0, 0, 0.8);
}
.login-formular button:hover:not(:disabled) { background: #e9dcc2; border-color: #e9dcc2; }
.login-formular button:active:not(:disabled) { background: var(--holz); box-shadow: 0 1px 0 var(--holz-dunkel); }
.login-formular button:focus-visible { box-shadow: 0 4px 0 var(--holz-dunkel), 0 0 0 3px rgba(201, 178, 143, 0.4); }

/* ---------------- Start: Richtfest-Streifen + Haus-Kacheln ---------------- */
.start-hero {
  position: relative; overflow: hidden; min-height: 250px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); align-items: center;
  border: 1px solid var(--rahmen); border-radius: 14px;
  background:
    radial-gradient(ellipse 60% 80% at 80% 60%, rgba(201, 178, 143, 0.28), transparent 70%),
    linear-gradient(135deg, #ffffff, var(--beige-zart));
  box-shadow: var(--kante), var(--schatten);
}
.start-text { padding: 34px 36px; display: flex; flex-direction: column; gap: 8px; }
.start-text .kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--holz-dunkel); }
.start-text :is(h1, h2) { font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.015em; line-height: 1.05; }
.start-text .neben { color: var(--grau); font-size: 15px; }
.start-buehne { width: 100%; height: 250px; cursor: grab; }

/* ---------------- Chat ---------------- */
/* Chat-Spalte: Regalbrett zwischen Seitenleiste und Inhalt */
#chatliste {
  position: fixed; left: var(--leiste); top: 0; bottom: 0; width: var(--chats);
  background: linear-gradient(90deg, var(--flaeche) 0 calc(100% - 4px), var(--beige) calc(100% - 4px));
  border-right: 1px solid var(--rahmen);
  padding: 24px 18px 16px; display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; scrollbar-width: none; z-index: 15;
  box-shadow: 6px 0 22px -16px rgba(3, 44, 29, 0.4);
}
#chatliste::-webkit-scrollbar { display: none; }
.chatliste-kopf { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.chatliste-kopf b { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12.5px; color: var(--gruen); display: flex; align-items: center; gap: 8px; }
.chatliste-kopf b::before { content: ""; width: 14px; height: 3px; background: var(--holz); border-radius: 2px; }
.chatliste-kopf button { font-size: 20px; color: var(--grau); padding: 0 6px; }
#chatliste input { width: 100%; font-size: 13.5px; padding: 8px 10px; }
#chatliste button.klein { width: 100%; }
#chatliste button.gefahr { margin-top: auto; }
.chat-eintraege { display: flex; flex-direction: column; gap: 4px; }
.chat-eintrag {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  border-radius: var(--radius); padding: 8px 10px; font-size: 13.5px;
  border: 1px solid transparent; transition: transform 0.15s ease, background 0.15s ease;
}
.chat-eintrag:hover { background: var(--beige-zart); transform: translateX(3px); }
.chat-eintrag.aktiv { background: linear-gradient(180deg, #f2ead9, var(--beige-hell)); border-color: var(--beige); box-shadow: 0 2px 0 var(--beige); }
.chat-eintrag .titel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-eintrag .entfernen { color: var(--grau); font-size: 15px; visibility: hidden; }
.chat-eintrag:hover .entfernen, .chat-eintrag.aktiv .entfernen { visibility: visible; }

/* Inhalt rueckt neben die Chat-Spalte */
body.chat-aktiv .inhalt { margin-left: calc(var(--leiste) + var(--chats)); }
body.chat-aktiv.liste-zu .inhalt { margin-left: var(--leiste); }
body.liste-zu #chatliste { display: none; }
/* Der Streifen-Knopf in der Eingabezeile blendet die Spalte ein und aus
   (Handy: als Overlay). Er ist immer sichtbar; gedrueckt = Spalte offen.
   Frueher stand hier display:none, das eine spaetere Regel gleicher
   Spezifitaet ohnehin ueberstimmte - der Knopf war sichtbar, tat bei
   offener Spalte aber nichts (behoben 09.09.2026). */
#chatlisteToggle[aria-expanded="true"] {
  background: var(--beige-zart); color: var(--gruen);
  box-shadow: inset 0 2px 3px rgba(29, 29, 27, 0.08), 0 1px 0 var(--rahmen);
}

main#verlauf { max-width: 840px; gap: 24px; padding-bottom: 24px; }

/* Nachrichten: Assistent als Text an einem Holzbalken, Benutzer auf
   einer beigen Planke rechts. */
.nachricht { display: flex; flex-direction: column; gap: 8px; }
.nachricht .blase { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.assistent { align-items: flex-start; }
.assistent .blase {
  position: relative; padding: 6px 0 6px 18px; max-width: 100%;
  border-left: 4px solid; border-image: linear-gradient(180deg, var(--holz), var(--holz-dunkel)) 1;
}
.assistent::before {
  content: "Assistent"; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gruen); font-weight: 600;
}
.nutzer { align-items: flex-end; }
.nutzer .blase {
  background: linear-gradient(180deg, #f1ebdf, var(--beige-hell)); border: 1px solid var(--rahmen);
  border-radius: var(--radius); padding: 10px 14px; max-width: 80%;
  box-shadow: 0 3px 0 var(--beige), 0 12px 20px -14px rgba(3, 44, 29, 0.4);
}
.fehler .blase { border-image: none; border-left-color: var(--rot); color: var(--rot); }
.warten { color: var(--grau); font-size: 14px; padding-left: 18px; }
.warten .punkte::after { content: ""; animation: punkte 1.5s steps(4, end) infinite; }
@keyframes punkte { 0% {content:""} 25% {content:"."} 50% {content:".."} 75% {content:"..."} }

/* Quellen: kompakte Zeile mit Dokument-Symbol */
.quellen { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 18px; }
.nutzer .quellen { padding-left: 0; justify-content: flex-end; }
.quelle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 400; color: var(--gruen);
  background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius);
  padding: 4px 10px; cursor: pointer; text-align: left; box-shadow: 0 2px 0 var(--rahmen);
}
.quelle:hover:not(:disabled) { background: var(--beige-zart); border-color: var(--beige); transform: translateY(-1px); }
.quelle::before {
  content: ""; width: 13px; height: 13px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linejoin="round"><path d="M6 2h9l4 4v16H6z"/><path d="M15 2v4h4"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linejoin="round"><path d="M6 2h9l4 4v16H6z"/><path d="M15 2v4h4"/></svg>') center / contain no-repeat;
}
.fundstelle {
  margin-left: 18px; border: 1px solid var(--rahmen); border-left: 4px solid var(--holz);
  border-radius: var(--radius); padding: 12px 16px; font-size: 13.5px;
  white-space: pre-wrap; background: var(--flaeche); max-width: 100%;
  box-shadow: var(--kante), var(--schatten);
}
.fundstelle .kapitel { font-weight: 600; margin-bottom: 4px; }
.fundstelle a.doklink { display: inline-block; margin-top: 8px; color: var(--gruen); font-weight: 600; }

/* Originalstellen unter der Antwort: eingeklappte Zeile, aufklappbar.
   Im Auszug sind die belegten Angaben der Antwort farbig markiert. */
.belege { margin-left: 18px; max-width: 100%; }
.belege > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: 12.5px; color: var(--gruen); background: var(--flaeche); border: 1px solid var(--rahmen);
  border-radius: var(--radius); padding: 4px 10px; box-shadow: 0 2px 0 var(--rahmen);
}
.belege > summary::-webkit-details-marker { display: none; }
.belege > summary::before {
  content: ""; width: 13px; height: 13px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linejoin="round"><path d="M6 2h9l4 4v16H6z"/><path d="M15 2v4h4"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linejoin="round"><path d="M6 2h9l4 4v16H6z"/><path d="M15 2v4h4"/></svg>') center / contain no-repeat;
}
.belege > summary::after { content: "▸"; font-size: 11px; opacity: .7; }
.belege[open] > summary::after { content: "▾"; }
.belege > summary:hover { background: var(--beige-zart); border-color: var(--beige); }
.beleg {
  margin-top: 8px; border: 1px solid var(--rahmen); border-left: 4px solid var(--holz); border-radius: var(--radius);
  padding: 8px 12px; font-size: 13px; background: var(--flaeche); transition: background .3s;
}
.beleg.markiert { background: var(--beige-zart); }
.beleg .kopf { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 5px; font-size: 12.5px; }
.beleg .kennung { font-weight: 700; color: var(--gruen); font-variant-numeric: tabular-nums; }
.beleg .dokument { font-weight: 600; }
.beleg .ort { opacity: .8; }
.beleg .kopf a.doklink { margin-left: auto; color: var(--gruen); font-weight: 600; }
.beleg blockquote { margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--beige); white-space: pre-wrap; word-break: break-word; }
.beleg mark { background: #ffe58a; color: var(--schwarz); font-weight: 600; padding: 0 3px; border-radius: 3px; }
.blase a.qref { color: var(--gruen); font-weight: 600; text-decoration: none; border-bottom: 1px dotted var(--gruen); }

/* Anhang-Chips (in der Eingabezeile und unter gesendeten Nachrichten) */
.anhang-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche);
  padding: 3px 10px; max-width: 100%; box-shadow: 0 2px 0 var(--rahmen);
}
.anhang-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.anhang-chip::before {
  content: ""; width: 12px; height: 12px; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 11.5 12 20a5.5 5.5 0 0 1-7.8-7.8L13 3.4a3.7 3.7 0 0 1 5.2 5.2L9.9 17a1.8 1.8 0 0 1-2.6-2.6l7.8-7.8"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20.5 11.5 12 20a5.5 5.5 0 0 1-7.8-7.8L13 3.4a3.7 3.7 0 0 1 5.2 5.2L9.9 17a1.8 1.8 0 0 1-2.6-2.6l7.8-7.8"/></svg>') center / contain no-repeat;
}
.anhang-chip button { color: var(--grau); font-size: 14px; }
.anhang-chip button:hover:not(:disabled) { color: var(--rot); }

/* Eingabe: Werkbank am unteren Rand - eine Arbeitsplatte mit Holzkante */
form#formular {
  position: sticky; bottom: 0; z-index: 5;
  background: linear-gradient(180deg, rgba(243, 239, 232, 0.6), var(--grund) 30%);
  padding: 14px 40px 12px;
}
form#formular > * { width: 100%; max-width: 840px; margin-left: auto; margin-right: auto; }
/* Einheits-Modus: der fruehere Umschalter bleibt im Markup, ist aber
   ausgeblendet (Rueckweg dokumentiert in CLAUDE.md). */
.moduswahl { display: none !important; }
.anhangleiste { display: flex; flex-wrap: wrap; gap: 6px; }
.anhangleiste:not(:empty) { margin-bottom: 8px; }
.eingabezeile {
  display: flex; gap: 8px; align-items: stretch; padding: 8px;
  background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 12px;
  box-shadow: 0 4px 0 var(--holz), 0 24px 40px -22px rgba(3, 44, 29, 0.6);
}
#anhangKnopf, #chatlisteToggle { padding: 0 12px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
textarea#eingabe {
  flex: 1; resize: none; min-height: 46px; max-height: 160px;
  overflow-y: hidden; scrollbar-width: none; padding: 11px 14px;
  border-color: transparent; box-shadow: none; background: transparent;
}
textarea#eingabe:focus { border-color: transparent; box-shadow: none; }
#senden { min-width: 100px; }
form#formular .hinweis { margin: 10px auto 0; font-size: 12.5px; text-align: center; }

/* ---------------- Unterlagen ---------------- */
a.zurueck { cursor: pointer; text-decoration: underline; font-size: 14px; color: var(--grau); margin-left: auto; }
.profil { font-size: 14.5px; line-height: 1.9; }
.profil > div { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.profil b { display: inline-block; min-width: 90px; font-weight: 500; color: var(--grau); }
.gruppe-abzeichen {
  display: inline-block; font-size: 12px; line-height: 1.6;
  border: 1px solid var(--beige); color: var(--gruen); border-radius: var(--radius);
  padding: 0 9px; margin: 0 4px 2px 0; background: var(--beige-zart); box-shadow: 0 2px 0 var(--beige);
}
#suchfeld { flex: 1 1 240px; min-width: 0; max-width: 460px; }
.trefferliste { display: flex; flex-direction: column; gap: 10px; }
.treffer {
  border: 1px solid var(--rahmen); border-left: 4px solid var(--holz); border-radius: var(--radius);
  padding: 12px 16px; font-size: 13.5px; background: var(--flaeche); box-shadow: 0 2px 0 var(--rahmen);
}
.treffer .kopf { font-weight: 600; margin-bottom: 4px; }
.treffer mark { background: var(--gruen); color: #fff; padding: 0 4px; border-radius: 3px; }
.treffer a.doklink { display: inline-block; margin-top: 6px; }
/* Dokumentablage: ein Regal je Ordner (= Gruppe) */
.ordnerliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ordner {
  border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--beige-zart);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 3px 0 var(--beige);
}
.ordner-kopf { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--gruen); }
.ordner-kopf svg { flex: 0 0 auto; }
.ordner-kopf .anzahl {
  margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--grau);
  border: 1px solid var(--rahmen); border-radius: var(--radius); padding: 0 7px; background: var(--flaeche);
}
a.dok-eintrag {
  display: flex; gap: 8px; align-items: center; font-size: 13.5px;
  color: var(--schwarz); text-decoration: none;
  background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius);
  padding: 7px 10px; box-shadow: 0 2px 0 var(--rahmen); transition: transform 0.15s ease;
}
a.dok-eintrag:hover { border-color: var(--beige); background: var(--beige-hell); transform: translateY(-1px); }
a.dok-eintrag svg { flex: 0 0 auto; color: var(--grau); }
a.dok-eintrag .dokname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- Verwaltung ---------------- */
input.formfeld { width: 190px; }
input.formfeld.breit { width: 250px; }
.kontensuche { max-width: 380px; }
.kontenliste { display: flex; flex-direction: column; }
.konto { padding: 14px 0 16px; border-bottom: 1px solid var(--rahmen); }
.konto:last-child { border-bottom: none; padding-bottom: 2px; }
.konto-kopf { font-weight: 600; font-size: 15px; }
.konto-kopf .abzeichen {
  font-weight: 400; font-size: 12px; border: 1px solid var(--beige); color: var(--gruen);
  border-radius: var(--radius); padding: 0 8px; margin-left: 8px; background: var(--beige-zart);
}
label.feld { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--grau); }
label.feld input { width: 190px; }

/* ---------------- Tablet ---------------- */
@media (min-width: 901px) and (max-width: 1180px) {
  :root { --chats: 220px; }
  main { padding: 24px 22px 32px; }
  form#formular { padding: 10px 22px; }
  label.feld input { width: 160px; }
  .login-marke { padding: 40px 28px 32px 36px; }
  .start-hero { grid-template-columns: 1fr 300px; }
}

/* ---------------- Handy ---------------- */
@media (max-width: 900px) {
  /* untereinander: Text, eine 240px hohe Buehne, Karte */
  .login { grid-template-columns: 1fr; grid-template-rows: auto 240px auto; }
  .login-buehne { position: relative; inset: auto; grid-column: 1; grid-row: 2; height: 240px; }
  .login-buehne::after { display: none; }
  .login-bezug { display: none; }
  .login-marke { grid-row: 1; padding: 28px 24px 8px; }
  .login-marke .logo { height: 72px; }
  .login-marke h1 { font-size: clamp(26px, 6.6vw, 38px); }
  .login-marke p { font-size: 15px; }
  .login-fuss { padding-top: 16px; }
  .login-formular {
    grid-column: 1; grid-row: 3; align-self: start;
    width: calc(100% - 32px); margin: 8px 16px 32px; padding: 28px 24px 24px;
  }

  .start-hero { grid-template-columns: 1fr; min-height: 0; }
  .start-text { padding: 22px 20px 0; }
  .start-buehne { height: 200px; }

  body.chat-aktiv .inhalt, body.chat-aktiv.liste-zu .inhalt { margin-left: 0; }
  #chatliste { display: none; left: 0; top: var(--kopf-mobil); width: min(320px, 84vw); border-right: 1px solid var(--rahmen); }
  body.chat-aktiv.liste-offen #chatliste { display: flex; }
  body.chat-aktiv.liste-offen::after {
    content: ""; position: fixed; inset: var(--kopf-mobil) 0 0 0;
    background: rgba(29, 29, 27, 0.35); z-index: 14;
  }

  main#verlauf { gap: 16px; }
  .nutzer .blase { max-width: 100%; }
  .fundstelle, .quellen, .belege, .assistent .blase, .warten { margin-left: 0; padding-left: 12px; }
  form#formular { padding: 10px 12px; }
  .eingabezeile { padding: 6px; }
  form#formular .hinweis { font-size: 11.5px; margin-top: 6px; }
  #senden { min-width: 0; padding: 9px 14px; }

  input.formfeld, input.formfeld.breit, label.feld, label.feld input, .kontensuche, #suchfeld { width: 100%; max-width: none; }
}

/* Konten und explizite Ordnerauswahl */
.konto-aufklappbar > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; cursor: pointer; list-style: none; }
.konto-aufklappbar > summary::before { content: '▶'; color: var(--gruen); font-size: 12px; }
.konto-aufklappbar[open] > summary::before { content: '▼'; }
.konto-titel { display: grid; gap: 3px; flex: 1; min-width: 160px; overflow-wrap: anywhere; }
.konto-titel small, .konto-rechte { font-size: 13px; font-weight: normal; color: var(--grau); }
.konto-inhalt { padding-top: 18px; display: grid; gap: 16px; }
.konto-felder { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 14px; align-items: end; }
.konto-felder .feld { display: grid; gap: 5px; }
.ordnerauswahl { margin-top: 12px; border: 1px solid var(--rahmen); border-radius: 12px; background: var(--beige-zart); }
.ordnerauswahl > summary { padding: 13px 16px; cursor: pointer; font-weight: 600; }
.ordnerauswahl-inhalt { padding: 0 16px 16px; }
.ordner-checkboxen { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,310px),1fr)); gap: 8px; }
.ordner-option { display: flex; align-items: center; gap: 9px; padding: 10px; min-height: 44px; border-radius: 7px; background: var(--weiss, #fff); cursor: pointer; flex-wrap: wrap; }
.ordner-option input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--gruen); }
.ordner-option span { overflow-wrap: anywhere; min-width: 0; flex: 1; }
.ordner-option small { font-size: 11px; color: var(--grau); margin-left: 27px; flex-basis: 100%; }
.ordner-option:has(input:checked) { box-shadow: inset 3px 0 var(--gruen); }
.konto-aktionen { margin-top: 4px; }
.konto-aufklappbar > summary:focus-visible, .ordnerauswahl > summary:focus-visible { outline: 2px solid var(--gruen); outline-offset: 4px; }
@media(max-width:600px) { .konto-rechte { flex-basis: 100%; margin-left: 22px; } .konto-felder { grid-template-columns: 1fr; } }

.profil-passwort { max-width: 440px; display: grid; gap: 16px; }
.profil-passwort .feld { display: grid; gap: 6px; }
.profil-passwort input { width: 100%; box-sizing: border-box; }
.profil-passwort button { justify-self: start; }