/* ═══════════════════════════════════════════════════════════
   ERDMANN IMMOBILIEN — Gestaltungssystem
   Alles zieht aus den Tokens in :root. Keine Magic Numbers.
   ═══════════════════════════════════════════════════════════ */

/* ── Selbst gehostete Schriften (DSGVO, kein Fremd-CDN) ───────
   Variable Schriftdateien, Latin-Subset auf die auf der Website
   tatsächlich vorkommenden Zeichen (120 Zeichen, siehe
   orchestra/agenten/performance/berichte/). */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-variable-latin.woff2") format("woff2-variations"),
       url("../assets/fonts/fraunces-variable-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-variable-latin.woff2") format("woff2-variations"),
       url("../assets/fonts/manrope-variable-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Farbe ──────────────────────────────────────────────
     Ticket D-ERD-20: --ink ist als Flächenfarbe vollständig
     abgeschafft. --green-deep trägt jetzt jede Fläche, die
     vorher schwarz war — Bühne, Kontrast, Ruhepunkt zwischen
     den hellen Akten (vorbildmappe-10-08-2026.md, Teil B1/B3).
     --ink-warm ersetzt --ink als Schriftfarbe auf hellem Grund.
     --sand ist die zweite Cremestufe für Abschnitte, die sich
     absetzen sollen, ohne dunkel zu werden. --clay ist ein
     warmer Akzent für kleine Flächen — er bekommt laut Mappe
     (Teil F, 2,7:1) NIE helle Schrift, nur dunkle. */
  --paper: #f2efe7;        /* warmes creme, hellste Fläche */
  --paper-dim: #e7e3d7;
  --sand: #e4d9c5;         /* zweite Cremestufe: Board, Zwischenräume */
  --clay: #b8875c;         /* Terrakotta-Akzent, nur kleine Flächen */
  --ink-warm: #241d16;     /* warmes Braunschwarz — nur Schrift, nie Fläche */
  --green: #61b346;        /* CI-grün aus dem Logo — nur CTA */
  --green-deep: #173626;   /* tiefes waldgrün — trägt jede dunkle Fläche */
  /* Abgeleiteter, etwas dunklerer Ton derselben Fläche — für
     Hover-/Platzhalterzustände auf grünen Flächen. Kein neuer
     Farbwert, nur dieselbe Farbe mit 8 % Schwarzanteil gemischt,
     damit heller wie grüner Text darauf immer noch genug
     Kontrast behält (gemessen, siehe Bericht). */
  --green-deep-dim: color-mix(in srgb, var(--green-deep) 92%, black 8%);
  /* Dasselbe Grün, so weit abgedunkelt, dass es als Schrift auf
     Creme 6,5:1 erreicht — Reserve genug für die getönte Fläche
     der Hinweisbox (6,1:1) und für den letzten Moment einer
     Einblendung. --green selbst hat dort nur 2,3:1 und ist als
     Schrift nicht zulässig — als Fläche sehr wohl. */
  --green-ink: #2a6120;
  /* Welche der beiden Fassungen gilt, entscheidet der Abschnitt,
     nicht die einzelne Regel. Dunkler Grund ist der Normalfall. */
  --green-text: var(--green);
  --line-dark: rgba(36, 29, 22, .14);
  --line-light: rgba(242, 239, 231, .16);
  --quiet-dark: rgba(36, 29, 22, .68);      /* Nebentext auf hell, 5,4:1 */
  --quiet-light: rgba(242, 239, 231, .68);  /* Nebentext auf dunkel */

  /* ── Typografie ─────────────────────────────────────────
     Eine Leitgröße je Abschnitt (--fs-display), darunter eine
     einzige Nebenstufe (--fs-statement). Der Sprung dazwischen
     macht die Hierarchie, nicht die Lautstärke. */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Manrope", -apple-system, sans-serif;
  --fs-hero: clamp(88px, 17.5vw, 300px);     /* nur der Hero */
  --fs-display: clamp(40px, 5.6vw, 84px);    /* Leitgröße je Abschnitt */
  --fs-statement: clamp(26px, 3.2vw, 46px);  /* Nebenstufe */
  --fs-lead: clamp(18px, 1.9vw, 24px);
  --fs-body: clamp(15px, 1.35vw, 17px);
  --fs-small: 14.5px;
  --fs-label: 12px;

  /* ── Rhythmus ───────────────────────────────────────────
     Großzügigkeit entsteht aus dem Wechsel: dichte Blöcke
     neben weiten. Nicht überall gleich viel Luft. */
  --pad-tight: clamp(44px, 7vh, 84px);
  --pad-mid: clamp(74px, 12vh, 146px);
  --pad-wide: clamp(108px, 19vh, 232px);
  --gut: clamp(20px, 5vw, 80px);

  /* ── Form & Bewegung ────────────────────────────────────
     Ein Schnittstil: zwei Kurven, drei Dauern. */
  --r-lg: 22px;
  --r-md: 16px;
  --r-pill: 999px;
  --dur-in: .9s;
  --dur-mid: .55s;
  --dur-micro: .3s;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.77, 0, .18, 1);

  /* Echte Höhe der zweizeiligen Kopfleiste. main.js misst sie nach dem
     Laden und bei jeder Größenänderung neu und schreibt sie hierher
     (D-ERD-21) — dieser Wert ist nur der Startwert vor dem ersten
     Messen und für den Fall ohne JavaScript. */
  --header-h: 132px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--sans);
  background: var(--green-deep);
  color: var(--paper);
  overflow-x: hidden;
  transition: background-color 1s var(--ease-out);
  -webkit-font-smoothing: antialiased;
}
body.is-light { background: var(--paper); }
body.is-loading { overflow: hidden; height: 100vh; }

::selection { background: var(--green-deep); color: var(--paper); }

/* Sprungmarken landen unter der dauerhaft sichtbaren Kopfleiste,
   nicht darunter versteckt (D-ERD-21). scroll-margin-top statt
   Abstände von Hand — wirkt auch ohne JavaScript, direkt aus der URL. */
section[data-bg] { scroll-margin-top: var(--header-h); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-style: normal; }

/* Sichtbarer Fokus, zweifarbig: der helle Ring wird auf dunklem
   Grund gesehen, der dunkle auf hellem. So ist der Fokus auf
   jedem Hintergrund erkennbar — auch auf einem Foto. */
:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ink-warm);
  border-radius: 3px;
}

/* ── Sprungmarke zum Inhalt (WCAG 2.4.1, D-ERD-22) ───────
   Spart 10 Tabstationen je Seite. Drei Werte sind nicht beliebig:
   z-index über dem Vorspann (.preloader hat 1000, liegt die ersten
   ~1,5 s über allem); translateY statt display:none, sonst fällt
   der Link aus der Tabreihenfolge; kein eigener Radius/Schatten —
   die globale :focus-visible-Regel überschreibt beides, und im
   Fokus ist der einzige Zustand, in dem der Link zu sehen ist.
   Ausführlich: agenten/design/berichte/2026-08-13-erdmann-sprungmarke.md */
