/* ==========================================================================
   HAUS & ENERGIE — Premium Homepage
   Warm Premium / Editorial · Emerald + Brass on Cream
   Organisation: Fonts → Tokens → Reset → Type → Layout → Components
                 → Chrome → Sections → Overlays → Utilities → Motion → Responsive
   ========================================================================== */

/* ----------------------------------------------------------------- Fonts -- */
/* Display-Schrift: seit 2026-07-20 Schibsted Grotesk (SIL OFL 1.1, Lizenztext in
   assets/fonts/schibsted-OFL.txt) — davor die Serif „Fraunces". Der Kursivschnitt ist
   bewusst NICHT eingebunden: Akzente tragen allein über die Goldfarbe (User-Entscheidung).
   Deshalb nirgends font-style:italic auf Display-Elemente setzen — der Browser würde
   fälschen. Gewichtsachse 400–900: keine Display-Regel unter 400 setzen.
   (Diese Definitionen standen bis 2026-07-21 in einer eigenen type.css, weil styles.css
   eingefroren war; nach der Entsperrung hierher zurückgeführt.) */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}

/* ---------------------------------------------------------------- Tokens -- */
:root {
  /* brand */
  --c-forest-900: #0e2a1e;
  --c-forest-800: #16432f;
  --c-forest-700: #1e5a40;
  --c-forest-600: #2a6b4d;
  --c-brass-700: #8a6a26;
  --c-brass-600: #a9842f;
  --c-brass-500: #c9a24b;
  --c-brass-400: #d8b86e;
  --c-brass-100: #f1e6cb;

  --c-cream: #faf7f1;
  --c-paper: #ffffff;
  --c-sand: #f2ece0;
  --c-sand-deep: #ece3d3;

  --c-ink-900: #14201b;
  --c-ink-700: #2b3a32;
  --c-ink-600: #46524c;
  /* 2026-07-25 Audit D3: war #7a857f — 3,25:1 auf Sand, 3,58 auf Creme, 3,83 auf Weiß.
     In 52 Regeln als Textfarbe genutzt (Meta-Zeilen, Fußnoten, Zähler), also sitewide
     unter WCAG AA. #5f6b65 liegt auf allen drei Gründen über 4,5:1 (4,73 / 5,20 / 5,56). */
  --c-ink-400: #5f6b65;
  --c-line: #e7e0d3;
  --c-line-strong: #d8cfbd;

  /* energy scale (Energieausweis A–G) */
  --e-a: #16a34a;
  --e-b: #65a30d;
  --e-c: #a3b814;
  --e-d: #eab308;
  --e-e: #f59e0b;
  --e-f: #ea580c;
  --e-g: #dc2626;

  /* semantic */
  --c-success: #16803c;
  --c-warn: #b45309;
  --c-warn-bg: #fbf3e4;
  --c-warn-line: #ecd9b0;
  --c-danger: #b91c1c;

  /* type */
  --font-display: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* spacing / layout */
  --container: 1200px;
  --container-narrow: 940px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  /* shadows (soft, layered) */
  --shadow-xs: 0 1px 2px rgba(20, 32, 27, 0.05);
  --shadow-sm: 0 1px 2px rgba(20, 32, 27, 0.05), 0 4px 12px rgba(20, 32, 27, 0.05);
  --shadow-md: 0 1px 2px rgba(20, 32, 27, 0.04), 0 12px 30px rgba(20, 32, 27, 0.08);
  --shadow-lg: 0 2px 6px rgba(20, 32, 27, 0.05), 0 24px 60px rgba(20, 32, 27, 0.12);
  --shadow-brass: 0 14px 40px rgba(150, 116, 40, 0.18);

  --ring: 0 0 0 3px rgba(201, 162, 75, 0.45);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------------- Reset -- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--c-ink-700);
  background-color: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: hidden;
}

/* subtle paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
svg,
video { display: block; max-width: 100%; height: auto; }

/* default inline icon size — any <svg> that wraps a <use>; component rules override */
svg:has(> use) { width: 1.15em; height: 1.15em; flex: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; padding: 0; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 6px;
}

::selection { background: var(--c-brass-100); color: var(--c-forest-900); }

/* ------------------------------------------------------------ Typography -- */
/* Gewichte und Laufweiten sind auf die Grotesk gestellt (2026-07-20): Fraunces trug als
   Serif schon bei 480/500, eine Grotesk braucht mehr Gewicht und engere Laufweite, um bei
   Display-Größen dieselbe Präsenz zu haben. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--c-ink-900);
  font-optical-sizing: auto;
  text-wrap: balance;
  /* Lange deutsche Komposita („Energieverbrauchsausweis") passen auf schmalen
     Schirmen in keine Zeile und ragten aus dem Viewport — die Box blieb dabei
     korrekt breit, nur der Text lief über, was einen Horizontal-Scroll der
     ganzen Seite erzeugte (2026-07-28 auf /verbrauchsausweis/ bei 390px
     gemessen, 33px). Notnagel für alle Ebenen; greift nur, wenn ein Wort
     wirklich nicht passt, ändert also keinen normalen Umbruch. */
  overflow-wrap: break-word;
}
/* Silbentrennung NUR für die großen Überschriften. Global gesetzt trennte sie
   zusammen mit `text-wrap: balance` auch dort, wo reichlich Platz ist — in den
   schmalen Karten-h3 wurde aus „Experten-Prüfung" ein „Exper-ten-Prüfung" und
   aus „Rechtsgültigen" ein „Rechts-gültigen" (bei 768px gemessen, die Karte
   wuchs dabei von 3 auf 4 Zeilen). h1/h2 stehen breit und tragen die langen
   Komposita — dort ist die Trennung ein Gewinn (54 von 55 veränderten
   Überschriften wurden kürzer). html lang="de" liefert die Trennstellen. */
h1, h2 { hyphens: auto; }

.h1, h1 { font-size: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem); font-weight: 600; letter-spacing: -0.030em; }
.h2, h2 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); letter-spacing: -0.026em; }
.h3, h3 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.7rem); letter-spacing: -0.02em; }
.h4, h4 { font-size: 1.15rem; letter-spacing: -0.015em; }

em, .italic { font-style: italic; }

/* Hero-Akzent „zahlen nach Vorschau": aufrecht, Akzent allein über Gold. */
.display-accent {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-brass-600);
}

p { color: var(--c-ink-600); }

strong, b { font-weight: 650; color: var(--c-ink-900); }

.lead {
  font-size: clamp(1.06rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--c-ink-600);
}

/* ---------------------------------------------------------------- Layout -- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--sand { background: var(--c-sand); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .lead { margin-top: 1rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-brass-600);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: var(--c-brass-500);
}
.section-head--center .eyebrow::after {
  content: "";
  width: 26px;
  height: 1.5px;
  background: var(--c-brass-500);
}

/* ------------------------------------------------------------ Components -- */
/* Buttons */
.btn {
  --btn-bg: var(--c-forest-800);
  --btn-fg: var(--c-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease),
    background-color 0.25s var(--ease), filter 0.25s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--c-forest-800);
  color: var(--c-cream);
  box-shadow: 0 1px 2px rgba(14, 42, 30, 0.25), 0 12px 28px rgba(14, 42, 30, 0.22);
}
.btn--primary:hover { filter: brightness(1.08); box-shadow: 0 2px 6px rgba(14, 42, 30, 0.28), 0 18px 40px rgba(14, 42, 30, 0.28); }

.btn--gold {
  --btn-bg: var(--c-brass-500);
  color: #2a2010;
  box-shadow: 0 1px 2px rgba(138, 106, 38, 0.3), 0 12px 28px rgba(176, 138, 56, 0.28);
}
.btn--gold:hover { filter: brightness(1.05); }

.btn--ghost {
  --btn-bg: transparent;
  color: var(--c-forest-800);
  border-color: var(--c-line-strong);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(22, 67, 47, 0.05); border-color: var(--c-forest-700); box-shadow: var(--shadow-xs); }

.btn--light {
  --btn-bg: var(--c-cream);
  color: var(--c-forest-800);
  box-shadow: var(--shadow-sm);
}
.btn--light:hover { background: #fff; }

.btn--lg { padding: 1.1rem 1.9rem; font-size: 1.05rem; border-radius: 12px; }
.btn--block { display: flex; width: 100%; }
.btn__arrow { transition: transform 0.25s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Zentrierte CTA-Zeile für MEHRERE Buttons (2026-08-03, /express-energieausweis/).
   Nicht mit .steps__cta verwechseln: das zentriert nur per text-align und
   reicht für genau einen Button. Zwei .btn sind inline-flex — sie kleben dort
   auf dem einzelnen Quelltext-Leerzeichen und stapeln unter 560px ohne
   vertikalen Abstand. Bewusst generisch und in styles.css, damit die Zeile
   auch der Startseite zur Verfügung steht (die pages.css nicht lädt). */
.cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 2rem; }
.cta-row__note { margin-top: 1.1rem; text-align: center; font-size: 0.92rem; }
@media (max-width: 560px) { .cta-row .btn { width: 100%; line-height: 1.3; } }

/* text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--c-forest-700);
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s var(--ease), gap 0.2s var(--ease);
}
.link-arrow:hover { border-color: var(--c-brass-500); gap: 0.6rem; }

/* Badges & chips */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
  background: var(--c-brass-100);
  color: var(--c-brass-700);
}
.badge--solid { background: var(--c-brass-500); color: #2a2010; box-shadow: var(--shadow-brass); }
.badge--forest { background: rgba(22, 67, 47, 0.08); color: var(--c-forest-800); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 7px;
  background: var(--c-sand);
  color: var(--c-ink-600);
}
.chip--ok { background: rgba(22, 128, 60, 0.1); color: var(--c-success); }
.chip--win { background: rgba(201, 162, 75, 0.16); color: var(--c-brass-700); }
.chip--info { background: rgba(180, 83, 9, 0.1); color: var(--c-warn); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-forest-800);
  background: rgba(22, 67, 47, 0.06);
  border-radius: 8px;
}
.tag svg { width: 16px; height: 16px; color: var(--c-brass-600); }

/* Stars */
.stars { display: inline-flex; gap: 2px; color: var(--c-brass-500); }
.stars svg { width: 1.05em; height: 1.05em; }
.stars--muted .star-empty { color: var(--c-line-strong); }

/* Cards */
.card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.card--hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--c-line-strong); }

/* check list */
/* Hängende Marke statt 2-Spalten-Grid im <li> (geändert 2026-07-21, Freigabe zur Aufhebung
   des Frozen-Status): Als Grid wurde JEDES Stück Inhalt ein eigenes Grid-Item — bei
   „<li><strong>Titel</strong> — Zusatz</li>" landete der Zusatztext in der 22-px-Icon-Spalte
   der nächsten Zeile (136 px statt 25 px Zeilenhöhe). Absolut positioniertes ::before +
   padding-left verträgt beliebigen Inline-Inhalt; Texteinzug bleibt exakt 32 px
   (= 22 px + 0.65rem), sitewide A/B-gemessen. Details: specs/STATUS.md, Eintrag 2026-07-21. */
.checks { display: grid; gap: 0.7rem; }
.checks li {
  display: block;
  position: relative;
  padding-left: calc(22px + 0.65rem);
  font-size: 0.98rem;
  color: var(--c-ink-700);
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(22, 128, 60, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316803c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* icon medallion */
.medallion {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(201, 162, 75, 0.14);
  color: var(--c-brass-600);
  border: 1px solid rgba(201, 162, 75, 0.25);
  flex: none;
}
.medallion svg { width: 26px; height: 26px; }
.medallion--forest {
  background: rgba(22, 67, 47, 0.08);
  color: var(--c-forest-700);
  border-color: rgba(22, 67, 47, 0.16);
}

/* certification seal */
.seal {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px dashed var(--c-brass-400);
  color: var(--c-brass-600);
  background: var(--c-cream);
  flex: none;
}
.seal svg { width: 30px; height: 30px; }

/* .escale* (Energieskala) am 2026-07-25 entfernt — nie im Markup verwendet (Audit D14). */

/* ----------------------------------------------------------------- Chrome */
/* Trustbar */
.trustbar {
  background: var(--c-forest-900);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
}
.trustbar__inner {
  display: flex;
  align-items: center;
  /* space-between statt center (User 2026-08-11): zentriert klebten die drei
     Items als Block in der Leistenmitte (bei 1440px nur x 400-1040), links und
     rechts leere Flanken. Verteilt liegen sie buendig mit Logo und Header-CTA. */
  justify-content: space-between;
  gap: 0.5rem 3rem; /* row-gap knapp: längere Trust-Items wrappen 700–899px sonst mit 3rem Zeilenabstand (102px hoch) */
  min-height: 38px;
  padding-block: 0.4rem;
  flex-wrap: wrap;
  text-align: center;
}
/* Im Wrap-Fenster 700–899px zentriert lassen: space-between wuerde die letzte
   umgebrochene Zeile linksbuendig an den Rand setzen. */
@media (max-width: 899px) { .trustbar__inner { justify-content: center; } }
.trustbar__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.trustbar__item svg { width: 15px; height: 15px; color: var(--c-brass-400); }
.trustbar__item strong { color: #fff; font-weight: 600; }
.trustbar__sep { opacity: 0.3; }
.trustbar a:hover { color: #fff; }
@media (max-width: 699px) { .trustbar { display: none; } }

/* Header / Nav */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 241, 0.8);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--c-line);
  box-shadow: 0 6px 24px rgba(20, 32, 27, 0.06);
}
.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}
/* is-stuck ist bewusst PAINT-ONLY (Border + Schatten, s. .header.is-stuck oben) und darf
   NIE wieder die Höhe ändern: Die frühere Regel `.header.is-stuck .nav { min-height: 62px }`
   erzeugte mit der 8px-Schwelle in main.js (eingefroren, keine Hysterese) und Chromes
   Scroll-Anchoring einen Regelkreis — Höhenänderung → Anchoring verschiebt scrollY über
   die Schwelle → Klasse togglet zurück → Höhe springt erneut. Gemessen 2026-07-23:
   38 autonome Klassen-Flips in 2,2 s (~16/s), sichtbares Header-Flackern, sobald man beim
   Hochscrollen im Bereich scrollY ~1–18 px zum Stehen kam. */

.brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; flex: none; }
.brand__word {
  font-family: var(--font-display);
  font-weight: 620;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  color: var(--c-forest-800);
  line-height: 1;
}
/* font-style MUSS hier explizit stehen: die generische Regel `em, .italic { font-style:
   italic }` würde das Ampersand sonst kursiv setzen — und der Kursivschnitt der Display-
   Schrift ist nicht eingebunden, der Browser würde ihn also fälschen. */
.brand__word em { font-style: normal; font-weight: 480; color: var(--c-brass-600); padding: 0 0.06em; }
/* Die Logo-Unterzeile „ENERGIEAUSWEIS" (.brand__sub) ist am 2026-07-20 auf User-Wunsch aus
   dem Markup geflogen (src/index.html + components/header.njk, Chrome-Parität); die Regel
   dazu wurde am 2026-07-21 mit entfernt. Ohne sie schrumpft der Logo-Block, deshalb im
   Header größer gesetzt — bewusst nur dort: Footer und Mobile-Menü hatten die Unterzeile
   nie und behalten ihre Größe (1.55rem bzw. inline 1.2rem). */
.header .brand__word { font-size: 1.9rem; }

.nav__links { display: none; align-items: center; gap: 0.35rem; margin-left: auto; }
.nav__link {
  padding: 0.5rem 0.8rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--c-ink-700);
  border-radius: 8px;
  white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav__link:hover { color: var(--c-forest-800); background: rgba(22, 67, 47, 0.05); }
.nav__link { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav__caret { width: 13px; height: 13px; color: var(--c-brass-600); transform: rotate(90deg); transition: transform 0.2s var(--ease); }
.nav__item { position: relative; }
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(-90deg); }
.nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 190px;
  padding: 0.4rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 50;
}
.nav__item:hover .nav__sub, .nav__item:focus-within .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(4px);
}
.nav__sub a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--c-ink-700);
  white-space: nowrap;
}
.nav__sub a:hover { background: rgba(22, 67, 47, 0.05); color: var(--c-forest-800); }
.nav__actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.nav__finder {
  display: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-forest-800);
  border: 1px solid var(--c-line-strong);
  border-radius: 9px;
  transition: border-color 0.2s, background-color 0.2s;
}
.nav__finder svg { width: 17px; height: 17px; color: var(--c-brass-600); }
.nav__finder:hover { border-color: var(--c-forest-700); background: rgba(22, 67, 47, 0.04); }
.nav__cta { display: none; white-space: nowrap; }

/* hamburger */
.nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-left: auto;
  border-radius: 10px;
  border: 1px solid var(--c-line-strong);
  color: var(--c-forest-800);
}
.nav__toggle svg { width: 22px; height: 22px; }

/* mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(86vw, 380px);
  z-index: 200;
  background: var(--c-cream);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out);
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mobile-menu__close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--c-line); }
.mobile-menu__close svg { width: 22px; height: 22px; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 1.25rem; }
.mobile-menu__links a {
  padding: 0.85rem 0.75rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-ink-900);
  border-radius: 10px;
  border-bottom: 1px solid var(--c-line);
}
.mobile-menu__links a:hover { background: rgba(22, 67, 47, 0.05); }
.mobile-menu__links .mobile-menu__sublink {
  padding-left: 2rem;
  font-size: 0.95rem;
  color: var(--c-ink-600);
  position: relative;
}
.mobile-menu__links .mobile-menu__sublink::before {
  content: "↳";
  position: absolute;
  left: 0.85rem;
  color: var(--c-brass-600);
}
.mobile-menu__cta { display: grid; gap: 0.6rem; margin-top: auto; }
.scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(14, 42, 30, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.scrim.is-open { opacity: 1; visibility: visible; }

body.no-scroll { overflow: hidden; }

/* skip link */
.skip-link {
  position: absolute;
  left: 1rem; top: -60px;
  z-index: 300;
  padding: 0.7rem 1.1rem;
  background: var(--c-forest-800);
  color: #fff;
  border-radius: 8px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ================================================================ SECTIONS */

/* 1 · Hero ---------------------------------------------------------------- */
/* 2026-08-03: oberer/unterer Abstand von clamp(2.5rem,5vw,4.5rem) (72/40 px) auf
   --hero-y (100/64 px) — der Hero setzte sich deutlich enger ab als jede andere
   Sektion und wirkte dadurch gequetscht (User-Wunsch).
   --hero-y ist bewusst dieselbe Kurve wie --section-y (clamp(4rem, 9vw, 7.5rem)),
   nur mit niedrigerem Deckel: 6.25rem = 100 px statt 7.5rem = 120 px (User-Wunsch
   nach der ersten Runde). Unterhalb ~1111 px greift der Deckel nicht, dort ist der
   Hero deckungsgleich mit den Sektionen — eine eigene Kurve würde beide über die
   Breakpoints wieder auseinanderlaufen lassen.
   Der untere Wert steht am margin-bottom von .hero__ctas (s. dort); die Property
   wird vererbt, damit oben und unten nicht getrennt driften können. */
.hero { --hero-y: clamp(4rem, 9vw, 6.25rem); position: relative; overflow: hidden; padding-block: var(--hero-y) 0; }
.hero::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 60vw; height: 60vw;
  max-width: 760px; max-height: 760px;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.16), transparent 62%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -25%; left: -15%;
  width: 50vw; height: 50vw;
  max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, rgba(22, 67, 47, 0.08), transparent 60%);
  pointer-events: none;
}
.hero__card { position: relative; }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.hero h1 { font-size: clamp(2.3rem, 1.58rem + 3.35vw, 3.95rem); margin: 1.75rem 0 0; }
.hero__sub { max-width: 32em; margin-top: 1.5rem; }
.hero__sub strong { color: var(--c-ink-900); }

