/* ============================================================
   Dynavio Energie-Check — Gestaltung

   ENTSCHEIDUNG (vor der ersten Zeile Markup getroffen)

     Produkt:  Energie-Analyse und Vertragsvermittlung
     Ton:      vertrauenswürdig
     Stil:     Zugänglich und sachlich, flache Flächen, ein
               Bento-Anklang im Ergebnis
     Dichte:   Standard (4-Punkt-Raster: 16 / 24 / 32 / 48 / 64)
     Palette:  Markengrün als Handlungsfarbe, drei Statusfarben,
               Grund in drei Ebenen — dunkel wie hell. Beide Schemata
               sind eigenständig gemessen, keines ist die Umkehrung
               des anderen. Der Nutzer wählt unter „Einstellungen";
               ohne Wahl gilt das Gerät.
     Schrift:  Systemschriften — keine fremden Server (Leitregel 12).
               Skala 1.250
     Aufbau:   Task-first. Schritt, Eingabe, Ergebnis mit Leitzahl.
     Signatur: Die Leitzahl im Ergebnis. Was konkret zu holen ist,
               groß, und die einzige Stelle mit Akzentfarbe in
               Displaygröße.
     Vermieden: der Score als Held (er ist nicht handlungsrelevant),
               eine Wüste gleichförmiger Karten, Emoji als Symbole,
               Akzentgrün als Dekoration.

   DREI SCHICHTEN
     Grundwert → Bedeutung → Bauteil. Kein Bauteil kennt einen
     Farbwert; es kennt eine Bedeutung.
   ============================================================ */

:root {
  /* ---- Grundwerte: Farbe ---- */
  --nacht-950: #0b0f16;
  --nacht-900: #0d1117;
  --nacht-800: #131a24;
  --nacht-700: #1a2431;
  --nacht-600: #223041;
  --nacht-500: #2e4054;   /* Rahmenkontrast, siehe unten */
  --nacht-400: #405672;
  --nacht-300: #64748b;   /* hell genug für Bedienumrisse, siehe unten */

  --dunst-100: #eef2f7;
  --dunst-300: #b9c4d2;   /* 10,3:1 auf --nacht-900 */
  --dunst-500: #8494a8;

  --gruen-400: #35d6a4;
  --gruen-500: #00d4aa;
  --gruen-600: #00b492;
  --gruen-950: #06231e;

  --bernstein-400: #f0b429;
  --bernstein-950: #2a1e05;

  --koralle-400: #ff7b72;
  --koralle-950: #2c1210;

  /* ---- Bedeutung: Flächen ----
     Tiefe entsteht im Dunklen durch hellere Flächen, nicht durch
     stärkere Schatten. Drei Ebenen genügen; eine vierte wäre nicht
     mehr unterscheidbar. */
  --grund: var(--nacht-900);
  --flaeche-1: var(--nacht-800);   /* Karte */
  --flaeche-2: var(--nacht-700);   /* Kachel, Eingabefeld */
  --flaeche-3: var(--nacht-600);   /* Hover */

  /* ---- Bedeutung: Text ---- */
  --text: var(--dunst-100);
  --text-leise: var(--dunst-300);
  --text-sehr-leise: var(--dunst-500);

  /* ---- Bedeutung: Linien ----
     Zwei Sorten, und die Unterscheidung ist keine Geschmacksfrage:

     `--linie` trennt nur optisch — Kartenrand, Tabellenzeile,
     Trennstrich. Sie darf zart sein, weil sie nichts bedient.

     `--linie-bedienung` umreißt alles, was angefasst wird:
     Eingabefeld, Schalter, Knopfumriss, Schrittpunkt. WCAG 2.2
     (1.4.11) verlangt dafür 3:1 gegen die Nachbarfläche. Gemessen:
     3,3:1 auf der Feldfläche, 3,7:1 auf der Karte, 4,0:1 auf dem
     Grund.

     Vorher lag der Feldrahmen bei 1,2:1 und später bei 1,65:1 — beides
     zu leise. Ein Eingabefeld, dessen Umriss man erahnen muss, ist für
     eine Zielgruppe jenseits der 50 kein Feld, sondern ein Suchspiel. */
  --linie: var(--nacht-600);
  --linie-bedienung: var(--nacht-300);
  --linie-bedienung-hover: var(--nacht-400);
  --linie-stark: var(--nacht-500);   /* Zwischenstufe, nur dekorativ */

  /* ---- Bedeutung: Handlung ---- */
  --handlung: var(--gruen-500);
  --handlung-hover: var(--gruen-600);
  --auf-handlung: var(--nacht-950);
  --ring: var(--gruen-400);

  /* ---- Bedeutung: Status ----
     Schwellen des Rechenkerns: ab 75 gut, ab 50 mittel, darunter
     schwach. Farbe trägt nie allein — daneben steht immer die Zahl
     oder ein Wort. */
  --gut: var(--gruen-400);
  --gut-grund: var(--gruen-950);
  --mittel: var(--bernstein-400);
  --mittel-grund: var(--bernstein-950);
  --schwach: var(--koralle-400);
  --schwach-grund: var(--koralle-950);

  /* Das Beispielband. Eigene Bedeutung, nicht „Status mittel" — es
     warnt vor Testzahlen und muss in beiden Schemata sofort ins Auge
     fallen, ohne dass der Text darin unlesbar wird. */
  --warnband: var(--bernstein-400);
  --auf-warnband: var(--nacht-950);

  /* ---- Raum: ein Maßstab, überall derselbe ---- */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-6: 24px;
  --raum-8: 32px;
  --raum-12: 48px;
  --raum-16: 64px;

  /* Abstand sagt Zusammengehörigkeit: Verwandtes steht enger als
     Unverwandtes. Näher als jede Trennlinie. */
  --raum-innen: var(--raum-6);      /* in einem Bauteil */
  --raum-gruppe: var(--raum-4);     /* zwischen verwandten Bauteilen */
  --raum-abschnitt: var(--raum-12); /* zwischen Abschnitten */

  /* ---- Schrift: Skala 1.250 ---- */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --grad-xs: 0.875rem;    /* 14,9px — kleinste Stufe. Tiefer geht es nicht:
                             die Zielgruppe liest im Schnitt jenseits der 50. */
  --grad-s: 0.9rem;       /* 15,3px */
  --grad-m: 1rem;         /* 17px  — Grundschrift */
  --grad-l: 1.25rem;      /* 21px  — h2 */
  --grad-xl: 1.563rem;    /* 27px  — h1 mobil */
  --grad-2xl: 1.953rem;   /* 33px  — h1 */
  --grad-3xl: 2.441rem;   /* 42px  — Leitzahl mobil */
  --grad-4xl: 3.052rem;   /* 52px  — Leitzahl */

  --hoehe-eng: 1.15;
  --hoehe-knapp: 1.3;
  --hoehe-normal: 1.6;

  --gewicht-text: 400;
  --gewicht-etikett: 600;
  --gewicht-titel: 650;
  --gewicht-display: 700;

  /* ---- Rundung: nach innen kleiner werdend ---- */
  --rund-s: 8px;
  --rund-m: 12px;
  --rund-l: 16px;
  --rund-voll: 999px;

  /* ---- Erhebung: eine Skala mit Bedeutung ---- */
  --erhebung-ruhe: 0 1px 2px rgb(0 0 0 / 0.25);
  --erhebung-schwebend: 0 8px 24px -8px rgb(0 0 0 / 0.5);
  --erhebung-dialog: 0 24px 48px -12px rgb(0 0 0 / 0.65);

  /* ---- Bewegung ---- */
  --dauer-sofort: 100ms;
  --dauer-schnell: 160ms;
  --dauer-normal: 260ms;
  --lauf-an: cubic-bezier(0.16, 1, 0.3, 1);
  --lauf-ab: cubic-bezier(0.7, 0, 0.84, 0);

  /* ---- Ebenen: nie eine rohe Zahl ---- */
  --ebene-klebend: 10;
  --ebene-kopf: 30;
  --ebene-band: 40;
  --ebene-banner: 60;

  /* ---- Maße ---- */
  --spalte: 720px;
  --kopf-hoehe: 60px;
  --band-hoehe: 0px;

  /* ---- Logo ----
     Das Logo des Shops, als Vektor. Die Hausmarke behält in beiden
     Schemata ihr Türkis — ein Logo ist nach WCAG 1.4.11 von der
     Kontrastforderung ausgenommen, und die Marke soll überall dieselbe
     Farbe haben. Der Schriftzug wechselt, sonst wäre er hell auf hell. */
  --logo-marke: #00c2a0;
  --logo-schrift: #d7dce3;

  color-scheme: dark;
}