.zum-inhalt {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 1100;
  padding: 14px 26px;
  background: var(--paper);
  color: var(--ink-warm);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 3px;
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--dur-micro) var(--ease-out);
}
/* :focus zusätzlich zu :focus-visible — mit der Maus ist der Link
   gar nicht erreichbar, es gibt also nichts abzugrenzen. */
.zum-inhalt:focus,
.zum-inhalt:focus-visible { transform: translateY(0); }

/* Sprungziel. tabindex="-1" im HTML macht <main> fokussierbar — ohne
   das bewegt der Sprung in Safari nur die Bildlaufleiste, der Fokus
   bleibt in der Kopfleiste und die nächste Tabtaste führt zurück ins
   Menü. Ring aus: <main> ist kein Bedienelement (kein 2.4.7-Verstoß). */
#inhalt { scroll-margin-top: var(--header-h); }
#inhalt:focus { outline: none; box-shadow: none; }

/* ── Bildrahmen — ein Zuschnitt, überall derselbe ────────
   Gleichförmigkeit im Zuschnitt liest sich als Kuratierung.
   --green-deep-dim als Platzhalterfläche: fehlt ein Bild oder
   lädt es noch, zerlegt sich die Folie nicht — die Fläche
   bleibt in Markenfarbe stehen, mit gesetzten img-Maßen (CLS). */
.frame {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--green-deep-dim);
}
/* <picture> ist ein Inline-Element und würde den Rahmen sonst
   nicht ausfüllen — es bekommt überall dieselbe Behandlung. */
.frame picture, .stats__media picture, .discreet__media picture,
.board__preview picture, .scard__media picture, .hero__media picture { display: block; height: 100%; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
/* Die sechs Bild-zu-Text-Verhältnisse aus der Vorbildmappe (Teil E).
   Mobil-Werte stehen im Responsive-Block, dieselbe Klasse trägt beide. */
.frame--portrait { aspect-ratio: 4 / 5; }         /* Porträt */
.frame--wide { aspect-ratio: 3 / 2; }             /* Folie groß */
.frame--band { aspect-ratio: 32 / 9; border-radius: 0; }
.frame--hero { aspect-ratio: 21 / 9; }            /* Aufmacher, Desktop 21:9 */
.frame--tile { aspect-ratio: 4 / 3; }             /* Kachel Leistung */
.frame--expose { aspect-ratio: 16 / 9; }          /* Exposé-Aufmacher, Desktop */
.frame--blog { aspect-ratio: 2 / 1; }             /* Blog-Aufmacher, Desktop */

/* Ebene für die sehr langsame Parallaxe (6 % Weg).
   Das Bild ist höher als der Rahmen — deshalb entsteht beim
   Verschieben nie eine Lücke, und es wird kein CSS-transform
   überschrieben, das GSAP später wegräumen müsste. */
.pfx { position: absolute; inset: -6% 0; height: 112%; }
.pfx img { width: 100%; height: 100%; object-fit: cover; }

/* ── Lesefortschritt ────────────────────────────────────── */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; }
.progress__bar {
  height: 100%; width: 100%; background: var(--green);
  transform: scaleX(0); transform-origin: left;
}

/* ── Preloader ──────────────────────────────────────────
   Grundzustand ist „nicht vorhanden". Erst wenn JavaScript
   läuft (Klasse js-motion), wird er eingeblendet — sonst
   verdeckt er ohne Skript dauerhaft die Seite. */
.preloader { display: none; position: fixed; inset: 0; z-index: 1000; place-items: center; }
.js-motion .preloader { display: grid; }
.preloader__panel { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--green-deep); }
.preloader__panel--top { top: 0; }
.preloader__panel--bottom { bottom: 0; }
.preloader__center { position: relative; z-index: 2; text-align: center; }
.preloader__signet { width: 64px; margin: 0 auto 26px; opacity: 0; }
.preloader__word {
  font-family: var(--serif); font-weight: 300; letter-spacing: .42em; text-indent: .42em;
  font-size: clamp(20px, 3vw, 30px); color: var(--paper); overflow: hidden;
}
.preloader__track {
  width: min(300px, 60vw); height: 1px; background: rgba(242,239,231,.15);
  margin: 30px auto 0; overflow: hidden;
}
.preloader__fill { height: 100%; width: 100%; background: var(--paper); transform: scaleX(0); transform-origin: left; }
.preloader__count {
  position: absolute; right: 5vw; bottom: 4.5vh; z-index: 2;
  font-family: var(--serif); font-weight: 300; font-size: clamp(60px, 10vw, 130px);
  color: rgba(242,239,231,.4);
}

/* ── Schaltflächen ──────────────────────────────────────
   Die einzige Stelle, an der die Signalfarbe Fläche trägt. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 38px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px;
  letter-spacing: .02em; overflow: hidden; transition: color var(--dur-mid) var(--ease-out);
}
.btn span { position: relative; z-index: 2; }
.btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--paper); transform: translateY(101%);
  transition: transform var(--dur-mid) var(--ease-inout);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn--solid { background: var(--green); color: var(--ink-warm); }
.btn--solid:hover { color: var(--ink-warm); }
.btn--ghost { border: 1px solid var(--line-light); color: var(--paper); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink-warm); }
.btn--dark { background: var(--green-deep); color: var(--paper); }
.btn--dark::before { background: var(--green); }
.btn--dark:hover, .btn--dark:focus-visible { color: var(--ink-warm); }
.btn--big { padding: 24px 52px; font-size: clamp(15px, 1.6vw, 19px); }

/* ── Kopfzeile ──────────────────────────────────────────────
   D-ERD-21: bleibt dauerhaft sichtbar (kein Ausblenden beim
   Runterscrollen mehr) und trägt jetzt zwei Zeilen — oben Marke/
   Gütemerkmal/Telefon/Burger, darunter alle sechs Leistungen
   offen und anklickbar. Kein Aufklappen mehr nötig, also auch
   ohne JavaScript vollständig bedienbar. */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  display: flex; flex-direction: column;
}
.header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(10px, 2vw, 28px);
  padding: 16px var(--gut) 12px;
}
.header__logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
/* height: auto ist Pflicht, nicht Kosmetik: Ohne sie gewinnt der
   height="142"-Attributwert aus dem Markup gegen die Breite von 34px,
   das Signet stand 142px hoch und riss die ganze Leiste mit hoch
   (D-ERD-21 — „darf nicht so hoch werden"). */
