/* ============================================================
   LES Website — Layout und Komponenten
   Baut ausschließlich auf tokens.css auf. Keine eigenen Farben,
   keine eigenen Schriftgrößen außerhalb der Skala.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
/* --oben: alles, was oben klebt (Kopf, auf Seiten mit Ankerleiste auch
   diese). Festgehaltene Bereiche und Sprungziele richten sich danach. */
:root { --anker-h: 56px; --oben: var(--kopf-h); }
/* Nur breit klebt die Ankerleiste mit; schmal braucht die Jahresbühne die Höhe. */
@media (min-width: 901px) { html.mit-ankerleiste { --oben: calc(var(--kopf-h) + var(--anker-h)); } }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--oben) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--les-black); color: var(--les-white); }
img { max-width: 100%; display: block; }
/* <picture> aus build.py (Bildvarianten): ohne eigene Box, damit Regeln wie
   .bild img und .aufbau__schicht unverändert auf das <img> greifen. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* ---------- Grundgerüst ------------------------------------ */
.seite { max-width: var(--container-wide); margin: 0 auto; background: var(--surface-page); }
.abschnitt { padding: 88px var(--pad-x); }
.abschnitt--eng { padding: 64px var(--pad-x); }
.abschnitt--dunkel { background: var(--les-black); color: var(--les-white); }
.abschnitt--gedimmt { background: var(--les-black-05); }
.stapel { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-28 { gap: 28px; }
.gap-32 { gap: 32px; } .gap-40 { gap: 40px; } .gap-56 { gap: 56px; }

.raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
/* Überschrift links, Verweis rechts auf der Grundlinie; schmal untereinander (900-px-Regel). */
.flex-enden { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.raster-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.raster-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.raster-haupt { display: grid; grid-template-columns: 1fr 380px; gap: 72px; align-items: start; }

/* ---------- Typografie ------------------------------------- */
.augenbraue {
  font-size: 16px; font-weight: var(--fw-bold); letter-spacing: var(--ls-tracked);
  text-transform: uppercase; color: var(--les-black-60);
}
.abschnitt--dunkel .augenbraue { color: rgba(255,255,255,.6); }
.mikro {
  font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .12em;
  text-transform: uppercase; color: var(--les-black-60); margin: 0;
}
h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-bold); text-wrap: balance; }
.t-hero  { font-size: 68px; line-height: 1.04; letter-spacing: -.02em; max-width: 20ch; }
.t-seite { font-size: 60px; line-height: 1.04; letter-spacing: -.02em; max-width: 22ch; }
.t-gross { font-size: 48px; line-height: 1.1;  letter-spacing: -.01em; max-width: 26ch; }
.t-mittel{ font-size: 44px; line-height: 1.08; max-width: 22ch; }
.t-klein { font-size: 34px; line-height: 1.18; max-width: 30ch; }
.t-karte { font-size: 30px; line-height: 1.15; }
.t-mini  { font-size: 26px; line-height: 1.15; }
.lead { margin: 0; font-size: 22px; line-height: 1.28; max-width: 52ch; text-wrap: pretty; }
.fliess { margin: 0; font-size: 17px; line-height: 1.6; text-wrap: pretty; max-width: 60ch; }
.fliess--gedimmt { color: var(--les-black-80); }
.abschnitt--dunkel .fliess--gedimmt { color: rgba(255,255,255,.72); }
.fliess--klein { font-size: 16px; line-height: 1.5; }
.bildunterschrift { margin: 0; font-size: 13px; line-height: 1.5; color: var(--les-black-60); max-width: 60ch; }
.hinweis-klein { margin: 0; font-size: 13px; line-height: 1.5; color: var(--les-black-60); }

/* ---------- Buttons (DS: Button.jsx) ----------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-brand); font-weight: var(--fw-semibold); font-size: var(--fs-body);
  line-height: 1; letter-spacing: .005em; padding: .72rem 1.4rem;
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--sm { font-size: var(--fs-sm); padding: .5rem 1rem; gap: .4rem; }
.btn--lg { font-size: var(--fs-lead); padding: .95rem 1.9rem; gap: .6rem; }
.btn--block { display: flex; width: 100%; }
.btn--primary { background: var(--les-black); color: var(--les-white); border-color: var(--les-black); }
.btn--primary:hover { background: var(--les-black-80); border-color: var(--les-black-80); }
.btn--secondary { background: transparent; color: var(--les-black); border-color: var(--les-black); }
.btn--secondary:hover { background: var(--les-black); color: var(--les-white); }
.btn--ghost { background: transparent; color: var(--les-black); border-color: transparent; }
.btn--ghost:hover { background: var(--les-black-05); }
.btn--verlauf { background: var(--les-verlauf); color: var(--les-white); border-color: transparent; }
.btn--verlauf:hover { filter: brightness(1.06); }
/* Sekundär auf Verlauf/Schwarz */
.auf-dunkel .btn--secondary, .verlauf-panel .btn--secondary {
  color: var(--les-white); border-color: var(--les-white);
}
.auf-dunkel .btn--secondary:hover, .verlauf-panel .btn--secondary:hover {
  background: var(--les-white); color: var(--les-black);
}
.btn-reihe { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Badge (DS: Badge.jsx) -------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: var(--fw-semibold); font-size: var(--fs-footnote); letter-spacing: .02em;
  padding: .28rem .7rem; border-radius: var(--radius-pill);
  background: var(--les-black-05); color: var(--text-body);
  border: 1px solid var(--border-subtle); white-space: nowrap;
}
.badge--sm { font-size: var(--fs-micro); padding: .15rem .5rem; }
.badge--solid { background: var(--les-black); color: var(--les-white); border-color: var(--les-black); }
.badge--warning { background: rgba(245,150,85,.18); color: #b5641f; border-color: rgba(245,150,85,.45); }
.badge--info { background: rgba(140,180,210,.18); color: #3f6f95; border-color: rgba(140,180,210,.45); }
.badge__punkt { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--les-black-40); }
.badge--warning .badge__punkt { background: var(--les-orange); }
.badge--info .badge__punkt { background: var(--les-blau); }

/* ---------- Formulare (DS: Input/Select/Checkbox) ---------- */
.feld { display: flex; flex-direction: column; gap: .4rem; }
.feld[hidden] { display: none; }
.feld > label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.feld input, .feld select, .feld textarea {
  font-family: var(--font-brand); font-size: var(--fs-body); color: var(--text-body);
  background: var(--surface-card); border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md); padding: .7rem .85rem; outline: none; width: 100%;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.feld textarea { line-height: 1.5; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--les-black); box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.feld select {
  max-width: 100%; text-overflow: ellipsis;
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 18px 18px;
}
.feld__hinweis { font-size: var(--fs-footnote); color: var(--text-muted); }
.pflicht { color: var(--les-rot); font-weight: var(--fw-semibold); }
.kontrollkasten { display: inline-flex; align-items: flex-start; gap: .6rem; cursor: pointer; font-size: var(--fs-body); }
.kontrollkasten input { position: absolute; opacity: 0; width: 0; height: 0; }
.kontrollkasten__box {
  width: 20px; height: 20px; flex: none; margin-top: 2px; border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-default); background: var(--surface-card);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.kontrollkasten__box svg { opacity: 0; }
.kontrollkasten input:checked + .kontrollkasten__box { background: var(--les-black); border-color: var(--les-black); }
.kontrollkasten input:checked + .kontrollkasten__box svg { opacity: 1; }
.kontrollkasten input:focus-visible + .kontrollkasten__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.formular {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 40px; display: flex; flex-direction: column; gap: 22px;
}
/* Zwei Felder nebeneinander nur, wenn jedes mindestens 260 px bekommt —
   sonst brechen die Auswahlknöpfe in jedem Wort um. */
.feld-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }

/* ---------- Verlauf-Panel (DS: GradientPanel.jsx) ---------- */
.verlauf-panel {
  position: relative; background: var(--les-verlauf); color: var(--les-white);
  padding: 40px; border-radius: 0 var(--radius-klammer-lg) var(--radius-klammer-lg) 0;
  overflow: hidden;
}
.verlauf-panel .augenbraue { color: rgba(255,255,255,.85); }
.verlauf-panel .fliess { color: rgba(255,255,255,.92); }

/* ---------- Visuelle Klammer (CD §7) ----------------------- */
.klammer    { border-radius: var(--radius-md) var(--radius-klammer) var(--radius-klammer) var(--radius-md); }
.klammer-lg { border-radius: var(--radius-md) var(--radius-klammer-lg) var(--radius-klammer-lg) var(--radius-md); }

