/* hub/ui/static/app.css — das EINE ausgelieferte Stylesheet der Admin-UI.
   Inhalt herausgehoben aus den <style>-Bloecken der freigegebenen Entwuerfe
   unter docs/design/mockups/fassung-2/ (sieben Seiten, Vereinigungsmenge).
   Ausgeliefert ueber genau EINE Route (/style.css?v=<Fassung aus dem Inhalt>,
   s. hub/ui/stylesheet.py) — kein style-Attribut, kein eingebetteter Block,
   kein JavaScript, keine Datei von aussen (Richtlinie default-src 'none').

   ZWEI Bloecke fuehren Farbe: :root (hell) und html.thema-dunkel. Ausserhalb
   dieser beiden steht kein einziger Farbwert; jede Regel greift auf ein Token
   zu. Ein Zustand traegt neben der Farbe IMMER eine Rahmenart: solid wirksam,
   dashed laufend, dotted keine Aussage — der Zugang fuer Nutzer ohne
   Farbsehen. */
:root{
--grund-app:#f2f4f7;--kachel:#ffffff;--kachel-rand:#e3e6ea;--feld-rand:#767c85;
--flaeche:#f5f5f5;--flaeche-zeile:#f7f7f8;--flaeche-warn:#fff3cd;--flaeche-fehler:#f8d7da;--flaeche-erfolg:#d1e7dd;
--linie:#999999;--text:#1a1a1a;--text-leise:#444444;
--zustand-wirksam:#1b5e20;--zustand-offen:#8a4b00;--zustand-unbekannt:#3f4a55;--zustand-fehler:#9b1c1c;
--diagramm-balken:#2f6f8f;--fokus:#0b5fff;
--raum-1:.25rem;--raum-2:.5rem;--raum-3:1rem;--raum-4:1.5rem;--raum-5:2.5rem;
--schrift-text:system-ui,sans-serif;--schrift-wert:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--grad-klein:.875rem;--grad-basis:1rem;--grad-gross:1.25rem;--grad-titel:1.5rem;--grad-kennzahl:2rem;
--gewicht-normal:400;--gewicht-stark:600;
--leiste:4px;--leiste-abstand:.75rem;--zeile-min-hoehe:2.25rem;--spalte-konto:22rem;
--radius:8px;--radius-klein:4px;
--schatten:0 1px 2px rgba(16,18,21,.08),0 2px 8px rgba(16,18,21,.05);
--leiste-breite:15rem;--leiste-schmal:4.5rem;--kopf-hoehe:3.5rem;--symbol:20px;
color-scheme:light;}
/* HELLES THEMA IST DIE VORGABE. Es wird ohne Cookie und ohne Systemabfrage
   ausgeliefert; die Farbvorliebe des Betriebssystems wird nirgends abgefragt
   — dazu gibt es in dieser Datei keine einzige Regel. Das dunkle
   Thema haengt allein an der Klasse thema-dunkel, die der Server auf <html>
   setzt, wenn das Cookie hub_thema=dunkel steht — derselbe Server-Umlauf wie
   bei der Seitenleiste. color-scheme sorgt dafuer, dass auch Rollbalken und
   Formularelemente des Browsers dem gewaehlten Thema folgen und nicht der
   Systemeinstellung. */
html.thema-dunkel{
--grund-app:#101215;--kachel:#1c1f23;--kachel-rand:#2a2f36;--feld-rand:#8a929c;
--flaeche:#22262b;--flaeche-zeile:#23272d;--flaeche-warn:#3a2f10;--flaeche-fehler:#3b1f22;--flaeche-erfolg:#17301f;
--linie:#3a4048;--text:#e8eaed;--text-leise:#b6bcc4;
--zustand-wirksam:#74c69d;--zustand-offen:#f0b429;--zustand-unbekannt:#a9b4c0;--zustand-fehler:#f28b82;
--diagramm-balken:#7fb8d4;--fokus:#9ec5ff;
--schatten:0 1px 2px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.35);color-scheme:dark;}

