/* huelle.css — Renés Hülle für die Anwendung (09.08.2026).

   Seitenleiste mit Projektwahl und Bereichs-Navigation, daneben die jeweilige
   Ansicht. Die bisherige Arbeitsfläche (Chat + Schreibtisch + Regal) ist dabei
   EINE der Ansichten und behält ihren gesamten Aufbau — deshalb liegt diese
   Datei NACH app.css und ergänzt sie, statt sie zu ersetzen.

   Farben kommen durchgehend aus den Variablen in app.css; hier steht keine
   einzige feste Farbe, damit hell und dunkel ohne Doppelpflege tragen.

   Bewegung nur über transform/opacity und nur am angefassten Element
   (ADR-077) — Farbwechsel lösen keinen Umbruch aus und sind deshalb erlaubt. */

.ikon { width: 18px; height: 18px; flex: none; display: block; }

#rumpf { flex: 1; display: flex; min-height: 0; }
#inhalt { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* Ab 901px steht die Leiste fest im Fluss statt als Schublade darüber —
   dieselbe Grenze wie SCHMAL() in app.js (eine Zahl, zwei Stellen). */
@media (min-width: 901px) {
  #seitenmenue { position: static; transform: none; width: 252px; flex: none;
    box-shadow: none; z-index: auto; padding: 18px 14px; }
  #menue, #schleier, .mkopf button { display: none; }
}

#seitenmenue .marke { display: flex; align-items: center; gap: 9px; font-weight: 700;
  font-size: 17px; color: var(--kopf); letter-spacing: -.02em; }
.markeZeichen { color: var(--gold); display: grid; place-items: center; }
.markeZeichen .ikon { width: 26px; height: 26px; }
.mkopf { margin-bottom: 14px; }

#projektWahl { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px;
  border: 1px solid var(--linie); border-radius: var(--rundKlein); background: var(--panel);
  color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; margin-bottom: 14px;
  transition: border-color .16s ease; }
#projektWahl:hover, #projektWahl:focus-visible { border-color: var(--gold); outline: none; }
.pwZeichen { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid;
  place-items: center; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 13%, transparent); }
.pwZeichen .ikon { width: 15px; height: 15px; }
.pwName { flex: 1; min-width: 0; text-align: left; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Der Chevron ist als neutrale Spitze nach RECHTS gezeichnet — so wird er
   auch anderswo gebraucht. Hier öffnet sich die Liste nach UNTEN, also wird er
   gedreht statt ein zweites Motiv zu zeichnen. Beim Tausch des alten Sprites am
   21.08.2026 fiel das auf: Das alte Zeichen zeigte fest nach unten und trug
   seine Richtung damit unsichtbar mit sich herum. */
.pwPfeil { width: 14px; height: 14px; color: var(--dim); transform: rotate(90deg); }
#projektListe { min-width: 220px; padding: 6px; }
#projektListe button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px;
  background: transparent; border: 0; border-radius: 8px; color: var(--text); font: inherit;
  font-size: 13.5px; cursor: pointer; text-align: left; }
#projektListe button:hover, #projektListe button:focus-visible {
  background: var(--zeile); outline: none; }
#projektListe button.aktiv { color: var(--goldText); font-weight: 600; }

.navGruppe { display: flex; flex-direction: column; gap: 2px; }
.navKnopf { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 10px;
  min-height: 32px;
  border: 1px solid transparent; border-radius: var(--rundKlein); background: transparent;
  color: var(--dim); font: inherit; font-size: 14px; cursor: pointer; text-align: left;
  transition: background-color .14s ease, color .14s ease; }
.navKnopf .ikon { color: var(--dim); transition: color .14s ease; }
.navKnopf:hover, .navKnopf:focus-visible { color: var(--text); background: var(--zeile); outline: none; }
.navKnopf:hover .ikon, .navKnopf:focus-visible .ikon { color: var(--text); }
.navKnopf.aktiv { color: var(--goldText); font-weight: 500;
  background: color-mix(in srgb, var(--gold) 12%, transparent); }
.navKnopf.aktiv .ikon { color: var(--goldText); }
/* Die Reiter des promms (07.09.2026, Flows Wort): flach und immer sichtbar —
   keine zweite Leiste unter dem Titel; nichts klappt auf. Bis Welle 3 standen
   sie eingerückt unter ihrem promm-Kopf unter „Wissen". Seitdem sind es die
   Reiter des GEWÄHLTEN Projekts, in der ersten Ebene wie jeder andere
   Menüpunkt (Flows E-5). Seit 25.09.2026 (Flow) wieder eingerückt, mit einer
   Leitlinie links: Die Reiter kommen aus dem Projekt und wechseln mit ihm, die
   festen Menüpunkte bleiben; der Einzug zeigt die zwei Arten auf einen Blick. */