.header__signet { width: 34px; height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.header__wordmark {
  display: flex; flex-direction: column; font-family: var(--serif);
  font-size: 19px; letter-spacing: .3em; font-weight: 500; color: var(--paper);
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.header__wordmark em {
  font-family: var(--sans); font-size: 8.5px; letter-spacing: .18em;
  font-weight: 600; text-transform: uppercase; opacity: .75; margin-top: 3px;
}
body.is-light .header__wordmark { color: var(--ink-warm); text-shadow: none; }
body.is-light .header__signet { filter: invert(1) brightness(0); }
.header__wordmark, .header__signet, .burger__line, .header__phone {
  transition: color .8s var(--ease-out), background-color .8s var(--ease-out), filter .8s var(--ease-out);
}

/* ── Leistungs-Leiste — Herzstück der Kopfzeile ──────────
   Alle sechs Leistungen liegen offen, ohne vorheriges Öffnen
   erreichbar (Leons ausdrücklicher Auftrag, D-ERD-21 — qa hatte
   den bisherigen Aufklapp ohne JavaScript nicht bedienen können).
   Auf schmalen Schirmen läuft die Zeile waagerecht weiter statt
   umzubrechen — eine zweite Zeile Wegweiser bleibt eine Zeile,
   auch wenn nicht alles gleichzeitig ins Bild passt. Reine
   <a>-Elemente: mit Tastatur, Screenreader und ganz ohne Skript
   gleichermaßen erreichbar. */
.header__services {
  padding: 0 var(--gut) 14px;
}
.header__services ul {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 0 2px;
}
.header__services ul::-webkit-scrollbar { display: none; }
.header__services li { flex: none; }
.header__services a {
  /* Deckende Fläche statt Transparenz: darunter wechseln Foto, Farbe
     und Helligkeit von Sektion zu Sektion — nur eine feste Fläche
     garantiert den Kontrast unabhängig davon, was gerade durchscrollt
     wird (paper auf green-deep bzw. ink-warm auf paper, beides weit
     über 4,5:1, siehe Bericht). */
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 9px 17px; border-radius: var(--r-pill);
  font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--paper);
  background: var(--green-deep); border: 1px solid var(--line-light);
  /* Kein Fade auf Farbe/Fläche: Sowohl der Hell/Dunkel-Wechsel beim
     Scrollen als auch Hover/Fokus springen hart. Mit einer Überblendung
     stand mitten im Wechsel eine echte Kontrastlücke — axe maß auf
     halbem Weg 4,09:1 statt 4,5:1, weil Schrift und Fläche versetzt
     ausgeblendet haben (D-ERD-21, Bewegungsdoktrin Punkt 7). */
}
body.is-light .header__services a {
  color: var(--ink-warm); background: var(--paper); border-color: var(--line-dark);
}
.header__services a:hover, .header__services a:focus-visible {
  background: var(--green); border-color: var(--green); color: var(--ink-warm);
}
.header__services a[aria-current="page"] {
  background: var(--green); border-color: var(--green); color: var(--ink-warm);
}

/* ── Sachverständigen-Merkmal — bewusst kein siebter Menüpunkt ──
   Eigene Farbe (--clay), eigener Platz, eigenes Gewicht. --clay
   trägt hier laut Regel aus der Mappe ausschließlich dunkle
   Schrift (--ink-warm, 5,3:1) — nie helle. */
.header__cert {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  background: var(--clay); color: var(--ink-warm); border-radius: var(--r-pill);
  padding: 9px 18px 9px 14px; line-height: 1.25;
}
.header__cert:hover, .header__cert:focus-visible { background: #c4966a; }
.header__cert-badge {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink-warm); color: var(--clay); font-size: 11px; flex-shrink: 0;
}
.header__cert-text { display: flex; flex-direction: column; }
.header__cert-text strong { font-size: 11px; font-weight: 800; letter-spacing: .02em; }
/* Kein opacity hier. Mit .8 fiel die Normnummer von 5,27:1 auf 3,88:1 und lag
   damit unter AA — von qa am 10.08.2026 nachgemessen. Der Zeilenabstand trennt
   die beiden Zeilen ausreichend, dafuer braucht es keine Aufhellung. */
.header__cert-text em { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.header__right { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 34px); flex-shrink: 0; }
.header__phone {
  font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--paper);
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
body.is-light .header__phone { color: var(--ink-warm); text-shadow: none; }
.burger {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-light);
  /* Kein backdrop-filter: die Kopfzeile steht dauerhaft im Bild,
     ein Weichzeichner darunter würde bei jedem Scroll-Bild neu
     berechnet. Eine deckende Fläche kostet nichts. */
  background: rgba(23,54,38,.55);
  display: grid; place-items: center; gap: 0; cursor: pointer; position: relative; z-index: 620;
}
body.is-light .burger { border-color: var(--line-dark); background: rgba(242,239,231,.4); }
.burger__line {
  display: block; width: 20px; height: 2px; background: var(--paper);
  position: absolute; left: 50%; transform: translateX(-50%);
}
body.is-light .burger__line { background: var(--ink-warm); }
.burger__line:nth-child(1) { top: 21px; }
.burger__line:nth-child(2) { top: 29px; }
body.menu-open .burger__line { background: var(--paper) !important; }
body.menu-open .burger__line:nth-child(1) { top: 25px; transform: translateX(-50%) rotate(45deg); }
body.menu-open .burger__line:nth-child(2) { top: 25px; transform: translateX(-50%) rotate(-45deg); }

/* ── Mobil: vereinfachen, nicht verkleinern ──────────────
   Die Leistungszeile bleibt auf jeder Breite stehen und alle
   sechs Ziele bleiben erreichbar (Leons ausdrücklicher Auftrag,
   D-ERD-21) — sie läuft nur enger und rein waagerecht weiter.
   Was weicht, ist Beiwerk: die zweite Zeile des Gütemerkmals,
   dann die zweite Zeile der Wortmarke. */
@media (max-width: 900px) {
  .header__cert-text em { display: none; }
  .header__cert { padding: 8px 14px 8px 10px; }
}
@media (max-width: 560px) {
  .header__cert-text strong { font-size: 10px; }
  .header__wordmark em { display: none; }
  .header__services a { padding: 8px 14px; font-size: 12px; }
}
@media (max-width: 460px) {
  .header__cert-long { display: none; }
  .header__cert { padding: 7px 12px 7px 9px; }
}

/* ── Menü ───────────────────────────────────────────────── */
.menu { position: fixed; inset: 0; z-index: 600; visibility: hidden; }
.menu__panel {
  position: absolute; inset: 0; background: var(--green-deep);
  clip-path: circle(0% at calc(100% - 48px) 48px);
}
.menu__inner {
  position: relative; height: 100%; display: flex; flex-direction: column;
  justify-content: center; padding: 0 clamp(24px, 8vw, 120px); gap: 6vh;
}
.menu__list li { overflow: hidden; }
.menu__list a { display: flex; align-items: baseline; gap: 22px; padding: 1.1vh 0; }
.js-motion .menu__list a { transform: translateY(120%); }
.menu__num {
  font-size: 12px; font-weight: 700; letter-spacing: .2em; color: rgba(242,239,231,.55);
}
.menu__word {
  font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 7.2vh, 76px);
  line-height: 1.04; color: var(--paper); position: relative;
  transition: transform var(--dur-mid) var(--ease-out); display: inline-block;
}
.menu__list a:hover .menu__word,
.menu__list a:focus-visible .menu__word { transform: translateX(18px); }
.menu__meta {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 6vw, 90px);
  font-size: 14px; line-height: 1.7; color: rgba(242,239,231,.78);
}
.js-motion .menu__meta { opacity: 0; }
.menu__meta-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
  color: rgba(242,239,231,.6); margin-bottom: 8px;
}
.menu__meta a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Beschriftungen & Titel ─────────────────────────────── */
.label {
  font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .26em;
  color: inherit; opacity: .62; display: flex; align-items: center; gap: 14px;
}
.label::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .6; }
.label--center { justify-content: center; }
.label--center::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .6; }

