/* =====================================================================
   Obhut — Oberfläche
   Keine externen Schriften oder Skripte: alles lokal, DSGVO-freundlich.
   Grundgedanke: ruhig, kontraststark, große Zahlen, große Klickflächen.
   ===================================================================== */

:root{
  --papier:#F4F7F5;
  --karte:#FFFFFF;
  --karte2:#EDF2EF;
  --senke:#E3EAE7;
  --tinte:#111A18;
  --tinte-weich:#4B5955;
  --tinte-blass:#75837E;
  --linie:#DCE4E0;
  --linie2:#C1CEC8;

  --gruen:#0B6553;        --gruen-hell:#DFEFEA;   --gruen-dunkel:#084A3D;
  --gelb:#8A6110;         --gelb-hell:#F8EFDA;
  --rot:#9B3625;          --rot-hell:#F9E7E2;
  --blau:#1F5B87;         --blau-hell:#E3EEF6;
  --grau:#8C9A95;

  --r:4px;
  --schatten:0 1px 2px rgba(17,26,24,.05), 0 8px 24px -16px rgba(17,26,24,.3);
  --schatten-gross:0 2px 6px rgba(17,26,24,.07), 0 24px 48px -28px rgba(17,26,24,.45);

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --schrift-zahl: "SF Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono",
                  "Roboto Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-thema="hell"]){
    --papier:#0D1312; --karte:#151E1C; --karte2:#1D2725; --senke:#111917;
    --tinte:#E8EDEB; --tinte-weich:#A3B1AC; --tinte-blass:#7D8B86;
    --linie:#28332F; --linie2:#3B4A46;
    --gruen:#4FBBA6;  --gruen-hell:#0F2E28; --gruen-dunkel:#7FD3C2;
    --gelb:#D5AC5C;   --gelb-hell:#2A2415;
    --rot:#DD8574;    --rot-hell:#30201C;
    --blau:#7FB4DA;   --blau-hell:#152833;
    --grau:#63716C;
    --schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.9);
    --schatten-gross:0 2px 6px rgba(0,0,0,.5), 0 24px 48px -28px rgba(0,0,0,1);
  }
}
:root[data-thema="dunkel"]{
  --papier:#0D1312; --karte:#151E1C; --karte2:#1D2725; --senke:#111917;
  --tinte:#E8EDEB; --tinte-weich:#A3B1AC; --tinte-blass:#7D8B86;
  --linie:#28332F; --linie2:#3B4A46;
  --gruen:#4FBBA6;  --gruen-hell:#0F2E28; --gruen-dunkel:#7FD3C2;
  --gelb:#D5AC5C;   --gelb-hell:#2A2415;
  --rot:#DD8574;    --rot-hell:#30201C;
  --blau:#7FB4DA;   --blau-hell:#152833;
  --grau:#63716C;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:var(--schrift); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
a{color:var(--gruen); text-underline-offset:2px}
a:hover{color:var(--gruen-dunkel)}
h1,h2,h3,h4{margin:0; line-height:1.22; font-weight:700; text-wrap:balance; letter-spacing:-.011em}
h1{font-size:clamp(24px,3.4vw,31px)}
h2{font-size:21px}
h3{font-size:17.5px}
p{margin:0}
:focus-visible{outline:3px solid var(--gruen); outline-offset:2px; border-radius:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zahl{font-variant-numeric:tabular-nums}
.mono{font-family:var(--schrift-zahl); font-size:.86em}

/* ---------------------------------------------------------------- Kopf */
.kopf{background:var(--karte); border-bottom:1px solid var(--linie); position:sticky; top:0; z-index:40}
.kopf-innen{
  max-width:1220px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.marke{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tinte); font-weight:700; font-size:18px}
.marke-zeichen{
  width:30px; height:30px; flex:none; display:block;
  background:url("zeichen.svg") center/contain no-repeat;
}
.marke .wort{display:flex; flex-direction:column; line-height:1.05}
.marke .wort b{font-size:19px; font-weight:700; letter-spacing:-.02em}
.marke .wort small{
  font-size:9.5px; font-weight:400; letter-spacing:.055em; color:var(--tinte-blass);
  text-transform:none;
}
.fallwahl{margin-left:auto; margin-right:6px}
.fallwahl select{
  background:var(--karte2); border:1px solid var(--linie2); border-radius:var(--r);
  padding:7px 12px; font:inherit; font-size:14.5px; color:var(--tinte); max-width:280px;
}
.kopf-rechts{display:flex; align-items:center; gap:12px}

.menue{position:relative}
.menue-schalter{
  display:flex; align-items:center; gap:9px; background:none; border:0; cursor:pointer;
  font:inherit; color:var(--tinte); padding:4px 6px; border-radius:var(--r);
}
.menue-schalter:hover{background:var(--karte2)}
.kuerzel{
  width:32px;height:32px;border-radius:50%;background:var(--gruen-hell);color:var(--gruen);
  display:grid;place-items:center;font-weight:700;font-size:14px;flex:none;
}
.menue-name{font-size:14.5px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menue-liste{
  position:absolute; right:0; top:calc(100% + 8px); min-width:240px; z-index:60;
  background:var(--karte); border:1px solid var(--linie2); border-radius:var(--r);
  box-shadow:var(--schatten-gross); padding:6px; display:flex; flex-direction:column;
}
.menue-liste a{padding:9px 12px; border-radius:var(--r); text-decoration:none; color:var(--tinte); font-size:15px}
.menue-liste a:hover{background:var(--karte2)}
.menue-liste a.abmelden{border-top:1px solid var(--linie); margin-top:4px; padding-top:11px; color:var(--rot)}
.menue-kopf{padding:9px 12px 11px; border-bottom:1px solid var(--linie); margin-bottom:4px; font-size:13.5px; color:var(--tinte-weich)}
.menue-kopf small{color:var(--tinte-blass)}
[hidden]{display:none!important}

.hauptnav{border-top:1px solid var(--linie); background:var(--karte); overflow-x:auto}
.hauptnav-innen{max-width:1220px; margin:0 auto; padding:0 14px; display:flex; gap:2px}
.hauptnav a{
  display:flex; align-items:center; gap:8px; padding:11px 13px; text-decoration:none;
  color:var(--tinte-weich); font-size:14.5px; white-space:nowrap;
  border-bottom:2.5px solid transparent;
}
.hauptnav a:hover{color:var(--tinte); background:var(--karte2)}
.hauptnav a.aktiv{color:var(--gruen); border-bottom-color:var(--gruen); font-weight:600}
.hauptnav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------------------------------------------------------------- Inhalt */
.inhalt{max-width:1220px; margin:0 auto; padding:26px 20px 70px}
.inhalt.schmal{max-width:820px}
.inhalt-gast{max-width:460px; margin:0 auto; padding:min(9vh,80px) 20px 60px}
.fuss{
  max-width:1220px; margin:0 auto; padding:22px 20px 40px; border-top:1px solid var(--linie);
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; font-size:13px; color:var(--tinte-blass);
}
.fuss .hersteller{margin-left:auto; display:flex; align-items:center; gap:7px}
.fuss .hersteller .zeichen{width:16px; height:16px; background:url("zeichen.svg") center/contain no-repeat; opacity:.75}
@media (max-width:700px){ .fuss .hersteller{margin-left:0} }

.seitenkopf{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:22px}
.seitenkopf .unter{color:var(--tinte-weich); font-size:15px; margin-top:5px; max-width:70ch}
.werkzeuge{display:flex; gap:9px; flex-wrap:wrap; align-items:center}

.marker{
  font-size:11px; letter-spacing:.11em; text-transform:uppercase; font-weight:700;
  color:var(--tinte-blass);
}

/* ---------------------------------------------------------------- Meldungen */
.meldung{
  padding:13px 16px; border-radius:var(--r); margin-bottom:18px; font-size:15px;
  border-left:3px solid var(--gruen); background:var(--gruen-hell); color:var(--gruen-dunkel);
}
.meldung.fehler{border-left-color:var(--rot); background:var(--rot-hell); color:var(--rot)}
.meldung.hinweis{border-left-color:var(--gelb); background:var(--gelb-hell); color:var(--gelb)}
.meldung.info{border-left-color:var(--blau); background:var(--blau-hell); color:var(--blau)}

/* ---------------------------------------------------------------- Karten */
.karte{background:var(--karte); border:1px solid var(--linie); border-radius:var(--r); padding:20px 22px}
.karte.gross{padding:26px 28px}
.karte + .karte{margin-top:16px}
.karte-kopf{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap}

.raster{display:grid; gap:16px}
.raster.z2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.raster.z3{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.raster.z4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.spalten{display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:18px; align-items:start}
@media (max-width:900px){ .spalten{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- Bilanz */
.bilanz{
  background:var(--karte); border:1px solid var(--linie2); border-radius:var(--r);
  box-shadow:var(--schatten); display:grid; grid-template-columns:minmax(280px,1.1fr) minmax(260px,1fr);
  overflow:hidden; margin-bottom:22px;
}
@media (max-width:760px){ .bilanz{grid-template-columns:1fr} }
.bilanz-haupt{padding:24px 26px 26px; border-right:1px solid var(--linie)}
@media (max-width:760px){ .bilanz-haupt{border-right:0; border-bottom:1px solid var(--linie)} }
.bilanz-zahl{
  font-size:clamp(40px,7vw,62px); font-weight:700; line-height:1.03; letter-spacing:-.028em;
  color:var(--gruen); font-variant-numeric:tabular-nums; margin:9px 0 8px;
}
.bilanz-text{color:var(--tinte-weich); font-size:15px; max-width:40ch}
.bilanz-fristen{padding:20px 24px 22px; display:flex; flex-direction:column}
.frist-zeile{
  display:grid; grid-template-columns:1fr auto; gap:1px 16px; padding:11px 0;
  border-bottom:1px solid var(--linie); align-items:center;
}
.frist-zeile:last-child{border-bottom:0}
.frist-zeile .datum{grid-column:1; font-weight:600; font-size:14.5px}
.frist-zeile .rest{grid-column:1; font-size:12.5px; color:var(--tinte-blass)}
.frist-zeile .betrag{grid-column:2; grid-row:1/span 2; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums}
.d-monat .betrag{color:var(--rot)} .d-jahr .betrag{color:var(--gelb)}
.d-fern .betrag{color:var(--gruen)} .d-abgelaufen .betrag{color:var(--grau)}

/* ---------------------------------------------------------------- Töpfe */
.topf{
  background:var(--karte); border:1px solid var(--linie); border-left:3px solid var(--linie2);
  border-radius:var(--r); padding:16px 18px; display:flex; flex-direction:column; gap:11px;
}
.topf.d-monat{border-left-color:var(--rot)}
.topf.d-jahr{border-left-color:var(--gelb)}
.topf.d-fern{border-left-color:var(--gruen)}
.topf.d-abgelaufen{border-left-color:var(--grau)}
.topf.inaktiv{opacity:.55}
.topf-kopf{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.topf-name{font-weight:700; font-size:16.5px; line-height:1.3}
.topf-norm{font-family:var(--schrift-zahl); font-size:11px; color:var(--tinte-blass); white-space:nowrap}
.topf-zahlen{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.topf-offen{font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.topf-von{font-size:12.5px; color:var(--tinte-blass); font-variant-numeric:tabular-nums}
.topf-notiz{font-size:13.5px; color:var(--tinte-blass); line-height:1.5}
.topf-fuss{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; padding-top:2px; flex-wrap:wrap}

.balken{height:8px; background:var(--senke); border-radius:99px; overflow:hidden; position:relative}
.balken i{position:absolute; inset:0 auto 0 0; background:var(--grau); border-radius:99px}
.d-monat .balken{background:var(--rot-hell)}
.d-jahr  .balken{background:var(--gelb-hell)}
.d-fern  .balken{background:var(--gruen-hell)}

.plakette{
  display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.04em;
  padding:3px 9px; border-radius:99px; background:var(--senke); color:var(--tinte-weich); white-space:nowrap;
}
.plakette.d-monat{background:var(--rot-hell); color:var(--rot)}
.plakette.d-jahr{background:var(--gelb-hell); color:var(--gelb)}
.plakette.d-fern{background:var(--gruen-hell); color:var(--gruen)}
.plakette.gruen{background:var(--gruen-hell); color:var(--gruen)}
.plakette.rot{background:var(--rot-hell); color:var(--rot)}
.plakette.gelb{background:var(--gelb-hell); color:var(--gelb)}
.plakette.blau{background:var(--blau-hell); color:var(--blau)}

/* ---------------------------------------------------------------- Kennzahlen */
.kennzahlen{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px;
  background:var(--linie); border:1px solid var(--linie); border-radius:var(--r); overflow:hidden}
.kennzahl{background:var(--karte); padding:15px 17px}
.kennzahl .wert{font-size:25px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.022em; line-height:1.15}
.kennzahl .beschriftung{font-size:12.5px; color:var(--tinte-weich); margin-top:3px; line-height:1.4}
.kennzahl.gruen .wert{color:var(--gruen)}
.kennzahl.rot .wert{color:var(--rot)}
.kennzahl.gelb .wert{color:var(--gelb)}

/* ---------------------------------------------------------------- Knöpfe */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--karte); border:1px solid var(--linie2); color:var(--tinte);
  padding:9px 16px; border-radius:var(--r); font:inherit; font-size:15px; font-weight:600;
  cursor:pointer; text-decoration:none; text-align:center; min-height:42px;
}
.knopf:hover{background:var(--karte2); color:var(--tinte)}
.knopf.akzent{background:var(--gruen); border-color:var(--gruen); color:#fff}
.knopf.akzent:hover{background:var(--gruen-dunkel); border-color:var(--gruen-dunkel); color:#fff}
:root[data-thema="dunkel"] .knopf.akzent, :root:not([data-thema="hell"]) .knopf.akzent{color:#08201C}
@media (prefers-color-scheme: light){ :root:not([data-thema="dunkel"]) .knopf.akzent{color:#fff} }
.knopf.gefahr{border-color:var(--rot); color:var(--rot)}
.knopf.gefahr:hover{background:var(--rot-hell)}
.knopf.klein{padding:6px 12px; font-size:14px; min-height:34px}
.knopf.breit{width:100%}
.knopf.schlicht{border-color:transparent; background:transparent; font-weight:500; color:var(--tinte-weich)}
.knopf.schlicht:hover{background:var(--karte2); color:var(--tinte)}
.knopf[disabled]{opacity:.5; cursor:not-allowed}

/* ---------------------------------------------------------------- Formulare */
.formular{display:flex; flex-direction:column; gap:18px}
.feldreihe{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px}
.feld{display:flex; flex-direction:column; gap:6px}
.feld > label, .feldsatz > legend{font-size:13.5px; font-weight:600; color:var(--tinte-weich)}
.feld .hilfe{font-size:12.5px; color:var(--tinte-blass); line-height:1.45}
.feld input[type=text], .feld input[type=email], .feld input[type=password], .feld input[type=date],
.feld input[type=number], .feld input[type=tel], .feld select, .feld textarea{
  background:var(--karte); border:1px solid var(--linie2); border-radius:var(--r);
  padding:10px 12px; font:inherit; font-size:16px; color:var(--tinte); width:100%; min-height:44px;
}
.feld textarea{min-height:96px; resize:vertical; line-height:1.5}
.feld input:hover, .feld select:hover, .feld textarea:hover{border-color:var(--grau)}
.feld input[aria-invalid=true], .feld select[aria-invalid=true]{border-color:var(--rot); background:var(--rot-hell)}
.feld input[type=file]{font-size:14.5px}
.feldsatz{border:1px solid var(--linie); border-radius:var(--r); padding:16px 18px; margin:0}
.feldsatz > legend{padding:0 6px}
.formfuss{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding-top:4px}
.schalter{display:flex; align-items:flex-start; gap:10px; font-size:15px; cursor:pointer; line-height:1.45}
.schalter input{width:20px; height:20px; margin:1px 0 0; flex:none; accent-color:var(--gruen)}
.pflicht{color:var(--rot)}
.fehlertext{color:var(--rot); font-size:13.5px}

/* Betragseingabe mit Währungszeichen */
.betrag-feld{position:relative}
.betrag-feld input{padding-right:34px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
.betrag-feld::after{content:"€"; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--tinte-blass)}

/* ---------------------------------------------------------------- Tabellen */
.tabellenrahmen{overflow-x:auto; border:1px solid var(--linie); border-radius:var(--r); background:var(--karte)}
table.liste{border-collapse:collapse; width:100%; min-width:640px; font-size:15px}
table.liste th, table.liste td{padding:11px 15px; text-align:left; border-bottom:1px solid var(--linie); vertical-align:top}
table.liste thead th{
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinte-blass);
  font-weight:700; background:var(--karte2); border-bottom:1px solid var(--linie2); white-space:nowrap;
}
table.liste tbody tr:last-child td{border-bottom:0}
table.liste tbody tr:hover{background:var(--karte2)}
table.liste td.r, table.liste th.r{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
table.liste td.eng{white-space:nowrap}
table.liste td.aktionen{text-align:right; white-space:nowrap}
table.liste tfoot td{font-weight:700; background:var(--karte2); border-top:1px solid var(--linie2)}

.leer{padding:44px 20px; text-align:center; color:var(--tinte-weich)}
.leer h3{margin-bottom:7px}
.leer p{max-width:46ch; margin:0 auto 16px; font-size:15px}

/* ---------------------------------------------------------------- Filterleiste */
.filter{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px;
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--r); padding:14px 16px;
}
.filter .feld{gap:4px; min-width:145px}
.filter .feld > label{font-size:12px}
.filter input, .filter select{min-height:40px; padding:7px 10px; font-size:15px}

/* ---------------------------------------------------------------- Schritte / NBA */
.modul{border:1px solid var(--linie); border-radius:var(--r); background:var(--karte); margin-bottom:14px; overflow:hidden}
.modul-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 18px; background:var(--karte2); border-bottom:1px solid var(--linie); flex-wrap:wrap;
}
.modul-kopf h3{font-size:17px}
.modul-kopf .gewicht{font-size:12.5px; color:var(--tinte-weich)}
.modul-punkte{font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--gruen)}
.modul-koerper{padding:6px 18px 14px}
.modul-hinweis{font-size:14px; color:var(--tinte-weich); padding:12px 0 4px; line-height:1.55}
.kriterium{padding:14px 0; border-bottom:1px solid var(--linie)}
.kriterium:last-child{border-bottom:0}
.kriterium-titel{font-weight:600; font-size:15.5px; display:flex; gap:9px; align-items:baseline}
.kriterium-nr{font-family:var(--schrift-zahl); font-size:11.5px; color:var(--tinte-blass); flex:none; min-width:32px}
.kriterium-hilfe{font-size:13.5px; color:var(--tinte-blass); margin:3px 0 9px 41px; line-height:1.45}
.wahl{display:flex; gap:7px; flex-wrap:wrap; margin-left:41px}
@media (max-width:600px){ .kriterium-hilfe, .wahl{margin-left:0} }
.wahl label{
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px; cursor:pointer;
  border:1px solid var(--linie2); border-radius:99px; font-size:14px; background:var(--karte);
  min-height:38px;
}
.wahl label:hover{background:var(--karte2)}
.wahl input{position:absolute; opacity:0; width:0; height:0}
.wahl input:checked + span{font-weight:700}
.wahl label:has(input:checked){background:var(--gruen); border-color:var(--gruen); color:#fff}
.wahl label:has(input:focus-visible){outline:3px solid var(--gruen); outline-offset:2px}
.wahl .pkt{font-family:var(--schrift-zahl); font-size:11.5px; opacity:.75}

.ergebnis{
  position:sticky; top:120px; background:var(--karte); border:1px solid var(--linie2);
  border-radius:var(--r); padding:20px 22px; box-shadow:var(--schatten);
}
.ergebnis .gross{font-size:44px; font-weight:700; line-height:1.05; color:var(--gruen); font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.skala{display:flex; height:10px; border-radius:99px; overflow:hidden; background:var(--senke); margin:14px 0 8px}
.skala i{display:block; background:var(--gruen)}
.schwellenliste{display:flex; flex-direction:column; gap:0; margin-top:10px}
.schwellenliste div{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--linie); font-size:14px}
.schwellenliste div:last-child{border-bottom:0}
.schwellenliste div.erreicht{color:var(--gruen); font-weight:600}

/* ---------------------------------------------------------------- Tarif */
.tarife{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.tarifkarte{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--r);
  padding:24px 24px 26px; display:flex; flex-direction:column; gap:14px;
}
.tarifkarte.empfohlen{border:2px solid var(--gruen); box-shadow:var(--schatten)}
.tarifkarte .preis{font-size:38px; font-weight:700; letter-spacing:-.03em; line-height:1}
.tarifkarte .preis small{font-size:15px; font-weight:400; color:var(--tinte-weich); letter-spacing:0}
.tarifkarte ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:15px}
.tarifkarte li{display:flex; gap:10px; align-items:flex-start; line-height:1.45}
.tarifkarte li::before{content:"✓"; color:var(--gruen); font-weight:700; flex:none}
.tarifkarte li.nein{color:var(--tinte-blass)}
.tarifkarte li.nein::before{content:"–"; color:var(--tinte-blass)}

/* ---------------------------------------------------------------- Zeitleiste */
.verlauf{display:flex; flex-direction:column}
.verlauf-eintrag{display:grid; grid-template-columns:104px 1fr; gap:0 16px; padding:11px 0; border-bottom:1px solid var(--linie); font-size:14.5px}
.verlauf-eintrag:last-child{border-bottom:0}
.verlauf-zeit{color:var(--tinte-blass); font-size:13px; font-family:var(--schrift-zahl)}

/* ---------------------------------------------------------------- Anmeldung */
.anmeldekarte{background:var(--karte); border:1px solid var(--linie); border-radius:var(--r); padding:30px 30px 32px; box-shadow:var(--schatten)}
.anmeldekopf{text-align:center; margin-bottom:24px}
.anmeldekopf .marke-zeichen{width:52px; height:52px; margin:0 auto 15px}
.anmeldekopf p{color:var(--tinte-weich); font-size:15px; margin-top:7px}
.anmeldefuss{text-align:center; margin-top:20px; font-size:14.5px; color:var(--tinte-weich)}

/* ---------------------------------------------------------------- Druck */
@media print{
  .kopf,.hauptnav,.fuss,.werkzeuge,.knopf,.filter,.meldung{display:none!important}
  body{background:#fff; color:#000; font-size:11pt}
  .inhalt{max-width:none; padding:0}
  .karte{border:0; padding:0}
  table.liste{min-width:0; font-size:10pt}
  table.liste thead th{background:#eee; color:#000}
  a{color:#000; text-decoration:none}
  .druckbogen{page-break-inside:avoid}
}

/* ---------------------------------------------------------------- Sonstiges */
.trenner{height:1px; background:var(--linie); border:0; margin:24px 0}
.hinweisbox{background:var(--karte2); border-radius:var(--r); padding:15px 17px; font-size:14.5px; color:var(--tinte-weich); line-height:1.55}
.hinweisbox strong{color:var(--tinte)}
.paare{display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:9px 20px; font-size:15px}
.paare dt{color:var(--tinte-weich)}
.paare dd{margin:0; font-weight:600}
.stapel{display:flex; flex-direction:column; gap:14px}
.reihe{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }