:where(a) { color: inherit; }
:where(main p a) { color: var(--clay); text-underline-offset: 3px; }
main p a, main li a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
main .cta-c .meta a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
main .uw-mid-cta > span { color: var(--muted); }
main .uw-mid-cta .btn-text { color: var(--ink); }
main .uw-mid-cta .btn-text span { color: inherit; }

:root {
    --warm-rgb: 239,235,229;
    --cream-rgb: 247,243,236;
    --ink-rgb: 15,15,14;
    --shade-rgb: 11,11,10;
    --clay-rgb: 185,117,94;
    --clay-light-rgb: 226,179,159;
    --clay-soft-rgb: 198,135,107;
    --sand-rgb: 234,224,211;
    --linen-rgb: 238,232,222;
    --taupe-rgb: 177,156,136;
    --wood-rgb: 100,82,63;
    --sage-rgb: 132,146,139;
    --forest-rgb: 61,75,58;
    --walnut-rgb: 48,39,31;
    --night-rgb: 20,19,16;
    --black-rgb: 0,0,0;
    --white-rgb: 255,255,255;
    --warm: rgb(var(--warm-rgb));
    --cream: rgb(var(--cream-rgb));
    --ink: rgb(var(--ink-rgb));
    --ink-soft: #2A2825;
    --clay-contrast: #7A4A3A;
    --nav-h: 88px;
    --muted: #6B655C;
    --muted-soft: #B8B2A6;
    --clay: #94563F;
    --clay-deco: #B9755E;
    --clay-light: rgb(var(--clay-light-rgb));
    --forest: rgb(var(--forest-rgb));
    --line: rgba(var(--ink-rgb),0.12);

    /* Bau 2 SPACING — kanonische Tokens für alle Live-Routen (jede Seite lädt
       home.css zuerst). Quelle: handoff/leaves/bau2-spacing.md.
       Home-Hero und Innenseiten-Heroes teilen sich min(88vh, 820px). */
    --page-max: 1600px;
    --content-max: 1400px;
    --page-pad: 48px;
    --hero-pad-x: var(--page-pad);
    --page-pad-mobile: 24px;
    /* K6: ein Pad-Token (~88 px bei 1440) am Sektions-Wrapper, nie top+bottom je Kind. */
    --section-pad-y: clamp(64px, 6vw, 96px);
    --section-pad-y-mobile: 64px;
    /* K3: --hero-min-h gilt nur noch fuer den Vollbild-Home-Hero (.st-home-hero).
       Split-Heroes nehmen die Hoehe des Bildes (--hero-split-*), nicht diesen Token. */
    --hero-min-h: min(88vh, 820px);
    --hero-min-h-mobile: 100dvh;
    --hero-split-cols: minmax(0, 45fr) minmax(0, 55fr);
    --hero-split-gap: 64px;
    --hero-pad-top: calc(var(--nav-h, 88px) + 12px);
    --hero-pad-bottom: 48px;
    --hero-type-max: 960px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* overflow-x: clip — WebKit zählt sonst das off-canvas Nav-Sheet (translateX 104%)
     in die Dokumentbreite (scrollWidth 376 statt 375). clip erzeugt keinen
     Scroll-Container, sticky und fixed bleiben intakt. */
  html { scroll-behavior: auto; overflow-x: clip; }
  body { background: var(--warm); color: var(--ink); font-family: "Host Grotesk", system-ui, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

  /* Lenis required CSS */
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: clip; }
  .lenis.lenis-smooth iframe { pointer-events: none; }
  .lenis.lenis-scrolling iframe { pointer-events: none; }
  img { display: block; max-width: 100%; height: auto; }

  /* Hover-Zoom-Effekt für Bilder in bestimmten Containern */
  .ip-img-wrap, .bn-photo, .svc-img, .rat-card .rat-img, .img-break { position: relative; overflow: hidden; }
  .ip-img-wrap img, .bn-photo img, .svc-img img, .rat-card .rat-img img, .img-break img {
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ip-img-wrap:hover img, .bn-photo:hover img, .svc-img:hover img, .rat-card:hover .rat-img img, .img-break:hover img {
    transform: scale(1.06);
  }
  .display { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 400; letter-spacing: -0.03em; }

  /* K1 Typo-Basis: sechs Stufen aus fonts.css. h2 immer 400/normal, Italic-Akzent nur per <em>.
     Sektions-CSS setzt keine eigene font-size auf h1/h2/h3 mehr. */
  h1 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 400; font-size: var(--type-h1); line-height: 1.04; letter-spacing: -0.025em; }
  h2 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 400; font-style: normal; font-size: var(--type-h2); line-height: 1.06; letter-spacing: -0.02em; }
  h3 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 500; font-size: var(--type-h3); line-height: 1.2; letter-spacing: -0.015em; }
  h1 em, h2 em, h3 em { font-style: italic; font-weight: 300; color: var(--clay); }
  p { font-size: var(--type-body-1); }
  /* U9 R12: EIN Label-Bauteil sitewide. .uc, .ft-heading und .ft-bottom teilen
     dieselben Werte; Nummernraster der Unterseiten zieht nach. */
  .uc { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; }

  /* U10 R13 Sektionsstart: .sec-mark loest den Uppercase-Kicker im Seitenfluss
     ab. Nummer, Strich, Thema. Versalien bleiben nur in Nav, Buttons und
     Fusszeile, dort gilt weiter .uc. Kein Versalsatz, damit die Sektion wie
     eine Planposition anfaengt und nicht wie ein Label. */
  .sec-mark {
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: none;
    font-weight: 500;
    color: var(--muted);
    display: flex;
    gap: 14px;
    align-items: baseline;
    margin-bottom: 18px;
  }
  /* <i> traegt nur die Nummer, nicht die Kursive. */
  .sec-mark i { font-style: normal; font-variant-numeric: tabular-nums; }
  .sec-mark .rule { width: 24px; height: 1px; background: var(--clay); align-self: center; flex: none; }

  /* U10 R13 Mono traegt Inhalt: .spec steht unter einem Foto und nennt nur
     belegte Angaben (Motiv, Ort wo belegt, Jahr aus dem Post-Datum). Keine
     Holzart, keine Masse, keine Projektzuordnung. Trenner ist der Mittelpunkt,
     nie ein Gedankenstrich. */
  .spec {
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    margin-top: 10px;
  }
  /* Werte, Telefon, Postleitzahl: dieselbe Werkstattschrift, Ziffern auf
     gleicher Breite. Nur auf die Zahl gesetzt, nicht auf den Satz. */
  .mono-num { font-family: "Geist Mono", monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

  :where(h1, h2, h3, .display, .word-reveal, .sub-h1, .sub-h2, .sub-h3, .legal-h1, .legal-section-h2) {
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }

  :where(.hero-sub, .sub-lead, .legal-lead, .section-lead, .lead) {
    text-wrap: pretty;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }

  /* Dezenter Inline-Textlink im Fliesstext: feine Clay-Unterlinie, ruhiger Hover.
     Auf dunklem Grund (Hero, Meta, dark bands) heller Ton. */
  .flow-link {
    color: var(--clay);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--clay-rgb), 0.4);
    padding-bottom: 1px;
    transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .flow-link:hover { border-bottom-color: var(--clay-deco); }
  .hero-sub .flow-link,
  .meta .flow-link,
  .cta-c .flow-link,
  .ft .flow-link,
  .rl-beweis-note .flow-link,
  .nb-rolle-text .flow-link,
  .nb-rolle-note .flow-link {
    color: var(--cream);
    border-bottom-color: rgba(var(--cream-rgb), 0.4);
  }
  .hero-sub .flow-link:hover,
  .meta .flow-link:hover,
  .cta-c .flow-link:hover,
  .ft .flow-link:hover,
  .rl-beweis-note .flow-link:hover,
  .nb-rolle-text .flow-link:hover,
  .nb-rolle-note .flow-link:hover {
    color: var(--clay-light);
    border-bottom-color: var(--clay-light);
  }

  /* === REVEAL-ANIMATIONEN, alle ease-out cubic-bezier(0.22, 1, 0.36, 1) === */
  .word-reveal .word {
    display: inline-block; opacity: 0; transform: translateY(0.55em) rotateX(-65deg);
    transform-origin: 50% 100%;
    transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .word-reveal .word.rev { opacity: 1; transform: translateY(0) rotateX(0); }
  .word-reveal .sp { display: inline-block; width: 0.28em; }

  .char-reveal .ch {
    display: inline-block; opacity: 0; transform: rotateX(-90deg) translateY(0.2em);
    transform-origin: 50% 100%;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .char-reveal .ch.rev { opacity: 1; transform: rotateX(0) translateY(0); }

  .fade-up { opacity: 0; transform: translateY(26px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
  .fade-up.rev { opacity: 1; transform: translateY(0); }

  .stagger-parent .stagger-child { opacity: 0; transform: translateY(34px); transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); }
  .stagger-parent.rev .stagger-child { opacity: 1; transform: translateY(0); }
  .stagger-parent.rev .stagger-child:nth-child(1) { transition-delay: 0.05s; }
  .stagger-parent.rev .stagger-child:nth-child(2) { transition-delay: 0.14s; }
  .stagger-parent.rev .stagger-child:nth-child(3) { transition-delay: 0.23s; }
  .stagger-parent.rev .stagger-child:nth-child(4) { transition-delay: 0.32s; }
  .stagger-parent.rev .stagger-child:nth-child(5) { transition-delay: 0.41s; }
  .stagger-parent.rev .stagger-child:nth-child(6) { transition-delay: 0.50s; }
  .stagger-parent.rev .stagger-child:nth-child(7) { transition-delay: 0.59s; }
  .stagger-parent.rev .stagger-child:nth-child(8) { transition-delay: 0.68s; }

  @media (prefers-reduced-motion: reduce) {
    .word-reveal .word, .char-reveal .ch, .fade-up, .stagger-parent .stagger-child, .img-break figcaption {
      opacity: 1 !important; transform: none !important; transition: none !important;
    }
  }

  @media (max-width: 899px) {
    .word-reveal .word, .char-reveal .ch, .fade-up, .stagger-parent .stagger-child, .img-break figcaption {
      opacity: 1 !important; transform: none !important; transition: none !important;
    }
  }

  /* === BUTTON SYSTEM (F7): Primär filled, Sekundär Ghost, Tertiär Textlink. Hover 150ms ease. === */
  .btn-premium,
  .kt-submit {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 48px; padding: 15px 26px; border: 1px solid transparent; border-radius: 2px;
    font-family: "Host Grotesk", sans-serif; font-size: 12px; letter-spacing: 0.2em;
    text-transform: uppercase; font-weight: 500; text-decoration: none; overflow: hidden;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
    cursor: pointer; background: transparent; box-sizing: border-box;
    appearance: none; -webkit-appearance: none;
  }
  .btn-premium::before { content: none; display: none; }
  .btn-premium > span, .btn-premium .arrow { position: relative; z-index: 1; }
  .btn-premium .arrow { display: inline-block; transition: transform 150ms ease; }
  .btn-premium:hover .arrow { transform: translateX(4px); }
  .arrow svg { width: 18px; height: 18px; display: block; }
  /* Anruf-Knopf (Termin 02.10.2026): Wort in Versalien, Nummer daneben in normaler
     Laufweite mit Tabellenziffern, damit sie als Nummer lesbar bleibt. */
  .btn-premium .btn-num {
    text-transform: none; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
    opacity: 0.78; white-space: nowrap;
  }

  /* Sekundär: Ghost, 1px Rahmen, gleiche Höhe. Auf hell: ink. */
  .btn-premium.dark {
    color: var(--ink); background: transparent; border-color: var(--ink);
  }
  .btn-premium.dark:hover, .btn-premium.dark:focus-visible {
    color: var(--ink); background: rgba(var(--ink-rgb),0.08); border-color: var(--ink);
  }

  /* Sekundär: Ghost auf Foto/dunkel. */
  .btn-premium.light {
    color: var(--cream); background: transparent; border-color: var(--cream);
  }
  .btn-premium.light:hover, .btn-premium.light:focus-visible {
    color: var(--cream); background: rgba(var(--cream-rgb),0.12); border-color: var(--cream);
  }

  /* Primär auf Foto/dunkel: cream Fläche, ink Text. Hover dunkelt ab. */
  .btn-premium.solid-cream {
    color: var(--ink); background: var(--cream); border-color: var(--cream);
  }
  .btn-premium.solid-cream:hover, .btn-premium.solid-cream:focus-visible {
    color: var(--ink); background: var(--warm); border-color: var(--warm);
  }

  /* Primär auf hell: ink Fläche, cream Text. Hover hellt ab. */
  .btn-premium.solid-ink,
  .kt-submit {
    color: var(--cream); background: var(--ink); border-color: var(--ink);
  }
  .btn-premium.solid-ink:hover, .btn-premium.solid-ink:focus-visible,
  .kt-submit:hover:not(:disabled), .kt-submit:focus-visible:not(:disabled) {
    color: var(--cream); background: var(--ink-soft); border-color: var(--ink-soft);
  }
  .kt-submit:disabled { opacity: .6; cursor: wait; }

  /* Tertiär: Textlink mit Pfeil, gleiche Small-Caps-Familie, keine Chip-Höhe erzwungen als Fläche. */
  .btn-text {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0; border: 0; background: none; border-radius: 0;
    font-family: "Host Grotesk", sans-serif; font-size: 12px; letter-spacing: 0.2em;
    text-transform: uppercase; font-weight: 500; text-decoration: none; color: inherit;
    cursor: pointer; transition: color 150ms ease;
  }
  .btn-text:hover, .btn-text:focus-visible { color: var(--clay); }
  .btn-text .arrow { display: inline-block; transition: transform 150ms ease; }
  .btn-text:hover .arrow { transform: translateX(4px); }

  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 22px var(--page-pad); display: flex; justify-content: space-between; align-items: center;
    background: var(--cream, #f7f3ec);
    mix-blend-mode: normal;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
    box-shadow: 0 10px 28px rgba(var(--ink-rgb), 0.07);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s, border-color 0.4s, backdrop-filter 0.4s;
  }
  body:has(.hero) nav:not([data-scrolled="true"]) {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
  }
  nav .logo { font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
  nav .logo em { font-style: italic; color: rgba(var(--ink-rgb),0.6); font-weight: 400; margin-left: 4px; transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
  body:has(.hero) nav:not([data-scrolled="true"]) .logo { color: var(--cream); }
  body:has(.hero) nav:not([data-scrolled="true"]) .logo em { color: rgba(var(--cream-rgb),0.7); }
  .navlinks { display: flex; gap: 8px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; align-items: center; }
  /* K5/K8 handwerk-local: Telefon als sichtbarer Textlink in Desktop-Nav und Mobile-Chrome. */
  .navlinks .nav-tel,
  .nav-mobile-chrome .nav-tel {
    font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: 0.02em;
    text-transform: none; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--ink); text-decoration: none;
  }
  .nav-mobile-chrome { display: none; align-items: center; gap: 4px; }
  .nav-mobile-chrome .nav-tel { padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; }
  body:has(.hero) nav:not([data-scrolled="true"]) .nav-mobile-chrome .nav-tel { color: var(--cream); }
  nav[data-scrolled="true"] .nav-mobile-chrome .nav-tel { color: var(--ink); }
  /* U9: Burger erst ab 1000px abwaerts. Zwischen 1001 und 1200 traegt die Nav das
     Kurzlabel («Baubiologie») und engere Laufweite, damit die sechs Punkte plus
     Telefon und CTA in eine Zeile passen, statt auf 1024 in den Burger zu fallen. */
  @media (max-width: 1000px) {
    .navlinks { display: none; }
    .nav-mobile-chrome { display: inline-flex; }
  }
  .navlinks a .lbl-short { display: none; }
  @media (min-width: 1001px) and (max-width: 1439px) {
    .navlinks { gap: 0; letter-spacing: 0.06em; }
    .navlinks a { padding: 9px 7px; }
    .navlinks a:not(.nav-cta)::after { left: 7px; right: 7px; }
    .navlinks .nav-cta { padding: 12px 12px; gap: 6px; margin-left: 4px; }
    .navlinks .nav-tel { font-size: 12px; }
    nav { padding: 22px 20px; }
  }
  @media (min-width: 1001px) and (max-width: 1200px) {
    .navlinks a .lbl-long { display: none; }
    .navlinks a .lbl-short { display: inline; }
    .navlinks a { padding: 9px 5px; }
    .navlinks a:not(.nav-cta)::after { left: 5px; right: 5px; }
    .navlinks .nav-cta { padding: 12px 10px; letter-spacing: 0.12em; }
    nav { padding: 22px 16px; }
  }
  .navlinks a {
    color: var(--ink); text-decoration: none; padding: 9px 14px; border-radius: 2px; position: relative; overflow: hidden; white-space: nowrap;
    transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body:has(.hero) nav:not([data-scrolled="true"]) .navlinks a:not(.nav-cta) { color: var(--cream); }
  .navlinks a:not(.nav-cta)::before { display: none; }
  .navlinks a:not(.nav-cta)::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px;
    background: var(--clay-deco); transform: scaleX(0); transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .navlinks a:not(.nav-cta):hover::after { transform: scaleX(1); }
  .navlinks a > span { position: relative; z-index: 1; }
  /* Header-CTA: Primär filled (gleiche Hoehe wie .btn-premium, 48px). Auf Foto-Heroes
     (body[data-hero=photo]) Textlink, siehe K5-Block unten. */
  .navlinks .nav-cta {
    color: var(--cream); background: var(--ink); border: 1px solid var(--ink); border-radius: 2px;
    min-height: 48px; padding: 12px 20px; position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
  }
  .navlinks .nav-cta::before { content: none; display: none; }
  .navlinks .nav-cta > span, .navlinks .nav-cta .arrow { position: relative; z-index: 1; }
  .navlinks .nav-cta:hover {
    color: var(--cream); background: var(--ink-soft); border-color: var(--ink-soft);
  }
  .navlinks .nav-cta:hover .arrow { transform: translateX(4px); }
  .navlinks .nav-cta .arrow { transition: transform 150ms ease; }
  body:has(.hero) nav:not([data-scrolled="true"]) .navlinks .nav-cta {
    color: var(--ink);
    background: var(--cream);
    border-color: var(--cream);
  }
  body:has(.hero) nav:not([data-scrolled="true"]) .navlinks .nav-cta:hover {
    color: var(--ink);
    background: var(--warm);
    border-color: var(--warm);
  }

  body > section, main > section { padding: 48px; position: relative; }
  /* U9: Anker-Offset folgt der gemessenen Nav-Hoehe statt einem festen Wert. */
  section[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }

  /* HERO, full-bleed mit Hintergrundbild */
  .hero {
    /* Bau 4 (04.09.) G5: der Hero endet vor der Falz, statt sie exakt zu fuellen.
       min(88vh, 820px) deckelt ihn auf hohen Screens und zeigt die Kartensektion an. */
    min-height: min(88vh, 820px); padding: 0; position: relative; overflow: hidden;
    color: var(--cream); background: var(--ink);
  }
  .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .hero-bg img {
    width: 100%; height: 100%; object-fit: cover; object-position: 55% center;
    filter: saturate(1.04) contrast(1.03);
    transform: scale(1.12);
    animation: heroZoomOut 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
    will-change: transform;
  }
  @keyframes heroZoomOut { to { transform: scale(1); } }
  .hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(var(--shade-rgb),0.5) 0%, rgba(var(--shade-rgb),0.25) 35%, rgba(var(--shade-rgb),0.78) 100%),
      linear-gradient(90deg, rgba(var(--shade-rgb),0.8) 0%, rgba(var(--shade-rgb),0.12) 55%, rgba(var(--shade-rgb),0.26) 100%);
  }
  .hero-proof-scene .hero-bg img { object-position: var(--hero-proof-pos, 64% center); }
  .hero-proof-scene .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(var(--shade-rgb),0.34) 0%, rgba(var(--shade-rgb),0.12) 42%, rgba(var(--shade-rgb),0.58) 100%),
      linear-gradient(90deg, rgba(var(--shade-rgb),0.72) 0%, rgba(var(--shade-rgb),0.18) 52%, rgba(var(--shade-rgb),0.12) 100%);
  }
  .hero-inner {
    position: relative; z-index: 1;
    min-height: min(88vh, 820px); padding: 100px var(--hero-pad-x) var(--hero-pad-bottom);
    display: grid; grid-template-rows: auto 1fr auto; gap: 28px;
    max-width: var(--page-max); margin: 0 auto;
  }
  .hero-kicker { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--cream-rgb),0.78); }
  .hero-kicker span b { color: var(--cream); font-weight: 500; }
  .hero-main { max-width: 960px; align-self: center; }
  body > .hero:not(.hero-proof-scene) .hero-main, main > .hero:not(.hero-proof-scene) .hero-main { transform: translateY(5vh); }
  .hero-main h1 {
    font-size: var(--type-h1); line-height: 1.04; letter-spacing: -0.025em;
    color: var(--cream); max-width: 18ch;
  }
  /* Vollbild-Home-Hero: einzige Ausnahme der Skala (K1), bleibt die lauteste Zeile. */
  .hero.st-home-hero .hero-main h1 { font-size: var(--type-h1-display); }
  .hero-main h1 .it { font-style: italic; color: var(--clay-light); font-weight: 300; }
  .hero-sub { margin-top: 24px; max-width: 560px; font-size: var(--type-body-1); line-height: 1.5; color: rgba(var(--cream-rgb),0.9); }
  .hero-sub b { color: var(--cream); font-weight: 500; }
  .hero-cta-row { margin-top: 28px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
  .hero-cta-row a.primary { padding: 14px 22px; background: var(--cream); color: var(--ink); text-decoration: none; border-radius: 2px; font-weight: 500; }
  .hero-cta-row a.primary:hover { background: var(--clay-light); }
  .hero-cta-row a.ghost { color: var(--cream); text-decoration: none; border: 1px solid rgba(var(--cream-rgb),0.5); padding: 13px 20px; border-radius: 2px; }
  .hero-cta-row a.ghost:hover { border-color: var(--cream); background: rgba(var(--cream-rgb),0.08); }
  .proof-lab {
    position: relative;
    min-height: 92vh;
    padding: 0;
    overflow: hidden;
    color: var(--ink);
    background: var(--cream);
    border-top: 1px solid rgba(var(--ink-rgb),0.14);
    box-shadow: inset 0 1px 0 rgba(var(--cream-rgb),0.52);
  }
  .proof-lab::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--proof-image);
    background-size: cover;
    background-position: var(--proof-pos, center);
    filter: saturate(1.02) contrast(1.02);
    transform: scale(1.01);
  }
  .proof-lab::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(var(--cream-rgb),0.98) 0%, rgba(var(--cream-rgb),0.92) 38%, rgba(var(--cream-rgb),0.38) 58%, rgba(var(--cream-rgb),0.05) 100%),
      linear-gradient(180deg, rgba(var(--cream-rgb),0.2) 0%, rgba(var(--cream-rgb),0) 54%, rgba(var(--ink-rgb),0.16) 100%);
  }
  .proof-lab.proof-lab-dark {
    color: var(--cream);
    background: var(--ink);
  }
  .proof-lab.proof-lab-dark::after {
    background:
      linear-gradient(90deg, rgba(var(--ink-rgb),0.88) 0%, rgba(var(--ink-rgb),0.78) 38%, rgba(var(--ink-rgb),0.34) 58%, rgba(var(--ink-rgb),0.04) 100%),
      linear-gradient(180deg, rgba(var(--ink-rgb),0.06) 0%, rgba(var(--ink-rgb),0.12) 52%, rgba(var(--ink-rgb),0.58) 100%);
  }
  .proof-lab__inner {
    position: relative;
    z-index: 1;
    min-height: 92vh;
    max-width: 1600px;
    margin: 0 auto;
    padding: 128px 56px 154px;
    display: grid;
    grid-template-columns: minmax(320px, 0.72fr) minmax(320px, 1fr);
    gap: 48px;
    align-items: center;
  }
  .proof-lab--image-only .proof-lab__inner,
  .proof-lab__inner:has(.proof-lab__board) {
    grid-template-columns: minmax(320px, 0.68fr) minmax(420px, 1.18fr);
  }
  .proof-lab__content {
    max-width: 620px;
  }
  .proof-lab__content .uc {
    color: var(--muted);
    margin-bottom: 18px;
  }
  .proof-lab-dark .proof-lab__content .uc {
    color: rgba(var(--cream-rgb),0.52);
  }
  .proof-lab__content h2 {
    max-width: 12ch;
  }
  .proof-lab__content h2 em {
    font-style: italic;
    color: var(--clay);
    font-weight: 300;
  }
  .proof-lab-dark .proof-lab__content h2 em {
    color: var(--clay-light);
  }
  .proof-lab__content p {
    margin-top: 26px;
    max-width: 560px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-soft);
  }
  .proof-lab-dark .proof-lab__content p {
    color: rgba(var(--cream-rgb),0.82);
  }
  .proof-lab__tabs {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .proof-lab__tabs button {
    appearance: none;
    border: 1px solid rgba(var(--ink-rgb),0.18);
    border-radius: 999px;
    background: rgba(var(--cream-rgb),0.48);
    color: var(--ink);
    min-height: 36px;
    padding: 8px 13px;
    font-family: "Host Grotesk", system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease, transform 0.28s ease;
  }
  .proof-lab__tabs button:hover,
  .proof-lab__tabs button:focus-visible,
  .proof-lab__tabs button.is-active {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
    transform: translateY(-1px);
  }
  .proof-lab-dark .proof-lab__tabs button {
    border-color: rgba(var(--cream-rgb),0.22);
    background: rgba(var(--cream-rgb),0.08);
    color: rgba(var(--cream-rgb),0.86);
  }
  .proof-lab-dark .proof-lab__tabs button:hover,
  .proof-lab-dark .proof-lab__tabs button:focus-visible,
  .proof-lab-dark .proof-lab__tabs button.is-active {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--cream);
  }
  .proof-lab__notes {
    margin-top: 18px;
    min-height: 94px;
    max-width: 560px;
    border-top: 1px solid rgba(var(--ink-rgb),0.16);
  }
  .proof-lab-dark .proof-lab__notes {
    border-top-color: rgba(var(--cream-rgb),0.18);
  }
  .proof-lab__note {
    display: none;
    margin: 0;
    padding-top: 18px;
    font-family: "Host Grotesk", system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.65;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  .proof-lab__note.is-active {
    display: block;
  }
  .proof-lab-dark .proof-lab__note {
    color: rgba(var(--cream-rgb),0.58);
  }
  .proof-lab__chips {
    position: absolute;
    z-index: 1;
    right: 56px;
    bottom: 56px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 520px;
    display: none;
  }
  .proof-lab__chips span {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid rgba(var(--ink-rgb),0.14);
    border-radius: 999px;
    background: rgba(var(--cream-rgb),0.74);
    color: var(--ink-soft);
    font-family: "Host Grotesk", system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
  }
  .proof-lab-dark .proof-lab__chips span {
    border-color: rgba(var(--cream-rgb),0.16);
    background: rgba(var(--ink-rgb),0.5);
    color: rgba(var(--cream-rgb),0.78);
  }

  .proof-lab__board {
    position: relative;
    display: block;
    align-self: center;
    justify-self: stretch;
    padding: 34px;
    border: 1px solid rgba(var(--cream-rgb),0.14);
    border-radius: 5px;
    background:
      linear-gradient(145deg, rgba(var(--walnut-rgb),0.92), rgba(var(--night-rgb),0.82)),
      rgba(var(--ink-rgb),0.78);
    box-shadow: 0 30px 90px rgba(var(--ink-rgb),0.28);
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .proof-lab__board::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(var(--cream-rgb),0.07);
    border-radius: 4px;
    background:
      linear-gradient(135deg, rgba(var(--cream-rgb),0.06), transparent 40%),
      linear-gradient(180deg, rgba(var(--clay-light-rgb),0.05), transparent 58%);
    pointer-events: none;
  }
  .proof-lab__board > * {
    position: relative;
    z-index: 1;
  }
  .board-kicker {
    font-family: "Host Grotesk", system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(var(--cream-rgb),0.54);
  }
  .board-title {
    margin-top: 12px;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--cream);
  }
  .board-grid {
    margin-top: 22px;
    padding: 8px 14px;
    border: 1px solid rgba(var(--cream-rgb),0.11);
    border-radius: 4px;
    background: rgba(var(--cream-rgb),0.055);
  }
  .board-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(var(--cream-rgb),0.09);
  }
  .board-row:last-child { border-bottom: 0; }
  .board-row span,
  .board-mini span {
    font-family: "Host Grotesk", sans-serif;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-transform: none;
    color: rgba(var(--cream-rgb),0.6);
  }
  .board-row b {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
    color: rgba(var(--cream-rgb),0.9);
  }
  .board-mini {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .board-mini span {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid rgba(var(--cream-rgb),0.12);
    border-radius: 999px;
    background: linear-gradient(120deg, rgba(var(--cream-rgb),0.1), rgba(var(--clay-light-rgb),0.08));
    text-align: center;
  }

  .rl-wall-map,
  .lm-light-map,
  .ab-desk-map {
    position: relative;
    margin-top: 22px;
    min-height: 150px;
    border: 1px solid rgba(var(--cream-rgb),0.11);
    border-radius: 5px;
    background:
      linear-gradient(135deg, rgba(var(--cream-rgb),0.08), rgba(var(--clay-light-rgb),0.05)),
      rgba(var(--cream-rgb),0.035);
    overflow: hidden;
  }
  .rl-wall-window {
    position: absolute;
    left: 18px;
    top: 18px;
    bottom: 18px;
    width: 80px;
    border: 1px solid rgba(var(--cream-rgb),0.22);
    background: linear-gradient(90deg, rgba(var(--cream-rgb),0.24), rgba(var(--cream-rgb),0.04));
  }
  .rl-wall-corner {
    position: absolute;
    left: 116px;
    top: 18px;
    bottom: 18px;
    width: 34%;
    border-left: 1px solid rgba(var(--cream-rgb),0.18);
    background: linear-gradient(90deg, rgba(var(--clay-rgb),0.18), rgba(var(--cream-rgb),0));
  }
  .rl-wall-probe {
    position: absolute;
    right: 38px;
    top: 54px;
    width: 96px;
    height: 36px;
    border-radius: 999px 999px 18px 18px;
    background:
      radial-gradient(circle at 32% 46%, rgba(var(--cream-rgb),0.72), transparent 28%),
      linear-gradient(90deg, rgba(var(--clay-light-rgb),0.56), rgba(var(--clay-rgb),0.2));
    transform: rotate(-8deg);
  }
  .lm-light-map::before {
    content: "";
    position: absolute;
    right: 28px;
    top: 18px;
    width: 150px;
    height: 116px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, rgba(var(--clay-light-rgb),0.42), rgba(var(--cream-rgb),0.02));
  }
  .lm-surface {
    position: absolute;
    left: 22px;
    right: 128px;
    height: 28px;
    border: 1px solid rgba(var(--cream-rgb),0.12);
    border-radius: 5px;
    background: rgba(var(--cream-rgb),0.07);
  }
  .lm-surface.one { top: 28px; }
  .lm-surface.two { top: 66px; width: 62%; }
  .lm-surface.three { top: 104px; width: 48%; }
  .nb-layer-stack {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 138px;
    border: 1px solid rgba(var(--cream-rgb),0.14);
    overflow: hidden;
  }
  .nb-layer-stack span {
    display: flex;
    align-items: flex-end;
    padding: 12px 10px;
    border-right: 1px solid rgba(var(--cream-rgb),0.12);
    font-family: "Host Grotesk", sans-serif;
    font-size: 12px;
    letter-spacing: 0.01em;
    text-transform: none;
    color: rgba(var(--cream-rgb),0.68);
  }
  .nb-layer-stack span:nth-child(1) { background: rgba(var(--cream-rgb),0.16); }
  .nb-layer-stack span:nth-child(2) { background: rgba(var(--clay-rgb),0.18); }
  .nb-layer-stack span:nth-child(3) { background: rgba(var(--clay-light-rgb),0.24); }
  .nb-layer-stack span:nth-child(4) { background: rgba(var(--forest-rgb),0.34); }
  .nb-layer-stack span:nth-child(5) { background: rgba(var(--cream-rgb),0.08); border-right: none; }
  .ab-desk-map {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    padding: 10px;
  }
  .ab-desk-map span {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--cream-rgb),0.14);
    font-family: "Host Grotesk", sans-serif;
    font-size: 12px;
    letter-spacing: 0.01em;
    text-transform: none;
    color: rgba(var(--cream-rgb),0.74);
    background: rgba(var(--cream-rgb),0.06);
  }
  .ab-map-desk {
    grid-row: 1 / 3;
    background: rgba(var(--clay-light-rgb),0.16) !important;
  }
  .ab-map-router {
    background: rgba(var(--clay-rgb),0.18) !important;
  }

  .sx-bed-map {
    position: relative;
    margin-top: 22px;
    min-height: 250px;
    border: 1px solid rgba(var(--cream-rgb),0.12);
    border-radius: 5px;
    background:
      linear-gradient(90deg, rgba(var(--cream-rgb),0.08) 0 18%, transparent 18% 100%),
      linear-gradient(180deg, rgba(var(--cream-rgb),0.06), rgba(var(--clay-light-rgb),0.06)),
      rgba(var(--cream-rgb),0.035);
    overflow: hidden;
  }
  .sx-bed-wall {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 18%;
    border-right: 1px solid rgba(var(--cream-rgb),0.14);
    background: rgba(var(--cream-rgb),0.045);
  }
  .sx-bed-base {
    position: absolute;
    left: 26%;
    top: 22%;
    width: 46%;
    height: 58%;
    border: 1px solid rgba(var(--cream-rgb),0.2);
    border-radius: 12px 12px 6px 6px;
    background: linear-gradient(180deg, rgba(var(--cream-rgb),0.2), rgba(var(--cream-rgb),0.06));
  }
  .sx-bed-pillow {
    position: absolute;
    left: 30%;
    top: 28%;
    width: 38%;
    height: 18%;
    border-radius: 999px;
    background: rgba(var(--cream-rgb),0.28);
  }
  .sx-bed-nightstand {
    position: absolute;
    right: 13%;
    top: 48%;
    width: 12%;
    height: 18%;
    border: 1px solid rgba(var(--clay-light-rgb),0.3);
    background: rgba(var(--clay-light-rgb),0.12);
  }
  .sx-bed-zone {
    position: absolute;
    left: 18%;
    right: 10%;
    top: 16%;
    bottom: 12%;
    border: 1px dashed rgba(var(--clay-light-rgb),0.54);
    border-radius: 50%;
  }
  .sx-bed-point {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: var(--clay-light);
    box-shadow: 0 0 0 8px rgba(var(--clay-light-rgb),0.14);
  }
  .sx-bed-point.one { left: 33%; top: 38%; }
  .sx-bed-point.two { right: 19%; top: 56%; }
  .sx-bed-point.three { left: 17%; top: 46%; }
  .sx-bed-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .sx-bed-caption span {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--cream-rgb),0.12);
    border-radius: 999px;
    font-size: 12px;
    color: rgba(var(--cream-rgb),0.7);
    background: rgba(var(--ink-rgb),0.26);
  }

  /* Hero ohne Footer-Zeile, mehr Luft. Hero-main ist linksbündig mit max-width. */

  /* INTRO-PERSON: Bild links im Container, Text rechts */
  .intro-person { background: var(--cream); border-top: 1px solid var(--line); padding: var(--section-pad-y) var(--page-pad); }
  .ip-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 72px; max-width: 1400px; margin: 0 auto; align-items: center; }
  .ip-img-wrap { position: relative; border-radius: 3px; overflow: hidden; aspect-ratio: 4/5; background: var(--ink-soft); }
  .ip-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
  .ip-img-wrap .ip-caption { position: absolute; left: 20px; bottom: 20px; padding: 10px 14px; background: rgba(var(--ink-rgb),0.72); color: var(--cream); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 2px; backdrop-filter: blur(8px); }
  .ip-text .uc { color: var(--clay); margin-bottom: 18px; }
  .ip-text h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; margin-bottom: 28px; }
  .ip-text h2 em { font-style: italic; color: var(--clay); font-weight: 300; }
  .ip-text p { font-size: var(--type-body-1); line-height: 1.6; color: var(--ink-soft); margin-bottom: 18px; max-width: 620px; }
  .ip-text p b { color: var(--ink); font-weight: 500; }
  .ip-qual { margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 560px; }
  .ip-qual-c { text-align: center; padding: 14px 8px; border: 1px solid var(--ink); border-radius: 2px; background: var(--warm); }
  .ip-qual-c b { display: block; font-family: "Bricolage Grotesque", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
  .ip-qual-c span { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 4px; }
  .ip-cta-row { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
  .ip-cta-row a.primary { padding: 14px 22px; background: var(--ink); color: var(--cream); text-decoration: none; border-radius: 2px; font-weight: 500; }
  .ip-cta-row a.ghost { padding: 13px 20px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; border-radius: 2px; }
  .ip-read-link { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; color: var(--clay); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; text-decoration: none; }
  .ip-read-link .arrow { display: inline-flex; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
  .ip-read-link:hover .arrow { transform: translateX(4px); }
  .ip-read-link svg { width: 16px; height: 16px; display: block; }

  /* BIG NUMBER sections */
  .big-num { background: var(--ink); color: var(--cream); min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding: 80px 48px; }
  .big-num.clay { background: var(--clay-deco); color: var(--cream); }
  .big-num.forest { background: var(--forest); color: var(--cream); }
  .big-num .kicker { color: rgba(var(--cream-rgb),0.55); margin-bottom: 48px; }
  .big-num .num {
    font-family: "Bricolage Grotesque", sans-serif; font-weight: 300;
    font-size: clamp(120px, 20vw, 360px); line-height: 0.86; letter-spacing: -0.06em;
    color: var(--cream);
  }
  .big-num .num .unit { font-family: "Geist Mono", monospace; font-size: 0.22em; color: rgba(var(--cream-rgb),0.6); margin-left: 12px; letter-spacing: 0; vertical-align: super; font-weight: 400; }
  .big-num .caption { max-width: 560px; margin-top: 40px; font-size: 20px; line-height: 1.45; color: rgba(var(--cream-rgb),0.9); }
  .big-num .caption em { font-style: italic; color: var(--cream); }
  .big-num .caption-sub { max-width: 560px; margin-top: 20px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--cream-rgb),0.5); }

  /* BIG NUMBER, 3-Spalten: echtes Kinderzimmer-Bild links, 97%+Caption Mitte, Chart rechts */
  .big-num.case-layout { display: grid; grid-template-columns: 0.9fr 1.1fr 1fr; gap: 48px; align-items: stretch; max-width: 100%; padding: 90px 48px; }
  .big-num.case-layout .bn-photo { position: relative; overflow: hidden; border-radius: 3px; box-shadow: 0 22px 50px rgba(var(--black-rgb),0.5); align-self: center; aspect-ratio: 4/5; }
  .big-num.case-layout .bn-photo img { width: 100%; height: 100%; object-fit: cover; }
  .big-num.case-layout .bn-photo .bn-photo-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px;
    background: linear-gradient(0deg, rgba(var(--shade-rgb),0.9) 0%, rgba(var(--shade-rgb),0) 100%);
    color: var(--cream); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-family: "Host Grotesk", system-ui, sans-serif;
  }
  .big-num.case-layout .bn-left { display: flex; flex-direction: column; justify-content: center; }
  .big-num.case-layout .bn-left .num { font-family: "Bricolage Grotesque", sans-serif; font-weight: 300; font-size: clamp(108px, 13vw, 200px); line-height: 0.86; letter-spacing: -0.05em; color: var(--cream); }
  .big-num.case-layout .bn-left .num .unit { font-family: "Geist Mono", monospace; font-size: 0.16em; display: block; margin-top: 12px; letter-spacing: 0.02em; color: rgba(var(--cream-rgb),0.7); text-transform: uppercase; font-weight: 400; }
  .big-num.case-layout .bn-left .kicker { color: rgba(var(--cream-rgb),0.55); margin-bottom: 18px; }
  .big-num.case-layout .bn-left .caption { margin-top: 24px; font-size: 15.5px; line-height: 1.55; color: rgba(var(--cream-rgb),0.9); max-width: 440px; }
  .big-num.case-layout .bn-left .caption em { color: var(--clay-light); font-style: italic; }
  .big-num.case-layout .bn-left .caption-sub { margin-top: 14px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--cream-rgb),0.5); }
  .big-num.split-layout .bn-left .num .unit { font-size: 0.2em; display: block; margin-left: 0; margin-top: 8px; vertical-align: baseline; }
  .big-num.split-layout .bn-left .kicker { margin-bottom: 28px; }
  .big-num.split-layout .bn-left .caption { margin-top: 32px; font-size: 17px; max-width: 520px; }
  .big-num.split-layout .bn-left .caption-sub { margin-top: 16px; }
  .big-num.split-layout .bn-right { padding: 36px; background: rgba(var(--cream-rgb),0.06); border: 1px solid rgba(var(--cream-rgb),0.14); border-radius: 2px; }
  .bn-chart-label { font-family: "Host Grotesk", system-ui, sans-serif; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(var(--cream-rgb),0.55); margin-bottom: 24px; }
  .bn-chart { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
  .bn-bar-row { display: grid; grid-template-columns: 80px 1fr 110px; gap: 14px; align-items: center; font-size: 13px; }
  .bn-bar-row .bn-bar-label { color: rgba(var(--cream-rgb),0.7); font-family: "Host Grotesk", system-ui, sans-serif; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
  .bn-bar-wrap { height: 10px; background: rgba(var(--cream-rgb),0.1); border-radius: 1px; overflow: hidden; position: relative; }
  .bn-bar-fill { height: 100%; background: var(--clay-light); border-radius: 1px; }
  .bn-bar-fill.slim { background: rgba(var(--clay-light-rgb),0.55); }
  .bn-bar-value { text-align: right; font-family: "Geist Mono", monospace; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--cream); }
  .bn-ref-box { padding-top: 22px; border-top: 1px solid rgba(var(--cream-rgb),0.14); font-size: 12px; color: rgba(var(--cream-rgb),0.65); line-height: 1.55; }
  .bn-ref-box strong { color: var(--cream); font-weight: 500; }

  /* Image break mit Parallax-Bild + Caption-Reveal */
  .img-break { padding: 0; min-height: 70vh; position: relative; overflow: hidden; }
  .img-break-inner { position: relative; width: 100%; height: 70vh; overflow: hidden; }
  .img-break img {
    width: 100%; height: 120%; object-fit: cover; position: absolute; top: -10%; left: 0;
    will-change: transform;
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .img-break figcaption {
    position: absolute; left: 40px; bottom: 40px; max-width: 500px;
    padding: 22px 26px; background: rgba(var(--warm-rgb),0.94); backdrop-filter: blur(10px);
    font-family: "Bricolage Grotesque", sans-serif; font-style: italic; font-weight: 400;
    font-size: 17px; line-height: 1.4; color: var(--ink); border-radius: 2px;
    opacity: 0; transform: translateY(36px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .img-break.rev figcaption { opacity: 1; transform: translateY(0); }
  .img-break figcaption .tag { display: block; font-family: "Host Grotesk", sans-serif; font-style: normal; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; font-weight: 500; }

  /* 4 Pillars, Headline komplett links, kein Header-Bild, 4 Cards darunter */
  .pillars-c { background: var(--cream); padding: var(--section-pad-y) var(--page-pad); }
  .pillars-head-c { margin: 0 auto 56px; max-width: 1400px; }
  .pillars-head-c .ph-text .uc { color: var(--muted); margin-bottom: 18px; }
  .pillars-head-c .ph-text h2 { max-width: 16ch; }
  .pillars-head-c .ph-text h2 em { font-style: italic; color: var(--clay); font-weight: 300; display: inline; }
  .pillars-head-c .ph-text p { margin-top: 18px; font-size: var(--type-body-1); color: var(--ink-soft); line-height: 1.55; max-width: 620px; }
  .p-grid-c { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; background: transparent; border: none; max-width: 1400px; margin: 0 auto; align-items: stretch; }
  .p-c {
    background: var(--cream); padding: 40px 32px; min-height: 360px;
    display: flex; flex-direction: column; justify-content: space-between;
    border: 1px solid var(--ink); border-radius: 2px;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .p-c:hover { transform: translateY(-6px); border-color: var(--clay-deco); }
  .p-c .num-s { font-family: "Bricolage Grotesque", sans-serif; font-weight: 300; font-size: 60px; line-height: 1; letter-spacing: -0.04em; color: var(--clay); margin-bottom: 12px; }
  .p-c .num-s .unit { font-family: "Geist Mono", monospace; font-size: 0.28em; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
  .p-c h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; font-size: var(--type-h3); letter-spacing: -0.02em; margin-bottom: 8px; }
  .p-c p { font-size: var(--type-body-2); color: var(--ink-soft); line-height: 1.55; }
  .p-c .tag { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; font-weight: 500; }

  /* Case split, konsistentes Alignment zur Split-Row darunter */
  .case-c { background: var(--warm); padding: 0 0 0 0; }
  .case-head { padding: 100px 48px 48px; max-width: none; margin: 0; }
  .case-head .uc { color: var(--muted); margin-bottom: 18px; }
  .case-head h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; max-width: 1200px; }
  .case-head h2 em { font-style: italic; color: var(--clay); font-weight: 300; }
  .split { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; gap: 0; }
  .split-before { background: #1B1A17; color: var(--cream); padding: 64px 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
  .split-before::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #1B1A17 0%, #0F0F0E 100%); z-index: 0; }
  .split-before > * { position: relative; z-index: 1; }
  .split-after { background: #F0E9DB; color: var(--ink); padding: 64px 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
  .split-after::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #F4EEDF 0%, #E8DFCA 100%); z-index: 0; }
  .split-after > * { position: relative; z-index: 1; }
  .split h4 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; }
  .split-before h4 { color: rgba(var(--cream-rgb),0.5); }
  .split-after h4 { color: var(--muted); }
  .split-num { font-family: "Bricolage Grotesque", sans-serif; font-weight: 300; font-size: clamp(80px, 11vw, 180px); line-height: 0.9; letter-spacing: -0.05em; }
  .split-num .unit { font-family: "Geist Mono", monospace; font-size: 0.23em; color: rgba(var(--cream-rgb),0.55); vertical-align: super; margin-left: 8px; letter-spacing: 0; }
  .split-after .split-num { color: var(--clay); }
  .split-after .split-num .unit { color: var(--muted); }
  .split .mini-table { font-size: 13px; border-collapse: collapse; width: 100%; margin-top: 28px; }
  .split .mini-table td { padding: 10px 0; border-bottom: 1px solid currentColor; opacity: 0.85; }
  .split .mini-table td:last-child { text-align: right; font-weight: 500; font-family: "Geist Mono", monospace; font-variant-numeric: tabular-nums; font-size: 12px; }

  /* Massnahmen-Leiste UNTER dem Split. Zeigt konkret was gemacht wurde */
  .case-measures { background: var(--warm); padding: 64px 48px 96px; border-top: 1px solid var(--line); }
  .case-measures-inner { max-width: 1400px; margin: 0 auto; }
  .case-measures-head { margin-bottom: 40px; max-width: 720px; }
  .case-measures-head .uc { color: var(--muted); margin-bottom: 18px; }
  .case-measures-head h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; font-size: var(--type-h3); line-height: 1.02; letter-spacing: -0.03em; max-width: 24ch; text-wrap: balance; }
  .case-measures-head h3 em { font-style: italic; color: var(--clay); font-weight: 300; }
  .case-measures-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .measure-card {
    background: transparent; padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 14px; min-height: 238px;
    border: 0; border-right: 1px solid var(--line); border-radius: 0;
    transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .measure-card:last-child { border-right: 0; }
  .measure-card:hover { background: rgba(var(--cream-rgb),0.45); }
  .measure-card .m-num { font-family: "Geist Mono", monospace; font-size: 11px; color: var(--clay); letter-spacing: 0.14em; font-weight: 500; }
  .measure-card .m-icon { width: 40px; height: 40px; color: var(--clay-deco); }
  .measure-card .m-icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .measure-card h4 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
  .measure-card p { font-size: var(--type-body-2); line-height: 1.55; color: var(--ink-soft); }
  .measure-card .m-impact { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); }

  /* Services als Accordion mit Bild bei offenem Toggle */
  .svc-c { background: var(--cream); padding: var(--section-pad-y) var(--page-pad); }
  .svc-head-c { max-width: 1400px; margin: 0 0 48px; padding-left: 0; text-align: left; }
  .svc-head-c-inner { max-width: 1400px; margin: 0 auto 48px; }
  .svc-head-c .uc { color: var(--muted); margin-bottom: 18px; }
  .svc-head-c h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; }
  .svc-head-c h2 em { font-style: italic; color: var(--clay); font-weight: 300; }
  .svc-acc { max-width: 1400px; margin: 0 auto; border-top: 1px solid var(--line); }
  .svc-item { border-bottom: 1px solid var(--line); padding: 0; }
  .svc-summary { cursor: pointer; list-style: none; min-height: 84px; padding: 22px 0; display: grid; grid-template-columns: 60px 1fr 1fr 40px; gap: 24px; align-items: center; line-height: 1.15; transition: color 0.2s; }
  .svc-summary::-webkit-details-marker { display: none; }
  .svc-summary:hover { color: var(--clay); }
  .svc-summary .svc-num { font-family: "Geist Mono", monospace; font-size: 13px; font-weight: 400; color: var(--clay); letter-spacing: 0.04em; }
  .svc-summary .svc-title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; font-size: 24px; letter-spacing: -0.02em; }
  .svc-summary .svc-tag { font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }
  /* Toggle-Icon als SVG, + dreht sich in x und Strich rotiert ease-out */
  .toggle-icon {
    position: relative; display: inline-block; width: 28px; height: 28px; justify-self: end;
    transition: transform 150ms ease;
  }
  .toggle-icon::before, .toggle-icon::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 1.2px;
    background: var(--muted); border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: transform 150ms ease, background 150ms ease;
  }
  .toggle-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
  details[data-state="open"] .toggle-icon, .svc-item[data-state="open"] .toggle-icon { transform: rotate(180deg); }
  details[data-state="open"] .toggle-icon::after, .svc-item[data-state="open"] .toggle-icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
    background: var(--clay-deco);
  }
  details[data-state="open"] .toggle-icon::before, .svc-item[data-state="open"] .toggle-icon::before { background: var(--clay-deco); }

  .svc-body { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 4px 0 44px 84px; align-items: start; }
  .svc-item .svc-body .svc-img { overflow: hidden; }
  .svc-item .svc-body .svc-img img { transform: scale(1.01); }
  .svc-body .svc-text p { font-size: var(--type-body-1); line-height: 1.6; color: var(--ink-soft); margin-bottom: 14px; max-width: 540px; }
  .svc-body .svc-text ul { list-style: none; padding: 0; margin: 18px 0 24px; }
  .svc-body .svc-text ul li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 8px; }
  .svc-body .svc-text ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 1px; background: var(--clay-deco); }
  .svc-body .svc-text a.svc-link { display: inline-block; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; text-decoration: none; font-weight: 500; }
  .svc-body .svc-img { aspect-ratio: 4/3; overflow: hidden; border-radius: 2px; background: #ddd; }
  .svc-body .svc-img img { width: 100%; height: 100%; object-fit: cover; }

  /* MANUEL split, now with image */
  .manuel-c { background: var(--warm); padding: 0; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
  .manuel-img-c {
    position: relative; overflow: hidden;
    background:
      radial-gradient(circle at 30% 40%, rgba(var(--clay-rgb),0.15) 0%, transparent 50%),
      linear-gradient(170deg, var(--ink-soft) 0%, #161512 100%);
  }
  .manuel-img-c::after {
    content: "Portrait, Fotograf folgt";
    position: absolute; bottom: 28px; left: 28px;
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(var(--cream-rgb),0.5);
  }
  .manuel-img-c::before {
    content: "MW";
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-family: "Bricolage Grotesque", sans-serif; font-weight: 300; font-size: 220px;
    color: rgba(var(--cream-rgb),0.08); letter-spacing: -0.05em;
  }
  .manuel-txt { padding: 100px 60px; display: flex; flex-direction: column; justify-content: center; }
  .manuel-txt .uc { color: var(--muted); margin-bottom: 18px; }
  .manuel-txt h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; margin-bottom: 32px; }
  .manuel-txt h2 em { font-style: italic; color: var(--clay); font-weight: 300; }
  .manuel-txt p { font-size: var(--type-body-1); line-height: 1.6; max-width: 520px; margin-bottom: 20px; color: var(--ink-soft); }
  .qual-line { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 520px; }
  .qual-c { text-align: center; padding: 16px 8px; border: 1px solid var(--ink); border-radius: 2px; background: var(--cream); }
  .qual-c b { display: block; font-family: "Bricolage Grotesque", sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
  .qual-c span { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 4px; }

  /* CTA */
  .cta-c { background: var(--ink); color: var(--cream); text-align: center; padding: var(--section-pad-y) var(--page-pad); display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .cta-c .uc, .cta-c .sec-mark { color: rgba(var(--cream-rgb),0.5); margin-bottom: 18px; }
  .cta-c h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; max-width: 18ch; margin: 0 auto 48px; }
  .cta-c h2 em { font-style: italic; color: var(--clay-deco); }
  .cta-c .cta-btn,
  .cta-c .btn-premium.light.cta-btn,
  .uw-cta-dark .cta-btn {
    min-height: 48px; padding: 15px 26px; font-size: 12px; letter-spacing: 0.2em;
    color: var(--ink); background: var(--cream); border-color: var(--cream);
  }
  .cta-c .cta-btn:hover, .cta-c .cta-btn:focus-visible,
  .cta-c .btn-premium.light.cta-btn:hover, .cta-c .btn-premium.light.cta-btn:focus-visible,
  .uw-cta-dark .cta-btn:hover, .uw-cta-dark .cta-btn:focus-visible {
    color: var(--ink); background: var(--warm); border-color: var(--warm);
  }
  .cta-c .meta { margin-top: 36px; font-size: 13px; color: rgba(var(--cream-rgb),0.55); }
  .cta-c .meta a { color: var(--clay-deco); text-decoration: underline; text-underline-offset: 0.15em; }

  footer { padding: 36px 48px; background: var(--ink); color: rgba(var(--cream-rgb),0.55); display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }

  /* METHODIK / PROZESS, Head komplett links */
  .proz { background: var(--warm); padding: var(--section-pad-y) var(--page-pad); border-top: 1px solid var(--line); }
  .proz-head { max-width: 1400px; margin: 0 auto 56px; text-align: left; }
  .proz-head-inner { max-width: 720px; margin: 0; }
  .proz-head .uc { color: var(--muted); margin-bottom: 18px; }
  .proz-head h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; }
  .proz-head h2 em { font-style: italic; color: var(--clay); font-weight: 300; }
  .proz-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
  .proz-step { padding: 36px 24px 40px; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 280px; }
  .proz-step:last-child { border-right: none; }
  /* U12: die erste Spalte stand 24 px innerhalb der Sektionskante, die letzte
     endete 24 px davor. Aussenpolster raus, damit Ziffer und Fliesstext auf
     derselben Linie stehen wie Kicker und H2 der Sektion.
     Fix-Runde 1: nur solange das Raster mehrspaltig ist. Unter 901 px stapeln
     die Karten (bzw. stehen 2x2), dann treffen :first-child und :last-child
     nicht mehr die Sektionskanten. */
  @media (min-width: 901px) {
    .proz-step:first-child { padding-left: 0; }
    .proz-step:last-child { padding-right: 0; }
  }
  .proz-step .step-num { font-family: "Geist Mono", monospace; font-size: 12px; color: var(--clay); letter-spacing: 0.08em; margin-bottom: 28px; font-weight: 500; }
  .proz-step h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; font-size: var(--type-h3); letter-spacing: -0.02em; margin-bottom: 12px; }
  .proz-step p { font-size: var(--type-body-2); color: var(--ink-soft); line-height: 1.55; }
  .proz-step .dur { margin-top: auto; padding-top: 20px; font-family: "Geist Mono", monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

  /* PRESSE & VERBÄNDE */
  .press { background: var(--cream); padding: var(--section-pad-y) var(--page-pad); border-top: 1px solid var(--line); }
  .press-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start; }
  .press-left .uc { color: var(--muted); margin-bottom: 18px; }
  .press-left h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; margin-bottom: 36px; }
  .press-left h2 em { font-style: italic; color: var(--clay); font-weight: 300; }
  .press-quote { border-left: 2px solid var(--clay-deco); padding: 4px 0 4px 24px; font-family: "Bricolage Grotesque", sans-serif; font-style: italic; font-size: 22px; line-height: 1.4; color: var(--ink-soft); font-weight: 400; margin-bottom: 20px; max-width: 560px; }
  .press-credit { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .press-right { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .cert-card { padding: 24px 22px; border: 1px solid var(--ink); border-radius: 2px; background: var(--warm); }
  .cert-card .cert-logo { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay); margin-bottom: 20px; }
  .cert-card h4 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; margin-bottom: 6px; }
  .cert-card p { font-size: var(--type-body-2); color: var(--ink-soft); line-height: 1.5; }

  /* FAQ */
  .faq { background: var(--warm); padding: var(--section-pad-y) var(--page-pad); border-top: 1px solid var(--line); }
  .faq-head { max-width: 1400px; margin: 0 auto 56px; text-align: left; padding-right: 100px; }
  .faq-head-inner { max-width: 840px; }
  .faq-head .uc { color: var(--muted); margin-bottom: 18px; }
  .faq-head h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; }
  .faq-head h2 em { font-style: italic; color: var(--clay); font-weight: 300; }
  /* Toggle-Listen links orientiert: gleiche linke Kante wie .faq-head, nicht zentriert */
  .faq-list { max-width: 1400px; margin: 0 auto; display: block; }
  .faq-list > details { max-width: 1120px; }
  .faq-list > details:first-of-type { border-top: 1px solid var(--line); }
  .faq .faq-list details {
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    padding: 0;
    box-shadow: none;
  }
  .faq .faq-list details[open],
  .faq .faq-list details[data-state="open"] { background: transparent; }
  .faq .faq-list details summary { cursor: pointer; list-style: none; min-height: 76px; padding: 22px 0; display: grid; grid-template-columns: 56px 1fr 34px; gap: 16px; align-items: center; line-height: 1.16; font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; font-size: 21px; letter-spacing: 0; transition: color 0.2s; }
  .faq .faq-list details[data-state="open"] summary,
  .faq .faq-list details[open]:not([data-state]) summary { padding-bottom: 16px; }
  .faq .faq-list details summary::-webkit-details-marker { display: none; }
  .faq .faq-list details summary:hover { color: var(--clay); }
  .faq .faq-list details summary .q-num { font-family: "Geist Mono", monospace; font-size: 13px; font-weight: 400; color: var(--clay); letter-spacing: 0.04em; }
  .faq .faq-list details summary .q-icon {
    width: 34px;
    height: 34px;
    justify-self: end;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 0;
  }
  .faq .faq-list details .answer { box-sizing: border-box; padding: 0 0 28px 72px; font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 900px; }
  .faq .faq-list details .answer b { color: var(--ink); font-weight: 500; }

  /* EXPANDED FOOTER */
  footer.ft {
    background: var(--ink); color: rgba(var(--cream-rgb),0.65);
    padding: 80px 48px 40px;
    display: block;
    /* Reset der alten Mini-Footer-Regel (bare footer): kein Voll-Caps, keine Sperrung */
    text-transform: none; letter-spacing: normal; font-size: 15px;
  }
  .ft-inner { max-width: 1400px; margin: 0 auto; }
  .ft-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(var(--cream-rgb),0.15); }
  /* Fuenfspaltiger DE-Footer (Marke, Kontakt, Angebot, Themen, Firma) */
  .ft-top:has(> :nth-child(5)) { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; }
  .ft-brand { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; color: var(--cream); }
  .ft-brand .ft-logo { font-size: 28px; letter-spacing: -0.01em; font-weight: 500; margin-bottom: 6px; }
  .ft-brand .ft-logo em { font-style: italic; color: rgba(var(--cream-rgb),0.65); font-weight: 400; }
  .ft-brand .ft-tagline { font-size: 14px; color: rgba(var(--cream-rgb),0.6); max-width: 320px; line-height: 1.5; margin-bottom: 20px; }
  /* U9: ersetzt den Inline-Style in WernliFooter.astro. */
  .ft-brand .ft-tagline.ft-tagline-sub { font-size: var(--type-body-2); color: rgba(var(--cream-rgb),0.72); }
  .ft h5,
  .ft-heading { font-family: "Geist Mono", monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--cream-rgb),0.68); margin-bottom: 18px; }
  .ft ul { list-style: none; padding: 0; }
  .ft ul li { margin-bottom: 10px; font-size: 14px; }
  .ft ul li a { color: rgba(var(--cream-rgb),0.85); text-decoration: none; }
  .ft ul li a:hover { color: var(--clay-deco); }
  .ft-contact p { font-size: var(--type-body-2); line-height: 1.6; color: rgba(var(--cream-rgb),0.85); margin-bottom: 4px; }
  .ft-contact .ft-mail { margin-top: 16px; }
  .ft-contact a { color: var(--clay-deco); text-decoration: none; }
  /* U9: Fusszeile traegt die Wortmarke, darum text-transform: none: «ncbs wernli GmbH»
     bleibt so geschrieben, wie die Marke geschrieben wird. */
  .ft-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; font-family: "Geist Mono", monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: none; color: rgba(var(--cream-rgb),0.62); }
  .ft-bottom a { color: inherit; text-decoration: none; margin-left: 24px; }


  /* SYMPTOM SECTION, alle Card-Headlines gleich gross, ein-zeilig */
  .symp { background: var(--cream); padding: var(--section-pad-y) var(--page-pad); border-top: 1px solid var(--line); }
  .symp-inner { max-width: 1400px; margin: 0 auto; }
  .symp-head { max-width: 880px; margin: 0 auto 56px; text-align: center; }
  .symp-head .uc { color: var(--muted); margin-bottom: 18px; text-align: center; }
  .symp-head h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; }
  .symp-head h2 em { font-style: italic; color: var(--clay); font-weight: 300; }
  .symp-head p.hint { font-size: var(--type-body-1); color: var(--ink-soft); line-height: 1.6; margin: 20px auto 0; max-width: 680px; }
  .symp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .symp-card { border: 1px solid var(--ink); padding: 30px 26px 26px; border-radius: 2px; background: var(--warm); display: flex; flex-direction: column; gap: 14px; position: relative; min-height: 220px; }
  .symp-card h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; font-size: var(--type-h3); line-height: 1; letter-spacing: -0.02em; color: var(--ink); min-height: 30px; }
  .symp-card p { font-size: var(--type-body-2); color: var(--ink-soft); line-height: 1.55; }
  .symp-card .symp-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--clay-deco); }
  .symp-card .symp-icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.4; fill: none; }

  /* WARUM Editorial Layout, Mega-Zahl rechts, Fliesstext links */
  .warum-editorial {
    position: relative;
    overflow: hidden;
    background: var(--warm);
    padding: 120px 48px;
    border-top: 1px solid var(--line);
  }
  .warum-editorial::before {
    content: "";
    position: absolute;
    inset: 0 0 auto auto;
    width: min(58vw, 900px);
    height: 100%;
    background-image:
      linear-gradient(90deg, rgba(var(--linen-rgb),0.98) 0%, rgba(var(--linen-rgb),0.72) 42%, rgba(var(--linen-rgb),0.2) 100%),
      url('/composites/wernli-fullbleed-neubau-planmatrix-recraft-v1.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.48;
  }
  .we-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: start; }
  .we-left .uc { color: var(--muted); margin-bottom: 18px; }
  .we-left h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; margin-bottom: 28px; max-width: 14ch; }
  .we-left h2 em { font-style: italic; color: var(--clay); font-weight: 300; }
  .we-left p { font-size: var(--type-body-1); line-height: 1.6; color: var(--ink-soft); margin-bottom: 20px; max-width: 620px; }
  .we-left p b { color: var(--ink); font-weight: 500; }
  .we-source { margin-top: 24px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-style: italic; }
  .we-right {
    padding: 28px 30px 32px;
    border: 1px solid rgba(var(--ink-rgb),0.18);
    background: rgba(var(--cream-rgb),0.82);
    backdrop-filter: blur(8px);
  }
  .we-bignum { font-family: "Bricolage Grotesque", sans-serif; font-weight: 300; font-size: clamp(140px, 18vw, 260px); line-height: 0.84; letter-spacing: -0.06em; color: var(--ink); }
  .we-bignum .we-un { font-family: "Geist Mono", monospace; font-size: 0.25em; color: var(--clay); margin-left: 8px; vertical-align: top; letter-spacing: 0; font-weight: 400; }
  .we-bigsub { font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; font-weight: 500; }
  .we-mini-row { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 28px; border-top: 1px solid var(--line); }
  .we-mini { display: flex; flex-direction: column; gap: 6px; }
  .we-mini-num { font-family: "Bricolage Grotesque", sans-serif; font-size: 34px; font-weight: 500; letter-spacing: -0.02em; color: var(--clay); line-height: 1; }
  .we-mini-lab { font-size: 12px; color: var(--ink-soft); line-height: 1.45; }

  /* SBM-SKALA, Bridge zwischen Warum und Case-Study */
  .sbm-scale { background: var(--ink); color: var(--cream); padding: 120px 48px; border-top: 1px solid rgba(var(--cream-rgb),0.1); }
  .sbm-inner { max-width: 1400px; margin: 0 auto; }
  .sbm-head { max-width: 900px; margin-bottom: 72px; }
  .sbm-head .uc { color: rgba(var(--cream-rgb),0.5); margin-bottom: 18px; }
  .sbm-head h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; margin-bottom: 22px; }
  .sbm-head h2 em { font-style: italic; color: var(--clay-light); font-weight: 300; }
  .sbm-head p { font-size: var(--type-body-1); line-height: 1.6; color: rgba(var(--cream-rgb),0.8); max-width: 720px; }
  .sbm-head p b { color: var(--cream); font-weight: 500; }

  .sbm-bar {
    display: grid; grid-template-columns: 0.8fr 1fr 2.4fr 1fr;
    border: 1px solid rgba(var(--cream-rgb),0.18); border-radius: 2px; overflow: hidden; position: relative;
  }
  /* Hover: nur subtiles Aufhellen, KEINE Breiten-Aenderung (Grid bleibt statisch). */

  .sbm-zone {
    padding: 34px 26px 88px; border-right: 1px solid rgba(var(--cream-rgb),0.18);
    position: relative; min-height: 220px; display: flex; flex-direction: column; gap: 10px;
    cursor: default;
    transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sbm-zone:hover { filter: brightness(1.12); }
  .sbm-zone:last-child { border-right: none; }
  .sbm-zone .sbm-range { font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: 0.08em; color: rgba(var(--cream-rgb),0.55); }
  .sbm-zone .sbm-label { font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; font-size: 22px; letter-spacing: -0.015em; }
  .sbm-zone .sbm-value { font-family: "Bricolage Grotesque", sans-serif; font-weight: 300; font-size: clamp(36px, 4vw, 60px); line-height: 0.95; letter-spacing: -0.03em; margin-top: auto; }
  .sbm-zone .sbm-value .u { font-family: "Geist Mono", monospace; font-size: 0.3em; color: rgba(var(--cream-rgb),0.55); margin-left: 4px; letter-spacing: 0; }

  .sbm-zone.z1 { background: #2C3929; color: #D7E6C4; }
  .sbm-zone.z2 { background: #3D4328; color: #E6D9A5; }
  .sbm-zone.z3 { background: #4A3526; color: #E8B795; }
  .sbm-zone.z4 { background: #5A2518; color: #F0A08B; }

  .sbm-zone .sbm-marker {
    position: absolute; bottom: 20px; left: 26px; right: 26px;
    padding: 12px 14px; background: rgba(var(--ink-rgb),0.55); border: 1px solid rgba(var(--cream-rgb),0.22);
    font-family: "Geist Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em; line-height: 1.55; text-transform: uppercase;
    color: rgba(var(--cream-rgb),0.85);
  }
  .sbm-zone .sbm-marker b { color: var(--clay-light); font-weight: 500; }

  .sbm-axis { display: grid; grid-template-columns: 0.8fr 1fr 2.4fr 1fr; margin-top: 14px; font-family: "Geist Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--cream-rgb),0.5); }
  .sbm-axis span { padding: 0 26px; border-right: 1px dashed rgba(var(--cream-rgb),0.12); }
  .sbm-axis span:last-child { border-right: none; }

  .sbm-note { margin-top: 48px; display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; }
  .sbm-note p { font-size: var(--type-body-2); line-height: 1.6; color: rgba(var(--cream-rgb),0.7); max-width: 620px; }
  .sbm-note .sbm-source { font-family: "Geist Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--cream-rgb),0.4); }
  .sbm-cta-row { margin-top: 40px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
  .sbm-case-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: rgba(var(--cream-rgb),0.85); text-decoration: none; border-bottom: 1px solid rgba(var(--cream-rgb),0.35); padding-bottom: 3px; transition: color 0.3s ease, border-color 0.3s ease; }
  .sbm-case-link:hover, .sbm-case-link:focus-visible { color: var(--cream); border-color: var(--cream); }
  .sbm-case-link svg { flex: none; }

  /* Legacy Warum-Klasse entsorgt, ersetzt durch .warum-editorial */
  .warum { display: none; }
  .warum-legacy { background: var(--warm); padding: 140px 48px; border-top: 1px solid var(--line); position: relative; }
  .warum-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .warum-left .uc { color: var(--muted); margin-bottom: 18px; }
  .warum-left h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; margin-bottom: 32px; }
  .warum-left h2 em { font-style: italic; color: var(--clay); font-weight: 300; }
  .warum-left p { font-size: var(--type-body-1); line-height: 1.6; color: var(--ink-soft); margin-bottom: 20px; max-width: 540px; }
  .warum-left p b { color: var(--ink); font-weight: 500; }
  .warum-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--ink); border: 1px solid var(--ink); }
  .warum-stat { background: var(--cream); padding: 40px 28px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; }
  .warum-stat .big { font-family: "Bricolage Grotesque", sans-serif; font-weight: 300; font-size: clamp(44px, 5vw, 72px); line-height: 0.9; letter-spacing: -0.03em; color: var(--clay); margin-bottom: 4px; }
  .warum-stat .big .un { font-family: "Geist Mono", monospace; font-size: 0.3em; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
  .warum-stat h4 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; font-size: 15px; letter-spacing: -0.01em; margin-bottom: 6px; }
  .warum-stat p { font-size: var(--type-body-2); color: var(--muted); line-height: 1.5; }
  .warum-stat cite { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-style: normal; margin-top: 12px; }

  /* MANUEL, jetzt mit Foto */
  .manuel-c .m-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; }

  /* QUOTE BLOCK (Manuel) */
  .manuel-quote { background: var(--ink); color: var(--cream); padding: var(--section-pad-y) var(--page-pad); text-align: left; }
  .mq-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2.5fr; gap: 56px; align-items: start; }
  .mq-inner .uc { color: rgba(var(--cream-rgb),0.5); }
  .mq-inner blockquote { font-family: "Bricolage Grotesque", sans-serif; font-weight: 300; font-style: italic; font-size: clamp(26px, 3vw, 42px); line-height: 1.22; letter-spacing: -0.02em; color: var(--cream); }
  .mq-inner blockquote b { color: var(--clay-deco); font-style: normal; font-weight: 400; }
  .mq-credit { margin-top: 28px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--cream-rgb),0.55); }

  /* RATGEBER-TEASER, Head komplett links, kein Flex-Space-Between */
  .rat { background: var(--cream); padding: var(--section-pad-y) var(--page-pad); border-top: 1px solid var(--line); }
  .rat-head { max-width: 1400px; margin: 0 auto 48px; text-align: left; }
  .rat-head .uc { color: var(--muted); margin-bottom: 18px; }
  .rat-head h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; max-width: 900px; }
  .rat-head h2 em { font-style: italic; color: var(--clay); font-weight: 300; }
  .rat-more-row { max-width: 1400px; margin: 40px auto 0; text-align: left; }
  .rat-more-row a { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 3px; text-decoration: none; white-space: nowrap; font-weight: 500; }
  .rat-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .rat-card { background: var(--warm); border: 1px solid var(--line); border-radius: 2px; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); transition: transform 0.25s ease, border-color 0.25s; overflow: hidden; }
  .rat-card:hover { transform: translateY(-4px); border-color: var(--clay-deco); }
  .rat-card .rat-img { aspect-ratio: 16/10; overflow: hidden; background: #ddd; }
  .rat-card .rat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
  .rat-card:hover .rat-img img { transform: scale(1.04); }
  .rat-card .rat-body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
  .rat-card .cat { font-family: "Host Grotesk", system-ui, sans-serif; font-size: 11px; letter-spacing: 0.08em; color: var(--clay); font-weight: 500; text-transform: uppercase; margin-bottom: 20px; }
  .rat-card h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 500; font-size: var(--type-h3); line-height: 1.22; letter-spacing: -0.02em; margin-bottom: 14px; }
  .rat-card p { font-size: var(--type-body-2); color: var(--ink-soft); line-height: 1.55; margin-bottom: 24px; }
  .rat-card .meta { margin-top: auto; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
  .rat-card .read-more { margin-top: 16px; display: inline-flex; align-items: center; align-self: flex-start; gap: 10px; white-space: nowrap; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay); font-weight: 500; }
  .rat-card .read-more .arrow { display: inline-flex; flex: 0 0 auto; }

  @media (max-width: 900px) {
    .sbm-bar, .sbm-axis { grid-template-columns: 1fr; }
    .sbm-zone { border-right: none; border-bottom: 1px solid rgba(var(--cream-rgb),0.18); min-height: 180px; padding-bottom: 48px; }
    .sbm-zone .sbm-marker { position: relative; bottom: auto; left: auto; right: auto; margin-top: 14px; }
    .sbm-axis span { border-right: none; border-bottom: 1px dashed rgba(var(--cream-rgb),0.12); padding: 6px 0; }
    nav { padding: 16px 24px; }
    .navlinks { display: none; }
    /* Nur Top-Level-Sektionen: Pauschal-Regel traf auch verschachtelte Sektionen
       (z.B. Artikel-Abschnitte) und erzeugte doppeltes Padding (48px statt 24px). */
    body > section, main > section { padding: 32px 24px; }
    .hero-inner { padding: 110px var(--page-pad-mobile) 60px; gap: 32px; }
    .hero-main h1 { line-height: 1.02; }
    .hero-sub { margin-top: 24px; }
    .hero-kicker { align-items: flex-start; gap: 12px; }
    .hero-kicker span:last-child { display: none; }
    .hero-proof-scene .hero-bg img { object-position: var(--hero-proof-pos-mobile, 54% center); }
    .hero-proof-scene .hero-bg::after {
      background:
        linear-gradient(180deg, rgba(var(--shade-rgb),0.42) 0%, rgba(var(--shade-rgb),0.20) 42%, rgba(var(--shade-rgb),0.72) 100%),
        linear-gradient(90deg, rgba(var(--shade-rgb),0.82) 0%, rgba(var(--shade-rgb),0.48) 58%, rgba(var(--shade-rgb),0.22) 100%);
    }
    .hero-cta-row { margin-top: 28px; gap: 10px; align-items: stretch; flex-direction: column; max-width: 340px; }
    .hero-cta-row .btn-premium { width: 100%; justify-content: center; }
    .hero-cta-row a.primary, .hero-cta-row a.ghost { padding: 14px 18px; font-size: 11px; letter-spacing: 0.14em; }
    .proof-lab {
      min-height: auto;
    }
    .proof-lab::after {
      background:
        linear-gradient(180deg, rgba(var(--cream-rgb),0.96) 0%, rgba(var(--cream-rgb),0.88) 42%, rgba(var(--cream-rgb),0.3) 74%, rgba(var(--ink-rgb),0.18) 100%);
    }
    .proof-lab.proof-lab-dark::after {
      background:
        linear-gradient(180deg, rgba(var(--ink-rgb),0.9) 0%, rgba(var(--ink-rgb),0.78) 42%, rgba(var(--ink-rgb),0.36) 74%, rgba(var(--ink-rgb),0.58) 100%);
    }
    .proof-lab__inner {
      min-height: 760px;
      grid-template-columns: 1fr;
      padding: 96px 24px 204px;
      align-items: start;
    }
    .proof-lab__content h2 {
      max-width: 11ch;
    }
    .proof-lab__content p {
      font-size: 16px;
      max-width: 340px;
    }
    .proof-lab__tabs {
      max-width: 340px;
    }
    .proof-lab__tabs button {
      min-height: 34px;
      padding: 8px 11px;
      font-size: 10px;
      letter-spacing: 0.06em;
    }
    .proof-lab__notes {
      min-height: 120px;
      max-width: 340px;
    }
    .proof-lab__board {
      justify-self: stretch;
      align-self: end;
      width: 100%;
      padding: 24px;
      margin-top: 28px;
      background:
        linear-gradient(145deg, rgba(var(--walnut-rgb),0.9), rgba(var(--night-rgb),0.78)),
        rgba(var(--ink-rgb),0.78);
    }
    .board-row {
      grid-template-columns: 82px 1fr;
      gap: 12px;
    }
    .board-mini {
      grid-template-columns: 1fr;
    }
    .rl-wall-map,
    .lm-light-map,
    .ab-desk-map,
    .sx-bed-map {
      min-height: 128px;
    }
    .sx-bed-map { min-height: 210px; }
    .sx-bed-caption { grid-template-columns: 1fr; }
    .nb-layer-stack {
      grid-template-columns: 1fr;
      min-height: 0;
    }
    .nb-layer-stack span {
      min-height: 34px;
      border-right: none;
      border-bottom: 1px solid rgba(var(--cream-rgb),0.12);
    }
    .proof-lab__chips {
      left: 24px;
      right: 24px;
      bottom: 44px;
      justify-content: flex-start;
      gap: 7px;
    }
    .proof-lab__chips span {
      min-height: 30px;
      padding: 7px 10px;
      font-size: 10px;
      background: rgba(var(--cream-rgb),0.84);
    }
    .proof-lab-dark .proof-lab__chips span {
      background: rgba(var(--ink-rgb),0.62);
    }
    .big-num.case-layout { grid-template-columns: 1fr; gap: 32px; padding: 72px 24px; }
    .big-num.case-layout .bn-photo { aspect-ratio: 4/3; max-height: 360px; }
    .big-num.case-layout .bn-left .num { font-size: clamp(84px, 24vw, 130px); }
    .we-inner { grid-template-columns: 1fr; gap: 40px; }
    .we-right { border-top: 2px solid var(--ink); padding-top: 24px; }
    .we-bignum { font-size: clamp(120px, 30vw, 180px); }
    .we-mini-row { grid-template-columns: 1fr 1fr; gap: 14px; }
    .we-mini-num { font-size: 26px; }
    .bn-bar-row { grid-template-columns: 70px 1fr 90px; gap: 10px; }
    .ip-grid { grid-template-columns: 1fr; gap: 32px; }
    .ip-img-wrap { aspect-ratio: 3/4; }
    .ip-qual { grid-template-columns: 1fr 1fr; }
    .p-grid-c { grid-template-columns: 1fr 1fr; }
    .split { grid-template-columns: 1fr; }
    .svc-head-c, .svc-head-c-inner { text-align: left; }
    .svc-summary { grid-template-columns: 40px 1fr 28px; gap: 12px; }
    .svc-summary .svc-tag { display: none; }
    .svc-body { grid-template-columns: 1fr; padding: 4px 0 32px 0; gap: 24px; }
    .pillars-head-c { grid-template-columns: 1fr; gap: 32px; }
    .pillars-head-c .ph-img { max-height: 280px; }
    .img-break figcaption { left: 16px; right: 16px; bottom: 16px; max-width: none; }
    .symp-head, .warum-inner, .mq-inner, .rat-head { grid-template-columns: 1fr; gap: 32px; }
    .symp-grid, .warum-stats, .rat-grid { grid-template-columns: 1fr; }
    .rat-card { min-height: auto; }

    /* Sektionen mobil: einheitlicher Rhythmus, gleiche Seitenraender (24px) und gleiche Hoehe (72px) */
    .intro-person, .pillars-c, .svc-c, .proz, .press, .faq, .symp, .warum-legacy, .rat, .warum-editorial, .sbm-scale, .case-measures { padding: var(--section-pad-y-mobile) var(--page-pad-mobile); }
    .case-head { padding: 72px 24px 40px; }
    .split-before, .split-after { padding: 48px 24px; }
    .cta-c { padding: var(--section-pad-y-mobile) var(--page-pad-mobile); }
    .big-num { padding: 72px 24px; }
    footer.ft { padding: 64px 24px 36px; }
    .faq-head { padding-right: 0; }

    .proz-head, .press-inner, .faq-head { grid-template-columns: 1fr; gap: 32px; }
    .proz-grid { grid-template-columns: 1fr; }
    /* U12: einspaltig traegt jede Karte dieselbe Kante. */
    .proz-step { border-right: none; border-bottom: 1px solid var(--line); min-height: auto; padding-left: 0; padding-right: 0; }
    .press-right { grid-template-columns: 1fr; }
    body > .hero:not(.hero-proof-scene) .hero-main, main > .hero:not(.hero-proof-scene) .hero-main { transform: none; }
    .warum-editorial::before { width: 100%; opacity: 0.2; }
    .faq .faq-list details summary { grid-template-columns: 36px 1fr 28px; font-size: 17px; gap: 12px; padding: 18px 0; }
    .faq .faq-list details .answer { padding: 0 0 22px 48px; font-size: 15px; }
    /* Footer mobil: Brand volle Breite, darunter Kontakt/Leistungen/Navigation ordentlich in 2 Spalten */
    .ft-top,
    .ft-top:has(> :nth-child(5)) { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding-bottom: 36px; }
    .ft-top .ft-brand { grid-column: 1 / -1; padding-bottom: 28px; border-bottom: 1px solid rgba(var(--cream-rgb),0.15); }
    /* U9: Adresse, Mail, Telefon stehen mobil untereinander, nicht in einer Wrap-Reihe. */
    .ft-top .ft-contact { grid-column: 1 / -1; display: block; }
    .ft-top .ft-contact .ft-heading { width: 100%; }
    .ft-top .ft-contact .ft-mail { margin-top: 0; }
    .ft ul li { margin-bottom: 16px; }
    .ft ul li a { display: inline-block; line-height: 1.35; }
    .ft-bottom { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 28px; }
    .ft-bottom a { margin-left: 0; margin-right: 20px; }
    /* Links stehen im HTML ohne Whitespace aneinander -> ohne Flex-Wrap gibt es keinen Umbruchpunkt und die Zeile ragt bei 375px ueber den Rand */
    .ft-bottom-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 10px; }
    .ft-bottom-links a { margin-right: 0; }
    .ft-bottom-links .ft-lang { margin-left: 0; }
  }

  @media (max-width: 640px) {
    .p-grid-c { grid-template-columns: 1fr; }
    .case-measures-grid { grid-template-columns: 1fr; }
    .measure-card { border-right: 0; border-bottom: 1px solid var(--line); }
    .measure-card:last-child { border-bottom: 0; }

    /* U9 R12: Tap-Ziele auf dem Telefon. Jede Fussnoten- und Kontaktzeile
       kommt auf 44 px, ohne dass die Zeilen optisch auseinanderfallen. */
    .ft ul li a,
    .ft-mail a,
    .ft-contact a,
    .ft-bottom-links a { display: inline-block; padding: 10px 0; min-height: 44px; }
    /* U12 Fix-Runde 1: bei 390 px gewinnt dieser Block ueber den 900er. Die
       10-px-Tap-Polster tragen den Hauptabstand, 8 px Margin halten zweizeilige
       Eintraege sichtbar auseinander. */
    .ft ul li { margin-bottom: 8px; }
    nav .logo { display: inline-flex; align-items: center; min-height: 44px; }
    main .cta-c .meta a,
    body > .cta-c .meta a,
    .st-presse-link,
    .uw-press-link { display: inline-block; padding: 12px 0; min-height: 44px; }
  }

.rat-head-note { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* Kundenfeedback: Garantie und echte Referenzen */
.rf-garantie,
.rf-referenzen { padding: 110px 48px; }
.rf-garantie {
  background-color: var(--ink);
  background-image:
    linear-gradient(90deg, rgba(var(--ink-rgb), .95) 0%, rgba(var(--ink-rgb), .88) 48%, rgba(var(--ink-rgb), .56) 100%),
    url('/images/real/real-neubau-baustelle-1280.webp');
  background-position: 68% 58%;
  background-size: cover;
  color: var(--cream);
}
.rf-garantie-inner,
.rf-referenzen-inner { width: 100%; max-width: 1400px; margin: 0 auto; }
.rf-garantie-inner { display: flex; flex-direction: column; align-items: flex-start; }
.rf-garantie .uc { margin-bottom: 18px; color: #E2B39F; }
.rf-garantie h2,
.rf-referenzen h2 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; letter-spacing: -.025em; line-height: 1.05; }
.rf-garantie h2 { max-width: 15ch; }
.rf-garantie h2 em,
.rf-referenzen h2 em { color: var(--clay); font-style: italic; font-weight: 300; }
.rf-garantie h2 em { color: #E2B39F; }
.rf-garantie p { max-width: 62ch; margin-top: 34px; font-size: var(--type-body-1); line-height: 1.65; color: rgba(var(--cream-rgb), .82); }
.rf-referenzen { background: var(--cream); }
.rf-referenzen-head { max-width: 900px; margin-bottom: 54px; text-align: left; }
.rf-referenzen-head .uc { margin-bottom: 18px; color: var(--muted); }
.rf-referenzen-head h2 { max-width: 13ch; }
.rf-referenzen-head p { max-width: 58ch; margin-top: 20px; font-size: var(--type-body-1); line-height: 1.65; color: var(--ink-soft); }
.rf-referenzen-grid { display: grid; grid-template-columns: 1.35fr .825fr .825fr; gap: 18px; align-items: stretch; }
.rf-referenz { margin: 0; min-width: 0; }
.rf-referenz img { display: block; width: 100%; height: 520px; object-fit: cover; border-radius: 2px; }
.rf-referenz-wide img { object-position: center; }
.rf-referenz figcaption { padding-top: 13px; font-family: "Host Grotesk", system-ui, sans-serif; font-size: 11px; line-height: 1.5; letter-spacing: .08em; color: var(--muted); }
@media (max-width: 900px) {
  .rf-referenzen-grid { grid-template-columns: 1fr 1fr; }
  .rf-referenz-wide { grid-column: 1 / -1; }
  .rf-referenz-wide img { height: 420px; }
  .rf-referenz:not(.rf-referenz-wide) img { height: 460px; }
}

@media (max-width: 640px) {
  .rf-garantie,
  .rf-referenzen { padding: 72px 24px; }
  .rf-referenzen-grid { grid-template-columns: 1fr; }
  .rf-referenz-wide { grid-column: auto; }
  .rf-referenz-wide img,
  .rf-referenz:not(.rf-referenz-wide) img { height: auto; aspect-ratio: 4 / 3; }
  .rf-referenz:not(.rf-referenz-wide) img { object-position: center 42%; }
}


/* === F3/F4 Bildkarten-Raster: identische Karten auf Start und Baubiologie ===
   Ein Satz Regeln fuer beide Routen (Radius 2px, Bild 4/3, gleiche Typo, gleicher
   Hover). Die Startkarten sind Links (.st-arbeit-card ist selbst das <a>), die
   Messkarten auf /baubiologie/ sind Artikel ohne Ziel — deshalb greift der
   Hover-Zoom nur dort, wo auch geklickt werden kann. */
.st-arbeit-grid,
.bb-messen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  align-items: start;
}
/* U10 R13: die Startkarten atmen. Zwei Spalten statt vier, grosszuegiger
   Zeilenabstand, Bild im Querformat. Das Messraster auf /baubiologie/ bleibt
   vierspaltig, damit die beiden Seiten nicht mehr bildgleich sind. */
.st-arbeit-grid { grid-template-columns: repeat(2, 1fr); gap: 64px 48px; }
.st-arbeit-card,
.bb-messen-card {
  display: block;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}
.st-arbeit-media,
.bb-messen-media {
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background-color: rgba(var(--sand-rgb), 1);
}
.st-arbeit-media img,
.bb-messen-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 150ms ease;
}
/* U10: in der Zweierspalte ist das Bild breiter, 3:2 haelt es flach genug,
   dass Titel und Text noch im selben Blick liegen. */