.title {
  font-family: var(--serif); font-weight: 350; line-height: 1.03;
  font-size: var(--fs-display); letter-spacing: -.01em; margin-top: 22px;
}
.st-line { display: block; overflow: hidden; }
.st-inner { display: block; }
.js-motion .split-title .st-inner { transform: translateY(110%); }

/* ── Hero ───────────────────────────────────────────────── */
/* padding-top hält den Text unter der jetzt dauerhaft sichtbaren,
   zweizeiligen Kopfleiste frei (D-ERD-21 — auf 390 px lag die erste
   Zeile bis zu 20 px darunter verborgen). Das Bild bleibt trotzdem
   randlos: hero__media/hero__veil sind absolut positioniert und
   decken die Polsterbox mit ab, nur der Fließinhalt weicht zurück.
   padding-bottom reserviert denselben Platz für hero__foot (Scroll-
   Hinweis) — sonst rückt die zentrierte Mitte auf kurzen Bildschirmen
   so weit nach unten, dass „Kostenlose Ersteinschätzung" und
   „Scrollen" ineinanderlaufen (von Leon auf 390 px bemängelt). */
.hero {
  position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--green-deep);
  padding-top: var(--header-h); padding-bottom: clamp(108px, 16vh, 140px);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 64%; /* oben beschnitten: der Himmel trägt nichts */
  transform-origin: center; will-change: transform;
}
.hero__veil {
  position: absolute; inset: 0;
  /* Der Abdunkler liegt dort, wo Text steht — die Bildränder
     behalten ihre Farbe. Lesbarkeit geht dabei vor Bildwirkung. */
  background:
    radial-gradient(ellipse 82% 64% at 50% 50%, rgba(23,54,38,.76) 0%, rgba(23,54,38,.34) 68%, rgba(23,54,38,0) 100%),
    linear-gradient(180deg, rgba(23,54,38,.46) 0%, rgba(23,54,38,.3) 30%, rgba(23,54,38,.92) 100%);
}
.hero__content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 0 20px;
}
.hero__kicker {
  display: flex; align-items: center; gap: 16px;
  font-size: clamp(11px, 1.2vw, 14px); font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(242,239,231,.9); margin-bottom: 3.5vh;
}
.hero__kicker-line { width: 44px; height: 1px; background: rgba(242,239,231,.6); display: inline-block; }
.hero__title {
  font-family: var(--serif); font-weight: 320; line-height: .86;
  font-size: var(--fs-hero); letter-spacing: .01em;
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: .015em;
  /* Vollflaechig weiss und ohne Kontur (Leon, 20.08.2026). Heller als der
     Flietext darunter (rgba(242,239,231,.92)) - das ist die Hierarchie,
     nicht ein Ausrutscher. */
  color: #fff;
}
.hero__title-row { display: inline-flex; }
.hero__sub {
  max-width: 560px; margin-top: 4vh; font-size: var(--fs-lead);
  line-height: 1.6; color: rgba(242,239,231,.92); font-weight: 400;
}
.hero__sub em { color: var(--paper); font-weight: 700; }
.hero__cert {
  margin-top: 2.6vh; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(242,239,231,.8); border: 1px solid var(--line-light);
  border-radius: var(--r-pill); padding: 9px 18px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 4vh; }
.hero__foot {
  position: absolute; z-index: 2; left: var(--gut); right: var(--gut);
  bottom: 30px; display: flex; align-items: flex-end; justify-content: center;
}
.hero__scrollhint {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(242,239,231,.7);
}
.hero__scrollline { width: 1px; height: 54px; background: rgba(242,239,231,.3); position: relative; overflow: hidden; }
.hero__scrollline::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--paper); transform: translateY(-100%);
  animation: scrollhint 2s var(--ease-inout) infinite;
}
@keyframes scrollhint {
  0% { transform: translateY(-100%) } 55% { transform: translateY(0) } 100% { transform: translateY(100%) }
}

/* ── Lauftext-Band ──────────────────────────────────────── */
.band {
  padding: var(--pad-tight) 0; overflow: hidden;
  border-top: 1px solid var(--line-light); background: var(--green-deep);
}
.band__row { white-space: nowrap; }
.band__inner { display: inline-flex; align-items: center; gap: 3.2vw; padding-right: 3.2vw; }
.band__row--a .band__inner span {
  font-family: var(--serif); font-weight: 300; font-size: var(--fs-display);
  color: var(--paper);
}
.band__row--a .band__inner i { color: rgba(242,239,231,.4); font-style: normal; font-size: clamp(18px, 2.6vw, 34px); }
.band__row--b { margin-top: 2.4vh; }
.band__row--b .band__inner span {
  font-size: clamp(13px, 1.6vw, 18px); letter-spacing: .34em; text-transform: uppercase;
  color: rgba(242,239,231,.5); font-weight: 500;
}
.band__row--b .band__inner i { color: rgba(242,239,231,.3); font-style: normal; }

/* ── Manifest — Aussage links, Bild randabfallend rechts ── */
.manifest {
  background: var(--paper); color: var(--ink-warm);
  padding: var(--pad-wide) 0 var(--pad-wide) var(--gut);
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(28px, 5vw, 76px); align-items: center;
}
.manifest__text {
  font-family: var(--serif); font-weight: 350; font-size: var(--fs-statement);
  line-height: 1.24; margin-top: 4vh; letter-spacing: -.005em;
}
.manifest__text .wd { display: inline-block; }
/* .55 statt .12: auch der Ausgangszustand des Wort-Aufhellens
   muss lesbar sein (4,2:1 auf Creme). Ein Wort, das erst beim
   Scrollen Kontrast bekommt, ist bis dahin unlesbarer Text. */
.js-motion .manifest__text .wd { opacity: .55; }
.manifest__sign {
  display: flex; align-items: center; gap: 18px; margin-top: 5vh;
  font-size: var(--fs-small); font-weight: 600; color: var(--quiet-dark);
}
/* Gleicher Fehler wie beim Kopfzeilen-Signet: ohne height:auto gewinnt
   das height="142"-Attribut aus dem Markup gegen die gesetzte Breite. */
.manifest__signet { width: 40px; height: auto; filter: invert(1) brightness(0) opacity(.85); }
.manifest__media { border-radius: var(--r-lg) 0 0 var(--r-lg); }

