/* Energie-Cockpit · Prototyp-Stylesheet
   Leitidee „Schaltbild“: ruhige Planfläche, Haarlinien, kräftige Abschnittslinien statt Karten,
   Messwerte in Festbreitenziffern, Farbe nur für Energiearten und Preisstufen. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-m);
  line-height: var(--leading);
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-3); }
h1 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h2 { font-size: var(--text-l); }
h3 { font-size: var(--text-m); }
p { margin: 0 0 var(--space-3); }
a { color: var(--brand); text-underline-offset: 0.15em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#view-title:focus, #dlg-titel:focus, #neu-h:focus, main:focus { outline: none; }
#view-title:focus-visible { outline: 3px solid var(--focus); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--space-3); top: -10rem; z-index: 50; background: var(--surface); color: var(--ink); padding: var(--space-3) var(--space-4); border: 2px solid var(--focus); }
.skip:focus { top: var(--space-3); }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hint { display: block; color: var(--ink-2); font-size: var(--text-s); }
.glyph { width: 1.25em; height: 1.25em; vertical-align: -0.25em; flex: none; }
h2 .glyph { color: var(--ink-2); margin-right: var(--space-1); }

/* Demo-Hinweis: bleibt auf jeder Seite sichtbar */
.demo-band { margin: 0; padding: var(--space-2) var(--space-4); background: var(--demo-bg); color: var(--ink); font-size: var(--text-s); border-bottom: var(--line) solid var(--rule); }
.demo-band strong { color: var(--demo); }

/* ---------- Rahmen: mobil oben Marke, unten Navigation ---------- */
.rahmen { min-height: 100vh; }
.kopfleiste { padding: var(--space-3) var(--space-4); border-bottom: var(--line) solid var(--rule); background: var(--paper); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; min-height: var(--target); }
.mark { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); background: var(--brand); color: var(--brand-ink); flex: none; }
.mark-glyph { width: 1.5rem; height: 1.5rem; }
.mark--sw { font-weight: 800; font-size: var(--text-s); letter-spacing: 0.04em; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; }
.brand-sub { font-size: var(--text-xs); color: var(--ink-2); }

main { padding: var(--space-5) var(--space-4) calc(var(--space-7) + 5rem); max-width: var(--content-max); }

.navi { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: var(--line-strong) solid var(--ink); padding-bottom: env(safe-area-inset-bottom); }
.navi ul { list-style: none; margin: 0; padding: 0; display: flex; }
.navi li { flex: 1 1 0; min-width: 0; }
.navi .nav-sek { display: none; }
.navi a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 3.5rem; padding: var(--space-1) var(--space-1); color: var(--ink-2); text-decoration: none; font-size: var(--text-xs); text-align: center; line-height: 1.15; border-top: 3px solid transparent; }
.navi a .glyph { width: 1.5rem; height: 1.5rem; }
.navi a[aria-current="page"], .navi a[data-teilaktiv="true"] { color: var(--brand); border-top-color: var(--brand); font-weight: 700; }