.st-arbeit-media img { aspect-ratio: 3 / 2; }
.st-arbeit-card h3,
.bb-messen-card h3 {
  margin-top: 20px;
  min-height: 2.4em;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color 150ms ease;
}
/* U10: die 2.4em reservierten in der Viererreihe eine leere Zeile unter jedem
   einzeiligen Titel. In der Zweierspalte ist die Breite da, der Platzhalter
   faellt weg. */
.st-arbeit-card h3 { min-height: 0; margin-top: 14px; }
.st-arbeit-card p,
.bb-messen-card p {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
/* Die Bildzeile gehoert zum Foto, nicht zum Titel: sie sitzt direkt darunter
   und schiebt den Titel eine Stufe weiter. */
.st-arbeit-card .spec { margin-top: 10px; }
.st-arbeit-card:hover .st-arbeit-media img,
.st-arbeit-card:focus-visible .st-arbeit-media img { transform: scale(1.03); }
.st-arbeit-card:hover h3,
.st-arbeit-card:focus-visible h3 { color: var(--clay-contrast); }
.st-arbeit-card:focus-visible { outline: 2px solid var(--clay-deco); outline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  .st-arbeit-media img,
  .bb-messen-media img { transition: none; }
  .st-arbeit-card:hover .st-arbeit-media img,
  .st-arbeit-card:focus-visible .st-arbeit-media img { transform: none; }
}

@media (max-width: 900px) {
  .st-arbeit-grid,
  .bb-messen-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  /* U10: auf dem Tablet wird der Zeilenabstand wieder enger, die Zweierspalte
     steht dort ohnehin schon. */
  .st-arbeit-grid { gap: 40px 24px; }
  .st-arbeit-card h3,
  .bb-messen-card h3 { margin-top: 16px; }
}

@media (max-width: 640px) {
  .st-arbeit-grid,
  .bb-messen-grid { grid-template-columns: 1fr; gap: 32px; }
  .st-arbeit-media img,
  .bb-messen-media img { height: 200px; aspect-ratio: auto; }
  .st-arbeit-card h3,
  .bb-messen-card h3 { min-height: 0; }
}

/* === Start-Mobile: H1 eine Stufe enger. Der fruehere Hero-Ausschnitt
   (object-position 74% center) galt dem Portraet-Crop und ist mit dem
   Haus-Hero am 16.09.2026 entfallen; start.css setzt den Ausschnitt. === */
@media (max-width: 900px) {
  .st-home-hero .hero-main h1 { line-height: 1.06; }
}

/* === Vollbild-Photo-Hero (nur noch EN /about, eingefroren): letzter Nutzer von
   --hero-min-h neben dem Home-Hero. Die DE-Routen nutzen .hero-split (unten). === */
.hero.uw-hero {
  min-height: var(--hero-min-h);
  height: var(--hero-min-h);
  max-height: var(--hero-min-h);
  overflow: hidden;
  padding: 0;
}
.hero.uw-hero .hero-inner {
  min-height: var(--hero-min-h);
  height: var(--hero-min-h);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--hero-pad-top) var(--hero-pad-x) var(--hero-pad-bottom);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  grid-template-rows: unset;
  gap: 0;
}
.hero.uw-hero .hero-main {
  align-self: flex-start;
  max-width: var(--hero-type-max);
  transform: none;
}

@media (max-width: 900px) {
  .hero.uw-hero {
    min-height: var(--hero-min-h-mobile);
    height: var(--hero-min-h-mobile);
    max-height: none;
  }
  .hero.uw-hero .hero-inner {
    min-height: var(--hero-min-h-mobile);
    height: var(--hero-min-h-mobile);
    padding: var(--hero-pad-top) var(--page-pad-mobile) var(--hero-pad-bottom);
  }
}

/* ===========================================================================
   KRITIK-3 (04.09.) SYSTEM — Spacing, Split-Hero, Button-System
   ===========================================================================
   K6 Spacing-Regel: --section-pad-y sitzt genau einmal am Sektions-Wrapper
   (.section-pad), nie zusaetzlich als margin/padding an Kindern. Zwei
   gleichfarbige Nachbarn (data-tone gleich) stapeln nicht top+bottom: der zweite
   nimmt oben die halbe Stufe. Farbwechsel behaelt das volle Pad. */
.section-pad { padding: var(--section-pad-y) var(--page-pad); position: relative; }
.section-pad > .section-inner { max-width: var(--content-max); margin: 0 auto; }
.section-pad[data-tone="cream"] + .section-pad[data-tone="cream"],
.section-pad[data-tone="warm"] + .section-pad[data-tone="warm"],
.section-pad[data-tone="paper"] + .section-pad[data-tone="paper"],
.section-pad[data-tone="ink"] + .section-pad[data-tone="ink"] { padding-top: calc(var(--section-pad-y) / 2); }
.section-pad figcaption { margin-top: 8px; }

