/* ==========================================================================
   HAUS & ENERGIE — pages.css
   Ergänzungs-Stylesheet für UNTERSEITEN (geladen nur von layouts/base.njk,
   nach styles.css). Politik (specs/00-architektur.md §4): hier gehören
   Unterseiten-Komponenten hin, keine Overrides der Homepage-Sektionen,
   keine neuen Farb-/Font-Rohwerte — ausschließlich var(--…)-Tokens. styles.css
   ist seit 2026-07-21 nicht mehr eingefroren; geteilte Komponenten gehören
   deshalb DORTHIN (die Startseite lädt pages.css nicht), nicht hierher.
   Organisation: Chrome-Ergänzungen → Page-Hero → Breadcrumbs → Prose
                 → Tabellen → Kontakt-Kanäle → CTA-Karten → Formulare
                 → Dokument-Box → Produkt-Hero → Embed-Platzhalter
                 → msform (Lead) → Optionskarten → Kosten-Sidebar
                 → Vergleichs-Spalten → Stat-Karten
                 → Artikel (Hero/Grid/TOC/Share/Author/Karten/Rechner/
                 Inline-CTA) → Responsive
   ========================================================================== */

/* ---------------------------------------------------- Chrome-Ergänzungen -- */
/* Aktiver Navigationspunkt (nur Unterseiten; Homepage hat keinen) */
.nav__link.is-active,
.nav__sub a[aria-current="page"] {
  color: var(--c-forest-800);
  background: rgba(22, 67, 47, 0.06);
}
.mobile-menu__links a.is-active {
  color: var(--c-forest-800);
  background: rgba(22, 67, 47, 0.06);
}
/* A11y (S8-Audit): geschlossenes Menü ist in styles.css nur per Transform
   verschoben — Links blieben tab-erreichbar (axe aria-hidden-focus).
   visibility wird erst NACH der Slide-out-Transition (0.4s) entzogen,
   damit die Animation identisch zur Homepage bleibt. */
.mobile-menu[aria-hidden="true"] {
  visibility: hidden;
  transition: transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.mobile-menu[aria-hidden="false"] { visibility: visible; }

/* -------------------------------------------------------------- Page-Hero -- */
.page-hero {
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-line);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5.5vw, 4.25rem);
}
/* Seit 2026-07-28 zeigen nur noch die Magazin-Seiten eine sichtbare Brotkrume.
   Dort liefert deren margin-bottom die obere Luft — die Basis-Einrückung oben
   bleibt für sie unverändert, damit sich am Magazin-Layout nichts verschiebt.
   Alle übrigen Heros haben den Pfad verloren und bekommen die Luft direkt. */
.page-hero:has(.breadcrumbs) { padding-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.page-hero__content { max-width: 52rem; }
.page-hero h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  font-weight: 600;
}
.page-hero .eyebrow { margin-bottom: 0.85rem; }
.page-hero .lead { margin-top: 1.1rem; max-width: 44rem; }
.page-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* dunkle Variante (Produkt-/Service-Seiten, ab Sprint 3) */
.page-hero--forest {
  background: var(--c-forest-800);
  border-bottom: none;
}
.page-hero--forest h1 { color: #fff; }
.page-hero--forest .lead { color: rgba(255, 255, 255, 0.78); }
.page-hero--forest .eyebrow { color: var(--c-brass-400); }
.page-hero--forest .eyebrow::before { background: var(--c-brass-400); }

/* Split-Hero (Service-Seiten, Sprint 9): Copy links, Formularkarte rechts.
   Ab ≥992px zweispaltig, darunter gestapelt (Copy oben, Formular unten). */
.page-hero--split { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-hero--split .page-hero__content { max-width: none; }
.page-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}
@media (min-width: 992px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(23rem, 28rem); }
}

/* kompakter Preis-Callout in der Hero-Copy — ersetzt die Kosten-Sidebar */
.page-hero__price {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.75rem;
  margin-top: 1.75rem;
  padding: 0.8rem 1.15rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.page-hero__price-old {
  font-size: 1rem;
  color: var(--c-ink-400);
  text-decoration: line-through;
}
.page-hero__price-arrow { display: inline-flex; color: var(--c-ink-400); align-self: center; }
.page-hero__price-arrow svg { width: 16px; height: 16px; }
.page-hero__price-new {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--c-forest-800);
}
.page-hero__price-note {
  flex-basis: 100%;
  font-size: 0.82rem;
  color: var(--c-ink-400);
}
/* dezente, rein typografische Preisangabe (ohne Callout-Kasten) */
.page-hero__price--quiet {
  display: block;
  margin-top: 1.25rem;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: 0.95rem;
  color: var(--c-ink-400);
}
.page-hero__price--quiet .page-hero__price-new {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-forest-800);
}
.page-hero__price--quiet .page-hero__price-note { display: block; margin-top: 0.15rem; }

/* msform als alleinige Karte im Hero (ohne Sidebar) — volle Zellenbreite.
   Descendant-Selektor: schlägt die spätere .msform-Basisregel spezifitätssicher.
   minmax(0,1fr) statt 1fr (2026-07-28): ein 1fr-Track nimmt als Minimum den
   min-content seines Inhalts an und wuchs damit über die Hero-Spalte hinaus. */
.page-hero__form .msform { grid-template-columns: minmax(0, 1fr); max-width: none; margin: 0; }
.page-hero__form .msform__main { min-width: 0; }

/* Ab 992px wird der Hero zweispaltig und die Formularspalte auf 28rem gedeckelt
   — abzüglich der Karten-Polsterung (2×2.5rem) bleiben ~368px Inhaltsbreite.
   Die zweispaltigen Optionskarten haben aber 443px min-content und schoben das
   Formular aus dem Viewport (/foerderservice/: 15px bei 1024, 24px ab 1180).
   Unter 992px steht der Hero gestapelt, dort ist Platz für zwei Spalten — die
   Einschränkung gilt deshalb nur im gesplitteten Hero. */
@media (min-width: 992px) {
  .page-hero__form .opt-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Breadcrumbs -- */
/* Nur noch Magazin (Artikel + Übersicht); alle anderen Seiten liefern seit
   2026-07-28 ausschließlich das BreadcrumbList-JSON-LD ohne sichtbares Markup.
   Die früheren .page-hero--forest-Varianten sind damit entfallen (keine
   Forest-Seite trägt mehr eine Brotkrume). */
.breadcrumbs {
  font-size: 0.82rem;
  color: var(--c-ink-400);
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: 0.4rem; }
.breadcrumbs li + li::before {
  content: "/";
  color: var(--c-line-strong);
}
.breadcrumbs a { transition: color 0.2s var(--ease); }
.breadcrumbs a:hover { color: var(--c-forest-800); }
.breadcrumbs [aria-current="page"] { color: var(--c-ink-700); font-weight: 500; }

/* --------------------------------------------- Blockrhythmus in Sektionen -- */
/* Die Sektions-Bausteine (.compare-cols, .stat-cards, .table-wrap, .doc-box,
   .benefits__grid …) bringen samt und sonders KEINEN Aussenabstand mit — die
   Luft kommt sonst allein aus dem margin-bottom von .section-head. Solange eine
   Sektion aus Kopf + einem Raster besteht, geht das auf; sobald zwei Bloecke
   aufeinander folgen, kleben sie. Deshalb dieser Opt-in-Wrapper: er wird nur
   dort gesetzt, wo eine Sektion mehrere Bloecke stapelt (aktuell
   /foerderservice/ #dschungel + #programme), damit die uebrigen 21 Seiten
   pixelgleich bleiben. Nachbar-Margins kollabieren mit dem margin-bottom des
   .section-head — der groessere Wert gewinnt, nichts addiert sich. */
.section-stack > * + * { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
/* Fussnoten gehoeren an ihren Block, nicht auf Blockabstand. */
.section-stack > * + .table-note { margin-top: 0.9rem; }
/* .program-cards bringt als einziger Baustein eigene Margins mit — hier
   uebernimmt der Stack, damit der Rhythmus einheitlich bleibt. */
.section-stack > .program-cards { margin-block: 0; }
/* ...die Nullung schlaegt allerdings `> * + *` (0,2,0 gegen 0,1,0), also
   bekaeme eine program-cards HINTER einem anderen Block gar keinen Abstand
   und klebte an ihm. Auf /foerderservice/ fiel das nie auf, weil dort immer
   eine .section-head--sub davorsteht, die den Abstand ohnehin auf 0 zieht.
   Diese Regel stellt den Stack-Abstand wieder her; sie steht bewusst VOR der
   --sub-Regel, damit die (gleiche Spezifitaet) weiterhin gewinnt. */
.section-stack > * + .program-cards { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
/* Zwischenueberschrift innerhalb einer Sektion: enger als der Sektionskopf,
   sonst reisst der volle Kopf-Abstand die Sektion in zwei Haelften. Der
   Stack-Abstand muss dahinter auf 0 — benachbarte Margins kollabieren zum
   GROESSEREN Wert, das margin-bottom allein wuerde also nichts bewirken. */
.section-head--sub { margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }
.section-stack > .section-head--sub + * { margin-top: 0; }
/* Ausserhalb von .prose gilt `* { margin: 0 }` — ein erklaerender Absatz unter
   der Zwischenueberschrift klebte sonst an ihr. .section-head .lead bringt
   seinen Abstand selbst mit, diese Regel ist fuer den normalen Absatz da. */
.section-head--sub > * + * { margin-top: 0.6rem; }
/* .doc-box auf Sektionsebene (ausserhalb .prose): zentriert unter dem
   zentrierten Kopf, mit eigenem Innenrhythmus — `.prose .doc-box p + p`
   greift hier nicht. Auf .section-stack gescopt, damit die Magazin-Artikel
   und /widerruf/ ihre Box unveraendert behalten. */
.section-stack > .doc-box { max-width: 900px; margin-inline: auto; }
.section-stack .doc-box > * + * { margin-top: 0.85em; }
.section-stack .doc-box h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-ink-900);
}

/* ------------------------------------------------------------------ Prose -- */
/* Fließtext-Typografie für Legal-Seiten & Magazin-Artikel.
   Der globale Reset (styles.css) nullt alle Margins — hier kommt der
   vertikale Rhythmus zurück. */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.05em; }
/* WIDGET-RHYTHMUS im Artikelfliesstext (2026-08-13, User-Befund „das haengt
   direkt aneinander, viel zu eng").

   `.prose > * + *` gibt JEDEM Kind 1,05em (gemessen 18 px). Zwischen zwei
   Absaetzen ist das richtig; unter einer Effizienzskala, einer Tabelle oder
   einer Warnbox ist es zu wenig — der Folgetext klebte am Baustein, und der
   Block las sich als Teil des Absatzes statt als eigenes Element.

   Umgesetzt wie bei `.post-figure` (Regel unten, seit 2026-08-01): Abstand
   NUR am Baustein selbst, nicht am Nachbarn. Benachbarte Margins kollabieren
   zum groesseren Wert, eine h2 danach behaelt also ihre 2,4em. Eine Regel
   `<baustein> + *` waere mit 0,2,0 spezifischer als `.prose h2` (0,1,1) und
   wuerde die Ueberschrift heranziehen — genau die Falle, die im
   post-figure-Kommentar steht.

   Gilt NUR innerhalb von `.prose`. Auf Sektionsebene bleiben `.table-wrap`,
   `.compare-cols` und `.stat-cards` bei ihrem margin-block: 0 — dort regelt
   das Opt-in `.section-stack` den Rhythmus (s. CLAUDE.md „Blockrhythmus"). */
.prose > :is(.doc-box, .warnbox, .table-wrap, .calc, .inline-cta, .next-steps,
  .finder-teaser, .eskala, .skala-vgl, .nwg-skala, .meps-ampel, .inserat,
  .compare-cols, .stat-cards, blockquote) {
  margin-block: 1.9em;
}
.prose h2 {
  margin-top: 2.4em;
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.9rem);
}
.prose h3 { margin-top: 1.9em; font-size: 1.25rem; }
.prose h4 { margin-top: 1.6em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol {
  padding-left: 1.35rem;
  display: grid;
  gap: 0.45rem;
  color: var(--c-ink-600);
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
/* 2026-07-25 Audit D4: brass-500 auf Weiß = 2,24:1, brass-600 = 3,48:1 — Marker sind
   Textinhalt, brass-700 bringt sie auf 5,04:1. */
.prose ul ::marker { color: var(--c-brass-700); }
.prose ol ::marker { color: var(--c-brass-700); font-weight: 600; }
.prose a {
  color: var(--c-forest-700);
  text-decoration: underline;
  text-decoration-color: var(--c-brass-400);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
/* 2026-07-29: Hover dunkelt ab, statt auf Messing zu wechseln. Der alte Wert
   `--c-brass-600` lag als Textfarbe auf ALLEN drei Gruenden unter WCAG AA
   (weiss 3,48 · creme 3,26 · sand 2,96) — jeder Fliesstext-Link im Magazin
   wurde beim Ueberfahren schlechter lesbar statt besser. `--c-brass-700`
   reicht ebenfalls nicht (sand 4,28). forest-800 liegt bei 9,50–11,18.
   Die Hover-Rueckmeldung kommt jetzt aus der Unterstreichung: brass-700 ist
   als Nicht-Text-Element bei 4,28–5,04 deutlich sichtbar, dazu 2px Staerke. */
.prose a:hover {
  color: var(--c-forest-800);
  text-decoration-color: var(--c-brass-700);
  text-decoration-thickness: 2px;
}
/* 2026-07-29: `.prose a` (Spezifitaet 0,1,1) schlaegt `.btn--gold`/`--light`/
   `--primary` (je 0,1,0) — ohne diese Ausnahme bekommen ALLE Buttons im
   Artikelfliesstext den Textlink-Unterstrich UND dessen Farbe statt ihrer
   eigenen. Das betraf seit Sprint 5 saemtliche .inline-cta-CTAs im Magazin.
   `:where()` haelt die Spezifitaet des Ankers bei 0,1,1 und laesst die
   Button-Varianten damit wieder gewinnen.

   WICHTIG — der Hover-Zustand muss mitgesetzt werden. `.prose a:hover` ist
   0,2,1 und schlaegt eine Regel wie `.prose a:where(.btn--gold)` (0,1,1). Ohne
   die `:hover`-Varianten unten faerbt sich der Gold-CTA beim Ueberfahren auf
   brass-600 um: Messing auf Messing, gemessen **1,45:1** — der Text
   verschwindet praktisch. (Genau so passiert, als hier zuerst nur die
   Ruhefarbe gesetzt war.) Bei neuen Button-Varianten beide Zustaende
   ergaenzen. */
.prose a:where(.btn),
.prose a:where(.btn):hover {
  text-decoration: none;
  color: var(--btn-fg);
}
.prose a:where(.btn--gold),
.prose a:where(.btn--gold):hover { color: #2a2010; }
.prose a:where(.btn--light, .btn--ghost),
.prose a:where(.btn--light, .btn--ghost):hover { color: var(--c-forest-800); }
.prose a:where(.btn--primary),
.prose a:where(.btn--primary):hover { color: var(--c-cream); }
/* 2026-07-31: `.link-arrow` bringt eine eigene Unterstreichung mit (border-bottom
   1,5px, faehrt beim Hover auf brass-500 hoch). Im Artikelfliesstext legte
   `.prose a` zusaetzlich `text-decoration: underline` darueber — beim
   Ueberfahren standen dann ZWEI Linien untereinander, in zwei verschiedenen
   Messingtoenen und Staerken. Betraf jeden Pfeil-Link in `.prose`:
   Finder-Teaser, Artikelkarten, den .ics-Link und den „ok"-CTA der Rechner.
   Gewinnt die Komponente: text-decoration raus, die border-bottom bleibt.
   Wie bei den Buttons MUSS der Hover mitgesetzt werden — `.prose a:hover`
   ist 0,2,1 und schluege eine Regel mit `:where()` allein (0,1,1). */
.prose a:where(.link-arrow),
.prose a:where(.link-arrow):hover { text-decoration: none; }
.prose hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin-block: 2.5em;
}
.prose blockquote {
  border-left: 3px solid var(--c-brass-500);
  padding: 0.35rem 0 0.35rem 1.25rem;
  color: var(--c-ink-600);
  font-style: italic;
}
.prose address {
  font-style: normal;
  line-height: 1.7;
}

/* ------------------------------------------ Definition (/verbrauchsausweis/) -- */
/* Zwei-Spalten-„Was ist …?": Text links (Lead + Facetten), Muster-Dokument +
   Datenblatt rechts. Ersetzt die frühere einspaltige .prose-Definition; nur auf
   #definition der Verbrauchsausweis-Seite verwendet. */
.def {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.def__main { max-width: 60ch; }
.def__main .eyebrow { margin-bottom: 0.85rem; }
.def__main h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.1rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-ink-900);
}
.def__lead {
  margin-top: 1.1rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--c-ink-700);
}
.def__facets {
  margin-top: 2rem;
  display: grid;
  gap: 1.35rem;
}
.def__facet {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--c-line);
}
.def__facet-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--c-brass-100);
  color: var(--c-brass-700);
}
.def__facet-icon svg { width: 22px; height: 22px; }
.def__facet h3 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--c-ink-900);
  margin-bottom: 0.35rem;
}
.def__facet p { color: var(--c-ink-600); line-height: 1.65; }