/* social proof (avatars + rating) */
.hero__social { display: flex; align-items: center; gap: 0.85rem; }
.hero__avatars { display: flex; }
.hero__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--c-cream);
  background: var(--c-sand-deep);
}
.hero__avatar + .hero__avatar { margin-left: -12px; }
.hero__avatar:nth-child(1) { background: #c7b79a; }
.hero__avatar:nth-child(2) { background: #9db0a2; }
.hero__avatar:nth-child(3) { background: #b58f6a; }
.hero__avatar:nth-child(4) { background: #8896a6; }
.hero__avatar--count {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-forest-800);
  color: var(--c-brass-100);
  font-size: 0.68rem;
  font-weight: 600;
}
.hero__social-text { display: flex; flex-direction: column; line-height: 1.3; }
.hero__social-rating { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero__social-rating .stars { font-size: 0.85rem; }
.hero__social-rating strong { font-size: 0.9rem; color: var(--c-ink-900); }
.hero__social-sub { font-size: 0.8rem; font-weight: 500; color: var(--c-ink-400); }

/* check bullets */
.hero__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  margin-top: 2rem;
}
.hero__checks li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 500; color: var(--c-ink-700); }
.hero__checks svg { width: 16px; height: 16px; color: var(--c-brass-600); flex: none; }

/* finder card */
.hero__finder {
  position: relative;
  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);
}
/* Der gezeichnete Deko-Pfeil (.hero__finder-arrow) ist am 2026-07-28 auf Wunsch
   des Users entfallen — Markup und Regeln gelöscht, inkl. der Sichtbarkeits-
   regel im 940px-Block. Das `position: relative` oben bleibt als (jetzt
   ungenutzter) Positionierungskontext der Karte stehen. */
.hero__finder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.hero__finder-title { font-size: 0.95rem; font-weight: 600; color: var(--c-ink-900); }
.hero__finder-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;
}
.hero__finder-badge svg { width: 13px; height: 13px; }
.hero__finder-q {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--c-ink-700);
  margin: 1.1rem 0 0.55rem;
}
.hero__finder-head + .hero__finder-q { margin-top: 0; }
.hero__finder-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-forest-800);
  color: var(--c-brass-100);
  font-size: 0.68rem;
  flex: none;
}
.hero__finder-pills { display: flex; gap: 0.55rem; }
.hero__finder-pill {
  flex: 1;
  padding: 0.7rem 0.6rem;
  border-radius: 11px;
  border: 1.5px solid var(--c-line-strong);
  background: #fff;
  color: var(--c-ink-600);
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.hero__finder-pill:hover { border-color: var(--c-forest-600); }
.hero__finder-pill.is-selected {
  border-color: var(--c-forest-700);
  background: rgba(22, 67, 47, 0.06);
  color: var(--c-ink-900);
}
.hero__finder-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-400);
}
.hero__finder-hint svg { width: 17px; height: 17px; color: var(--c-brass-500); flex: none; }
.hero__finder-result {
  margin-top: 1.1rem;
  border: 1.6px solid var(--c-forest-700);
  border-radius: 14px;
  padding: 1.1rem;
  background: #fff;
}
.hero__finder-result-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.hero__finder-result-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-forest-700);
}
.hero__finder-result-eyebrow svg { width: 13px; height: 13px; flex: none; }
.hero__finder-reset { font-size: 0.78rem; font-weight: 500; color: var(--c-ink-400); text-decoration: underline; cursor: pointer; }
.hero__finder-reset:hover { color: var(--c-ink-700); }
.hero__finder-result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.hero__finder-result-name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--c-ink-900); }
.hero__finder-result-price { white-space: nowrap; }
.hero__finder-result-price .pre { font-size: 0.78rem; font-weight: 500; color: var(--c-ink-400); }
.hero__finder-result-price b { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--c-ink-900); }
.hero__finder-result-reason { font-size: 0.84rem; line-height: 1.5; color: var(--c-ink-600); margin-top: 0.4rem; }
.hero__finder-result .btn { margin-top: 0.9rem; }
.hero__finder-result-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
  font-size: 0.78rem;
  color: var(--c-ink-600);
}
.hero__finder-result-note svg { width: 13px; height: 13px; color: var(--c-forest-700); flex: none; }

/* Direkt-CTAs unter dem Hero-Grid („Schon entschieden? Direkt wählen:"). margin-bottom
   spiegelt bewusst das padding-top von .hero (--hero-y), damit der Hero
   oben/unten gleich weit absetzt. Der Gold-Button nutzt seit 2026-08-04 das globale
   .btn--gold (dunkle Schrift auf brass-500, 6,7:1 — über AA): der frühere Sonderfall
   Creme auf brass-700 (2026-07-22 eingeführt, 2026-07-25 Audit D2 nachgeschärft) war
   sitewide der einzige Gold-Button mit heller Schrift und wich von den Gold-CTAs der
   Express-Hero-Karte ab — auf User-Wunsch vereinheitlicht. Lag bis 2026-07-22 als
   scoped <style> in index.html.
   (Ersetzt die frühere .hero__decided-Zeile; deren Regeln und die der entfernten
   Review-Leiste [.hero__reviews und .review-strip] sind am 2026-07-22 als toter Code
   gelöscht.) */
/* 2026-07-28: oberer Abstand 3rem → 4.25rem (+20px, User-Wunsch „ein bisschen
   mehr Abstand über ‚Schon entschieden?'"). Der untere Wert bleibt, er spiegelt
   weiterhin bewusst das padding-top von .hero — seit 2026-08-03 ist das --hero-y,
   von .hero vererbt. */
.hero__ctas { margin: 4.25rem 0 var(--hero-y); text-align: center; }
.hero__ctas-title { margin: 0 0 1.1rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-ink-600); }
.hero__ctas-row { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.hero__ctas-row .btn { min-width: 20rem; }
/* line-height: .btn setzt global 1 — auf schmalen Schirmen bricht das lange Label
   „Verbrauchsausweis · ab 69,90 €" um und die zwei Zeilen liefen ineinander
   (vorbestehend, bei der Mobil-Prüfung der Abstands-Änderung 2026-07-28 gefunden). */
@media (max-width: 560px) { .hero__ctas-row .btn { min-width: 0; width: 100%; line-height: 1.3; } }

/* 2 · Proofbar ------------------------------------------------------------ */
.proofbar { background: var(--c-forest-800); color: #fff; padding-block: clamp(2rem, 3.5vw, 2.75rem); }
.proofbar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
}
.proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  position: relative;
}
.proof svg { width: 24px; height: 24px; color: var(--c-brass-400); margin-bottom: 0.2rem; }
.proof__value { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1; color: #fff; }
.proof__label { font-size: 0.84rem; color: rgba(255, 255, 255, 0.74); }

/* 3 · Urgency ------------------------------------------------------------- */
.urgency { background: var(--c-warn-bg); border-block: 1px solid var(--c-warn-line); }
.urgency__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  padding-block: 0.95rem;
  text-align: center;
  font-size: 0.94rem;
}
.urgency__icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(180, 83, 9, 0.14); color: var(--c-warn); flex: none; }
.urgency__icon svg { width: 16px; height: 16px; }
.urgency strong { color: #7c3a09; }
.urgency__src { color: var(--c-ink-400); font-size: 0.84rem; }
.urgency .link-arrow { color: var(--c-warn); }
.urgency .link-arrow:hover { border-color: var(--c-warn); }

/* 4 · Steps --------------------------------------------------------------- */
.steps__grid { display: grid; gap: 1.25rem; counter-reset: step; position: relative; }
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.6rem 1.6rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* Tag an die Kartenunterkante — so fluchten die grauen Tags aller Steps
   in einer Reihe, unabhängig von der Textlänge darüber. */
.step .tag { margin-top: auto; align-self: flex-start; }
.step__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--c-brass-500);
  margin-bottom: 0.75rem;
  display: block;
}
.step h3 { margin-bottom: 0.5rem; }
.step p { font-size: 0.95rem; margin-bottom: 1.1rem; }
.steps__cta { margin-top: 2.5rem; text-align: center; }

/* 5 · Testimonials -------------------------------------------------------- */
.testimonials__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}
.testimonials__score { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.testimonials__score b { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--c-ink-900); line-height: 1; }
.testimonials__score .stars { font-size: 1.1rem; }
.carousel-nav { display: flex; gap: 0.5rem; }
.carousel-nav button {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  color: var(--c-forest-800);
  background: var(--c-paper);
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.2s;
}
.carousel-nav button:hover { background: var(--c-forest-800); color: #fff; border-color: var(--c-forest-800); }
.carousel-nav button:disabled { opacity: 0.35; cursor: default; }
.carousel-nav button:disabled:hover { background: var(--c-paper); color: var(--c-forest-800); border-color: var(--c-line-strong); }
.carousel-nav svg { width: 20px; height: 20px; }

.testi-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi-card {
  flex: 0 0 88%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.testi-card .stars { font-size: 0.95rem; margin-bottom: 1rem; }
.testi-card__quote {
  font-family: var(--font-display);
  font-weight: 420;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--c-ink-900);
  margin-bottom: 1.25rem;
  flex: 1;
}
.testi-card__quote::before { content: "\201C"; color: var(--c-brass-400); }
.testi-card__quote::after { content: "\201D"; color: var(--c-brass-400); }
.testi-card__author { display: flex; align-items: center; gap: 0.75rem; }
.testi-card__avatar {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-forest-700);
  color: var(--c-brass-100);
  font-weight: 600;
  font-size: 0.95rem;
  flex: none;
}
.testi-card__name { font-weight: 650; color: var(--c-ink-900); font-size: 0.95rem; }
.testi-card__meta { font-size: 0.82rem; color: var(--c-ink-400); }

/* 6 · Benefits ------------------------------------------------------------ */
.benefits__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.benefit {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.75rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease), border-color 0.35s;
}
.benefit:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--c-line-strong); }
.benefit h3 { font-size: 1.18rem; }
.benefit p { font-size: 0.94rem; flex: 1; }
.benefit__trust {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--c-line);
  min-height: calc(0.85rem + 3.2em);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--c-forest-700);
}
.benefit__trust svg { width: 16px; height: 16px; margin-top: 0.1em; color: var(--c-success); flex: none; }

/* 7 · Pricing ------------------------------------------------------------- */
/* Der .price-anchor-Kasten („Vor Ort 300–600 € ↔ Online ab 69,90 €" mit dem
   Spar-Badge) ist am 2026-07-28 auf Wunsch des Users ersatzlos entfallen —
   samt seiner Regeln .price-anchor / __col / __label / __old / __new / __save
   und `.price-anchor small`. Die Sektion geht jetzt direkt vom .section-head
   auf das .pricing__grid; dessen oberen Abstand liefert der section-head. */
.pricing__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; max-width: 920px; margin-inline: auto; }
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.price-card--featured {
  border: 1.5px solid var(--c-brass-400);
  box-shadow: 0 2px 8px rgba(176, 138, 56, 0.12), 0 24px 60px rgba(176, 138, 56, 0.18);
}
.price-card__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); }
.price-card__type { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--c-ink-900); }
.price-card__price { display: flex; align-items: baseline; gap: 0.45rem; margin: 0.4rem 0 0.2rem; }
.price-card__price b { font-family: var(--font-display); font-weight: 600; font-size: 2.6rem; color: var(--c-forest-800); line-height: 1; }
.price-card__price .pre { font-size: 0.9rem; color: var(--c-ink-400); }
.price-card__price .vat { font-size: 0.82rem; color: var(--c-ink-400); }
.price-card__ideal {
  font-size: 0.88rem;
  color: var(--c-ink-600);
  padding: 0.75rem 0.9rem;
  background: var(--c-sand);
  border-radius: 10px;
  margin: 1.1rem 0 1.25rem;
}
.price-card__ideal b { color: var(--c-forest-800); }
.price-card .checks { margin-bottom: 1.5rem; }
.price-card .checks li { font-size: 0.92rem; }
.price-card .btn { margin-top: auto; }

.extras { margin-top: clamp(2rem, 4vw, 3rem); }
.extras__title { text-align: center; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-400); margin-bottom: 1.25rem; }
.extras__grid { display: grid; gap: 0.85rem; grid-template-columns: 1fr; max-width: 920px; margin-inline: auto; }
.extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.2rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 12px;
}
.extra__name { display: flex; align-items: center; gap: 0.65rem; font-weight: 600; font-size: 0.95rem; color: var(--c-ink-900); }
.extra__name svg { width: 18px; height: 18px; color: var(--c-brass-600); flex: none; }
.extra__price { font-weight: 700; color: var(--c-forest-800); white-space: nowrap; }
/* Verlinkte Zusatzleistung (2026-08-03): genau EINE der fünf Kacheln —
   „Express-Bearbeitung" — führt auf /express-energieausweis/. Ohne eigene
   Affordanz sähe der Anker exakt wie die vier nicht klickbaren Nachbarn aus;
   der nachgestellte Pfeil und der Messing-Rahmen beim Hover übernehmen dieselbe
   Rolle wie bei .link-arrow/.btn__arrow. Steht in styles.css und nicht in
   pages.css, weil die Startseite pages.css nicht lädt. */
a.extra { text-decoration: none; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
a.extra:hover { border-color: var(--c-brass-500); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.extra__arrow { width: 16px; height: 16px; color: var(--c-brass-600); flex: none; transition: transform 0.2s var(--ease); }
a.extra:hover .extra__arrow { transform: translateX(4px); }

/* 8 · Finder -------------------------------------------------------------- */
/* Hell/„weiße Karte auf Creme" (2026-07-23): Sektion + beide Popups (#quiz-modal,
   #finder-modal) teilen diese .finder__*-Regeln — eine Quelle, überall hell. Optik
   nach dem Vorbild des Hero-Mini-Finders (.hero__finder). */
.finder { background: var(--c-cream); position: relative; overflow: hidden; }
.finder::before {
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  transform: translateX(-50%);
  width: 80vw; max-width: 900px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.10), transparent 62%);
  pointer-events: none;
}
.finder__wizard {
  position: relative;
  max-width: 660px;
  margin-inline: auto;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-lg);
}
.finder__progress { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1.75rem; }
.finder__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-line-strong); transition: background-color 0.3s, transform 0.3s; }
.finder__dot.is-active { background: var(--c-brass-500); transform: scale(1.25); }
.finder__dot.is-done { background: var(--c-forest-600); }

.finder__step { display: none; }
.finder__step.is-active { display: block; animation: stepIn 0.45s var(--ease-out); }
.finder__q { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.85rem); text-align: center; color: var(--c-ink-900); margin-bottom: 1.5rem; }
.finder__options { display: grid; gap: 0.75rem; }
.finder__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.4rem;
  text-align: left;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-ink-900);
  background: var(--c-cream);
  border: 1px solid var(--c-line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.finder__option:hover { background: #fff; border-color: var(--c-brass-500); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.finder__option svg { width: 20px; height: 20px; color: var(--c-brass-600); opacity: 0; transition: opacity 0.2s; }
.finder__option:hover svg { opacity: 1; }
.finder__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 1.75rem; min-height: 24px; }
.finder__back, .finder__restart {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.9rem; font-weight: 600; color: var(--c-ink-400);
  transition: color 0.2s;
}
.finder__back:hover, .finder__restart:hover { color: var(--c-ink-700); }
.finder__back[hidden] { visibility: hidden; }

.finder__result { display: none; text-align: center; animation: stepIn 0.5s var(--ease-out); }
.finder__result.is-active { display: block; }
.finder__result-intro { font-size: 0.92rem; color: var(--c-ink-600); margin-bottom: 0.5rem; }
.finder__result-type { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem); color: var(--c-forest-800); margin-bottom: 0.75rem; }
.finder__result-reason { max-width: 460px; margin: 0 auto 1.75rem; color: var(--c-ink-600); }
.finder__result .btn { margin-bottom: 1rem; }

/* Vertrauens-Fußnote unter dem Wizard — eine Quelle für Homepage-Sektion,
   #quiz-modal und den Unterseiten-Modal (finder-modal.njk). Im Modal-Kontext
   ohne oberen Abstand, dafür mit Dialog-Padding unten. */
.finder__note { display: flex; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; font-size: 0.82rem; color: var(--c-ink-400); margin: 1.1rem 0 0; }
.finder__note svg { width: 14px; height: 14px; color: var(--c-brass-600); flex: none; }
.modal .finder__note { margin: 0; padding: 0 1.5rem 1.5rem; }

@keyframes stepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* 9 · Comparison ---------------------------------------------------------- */
.compare { display: grid; gap: 1rem; max-width: 960px; margin-inline: auto; }
.compare__table {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.compare__row { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--c-line); }
.compare__row:last-child { border-bottom: none; }
/* Kopfzeile — 2026-07-28: trug bis dahin --c-sand, also exakt die Sektionsfarbe
   (.section--sand), und las sich deshalb nicht als Kopf (User-Wunsch: „muss sich
   vom normalen Hintergrund unterscheiden"). Jetzt nach dem Vorbild des
   kanonischen Tabellenkopfs .table th (pages.css) — forest-800 + Creme.
   .compare__table ist strukturell dasselbe Bauteil wie .table-wrap, damit folgt
   die Homepage endlich derselben Regel wie jede andere Tabelle der Site. */
