/* AUTOMATISCH ERZEUGT – nicht von Hand bearbeiten.
   Quelle: frontend/css/style.css · erzeugt mit mk_scoped.py

   Der Tarifrechner läuft im Portal in einem Wrapper
   <div class="app-embed">. Jeder Selektor ist deshalb mit
   .app-embed präfigiert. Geladen wird ausschließlich diese Datei. */

/* ── Schriften lokal selbst gehostet (DSGVO: kein externes Font-CDN) ──
   Einheitliche Hausschrift Instrument Sans (Sans) + JetBrains Mono (Zahlen/Codes) */
@font-face {font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../../assets/fonts/instrument-sans-latin-400-normal.woff2') format('woff2'),url('../../assets/fonts/instrument-sans-latin-400-normal.woff') format('woff');}
@font-face {font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../../assets/fonts/instrument-sans-latin-500-normal.woff2') format('woff2'),url('../../assets/fonts/instrument-sans-latin-500-normal.woff') format('woff');}
@font-face {font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../../assets/fonts/instrument-sans-latin-600-normal.woff2') format('woff2'),url('../../assets/fonts/instrument-sans-latin-600-normal.woff') format('woff');}
@font-face {font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../../assets/fonts/instrument-sans-latin-700-normal.woff2') format('woff2'),url('../../assets/fonts/instrument-sans-latin-700-normal.woff') format('woff');}
@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../../assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');}
@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../../assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');}
/* Source Sans Pro seit Paket 155 – dieselben Dateien wie im Portal, damit
   Rahmen und Inhalt dieselbe Schrift fuehren. Instrument Sans bleibt als
   Rueckfall in der Schriftliste stehen, falls eine Datei fehlt. */
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url('../../assets/fonts/source-sans-pro-latin-400-normal.woff2') format('woff2'),url('../../assets/fonts/source-sans-pro-latin-400-normal.woff') format('woff');}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url('../../assets/fonts/source-sans-pro-latin-600-normal.woff2') format('woff2'),url('../../assets/fonts/source-sans-pro-latin-600-normal.woff') format('woff');}
@font-face {font-family:'Source Sans Pro';font-style:normal;font-weight:700;font-display:swap;src:url('../../assets/fonts/source-sans-pro-latin-700-normal.woff2') format('woff2'),url('../../assets/fonts/source-sans-pro-latin-700-normal.woff') format('woff');}

/* ============================================================
   TARIFRECHNER  –  style.css
   Responsive, barrierefrei (WCAG 2.1 AA), Deutsche Energie
   ============================================================ */

/* Absicherung: [hidden] muss IMMER greifen, auch wenn ein Element zusätzlich
   eine Klasse mit display:grid/flex trägt (Autor-CSS würde sonst das
   UA-Standardverhalten von [hidden] überschreiben). */
.app-embed [hidden] { display: none !important; }

/* --- Custom Properties --- */
.app-embed {
  /* Farbwelt der hellen Fassung, seit Paket 155 identisch mit dem Portal
     ("Klartext, gerundet"): institutionelles Blau statt Markengrün, ein
     einziges kräftiges Warngelb als Signal. Kontrastwerte neu gerechnet. */
  --clr-primary:    #0a5ca8;   /* Institutionelles Blau – Weißtext 5,9:1 (AA) */
  --clr-primary-d:  #073f73;   /* Hover/aktiv – Weißtext 9,7:1 (AAA)          */
  --clr-accent:     #ffcc00;   /* Warngelb – nur Flächen mit dunklem Text     */
  --clr-accent-d:   #d9ad00;
  --clr-accent-ink: #111111;   /* Textfarbe AUF Akzentflächen (14,4:1 – AAA)  */
  --clr-strom:      #F5A623;   /* Sparte Strom – funktionale Kennfarbe (Fläche + dunkler Text) */
  --clr-gas:        #4A90D9;   /* Sparte Gas   – funktionale Kennfarbe                         */
  /* Dieselbe Kennfarbe, abgedunkelt, ausschliesslich fuer Flaechen mit weisser
     Schrift. Grund: Auf #4A90D9 kommt Weiss nur auf 3,3:1 und verfehlt damit
     die Vorgabe von 4,5:1 fuer normale Schriftgroessen - der Medium-Umschalter
     setzt 16 px halbfett, das zaehlt nicht als grosse Schrift. Abgedunkelt auf
     #2974C2 sind es 4,8:1. Die Kennfarbe selbst bleibt unveraendert, damit die
     Sparte weiterhin an ihrem Blau erkennbar ist. */
  --clr-gas-flaeche: #2974C2;
  /* Zustandsfarben bleiben, was sie sind: Sie tragen Bedeutung, nicht
     Gestaltung. Grün heißt "in Ordnung", Rot heißt "Fehler" – das ist von der
     Designfrage unabhängig und wurde bewusst nicht auf die Palette gezogen. */
  --clr-success:    #1c5e3b;
  --clr-warn:       #8a5a10;
  --clr-error:      #a12525;
  --clr-bg:         #f2f2f0;   /* neutrales Grau, wie --bg-soft im Portal     */
  --clr-surface:    #FFFFFF;
  /* Drei Rollen statt einer. Bis Paket 155 trug --clr-border alles: feine
     Trennlinien, Rahmen von Bedienelementen und die Aussenkontur der Karten.
     Das ist nicht aufloesbar - WCAG 1.4.11 verlangt fuer die Begrenzung von
     Bedienelementen 3:1, eine Haarlinie in dieser Staerke waere aber viel zu
     dunkel. Der alte Wert #dbe3de kam auf 1,35:1 und verfehlte die Vorgabe
     damit deutlich; das ist hier mit behoben. */
  --clr-linie:      #d8d8d6;   /* schmueckende Trennlinien, keine Vorgabe      */
  --clr-border:     #767676;   /* Rahmen von Bedienelementen – 4,5:1 auf Weiss */
  --clr-kontur:     #111111;   /* Aussenkontur der Karten, wie im Portal       */
  --clr-text:       #111111;   /* 18,9:1 auf Weiß – AAA                       */
  --clr-muted:      #6a6a6a;   /* 5,4:1 auf Weiß – AA                         */
  --clr-muted-str:  #454545;   /* 9,6:1 auf Weiß – AAA;
                                  für kleine Schrift und Tabellenköpfe        */
  --radius:         8px;
  /* Eingabefelder – Werte für die neue Palette neu gerechnet:
     Feldfläche zu Text 17,3:1 · Rahmen zu Feldfläche 3,4:1 (WCAG 1.4.11)
     · Platzhalter zu Feldfläche 5,2:1 */
  --clr-feld:             #f4f4f2;
  --clr-feld-rand:        #767676;
  --clr-feld-platzhalter: #5c5c5c;
  --radius-lg:      12px;      /* wie --radius im Portal                      */
  /* Schatten neutral abgetönt statt grünstichig – die Palette führt kein
     Markengrün mehr. Bewusst schwach, wie im Portal. */
  --shadow:         0 2px 6px rgba(17,17,17,.10);
  --shadow-lg:      0 6px 18px rgba(17,17,17,.14);
  --font-sans:      'Source Sans Pro', 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-mono:      'JetBrains Mono', 'Consolas', monospace;
  --transition:     .18s ease;

  /* ── Semantische Farbtokens (Paket 155) ────────────────────────────
     Bis hierher standen diese Werte verstreut im Regelwerk. Zusammen-
     gefasst, damit eine zweite Farbfassung (dunkel) moeglich wird, ohne
     jede Regel einzeln anzufassen. Die Werte sind unveraendert – dieser
     Schritt aendert am Aussehen nichts.
     Nicht enthalten: die Druckansicht (@media print). Sie bleibt in
     jeder Fassung hell, ihre Farben gehoeren zu den PDFs. */
  /* Text auf farbigen Flaechen */
  --clr-on-primary:      #fff;                 /* Text und kleine Flaechen auf farbigem Grund */
  --clr-on-strom:        #222;                 /* Text auf der Sparten-Kennfarbe Strom */
  /* Flaechen und Trennlinien */
  --clr-surface-alt:     #fafbff;              /* Zeilenhervorhebung Preisaufschluesselung */
  --clr-surface-alt2:    #f8faff;              /* Zeilenhervorhebung Datentabelle */
  --clr-divider:         #f0f0f0;              /* feine Trennlinie in Listen */
  --clr-divider-2:       #f0f3f7;              /* feine Trennlinie in Tabellen */
  --clr-selected-bg:     #ebf1fa;              /* Hintergrund gewaehlter Karten und Hinweisflaechen */
  /* Kopfbereich des Rechners. Bis Paket 160 lief der Verlauf von
     --clr-primary aus; das ist in der dunklen Fassung ein helles Gruen, wodurch
     die Schrift am linken Ende auf 1,7:1 fiel und am rechten auf 1,2:1 - der
     Kopfbereich war dort streckenweise unlesbar. Er hat jetzt eigene Werte und
     haengt nicht mehr an der Primaerfarbe. */
  --clr-hero-von:        #0a5ca8;              /* Anfang des Farbverlaufs      */
  --clr-verlauf-hero:    #00498a;              /* Ende des Farbverlaufs        */
  --clr-hero-ink:        #ffffff;              /* Fliesstext im Kopfbereich    */
  --clr-hero-titel:      #3ddc97;              /* Ueberschrift, ab Paket 160   */
  --clr-verlauf-cta:     #004e9a;              /* Ende des Farbverlaufs der Handlungsflaeche */
  --clr-verlauf-karte:   #fbfcfb;              /* Startfarbe des Kartenverlaufs */
  /* Gesperrte Bedienelemente */
  --clr-disabled-bg:     #f4f5f6;
  --clr-disabled-rand:   #dde1e4;
  --clr-disabled-ink:    #5a635e;              /* 5,7:1 auf grauem Grund */
  /* Marke im Kopfbereich */
  --clr-chip-bg:         #e9eae3;
  /* Statusflaechen: Hinweis, Warnung, Erfolg, Fehler */
  --clr-info-bg:         #e8f0fe;
  --clr-info-ink:        #1a3a6b;
  --clr-warn-bg:         #fff8e1;
  --clr-warn-ink:        #5c3900;
  --clr-warn-stark:      #e65100;              /* Warntext ohne Flaeche */
  --clr-success-bg:      #e8f5e9;
  --clr-success-ink:     #1b4d23;
  --clr-error-bg:        #ffebee;
  --clr-error-ink:       #7b0000;
  --clr-error-feld-bg:   #fff5f5;              /* Hintergrund eines fehlerhaften Eingabefelds */
  /* Freiwillige Angaben (Schritt 3) */
  --clr-opt-gruen-rand:  #a5d6a7;
  --clr-opt-gruen-ink:   #1b5e20;
  --clr-opt-gelb-rand:   #ffe082;
  --clr-opt-gelb-ink:    #6d4c00;
  /* Tarifauszeichnung und Kennzeichen */
  --clr-tarif-bg:        #fff3e0;
  --clr-tarif-ink:       #b35000;
  --clr-tarif-rand:      #ffd080;
  --clr-badge-strom-bg:  #fff3cd;
  --clr-badge-strom-ink: #856404;
  --clr-badge-gas-bg:    #dbeafe;
  --clr-badge-gas-ink:   #1e3a7a;
  --clr-badge-ok-bg:     #d1fae5;
  --clr-badge-ok-ink:    #065f46;
  --clr-badge-warn-bg:   #fef9c3;
  --clr-badge-warn-ink:  #854d0e;
}

/* --- Reset & Base --- */
.app-embed *, .app-embed *::before, .app-embed *::after { box-sizing: border-box; margin: 0; padding: 0; }
.app-embed { scroll-behavior: smooth; font-size: 16px; }
.app-embed {
  font-family: var(--font-sans);
  background: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.6;
  min-height: 100vh;
}
.app-embed a { color: var(--clr-primary); text-decoration: underline; }
.app-embed a:hover, .app-embed a:focus { color: var(--clr-primary-d); }

/* Fokus-Styles für Barrierefreiheit */
.app-embed :focus-visible {
  outline: 3px solid var(--clr-primary);
  outline-offset: 2px;
  border-radius: 3px;
}
.app-embed *:focus:not(:focus-visible) { outline: none; }

/* Screen-Reader only */
.app-embed .sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Skip-Link --- */
.app-embed .skip-link {
  position: absolute; top: -40px; left: 8px;
  background: var(--clr-primary); color: var(--clr-on-primary);
  padding: .5rem 1rem; border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700; z-index: 9999; transition: top .2s;
}
.app-embed .skip-link:focus { top: 0; }

/* --- Layout --- */
.app-embed .container { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }

/* Einheitliche Bereichsbreite für alle Wizard-Schritte (1–6) */
.app-embed .step-panel { max-width: 860px; margin: 0 auto; width: 100%; }
.app-embed .step-panel .card { max-width: none; } /* Inline max-width einzelner Cards überschreiben */
.app-embed .page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.app-embed main { flex: 1; }

/* --- Header --- */
.app-embed .site-header {
  background: var(--clr-primary);
  color: var(--clr-on-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  position: sticky; top: 0; z-index: 100;
}
.app-embed .site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .9rem; padding-bottom: .9rem;
}
.app-embed .logo {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--clr-on-primary);
}
.app-embed .logo-icon { font-size: 1.8rem; }
.app-embed .logo-img {
  height: 40px; width: auto; display: block; flex-shrink: 0;
  background: var(--clr-on-primary); border-radius: 6px; padding: .25rem .5rem;
}
.app-embed .logo-text { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.app-embed .logo-sub { font-size: .75rem; color: rgba(255,255,255,.7); display: block; }

.app-embed .nav-tabs {
  display: flex; gap: .25rem; list-style: none;
}
.app-embed .nav-tabs a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem 1rem; border-radius: var(--radius);
  color: rgba(255,255,255,.85); text-decoration: none;
  font-size: .9rem; transition: background var(--transition);
}
.app-embed .nav-tabs a:hover, .app-embed .nav-tabs a.active { background: rgba(255,255,255,.15); color: var(--clr-on-primary); }
.app-embed .nav-tabs a.active { font-weight: 700; }

/* --- Hero --- */
.app-embed .hero {
  background: linear-gradient(135deg, var(--clr-hero-von) 0%, var(--clr-verlauf-hero) 100%);
  color: var(--clr-hero-ink); padding: 3.5rem 0 2.5rem;
  text-align: center;
}
/* Ueberschrift "Ihr persoenlicher Energiepreis" seit Paket 160 in der
   Signalfarbe. Sichtbarkeit gerechnet: 3,8:1 am hellen Verlaufsanfang und
   5,1:1 am Ende. Die Ueberschrift steht mit mindestens 25,6 px halbfett und
   zaehlt damit als grosse Schrift - dafuer verlangt WCAG 3:1, beide Werte
   liegen darueber. In der dunklen Fassung sind es 8,0:1 bzw. 10,2:1. */
.app-embed .hero h1 { font-size: clamp(1.6rem,4vw,2.6rem); font-weight: 700; margin-bottom: .6rem; color: var(--clr-hero-titel); }
/* Vorher fest rgba(255,255,255,.85). Das ging gut, solange der Kopfbereich in
   beiden Fassungen dunkel war - haengt jetzt aber am Token. */
.app-embed .hero p { font-size: 1.1rem; color: var(--clr-hero-ink); opacity: .88; max-width: 580px; margin: 0 auto 2rem; }

/* Medium-Toggle */
.app-embed .medium-toggle {
  display: inline-flex; background: rgba(255,255,255,.12);
  border-radius: 50px; padding: 4px; gap: 2px;
}
.app-embed .medium-btn {
  border: none; cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem 1.8rem; border-radius: 50px;
  font-size: 1rem; font-weight: 600;
  color: rgba(255,255,255,.8); background: transparent;
  transition: all .2s;
}
.app-embed .medium-btn.active[data-medium="strom"] { background: var(--clr-strom); color: var(--clr-on-strom); }
.app-embed .medium-btn.active[data-medium="gas"] { background: var(--clr-gas-flaeche); color: var(--clr-on-primary); }
.app-embed .medium-btn:hover { background: rgba(255,255,255,.2); color: var(--clr-on-primary); }

/* --- Progress Steps --- */
.app-embed .steps-bar {
  background: var(--clr-surface); border-bottom: 1px solid var(--clr-linie);
  padding: 1rem 0;
}
.app-embed .steps {
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.app-embed .step {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--clr-muted);
  padding: .3rem .6rem;
  list-style: none;
}
.app-embed .step-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem;
  background: var(--clr-linie); color: var(--clr-muted);
  flex-shrink: 0; transition: all .3s;
}
.app-embed .step.active .step-num { background: var(--clr-primary); color: var(--clr-on-primary); }
.app-embed .step.done  .step-num { background: var(--clr-success); color: var(--clr-on-primary); }
.app-embed .step.active { color: var(--clr-text); font-weight: 600; }
.app-embed .step-connector { width: 30px; height: 2px; background: var(--clr-linie); flex-shrink: 0; }
@media (max-width: 600px) { .app-embed .step-connector { width: 12px; } .app-embed .step { padding: .3rem .3rem; } }