.def__aside {
  display: grid;
  gap: 1rem;
  position: sticky;
  top: 100px;
}
.def__figure {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 0.85rem;
  box-shadow: var(--shadow-md);
}
.def__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.def__figure figcaption {
  margin-top: 0.75rem;
  padding: 0 0.35rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--c-ink-400);
  text-align: center;
}
.def__spec {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 0.4rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.def__spec-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--c-line);
}
.def__spec-row:last-child { border-bottom: 0; }
.def__spec-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-brass-100);
  color: var(--c-brass-700);
}
.def__spec-icon svg { width: 20px; height: 20px; }
.def__spec dt {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-ink-400);
  margin-bottom: 0.15rem;
}
.def__spec dd {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--c-ink-900);
}

@media (max-width: 860px) {
  .def { grid-template-columns: 1fr; gap: 2.25rem; }
  .def__aside { position: static; max-width: 460px; }
}

/* ------------------------------------------------ Kosten / Preis-Karte -- */
/* /verbrauchsausweis/ #kosten: Preis-Highlight links, Fließtext rechts.
   Ersetzt die frühere einspaltige .prose-Kostensektion (Text unverändert). */
.cost {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 820px;
  margin: 2.5rem auto 0;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.cost__highlight {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.3rem;
  padding-right: clamp(1.5rem, 3vw, 3rem);
  border-right: 1px solid var(--c-line);
}
.cost__from {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--c-ink-400);
}
.cost__amount {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 2rem + 2.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-forest-800);
}
.cost__note {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--c-ink-600);
  max-width: 20ch;
}
.cost__compare {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--c-brass-100);
  color: var(--c-brass-700);
  font-size: 0.8rem;
  font-weight: 600;
}
.cost__compare svg { width: 15px; height: 15px; }
.cost__text {
  display: grid;
  gap: 1rem;
  color: var(--c-ink-600);
  line-height: 1.7;
}
.cost__text strong { color: var(--c-ink-900); font-weight: 700; }
.cost-compare { max-width: 820px; margin: 1.5rem auto 0; }

@media (max-width: 680px) {
  .cost { grid-template-columns: 1fr; gap: 1.5rem; }
  .cost__highlight {
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
    padding-right: 0;
    padding-bottom: 1.5rem;
  }
}

/* ------------------------------------------- Kennwert-Metriken (/bedarfsausweis/) -- */
/* #grundlagen: die zwei GEG-Kennwerte (End-/Primärenergiebedarf) als volle-Breite-
   Block UNTER dem zweispaltigen .def-Bereich (nicht mehr in der schmalen Aside).
   Zwei breite Karten nebeneinander (unter ~640px untereinander). Der Vorspann ist
   mit Eyebrow + kräftigem Lead deutlich hervorgehoben. Ziffer-Kachel links, Name +
   Einheiten-Pille + Beschreibung rechts. */
.metric-panel {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--c-line-strong);
}
.metric-panel__head {
  max-width: 62ch;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.metric-panel__head .eyebrow { margin-bottom: 0.75rem; }
.metric-panel__intro {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--c-ink-700);
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.metric {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1.15rem;
  padding: clamp(1.35rem, 3vw, 1.65rem);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.metric__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--c-brass-100);
  color: var(--c-brass-700);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
}
.metric__body { min-width: 0; }
.metric__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.7rem;
  margin-bottom: 0.5rem;
}
.metric__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--c-ink-900);
}
.metric__unit {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--c-brass-700);
  background: var(--c-brass-100);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.metric__desc { font-size: 0.95rem; line-height: 1.65; color: var(--c-ink-600); }

/* -------------------------------------- Finder-SEKTION folgt der Sand-Alternanz -- */
/* Die geteilte .finder-Regel (styles.css) setzt Cream ("überall hell"). Die
   Finder-Sektion richtet sich aber nach ihren Nachbarn, nicht nach einer festen
   Farbe — deshalb diese Opt-in-Regel: NUR /bedarfsausweis/ trägt zusätzlich
   .section--sand (dort liegen Cream-Sektionen daneben: Vorteile · Finder ·
   Pflicht). Auf /verbrauchsausweis/ liegt der Finder zwischen zwei Sand-
   Sektionen und bleibt bewusst Cream — die Klasse ist dort seit 2026-07-28
   entfernt, vorher standen dort drei Sand-Sektionen am Stück.
   Die Zwei-Klassen-Regel gewinnt per Spezifität und gilt nur für die Sektion,
   nicht für die Popups (#finder-modal / #quiz-modal) oder den Mini-Finder. */
.finder.section--sand { background: var(--c-sand); }

/* ------------------------------------------------- Callout (Antwort-Panel) -- */
/* „Wer darf ausstellen?" (/bedarfsausweis/, nur hier). Dunkler Smaragd-Panel als
   Antwort-Anker zwischen den weißen Trust-Karten und den Zahlungsarten — flach
   (kein Verlauf), Messing-Icon + Eyebrow. margin-bottom setzt die Zahlungsarten
   darunter klar ab (die hingen vorher direkt an der Box). */
.callout {
  max-width: 900px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--c-forest-800);
  color: #fff;
  border-radius: var(--radius-xl);
}
.callout__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.35rem;
}
.callout__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(201, 162, 75, 0.16);
  color: var(--c-brass-400);
}
.callout__icon svg { width: 26px; height: 26px; }
.callout__eyebrow {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-brass-400);
}
.callout__heading h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.callout__body > * + * { margin-top: 0.85rem; }
.callout__body p { color: rgba(255, 255, 255, 0.82); line-height: 1.75; }

/* --------------------------------------------------------------- Tabellen -- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-paper);
  box-shadow: var(--shadow-xs);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 420px;
}
.table th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-cream);
  background: var(--c-forest-800);
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--c-forest-700);
  white-space: nowrap;
}
.table td {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-600);
  vertical-align: top;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table td strong { white-space: nowrap; }
.table-note {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--c-ink-400);
}
/* Zweite Zeile in einer Tabellenzelle — Paragrafenverweis unter dem Begriff,
   Einschraenkung unter der Zeilenbezeichnung. Bewusst kein <small>: die
   Groesse gehoert ins Stylesheet, nicht ins Markup. */
.table-sub { display: block; font-size: 0.82rem; font-weight: 400; color: var(--c-ink-400); }
/* Die eigene Zeile im Anbieter-/Preisvergleich (/energieausweis-kostenlos/
   #preise): Flaeche im Brass-Ton plus Innenkante — vorher war die Zeile nur
   fett und ging zwischen den Marktspannen unter. rgba nutzt das exakte
   Token-Tripel von --c-brass-500 (#c9a24b), § 4.1. */
.table tr.table__row--own td { background: rgba(201, 162, 75, 0.08); }
.table tr.table__row--own td:first-child { box-shadow: inset 3px 0 0 var(--c-brass-500); }
/* „kostenlos"-Zellen in der Leistungsuebersicht: nur Farbe, kein Text —
   sechsmal Gruen gegen zwei Preise macht die Grenze auf einen Blick lesbar. */
.table__free { color: var(--c-success); }

/* --------------------------------------------------------- Kontakt-Kanäle -- */
/* /kontakt/: 4 Kanal-Karten (Telefon, Rückruf, E-Mail, WhatsApp) */
.contact-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.channel-card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem;
}
.channel-card .medallion { margin-bottom: 1rem; }
.channel-card h3 { font-size: 1.02rem; }
.channel-card__value {
  margin-top: 0.3rem;
  color: var(--c-forest-700);
  font-weight: 600;
}
.channel-card__note {
  margin-top: 0.45rem;
  font-size: 0.85rem;
  color: var(--c-ink-400);
}
/* -------------------------------------------------------------- CTA-Karten -- */
/* Karten-Paar mit Icon + Link (z. B. /kundenportal/-Platzhalter) */
.cta-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.cta-cards .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 1.75rem 1.6rem;
}
.cta-cards h2, .cta-cards h3 { font-size: 1.12rem; }   /* h2 seit Audit D10 (404/Kundenportal) */
.cta-cards p { color: var(--c-ink-600); }
.cta-cards .link-arrow { margin-top: auto; padding-top: 0.5rem; }

/* --------------------------------------------------------------- Formulare -- */
/* Einstufige Formulare (Kontakt) — Basis-Stile, werden ab Sprint 3 von der
   msform-Engine (.msform) weiterverwendet. Verhalten: pages.js [data-form]. */
.form-card { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}
.form-field { display: grid; gap: 0.45rem; align-content: start; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-ink-700);
}
.form-field label small {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--c-ink-400);
}
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 0.98rem;
  color: var(--c-ink-900);
  background: var(--c-paper);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-field textarea { min-height: 9.5rem; resize: vertical; }
.form-field select { appearance: none; }
.form-field--select { position: relative; }
.form-field--select::after {
  content: "";
  position: absolute;
  right: 0.95rem;
  bottom: 1.15rem;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--c-ink-400);
  border-bottom: 2px solid var(--c-ink-400);
  transform: rotate(45deg);
  pointer-events: none;
}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--c-brass-500);
  box-shadow: var(--ring);
}
.form-field input:user-invalid,
.form-field select:user-invalid,
.form-field textarea:user-invalid {
  border-color: var(--c-danger);
}
/* Honeypot (Formular-Politik §6) — visuell versteckt, für Bots ausfüllbar */
.form-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1.4rem;
}
.form-panel {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.3rem 1.4rem;
  border-radius: var(--radius);
  margin-top: 1.4rem;
}
.form-panel[hidden] { display: none; }
.form-panel svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
}
.form-panel b { display: block; margin-bottom: 0.25rem; }
.form-panel p { font-size: 0.95rem; }
.form-panel--success {
  background: rgba(22, 128, 60, 0.08);
  border: 1px solid rgba(22, 128, 60, 0.25);
  color: var(--c-success);
}
.form-panel--success p { color: var(--c-ink-600); }
.form-panel--error {
  background: rgba(185, 28, 28, 0.06);
  border: 1px solid rgba(185, 28, 28, 0.22);
  color: var(--c-danger);
}
.form-panel--error p { color: var(--c-ink-600); }

/* ------------------------------------------------------------ Dokument-Box -- */
/* Eingerücktes „Dokument im Dokument" (z. B. Muster-Widerrufsformular) */
.doc-box {
  background: var(--c-sand);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.prose .doc-box p + p { margin-top: 0.85em; }
/* Auf einer Sand-Sektion waere die sandfarbene Box unsichtbar (nur der Rahmen
   bliebe) — dort der helle Zwilling. Greift heute nur auf /foerderservice/;
   alle uebrigen .doc-box stehen in Creme-Kontexten und bleiben unveraendert. */
.section--sand .doc-box { background: var(--c-paper); }
/* Rechtsstands-/Quellenzeile am Fuss einer doc-box. Abgesetzt durch Linie und
   Farbe, damit sie nicht als weiteres Argument gelesen wird. */
.doc-box__meta {
  padding-top: 0.9rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--c-ink-400);
}
/* Medienvariante: Text links, kleines Dokument-Bild rechts (erster Einsatz:
   das amtliche Muster in der Vordruck-Box auf /energieausweis-kostenlos/).
   Der Text steckt in einem eigenen Wrapper — die Innenabstaende der doc-box
   kommen sonst aus `.section-stack .doc-box > * + *` (direkte Kinder) und
   wuerden im Grid die Abbildung nach unten schieben. */
.doc-box--media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: start;
}
.section-stack .doc-box--media > * + * { margin-top: 0; }
.doc-box--media .doc-box__text > * + * { margin-top: 0.85em; }
.doc-box--media .doc-box__figure { margin: 0; }
.doc-box--media .doc-box__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: #fff;
}
.doc-box--media figcaption {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--c-ink-400);
}
@media (max-width: 640px) {
  .doc-box--media { grid-template-columns: 1fr; }
  .doc-box--media .doc-box__figure { max-width: 240px; }
}

/* ------------------------------------------------- Warnbox im Artikelfluss -- */
/* .warnbox selbst steht in styles.css (Homepage-Sektion 10) und ist dort auf
   760px zentriert. Im Artikel soll sie die Spaltenbreite nehmen und ihren
   Abstand aus `.prose > * + *` beziehen — sonst reisst der doppelte
   Bodenabstand ein Loch in den Textfluss.
   2026-07-29: Die Artikel benutzten fuer „Achtung/Wichtig/Haeufiger Fehler"
   bisher <blockquote> — optisch ein Zitatstrich, inhaltlich eine Warnung.
   Echte Zitate und die Musterformulierungen bleiben <blockquote>, damit die
   beiden Bedeutungen unterscheidbar sind.
   2026-08-13: `margin-block-end: 0` ersetzt durch den Widget-Rhythmus 1,9em
   (s. Block oben bei `.prose > * + *`). Der Grund fuer die Null bleibt
   richtig — die clamp(2rem,4vw,3rem) aus styles.css sind fuer die Homepage
   gedacht und reissen im Fliesstext ein Loch —, aber gar kein Bodenabstand
   liess den Folgetext an der Box kleben. Diese Regel steht NACH dem
   :is()-Block und gewinnt bei gleicher Spezifitaet ueber die Quellordnung;
   sie muss den Wert deshalb selbst mitbringen. */
.prose .warnbox {
  max-width: none;
  margin-inline: 0;
  margin-block: 1.9em;
}
.prose .warnbox p { margin-top: 0.45rem; color: var(--c-ink-600); }
.prose .warnbox p:first-of-type { margin-top: 0.25rem; }
.prose .warnbox .warnbox__src { margin-top: 0.6rem; }
.prose .warnbox a { color: #7c3a09; }

/* -------------------------------------------------------- Finder-Teaser -- */
/* Weiche Konversionsstelle in der Artikelmitte: oeffnet das ohnehin auf jeder
   Seite vorhandene #finder-modal. Der Href ist /#finder — pages.js delegiert
   darauf, ohne JS landet der Leser auf dem Homepage-Finder. Kein eigenes JS. */
.finder-teaser {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 3vw, 1.5rem);
  padding: clamp(1.3rem, 3vw, 1.7rem);
  background: var(--c-sand);
  border: 1px solid var(--c-line-strong);
  border-left: 4px solid var(--c-brass-500);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.finder-teaser__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: rgba(201, 162, 75, 0.16);
  color: var(--c-brass-700);
}
.finder-teaser__icon svg { width: 24px; height: 24px; }
.finder-teaser__title { font-weight: 700; color: var(--c-forest-800); }
.prose .finder-teaser p { margin-top: 0.2rem; font-size: 0.94rem; color: var(--c-ink-600); }
.prose .finder-teaser .link-arrow { margin-top: 0.5rem; }
.finder-teaser svg { width: 18px; height: 18px; }

/* --------------------------------------------------- Naechste-Schritte-Box -- */
/* Auffangnetz vor der FAQ fuer Leser, die noch nicht kaufen wollen: verteilt
   interne Linkkraft auf Werkzeuge statt auf die Produktseiten. */
.next-steps {
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 1.7rem);
  background: var(--c-paper);
}
.next-steps__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-400);
  margin-bottom: 0.9rem;
}
.next-steps__list { display: grid; gap: 0.15rem; }
.prose .next-steps ul,
.prose .next-steps ol { margin: 0; padding: 0; list-style: none; }
.next-steps__item {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--c-line);
}
.next-steps__item:first-child { border-top: 0; }
.next-steps__item svg { width: 16px; height: 16px; color: var(--c-brass-600); flex: none; align-self: center; }
.next-steps__item span { font-size: 0.92rem; color: var(--c-ink-500, var(--c-ink-400)); }

