/* 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); }

#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; }
#ansichtUnter { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ansichtUnter:empty { 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 heisst weggelegt, nicht weg: leiser, aber lesbar. */
.mtZeile.archiviert { opacity: .62; }
.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; }
.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; }

/* 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; 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; }
.kwLesesaal { overflow: auto; padding: 22px 28px 44px; font-size: 14px; line-height: 1.62; }
.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); }
.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; }

/* --- Planung: Aufgaben und Ziele ------------------------------------------- */

.planZeile { display: flex; gap: 10px; }
.planZeile input { flex: 1; min-width: 0; background: var(--panel);
  border: 1px solid var(--linie); border-radius: var(--rundKlein); color: var(--text);
  font: inherit; font-size: 14px; padding: 11px 13px; }
.planZeile input:focus { outline: none; border-color: var(--gold); }

/* 20x20 waren es bis zum 23.08.2026 — unter dem Haus-Mindestmass von 32 für
   alles Antippbare. Die Liste wird ohnehin angefasst, also gilt die Regel hier
   ab jetzt (Regel 17 §6). Das Symbol bleibt klein, seine Fläche waechst. */
.planHaken { width: 32px; height: 32px; flex: none; border-radius: 8px; padding: 0;
  border: 1.5px solid var(--randStark); background: transparent; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  transition: border-color .14s ease, background-color .14s ease; }
.planHaken:hover, .planHaken:focus-visible { border-color: var(--gold); outline: none; }
.planHaken.an { background: var(--gold); border-color: var(--gold); }
.planHaken .ikon { width: 13px; height: 13px; }
.planEintrag.fertig .tafelName { color: var(--dim); text-decoration: line-through; }

.planZiel .planLeise { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.planBalken { width: 84px; height: 6px; flex: none; border-radius: 99px;
  background: var(--zeile); overflow: hidden; }
.planBalken > span { display: block; height: 100%; border-radius: 99px;
  background: var(--gold); }

/* Aufgaben-Details: Erstblick bleibt eine Zeile, alles Weitere auf Klick. */
.planBlock { border-top: 1px solid var(--zeile); }
.planBlock:first-child { border-top: 0; }
.planBlock .tafelZeile { border-top: 0; }
/* 21 Pixel hoch war der Titel-Knopf bis zum 23.08.2026 — gemeldet vom
   Bild-Prüfer an der laufenden Oberflaeche, fuenfmal in einer Liste. Er ist
   der Weg ins Detail und damit ein Tippziel wie jedes andere. */
.planTitel { flex: 1; min-width: 0; text-align: left; background: transparent;
  border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-height: 32px; display: flex; align-items: center; }
.planTitel:hover, .planTitel:focus-visible { color: var(--goldText); outline: none; }
.planEintrag.fertig .planTitel { color: var(--dim); text-decoration: line-through; }

.planDetail { display: none; padding: 0 18px 14px 47px; }
.planDetail.offen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px; }
.planDetail label { display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px; color: var(--dim); }
.planDetail textarea, .planDetail input, .planDetail select {
  background: var(--bg); border: 1px solid var(--linie); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 13px; padding: 7px 9px; width: 100%; }
.planDetail textarea:focus, .planDetail input:focus, .planDetail select:focus {
  outline: none; border-color: var(--gold); }