/* ── Stats — die Zahlen liegen auf dem Stadtbild ─────────
   Eine Zahl auf leerer Fläche ist eine Behauptung.
   Dieselbe Zahl über dem Ort, um den es geht, ist ein Beleg. */
.stats {
  position: relative; overflow: hidden; background: var(--green-deep); color: var(--paper);
  padding: var(--pad-mid) var(--gut) var(--pad-tight);
  min-height: 58vh; display: flex; align-items: flex-end;
}
.stats__media { position: absolute; inset: -6% 0; height: 112%; }
.stats__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* Verlauf in --green-deep statt Schwarz (Mappe Teil B3/D1) — das
   Stadtbild bleibt Bühne, der Abdunkler nur ein anderer Kanal
   derselben Aufgabe. */
.stats__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,54,38,.62) 0%, rgba(23,54,38,.8) 46%, rgba(23,54,38,.94) 100%);
}
.stats__grid {
  position: relative; width: 100%; max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--line-light);
}
.stat { padding: 4.5vh 2.2vw 0; border-right: 1px solid var(--line-light); }
.stat:last-child { border-right: none; }
.stat__num {
  font-family: var(--serif); font-weight: 320; font-size: var(--fs-statement);
  line-height: 1; letter-spacing: -.02em;
}
/* 17024 ist eine Normnummer, keine Leistungszahl — sie wird
   deshalb wie eine Kennzeichnung gesetzt und nicht hochgezählt. */
.stat__norm {
  font-family: var(--sans); font-weight: 700; font-size: 21px; letter-spacing: .22em;
  color: var(--paper); padding: .55em 0 .4em; opacity: .92;
}
.stat__cap { margin-top: 14px; font-size: var(--fs-small); line-height: 1.6; color: var(--quiet-light); max-width: 240px; }

/* ── Leistungen — klebende Karten ───────────────────────
   Nur eine Ebene bewegt sich: das Bild. Die Karte steht. */
.services { background: var(--paper); padding: var(--pad-mid) var(--gut); color: var(--ink-warm); }
.services__head { max-width: 1400px; margin: 0 auto var(--pad-tight); }
.services__list { display: flex; flex-direction: column; gap: 6vh; max-width: 1400px; margin: 0 auto; }
.scard {
  position: sticky; top: 13vh;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
  border-radius: 26px; overflow: hidden; min-height: 68vh;
  background: var(--green-deep); color: var(--paper);
  /* Kleinerer, härterer Schatten statt der alten 90-px-Streuung —
     Mappe Teil B7: große weiche Schatten sind auf keiner geprüften
     Referenz Tiefenmittel und kosten auf Mittelklasse-Android. */
  box-shadow: 0 16px 34px -16px rgba(23,54,38,.5);
}
.scard__media { overflow: hidden; min-height: 320px; }
.scard__media img { width: 100%; height: 100%; object-fit: cover; }
.scard__body { padding: clamp(30px, 4.5vw, 76px); display: flex; flex-direction: column; justify-content: center; }
.scard__num {
  font-family: var(--serif); font-size: 15px; letter-spacing: .3em; color: rgba(242,239,231,.6);
  margin-bottom: 2.4vh; font-weight: 500;
}
.scard__title {
  font-family: var(--serif); font-weight: 350; font-size: var(--fs-statement);
  line-height: 1.06; margin-bottom: 3vh;
}
.scard__text { font-size: var(--fs-body); line-height: 1.7; color: var(--quiet-light); max-width: 520px; }
.scard__feats { margin-top: 3.4vh; display: flex; flex-direction: column; gap: 13px; }
.scard__feats li {
  display: flex; gap: 14px; align-items: baseline; font-size: var(--fs-small); font-weight: 600;
}
.scard__feats li::before { content: "✦"; color: rgba(242,239,231,.45); font-size: 11px; }

/* ── Über uns — die Person ist das Produkt ──────────────── */
.about {
  background: var(--paper); color: var(--ink-warm);
  padding: var(--pad-mid) var(--gut) var(--pad-mid) 0;
}
.about__grid {
  display: grid; grid-template-columns: 1.22fr 1fr; gap: clamp(30px, 5vw, 84px);
  max-width: 1500px; margin: 0 auto; align-items: center;
}
.about__media {
  position: relative; border-radius: 0 var(--r-lg) var(--r-lg) 0; overflow: hidden;
  aspect-ratio: 4 / 5;
}
.about__media picture { display: block; }
/* Bild höher als der Rahmen — Grundlage für die 6-%-Parallaxe */
.about__media img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.about__badge {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  display: flex; gap: 14px; align-items: center;
  background: rgba(23,54,38,.92);
  border: 1px solid var(--line-light); border-radius: var(--r-md); padding: 15px 20px;
  color: var(--paper); font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1.5;
}
.about__badge img { width: 30px; }
.about__lead {
  font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.45;
  margin-top: 4vh; color: rgba(36,29,22,.88);
}
.about__text { margin-top: 3vh; font-size: 16px; line-height: 1.75; color: var(--quiet-dark); max-width: 560px; }
.about__certs { margin-top: 4vh; display: flex; flex-direction: column; gap: 0; }
.about__certs li {
  padding: 18px 0; border-top: 1px solid var(--line-dark);
  font-size: var(--fs-small); line-height: 1.6; color: var(--quiet-dark);
}
.about__certs li strong { color: var(--ink-warm); font-weight: 700; }
.about__certs li:last-child { border-bottom: 1px solid var(--line-dark); }
.about .btn { margin-top: 4vh; align-self: flex-start; }
.about__body { display: flex; flex-direction: column; }

/* ── Prozess — jeder Schritt hat ein Bild, nichts klebt ── */
.process { background: var(--green-deep); padding: var(--pad-tight) var(--gut) var(--pad-mid); color: var(--paper); }
.process__head { max-width: 1300px; margin: 0 auto var(--pad-tight); }
.process__timeline { position: relative; max-width: 1300px; margin: 0 auto; padding-left: clamp(34px, 5vw, 60px); }
.process__line { position: absolute; left: 8px; top: 6px; bottom: 6px; width: 1px; background: var(--line-light); }
.process__line-fill { width: 100%; height: 100%; background: rgba(242,239,231,.55); transform: scaleY(0); transform-origin: top; }
.pstep {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 60px); align-items: center; padding-bottom: var(--pad-tight);
}
.pstep:last-child { padding-bottom: 0; }
.pstep:nth-of-type(odd) .pstep__body { order: 2; }
.pstep:nth-of-type(odd) .pstep__media { order: 1; }
.pstep__dot {
  position: absolute; left: calc(-1 * clamp(34px, 5vw, 60px) + 3px); top: 8px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--green-deep); border: 2px solid rgba(242,239,231,.6);
}
.js-motion .pstep__dot { transform: scale(0); }
.pstep__num { font-size: var(--fs-label); font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: rgba(242,239,231,.6); }
.pstep__title { font-family: var(--serif); font-weight: 350; font-size: var(--fs-statement); margin: 14px 0 16px; line-height: 1.08; }
.pstep__text { font-size: var(--fs-body); line-height: 1.7; color: var(--quiet-light); max-width: 52ch; }