/* --- Grundgeruest ------------------------------------------------------- */
*{box-sizing:border-box}
html,body{background:var(--grund-app)}
body{font-family:var(--schrift-text);font-size:var(--grad-basis);line-height:1.5;color:var(--text);margin:0}
a{color:var(--text)}
a:hover{text-decoration:none}
a:focus,button:focus,input:focus,select:focus,summary:focus{outline:2px solid var(--fokus);outline-offset:2px}
p{margin:0 0 var(--raum-2)}
code{font-family:var(--schrift-wert);font-size:var(--grad-klein);overflow-wrap:anywhere}
pre{background:var(--flaeche);border:1px solid var(--kachel-rand);border-radius:var(--radius-klein);
padding:var(--raum-2);overflow:auto;font-family:var(--schrift-wert);font-size:var(--grad-klein);margin:0 0 var(--raum-2)}
.sprung{position:absolute;left:-9999px}
/* Hinterlegte Bezeichnung: fuer Auge und Maus nicht da, fuer Vorleseprogramm,
   Textbrowser und Ausdruck vorhanden. Weder display:none noch
   visibility:hidden — beide nehmen dem Vorleseprogramm den Text. Das nowrap
   gehoert zum Rezept (es verhindert, dass der auf 1 px gestauchte Text von
   manchen Vorleseprogrammen Zeichen fuer Zeichen vorgelesen wird) und schneidet
   nichts ab: sichtbar ist dieser Text nie. */
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sprung:focus{position:static;display:inline-block;padding:var(--raum-1) var(--raum-2);background:var(--kachel)}

/* --- Rahmen und Seitenleiste -------------------------------------------- */
.rahmen{display:flex;align-items:flex-start}
.leiste{width:var(--leiste-breite);flex:0 0 var(--leiste-breite);background:var(--kachel);
border-right:1px solid var(--kachel-rand);position:sticky;top:0;height:100vh;overflow:auto;padding-top:var(--raum-3)}
.marke{display:block;padding:0 var(--raum-3) var(--raum-3);font-weight:var(--gewicht-stark);
font-size:var(--grad-gross);text-decoration:none;border-bottom:1px solid var(--kachel-rand)}
.marke span{display:block;font-size:var(--grad-klein);font-weight:var(--gewicht-normal);color:var(--text-leise)}
.leiste details{border-bottom:1px solid var(--kachel-rand)}
.leiste summary{padding:var(--raum-2) var(--raum-3);font-size:var(--grad-klein);color:var(--text-leise)}
.leiste details[open]>summary{font-weight:var(--gewicht-stark);color:var(--text)}
.leiste ul{list-style:none;margin:0;padding:0 0 var(--raum-2)}
.leiste li a{display:flex;gap:var(--raum-2);align-items:center;padding:var(--raum-2) var(--raum-3);
text-decoration:none;border-left:var(--leiste) solid transparent;font-size:var(--grad-klein)}
.leiste li a:hover{background:var(--flaeche)}
.leiste li a[aria-current="page"]{font-weight:var(--gewicht-stark);border-left-color:var(--text);background:var(--flaeche)}
.leiste svg{width:var(--symbol);height:var(--symbol);flex:0 0 var(--symbol)}
.leiste-fuss{padding:var(--raum-3);font-size:var(--grad-klein)}
.leiste-fuss a{display:flex;gap:var(--raum-1);align-items:center;text-decoration:none}
.leiste-fuss svg{width:var(--symbol);height:var(--symbol)}
/* schmale Form — serverseitig gerendert, flache Liste, NUR das Symbol.
   Die Bezeichnung steht weiterhin im Markup (span.nur-vorlesen) und zusaetzlich
   im title-Attribut des Links: das Vorleseprogramm nennt sie, der Textbrowser
   und der Ausdruck zeigen sie, beim Ueberfahren erscheint sie als Kurzinfo.
   Jeder Eintrag misst mindestens 44 x 44 px, und zwar in BEIDEN Formen —
   in der SPALTE wie im umbrochenen KOPFBAND ab dem 960er Umbruchpunkt.
   Jede Haelfte der Zusage haengt an einer eigenen Zusicherung:
     Menueeintrag (.leiste.schmal li a): Hoehe aus min-height:52px
       (20 px Symbol + 2 x 16 px Polster), Breite aus min-width:44px.
     Ausgang aus der wortlosen Form (.leiste.schmal .leiste-fuss a): Hoehe
       aus min-height:44px, Breite aus dem Absatz, der ihn traegt — er steht
       als Block auf eigener Zeile und ist nie schmaler als die Leiste.
   Ohne das min-width waere ein Menueeintrag im Kopfband nur so breit wie
   sein Inhalt: 20 px Symbol + 2 x 4 px Polster = 28 px. In der Spalte faellt
   das nicht auf, weil dort --leiste-schmal (72 px) die Breite setzt; im
   Kopfband ist der Eintrag ein Flex-Element und bemisst sich selbst.
   Der Preis ist gerechnet: neun Eintraege zu 44 px ohne Zwischenraum sind
   396 px, unter 396 px Fensterbreite bricht das Kopfband also in eine
   zweite Zeile (52 px -> 104 px). Es steht dort nicht mehr fest
   (position:static im 960er-Block) und rollt mit weg — die zweite Zeile
   kostet einmalig Weg und keine dauerhafte Sichtflaeche. */