@media (min-width: 64rem) {
  .rahmen { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .kopfleiste { grid-column: 1; grid-row: 1; border-bottom: 0; padding: var(--space-5) var(--space-4) var(--space-4); }
  .navi { position: sticky; top: 0; align-self: start; grid-column: 1; grid-row: 2; background: transparent; border-top: 0; padding: 0 var(--space-3); }
  .navi ul { flex-direction: column; gap: 2px; }
  .navi .nav-sek { display: block; }
  .navi .nav-mehr { display: none; }
  .navi a { flex-direction: row; justify-content: flex-start; gap: var(--space-3); min-height: var(--target); padding: var(--space-2) var(--space-3); font-size: var(--text-m); text-align: left; border-top: 0; border-left: 3px solid transparent; color: var(--ink); }
  .navi a .glyph { width: 1.25rem; height: 1.25rem; color: var(--ink-2); }
  .navi a[aria-current="page"] { border-left-color: var(--brand); background: var(--brand-soft); color: var(--ink); }
  .navi a[aria-current="page"] .glyph { color: var(--brand); }
  .navi a:hover { background: var(--brand-soft); }
  main { grid-column: 2; grid-row: 1 / 3; padding: var(--space-6) var(--space-6) var(--space-7); border-left: var(--line) solid var(--rule); min-height: 100vh; }
}

/* ---------- Ansichtskopf und Abschnitte ---------- */
.view-head { margin-bottom: var(--space-4); }
.kicker { margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.lead { font-size: var(--text-l); max-width: 44rem; }
.block { border-top: var(--line-strong) solid var(--ink); padding-top: var(--space-4); margin: 0 0 var(--space-6); min-width: 0; }
.block > h2, figcaption h2 { font-size: var(--text-s); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.hinweis-block { border-top-color: var(--brand); background: var(--brand-soft); padding: var(--space-4); }
figure { margin: 0; }
figcaption { margin-bottom: var(--space-3); }
figcaption h2 { margin-bottom: var(--space-1); }

.uebersicht-raster { display: grid; gap: 0 var(--space-6); }
@media (min-width: 72rem) {
  .uebersicht-raster { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .uebersicht-raster > :nth-child(n+3) { grid-column: 1 / -1; }
}

/* ---------- Schaltbild ---------- */
.schaltbild { display: block; width: 100%; height: auto; margin-bottom: var(--space-4); }
.schaltbild--quer { display: none; }
@media (min-width: 40rem) { .schaltbild--quer { display: block; } .schaltbild--hoch { display: none; } }
.schaltbild .bus { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.schaltbild .bus-label { fill: var(--ink-2); font: 600 12px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.schaltbild .ast { fill: none; stroke-linecap: butt; }
.schaltbild .ast--aus { stroke: var(--rule-strong); stroke-dasharray: 4 4; }
.ast--grid { stroke: var(--grid); } .pfeil--grid { fill: var(--grid); }
.ast--sun { stroke: var(--sun); } .pfeil--sun { fill: var(--sun); }
.ast--house { stroke: var(--house); } .pfeil--house { fill: var(--house); }
.ast--store { stroke: var(--store); } .pfeil--store { fill: var(--store); }
.ast--heat { stroke: var(--heat); } .pfeil--heat { fill: var(--heat); }
.ast--car { stroke: var(--car); } .pfeil--car { fill: var(--car); }
.pfeil { stroke: var(--paper); stroke-width: 1.5; }
html[data-motion="an"] .schaltbild .ast--fluss { stroke-dasharray: 14 6; animation: fluss var(--flow-speed) linear infinite; }
@keyframes fluss { to { stroke-dashoffset: -40; } }
.knoten rect { fill: var(--surface); stroke: var(--rule-strong); stroke-width: 1; }
.knoten-glyph { fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.knoten--grid .knoten-glyph { stroke: var(--grid); }
.knoten--sun .knoten-glyph { stroke: var(--sun); }
.knoten--house .knoten-glyph { stroke: var(--house); }
.knoten--store .knoten-glyph { stroke: var(--store); }
.knoten--heat .knoten-glyph { stroke: var(--heat); }
.knoten--car .knoten-glyph { stroke: var(--car); }
.k-name { fill: var(--ink-2); font: 600 13px var(--font-sans); }
.k-wert { fill: var(--ink); font: 700 21px var(--font-mono); }
.k-text { fill: var(--ink-2); font: 400 12.5px var(--font-sans); }
.schaltbild--hoch .k-name { font-size: 12px; }

.messwerte { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0 var(--space-4); margin: 0; border-top: var(--line) solid var(--rule); }
.mw { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: var(--line) solid var(--rule); flex-wrap: wrap; }
.mw dt { display: flex; align-items: center; gap: var(--space-2); }
.mw dd { margin: 0; text-align: right; }
.mw-text { color: var(--ink-2); font-size: var(--text-s); }
.mw--sun .glyph { color: var(--sun); } .mw--grid .glyph { color: var(--grid); } .mw--store .glyph { color: var(--store); }
.mw--heat .glyph { color: var(--heat); } .mw--car .glyph { color: var(--car); } .mw--house .glyph { color: var(--house); }

/* ---------- Preis ---------- */
.preis-jetzt { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.preis-wert { font-size: var(--text-xxl); font-weight: 700; line-height: 1; }
.preis-einheit { color: var(--ink-2); }
.preisstreifen { display: block; width: 100%; height: auto; margin: var(--space-3) 0 var(--space-2); }
.pb--low { fill: var(--price-low); } .pb--mid { fill: var(--price-mid); }
.pb-high-bg { fill: var(--price-high); } .pb-high-line { stroke: color-mix(in srgb, var(--price-high) 55%, var(--ink)); stroke-width: 2.5; }
.tick { fill: var(--ink-2); font: 11px var(--font-mono); }
.legende { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-s); color: var(--ink-2); }
.legende li { display: inline-flex; align-items: center; gap: var(--space-2); }
.sw { display: inline-block; width: 1rem; height: 1rem; border: 1px solid var(--rule-strong); }
.sw--low { background: var(--price-low); } .sw--mid { background: var(--price-mid); }
.sw--high { background: repeating-linear-gradient(45deg, var(--price-high) 0 3px, color-mix(in srgb, var(--price-high) 55%, var(--ink)) 3px 5px); }
.sw--auto-sonne { background: var(--sun-fill); } .sw--auto-netz { background: var(--brand); }
.sw--wp { background: var(--heat); height: 0.45rem; }
.sw--ende { border: 0; border-left: 3px dashed var(--ink); width: 0.5rem; }

.badge { display: inline-block; padding: 0 var(--space-2); border: 1.5px solid currentColor; border-radius: var(--radius); font-size: var(--text-xs); font-weight: 700; line-height: 1.6; vertical-align: middle; }
.badge--low { color: var(--price-low); } .badge--mid { color: var(--price-mid); } .badge--high { color: var(--price-high); }
.badge--ok { color: var(--ok); } .badge--warn { color: var(--warn); }

.zeitliste { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.zeitliste li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--line) solid var(--rule); }
.zeit { font-weight: 700; }
@media (max-width: 30rem) { .zeitliste li { grid-template-columns: 1fr; gap: 0; } }
.link-pfeil { font-weight: 600; display: inline-flex; align-items: center; min-height: var(--target); }
.link-pfeil::after { content: " →"; white-space: pre; }
.tech { margin: 0 0 var(--space-3); }
.tech > div { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--line) solid var(--rule); }
.tech dt { color: var(--ink-2); }
.tech dd { margin: 0; }
@media (max-width: 36rem) { .tech > div { grid-template-columns: 1fr; gap: 0; } }

/* ---------- Bedienelemente ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--target); min-width: var(--target); padding: var(--space-2) var(--space-5); border: 2px solid var(--brand); border-radius: var(--radius); background: var(--brand); color: var(--brand-ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.knopf--zweit { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.knopf--zweit:hover { border-color: var(--ink); }
.knopf--gefahr { background: var(--alert); border-color: var(--alert); color: var(--on-alert); }
.knopf--klein { padding: var(--space-1) var(--space-3); font-size: var(--text-s); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; }

.automatik-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); background: var(--surface); border: var(--line) solid var(--rule-strong); }
.automatik-leiste p { margin: 0; }
.status { padding-left: var(--space-3); border-left: 4px solid var(--rule-strong); }
.status--ok { border-left-color: var(--ok); } .status--ok strong { color: var(--ok); }
.status--warn { border-left-color: var(--warn); } .status--warn strong { color: var(--warn); }
.status--alert { border-left-color: var(--alert); color: var(--ink); } .status--alert::before { content: "Fehler: "; font-weight: 700; color: var(--alert); }

fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: var(--space-2); }
.wahl { display: grid; gap: var(--space-2); }
.wahl--zeile { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.wahl--zeile legend, .wahl--zeile .hint { grid-column: 1 / -1; }
.wahl-option { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--target); padding: var(--space-3); background: var(--surface); border: 1.5px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer; }
.wahl-option--kurz { align-items: center; padding: var(--space-2) var(--space-3); }
.wahl-option input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--brand); flex: none; }
.wahl-option:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft); }
.wahl-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.felder-reihe { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-3); }
.feld { margin-bottom: var(--space-4); }
.feld-label { display: block; font-weight: 700; margin-bottom: var(--space-2); }
.feld--schmal { max-width: 24rem; }
.eingabe-einheit { display: flex; align-items: center; gap: var(--space-2); }
input[type="number"], select { font: inherit; color: var(--ink); background: var(--surface); border: 1.5px solid var(--rule-strong); border-radius: var(--radius); min-height: var(--target); padding: var(--space-2) var(--space-3); }
input[type="number"] { width: 9rem; font-family: var(--font-mono); }
select { min-width: 9rem; }

.stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); }
.stepper-btn { min-width: var(--target); min-height: var(--target); border: 0; background: transparent; color: var(--ink); font: 700 var(--text-l) var(--font-sans); cursor: pointer; }
.stepper-btn:hover { background: var(--brand-soft); }
.stepper-wert { display: grid; place-items: center; min-width: 6ch; padding: 0 var(--space-2); font-weight: 700; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }

.schalter-zeile { margin-bottom: var(--space-4); }
.schalter { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--target); padding: var(--space-1) 0; background: none; border: 0; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.schalter-spur { position: relative; flex: none; width: 3.25rem; height: 1.75rem; border-radius: 1rem; border: 2px solid var(--rule-strong); background: var(--surface); }
.schalter-knopf { position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--rule-strong); transition: transform 0.15s; }
.schalter[aria-checked="true"] .schalter-spur { background: var(--brand); border-color: var(--brand); }
.schalter[aria-checked="true"] .schalter-knopf { transform: translateX(1.5rem); background: var(--brand-ink); }
.schalter-zeile .hint { margin-left: calc(3.25rem + var(--space-3)); }
@media (max-width: 30rem) { .schalter-zeile .hint { margin-left: 0; } }

.check { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--target); padding: var(--space-2) 0; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--brand); flex: none; }
.checkliste { list-style: none; padding: 0; margin: 0; }
.checkliste li { border-bottom: var(--line) solid var(--rule); padding-bottom: var(--space-2); }
.checkliste .hint { margin-left: calc(1.25rem + var(--space-3)); }

.ergebnis { padding: var(--space-3) var(--space-4); background: var(--surface); border-left: 4px solid var(--brand); }
.ergebnis p:last-child { margin-bottom: 0; }

/* ---------- Fahrplan ---------- */
.fp-rahmen { overflow-x: auto; margin: var(--space-3) 0; border: var(--line) solid var(--rule-strong); background: var(--surface); }
.fp { display: grid; grid-template-columns: 8.5rem repeat(24, minmax(2.45rem, 1fr)); min-width: max-content; }
.fp--pausiert { opacity: 0.45; }
.fp-label { position: sticky; left: 0; z-index: 1; display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: var(--surface); border-right: var(--line-strong) solid var(--ink); border-bottom: var(--line) solid var(--rule); font-size: var(--text-xs); font-weight: 700; }
.fp-zelle { contain: paint; display: grid; place-items: center; min-height: 2.5rem; border-bottom: var(--line) solid var(--rule); border-right: var(--line) solid var(--rule); font-size: var(--text-xs); }
.fp-zeit { color: var(--ink-2); }
.fp-preis--low { background: var(--price-low); color: var(--on-price); }
.fp-preis--mid { background: var(--price-mid); color: var(--on-price); }
.fp-preis--high { background: repeating-linear-gradient(45deg, var(--price-high) 0 6px, color-mix(in srgb, var(--price-high) 80%, var(--ink)) 6px 9px); color: var(--on-price); font-weight: 700; }
.fp-auto--sonne { background: var(--sun-fill); color: var(--on-sun); font-weight: 700; }
.fp-auto--netz { background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.fp-wp--an { background: linear-gradient(var(--heat), var(--heat)) center / 100% 0.6rem no-repeat; }
.fp-wp--aus { background: linear-gradient(var(--rule-strong), var(--rule-strong)) center / 100% 1px no-repeat; }
.fp-sp { font-size: var(--text-s); }
.fp-sp--sonne { color: var(--sun); } .fp-sp--netz { color: var(--brand); } .fp-sp--ent { color: var(--store); }
.fp-jetzt { box-shadow: inset 3px 0 0 var(--ink); }
.fp-ende { border-left: 3px dashed var(--ink); }

/* ---------- Tabellen ---------- */
/* contain: paint – sonst verbreitert eine breite Tabelle in Chromium trotz overflow die ganze Seite (Selbsttest 10.10.2026) */
.tabelle-rahmen { overflow-x: auto; max-width: 100%; contain: paint; margin-bottom: var(--space-3); }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--text-s); }
.tabelle caption { text-align: left; font-weight: 700; padding-bottom: var(--space-2); }
.tabelle th, .tabelle td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: var(--line) solid var(--rule); vertical-align: top; }
.tabelle thead th { border-bottom: var(--line-strong) solid var(--ink); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); white-space: nowrap; }
.tabelle td.num { text-align: right; white-space: nowrap; }
.tabelle th .hint { font-weight: 400; }
.zeile-aktuell { background: var(--brand-soft); }
.gut { color: var(--ok); font-weight: 700; }
.fn { margin-left: 1px; }
.tabelle-alternativ { margin: var(--space-2) 0 var(--space-3); }
.tabelle-alternativ summary, .methodik summary, .mehr-felder summary { cursor: pointer; font-weight: 600; color: var(--brand); min-height: var(--target); display: flex; align-items: center; }

/* ---------- Bericht ---------- */
.bericht-summe { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.bericht-summe .num { font-size: calc(var(--text-xxl) * 1.35); font-weight: 700; line-height: 1; }
.balken { list-style: none; padding: 0; margin: 0; }
.balken li { display: grid; grid-template-columns: minmax(10rem, 1.2fr) minmax(6rem, 2fr) 6.5rem; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: var(--line) solid var(--rule); }
.balken-spur { display: block; height: 0.9rem; background: var(--paper); border: 1px solid var(--rule); }
.balken-fuell { display: block; height: 100%; }
.balken--brand { background: var(--brand); } .balken--sun { background: var(--sun-fill); border-right: 2px solid var(--sun); } .balken--grid { background: var(--grid); }
.balken-wert { text-align: right; font-weight: 700; }
@media (max-width: 36rem) { .balken li { grid-template-columns: 1fr auto; } .balken-spur { grid-column: 1 / -1; grid-row: 2; } }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: 0; }
.kennzahlen div { border-left: 3px solid var(--rule-strong); padding-left: var(--space-3); }
.kennzahlen dt { color: var(--ink-2); font-size: var(--text-s); }
.kennzahlen dd { margin: 0; font-size: var(--text-l); font-weight: 700; }

/* ---------- §14a ---------- */
.rechner-raster { display: grid; gap: var(--space-5); }
@media (min-width: 56rem) { .rechner-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rechner-ergebnis { background: var(--surface); padding: var(--space-4); border: var(--line) solid var(--rule-strong); align-self: start; }
.rechner-fazit { font-size: var(--text-l); }
.optionen { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.optionen li { padding: var(--space-3) 0; border-bottom: var(--line) solid var(--rule); }
.optionen li.beste .opt-kopf strong::after { content: " · am meisten"; color: var(--brand); font-size: var(--text-s); }
.opt-kopf { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-1); }
.optionen .balken-spur { margin-bottom: var(--space-1); }
.mehr-felder { margin-bottom: var(--space-3); }

/* ---------- Schritte, Assistent, Dialog ---------- */
.schritte { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: 0; margin: 0 0 var(--space-4); font-size: var(--text-s); color: var(--ink-2); }
.schritte li { display: inline-flex; align-items: center; gap: var(--space-2); }
.schritte .num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1.5px solid var(--rule-strong); border-radius: 50%; }
.schritte li[aria-current="step"] { color: var(--ink); font-weight: 700; }
.schritte li[aria-current="step"] .num { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.schritte li.fertig .num { border-color: var(--ok); color: var(--ok); }
.assistent { margin-top: var(--space-4); padding: var(--space-4); background: var(--surface); border: var(--line) solid var(--rule-strong); }

dialog { width: min(36rem, calc(100vw - 2rem)); padding: var(--space-5); border: var(--line-strong) solid var(--ink); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
dialog::backdrop { background: rgb(10 14 20 / 0.55); }
.dlg-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-4); }

/* ---------- Einstieg, Mehr ---------- */
.einstieg-liste, .mehr-liste, .regel-liste { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.einstieg-liste li + li { margin-top: var(--space-3); }
.einstieg-wahl { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 4.5rem; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1.5px solid var(--rule-strong); border-left: 4px solid var(--brand); border-radius: var(--radius); color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.einstieg-wahl:hover { background: var(--brand-soft); }
.einstieg-wahl .glyph { width: 2rem; height: 2rem; color: var(--brand); }
.einstieg-wahl strong { display: block; }
.regel-liste li { padding: var(--space-2) 0; border-bottom: var(--line) solid var(--rule); }
.mehr-liste a { display: flex; align-items: center; gap: var(--space-3); min-height: 3.5rem; padding: var(--space-2) 0; border-bottom: var(--line) solid var(--rule); color: var(--ink); font-weight: 600; text-decoration: none; }
.mehr-liste .glyph { color: var(--brand); }

/* ---------- Bewegung und Sondermodi ---------- */
html[data-motion="aus"] *, html[data-motion="aus"] *::before, html[data-motion="aus"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (forced-colors: active) {
  .schalter[aria-checked="true"] .schalter-knopf { background: Highlight; }
  .schalter-knopf { background: CanvasText; }
  .fp-auto--netz, .fp-auto--sonne, .fp-preis--high { border: 2px solid CanvasText; }
  .balken-fuell { background: CanvasText !important; }
}