/* ==========================================================================
   Holzbau Lepski GmbH – Design-System v2
   --------------------------------------------------------------------------
   Weiterentwicklung des ersten Entwurfs (site.css): gleiche Markenfarben
   (Styleguide markenbuero 2023), Cabin lokal, echte Fotos, ruhige Typografie.
   Neu: Tokens, Bewegung beim Scrollen, Komponenten für alle geplanten Seiten.

   Grundregeln
   - Ohne JavaScript ist alles sichtbar und bedienbar. Animationen hängen an
     html.js (setzt lepski.js) und sind bei prefers-reduced-motion aus.
   - Animiert werden nur transform, opacity und clip-path.
   - Hellgrün #6ea826 ist Flächen-/Dekofarbe (2,9:1 auf Weiß). Für Text,
     Links und Knöpfe auf hellem Grund immer --gruen-700 verwenden.
   - Gelb nie als Textfarbe auf hellem Grund (1,5:1) – nur Linien/Deko
     oder Text auf Braun/Dunkel.

   Inhalt
    0  Schrift             10 Weiche (Vorhaben-Kacheln)   20 Video (Zwei-Klick)
    1  Tokens              11 Kennzahlen                  21 Anfrageformular
    2  Basis               12 Siegelleiste                22 CTA-Band, Kontaktkarte
    3  Layout              13 Ablauf                      23 Aktionsleiste (mobil)
    4  Typografie          14 Referenzen + Filter         24 Artikel (Ratgeber)
    5  Knöpfe & Links      15 Vorher-Nachher              25 Karriere
    6  Entwurfshinweis     16 Stimme, Personen            26 Fuß
    7  Kopf & Navigation   17 FAQ                         27 Bewegung (Reveal)
    8  Hero, Seitenkopf    18 Infokarte, Listen, Merkmale 28 Reduzierte Bewegung, Druck
    9  Brotkrumen          19 Split, brauner Block

   Ergänzungen aus dem Seitenbau (bis 30.09.2026 in assets/css/teile/*.css,
   jetzt hier zusammengeführt – eine Datei für alle Seiten):
   29  Bauphasen-Galerie (/anbau-aufstockung)
   30  Download-Liste (/fuer-planer#nachweise)
   31  Zeitleiste Firmengeschichte (/ueber-uns)
   32  Breitbild (/ueber-uns)
   33  Referenzen-Archiv: Aufklapper, Galerie, wischbare Filter (/referenzen)
   34  Kachelauswahl als Links .auswahl--links (Startseite)
   35  Seitenbezogene Korrekturen (Fuß ohne Aktionsleiste, Komponenten im Fließtext)
   36  Helfer (Abstände) – bleibt als letzter Abschnitt am Dateiende
   ========================================================================== */


/* 0  Schrift – Cabin, lokal ausgeliefert (kein externer Font-Request) ------ */
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/cabin-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/cabin-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 1  Tokens -------------------------------------------------------------- */
:root {
  /* Marke (Styleguide markenbuero 2023) + abgeleitete Stufen.
     Kontrast jeweils gegen Weiß / Sand (#f3f3ed) nach WCAG 2.x. */
  --gruen: #6ea826;          /* Logofarbe: Flächen, Linien, Deko – 2,9:1, kein Text auf Hell */
  --gruen-700: #4a7a14;      /* Text, Links, Knöpfe – 5,1:1 auf Weiß, 4,6:1 auf Sand */
  --gruen-800: #3a6310;      /* Hover/aktiv – 7,1:1 */
  --gruen-100: #eaf2de;      /* zarte Fläche (Icons, Auswahl) */
  --gruen-50: #f4f8ee;       /* sehr zarte Fläche */
  --gruen-hell: #a6d46b;     /* Akzenttext auf Braun/Dunkel – 7,2:1 auf Braun */
  --gelb: #ffcc00;           /* Logofarbe: Linien, Marker; Text nur auf Dunkel (8,1:1 auf Braun) */
  --gelb-100: #fff6d6;
  --gelb-50: #fffbeb;        /* Platzhalter-Fläche */
  --gelb-rand: #c79a00;      /* gestrichelter Rahmen der Platzhalter */
  --braun: #4f2c1d;          /* Logofarbe: Überschriften, dunkle Flächen – 12,3:1 */
  --braun-900: #2e1a11;      /* tiefster Grund: Fuß, Verläufe */
  --braun-700: #6b4535;
  --sand: #f3f3ed;           /* Hellgrau aus dem Styleguide: Abschnittsflächen */
  --sand-2: #ebe9df;         /* Karten auf Sand, Hover */
  --papier: #fbfaf6;         /* warmes Fast-Weiß (Mobilmenü, ruhige Flächen) */
  --weiss: #ffffff;
  --text: #3f363b;           /* Graubraun aus dem Styleguide: Fließtext – 11,7:1 */
  --text-2: #6b6166;         /* gedimmter Text – 6,0:1 auf Weiß, 5,4:1 auf Sand */
  --linie: #e6e4da;
  --linie-2: #d6d3c6;
  --fehler: #b3261e;         /* Formularfehler – 6,5:1 */
  --platzhalter: #6b4f00;    /* Text auf --gelb-100 – 7:1 */

  /* Auf dunklem Grund (Braun, Hero, Fuß) */
  --auf-dunkel: rgba(255, 255, 255, .92);
  --auf-dunkel-2: rgba(255, 255, 255, .74);
  --linie-dunkel: rgba(255, 255, 255, .16);

  /* Schrift */
  --schrift: 'Cabin', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-mini: .8125rem;                                      /* 13  Eyebrow, Labels */
  --fs-klein: .9375rem;                                     /* 15  Nebentext */
  --fs-text: 1.0625rem;                                     /* 17  Fließtext */
  --fs-lede: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);   /* 18–21 Einleitung */
  --fs-h4: 1.125rem;                                        /* 18 */
  --fs-h3: clamp(1.1875rem, 1.1rem + .45vw, 1.4375rem);     /* 19–23 */
  --fs-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.875rem);       /* 28–46 */
  --fs-h1: clamp(2.125rem, 1.55rem + 2.7vw, 3.75rem);       /* 34–60 */
  --fs-hero: clamp(2.375rem, 1.5rem + 4.1vw, 5rem);         /* 38–80 */
  --fs-zahl: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);           /* 40–64 Kennzahlen */
  --lh-text: 1.65;
  --lh-titel: 1.12;
  --sperrung: .14em;                                        /* Versalien-Labels */

  /* Abstände */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --abschnitt: clamp(4rem, 2.5rem + 6vw, 8rem);             /* 64–128 Abschnittsabstand */
  --abschnitt-eng: clamp(3rem, 2rem + 4vw, 5rem);
  --luecke: clamp(1rem, .6rem + 1.6vw, 2rem);               /* Rasterabstand */
  --rand: clamp(1rem, 4vw, 2.5rem);                         /* seitlicher Seitenrand */

  /* Breiten */
  --wrap: 1240px;
  --wrap-schmal: 760px;
  --wrap-breit: 1440px;
  --lesebreite: 68ch;

  /* Formen */
  --r-1: 4px;      /* Knöpfe, Felder */
  --r-2: 10px;     /* Karten, Bilder */
  --r-3: 18px;     /* große Flächen */
  --r-rund: 999px; /* Chips, Pillen */
  --schatten-1: 0 1px 2px rgba(46, 26, 17, .06), 0 8px 20px -12px rgba(46, 26, 17, .22);
  --schatten-2: 0 22px 44px -22px rgba(46, 26, 17, .42);

  /* Bewegung */
  --dauer-1: 160ms;
  --dauer-2: 320ms;
  --dauer-3: 800ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-raus: cubic-bezier(.16, 1, .3, 1);
  --ease-rein-raus: cubic-bezier(.65, 0, .35, 1);

  /* Kopf und Ebenen – Höhe folgt aus der Logo-Mindestgröße (siehe 7) */
  --kopf-h: 104px;
  --kopf-h-kompakt: 72px;
  --logo-h: 88px;            /* Styleguide S. 11: Hauptlogo mit Claim mind. 40 × 23 mm ≈ 151 × 87 px */
  --logo-h-kompakt: 62px;    /* Mindestmaß der Variante OHNE Claim (34 × 16,5 mm ≈ 62 px) */
  --z-leiste: 40;
  --z-kopf: 50;
  --z-oben: 70;
}


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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h-kompakt) + 1rem);
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
/* <picture> (WebP + JPG) verhält sich in Bildrahmen wie das Bild selbst */
picture { display: block; }
:is(.hero__medien, .kachel__bild, .referenz__bild, .split__bild, .person__bild,
    .artikel__titelbild, .video, .vergleich__buehne, .vergleich__vorher) > picture { width: 100%; height: 100%; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: var(--lh-titel);
  letter-spacing: -.012em;
  color: var(--braun);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

a {
  color: var(--gruen-700);
  text-decoration: none;
  transition: color var(--dauer-1) var(--ease);
}
a:hover { color: var(--gruen-800); }
/* Links im Fließtext brauchen mehr als Farbe (Grün vs. Text nur 2,3:1). */
a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
strong, b { font-weight: 700; }
small { font-size: .875em; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--linie); margin: var(--s-6) 0; }

:focus-visible {
  outline: 3px solid var(--gruen-700);
  outline-offset: 3px;
  border-radius: 2px;
}
:is(.auf-dunkel, .abschnitt--braun, .hero, .fuss, .cta-band) :focus-visible { outline-color: var(--gelb); }

::selection { background: var(--gelb); color: var(--braun); }

.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-3);
  top: -100px;
  z-index: var(--z-oben);
  padding: .8rem 1.2rem;
  border-radius: var(--r-1);
  background: var(--braun);
  color: var(--weiss);
  font-weight: 700;
}
.skip-link:focus { top: var(--s-3); color: var(--weiss); }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* 3  Layout -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
.wrap--schmal { max-width: calc(var(--wrap-schmal) + 2 * var(--rand)); }
.wrap--breit { max-width: calc(var(--wrap-breit) + 2 * var(--rand)); }

.abschnitt { padding-block: var(--abschnitt); }
.abschnitt--eng { padding-block: var(--abschnitt-eng); }
.abschnitt--ohne-oben { padding-top: 0; }     /* direkt an gleichfarbigen Abschnitt anschließen */
.abschnitt--ohne-unten { padding-bottom: 0; }
.abschnitt--sand { background: var(--sand); }
.abschnitt--papier { background: var(--papier); }
.abschnitt--gruen { background: var(--gruen-50); }

/* Abschnittskopf: Eyebrow + Titel (+ Einleitung) links, optional Link rechts */
.abschnittskopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5) var(--s-7);
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem);
}
.abschnittskopf__text { max-width: 46rem; }
.abschnittskopf--mittig { flex-direction: column; align-items: center; text-align: center; }
.abschnittskopf--mittig .abschnittskopf__text { margin-inline: auto; }
.abschnittskopf--mittig .lede { margin-inline: auto; }

/* Raster */
.raster {
  display: grid;
  gap: var(--luecke);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spalte-min, 18rem)), 1fr));
}
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023.98px) {
  .raster--3, .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 679.98px) {
  .raster--2, .raster--3, .raster--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Gleichmäßiger Abstand zwischen Geschwistern */
.stapel > * + * { margin-top: var(--stapel, var(--s-4)); }


/* 4  Typografie ---------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75em;
  font-size: var(--fs-mini);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--sperrung);
  text-transform: uppercase;
  color: var(--gruen-700);
}
/* Die kleine Linie vor jedem Label – "wächst" beim Einblenden */
.eyebrow::before {
  content: '';
  flex: none;
  width: 1.75rem;
  height: 3px;
  border-radius: 2px;
  background: var(--gruen);
  transform-origin: left center;
}
.eyebrow--ohne-linie::before { display: none; }
:is(.auf-dunkel, .abschnitt--braun, .hero, .cta-band) .eyebrow,
.eyebrow--gelb { color: var(--gelb); }
:is(.auf-dunkel, .abschnitt--braun, .hero, .cta-band) .eyebrow::before,
.eyebrow--gelb::before { background: var(--gelb); }

.h-hero { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -.025em; }
.h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -.02em; }
.h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.016em; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; }
.h4 { font-size: var(--fs-h4); line-height: 1.3; }

.eyebrow + :is(h1, h2, h3, .h1, .h2, .h3, .h-hero) { margin-top: .9rem; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  max-width: 40em;
}
:is(h1, h2, h3, .h1, .h2, .h3) + .lede { margin-top: var(--s-5); }
.lede + .lede { margin-top: var(--s-4); }

.text-klein { font-size: var(--fs-klein); }
.gedimmt { color: var(--text-2); }
.mittig { text-align: center; }

/* Gelbe Markierung, die "wächst" (sparsam: ein Wort pro Seite) */
.markiert {
  font-style: normal;
  background: linear-gradient(var(--gelb), var(--gelb)) 0 92% / 100% .09em no-repeat;
  padding-bottom: .04em;
}

/* Dunkler Kontext: Überschriften weiß, Text leicht zurückgenommen */
:is(.auf-dunkel, .abschnitt--braun) { color: var(--auf-dunkel); }
:is(.auf-dunkel, .abschnitt--braun) :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) { color: var(--weiss); }
:is(.auf-dunkel, .abschnitt--braun) .gedimmt { color: var(--auf-dunkel-2); }
:is(.auf-dunkel, .abschnitt--braun) a:not([class]) { color: var(--weiss); }


/* 5  Knöpfe & Links ------------------------------------------------------ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--braun);
  --btn-rand: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 3rem;
  padding: .75rem 1.5rem;
  border: 2px solid var(--btn-rand);
  border-radius: var(--r-1);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dauer-1) var(--ease),
    border-color var(--dauer-1) var(--ease),
    color var(--dauer-1) var(--ease),
    transform var(--dauer-1) var(--ease);
}
.btn:hover {
  background: var(--btn-bg-hover, var(--btn-bg));
  border-color: var(--btn-rand-hover, var(--btn-rand));
  color: var(--btn-fg-hover, var(--btn-fg));
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.15em; height: 1.15em; transition: transform var(--dauer-2) var(--ease-raus); }
.btn:hover .icon--pfeil { transform: translateX(4px); }

/* Primär: die eine Hauptaktion je Abschnitt */
.btn--primaer {
  --btn-bg: var(--gruen-700);
  --btn-fg: var(--weiss);
  --btn-rand: var(--gruen-700);
  --btn-bg-hover: var(--gruen-800);
  --btn-rand-hover: var(--gruen-800);
}
/* Sekundär: zweite Option auf hellem Grund */
.btn--sekundaer {
  --btn-fg: var(--braun);
  --btn-rand: var(--braun);
  --btn-bg-hover: var(--braun);
  --btn-fg-hover: var(--weiss);
}
/* Hell: zweite Option auf dunklem Grund / Foto */
.btn--hell {
  --btn-fg: var(--weiss);
  --btn-rand: rgba(255, 255, 255, .62);
  --btn-bg-hover: var(--weiss);
  --btn-fg-hover: var(--braun);
  --btn-rand-hover: var(--weiss);
}
/* Weiß: Hauptaktion auf Grün/Braun */
.btn--weiss {
  --btn-bg: var(--weiss);
  --btn-fg: var(--braun);
  --btn-rand: var(--weiss);
  --btn-bg-hover: var(--gelb);
  --btn-rand-hover: var(--gelb);
}
.btn--gross { min-height: 3.5rem; padding: .95rem 1.9rem; font-size: 1.0625rem; }
.btn--klein { min-height: 2.5rem; padding: .5rem 1rem; font-size: .9375rem; }
.btn--block { width: 100%; }

.btn-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
* + .btn-reihe { margin-top: var(--s-6); }
@media (max-width: 479.98px) {
  .btn-reihe--stapeln { flex-direction: column; align-items: stretch; }
}

/* Textlink mit wachsender Unterstreichung, optional mit Pfeil */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding-block: .2em;
  color: var(--gruen-700);
  font-weight: 700;
  text-decoration: none;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat,
    linear-gradient(var(--gruen), var(--gruen)) 0 100% / 100% 2px no-repeat;
  transition: background-size var(--dauer-2) var(--ease-raus), color var(--dauer-1) var(--ease);
}
.textlink:hover { color: var(--braun); background-size: 100% 2px, 100% 2px; }
.textlink .icon { width: 1.1em; height: 1.1em; transition: transform var(--dauer-2) var(--ease-raus); }
.textlink:hover .icon--pfeil { transform: translateX(4px); }
:is(.auf-dunkel, .abschnitt--braun, .hero, .cta-band, .fuss) .textlink {
  color: var(--gelb);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(rgba(255, 204, 0, .45), rgba(255, 204, 0, .45));
}
:is(.auf-dunkel, .abschnitt--braun, .hero, .cta-band, .fuss) .textlink:hover { color: var(--weiss); }


/* 6  Entwurfshinweis (entfällt beim Livegang) ---------------------------- */
.entwurf {
  margin: 0;
  padding: .5rem var(--rand);
  background: var(--text);
  color: var(--weiss);
  font-size: .8125rem;
  line-height: 1.45;
  text-align: center;
}
.entwurf__marke {
  display: inline-block;
  margin-right: .5rem;
  padding: .12rem .5rem;
  border-radius: var(--r-rund);
  background: var(--gelb);
  color: var(--braun);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* A/B-Test: Variante A ist Standard (auch ohne JS). lepski.js setzt
   data-ab-variante="a|b" am Element mit data-ab="name". */
[data-ab]:not([data-ab-variante='b']) [data-variant-b],
[data-ab][data-ab-variante='b'] [data-variant-a] { display: none !important; }


/* 7  Kopf & Navigation --------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: var(--z-kopf);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dauer-2) var(--ease), box-shadow var(--dauer-2) var(--ease);
}
/* Hintergrund als eigene Ebene: backdrop-filter am Kopf selbst würde das
   fixierte Mobilmenü an den Kopf binden. */
.kopf::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .97);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .kopf::before {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(1.5) blur(14px);
    backdrop-filter: saturate(1.5) blur(14px);
  }
}
.kopf.ist-kompakt {
  border-bottom-color: var(--linie);
  box-shadow: 0 10px 28px -24px rgba(46, 26, 17, .55);
}

.kopf__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: var(--kopf-h);
  transition: min-height var(--dauer-2) var(--ease);
}
.kopf.ist-kompakt .kopf__inner { min-height: var(--kopf-h-kompakt); }

.kopf__logo {
  position: relative;
  z-index: 2;
  flex: none;
  display: block;
  border-radius: var(--r-1);
}
/* Logo-Größe: Das PNG (388 × 222) ist das Hauptlogo MIT Claim. Styleguide
   S. 11 verlangt dafür mind. 40 × 23 mm ≈ 151 × 87 px – so steht es im
   Kopf, solange nicht gescrollt ist. Im kompakten Kopf (beim Scrollen)
   62 px = Mindestmaß der Variante OHNE Claim. Bis diese als SVG vorliegt
   (Konzept Frage 24), unterschreitet das PNG dort das Maß – bewusste
   Übergangslösung; mit dem SVG ohne Claim ist sie regelkonform. */
.kopf__logo img {
  width: auto;
  height: var(--logo-h);
  transition: height var(--dauer-2) var(--ease);
}
.kopf.ist-kompakt .kopf__logo img { height: var(--logo-h-kompakt); }

.hauptnav { margin-left: auto; }
.hauptnav__liste {
  display: flex;
  align-items: center;
  gap: clamp(1rem, .1rem + 1.35vw, 1.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hauptnav__punkt { position: relative; }

.hauptnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .6rem 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.hauptnav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: .25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gruen);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dauer-2) var(--ease-raus);
}
.hauptnav__link:hover { color: var(--braun); }
.hauptnav__link:hover::after,
.hauptnav__link[aria-current='page']::after,
.hauptnav__link.ist-aktiv::after { transform: scaleX(1); }
.hauptnav__link[aria-current='page'],
.hauptnav__link.ist-aktiv { color: var(--braun); }

.hauptnav__pfeil {
  width: .9em;
  height: .9em;
  transition: transform var(--dauer-2) var(--ease-raus);
}
.hauptnav__aufklapper[aria-expanded='true'] .hauptnav__pfeil { transform: rotate(180deg); }

/* Dropdown "Leistungen" */
.hauptnav__unter {
  position: absolute;
  top: calc(100% + .5rem);
  left: -1rem;
  min-width: 19rem;
  margin: 0;
  padding: .5rem;
  list-style: none;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  box-shadow: var(--schatten-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--dauer-1) var(--ease),
    transform var(--dauer-2) var(--ease-raus),
    visibility 0s linear var(--dauer-2);
}
/* Brücke, damit die Maus den Spalt zwischen Knopf und Liste überqueren kann */
.hauptnav__unter::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: .6rem;
}
.hauptnav__aufklapper[aria-expanded='true'] + .hauptnav__unter,
html:not(.js) .hauptnav__punkt--unter:hover > .hauptnav__unter,
html:not(.js) .hauptnav__punkt--unter:focus-within > .hauptnav__unter {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.hauptnav__unterlink {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .7rem .9rem;
  border-radius: var(--r-1);
  color: var(--braun);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--dauer-1) var(--ease);
}
.hauptnav__unterlink small {
  font-size: .875rem;
  font-weight: 400;
  color: var(--text-2);
}
.hauptnav__unterlink:hover,
.hauptnav__unterlink:focus-visible { background: var(--sand); color: var(--braun); }
.hauptnav__unterlink[aria-current='page'] { background: var(--gruen-50); }
.hauptnav__unterlink--alle {
  margin-top: .35rem;
  flex-direction: row;
  align-items: center;
  gap: .4rem;
  border-top: 1px solid var(--linie);
  border-radius: 0 0 var(--r-1) var(--r-1);
  color: var(--gruen-700);
}

/* Telefon + CTA rechts */
.kopf__aktionen {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.kopf__tel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--braun);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.kopf__tel .icon { color: var(--gruen-700); }
.kopf__tel:hover { color: var(--gruen-800); }
.kopf__aktionen .btn { min-height: 2.75rem; padding: .6rem 1.15rem; }

/* Menüknopf und Mobilteil der Navigation – ab Desktop ausgeblendet */
.menue-schalter { display: none; }
.hauptnav__extra { display: none; }

@media (max-width: 1319.98px) {
  /* Mittlere Breiten: nur das Telefon-Symbol, Nummer bleibt für Screenreader */
  .kopf__tel-nummer {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .kopf__tel {
    width: 2.75rem;
    height: 2.75rem;
    justify-content: center;
    border: 1.5px solid var(--linie-2);
    border-radius: 50%;
  }
  .kopf__tel:hover { border-color: var(--gruen); }
  .kopf__aktionen { gap: var(--s-3); }
}

@media (max-width: 1099.98px) {
  :root { --kopf-h: 100px; --kopf-h-kompakt: 70px; }
  .kopf__aktionen { display: none; }

  .menue-schalter {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.75rem;
    margin-left: auto;
    padding: .5rem 1rem;
    border: 1.5px solid var(--linie-2);
    border-radius: var(--r-rund);
    background: var(--weiss);
    color: var(--braun);
    font-weight: 700;
    line-height: 1;
  }
  .menue-schalter__icon {
    position: relative;
    width: 18px;
    height: 12px;
  }
  .menue-schalter__icon::before,
  .menue-schalter__icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--dauer-2) var(--ease-raus), top var(--dauer-2) var(--ease-raus);
  }
  .menue-schalter__icon::before { top: 1px; }
  .menue-schalter__icon::after { top: 9px; }
  .menue-schalter[aria-expanded='true'] .menue-schalter__icon::before { top: 5px; transform: rotate(45deg); }
  .menue-schalter[aria-expanded='true'] .menue-schalter__icon::after { top: 5px; transform: rotate(-45deg); }

  /* Vollbild-Overlay (nur mit JavaScript) */
  html.js .hauptnav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    /* --menue-oben: Unterkante des Kopfs beim Öffnen (setzt lepski.js) */
    padding: calc(var(--menue-oben, var(--kopf-h)) + 1rem) var(--rand) calc(2rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--papier);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity var(--dauer-2) var(--ease),
      transform 420ms var(--ease-raus),
      visibility 0s linear 420ms;
  }
  html.js .hauptnav.ist-offen {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  html.menue-offen { overflow: hidden; }

  .hauptnav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .hauptnav__punkt { border-bottom: 1px solid var(--linie); }
  .hauptnav__link {
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0;
    color: var(--braun);
    font-size: clamp(1.375rem, 1.15rem + 1.2vw, 1.75rem);
    font-weight: 700;
    text-align: left;
  }
  .hauptnav__link::after { display: none; }
  .hauptnav__link[aria-current='page'],
  .hauptnav__link.ist-aktiv { color: var(--gruen-700); }

  /* Untermenü wird im Overlay zum Akkordeon */
  .hauptnav__unter,
  html:not(.js) .hauptnav__punkt--unter:hover > .hauptnav__unter {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 1rem;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .hauptnav__unter::before { display: none; }
  .hauptnav__aufklapper[aria-expanded='true'] + .hauptnav__unter,
  html:not(.js) .hauptnav__unter { display: block; }
  .hauptnav__unterlink { padding: .65rem .75rem; font-size: 1.0625rem; }

  /* Gestaffeltes Einblenden der Menüpunkte */
  .hauptnav.ist-offen .hauptnav__punkt,
  .hauptnav.ist-offen .hauptnav__extra {
    animation: menue-punkt 520ms var(--ease-raus) backwards;
  }
  .hauptnav__punkt:nth-child(2) { animation-delay: 40ms; }
  .hauptnav__punkt:nth-child(3) { animation-delay: 80ms; }
  .hauptnav__punkt:nth-child(4) { animation-delay: 120ms; }
  .hauptnav__punkt:nth-child(5) { animation-delay: 160ms; }
  .hauptnav__punkt:nth-child(6) { animation-delay: 200ms; }
  .hauptnav__punkt:nth-child(7) { animation-delay: 240ms; }
  .hauptnav.ist-offen .hauptnav__extra { animation-delay: 260ms; }

  .hauptnav__extra {
    display: grid;
    gap: .75rem;
    margin-top: var(--s-6);
  }
  .hauptnav__extra .btn { width: 100%; }
  .hauptnav__adresse {
    margin-top: var(--s-4);
    font-size: var(--fs-klein);
    color: var(--text-2);
  }

  /* Ohne JavaScript: Navigation als normale Liste unter dem Logo */
  html:not(.js) .kopf { position: relative; }
  html:not(.js) .kopf__inner { flex-wrap: wrap; padding-bottom: 1rem; }
  html:not(.js) .menue-schalter { display: none; }
  html:not(.js) .hauptnav { width: 100%; margin: 0; }
  html:not(.js) .hauptnav__link { font-size: 1.125rem; padding: .7rem 0; }
  html:not(.js) .hauptnav__pfeil { display: none; }
}

@keyframes menue-punkt {
  from { opacity: 0; transform: translateY(14px); }
}


/* 8  Hero, Seitenkopf ---------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(34rem, 84svh, 54rem);
  overflow: hidden;
  background: var(--braun-900);
  color: var(--weiss);
}
.hero--seite { min-height: clamp(28rem, 66svh, 42rem); }

/* Medienebene: 10 % Überstand oben/unten als Spielraum für die Parallaxe */
.hero__medien {
  position: absolute;
  inset: -10% 0;
  z-index: -2;
  will-change: transform;
}
.hero__bild,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bildfokus, 50% 50%);
}
.hero__bild { animation: hero-zoom 2.4s var(--ease-raus) both; }

