/* Leitlinien-Check — Gestaltungssystem v2 (12.09.2026).
 *
 * Grundlage sind zwei Recherchen: das NHS Digital Service Manual / GOV.UK Design System (beide ausdrücklich mit
 * Menschen mit geringer Lese- und Gesundheitskompetenz getestet) und die Gestaltung deutscher Gesundheitsangebote
 * (gesund.bund.de, gesundheitsinformation.de, washabich.de). Übernommen wurde daraus:
 *
 *   Typografie  17 px mobil / 19 px ab Tablet, Zeilenhöhe 1.6, Textspalte auf ~68 Zeichen begrenzt.
 *   Farbe       heller Grund (#F7F9FB) statt Weiß — weniger Blendung, hilft bei Legasthenie; Karten in Weiß darauf.
 *               Jeder Wert auf WCAG-Kontrast geprüft. Kein Signalrot, kein Gelb als Textfarbe: gedämpftes Ziegelrot
 *               und Bernstein wirken ernst statt alarmierend („weder verharmlosend noch angsterzeugend",
 *               Methodenpapier gesund.bund.de).
 *   Status      immer drei Kanäle: Farbe UND Symbol UND Wort (WCAG 1.4.1). Farbe als linker Balken, nie als Fläche.
 *   Fokus       gelber Rahmen nach NHS — gegen jeden Hintergrund getestet, nie wegoptimieren.
 *   Knöpfe      mindestens 44 px hoch, mit dunklerer Unterkante als Druckgefühl; genau ein Primärknopf je Bildschirm.
 *   Schrift     System-Stack, keine externe Datei (kein CDN, keine Google Fonts — DSGVO).
 *
 * Die alten Variablennamen bleiben als Zuordnung erhalten, damit bestehende Vorlagen weiterlaufen.
 */

:root {
  /* --- Farbe: Blaufamilie (das De-facto-Blau deutscher Gesundheitsangebote, auf Kontrast gerechnet) ------------- */
  --blau-800:#0e3d66;   /* Knopf gedrückt, Unterkante */
  --blau-700:#14548c;   /* Links, Akzentschrift — 7,85:1 auf Weiß (AAA) */
  --blau-600:#1a6baf;   /* Primärknopf — 5,58:1 mit weißer Schrift */
  --blau-100:#cfe2f2;   /* heller Rahmen */
  --blau-50:#eef5fb;    /* Infofläche */
  /* --- Statusfarben: gedämpft, mit eigener Tönungsfläche ------------------------------------------------------- */
  --gruen-700:#1e6b41;  --gruen-50:#eaf5ee;
  --bernstein-800:#7a4b00; --bernstein-50:#fdf4e3;
  --rot-700:#a3231c;    --rot-50:#fceeec;
  --teal-700:#0f7a73;
  /* --- Neutraltöne ---------------------------------------------------------------------------------------------- */
  --text-900:#1b2733;   /* Überschriften — 15,2:1 */
  --text-700:#33414f;   /* Fließtext — 10,5:1 */
  --text-500:#5c6b7a;   /* Nebentext — 5,5:1, nicht heller werden */
  --rahmen:#d8dee5;
  --rahmen-stark:#9aa8b5;
  --feld-rahmen:#5c6b7a;  /* Eingabefelder brauchen einen dunkleren Rahmen als Trennlinien */
  --flaeche:#f7f9fb;
  --karte:#ffffff;
  --fokus:#ffeb3b;
  --fokus-text:#1b2733;

  /* --- Abstandsskala: eine Skala, überall dieselbe --------------------------------------------------------------- */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem;
  --r-s:6px; --r-m:10px; --r-l:14px;
  --lesebreite:68ch;
  --seitenbreite:1040px;

  /* --- Zuordnung der alten Namen (bestehende Vorlagen) ------------------------------------------------------------ */
  --tinte:var(--text-900); --text:var(--text-700); --grau:var(--text-500); --leise:var(--text-500);
  --linie:var(--rahmen); --linie-stark:var(--rahmen-stark); --grund:var(--flaeche);
  --akzent:var(--blau-600); --akzent-dunkel:var(--blau-700); --akzent-hell:var(--blau-50);
  --gruen:var(--gruen-700); --gruen-hell:var(--gruen-50);
  --gelb:var(--bernstein-800); --gelb-hell:var(--bernstein-50);
  --rot:var(--rot-700); --rot-hell:var(--rot-50);
  --radius:var(--r-m);
  --schatten:0 1px 2px rgb(27 39 51 / .04);
}

* { box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto } *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important } }