/* ── Referenzen — waagerecht am Schreibtisch, senkrecht mobil ── */
.works { position: relative; background: var(--green-deep); }
.works__pin { overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: var(--pad-mid) 0; }
.js-motion .works__pin { height: 100svh; padding: 0; }
.works__head {
  padding: 0 var(--gut); margin-bottom: 5vh;
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.works__counter { font-family: var(--serif); font-size: var(--fs-lead); color: var(--quiet-light); }
.works__track {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 46px); padding: 0 var(--gut);
}
.js-motion .works__track { flex-wrap: nowrap; width: max-content; }
.wcard { width: clamp(300px, 34vw, 480px); flex-shrink: 0; }
.wcard__media {
  border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 22px;
  border: 1px solid var(--line-light);
}
/* Der Zuschnitt gehört in object-position, nicht in eine Überbreite:
   width: 116% mit margin-left: -8% wurde von der globalen Regel
   img { max-width: 100% } gekappt — übrig blieb nur die Verschiebung
   und rechts ein 38 px breiter leerer Streifen im Rahmen. */
.wcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; }
.wcard__tag {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--quiet-light); border: 1px solid var(--line-light);
  border-radius: var(--r-pill); padding: 6px 14px; margin-bottom: 14px;
}
.wcard__title { font-family: var(--serif); font-weight: 350; font-size: var(--fs-lead); line-height: 1.1; }
.wcard__loc { margin-top: 6px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242,239,231,.55); }
.wcard--cta {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4vh;
  padding: 40px; border: 1px solid var(--line-light); border-radius: 18px;
}
.wcard--cta p { font-family: var(--serif); font-size: var(--fs-statement); line-height: 1.15; }

/* ── Diskrete Vermarktung — Bild statt Farbverlauf ───────
   Grundzustand im CSS ist der lesbare. Die Bewegung baut
   darauf auf, nicht umgekehrt. Kein blur(). */
.discreet {
  position: relative; padding: var(--pad-wide) var(--gut); text-align: center;
  overflow: hidden; background: var(--green-deep);
}
.discreet__media { position: absolute; inset: -6% 0; height: 112%; }
.discreet__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.discreet__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,54,38,.9) 0%, rgba(23,54,38,.8) 45%, rgba(23,54,38,.94) 100%);
}
/* Maßstabssprung (Mappe Teil D3/B5): eine winzige, senkrecht laufende
   Randbeschriftung neben dem großen Foto — derselbe Kunstgriff wie
   Norm Architects' "WELCOME"-Spur. Rein dekorativ, deshalb aus dem
   Zugriffsbaum genommen; der Text steht lesbar schon in der Headline. */
.discreet__spine {
  position: absolute; left: clamp(10px, 2.4vw, 30px); top: 50%; z-index: 2;
  writing-mode: vertical-rl; transform: translateY(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: .38em; text-transform: uppercase;
  color: rgba(242,239,231,.4);
}
@media (max-width: 700px) { .discreet__spine { display: none; } }
.discreet .label, .discreet__line, .discreet__text { position: relative; z-index: 2; }
.discreet__line {
  font-family: var(--serif); font-weight: 320;
  font-size: var(--fs-display); line-height: 1.08; margin-top: 4vh; letter-spacing: .01em;
}
.js-motion .discreet__line { opacity: .45; }
.discreet__text {
  max-width: 620px; margin: 5vh auto 0;
  font-size: var(--fs-body); line-height: 1.75; color: var(--quiet-light);
}

/* ── Stimmen & Fragen — ein heller Akt mit Bildband ─────── */
.proof { background: var(--paper); color: var(--ink-warm); padding: 0 0 var(--pad-mid); }
/* 32:9 schneidet aus einem 3:2-Bild nur 42 % der Höhe heraus. Mittig
   verankert liefe der Schnitt durch die Stirn — der Ausschnitt sitzt
   deshalb oben, wie bei .discreet__media auch. */
.proof__band img { object-position: 50% 15%; }
.proof__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px);
  max-width: 1500px; margin: 0 auto; padding: var(--pad-mid) var(--gut) 0;
}
.voices--in-proof, .faq--in-proof { padding: 0; }
.voices--in-proof .voices__head, .faq--in-proof .faq__head { margin: 0 0 var(--pad-tight); max-width: none; }
.voices--in-proof .voices__grid { grid-template-columns: 1fr; max-width: none; }
.faq--in-proof .faq__list { max-width: none; }

/* ── Stimmen (auch auf Unterseiten verwendet) ───────────── */
.voices { background: var(--paper); color: var(--ink-warm); padding: var(--pad-mid) var(--gut); }
.voices__head { max-width: 1400px; margin: 0 auto var(--pad-tight); }
.voices__sub { margin-top: 2.4vh; font-size: var(--fs-small); font-weight: 600; color: var(--quiet-dark); }
.voices__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(18px, 2.4vw, 34px); max-width: 1400px; margin: 0 auto;
}
.voice {
  background: #fff; border: 1px solid var(--line-dark); border-radius: 20px;
  padding: clamp(26px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 20px;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.voice:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -25px rgba(36,29,22,.22); }
.voice blockquote { font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.5; flex: 1; }
.voice figcaption { font-size: 12.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(36,29,22,.62); }

/* ── Fragen & Antworten ─────────────────────────────────── */
.faq { background: var(--paper); color: var(--ink-warm); padding: var(--pad-tight) var(--gut) var(--pad-mid); }
.faq__head { max-width: 900px; margin: 0 auto var(--pad-tight); }
.faq__list { max-width: 900px; margin: 0 auto; }

/* ── Aufklapp-Bauteil (.disclosure) — Ebene 1 immer sichtbar,
   Ebene 2 auf Klick. <details>/<summary> als Grundlage: Tastatur-
   bedienung und Screenreader-Verhalten sind damit geschenkt, und
   das Bauteil funktioniert auch komplett ohne JavaScript — main.js
   animiert die Höhe nur zusätzlich, wenn es läuft und der Besucher
   keine Ruhe wünscht (siehe dortige reduceMotion-Prüfung).
   Wiederverwendbar für Leistungsseiten und Exposés: die FAQ hier
   ist die erste, aber nicht die einzige Verwendung.
   .fitem/.fitem__* laufen als Alias mit: die 38 Unterseiten sind
   Tabuzone für dieses Ticket und tragen die alten Klassennamen
   noch im HTML — der Rollout auf .disclosure ist ein Folgeticket. */
.disclosure, .fitem { border-top: 1px solid var(--line-dark); }
.disclosure:last-child, .fitem:last-child { border-bottom: 1px solid var(--line-dark); }
.disclosure summary, .fitem summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; cursor: pointer; font-family: var(--serif);
  font-size: var(--fs-lead); font-weight: 400; line-height: 1.3;
  transition: color var(--dur-micro);
}
.disclosure summary::-webkit-details-marker, .fitem summary::-webkit-details-marker { display: none; }
.disclosure summary:hover, .fitem summary:hover { color: var(--green-deep); }
/* Optionale zweite Zeile in der Summary — ein Satz, der auch ohne
   Klick stehen bleibt. Leer lassen, wenn die Überschrift selbst
   schon die ganze Aussage trägt (wie bei der FAQ hier). */