/* --- Karten / Cards --- */
.app-embed .card {
  background: var(--clr-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  /* 2 px wie im Portal: Die kraeftige Aussenkontur ist das tragende
     Gestaltungsmittel dieser Fassung. box-sizing steht global auf
     border-box, die Breite aendert sich dadurch nicht. */
  border: 2px solid var(--clr-kontur);
  overflow: hidden;
}
.app-embed .card-header {
  padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--clr-linie);
  display: flex; align-items: center; gap: .6rem;
}
.app-embed .card-header h2 { font-size: 1.1rem; font-weight: 700; }
.app-embed .card-body { padding: 1.4rem; }

/* --- Formular --- */
.app-embed .form-grid { display: grid; gap: 1rem; }
.app-embed .form-grid-2 { grid-template-columns: 1fr 1fr; }
.app-embed .form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 768px) { .app-embed .form-grid-2, .app-embed .form-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .app-embed .form-grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } }

/* PLZ (schmal) + Ort/Ortsteil (breiter) nebeneinander */
.app-embed .plz-ortsteil-row { grid-template-columns: 140px 1fr; align-items: start; }
@media (max-width: 480px) { .app-embed .plz-ortsteil-row { grid-template-columns: 1fr; } }

/* HT/NT Arbeitspreis-Raster (Nachtspeicher Zweitarif) responsiv */
@media (max-width: 640px) { .app-embed .htnt-ap-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 360px) { .app-embed .htnt-ap-grid { grid-template-columns: 1fr !important; } }

