/*
  Corporate Design des Bundes – Webseiten-Styleguide (Stand Juni 2023), Theme „Taubenblau".
  Farbwerte und Schrift aus dem Styleguide (Grundlagen S. 6–9). Kontraste sind auf WCAG 2.2 AA
  (mind. 4,5:1) ausgelegt.

  Kein Dark Mode: Die Anwendung wird in die klimaaktiv-Website eingebettet, die keinen kennt.
  Alle Tokens stehen deshalb genau einmal auf :root – keine prefers-color-scheme-Blöcke,
  kein data-theme-Attribut.
*/

:root {
    color-scheme: light;

    /* Designfarben (Theme Taubenblau) */
    --brand-01: #286f9c;   /* Designfarbe hell */
    --brand-02: #104166;   /* Designfarbe dunkel */
    --f-01: #e9f0f5;       /* 10 % Designfarbe hell */

    /* Akzent: klimaaktiv-Gelb, abgelesen aus dem offiziellen Logo. Sparsam einsetzen. */
    --accent: #fcd800;

    /* Neutrale Farben */
    --text-01: #000000;    /* Standard-Text */
    --text-02: #4d4d4d;    /* 70 % Text */
    /* Gedaempfter Text (Fussnoten, Codes, Achsen). Dunkler als der Styleguide-Wert
       #757575: Der haelt 4,5:1 nur auf Weiss, nicht auf den grauen Baendern
       (--surface-2 / --table-03), auf denen er tatsaechlich steht. Siehe D9. */
    --text-03: #696969;
    --bg: #ffffff;         /* Standard-Hintergrund */
    --field-01: #ccd9de;   /* Trennlinien, Rahmen */
    --field-line: #949494; /* Formularlinien, WCAG-konform */
    --table-02: #e5ecee;
    --table-03: #f0f4f5;

    /* Flächen (aus dem Mockup übernommen) */
    --ground: #eef1f3;     /* Seitenhintergrund hinter der App-Fläche */
    --surface: #ffffff;    /* Karten, App-Fläche */
    --surface-2: #f0f4f5;  /* Leisten, Tabellenhinterlegung */

    /* Aliase auf die Linien-Tokens – neue Namen, gleiche Werte. */
    --line: var(--field-01);
    --line-strong: var(--field-line);

    /* Berechnete Felder: im Beratungstool „automatisch hinterlegt". */
    --warn-bg: #fff7d6;
    /* Rahmen hervorgehobener Felder: Er macht das Feld erkennbar und braucht deshalb 3:1
       (WCAG 1.4.11) — 3,75:1 auf Weiß, 3,38:1 auf --surface-2. Das hellere #d3b51a hielt 2:1. */
    --warn-line: #9c8200;

    /* Getoente Flaechen zu den Supportfarben (Landes-Badge, Knock-out-Hinweis). */
    --success-bg: #e9f1ea;
    --danger-bg: #f9ece9;

    /* Supportfarben */
    --danger: #c92c0c;
    --danger-hover: #b1260b;
    --success: #37783e;
    --success-hover: #29592d;
    --warning: #ffd400;

    --radius: 4px;
    --radius-lg: 10px;
    --shadow: 0 1px 2px rgba(16, 65, 102, .06), 0 6px 20px rgba(16, 65, 102, .07);
    /* Fokusring deckend: Als einziger Fokusindikator (Pillen, Kacheln, Schalter) braucht er 3:1
       gegen seine Umgebung (WCAG 1.4.11) — 5,5:1 auf Weiß, 3,8:1 an den grauen Rahmen. Die
       halbtransparente Fassung kam auf knapp 2:1. Geprüft von NichtTextKontrast (E2E). */
    --ring: 0 0 0 3px var(--brand-01);
    --maxw: 72rem;
    --font: "Source Sans 3", "Source Sans Pro", system-ui, "Segoe UI", Arial, sans-serif;
}

