/* KI-Arbeitsplatz der Kanzlei Tax Sparrow.
   Alles Sichtbare ist aus dem Logo abgeleitet (Entscheidungen: docs/akte/2026-11-11-gestaltung-aus-dem-logo.md):
   - Grund ist das Petrol des Logos (#002028), eine Stufe tiefer die Leiste, drei Stufen heller die Flächen.
   - Die drei Orangetöne der Münze haben je eine Aufgabe: #F1861D handelt (der eine laute Knopf), #F7AC57 zeichnet
     aus (Schrift und Zeichen auf Petrol), #FDD287 zeigt den Fokus der Tastatur.
   - Der Punktkranz der Münze ist das Zustandszeichen: Punkte laufen, Punkte mit Ring warten, Ring mit Haken siegelt.
   Schrift ist die des Rechners (Svens Ansage 11.11.2026: "keine KI-Schrift, Standardschrift"), unter Windows 11
   Segoe UI Variable in ihren drei Größenschnitten, sonst Segoe UI oder die Systemschrift.
   Maße: Arbeitssatz 14/20 mit 13/18 und 12/16, Abstände 4, 8, 12, 16, 24, 32, Rundungen 4 (klein), 6 (Bedienung), 8 (Flächen). */

/* 1. Farben und Maße */
:root {
  --papier: #002028; --leiste: #001a21; --flaeche: #06272f; --flaeche2: #0b2f38; --flaeche3: #153e48; --senke: #001a21;
  --aktiv: rgba(203, 232, 238, .07); --aktiv2: rgba(203, 232, 238, .12); --linie: rgba(203, 232, 238, .11); --linie2: rgba(203, 232, 238, .24);
  --text: #edeae3; --leise: #aebbbb; --blass: #93a3a4;
  --akzent: #f1861d; --akzent-t: #f7ac57; --fokus: #fdd287; --akzent-flaeche: rgba(241, 134, 29, .13); --akzent-linie: rgba(247, 172, 87, .42);
  --knopf: #f1861d; --auf-knopf: #002028; --knopf-h: #f7ac57;
  --gut: #5fd3a3; --gut-flaeche: rgba(95, 211, 163, .13); --rot: #ff9388; --rot-flaeche: rgba(255, 147, 136, .13); --auf-gefahr: #002028;
  --meld-grund: #edeae3; --meld-text: #012028; --meld-aktion: #8a4300;
  --schleier: rgba(0, 10, 13, .6); --schatten: 0 16px 40px rgba(0, 10, 13, .55);
  color-scheme: dark;
}
:root[data-hell] {
  --papier: #f7f5ef; --leiste: #001a21; --flaeche: #ffffff; --flaeche2: #ebe7dc; --flaeche3: #ddd8cb; --senke: #ffffff;
  --aktiv: rgba(1, 32, 40, .06); --aktiv2: rgba(1, 32, 40, .1); --linie: #e2ddd1; --linie2: #c7c0b1;
  --text: #012028; --leise: #46585e; --blass: #5a696e;
  --akzent: #f1861d; --akzent-t: #964a05; --fokus: #c8640a; --akzent-flaeche: #fdf1e2; --akzent-linie: #efc898;
  --knopf: #002028; --auf-knopf: #ffffff; --knopf-h: #0e3641;
  --gut: #216a43; --gut-flaeche: #e8f3ec; --rot: #b3362f; --rot-flaeche: #fbecea; --auf-gefahr: #ffffff;
  --meld-grund: #002028; --meld-text: #edeae3; --meld-aktion: #f7ac57;
  --schleier: rgba(1, 32, 40, .38); --schatten: 0 1px 2px rgba(1, 32, 40, .08), 0 12px 32px rgba(1, 32, 40, .14);
  color-scheme: light;
}
/* Die Leiste trägt in beiden Themen das Petrol: dort steht das Logo, und es steht immer auf seinem eigenen Grund.
   Die Werte sind die des dunklen Themas (ein Wächter hält sie gleich). */
:root[data-hell] .leiste {
  --papier: #002028; --flaeche: #06272f; --flaeche2: #0b2f38; --flaeche3: #153e48; --senke: #001a21;
  --aktiv: rgba(203, 232, 238, .07); --aktiv2: rgba(203, 232, 238, .12); --linie: rgba(203, 232, 238, .11); --linie2: rgba(203, 232, 238, .24);
  --text: #edeae3; --leise: #aebbbb; --blass: #93a3a4;
  --akzent: #f1861d; --akzent-t: #f7ac57; --fokus: #fdd287; --akzent-flaeche: rgba(241, 134, 29, .13); --akzent-linie: rgba(247, 172, 87, .42);
  --knopf: #f1861d; --auf-knopf: #002028; --knopf-h: #f7ac57;
  --gut: #5fd3a3; --gut-flaeche: rgba(95, 211, 163, .13); --rot: #ff9388; --rot-flaeche: rgba(255, 147, 136, .13); --auf-gefahr: #002028;
  --schatten: 0 16px 40px rgba(0, 10, 13, .55);
  color-scheme: dark;
}
:root {
  --schrift: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --schrift-klein: "Segoe UI Variable Small", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --titel: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, ui-monospace, monospace;
  --gl: max(24px, env(safe-area-inset-left, 0px)); --gr: max(24px, env(safe-area-inset-right, 0px)); --kopf: 48px; --breit: 256px;
}