body {
  margin:0; background:var(--flaeche); color:var(--text-700);
  font:400 1.0625rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (min-width:641px) { body { font-size:1.1875rem; line-height:1.6 } }

h1,h2,h3,h4 { color:var(--text-900); line-height:1.25; font-weight:700; text-wrap:balance }
h1 { font-size:1.75rem; margin:0 0 var(--s4) }
h2 { font-size:1.375rem; margin:var(--s7) 0 var(--s3) }
h3 { font-size:1.125rem; margin:var(--s5) 0 var(--s2) }
h4 { font-size:1rem; margin:var(--s4) 0 var(--s1) }
@media (min-width:641px) { h1 { font-size:2.25rem } h2 { font-size:1.625rem } h3 { font-size:1.25rem } }
p { margin:0 0 var(--s4) }
ul,ol { margin:0 0 var(--s4); padding-left:1.3em } li { margin:.2em 0 }
strong { color:var(--text-900) }
.klein { color:var(--text-500); font-size:.9375rem; line-height:1.5 }
.leise-text { color:var(--text-500) }
hr { border:0; border-top:1px solid var(--rahmen); margin:var(--s6) 0 }

/* Lesbarkeit: Fließtext läuft nie über die ganze Breite. Tabellen, Raster und Kacheln dürfen breiter sein. */
main p, main li, main h1, main h2, main h3, main h4, .lesespalte { max-width:var(--lesebreite) }

a { color:var(--blau-700); text-underline-offset:.18em; text-decoration-thickness:.08em }
a:hover { color:var(--blau-800) }

/* Fokus: gelb, kräftig, überall gleich — nach NHS gegen jeden Hintergrund geprüft. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline:4px solid var(--fokus); outline-offset:0; background:var(--fokus); color:var(--fokus-text);
  text-decoration:none; box-shadow:0 3px 0 var(--text-900); border-radius:2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:4px solid var(--fokus); outline-offset:0; border-color:var(--text-900);
  box-shadow:inset 0 0 0 2px var(--text-900); background:#fff;
}
.skip { position:absolute; left:-999px }
.skip:focus { left:var(--s4); top:var(--s4); background:#fff; padding:var(--s2) var(--s4); z-index:20; border-radius:var(--r-s) }

/* --- Kopf und Fuß ------------------------------------------------------------------------------------------- */
.kopf { background:var(--karte); border-bottom:1px solid var(--rahmen); position:sticky; top:0; z-index:5 }
.kopf .innen { max-width:1180px; margin:0 auto; padding:var(--s3) var(--s5); display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap }
.marke { display:flex; align-items:center; gap:var(--s3); text-decoration:none; color:var(--text-900); font-weight:700; font-size:1.0625rem }
.marke .logo { width:38px; height:38px; border-radius:9px; background:var(--blau-600); display:grid; place-items:center; color:#fff; font-size:.95rem; font-weight:800; letter-spacing:.02em }
.marke small { display:block; font-weight:400; color:var(--text-500); font-size:.8125rem; line-height:1.25; max-width:34ch }
.nav { display:flex; gap:var(--s1); margin-left:auto; flex-wrap:wrap; align-items:center }
.nav a { text-decoration:none; color:var(--text-700); padding:.5rem .65rem; border-radius:var(--r-s); font-size:.9375rem; min-height:44px; display:inline-flex; align-items:center }
.nav a:hover { background:var(--blau-50); color:var(--blau-800) }
.nav a.aktiv { background:var(--blau-50); color:var(--blau-800); font-weight:700; box-shadow:inset 0 -3px 0 var(--blau-600) }
.nav a.primaer { background:var(--blau-600); color:#fff; font-weight:700 } .nav a.primaer:hover { background:var(--blau-700); color:#fff }
.pilot { background:var(--bernstein-50); color:var(--bernstein-800); border-bottom:1px solid #efdcae; font-size:.9375rem; text-align:center; padding:var(--s2) var(--s4) }
main { max-width:var(--seitenbreite); margin:var(--s6) auto var(--s8); padding:0 var(--s5) }
.fuss { border-top:1px solid var(--rahmen); background:var(--karte); margin-top:var(--s7) }
.fuss .innen { max-width:1180px; margin:0 auto; padding:var(--s6) var(--s5); display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s5); font-size:.9375rem; color:var(--text-500) }
.fuss a { color:var(--text-700); text-decoration:none } .fuss a:hover { text-decoration:underline }
.fuss ul { list-style:none; margin:var(--s2) 0 0; padding:0 } .fuss li { margin:.25rem 0 }
.fuss h4 { margin:0 0 var(--s2); font-size:.9375rem; color:var(--text-900) }

/* --- Flächen ----------------------------------------------------------------------------------------------- */
.karte { background:var(--karte); border:1px solid var(--rahmen); border-radius:var(--r-m); padding:var(--s5) var(--s6); margin-bottom:var(--s5); box-shadow:var(--schatten) }
.karte > :first-child { margin-top:0 }
.karte > :last-child { margin-bottom:0 }
.raster { display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.raster .karte { margin:0; display:flex; flex-direction:column }
.einfach { max-width:46rem }

/* --- Einstieg -------------------------------------------------------------------------------------------- */
.hero { padding:var(--s6) 0 var(--s4) }
.hero h1 { font-size:2rem; max-width:20ch }
@media (min-width:641px) { .hero h1 { font-size:2.625rem } }
.hero p.lead { font-size:1.1875rem; max-width:60ch; color:var(--text-700) }
@media (min-width:641px) { .hero p.lead { font-size:1.3125rem; line-height:1.5 } }
.hero .aktionen { display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5) }

/* Vertrauensanker direkt an der Handlung (Muster washabich.de) */
.vertrauen { display:flex; gap:var(--s2) var(--s5); flex-wrap:wrap; margin:var(--s5) 0 0; padding:0; list-style:none; font-size:.9375rem; color:var(--text-700) }
.vertrauen li { display:flex; gap:var(--s2); align-items:center; font-weight:600 }
.vertrauen svg { flex:none; width:1.25rem; height:1.25rem; color:var(--gruen-700) }

.merkmale { display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); margin:var(--s6) 0 }
.merkmal { display:flex; gap:var(--s3); align-items:flex-start; font-size:.9375rem; line-height:1.5 }
.merkmal .icon { flex:none; width:40px; height:40px; border-radius:var(--r-s); background:var(--blau-50); color:var(--blau-700); display:grid; place-items:center }
.merkmal .icon svg { width:22px; height:22px }
.merkmal strong { display:block; color:var(--text-900) }

/* Nummerierter Ablauf */
.ablauf { list-style:none; counter-reset:a; margin:var(--s4) 0; padding:0; display:grid; gap:var(--s4) }
.ablauf li { counter-increment:a; display:grid; grid-template-columns:2.5rem 1fr; gap:var(--s4); align-items:start }
.ablauf li::before { content:counter(a); grid-row:span 2; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--blau-600); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.0625rem }
.ablauf strong { display:block; color:var(--text-900); font-size:1.0625rem }
.ablauf small { display:block; color:var(--text-500); font-size:.9375rem; line-height:1.5 }

/* Schrittanzeige je Fall */
.schritte { display:flex; gap:var(--s2); flex-wrap:wrap; margin:0 0 var(--s5); padding:0; list-style:none; counter-reset:s }
.schritte li { flex:1 1 180px; background:var(--karte); border:1px solid var(--rahmen); border-radius:var(--r-s); padding:var(--s3) var(--s4); font-size:.9375rem; counter-increment:s; color:var(--text-500) }
.schritte li::before { content:counter(s); display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--rahmen); color:var(--text-900); font-weight:800; margin-right:var(--s2); font-size:.8125rem }
.schritte li.aktiv { border-color:var(--blau-600); box-shadow:inset 0 -3px 0 var(--blau-600); color:var(--text-900) }
.schritte li.aktiv::before { background:var(--blau-600); color:#fff }
.schritte li.fertig::before { background:var(--gruen-700); color:#fff; content:"✓" }
.schritte li.optional { border-style:dashed } .schritte li strong { color:inherit } .schritte li small { display:block; color:var(--text-500) }

/* --- Knöpfe ------------------------------------------------------------------------------------------------ */
button, .knopf {
  font:inherit; font-size:1.0625rem; font-weight:700; min-height:44px;
  background:var(--blau-600); color:#fff; border:2px solid transparent; border-radius:var(--r-s);
  padding:.65rem 1.4rem; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  box-shadow:0 3px 0 var(--blau-800); position:relative;
}
button:hover, .knopf:hover { background:var(--blau-700); color:#fff }
button:active, .knopf:active { background:var(--blau-800); top:3px; box-shadow:none }
button:focus-visible, .knopf:focus-visible { background:var(--fokus); color:var(--fokus-text); box-shadow:0 3px 0 var(--text-900) }
button.leise, .knopf.leise { background:var(--karte); color:var(--blau-700); border-color:var(--blau-100); box-shadow:0 3px 0 var(--blau-100) }
button.leise:hover, .knopf.leise:hover { background:var(--blau-50); color:var(--blau-800) }
button.gefahr { background:var(--rot-700); box-shadow:0 3px 0 #6b140e } button.gefahr:hover { background:#8a1d17; color:#fff }
button[disabled] { opacity:.55; cursor:not-allowed; box-shadow:none }

/* --- Formulare --------------------------------------------------------------------------------------------- */
label { font-weight:600; font-size:1rem; color:var(--text-900) }
/* Fehler nach NHS-Muster: Zusammenfassung oben, derselbe Wortlaut am Feld, Farbe nie allein (WCAG 1.4.1) —
   deshalb Rahmen, das Wort „Fehler" und die Verschiebung des Feldes, nicht nur Rot. */
.fehlerbox { border:4px solid var(--rot-700); border-radius:var(--r-s); padding:var(--s4) var(--s5); margin:0 0 var(--s6); background:#fff }
/* Die gelbe Fokusfläche ist für Knöpfe und Links gedacht; auf einem ganzen Kasten wäre sie eine gelbe Warnfläche —
   genau das, was die Gestaltungsregeln ausschließen. Der Kasten bekommt den Fokusrahmen, aber nicht die Füllung. */
.fehlerbox:focus, .fehlerbox:focus-visible { outline:4px solid var(--fokus); outline-offset:3px; background:#fff; color:inherit; box-shadow:none }
.fehlerbox h2 { font-size:1.25rem; margin:0 0 var(--s2); color:var(--rot-700) }
.fehlerbox ul { margin:0; padding-left:1.2em } .fehlerbox li { margin:.25rem 0 }
.fehlerbox a { color:var(--rot-700); text-decoration-thickness:2px }
.feldfehler { display:block; color:var(--rot-700); font-weight:600; font-size:1rem; line-height:1.5; margin:.15rem 0 var(--s2) }
.feld.fehlerhaft { border-left:5px solid var(--rot-700); padding-left:var(--s4) }
.versteckt { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* Zugeklappte ältere Messwerte auf der Prüfseite — ohne JavaScript über ein Kontrollkästchen.
   Die Zeilen bleiben im Formular und werden mitgeschickt; sie sind nur nicht zu sehen. */
.schalter { position:absolute; opacity:0; width:1px; height:1px }
.schalter-knopf { display:inline-block; margin:0 0 var(--s3); padding:.5rem .8rem; min-height:44px; line-height:1.9;
  border:2px solid var(--blau-700); border-radius:var(--r-s); color:var(--blau-700); background:#fff; cursor:pointer; font-weight:600 }
.schalter:focus-visible + .schalter-knopf { outline:4px solid var(--fokus); outline-offset:2px }
.schalter:not(:checked) ~ table tr.aelter { display:none }
tr.aelter { background:var(--flaeche) }
/* Die Marke steht neben dem Feld, nicht darüber — sonst wird die Zeile höher als die anderen und die Spalten stehen versetzt. */
tr.aelter td:first-child { display:flex; align-items:center; gap:.5rem }
.marke-aelter { flex:0 0 auto; font-size:.8125rem; font-weight:700; color:var(--text-500); letter-spacing:.02em }

/* Wörtlicher Leitliniensatz in der Punktkarte: abgesetzt, damit man sieht, wo das Zitat anfängt. */
.leitlinienzitat { margin:.2rem 0 var(--s4); padding:var(--s3) var(--s4); border-left:4px solid var(--rahmen);
  background:var(--flaeche); border-radius:0 var(--r-s) var(--r-s) 0; font-size:1rem; line-height:1.6; color:var(--text-700) }
.punktkarte p.nurlabel { margin-bottom:.2rem }

.feld { margin:0 0 var(--s5) }
.feld .hilfe { display:block; font-weight:400; color:var(--text-500); font-size:.9375rem; line-height:1.5; margin:.15rem 0 var(--s2) }
input, select, textarea {
  font:inherit; font-size:1.0625rem; min-height:44px; padding:.55rem .7rem; width:100%;
  border:2px solid var(--feld-rahmen); border-radius:var(--r-s); background:#fff; color:var(--text-700);
}
textarea { min-height:7rem; line-height:1.5 }
input[type=checkbox], input[type=radio] { width:1.5rem; height:1.5rem; min-height:0; flex:none; margin:.1rem var(--s2) 0 0; accent-color:var(--blau-600) }
input::placeholder, textarea::placeholder { color:var(--text-500); opacity:1 }
.frage { font-size:1.1875rem; font-weight:700; color:var(--text-900); margin:var(--s6) 0 var(--s2) }

.wahl { display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)) }
.wahl label { display:block; border:2px solid var(--rahmen); border-radius:var(--r-m); padding:var(--s4); cursor:pointer; font-weight:500; background:var(--karte); min-height:44px }
.wahl label:hover { border-color:var(--rahmen-stark) }
.wahl label:has(input:checked) { border-color:var(--blau-600); background:var(--blau-50); box-shadow:inset 0 0 0 1px var(--blau-600) }
.wahl label span.t { font-weight:700; display:block; color:var(--text-900) }
.wahl label span.k { color:var(--text-500); font-size:.9375rem; display:block; line-height:1.5 }

.datei { border:2px dashed var(--rahmen-stark); border-radius:var(--r-m); padding:var(--s5); text-align:center; background:var(--blau-50) }
.datei input { border:0; background:none; width:auto; min-height:0 }

/* Auswahlkacheln: ganze Fläche klickbar, Trefferfläche mindestens 44 px */
.kacheln { display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); margin:var(--s3) 0 }
.kachel { display:flex; gap:var(--s3); align-items:flex-start; border:2px solid var(--rahmen); border-radius:var(--r-m); padding:var(--s4); background:var(--karte); cursor:pointer; font-weight:500; min-height:44px }
.kachel:hover { border-color:var(--rahmen-stark) }
.kachel:has(input:checked) { border-color:var(--blau-600); background:var(--blau-50); box-shadow:inset 0 0 0 1px var(--blau-600) }
.kachel:has(input:focus-visible) { outline:4px solid var(--fokus); outline-offset:2px }
.kachel input { margin-top:.15rem }
.kachel .t { font-weight:700; display:block; color:var(--text-900) }
.kachel .e { display:block; color:var(--text-500); font-size:.9375rem; font-weight:400; margin-top:.15rem; line-height:1.5 }
/* Das Jahr wird erst gefragt, wenn die Krankheit angekreuzt ist — sonst stehen 19 leere Felder auf der Seite.
   Ohne :has()-Unterstützung bleibt das Feld sichtbar; das ist die harmlosere Richtung. */
.kachel .seit { display:block; margin-top:var(--s3) }
.kachel .seit input { width:13.5rem; min-height:44px }
@supports selector(:has(*)) {
  .kachel .seit { display:none }
  .kachel:has(input:checked) .seit { display:block }
}

/* Medikamentenzeilen, Werte */
.medzeile { border:1px solid var(--rahmen); border-radius:var(--r-m); padding:var(--s4) var(--s5); margin:var(--s4) 0; background:var(--karte) }
.medzeile .kopfzeile { display:grid; gap:var(--s4); grid-template-columns:2fr 1fr }
.medzeile .zeile2 { display:grid; gap:var(--s4); grid-template-columns:1fr 1fr; margin-top:var(--s4) }
.einnahme { display:grid; gap:var(--s3); grid-template-columns:repeat(4,1fr); margin-top:var(--s4) }
.einnahme label { font-weight:600; font-size:.9375rem; color:var(--text-500); text-align:center; display:block; margin-bottom:.15rem }
.einnahme select { text-align:center }
.wertzeile { display:grid; gap:var(--s4); grid-template-columns:1.6fr 1fr 1fr; align-items:end; padding:var(--s4) 0; border-bottom:1px solid var(--rahmen) }
.wertzeile .name { font-weight:700; color:var(--text-900) }
.wertzeile .name small { display:block; font-weight:400; color:var(--text-500); font-size:.9375rem; line-height:1.5 }
@media (max-width:600px) { .medzeile .kopfzeile, .medzeile .zeile2 { grid-template-columns:1fr } .einnahme { grid-template-columns:repeat(2,1fr) } .wertzeile { grid-template-columns:1fr 1fr } .wertzeile .name { grid-column:1 / -1 } }

/* Fortschritt in der Erfassungsstrecke */
.fortschritt { display:flex; gap:var(--s2); align-items:center; font-size:.9375rem; color:var(--text-500); margin-bottom:var(--s3); flex-wrap:wrap }
.fortschritt .punkt { width:2.25rem; height:.375rem; border-radius:999px; background:var(--rahmen) }
.fortschritt .punkt.an { background:var(--blau-600) } .fortschritt .punkt.fertig { background:var(--gruen-700) }

/* --- Hinweise: Farbe als Balken, nie als Fläche über den ganzen Block ---------------------------------------- */
.hinweis { background:var(--bernstein-50); border:1px solid transparent; border-left:5px solid var(--bernstein-800); border-radius:0 var(--r-s) var(--r-s) 0; padding:var(--s4) var(--s5); color:var(--text-700); font-size:1rem; line-height:1.55 }
.hinweis strong { color:var(--text-900) }
.hinweis.gruen { background:var(--gruen-50); border-left-color:var(--gruen-700) }
.hinweis.blau { background:var(--blau-50); border-left-color:var(--blau-600) }
.hinweis.rot { background:var(--rot-50); border-left-color:var(--rot-700) }
.hinweis > :first-child { margin-top:0 } .hinweis > :last-child { margin-bottom:0 }

/* „Auf einen Blick": steht ganz oben im Ergebnis (Vorbild gesund.bund.de) */
.auf-einen-blick { background:var(--blau-50); border-left:5px solid var(--blau-600); border-radius:0 var(--r-m) var(--r-m) 0; padding:var(--s5); margin:0 0 var(--s6) }
.auf-einen-blick h2 { margin:0 0 var(--s3); font-size:1.1875rem }
.auf-einen-blick p { margin:0 0 var(--s2); max-width:none }
.auf-einen-blick .zahlen { display:flex; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s4) }
.auf-einen-blick .zahl { display:flex; gap:var(--s2); align-items:center; font-weight:700; color:var(--text-900) }
.auf-einen-blick .zahl svg { width:1.25rem; height:1.25rem; flex:none }

.stufe { display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .6rem; border-radius:999px; background:var(--blau-50); color:var(--blau-800); font-size:.875rem; font-weight:700; border:1px solid var(--blau-100) }
.ki-kennzeichen { display:inline-flex; gap:var(--s2); align-items:center; font-size:.875rem; color:var(--text-500); border:1px solid var(--rahmen); border-radius:999px; padding:.2rem .75rem; background:var(--karte) }
.eigenangabe { display:inline-block; background:var(--blau-50); color:var(--blau-800); border:1px solid var(--blau-100); border-radius:999px; padding:.05rem .55rem; font-size:.8125rem; font-weight:700 }

/* --- Ergebnis: je Punkt eine Zeile mit Balken, Symbol und Wort ------------------------------------------------ */
.punktkarte { background:var(--karte); border:1px solid var(--rahmen); border-left:5px solid var(--rahmen-stark); border-radius:0 var(--r-m) var(--r-m) 0; padding:var(--s4) var(--s5); margin:var(--s4) 0 }
.punktkarte h3 { margin:0 0 var(--s2); font-size:1.125rem; display:flex; gap:var(--s3); align-items:flex-start }
.punktkarte h3 svg { flex:none; width:1.5rem; height:1.5rem; margin-top:.15rem }
.punktkarte p { margin:.3rem 0; max-width:none }
.punktkarte .wort { display:inline-block; font-size:.8125rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; margin-bottom:var(--s2) }
.punktkarte.s-abw { border-left-color:var(--rot-700) } .punktkarte.s-abw .wort, .punktkarte.s-abw h3 svg { color:var(--rot-700) }
.punktkarte.s-warn { border-left-color:var(--bernstein-800) } .punktkarte.s-warn .wort, .punktkarte.s-warn h3 svg { color:var(--bernstein-800) }
.punktkarte.s-hin { border-left-color:var(--bernstein-800) } .punktkarte.s-hin .wort, .punktkarte.s-hin h3 svg { color:var(--bernstein-800) }
.punktkarte.s-ok { border-left-color:var(--gruen-700) } .punktkarte.s-ok .wort, .punktkarte.s-ok h3 svg { color:var(--gruen-700) }
.punktkarte.s-arzt { border-left-color:var(--teal-700) } .punktkarte.s-arzt .wort, .punktkarte.s-arzt h3 svg { color:var(--teal-700) }
.punktkarte .frage { background:var(--blau-50); border-radius:var(--r-s); padding:var(--s3) var(--s4); margin-top:var(--s3) }
.punktkarte .beleg { color:var(--text-500); font-size:.875rem; margin-top:var(--s3) }
.punktkarte .anmerkung, .anmerkung { background:var(--gruen-50); border-left:4px solid var(--gruen-700); border-radius:0 var(--r-s) var(--r-s) 0; padding:var(--s3) var(--s4); margin-top:var(--s3) }
.feedback { display:flex; gap:var(--s2); align-items:center; margin-top:var(--s4); font-size:.9375rem; color:var(--text-500); flex-wrap:wrap; border-top:1px solid var(--rahmen); padding-top:var(--s3) }
.feedback button { padding:.4rem .8rem; font-size:.9375rem; font-weight:600; min-height:44px }
.feedback select { width:auto; min-height:44px; font-size:.9375rem }
.gruppe h2 { margin-top:var(--s7) } .legende { font-size:.9375rem; color:var(--text-500) }
.legende ul { list-style:none; padding:0; margin:var(--s2) 0 0; display:grid; gap:var(--s2); grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)) }
.legende li { display:flex; gap:var(--s2); align-items:center } .legende svg { flex:none; width:1.25rem; height:1.25rem }

/* Profilübersicht */
.profilkarten { display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr)) }
.profilkarte { display:block; text-decoration:none; color:inherit; border:1px solid var(--rahmen); border-radius:var(--r-m); padding:var(--s4) var(--s5); background:var(--karte); min-height:44px }
.profilkarte:hover { border-color:var(--blau-600); background:var(--blau-50) }
.profilkarte .kopf-icon { display:block; color:var(--blau-700); margin-bottom:var(--s2) } .profilkarte .kopf-icon svg { width:1.75rem; height:1.75rem }
.profilkarte .zahl { font-size:1.75rem; font-weight:800; color:var(--blau-800); line-height:1.1; display:block }
.profilkarte .was { font-weight:700; color:var(--text-900); display:block }
.profilkarte .rand { color:var(--text-500); font-size:.9375rem; display:block; line-height:1.45 }