/*
  Schrift selbst gehostet (DSGVO – kein Google-Fonts-CDN). Die WOFF2-Dateien liegen im
  Repository (schriften/, SIL Open Font License 1.1 – siehe LICENSE.md daneben), damit jeder
  Build sie hat: der Container-Build zieht keine Schriften aus dem Netz nach.
  `tools/schriften-holen.ps1` dient zum Aktualisieren. Fehlen die Dateien doch einmal, greift
  die System-Fallback-Kette aus --font und die Anwendung bleibt benutzbar.
*/
@font-face {
    font-family: "Source Sans 3";
    src: url("schriften/source-sans-3-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Source Sans 3";
    src: url("schriften/source-sans-3-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Source Sans 3";
    src: url("schriften/source-sans-3-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-01);
    background: var(--ground);
}

h1, h2, h3 { color: var(--brand-02); line-height: 1.2; font-weight: 700; }
h1 { font-size: 1.9rem; margin: 0 0 1rem; }
h2 { font-size: 1.4rem; }

a { color: var(--brand-01); }
a:hover { color: var(--brand-02); }

/* Sichtbarer Fokus für Tastaturbedienung (WCAG 2.4.7). */
:focus-visible {
    outline: 3px solid var(--brand-01);
    outline-offset: 2px;
}

/* ---------- Skip-Link (Styleguide S. 18) ---------- */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 100;
    padding: .6rem 1rem;
    background: var(--text-01);
    color: #fff;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
    color: #fff;
}

/* ---------- Grundlayout ----------
   Kein height/min-height in Viewport-Einheiten: Die Anwendung läuft später in einem iframe,
   dessen Viewport nicht das ist, was die Nutzer:innen sehen. Die Höhe ergibt sich aus dem Inhalt.
*/
.app-shell {
    display: flex;
    flex-direction: column;
    max-width: var(--maxw);
    margin: 1.25rem auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
@media (max-width: 74rem) {
    .app-shell { margin: 0; border: none; border-radius: 0; box-shadow: none; }
}

/* Kopfzeile: Marke · Titel · Konto. Hell, damit das Logo auf seinem Weiß sitzt. */
.app-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.app-header__inner {
    margin: 0 auto;
    padding: .85rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.app-header__brand { display: flex; align-items: center; text-decoration: none; }
.app-header__logo { display: block; height: 1.9rem; width: auto; }
.app-header__titel {
    border-left: 1px solid var(--line);
    padding-left: 1rem;
    font-size: .82rem;
    color: var(--text-02);
    line-height: 1.25;
}
.app-header__titel strong { display: block; font-size: .95rem; color: var(--text-01); font-weight: 600; }
.app-header__spacer { flex: 1 1 auto; }
.app-header__account { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--text-02); }

.app-account__name { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--text-01); }
.app-account__avatar {
    display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--brand-01); color: #fff;
    font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}
.app-account__link { color: var(--brand-01); }
.app-account__logout { display: inline; margin: 0; }

.app-body { flex: 1; display: flex; width: 100%; }

.app-nav { flex: 0 0 15rem; padding: 1.5rem 1rem; border-right: 1px solid var(--field-01); }
.app-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.app-nav__link {
    display: block; padding: .5rem .75rem; border-radius: var(--radius);
    color: var(--text-01); text-decoration: none;
}
.app-nav__link:hover { background: var(--f-01); }
.app-nav__link.active { background: var(--brand-01); color: #fff; font-weight: 600; }

.app-main { flex: 1; padding: 1.5rem; }
.app-main:focus { outline: none; }
.app-main__content { max-width: 48rem; }

.lead { font-size: 1.15rem; color: var(--text-02); }
.hinweis {
    margin-top: 1.5rem; padding: .9rem 1rem;
    background: var(--f-01); border-left: 4px solid var(--brand-01); border-radius: var(--radius);
    color: var(--text-02);
}

.kv { list-style: none; margin: 1rem 0; padding: 0; }
.kv li { display: flex; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--field-01); }
.kv li span:first-child { flex: 0 0 8rem; color: var(--text-02); }

.app-footer {
    background: var(--surface-2);
    border-top: 1px solid var(--line);
    padding: 1.25rem 1.4rem;
    color: var(--text-02);
}
.app-footer__links { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.app-footer__note { margin: 0; font-size: .9rem; }

/* ---------- Formulare (Styleguide S. 34–40): Felder 100 % Breite ---------- */
.form-page { max-width: 32rem; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-field { flex: 1 1 12rem; }
.form-field { margin-bottom: 1rem; }
.form-field label { display: block; font-weight: 600; margin-bottom: .3rem; }
.form-optional { font-weight: 400; color: var(--text-03); }

.form-control {
    width: 100%;
    padding: .55rem .7rem;
    font: inherit;
    color: var(--text-01);
    background: #fff;
    border: 1px solid var(--field-line);
    border-radius: var(--radius);
}
.form-control:focus-visible { border-color: var(--brand-01); }

.form-field--checkbox { display: flex; align-items: center; gap: .5rem; }
.form-field--checkbox label { margin: 0; font-weight: 400; }

.form-error, .validation-message { color: var(--danger); font-size: .9rem; display: block; margin-top: .25rem; }
.form-validation-summary { color: var(--danger); }
.form-alt { margin-top: 1.25rem; }
.form-hint { color: var(--text-02); font-size: .9rem; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: .6rem 1.4rem;
    font: inherit; font-weight: 600;
    border: 1px solid transparent; border-radius: var(--radius);
    cursor: pointer; text-decoration: none;
    background: transparent; color: var(--brand-01);
}
.btn--primary { background: var(--brand-01); color: #fff; }
.btn--primary:hover { background: var(--brand-02); color: #fff; }
.btn--outline { border-color: var(--brand-01); color: var(--brand-01); }
.btn--outline:hover { background: var(--f-01); color: var(--brand-02); }
/* Flache Variante für Nebenaktionen in Tabellenzeilen und Leisten. */
.btn--flach:hover { background: var(--f-01); color: var(--brand-02); }
.btn--gefahr { background: var(--danger); color: #fff; }
.btn--gefahr:hover { background: var(--danger-hover); color: #fff; }
.btn--gefahr-flach { color: var(--danger); }
.btn--gefahr-flach:hover { background: var(--danger-bg); color: var(--danger-hover); }
.btn--klein { padding: .3rem .7rem; font-size: .85rem; }
.btn--link { background: none; border: none; color: inherit; text-decoration: underline; padding: 0; font-weight: 600; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Aktionen nebeneinander, statt sie einzeln mit Abständen zu versehen. */
.btn-reihe { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ---------- Meldungen ----------
   Vier Zustände; die ARIA-Rolle setzt die aufrufende Stelle (role="alert" unterbricht,
   role="status" berichtet nur). Rahmen und Text tragen die Aussage mit — Farbe allein genügt
   nicht (WCAG 1.4.1).
*/
.alert {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
}
.alert__inhalt { flex: 1 1 auto; min-width: 0; }
.alert__inhalt > :first-child { margin-top: 0; }
.alert__inhalt > :last-child { margin-bottom: 0; }
.alert--kompakt { padding: .45rem .7rem; font-size: .92rem; }
.alert__schliessen {
    flex: 0 0 auto;
    padding: 0 .2rem; margin: -.1rem 0 0;
    font: inherit; font-size: 1.2rem; line-height: 1.2; color: inherit;
    background: none; border: 0; cursor: pointer;
}
.alert--danger { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-hover); }
.alert--success { background: var(--success-bg); border: 1px solid var(--success); color: var(--success-hover); }
.alert--info { background: var(--f-01); border: 1px solid var(--brand-01); color: var(--text-01); }
.alert--warning { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--text-01); }
.text-danger { color: var(--danger); }

/* Nur für Screenreader – z.B. Überschrift einer Aktionsspalte. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* ---------- Ladeanzeige ----------
   Unbestimmter Fortschritt als reine CSS-Animation.
*/
.spinner {
    display: inline-block;
    width: 2.5rem; height: 2.5rem;
    border: 3px solid var(--field-01); border-top-color: var(--brand-01);
    border-radius: 50%;
    animation: spinner-dreht 900ms linear infinite;
}
@keyframes spinner-dreht { to { transform: rotate(360deg); } }
/* Nicht abschalten: Ein stehender Kreis sagt nichts mehr aus. Nur deutlich langsamer. */
@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2.5s; }
}

/* ---------- Tabellen ----------
   Kompakte Liste mit Kopfhinterlegung und Zeilenmarkierung beim Überfahren. Die Hülle scrollt
   waagrecht, damit schmale Bildschirme die Seite nicht mitziehen.
*/
.tabelle-huelle { overflow-x: auto; }
.tabelle {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--table-02);
}
.tabelle th, .tabelle td {
    padding: .4rem .6rem;
    text-align: left; vertical-align: middle;
    border-bottom: 1px solid var(--table-02);
}
.tabelle thead th {
    font-weight: 600; color: var(--text-02);
    background: var(--table-03);
}
.tabelle tbody tr:hover { background: var(--table-03); }
.tabelle tbody tr:last-child td { border-bottom: 0; }

/* Abschnitt einer Seite, mit Abstand zum naechsten. */
.abschnitt { margin-bottom: 1.5rem; }

.fehlerliste { margin: 0; padding-left: 1.2rem; }
.aktionen { white-space: nowrap; }

/* Feldgruppen im Formular: <fieldset>/<legend> gibt Screenreadern die Gruppenzugehörigkeit. */
.feldgruppe {
    border: 1px solid var(--field-01);
    border-radius: var(--radius);
    padding: 1rem 1.25rem 1.25rem;
    margin: 0 0 1.5rem;
}
.feldgruppe > legend {
    padding: 0 .4rem;
    font-weight: 700;
    color: var(--brand-02);
}
.feldgruppe > * + * { margin-top: 1rem; }

/* ---------- Schritt 2: Maßnahmenwahl ----------
   Gliederung Bereich → Gruppe → Maßnahme. Ein Bereich ist ein aufklappbares <details>; die
   Kopfzeile trägt die Bereichsnummer und sagt, was darin gewählt ist, ohne dass man aufklappen muss.
*/
.massnahmen-hinweis {
    display: flex; gap: .6rem; align-items: flex-start;
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border: 1px dashed var(--brand-01); border-radius: var(--radius);
    background: var(--f-01);
    font-size: .85rem; color: var(--text-02);
}
.massnahmen-hinweis__marke { color: var(--brand-01); font-weight: 700; }

.bereich {
    margin-bottom: .6rem;
    border: 1px solid var(--field-01); border-radius: var(--radius);
    background: var(--bg);
    overflow: hidden;
}
.bereich__kopf {
    display: flex; align-items: center; gap: .7rem;
    padding: .8rem 1rem;
    font-weight: 600; font-size: .95rem;
    cursor: pointer;
    list-style: none;
}
.bereich__kopf::-webkit-details-marker { display: none; }
.bereich__kopf:hover { background: var(--table-03); }
/* Ring nach innen: .bereich schneidet mit overflow: hidden alles ab, was über ihn hinausragt —
   am zugeklappten Bereich bliebe vom äußeren Ring nichts übrig. */
.bereich__kopf:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--brand-01); }
.bereich__num {
    flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem;
    display: grid; place-items: center;
    border-radius: var(--radius);
    background: var(--f-01); color: var(--brand-02);
    font-size: .78rem; font-weight: 700;
}
.bereich__fueller { flex: 1; }
.bereich__wahl { font-size: .8rem; font-weight: 600; color: var(--text-03); text-align: right; }
.bereich__wahl--gesetzt { color: var(--success); }
.bereich__pfeil { color: var(--text-03); transition: transform .15s; }
.bereich[open] .bereich__pfeil { transform: rotate(90deg); }
.bereich__inhalt { padding: .25rem 1rem 1rem; border-top: 1px solid var(--field-01); }
.bereich__sub, .bereich__leer {
    margin: .7rem 0 0; font-size: .82rem; color: var(--text-03);
}

/* Untergruppe: fieldset/legend, damit die Gruppenzugehörigkeit vorgelesen wird. */
.untergruppe { border: none; margin: .9rem 0 0; padding: 0; }
.untergruppe__titel {
    padding: 0; margin-bottom: .45rem;
    font-size: .85rem; font-weight: 600; color: var(--text-02);
}
.untergruppe__regel { font-weight: 400; color: var(--text-03); }

/*
  Auswahl-Pillen. Die <input> sind echte Radios bzw. Checkboxen — visuell ersetzt, aber im Baum
  vorhanden und fokussierbar (nicht display:none, das nähme ihnen Tastatur und Screenreader).
  Der gewählte Zustand hängt nicht an der Farbe allein: das Häkchen und die stärkere Schrift
  tragen ihn mit.
*/
.pillen { display: flex; flex-wrap: wrap; gap: .5rem; }
.pille { position: relative; display: inline-flex; }
.pille input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pille label {
    display: inline-block;
    padding: .35rem .85rem;
    border: 1.5px solid var(--field-01); border-radius: 999px;
    background: var(--bg); color: var(--text-02);
    font-size: .85rem; cursor: pointer;
}
.pille label:hover { border-color: var(--brand-01); }
.pille input:checked + label {
    border-color: var(--brand-01); border-width: 2px;
    padding: calc(.35rem - 1px) calc(.85rem - 1px);
    background: var(--f-01); color: var(--brand-02); font-weight: 600;
}
/* Der Haken ist Optik: Dass die Option gewählt ist, sagt das Radio ohnehin an. Die leere
   Alternative nach dem Schrägstrich hält ihn aus der Vorlesestimme heraus. */
.pille input:checked + label::before { content: "✓ " / ""; }
.pille input:focus-visible + label { box-shadow: var(--ring); }
.pille__code { margin-left: .35rem; font-size: .72rem; font-weight: 400; color: var(--text-03); }
.pille input:checked + label .pille__code { color: var(--brand-01); }

/* „keine (Erhaltung)" ist die Grundstellung, kein Erfolg — deshalb neutral statt in Markenfarbe. */
.pille--neutral input:checked + label {
    border-color: var(--field-line);
    background: var(--table-03); color: var(--text-02);
}
.pille--neutral input:checked + label .pille__code { color: var(--text-03); }

.massnahmen-aktionen { margin-top: 1.25rem; }

/* ---------- Blazor-Fehleranzeige ---------- */
#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: .8rem 1.25rem;
    background: var(--warning); color: var(--text-01);
    box-shadow: 0 -1px 4px rgba(0,0,0,.2);
}
#blazor-error-ui .reload { color: var(--brand-02); }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ---------- Projekt-Assistent (Schritt 0–4) ----------
   Der Assistent trägt seine Navigation selbst: Schrittleiste oben, Kontext-Rail rechts,
   Vor/Zurück in der Fußleiste. Die Seitenleiste der App tritt dafür zurück, und der Inhalt
   darf die Breitenbegrenzung der übrigen Seiten überschreiten.
*/
.app-body:has(.assistent) .app-nav { display: none; }
.app-main:has(.assistent) { padding: 0; }
.app-main__content:has(.assistent) { max-width: none; }

.assistent { display: flex; flex-direction: column; }

/* Schrittleiste */
.assistent__stepper {
    display: flex;
    gap: .25rem;
    padding: .75rem 1rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
}
.schritt {
    flex: 1 1 0;
    min-width: 9.5rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-02);
    position: relative;
}
.schritt:hover { background: rgba(40, 111, 156, .08); }
.schritt__num {
    flex: 0 0 1.6rem;
    width: 1.6rem; height: 1.6rem;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    background: var(--surface);
    font-size: .8rem; font-weight: 700;
}
.schritt__lbl { font-size: .78rem; line-height: 1.25; }
.schritt__lbl b { display: block; font-size: .85rem; font-weight: 600; color: var(--text-01); }
.schritt--aktiv { color: var(--text-01); }
.schritt--aktiv .schritt__num { background: var(--brand-01); border-color: var(--brand-01); color: #fff; }
.schritt--aktiv::after {
    content: "";
    position: absolute; left: .6rem; right: .6rem; bottom: -.8rem;
    height: 3px; border-radius: 3px; background: var(--accent);
}
.schritt--erledigt .schritt__num { background: var(--success); border-color: var(--success); color: #fff; }

/* Inhalt + Kontext-Rail */
.assistent__layout { display: grid; grid-template-columns: minmax(0, 1fr) 18.5rem; }
.assistent__inhalt { padding: 1.6rem 1.9rem 1.9rem; min-width: 0; }
.assistent__rail {
    border-left: 1px solid var(--line);
    background: var(--surface-2);
    padding: 1.4rem 1.4rem 1.6rem;
}
/* 53rem = 848 px: Die Rail klappt schon auf Tablet-Breite unter den Inhalt. Bei 820 px blieben
   dem Formular neben der 18,5rem breiten Rail keine 34rem — zu wenig für das Dreierraster. */
@media (max-width: 53rem) {
    .assistent__layout { grid-template-columns: 1fr; }
    .assistent__rail { border-left: none; border-top: 1px solid var(--line); }
}

.rail-hilfe h2 {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--brand-01); margin: 0 0 .5rem;
}
.rail-hilfe p { font-size: .85rem; color: var(--text-02); margin: 0 0 .75rem; }
.rail-hinweis {
    border-left: 3px solid var(--warn-line);
    background: var(--warn-bg);
    padding: .6rem .75rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: .82rem;
    color: var(--text-01);
}
.rail-hinweis strong { display: block; margin-bottom: .15rem; }
.rail-datenstand {
    margin-top: 1.25rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--line);
    font-size: .78rem;
    color: var(--text-03);
}
.rail-datenstand b { color: var(--text-02); }