.app-embed .form-group { display: flex; flex-direction: column; gap: .35rem; }
.app-embed label {
  font-size: .85rem; font-weight: 600; color: var(--clr-muted);
  letter-spacing: .02em;
}
.app-embed label .req { color: var(--clr-error); margin-left: .2rem; }

/* Eingabefelder: eigener Grund, damit sie sich vom weißen Kartenhintergrund
   abheben. Der Rahmen ist dabei bewusst dunkler als der allgemeine
   --clr-border: WCAG 1.4.11 verlangt für die Begrenzung von Bedienelementen
   3:1, und die helle Feldfläche allein erreicht das nicht. */
.app-embed input[type="text"], .app-embed input[type="email"], .app-embed input[type="tel"], .app-embed input[type="number"], .app-embed input[type="date"], .app-embed select, .app-embed textarea {
  border: 1.5px solid var(--clr-feld-rand);
  border-radius: var(--radius); padding: .6rem .85rem;
  font-size: .95rem; font-family: var(--font-sans);
  background: var(--clr-feld); color: var(--clr-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%; appearance: auto;
}

/* Platzhalter: die Browservorgabe liegt bei rund 4:1 und damit unter AA */
.app-embed input::placeholder, .app-embed textarea::placeholder { color: var(--clr-feld-platzhalter); opacity: 1; }

/* Gesperrte Felder erkennbar, aber lesbar halten */
.app-embed input:disabled, .app-embed select:disabled, .app-embed textarea:disabled {
  background: var(--clr-chip-bg);
  color: var(--clr-disabled-ink);
  border-color: var(--clr-feld-rand);   /* 3,1:1 gegen die graue Fläche */
  cursor: not-allowed;
}
.app-embed input:focus, .app-embed select:focus, .app-embed textarea:focus {
  border-color: var(--clr-primary); outline: none;
  box-shadow: 0 0 0 3px rgba(0,51,102,.15);
}
.app-embed input[aria-invalid="true"], .app-embed select[aria-invalid="true"] {
  border-color: var(--clr-error);
}
.app-embed .field-error {
  font-size: .8rem; color: var(--clr-error); display: none;
}
.app-embed .field-error.visible { display: block; }

/* PLZ-Combo */
.app-embed .plz-wrap { position: relative; }
.app-embed .plz-ortsteil-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--clr-surface); border: 1.5px solid var(--clr-primary);
  border-top: none; border-radius: 0 0 var(--radius) var(--radius);
  max-height: 220px; overflow-y: auto;
  box-shadow: var(--shadow);
}
.app-embed .plz-ortsteil-list li {
  padding: .6rem 1rem; cursor: pointer; list-style: none; font-size: .9rem;
}
.app-embed .plz-ortsteil-list li:hover, .app-embed .plz-ortsteil-list li.focused { background: var(--clr-bg); color: var(--clr-primary); }
.app-embed .plz-nb-info {
  font-size: .82rem; color: var(--clr-muted); margin-top: .35rem; padding-left: .1rem;
  min-height: 1.2em;
}
.app-embed .plz-nb-info.ok { color: var(--clr-primary); font-weight: 600; }
.app-embed .plz-nb-info.warn { color: var(--clr-warn-stark); font-weight: 600; }
.app-embed .plz-nb-info.loading { color: var(--clr-muted); font-style: italic; }
.app-embed .plz-nb-info.error {
  color: var(--clr-on-primary);
  background: var(--clr-error);
  border-radius: 6px;
  padding: .45rem .75rem;
  font-weight: 600;
  display: inline-block;
  margin-top: .5rem;
  animation: shake .3s ease;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* --- Radio-/Checkbox-Group --- */
.app-embed .radio-group, .app-embed .check-group {
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.app-embed .radio-card {
  border: 2px solid var(--clr-border); border-radius: var(--radius);
  padding: .65rem 1rem; cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 500;
  transition: all .2s; background: var(--clr-surface);
  min-width: 160px;
}
.app-embed .radio-card input { accent-color: var(--clr-primary); }
.app-embed .radio-card:hover { border-color: var(--clr-primary); }
.app-embed .radio-card.selected { border-color: var(--clr-primary); background: var(--clr-selected-bg); }
.app-embed .radio-card .rc-icon { font-size: 1.3rem; }

.app-embed .toggle-switch {
  display: flex; align-items: center; gap: .7rem;
  cursor: pointer; font-size: .92rem;
}
.app-embed .toggle-switch input[type="checkbox"] {
  width: 40px; height: 22px; border-radius: 11px;
  appearance: none; background: var(--clr-border);
  position: relative; cursor: pointer; flex-shrink: 0;
  transition: background .2s; border: none;
}
.app-embed .toggle-switch input:checked { background: var(--clr-primary); }
.app-embed .toggle-switch input::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  background: var(--clr-on-primary); border-radius: 50%; top: 3px; left: 3px;
  transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.app-embed .toggle-switch input:checked::after { left: 21px; }

/* --- Tarifkarten --- */
.app-embed .tarif-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}
.app-embed .tarif-card {
  border: 2px solid var(--clr-kontur); border-radius: var(--radius-lg);
  background: var(--clr-surface); cursor: pointer;
  transition: all .2s; position: relative; overflow: hidden;
}
.app-embed .tarif-card:hover { border-color: var(--clr-primary); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.app-embed .tarif-card.selected { border-color: var(--clr-primary); box-shadow: 0 0 0 3px rgba(0,51,102,.18); }
.app-embed .tarif-badge {
  position: absolute; top: 10px; right: 10px;
  background: var(--clr-accent); color: var(--clr-accent-ink);
  font-size: .72rem; font-weight: 700; padding: .2rem .6rem;
  border-radius: 50px; letter-spacing: .04em;
}
.app-embed .tarif-card-header { padding: 1.1rem 1.2rem .8rem; }
.app-embed .tarif-icon { font-size: 2rem; margin-bottom: .3rem; }
.app-embed .tarif-name { font-size: 1.05rem; font-weight: 700; }
.app-embed .tarif-sub { font-size: .82rem; color: var(--clr-muted); }
.app-embed .tarif-preise { padding: 0 1.2rem 1rem; border-top: 1px solid var(--clr-linie); margin-top: .8rem; }
.app-embed .preis-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--clr-divider); font-size: .88rem;
}
.app-embed .preis-row:last-child { border-bottom: none; }
.app-embed .preis-label { color: var(--clr-muted); }
.app-embed .preis-val { font-weight: 700; font-size: 1rem; color: var(--clr-primary); }
.app-embed .preis-einheit { font-size: .78rem; color: var(--clr-muted); font-weight: 400; }
.app-embed .jahreskosten-big {
  margin: .8rem 1.2rem; padding: .8rem 1rem;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-verlauf-cta));
  color: var(--clr-on-primary); border-radius: var(--radius); text-align: center;
}
.app-embed .jahreskosten-big .betrag { font-size: 1.6rem; font-weight: 700; display: block; }
.app-embed .jahreskosten-big small { font-size: .78rem; opacity: .85; }
.app-embed .bonus-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--clr-tarif-bg); color: var(--clr-tarif-ink); font-size: .8rem; font-weight: 700;
  padding: .25rem .7rem; border-radius: 50px; margin: 0 1.2rem .8rem;
  border: 1px solid var(--clr-tarif-rand);
}