/* ---------- Kopf ------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  height: var(--kopf-h); padding: 0 var(--pad-x);
  background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.kopf__nav { display: flex; align-items: center; gap: 32px; }
.kopf__nav a {
  font-size: 16px; padding-bottom: 4px; border-bottom: 2px solid transparent;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.kopf__nav a[aria-current="page"] { font-weight: var(--fw-semibold); border-bottom-color: var(--les-black); }
.kopf__nav a:hover { border-bottom-color: var(--les-black-20); }
.kopf__caret { font-size: 10px; color: var(--les-black-40); }
.kopf__rechts { display: flex; align-items: center; gap: 20px; min-width: 0; }
.kopf > .logo { flex: none; }
.sprachen { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--fw-bold); letter-spacing: .08em; }
.sprachen a { color: var(--les-black-40); border-bottom: 2px solid transparent; padding-bottom: 2px; }
.sprachen a[aria-current="true"] { color: var(--les-black); border-bottom-color: var(--les-black); }
.sprachen span { color: var(--les-black-40); }
/* Hinweis „English coming soon“ (site.js), kurz unter dem EN-Verweis. */
.bald-hinweis {
  position: fixed; z-index: 60; padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--les-black); color: var(--les-white); font-size: 14px; font-weight: 600;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease;
}
.bald-hinweis--an { opacity: 1; transform: none; }
/* Sprachwahl auf dem Telefon: „DE ▾" klappt die Sprachen auf. */
.sprachwahl { display: none; position: relative; }
.sprachwahl summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 3px;
  font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .04em; padding: 8px 2px;
}
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl[open] summary svg { transform: rotate(180deg); }
.sprachwahl__liste {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  min-width: 190px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
  background: var(--les-white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 50;
}
.sprachwahl__liste a { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 15px; }
.sprachwahl__liste a:hover { background: var(--les-black-05); }
.sprachwahl__liste a[aria-current="true"] { font-weight: var(--fw-semibold); }
.sprachwahl__liste span { color: var(--les-black-40); font-size: 13px; margin-left: 4px; }
/* Seitenwahl — ersetzt auf schmalen Geräten die Hauptnavigation.
   Sie trägt den Namen der aktuellen Seite, sagt also zugleich, wo man ist. */
.seitenwahl {
  display: none; align-items: center; gap: 8px;
  font-family: var(--font-brand); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  line-height: 1; padding: .55rem .8rem .55rem 1rem;
  border: 1.5px solid var(--les-black); border-radius: var(--radius-pill);
  background: transparent; color: var(--les-black); cursor: pointer;
  white-space: nowrap; flex: 0 1 auto; min-width: 0;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.seitenwahl__hier {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro); text-transform: uppercase; opacity: .55;
}
/* overflow: hidden für die Auslassungspunkte schneidet bei line-height 1
   die Umlautpunkte über Versalien ab (Ü in „Über uns"): Luft nach oben und
   unten innerhalb des Felds, per negativem Rand ohne Höhenzuwachs. */
.seitenwahl__seite {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
  padding: .2em 0; margin: -.2em 0;
}
.seitenwahl__pfeil { flex: none; transition: transform var(--dur-base) var(--ease-out); }
.seitenwahl:hover { background: var(--les-black); color: var(--les-white); }
.seitenwahl[aria-expanded="true"] { background: var(--les-black); color: var(--les-white); }
.seitenwahl[aria-expanded="true"] .seitenwahl__pfeil { transform: rotate(180deg); }
/* Beratung anfragen im Kopf: Schaltfläche mit Text, solange daneben die
   Seitenwahl ungekürzt passt (längster Name: Funktionsprinzip),
   darunter ein runder schwarzer Knopf mit Symbol und Ring im LES-Verlauf. */
.kopf__beratung-symbol { display: none; flex: none; }
/* Breit: schwarze Schaltfläche mit Rand im LES-Verlauf (innen Schwarz,
   der Verlauf nur im Rand) — dieselbe Idee wie der runde Knopf schmal. */
/* Beim Überfahren dreht sich der Verlauf (--dreh). Farben wie
   --les-verlauf (tokens.css), aber als geschlossener Kreis (konisch):
   Ein linearer Verlauf mit zwei verschiedenen Enden klappt beim Drehen
   um. Die Drehung läuft dauerhaft und wird nur angehalten, damit sie beim
   Verlassen stehen bleibt, statt auf den Anfang zurückzuspringen. */
@property --dreh { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes beratung-dreh { to { --dreh: 360deg; } }
.kopf .kopf__beratung {
  --beratung-verlauf: conic-gradient(from calc(200deg + var(--dreh)), #cd5069, #f59655, #b7a05a, #64c3be, #6aa9d8, #9182be, #cd5069);
  --beratung-innen: var(--les-black);
  border: 2px solid transparent;
  background: linear-gradient(var(--beratung-innen), var(--beratung-innen)) padding-box, var(--beratung-verlauf) border-box;
}
.kopf .kopf__beratung:hover { --beratung-innen: var(--les-black-80); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kopf .kopf__beratung { animation: beratung-dreh 3s linear infinite paused; }
  .kopf .kopf__beratung:hover,
  .kopf .kopf__beratung:focus-visible { animation-play-state: running; }
}
/* Ring aus dem Skript (siehe site.js): liegt genau auf dem Rand. */
.kopf__beratung-ring { display: none; }
@property --lauf { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes beratung-lauf { to { --lauf: 60; } }
@media (min-width: 821px) {
  .kopf .kopf__beratung--ring { position: relative; animation: none; }
  .kopf .kopf__beratung--ring:not(:active):not([aria-current="page"]) {
    background: var(--beratung-innen);
  }
  .kopf .kopf__beratung--ring:not(:active):not([aria-current="page"]) .kopf__beratung-ring {
    display: block; position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px);
    overflow: visible; pointer-events: none; fill: none;
  }
  .kopf__beratung-ring path {
    stroke-dasharray: 1.15 58.85;
    /* In px (= Nutzereinheiten des SVG): Firefox nimmt calc() ohne Einheit
       hier nicht an und legte alle Striche auf die Startposition. */
    stroke-dashoffset: calc(-1px * (var(--i) + var(--lauf)));
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .kopf .kopf__beratung--ring .kopf__beratung-ring { animation: beratung-lauf 4s linear infinite paused; }
    .kopf .kopf__beratung--ring:hover .kopf__beratung-ring,
    .kopf .kopf__beratung--ring:focus-visible .kopf__beratung-ring { animation-play-state: running; }
  }
}
/* Gedrückt und auf der Kontaktseite: ganz im Verlauf. Breit als Fläche
   der gerade Verlauf (--les-verlauf) — der konische hätte auf der langen
   Pille einen Wirbel in der Mitte. Der runde Knopf nimmt den konischen. */
.kopf .kopf__beratung:active,
.kopf .kopf__beratung[aria-current="page"] {
  background: var(--les-verlauf) border-box; color: var(--les-white); animation: none;
}

/* Untermenü */
.kopf__punkt { position: relative; }
.untermenu {
  position: absolute; top: 100%; left: -16px; min-width: 260px; padding: 10px;
  background: var(--les-white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  display: none; flex-direction: column; gap: 2px;
}
.kopf__punkt:hover .untermenu, .kopf__punkt:focus-within .untermenu { display: flex; }
.untermenu a { font-size: 15px; padding: 8px 12px; border-radius: var(--radius-sm); border-bottom: 0; }
.untermenu a:hover { background: var(--les-black-05); border-bottom: 0; }

/* Seitenmenü mobil */
.mobilmenu {
  display: none; flex-direction: column; gap: 4px;
  padding: 16px var(--pad-x) 28px; border-bottom: 1px solid var(--border-subtle);
  background: var(--les-white);
  position: sticky; top: var(--kopf-h); z-index: 39;
  /* Sticky und höher als das Fenster ⇒ Ende unerreichbar; daher eigener Scrollbereich. */
  max-height: calc(100vh - var(--kopf-h)); max-height: calc(100dvh - var(--kopf-h));
  overflow-y: auto; overscroll-behavior: contain;
}
.mobilmenu.offen { display: flex; }
.mobilmenu > * { flex-shrink: 0; }
.mobilmenu a {
  font-size: 18px; padding: 10px 0 10px 14px;
  border-bottom: 1px solid var(--border-subtle); border-left: 2px solid transparent;
}
.mobilmenu a.unter { font-size: 15px; padding-left: 30px; color: var(--les-black-60); }
.mobilmenu a[aria-current="page"] { font-weight: var(--fw-semibold); border-left-color: var(--les-black); }
.mobilmenu .btn { margin-top: 16px; }
/* Der Sprachschalter wandert erst auf dem Telefon ins Menü — im Kopf
   braucht die Seitenwahl dort den Platz. */

/* ---------- Logo ------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: var(--space-5); color: var(--les-black); }
.logo svg { height: 30px; width: auto; display: block; }
.logo__wort {
  font-weight: var(--fw-bold); font-size: 10px; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.04; white-space: pre-line;
}
.logo__claim { font-weight: var(--fw-bold); font-size: 9px; line-height: 1.1; white-space: pre-line; }
.logo--hell { color: var(--les-white); }

/* ---------- Banner ----------------------------------------- */
/* Kopfbild als Kasten in Kartenform (Klammer rechts), ohne grauen
   Streifen dahinter — sonst verschwimmt ein graues Rendering (PH-12) mit
   dem Streifen zu einem großen grauen Kasten ohne Kontur. */
.banner { padding: 16px var(--pad-x) 8px; }
.banner > * { height: 400px; }
.banner .bild, .banner .ph {
  border-radius: var(--radius-md) var(--radius-klammer-lg) var(--radius-klammer-lg) var(--radius-md);
}
/* Breit: Die Höhe des Kopfbilds folgt dem Seitenverhältnis der Datei
   (2400 × 690). Ohne diese Zeile ist .bild { height: 100% } wirksam, die
   Höhe hängt am geladenen Bild — beim ersten Laden springt der Text darunter
   um etwa 260 px (Layout-Sprung CLS 0,10 bis 0,14). Schmal setzt
   .banner > * unten feste 190 px. */
@media (min-width: 901px) {
  .banner > .bild { height: auto; aspect-ratio: 2400 / 690; }
}

/* ---------- Seitennavigation (Ankerleiste) ----------------- */
.ankerleiste {
  display: flex; align-items: center; gap: 28px; padding: 0 var(--pad-x); height: var(--anker-h);
  border-bottom: 1px solid var(--border-subtle); overflow-x: auto; scrollbar-width: none;
  background: var(--les-white);
}
/* Breit klebt sie unter dem Kopf, im selben Glas wie dieser. */
@media (min-width: 901px) {
  .ankerleiste, .ankerleiste.schwapp-behaelter {
    position: sticky; top: var(--kopf-h); z-index: 38;
    background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
}
.ankerleiste::-webkit-scrollbar { display: none; }
.ankerleiste > * { flex: none; white-space: nowrap; }
.ankerleiste a { font-size: 16px; color: var(--les-black-80); white-space: nowrap; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.ankerleiste a:hover, .ankerleiste a.aktiv { color: var(--les-black); border-bottom-color: var(--les-black); }

/* ---------- Merkmalliste (Randspalte) ---------------------- */
.merkmale { display: flex; flex-direction: column; border-top: 2px solid var(--les-black); }
.merkmale > div { padding: 18px 0; border-bottom: 1px solid var(--border-subtle); }
.merkmale p:first-child { margin: 0 0 4px; font-size: 17px; font-weight: var(--fw-bold); }
.merkmale p:last-child { margin: 0; font-size: 15px; line-height: 1.5; color: var(--les-black-60); }
/* Nur Titel: die kurzen Punkte, fett, ohne erklärenden Satz darunter. */
.merkmale--nur-titel p, .merkmale--nur-titel p:last-child { margin: 0; font-size: 17px; line-height: 1.4; font-weight: var(--fw-bold); color: var(--les-black); }

/* ---------- Datenzeilen ------------------------------------ */
.daten { display: flex; flex-direction: column; border-top: 2px solid var(--les-black); }
.daten div {
  display: flex; justify-content: space-between; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--les-black-20); font-size: 16px;
}
.daten span:first-child { color: var(--les-black-60); }
.daten span:last-child { font-weight: var(--fw-semibold); text-align: right; }
.daten .offen { color: var(--les-black-60); font-weight: var(--fw-semibold); }

/* ---------- Aufzählung im Kartenfuß ------------------------ */
.punkte { display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); }
.punkte p { margin: 0; padding: 12px 0; font-size: 16px; line-height: 1.45; border-bottom: 1px solid var(--border-subtle); }

/* ---------- Karten ----------------------------------------- */
.karte {
  display: flex; flex-direction: column; background: var(--les-white); color: var(--les-black);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden;
}
.karte--klammer {
  --karte-r: var(--radius-klammer-lg);
  border: 0; border-radius: var(--radius-md) var(--karte-r) var(--karte-r) var(--radius-md);
}
/* Karte mit feinem Rand; --klammer-klein = kleinere Rundung der Klammerecke. */
.karte--umrandet { border: 1px solid var(--border-subtle); }
.karte--klammer-klein { --karte-r: var(--radius-klammer); }
/* Kartenbild: im Seitenverhältnis der Renderings (4:3) statt fester Höhe —
   sonst ist es auf dem Desktop kleiner als auf dem Telefon. */
.karte__bild { padding: 16px; height: auto !important; aspect-ratio: 4 / 3; }
.karte__bild--eng { padding: 14px; }
/* Liegt das Bild an der großen Rundung der Karte, läuft seine Ecke mit
   (Radius der Karte minus Innenabstand); sonst bleibt es wie jedes Bild. */
.karte--klammer > .karte__bild .bild,
.karte--klammer > .karte__bild .ph { border-top-right-radius: calc(var(--karte-r) - 14px); }
.karte__text { padding: 32px 40px 40px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.karte__text--eng { padding: 24px 28px 32px; gap: 16px; }
/* Karten in einem Raster strecken sich auf die Zeilenhöhe (.raster-2 richtet
   sonst oben aus), damit nebeneinanderstehende Karten gleich hoch sind. */
.raster-2 > .karte, .raster-3 > .karte, .raster-4 > .karte { align-self: stretch; }
/* Karten nebeneinander sind gleich hoch; die Aufzählung bzw. Schaltfläche
   am Ende sitzt unten, auch wenn der Text darüber kürzer ist. */
.karte__text > .punkte:last-child,
.karte__text > .btn-reihe:last-child,
.karte__text > .btn:last-child,
.karte__text > .daten:last-child { margin-top: auto; }
.schritt {
  background: var(--les-white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 10px;
}
.schritt__nr { font-size: 34px; font-weight: var(--fw-bold); line-height: 1; }

/* ---------- Kasten „Für Planung und Energieberatung" -------- */
.fachkasten {
  padding: 20px 24px; border: 1px solid var(--les-black);
  border-radius: var(--radius-md) var(--radius-klammer) var(--radius-klammer) var(--radius-md);
}
.fachkasten p + p { margin-top: 6px; }
/* Verweis als Wert in einer Datenzeile (z. B. „Ihren Fall besprechen“):
   Unterstrich im LES-Verlauf, beim Überfahren etwas kräftiger. */
a.daten__link {
  padding-bottom: 2px;
  background: var(--les-verlauf) left bottom / 100% 2px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size var(--dur-base) var(--ease-out);
}
a.daten__link:hover { background-size: 100% 3px; }
.fachkasten a.weiter {
  display: inline-block; margin-top: 12px; font-size: 16px; font-weight: var(--fw-semibold);
  border-bottom: 1.5px solid var(--les-black); padding-bottom: 1px;
}

/* Bildplatz mit fester Höhe im Fragment, aber gefülltem Bild: nimmt das
   Seitenverhältnis des Bildes an (setzt build.py), höchstens 80 % der
   Fensterhöhe — so ist ein Bild auf dem Desktop nicht kleiner als mobil. */
.bildplatz { width: 100%; height: auto; max-height: min(80vh, 780px); }
/* Spalte mit Rollo-Bild neben längerem Text: bleibt stehen, solange der
   Text daneben weiterläuft (site.js setzt die Klasse). */
.rollo-spalte { position: sticky; top: calc(var(--oben) + 16px); align-self: start; }
.rollo-halt--an > :first-child { position: sticky; top: calc(var(--oben) + 16px); }

/* ---------- Bild (gefüllter Platzhalter) --------------------
   Übernimmt die Maße des Platzhalters, den es ersetzt. */
.bild {
  position: relative; width: 100%; height: 100%; min-height: 110px; margin: 0;
  border-radius: var(--radius-md); overflow: hidden; background: var(--les-black-05);
  /* Vorschaubild (inline aus build.py), eingepasst wie das Bild darüber. */
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Freigestelltes Motiv: einpassen statt beschneiden. Der Grund der Datei
   ist dasselbe Grau wie .bild, der Rand verschwindet also. */
.bild--frei img { object-fit: contain; }
.bild--frei { background-size: contain; }
/* Überlagerung (Pfeile): gleiche Box, gleiche Einpassung wie das Grundbild,
   deshalb deckungsgleich. */
.bild img.bild__ueber { position: absolute; inset: 0; pointer-events: none; }
/* Rollo: Die Überlagerung wird von oben nach unten aufgezogen, gesteuert
   über --p (0 = offen, 1 = ganz zu). Ohne JavaScript steht sie ganz. */
.bild--rollo img.bild__ueber { clip-path: inset(0 0 calc((1 - var(--p, 1)) * 100%) 0); }
/* Schräg, parallel zur Wand im Bild (data-neigung, --yl/--yr aus site.js). */
.bild--rollo[data-neigung] img.bild__ueber {
  clip-path: polygon(0 0, 100% 0, 100% var(--yr, 100%), 0 var(--yl, 100%));
}
/* Von unten: die Ebene wächst vom Boden her, etwa eine Wand, die gebaut wird. */
.bild--rollo-hoch img.bild__ueber { clip-path: inset(calc((1 - var(--p, 1)) * 100%) 0 0 0); }
/* Energiefluss der Jahresbühne (fluss_svg in build.py). Strom: das PV-Feld
   leuchtet, ein Schimmer läuft darüber, im Modulfeld sammelt es sich und
   läuft als orange Punkte in den Speicher hinein, bis in die Füllung. Wärme: Schein und Wellen, die sich
   im Wohnraum ausbreiten. Füllstand: Balken am Speicher. */
.bild .fluss { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fluss path { fill: none; }
.fluss__pv { fill: #8cc8f0; opacity: 0; }
.fluss__schimmer { opacity: 0; }
.fluss__knoten { fill: #cfe9ff; opacity: 0; filter: drop-shadow(0 0 6px rgba(140,200,240,.95)); }
.fluss__leitung { stroke: rgba(255,255,255,.55); stroke-width: 3; stroke-linecap: round; }
.fluss__strom {
  stroke: #f59655; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1 22;
  filter: drop-shadow(0 0 4px rgba(245,150,85,.9));
  animation: fluss-strom 1s linear infinite;
}
@keyframes fluss-strom { to { stroke-dashoffset: -23; } }
@keyframes fluss-schimmer { from { transform: translateX(0); } to { transform: translateX(920px); } }
.fluss__speicher {
  fill: rgba(255,255,255,.14); stroke: #fff; stroke-width: 2.5; stroke-linejoin: round;
  filter: drop-shadow(0 0 1.5px rgba(0,0,0,.45));
}
/* Säulen im Obergeschoss: hinter der Fassade nur angedeutet. */
.fluss__speicher--saeule { fill: rgba(255,255,255,.18); stroke-dasharray: 6 5; }
.fluss__fuellung {
  /* Halbtransparent über der ganzen Gerätefront: man sieht, dass das ganze
     Gerät lädt, nicht nur ein Stab im Inneren. */
  fill: #e8603c; fill-opacity: .72; transform-box: fill-box; transform-origin: 50% 100%;
  stroke: #fff; stroke-width: 2; stroke-opacity: .9;
  transform: scaleY(var(--fuellung, .5));
}
.fluss__waerme { opacity: 0; }
.fluss__welle {
  /* Kräftiges Rot-Orange mit hellem Saum: bleibt auch vor dem warm
     beleuchteten Wohnraum (und mit Nachtmodus) sichtbar. */
  fill: none; stroke: #e8603c; stroke-width: 6; opacity: 0;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.95));
  transform-box: fill-box; transform-origin: center;
}
@keyframes fluss-welle {
  0%   { transform: scale(.12); opacity: 0; }
  15%  { opacity: var(--welle, .7); }
  100% { transform: scale(1);   opacity: 0; }
}
/* Laden: nur aufwärts, kurz voll stehen, dann blendet die Füllung aus und
   die Schleife beginnt sichtbar von vorn. */
@keyframes fluss-steigt {
  0%   { transform: scaleY(.25); opacity: 1; }
  75%  { transform: scaleY(.9);  opacity: 1; }
  90%  { transform: scaleY(.9);  opacity: 1; }
  100% { transform: scaleY(.9);  opacity: 0; }
}
/* Milder Herbsttag: lädt langsamer und weniger, gibt zugleich ab. */
@keyframes fluss-steigt-sacht {
  0%   { transform: scaleY(.45); opacity: 1; }
  80%  { transform: scaleY(.7);  opacity: 1; }
  92%  { transform: scaleY(.7);  opacity: 1; }
  100% { transform: scaleY(.7);  opacity: 0; }
}
/* Entladen: nur abwärts, spiegelbildlich zum Laden. */
@keyframes fluss-sinkt {
  0%   { transform: scaleY(.7);  opacity: 1; }
  75%  { transform: scaleY(.15); opacity: 1; }
  90%  { transform: scaleY(.15); opacity: 1; }
  100% { transform: scaleY(.15); opacity: 0; }
}
/* Sommer: PV-Feld leuchtet, lädt kräftig, gibt nichts ab. */
.fluss--sommer .fluss__pv { opacity: .22; }
.fluss--sommer .fluss__schimmer { opacity: 1; animation: fluss-schimmer 2.6s linear infinite; }
.fluss--sommer .fluss__knoten { opacity: 1; }
.fluss--sommer .fluss__fuellung { animation: fluss-steigt 5s ease-in-out infinite; }
/* Milder Herbsttag: Feld leuchtet schwach, lädt etwas, strahlt etwas ab. */
.fluss--herbst .fluss__pv { opacity: .1; }
.fluss--herbst .fluss__schimmer { opacity: .5; animation: fluss-schimmer 4.4s linear infinite; }
.fluss--herbst .fluss__knoten { opacity: .6; }
.fluss--herbst .fluss__strom { animation-duration: 2.6s; opacity: .7; stroke-width: 5; }
.fluss--herbst .fluss__waerme { opacity: .35; }
.fluss--herbst .fluss__welle { --welle: .4; animation: fluss-welle 3.6s ease-out infinite; }
.fluss--herbst .fluss__fuellung { animation: fluss-steigt-sacht 8s ease-in-out infinite; }
/* Kalter Wintertag: Feld dunkel, kein Strom; strahlt kräftig ab, entlädt. */
.fluss--winter .fluss__strom { display: none; }
.fluss--winter .fluss__leitung { stroke: rgba(255,255,255,.25); stroke-dasharray: 6 8; }
.fluss--winter .fluss__waerme { opacity: .75; }
.fluss--winter .fluss__welle { --welle: .85; stroke-width: 8; animation: fluss-welle 2.4s ease-out infinite; }
.fluss--winter .fluss__fuellung { animation: fluss-sinkt 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .fluss__strom, .fluss__schimmer, .fluss__welle, .fluss__fuellung { animation: none !important; }
  .fluss--herbst .fluss__welle, .fluss--winter .fluss__welle { opacity: .5; transform: scale(.6); }
  .fluss--sommer .fluss__fuellung { transform: scaleY(.8); }
  .fluss--herbst .fluss__fuellung { transform: scaleY(.6); }
  .fluss--winter .fluss__fuellung { transform: scaleY(.3); }
}

/* Stapel: Ebenen rücken beim Scrollen zusammen; den Weg in Pixeln setzt
   das Skript je Ebene als --y. */
.bild--stapel img.bild__ueber { transform: translateY(var(--y, 0px)); will-change: transform; }
/* Herkunft steht im Bild: Ein Rendering bleibt als Rendering erkennbar. */
.bild__herkunft {
  position: absolute; left: 10px; bottom: 10px; padding: 3px 9px;
  border-radius: var(--radius-pill); background: rgba(0,0,0,.62); color: var(--les-white);
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(2px);
}
@media print {
  .bild__herkunft { position: static; background: none; color: var(--les-black-60); padding: 4px 0; }
}

/* ---------- Platzhalter (DS: Platzhalter.dc.html) ---------- */
.ph {
  position: relative; width: 100%; height: 100%; min-height: 110px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 16px;
  background: var(--les-black-05);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.045) 0 8px, rgba(0,0,0,0) 8px 18px);
  border: 1.5px dashed var(--les-black-40); border-radius: var(--radius-md); overflow: hidden;
}
.ph__kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ph__nr {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--les-black); color: var(--les-white); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.ph__art { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--les-black-60); }
.ph__label { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--les-black-40); }
.ph__motiv { margin: 0; font-size: 14px; line-height: 1.4; color: var(--les-black); max-width: 52ch; text-wrap: pretty; }
.ph__format { margin: 0; font-size: 12px; line-height: 1.4; color: var(--les-black-60); }

/* ---------- Diagramm-Platzhalter --------------------------- */
.diagramm {
  border: 1.5px dashed var(--les-black-40); border-radius: var(--radius-md);
  background: var(--les-black-05); padding: 28px 28px 20px;
}
.diagramm__titel { margin: 0 0 4px; font-size: 17px; font-weight: var(--fw-bold); }
.diagramm__unter { margin: 0 0 20px; font-size: 13px; line-height: 1.5; color: var(--les-black-60); }
.diagramm__legende { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.diagramm__legende span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--les-black-80); }
.diagramm__koerper { display: flex; gap: 14px; }
.diagramm__yachse { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 12px; color: var(--les-black-60); }
.diagramm__flaeche {
  position: relative; border-left: 1.5px solid var(--les-black); border-bottom: 1.5px solid var(--les-black);
  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,.10) 0 1px, rgba(0,0,0,0) 1px 60px);
}
/* Stundenachse 0–24 Uhr: fünf Marken genau bei 0, 6, 12, 18, 24 Uhr; die
   äußeren bündig am Rand, die inneren mittig über ihrer Stunde. */
.diagramm__xachse { position: relative; height: 1.5em; font-size: 12px; color: var(--les-black-60); }
.diagramm__xachse span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.diagramm__xachse span:nth-child(1) { left: 0; transform: none; }
.diagramm__xachse span:nth-child(2) { left: 25%; }
.diagramm__xachse span:nth-child(3) { left: 50%; }
.diagramm__xachse span:nth-child(4) { left: 75%; }
.diagramm__xachse span:nth-child(5) { left: 100%; transform: translateX(-100%); }
/* Gerechnetes Diagramm (kein Platzhalter mehr): ruhiger Rahmen. */
.diagramm--fertig { border: 1px solid var(--border-subtle); background: var(--les-white); }
/* Ladestand über ein Jahr (build.py: ladezustand_diagramm). Das SVG ist
   verzerrbar (preserveAspectRatio none), Linien bleiben dünn
   (non-scaling-stroke); Beschriftung liegt im HTML. */
.ladestand__flaeche { background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,.08) 0 1px, rgba(0,0,0,0) 1px 25%); }
.ladestand__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ladestand__svg * { vector-effect: non-scaling-stroke; }
.ladestand__heiz { fill: rgba(0,0,0,.05); }
.ladestand__raster { stroke: rgba(0,0,0,.08); stroke-width: 1; }
.ladestand__reserve { stroke: var(--les-black-60); stroke-width: 1.25; stroke-dasharray: 5 4; }
.ladestand__band { fill: rgba(232,96,60,.16); }
.ladestand__linie { fill: none; stroke: #e8603c; stroke-width: 2; stroke-linejoin: round; }
.ladestand__heiztext {
  position: absolute; top: 8px; text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--les-black-60);
}
.ladestand__monate, .ladestand__balken { display: grid; font-size: 12px; color: var(--les-black-60); }
.ladestand__monate span { text-align: center; white-space: nowrap; }
.ladestand__monate b { font-weight: inherit; }
.ladestand__monate i { display: none; font-style: normal; }
@media (max-width: 600px) {
  .ladestand__monate b { display: none; }
  .ladestand__monate i { display: inline; }
}
.ladestand__balken { height: 44px; gap: 0 2px; align-items: end; margin-top: 6px; border-bottom: 1px solid var(--les-black-40); }
.ladestand__balken span { position: relative; height: 100%; }
.ladestand__balken b { position: absolute; left: 0; right: 0; bottom: 0; background: #e8603c; }
.ladestand__balken--abgabe b { background: var(--les-black-60); }
.ladestand__zeichen { width: 22px; height: 10px; flex: none; }
.ladestand__zeichen--band { background: rgba(232,96,60,.16); border-top: 2px solid #e8603c; }
.ladestand__zeichen--heiz { background: rgba(0,0,0,.08); }
.ladestand__zeichen--reserve { height: 0; border-top: 1.5px dashed var(--les-black-60); }
.ladestand__ergebnis { margin: 18px 0 8px; font-size: 14px; font-weight: 600; line-height: 1.45; }
.ladestand__annahmen { margin: 0; padding-left: 1.1em; font-size: 13px; line-height: 1.5; color: var(--les-black-60); }
.ladestand__annahmen li + li { margin-top: 2px; }
/* Lastgang über einen Tag (build.py: lastgang_diagramm). */
.lastgang__flaeche { background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,.08) 0 1px, rgba(0,0,0,0) 1px 25%); }
.lastgang__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lastgang__svg * { vector-effect: non-scaling-stroke; }
.lastgang__ladung { fill: rgba(232,96,60,.35); }
/* Netzbezug grau, damit er sich von der schwarzen Verbrauchslinie abhebt */
.lastgang__bezug { fill: rgba(0,0,0,.22); }
.lastgang__pv { fill: none; stroke: var(--les-black-40); stroke-width: 1.5; stroke-dasharray: 4 3; }
.lastgang__last { fill: none; stroke: var(--les-black); stroke-width: 2; stroke-linejoin: round; }
.lastgang__zeichen { width: 22px; height: 10px; flex: none; }
.lastgang__zeichen--last { height: 0; border-top: 2px solid var(--les-black); }
.lastgang__zeichen--pv { height: 0; border-top: 1.5px dashed var(--les-black-40); }
.lastgang__zeichen--ladung { background: rgba(232,96,60,.35); }
.lastgang__zeichen--bezug { background: rgba(0,0,0,.22); }
/* Spitzenlast Wärmepumpe gegen GreenHeater (build.py: spitzenlast_diagramm). */
.spitze__wpstrom { fill: rgba(0,0,0,.08); }
.spitze__wp { fill: none; stroke: var(--les-black); stroke-width: 2; stroke-linejoin: round; }
.spitze__gh { fill: none; stroke: #e8603c; stroke-width: 2.5; stroke-linejoin: round; }
.spitze__zeichen--wp { height: 0; border-top: 2px solid var(--les-black); }
.spitze__zeichen--gh { height: 0; border-top: 2.5px solid #e8603c; }
.spitze__zeichen--strom { background: rgba(0,0,0,.08); }
.spitze__hinweis { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--les-black-60); }
.spitze__zahlen { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.spitze__zahlen div { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1.5px solid var(--les-black); }
.spitze__zahlen b { font-size: 24px; line-height: 1.1; }
.spitze__zahlen span { font-size: 12px; line-height: 1.35; color: var(--les-black-60); }

/* ---------- Bühne Funktionsprinzip ------------------------- */
.buehne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.phase { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.phase__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.phase__zaehler { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--les-black-60); }
.phase__punkte { display: flex; gap: 5px; }
.phase__punkte i { width: 22px; height: 3px; background: var(--les-black-20); display: block; }
.phase__punkte i.an { background: var(--les-black); }
.phase__bild { height: 280px; padding: 14px; }
.phase__text { padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.phase__text .daten { border-top-width: 1px; }
.phase__text .daten div { padding: 9px 0; font-size: 15px; border-bottom-color: var(--border-subtle); }

/* ---------- Zitat ------------------------------------------ */
blockquote { margin: 0; padding-left: 28px; border-left: 2px solid var(--les-black); }
blockquote p { margin: 0 0 16px; font-size: 26px; line-height: 1.28; font-weight: var(--fw-bold); text-wrap: pretty; }
blockquote footer { font-size: 15px; color: var(--les-black-60); }

/* ---------- Gesperrter Block (CE) -------------------------- */
.gesperrt {
  border: 1.5px dashed var(--les-orange); border-radius: var(--radius-md);
  background: rgba(245,150,85,.06); padding: 22px 24px;
}
.gesperrt__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gesperrt__symbol {
  flex: none; width: 76px; height: 56px; border: 1.5px dashed var(--les-black-40);
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .08em; text-align: center;
  color: var(--les-black-40); line-height: 1.2;
}
[data-freigabe="offen"] { display: none; }

/* Kontaktformular ohne JavaScript: Hinweis steht im HTML, site.js blendet
   ihn aus und gibt den Absenden-Knopf frei. */
.ohne-js { font-weight: var(--fw-bold); }
.ohne-js[hidden] { display: none; }

/* Nach erfolgreichem Versand ersetzt dieser Block das Formular (site.js). */
.formular[hidden] { display: none; }
.formular-danke {
  display: grid; gap: 14px; padding: 28px 28px 28px 76px; position: relative;
  border: 1.5px solid var(--positive); border-radius: var(--radius-lg);
  background: rgba(100,195,190,.10);
}
.formular-danke[hidden] { display: none; }
.formular-danke::before {
  content: ""; position: absolute; left: 24px; top: 26px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--positive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.formular-danke:focus { outline: none; }
.formular-danke:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.formular-danke__titel { margin: 0; font-size: 24px; line-height: 1.2; font-weight: var(--fw-bold); }
.formular-danke .fliess { margin: 0; }
@media (max-width: 560px) {
  .formular-danke { padding: 74px 20px 22px; }
  .formular-danke::before { left: 20px; top: 22px; }
}
/* Fehler beim Versand: deutlicher als der übrige Kleintext */
.hinweis-klein--fehler { color: var(--les-black); font-weight: var(--fw-bold);
  border-left: 3px solid var(--critical); padding-left: 10px; }

/* ---------- Redaktionshinweis (nur intern sichtbar) -------- */
.notiz {
  display: flex; align-items: flex-start; gap: 14px; margin: 0 var(--pad-x) 40px;
  padding: 16px 20px; background: #fbfbfb; border: 1px dashed var(--les-black-20);
  border-radius: var(--radius-md);
}
.notiz::before { content: ""; flex: none; margin-top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--les-orange); }
.notiz p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--les-black-80); }
.notiz strong { letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
body:not([data-notizen="an"]) .notiz { display: none; }

/* ---------- Förderhinweis (Publizitätsvorschrift) ---------- */
.foerder-einblendung {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  /* wächst mit dem Fenster, statt fest 420 px: klein auf Laptops, nicht
     verloren auf großen Bildschirmen */
  width: clamp(380px, 26vw, 600px); max-width: calc(100vw - 24px);
  display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; padding: 14px 18px;
  background: var(--les-white); border: 1px solid var(--border-default);
  border-radius: var(--radius-md) var(--radius-klammer) var(--radius-klammer) var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.foerder-einblendung.sichtbar { opacity: 1; transform: translateY(0); }
.foerder-einblendung:not(.sichtbar) { pointer-events: none; }
.foerder-einblendung[hidden] { display: none; }
.foerder-einblendung__logos { grid-column: 1 / -1; display: block; }
.foerder-einblendung__text { min-width: 0; }
/* Die Kombinationsmarke ist dunkel auf transparent und darf nicht
   eingefärbt werden — sie steht deshalb immer auf einer weißen Fläche. */
.foerder-logo { display: block; width: 100%; height: auto; }
/* Telefon quer (niedriges Fenster): Kasten schmaler, damit er nicht ein
   Drittel der Höhe zudeckt */
@media (max-height: 500px) {
  /* Logo, Text und Schließen in einer Zeile, Logo nach Fensterhöhe skaliert */
  html .foerder-einblendung {
    width: min(620px, calc(100vw - 24px)); bottom: 8px; padding: 8px 12px;
    grid-template-columns: auto 1fr auto; align-items: center; gap: 0 12px;
  }
  html .foerder-einblendung__logos { grid-column: auto; }
  html .foerder-einblendung .foerder-logo { height: clamp(28px, 9vh, 44px); width: auto; }
  html .foerder-einblendung p { font-size: 12px; line-height: 1.35; }
}
.foerder-einblendung p { margin: 0; font-size: 13px; line-height: 1.4; }
.foerder-einblendung a { font-weight: var(--fw-semibold); border-bottom: 1px solid var(--les-black-20); }
.foerder-einblendung__zu { flex: none; background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; color: var(--les-black-40); padding: 4px; }

/* ---------- Fuß -------------------------------------------- */
.fuss { background: var(--les-black); color: var(--les-white); padding: 64px var(--pad-x) 40px; }
.fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.18); }
.fuss__spalte { display: flex; flex-direction: column; gap: 12px; }
.fuss__titel { margin: 0 0 4px; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.fuss__spalte a { font-size: 15px; color: rgba(255,255,255,.85); }
.fuss__spalte a:hover { color: var(--les-white); }
.fuss p.text { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.7); max-width: 34ch; }
.fuss p.adresse { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.85); }
/* Sehr breite Fenster: Der Inhalt endet bei 1440 px, Kopf und Fuß liefen bis
   an den Rand (Logo bei 1920 px 240 px links neben der Textspalte). Die
   Fläche bleibt randlos, nur der Inhalt rückt in die Spalte. */
@media (min-width: 1441px) {
  .kopf, .fuss { padding-inline: calc((100% - 1440px) / 2 + var(--pad-x)); }
}
.fuss__foerderung { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; padding: 32px 0 0; }
/* Weiße Leiste mit allen Förderzeichen. Die Zeichen stehen auf gleicher
   optischer Höhe, nicht auf gleicher Dateihöhe — die Bundesmarke ist höher
   gesetzt, weil Adler und „Gefördert vom" sonst zu klein werden. */
.foerder-leiste {
  display: flex; align-items: center; flex-wrap: wrap; gap: 20px 36px;
  background: var(--les-white); padding: 16px 24px; border-radius: var(--radius-sm);
}
.foerder-leiste .foerder-logo { width: auto; max-width: 100%; }
.foerder-leiste .foerder-logo:not(.foerder-logo--bmbf):not(.foerder-logo--wir) { height: 48px; }
.foerder-leiste .foerder-logo--bmbf { height: 76px; }
.foerder-leiste .foerder-logo--wir { height: 40px; }
.fuss__foerderung p { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.7); max-width: 70ch; }
.fuss__foerderung a { color: var(--les-white); border-bottom: 1px solid rgba(255,255,255,.4); }
.fuss__recht { margin: 24px 0 0; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.5); }