/* 2. Grund */
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--linie2) transparent; }
html, body { height: 100%; }
body { margin: 0; background: var(--papier); color: var(--text); font: 400 14px/20px var(--schrift); overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
::selection { background: rgba(241, 134, 29, .32); }
h1, h2, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1 { font: 600 20px/28px var(--titel); text-wrap: balance; overflow-wrap: anywhere; }
h2 { font-size: 16px; line-height: 22px; font-weight: 600; }
small { font-size: 13px; line-height: 18px; }
.ic { flex: none; display: block; }
.mono { font-family: var(--mono); font-size: 13px; }
code { font-family: var(--mono); font-size: 13px; }
#app { height: 100%; }
.laden { height: 100%; display: grid; place-items: center; color: var(--leise); }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wort-leise { color: var(--leise); }
.lesebreite { max-width: 76ch; }
.umbruch { white-space: normal; }
.ueber { color: var(--rot); }
.heute { color: var(--akzent-t); }

/* 3. Marke und Punktkranz */
/* Leiste: Zeichen und Wortmarke im Verhältnis der Vorlage (36 px hoch, Maßstab 0,2022). Der Name des Werkzeugs
   beginnt an der linken Kante der Wortmarke (260,5 in der Vorlage, hier 45 px) und steht 3 px unter ihr. */
.marke { position: relative; display: block; flex: none; width: 184px; height: 40px; }
.marke-bild { position: absolute; inset: 0 auto auto 0; width: 184px; height: 36px; background: url(/marke/kopf-dunkel.svg) 0 0 / contain no-repeat; }
.marke-name { position: absolute; left: 44px; top: 24px; font: 600 12px/16px var(--schrift-klein); color: var(--leise); white-space: nowrap; }
.marke-gross { display: block; width: min(304px, 100%); aspect-ratio: 900.56 / 178.07; background: url(/marke/logo-dunkel.svg) 0 0 / contain no-repeat; }
:root[data-hell] .marke-gross { background-image: url(/marke/logo-hell.svg); }
.kranz { flex: none; display: block; color: var(--blass); }
.kranz .p { fill: currentColor; }
.kranz .ring { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kranz.laeuft, .kranz.offen { color: var(--akzent-t); }
.kranz.gut { color: var(--gut); }
.kranz.mangel { color: var(--rot); }
.kranz.laeuft .p { animation: kranz 1.2s linear infinite; animation-delay: calc(var(--i) * .1s - 1.2s - var(--jetzt, 0ms)); }
@keyframes kranz { from { opacity: 1; } to { opacity: .16; } }

/* 4. Bedienelemente */
.knopf { height: 32px; padding-inline: 14px; border-radius: 6px; background: var(--knopf); color: var(--auf-knopf); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; transition: background-color .12s; }
.knopf:hover:not(:disabled) { background: var(--knopf-h); }
.knopf:disabled { opacity: .55; }
.knopf.zweit { background: none; color: var(--text); box-shadow: inset 0 0 0 1px var(--linie2); font-weight: 500; }
.knopf.zweit:hover:not(:disabled) { background: var(--aktiv); }
.knopf.klein { height: 28px; padding-inline: 10px; font-size: 13px; gap: 6px; }
.knopf.gefahr { background: var(--rot); color: var(--auf-gefahr); }
.knopf.gefahr:hover:not(:disabled) { background: var(--rot); filter: brightness(1.08); }
.knopf.rechts { margin-left: auto; }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.knoepfe.mittig { justify-content: center; margin-top: 12px; }
.textknopf { font-size: 13px; line-height: 18px; color: var(--leise); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linie2); }
.textknopf:hover { color: var(--text); text-decoration-color: currentColor; }
.symbol { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 6px; color: var(--leise); transition: background-color .12s; }
.symbol:hover, .symbol[aria-pressed="true"] { background: var(--aktiv); color: var(--text); }
.symbol.nur-schmal { display: none; }
.speichern { font-size: 13px; line-height: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; color: var(--text); text-decoration: none; white-space: nowrap; }
.speichern:hover { background: var(--aktiv); }
.speichern .ic { color: var(--leise); }

.feld { height: 32px; padding-inline: 10px; border: 1px solid var(--linie2); border-radius: 6px; background: var(--senke); width: 100%; transition: border-color .12s; }
.feld:hover:not(:disabled):not(:focus) { border-color: var(--blass); }
.feld:focus { outline: 2px solid var(--fokus); outline-offset: -1px; }
.feld::placeholder, .textfeld::placeholder, .suche input::placeholder { color: var(--blass); }
.feld:disabled { opacity: .5; }
textarea.feld { height: auto; min-height: 96px; padding-block: 6px; resize: vertical; display: block; }
textarea.feld.kurz { min-height: 64px; height: 64px; }
select.feld { padding-right: 4px; }
.feldzeile { display: grid; gap: 4px; font-weight: 600; }
.feldzeile small { font-weight: 400; color: var(--leise); }
.feldzeile .feld { font-weight: 400; }
.feldzeile textarea.feld.lang { min-height: 260px; }
.feldzeile.quer { grid-template-columns: auto 170px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.hilfe-text { font-size: 13px; line-height: 18px; color: var(--leise); }
.fehlertext { color: var(--rot); background: var(--rot-flaeche); border-radius: 6px; padding: 8px 12px; }
.warnung { font-size: 13px; line-height: 18px; color: var(--text); background: var(--rot-flaeche); box-shadow: inset 0 0 0 1px var(--rot); border-radius: 6px; padding: 8px 12px; }
.gespeichert { font-size: 13px; color: var(--gut); }
.ungesichert { font-size: 13px; }

.wahl { position: relative; min-width: 0; }
.wahlknopf { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 8px; border-radius: 6px; font-weight: 600; white-space: nowrap; min-width: 0; transition: background-color .12s; }
.wahlknopf:hover, .wahlknopf[aria-expanded="true"] { background: var(--aktiv); }
.wahlknopf .ic { color: var(--leise); }
.wahlknopf.klein { height: 28px; font-weight: 400; font-size: 13px; color: var(--leise); }
.wahlknopf.klein:hover, .wahlknopf.klein.gesetzt { color: var(--text); }
.wahlknopf .kurz { overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.pop { position: absolute; z-index: 20; background: var(--flaeche2); box-shadow: 0 0 0 1px var(--linie2), var(--schatten); border-radius: 8px; padding: 4px; width: min(320px, calc(100vw - 32px)); }
.pop.unten { top: calc(100% + 4px); left: 0; }
.pop.oben { bottom: calc(100% + 4px); left: 0; }
.pop.breit { width: min(400px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; }
.pop-liste { display: grid; gap: 1px; }
.pop-punkt { width: 100%; display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 4px; text-align: left; }
.pop-punkt:hover:not(:disabled) { background: var(--aktiv2); }
.pop-punkt:disabled { color: var(--blass); }
.pop-punkt .txt { flex: 1; min-width: 0; display: grid; }
.pop-punkt b { font-weight: 500; }
.pop-punkt small { color: var(--leise); }
.pop-punkt:disabled small { color: var(--blass); }
.pop-punkt small.empfehlung { color: var(--akzent-t); }
.pop-punkt > .ic { color: var(--akzent-t); margin-top: 2px; }
.pop-punkt:disabled > .ic { color: var(--blass); }
.pop-trenn { height: 1px; background: var(--linie); margin: 4px 0; }
.pop-titel { font: 600 12px/16px var(--schrift-klein); color: var(--blass); padding: 8px 8px 4px; }
.pop-zeile { padding: 6px 8px; font-size: 13px; line-height: 18px; }
.pop-suche { border-bottom: 1px solid var(--linie); margin-bottom: 4px; border-radius: 0; }

.thema { display: flex; gap: 2px; flex: none; background: var(--senke); border-radius: 6px; padding: 2px; }
.thema button { height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; line-height: 16px; color: var(--leise); }
.thema button[aria-pressed="true"] { background: var(--flaeche3); color: var(--text); }
.etikett { font: 400 12px/18px var(--schrift-klein); color: var(--leise); background: var(--flaeche3); border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--flaeche3); border-radius: 4px; padding: 2px 4px 2px 8px; font-size: 13px; line-height: 18px; max-width: 100%; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button { color: var(--leise); border-radius: 4px; }
.chip button:hover { color: var(--text); }
.pille { min-width: 18px; height: 18px; padding-inline: 5px; display: grid; place-items: center; border-radius: 9px; background: var(--akzent); color: #002028; font: 600 12px/16px var(--schrift-klein); font-variant-numeric: tabular-nums; }
.anzahl { font-size: 12px; line-height: 16px; color: var(--blass); font-variant-numeric: tabular-nums; }
/* Die Leitung trägt die Münze: Orange mit Petrol, wie im Logo. */
.kreis { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--flaeche3); color: var(--text); font: 600 12px/16px var(--schrift-klein); }
.kreis.chef { background: var(--akzent); color: #002028; }
.meter { display: block; height: 4px; border-radius: 2px; background: var(--flaeche3); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--akzent); border-radius: 2px; }
.meter.knapp i { background: var(--rot); }
.zustand { font: 400 12px/18px var(--schrift-klein); padding: 0 6px; border-radius: 4px; background: var(--flaeche3); color: var(--leise); flex: none; white-space: nowrap; }
.zustand.abnahme { background: var(--akzent-flaeche); color: var(--akzent-t); }
.zustand.fertig { background: var(--gut-flaeche); color: var(--gut); }
.suche { height: 32px; display: flex; align-items: center; gap: 8px; padding-inline: 8px; color: var(--blass); border-radius: 6px; }
.suche input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; color: var(--text); text-overflow: ellipsis; }
.suche:focus-within { background: var(--aktiv); color: var(--leise); }

/* 5. Schale und Leiste */
.schale { height: 100%; display: grid; grid-template-columns: var(--breit) minmax(0, 1fr); position: relative; }
.schleier { display: none; }
.leiste { background: var(--leiste); color: var(--text); border-right: 1px solid var(--linie); min-height: 0; display: flex; flex-direction: column; }
.leiste-kopf { display: flex; align-items: flex-start; gap: 8px; padding: 16px 8px 14px max(16px, env(safe-area-inset-left, 0px)); }
.leiste-kopf .zu { margin-left: auto; display: none; }
.neu-knopf { display: flex; align-items: center; gap: 8px; margin: 0 12px 0 max(12px, env(safe-area-inset-left, 0px)); height: 36px; padding-inline: 10px; border-radius: 6px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); font-weight: 600; transition: background-color .12s; }
.neu-knopf:hover { background: var(--flaeche2); }
.neu-knopf .ic { color: var(--akzent-t); }
.leiste-scroll { flex: 1; min-height: 0; overflow: auto; padding: 12px 8px 12px max(8px, env(safe-area-inset-left, 0px)); display: grid; gap: 16px; align-content: start; grid-template-columns: minmax(0, 1fr); }
.gruppe { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); }
.gruppe-name { font: 600 12px/16px var(--schrift-klein); color: var(--blass); padding: 0 8px 4px; }
.nav { width: 100%; height: 32px; display: flex; align-items: center; gap: 8px; padding-inline: 8px; border-radius: 6px; text-align: left; transition: background-color .12s; }
.nav:hover { background: var(--aktiv); }
.nav[aria-current="true"] { background: var(--aktiv2); }
.nav .ic { color: var(--blass); }
.nav[aria-current="true"] .ic { color: var(--akzent-t); }
.nav .wort { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav.unter { height: 30px; padding-left: 28px; font-size: 13px; color: var(--leise); }
.nav.unter:hover, .nav.unter[aria-current="true"] { color: var(--text); }
.nav.unter.leise { color: var(--blass); }
.nav.unter .kreis { flex: none; }
.nav .zustand.fertig { padding: 2px; display: grid; place-items: center; }
.nav .zustand .ic, .nav[aria-current="true"] .zustand .ic { color: inherit; }
.leer-zeile { font-size: 13px; line-height: 18px; color: var(--blass); padding: 4px 8px; }
.mandat { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); }
.mandat-kopf { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; }
.mandat-kopf .auf { width: 24px; height: 32px; display: grid; place-items: center; color: var(--blass); border-radius: 6px; }
.mandat-kopf .auf:hover { background: var(--aktiv); color: var(--text); }
.mandat-kopf .auf .ic, .gruppenknopf .ic, .schritte .rein { transition: transform .15s; }
.mandat-kopf .auf .ic, .gruppenknopf .ic { transform: rotate(-90deg); }
.mandat-kopf .auf[aria-expanded="true"] .ic, .gruppenknopf[aria-expanded="true"] .ic { transform: none; }
.mandat-kopf .nav { font-weight: 500; padding-left: 4px; }
.gruppenknopf { color: var(--leise); font-size: 13px; height: 30px; margin-top: 4px; }
.projekt-neu { display: flex; gap: 4px; padding: 2px 0 4px 8px; }
.projekt-neu .feld { min-width: 0; }
.chatzeile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.chatzeile .mehr { position: absolute; right: 2px; top: 2px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 4px; color: var(--leise); background: var(--flaeche2); opacity: 0; }
.chatzeile:hover .mehr, .chatzeile .mehr:focus-visible, .chatzeile.offen .mehr { opacity: 1; }
.chatzeile .mehr:hover { color: var(--text); background: var(--flaeche3); }
.chat-aktionen { display: flex; gap: 4px; padding: 2px 0 4px 28px; }
.chat-aktionen button { font-size: 12px; line-height: 16px; padding: 4px 8px; box-shadow: inset 0 0 0 1px var(--linie2); border-radius: 4px; color: var(--leise); }
.chat-aktionen button:hover { color: var(--text); background: var(--aktiv); }
.umbenennen { display: flex; gap: 4px; padding: 2px 0 2px 28px; }
.umbenennen .feld { height: 28px; min-width: 0; font-size: 13px; padding-inline: 8px; }
.leiste-fest { border-top: 1px solid var(--linie); padding: 12px 8px 8px max(8px, env(safe-area-inset-left, 0px)); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2px; }
.darstellung { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 8px max(16px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--linie); font-size: 12px; line-height: 16px; color: var(--blass); }
.leiste-fuss { position: relative; border-top: 1px solid var(--linie); padding: 8px 8px 8px max(8px, env(safe-area-inset-left, 0px)); }
.ich { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; text-align: left; transition: background-color .12s; }
.ich:hover, .ich[aria-expanded="true"] { background: var(--aktiv); }
.ich .wer { min-width: 0; flex: 1; display: grid; gap: 2px; }
.ich b { font-weight: 600; }
.ich small { font-size: 12px; line-height: 16px; color: var(--leise); font-variant-numeric: tabular-nums; }
.ich .meter { margin-top: 2px; }

/* 6. Hauptfläche und Kopfleiste */
.haupt { min-width: 0; min-height: 0; display: grid; position: relative; }
.kopfleiste { display: flex; align-items: center; gap: 8px; height: var(--kopf); min-width: 0; padding-inline: var(--gl) var(--gr); border-bottom: 1px solid var(--linie); }
/* Das erste Bedienelement der Kopfleiste hat 8 px Polster: nach links gerückt, damit sein Text auf der Achse der Seite steht. */
.kopfleiste > .nur-schmal + .wahl, .kopfleiste > .nur-schmal + .kopf-mandat { margin-left: -8px; }
.ort { color: var(--leise); font-size: 13px; }
.kopf-r { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.kopf-info { font-size: 13px; color: var(--blass); white-space: nowrap; }
.kopf-mandat { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 8px; border-radius: 6px; font-size: 13px; color: var(--leise); min-width: 0; flex: 0 1 auto; }
.kopf-mandat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-mandat:hover { background: var(--aktiv); color: var(--text); }
.tafel-titel { font-weight: 600; }

/* 7. Chat */
.arbeit { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.arbeit.offen { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.chat { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-leer { grid-template-rows: auto minmax(0, 1fr); }
.verlauf { min-height: 0; overflow: auto; padding: 24px var(--gr) 24px var(--gl); }
.spalte { max-width: 720px; margin-inline: auto; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.du { justify-self: end; max-width: 85%; background: var(--flaeche2); padding: 8px 12px; border-radius: 8px; display: grid; gap: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ki { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 660px; }
.notiz { font-size: 13px; line-height: 18px; color: var(--leise); white-space: pre-wrap; }
.schritte { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--linie); font-size: 13px; line-height: 18px; }
.schritte > button { width: 100%; height: 32px; display: flex; align-items: center; gap: 8px; padding-inline: 10px; text-align: left; color: var(--leise); border-radius: 6px; }
.schritte > button:hover { color: var(--text); }
.schritte[data-offen="true"] .rein { transform: rotate(180deg); }
.schritte ol { display: grid; gap: 4px; padding: 2px 12px 10px 10px; }
.schritte li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0 8px; align-items: start; }
.schritte li > .ic { margin-top: 1px; color: var(--gut); }
.schritte li > .kranz { margin-top: 1px; }
.frage { background: var(--akzent-flaeche); box-shadow: inset 0 0 0 1px var(--akzent-linie); border-radius: 8px; padding: 12px 16px; display: grid; gap: 12px; }
.frage p { font-weight: 600; }
.frage-erledigt { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 18px; color: var(--leise); }
.frage-erledigt > .ic, .frage-erledigt > .kranz { margin-top: 2px; }
.frage-erledigt .i-haken { color: var(--gut); }
.datei-zeile { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--leise); }
.datei-zeile button { color: var(--akzent-t); font-family: var(--mono); font-size: 13px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.datei-zeile button:hover { text-decoration-color: currentColor; }
.pruefung, .bericht { background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); border-radius: 8px; padding: 14px 16px; display: grid; gap: 10px; }
.pruef-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pruef-kopf b { font-weight: 600; }
.pruef-kopf small { color: var(--leise); }
.pruef-kopf > .ic { color: var(--akzent-t); }
.pruefung p { white-space: pre-wrap; overflow-wrap: anywhere; }
.pruefung > small { color: var(--leise); overflow-wrap: anywhere; }
.pruef-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; border-top: 1px solid var(--linie); padding-top: 10px; font-size: 13px; line-height: 18px; color: var(--leise); }
.pruef-fuss span { flex: 1; min-width: 220px; }
.pruef-angebot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 6px 6px 6px 12px; box-shadow: inset 0 0 0 1px var(--linie); border-radius: 6px; font-size: 13px; line-height: 18px; color: var(--leise); }
.bericht { gap: 12px; }
.bericht-text, .bericht-zahlen { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 6px 12px; }
.bericht-text dt, .bericht-zahlen dt { color: var(--leise); font-size: 13px; }
.bericht-text dd, .bericht-zahlen dd { overflow-wrap: anywhere; }
.bericht-text ul { display: grid; gap: 4px; }
.bericht-text li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.bericht-text li > span { flex: 1; min-width: 200px; }
.bericht-zahlen { border-top: 1px solid var(--linie); padding-top: 10px; font-size: 13px; }
.bericht-zahlen dd { color: var(--leise); font-variant-numeric: tabular-nums; }
.hinweis-eintrag { box-shadow: inset 0 0 0 1px var(--linie); padding: 8px 12px; border-radius: 6px; color: var(--leise); font-size: 13px; line-height: 18px; }
.hinweis-eintrag.sperre { box-shadow: inset 0 0 0 1px var(--akzent-linie); background: var(--akzent-flaeche); color: var(--text); font-size: 14px; line-height: 20px; }
.fehler-eintrag { background: var(--rot-flaeche); color: var(--rot); padding: 8px 12px; border-radius: 6px; }

.fuss { padding: 0 var(--gr) 12px var(--gl); }
.fuss-innen { max-width: 720px; margin-inline: auto; display: grid; gap: 8px; position: relative; grid-template-columns: minmax(0, 1fr); }
.eingabe { box-shadow: inset 0 0 0 1px var(--linie2); border-radius: 8px; background: var(--flaeche); display: grid; transition: box-shadow .12s; }
.eingabe:focus-within { box-shadow: inset 0 0 0 1px var(--akzent-t); }
.eingabe .anhaenge { padding: 10px 12px 0; }
.textfeld { width: 100%; resize: none; border: 0; outline: 0; background: none; padding: 12px 14px 4px; min-height: 44px; max-height: 180px; display: block; }
/* Links die Werkzeuge (brechen bei wenig Platz um), rechts unten immer der Knopf zum Senden oder Anhalten. */
.eingabe-reihe { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; padding: 4px 6px 6px; }
.werkzeuge { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.senden { height: 30px; padding-inline: 14px; border-radius: 6px; background: var(--knopf); color: var(--auf-knopf); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background-color .12s; }
.senden:hover:not(:disabled) { background: var(--knopf-h); }
.senden:disabled { background: var(--flaeche3); color: var(--leise); }
.senden.halt { background: none; color: var(--text); box-shadow: inset 0 0 0 1px var(--linie2); font-weight: 500; }
.senden.halt:hover { background: var(--aktiv); }
.status { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 12px; line-height: 16px; color: var(--blass); padding-inline: 2px; }
.sperrhinweis { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; box-shadow: inset 0 0 0 1px var(--akzent-linie); background: var(--akzent-flaeche); border-radius: 6px; }
.sperrhinweis .ic { color: var(--akzent-t); margin-top: 2px; }
.nur-lesen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; box-shadow: inset 0 0 0 1px var(--linie2); border-radius: 8px; background: var(--flaeche); padding: 10px 12px; }
.nur-lesen > span:not(.kreis) { flex: 1; min-width: 200px; color: var(--leise); font-size: 13px; line-height: 18px; }
.nur-lesen b { color: var(--text); font-weight: 600; }
.befehle { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 15; background: var(--flaeche2); box-shadow: 0 0 0 1px var(--linie2), var(--schatten); border-radius: 8px; padding: 4px; display: grid; grid-template-columns: minmax(0, 1fr); max-height: min(460px, 62vh); overflow: auto; }
.befehl { width: 100%; display: flex; gap: 16px; align-items: baseline; justify-content: space-between; padding: 6px 8px; border-radius: 4px; text-align: left; }
.befehl:hover, .befehl:focus-visible { background: var(--aktiv2); }
.befehl span { flex: 1; min-width: 0; }
.befehl code, .hilfe dd code { flex: none; color: var(--blass); }
.hilfe { background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); border-radius: 8px; padding: 8px 8px 12px 12px; }
.hilfe-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.hilfe dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; font-size: 13px; line-height: 18px; padding-right: 4px; }
/* Neuer Chat: Überschrift und Eingabe stehen auf einer Achse, links bündig. */
.start { min-height: 0; overflow: auto; display: grid; align-content: center; justify-items: center; gap: 20px; padding: 24px var(--gr) 72px var(--gl); }
.start > * { width: min(720px, 100%); }
.start h1 { font-size: 24px; line-height: 32px; }
.start .fuss { padding: 0; }
/* Im neuen Chat steht die Eingabe in der Mitte: die Befehle klappen nach unten auf, oben wäre die Liste abgeschnitten. */
.start .befehle { bottom: auto; top: calc(100% + 6px); max-height: min(460px, 40vh); }
/* Agenten zum Einstieg: gleichartige Dinge, also eine Liste, keine Karten. */
.einstieg { display: grid; gap: 4px; }
.einstieg > span { font: 600 12px/16px var(--schrift-klein); color: var(--blass); padding-bottom: 4px; }
.einstieg-reihe { display: grid; border-top: 1px solid var(--linie); }
.einstieg-knopf { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 2px 16px; align-items: baseline; text-align: left; padding: 8px 0; border-bottom: 1px solid var(--linie); transition: color .12s; }
.einstieg-knopf b { font-weight: 600; }
.einstieg-knopf small { color: var(--leise); }
.einstieg-knopf:hover b, .einstieg-knopf[aria-pressed="true"] b { color: var(--akzent-t); }
.einstieg-knopf[aria-pressed="true"] small { color: var(--text); }