/* Kopfbereich einer Schrittseite */
.schritt-eyebrow {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--brand-01); font-weight: 700; margin: 0;
}
.schritt-titel { font-size: 1.5rem; margin: .3rem 0 .25rem; }
.schritt-lede { color: var(--text-02); max-width: 62ch; margin: 0 0 1.4rem; }

/* Fußnavigation – im Fluss, nicht am Viewport fixiert (iframe-Betrieb). */
.assistent__navbar {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: 1rem 1.9rem;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}
.assistent__navbar .sp { flex: 1 1 auto; }
.assistent__fortschritt { font-size: .82rem; color: var(--text-03); }

/* ---------- Schritt 0: Vorentscheidungen ---------- */
.vorentscheidung { border: none; margin: 0 0 1.6rem; padding: 0; }
.vorentscheidung__label {
    display: flex; align-items: center; gap: .5rem;
    padding: 0;
    font-size: .95rem; font-weight: 700;
}
.pflicht { color: var(--danger); }
.vorentscheidung__sub { margin: .25rem 0 .75rem; font-size: .85rem; color: var(--text-02); }
.vorentscheidung__select {
    font: inherit; font-size: .95rem;
    width: 100%; max-width: 21rem;
    padding: .55rem .75rem;
    border: 1px solid var(--field-line); border-radius: var(--radius);
    background: var(--bg); color: var(--text-01);
}
.vorentscheidung__select:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--brand-01); }