/* ---------- Sprungmarke ------------------------------------ */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--les-black); color: var(--les-white); padding: 12px 20px; border-radius: 0 0 var(--radius-md) 0;
}
.skip:focus { left: 0; }

/* ============================================================
   Responsiv
   ============================================================ */
@media (max-width: 1200px) {
  :root { --pad-x: 40px; }
  .t-hero { font-size: 54px; } .t-seite { font-size: 48px; }
  .t-gross { font-size: 40px; } .t-mittel { font-size: 36px; }
  .raster-haupt { grid-template-columns: 1fr 320px; gap: 48px; }
  .raster-2 { gap: 40px; }
  .raster-4 { grid-template-columns: 1fr 1fr; }
  /* Der Kopf gibt Platz ab, bevor er umklappt: Wortmarke, Abstände,
     Schaltflächengröße. */
  .kopf { gap: 24px; }
  .kopf .logo__wort { display: none; }
  .kopf__nav { gap: 18px; }
  .kopf__nav a { font-size: 15px; }
  .kopf__rechts { gap: 14px; }
  .kopf .btn { font-size: var(--fs-sm); padding: .5rem 1rem; }
  .karte__text { padding: 28px 28px 32px; }
}

/* Unterhalb dieser Breite passen Navigation und Schaltfläche nicht mehr
   nebeneinander in den Kopf — ab hier die Seitenwahl. */