/* K3 Split-Hero (Bauen, Baubiologie, Projekte, Ueber uns, Kontakt): Hoehe = Bild.
   Foto 4/5 in der 55-%-Spalte, Text vertikal zentriert, kein --hero-min-h, keine
   leere Cream ueber der H1. Routen setzen nur Bild, Text und Reihenfolge. */
.hero-split {
  display: grid; grid-template-columns: var(--hero-split-cols); gap: var(--hero-split-gap);
  align-items: center; max-width: var(--page-max); margin: 0 auto;
  padding: var(--hero-pad-top) var(--hero-pad-x) var(--section-pad-y);
}
.hero-split.hero-split-reverse { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
.hero-split.hero-split-reverse .hero-split-media { order: -1; }
.hero-split-text { min-width: 0; }
.hero-split-text h1 { max-width: 16ch; }
.hero-split-text .hero-lead { margin-top: 20px; max-width: 46ch; color: var(--ink-soft); }
.hero-split-text .hero-actions { margin-top: 28px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.hero-split-media { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; min-width: 0; }
.hero-split-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-split-pos, center top); }
@media (max-width: 900px) {
  .hero-split {
    grid-template-columns: 1fr; gap: 24px;
    padding: var(--hero-pad-top) var(--page-pad-mobile) var(--section-pad-y-mobile);
  }
  /* K8: Foto <= 55vh, H1 und CTA bleiben im ersten Screen. */
  .hero-split-media,
  .hero-split.hero-split-reverse .hero-split-media { order: 0; aspect-ratio: auto; height: min(55vh, 420px); }
  .hero-split-text { order: 1; }
}
@media (max-width: 640px) {
  .hero-split { padding-inline: 0; }
  .hero-split-media { border-radius: 0; }
  .hero-split-text { padding-inline: var(--page-pad-mobile); }
}

/* K5 Button-System (verbindlich fuer alle Routen):
   Primaer   = .btn-premium.solid-ink  (Cream/Warm/Paper-Grund)
   Sekundaer = .btn-text               (Textlink mit Pfeil, gleiche Caps-Familie)
   solid-cream nur auf dunklem Grund (Ink-Closer, Foto-Hero). Nie zwei Fills in einem Fold;
   Header-CTA zaehlt als Fill, ausser auf body[data-hero=photo] (dort Textlink). */

/* ===========================================================================
   Bau 3 (03.09.) — Foto-Heroes: Start, Bauen, Baubiologie, Projekte
   Quelle: handoff/KRITIK-2.md G1/G2/G6, leaves/k2-design-blind.md, leaves/k2-mobile.md.
   Greift nur, wenn die Seite am <body> data-hero="photo" traegt. Cream-Seiten
   (Ueber uns, Kontakt, Ratgeber) bleiben unberuehrt.
   =========================================================================== */

/* --- G1 Verlauf nur unter der Textspalte: linke 45 %, rechte 55 % ohne Verlauf --- */
body[data-hero="photo"] .hero .hero-bg::after {
  background:
    linear-gradient(90deg,
      rgba(var(--shade-rgb), 0.88) 0%,
      rgba(var(--shade-rgb), 0.78) 22%,
      rgba(var(--shade-rgb), 0.44) 36%,
      rgba(var(--shade-rgb), 0.10) 43%,
      rgba(var(--shade-rgb), 0) 45%);
}
/* Schmaler Streifen unter der fixen Nav, damit Logo und Navlinks auf hellen
   Motiven lesbar bleiben. Endet vor dem Motivbereich, nicht ueber dem Bild. */
body[data-hero="photo"] .hero .hero-bg::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 132px;
  z-index: 1;
  background: linear-gradient(180deg, rgba(var(--shade-rgb), 0.42) 0%, rgba(var(--shade-rgb), 0) 100%);
  pointer-events: none;
}

/* --- G1 Typo bleibt in der linken 45-%-Spalte. Groesse: Token aus fonts.css (K1),
   kein Photo-Hero-Override mehr. --- */
body[data-hero="photo"] .hero .hero-main {
  max-width: min(45vw - var(--hero-pad-x), 640px);
}
body[data-hero="photo"] .hero .hero-main h1 {
  line-height: 1.06;
  max-width: none;
  text-wrap: balance;
}
body[data-hero="photo"] .hero .hero-sub {
  margin-top: 20px;
  max-width: 46ch;
}
/* --- G1 genau ein Primaerbutton, Sekundaer als Textlink mit Pfeil --- */
body[data-hero="photo"] .hero .hero-cta-row {
  margin-top: 30px;
  gap: 28px;
}
body[data-hero="photo"] .hero .hero-cta-row .btn-text { color: var(--cream); }
body[data-hero="photo"] .hero .hero-cta-row .btn-text:hover,
body[data-hero="photo"] .hero .hero-cta-row .btn-text:focus-visible { color: var(--clay-light); }