/*
  Auswahlkacheln. Echte Radiogroup: Die <input> sind visuell versteckt, aber im Baum vorhanden und
  fokussierbar — Tastatur, Screenreader und Formularübermittlung funktionieren ohne Skripting.
  Nicht per display:none/visibility ausblenden, das nähme ihnen genau das.
*/
.kacheln {
    display: grid; gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.kachel {
    position: relative;
    display: flex; flex-direction: column; gap: .25rem;
    padding: .9rem;
    border: 1.5px solid var(--field-01); border-radius: var(--radius);
    background: var(--bg); cursor: pointer;
}
.kachel:hover { border-color: var(--brand-01); }
.kachel input { position: absolute; opacity: 0; pointer-events: none; }
.kachel__symbol { font-size: 1.25rem; line-height: 1; }
.kachel__titel { font-weight: 600; font-size: .95rem; }
.kachel__text { font-size: .82rem; color: var(--text-02); }
.kachel__haken {
    position: absolute; top: .6rem; right: .6rem;
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: var(--brand-01); color: #fff;
    display: none; place-items: center; font-size: .7rem;
}
.kachel:has(input:checked) {
    border-color: var(--brand-01);
    background: var(--f-01);
    box-shadow: inset 0 0 0 1px var(--brand-01);
}
.kachel:has(input:checked) .kachel__titel { color: var(--brand-02); }
.kachel:has(input:checked) .kachel__haken { display: grid; }
.kachel:has(input:focus-visible) { box-shadow: var(--ring); }
/* Derzeit nicht wählbar: sichtbar, aber ausgegraut — die Schrift behält ausreichend Kontrast. */
.kachel:has(input:disabled) {
    cursor: not-allowed;
    border-style: dashed;
    background: var(--surface-2);
}
.kachel:has(input:disabled):hover { border-color: var(--field-01); }
.kachel:has(input:disabled) .kachel__titel,
.kachel:has(input:disabled) .kachel__text { color: var(--text-03); }
.kachel:has(input:disabled) .kachel__symbol { filter: grayscale(1); opacity: .6; }

/* Was die Vorentscheidungen in den Folgeschritten bewirken. */
.filterwirkung {
    border: 1px dashed var(--brand-01);
    border-radius: var(--radius);
    background: var(--f-01);
    padding: .8rem 1rem;
    margin: 0 0 1.5rem;
    font-size: .88rem; color: var(--text-02);
}
.filterwirkung__titel { margin: 0 0 .35rem; font-weight: 700; color: var(--brand-02); }
.filterwirkung ul { margin: 0; padding-left: 1.2rem; }

.gegenstandslos__titel { margin: 0 0 .4rem; }

/* ---------- Schritt 1: Gebäudedaten ----------
   Das Formular ist in vier Absätze gegliedert; die Unterzeile sagt, was ein Absatz abfragt.
   Den Badge nutzt auch Schritt 3 (Bundesland an der Landesförderung).
*/
.absatz { border: none; margin: 0 0 1.75rem; padding: 0; }
.absatz > legend {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    width: 100%; padding: 0;
    font-size: 1rem; font-weight: 700; color: var(--brand-02);
}
.absatz__badge {
    padding: .1rem .5rem;
    font-size: .69rem; font-weight: 700; letter-spacing: .03em;
    color: var(--brand-01); background: var(--f-01);
    border-radius: 999px;
}
.absatz__sub { margin: .25rem 0 .9rem; font-size: .82rem; color: var(--text-03); }
.absatz__sub em { font-style: italic; }

/* Zwei- bzw. dreispaltiges Raster; unter 620px einspaltig. */
.raster2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.15rem; }
.raster3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .9rem 1.15rem; }
.raster__breit { grid-column: 1 / -1; }
@media (max-width: 38.75rem) {
    .raster2, .raster3 { grid-template-columns: 1fr; }
}