.leiste.schmal{width:var(--leiste-schmal);flex:0 0 var(--leiste-schmal)}
.leiste.schmal .marke{font-size:var(--grad-klein);padding:0 var(--raum-1) var(--raum-2);
text-align:center;overflow-wrap:anywhere}
.leiste.schmal .marke span{display:none}
.leiste.schmal ul{padding:0}
.leiste.schmal li a{justify-content:center;gap:0;min-height:52px;min-width:44px;
padding:var(--raum-3) var(--raum-1);border-left-width:0;border-bottom:1px solid var(--kachel-rand)}
.leiste.schmal li a[aria-current="page"]{border-bottom-color:var(--text);border-bottom-width:var(--leiste)}
.leiste.schmal .leiste-fuss{padding:var(--raum-2) var(--raum-1)}
.leiste.schmal .leiste-fuss a{justify-content:center;min-height:44px}
.inhalt{flex:1 1 auto;min-width:0}

/* --- Kopfzeile ---------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:var(--raum-3);flex-wrap:wrap;
background:var(--kachel);border-bottom:1px solid var(--kachel-rand);padding:var(--raum-2) var(--raum-3);min-height:var(--kopf-hoehe)}
.kopf form{margin:0;display:flex;gap:var(--raum-2);align-items:center;flex-wrap:wrap}
.kopf label{font-size:var(--grad-klein);color:var(--text-leise)}
input,select,button{font:inherit;padding:var(--raum-1) var(--raum-2);border:1px solid var(--feld-rand);
border-radius:var(--radius-klein);background:var(--kachel);color:var(--text)}
button{background:var(--flaeche);font-weight:var(--gewicht-stark)}
.kopf button{display:inline-flex;align-items:center;gap:var(--raum-1)}
.kopf button svg{width:var(--symbol);height:var(--symbol);flex:0 0 var(--symbol)}
.rechts{margin-left:auto;display:flex;align-items:center;gap:var(--raum-3);flex-wrap:wrap}
.rechts>a{text-decoration:none;display:flex;align-items:center;gap:var(--raum-1);font-size:var(--grad-klein)}
.rechts svg{width:var(--symbol);height:var(--symbol)}
.profil{position:relative}
.profil>summary{padding:var(--raum-1) var(--raum-2);border:1px solid var(--feld-rand);
border-radius:var(--radius-klein);display:flex;align-items:center;gap:var(--raum-1);font-size:var(--grad-klein)}
.profil-inhalt{position:absolute;right:0;top:calc(100% + var(--raum-1));min-width:14rem;background:var(--kachel);
border:1px solid var(--kachel-rand);border-radius:var(--radius);box-shadow:var(--schatten);padding:var(--raum-3);z-index:3}

/* Sprungziele landen UNTER der Kopfzeile statt dahinter ------------------
   Jeder Filter-, Sortier- und Spaltenlink der Uebersicht haengt #konten an,
   die Befundanzeige oben rechts und "Alle Konten" in der Seitenleiste
   ebenso, der Sprunglink zeigt auf #inhalt, und die Kontoseite fuehrt eine
   ganze Sprungliste. Ohne das Folgende rollt der Browser das Ziel auf y=0 —
   und y=0 liegt HINTER der Kopfzeile (Regel oben: position:sticky, top:0).
   Der Betreiber landet mitten in der Kachel: ohne ihre Ueberschrift und ohne
   die Angabe, welcher Filter gerade gilt.

   scroll-padding-top steht am ROLLBEHAELTER (html) und wirkt damit fuer JEDES
   Sprungziel jeder Seite. Es braucht kein scroll-margin an achtzehn einzelnen
   Kennungen und keine Aenderung an einer Vorlage.

   Warum ein Wert je Umbruchpunkt und KEIN mitwachsender: die Kopfzeile hat
   zwar min-height, aber auch flex-wrap. Ihre Hoehe ist die Zahl der
   umbrochenen Zeilen, und die haengt am Inhalt der Seite (nur die Uebersicht
   traegt das Suchformular) und an der Laenge des Anmeldenamens — nicht am
   Fensterrand. CSS kann die gerenderte Hoehe eines Geschwisterelements nicht
   in eine Laenge uebernehmen; das ginge nur mit Skript, und Skript gibt es
   hier nicht. Also deckt jedes Band den SCHLECHTESTEN Fall seines Bereichs.
   Die Richtung ist bewusst: ein zu kleiner Wert versteckt die Ueberschrift
   wieder (genau der Fehler), ein zu grosser laesst darueber den Fuss des
   vorigen Abschnitts stehen — sichtbar bleibt beide Male alles.

   Gerechnet in Zeilen der Kopfzeile (2 x 8 px Polster, 16 px Zeilenabstand,
   Zeile mit Eingabefeld 34 px, Zeile ohne 30 px):
     eine Zeile   =  56 px, denn min-height greift -> ab etwa 1180 px Fenster
     zwei Zeilen  =  96 px                         -> 641 px bis etwa 1180 px
     vier Zeilen  = 171 px, fuenf Zeilen = 209 px  -> unter 641 px
   Daraus zwei mal --kopf-hoehe (112 px) als Grundwert, der die zwei Zeilen
   deckt, und vier mal --kopf-hoehe (224 px) unter 641 px, das die fuenf
   deckt. Einen dritten Umbruchpunkt gibt es dafuer nicht: die Datei fuehrt
   genau die zwei der Entwuerfe.

   NICHT geloest ist damit der Tabellenkopf zwischen 641 und 960 px: dort
   steht er selbst auf top:0 und liegt hinter der Kopfzeile (Regel
   table.konten thead th im 960er-Block). Das ist eine Stapelfrage und keine
   Rollfrage — scroll-padding-top ruehrt sie nicht an. */
html{scroll-padding-top:calc(var(--kopf-hoehe) * 2)}

/* --- Inhaltsflaeche ----------------------------------------------------- */
main{padding:var(--raum-3);max-width:70rem}
h1{font-size:var(--grad-titel);margin:0 0 var(--raum-2)}
h3{font-size:var(--grad-basis);margin:var(--raum-4) 0 var(--raum-1)}
.brot{font-size:var(--grad-klein);margin:0 0 var(--raum-1)}
.kennzeile{color:var(--text-leise);font-size:var(--grad-klein);margin:0 0 var(--raum-3);overflow-wrap:anywhere}
.zaehl{font-size:var(--grad-gross);margin:0 0 var(--raum-3)}

/* --- Kacheln ------------------------------------------------------------ */
.kachel{background:var(--kachel);border:1px solid var(--kachel-rand);border-radius:var(--radius);
box-shadow:var(--schatten);margin:0 0 var(--raum-3)}
.kachel.rang-befund{border-left:var(--leiste) solid var(--zustand-offen)}
.kachel.rang-keine{border-left:var(--leiste) dotted var(--zustand-unbekannt)}
.kachel.rang-laeuft{border-left:var(--leiste) dashed var(--text)}
.kachel-kopf{display:flex;align-items:baseline;gap:var(--raum-3);flex-wrap:wrap;
padding:var(--raum-2) var(--raum-3);border-bottom:1px solid var(--kachel-rand)}
.kachel-kopf h2{font-size:var(--grad-gross);margin:0}
.akt{margin-left:auto;font-size:var(--grad-klein);display:flex;gap:var(--raum-3);flex-wrap:wrap}
.kachel-leib{padding:var(--raum-3)}
.kachel-fuss{padding:var(--raum-2) var(--raum-3);border-top:1px solid var(--kachel-rand);
font-size:var(--grad-klein);color:var(--text-leise)}
.kachel-fuss p{margin:0 0 var(--raum-1)}
.kachel-fuss p:last-child{margin:0}

