/* ==========================================================
   BB CyberSec Radar – Oberflaeche

   Darstellung: drei Zustaende.
   1. Ohne data-theme  -> Systemeinstellung des Nutzers
   2. data-theme="light" -> immer hell
   3. data-theme="dark"  -> immer dunkel

   Grundpalette ist hell. Dunkel wird an zwei Stellen definiert:
   einmal fuer die Systemeinstellung (aber nur, wenn der Nutzer nicht
   ausdruecklich hell gewaehlt hat) und einmal fuer die ausdrueckliche
   Wahl. Nur so gewinnt die Nutzerwahl in beide Richtungen.
   ========================================================== */

@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/static/fonts/space-grotesk-latin.woff2) format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/static/fonts/jetbrains-mono-latin.woff2) format('woff2');
}

/* ---------- Hell (Grundpalette) ---------- */
:root{
  --bg:#f2f5fa;
  --flaeche:#ffffff;
  --flaeche-hoch:#ffffff;
  --linie:#dce3ed;
  --linie-soft:rgba(6,112,68,0.30);

  /* Alle Farbwerte auf hellem Grund sind gegen WCAG AA (4.5:1)
     nachgerechnet – auch auf den getoenten Flaechen der Pillen
     und Risikozahlen, wo die Schrift sonst zu blass wird. */
  --text:#3a4655;
  --text-schwach:#5a687c;
  --text-stark:#111a26;

  --gruen:#067044;          /* Akzent fuer Text und Rahmen */
  --gruen-hell:#0a8558;     /* Verlauf auf Schaltflaechen */
  --gruen-auf:#ffffff;      /* Schrift auf gruener Flaeche */
  --cyan:#096d8d;

  --ton-critical-bg:rgba(161,27,22,0.10);
  --ton-critical-fg:#a11b16;
  --ton-high-bg:rgba(152,67,7,0.10);
  --ton-high-fg:#984307;
  --ton-medium-bg:rgba(117,85,6,0.10);
  --ton-medium-fg:#755506;
  --ton-low-bg:rgba(6,112,68,0.10);
  --ton-low-fg:#067044;
  --ton-info-fg:#096d8d;

  --schatten:0 18px 44px rgba(19,32,51,0.10);
  --schatten-karte:0 24px 60px rgba(19,32,51,0.13);
  --schein-a:rgba(11,140,88,0.07);
  --schein-b:rgba(10,126,164,0.06);
  --hover:rgba(17,26,38,0.035);

  --mono:'JetBrains Mono','Courier New',monospace;
  --sans:'Space Grotesk','Segoe UI',system-ui,sans-serif;
}

/* ---------- Dunkel ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#05080d;
    --flaeche:#0b121c;
    --flaeche-hoch:#0d1522;
    --linie:#1a2635;
    --linie-soft:rgba(45,255,158,0.20);

    --text:#c9d6e3;
    --text-schwach:#8294a6;
    --text-stark:#f4f8fc;

    --gruen:#2dff9e;
    --gruen-hell:#25e0c8;
    --gruen-auf:#04110a;
    --cyan:#3fd0ff;

    --ton-critical-bg:rgba(255,95,87,0.14);
    --ton-critical-fg:#ff8b85;
    --ton-high-bg:rgba(255,162,60,0.14);
    --ton-high-fg:#ffa23c;
    --ton-medium-bg:rgba(255,207,92,0.13);
    --ton-medium-fg:#ffcf5c;
    --ton-low-bg:rgba(45,255,158,0.12);
    --ton-low-fg:#2dff9e;
    --ton-info-fg:#3fd0ff;

    --schatten:0 18px 44px rgba(0,0,0,0.45);
    --schatten-karte:0 40px 90px rgba(0,0,0,0.55);
    --schein-a:rgba(45,255,158,0.08);
    --schein-b:rgba(63,208,255,0.07);
    --hover:rgba(255,255,255,0.03);
  }
}

:root[data-theme="dark"]{
  --bg:#05080d;
  --flaeche:#0b121c;
  --flaeche-hoch:#0d1522;
  --linie:#1a2635;
  --linie-soft:rgba(45,255,158,0.20);

  --text:#c9d6e3;
  --text-schwach:#8294a6;
  --text-stark:#f4f8fc;

  --gruen:#2dff9e;
  --gruen-hell:#25e0c8;
  --gruen-auf:#04110a;
  --cyan:#3fd0ff;

  --ton-critical-bg:rgba(255,95,87,0.14);
  --ton-critical-fg:#ff8b85;
  --ton-high-bg:rgba(255,162,60,0.14);
  --ton-high-fg:#ffa23c;
  --ton-medium-bg:rgba(255,207,92,0.13);
  --ton-medium-fg:#ffcf5c;
  --ton-low-bg:rgba(45,255,158,0.12);
  --ton-low-fg:#2dff9e;
  --ton-info-fg:#3fd0ff;

  --schatten:0 18px 44px rgba(0,0,0,0.45);
  --schatten-karte:0 40px 90px rgba(0,0,0,0.55);
  --schein-a:rgba(45,255,158,0.08);
  --schein-b:rgba(63,208,255,0.07);
  --hover:rgba(255,255,255,0.03);
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
::selection{background:var(--gruen);color:var(--gruen-auf);}

/* ---------- Markenzeile ---------- */
.marke{
  font-family:var(--mono);font-size:19px;font-weight:700;color:var(--text-stark);
  letter-spacing:1px;display:flex;align-items:baseline;gap:7px;
}
.marke span{color:var(--gruen);}
.marke small{
  font-size:10px;letter-spacing:3px;color:var(--text-schwach);
  border:1px solid var(--linie);border-radius:4px;padding:2px 6px;
}

/* ==========================================================
   Anmeldung
   ========================================================== */