/* ============================================================
   Hell

   Kein umgedrehtes Dunkel. Im Dunklen entsteht Tiefe durch hellere
   Flächen, im Hellen durch Weiß über Grau und eine Linie — deshalb
   ist Weiß hier die Karte und das Grau der Grund, nicht andersherum.

   Umgeschrieben wird nur die mittlere Schicht: Bedeutung. Kein
   einziges Bauteil weiter unten weiß, dass es dieses Schema gibt.
   Genau dafür sind die drei Schichten da.

   Alle Werte sind gemessen, nicht geschätzt — `pruefung/leitregeln.mjs`
   rechnet sie in beiden Schemata zur Laufzeit nach:
     Text          ≥ 4,5:1
     Bedienumrisse ≥ 3:1 gegen die Nachbarfläche

   Das Attribut setzt `js/darstellung-fruh.js`, bevor der Browser das
   erste Mal zeichnet. Ohne JavaScript bleibt es dunkel — dann ist die
   Seite ohnehin nicht bedienbar, darauf weist der noscript-Hinweis hin.
   ============================================================ */

:root[data-schema="hell"] {
  /* ---- Grundwerte: Tag ---- */
  --tag-0:   #ffffff;
  --tag-50:  #f5f7fa;
  --tag-100: #eaeff5;
  --tag-200: #dde4ed;
  --tag-300: #d7dfe9;
  --tag-400: #6f7d90;   /* Bedienumrisse: 3,6:1 auf dem Feld, 4,2:1 auf der Karte */
  --tag-600: #556274;   /* 5,4:1 auf dem Feld */
  --tag-700: #4a5769;
  --tag-900: #0f1620;

  --gruen-hell-600: #00735f;   /* Weiß darauf 5,8:1, Rand gegen den Grund 5,4:1 */
  --gruen-hell-700: #046b59;
  --gruen-hell-050: #e6f6f1;

  --bernstein-hell:      #8c5000;
  --bernstein-hell-050:  #fdf3e0;
  --koralle-hell:        #a8261f;
  --koralle-hell-050:    #fdeceb;

  /* ---- Bedeutung ---- */
  --grund: var(--tag-50);
  --flaeche-1: var(--tag-0);
  --flaeche-2: var(--tag-100);
  --flaeche-3: var(--tag-200);

  --text: var(--tag-900);
  --text-leise: var(--tag-700);
  --text-sehr-leise: var(--tag-600);

  --linie: var(--tag-300);
  --linie-bedienung: var(--tag-400);
  --linie-bedienung-hover: var(--tag-600);
  --linie-stark: var(--tag-400);

  --handlung: var(--gruen-hell-600);
  --handlung-hover: var(--gruen-hell-700);
  --auf-handlung: #ffffff;
  --ring: var(--gruen-hell-600);

  --gut: var(--gruen-hell-600);
  --gut-grund: var(--gruen-hell-050);
  --mittel: var(--bernstein-hell);
  --mittel-grund: var(--bernstein-hell-050);
  --schwach: var(--koralle-hell);
  --schwach-grund: var(--koralle-hell-050);

  /* Im Hellen ist das gedeckte Braun der Statusfarbe als Band zu dunkel
     für dunkle Schrift und zu dumpf für helle. Das Band bekommt deshalb
     einen eigenen, hellen Bernstein. */
  --warnband: #f8c95a;
  --auf-warnband: #2b1c00;

  /* Im Hellen trägt der Schatten die Erhebung, im Dunklen die Fläche.
     Dieselbe Skala mit anderen Werten — nicht dieselben Werte. */
  --erhebung-ruhe: 0 1px 2px rgb(15 22 32 / 0.07);
  --erhebung-schwebend: 0 8px 24px -8px rgb(15 22 32 / 0.18);
  --erhebung-dialog: 0 24px 48px -12px rgb(15 22 32 / 0.28);

  --logo-schrift: #2d3748;   /* wie im hellen Logo des Shops */

  color-scheme: light;
}

