/* WatchMod im Aussehen von winku.de.
   EIGENE DATEI statt eines Verweises auf winku.de: Die Content-Security-Policy erlaubt
   Stilvorlagen nur vom eigenen Host, und watchmod.winku.de ist gegenüber winku.de ein
   fremder. Ein Verweis dorthin würde STILL verworfen — die Seite fiele auf die
   Systemschrift zurück, ohne dass irgendwo ein Fehler steht (genau so bei Vidono passiert).

   KOPFLEISTE UND KNÖPFE SIND VON VIDONO ABGEMESSEN (11.09.2026, Faddi: „exakt gleich").
   Die Werte stammen aus den Regeln, die auf vidono.de tatsächlich greifen (style.css +
   vidono-winku.css, im Browser ausgelesen) — nicht aus dem Gedächtnis. Wer hier eine Zahl
   ändert, ändert sie auch dort, sonst laufen die beiden Seiten wieder auseinander. */
/* ══ GESTALTUNGSSYSTEM — Bausteine zum Wiederverwenden (14.10.2026) ═══════════════════════
   Neue Seiten bauen aus diesen Teilen; eigene Klassen nur, wenn es wirklich nichts gibt.
   Farben/Abstände nur über die Variablen in :root (--s1…--s10, --r/--r-m/--r-s, --ok/--warn/--err).

   GRUNDTEILE (gab es schon, gelten weiter)
     .karte [.ohne-innen .innen .gefahr-rand]   Fläche für einen Abschnitt
     .abschnitt-kopf[.mit-tat]                  Seitenkopf: h1 + Erklärung, Haupttat rechts
     .btn [.primar|.btn-primary] [.gefahr] [.btn-sm|.klein]   Knöpfe
     .pille [.ok .warn .schlecht .modul]        kleine Zustandsmarke
     .meldung [.ok .warn .schlecht]             Hinweis im Seitenfluss
     .chips > .chip                             Mehrfachauswahl als Marken
     .ks                                        Schalter-Kachel (Chat-Modi)
     .schalter / .umschalter                    Kästchen / großer An-Aus-Schalter
     dialog.fenster > .fenster-karte            Fenster (Kopf, Inhalt, Fuß)
     .muted .leise .klein .nowrap .rechts       Text-Helfer
     .tabelle (in .tabelle-rahmen)              Tabellen, waagerecht rollbar

   NEU
     .kennzahlen > .kennzahl                    Kennzahl-Kachel: .kz-titel .kz-wert .kz-delta[.gut|.schlecht]
                                                 + .mini-verlauf (Säulen, Höhe über .h0…h100 in 5er-Schritten)
     .diagramm                                  Rahmen für ein Diagramm: .diagramm-kopf (Titel + .legende),
                                                 .saeulen > .saeule > .s-teil.d1/.d2 (+ .tip beim Zeigen), .achse
                                                 Inline-SVG darin: Klassen .d-gitter .d1 .d2 statt Farben im Markup
     .zeitleiste > li                           senkrechte Ereignisliste mit Punkt (.z-bann .z-timeout .z-ok)
     .leer                                      Leer-Zustand: .leer-zeichen (SVG), h3, p, .knopf-reihe
     details.was-ist-das                        aufklappbare Erklärung „Was ist das?"
     .reiterleiste > .reiter[.aktiv|aria-current]  Reiter
     .ring (SVG, pathLength=100)                Fortschrittsring: .ring-spur + .ring-wert mit stroke-dasharray-ATTRIBUT
     .toast-stapel > .toast[.ok|.schlecht]      Rückmeldung oben rechts (macht public/js/watchmod.js aus .meldung[data-toast])
     .laedt / .kreisel                          Ladezustand (Schimmer bzw. drehender Kreis), .btn[aria-busy=true]
     .live-marke / .live-punkt                  „LIVE"-Anzeige
     .w0…w100                                   Breite in 5er-Schritten (Balken ohne style-Attribut)
     .gr-20 … .gr-64                            Größe von .v-avatar ohne style-Attribut
     kbd                                        Tastenkürzel

   KEINE style-ATTRIBUTE in neuem Markup: Eine strenge Content-Security-Policy verwirft sie
   still. Größen, Breiten und Höhen kommen deshalb über die Klassen oben.
   ════════════════════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/inter-800.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-500.woff2") format("woff2")}
:root{
  --bg:#0b0f19;
  /* deckend, siehe unten */
  --flaeche:#121726; --flaeche-2:#171d2e; --flaeche-3:#1e2538; --feld:#0e1320;
  --karte:var(--flaeche); --rand:#222a3d; --rand-stark:#2b3449; --raster:rgba(255,255,255,.05);
  --text:#e5e7eb; --muted:#9ca3af; --a1:#7c3aed; --a2:#06b6d4; --a3:#f472b6; --warn:#f59e0b; --err:#ef4444;
  --r:18px;
  /* ── Gestaltungssystem (14.10.2026) ──
     --leise ersetzt das alte #6b7280 für Gruppennamen und Tabellenköpfe: Das hatte auf den
     Flächen nur 3,7:1 Kontrast und war damit unter der Lesbarkeitsgrenze (4,5:1). */
  --leise:#8d97aa; --akzent-text:#c4b5fd; --link:#a78bfa;
  --ok:#22c55e; --ok-text:#86efac; --ok-flaeche:#0f2a1c; --ok-rand:#1f6f43;
  --warn-text:#fcd34d; --warn-flaeche:#2a1f0b; --warn-rand:#7a5212;
  --err-text:#fca5a5; --err-flaeche:#2a1111; --err-rand:#7f2525;
  --live:#ef4444; --live-flaeche:#dc2626; /* Weiß auf #ef4444 hat nur 3,8:1 — die Marke mit Schrift nimmt das dunklere Rot (4,8:1). */
  /* Diagrammfarben — mit dem Palettenprüfer gegen --flaeche gemessen (Helligkeit, Farbsehschwäche,
     Kontrast ≥ 3:1). Nie als Textfarbe; Text bleibt in --text/--muted. */
  --d1:#8b5cf6; --d2:#0ea5c6; --d-leise:#323b55;
  --r-m:14px; --r-s:10px; --r-xs:6px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --fokus:0 0 0 3px rgba(167,139,250,.6);
  --schatten:0 10px 30px rgba(0,0,0,.28);
  --schatten-hoch:0 30px 80px rgba(0,0,0,.55);
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
/* hidden muss gewinnen: Regeln wie .stufe-sek{display:flex} überstimmen sonst das
   hidden-Attribut, und das Feld bleibt sichtbar, obwohl das Skript es versteckt. */