/* 8. Dateien neben dem Chat */
.ergebnis { min-width: 0; min-height: 0; border-left: 1px solid var(--linie); background: var(--flaeche); display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.ergebnis .kopfleiste { padding-inline: 16px 8px; }
.ergebnis .thema { background: var(--papier); }
.dateien { border-bottom: 1px solid var(--linie); padding-block: 4px; overflow-x: auto; }
.dateizeile { display: grid; grid-template-columns: 16px minmax(120px, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 2px 8px 2px 16px; min-height: 36px; min-width: 420px; }
.dateizeile.mit-aktion { grid-template-columns: 16px minmax(120px, 1fr) auto auto auto auto; }
.dateizeile.gewaehlt { background: var(--aktiv2); }
.dateizeile > .ic { color: var(--blass); }
.dateizeile.gewaehlt > .ic { color: var(--akzent-t); }
.dateiname { font-family: var(--mono); font-size: 13px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dateiname:hover { color: var(--akzent-t); }
.dateizeile small { color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vorschau { min-height: 0; overflow: auto; }
.vorschau pre { margin: 0; }
.vorschau-hinweis { padding: 24px 16px; color: var(--leise); }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th { position: sticky; top: 0; z-index: 1; background: var(--flaeche); text-align: left; font: 600 12px/16px var(--schrift-klein); color: var(--leise); padding: 10px 12px; border-bottom: 1px solid var(--linie2); white-space: nowrap; }
td { padding: 8px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.vorschau td { font-variant-numeric: tabular-nums; }
.vorschau tbody tr:hover td { background: var(--aktiv); }
th:first-child, td:first-child { padding-left: 16px; }
th:last-child, td:last-child { padding-right: 16px; }
.zahl, td.r, th.r { text-align: right; }
.zahl { font-variant-numeric: tabular-nums; }
.leer-feld { display: grid; place-content: center; text-align: center; gap: 4px; padding: 32px 24px; color: var(--leise); }
.leer-feld b { color: var(--text); font-weight: 600; }

/* 9. Team-Chat */
.team { min-height: 0; min-width: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.kanaele { min-height: 0; border-right: 1px solid var(--linie); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.kanaele .kopfleiste { padding-inline: 16px; }
.kanal-liste { overflow: auto; padding: 12px 8px; display: grid; gap: 16px; align-content: start; }
.gespraech { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.gespraech .kopfleiste b { font-weight: 600; }
.gespraech .kopfleiste small { color: var(--leise); }
.nachrichten { max-width: 860px; margin-inline: auto; display: grid; }
.tag-trenn { display: flex; align-items: center; gap: 12px; color: var(--blass); font-size: 12px; line-height: 16px; margin: 12px 0 8px; }
.tag-trenn::before, .tag-trenn::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.msg { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 0 12px; padding: 6px 8px; border-radius: 6px; align-items: start; }
.msg.folge { padding-top: 0; }
.msg:hover { background: var(--aktiv); }
.msg-kopf { display: flex; align-items: baseline; gap: 8px; }
.msg-kopf b { font-weight: 600; }
.msg-kopf time { font-size: 12px; line-height: 16px; color: var(--blass); font-variant-numeric: tabular-nums; }
.msg p { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--akzent-t); margin-top: 2px; }
.msg-aktion { opacity: 0; font-size: 12px; line-height: 16px; color: var(--leise); padding: 4px 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--linie2); white-space: nowrap; background: var(--papier); }
.msg:hover .msg-aktion, .msg-aktion:focus-visible { opacity: 1; }
.msg-aktion:hover { color: var(--text); }
.gespraech .fuss-innen { max-width: 860px; }
.team-reihe { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 0; }
.team-reihe .textfeld { padding: 5px 14px; min-height: 30px; }

/* 10. Seiten: eine Achse links, Abschnitte durch Raum getrennt, Listen und Tabellen durch Linien */
.seiten-rahmen { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.seite { min-height: 0; overflow: auto; padding: 24px var(--gr) 64px var(--gl); }
.seite-innen { max-width: 1120px; display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.seite-kopf { display: grid; gap: 4px; }
.seite-kopf p { color: var(--leise); max-width: 76ch; }
.seite code, .intro code { background: var(--flaeche3); padding: 0 5px; border-radius: 4px; }
.block { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-content: start; }
.block-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 28px; }
h2 .pille { display: inline-grid; vertical-align: 2px; margin-left: 6px; }
/* Tabellen und Listen einer Seite stehen ohne Kasten auf dem Grund. Text beginnt auf der Achse der Überschrift. */
.tabrahmen { border-block: 1px solid var(--linie); display: grid; grid-template-columns: minmax(0, 1fr); }
.tabrahmen:has(> table) { border-top: 0; overflow-x: auto; }
/* relative statt static: ein unsichtbarer Spaltenname (.versteckt) bleibt so in seiner Zelle und weitet die Seite nicht. */
.tabrahmen th { position: relative; top: auto; background: none; }
.tabrahmen th:first-child, .tabrahmen td:first-child { padding-left: 0; }
.tabrahmen th:last-child, .tabrahmen td:last-child { padding-right: 0; }
.tabrahmen tbody tr:last-child td { border-bottom: 0; }
.tabrahmen td { vertical-align: middle; height: 44px; }
.tabrahmen td .feld { background: var(--senke); }
/* In einer Tabelle endet der Verweis auf der rechten Kante der Seite, darum ohne Polster und ohne Fläche. */
.tabrahmen td.r .speichern { padding-inline: 0; }
.tabrahmen td.r .speichern:hover { background: none; color: var(--akzent-t); }
.tabrahmen td.r .speichern:hover .ic { color: inherit; }
tr.gewaehlt td { background: var(--aktiv); }
.name { font-weight: 600; }
.hirn-eintrag { position: relative; width: calc(100% + 16px); margin-inline: -8px; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 6px 8px; border-radius: 6px; text-align: left; color: inherit; text-decoration: none; }
.hirn-eintrag + .hirn-eintrag::before, .bericht-auf + .hirn-eintrag::before { content: ""; position: absolute; inset: -1px 8px auto 8px; height: 1px; background: var(--linie); }
button.hirn-eintrag:hover, a.hirn-eintrag:hover { background: var(--aktiv); }
.hirn-eintrag > .ic { color: var(--blass); }
.hirn-eintrag > span { display: grid; min-width: 0; }
.hirn-eintrag b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hirn-eintrag small { color: var(--leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hirn-eintrag span small { overflow: hidden; text-overflow: ellipsis; }
.hirn-eintrag .ueber { color: var(--rot); }
.fassungen { max-height: 220px; overflow: auto; }
.fassungen .hirn-eintrag { width: 100%; margin-inline: 0; padding-inline: 0; }
.fassungen .hirn-eintrag + .hirn-eintrag::before { inset-inline: 0; }
.bericht-auf { padding: 4px 0 16px 28px; display: grid; gap: 8px; }
.bericht-auf .bericht { box-shadow: none; background: none; padding: 4px 0 0; }
.leer-block { background: var(--flaeche); border-radius: 8px; padding: 20px 24px; color: var(--leise); }
.leer-block b { color: var(--text); font-weight: 600; display: block; }
.neu-zeile { display: flex; gap: 8px; flex-wrap: wrap; }
.neu-zeile .wachsend { flex: 1 1 240px; min-width: 0; width: auto; }
.neu-zeile .fest { flex: 0 1 170px; width: auto; }
.filter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); }
.filter button { padding: 6px 12px; color: var(--leise); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.filter button:hover { color: var(--text); }
.filter button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--akzent); font-weight: 600; }
.gruppenzeile td { font: 600 12px/16px var(--schrift-klein); color: var(--blass); height: auto; padding: 20px 0 6px; border-bottom-color: var(--linie2); }
.cb { width: 32px; }
.cb input { width: 16px; height: 16px; display: block; }
.cb input, .haken input { accent-color: var(--akzent); margin: 0; }
.t-titel { white-space: normal; min-width: 240px; width: 55%; overflow-wrap: anywhere; }
.erledigt-zeile .t-titel { text-decoration: line-through; color: var(--leise); }
td .feld.klein { height: 28px; width: 160px; font-size: 13px; }
.aufgaben-tab th:last-child, .aufgaben-tab td.fae { text-align: right; font-variant-numeric: tabular-nums; }
/* Mandat */
.stand-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 12px 0; border-block: 1px solid var(--linie); }
.mandat-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.mandat-stand .zustand { font: 600 14px/20px var(--schrift); padding: 0; background: none; color: var(--text); }
.mandat-stand .zustand.abnahme { color: var(--akzent-t); }
.mandat-stand .zustand.fertig { color: var(--gut); }
.mandat-stand > span:last-child { color: var(--leise); }
.nebenzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-radius: 8px; background: var(--flaeche); }
.nebenzeile span { flex: 1; min-width: 260px; color: var(--leise); font-size: 13px; line-height: 18px; max-width: 76ch; }
.seite .feldzeile textarea.feld { min-height: 120px; }
#mandat-form { max-width: 76ch; }
/* Verwaltung */
.vw-tab td { height: 56px; }
.verbrauch { display: grid; gap: 4px; min-width: 150px; font-variant-numeric: tabular-nums; }
.betrag { display: flex; align-items: center; gap: 8px; }
.betrag input { text-align: right; font-variant-numeric: tabular-nums; }

/* 11. Gehirn: Baum von oben nach unten. Oben das Gehirn, darunter die Bereiche, eingerückt die Fächer.
   Die Linien sind Rahmenlinien, damit nichts gezeichnet werden muss. Breit stehen vier Spalten nebeneinander
   (Bereich, was hier liegt, was die KI damit macht, Adresse); schmal oder neben der offenen Tafel stapelt sich
   der Text unter dem Titel. */
.hirn { min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); position: relative; }
.hirn-flaeche { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.hirn-scroll { min-height: 0; overflow: auto; padding: 24px var(--gr) 64px var(--gl); display: grid; gap: 32px; align-content: start; grid-template-columns: minmax(0, 1120px); }
.hirn.offen .hirn-scroll { padding-right: calc(min(560px, 100vw) + 24px); }
.hirn-suche { display: flex; gap: 8px; align-items: center; max-width: 520px; }
.hirn-suche .suche { flex: 1; box-shadow: inset 0 0 0 1px var(--linie2); background: var(--senke); }
.hirn-suche .suche:focus-within { box-shadow: inset 0 0 0 1px var(--akzent-t); }
.faellig { font-style: normal; color: var(--rot); }
.baum { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); --spalte: 200px; --schritt: 24px; }
.baum-kopf { display: none; }
.ast { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: start; text-align: left; padding: 10px 12px; min-height: 44px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); border-radius: 6px; transition: box-shadow .12s; }
.ast:hover { box-shadow: inset 0 0 0 1px var(--linie2); }
.ast.wurzel { background: var(--flaeche2); }
.ast.gewaehlt { box-shadow: inset 0 0 0 2px var(--akzent); }
.ast b { font-weight: 600; overflow-wrap: anywhere; }
.ast .was, .ast .wirkung { grid-column: 1 / -1; font-size: 13px; line-height: 18px; }
.ast .wirkung { color: var(--leise); }
.ast .adresse { grid-column: 2; grid-row: 1; display: grid; justify-items: end; min-width: 0; }
.ast .adresse code { display: none; font-size: 12px; line-height: 18px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ast .adresse small { font-size: 12px; line-height: 16px; color: var(--blass); display: flex; gap: 8px; white-space: nowrap; }
.aeste { display: grid; gap: 8px; padding-left: var(--schritt); grid-template-columns: minmax(0, 1fr); }
.aeste > li { position: relative; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.aeste > li::before { content: ""; position: absolute; left: -13px; top: 22px; width: 13px; height: 1px; background: var(--linie2); }
.aeste > li::after { content: ""; position: absolute; left: -13px; top: -8px; bottom: 0; width: 1px; background: var(--linie2); }
.aeste > li:last-child::after { bottom: auto; height: 31px; }
@media (min-width: 1181px) {
  .hirn:not(.offen) .baum-kopf, .hirn:not(.offen) .ast { display: grid; grid-template-columns: calc(var(--spalte) - var(--tiefe, 0) * var(--schritt)) minmax(0, 1fr) minmax(0, 1fr) 208px; column-gap: 16px; }
  .hirn:not(.offen) .baum-kopf { padding-inline: 12px; font: 600 12px/16px var(--schrift-klein); color: var(--blass); }
  .hirn:not(.offen) .ast .was, .hirn:not(.offen) .ast .wirkung { grid-column: auto; }
  .hirn:not(.offen) .ast .adresse { grid-column: auto; grid-row: auto; justify-items: start; }
  .hirn:not(.offen) .ast .adresse code { display: block; }
}

/* 12. Tafel rechts: hier wird geändert. Sie liegt über der Seite, die Übersicht dahinter bleibt zum Vergleichen sichtbar. */
.tafel { position: absolute; z-index: 18; inset: 0 0 0 auto; width: min(480px, 100vw); border-left: 1px solid var(--linie2); background: var(--flaeche); box-shadow: var(--schatten); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.tafel.breit { width: min(560px, 100vw); }
.tafel .kopfleiste { padding-inline: 16px 8px; }
.tafel .kopfleiste > .symbol:first-child { margin-left: -8px; }
.tafel-form { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.tafel-innen { min-height: 0; overflow: auto; padding: 16px; display: grid; gap: 24px; align-content: start; grid-template-columns: minmax(0, 1fr); }
.tafel-fuss { border-top: 1px solid var(--linie); padding: 12px 16px 16px; display: grid; gap: 12px; background: var(--flaeche); }
.tafel .leer-zeile { padding: 10px 0; }
.tafel-schleier { position: absolute; inset: 0; z-index: 17; background: var(--schleier); }
.themenblock { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.themenblock legend { padding: 0; font-weight: 600; margin-bottom: 4px; }
.wahlzeile { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; box-shadow: inset 0 0 0 1px var(--linie); border-radius: 6px; cursor: pointer; }
.wahlzeile:hover { box-shadow: inset 0 0 0 1px var(--linie2); }
.wahlzeile:has(input:checked) { box-shadow: inset 0 0 0 1px var(--akzent-linie); background: var(--akzent-flaeche); }
.wahlzeile:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 1px; }
.wahlzeile input[type="radio"], .wahlzeile input[type="checkbox"] { accent-color: var(--akzent); width: 16px; height: 16px; margin: 0; flex: none; }
.wahltext { flex: 1; min-width: 0; display: grid; }
.wahltext b { font-weight: 600; }
.wahltext small { color: var(--leise); }
.wahlzeile .betrag { color: var(--leise); white-space: nowrap; }
.wahlzeile .betrag .feld { width: 96px; color: var(--text); }
.faktor { flex: none; font-size: 12px; line-height: 16px; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stufenwahl { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); box-shadow: inset 0 0 0 1px var(--linie2); border-radius: 6px; overflow: hidden; }
.stufenwahl label { position: relative; display: grid; cursor: pointer; }
.stufenwahl label + label { border-left: 1px solid var(--linie); }
.stufenwahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.stufenwahl span { display: grid; place-items: center; height: 34px; padding-inline: 4px; font-size: 13px; color: var(--leise); text-align: center; white-space: nowrap; }
.stufenwahl input:checked + span { background: var(--akzent-flaeche); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--akzent); }
.stufenwahl input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: -2px; }
.aenderungen { font-size: 13px; line-height: 18px; display: grid; gap: 4px; }
.aenderungen b { font-weight: 600; }
.aenderungen ul { display: grid; gap: 2px; padding-left: 16px; list-style: disc; color: var(--leise); }
.adresszeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; line-height: 16px; color: var(--leise); border-top: 1px solid var(--linie); padding-top: 12px; }
.adresszeile code { color: var(--text); overflow-wrap: anywhere; font-size: 12px; }
.adresszeile .speichern { font-size: 12px; margin-left: auto; }

/* 13. Formulare: Anmeldung, Einladung und die kleinen Formulare in der Tafel */
.formular { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.formular label { display: grid; gap: 6px; font-weight: 600; }
.formular label small { font-weight: 400; color: var(--leise); }
.formular .feld { height: 40px; font-weight: 400; }
.formular .knopf { height: 40px; }
.formular.schlicht { gap: 12px; }
.formular.schlicht .feld { height: 32px; }
.formular.schlicht textarea.feld.kurz { height: 64px; }
.formular.schlicht .knopf { height: 32px; }
.schritt-zahl { font: 600 12px/16px var(--schrift-klein); color: var(--akzent-t); }
.qr { justify-self: center; width: 200px; height: 200px; background: #fff; border-radius: 8px; padding: 8px; }
.qr svg { width: 100%; height: 100%; display: block; }
.schluessel { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; text-align: center; background: var(--flaeche2); border-radius: 6px; padding: 8px; overflow-wrap: anywhere; user-select: all; }
/* Anmeldung: das ganze Logo auf seinem Grund, darunter das Formular. Sonst nichts. */
.anmeldung { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: auto; padding: 32px var(--gr) 16px var(--gl); }
.anmeldung-innen { width: min(360px, 100%); display: grid; gap: 32px; align-self: center; justify-self: center; grid-template-columns: minmax(0, 1fr); }
.titelblock { display: grid; gap: 4px; }
.titelblock p { color: var(--leise); }
.anmeldung-fuss { text-align: center; font-size: 13px; line-height: 18px; color: var(--blass); padding-top: 16px; }

/* 14. Rückfrage, Meldung, Einführung */
.schleier-voll, .intro-schleier { position: fixed; inset: 0; background: var(--schleier); display: grid; place-items: center; padding: 16px var(--gr) 16px var(--gl); overflow: auto; }
.schleier-voll { z-index: 70; }
.intro-schleier { z-index: 60; }
.dialog { width: min(440px, 100%); background: var(--flaeche2); box-shadow: 0 0 0 1px var(--linie2), var(--schatten); border-radius: 8px; padding: 24px; display: grid; gap: 8px; }
.dialog p { color: var(--leise); }
.dialog .knoepfe { margin-top: 16px; }
/* Die Meldung kehrt das Thema um: hell auf dunklem Bildschirm, dunkel auf hellem. So steht sie nie im Grund. */
.meldung { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; align-items: center; gap: 16px; background: var(--meld-grund); color: var(--meld-text); box-shadow: var(--schatten); border-radius: 6px; padding: 8px 14px; max-width: calc(100vw - 32px); }
.meldung button { font-weight: 600; color: var(--meld-aktion); padding: 2px 4px; border-radius: 4px; white-space: nowrap; }
.meldung button:hover { text-decoration: underline; text-underline-offset: 3px; }
.intro { width: min(600px, 100%); background: var(--flaeche2); box-shadow: 0 0 0 1px var(--linie2), var(--schatten); border-radius: 8px; padding: 28px 32px; display: grid; gap: 16px; }
.intro-schritte { display: grid; gap: 12px; }
.intro-schritte li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
.intro-schritte .nr { font-weight: 600; color: var(--akzent-t); font-variant-numeric: tabular-nums; }
.intro-schritte .nr::after { content: "."; }
.intro-schritte b { font-weight: 600; }
.intro-schritte p { color: var(--leise); }

/* 15. Claude Code der Leitung im Terminal */
.terminal-rahmen { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.terminal-rahmen .kopfleiste b { font-weight: 600; }
.terminal-hinweis { padding: 8px var(--gr) 8px var(--gl); font-size: 13px; line-height: 18px; color: var(--leise); border-bottom: 1px solid var(--linie); }
.terminal-hinweis code { color: var(--text); }
.terminal { width: 100%; height: 100%; border: 0; display: block; background: #0b0f14; }

/* 16. Schmale Bildschirme */
@media (max-width: 1100px) {
  .schale { grid-template-columns: minmax(0, 1fr); }
  .leiste { position: absolute; inset: 0 auto 0 0; width: min(296px, 86vw); z-index: 30; transform: translateX(-102%); transition: transform .18s ease; visibility: hidden; }
  .schale.leiste-offen .leiste { transform: none; visibility: visible; box-shadow: var(--schatten); }
  .schale.leiste-offen .schleier { display: block; position: absolute; inset: 0; z-index: 25; background: var(--schleier); }
  .leiste-kopf .zu { display: grid; }
  .symbol.nur-schmal { display: grid; }
  .kopfleiste > .nur-schmal:first-child { margin-left: -8px; }
}
@media (max-width: 760px) {
  :root { --gl: max(16px, env(safe-area-inset-left, 0px)); --gr: max(16px, env(safe-area-inset-right, 0px)); }
  .arbeit.offen { grid-template-columns: minmax(0, 1fr); }
  .arbeit .ergebnis { display: none; border-left: 0; }
  .arbeit[data-mobil="ergebnis"] .chat { display: none; }
  .arbeit[data-mobil="ergebnis"] .ergebnis { display: grid; }
  .kopf-info { display: none; }
  /* Telefon: die Kopfzeile des Chats trägt nur Modell, Agent und den Knopf zu den Dateien. Das Mandat steht in der Leiste. */
  .kopfleiste .kopf-mandat, .kopf-r .symbol[data-a="panel"] { display: none; }
  .wahlknopf .kurz { max-width: 120px; }
  .start h1 { font-size: 20px; line-height: 28px; }
  .einstieg-knopf { grid-template-columns: minmax(0, 1fr); }
  .dateien { overflow-x: visible; }
  .dateizeile { min-width: 0; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 2px 10px; padding-block: 6px; }
  .dateizeile small { grid-column: 2; grid-row: 2; }
  .dateizeile .speichern { grid-column: 3; grid-row: 1; }
  .dateizeile.mit-aktion button.speichern { grid-column: 3; grid-row: 2; }
  .befehl { flex-direction: column; gap: 0; }
  .team { grid-template-columns: minmax(0, 1fr); }
  .kanaele { border-right: 0; }
  .team[data-mobil="liste"] .gespraech, .team[data-mobil="gespraech"] .kanaele { display: none; }
  .neu-zeile .fest { flex: 1 1 140px; }
  /* Dateien des Mandats: am Telefon ohne die Spalte Größe, damit Name, Datum und Herunterladen ohne Rollen passen. */
  .dateien-tab th:nth-child(2), .dateien-tab td:nth-child(2) { display: none; }
  .dateien-tab td { white-space: normal; }
  .dateien-tab td.r { white-space: nowrap; }
  .msg { grid-template-columns: 32px minmax(0, 1fr); }
  .msg-aktion { grid-column: 2; justify-self: start; opacity: 1; box-shadow: none; background: none; padding: 2px 0; margin-top: 2px; color: var(--blass); }
  .aufgaben-tab thead { display: none; }
  .aufgaben-tab tbody tr { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--linie); }
  .aufgaben-tab tbody tr:last-child { border-bottom: 0; }
  .aufgaben-tab td { border-bottom: 0; padding: 6px 8px; height: auto; }
  .aufgaben-tab td.cb { grid-row: span 2; }
  .aufgaben-tab td.t-titel { grid-column: 2 / 4; min-width: 0; width: auto; padding-bottom: 0; }
  .aufgaben-tab td.proj { display: none; }
  .aufgaben-tab td.zust { grid-column: 2; padding-top: 4px; }
  .aufgaben-tab td.zust .feld.klein { width: 100%; max-width: 190px; }
  .aufgaben-tab td.fae { grid-column: 3; padding-top: 4px; text-align: right; }
  .aufgaben-tab tr.gruppenzeile { display: block; }
  .aufgaben-tab tr.gruppenzeile td { display: block; padding: 16px 0 6px; }
  .hirn.offen .hirn-scroll { padding-right: var(--gr); }
  .bericht-text, .bericht-zahlen { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bericht-text dd, .bericht-zahlen dd { margin-bottom: 8px; }
  .bericht-auf { padding-left: 0; }
  .feldzeile.quer { grid-template-columns: minmax(0, 1fr); }
  .intro { padding: 20px 16px; }
}
@media (min-width: 761px) { .nur-telefon { display: none !important; } }
/* Finger statt Maus: alles, was man antippt, ist mindestens 40 Pixel hoch. */
@media (hover: none) {
  .msg-aktion, .chatzeile .mehr { opacity: 1; }
  .nav, .knopf, .feld, .wahlknopf, .symbol, .senden, .mandat-kopf .auf { min-height: 40px; }
  .nav.unter, .knopf.klein, .wahlknopf.klein, td .feld.klein { min-height: 36px; }
  .symbol { min-width: 40px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }