/* ══ ZukunftsHaus ═══════════════════════════════════════════════════════════
   Farben exakt aus der Live-Seite www.zukunfts.haus abgenommen:
   Salbeigrün #6F9D91 (Buttons, Primär), Ocker #FAB25A (aktiv, Akzent),
   Text #3B3B3B, Navigation #33373D.
   Die asymmetrische Button-Rundung 0/20/20/20 ist eine Markensignatur der
   bestehenden Seite und wird bewusst übernommen.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --sage:       #6F9D91;
  --sage-dark:  #587e74;
  --sage-tint:  #eaf1ef;
  --ochre:      #FAB25A;
  --ochre-tint: #fdf1e0;
  --sand:       #e8ddc9;

  --ink:      #3B3B3B;
  --ink-nav:  #33373D;
  --muted:    #6b7280;
  --line:     #dce2df;
  /* Der Grund ist leicht getoent, die Karten sind weiss. Vorher war beides
     #ffffff und die Baender unterschieden sich um drei Prozent — die
     Gliederung war da, man sah sie nur nicht. Tiefe entsteht dadurch, dass
     der Grund zurueckgeht, nicht dadurch, dass die Karten dunkler werden. */
  --bg:       #f7f9f8;
  --band:     #e9efec;
  --card:     #ffffff;
  --shadow:   0 1px 2px rgb(59 59 59 / .06), 0 10px 28px rgb(59 59 59 / .10);

  --accent:      var(--sage);
  --accent-tint: var(--sage-tint);

  /* Richtung, in die Akzentfarben für Text/Buttons gemischt werden.
     Hell: nach Schwarz (dunkler, lesbar auf weiß). Dunkel: nach Weiß.
     Die lesbaren Varianten selbst stehen im body-Block, damit die
     Bereichsfarben (accent-*) automatisch mitgerechnet werden. */
  --accent-mix: #000;

  --radius:     14px;
  --radius-btn: 0 20px 20px 20px;
  --kopfhoehe: 4.5rem;   /* Hoehe der klebenden Kopfzeile */
  --wide:  74rem;
  --text:  42rem;
}

