/* Werkbank-Optik (P15) — das eine Stilblatt fuer alle Bildschirme: Farben,
   Karten, Kacheln, Chips, Pillen, Tabellen, Schublade, hell und dunkel.

   ES WIRD NUR ERGAENZT, NIE UMGESCHRIEBEN. Die Anmutung ist abgenommen; eine
   geaenderte Zeile aendert sie an einer Stelle, die niemand geprueft hat.
   Darueber wacht tests/test_web_rahmen.py: geloeschte Zeilen muessen 0 sein.
   Dieser Kopftext steht hier, weil jede Datei in EINEM Satz sagt, wofuer sie
   da ist (WEGWEISER.md, tests/test_wegweiser.py). */

:root{
  --bg:#F3F4F6; --srf:#FFFFFF; --srf2:#F8F9FB; --line:#E3E5EA; --line2:#EDEEF2;
  /* --mut gerechnet, nicht geschaetzt (ALL-04): #6E737B trug auf dem Seitengrund
     --bg nur 4,34:1. #696E76 haelt 4,66:1 auf --bg, 4,87:1 auf --srf2, 5,13:1 auf --srf. */
  --ink:#15171C; --ink2:#41454C; --mut:#696E76;
  /* --rot ist ausschliesslich FLAECHE mit weisser Schrift (.btn.pri, .nav button.on,
     Umgebungsbalken) — nie Text. ALL-04: Weiss auf #CC1718 = 5,67:1. */
  --rot:#CC1718; --rot-h:#B31415; --head:#1C1C1C; --grau:#706E6F;
  --gr:#0F7A3D; --gr-bg:#E7F4EC; --gr-li:#CBE6D6;
  --am:#8A5A06; --am-bg:#FCF2E1; --am-li:#EDDBB4;
  --bl:#1B57B8; --bl-bg:#E8EEFC; --bl-li:#C9D9F5;
  --li:#5F3597; --li-bg:#F0E9F9; --li-li:#DCCDF0;
  --ro:#B0201F; --ro-bg:#FBEAEA; --ro-li:#F0CBCB;
  --sh:0 1px 2px rgba(18,20,24,.05), 0 6px 18px rgba(18,20,24,.05);
  --sh2:0 8px 40px rgba(18,20,24,.18);
  --r:12px; --r2:9px; --r3:7px;
  /* Extern-Kachel (Sammelkalender, Vorgabe Max 06.09.): hell UND dunkel geprueft,
     ALL-04 — Text mindestens 4,5:1 auf der eigenen Flaeche */
  --ext-bg:#FFFFFF; --ext-ink:#15171C; --ext-mut:#696E76;
  --kland:#F4F1EA; --kaus:#E6E3DC; --kwald:#DCEBCF; --kwasser:#A9D2E8; --kstr:#FFFFFF; --kstr2:#F3D9A4; --kgrenz:#C9C3B6;
  --doc:'Archivo',Arial,sans-serif;
  --app:Arial,'Liberation Sans',Helvetica,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#12141A; --srf:#1A1E25; --srf2:#20252D; --line:#2A303A; --line2:#242A33;
  --ink:#E9EBEF; --ink2:#B7BDC6; --mut:#89909A;
  /* ALL-04 dunkel: das aufgehellte #F0574F trug weisse Schrift nur mit 3,40:1
     (Hover 2,80:1). Rot bleibt Flaeche, darum das Markenrot, drei Stufen heller
     gerechnet: Weiss darauf 5,53:1, die Flaeche selbst 3,02:1 gegen --srf. */
  --rot:#CF1818; --rot-h:#B31415; --head:#0C0E12;
  --gr:#5CC98B; --gr-bg:#132D1F; --gr-li:#1F4632;
  --am:#E0AC5A; --am-bg:#2E2415; --am-li:#4A3A1E;
  --bl:#84ABF7; --bl-bg:#15223B; --bl-li:#25375A;
  --li:#B694E8; --li-bg:#211A34; --li-li:#362A52;
  --ro:#F0574F; --ro-bg:#341A19; --ro-li:#512724;
  --ext-bg:#2E343E; --ext-ink:#E9EBEF; --ext-mut:#A8AEB8;
  --kland:#242B33; --kaus:#1B2027; --kwald:#1E3226; --kwasser:#1B3A4D; --kstr:#3B444E; --kstr2:#4C4531; --kgrenz:#39424C;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  --sh2:0 10px 46px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#12141A; --srf:#1A1E25; --srf2:#20252D; --line:#2A303A; --line2:#242A33;
  --ink:#E9EBEF; --ink2:#B7BDC6; --mut:#89909A;
  /* ALL-04 dunkel: das aufgehellte #F0574F trug weisse Schrift nur mit 3,40:1
     (Hover 2,80:1). Rot bleibt Flaeche, darum das Markenrot, drei Stufen heller
     gerechnet: Weiss darauf 5,53:1, die Flaeche selbst 3,02:1 gegen --srf. */
  --rot:#CF1818; --rot-h:#B31415; --head:#0C0E12;
  --gr:#5CC98B; --gr-bg:#132D1F; --gr-li:#1F4632;
  --am:#E0AC5A; --am-bg:#2E2415; --am-li:#4A3A1E;
  --bl:#84ABF7; --bl-bg:#15223B; --bl-li:#25375A;
  --li:#B694E8; --li-bg:#211A34; --li-li:#362A52;
  --ro:#F0574F; --ro-bg:#341A19; --ro-li:#512724;
  --ext-bg:#2E343E; --ext-ink:#E9EBEF; --ext-mut:#A8AEB8;
  --kland:#242B33; --kaus:#1B2027; --kwald:#1E3226; --kwasser:#1B3A4D; --kstr:#3B444E; --kstr2:#4C4531; --kgrenz:#39424C;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
  --sh2:0 10px 46px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:13.5px/1.5 var(--app);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--doc);margin:0;text-wrap:balance}
.tnum{font-variant-numeric:tabular-nums}
button,input,select{font-family:inherit}
:focus-visible{outline:2px solid var(--bl);outline-offset:2px}