/* ------------------------------------------------------------ Produkt-Hero -- */
/* Ergänzungen für Produktseiten-Heros (page-hero--forest, ab Sprint 3):
   CTA-Zeile + Preis-Hinweis unter den Badges. */

/* Produkt-Hero mit integrierter Bestellstrecke (Verbrauchs-/Bedarfsausweis):
   heller Homepage-Look, zentrierter Kopf über full-width Embed. */
.product-hero__head {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
.product-hero__head .eyebrow { justify-content: center; }
.product-hero__head .eyebrow::after {
  content: "";
  width: 26px;
  height: 1.5px;
  background: var(--c-brass-500);
}
.product-hero__head .lead { margin-inline: auto; }
.product-hero__head .page-hero__badges { justify-content: center; }
/* Energieberatung: breites msform (Formular + Live-Kosten-Sidebar) unter dem Kopf */
.product-hero .msform { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* ------------------------------------------------------------ Express-Hero -- */
/* /express-energieausweis/ (2026-08-04): Anordnung nach dem Homepage-Hero —
   Copy links, Karte rechts im Look von .hero__finder (styles.css). Die Karte
   trägt die zwei Express-Endpreise als verlinkte Angebots-Zeilen, weil die
   Seite bewusst kein Bestell-Embed hat. Social-Proof und Checks nutzen die
   .hero__*-Atome aus styles.css (auf Unterseiten geladen) unverändert. */
.express-hero .page-hero__grid { align-items: center; }
.express-hero .hero__social { margin-bottom: 1.6rem; }

.express-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(14, 42, 30, 0.04), 0 24px 54px -34px rgba(138, 106, 38, 0.35);
  padding: clamp(1.25rem, 2vw, 1.5rem);
}
.express-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.express-card__title { font-size: 0.95rem; font-weight: 600; color: var(--c-ink-900); }
.express-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--c-brass-700);
  background: var(--c-brass-100);
  border: 1px solid var(--c-brass-400);
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  white-space: nowrap;
}
.express-card__badge svg { width: 13px; height: 13px; }

.express-offer {
  display: block;
  border: 1.5px solid var(--c-line-strong);
  border-radius: 14px;
  padding: 0.95rem 1.1rem;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.express-offer + .express-offer { margin-top: 0.7rem; }
.express-offer:hover { border-color: var(--c-forest-600); background: rgba(22, 67, 47, 0.03); }
.express-offer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 0.75rem;
}
.express-offer__name { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--c-ink-900); }
.express-offer__price { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--c-ink-900); white-space: nowrap; }
.express-offer__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 0.75rem;
  margin-top: 0.3rem;
  font-size: 0.84rem;
  color: var(--c-ink-600);
}
/* „Jetzt starten" als echter .btn (Gold bzw. Ghost wie das Paar in #preise),
   nur kompakter — die ganze Zeile bleibt der Link, der Button macht die
   Klickbarkeit sichtbar. Hover der Zeile hebt den Button mit an, damit die
   Affordanz nicht erst auf dem Button selbst erscheint. */
.express-offer__btn { width: 100%; margin-top: 0.4rem; padding: 0.65rem 0.95rem; font-size: 0.84rem; border-radius: 9px; white-space: nowrap; }
.express-offer__btn .btn__arrow { width: 14px; height: 14px; flex: none; }
.express-offer:hover .express-offer__btn { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.express-offer:hover .express-offer__btn.btn--gold { filter: brightness(1.05); }
.express-offer:hover .express-offer__btn.btn--primary { filter: brightness(1.08); }
.express-offer:hover .express-offer__btn .btn__arrow { transform: translateX(4px); }

/* Hint-Zeile im Look von .hero__finder-hint — hier als Link auf den Finder */
.express-card__hint {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
  padding: 0.9rem;
  border: 1px dashed var(--c-line-strong);
  border-radius: 12px;
  background: var(--c-cream);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-ink-600);
  transition: border-color 0.15s var(--ease);
}
.express-card__hint:hover { border-color: var(--c-forest-600); }
/* > svg:first-child statt „svg": eine generische svg-Regel (0,1,1) schlüge die
   Arrow-Klasse (0,1,0) — dieselbe Falle wie bei .prose a vs. .btn. */
.express-card__hint > svg:first-child { width: 17px; height: 17px; color: var(--c-brass-500); flex: none; }
.express-card__hint strong { color: var(--c-ink-900); }
.express-card__hint-arrow { width: 14px; height: 14px; margin-left: auto; color: var(--c-brass-700); flex: none; }

.express-card__notes { margin-top: 1rem; display: grid; gap: 0.45rem; }
.express-card__notes li { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.8rem; line-height: 1.45; color: var(--c-ink-600); }
.express-card__notes svg { width: 13px; height: 13px; color: var(--c-forest-700); flex: none; margin-top: 0.14em; }

/* ---------------------------------------------------- Bestellstrecken-Embed -- */
/* Bestellstrecke = externes Embed (User-Entscheidung Sprint 3, STATUS.md):
   .embed-shell ist der Einbau-Container ([data-order-embed]); seit 2026-07-17
   steckt darin das Kundenportal-Embed (app_reseller.js), der frühere
   .embed-placeholder ist entfernt (Styles dazu ebenfalls). */
.embed-shell {
  background: var(--c-paper);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  max-width: 56rem;
  margin-inline: auto;
}
/* Full-width-Variante im Produkt-Hero (Embed spannt die Container-Breite).
   Enges Padding (User-Wunsch 2026-08-11): Das Portal-iframe bringt selbst
   Innenabstand mit — das großzügige Basis-Padding verdoppelte die Leere
   und drückte das Formular unter den Falz. */
.embed-shell--wide {
  max-width: none;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding: clamp(0.75rem, 2vw, 1.25rem);
}
/* Ab 1024 px iframe-Breite schaltet das Portal in sein Desktop-Layout
   (Formularkarte ~717 px linksbuendig, rechts eine Tooltip-Spalte) — im
   Embed liest sich das als Loch. Der Deckel unter 1024 px haelt das
   fuellende, zentrierte Tablet-Layout (gemessen 2026-08-11, headless). */
.embed-shell--wide .iframeContainerImmobilienwerker {
  max-width: 62rem;
  margin-inline: auto;
}

/* Das Footer-Desktop-Layout (≥940px) lag hier bis 2026-07-22 als Override, weil styles.css
   eingefroren war; es steht jetzt direkt im .footer-Block von styles.css und gilt damit für
   alle Seiten aus einer Quelle. */
.embed-shell__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.85rem;
  color: var(--c-ink-400);
}
.embed-shell__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.embed-shell__meta svg { width: 15px; height: 15px; color: var(--c-success); }

/* ------------------------------------------------ Widerrufsformular-Embed -- */
/* /widerruf/: Online-Widerrufsformular des Kundenportals als iframe, das erst
   beim Klick entsteht (pages.js, widerrufEmbed()) — DSGVO-Begründung dort.
   Die Karte sitzt IM .prose-Fluss; der Button bekommt seine Farben über die
   .prose a:where(.btn)-Ausnahme oben. min-height wie beim .cal-embed__frame
   in styles.css — niemals height !important, sonst kann das Formular bei
   mehr Inhalt nie scrollen. */
.widerruf-embed {
  background: var(--c-paper);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.widerruf-embed__intro { display: grid; justify-items: start; gap: 0.8rem; }
.widerruf-embed__note { font-size: 0.85rem; line-height: 1.5; color: var(--c-ink-400); }
/* Gemessen am echten Portal-Formular (headless Chrome, 2026-08-11):
   Inhaltshöhe 676 px bei 714 px Breite, 820 px bei 308 px (Mobil-Embed) —
   die min-heights liegen knapp darüber, damit im iframe nichts scrollen
   muss. Wächst das Formular, scrollt es (min-height, nie height). */
.widerruf-embed__frame { min-height: 700px; }
.widerruf-embed__frame iframe { min-height: 700px; }
.widerruf-embed__frame[data-widerruf-state="failed"] { min-height: 0; }
@media (max-width: 640px) {
  .widerruf-embed__frame, .widerruf-embed__frame iframe { min-height: 840px; }
}
.widerruf-embed__fallback { margin-top: 0.8rem; font-size: 0.92rem; color: var(--c-ink-700); }

/* ------------------------------------------------------------ msform (Lead) -- */
/* Mehrstufige Lead-Formulare (Sprint 4, Serviceseiten) — Verhalten:
   pages.js msform-Engine. Layout: Steps-Spalte + Kosten-Sidebar, die auf
   Mobile unter die Steps rutscht. [data-msform-scope] = .msform. */
.msform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
  gap: 1.5rem;
  align-items: start;
  max-width: 66rem;
  margin-inline: auto;
}
.msform.is-done .msform__summary { display: none; }
.msform__step {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.msform__q {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  font-weight: 500;
  color: var(--c-ink-900);
  padding: 0;
}
/* Hinweis-Chip in der Frage selbst: Schritt 1 des Foerdercheck-Formulars ist
   der einzige Schritt mit Checkboxen statt Radios. Das muss man sehen, BEVOR
   man die erste Kachel anklickt — unter der Frage wird es ueberlesen.
   font-family/-size/-weight muessen explizit stehen, sonst erbt der Chip die
   Display-Schrift und die Fragengroesse aus .msform__q. */
.msform__multi {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.6rem;
  vertical-align: middle;
  padding: 0.24rem 0.62rem;
  border-radius: 100px;
  background: var(--c-brass-100);
  color: var(--c-brass-700);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  white-space: nowrap;
}
.msform__multi svg { width: 12px; height: 12px; }
.msform__help {
  margin-top: 0.5rem;
  margin-bottom: 1.4rem;
  font-size: 0.92rem;
  color: var(--c-ink-400);
  max-width: 38rem;
}
.msform__q + .opt-grid,
.msform__q + .form-grid { margin-top: 1.4rem; }
.msform__hint {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--c-danger);
}
.msform__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--c-line);
}
.msform__back {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--c-ink-400);
  transition: color 0.2s var(--ease);
}
.msform__back:hover { color: var(--c-forest-800); }
.msform__back svg { width: 15px; height: 15px; }
.msform__consent {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--c-ink-400);
  text-align: right;
}
.msform__progress { margin-bottom: 1.75rem; }
.msform__progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.55rem;
  font-size: 0.82rem;
}
.msform__progress-top [data-ms-label] {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-forest-700);
}
.msform__progress-note { color: var(--c-ink-400); }
.msform__progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--c-sand);
  overflow: hidden;
}
.msform__progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--c-brass-500);
  transition: width 0.4s var(--ease-out);
}

/* ------------------------------------------------------------ Optionskarten -- */
/* Radio-/Checkbox-Gruppen als klickbare Karten ([data-ms-group]) */
.opt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.1rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
  color: var(--c-ink-700);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.opt:hover { border-color: var(--c-brass-500); }
.opt:has(input:checked) {
  border-color: var(--c-forest-700);
  background: rgba(22, 67, 47, 0.05);
}
.opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.opt__mark {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--c-line-strong);
  background-color: var(--c-paper);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.opt--multi .opt__mark { border-radius: 7px; }
.opt input:checked + .opt__mark {
  border-color: var(--c-forest-700);
  background: var(--c-forest-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.opt input:focus-visible + .opt__mark { box-shadow: var(--ring); }

/* ----------------------------------------------------------- Kosten-Sidebar -- */
/* Live-Kostenübersicht neben den msform-Steps ([data-ms-summary]);
   Werte werden von der pages.js-Preislogik ([data-ms-out]) gesetzt. */
.msform__summary {
  position: sticky;
  top: 5.5rem;
  padding: 1.5rem 1.4rem;
}
.msform__summary h2, .msform__summary h3 { font-size: 1.05rem; margin-bottom: 1rem; }   /* h2 seit Audit D10 */
.summary__rows { display: grid; gap: 0.65rem; }
.summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.9rem;
}
.summary__row dt { color: var(--c-ink-600); }
.summary__row dd { font-weight: 600; color: var(--c-ink-900); white-space: nowrap; }
.summary__row--minus dd { color: var(--c-success); }
.summary__row--total {
  margin-top: 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line-strong);
  font-size: 0.95rem;
}
.summary__row--total dt { font-weight: 600; color: var(--c-ink-900); }
.summary__row--total dd {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--c-forest-800);
}
.summary__bonus {
  margin-top: 1.2rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(201, 162, 75, 0.14);
  font-size: 0.85rem;
}
.summary__bonus b { display: block; color: var(--c-brass-700); margin-bottom: 0.2rem; }
.summary__bonus p { color: var(--c-ink-600); }
.summary__note {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  color: var(--c-ink-400);
  text-align: center;
}

/* ------------------------------------------------------- Vergleichs-Spalten -- */
/* „Ohne / Mit Förderservice"-Gegenüberstellung; .xlist = .checks-Pendant
   mit ✕-Markern (Nachteile) */
.compare-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.compare-col { padding: 1.75rem 1.6rem; }
/* h3 UND h4: Steht über der Gegenüberstellung schon eine Zwischenüberschrift
   (.section-head--sub auf /energieausweis-hausverwaltung/), ist der Karten-Kopf
   semantisch eine h4. Traf die Regel nur h3, fiel der margin-bottom weg — und
   weil global keine Überschrift eine Eigenmarge hat, klebte die Liste ohne
   jeden Abstand am Titel (2026-08-10 gemeldet). :is() hält die Spezifität. */
.compare-col :is(h3, h4) {
  font-size: 1.12rem;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.compare-col--pro { border-color: rgba(22, 67, 47, 0.35); }
.xlist { display: grid; gap: 0.7rem; }
.xlist li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.65rem;
  align-items: start;
  font-size: 0.98rem;
  color: var(--c-ink-700);
}
.xlist li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(185, 28, 28, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ------------------------------------------------------------- Stat-Karten -- */
/* Kennwert-Gegenüberstellung (iSFP-Bonus, Selbstnutzer vs. Vermieter) */
.stat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.stat-card {
  padding: 1.75rem 1.6rem;
  text-align: center;
}
.stat-card__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem);
  color: var(--c-ink-400);
}
.stat-card--hi .stat-card__value { color: var(--c-forest-800); }
.stat-card__label {
  display: block;
  margin-top: 0.35rem;
  font-weight: 650;
  color: var(--c-ink-900);
}
.stat-card__desc {
  margin-top: 0.55rem;
  font-size: 0.9rem;
  color: var(--c-ink-600);
}
.stat-cards + .table-note { text-align: center; }

/* --------------------------------------- Förderprogramme (/energieberatung/) -- */
/* #bundesfoerderung: Wohngebäude-Bild + Fließtext + „Förderung auf einen Blick"-
   Faktenpanel (zweispaltig). #weitere-foerderung: drei Programm-Karten statt
   Aufzählungsliste. */
.foerder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
.foerder__figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 100px;
}
.foerder__figure img { display: block; width: 100%; height: auto; }
.foerder__body { display: grid; gap: 1.5rem; }
.foerder__facts { padding: clamp(1.35rem, 3vw, 1.75rem); }
.foerder__facts-title {
  display: block;
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--c-ink-900);
}
.foerder__facts dl { display: grid; gap: 0.9rem; margin: 0; }
.foerder__facts dl > div { display: grid; gap: 0.2rem; }
.foerder__facts dt {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-brass-700);
}
.foerder__facts dd { margin: 0; color: var(--c-ink-700); line-height: 1.55; }

.program-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0;
}
.program-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.35rem, 3vw, 1.6rem);
}
.program-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--c-brass-100);
  color: var(--c-brass-700);
}
.program-card__icon svg { width: 24px; height: 24px; }
/* Karten-Ueberschrift: /energieberatung/ nutzt die Karte nur mit Icon + p,
   /foerderservice/ braucht darueber einen Titel (h4 unter der h3-Zwischen-
   ueberschrift der Sektion). Der kleinere Abstand zum Absatz haengt an der
   Ueberschrift, damit Karten ohne h4 ihren 0.9rem-Flex-Gap behalten. */
.program-card h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-ink-900);
}
.program-card h4 + p { margin-top: -0.35rem; }
.program-card p { color: var(--c-ink-700); line-height: 1.6; font-weight: 500; }
/* Fussnote unter einem Kartenraster mittig — analog zu `.stat-cards + .table-note`. */
.program-cards + .table-note { text-align: center; }