/* ============================================================
   Grundlagen
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--band-hoehe) + var(--raum-4));
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--grad-m);
  font-size: 17px;
  line-height: var(--hoehe-normal);
  overflow-wrap: break-word;
  padding-top: calc(var(--kopf-hoehe) + var(--band-hoehe));
  -webkit-font-smoothing: antialiased;
}

/* Zahlen springen nicht, wenn sich Werte ändern. */
table, .zahl, .kennzahl-wert, .score-zahl, .leit-zahl, .balken-wert {
  font-variant-numeric: tabular-nums;
}

.symbol { flex: none; vertical-align: middle; }

/* ============================================================
   Kopf — fixiert, schmal, mit Schrittanzeige
   ============================================================ */

.kopf {
  position: fixed;
  top: var(--band-hoehe); left: 0; right: 0;
  height: var(--kopf-hoehe);
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
  z-index: var(--ebene-kopf);
}
.kopf-innen {
  max-width: var(--spalte);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--raum-4);
  display: flex;
  align-items: center;
  gap: var(--raum-6);
}

/* Das Logo ist dasselbe wie im Shop — nachgezeichnet als Vektor, damit
 * es scharf bleibt und mit dem Schema mitgeht. Die Hausmarke ist im
 * SVG fest türkis, der Schriftzug erbt `currentColor` von hier. */
.marke {
  display: flex; align-items: center; flex: none;
  text-decoration: none;
  color: var(--logo-schrift);
  border-radius: var(--rund-s);
}
.marke-logo {
  display: block;
  height: 30px;
  width: auto;
}
@media (max-width: 480px) {
  /* Auf dem Telefon teilt sich der Kopf mit vier Schritten — dort
   * zählt jeder Punkt Breite. */
  .marke-logo { height: 26px; }
}

/* ---- Die vier Schritte ----
   Auf dem Rechner mit Namen, auf dem Telefon als Ziffern. Ein
   erledigter Schritt bekommt einen Haken, kein Farbwechsel allein —
   Farbe trägt nie die Information. */
.schritte { flex: 1; min-width: 0; }
.schritte ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: var(--raum-1);
  justify-content: flex-end;
}
.schritt {
  display: flex; align-items: center; gap: var(--raum-2);
  color: var(--text-sehr-leise);
  font-size: var(--grad-xs);
  font-weight: var(--gewicht-etikett);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.schritt-punkt {
  width: 24px; height: 24px; flex: none;
  border-radius: var(--rund-voll);
  border: 1.5px solid var(--linie-bedienung);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--grad-xs);
  font-weight: var(--gewicht-display);
  transition: background-color var(--dauer-schnell) var(--lauf-an),
              border-color var(--dauer-schnell) var(--lauf-an),
              color var(--dauer-schnell) var(--lauf-an);
}
.schritt-strich {
  width: 16px; height: 1.5px; flex: none;
  background: var(--linie);
}

.schritt.erledigt { color: var(--text-leise); }
.schritt.erledigt .schritt-punkt {
  border-color: var(--handlung);
  color: var(--handlung);
}
.schritt.aktiv { color: var(--text); }
.schritt.aktiv .schritt-punkt {
  border-color: var(--handlung);
  background: var(--handlung);
  color: var(--auf-handlung);
}

@media (max-width: 640px) {
  .schritt-name {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .schritt-strich { width: 10px; }
  .schritt-punkt { width: 26px; height: 26px; font-size: var(--grad-s); }
}

/* ============================================================
   Gerüst
   ============================================================ */

.huelle {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: var(--raum-8) var(--raum-4) var(--raum-12);
}

main > h1:first-child, main > form > h1:first-child { margin-top: 0; }

.fuss { border-top: 1px solid var(--linie); margin-top: var(--raum-12); }
.fuss-innen {
  max-width: var(--spalte); margin: 0 auto;
  padding: var(--raum-6) var(--raum-4) calc(var(--raum-8) + env(safe-area-inset-bottom));
  color: var(--text-leise);
  font-size: var(--grad-s);
}
.fuss ul {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-6);
  padding: 0; margin: 0 0 var(--raum-4);
}
.fuss a { color: var(--text-leise); text-underline-offset: 3px; }
.fuss a:hover { color: var(--handlung); }
.fuss button.knopf-leise { font-size: var(--grad-s); }

/* ============================================================
   Schrift
   ============================================================ */

h1 {
  font-size: var(--grad-2xl);
  line-height: var(--hoehe-eng);
  letter-spacing: -0.022em;
  margin: 0 0 var(--raum-3);
  text-wrap: balance;
}
h2 {
  font-size: var(--grad-l);
  line-height: var(--hoehe-knapp);
  letter-spacing: -0.012em;
  font-weight: var(--gewicht-titel);
  margin: var(--raum-12) 0 var(--raum-4);
  display: flex; align-items: center; gap: var(--raum-1);
  flex-wrap: wrap;
}
h3 {
  font-size: 1.06rem;
  line-height: var(--hoehe-knapp);
  font-weight: var(--gewicht-titel);
  margin: var(--raum-6) 0 var(--raum-2);
}
h4 {
  font-size: var(--grad-s);
  font-weight: var(--gewicht-etikett);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin: 0 0 var(--raum-2);
}
h1:focus-visible, h2:focus-visible { outline: 2px solid var(--ring); outline-offset: 6px; }
h1:focus:not(:focus-visible), h2:focus:not(:focus-visible) { outline: none; }

p { margin: 0 0 var(--raum-3); text-wrap: pretty; max-width: 68ch; }
.leise { color: var(--text-leise); }
.klein { font-size: var(--grad-s); }
.gross { font-size: 1.09rem; }

a { color: var(--handlung); text-underline-offset: 3px; }
a:hover { color: var(--handlung-hover); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--rund-s);
}

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprung {
  position: absolute; left: -9999px; top: 0;
  background: var(--handlung); color: var(--auf-handlung);
  padding: var(--raum-3) var(--raum-4);
  font-weight: var(--gewicht-etikett);
  z-index: 100;
}
.sprung:focus { left: 0; }