/* Varianten (Servicestufen) */
.variante { border:2px solid var(--rahmen); border-radius:var(--r-m); padding:var(--s5); background:var(--karte); display:flex; flex-direction:column; gap:var(--s2) }
.variante.empfohlen { border-color:var(--blau-600) }
.variante .etikett { align-self:flex-start; background:var(--blau-50); color:var(--blau-800); font-size:.8125rem; padding:.15rem .7rem; border-radius:999px; font-weight:700 }
.variante h3 { margin:var(--s1) 0 } .variante .preis { font-size:1.1875rem; font-weight:800; color:var(--text-900) }
.variante .preis small { font-weight:400; color:var(--text-500); font-size:.875rem }
.variante ul { margin:var(--s2) 0 var(--s3) 1.1rem; padding:0; font-size:1rem } .variante .aktion { margin-top:auto }

/* --- Tabellen und Berichte --------------------------------------------------------------------------------- */
table { border-collapse:collapse; width:100%; font-size:1rem }
th, td { text-align:left; padding:var(--s3) var(--s2); border-bottom:1px solid var(--rahmen); vertical-align:top }
th { color:var(--text-500); font-weight:700; font-size:.8125rem; text-transform:uppercase; letter-spacing:.04em }
tbody tr:hover { background:var(--blau-50) }
.tabelle-scroll { overflow-x:auto; margin-bottom:var(--s4) }
.bericht h2 { border-bottom:1px solid var(--rahmen); padding-bottom:var(--s2) } .bericht h3 { margin-top:var(--s5) }
.bericht sub { color:var(--text-500) } .bericht blockquote { border-left:4px solid var(--rahmen); margin:var(--s2) 0 var(--s4); padding:var(--s2) var(--s4); color:var(--text-500) }
.bericht table { font-size:.9375rem }
/* Zusammenfassung in einfacher Sprache über dem verbindlichen Rechtstext: größere Schrift, kurze Sätze,
   klar als Zusammenfassung bezeichnet. Sie ersetzt den Wortlaut nicht, sie macht ihn zugänglich. */