.foerder-outro { max-width: 66ch; margin: 0 auto; text-align: center; color: var(--c-ink-600); line-height: 1.75; }

@media (max-width: 780px) {
  .foerder { grid-template-columns: 1fr; }
  .foerder__figure { position: static; }
}

/* ---------------------------------------------------------------- 4 Schritte -- */
/* Variante des Homepage-Steps-Grids für 4 Prozessschritte (Förderservice).
   Bis 2026-07-28 standen die 4 Spalten schon ab 768px — eine `.step`-Karte hat
   aber 251px min-content, vier davon brauchen mit Abständen 1064px + 80px
   Container-Polsterung, also ~1144px Viewport. Zwischen 768 und 1144px schob
   das Raster die Seite aus dem Viewport (bei 768px um 228px). Jetzt 2×2 im
   Mittelband, vier Spalten erst ab 1180px (dort messen die Tracks 260px).
   minmax(0,1fr) statt 1fr, damit ein künftiges langes Wort den Track nicht
   erneut aufzieht — dieselbe Lehre wie bei `.post-layout` weiter unten. */
@media (min-width: 768px) {
  .steps__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Die gestrichelte Verbindungslinie (styles.css, .steps__grid::before) läuft
     waagerecht durch EINE Reihe. Im 2×2-Layout verbände sie nur die obere und
     ließe die untere hängen — dort deshalb aus. */
  .steps__grid--4::before { display: none; }
}
@media (min-width: 1180px) {
  .steps__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps__grid--4::before { display: block; }
}
/* 2×2-Benefits-Variante für 4 Karten (Desktop-Default ist 3-spaltig) */
@media (min-width: 1024px) {
  .benefits__grid--2 { grid-template-columns: 1fr 1fr; }
}
/* Vierer-Variante der Programm-Karten. Das `auto-fit minmax(220px,1fr)` des
   Basisrasters legt bei mittlerer Breite 3 Karten in Reihe eins und lässt die
   vierte allein darunter stehen (bei 900px gemessen). Deshalb dieselben Stufen
   wie bei `.steps__grid--4`: 1 → 2×2 → 4. */
.program-cards--4 { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .program-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .program-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Fünf Situationskarten (/express-energieausweis/ #zielgruppen): das Basis-
   auto-fit schafft im 1120px-Container nur 4 Spalten und strandet die fünfte
   Karte allein in Reihe zwei — ab 1180px deshalb fünf feste Spalten;
   darunter übernimmt das auto-fit der Basisklasse (3+2 bzw. 2+2+1). */
@media (min-width: 1180px) {
  .program-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Sechs Vorteilskarten in 3×2 (/energieausweis-hausverwaltung/ #vorteile).
   Das Basis-auto-fit legt bei 1120px fünf Karten in Reihe eins und lässt die
   sechste allein darunter — mit festen drei Spalten stehen sie 3+3. */
.program-cards--3 { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .program-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 940px) {
  .program-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Exit-Modal ENTFERNT 2026-07-29 (User: „Exit popup entfernen überall").
   Hier stand der Inhalts-Skin des Exit-Intent-Popups (.exit-body, .exit-body__phone,
   .exit-body__note) plus die .exit-body-Regel im ≤560px-Block weiter unten. Mit
   entfernt wurde .checks--light: die Variante trug laut Kommentar „Exit-Modal,
   Forest-Hero", tatsächlich benutzten sie nur die beiden Exit-Modals
   (/energieberatung/, /foerderservice/) — der Forest-Hero setzt sie nirgends.
   Wer sie zurückbraucht (helle .checks auf dunklem Grund), findet sie in der
   Git-Historie dieser Datei. */

/* Hinweis: Die .checks-Reparaturen (hängende Marke statt Grid-<li>, align-content in
   .checklist-card) standen am 2026-07-21 kurzzeitig hier — sie sind mit der Aufhebung des
   Frozen-Status noch am selben Tag nach styles.css gewandert, wo die Komponente definiert
   ist, und gelten dadurch auch für die Startseite. */

/* -------------------------------------------------------------- Finder-Modal -- */
/* Ausweis-Finder-Quiz auf allen Unterseiten (components/finder-modal.njk,
   pages.js finderModal): alle Modal-/Wizard-Styles inkl. der Fußnote
   (.finder__note) kommen aus styles.css — eine Quelle für Homepage + Unterseiten
   (seit dem Hell-Umbau 2026-07-23). Hier bewusst nichts mehr. */

/* ------------------------------------------------------------ Artikel-Hero -- */
/* Magazin-Artikel (layouts/post.njk, Sprint 5): heller Hero mit
   Kategorie-Chip, H1 und Meta-Zeile (Autor · Datum · Lesezeit). */
.post-hero__content { max-width: 52rem; }
.post-hero__content .chip { margin-bottom: 1rem; }
.post-hero__content h1 {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 600;
  /* Die Trennung langer Komposita („Sanierungsempfehlungen") steht seit
     2026-07-28 global in styles.css (`overflow-wrap` für h1–h4, `hyphens`
     für h1/h2) — die Einzelregel hier ist damit entfallen. */
}
.post-hero__content .lead { margin-top: 1rem; max-width: 46rem; }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.4rem;
  font-size: 0.88rem;
  color: var(--c-ink-400);
}
.post-meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.post-meta svg { width: 15px; height: 15px; color: var(--c-brass-600); }
.post-meta__author { color: var(--c-ink-700); font-weight: 500; }

/* Aufmacherbild des Artikels (layouts/post.njk, Front Matter `image`).
   Die Quelldatei ist 3:2 — auf Desktop waere das ueber die volle
   Containerbreite (1120px) 747px hoch; zusammen mit H1 und Lead (565px)
   begaenne der Artikeltext dann erst bei 1.300px. Deshalb ab 768px auf
   21:9 beschnitten (480px), darunter bleibt 3:2, weil ein 390px breites
   Bild auch bei 3:2 nur 260px hoch wird. 21:9 zeigt vom Original die
   Hoehe 18–82 % — die Motive sind darauf geprueft (Koepfe liegen ueber,
   Haende und Unterlagen unter der Bildmitte, beide bleiben drin).
   `object-fit: cover` + `aspect-ratio` machen den Zuschnitt, nicht die
   Datei — ein Motivwechsel braucht damit kein neues Derivat. */
.post-cover {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.post-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media (min-width: 768px) {
  .post-cover img { aspect-ratio: 21 / 9; }
}

/* ---------------------------------------------------- Artikel-Grid + TOC -- */
.post-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.post-layout--single { grid-template-columns: minmax(0, 1fr); }
/* 2026-07-29: Das TOC hatte einen Scrollbalken. Ursache war nicht das Padding,
   sondern der Zeilenumbruch: die Spalte ist konstant 272px breit (Track 1 des
   .post-layout-Grids bekommt immer sein 17rem-Maximum, weil der zweite Track
   ein Min von 0 hat), Textbreite 207px ≈ 29 Zeichen/Zeile. Bei h2-Längen von
   bis zu 97 Zeichen belegte ein Eintrag im Schnitt 3 Zeilen → 1.229px Boxhöhe
   bei 796px verfügbarer Höhe. Gelöst über kurze TOC-Labels (`data-toc-label`
   am h2, s. _config/filters.js) — damit ist jeder Eintrag einzeilig und 18
   Einträge messen 589px. max-height/overflow bleiben als Netz für sehr flache
   Fenster (< ~700px) stehen; der Balken selbst wird ausgeblendet, damit auch
   dort nichts sichtbar scrollt. Nichts wird dadurch unerreichbar — Wheel,
   Trackpad und Tastatur funktionieren weiter. */
.post-toc {
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 6.5rem);
  overflow-y: auto;
  scrollbar-width: none;
  padding: 1rem 1.1rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.post-toc::-webkit-scrollbar { display: none; }
.post-toc__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-400);
  line-height: 1.3;
  margin-bottom: 0.6rem;
}
.post-toc ol {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
}
.post-toc a {
  display: block;
  padding: 0.35rem 0.6rem;
  border-left: 2px solid var(--c-line);
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--c-ink-600);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.post-toc a:hover { color: var(--c-forest-800); }
.post-toc a.is-active {
  color: var(--c-forest-800);
  font-weight: 600;
  border-left-color: var(--c-brass-500);
  background: rgba(22, 67, 47, 0.05);
}
.post-body > .prose { max-width: 72ch; }
/* Anker-Versatz unterm Sticky-Header kommt global aus styles.css
   (scroll-padding-top: 96px) — hier KEIN zusätzliches scroll-margin. */

/* ------------------------------------------------- Abbildung im Artikel -- */
/* Bilder MITTEN im Text (components/post-figure.njk), nicht der Aufmacher —
   der ist .post-cover weiter oben. Sie erklären eine Stelle des Artikels und
   tragen deshalb immer eine Beschriftung.

   Abstand: NUR am Bild selbst, nicht am Nachbarn. `.prose > * + *` gibt
   allen Geschwistern 1,05em; hier sind 1,9em nötig, damit die Abbildung
   nicht am Text klebt. Der Abstand nach unten kommt ebenfalls von hier und
   kollabiert mit dem margin-top des nächsten Elements zum größeren Wert —
   eine h2 danach behält also ihre 2,4em. Genau darum steht hier KEINE Regel
   für `.post-figure + *`: die wäre mit 0,2,0 spezifischer als `.prose h2`
   (0,1,1) und würde die Überschrift heranziehen. */
.prose > .post-figure { margin-block: 1.9em; }
.post-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  /* Platzhalterfläche, solange das lazy-Bild noch nicht da ist — width/height
     am <img> halten das Kästchen ohnehin, hier geht es nur um die Farbe. */
  background: var(--c-sand);
}
.post-figure figcaption {
  margin-top: 0.75rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--c-brass-500);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--c-ink-600);
}
.post-figure__label {
  display: block;
  font-weight: 700;
  color: var(--c-forest-800);
}

/* 2026-08-01: Hier stand zusätzlich eine Gegenüberstellung `.post-figure--duo`
   (zwei Bilder nebeneinander, je eigene Beschriftung, unter 560px gestapelt).
   Auf Wunsch des Users ersatzlos entfernt — s. components/post-figure.njk. */

/* --------------------------------------------- Muster-Abbildung mit Marken
   components/muster-marker.njk — echtes Dokument-Rendering + Goldmarken, die
   beim Hover/Fokus (Desktop) bzw. Tipp (Touch, .is-open via markerFigs() in
   pages.js) eine Erklär-Box direkt an der Marke öffnen. Das Widget trägt
   zusätzlich .post-figure (Bild-Grundstil + figcaption kommen von dort);
   Namensraum data-marker-*. Pin-Look bewusst identisch zu .muster__pin in
   styles.css — wer den einen ändert, zieht den anderen nach.
   Die Box öffnet nach OBEN (bottom-Anker + Pfeilspitze) — Marken nahe der
   Bild-Oberkante brauchen erst eine Platzierungs-Variante. */
.marker-fig__sheet {
  position: relative;
  display: block;
  max-width: 33rem; /* Hochformat-Blatt: volle Prose-Breite wäre 1.093 px hoch */
  margin-inline: auto;
}
.marker-fig__sheet img { box-shadow: 0 14px 34px rgba(20, 32, 27, 0.1); }
.marker-fig__spot {
  /* 0×0-Ankerpunkt auf der Bildfläche; Pin und Box zentrieren sich darauf.
     :hover greift über die Kind-Elemente (Hover auf Pin ODER offener Box). */
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: 0;
  height: 0;
}
.marker-fig__pin {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin: -0.85rem 0 0 -0.85rem; /* zentriert auf dem Anker, ohne transform */
  border: 0;
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  color: #2a2010;
  background: var(--c-brass-500);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 4px 10px rgba(20, 32, 27, 0.35);
  cursor: pointer;
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}
.marker-fig__spot:hover .marker-fig__pin,
.marker-fig__spot.is-open .marker-fig__pin {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px #fff, 0 0 0 8px rgba(201, 162, 75, 0.35), 0 6px 14px rgba(20, 32, 27, 0.4);
}
/* Ruhiger Dauer-Puls als Einladung („hier passiert etwas") — verschwindet,
   sobald die Marke offen oder unter dem Zeiger ist. */
@media (prefers-reduced-motion: no-preference) {
  .marker-fig__pin::after {
    content: "";
    position: absolute;
    inset: -0.35rem;
    border-radius: 50%;
    border: 2px solid rgba(201, 162, 75, 0.75);
    animation: markerFigPulse 2.6s ease-out infinite;
    pointer-events: none;
  }
  .marker-fig__spot:hover .marker-fig__pin::after,
  .marker-fig__spot.is-open .marker-fig__pin::after {
    animation: none;
    opacity: 0;
  }
  @keyframes markerFigPulse {
    0%   { transform: scale(0.8); opacity: 0.9; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
  }
}
/* Erklär-Box: öffnet mittig über der Marke. visibility schaltet beim Öffnen
   mit 0s (transition-delay-Override) — dieselbe Lehre wie bei .modal. */
.marker-fig__tip {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  z-index: 3;
  width: max-content;
  max-width: min(19rem, 72vw);
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-paper);
  box-shadow: 0 10px 26px rgba(20, 32, 27, 0.18);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-ink-600);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition:
    opacity 0.18s var(--ease-out),
    transform 0.18s var(--ease-out),
    visibility 0s linear 0.18s;
}
.marker-fig__tip strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--c-forest-800);
}
.marker-fig__tip::after {
  /* Pfeilspitze zur Marke */
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--c-paper);
}
.marker-fig__spot:hover .marker-fig__tip,
.marker-fig__spot.is-open .marker-fig__tip,
.marker-fig__pin:focus-visible + .marker-fig__tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s, 0s, 0s;
}
/* Randnahe Marken: zentriert liefe die Box aus dem Blatt — und bleibt auch
   unsichtbar layoutwirksam (horizontaler Seitenueberlauf auf Mobil, 66 px bei
   der 84,5-%-Marke der Seite-4-Abbildung). --start haengt die Box mit ihrer
   linken Kante an die Marke (waechst nach rechts), --end mit der rechten
   (waechst nach links); der Pfeil bleibt auf der Marke. Muss NACH der
   Sichtbar-Regel stehen (gleiche Spezifitaet, Quellordnung entscheidet). */
.marker-fig__tip--start { left: -1.1rem; transform: translate(0, 6px); }
.marker-fig__tip--start::after { left: 1.1rem; }
.marker-fig__tip--end { left: auto; right: -1.1rem; transform: translate(0, 6px); }
.marker-fig__tip--end::after { left: auto; right: 1.1rem; margin-left: 0; margin-right: -6px; }
.marker-fig__spot:hover .marker-fig__tip--start,
.marker-fig__spot.is-open .marker-fig__tip--start,
.marker-fig__pin:focus-visible + .marker-fig__tip--start,
.marker-fig__spot:hover .marker-fig__tip--end,
.marker-fig__spot.is-open .marker-fig__tip--end,
.marker-fig__pin:focus-visible + .marker-fig__tip--end {
  transform: translate(0, 0);
}
@media (max-width: 560px) {
  .marker-fig__pin {
    width: 1.45rem;
    height: 1.45rem;
    margin: -0.725rem 0 0 -0.725rem;
    font-size: 0.7rem;
  }
}

/* KEINE „aus der Textspalte ausbrechende" Variante — gemessen, nicht geschätzt:
   bei 1440px ist `.post-body` 792px breit und `.prose` (72ch) 772px. Es sind
   also 20px zu holen. Ein Ausbruch auf die üblichen 46rem = 736px macht das
   Bild sogar KLEINER als die Textspalte. Wer so etwas wieder einbauen will,
   müsste zuerst `.prose` schmaler machen — und das ist eine Entscheidung über
   die Lesbarkeit aller Artikel, nicht über ein Bild. */

/* ------------------------------------------------ Effizienzklassen-Skala -- */
/* components/effizienzskala.njk. Bewusst HTML statt generiertem Bild — neun
   Buchstaben plus neun Grenzwerte setzt kein Bildmodell zuverlässig, und ein
   falscher Wert fiele niemandem mehr auf. Hard-Stop-Farben je Stufe, keine
   Verläufe (stehende User-Vorgabe); `--fg` kommt aus der Komponente und hält
   den Klassenbuchstaben auf seinem Balken über 4,5:1. */