/* --- Kennzahlen --------------------------------------------------------- */
.kennzahlen{display:flex;flex-wrap:wrap;gap:var(--raum-3);margin:0 0 var(--raum-3)}
.kennzahlen .kachel{flex:1 1 15rem;margin:0}
.kz-zahl{font-size:var(--grad-kennzahl);font-weight:var(--gewicht-stark);font-family:var(--schrift-wert);
line-height:1.1;margin:0 0 var(--raum-1)}
.kz-zahl a{text-decoration:none}
.kz-von{color:var(--text-leise);font-size:var(--grad-klein);margin:0 0 var(--raum-2)}
.kz-leer{color:var(--zustand-unbekannt)}

/* --- Abzeichen: Farbe UND Rahmenart, nie feste Breite, nie abgeschnitten - */
.abz{display:inline-block;padding:0 var(--raum-2);border-radius:var(--radius-klein);border:1px solid;
font-size:var(--grad-klein);line-height:1.6;overflow-wrap:anywhere}
.abz-ok{border-style:solid;border-color:var(--zustand-wirksam);background:var(--flaeche-erfolg);color:var(--zustand-wirksam)}
.abz-lauf{border-style:dashed;border-color:var(--text-leise);background:var(--kachel);color:var(--text)}
.abz-befund{border-style:solid;border-color:var(--zustand-offen);border-left-width:var(--leiste);
background:var(--flaeche-warn);color:var(--zustand-offen);font-weight:var(--gewicht-stark)}
.abz-keine{border-style:dotted;border-color:var(--zustand-unbekannt);background:var(--flaeche);color:var(--zustand-unbekannt)}

/* --- Meldezeilen -------------------------------------------------------- */
.befund,.keine-aussage,.folge,.fehler,.erledigt,.laeuft{padding:var(--raum-2) var(--leiste-abstand);
margin:0 0 var(--raum-2);min-height:var(--zeile-min-hoehe);border-radius:0 var(--radius-klein) var(--radius-klein) 0}
.befund{background:var(--flaeche-warn);border-left:var(--leiste) solid var(--zustand-offen)}
.keine-aussage{background:var(--flaeche);border-left:var(--leiste) dotted var(--zustand-unbekannt)}
.folge{background:var(--flaeche);border-left:var(--leiste) solid var(--linie)}
.fehler{background:var(--flaeche-fehler);border-left:var(--leiste) solid var(--zustand-fehler)}
.erledigt{background:var(--flaeche-erfolg);border-left:var(--leiste) solid var(--zustand-wirksam)}
.laeuft{background:var(--flaeche);border-left:var(--leiste) dashed var(--text)}
.befund b{color:var(--zustand-offen)}
.keine-aussage b{color:var(--zustand-unbekannt)}
.fehler b{color:var(--zustand-fehler)}
.erledigt b{color:var(--zustand-wirksam)}
.hint,.quelle,.zubehoer{color:var(--text-leise);font-size:var(--grad-klein)}
.zubehoer{margin:var(--raum-1) 0 0}

/* --- Zustandsblock und Sprungliste einer Kontoseite --------------------- */
.zustandsblock{display:flex;flex-wrap:wrap;gap:var(--raum-2);margin:0 0 var(--raum-3);padding:0;list-style:none}
.zustandsblock b{display:block;font-size:var(--grad-klein);color:var(--text-leise);font-weight:var(--gewicht-normal)}
.zustandsblock a{text-decoration:none}
.sprungliste{list-style:none;margin:0 0 var(--raum-3);padding:0}
.sprungliste li{display:inline-block;margin:0 var(--raum-2) var(--raum-1) 0}
.sprungliste a{display:inline-block;padding:var(--raum-1) var(--raum-2);border:1px solid var(--kachel-rand);
border-radius:var(--radius-klein);text-decoration:none;font-size:var(--grad-klein)}

/* --- Mengenliste (Zustandsregister der Uebersicht, Protokollfilter) ------
   Zwei Formen, ohne Farbe unterscheidbar:
   a) Menge mit Treffern -> Link, durchgezogene Umrandung in --feld-rand.
   b) Menge ohne Treffer oder nicht ermittelbar -> KEIN Knopf: leiser Text
      ohne Umrandung. Es gibt nichts zu druecken, also sieht es auch nicht
      nach Knopf aus.
   Die Umrandung steht in --feld-rand statt in --kachel-rand: eine Umrandung,
   die ein Bedienelement begrenzt, braucht 3:1 (4.21:1 statt 1.25:1). */