body.anmeldung{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:
    radial-gradient(620px 340px at 20% 15%, var(--schein-a), transparent 70%),
    radial-gradient(560px 300px at 82% 80%, var(--schein-b), transparent 70%),
    var(--bg);
}
.anmelde-karte{
  width:100%;max-width:400px;
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:18px;padding:40px 36px;
  box-shadow:var(--schatten-karte);
  position:relative;
}
.anmelde-karte::before{
  content:"";position:absolute;top:0;left:12%;right:12%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gruen),var(--cyan),transparent);
}
/* Markenblock auf der Anmeldeseite: Logo, Wortmarke, darunter RADAR */
.anmelde-marke{text-align:center;margin-bottom:30px;}
.anmelde-logo{
  width:76px;height:76px;display:block;margin:0 auto 16px;
  border-radius:20px;border:1px solid var(--linie);
  background:#05080d;   /* das Logo ist weiss auf schwarz */
  padding:10px;
}
.anmelde-wortmarke{
  font-family:var(--mono);font-size:21px;font-weight:700;
  color:var(--text-stark);letter-spacing:1px;
}
.anmelde-wortmarke span{color:var(--gruen);}
.anmelde-radar{
  font-family:var(--mono);font-size:12px;letter-spacing:7px;
  color:var(--text-schwach);margin-top:7px;padding-left:7px;
}

.anmelde-karte h1{
  font-size:25px;color:var(--text-stark);margin:24px 0 4px;letter-spacing:-0.3px;
  text-align:center;
}
.anmelde-karte .hinweis{text-align:center;}
.anmelde-karte .hinweis{
  color:var(--text-schwach);font-size:13.5px;margin-bottom:26px;
}
.anmelde-karte label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-schwach);margin:16px 0 6px;
}
.anmelde-karte input{
  width:100%;padding:12px 14px;border-radius:10px;
  background:var(--bg);border:1px solid var(--linie);
  color:var(--text-stark);font-family:var(--sans);font-size:15px;
  transition:border-color .2s, box-shadow .2s;
}
.anmelde-karte input:focus{
  outline:none;border-color:var(--gruen);
  box-shadow:0 0 0 3px var(--linie-soft);
}
.anmelde-karte button{
  width:100%;margin-top:26px;padding:13px;border:none;border-radius:10px;
  background:linear-gradient(100deg,var(--gruen),var(--gruen-hell));
  color:var(--gruen-auf);font-family:var(--mono);font-size:14px;font-weight:700;
  letter-spacing:.5px;cursor:pointer;transition:box-shadow .2s, transform .15s;
}
.anmelde-karte button:hover{box-shadow:var(--schatten);transform:translateY(-1px);}
.fehler{
  margin-top:20px;padding:11px 14px;border-radius:10px;font-size:13.5px;
  background:var(--ton-critical-bg);border:1px solid var(--ton-critical-fg);
  color:var(--ton-critical-fg);
}

/* ==========================================================
   Anwendungsrahmen
   ========================================================== */
body.app{display:flex;min-height:100vh;}

.seitenleiste{
  width:230px;flex-shrink:0;
  background:var(--flaeche);border-right:1px solid var(--linie);
  padding:24px 0;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.seitenleiste .marke{padding:0 22px 24px;}
.seitenleiste nav{display:flex;flex-direction:column;flex:1;gap:2px;padding:0 12px;}
.seitenleiste nav a{
  padding:10px 14px;border-radius:9px;font-size:14.5px;color:var(--text-schwach);
  border-left:2px solid transparent;transition:background .18s, color .18s;
}
.seitenleiste nav a:hover{background:var(--hover);color:var(--text);}
.seitenleiste nav a.aktiv{
  background:var(--ton-low-bg);color:var(--gruen);
  border-left-color:var(--gruen);font-weight:500;
}
.seitenleiste-fuss{padding:16px 22px 0;border-top:1px solid var(--linie);margin-top:12px;}
.benutzer-name{color:var(--text-stark);font-size:14px;}
.benutzer-rolle{
  font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;
  color:var(--gruen);margin-top:2px;
}
.abmelden{display:inline-block;margin-top:14px;font-size:13px;color:var(--text-schwach);}
.abmelden:hover{color:var(--gruen);}

/* ---------- Plattform-Administration ---------- */
.plattform-verweis{
  margin-top:10px;padding-top:14px;border-top:1px solid var(--linie);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.root-marke{
  font-family:var(--mono);font-size:9px;letter-spacing:1.2px;
  color:var(--ton-high-fg);border:1px solid var(--ton-high-fg);
  border-radius:4px;padding:1px 5px;
}

/* Deutlich sichtbar, wenn der Betreiber fremde Daten ansieht */
.fremdsicht{
  margin:0 12px 14px;padding:13px 15px;border-radius:11px;
  background:var(--ton-high-bg);border:1px solid var(--ton-high-fg);
}
.fremdsicht-titel{
  font-family:var(--mono);font-size:10px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ton-high-fg);margin-bottom:6px;
}
.fremdsicht p{font-size:12px;color:var(--text);margin-bottom:11px;line-height:1.6;}
.fremdsicht .knopf{width:100%;text-align:center;font-size:11.5px;padding:8px 10px;}

/* ---------- Umschalter hell/dunkel ---------- */
.darstellung{
  display:flex;gap:3px;margin-bottom:16px;
  border:1px solid var(--linie);border-radius:99px;padding:3px;
  background:var(--bg);width:fit-content;
}
.darstellung button{
  border:none;background:none;cursor:pointer;
  width:30px;height:26px;border-radius:99px;
  font-size:13px;line-height:1;color:var(--text-schwach);
  transition:background .18s, color .18s;
}
.darstellung button:hover{color:var(--text-stark);background:var(--hover);}
.darstellung button.aktiv{
  background:linear-gradient(100deg,var(--gruen),var(--gruen-hell));
  color:var(--gruen-auf);
}
.darstellung button:focus-visible{
  outline:2px solid var(--gruen);outline-offset:1px;
}

.inhalt{flex:1;padding:32px 38px 60px;min-width:0;}

.kopf{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding-bottom:24px;margin-bottom:28px;border-bottom:1px solid var(--linie);
}
.kopf h1{font-size:26px;color:var(--text-stark);font-weight:700;letter-spacing:-0.3px;}
.kopf-hinweis{color:var(--text-schwach);font-size:13px;margin-top:2px;}

/* ---------- Kennzahlen ---------- */
.kennzahlen{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:16px;margin-bottom:32px;
}
.kachel{
  background:var(--flaeche-hoch);
  border:1px solid var(--linie);border-radius:14px;padding:20px 22px;
  position:relative;overflow:hidden;box-shadow:var(--schatten);
}
.kachel-label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-schwach);margin-bottom:10px;
}
.kachel-wert{
  font-family:var(--mono);font-size:34px;font-weight:700;color:var(--text-stark);
  line-height:1.1;
}
.kachel-wert small{font-size:15px;color:var(--text-schwach);font-weight:400;}
.kachel-kategorie{
  margin-top:8px;font-size:12.5px;color:var(--text-schwach);
  display:flex;gap:6px;flex-wrap:wrap;
}