.disclosure__teaser { display: block; font-family: var(--sans); font-size: 14px; font-weight: 500; opacity: .68; margin-top: 4px; }
.disclosure__icon, .fitem__icon {
  position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-dark); transition: background-color var(--dur-mid) var(--ease-out), color var(--dur-mid) var(--ease-out);
}
.disclosure__icon::before, .disclosure__icon::after, .fitem__icon::before, .fitem__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: currentColor;
  transition: transform var(--dur-mid) var(--ease-out);
}
.disclosure__icon::before, .fitem__icon::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.disclosure__icon::after, .fitem__icon::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.disclosure[open] .disclosure__icon, .fitem[open] .fitem__icon { background: var(--green-deep); color: var(--paper); border-color: var(--green-deep); }
.disclosure[open] .disclosure__icon::after, .fitem[open] .fitem__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.disclosure__body, .fitem__body { overflow: hidden; }
.disclosure__body p, .fitem__body p {
  padding: 0 0 26px; max-width: 720px; font-size: var(--fs-body); line-height: 1.75;
  color: var(--quiet-dark);
}

/* ── Kontakt ────────────────────────────────────────────── */
.contact {
  background: var(--green-deep); color: var(--paper);
  padding: var(--pad-wide) var(--gut) var(--pad-mid); text-align: center;
}
.contact--media { text-align: left; }
.contact__grid {
  display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(30px, 5vw, 80px);
  align-items: center; max-width: 1400px; margin: 0 auto;
}
.contact__big {
  font-family: var(--serif); font-weight: 320; line-height: 1.05;
  font-size: var(--fs-display); margin-top: 3.5vh; letter-spacing: -.01em;
}
.contact__big em { color: var(--green); }
.contact__sub { margin-top: 3vh; font-size: var(--fs-lead); color: var(--quiet-light); }
.contact__actions { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 4.5vh; }
.contact--media .contact__actions { justify-content: flex-start; }
.contact__info {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px; max-width: 1400px; margin: var(--pad-mid) auto 0; text-align: left;
  border-top: 1px solid var(--line-light); padding-top: var(--pad-tight);
  font-size: 15px; line-height: 1.7; color: var(--quiet-light);
}
.contact__info-label {
  font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(242,239,231,.55); margin-bottom: 12px;
}

/* ── Fußzeile ───────────────────────────────────────────── */
.footer { background: var(--green-deep); padding: var(--pad-tight) var(--gut) 5vh; border-top: 1px solid var(--line-light); }
.footer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6vh; }
.footer__logo { width: clamp(200px, 24vw, 300px); filter: invert(1) grayscale(1) brightness(1.6); }
.footer__up {
  width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--line-light);
  background: transparent; color: var(--paper); font-size: 20px; cursor: pointer;
  transition: background-color var(--dur-mid), color var(--dur-mid), border-color var(--dur-mid);
}
.footer__up:hover, .footer__up:focus-visible { background: var(--paper); color: var(--ink-warm); border-color: var(--paper); }
.footer__grid {
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between;
  font-size: 13.5px; line-height: 1.7; color: rgba(242,239,231,.6); margin-bottom: 5vh;
}
.footer__grid p { max-width: 320px; }
.footer__links { display: flex; gap: 26px; }
.footer__links a { position: relative; }
.footer__links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-mid) var(--ease-out);
}
.footer__links a:hover::after, .footer__links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.footer__copy { font-size: 12px; letter-spacing: .06em; color: rgba(242,239,231,.62); }

/* ── Fußzeilen-Navigation ───────────────────────────────── */
.footer__nav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(28px, 4vw, 64px); padding: clamp(38px, 5.5vh, 66px) 0;
  border-top: 1px solid var(--line-light); margin-bottom: clamp(28px, 4vh, 44px);
}
.footer__col-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
  color: rgba(242,239,231,.55); margin-bottom: 18px;
}
.footer__col li { font-size: var(--fs-small); line-height: 1.5; color: rgba(242, 239, 231, .66); }
.footer__col li + li { margin-top: 11px; }
.footer__col a { transition: color var(--dur-micro) var(--ease-out); }
.footer__col a:hover, .footer__col a:focus-visible { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }

/* ── Erweiterte Navigation (zweispaltig) ────────────────── */
.menu__list--wide {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 6vw, 96px);
}
.menu__list--wide a { padding: .7vh 0; gap: 16px; }
.menu__list--wide .menu__word { font-size: clamp(22px, 4.3vh, 42px); }

/* ── Leistungs-Board — die zweite Cremestufe, kein Schwarz ──
   Mappe Teil F: Board setzt sich vom Grundton ab, ohne dunkel zu
   werden — --sand statt der früheren Vollflächen-Fläche. Textfarbe
   und Linien drehen deshalb komplett auf die helle Fassung. */
.board {
  position: relative; padding: var(--pad-mid) var(--gut);
  background: var(--sand); color: var(--ink-warm); overflow: clip;
  /* overflow: hidden erzeugt einen Scroll-Container und schaltet damit
     jedes position: sticky im Inneren wirkungslos (D-ERD-21) —
     .board__preview lief deshalb mit statt zu kleben. clip schneidet
     genauso ab, ohne diesen Nebeneffekt. Es gibt hier ohnehin nichts,
     das über den Rand hinausragt — reine Vorsichtsmaßnahme. */
}
.board__head { max-width: 1400px; margin: 0 auto clamp(34px, 5vh, 62px); }
.board__sub {
  margin-top: 22px; max-width: 58ch; font-size: var(--fs-body);
  line-height: 1.66; color: var(--quiet-dark);
}
.board__body {
  display: grid; grid-template-columns: 1fr clamp(280px, 26vw, 380px);
  gap: clamp(26px, 4vw, 64px); align-items: start; max-width: 1400px; margin: 0 auto;
}
.board__list { position: relative; }
.brow { border-top: 1px solid var(--line-dark); }
.brow:last-child { border-bottom: 1px solid var(--line-dark); }
.brow a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: clamp(16px, 2.4vw, 34px); row-gap: 8px;
  padding: clamp(18px, 2.5vh, 30px) 4px;
  transition: padding-left var(--dur-mid) var(--ease-out);
}
.brow a:hover, .brow a:focus-visible { padding-left: clamp(12px, 1.8vw, 26px); }
.brow__num {
  grid-column: 1; grid-row: 1;
  font-family: var(--serif); font-size: 13px; letter-spacing: .18em;
  color: var(--quiet-dark); padding-top: .55em;
}
.brow__title {
  grid-column: 2; grid-row: 1;
  font-family: var(--serif); font-weight: 300; letter-spacing: -.015em;
  font-size: var(--fs-statement); line-height: 1.06; color: var(--ink-warm);
}
.brow__desc {
  grid-column: 2; grid-row: 2; max-width: 52ch;
  font-size: 14px; line-height: 1.55; color: var(--quiet-dark);
}
.brow__arrow {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  border: 1px solid var(--line-dark); display: grid; place-items: center;
  font-size: 17px; color: var(--ink-warm);
  transition: background-color var(--dur-mid) var(--ease-out), color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.brow a:hover .brow__arrow, .brow a:focus-visible .brow__arrow {
  background: var(--green-deep); border-color: var(--green-deep); color: var(--paper);
  transform: rotate(-45deg);
}
.board__preview {
  /* Bleibt unter der jetzt dauerhaft sichtbaren Kopfleiste stehen (D-ERD-21) —
     Abstand zieht aus derselben Größe, die die Sprungmarken benutzen, plus
     Luft. Der Container hat kein overflow mehr, das sticky abschalten könnte,
     siehe .board oben. */
  position: sticky; top: calc(var(--header-h) + 24px); overflow: hidden; border-radius: var(--r-lg);
  aspect-ratio: 4 / 5; background: var(--paper-dim);
}
.board__preview img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--dur-micro) var(--ease-out);
}
.board__preview.is-swapping img { opacity: 0; }