[hidden]{display:none!important}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.6;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--raster) 1px,transparent 1px),linear-gradient(90deg,var(--raster) 1px,transparent 1px);
  background-size:60px 60px;-webkit-mask-image:radial-gradient(#000 30%,transparent 75%);
  mask-image:radial-gradient(#000 30%,transparent 75%)}
body::after{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;filter:blur(30px);
  background:radial-gradient(520px 520px at 8% -6%,rgba(124,58,237,.45),transparent 70%),
             radial-gradient(460px 460px at 96% 104%,rgba(6,182,212,.4),transparent 70%),
             radial-gradient(320px 320px at 58% 42%,rgba(244,114,182,.22),transparent 70%)}
a{color:inherit;text-decoration:none}
h1{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin-bottom:2px}
h2{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;line-height:1.35;margin-bottom:10px}
h3{font-size:1rem;font-weight:700;line-height:1.35}
.muted{color:var(--muted)} .klein{font-size:.84rem} .leise{color:var(--leise)}
/* Überzeile über einer Überschrift („Schritt 1", „Kanal"): klein, gesperrt, Akzentfarbe. */
.ueberzeile{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--akzent-text);margin-bottom:6px}
kbd{display:inline-block;min-width:20px;padding:1px 6px;border:1px solid var(--rand-stark);border-bottom-width:2px;border-radius:6px;
  background:var(--flaeche-2);color:var(--muted);font:600 .72rem/1.5 Inter,system-ui,sans-serif;text-align:center;white-space:nowrap}
/* TASTATUR: Jeder bedienbare Teil zeigt beim Tabben einen deutlichen Ring. Nur bei
   :focus-visible — ein Mausklick soll keinen Kasten hinterlassen. */
:where(a,button,summary,select,input,textarea,[tabindex]):focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
.btn:focus-visible,.sl-link:focus-visible,.chip input:focus-visible + span{outline:none;box-shadow:var(--fokus)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
html{scroll-behavior:smooth}
.warn-text{color:#fca5a5}
code{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:.85em;background:var(--flaeche-3);padding:1px 6px;border-radius:6px;white-space:nowrap}

/* ── Kopfleiste (= vidonoKopfleiste) ─────────────────────────────────────────────── */
.navbar{background:transparent;border-bottom:1px solid var(--rand)}
.nav-content{max-width:1100px;margin:0 auto;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.nav-content .logo{font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--text);display:flex;align-items:center;gap:10px}
.logo-mark{width:36px;height:36px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--a1),var(--a2));box-shadow:0 8px 24px rgba(124,58,237,.35)}
.logo-mark svg{width:22px;height:22px;display:block}
.logo-mark-watchmod{background:linear-gradient(135deg,var(--a1),var(--a3));box-shadow:0 8px 24px rgba(244,114,182,.3)}
.v-marke{display:flex;align-items:center;gap:16px;min-width:0}
/* Trennstrich zwischen Winku und WatchMod (Faddi, 12.09.2026). Vidono hatte ihn einmal und
   hat ihn wieder entfernt — dort standen die Marken enger beieinander. Hier sagt er: Links
   geht es zurück nach Winku, rechts steht der Dienst. */
.v-marke .logo + .logo{padding-left:16px;border-left:1px solid var(--rand-stark);align-self:stretch}
.v-heim{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;font-weight:800;font-size:1.25rem;
  letter-spacing:-.02em;color:var(--text);transition:transform .2s,opacity .2s}
.v-heim:hover{transform:translateY(-1px);opacity:.9}
.nav-links{display:flex;gap:15px;align-items:center}
/* Sprachumschalter — dieselben Maße wie auf winku.de und vidono.de. */
.lang-switch{display:inline-flex;flex:0 0 auto;border:1px solid var(--rand-stark);border-radius:999px;
  overflow:hidden;background:var(--flaeche-2)}
.lang-opt{padding:7px 11px;font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:.03em;transition:background .15s,color .15s}
.lang-opt:hover{color:var(--text)}
.lang-opt.active{background:linear-gradient(135deg,var(--a1),var(--a2));background-origin:border-box;color:#fff}
@media(max-width:900px){.lang-switch{order:-1}}
/* Konto-Pille Maß für Maß wie im Kopf von winku.de (btn btn-ghost btn-sm nav-user, avatar-xs): 9/18 px, 7 px Abstand,
   Bild 20 px mittig — auf jeder Winku-Seite gleich (Faddi 19.09.2026). */
.btn.v-konto{gap:7px}
.v-konto-name{display:inline-block;max-width:min(180px,32vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.v-avatar{--gr:96px;width:var(--gr);height:var(--gr);flex:0 0 auto;display:inline-grid;place-items:center;overflow:hidden;border-radius:50%;
  background:linear-gradient(135deg,var(--a1),var(--a2));vertical-align:middle}
.v-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.v-avatar b{font-size:calc(var(--gr) * .42);font-weight:800;color:#fff;line-height:1}
@media(min-width:721px){
  .nav-content{flex-wrap:nowrap}
  .nav-links{flex-wrap:nowrap;min-width:0}
  .v-marke{flex:0 0 auto}
  .v-konto-name{max-width:120px}
}
@media(max-width:900px){
  .nav-content{padding:14px 18px}
  .v-heim-text{display:none}
  .v-heim{padding:3px;gap:0}
  .v-marke{gap:8px}
  .v-marke .logo + .logo{padding-left:8px}
  .nav-links{width:100%;justify-content:flex-start;gap:8px}
  .nav-content .logo{font-size:1.1rem}
}

.wrap{max-width:1100px;margin:0 auto;padding:26px 24px 60px}
@media(max-width:900px){.wrap{padding:22px 18px 50px}}
.kopfzeile{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}

.karte.mitte{text-align:center;padding:32px 24px}
.karte.mitte p{margin-top:10px}

/* ── Knöpfe (= .btn / .btn-sm / .btn-primary / .btn-outline auf Vidono) ────────────────
   Beide Namen gelten: die von Vidono in der Kopfleiste, die deutschen in den Seiten.

   KEIN DURCHSICHTIGER RAND UNTER EINEM VERLAUF. Der Hintergrund reicht bis unter den Rand
   (background-clip: border-box), fängt aber erst innerhalb davon an (background-origin:
   padding-box) — der Verlauf wird an den Kanten wiederholt, und der Knopf bekommt links
   einen türkisen und rechts einen violetten Saum. Das war der „kaputte Rand" vom
   11.09.2026. Vidono setzt border:0 — hier auch, und der fehlende Pixel wird im
   Innenabstand ausgeglichen, damit Verlaufs- und Randknöpfe gleich hoch bleiben. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;
  font-family:inherit;font-weight:600;font-size:.95rem;line-height:1.6;cursor:pointer;color:var(--text);white-space:nowrap;
  border:1px solid var(--rand);background:var(--karte);
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--flaeche-3);transform:translateY(-2px)}
.btn.btn-sm,.btn.klein{padding:9px 18px;font-size:.85rem}
.btn.btn-primary,.btn.primar{background:linear-gradient(135deg,var(--a1),var(--a2));border:0;color:#fff;
  padding:13px 23px;box-shadow:0 10px 30px rgba(124,58,237,.35)}
.btn.btn-sm.btn-primary,.btn.klein.primar,.btn.btn-sm.primar{padding:10px 19px}
.btn.btn-primary:hover,.btn.primar:hover{box-shadow:0 14px 40px rgba(124,58,237,.5)}
.btn.gefahr{border-color:rgba(239,68,68,.45);color:#fca5a5;background:transparent}
.btn.gefahr:hover{background:rgba(239,68,68,.12)}

/* ══ DECKENDE FLÄCHEN (11.09.2026, Faddi: „stop mit diesen durchsichtigen Hintergründen") ══
   Karten, Seitenleiste und Eingabefelder waren halbdurchsichtig — darunter liefen das
   Gitter und die Farbwolken des Hintergrunds durch, und jede Karte sah je nach Stelle
   anders aus. Jetzt sind alle Flächen deckend; der Hintergrund bleibt nur in den Lücken
   sichtbar. Die Werte darunter sind die Farben, die die alten durchsichtigen Flächen auf
   dem dunklen Grund ungefähr ergaben — das Aussehen bleibt, das Durchscheinen nicht. */

/* ── Formularfelder ─────────────────────────────────────────────────────────────── */
input,textarea,select{width:100%;font:inherit;color:var(--text);background:var(--feld);
  border:1px solid var(--rand-stark);border-radius:10px;padding:9px 12px;margin:6px 0}
input::placeholder,textarea::placeholder{color:#7d8698}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--a1);box-shadow:0 0 0 3px rgba(124,58,237,.25)}
/* Die Pfeilchen an Zahlenfeldern gehören dem Browser und sehen überall anders aus — in
   schmalen Feldern drängeln sie sich über den Text. Tippen und Pfeiltasten bleiben. */
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[readonly]{opacity:.7}
textarea{resize:vertical;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:.86rem;line-height:1.55}
select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.feld{display:block;font-size:.84rem;color:var(--muted);margin-top:10px}
.feld:first-child{margin-top:0}
.felder{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.felder .feld{flex:1;min-width:140px;margin-top:6px}
.felder.schmal .feld{flex:0 1 220px}
/* Gleich breite Spalten statt gewachsener Zeilen: Bei drei Feldern in zwei Spalten standen
   die Eingaben sonst je nach Länge der Beschriftung auf verschiedenen Höhen. */
.felder.gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 14px}
.felder.gitter .feld{margin-top:0}
.klein-feld{display:flex;align-items:center;gap:8px;margin:0}
.klein-feld input,.klein-feld select{width:96px;margin:0}
.mit-vorsatz{display:flex;align-items:stretch}
/* NUR das erste Kind ist der Vorsatz („@"). Ohne > und :first-child traf die Regel jedes
   span in der Zeile — seit die Vorschlagsliste darin hängt, sahen alle Treffer aus wie
   abgeschnittene Eingabefelder (12.09.2026). */
.mit-vorsatz > span:first-child{display:grid;place-items:center;padding:0 12px;margin:6px 0;border:1px solid var(--rand-stark);border-right:0;
  border-radius:10px 0 0 10px;background:var(--flaeche-2);color:var(--muted);font-family:"JetBrains Mono",monospace}
.mit-vorsatz input{border-radius:0 10px 10px 0}

/* Eigenes Kästchen: Der Systemstil ist hell und passt hier nirgends hin. Zwei Fallen: mit
   appearance:none gilt die allgemeine input-Regel, deren Innenabstand die Größe zerschießt
   (deshalb padding:0), und ::before gibt es an einem <input> nicht — der Haken ist ein
   Hintergrundbild. */
.schalter{display:flex;align-items:flex-start;gap:10px;margin:10px 0;cursor:pointer;font-size:.92rem;color:var(--text)}
.schalter > span{display:flex;flex-direction:column;gap:1px}
.schalter input{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-width:18px;margin:2px 0 0;padding:0;
  border:1px solid var(--rand-stark);border-radius:6px;background:var(--feld);cursor:pointer}
.schalter input:checked{border-color:transparent;background-origin:border-box;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"),
    linear-gradient(135deg,var(--a1),var(--a2));
  background-repeat:no-repeat;background-position:center;background-size:12px 12px,100% 100%}
.schalter input[type=radio]{border-radius:50%}
.schalter input[type=radio]:checked{border-color:transparent;background:linear-gradient(135deg,var(--a1),var(--a2));
  background-origin:border-box;box-shadow:inset 0 0 0 3px var(--feld)}
.schalter.klein{font-size:.86rem;margin:0;align-items:center}
.schalter.klein input{margin:0}
.frei{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--rand)}

/* Der große An/Aus-Schalter oben rechts in jeder Modul-Karte. */
.umschalter{position:relative;display:inline-block;width:44px;height:26px;flex:0 0 auto;cursor:pointer}
.umschalter input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.umschalter span{position:absolute;inset:0;border-radius:999px;background:var(--flaeche-3);border:1px solid var(--rand-stark);transition:background .2s}
.umschalter span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#9ca3af;transition:transform .2s,background .2s}
.umschalter input:checked + span{background:linear-gradient(135deg,var(--a1),var(--a2));
  background-origin:border-box;border-color:transparent}
.umschalter input:checked + span::after{transform:translateX(18px);background:#fff}
.umschalter input:focus-visible + span{box-shadow:0 0 0 3px rgba(124,58,237,.35)}

/* ── Karten ─────────────────────────────────────────────────────────────────────── */
.karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--r);padding:20px 22px;margin-bottom:16px;scroll-margin-top:84px}
/* Sprung aus der Befehlspalette (#caps …): Die Zielkarte leuchtet kurz auf, damit man sieht, wo man gelandet ist. */
.karte:target,.ziel-leuchtet{animation:aufleuchten 1.8s ease-out}
@keyframes aufleuchten{0%,35%{box-shadow:0 0 0 2px rgba(167,139,250,.9),0 0 0 8px rgba(124,58,237,.18)}100%{box-shadow:0 0 0 0 transparent}}
.karte.ohne-innen{padding:0;overflow:hidden}
.karte .innen{padding:18px 22px}
.karte.gefahr-rand{border-color:rgba(239,68,68,.35)}
.karte-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.karte-kopf h2{margin:0}
.karte-kopf > a{white-space:nowrap}
.modul-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
.modul-kopf h3{font-size:1rem;margin:0 0 2px}
.modul-kopf p{max-width:62ch}
.unterteil{margin-top:12px;padding-top:4px;border-top:1px solid var(--rand)}
.karte > .modul-kopf:last-child{margin-bottom:0}
/* Die Haupttat einer Seite steht oben rechts neben der Überschrift (Faddi, 12.09.2026):
   Man sieht sie sofort und muss nicht ans Ende einer langen Seite scrollen, um zu speichern. */
.abschnitt-kopf.mit-tat{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.abschnitt-kopf.mit-tat > div{min-width:0}
.abschnitt-kopf.mit-tat .btn{flex:0 0 auto;position:sticky;top:16px}
/* Am Handy steht die Haupttat unter dem Text — daneben blieb für die Erklärung nur ein Streifen. */
@media(max-width:640px){.abschnitt-kopf.mit-tat{flex-wrap:wrap;gap:12px}.abschnitt-kopf.mit-tat > div{flex:1 1 100%}
  .abschnitt-kopf.mit-tat .btn{position:static}}
.modul-tat{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.speichern-leiste{display:flex;justify-content:flex-end;margin:4px 0 24px}
.knopf-reihe{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.link{color:var(--link);text-underline-offset:3px} .link:hover{color:#c4b5fd;text-decoration:underline}
.rechts{text-align:right} .nowrap{white-space:nowrap}
form.inline{display:inline}

.raster-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.raster-2 .karte{margin-bottom:0}
.raster-2 + .speichern-leiste{margin-top:16px}
.raster-seite{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:16px;align-items:start}
@media(max-width:1000px){.raster-2,.raster-seite{grid-template-columns:minmax(0,1fr)}}

/* ── Die Kanal-Seite: Seitenleiste + Inhalt ─────────────────────────────────────────
   SEIT 14.10.2026 mit 20 Einträgen: Die Leiste ist so hoch wie das Fenster und rollt in sich
   (sonst verschwand „Einstellungen" unter dem unteren Rand, solange die Seite kurz war).
   Oben der Kanalwechsler und die Suche (Strg+K), darunter die Gruppen. */
.kanal-layout{display:grid;grid-template-columns:256px minmax(0,1fr);gap:24px;align-items:start}
.seitenleiste{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--r);padding:12px;
  display:flex;flex-direction:column;gap:10px}
.sl-schliessen{display:none}

/* Kanalwechsler: ein <details>, damit er ohne Skript aufgeht. */
.kanalwahl{position:relative}
.kanalwahl > summary{list-style:none;display:flex;align-items:center;gap:11px;padding:8px;border-radius:12px;cursor:pointer;
  border:1px solid transparent;transition:background .15s,border-color .15s}
.kanalwahl > summary::-webkit-details-marker{display:none}
.kanalwahl > summary:hover,.kanalwahl[open] > summary{background:var(--flaeche-2);border-color:var(--rand)}
.kanalwahl-pfeil{margin-left:auto;color:var(--leise);transition:transform .15s;flex:0 0 auto}
.kanalwahl[open] .kanalwahl-pfeil{transform:rotate(180deg)}
.sl-kanal-text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.sl-kanal-text b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;line-height:1.2}
.sl-kanal-marken{display:flex;gap:5px;flex-wrap:wrap}
.sl-avatar{position:relative;flex:0 0 auto}
/* Roter Punkt am Bild, solange der Kanal streamt — wie bei Twitch selbst. */
.sl-avatar .live-punkt{position:absolute;right:-2px;bottom:-2px;box-shadow:0 0 0 3px var(--flaeche)}
.kanalwahl-liste{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:var(--flaeche);
  border:1px solid var(--rand-stark);border-radius:14px;box-shadow:var(--schatten-hoch);padding:6px;max-height:60vh;overflow:auto}
.kanalwahl-eintrag{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:.9rem;min-height:44px}
.kanalwahl-eintrag:hover{background:var(--flaeche-3)}
.kanalwahl-eintrag[aria-current]{background:var(--flaeche-2)}
.kanalwahl-eintrag .zeile-text b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kanalwahl-haken{margin-left:auto;color:var(--akzent-text);flex:0 0 auto}
.kanalwahl-fuss{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--rand);margin-top:6px;padding:8px 4px 2px}
.kanalwahl-fuss a{flex:1 1 auto;text-align:center;font-size:.82rem;font-weight:600;padding:8px 10px;border-radius:10px;color:var(--muted)}
.kanalwahl-fuss a:hover{background:var(--flaeche-3);color:var(--text)}

/* Suchknopf — öffnet die Befehlspalette. Ohne Skript ein Link auf die Hilfe. */
.sl-suche{display:flex;align-items:center;gap:9px;width:100%;margin:0;padding:9px 10px;border-radius:10px;cursor:pointer;
  background:var(--feld);border:1px solid var(--rand-stark);color:var(--leise);font:inherit;font-size:.88rem;text-align:left}
.sl-suche:hover{border-color:#3a4560;color:var(--text)}
.sl-suche span{flex:1}
.sl-suche kbd{font-size:.68rem}

.sl-nav{display:flex;flex-direction:column}
.sl-gruppe{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--leise);padding:14px 10px 5px}
.sl-gruppe:first-child{padding-top:4px}
.sl-link{position:relative;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;color:var(--muted);font-size:.9rem;font-weight:500;
  transition:background .15s,color .15s}
.sl-link svg{flex:0 0 auto;opacity:.85}
.sl-link:hover{background:var(--flaeche-2);color:var(--text)}
/* Aktiv: Fläche, helle Schrift UND der Akzentstrich links — eins davon allein war zu leise. */
.sl-link.aktiv{background:var(--flaeche-3);color:#fff;font-weight:600}
.sl-link.aktiv::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--a1),var(--a2))}
.sl-link.aktiv svg{color:#a78bfa;opacity:1}
.sl-link .live-marke{margin-left:auto}
.inhalt{min-width:0}
.abschnitt-kopf{margin:2px 0 20px}
.abschnitt-kopf h1{margin-bottom:6px}
.abschnitt-kopf p{max-width:75ch}

/* Handy-Leiste über dem Inhalt: Menü (öffnet die Schublade) + Suche. */
.mobil-leiste{display:none}
.schublade-schleier{display:none}

@media(max-width:900px){
  .kanal-layout{grid-template-columns:minmax(0,1fr);gap:16px}
  .mobil-leiste{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:30;margin:-6px -18px 4px;padding:8px 18px;
    background:var(--bg);border-bottom:1px solid var(--rand)}
  .mobil-menue{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px 6px 6px;border-radius:12px;
    background:var(--flaeche);border:1px solid var(--rand);color:var(--text);font-weight:600;font-size:.92rem}
  .mobil-menue .mobil-titel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .mobil-menue svg{flex:0 0 auto;color:var(--muted)}
  .mobil-suche{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border-radius:12px;cursor:pointer;
    background:var(--flaeche);border:1px solid var(--rand);color:var(--muted)}
  /* DIE SEITENLEISTE WIRD ZUR SCHUBLADE (vorher eine waagerecht rollende Reiterzeile, in der
     bei 20 Einträgen niemand mehr etwas fand). Ohne Skript öffnet sie über :target. */
  .seitenleiste{position:fixed;inset:0 auto 0 0;top:0;z-index:70;width:min(320px,88vw);max-height:none;height:100%;
    border-radius:0 18px 18px 0;border-left:0;padding:14px;transform:translateX(-104%);visibility:hidden;
    transition:transform .22s ease,visibility 0s linear .22s;box-shadow:var(--schatten-hoch)}
  .seitenleiste:target,.seitenleiste.offen{transform:none;visibility:visible;transition:transform .22s ease}
  .seitenleiste:target ~ .schublade-schleier,.seitenleiste.offen ~ .schublade-schleier{display:block;position:fixed;inset:0;z-index:65;
    background:rgba(5,8,15,.66)}
  .sl-schliessen{display:grid;place-items:center;position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:12px;
    color:var(--muted);font-size:1.1rem}
  .sl-schliessen:hover{background:var(--flaeche-3);color:var(--text)}
  .kanalwahl{margin-right:48px}
  .sl-link{min-height:44px;font-size:.95rem}
  .sl-suche{min-height:44px}
}
body.schublade-offen{overflow:hidden}

/* ── Übersicht ──────────────────────────────────────────────────────────────────── */
.status-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.status{display:flex;align-items:center;gap:12px;background:var(--flaeche);border:1px solid var(--rand);border-radius:14px;padding:14px 16px}
.status div{display:flex;flex-direction:column;line-height:1.3}
.punkt{width:10px;height:10px;border-radius:50%;background:#4b5563;flex:0 0 auto}
.status.gut .punkt{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.status.mittel .punkt{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.18)}
.status.schlecht .punkt{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.18)}
.kacheln{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kachel{background:var(--flaeche);border:1px solid var(--rand);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column}
.kachel b{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.kachel span{font-size:.78rem;color:var(--muted)}
@media(max-width:1100px){.kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.kacheln,.status-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.zwei{grid-template-columns:minmax(0,1fr)}}
.an-liste{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 18px}
.an-liste li{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--muted)}
.an-liste li .muted{margin-left:auto}
.an-liste li.an{color:var(--text)}
.an-liste li.an .punkt{background:#22c55e}
.an-liste .punkt{width:8px;height:8px}
.balken-liste{display:flex;flex-direction:column;gap:8px}
.balken-zeile{display:grid;grid-template-columns:120px 1fr 36px;align-items:center;gap:10px;font-size:.88rem}
.balken{height:8px;border-radius:999px;background:var(--flaeche-3);overflow:hidden}
.balken i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--a1),var(--a2))}
.balken-zeile b{text-align:right}

/* ── Tabellen, Listen ───────────────────────────────────────────────────────────── */
.tabelle-rahmen{overflow-x:auto}
.tabelle{width:100%;border-collapse:collapse;font-size:.9rem}
.tabelle th{text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leise);
  padding:12px 16px;background:var(--flaeche-2);border-bottom:1px solid var(--rand)}
.tabelle td{padding:12px 16px;border-top:1px solid var(--rand);vertical-align:middle}
.karte:not(.ohne-innen) .tabelle td{padding:10px 0}
.karte:not(.ohne-innen) .tabelle td + td{padding-left:14px}
.tabelle tr:first-child td{border-top:0}
.tabelle thead + tr td,.tabelle thead ~ tr:first-of-type td{border-top:0}
.tabelle tr.aus td{opacity:.5}
.tabelle .btn-sm{padding:6px 12px;font-size:.8rem}
.tabelle form.inline + form.inline,.tabelle a + form.inline{margin-left:4px}
.zitat{margin-top:4px;color:var(--muted);font-size:.84rem;max-width:520px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.filterleiste{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filterleiste input{flex:1 1 220px;width:auto;margin:0}
.filterleiste select{flex:0 1 200px;width:auto;margin:0}
/* Das Kästchen „nur Auffällige" fiel unter die Regel für das Suchfeld und wurde zum leeren Balken. */
.filterleiste input[type=checkbox]{flex:0 0 auto;width:18px}
.filterleiste .schalter{flex:0 0 auto;white-space:nowrap;min-height:40px}
.rechts-weg{margin-left:auto}
.seiten{display:flex;justify-content:center;align-items:center;gap:14px;margin:6px 0 20px}

.stufen{display:flex;flex-direction:column;gap:8px;margin:4px 0 14px}
.modus{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;
  padding:10px 0;border-top:1px solid var(--rand)}
.raster-2 .modus:nth-child(-n+2){border-top:0}
.modus .klein-feld{margin-top:6px}
.modus .klein-feld input,.modus .klein-feld select{width:90px}

/* ── Kanalliste ─────────────────────────────────────────────────────────────────── */
.kanal-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.kanal-karte{display:flex;align-items:center;gap:14px;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--r);
  padding:16px 18px;transition:border-color .15s,transform .15s}
.kanal-karte:hover{border-color:rgba(124,58,237,.55);transform:translateY(-2px)}
.zeile-text{flex:1;min-width:0} .zeile-text b{display:block} .zeile-text span{display:block}

/* ── Pillen, Meldungen, Fuß ─────────────────────────────────────────────────────── */
.pille{display:inline-block;font-size:.72rem;font-weight:600;padding:2px 10px;border-radius:999px;border:1px solid var(--rand-stark);color:var(--muted);background:var(--flaeche-2);white-space:nowrap}
.pille.ok{border-color:#1f6f43;background:#0f2a1c;color:#86efac}
.pille.warn{border-color:#7a5212;background:#2a1f0b;color:#fcd34d}
.pille.schlecht{border-color:#7f2525;background:#2a1111;color:#fca5a5}
/* Befehle: Fenster „Module" und leere Liste (13.09.2026) */
.modul-gruppe{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:18px 0 8px}
.modul-gruppe:first-of-type{margin-top:10px}
.modul-zeile{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:12px 14px;margin-bottom:8px;
  border:1px solid var(--rand);border-radius:14px;background:var(--flaeche-2)}
.modul-zeile.drin{border-color:rgba(124,58,237,.45);background:rgba(124,58,237,.08)}
.modul-text{min-width:0}
.modul-text .muted.klein{margin-top:3px}
.modul-knoepfe{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex:0 0 auto}
@media (max-width:640px){.modul-zeile{flex-direction:column;align-items:stretch}.modul-knoepfe{justify-content:flex-start;flex-wrap:wrap}}
.pille.modul{border-color:rgba(124,58,237,.45);color:#c4b5fd;background:rgba(124,58,237,.1)}
.leer-befehle{padding:34px 24px;text-align:center}
.leer-befehle .knopf-reihe{justify-content:center;margin-top:16px}
.abschnitt-kopf .knopf-reihe{flex:0 0 auto}
.vorlage-schalter{align-items:center;padding:4px 0}
.vorlage-schalter > span:first-child .klein{font-weight:400}
.meldung{border-radius:14px;padding:12px 16px;margin-bottom:16px;border:1px solid var(--rand-stark);background:var(--flaeche)}
.meldung.ok{border-color:#1f6f43;background:#0f2219}
.meldung.schlecht{border-color:#7f2525;background:#241010}
.meldung.warn{border-color:#7a5212;background:#231a0a}

footer{border-top:1px solid var(--rand);padding:24px 22px;text-align:center;color:var(--muted);font-size:.85rem;margin-top:20px}
footer a:hover{color:var(--text)}

/* Auf dem Handy umbrechen statt rechts abschneiden: vier Knöpfe passen nicht in 375 px,
   und ein Abmelden-Knopf halb außerhalb des Bildes ist keiner. */
@media(max-width:720px){.nav-links{flex-wrap:wrap}}

/* SAUM AN VERLAUFSFLÄCHEN (12.09.2026, zweiter Fall nach den Knöpfen am 11.09.).
   Ein Hintergrund beginnt normalerweise INNERHALB des Rands (background-origin: padding-box),
   wird aber bis unter den Rand gezeichnet (background-clip: border-box). Ist der Rand
   durchsichtig, sieht man dort die Wiederholung des Verlaufs — links ein türkiser, rechts ein
   violetter Saum. background-origin: border-box lässt den Verlauf am Rand beginnen; damit
   deckt eine Fläche den ganzen Knopf ab. Gilt für Marken, Kästchen und Schalter. */
/* background-origin gehört IN dieselbe Regel wie der Verlauf: Die Kurzschreibweise
   `background:` setzt es sonst wieder auf padding-box zurück — und der Saum ist zurück.
   Das war der Fehler beim zweiten und dritten Anlauf (12.09.2026). */

/* ── Listenfelder: Eingabe + Marken (siehe teil-liste.ejs) ──────────────── */
.listen-feld{margin-top:8px}
.liste-eingabe{display:flex;gap:8px;align-items:center}
.liste-eingabe input{margin:0}
.liste-eingabe .btn{flex:0 0 auto}
.marken-liste{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;min-height:24px;align-items:center}
.marke{display:inline-flex;align-items:center;gap:2px;padding:4px 4px 4px 12px;border-radius:999px;
  border:1px solid var(--rand-stark);background:var(--flaeche-2);font-size:.84rem;max-width:100%}
.marke > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marke.mit-bild{padding-left:4px;gap:7px}
.marke-weg{width:auto;margin:0;padding:0 7px;background:none;border:0;color:var(--muted);
  font-size:.78rem;line-height:1;cursor:pointer}
.marke-weg:hover{color:#fca5a5}

/* ── Eskalationsstufen ──────────────────────────────
   Jede Stufe zeigt Härte durch Zeichen und Randfarbe; eine nicht belegte Stufe tritt
   zurück. Die Zeichen liegen alle im Markup, sichtbar ist immer nur das passende. */
.stufe{display:grid;grid-template-columns:auto auto minmax(150px,190px) minmax(0,1fr);align-items:center;gap:10px 12px;
  padding:10px 14px;border:1px solid var(--rand);border-radius:12px;background:var(--flaeche-2);transition:border-color .15s}
.stufe select{margin:0}
.stufe-nr{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--flaeche-3);color:var(--muted);font-size:.78rem;font-weight:700}
.stufe-zeichen{display:grid;place-items:center;width:20px;height:20px;color:var(--muted)}
.stufe-zeichen svg{width:19px;height:19px;display:none}
.stufe[data-tat="loeschen"] .z-loeschen,.stufe[data-tat="timeout"] .z-timeout,
.stufe[data-tat="bann"] .z-bann,.stufe[data-tat=""] .z-aus{display:block}
.stufe[data-tat="timeout"]{border-color:rgba(245,158,11,.4)}
.stufe[data-tat="timeout"] .stufe-zeichen{color:#fcd34d}
.stufe[data-tat="bann"]{border-color:rgba(239,68,68,.45)}
.stufe[data-tat="bann"] .stufe-zeichen{color:#fca5a5}
.stufe[data-tat=""]{opacity:.5}
.stufe-sek{display:flex;align-items:center;gap:9px;margin:0;min-width:0;flex-wrap:wrap}
.stufe-sek input{width:100px;margin:0;flex:0 0 auto}
/* „= 10 Minuten" ist eine Einheit und darf nicht mitten im Wort umbrechen — im Fenster war
   sie auf zwei Zeilen zerrissen und schob die Zeile auseinander. */
.stufe-dauer{color:var(--muted);font-size:.8rem;white-space:nowrap}
.stufe-sek > span{white-space:nowrap}
@media(max-width:760px){.stufe{grid-template-columns:auto auto minmax(0,1fr);row-gap:8px}
  .stufe-sek{grid-column:1 / -1}}
/* Im Fenster ist weniger Platz als auf der Seite: dort bekommt die Dauer immer eine eigene Zeile. */
.fenster-inhalt .stufe{grid-template-columns:auto auto minmax(150px,1fr);row-gap:8px}
.fenster-inhalt .stufe-sek{grid-column:1 / -1;padding-left:2px}

/* ── Schalter-Kacheln (Chat-Modi) ───────────────────────────────────────────────────
   Ein Modus ist entweder an oder aus, und das soll man sehen, ohne den Schalter zu suchen:
   Die eingeschaltete Kachel bekommt Rand und Hintergrund in der Akzentfarbe. :has() faellt
   in sehr alten Browsern zurueck auf "alle Kacheln gleich" — dann bleibt der Schalter selbst
   die Auskunft, die Seite ist also nicht kaputt, nur weniger deutlich. */
/* auto-fit statt fester zwei Spalten: Eine einzelne Kachel (Befehle-Seite hat nur eine)
   nimmt sonst die halbe Breite ein und steht verloren daneben. */
.kacheln-schalter{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;margin-top:4px}
.ks{background:var(--flaeche-2);border:1px solid var(--rand);border-radius:14px;padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;transition:border-color .15s,background .15s}
.ks:has(input[type=checkbox]:checked){border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.1)}
.ks-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:0;cursor:pointer}
.ks-kopf > span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.ks-kopf b{font-size:.95rem}
/* Das Zahlenfeld gehoert zum Modus und ist nur dann sinnvoll, wenn er an ist. */
.ks-feld{display:flex;align-items:center;gap:9px;opacity:.45;transition:opacity .15s}
.ks:has(input[type=checkbox]:checked) .ks-feld{opacity:1}
.ks-feld input,.ks-feld select{width:92px;margin:0}

/* Rueckmeldung beim automatischen Speichern — steht dort, wo sonst der Knopf ist. */
.speicher-stand{font-size:.82rem;color:var(--muted);white-space:nowrap;align-self:center}
.speicher-stand[data-art="gut"]{color:#86efac}
.speicher-stand[data-art="schlecht"]{color:#fca5a5}

/* ── Namensvorschlaege ───────────────────────────────────── */
.vorschlaege{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;max-height:190px;overflow:auto;
  background:var(--flaeche);border:1px solid var(--rand-stark);border-radius:12px;box-shadow:0 16px 36px rgba(0,0,0,.55)}
.vorschlag{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:8px 12px;border:0;
  background:none;color:var(--text);font:inherit;font-size:.88rem;text-align:left;cursor:pointer}
.vorschlag:hover,.vorschlag:focus-visible{background:var(--flaeche-3);outline:none}

/* ── Erweiterte Einstellungen (Timer-Zeitplan) ─────────────────────── */
.erweitert{margin-top:16px;border:1px solid var(--rand);border-radius:12px;background:var(--flaeche-2)}
.erweitert > summary{padding:11px 14px;cursor:pointer;font-weight:600;font-size:.9rem;list-style:none}
.erweitert > summary::-webkit-details-marker{display:none}
/* Das Zeichen direkt und nicht als ƒA: Ein CSS-Escape verschluckt das folgende Zeichen,
   wenn es wie eine Hexziffer aussieht — aus „› Eigener" wurde „ÆEigener". */
.erweitert > summary::before{content:"›";display:inline-block;width:14px;margin-right:6px;color:var(--muted);transition:transform .15s}
.erweitert[open] > summary::before{transform:rotate(90deg)}
.erweitert[open] > summary{border-bottom:1px solid var(--rand)}
.erweitert-teil{padding:12px 14px}
.erweitert-teil + .erweitert-teil{border-top:1px solid var(--rand)}
.erweitert-teil p{margin-bottom:4px}

/* ── Fenster zum Anlegen (dialog) ───────────────────────────────────────────────────
   Ein <dialog> statt eines dauerhaft sichtbaren Formulars an der Seite (Faddi, 12.09.2026):
   Die Liste bekommt die ganze Breite, und das Formular erscheint nur, wenn man es braucht. */
/* margin:auto MUSS hier stehen: Ein modales <dialog> wird vom Browser ueber seine
   automatischen Raender mittig gesetzt — und die allgemeine Regel *{margin:0} ganz oben in
   dieser Datei hatte genau die weggenommen. Das Fenster klebte dadurch oben links. */
dialog.fenster{border:0;padding:0;margin:auto;background:transparent;max-width:min(680px,94vw);width:100%;color:var(--text)}
dialog.fenster::backdrop{background:rgba(5,8,15,.7);backdrop-filter:blur(3px)}
dialog.fenster[open]{animation:fensterAuf .16s ease-out}
@keyframes fensterAuf{from{opacity:0;transform:translateY(10px) scale(.985)}}
.fenster-karte{background:var(--flaeche);border:1px solid var(--rand-stark);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:hidden;display:flex;flex-direction:column}
.fenster-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;border-bottom:1px solid var(--rand);background:var(--flaeche-2)}
.fenster-kopf h2{margin:0}
.fenster-inhalt{padding:18px;overflow:auto;max-height:min(60vh,540px)}
.fenster-fuss{display:flex;justify-content:flex-end;gap:10px;padding:13px 18px;border-top:1px solid var(--rand)}
.fenster-zu{width:auto;margin:0;padding:2px 6px;background:none;border:0;color:var(--muted);
  font-size:1.05rem;line-height:1;cursor:pointer}
.fenster-zu{border-radius:8px}
.fenster-zu:hover{color:var(--text);background:var(--flaeche-3)}
/* Ein eigener Fokusrahmen statt des eckigen Systemkastens — sichtbar bleibt er, weil man
   sonst bei Tastaturbedienung nicht sieht, wo man ist. */
.fenster-zu:focus-visible{outline:none;color:var(--text);box-shadow:0 0 0 2px rgba(124,58,237,.55)}

/* ── Team ───────────────────────────────────────────────────────────────────────── */
.person{display:flex;align-items:center;gap:10px}
.person.gross{gap:16px;align-items:flex-start}
/* Vorgeschichte im Moderieren-Fenster */
.vorgeschichte{margin:12px 0;padding:10px 12px;border:1px solid var(--rand);border-radius:12px;background:var(--flaeche-2)}
.vg-zeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}

/* Strafenakte mit Beleg */
.strafe-kopf{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.strafe-zeit{margin-left:auto}
.strafe-beleg{margin-top:8px}
.strafe-beleg > summary{padding:7px 10px;font-size:.82rem;font-weight:600}
.verlauf{display:flex;flex-direction:column;gap:2px;margin:6px 0 10px;max-height:260px;overflow:auto}
.verlauf-zeile{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:start;gap:9px;
  padding:5px 8px;border-radius:8px;cursor:pointer;margin:0}
.verlauf-zeile:hover{background:var(--flaeche-3)}
.verlauf-zeile.markiert{background:rgba(245,158,11,.12)}
.verlauf-zeile input{appearance:none;-webkit-appearance:none;width:16px;height:16px;min-width:16px;margin:2px 0 0;padding:0;
  border:1px solid var(--rand-stark);border-radius:5px;background:var(--feld);cursor:pointer}
.verlauf-zeile input:checked{border-color:transparent;background-origin:border-box;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"),
    linear-gradient(135deg,var(--warn),#f97316);background-repeat:no-repeat;background-position:center;background-size:11px 11px,100% 100%}
.verlauf-text{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.82rem;overflow-wrap:anywhere}
.beweise{display:flex;flex-direction:column;gap:6px}
.beweis{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.86rem}

/* Gründe im Moderieren-Fenster: Name links, fällige Stufe darunter, Knopf rechts. */
.grund-liste{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.grund-zeile{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--rand);
  border-radius:12px;background:var(--flaeche-2)}
.grund-zeile:hover{border-color:rgba(124,58,237,.45)}
.grund-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.grund-zeile .btn{flex:0 0 auto}
.person.gross h1{margin-bottom:2px}
.tat-form .feld{margin-top:8px}
.rechte-form .btn{margin-top:2px}

/* Auswahl als Marken statt als Liste untereinander: Acht Rechte in zwei Spalten mit
   umbrechenden Beschriftungen brauchten acht Zeilen Höhe und waren trotzdem schwer zu lesen.
   Als Marken stehen sie nebeneinander und zeigen den Zustand durch die Fläche, nicht durch
   ein Kästchen daneben. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{display:inline-flex;align-items:center;position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0;margin:0}
/* NUR das direkte Kind ist die Marke. Ohne > traf die Regel auch das kleine „· 3" darin —
   dann steckte in jeder Gruppenmarke eine zweite Marke, und sie wurde größer als die
   Rollen daneben (Faddi, 12.09.2026). Dasselbe Muster wie bei .mit-vorsatz. */
.chip > span{display:inline-block;padding:6px 13px;border-radius:999px;border:1px solid var(--rand-stark);
  background:var(--flaeche-2);color:var(--muted);font-size:.83rem;font-weight:600;white-space:nowrap;transition:.15s}
.chip > span .muted{font-weight:500;opacity:.7;color:inherit}
.chip:hover > span{color:var(--text);border-color:#3a4560}
.chip input:checked + span{background:linear-gradient(135deg,rgba(124,58,237,.95),rgba(6,182,212,.9));
  background-origin:border-box;border-color:transparent;color:#fff}
.chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(124,58,237,.35)}

.personen{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.person-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;border-radius:999px;
  border:1px solid var(--rand-stark);background:var(--flaeche-2);font-size:.84rem}

/* Protokoll: Bild + eine Spalte (siehe Kommentar in log.ejs). */
.log-liste{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.log-zeile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start;
  background:var(--flaeche);border:1px solid var(--rand);border-radius:14px;padding:13px 16px}
.log-mitte{min-width:0;display:flex;flex-direction:column;gap:7px}
.log-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.log-kopf b{font-size:.95rem}
/* Die Nachricht ist der Kern des Eintrags: eigener Block mit Kante, damit sie nicht mit den
   Marken darunter verschwimmt. */
.log-mitte .zitat{margin:0;max-width:none;padding:6px 0 6px 11px;border-left:2px solid var(--rand-stark);
  color:var(--text);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.82rem}
.log-marken{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.log-tat{margin-left:auto}
.knopf-text{background:none;border:0;padding:0;margin:0;width:auto;font:inherit;font-size:.8rem;
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.knopf-text:hover{color:var(--text)}

/* ══ BAUSTEINE (14.10.2026) — siehe Liste ganz oben ═══════════════════════════════════════ */

/* ── Live-Anzeige ─────────────────────────────────────────────────────────────────── */
.live-punkt{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--live);flex:0 0 auto;
  animation:livePuls 2s ease-out infinite}
@keyframes livePuls{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%,100%{box-shadow:0 0 0 7px rgba(239,68,68,0)}}
.live-marke{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 7px;border-radius:999px;background:var(--live-flaeche);
  color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.08em;line-height:1.6;white-space:nowrap}
.live-marke::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.offline-marke{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;border:1px solid var(--rand-stark);
  background:var(--flaeche-2);color:var(--muted);font-size:.68rem;font-weight:700;letter-spacing:.06em;line-height:1.6;white-space:nowrap}

/* ── Kennzahl-Kacheln ─────────────────────────────────────────────────────────────── */
.kennzahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media(max-width:1100px){.kennzahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kennzahl{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--r-m);padding:14px 16px 12px;
  display:flex;flex-direction:column;gap:4px;min-width:0}
.kz-titel{font-size:.8rem;color:var(--muted);font-weight:500}
.kz-zeile{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.kz-wert{font-size:1.85rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.kz-delta{font-size:.74rem;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--flaeche-2);color:var(--muted);white-space:nowrap}
.kz-delta.gut{background:var(--ok-flaeche);color:var(--ok-text)}
.kz-delta.schlecht{background:var(--warn-flaeche);color:var(--warn-text)}
.kz-fuss{font-size:.74rem;color:var(--leise)}
/* Mini-Verlauf: sieben Säulen, der heutige Tag in der Akzentfarbe. */
.mini-verlauf{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:6px}
.mini-verlauf i{flex:1 1 0;min-height:2px;border-radius:3px 3px 0 0;background:var(--d-leise)}
.mini-verlauf i.h0{height:2px}
.mini-verlauf i:last-child{background:var(--d1)}

/* ── Diagramm ─────────────────────────────────────────────────────────────────────── */
.diagramm{margin:0}
.diagramm-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.diagramm-kopf h2{margin:0}
.legende{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.legende span{display:inline-flex;align-items:center;gap:6px}
.legende i{width:10px;height:10px;border-radius:3px}
.legende i.d1,.s-teil.d1{background:var(--d1)} .legende i.d2,.s-teil.d2{background:var(--d2)}
.diagramm svg .d-gitter{stroke:var(--rand);stroke-width:1}
.diagramm svg .d1{fill:var(--d1)} .diagramm svg .d2{fill:var(--d2)}
.saeulen-rahmen{position:relative;padding-left:30px}
.saeulen-skala{position:absolute;left:0;top:0;bottom:22px;display:flex;flex-direction:column;justify-content:space-between;
  font-size:.7rem;color:var(--leise);font-variant-numeric:tabular-nums}
.saeulen{position:relative;display:flex;align-items:stretch;gap:6px;height:170px;border-bottom:1px solid var(--rand-stark);
  background:linear-gradient(var(--rand) 1px,transparent 1px) 0 0/100% 50%}
/* Jede Säule ist so breit wie ihr Platz, höchstens 24 px; der Rest ist Luft. Ein Teil über
   dem anderen, dazwischen 2 px Fläche statt eines Randes. */
.saeule{position:relative;flex:1 1 0;display:flex;flex-direction:column-reverse;align-items:center;gap:2px;outline:none;cursor:default}
.saeule .s-teil{width:min(100%,24px);flex:0 0 auto}
.saeule .s-teil:last-of-type{border-radius:4px 4px 0 0}
.saeule:hover,.saeule:focus-visible{background:rgba(255,255,255,.03)}
.saeule .tip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:5;min-width:130px;
  padding:8px 10px;border-radius:10px;background:var(--flaeche-3);border:1px solid var(--rand-stark);box-shadow:var(--schatten);
  font-size:.78rem;line-height:1.45;white-space:nowrap;flex-direction:column;gap:2px;text-align:left}
.saeule .tip b{font-size:.8rem}
.saeule .tip span{display:flex;align-items:center;gap:6px;color:var(--muted)}
.saeule .tip span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--d1)}
.saeule .tip span.d2::before{background:var(--d2)}
.saeule:hover .tip,.saeule:focus-visible .tip{display:flex}
.saeule:first-child .tip,.saeule:nth-child(2) .tip{left:0;transform:none}
.saeule:last-child .tip,.saeule:nth-last-child(2) .tip{left:auto;right:0;transform:none}
.achse{display:flex;gap:6px;margin-top:6px;font-size:.7rem;color:var(--leise);font-variant-numeric:tabular-nums}
/* Nur jedes zweite Datum: 14 Beschriftungen passen in keine Kartenbreite nebeneinander. min-width:0,
   sonst schiebt die Textbreite die Spalten auseinander (am Handy 200 px waagerechtes Rollen). */
.achse span{flex:1 1 0;min-width:0;text-align:center;white-space:nowrap}
.achse span:nth-child(even){visibility:hidden}
.saeule{min-width:0}
@media(max-width:600px){.saeulen,.achse{gap:3px}}
.diagramm-leer{display:grid;place-items:center;height:170px;color:var(--muted);font-size:.9rem;border:1px dashed var(--rand-stark);border-radius:12px}

/* Balken (Maßnahmen nach Grund) — Breite über .w0…w100. */
.balken i{min-width:4%}

/* ── Zeitleiste ───────────────────────────────────────────────────────────────────── */
.zeitleiste{list-style:none;position:relative;display:flex;flex-direction:column}
.zeitleiste li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;
  padding:10px 0 10px 22px}
.zeitleiste li + li{border-top:1px solid var(--rand)}
.zeitleiste li::before{content:"";position:absolute;left:3px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;
  background:var(--leise);box-shadow:0 0 0 3px var(--flaeche)}
.zeitleiste li.z-timeout::before{background:var(--warn)}
.zeitleiste li.z-bann::before{background:var(--err)}
.zeitleiste li.z-ok::before{background:var(--ok)}
.zeitleiste .z-text{min-width:0;display:flex;flex-direction:column;gap:1px}
.zeitleiste .z-text b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zeitleiste .z-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zeitleiste .z-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}

/* ── Leer-Zustand ─────────────────────────────────────────────────────────────────── */
.leer{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 22px;gap:8px}
.leer-zeichen{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;margin-bottom:6px;color:#c4b5fd;
  background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(6,182,212,.16));border:1px solid rgba(124,58,237,.35)}
.leer-zeichen svg{width:26px;height:26px}
.leer h3{font-size:1.05rem}
.leer p{max-width:52ch;color:var(--muted);font-size:.9rem}
.leer .knopf-reihe{justify-content:center;margin-top:10px}
.karte.leer{padding:34px 22px}

/* ── „Was ist das?" ───────────────────────────────────────────────────────────────── */
details.was-ist-das{margin:10px 0 0;border:1px solid var(--rand);border-radius:12px;background:var(--flaeche-2);font-size:.88rem}
details.was-ist-das > summary{list-style:none;display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;color:var(--akzent-text);font-weight:600}
details.was-ist-das > summary::-webkit-details-marker{display:none}
details.was-ist-das > summary::before{content:"?";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:rgba(124,58,237,.25);color:#ddd6fe;font-size:.72rem;font-weight:800}
details.was-ist-das[open] > summary{border-bottom:1px solid var(--rand)}
details.was-ist-das > div{padding:10px 12px 12px;color:var(--muted)}
details.was-ist-das > div p + p{margin-top:6px}

/* ── Reiter ───────────────────────────────────────────────────────────────────────
   .reiterleiste statt .tabs/.tab: „.tab" ist auf /setup schon eine Tabelle (einrichtung.ejs). */
.reiterleiste{display:flex;gap:4px;padding:4px;margin-bottom:16px;border:1px solid var(--rand);border-radius:12px;background:var(--flaeche);
  overflow-x:auto;scrollbar-width:none}
.reiter{flex:0 0 auto;padding:8px 14px;border-radius:9px;font-size:.88rem;font-weight:600;color:var(--muted);white-space:nowrap;min-height:38px;
  display:inline-flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;font-family:inherit;margin:0;width:auto}
.reiter:hover{color:var(--text);background:var(--flaeche-2)}
.reiter.aktiv,.reiter[aria-current],.reiter[aria-selected=true]{background:var(--flaeche-3);color:#fff}
/* Die einfache Tabelle der Einrichtungsseite (table.tab). */
table.tab{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:8px}
table.tab td{padding:9px 12px 9px 0;border-top:1px solid var(--rand);vertical-align:top}
table.tab tr:first-child td{border-top:0}

/* ── Fortschrittsring ─────────────────────────────────────────────────────────────── */
.ring{width:64px;height:64px;flex:0 0 auto;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3.2}
.ring .ring-spur{stroke:var(--flaeche-3)}
.ring .ring-wert{stroke:url(#ringVerlauf);stroke-linecap:round;transition:stroke-dasharray .6s ease}
.ring-rahmen{position:relative;display:grid;place-items:center;flex:0 0 auto}
.ring-rahmen b{position:absolute;font-size:.92rem;font-weight:800}

/* ── Toasts ───────────────────────────────────────────────────────────────────────── */
.toast-stapel{position:fixed;top:86px;right:16px;z-index:120;display:flex;flex-direction:column;gap:8px;
  width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start;
  padding:12px 12px 12px 14px;border-radius:14px;background:var(--flaeche-2);border:1px solid var(--rand-stark);box-shadow:var(--schatten-hoch);
  font-size:.9rem;animation:toastRein .22s ease-out}
.toast.weg{animation:toastRaus .2s ease-in forwards}
@keyframes toastRein{from{opacity:0;transform:translateY(-8px) scale(.98)}}
/* Unter der Kopfleiste, damit Konto und Abmelden frei bleiben; am Handy oben, dort zählt jeder Platz. */
@media(max-width:900px){.toast-stapel{top:12px;right:12px;width:calc(100vw - 24px)}}
@keyframes toastRaus{to{opacity:0;transform:translateX(16px)}}
.toast-zeichen{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:.78rem;font-weight:800;color:#0b0f19}
.toast.ok .toast-zeichen{background:var(--ok-text)}
.toast.schlecht .toast-zeichen{background:var(--err-text)}
.toast.warn .toast-zeichen{background:var(--warn-text)}
.toast.ok{border-color:var(--ok-rand)} .toast.schlecht{border-color:var(--err-rand)} .toast.warn{border-color:var(--warn-rand)}
.toast-text{padding-top:1px;overflow-wrap:anywhere}
.toast-zu{width:28px;height:28px;margin:-3px -3px 0 0;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;font-size:.95rem}
.toast-zu:hover{background:var(--flaeche-3);color:var(--text)}
/* Die Laufleiste zeigt, wann eine Erfolgsmeldung von selbst verschwindet. Fehler bleiben. */
.toast.ok::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left;
  background:linear-gradient(90deg,var(--a1),var(--a2));animation:toastZeit 5s linear forwards}
.toast:hover::after{animation-play-state:paused}
@keyframes toastZeit{to{transform:scaleX(0)}}

/* ── Laden ────────────────────────────────────────────────────────────────────────── */
.laedt{position:relative;overflow:hidden;background:var(--flaeche-2);border-radius:8px;color:transparent!important;min-height:1em}
.laedt::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:schimmer 1.3s infinite}
@keyframes schimmer{to{transform:translateX(100%)}}
.kreisel{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;
  animation:drehen .7s linear infinite;flex:0 0 auto}
@keyframes drehen{to{transform:rotate(360deg)}}
.btn[aria-busy=true]{pointer-events:none;opacity:.8}
.btn[aria-busy=true]::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  animation:drehen .7s linear infinite}

/* ── Befehlspalette (Strg+K) ──────────────────────────────────────────────────────── */
dialog.palette{border:0;padding:0;margin:10vh auto auto;background:transparent;width:min(640px,94vw);max-width:none;color:var(--text)}
dialog.palette::backdrop{background:rgba(5,8,15,.72)}
dialog.palette[open]{animation:fensterAuf .14s ease-out}
.palette-karte{background:var(--flaeche);border:1px solid var(--rand-stark);border-radius:18px;box-shadow:var(--schatten-hoch);overflow:hidden}
.palette-feld{display:flex;align-items:center;gap:10px;padding:6px 16px;border-bottom:1px solid var(--rand)}
.palette-feld svg{color:var(--leise);flex:0 0 auto}
.palette-feld input{border:0;background:none;box-shadow:none!important;font-size:1.05rem;padding:12px 0;margin:0}
.palette-feld input:focus-visible{outline:none}
.palette-liste{list-style:none;max-height:min(52vh,420px);overflow:auto;padding:6px}
.palette-gruppe{padding:10px 10px 4px;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--leise)}
.palette-eintrag{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;cursor:pointer;min-height:44px;color:var(--muted)}
.palette-eintrag svg{flex:0 0 auto;color:var(--leise)}
.palette-eintrag b{font-weight:600;color:var(--text)}
.palette-eintrag .palette-wo{margin-left:auto;font-size:.76rem;color:var(--leise);white-space:nowrap}
.palette-eintrag[aria-selected=true]{background:var(--flaeche-3)}
.palette-eintrag[aria-selected=true] svg{color:#a78bfa}
.palette-leer{padding:26px 16px;text-align:center;color:var(--muted);font-size:.9rem}
.palette-fuss{display:flex;gap:14px;flex-wrap:wrap;padding:9px 14px;border-top:1px solid var(--rand);font-size:.74rem;color:var(--leise)}
.palette-fuss span{display:inline-flex;align-items:center;gap:5px}
#palette-daten{display:none}

/* ── Übersicht eines Kanals: Kommandozentrale ─────────────────────────────────────── */
.zentrale-kopf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(6,182,212,.07) 60%,transparent),var(--flaeche);
  border:1px solid var(--rand);border-radius:var(--r);padding:20px 22px}
.zentrale-bild{position:relative}
.zentrale-bild .v-avatar{box-shadow:0 0 0 3px var(--flaeche),0 0 0 5px var(--rand-stark)}
.zentrale-bild.live .v-avatar{box-shadow:0 0 0 3px var(--flaeche),0 0 0 5px var(--live)}
.zentrale-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zentrale-name h1{margin:0}
.zentrale-zeile{display:flex;gap:8px 16px;flex-wrap:wrap;margin-top:6px;font-size:.86rem;color:var(--muted)}
.zentrale-zeile span{display:inline-flex;align-items:center;gap:7px}
.zentrale-taten{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.btn.panik{background:#3b1010;border-color:var(--err-rand);color:#fecaca}
.btn.panik:hover{background:#4a1414;border-color:#b91c1c}
.btn.panik svg{color:#f87171}
@media(max-width:760px){
  .zentrale-kopf{grid-template-columns:auto minmax(0,1fr);padding:16px}
  .zentrale-taten{grid-column:1 / -1;justify-content:stretch}
  .zentrale-taten > *{flex:1 1 auto}
  .zentrale-taten .btn{width:100%}
}
/* Bot-Status mit Anleitung (kein Mod / pausiert). */
.bot-hilfe{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px;margin-bottom:16px;
  border-radius:var(--r-m);border:1px solid var(--warn-rand);background:var(--warn-flaeche);scroll-margin-top:84px}
.bot-hilfe.pausiert{border-color:var(--rand-stark);background:var(--flaeche-2)}
.bot-hilfe-zeichen{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(245,158,11,.18);color:var(--warn-text)}
.bot-hilfe h2{margin:0 0 4px;font-size:1rem}
.bot-hilfe ol{margin:8px 0 0 18px;display:flex;flex-direction:column;gap:6px;font-size:.9rem}
.kopier-zeile{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.kopier-zeile code{font-size:.9em;padding:4px 9px}
.btn-kopieren{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;margin:0;width:auto;border-radius:8px;border:1px solid var(--rand-stark);
  background:var(--flaeche-3);color:var(--text);font:600 .78rem/1.5 Inter,system-ui,sans-serif;cursor:pointer}
.btn-kopieren:hover{border-color:#3a4560}
.btn-kopieren[data-kopiert]{border-color:var(--ok-rand);color:var(--ok-text)}

/* Einrichtung als Checkliste mit Ring. */
.einrichtung-kopf{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.einrichtung-kopf h2{margin:0 0 2px}
.checkliste{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:700px){.checkliste{grid-template-columns:minmax(0,1fr)}}
.checkliste a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;
  border:1px solid var(--rand);background:var(--flaeche-2);min-height:44px;transition:border-color .15s,background .15s}
.checkliste a:hover{border-color:rgba(124,58,237,.5);background:var(--flaeche-3)}
.checkliste .haken{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--rand-stark);color:transparent}
.checkliste .fertig .haken{border:0;background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff}
.checkliste .fertig b{color:var(--muted);font-weight:500}
.checkliste a > span{display:flex;flex-direction:column;min-width:0}
.checkliste a > span .klein{color:var(--leise)}
.checkliste .pfeil{color:var(--leise)}
.alles-fertig{display:flex;align-items:center;gap:12px;color:var(--ok-text);font-weight:600}

/* Schutzstufen: drei Karten nebeneinander. */
.schutzstufen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:900px){.schutzstufen{grid-template-columns:minmax(0,1fr)}}
.stufe-karte{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r-m);
  border:1px solid var(--rand);background:var(--flaeche-2)}
.stufe-karte.aktiv{border-color:rgba(124,58,237,.6);background:linear-gradient(160deg,rgba(124,58,237,.16),rgba(6,182,212,.06)),var(--flaeche-2)}
.stufe-karte-kopf{display:flex;align-items:center;gap:10px}
.stufe-karte-kopf svg{color:#a78bfa;flex:0 0 auto}
.stufe-karte-kopf h3{margin:0}
.stufe-karte .pille{margin-left:auto}
.stufe-karte p{font-size:.86rem;color:var(--muted);flex:1}
.stufe-karte .btn{align-self:flex-start;margin-top:4px}
/* Vorschau im Fenster: vorher → nachher. */
.vorschau-liste{list-style:none;display:flex;flex-direction:column;gap:6px}
.vorschau-liste li{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr);gap:4px 12px;align-items:center;padding:9px 12px;
  border:1px solid var(--rand);border-radius:12px;background:var(--flaeche-2);font-size:.88rem}
.vorschau-liste li > b{font-weight:600}
.vorher-nachher{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.vorher-nachher .vorher{color:var(--leise);text-decoration:line-through;text-decoration-color:rgba(141,151,170,.6)}
.vorher-nachher .nachher{color:var(--text);font-weight:600}
.vorher-nachher .pfeil{color:var(--leise)}
.leiter-kurz{display:inline-flex;gap:4px;flex-wrap:wrap}
@media(max-width:520px){.vorschau-liste li{grid-template-columns:minmax(0,1fr)}}

/* Raster der Übersicht: links breit, rechts schmal. */
/* Zwei Karten in EINER Reihe sind gleich hoch (sonst klafft unter der kürzeren eine Lücke). */
.raster-haupt{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:stretch}
.raster-haupt > .karte{margin-bottom:0}
.raster-haupt + .raster-haupt,.raster-haupt + .karte{margin-top:16px}
@media(max-width:1000px){.raster-haupt{grid-template-columns:minmax(0,1fr)}}

/* ── Kanalliste ───────────────────────────────────────────────────────────────────── */
.kanal-karte-gross{display:flex;flex-direction:column;gap:14px;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--r);
  padding:18px;transition:border-color .15s,transform .15s}
.kanal-karte-gross:hover{border-color:rgba(124,58,237,.55);transform:translateY(-2px)}
.kanal-karte-gross.live{border-color:rgba(239,68,68,.45)}
.kk-kopf{display:flex;align-items:center;gap:13px;min-width:0}
.kk-kopf .zeile-text b{font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zeile-text .kk-marken{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.zeile-text .kk-marken > span{display:inline-flex}
.kk-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kk-zahlen > span{padding:9px 10px;border-radius:10px;background:var(--flaeche-2);display:flex;flex-direction:column;line-height:1.3}
.kk-zahlen b{font-size:1.15rem;font-weight:800}
.kk-zahlen > span > span{font-size:.72rem;color:var(--muted)}
.kk-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--leise)}
.kk-fuss .pfeil{color:var(--akzent-text);font-weight:600}
.schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:schritt}
@media(max-width:900px){.schritte{grid-template-columns:minmax(0,1fr)}}
.schritt{position:relative;padding:18px 18px 18px 64px;border-radius:var(--r-m);border:1px solid var(--rand);background:var(--flaeche-2)}
.schritt::before{counter-increment:schritt;content:counter(schritt);position:absolute;left:18px;top:18px;display:grid;place-items:center;
  width:32px;height:32px;border-radius:10px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2))}
.schritt h3{margin-bottom:4px}
.schritt p{font-size:.88rem;color:var(--muted)}
.verbinden-karte{margin-top:20px}
.verbinden-karte .karte-kopf{align-items:center;flex-wrap:wrap}
.verbinden-karte .karte-kopf > div{flex:1 1 420px}

/* ── Öffentliche Startseite ───────────────────────────────────────────────────────── */
.start-held{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;padding:30px 0 50px}
@media(max-width:900px){.start-held{grid-template-columns:minmax(0,1fr);gap:28px;padding:10px 0 34px}}
.start-held h1{font-size:clamp(2rem,4.6vw,3.15rem);line-height:1.08;letter-spacing:-.035em;margin:0 0 16px}
.farbverlauf-text{background:linear-gradient(120deg,#a78bfa,#22d3ee 55%,#f9a8d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.start-held .anriss{font-size:1.08rem;color:#c3c8d2;max-width:54ch}
.start-held .knopf-reihe{margin-top:24px}
.start-vertrauen{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:18px;font-size:.84rem;color:var(--muted)}
.start-vertrauen span{display:inline-flex;align-items:center;gap:6px}
.start-vertrauen svg{color:var(--ok-text)}
.abschnitt{padding:46px 0 10px}
.abschnitt > .ueberzeile{text-align:center}
.abschnitt > h2{font-size:clamp(1.45rem,3vw,2rem);letter-spacing:-.025em;text-align:center;margin:0 auto 10px;max-width:24ch}
.abschnitt > .abschnitt-text{color:var(--muted);text-align:center;max-width:60ch;margin:0 auto 28px}
.funktionen{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.funktion{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--r-m);padding:18px;transition:border-color .2s,transform .2s}
.funktion:hover{border-color:rgba(124,58,237,.45);transform:translateY(-2px)}
.funktion-zeichen{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;margin-bottom:12px;color:#ddd6fe;
  background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(6,182,212,.18));border:1px solid rgba(124,58,237,.35)}
.funktion h3{margin-bottom:4px}
.funktion p{font-size:.88rem;color:var(--muted)}
.sicher-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:800px){.sicher-raster{grid-template-columns:minmax(0,1fr)}}
.sicher{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:18px;border-radius:var(--r-m);border:1px solid var(--rand);background:var(--flaeche)}
.sicher svg{color:var(--ok-text);margin-top:2px}
.sicher p{font-size:.88rem;color:var(--muted);margin-top:2px}
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.faq details{border:1px solid var(--rand);border-radius:14px;background:var(--flaeche)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:12px;padding:15px 18px;cursor:pointer;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--leise);font-weight:500;font-size:1.2rem;line-height:1;transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > p{padding:0 18px 16px;color:var(--muted);font-size:.92rem}
.start-schluss{margin:46px 0 10px;padding:36px 24px;text-align:center;border-radius:24px;border:1px solid rgba(124,58,237,.4);
  background:radial-gradient(600px 220px at 50% 0,rgba(124,58,237,.28),transparent 70%),var(--flaeche)}
.start-schluss h2{font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:-.02em}
.start-schluss p{color:var(--muted);max-width:52ch;margin:0 auto}
.start-schluss .knopf-reihe{justify-content:center;margin-top:20px}

/* Die Chat-Vorschau im Kopf der Startseite: reines HTML/CSS. Ein Durchlauf dauert 14 s:
   zwei normale Nachrichten, ein Spam-Link, den WatchMod erkennt und löscht, sein Hinweis,
   dann jemand zum ersten Mal im Chat — und die Begrüßung. */
.demo{position:relative}
.demo::before{content:"";position:absolute;inset:-30px;z-index:-1;border-radius:40px;filter:blur(40px);
  background:radial-gradient(closest-side,rgba(124,58,237,.35),transparent),radial-gradient(closest-side at 80% 80%,rgba(6,182,212,.25),transparent)}
.demo-fenster{background:#0e1220;border:1px solid var(--rand-stark);border-radius:20px;box-shadow:var(--schatten-hoch);overflow:hidden}
.demo-kopf{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--rand);background:var(--flaeche);font-size:.86rem}
.demo-kopf b{font-weight:700}
.demo-kopf .live-marke{margin-left:auto}
.demo-chat{height:330px;padding:14px 16px;display:flex;flex-direction:column;justify-content:flex-end;gap:0;overflow:hidden;font-size:.9rem}
.dz{overflow:hidden;max-height:0;opacity:0;animation-duration:14s;animation-iteration-count:infinite;animation-timing-function:ease-out}
.dz > div{padding:5px 8px;border-radius:8px;line-height:1.45}
.dz .n{font-weight:700;margin-right:4px}
.n-a{color:#f9a8d4} .n-b{color:#93c5fd} .n-c{color:#fca5a5} .n-d{color:#86efac} .n-bot{color:#c4b5fd}
.dz-bot > div{background:rgba(124,58,237,.12);border-left:2px solid var(--a1)}
.dz-marke{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.05em;vertical-align:1px}
.dz-marke.neu{background:#14532d;color:#bbf7d0}
.dz-marke.bot{background:rgba(124,58,237,.35);color:#ede9fe}
.dz-spam > div{position:relative;animation:spamRot 14s infinite}
.dz-spam .dz-flagge{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--live-flaeche);color:#fff;font-size:.66rem;font-weight:800;
  opacity:0;animation:spamFlagge 14s infinite}
.dz-weg > div{color:var(--leise);font-style:italic;font-size:.84rem}
.dz1{animation-name:dz1} .dz2{animation-name:dz2} .dz-spam{animation-name:dzSpam} .dz-weg{animation-name:dzWeg}
.dz-bot{animation-name:dzBot} .dz5{animation-name:dz5} .dz6{animation-name:dz6}
@keyframes dz1{0%{max-height:0;opacity:0}4%,93%{max-height:5em;opacity:1}100%{max-height:5em;opacity:0}}
@keyframes dz2{0%,8%{max-height:0;opacity:0}12%,93%{max-height:5em;opacity:1}100%{max-height:5em;opacity:0}}
@keyframes dzSpam{0%,17%{max-height:0;opacity:0}21%,34%{max-height:5em;opacity:1}39%,100%{max-height:0;opacity:0}}
@keyframes spamRot{0%,26%{background:transparent}29%,40%{background:rgba(239,68,68,.16);text-decoration:line-through;text-decoration-color:rgba(252,165,165,.7)}}
@keyframes spamFlagge{0%,26%{opacity:0}29%,40%{opacity:1}41%,100%{opacity:0}}
@keyframes dzWeg{0%,36%{max-height:0;opacity:0}40%,93%{max-height:5em;opacity:1}100%{max-height:5em;opacity:0}}
@keyframes dzBot{0%,43%{max-height:0;opacity:0}47%,93%{max-height:5em;opacity:1}100%{max-height:5em;opacity:0}}
@keyframes dz5{0%,55%{max-height:0;opacity:0}59%,93%{max-height:5em;opacity:1}100%{max-height:5em;opacity:0}}
@keyframes dz6{0%,65%{max-height:0;opacity:0}69%,93%{max-height:5em;opacity:1}100%{max-height:5em;opacity:0}}
/* Ohne Bewegung: gleich das Ergebnis zeigen — der Spam ist schon weg, die Begrüßung steht da. */
@media (prefers-reduced-motion:reduce){
  .demo-chat *{animation:none!important}
  .dz{max-height:none;opacity:1}
  .dz-spam{display:none}
}
.demo-fuss{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--rand);background:var(--flaeche)}
.demo-fuss span{flex:1;padding:8px 12px;border-radius:10px;background:var(--feld);border:1px solid var(--rand-stark);color:#7d8698;font-size:.86rem}
.demo-schild{position:absolute;right:-12px;top:62px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;
  background:var(--flaeche-2);border:1px solid var(--rand-stark);box-shadow:var(--schatten-hoch);font-size:.8rem;animation:schweben 6s ease-in-out infinite}
.demo-schild b{display:block;font-size:.95rem}
.demo-schild svg{color:var(--ok-text)}
@keyframes schweben{50%{transform:translateY(-6px)}}
@media(max-width:520px){.demo-schild{right:8px;top:auto;bottom:70px}}
/* Der Leuchtschein reicht 30 px über die Vorschau hinaus — am Handy über den Rand, also enger. */
@media(max-width:900px){.demo::before{inset:-10px 0}}

/* ── Hilfe ────────────────────────────────────────────────────────────────────────── */
.hilfe-inhalt{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
@media(max-width:900px){.hilfe-inhalt{grid-template-columns:minmax(0,1fr)}}
.hilfe-nav{position:sticky;top:16px;display:flex;flex-direction:column;gap:2px}
.hilfe-nav a{padding:7px 10px;border-radius:9px;color:var(--muted);font-size:.9rem}
.hilfe-nav a:hover{background:var(--flaeche-2);color:var(--text)}
@media(max-width:900px){.hilfe-nav{position:static;flex-direction:row;flex-wrap:wrap}.hilfe-nav a{min-height:44px;display:inline-flex;align-items:center}}
.platzhalter-tabelle code{white-space:nowrap}
.platzhalter-tabelle td:first-child{width:1%;white-space:nowrap}
.begriffe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:800px){.begriffe{grid-template-columns:minmax(0,1fr)}}
.begriff{padding:14px 16px;border-radius:12px;border:1px solid var(--rand);background:var(--flaeche-2)}
.begriff b{display:block;margin-bottom:3px}
.begriff p{font-size:.88rem;color:var(--muted)}
.tasten-liste{list-style:none;display:flex;flex-direction:column;gap:8px}
.tasten-liste li{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:.9rem}

/* ── Kleinkram für die Seiten ─────────────────────────────────────────────────────── */
.abstand-oben{margin-top:14px} .abstand-oben-gross{margin-top:16px} .abstand-links{margin-left:8px}
/* Unwichtige Spalten verschwinden am Handy, statt die Tabelle seitlich rollen zu lassen. */
@media(max-width:640px){.nur-breit{display:none}
  .tabelle th,.tabelle td{padding:10px 12px}
  .tabelle td.nowrap{white-space:normal}
  .tabelle td.rechts .btn,.tabelle td.rechts form.inline{margin:2px 0 2px 4px}
  .tabelle .btn-sm{padding:6px 10px}}
.log-mitte,.warn-text{overflow-wrap:anywhere}
.link-still:hover{text-decoration:underline;text-underline-offset:3px}
.punkt-klein{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4b5563;flex:0 0 auto}
.punkt-klein.gut{background:var(--ok)} .punkt-klein.mittel{background:var(--warn)} .punkt-klein.schlecht{background:var(--err)} .abstand-oben-klein{margin-top:6px} .ohne-abstand{margin:0}
.karte-kopf.innen.ohne-unten{padding-bottom:0}
.zwischentitel{margin:28px 0 12px;font-size:1.05rem}
.platzhalter-zeile{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:.82rem;color:var(--muted)}
.platzhalter-zeile code{cursor:default}
.tabelle-rahmen.hoch{max-height:420px;overflow:auto}
.feld.unten{align-self:end}
/* Punkt vor jeder Meldung — absolut, nicht flex: Meldungen enthalten Fließtext mit <b> und <code>,
   und als Flex-Kinder stünde jedes Stück in einer eigenen Spalte. */
.meldung{position:relative;padding-left:34px}
.meldung::before{content:"";position:absolute;left:15px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--leise)}
.meldung.ok::before{background:var(--ok)} .meldung.warn::before{background:var(--warn)} .meldung.schlecht::before{background:var(--err)}
/* Höhen und Breiten in 5er-Schritten — für Säulen und Balken ohne style-Attribut. */
.h0{height:0%}.h5{height:5%}.h10{height:10%}.h15{height:15%}.h20{height:20%}.h25{height:25%}.h30{height:30%}.h35{height:35%}.h40{height:40%}.h45{height:45%}.h50{height:50%}.h55{height:55%}.h60{height:60%}.h65{height:65%}.h70{height:70%}.h75{height:75%}.h80{height:80%}.h85{height:85%}.h90{height:90%}.h95{height:95%}.h100{height:100%}
.w0{width:0%}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}
.v-avatar.gr-20{--gr:20px}.v-avatar.gr-22{--gr:22px}.v-avatar.gr-28{--gr:28px}.v-avatar.gr-30{--gr:30px}.v-avatar.gr-32{--gr:32px}.v-avatar.gr-34{--gr:34px}.v-avatar.gr-36{--gr:36px}.v-avatar.gr-40{--gr:40px}.v-avatar.gr-44{--gr:44px}.v-avatar.gr-48{--gr:48px}.v-avatar.gr-52{--gr:52px}.v-avatar.gr-64{--gr:64px}.v-avatar.gr-72{--gr:72px}

/* Abmelden ist ein Formular (POST) — es soll im Layout verschwinden, nur der Knopf zählt. */
.form-unsichtbar { display: contents; }
.form-unsichtbar > .btn { margin: 0; }

/* SEITENLEISTE AM DESKTOP (14.10.2026): 20 Bereiche sind höher als ein Laptop-Fenster. Die
   Leiste rollt in sich — damit man das SIEHT, Einträge etwas dichter und oben/unten ein
   Schatten, solange es dort weitergeht (Hintergrund „local" wandert mit dem Inhalt mit und
   deckt den Schatten ab, sobald das Ende erreicht ist). */
@media (min-width:901px){
  .seitenleiste{scrollbar-width:thin;scrollbar-color:var(--rand) transparent;
    background:
      linear-gradient(var(--flaeche) 30%, rgba(0,0,0,0)) center top,
      linear-gradient(rgba(0,0,0,0), var(--flaeche) 70%) center bottom,
      radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.55), rgba(0,0,0,0)) center top,
      radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.55), rgba(0,0,0,0)) center bottom;
    background-color:var(--flaeche);background-repeat:no-repeat;
    background-size:100% 36px,100% 36px,100% 14px,100% 14px;background-attachment:local,local,scroll,scroll}
  .sl-link{padding:5px 10px}
  .sl-gruppe{padding:11px 10px 4px}
}

/* Clipgrind-Kooperation (25.10.2026): Marke im Kopf der Seite und Karte bei den Timern. Nur vorhandene Tokens. */
.koop-marke{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);white-space:nowrap}
.koop-karte{display:flex;align-items:center;gap:14px;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--r);padding:14px 18px;margin-bottom:16px;color:inherit;text-decoration:none}
.koop-karte:hover{border-color:var(--rand-stark)}
.koop-karte > span:nth-of-type(1){display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.koop-karte img,.koop-marke img{flex:none}
@media (max-width:600px){.koop-karte{flex-wrap:wrap}}