/* ============================================================
   Info hinter dem Symbol

   Leiser als vorher: das Symbol ist ein Angebot, keine Aufforderung.
   Auf einer Seite mit fünfzehn davon entscheidet die Zurückhaltung
   darüber, ob der Bildschirm ruhig wirkt.
   ============================================================ */

.info { display: inline-block; vertical-align: middle; }
.info > summary {
  list-style: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  margin-left: var(--raum-1);
  border-radius: var(--rund-voll);
  border: 1.5px solid var(--linie-bedienung);
  color: var(--text-sehr-leise);
  font-size: var(--grad-xs);
  font-weight: var(--gewicht-display);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dauer-schnell) var(--lauf-an),
              border-color var(--dauer-schnell) var(--lauf-an),
              background-color var(--dauer-schnell) var(--lauf-an);
}
.info > summary::-webkit-details-marker { display: none; }
.info > summary:hover { border-color: var(--handlung); color: var(--handlung); }
.info[open] > summary {
  border-color: var(--handlung);
  background: var(--handlung);
  color: var(--auf-handlung);
}

/* Der Inhalt bricht aus dem Fließtext aus und legt sich als eigener
   Block darunter — sonst zerreißt er den Satz, in dem das Symbol
   steht. */
.info-inhalt {
  display: block;
  margin: var(--raum-3) 0 var(--raum-1);
  padding: var(--raum-4);
  background: var(--flaeche-1);
  border: 1px solid var(--linie);
  border-radius: var(--rund-m);
  font-size: var(--grad-s);
  font-weight: var(--gewicht-text);
  font-style: normal;
  color: var(--text-leise);
  animation: einblenden var(--dauer-schnell) var(--lauf-an);
}
.info-inhalt p { max-width: 62ch; }
.info-inhalt p:last-child, .info-inhalt ul:last-child { margin-bottom: 0; }
.info-inhalt strong { color: var(--text); }
.info-titel {
  color: var(--text);
  margin: 0 0 var(--raum-2);
  font-size: var(--grad-s);
  font-weight: var(--gewicht-etikett);
  text-transform: none;
  letter-spacing: 0;
}

@keyframes einblenden {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.aufklapper {
  border: 1px solid var(--linie);
  border-radius: var(--rund-m);
  margin-bottom: var(--raum-3);
  background: var(--flaeche-1);
}
.aufklapper summary {
  padding: var(--raum-3) var(--raum-4);
  cursor: pointer;
  font-weight: var(--gewicht-etikett);
  min-height: 48px;
  display: flex; align-items: center;
  font-size: var(--grad-s);
  color: var(--text-leise);
  border-radius: var(--rund-m);
}
.aufklapper summary:hover { color: var(--text); }
.aufklapper summary::marker { color: var(--text-sehr-leise); }
.aufklapper[open] summary { color: var(--text); border-bottom: 1px solid var(--linie); border-radius: var(--rund-m) var(--rund-m) 0 0; }
.aufklapper-inhalt { padding: var(--raum-4); font-size: var(--grad-s); }
.aufklapper-inhalt > *:last-child { margin-bottom: 0; }

/* ============================================================
   Flächen

   Weniger Rahmen als vorher. Ein Rahmen um jede Gruppe erzeugt ein
   Raster aus Linien, in dem nichts mehr hervortritt — Abstand trennt
   besser.
   ============================================================ */

.karte {
  background: var(--flaeche-1);
  border: 1px solid var(--linie);
  border-radius: var(--rund-l);
  padding: var(--raum-6);
  margin-bottom: var(--raum-gruppe);
}

.kasten {
  background: var(--flaeche-1);
  border: 1px solid var(--linie);
  border-radius: var(--rund-m);
  padding: var(--raum-4);
  margin: 0 0 var(--raum-gruppe);
}
.kasten > *:last-child { margin-bottom: 0; }

/* Meldungen tragen ihre Bedeutung im Symbol und im Wort, nicht nur
   in der Randfarbe. */
.meldung {
  border-radius: var(--rund-m);
  padding: var(--raum-4);
  margin: 0 0 var(--raum-gruppe);
  border: 1px solid var(--linie);
  background: var(--flaeche-1);
}
.meldung > *:last-child { margin-bottom: 0; }
.meldung-hinweis { border-left: 3px solid var(--handlung); }
.meldung-warnung { border-left: 3px solid var(--mittel); }
.meldung-fehler  { border-left: 3px solid var(--schwach); }

/* ============================================================
   Knöpfe — sechs Zustände, nicht drei
   ============================================================ */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--raum-2);
  font: inherit;
  font-size: var(--grad-m);
  font-weight: var(--gewicht-etikett);
  letter-spacing: -0.005em;
  padding: var(--raum-3) var(--raum-6);
  min-height: 48px;
  border-radius: var(--rund-m);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--dauer-schnell) var(--lauf-an),
              border-color var(--dauer-schnell) var(--lauf-an),
              color var(--dauer-schnell) var(--lauf-an),
              transform var(--dauer-sofort) var(--lauf-an);
}
.knopf:active { transform: translateY(1px); }

.knopf-haupt {
  background: var(--handlung);
  color: var(--auf-handlung);
  font-weight: var(--gewicht-display);
}
.knopf-haupt:hover { background: var(--handlung-hover); color: var(--auf-handlung); }

.knopf-zweit {
  background: transparent;
  color: var(--text);
  border-color: var(--linie-bedienung);
}
.knopf-zweit:hover {
  border-color: var(--handlung);
  color: var(--handlung);
  background: color-mix(in srgb, var(--handlung) 8%, transparent);
}

.knopf-leise {
  background: none; border: none;
  color: var(--text-leise);
  text-decoration: underline; text-underline-offset: 3px;
  padding: var(--raum-1) 0; min-height: 0;
  font-weight: var(--gewicht-text);
  font-family: inherit; font-size: inherit;
  cursor: pointer;
}
.knopf-leise:hover { color: var(--handlung); }

.knopf[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.knopf-reihe {
  display: flex; gap: var(--raum-3); flex-wrap: wrap;
  margin-top: var(--raum-6); align-items: center;
}

/* ============================================================
   Vor und zurück
   ============================================================ */

.nav-leiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--raum-3);
  margin-top: var(--raum-8);
  padding-top: var(--raum-6);
  border-top: 1px solid var(--linie);
}
.nav-weiter { min-width: 168px; }

