/* Gestaltung nach dem THW-Corporate-Design (Manual Stand 06/2026): Bundesschriften (BundesSans für Überschriften und
   Bedienelemente, BundesSerif für Fließtext), Primärfarben THW-Blau/Weiß/Schwarz, THW-Silber für Flächen und Linien,
   THW-Gelb nur als Akzentlinie (nie für Text), keine großflächigen Blauflächen, keine Schatten, kein veränderter
   Zeichenabstand. Rollen-Token als einzige Quelle; die Anzeigemodi Feld, Dunkel und Nacht belegen dieselben Token neu. */
@font-face{font-family:"Archivo Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url("fonts/archivo-latin-wght-normal.woff2") format("woff2-variations")}

:root{
  color-scheme:light;
  /* THW-Palette: Blau #003399, Silber #dadee1 (als einzige Farbe aufgerastert: 50 % #edeff0, 30 % #f4f5f6),
     Chrom #bdc6cd, Stein #6c7982, Graphit #53616b, Royal #1662aa, Gelb #ffeb00, Do's #508d46, Don'ts #b5161a */
  --grund:#f4f5f6;--flaeche:#fff;--flaeche-2:#edeff0;
  --text:#000;--text-2:#53616b;--text-3:#6c7982;
  --linie-fein:#dadee1;--linie:#bdc6cd;--linie-stark:#6c7982;
  --akzent:#003399;--akzent-hell:#1662aa;--auf-akzent:#fff;--titel:var(--akzent);
  /* Status: Farbe nur als Linie/Balken (Do's-Grün und Gelb erreichen als Schrift den Kontrast nicht), Text bleibt schwarz */
  --gut:#508d46;--gut-fond:var(--flaeche);--gut-linie:#508d46;
  --warn-text:var(--text);--warn-fond:var(--flaeche);--warn-linie:#ffeb00;
  --alarm:#b5161a;--alarm-fond:var(--flaeche);--alarm-linie:#b5161a;
  --radius:0px;--strich:1px;--strich-stark:1px;--fokus:3px;--ziel-basis:2.75rem;--ziel:0rem;
  --dauer-1:120ms;
  --schrift:"BundesSans Web","Archivo Variable",Archivo,Calibri,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --schrift-text:"BundesSerif Web",Cambria,Georgia,"Times New Roman",serif;
  --schrift-daten:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --t-xs:.8125rem;--t-s:.875rem;--t-m:1rem;--t-l:1.125rem;--t-xl:1.375rem;--t-2xl:1.75rem;
  --r-1:.25rem;--r-2:.5rem;--r-3:.75rem;--r-4:1rem;--r-5:1.5rem;--r-6:2rem;
  /* Kopf: weiß statt Blaufläche (CD 1.5), THW-Blau nur für Name und aktiven Reiter */
  --kopf-fond:var(--flaeche);--kopf-auf:var(--text);--kopf-auf-2:var(--text-2);
  --kopf-linie:var(--linie);--kopf-kante-farbe:var(--linie);
  --gelb:#ffeb00;
}
.dunkel-modus,.nacht-modus{color-scheme:dark}
.feld-modus{
  font-size:112%;
  --grund:#e8eaef;--flaeche:#fff;--flaeche-2:#dfe3ea;
  --text:#000;--text-2:#262b36;--text-3:#262b36;
  --linie-fein:#111318;--linie:#111318;--linie-stark:#111318;
  --strich:2px;--strich-stark:2px;--fokus:4px;--ziel:.25rem;--t-xs:.875rem;--t-s:.9375rem;
  --kopf-kante-farbe:#111318;
}
.dunkel-modus{
  --grund:#0f1116;--flaeche:#171a21;--flaeche-2:#21252e;
  --text:#e7eaf1;--text-2:#aab2c2;--text-3:#848da0;
  --linie-fein:#272c36;--linie:#4a5262;--linie-stark:#676f80;
  --akzent:#69b9ec;--akzent-hell:#a6d3f4;--auf-akzent:#0f1116;
  --gut:#95bd68;--gut-fond:var(--flaeche);--gut-linie:#95bd68;
  --alarm:#ff9d94;--alarm-fond:var(--flaeche);--alarm-linie:#e0605a;
  --warn-text:var(--text);--warn-fond:var(--flaeche);--warn-linie:#ffeb00;
  --kopf-fond:var(--flaeche);--kopf-auf:var(--text);--kopf-auf-2:var(--text-2);--kopf-linie:var(--linie);--kopf-kante-farbe:var(--linie);
}
/* Nacht: warm gedimmt, schont die Dunkeladaption. Wie im Feld-Modus große Tippziele und kräftige Linien. */
.nacht-modus{
  --grund:#0d0c08;--flaeche:#17150f;--flaeche-2:#221f16;
  --text:#d9cdb6;--text-2:#a2977e;--text-3:#958972;
  --linie-fein:#2b271d;--linie:#575039;--linie-stark:#746a51;
  --akzent:#a8791a;--akzent-hell:#c9932c;--auf-akzent:#100d07;
  --gut:#8fae63;--gut-fond:#1d241a;--gut-linie:#40523a;
  --alarm:#e08a7e;--alarm-fond:#291410;--alarm-linie:#5e2f26;
  --warn-text:#d9b96a;--warn-fond:#2a2415;--warn-linie:#6b501c;
  --kopf-fond:#17150f;--kopf-auf:#d9cdb6;--kopf-auf-2:#a2977e;--kopf-linie:#423c2d;--kopf-kante-farbe:#423c2d;
  --titel:var(--text);
  --strich:2px;--strich-stark:2px;--ziel:.25rem;
}
.dunkel-modus body,.nacht-modus body{line-height:1.55}

*{box-sizing:border-box}
html{background:var(--grund)}
body{margin:0;font:var(--t-m)/1.5 var(--schrift);background:var(--grund);color:var(--text);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
[hidden]{display:none !important}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0}

/* Kopf */
header{background:var(--kopf-fond);color:var(--kopf-auf);display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--r-2);padding:0 20px;min-height:64px;border-bottom:var(--strich-stark) solid var(--kopf-kante-farbe)}
.brand{display:flex;align-items:center;gap:12px;color:var(--titel);text-decoration:none;font-size:var(--t-l);font-weight:700;padding-right:28px;margin-right:12px;border-right:1px solid var(--kopf-linie)}
/* Logo und App-Name getrennt (CD 1.3: keine neue Wort-Bild-Marke, Schutzraum um das Logo) */
.brand img+.app-name{border-left:1px solid var(--kopf-linie);padding-left:16px;margin-left:8px}
.brand img{height:36px;max-width:140px;object-fit:contain}
.brand img.logo-white,.logo-prev img.logo-white{background:#fff;padding:3px}
.brand .sq{display:inline-block;width:10px;height:10px;background:var(--gelb)}
header nav{display:flex;gap:2px;flex:1;align-items:stretch}
header nav a{display:flex;align-items:center;color:var(--kopf-auf);padding:0 14px;font-size:var(--t-m);text-decoration:none;border-top:4px solid transparent;border-bottom:4px solid transparent}
header nav a:hover{color:var(--akzent);background:var(--flaeche-2)}
header nav a.on{color:var(--akzent);border-bottom-color:var(--akzent);font-weight:700}
header a:focus-visible,header button:focus-visible{outline:var(--fokus) solid var(--akzent);outline-offset:-3px}
/* Klappmenüs im Kopf (details/summary, ohne JavaScript bedienbar; theme.js schließt sie bei Klick daneben):
   Bereich wechseln am Titel, Benutzermenü mit Anzeigemodus, Passwort und Abmelden */
.klapp{position:relative;display:flex}
.klapp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:64px}   /* Höhe des Kopfs: summary streckt nicht mit */
.klapp>summary::-webkit-details-marker{display:none}
.klapp .pfeil{display:inline-block;width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-.2em 0 0 .5em;transition:transform var(--dauer-1)}
.klapp[open] .pfeil{transform:rotate(-135deg);margin-top:.2em}
.klapp>summary:focus-visible{outline:var(--fokus) solid var(--akzent);outline-offset:-3px}
.menue{position:absolute;top:100%;left:0;z-index:20;min-width:16rem;max-width:calc(100vw - 24px);background:var(--flaeche);color:var(--text);border:var(--strich) solid var(--linie-stark);border-top:var(--strich-stark) solid var(--akzent);box-shadow:0 8px 24px rgba(0,0,0,.18);padding:var(--r-1) 0;font-size:var(--t-s)}
.menue.rechts{left:auto;right:0}
.menue>a,.menue>form button{display:block;width:100%;text-align:left;padding:var(--r-2) var(--r-3);color:var(--text);text-decoration:none;background:none;border:0;min-height:0;font-size:inherit;font-weight:400}
.menue>a:hover,.menue>form button:hover{background:var(--flaeche-2);color:var(--akzent)}
.menue>a small,.menue .wer small{display:block;color:var(--text-2);font-size:var(--t-xs)}
.menue>a[aria-current=page]{box-shadow:inset 4px 0 0 var(--akzent)}
.menue>a[aria-current=page] b::after{content:" ✓";color:var(--akzent)}
.menue form{margin:0;border-top:1px solid var(--linie-fein)}
.menue .wer{padding:var(--r-2) var(--r-3);font-weight:700;border-bottom:1px solid var(--linie-fein)}
.menue-teil{padding:var(--r-2) var(--r-3);border-bottom:1px solid var(--linie-fein)}
.menue-teil .f{display:block;margin-bottom:var(--r-1)}
.menue .anzeige-schalter{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.menue .anzeige-schalter button{background:var(--flaeche);color:var(--text);min-height:2.25rem}
.bereich-menue>summary.brand{margin-right:12px}
.nutzer-menue{align-self:stretch}
.nutzer-menue>summary{display:flex;align-items:center;gap:8px;padding:0 var(--r-2);color:var(--kopf-auf-2);font-size:var(--t-xs)}
.nutzer-menue>summary:hover{color:var(--akzent)}
.kuerzel{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--akzent);color:var(--auf-akzent);font-weight:700;font-size:var(--t-xs)}