/* Bereichsfarben */
.accent-terracotta { --accent: #C27C58; --accent-tint: #f7ece5; }
.accent-blau       { --accent: #5B7FA6; --accent-tint: #e9eef4; }
.accent-sand       { --accent: #b39b6d; --accent-tint: #f5efe2; }

/* ── Dunkle Variante ─────────────────────────────────────────────────────
   Zwei Wege: ausdrückliche Wahl über data-theme, sonst Systemeinstellung. */
:root[data-theme="dark"] {
  --ink: #e8eae9;  --ink-nav: #e8eae9;  --muted: #9aa5a1;
  --line: #2c3330; --bg: #171b1a;       --band: #1b211f;
  --card: #232b28; --sage-tint: #23302c; --ochre-tint: #302a20;
  --accent-tint: #23302c;
  --accent-mix: #fff;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8eae9;  --ink-nav: #e8eae9;  --muted: #9aa5a1;
    --line: #2c3330; --bg: #171b1a;       --band: #1e2422;
    --card: #1e2422; --sage-tint: #23302c; --ochre-tint: #302a20;
    --accent-tint: #23302c;
    --accent-mix: #fff;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
  }
}

/* ── Grundlagen ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Weiches Scrollen NUR bei echter Sprungmarken-Navigation.
   Global auf html gesetzt gleitet auch die Scroll-WIEDERHERSTELLUNG beim Laden:
   Der Browser stellt die alte Position wieder her (history.scrollRestoration
   steht auf "auto"), und mit smooth wird daraus eine Animation — die Seite
   bewegt sich von selbst, ohne dass jemand etwas anfasst. Am 29.08.2026 von
   Thomas gemeldet, nachgewiesen mit window.scrollTo, das unmittelbar danach
   noch scrollY 0 liefert.
   :has(:target) greift erst, wenn wirklich eine Sprungmarke angesteuert wurde
   — der Sprungguide der Objektansicht gleitet also weiter. */
@media (prefers-reduced-motion: no-preference) {
  html:has(:target) { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;

  /* Lesbare Akzent-Varianten. Hier auf body, nicht auf :root, weil die
     Bereichsklassen (accent-terracotta/blau/sand) --accent am body setzen —
     so rechnen sich die Varianten je Bereich und je Fassung neu.
     --accent-strong: Text, Links, aktive Ränder (mind. 4,5:1).
     --accent-fill:   Button-/CTA-Flächen mit weißem Text (immer dunkel).
     --ochre-text:    aktive Navigation. */
  --accent-strong: color-mix(in srgb, var(--accent) 66%, var(--accent-mix));
  --accent-fill:   color-mix(in srgb, var(--accent) 62%, #000);
  --ochre-text:    color-mix(in srgb, var(--ochre) 56%, var(--accent-mix));
}
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; margin: 0; }
p { margin: 0 0 1rem; }
a { color: var(--accent-strong); text-underline-offset: 3px; }
img, svg { max-width: 100%; }
img { height: auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: var(--bg); padding: .6rem .9rem; border-radius: 6px; z-index: 60; }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: 3px; }

.wrap { max-width: var(--wide); margin: 0 auto; padding-inline: 1.5rem; }
.wrap-text { max-width: var(--text); }

/* ── Scroll-Fortschritt ──────────────────────────────────────────────────
   Schmale Leiste ganz oben, füllt sich beim Scrollen. Liegt über der
   Kopfleiste, ist rein informativ (aria-hidden) und für Zeigegeräte wie
   Tastatur gleichermaßen sichtbar. */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 0; background: var(--accent-strong); transition: width .08s linear; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.4rem; border: 0; border-radius: var(--radius-btn);
  font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: background-color .18s, transform .18s, box-shadow .18s;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary { background: var(--accent-fill); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent-fill) 85%, #000); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.btn-invert { background: #fff; color: var(--sage-dark); }
.btn-invert:hover { transform: translateY(-1px); }

/* ── Kopfleiste ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; min-height: 4.25rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink-nav); font-weight: 700; font-size: 1.15rem; }
.brand img { height: 2.1rem; width: auto; }
.nav { margin-left: auto; }
.theme-toggle { margin-left: .25rem; }
.nav ul, .langs ul, .legal ul { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; }
.nav a { text-decoration: none; color: var(--ink-nav); font-size: .95rem; font-weight: 500; padding: .35rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--accent-strong); }
.nav a[aria-current] { color: var(--ochre-text); border-bottom-color: var(--ochre-text); }
.langs { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.langs ul { gap: .6rem; }
.langs a { text-decoration: none; color: var(--muted); }
.langs a[aria-current="true"] { color: var(--ink-nav); font-weight: 700; }
.theme-toggle {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-nav); cursor: pointer;
}
.theme-toggle:hover { background: var(--accent-tint); }
.theme-toggle svg { width: 1.25rem; height: 1.25rem; }
:root[data-theme="dark"] .icon-mond, .icon-sonne { display: none; }
:root[data-theme="dark"] .icon-sonne { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-mond { display: none; }
  :root:not([data-theme="light"]) .icon-sonne { display: block; }
  :root[data-theme="light"] .icon-mond { display: block; }
  :root[data-theme="light"] .icon-sonne { display: none; }
}
@media (max-width: 60rem) {
  .nav { order: 3; margin: 0; width: 100%; border-top: 1px solid var(--line); padding: .5rem 0; }
  .nav ul { gap: 1rem; overflow-x: auto; }
  .header-cta { margin-left: auto; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: 3.5rem 0 3rem; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
/* Ohne Grafik: Textspalte auf Lesebreite begrenzen, aber die linke Kante der
   Bänder halten — zentrieren würde eine zweite Fluchtlinie erzeugen. */
.hero.no-figure .wrap { grid-template-columns: minmax(0, var(--text)); }
@media (max-width: 62rem) { .hero .wrap { grid-template-columns: 1fr; gap: 2rem; } }

.hero-eyebrow { font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .9rem; }
.hero-title { font-size: clamp(2.1rem, 4.6vw, 3.6rem); margin: 0 0 1.25rem; color: var(--ink-nav); }
.hero-entity { font-size: 1.22rem; font-weight: 600; margin: 0 0 1rem; }
.hero-answer { color: var(--muted); font-size: 1.05rem; }
.hero-answer p:last-child { margin-bottom: 0; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.hero-updated { font-size: .82rem; color: var(--muted); margin: 1.5rem 0 0; }
.hero-figure img { display: block; width: 100%; height: auto; }

/* ── Bänder ──────────────────────────────────────────────────────────────── */
.band { padding: 4rem 0; }
.band-tint { background: var(--band); }
.band > .wrap > h2:first-child,
.band-title { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0 0 2rem; color: var(--ink-nav); max-width: 40rem; }
.band .prose { max-width: var(--text); }

/* Produktbild in der Karte: feste Hoehe, damit ein Raster aus Karten mit und
   ohne Bild nicht ausfranst. */
.card-bild {
  width: 100%; height: 11rem; object-fit: cover;
  border-radius: calc(var(--radius) - 6px);
  background: var(--band);
  margin: 0 0 1rem;
}

.band-mehr { margin: 1.5rem 0 0; }
.band-mehr a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.band-mehr a:hover, .band-mehr a:focus-visible { border-color: var(--accent); }

/* ── Projektkachel ───────────────────────────────────────────────────────
   Bild oben als Teaser, darunter Kenndaten. Karten ohne Bild bekommen keine
   Luecke — sie fangen einfach mit dem Text an. */
.pk-bild {
  width: calc(100% + 2.6rem); margin: -1.4rem -1.3rem 1rem;
  height: 10rem; object-fit: cover; display: block;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--band);
}
.pk-daten { margin: .8rem 0 0; display: grid; gap: .3rem; font-size: .88rem; }
.pk-daten > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; }
.pk-daten dt { color: var(--muted); margin: 0; }
.pk-daten dd { margin: 0; font-weight: 600; }

/* ── Prinzipien: Entscheidung vor Bekenntnis ────────────────────────────── */
.prinzipien { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 52rem) { .prinzipien { grid-template-columns: 1fr 1fr; } }
.prinzip {
  display: grid; gap: .5rem; align-content: start;
  padding: 1.4rem 1.5rem; background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.prinzip-name { margin: 0; font-size: 1.02rem; }
.prinzip-beleg { margin: 0; color: var(--ink); }
.prinzip-projekt { font-size: .88rem; color: var(--muted); text-decoration: none; }
.prinzip-projekt:hover, .prinzip-projekt:focus-visible { color: var(--accent); text-decoration: underline; }

/* ── Team: Personen unter „Über uns“ ─────────────────────────────────────
   Aus dem Paket website-team-kirby, auf Tokens umgestellt. Die Initialen sind
   eine Notloesung fuer fehlende Fotos, keine Gestaltung. */
.team {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.team-karte {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.5rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.team-portrait {
  width: 6.5rem; height: 6.5rem; margin-bottom: .9rem;
  border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-strong);
  font-size: 1.6rem; font-weight: 600; letter-spacing: .04em;
}
.team-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-name { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.team-name a { color: var(--ink-nav); text-decoration: none; }
.team-name a:hover, .team-name a:focus-visible { color: var(--accent-strong); text-decoration: underline; }
.team-rolle { margin: 0; font-size: .9rem; font-weight: 600; color: var(--accent-strong); }
.team-fokus { margin: .4rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--muted); }
.team-kontakt {
  display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem;
  margin: auto 0 0; padding-top: 1.1rem; margin-top: 1.1rem;
  border-top: 1px solid var(--line); font-size: .9rem;
}
.team-kontakt dt { margin: 0; color: var(--muted); }
.team-kontakt dd { margin: 0; overflow-wrap: anywhere; }
.team-kontakt a { color: inherit; text-decoration-color: var(--line); text-underline-offset: .2em; }
.team-kontakt a:hover, .team-kontakt a:focus-visible { color: var(--accent-strong); text-decoration-color: currentColor; }

/* ── Partnerlogos: womit wir bauen ──────────────────────────────────────
   Logos sind fremde Farbflaechen und fuer hellen Grund gemacht. Die Kachel
   bleibt deshalb auch in der dunklen Fassung weiss (#fff ist erlaubt). */
.partnerlogos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.partnerlogo a, .partnerlogo > span {
  display: grid; place-items: center; height: 7rem; padding: 1.1rem 1.4rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .2s, box-shadow .2s;
}
.partnerlogo a:hover, .partnerlogo a:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); }
.partnerlogo img { max-width: 100%; max-height: 4.2rem; width: auto; height: auto; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .partnerlogo a { transition: none; } }

/* ── Weiterfuehrende Seiten ─────────────────────────────────────────────── */
.weiterfuehrend { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.weiterfuehrend a {
  display: grid; gap: .2rem; padding: 1rem 1.2rem; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.weiterfuehrend a:hover, .weiterfuehrend a:focus-visible { border-color: var(--accent); }
.wf-titel { font-weight: 600; }
.wf-text { color: var(--muted); font-size: .92rem; }

/* ── Brotkrumen ──────────────────────────────────────────────────────────
   Leise: Orientierung, kein Navigationsangebot. */
.brotkrumen {
  /* Klebt unter dem Kopf, damit die Orientierung beim Scrollen nicht verschwindet.
     Die Hoehe des Kopfes steht in --kopfhoehe, sonst ueberlappen beide. */
  position: sticky; top: var(--kopfhoehe, 4.5rem); z-index: 40;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
}
.brotkrumen ol {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; margin: 0; padding: .7rem 0;
  font-size: .86rem; color: var(--muted);
}
.brotkrumen li + li::before { content: "›"; margin-right: .4rem; color: var(--line); }
.brotkrumen a { color: var(--muted); text-decoration: none; }
.brotkrumen a:hover, .brotkrumen a:focus-visible { color: var(--accent); text-decoration: underline; }
.brotkrumen [aria-current="page"] { color: var(--ink); }

/* ── Blaettern ───────────────────────────────────────────────────────────
   Drei Felder: zurueck, Uebersicht, weiter. Faellt auf schmalen Schirmen
   untereinander, die Uebersicht bleibt in der Mitte. */
.blaettern {
  display: grid; gap: 1rem; align-items: stretch;
  grid-template-columns: 1fr auto 1fr;
}
.blaettern-ziel {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1rem 1.2rem; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.blaettern-ziel:hover, .blaettern-ziel:focus-visible { border-color: var(--accent); }
.blaettern-nach { text-align: right; }
.blaettern-richtung { font-size: .82rem; color: var(--muted); }
.blaettern-titel { font-weight: 600; }
.blaettern-alle {
  align-self: center; padding: .6rem 1rem; white-space: nowrap;
  color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line);
}
.blaettern-alle:hover, .blaettern-alle:focus-visible { color: var(--accent); }
@media (max-width: 42rem) {
  .blaettern { grid-template-columns: 1fr; }
  .blaettern-nach { text-align: left; }
}

/* ── Raster ──────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
/* .grid-3 fehlte — sechs Templates benutzen es, und ohne Definition fiel jedes
   Dreier-Raster stillschweigend auf eine Spalte zurueck. Genau die Sorte Fehler,
   die nicht nach Fehler aussieht: Die Seite funktioniert, sie sieht nur falsch aus. */
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 68rem) { .grid-5 { grid-template-columns: repeat(3, 1fr); } .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 42rem) { .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.4rem; transition: transform .2s, box-shadow .2s;
}
a.tile { text-decoration: none; color: inherit; display: block; }
a.tile:hover, .tile-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.badge {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 50%; background: var(--accent-tint); color: var(--accent-strong);
  margin-bottom: 1rem;
}
.badge svg { width: 1.4rem; height: 1.4rem; }
.badge-center { margin-inline: auto; }

/* ── Ablauf (nummerierte Folge) ──────────────────────────────────────────
   Kompakt und als Folge lesbar — kein Kasten pro Schritt. Waagerecht auf
   breiten Schirmen, mit Verbindungslinie zwischen den Nummern; auf schmalen
   ein senkrechter Zeitstrahl. */
.ablauf { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.5rem 1rem; }
/* Folgt noch etwas im selben Band, braucht es Luft — sonst klebt der Absatz
   unter den Stationen. Am letzten Element kein Rand, sonst waechst das Band. */
.ablauf:not(:last-child) { margin-bottom: 2.75rem; }
@media (min-width: 46rem) {
  .ablauf { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.25rem; }
}
/* Symbol, Titel und Text sollen ueber alle Stationen hinweg auf einer Linie
   liegen. Ohne subgrid ist jede Station ihr eigenes Raster, und sobald ein
   Text laenger ist als der daneben, rutscht die naechste Ueberschrift nach
   unten — man sieht es erst, wenn die Texte ungleich lang werden.
   `display: contents` loest den Body-Wrapper auf, damit Titel und Text
   direkte Zeilen des gemeinsamen Rasters werden. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 46rem) {
    .ablauf { grid-template-rows: auto auto 1fr; }
    .ablauf-step { grid-row: span 3; grid-template-rows: subgrid; }
    .ablauf-body { display: contents; }
  }
}
.ablauf-step { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; align-items: start; position: relative; }
@media (min-width: 46rem) {
  .ablauf-step { grid-template-columns: 1fr; gap: .5rem; }
}
.ablauf-num {
  grid-row: span 2; display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .95rem;
  position: relative; z-index: 1;
}
@media (min-width: 46rem) { .ablauf-num { grid-row: auto; } }
.ablauf-num svg { width: 1.15rem; height: 1.15rem; }
/* Verbindungslinie: senkrecht auf Mobil, waagerecht auf Desktop.
   Sie haengt am SCHRITT, nicht am Kreis. Vorher hing sie am Kreis, und dort
   ist "100%" dessen eigene Breite (2,1rem) — die Linie wurde dadurch ein
   Stummel von genau einer Gapbreite und sah aus wie Absicht. */
.ablauf-step:not(:last-child)::after {
  content: ""; position: absolute; background: var(--line); z-index: 0;
  left: 1.05rem; top: 2.1rem; width: 2px;
  height: calc(100% - 2.1rem + 1.5rem); transform: translateX(-50%);
}
@media (min-width: 46rem) {
  .ablauf-step:not(:last-child)::after {
    left: 2.1rem; top: 1.05rem; width: calc(100% - 2.1rem + 1.25rem);
    height: 2px; transform: translateY(-50%);
  }
}
.ablauf-body { display: grid; gap: .2rem; }
.ablauf-title { font-weight: 600; font-size: 1rem; color: var(--ink-nav); }
.ablauf-text { font-size: .9rem; color: var(--muted); line-height: 1.5; }

/* ── Vorteile (gleichwertige Punkte) ─────────────────────────────────────
   Leichte Karten, Icon und Text nebeneinander — kein leerer Raum über dem Text. */
.vorteile { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.vorteil {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.vorteil-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 8px; background: var(--accent-tint); color: var(--accent); flex: none; }
.vorteil-icon svg { width: 1.2rem; height: 1.2rem; }
.vorteil-body { display: grid; gap: .25rem; }
.vorteil-title { font-weight: 600; font-size: 1rem; }
.vorteil-text { font-size: .9rem; color: var(--muted); line-height: 1.5; }

/* ── Angebote ────────────────────────────────────────────────────────────── */
.offering { display: flex; flex-direction: column; }
.offering-img { width: 3.4rem; height: 3.4rem; object-fit: contain; margin-bottom: 1rem; }
/* Benanntes Icon in der Karte (aus 'plain'-steps) — getönte Scheibe wie .badge */
.offering-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent-tint); color: var(--accent-strong); margin-bottom: 1rem; }
.offering-icon svg { width: 1.4rem; height: 1.4rem; }
.offering-name { font-size: 1.2rem; margin: 0 0 .2rem; }
.offering-sub { font-size: .87rem; color: var(--muted); margin: 0 0 1rem; }
.offering-desc { font-size: .95rem; margin: 0 0 1rem; }
.offering-features { list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: .9rem; }
.offering-features li { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .45rem; color: var(--muted); }
.offering-features svg { width: 1.05em; height: 1.05em; color: var(--accent-strong); flex: none; margin-top: .2em; }
.offering-foot { margin: auto 0 0; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.offering-price { font-weight: 700; color: var(--accent-strong); }

/* Ganze Karte klickbar, ohne die Angebots-Optik (Fußlink) aufzugeben.
   Der Fußlink wird über die gesamte Karte gespannt; die Tastaturmarke
   liegt dann auf der Karte, nicht nur auf dem kleinen Linktext. */
.offering.is-linked { position: relative; }
.offering.is-linked .offering-foot a::after { content: ''; position: absolute; inset: 0; }
.offering.is-linked:focus-within { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.offering.is-linked .offering-foot a:focus-visible { outline: none; }

/* ── Zeitachse ───────────────────────────────────────────────────────────── */
.milestones { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.milestone { flex: 1 1 8rem; text-align: center; padding: 1.25rem .75rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); border-top: 3px solid var(--line); }
.milestone.is-current { border-top-color: var(--muted); }
.milestone:last-child { border-top-color: var(--ochre); background: var(--ochre-tint); }
.milestone-year { display: block; font-weight: 700; font-size: 1.35rem; color: var(--ink-nav); }
.milestone-label { display: block; font-size: .84rem; color: var(--muted); margin-top: .3rem; }
.milestone:last-child .milestone-label { color: var(--ink); font-weight: 600; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-item { border-top: 1px solid var(--line); padding: 1.4rem 0; max-width: var(--text); }
.faq-q { font-size: 1.08rem; margin: 0 0 .6rem; }
.faq-a { color: var(--muted); }
.faq-a p:last-child { margin: 0; }

/* ── Belegte Zahl ────────────────────────────────────────────────────────── */
.fact { margin: 1.75rem 0; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--accent-tint); max-width: var(--text); }
.fact-value { font-size: 1.9rem; font-weight: 700; color: var(--accent-strong); line-height: 1.1; }
.fact-statement { display: block; margin-top: .3rem; }
.fact-meta { font-size: .82rem; color: var(--muted); display: block; margin-top: .5rem; }

.service { border-top: 1px solid var(--line); padding: 1.4rem 0; max-width: var(--text); }
.service-name { margin: 0 0 .4rem; }
.service-meta { font-size: .87rem; color: var(--muted); display: flex; gap: 1.25rem; margin: 0; }

/* ── Handlungsaufruf ─────────────────────────────────────────────────────── */
.cta { background: var(--accent-fill); color: #fff; border-radius: var(--radius); padding: 3rem 2rem; text-align: center; }
.cta-headline { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 .75rem; color: #fff; }
.cta-text { margin: 0 auto 1.75rem; max-width: 34rem; opacity: .92; }

/* ── Bereichs-/Leistungskarten ───────────────────────────────────────────── */
.card-title { font-size: 1.2rem; margin: 0 0 .5rem; }
.card-text { color: var(--muted); font-size: .94rem; margin: 0; }
.card-price { font-weight: 700; color: var(--accent-strong); margin: .75rem 0 0; }

/* ── Formular ────────────────────────────────────────────────────────────── */
.seed { max-width: var(--text); }
.seed fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; margin: 0 0 1.25rem; background: var(--card); }
.seed legend { font-weight: 700; padding: 0 .5rem; font-size: .95rem; }
.seed label { display: block; margin: 1.1rem 0 .35rem; font-size: .9rem; font-weight: 500; }
/* Der Selektor zaehlte Typen auf — und `number` fehlte. Die Zahlenfelder
   standen deshalb als Browser-Default zwischen gestylten Auswahlfeldern, was
   nach 2003 aussah und ein Selektor war, kein Gestaltungsfehler.
   Jetzt ueber :not() statt Aufzaehlung: Ein neuer Feldtyp ist damit
   automatisch dabei. Ausgenommen sind nur die, die eigene Darstellung haben. */
.seed input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),
.seed select, .seed textarea {
  width: 100%; padding: .7rem .85rem; border: 1.5px solid var(--line); border-radius: 8px;
  font: inherit; background: var(--bg); color: var(--ink);
}
.seed input:focus, .seed select:focus, .seed textarea:focus {
  border-color: var(--accent-strong); outline: 2px solid var(--accent-tint); outline-offset: 1px;
}
/* Zahlenfelder brauchen keine volle Spaltenbreite — ein Baujahr ist vier
   Zeichen lang, und ein Feld, das zehnmal so breit ist, sieht aus wie ein
   Fehler. `ch` skaliert mit der Schrift. */
.seed input[type=number] { max-width: 14ch; }
/* Der Etappenzaehler: klein, ueber der Ueberschrift, damit der Besucher
   weiss, wie viel noch kommt. Ohne ihn fuehlt sich jede Etappe wie die
   vorletzte an. */
/* Zurueck und Weiter nebeneinander. Zurueck links und zurueckhaltend —
   es ist ein Ausweg, kein Angebot. */
.etappen-knoepfe {
  display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
  margin: 1.75rem 0 0;
}
.etappen-zaehler {
  font-size: .85rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent-strong); margin: 0 0 .4rem;
}
.seed input[inputmode=numeric] { max-width: 14ch; }
.seed .opt { font-weight: 400; color: var(--muted); }
.consent { margin: 1.5rem 0; font-size: .9rem; color: var(--muted); }
.consent label { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; margin: 0; }

/* ── Gesperrte Karte: sichtbar, aber noch nicht dran ─────────────────────
   Gedaempft, nicht versteckt. Der Besucher soll sehen, was kommt — und in
   derselben Karte lesen, warum es noch nicht geht. Kein display:none: Eine
   Leistung, die erst spaeter auftaucht, wirkt wie ein Nachschlag. */
.offering.is-gesperrt { opacity: .62; }
.offering.is-gesperrt .offering-name,
.offering.is-gesperrt .offering-price { color: var(--muted); }
.offering.is-gesperrt:hover { transform: none; box-shadow: none; }
.offering-gesperrt {
  display: flex; gap: .55rem; align-items: flex-start; margin: .9rem 0 0;
  padding-top: .9rem; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--muted); opacity: 1;
}
.offering-gesperrt svg { width: 1rem; height: 1rem; flex: none; margin-top: .1rem; }

/* ── Adresssuche: der Einstieg in den PreCheck ───────────────────────────
   Erbt die Feldgestaltung von .seed. Eigen ist nur die Zeile: Straße breit,
   PLZ schmal, Ort mittel — auf schmalen Schirmen untereinander. Der Knopf
   steht NICHT in der Zeile, sondern darunter: Ein Absendeknopf neben drei
   Feldern sieht aus wie ein viertes Feld. */
.adresssuche { max-width: 44rem; }
.adresssuche-felder { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) {
  .adresssuche-felder { grid-template-columns: 2fr 1fr 1.4fr; }
}
.adresssuche .feld { margin: 0; }
.adresssuche .feld label { margin-top: .9rem; }
.adresssuche .btn { margin-top: 1.4rem; }
.adresssuche-fuss { font-size: .85rem; color: var(--muted); margin: .9rem 0 0; }
.adresssuche-status {
  border-left: 3px solid var(--accent); background: var(--accent-tint);
  padding: .9rem 1.1rem; border-radius: 0 8px 8px 0; max-width: var(--text);
  margin: 0 0 1.75rem;
}

/* ── Fußbereich ──────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); margin-top: 4rem; padding: 2.5rem 0 3.5rem; color: var(--muted); font-size: .9rem; }
.site-footer .wrap { display: flex; gap: 2.5rem; flex-wrap: wrap; justify-content: space-between; }
.nap p { margin: 0 0 .25rem; }
.nap-name { font-weight: 700; color: var(--ink); }
.site-footer a { color: var(--muted); }
.legal ul { flex-direction: column; gap: .4rem; }

/* ── Rechtstexte ─────────────────────────────────────────────────────────
   Lange Fließtexte mit vielen Zwischenüberschriften. Enge Zeilenlänge und
   klare Absatzabstände, sonst wird das unlesbar. */
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 2rem; color: var(--ink-nav); }
.legal h2 { font-size: 1.45rem; margin: 2.75rem 0 .9rem; }
.legal h3 { font-size: 1.08rem; margin: 2rem 0 .6rem; }
.legal h4 { font-size: .98rem; margin: 1.5rem 0 .4rem; color: var(--muted); }
.legal p, .legal li { font-size: .97rem; }
.legal ul, .legal ol { padding-left: 1.3rem; }
.legal li { margin-bottom: .4rem; }
.legal a { word-break: break-word; }
.legal-updated { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }

/* ── FAQ aufklappbar ─────────────────────────────────────────────────────
   <details> statt offener Absätze: halbiert die Seitenlänge, und der Text
   bleibt im DOM — Crawler lesen ihn mit. */
.faq-item { border: 0; border-top: 1px solid var(--line); padding: 0; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0;
  position: relative; font-family: inherit; font-size: 1.02rem; font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: .6rem; top: 50%;
  width: .6rem; height: .6rem; margin-top: -.45rem;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -.15rem; }
.faq-item summary:hover { color: var(--accent-strong); }
.faq-item .faq-a { padding: 0 2.5rem 1.3rem 0; color: var(--muted); }
.faq-item .faq-a p:last-child { margin: 0; }

/* ── Bänder etwas dichter ────────────────────────────────────────────── */
.band { padding: 3rem 0; }
.band-title { margin-bottom: 1.5rem; }

/* ── Formulare: Optionen als anklickbare Flächen ─────────────────────────
   Voreingestellte Radios und Checkboxen sind winzig und schwer zu treffen.
   Die ganze Zeile ist die Schaltfläche. */
.jopts { display: grid; gap: .5rem; margin: 1.2rem 0 0; }
.jopts label {
  display: flex; align-items: flex-start; gap: .75rem; margin: 0;
  padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--card); cursor: pointer; font-weight: 400; font-size: .97rem;
  transition: border-color .15s, background-color .15s;
}
.jopts label:hover { border-color: var(--accent-strong); }
.jopts input { margin: .2rem 0 0; accent-color: var(--accent-strong); flex: none; }
.jopts label:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-tint); }
@media (min-width: 40rem) { .jopts-multi { grid-template-columns: 1fr 1fr; } }

/* ── Bedarfsplan ─────────────────────────────────────────────────────── */
.journey { max-width: var(--text); }
.journey-steps { list-style: none; margin: 0; padding: 0; }
.jstep fieldset { border: 0; padding: 0; margin: 0; }
.jstep legend {
  font-size: .78rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-strong); padding: 0;
}
.jq { font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin: .6rem 0 0; color: var(--ink-nav); }
.jhint { font-size: .9rem; color: var(--muted); margin: .5rem 0 0; }
.jsub { margin-top: 1.2rem; }
.journey textarea, .journey input[type=text], .journey input[type=email] {
  width: 100%; padding: .8rem .9rem; border: 1.5px solid var(--line);
  border-radius: 8px; font: inherit; background: var(--bg); color: var(--ink); margin-top: .4rem;
}
.journey :focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.journey-nav { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 2rem; }
.journey-fortschritt { font-size: .84rem; color: var(--muted); margin: 1rem 0 0; font-variant-numeric: tabular-nums; }

/* Ohne JavaScript stehen alle Schritte untereinander — dann brauchen sie Abstand. */
.journey:not(.js) .jstep { margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.journey:not(.js) .journey-fortschritt { display: none; }

.prio-liste { display: grid; gap: .5rem; margin-top: 1.2rem; }
.prio-zeile {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center;
  padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card);
}
.prio-text { font-size: .95rem; }
.prio-wahl { display: flex; gap: .3rem; }
.prio-wahl label {
  margin: 0; padding: .35rem .6rem; border-radius: 6px; font-size: .82rem;
  font-weight: 500; cursor: pointer; border: 1px solid var(--line); display: flex; gap: .35rem;
}
.prio-wahl label:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
.prio-wahl input { accent-color: var(--accent-strong); }
@media (max-width: 34rem) { .prio-zeile { grid-template-columns: 1fr; } }

/* ── Projekte ────────────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.projektdaten { width: 100%; border-collapse: collapse; max-width: var(--text); font-size: .96rem; }
.projektdaten th, .projektdaten td { text-align: left; padding: .62rem .8rem; border-bottom: 1px solid var(--line); }
.projektdaten th { font-weight: 500; color: var(--muted); width: 45%; }
.projektdaten td { font-variant-numeric: tabular-nums; }
.datenhinweis { font-size: .85rem; color: var(--muted); max-width: var(--text); margin-top: 1.2rem; }

.massnahmen { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .45rem; max-width: var(--text); }
.massnahmen li { display: flex; gap: .55rem; align-items: center; font-size: .95rem; }
.massnahmen svg { width: 1.05em; height: 1.05em; color: var(--accent-strong); flex: none; }

.kundenstimme {
  margin: 2rem 0 0; padding: 1.2rem 1.5rem; border-left: 3px solid var(--accent);
  background: var(--card); border-radius: 0 8px 8px 0; max-width: var(--text); font-style: italic; color: var(--muted);
}
.projektbild img { display: block; width: 100%; border-radius: 8px; }

.filter-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; align-items: end; }
.filter label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .3rem; }
.filter select, .filter input {
  width: 100%; padding: .6rem .7rem; border: 1.5px solid var(--line);
  border-radius: 8px; font: inherit; background: var(--bg); color: var(--ink);
}
.filter-spanne span { display: flex; gap: .4rem; }
.filter-nav { display: flex; gap: .5rem; }
.filter-ergebnis { font-size: .88rem; color: var(--muted); margin: 1rem 0 0; }
.leer { color: var(--muted); max-width: var(--text); margin-top: 1.5rem; }

.projektkarte .pk-typ { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.projektkarte .card-title { margin: .4rem 0 .2rem; }
.pk-daten { margin: .9rem 0 0; display: grid; gap: .25rem; font-size: .88rem; }
.pk-daten > div { display: flex; gap: .5rem; }
.pk-daten dt { color: var(--muted); min-width: 4.5rem; }
.pk-daten dd { margin: 0; font-weight: 600; }

/* ── Bedarfsplan: Danke / Fehler ─────────────────────────────────────── */
.danke { max-width: var(--text); text-align: center; padding: 2rem 0; }
.danke svg { width: 3rem; height: 3rem; color: var(--accent); margin-bottom: 1rem; }
.danke h2 { margin: 0 0 .75rem; }
.danke p { color: var(--muted); margin: 0 auto .75rem; max-width: 44ch; }
.danke .btn { margin-top: 1rem; }
.formfehler {
  max-width: var(--text); margin: 0 0 1.5rem; padding: .9rem 1.1rem;
  border-radius: 8px; background: var(--ochre-tint); color: var(--ink);
  border-left: 3px solid var(--ochre); font-size: .95rem;
}