.einfache-sprache { border-left:5px solid var(--blau-700) }
.einfache-sprache li { font-size:1.0625rem; line-height:1.6; margin:.45rem 0 }
.einfache-sprache ul { padding-left:1.15em }

.rechtstext h2 { font-size:1.1875rem; margin-top:var(--s6) } .rechtstext p, .rechtstext li { font-size:1.0625rem }

/* --- Öffentliche Startseite (ADR-0018) ------------------------------------------------------------------------
 * Wer nicht freigegeben ist, sieht nur diese Seite. Sie darf einladend sein, muss aber dieselben Regeln einhalten
 * wie der Rest: heller Grund, ein Primärknopf, Textspalte begrenzt, keine Farbfläche als Signal, keine Datei von
 * außen. Die Illustrationen sind Inline-SVG mit den Farben aus der Palette oben.
 */
.willkommen-hero { display:grid; gap:var(--s6); grid-template-columns:1fr; align-items:center; padding:var(--s6) 0 var(--s4) }
@media (min-width:900px) { .willkommen-hero { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s7) } }
.willkommen-hero .augenbraue { font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blau-700); margin:0 0 var(--s3) }
.willkommen-hero h1 { font-size:2rem; max-width:16ch; margin-bottom:var(--s4) }
@media (min-width:641px) { .willkommen-hero h1 { font-size:2.625rem } }
.willkommen-hero .lead { font-size:1.1875rem; max-width:52ch; color:var(--text-700) }
@media (min-width:641px) { .willkommen-hero .lead { font-size:1.25rem; line-height:1.55 } }
.willkommen-hero .aktionen { display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5) }
.willkommen-hero .vertrauen { margin-top:var(--s5) }