/* Anzeigemodus: getrennte Segmente mit Lücke, das gewählte als helle Fläche (nachts als Rahmen) */
.anzeige-schalter{display:inline-flex;gap:6px;align-self:center}
.anzeige-schalter button{border:var(--strich) solid var(--linie-stark);background:var(--kopf-fond);color:var(--kopf-auf);padding:.2rem .6rem;min-height:0;font-size:var(--t-xs);font-weight:700}
.anzeige-schalter button[aria-pressed=true]{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}
.nacht-modus .anzeige-schalter button[aria-pressed=true]{background:none;color:var(--akzent-hell);box-shadow:inset 0 0 0 2px var(--akzent)}
@media (hover:hover){.anzeige-schalter button:hover{border-color:var(--akzent);color:var(--akzent)}.anzeige-schalter button[aria-pressed=true]:hover{color:var(--auf-akzent)}
  .nacht-modus .anzeige-schalter button[aria-pressed=true]:hover{color:var(--akzent-hell)}}
/* Rechner: Anzeigemodus kompakt in der Kopfzeile, als zurückhaltender Segment-Schalter (aktiv: Akzentfarbe mit Linie,
   ohne Fettschrift, damit nichts springt). Auf dem Handy steckt er im Benutzermenü (.nur-mobil). */