.filter{list-style:none;margin:0 0 var(--raum-2);padding:0}
.filter li{display:inline-block;margin:0 var(--raum-2) var(--raum-1) 0}
.filter a,.filter span{display:inline-block;padding:var(--raum-1) var(--raum-2);border:1px solid var(--feld-rand);
border-radius:var(--radius-klein);text-decoration:none;font-size:var(--grad-klein)}
.filter [aria-current="true"]{font-weight:var(--gewicht-stark);background:var(--flaeche)}
.filter .null{color:var(--text-leise);border:0;padding-left:0;padding-right:0}

/* --- Zustandsregister --------------------------------------------------- */
.register{border:1px solid var(--kachel-rand);border-radius:var(--radius);margin:0 0 var(--raum-3)}
.register>summary{padding:var(--raum-2) var(--raum-3);font-size:var(--grad-klein)}
.register[open]>summary{font-weight:var(--gewicht-stark);border-bottom:1px solid var(--kachel-rand)}
.register-leib{padding:var(--raum-3)}
.register-leib h3{font-size:var(--grad-klein);color:var(--text-leise);margin:var(--raum-3) 0 var(--raum-2)}
.register-leib h3:first-child{margin-top:0}

/* --- Formularfelder und Wertelisten ------------------------------------- */
.feld{margin:0 0 var(--raum-3)}
.feld label{display:block;font-weight:var(--gewicht-stark);margin-bottom:var(--raum-1)}
.feld input,.feld select{max-width:100%;min-width:16rem}
/* Knopfformulare nebeneinander (Kachel „Container" der Kontoseite). Der
   Entwurf zeigt Starten/Stoppen/Neustarten in EINER Zeile; dort steht ein
   Formular mit drei Knoepfen. Im Produkt sind es drei Formulare, weil jede
   Aktion ihr eigenes op und ihr eigenes CSRF-Feld traegt — die Zeile muss
   also aus der Klasse kommen. Kein eigener Abstand und kein eigener Rand:
   zwischen zwei inline-block-Formularen steht dasselbe Leerzeichen wie im
   Entwurf zwischen zwei Knoepfen, und margin:0 haelt die UA-Vorgabe fest. */
.inline{display:inline-block;margin:0}
dl.werte{margin:0}
dl.werte div{display:flex;flex-wrap:wrap;gap:var(--raum-2);padding:var(--raum-1) 0;
border-bottom:1px solid var(--kachel-rand)}
dl.werte dt{flex:0 0 14rem;color:var(--text-leise);margin:0}
dl.werte dd{margin:0;overflow-wrap:anywhere;flex:1 1 14rem}

/* --- Kontenliste -------------------------------------------------------- */
table.konten{border-collapse:collapse;width:100%}
table.konten caption{text-align:left;padding:0 0 var(--raum-2);font-size:var(--grad-basis)}
table.konten th,table.konten td{text-align:left;padding:var(--raum-1) var(--raum-2);
border-bottom:1px solid var(--kachel-rand);vertical-align:top}
table.konten thead th{position:sticky;top:var(--kopf-hoehe);background:var(--kachel);
border-bottom:3px double var(--linie);font-weight:var(--gewicht-stark);z-index:1}
table.konten tbody tr:nth-child(even){background:var(--flaeche-zeile)}
table.konten td.k{width:var(--spalte-konto)}
td.k a{font-weight:var(--gewicht-stark)}
td.k .adr,td.k code{display:block;font-size:var(--grad-klein);color:var(--text-leise);overflow-wrap:anywhere}
td ul{margin:0;padding-left:1.1rem}
tr.rang-befund td:first-child{border-left:var(--leiste) solid var(--zustand-offen)}
tr.rang-keine td:first-child{border-left:var(--leiste) dotted var(--zustand-unbekannt)}
tr.rang-laeuft td:first-child{border-left:var(--leiste) dashed var(--text)}