@media (max-width: 640px) {
  /* Am unteren Rand kleben, dort ist der Daumen — aber nur in den
     Schritten, in denen es weitergeht. Auf dem Ergebnis würde eine
     dauerhafte Leiste nur Lesefläche kosten. */
  .nav-leiste:has(.nav-weiter) {
    position: sticky;
    bottom: 0;
    background: color-mix(in srgb, var(--grund) 94%, transparent);
    backdrop-filter: blur(12px);
    margin: var(--raum-8) calc(var(--raum-4) * -1) 0;
    padding: var(--raum-3) var(--raum-4) calc(var(--raum-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--linie);
    z-index: var(--ebene-klebend);
  }
  .nav-leiste .knopf { flex: 1; }
  .nav-zurueck { max-width: 42%; }
  .nav-weiter { min-width: 0; }
}

/* ============================================================
   Formular
   ============================================================ */

.feld { margin-bottom: var(--raum-6); }
.feld-kopf { display: flex; align-items: center; gap: 2px; margin-bottom: var(--raum-1); }
.feld-label {
  font-weight: var(--gewicht-etikett);
  font-size: var(--grad-s);
  letter-spacing: 0.005em;
}
.pflicht { color: var(--handlung); }
.feld-hilfe {
  color: var(--text-leise);
  font-size: var(--grad-s);
  margin: 0 0 var(--raum-2);
}
.feld-eingabe { position: relative; display: flex; align-items: stretch; }

input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
select, textarea {
  width: 100%;
  font: inherit;
  font-size: 17px;              /* unter 16px zoomt iOS beim Antippen */
  color: var(--text);
  background: var(--flaeche-2);
  /* 3:1 gegen die Fläche — Bedienelemente brauchen einen sichtbaren
     Umriss, nicht nur eine Andeutung (WCAG 2.2, 1.4.11). */
  border: 1px solid var(--linie-bedienung);
  border-radius: var(--rund-m);
  padding: var(--raum-3) var(--raum-4);
  min-height: 52px;
  transition: border-color var(--dauer-schnell) var(--lauf-an),
              background-color var(--dauer-schnell) var(--lauf-an);
}
input:hover, select:hover, textarea:hover { border-color: var(--linie-bedienung-hover); }
input:focus, select:focus, textarea:focus { background: var(--flaeche-3); }
textarea { min-height: 120px; resize: vertical; line-height: var(--hoehe-normal); }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-leise) 50%),
                    linear-gradient(135deg, var(--text-leise) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--raum-12);
}

/* Das Dateifeld war das einzige Bedienelement, das noch nach
   Systemvorgabe aussah — auf einer Seite, auf der der Upload einer der
   drei Hauptwege ist. */
input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: var(--grad-s);
  color: var(--text-leise);
  background: var(--flaeche-2);
  border: 1px dashed var(--linie-bedienung);
  border-radius: var(--rund-m);
  padding: var(--raum-4);
  min-height: 64px;
  cursor: pointer;
  transition: border-color var(--dauer-schnell) var(--lauf-an),
              background-color var(--dauer-schnell) var(--lauf-an);
}
input[type="file"]:hover { border-color: var(--handlung); background: var(--flaeche-3); }

input[type="file"]::file-selector-button {
  font: inherit;
  font-size: var(--grad-s);
  font-weight: var(--gewicht-etikett);
  color: var(--text);
  background: transparent;
  border: 1px solid var(--linie-bedienung);
  border-radius: var(--rund-s);
  padding: var(--raum-2) var(--raum-4);
  margin-right: var(--raum-4);
  min-height: 40px;
  cursor: pointer;
  transition: border-color var(--dauer-schnell) var(--lauf-an),
              color var(--dauer-schnell) var(--lauf-an);
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--handlung);
  color: var(--handlung);
}

input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mit-einheit input { padding-right: 84px; }
.einheit {
  position: absolute; right: var(--raum-4); top: 50%; transform: translateY(-50%);
  color: var(--text-leise); pointer-events: none;
  font-size: var(--grad-s);
}

.feld-fehler {
  color: var(--schwach);
  font-size: var(--grad-s);
  margin: var(--raum-2) 0 0;
  font-weight: var(--gewicht-etikett);
}
.hat-fehler input, .hat-fehler select, .hat-fehler textarea {
  border-color: var(--schwach);
  background: color-mix(in srgb, var(--schwach-grund) 40%, var(--flaeche-2));
}

/* Auswahl als Schalterreihe — größere Trefferfläche als ein
   Auswahlfeld, und alle Möglichkeiten auf einen Blick. */
.ja-nein { display: flex; gap: var(--raum-2); flex-wrap: wrap; }
.ja-nein label {
  display: inline-flex; align-items: center; gap: var(--raum-2);
  border: 1px solid var(--linie-bedienung);
  border-radius: var(--rund-m);
  padding: var(--raum-3) var(--raum-4);
  min-height: 48px; cursor: pointer;
  background: var(--flaeche-2);
  font-size: var(--grad-s);
  transition: border-color var(--dauer-schnell) var(--lauf-an),
              background-color var(--dauer-schnell) var(--lauf-an);
}
.ja-nein label:hover { border-color: var(--linie-bedienung-hover); }
.ja-nein input { accent-color: var(--handlung); width: 20px; height: 20px; flex: none; }
.ja-nein label:has(input:checked) {
  border-color: var(--handlung);
  background: color-mix(in srgb, var(--handlung) 10%, var(--flaeche-2));
}

.zustimmung { display: flex; gap: var(--raum-3); align-items: flex-start; margin: var(--raum-4) 0; }
.zustimmung input { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--handlung); }
.zustimmung label { font-size: var(--grad-s); }

/* Honigtopf: für Menschen unsichtbar, für Automaten sichtbar.
   Bewusst nicht display:none — manche Automaten prüfen darauf. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Drei Wege in Schritt 1

   Der wichtigste Bildschirm des Ablaufs: hier entscheidet sich, ob
   jemand weitermacht. Große Trefferflächen, ein Symbol je Weg,
   gleiche Breite — keiner wird bevorzugt.
   ============================================================ */