.navPromm { display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 4px 19px; padding-left: 8px; border-left: 1px solid var(--linie); }
.navPromm .navKnopf { font-size: 13.5px; min-height: 30px; padding: 6px 10px; }
.navPromm[hidden], .navKnopf[hidden], .navFestZeile[hidden] { display: none; }
/* R-17/R-18 (30.09.2026, Flow): Dokumente, Output, Tests und Verlauf sind feste Menüpunkte
   wie Planung oder Hilfe, darum ohne Einzug und Leitlinie der dynamischen Reiter. */
.navFestZeile { display: flex; flex-direction: column; gap: 2px; }
/* Die Projekt-Wahl: Kacheln je promm, darunter die Vorlagen. Eine angekündigte
   Vorlage ist sichtbar, aber blass — sie zeigt, was kommt. */
.prommSuche { margin-bottom: 12px; }
.prommSuche input { width: 100%; min-height: 36px; padding: 0 12px; border: 1px solid var(--linie);
  border-radius: 8px; background: var(--zeile); color: var(--text); font: inherit; }
.prommSuche input:focus-visible { border-color: var(--gold); outline: none; }
.prommProjekte { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; margin-bottom: 24px; }
.prommProjekt, .prommVorlage { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 44px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 10px;
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s ease, color .12s ease; }
.prommProjekt .ikon, .prommVorlage .ikon { width: 18px; height: 18px; color: var(--dim); }
.prommProjekt:hover, .prommProjekt:focus-visible, .prommVorlage:hover, .prommVorlage:focus-visible {
  border-color: var(--akzent); outline: none; }
.prommProjekt.gewaehlt { border-color: var(--gold); color: var(--goldText); }
.prommProjekt.gewaehlt .ikon { color: var(--goldText); }
.prommProjektTitel { font-weight: 600; font-size: 14px; }
.prommProjektKurz { font-size: 12px; color: var(--dim); line-height: 1.35; }
.prommVorlage.angekuendigt { opacity: .45; cursor: default; }
.prommVorlage.angekuendigt:hover { border-color: var(--linie); }

#nutzerChip { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px;
  border: 1px solid var(--linie); border-radius: var(--rundKlein); background: transparent;
  color: var(--text); font: inherit; cursor: pointer; margin-top: 10px;
  transition: border-color .16s ease; }
#nutzerChip:hover, #nutzerChip:focus-visible { border-color: var(--gold); outline: none; }
.ncBild { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid;
  place-items: center; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 13%, transparent); }