.kachel-risiko::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;}
.risiko-critical::before{background:var(--ton-critical-fg);}
.risiko-high::before{background:var(--ton-high-fg);}
.risiko-medium::before{background:var(--ton-medium-fg);}
.risiko-low::before{background:var(--ton-low-fg);}
.risiko-informational::before{background:var(--ton-info-fg);}

.risiko-critical .kachel-wert,
.risiko-critical .kachel-kategorie{color:var(--ton-critical-fg);}
.risiko-high .kachel-wert{color:var(--ton-high-fg);}
.risiko-medium .kachel-wert{color:var(--ton-medium-fg);}
.risiko-low .kachel-wert{color:var(--ton-low-fg);}

/* ---------- Tafeln und Tabellen ---------- */
.tafel{
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:14px;padding:24px 26px;box-shadow:var(--schatten);
}
.tafel h2{font-size:16px;color:var(--text-stark);margin-bottom:18px;}

.tabelle{width:100%;border-collapse:collapse;font-size:14px;}
.tabelle th{
  text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-schwach);font-weight:400;
  padding:0 12px 12px 0;border-bottom:1px solid var(--linie);
}
.tabelle td{padding:13px 12px 13px 0;border-bottom:1px solid var(--linie);}
.tabelle tr:last-child td{border-bottom:none;}
.titel-zelle{color:var(--text-stark);}
.mono{font-family:var(--mono);font-size:13px;color:var(--text-schwach);}

.score{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;padding:5px 9px;border-radius:8px;
  font-family:var(--mono);font-size:13px;font-weight:700;
  background:var(--hover);color:var(--text-stark);
}
.score-critical{background:var(--ton-critical-bg);color:var(--ton-critical-fg);}
.score-high{background:var(--ton-high-bg);color:var(--ton-high-fg);}
.score-medium{background:var(--ton-medium-bg);color:var(--ton-medium-fg);}
.score-low{background:var(--ton-low-bg);color:var(--ton-low-fg);}
.score-informational{background:var(--hover);color:var(--ton-info-fg);}

.pill{
  display:inline-block;padding:3px 10px;border-radius:99px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:1px;
  border:1px solid var(--linie);
}
.pill-critical{background:var(--ton-critical-bg);color:var(--ton-critical-fg);border-color:var(--ton-critical-fg);}
.pill-high{background:var(--ton-high-bg);color:var(--ton-high-fg);border-color:var(--ton-high-fg);}
.pill-medium{background:var(--ton-medium-bg);color:var(--ton-medium-fg);border-color:var(--ton-medium-fg);}
.pill-low{background:var(--ton-low-bg);color:var(--ton-low-fg);border-color:var(--linie-soft);}
.pill-informational{color:var(--ton-info-fg);border-color:var(--ton-info-fg);}

.leer{color:var(--text-schwach);font-size:14px;padding:8px 0;}

/* ---------- Knoepfe ---------- */
.kopf-aktionen{display:flex;gap:10px;flex-wrap:wrap;}
.knopf{
  display:inline-block;padding:9px 16px;border-radius:9px;cursor:pointer;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.4px;
  border:1px solid var(--linie);background:var(--flaeche);color:var(--text);
  transition:border-color .18s, color .18s, box-shadow .18s;
}
.knopf:hover{border-color:var(--gruen);color:var(--gruen);}
.knopf-voll{
  background:linear-gradient(100deg,var(--gruen),var(--gruen-hell));
  color:var(--gruen-auf);border-color:transparent;font-weight:700;
}
.knopf-voll:hover{color:var(--gruen-auf);box-shadow:var(--schatten);}
.knopf-leise{background:none;border-color:transparent;color:var(--text-schwach);}

.zurueck{font-size:13px;color:var(--text-schwach);display:inline-block;margin-bottom:6px;}
.zurueck:hover{color:var(--gruen);}
.verweis{color:var(--text-stark);border-bottom:1px solid var(--linie-soft);}
.verweis:hover{color:var(--gruen);border-bottom-color:var(--gruen);}
.klein{font-size:12px;color:var(--text-schwach);margin-top:3px;}
.klein-wert{font-size:19px;}

/* ---------- Meldungen ---------- */
.meldung{
  margin-bottom:20px;padding:11px 15px;border-radius:10px;font-size:13.5px;
  background:var(--ton-low-bg);border:1px solid var(--linie-soft);color:var(--ton-low-fg);
}
.inhalt .fehler{
  margin-bottom:20px;padding:11px 15px;border-radius:10px;font-size:13.5px;
  background:var(--ton-critical-bg);border:1px solid var(--ton-critical-fg);
  color:var(--ton-critical-fg);
}