/* ---------- Kopf & Navigation ---------- */
.tb{background:var(--head);color:#fff;display:flex;align-items:center;gap:16px;padding:10px 18px}
.wm{font:700 19px/1 var(--doc);letter-spacing:.5px;white-space:nowrap}
.wm i{color:#CC1718;font-style:normal}.wm s{color:#B9B7B8;text-decoration:none}
.tb .sep{width:1px;height:22px;background:#3A3D44}
.tb .ttl{font-size:13px;color:#C3C6CC}
.tb .rt{margin-left:auto;display:flex;align-items:center;gap:9px}
.tb .kbd{border:1px solid #43464E;border-radius:var(--r3);padding:5px 9px;font-size:11.5px;color:#C3C6CC;cursor:pointer;background:transparent}
.tb .kbd:hover{border-color:#6E737B;color:#fff}
.tb .mo{border:1px solid #43464E;border-radius:var(--r3);padding:5px 9px;font-size:12px;color:#E7E8EA;background:transparent;cursor:pointer}
/* P207 · Anzeige und Stand sind Auswahlfelder, kein Durchschalten: man sieht alle drei Möglichkeiten, ohne zu klicken. */
.tb select.mo,.tb select.kbd{appearance:none;-webkit-appearance:none;padding-right:22px;
  background-image:linear-gradient(45deg,transparent 50%,#C3C6CC 50%),linear-gradient(135deg,#C3C6CC 50%,transparent 50%);
  background-position:calc(100% - 13px) 9px,calc(100% - 8px) 9px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.tb select.mo option,.tb select.kbd option{background:#1C1C1C;color:#E7E8EA}
.nav{background:var(--srf);border-bottom:1px solid var(--line);padding:8px 18px;display:flex;gap:6px;align-items:center;overflow-x:auto}
/* FUND Optik-Abnahme, 09.09.2026 — dieselbe Luecke wie die 116 px in BA3, nur
   diesmal in der KOPFLEISTE: bei 1024 px war die Leiste 1024 px breit und ihr
   Inhalt 1191 px (gemessen ueber Runtime.evaluate). „Rechner" und
   „Systemzustand" waren mitten im Wort abgeschnitten, „Themen" gar nicht da —
   und weil `.nav` weder die Balkenregel der Tabellen noch den `roll`-Schatten
   hatte, blieb die Rollflaeche unter macOS unsichtbar: kein Balken, kein
   Schatten, keine Andeutung. Die Regel steht deshalb hier, an derselben Stelle
   und in derselben Machart wie bei `.tw` — und `.nav.roll` setzt kern/web.py
   nur dann, wenn wirklich etwas aus dem Bild laeuft (scrollWidth > clientWidth),
   sonst stuende der Schatten auch bei 2560 px da, wo nichts zu holen ist. */
.nav{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.nav::-webkit-scrollbar{height:7px}
.nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.nav::-webkit-scrollbar-track{background:var(--srf2);border-radius:99px}
.nav.roll{box-shadow:inset -15px 0 12px -12px rgba(18,20,24,.28)}
.nav button{border:1px solid transparent;background:transparent;color:var(--ink2);font:600 13px/1 var(--app);padding:9px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.nav button:hover{background:var(--srf2);color:var(--ink)}
.nav button.on{background:var(--rot);border-color:var(--rot);color:#fff}
.nav .cnt{display:inline-block;margin-left:7px;font-size:11px;padding:1px 6px;border-radius:999px;background:var(--srf2);color:var(--mut)}
/* ALL-04: durchscheinendes Weiss auf der roten Flaeche trug den Zaehler nur mit
   4,22:1 (hell) und 2,64:1 (dunkel). Jetzt deckende weisse Pille, Ziffern in --rot:
   5,67:1 hell, 5,53:1 dunkel. */
.nav button.on .cnt{background:#fff;color:var(--rot)}
.nav .ext{margin-left:auto;color:var(--mut);font-weight:400}
.sub{background:var(--srf);border-bottom:1px solid var(--line);padding:9px 18px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
main{padding:16px 18px 90px;max-width:1740px;margin:0 auto}

/* ---------- Bausteine ---------- */
.card{background:var(--srf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.card>.ch{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--line2)}
.card>.ch h5{font-size:13.5px;font-weight:700}
.card>.ch em{font-style:normal;color:var(--mut);font-size:11.5px}
.card>.ch .act{margin-left:auto;display:flex;gap:8px;align-items:center}
.card>.cb{padding:14px 15px}
.grid{display:grid;gap:14px}
.g-2{grid-template-columns:1fr 1fr}
.g-kpi{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
/* Fünf Kacheln in einer Reihe (Lauf-Stand des Nachtspiegels). Mit dem
   196-px-Maß brachen sie auf dem iPad 4+1 um — die fünfte stand allein in einer
   zweiten Reihe (Fund Optik-Prüfer, 07.09.2026, 1024x1366). 168 px halten alle
   fünf in einer Reihe: 5 × 168 = 840 < 986 (nutzbare Kartenbreite auf dem
   iPad Pro 13"), und auf breiten Schirmen wachsen sie mit (1fr). */
.g-kpi5{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:14px;align-items:start}
.split-w{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.sidecol{display:grid;gap:14px}
.btn{border:1px solid var(--line);background:var(--srf);color:var(--ink);font:600 12.5px/1 var(--app);padding:8px 13px;border-radius:var(--r3);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--srf2)}
.btn.pri{background:var(--rot);border-color:var(--rot);color:#fff}
.btn.pri:hover{background:var(--rot-h)}
.btn.dark{background:var(--head);border-color:var(--head);color:#fff}
.btn.sm{padding:6px 10px;font-size:11.5px}
.btn:disabled{opacity:.42;cursor:not-allowed}
.chip{border:1px solid var(--line);background:var(--srf);color:var(--ink2);font-size:12px;padding:6px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
.chip:hover{background:var(--srf2)}
.chip.on{background:var(--head);border-color:var(--head);color:#fff}
.chip .n{opacity:.8;margin-left:5px}      /* ALL-04: .65 ergab hell 3,64:1, .8 ergibt 5,20:1 */
.pill{display:inline-block;font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.p-gr{background:var(--gr-bg);color:var(--gr);border-color:var(--gr-li)}
.p-am{background:var(--am-bg);color:var(--am);border-color:var(--am-li)}
.p-bl{background:var(--bl-bg);color:var(--bl);border-color:var(--bl-li)}
.p-li{background:var(--li-bg);color:var(--li);border-color:var(--li-li)}
.p-ro{background:var(--ro-bg);color:var(--ro);border-color:var(--ro-li)}
.p-gy{background:var(--srf2);color:var(--mut);border-color:var(--line)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:0;flex:none}
.k-gr{background:#1A9E4B}.k-am{background:#D99A18}.k-bl{background:#2B6FDB}.k-li{background:#8B5CD6}.k-ro{background:#CC1718}.k-gy{background:#A9AEB5}
/* ALL-16: Klickziele sind echte <button>, damit die Tastatur hinkommt. Der Knopf
   bringt eigene Voreinstellungen mit (Rahmen, Fläche, Mittelsatz, eigene Schrift) —
   die werden hier EINMAL zurückgesetzt, für alle Bildschirme. Der sichtbare Fokus
   bleibt der der Werkbank (:focus-visible). */
button.ev{border:0;margin:0;text-align:left;appearance:none;-webkit-appearance:none}
button.lnk,button.x{background:none;border:0;padding:0;margin:0;font-size:inherit;
  line-height:inherit;text-align:inherit;appearance:none;-webkit-appearance:none;cursor:pointer}
.lnk{color:var(--bl);cursor:pointer}
/* Seit ALL-16 steht neben jedem Anker ein Knopf mit derselben Klasse. Der Browser
   unterstreicht nur den Anker — damit saehen zwei gleiche Bedienelemente verschieden
   aus. Der Ruhezustand ist ohne Unterstrich (das sagt die Hover-Regel darunter), der
   Unterstrich bleibt dem Ueberfahren vorbehalten. Dieselbe Stelle nimmt .btn mit:
   auch dort haengt die Klasse an Anker (kern/web.py) und Knopf zugleich. */
a.lnk,a.btn{text-decoration:none}
.lnk:hover{text-decoration:underline}
.mut{color:var(--mut)}
/* P251 (Vorgabe Max, 26.08.2026): Listen haben eine feste Hoehe und scrollen innen.
   Ohne das waechst die Seite mit dem Bestand – bei 40 Fotografen und zwei Jahren Daten
   ist die Offen-Liste sonst laenger als der Bildschirm. Kopfzeile bleibt stehen (thead sticky). */
.tw{overflow:auto;max-height:44vh;overscroll-behavior:contain}
/* Fund Optik-Prüfer, 07.09.2026: unter macOS ist der Rollbalken ein
   unsichtbares Overlay — dass eine Liste noch weitergeht (senkrecht wie
   waagerecht), sah man nicht. Eine eigene Balkenregel schaltet das Overlay ab:
   der Balken steht sichtbar da und hält seine Spur frei. Die Regel gilt für
   ALLE Listen und nicht erst mit der Marke `roll`, sonst änderte das Setzen der
   Marke die Breite — und genau das hielt die Marke dann fest. */
.tw{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.tw::-webkit-scrollbar{height:9px;width:9px}
.tw::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.tw::-webkit-scrollbar-thumb:hover{background:var(--mut)}
.tw::-webkit-scrollbar-track{background:var(--srf2);border-radius:99px}
/* DIE ZWEITE STELLE DESSELBEN FUNDES (09.09.2026): die Balkenregel stand nur an
   `.tw` und `.liste-knapp`. Jede andere Rollflaeche des Hauses hatte sie nicht —
   der Fensterkoerper (`.md .mbody`), der Schubladenkoerper (`.dr .db`), die
   Trefferliste des Befehlsfeldes (`.pal .res`) und das Kachelband (`.kband`,
   dem nur die Standard-Eigenschaft fehlte, also der Weg ausserhalb von WebKit).
   Alle vier rollen in sich, und in allen vier war unter macOS nicht zu sehen,
   dass es weitergeht. Sie stehen jetzt in EINER Regel statt in vier: eine
   weitere Rollflaeche wird hier eingetragen, nicht ein fuenftes Mal
   nachgebaut. */
.md .mbody,.dr .db,.pal .res,.kband{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.md .mbody::-webkit-scrollbar,.dr .db::-webkit-scrollbar,
.pal .res::-webkit-scrollbar,.kband::-webkit-scrollbar{height:7px;width:7px}
.md .mbody::-webkit-scrollbar-thumb,.dr .db::-webkit-scrollbar-thumb,
.pal .res::-webkit-scrollbar-thumb,.kband::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.md .mbody::-webkit-scrollbar-track,.dr .db::-webkit-scrollbar-track,
.pal .res::-webkit-scrollbar-track,.kband::-webkit-scrollbar-track{background:var(--srf2);border-radius:99px}
/* Die knappe Liste: sie rollt in sich, statt die Karten unter ihr aus dem Bild
   zu schieben (P251). Der Wächter braucht das, weil seine Zeilenzahl vom Befund
   abhängt und AUS-M-13 verlangt, dass der Kopf der FTP-Karte darunter im ersten
   Bild bleibt. */
.tw.knapp{max-height:min(26vh,240px)}
/* Dieselbe Regel für einen Block, der keine Tabelle ist (die To-do-Liste unter
   den Galerien des Tages, AUS-M-22): feste Höhe, innen rollen, Karten darunter
   bleiben im Bild. */
.liste-knapp{overflow:auto;max-height:min(18vh,168px);overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.liste-knapp::-webkit-scrollbar{width:9px}
.liste-knapp::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.liste-knapp::-webkit-scrollbar-track{background:var(--srf2);border-radius:99px}
.tw.hoch{max-height:62vh}
.tw.frei{max-height:none;overflow:visible}
/* Eine breite Tabelle scrollt in SICH — sonst schiebt sich die ganze Seite samt
   Kopfleiste zur Seite und die letzten Spalten (Status, Handgriff) sind weg. */
.tw.breit{overflow-x:auto}
/* Fund Optik-Prüfer, 07.09.2026: unter macOS ist der Rollbalken ein
   unsichtbares Overlay — dass rechts noch eine Spalte steht („Stand" lief
   116 px aus dem Bild), sah man nicht. Wo wirklich zu rollen ist, setzt der
   Bildschirm die Marke `roll`: der Balken steht dann sichtbar da (die eigene
   Balkenregel schaltet das Overlay ab) und die rechte Kante wirft einen
   Schatten. Sie sitzt am Kasten, nicht am Inhalt, und rollt nicht mit. */
.tw.roll{box-shadow:inset -15px 0 12px -12px rgba(18,20,24,.28)}
.twf{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--mut);padding:5px 2px 0}
.info{display:inline-block;color:var(--mut);font-size:12px;font-style:normal;font-weight:400;cursor:help;margin-left:5px;user-select:none;vertical-align:baseline}
.info:hover{color:var(--ink)}
/* ALL-16 / Anhang C §2.4 („Kein Wissen nur im Überfahren. Auf dem iPad gibt es
   kein Überfahren."): das ⓘ ist ein echter <button>, damit Tastatur und Finger
   an die Erklärung kommen — mit `title` allein kam keine der Erklärungen einer
   Seite an (Fund Optik-Prüfer, 07.09.2026). Der Knopf bringt eigene
   Voreinstellungen mit; sie werden hier EINMAL zurückgesetzt, wie bei .lnk/.x. */
button.info{background:none;border:0;padding:0;margin:0 0 0 5px;font-family:inherit;
  line-height:inherit;cursor:pointer;appearance:none;-webkit-appearance:none}
/* Auf Geräten ohne Maus ist ein 12-px-Zeichen kein Bedienziel (Anhang C §1:
   „Bedienziele mindestens 32 px"). Die Fläche wächst, das Zeichen nicht. */
@media (pointer:coarse){
  button.info{padding:9px;margin:-9px -9px -9px 0}
}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
table.t th{text-align:left;font:700 11px/1.3 var(--app);letter-spacing:.4px;color:var(--mut);padding:9px 13px;
  border-bottom:1px solid var(--line);background:var(--srf2);white-space:nowrap;position:sticky;top:0;z-index:2}
table.t td{padding:0 13px;height:31px;border-bottom:1px solid var(--line2);white-space:nowrap}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr:hover td{background:var(--srf2)}
table.t tbody tr.sel td{background:var(--bl-bg)}
table.t tbody tr.pick td{background:var(--srf2)}
table.t td.r,table.t th.r{text-align:right;font-variant-numeric:tabular-nums}
table.t td.w{white-space:normal;min-width:240px}
/* PLA-O-10 (Rueckmeldung Max, 06.09.2026, Punkt 4): „Man muss nach rechts und links
   gucken, um alle Informationen zu sehen." Eine Arbeitsliste, die breiter ist als das
   Fenster, ist keine. Feste Spaltenbreiten statt Inhalt-waechst-Tabelle: die
   Bedienspalten stehen vorn und bleiben im Bild, lange Texte kuerzen mit … statt die
   Tabelle zu dehnen (Volltext im Ueberfahr-Text, PLA-O-14).
   Unter der Mindestbreite scrollt die Tabelle wieder in sich (.tw.breit) — dann ist
   lieber zu schieben als der Termin unlesbar. */
table.t.fest,.tw.eng table.t{table-layout:fixed}
/* Genagelt heisst auch: was nicht passt, wird gekuerzt statt die Zelle zu sprengen. */
table.t.fest td,.tw.eng table.t td{overflow:hidden;text-overflow:ellipsis}
/* Die Spalte „Stand": gekürzt wird die PILLE, nie das ⓘ. Fund Optik-Prüfer,
   07.09.2026: dort schnitt `text-overflow` bei jeder Breite das ⓘ ab — die
   Erklärung, warum eine Zeile ein To-do ist, fehlte genau da, wo man sie sucht.
   Die Zelle ist deshalb eine Reihe: die Pille darf schrumpfen (min-width:0),
   das Zeichen dahinter nicht (flex:none). */
table.t td.stand{display:flex;align-items:center;gap:0}
table.t td.stand .pill{overflow:hidden;text-overflow:ellipsis;min-width:0}
table.t td.stand .info{flex:none}
/* Die Mindestbreite haengt an der Umgebung, nicht an der Tabellenart: in einem
   selbst scrollenden Rahmen (.breit) darf sie nicht unter 960 px rutschen, sonst
   bleibt vom Termin nichts zu lesen. In einem Fenster (.md, 720 px) gilt sie nicht. */
.tw.breit table.t.fest{min-width:960px}
/* Zweizeilige Zelle: Hauptangabe oben, Nebenangabe leise darunter. Nichts geht
   verloren, es rueckt zusammen (F34: Tabellen tragen Zahlen, keine Saetze). */
table.t.fest td.zz{height:auto;padding-top:5px;padding-bottom:5px;line-height:1.35}
/* ALL-16 (sichtbarer Fokus): die Zeile kuerzt, darf aber den Fokusrahmen nicht
   mitkuerzen — er steht 2 px ausserhalb des Knopfes. „clip" kuerzt wie „hidden",
   laesst ueber overflow-clip-margin aber die 4 px stehen, die der Rahmen braucht;
   die erste Angabe ist der Rueckfall fuer Browser ohne „clip". */
/* UND DESHALB DARF HIER NIE ETWAS ZU KUERZEN SEIN — Fund des Abnahmepruefers,
   07.09.2026. `overflow:clip` zeichnet KEIN Auslassungszeichen: `text-overflow`
   wirkt allein bei `hidden`/`scroll`/`auto`. Gemessen im laufenden Programm bei
   1440 px war die Ablage-Zelle 184 px breit (210 px Spalte minus 2 × 13 px
   Rand — und zwar bei 1024, 1440 UND 2560 px gleich, die Spalte ist genagelt),
   der Inhalt `… / 1.FBL / Werder Bremen / Spiele` brauchte 199,8 px: der Pfad
   endete ohne jedes Merkmal, und zwar AM ENDE, also dort, wo bei 20 der 26
   gemessenen Lieferziele die einzige unterscheidende Angabe steht.
   Der Fokusrahmen bleibt der Grund fuer „clip" — geaendert wurde deshalb NICHT
   diese Regel, sondern das, was hier ankommt:
     * `ansichten.pfad_kuerzen` kuerzt VORN und setzt „…" davor, das ENDE bleibt
       ganz stehen, gekuerzt wird nur an Segmentgrenzen;
     * `ansichten.PFAD_KUERZE_ZEILE` ist auf die GEMESSENEN 172 px Textbreite
       dieser Zelle kalibriert (184 px minus 12 px fuer das ⓘ) und nicht mehr
       auf die 260-px-Spalte der Kontrollliste;
     * und `ansichten.PFAD_FUELLEN_JS` (in `_JS`) rechnet je Zelle mit der
       WIRKLICHEN Schrift und Breite nach — eine Zeichenzahl kann eine
       Pixelbreite in einer Proportionalschrift nicht treffen.
   Nachgeprueft bei allen drei Groessen: `scrollWidth` = `clientWidth` = 184,
   also nichts zu kuerzen, und das letzte Segment steht. */
table.t .z1,table.t .z2{overflow:hidden;overflow:clip;overflow-clip-margin:4px;
  text-overflow:ellipsis;white-space:nowrap}
table.t .z2{font-size:11px;color:var(--mut);margin-top:1px}
/* Ein Knopf kuerzt seinen Text nicht von allein — ohne max-width waechst er ueber
   die Zelle hinaus und die feste Breite waere wirkungslos. */
table.t .z1 button.lnk{display:inline-block;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
table.t tr.sum td{font-weight:700;background:var(--srf2)}
.kpi{background:var(--srf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:13px 15px}
.kpi .l{font-size:11.5px;color:var(--mut);display:flex;align-items:center}
.kpi .v{font:700 24px/1.15 var(--doc);margin-top:5px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:11.5px;color:var(--mut);margin-top:3px}
.kpi .tg{margin-top:8px}
.kpi.clk{cursor:pointer}
.kpi.clk:hover{border-color:var(--bl)}
/* P209 · Kachelband: EINE Reihe, seitlich scrollbar, jede Kachel springt in ihren Prozess. */
.kband{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:14px;scroll-snap-type:x proximity}
/* Diese zwei Balkenzeilen sind am 09.09.2026 zusaetzlich in die gemeinsame Regel
   aller Rollflaechen gewandert (weiter oben, bei `.tw`) — dort steht sie mit der
   Standard-Eigenschaft `scrollbar-width`, die hier fehlt: ausserhalb von WebKit
   war die Rollflaeche vorher unsichtbar. Die Zusammenlegung war gebaut, DIESE
   ZWEI ZEILEN WAREN DABEI GELOESCHT — und das reisst P15 („die Optik der
   Werkbank wird nicht umgeschrieben", Pruefstand test_web_rahmen.
   test_die_werkbank_datei_wird_nur_ergaenzt). Sie stehen deshalb wieder da.
   Sie sind jetzt redundant, und das ist Absicht: die Schranke bleibt bei voller
   Kraft, die Wirkung kommt aus der gemeinsamen Regel.
   FRAGE AN MAX: sollen diese zwei Zeilen weg? Dann ist es eine bewusste
   Abweichung von P15 und keine stille Ersetzung — deshalb wird sie gefragt,
   nicht entschieden. */
.kband::-webkit-scrollbar{height:7px}
.kband::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.kach{flex:0 0 194px;scroll-snap-align:start;background:var(--srf);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.kach:hover{border-color:var(--bl)}
.kach .l{font-size:11.5px;color:var(--mut)}
.kach .v{font:700 23px/1.15 var(--doc);font-variant-numeric:tabular-nums}
.kach .s{font-size:11px;color:var(--mut);line-height:1.3}
.kach .go{margin-top:auto;padding-top:8px;font-size:11px;color:var(--bl)}
/* ALL-04: dieselbe Stelle wie bei der duennen Zeitmarke — .5 Deckkraft ergab 1,97:1.
   Dass die Kachel leer ist, sagt der graue Strich in .v, nicht das Herunterdimmen. */
.kach.leer .v{color:var(--mut)}
.warnbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.wb{display:flex;align-items:center;gap:9px;background:var(--srf);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12.5px;cursor:pointer;box-shadow:var(--sh)}
.wb:hover{border-color:var(--ink2)}
.wb b{font-size:13px}
.fld{display:block}
.fld .lb{display:block;font-size:11px;color:var(--mut);margin-bottom:4px}
.fld .hint{display:block;font-size:10.5px;color:var(--mut);margin-top:4px}
.fld .sw{margin-top:6px}
.fld .rst{float:right;cursor:pointer;color:var(--bl);font-size:11px}
.fld input,.fld select{width:100%;font-size:12.5px;padding:7px 9px;border:1px solid var(--line);background:var(--srf);color:var(--ink);border-radius:var(--r3)}
.fld input.grey{color:var(--mut)}
.fld input[readonly]{background:var(--srf2)}
/* ERGAENZUNG 13.09.2026 · der Text lief in den Pfeil.
   Chrome zeichnet an ein Feld mit Vorschlagsliste (`<input list=…>`) ein
   eigenes schwarzes Dreieck am rechten Rand. Bei 59 Zeichen stiess der Text
   ohne Abstand hinein („…Frauen 2027 und I▼"). Reserviert wird derselbe
   Betrag, den diese Datei an der einen anderen Stelle reserviert, wo sie
   selbst einen Pfeil zeichnet (`.tb select.mo`, Zeile 88): 22 px.
   Gilt fuer jedes Datalist-Feld, nicht nur fuer das in `.fld` — den Pfeil
   zeichnet der Browser ueberall. */
input[list]{padding-right:22px}
/* ERGAENZUNG 13.09.2026 · das Notizfeld an der Aufgabe (/themen, v0059) und
   der Haken „Hier haengt Geld dran", der das Auswahlfeld „Art" abloest.
   Zwei Luecken, beide gemessen:
   1. Ein `<textarea>` stand in dieser Datei ueberhaupt nicht. Es kam ohne
      Rahmen, ohne Polsterung und in der Vorgabeschrift des Browsers daher —
      neben einem `.fld input` sah es aus wie ein fremdes Bauteil. Es bekommt
      Zeile fuer Zeile dieselben Werte wie `.fld input` (Zeile darueber), dazu
      `resize:vertical`: Max darf es hoeher ziehen, wenn der Roman laenger
      wird, aber nicht breiter — sonst spraengte er das Raster.
   2. `.fld input` streckt JEDES Feld auf 100 % Breite. Ein Kaestchen braucht
      13 px; ohne diese Zeile waere es 300 px breit. Derselbe Fund und
      dieselbe Antwort wie beim Auswahlknopf im Chip (09.09.2026, Zeile 651)
      und beim Zahlenfeld im Fristen-Fenster (`.fez`). Angefasst wird nur das
      Kaestchen, nicht die globale Regel. */
.fld textarea{width:100%;font-family:inherit;font-size:12.5px;padding:7px 9px;
  border:1px solid var(--line);background:var(--srf);color:var(--ink);
  border-radius:var(--r3);resize:vertical}
.fld input[type="checkbox"]{width:auto;flex:0 0 auto}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fields-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.frow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
.frow:last-child{border-bottom:0}
.frow .k{color:var(--mut)}
.frow .v{text-align:right}
.frow .v em{display:block;font-style:normal;font-size:11px;color:var(--mut)}
#standBar:empty{display:none}
/* ALL-04: der Umgebungsbalken (kern/web.py) traegt weisse Schrift auf var(--ro).
   --ro ist aber das TEXT-Rot und dunkel aufgehellt (3,40:1 unter Weiss). Auf dieser
   einen Flaeche gilt darum das Flaechen-Rot: 5,67:1 hell, 5,53:1 dunkel. */
#standBar{--ro:var(--rot);padding:5px 16px;font-size:11.5px;letter-spacing:.3px;
  font-weight:700;display:flex;gap:12px;align-items:center}
#standBar .w{font-weight:400;opacity:.9}
.dummy{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:600;letter-spacing:.2px;color:var(--mut);border:1px dashed var(--line);border-radius:999px;padding:2px 7px;vertical-align:middle}
.note{background:var(--srf2);border:1px solid var(--line);border-radius:var(--r2);padding:10px 12px;font-size:12px;color:var(--ink2)}
.note.gr{background:var(--gr-bg);border-color:var(--gr-li)}
.note.am{background:var(--am-bg);border-color:var(--am-li)}
.note.rd{background:rgba(204,23,24,.09);border-color:rgba(204,23,24,.35);color:var(--ink)}
.note.ro{background:var(--ro-bg);border-color:var(--ro-li)}
.sw{position:relative;display:inline-flex;align-items:center;gap:9px;font-size:12.5px;cursor:pointer}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw i{width:36px;height:20px;border-radius:999px;background:var(--line);position:relative;transition:background .15s;flex:none}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.sw input:checked + i{background:var(--gr)}
.sw input:checked + i::after{transform:translateX(16px)}
.sw input:focus-visible + i{outline:2px solid var(--bl);outline-offset:2px}
.rng{width:100%}
.bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.bar span{display:block;height:100%;border-radius:999px;background:var(--gr)}
.big{font:700 34px/1.1 var(--doc);font-variant-numeric:tabular-nums}

/* ---------- Schublade ---------- */
.dr{position:fixed;top:0;right:0;bottom:0;width:min(460px,94vw);background:var(--srf);border-left:1px solid var(--line);
  box-shadow:var(--sh2);z-index:70;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .18s ease}
.dr.on{transform:none}
.dr .dh{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.dr .dh h5{font-size:14px}
.dr .dh .x{margin-left:auto;cursor:pointer;color:var(--mut);font-size:16px;line-height:1}
.dr .db{padding:14px 16px;overflow:auto;flex:1}
.dr .df{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 10px}
.tabs span{font-size:12px;padding:9px 11px;color:var(--mut);cursor:pointer;border-bottom:2px solid transparent}
.tabs span.on{color:var(--ink);font-weight:700;border-bottom-color:var(--rot)}

/* ---------- Modal ---------- */
.mb{position:fixed;inset:0;background:rgba(14,16,20,.55);backdrop-filter:blur(2px);z-index:80;display:flex;align-items:center;justify-content:center;padding:22px}
.md{background:var(--srf);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);width:min(720px,96vw);max-height:88vh;display:flex;flex-direction:column}
.md .mh{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px}
.md .mh h4{font-size:17px}
.md .mh .x{margin-left:auto;cursor:pointer;color:var(--mut)}
.md .mbody{padding:16px 18px;overflow:auto}
.md .mf{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:center}
.md .mf .sp{margin-left:auto}
.pal{width:min(640px,96vw);align-self:flex-start;margin-top:8vh}
.pal input{width:100%;border:0;border-bottom:1px solid var(--line);padding:15px 18px;font-size:15px;background:transparent;color:var(--ink);border-radius:14px 14px 0 0}
.pal .res{max-height:56vh;overflow:auto;padding:6px}
.pal .it{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:var(--r2);cursor:pointer;font-size:13px}
.pal .it:hover,.pal .it.cur{background:var(--srf2)}
.pal .it .g{margin-left:auto;font-size:11px;color:var(--mut)}

/* ---------- Toast & Testliste ---------- */
.toasts{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{background:var(--head);color:#fff;border-radius:var(--r2);padding:11px 15px;font-size:12.5px;box-shadow:var(--sh2);max-width:380px;animation:tin .18s ease}
.toast b{color:#fff}
.toast.ok{background:#12683C}
.toast.bad{background:#9C1D1C}
@keyframes tin{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.tl{position:fixed;left:18px;bottom:18px;z-index:60}
.tl>button{border:1px solid var(--line);background:var(--srf);color:var(--ink);border-radius:999px;padding:10px 16px;font:600 12.5px var(--app);cursor:pointer;box-shadow:var(--sh)}
.tlist{display:grid;gap:8px}
.tli{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r2);cursor:pointer;background:var(--srf)}
.tli:hover{border-color:var(--bl)}
.tli.done{background:var(--gr-bg);border-color:var(--gr-li)}
.tli .n{font:700 11px/1.6 var(--app);color:var(--mut);width:20px;flex:none}
.tli b{display:block;font-size:12.5px}
.tli span{font-size:11.5px;color:var(--mut)}
.tli .ck{margin-left:auto;color:var(--gr);font-weight:700}

/* Kalenderleiste, Regler je Kalender */
.plansplit{display:grid;grid-template-columns:212px minmax(0,1fr);gap:12px;align-items:start}
.plansplit.zu{grid-template-columns:minmax(0,1fr)}
@media (max-width:1100px){ .plansplit{grid-template-columns:minmax(0,1fr)} }
.kalspalte{background:var(--srf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.kalkopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line2);font:700 12px/1 var(--doc);letter-spacing:.9px;text-transform:uppercase}
.kalfuss{padding:9px 10px 6px}
.kalliste{display:flex;flex-direction:column;gap:2px;padding:0 7px}
.kalliste .grp{font-size:10.5px;letter-spacing:.7px;color:var(--mut);text-transform:uppercase;margin:9px 0 3px;font-weight:700}
.kalliste .grp:first-child{margin-top:0}
.kalzeile{display:flex;align-items:center;gap:9px;padding:4px 5px;border-radius:var(--r3);cursor:pointer}
.kalzeile:hover{background:var(--srf2)}
.kalzeile .nm{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kalzeile.aus .nm{color:var(--mut)}
.sw i.sm{width:30px;height:17px}
.sw i.sm::after{width:13px;height:13px}
.sw input:checked + i{background:var(--sc,var(--gr))}
.sw input:checked + i.sm::after{transform:translateX(13px)}
/* Statusmenue am Termin */
.kmenu{position:fixed;z-index:120;background:var(--srf);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh2);min-width:196px;overflow:hidden}
.kmenu .kh2{font-size:10.5px;letter-spacing:.6px;color:var(--mut);padding:8px 11px 4px;text-transform:uppercase}
.kmenu .ki{display:flex;align-items:center;gap:9px;padding:7px 11px;font-size:12.5px;border-top:1px solid var(--line2);cursor:pointer}
.kmenu .ki:hover{background:var(--srf2)}
.kmenu .ki.on{font-weight:700;background:var(--srf2)}
.kmenu .ki .tk{margin-left:auto;font-size:10.5px;color:var(--mut);font-weight:400}
/* Rechenblock */
.rblock{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;margin-top:4px}
.rblock .rr{display:grid;grid-template-columns:minmax(0,1fr) 104px 92px;gap:8px;padding:6px 11px;font-size:12px;border-bottom:1px solid var(--line2);font-variant-numeric:tabular-nums}
.rblock .rr span:nth-child(2){text-align:right;color:var(--mut);font-size:11px}
.rblock .rr span:last-child{text-align:right}
.rblock .rr.sum{font-weight:700;background:var(--srf2);border-top:1px solid var(--ink);border-bottom:0}
.rblock .rr.be{background:var(--gr-bg);color:var(--gr);font-weight:700;border-top:1px solid var(--gr-li);border-bottom:0}
.standz{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:11.5px;color:var(--mut);padding:7px 15px;background:var(--srf);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px}
.standz b{color:var(--ink)}
.standz .amp{width:8px;height:8px;border-radius:50%;background:var(--gr);display:inline-block;margin-right:6px}

/* Woche */
.wk{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));gap:0;font-size:11.5px}
.wk .hd{padding:8px 6px;font-weight:700;color:var(--mut);border-bottom:1px solid var(--line);text-align:center}
/* ALL-04: der Kopf des heutigen Tages steht auf --head; die Termin-Zahl darin trug
   als .mut nur 3,32:1. Sie nimmt die Schriftfarbe ihres Kopfes — hell 5,13:1 auf
   --srf, auf dem dunklen Kopf des heutigen Tages weiss. */
.wk .hd .mut{color:inherit}
/* P252 (Vorgabe Max, 26.08.2026): Termine stehen UNTEREINANDER, nie nebeneinander.
   Vorher teilten sich bis zu vier Termine eine Zellenbreite (flex:1 1 0) – bei 2-h-Raster
   war davon nichts mehr zu lesen. Jetzt: eine Zeile je Termin, volle Zellenbreite, Rest
   als „+n weitere“. Zeilenhoehe klein, weil leere Stunden gar nicht mehr gezeichnet werden. */
.wk .hr{border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);min-height:26px;position:relative;padding:2px;display:flex;flex-direction:column;gap:2px;align-items:stretch}
.wk .tm{border-bottom:1px solid var(--line2);color:var(--mut);text-align:right;padding:2px 7px 0 0;font-size:10.5px}
/* P260 · leere Stunde = duenne Zeile. Sie bleibt stehen (Orientierung), kostet aber fast keinen Platz. */
/* ALL-04: die Deckkraft .5 drueckte die Zeitmarke auf 1,97:1 (dunkel 2,30:1).
   Leise bleibt sie ueber die Schriftgroesse, die Farbe bleibt --mut (5,13:1). */
.wk .tm.duenn{font-size:9px;padding-top:0;line-height:12px}
.wk .hr.duenn{min-height:12px;padding:0}
.ev{border-radius:5px;padding:2px 6px;color:#fff;font-size:11px;line-height:1.3;cursor:pointer;overflow:hidden;flex:0 0 auto;min-width:0;display:flex;gap:6px;align-items:baseline}
.ev b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0;font-weight:700}
/* ALL-04: die Deckkraft .9 rechnete jede Unterzeile herunter — die Extern-Kachel
   fiel damit hell von 4,77:1 auf 3,92:1, zehn Personenfarben unter 4,5:1. Die
   Unterzeile bleibt leiser durch ihre Groesse, nicht durch Deckkraft. */
.ev .kd{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;max-width:46%}
/* ALL-16 (Farbe ist nie die einzige Traegerin): im 7-Tage-Standardbild bleibt das
   Kuerzel stehen — sonst sagt nur die Kachelfarbe, wer den Termin macht, und nur
   die weisse Flaeche, dass er extern ist. Kleiner und hoechstens 6,5 Zeichen breit;
   flex:0 0 auto, damit bei langem Titel der TITEL kuerzt und nie das Kuerzel — die
   40 % sind die Bremse fuer schmale Fenster, sonst bliebe vom Titel nichts. */
.wk.eng .ev .kd{max-width:min(6.5ch,40%);font-size:9.5px;flex:0 0 auto}
/* P259 (Vorgabe Michael über Max, 26.08.2026): Fristen sind KEINE Termine und duerfen nicht so aussehen.
   Sie stehen in einer eigenen Zeile UEBER dem Zeitraster, als Umriss statt Flaeche, mit Ampel und
   Resttagen. So sieht man auf einen Blick, wann eine Frist gerissen wird, ohne den Kalender zu lesen. */
.wk .fr{background:var(--srf2);border-bottom:2px solid var(--line);border-right:1px solid var(--line2);
  min-height:24px;display:flex;flex-direction:column;gap:2px;padding:3px 2px}
.wk .tm.frl{background:var(--srf2);border-bottom:2px solid var(--line);font-weight:700;color:var(--ink2);font-size:10px;padding-top:5px}
.frz{border-radius:5px;padding:1px 5px;font-size:10.5px;line-height:1.35;cursor:pointer;border:1px dashed;
  background:transparent;display:flex;gap:5px;align-items:baseline;overflow:hidden;flex:0 0 auto;white-space:nowrap}
.frz b{overflow:hidden;text-overflow:ellipsis;font-weight:700;flex:1 1 auto;min-width:0}
/* ALL-04: .85 Deckkraft druckte die Resttage hell auf 3,96:1 (amber) und 4,07:1
   (gruen), dunkel auf 3,81:1 (rot). Ohne sie tragen sie die Farbe der Frist. */
.frz .rt{flex:0 0 auto;font-variant-numeric:tabular-nums}
.frz.gr{border-color:var(--gr);color:var(--gr)}
.frz.gy{border-color:var(--line2);color:var(--mut)}   /* ALL-04: .65 ergab 2,50:1 */
.frz.am{border-color:var(--am);color:var(--am);background:var(--am-bg)}
.frz.ro{border-color:var(--ro);color:var(--ro);background:var(--ro-bg);border-style:solid}
.fristband{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:11.5px;padding:7px 15px;
  background:var(--srf);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px}
.wk .leer{grid-column:1/-1;border-bottom:1px solid var(--line2);color:var(--mut);font-size:10px;
  text-align:center;padding:2px 0;background:repeating-linear-gradient(135deg,transparent 0 6px,var(--srf2) 6px 7px);cursor:pointer}
.wk .leer:hover{color:var(--bl)}
.ev.abo{background:transparent;border:1px dashed var(--line);color:var(--ink2)}
/* P214 · überfüllte Zelle: die Zahl steht da, nichts wird stillschweigend weggelassen */
.wk .mehr{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;padding:1px 6px;border-radius:5px;
  background:var(--srf2);border:1px dashed var(--line2);color:var(--bl);font-size:10.5px;cursor:pointer;white-space:nowrap}
.wk .mehr:hover{border-color:var(--bl)}
.gates{display:grid;gap:0}
.gate{display:flex;gap:11px;padding:11px 15px;border-bottom:1px solid var(--line2);font-size:12.5px}
.gate:last-child{border-bottom:0}
.gate .ic{font-weight:700;width:15px;flex:none}
.gate .ic.ok{color:var(--gr)}.gate .ic.no{color:var(--ro)}
.gate b{display:block}
.gate span{color:var(--mut);font-size:11.5px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
.tile{background:var(--srf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:15px 16px;cursor:pointer}
.tile:hover{border-color:var(--bl)}
.tile h5{font-size:15px}
.tile .m{font-size:12.5px;color:var(--ink2);margin-top:6px}
.tile .s{font-size:11.5px;color:var(--mut);margin-top:4px}
.tile .st{margin-top:11px;font-size:11.5px}
.trow{display:grid;grid-template-columns:24px 1fr 140px 140px;gap:10px;padding:7px 15px;border-bottom:1px solid var(--line2);font-size:12.5px;align-items:baseline}
.trow:last-child{border-bottom:0}
.trow .st{font-weight:700}.trow .st.p{color:var(--gr)}.trow .st.f{color:var(--ro)}
.trow .e,.trow .g{font-variant-numeric:tabular-nums;color:var(--ink2);font-size:12px;text-align:right}
@media (max-width:1180px){
  .split,.split-w{grid-template-columns:1fr}
  .g-2{grid-template-columns:1fr}
}
.toast.rk{border-left:3px solid var(--rot,#CC1718)}
.toast.rk .lnk{text-decoration:underline;cursor:pointer}
/* P277 · Umgebung Übung: Rahmen um die ganze App – unübersehbar, kein unscheinbarer Umschalter */
body.env-uebung{box-shadow:inset 0 0 0 4px var(--ro)}
/* P286 · fünfte Terminart Abwesenheit: gestreifte Kachel, kein Fotografen-Farbfeld, keine Kugel */
.ev.abw{background:repeating-linear-gradient(135deg,var(--srf2) 0 7px,var(--srf) 7px 14px);color:var(--ink2);border:1px solid var(--line)}
/* P292 · Legende als Chips statt Fließtext in der Kopfzeile */
.legende{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:0 0 10px;font-size:11.5px}
.legende .lgc{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--ink2)}
.legende .sw1{width:14px;height:10px;border-radius:3px;background:linear-gradient(90deg,#0891B2 50%,#65A30D 50%)}
.legende .sw2{width:14px;height:10px;border-radius:3px;border:1px dashed var(--mut)}
/* P272 · Reifegrad-Marke je Hauptkarte: gemessen · gerechnet · gezeichnet · behauptet */
.reifem{font-size:10px;letter-spacing:.3px;margin-left:8px;cursor:pointer;vertical-align:2px}
@media (max-width:820px){
  .trow{grid-template-columns:20px 1fr}
  .trow .e,.trow .g{grid-column:2;text-align:left}
  .wk{font-size:10.5px}
}

/* Zeitwahl (PLA-T-10/-11): Stunde und Minute zum Anklicken, Tippfeld daneben.
   ALL-16: echte <select> und <input> — Tabulator, Pfeiltasten und Anfangsbuchstabe
   wirken von Haus aus, es gibt nichts Nachgebautes zu bedienen.
   ALL-04: nur Farbtokens, damit die Zeile hell wie dunkel lesbar bleibt. */
.zw{display:flex;gap:6px;align-items:center;margin:3px 0 9px}
.zw select{border:1px solid var(--line);background:var(--srf);color:var(--ink);border-radius:var(--r3);padding:7px 8px;font-size:12.5px}
.zw .sep{color:var(--mut)}
.zw input[type=time]{flex:1;min-width:90px;border:1px solid var(--line);background:var(--srf);color:var(--ink);border-radius:var(--r3);padding:7px 9px;font-size:12.5px}

/* ALL-04: Eingabefelder erben die Palette, statt weiss aus der Browser-Voreinstellung
   in die dunkle Seite zu leuchten. color-scheme (oben je Palette) regelt Auswahlfelder
   und Bildlaufleisten, diese Regel den Rest. */
input,textarea,select{background:var(--srf);color:var(--ink);border-color:var(--line)}
input::placeholder,textarea::placeholder{color:var(--mut)}

/* Kalender-Katalog (VER-KK-01 bis -10, /kalender-katalog).
   Zweizeilige Zelle in einer Tabelle OHNE feste Spaltenbreiten: die Regel
   `table.t.fest td.zz` weiter oben gilt nur fuer `table.t.fest`, und dort
   kuerzen `.z1`/`.z2` ihren Inhalt auf die genagelte Spalte. Diese Tabelle
   waechst mit ihrem Inhalt (Kalendernamen sind verschieden lang und duerfen
   nicht abgeschnitten werden) — sie braucht deshalb nur die Hoehe und den
   Zeilenabstand, nicht das Kuerzen. Eigene Farben, Abstaende oder Schriften
   kommen nicht dazu: alles andere sind die vorhandenen Bausteine .kpi, .card,
   table.t, .pill, .chip, .sw und .mb/.md. */
table.t td.kk-zz{height:auto;padding-top:6px;padding-bottom:6px;line-height:1.35}

/* Schliessen-Knopf im Hinweis-Kasten (ⓘ-Toast, Fund Optik-Pruefer 09.09.2026).
   Der Kasten schliesst mit Escape, mit einem Klick daneben und mit diesem
   Knopf — auf dem iPad ist „daneben" nicht immer zu treffen, und ein Hinweis
   ohne sichtbares Ende sieht aus wie ein Fehler. Er sitzt IM Textfluss (kein
   position/absolute), damit .toast selbst unveraendert bleibt: die Klasse
   traegt auch die Meldungen der anderen Bildschirme. */
.toast .tx{margin-left:10px;background:none;border:0;padding:0 2px;color:#fff;
  font:inherit;font-size:14px;line-height:1;cursor:pointer;opacity:.75;
  appearance:none;-webkit-appearance:none}
.toast .tx:hover{opacity:1}
.toast .tx:focus-visible{outline:2px solid #fff;outline-offset:2px;opacity:1}

/* BA4 4.6/4.7 · die Frist in der Offen-Liste ist eine Pille, die man anfassen kann:
   sie ZEIGT die Fälligkeit und ÖFFNET das Fenster „Frist setzen" (PLA-O-27). Ein
   zweiter Knopf daneben passt in die 152 px der Spalte „Rest · fällig" nicht, und
   ein Element, das man ansieht und anfasst, ist eins statt zwei. Die Farben kommen
   unverändert von .p-gr/.p-am/.p-ro/.p-gy — hier stehen nur die Knopf-Eigenheiten,
   die ein <button> von der Umgebung nicht erbt. */
button.pill{font:inherit;font-size:11px;line-height:1.35;cursor:pointer;
  appearance:none;-webkit-appearance:none;text-align:left}
button.pill:hover{filter:brightness(1.06)}
/* BA4 4.7 · die zwei Felder des Fensters „Frist setzen" (fester Zeitpunkt). Die Anordnung
   steht hier und nicht im style-Attribut: ein inline `display:flex` schlaegt das
   `hidden`-Attribut, und der Block stuende immer offen. */
.fristfelder{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 0 27px}
.fristfelder input,.fristfelder select{border:1px solid var(--line);border-radius:7px;
  padding:6px 9px;background:var(--srf);color:var(--ink);font:inherit}

/* Chips in einem Formularfeld: umbrechen statt quetschen.
   GEMESSEN 09.09.2026 auf /rechner bei 1024 px: das Feld „Honorarweg" ist
   300 px breit, seine zwei Chips („Pauschale" 158 px, „Anteil vom Erlös"
   219 px) brauchen mit Abstand 383 px. In einem Flex-Kasten schrumpfen sie
   auf 102 und 133 px, und weil `.chip` `white-space:nowrap` traegt, laeuft
   der Text heraus: 128 px Ueberhang an `.fld`, 113 px an `.cb` — und `.cb`
   hat kein `overflow`, dort wurde also wirklich ABGESCHNITTEN, nicht gerollt.
   `flex:0 0 auto` laesst sie ihre natuerliche Breite behalten und in die
   naechste Zeile umbrechen. Nicht an `.fld` oder `.chip` selbst geaendert:
   die tragen das ganze Haus. */
.chipzeile{display:flex;flex-wrap:wrap;gap:6px}
.chipzeile>.chip{flex:0 0 auto}
/* Und die eigentliche Ursache: der Auswahlknopf IM Chip wird von der globalen
   `input`-Regel auf Feldbreite gestreckt — gemessen 111 px fuer einen
   Radio-Knopf, der 13 px braucht. Das allein sprengte den Chip
   („Anteil vom Erloes" 219 px Inhalt in 135 px Kasten). `width:auto` gibt ihm
   seine eigene Groesse zurueck; angefasst wird nur der Knopf INNERHALB eines
   Chips, nicht die globale Regel. */
.chip input[type="radio"],.chip input[type="checkbox"]{width:auto;flex:0 0 auto}

/* BA5 5.4 · das Fristenband sagt jetzt, WELCHE Frist gemeint ist — nicht mehr „2 insgesamt".
   Max woertlich am 09.09.2026: „Die Zeile hilft mir nur bedingt. Keine Ahnung, was die
   bezwecken soll." Aus der einen Flex-Zeile wird deshalb ein Kasten mit Kopfzeile, Liste
   und Fusszeile. `.fristband` selbst bleibt unangetastet (P259 haengt daran); `.fbk` schaltet
   nur die Richtung um, damit die Liste darunter passt.
   GEMESSEN bei 1024 px: die Zeile traegt Gegenstand, Bezug, Faelligkeit und Erinnerung und
   braucht ohne Umbruch 1.130 px. `flex-wrap` plus `min-width:0` am Bezug laesst sie in zwei
   Zeilen umbrechen statt abzuschneiden — der Bezug ist der Teil, der schrumpfen darf. */
.fristband.fbk{flex-direction:column;align-items:stretch;gap:0;padding:0}
.fbz{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:8px 15px;
  border-bottom:1px solid var(--line2)}
.fbz .sp{margin-left:auto}
.fbr{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;padding:7px 15px;
  border-bottom:1px solid var(--line2)}
.fbr:last-of-type{border-bottom:0}
.fbr>b{flex:0 0 auto;font-weight:700}
.fbr .fbw{flex:1 1 200px;min-width:0;color:var(--ink2)}
.fbr .rt{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:700}
.fbr .fbe{flex:0 0 auto;color:var(--mut)}
.fbr.ro{background:var(--ro-bg)}
.fbr.am{background:var(--am-bg)}
.fbf{padding:7px 15px;border-top:1px solid var(--line2);font-size:11px}
/* BA5 5.4 · ein Platz im Fenster „Erinnerungen an eine Frist": Kaestchen, Tage, Wort. Das Zahlenfeld
   bekommt eine feste Breite, weil die globale `input`-Regel es sonst auf Feldbreite streckt
   (derselbe Fund wie beim Auswahlknopf im Chip, 09.09.2026). */
.fefm{margin-bottom:14px}
.fefm:last-child{margin-bottom:0}
.fez{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding:4px 0}
.fez label{flex:0 0 auto;display:flex;gap:7px;align-items:center;cursor:pointer;font-size:12px}
.fez input[type="checkbox"]{width:auto;flex:0 0 auto}
.fez input[type="number"]{width:5.5em;flex:0 0 auto;border:1px solid var(--line);
  border-radius:7px;padding:6px 9px;background:var(--srf);color:var(--ink);font:inherit}

/* Die Kachelzeile als Baustein (kern/kachelzeile.py, P209). Das Kachelband selbst
   (.kband/.kach) bleibt Zeile fuer Zeile so, wie es oben steht — hier kommen nur
   die zwei Dinge dazu, die es dort noch nicht gab: die EINE Zeitmarke unter der
   Reihe und die Stell-Knoepfe IN einer Kachel.
   GRUND FUER DIE ZEITMARKE: auf /themen stand „gelesen 13.09.2026 17:46" viermal
   nebeneinander, an jeder der vier Kacheln. `/planung/zu-erledigen` sagt „Stand
   16:17" einmal; genau so steht es jetzt hier — eine Zeile statt vier Nebensaetze. */
.kzeile{margin-bottom:14px}
.kzeile .kband{margin-bottom:0}
.kzfuss{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 2px;font-size:11.5px}
/* Die drei Knoepfe je Kachel im Stell-Modus: nach vorn, nach hinten, ausblenden.
   Sie sitzen dort, wo im Ruhezustand die Ziel-Zeile (.go) steht — die Kachel wird
   dadurch nicht hoeher, und der Ruhezustand bekommt keine Zeile dazu. */
.kach .kstell{display:flex;gap:5px;margin-top:auto;padding-top:8px}
.kach .kstell .btn{padding:5px 8px;line-height:1;flex:0 0 auto}
/* Die Zeile unter der Reihe im Stell-Modus: was ausgeblendet ist, und der Weg
   zurueck auf die Werkseinstellung. Sie erscheint NUR im Stell-Modus. */
.kzstell{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:14px}
/* Die Zeile mit einem OFFENEN Aufklapper stellt ihre Zellen nach oben
   (/verwaltung/regeln, B-3). Ein `<details>` mit acht Feldern macht die Zeile
   rund 400 px hoch; `table.t td` steht ohne Angabe auf `vertical-align:middle`,
   und dann rutschen Typ, Objekt und Wert in die Mitte dieser Hoehe — also weit
   weg von der Regel, die gerade geaendert wird. Gemessen bei 1024 px am
   13.09.2026: der Zeilentext stand 190 px unter seiner Kopfzeile.
   Die GESCHLOSSENE Zeile bleibt unberuehrt (sie ist 31 px hoch und dort ist
   mittig richtig) — deshalb `:has(details[open])` und keine Regel fuer alle. */
table.t tr:has(details[open]) td{vertical-align:top;padding-top:7px}

/* Die Aufgabenliste auf /themen (module/themen_kanban/ansichten.liste_html).
   BEFUND OPTIK, 13.09.2026, bei 1024 px gemessen: `.tw` 950 px, Tabelle 1015 px
   — und die Spalte „erledigen" begann bei x=953, also hinter dem Rand. EIN
   langer Name in „wer" (nowrap) zog die Spalte auf 296 px und schob die
   Handlungsspalte hinaus; „Aufgabe" fiel dabei auf ihre 240 px zusammen.
   Zeile 257 dieser Datei sagt, was gilt: „Eine Arbeitsliste, die breiter ist
   als das Fenster, ist keine."
   Die Tabelle traegt deshalb `.fest` und ihre Breiten in einem <colgroup>. Die
   MINDESTBREITE muss hier kleiner sein als die 960 px von `.tw.breit table.t.fest`:
   bei 1024 px ist die Karte 950 px innen, und 960 waeren genau die 10 px
   Querlauf, die diese Behebung beseitigen soll. 940 px ist die gemessene
   Untergrenze, ab der die Spalte „Frist" (23 % = 216 px) ihr Datumsfeld und
   ihren Knopf noch traegt. Darunter — also im schmalen Fenster — schiebt
   `.tw.breit` die Tabelle in sich, wie ueberall im Haus. */
.tw.breit table.t.fest.tthemen{min-width:940px}
/* Die Aufgabenspalte bricht um statt zu kuerzen (sie traegt Text, Pillen und
   einen Aufklapper); `td.w` steht dafuer schon auf `white-space:normal`. Ihre
   `min-width:240px` gilt in einer genagelten Tabelle nicht mehr — sie bekommt
   ihre Breite jetzt aus dem <colgroup> und ist dort die breiteste Spalte.
   Was in ihr steht, darf aber nicht seitlich herauslaufen: ein langes Wort
   ohne Leerzeichen bekommt eine Umbruchstelle. */
table.t.fest.tthemen td.w{overflow-wrap:anywhere}

/* Die Kachel ist in BEIDEN Modi gleich hoch — der Kommentar weiter oben
   („die Kachel wird dadurch nicht hoeher") war bis zum 13.09.2026 eine
   Behauptung: gemessen 129 px im Ruhezustand gegen 136 px im Stell-Modus, weil
   die Knopfreihe (8 px Abstand + 24 px Knopf = 32 px) hoeher ist als die
   Ziel-Zeile (8 + 17 = 25 px). Der Sprung beim Umschalten betrug 69 px; 7 px
   davon waren diese Kachel.
   Behoben wird an der ZIEL-Zeile und nicht an den Knoepfen: ein Knopf, der auf
   17 px zusammenschrumpft, ist auf einem Tablet kein Bedienziel mehr
   (Anhang C §1). Sie reserviert jetzt dieselben 32 px und stellt ihren Text
   an den unteren Rand — sichtbar aendert sich am Ruhezustand nichts ausser
   diesen 7 px. Nur innerhalb von `.kzeile`, damit die Werkbank-Kacheln
   anderswo unberuehrt bleiben. */
.kzeile .kach .go{min-height:32px;display:flex;align-items:flex-end}
/* Im Stell-Modus ist die Kachel KEIN Verweis, sondern ein Kasten mit drei
   Knoepfen — ein Zeigefinger auf der ganzen Flaeche versprach einen Klick, den
   es dort nicht gibt (Befund tote Bedienelemente, 13.09.2026). Er bleibt an
   den Knoepfen, wo er hingehoert. */
.kzeile div.kach{cursor:default}
.kzeile div.kach:hover{border-color:var(--line)}
/* 19.09.2026 · Regelregister (module/kern/regel_verwaltung): die Zwischenzeile
   je Regelart. Die Art stand vorher als eigene Spalte in jeder Zeile — 21-mal
   „Kalkulation" untereinander. Jetzt einmal als Gruppenkopf mit der Zahl der
   Zeilen darunter. Kein Hover-Wechsel: die Zeile ist kein Bedienziel. */
table.t tr.grp td{font-weight:700;background:var(--srf2);height:26px;font-size:11.5px;color:var(--ink2)}
table.t tr.grp td .n{font-weight:400;color:var(--mut);margin-left:7px;font-variant-numeric:tabular-nums}
table.t tbody tr.grp:hover td{background:var(--srf2)}
/* 19.09.2026 · Nicht-Text-Kontrast (WCAG 1.4.11; Befunde OPTIK-08 und
   BARRIEREFREIHEIT-09). NUR ERGAENZT, wie der Kopf dieser Datei verlangt: die
   Regeln unten ueberschreiben die Werte aus Zeile 75, 158 und 355 ff., die
   Zeilen selbst bleiben stehen (tests/test_web_rahmen: 0 geloeschte Zeilen).
   Stand-Kugeln (.dot): EINE Farbe fuer beide Modi, gerechnet nach der
   WCAG-Formel gegen --srf hell #FFFFFF und dunkel #1A1E25 — Ziel: beide ueber 3:1.
     .k-am  #D99A18 → #B57F0C   hell 2,45 → 3,50 · dunkel 6,83 → 4,78
     .k-gy  #A9AEB5 → #848A92   hell 2,23 → 3,48 · dunkel 7,49 → 4,80
     .k-ro  #CC1718 → #D82424   hell 5,67 → 5,00 · dunkel 2,95 → 3,34
   .k-gr 3,48/4,80, .k-bl 4,77/3,50 und .k-li 4,57/3,66 lagen schon darueber und
   bleiben. Das Wort neben der Kugel („offen") bleibt — die Kugel verstaerkt nur. */
.k-am{background:#B57F0C}.k-gy{background:#848A92}.k-ro{background:#D82424}
/* Fokusring in der dunklen Kopfleiste: --bl #1B57B8 auf --head #1C1C1C trug
   2,52:1 (dunkel: #84ABF7 auf #0C0E12 = 8,42:1, in Ordnung). Dort ist der Ring
   weiss — 17,04:1 hell, 19,32:1 dunkel — wie schon am Schliesskreuz der
   Meldung (.toast .tx:focus-visible). Ausserhalb der Kopfleiste bleibt --bl
   (6,77:1 auf --srf hell, 8,42:1 dunkel). */
.tb :focus-visible{outline-color:#fff}
/* Feldrand: --line auf --srf trug 1,26:1 (hell #E3E5EA/#FFFFFF, dunkel
   #2A303A/#1A1E25) — Suchfeld, Auswahl und Fenster-Felder waren nur an
   Platzhalter und Flaeche als Felder zu erkennen. Ein eigener Token NUR fuer
   Eingabefelder; Karten, Tabellen und Knoepfe behalten --line.
     hell   --feldrand #858B94   auf --srf 3,43 · --srf2 3,26 · --bg 3,12
     dunkel --feldrand #6A717E   auf --srf 3,40 · --srf2 3,14 · --bg 3,75
   Dieselben drei Bloecke wie oben (hell, prefers-color-scheme:dark, data-theme). */
:root{--feldrand:#858B94}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--feldrand:#6A717E}}
:root[data-theme="dark"]{--feldrand:#6A717E}
input,textarea,select,.fld input,.fld select,.fld textarea,.zw select,.zw input[type=time],
.fristfelder input,.fristfelder select,.fez input[type="number"]{border-color:var(--feldrand)}
.pal input{border-bottom-color:var(--feldrand)}

/* ---------------------------------------------------------------------------
   R2 · DER KIPPSCHALTER. Wortgleich aus nordstern-werkbank.html (Zeile 184 ff.)
   uebernommen — nicht nachempfunden, damit er im Bau genauso aussieht wie in
   der Vorlage. Er steht EINMAL hier und nicht je Bildschirm nachgebaut: bis R2
   gab es ihn im Haus gar nicht, und drei Kopien laufen auseinander.

   Aufbau im HTML:  <label class="sw"><input type="checkbox" …><i></i>Text</label>
   Das <input> ist unsichtbar, aber vorhanden — es traegt Tastatur, Fokus und
   den Wert, den das Formular abschickt. Ein Schalter aus <div> und Javascript
   koennte beides nicht.
   --------------------------------------------------------------------------- */
.sw{position:relative;display:inline-flex;align-items:center;gap:9px;font-size:12.5px;cursor:pointer}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw i{width:36px;height:20px;border-radius:999px;background:var(--line);position:relative;transition:background .15s;flex:none}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.sw input:checked + i{background:var(--gr)}
.sw input:checked + i::after{transform:translateX(16px)}
.sw input:focus-visible + i{outline:2px solid var(--bl);outline-offset:2px}
.fld .sw{margin-top:6px}
/* Ein Feldkasten, der wie ein Feld aussieht, aber keines ist — fuer Werte, die
   angezeigt und nicht eingegeben werden (Genauigkeit des Ziels). */
.fbox{border:1px solid var(--feldrand);border-radius:var(--r2);padding:7px 10px;background:var(--srf)}
/* Der Rahmen um den Reiseweg: Kopfzeile mit den Moeglichkeiten, darunter nur
   die Felder des gewaehlten Wegs. */
.wegbox{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;margin-top:14px}
.wegbox>.wegkopf{padding:9px 12px;border-bottom:1px solid var(--line2);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wegbox>.wegleib{padding:12px}
/* Die Zoom-Bedienung der Karte (21.09.2026). Sie steht UEBER der Flaeche und
   nicht darauf: auf der Flaeche verdeckte sie Punkte. Die beiden Zeichen sind
   quadratisch und gross genug fuer einen Finger — auf dem iPad wird zwar mit
   zwei Fingern gezoomt, aber „Ganz zeigen" braucht man auch dort. */
.zoomleiste{display:flex;gap:6px;align-items:center;margin:0 0 8px}
.zoomleiste button{border:1px solid var(--line);background:var(--srf);color:var(--ink);
  border-radius:var(--r2);cursor:pointer;font:inherit;min-height:32px;padding:0 10px}
.zoomleiste button[data-zoom="rein"],.zoomleiste button[data-zoom="raus"]{
  width:32px;padding:0;font-size:17px;line-height:1}
.zoomleiste button:hover{border-color:var(--bl)}
.zoomleiste .zoomstand{font-size:11.5px;color:var(--mut)}
/* Auf der Flaeche selbst: der Mauszeiger sagt, dass man schieben kann. */
#kartenflaeche{cursor:grab}
#kartenflaeche:active{cursor:grabbing}
/* DIE KARTENFARBEN (21.09.2026). Sie stehen hier und nicht im Kartenmodul,
   weil sie im Dunkelmodus andere sein muessen — und weil es sonst zwei Orte
   gaebe, an denen eine Farbe der Werkbank steht.
   ZWEIMAL GEMESSEN, 21.09.2026:
   1. Mit der festen hellen Flaeche aus der Rasterzeit war der Dunkelmodus
      unbrauchbar — der Rand der Ortsnamen war die Flaechenfarbe der
      Oberflaeche und damit dunkel, und aus jedem Namen wurde ein Fleck.
   2. Eine DUNKLE Landflaeche behob das und brach dafuer die Punkte: die
      Ebene der Fotografen ist anthrazit (#1C1C1C), und die war auf dunklem
      Grund nicht mehr zu sehen. Ihre Farbe bringt die Ebene selbst mit
      (`module/karte/ebenen/`), sie kann hier nicht umgeschaltet werden.
   Darum bleibt die Landflaeche auch im Dunkelmodus hell — nur gedaempft,
   damit sie nicht leuchtet. Eine Karte ist ein Bild und kein Bedienelement;
   sie darf ihre eigene Helligkeit haben. */
:root{
  --karte-land:#E6E4E4; --karte-grenze:#FFFFFF; --karte-rand:#C9C6C6;
  --karte-schrift:#6B6866;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --karte-land:#C6CAD1; --karte-grenze:#E8EBEF; --karte-rand:#9BA2AD;
  --karte-schrift:#4A4F57;
}}
:root[data-theme="dark"]{
  --karte-land:#C6CAD1; --karte-grenze:#E8EBEF; --karte-rand:#9BA2AD;
  --karte-schrift:#4A4F57;
}