/* Feld + Fußnote als eine Rasterzelle. */
.feld { display: flex; flex-direction: column; min-width: 0; }
.fnote { margin-top: .25rem; font-size: .78rem; line-height: 1.35; color: var(--text-03); }

/*
  Natives Auswahlfeld im Raster. Die Beschriftung steht darueber statt im Feld zu schweben: Sie
  bleibt damit auch bei langen Titeln und schmalen Spalten vollstaendig lesbar, und das Menue
  zeichnet der Browser — auf dem Telefon als Systemauswahl.
*/
.feld__label {
    margin-bottom: .3rem;
    font-size: .8rem; font-weight: 600; color: var(--text-02);
}
/* Pflichtstern. Die zweite Angabe gibt ihm einen leeren Alternativtext — der Screenreader liest
   aria-required statt „Stern"; ältere Browser nehmen die erste. */
.feld__label--pflicht::after {
    content: " *";
    content: " *" / "";
    color: var(--danger);
}
.feld__select {
    font: inherit; font-size: .95rem;
    width: 100%; min-width: 0;
    padding: .5rem .65rem;
    color: var(--text-01); background: var(--bg);
    border: 1px solid var(--field-line); border-radius: var(--radius);
}
.feld__select:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--brand-01); }

/* Freitextfeld im selben Raster (Adresse) — Anmutung wie das Auswahlfeld. */
.feld__eingabe {
    font: inherit; font-size: .95rem;
    width: 100%; min-width: 0;
    padding: .5rem .65rem;
    color: var(--text-01); background: var(--bg);
    border: 1px solid var(--field-line); border-radius: var(--radius);
}
.feld__eingabe:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--brand-01); }