/* Verlauf: links dunkel für die Schrift, unten dunkel für die Knöpfe */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(46, 26, 17, .84) 0%, rgba(46, 26, 17, .58) 40%, rgba(46, 26, 17, .1) 76%),
    linear-gradient(0deg, rgba(46, 26, 17, .72) 0%, rgba(46, 26, 17, 0) 48%);
}

.hero__inhalt {
  width: 100%;
  padding-top: calc(var(--abschnitt) * 1.2);
  padding-bottom: clamp(2.5rem, 1.8rem + 3vw, 5rem);
}
.hero__text { max-width: 48rem; }
.hero__marke {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: var(--s-5);
  color: rgba(255, 255, 255, .92);
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--sperrung);
  text-transform: uppercase;
}
.hero__marke::before {
  content: '';
  flex: none;
  width: 2.25rem;
  height: 3px;
  border-radius: 2px;
  background: var(--gelb);
  transform-origin: left center;
  animation: linie-x 900ms var(--ease-raus) 200ms backwards;
}
.hero__titel {
  max-width: 17ch;
  color: var(--weiss);
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -.025em;
}
.hero__titel .markiert { animation: markierung 1.1s var(--ease-raus) .75s backwards; }
/* Aufmacher-Zeile über dem Titel: statt .hero__marke, wenn die Zeile eine
   Aussage trägt – z. B. A/B-Test /holzhaus-bauen (gleiche H1, andere Zeile). */
.hero__claim {
  max-width: 30ch;
  margin-bottom: var(--s-4);
  color: var(--gelb);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.hero__text > .brotkrumen { margin-bottom: var(--s-5); }
.hero__unterzeile {
  max-width: 36rem;
  margin-top: var(--s-5);
  color: rgba(255, 255, 255, .92);
  font-size: var(--fs-lede);
  line-height: 1.6;
}
.hero__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin: var(--s-7) 0 0;
  padding: var(--s-5) 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .88);
  font-size: var(--fs-klein);
}
.hero__fakten li { display: inline-flex; align-items: center; gap: .5rem; }
.hero__fakten .icon { color: var(--gelb); }

/* Einstieg: gestaffelt, rein per CSS (keine JS-Abhängigkeit über dem Falz) */
.hero__text > * { animation: auftauchen 850ms var(--ease-raus) backwards; }
.hero__text > :nth-child(2) { animation-delay: 90ms; }
.hero__text > :nth-child(3) { animation-delay: 180ms; }
.hero__text > :nth-child(4) { animation-delay: 270ms; }
.hero__text > :nth-child(5) { animation-delay: 360ms; }

@media (max-width: 759.98px) {
  .hero { min-height: clamp(32rem, 88svh, 44rem); }
  .hero::before {
    background: linear-gradient(0deg,
      rgba(46, 26, 17, .9) 0%,
      rgba(46, 26, 17, .62) 55%,
      rgba(46, 26, 17, .28) 100%);
  }
  .hero__fakten { margin-top: var(--s-6); }
}
/* Unter 900 px nur das Standbild. Das spart nur dann Daten, wenn das Video
   ohne src/autoplay eingebunden ist (data-hero-video, lepski.js lädt es
   erst ab 900 px) – display:none allein verhindert kein Laden. */
@media (max-width: 899.98px) {
  .hero__video { display: none; }
}

/* Seitenkopf ohne Bild: Unterseiten, Ratgeber, Kontakt, Rechtliches */
.seitenkopf {
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  background: var(--sand);
}
.seitenkopf .brotkrumen + * { margin-top: clamp(2rem, 1.4rem + 2.5vw, 3.75rem); }
.seitenkopf__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--s-7) clamp(2rem, 1rem + 4vw, 5rem);
  align-items: end;
}
@media (max-width: 899.98px) {
  .seitenkopf__raster { grid-template-columns: minmax(0, 1fr); }
}


/* 9  Brotkrumen ---------------------------------------------------------- */
.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
  color: var(--text-2);
}
.brotkrumen li { display: inline-flex; align-items: center; gap: .6rem; }
.brotkrumen li + li::before {
  content: '';
  width: .38rem;
  height: .38rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: .6;
}
.brotkrumen a { color: var(--text-2); text-decoration: none; }
.brotkrumen a:hover { color: var(--braun); text-decoration: underline; text-underline-offset: .2em; }
.brotkrumen [aria-current='page'] { color: var(--braun); font-weight: 600; }
:is(.auf-dunkel, .hero) .brotkrumen ol,
:is(.auf-dunkel, .hero) .brotkrumen a { color: var(--auf-dunkel-2); }
:is(.auf-dunkel, .hero) .brotkrumen [aria-current='page'] { color: var(--weiss); }


/* 10  Weiche – Vorhaben-Kacheln ------------------------------------------ */
.weiche {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--luecke);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kachel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-2);
  background: var(--braun);
  color: var(--weiss);
  text-decoration: none;
}
.kachel__bild { position: absolute; inset: 0; z-index: -2; }
.kachel__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-raus);
}
.kachel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(46, 26, 17, .9) 0%, rgba(46, 26, 17, .4) 45%, rgba(46, 26, 17, 0) 72%);
  transition: opacity var(--dauer-2) var(--ease);
}
.kachel__text {
  display: grid;
  gap: .3rem;
  padding: clamp(1rem, .8rem + 1vw, 1.6rem);
}
.kachel__text::after {
  content: '';
  width: 2.5rem;
  height: 3px;
  margin-top: .55rem;
  border-radius: 2px;
  background: var(--gelb);
  transform-origin: left center;
  transition: transform 500ms var(--ease-raus);
}
.kachel__nr {
  color: var(--gelb);
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--sperrung);
}
.kachel__titel {
  color: var(--weiss);
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  font-weight: 700;
  line-height: 1.15;
}
.kachel__info { color: rgba(255, 255, 255, .86); font-size: var(--fs-klein); line-height: 1.45; }
.kachel__pfeil {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: var(--braun);
  transition: translate var(--dauer-2) var(--ease-raus), background-color var(--dauer-2) var(--ease);
}
.kachel--dunkel::before { background: linear-gradient(0deg, rgba(46, 26, 17, .94) 0%, rgba(46, 26, 17, .7) 60%, rgba(46, 26, 17, .45) 100%); }
.kachel--dunkel .kachel__pfeil { background: var(--gelb); }

@media (hover: hover) {
  .kachel:hover .kachel__bild img { transform: scale(1.06); }
  .kachel:hover .kachel__text::after { transform: scaleX(1.8); }
  .kachel:hover .kachel__pfeil { translate: 3px 0; background: var(--gelb); }
}

@media (max-width: 959.98px) and (min-width: 560px) {
  .weiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel { aspect-ratio: 4 / 3; }
}
/* Handy: Kacheln werden zu gut antippbaren Zeilen */
@media (max-width: 559.98px) {
  .weiche { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .kachel {
    flex-direction: row;
    justify-content: flex-start; /* flex-end ließ bei kurzem Text links neben dem Bild einen Spalt */
    align-items: center;
    aspect-ratio: auto;
    min-height: 6.5rem;
    border: 1px solid var(--linie);
    background: var(--weiss);
    color: var(--braun);
  }
  .kachel::before, .kachel__text::after { display: none; }
  .kachel__bild { position: relative; inset: auto; z-index: 0; flex: none; align-self: stretch; width: 6.5rem; }
  .kachel__text { flex: 1 1 auto; padding: .85rem 3.5rem .85rem 1rem; gap: .15rem; }
  .kachel__nr { color: var(--gruen-700); }
  .kachel__titel { color: var(--braun); font-size: 1.1875rem; }
  .kachel__info { color: var(--text-2); font-size: .875rem; }
  .kachel__pfeil { top: 50%; right: .9rem; width: 2.25rem; height: 2.25rem; margin-top: -1.125rem; background: var(--sand); }
  .kachel--dunkel { background: var(--braun); border-color: var(--braun); }
  .kachel--dunkel :is(.kachel__titel) { color: var(--weiss); }
  .kachel--dunkel .kachel__info { color: rgba(255, 255, 255, .8); }
  .kachel--dunkel .kachel__nr { color: var(--gelb); }
}


/* 11  Kennzahlen (mit Zähl-Animation über data-zaehler) ------------------ */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-6) var(--luecke);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kennzahl { position: relative; padding-top: var(--s-5); }
.kennzahl::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--linie-2);
}
.kennzahl::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--gruen);
  transform-origin: left center;
}
.kennzahl__wert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .18em;
  color: var(--braun);
  font-size: var(--fs-zahl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kennzahl__einheit { color: var(--gruen-700); font-size: .45em; letter-spacing: 0; }
.kennzahl__text { max-width: 24ch; margin-top: .8rem; font-size: var(--fs-klein); line-height: 1.5; }
.kennzahl__quelle { margin-top: .4rem; font-size: .75rem; color: var(--text-2); }
:is(.auf-dunkel, .abschnitt--braun) .kennzahl::before { background: var(--linie-dunkel); }
:is(.auf-dunkel, .abschnitt--braun) .kennzahl::after { background: var(--gelb); }
:is(.auf-dunkel, .abschnitt--braun) .kennzahl__wert { color: var(--weiss); }
:is(.auf-dunkel, .abschnitt--braun) .kennzahl__einheit { color: var(--gelb); }
:is(.auf-dunkel, .abschnitt--braun) .kennzahl__text { color: var(--auf-dunkel-2); }
:is(.auf-dunkel, .abschnitt--braun) .kennzahl__quelle { color: rgba(255, 255, 255, .6); }


/* 12  Siegelleiste ------------------------------------------------------- */
.siegelleiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .75rem var(--luecke);
  margin: 0;
  padding: 0;
  list-style: none;
}
.siegel {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  background: var(--weiss);
}
.siegel__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--gruen-100);
  color: var(--gruen-700);
}
.siegel__titel { color: var(--braun); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.siegel__text { margin-top: .2rem; color: var(--text-2); font-size: .875rem; line-height: 1.45; }
.siegelleiste__titel { margin-bottom: var(--s-4); }

/* Kompakte Variante: eine Zeile ohne Rahmen (z. B. unter dem Hero) */
.siegelleiste--kompakt { display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
.siegelleiste--kompakt .siegel { padding: 0; border: 0; background: none; align-items: center; gap: .6rem; }
.siegelleiste--kompakt .siegel__icon { width: 2.25rem; height: 2.25rem; }


/* 13  Ablauf – nummerierte Zeitleiste ------------------------------------ */
.ablauf {
  display: grid;
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ablauf__schritt { position: relative; padding-left: 4.25rem; }
.ablauf__nr {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--gruen);
  border-radius: 50%;
  background: var(--weiss);
  color: var(--braun);
  font-size: 1.125rem;
  font-weight: 700;
  transition: background-color var(--dauer-2) var(--ease), color var(--dauer-2) var(--ease);
}
.ablauf__schritt:hover .ablauf__nr { background: var(--gruen); color: var(--weiss); }
/* Verbindungslinie zum nächsten Schritt */
.ablauf__schritt:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(1.5rem - 1px);
  top: 3.5rem;
  bottom: calc(-1 * var(--s-6) + .5rem);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--gruen), var(--linie-2));
  transform-origin: top center;
}
.ablauf__titel { padding-top: .6rem; font-size: var(--fs-h3); }
.ablauf__text { margin-top: .5rem; font-size: var(--fs-klein); }
.ablauf__dauer {
  margin-top: .6rem;
  color: var(--gruen-700);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.abschnitt--sand .ablauf__nr { background: var(--sand); }
.abschnitt--sand .ablauf__schritt:hover .ablauf__nr { background: var(--gruen); }

@media (min-width: 1000px) {
  .ablauf {
    grid-template-columns: repeat(var(--anzahl, 6), minmax(0, 1fr));
    gap: var(--luecke);
  }
  .ablauf__schritt { padding-left: 0; padding-top: 4.5rem; }
  .ablauf__schritt:not(:last-child)::before {
    top: calc(1.5rem - 1px);
    left: 3.5rem;
    right: calc(-1 * var(--luecke) + .5rem);
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--gruen), var(--linie-2));
    transform-origin: left center;
  }
  .ablauf__titel { padding-top: 0; }
}


/* 14  Referenzen + Filter-Chips ------------------------------------------ */
.filterleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .45rem 1.05rem;
  border: 1.5px solid var(--linie-2);
  border-radius: var(--r-rund);
  background: var(--weiss);
  color: var(--text);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color var(--dauer-1) var(--ease), border-color var(--dauer-1) var(--ease), color var(--dauer-1) var(--ease);
}
.chip:hover { border-color: var(--gruen); color: var(--braun); }
.chip[aria-pressed='true'] { border-color: var(--braun); background: var(--braun); color: var(--weiss); }
.chip__zahl {
  min-width: 1.5rem;
  padding: .1rem .4rem;
  border-radius: var(--r-rund);
  background: var(--sand);
  color: var(--text-2);
  font-size: .75rem;
  text-align: center;
}
.chip[aria-pressed='true'] .chip__zahl { background: rgba(255, 255, 255, .18); color: var(--weiss); }
.filterstatus { margin-top: var(--s-4); color: var(--text-2); font-size: var(--fs-klein); }

