/* netz.css – Fassung Teil 4 Schritt M4 (Grundgestaltung), 14.09.2026
   Umsetzung des Stilguides (DESIGN-GUIDE.md). Die Begruendungen stehen dort;
   hier nur das, was man beim Lesen des Codes wissen muss.

   DREI REGELN, DIE NICHT GEBROCHEN WERDEN

   1. Rot, Gelb und Gruen sind MESSAUSSAGEN, keine Gestaltung. Ein gruener
      Speichern-Knopf neben einem gruenen Auslastungsbalken macht den Balken
      bedeutungslos. Deshalb tragen Erfolgsmeldungen, Hinweise und der Status
      B/A/L seit M4 KEINE Ampelfarben mehr - nur die Ampel selbst, die
      Grenzwertverletzungen und die Regelbefunde.
   2. DUNKLER Text auf der Leitfarbe, nie weisser. #241E22 auf #F45B1E ergibt
      4,96 Kontrast, Weiss nur 3,30.
   3. Farbe traegt nie allein. Jeder farbige Zustand bekommt zusaetzlich ein
      Wort oder ein Zeichen.

   Die alten Namen (--akzent, --ok, --fehler …) sind erhalten geblieben und
   zeigen jetzt auf die neuen Werte. So musste keine der rund 40 Regeln weiter
   unten umgeschrieben werden, und ein Blick in den Browser zeigt sofort, welche
   Farbe wo landet. */

/* ---------------------------------------------------------------- Schriften
   Selbst ausgeliefert. Kein CDN - ein Ingenieurwerkzeug muss auch im
   abgeschotteten Netz laufen. Barlow, SIL Open Font License (static/fonts/OFL.txt). */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/barlow-regular.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;
  src:url("/static/fonts/barlow-medium.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fonts/barlow-semibold.woff2") format("woff2")}
/* Echte Kursive fuer „geschaetzt“ (Status A). Ohne sie neigt der Browser die
   aufrechte Fassung - das sieht aus wie Kursiv und ist keine. */
@font-face{font-family:"Barlow";font-style:italic;font-weight:400;font-display:swap;
  src:url("/static/fonts/barlow-italic.woff2") format("woff2")}

:root{
  /* Leitfarbe. KEINE abgedunkelten Varianten - die wirken braun. */
  --leit:#F45B1E; --leit-tief:#DC4E13; --leit-feld:#FEE9DF; --leit-zart:#FEF7F3;

  /* Grundgeruest. Kein reines Weiss, kein reines Schwarz; der Grundton ist
     kuehl, sonst zieht die ganze Palette ins Braeunliche. */
  --seite:#EEF4F5; --karte:#FFFFFF; --tinte:#241E22; --text:#3A3340;
  --gedaempft:#6E6870; --trenner:#E4DEDA;

  /* Messfarben - RESERVIERT. Je Zustand zwei Fassungen: Flaeche (dunkler Text
     darauf) und Text (auf hellem Grund). Wer die Flaechenfarbe als Schrift
     nimmt, bekommt 2,58 Kontrast und eine unlesbare Tabelle. */
  --mess-ok:#00B87C;       --mess-ok-text:#00674A;       --mess-ok-feld:#DFF7EE;
  --mess-grenze:#FFB300;   --mess-grenze-text:#7A5300;   --mess-grenze-feld:#FFF3D6;
  --mess-verletzt:#FF3B5C; --mess-verletzt-text:#A3082A; --mess-verletzt-feld:#FFE4E9;
  --mess-aus:#8C8794;      --mess-aus-text:#5A5560;

  /* Bereichsfarben AC/DC aus der Neonpalette - Rot, Gelb und Gruen bleiben
     dabei aussen vor, sonst saehe eine Bauart aus wie ein Messwert. */
  --feld-ac:#DFF7FB; --text-ac:#0B5D67;
  --feld-dc:#EDE3FF; --text-dc:#4B2E7A;

  /* Abstaende und Radien: sechs Werte, zwei Radien. Alles andere sieht nach
     Zufall aus. */
  --r1:8px; --r2:12px; --r3:20px; --r4:32px; --r5:52px; --r6:80px;
  --rad-karte:8px; --rad-knopf:5px;

  /* Alte Namen, neue Werte. --akzent war die Kopfleistenfarbe und ist jetzt
     Tinte: der Kopf ist weiss mit einem Balken darunter (Stilguide 9.1). */
  --akzent:var(--tinte); --akzent-hell:var(--leit); --akzent-zart:var(--leit-feld);
  --dc:var(--text-dc);
  --leise:var(--gedaempft); --rand:var(--trenner); --rand-zart:var(--trenner);
  --flaeche:var(--seite); --weiss:var(--karte);
  --ok:var(--mess-ok-text); --ok-hell:var(--mess-ok-feld);
  --warn:var(--mess-grenze-text); --warn-hell:var(--mess-grenze-feld);
  --fehler:var(--mess-verletzt-text); --fehler-hell:var(--mess-verletzt-feld);
  /* Keine eigene Monoschrift mehr: tabellarische Ziffern leisten dasselbe,
     ohne dass in einer Zahlenspalte die Schrift wechselt. */
  --mono:"Barlow","Segoe UI",system-ui,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
/* tabular-nums einmal hier - es vererbt sich, und damit tanzen nirgends die
   Spalten. Das ist der eigentliche Grund fuer Barlow. */
body{font:16px/1.45 "Barlow","Segoe UI",system-ui,Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;color:var(--text);background:var(--seite);
  display:flex;flex-direction:column;min-height:100vh}
body.voll{height:100vh;overflow:hidden}
a{color:var(--tinte)}
/* Fuenf Groessen, mehr nicht: 13 Tabellen, 14 Beschriftungen, 16 Fliesstext,
   20 Abschnitte, 28 Seitentitel. */
h1{font-size:28px;font-weight:600;color:var(--tinte);margin:0 0 var(--r2)}
h2{font-size:20px;font-weight:600;color:var(--tinte);margin:0 0 var(--r1)}
h3{font-size:14px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--gedaempft);margin:14px 0 6px}
.klein{font-size:13px}.leise{color:var(--gedaempft)}.inline{display:inline}
/* Fokus ist nicht verhandelbar - wer mit der Tastatur arbeitet, muss sehen,
   wo er ist. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{outline:2px solid var(--tinte);outline-offset:2px}
/* Der Kopf: weiss, darunter ein Balken von zehn Pixeln in der Leitfarbe. Eine
   Farbe, eine gerade Kante, sonst nichts. Weniger wirkt wie ein Versehen, mehr
   draengt sich vor. Der Balken ist bewusst KEIN Bedienelement - er zeigt nicht
   den aktiven Bereich an, das gehoert zur Navigation. */
.leiste{display:flex;align-items:center;gap:18px;padding:0 16px;height:52px;
  background:var(--karte);color:var(--tinte);flex:0 0 auto;
  border-bottom:10px solid var(--leit)}
.leiste a{color:var(--tinte);text-decoration:none}
.leiste nav{display:flex;gap:12px;align-items:center;flex:1;min-width:0}
.leiste .rechts{display:flex;gap:10px;align-items:center}
.leiste .knopf.leise{color:var(--tinte);border-color:var(--trenner)}
.marke{display:flex;gap:6px;align-items:center}
.marke svg,.marke img{height:26px;width:auto;display:block}
.marke-symbol{font-size:18px}
/* Das Band: dasselbe Mittel, siebenfarbig, nur am Fuss und auf dem
   Berichtsdeckblatt. Im Kopf waere es zu viel, am Fuss ist es die Unterschrift. */
.band{display:block;width:100%;height:28px}
body.voll .band{display:none}
.projektname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{padding:2px 8px;border-radius:var(--rad-knopf);background:var(--leit-feld);color:var(--tinte);font-size:13px}
/* „ungespeichert“ ist keine Messaussage - also Leitfarbe, nicht Gelb. */
.status.dirty{background:var(--leit);color:var(--tinte);font-weight:500}
.inhalt{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:24px 16px}
.fuss{padding:8px 16px;color:var(--gedaempft);flex:0 0 auto;font-size:13px}body.voll .fuss{display:none}
.karte{background:var(--karte);border:1px solid var(--trenner);border-radius:var(--rad-karte);padding:var(--r3)}
/* Ein einzelnes Memphis-Zitat im Alltag: angeschnittenes Dreieck oben rechts.
   Sparsam - zwei davon nebeneinander sind schon zu viel. */
.karte--ecke{position:relative;overflow:hidden}
.karte--ecke::after{content:"";position:absolute;top:0;right:0;width:0;height:0;
  border-top:26px solid var(--leit);border-left:26px solid transparent}
/* Konfetti nur dort, wo sonst nichts ist - leerer Zustand, Anmeldung,
   Deckblatt. Nie neben Daten; im Druck verschwindet es. */
.leerer-zustand{text-align:center;padding:var(--r4) var(--r3);color:var(--gedaempft)}
.leerer-zustand img{display:block;width:min(420px,80%);margin:0 auto var(--r3);opacity:.9}
@media print{.leerer-zustand img{display:none}}
.karte.schmal{max-width:360px;margin:60px auto}
.zweispaltig{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
@media(max-width:860px){.zweispaltig{grid-template-columns:1fr}}
label{display:block;margin:10px 0;font-size:13px}
input,select,textarea{display:block;width:100%;margin-top:4px;padding:7px 9px;
  border:1px solid var(--trenner);border-radius:var(--rad-karte);font:inherit;background:var(--karte)}
input:focus,select:focus,textarea:focus{border-color:var(--tinte)}
/* Zahlenfelder sind rechtsbuendig. Immer. */
input[type=number]{text-align:right}
input[type=checkbox]{display:inline;width:auto;margin:0 6px 0 0}
/* Drei Sorten, mehr nicht. Die Haupthandlung ist gefuellt, die Nebenhandlungen
   sind umrandet - EIN gefuellter Knopf unter lauter umrandeten sticht genauso
   heraus wie frueher ein farbiger unter grauen. Kein Verschieben beim Druecken,
   kein Schatten, keine Transform. */
.knopf{display:inline-block;padding:6px 12px;border:1px solid var(--tinte);
  border-radius:var(--rad-knopf);background:var(--karte);color:var(--tinte);font:inherit;
  font-size:14px;cursor:pointer;text-decoration:none;line-height:1.3}
.knopf:hover{background:var(--leit-zart)}
.knopf:disabled{opacity:.4;cursor:default}
.knopf:disabled:hover{background:var(--karte)}
/* Dunkler Text auf der vollen Leitfarbe - weisser haette nur 3,30 Kontrast. */
.knopf.primaer{background:var(--leit);border-color:var(--leit);color:var(--tinte);font-weight:500}
.knopf.primaer:hover{background:var(--leit-tief);border-color:var(--leit-tief)}
.knopf.leise{background:transparent;border-color:var(--trenner);color:var(--text)}
.knopf.leise:hover{background:var(--leit-zart);border-color:var(--trenner)}
.knopf.klein{padding:3px 8px;font-size:13px}
/* Eine Meldung der Anwendung ist keine Messaussage: Leitfarbe, nicht Orange
   aus der Ampel. Rot bleibt dem Fehler vorbehalten. */
.meldungen{max-width:1200px;margin:10px auto 0;padding:0 16px}
.meldung{padding:8px 12px;border-radius:var(--rad-karte);background:var(--leit-feld);
  border:1px solid var(--leit);margin-bottom:6px;font-size:14px}
.meldung.fehler{background:var(--mess-verletzt-feld);border-color:var(--mess-verletzt)}
/* Die Tabelle ist in einem Analyseprogramm das Hauptwerkzeug, nicht eine
   Nebensache. Kopfzeile in Satzschreibung (Versalien liest man langsamer),
   Zeilen durch Haarlinien getrennt, KEIN Zebrastreifen - Streifen helfen bei
   fuenf Spalten und stoeren bei zwanzig. Die Zeile unter dem Zeiger bekommt
   die zarte Leitfarbe. */
.tabelle{width:100%;border-collapse:collapse;background:var(--karte);
  border:1px solid var(--trenner);border-radius:var(--rad-karte);font-size:14px}
.tabelle th,.tabelle td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--trenner);vertical-align:top}
.tabelle th{font-size:14px;color:var(--gedaempft);font-weight:500;background:var(--karte);
  position:sticky;top:0;z-index:1}