.eskala { display: grid; gap: 0.3rem; }
.eskala__head,
.eskala__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10.5rem 13rem;
  gap: 0.75rem;
  align-items: center;
}
.eskala__head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-400);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--c-line);
}
/* Die Balkenbreite ist Prozent des ersten Grid-Tracks — deshalb muss Track 1
   ein minmax(0,1fr) sein, sonst zieht der breiteste Balken die Spalte auf. */
.eskala__bar {
  display: flex;
  align-items: center;
  height: 2rem;
  width: var(--w);
  min-width: 3.4rem;
  padding-inline: 0.7rem;
  background: var(--c);
  border-radius: 0 4px 4px 0;
}
.eskala__k {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--fg);
}
.eskala__val {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-900);
}
.eskala__typ { font-size: 0.86rem; line-height: 1.45; color: var(--c-ink-600); }

/* Deutsche 9er-Skala gegen die EU-7er-Skala. Beide Spalten teilen sich ein
   Raster aus neun gleich hohen Zeilen; die EU-Stufen, die zwei deutsche
   Klassen aufnehmen (B = A und B, G = G und H), überspannen zwei Zeilen.
   Dadurch zeigt sich die Zusammenlegung ohne eine einzige Verbindungslinie. */
.skala-vgl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(0.8rem, 3vw, 1.5rem);
  row-gap: 0.55rem;
}
/* Beide Ueberschriften liegen in DERSELBEN Rasterzeile, die Balken in der
   zweiten — dadurch starten die zwei Skalen immer auf gleicher Hoehe. Mit je
   einer eigenen Spalten-Box taten sie das nicht: bei 390px bricht die rechte
   Ueberschrift auf drei Zeilen um, die linke auf zwei, und die Balken standen
   versetzt. `align-self: end` haelt die kuerzere Ueberschrift unten buendig. */
.skala-vgl__head {
  align-self: end;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-ink-600);
}
.skala-vgl__grid { display: grid; grid-template-rows: repeat(9, 2.3rem); gap: 0.25rem; }
.skala-vgl__cell {
  grid-row: span var(--span, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--c);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
}
.skala-vgl__cell small { font-size: 0.68rem; font-weight: 500; opacity: 0.92; }

/* NWG-Skala A bis G (components/effizienzskala.njk, Makro nwgSkala).
   Kein Balken-Farbband wie bei .eskala: die Laenge eines Balkens muesste einen
   Zahlenwert abbilden, und die Klassengrenzen der Anlage 10a stehen noch aus.
   Stattdessen eine Klassenmarke plus Klartext — was da steht, ist belegt.
   min-width: 0 auf der Textzelle: ohne das setzt das Grid die Spalte auf die
   laengste Zeile und schiebt bei 390px die Seite auf (gemessen beim
   Muster-Inserat, s. dort). */
/* Eigene Karte — anders als `.eskala` daneben. Das ist Absicht und kein
   Versehen: `.eskala` ist ein durchgehendes Farbband ueber die volle
   Textbreite und liest sich auch ohne Rahmen als Grafik. Hier sind es
   schmale Klassenmarken plus Fliesstext; ohne Container lagen Chips und
   Text lose auf dem Cremeton, waehrend Tabelle, Rechner und MEPS-Ampel
   ringsum als weisse Karten stehen (gemeldet 2026-08-03). Gleiche Tokens
   wie `.table-wrap`, damit die Karten im Artikel eine Familie bleiben. */
.nwg-skala {
  display: grid;
  gap: 0.3rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-paper);
  box-shadow: var(--shadow-xs);
}
/* Auf `.section--sand` wuerde Weiss auf Sand kippen — dort denselben Griff
   nutzen wie `.doc-box` (s. CLAUDE.md Teil 3). Heute steht das Makro nur in
   `.prose` auf Creme, die Regel ist Vorsorge fuer den naechsten Einsatzort. */
.section--sand .nwg-skala { background: var(--c-paper); }
.nwg-skala__head,
.nwg-skala__row {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
}
.nwg-skala__head {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-400);
  margin-bottom: 0.15rem;
}
.nwg-skala__k {
  display: grid;
  place-items: center;
  height: 2.3rem;
  border-radius: 4px;
  background: var(--c);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.nwg-skala__bez { min-width: 0; font-size: 0.9rem; line-height: 1.45; color: var(--c-ink-700); }
.nwg-skala__note {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--c-ink-400);
}

/* MEPS-Ampel (Makro mepsAmpel). Der Faktor traegt die Farbe, der Text bleibt
   auf Papier — eine ganzflaechig eingefaerbte Zeile waere bei drei Stufen
   untereinander zu laut und der Fliesstext darauf schlechter lesbar. */
.meps-ampel { display: grid; gap: 0.55rem; }
.meps-ampel__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c);
  background: var(--c-paper);
}
.meps-ampel__f {
  display: inline-grid;
  place-items: center;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--c);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  text-align: center;
}
.meps-ampel__txt { min-width: 0; font-size: 0.9rem; line-height: 1.5; color: var(--c-ink-700); }
.meps-ampel__txt b { display: block; color: var(--c-ink-900); }
@media (max-width: 560px) {
  .meps-ampel__row { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .meps-ampel__f { justify-self: start; }
}

/* ------------------------------------------------- Muster-Immobilienanzeige -- */
/* components/musterinserat.njk. Ebenfalls HTML statt Bild: der Block lebt von
   exakten Kennwerten in einem Artikel über abmahnfähige Falschangaben. */
.prose > .inserat { margin-block: 1.9em; }
.inserat__card {
  background: var(--c-paper);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 3vw, 1.5rem);
  box-shadow: var(--shadow-xs);
}
.inserat__eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-400);
}
.prose .inserat__title {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--c-forest-800);
}
.prose .inserat__teaser { margin-top: 0.3rem; font-size: 0.92rem; color: var(--c-ink-600); }
/* `.prose ul` (0,1,1) setzt padding-left, disc und Grid-Gap — die Faktenliste
   muss das mit zwei Klassen (0,2,0) zurückholen, sonst steht sie eingerückt
   mit Aufzählungspunkten NEBEN den Ziffernmarken. */
.prose .inserat__facts {
  margin-top: 0.95rem;
  padding: 0.9rem 0 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  border-top: 1px solid var(--c-line);
}
.prose .inserat__facts li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--c-ink-600);
}
/* min-width: 0 ist Pflicht, nicht Kosmetik: In einem Flex-Item steht die
   Vorgabe auf `auto`, das Item schrumpft also nie unter seinen laengsten
   Begriff. Ohne den Wrapper-Span und diese Zeile schob
   „Energieverbrauchsausweis" die Seite bei 390px um 12px auf. */
.inserat__txt { min-width: 0; }
.inserat__no {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--c-brass-500);
  color: #2a2010;
  font-size: 0.75rem;
  font-weight: 700;
}
.inserat figcaption {
  margin-top: 0.75rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--c-brass-500);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--c-ink-600);
}
.inserat__label { display: block; font-weight: 700; color: var(--c-forest-800); }

@media (max-width: 720px) {
  /* Die Kopfzeile trägt nur Spaltennamen — gestapelt ist sie sinnlos. Die
     Werte behalten ihre eigenen Zeilen, der Balken läuft über die volle
     Breite und bleibt als Längenvergleich lesbar. */
  .eskala__head { display: none; }
  .eskala__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--c-line);
  }
  .eskala__typ { font-size: 0.82rem; }
  .skala-vgl__grid { grid-template-rows: repeat(9, 2rem); }
  .skala-vgl__cell small { font-size: 0.62rem; }
}

/* -------------------------------------------------------------- Share-Row -- */
.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
}
.share-row__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-ink-400);
  margin-right: 0.4rem;
}
.share-row__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  background: var(--c-paper);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-ink-700);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.share-row__btn:hover { border-color: var(--c-brass-500); color: var(--c-forest-800); }
/* Marken-Logos als Inline-SVG (fill = Markenfarbe im Markup); flex:none, sonst
   staucht der Pill-Button das Icon, wenn das Label auf Mobil eng wird. */
.share-row__icon { width: 15px; height: 15px; flex: none; }
.share-row__btn.is-copied {
  border-color: var(--c-success);
  color: var(--c-success);
  background: rgba(22, 128, 60, 0.07);
}

/* -------------------------------------------------------------- Author-Box -- */
.author-box {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  padding: 1.4rem 1.5rem;
}
.author-box__avatar {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-forest-800);
  color: var(--c-brass-400);
  font-family: var(--font-display);
  font-size: 1.35rem;
}
.author-box__name { font-weight: 650; color: var(--c-ink-900); }
.author-box__role { font-size: 0.85rem; color: var(--c-brass-700); margin-top: 0.1rem; }
.author-box__bio { font-size: 0.9rem; color: var(--c-ink-600); margin-top: 0.5rem; }
.author-box .link-arrow { margin-top: 0.6rem; font-size: 0.9rem; }

/* Autoren-Links — Byline, Author-Box und Karten-Meta verlinken auf die
   Detailseiten /autoren/<slug>/ (Register: src/_data/authors.js). Farbe erbt
   vom Meta-Text, nur die Messing-Unterstreichung zeigt den Link an. Alle drei
   liegen ausserhalb von .prose — die dortige Spezifitaets-Ausnahme ist hier
   nicht noetig. */
.post-meta__author a,
.article-card__meta a,
.author-box__name a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-brass-400);
  text-underline-offset: 3px;
}
.post-meta__author a:hover,
.article-card__meta a:hover,
.author-box__name a:hover {
  color: var(--c-brass-600);
}

/* ------------------------------------------------------------ Artikel-Karten -- */
/* Magazin-Index ([data-articles], Filter via pages.js) + Related-Sektion */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.article-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.6rem 1.5rem;
}
/* Featured Image der Karte. `.article-card` ist ein Flex-Column mit
   `align-items: flex-start` — ohne `align-self: stretch` schruempfte das
   Bild auf seine Inhaltsbreite. Die negativen Raender heben die
   Kartenpolsterung (1.6rem 1.5rem) auf, damit das Bild randlos oben
   sitzt; der Radius wird nur oben wiederholt. */
.article-card__media {
  align-self: stretch;
  display: block;
  margin: -1.6rem -1.5rem 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.article-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.article-card__title { font-size: 1.12rem; line-height: 1.35; }
.article-card__title a { transition: color 0.2s var(--ease); }
.article-card__title a:hover { color: var(--c-brass-600); }
.article-card__teaser { font-size: 0.92rem; color: var(--c-ink-600); flex: 1; }
.article-card__meta {
  display: grid;
  gap: 0.15rem;
  font-size: 0.8rem;
  color: var(--c-ink-400);
}
.article-card .link-arrow { padding-top: 0.35rem; }

/* --------------------------------------------------------------- Rechner -- */
/* Rechner-Karten der Magazin-Artikel ([data-calc], calculators.js)

   2026-07-31: Von der flachen Sandfläche auf eine Karte mit Kopf-Split
   umgestellt (User-Wunsch). Aufbau für ALLE vier Module gleich:
     .calc > .calc__head (Sand, Icon + Eyebrow + Titel) + .calc__body
   Die Messing-Kante oben ist ein ::before am Root — deshalb braucht .calc
   `overflow: hidden`, damit Kante und Sandkopf dem Radius folgen.
   Nur der Ablauf-Rechner (.calc--ablauf) hängt eine eigene Ergebniszone als
   Geschwister von .calc__body an; die anderen drei behalten ihre
   Ergebnis-Karte INNERHALB von .calc__body samt --ok/--warn/--bad. */
/* Oben eckig, unten rund (User-Wunsch 2026-07-31) — dasselbe Motiv wie bei
   .warnbox: mit umlaufendem Radius rundete die Messing-Kante an den oberen
   Ecken mit und lief nicht als gerader Balken durch. Auch der obere 1px-Rahmen
   ist raus, damit die Kante wirklich die oberste Zeile der Karte ist. */
.calc {
  position: relative;
  overflow: hidden;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-top: 0;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.calc::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--c-brass-500);
}
.calc__head {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.85rem, 2.5vw, 1.1rem);
  padding: clamp(1.3rem, 3.5vw, 1.7rem) clamp(1.3rem, 3.5vw, 1.9rem);
  background: var(--c-sand);
  border-bottom: 1px solid var(--c-line);
}
.calc__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: rgba(201, 162, 75, 0.16);
  color: var(--c-brass-700);
}
.calc__icon svg { width: 24px; height: 24px; }
.calc__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-brass-700);
  margin-bottom: 0.2rem;
}
.calc__body { padding: clamp(1.3rem, 3.5vw, 1.9rem); }
/* Die Rechner stehen in .prose — dort tragen h3/h4 ein margin-top von 1,6–1,9em
   (pages.css ~228). Im Kartenkopf riss das den Titel vom Eyebrow los. */
.calc__head .calc__title { margin-top: 0; }
.calc__title { font-size: 1.15rem; margin-bottom: 0.35rem; }
.calc__sub { font-size: 0.9rem; color: var(--c-ink-600); }
.calc__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.calc__option {
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  background: var(--c-paper);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-ink-700);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.calc__option:hover { border-color: var(--c-brass-500); }
.calc__option.is-active {
  border-color: var(--c-forest-700);
  background: var(--c-forest-800);
  color: #fff;
}
.calc__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: end;
}
.calc__row .form-field { flex: 1 1 14rem; }
/* Datumsfeld etwas groesser als die Standard-Formularfelder — es ist die
   einzige Eingabe der Karte. Das native Kalender-Icon bleibt bewusst stehen
   (vertraute Bedienung, Tastatur + mobile Picker inklusive) und bekommt nur
   eine Hover-Flaeche; ein nachgebauter Button waere in Firefox doppelt. */
/* Nicht bis an den Kartenrand ziehen — ein Datum braucht keine 1000 px. */
.calc__date { flex: 0 1 22rem; }
.calc__date input[type="date"] { padding: 0.9rem 1rem; font-size: 1.05rem; }
.calc__date input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 6px;
  transition: background-color 0.2s var(--ease);
}
.calc__date input[type="date"]::-webkit-calendar-picker-indicator:hover { background: rgba(201, 162, 75, 0.22); }
.calc__q { font-weight: 650; color: var(--c-ink-900); margin-bottom: 0.9rem; }
.calc__step[hidden] { display: none; }
.calc__nav {
  display: flex;
  gap: 1.25rem;
  margin-top: 1.1rem;
  font-size: 0.88rem;
}
.calc__nav button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--c-ink-400);
  transition: color 0.2s var(--ease);
}
.calc__nav button:hover { color: var(--c-forest-800); }
.calc__result {
  margin-top: 1.2rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--c-line-strong);
  background: var(--c-paper);
  font-size: 0.95rem;
}
.calc__result[hidden] { display: none; }
/* Diese vier Regeln formatieren den innerHTML-Blob der Module 1, 3 und 4.
   Der Ablauf-Rechner rendert seit 2026-07-31 aus statischem Markup mit
   eigenen Klassen — dort wuerden sie u. a. das <b> der Ampel-Pille auf
   display:block zwingen und die Pille zerlegen. Deshalb ausgenommen.
   (Der Kennwert-Rechner auf /energieausweis-kostenlos/ braucht die Ausnahme
   nicht: er ist keine `.calc`, sondern die Hero-Karte `.kw-card`.) */
.calc:not(.calc--ablauf) .calc__result b { display: block; margin-bottom: 0.3rem; }
.calc:not(.calc--ablauf) .calc__result p { color: var(--c-ink-600); }
.calc:not(.calc--ablauf) .calc__result p + p { margin-top: 0.55rem; }
.calc:not(.calc--ablauf) .calc__result .btn { margin-top: 0.9rem; }
.calc__result--ok { border-color: rgba(22, 128, 60, 0.35); }
.calc__result--ok b { color: var(--c-success); }
.calc__result--warn { border-color: rgba(180, 83, 9, 0.4); }
.calc__result--warn b { color: var(--c-warn); }
/* Foerder-Rechner (2026-07-29): Bonus-Ankreuzfelder + Rechtsstands-Hinweis. */
.calc__checks { display: grid; gap: 0.55rem; margin-top: 1.1rem; }
.calc__checks label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--c-ink-700);
  cursor: pointer;
}
.calc__checks input { margin-top: 0.15rem; accent-color: var(--c-forest-800); flex: none; }
.calc__checks[hidden] { display: none; }
.calc__submit { margin-top: 1.2rem; }
.calc__note { margin-top: 0.9rem; font-size: 0.8rem; color: var(--c-ink-400); }
.calc__result__sum {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.4rem);
  line-height: 1.1;
  color: var(--c-forest-800);
  margin-bottom: 0.35rem;
}
.calc__result--bad { border-color: rgba(185, 28, 28, 0.35); }
.calc__result--bad b { color: var(--c-danger); }

/* ------------------------------------------- Flaechen-Rechner (Modul 7) -- */
/* Nur `.calc--flaeche` (2026-08-13). Er ist der einzige Rechner mit einem
   Modus-Umschalter UND mehreren Eingabefeldern; die geteilten .calc-Abstaende
   sind darauf nicht ausgelegt. Gemessen im Ist-Zustand: die Chips lagen mit
   **0 px** auf dem ersten Feld-Label, umgebrochene Feldzeilen standen auf
   13 px, Label zu Feld auf 7 px — die Karte las sich als ein Klumpen.

   Bewusst gescoped: `.calc__options` traegt in den drei Quiz-Modulen die
   Antwort-Chips, deren Abstand ueber `.calc__q` geregelt ist. Eine Aenderung
   an der geteilten Klasse haette alle sechs Bestandsrechner verschoben. */
.calc--flaeche .calc__modes {
  margin-bottom: clamp(1.35rem, 3vw, 1.7rem);
  padding-bottom: clamp(1.35rem, 3vw, 1.7rem);
  border-bottom: 1px solid var(--c-line);
}
.calc--flaeche .calc__modes-label {
  margin-bottom: 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-400);
}
.calc--flaeche .calc__row { row-gap: 1.3rem; column-gap: 0.9rem; }
.calc--flaeche .form-field { gap: 0.55rem; }
.calc--flaeche .calc__submit { margin-top: clamp(1.5rem, 3.5vw, 1.9rem); }
.calc--flaeche .calc__note { margin-top: 1.15rem; }
/* Die vier Masse gehoeren in EINE Zeile. Mit dem geerbten flex-basis von
   14rem passten nur drei nebeneinander, und die Geschosshoehe stand allein
   ueber die volle Kartenbreite — das liest sich wie ein Layout-Fehler. */
.calc--flaeche [data-calc-group="volumen"] .form-field { flex: 1 1 9.5rem; }
/* Der Jahresverbrauch ist keine Flaechenangabe, sondern die Kuer: Er schaltet
   Kennwert und Effizienzklasse dazu. Deshalb abgesetzt statt als viertes
   gleichrangiges Feld in derselben Zeile. */
.calc--flaeche .calc__optional {
  margin-top: clamp(1.35rem, 3vw, 1.7rem);
  padding-top: clamp(1.35rem, 3vw, 1.7rem);
  border-top: 1px dashed var(--c-line-strong);
}
.calc--flaeche .calc__optional-head {
  margin-bottom: 0.7rem;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--c-ink-700);
}
.calc--flaeche .calc__optional .form-field { flex: 0 1 22rem; }

/* ------------------------------------------------- Ablauf-Rechner (Extras) -- */
/* Nur .calc--ablauf: Ampel-Pille, Klartext-Countdown, 10-Jahres-Zeitstrahl und
   Erinnerungs-Block. Die Ampelfarbe laeuft ueber drei Custom Properties, die
   calculators.js per Tonklasse am Root umschaltet — so faerben sich Punkt,
   Zahl, Balken und Flaeche aus einer Quelle. Die rgba-Werte sind die
   Alpha-Varianten der Tokens --c-success / --c-warn / --c-danger, gleiche
   Praxis wie bei .chip--ok / .chip--info und .calc__result--ok. */
.calc--ablauf {
  --calc-tone: var(--c-ink-600);
  --calc-soft: var(--c-sand);
  --calc-tint: transparent;
}
.calc--ablauf.is-ok   { --calc-tone: var(--c-success); --calc-soft: rgba(22, 128, 60, 0.11); --calc-tint: rgba(22, 128, 60, 0.06); }
.calc--ablauf.is-warn { --calc-tone: var(--c-warn);    --calc-soft: rgba(180, 83, 9, 0.11);  --calc-tint: rgba(180, 83, 9, 0.06); }
.calc--ablauf.is-bad  { --calc-tone: var(--c-danger);  --calc-soft: rgba(185, 28, 28, 0.11); --calc-tint: rgba(185, 28, 28, 0.06); }

/* Ergebniszone: volle Kartenbreite mit Trennlinie statt Karte-in-Karte.
   Flaeche einfarbig — im Projekt gilt „kein Verlauf" (User-Vorgabe, s.
   STATUS.md 2026-07-24, am 2026-07-31 erneut bestaetigt). */
.calc--ablauf > .calc__result {
  margin-top: 0;
  padding: clamp(1.3rem, 3.5vw, 1.9rem);
  border: 0;
  border-top: 1px solid var(--c-line);
  border-radius: 0;
  background: var(--calc-tint);
  font-size: 1rem;
}

.calc__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--calc-soft);
  color: var(--calc-tone);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.calc__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.calc__big {
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.35rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--calc-tone);
}
.calc__big[hidden] { display: none; }
.calc__text { margin-top: 0.6rem; color: var(--c-ink-600); }

/* Zeitstrahl. Die Fuellbreite kommt aus JS und wird in einem rAF gesetzt,
   damit die Transition laeuft; bei „Bewegung reduzieren" killt der globale
   Switch in styles.css die Dauer. Der Heute-Marker steht bewusst nicht am
   Rand (JS klemmt auf 2–98 %), sonst haengt sein Label aus der Karte. */
.calc__timeline { margin-top: 1.5rem; }
.calc__timeline[hidden] { display: none; }
.calc__track {
  position: relative;
  height: 10px;
  margin-bottom: 2.1rem;
  border-radius: 999px;
  background: var(--c-sand-deep);
}
.calc__fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0;
  border-radius: inherit;
  background: var(--calc-tone);
  transition: width 0.9s var(--ease-out);
}
.calc__now {
  position: absolute;
  top: -7px;
  left: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-900);
  white-space: nowrap;
  transition: left 0.9s var(--ease-out);
}
.calc__now[hidden] { display: none; }
.calc__now i { width: 2px; height: 24px; border-radius: 1px; background: var(--c-ink-900); }
.calc__scale {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--c-ink-400);
}
.calc__scale span:last-child { text-align: right; }
.calc__scale b { display: block; font-weight: 650; color: var(--c-ink-700); }

/* Erinnerungs-Block. Zwei Wege nebeneinander: E-Mail (braucht den noch nicht
   gebauten Versand, s. STATUS.md) und .ics (laeuft heute schon vollstaendig
   im Browser). Die Panels [data-form-success]/[data-form-error] MUESSEN
   Geschwister des <form> bleiben — pages.js simpleForms() sucht sie im
   form.parentElement. */
.calc__remind {
  margin-top: 1.6rem;
  padding: clamp(1.1rem, 3vw, 1.4rem);
  background: var(--c-sand);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
}
.calc__remind[hidden] { display: none; }
/* flex-start statt center: bricht die Zeile auf schmalen Viewports um, saesse
   das Icon sonst mittig zwischen beiden Zeilen. */
.calc__remind-head {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 1.02rem;
  color: var(--c-forest-800);
}
.calc__remind-head svg { width: 20px; height: 20px; margin-top: 0.15em; color: var(--c-brass-600); }
.calc__remind-sub { margin-top: 0.3rem; font-size: 0.92rem; color: var(--c-ink-600); }
.calc__remind-sub b { color: var(--c-ink-900); }
.calc__remind-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.8rem;
  margin-top: 1.1rem;
}
.calc__remind-row .form-field { flex: 0 1 24rem; }
.calc__remind .form-consent {
  display: flex;
  max-width: 42rem;
  margin-top: 0.9rem;
}
.calc__remind .form-panel { margin-top: 1.1rem; }
.calc__remind-alt {
  display: grid;
  gap: 0.15rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line-strong);
  font-size: 0.85rem;
  color: var(--c-ink-400);
}
.calc__remind-alt[hidden] { display: none; }
.calc__remind-alt .link-arrow { justify-self: start; cursor: pointer; }

.calc__cta { margin-top: 1.5rem; }
.calc__cta[hidden] { display: none; }
.calc--ablauf .calc__cta .btn { margin-top: 0; }

/* ------------------------------------- Kennwert-Rechner im Hero (.kw-*) -- */
/* /energieausweis-kostenlos/ — die Rechner-Karte rechts im Split-Hero, im Look
   von .express-card / .hero__finder. Der Rechner sitzt bewusst OBEN: die Seite
   verspricht eine kostenlose Rechnung, also muss sie oben stattfinden (User,
   2026-08-05 — die erste Fassung hatte hier einen Hero ganz ohne Handlung).

   Bewusst KEINE .calc-Huelle: .calc ist die Widget-Form des Magazins (randlose
   Oberkante, Messingstreifen, Kopfzeile mit Icon) und sitzt dort IM Fliesstext.
   Im Hero braucht es eine freistehende Karte — dieselbe Formensprache wie die
   Nachbarseiten, nicht eine Fremdform.

   Die Ampelfarbe laeuft ueber dieselbe --calc-tone-Mechanik wie beim
   Ablauf-Rechner: eine Quelle fuer Zahl und Klassen-Pille.

   HERO-SPLIT (2026-08-05): Der Hero-Content ist in __head (Eyebrow + H1) und
   __rest (Lead + Checks) geteilt, damit die Karte auf Mobil ZWISCHEN H1 und
   Antwort steht — vorher lag sie bei 390 px komplett unter dem Falz und das
   „kostenlos rechnen"-Versprechen war beim Landen unsichtbar. Die Quelltext-
   Reihenfolge bleibt head → rest → card (Antwort in den ersten 60 Woertern,
   AI-Overview); umsortiert wird nur visuell ueber Grid-Areas. Desktop zeigt
   das alte Bild: Kopf und Rest links untereinander, Karte rechts ueber beide
   Zeilen. row-gap 0 + margin-top am __rest stellen dort den alten
   H1→Lead-Abstand (1.1rem aus .page-hero .lead) wieder her — der normale
   Grid-gap (2rem+) risse ein sichtbares Loch in die Copy. */
.kw-hero .page-hero__grid {
  align-items: start;
  grid-template-areas: "head" "card" "rest";
}
.kw-hero__head { grid-area: head; }
.kw-hero__rest { grid-area: rest; }
.kw-hero .kw-card { grid-area: card; }
.kw-hero .hero__social { margin-bottom: 1.6rem; }
/* Der Lead bringt margin-top 1.1rem mit — auf Mobil steckt zwischen Karte und
   Lead schon der Grid-gap, die Summe waere zu viel Luft. */
.kw-hero__rest .lead { margin-top: 0; }
@media (min-width: 992px) {
  .kw-hero .page-hero__grid {
    grid-template-areas: "head card" "rest card";
    grid-template-rows: auto 1fr;
    row-gap: 0;
  }
  .kw-hero__rest { margin-top: 1.1rem; }
}

.kw-card {
  --calc-tone: var(--c-forest-800);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(14, 42, 30, 0.04), 0 24px 54px -34px rgba(138, 106, 38, 0.35);
  overflow: hidden;
}
.kw-card.is-ok   { --calc-tone: var(--c-success); }
.kw-card.is-warn { --calc-tone: var(--c-warn); }
.kw-card.is-bad  { --calc-tone: var(--c-danger); }

.kw-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem clamp(1.1rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-cream);
}
.kw-card__title { font-size: 0.95rem; font-weight: 600; color: var(--c-ink-900); }
.kw-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(201, 162, 75, 0.16);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--c-brass-700);
  white-space: nowrap;
}
.kw-card__badge svg { width: 13px; height: 13px; }

.kw-card__body { display: grid; gap: 0.9rem; padding: clamp(1.1rem, 2vw, 1.4rem); }
.kw-card__body[hidden] { display: none; }
.kw-card__body .btn--block { margin-top: 0.25rem; }

/* Verbrauch + Einheit in einer Zeile: die Einheit ist eine Eigenschaft der
   Zahl daneben, kein eigener Schritt. min-width:0 ist Pflicht — Grid-Kinder
   stehen sonst auf `auto` und das Zahlenfeld sprengt die schmale Spalte. */
.kw-field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 8.5rem); gap: 0.7rem; }
.kw-field-pair > * { min-width: 0; }

.kw-card__error {
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid rgba(185, 28, 28, 0.35);
  background: rgba(185, 28, 28, 0.06);
  font-size: 0.88rem;
  color: var(--c-danger);
}
.kw-card__error[hidden] { display: none; }

.kw-card__note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--c-ink-400);
}
.kw-card__note svg { width: 14px; height: 14px; color: var(--c-brass-600); flex: none; }

/* Aufklapp-Block fuer die selteneren Angaben. Natives <details> — funktioniert
   ohne JS, ist von Haus aus tastatur- und screenreaderfest, und die Felder
   stehen auch zugeklappt im DOM (kennwert.js liest sie dort). */
.kw-more { border-top: 1px solid var(--c-line); padding-top: 0.85rem; }
.kw-more > summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--c-forest-800);
  cursor: pointer;
  list-style: none;
}
.kw-more > summary::-webkit-details-marker { display: none; }
/* Eigenes Dreieck statt des UA-Markers: der Standard-Marker steht je nach
   Browser anders und laesst sich nicht einfaerben. */
.kw-more > summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-block: 4px solid transparent;
  flex: none;
  transition: transform 0.2s var(--ease);
}
.kw-more[open] > summary::before { transform: rotate(90deg); }
.kw-more > summary:hover { color: var(--c-brass-700); }
.kw-more__body { display: grid; gap: 0.9rem; margin-top: 1rem; }
.kw-more__hint { font-size: 0.8rem; line-height: 1.5; color: var(--c-ink-600); }

/* --- Ergebniszone (tauscht mit .kw-card__body) ------------------------- */
.kw-card__result { padding: clamp(1.1rem, 2vw, 1.4rem); }
.kw-card__result[hidden] { display: none; }
.kw__label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-400);
}
.kw__value { display: flex; align-items: baseline; gap: 0.45rem; margin-top: 0.3rem; }
.kw__value b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.1rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--calc-tone);
}
.kw__value span { font-size: 0.95rem; color: var(--c-ink-600); }
/* Klassen-Pille. Die Farbe kommt aus --calc-tone, NICHT aus einer zweiten
   Klassenfarb-Tabelle: die echten Klassenfarben stehen in der Skala (#skala),
   und zwei Farbquellen fuer dieselbe Aussage laufen frueher oder spaeter
   auseinander. */
.kw__klasse {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  background: var(--c-paper);
  border: 1px solid var(--calc-tone);
  font-size: 0.9rem;
  color: var(--c-ink-700);
}
.kw__klasse b { font-family: var(--font-display); font-weight: 700; color: var(--calc-tone); }
.kw__band { margin-top: 0.9rem; font-size: 0.92rem; font-weight: 600; color: var(--c-ink-900); }
.kw__basis { margin-top: 0.5rem; font-size: 0.78rem; line-height: 1.6; color: var(--c-ink-400); }
.kw__warn {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  background: rgba(180, 83, 9, 0.07);
  border: 1px solid rgba(180, 83, 9, 0.3);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--c-ink-700);
}
.kw__warn svg { width: 17px; height: 17px; flex: none; margin-top: 0.1rem; color: var(--c-warn); }
.kw-card__result .btn--block { margin-top: 1.1rem; }
/* Trust-Zeile direkt unter dem Gold-CTA — nutzt die kw-card__note-Optik,
   zentriert, weil sie zum vollbreiten Button darueber gehoert. */
.kw__trust { margin-top: 0.7rem; justify-content: center; }
/* Zweitpfad Bedarfsausweis: per Linie von der Kauf-Zone abgesetzt, damit er
   als Alternative gelesen wird, nicht als Teil des CTA-Blocks. */
.kw__alt {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--c-ink-600);
}
.kw__after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: 0.9rem;
}
.kw__again {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.84rem;
  color: var(--c-ink-400);
  cursor: pointer;
}
.kw__again:hover { color: var(--c-forest-800); }
.kw__again svg { width: 14px; height: 14px; }

/* Hinweiszeile unter der Skala in #skala. Vor der Berechnung eine Einladung,
   danach die Einordnung samt Abstand zur naechstbesseren Klasse. */
.kw-skala__hint { font-size: 0.9rem; color: var(--c-ink-400); }
.kw-skala__hint.is-active {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--c-paper);
  border: 1px solid var(--c-line-strong);
  font-weight: 600;
  color: var(--c-ink-900);
}