/* ---------- Filterleiste ---------- */
.filterleiste{
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:18px;
  padding:14px 16px;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:12px;
}
.filterleiste input[type="search"]{min-width:220px;flex:1;}

/* ---------- Eingabefelder ---------- */
input[type="search"], input[type="text"], input[type="file"],
.formular input, select{
  padding:9px 12px;border-radius:9px;
  background:var(--bg);border:1px solid var(--linie);color:var(--text-stark);
  font-family:var(--sans);font-size:13.5px;
}
select{cursor:pointer;}
input:focus, select:focus{
  outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px var(--linie-soft);
}

/* ---------- Aufklappbare Bereiche ---------- */
.klappe{
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:12px;margin-bottom:18px;
}
.klappe summary{
  padding:14px 18px;cursor:pointer;font-size:14px;color:var(--text-stark);
  font-weight:500;list-style:none;display:flex;align-items:center;gap:9px;
}
.klappe summary::-webkit-details-marker{display:none;}
.klappe summary::before{
  content:"+";font-family:var(--mono);color:var(--gruen);font-size:15px;
}
.klappe[open] summary::before{content:"–";}
.klappe summary:hover{color:var(--gruen);}

.formular{
  padding:6px 18px 20px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
}
.formular-schmal{display:block;}
.formular-schmal input[type="file"]{margin-bottom:14px;width:100%;}
.feld{display:flex;flex-direction:column;gap:5px;}
.feld label{
  font-family:var(--mono);font-size:10px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--text-schwach);
}
.feld-hinweis{
  grid-column:1/-1;font-size:12.5px;color:var(--text-schwach);
  line-height:1.65;margin-top:2px;
}
.feld-hinweis code{
  font-family:var(--mono);font-size:11.5px;
  background:var(--bg);padding:2px 5px;border-radius:4px;
}
.formular button{grid-column:1/-1;justify-self:start;}

/* Breite Tabellen scrollen in sich, nicht die Seite */
.tabelle-rahmen{overflow-x:auto;}

/* ---------- Domains ---------- */
.hinweis-kasten{
  border:1px solid var(--linie);border-left:3px solid var(--gruen);
  border-radius:12px;padding:16px 20px;margin-bottom:18px;
  background:var(--flaeche);
}
.hinweis-kasten strong{color:var(--text-stark);font-size:14px;}
.hinweis-kasten p{color:var(--text-schwach);font-size:13.5px;margin-top:6px;}

.domain-karte{margin-bottom:16px;}
.domain-kopf{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;flex-wrap:wrap;
}
.domain-name{
  font-family:var(--mono);font-size:16px;color:var(--text-stark);margin:0;
}

.anleitung{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--linie);
}
.anleitung-titel{font-size:13.5px;color:var(--text-stark);margin-bottom:10px;}
.anleitung ol{margin:0 0 4px 18px;color:var(--text-schwach);font-size:13.5px;}
.anleitung li{margin-bottom:10px;}

.dns-zeile{display:flex;gap:10px;align-items:baseline;margin:6px 0;}
.dns-label{
  font-family:var(--mono);font-size:10px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--text-schwach);
  min-width:48px;flex-shrink:0;
}
.dns-wert{
  font-family:var(--mono);font-size:12.5px;color:var(--text-stark);
  background:var(--bg);border:1px solid var(--linie);
  padding:5px 9px;border-radius:6px;
  /* Der Token muss vollstaendig kopierbar bleiben */
  word-break:break-all;user-select:all;
}
.dns-token{color:var(--gruen);}

.letzter-fehler{
  margin-top:12px;font-size:12.5px;color:var(--ton-high-fg);
}
.domain-aktionen{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center;
}

/* ---------- Findings ---------- */
.schalter{
  display:flex;align-items:center;gap:7px;
  font-size:13px;color:var(--text-schwach);cursor:pointer;
}
.schalter input{width:15px;height:15px;accent-color:var(--gruen);cursor:pointer;}

.marker-kev{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.8px;
  text-transform:uppercase;
  background:var(--ton-critical-bg);color:var(--ton-critical-fg);
  border:1px solid var(--ton-critical-fg);
}
.ueberfaellig{color:var(--ton-critical-fg);font-weight:700;}

.klartext{margin:0 0 0 18px;color:var(--text);font-size:14.5px;line-height:1.75;}
.klartext li{margin-bottom:8px;}

.fliesstext{color:var(--text);font-size:14.5px;line-height:1.75;}
.beleg{
  margin-top:12px;padding:14px 16px;border-radius:10px;
  background:var(--bg);border:1px solid var(--linie);
  font-family:var(--mono);font-size:12.5px;color:var(--text-schwach);
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;
}

.schritte{display:flex;flex-direction:column;gap:8px;}
.schritt-klappe{margin-bottom:0;background:var(--bg);}
.schritt-klappe summary{padding:11px 16px;font-size:13.5px;}
.schritt-klappe textarea{
  width:100%;padding:10px 12px;border-radius:9px;
  background:var(--flaeche);border:1px solid var(--linie);
  color:var(--text-stark);font-family:var(--sans);font-size:14px;
  resize:vertical;
}
.schritt-klappe textarea:focus{
  outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px var(--linie-soft);
}

.zwei-spalten{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;
}
.zwei-spalten .feld{margin-bottom:12px;}
.zwei-spalten select, .zwei-spalten input[type="date"]{width:100%;}

.verlauf{list-style:none;margin:0;padding:0;}
.verlauf li{
  display:flex;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--linie);font-size:13.5px;
}
.verlauf li:last-child{border-bottom:none;}
.verlauf-zeit{
  font-family:var(--mono);font-size:11.5px;color:var(--text-schwach);
  min-width:110px;flex-shrink:0;padding-top:2px;
}
.verlauf-text{color:var(--text);}