/* Zwei Grüntöne statt einer Fläche (2026-07-28, User-Wunsch): hell für den
   Verbrauchsausweis, dunkel für den Bedarfsausweis. Die Messingtönung, die die
   Feat-Spalte im Körper trägt, darf im Kopf NICHT mitlaufen — Messing ist hell
   und würde das Abdunkeln wieder aufheben (forest-900 + 14 % Messing landet bei
   L* 22,7 und damit fast auf dem hellen Nachbarn, L* 24,9). Deshalb im Kopf
   reine Volltöne: forest-800 (L* 24,9) ↔ forest-900 (L* 15,0), ΔL* 9,9. */
.compare__head { background: var(--c-forest-800); }
.compare__col { padding: 1.25rem 1.4rem; border-bottom: 1px solid var(--c-line); }
.compare__col:last-child { border-bottom: none; }
.compare__col--feat { background: rgba(201, 162, 75, 0.06); }
.compare__head .compare__col--feat { background: var(--c-forest-900); }
/* --c-line ist auf Dunkelgrün eine grelle Kante. Gilt für border-bottom (<768px)
   wie border-right (>=940px) — border-color schlägt beide Kurzschreibweisen. */
.compare__head .compare__col { border-color: rgba(255, 255, 255, 0.14); }
.compare__head .compare__product b { color: var(--c-cream); }
/* brass-400, nicht brass-500: 500 liegt auf der getönten Feat-Zelle bei 3,8:1
   und damit unter AA. 400 ist ohnehin der On-Dark-Akzent des Systems. */
.compare__head .compare__product .price { color: var(--c-brass-400); }
/* Zwischen 768 und 940px stapeln die zwei Kopfzellen noch, aber der 768er-Block
   nimmt ihnen die Trennlinie — auf Sand unsichtbar, auf Dunkelgrün ein
   zusammengeklebter Block. Doppelklasse, damit die Regel unabhängig von der
   Quellreihenfolge gewinnt. */
@media (min-width: 768px) and (max-width: 939.98px) {
  .compare__head.compare__row--head .compare__col { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .compare__head.compare__row--head .compare__col:last-child { border-bottom: none; }
}
.compare__crit { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-brass-600); margin-bottom: 0.5rem; }
.compare__product { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.compare__product b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--c-ink-900); }
.compare__product .price { font-weight: 600; color: var(--c-forest-800); }
.compare__cell-title { font-weight: 650; color: var(--c-ink-900); margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.compare__cell-text { font-size: 0.9rem; color: var(--c-ink-600); }
.compare__foot { display: grid; grid-template-columns: 1fr; grid-column: 1 / -1; gap: 0.85rem; padding: 1.4rem 1.6rem; }
.compare__note { text-align: center; font-size: 0.95rem; color: var(--c-ink-600); margin-top: 0.5rem; }

/* 9b · Ausweis-Muster ------------------------------------------------------ */
/* Sektion „So sieht Ihr Energieausweis aus" (index.html, Marke 9b, 2026-07-21): amtliches
   Muster-Formular mit nummerierten Markern, daneben die Erklärliste. Dunkles Showcase nach
   dem Vorbild von .finder, damit das weiße Blatt herausleuchtet. Marker sitzen über --x/--y
   in Prozent → skalieren mit dem Bild mit; die Werte sind am Screenshot eingemessen (s.
   specs/STATUS.md). Lag bis 2026-07-21 in einer eigenen home.css, weil styles.css
   eingefroren war und index.html kein pages.css lädt. */
.muster {
  background: var(--c-forest-900);
  color: #fff;
  position: relative;
  /* clip-path statt overflow:hidden — bändigt den ::before-Schimmer genauso,
     macht die Sektion aber NICHT zum Scroll-Container. Sonst wäre das
     position:sticky des Dokuments (s. u.) wirkungslos. */
  clip-path: inset(0);
}
.muster::before {
  content: "";
  position: absolute;
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  max-width: 900px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.14), transparent 60%);
  pointer-events: none;
}
.muster > .container { position: relative; }
.muster .eyebrow { color: var(--c-brass-400); }
.muster .eyebrow::before,
.muster .eyebrow::after { background: var(--c-brass-400); }
.muster h2 { color: #fff; }
.muster .section-head .lead { color: rgba(255, 255, 255, 0.74); }

/* ------------------------------------------------------------------ Raster */
.muster__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}
@media (min-width: 900px) {
  .muster__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Dokument */
.muster__doc {
  position: relative;
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 34rem;
  padding: clamp(0.55rem, 1.4vw, 0.9rem);
  background: var(--c-paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* Die Erklärliste läuft höher als das Blatt (gemessen 911 vs. 772 px) — auf
   großen Schirmen bleibt das Dokument deshalb stehen, solange man die Punkte
   liest. Die Höhen-Bedingung ist gemessen, nicht geschätzt: Karte 772 px +
   Offset 92 px = 864 px Mindestbedarf, sonst klebte ein unten angeschnittenes
   Blatt fest. Offset = Kopfzeile (.nav 72px, seit dem Anti-Flacker-Fix 2026-07-23
   konstant — vorher gestaucht 62px) + Luft. */
@media (min-width: 900px) and (min-height: 880px) {
  .muster__doc { position: sticky; top: 5.75rem; }
}
.muster__sheet { position: relative; display: block; }
.muster__doc img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.muster__caption {
  margin-top: 0.7rem;
  text-align: center;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--c-ink-400);
}

/* ------------------------------------------------------------------ Marker */
.muster__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin: -0.85rem 0 0 -0.85rem; /* zentriert auf --x/--y, 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);
}
.muster__pin:hover { transform: scale(1.15); }
.muster__pin.is-active {
  transform: scale(1.28);
  box-shadow: 0 0 0 3px #fff, 0 0 0 9px rgba(201, 162, 75, 0.4), 0 6px 14px rgba(20, 32, 27, 0.4);
}

/* Ruhiger Puls auf dem aktiven Marker — nur wenn Animation erwünscht ist. */
@media (prefers-reduced-motion: no-preference) {
  .muster__pin.is-active::after {
    content: "";
    position: absolute;
    inset: -0.35rem;
    border-radius: 50%;
    border: 2px solid rgba(201, 162, 75, 0.75);
    animation: musterPulse 2.2s ease-out infinite;
    pointer-events: none;
  }
  @keyframes musterPulse {
    0%   { transform: scale(0.8); opacity: 0.9; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
  }
}

/* ------------------------------------------------- Mobile-Tooltip (<900px) */
/* home.js hängt .muster__tip ins Blatt (.muster__sheet) und öffnet die
   Erklärung eines Pins direkt an der Marke — einspaltig steht die Liste
   unter dem Dokument, der frühere Scroll-Sprung dorthin riss einen aus dem
   Bild (User-Wunsch 2026-08-04). Horizontal steht die Box immer zentriert
   (92 % Blattbreite = 4 % Rand je Seite), nur die Pfeilspitze (--tip-ax)
   wandert zum Pin; --tip-y ist die Pin-y-Position, die --above-Variante
   öffnet bei Pins der unteren Blatthälfte nach oben. Erzeugung, Befüllung
   aus der Erklärliste und Positionswerte: home.js, Abschnitt 2. */
.muster__tip {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--tip-y, 50%) + 1.6rem);
  transform: translateX(-50%);
  display: block;
  width: 92%;
  padding: 0.85rem 2.5rem 0.95rem 1rem;
  text-align: left;
  background: var(--c-forest-800);
  color: #fff;
  border: 1px solid rgba(201, 162, 75, 0.45);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(20, 32, 27, 0.4);
}
/* Explizit nötig: das display:block oben schlägt sonst die [hidden]-Regel
   des UA-Stylesheets (Autorenregeln gewinnen unabhängig von Spezifität). */
.muster__tip[hidden] { display: none; }
.muster__tip--above {
  top: auto;
  bottom: calc(100% - var(--tip-y, 50%) + 1.6rem);
}
/* Pfeilspitze: gedrehtes Quadrat, erbt die Boxfarbe und deckt das darunter
   liegende Randstück der Box ab; nur die zwei zum Pin zeigenden Kanten
   tragen den Messing-Rand. */
.muster__tip::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--tip-ax, 50%);
  width: 13px;
  height: 13px;
  transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-left: 1px solid rgba(201, 162, 75, 0.45);
  border-top: 1px solid rgba(201, 162, 75, 0.45);
}
.muster__tip--above::before {
  top: auto;
  bottom: -7px;
  border-left: 0;
  border-top: 0;
  border-right: 1px solid rgba(201, 162, 75, 0.45);
  border-bottom: 1px solid rgba(201, 162, 75, 0.45);
}
.muster__tip-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.muster__tip-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  color: #2a2010;
  background: var(--c-brass-500);
}
.muster__tip-title {
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}
.muster__tip-desc {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}
.muster__tip-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}
.muster__tip-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.muster__tip-close svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .muster__tip { animation: musterTipIn 0.22s var(--ease-out); }
  @keyframes musterTipIn { from { opacity: 0; } }
}