.ncBild .ikon { width: 16px; height: 16px; }
.ncText { flex: 1; min-width: 0; text-align: left; }
.ncName { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ncRolle { display: block; font-size: 11px; color: var(--dim); }
.ncRolle:empty { display: none; }

/* --- Kopfzeile der Ansicht -------------------------------------------------- */

header { padding: 13px 24px; background: var(--panel); flex-wrap: nowrap; gap: 14px; }
.kopfTitel { min-width: 0; }
header h1, .kopfTitel h1 { font: 700 19px var(--schrift); color: var(--kopf);
  letter-spacing: -.022em; text-shadow: none; }
/* Die Unterzeile der Ansicht (Renés F1, 06.09.2026): außerhalb der Wissens-
   Ansicht der feste Untertitel, in ihr der Raum — Bereich · Rolle · Lese- oder
   Schreibrecht, bei einem blumm dazu blumm und promm. EIN Träger: Zwei graue
   Zeilen unter einer Überschrift sind eine Textwand, keine Auskunft.
   `[hidden]` und `:empty` brauchen eigene Zeilen, weil das `display: block`
   darüber beides sonst aussticht. */
#raumZeile { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#raumZeile:empty { display: none; }
#raumZeile[hidden] { display: none; }
.kopfWerkzeuge { margin-left: auto; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: flex-end; }
/* Besetzung, Kosten und Statuspunkt sind Auskuenfte ueber das laufende
   Gespraech. Auf einer Seite ohne Gespraech beantworten sie eine Frage, die
   dort niemand stellt — und die Kostenzahl eines unsichtbaren Chats neben
   einer Meeting-Liste liest sich wie deren Summe. */
body:not([data-ansicht="chats"]) .kopfWerkzeuge { display: none; }
body:not([data-ansicht="chats"]) .schalter { display: none; }

.aktion.haupt { background: var(--gold); border-color: var(--gold); color: #fff;
  font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.aktion.haupt .ikon { width: 15px; height: 15px; }
.aktion.haupt:hover { background: var(--goldhell); border-color: var(--goldhell); color: #fff; }

/* --- Ansichten -------------------------------------------------------------- */

.ansicht { display: none; flex: 1; min-height: 0; overflow-y: auto; }
body[data-ansicht="uebersicht"]     #ansichtUebersicht,
body[data-ansicht="wissen"]         #ansichtWissen,
body[data-ansicht="entscheidungen"] #ansichtEntscheidungen,
body[data-ansicht="dokumente"]      #ansichtDokumente,
body[data-ansicht="ziele"]          #ansichtZiele,
body[data-ansicht="aufgaben"]       #ansichtAufgaben,
body[data-ansicht="meetings"]       #ansichtMeetings,
body[data-ansicht="knowledge"]      #ansichtKnowledge { display: block; }
/* Knowledge rollt in seinen Spalten, nicht als Seite — sonst wandert der Baum
   mit dem Text nach oben und man liest ohne Navigation. */
body[data-ansicht="knowledge"] #ansichtKnowledge { overflow: hidden; }
/* Die Arbeitsflaeche IST das Meeting: Gespraech, Eingabe und Werkzeugleiste
   in einem Zug. Auf einer Seite ohne offenes Gespraech gibt es nichts davon
   zu zeigen — und damit stellt sich die Frage „was zeigt die Leiste ohne
   Meeting" gar nicht erst. Sie loest sich auf, statt mit ausgegrauten
   Knoepfen beantwortet zu werden. */
body:not([data-ansicht="chats"]) #arbeitsflaeche { display: none; }

.ansichtBahn { max-width: 1000px; margin: 0 auto; padding: 24px 24px 44px;
  display: flex; flex-direction: column; gap: 16px; }

.zahlenReihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.zahlKachel { background: var(--panel); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 16px 18px; }
.zkName { font-size: 12px; color: var(--dim); }
.zkWert { font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin-top: 4px; line-height: 1.1; }
.zkWert.ohne { color: var(--dim); }
.zkFuss { font-size: 11.5px; color: var(--dim); margin-top: 4px; }

.tafel { background: var(--panel); border: 1px solid var(--linie);
  border-radius: var(--rund); overflow: hidden; }
.tafelKopf { padding: 15px 18px 10px; }
.tafelKopf h2 { font: 700 15px var(--schrift); color: var(--kopf); }
.tafelZeile { display: flex; align-items: center; gap: 11px; padding: 11px 18px;
  border-top: 1px solid var(--zeile); font-size: 13.5px; }
.tafelZeile .ikon { width: 16px; height: 16px; color: var(--dim); }
.tafelName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tafelZeit { margin-left: auto; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.tafelLeer { padding: 22px 18px; color: var(--dim); font-size: 13.5px; }

/* --- Meetings-Seite (20.08.2026, Renés N1) ---------------------------------
   Eine Tabelle statt einer Knopfleiste. Alle Maße stehen hier und nicht im
   JavaScript (Haus-Regel „Anwendungs-Standards" §6) — nur so kann die
   Telefon-Regel unten sie ueberhaupt erreichen. */

.navFlach { flex: 0 0 auto; }
.navZahl { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 9px;
  background: var(--gold); color: #fff; font: 600 10.5px var(--schrift);
  text-align: center; line-height: 1.5; }

.ansichtBahn.weit { max-width: 1180px; }
.mtKopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mtKopf .aktion.haupt { min-height: 36px; }
.mtFilter { margin: 0; }
.mtSuche { position: relative; margin-left: auto; display: flex; align-items: center; }
.mtSuche .ikon { position: absolute; left: 9px; width: 15px; height: 15px;
  color: var(--dim); pointer-events: none; }
.mtSuche input { min-height: 36px; padding: 0 12px 0 31px; min-width: 210px;
  border: 1px solid var(--linie); border-radius: var(--rundKlein);
  background: var(--panel); color: var(--text); font: 400 13px var(--schrift); }
.mtSuche input:focus-visible { border-color: var(--gold); outline: none; }

.mtTafel + .mtTafel { margin-top: 16px; }
.mtRahmen { overflow-x: auto; }
.mtTabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mtTabelle th { text-align: left; padding: 0 12px; background: var(--zeile);
  border-top: 1px solid var(--zeile); font-weight: 400; }
.mtSort { display: inline-flex; align-items: center; gap: 5px; min-height: 32px;
  /* „EIN" und „AUS" sind kurz — ohne Mindest-Breite bleibt der Sortier-Knopf
     unter 32 Pixel, obwohl die Zeile hoch genug ist (gemessen 24×32). */
  min-width: 32px; justify-content: center; padding: 0 2px; background: transparent; border: 0; cursor: pointer;
  color: var(--dim); font: 600 11px var(--schrift); letter-spacing: .04em;
  text-transform: uppercase; }
.mtSort:hover, .mtSort:focus-visible { color: var(--text); outline: none; }
.mtSort.aktiv { color: var(--goldText); }
/* Die Richtung ist ein Dreieck, kein Wort — ein Pfeil sagt „ab" und „auf" in
   jeder Sprache (Haus-Regel §4, Symbole vor Text). */
.mtPfeil { width: 0; height: 0; border-left: 4px solid transparent;
  border-right: 4px solid transparent; border-bottom: 5px solid currentColor; }
.mtPfeil.ab { border-bottom: 0; border-top: 5px solid currentColor; }

.mtTabelle td { padding: 0 12px; height: 40px; white-space: nowrap;
  border-top: 1px solid var(--zeile); }
.mtZeile { cursor: pointer; }
.mtZeile:hover { background: var(--zeile); }
.mtZeile:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* Archiviert heißt weggelegt, nicht weg: leiser, aber lesbar. */
/* Ein abgeschlossenes Meeting ist nicht weggeräumt, es ist fertig (Renés F12,
   06.09.2026): Es bleibt in der Liste, blasser, und trägt sein eigenes Zeichen.
   Das Wort dazu steht im Hover — Symbole vor Text (Haus-Regel 17 §4). */
.mtZeile.archiviert { opacity: .62; }
.mtFertig { flex: none; display: inline-flex; align-items: center; color: var(--dim); }
.mtFertig .ikon { width: 14px; height: 14px; }
.mtTitel { width: 62%; max-width: 0; }
.mtTitelZeile { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mtBild { position: relative; display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; }
.mtBild .ikon { width: 17px; height: 17px; color: var(--dim); }
.mtName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtZeit { font-size: 12.5px; color: var(--dim); }
.mtZahl { text-align: right; font-variant-numeric: tabular-nums; }
.mtTabelle th.mtZahl .mtSort { justify-content: flex-end; }
/* „—" ist kein Platzhalter fuer eine Zahl, sondern die Aussage „dazu wurde
   nichts erfasst". Deshalb leise und mit Hinweis, nie als Null. */
.mtOhne { color: var(--griffFarbe); }
.mtAktionen { text-align: right; width: 1%; }
.mtAktionen .teilenKnopf { width: 32px; height: 32px; opacity: .4; }
.mtZeile:hover .mtAktionen .teilenKnopf,
.mtAktionen .teilenKnopf:focus-visible { opacity: .9; }

.mtLeer { display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: 56px 24px; background: var(--panel); border: 1px solid var(--linie);
  border-radius: var(--rund); }
.mtLeer .ikon { width: 34px; height: 34px; color: var(--gold); opacity: .5; }
.mtLeer h2 { font: 700 16px var(--schrift); color: var(--kopf); }
.mtLeer p { color: var(--dim); font-size: 13.5px; max-width: 46ch; }
.mtLeer p:empty { display: none; }
.mtFuss { display: flex; justify-content: center; }
/* `hidden` ist ein Attribut, keine Bitte: Jede eigene `display`-Regel schlaegt
   die Vorgabe des Browsers, und der Leerzustand stand deshalb als leerer Kasten
   unter einer vollen Liste. Diese Zeile gehoert hinter die Regeln, die sie
   zuruecknimmt — Reihenfolge entscheidet bei gleicher Spezifitaet. */
/* Ersetzt durch die eine Regel am Dateiende — siehe dort. */

/* --- Knowledge-Seite (20.08.2026, Renés N4) --------------------------------- */
.kwSeite { display: flex; flex-direction: column; height: 100%; }
/* Der Knowledge-Kopf ist am 21.08.2026 entfallen. Was blieb, sitzt als
   Symbol-Leiste ueber dem Baum — dort, wo die Unterlagen liegen. */
.kwLeiste { display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-bottom: 1px solid var(--linie); }
.kwLeiste .kwAblage { margin-left: auto; font-size: 11px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kwLeiste[hidden] { display: none; }
.zAktion.an { border-color: var(--gold); color: var(--goldText); }
.kwNeuForm { display: grid; gap: 12px; justify-items: start;
  padding: 16px 24px; border-bottom: 1px solid var(--linie); background: var(--zeile); }
.kwNeuForm[hidden] { display: none; }
.kwNeuForm .hinweis { font-size: 12.5px; color: var(--dim); }
.kwFelder { display: flex; gap: 14px; flex-wrap: wrap; }
.kwFelder label { display: grid; gap: 4px; font-size: 12px; color: var(--dim); }
.kwFelder input { min-height: 36px; min-width: 200px; padding: 0 10px;
  border: 1px solid var(--linie); border-radius: var(--rundKlein);
  background: var(--panel); color: var(--text); font: 400 13.5px var(--schrift); }
.kwFelder input:focus-visible { border-color: var(--gold); outline: none; }
/* Vorhaben-Wahl (06.09.2026): dieselbe Bauform wie die Stufen-Leiste im
   Lesesaal — Symbol-Umschalter statt Auswahlfeld (Haus-Regel 17 §4). Eigene
   Klassen statt geteilter: die Stufen tragen ihre Farben nach Vertraulichkeit,
   und ein zweiter Sinn an derselben Klasse wäre in zwei Wochen ein Fehler. */
.kwVorhaben { display: flex; align-items: center; gap: 6px; }
.kwVorhabenKnopf { display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--linie); border-radius: 8px; background: transparent;
  color: var(--dim); cursor: pointer; opacity: .45;
  transition: opacity .12s ease, border-color .12s ease; }
.kwVorhabenKnopf .ikon { width: 15px; height: 15px; }
.kwVorhabenKnopf:hover, .kwVorhabenKnopf:focus-visible { opacity: .8; outline: none;
  border-color: var(--akzent); }
.kwVorhabenKnopf.aktiv { opacity: 1; border-color: currentColor; }
.kwVorhabenKnopf.vorhaben-keins.aktiv { color: var(--dim); }
.kwVorhabenKnopf.vorhaben-software.aktiv { color: var(--goldText); }
.kwVorhabenKnopf.vorhaben-praesentation.aktiv { color: var(--gruen, #5fbf7f); }
@media (max-width: 768px) {
  .kwVorhabenKnopf { width: 36px; height: 36px; }
}

/* Die Frage-Zeile der Knowledge-Seite (21.08.2026). Sie ersetzt die eigene
   Zeile der erzeugten Szene, die beim Absenden ihren Rahmen neu schreibt und
   dabei Bereich, Anmeldung und Bearbeiten-Recht verliert. */
.kwSuche { display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--linie); }
.kwSuche[hidden] { display: none; }
.kwSuche input { flex: 1; min-width: 0; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--linie); border-radius: var(--rundKlein);
  background: var(--panel); color: var(--text); font: 400 13.5px var(--schrift); }
.kwSuche input:focus-visible { border-color: var(--gold); outline: none; }

/* Namenszeile im Lesesaal: der Pfad und der Weg, ihn zu aendern (21.08.2026).
   Die Masse stehen hier und nicht im JavaScript — eine Inline-Groesse nimmt
   der Bildschirm-Regel unten das Wort (Haus-Regel 17 §6). */
.kwName { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kwNameWort { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font: 400 12px ui-monospace, Consolas, monospace; color: var(--dim); }
.kwNameFeld { flex: 1; min-width: 0; min-height: 32px; padding: 0 8px;
  border: 1px solid var(--gold); border-radius: var(--rundKlein);
  background: var(--panel); color: var(--text);
  font: 400 13px ui-monospace, Consolas, monospace; }
.kwNameFeld:focus-visible { outline: none; }
.kwMeldung { margin-bottom: 10px; padding: 8px 12px; border-radius: var(--rundKlein);
  background: var(--zeile); color: var(--dim); font-size: 12.5px; }
.kwMeldung.schlecht { color: var(--warnText); }

/* --- Der Editor (21.08.2026) -------------------------------------------------

   Ein durchsichtiges Textfeld über einem gefärbten `<pre>`. Damit der
   Textcursor dort steht, wo der Buchstabe erscheint, müssen BEIDE in jeder
   Größe übereinstimmen: Schrift, Schriftgröße, Zeilenhöhe, Ränder, Umbruch.
   Jede Abweichung ist sichtbar — sie schiebt den Cursor mit jeder Zeile weiter
   weg. Deshalb steht alles Gemeinsame in EINER Regel und nicht zweimal. */
.kwLesesaal[data-editor] { overflow: hidden; display: flex; padding-bottom: 22px; }
.kwEd { display: flex; flex-direction: column; flex: 1; min-width: 0;
  height: 100%; min-height: 0; }
.kwEdKopf { display: flex; align-items: center; gap: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--linie); margin-bottom: 10px; }
.kwEdPfad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font: 400 12px ui-monospace, Consolas, monospace; color: var(--dim); }
.kwEdZaehler { font-size: 11.5px; color: var(--dim); flex: none; }
.kwEdMeldung { font-size: 12px; color: var(--gruenText, var(--dim)); flex: none; }
.kwEdMeldung.schlecht { color: var(--warnText); }
.kwEdKopf .zAktion { flex: none; }   /* sonst quetscht der Umbruch sie schmaler */
.zAktion.haupt { border-color: var(--gold); color: var(--goldText); }
.zAktion.haupt:disabled { opacity: .45; cursor: default; border-color: var(--linie);
  color: var(--dim); }

.kwEdFlaeche { flex: 1; min-height: 0; display: flex;
  border: 1px solid var(--linie); border-radius: var(--rundKlein);
  background: var(--panel); overflow: hidden; }
.kwEdStapel { position: relative; flex: 1; min-width: 0; }

/* Die eine gemeinsame Regel. Wer hier etwas ändert, ändert es für beide. */
.kwEdFarbe, .kwEdText {
  margin: 0; padding: 10px 12px; border: 0;
  font: 400 13px/1.6 ui-monospace, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  tab-size: 2;
}
.kwEdFarbe { position: absolute; inset: 0; overflow: auto; color: var(--text);
  pointer-events: none; background: transparent; }
.kwEdText { position: absolute; inset: 0; width: 100%; height: 100%; resize: none;
  background: transparent; color: transparent; caret-color: var(--gold);
  overflow: auto; }
.kwEdText:focus-visible { outline: none; }
.kwEdText::selection { background: color-mix(in srgb, var(--gold) 30%, transparent); }

.kwEdNummern { flex: none; padding: 10px 8px 10px 12px; overflow: hidden;
  font: 400 13px/1.6 ui-monospace, Consolas, monospace; color: var(--dim);
  text-align: right; -webkit-user-select: none; user-select: none; background: var(--zeile);
  border-right: 1px solid var(--linie); }
.kwEdNummern span { display: block; }   /* die Höhe setzt das Malen — siehe huelle.js */

/* Die Färbung. Zurückhaltend mit Absicht: Sie soll beim Tippen Orientierung
   geben, nicht mit dem Text um Aufmerksamkeit ringen. */
.kwEdFarbe .kzl { display: block; }
.kwEdFarbe i { font-style: normal; }
.kwEdFarbe .kh { color: var(--goldText); font-weight: 600; }
.kwEdFarbe .kf { color: var(--dim); }
.kwEdFarbe .kc { color: var(--blauText, var(--goldText)); }
.kwEdFarbe .kb { font-weight: 600; }
.kwEdFarbe .kl { color: var(--blauText, var(--goldText)); }
.kwEdFarbe .kz { color: var(--dim); font-style: italic; }
.kwEdFarbe .ka { color: var(--goldText); }

/* Vorschau: dasselbe Fenster, andere Haut. Ein zweites Fenster daneben haette
   auf einem Telefon zwei halbe statt einem ganzen ergeben. */
.kwEdBlatt { display: none; flex: 1; min-width: 0; overflow: auto;
  padding: 10px 14px; font-size: 14px; line-height: 1.62; }
.kwEd[data-vorschau="1"] .kwEdNummern,
.kwEd[data-vorschau="1"] .kwEdStapel { display: none; }
.kwEd[data-vorschau="1"] .kwEdBlatt { display: block; }

/* Die Befunde stehen UNTER der Flaeche: Ein Hinweis, der beim Tippen die
   Schreibflaeche verschiebt, ist selbst der Fehler. */
.kwEdBefunde { display: flex; flex-direction: column; gap: 4px; }
.kwEdBefunde:not(:empty) { margin-top: 10px; }
.kwEdBefund { font-size: 12px; color: var(--dim); padding-left: 14px;
  position: relative; }
.kwEdBefund::before { content: ""; position: absolute; left: 0; top: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.kwEdBefund.art-verweis::before, .kwEdBefund.art-kopf::before { background: var(--warnText); }
.kwEdBefund.art-feld::before, .kwEdBefund.art-datum::before { background: var(--gold); }

@media (max-width: 767px) {
  .kwNameFeld { min-height: 36px; }
  .kwSuche input, .kwSuche .aktion { min-height: 36px; }
}

.kwLeib { position: relative; flex: 1; min-height: 0; display: grid; }
.kwLeib[data-art="baum"] { grid-template-columns: 300px minmax(0, 1fr); }
.kwLeib[data-art="szene"] { grid-template-columns: minmax(0, 1fr); }
.kwLeib[data-art="szene"] .kwSpalte,
.kwLeib[data-art="szene"] .kwLesesaal { display: none; }
/* Der Rahmen wird NIE ausgeblendet, nur aus dem Bild geschoben: ein
   `display:none`-Rahmen misst sich zu 0x0 und baut die Szene beim Wiederkommen
   leer auf — derselbe Grund, aus dem der Begleiter im Meeting geparkt statt
   versteckt wird. */
#kwSzene { width: 100%; height: 100%; border: 0; background: var(--bg); }
.kwLeib[data-art="baum"] #kwSzene { position: absolute; inset: 0;
  transform: translateX(105%); pointer-events: none; }

.kwSpalte { overflow: auto; border-right: 1px solid var(--linie); padding: 12px 8px; }
/* `scrollbar-gutter` hält den Platz des Rollbalkens IMMER frei. Ohne ihn
   schrumpft der Saal um 11 Pixel, sobald eine Meldung erscheint — und die
   Folie darin wird um dieselben 11 Pixel beschnitten, weil ihr Massstab am
   Behälter gemessen wird und nicht nachzieht (gemessen 08.09.2026: Rahmen
   1070 -> 1059, Massstab blieb bei 0,8359). Das trifft jede Ansicht, die
   ihre Grösse misst, und ist deshalb hier oben gelöst und nicht dort unten. */
.kwLesesaal { overflow: auto; scrollbar-gutter: stable;
  padding: 22px 28px 44px; font-size: 14px; line-height: 1.62; }

/* Typografie des Lesesaals. Bis zum 07.09.2026 gab es hier KEINE — eine
   Tabelle aus einer Brain-Datei stand nackt in der Fläche, Kopfzeile wie
   Datenzeile, und in `features.md` mit fünf Spalten war das eine Wand.
   Vorbild ist `.prozessText` in `app.css`; dort steht dieselbe Sache für die
   Prozessbibliothek. Zwei Flächen, zwei Regelsätze — der Lesesaal darf ruhiger
   sein, weil er ganze Dateien zeigt und nicht einen Abschnitt. */
.kwLesesaal h1 { margin: 4px 0 10px; font-size: 21px; color: var(--kopf); }
.kwLesesaal h2 { margin: 22px 0 8px; font-size: 16px; color: var(--kopf); }
.kwLesesaal h3, .kwLesesaal h4 { margin: 16px 0 6px; font-size: 14px; color: var(--kopf); }
.kwLesesaal p { margin: 8px 0; }
.kwLesesaal ul, .kwLesesaal ol { margin: 8px 0 8px 20px; }
.kwLesesaal li { margin: 3px 0; }
.kwLesesaal pre { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--linie);
  border-radius: var(--rundKlein, 8px); background: var(--bg);
  overflow: auto; font-size: 12.5px; line-height: 1.5; }
.kwLesesaal code { padding: 1px 5px; border-radius: 4px; background: var(--zeile); font-size: 12.5px; }
.kwLesesaal pre code { padding: 0; background: transparent; }
.kwLesesaal blockquote { margin: 10px 0; padding: 4px 14px;
  border-left: 3px solid var(--gold); color: var(--dim); }
.kwLesesaal table { border-collapse: collapse; margin: 10px 0 16px; max-width: 100%; }
.kwLesesaal th, .kwLesesaal td { padding: 6px 11px; border: 1px solid var(--linie);
  font-size: 13px; text-align: left; vertical-align: top; }
.kwLesesaal th { background: var(--zeile); color: var(--kopf); font-weight: 600; }
/* Zebra ab der zweiten Datenzeile — die Kopfzeile ist `tr:first-child`. */
.kwLesesaal tr:nth-child(even) td { background: color-mix(in srgb, var(--zeile) 45%, transparent); }
.kwZeile { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 32px;
  padding: 0 8px; background: transparent; border: 0; border-radius: 7px;
  color: var(--text); font: 400 13px var(--schrift); cursor: pointer; text-align: left; }
.kwZeile:hover, .kwZeile:focus-visible { background: var(--zeile); outline: none; }
.kwZeile.aktiv { background: color-mix(in srgb, var(--gold) 14%, transparent);
  color: var(--goldText); }
.kwZeile.ordner { color: var(--goldText); }
/* Der Output-Zeiger eines promms: eine Auskunft, kein Knopf. Er zeigt, wo das
   Ergebnis liegt — geöffnet wird es nie hier, es ist ein eigenes Repository.
   Er UMBRICHT, statt zu kürzen: ein Pfad mit drei Punkten am Ende ist kein
   Pfad, und die Spalte ist schmal (Bild-Prüfer, Kontrollgang 06.09.2026). */
.kwZeile.zeiger { color: var(--dim); cursor: default; font-size: 12px;
  align-items: flex-start; padding: 4px 8px; }
.kwZeile.zeiger:hover { background: transparent; }
.kwZeile.zeiger .kwName { white-space: normal; overflow: visible;
  text-overflow: clip; overflow-wrap: anywhere; }
.kwName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ein Dreieck, kein Zeichen aus einer Schriftart: es dreht sich, und es sieht
   in jeder Schrift gleich aus. */
.kwPfeil { flex: none; width: 0; height: 0; margin: 0 3px 0 1px;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor; transition: transform .15s ease; }
.kwZeile.offen .kwPfeil { transform: rotate(90deg); }
/* Die Stufe der Vertraulichkeit an jeder Datei-Zeile (21.08.2026, Flows
   Entscheidung: der Punkt zeigt, was der Inhaber gesetzt hat — nicht, was der
   Leser darf). Sie trägt FARBE UND FORM: eine Farbe allein unterscheidet für
   einen von zwölf Lesern nichts. Und sie ist kein Leck: Was jemand gar nicht
   sehen darf, hat der Rechte-Filter des Servers längst aussortiert und steht
   hier nicht als Zeile. Der Punkt sagt „wie vertraulich", nicht „darfst du". */
.kwPunkt { flex: none; width: 14px; height: 14px; display: grid; place-items: center;
  color: var(--griffFarbe); }
.kwPunkt .ikon { width: 12px; height: 12px; }
.kwPunkt.stufe-offen { color: var(--gruen, #5fbf7f); }
.kwPunkt.stufe-intern { color: var(--goldText); }
.kwPunkt.stufe-vertraulich { color: var(--warn, #e2725b); }

/* Ablage-Stand im Kopf: eine Auskunft, keine Warnung — bis sie eine wird.
   Ab vier Fünfteln wechselt die Farbe, vorher steht sie still daneben. */
.kwAblage { margin-left: auto; font-size: 12px; color: var(--dim);
  font-variant-numeric: tabular-nums; }
.kwAblage.voll { color: var(--warn, #e2725b); }

/* Die Quelle einer Unterlage, direkt unter dem Stufen-Umschalter. */
.kwOriginal { display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.kwOriginalWort { flex: 1; min-width: 0; font-size: 12.5px; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kwOriginal .zAktion { flex: none; text-decoration: none; }

/* Umschalter im Lesesaal — drei Symbole, kein Auswahlfeld (Haus-Regel 17 §4).
   Das Wort lebt im Hover; das aktive Symbol ist an Rahmen UND Farbe erkennbar. */
.kwStufen { display: flex; align-items: center; gap: 6px; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.kwStufenKnopf { display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--linie); border-radius: 8px; background: transparent;
  color: var(--dim); cursor: pointer; opacity: .45;
  transition: opacity .12s ease, border-color .12s ease; }
.kwStufenKnopf .ikon { width: 15px; height: 15px; }
.kwStufenKnopf:hover, .kwStufenKnopf:focus-visible { opacity: .8; outline: none;
  border-color: var(--akzent); }
.kwStufenKnopf.aktiv { opacity: 1; border-color: currentColor; }
.kwStufenKnopf.stufe-offen.aktiv { color: var(--gruen, #5fbf7f); }
.kwStufenKnopf.stufe-intern.aktiv { color: var(--goldText); }
.kwStufenKnopf.stufe-vertraulich.aktiv { color: var(--warn, #e2725b); }
.kwStufen.nurLesen { gap: 8px; }
.kwStufeWort { font-size: 12.5px; color: var(--dim); }
.kwStufenFehler { margin-bottom: 12px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--warn, #e2725b); color: var(--warn, #e2725b); font-size: 12.5px; }
.kwKinder { margin-left: 14px; padding-left: 5px; border-left: 1px dashed var(--linie); }
.kwKinder.zu { display: none; }

@media (max-width: 900px) {
  .kwLeib[data-art="baum"] { grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 40%) minmax(0, 1fr); }
  .kwSpalte { border-right: 0; border-bottom: 1px solid var(--linie); }
}
@media (max-width: 768px) {
  .kwZeile { min-height: 36px; }
}


@media (max-width: 768px) {
  .mtSuche { margin-left: 0; width: 100%; }
  .mtSuche input { width: 100%; min-width: 0; }
  .mtSort { min-height: 36px; min-width: 36px; }
  .ansichtChip { min-height: 36px; }
  .mtAktionen .teilenKnopf { width: 36px; height: 36px; }
  .mtTabelle td { height: 44px; }
}


.marker { font-size: 10.5px; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
/* Schrift dunkler als die Fläche: der reine Akzentton erreicht auf seinem
   eigenen hellen Untergrund nur ~3,7:1 und reißt damit das Kontrast-Minimum. */
.marker.wissen { color: var(--blauText); background: color-mix(in srgb, var(--blau) 14%, transparent); }
.marker.entscheidung { color: var(--warnText); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.marker.dokument { color: var(--gruenText); background: color-mix(in srgb, var(--gruen) 14%, transparent); }

.luecke { background: var(--panel); border: 1px dashed var(--randStark);
  border-radius: var(--rund); padding: 34px 28px; text-align: center; color: var(--dim);
  font-size: 13.5px; line-height: 1.6; }
.luecke h2 { font: 700 16px var(--schrift); color: var(--text); margin-bottom: 8px; }
.luecke p { max-width: 54ch; margin: 0 auto; }

@media (max-width: 900px) {
  .zahlenReihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  header { padding: 11px 16px; }
  .ansichtBahn { padding: 18px 16px 32px; }
}

/* Rechtstexte im Leisten-Fuß trugen bisher gar keine Farbregel und liefen
   damit im Browser-Standardblau (#0000ee) — auf dunklem Grund 2,1:1 und
   praktisch unlesbar. Bestandsfehler, hier mitbehoben. */
/* 32 Pixel Mindest-Flaeche, auch fuer die zwei Pflicht-Links: Der Bild-Pruefer
   hat sie am 20.08.2026 mit 12 Pixel Hoehe gemeldet. Der Text bleibt klein —
   nur die Flaeche waechst (Haus-Regel §4: „Ein Symbol darf kleiner sein, seine
   Flaeche nicht"; fuer einen Link gilt dasselbe). */
.rechtsZeile a { min-height: 32px; display: inline-flex; align-items: center;
  color: var(--dim); text-decoration: underline;
  text-underline-offset: 2px; }
.rechtsZeile a:hover, .rechtsZeile a:focus-visible { color: var(--text); outline: none; }


/* K1 (Welle 4, 23.09.2026): die zwei Kacheln der Kennzahl V oben in der
   Ansicht Brain. Zwei Spalten statt vier, auf dem Telefon untereinander; die
   Einheit steht klein neben der Zahl, damit die Zahl selbst lesbar bleibt. */
.kwKennzahl { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 12px; }
.kwKennzahl[hidden] { display: none; }
.kwKennzahl .zahlKachel { cursor: help; }
.kwEinheit { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--dim); }
@media (max-width: 520px) { .kwKennzahl { grid-template-columns: minmax(0, 1fr); } }