.referenzen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--s-7) var(--luecke);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.referenz { position: relative; display: flex; flex-direction: column; }
.referenz[hidden] { display: none; }
.referenz.ist-neu { animation: auftauchen 520ms var(--ease-raus) backwards; }
.referenz__bild {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-2);
  background: var(--sand);
}
.referenz__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-raus); }
.referenz__kat {
  margin-top: 1.1rem;
  color: var(--gruen-700);
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.referenz__titel { margin-top: .35rem; font-size: var(--fs-h3); }
.referenz__link { color: inherit; text-decoration: none; }
/* ganze Karte klickbar, Link bleibt im Titel (gute Screenreader-Ausgabe) */
.referenz__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-2); }
.referenz__link:focus-visible { outline: none; }
.referenz__link:focus-visible::after { outline: 3px solid var(--gruen-700); outline-offset: 4px; }
.referenz__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.25rem;
  margin-top: .7rem;
  font-size: .875rem;
}
.referenz__fakten > div { display: flex; gap: .35em; }
.referenz__fakten dt { color: var(--text-2); }
.referenz__fakten dd { color: var(--text); font-weight: 600; }
.referenz__text { margin-top: .55rem; color: var(--text-2); font-size: var(--fs-klein); }
@media (hover: hover) {
  .referenz:hover .referenz__bild img { transform: scale(1.05); }
  .referenz:hover .referenz__link { color: var(--gruen-800); }
}


/* 15  Vorher-Nachher-Vergleich ------------------------------------------- */
.vergleich { --position: 50%; margin: 0; }
.vergleich__buehne {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--seitenverhaeltnis, 16 / 10);
  border-radius: var(--r-2);
  background: var(--sand);
  user-select: none;
  -webkit-user-select: none;
}
.vergleich__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.vergleich__vorher {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--position)) 0 0);
}
.vergleich__trenner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 3px;
  margin-left: -1.5px;
  background: var(--weiss);
  box-shadow: 0 0 0 1px rgba(46, 26, 17, .12);
  pointer-events: none;
}
.vergleich__griff {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border-radius: 50%;
  background: var(--weiss);
  color: var(--braun);
  box-shadow: var(--schatten-1);
}
/* Das native Range-Element liegt unsichtbar über dem Bild: Maus, Touch und
   Tastatur (Pfeile, Pos1/Ende) funktionieren ohne eigenes Drag-Handling. */
.vergleich__regler {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.vergleich__regler:focus-visible + .vergleich__trenner .vergleich__griff {
  outline: 3px solid var(--gelb);
  outline-offset: 3px;
}
.vergleich__label {
  position: absolute;
  top: 1rem;
  z-index: 1;
  padding: .3rem .7rem;
  border-radius: var(--r-rund);
  background: rgba(46, 26, 17, .74);
  color: var(--weiss);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.vergleich__label--vorher { left: 1rem; }
.vergleich__label--nachher { right: 1rem; }
.vergleich__text { margin-top: .9rem; color: var(--text-2); font-size: var(--fs-klein); }
html:not(.js) .vergleich__regler { display: none; }


/* 16  Stimme (Zitat) und Personen ---------------------------------------- */
.stimme {
  position: relative;
  margin: 0;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  border-radius: var(--r-3);
  background: var(--sand);
}
.stimme__zeichen { width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; color: var(--gelb); }
.stimme__zitat {
  margin: 0;
  color: var(--braun);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.4;
  text-wrap: pretty;
}
.stimme__quelle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  margin-top: var(--s-5);
}
.stimme__name { color: var(--braun); font-weight: 700; }
.stimme__ort { color: var(--text-2); font-size: var(--fs-klein); }
/* Platzhalter deutlich kennzeichnen, bis ein freigegebenes Zitat vorliegt */
.stimme--platzhalter {
  background: repeating-linear-gradient(135deg, var(--gelb-50) 0 14px, var(--weiss) 14px 28px);
  outline: 2px dashed var(--gelb-rand);
  outline-offset: -10px;
}
.stimme--platzhalter .stimme__zitat { color: var(--text-2); }

/* Platzhalter – "noch zu liefern" (Design-System v2.1)
   Gelb + gestrichelter Rahmen + Stift-Symbol: in jedem Screenshot sofort als
   fehlender Inhalt erkennbar, ohne das Layout zu sprengen. Vor dem Livegang
   muss die Suche nach "platzhalter" und "bildplatz" leer sein.
   .platzhalter          Marke im Text (Wert, Name, Datum, Freigabe-Vermerk)
   .platzhalter-kasten   ganzer Absatz/Block fehlt; Etikett "Noch zu liefern"
                         (eigener Text per data-etikett="…")
   .bildplatz            fehlendes Foto; füllt seinen Bildrahmen
   .stimme--platzhalter  Zitat-Karte ohne freigegebenes Zitat              */
.platzhalter {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: 100%;
  padding: .15rem .65rem .15rem .5rem;
  border: 1.5px dashed var(--gelb-rand);
  border-radius: var(--r-1);
  background: var(--gelb-100);
  color: var(--platzhalter);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  vertical-align: middle;
  white-space: normal;
}
.platzhalter::before {
  content: '';
  flex: none;
  width: .95em;
  height: .95em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4f00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
* + .platzhalter-block { margin-top: var(--s-4); }

.platzhalter-kasten {
  position: relative;
  margin: var(--s-5) 0 0;
  padding: 1.6rem 1.1rem 1rem;
  border: 2px dashed var(--gelb-rand);
  border-radius: var(--r-2);
  background: var(--gelb-50);
  color: var(--platzhalter);
  font-size: var(--fs-klein);
  font-weight: 600;
  line-height: 1.5;
}
.platzhalter-kasten:first-child { margin-top: 0; }
.platzhalter-kasten::before {
  content: attr(data-etikett);
  position: absolute;
  top: -.8rem;
  left: .8rem;
  padding: .1rem .55rem;
  border-radius: var(--r-1);
  background: var(--gelb);
  color: var(--braun);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.platzhalter-kasten:not([data-etikett])::before { content: 'Noch zu liefern'; }
.platzhalter-kasten > * + * { margin-top: .5rem; }

.bildplatz {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 10rem;
  padding: 1.5rem;
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, var(--gelb-100) 0 12px, var(--gelb-50) 12px 24px);
  color: var(--platzhalter);
  text-align: center;
}
.bildplatz::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 2px dashed var(--gelb-rand);
  border-radius: inherit;
}
.bildplatz span {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  max-width: 16rem;
  padding: .5rem .8rem;
  border-radius: var(--r-1);
  background: rgba(255, 255, 255, .88);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.4;
}
.bildplatz span::before {
  content: '';
  width: 1.6rem;
  height: 1.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b4f00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h3l1.5-2h7l1.5 2h3a1 1 0 0 1 1 1V18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8.5a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.personen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--luecke);
}
/* Karte quer: Porträt links (max. 16rem), Text rechts – beide Karten gleich groß */
.person {
  display: grid;
  grid-template-columns: minmax(8rem, 16rem) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--r-3);
  background: var(--weiss);
}
.person__bild {
  /* width: 100 % hält das Porträt in seiner Spalte (max. 16rem): bei längerem Text
     wird die Karte höher, aspect-ratio rechnete die Breite sonst aus der Höhe und
     das Bild ragte in den Text (geprüft bei 1440 px; vorher teile/ueber-uns.css) */
  width: 100%;
  min-height: 100%;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: var(--sand);
}
.person__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-raus); }
/* Silbentrennung: um 1000–1200 px ist die Textspalte schmal, lange Wörter
   („Holzbaukompetenzzentrum") liefen sonst über den Kartenrand. */
.person__text { align-self: center; min-width: 0; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word; }
.person__rolle {
  color: var(--gruen-700);
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.person__name { margin-top: .35rem; font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); }
.person__info { margin-top: .6rem; font-size: var(--fs-klein); }
.person__kontakt { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1rem; }
@media (hover: hover) {
  .person:hover .person__bild img { transform: scale(1.04); }
}
@media (max-width: 999.98px) {
  .personen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479.98px) {
  .person { grid-template-columns: minmax(0, 1fr); }
  .person__bild { aspect-ratio: 4 / 3; min-height: 0; }
  .person__text { padding: 1.1rem 1.2rem 1.3rem; }
}


/* 17  FAQ-Akkordeon ------------------------------------------------------ */
.faq { border-top: 1px solid var(--linie-2); }
.faq__eintrag { border-bottom: 1px solid var(--linie-2); }
.faq__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  color: var(--braun);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: color var(--dauer-1) var(--ease);
}
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage::marker { content: ''; }
.faq__frage:hover { color: var(--gruen-800); }
.faq__icon {
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--sand);
  transition: background-color var(--dauer-2) var(--ease), transform var(--dauer-2) var(--ease-raus);
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: .875rem;
  height: 2px;
  margin: -1px 0 0 -.4375rem;
  border-radius: 2px;
  background: var(--braun);
  transition: transform var(--dauer-2) var(--ease-raus), background-color var(--dauer-2) var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__eintrag[open]:not(.ist-schliessend) .faq__icon { background: var(--gruen-700); transform: rotate(180deg); }
.faq__eintrag[open]:not(.ist-schliessend) .faq__icon::before,
.faq__eintrag[open]:not(.ist-schliessend) .faq__icon::after { background: var(--weiss); }
.faq__eintrag[open]:not(.ist-schliessend) .faq__icon::after { transform: rotate(0deg); }
.faq__antwort { max-width: 48rem; padding: 0 3.75rem 1.5rem 0; }
.faq__antwort > * + * { margin-top: .8em; }
.abschnitt--sand .faq__icon { background: var(--weiss); }
@media (max-width: 559.98px) { .faq__antwort { padding-right: 0; } }


/* 18  Infokarte, Häkchenliste, Merkmale ---------------------------------- */
.infokarte {
  position: relative;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  border: 1px solid var(--linie);
  border-radius: var(--r-3);
  background: var(--weiss);
}
.infokarte::before {
  content: '';
  position: absolute;
  top: -1px;
  left: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  width: 3rem;
  height: 4px;
  border-radius: 0 0 3px 3px;
  background: var(--gelb);
}
.infokarte__label {
  color: var(--gruen-700);
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--sperrung);
  text-transform: uppercase;
}
.infokarte__titel { margin-top: .6rem; font-size: var(--fs-h3); }
.infokarte__wert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1em .3em;
  margin-top: .75rem;
  color: var(--braun);
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.infokarte__wert small { font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--text-2); }
.infokarte__text { margin-top: .9rem; }
.infokarte .haekchen { margin-top: 1.25rem; }
.infokarte .btn-reihe { margin-top: var(--s-5); }
.infokarte__fuss {
  margin-top: var(--s-5);
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  color: var(--text-2);
  font-size: .8125rem;
}
.infokarte--dunkel { border-color: var(--braun); background: var(--braun); color: var(--auf-dunkel); }
.infokarte--dunkel .infokarte__label { color: var(--gelb); }
.infokarte--dunkel :is(.infokarte__titel, .infokarte__wert) { color: var(--weiss); }
.infokarte--dunkel .infokarte__wert small { color: var(--auf-dunkel-2); }
.infokarte--dunkel .infokarte__fuss { border-color: var(--linie-dunkel); color: var(--auf-dunkel-2); }
.infokarte--hinweis {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  padding: 1.25rem 1.4rem;
  border-color: transparent;
  background: var(--gruen-50);
}
.infokarte--hinweis::before { display: none; }
.infokarte--hinweis > .icon { width: 1.5rem; height: 1.5rem; margin-top: .1rem; color: var(--gruen-700); }
.infokarte--hinweis .infokarte__titel { margin-top: 0; font-size: 1.0625rem; }
.infokarte--hinweis .infokarte__text { margin-top: .3rem; font-size: var(--fs-klein); }

/* Kein margin: 0 hier – das setzt schon die Grundregel (Abschnitt 2). Sonst
   hebt es den Abstand aus .stapel (> * + *) auf und die Liste klebt am Absatz. */
.haekchen {
  display: grid;
  gap: .6rem;
  padding: 0;
  list-style: none;
}
.haekchen li { position: relative; padding-left: 1.9rem; }
.haekchen li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .2em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--gruen-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7a14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center / .75rem no-repeat;
}
:is(.auf-dunkel, .abschnitt--braun, .infokarte--dunkel, .cta-band) .haekchen li::before {
  background-color: rgba(166, 212, 107, .18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6d46b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E");
}

.merkmale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--s-6) var(--luecke);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* align-content: start – sonst verteilt das Raster in gestreckten Karten
   (.merkmale--gestapelt, Nachbar mit mehr Text) den Platz auf die Zeilen,
   und die Titel stehen nicht mehr auf einer Linie. */
.merkmal { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; align-content: start; }
.merkmal__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-2);
  background: var(--gruen-100);
  color: var(--gruen-700);
  transition: transform 450ms var(--ease-raus), background-color var(--dauer-2) var(--ease), color var(--dauer-2) var(--ease);
}
.merkmal__icon .icon { width: 1.5rem; height: 1.5rem; }
.merkmal__titel { padding-top: .2rem; font-size: 1.125rem; line-height: 1.3; }
.merkmal__text { margin-top: .35rem; font-size: var(--fs-klein); }
.merkmale--gestapelt .merkmal { grid-template-columns: minmax(0, 1fr); }
@media (hover: hover) {
  .merkmal:hover .merkmal__icon { transform: translateY(-3px) rotate(-4deg); background: var(--gruen); color: var(--weiss); }
}
:is(.auf-dunkel, .abschnitt--braun) .merkmal__icon { background: rgba(255, 255, 255, .08); color: var(--gelb); }


/* 19  Split (Bild/Text) und brauner Vollbreiten-Block --------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-7) clamp(2rem, 1rem + 4vw, 5.5rem);
  align-items: center;
}
.split--bild-gross { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--oben { align-items: start; }   /* Text und Formular/Karte oben bündig */
.split--umgekehrt > .split__bild { order: 2; }
.split__bild {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: var(--seitenverhaeltnis, 4 / 5);
  border-radius: var(--r-3);
  background: var(--sand);
}
.split__bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--bildfokus, 50% 50%); }
.split__bildtext {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  max-width: calc(100% - 2rem);
  padding: .4rem .8rem;
  border-radius: var(--r-1);
  background: rgba(46, 26, 17, .74);
  color: var(--weiss);
  font-size: .8125rem;
  line-height: 1.4;
}
@media (max-width: 859.98px) {
  .split, .split--bild-gross { grid-template-columns: minmax(0, 1fr); }
  .split--umgekehrt > .split__bild { order: 0; }
  .split__bild { aspect-ratio: 4 / 3; }
}

.abschnitt--braun {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--braun);
}
/* Optional: Giebel-Linien aus dem Logo als ruhiges Hintergrundmotiv */
.abschnitt--giebel::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -6%;
  bottom: -18%;
  width: min(62vw, 46rem);
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23ffcc00' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M20 190V90L100 20l80 70v100'/%3E%3Cpath d='M20 90h160M100 20v70M60 90l40-35 40 35'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
}


/* 20  Video mit Zwei-Klick-Vorschau -------------------------------------- */
.video {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-2);
  background: var(--braun-900);
}
.video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-raus);
}
.video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(46, 26, 17, .78) 0%, rgba(46, 26, 17, .25) 55%, rgba(46, 26, 17, .15) 100%);
  pointer-events: none;
}
.video__start {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding-bottom: 2.5rem;
  color: var(--weiss);
  text-decoration: none;
}
.video__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--gelb);
  color: var(--braun);
  transition: transform 450ms var(--ease-raus);
}
.video__play::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(255, 204, 0, .55);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.85);
  transition: opacity var(--dauer-2) var(--ease), transform 600ms var(--ease-raus);
}
.video__play svg { width: 1.6rem; height: 1.6rem; margin-left: 4px; fill: currentColor; }
.video__label { font-weight: 700; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.video__start:hover { color: var(--weiss); }
.video__start:hover .video__play { transform: scale(1.07); }
.video__start:hover .video__play::after { opacity: 1; transform: scale(1); }
@media (hover: hover) { .video:hover .video__poster { transform: scale(1.03); } }
.video__start:focus-visible { outline-offset: -6px; }
.video__hinweis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: .6rem 1rem .75rem;
  color: rgba(255, 255, 255, .88);
  font-size: .75rem;
  line-height: 1.4;
  text-align: center;
}
.video__hinweis a { color: var(--weiss); }
.video iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.video.ist-aktiv::after,
.video.ist-aktiv .video__start,
.video.ist-aktiv .video__hinweis { display: none; }
.video-karte__meta { padding-top: 1rem; }
.video-karte__meta p { margin-top: .4rem; }
@media (max-width: 479.98px) {
  .video__play { width: 3.5rem; height: 3.5rem; }
  .video__label { font-size: .9375rem; }
  .video__start { padding-bottom: 3rem; }
}


/* 21  Mehrschritt-Anfrageformular ---------------------------------------- */
.anfrage {
  padding: clamp(1.25rem, .8rem + 2vw, 2.75rem);
  border: 1px solid var(--linie);
  border-radius: var(--r-3);
  background: var(--weiss);
  box-shadow: var(--schatten-1);
}
.anfrage__fortschritt { margin-bottom: var(--s-6); }
.anfrage__zaehler {
  margin-bottom: .6rem;
  color: var(--text-2);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.anfrage__balken {
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--sand-2);
}
.anfrage__balken > span {
  display: block;
  height: 100%;
  background: var(--gruen);
  transform: scaleX(var(--fortschritt, .3333));
  transform-origin: left center;
  transition: transform 600ms var(--ease-raus);
}
.anfrage__stufen {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin: .7rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: stufe;
  color: var(--text-2);
  font-size: .8125rem;
  font-weight: 600;
}
.anfrage__stufen li { counter-increment: stufe; }
.anfrage__stufen li::before { content: counter(stufe) '. '; }
.anfrage__stufen [aria-current='step'] { color: var(--braun); }
.anfrage__stufen .ist-erledigt { color: var(--gruen-700); }

.anfrage__schritt { min-width: 0; margin: 0; padding: 0; border: 0; }
.anfrage__schritt + .anfrage__schritt { margin-top: var(--s-7); } /* ohne JS: alle Schritte untereinander */
.js .anfrage__schritt + .anfrage__schritt { margin-top: 0; }
.anfrage__schritt[hidden] { display: none; }
.anfrage__schritt.ist-aktiv { animation: schritt-rein 450ms var(--ease-raus) backwards; }
.anfrage__frage {
  float: left;
  width: 100%;
  margin: 0 0 1.25rem;
  padding: 0;
  color: var(--braun);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
}
.anfrage__frage + * { clear: both; }
.anfrage__frage:focus { outline: none; }

/* Vorhaben als Auswahlkacheln (Radio-Buttons) */
.auswahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
  gap: .75rem;
}
.auswahl__kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1rem 1rem 1.1rem;
  border: 1.5px solid var(--linie-2);
  border-radius: var(--r-2);
  background: var(--weiss);
  cursor: pointer;
  transition: border-color var(--dauer-1) var(--ease), background-color var(--dauer-1) var(--ease), transform var(--dauer-2) var(--ease-raus);
}
.auswahl__kachel input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.auswahl__kachel::after {
  content: '';
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid var(--linie-2);
  border-radius: 50%;
  background: var(--weiss) center / .75rem no-repeat;
  transition: background-color var(--dauer-1) var(--ease), border-color var(--dauer-1) var(--ease);
}
.auswahl__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-1);
  background: var(--sand);
  color: var(--braun);
  transition: background-color var(--dauer-1) var(--ease), color var(--dauer-1) var(--ease);
}
.auswahl__titel { color: var(--braun); font-weight: 700; line-height: 1.3; }
.auswahl__info { color: var(--text-2); font-size: .8125rem; line-height: 1.4; }
.auswahl__kachel:hover { border-color: var(--gruen); transform: translateY(-2px); }
/* Zustand "gewählt": .ist-gewaehlt setzt lepski.js, :has() greift ohne JS */
.auswahl__kachel.ist-gewaehlt {
  border-color: var(--gruen-700);
  background: var(--gruen-50);
  box-shadow: inset 0 0 0 1px var(--gruen-700);
}
.auswahl__kachel.ist-gewaehlt .auswahl__icon { background: var(--gruen-700); color: var(--weiss); }
.auswahl__kachel.ist-gewaehlt::after {
  border-color: var(--gruen-700);
  background-color: var(--gruen-700);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E");
}
.auswahl__kachel:has(input:checked) {
  border-color: var(--gruen-700);
  background: var(--gruen-50);
  box-shadow: inset 0 0 0 1px var(--gruen-700);
}
.auswahl__kachel:has(input:focus-visible) { outline: 3px solid var(--gruen-700); outline-offset: 3px; }
.auswahl__kachel:has(input[aria-invalid='true']) { border-color: var(--fehler); }
/* Kompakt (ab ca. 7 Kacheln, z. B. /kontakt mit allen Vorhaben): Symbol links,
   Titel und Info rechts – halbiert die Höhe der Auswahl. */
.auswahl--kompakt {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: .5rem;
}
.auswahl--kompakt .auswahl__kachel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: .75rem;
  row-gap: .1rem;
  padding: .7rem 2.4rem .7rem .75rem;
}
.auswahl--kompakt .auswahl__icon { grid-row: span 2; width: 2.25rem; height: 2.25rem; }
.auswahl--kompakt .auswahl__titel { align-self: end; }
.auswahl--kompakt .auswahl__titel:last-child { grid-row: span 2; align-self: center; }
.auswahl--kompakt .auswahl__info { grid-column: 2; align-self: start; }
.auswahl--kompakt .auswahl__kachel::after { top: 50%; margin-top: -.625rem; }
@media (max-width: 559.98px) {
  .auswahl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .auswahl__kachel { gap: .4rem; padding: .75rem .75rem .85rem; }
  .auswahl__icon { width: 2.1rem; height: 2.1rem; }
  .auswahl__titel { font-size: .9375rem; }
  .auswahl__kachel::after { top: .6rem; right: .6rem; width: 1.1rem; height: 1.1rem; }
  .auswahl--kompakt { grid-template-columns: minmax(0, 1fr); }   /* Handy: eine Spalte, Zeilen statt Kacheln */
  .auswahl--kompakt .auswahl__kachel { padding: .6rem 2.4rem .6rem .65rem; }
  .auswahl--kompakt .auswahl__icon { width: 2rem; height: 2rem; }
  .auswahl--kompakt .auswahl__kachel::after { top: 50%; margin-top: -.55rem; }
}

/* Felder */
.felder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.felder > .feld--breit { grid-column: 1 / -1; }
* + .felder, .felder + *, .feld + .feld { margin-top: 1.25rem; }
.felder > .feld + .feld { margin-top: 0; }
@media (max-width: 599.98px) { .felder { grid-template-columns: minmax(0, 1fr); } }

.feld { display: grid; gap: .4rem; align-content: start; }
.feld__label { color: var(--braun); font-size: .9375rem; font-weight: 700; }
.feld__label .optional { color: var(--text-2); font-weight: 400; }
.feld__hilfe { color: var(--text-2); font-size: .8125rem; line-height: 1.45; }
.feld__eingabe {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .9rem;
  border: 1.5px solid var(--linie-2);
  border-radius: var(--r-1);
  background: var(--weiss);
  color: var(--text);
  font-size: 1rem; /* >= 16px verhindert Zoom auf iOS */
  line-height: 1.4;
  transition: border-color var(--dauer-1) var(--ease), box-shadow var(--dauer-1) var(--ease);
}
textarea.feld__eingabe { min-height: 7.5rem; resize: vertical; }
select.feld__eingabe {
  padding-right: 2.5rem;
  -webkit-appearance: none;
  appearance: none;
  background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f2c1d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .85rem center / 1rem no-repeat;
}
.feld__eingabe::placeholder { color: #8f8589; }
.feld__eingabe:hover { border-color: var(--text-2); }
.feld__eingabe:focus {
  outline: none;
  border-color: var(--gruen-700);
  box-shadow: 0 0 0 3px rgba(110, 168, 38, .28);
}
.feld__eingabe[aria-invalid='true'] {
  border-color: var(--fehler);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}
input[type='file'].feld__eingabe { padding: .45rem; }
input[type='file'].feld__eingabe::file-selector-button {
  margin-right: .8rem;
  padding: .5rem .9rem;
  border: 0;
  border-radius: var(--r-1);
  background: var(--sand);
  color: var(--braun);
  font-weight: 700;
  cursor: pointer;
}
.feld__fehler {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--fehler);
  font-size: .8125rem;
  font-weight: 600;
}
.feld__fehler[hidden] { display: none; }
.feld__fehler::before {
  content: '!';
  display: grid;
  place-items: center;
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--fehler);
  color: var(--weiss);
  font-size: .6875rem;
  font-weight: 700;
}

/* Kleine Optionsgruppe als Pillen (z. B. Grundstück ja/nein) */
.optionen { display: flex; flex-wrap: wrap; gap: .5rem; }
.option { position: relative; }
.option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.option span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .45rem 1.05rem;
  border: 1.5px solid var(--linie-2);
  border-radius: var(--r-rund);
  font-weight: 600;
  font-size: .9375rem;
  transition: background-color var(--dauer-1) var(--ease), border-color var(--dauer-1) var(--ease), color var(--dauer-1) var(--ease);
}
.option input:hover + span { border-color: var(--gruen); }
.option input:checked + span { border-color: var(--braun); background: var(--braun); color: var(--weiss); }
.option input:focus-visible + span { outline: 3px solid var(--gruen-700); outline-offset: 3px; }

.feld--haken { grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; align-items: start; }
.feld--haken input {
  width: 1.3rem;
  height: 1.3rem;
  margin: .15rem 0 0;
  accent-color: var(--gruen-700);
}
.feld--haken label { font-size: var(--fs-klein); }
.feld--haken .feld__fehler { grid-column: 2; }

.anfrage__navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--linie);
}
.anfrage__navigation .btn:only-child,
.anfrage__navigation .btn--primaer { margin-left: auto; }
.anfrage__zusage {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-2);
  font-size: .8125rem;
}
.anfrage__zusage .icon { color: var(--gruen-700); }
html:not(.js) :is([data-weiter], [data-zurueck], .anfrage__fortschritt) { display: none; }

.anfrage__erfolg { padding: var(--s-5) 0; text-align: center; }
.anfrage__erfolg[hidden] { display: none; }
.anfrage__erfolg:focus { outline: none; }
.anfrage__erfolg > * + * { margin-top: var(--s-4); }
.anfrage__erfolg p { max-width: 34rem; margin-inline: auto; }
.erfolg-haken { width: 4.5rem; height: 4.5rem; margin-inline: auto; color: var(--gruen-700); }
.erfolg-haken circle { stroke-dasharray: 151; stroke-dashoffset: 0; }
.erfolg-haken path { stroke-dasharray: 30; stroke-dashoffset: 0; }
.anfrage__erfolg:not([hidden]) .erfolg-haken circle { animation: strich-zeichnen 700ms var(--ease-raus) backwards; --strich: 151; }
.anfrage__erfolg:not([hidden]) .erfolg-haken path { animation: strich-zeichnen 500ms var(--ease-raus) 450ms backwards; --strich: 30; }
.anfrage__vorschau {
  display: inline-block;
  padding: .75rem 1rem;
  border: 1.5px dashed var(--gelb-rand);
  border-radius: var(--r-2);
  background: var(--gelb-100);
  color: var(--platzhalter);
  font-size: var(--fs-klein);
  font-weight: 600;
}
/* Spam-Falle (Honigtopf): für Menschen unsichtbar, für Bots ein normales
   Feld. Bewusst nicht display:none – manche Bots überspringen solche Felder. */
.anfrage__falle {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Hinweis ohne JavaScript (steht in <noscript> oben im Formular) */
.anfrage__noscript { display: block; margin-bottom: var(--s-5); }


/* 22  CTA-Band, Kontaktkarte --------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: var(--s-6) var(--s-7);
  align-items: center;
  overflow: hidden;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
  border-radius: var(--r-3);
  background: var(--gruen-700);
  color: var(--weiss);
}
.cta-band :is(h2, h3, .h2, .h3) { color: var(--weiss); }
.cta-band p { color: rgba(255, 255, 255, .92); }
/* Nicht in .btn-reihe: dort rückte der Abstand den zweiten Knopf 6 px nach unten */
.cta-band > div:not(.btn-reihe) > * + * { margin-top: var(--s-3); }
.cta-band .btn-reihe { margin-top: 0; }
.cta-band--braun { background: var(--braun); }
.cta-band::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -4rem;
  top: -4rem;
  width: 16rem;
  height: 16rem;
  border: 3px solid rgba(255, 204, 0, .22);
  border-radius: 50%;
}
@media (max-width: 859.98px) {
  .cta-band { grid-template-columns: minmax(0, 1fr); }
}

.kontaktkarte {
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  border: 1px solid var(--linie);
  border-radius: var(--r-3);
  background: var(--weiss);
}
.kontaktkarte__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-6);
  margin: 0;
}
.kontaktkarte__raster dt {
  color: var(--gruen-700);
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kontaktkarte__raster dd { margin-top: .5rem; line-height: 1.6; }
.kontaktkarte__raster dd a { color: var(--text); font-weight: 600; }
.kontaktkarte__raster dd a:hover { color: var(--gruen-800); }
@media (max-width: 519.98px) { .kontaktkarte__raster { grid-template-columns: minmax(0, 1fr); } }


/* 23  Mobile Aktionsleiste ----------------------------------------------- */
.aktionsleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-leiste);
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: .5rem;
  padding: .6rem var(--rand) calc(.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -10px 26px -20px rgba(46, 26, 17, .5);
  transition: transform var(--dauer-2) var(--ease-raus);
}
.aktionsleiste .btn { min-height: 3rem; padding-inline: .75rem; }
@media (max-width: 899.98px) {
  .aktionsleiste { display: grid; }
  /* Platz, damit die Leiste nichts im Fuß verdeckt */
  .fuss { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}
.menue-offen .aktionsleiste,
.aktionsleiste.ist-versteckt { transform: translateY(110%); }
/* Beim Tippen in Formularfeldern (Bildschirmtastatur) wegschieben */
body:has(:is(input:not([type='range'], [type='radio'], [type='checkbox']), textarea, select):focus) .aktionsleiste { transform: translateY(110%); }


/* 24  Artikel (Ratgeber) ------------------------------------------------- */
.artikel__kopf {
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) calc(var(--s-8) + clamp(2rem, 1.5rem + 2vw, 3.5rem));
  background: var(--sand);
}
.artikel__kopf .brotkrumen + * { margin-top: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); }
.artikel__kopf .h1 { max-width: 22ch; }
.artikel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-size: .875rem;
}
.artikel__meta li { display: inline-flex; align-items: center; gap: .4rem; }
.artikel__meta .icon { color: var(--gruen-700); }
.artikel__titelbild {
  margin-top: calc(-1 * var(--s-8));
  overflow: hidden;
  aspect-ratio: 21 / 9;
  border-radius: var(--r-3);
  background: var(--sand-2);
}
.artikel__titelbild img { width: 100%; height: 100%; object-fit: cover; }
.artikel__raster {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, var(--lesebreite));
  justify-content: center;
  gap: var(--s-6) clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: var(--abschnitt-eng) var(--abschnitt);
}
.inhaltsverzeichnis {
  position: sticky;
  top: calc(var(--kopf-h-kompakt) + 1.5rem);
  align-self: start;
  font-size: .9375rem;
}
.inhaltsverzeichnis summary {
  color: var(--braun);
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--sperrung);
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.inhaltsverzeichnis summary::-webkit-details-marker { display: none; }
.inhaltsverzeichnis ol {
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--linie);
}
.inhaltsverzeichnis a {
  display: block;
  margin-left: -2px;
  padding: .4rem 0 .4rem 1rem;
  border-left: 2px solid transparent;
  color: var(--text-2);
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--dauer-1) var(--ease), border-color var(--dauer-2) var(--ease);
}
.inhaltsverzeichnis a:hover { color: var(--braun); }
.inhaltsverzeichnis a[aria-current='true'] { border-left-color: var(--gruen); color: var(--braun); font-weight: 600; }
@media (min-width: 960px) {
  .inhaltsverzeichnis summary { pointer-events: none; }
}
@media (max-width: 959.98px) {
  .artikel__raster { grid-template-columns: minmax(0, 1fr); }
  .inhaltsverzeichnis {
    position: static;
    padding: 1rem 1.2rem;
    border: 1px solid var(--linie);
    border-radius: var(--r-2);
  }
  .inhaltsverzeichnis summary { display: flex; justify-content: space-between; align-items: center; }
  .inhaltsverzeichnis summary::after { content: '+'; font-size: 1.25rem; line-height: 1; }
  .inhaltsverzeichnis details[open] summary::after { content: '–'; }
  .artikel__titelbild { aspect-ratio: 16 / 9; }
}

.fliesstext {
  max-width: var(--lesebreite);
  font-size: 1.125rem;
  line-height: 1.75;
}
.fliesstext > * + * { margin-top: 1.1em; }
.fliesstext h2 {
  margin-top: 2.2em;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.2;
  scroll-margin-top: calc(var(--kopf-h-kompakt) + 1.5rem);
}
.fliesstext h3 { margin-top: 1.8em; font-size: 1.3rem; line-height: 1.3; }
.fliesstext :is(h2, h3) + * { margin-top: .7em; }
.fliesstext :is(ul, ol) { padding-left: 1.3em; }
.fliesstext li + li { margin-top: .4em; }
.fliesstext li::marker { color: var(--gruen-700); }
.fliesstext a:not([class]) { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
/* :not([class]) wie die globale Regel in 2: .btn, .video__start und .textlink im
   Fließtext bekommen sonst eine (zweite) Unterstreichung (vorher teile/ratgeber.css) */
.fliesstext blockquote {
  padding-left: 1.25rem;
  border-left: 3px solid var(--gelb);
  color: var(--braun);
  font-size: 1.25rem;
  line-height: 1.5;
}
.fliesstext figure img { border-radius: var(--r-2); }
.fliesstext figcaption { margin-top: .6rem; color: var(--text-2); font-size: .875rem; line-height: 1.5; }
.fliesstext > :is(.infokarte, .tabelle-rahmen, figure, .cta-band) { margin-block: 2em; }

.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
}
.tabelle { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.tabelle caption { padding: .75rem 1rem; color: var(--text-2); font-size: .8125rem; text-align: left; caption-side: bottom; }
.tabelle :is(th, td) { padding: .75rem 1rem; border-top: 1px solid var(--linie); text-align: left; vertical-align: top; }
.tabelle thead th {
  border-top: 0;
  background: var(--sand);
  color: var(--braun);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tabelle .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.lesefortschritt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-oben);
  height: 3px;
  background: var(--gruen);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.autorbox {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1.25rem;
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
}
.autorbox__bild { width: 4.5rem; height: 4.5rem; overflow: hidden; border-radius: 50%; background: var(--sand); }
.autorbox__bild .bildplatz { min-height: 0; padding: .25rem; }
.autorbox__bild .bildplatz::before { inset: 4px; border-width: 1.5px; border-radius: 50%; }
.autorbox__bild .bildplatz span { gap: .1rem; padding: 0; background: none; font-size: .625rem; }
.autorbox__bild .bildplatz span::before { width: 1.1rem; height: 1.1rem; }
.autorbox__name { color: var(--braun); font-weight: 700; }
.autorbox__text { color: var(--text-2); font-size: .875rem; }


/* 25  Karriere – Stellenkarte -------------------------------------------- */
.stellen { display: grid; gap: var(--luecke); }
.stelle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2rem;
  align-items: center;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--linie);
  border-radius: var(--r-3);
  background: var(--weiss);
  transition: border-color var(--dauer-2) var(--ease), box-shadow var(--dauer-2) var(--ease);
}
.stelle:hover { border-color: var(--gruen); box-shadow: var(--schatten-1); }
.marken { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.marke {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .65rem;
  border-radius: var(--r-rund);
  background: var(--sand);
  color: var(--braun);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
}
.marke--gruen { background: var(--gruen-100); color: var(--gruen-800); }
.stelle__titel { margin-top: .6rem; font-size: var(--fs-h3); }
.stelle__text { margin-top: .4rem; color: var(--text-2); font-size: var(--fs-klein); }
.stelle__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; justify-content: flex-end; }
/* Ab 760 px Aktionen untereinander: Stellentitel stehen als Ankertext im Link
   (seo-technik.md 5.1/5.2); nebeneinander würde die Spalte so breit, dass der
   Kartentext zwischen 760 und ~1100 px auf wenige Zeichen schrumpft.
   Unter 760 px stapelt die Karte ohnehin (vorher teile/karriere.css). */
@media (min-width: 760px) {
  .stelle__aktionen { flex-direction: column; align-items: flex-end; }
}
.stelle__details { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--linie); }
.stelle__details > summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--gruen-700);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.stelle__details > summary::-webkit-details-marker { display: none; }
.stelle__details > summary::after {
  content: '';
  width: .5rem;
  height: .5rem;
  margin-top: -.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dauer-2) var(--ease-raus);
}
.stelle__details[open]:not(.ist-schliessend) > summary::after { transform: rotate(225deg); margin-top: .2rem; }
.stelle__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-6);
  padding: 1.25rem 0 .25rem;
}
.stelle__raster h4 { margin-bottom: .6rem; font-size: 1rem; }
.stelle__raster .haekchen { font-size: var(--fs-klein); gap: .4rem; }
@media (max-width: 759.98px) {
  .stelle { grid-template-columns: minmax(0, 1fr); }
  .stelle__aktionen { justify-content: flex-start; }
  .stelle__raster { grid-template-columns: minmax(0, 1fr); }
}


/* 26  Fuß ---------------------------------------------------------------- */
.fuss {
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  background: var(--braun-900);
  color: rgba(255, 255, 255, .78);
  font-size: .9375rem;
}
.fuss a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; text-underline-offset: .2em; }
.fuss__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7) clamp(1.5rem, 1rem + 2vw, 3.5rem);
}
.fuss__name { color: var(--weiss); font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.fuss__claim { margin-top: .3rem; color: var(--gruen-hell); font-weight: 600; }
.fuss__text { max-width: 22rem; margin-top: 1rem; color: rgba(255, 255, 255, .72); }
.fuss__titel {
  margin-bottom: 1rem;
  color: var(--gelb);
  font-size: var(--fs-mini);
  font-weight: 700;
  letter-spacing: var(--sperrung);
  text-transform: uppercase;
}
.fuss__liste { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.fuss__nap address { line-height: 1.7; }
.fuss__nap dl { display: grid; gap: .15rem; margin-top: .9rem; }
.fuss__nap dt { color: rgba(255, 255, 255, .6); font-size: .8125rem; }
.fuss__nap dd + dt { margin-top: .5rem; }
.sozial { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.sozial a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  transition: background-color var(--dauer-1) var(--ease), color var(--dauer-1) var(--ease), border-color var(--dauer-1) var(--ease), transform var(--dauer-2) var(--ease-raus);
}
.sozial a:hover { border-color: var(--gelb); background: var(--gelb); color: var(--braun); transform: translateY(-2px); text-decoration: none; }
.sozial .icon { width: 1.2rem; height: 1.2rem; }
.fuss__siegel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.75rem;
  margin: var(--s-7) 0 0;
  padding: var(--s-5) 0;
  list-style: none;
  border-top: 1px solid var(--linie-dunkel);
  font-size: .8125rem;
}
.fuss__siegel li { display: inline-flex; align-items: center; gap: .45rem; }
.fuss__siegel .icon { width: 1rem; height: 1rem; color: var(--gruen-hell); }
.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-block: var(--s-5);
  border-top: 1px solid var(--linie-dunkel);
  color: rgba(255, 255, 255, .6);
  font-size: .8125rem;
}
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (max-width: 999.98px) {
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559.98px) {
  .fuss__raster { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}


/* 27  Bewegung beim Scrollen (Reveal) ------------------------------------
   Ablauf: lepski.js misst zuerst, was schon im Bild ist (bekommt
   .ist-sichtbar.ist-sofort ohne Animation), setzt dann html.js und
   beobachtet den Rest (threshold 0 – auch sehr hohe Container lösen aus;
   Sicherheitsnetz nach 2,5 s, bei Sprüngen und vor dem Drucken).
   Ohne JS, bei reduzierter Bewegung, ?bewegung=aus und in automatisierten
   Browsern greift nichts davon – alles bleibt sichtbar.
   Animationen statt Transitions: Hover-Übergänge der Elemente bleiben
   unberührt; "backwards" hält nur den Startzustand während der Verzögerung.

   data-reveal            von unten einblenden (Standard)
   data-reveal="links"    von links   | "rechts" von rechts | "zoom" leicht wachsen
   data-reveal="bild"     Bild wird von unten "aufgezogen" (clip-path)
   data-reveal="gruppe"   direkte Kinder nacheinander (Stagger, --i per JS)
   style="--verzoegerung: 120ms" optional pro Element                        */
.js [data-reveal]:not(.ist-sichtbar):not([data-reveal='gruppe']),
.js [data-reveal='gruppe']:not(.ist-sichtbar) > * { opacity: 0; }

.js [data-reveal].ist-sichtbar { animation: reveal-hoch 900ms var(--ease-raus) var(--verzoegerung, 0ms) backwards; }
.js [data-reveal='links'].ist-sichtbar { animation-name: reveal-links; }
.js [data-reveal='rechts'].ist-sichtbar { animation-name: reveal-rechts; }
.js [data-reveal='zoom'].ist-sichtbar { animation-name: reveal-zoom; }
.js [data-reveal='bild'].ist-sichtbar { animation: reveal-bild 1200ms var(--ease-raus) var(--verzoegerung, 0ms) backwards; }
.js [data-reveal='bild'].ist-sichtbar img { animation: reveal-bild-zoom 1600ms var(--ease-raus) var(--verzoegerung, 0ms) backwards; }
.js [data-reveal='gruppe'].ist-sichtbar { animation: none; }
.js [data-reveal='gruppe'].ist-sichtbar > * {
  animation: reveal-hoch 800ms var(--ease-raus) backwards;
  animation-delay: calc(var(--verzoegerung, 0ms) + var(--i, 0) * 90ms);
}

/* Linien, die wachsen */
.js .ist-sichtbar .eyebrow::before,
.js .eyebrow.ist-sichtbar::before { animation: linie-x 900ms var(--ease-raus) 250ms backwards; }
.js .ist-sichtbar .kennzahl::after,
.js .kennzahl.ist-sichtbar::after { animation: linie-x 1000ms var(--ease-raus) calc(300ms + var(--i, 0) * 90ms) backwards; }
.js .ablauf.ist-sichtbar .ablauf__schritt::before { animation: linie-x 700ms var(--ease-rein-raus) calc(350ms + var(--i, 0) * 160ms) backwards; }
.js .ablauf.ist-sichtbar .ablauf__nr { animation: nr-auf 600ms var(--ease-raus) calc(150ms + var(--i, 0) * 160ms) backwards; }
@media (max-width: 999.98px) {
  .js .ablauf.ist-sichtbar .ablauf__schritt::before { animation-name: linie-y; }
}

/* Was beim Laden schon zu sehen war, springt nicht noch einmal */
.js .ist-sofort,
.js .ist-sofort > *,
.js .ist-sofort img,
.js .ist-sofort .eyebrow::before,
.js .ist-sofort .kennzahl::after,
.js .ist-sofort .ablauf__schritt::before,
.js .ist-sofort .ablauf__nr,
.js .eyebrow.ist-sofort::before { animation: none !important; }

@keyframes auftauchen { from { opacity: 0; transform: translateY(18px); } }
@keyframes reveal-hoch { from { opacity: 0; transform: translateY(28px); } }
@keyframes reveal-links { from { opacity: 0; transform: translateX(-36px); } }
@keyframes reveal-rechts { from { opacity: 0; transform: translateX(36px); } }
@keyframes reveal-zoom { from { opacity: 0; transform: scale(.95); } }
@keyframes reveal-bild { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes reveal-bild-zoom { from { transform: scale(1.14); } }
@keyframes linie-x { from { transform: scaleX(0); } }
@keyframes linie-y { from { transform: scaleY(0); } }
@keyframes nr-auf { from { opacity: 0; transform: scale(.55); } }
@keyframes hero-zoom { from { transform: scale(1.08); } }
@keyframes markierung { from { background-size: 0 .09em; } }
@keyframes schritt-rein { from { opacity: 0; transform: translateX(24px); } }
@keyframes strich-zeichnen { from { stroke-dashoffset: var(--strich, 100); } }


/* 28  Reduzierte Bewegung, Druck ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal]:not(.ist-sichtbar),
  .js [data-reveal='gruppe'] > * { opacity: 1 !important; }
  .hero__medien { transform: none !important; }
}
/* Gleiches Verhalten per Schalter: <html data-bewegung="aus"> */
html[data-bewegung='aus'] { scroll-behavior: auto; }
html[data-bewegung='aus'] *,
html[data-bewegung='aus'] *::before,
html[data-bewegung='aus'] *::after {
  animation-duration: .01ms !important;
  animation-delay: 0s !important;
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
}
html[data-bewegung='aus'] [data-reveal],
html[data-bewegung='aus'] [data-reveal='gruppe'] > * { opacity: 1 !important; }

@media print {
  .kopf, .aktionsleiste, .entwurf, .video__start, .lesefortschritt, .menue-schalter { display: none !important; }
  .js [data-reveal], .js [data-reveal='gruppe'] > * { opacity: 1 !important; animation: none !important; }
  .hero { min-height: 0; color: var(--text); background: none; }
  .hero::before, .hero__medien { display: none; }
  .hero__titel, .hero__unterzeile { color: var(--braun); }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: .8em; }
}


/* 29  Bauphasen-Galerie (/anbau-aufstockung) ------------------------------
   Bauabschnitte eines Projekts in Bildern (Rohbau → Montage → fertig), solange
   kein Vorher-Nachher-Paar aus gleichem Blickwinkel vorliegt (bilder.md). Das
   Design-System hatte keine Galerie (00-uebersicht.md 4.4).
   PFLICHT:  ol.bauphasen[data-reveal="gruppe"][tabindex="0"][aria-label]
               > li.bauphase
                 > figure.bauphase__bild > picture > img (width/height, loading="lazy")
                   (fehlendes Foto: figure.bauphase__bild > div.bildplatz > span)
                 + p.bauphase__schritt   („Schritt 1 · Montage“)
                 + h3.bauphase__titel
                 + p.bauphase__text
   OPTIONAL: style="--anzahl: 4" am ol (Spalten ab 760 px, Standard 3);
             style="--bildfokus: x% y%" am img.
   VERHALTEN: Handy – waagerechte Leiste zum Wischen (Scroll-Snap, die nächste
             Karte lugt hervor; tabindex="0" für Tastatur). Ab 760 px Raster.
             Einblenden über data-reveal="gruppe" (lepski.js setzt --i); die
             Linie im Schritt-Label wächst nacheinander wie beim Ablauf.
             Hover-Zoom 5 % nur bei (hover: hover). Nur transform/opacity. */
.bauphasen {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 21rem);
  gap: var(--luecke);
  /* nur seitlich: bis an den Bildschirmrand ziehen. Abstand nach oben kommt
     vom Abschnittskopf bzw. vom Helfer .abstand-oben-gross (nicht überschreiben) */
  margin-inline: calc(-1 * var(--rand));
  padding: .25rem var(--rand) var(--s-4);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rand);
  scrollbar-width: thin;
  scrollbar-color: var(--linie-2) transparent;
}

.bauphase {
  min-width: 0;
  scroll-snap-align: start;
}

.bauphase__bild {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-2);
  background: var(--sand);
}
.abschnitt--sand .bauphase__bild { background: var(--sand-2); }
.bauphase__bild > picture { width: 100%; height: 100%; }
.bauphase__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bildfokus, 50% 50%);
  transition: transform 900ms var(--ease-raus);
}

/* Schritt-Label mit Verbindungslinie zum nächsten Bild */
.bauphase__schritt {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.1rem;
  color: var(--gruen-700);
  font-size: var(--fs-mini);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bauphase__schritt::after {
  content: '';
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gruen), var(--linie-2));
  transform-origin: left center;
}
.bauphase:last-child .bauphase__schritt::after {
  background: linear-gradient(90deg, var(--gruen), transparent);
}

.bauphase__titel {
  margin-top: .4rem;
  font-size: var(--fs-h4);
  line-height: 1.3;
}
.bauphase__text {
  margin-top: .35rem;
  color: var(--text-2);
  font-size: var(--fs-klein);
}

/* Ab 760 px: Raster statt Wischleiste */
@media (min-width: 760px) {
  .bauphasen {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--anzahl, 3), minmax(0, 1fr));
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
}

@media (hover: hover) {
  .bauphase:hover .bauphase__bild img { transform: scale(1.05); }
}

/* Linien wachsen nacheinander (Keyframes linie-x aus 27) */
.js .bauphasen.ist-sichtbar .bauphase__schritt::after {
  animation: linie-x 900ms var(--ease-raus) calc(300ms + var(--i, 0) * 140ms) backwards;
}
.js .ist-sofort .bauphase__schritt::after { animation: none !important; }


/* 30  Download-Liste (/fuer-planer#nachweise) -----------------------------
   Nachweise, Zertifikate, Datenblätter zum Herunterladen (00-uebersicht.md 4.4).
   Die Siegelleiste (12) zeigt, WAS zertifiziert ist; die Liste liefert das Dokument.
   PFLICHT:  ul.downloads[data-reveal="gruppe"] > li
               > a.download[href="/assets/…/datei.pdf"][download]   (Datei liegt vor)
                 oder div.download.download--fehlt                  (Datei fehlt noch)
                 > span.download__icon > svg.icon[aria-hidden]
                 + span.download__text > span.download__titel + span.download__info
                 + span.download__aktion   (Link: „PDF laden“ + Pfeil;
                                            fehlt: span.platzhalter „Datei folgt – …“)
   INFO-ZEILE: Format · Größe · Stand, z. B. „PDF · 240 KB · Stand 03/2026“.
             Größe und Stand nie schätzen – bis zur Lieferung Platzhalter.
   VERHALTEN: Handy – Aktion rutscht unter den Titel. Hover (nur hover: hover):
             Symbol hebt sich und wird grün, Pfeil rückt 3 px (wie .textlink). */
.downloads {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie-2);
}
.downloads > li { border-bottom: 1px solid var(--linie-2); }

.download {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .35rem 1.1rem;
  align-items: center;
  padding: 1.1rem 0;
  color: inherit;
  text-decoration: none;
}

.download__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-2);
  background: var(--gruen-100);
  color: var(--gruen-700);
  transition: transform 450ms var(--ease-raus), background-color var(--dauer-2) var(--ease), color var(--dauer-2) var(--ease);
}
.download__icon .icon { width: 1.4rem; height: 1.4rem; }

.download__text { display: grid; gap: .2rem; min-width: 0; }
.download__titel {
  color: var(--braun);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}
.download__info {
  color: var(--text-2);
  font-size: .875rem;
  line-height: 1.45;
}

.download__aktion {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  justify-self: end;
  color: var(--gruen-700);
  font-size: .9375rem;
  font-weight: 700;
  white-space: nowrap;
}
.download__aktion .icon--pfeil { transition: transform var(--dauer-2) var(--ease-raus); }
/* Platzhalter darf umbrechen (lange Hinweise) */
.download--fehlt .download__aktion { white-space: normal; }

a.download:focus-visible { outline-offset: 4px; }

@media (hover: hover) {
  a.download:hover .download__icon,
  .download--fehlt:hover .download__icon { transform: translateY(-3px) rotate(-4deg); }
  a.download:hover .download__icon { background: var(--gruen); color: var(--weiss); }
  a.download:hover .download__titel { color: var(--gruen-800); }
  a.download:hover .download__aktion .icon--pfeil { transform: translateX(3px); }
}