/*
  Zahlenfeld: Rahmen und Fokusring liegen an der Hülle, damit die angesetzte Einheit innerhalb
  des Rahmens sitzt und nicht daneben. Vorgelesen wird sie über aria-describedby, nicht über
  dieses Markup.
*/
.zahlfeld {
    display: flex; align-items: stretch;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--field-line); border-radius: var(--radius);
}
.zahlfeld:focus-within { box-shadow: var(--ring); border-color: var(--brand-01); }
.zahlfeld__eingabe {
    font: inherit; font-size: .95rem;
    flex: 1 1 auto; min-width: 0; width: 100%;
    padding: .5rem .65rem;
    color: var(--text-01); background: transparent;
    border: 0; border-radius: inherit;
}
/* Der Ring sitzt an der Hülle; ein zweiter am Feld selbst wäre ein Ring im Ring. */
.zahlfeld__eingabe:focus-visible { outline: none; }
.zahlfeld__eingabe[readonly] { cursor: default; }
.zahlfeld__einheit {
    display: flex; align-items: center;
    padding: 0 .65rem;
    font-size: .8rem; line-height: 1.2; color: var(--text-02);
    background: var(--surface-2);
    border-left: 1px solid var(--field-01);
    border-radius: 0 var(--radius) var(--radius) 0;
    white-space: nowrap;
}

/*
  Berechnete bzw. herangezogene Werte sind hinterlegt — so hält es auch das Beratungstool.
  Die Hinterlegung allein trägt keine Information: Die Fußnote benennt den Wert im Klartext.
  Die zweite Rahmenlinie kommt als Innenschatten, damit die Zelle nicht um ein Pixel springt,
  sobald die Hervorhebung wechselt.
*/
.feld--hervorgehoben .zahlfeld {
    background: var(--warn-bg);
    border-color: var(--warn-line); box-shadow: inset 0 0 0 1px var(--warn-line);
}
.feld--hervorgehoben .zahlfeld:focus-within { box-shadow: var(--ring), inset 0 0 0 1px var(--warn-line); }
.feld--hervorgehoben .zahlfeld__einheit { background: transparent; border-left-color: var(--warn-line); }
.feld--hervorgehoben .fnote { color: #7a6a12; font-weight: 600; }

/* ---------- Schritt 2: Szenario-Tabs ----------
   Die Tabs sitzen auf der Trennlinie: Der aktive Tab bricht sie auf (eigene Unterkante in
   Flaechenfarbe) und traegt innen die gelbe Akzentkante des Mockups.
*/
.szenario-tabs {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    border-bottom: 2px solid var(--line);
    margin-bottom: .2rem;
}

/* In Schritt 2 steht neben der Tableiste, was Szenarien verwaltet. Die Trennlinie traegt dann
   die Zeile, nicht die Leiste — sonst liefe sie unter „+ Szenario" durch. */
.szenario-leiste {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    border-bottom: 2px solid var(--line);
    margin-bottom: .2rem;
}
.szenario-leiste .szenario-tabs { border-bottom: none; margin-bottom: 0; }
.szenario-umbenennen { display: inline-flex; align-items: center; gap: .25rem; }

.szenario-tab {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: -2px;
    font-family: inherit; font-size: .88rem; font-weight: 600;
    padding: .55rem .95rem;
    color: var(--text-02); background: var(--surface-2);
    border: 1px solid var(--line); border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    cursor: pointer;
}
.szenario-tab:hover { color: var(--brand-02); }
.szenario-tab--aktiv {
    color: var(--brand-02); background: var(--surface);
    border-bottom: 2px solid var(--surface);
    box-shadow: 0 -3px 0 var(--accent) inset;
}
.szenario-tab__badge {
    padding: .05rem .4rem;
    font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--brand-01); background: var(--f-01);
    border-radius: 999px;
}

/* Stift bzw. Haken zum Umbenennen — neben dem Tab, nicht darin: kein Button im Button. */
.szenario-tab__stift {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.75rem; min-height: 1.75rem;
    padding: .2rem .4rem;
    font-family: inherit; font-size: .85rem; line-height: 1;
    color: var(--brand-01); background: none; border: none; cursor: pointer;
}
.szenario-tab__stift:hover { color: var(--brand-02); }

.szenario-tab__eingabe {
    font-family: inherit; font-size: .88rem; font-weight: 600;
    padding: .5rem .7rem; width: 12rem;
    color: var(--text-01); background: var(--surface);
    border: 1px solid var(--brand-01);
    border-radius: var(--radius) var(--radius) 0 0;
}

.szenario-neu {
    padding: .5rem .75rem;
    font-family: inherit; font-size: .85rem; font-weight: 600;
    color: var(--brand-01); background: transparent;
    border: 1px dashed var(--line-strong); border-radius: var(--radius);
    cursor: pointer;
}
.szenario-neu:hover { border-color: var(--brand-01); background: var(--f-01); }
.szenario-neu:disabled { color: var(--text-03); border-color: var(--field-01); cursor: not-allowed; }

.szenario-panel { padding-top: 1.1rem; }
.szenario-aktionen { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: .9rem; }

/* ---------- Schritt 2: KPI-Leiste ----------
   Drei Kacheln ueber der Maßnahmenliste. Die Investitionskachel traegt die gelbe Akzentkante —
   sie ist die Zahl, auf die im Gespraech gezeigt wird.
*/
.kpi-leiste { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.25rem; }
/* Die Kachel ist eine Begriffsliste (<dl>): Ihre Vorgabe-Abstaende muessen weg. */
.kpi {
    flex: 1 1 10rem;
    margin: 0;
    padding: .7rem .9rem;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
}
.kpi dd { margin-left: 0; }
.kpi--akzent { border-left: 4px solid var(--accent); }
.kpi__label {
    font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-02);
}
.kpi__wert {
    margin: .1rem 0 0;
    font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--text-01);
}
.kpi__wert small { font-size: .75rem; font-weight: 600; color: var(--text-02); }

/* Die Kennzeichnung sitzt an der Kachel, nicht im Kleingedruckten. */
.kpi__beispielwert {
    margin: .25rem 0 0;
    font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-02);
}