/* Die Illustration ist Schmuck, kein Inhalt: Sie schrumpft zuerst und verschwindet auf sehr schmalen Geräten nicht,
   sondern rückt unter den Text. */
.bild { min-width:0 }
.bild svg { display:block; width:100%; height:auto; max-width:520px; margin:0 auto }
.klein-bild svg { max-width:260px }
@media (max-width:899px) { .willkommen-hero .bild { order:2 } .willkommen-hero .text { order:1 } }

/* Zwei Spalten, die auf dem Handy untereinander stehen — für Text neben Hinweis oder Bild. */
.zweispalt { display:grid; gap:var(--s5); grid-template-columns:1fr; align-items:start }
@media (min-width:760px) { .zweispalt { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s6) } }
.zweispalt > * { min-width:0 }

/* „Was es nicht ist": bewusst nüchtern, kein rotes Warnfeld — die Liste soll ehrlich wirken, nicht abschreckend. */
.nichtliste { list-style:none; margin:var(--s3) 0 var(--s4); padding:0; display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) }
.nichtliste li { display:flex; gap:var(--s3); align-items:flex-start; font-size:1rem; line-height:1.55;
  background:var(--flaeche); border:1px solid var(--rahmen); border-radius:var(--r-s); padding:var(--s3) var(--s4); margin:0 }
