/* Energiesparrechner-Prototyp, Drei-Schritte-Vorschau (e6sl.75, KANDIDAT, nicht LIVE).
   Farben aus der Markenbasis ab 15.10.2026 (references/design-system/DESIGN.md): Anthrazit #4A4A49, Salbei #95A28F.
   Die beobachtete LIVE-Baseline (#1166AE, #090446) bleibt davon getrennt. Salbei trägt nur Flächen und Linien,
   nie Text (Kontrast auf Weiß unter 3:1). Helle Flächen und Linien sind abgeleitete Kandidatentöne.
   Schrift bewusst System-Sans: Forma hat keine geklärte Weblizenz, keine Fontinstallation. */
:root {
  --blue: #4a4a49;   /* Handlung, Link, Fokus: Anthrazit */
  --navy: #4a4a49;   /* Überschriften, dunkle Fläche: Anthrazit */
  --sage: #95a28f;   /* Akzentlinie und -fläche, kein Text */
  --text: #333;
  --muted: #5c605a;
  --pale: #f0f2ee;
  --line: #d9ddd6;
  --form-line: #b7beb3;
  --dis-text: #4b5663;
  --dis-surface: #e3e5e1;
  --warn-bg: #f9f1df;
  --warn-line: #8a5a08;
  --err: #a4161a;
  --sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Alias für bestehende Regeln */
  --accent: var(--blue);
  --panel: var(--pale);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
/* Fokus und scrollIntoView landen nie hinter dem Sticky-Fuß (WCAG 2.4.11). */
html { scroll-padding-bottom: 100px; }
body { font: 16px/1.6 var(--sans); color: var(--text); background: #fff; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 300; color: var(--navy); }
.wrap { width: min(100% - 32px, 1180px); margin: 0 auto; min-width: 0; overflow-wrap: anywhere; }
.prototyp { background: var(--warn-bg); color: var(--warn-line); font-size: .85rem; padding: 8px 0; }
.prototyp strong { color: var(--warn-line); }

/* Kopf und Schrittleiste */
.kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.marke { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; color: var(--blue); }
.release { color: var(--muted); font-size: .78rem; margin: 0; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 4px; }
.steps button { display: block; width: 100%; min-height: 44px; text-align: left; background: none; border: 0; border-top: 4px solid var(--line); padding: 10px 0 0; font: 500 .82rem/1.35 var(--sans); color: var(--muted); cursor: pointer; }
.steps button[aria-current="step"] { border-color: var(--sage); color: var(--navy); font-weight: 700; }
.steps button.done { border-color: var(--navy); color: var(--text); }

/* Arbeitsfläche: Schritt links, Bühne rechts */
.arbeit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; padding: 20px 0 32px; }
.arbeit.mit-buehne { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.08; max-width: 17ch; margin-bottom: 8px; }
.lead { color: var(--muted); max-width: 58ch; margin: 0 0 20px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.feld { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 4px 18px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.feld label { font-weight: 700; font-size: .95rem; }
.feld small { grid-column: 2; color: var(--muted); font-size: .8rem; }
input, select { font: inherit; min-height: 48px; padding: 10px 12px; border: 1px solid var(--form-line); border-radius: 10px; background: #fff; width: 100%; max-width: 360px; min-width: 0; }
[aria-invalid="true"] { border: 2px solid var(--err); }
input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; accent-color: var(--blue); }
.gruppe { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.gruppe h2, .gruppe h3 { font: 700 1rem/1.35 var(--sans); color: var(--navy); margin: 0 0 2px; }
.abschnitt { font: 700 1.1rem/1.35 var(--sans); color: var(--navy); margin: 24px 0 4px; padding-left: 10px; border-left: 4px solid var(--sage); }
.mehr .gruppe:first-of-type { border-top: 0; }
.foerderangaben { margin-top: 8px; }
.gruppe .feld { border-top: 0; padding: 6px 0; }
.mehr { border-top: 1px solid var(--line); padding: 10px 0; }
.gruppe .mehr { border-top: 0; padding: 0 0 6px; }
.mehr > summary { cursor: pointer; color: var(--blue); font-weight: 600; font-size: .92rem; min-height: 44px; display: flex; align-items: center; }
.mehr[open] > summary { margin-bottom: 4px; }

/* Bühne mit Fotohaus */
.buehne { position: sticky; top: 16px; background: var(--pale); border-radius: 12px; padding: 18px; margin: 0; }
.buehne .foto { position: relative; aspect-ratio: 3 / 2; }
.buehne .bild { position: absolute; inset: 0; }
.buehne img { position: absolute; display: block; }
.buehne img.basis { inset: 0; width: 100%; height: 100%; }
.buehne img.ebene { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.buehne img.ebene.an { opacity: 1; }
.pin { position: absolute; transform: translate(-14px, -50%); display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
.pin.links { transform: translate(calc(-100% + 14px), -50%); flex-direction: row-reverse; }
.pin .punkt { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); font: 700 14px/28px var(--sans); text-align: center; flex: none; }
.pin[aria-pressed="true"] .punkt { background: var(--navy); color: #fff; box-shadow: none; }
/* geplant, aber im Foto nicht dargestellt: hohler Punkt mit gestricheltem Ring */
.pin.nd .punkt { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); outline: 2px dashed var(--navy); outline-offset: 2px; }
.pin.vorhanden .punkt { color: var(--muted); box-shadow: inset 0 0 0 2px var(--muted); }
.pin .txt { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 14px rgba(9, 4, 70, .08); }
.pin:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 999px; }
.luecke { border: 1px dashed var(--form-line); border-radius: 10px; background: #fff; padding: 14px 16px; font-size: .9rem; }
.luecke p { margin: 6px 0 0; color: var(--muted); }
.luecke p:first-of-type { color: var(--text); }
.legende { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: .8rem; color: var(--muted); }
.nd-ring { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--navy); outline: 2px dashed var(--navy); outline-offset: 2px; flex: none; margin: 4px; }
@media (prefers-reduced-motion: reduce) { .buehne img.ebene { transition: none; } }

/* Fuß mit Live-Zahl */
.fuss { position: sticky; bottom: 0; z-index: 2; background: #fff; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.live { flex: 1; min-width: 0; font-size: .88rem; color: var(--muted); text-align: center; }
.live b { display: block; font-size: 1.4rem; font-weight: 300; color: var(--navy); font-variant-numeric: tabular-nums; }
.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px; border-radius: 999px; border: 2px solid var(--blue); background: var(--blue); color: #fff; font: 700 .95rem/1 var(--sans); white-space: nowrap; flex: none; cursor: pointer; }
.btn.stumm { background: transparent; color: var(--blue); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--dis-surface); border-color: var(--dis-surface); color: var(--dis-text); cursor: not-allowed; }

/* Ergebnis */
.kopfband { background: var(--navy); color: #fff; border-radius: 12px; border-bottom: 6px solid var(--sage); padding: 28px 24px 26px; margin-bottom: 8px; }
/* Heute gegen nachher (e6sl.75): zwei gleich gebaute Spalten, mobil gestapelt. */
.vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; }
.vergleich .seite { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.vergleich .seite + .seite { border-color: var(--sage); background: var(--pale); }
#ergebnis .vergleich h2 { font: 700 1rem/1.35 var(--sans); color: var(--navy); margin: 0 0 6px; }
.vergleich dl { margin: 0; }
.vergleich dt { color: var(--muted); font-size: .85rem; }
.vergleich dd { margin: 0 0 8px; font-size: 1.35rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.kopfband .meta { color: rgba(255, 255, 255, .78); font-size: .85rem; margin: 0; }
#ergebnis .kopfband h1 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.06; margin: 6px 0 8px; }
.kopfband p { color: rgba(255, 255, 255, .88); margin: 0; }
.kernzahlen { display: grid; border-top: 1px solid var(--line); margin-top: 12px; }
.kernzahlen div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.kernzahlen b { display: block; font-size: 1.8rem; font-weight: 300; color: var(--navy); font-variant-numeric: tabular-nums; }
.kernzahlen span { font-size: .88rem; color: var(--muted); }
.summe { margin: 16px 0 4px; }
.pill { display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 1px 9px; color: var(--warn-line); background: var(--warn-bg); }
#ergebnis h1 { font-size: 1.6rem; }
#ergebnis-mehr h2 { font: 700 1.05rem/1.35 var(--sans); color: var(--navy); margin: 18px 0 6px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kachel { border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.kachel .wert { font-size: 1.25rem; font-weight: 600; color: var(--navy); }
.kachel .label { color: var(--muted); font-size: .85rem; }
.tabelle-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
/* Zellen brechen nur an Wortgrenzen; .wrap erlaubt sonst Umbruch mitten im Wort bis auf Einzelbuchstaben. */
th, td { overflow-wrap: normal; }
/* Vier Spalten mit langen Namen und Hinweisen: mobil lieber horizontal scrollen als Wörter zerbrechen. */
table.massnahmen { min-width: 640px; }
table.massnahmen td:first-child { min-width: 12em; }
td.zahl, th.zahl { white-space: nowrap; }
.hinweise { color: var(--muted); font-size: .88rem; }
.fehler { color: var(--err); }
.leerzustand { border: 1px dashed var(--form-line); border-radius: 10px; padding: 12px 16px; background: var(--pale); }
.disclaimer { border-left: 4px solid var(--warn-line); background: var(--warn-bg); padding: 10px 12px; font-size: .88rem; }
.annahmen { margin-top: 20px; }
/* Anschluss nach der Erstabschätzung (mji7): PDF frei, E-Mail und Kontakt getrennt und als Vorschau markiert */
.angebot { margin-top: 24px; }
.angebot[open] > .karte + .karte { margin-top: 16px; }
.karte { border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.karte h2 { font: 700 1.1rem/1.35 var(--sans); color: var(--navy); margin: 0 0 6px; }
.karte ul { margin: 8px 0 16px; padding-left: 1.2em; }
.karte li { margin: 4px 0; }
.karte .klein { color: var(--muted); font-size: .85rem; margin: 6px 0 0; }
.vorschau { border-left: 4px solid var(--warn-line); background: var(--warn-bg); padding: 8px 12px; font-size: .88rem; }
#freischalt-status:empty, #kontakt-status:empty { display: none; }
#freischalt-status, #kontakt-status { font-size: .9rem; }
.schieber { display: inline-flex; gap: 4px; margin-top: 14px; padding: 4px; border: 1px solid var(--form-line); border-radius: 999px; background: #fff; }
.schieber button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font: 600 .9rem var(--sans); color: var(--blue); cursor: pointer; }
.schieber button[aria-pressed="true"] { background: var(--blue); color: #fff; }

@media (max-width: 860px) {
  .arbeit, .arbeit.mit-buehne { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .buehne { position: static; padding: 12px; }
  /* Im Ergebnis steht die Bühne im Formular hinter den Kernzahlen (main.ts, platziereBuehne). */
  .schritt > .buehne { margin-top: 16px; }
  .buehne .foto { max-width: 420px; margin: 0 auto; }
  .pin .punkt { width: 26px; height: 26px; line-height: 26px; font-size: 12px; }
  .pin .txt { font-size: .72rem; padding: 2px 8px; }
}
@media (max-width: 640px) {
  /* mobil: drei Balken, alle mit Namen */
  .steps { gap: 4px; }
  .steps button { font-size: .78rem; }
  .vergleich { grid-template-columns: minmax(0, 1fr); }
  .feld { grid-template-columns: minmax(0, 1fr); }
  .feld small { grid-column: 1; }
  input, select { max-width: none; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  th, td { padding: 6px 4px; }
  table { font-size: .85rem; }
  /* Live-Zahl über den Knöpfen: daneben quetscht „Ergebnis ansehen“ sie bei 375 px auf 63 px und den Fuß auf 210 px. */
  .fuss { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; padding: 8px 0; }
  .live { grid-column: 1 / -1; order: -1; line-height: 1.35; }
  .live:empty { display: none; }
  .fuss #weiter { grid-column: 2; }
  html { scroll-padding-bottom: 130px; }
  .live b { font-size: 1.15rem; }
  .btn, button.btn { padding: 12px 18px; }
}
/* Druck = ausführlicher Bericht (pdf.ts); die Rechneroberfläche erscheint nicht im PDF. */
@media print {
  body > :not(#bericht) { display: none !important; }
  /* Flächen (Kopfzeilen, Hinweis, Kennzahlen) auch ohne „Hintergrundgrafiken“ im Druckdialog. */
  #bericht { display: block !important; font-size: 10.5pt; line-height: 1.45; color: #000; counter-reset: abschnitt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #bericht h1 { max-width: none; font-size: 21pt; border-bottom: 2.5pt solid var(--blue); padding-bottom: 4pt; }
  #bericht h2 { font: 700 12.5pt/1.3 var(--sans); color: var(--navy); margin: 12pt 0 4pt; padding-top: 5pt; border-top: 1pt solid var(--line); break-after: avoid; }
  #bericht .meta { color: var(--muted); margin: 0 0 8pt; }
  #bericht p { margin: 0 0 5pt; }
  /* Keine ganzen Abschnitte zusammenhalten (erzeugte fast leere Seiten), nur Zeilen und Überschriften. */
  #bericht tr, #bericht li { break-inside: avoid; }
  #bericht section.block { break-inside: avoid; }
  #bericht table { font-size: 9.5pt; }
  #bericht th { background: var(--pale); }
  #bericht th, #bericht td { padding: 3.5pt 6pt; }
  #bericht li { margin: 1.5pt 0; }

  /* Positionen folgen der festen Abschnittsfolge von bericht() in pdf.ts (geprüft in pdf.test.ts):
     1 Überblick · 2 Einzelwirkung · 3 Förderung · 4 Szenarien · 5 Angaben · 6 Annahmen · 7 Nächste Schritte.
     Nur der vollständige Bericht (ab zwei Abschnitten) trägt Nummern; „Kein Bericht möglich“ bleibt schlicht. */
  #bericht:has(section:nth-of-type(2)) h2::before { counter-increment: abschnitt; content: counter(abschnitt) "\2002"; color: var(--blue); }
  #bericht:not(:has(section:nth-of-type(2))) .meta { display: none; }
  /* Überblick: Lesehilfe klein, die drei Entscheidungsgrößen als Kennzahlen, Kopfzeile entfällt. */
  #bericht section:nth-of-type(1) p:first-of-type { font-size: 11pt; }
  #bericht section:nth-of-type(1) p + p { color: var(--muted); font-size: 9pt; }
  #bericht:has(section:nth-of-type(2)) section:nth-of-type(1) thead { display: none; }
  #bericht .disclaimer { padding: 6pt 10pt; margin: 0 0 4pt; }
  #bericht section:nth-of-type(1) td { padding: 2.5pt 6pt; }
  /* Lange Mehrträger-Verbräuche dürfen die A4-Satzbreite nicht verbreitern. */
  #bericht section:nth-of-type(1) > table { table-layout: fixed; }
  #bericht section:nth-of-type(1) > table tr > :first-child { width: 25%; }
  #bericht section:nth-of-type(1) > table .zahl { white-space: normal; overflow-wrap: anywhere; }
  #bericht section:nth-of-type(1) tbody tr:nth-child(-n+3) td { background: var(--pale); color: var(--navy); font-size: 12pt; font-weight: 700; padding: 3.5pt 8pt; border-bottom: 1.5pt solid #fff; }
  #bericht section:nth-of-type(1) tbody tr:nth-child(3) td { border-bottom: 1.5pt solid var(--navy); }
  /* Einzelwirkung: Paketvergleich als Fußnote; Zahlenköpfe dürfen umbrechen, damit Maßnahmennamen einzeilig bleiben
     und der Abschnitt noch auf Seite 1 passt (Vollfall endet so auf drei Seiten). */
  #bericht section:nth-of-type(2) th.zahl { white-space: normal; }
  #bericht section:nth-of-type(2) p + p { color: var(--muted); font-size: 9pt; }
  /* Förderung: Summe betont, Quellenangabe klein. */
  #bericht section:nth-of-type(3) tbody tr:last-child td { font-weight: 700; border-top: 1pt solid var(--navy); }
  #bericht section:nth-of-type(3) p:last-of-type { color: var(--muted); font-size: 8.5pt; }
  /* Angaben: Nachschlageteil, kompakt, damit der Bericht nicht mit einer fast leeren Seite endet. */
  #bericht section:nth-of-type(5) table { font-size: 8.5pt; }
  #bericht section:nth-of-type(5) th, #bericht section:nth-of-type(5) td { padding: 1.5pt 6pt; }
  #bericht section:nth-of-type(5) td:first-child { width: 60%; }
  #bericht section:nth-of-type(6) ul { font-size: 9pt; }
  /* Nächste Schritte als Kasten; die Zeile vor der Liste ist Zwischenüberschrift. */
  #bericht section:nth-of-type(7) { background: var(--pale); padding: 2pt 10pt 6pt; border-left: 3pt solid var(--blue); }
  #bericht section:nth-of-type(7) h2 { border-top: 0; }
  #bericht section:nth-of-type(7) p:last-of-type { font-weight: 700; color: var(--navy); margin: 6pt 0 0; }
}
@page { size: A4; margin: 16mm 14mm 18mm;
  @top-right { content: "Energiesparrechner · Erstabschätzung · Prototyp, unverbindlich"; font: 7.5pt system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: #5f6770; }
  @bottom-right { content: "Seite " counter(page) " von " counter(pages); font: 7.5pt system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: #5f6770; }
}
/* Feldfehler (04pt): Text am Feld; Schritt mit Fehler gestrichelt, nicht nur rot (WCAG 1.4.1). */
.feld small.fehler { color: var(--err); font-weight: 600; }
.steps button.fehlt { border-top-style: dashed; border-color: var(--err); color: var(--err); }
/* Fallbezogene Warnungen im Ergebnis (ck16): sichtbar vor dem nächsten Schritt, Details im Disclosure. */
.warnung { border: 1px solid var(--warn-line); border-radius: 10px; background: var(--warn-bg); padding: 10px 14px; margin: 12px 0 4px; font-size: .9rem; }
.warnung strong { color: var(--warn-line); }
.warnung ul { margin: 4px 0 0; padding-left: 1.2em; }
.warnung li { margin: 2px 0; }
/* Lange Knopftexte in den Auswertungskarten umbrechen statt die Seite bei 390 px zu verbreitern (vorbestehend, e6sl.75). */
.karte .btn { white-space: normal; text-align: center; line-height: 1.3; max-width: 100%; }
/* Maßnahmenkarten (Root-Review e6sl.75): native Disclosure, Titel plus aktuelle Wahl. */
details.massnahme { border: 1px solid var(--line); border-left: 4px solid var(--sage); border-radius: 10px; padding: 4px 14px; margin: 12px 0 0; }
details.massnahme > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 0; color: var(--navy); }
details.massnahme > summary h2 { font: 700 1.1rem/1.35 var(--sans); color: var(--navy); margin: 0; }
details.massnahme .wahl { font-size: .85rem; font-weight: 400; color: var(--muted); }
details.massnahme .gruppe { padding-left: 0; }
details.massnahme > summary::after { content: "+"; margin-left: auto; font: 400 1.4rem/1 var(--sans); color: var(--navy); }
details.massnahme[open] > summary::after { content: "–"; }