/* ---------- Zwei-Faktor-Authentifizierung ---------- */
.code-eingabe{
  font-family:var(--mono);font-size:22px;letter-spacing:6px;text-align:center;
}
.fuss-hinweis{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--linie);
  font-size:12.5px;color:var(--text-schwach);line-height:1.7;
}
.fuss-hinweis a{color:var(--gruen);}

.mfa-aufbau{
  display:grid;grid-template-columns:minmax(180px,220px) 1fr;gap:32px;
  align-items:start;
}
.mfa-qr{
  background:#ffffff;padding:12px;border-radius:12px;
  border:1px solid var(--linie);
}
/* Der QR-Code braucht hellen Grund, auch in der dunklen Darstellung */
.mfa-qr svg{display:block;width:100%;height:auto;}

.mfa-schritte ol{margin:0 0 20px 18px;color:var(--text-schwach);font-size:13.5px;}
.mfa-schritte li{margin-bottom:14px;}
.mfa-schritte strong{color:var(--text-stark);font-size:14px;}
.mfa-schritte p{margin-top:3px;}
.mfa-schluessel{
  display:inline-block;margin-top:6px;
  font-family:var(--mono);font-size:13px;color:var(--gruen);
  background:var(--bg);border:1px solid var(--linie);
  padding:7px 11px;border-radius:7px;user-select:all;
}
.mfa-schritte .feld{max-width:220px;margin-bottom:16px;}

.warnung-kasten{
  border:1px solid var(--ton-high-fg);border-left-width:3px;
  border-radius:12px;padding:16px 20px;margin-bottom:18px;
  background:var(--ton-high-bg);
}
.warnung-kasten strong{color:var(--ton-high-fg);font-size:14px;}
.warnung-kasten p{color:var(--text);font-size:13.5px;margin-top:6px;}

.codeliste{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-bottom:18px;
}
.wiederherstellungscode{
  font-family:var(--mono);font-size:14px;letter-spacing:1px;
  color:var(--text-stark);background:var(--bg);
  border:1px solid var(--linie);border-radius:8px;
  padding:11px 14px;text-align:center;user-select:all;
}

@media(max-width:700px){
  .mfa-aufbau{grid-template-columns:1fr;gap:22px;}
  .mfa-qr{max-width:240px;}
}

/* ---------- Platzhalter fuer noch leere Module ---------- */
.platzhalter{
  border:1px dashed var(--linie);border-radius:14px;
  padding:56px 32px;text-align:center;background:var(--flaeche);
}
.platzhalter-symbol{font-size:34px;color:var(--gruen);opacity:.7;margin-bottom:14px;}
.platzhalter h2{color:var(--text-stark);font-size:18px;margin-bottom:10px;}
.platzhalter p{color:var(--text-schwach);font-size:14px;max-width:460px;margin:0 auto;}

/* ---------- Schmale Bildschirme ---------- */
@media(max-width:820px){
  body.app{flex-direction:column;}
  .seitenleiste{
    width:100%;height:auto;position:static;
    border-right:none;border-bottom:1px solid var(--linie);padding:18px 0;
  }
  .seitenleiste nav{flex-direction:row;overflow-x:auto;padding:0 12px;}
  .seitenleiste nav a{white-space:nowrap;border-left:none;border-bottom:2px solid transparent;}
  .seitenleiste nav a.aktiv{border-left:none;border-bottom-color:var(--gruen);}
  .seitenleiste-fuss{
    display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:14px 22px 0;flex-wrap:wrap;
  }
  .darstellung{margin-bottom:0;order:3;}
  .abmelden{margin-top:0;}
  .inhalt{padding:24px 20px 48px;}
}

/* ---------- Berichte ---------- */
.berichtsarten{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;
  margin-bottom:18px;
}
.berichts-form{margin-top:16px;}
.berichts-form .feld{max-width:220px;margin-bottom:14px;}
.berichts-form select{width:100%;}

/* ---------- Compliance ---------- */
.regelwerk-wahl{display:flex;gap:8px;flex-wrap:wrap;}

.readiness{
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:14px;padding:24px 26px;margin-bottom:18px;
  box-shadow:var(--schatten);
}
.readiness-zahl{text-align:center;flex-shrink:0;}
.readiness-wert{
  font-family:var(--mono);font-size:46px;font-weight:700;
  color:var(--gruen);line-height:1;
}
.readiness-wert small{font-size:20px;}
.readiness-label{
  font-family:var(--mono);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-schwach);margin-top:6px;
}
.readiness-text{flex:1;min-width:260px;}
.readiness-text p{font-size:14.5px;margin-bottom:7px;}
.readiness-text .klein{font-size:12.5px;color:var(--text-schwach);line-height:1.65;}

/* Fortschrittsbalken je Themenbereich */
.balken-liste{display:flex;flex-direction:column;gap:13px;}
.balken-zeile{display:grid;grid-template-columns:1fr 2fr auto;gap:14px;align-items:center;}
.balken-name{font-size:13.5px;color:var(--text-stark);}
.balken-name .klein{display:block;font-size:11px;color:var(--text-schwach);margin-top:1px;}
.balken-spur{
  height:9px;border-radius:99px;background:var(--bg);
  border:1px solid var(--linie);overflow:hidden;
}
.balken-fuell{height:100%;border-radius:99px;transition:width .3s;}
.balken-gut{background:var(--ton-low-fg);}
.balken-mittel{background:var(--ton-medium-fg);}
.balken-schwach{background:var(--ton-high-fg);}
.balken-kritisch{background:var(--ton-critical-fg);}
/* Neutraler Fuellton: ein kumulierter Anteil ist keine Warnung. */
.balken-neutral{background:var(--text-schwach);opacity:.65;}
.balken-wert{
  font-family:var(--mono);font-size:13px;color:var(--text-stark);
  min-width:38px;text-align:right;
}