.wege-drei { display: grid; gap: var(--raum-3); }
.weg-knopf {
  background: var(--flaeche-1);
  border: 1px solid var(--linie-bedienung);
  border-radius: var(--rund-l);
  padding: var(--raum-4) var(--raum-6);
  text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  display: flex; align-items: center; gap: var(--raum-4);
  min-height: 84px;
  transition: border-color var(--dauer-schnell) var(--lauf-an),
              background-color var(--dauer-schnell) var(--lauf-an),
              transform var(--dauer-sofort) var(--lauf-an);
}
.weg-knopf:hover {
  border-color: var(--handlung);
  background: var(--flaeche-2);
}
.weg-knopf:active { transform: translateY(1px); }
.weg-knopf[aria-pressed="true"] {
  border-color: var(--handlung);
  background: color-mix(in srgb, var(--handlung) 8%, var(--flaeche-1));
}
.weg-knopf[aria-pressed="true"] .weg-symbol { color: var(--handlung); }

.weg-symbol {
  flex: none; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rund-m);
  background: var(--flaeche-2);
  color: var(--text-leise);
  transition: color var(--dauer-schnell) var(--lauf-an);
}
.weg-knopf:hover .weg-symbol { color: var(--handlung); }
.weg-text b { display: block; font-size: 1.03rem; font-weight: var(--gewicht-titel); }
.weg-text span { color: var(--text-leise); font-size: var(--grad-s); }

/* ============================================================
   Prüfansicht
   ============================================================ */

.feld.zu-pruefen {
  border-left: 3px solid var(--mittel);
  padding-left: var(--raum-4);
  margin-left: calc(var(--raum-4) * -1);
}
.pruef-feld.zu-pruefen { border-left: 3px solid var(--mittel); padding-left: var(--raum-3); }

.marke-pruefen {
  display: inline-flex; align-items: center;
  font-size: var(--grad-xs); font-weight: var(--gewicht-display);
  color: var(--mittel);
  background: var(--mittel-grund);
  border: 1px solid color-mix(in srgb, var(--mittel) 45%, transparent);
  border-radius: var(--rund-voll);
  padding: 1px var(--raum-2);
  margin-left: var(--raum-2);
  vertical-align: middle;
  letter-spacing: 0.01em;
}

/* ============================================================
   Ergebnis

   SIGNATUR: die Leitzahl. Was konkret zu holen ist — groß, in
   Akzentfarbe, und die einzige Stelle auf der Seite, die diese
   Größe bekommt. Der Score steht daneben als Einordnung, nicht als
   Held: er beantwortet nicht die Frage, mit der der Kunde gekommen
   ist.
   ============================================================ */

.leit {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--handlung) 9%, var(--flaeche-1)),
    var(--flaeche-1) 62%);
  border: 1px solid color-mix(in srgb, var(--handlung) 26%, var(--linie));
  border-radius: var(--rund-l);
  padding: var(--raum-8) var(--raum-6);
  margin-bottom: var(--raum-gruppe);
}
.leit-etikett {
  display: block;
  font-size: var(--grad-xs);
  font-weight: var(--gewicht-etikett);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: var(--raum-2);
}
.leit-zahl {
  display: block;
  font-size: var(--grad-4xl);
  font-weight: var(--gewicht-display);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gut);
  margin-bottom: var(--raum-2);
}
.leit-satz {
  font-size: 1.09rem;
  margin: 0;
  color: var(--text);
  max-width: 46ch;
}
.leit-satz strong { font-weight: var(--gewicht-titel); }
.leit-fuss {
  margin: var(--raum-4) 0 0;
  font-size: var(--grad-s);
  color: var(--text-leise);
}

/* Der Score: eine Zeile, kein Block. */
.score-zeile {
  display: flex; align-items: center; gap: var(--raum-4);
  padding: var(--raum-4) var(--raum-6);
  background: var(--flaeche-1);
  border: 1px solid var(--linie);
  border-radius: var(--rund-m);
  margin-bottom: var(--raum-gruppe);
  flex-wrap: wrap;
}
.score-zahl {
  font-size: var(--grad-l);
  font-weight: var(--gewicht-display);
  line-height: 1;
  letter-spacing: -0.01em;
  flex: none;
}
.score-max { font-size: var(--grad-s); color: var(--text-leise); font-weight: var(--gewicht-text); }
.score-einordnung { margin: 0; font-size: var(--grad-s); color: var(--text-leise); flex: 1; min-width: 180px; }
.score-block { text-align: center; padding: var(--raum-8) var(--raum-6); }

/* ---- Balken ---- */
.balken-zeile { margin-bottom: var(--raum-4); }
.balken-zeile:last-child { margin-bottom: 0; }
.balken-kopf {
  display: flex; justify-content: space-between;
  gap: var(--raum-3); align-items: center;
  margin-bottom: var(--raum-2);
}
.balken-label {
  font-weight: var(--gewicht-etikett);
  font-size: var(--grad-s);
  display: flex; align-items: center;
}
.balken-wert { font-weight: var(--gewicht-display); flex: none; font-size: var(--grad-s); }
.balken-schiene {
  height: 8px;
  background: var(--flaeche-2);
  border-radius: var(--rund-voll);
  overflow: hidden;
}
.balken-fuellung {
  height: 100%;
  border-radius: var(--rund-voll);
  transition: width var(--dauer-normal) var(--lauf-an);
}

.stufe-gut    { color: var(--gut); }
.stufe-mittel { color: var(--mittel); }
.stufe-schwach{ color: var(--schwach); }
.fuellung-gut     { background: var(--gut); }
.fuellung-mittel  { background: var(--mittel); }
.fuellung-schwach { background: var(--schwach); }

/* ---- Kennzahlen ---- */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--raum-3);
}
.kennzahl {
  background: var(--flaeche-1);
  border: 1px solid var(--linie);
  border-radius: var(--rund-m);
  padding: var(--raum-4);
}
.kennzahl-label {
  color: var(--text-leise);
  font-size: var(--grad-xs);
  font-weight: var(--gewicht-etikett);
  letter-spacing: 0.03em;
  display: flex; align-items: center; gap: 2px;
  margin-bottom: var(--raum-1);
}
.kennzahl-wert {
  font-size: var(--grad-l);
  font-weight: var(--gewicht-display);
  letter-spacing: -0.015em;
  display: block;
  line-height: 1.15;
}
.kennzahl-wert.lang {
  font-size: var(--grad-s);
  font-weight: var(--gewicht-etikett);
  line-height: var(--hoehe-knapp);
  overflow-wrap: normal;
  hyphens: auto;
  letter-spacing: 0;
}