@media (max-width: 1080px) {
  .kopf__nav, .kopf__punkt { display: none; }
  .seitenwahl { display: inline-flex; }
  .kopf .kopf__beratung { width: auto; flex: none; }
  /* In der Seitenwahl ist wieder Platz für die Wortmarke. */
  .kopf .logo__wort { display: inline; }
}

@media (max-width: 900px) {
  :root { --pad-x: 24px; --kopf-h: 64px; }
  .abschnitt { padding: 56px var(--pad-x); }
  .abschnitt--eng { padding: 40px var(--pad-x); }
  .t-hero { font-size: 36px; max-width: none; }
  .t-seite { font-size: 34px; max-width: none; }
  .t-gross { font-size: 30px; max-width: none; }
  .t-mittel { font-size: 28px; max-width: none; }
  .t-klein { font-size: 26px; }
  .t-karte { font-size: 24px; }
  .lead { font-size: 18px; line-height: 1.4; }
  .fliess { font-size: 16px; }
  .raster-haupt, .raster-2, .raster-3, .raster-4, .buehne, .feld-paar { grid-template-columns: 1fr; gap: 32px; }
  .raster-3, .raster-4, .buehne { gap: 20px; }
  .kopf__rechts { gap: 12px; }
  .banner { padding: 12px var(--pad-x) 4px; }
  .banner > * { height: 190px; }
  .banner .bild, .banner .ph {
    border-radius: var(--radius-md) var(--radius-klammer) var(--radius-klammer) var(--radius-md);
  }
  /* Einspaltig: Seitenverhältnis statt der festen Höhe aus dem Fragment,
     sonst wird das Bild bei voller Breite zum Streifen. */
  .karte__bild { padding: 10px; }
  .karte__text { padding: 20px 20px 28px; }
  /* Untereinander: Seitenverhältnis der Renderings statt fester Höhe,
     sonst wird das Bild bei voller Breite zum Streifen. */
  .phase__bild { height: auto; aspect-ratio: 4 / 3; width: 100%; max-width: 560px; margin-inline: auto; padding: 12px; }
  .formular { padding: 24px; }
  .verlauf-panel { padding: 28px; }
  .flex-enden { flex-direction: column; align-items: flex-start; gap: 40px; }
  .notiz { margin: 0 var(--pad-x) 28px; }
  .foerder-einblendung { right: 12px; bottom: 12px; width: min(520px, calc(100vw - 24px)); }
  .fuss { padding: 40px var(--pad-x) 32px; }
  .fuss__raster { grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 32px; }
  /* Fußlinks als Touchziele: Zeile 23 px → 43 px (Zeilenabstand über Polster statt gap). */
  .fuss__spalte:has(> .fuss__titel) { gap: 0; }
  .fuss__spalte > a:not(.logo) { padding: 10px 0; }
  .btn { width: 100%; }
  .btn-reihe { flex-direction: column; }
  .btn-reihe .btn { width: 100%; }
  blockquote p { font-size: 20px; }
  .schritt { padding: 20px; }
}