.kopf-anzeige{display:flex;align-items:center;margin-left:auto}
.kopf-anzeige .anzeige-schalter{gap:0;border:1px solid var(--kopf-linie);border-radius:var(--radius);overflow:hidden}
.kopf-anzeige .anzeige-schalter button{border:0;border-left:1px solid var(--kopf-linie);border-radius:0;background:none;color:var(--kopf-auf-2);font-weight:400;padding:.25rem .6rem;font-size:var(--t-xs);line-height:1.3}
.kopf-anzeige .anzeige-schalter button:first-child{border-left:0}
.kopf-anzeige .anzeige-schalter button[aria-pressed=true],
.nacht-modus .kopf-anzeige .anzeige-schalter button[aria-pressed=true]{background:var(--flaeche-2);color:var(--akzent);box-shadow:inset 0 -2px 0 var(--akzent)}
@media (hover:hover){.kopf-anzeige .anzeige-schalter button:hover,.kopf-anzeige .anzeige-schalter button[aria-pressed=true]:hover,
  .nacht-modus .kopf-anzeige .anzeige-schalter button[aria-pressed=true]:hover{color:var(--akzent);background:var(--flaeche-2)}}
.menue-teil.nur-mobil{display:none}
.schalter-leiste{display:flex;justify-content:flex-end;padding:var(--r-2) 20px;background:var(--kopf-fond);border-bottom:var(--strich-stark) solid var(--kopf-kante-farbe)}

main{max-width:1060px;margin:24px auto;padding:0 16px}
h1{font-size:var(--t-2xl);font-weight:700;line-height:1.2;margin:0 0 4px;text-wrap:balance;color:var(--titel)}
h2{font-size:var(--t-l);font-weight:700;line-height:1.25;margin:0 0 10px;color:var(--titel)}
h3{font-size:var(--t-m);font-weight:700;line-height:1.3;margin:0 0 var(--r-2);color:var(--titel)}
/* Subline in Grau statt THW-Blau: blaue Schrift ohne Link war von Links nicht zu unterscheiden */
.sub,.muted{color:var(--text-2)} .sub{margin:0 0 18px}
/* Fließtext in BundesSerif (CD 1.4); Hinweise, Sublines und Bedienelemente bleiben BundesSans */
main p{font-family:var(--schrift-text);line-height:1.5}
main p.sub,main p.muted,main p.klein,main p.actions,.muted,.sub,.klein,small,label,.badge,.flash,.banner{font-family:var(--schrift)}
.card{background:var(--flaeche);border:var(--strich) solid var(--linie-stark);border-radius:var(--radius);padding:var(--r-4) 18px;margin-bottom:var(--r-4)}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 8px;border-bottom:var(--strich) solid var(--linie);vertical-align:middle}
/* Tabellenkopf nach CD 1.8.1: BundesSans Bold in THW-Blau, Silber-Fläche, normale Groß-/Kleinschreibung */
th{font-size:var(--t-s);color:var(--titel);font-weight:700;background:var(--flaeche-2);border-bottom-color:var(--linie-stark)}
tr.click:hover{background:var(--flaeche-2)} td a.rowlink{color:inherit;text-decoration:none;font-weight:700}
a{color:var(--akzent-hell)}
.badge{display:inline-block;padding:2px 8px 2px 7px;border:var(--strich) solid var(--linie);border-left-width:5px;font-size:var(--t-xs);font-weight:700;background:var(--flaeche);color:var(--text)}
.b-ok{border-left-color:var(--gut-linie)}
.b-warn{border-color:var(--linie-stark);border-left-color:var(--warn-linie)}
.b-bad{border-left-color:var(--alarm-linie);color:var(--alarm)}
.b-mute{background:var(--flaeche-2);border-left-color:var(--linie-stark);color:var(--text-2)}

button,.btn{font:inherit;font-size:var(--t-s);font-weight:600;border-radius:var(--radius);border:var(--strich-stark) solid var(--linie-stark);background:var(--flaeche);padding:.5rem .9rem;min-height:calc(var(--ziel-basis) + var(--ziel));cursor:pointer;color:var(--text);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;transition:color var(--dauer-1),border-color var(--dauer-1),background-color var(--dauer-1)}
@media (hover:hover){button:hover,.btn:hover{border-color:var(--akzent);color:var(--akzent)}}
button.pri,.btn.pri{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}
@media (hover:hover){button.pri:hover,.btn.pri:hover{background:var(--akzent-hell);border-color:var(--akzent-hell);color:var(--auf-akzent)}}
button.dng{color:var(--alarm);border-color:var(--alarm-linie)}
button:disabled{opacity:.5;cursor:not-allowed}
.nacht-modus button:disabled{opacity:.85}
.dunkel-modus button.pri{filter:brightness(.85)}
button:focus-visible,.btn:focus-visible,a:focus-visible{outline:var(--fokus) solid var(--akzent);outline-offset:1px}