/* ------------------------------------------------------------- Erklärliste */
.muster__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.muster__item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  width: 100%;
  padding: 0.95rem 1.15rem;
  text-align: left;
  font-family: inherit;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
    transform 0.25s var(--ease-out);
}
.muster__item:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.24); }
.muster__item.is-active {
  background: rgba(201, 162, 75, 0.13);
  border-color: var(--c-brass-400);
  transform: translateX(2px);
}
.muster__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-brass-400);
  border: 1px solid rgba(201, 162, 75, 0.5);
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.muster__item.is-active .muster__num {
  background: var(--c-brass-500);
  border-color: transparent;
  color: #2a2010;
}
.muster__text { display: block; }
.muster__title {
  display: block;
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -0.005em;
}
.muster__desc {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}
/* Vertiefungs-Link (Punkt 5 → Pflichtangaben-Generator). Muss außerhalb des
   Buttons stehen — <a> in <button> wäre invalides HTML. */
.muster__more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.45rem 0 0.15rem 3.7rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--c-brass-400);
  border-bottom: 1px solid rgba(201, 162, 75, 0.4);
  padding-bottom: 2px;
  transition: gap 0.25s var(--ease-out), border-color 0.25s;
}
.muster__more:hover { gap: 0.7rem; border-color: var(--c-brass-400); }
.muster__more svg { width: 15px; height: 15px; }

/* ----------------------------------------------------------------- Abbinder */
.muster__foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.muster__note {
  max-width: 46rem;
  margin: 0 auto 1.5rem;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.66);
}
.muster__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
}
.muster__foot .link-arrow { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.35); }
.muster__foot .link-arrow:hover { border-bottom-color: var(--c-brass-400); }

/* ------------------------------------------------------------------- Mobil */
@media (max-width: 560px) {
  .muster__pin {
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.75rem 0 0 -0.75rem;
    font-size: 0.72rem;
  }
  .muster__item { padding: 0.85rem 0.95rem; gap: 0.7rem; }
  .muster__more { margin-left: 3.05rem; }
}

/* 10 · Pflicht ------------------------------------------------------------ */
.warnbox {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: 1.4rem 1.6rem;
  background: var(--c-warn-bg);
  border: 1px solid var(--c-warn-line);
  border-left: 4px solid var(--c-warn);
  /* 2026-07-28: links eckig, rechts rund (User-Wunsch) — mit umlaufendem Radius
     rundete der 4px-Akzentstreifen oben und unten mit; jetzt läuft er als
     gerader Balken durch. */
  border-radius: 0 var(--radius) var(--radius) 0;
}
.warnbox__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(180, 83, 9, 0.12); color: var(--c-warn); flex: none; }
.warnbox__icon svg { width: 24px; height: 24px; }
.warnbox__title { font-weight: 700; color: #7c3a09; font-size: 1.05rem; margin-bottom: 0.2rem; }
.warnbox__src { font-size: 0.84rem; color: var(--c-ink-500, var(--c-ink-400)); }
.duties__grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.duty {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.duty:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.duty h3 { font-size: 1.12rem; margin-bottom: 0.35rem; }
.duty p { font-size: 0.92rem; }
.pflicht__cta { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }

/* 11 · Checklists --------------------------------------------------------- */
.checklists__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.checklist-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.checklist-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.checklist-card h3 { font-size: 1.3rem; }
/* flex:1 füllt die Restfläche, damit der Button unten sitzt — align-content verhindert,
   dass die Grid-Zeilen dabei mitwachsen (bei ungleich langen Karten nebeneinander klafften
   sonst ~200 px zwischen zwei Punkten; 2026-07-21). p + .checks: in der Variante mit Absatz
   statt Karten-Kopf fehlte der Abstand ganz — 1.375rem = dieselben 22 px wie oben.
   2026-08-04: .xlist den .checks gleichgestellt — die „Das bremst den Express"-Karte
   (/express-energieausweis/) nutzt xlist, dort klebten Liste, Absatz und Button
   aufeinander. .xlist + p bekommt eigenen Abstand zum Button; NICHT pauschal auf
   .checklist-card p setzen — in der p-vor-.checks-Variante der Produktseiten käme der
   Wert zum margin-top der Liste dazu (Flex-Margins kollabieren nicht). */
.checklist-card .checks,
.checklist-card .xlist { margin-bottom: 1.6rem; flex: 1; align-content: start; }
.checklist-card p + .checks { margin-top: 1.375rem; }
.checklist-card .xlist + p { margin-bottom: 1.6rem; }
.checklist-card .btn { margin-top: auto; }

/* 12 · FAQ ---------------------------------------------------------------- */
.faq__layout { max-width: 820px; margin-inline: auto; }
.faq__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2rem; }
.faq__filter {
  padding: 0.55rem 1.05rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-ink-600);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 100px;
  transition: all 0.2s var(--ease);
}
.faq__filter:hover { border-color: var(--c-forest-600); color: var(--c-forest-800); }
.faq__filter.is-active { background: var(--c-forest-800); color: #fff; border-color: var(--c-forest-800); }
.faq__list { display: grid; gap: 0.75rem; }
.faq__item {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.faq__item.is-open { border-color: var(--c-line-strong); box-shadow: var(--shadow-sm); }
.faq__item[hidden] { display: none; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 1.4rem;
  text-align: left;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-ink-900);
}
.faq__q-icon { flex: none; width: 24px; height: 24px; position: relative; }
.faq__q-icon::before, .faq__q-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; background: var(--c-brass-600); border-radius: 2px; transform: translate(-50%, -50%); transition: transform 0.3s var(--ease); }
.faq__q-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-open .faq__q-icon::after { transform: translate(-50%, -50%) rotate(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.faq__a-inner { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p { padding: 0 1.4rem 1.4rem; font-size: 0.96rem; color: var(--c-ink-600); }
.faq__bottom { text-align: center; margin-top: 2rem; }

/* 13 · Trust -------------------------------------------------------------- */
.trust__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.trust-card {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.6rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.trust-card h3 { font-size: 1.12rem; margin-bottom: 0.3rem; }
.trust-card p { font-size: 0.9rem; margin-bottom: 0.5rem; }
.payments { text-align: center; }
.payments__title { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-400); margin-bottom: 1.25rem; }
.payments__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; }
.pay-logo {
  display: grid;
  place-items: center;
  height: 46px;
  min-width: 68px;
  padding: 0 0.9rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
}
.pay-logo svg { height: 22px; width: auto; }
.payments__logos img { height: 52px; width: auto; display: block; }

/* 14 · Team --------------------------------------------------------------- */
.team__top { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.team__intro p { font-size: 1.05rem; margin-top: 1rem; }
.team__figure { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3 / 2; }
.team__figure img { width: 100%; height: 100%; object-fit: cover; }
.team__figure-badge {
  position: absolute; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border-radius: 100px;
  font-size: 0.84rem; font-weight: 600; color: var(--c-forest-800);
  box-shadow: var(--shadow-md);
}
.team__figure-badge svg { width: 17px; height: 17px; color: var(--c-brass-600); }
.team__grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.team-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.6rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.team-card__qual { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: var(--c-brass-600); }
.team-card h3 { font-size: 1.1rem; }
.team-card p { font-size: 0.9rem; }

/* 15 · News --------------------------------------------------------------- */
.news__card {
  max-width: 880px; margin-inline: auto;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.news__card-head { padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.75rem, 4vw, 2.5rem) 0; }
.news__list { padding: 1.5rem clamp(1.75rem, 4vw, 2.5rem) 0; display: grid; gap: 0; }
.news__item { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--c-line); }
.news__item:last-child { border-bottom: none; }
.news__num { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--c-brass-500); }
.news__item h4 { font-family: var(--font-sans); font-weight: 650; font-size: 1rem; color: var(--c-ink-900); margin-bottom: 0.2rem; }
.news__item p { font-size: 0.9rem; }
/* Download-Leiste — 2026-07-28: trug bis dahin --c-sand, also exakt die
   Sektionsfarbe (#aktuelles ist .section--sand); die Karte löste sich unten im
   Hintergrund auf (User: „sieht scheiße aus"). Jetzt als dunkles CTA-Band nach
   dem Vorbild von .footer-cta / .muster / .callout — die einzige CTA-Band-
   Sprache des Projekts, inklusive Gold-Button. */
.news__download {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.75rem, 4vw, 2.5rem);
  margin-top: 1.5rem;
  background: var(--c-forest-800);
  color: var(--c-cream);
}
/* gleicher Wert wie .footer-cta__sub */
.news__download-meta { font-size: 0.84rem; color: rgba(255, 255, 255, 0.78); }
/* Die globale Regel `strong, b { color: var(--c-ink-900) }` schlägt die Vererbung
   — auf Dunkelgrün wäre „Report 2026" 1,5:1. Gleiches Mittel wie bei
   .trustbar__item strong und .urgency strong. (Das frühere Inline-`style` am
   <strong> in index.html ist in derselben Runde entfallen.) */
.news__download strong { color: var(--c-cream); }
/* .btn--primary ist forest-800 auf forest-800 = unsichtbar. Auf Dunkel nutzt das
   System durchgehend Gold (.muster, .footer-cta). */