/* ---- Tabelle ---- */
.tabellen-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--raum-4); }
table { border-collapse: collapse; width: 100%; font-size: var(--grad-s); }
th, td {
  text-align: right;
  padding: var(--raum-3);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
th:first-child, td:first-child { text-align: left; }
thead th {
  color: var(--text-leise);
  font-weight: var(--gewicht-etikett);
  font-size: var(--grad-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }

/* ============================================================
   Maßnahmen

   Kein grüner Rand mehr an jeder Karte — wenn alles hervorgehoben
   ist, ist nichts hervorgehoben. Die Akzentfarbe trägt jetzt genau
   eine Sache: die Ersparnis.
   ============================================================ */

.massnahme { padding: var(--raum-6); }
.massnahme-kopf { display: flex; gap: var(--raum-3); align-items: baseline; }
.massnahme-nummer {
  flex: none; width: 26px; height: 26px;
  border-radius: var(--rund-voll);
  background: var(--flaeche-2);
  color: var(--text-leise);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--gewicht-display);
  font-size: var(--grad-xs);
  align-self: flex-start;
  margin-top: 2px;
}
.massnahme h3 { margin: 0; display: flex; align-items: center; flex: 1; }

/* Die Ersparnis führt, die anderen drei Werte begleiten. */
.massnahme-zahlen {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--raum-4);
  align-items: center;
  margin: var(--raum-4) 0 0;
  padding-top: var(--raum-4);
  border-top: 1px solid var(--linie);
}
.massnahme-haupt .kennzahl-label { color: var(--text-leise); }
.massnahme-haupt .kennzahl-wert {
  font-size: var(--grad-xl);
  color: var(--gut);
  letter-spacing: -0.025em;
}
.massnahme-haupt { background: none; border: none; padding: 0; }
.massnahme-neben {
  display: flex; flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-6);
  justify-content: flex-end;
}
.massnahme-neben .kennzahl {
  background: none; border: none; padding: 0;
  min-width: 84px;
}
.massnahme-neben .kennzahl-wert {
  font-size: var(--grad-s);
  font-weight: var(--gewicht-etikett);
  letter-spacing: 0;
}
.massnahme-neben .kennzahl-wert.lang { font-size: var(--grad-xs); }

@media (max-width: 640px) {
  .massnahme-zahlen { grid-template-columns: 1fr; gap: var(--raum-3); }
  .massnahme-neben { justify-content: flex-start; gap: var(--raum-3) var(--raum-6); }
}

/* Ein Angebot in einer Maßnahme bekommt keinen eigenen Rahmen mehr —
   eine Karte in einer Karte in einer Karte liest sich als Schachtel,
   nicht als Angebot. */
.angebot {
  margin-top: var(--raum-4);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--linie);
}
.angebot > *:last-child { margin-bottom: 0; }
.angebot p { font-size: var(--grad-s); color: var(--text-leise); }

.liste-schlicht { margin: 0 0 var(--raum-3); padding-left: var(--raum-6); }
.liste-schlicht li { margin-bottom: var(--raum-1); }
.liste-schlicht:last-child { margin-bottom: 0; }

/* ============================================================
   Wege am Ende

   Gleich groß, gleiche Gestaltung, keine hervorgehoben. Es gibt hier
   bewusst keine Regel wie .weg-karte.empfohlen.
   ============================================================ */

.wege {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--raum-3);
}
/* Drei Karten dürfen nebeneinander, vier gehören 2×2 — eine allein in
   der zweiten Reihe liest sich wie ein Nachtrag, dabei sind alle
   gleichwertig (Leitregel 7). */
.wege:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .wege, .wege:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
}
.weg-karte {
  background: var(--flaeche-1);
  border: 1px solid var(--linie);
  border-radius: var(--rund-l);
  padding: var(--raum-6);
  display: flex; flex-direction: column; gap: var(--raum-3);
  transition: border-color var(--dauer-schnell) var(--lauf-an);
}
.weg-karte:hover { border-color: var(--linie-stark); }
.weg-karte h3 { margin: 0; display: flex; align-items: center; gap: var(--raum-2); }
.weg-karte h3 .symbol { color: var(--text-leise); }
.weg-karte p { color: var(--text-leise); font-size: var(--grad-s); margin: 0; flex: 1; }
.weg-karte .knopf { width: 100%; }

/* Offenlegung: normale Schriftgröße, nicht grau, nicht aufklappbar,
   im selben Kasten wie der Knopf. Wer diesen Wert verkleinert, bricht
   Leitregel 6. */
.offenlegung,
.weg-karte .offenlegung,
.karte .offenlegung,
.angebot .offenlegung {
  font-size: inherit;
  color: var(--text);
  margin: var(--raum-3) 0 0;
  line-height: 1.5;
}
.kennzeichnung {
  display: inline-flex; align-items: center;
  font-size: var(--grad-xs); font-weight: var(--gewicht-display);
  letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid var(--text-leise);
  border-radius: var(--rund-s);
  padding: 1px var(--raum-2);
  margin-bottom: var(--raum-2);
  color: var(--text-leise);
}

/* Das Geschäftsmodell. Neutral gerahmt — es ist eine Auskunft, kein
   Angebot. */
.modell { border-left: 3px solid var(--text-sehr-leise); }
.modell strong { color: var(--handlung); font-weight: var(--gewicht-titel); }

/* Ein Tipp, an dem wir nichts verdienen. Wird gekennzeichnet — das
   ist keine Bescheidenheit, sondern der Grund, warum die Empfehlung
   mit Provision geglaubt wird. */
.ohne-provision {
  font-size: var(--grad-s);
  color: var(--gut);
  margin: var(--raum-3) 0 0;
  display: flex; align-items: baseline; gap: var(--raum-2);
  font-weight: var(--gewicht-etikett);
}
.ohne-provision::before { content: "✓"; font-weight: var(--gewicht-display); flex: none; }