input,select,textarea{font:inherit;font-size:var(--t-m);padding:.45rem .55rem;border:var(--strich-stark) solid var(--linie-stark);border-radius:var(--radius);background:var(--flaeche);color:var(--text);max-width:100%;transition:border-color var(--dauer-1)}
input[type=text],input[type=password],input[type=number],select,textarea{width:100%;min-height:calc(var(--ziel-basis) + var(--ziel))}
input[type=file]{width:100%}
input.num{width:100px}
.f2b-regeln select{width:auto}
input:disabled,select:disabled{background:var(--flaeche-2);color:var(--text-2)}
input::placeholder{color:var(--text-3);font-style:italic}
input:focus,select:focus,textarea:focus{outline:var(--fokus) solid var(--akzent);outline-offset:0;border-color:var(--akzent)}
/* Eigene Kästchen: kräftiger Rand, auch in der Sonne zu sehen */
input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;width:1.5rem;height:1.5rem;min-height:0;padding:0;margin:0;flex:0 0 auto;display:inline-grid;place-content:center;cursor:pointer}
.feld-modus input[type=checkbox],.feld-modus input[type=radio],.nacht-modus input[type=checkbox],.nacht-modus input[type=radio]{width:1.7rem;height:1.7rem}
input[type=radio]{border-radius:50%}
input[type=checkbox]::before{content:"";width:.95rem;height:.95rem;transform:scale(0);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);background:var(--auf-akzent)}
input[type=radio]::before{content:"";width:.75rem;height:.75rem;border-radius:50%;transform:scale(0);background:var(--akzent)}
input[type=checkbox]:checked{background:var(--akzent);border-color:var(--akzent)}
input[type=radio]:checked{border-color:var(--akzent)}
input[type=checkbox]:checked::before,input[type=radio]:checked::before{transform:scale(1)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:var(--fokus) solid var(--akzent);outline-offset:2px}
button,.btn,input,select,textarea{font-family:var(--schrift)}
label.f,legend.f{display:block;padding:0;font-size:var(--t-xs);font-weight:600;color:var(--text-2);margin:0 0 4px}
.feld-modus label.f{color:var(--text);font-weight:700}

.row{display:flex;gap:16px;flex-wrap:wrap} .row>*{flex:1;min-width:240px}
.bar{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:14px}
.bar form{margin:0} .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabs{display:flex;gap:2px;border-bottom:var(--strich) solid var(--linie-stark);margin-bottom:16px;flex-wrap:wrap}
.tabs a,.tabs button{padding:9px 16px;min-height:0;cursor:pointer;color:var(--text-2);border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:none;text-decoration:none;font-size:var(--t-m);font-weight:400}
.tabs .on{color:var(--akzent);border-color:var(--akzent);font-weight:700;background:var(--flaeche)}
/* Unterreiter einer Datenquelle (unter den Reitern der Einstellungen): kleiner, ohne Fläche */
.tabs.unter a{padding:6px 12px;font-size:var(--t-s)}
.tabs.unter .on{background:none}
/* Der aktive Reiter ist fett und damit breiter. Eine unsichtbare fette Kopie des Texts (data-l) hält jeden Reiter
   immer auf seiner fetten Breite, sonst springen Umbruch und Verteilung je nach gewähltem Reiter. */
.tabs [data-l],header nav [data-l]{display:inline-flex;flex-direction:column;align-items:center;justify-content:center}
.tabs [data-l]::after,header nav [data-l]::after{content:attr(data-l);font-weight:700;height:0;overflow:hidden;visibility:hidden;pointer-events:none;user-select:none}
@media (hover:hover){.tabs a:hover,.tabs button:hover{color:var(--akzent);background:none}}
.pane[hidden]{display:none}
.list{border:var(--strich) solid var(--linie-stark);max-height:300px;overflow:auto;margin-top:8px}
.list label{display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:var(--strich) solid var(--linie-fein);cursor:pointer}
.list label:hover{background:var(--flaeche-2)} .list small{color:var(--text-2);margin-left:auto}
.rule{display:grid;grid-template-columns:28px 1.3fr 1.2fr;gap:12px;align-items:center;padding:12px 0;border-bottom:var(--strich) solid var(--linie)}
.rule:last-child{border:0} .rule small{display:block;color:var(--text-2)}
.tog{display:flex;gap:10px;align-items:flex-start;padding:8px 0} .tog small{display:block;color:var(--text-2)}
.center{max-width:380px;margin:70px auto}
/* Formulare der Anmeldeseiten: Abstand zwischen den Feldern statt leerer Absätze */
.center form label.f{margin-top:var(--r-4)} .center form label.f:first-of-type{margin-top:0}
.center form>button,.center form>.zeigen-feld+button{margin-top:var(--r-5)}
/* Passwort anzeigen (app.js) */
.zeigen-feld{display:flex;gap:0}
.zeigen-feld input{flex:1 1 auto;min-width:0}
.zeigen-feld button{flex:0 0 auto;border-left:0;font-weight:400;min-width:6.5rem}
.flash{padding:10px 14px;margin-bottom:14px;border:var(--strich) solid var(--linie);border-left-width:6px;font-weight:700;background:var(--flaeche);color:var(--text)}
.flash.ok{border-left-color:var(--gut-linie)}
.flash.err{border-left-color:var(--alarm-linie);color:var(--alarm)}
/* Hinweis als Kasten: nur Linie, keine Fläche (CD 1.7.1). Drei Stufen nach Wirkung, die Farbe trägt nur die Linie,
   der Text bleibt schwarz: Warnung (THW-Gelb), kritisch (Don'ts-Rot: Messwerte oder Alarme kommen nicht an, Daten
   gehen verloren), Info (Stein mit Balken in THW-Blau, z. B. Cloudflare nicht konfiguriert). Erster Satz fett, Link
   zur Stelle, an der es sich beheben lässt. */
.banner{background:var(--flaeche);border:3px solid var(--warn-linie);color:var(--text);padding:12px 16px;margin-bottom:16px}
.banner.kritisch{border-color:var(--alarm-linie)}
.banner.info{border:var(--strich) solid var(--linie-stark);border-left:6px solid var(--akzent)}
.banner a{font-weight:700;white-space:nowrap}
.banner a::after,.leer a::after{content:" →"}
.diff div{padding:4px 8px;font-size:var(--t-s);margin:3px 0;border-left:5px solid;background:var(--flaeche-2);color:var(--text)}
.diff .add{border-left-color:var(--gut-linie)} .diff .del{border-left-color:var(--alarm-linie)} .diff .chg{border-left-color:var(--warn-linie)}
.logo-prev{background:var(--kopf-fond);color:var(--titel);font-weight:700;border:var(--strich) solid var(--linie);padding:14px 18px;display:inline-flex;align-items:center;gap:10px}
.logo-prev img{height:36px;max-width:140px;object-fit:contain}
.logo-prev img+.app-name{border-left:1px solid var(--linie);padding-left:16px;margin-left:8px}
/* Einziger Speichern-Knopf eines Formulars, daneben das eigene Passwort zur Bestätigung (_save_confirm.html) */
.speichern{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:6px} .speichern>div{flex:0 1 22rem;min-width:0}
.gap{margin-top:16px} .inline{display:inline} .w-full{width:100%}