/* Preis an der Option und Summe in der Bereichs-Kopfzeile. */
.pille__preis {
    margin-left: .4rem;
    font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--text-02);
}
.pille input:checked + label .pille__preis { color: var(--brand-02); }
.bereich__summe {
    margin-right: .75rem;
    font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--text-02);
}

/* ---------- Schritt 3: Foerderdaten ----------
   Eine Zeile je Foerderung: Gebiets-Badge, Bezeichnung mit Untertitel, Schalter. Keine der
   Bezeichnungen steht im Markup — die Liste kommt aus den Stammdaten des Datenstands.
*/
.fund-list { display: flex; flex-direction: column; gap: .5rem; margin: .25rem 0 .75rem; }

.fund {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .7rem .9rem;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
}

/* Abgewaehlt: zurueckgenommen, aber lesbar — die Zeile bleibt eine Information. */
.fund--aus { background: var(--table-03); border-style: dashed; }
.fund--aus .fund__name { color: var(--text-02); text-decoration: line-through; }

.badge {
    flex: 0 0 auto; margin-top: .1rem;
    padding: .1rem .5rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    border-radius: 999px; white-space: nowrap;
}
.badge--bund { color: var(--brand-02); background: var(--f-01); }
.badge--land { color: var(--success); background: var(--success-bg); }

.fund__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.fund__name { font-size: .95rem; font-weight: 600; color: var(--text-01); }
.fund__sub { font-size: .78rem; color: var(--text-02); }

.fund__details { margin-top: .3rem; font-size: .8rem; color: var(--text-02); }
.fund__details > summary { color: var(--brand-01); cursor: pointer; font-weight: 600; }
.fund__details p { margin: .35rem 0 0; max-width: 60ch; }

/* Schalter: echte Checkbox mit role="switch" — Zustand und Tastaturbedienung bleiben nativ. */
.fund__schalter { display: flex; align-items: center; gap: .45rem; margin-left: auto; padding-top: .1rem; }
.fund__schalter label {
    display: inline-flex; align-items: center; min-height: 1.6rem;
    font-size: .76rem; color: var(--text-02); cursor: pointer;
}

/* Schalter und Beschriftung sind beide mindestens 24 px hoch — WCAG 2.2, Kriterium 2.5.8
   „Target Size (Minimum)". Vor D9 war der Schalter 40 × 21,6 px. */
.switch {
    appearance: none; -webkit-appearance: none;
    position: relative; flex: 0 0 auto; margin: 0;
    width: 2.75rem; height: 1.6rem;
    background: var(--line-strong); border: none; border-radius: 999px;
    cursor: pointer; transition: background .15s;
}
.switch::after {
    content: ""; position: absolute; top: .15rem; left: .15rem;
    width: 1.3rem; height: 1.3rem;
    background: #fff; border-radius: 50%;
    transition: left .15s;
}
.switch:checked { background: var(--brand-01); }
.switch:checked::after { left: 1.3rem; }
.switch:focus-visible { outline: none; box-shadow: var(--ring); }

@media (prefers-reduced-motion: reduce) {
    .switch, .switch::after { transition: none; }
}

.fund-leer, .fund-hinweis {
    margin: .5rem 0 0;
    font-size: .85rem; color: var(--text-02);
    max-width: 62ch;
}
.fund-leer {
    padding: .8rem .9rem;
    background: var(--f-01);
    border-left: 3px solid var(--brand-01); border-radius: 0 var(--radius) var(--radius) 0;
}

/* Knock-out: verfehltes Pflichtkriterium. Rot umrandet, aber als Hinweis ausgezeichnet — die
   Foerderung entfaellt in der Berechnung, die Eingabe ist deswegen nicht fehlerhaft. */
.ko {
    margin: 1rem 0 0;
    padding: .8rem .95rem;
    font-size: .85rem; color: var(--text-01);
    background: var(--danger-bg);
    border-left: 3px solid var(--danger); border-radius: 0 var(--radius) var(--radius) 0;
}
.ko strong { display: block; margin-bottom: .2rem; color: var(--danger-hover); }
.ko__rechnung { display: block; margin-top: .3rem; color: var(--text-02); }

/* ---------- Schritt 4: Ergebnisseite ----------
   Aufbau nach dem Blatt „04_Ergebnisse" des Beratungstools: dunkles Kopfband, vier Kennzahlen,
   Kostenblock, Förderblock, Bilanz. Die Blöcke sind auf Druckbarkeit ausgelegt (Lastenheft S. 14:
   ein bis zwei A4-Seiten) — siehe den Druckabschnitt am Ende der Datei.
*/
.ergebnis-vorschau { border-style: dashed; }

.ergebnis { margin-bottom: 1.5rem; }

.ergebnis-kopf {
    padding: 1.1rem 1.3rem;
    background: var(--brand-02); color: #fff;
    border-radius: var(--radius) var(--radius) 0 0;
}
.ergebnis-kopf h2 { margin: 0; font-size: 1.15rem; color: #fff; }
.ergebnis-kopf__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem;
    margin: .4rem 0 0;
    font-size: .82rem; color: #c8d6e2;
}
.ergebnis-kopf__badge {
    padding: .1rem .55rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .02em;
    color: var(--brand-02); background: var(--accent);
    border-radius: 999px; white-space: nowrap;
}

.ergebnis-block {
    padding: 1.1rem 1.3rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--line); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* In der Ergebnisleiste stehen vier Kacheln statt drei — ohne die Grundbreite bräche die letzte um. */
.kpi-leiste--ergebnis .kpi { flex-basis: 8rem; }

.ergebnis-abschnitt { margin-top: 1.6rem; }
.ergebnis-abschnitt > h2, .ergebnis-abschnitt > h3 {
    margin: 0 0 .6rem;
    font-size: 1.05rem;
}
.ergebnis-vergleich { margin-top: 2rem; }