/* --- Werte- und Protokolltabellen, Blaetterleiste ----------------------- */
table.werte,table.log{border-collapse:collapse;width:100%}
table.werte caption,table.log caption{text-align:left;padding:0 0 var(--raum-2);font-size:var(--grad-basis)}
table.werte th,table.werte td,table.log th,table.log td{text-align:left;padding:var(--raum-1) var(--raum-2);
border-bottom:1px solid var(--kachel-rand);vertical-align:top;overflow-wrap:anywhere}
table.werte thead th,table.log thead th{border-bottom:3px double var(--linie);font-weight:var(--gewicht-stark)}
table.werte tbody tr:nth-child(even),table.log tbody tr:nth-child(even){background:var(--flaeche-zeile)}
.blaettern{display:flex;flex-wrap:wrap;gap:var(--raum-2);align-items:center;font-size:var(--grad-klein);
padding-top:var(--raum-2);border-top:1px solid var(--kachel-rand);margin-top:var(--raum-2)}
.blaettern a,.blaettern strong{padding:var(--raum-1) var(--raum-2);border:1px solid var(--kachel-rand);
border-radius:var(--radius-klein);text-decoration:none}
.blaettern [aria-current="page"]{border-color:var(--feld-rand);background:var(--flaeche)}
.blaettern .txt{border:0;padding:0}
/* Spaltenbezeichnung der Kartenansicht: erst unter 640 px sichtbar. */
.f{display:none}

/* --- Diagramm ----------------------------------------------------------- */
figure{margin:0}
figure svg{width:100%;height:auto;display:block}
figcaption{font-size:var(--grad-klein);color:var(--text-leise);margin-top:var(--raum-2)}
.balken{fill:var(--diagramm-balken)}
.achse{stroke:var(--linie);stroke-width:1}
.spur{fill:var(--flaeche)}
.schwelle{stroke:var(--zustand-offen);stroke-width:2;stroke-dasharray:3 3}
.svgtext{fill:var(--text-leise);font-family:var(--schrift-text);font-size:var(--grad-klein)}

/* --- Vermerk ------------------------------------------------------------ */
.vermerk{border:1px dashed var(--text-leise);border-radius:var(--radius);color:var(--text-leise);
font-size:var(--grad-klein);padding:var(--raum-2) var(--raum-3);margin:0 0 var(--raum-3)}
.vermerk b{color:var(--text-leise)}

/* --- Umbruchpunkt 960 px: Seitenleiste wird Kopfband ------------------- */
@media (max-width:960px){
 .rahmen{display:block}
 .leiste,.leiste.schmal{width:auto;flex-basis:auto;position:static;height:auto;border-right:0;border-bottom:1px solid var(--kachel-rand)}
 .leiste li a{border-left-width:0;border-bottom:var(--leiste) solid transparent}
 .leiste li a[aria-current="page"]{border-bottom-color:var(--text)}
 .leiste.schmal ul{display:flex;flex-wrap:wrap}
 table.konten thead th{top:0}
}
/* --- Umbruchpunkt 640 px: Tabelle wird Karte --------------------------- */
@media (max-width:640px){
 /* Vier statt zwei Kopfzeilenhoehen: hier bricht die Kopfzeile auf bis zu
    fuenf Zeilen um (209 px bei 320 px Fensterbreite, gerechnet oben). */
 html{scroll-padding-top:calc(var(--kopf-hoehe) * 4)}
 .kachel{box-shadow:none}
 main{padding:var(--raum-2)}
 .kennzahlen{display:block}
 .kennzahlen .kachel{margin-bottom:var(--raum-3)}
 .rechts{margin-left:0}
 dl.werte dt{flex:1 1 100%;font-weight:var(--gewicht-stark)}
 .feld input,.feld select{min-width:0;width:100%}
 table.konten,table.konten tbody,table.konten tr,table.konten td{display:block;width:auto}
 table.konten thead{position:absolute;left:-9999px}
 table.konten tr{border-bottom:1px solid var(--kachel-rand);padding:var(--raum-2) 0}
 table.konten td{border-bottom:0;padding:0 0 var(--raum-1)}
 table.konten td.k{width:auto}
 .f{display:inline;font-weight:var(--gewicht-stark)}
 tr.rang-befund td:first-child,tr.rang-keine td:first-child,tr.rang-laeuft td:first-child{border-left:0}
 tr.rang-befund{border-left:var(--leiste) solid var(--zustand-offen);padding-left:var(--leiste-abstand)}
 tr.rang-keine{border-left:var(--leiste) dotted var(--zustand-unbekannt);padding-left:var(--leiste-abstand)}
 tr.rang-laeuft{border-left:var(--leiste) dashed var(--text);padding-left:var(--leiste-abstand)}
}