/* ══ Objektbild ══════════════════════════════════════════════════════════
   Erste der vier Ansichten (Check, Plan, Bau, Betreuung). Alle Farben über
   Tokens und color-mix — die Bilder sind SVG und müssen in beiden Fassungen
   stimmen; ein #hex hier bräche die dunkle, und man sähe es erst beim
   Umschalten.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Die Leiter: wo dieser Schritt in der langen Kette steht ─────────────
   Waagerecht auf Desktop mit Verbindungslinie, senkrecht auf Mobil — dasselbe
   Muster wie .ablauf, damit die Seite nicht zwei Sprachen für „Reihenfolge"
   spricht. Spätere Stationen sind gedämpft: Sie sind möglich, nicht gebucht. */
.roadmap { background: var(--band); border-bottom: 1px solid var(--line); padding: 1.9rem 0 2rem; }
.rm-kette { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 58rem) { .rm-kette { grid-template-columns: 1fr; gap: .75rem; } }
.rm-station { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; position: relative; }
/* Die Linie verbindet die Marken, nicht die Kästen. */
@media (min-width: 58.0625rem) {
  .rm-station:not(:last-child)::after {
    content: ""; position: absolute; left: 1.1rem; right: -1.5rem; top: .46rem;
    height: 2px; background: var(--line); z-index: 0;
  }
}
.rm-marke {
  width: .85rem; height: .85rem; border-radius: 999px; margin-top: .1rem;
  background: var(--card); border: 2px solid var(--line); position: relative; z-index: 1;
}
.rm-erledigt .rm-marke { background: var(--accent); border-color: var(--accent); }
.rm-jetzt .rm-marke { background: var(--ochre); border-color: var(--ochre); box-shadow: 0 0 0 4px var(--ochre-tint); }
.rm-inhalt { display: grid; gap: .35rem; min-width: 0; padding-top: .05rem; }
.rm-name { font-weight: 700; font-size: 1.02rem; color: var(--ink-nav); display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.rm-hier { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ochre-text); background: var(--ochre-tint); border-radius: 999px; padding: .1rem .45rem; }
.rm-satz { font-size: .86rem; color: color-mix(in srgb, var(--muted) 55%, var(--ink)); line-height: 1.55; }
.rm-spaeter .rm-name { color: var(--muted); }
.rm-spaeter .rm-satz { color: var(--muted); }

/* ── Die Bühne: Haus, Lageplan, vier Zahlen ───────────────────────────── */
.hero-objekt { padding-bottom: 2rem; }

.buehne { padding-top: 1rem; padding-bottom: 3.5rem; }
.buehne-bilder { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; }
@media (max-width: 62rem) { .buehne-bilder { grid-template-columns: 1fr; } }