@media (max-width: 820px) {
  /* Schwarzer Knopf mit Ring im LES-Verlauf: innen Schwarz (padding-box),
     der Rand zeigt den Verlauf, der einmal um den Kreis läuft. */
  .kopf .kopf__beratung {
    width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%;
    border: 2.5px solid transparent; color: var(--les-white);
  }
  .kopf .kopf__beratung:active,
  .kopf .kopf__beratung[aria-current="page"] { background: var(--beratung-verlauf) border-box; }
  .kopf__beratung-text { display: none; }
  .kopf__beratung-symbol { display: block; width: 18px; height: 18px; }
}

@media (max-width: 560px) {
  .fuss__raster { grid-template-columns: 1fr; }
  /* Lange Wörter in großen Überschriften („Datenschutzerklärung",
     „Stromnetzanschluss") trennen statt über den Rand laufen. */
  h1, h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  /* Schaltflächen dürfen zweizeilig werden. */
  .btn { white-space: normal; text-align: center; }
  /* Gleiche Spezifität wie die Regel oben, damit sie greift. */
  .kopf .logo__wort, .fuss .logo__wort, .logo__claim { display: none; }
  /* Auf dem Telefon zählt jede Stelle: nur noch Seitenname und Pfeil. */
  .seitenwahl__hier { display: none; }
  .seitenwahl { padding: .55rem .6rem .55rem .8rem; gap: 6px; font-size: 14px; }
  .kopf { gap: 8px; }
  .kopf__rechts { gap: 8px; }
  /* Sprachwahl als Aufklappmenü statt „DE · EN" nebeneinander. */
  .kopf .sprachen { display: none; }
  .sprachwahl { display: block; }
  /* Die Bildmarke ist breit (Seitenverhältnis 4:1) — auf dem Telefon
     gibt sie Platz an den Seitennamen ab. */
  .kopf .logo svg { height: 26px; }
}