.news__download .btn--primary {
  --btn-bg: var(--c-brass-500);
  color: #2a2010;
  box-shadow: 0 1px 2px rgba(138, 106, 38, 0.3), 0 12px 28px rgba(176, 138, 56, 0.28);
}
/* Pflicht: .btn--primary:hover hat dieselbe Spezifität und steht früher — ohne
   diesen Override kehrt beim Hover der dunkelgrüne Schatten zurück. */
.news__download .btn--primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 2px 8px rgba(138, 106, 38, 0.34), 0 18px 40px rgba(176, 138, 56, 0.32);
}
/* Unter 560px stapeln Meta und Button ohnehin (flex-wrap) — dann sauber als
   Block. line-height hoch, weil .btn line-height:1 setzt und das lange Label
   sonst beim Umbruch mit sich selbst kollidiert. */
@media (max-width: 560px) {
  .news__download { flex-direction: column; align-items: stretch; text-align: center; }
  .news__download .btn { width: 100%; line-height: 1.3; }
}

/* 16 · Footer-CTA --------------------------------------------------------- */
.footer-cta { background: var(--c-forest-800); color: #fff; position: relative; overflow: hidden; }
.footer-cta::before {
  content: "";
  position: absolute; top: -40%; right: -10%;
  width: 60vw; max-width: 700px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.16), transparent 60%);
  pointer-events: none;
}
.footer-cta__inner { position: relative; text-align: center; max-width: 720px; margin-inline: auto; }
.footer-cta h2 { color: #fff; }
.footer-cta__sub { color: rgba(255, 255, 255, 0.78); font-size: 1.1rem; margin: 1rem 0 2rem; }
.footer-cta__buttons { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-bottom: 1.5rem; }
.footer-cta__trust { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.82); }
.footer-cta__trust .stars { font-size: 0.85rem; }

/* Footer ------------------------------------------------------------------ */
/* Messing-Haarlinie oben trennt den dunklen Footer sichtbar von der ebenfalls
   dunkelgrünen Footer-CTA (beide forest-900 → sonst nahtloser Übergang, 2026-07-23). */
.footer { background: var(--c-forest-900); color: rgba(255, 255, 255, 0.7); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; border-top: 1px solid rgba(201, 162, 75, 0.28); }
.footer__top { display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-bottom: 2.5rem; }
.footer__brand .brand__word { color: #fff; }
.footer__brand .brand__word em { color: var(--c-brass-400); }
.footer__blurb { margin-top: 1rem; font-size: 0.92rem; max-width: 30rem; color: rgba(255, 255, 255, 0.6); }
.footer__contacts { margin-top: 1.25rem; display: grid; gap: 0.5rem; }
.footer__contacts a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.footer__contacts svg { width: 16px; height: 16px; color: var(--c-brass-400); }
.footer__contacts a:hover { color: #fff; }
.footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); }
.footer__col h3 { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin-bottom: 1rem; }
.footer__col ul { display: grid; gap: 0.6rem; }
.footer__col a { font-size: 0.92rem; color: rgba(255, 255, 255, 0.7); }
.footer__col a:hover { color: #fff; }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer__legal a:hover { color: #fff; }

/* =============================================================== OVERLAYS */
/* Mobile sticky CTA */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -8px 24px rgba(20, 32, 27, 0.08);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
/* Unterdrueckung, die .is-visible schlaegt (0,3,0 gegen 0,2,0). Gedacht fuer
   den Fall, dass die Bar auf ihr eigenes Ziel zeigt: auf
   /energieausweis-kostenlos/ laedt sie zum Kennwert-Rechner ein und lag dabei
   auf Mobil ueber dessen Ergebnis — „zum Rechner", waehrend man im Rechner
   steht. assets/js/kennwert.js setzt die Klasse, solange #rechner im Bild ist.
   Gesetzt wird bewusst NICHT .is-visible entfernt: pageStickyCta() in pages.js
   verwaltet diese Klasse selbst und wuerde sie beim naechsten Scroll-Ereignis
   wieder anschalten. */
.sticky-cta.is-visible.is-suppressed { transform: translateY(100%); }
.sticky-cta__text { flex: 1; min-width: 0; }
.sticky-cta__text b { display: block; font-size: 0.92rem; color: var(--c-ink-900); }
.sticky-cta__text span { font-size: 0.78rem; color: var(--c-ink-400); }
.sticky-cta .btn { flex: none; }

/* Live notifications */
.toasts { position: fixed; left: 1rem; bottom: 1rem; z-index: 110; display: grid; gap: 0.6rem; width: min(330px, calc(100vw - 2rem)); pointer-events: none; }
.toast {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  transform: translateX(-120%);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease);
}
.toast.is-visible { transform: translateX(0); opacity: 1; }
.toast__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(22, 128, 60, 0.12); color: var(--c-success); flex: none; }
.toast__icon svg { width: 20px; height: 20px; }
.toast__body { flex: 1; min-width: 0; }
.toast__body b { font-size: 0.88rem; color: var(--c-ink-900); }
.toast__body span { display: block; font-size: 0.78rem; color: var(--c-ink-400); }
.toast__close { width: 24px; height: 24px; display: grid; place-items: center; color: var(--c-ink-400); border-radius: 6px; flex: none; }
.toast__close:hover { background: var(--c-sand); color: var(--c-ink-900); }

/* Modal (Finder quiz) */
.modal {
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-items: center;
  padding: 1.25rem;
  opacity: 0; visibility: hidden;
  /* visibility ist eine DISKRETE Eigenschaft — eine Dauer von 0.3s ist dort
     sinnlos. Gewollt ist: beim Oeffnen sofort sichtbar, beim Schliessen erst
     NACH dem Ausblenden verstecken. Das leistet die Verzoegerung, nicht die
     Dauer.
     Vorher stand hier `visibility 0.3s`. Folge: unmittelbar nach
     `classList.add("is-open")` war die berechnete visibility noch `hidden`,
     und zwar je nach Zeitpunkt im Frame-Zyklus ZWEI bis DREI Frames lang.
     focus() auf ein Element in einem visibility:hidden-Teilbaum ignoriert der
     Browser stillschweigend — der Fokus blieb deshalb in allen drei Modals
     (Finder, Rueckruf, NWG-Anfrage) auf dem Trigger stehen, und der erste Tab
     lief durch die Seite HINTER dem Dialog statt in ihn hinein.
     Mit `0s` ist der Zustandswechsel synchron, die JS-Seite braucht keine
     Frame-Zaehlerei. Die sichtbare Ein-/Ausblendung macht weiterhin allein
     `opacity` — optisch aendert sich nichts (gemessen 1440/900/390,
     2026-08-03). */
  transition: opacity 0.3s var(--ease), visibility 0s var(--ease) 0.3s;
}
.modal.is-open {
  opacity: 1; visibility: visible;
  transition: opacity 0.3s var(--ease), visibility 0s var(--ease) 0s;
}
.modal__scrim { position: absolute; inset: 0; background: rgba(14, 42, 30, 0.55); backdrop-filter: blur(4px); }
.modal__dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.4s var(--ease-out);
}
.modal.is-open .modal__dialog { transform: translateY(0) scale(1); }
.modal__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(20, 32, 27, 0.06);
  color: var(--c-ink-700);
}
.modal__close:hover { background: rgba(20, 32, 27, 0.12); }
.modal__close svg { width: 22px; height: 22px; }
.modal .finder__wizard { background: transparent; border: none; box-shadow: none; backdrop-filter: none; margin: 0; padding: clamp(1.75rem, 4vw, 2.75rem); }
.modal__heading { text-align: center; padding: clamp(1.75rem, 4vw, 2.5rem) 1.5rem 0; }
.modal__heading .eyebrow { color: var(--c-brass-600); justify-content: center; }
.modal__heading .eyebrow::before, .modal__heading .eyebrow::after { background: var(--c-brass-500); }
.modal__heading h3 { color: var(--c-ink-900); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.8rem); }
.modal__sub { margin: 0.6rem auto 0; max-width: 46ch; font-size: 0.95rem; color: var(--c-ink-700); }
.modal__note {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin: 0; padding: 0 1.5rem 1.5rem;
  font-size: 0.82rem; color: var(--c-ink-400); text-align: center;
}
.modal__note svg { width: 15px; height: 15px; flex: none; color: var(--c-brass-600); }

/* Rückruf-Popup (components/callback-modal.njk + Kopie in index.html) --------
   Der Cal.com-Monatskalender braucht deutlich mehr Breite als der Finder-
   Wizard, sonst bricht seine eigene Zwei-Spalten-Ansicht auf Mobil-Layout um.
   Höhe als min-height, nicht height: der Embed misst sich selbst nach und
   wächst beim Schritt „Termin → Formular" — eine feste Höhe würde dort
   abschneiden. Der Wert hält die Reserve, damit beim Laden nichts springt. */
.modal--callback .modal__dialog { width: min(1040px, 100%); }
.cal-embed { padding: clamp(1.25rem, 3vw, 2rem) clamp(0.75rem, 2vw, 1.5rem) 0.5rem; }
.cal-embed__frame { min-height: 600px; width: 100%; }
/* Untergrenze auf dem iframe, KEINE feste Höhe — der Unterschied ist wichtig:
   Cal vermisst sich im Monats-View selbst und schreibt `height:560px` inline,
   sein eigener Inhalt braucht aber ~575px. Ergebnis war eine sauber halbierte
   „Cal.com"-Fußzeile (gemessen 1440×900; hängt nicht an unserem Container —
   auch ohne min-height am Elternteil kam Cal auf 560). min-height hebt den
   Boden auf 600px an; sobald Cal im Schritt „Termin → Formular" höher wird,
   gewinnt seine inline height. Ein `height … !important` würde den Embed
   genau dort einfrieren und das Formular abschneiden. Nicht über 600 gehen:
   bei 620 überläuft der Dialog seine max-height und bekommt eine Scrollbar. */