/* --- Aufschlüsselung --- */
.app-embed .aufschluesselung {
  margin-top: 1rem;
}
.app-embed .aufschluesselung summary {
  cursor: pointer; font-size: .85rem; color: var(--clr-primary);
  font-weight: 600; padding: .4rem 0; list-style: none;
  display: flex; align-items: center; gap: .3rem;
}
.app-embed .aufschluesselung summary::-webkit-details-marker { display: none; }
.app-embed .aufschluesselung summary::before { content: '▶'; font-size: .65rem; transition: transform .2s; }
.app-embed details[open] summary::before { transform: rotate(90deg); }
.app-embed .aufschluesselung-table {
  width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: .5rem;
}
.app-embed .aufschluesselung-table th {
  background: var(--clr-bg); padding: .4rem .6rem;
  text-align: left; font-size: .78rem;
  /* Kopfzeilen stehen auf hellblauem Grund (#e8eef5) und sind klein gesetzt –
     mit --clr-muted lag der Kontrast bei 4,09:1 und damit unter AA. */
  color: var(--clr-muted-str);
}
.app-embed .aufschluesselung-table td {
  padding: .4rem .6rem; border-bottom: 1px solid var(--clr-divider);
}
.app-embed .aufschluesselung-table tr:hover td { background: var(--clr-surface-alt); }

/* --- Buttons --- */
.app-embed .btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.6rem; border-radius: var(--radius);
  font-size: .95rem; font-weight: 700; cursor: pointer;
  border: none; transition: all .2s; text-decoration: none;
  font-family: var(--font-sans); line-height: 1.3;
}
.app-embed .btn:disabled { opacity: .5; cursor: not-allowed; }
.app-embed .btn-primary {
  background: var(--clr-primary); color: var(--clr-on-primary);
}
.app-embed .btn-primary:hover:not(:disabled) { background: var(--clr-primary-d); }
.app-embed .btn-accent {
  background: var(--clr-accent); color: var(--clr-accent-ink);
}
.app-embed .btn-accent:hover:not(:disabled) { background: var(--clr-accent-d); }
.app-embed .btn-outline {
  background: transparent; border: 2px solid var(--clr-primary); color: var(--clr-primary);
}
.app-embed .btn-outline:hover:not(:disabled) { background: var(--clr-primary); color: var(--clr-on-primary); }
.app-embed .btn-ghost {
  background: transparent; color: var(--clr-primary);
}
.app-embed .btn-ghost:hover:not(:disabled) { background: rgba(0,51,102,.07); }
.app-embed .btn-lg { padding: .9rem 2rem; font-size: 1.05rem; }
.app-embed .btn-sm { padding: .4rem 1rem; font-size: .82rem; }
.app-embed .btn-block { width: 100%; justify-content: center; }
.app-embed .btn-group { display: flex; gap: .7rem; flex-wrap: wrap; }

/* Loading Spinner */
.app-embed .spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: var(--clr-on-primary); animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Hinweis-Boxen --- */
.app-embed .hint-box {
  padding: .8rem 1rem; border-radius: var(--radius);
  font-size: .88rem; display: flex; gap: .6rem; align-items: flex-start;
  margin: .7rem 0;
}
.app-embed .hint-box .hint-icon { font-size: 1.1rem; flex-shrink: 0; }
.app-embed .hint-info { background: var(--clr-info-bg); border-left: 4px solid var(--clr-gas); color: var(--clr-info-ink); }
.app-embed .hint-warn { background: var(--clr-warn-bg); border-left: 4px solid var(--clr-strom); color: var(--clr-warn-ink); }
.app-embed .hint-success { background: var(--clr-success-bg); border-left: 4px solid var(--clr-success); color: var(--clr-success-ink); }
.app-embed .hint-error { background: var(--clr-error-bg); border-left: 4px solid var(--clr-error); color: var(--clr-error-ink); }

/* --- Modal --- */
.app-embed .modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; opacity: 0; pointer-events: none; transition: opacity .25s;
}
.app-embed .modal-overlay.open { opacity: 1; pointer-events: all; }
.app-embed .modal {
  background: var(--clr-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); max-width: 680px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  transform: translateY(20px); transition: transform .25s;
}
.app-embed .modal-overlay.open .modal { transform: translateY(0); }
.app-embed .modal-header {
  padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--clr-linie);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; background: var(--clr-surface); z-index: 1;
}
.app-embed .modal-header h3 { font-size: 1.15rem; font-weight: 700; }
.app-embed .modal-close {
  background: none; border: none; font-size: 1.4rem; cursor: pointer;
  color: var(--clr-muted); line-height: 1; padding: .2rem;
  border-radius: 50%; transition: background .2s;
}
.app-embed .modal-close:hover { background: var(--clr-bg); }
.app-embed .modal-body { padding: 1.5rem; }
.app-embed .modal-footer {
  padding: 1rem 1.5rem; border-top: 1px solid var(--clr-linie);
  display: flex; justify-content: flex-end; gap: .7rem;
  position: sticky; bottom: 0; background: var(--clr-surface);
}

/* --- Toast --- */
.app-embed .toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 9999; display: flex; flex-direction: column; gap: .5rem;
}
.app-embed .toast {
  background: var(--clr-text); color: var(--clr-on-primary);
  padding: .8rem 1.2rem; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); font-size: .9rem;
  max-width: 340px; animation: slideUp .25s ease;
  display: flex; align-items: center; gap: .7rem;
}
.app-embed .toast-success { background: var(--clr-success); }
.app-embed .toast-error { background: var(--clr-error); }
.app-embed .toast-warn { background: var(--clr-warn); }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } }

/* --- Erfolg-Screen --- */
.app-embed .success-screen {
  text-align: center; padding: 3rem 1.5rem;
}
.app-embed .success-icon {
  font-size: 4rem; display: block; margin-bottom: 1rem;
  animation: pop .4s cubic-bezier(.4,0,.2,1.5);
}
@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.app-embed .success-screen h2 { font-size: 1.6rem; color: var(--clr-success); margin-bottom: .5rem; }
.app-embed .success-screen p { color: var(--clr-muted); max-width: 480px; margin: 0 auto; }
.app-embed .vertrag-nr-badge {
  display: inline-block; background: var(--clr-primary); color: var(--clr-on-primary);
  padding: .5rem 1.5rem; border-radius: 50px; font-family: var(--font-mono);
  font-size: 1.1rem; font-weight: 700; margin: 1rem 0;
}

/* --- Footer --- */
.app-embed .site-footer {
  background: var(--clr-primary-d); color: rgba(255,255,255,.75);
  padding: 2.5rem 0 1.5rem; margin-top: auto;
}
.app-embed .footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;
  margin-bottom: 2rem;
}
.app-embed .footer-col h4 { color: var(--clr-on-primary); font-size: .95rem; margin-bottom: .7rem; }
.app-embed .footer-col ul { list-style: none; }
.app-embed .footer-col li { margin-bottom: .35rem; }
.app-embed .footer-col a { color: rgba(255,255,255,.7); font-size: .88rem; text-decoration: none; }
.app-embed .footer-col a:hover { color: var(--clr-on-primary); }
.app-embed .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15); padding-top: 1rem;
  font-size: .8rem; text-align: center;
}