.luecken{margin:0 0 0 18px;}
.luecken li{margin-bottom:13px;}
.luecken strong{display:inline-block;margin-left:7px;color:var(--text-stark);}
.luecken p{font-size:13px;color:var(--text-schwach);margin-top:3px;}

.control-klappe{margin-bottom:7px;background:var(--bg);}
.control-klappe summary{
  padding:12px 16px;font-size:13.5px;gap:11px;flex-wrap:wrap;
}
.control-code{
  font-family:var(--mono);font-size:11.5px;color:var(--text-schwach);
  min-width:64px;
}
.control-titel{flex:1;color:var(--text-stark);}
.control-inhalt{padding:0 18px 18px;}
.control-inhalt .fliesstext{font-size:13.5px;margin-bottom:13px;}
.feld-breit{grid-column:1/-1;}
.control-inhalt textarea{
  width:100%;padding:9px 12px;border-radius:9px;
  background:var(--flaeche);border:1px solid var(--linie);
  color:var(--text-stark);font-family:var(--sans);font-size:13.5px;resize:vertical;
}
.control-inhalt textarea:focus{
  outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px var(--linie-soft);
}
.quelle-hinweis{
  padding:12px 15px;border-radius:10px;font-size:13px;
  background:var(--ton-low-bg);border:1px solid var(--linie-soft);
}
.belege{margin:8px 0 0 18px;font-size:12.5px;color:var(--text-schwach);}


/* ==========================================================
   Ersatz fuer inline style-Attribute.

   Die CSP der Anwendung erlaubt kein style-src 'unsafe-inline'.
   Ein style="..." im HTML wird deshalb still verworfen – der
   Fortschrittsbalken haette ohne diese Klassen gar keine Breite.
   Ein Test in tests/test_vorlagen.py haelt das fest.
   ========================================================== */
.wert-gut{color:var(--ton-low-fg);}
.wert-hoch{color:var(--ton-high-fg);}
.wert-kritisch{color:var(--ton-critical-fg);}
.feld-mittel{max-width:340px;}
.kasten-innen{padding:6px 18px 20px;}
.abstand-oben{margin-top:12px;}
.abstand-oben-gross{margin-top:14px;}
.vorformatiert{white-space:pre-wrap;}

/* Breite des Fortschrittsbalkens in Prozentschritten */
.w0{width:0%;}
.w1{width:1%;}
.w2{width:2%;}
.w3{width:3%;}
.w4{width:4%;}
.w5{width:5%;}
.w6{width:6%;}
.w7{width:7%;}
.w8{width:8%;}
.w9{width:9%;}
.w10{width:10%;}
.w11{width:11%;}
.w12{width:12%;}
.w13{width:13%;}
.w14{width:14%;}
.w15{width:15%;}
.w16{width:16%;}
.w17{width:17%;}
.w18{width:18%;}
.w19{width:19%;}
.w20{width:20%;}
.w21{width:21%;}
.w22{width:22%;}
.w23{width:23%;}
.w24{width:24%;}
.w25{width:25%;}
.w26{width:26%;}
.w27{width:27%;}
.w28{width:28%;}
.w29{width:29%;}
.w30{width:30%;}
.w31{width:31%;}
.w32{width:32%;}
.w33{width:33%;}
.w34{width:34%;}
.w35{width:35%;}
.w36{width:36%;}
.w37{width:37%;}
.w38{width:38%;}
.w39{width:39%;}
.w40{width:40%;}
.w41{width:41%;}
.w42{width:42%;}
.w43{width:43%;}
.w44{width:44%;}
.w45{width:45%;}
.w46{width:46%;}
.w47{width:47%;}
.w48{width:48%;}
.w49{width:49%;}
.w50{width:50%;}
.w51{width:51%;}
.w52{width:52%;}
.w53{width:53%;}
.w54{width:54%;}
.w55{width:55%;}
.w56{width:56%;}
.w57{width:57%;}
.w58{width:58%;}
.w59{width:59%;}
.w60{width:60%;}
.w61{width:61%;}
.w62{width:62%;}
.w63{width:63%;}
.w64{width:64%;}
.w65{width:65%;}
.w66{width:66%;}
.w67{width:67%;}
.w68{width:68%;}
.w69{width:69%;}
.w70{width:70%;}
.w71{width:71%;}
.w72{width:72%;}
.w73{width:73%;}
.w74{width:74%;}
.w75{width:75%;}
.w76{width:76%;}
.w77{width:77%;}
.w78{width:78%;}
.w79{width:79%;}
.w80{width:80%;}
.w81{width:81%;}
.w82{width:82%;}
.w83{width:83%;}
.w84{width:84%;}
.w85{width:85%;}
.w86{width:86%;}
.w87{width:87%;}
.w88{width:88%;}
.w89{width:89%;}
.w90{width:90%;}
.w91{width:91%;}
.w92{width:92%;}
.w93{width:93%;}
.w94{width:94%;}
.w95{width:95%;}
.w96{width:96%;}
.w97{width:97%;}
.w98{width:98%;}
.w99{width:99%;}
.w100{width:100%;}

/* ---------- Remediation-Board ---------- */
.pruef-tafel{border-left:3px solid var(--ton-high-fg);margin-bottom:18px;}
.pruef-liste{display:flex;flex-direction:column;gap:9px;margin-top:14px;}
.pruef-zeile{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 14px;border-radius:10px;flex-wrap:wrap;
  background:var(--bg);border:1px solid var(--linie);
}
.pruef-zeile .klein{display:block;margin-top:2px;}