.nichtliste svg { flex:none; width:1.25rem; height:1.25rem; margin-top:.2rem; color:var(--bernstein-800) }
.nichtliste span { max-width:none }

.teilnahme { background:var(--blau-50); border-color:var(--blau-100) }
.teilnahme .aktionen { display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5) }

/* --- Bild-Startseite (ADR-0018) ------------------------------------------------------------------------------
 * Ein Foto trägt keine Lesbarkeit. Weißer Text steht deshalb nie direkt auf dem Bild, sondern auf einem
 * Verlauf, der unten fast deckend ist. Gemessen auf dem hellsten Bildpunkt unter der Schrift: > 7:1.
 * Ohne Bild (Ladefehler, sehr langsame Verbindung) bleibt die Fläche dunkelblau — der Text ist dann
 * genauso lesbar wie mit.
 */
.bildhero { position:relative; margin:calc(-1 * var(--s6)) calc(-1 * var(--s5)) var(--s6);
  min-height:min(78vh,620px); display:flex; align-items:flex-end; overflow:hidden; background:var(--blau-800) }
.bildhero > picture, .bildhero > picture img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.bildhero::after { content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(8,32,54,.94) 0%, rgba(8,32,54,.86) 34%, rgba(8,32,54,.55) 62%, rgba(8,32,54,.30) 100%) }
.bildhero .inhalt { position:relative; z-index:1; padding:var(--s7) var(--s5) var(--s6); max-width:var(--seitenbreite);
  margin:0 auto; width:100% }