fieldset.plain{border:0;padding:0;margin:0;min-width:0}
.center.wide{max-width:460px}
.qr{border:var(--strich) solid var(--linie-stark);padding:6px;background:#fff}
ul.codes{columns:2;list-style:none;padding:0;margin:12px 0}
ul.codes li{padding:3px 0}
code{font-family:var(--schrift-daten);background:var(--flaeche-2);border:var(--strich) solid var(--linie-fein);padding:1px 6px;font-size:var(--t-xs)}
label.opt{display:flex;gap:10px;align-items:flex-start;padding:6px 0;cursor:pointer}
.rule3{display:grid;grid-template-columns:28px 110px 1fr 150px;gap:12px;align-items:center;padding:10px 0;border-bottom:var(--strich) solid var(--linie)}
.rule3:last-child{border:0} .rule3 small{display:block;color:var(--text-2)}
/* „unter“/„über“ in fester Breite, damit die Schwellenfelder aller Regeln in einer Spalte stehen */
.rule3 .vgl{display:inline-block;min-width:2.6em}
/* Empfänger je Weg (Ansicht für Beobachter) */
.empf-kopf{display:flex;gap:var(--r-3);align-items:baseline;justify-content:space-between;flex-wrap:wrap}
dl.empf{display:grid;grid-template-columns:10rem 1fr;gap:var(--r-2) var(--r-4);margin:0}
dl.empf dt{font-size:var(--t-s);font-weight:700;color:var(--text-2)} dl.empf dd{margin:0}

@media (max-width:40rem){
  main{margin:12px auto;padding:0 12px} .card{padding:var(--r-3)} h1{font-size:var(--t-xl)}
  /* Kopf: Titel (Bereich) und Benutzermenü in einer Zeile, darunter die Reiter */
  header{padding:0 12px;gap:0 var(--r-2)}
  .brand,.bereich-menue{flex:1 1 auto;min-width:0}
  .brand{min-height:48px;padding-right:0;margin-right:0;border-right:0;font-size:var(--t-m)}
  .bereich-menue>summary.brand{margin-right:0} .klapp>summary{min-height:52px}
  .nutzer-menue .nutzer-name{display:none}
  .kopf-anzeige{display:none} .menue-teil.nur-mobil{display:block}
  header nav{order:2;flex:1 1 100%;border-top:var(--strich) solid var(--kopf-linie)}
  header nav a{flex:1 1 0;justify-content:center;min-height:44px;padding:0 6px}
  header{position:relative} .klapp{position:static}   /* Menü volle Breite unter dem Kopf */
  .menue,.menue.rechts{left:12px;right:12px;min-width:0;max-width:none}
  .menue .anzeige-schalter button{min-height:2.75rem;font-size:var(--t-s)}
  .schalter-leiste{padding:var(--r-2) 12px} .schalter-leiste .anzeige-schalter{margin:0}
  .center{margin:24px auto}
  .row>*{min-width:0;flex-basis:100%}
  /* Kopfzeile der Seite: Titel oben, Knöpfe in voller Breite darunter */
  .bar{flex-wrap:wrap} .bar>.actions{flex:1 1 100%} .bar>.actions>*{flex:1 1 0}
  .actions>button,.actions>.btn{flex:1 1 auto}
  .speichern>div,.speichern>button{flex:1 1 100%}
  /* Reiter im festen Raster (zwei gleich breite Spalten): die Verteilung hängt nicht vom Text oder dem aktiven Reiter ab */
  .tabs{display:grid;grid-template-columns:1fr 1fr}
  .tabs.unter{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
  .tabs a,.tabs button{text-align:center;padding:9px 6px;font-size:var(--t-s);min-height:44px;min-width:0}
  .list{max-height:240px} .list label{min-height:44px}
  .tog{min-height:44px;align-items:center}
  label.opt{min-height:44px;align-items:center}
  .rule3{grid-template-columns:28px 1fr;gap:var(--r-2) var(--r-3)} .rule3>:nth-child(n+3){grid-column:2}
  .rule3 select{width:100%} input.num{width:7rem}
  dl.empf{grid-template-columns:1fr;gap:0} dl.empf dd{margin-bottom:var(--r-2)}
  ul.codes{columns:1}
  /* Tabellen als Karten: eine Zeile je Eintrag, Beschriftung aus data-l */
  table.stack,table.stack tbody{display:block} table.stack tr:first-child:has(th){display:none}
  table.stack tr{display:block;padding:var(--r-2) 0;border-bottom:var(--strich) solid var(--linie-stark)}
  table.stack tr:last-child{border-bottom:0}
  table.stack td{display:flex;gap:var(--r-3);align-items:baseline;justify-content:space-between;padding:4px 2px;border:0;text-align:right}
  table.stack td[data-l]::before{content:attr(data-l);flex:0 0 auto;font-size:var(--t-xs);font-weight:700;color:var(--titel);text-align:left}
  table.stack td[data-l=""]{display:block;text-align:left}
  table.stack td .actions{justify-content:flex-end} table.stack td[data-l=""] .actions>button{flex:1 1 100%}
  table.stack td.kopf{display:block;text-align:left;font-size:var(--t-l);padding-bottom:var(--r-2)} table.stack td.kopf::before{display:none}
  table.stack td.kopf a.rowlink{display:block;padding:var(--r-2) 0;color:var(--akzent-hell);text-decoration:underline;text-underline-offset:.2em}
  table.stack td[colspan]{display:block;text-align:left}
  /* Mehrzeilige Zellen: Beschriftung oben, Inhalt linksbündig darunter (sonst läuft der Inhalt aus der Karte) */
  table.stack td.block{display:block;text-align:left}
  table.stack td.block[data-l]::before{display:block;margin-bottom:2px}
  table.stack td.kopf .zeile{font-size:var(--t-xs)}
}
@media (prefers-reduced-motion:reduce){:root{--dauer-1:0ms}}

/* Dashboard */
main.dash-main{max-width:1600px}                 /* breiter als die Formularseiten, damit die Panels Platz haben */
.dash-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dash-kopf .sub{margin-bottom:10px}
/* Umschalter Einfach/Erweitert: eigene, theme-abhaengige Farben (im Inhaltsbereich, nicht in der Kopfzeile) */
.dash-schalter{display:inline-flex;gap:6px;align-self:flex-start}
.dash-schalter button{border:var(--strich) solid var(--linie-stark);background:var(--flaeche);color:var(--text-2);padding:.3rem .8rem;min-height:0;font-size:var(--t-s);font-weight:600;cursor:pointer}
.dash-schalter button[aria-pressed=true]{background:var(--akzent);color:var(--auf-akzent);border-color:var(--akzent)}
@media (hover:hover){.dash-schalter button:hover{border-color:var(--akzent);color:var(--akzent)}.dash-schalter button[aria-pressed=true]:hover{color:var(--auf-akzent)}}
.dash-frame{width:100%;height:calc(100vh - 170px);min-height:480px;border:var(--strich) solid var(--linie);background:var(--flaeche)}
@media (max-width:640px){.dash-frame{height:calc(100vh - 230px);min-height:380px}}

/* Systemseite: Host-Metriken, Logs */
.hostmetrik{display:flex;gap:28px;flex-wrap:wrap}
.metrik{min-width:150px}
.metrik-k{font-size:var(--t-s);font-weight:700;color:var(--titel)}
.metrik-v{font-size:var(--t-xl);font-weight:700;margin-top:2px}
.metrik-v.hoch{color:var(--alarm)}
.metrik-v .klein{font-weight:400}
.klein{font-size:var(--t-xs)}
.nowrap{white-space:nowrap}
td .klein{display:inline-block;margin-top:2px}
/* Zusatzzeile in einer Zelle (Typ unter dem Namen, Hinweis unter dem Status) */
td .zeile{display:block;margin-top:2px}
.logs{white-space:pre-wrap;word-break:break-word;max-height:70vh;overflow:auto;background:var(--flaeche-2);border:var(--strich) solid var(--linie);padding:12px;font-size:var(--t-xs);line-height:1.5;margin:0}
/* Schlüssel des neuen TTN-Geräts zum Kopieren in die Firmware */
pre.code{font-family:var(--schrift-daten);white-space:pre;overflow-x:auto;background:var(--flaeche-2);border:var(--strich) solid var(--linie);padding:12px;font-size:var(--t-xs);line-height:1.5;margin:0 0 12px;user-select:all}

/* Sortierbare Tabellen: Spaltenköpfe als Knöpfe (app.js) bzw. Links (Audit-Log, sortiert auf dem Server) */
th .sortbtn,th .sortlink{all:unset;cursor:pointer;color:inherit;font:inherit;display:inline-flex;gap:.25rem;align-items:center}
th .sortbtn:focus-visible,th .sortlink:focus-visible{outline:var(--fokus) solid var(--akzent);outline-offset:2px}
@media (hover:hover){th .sortbtn:hover,th .sortlink:hover{text-decoration:underline;text-underline-offset:.2em}}
th .sortpfeil{font-size:var(--t-xs)}
/* Auf schmalen Bildschirmen ist die Kopfzeile ausgeblendet; dort sortiert die Leiste über der Tabelle */
.sortbar{display:none}
/* Audit-Log: Filterleiste (einklappbar ohne JavaScript), Trefferzahl, Blättern, Hervorhebung der Suche */
details.filter>summary{cursor:pointer;font-weight:700;color:var(--titel);font-family:var(--schrift)}
details.filter[open]>summary{margin-bottom:var(--r-3)}
.filterfelder{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:var(--r-3)}
.filterfelder .weit{grid-column:1/-1}
.filterfelder input{width:100%;min-height:calc(var(--ziel-basis) + var(--ziel))}
.btn.on{border-color:var(--akzent);color:var(--akzent);font-weight:700}
.spacer{flex:1 1 auto}
.audit-kopf{margin:0 0 var(--r-3)}
.pager{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:var(--r-3);font-family:var(--schrift)}
mark{background:var(--gelb);color:#000;padding:0 1px}
@media (max-width:40rem){
  .sortbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:var(--r-2);font-family:var(--schrift)}
  .sortbar label{font-size:var(--t-xs);font-weight:700;color:var(--titel)}
  .sortbar select{flex:1 1 8rem;width:auto}
  .audit-kopf .btn{flex:1 1 100%}
}

/* ---------------------------------------------------------------- Ergänzungen der Überarbeitung (UI/UX) */
/* Sprunglink für Tastatur und Screenreader, sichtbar nur mit Fokus */
.sprung{position:absolute;left:12px;top:-100px;z-index:50;background:var(--flaeche);color:var(--akzent);padding:var(--r-2) var(--r-3);border:var(--strich-stark) solid var(--akzent);font-weight:700}
.sprung:focus{top:12px}
/* Anzeigemodus im Kopf mit Beschriftung; die Reiter brechen nie um und lassen sich bei wenig Platz seitlich schieben
   (System hat sechs Reiter) */
.kopf-anzeige{gap:var(--r-2)}
.kopf-anzeige-titel{font-size:var(--t-xs);color:var(--kopf-auf-2)}
header nav{min-width:0;overflow-x:auto;scrollbar-width:none}
header nav::-webkit-scrollbar{display:none}
header nav a{white-space:nowrap;flex:0 0 auto}
@media (max-width:90rem){header nav a{padding:0 10px} .kopf-anzeige-titel{display:none}}
/* Brotkrümelpfad über dem Titel einer Unterseite */
.pfad ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--r-1) 0;margin:0 0 var(--r-2);padding:0;font-size:var(--t-s)}
.pfad li+li::before{content:"›";margin:0 .5em;color:var(--text-3)}
.pfad [aria-current]{color:var(--text-2)}
/* Kennzahlen über einer Liste: Zahl fett, Status nur als Balken links */
.kennzahlen{list-style:none;display:flex;flex-wrap:wrap;gap:var(--r-2) var(--r-3);margin:0 0 var(--r-4);padding:0;font-size:var(--t-s)}
.kennzahlen li{background:var(--flaeche);border:var(--strich) solid var(--linie);border-left:5px solid var(--linie-stark);padding:var(--r-2) var(--r-3)}
.kennzahlen b{font-size:var(--t-l);margin-right:.25em}
.kennzahlen .k-ok{border-left-color:var(--gut-linie)} .kennzahlen .k-bad{border-left-color:var(--alarm-linie)}
.kennzahlen .k-mute{color:var(--text-2)}
/* Zahlen rechtsbündig (CD 1.8.1) */
th.zahl,td.zahl{text-align:right;font-variant-numeric:tabular-nums}
th.zahl .sortbtn{flex-direction:row-reverse}
/* Leere Tabelle: Erklärung statt nur „keine Einträge“ */
td.leer{color:var(--text-2);text-align:center;padding:var(--r-5) var(--r-3)}
/* Schalter mit Beschriftung (label.tog): Klick auf den Text schaltet mit */
label.tog{cursor:pointer}
label.tog>span{display:block}
label.tog>span>small{display:block}
/* Speichern-Leiste am Ende langer Formulare: bleibt beim Scrollen unten sichtbar */
.aktionsleiste{position:sticky;bottom:0;z-index:5;display:flex;gap:var(--r-2);align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:var(--r-4);padding:var(--r-3) 0;background:var(--grund);border-top:var(--strich-stark) solid var(--linie-stark)}
.ungespeichert{margin-right:auto;font-size:var(--t-s);font-weight:700;border-left:5px solid var(--warn-linie);padding:2px 8px}
/* Gefährliche Aktionen abgesetzt (Löschen, Sperren); Rückfragen mit roter Oberkante */
.card.gefahr{border-color:var(--alarm-linie)}
.card.gefahr h2{color:var(--alarm)}
.card.kritisch-rahmen{border-top:4px solid var(--alarm-linie)}
.gefahr-teil{margin-top:var(--r-4);padding-top:var(--r-3);border-top:var(--strich) solid var(--linie-fein)}
/* Hinzufügen: Knöpfe je Typ nebeneinander */
.hinzufuegen{margin-top:var(--r-3)}
/* Einklappbare Karte (Benutzer anlegen) */
details.klappkarte>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--r-2)}
details.klappkarte>summary::-webkit-details-marker{display:none}
details.klappkarte>summary h2{margin:0}
details.klappkarte>summary::before{content:"";width:.5em;height:.5em;border-right:2px solid var(--titel);border-bottom:2px solid var(--titel);transform:rotate(-45deg);transition:transform var(--dauer-1)}
details.klappkarte[open]>summary::before{transform:rotate(45deg)}
details.klappkarte[open]>summary{margin-bottom:var(--r-4)}
details.klappkarte>summary:focus-visible{outline:var(--fokus) solid var(--akzent);outline-offset:4px}
/* Benutzer verwalten: Knopf in der Zeile, Bereich in der Zeile darunter */
button.aufklapp .pfeil{display:inline-block;width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-.2em 0 0 .5em;transition:transform var(--dauer-1)}
button.aufklapp[aria-expanded=true]{border-color:var(--akzent);color:var(--akzent)}
button.aufklapp[aria-expanded=true] .pfeil{transform:rotate(-135deg);margin-top:.2em}
tr.anhang>td{background:var(--flaeche-2);padding:var(--r-4)}
.verwalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:var(--r-4)}
.verwalten section{background:var(--flaeche);border:var(--strich) solid var(--linie);padding:var(--r-3) var(--r-4)}
@media (max-width:40rem){
  /* Kopf: viele Reiter (System) bleiben lesbar und lassen sich seitlich schieben */
  header nav{overflow-x:auto;scrollbar-width:thin}
  header nav a{flex:1 0 auto}
  .kennzahlen li{flex:1 1 40%}
  .aktionsleiste>.btn,.aktionsleiste>button{flex:1 1 0}
  .ungespeichert{flex:1 1 100%}
  tr.anhang>td{padding:var(--r-2)}
  .verwalten{grid-template-columns:1fr}
  .verwalten .actions>button{flex:1 1 100%}
  /* Speichern oben nur auf breiten Bildschirmen, auf dem Handy steht es in der Leiste unten */
  .nur-breit{display:none}
  /* Bis zu drei Reiter in einer Zeile, mehr im Raster mit zwei Spalten */
  .tabs:not(.unter):not(:has(>:nth-child(4))){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
}

/* Nachrichteneditor (Seite eines Benachrichtigungswegs, _message_editor.html): Felder links, Variablen rechts (auf
   schmalen Bildschirmen darunter), Vorschau im Aussehen des Kanals. Feste Teile der Meldung grau mit Balken. */
.vorlage-kopf{align-items:flex-start;flex-wrap:wrap}
.vorlage-kopf .sub{margin-bottom:0}
.vorlage{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:var(--r-5);align-items:start}
.vorlage-felder label.f+input,.vorlage-felder label.f+textarea{margin-top:0}
.vorlage-felder label.f.gap{margin-top:var(--r-4)}
.vorlage-felder textarea{font-family:var(--schrift-daten);font-size:var(--t-s);line-height:1.55;resize:vertical;min-height:10rem}
.vorlage-felder input[data-feld]{font-family:var(--schrift-daten);font-size:var(--t-s)}
.vorlage-felder [aria-invalid=true]{border-color:var(--alarm-linie)}
.feld-info{display:flex;justify-content:space-between;gap:var(--r-3);margin-top:var(--r-1)}
.zaehler{white-space:nowrap;color:var(--text-2);font-variant-numeric:tabular-nums}
.zaehler.zu-lang{color:var(--alarm);font-weight:700}
ul.befunde{list-style:none;margin:var(--r-1) 0 0;padding:0}
ul.befunde:empty{display:none}
ul.befunde li{border-left:5px solid var(--alarm-linie);padding:4px 8px;margin-top:4px;font-size:var(--t-s);color:var(--alarm);background:var(--flaeche-2)}
details.hilfe{margin-top:var(--r-4);font-size:var(--t-s)}
details.hilfe summary{cursor:pointer;color:var(--akzent-hell);font-weight:600}
details.hilfe ul{margin:var(--r-2) 0 0;padding-left:1.2rem} details.hilfe li{margin:3px 0}
.variablen{border:var(--strich) solid var(--linie);background:var(--flaeche);position:sticky;top:var(--r-4)}
.variablen-kopf{padding:var(--r-2) var(--r-3);border-bottom:var(--strich) solid var(--linie-fein)}
.variablen-kopf input{margin-top:2px;width:100%;min-height:calc(var(--ziel-basis) + var(--ziel))}
.variablen>p.klein{margin:0;padding:var(--r-1) var(--r-3);font-size:var(--t-xs)}
.variablen-liste{max-height:34rem;overflow:auto;padding-bottom:var(--r-2)}
.var-gruppe>summary{cursor:pointer;padding:var(--r-2) var(--r-3);font-weight:700;font-size:var(--t-s);color:var(--titel);background:var(--flaeche-2);border-top:var(--strich) solid var(--linie-fein)}
.var-gruppe>summary small{font-weight:400;color:var(--text-2);margin-left:4px}
.var-gruppe ul{list-style:none;margin:0;padding:0}
button.var{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;justify-content:stretch;gap:1px;width:100%;min-height:0;padding:6px var(--r-3);border:0;border-bottom:var(--strich) solid var(--linie-fein);background:none;text-align:left;font-weight:400}
button.var code{font-size:var(--t-xs);color:var(--akzent)}
button.var .var-text{font-size:var(--t-xs);color:var(--text)}
button.var .var-bsp{font-size:var(--t-xs);color:var(--text-2);overflow-wrap:anywhere}
@media (hover:hover){button.var:hover{background:var(--flaeche-2);color:var(--text)} button.var:hover code{text-decoration:underline}}
button.var:focus-visible{outline-offset:-3px}
.vorschau{margin-top:var(--r-5);border-top:var(--strich) solid var(--linie);padding-top:var(--r-4)}
.vorschau-kopf{display:flex;gap:var(--r-3);align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--r-3)}
.vorschau-kopf h3{margin:0}
.vorschau-faelle{display:flex;gap:4px;flex-wrap:wrap}
.vorschau-faelle button{min-height:0;padding:.3rem .7rem;font-size:var(--t-xs);font-weight:400}
.vorschau-faelle button[aria-selected=true]{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent);font-weight:700}
.vorschau-inhalt{border:var(--strich) solid var(--linie-stark);background:var(--flaeche);max-width:42rem;transition:opacity var(--dauer-1)}
.vorschau.laedt .vorschau-inhalt{opacity:.6}
.vorschau-inhalt .zeile{min-height:1.5em;white-space:pre-wrap;overflow-wrap:anywhere}
.vorschau-inhalt .zeile.fest{color:var(--text-2);border-left:3px solid var(--linie);padding-left:6px;margin-left:-9px}
.vorschau-inhalt .leer-hinweis{color:var(--alarm);font-style:italic}
dl.mail-kopf{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;padding:var(--r-3) var(--r-4);border-bottom:var(--strich) solid var(--linie);background:var(--flaeche-2);font-size:var(--t-s)}
dl.mail-kopf dt{color:var(--text-2)} dl.mail-kopf dd{margin:0}
.mail-text,.mitteilung-text{padding:var(--r-3) var(--r-4) var(--r-3) calc(var(--r-4) + 9px);font-family:var(--schrift-daten);font-size:var(--t-s);line-height:1.55}
.mitteilung-titel{padding:var(--r-3) var(--r-4) 0;font-weight:700;font-size:var(--t-m)}
.mitteilung-ort{padding:var(--r-1) var(--r-4) 0;font-size:var(--t-s)}
.vorschau-divera{border-left:5px solid var(--akzent)}
.test-ergebnis{font-size:var(--t-s);font-weight:700}
.test-ergebnis.ok{color:var(--text);border-left:5px solid var(--gut-linie);padding-left:8px}
.test-ergebnis.err{color:var(--alarm);border-left:5px solid var(--alarm-linie);padding-left:8px}
@media (max-width:52rem){
  .vorlage{grid-template-columns:minmax(0,1fr)}
  .variablen{position:static}
  .variablen-liste{max-height:22rem}
}