.board{
  display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));
  gap:12px;margin-bottom:18px;overflow-x:auto;padding-bottom:6px;
}
.board-spalte{
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:12px;padding:14px 12px;min-width:180px;
}
.board-kopf{padding:0 4px 12px;border-bottom:1px solid var(--linie);margin-bottom:12px;}
.board-titel{font-size:13.5px;color:var(--text-stark);font-weight:500;}
.board-anzahl{
  font-family:var(--mono);font-size:22px;font-weight:700;
  color:var(--text-stark);line-height:1.2;
}
.board-kopf .klein{font-size:11px;line-height:1.4;}
.board-karten{display:flex;flex-direction:column;gap:9px;}
.board-leer{color:var(--text-schwach);text-align:center;padding:14px 0;}

.karte{
  background:var(--bg);border:1px solid var(--linie);
  border-radius:10px;padding:11px 12px;
}
.karte-ueberfaellig{border-left:3px solid var(--ton-critical-fg);}
.karte-kopf{display:flex;align-items:center;gap:6px;margin-bottom:7px;flex-wrap:wrap;}
.karte-titel{
  display:block;font-size:13px;color:var(--text-stark);line-height:1.4;
  border-bottom:1px solid transparent;
}
.karte-titel:hover{color:var(--gruen);border-bottom-color:var(--gruen);}
.karte-aktionen{margin-top:9px;display:flex;flex-direction:column;gap:6px;}
.knopf-klein{padding:6px 11px;font-size:11.5px;width:100%;text-align:center;}
.karte-klappe{margin:0;background:var(--flaeche);}
.karte-klappe summary{padding:7px 11px;font-size:11.5px;}
.karte-klappe select{width:100%;font-size:12px;}

@media(max-width:1100px){
  .board{grid-template-columns:repeat(3,minmax(200px,1fr));}
}
@media(max-width:700px){
  .board{grid-template-columns:1fr;}
}


/* ---------- Risikolage ---------- */
.zwei-werte{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;margin-bottom:18px;
}
.wert-karte{
  background:var(--flaeche);border:1px solid var(--linie);
  border-left:4px solid var(--text-schwach);
  border-radius:14px;padding:22px 24px;box-shadow:var(--schatten);
}
.wert-label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-schwach);
}
.wert-zahl{
  font-family:var(--mono);font-size:44px;font-weight:700;
  color:var(--text-stark);line-height:1.1;margin-top:6px;
}
.wert-zahl small{font-size:17px;color:var(--text-schwach);font-weight:400;}
.wert-kategorie{
  font-family:var(--mono);font-size:12px;letter-spacing:1.6px;font-weight:700;
}
.wert-text{font-size:13px;color:var(--text-schwach);margin-top:12px;line-height:1.6;}
.wert-trend{
  margin-top:12px;padding-top:11px;border-top:1px solid var(--linie);
  font-size:12.5px;color:var(--text-schwach);
}
.wert-critical{border-left-color:var(--ton-critical-fg);}
.wert-critical .wert-zahl,.wert-critical .wert-kategorie{color:var(--ton-critical-fg);}
.wert-high{border-left-color:var(--ton-high-fg);}
.wert-high .wert-zahl,.wert-high .wert-kategorie{color:var(--ton-high-fg);}
.wert-medium{border-left-color:var(--ton-medium-fg);}
.wert-medium .wert-zahl,.wert-medium .wert-kategorie{color:var(--ton-medium-fg);}
.wert-low,.wert-informational{border-left-color:var(--ton-low-fg);}
.wert-low .wert-zahl,.wert-low .wert-kategorie,
.wert-informational .wert-zahl,.wert-informational .wert-kategorie{color:var(--ton-low-fg);}

.trend-hoch{color:var(--ton-critical-fg);font-weight:700;}
.trend-runter{color:var(--ton-low-fg);font-weight:700;}
.trend-gleich{color:var(--text-schwach);}

/* Verlauf als Saeulen – ohne JavaScript, nur Klassen */
.verlauf-balken{
  display:flex;gap:10px;align-items:flex-end;
  overflow-x:auto;padding:8px 0 0;min-height:150px;
}
.verlauf-punkt{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:44px;}
.verlauf-saeule{
  display:flex;gap:3px;align-items:flex-end;height:120px;
}
.saeule{width:11px;border-radius:3px 3px 0 0;min-height:2px;}
.saeule-technisch{background:var(--ton-high-fg);opacity:.75;}
.saeule-geschaeftlich{background:var(--gruen);}
.verlauf-datum{
  font-family:var(--mono);font-size:10px;color:var(--text-schwach);
  white-space:nowrap;
}
.legende{
  display:flex;gap:18px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--linie);font-size:12px;color:var(--text-schwach);
}
.legende i{
  display:inline-block;width:10px;height:10px;border-radius:3px;
  margin-right:6px;vertical-align:-1px;
}
.punkt-technisch{background:var(--ton-high-fg);opacity:.75;}
.punkt-geschaeftlich{background:var(--gruen);}

.balken-schmal{width:80px;height:7px;}

.hebel-liste{list-style:none;margin:14px 0 0;padding:0;}
.hebel-liste li{
  display:flex;gap:16px;align-items:flex-start;
  padding:12px 0;border-bottom:1px solid var(--linie);
}
.hebel-liste li:last-child{border-bottom:none;}
.hebel-wirkung{
  font-family:var(--mono);font-size:19px;min-width:56px;text-align:right;
}

.rechnung td{padding:9px 0;}
.rechnung td:last-child{text-align:right;font-size:15px;}
.rechnung .summe td{
  border-top:2px solid var(--linie);border-bottom:none;
  font-weight:700;color:var(--text-stark);padding-top:11px;
}