.bildhero .augenbraue { color:#bcd8f0; font-size:.875rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; margin:0 0 var(--s3) }
.bildhero h1 { color:#fff; font-size:2.125rem; max-width:17ch; margin:0 0 var(--s4); text-shadow:0 1px 2px rgb(0 0 0 / .35) }
@media (min-width:641px) { .bildhero h1 { font-size:3rem } }
.bildhero p.lead { color:#e8f1f9; font-size:1.125rem; max-width:48ch; margin:0 0 var(--s5) }
@media (min-width:641px) { .bildhero p.lead { font-size:1.3125rem; line-height:1.5 } }
.bildhero .aktionen { display:flex; gap:var(--s3); flex-wrap:wrap }
.bildhero .knopf.leise { background:rgb(255 255 255 / .12); color:#fff; border-color:rgb(255 255 255 / .55);
  box-shadow:0 3px 0 rgb(255 255 255 / .25) }
.bildhero .knopf.leise:hover { background:rgb(255 255 255 / .22); color:#fff }

/* Vertrauensband direkt unter dem Bild — die vier Zusagen, bevor irgendetwas anderes kommt. */
.band-vertrauen { background:var(--karte); border:1px solid var(--rahmen); border-radius:var(--r-m);
  padding:var(--s4) var(--s5); margin:0 0 var(--s6); display:grid; gap:var(--s3) var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); box-shadow:var(--schatten) }
.band-vertrauen div { display:flex; gap:var(--s3); align-items:center; font-weight:600; color:var(--text-900); font-size:.9375rem }
.band-vertrauen svg { flex:none; width:1.5rem; height:1.5rem; color:var(--gruen-700) }

/* Zahlenband: belegbare Zahlen, dunkel abgesetzt. Keine Prozentangaben ohne Grundlage. */
.band-zahlen { background:var(--blau-800); color:#fff; border-radius:var(--r-m); padding:var(--s6) var(--s5);
  margin:0 0 var(--s6); display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); text-align:center }
.band-zahlen .zahl { font-size:2.25rem; font-weight:800; line-height:1.05; color:#fff; display:block; letter-spacing:-.01em }
.band-zahlen .was { display:block; color:#bcd8f0; font-size:.9375rem; margin-top:var(--s2); line-height:1.4 }
.band-zahlen p { max-width:none; margin:0 }

/* Bild-Text-Bänder, abwechselnd. Auf dem Handy immer Bild oben, Text darunter. */
.band { display:grid; gap:var(--s5); grid-template-columns:1fr; align-items:center; margin:0 0 var(--s6) }
@media (min-width:860px) { .band { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s7) }
  .band.gedreht .bandbild { order:2 } }
.band .bandtext > :first-child { margin-top:0 }
.band .bandtext > :last-child { margin-bottom:0 }
.bandbild { margin:0 }
.bandbild img { display:block; width:100%; height:auto; border-radius:var(--r-m); background:var(--blau-50) }
.bandbild figcaption { color:var(--text-500); font-size:.875rem; line-height:1.45; margin-top:var(--s2) }

/* Kacheln mit Bild — für „wo es laufen kann". */
.bildkacheln { display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); margin:var(--s5) 0 var(--s6) }
.bildkachel { background:var(--karte); border:1px solid var(--rahmen); border-radius:var(--r-m); overflow:hidden; box-shadow:var(--schatten) }
.bildkachel img { display:block; width:100%; height:auto; background:var(--blau-50) }
.bildkachel .text { padding:var(--s4) var(--s5) var(--s5) }
.bildkachel h3 { margin:0 0 var(--s2) }
.bildkachel p { margin:0; font-size:1rem; color:var(--text-700) }

/* Abschlussband: eine Handlung, sonst nichts. */
.band-abschluss { background:var(--blau-50); border:1px solid var(--blau-100); border-radius:var(--r-m);
  padding:var(--s6) var(--s5); margin:0 0 var(--s5); text-align:center }
.band-abschluss h2 { margin:0 0 var(--s3) } .band-abschluss p { margin:0 auto var(--s5); max-width:52ch }
.band-abschluss .aktionen { display:flex; gap:var(--s3); flex-wrap:wrap; justify-content:center }

/* Bildnachweis: Die Bilder sind KI-erzeugt, und das steht da. Auf einer Seite über KI-Transparenz
   wäre alles andere peinlich — und Artikel 50 der KI-Verordnung verlangt es ohnehin. */
.bildnachweis { color:var(--text-500); font-size:.875rem; line-height:1.5; border-top:1px solid var(--rahmen);
  padding-top:var(--s4); margin:0 }

@media (max-width:640px) {
  main { padding:0 var(--s4); margin-top:var(--s5) }
  .karte { padding:var(--s4) }
  .kopf .innen { gap:var(--s3); padding:var(--s3) var(--s4) } .nav { margin-left:0 }
  .marke small { display:none }
  .hero, .willkommen-hero { padding:var(--s5) 0 var(--s2) }
  .bildhero { margin:calc(-1 * var(--s5)) calc(-1 * var(--s4)) var(--s5); min-height:min(72vh,520px) }
  .bildhero .inhalt { padding:var(--s6) var(--s4) var(--s5) }
  .band-zahlen .zahl { font-size:1.875rem }
  .willkommen-hero h1 { font-size:1.75rem }
}


/* ===============================================================================================
 * Öffentliche Startseite — Entwurfspaket „Tech-Variante" (Jens, 16.09.2026)
 * ===============================================================================================
 * Creme-Grund, Petrol-Akzent, Serifen-Überschriften, dezente Netzwerklinien. Gilt nur für
 * `body.entwurf`; hinter der Anmeldung bleibt das blaue System unverändert.
 */
body.entwurf {
  --e-grund:#f7f8f4; --e-tinte:#142f40; --e-akzent:#287d79; --e-akzent-dunkel:#1f6b67;
  --e-tech:#76afc0; --e-flaeche:#e6ede7; --e-linie:#d2e2e3; --e-dunkel:#0f3a46;
  --e-serif:Georgia,"Times New Roman",serif;
  background:var(--e-grund); color:var(--e-tinte);
}
body.entwurf h1, body.entwurf h2, body.entwurf h3 { font-family:var(--e-serif); color:var(--e-tinte); font-weight:400; letter-spacing:-.01em }
body.entwurf h1 { font-size:2.25rem; line-height:1.12 }
@media (min-width:760px) { body.entwurf h1 { font-size:3.25rem } }
body.entwurf h2 { font-size:1.75rem; line-height:1.18 }
@media (min-width:760px) { body.entwurf h2 { font-size:2.5rem } }
body.entwurf h3 { font-size:1.125rem; font-family:inherit; font-weight:700 }
body.entwurf a { color:var(--e-akzent-dunkel) }
body.entwurf main { max-width:none; margin:0; padding:0 }

/* Kopf und Fuß ziehen mit, sonst bricht die Seite am Übergang. */
body.entwurf .kopf { background:var(--e-grund); border-bottom:1px solid var(--e-linie) }
body.entwurf .kopf .innen, body.entwurf .fuss .innen { max-width:1180px; padding-left:var(--s5); padding-right:var(--s5) }
body.entwurf .marke { color:var(--e-tinte); font-family:var(--e-serif); font-size:1.25rem; font-weight:400 }
body.entwurf .marke .logo { background:none; color:var(--e-akzent); width:36px; height:36px; border-radius:0;
  font-size:0 }
body.entwurf .marke .logo svg { width:32px; height:32px }
body.entwurf .marke small { font-family:system-ui,sans-serif; color:#5b7480 }
body.entwurf .nav a { color:#3f5c68 }
body.entwurf .nav a:hover { background:var(--e-flaeche); color:var(--e-tinte) }
body.entwurf .nav a.aktiv { background:var(--e-flaeche); color:var(--e-tinte); box-shadow:inset 0 -3px 0 var(--e-akzent) }
/* Weiß muss hier ausdrücklich stehen: `body.entwurf .nav a` ist spezifischer als `.nav a.primaer`
   und hatte dessen Farbe überschrieben. */
body.entwurf .nav a.primaer { background:var(--e-akzent); color:#fff; border-radius:999px; padding:.55rem 1.25rem }
body.entwurf .nav a.primaer:hover { background:var(--e-akzent-dunkel); color:#fff }
body.entwurf .pilot { background:var(--e-flaeche); color:#3f5c68; border-bottom-color:var(--e-linie) }
body.entwurf .fuss { background:var(--e-grund); border-top-color:var(--e-linie) }

/* Knöpfe: runder und ruhiger als im blauen System, aber gleiche Trefferfläche und gleicher Fokus. */
body.entwurf .knopf, body.entwurf button { background:var(--e-akzent); color:#fff; border-radius:999px; box-shadow:none;
  padding:.8rem 1.6rem; font-weight:600; font-size:1.0625rem }
body.entwurf .knopf:hover, body.entwurf button:hover { background:var(--e-akzent-dunkel); color:#fff }
body.entwurf .knopf:active { top:0 }
body.entwurf .knopf.leise { background:transparent; color:var(--e-akzent-dunkel); border:0; box-shadow:none;
  padding:.8rem .4rem; text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:2px }
body.entwurf .knopf.leise:hover { background:transparent; color:var(--e-tinte) }
body.entwurf .knopf:focus-visible { background:var(--fokus); color:var(--fokus-text) }

/* --- Streifen: je Abschnitt eine volle Fensterbreite, Inhalt in der Mitte ---------------------- */
.e-streifen { width:100%; padding:var(--s7) var(--s5) }
.e-streifen > .innen { max-width:1180px; margin:0 auto }
.e-streifen.flaeche { background:var(--e-flaeche) }
.e-streifen.dunkel { background:var(--e-dunkel); color:#eaf2f2; position:relative; overflow:hidden }
.e-streifen.dunkel h2, .e-streifen.dunkel h3 { color:#fff }
.e-streifen.duenn { padding-top:var(--s5); padding-bottom:var(--s5) }

/* Netzwerklinien: reine Dekoration, liegen hinter dem Text und nehmen keine Klicks an. */
.e-netz { position:absolute; inset:0; background-repeat:no-repeat; pointer-events:none; z-index:0 }
/* Dezent heißt dezent: Im Entwurf ahnt man die Linien am Rand, sie laufen nicht über die
   Überschrift. Deshalb schwach, weit außen und hinter allem. */
.e-netz.hell { background-image:url("/static/grafik/netzwerk-hell.svg"); opacity:.5;
  background-position:right -220px top -140px; background-size:820px auto }
.e-netz.dunkel { background-image:url("/static/grafik/netzwerk-dunkel.svg"); opacity:.55;
  background-position:right -80px center; background-size:700px auto }

/* --- Hero ------------------------------------------------------------------------------------- */
.e-hero { position:relative; overflow:hidden; padding:var(--s7) var(--s5) var(--s6) }
.e-hero > .innen { max-width:1180px; margin:0 auto; position:relative; z-index:1;
  display:grid; gap:var(--s6); grid-template-columns:1fr; align-items:center }
@media (min-width:900px) { .e-hero > .innen { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--s7) } }
.e-augenbraue { font-size:.8125rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--e-akzent-dunkel); margin:0 0 var(--s4) }
.e-hero h1 { margin:0 0 var(--s4); max-width:14ch }
.e-hero .lead { font-size:1.125rem; line-height:1.55; color:#39525e; max-width:40ch; margin:0 0 var(--s5) }
@media (min-width:760px) { .e-hero .lead { font-size:1.25rem } }
.e-hero .aktionen { display:flex; gap:var(--s4); flex-wrap:wrap; align-items:center }

/* Foto im Rahmen, darunter überlappend das Ablaufband. */
.e-fotorahmen { position:relative; margin:0 }
.e-fotorahmen img { display:block; width:100%; height:auto; border-radius:var(--r-l); background:var(--e-flaeche) }
.e-ablaufband { margin:calc(-1 * var(--s5)) var(--s4) 0; background:rgb(242 248 246 / .96); border:1px solid var(--e-linie);
  border-radius:var(--r-l); padding:var(--s3) var(--s4); position:relative;
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:var(--s2); align-items:center; text-align:center;
  box-shadow:0 6px 18px rgb(20 47 64 / .08) }
.e-ablaufband span.stufe { display:flex; flex-direction:column; align-items:center; gap:.25rem;
  font-size:.875rem; font-weight:600; color:var(--e-tinte); background:none; border:0; padding:0 }
.e-ablaufband svg { color:var(--e-akzent) }
.e-ablaufband .pfeil { color:var(--e-tech) }

/* --- Vertrauensband --------------------------------------------------------------------------- */
.e-vertrauen { display:grid; gap:var(--s4); grid-template-columns:1fr; border-top:1px solid var(--e-linie);
  border-bottom:1px solid var(--e-linie); padding:var(--s5) 0 }
@media (min-width:760px) { .e-vertrauen { grid-template-columns:repeat(3,1fr) } }
.e-vertrauen div { display:flex; gap:var(--s3); align-items:center; justify-content:center; font-size:1rem; font-weight:600 }
.e-vertrauen svg { color:var(--e-akzent); flex:none }
@media (min-width:760px) { .e-vertrauen div + div { border-left:1px solid var(--e-linie) } }

/* --- Ablauf in drei Schritten ------------------------------------------------------------------ */
.e-schritte { display:grid; gap:var(--s6); grid-template-columns:1fr; margin:var(--s6) 0 0 }
@media (min-width:820px) { .e-schritte { grid-template-columns:repeat(3,1fr); gap:var(--s5) } }
.e-schritt { margin:0 }
.e-schritt .kopfzeile { display:flex; gap:var(--s4); align-items:center; margin-bottom:var(--s4) }
.e-schritt .kreis { flex:none; width:64px; height:64px; border-radius:50%; background:var(--e-flaeche);
  display:grid; place-items:center; color:var(--e-akzent) }
.e-schritt .nr { font-family:var(--e-serif); font-size:1.5rem; color:var(--e-akzent); }
.e-schritt .strich { flex:1; height:1px; background:var(--e-linie) }
.e-schritt h3 { margin:0 0 var(--s2) }
.e-schritt p { margin:0; color:#39525e; font-size:1rem; max-width:34ch }

/* --- Zahlenzeile (Ergänzung, nicht im Entwurf) -------------------------------------------------
 * Für einen Vorführtermin ist die Frage „wie viel steckt da drin?" die erste. Die Zahlen stammen
 * aus der Wissensbasis und sind nachzählbar — deshalb stehen sie da, und deshalb ohne Prozente. */
.e-zahlen { display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  margin:var(--s7) 0 0; padding-top:var(--s5); border-top:1px solid var(--e-linie) }
.e-zahlen p { margin:0 }
.e-zahlen .wert { display:block; font-family:var(--e-serif); font-size:2.25rem; line-height:1.05; color:var(--e-tinte) }
.e-zahlen .was { display:block; font-size:.9375rem; color:#5b7480; margin-top:var(--s2); line-height:1.4 }

/* --- Datenabschnitt ---------------------------------------------------------------------------- */
.e-zweispalt { display:grid; gap:var(--s6); grid-template-columns:1fr; align-items:center }
@media (min-width:860px) { .e-zweispalt { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s7) } }
.e-zweispalt img { display:block; width:100%; height:auto; border-radius:var(--r-l) }
.e-datenfluss { width:100%; height:auto; max-width:640px; margin-top:var(--s5) }
.e-datenfluss text { font-family:system-ui,sans-serif; font-size:16px; fill:#39525e }

/* --- Grenzen und Abschluss --------------------------------------------------------------------- */
.e-mitte { text-align:center; max-width:70ch; margin:0 auto }
.e-mitte h2 { margin:var(--s2) 0 var(--s3) }
.e-mitte p { margin:0 auto; color:#39525e; max-width:none }
.e-grenzen { display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  margin:var(--s6) auto 0; text-align:left; list-style:none; padding:0 }
.e-grenzen li { display:flex; gap:var(--s3); align-items:flex-start; background:#fff; border:1px solid var(--e-linie);
  border-radius:var(--r-m); padding:var(--s3) var(--s4); font-size:1rem; line-height:1.5; margin:0 }
.e-grenzen svg { flex:none; color:var(--e-tech); margin-top:.15rem }

.e-abschluss { display:grid; gap:var(--s5); grid-template-columns:1fr; align-items:center; position:relative; z-index:1 }
@media (min-width:820px) { .e-abschluss { grid-template-columns:minmax(0,1fr) auto } }
.e-abschluss h2 { margin:var(--s2) 0 0 }
.e-abschluss .augenbraue { color:#9fc9c6 }
.e-abschluss .hinweiszeile { color:#bcd8d6; font-size:.9375rem; margin:var(--s3) 0 0 }
.e-streifen.dunkel .knopf { background:var(--e-akzent); color:#fff }
.e-streifen.dunkel .knopf:hover { background:#31968f }
.e-streifen.dunkel a { color:#bfe3df }

.e-bildhinweis { color:#5b7480; font-size:.875rem; margin:0 }

@media (max-width:640px) {
  .e-streifen, .e-hero { padding-left:var(--s4); padding-right:var(--s4) }
  .e-streifen { padding-top:var(--s6); padding-bottom:var(--s6) }
  body.entwurf h1 { font-size:2rem }
  body.entwurf h2 { font-size:1.625rem }
  .e-ablaufband { margin-left:var(--s2); margin-right:var(--s2); grid-template-columns:1fr auto 1fr auto 1fr }
  .e-ablaufband span.stufe { font-size:.75rem }
}