.cal-embed__frame iframe { min-height: 600px; }
.cal-embed__frame[data-cal-state="failed"] { min-height: 0; }
/* Bis der Kalender da ist, statt Leerraum ein ruhiger Platzhalter. */
.cal-embed__frame[data-cal-state="loading"]:empty {
  border: 1px dashed var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-sand);
}
.cal-embed__fallback { margin: 0; padding: 1.5rem 0.5rem; text-align: center; font-size: 0.92rem; color: var(--c-ink-700); }
.cal-embed__fallback a { color: var(--c-forest-700); text-decoration: underline; }
@media (max-width: 640px) {
  .cal-embed__frame { min-height: 520px; }
}

/* ============================================================== UTILITIES */
.u-mt { margin-top: 1.5rem; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================================================================= MOTION */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.4s; }

/* ============================================================= RESPONSIVE */
@media (min-width: 600px) {
  .extras__grid { grid-template-columns: 1fr 1fr; }
  .checklists__grid { grid-template-columns: 1fr 1fr; }
  .benefits__grid { grid-template-columns: 1fr 1fr; }
  .duties__grid { grid-template-columns: 1fr 1fr; }
  .team__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .proofbar__grid { grid-template-columns: repeat(4, 1fr); }
  .proof::after { content: ""; position: absolute; right: -0.5rem; top: 50%; transform: translateY(-50%); width: 1px; height: 46px; background: rgba(255, 255, 255, 0.16); }
  .proof:last-child::after { display: none; }
  .steps__grid { grid-template-columns: repeat(3, 1fr); }
  .steps__grid::before {
    content: "";
    position: absolute;
    top: 3.4rem; left: 16%; right: 16%;
    height: 2px;
    background-image: linear-gradient(90deg, var(--c-brass-400) 40%, transparent 40%);
    background-size: 12px 2px;
    z-index: 0;
  }
  .trust__grid { grid-template-columns: 1fr 1fr; }
  .testi-card { flex-basis: 46%; }
  .compare__row--head .compare__col { border-bottom: none; }
}

/* Header-Stufen (2026-07-28, Overflow-Fix).
   Vorher schaltete hier die KOMPLETTE Desktop-Nav ein. Gemessen braucht sie aber
   Brand 202 + Links 474 + Aktionen 397 = 1073 px zzgl. 80 px Container-Padding,
   also ~1153 px Viewport — zwischen 880 und ~1160 px lief der Header deshalb auf
   allen 22 Seiten über (bei 880 px um 276 px, bei 900 px um 257 px).
   Jetzt zwei Stufen: ab 880 px kommen die beiden Aktions-Buttons zurück
   (Kundenportal + CTA), die Seitenlinks bleiben im Burger; die volle Nav erst,
   wenn sie nachweislich passt. Das Burger-Menü selbst hat keine Breakpoint-
   Sperre und funktioniert in der Zwischenstufe unverändert. */
@media (min-width: 880px) {
  .nav__finder, .nav__cta { display: flex; }
  .sticky-cta { display: none; }
}

@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1.06fr 0.94fr; }
  .pricing__grid { grid-template-columns: 1fr 1fr; }
  .benefits__grid { grid-template-columns: repeat(3, 1fr); }
  .team__top { grid-template-columns: 1fr 1fr; }
  .team__grid { grid-template-columns: repeat(4, 1fr); }
  .compare__row { grid-template-columns: repeat(2, 1fr); }
  .compare__head { grid-template-columns: repeat(2, 1fr); }
  .compare__col { border-bottom: none; border-right: 1px solid var(--c-line); }
  .compare__col:last-child { border-right: none; }
  .compare__foot { grid-template-columns: 1fr 1fr; gap: 3.2rem; }
  /* Footer ab 940px: Brand-Spalte schmaler, Link-Spalten daneben. Seit der
     Neusortierung 2026-08-11 (drei → vier Spalten) bleibt es hier beim
     2×2-Raster der Basisregel — vier auto-Spalten passen erst ab 1200px in
     den rechten Track, darunter brächen „Pflichtangaben-Generator" & Co. um
     (bei 1100px gemessen). Die einzeilige Vier-Spalten-Reihe steht im
     1200px-Block. */
  .footer__top { grid-template-columns: 1fr 1.5fr; }
}

@media (min-width: 1100px) {
  .testi-card { flex-basis: 31.5%; }
}

@media (min-width: 1200px) {
  /* Footer-Neusortierung 2026-08-11: vier Spalten (Energieausweis / Beratung &
     Service / Wissen & Tools / Unternehmen) in einer Reihe. Erst ab 1200px —
     gemessen brauchen die vier max-content-Spalten 623px + Gutter, bei 1100px
     hat der rechte Track nur ~648px und drei Links brachen um. auto-Tracks
     statt max-content, damit bei knapper Breite (z. B. klassische Scrollbar)
     der Text umbricht statt den Container zu sprengen; das gap ist bewusst nur
     das Minimum — space-between spreizt die Reihe auf die volle Breite, letzte
     Spalte rechtsbündig für die flüchtende Kante. Der rechte .footer__top-Track
     ist von 1.5fr auf 2fr verbreitert; die Blurb-Spalte links bleibt über ihrer
     max-width lesbar. */
  .footer__top { grid-template-columns: 1fr 2fr; }
  .footer__cols { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 2rem 1.5rem; }
  .footer__col:last-child { text-align: right; }
}

/* ============================================================ COOKIE-CONSENT
   Theme für das CookieConsent-v3-Banner (Vendor: assets/vendor/cookieconsent.css,
   wird in beiden Head-Blöcken VOR dieser Datei geladen — die Variablen hier
   gewinnen per Quellordnung). Nur Token-Mapping, keine neuen Farbwerte; das
   Overlay nutzt denselben Wert wie .modal__scrim.
   Beide Buttons der ersten Ebene („Alle akzeptieren" / „Nur notwendige") sind
   ABSICHTLICH identisch gefärbt — ein optisch abgewerteter Ablehnen-Button ist
   die häufigste Beanstandung der Aufsichtsbehörden. Nicht „verschönern".
   z-Index über die Vendor-Variable (Default wäre 2147483647): 120 sticky-cta
   unter 250 modal unter 260 Consent unter 300 skip-link — das Präferenz-Modal
   darf ein offenes Popup überdecken, der Skip-Link bleibt zuoberst. */
#cc-main {
  --cc-z-index: 260;
  --cc-font-family: var(--font-sans);
  --cc-bg: var(--c-paper);
  --cc-primary-color: var(--c-ink-900);
  --cc-secondary-color: var(--c-ink-700);
  --cc-link-color: var(--c-brass-700);
  --cc-modal-border-radius: var(--radius-lg);
  --cc-btn-border-radius: var(--radius-sm);
  --cc-modal-transition-duration: 0.25s;
  --cc-btn-primary-bg: var(--c-forest-800);
  --cc-btn-primary-color: var(--c-cream);
  --cc-btn-primary-border-color: var(--c-forest-800);
  --cc-btn-primary-hover-bg: var(--c-forest-700);
  --cc-btn-primary-hover-color: var(--c-cream);
  --cc-btn-primary-hover-border-color: var(--c-forest-700);
  --cc-btn-secondary-bg: var(--c-forest-800);
  --cc-btn-secondary-color: var(--c-cream);
  --cc-btn-secondary-border-color: var(--c-forest-800);
  --cc-btn-secondary-hover-bg: var(--c-forest-700);
  --cc-btn-secondary-hover-color: var(--c-cream);
  --cc-btn-secondary-hover-border-color: var(--c-forest-700);
  --cc-separator-border-color: var(--c-line);
  --cc-toggle-on-bg: var(--c-forest-700);
  --cc-toggle-off-bg: var(--c-line-strong);
  --cc-toggle-readonly-bg: var(--c-brass-500);
  --cc-cookie-category-block-bg: var(--c-sand);
  --cc-cookie-category-block-border: var(--c-line);
  --cc-cookie-category-block-hover-bg: var(--c-sand-deep);
  --cc-cookie-category-block-hover-border: var(--c-line-strong);
  --cc-cookie-category-expanded-block-bg: var(--c-sand);
  --cc-cookie-category-expanded-block-hover-bg: var(--c-sand-deep);
  --cc-overlay-bg: rgba(14, 42, 30, 0.55);
  --cc-footer-bg: var(--c-cream);
  --cc-footer-color: var(--c-ink-600);
  --cc-footer-border-color: var(--c-line);
}
#cc-main .cm__title,
#cc-main .pm__title { font-family: var(--font-display); }
#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible { box-shadow: var(--ring); }

/* Stufe 2 des Headers: volle Nav mit Seitenlinks, Burger raus. Schwelle 1180 px
   statt der rechnerischen 1153 px — bei 1160 px blieb ein Sub-Pixel-Rest von 1 px
   Überlauf (gebrochene Textbreiten), 1180 misst sauber 0. */
@media (min-width: 1180px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}