/* --- Accordion --- */
.app-embed .accordion-item {
  border: 1px solid var(--clr-border); border-radius: var(--radius);
  margin-bottom: .5rem; overflow: hidden;
}
.app-embed .accordion-btn {
  width: 100%; padding: .9rem 1.1rem; background: var(--clr-surface);
  border: none; cursor: pointer; text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .95rem; font-weight: 600; font-family: var(--font-sans);
  color: var(--clr-text);
}
.app-embed .accordion-btn:hover { background: var(--clr-bg); }
.app-embed .accordion-chevron { transition: transform .25s; font-size: .8rem; }
.app-embed .accordion-item.open .accordion-chevron { transform: rotate(90deg); }
.app-embed .accordion-content { padding: 0 1.1rem; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.app-embed .accordion-item.open .accordion-content { max-height: 600px; padding-bottom: 1rem; }

/* --- Tabellen --- */
.app-embed .data-table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
.app-embed .data-table th {
  background: var(--clr-bg); padding: .65rem .8rem;
  text-align: left; font-weight: 700; font-size: .82rem;
  color: var(--clr-muted); border-bottom: 2px solid var(--clr-linie);
  white-space: nowrap;
}
.app-embed .data-table td {
  padding: .6rem .8rem; border-bottom: 1px solid var(--clr-divider-2);
  vertical-align: middle;
}
.app-embed .data-table tr:hover td { background: var(--clr-surface-alt2); }
.app-embed .badge {
  display: inline-block; padding: .2rem .65rem; border-radius: 50px;
  font-size: .75rem; font-weight: 700; letter-spacing: .03em;
}
.app-embed .badge-strom { background: var(--clr-badge-strom-bg); color: var(--clr-badge-strom-ink); }
.app-embed .badge-gas { background: var(--clr-badge-gas-bg); color: var(--clr-badge-gas-ink); }
.app-embed .badge-ok { background: var(--clr-badge-ok-bg); color: var(--clr-badge-ok-ink); }
.app-embed .badge-warn { background: var(--clr-badge-warn-bg); color: var(--clr-badge-warn-ink); }

/* --- Responsive Utilities --- */
@media (max-width: 768px) {
  .app-embed .hero { padding: 2rem 0 1.5rem; }
  .app-embed .tarif-grid { grid-template-columns: 1fr; }
  .app-embed .btn-group { flex-direction: column; }
  .app-embed .btn-group .btn { width: 100%; justify-content: center; }
  .app-embed .modal { margin: 1rem; }
}
@media (max-width: 480px) {
  .app-embed .container { padding: 0 1rem; }
  .app-embed .card-body { padding: 1rem; }
}

/* Drucken */
/* ══ Optionen (Schritt 3) ══════════════════════════════════════════════════
   Jede Frage ist eine eigene Karte: Kopfzeile mit der Frage, darunter der
   Inhalt. Die Fragen sind bewusst keine <legend> – Browser betten eine legend
   in die Rahmenlinie ein, wodurch der Text auf dem Rahmen säße.
   Alle Abstände stehen hier; im HTML gibt es keine Inline-Styles mehr, sonst
   ließe sich nichts zentral ändern. */

.app-embed .opt-block {
  border: 1px solid var(--clr-linie);
  border-radius: 10px;
  background: var(--clr-surface);
  margin: 0 0 2.5rem;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}
.app-embed .opt-block:last-of-type { margin-bottom: 1rem; }
.app-embed .opt-block[hidden] { display: none !important; }

/* Kopfzeile mit der Frage */
.app-embed .opt-legend {
  display: block;
  margin: 0;
  padding: 1.05rem 1.6rem;
  background: linear-gradient(180deg, var(--clr-verlauf-karte) 0%, var(--clr-bg) 100%);
  border-bottom: 1px solid var(--clr-linie);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--clr-text);
  letter-spacing: -.01em;
}

/* Abstand zwischen Kopfzeile und Inhalt, wenn KEIN .opt-body dazwischen liegt.
   Das betrifft die Fragen in Schritt 1 (z. B. "Separate Messung der
   Nachtspeicher?", Zählertyp/Zählerart) - sie nutzen dieselbe .opt-legend-
   Kopfzeile wie Schritt 3, wurden aber nie in den .opt-body-Aufbau überführt.
   .opt-body regelt seinen eigenen Abstand bereits über sein padding-top,
   daher hier ausdrücklich ausgenommen. */
.app-embed .opt-legend + *:not(.opt-body) {
  margin-top: 1.2rem;
}

/* Inhaltsbereich */
.app-embed .opt-body {
  padding: 1.6rem 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;           /* Abstand zwischen Auswahl, Hinweis, Unterblöcken */
}

/* Zeile aus Auswahlkacheln und Zusatzfeldern nebeneinander */
.app-embed .opt-zeile {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.app-embed .opt-zeile--eng { gap: 1rem; align-items: flex-end; }

/* Auswahlkacheln */
.app-embed .opt-body .radio-group { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0; }
.app-embed .opt-body .radio-card { min-width: 160px; padding: .85rem 1.15rem; margin: 0; }
.app-embed .radio-group--karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.app-embed .radio-group--karten .radio-card { min-width: 0; padding: 1.1rem 1.2rem; }

/* Eingabefelder mit Beschriftung */
/* Drei Felder nebeneinander, ab schmalen Breiten untereinander.
   minmax(160px, …) sorgt dafür, dass Anrede, Name und Kundennummer auch in
   der Karte nebeneinander Platz finden. */
.app-embed .opt-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.2rem 1.3rem;
}
/* Kundenwerbung: Anrede braucht deutlich weniger Platz als der Name -
   eigene Spaltenaufteilung statt der gleichmäßigen auto-fit-Verteilung. */
.app-embed .opt-felder--werbung {
  grid-template-columns: minmax(90px, .6fr) minmax(220px, 1.8fr) minmax(140px, 1fr);
}
@media (max-width: 640px) {
  .app-embed .opt-felder--werbung { grid-template-columns: 1fr; }
}
.app-embed .opt-feld { display: flex; flex-direction: column; gap: .35rem; }
/* Zahlenfeld für die PV-Leistung: ohne Begrenzung nimmt das <input> die
   browserübliche Standardbreite ein (rund 20 Zeichen) - deutlich mehr, als
   für eine Zahl wie "9,8" nötig ist. Dadurch wurde die ganze Zeile (Ja/Nein
   + Leistung + "Nicht bekannt") insgesamt zu breit für eine Karte und brach
   auf schmaleren Bildschirmen bereits um, wo eigentlich noch Platz gewesen
   wäre. */
/* Breit genug, dass "Inst. Leistung (kWp)" auf EINE Zeile passt (Paket 176).
   Vorher 7rem: Die Beschriftung brach auf zwei Zeilen um, das Feld wurde
   dadurch 89 px hoch und schob die Eingabe nach unten - neben der Kachel
   "Nicht bekannt" sah das aus, als stuende sie zu tief. Gemessen wird nicht
   die Kachel verschoben, sondern die Ursache beseitigt. */
.app-embed .opt-feld--kwp { flex: 0 0 auto; width: 10.5rem; }
.app-embed .opt-label { font-size: .84rem; font-weight: 500; color: var(--clr-muted-str); }
.app-embed .opt-info-icon { cursor: help; color: var(--clr-primary); margin-left: .15rem; }

/* Ankreuzfelder */
.app-embed .opt-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .89rem;
  line-height: 1.5;
  cursor: pointer;
  margin: 0;
}
.app-embed .opt-check input { margin-top: .18rem; flex: 0 0 auto; }
.app-embed .opt-checkgruppe { display: flex; gap: 1.6rem; flex-wrap: wrap; }

/* Erklärender Text – abgesetzte Fläche, damit er nicht mit der Auswahl
   verschwimmt */