/* Marker in der Effizienzskala. Der Rahmen liegt auf der ganzen Zeile statt
   auf dem Balken: der Balken ist je Klasse verschieden breit, ein Rahmen dort
   waere mal 3 cm und mal 12 cm lang und laese sich nicht als „Ihre Klasse"
   lesen. Kein Verlauf, keine Animation — nur Flaeche, Rahmen und Fettung. */
.eskala__row.is-mark {
  position: relative;
  background: var(--c-paper);
  outline: 2px solid var(--c-forest-800);
  outline-offset: 2px;
  border-radius: 4px;
}
.eskala__row.is-mark .eskala__val,
.eskala__row.is-mark .eskala__typ { color: var(--c-ink-900); font-weight: 650; }

/* Ausweis-Finder als offene Karte (components/finder-inline.njk). Die Karte
   selbst bringt ihre komplette Optik aus styles.css mit; hier wird nur die
   Breite freigegeben — .finder__wizard ist sonst auf 660px zentriert und
   saesse schmaler als die doc-box darueber. */
.free-finder .finder__wizard { max-width: none; }

/* ------------------------------------------------------------- Inline-CTA -- */
/* CTA-Box im Artikelfluss (Muster der Alt-Artikel) */
.inline-cta {
  background: var(--c-forest-800);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.25rem);
  text-align: center;
}
/* Segment-Marke ueber der Ueberschrift. Auf /magazin/energieausweis-nichtwohngebaeude/
   muss auf den ersten Blick klar sein, dass das Angebot NICHT die
   Wohngebaeude-Bestellstrecke ist (User-Hinweis 2026-08-03) — der Artikel
   fuehrt bewusst nicht auf /verbrauchsausweis/. Messing auf Dunkelgruen. */
.inline-cta__eyebrow {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(201, 162, 75, 0.18);
  /* brass-100 statt brass-400: der dunklere Ton lag auf der Messing-Pille
     ueber Forest bei 4,44:1 und damit unter AA fuer kleinen Text (gemessen
     2026-08-03). brass-100 kommt auf 6,12:1. */
  color: var(--c-brass-100);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.inline-cta h3 { color: #fff; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); }
.inline-cta p { color: rgba(255, 255, 255, 0.78); margin-top: 0.6rem; }
.inline-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.25rem;
}
.inline-cta__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  margin-top: 1.1rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------------------------------------------------------------- FAQ-Suche -- */
/* /fragen-und-antworten/: Freitextsuche über der Kategorie-Filterleiste
   (pages.js faqSearch). Blendet Treffer per .is-search-hidden auf den
   .faq__item aus (das `hidden`-Attribut bleibt main.js' Kategoriefilter).
   .list-empty ist der geteilte Empty-State (auch /standorte/ + /magazin/). */
.faq-search { max-width: 26rem; margin: 0 auto 1.25rem; }
.faq-search__count { font-size: 0.85rem; color: var(--c-ink-400); margin: 0; }
.faq__item.is-search-hidden { display: none; }
.list-empty {
  text-align: center;
  padding: 1.25rem 1rem;
  margin-top: 1rem;
  color: var(--c-ink-600);
  background: var(--c-sand);
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------- Standorte (.loc) -- */
/* /standorte/ (S6): Anker-Leiste (16 Bundesländer), Bundesland-Gruppen mit
   Zähl-Badge und .loc-table — Desktop als Tabelle, <=900px als Karten-Liste
   (Umbau im Responsive-Block unten) */
.loc-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0; /* letztes Element in .loc-controls — Abstand via controls-gap */
}
.loc-anchors a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-ink-600);
  text-decoration: none;
  background: var(--c-paper);
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.loc-anchors a span { font-size: 0.72rem; font-weight: 700; color: var(--c-ink-400); }
.loc-anchors a:hover { border-color: var(--c-forest-800); color: var(--c-forest-800); }
.loc-group { margin-top: clamp(2rem, 4.5vw, 3rem); }
.loc-group__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.loc-group__head h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); font-weight: 600; }
.loc-group__head .badge svg { width: 14px; height: 14px; }
.loc-table td { font-size: 0.92rem; }
.loc-table .loc-contact a,
.loc-table .loc-cta a { display: block; text-decoration: none; white-space: nowrap; }
.loc-table .loc-contact a { color: var(--c-ink-600); }
.loc-table .loc-cta a { color: var(--c-forest-800); font-weight: 600; }
.loc-table .loc-contact a:hover,
.loc-table .loc-cta a:hover { text-decoration: underline; }
.loc-table .loc-contact a + a,
.loc-table .loc-cta a + a { margin-top: 0.25rem; }

/* Such-/Sortier-Toolbar + A–Z-Ansicht (pages.js locDirectory). In der rechten
   Spalte (.loc-controls) vertikal gestapelt: Suchfeld voll breit, darunter
   Sort-Pills, darunter Zaehler. */
.loc-tools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  margin-bottom: 0;
}
.loc-tools__search { max-width: none; }
.loc-tools__sort { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.loc-tools__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.loc-tools__count {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-ink-600);
  margin: 0;
}
/* Reset-Button neben dem Zaehler — erscheint nur bei aktivem Filter (pages.js). */
.loc-tools__reset {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  padding: 0.35rem 0; /* Tap-Ziel auf ~33px; Zeile bleibt durch align-items zentriert */
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-forest-700);
  cursor: pointer;
}
.loc-tools__reset svg { width: 13px; height: 13px; }
.loc-tools__reset:hover { text-decoration: underline; }
/* PFLICHT: display oben explizit gesetzt (0,1,0) schlaegt das UA-[hidden]. */
.loc-tools__reset[hidden] { display: none; }
.loc-land {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--c-ink-400);
  margin-left: 0.4rem;
  white-space: nowrap;
}
/* PFLICHT: der 900px-Block gibt tr/.loc-anchors explizite display-Werte, die
   das UA-[hidden] schlagen — ohne diese Overrides greift das Verstecken auf
   Mobile nicht. */
.loc-anchors[hidden], .loc-tools[hidden] { display: none; }
.loc-table tr[hidden] { display: none; }

/* ----------------------------------------------- Standorte-Karte (.loc-map) -- */
/* Interaktive Deutschlandkarte auf /standorte/ (Include components/map-germany).
   Desktop: obere Zone als 50/50-Grid — links die grosse Karte, rechts die
   Steuerelemente (.loc-controls). Die Tabellen (.loc-tables) stehen in voller
   Breite darunter, daher ist die Karte NICHT mehr sticky. Eigener Sichtbarkeits-
   Kanal .is-map-hidden (pages.js) — strikt getrennt vom Such-[hidden]. Mobile-
   Regeln im Responsive-Block unten (Karte per Toggle). */
.loc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.loc-map-wrap { min-width: 0; }
.loc-map {
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px; /* moderater Deckel — SVG ist Hochformat (586:793) */
  margin-inline: auto;
}
/* Rechte Spalte der oberen Zone: Toolbar + Anker-Pills vertikal gestapelt. */
.loc-controls {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  min-width: 0;
}
/* Tabellen-Zone: eigene .section (Cream-Grund) unter der Sand-Sektion. Der
   frueher hier gesetzte margin-top-Trenner entfaellt — die Abstaende liefern
   jetzt die --section-y-Paddings beider Sektionen (kein doppelter Abstand). */
.loc-tables { margin-top: 0; }
/* Die obere Zone liegt jetzt auf .section--sand — daher Fuellung/Strich
   gegenueber dem alten Cream-Grund invertiert (Fill=Cream, Stroke=Sand), damit
   die Bundeslaender auf Sand sichtbar bleiben. Hover=Brass / Aktiv=Forest wie
   zuvor. */
.loc-map__path {
  fill: var(--c-cream);
  stroke: var(--c-sand);
  stroke-width: 2;
  cursor: pointer;
  transition: fill 0.2s var(--ease);
}
.loc-map__path:hover { fill: var(--c-brass-400); }
.loc-map__path.is-active { fill: var(--c-forest-800); }
.loc-map__path:focus-visible {
  outline: 2px solid var(--c-brass-500);
  outline-offset: 1px;
}
.loc-map__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  fill: var(--c-ink-600);
  text-anchor: middle;
  pointer-events: none;
}
.loc-map__label--sm { font-size: 8px; }
.loc-map__legend {
  min-height: 1.5rem; /* verhindert Layout-Sprung beim Auswaehlen */
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--c-ink-600);
}
.loc-map__reset {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--c-forest-700);
  cursor: pointer;
}
.loc-map__reset:hover { text-decoration: underline; }
/* Karten-Kanal: Klassen-Selektor (0,2,0) schlaegt den 900px-Block, der
   .loc-group / .loc-anchors a nur mit (0,1,0) adressiert. */
.loc-group.is-map-hidden,
.loc-anchors a.is-map-hidden { display: none; }
/* Toggle nur mobil (Responsive-Block); auf Desktop ausgeblendet. Der spaeter
   geladene Selektor schlaegt das .btn display:inline-flex bei gleicher Spezifitaet. */
.loc-map__toggle { display: none; }

/* ------------------------------------------------- Generator (.gen, S7) -- */
/* /pflichtangaben-generator/: 9-Schritt-Wizard (generator.js) — nutzt die
   msform-/opt-/form-Klassen aus S2/S4; hier nur die generator-eigenen Teile:
   Hinweis-Boxen, Upsell-Panels, Ergebnis-Tabs, Output, Copy-States, Karten. */
.gen-notice,
.gen-legal {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.gen-notice { margin-bottom: 1.5rem; }
.gen-legal { margin-top: 2rem; }
.gen-notice > svg,
.gen-legal > svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 0.15rem;
  color: var(--c-brass-600);
}
.gen-notice p,
.gen-legal p { font-size: 0.92rem; color: var(--c-ink-600); }
.opt-grid--stack { grid-template-columns: 1fr; }
.gen-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 1.1rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid rgba(22, 128, 60, 0.35);
  border-radius: var(--radius);
  background: rgba(22, 128, 60, 0.07);
}
.gen-note > svg { width: 18px; height: 18px; flex: none; margin-top: 0.1rem; color: var(--c-success); }
.gen-note p { font-size: 0.9rem; color: var(--c-ink-700); }
.gen-ok {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-success);
}
.gen-upsell {
  margin-top: 1.4rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid rgba(180, 83, 9, 0.35);
  border-radius: var(--radius);
  background: rgba(180, 83, 9, 0.06);
}
.gen-upsell h2, .gen-upsell h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); color: var(--c-warn); }
.gen-upsell > p { margin-top: 0.5rem; color: var(--c-ink-600); font-size: 0.95rem; }
.gen-upsell .checks { margin-top: 1rem; }
.gen-upsell__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.gen-upsell__note { margin-top: 0.9rem; font-size: 0.85rem; color: var(--c-ink-400); }
.gen-result__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.gen-result__head h2, .gen-result__head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 600;
}
.gen-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
}
.gen-tab {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-ink-600);
  background: var(--c-paper);
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.gen-tab:hover { border-color: var(--c-forest-700); color: var(--c-forest-800); }
.gen-tab.is-active {
  background: var(--c-forest-800);
  border-color: var(--c-forest-800);
  color: #fff;
}
.gen-output {
  margin-top: 1.1rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-sand);
}
.gen-output__text {
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--c-ink-700);
}
.gen-copy { margin-top: 1rem; }
.gen-copy.is-copied {
  background: var(--c-success);
  border-color: var(--c-success);
  color: #fff;
}
.gen-abk {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--c-line-strong);
}
.gen-abk h3 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-ink-400);
  margin-bottom: 0.5rem;
}
.gen-abk .gen-output__text { font-size: 0.88rem; }
.gen-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.75rem;
}
.gen-card { padding: 1.4rem; }
.gen-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}
.gen-card p { margin-top: 0.5rem; font-size: 0.9rem; color: var(--c-ink-600); }
.gen-card .checks { margin-top: 0.9rem; }
.gen-card .checks li { font-size: 0.88rem; }
.gen-card .btn { margin-top: 1.1rem; }
.checks--spread { margin-block: 1.4rem; gap: 0.85rem; }

/* ------------------------------------------- Anfrage-Popup (NWG, S9) -- */
/* components/nwg-anfrage-modal.njk. Die Modal-Huelle (.modal, .modal__dialog,
   .modal__heading, .modal__note) steht in styles.css — sie teilt sich der
   Popup mit dem Finder und dem Rueckruf. Hier nur, was das Formular braucht.

   Warum in pages.css und nicht in styles.css: reine Unterseiten-Komponente,
   die Startseite laedt pages.css nicht und braucht den Popup auch nicht.

   Zwei Spalten erst ab 560px. Darunter untereinander — ein 2800er-Zahlenfeld
   und ein Select nebeneinander sind auf 390px nicht mehr bedienbar. */
.nwg-form__shell { padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.5rem) 0.5rem; }
.nwg-form { display: grid; gap: 1.05rem; }
.nwg-form__row { display: grid; gap: 1.05rem; }
@media (min-width: 560px) {
  .nwg-form__row { grid-template-columns: 1fr 1fr; }
}
/* Der Chevron von .form-field--select sitzt per bottom: 1.15rem auf der
   Feldhoehe auf. Das passt, solange das Label einzeilig bleibt — bei
   „Nutzungszonen bekannt?" tut es das auch auf 390px. */
.nwg-form__hint {
  margin: -0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--c-ink-400);
}
.nwg-form .form-consent { max-width: none; }
.nwg-form__submit { justify-self: start; }
/* Die Panels sind Geschwister des Formulars (simpleForms sucht sie in
   form.parentElement) — ihr margin-top aus .form-panel wuerde hier oben eine
   Luecke lassen, weil das Formular beim Erfolg auf hidden geht. */
.nwg-form__shell .form-panel { margin-top: 0; }

/* ------------------------------------------------------------- Responsive -- */
@media (max-width: 900px) {
  /* Standort-Tabellen werden zur Karten-Liste (Spec S6: kein Horizontal-Scroll) */
  .loc-table { min-width: 0; }
  .loc-table thead { display: none; }
  .loc-table tbody { display: block; }
  .loc-table tr {
    display: block;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--c-line);
  }
  .loc-table tr:last-child { border-bottom: 0; }
  .loc-table td { display: block; padding: 0; border-bottom: 0; }
  .loc-table .loc-city { font-size: 1rem; }
  .loc-table .loc-addr { margin-top: 0.15rem; color: var(--c-ink-400); }
  .loc-table .loc-contact { margin-top: 0.45rem; }
  .loc-table .loc-contact a { overflow-wrap: anywhere; white-space: normal; }
  .loc-table .loc-cta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 0.55rem; }
  .loc-table .loc-cta a { white-space: normal; }
  .loc-table .loc-cta a + a { margin-top: 0; }
  /* Karte: einspaltig, nicht sticky; nur per Toggle einblendbar (pages.js) */
  .loc-layout { grid-template-columns: 1fr; }
  .loc-map-wrap { position: static; display: none; }
  .loc-map-wrap.is-open { display: block; margin-bottom: clamp(1.25rem, 4vw, 2rem); }
  /* :not([hidden]): ohne JS bleibt der Button aus — das UA-[hidden] gewinnt,
     weil dieser Selektor ein gesetztes hidden nicht ueberschreibt. */
  .loc-map__toggle:not([hidden]) {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
  }
  .contact-channels { grid-template-columns: repeat(2, 1fr); }
  .msform { grid-template-columns: 1fr; }
  .msform__summary { position: static; }
  /* minmax(0,1fr): breite Tabellen im Artikel dürfen den Track nicht
     über den Viewport hinaus aufziehen (1fr-Min ist sonst min-content) */
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  /* Die Desktop-Kompaktion (s. .post-toc oben) hier zurückdrehen: mobil steht
     das TOC im Fluss, hat also alle Höhe der Welt, und die engeren Werte
     drückten die Tap-Targets auf 28,7px. */
  .post-toc { position: static; max-height: none; order: -1; padding: 1.25rem 1.3rem; }
  .post-toc a { padding: 0.55rem 0.7rem; font-size: 0.9rem; }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .page-hero__badges { gap: 0.4rem; }
  .opt-grid { grid-template-columns: 1fr; }
  .compare-cols { grid-template-columns: 1fr; gap: 0.9rem; }
  .stat-cards { grid-template-columns: 1fr; gap: 0.9rem; }
  .msform__nav { flex-wrap: wrap; }
  .msform__nav .btn { width: 100%; justify-content: center; }
  .msform__back { margin-right: 0; }
  .msform__consent { text-align: center; }
  .articles-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .author-box { flex-direction: column; }
  .inline-cta__actions .btn { width: 100%; justify-content: center; }
  .calc__row .form-field { flex-basis: 100%; }
  .calc__row .btn,
  .calc__remind-row .btn { width: 100%; justify-content: center; }
  .calc__remind-row .form-field { flex-basis: 100%; }
  .calc__head { gap: 0.8rem; }
  .calc__scale { font-size: 0.74rem; gap: 0.6rem; }
  .calc__now { font-size: 0.62rem; }
  .table { font-size: 0.9rem; }
  .table th, .table td { padding: 0.7rem 0.85rem; }
  /* Karten-Layout der Standort-Tabellen (900px-Block) nicht wieder aufheben */
  .loc-table td { padding: 0; }
  /* Toolbar stapeln; Zähler linksbündig (ohne margin-left: auto) */
  .loc-tools { flex-direction: column; align-items: stretch; }
  .loc-tools__search { max-width: none; }
  .loc-tools__count { margin-left: 0; }
  .contact-channels { grid-template-columns: 1fr; gap: 0.9rem; }
  .cta-cards { grid-template-columns: 1fr; gap: 0.9rem; }
  .form-grid { grid-template-columns: 1fr; }
  .gen-cards { grid-template-columns: 1fr; }
  .gen-upsell__actions .btn { width: 100%; justify-content: center; }
  .gen-card .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   AUDIT-FIXES 2026-07-16
   1) Footer-Öffnungszeiten sind im Unterseiten-Footer jetzt ein <span>
      (statt Dummy-Link, A11y) — Optik von .footer__contacts a (styles.css)
      übernehmen, ohne Hover.
   2) DSGVO-Consent-Checkboxen: .form-consent (Kontaktformular) und Checkbox-
      Variante von .msform__consent (Schlussstep energieberatung/foerderservice).
   ========================================================================== */