.tabelle th .einheit{display:block;font-size:13px;color:var(--gedaempft);font-weight:400}
.tabelle tbody tr:hover>td{background:var(--leit-zart)}
.tabelle td.z{text-align:right;font-size:13px}
/* Eine Zeile mit verletztem Grenzwert: linker Balken und getoente Flaeche.
   KEIN roter Text - der wird bei zwanzig Zeilen unlesbar. */
.tabelle tr.verletzt>td{background:var(--mess-verletzt-feld)}
.tabelle tr.verletzt>td:first-child{box-shadow:inset 3px 0 var(--mess-verletzt)}
/* Arbeitsflaeche */
.arbeitsflaeche{flex:1;display:flex;flex-direction:column;min-height:0}
.werkzeuge{display:flex;gap:8px;align-items:center;padding:8px 12px;background:#fff;border-bottom:1px solid var(--rand-zart);flex:0 0 auto;flex-wrap:wrap}
/* Teil 83 (UX-Z Z4 a): Berichtsprofil nicht auf volle Breite umbrechen; Marke des Blatts vor seinen Werkzeugen */
.werkzeuge select{width:auto;flex:0 0 auto;max-width:14em}
.werkzeuge .blatt-marke{font-weight:600;color:var(--tinte,#241E22);white-space:nowrap}
.werkzeuge [hidden]{display:none!important}
.trenner{width:1px;height:22px;background:var(--rand)}
/* Drei Spalten ueber zwei Variablen - so koennen Palette, Seitenleiste und der
   breite Modus unabhaengig voneinander schalten, ohne sich zu ueberschreiben.
   minmax(0,1fr) fuer die Zeichnung: sie darf schrumpfen. Mit blossem 1fr drueckt
   ihr Mindestinhalt die Spalten auseinander, und der Plan rutscht aus dem Bild. */
.flaeche{--pal:210px;--leiste:380px;flex:1;display:grid;
  grid-template-columns:var(--pal) minmax(0,1fr) var(--leiste);min-height:0;position:relative}
.flaeche.ohne-palette{--pal:0}
.flaeche.ohne-seite{--leiste:0}
.flaeche.ohne-palette .palette{display:none}
.flaeche.ohne-seite .seitenleiste{display:none}
/* Griffe an den Rändern: nur sichtbar, solange die jeweilige Spalte weg ist */
.palette-griff,.seite-griff{display:none;position:absolute;top:10px;z-index:3;width:26px;height:34px;padding:0;border:1px solid var(--trenner);background:var(--karte);color:var(--gedaempft);font-size:15px;line-height:1;cursor:pointer;box-shadow:0 4px 16px rgba(36,30,34,.12)}
.palette-griff{left:0;border-left:0;border-radius:0 6px 6px 0}
.seite-griff{right:0;border-right:0;border-radius:6px 0 0 6px}
.palette-griff:hover,.seite-griff:hover{background:var(--akzent-zart);color:var(--akzent)}
.flaeche.ohne-palette .palette-griff{display:block}
.flaeche.ohne-seite .seite-griff{display:block}
.reiter-zu{flex:0 0 24px;border:0;border-bottom:2px solid transparent;background:transparent;font:inherit;font-size:13px;color:var(--leise);cursor:pointer}
.reiter-zu:hover{color:var(--akzent);background:var(--flaeche)}

/* Palette (Editor Teil 2) */
/* Das Detailblatt im Reiter: es waechst in der Breite, die Leiste ist schmal.
   Also darf es waagerecht rollen, statt auf Briefmarkengroesse zu schrumpfen. */
.detail-bild{overflow:auto;border:1px solid var(--rand-zart);border-radius:6px;background:#fff;padding:6px}
.detail-bild svg{display:block;max-width:none;height:auto}
/* Mitglieder des Detailblatts: eine Zeile je Feld, anklickbar. Sie fuehrt ins
   Elementformular statt ein zweites danebenzustellen. */
.detail-mitglied{display:block;width:100%;text-align:left;padding:6px 8px;margin-top:6px;
  border:1px solid var(--rand-zart);border-radius:6px;background:#fff;font:inherit;cursor:pointer}
.detail-mitglied:hover{border-color:var(--akzent);background:var(--akzent-zart)}
.detail-mitglied .kz{font-weight:600}
.detail-mitglied .ang{color:var(--leise);font-size:12px}
.detail-mitglied .fehlt{color:var(--mess-aus-text);font-size:12px}
/* Der PV-Aufbau lebt seit dem Umzug im Reiter „Detail" und erscheint nur bei
   einem PV-Generator - ein eigener Reiter dafuer hat die Leiste ueberlaufen
   lassen (N15). */
.detail-pv{margin-top:10px;border-top:1px solid var(--rand-zart);padding-top:10px}
.palette{border-right:1px solid var(--rand-zart);background:#fff;overflow:auto;padding:0 0 20px;min-height:0}
.palette-filter{position:sticky;top:0;z-index:2;display:flex;gap:4px;padding:7px 8px;background:#fff;border-bottom:1px solid var(--rand-zart)}
.palette-filter button{flex:1;padding:3px 0;border:1px solid var(--rand);border-radius:4px;background:#fff;font:inherit;font-size:11px;color:var(--leise);cursor:pointer}
.palette-filter button.aktiv{background:var(--leit);border-color:var(--leit);color:var(--tinte);font-weight:500}
.palette-filter .palette-zu{flex:0 0 22px;font-size:13px;line-height:1;color:var(--leise)}
.palette-filter .palette-zu:hover{background:var(--akzent-zart);color:var(--akzent)}
.palette-gruppe{border-bottom:1px solid var(--rand-zart)}
.palette-gruppe>summary{display:flex;align-items:center;gap:6px;padding:7px 10px;cursor:pointer;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--leise);font-weight:600;user-select:none}
.palette-gruppe>summary:hover{background:var(--flaeche)}
.palette-gruppe>summary::marker{color:var(--rand)}
.pg-titel{flex:1;text-transform:none;letter-spacing:0;font-size:12px}
.pg-zahl{font-size:10px;color:var(--leise);background:var(--flaeche);border-radius:8px;padding:1px 6px}
.palette-eintrag{display:block;width:calc(100% - 12px);margin:2px 6px;padding:5px 8px 5px 40px;text-align:left;background:transparent;border:1px solid transparent;border-radius:5px;font:inherit;font-size:12px;color:var(--text);cursor:grab;position:relative}
.palette-eintrag:hover{background:var(--akzent-zart);border-color:var(--rand-zart)}
.palette-eintrag.aktiv{background:var(--leit);border-color:var(--leit);color:var(--tinte)}
.palette-eintrag.aktiv .pe-klein{color:var(--tinte);opacity:.7}
.palette-eintrag.gesperrt{opacity:.45;cursor:default}
.pe-name{display:block;line-height:1.25}
.pe-klein{display:block;font-size:10px;color:var(--leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Netzseitige Anbindung – die für den Lastfluss entscheidende Eigenschaft */
.pe-ein{position:absolute;left:5px;top:5px;width:30px;text-align:center;font-size:9px;font-weight:700;letter-spacing:.02em;border-radius:3px;padding:2px 0;line-height:1.1}
.pe-ein.e-ac{background:var(--feld-ac);color:var(--text-ac)}
.pe-ein.e-dc{background:var(--feld-dc);color:var(--text-dc)}
.pe-ein.e-beides{background:var(--seite);color:var(--gedaempft);font-size:8px}

/* Kontextmenü */
/* Einzige Ausnahme von „keine Schatten“: ein aufliegendes Element darf einen
   weichen haben, weil es wirklich darueber liegt. */
.kontextmenue{position:fixed;z-index:50;min-width:210px;max-width:330px;max-height:70vh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:var(--karte);border:1px solid var(--trenner);border-radius:var(--rad-karte);box-shadow:0 4px 16px rgba(36,30,34,.12);padding:4px}
.km-eintrag{display:flex;align-items:baseline;gap:8px;width:100%;padding:6px 9px;border:0;border-radius:4px;background:transparent;font:inherit;font-size:13px;text-align:left;color:var(--text);cursor:pointer}
.km-eintrag:hover:not(:disabled){background:var(--akzent-zart)}
.km-eintrag:disabled{opacity:.4;cursor:default}
.km-eintrag .km-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.km-eintrag .pe-klein{display:inline;flex:0 0 auto;max-width:120px}
.km-pfeil{color:var(--leise)}
.km-zurueck{color:var(--leise);font-size:12px}
.km-trenner{height:1px;background:var(--rand-zart);margin:4px 2px}
/* Teil 87 (0c 344): Kontextmenü aus der Befehlsschicht - Häkchen links, Kürzel rechts wie in der Menüleiste */
.kontextmenue .km-haken{flex:0 0 14px;color:var(--tinte)}
.kontextmenue .km-kz{flex:0 0 auto;font:inherit;font-size:11px;color:var(--gedaempft);background:none;border:0;padding:0;margin-left:12px}
.zeichnung{position:relative;overflow:hidden;background:#fff;background-image:linear-gradient(var(--rand-zart) 1px,transparent 1px),linear-gradient(90deg,var(--rand-zart) 1px,transparent 1px);background-size:40px 40px;cursor:grab}
.zeichnung.zieht{cursor:grabbing}.zeichnung svg{width:100%;height:100%;display:block}
.hinweis-leer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--leise)}
.seitenleiste{border-left:1px solid var(--rand-zart);background:#fff;display:flex;flex-direction:column;min-height:0}
/* Reiterleiste: seit Schritt H3 sind es neun. Sie bricht deshalb um, statt die
   letzten aus dem Bild zu schieben - der letzte ist ausgerechnet "Versionen",
   und den braucht man, wenn etwas schiefging (N15). `flex:1` weicht dabei einer
   Mindestbreite: gequetschte Beschriftungen sind schlechter als zwei Zeilen. */
.reiter{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--rand-zart);flex:0 0 auto}
.reiter-knopf{flex:1 1 auto;min-width:92px;padding:9px 6px;border:0;background:transparent;font:inherit;font-size:13px;color:var(--leise);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.reiter-knopf.aktiv{color:var(--tinte);border-bottom-color:var(--leit);font-weight:500}
.reiter-inhalt{display:none;padding:12px 14px;overflow:auto;flex:1}.reiter-inhalt.aktiv{display:block}
.kennzahlen{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.kennzahl{background:var(--flaeche);border:1px solid var(--rand-zart);border-radius:6px;padding:8px 10px}
.kennzahl .w{font-size:18px;font-weight:600;font-family:var(--mono)}.kennzahl .b{font-size:11px;color:var(--leise)}
.ampel{display:inline-block;padding:2px 10px;border-radius:10px;font-weight:600;font-size:12px}
.ampel.GRUEN{background:var(--ok-hell);color:var(--ok)}.ampel.GELB{background:var(--warn-hell);color:var(--warn)}.ampel.ROT{background:var(--fehler-hell);color:var(--fehler)}
.hinweis{padding:6px 9px;border-radius:5px;margin:4px 0;font-size:12px;cursor:pointer;border:1px solid transparent}
/* Fehler und Warnung sind Regelbefunde am Netz - also Messfarben. „Info“ ist
   eine Mitteilung der Anwendung und bekommt die Leitfarbe. */
.hinweis.fehler{background:var(--mess-verletzt-feld);border-color:var(--mess-verletzt)}
.hinweis.warnung{background:var(--mess-grenze-feld);border-color:var(--mess-grenze)}
.hinweis.info{background:var(--leit-feld);border-color:var(--leit-feld)}
.element-form .kopf{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.element-form .typ{font-size:11px;text-transform:uppercase;color:var(--leise);letter-spacing:.04em}
.element-form label{margin:6px 0;display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center}
.element-form label span{font-size:12px;color:var(--leise);word-break:break-all}
.element-form input,.element-form select,.element-form textarea{margin:0;padding:4px 7px;font-size:13px}
.element-form .fest input{background:var(--flaeche);color:var(--leise)}
.element-form .ergebnis{margin-top:12px;padding-top:8px;border-top:1px solid var(--rand-zart)}
.element-form .ergebnis div{display:flex;justify-content:space-between;font-size:12px;padding:2px 0}
.element-form .ergebnis div b{font-family:var(--mono);font-weight:500}
/* Status der Herkunft einer Zahl - KEINE Ampelfarben mehr (Stilguide 0.2 und
   6.1). Belegt ist der Normalfall und braucht keine Farbe. Eine Annahme ist
   eine Schaetzung: kursiv mit Tilde. Eine Luecke ist kein verletzter Grenzwert,
   sondern ein fehlender Wert: gedaempft, mit dem Wort dabei.
   Wer die alte Zuordnung zurueck will, aendert genau diese drei Zeilen. */
.status-b{color:var(--tinte);font-weight:500}
.status-a{color:var(--text);font-style:italic}
.status-a::before{content:"~"}
.status-l{color:var(--mess-aus-text);font-weight:500}
.status-l::after{content:" fehlt";font-weight:400;font-size:13px}
/* Teil 15 - P0: vierter Stand, keine Herkunft mehr sondern Lebenszyklus - eine
   beim Zusammenfuehren zurueckgestellte Dublette. Bewusst blass statt
   gestrichen: der Eintrag ist noch da und noch waehlbar, nur nicht mehr die
   erste Empfehlung. */
.status-alt{color:var(--leise);font-weight:400}
.status-alt::after{content:" veraltet";font-weight:400;font-size:13px}
.liste{list-style:none;margin:0;padding:0}.liste li{padding:7px 0;border-bottom:1px solid var(--rand-zart)}
.tab-klein{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:14px}
.tab-klein th,.tab-klein td{padding:3px 5px;border-bottom:1px solid var(--rand-zart);text-align:left;white-space:nowrap}
.tab-klein td.z{text-align:right;font-family:var(--mono)}.tab-klein tr.aus td{color:var(--leise);text-decoration:line-through}
.tab-klein tr:hover td{background:var(--akzent-zart);cursor:pointer}
@media(max-width:900px){.flaeche,.flaeche.ohne-palette,.flaeche.ohne-seite,.flaeche.ohne-palette.ohne-seite{grid-template-columns:1fr}.palette,.palette-griff,.seite-griff{display:none}.seitenleiste{border-left:0;border-top:1px solid var(--rand-zart);max-height:45vh}}

/* Zeitreihen */
.zr-block{margin-bottom:14px}.zr-block h3{margin-top:8px}
.zuordnung{width:100%;border-collapse:collapse;font-size:12px}.zuordnung td{padding:2px 3px;border-bottom:1px solid var(--rand-zart)}
.zuordnung select,.zuordnung input{margin:0;padding:3px 5px;font-size:12px}
.fortschritt{height:8px;background:var(--rand-zart);border-radius:4px;overflow:hidden;margin:6px 0}.fortschritt div{height:100%;background:var(--leit);transition:width .5s}
.diagramm{width:100%;height:auto;border:1px solid var(--rand-zart);border-radius:6px;margin:6px 0;background:#fff}
.pruef{width:100%;border-collapse:collapse;font-size:11px;margin:8px 0}.pruef td,.pruef th{padding:3px 5px;border-bottom:1px solid var(--rand-zart);text-align:left;vertical-align:top}
.pruef .ok{color:var(--ok);font-weight:600}.pruef .nok{color:var(--fehler);font-weight:600}.pruef .norm{color:var(--leise);font-size:10px}
details.leise summary{cursor:pointer}

.navlink{font-size:13px;opacity:.85;padding:4px 6px;border-radius:4px}.navlink:hover{background:rgba(255,255,255,.12)}
/* Bibliothek */
.bib{display:grid;grid-template-columns:220px 1fr 380px;gap:16px;align-items:start}
.bib .kat a{display:block;padding:6px 8px;border-radius:5px;color:var(--text);text-decoration:none;font-size:13px}.bib .kat a.aktiv{background:var(--leit-feld);color:var(--tinte);font-weight:500}
.bib .kat .n{color:var(--leise);font-size:11px;float:right}
.komp-form label{display:grid;grid-template-columns:170px 1fr;gap:8px;align-items:center;margin:5px 0}.komp-form label span{font-size:12px;color:var(--leise)}
.komp-form label span em{font-style:normal;color:var(--rand)}
.komp-form input,.komp-form select,.komp-form textarea{margin:0;padding:5px 7px;font-size:13px}
.kurve{width:100%;height:110px;border:1px solid var(--rand-zart);border-radius:6px;margin:4px 0}
@media(max-width:1000px){.bib{grid-template-columns:1fr}}

/* --- Teil 3 Schritt 2: Katalog ---------------------------------------------- */
/* Betriebsmittel ohne Katalogtyp: rot umrandet. Altbestand aus Teil 1/2: gestrichelt
   und blass - er rechnet, ist aber nicht belegt. */
svg .el.ohne-typ line,svg .el.ohne-typ path,svg .el.ohne-typ circle,svg .el.ohne-typ rect{stroke:var(--fehler)!important}
svg .el.ohne-typ text{fill:var(--fehler)}
svg .el.altbestand line,svg .el.altbestand path,svg .el.altbestand circle,svg .el.altbestand rect{stroke-dasharray:5 4;opacity:.75}
/* Gesperrte Kennwerte im Elementformular */
.element-form label.abgeleitet input{background:var(--flaeche);color:var(--leise);cursor:not-allowed}
.element-form label.abgeleitet span{color:var(--leise)}
.element-form .feldgruppe{border:1px solid var(--rand);border-radius:6px;padding:6px 8px;margin:8px 0}
.element-form .feldgruppe h3{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--leise)}
.element-form .ergebnis.fehlt{border-color:var(--fehler);background:var(--fehler-hell)}
/* Palette: Bauart mit aufklappbarer Typliste */
.palette-bauart{border-bottom:1px solid var(--rand-zart)}
.palette-bauart .pb-kopf{display:flex;align-items:stretch}
.palette-bauart .pb-kopf .palette-eintrag{flex:1}
.pb-auf{border:0;background:none;color:var(--leise);font-size:11px;padding:0 8px;cursor:pointer;white-space:nowrap}
.pb-auf:hover,.pb-auf.offen{color:var(--text);background:var(--akzent-zart)}
.pb-auf.leer{display:flex;align-items:center;cursor:default;opacity:.5}
.pb-auf.leer:hover{background:none;color:var(--leise)}
.pb-typen{background:var(--flaeche);padding-left:10px}

/* --- Teil 3 Schritt A2: Reiter PV ------------------------------------------- */
/* Der Reiter folgt dem Elementformular: Beschriftung links, Wert rechts, gesperrte
   Kennwerte grau. Neu ist nur die zweite Spalte mit den gerechneten Kennzahlen. */
#reiter-pv label{display:grid;grid-template-columns:150px 1fr;gap:8px;align-items:center;margin:4px 0}
#reiter-pv label span{font-size:12px;color:var(--leise)}
#reiter-pv input,#reiter-pv select{margin:0;padding:4px 6px;font-size:12px;width:100%}
#reiter-pv label.abgeleitet input{background:var(--flaeche);color:var(--leise);cursor:not-allowed}
#reiter-pv .feldgruppe{border:1px solid var(--rand);border-radius:6px;padding:6px 8px;margin:8px 0}
#reiter-pv .feldgruppe h3{margin:0 0 4px;font-size:11px}
.pv-feld{border:1px solid var(--rand);border-radius:6px;padding:8px 10px;margin-bottom:10px;background:var(--weiss)}
.pv-feld-kopf{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.pv-feldname{flex:1;font-weight:600;border:1px solid transparent;background:transparent;padding:2px 4px}
.pv-feldname:focus{border-color:var(--rand);background:var(--weiss)}
.pv-tfliste{margin:6px 0}
.pv-tf{border-top:1px solid var(--rand-zart)}
.pv-tf-kopf{display:flex;gap:8px;align-items:center;padding:5px 2px;cursor:pointer}
.pv-tf-kopf span:first-child{flex:1}
.pv-tf.offen>.pv-tf-kopf{font-weight:600}
/* Eine Spalte ist der Normalfall - massgeblich ist die Breite der Leiste, nicht
   die des Fensters. Zwei Spalten gibt es erst im breiten Modus. */
.pv-tf-inhalt{display:grid;grid-template-columns:1fr;gap:12px;padding:4px 0 10px}
.flaeche.breit .pv-tf-inhalt{grid-template-columns:1fr 1fr}
.flaeche.breit .pv-tf-zahlen{border-left:1px solid var(--rand-zart);padding-left:10px;border-top:0;padding-top:0}
.pv-tf-zahlen{border-left:0;border-top:1px solid var(--rand-zart);padding-top:8px}
.pv-leiste{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.pv-leiste #pv-kopf{flex:1}
/* Breiter Modus: nur die Seitenleiste wird breiter - hoechstens 760 px und nie
   mehr als die Haelfte, damit der Plan im Bild bleibt. Die Palette ruehrt er
   **nicht** an: dafuer gibt es den Knopf ☰ und den Griff am linken Rand, und
   beide muessen weiter funktionieren. */
.flaeche.breit{--leiste:clamp(400px,48%,760px)}
.flaeche.breit.ohne-seite{--leiste:0}
.flaeche.breit #reiter-pv label{grid-template-columns:170px 1fr}
.pv-zahl{display:grid;grid-template-columns:120px 110px 1fr;gap:6px;align-items:baseline;font-size:12px;padding:2px 0;border-bottom:1px solid var(--rand-zart)}
.pv-zahl b{font-family:var(--mono);font-weight:500}
.pv-zahl i{font-style:normal;font-size:11px}
.pv-rot,.pv-zahl.pv-rot b,.pv-zahl.pv-rot span{color:var(--fehler)}
.pv-zahl.pv-rot{background:var(--fehler-hell)}
/* Kettentabelle: in der schmalen Leiste waagerecht rollbar, statt die Spalten
   zu quetschen - eine Zahl mit Umbruch liest niemand. */
.pv-kette-rollen{overflow-x:auto;margin-bottom:10px}
.pv-kette-rollen .tab-klein{margin-bottom:4px;min-width:100%}
.pv-kette-rollen tr.pv-rot td{background:var(--fehler-hell)}
.pv-kette-rollen td .knopf{padding:1px 6px;font-size:11px}

/* --- Teil 3 Schritt H3: Reiter Entwicklung ----------------------------------- */
#reiter-schaltmatrix label,#reiter-entwicklung label{display:grid;grid-template-columns:150px 1fr;gap:8px;align-items:center;margin:4px 0}
#reiter-schaltmatrix label span,#reiter-entwicklung label span{font-size:12px;color:var(--leise)}
#reiter-schaltmatrix input,#reiter-schaltmatrix select,#reiter-entwicklung input,#reiter-entwicklung select{margin:0;padding:4px 6px;font-size:12px;width:100%}
.ew-bild{overflow:auto;border:1px solid var(--rand-zart);border-radius:6px;margin:8px 0;padding:4px;background:var(--weiss)}
.ew-bild svg{display:block}
.ew-variante{border:1px solid var(--rand);border-radius:6px;padding:8px 10px;margin-bottom:8px;background:var(--weiss)}
.tab-klein tr.ew-best td{background:var(--akzent-zart);font-weight:500}

/* --- Bewegung ---------------------------------------------------------------
   Drei Stellen, alle mit Bedeutung, keine dauerhaft: Fortschritt beim Rechnen,
   einmaliges Aufleuchten bei einer Wertaenderung, Uebergang beim Aufklappen.
   Kein Dauerblinken - es wird nach zwei Minuten weggefiltert und kostet danach
   nur noch Aufmerksamkeit, gerade bei einem verletzten Grenzwert. */
@keyframes aufleuchten{from{background:var(--leit-feld)}to{background:transparent}}
.neu{animation:aufleuchten .4s ease-out}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* --- Druck ------------------------------------------------------------------
   Ein Projektierungsergebnis wird gedruckt, geprueft und unterschrieben.
   Der Bericht hat seine eigene Fassung (bericht_basis.html); hier geht es nur
   darum, dass eine Bildschirmseite beim Ausdrucken nicht zerfaellt. */
@media print{
  body{background:#fff}
  .leiste,.werkzeuge,.palette,.palette-griff,.seite-griff,.fuss .knopf{display:none!important}
  .band{display:block}
  .karte,.tabelle{border-color:#999}
  .tabelle th{position:static}
  a{color:#000;text-decoration:none}
}

/* Teil 26 (B1): Leitungsmaske nach Blatt 1 - abgeleitet (blau), festgehalten
   (warnfarben), Lücke; Nachweistabelle; Knopf „veraltet“. */
.abg{border-left:3px solid #2A6F97;background:#EAF2F8;border-radius:6px;padding:6px 10px;margin:6px 0}
.abg .w{font-weight:600}
.abg .h{font-size:12px;color:var(--leise);margin-top:2px}
/* Teil 67 (0c 224): Guide-Toene statt IZAAC - Herkunft Leitfarbe, Luecke grau, Messaussage nur in Messfarben */
.abg.hand{border-left-color:var(--leit);background:var(--leit-zart)}
.abg.luecke{border-left-color:var(--mess-aus);background:var(--seite)}
.abg.alt,table.nw.alt{opacity:.6}
.abg .vg-zeile{display:flex;gap:6px;margin-top:6px}
.abg .vg-zeile input{flex:1 1 auto;min-width:7em;width:auto}   /* Teil 124 (0c 643): Wert sichtbar, Einheit schmal daneben */
.abg .vg-zeile select{flex:0 0 4.5em;width:4.5em;min-width:0}
table.nw{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
table.nw th,table.nw td{text-align:left;padding:2px 4px;border-bottom:1px solid var(--rand)}
table.nw .r{text-align:right;font-variant-numeric:tabular-nums}
table.nw td.ok,.ok{color:var(--mess-ok-text)} table.nw td.nok{color:var(--mess-verletzt-text)}
.kw{display:flex;justify-content:space-between;font-size:12px;padding:2px 0}
.knopf.primaer.veraltet{background:var(--leit-feld);border-color:var(--leit);color:var(--tinte)}
label.haken{display:flex;gap:6px;align-items:center}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .abg{background:#14283a}
 :root:not([data-theme="light"]) .abg.hand{background:#3a2a12} :root:not([data-theme="light"]) .abg.luecke{background:#3a1916}}
:root[data-theme="dark"] .abg{background:#14283a} :root[data-theme="dark"] .abg.hand{background:#3a2a12}
:root[data-theme="dark"] .abg.luecke{background:#3a1916}

/* Kabelvorschlag-Dialog (Teil 27, B2 · Blatt 3) */
.stufen-hg{position:fixed;inset:0;background:rgba(17,17,17,.35);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:4vh 12px;overflow:auto}
.stufen-k{background:var(--karte);color:inherit;border-radius:8px;max-width:980px;width:100%;padding:14px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.stufen-k .kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:1px solid var(--rand,#ddd);padding-bottom:8px;margin-bottom:8px}
.stufen-k .typ{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--leise)}
.stufen-block{margin-top:12px;border-top:1px solid var(--rand,#ddd);padding-top:6px}
.stufen-block .bk{font-weight:600}.stufen-block .h{font-size:12px;color:var(--leise)}
details.stufen-block summary{cursor:pointer}
table.stufen{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px}
table.stufen th,table.stufen td{text-align:left;padding:3px 6px;border-bottom:1px solid var(--rand,#ddd);white-space:nowrap}
table.stufen th{color:var(--leise);font-weight:500;font-size:12px}
table.stufen .r{text-align:right;font-variant-numeric:tabular-nums}
table.stufen tr.empf td{background:var(--ok-hell)}
table.stufen tr.grau td{color:var(--leise)}
table.stufen tr.waehlbar{cursor:pointer}
table.stufen tr.waehlbar:hover td{background:var(--leit-zart)}
table.stufen tr.gewaehlt td{background:var(--leit-feld)}
table.stufen .am{color:var(--tinte);font-weight:600}
.stufen-fuss{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 4px}
.tabelle-wrap{overflow-x:auto}
.selektiv{margin-top:12px;border-top:1px solid var(--rand,#ddd);padding-top:6px}
.sel-bild summary{cursor:pointer;font-size:12px}.sel-bild svg{max-width:100%;height:auto;background:#fff}

/* Teil 47: Reiter je Anlagenteil - Kopf mit Auswahl, Detail-SLD, Luecken */
.at-kopf{margin:0 0 6px}.at-kopf label{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center}
.at-kopf select{padding:4px 6px;font-size:12px;width:100%}
.at-bild{margin:6px 0}.at-bild .el.aktiv path:not(.treffer),.at-bild .el.aktiv line{stroke:#F2C14E!important;stroke-width:6}
.ew-bild .hinweis-leer{position:static;inset:auto;padding:8px 0}

/* Teil 49 (B): Blatt-Leiste über der Zeichenfläche und Blatt-Reiter in der Seitenleiste */
.zeichen-spalte{display:flex;flex-direction:column;min-width:0;min-height:0}
.zeichen-spalte .zeichnung{flex:1;min-height:0}
.blatt-leiste{display:flex;flex-wrap:wrap;gap:2px;padding:4px 6px 0;border-bottom:2px solid var(--rand-zart);background:var(--karte,#fafafa);flex:0 0 auto}
.blatt-leiste:empty{display:none}
.blatt-knopf{border:1px solid var(--rand-zart);border-bottom:0;border-radius:5px 5px 0 0;background:#fff;padding:4px 10px;font:inherit;font-size:12.5px;color:var(--leise);cursor:pointer}
.blatt-knopf.aktiv{color:inherit;font-weight:600;background:var(--akzent-zart,#eef)}
.blatt-leiste select{font:inherit;font-size:12.5px;padding:3px;width:auto;max-width:260px}
/* Teil 102 (PW-1 A3): Gruppen-Trenner (ohne Text - Titel als Tooltip), Schließen-Kreuz in der kompakten Leiste, Gruppenköpfe im Menü */
.blatt-trenner{width:1px;align-self:stretch;margin:4px 6px 0;background:var(--rand-zart)}
.blatt-weg{margin-left:6px;color:var(--leise);font-weight:400;opacity:.6}
.blatt-weg:hover{opacity:1;color:inherit}
.blatt-leiste .blatt-alle{margin-left:auto;align-self:center;margin-bottom:3px}
.ml-kopf{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--leise);padding:6px 8px 2px}
.blatt-reiter{display:contents}
.zeichnung g.rand{opacity:.75}
.palette-gruppe.fremd>summary{color:var(--leise)}
/* Teil 61 (P8): Blatt PV und Eigenschaftsblatt im Reiter PV */
.pv-blatt-rahmen{overflow-x:auto;background:#fff;border:1px solid var(--rand,#ccc);padding:4px;margin:6px 0}
.pv-blatt-rahmen svg{display:block;max-width:none}
.pv-eig{margin:4px 0}.pv-eig summary{cursor:pointer;font-weight:600}
.pv-eig-titel{background:var(--seite);color:var(--tinte);font-weight:600;padding:1px 4px;margin-top:4px}
.pv-eig table td.z{text-align:right;white-space:nowrap}
/* Teil 68 (PL): Befundwort der Plausibilität - Messfarben in der Textfassung (Guide 1.4), Lücke grau */
.pl-zu_klein{color:var(--mess-verletzt-text);font-weight:600}.pl-luecke{color:var(--mess-aus-text);font-weight:600}
.pl-hinweis{color:var(--mess-grenze-text);font-weight:600}.pl-passt{color:var(--mess-ok-text);font-weight:600}

/* Teil 69 (GR-a): Gruppendialog - aufliegend (Guide 3: weicher Schatten erlaubt), Haarlinien, eine Haupthandlung */
.gruppe-dialog{position:fixed;right:24px;top:96px;z-index:60;width:380px;max-height:calc(100vh - 140px);overflow:auto;background:var(--karte,#fff);
  border:1px solid var(--trenner,#E4DEDA);border-radius:8px;box-shadow:0 4px 16px rgba(36,30,34,.12);padding:12px 14px;font-size:13px}
.gruppe-dialog .gd-kopf{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.gruppe-dialog .gd-satz{margin-bottom:8px}
.gruppe-dialog .gd-feld{display:flex;flex-direction:column;gap:3px;margin:0 0 8px}
.gruppe-dialog .gd-feld[hidden]{display:none}
.gruppe-dialog select,.gruppe-dialog input{font:inherit;border:1px solid var(--trenner,#E4DEDA);border-radius:8px;padding:4px 6px;background:#fff}
.gruppe-dialog .gd-zahl{display:flex;align-items:center;gap:6px}
.gruppe-dialog .gd-zahl input{text-align:right;width:120px;font-variant-numeric:tabular-nums}
.gruppe-dialog .gd-zahl i{font-style:normal;color:var(--gedaempft,#6E6870)}
.gruppe-dialog .gd-fuss{display:flex;align-items:center;gap:10px;margin-top:6px}
.gruppe-dialog .gd-meldung{color:var(--mess-verletzt-text,#A3082A)}

/* Teil 70 (0c 206/235): die Statuszeile hat eine feste Hoehe - bricht sie um, wird die Zeichenflaeche niedriger, der
   ResizeObserver fuehrt die viewBox nach und die Klickziele springen beim Bewegen. Ueberlanger Text endet mit „…“,
   der volle Text steht im title (editor.js sagen). */
#editor-status { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
/* Teil 82 (UX-Z, Z4 a): Ansichtsblätter ohne Raster, mit Marke „nur Ansicht“ - Raster nur, wo bearbeitet wird */
.zeichnung.ansicht{background-image:none}
.zeichnung.ansicht::before{content:"nur Ansicht";position:absolute;top:8px;left:10px;z-index:2;font-size:11px;padding:2px 8px;border-radius:10px;background:var(--seite,#f4f6f7);color:var(--leise,#666);border:1px solid var(--rand-zart,#ddd);pointer-events:none}


/* Teil 84 (PV-B): Vorschlagblock im PV-Detail - Zeile anklicken = uebernehmen */
.pv-vorschlag tr[data-stufe]{cursor:pointer}
.pv-vorschlag tr[data-stufe]:hover td{background:var(--seite)}
.pv-vorschlag tr.gewaehlt td{font-weight:600}
.pv-vorschlag h3{margin:0 0 4px}
.pv-vorschlag .zeile-status{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 6px}
.pv-vorschlag .st{border:1px solid var(--rand,#ddd);padding:0 6px;font-size:11px;line-height:18px;color:var(--text);cursor:default}
.pv-vorschlag .st b{color:var(--tinte);font-weight:600}
.pv-vorschlag .st.wert{border-color:var(--tinte)}
.pv-vorschlag .st.luecke{border-style:dashed;color:var(--leise)}

/* ---------- Teil 85 (UX-1): Menüleiste, Befehlssuche, Statusleiste ---------- */
.menueleiste{display:flex;align-items:stretch;background:var(--karte);border-bottom:1px solid var(--trenner);flex:0 0 auto;height:36px;padding:0 6px}
.menues{display:flex;align-items:stretch}
.ml-menue{position:relative;display:flex}
.ml-titel{border:0;background:transparent;font:inherit;font-size:14px;color:var(--tinte);padding:0 12px;cursor:default;border-radius:0}
.ml-titel:hover,.ml-menue.offen>.ml-titel{background:var(--leit-zart)}
.ml-titel:focus-visible{outline:2px solid var(--tinte);outline-offset:-2px}
.ml-liste{position:absolute;top:100%;left:0;min-width:320px;background:var(--karte);border:1px solid var(--trenner);border-radius:8px;
  box-shadow:0 4px 16px rgba(36,30,34,.12);padding:6px;z-index:40;display:flex;flex-direction:column}
.ml-liste[hidden]{display:none}
.ml-liste hr{border:0;border-top:1px solid var(--trenner);margin:5px 0}
.ml-eintrag{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;width:100%;text-align:left;border:0;background:transparent;
  font:inherit;font-size:14px;color:var(--tinte);padding:6px 8px;border-radius:5px;cursor:default}
.ml-eintrag:hover:not([disabled]),.ml-eintrag:focus-visible{background:var(--leit-zart);outline:0}
.ml-eintrag[disabled]{color:var(--gedaempft)}
.ml-eintrag kbd,.befehlssuche kbd,.befehlssuche-knopf kbd{font-family:inherit;font-size:12px;color:var(--gedaempft);background:transparent;border:0;padding:0}
.ml-eintrag .haken{color:var(--tinte);text-align:center}
.ml-eintrag .pfeil{color:var(--gedaempft)}
.ml-unter{margin:2px 0 4px 18px;padding-left:8px;border-left:2px solid var(--trenner);display:flex;flex-direction:column}
.ml-leer{padding:6px 8px;color:var(--gedaempft);font-size:13px}
.ml-rechts{margin-left:auto;display:flex;align-items:center;gap:10px;padding:0 6px}
.befehlssuche-knopf{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 10px;min-width:250px;border:1px solid var(--trenner);border-radius:5px;background:var(--karte);font:inherit;font-size:13px;color:var(--gedaempft);cursor:text}
.befehlssuche-knopf .lupe{color:var(--tinte)}
.befehlssuche-knopf kbd{margin-left:auto}
.ml-rechts .knopf.primaer{height:26px;padding:0 14px}
.befehlssuche{position:fixed;left:50%;top:84px;transform:translateX(-50%);width:640px;max-width:calc(100vw - 32px);background:var(--karte);border:1px solid var(--trenner);
  border-radius:8px;box-shadow:0 4px 16px rgba(36,30,34,.12);z-index:60}
.bs-eingabe{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--trenner)}
.bs-eingabe .lupe{color:var(--tinte);font-size:18px}
.bs-eingabe input{border:0;outline:0;font:inherit;font-size:16px;color:var(--tinte);flex:1;background:transparent;padding:0}
.bs-treffer{padding:6px;max-height:60vh;overflow:auto;display:flex;flex-direction:column}
.bs-zeile{display:grid;grid-template-columns:86px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;border:0;background:transparent;font:inherit;font-size:14px;color:var(--tinte);padding:8px 10px;border-radius:5px}
.bs-zeile.aktiv{background:var(--leit-zart)}
.bs-zeile.gesperrt{color:var(--gedaempft)}
.bs-art{font-size:12px;color:var(--gedaempft)}
.bs-fuss{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--trenner)}
.bs-fuss .rechts{margin-left:auto}
.statusleiste{display:flex;align-items:stretch;height:28px;flex:0 0 auto;background:var(--karte);border-top:1px solid var(--trenner);font-size:12px;color:var(--gedaempft)}
.statusleiste>span{display:flex;align-items:center;gap:6px;padding:0 12px;border-right:1px solid var(--trenner);white-space:nowrap}
.statusleiste>span:empty{display:none}
.statusleiste>span.st-rechts{margin-left:auto;border-right:0}
.statusleiste b{color:var(--tinte);font-weight:500;font-variant-numeric:tabular-nums}
.status{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--trenner);border-radius:5px;padding:1px 8px;font-size:12px;color:var(--tinte);background:var(--karte);line-height:16px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--gedaempft);display:inline-block}
.status.ok{border-color:var(--mess-ok)}.status.ok i{background:var(--mess-ok)}
.status.luecke{border-color:var(--mess-grenze)}.status.luecke i{background:var(--mess-grenze)}
.status.fehler{border-color:var(--mess-verletzt)}.status.fehler i{background:var(--mess-verletzt)}
.auflieger{position:fixed;z-index:50;background:var(--karte);border:1px solid var(--trenner);border-radius:8px;box-shadow:0 4px 16px rgba(36,30,34,.12);padding:10px 14px}
.kapitel-fenster{right:16px;top:84px;width:320px}
.auflieger-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.kapitel-liste{display:flex;flex-direction:column;gap:4px;font-size:14px;max-height:60vh;overflow:auto}
.werkzeuge-alt[hidden]{display:none!important}
@media print{.menueleiste,.statusleiste,.befehlssuche{display:none!important}}
/* Teil 85 (UX-2): Punktraster, Fadenkreuz */
.zeichnung.punktraster{background-image:radial-gradient(circle,var(--trenner) 1px,transparent 1.3px);background-size:20px 20px;background-position:0 0}
.zeichnung.punktraster.ansicht{background-image:none}
.fadenkreuz{position:absolute;inset:0;pointer-events:none;z-index:3}
.fadenkreuz[hidden]{display:none}
.fadenkreuz .fk-h,.fadenkreuz .fk-v{position:absolute;background:var(--tinte);opacity:.35}
.fadenkreuz .fk-h{left:0;right:0;height:1px;margin-top:-.5px}.fadenkreuz .fk-v{top:0;bottom:0;width:1px;margin-left:-.5px}
.fadenkreuz.gefangen .fk-h,.fadenkreuz.gefangen .fk-v{background:var(--leit);opacity:.8}
.fadenkreuz .fk-tip{position:absolute;background:var(--tinte);color:var(--karte);font-size:12px;padding:2px 8px;border-radius:5px;white-space:nowrap}
.zeichnung.armiert{cursor:crosshair}
/* Teil 85 (UX-3): Schnellstart */
.schnellstart{position:fixed;left:50%;top:60px;transform:translateX(-50%);width:820px;max-width:calc(100vw - 32px);max-height:calc(100vh - 90px);overflow:auto;background:var(--karte);border:1px solid var(--trenner);border-radius:8px;box-shadow:0 4px 16px rgba(36,30,34,.12);z-index:60;padding:18px 22px}
.schnellstart h2{margin:0 0 2px;font-size:20px;color:var(--tinte)}
.ss-raster{display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin-top:14px}
.ss-abschnitt h5{margin:0 0 6px;font-size:13px;color:var(--gedaempft);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.ss-abschnitt[hidden]{display:none}
.ss-feld{display:grid;grid-template-columns:150px 1fr;gap:4px 10px;align-items:center;padding:3px 0;font-size:14px}
.ss-feld[hidden]{display:none}
.ss-feld.ss-haken{grid-template-columns:18px 1fr;cursor:pointer}
.ss-feld.ss-haken input{width:16px;height:16px;margin:0;accent-color:var(--akzent)}
.ss-feld .ss-label{color:var(--text)}
.ss-feld select,.ss-feld input{width:100%;min-width:0;height:30px;border:1px solid var(--trenner);border-radius:5px;padding:0 8px;font:inherit;font-size:14px;color:var(--tinte);background:var(--karte)}
.ss-feld input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
.ss-feld .ss-zahl{display:flex;align-items:center;gap:6px}.ss-feld .ss-zahl small{color:var(--gedaempft);min-width:2em}
.ss-feld .status{grid-column:2}
.ss-feld.pflicht select:invalid,.ss-feld.pflicht select[value=""]{border-color:var(--trenner)}
.ss-vorschau{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border:1px solid var(--trenner);border-radius:8px;padding:10px 12px;background:var(--seite);font-size:13px;color:var(--gedaempft);margin-top:14px}
.ss-vorschau b{color:var(--tinte);font-weight:500}
.ss-meldung{min-height:18px;color:var(--mess-verletzt-text);margin-top:6px}
.ss-fuss{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--trenner)}
.ss-ergebnis{right:16px;top:84px;width:420px}
.ss-ergebnis .ss-kaesten{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.ss-ergebnis .ss-schienen{display:flex;flex-direction:column;gap:4px;margin:6px 0 8px}
.ss-ergebnis .ss-schiene{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center}
.ss-ergebnis ul{margin:6px 0;padding-left:18px}
.leer-schnellstart{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
.leer-schnellstart .karte{pointer-events:auto;background:var(--karte);border:1px solid var(--trenner);border-radius:8px;padding:22px 28px;max-width:440px;text-align:center;box-shadow:0 4px 16px rgba(36,30,34,.12)}
.leer-schnellstart h3{margin:0 0 6px;font-size:20px;color:var(--tinte)}
.leer-schnellstart .knopf.primaer{height:38px;padding:0 20px;margin:10px 0 4px}
.schnellstart{top:14px;max-height:calc(100vh - 28px)}
.ss-abschnitt.breit{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.ss-abschnitt.breit h5{grid-column:1/-1}
.ss-feld{padding:2px 0}.ss-feld select,.ss-feld input{height:28px}

/* Teil 86 (UX-6, N50): Meldung als Statuskästen - ruhig, keine Leitfarbe als Fläche (P22, P23) */
.meldung.kaesten{display:flex;gap:8px;align-items:center;background:var(--karte);border:0;border-bottom:1px solid var(--trenner);border-radius:0;padding:6px 16px;color:var(--tinte)}
.meldung.kaesten #meldung-zu{margin-left:auto}
/* Teil 86 (UX-7): Anlagenrahmen - Haarlinie, Kennzeichen und Name oben links, keine Fläche */
.zeichnung g.ar-rahmen{pointer-events:none}
.zeichnung g.ar-rahmen rect.ar-linie{fill:none;stroke:var(--mess-aus);stroke-width:.9;vector-effect:non-scaling-stroke}
.zeichnung g.ar-rahmen rect.ar-grund{fill:var(--karte)}
.zeichnung g.ar-rahmen path.ar-reiter{fill:var(--karte);stroke:var(--mess-aus);stroke-width:.9;vector-effect:non-scaling-stroke}  /* Teil 89 (0c 363) */
.zeichnung g.ar-rahmen text{font-size:12px;fill:var(--gedaempft)}
.zeichnung g.ar-rahmen text.ar-kz{fill:var(--tinte);font-weight:600}
.zeichnung g.ar-rahmen text.ar-name{fill:var(--tinte)}
.zeichnung g.ar-rahmen.ohne-kz text.ar-kz{fill:var(--mess-grenze-text);font-weight:500}

/* Teil 86 (UX-4, F2 a/F3 a): Werkzeugfenster - feste Orte, wenige Einträge, eine Hervorhebung */
#palette.nur-werkzeuge > :not(.werkzeugfenster){display:none!important}
.werkzeugfenster{display:flex;flex-direction:column;gap:2px;padding:10px;font-size:13px}
.werkzeugfenster .wf-kopf{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gedaempft);font-weight:600;padding:2px 2px 6px}
.werkzeugfenster .wf-trenner{border-top:1px solid var(--trenner);margin-top:10px;padding-top:12px}
.werkzeugfenster .wz,.werkzeugfenster .wf-e{display:flex;justify-content:space-between;align-items:center;gap:8px;background:none;border:1px solid transparent;border-radius:5px;padding:7px 8px;font:inherit;color:var(--tinte);text-align:left;cursor:pointer}
.werkzeugfenster .wz:hover,.werkzeugfenster .wf-e:hover{border-color:var(--trenner)}
.werkzeugfenster .wz.an{border-color:var(--tinte);font-weight:600}
.werkzeugfenster .wz[disabled]{opacity:.45;cursor:default}
.werkzeugfenster .wf-e.an{border-color:var(--leit);background:var(--leit-zart)}
.werkzeugfenster .wf-e .n{flex:1}
.werkzeugfenster kbd{font:11px/1 inherit;border:1px solid var(--trenner);border-radius:3px;padding:2px 5px;color:var(--gedaempft);background:var(--karte)}
.werkzeugfenster .wf-kontext{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 2px 8px;font-size:12px}
.werkzeugfenster .tag{font-size:10px;padding:1px 5px;border-radius:3px;font-weight:600;background:var(--feld-ac);color:var(--text-ac)}
.werkzeugfenster .tag.dc{background:var(--feld-dc);color:var(--text-dc)}
.werkzeugfenster .wf-rest,.werkzeugfenster .wf-leer{font-size:12px;padding:8px 8px 2px}

/* Teil 86 (UX-5): Serienmaske */
/* Teil 86 (UX-5) · Teil 87 (UX-5b, 0c 350): Lage setzt serie.js in der Zeichenspalte; Einheiten stehen neben dem Feld */
/* Teil 94 (GR-c): Als Gruppe speichern */
.gruppe-fenster{width:420px;display:flex;flex-direction:column;gap:8px}
.gruppe-fenster .gd-feld{display:flex;flex-direction:column;gap:2px;font-size:13px}
.gruppe-fenster .gd-fuss{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.serie-fenster{width:560px;max-height:75vh;display:flex;flex-direction:column;gap:10px}
.serie-fenster .se-sub{display:flex;gap:8px;align-items:center;margin-top:4px;font-size:12px}
.serie-fenster .se-alle{display:flex;gap:8px;align-items:center;font-size:13px}
.serie-fenster .se-feld{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.serie-fenster .se-einheit{display:inline-flex;gap:4px;align-items:center;white-space:nowrap}
.serie-fenster .se-alle input{width:80px}
.serie-fenster .se-tab{overflow:auto;border-top:1px solid var(--trenner);border-bottom:1px solid var(--trenner)}
.serie-fenster table{width:100%;border-collapse:collapse;font-size:13px}
.serie-fenster th{font-weight:500;color:var(--gedaempft);text-align:left;padding:6px 4px;position:sticky;top:0;background:var(--karte)}
.serie-fenster td{padding:4px;border-top:1px solid var(--trenner)}
.serie-fenster td .status{margin-left:6px}
.serie-fenster .se-w{width:22px;text-align:center}
.serie-fenster .r{text-align:right}.serie-fenster td.r input{width:72px;text-align:right}
.serie-fenster .se-aendern{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:13px}
.serie-fenster .se-aendern .se-titel{color:var(--gedaempft)}
.serie-fenster .se-aendern select{max-width:170px}
.serie-fenster .se-fuss{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:13px}
.serie-fenster .se-weitere{display:flex;gap:6px;align-items:center;white-space:nowrap}.serie-fenster .se-weitere input{width:52px}

/* Teil 88 (UX-T1/T3, P23): Statuskasten „hinweis“ - Bedienhinweis, keine Messaussage: neutral, Haarlinie, „!“ */
.meldung.kaesten .status.hinweis,.status.hinweis{background:var(--karte,#fff);border:1px solid var(--trenner);color:var(--tinte)}
.status.hinweis i::before{content:"!";font-style:normal;font-weight:600;margin-right:4px;color:var(--gedaempft)}

/* Teil 96 Nachtrag: Leistungsbausteine im Anfrage-Dialog */
.bausteine-liste{max-height:320px;overflow:auto;border:1px solid var(--trenner);border-radius:5px;padding:4px 8px}
.bs-gruppe{margin:4px 0 6px}
.bs-zeile{display:grid;grid-template-columns:18px 1fr auto auto;gap:6px;align-items:start;padding:2px 0;font-size:13px;cursor:pointer}
.bs-zeile input[type=checkbox]{margin-top:3px}

/* Teil 105 (KF-1): Konfigurator je Schiene - Felder als Abschnitte, je Posten Auswahl + Statuskasten */
.kf-dialog{width:900px}
.kf-zeilen{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.kf-zeile{border-top:1px solid var(--trenner);padding-top:8px}
.kf-posten{grid-template-columns:300px 1fr auto}
.kf-posten .status{grid-column:auto}

/* ---------------------------------------------------------------- Teil 119 (FL-1) Flow-Oberfläche
   ADHS-Leitsätze (ARCHITEKTUR-TEIL-119): eine gefüllte Hauptaktion je Seite, große Wege, Bedienelemente immer am selben Ort,
   kurze Sätze, Rest hinter „mehr“, automatisch speichern mit sichtbarem „gespeichert“ und Rückgängig statt Bestätigungsdialog.
   Wortmarke nie schwarz: „Flow“ in der Leitfarbe auf hell, „KOJON“ gedämpft. Keine neuen Farben – Leitfarbe, Tinte, Grautöne. */
.flow-marke{gap:8px;text-decoration:none}
.flow-marke img{height:28px;width:28px}
.flow-wortmarke{display:flex;flex-direction:column;line-height:1}
/* Teil 123 (AUF-1 1): wie die OFFICE-App - „kojon“ klein in Kleinbuchstaben über „FLOW“ fett in Versalien, FLOW in Tinte */
.flow-wortmarke small{font-size:11px;letter-spacing:.02em;color:var(--text);font-weight:500;text-transform:lowercase;margin-bottom:1px}
.flow-wortmarke b{font-size:21px;font-weight:600;color:var(--tinte);letter-spacing:.01em;text-transform:uppercase}
.leiste .navlink{padding:6px 4px;border-bottom:2px solid transparent}
.leiste .navlink.aktiv{border-bottom-color:var(--leit)}
.flow-schmal{max-width:980px;margin:0 auto}
.flow-gruss{font-size:15px;color:var(--gedaempft);margin:0 0 4px}
.flow-wege{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;margin:14px 0 26px}
.flow-weg{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:118px;padding:18px 20px;border-radius:12px;
  border:2px solid var(--tinte);background:var(--karte);color:var(--tinte);text-decoration:none;cursor:pointer;font:inherit;text-align:left}
.flow-weg:hover{background:var(--leit-zart)}
.flow-weg .t{font-size:22px;font-weight:600;line-height:1.15}
.flow-weg .u{font-size:13px;color:var(--gedaempft)}
.flow-weg.haupt{background:var(--leit);border-color:var(--leit)}
.flow-weg.haupt .u{color:var(--tinte)}
.flow-weg.haupt:hover{background:var(--leit-tief);border-color:var(--leit-tief)}
.flow-weg .pfeil{font-size:22px;font-weight:600}
.flow-kopfzeile{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 8px}
.flow-kopfzeile h2{margin:0}
.flow-suche{width:260px;max-width:100%;margin:0}
.flow-liste{list-style:none;margin:0;padding:0;border:1px solid var(--trenner);border-radius:var(--rad-karte);background:var(--karte)}
.flow-liste li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--trenner)}
.flow-liste li:first-child{border-top:0}
.flow-liste li a.name{flex:1;min-width:0;font-weight:600;color:var(--tinte);text-decoration:none}
.flow-liste li a.name:hover{text-decoration:underline}
.flow-liste .wann{font-size:13px;color:var(--gedaempft);white-space:nowrap}
.flow-menue{position:relative}
.flow-menue > summary{list-style:none;cursor:pointer;padding:2px 10px;border-radius:var(--rad-knopf);color:var(--gedaempft);font-size:18px;line-height:1}
.flow-menue > summary::-webkit-details-marker{display:none}
.flow-menue > summary:hover{background:var(--leit-zart)}
.flow-menue > div{position:absolute;right:0;top:100%;z-index:20;min-width:190px;background:var(--karte);border:1px solid var(--trenner);
  border-radius:var(--rad-karte);box-shadow:0 6px 18px rgba(36,30,34,.12);padding:6px}
.flow-menue > div button,.flow-menue > div a{display:block;width:100%;text-align:left;background:none;border:0;padding:7px 10px;font:inherit;
  color:var(--tinte);border-radius:var(--rad-knopf);cursor:pointer;text-decoration:none}
.flow-menue > div button:hover,.flow-menue > div a:hover{background:var(--leit-zart)}
.flow-mehr{margin-top:8px}
.flow-mehr > summary{cursor:pointer;color:var(--gedaempft);font-size:13px}
.flow-dialog{border:0;border-radius:12px;padding:0;width:min(620px,94vw);box-shadow:0 18px 50px rgba(36,30,34,.25)}
.flow-dialog::backdrop{background:rgba(36,30,34,.35)}
.flow-dialog form{padding:22px 24px}
.flow-dialog h2{margin:0 0 12px}
.flow-schritt{font-size:12px;color:var(--gedaempft);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.flow-wahl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 14px}
.flow-wahl label{display:flex;flex-direction:column;gap:4px;border:2px solid var(--trenner);border-radius:10px;padding:12px;cursor:pointer;margin:0;font-weight:600}
.flow-wahl label span{font-weight:400;font-size:12px;color:var(--gedaempft)}
.flow-wahl input{position:absolute;opacity:0;width:1px;height:1px}
.flow-wahl label:has(input:checked){border-color:var(--tinte);background:var(--leit-zart)}
.flow-knopfreihe{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:14px}
.flow-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;display:flex;gap:14px;align-items:center;
  background:var(--tinte);color:#fff;padding:10px 16px;border-radius:10px;box-shadow:0 8px 24px rgba(36,30,34,.3);font-size:14px}
.flow-toast button{background:none;border:0;color:var(--leit);font:inherit;font-weight:600;cursor:pointer;padding:0}
.flow-gespeichert{font-size:12px;color:var(--gedaempft);min-height:16px}
.flow-gespeichert.ok::before{content:"✓ "}
.feld-fehler{font-size:12px;color:var(--fehler);margin-top:-6px;margin-bottom:8px}
.flow-befehle{position:fixed;inset:0;z-index:200;background:rgba(36,30,34,.35);display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
.flow-befehle > div{width:min(560px,94vw);background:var(--karte);border-radius:12px;box-shadow:0 18px 50px rgba(36,30,34,.25);overflow:hidden}
.flow-befehle input{margin:0;border:0;border-bottom:1px solid var(--trenner);border-radius:0;padding:14px 16px;font-size:16px}
.flow-befehle ul{list-style:none;margin:0;padding:6px;max-height:50vh;overflow:auto}
.flow-befehle li{padding:8px 12px;border-radius:var(--rad-knopf);cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.flow-befehle li .art{font-size:12px;color:var(--gedaempft)}
.flow-befehle li.an{background:var(--leit-zart)}
.flow-kbd{font-size:12px;color:var(--gedaempft);border:1px solid var(--trenner);border-radius:4px;padding:1px 5px}
/* Bibliothek */
.flow-bib{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.flow-bib.offen{grid-template-columns:minmax(0,1fr) 440px}
.flow-bereiche{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.flow-bereiche button{border:1px solid var(--trenner);background:var(--karte);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--tinte)}
.flow-bereiche button.an{border-color:var(--tinte);background:var(--leit-zart);font-weight:600}
.flow-bib-wahl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.flow-bib-wahl select{width:auto;max-width:360px;margin:0}
.flow-bib-wahl input[type=search]{width:240px;margin:0}
.flow-bib table td.kenn{font-size:13px}
.flow-bib table tr[data-id]{cursor:pointer}
.flow-bib table tr.aktiv td{background:var(--leit-zart)}
.flow-schublade{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 90px);overflow:auto}
.flow-schublade h2{margin:0 0 4px;font-size:18px}
.flow-schublade label{display:grid;grid-template-columns:1fr;gap:2px;margin:0 0 8px;font-size:13px}
.flow-schublade label > span{color:var(--gedaempft)}
.flow-schublade input,.flow-schublade select,.flow-schublade textarea{margin:0}
.flow-untertab{width:100%;border-collapse:collapse;font-size:13px;margin:2px 0 4px}
.flow-untertab td,.flow-untertab th{border:1px solid var(--trenner);padding:0}
.flow-untertab th{background:var(--seite);font-weight:500;padding:3px 6px;text-align:left}
.flow-untertab input{border:0;border-radius:0;padding:4px 6px;width:100%;min-width:50px}
.flow-untertab td.weg{width:28px;text-align:center}
.flow-untertab td.weg button{border:0;background:none;cursor:pointer;color:var(--gedaempft)}
.flow-status-legende{font-size:12px;color:var(--gedaempft)}
.status-r{color:var(--text)}
/* Verwaltung */
.flow-admin-reiter{display:flex;gap:4px;border-bottom:1px solid var(--trenner);margin:6px 0 18px}
.flow-admin-reiter a{padding:8px 14px;color:var(--tinte);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px}
.flow-admin-reiter a.an{border-bottom-color:var(--leit);font-weight:600}
.flow-abschnitt{background:var(--karte);border:1px solid var(--trenner);border-radius:var(--rad-karte);padding:18px 20px;margin-bottom:14px}
.flow-abschnitt h2{margin:0 0 10px;font-size:18px}
.flow-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.flow-vorschau{border:1px solid var(--tinte);border-radius:4px;display:grid;grid-template-columns:120px 1fr 1fr;font-size:11px;min-height:64px;background:#fff}
.flow-vorschau > div{border-left:1px solid var(--tinte);padding:6px 8px}
.flow-vorschau > div:first-child{border-left:0;display:flex;align-items:center;justify-content:center}
.flow-vorschau img{max-width:100%;max-height:44px}
@media (max-width:820px){.flow-wege{grid-template-columns:1fr}.flow-bib.offen{grid-template-columns:1fr}.flow-zwei{grid-template-columns:1fr}.flow-wahl{grid-template-columns:1fr}}
.knopf.primaer.flow-ruhig{background:transparent;border-color:var(--trenner);color:var(--gedaempft)}
.knopf.primaer.flow-ruhig em{display:none}
.flow-dialog [hidden],.flow-liste li[hidden],.flow-bib [hidden],.flow-abschnitt [hidden]{display:none!important}
/* Teil 119 Nachtrag: Bibliothek mit stehender Kategoriespalte (Nutzer: „die Kategorie links ist nicht stehen geblieben, die Übersicht fehlte“) */
.inhalt.flow-breit{max-width:1640px}
.flow-bib3{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
.flow-bib3.offen{grid-template-columns:250px minmax(0,1fr) 430px}
.flow-katnav{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;overscroll-behavior:contain;background:var(--karte);
  border:1px solid var(--trenner);border-radius:var(--rad-karte);padding:8px 6px;font-size:13px}
.flow-katnav a{display:flex;justify-content:space-between;gap:6px;padding:4px 8px;border-radius:var(--rad-knopf);color:var(--tinte);text-decoration:none;line-height:1.25}
.flow-katnav a:hover{background:var(--leit-zart)}
.flow-katnav a.an{background:var(--leit);color:var(--tinte);font-weight:600}
.flow-katnav a span{color:var(--gedaempft);font-size:12px;white-space:nowrap}
.flow-katnav a.an span{color:var(--tinte)}
.flow-katnav details{margin:2px 0}
.flow-katnav summary{cursor:pointer;padding:5px 8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gedaempft);font-weight:600;
  display:flex;justify-content:space-between;list-style:none;border-radius:var(--rad-knopf)}
.flow-katnav summary::-webkit-details-marker{display:none}
.flow-katnav summary::before{content:"▸";margin-right:6px}
.flow-katnav details[open] > summary::before{content:"▾"}
.flow-katnav details.hat-an > summary{color:var(--tinte)}
.flow-katnav a.fehlt{margin-bottom:6px;border:1px dashed var(--trenner)}
.flow-bib-mitte{min-width:0}
.flow-bib-leiste{position:sticky;top:0;z-index:5;background:var(--seite);display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 0;margin-top:-10px}
.flow-krume{font-size:20px;font-weight:600;min-width:0}
.flow-krume small{display:block;font-size:12px;font-weight:500;color:var(--gedaempft);letter-spacing:.04em}
.flow-bib3 #liste th{top:58px;z-index:4}
.flow-bib3 .flow-schublade{top:12px}
.flow-bib3 table td.kenn{font-size:13px}
.flow-bib3 table tr[data-id]{cursor:pointer}
.flow-bib3 table tr.aktiv td{background:var(--leit-zart)}
@media (max-width:1100px){.flow-bib3,.flow-bib3.offen{grid-template-columns:200px minmax(0,1fr)}.flow-bib3 .flow-schublade{grid-column:1/-1}}
.flow-krume{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flow-bib-leiste .knopf{white-space:nowrap}
.flow-bib3 #liste th{top:var(--leiste-h,58px)}
input[type=file][hidden]{display:none!important}
/* Teil 119 Nachtrag: Unterkategorien unter der aktiven Kategorie (eingerückt, mit Zahl) */
.flow-katnav .flow-unter{margin:2px 0 6px 10px;padding-left:8px;border-left:2px solid var(--leit)}
.flow-katnav a.unter{font-size:12.5px;padding:3px 8px}
.flow-katnav a.unter.an{background:var(--leit-zart);font-weight:600}
.flow-katnav a.an.hat-unter{background:var(--leit-zart)}

/* ---------------------------------------------------------------- Startseite Teil 126 (659)
   Entwurf B „Fokus Weitermachen“, modern mit Symbolen (Nutzer 13.10.2026). Eine Hauptaktion: die Karte Weitermachen mit dem
   orangen Knopf „Öffnen“. Symbole aus templates/_symbole.html (currentColor). Keine Ampelfarben (Guide 0.2). */
.sym{width:20px;height:20px;flex:none;vertical-align:-4px}
.sym.gross{width:44px;height:44px}
.start{max-width:1080px;margin:0 auto}
.start-gruss{font-size:26px;font-weight:600;color:var(--tinte);margin:4px 0 18px;letter-spacing:-.01em}
.start-wege{display:grid;grid-template-columns:1fr;gap:16px;margin:0 0 34px}
.start .flow-weg{min-height:0;border:0;border-radius:22px;background:var(--karte);color:var(--tinte);text-decoration:none;
  box-shadow:0 1px 2px rgba(36,30,34,.06),0 8px 24px rgba(36,30,34,.06);transition:transform .15s ease,box-shadow .15s ease}
.start .flow-weg:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(36,30,34,.06),0 14px 34px rgba(36,30,34,.10);background:var(--karte)}
.start .flow-weg:focus-visible{outline:3px solid var(--leit);outline-offset:3px}
.start-weiter.flow-weg.haupt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:0;padding:0;overflow:hidden;background:var(--karte)}
.start-weiter.flow-weg.haupt:hover{background:var(--karte)}
.start-weiter-text{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:34px 36px}
.start-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:5px 12px 5px 9px;
  border-radius:99px;background:var(--leit-feld);color:var(--tinte)}
.start-chip .sym{width:16px;height:16px;vertical-align:0}
.start-weiter .t{font-size:34px;font-weight:600;line-height:1.08;letter-spacing:-.015em}
.start-weiter .u{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--gedaempft)}
.start-weiter .u .sym{width:16px;height:16px;vertical-align:0}
.start-oeffnen{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin-top:12px;padding:13px 22px;border-radius:14px;
  background:var(--leit);color:var(--tinte);font-size:17px;font-weight:600;transition:gap .15s ease,background .15s ease}
.start-weiter:hover .start-oeffnen{background:var(--leit-tief);gap:14px}
.start-plan{background:var(--seite);margin:12px;border-radius:16px;display:flex;align-items:center;justify-content:center;min-height:250px;overflow:hidden}
.start-plan img{width:100%;height:250px;object-fit:contain;padding:10px;mix-blend-mode:multiply}
.start-plan.leer{min-height:250px}
.start-schnell{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.start-weg.flow-weg{display:flex;flex-direction:row;align-items:center;gap:16px;padding:18px 20px;text-align:left;font:inherit;cursor:pointer;border-radius:18px}
.start-weg .t{display:block;font-size:18px;font-weight:600}
.start-weg .u{display:block;font-size:13px;color:var(--gedaempft)}
.start-weg > span:nth-child(2){flex:1;min-width:0}
.start-symbol{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;flex:none;
  background:var(--leit-feld);color:var(--tinte)}
.start-symbol .sym{width:24px;height:24px;vertical-align:0}
.start-symbol.klein{width:38px;height:38px;border-radius:11px;background:var(--seite)}
.start-symbol.klein .sym{width:20px;height:20px}
.start-pfeil{color:var(--gedaempft);transition:transform .15s ease,color .15s ease}
.start-weg:hover .start-pfeil{transform:translateX(3px);color:var(--tinte)}
.start-kopf{margin:0 0 12px;align-items:center}
.start-kopf h2{display:flex;align-items:center;gap:10px;font-size:22px}
.start-zahl{font-size:13px;font-weight:600;padding:2px 9px;border-radius:99px;background:var(--karte);color:var(--gedaempft);
  box-shadow:inset 0 0 0 1px var(--trenner)}
.start-werkzeug{display:flex;align-items:center;gap:10px}
.start-suche{position:relative;display:flex;align-items:center;margin:0}
.start-suche .sym{position:absolute;left:13px;width:18px;height:18px;color:var(--gedaempft);pointer-events:none}
.start-suche input.flow-suche{width:300px;padding:10px 14px 10px 40px;border-radius:99px;border:1px solid var(--trenner);background:var(--karte)}
.start-suche input.flow-suche:focus{outline:none;border-color:var(--tinte);box-shadow:0 0 0 3px var(--leit-feld)}
.start-iknopf{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--trenner);
  background:var(--karte);color:var(--gedaempft);cursor:pointer}
.start-iknopf:hover{color:var(--tinte);border-color:var(--tinte)}
.start-iknopf .sym{vertical-align:0}
.start-liste.flow-liste{border:0;background:none;display:flex;flex-direction:column;gap:8px}
.start-liste.flow-liste li{border:0;border-radius:16px;background:var(--karte);padding:10px 12px 10px 12px;gap:14px;
  box-shadow:0 1px 2px rgba(36,30,34,.05);transition:box-shadow .15s ease,transform .15s ease;position:relative}
.start-liste.flow-liste li:hover{box-shadow:0 2px 4px rgba(36,30,34,.06),0 10px 24px rgba(36,30,34,.08)}
/* offenes Zeilenmenü über den Nachbarzeilen (deren klickbare Fläche lag sonst darüber) */
.start-liste.flow-liste li:has(details[open]){z-index:5}
.start-liste.flow-liste li:hover .start-symbol.klein{background:var(--leit-feld)}
.start-liste li a.name{font-size:16px}
.start-liste li a.name::after{content:"";position:absolute;inset:0;border-radius:16px}     /* ganze Zeile klickbar */
.start-liste li a.name:hover{text-decoration:none}
.start-liste .wann{display:inline-flex;align-items:center;gap:6px}
.start-liste .wann .sym{width:15px;height:15px;vertical-align:0}
.start-wer{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:99px;flex:none;
  background:var(--feld-dc);color:var(--text-dc);font-size:13px;font-weight:600}
.start-liste .flow-menue{z-index:2}
.start-liste .flow-menue > summary{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:10px}
.start-liste .flow-menue > summary .sym{vertical-align:0}
.start-liste .flow-menue > div{border-radius:12px;padding:6px;box-shadow:0 12px 30px rgba(36,30,34,.14)}
.start-liste .flow-menue > div button{display:flex;align-items:center;gap:8px;border-radius:8px}
.start-liste .flow-menue > div button .sym{width:17px;height:17px}
.start-alle{margin-top:12px}
.start-korb{margin-top:22px}
.start-korb > summary{display:inline-flex;align-items:center;gap:6px}
.start-korb > summary .sym{width:16px;height:16px;vertical-align:0}
.start-korb li .knopf .sym{width:16px;height:16px}
.start-leer{display:flex;align-items:center;gap:18px;padding:30px;border-radius:22px;background:var(--karte);color:var(--gedaempft)}
.start-leer p{margin:0;color:var(--tinte);font-weight:600}
.start-dialog{border-radius:22px}
.start-dialog .flow-wahl label{border-radius:14px;gap:6px}
.start-dialog .wahl-sym{width:26px;height:26px;margin-bottom:4px}
.start-dialog .knopf.primaer{display:inline-flex;align-items:center;gap:8px}
.start-dialog .knopf.primaer .sym{width:18px;height:18px;vertical-align:0}
@media (max-width:820px){.start-weiter.flow-weg.haupt{grid-template-columns:1fr}.start-schnell{grid-template-columns:1fr}
  .start-weiter-text{padding:24px}.start-suche input.flow-suche{width:100%}.start-liste .wann{display:none}}

/* ---------------------------------------------------------------- Stil Teil 127 (659-Rest)
   Entwurf A „Karten, Symbol + Text“ (Nutzer 14.10.2026) auf alle Seiten: Editor (Kopf, Menü, Werkzeugfenster, Palette, Zeichenfläche,
   Seitenleiste, Statusleiste), Bibliothek, Verwaltung, Dialoge, Menüs, Befehlssuche. Gleiche Ordnung, gleiche Ids - nur das Aussehen.
   Karten/Radien/Schatten wie „Startseite Teil 126“; Symbole aus static/symbole.js (eine Quelle). Eine Hauptaktion je Seite bleibt
   (Editor: ▶ Rechnen). Keine Ampelfarben (Guide 0.2). */
:root{--schatten-karte:0 1px 2px rgba(36,30,34,.06),0 8px 24px rgba(36,30,34,.06);--schatten-schwebe:0 2px 6px rgba(36,30,34,.08),0 16px 40px rgba(36,30,34,.16);
  --rad-k:20px;--rad-m:12px}
/* Knöpfe, Felder, Menüs überall */
.knopf{border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.knopf .sym{width:17px;height:17px}
.knopf.klein{border-radius:8px}
.knopf.klein .sym{width:15px;height:15px}
.knopf.primaer{font-weight:600}
input,select,textarea{border-radius:10px}
.flow-menue > summary{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:10px}
.flow-menue > summary .sym{vertical-align:0}
.flow-menue > div{border-radius:var(--rad-m);padding:6px;box-shadow:0 12px 30px rgba(36,30,34,.14)}
.flow-menue > div button,.flow-menue > div a{border-radius:8px}
.flow-dialog,dialog{border-radius:22px}
.flow-dialog{box-shadow:var(--schatten-schwebe)}
.stufen-k{border-radius:var(--rad-k);box-shadow:var(--schatten-schwebe)}
.kontextmenue{border-radius:var(--rad-m);padding:6px;box-shadow:0 12px 30px rgba(36,30,34,.14)}
.kontextmenue button,.kontextmenue .km-eintrag{border-radius:8px}
.ml-liste{border-radius:14px;padding:6px;box-shadow:0 12px 30px rgba(36,30,34,.14)}
.ml-eintrag{border-radius:8px}
.befehlssuche{border-radius:18px;box-shadow:var(--schatten-schwebe);overflow:hidden}
.bs-eingabe .lupe.sym{width:20px;height:20px;color:var(--gedaempft)}
.bs-zeile{border-radius:10px}
/* Klassen-Doppel seit Teil 96: .bs-zeile der Leistungsbausteine (Anfrage-Dialog) überschrieb das Raster der Befehlssuche → Spalte
   „Befehl“ lag über dem Namen. Hier an die Befehlssuche gebunden. */
.befehlssuche .bs-zeile{grid-template-columns:86px 1fr auto;gap:12px;align-items:center;padding:8px 10px;font-size:14px}
.flow-katnav a.an{background:var(--leit-feld)}

/* Editor - Entwurf B „Symbolleisten“ (Nutzer 14.10.: B wie im Bild): links eine schmale Werkzeugleiste (Symbole, „Einfügen“ klappt
   die passenden Bausteine auf), in der Mitte die Zeichenfläche als Karte mit schwebender Leiste (Rückgängig, Zoom, Einpassen, Raster),
   rechts die Seitenleiste mit den Reitern als senkrechte Symbolleiste. Das volle Werkzeugfenster (Entwickler, localStorage
   netz.palette.voll) bleibt breit wie bisher. */
body.voll{background:var(--seite)}
.menueleiste{background:var(--seite);border-bottom:0;height:auto;padding:8px 14px 6px}
.ml-titel{border-radius:10px;padding:7px 12px}
.ml-titel:hover,.ml-menue.offen>.ml-titel{background:var(--karte)}
.befehlssuche-knopf{height:36px;border-radius:99px;background:var(--karte);padding:0 14px}
.befehlssuche-knopf .lupe.sym{width:18px;height:18px;color:var(--gedaempft)}
.ml-rechts .knopf.primaer{height:36px;padding:0 18px;border-radius:12px;box-shadow:0 6px 16px rgba(244,91,30,.22)}
.ml-rechts .knopf.primaer.veraltet{background:var(--leit);border-color:var(--leit)}
.ml-rechts .knopf.primaer.veraltet:hover{background:var(--leit-tief);border-color:var(--leit-tief)}
.ml-rechts .knopf.primaer em{font-style:normal;font-weight:500;opacity:.8}
.flaeche{background:var(--seite);--leiste:420px}
.flaeche:has(.palette.nur-werkzeuge){--pal:72px}
.flaeche.ohne-palette:has(.palette.nur-werkzeuge){--pal:0}
/* linke Leiste */
.palette.nur-werkzeuge{background:var(--karte);border-right:1px solid var(--trenner);overflow:visible;position:relative;z-index:6;padding:0}
.palette.nur-werkzeuge .werkzeugfenster{align-items:center;gap:6px;padding:12px 0}
.palette.nur-werkzeuge .werkzeugfenster > .wf-kopf{display:none}
.palette.nur-werkzeuge .wz{width:48px;height:48px;padding:0;justify-content:center;border:0;border-radius:14px;color:var(--gedaempft);background:transparent}
.palette.nur-werkzeuge .wz > span:not(.wzs),.palette.nur-werkzeuge .wz kbd{display:none}
.palette.nur-werkzeuge .wz .wzs{display:inline-flex}
.palette.nur-werkzeuge .wz .sym{width:21px;height:21px}
.palette.nur-werkzeuge .wz:hover:not([disabled]){background:var(--seite);color:var(--tinte)}
.palette.nur-werkzeuge .wz.an{background:var(--leit-feld);color:var(--tinte);border:0}
.palette.nur-werkzeuge .wz[disabled]{opacity:.35}
.wz-einfuegen{display:none}
.palette.nur-werkzeuge .wz-einfuegen{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:8px;padding:10px 0 0;
  border:0;border-top:1px solid var(--trenner);width:52px;background:none;font:inherit;font-size:11px;color:var(--gedaempft);cursor:pointer}
.palette.nur-werkzeuge .wz-einfuegen .sym{box-sizing:content-box;width:20px;height:20px;padding:12px;border-radius:14px;background:var(--tinte);color:var(--karte)}
.palette.nur-werkzeuge .wz-einfuegen:hover .sym,.palette.nur-werkzeuge .wz-einfuegen.an .sym{background:var(--text)}
.palette.nur-werkzeuge .wz-einfuegen.an{color:var(--tinte);font-weight:600}
.wf-zahl{position:absolute;top:4px;right:-2px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:99px;background:var(--leit);
  color:var(--tinte);font-size:11px;line-height:18px;font-weight:600}
.palette.nur-werkzeuge .wf-klapp{display:none;position:absolute;left:calc(100% + 8px);top:10px;width:290px;max-height:calc(100% - 20px);overflow:auto;
  background:var(--karte);border-radius:18px;box-shadow:var(--schatten-schwebe);padding:12px;z-index:7}
.palette.nur-werkzeuge.einfuegen-offen .wf-klapp{display:flex;flex-direction:column;gap:3px}
.palette.nur-werkzeuge .wf-klapp .wf-trenner{border-top:0;margin-top:0;padding-top:2px}
.werkzeugfenster .wf-e{border-radius:10px;padding:7px 10px}
.werkzeugfenster kbd{border-radius:6px}
.palette:not(.nur-werkzeuge){background:var(--karte)}
.palette-filter{background:var(--karte)}
.palette-filter button{border-radius:99px;padding:4px 0}
.palette-filter .palette-zu{display:inline-flex;align-items:center;justify-content:center;border:0}
.palette-filter .palette-zu .sym{width:16px;height:16px}
.palette-gruppe>summary{border-radius:10px}
.palette-eintrag{border-radius:10px}
/* Mitte: Zeichenfläche als Karte, Leiste schwebt darüber */
.zeichen-spalte{position:relative;padding:10px 12px}
.blatt-leiste{background:transparent;border-bottom:0;padding:0 0 8px;gap:4px;align-items:center}
.blatt-leiste button{border-radius:99px}
.blatt-leiste select{border-radius:10px}
.zeichen-spalte .zeichnung{background-color:var(--karte);border-radius:var(--rad-k);box-shadow:var(--schatten-karte)}
.schwebe{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:2px;padding:6px;
  border-radius:16px;background:var(--karte);box-shadow:var(--schatten-schwebe)}
.schwebe button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:0;border-radius:11px;
  background:transparent;color:var(--text);cursor:pointer}
.schwebe button:hover:not([disabled]){background:var(--seite);color:var(--tinte)}
.schwebe button.an{color:var(--tinte);background:var(--leit-feld)}
.schwebe button[disabled]{opacity:.35;cursor:default}
.schwebe #schwebe-zoom{min-width:52px;text-align:center;font-size:13px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.schwebe i{width:1px;height:22px;background:var(--trenner);margin:0 4px}
/* rechts: Inhalt + senkrechte Reiterleiste */
.seitenleiste{display:grid;grid-template-columns:minmax(0,1fr) 72px;grid-template-rows:auto minmax(0,1fr);background:var(--karte);
  border-left:1px solid var(--trenner)}
.sl-titel{grid-column:1;grid-row:1;padding:16px 18px 2px;font-size:18px;font-weight:600;color:var(--tinte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seitenleiste .reiter-inhalt{grid-column:1;grid-row:2;min-height:0}
.seitenleiste .reiter{grid-column:2;grid-row:1 / span 2;flex-direction:column;flex-wrap:nowrap;align-items:center;gap:4px;padding:10px 4px;
  border-bottom:0;border-left:1px solid var(--trenner);overflow-y:auto;overflow-x:hidden}
.seitenleiste .reiter #blatt-reiter{display:contents}
.seitenleiste .reiter-knopf:not([hidden]){flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;width:64px;min-width:0;padding:8px 2px 6px;
  border:0;border-radius:14px;background:transparent;color:var(--gedaempft);font-size:10.5px;line-height:1.15;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.seitenleiste .reiter-knopf .sym{width:21px;height:21px;flex:none}
.seitenleiste .reiter-knopf:hover{background:var(--seite);color:var(--tinte)}
.seitenleiste .reiter-knopf.aktiv{background:var(--leit-feld);color:var(--tinte);font-weight:600}
.seitenleiste .reiter-zu{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;margin-top:auto;border:0;border-radius:12px}
.seitenleiste .reiter-zu .sym{width:18px;height:18px}
#zusammenfassung:not(:has(*)){background:var(--seite);border-radius:14px;padding:14px}
.palette-griff,.seite-griff{width:36px;height:36px;border:0;border-radius:10px;background:var(--karte);box-shadow:var(--schatten-karte);color:var(--gedaempft)}
.palette-griff{left:6px}.seite-griff{right:6px}
.palette-griff .sym,.seite-griff .sym{width:18px;height:18px;vertical-align:-3px}
.statusleiste{background:var(--karte);border-top:1px solid var(--trenner)}
.statusleiste #st-zoom{display:none}
#pv-breit .sym{width:15px;height:15px}

/* Bibliothek */
/* Größen wie bisher (padding 8px 6px, Zeilen 4px 8px): die Spalte bleibt am Ende einer langen Kategorie stehen (fl1, Teil 119 Nachtrag) */
.flow-katnav{border-color:transparent;border-radius:var(--rad-k);box-shadow:var(--schatten-karte)}
.flow-katnav a{border-radius:10px}
.flow-katnav a.fehlt{border-radius:10px}
.flow-katnav summary{border-radius:10px}
.flow-suchfeld{position:relative;display:flex;align-items:center;margin:0}
.flow-suchfeld .sym{position:absolute;left:13px;width:18px;height:18px;color:var(--gedaempft);pointer-events:none}
.flow-suchfeld input.flow-suche{padding:9px 14px 9px 40px;border-radius:99px;border:1px solid var(--trenner);background:var(--karte)}
.flow-suchfeld input.flow-suche:focus{outline:none;border-color:var(--tinte);box-shadow:0 0 0 3px var(--leit-feld)}
.flow-bib-leiste .knopf.primaer{padding:8px 16px;border-radius:12px}
.flow-bib3 #liste{border:0;border-radius:var(--rad-k);box-shadow:var(--schatten-karte);border-collapse:separate;border-spacing:0;overflow:clip}
.flow-bib3 #liste th:first-child{border-top-left-radius:var(--rad-k)}.flow-bib3 #liste th:last-child{border-top-right-radius:var(--rad-k)}
.flow-schublade.karte{border:0;border-radius:var(--rad-k);box-shadow:var(--schatten-karte)}

/* Verwaltung */
.flow-admin-reiter{gap:6px;border-bottom:0;margin:10px 0 18px}
.flow-admin-reiter a{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;border-bottom:0;margin:0;background:var(--karte);
  box-shadow:0 1px 2px rgba(36,30,34,.05)}
.flow-admin-reiter a .sym{width:17px;height:17px}
.flow-admin-reiter a:hover{background:var(--leit-zart)}
.flow-admin-reiter a.an{background:var(--tinte);color:var(--karte)}
.flow-abschnitt{border:0;border-radius:var(--rad-k);box-shadow:var(--schatten-karte);padding:22px 24px}
.flow-abschnitt .tabelle{border:0}
.flow-kopfzeile .knopf.primaer{padding:8px 16px;border-radius:12px}