.app-embed .opt-hinweis {
  margin: 0;
  padding: .9rem 1.1rem;
  font-size: .83rem;
  line-height: 1.65;
  color: var(--clr-muted-str);
  background: var(--clr-bg);
  border-left: 3px solid var(--clr-linie);
  border-radius: 0 6px 6px 0;
}
.app-embed .opt-hinweis[hidden] { display: none !important; }
.app-embed .opt-klein { margin: 0; font-size: .78rem; color: var(--clr-muted-str); }

/* Farbige Infoflächen: Ökostromkosten grün, Photovoltaik-Hinweis gelb.
   Zwei Einsatzorte mit unterschiedlicher Flex-Achse:
     - innerhalb .opt-zeile (Reihe)  -> Ökostrom, steht neben der Radio-Gruppe
     - direktes Kind von .opt-body (Spalte) -> Photovoltaik, steht darunter
   .opt-body ist selbst ein Spalten-Flexcontainer; "flex: 1 1 19rem" bezieht
   sich dort auf die HÖHE statt die Breite und blähte die Fläche unnötig auf
   (sichtbar beim PV-Hinweis: großteils leere gelbe Box). Die wachsende
   Breite gilt deshalb nur noch explizit innerhalb von .opt-zeile. */
.app-embed .opt-info-gruen, .app-embed .opt-info-gelb {
  min-width: 16rem;
  padding: .9rem 1.1rem;
  border-radius: 8px;
  font-size: .83rem;
  line-height: 1.55;
}
.app-embed .opt-zeile > .opt-info-gruen, .app-embed .opt-zeile > .opt-info-gelb {
  flex: 1 1 19rem;
}
.app-embed .opt-body > .opt-info-gruen, .app-embed .opt-body > .opt-info-gelb {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}
.app-embed .opt-info-gruen { background: var(--clr-success-bg); border: 1px solid var(--clr-opt-gruen-rand); color: var(--clr-opt-gruen-ink); }
.app-embed .opt-info-gelb { background: var(--clr-warn-bg); border: 1px solid var(--clr-opt-gelb-rand); color: var(--clr-opt-gelb-ink); }
.app-embed .opt-info-gruen:empty, .app-embed .opt-info-gelb:empty { display: none; }

/* Unterblock: gehört zur Frage darüber, deshalb eingerückt mit farbiger Linie
   – und innerhalb derselben Karte, nicht als eigene Fläche daneben. */