.footer__contacts span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
}

.form-consent {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: var(--c-ink-400);
  max-width: 26rem;
  cursor: pointer;
}

.form-consent input[type="checkbox"],
.msform__consent input[type="checkbox"] {
  flex: none;
  margin-top: 0.15em;
  width: 1rem;
  height: 1rem;
  accent-color: var(--c-forest-800);
}

.msform__consent label {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  text-align: left;
  cursor: pointer;
}

/* ------------------------------------------- Hausverwaltungen (B2B-Seite) -- */
/* /energieausweis-hausverwaltung/ — eigener Namensraum `hv-` nach dem Muster
   von `.express-*` und `.kw-*`. Nur was fehlt: Hero-Modifier, Konditionskarte
   und ein Bild-Text-Paar. Alles Uebrige (Tabelle, doc-box, program-cards,
   steps, Formular) kommt unveraendert aus den bestehenden Komponenten.

   Der Hero folgt dem Muster von .express-hero: Copy links, Karte rechts.
   Die Karte traegt keine verlinkten Angebots-Zeilen wie dort, weil auf dieser
   Seite nichts direkt bestellbar ist — sie fuehrt auf die Anfrage.

   HERO-SPLIT wie bei .kw-hero: __head (Eyebrow + H1) und __rest (Lead +
   Checks) sind getrennt, damit die Konditionskarte auf Mobil ZWISCHEN H1 und
   Lead steht. Ungeteilt begann sie bei 390 px erst bei 672 px — auf einem
   kleinen Geraet komplett unter dem Falz, und die Konditionen sind das
   Versprechen dieser Seite. Quelltext-Reihenfolge bleibt head → rest → card;
   umsortiert wird nur visuell ueber Grid-Areas. Wer den Split zurueckbaut,
   misst bei 390 px den Karten-Beginn nach. */
.hv-hero .page-hero__grid {
  align-items: start;
  grid-template-areas: "head" "card" "rest";
}
.hv-hero__head { grid-area: head; }
.hv-hero__rest { grid-area: rest; }
.hv-hero .hv-card { grid-area: card; }
.hv-hero .eyebrow { display: block; margin-bottom: 0.6rem; }
/* Der Lead bringt margin-top 1.1rem mit — auf Mobil steckt zwischen Karte und
   Lead schon der Grid-gap, die Summe waere zu viel Luft. */
.hv-hero__rest .lead { margin-top: 0; }
@media (min-width: 992px) {
  /* Desktop wieder das gewohnte Bild: Copy links untereinander, Karte rechts
     ueber beide Zeilen. row-gap 0 + margin-top am __rest stellen den alten
     H1→Lead-Abstand her; der normale Grid-gap risse ein Loch in die Copy. */
  .hv-hero .page-hero__grid {
    grid-template-areas: "head card" "rest card";
    grid-template-rows: auto 1fr;
    row-gap: 0;
  }
  .hv-hero__rest { margin-top: 1.1rem; }
}

.hv-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(14, 42, 30, 0.04), 0 24px 54px -34px rgba(138, 106, 38, 0.35);
  padding: clamp(1.25rem, 2vw, 1.5rem);
}
/* flex-wrap: bei 390 px quetscht das Badge den Titel sonst auf zwei Zeilen —
   umbrochen faellt es stattdessen unter den Titel und beide bleiben einzeilig. */
.hv-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}
.hv-card__title { font-size: 0.95rem; font-weight: 600; color: var(--c-ink-900); }
.hv-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--c-brass-700);
  background: var(--c-brass-100);
  border: 1px solid var(--c-brass-400);
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  white-space: nowrap;
}
.hv-card__badge svg { width: 13px; height: 13px; }

/* Die einzige Forest-Flaeche in der weissen Karte traegt den zweiten Vorteil
   nach dem Preis: den direkten Draht. Zwei Vorbesetzungen sind auf
   User-Entscheidung 2026-08-06 wieder gewichen — erst ein verguenstigter
   Testausweis (halbierter Einstiegspreis laesst den regulaeren als Aufschlag
   erscheinen), dann die Erfassungspauschale (zu erklaerungsbeduerftig).
   Begruendung jeweils im Kopfkommentar der Seite.
   Einfarbig — Farbverlaeufe sind sitewide ausgeschlossen. */
.hv-highlight {
  background: var(--c-forest-800);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  color: #fff;
}
.hv-highlight__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.7rem;
}
.hv-highlight__label { font-size: 0.9rem; font-weight: 600; color: #fff; }
.hv-highlight__badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-forest-900);
  background: var(--c-brass-500);
  padding: 0.22rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
}
.hv-highlight__text { font-size: 0.86rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }

/* Staffelstufen als kompakte Zeilen — die vollstaendige Tabelle mit beiden
   Ausweisarten steht in #konditionen, hierher gehoert nur der Ueberblick.
   Kein margin-top: der Abstand kommt aus .hv-card__head. */
.hv-tiers { display: grid; }
.hv-tier {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.6rem 0.15rem;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.88rem;
  color: var(--c-ink-600);
}
.hv-tier:last-child { border-bottom: 0; }
/* Dieselbe Rabatt-Pille in der Hero-Karte (.hv-tier__cut) und in der
   Staffeltabelle (.hv-pct) — die Tabelle wiederholt damit den Rhythmus der
   Karte, statt eine ganze Zeile flaechig einzufaerben. */
.hv-tier__cut,
.hv-pct {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-brass-700);
  background: var(--c-brass-100);
  padding: 0.16rem 0.45rem;
  border-radius: 5px;
  white-space: nowrap;
}
/* Beste Stufe: gefuellte Messing-Pille statt der hellen — der einzige
   Farbakzent der Tabelle, punktgenau statt als Flaeche. */
.hv-pct--best { color: var(--c-forest-900); background: var(--c-brass-500); }
.hv-tier__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--c-ink-900);
  white-space: nowrap;
  min-width: 5.2rem;
  text-align: right;
}

.hv-card__hint {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  margin-bottom: 1.1rem;
  padding: 0.8rem 0.9rem;
  border: 1px dashed var(--c-line-strong);
  border-radius: 12px;
  background: var(--c-cream);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-ink-600);
  transition: border-color 0.15s var(--ease);
}
.hv-card__hint:hover { border-color: var(--c-forest-600); }
.hv-card__hint strong { color: var(--c-ink-900); }
.hv-card__hint-arrow { width: 14px; height: 14px; margin-left: auto; color: var(--c-brass-700); flex: none; }
/* Der CTA folgt direkt auf die Forest-Flaeche und bringt selbst keinen
   Aussenabstand mit (.btn ist inline-flex). */
.hv-highlight + .btn { margin-top: 1.1rem; }

.hv-card__notes { margin-top: 1rem; display: grid; gap: 0.45rem; }
.hv-card__notes li { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.8rem; line-height: 1.45; color: var(--c-ink-600); }
.hv-card__notes svg { width: 13px; height: 13px; color: var(--c-forest-700); flex: none; margin-top: 0.14em; }

/* Bild-Text-Paar im Look von .foerder, aber ohne dessen sticky Figure: die
   Bodies sind hier kuerzer als dort, ein mitlaufendes Bild wuerde nur wackeln.
   `--flip` stellt das Bild nach rechts (zweite Verwendung auf derselben Seite,
   sonst staenden beide Motive an derselben Kante). */
.hv-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hv-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hv-media--flip .hv-media__figure { order: 2; }
}
.hv-media__figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hv-media__figure img { display: block; width: 100%; height: auto; }
.hv-media__body > h3 { margin-bottom: 0.9rem; }
.hv-media__body > * + * { margin-top: 0.9rem; }
/* .hv-media steht NEBEN dem .section-stack, nicht darin — die Luft aus
   `.section-stack > * + *` greift zwischen beiden also nicht, und der
   Zwischenkopf klebte am Bild darueber. Gleicher Wert wie der Stack-Abstand. */
.hv-media + .section-stack { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* ============================================================================
   STADTSEITEN  ·  /standorte/<stadt>/          Namensraum sd-
   ----------------------------------------------------------------------------
   Gerueste und Atome sind uebernommen, nicht neu erfunden: der geteilte Hero
   ist das Muster von .kw-hero und .hv-hero, die Karte die Formensprache von
   .express-card und .kw-card. Wer eines davon umbaut, prueft diese Seiten mit.

   WARUM DER HERO GETEILT IST: ungeteilt beginnt die Kennzahlen-Karte bei 390 px
   erst weit unter dem Falz — derselbe gemessene Fehler wie bei .kw-hero (dort
   ~690 px) und .hv-hero (dort 672 px). Die Karte traegt den lokalen Beweis; er
   darf nicht unsichtbar anfangen. Quelltext-Reihenfolge bleibt Kopf → Rest →
   Karte, umsortiert wird nur visuell ueber Grid-Areas.
   ========================================================================= */

.sd-hero .page-hero__grid {
  align-items: start;
  grid-template-areas: "head" "card" "rest";
}
.sd-hero__head { grid-area: head; }
.sd-hero__rest { grid-area: rest; }
.sd-hero .sd-card { grid-area: card; }
.sd-hero .hero__social { margin-bottom: 1.6rem; }
/* Der Lead bringt margin-top 1.1rem mit — auf Mobil steckt zwischen Karte und
   Lead schon der Grid-gap, die Summe waere zu viel Luft. */
.sd-hero__rest .lead { margin-top: 0; }
@media (min-width: 992px) {
  .sd-hero .page-hero__grid {
    grid-template-areas: "head card" "rest card";
    grid-template-rows: auto 1fr;
    row-gap: 0;
  }
  .sd-hero__rest { margin-top: 1.1rem; }
}

/* --- Kennzahlen-Karte ---------------------------------------------------- */

.sd-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(14, 42, 30, 0.04), 0 24px 54px -34px rgba(138, 106, 38, 0.35);
  padding: clamp(1.25rem, 2vw, 1.5rem);
}
.sd-card__eyebrow {
  color: var(--c-brass-600);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sd-card__title {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  margin: 0.35rem 0 0;
}
.sd-card__figures {
  display: grid;
  gap: 1.1rem;
  margin: 1.25rem 0 0;
}
/* Kein Rahmen, nur eine Trennlinie: die Karte traegt schon einen, ein zweiter
   je Kennzahl macht daraus ein Formular. */
.sd-fig + .sd-fig {
  border-top: 1px solid var(--c-line);
  padding-top: 1.1rem;
}
.sd-fig__label {
  color: var(--c-ink-600);
  font-size: 0.9rem;
}
.sd-fig__value {
  color: var(--c-forest-800);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0.15rem 0 0;
}
/* Die Deutung ist der eigentliche Inhalt der Zeile — sie steht kleiner, aber
   nicht grau genug, um uebersehen zu werden. */
.sd-fig__sub {
  color: var(--c-ink-600);
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0.35rem 0 0;
}
.sd-card__cta {
  border-top: 1px solid var(--c-line);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  text-align: center;
}
.sd-card__cta .btn { width: 100%; }
.sd-card__price {
  color: var(--c-ink-600);
  font-size: 0.86rem;
  margin: 0.6rem 0 0.9rem;
}
.sd-card__kontakt {
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-600);
  font-size: 0.86rem;
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  text-align: center;
}
.sd-card__kontakt-sub {
  color: var(--c-ink-500);
  display: block;
  font-size: 0.8rem;
  margin-top: 0.2rem;
}

/* --- Programmlisten (Foerderung) ----------------------------------------- */

/* Erbt .checks (Hakenliste). Der Traeger steht als eigene Zeile darunter,
   nicht in Klammern dahinter: bei 390 px umbricht sonst mitten im Firmennamen. */
.sd-programme__meta {
  color: var(--c-ink-500);
  display: block;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

/* --- Nachbarorte ---------------------------------------------------------- */

.sd-nachbarn {
  display: grid;
  gap: 0.65rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.sd-nachbarn__km {
  color: var(--c-ink-500);
  font-size: 0.85rem;
  margin-left: 0.35rem;
  white-space: nowrap;
}

/* --- Warnbox auf Sektionsebene -------------------------------------------- */

/* `.warnbox` steht in styles.css und wird im Magazin ueber `.prose .warnbox p`
   ausgerichtet. Auf Sektionsebene (Stadtseiten) greift diese Regel nicht — die
   Absaetze klebten dort aneinander, weil der Reset ihre Margins nimmt.
   Dieselben Werte wie in `.prose`, damit die Warnbox ueberall gleich aussieht.

   ZUR STRUKTUR: Die Absaetze MUESSEN in einem Wrapper-<div> liegen. `.warnbox`
   ist `display: flex`; nackte <p> werden je zu einem Flex-Item, stehen dann
   nebeneinander und schrumpfen wegen `min-width: auto` nicht — die Stadtseiten
   liefen dadurch bei 390 px um 252 px horizontal ueber (gemessen 19.08.2026). */

.section-stack .warnbox p + p { margin-top: 0.45rem; }
.section-stack .warnbox .warnbox__src { margin-top: 0.6rem; }

/* --- Stadtteile und Sanierungsgebiete ------------------------------------- */

/* Beide sind Namenslisten und teilen deshalb das Raster der Nachbarorte
   (auto-fit, damit lange Gebietsnamen nicht in eine zu enge Spalte laufen).
   Getrennte Klassen statt einer geteilten, weil `.sd-nachbarn__km` eine
   Entfernung meint — ein Stadtteil hat keine. */

.sd-teile,
.sd-gebiete {
  display: grid;
  gap: 0.65rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Die Bebauungsangabe steht UNTER dem Namen, nicht daneben: „gruenderzeitlicher
   Altbau" ist zu lang fuer eine Zeile neben dem Stadtteil und haette bei 390 px
   umgebrochen. */
.sd-teile__bau {
  color: var(--c-ink-500);
  display: block;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

/* --- Quellenblock --------------------------------------------------------- */

/* Bewusst zurueckhaltend: der Block ist rechtlich erforderlich (dl-de/by-2-0
   verlangt einen SICHTBAREN Quellenvermerk), aber er ist nicht das Angebot.
   Kleiner Schriftgrad, ruhige Farbe — lesbar, nicht laut. */
.sd-quellen__liste {
  display: grid;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sd-quellen__liste li {
  color: var(--c-ink-600);
  font-size: 0.88rem;
  line-height: 1.55;
}
.sd-quellen__hinweis,
.sd-quellen__stand {
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-500);
  font-size: 0.84rem;
  line-height: 1.55;
  margin-top: 1rem;
  padding-top: 0.9rem;
}