/* Eine Frist, die bald abläuft. Kein Countdown, kein Blinken — nur
   ein anderer Rand. Erfundene Dringlichkeit funktioniert einmal. */
.kasten-eilig { border-left: 3px solid var(--mittel); }

/* ============================================================
   Tarife
   ============================================================ */

.tarif { display: flex; flex-direction: column; gap: var(--raum-2); }
.tarif-platz { color: var(--text-sehr-leise); font-weight: var(--gewicht-display); }
.tarif-preise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--raum-3);
  margin: var(--raum-3) 0;
}
.tarif-preis-haupt .kennzahl-wert { color: var(--gut); font-size: var(--grad-xl); }
.tarif-preis-haupt { border-color: color-mix(in srgb, var(--handlung) 25%, var(--linie)); }

.transparenz {
  background: var(--flaeche-1);
  border: 1px solid var(--linie);
  border-radius: var(--rund-m);
  padding: var(--raum-6);
  margin-bottom: var(--raum-8);
}
.transparenz h3 { margin-top: 0; }
.transparenz dl { margin: 0; }
.transparenz dt { font-weight: var(--gewicht-etikett); margin-top: var(--raum-3); font-size: var(--grad-s); }
.transparenz dd { margin: 2px 0 0; color: var(--text-leise); font-size: var(--grad-s); }

/* ============================================================
   Einwilligung
   ============================================================ */

.einwilligung-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--flaeche-1);
  border-top: 1px solid var(--linie-bedienung);
  z-index: var(--ebene-banner);
  padding: var(--raum-6) var(--raum-4) calc(var(--raum-6) + env(safe-area-inset-bottom));
  box-shadow: var(--erhebung-dialog);
  animation: hereinschieben var(--dauer-normal) var(--lauf-an);
}
@keyframes hereinschieben {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
.einwilligung-inhalt {
  max-width: var(--spalte); margin: 0 auto;
  display: flex; align-items: flex-start; gap: var(--raum-6); flex-wrap: wrap;
}
.einwilligung-text { flex: 1; min-width: 260px; margin: 0; font-size: var(--grad-s); }
/* Zwei gleich große, gleich gestaltete Knöpfe. Ein leuchtendes
   „Alles akzeptieren" neben einem grauen „Ablehnen" ist keine
   freiwillige Entscheidung. */
.einwilligung-knoepfe {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--raum-3); flex: none;
}
.einwilligung-knoepfe .knopf { width: 100%; min-width: 176px; }

@media (max-width: 640px) {
  .einwilligung-knoepfe { width: 100%; }
  .einwilligung-knoepfe .knopf { min-width: 0; }
}

dialog.einstellungen {
  max-width: 540px; width: calc(100% - var(--raum-8));
  background: var(--flaeche-1); color: var(--text);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-l);
  padding: var(--raum-8);
  box-shadow: var(--erhebung-dialog);
}
dialog.einstellungen::backdrop { background: rgb(0 0 0 / 0.7); backdrop-filter: blur(2px); }
/* Derselbe Schleier über einer hellen Seite wirkt wie ein Stromausfall.
 * Hell braucht weniger davon, um dasselbe zu sagen. */
:root[data-schema="hell"] dialog.einstellungen::backdrop { background: rgb(15 22 32 / 0.4); }

/* Zwei Gruppen im Dialog: erst wie die Seite aussieht, dann was
 * gespeichert werden darf. Die Reihenfolge ist Absicht — das Harmlose
 * zuerst, damit der Dialog nicht mit einer Einwilligungsfrage
 * aufschlägt. */
.einstellungen-gruppe {
  border: 0;
  margin: 0 0 var(--raum-6);
  padding: 0;
}
.einstellungen-titel {
  display: block;
  margin: 0 0 var(--raum-2);
  padding: 0;
  font-size: var(--grad-s);
  font-weight: var(--gewicht-etikett);
  color: var(--text-leise);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
h3.einstellungen-titel { margin-top: var(--raum-6); }
.einstellungen-gruppe .zustimmung { margin: var(--raum-2) 0; }
/* Der Hinweis unter den Knöpfen braucht Luft, sonst liest er sich wie
   eine Beschriftung des Abbrechen-Knopfes. */
dialog.einstellungen .knopf-reihe { margin: var(--raum-6) 0 var(--raum-4); }

/* ============================================================
   Laden und Bänder
   ============================================================ */

.laden {
  display: flex; align-items: center; gap: var(--raum-3);
  color: var(--text-leise);
  padding: var(--raum-8) 0;
}
.laden-punkt {
  width: 10px; height: 10px; flex: none;
  border-radius: var(--rund-voll);
  background: var(--handlung);
  animation: pulsieren 1.2s ease-in-out infinite;
}
@keyframes pulsieren {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1); }
}

.mock-band {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--ebene-band);
  background: var(--warnband); color: var(--auf-warnband);
  text-align: center;
  font-weight: var(--gewicht-etikett);
  padding: var(--raum-1) var(--raum-4);
  font-size: var(--grad-xs);
}

/* ============================================================
   Schmale Geräte
   ============================================================ */

@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: var(--grad-xl); }
  h2 { font-size: 1.19rem; margin-top: var(--raum-8); }
  .huelle { padding: var(--raum-6) var(--raum-4) var(--raum-8); }
  .karte, .massnahme, .weg-karte, .transparenz { padding: var(--raum-4); }
  .leit { padding: var(--raum-6) var(--raum-4); }
  .leit-zahl { font-size: var(--grad-3xl); }
  .knopf-reihe .knopf { width: 100%; }
  .kennzahlen { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
  .weg-knopf { padding: var(--raum-4); gap: var(--raum-3); }
}

/* ============================================================
   Druck
   ============================================================ */

@media print {
  body { background: #fff; color: #000; padding-top: 0; }
  .kopf, .nav-leiste, .wege, .sprung, .einwilligung-banner, .mock-band { display: none !important; }
  .karte, .kasten, .leit, .kennzahl { border: 1px solid #ccc; background: #fff; }
  .leit-zahl, .stufe-gut, .massnahme-haupt .kennzahl-wert { color: #000; }
  .info-inhalt, .aufklapper-inhalt { display: block !important; }
  .info > summary, .aufklapper > summary { display: none; }
}