.app-embed .opt-unterblock {
  border-left: 3px solid var(--clr-primary);
  padding: .1rem 0 .1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.app-embed .opt-unterblock[hidden] { display: none !important; }
.app-embed .opt-unterfrage {
  font-size: .92rem;
  font-weight: 600;
  color: var(--clr-text);
  line-height: 1.45;
}

/* Gesperrte Auswahl: erkennbar, aber lesbar. Ein reines opacity:.5 läge bei
   2,8:1 und damit deutlich unter WCAG AA. */
.app-embed .opt-block .radio-card.is-disabled {
  background: var(--clr-disabled-bg);
  border-color: var(--clr-disabled-rand);
  color: var(--clr-disabled-ink);              /* 5,7:1 auf grauem Grund */
  opacity: 1;
}
.app-embed .opt-block .radio-card.is-disabled .za-desc, .app-embed .opt-block .radio-card.is-disabled .za-titel { color: var(--clr-disabled-ink); }

@media (max-width: 640px) {
  .app-embed .opt-block { margin-bottom: 1.4rem; border-radius: 8px; }
  .app-embed .opt-legend { font-size: .95rem; padding: .85rem 1.1rem; }
  .app-embed .opt-body { padding: 1.1rem; gap: 1.1rem; }
  .app-embed .opt-zeile { gap: .9rem; }
  .app-embed .opt-checkgruppe { gap: .9rem; }
  .app-embed .opt-unterblock { padding-left: 1rem; }
}

/* Textbaustein-Container: die Bausteine bringen eigene <p>-Absätze mit.
   Der erste und letzte Absatz soll keinen zusätzlichen Außenabstand erzeugen. */
.app-embed .tb-inhalt > p { margin: 0 0 .6rem; }
.app-embed .tb-inhalt > p:last-child { margin-bottom: 0; }
.app-embed .tb-inhalt > ul, .app-embed .tb-inhalt > ol { margin: 0 0 .6rem 1.2rem; }


/* ══════════════════════════════════════════════════════════════════════
   DUNKLE FASSUNG (Paket 157)

   Zweiter Wertesatz derselben Tokens. Kein Selektor des Regelwerks wird
   dafuer angefasst - genau dafuer war die Tokenebene aus Paket 155 da.

   Drei Zustaende, wie im Portal:
     - Ohne Auswahl entscheidet das Geraet (prefers-color-scheme).
     - Eine bewusste Wahl im Menue setzt data-thema am <html>-Element und
       gewinnt in beide Richtungen.
   Der :not()-Riegel im Media-Block ist noetig, damit "hell" auch auf einem
   dunkel eingestellten Geraet hell bleibt.

   NICHT enthalten: die Druckansicht. Sie steht in @media print und bleibt in
   jeder Fassung hell - ein dunkel gedruckter Vertrag waere das Gegenteil
   dessen, was Paket 149 erreicht hat.

   Grundgedanke der Umkehrung: Farbige Flaechen werden hell und tragen dunkle
   Schrift (--clr-on-primary kippt von Weiss auf Fast-Schwarz), Flaechen und
   Trennlinien werden dunkel. Die Sparten-Kennfarben Strom und Gas behalten
   ihren Farbton und werden nur in der Helligkeit nachgezogen.
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  html:not([data-thema="hell"]) .app-embed {

    /* Grundflaechen und Schrift */
    --clr-bg:         #0d1917;
    --clr-surface:    #122421;
    --clr-text:       #eaf3ef;   /* 15,3:1 auf --clr-surface – AAA */
    --clr-muted:      #a9c0ba;   /* 8,9:1  auf --clr-surface – AAA */
    --clr-muted-str:  #c9dcd6;   /* 12,2:1 auf --clr-surface – AAA */

    /* Farbige Flaechen tragen jetzt dunkle Schrift statt weisser */
    --clr-primary:    #3ddc97;   /* Status-Gruen aus "Netzleitstelle"        */
    --clr-primary-d:  #6ee8b3;
    --clr-on-primary: #06231a;   /* dunkle Schrift AUF farbigen Flaechen     */
    --clr-accent:     #ffb400;   /* Bernstein                                */
    --clr-accent-d:   #d99600;
    --clr-accent-ink: #241802;
    --clr-on-strom:   #241802;

    /* Sparten-Kennfarben: Farbton bleibt, Helligkeit nachgezogen */
    --clr-strom:      #f5a623;
    --clr-gas:        #6fb0e8;
    --clr-gas-flaeche: #6fb0e8;  /* dunkle Schrift darauf, siehe --clr-on-primary */

    /* Zustandsfarben */
    --clr-success:    #3ddc97;
    --clr-warn:       #ffb400;
    --clr-error:      #ff8078;
    --clr-warn-stark: #ffa64d;   /* Warntext ohne Flaeche, auf dunklem Grund */

    /* Rahmen in ihren drei Rollen */
    --clr-linie:      #22423c;
    --clr-border:     #7f9791;   /* 3,7:1 auf --clr-surface – WCAG 1.4.11    */
    --clr-kontur:     #4d7d72;   /* 3,3:1 auf --clr-surface – WCAG 1.4.11 */

    /* Eingabefelder */
    --clr-feld:             #0b1614;
    --clr-feld-rand:        #7f9791;
    --clr-feld-platzhalter: #9db4ae;

    /* Flaechen und Trennlinien */
    --clr-surface-alt:  #16302b;
    --clr-surface-alt2: #16302b;
    --clr-divider:      #22423c;
    --clr-divider-2:    #22423c;
    --clr-selected-bg:  #12333f;
    --clr-hero-von:     #16302b;
    --clr-verlauf-hero: #0d1917;
    --clr-hero-ink:     #eaf3ef;
    --clr-hero-titel:   #3ddc97;   /* 7,97:1 auf dem Kopfbereich – AAA */
    --clr-verlauf-cta:  #12333f;
    --clr-verlauf-karte: #142825;

    /* Gesperrte Bedienelemente */
    --clr-disabled-bg:   #16302b;
    --clr-disabled-rand: #3a5650;
    --clr-disabled-ink:  #93a8a2;

    /* Marke im Kopfbereich */
    --clr-chip-bg:    #16302b;

    /* Statusflaechen */
    --clr-info-bg:      #12283d;
    --clr-info-ink:     #b9d5f5;
    --clr-warn-bg:      #2e2408;
    --clr-warn-ink:     #ffdd8a;
    --clr-success-bg:   #0e2b20;
    --clr-success-ink:  #8ceec1;
    --clr-error-bg:     #33150f;
    --clr-error-ink:    #ffb3ac;
    --clr-error-feld-bg: #2a1310;

    /* Freiwillige Angaben (Schritt 3) */
    --clr-opt-gruen-rand: #2f6b4d;
    --clr-opt-gruen-ink:  #8ceec1;
    --clr-opt-gelb-rand:  #6b5410;
    --clr-opt-gelb-ink:   #ffdd8a;

    /* Tarifauszeichnung und Kennzeichen */
    --clr-tarif-bg:        #33240f;
    --clr-tarif-ink:       #ffc978;
    --clr-tarif-rand:      #6b4f18;
    --clr-badge-strom-bg:  #33280a;
    --clr-badge-strom-ink: #ffd98a;
    --clr-badge-gas-bg:    #12283d;
    --clr-badge-gas-ink:   #b9d5f5;
    --clr-badge-ok-bg:     #0e2b20;
    --clr-badge-ok-ink:    #8ceec1;
    --clr-badge-warn-bg:   #2e2408;
    --clr-badge-warn-ink:  #ffdd8a;

    /* Schatten auf dunklem Grund kraeftiger, sonst unsichtbar */
    --shadow:    0 2px 10px rgba(0,0,0,.45);
    --shadow-lg: 0 8px 26px rgba(0,0,0,.6);
  }
}
html[data-thema="dunkel"] .app-embed {

  /* Grundflaechen und Schrift */
  --clr-bg:         #0d1917;
  --clr-surface:    #122421;
  --clr-text:       #eaf3ef;   /* 15,3:1 auf --clr-surface – AAA */
  --clr-muted:      #a9c0ba;   /* 8,9:1  auf --clr-surface – AAA */
  --clr-muted-str:  #c9dcd6;   /* 12,2:1 auf --clr-surface – AAA */

  /* Farbige Flaechen tragen jetzt dunkle Schrift statt weisser */
  --clr-primary:    #3ddc97;   /* Status-Gruen aus "Netzleitstelle"        */
  --clr-primary-d:  #6ee8b3;
  --clr-on-primary: #06231a;   /* dunkle Schrift AUF farbigen Flaechen     */
  --clr-accent:     #ffb400;   /* Bernstein                                */
  --clr-accent-d:   #d99600;
  --clr-accent-ink: #241802;
  --clr-on-strom:   #241802;

  /* Sparten-Kennfarben: Farbton bleibt, Helligkeit nachgezogen */
  --clr-strom:      #f5a623;
  --clr-gas:        #6fb0e8;
  --clr-gas-flaeche: #6fb0e8;  /* dunkle Schrift darauf, siehe --clr-on-primary */

  /* Zustandsfarben */
  --clr-success:    #3ddc97;
  --clr-warn:       #ffb400;
  --clr-error:      #ff8078;
  --clr-warn-stark: #ffa64d;   /* Warntext ohne Flaeche, auf dunklem Grund */

  /* Rahmen in ihren drei Rollen */
  --clr-linie:      #22423c;
  --clr-border:     #7f9791;   /* 3,7:1 auf --clr-surface – WCAG 1.4.11    */
  --clr-kontur:     #4d7d72;   /* 3,3:1 auf --clr-surface – WCAG 1.4.11 */

  /* Eingabefelder */
  --clr-feld:             #0b1614;
  --clr-feld-rand:        #7f9791;
  --clr-feld-platzhalter: #9db4ae;

  /* Flaechen und Trennlinien */
  --clr-surface-alt:  #16302b;
  --clr-surface-alt2: #16302b;
  --clr-divider:      #22423c;
  --clr-divider-2:    #22423c;
  --clr-selected-bg:  #12333f;
  --clr-hero-von:     #16302b;
  --clr-verlauf-hero: #0d1917;
  --clr-hero-ink:     #eaf3ef;
  --clr-hero-titel:   #3ddc97;   /* 7,97:1 auf dem Kopfbereich – AAA */
  --clr-verlauf-cta:  #12333f;
  --clr-verlauf-karte: #142825;

  /* Gesperrte Bedienelemente */
  --clr-disabled-bg:   #16302b;
  --clr-disabled-rand: #3a5650;
  --clr-disabled-ink:  #93a8a2;

  /* Marke im Kopfbereich */
  --clr-chip-bg:    #16302b;

  /* Statusflaechen */
  --clr-info-bg:      #12283d;
  --clr-info-ink:     #b9d5f5;
  --clr-warn-bg:      #2e2408;
  --clr-warn-ink:     #ffdd8a;
  --clr-success-bg:   #0e2b20;
  --clr-success-ink:  #8ceec1;
  --clr-error-bg:     #33150f;
  --clr-error-ink:    #ffb3ac;
  --clr-error-feld-bg: #2a1310;

  /* Freiwillige Angaben (Schritt 3) */
  --clr-opt-gruen-rand: #2f6b4d;
  --clr-opt-gruen-ink:  #8ceec1;
  --clr-opt-gelb-rand:  #6b5410;
  --clr-opt-gelb-ink:   #ffdd8a;

  /* Tarifauszeichnung und Kennzeichen */
  --clr-tarif-bg:        #33240f;
  --clr-tarif-ink:       #ffc978;
  --clr-tarif-rand:      #6b4f18;
  --clr-badge-strom-bg:  #33280a;
  --clr-badge-strom-ink: #ffd98a;
  --clr-badge-gas-bg:    #12283d;
  --clr-badge-gas-ink:   #b9d5f5;
  --clr-badge-ok-bg:     #0e2b20;
  --clr-badge-ok-ink:    #8ceec1;
  --clr-badge-warn-bg:   #2e2408;
  --clr-badge-warn-ink:  #ffdd8a;

  /* Schatten auf dunklem Grund kraeftiger, sonst unsichtbar */
  --shadow:    0 2px 10px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 26px rgba(0,0,0,.6);
}


/* Druckansicht der Vertragsdaten. Wird von druckeVertrag() befuellt und liegt
   am Bildschirm ausgeblendet; erst beim Drucken ersetzt sie die Seite. */
.app-embed #vertrag-print { display: none; }