/* ── Grundzustände der Bewegung ─────────────────────────
   Ohne JavaScript ist alles lesbar. Die verborgenen
   Zustände setzt erst die Klasse js-motion, die main.js
   und page.js als erste Anweisung vergeben — und zwar nur
   dann, wenn der Besucher keine ruhige Darstellung wünscht. */
.js-motion .reveal { opacity: 0; transform: translateY(38px); }
.js-motion .reveal-clip { clip-path: inset(10% 6% 10% 6% round var(--r-lg)); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1000px) {
  .manifest { grid-template-columns: 1fr; padding: var(--pad-mid) var(--gut); gap: var(--pad-tight); }
  .manifest__media { border-radius: var(--r-lg); }
  .about { padding: var(--pad-mid) var(--gut); }
  .about__grid { grid-template-columns: 1fr; }
  .about__media { border-radius: var(--r-lg); }
  .contact__grid { grid-template-columns: 1fr; }
  .contact--media .contact__actions { justify-content: flex-start; }
  .proof__grid { grid-template-columns: 1fr; }
  .board__body { grid-template-columns: 1fr; }
  .board__preview { position: static; aspect-ratio: 16 / 9; order: -1; margin-bottom: clamp(20px, 3vh, 34px); }
}
@media (max-width: 980px) {
  .scard { grid-template-columns: 1fr; min-height: 0; top: 11vh; box-shadow: none; border: 1px solid var(--line-light); }
  .scard__media { max-height: 34vh; min-height: 0; }
  .header__phone { display: none; }
  .header__wordmark { font-size: 15px; }
  .stat { border-right: none; border-bottom: 1px solid var(--line-light); padding-bottom: 3vh; }
  .stat:last-child { border-bottom: none; }
  .wcard { width: min(76vw, 420px); }
  .works__head { padding-right: 20px; }
  .menu__meta { gap: 20px; }
  .menu__word { font-size: clamp(32px, 6vh, 54px); }
}
@media (max-width: 900px) {
  .pstep { grid-template-columns: 1fr; gap: clamp(18px, 3vh, 28px); }
  .pstep:nth-of-type(odd) .pstep__body { order: 1; }
  .pstep:nth-of-type(odd) .pstep__media { order: 2; }

  /* Referenzen: unter 901 px läuft kein Pinning (main.js, gleiche
     Grenze). Ohne diese Rücknahme bliebe der Kasten 100svh hoch und
     die Reihe unumbrochen breiter als der Schirm — dann ist nur die
     erste Karte erreichbar. Hier stehen die Karten untereinander. */
  .works__pin { overflow: visible; }
  .js-motion .works__pin { height: auto; padding: var(--pad-mid) 0; }
  .js-motion .works__track { flex-wrap: wrap; width: auto; }
  /* Der Zähler zählt den waagerechten Lauf mit. Stehen die Karten
     untereinander, zählt er nichts mehr, sondern behauptet nur. */
  .works__counter { display: none; }
}
@media (max-width: 700px) {
  .menu__list--wide { grid-template-columns: 1fr; }
  .menu__list--wide .menu__word { font-size: clamp(19px, 3.1vh, 28px); }
  .brow__arrow { width: 38px; height: 38px; font-size: 14px; }
  .frame--band { aspect-ratio: 16 / 9; }
  .frame--hero { aspect-ratio: 4 / 5; }
  .frame--expose { aspect-ratio: 3 / 2; }
  .frame--blog { aspect-ratio: 3 / 2; }
}
/* Mobil vereinfacht statt verkleinert (D-ERD-21): die perfekt
   zentrierte Komposition passt auf 390–560 px nicht mehr sicher
   zwischen Kopfleiste und Scroll-Hinweis — auf 390×844 blieben nur
   4 px Luft zum Fuß, oder die Mitte rutschte 11 px unter die Leiste.
   Statt weiter zu zentrieren, beginnt der Inhalt hier direkt unter
   der Leiste. Weniger Kunstgriff, aber garantiert ohne Überlappung. */
@media (max-width: 680px) {
  .hero__content { justify-content: flex-start; padding-top: clamp(20px, 4vh, 36px); }
  .hero__kicker { margin-bottom: 2.2vh; }
  .hero__sub { margin-top: 2.6vh; }
  /* Steht jetzt dauerhaft im Gütemerkmal der Kopfleiste — auf schmalen
     Schirmen doppelt sich sonst derselbe Satz, und der Platz fehlt
     zwischen Titel und Fuß (D-ERD-21). */
  .hero__cert { display: none; }
  .hero__cta { margin-top: 2.6vh; }
}
@media (max-width: 560px) {
  .hero__title { font-size: clamp(64px, 23vw, 110px); }
  .hero__cta .btn { padding: 15px 26px; font-size: 13.5px; }
  .btn--big { padding: 18px 30px; font-size: 14px; }
  .contact__actions { flex-direction: column; align-items: stretch; }
  .footer__top { flex-direction: column; gap: 30px; align-items: flex-start; }
}

/* ── Ruhige Fassung ─────────────────────────────────────
   Vollwertig: alle Inhalte stehen an ihrem Platz, nur ohne
   Weg. js-motion wird in diesem Fall gar nicht erst vergeben,
   deshalb genügen hier wenige Sicherungen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero__scrollline::after { display: none; }
  .preloader { display: none !important; }
  body.is-loading { overflow: auto; height: auto; }
}