/* Saeulenhoehen in Prozentschritten – die CSP verbietet inline styles */
.h0{height:0%;}
.h1{height:1%;}
.h2{height:2%;}
.h3{height:3%;}
.h4{height:4%;}
.h5{height:5%;}
.h6{height:6%;}
.h7{height:7%;}
.h8{height:8%;}
.h9{height:9%;}
.h10{height:10%;}
.h11{height:11%;}
.h12{height:12%;}
.h13{height:13%;}
.h14{height:14%;}
.h15{height:15%;}
.h16{height:16%;}
.h17{height:17%;}
.h18{height:18%;}
.h19{height:19%;}
.h20{height:20%;}
.h21{height:21%;}
.h22{height:22%;}
.h23{height:23%;}
.h24{height:24%;}
.h25{height:25%;}
.h26{height:26%;}
.h27{height:27%;}
.h28{height:28%;}
.h29{height:29%;}
.h30{height:30%;}
.h31{height:31%;}
.h32{height:32%;}
.h33{height:33%;}
.h34{height:34%;}
.h35{height:35%;}
.h36{height:36%;}
.h37{height:37%;}
.h38{height:38%;}
.h39{height:39%;}
.h40{height:40%;}
.h41{height:41%;}
.h42{height:42%;}
.h43{height:43%;}
.h44{height:44%;}
.h45{height:45%;}
.h46{height:46%;}
.h47{height:47%;}
.h48{height:48%;}
.h49{height:49%;}
.h50{height:50%;}
.h51{height:51%;}
.h52{height:52%;}
.h53{height:53%;}
.h54{height:54%;}
.h55{height:55%;}
.h56{height:56%;}
.h57{height:57%;}
.h58{height:58%;}
.h59{height:59%;}
.h60{height:60%;}
.h61{height:61%;}
.h62{height:62%;}
.h63{height:63%;}
.h64{height:64%;}
.h65{height:65%;}
.h66{height:66%;}
.h67{height:67%;}
.h68{height:68%;}
.h69{height:69%;}
.h70{height:70%;}
.h71{height:71%;}
.h72{height:72%;}
.h73{height:73%;}
.h74{height:74%;}
.h75{height:75%;}
.h76{height:76%;}
.h77{height:77%;}
.h78{height:78%;}
.h79{height:79%;}
.h80{height:80%;}
.h81{height:81%;}
.h82{height:82%;}
.h83{height:83%;}
.h84{height:84%;}
.h85{height:85%;}
.h86{height:86%;}
.h87{height:87%;}
.h88{height:88%;}
.h89{height:89%;}
.h90{height:90%;}
.h91{height:91%;}
.h92{height:92%;}
.h93{height:93%;}
.h94{height:94%;}
.h95{height:95%;}
.h96{height:96%;}
.h97{height:97%;}
.h98{height:98%;}
.h99{height:99%;}
.h100{height:100%;}


/* ---------- Evidence Center ---------- */
.formular-flach{
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--linie);
}

.art-gitter{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;margin-top:14px;
}
.art-karte{
  border:1px solid var(--linie);border-radius:11px;padding:14px 16px;
  background:var(--bg);
}
/* Eine Null ist hier die eigentliche Information, keine Panne –
   deshalb zurueckgenommen, aber nicht versteckt. */
.art-leer{border-style:dashed;opacity:.72;}
.art-kopf{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
}
.art-titel{font-size:13px;color:var(--text-stark);font-weight:600;}
.art-zahl{
  font-family:var(--mono);font-size:19px;font-weight:700;color:var(--text-stark);
}
.art-leer .art-zahl{color:var(--text-schwach);font-weight:400;}
.art-zustand{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.art-karte .klein{margin-top:8px;line-height:1.5;}

.control-liste{list-style:none;margin:14px 0 0;padding:0;}
.control-liste li{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--linie);
}
.control-liste li:last-child{border-bottom:none;}

/* Fehlender oder veraenderter Nachweis: das ist kein Hinweis mehr. */
.warnung-schwer{
  border-left-color:var(--ton-critical-fg);
  background:color-mix(in srgb, var(--ton-critical-fg) 8%, transparent);
}


/* ---------- Zugang und Abrechnung ---------- */
.anmelde-karte-breit{max-width:560px;}
.anmelde-fuss{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--linie);
  font-size:12.5px;color:var(--text-schwach);text-align:center;
}
.anmelde-fuss a{color:var(--gruen);text-decoration:none;}
.anmelde-fuss a:hover{text-decoration:underline;}
.knopf-block{display:block;text-align:center;margin-top:20px;}

/* Der Code wird genau einmal gezeigt – entsprechend gross. */
.code-anzeige{
  font-family:var(--mono);font-size:21px;letter-spacing:2.5px;
  font-weight:700;color:var(--text-stark);
  background:var(--bg);border:1px dashed var(--linie);
  border-radius:10px;padding:16px 18px;margin:12px 0;
  word-break:break-all;user-select:all;
}

.paket-reihe{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;margin:18px 0;
}
.paket-karte{
  border:1px solid var(--linie);border-radius:12px;padding:16px 18px;
  background:var(--bg);position:relative;
}
.paket-aktiv{border-color:var(--gruen);}
.paket-name{
  font-family:var(--mono);font-size:11px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--text-schwach);
}
.paket-preis{
  font-family:var(--mono);font-size:26px;font-weight:700;
  color:var(--text-stark);margin-top:5px;line-height:1.2;
}
.paket-preis small{font-size:12px;font-weight:400;color:var(--text-schwach);}
.paket-assets{font-size:12.5px;color:var(--text-schwach);margin-top:2px;}
.paket-karte .klein{margin-top:9px;line-height:1.55;}
.paket-marke{
  margin-top:11px;font-family:var(--mono);font-size:10px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--gruen);
}

.zeilen-knoepfe{display:flex;gap:6px;flex-wrap:wrap;}
.zeilen-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.zeilen-form select{font-size:12px;padding:5px 8px;}