@media print {
  .app-embed .site-header, .app-embed .site-footer, .app-embed .steps-bar, .app-embed .btn, .app-embed .toast-container { display: none !important; }
  .app-embed { background: #fff; }
  .app-embed .card { box-shadow: none; border: 1px solid #ccc; }

  /* Alles ausser der Druckansicht verbergen */
  .app-embed > *:not(#vertrag-print) { display: none !important; }

  .app-embed #vertrag-print {
    display: block !important;
    position: static;
    margin: 0; padding: 0;
    font-family: Helvetica, Arial, sans-serif;
    color: #000; font-size: 10pt;
  }
  .app-embed #vertrag-print .vp-kopf { border-bottom: 2px solid #003366; padding-bottom: 6pt; margin-bottom: 12pt; }
  .app-embed #vertrag-print .vp-kopf h1 { font-size: 15pt; color: #003366; margin: 0 0 3pt; }
  .app-embed #vertrag-print .vp-kopf p { font-size: 9pt; color: #444; margin: 0; }
  .app-embed #vertrag-print .vp-h {
    font-size: 11pt; color: #003366; margin: 12pt 0 4pt;
    border-bottom: 1px solid #ccc; padding-bottom: 2pt;
  }
  .app-embed #vertrag-print .vp-t { width: 100%; border-collapse: collapse; margin-bottom: 8pt; }
  .app-embed #vertrag-print .vp-t td { border: 1px solid #ccc; padding: 3pt 5pt; vertical-align: top; }
  .app-embed #vertrag-print .vp-l { width: 42%; color: #333; }
  .app-embed #vertrag-print .vp-v { font-weight: 600; }
  .app-embed #vertrag-print .vp-fuss { font-size: 8pt; color: #555; margin-top: 14pt; }

  /* Gliederung wie im PDF: Ziffernüberschriften, Unterabschnitte, Ankreuzfelder */
  .app-embed #vertrag-print .vp-h3 {
    font-size: 9.5pt; color: #003366; margin: 9pt 0 3pt;
    font-weight: 700;
  }
  .app-embed #vertrag-print .vp-hinweis {
    font-size: 8.5pt; color: #333; margin: 4pt 0 8pt;
    background: #f4f6f9; padding: 4pt 6pt; border-left: 2pt solid #003366;
  }
  .app-embed #vertrag-print .vp-klein { font-size: 7.5pt; color: #666; }
  .app-embed #vertrag-print .vp-check { font-size: 9pt; margin: 3pt 0; }
  .app-embed #vertrag-print .vp-box {
    display: inline-block; width: 9pt; height: 9pt; line-height: 9pt;
    border: 1px solid #333; text-align: center; margin-right: 4pt;
    font-weight: 700;
  }
  .app-embed #vertrag-print .vp-gesamt th {
    background: #e3f2fd; border: 1px solid #ccc; padding: 3pt 5pt;
    font-size: 9pt; text-align: left;
  }
  .app-embed #vertrag-print .vp-gesamt td { font-size: 9pt; }
  .app-embed #vertrag-print .vp-summe td { font-weight: 700; background: #f4f6f9; }
  .app-embed #vertrag-print h2.vp-h + table { margin-top: 3pt; }
  .app-embed #vertrag-print table { page-break-inside: auto; }
  .app-embed #vertrag-print tr { page-break-inside: avoid; }

  @page { margin: 15mm; }
}

/* --- Tariftyp 2x2 Kacheln --- */
.app-embed .tarif-typ-kachel {
  border: 2px solid var(--clr-border);
  border-radius: var(--radius);
  background: var(--clr-surface);
  transition: all .2s;
  user-select: none;
}
.app-embed .tarif-typ-kachel:hover {
  border-color: var(--clr-primary);
  box-shadow: 0 2px 10px rgba(0,51,102,.10);
  transform: translateY(-1px);
}
.app-embed .tarif-typ-kachel.selected {
  border-color: var(--clr-primary);
  background: var(--clr-selected-bg);
  box-shadow: 0 0 0 3px rgba(0,51,102,.12);
}
.app-embed .tarif-typ-kachel input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
@media (max-width: 400px) {
  .app-embed .tarif-typ-kachel span:last-child { display: none; }
}

/* ============================================================
   BARRIEREFREIHEIT – Fokus, Fehler, Screenreader
   ============================================================ */

/* Stärkerer Fokusring für Buttons und Links */
.app-embed button:focus-visible, .app-embed a:focus-visible, .app-embed [role="button"]:focus-visible {
  outline: 3px solid var(--clr-primary);
  outline-offset: 3px;
}

/* Eingabefelder im Fehler-Zustand */
.app-embed input[aria-invalid="true"], .app-embed select[aria-invalid="true"], .app-embed textarea[aria-invalid="true"] {
  border-color: var(--clr-error) !important;
  background: var(--clr-error-feld-bg);
}
.app-embed input[aria-invalid="true"]:focus, .app-embed select[aria-invalid="true"]:focus {
  outline-color: var(--clr-error);
  box-shadow: 0 0 0 3px rgba(211,47,47,.15);
}

/* Fehlertext sichtbar */
.app-embed .field-error {
  color: var(--clr-error);
  font-size: .8rem;
  margin-top: .25rem;
  display: none;
}
.app-embed .field-error.visible {
  display: block;
}

/* Fehlende Pflicht-Einwilligung deutlich hervorheben. Bei einer Checkbox
   genügt ein roter Rahmen am Eingabefeld nicht – markiert wird der ganze
   Block, damit beim Zurückspringen sofort erkennbar ist, was fehlt. */
.app-embed .einwilligung-fehlt {
  border: 2px solid var(--clr-error);
  border-radius: var(--radius);
  background: var(--clr-error-bg);
  padding: .7rem .9rem;
  margin: -.2rem 0;
  animation: einwilligung-puls 1.2s ease-out 2;
}
.app-embed .einwilligung-fehlt input[type="checkbox"] {
  outline: 2px solid var(--clr-error);
  outline-offset: 2px;
}
@keyframes einwilligung-puls {
  0% { box-shadow: 0 0 0 0 rgba(211,47,47,.45); }
  70% { box-shadow: 0 0 0 .55rem rgba(211,47,47,0); }
  100% { box-shadow: 0 0 0 0 rgba(211,47,47,0); }
}
@media (prefers-reduced-motion: reduce) {
  .app-embed .einwilligung-fehlt { animation: none; }
}

/* Checkbox/Radio Fokus */
.app-embed input[type="checkbox"]:focus-visible, .app-embed input[type="radio"]:focus-visible {
  outline: 3px solid var(--clr-primary);
  outline-offset: 2px;
}

/* Toggle-Switch Fokus */
.app-embed .toggle-switch input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--clr-primary);
  outline-offset: 3px;
  border-radius: 11px;
}

/* Required-Marker Farbe */
.app-embed .req {
  color: var(--clr-error);
  margin-left: 1px;
}

/* Tariftyp-Kachel Fokus */
.app-embed .tarif-typ-kachel:focus-within {
  outline: 3px solid var(--clr-primary);
  outline-offset: 2px;
}

/* Abschlussart-Kachel Fokus */
.app-embed .abschlussart-card:focus-within {
  outline: 3px solid var(--clr-primary);
  outline-offset: 2px;
}

/* SEPA-Toggle aria-expanded Indikator */
.app-embed #sepa-toggle[aria-expanded="true"] + label::after {
  content: ' ▲';
}
.app-embed #sepa-toggle[aria-expanded="false"] + label::after {
  content: ' ▼';
}

/* Hint-Box als role=status */
.app-embed .plz-nb-info[aria-live] {
  min-height: 1.4em;
}

/* Fortschrittsanzeige Steps */
.app-embed .step[aria-current="step"] .step-num {
  background: var(--clr-primary);
  color: var(--clr-on-primary);
}

/* Lesbarkeit: Kontrast-Mindestgröße Labels */
.app-embed label.lbl, .app-embed .form-group > label, .app-embed .form-group > fieldset > legend {
  font-size: .875rem;
  font-weight: 600;
  color: var(--clr-text);
}

/* Vertragsbereich-Nummerierung */
.app-embed .card-nr {
  display: inline-block;
  background: var(--clr-primary);
  color: var(--clr-on-primary);
  font-size: .75rem;
  font-weight: 700;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  margin-right: .4rem;
  flex-shrink: 0;
}

/* ── Gewichteter Abschlagsvorschlag (Inline-Hinweis) ────────────────────────
   Erscheint in Schritt 5 direkt unter "Gewünschter Lieferbeginn", wenn ein
   konkretes Datum eingetragen ist und sich für Erdgas, Wärmepumpe (separate
   Messung) oder Nachtspeicher ein spürbar abweichender Abschlag für den
   Zeitraum bis 31.12. ergibt - siehe pruefeAbschlagVorschlagPeriode() in
   app.js. Bewusst kein Popup: die Eingabe des Lieferdatums soll dadurch
   nicht unterbrochen werden. */
.app-embed .av-inline {
  margin-top: .6rem;
  padding: .8rem .9rem;
  background: var(--clr-selected-bg);
  border: 1px solid var(--clr-primary);
  border-radius: var(--radius, 8px);
}
.app-embed .av-inline__text {
  margin: 0 0 .6rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--clr-text);
}
.app-embed .av-inline__text strong { color: var(--clr-primary); }
.app-embed .av-inline__text a {
  display: inline-block;
  margin-left: .3rem;
  font-size: .82rem;
  white-space: nowrap;
}
.app-embed .av-inline__btns {
  display: flex; gap: .6rem; flex-wrap: wrap;
}
.app-embed .av-inline__btns .btn { flex: 0 0 auto; }

@media (max-width: 480px) {
  .app-embed .av-inline__btns { flex-direction: column; }
  .app-embed .av-inline__btns .btn { width: 100%; }
}