.buehne-haus, .buehne-plan {
  margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.25rem 1rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.buehne-haus svg { width: 100%; height: clamp(15rem, 30vw, 23rem); display: block; }
.buehne-plan svg { width: 100%; height: clamp(13rem, 26vw, 20rem); display: block; }
.buehne-haus figcaption, .buehne-plan figcaption,
.jahresgang figcaption, .strassenbild figcaption {
  font-size: .85rem; color: var(--muted); line-height: 1.5; margin: 0;
}

/* Der Baukörper: Wände nach Himmelsrichtung abgestuft, sonst ist er flach.
   Die Südseiten sind die hellen — sie stehen im Licht und tragen die PV. */
.iso-wand { stroke: var(--line); stroke-width: .05; stroke-linejoin: round; }
.iso-wand.w-hell   { fill: color-mix(in srgb, var(--card) 94%, var(--ink)); }
.iso-wand.w-mittel { fill: color-mix(in srgb, var(--card) 86%, var(--ink)); }
.iso-wand.w-dunkel { fill: color-mix(in srgb, var(--card) 74%, var(--ink)); }

/* Dachflächen tragen die Aussage: ockerfarben, was Sonne bekommt.
   Ohne Kontur: Das Landesmodell liefert eine Dachfläche oft als zwei Dreiecke,
   und eine Kontur zöge quer über das Dach eine Linie, die es am Haus nicht
   gibt. Die Kante zur Wand entsteht ohnehin über den Farbunterschied. */
.iso-dach { stroke: none; }
.iso-dach.d-gut     { fill: color-mix(in srgb, var(--ochre) 85%, var(--card)); }
.iso-dach.d-mittel  { fill: color-mix(in srgb, var(--ochre) 42%, var(--card)); }
.iso-dach.d-schwach { fill: color-mix(in srgb, var(--ink) 14%, var(--card)); }

/* Lageplan — Norden ist oben, eine viewBox-Einheit ist ein Meter. */
.plan-flurstueck    { fill: none; stroke: var(--line); stroke-width: .35; stroke-dasharray: 1.2 1; }
.plan-grundstueck   { fill: var(--accent-tint); stroke: var(--accent); stroke-width: .45; }
.plan-gebaeude      { fill: color-mix(in srgb, var(--ink) 20%, var(--card)); stroke: none; }
.plan-gebaeude-eigen{ fill: var(--ochre); stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: .25; }
.plan-massstab line { stroke: var(--muted); stroke-width: .35; }
.plan-massstab text { fill: var(--muted); }

.buehne-zahlen {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
}
@media (max-width: 62rem) { .buehne-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.buehne-zahlen li {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.bz-wert {
  margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 700;
  color: var(--ink-nav); line-height: 1.1;
}
.bz-wert span { font-size: .9rem; font-weight: 600; color: var(--muted); margin-left: .35rem; }
.bz-label { margin: .35rem 0 .5rem; font-size: .85rem; color: var(--muted); }
.bz-herkunft { margin: 0; }

/* ── Herkunft: keine Ampel ────────────────────────────────────────────────
   Grün/Gelb/Rot würde eine Bewertung behaupten, wo nur eine Aussage über die
   Datenlage steht. „belegt" trägt die Akzentfarbe, „angenommen" den Ockerton
   — denselben, der auf der Seite schon „hier ist etwas zu beachten" heißt. */
.legende-band { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2rem; align-items: start; }
@media (max-width: 58rem) { .legende-band { grid-template-columns: 1fr; gap: 1.25rem; } }
.legende-titel { margin: 0 0 .5rem; font-size: 1.15rem; color: var(--ink-nav); }
.legende-band p { margin: 0; color: var(--muted); }
.band-schmal { padding: 2.25rem 0; }
.legende { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
/* Auf dem getönten Band reicht --muted nicht: gegen var(--band) gemessen
   liegt es bei 4,15:1 und damit unter AA. Deshalb hier eine Stufe dunkler —
   dieselbe Mischung greift in der dunklen Fassung nach hell. */
.legende li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem; align-items: start; font-size: .93rem; color: color-mix(in srgb, var(--muted) 55%, var(--ink)); }

.herkunft {
  display: inline-block; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: 999px; white-space: nowrap;
}
.herkunft-befund  { background: var(--accent-tint); color: var(--accent-strong); }
.herkunft-annahme { background: var(--ochre-tint);  color: var(--ochre-text); }
/* „angegeben" liegt zwischen den beiden und sieht auch so aus: die Kontur
   des Befunds, aber nicht seine Fläche. Eine dritte Farbe wäre eine dritte
   Bedeutung — hier ist es dieselbe Skala, eine Stufe schwächer. */
.herkunft-angabe  { background: transparent; color: var(--accent-strong); box-shadow: inset 0 0 0 1.5px var(--accent-tint); }

/* ── Kennzahlen ───────────────────────────────────────────────────────── */
.kennzahlen { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kennzahlen-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kennzahlen-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 68rem) { .kennzahlen, .kennzahlen-3, .kennzahlen-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .kennzahlen, .kennzahlen-3, .kennzahlen-4 { grid-template-columns: 1fr; } }

.kennzahl {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.kennzahl-label { margin: 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kennzahl-wert { margin: 0; font-size: 1.4rem; font-weight: 700; color: var(--ink-nav); line-height: 1.2; }
.kennzahl-einheit { font-size: .9rem; font-weight: 600; color: var(--muted); }
.kennzahl-herkunft { margin: .3rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kennzahl-quelle { font-size: .78rem; color: var(--muted); }
/* Eine fehlende Zahl bleibt sichtbar. Weglassen hieße, die Lücke zu
   verstecken — und genau davon lebt diese Seite nicht. */
.kennzahl-fehlt { border-style: dashed; background: transparent; }
.kennzahl-fehlt .kennzahl-wert { font-size: 1rem; font-weight: 600; color: var(--muted); }

/* ── Dachflächen ──────────────────────────────────────────────────────── */
.dachflaechen { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .9rem; }
.dachflaeche {
  display: grid; grid-template-columns: 12rem 1fr 14rem; gap: 1rem; align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1.15rem;
}
@media (max-width: 56rem) { .dachflaeche { grid-template-columns: 1fr; gap: .5rem; } }
.df-richtung { margin: 0; font-weight: 700; color: var(--ink-nav); }
.df-neigung { display: block; font-weight: 500; font-size: .85rem; color: var(--muted); }
.df-balken { margin: 0; height: .7rem; border-radius: 999px; background: var(--band); overflow: hidden; }
.df-fuellung { display: block; height: 100%; border-radius: 999px; }
.df-zahl { margin: 0; font-weight: 700; color: var(--ink-nav); text-align: right; }
@media (max-width: 56rem) { .df-zahl { text-align: left; } }
.df-eignung { display: block; font-size: .8rem; font-weight: 600; }
.df-gut.df-fuellung     { background: color-mix(in srgb, var(--ochre) 85%, var(--card)); }
.df-mittel.df-fuellung  { background: color-mix(in srgb, var(--ochre) 42%, var(--card)); }
.df-schwach.df-fuellung { background: color-mix(in srgb, var(--ink) 16%, var(--card)); }
.df-eignung.df-gut     { color: var(--ochre-text); }
.df-eignung.df-mittel  { color: var(--muted); }
.df-eignung.df-schwach { color: var(--muted); }

/* ── Jahresgang ───────────────────────────────────────────────────────── */
.jahresgang { margin: 2rem 0 0; }
.jahresgang figcaption { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .75rem; }
.jahresgang svg { width: 100%; height: 11rem; display: block; }
.jahresgang rect { fill: var(--accent); }
.jahresgang text { fill: var(--muted); }
/* Die Zahlenliste steht für Screenreader und für den Druck da; sichtbar ist
   sie nicht, weil sie neben der Grafik doppelt wäre. Nicht auf display:none
   umstellen — dann fällt sie auch aus der Vorlesereihenfolge. */
.jahresgang-werte {
  list-style: none; margin: 0; padding: 0;
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}

/* Breite Inhalte scrollen in ihrem eigenen Container — der Seitenkörper nie
   seitwärts (docs/design.md, Regel 3). Diese Klasse ist beim Umbau der
   Wege-Tabelle einmal aus dem CSS gefallen; die Folge war ein seitlich
   scrollender Seitenkörper auf Handybreite, verursacht von einer Tabelle, die
   ihren Container hatte. Wer sie entfernt, prüft vorher alle Verwender. */
.tabelle-scroll { overflow-x: auto; margin: 1.75rem 0 0; }

/* ── Wege: je Stufe eine Karte, aufgebaut wie ein Scope ──────────────── */
.pfade { display: grid; gap: 1.25rem; margin: 1.75rem 0 0; }
.pfad {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem 1.5rem 1.2rem;
}
.pfad-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.pfad-stufe { margin: 0; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pfad-titel { margin: .2rem 0 0; font-size: 1.25rem; color: var(--ink-nav); }
.pfad-preis { text-align: right; }
@media (max-width: 44rem) { .pfad-preis { text-align: left; } }
/* Der Rahmen ist die Aussage, der Mittelwert die Fußnote — nicht umgekehrt.
   Ein Punktwert behauptet eine Genauigkeit, die eine Standardkostenrechnung
   nicht hat. */
.pfad-rahmen { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--ink-nav); white-space: nowrap; }
.pfad-mitte { margin: .15rem 0 0; font-size: .82rem; color: var(--muted); }

.pfad-eckwerte {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
@media (max-width: 44rem) { .pfad-eckwerte { grid-template-columns: 1fr; gap: .5rem; } }
.pfad-eckwerte li { display: flex; flex-direction: column; gap: .15rem; }
.pfad-eckwerte span { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pfad-eckwerte strong { font-size: 1rem; color: var(--ink-nav); }
.pfad-delta { font-style: normal; font-weight: 700; color: var(--accent-strong); margin-left: .3rem; }

.pfad-massnahmen { width: 100%; border-collapse: collapse; margin: 1.25rem 0 0; font-size: .92rem; }
.pfad-massnahmen thead th {
  text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 0 .8rem .5rem 0; border-bottom: 1px solid var(--line);
}
.pfad-massnahmen td, .pfad-massnahmen tbody th {
  text-align: left; padding: .7rem .8rem .7rem 0; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.pfad-massnahmen tbody th { font-weight: 700; color: var(--ink-nav); }
.pfad-massnahmen tbody tr:last-child td,
.pfad-massnahmen tbody tr:last-child th { border-bottom: none; }
.pm-domain { width: 6.5rem; color: var(--accent-strong); font-weight: 600; }
.pm-gewerk { color: var(--ink); }
.pm-kg { width: 12rem; color: var(--ink); }
/* Leistungsbereich, ATV und dreistellige Kostengruppe sind der Beleg, nicht
   die Aussage — sie stehen klein unter der lesbaren Zeile. */
.pm-code { display: block; font-size: .78rem; color: var(--muted); margin-top: .15rem; }
@media (max-width: 52rem) {
  .pfad-massnahmen thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pfad-massnahmen tr { display: grid; gap: .15rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .pfad-massnahmen td, .pfad-massnahmen tbody th { border: none; padding: 0; width: auto; }
  .pm-domain { order: -1; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
}

.pfad-fuss { margin-top: 1.1rem; display: grid; gap: .5rem; }
.pfad-schritt, .pfad-begleitend { margin: 0; font-size: .9rem; color: var(--ink); }
.pfad-schritt { padding: .7rem .9rem; border-radius: 8px; background: var(--accent-tint); }
.pfad-begleitend { padding: .7rem .9rem; border-radius: 8px; background: var(--ochre-tint); }

.wege-nachsatz { margin-top: 1.75rem; max-width: var(--text); }
.wege-fussnote { font-size: .88rem; color: var(--muted); }
/* Nur für Screenreader — Tabellen brauchen eine Beschriftung, die Seite nicht. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── Straßenansicht ───────────────────────────────────────────────────── */
.strasse-platzhalter {
  background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 1.75rem 2rem; display: grid; gap: 1.25rem; max-width: 46rem;
}
.strasse-platzhalter p { margin: 0; }
.strassenbild { margin: 0; display: grid; gap: .9rem; max-width: 50rem; }
.strassenbild img { width: 100%; height: auto; border-radius: var(--radius); display: block; }

/* ── Lücken: nach Zuständigkeit, nicht als Mängelliste ────────────────── */
.luecken-gruppe { margin-top: 2.25rem; }
.lg-titel { margin: 0 0 .35rem; font-size: 1.15rem; color: var(--ink-nav); }
.lg-text { margin: 0 0 1.1rem; color: var(--muted); max-width: var(--text); }
.luecken { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 52rem) { .luecken { grid-template-columns: 1fr; } }
.luecke {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.luecke-selbst { border-left-color: var(--accent); }
.luecke-vorort { border-left-color: var(--ochre); }
.luecke-dritte { border-left-color: color-mix(in srgb, var(--muted) 60%, var(--card)); }
.luecke-was { margin: 0 0 .35rem; font-size: 1rem; color: var(--ink-nav); }
.luecke-warum { margin: 0 0 .55rem; color: var(--ink); font-size: .93rem; }
.luecke-weg { margin: 0; font-size: .88rem; color: var(--muted); font-weight: 600; }

/* ── Datengrundlage ───────────────────────────────────────────────────── */
.grundlage { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0; }
.gl-zeile {
  display: grid; grid-template-columns: 1fr 16rem; gap: 1.5rem; align-items: center;
  padding: .95rem 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 52rem) { .gl-zeile { grid-template-columns: 1fr; gap: .4rem; } }
.gl-zeile:first-child { border-top: 1px solid var(--line); }
.gl-bereich { margin: 0; font-weight: 700; color: var(--ink-nav); }
.gl-liefert { margin: .15rem 0 0; font-size: .9rem; color: color-mix(in srgb, var(--muted) 55%, var(--ink)); }
.gl-zustand { margin: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: .9rem; font-weight: 600; color: var(--ink); }
.gl-hinweis { font-weight: 400; color: var(--muted); font-size: .85rem; }
.gl-punkt { width: .55rem; height: .55rem; border-radius: 999px; background: var(--line); flex: none; }
.gl-geliefert .gl-punkt { background: var(--accent); }
.gl-teilweise .gl-punkt { background: var(--ochre); }
.gl-beim-Termin .gl-punkt,
.gl-gesperrt .gl-punkt,
.gl-ohne-Eintrag .gl-punkt { background: color-mix(in srgb, var(--muted) 55%, var(--card)); }

/* ── Der Ablauf: die Touchpoints der Journey ──────────────────────────────
   Senkrechte Kette mit durchlaufender Linie. Bewusst KEINE waagerechte
   Fortschrittsleiste: Die Schritte tragen Text, und waagerecht wird der auf
   Handybreite unlesbar. Die Linie zeigt Reihenfolge, die Marke den Zustand. */
.ablauf-hinweis {
  margin: 0 0 1.5rem; max-width: var(--text); padding: .85rem 1.1rem;
  border-radius: 8px; background: var(--ochre-tint); color: var(--ink);
  border-left: 3px solid var(--ochre); font-size: .93rem;
}
.ablauf-stand { margin: 0 0 1.75rem; max-width: 34rem; display: grid; gap: .5rem; }
.as-zahl { margin: 0; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.as-balken { margin: 0; height: .5rem; border-radius: 999px; background: var(--band); overflow: hidden; }
.as-balken span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.as-naechster { margin: 0; color: var(--ink); }

.ablauf-kette { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ak-schritt { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; position: relative; padding-bottom: 1.6rem; }
.ak-schritt:last-child { padding-bottom: 0; }
/* Die Linie verbindet die Marken, nicht die Kästen — sie endet deshalb am
   letzten Schritt und nicht im Leeren darunter. */
.ak-schritt:not(:last-child)::before {
  content: ""; position: absolute; left: 1.05rem; top: 1.6rem; bottom: -.2rem;
  width: 2px; background: var(--line);
}
.ak-marke {
  width: 1.15rem; height: 1.15rem; border-radius: 999px; margin-top: .25rem;
  margin-left: .5rem; background: var(--card); border: 2px solid var(--line); flex: none;
}
.ak-erledigt .ak-marke { background: var(--accent); border-color: var(--accent); }
.ak-laeuft .ak-marke   { background: var(--ochre); border-color: var(--ochre); }
.ak-inhalt { min-width: 0; }
.ak-kopf { margin: 0 0 .2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
/* Wer am Zug ist, ist die wichtigste Angabe der Zeile — sie bekommt die
   Akzentfarbe, alles andere bleibt Beiwerk. */
.ak-rolle { font-weight: 700; color: var(--accent-strong); }
.ak-rolle-kunde .ak-rolle { color: var(--ochre-text); }
.ak-typ, .ak-kanal { color: var(--muted); }
.ak-typ::before, .ak-kanal::before { content: "· "; }
.ak-zustand { color: var(--accent-strong); font-weight: 700; }
.ak-zustand.ak-laeuft { color: var(--ochre-text); }
.ak-titel { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--ink-nav); }
.ak-text { margin: 0; color: var(--ink); font-size: .95rem; max-width: 46rem; }
.ak-faellig { margin: .35rem 0 0; font-size: .85rem; color: var(--muted); }
/* Erledigtes tritt zurück, ohne zu verschwinden — man muss sehen können, was
   schon lief, sonst fehlt der Beleg für den Fortschritt darüber. */
.ak-erledigt .ak-titel, .ak-erledigt .ak-text { color: var(--muted); }
.ablauf-fuss { margin: 1.75rem 0 0; font-size: .9rem; color: var(--muted); max-width: var(--text); }

/* ── So geht es weiter ────────────────────────────────────────────────── */
.schritt {
  display: flex; gap: 2rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.75rem 2rem;
}
.schritt h2 { margin: 0 0 .5rem; font-size: 1.4rem; }
.schritt .prose { max-width: 44rem; }
.schritt p { margin: 0; }

/* ── Die Reifeschwelle ────────────────────────────────────────────────────
   Drei Zustände, nicht zwei: erfüllt, fehlt noch, noch nicht festgelegt. Die
   dritte Sorte ist keine Aufgabe an den Besucher — sie bekommt deshalb die
   gedämpfte Marke, nicht die warnende. */
.schwelle-liste { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0; }
.sw-punkt {
  display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: start;
  padding: .95rem 0; border-bottom: 1px solid var(--line);
}
.sw-punkt:first-child { border-top: 1px solid var(--line); }
.sw-marke { width: .7rem; height: .7rem; border-radius: 999px; margin-top: .35rem; background: var(--line); }
.sw-erfuellt .sw-marke  { background: var(--accent); }
.sw-blockiert .sw-marke { background: var(--ochre); }
.sw-name { margin: 0; font-weight: 700; color: var(--ink-nav); }
.sw-text { margin: .15rem 0 0; font-size: .9rem; color: color-mix(in srgb, var(--muted) 55%, var(--ink)); }
.sw-zustand { font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sw-erfuellt .sw-zustand  { color: var(--accent-strong); }
.sw-blockiert .sw-zustand { color: var(--ochre-text); }

/* ── Navigator (nur Entwicklung) ─────────────────────────────────────────── */
.navigator { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 42rem; }
.navigator th, .navigator td { text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.navigator thead th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.navigator tbody th { font-weight: 600; }
.navigator tbody th a { color: var(--accent-strong); text-decoration: none; border-bottom: 1px solid var(--line); }
.navigator tbody th a:hover, .navigator tbody th a:focus-visible { border-color: var(--accent-strong); }
.nv-hier { background: var(--band); }
.nv-marke { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ochre-text); }

/* ── Sprungguide: seitliches Blättern durch die Abschnitte ────────────────
   Eine gewöhnliche Ankerliste, fest am rechten Rand. Sichtbar erst, wenn
   daneben Platz ist — auf schmalen Fenstern würde sie über dem Inhalt liegen,
   und ein Sprungziel, das den Text verdeckt, ist keins.
   Die Wörter erscheinen, sobald man sich der Leiste nähert oder mit der
   Tastatur hineingeht; der aktuelle Abschnitt zeigt seines dauerhaft. */
.guide { display: none; }

@media (min-width: 82rem) {
  .guide {
    display: block; position: fixed; right: 1.75rem; top: 50%;
    transform: translateY(-50%); z-index: 40;
  }
  .guide ol {
    list-style: none; margin: 0; padding: 0;
    /* Weiter auseinander als die urspruenglichen .5rem: Die Woerter sind
       Pillen mit eigenem Rand, und bei engem Abstand beruehren sie sich
       fast — dann liest die Leiste sich als ein Block statt als Liste,
       und man trifft mit der Maus den falschen Punkt. */
    display: grid; gap: .85rem; justify-items: end;
  }
  .guide a {
    /* Der Punkt ist das einzige Element im Fluss. Die Beschriftung liegt
       absolut daneben — sonst schiebt ihre Breite den Punkt, obwohl sie
       unsichtbar ist, und aus der Spalte wird eine Treppe. Bei den kurzen
       Titeln der Objektansicht fiel das kaum auf; mit Artikelueberschriften
       standen die sechs Punkte ueber 300 px verteilt (29.08.2026). */
    position: relative;
    display: flex; align-items: center; justify-content: flex-end;
    text-decoration: none; padding: .25rem 0;
  }
  .guide-punkt {
    width: .5rem; height: .5rem; border-radius: 999px; flex: none;
    background: color-mix(in srgb, var(--muted) 45%, transparent);
    transition: background .15s ease, transform .15s ease;
  }
  .guide a:hover .guide-punkt,
  .guide a:focus-visible .guide-punkt { background: var(--accent-strong); }
  .guide a[aria-current="true"] .guide-punkt {
    background: var(--ochre); transform: scale(1.5);
  }
  .guide-wort {
    font-size: .78rem; font-weight: 600; color: var(--ink-nav);
    background: var(--card); border: 1px solid var(--line);
    border-radius: 999px; padding: .2rem .7rem; white-space: nowrap;
    position: absolute; right: calc(100% + .6rem); top: 50%;
    opacity: 0; transform: translateY(-50%) translateX(.4rem);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
  }
  .guide:hover .guide-wort,
  .guide a:focus-visible .guide-wort,
  .guide a[aria-current="true"] .guide-wort {
    opacity: 1; transform: translateY(-50%) translateX(0);
  }
  .guide a[aria-current="true"] .guide-wort { border-color: var(--ochre); color: var(--ochre-text); }

  /* ── Wo die Maus steht ──────────────────────────────────────────────
     Vorher zeigte `.guide:hover .guide-wort` ALLE Woerter gleichzeitig und
     kein einziges anders: Man sah die ganze Liste und wusste trotzdem
     nicht, auf welchem Eintrag man stand. Der Punkt faerbte sich zwar um,
     ist aber 8 px gross und sitzt am Rand des Blicks.

     Zwei Farben mit zwei Bedeutungen, und sie duerfen sich nicht
     vermischen: **Ocker sagt „hier stehst du"** (aria-current, folgt dem
     Scrollen), **Salbei sagt „hier wuerdest du hinspringen"** (Maus und
     Tastatur). Deshalb steht diese Regel NACH der aria-current-Regel — bei
     gleicher Spezifitaet gewinnt die spaetere, und wer den aktuellen
     Eintrag anfaehrt, soll die Rueckmeldung der Maus sehen. */
  .guide a:hover .guide-wort,
  .guide a:focus-visible .guide-wort {
    border-color: var(--accent-strong);
    color: var(--accent-strong);
    background: var(--accent-tint);
    transform: translateY(-50%) translateX(-.15rem);
  }
  .guide a:hover .guide-punkt,
  .guide a:focus-visible .guide-punkt { transform: scale(1.35); }

  /* Ein sichtbarer Fokusring, sonst ist die Leiste mit der Tastatur
     unbedienbar — die Pille allein reicht als Zustand nicht. */
  .guide a:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
    border-radius: 999px;
  }

  @media (prefers-reduced-motion: reduce) {
    .guide-punkt, .guide-wort { transition: none; }
    .guide a:hover .guide-punkt,
    .guide a:focus-visible .guide-punkt { transform: none; }
  }
}

/* Anker landen sonst unter der klebenden Kopfzeile. Gilt fuer JEDE Seite mit
   Sprungzielen — bis zum 29.08.2026 stand hier `.tpl-objekt`, und die Bänder
   des Fachartikels waeren damit unter den Kopf gesprungen. */
section[id] { scroll-margin-top: 5.5rem; }
/* Der Seitenkopf springt ganz nach oben — dort steht nichts darüber, was
   verdeckt werden könnte. */
.tpl-objekt #oben { scroll-margin-top: 0; }

/* ── Ihr Vorhaben ─────────────────────────────────────────────────────────
   Die Leitfrage ist die wichtigste Zeile der Seite — sie bekommt Größe, nicht
   Farbe. Farbe hätte sie zu einem Hinweis gemacht; sie ist aber die Ansage,
   worauf alles Folgende gelesen werden will. */
.vh-leitfrage {
  margin: 0 0 1.25rem; max-width: 46rem;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 700; line-height: 1.4;
  color: var(--ink-nav);
}
.vh-titel { margin: 2rem 0 .3rem; font-size: 1.05rem; color: var(--ink-nav); }
.vh-hinweis { margin: 0 0 1.1rem; color: color-mix(in srgb, var(--muted) 55%, var(--ink)); max-width: var(--text); }
.vh-angaben { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.vh-angabe {
  display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: start;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.vh-angabe:first-child { border-top: 1px solid var(--line); }
.vh-marke { width: .65rem; height: .65rem; border-radius: 999px; margin-top: .35rem; background: var(--ochre); }
.vh-da .vh-marke { background: var(--accent); }
.vh-label { margin: 0; font-weight: 700; color: var(--ink-nav); }
.vh-warum { margin: .15rem 0 0; font-size: .9rem; color: color-mix(in srgb, var(--muted) 55%, var(--ink)); max-width: 44rem; }
.vh-zustand { font-size: .82rem; font-weight: 600; color: var(--ochre-text); white-space: nowrap; }
.vh-da .vh-zustand { color: var(--accent-strong); }
.vh-fuss { margin: 1.1rem 0 0; font-size: .9rem; color: var(--muted); max-width: var(--text); }

/* ── Wohnungseigentum ─────────────────────────────────────────────────────
   Der Miteigentumsanteil bekommt eine eigene Zeile: Er regelt Stimmgewicht
   und Kostenanteil zugleich und ist damit die Zahl, an der in der
   Gemeinschaft alles hängt. */
.vh-weg {
  margin: 0 0 1.25rem; max-width: 46rem; padding: .85rem 1.1rem;
  border-radius: 8px; background: var(--accent-tint); color: var(--ink);
  border-left: 3px solid var(--accent); font-size: .95rem; line-height: 1.6;
}
/* Der Anteil steht unter dem Gesamtbetrag, nicht daneben — sonst liest man
   ihn als Rabatt statt als Aufteilung. */
.pfad-anteil { margin: .5rem 0 0; font-size: .9rem; color: var(--ink); }
.pfad-anteil strong { color: var(--ink-nav); }
.pfad-anteil span { display: block; font-size: .78rem; color: var(--muted); }
.pm-eigentum { width: 10rem; color: var(--ink); }
.pm-gemeinschaft { color: var(--ochre-text); font-weight: 600; }
.pm-gemischt { color: var(--muted); }

/* ── Bedarfsplan im Blatt ─────────────────────────────────────────────────
   Ein <details>, damit es ohne JavaScript auf- und zuklappt. Offen, solange
   nichts ausgefüllt ist — geschlossen, sobald Angaben vorliegen: Dann ist die
   Auswertung darüber die Hauptsache und das Formular nur noch der Weg, sie zu
   ändern. */
.fragebogen { margin: 2rem 0 0; }
.fragebogen details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.fragebogen summary {
  cursor: pointer; padding: 1.1rem 1.35rem; display: grid; gap: .2rem;
  list-style: none;
}
.fragebogen summary::-webkit-details-marker { display: none; }
.fragebogen summary::after {
  content: "+"; position: absolute; right: 1.5rem;
  font-size: 1.4rem; font-weight: 400; color: var(--muted); line-height: 1;
}
.fragebogen details[open] summary::after { content: "−"; }
.fragebogen summary { position: relative; padding-right: 3rem; }
.fragebogen summary:hover { background: var(--band); }
.fb-titel { font-weight: 700; color: var(--ink-nav); }
.fb-hinweis { font-size: .88rem; color: var(--muted); }

.fb-form { padding: 0 1.35rem 1.5rem; display: grid; gap: 1.75rem; }
.fb-gruppe { border: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.fb-gruppe > legend {
  padding: 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: .25rem;
}
.fb-frage { display: grid; gap: .3rem; max-width: 40rem; }
.fb-label { font-weight: 600; color: var(--ink-nav); padding: 0; }
.fb-hilfe { margin: 0 0 .3rem; font-size: .88rem; color: color-mix(in srgb, var(--muted) 55%, var(--ink)); line-height: 1.5; }
.fb-optionen { border: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.fb-optionen label { display: flex; align-items: baseline; gap: .6rem; cursor: pointer; }
.fb-optionen input { margin: 0; accent-color: var(--accent-fill); flex: none; }
/* Die Einheit steht IM Feld, nicht daneben — sonst tippt jemand „€" mit. */
.fb-eingabe { display: flex; align-items: stretch; max-width: 18rem; }
.fb-eingabe input {
  flex: 1; min-width: 0; padding: .55rem .7rem; font: inherit;
  border: 1px solid var(--line); border-right: none;
  border-radius: 8px 0 0 8px; background: var(--bg); color: var(--ink);
}
.fb-eingabe input:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.fb-einheit {
  display: flex; align-items: center; padding: 0 .7rem; font-size: .88rem;
  color: var(--muted); background: var(--band);
  border: 1px solid var(--line); border-radius: 0 8px 8px 0;
}
.fb-fuss { display: grid; gap: .6rem; justify-items: start; padding-top: .5rem; border-top: 1px solid var(--line); }
.fb-fuss-text { margin: 0; font-size: .88rem; color: var(--muted); max-width: 34rem; }

/* ── PreCheck: Angaben und Ergebnis ───────────────────────────────────────
   Zwei Raster, ein Muster. Die Felder liegen in einem auto-fit-Raster, damit
   auf dem Handy eine Spalte steht und auf dem Schirm drei — ohne
   Breakpoints, die man einzeln pflegen muesste. */
.angaben-felder {
  display: grid; gap: 1rem 1.25rem; margin: 1.5rem 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.feld-hilfe { display: block; font-size: .85rem; color: var(--muted); margin-top: .3rem; line-height: 1.45; }
.feld-schalter { margin: 1.25rem 0; }
.feld-schalter label { display: flex; gap: .6rem; align-items: baseline; font-weight: 600; }
.feld-schalter input { flex: none; }

.angaben-freiwillig {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.4rem; margin: 1.75rem 0;
}
.angaben-freiwillig legend { font-weight: 600; padding: 0 .5rem; }

/* Die Herkunft steht AN der Zahl, nicht in einer Legende am Seitenfuss —
   dieselbe Regel wie in der Objektansicht. Wer sie ausblendet, macht aus
   einer Schaetzung einen Befund. */
.kennzahlen {
  display: grid; gap: 1px; margin: 1.75rem 0;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.kennzahl { background: var(--card); padding: 1.1rem 1.25rem; }
.kennzahl dt { font-size: .85rem; color: var(--muted); margin-bottom: .35rem; }
.kennzahl dd { margin: 0; }
.kennzahl dd strong { display: block; font-size: 1.35rem; line-height: 1.25; }
.kennzahl-herkunft { display: block; font-size: .8rem; color: var(--muted); margin-top: .35rem; line-height: 1.45; }

/* Die BEDEUTUNG, nicht die Herkunft. „Kesselguete 85 %" mit „12,0 min
   mittlere Brennerlaufzeit" darunter sagt, woher die Zahl kommt — aber nicht,
   was sie heisst. Deshalb eine dritte Zeile, abgesetzt statt nur kleiner:
   Sonst liest sie sich als Fortsetzung der Herkunft. */
.kennzahl-bedeutung {
  display: block; font-size: .85rem; line-height: 1.55; margin-top: .6rem;
  padding-top: .6rem; border-top: 1px solid var(--line);
}

/* ── Die Rechenspur ─────────────────────────────────────────────────────
   Zugeklappt, aber im HTML. Ein `<details>` rendert seinen Inhalt; wer ihn
   per JavaScript nachlaedt, verliert genau den Teil, wegen dem es ihn gibt
   (docs/geo.md: zitierfaehig und ohne JavaScript lesbar). */
.rechenspur {
  margin: 2.5rem 0; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.4rem; background: var(--card);
}
.rechenspur > summary { cursor: pointer; line-height: 1.5; }
.rechenspur[open] > summary { margin-bottom: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.spur-schritt { margin: 1.75rem 0; }
.spur-schritt + .spur-schritt { padding-top: 1.75rem; border-top: 1px solid var(--line); }
.spur-schritt h4 { margin: 0 0 .5rem; font-size: 1.05rem; display: flex; align-items: baseline; gap: .6rem; }
.spur-nr {
  flex: none; font-size: .78rem; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .1rem .55rem;
}
.spur-formel { margin: 0 0 .8rem; }
.spur-formel code { font-size: .9rem; line-height: 1.6; color: var(--muted); }
.spur-ergebnis { margin: .8rem 0 0; line-height: 1.5; }
.spur-bedeutung { margin: .6rem 0 0; font-size: .9rem; line-height: 1.6; color: var(--muted); }

.luecken { margin: 1rem 0 1.75rem; padding-left: 1.1rem; }
.luecken li { margin-bottom: .6rem; line-height: 1.55; color: var(--muted); }


/* ══ Druck — die PDF-Vorlage ════════════════════════════════════════════
   Das Objektbild ist die Vorlage, nicht ein zweites Dokument daneben.

   ── Warum kein eigener Generator ─────────────────────────────────────
   Ein PDF-Bauer neben der Seite bedeutet zwei Stellen, an denen dieselbe
   Zahl steht, und damit den Tag, an dem sie auseinanderlaufen. Die Seite
   fuehrt die Herkunft an jeder Zahl mit; ein nachgebautes Layout muesste
   das nachbilden und wuerde es beim ersten neuen Feld vergessen.

   Gedruckt wird deshalb, was auf dem Schirm steht — abzueglich dessen,
   was auf Papier keine Funktion hat (Navigation, Sprungmarken, Knoepfe,
   Formulare) und zuzueglich dessen, was auf dem Schirm keine hat
   (Adresse und Datenstand auf jeder Seite).

   ── Was der Druck NICHT tun darf ─────────────────────────────────────
   Herkunftsmarken ausblenden, um Platz zu sparen. Ohne „belegt" oder
   „angenommen" neben der Zahl wird aus einer Schaetzung ein Befund —
   und aus einem Objektbild eine Zusage. Sie bleiben stehen, auch wenn
   sie eine Zeile kosten.
   ═════════════════════════════════════════════════════════════════════ */

@media print {

  /* Erste Seite hochkant A4. Der untere Rand ist groesser als der obere,
     damit die eingeblendete Fusszeile Platz hat, ohne in den Text zu
     laufen. */
  @page {
    size: A4 portrait;
    margin: 16mm 14mm 18mm;
  }

  /* Papier ist immer hell. Ohne diesen Block druckt die dunkle Fassung
     graue Kaesten und hellgraue Schrift — auf dem Schirm richtig, auf
     Papier unleserlich und teuer. */
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    --ink: #1d1d1d;  --ink-nav: #1d1d1d;  --muted: #4a4a4a;
    --line: #c9d2ce; --bg: #fff;          --band: #fff;
    --card: #fff;    --sage-tint: #eef4f2; --ochre-tint: #fdf5ea;
    --accent-tint: #eef4f2;
    --accent-mix: #000;
    --shadow: none;

    /* Zwei Farben nur fuer Papier. Die Herkunftsmarken muessen auf einem
       Graustufendrucker unterscheidbar bleiben — deshalb bekommt jede eine
       eigene Randfarbe UND eine eigene Randart (voll gegen gestrichelt).
       Die Farbe allein traegt die Aussage nicht. */
    --druck-befund:  #587e74;
    --druck-annahme: #a07a30;
  }

  html, body {
    background: #fff;
    font-size: 9.6pt;
    line-height: 1.45;
  }

  /* Flaechenfarben muessen mit: Die Eignungsbalken am Dach und die
     Herkunftsmarken sind Traeger einer Aussage, nicht Dekoration. Ohne
     das hier sparen die Browser sie beim Drucken weg. */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none !important;
  }

  /* ── Was auf Papier keine Funktion hat ──────────────────────────────
     Sprungmarken ohne Ziel, Knoepfe ohne Klick, ein Formular ohne
     Eingabefeld. Der Fragebogen faellt ganz weg: Er ist die Stelle, an
     der die Seite etwas VOM Leser will — auf Papier kann er nicht
     antworten, und ausgedruckt sind es sechs leere Seiten. */
  .site-header, .site-footer, .brotkrumen, .skip, .scroll-progress,
  .theme-toggle, .guide, .navigator, .header-cta, .hero-actions,
  .fragebogen, .schritt, .blaettern, .ablauf-fuss,
  .btn, .objekt-drucken, .tabelle-scroll::after {
    display: none !important;
  }

  /* Der Ablauf bleibt — er beantwortet die haeufigste Frage beim Termin
     („und wie geht es weiter?") ohne dass jemand sie stellen muss. */

  main, .band, .wrap {
    max-width: none;
    padding-inline: 0;
    margin: 0;
  }

  .band { padding: 0 0 8mm; break-inside: auto; }
  .band-tint { background: #fff; }

  /* ── Der Kopf: einmal gross, dann klein auf jeder Seite ─────────────
     Position und Datenstand gehoeren auf jedes Blatt. Ein einzelnes
     herausgerissenes Blatt ohne Adresse ist beim Termin wertlos und im
     Zweifel gefaehrlich — Zahlen ohne Objekt lassen sich verwechseln. */
  .hero { padding: 0 0 6mm; }
  .hero-title { font-size: 20pt; margin-bottom: 3mm; }
  .hero-entity { font-size: 11pt; }
  .hero-answer, .hero-body p { font-size: 9.6pt; }
  .hero-updated { margin-top: 4mm; }

  /* Eine echte Kopfzeile auf JEDEM Blatt kann CSS im Browser nicht —
     `position: running()` setzt kein Browser um, und `@page` kennt keinen
     Inhalt. Was geht, ist der Kopf einmal oben und der Datenstand in jeder
     Zwischenueberschrift. Wer Adresse und Stand auf jedem Blatt braucht,
     setzt sie beim Speichern in die Kopf-/Fusszeile des Druckdialogs —
     ein Satz dazu steht in `docs/objektbild.md`. */
  .druck-kopf {
    display: flex;
    justify-content: space-between;
    gap: 6mm;
    font-size: 8pt;
    color: var(--muted);
    border-bottom: .4pt solid var(--druck-befund);
    padding-bottom: 1.5mm;
    margin-bottom: 5mm;
  }
  .druck-kopf strong { font-weight: 600; color: var(--ink); }

  /* ── Zusammenhalten, was zusammengehoert ────────────────────────────
     Eine Kennzahl, deren Herkunftsmarke auf der naechsten Seite steht,
     ist eine Zahl ohne Herkunft — genau das, was diese Seite nicht sein
     will. Deshalb steht `break-inside: avoid` an jedem Element, das
     Wert und Beleg gemeinsam traegt. */
  .kennzahl, .luecke, .gl-zeile, .dachflaeche, .ak-schritt,
  .rm-station, .buehne-zahlen li, .lg-eintrag, .vh-angabe,
  .dg-tabelle tr, .dach-grundstueck {
    break-inside: avoid;
  }

  .dach-grundstueck { border-left-color: var(--druck-befund); padding-left: 4mm; }
  .dg-tabelle th, .dg-tabelle td { border-bottom: .3pt solid var(--line); }

  .band-title, .fb-titel, .luecken-gruppe > h3, .legende-titel {
    break-after: avoid;
  }

  /* Neue Seite vor den grossen Abschnitten — sonst faengt „Ihr Dach und
     die Sonne" mit zwei Zeilen am Blattende an. */
  #dach, #luecken, #ablauf { break-before: page; }

  /* ── Bild und Lageplan ──────────────────────────────────────────────
     Nebeneinander wie am Schirm, aber gedeckelt: Ohne feste Hoehe zieht
     das SVG im Druck auf die volle Blatthoehe und schiebt die vier
     Kennzahlen auf Seite zwei. */
  .buehne { padding: 0 0 6mm; }
  .buehne-bilder { gap: 6mm; }
  .buehne-haus svg { height: 62mm; }
  .buehne-plan svg { height: 62mm; }
  .buehne-haus, .buehne-plan { border: .3pt solid var(--line); break-inside: avoid; }

  .buehne-zahlen { break-inside: avoid; }

  /* ── Die Zahlenraster ───────────────────────────────────────────────
     Vier Spalten sind auf 182 mm Satzspiegel zu eng; drei tragen die
     langen Herkunftszeilen ohne Silbentrennung mitten im Wort. */
  .kennzahlen, .kennzahlen-3, .kennzahlen-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0;
    border: .3pt solid var(--line);
    /* Am Schirm traegt der Rasterhintergrund die 1px-Fugen zwischen den
       Karten. Im Druck sind die Fugen weg — uebrig bliebe ein grauer Block
       dort, wo die letzte Zeile nicht voll wird. */
    background: #fff;
  }
  .kennzahl {
    padding: 2.5mm 3mm;
    border-right: .3pt solid var(--line);
    border-bottom: .3pt solid var(--line);
  }
  .kennzahl-wert { font-size: 12pt; }
  .kennzahl-herkunft, .kennzahl-quelle { font-size: 7.6pt; }

  /* Die Herkunftsmarke bleibt sichtbar und bleibt unterscheidbar — in
     Graustufen ueber die Randstaerke, nicht nur ueber die Farbe. */
  .herkunft { font-size: 7pt; letter-spacing: .06em; }
  /* Drei Stricharten, nicht drei Farben: Auf einem Graustufendrucker ist
     das der einzige Unterschied, der ueberlebt. Voll — gepunktet —
     gestrichelt, in derselben Reihenfolge wie die Stufen. Die Farbe kommt
     dazu, sie traegt es nicht allein.

     `box-shadow` faellt im Druckteil global weg, deshalb bekommt „angegeben"
     hier einen echten Rahmen. Ohne diese Zeile stand das Etikett als
     einziges ohne Kontur da — und las sich damit schwaecher als
     „angenommen", also genau falsch herum. */
  .herkunft-befund  { border: .5pt solid var(--druck-befund); }
  .herkunft-angabe  { border: .5pt dotted var(--druck-befund); }
  .herkunft-annahme { border: .5pt dashed var(--druck-annahme); }

  /* ── Der Vor-Ort-Teil wird zur Liste zum Abhaken ────────────────────
     Der Abschnitt „Was wir beim Termin vor Ort klaeren" ist am Schirm
     eine Ankuendigung. Auf Papier, in der Hand des Technikers, ist er
     die Aufgabenliste — und eine Aufgabenliste ohne Kaestchen wird
     nicht abgehakt, sondern ueberflogen. */
  .luecke-vorort .luecke-was::before {
    content: "";
    display: inline-block;
    width: 3.6mm; height: 3.6mm;
    margin-right: 2.5mm;
    vertical-align: -.4mm;
    border: .6pt solid var(--ink);
  }

  .luecke { padding-bottom: 2mm; }
  .luecke-weg { font-size: 8.2pt; }

  /* ── Datengrundlage ─────────────────────────────────────────────────
     Die Fehlanzeigen sind der Teil, den man beim Termin braucht: „kein
     Bebauungsplan hinterlegt" ist die Frage an die Gemeinde. */
  .gl-zeile { padding: 1.5mm 0; border-bottom: .3pt solid var(--line); }

  .jahresgang { break-inside: avoid; }

  /* Links tragen im Druck ihr Ziel, sonst zeigt der Ausdruck ein
     unterstrichenes Wort ohne Adresse. Interne Sprungmarken nicht —
     „#dach" hinter einem Wort ist Rauschen. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 7.5pt;
    color: var(--muted);
    word-break: break-all;
  }

  /* Waisen und Witwen kosten hier mehr als anderswo: Ein Blatt, das mit
     einer einzelnen Zeile beginnt, sieht nach Fehler aus. */
  p, li { orphans: 3; widows: 3; }
}

/* Der Grundstuecks-Nachsatz im Dachabschnitt — abgesetzt, nicht gleichrangig.
   Der linke Balken sagt: gehoert dazu, ist aber nicht dasselbe. */
.dach-grundstueck {
  margin: 2.5rem 0 0; padding: 1.5rem 0 .5rem 1.5rem;
  border-left: 3px solid var(--line);
}
.dg-titel { font-size: 1.1rem; margin: 0 0 .6rem; }
.dg-text { max-width: var(--text); color: var(--muted); margin: 0; }
.dg-tabelle { width: 100%; border-collapse: collapse; margin: 1.25rem 0 0; font-size: .9rem; }
.dg-tabelle caption { text-align: left; color: var(--muted); font-size: .82rem; padding-bottom: .6rem; }
.dg-tabelle th, .dg-tabelle td { text-align: left; padding: .5rem .75rem .5rem 0; border-bottom: 1px solid var(--line); }
.dg-tabelle th { font-size: .8rem; font-weight: 600; color: var(--muted); }
.dg-tabelle code { font-size: .82rem; color: var(--muted); }

/* Der Knopf zum PDF — leise, weil er neben dem Datenstand steht und nicht
   mit dem eigentlichen naechsten Schritt am Seitenende konkurrieren darf.
   Ein zweiter kraeftiger Knopf oben wuerde die Seite zweideutig machen. */
.objekt-drucken { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin: .9rem 0 0; }
.btn-leise {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  padding: .45rem 1rem; font: inherit; font-size: .88rem; cursor: pointer;
}
.btn-leise:hover, .btn-leise:focus-visible { color: var(--ink); border-color: var(--accent); }
.objekt-drucken-hilfe { font-size: .8rem; color: var(--muted); max-width: 26rem; line-height: 1.45; }

/* Nur im Druck sichtbar — am Schirm nimmt die Zeile Platz weg, ohne
   etwas zu sagen, was nicht schon in der Kopfzeile stuende. */
.nur-druck { display: none; }
@media print { .nur-druck { display: block; } }

/* Ein Vorschlag ist keine Antwort — er steht deshalb über dem leeren Feld und
   nennt seine Herkunft, statt die Zahl still hineinzuschreiben. */
.fb-vorschlag {
  margin: 0 0 .5rem; padding: .7rem .9rem; border-radius: 8px;
  background: var(--accent-tint); font-size: .9rem; line-height: 1.55; color: var(--ink);
}
.fb-vorschlag span { display: block; margin-top: .3rem; font-size: .82rem; color: color-mix(in srgb, var(--muted) 40%, var(--ink)); }

/* ── Scope: worum es geht ─────────────────────────────────────────────────
   Chips, weil es eine Menge ist und keine Reihenfolge. Was beim Termin
   dazukam, trägt seine Herkunft sichtbar — sonst ließe sich später nicht mehr
   sagen, was der Kunde wollte und was wir ergänzt haben. */
.sc-liste { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.sc-chip {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .3rem .8rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  background: var(--accent-tint); color: var(--accent-strong);
}
.sc-chip.sc-termin { background: var(--ochre-tint); color: var(--ochre-text); }
.sc-chip em { font-style: normal; font-weight: 500; font-size: .74rem; opacity: .85; }
.sc-hinweis {
  margin: 0 0 1.25rem; max-width: 46rem; padding: .85rem 1.1rem; border-radius: 8px;
  background: var(--ochre-tint); border-left: 3px solid var(--ochre);
  font-size: .93rem; line-height: 1.6; color: var(--ink);
}
/* Außerhalb des Fokus: zurückgenommen, nicht versteckt. */
.pm-ausserhalb { opacity: .45; }
.pm-ausserhalb:hover { opacity: 1; }

/* Ein alter Stand ist kein Fehler, aber eine Einschränkung — er bekommt
   deshalb den Ockerton und keine Warnfarbe. */
.hero-alt {
  margin: .6rem 0 0; max-width: 40rem; padding: .6rem .9rem; border-radius: 8px;
  background: var(--ochre-tint); border-left: 3px solid var(--ochre);
  font-size: .88rem; line-height: 1.55; color: var(--ink);
}

/* Fachartikel: Verfasser und Pruefdatum unter dem Kopf.
   Ein Artikel in der Ich-Form braucht ein Gesicht, und das Datum steht
   sichtbar (docs/geo.md). Farben ausschliesslich ueber Tokens - Regel 3. */
.byline {
  color: var(--muted);
  font-size: .95rem;
  margin: 0 0 .5rem;
}
.byline strong { color: var(--ink); font-weight: 600; }

/* Untertitel eines Fachartikels: die Perspektive, nicht das Thema. */
.untertitel {
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 0 0 .35rem;
}

/* ══ Kampagnenseite ═══════════════════════════════════════════════════
   Der Kopf einer Kampagnenseite ist das Plakatmotiv als Seite. Er sieht
   anders aus als jeder andere Seitenkopf, und das ist der Zweck: Wer vom
   Plakat kommt, muss in der ersten halben Sekunde sehen, dass er richtig
   ist — gleiche Farbe, gleiche Zeile, gleiches Bild.

   Das Orange ist aus der Hausgrafik selbst genommen — es ist die Farbe der
   PV-Module auf dem Dach. Damit traegt das Band dieselbe Farbe wie das Bild
   darin, statt eine zweite daneben zu stellen.

   Die drei Farben unten sind ABSICHTLICH nicht themenabhaengig. Ein Plakat
   hat keine dunkle Fassung; ein Motiv, das je nach Systemeinstellung anders
   aussieht, ist kein Wiedererkennungszeichen mehr. Die Tinte darauf darf
   deshalb NICHT --ink sein — die kippt im dunklen Modus ins Helle und
   stuende dann hellgrau auf Orange.

   Kontrast geprueft: #2A2018 auf #F5883C sind rund 5,5:1, also auch fuer die
   kleinere Unterzeile ausreichend. Wer das Orange spaeter aufhellt, prueft
   das nach — bei #FAB25A waere die Tinte noch dunkler moeglich, umgekehrt
   nicht. */
:root {
  --kampagne-grund: #F5883C;
  --kampagne-tinte: #2A2018;
  --kampagne-tinte-leise: #5A3414;
}

.kampagne-hero {
  background: var(--kampagne-grund);
  color: var(--kampagne-tinte);
  padding-block: clamp(2.5rem, 6vw, 5rem) 0;
  overflow: hidden;
}

.kampagne-hero-inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}
@media (min-width: 60rem) {
  .kampagne-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.kampagne-hero-text { padding-bottom: clamp(1.5rem, 4vw, 3.5rem); }

.kampagne-eyebrow {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kampagne-tinte-leise);
  margin: 0 0 1rem;
}

/* Eine Zeile, so gross wie sie auf dem Plakat waere. text-wrap: balance,
   damit „Ihr Haus kann mehr." nicht mit einem einzelnen Wort umbricht. */
.kampagne-zeile {
  font-size: clamp(2.6rem, 8.5vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.025em;
  font-weight: 800;
  margin: 0;
  color: var(--kampagne-tinte);
  text-wrap: balance;
}

.kampagne-subline {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.4;
  max-width: 26rem;
  margin: 1.1rem 0 0;
  color: var(--kampagne-tinte);
}

.kampagne-actions { margin-top: 1.8rem; }

/* Das Bild sitzt auf der Unterkante des Bands — es „steht" auf der Naht
   zum naechsten Abschnitt, statt in einem Kasten zu schweben. */
.kampagne-hero-bild {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}
.kampagne-hero-bild img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Antwort und Definitionssatz stehen UNTER dem Motiv, nicht darin. Die
   Pflicht „Antwort zuerst" ist damit erfuellt, ohne dass zwei Saetze um
   dieselbe erste Sekunde konkurrieren. */
.kampagne-antwort {
  padding-block: clamp(2rem, 5vw, 3.2rem) 0;
  max-width: var(--text);
  margin-inline: auto;
}
.kampagne-answer {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink);
}
.kampagne-answer p { margin: 0 0 .8em; }
.kampagne-answer p:last-child { margin-bottom: 0; }

.kampagne-entity {
  margin: 1.2rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
}
.kampagne-updated {
  margin: .6rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}

/* ══ Die fuenf Stellen ohne Hover ══════════════════════════════════════
   Gefunden am 19.09.2026, indem die Selektoren ALLER :hover-Regeln aus der
   CSSOM gegen jedes bedienbare Element von vierzehn Seiten geprueft wurden
   (Regel „Zwei Zustaende, zwei Farben", CLAUDE.md). Uebrig blieben genau
   fuenf Orte — nicht „die ganze Seite", wie zwei fehlerhafte Vorab-Zaehlungen
   nahelegten.

   Textlinks bekommen einen dickeren Strich statt einer neuen Farbe: Sie
   tragen bereits --accent-strong, eine zweite Farbe waere eine dritte
   Bedeutung. Logos bekommen nur Deckkraft — ein Logo, das beim Ueberfahren
   die Farbe wechselt, ist kein Logo mehr. */

.prose a:hover,
.legal a:hover,
.nap p a:hover {
  text-decoration-thickness: 2px;
  color: var(--accent-strong);
}

.brand:hover,
.partnerlogo:hover {
  opacity: .78;
}
.brand, .partnerlogo { transition: opacity .15s ease; }

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