@media (max-width: 400px) {
  :root { --pad-x: 16px; }
  /* Monatsachse: zwölf Spalten auf gut 250 px */
  .diagramm__koerper { font-size: 10px; }
  .kopf .logo svg { height: 22px; }
}

@media print {
  .kopf, .mobilmenu, .foerder-einblendung, .notiz { display: none !important; }
  .abschnitt { padding: 24px 0; }
  .seite { max-width: none; }
}

/* ---------- Bühne: eine Bühne, drei Zustände ----------------
   Mit JavaScript und genug Breite liegen die drei Zustände
   übereinander im selben Rahmen und lösen einander beim Scrollen
   ab — Haus und Speicher bleiben dabei an derselben Stelle. Ohne
   JavaScript, bei reduzierter Bewegung, im Druck und auf schmalen
   Geräten stehen sie zum Vergleich nebeneinander. */
.buehne--eine { display: grid; grid-template-columns: 1fr; position: relative; }
.buehne--eine .phase {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-areas: "kopf kopf" "bild text";
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.buehne--eine .phase.aktiv { opacity: 1; visibility: visible; }
/* Im Einzelrahmen ersetzt die Reiterleiste die Karteneinzelköpfe. */
.buehne--eine .phase__kopf { display: none; }

.buehne__reiter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
/* Überschrift steht im festgehaltenen Bereich, damit sie beim Durchlaufen
   der Zustände sichtbar bleibt. */
.buehne__titel { margin-bottom: 24px; }
/* Fortschritt durch die Bühne (site.js): senkrechter Balken im rechten
   Seitenrand neben der Bühne, wo man eine Scrollleiste erwartet, in allen Breiten. Füllt sich beim Scrollen
   linear von oben (--f von 0 bis 1); die Punkte sind die Rastpunkte, an
   denen ein Zustand ganz steht. Nur, solange die Bühne geführt wird. */
.buehne__fortschritt { display: none; position: absolute; top: 0; bottom: 0; right: calc(var(--pad-x) / -2 - 6px); }
.buehne-pin--gefuehrt .buehne__fortschritt { display: block; }
/* Scrollbalken (site.js: scrollBalken und Bühne): 12 px, Füllung im
   LES-Verlauf von oben (--f von 0 bis 1), Punkte an den Rastpunkten. */
.scrollbalken { width: 12px; border-radius: 6px; background: var(--les-black-10); pointer-events: none; }
.scrollbalken--fest {
  position: fixed; z-index: 30; opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.scrollbalken--fest.an { opacity: 1; }
.scrollbalken__fuellung {
  position: absolute; left: 0; right: 0; top: 0; border-radius: 6px;
  height: calc(var(--f, 0) * 100%);
  background: linear-gradient(180deg, #cd5069 0%, #f59655 26%, #b7a05a 44%, #64c3be 66%, #6aa9d8 82%, #9182be 100%);
  background-size: 100% calc(100% / max(var(--f, 0), .001));
}
.scrollbalken > i {
  position: absolute; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--les-white); border: 2px solid var(--les-black-20);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.scrollbalken > i.an { border-color: var(--les-black); transform: scale(1.15); }
/* Rastpunkte (site.js: rastpunkte) */
[data-buehne-pin], [data-aufbau-pin], .aufbau__liste, .rollo-halt { position: relative; }
/* Breit: Überschrift links, Reiter rechts in einer Zeile — spart Höhe,
   damit Überschrift und Bühne zusammen ins Fenster passen. */
@media (min-width: 901px) {
  html [data-buehne-pin] > .buehne-halt {
    display: grid; grid-template-columns: 1fr auto; column-gap: 32px; align-content: center;
  }
  .buehne-halt > .buehne__titel, .buehne-halt > .buehne__reiter { align-self: end; margin-bottom: 20px; }
  .buehne-halt > .buehne, .buehne-halt > .buehne__leiste { grid-column: 1 / -1; }
}
.rastpunkt {
  position: absolute; left: 0; width: 1px; height: 1px;
  pointer-events: none;
}
.buehne__reiter[hidden] { display: none; }
.buehne__reiter-knopf {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-brand); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  line-height: 1; padding: .6rem 1.1rem;
  border: 1.5px solid var(--border-default); border-radius: var(--radius-pill);
  background: transparent; color: var(--les-black-60); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.buehne__reiter-knopf:hover { border-color: var(--les-black); color: var(--les-black); }
.buehne__reiter-knopf[aria-selected="true"] {
  background: var(--les-black); border-color: var(--les-black); color: var(--les-white);
}
.buehne__reiter-nr { font-variant-numeric: tabular-nums; opacity: .6; }

/* ---------- Schwapp (site.js: schwapp) ------------------------
   Eine Fläche hinter den Elementen eines Behälters, die zum aktiven
   Element schwappt und unterwegs in den LES-Verlauf umschlägt.
   Ruhefarbe je Behälter über --schwapp-ruhe, Radius über --schwapp-r. */
@property --verlauf { syntax: "<number>"; inherits: true; initial-value: 0; }
.schwapp-behaelter { position: relative; isolation: isolate; }
.schwapp {
  position: absolute; z-index: -1; left: 0; top: 0; pointer-events: none;
  border-radius: var(--schwapp-r, var(--radius-pill));
  background: var(--schwapp-ruhe, var(--les-black));
  transition: opacity var(--dur-base) var(--ease-out);
}
.schwapp::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--les-verlauf); opacity: calc(var(--verlauf, 0) * var(--schwapp-verlauf, 1));
}
/* Jahreszeiten-Reiter: die Fläche ersetzt das Schwarz des aktiven Reiters. */
.buehne__reiter.schwapp-behaelter .buehne__reiter-knopf[aria-selected="true"] {
  background: transparent; border-color: transparent;
}
/* Ankerleiste: aktiver Abschnitt als Fläche statt Unterstrich. */
.ankerleiste.schwapp-behaelter a { padding: 7px 12px; margin: 0 -12px; border-bottom: 0; border-radius: var(--radius-pill); }
.ankerleiste.schwapp-behaelter a:hover { color: var(--les-black); }
.ankerleiste.schwapp-behaelter a.aktiv { color: var(--les-white); }
/* Aufbau-Liste: helle Fläche hinter dem Teil, das gerade hereinkommt. */
.aufbau__liste.schwapp-behaelter {
  --schwapp-ruhe: var(--les-white); --schwapp-r: var(--radius-md); --schwapp-verlauf: .35;
}
.aufbau--gefuehrt .aufbau__teil { padding-left: 14px; padding-right: 14px; }
/* Bühnenleiste (nur schmal): drei Abschnitte, der aktive trägt die Fläche. */
.buehne__leiste { display: none; }
.buehne--eine .phase__bild { grid-area: bild; height: auto; min-height: 460px; padding: 20px; }
/* Niedrige breite Fenster (site.js setzt .buehne--knapp und --bild-hoehe):
   Bild schmaler und damit niedriger, 4:3 bleibt, Pfeile skalieren mit. */
.buehne--knapp .phase__bild { padding: 12px; min-height: 0; display: flex; align-items: center; }
.buehne--knapp .phase__bild > .bild { width: 100%; max-width: calc(var(--bild-hoehe, 9999px) * 4 / 3); margin-inline: auto; }
.buehne--knapp .phase__text { padding-top: 24px; padding-bottom: 20px; gap: 12px; }
.buehne--knapp .phase__text .fliess { font-size: 16px; line-height: 1.5; }
/* Die Zustände liegen übereinander. Damit beim Wechsel nichts springt,
   sind die Inhalte fest verankert statt mittig ausgerichtet: Überschrift
   und Absatz oben, die Datenzeilen unten. Der Höhenunterschied zwischen
   den Zuständen läuft in den freien Raum dazwischen. */
.buehne--eine .phase__text {
  grid-area: text; justify-content: flex-start; align-items: stretch;
  padding: 56px 32px 32px 8px; gap: 18px;
}
.buehne--eine .phase__text > .daten { margin-top: auto; }
.buehne--eine .phase__text .fliess { font-size: 17px; line-height: 1.55; }
.buehne--eine .phase__text .fliess--klein { font-size: 16px; line-height: 1.5; }
/* Die festgehaltene Bühne füllt die Bildhöhe und steht mittig darin —
   sonst entsteht unter ihr während des Ablaufs ein leerer Bereich. */
/* Passt die Bühne nicht ins Fenster, hält das Skript sie nicht fest
   (.buehne-pin--gefuehrt fehlt) — dann auch breit ohne Klebestrecke. */
[data-buehne-pin]:not(.buehne-pin--gefuehrt) { height: auto !important; }
[data-buehne-pin]:not(.buehne-pin--gefuehrt) > .buehne-halt { position: static; min-height: 0; }
[data-buehne-pin] > .buehne-halt {
  position: sticky; top: var(--oben);
  min-height: calc(100vh - var(--oben));
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 900px) {
  /* Schmal hält die Bühne nur fest, wenn sie ganz ins Fenster passt
     (das Skript setzt dann .buehne-pin--an). */
  [data-buehne-pin]:not(.buehne-pin--an) { height: auto !important; }
  [data-buehne-pin]:not(.buehne-pin--an) > .buehne-halt { position: static; min-height: 0; display: block; }
  /* Schmal: eine Bühne, Bild über Text; geschaltet über Reiter/Wischen. */
  .buehne--eine .phase { grid-template-columns: 1fr; grid-template-areas: "bild" "text"; }
  /* Seitenverhältnis am Bild selbst, nicht am Rahmen: Safari rechnet
     sonst die Bildhöhe über den Rahmen hinaus (Bild über der Überschrift). */
  .buehne--eine .phase__bild { min-height: 0; padding: 12px; aspect-ratio: auto; height: auto; }
  /* site.js setzt --bild-breite, wenn die Bühne auf hohen Telefonen knapp nicht passt. */
  .buehne--eine .phase__bild { max-width: min(560px, var(--bild-breite, 560px)); margin-inline: auto; }
  .buehne--eine .phase__bild .bild { aspect-ratio: 4 / 3; height: auto; }
  /* Schmal zeigt die Leiste unter der Bühne den Stand; die Reiter oben
     wären doppelt (und brechen in zwei Zeilen um). */
  .buehne__reiter { display: none; }
  .buehne--eine .phase__text { padding: 8px 20px 24px; gap: 14px; }
  .buehne--eine .phase__text .fliess { font-size: 16px; }
  .buehne__reiter { gap: 8px; margin-bottom: 14px; }
  .buehne--eine + .buehne__leiste {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px;
    --schwapp-r: 3px;
  }
  /* Name über dem Balken: die Leiste ersetzt schmal die Reiter. */
  .buehne__leiste-teil {
    display: flex; flex-direction: column; justify-content: flex-end; gap: 7px;
    padding: 0; border: 0; background: none; font: inherit; text-align: left;
    color: var(--les-black-60); cursor: pointer;
  }
  .buehne__leiste-name { font-size: 14px; line-height: 1.25; }
  .buehne__leiste-teil[aria-current] { color: var(--les-black); font-weight: 600; }
  .buehne__leiste-balken { display: block; height: 6px; border-radius: 3px; background: var(--les-black-10); }
  .buehne__leiste .schwapp { z-index: 1; }
  .buehne__reiter-knopf { padding: .5rem .85rem; font-size: 14px; gap: 7px; }
}

/* ---------- Karten setzen den dunklen Kontext zurück --------
   Eine weiße Karte kann in einem schwarzen Abschnitt stehen. Die
   Farbregeln des dunklen Abschnitts dürfen dann nicht durchschlagen. */
.abschnitt--dunkel .karte,
.verlauf-panel .karte { color: var(--les-black); }
.abschnitt--dunkel .karte .fliess--gedimmt { color: var(--les-black-80); }
.abschnitt--dunkel .karte .augenbraue { color: var(--les-black-60); }
.auf-dunkel .karte .btn--secondary { color: var(--les-black); border-color: var(--les-black); }
.auf-dunkel .karte .btn--secondary:hover { background: var(--les-black); color: var(--les-white); }

/* ---------- Weitere Zweispalter -----------------------------
   Als Klassen, nicht inline: nur so greift der Umbruch auf
   schmalen Geräten. */
.raster-2-rand  { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: end; }
.raster-2-links { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.raster-2-form  { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: start; }
.raster-foto    { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
/* Rasterspalten dürfen schmaler werden als ihr breitester Inhalt (lange
   Auswahlliste, Schaltfläche, Marke) — sonst schiebt eine einzige solche
   Zeile die ganze Seite auf dem Telefon über den Rand. */
.raster-2 > *, .raster-3 > *, .raster-4 > *, .raster-haupt > *,
.raster-2-rand > *, .raster-2-links > *, .raster-2-form > *, .raster-foto > *,
.feld-paar > *, .buehne > *, .phase > *, .diagramm__koerper > * { min-width: 0; }
@media (max-width: 1200px) {
  .raster-2-rand { grid-template-columns: 1fr 340px; gap: 40px; }
  .raster-2-form { grid-template-columns: 1.2fr 1fr; gap: 48px; }
  .raster-2-links { gap: 40px; }
}
@media (max-width: 900px) {
  .raster-2-rand, .raster-2-links, .raster-2-form, .raster-foto {
    grid-template-columns: 1fr; gap: 32px; align-items: start;
  }
}

@media (max-width: 900px) {
  /* Platzhaltertexte sauber abschneiden statt aus dem Kasten laufen */
  .ph__motiv {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ============================================================
   Aufbau — die Einheit entsteht beim Scrollen
   Die Schichten liegen deckungsgleich übereinander und fahren
   nacheinander an ihren Platz. Breit und hoch klebt der ganze
   Abschnitt; schmal oder niedrig klebt nur die Bühne und die Liste
   läuft darunter durch (aufbau--mitlaufend). Ohne JavaScript, bei
   reduzierter Bewegung und im Druck steht stattdessen die
   Gesamtzeichnung, die Liste ist dann eine normale Liste.
   ============================================================ */
.aufbau { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }

/* Die eine Bildposition.

   Alle Renderings haben exakt dieselben Abmessungen. Deshalb bestimmt das
   erste die Größe — es steht im Fluss, alle weiteren liegen deckungsgleich
   darauf. Nichts wird skaliert, beschnitten oder auf ein Seitenverhältnis
   gerechnet. */
.aufbau__buehne { position: relative; }
.aufbau__gesamt { position: absolute; inset: 0; }
.aufbau--gefuehrt .aufbau__gesamt { display: none; }

/* Eine Schicht: ein Bildrendering.
   --ein läuft beim Scrollen von 0 auf 1; daraus entsteht der Weg. */
.aufbau__schicht {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
/* Die erste Schicht steht im Fluss und gibt der Bildposition ihre Größe.
   Muss nach der Regel darüber stehen, sonst gewinnt deren position:absolute.
   relative statt static, denn z-index greift nur bei positionierten
   Elementen — sonst läge diese Schicht unter allen anderen. */
.aufbau__schicht--mass { position: relative; inset: auto; height: auto; }
.aufbau--gefuehrt .aufbau__schicht {
  opacity: var(--ein, 0);
  /* Nur verschieben, nicht skalieren: Die Schichten kommen aus derselben
     Kamera und behalten ihre Größe — sie fahren an ihren Platz, sie fahren
     nicht auf den Betrachter zu. */
  transform: translate(calc(var(--vx, 0%) * (1 - var(--ein, 0))),
                       calc(var(--vy, 0%) * (1 - var(--ein, 0))));
  will-change: transform, opacity;
}

/* Legende rechts */
.aufbau__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: center;
  border-top: 2px solid var(--les-black);
}
.aufbau__teil { padding: 18px 0; border-bottom: 1px solid var(--les-black-20); }
/* Nicht aktive Teile bleiben voll lesbar; das aktive hebt die weiße
   Schwapp-Fläche hervor, nicht ausgegraute Schrift. */
.aufbau__kopf { display: flex; align-items: baseline; gap: 16px; margin: 0 0 4px; }
.aufbau__nr {
  flex: none; width: 28px; font-size: 17px; font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.aufbau__name { font-size: 17px; font-weight: var(--fw-semibold); }
.aufbau__text { margin: 0 0 0 44px; font-size: 16px; line-height: 1.5; color: var(--les-black-80); }

/* Die Schaltfläche entsteht erst mit JavaScript — ohne bleibt es Fließtext. */
.aufbau__knopf {
  display: flex; align-items: baseline; gap: 16px; width: 100%;
  margin: 0 0 4px; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.aufbau__knopf:hover .aufbau__name,
.aufbau__teil--klick:hover .aufbau__name { text-decoration: underline; text-underline-offset: 3px; }
.aufbau__teil--klick { cursor: pointer; }

[data-aufbau-pin] > .aufbau-halt {
  position: sticky; top: var(--oben);
  min-height: calc(100vh - var(--oben));
  display: flex; flex-direction: column; justify-content: center;
}

/* Mitlaufend (schmal oder niedrig): Nur die Bühne klebt, die Liste läuft
   darunter durch. Die Bühne ist eine weiße Karte in einem deckenden Band
   über die ganze Breite — der Text verschwindet darunter, statt links und
   rechts neben dem Bild weiterzulaufen. Höchstens knapp halb so hoch wie
   das Fenster, damit darunter Platz zum Lesen bleibt. Oben links sagt eine
   Marke, welches Teil gerade hereinkommt. */
/* overflow-x: clip statt hidden: schneidet hereinfahrende Teile und das
   Band seitlich ab, ohne einen Scrollbereich zu bilden — sticky bleibt. */
.aufbau--mitlaufend { align-items: start; overflow-x: clip; }
/* Auch breit, aber niedrig einspaltig wie schmal — sonst stünde die Liste
   neben der Bühne und das Band verdeckte die ersten Teile. */
.aufbau.aufbau--mitlaufend { grid-template-columns: 1fr; gap: 28px; }
[data-aufbau-pin]:has(.aufbau--mitlaufend) > .aufbau-halt { position: static; min-height: 0; display: block; }
.aufbau--mitlaufend .aufbau__text { margin-left: 0; }
.aufbau--mitlaufend .aufbau__buehne {
  position: sticky; top: calc(var(--oben) + 12px); z-index: 2;
  width: min(100%, calc((100svh - var(--oben)) * .45 * 4 / 3));
  justify-self: center;
  background: var(--les-white); border-radius: var(--radius-md);
  /* Kartenrand, dann das Band in Abschnittsfarbe; clip-path schneidet das
     Band auf seine Höhe zu und hält hereinfahrende Teile aus dem Text. */
  box-shadow: 0 0 0 1px var(--border-subtle), 0 10px 24px rgba(0,0,0,.08),
              0 0 0 100vw var(--les-black-05);
  clip-path: inset(-12px -100vw -24px -100vw);
  /* Hereinfahrende Teile erscheinen erst innerhalb der Karte. */
  overflow: clip;
}
.aufbau__jetzt { display: none; }
.aufbau--mitlaufend .aufbau__jetzt {
  display: inline-flex; align-items: center; gap: 8px;
  position: absolute; top: 10px; left: 10px; z-index: 40;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--les-black); color: var(--les-white);
  font-size: 13px; font-weight: var(--fw-semibold); line-height: 1.2;
}
.aufbau__jetzt b { font-variant-numeric: tabular-nums; opacity: .6; font-weight: var(--fw-bold); }

@media (max-width: 900px) {
  .aufbau { grid-template-columns: 1fr; gap: 28px; }
  [data-aufbau-pin] { height: auto !important; }
  [data-aufbau-pin] > .aufbau-halt { position: static; min-height: 0; display: block; }
  .aufbau__text { margin-left: 0; }
}

/* Live-Build: Bildplätze ohne Bild (build.py: platzhalter) samt Rahmen,
   Banner und Bildunterschrift ausblenden. [data-nur-bild] = Spalte, die
   nur aus diesem Bild besteht und dann ganz entfällt. */
.ph--aus { display: none !important; }
.banner:has(> .ph--aus), div:has(> .ph--aus), [data-nur-bild]:has(.ph--aus) { display: none !important; }
div:has(> .ph--aus) + .bildunterschrift { display: none !important; }

/* ---------- Tippflächen ≥ 40 px (QA 15.10.2026) ---------------
   Kleine Ziele bekommen eine unsichtbare, größere Trefferfläche
   (::before), damit sich das Layout nicht verschiebt. */
.kopf .kopf__beratung { min-width: 40px; min-height: 40px; }
@media (max-width: 768px) { .kopf .kopf__beratung { width: 40px; height: 40px; } }
.seitenwahl, .sprachwahl summary { min-height: 40px; }
.ankerleiste.schwapp-behaelter a { padding-block: 9px; }
.foerder-einblendung__zu { min-width: 40px; min-height: 40px; margin: -8px -10px 0 0; }
a.daten__link, a.weiter, .kontrollkasten, .buehne__leiste-teil,
main a[href="impressum.html"], main a[href="datenschutz.html"] { position: relative; }
a.daten__link::before, a.weiter::before, .kontrollkasten::before, .buehne__leiste-teil::before,
main a[href="impressum.html"]::before, main a[href="datenschutz.html"]::before {
  content: ""; position: absolute; inset: -10px -4px;
}

/* ---------- Hilfsklassen aus den Seitenquellen -----------------
   Ersetzen wiederholte style-Attribute in build/pages/. Ganz am Ende,
   damit sie wie das frühere Inline-Style auch die Regeln der
   900-px-Stufe (z. B. .t-seite { max-width: none }) übertrumpfen. */
.max-20ch { max-width: 20ch; }
.max-24ch { max-width: 24ch; }
.max-26ch { max-width: 26ch; }
.max-44ch { max-width: 44ch; }
.max-52ch { max-width: 52ch; }
.max-70ch { max-width: 70ch; }
.max-80ch { max-width: 80ch; }
.ohne-oben { padding-top: 0; }
.btn-reihe--abgesetzt { padding-top: 8px; }
/* Verweis mit feiner Unterstreichung im Fließtext; die Trefferflächen
   (::before) hängen an den href-Selektoren oben, nicht an dieser Klasse. */
.textlink { border-bottom: 1px solid var(--les-black-20); }
.textlink--zeile { font-size: 16px; padding-bottom: 2px; }
.kleintext { margin: 0; font-size: 16px; line-height: 1.55; color: var(--les-black-80); }
.notiz--innen { margin: 0; }
.schritt__titel { margin: 0; font-size: 19px; font-weight: 700; }
/* Häufige Fragen */
.faq-zeile { padding: 18px 0; border-bottom: 1px solid var(--border-subtle); }
.faq-zeile__frage { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
/* Linkliste auf der Fehlerseite */
.linkliste { border-top: 2px solid var(--les-black); padding-top: 8px; }
.linkzeile { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); font-size: 17px; }
.linkzeile--fett { font-weight: 600; }

/* Solange ein Bild lädt, zeigt Firefox den Alternativtext über dem
   Vorschaubild — Text unsichtbar machen (für Screenreader bleibt er). */
.bild img { color: transparent; }