/* Handy: Aktion unter den Text, bündig mit dem Titel */
@media (max-width: 559.98px) {
  .download { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .download__aktion { grid-column: 2; justify-self: start; margin-top: .35rem; }
}


/* 31  Zeitleiste Firmengeschichte (/ueber-uns) ----------------------------
   Jahreszahlen mit einem oder mehreren Ereignissen und Bildern – bewusst nicht
   ol.ablauf (13, Prozessschritte mit Nummern). 00-uebersicht.md 4.4.
   PFLICHT:  ol.zeitleiste[aria-label]
               > li.zeitleiste__eintrag[data-reveal]
                 > p.zeitleiste__jahr[aria-hidden="true"] > time[datetime]
                 + div.zeitleiste__inhalt
                   > h3.zeitleiste__titel > span.sr-only („2006: “) + Titel
                   + p.zeitleiste__text
             (Jahr steckt unsichtbar in der Überschrift, damit Screenreader es in
              der Überschriften-Liste mitlesen; die sichtbare Zahl ist aria-hidden.)
   OPTIONAL: ul.zeitleiste__mehr > li (weitere Ereignisse im selben Jahr)
             figure.zeitleiste__bild > picture > img (width/height, loading="lazy")
             p > a.textlink (Verweis, z. B. auf eine Referenz)
             li.zeitleiste__eintrag--hervor (Gründung, heute: gelber Punkt)
             .zeitleiste__kopf am Begleittext: klebt ab 860 px (position: sticky).
   LAYOUT:   Handy: Achse links, Jahreszahl über dem Titel. Ab 1200 px Jahreszahl
             links neben der Achse.
   BEWEGUNG: Mit .ist-sichtbar springt der Punkt auf (nr-auf) und die Linie wächst
             (linie-y). Was beim Laden sichtbar ist (.ist-sofort), bleibt ruhig. */
.zeitleiste {
  /* x-Position der Achse (Mitte von Punkt und Linie) */
  --zl-achse: .875rem;
  --zl-punkt: 1.25rem;
  --zl-punkt-oben: .5rem;   /* Punkt mittig zur ersten Zeile der Jahreszahl */
  margin: 0;
  padding: 0;
  list-style: none;
}

.zeitleiste__eintrag {
  position: relative;
  padding: 0 0 var(--s-7) calc(var(--zl-achse) + 1.9rem);
}
.zeitleiste__eintrag:last-child { padding-bottom: 0; }

/* Punkt auf der Achse */
.zeitleiste__eintrag::after {
  content: '';
  position: absolute;
  top: var(--zl-punkt-oben);
  left: calc(var(--zl-achse) - var(--zl-punkt) / 2);
  width: var(--zl-punkt);
  height: var(--zl-punkt);
  border: 3px solid var(--gruen);
  border-radius: 50%;
  background: var(--weiss);
  transition: background-color var(--dauer-2) var(--ease), transform 450ms var(--ease-raus);
}
.abschnitt--sand .zeitleiste__eintrag::after { background: var(--sand); }

/* Linie zum nächsten Eintrag */
.zeitleiste__eintrag::before {
  content: '';
  position: absolute;
  top: calc(var(--zl-punkt-oben) + var(--zl-punkt) + .35rem);
  bottom: .15rem;
  left: calc(var(--zl-achse) - 1px);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--gruen), var(--linie-2));
  transform-origin: top center;
}
.zeitleiste__eintrag:last-child::before { display: none; }

/* Hervorgehoben: Gründung, heute */
.zeitleiste__eintrag--hervor::after {
  border-color: var(--gelb);
  background: var(--gelb);
  box-shadow: 0 0 0 5px rgba(255, 204, 0, .22);
}

.zeitleiste__jahr {
  color: var(--braun);
  font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.zeitleiste__eintrag--hervor .zeitleiste__jahr { color: var(--gruen-700); }

.zeitleiste__titel {
  margin-top: .35rem;
  font-size: var(--fs-h4);
  line-height: 1.3;
}
.zeitleiste__text {
  margin-top: .4rem;
  font-size: var(--fs-klein);
}

/* Weitere Ereignisse im selben Jahr */
.zeitleiste__mehr {
  display: grid;
  gap: .35rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-size: var(--fs-klein);
  line-height: 1.5;
}
.zeitleiste__mehr li { position: relative; padding-left: 1.1rem; }
.zeitleiste__mehr li::before {
  content: '';
  position: absolute;
  top: .72em;
  left: 0;
  width: .5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gruen);
}

.zeitleiste__inhalt > p:not([class]) { margin-top: .75rem; font-size: var(--fs-klein); }

.zeitleiste__bild {
  max-width: 26rem;
  margin-top: var(--s-4);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-2);
  background: var(--sand-2);
}
.zeitleiste__bild > picture { width: 100%; height: 100%; }
.zeitleiste__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bildfokus, 50% 50%);
  transition: transform 900ms var(--ease-raus);
}

@media (hover: hover) {
  .zeitleiste__eintrag:hover::after { background: var(--gruen); transform: scale(1.12); }
  .zeitleiste__eintrag--hervor:hover::after { background: var(--gelb); }
  .zeitleiste__eintrag:hover .zeitleiste__bild img { transform: scale(1.04); }
}

/* Begleittext neben der Liste: klebt ab 860 px (dann steht .split zweispaltig) */
@media (min-width: 860px) {
  .zeitleiste__kopf {
    position: sticky;
    top: calc(var(--kopf-h-kompakt) + var(--s-6));
  }
}

/* Breite Spalte: Jahreszahl links neben der Achse */
@media (min-width: 1200px) {
  .zeitleiste { --zl-achse: 7.25rem; --zl-punkt-oben: .55rem; }
  .zeitleiste__jahr {
    position: absolute;
    top: 0;
    left: 0;
    width: 5.75rem;
    text-align: right;
  }
  .zeitleiste__titel { margin-top: .45rem; }
}

/* Bewegung: Punkt springt auf, Linie wächst (Keyframes nr-auf, linie-y aus 27) */
.js .zeitleiste__eintrag.ist-sichtbar::after {
  animation: nr-auf 600ms var(--ease-raus) 180ms backwards;
}
.js .zeitleiste__eintrag.ist-sichtbar::before {
  animation: linie-y 1100ms var(--ease-rein-raus) 380ms backwards;
}
.js .zeitleiste__eintrag.ist-sofort::after,
.js .zeitleiste__eintrag.ist-sofort::before { animation: none !important; }


/* 32  Breitbild (/ueber-uns) ----------------------------------------------
   Ein Motiv, das auf allen Geräten ganz zu sehen sein muss (Gruppenfoto,
   Panorama). .split__bild (19) erzwingt unter 860 px 4 : 3 und würde links und
   rechts Leute abschneiden.
   PFLICHT:  figure.breitbild[data-reveal="bild"]
               > picture.breitbild__medien > img (width/height, loading="lazy")
   OPTIONAL: style="--seitenverhaeltnis: 21 / 9" am figure (Standard 21 / 9)
             style="--bildfokus: x% y%" am img
             data-parallax="0.06" an .breitbild__medien (0,04–0,08; 6 % Überstand)
             figcaption.split__bildtext (kurz halten)
   HANDY:    unter 600 px randlos (volle Bildschirmbreite, ohne Radius). */
.breitbild {
  position: relative;
  isolation: isolate;
  margin: 0;
  overflow: hidden;
  aspect-ratio: var(--seitenverhaeltnis, 21 / 9);
  border-radius: var(--r-3);
  background: var(--sand-2);
}
.breitbild__medien {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Mit Parallaxe: 6 % Überstand oben und unten, damit beim Verschieben kein Rand sichtbar wird */
.breitbild__medien[data-parallax] {
  inset: -6% 0;
  height: auto;
  will-change: transform;
}
.breitbild__medien img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bildfokus, 50% 50%);
}
.breitbild .split__bildtext { z-index: 1; }
/* Handy: randlos über die volle Bildschirmbreite – jeder Pixel zählt beim Gruppenfoto */
@media (max-width: 599.98px) {
  .breitbild {
    margin-inline: calc(-1 * var(--rand));
    border-radius: 0;
  }
}


/* 33  Referenzen-Archiv (/referenzen) -------------------------------------
   Erweitert „Referenzen + Filter-Chips“ (14) um drei Teile:
   .referenzen--archiv   Übersicht aller Referenzen: der Titel-Link ist ein
                         Permalink (#anker); die ganze Karte ist NICHT verlinkt,
                         damit Aufklapper und Links in der Karte bedienbar bleiben.
   details.referenz__mehr[data-animiert] > summary + .details__inhalt
                         aufklappbarer Bereich je Karte (Animation: lepski.js);
      ul.referenz__galerie  kleine Bildreihe im Aufklapper, figure + figcaption
   .filterleiste--wisch  Filter-Chips unter 680 px in einer wischbaren Zeile. */
/* 1  Archiv-Liste --------------------------------------------------------- */
.referenzen--archiv { align-items: start; }
.referenzen--archiv .referenz__link::after { content: none; }
/* Karte ist nicht klickbar → kein Bild-Zoom beim Überfahren (14 zoomt sonst mit scale 1.05) */
.referenzen--archiv .referenz:hover .referenz__bild img { transform: none; }
.referenzen--archiv .referenz__link:focus-visible {
  outline: 3px solid var(--gruen-700);
  outline-offset: 3px;
  border-radius: 2px;
}


/* 2  Aufklapper in der Karte --------------------------------------------- */
.referenz__mehr {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--linie);
}
.referenz__mehr > summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;               /* Tippfläche mobil */
  color: var(--gruen-700);
  font-size: var(--fs-klein);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  transition: color var(--dauer-1) var(--ease);
}
.referenz__mehr > summary::-webkit-details-marker { display: none; }
.referenz__mehr > summary::marker { content: ''; }
.referenz__mehr > summary::after {
  content: '';
  width: .5rem;
  height: .5rem;
  margin-top: -.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dauer-2) var(--ease-raus), margin var(--dauer-2) var(--ease-raus);
}
.referenz__mehr > summary:hover { color: var(--gruen-800); }
.referenz__mehr[open]:not(.ist-schliessend) > summary::after { transform: rotate(225deg); margin-top: .2rem; }

.referenz__mehr .details__inhalt { padding: .35rem 0 .5rem; }
.referenz__mehr .details__inhalt > * + * { margin-top: .9rem; }
.referenz__mehr .details__inhalt > p { font-size: var(--fs-klein); }
.referenz__mehr .haekchen { gap: .4rem; font-size: var(--fs-klein); line-height: 1.5; }

.referenz__galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.referenz__galerie figure { margin: 0; }
.referenz__galerie img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-2);
  background: var(--sand);
}
.referenz__galerie figcaption {
  margin-top: .35rem;
  color: var(--text-2);
  font-size: .8125rem;
  line-height: 1.4;
}


/* 3  Filter-Chips mobil als wischbare Zeile ------------------------------ */
@media (max-width: 679.98px) {
  .filterleiste--wisch {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--rand));
    padding: .4rem var(--rand) .5rem;
    scroll-padding-inline: var(--rand);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    /* rechts ausblenden: zeigt, dass es weitergeht */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent);
  }
  .filterleiste--wisch::-webkit-scrollbar { display: none; }
  .filterleiste--wisch > .chip { flex: none; }
}


/* 34  Kachelauswahl als Links .auswahl--links (Startseite) ----------------
   .auswahl (10) ist ein Formularbaustein (label > input[type=radio]); ::after
   zeichnet den Radio-Kreis. Auf der Startseite sind die Kacheln Links auf
   /kontakt?vorhaben=<wert> und dürfen nicht wie Optionsfelder aussehen.
   PFLICHT:  nav.auswahl.auswahl--links[aria-label] > a.auswahl__kachel[href]
               > span.auswahl__icon + span.auswahl__titel + span.auswahl__info
   OPTIONAL: .auswahl--kompakt. Fokus: globaler :focus-visible-Ring. */
.auswahl--links .auswahl__kachel { color: inherit; }
.auswahl--links .auswahl__kachel::after { content: none; }
.auswahl--links.auswahl--kompakt .auswahl__kachel { padding-right: .75rem; }

@media (max-width: 559.98px) {
  .auswahl--links.auswahl--kompakt .auswahl__kachel { padding-right: .65rem; }
}


/* 35  Seitenbezogene Korrekturen ------------------------------------------
   a) Fuß ohne Aktionsleiste (/kontakt): Dort entfällt die mobile Aktionsleiste
      (Kommentar in _partials/fuss.html). 23 reserviert unter 900 px trotzdem
      Platz unter dem Fuß – auf Seiten ohne .aktionsleiste zurückgenommen, nur
      der Abstand zur Home-Leiste des Geräts bleibt. Ohne :has()-Unterstützung
      bleibt der Platz einfach frei (unschädlich).
   b) Komponenten im Fließtext (Ratgeber): .fliesstext (24) setzt für jede Liste
      Einzug und li-Abstand. Bei ul.kennzahlen (Raster) verschiebt das die
      Spalten, bei ul.haekchen rückt es die Häkchen ein – zurückgesetzt, die
      Abstände kommen aus der Komponente (gap). Video und Kennzahlen bekommen
      denselben Abstand wie Tabellen und Infokarten im Fließtext. */
/* a  Fuß ohne Aktionsleiste */
@media (max-width: 899.98px) {
  body:not(:has(.aktionsleiste)) .fuss { padding-bottom: env(safe-area-inset-bottom); }
}

/* b  Komponenten im Fließtext */
.fliesstext :is(.kennzahlen, .haekchen) { padding-left: 0; }
.fliesstext :is(.kennzahlen, .haekchen) > li + li { margin-top: 0; }
.fliesstext > :is(.kennzahlen, .raster) { margin-block: 2em; }
/* Video: Abstand wie eine Abbildung, die Zeile darunter ist seine Bildunterschrift */
.fliesstext > .video { margin-block: 2em 0; }
.fliesstext > .video + p { margin-top: .6rem; margin-bottom: 2em; }
.fliesstext .raster figure { margin: 0; }
.fliesstext .raster img { width: 100%; }


/* 36  Helfer (statt Inline-Styles) --------------------------------------
   Stehen am Ende, damit sie gleich spezifische Regeln davor überstimmen.
   Neue Abschnitte deshalb VOR diesem Block einfügen. */
.abstand-oben { margin-top: var(--s-6); }                 /* 32 px, z. B. Hinweis-Infokarte unter Text */
.abstand-oben-gross { margin-top: var(--abschnitt-eng); } /* zweiter Block im selben Abschnitt */