/* Zahlenspalten: rechtsbündig und mit gleich breiten Ziffern, damit Beträge untereinander stehen.
   Der Selektor nennt th/td mit: .tabelle th/.tabelle td setzt text-align und wäre sonst stärker. */
.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle th.zahl, .tabelle td.zahl { text-align: right; }
.zahl small { font-size: .72rem; font-weight: 400; color: var(--text-03); }

.tabelle caption {
    padding: .4rem .6rem;
    text-align: left; font-weight: 700; font-size: .85rem; color: var(--brand-02);
    background: var(--table-03);
    border-bottom: 1px solid var(--table-02);
}
.tabelle tfoot th, .tabelle tfoot td {
    padding: .45rem .6rem;
    font-weight: 700;
    border-top: 2px solid var(--line-strong);
}
.tabelle tbody tr.zeile--leer th, .tabelle tbody tr.zeile--leer td { color: var(--text-03); }
.tabelle tbody tr.zeile--aus th { color: var(--text-02); }
.tabelle tbody tr.zeile--aus td.zahl { color: var(--text-03); }
.tabelle th .fund__sub { display: block; font-weight: 400; }

.bilanz tfoot tr.bilanz__quote th, .bilanz tfoot tr.bilanz__quote td {
    font-weight: 600; color: var(--text-02);
    border-top: 0;
}

.ergebnis-schaetzung {
    margin: 1.75rem 0 0;
    padding: .8rem .95rem;
    font-size: .85rem; color: var(--text-01);
    background: var(--f-01);
    border-left: 3px solid var(--brand-01); border-radius: 0 var(--radius) var(--radius) 0;
    max-width: 70ch;
}

/* ---------- Diagramme (Inline-SVG, Architecture.md §11.2) ----------
   Die Kernaussage steht sichtbar über der Zeichenfläche und ist zugleich deren Textalternative
   (aria-labelledby). Darunter liegt dieselbe Zahlenreihe als aufklappbare Tabelle.
*/
.chart { margin: 1.1rem 0 0; }
.chart__titel {
    font-size: .88rem; font-weight: 700; color: var(--brand-02);
    margin-bottom: .15rem;
}
.chart__aussage {
    margin: 0 0 .6rem;
    font-size: .85rem; color: var(--text-02);
    max-width: 70ch;
}

/* Die Zeichenfläche scrollt waagrecht, nie der Seitenkörper (iframe-Betrieb). */
.chart__flaeche { overflow-x: auto; }
.chart__svg {
    display: block;
    width: 100%; height: auto;
    min-width: 34rem;
    font-family: inherit;
}

/* SVG-Text färbt fill, nicht color. */
.chart__label { font-size: 12px; fill: var(--text-02); }
.chart__wert { font-size: 12px; font-weight: 600; fill: var(--text-01); }
.chart__wert--klein { font-size: 11px; }
.chart__achse { font-size: 11px; fill: var(--text-03); }
.chart__legende { font-size: 12px; fill: var(--text-02); }

.chart__daten { margin-top: .5rem; font-size: .85rem; }
.chart__daten > summary { color: var(--brand-01); cursor: pointer; font-weight: 600; }
.chart__daten > .tabelle-huelle { margin-top: .5rem; }

/* ---------- Responsive (Desktop/Tablet/Smartphone) ---------- */
@media (max-width: 48rem) {
    .app-body { flex-direction: column; }
    .app-nav { flex-basis: auto; border-right: none; border-bottom: 1px solid var(--field-01); }
    .app-nav__list { flex-direction: row; flex-wrap: wrap; }
    .btn--primary { width: 100%; text-align: center; }
    .app-header__inner { padding: .7rem 1rem; }
    .assistent__inhalt { padding: 1.25rem 1rem 1.5rem; }
    .assistent__navbar { padding: .9rem 1rem; }
    .assistent__navbar .btn { width: auto; }
    .assistent__rail { padding: 1.1rem 1rem 1.25rem; }
    .kpi { flex-basis: 100%; }
    .szenario-tab, .szenario-tab__eingabe { font-size: .82rem; }
    .fund { flex-wrap: wrap; }
    .fund__schalter { margin-left: 0; width: 100%; }
    .ergebnis-kopf, .ergebnis-block { padding-left: 1rem; padding-right: 1rem; }
    .kpi-leiste--ergebnis .kpi { flex-basis: 100%; }
}

/* ---------- Druck: die Zusammenfassung auf 1–2 A4-Seiten (Lastenheft S. 14) ----------
   Alles, was der Bedienung dient, entfällt: Schrittleiste, Kontext-Rail, Fußnavigation,
   Szenario-Tabs, Schaltflächen. Übrig bleibt der Bericht. Der vollständige PDF-Export
   (druckoptimiertes HTML über einen Headless-Browser) folgt im AI-Plan S18.
*/
@media print {
    body { background: #fff; }

    .app-header, .app-nav, .assistent__stepper, .assistent__rail, .assistent__navbar,
    .szenario-tabs, .skip-link, .btn, .alert__schliessen {
        display: none !important;
    }

    .assistent__layout { grid-template-columns: 1fr; }
    .assistent__inhalt { padding: 0; }
    .szenario-panel { padding-top: 0; }

    /* Aufgeklappt drucken: Was hinter einem Aufklapper liegt, fehlt am Papier sonst ganz. */
    details > summary { display: none; }
    details > *:not(summary) { display: block !important; }

    .chart__flaeche { overflow: visible; }
    .chart__svg { min-width: 0; }

    /* Blöcke nicht über den Seitenrand hinweg zerreißen. */
    .ergebnis, .chart, .ergebnis-abschnitt, .tabelle { break-inside: avoid; }
    .ergebnis-vergleich { break-before: page; }

    .ergebnis-kopf { background: var(--brand-02) !important; color: #fff !important; }
    .ergebnis-kopf, .ergebnis-block { border-color: var(--line-strong); }

    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}