.planDetail label:first-child { grid-column: 1 / -1; }
.planDetailFuss { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

.zielStatus { background: transparent; border: 1px solid var(--linie);
  border-radius: 999px; color: var(--dim); font: inherit; font-size: 11px;
  padding: 2px 10px; cursor: pointer; margin-left: auto; white-space: nowrap; }
.zielStatus:hover, .zielStatus:focus-visible { border-color: var(--gold);
  color: var(--goldText); outline: none; }

@media (max-width: 700px) {
  .planDetail.offen { grid-template-columns: 1fr; }
  .planDetail { padding-left: 18px; }
}

/* Ueberschrift und Handlung in einer Zeile — die Handlung als Symbol, ihr
   Wort steht im Hinweis (Haus-Regel „Symbole vor Text"). */
.tischKopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tischKopf h2 { margin: 0; }

/* --- Der Riegel unter allem ------------------------------------------------
   `hidden` ist ein Attribut, keine Bitte: Jede eigene `display`-Regel schlaegt
   die Vorgabe des Browsers. Am 20.08.2026 ist dieselbe Falle dreimal in einer
   Stunde zugeschnappt — ein leerer Kasten unter einer vollen Liste, ein
   „Mehr laden" ohne Nachschub, ein Knopf ohne Recht. Deshalb steht die Regel
   hier ganz unten: huelle.css wird NACH app.css geladen (Shell).
   Die Verdopplung des Attributs ist Absicht und kein Vertipper: `button.aktion`
   waere sonst spezifischer und gewaenne trotz spaeterer Position. Das ist der
   Ausweg, den die Haus-Regel „Masse gehoeren ins Stylesheet" meint — hoehere
   Spezifitaet statt `!important`, das die naechste Regel ebenso aussticht wie
   die vorige. */
[hidden][hidden] { display: none; }

/* --- Telefonbreite, nachgezogen (20.08.2026) ---------------------------------
   Diese zwei Regeln stehen bewusst am DATEIENDE und nicht oben bei den
   Meetings: Ihre Grundregeln kommen weiter unten in dieser Datei, und bei
   gleicher Spezifitaet gewinnt die spaetere. Oben stehend haetten sie
   gegriffen, waeren aber wirkungslos geblieben — der Bild-Pruefer hat genau
   das gemeldet (55x32 statt 36). */
@media (max-width: 768px) {
  /* Die zwei Pflicht-Links im Fuss. */
  .rechtsZeile a { min-height: 36px; }
  /* Der Untertitel ist ein Satz, kein Etikett: Auf schmalen Schirmen bricht er
     um, statt sich abschneiden zu lassen. Ein Hinweis-Text waere hier das
     falsche Mittel — man liest ihn mit den Augen, nicht mit der Maus. */
  #ansichtUnter { white-space: normal; overflow: visible; text-overflow: clip; }
}


/* --- Planung: Gruppen nach Ziel, breites Anlege-Formular (23.08.2026) ------ */

/* Der Gruppenkopf trägt Symbol, Namen und den gerechneten Balken. Er erscheint
   nur unter „Alle" — unter „Meine" wäre er eine Überschrift über einer
   Liste, die ohnehin nur einer Person gehört. */
.planGruppe { display: flex; align-items: center; gap: 9px; padding: 11px 18px 7px;
  font-size: 12px; letter-spacing: .3px; text-transform: uppercase; color: var(--dim); }
.planGruppe .ikon { width: 15px; height: 15px; flex: none; }
.planGruppeName { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.planGruppe.ohneZiel { color: var(--dim); opacity: .75; }
.planGruppe + .planBlock { border-top: 0; }

/* Überfällig ist ein Zustand — Farbe UND Form (der Strich links), nicht ein
   weiteres Wort in einer Zeile, die schon drei trägt. */
.planEintrag.spaet { border-left: 3px solid var(--warn, #d98a3a); }
.planEintrag.spaet .tafelZeit { color: var(--warn, #d98a3a); }

.planZeileBreit { flex-wrap: wrap; }
.planZeileBreit #aufgabeTitel { flex: 3 1 220px; }
.planZeileBreit select, .planZeileBreit input[type="date"] {
  flex: 1 1 130px; min-width: 0; background: var(--panel);
  border: 1px solid var(--linie); border-radius: var(--rundKlein); color: var(--text);
  font: inherit; font-size: 13px; padding: 10px 11px; min-height: 32px; }
.planZeileBreit select:focus, .planZeileBreit input[type="date"]:focus {
  outline: none; border-color: var(--gold); }

@media (max-width: 768px) {
  .planHaken { width: 36px; height: 36px; }
  /* Auf dem Telefon wird umgebrochen statt abgeschnitten. Ein Aufgaben-Titel,
     der mitten im Wort endet, ist keine Aufgabe mehr — gemeldet vom
     Bild-Prüfer auf 390 Pixel, sechsmal in einer Liste. */
  .planTitel { min-height: 36px; white-space: normal; overflow: visible;
    text-overflow: clip; line-height: 1.3; padding: 4px 0; }
  .planGruppeName { white-space: normal; overflow: visible; text-overflow: clip; }
  .planEintrag { flex-wrap: wrap; }
  .planEintrag .tafelZeit { flex-basis: 100%; padding-left: 44px; }
  /* Vier Felder in vier Zeilen schieben die Liste aus dem Bild. Titel oben,
     die drei freiwilligen Angaben zu zweit daneben. */
  .planZeileBreit #aufgabeTitel { flex: 1 1 100%; }
  .planZeileBreit select, .planZeileBreit input[type="date"] { min-height: 36px;
    flex: 1 1 calc(50% - 5px); }
  .planZeileBreit .aktion { flex: 1 1 calc(50% - 5px); min-height: 36px; }
}