/* --- K5: Header-CTA auf Foto-Heroes als Textlink (kein Fill): ein Fill pro Fold,
   den behaelt der Hero-Button. Nach dem Scroll (Nav auf Cream) wieder Fill (Regel
   in SiteNavLive.astro). --- */
body[data-hero="photo"]:has(.hero) nav:not([data-scrolled="true"]) .navlinks .nav-cta {
  color: var(--cream);
  background: transparent;
  border-color: transparent;
  padding-inline: 8px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body[data-hero="photo"]:has(.hero) nav:not([data-scrolled="true"]) .navlinks .nav-cta:hover,
body[data-hero="photo"]:has(.hero) nav:not([data-scrolled="true"]) .navlinks .nav-cta:focus-visible {
  color: var(--clay-light);
  background: transparent;
  border-color: transparent;
}

/* --- Zwischenband 641 bis 900px: der Overlay-Hero bleibt, aber die 45-%-Spalte
   ist hier zu schmal. Die Textspalte laeuft breiter, die H1 eine Stufe kleiner,
   damit sie nicht auf fuenf bis sechs Zeilen bricht. Der Stack darunter (<=640)
   loest das Problem endgueltig. --- */
@media (min-width: 641px) and (max-width: 900px) {
  body[data-hero="photo"] .hero .hero-main { max-width: min(76vw, 620px); }
  body[data-hero="photo"] .hero .hero-main h1 { line-height: 1.05; }
  body[data-hero="photo"] .hero .hero-bg::after {
    background:
      linear-gradient(90deg,
        rgba(var(--shade-rgb), 0.9) 0%,
        rgba(var(--shade-rgb), 0.8) 40%,
        rgba(var(--shade-rgb), 0.5) 62%,
        rgba(var(--shade-rgb), 0.16) 82%,
        rgba(var(--shade-rgb), 0.08) 100%);
  }
}

/* --- G2 Mobile <= 640px: Stack wie Ueber uns. Foto 60vh ohne Typ, darunter Cream-Band --- */
@media (max-width: 640px) {
  body[data-hero="photo"] .hero {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    background: var(--cream);
    color: var(--ink);
    padding: var(--hero-pad-top) 0 0;
  }
  body[data-hero="photo"] .hero .hero-bg {
    position: relative;
    inset: auto;
    height: 55vh;
    min-height: 300px;
    max-height: 520px;
  }
  body[data-hero="photo"] .hero .hero-bg img {
    object-position: var(--hero-stack-pos, center);
    transform: none;
    animation: none;
  }
  /* Kein Verlauf auf dem Foto: die Typo steht darunter. */
  body[data-hero="photo"] .hero .hero-bg::after,
  body[data-hero="photo"] .hero .hero-bg::before { display: none; }

  body[data-hero="photo"] .hero .hero-inner {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    padding: 32px var(--page-pad-mobile) var(--section-pad-y-mobile);
    background: var(--cream);
    color: var(--ink);
  }
  body[data-hero="photo"] .hero .hero-kicker { display: none; }
  body[data-hero="photo"] .hero .hero-main {
    max-width: 620px;
    transform: none;
  }
  body[data-hero="photo"] .hero .hero-main h1 {
    line-height: 1.05;
    color: var(--ink);
  }
  body[data-hero="photo"] .hero .hero-sub {
    margin-top: 18px;
    color: var(--ink-soft);
  }
  body[data-hero="photo"] .hero .hero-cta-row {
    margin-top: 26px;
    gap: 18px;
    flex-direction: column;
    align-items: flex-start;
    max-width: none;
  }
  /* Primaerknopf vollbreit, auf Cream als ink-Flaeche. */
  body[data-hero="photo"] .hero .hero-cta-row .btn-premium.solid-cream {
    width: 100%;
    justify-content: space-between;
    color: var(--cream);
    background: var(--ink);
    border-color: var(--ink);
  }
  body[data-hero="photo"] .hero .hero-cta-row .btn-premium.solid-cream:hover,
  body[data-hero="photo"] .hero .hero-cta-row .btn-premium.solid-cream:focus-visible {
    color: var(--cream);
    background: var(--ink-soft);
    border-color: var(--ink-soft);
  }
  body[data-hero="photo"] .hero .hero-cta-row .btn-text {
    min-height: 44px;
    color: var(--ink);
  }
  body[data-hero="photo"] .hero .hero-cta-row .btn-text:hover,
  body[data-hero="photo"] .hero .hero-cta-row .btn-text:focus-visible { color: var(--clay-deco); }

  /* Die Nav steht jetzt auf Cream, nicht mehr auf dem Foto. */
  body[data-hero="photo"]:has(.hero) nav:not([data-scrolled="true"]) {
    background: var(--cream);
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
  }
  body[data-hero="photo"]:has(.hero) nav:not([data-scrolled="true"]) .logo { color: var(--ink); }
  body[data-hero="photo"]:has(.hero) nav:not([data-scrolled="true"]) .logo em { color: rgba(var(--ink-rgb), 0.6); }
  body[data-hero="photo"]:has(.hero) nav:not([data-scrolled="true"]) .nav-burger span { background: var(--ink); }
  body[data-hero="photo"]:has(.hero) nav:not([data-scrolled="true"]) .nav-mobile-chrome .nav-tel { color: var(--ink); }
}

/* U9 R12: Tap-Ziel 44 px fuer Inline-Links im Fliesstext. padding-block
   vergroessert die Klickflaeche, margin-block nimmt denselben Betrag wieder aus
   der Zeilenbox: die Zeile rueckt keinen Pixel, der Daumen trifft trotzdem. */
@media (max-width: 640px) {
  .ft-brand .ft-tagline .flow-link {
    display: inline-block;
    padding-block: 13px;
    margin-block: -13px;
    min-height: 44px;
    /* Die Unterlaenge muss am Text haengen, nicht am gepolsterten Kasten:
       border-bottom saesse sonst 13 px zu tief als eigene Linie. */
    border-bottom: 0;
    text-decoration: underline;
    text-decoration-color: rgba(var(--cream-rgb), 0.4);
    text-underline-offset: 0.2em;
  }
  .ft-brand .ft-tagline .flow-link:hover { text-decoration-color: var(--clay-light); }
}