/* ==========================================================================
   DILLIS INNENAUSBAU — style.css
   Fundament: Fonts · Token-System (zwei Welten) · Base
   Alle Farbwerte rechnerisch verifiziert (WCAG + APCA), siehe _recherche/.
   ========================================================================== */

/* ── Fonts (self-hosted, OFL) ─────────────────────────────────────────── */

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/hanken-vf-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/hanken-vf-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/hanken-italic-vf-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-italic-vf-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-italic-vf-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ───────────────────────────────────────────────────────────── */

:root {
    /* ═══ Feste Paletten-Werte (beide Welten, verifiziert) ═══ */

    /* Dunkle Welt — Anthrazit. Default: KÜHL (RAL-7016-nah, Hue ~245) —
       das Anthrazit des Innenausbaus, neben warmem Holz die klassische
       Material-Kombination. html[data-ton="warm"] schaltet auf Hue 70. */
    --hue-d: 245;
    --dunkel-tief:     oklch(0.17  0.008 var(--hue-d));   /* Footer, Hero-Boden   */
    --dunkel-grund:    oklch(0.21  0.010 var(--hue-d));   /* dunkler Seiten-Grund */
    --dunkel-flaeche:  oklch(0.245 0.010 var(--hue-d));   /* Cards                */
    --dunkel-erhoben:  oklch(0.285 0.010 var(--hue-d));   /* Nav, Modals          */
    --dunkel-text-3:   oklch(0.70  0.008 var(--hue-d));   /* Muted  · Lc −49      */
    --dunkel-text-2:   oklch(0.86  0.006 var(--hue-d));   /* Body   · Lc −77      */
    --dunkel-text-1:   oklch(0.93  0.005 var(--hue-d));   /* Headline, kein #fff  */
    --dunkel-border-stark: oklch(0.55 0.01 var(--hue-d)); /* Inputs, 3:1          */

    /* Helle Welt — warme Papier-Leiter, Hue 82–84 */
    --hell-paper:  oklch(0.977 0.008 84);   /* #faf7f1 — Formular-Blatt, Cards  */
    --hell-grund:  oklch(0.962 0.013 82);   /* #f7f2e9 — heller Seiten-Grund    */
    --hell-tint:   oklch(0.935 0.017 84);   /* #efe9dd — Section-Alternation    */
    --hell-tief:   oklch(0.900 0.020 82);   /* #e5ddd0 — Quiet-Zonen            */
    --hell-text-1: oklch(0.230 0.012 70);   /* #211c17 — Headline-Tinte         */
    --hell-text-2: oklch(0.320 0.012 70);   /* #37322c — Body-Tinte             */
    --hell-text-3: oklch(0.487 0.015 70);   /* #655e57 — Muted (4.73:1 überall) */
    --hell-faint:  oklch(0.680 0.015 75);   /* nur dekorativ (Ghost)            */

    /* Akzent Cognac — ein Hue, drei Ausprägungen (matt = flach, nie Verlauf) */
    --cognac-dunkelgrund: oklch(0.672 0.104 58);  /* #c68552 — nur auf Anthrazit  */
    --cognac-tinte:       oklch(0.500 0.110 58);  /* #915114 — Text auf hell      */
    --cognac-grafik:      oklch(0.615 0.110 58);  /* #b5733c — Linien/em auf hell */
    --cognac-ink:         oklch(0.280 0.050 58);  /* Text AUF Cognac-Fläche       */

    /* ═══ Rollen-Tokens — Default: HELLE Welt (Seite ist hell-dominant) ═══ */
    --grund:        var(--hell-grund);
    --grund-tint:   var(--hell-tint);
    --flaeche:      var(--hell-paper);
    --tinte-1:      var(--hell-text-1);
    --tinte-2:      var(--hell-text-2);
    --tinte-3:      var(--hell-text-3);
    --akzent:        var(--cognac-tinte);
    --akzent-grafik: var(--cognac-grafik);
    --linie:      color-mix(in oklch, var(--tinte-2) 14%, transparent);
    --linie-soft: color-mix(in oklch, var(--tinte-2) 8%, transparent);
    --linie-stark: color-mix(in oklch, var(--tinte-2) 26%, transparent);

    /* Gewichte (hell: eine Spur kräftiger — 380 wirkt auf Cream klinisch) */
    --w-display: 430;
    --w-body:    410;
    --w-label:   460;
    --w-strong:  520;

    /* Depth hell: Single-Shadow in warmer Material-Tinte (#372b21), nie grau */
    --schatten-rgb: 55 43 33;
    --depth-rest:  0 10px 30px 0 rgb(var(--schatten-rgb) / 0.10);
    --depth-hover: 0 14px 40px 0 rgb(var(--schatten-rgb) / 0.15);

    /* ═══ Typografie ═══ */
    --font-sans:  'Hanken Grotesk', 'Helvetica Neue', Arial, ui-sans-serif, sans-serif;
    --font-serif: 'Fraunces', Georgia, serif;

    /* Fluid-Skala 360→1440, Ratio 1.2→1.333, Body 17→19px */
    --t-meta:  clamp(0.6875rem, 0.646rem + 0.185vw, 0.8125rem);  /* 11→13   */
    --t-small: clamp(0.9063rem, 0.875rem + 0.139vw, 1rem);        /* 14.5→16 */
    --t-0:     clamp(1.0625rem, 1.021rem + 0.185vw, 1.1875rem);   /* 17→19   */
    --t-1:     clamp(1.275rem, 1.173rem + 0.454vw, 1.58rem);      /* 20→25   */
    --t-2:     clamp(1.53rem, 1.337rem + 0.859vw, 2.109rem);      /* 24→34   */
    --t-3:     clamp(1.8375rem, 1.5125rem + 1.444vw, 2.8125rem);  /* 29→45   */
    --t-4:     clamp(2.2rem, 1.691rem + 2.287vw, 3.75rem);        /* 35→60   */
    --t-5:     clamp(2.64rem, 1.859rem + 3.49vw, 5rem);           /* 42→80   */
    --t-6:     clamp(3rem, 1.833rem + 5.185vw, 6.5rem);           /* 48→104  */

    --track-display: -0.028em;   /* große Mixed-Case-Zeilen  */
    --track-sub:     -0.012em;   /* mittlere Headlines       */
    --track-label:    0.10em;    /* Uppercase-Labels         */

    /* ═══ Motion (2 Kurven + Klassen — jede Transition referenziert Tokens) ═══ */
    --ease-out:   cubic-bezier(0.165, 0.84, 0.44, 1);   /* Response/Reveals      */
    --ease-scene: cubic-bezier(0.72, 0, 0.16, 1);       /* Curtains/Panels/VT    */
    --ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19); /* Exits, selten         */
    --dur-fast:    180ms;
    --dur-base:    280ms;
    --dur-reveal:  700ms;
    --dur-scene:   650ms;
    --dur-ambient: 4s;
    --reveal-y:      16px;
    --reveal-y-gross: 40px;

    /* ═══ Layout ═══ */
    --wrap-max:    1400px;
    --wrap-schmal: 880px;
    --wrap-pad:    clamp(1.25rem, 4vw, 2.5rem);
    --bleed:       min(1760px, 100vw - 2 * var(--wrap-pad));
    --akt-pad:     clamp(6rem, 14vh, 11rem);   /* Typo-Atemzüge: +25% Luft     */
    --nav-h:       72px;

    /* Drei-Zonen-Radius: Interaktion rund (100px) · Karten weich (14–18px) ·
       Medien LEICHT gebrochen — nimmt der Anthrazit-Welt die Stanz-Härte,
       ohne das Werk-Idiom aufzugeben. Zum Vergleichen: 0 / 6px / 10px. */
    --r-media: 6px;

    color-scheme: light;
    accent-color: var(--akzent);
}

/* Dunkle Welt — Sections tragen data-welt="dunkel", Tokens kippen komplett */
[data-welt="dunkel"] {
    --grund:        var(--dunkel-grund);
    --grund-tint:   var(--dunkel-flaeche);
    --flaeche:      var(--dunkel-flaeche);
    --tinte-1:      var(--dunkel-text-1);
    --tinte-2:      var(--dunkel-text-2);
    --tinte-3:      var(--dunkel-text-3);
    --akzent:        var(--cognac-dunkelgrund);
    --akzent-grafik: var(--cognac-dunkelgrund);
    --linie:      color-mix(in oklch, var(--tinte-2) 14%, transparent);
    --linie-soft: color-mix(in oklch, var(--tinte-2) 8%, transparent);
    --linie-stark: color-mix(in oklch, var(--tinte-2) 24%, transparent);

    --w-display: 385;   /* Halation bläht auf dunkel — Gewichte zurücknehmen */
    --w-body:    395;
    --w-label:   430;
    --w-strong:  490;

    /* Tiefe über Licht, nicht Schatten */
    --depth-rest:  inset 0 1px 0 color-mix(in oklch, var(--tinte-1) 7%, transparent);
    --depth-hover: inset 0 1px 0 color-mix(in oklch, var(--tinte-1) 12%, transparent);

    color-scheme: dark;
}

/* Fassung „Dunkle Dominanz": das Root-Element muss mitkippen, sonst bleibt
   die Viewport-Scrollbar im Light-Scheme (color-scheme propagiert nur vom
   Root; explizites :root-light blockt die Body-Propagation) */
:root:has(body[data-welt="dunkel"]) { color-scheme: dark; }

/* Helle Insel in dunkler Umgebung — Rezept „dunkle Bühne, helles Blatt":
   ein Element (z. B. das Briefbogen-Formular) trägt data-welt="hell" und
   holt sich die komplette helle Token-Welt zurück, egal wie dunkel der
   Ancestor-Kontext ist. Spiegel der :root-Rollen-Tokens. */
[data-welt="hell"] {
    --grund:        var(--hell-grund);
    --grund-tint:   var(--hell-tint);
    --flaeche:      var(--hell-paper);
    --tinte-1:      var(--hell-text-1);
    --tinte-2:      var(--hell-text-2);
    --tinte-3:      var(--hell-text-3);
    --akzent:        var(--cognac-tinte);
    --akzent-grafik: var(--cognac-grafik);
    --linie:      color-mix(in oklch, var(--tinte-2) 14%, transparent);
    --linie-soft: color-mix(in oklch, var(--tinte-2) 8%, transparent);
    --linie-stark: color-mix(in oklch, var(--tinte-2) 26%, transparent);

    --w-display: 430;
    --w-body:    410;
    --w-label:   460;
    --w-strong:  520;

    --depth-rest:  0 10px 30px 0 rgb(var(--schatten-rgb) / 0.10);
    --depth-hover: 0 14px 40px 0 rgb(var(--schatten-rgb) / 0.15);

    color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 1ms; --dur-base: 1ms;
        --dur-reveal: 1ms; --dur-scene: 1ms; --dur-ambient: 1ms;
        --reveal-y: 0px; --reveal-y-gross: 0px;
    }
    html { scroll-behavior: auto; }
}

/* ── Base ─────────────────────────────────────────────────────────────── */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
}

body {
    margin: 0;
    background: var(--grund);
    color: var(--tinte-2);
    font-family: var(--font-sans);
    font-size: var(--t-0);
    font-weight: var(--w-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

h1, h2, h3, h4 {
    margin: 0;
    color: var(--tinte-1);
    font-weight: var(--w-display);
    text-wrap: balance;
}
h1 { font-size: var(--t-6); line-height: 1.04; letter-spacing: var(--track-display); }
h2 { font-size: var(--t-4); line-height: 1.08; letter-spacing: var(--track-display); }
h3 { font-size: var(--t-2); line-height: 1.15; letter-spacing: var(--track-sub); }
h4 { font-size: var(--t-1); line-height: 1.25; letter-spacing: var(--track-sub); }

p {
    margin: 0 0 1em;
    text-wrap: pretty;
    max-width: 62ch;
}
p:last-child { margin-bottom: 0; }

/* em-Konvention: in Headlines = AUFRECHT im Akzent (bau-33, User-Entscheid
   „Kursiv wirkt billig" — die Serif-Kursive war der Template-Tick). Der
   Zweiklang bleibt: weiße Zeile + Cognac-Zeile, Akzent über Farbe + Gewicht
   statt über Schriftwechsel. Im Fließtext = kräftigeres Hanken (unverändert). */
h1 em, h2 em, h3 em, .statement em {
    font-style: normal;
    font-weight: calc(var(--w-display) + 70);
    color: var(--akzent-grafik);
    letter-spacing: 0;
}
p em, li em {
    font-style: normal;
    font-weight: var(--w-strong);
    color: var(--tinte-1);
}

strong { font-weight: var(--w-strong); color: var(--tinte-1); }

/* Eyebrow-Label mit Haarlinie */
.label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    font-size: var(--t-meta);
    font-weight: var(--w-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--tinte-3);
}
.label::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--akzent-grafik);
    flex: none;
}

a {
    color: var(--tinte-1);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in oklch, var(--tinte-1) 30%, transparent);
    transition: color var(--dur-fast) var(--ease-out),
                text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover {
    color: var(--akzent);
    text-decoration-color: var(--akzent);
}

img, video {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0;   /* Basis 0 — der Medien-Radius sitzt auf den CLIP-
                           Containern (Single-Clip-Strategie), nackte Bilder
                           bekommen ihn gezielt unten */
}

/* Medien-Radius auf den Clip-Containern (Single-Clip) bzw. nackten Bildern
   mit eigenem Schatten. Vollflächige Medien (Hero) bleiben kantenlos. */
.reel-rahmen,
.buehne-bild,
.split-bild,
.media-inset,
.zoomrahmen {
    border-radius: var(--r-media);
}

/* Hover-Zoom (bau-35): Zoom aufs INNERE Bild im geclippten Rahmen —
   scale ist zentriert (kein Edge-Bleed), Radius/Schatten/Border leben auf
   dem Rahmen (Single-Clip), die transition auf img — NIE auf der figure
   (die trägt .rv, Shorthand-Falle) */
.zoomrahmen {
    display: block;
    overflow: hidden;
}
.zoomrahmen img {
    border-radius: 0;
    transition: transform 0.55s var(--ease-out), filter 0.55s var(--ease-out);
}
@media (hover: hover) {
    figure:hover > .zoomrahmen img,
    figure:hover > .zoomrahmen picture img {
        transform: scale(1.045);
        filter: brightness(1) saturate(1);
    }
    [data-welt="dunkel"] figure:hover > .zoomrahmen img,
    [data-welt="dunkel"] figure:hover > .zoomrahmen picture img {
        filter: brightness(0.96) saturate(0.97);
    }
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
    /* OKLAB statt OKLCH: Cognac (H58) + Anthrazit-Töne (H245) liegen >180°
       auseinander — der OKLCH-Hue-Bogen liefe durch Magenta */
    outline: 2px solid color-mix(in oklab, var(--akzent) 70%, var(--tinte-1));
    outline-offset: 3px;
}

::selection {
    background: color-mix(in oklch, var(--cognac-grafik) 30%, var(--hell-tint));
    color: var(--hell-text-1);
}
/* Auswahl-Band folgt der Welt (Audit-Fund: global-helles Band leakte auf
   Anthrazit). Cognac×Anthrazit in OKLAB — Hue-Wrap-Falle. Hell-Spiegel
   danach, damit das helle Blatt in dunkler Bühne die helle Auswahl behält. */
[data-welt="dunkel"] ::selection {
    background: color-mix(in oklab, var(--cognac-dunkelgrund) 35%, var(--dunkel-flaeche));
    color: var(--dunkel-text-1);
}
[data-welt="hell"] ::selection {
    background: color-mix(in oklch, var(--cognac-grafik) 30%, var(--hell-tint));
    color: var(--hell-text-1);
}

[hidden] { display: none !important; }

/* Zahlen in Maßen/Meta stehen sauber */
.tnum { font-variant-numeric: tabular-nums; }

/* ── Layout-Utilities ─────────────────────────────────────────────────── */

.wrap {
    width: 100%;
    max-width: var(--wrap-max);
    margin-inline: auto;
    padding-inline: var(--wrap-pad);
}
.wrap-schmal {
    width: 100%;
    max-width: var(--wrap-schmal);
    margin-inline: auto;
    padding-inline: var(--wrap-pad);
}

/* Akte: jede Section deklariert ihre Welt selbst; Grund kommt vom Token */
.akt {
    position: relative;
    background: var(--grund);
    color: var(--tinte-2);
    padding-block: var(--akt-pad);
}

/* Dunkle Inszenierungs-Räume: Radial-Licht oben links, nie Vollton.
   Materialität endet an der Akt-Kante (harter Schnitt = Kapitel-Grenze). */
html[data-ton="warm"] { --hue-d: 70; }

.licht-raum {
    background: radial-gradient(120% 95% at 18% 0%,
        oklch(0.265 0.012 var(--hue-d)) 0%,
        oklch(0.21  0.010 var(--hue-d)) 55%,
        oklch(0.17  0.008 var(--hue-d)) 100%);
}

/* Signature „Licht wandert": ein weicher Lichtfleck driftet ambient durch
   die dunklen Räume — Composite-only (transform), nie Gradient animieren */
.licht-raum::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 70%;
    height: 80%;
    background: radial-gradient(closest-side, oklch(0.9 0.02 75 / 0.05), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .licht-raum::after {
        animation: licht-drift 14s var(--ease-soft, ease-in-out) infinite alternate;
    }
}
@keyframes licht-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(9%, 6%, 0); }
}

/* Grain — Banding-Schutz + Materialität. Statisch, nie animieren. */
.grain::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}
[data-welt="dunkel"] .grain::before,
[data-welt="dunkel"].grain::before {
    mix-blend-mode: overlay;
    opacity: 0.05;
}
.grain:not([data-welt="dunkel"])::before {
    mix-blend-mode: multiply;
    opacity: 0.025;
}
.grain > * { position: relative; z-index: 1; }

/* Foto-Grund (leise): ein Bild als Section-Underlay via ::before — gedimmt +
   leicht entfärbt, mit langer weicher Mask-Fade oben/unten, sodass es sich in
   den Akt-Grund auflöst statt hart anzusetzen. Bild via --akt-foto, Intensität
   via --akt-foto-op. Liegt HINTER dem Inhalt (::before z 0, Inhalt z 1) — die
   Leistungs-Tiles bleiben unberührt, nur der Section-Grund bekommt Tiefe. */
.akt-foto::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--akt-foto);
    background-size: cover;
    background-position: var(--akt-foto-pos, center);
    filter: saturate(0.85) brightness(0.9);
    opacity: var(--akt-foto-op, 0.16);
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.35) 9%,
        rgba(0, 0, 0, 0.8) 18%,
        #000 27%,
        #000 70%,
        rgba(0, 0, 0, 0.6) 82%,
        rgba(0, 0, 0, 0.22) 92%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.35) 9%,
        rgba(0, 0, 0, 0.8) 18%,
        #000 27%,
        #000 70%,
        rgba(0, 0, 0, 0.6) 82%,
        rgba(0, 0, 0, 0.22) 92%,
        transparent 100%);
    z-index: 0;
    pointer-events: none;
}
.akt-foto > * { position: relative; z-index: 1; }

/* Bauplan-Grund (leise „Kratzer"): eine echte Bewehrungs-/Schnitt-Zeichnung
   als Section-Underlay, per invert(1)+grayscale zu FEINEN hellen Linien auf
   dem Anthrazit-Grund (Negativ, altes-Seite-„Section-Image"-Rezept). Erzählt
   Planung/Präzision hinter den Leistungen. Bild via --akt-plan, Intensität
   via --akt-plan-op. Liegt hinter dem Inhalt; die Typo-Tiles bleiben unberührt. */
.akt-plan::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--akt-plan);
    background-size: cover;
    background-position: center;
    filter: invert(1) grayscale(1) brightness(0.9) contrast(1.2);
    opacity: var(--akt-plan-op, 0.10);
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 10%,
        #000 24%,
        #000 76%,
        rgba(0, 0, 0, 0.4) 90%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.4) 10%,
        #000 24%,
        #000 76%,
        rgba(0, 0, 0, 0.4) 90%,
        transparent 100%);
    z-index: 0;
    pointer-events: none;
}
.akt-plan > * { position: relative; z-index: 1; }

/* hims-Mikro-Gradient: Wärme-Gewicht nach unten, Endpunkt weit außerhalb */
.tile-hell {
    background: linear-gradient(180deg, var(--hell-tint) 35%, oklch(0.46 0.06 47) 420%);
}

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

/* ==========================================================================
   HEADER / NAV — transparent über dunklem Hero → solid nach Scroll.
   Kein Frosted-Glass (paint-heavy Page, Recherche: solid 97% ist auf
   Anthrazit visuell fast identisch, kostet aber nichts). Chameleon via
   data-welt, das JS aus der aktuell überlappenden Section kopiert.
   ========================================================================== */

.nav {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 130;   /* über dem Mobile-Curtain (120) — Marke + Toggle bleiben bedienbar */
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}
.nav.scrolled {
    background: color-mix(in oklch, var(--grund) 97%, transparent);
    border-bottom-color: var(--linie-soft);
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: var(--nav-h);
    transition: height var(--dur-base) var(--ease-out);
}
.nav.scrolled .nav-inner { height: 60px; }

.marke {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.16rem;
    font-weight: var(--w-strong);
    letter-spacing: 0.01em;
    color: var(--tinte-1);
    text-decoration: none;
    white-space: nowrap;
}
/* iD-Bildmarke (Nachbau der Kunden-Marke als SVG, bau-34): Zeichen folgt
   der Nav-Tinte via currentColor, der rote i-Punkt bleibt Markenfarbe */
.marke-zeichen {
    height: 1.7em;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.marke span {
    font-weight: var(--w-body);
    color: var(--tinte-3);
    letter-spacing: 0.02em;
}
.marke:hover { color: var(--tinte-1); }

.nav-links {
    display: flex;
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.nav-links a {
    position: relative;
    font-size: 0.95rem;
    font-weight: var(--w-label);
    color: var(--tinte-3);
    text-decoration: none;
    padding-block: 0.35rem;
    transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--tinte-1); }
.nav-links a[aria-current]::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: var(--akzent-grafik);
}
.nav-links a[aria-current] { color: var(--tinte-1); }

.nav-aktion {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.nav-tel {
    font-size: 0.92rem;
    color: var(--tinte-3);
    text-decoration: none;
}
.nav-tel:hover { color: var(--tinte-1); }

/* CTA-Pill: Ghost über transparentem Hero → Cognac-Fläche nach Scroll.
   Cognac-Fläche ist welt-konstant (hims-Muster), Text ton-in-ton dunkel.
   Kein translateY, kein Glow — Zustandswechsel über Farbe. */
.cta-pill {
    display: inline-block;
    white-space: nowrap;
    padding: 0.62rem 1.4rem;
    border-radius: var(--r-media);   /* User-Entscheid: Buttons = Medien-Radius */
    font-size: 0.92rem;
    font-weight: var(--w-label);
    text-decoration: none;
    color: var(--tinte-1);
    border: 1px solid var(--linie-stark);
    background: transparent;
    transition: background-color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out),
                filter var(--dur-fast) var(--ease-out);
}
.cta-pill:hover {
    border-color: var(--akzent-grafik);
    color: var(--tinte-1);
}
.nav.scrolled .cta-pill,
.cta-pill.voll {
    background: var(--cognac-dunkelgrund);
    border-color: transparent;
    color: var(--cognac-ink);
}
.nav.scrolled .cta-pill:hover,
.cta-pill.voll:hover {
    filter: brightness(1.06) saturate(1);
    color: var(--cognac-ink);
}

/* Bei offenem Curtain wird die Bar unsichtbare Bühne — nur Marke + Toggle */
body.menue-offen .nav {
    background: transparent;
    border-bottom-color: transparent;
}

/* Toggle (mobil): zwei Linien → X */
.nav-toggle {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
}
.nav-toggle span:not(.sr-only) {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 1.5px;
    background: var(--tinte-1);
    transition: transform var(--dur-base) var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile-Curtain: solid in Seitenfarbe (Blur auf statischem Overlay wäre
   unsichtbar teuer), Riesen-Typo, Stagger 50ms */
.menue {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--wrap-pad);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-scene) var(--ease-scene);
}
.menue.offen {
    opacity: 1;
    pointer-events: auto;
}
.menue[hidden] { display: flex !important; }
.menue-links a {
    display: block;
    font-size: var(--t-4);
    font-weight: var(--w-display);
    letter-spacing: var(--track-sub);
    color: var(--tinte-1);
    text-decoration: none;
    padding-block: 0.45rem;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.menue.offen .menue-links a {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 50ms + 80ms);
}
.menue-links a:hover { color: var(--akzent); }
.menue-links .menue-cta {
    display: inline-block;
    width: fit-content;
    font-size: 0.95rem;
    font-weight: var(--w-label);
    letter-spacing: 0.02em;
    margin-top: 1.75rem;
    padding: 0.7rem 1.5rem;
}
.menue-meta {
    margin-top: 3rem;
    font-size: var(--t-small);
    color: var(--tinte-3);
    opacity: 0;
    transition: opacity var(--dur-reveal) var(--ease-out) 380ms;
}
.menue.offen .menue-meta { opacity: 1; }
body.menue-offen { overflow: hidden; }

@media (max-width: 860px) {
    .nav-links, .nav-tel { display: none; }
    .nav-toggle { display: block; }
}
@media (max-width: 640px) {
    /* Marke + Toggle only — die CTA lebt im Curtain */
    .nav .cta-pill { display: none; }
}

/* ==========================================================================
   AKT 1 — HERO (dunkel): Typo-Statement auf gegradetem Material.
   Kein CTA (Header trägt ihn), Höhe unter 100svh (Anschnitt der Folge-
   Section), EINE aufgelöste Kante: Bottom-Fade in die helle Welt.
   ========================================================================== */

.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: calc(100svh - clamp(3.5rem, 9svh, 6rem));
    background: var(--dunkel-grund);
    color: var(--tinte-2);
    overflow: hidden;
}
.hero-medium {
    /* Overscan: schneidet den Parkettboden am Bildrand weg */
    position: absolute;
    inset: -6%;
    z-index: 0;
}
.hero-medium img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 40%;
    /* Grading: Material sinkt in die Anthrazit-Welt ein — Maserung lesbar,
       aber der Raum bleibt dunkel */
    /* Warm-Grading: das graue Altholz Richtung Honig/Patina schieben */
    filter: brightness(0.66) sepia(0.24) saturate(1.12) contrast(1.06);
}
@media (prefers-reduced-motion: no-preference) {
    .hero-medium img {
        animation: hero-settle 2s var(--ease-out) both;
    }
}
@keyframes hero-settle {
    from { transform: scale(1.04); filter: brightness(0.56) sepia(0.24) saturate(1.08) contrast(1.06); }
    to   { transform: scale(1);    filter: brightness(0.66) sepia(0.24) saturate(1.12) contrast(1.06); }
}

/* Licht-Inszenierung: konstanter Anthrazit-Schleier + Quelle oben links
   bleibt offen, Ränder sinken ins Dunkel; Top-Scrim für die transparente
   Nav (B&O-Muster) */
.hero-licht {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(oklch(0.19 0.009 var(--hue-d) / 0.16), oklch(0.19 0.009 var(--hue-d) / 0.16)),
        linear-gradient(180deg, oklch(0.17 0.008 var(--hue-d) / 0.5) 0%, transparent 20%),
        linear-gradient(90deg, oklch(0.17 0.008 var(--hue-d) / 0.52) 0%, transparent 48%),
        radial-gradient(130% 100% at 20% 0%, transparent 28%, oklch(0.17 0.008 var(--hue-d) / 0.3) 76%, oklch(0.17 0.008 var(--hue-d) / 0.55) 100%);
}

/* Die EINE aufgelöste Kante der Seite: Hero fadet ins Bone — das Dunkel
   hält lange, der Umschlag kommt spät und warm (kein Grau-Matsch) */
.hero-blende {
    position: absolute;
    inset: auto 0 0 0;
    height: 150px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom,
        transparent 0%,
        oklch(0.962 0.013 82 / 0.08) 42%,
        oklch(0.962 0.013 82 / 0.3) 64%,
        oklch(0.962 0.013 82 / 0.68) 82%,
        oklch(0.962 0.013 82 / 0.94) 94%,
        var(--hell-grund) 100%);
}

/* Fassung „Dunkle Dominanz" (body[data-welt="dunkel"]): die Seite bleibt
   nach dem Hero dunkel — die Blende settelt ins Anthrazit statt ins Bone */
body[data-welt="dunkel"] .hero-blende {
    background: linear-gradient(to bottom,
        transparent 0%,
        oklch(0.21 0.010 var(--hue-d) / 0.18) 45%,
        oklch(0.21 0.010 var(--hue-d) / 0.55) 72%,
        oklch(0.21 0.010 var(--hue-d) / 0.88) 92%,
        var(--dunkel-grund) 100%);
}

.hero-inhalt {
    position: relative;
    z-index: 3;
    padding-bottom: calc(160px + 3.5rem);   /* Text endet ÜBER der Blende */
    padding-top: calc(var(--nav-h) + 3rem);
}
.hero-inhalt h1 {
    font-size: var(--t-5);   /* dezenter als t-6 — der lange Zweiklang trug zu dick auf */
    max-width: 20ch;         /* bricht als „Räume, die passen." / „Möbel, die bleiben." */
}
.hero-zeile {
    margin-top: 1.75rem;
    max-width: 44ch;
    font-size: var(--t-1);
    line-height: 1.45;
    color: var(--tinte-2);
}
.hero .label { color: var(--tinte-3); }
.hero-ctas {
    margin-top: 2.4rem;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
}
.hero-ctas .text-cta { margin-top: 0; }
.hero-ctas .cta-pill { padding: 0.72rem 1.6rem; }

.hero .grain-layer { z-index: 2; }

/* ==========================================================================
   AKT 2 — POSITIONIERUNG (hell): Typo-Atemzug, asymmetrisch gesetzt
   ========================================================================== */

.akt-versatz {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
.akt-versatz > div { grid-column: 5 / -1; }
@media (max-width: 900px) {
    .akt-versatz > div { grid-column: 1 / -1; }
}

.statement {
    font-size: var(--t-3);
    font-weight: var(--w-display);
    line-height: 1.28;
    letter-spacing: var(--track-sub);
    color: var(--tinte-1);
    max-width: 26ch;
    text-wrap: balance;
}

/* iD-Bildmarke als Ghost hinter „Der Betrieb" (bau-38): großes, sehr leises
   Wasserzeichen auf der freien linken Seite (akt-versatz stellt den Text nach
   rechts). Monochrom (currentColor), nicht rot — ein Ghost ist tonal. */
#werkstatt { overflow: hidden; }
#werkstatt > .wrap { position: relative; z-index: 1; }
.betrieb-ghost {
    position: absolute;
    /* HINTER der Schrift (User-Wunsch): der Text sitzt via akt-versatz rechts
       (Spalte 5/-1) — Ghost dort zentriert dahinter, nicht auf der freien
       linken Seite. z-index 0 unter dem Inhalt (>.wrap z-index 1). */
    left: 62%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: min(125%, 32rem);
    width: auto;
    color: var(--tinte-1);
    opacity: 0.045;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 900px) {
    /* Mobile: Text nimmt die volle Breite → Ghost mittig, kleiner, leiser */
    .betrieb-ghost { height: 15rem; left: 50%; opacity: 0.038; }
}
.fakten-zeile {
    margin-top: 2.25rem;
    font-size: var(--t-small);
    letter-spacing: 0.04em;
    color: var(--tinte-3);
}
/* Body-Absatz unterm Statement (Betrieb-Akt, bau-40): trägt die Fakten,
   das Statement bleibt die These */
.betrieb-copy {
    margin-top: 1.75rem;
    margin-bottom: 0;
    max-width: 48ch;
    color: var(--tinte-2);
}

/* ==========================================================================
   AKT 3 — WERKVERZEICHNIS: typografische Liste + sticky Bild-Bühne
   ========================================================================== */

.akt-kopf { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
/* Sub-Zeile unterm Akt-Kopf (bau-40): eine ruhige Kompetenz-Zeile,
   z. B. Planung/Abwicklung unter „Fünf Leistungen" */
.akt-kopf .akt-sub {
    margin-top: 1.1rem;
    margin-bottom: 0;
    max-width: 52ch;
    color: var(--tinte-3);
}

.werk-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}

.werkliste { border-top: 1px solid var(--linie); }
.werk {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: 1.25rem;
    padding-block: 1.7rem;
    border-bottom: 1px solid var(--linie);
}
.werk-nr {
    padding-top: 0.55rem;
    font-size: var(--t-small);
    font-weight: var(--w-label);
    color: var(--akzent-grafik);
}
.werk h3 { transition: opacity var(--dur-base) var(--ease-out); }
.werk .werk-nr, .werk .werk-meta { transition: opacity var(--dur-base) var(--ease-out); }
.werk-meta {
    margin-top: 0.5rem;
    font-size: var(--t-small);
    color: var(--tinte-3);
    max-width: none;
}
/* Dim-Choreographie — auf hell abgeschwächt (0.55), auf dunkel voll (0.45);
   Dim liegt auf Kindern, nie auf .werk selbst (Transition-Shorthand-Falle) */
@media (hover: hover) {
    .werkliste:hover .werk:not(:hover) :is(h3, .werk-meta, .werk-nr) { opacity: 0.55; }
    [data-welt="dunkel"] .werkliste:hover .werk:not(:hover) :is(h3, .werk-meta, .werk-nr) { opacity: 0.45; }
}

.werk-buehne {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
    margin: 0;
}

/* Karriere „Offene Stellen" (bau-38): das Bild soll STEHEN bleiben und die
   zwei Stellen daran vorbeiscrollen. Das 3:4-Bild wäre turmhoch (höher als
   die kurze 2-Stellen-Liste) → Sticky bekäme keinen Weg. Fix: Bild auf eine
   Viewport-Höhe deckeln + Liste luftig setzen, sodass die Liste HÖHER ist
   als das gepinnte Bild = echter Sticky-Scroll. Scope: nur dieser Sektor. */
#stellen .buehne-bild {
    aspect-ratio: auto;
    height: min(60vh, 460px);
}
#stellen .werk {
    min-height: 320px;      /* fix statt vh: auf hohen Schirmen nicht leer */
    align-content: center;
}
#stellen .werkliste { border-top: 0; }
@media (max-width: 980px) {
    /* Mobile: kein Sticky, Bild aus (bestehende Regel) — Höhen-Hacks zurück */
    #stellen .werk { min-height: 0; }
    #stellen .buehne-bild { height: auto; aspect-ratio: 3 / 4; }
}
.buehne-bild {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--grund-tint);
    box-shadow: var(--depth-rest);
}
/* Dunkle Welt: Schatten tragen nicht — Kante über Haarlinie, Bild sinkt ein */
[data-welt="dunkel"] .buehne-bild {
    box-shadow: none;
    border: 1px solid var(--linie-soft);
}
[data-welt="dunkel"] .buehne-bild img {
    filter: brightness(0.88) saturate(0.95);
}
.buehne-bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Grading-Feinsitz der hellen Welt: leicht zurückgenommen, wacht bei
       Interaktion nicht auf (Bühne ist Ausstellung, kein Hover-Ziel) */
    filter: brightness(0.96) saturate(0.96);
    transition: opacity 0.5s var(--ease-out);
}
.buehne-b { opacity: 0; }
.werk-buehne figcaption {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--linie);
    font-size: var(--t-small);
    color: var(--tinte-3);
}

@media (max-width: 980px) {
    .werk-layout { grid-template-columns: 1fr; }
    .werk-buehne { display: none; }
}

/* ==========================================================================
   AKT 4 — LEISTUNGEN: offenes Typo-Band (keine Boxen, keine Icons)
   ========================================================================== */

.leistungs-band {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--linie);
}
/* Kind-Kombinator PFLICHT: die Regeln gelten den vier SPALTEN — ohne >
   treffen sie auch die verschachtelten .beweise-Zeilen (Einrück-Kasten-Bug) */
.leistungs-band > li {
    padding: 2rem 1.75rem 0.5rem 0;
}
.leistungs-band > li + li {
    border-left: 1px solid var(--linie);
    padding-left: 1.75rem;
}
.anker-wort {
    display: block;
    font-size: clamp(1.5rem, 2.3vw, 2.1rem);
    font-weight: var(--w-display);
    letter-spacing: var(--track-sub);
    /* Lesbarer Ghost: Präsenz über Größe, Eleganz über Ton */
    color: color-mix(in oklch, var(--akzent-grafik) 62%, var(--grund));
    margin-bottom: 0.9rem;
    white-space: nowrap;
}
/* Dunkle Welt: hue-frei mischen (OKLCH-Kurzbogen H58→H245 = Magenta-Falle) */
[data-welt="dunkel"] .anker-wort {
    color: color-mix(in oklab, var(--akzent-grafik) 62%, var(--grund));
}
.leistungs-band p {
    font-size: var(--t-small);
    line-height: 1.55;
    color: var(--tinte-3);
}

/* Hover-Tiefe: die gehoverte Leistung fährt aus und erklärt mehr —
   Collapsible-Standard (Padding auf Inner, max-height eng gedeckelt).
   Kein Hover-Gerät: Zusatztexte stehen offen. */
.leistung-mehr {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.55s var(--ease-out),
                opacity 0.4s var(--ease-out);
}
.leistung-mehr-inner { padding-block: 0.9rem 0.6rem; }
/* Beweis-Zeilen (Recherche): keyword-first Stichzeilen statt Absatz —
   Bauteil-Nomen vorn und HELLER als der Teaser (Kontrast-Umkehr zieht ins
   Lesen), Haarlinien statt Bullets, Cognac-Linie zeichnet sich als Auftakt */
.leistung-mehr-inner::before {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: var(--akzent-grafik);
    margin-bottom: 0.7rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease-out);
}
.beweise li {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--tinte-2);
    padding-block: 0.45em;
    opacity: 0;
    /* Zwei-Phasen-Reveal mit fester TOP-DOWN-Kaskade: die obere Zeile
       erscheint garantiert zuerst (deterministisch, nicht dem Zufall von
       Transition-Restarts überlassen) */
    transition: opacity 0.35s var(--ease-out) 0.05s;
}
.beweise li:nth-child(2) { transition-delay: 0.11s; }
.beweise li:nth-child(3) { transition-delay: 0.17s; }
.beweise li + li { border-top: 1px solid var(--linie); }
.beweise b {
    font-weight: var(--w-strong);
    color: var(--tinte-1);
}
@media (hover: hover) {
    /* State-getrieben (JS setzt .offen/.hat-offen): sobald IRGENDEINE
       Leistung offen ist, reservieren ALLE Spalten die gemessene Maximal-
       höhe (--mehr-h, JS misst scrollHeight — nie abgeschnitten). Der
       Wechsel zwischen Leistungen ist dadurch ein reines Überblenden der
       Zeilen, die Reihenhöhe rührt sich nicht. */
    .leistungs-band.hat-offen .leistung-mehr {
        max-height: var(--mehr-h, 20rem);
        opacity: 1;
    }
    .leistungs-band li.offen .leistung-mehr-inner::before { transform: scaleX(1); }
    .leistungs-band li.offen .beweise li { opacity: 1; }
    /* Die ganze Spalte hebt als EIN Zustand: Ghost satter, Basissatz heller */
    .leistungs-band li.offen .anker-wort {
        color: color-mix(in oklab, var(--akzent-grafik) 78%, var(--grund));
    }
    .leistungs-band li.offen > p { color: var(--tinte-2); }
    /* Dim auf Kinder, nie aufs li (trägt .rv — Shorthand-Falle) */
    .leistungs-band .anker-wort,
    .leistungs-band li > p {
        transition: opacity var(--dur-base) var(--ease-out),
                    color var(--dur-base) var(--ease-out);
    }
    .leistungs-band.hat-offen li:not(.offen) :is(.anker-wort, p) { opacity: 0.45; }
}
@media (hover: none) {
    .leistung-mehr { max-height: none; opacity: 1; }
    .leistung-mehr-inner::before { transform: scaleX(1); }
    .beweise li { opacity: 1; }
}

/* Fünf schmale Spalten brauchen ≥1280px, damit die längste Corian-Zeile noch
   zweizeilig bleibt (Referenz-Rhythmus). Darunter erst drei, dann zwei Spalten
   — breiter, garantiert sauber, statt gequetschter Fünferreihe. */
@media (min-width: 981px) and (max-width: 1279px) {
    .leistungs-band { grid-template-columns: repeat(3, 1fr); }
    .leistungs-band > li:nth-child(3n+1) { border-left: 0; padding-left: 0; }
    .leistungs-band > li:nth-child(n+4) { border-top: 1px solid var(--linie); }
}
@media (max-width: 980px) {
    .leistungs-band { grid-template-columns: 1fr 1fr; }
    .leistungs-band > li:nth-child(odd) { border-left: 0; padding-left: 0; }
    .leistungs-band > li:nth-child(n+3) { border-top: 1px solid var(--linie); }
}
@media (max-width: 560px) {
    .leistungs-band { grid-template-columns: 1fr; }
    .leistungs-band > li { border-left: 0 !important; padding-left: 0 !important; }
    .leistungs-band > li + li { border-top: 1px solid var(--linie); }
}

/* ==========================================================================
   SEKTOR — SCHANIGARTEN ALLGÄU: Split mit Referenz-Bild
   ========================================================================== */

.akt-tint { background: var(--grund-tint); }

.split-akt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}
.split-bild {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    box-shadow: var(--depth-rest);
}
.split-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.97) saturate(0.97);
}
/* Dunkle Welt (Material-Akt, Fassung „Dunkle Dominanz"): Tiefe über Licht,
   Bild sinkt in den Raum ein statt auf ihm zu schweben */
[data-welt="dunkel"] .split-bild {
    box-shadow: none;
    border: 1px solid var(--linie-soft);
}
[data-welt="dunkel"] .split-bild img {
    filter: brightness(0.88) saturate(0.95);
}
.split-copy {
    margin-top: 1.75rem;
    max-width: 44ch;
}
.split-text .fakten-zeile { margin-top: 1.5rem; }

/* Text-CTA: Zeile mit Dissolve-Underline — Ruhe = unterstrichen,
   Hover löst den Strich (Mobile behält ihn als Klick-Hinweis) */
.text-cta {
    display: inline-block;
    margin-top: 2.25rem;
    font-size: 0.95rem;
    font-weight: var(--w-label);
    letter-spacing: 0.03em;
    color: var(--tinte-1);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.2rem;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
    .text-cta:hover {
        color: var(--akzent);
        border-bottom-color: transparent;
    }
}

@media (max-width: 900px) {
    .split-akt { grid-template-columns: 1fr; }
    .split-bild { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   AKT 5 — MATERIAL (dunkel): Bild links, Text rechts (DOM-Reihenfolge —
   Rhythmuswechsel zum Schani-Sektor, dessen Media rechts sitzt).
   Bild-Behandlung der dunklen Welt: [data-welt="dunkel"] .split-bild.
   ========================================================================== */

/* ==========================================================================
   INSTAGRAM-LINK MIT FEED-PREVIEW — Hover zeigt eine Surface-Karte mit
   sechs Feed-Kacheln (Alte-Seite-Feature, übersetzt: Haarlinie statt Glass).
   Touch-Geräte: Link funktioniert, Preview entfällt.
   ========================================================================== */

.cta-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 2rem;
}
.ig-wrap { position: relative; display: inline-flex; }
.ig-cta svg { margin-right: 0.5rem; vertical-align: -2px; }
.ig-preview {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.9rem);
    z-index: 5;
    width: 300px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    background: color-mix(in oklab, var(--tinte-1) 5%, var(--flaeche));
    border: 1px solid var(--linie-stark);
    border-radius: 14px;             /* Karten-Zone der Drei-Zonen-Regel */
    box-shadow: var(--depth-rest);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility 0s linear var(--dur-base);
}
.ig-wrap:hover .ig-preview,
.ig-wrap:focus-within .ig-preview {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}
.ig-preview-kopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--t-meta);
    color: var(--tinte-3);
    line-height: 1.35;
}
.ig-preview-kopf strong {
    display: block;
    color: var(--tinte-1);
    font-weight: var(--w-strong);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}
.ig-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.ig-preview-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
}
.ig-preview-fuss {
    font-size: var(--t-meta);
    color: var(--tinte-3);
}
@media (hover: none) {
    .ig-preview { display: none; }
}

/* ==========================================================================
   AKT 6 — KONTAKT: das hellste Blatt der Seite (Briefbogen)
   ========================================================================== */

.kontakt-kopf { text-align: center; }
.kontakt-kopf .label { justify-content: center; }
.kontakt-subline {
    margin: 1.25rem auto 0;
    color: var(--tinte-3);
}

.ob-blatt {
    position: relative;
    background: var(--flaeche);
    border-radius: 18px;           /* Surface-Card-Zone der Drei-Zonen-Regel */
    box-shadow: var(--depth-rest);
    padding: clamp(1.75rem, 4vw, 3.25rem);
    /* Briefbogen-Proportion statt Full-Wrap: das Blatt ist ein Dokument,
       keine Sektion (User-Entscheid bau-32: kompakter + dunkel) */
    max-width: 720px;
    margin-inline: auto;
    overflow: clip;
}
/* Blatt auf dunkler Bühne (seit bau-32 selbst dunkel — erhabene Fläche
   statt weißem Papier): Kante über Haarlinie, tiefer weicher Fall
   verankert die Karte im Raum */
.akt[data-welt="dunkel"] .ob-blatt {
    border: 1px solid var(--linie-soft);
    box-shadow: 0 30px 80px -20px oklch(0.1 0.008 var(--hue-d) / 0.55);
}
/* Briefbogen-Strich oben links */
.ob-blatt::after {
    content: '';
    position: absolute;
    top: 0; left: clamp(1.75rem, 4vw, 3.25rem);
    width: 56px; height: 3px;
    background: var(--cognac-dunkelgrund);
}

.ob-progress {
    display: flex;
    gap: 0.6rem;
    font-size: var(--t-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinte-3);
    margin-bottom: 2rem;
}
.ob-progress-step { padding-bottom: 0.3rem; border-bottom: 1px solid transparent; }
.ob-progress-step.aktiv {
    color: var(--tinte-1);
    border-bottom-color: var(--akzent-grafik);
}
.ob-progress-step.fertig { color: var(--akzent); }

/* NEBEL-CROSS-DISSOLVE (bau-37, exakt von zimmerhackl.pages.dev portiert):
   Der alte Step overlayt absolut und löst sich in Nebel auf (Blur + Fade),
   der neue materialisiert daraus; die Container-Höhe gleitet parallel
   oldH→newH — alles über dieselbe Dauer/Kurve. KEIN translateY (würde im
   overflow:hidden an der Clip-Linie abschneiden), kein Zoom, kein Scroll. */
.ob-steps {
    position: relative;
    overflow: hidden;
    transition: height 0.46s cubic-bezier(0.4, 0, 0.2, 1);
}
.ob-step {
    border: 0; padding: 0; margin: 0;
    display: none;
    opacity: 0;
    filter: blur(5px);
    transition: opacity 0.46s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.46s cubic-bezier(0.4, 0, 0.2, 1);
}
.ob-step.is-active { display: block; }
.ob-step.is-visible { opacity: 1; filter: blur(0); }
.ob-step.is-leaving {
    position: absolute;
    top: 0; left: 0; right: 0;
    opacity: 0;
    filter: blur(5px);
    pointer-events: none;
    transition: opacity 0.46s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.46s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
    .ob-steps { transition: none; }
    .ob-step, .ob-step.is-leaving { transition: none; filter: none; }
}
.ob-step[hidden] { display: none !important; }
.ob-frage {
    font-size: var(--t-1);
    font-weight: var(--w-display);
    color: var(--tinte-1);
    padding: 0;
    margin-bottom: 1.5rem;
}
.ob-frage-hint {
    display: inline-block;
    margin-left: 0.6rem;
    font-size: var(--t-meta);
    font-weight: var(--w-label);
    letter-spacing: 0.04em;
    color: var(--tinte-3);
}
.ob-weiter { margin-top: 1.75rem; }

.ob-chips { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.ob-chip {
    padding: 0.65rem 1.3rem;
    border-radius: var(--r-media);
    border: 1px solid var(--linie-stark);
    font-size: 0.95rem;
    font-weight: var(--w-label);
    color: var(--tinte-2);
    background: transparent;
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}
.ob-chip:hover { border-color: var(--akzent-grafik); color: var(--tinte-1); }
.ob-chip.aktiv {
    border-color: var(--akzent-grafik);
    background: color-mix(in oklch, var(--cognac-grafik) 12%, var(--flaeche));
    color: var(--tinte-1);
}

.ob-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}
.ob-tile {
    text-align: left;
    padding: clamp(1.1rem, 2vw, 1.5rem);
    border: 1px solid var(--linie-stark);
    border-radius: var(--r-media);
    background: transparent;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.ob-tile:hover { border-color: var(--akzent-grafik); box-shadow: var(--depth-rest); }
.ob-tile.aktiv {
    border-color: var(--akzent-grafik);
    background: color-mix(in oklch, var(--cognac-grafik) 10%, var(--flaeche));
}
.ob-tile-titel {
    display: block;
    font-size: var(--t-1);
    font-weight: var(--w-display);
    color: var(--tinte-1);
}
.ob-tile-desc {
    display: block;
    margin-top: 0.3rem;
    font-size: var(--t-small);
    color: var(--tinte-3);
}
@media (max-width: 560px) {
    .ob-tiles { grid-template-columns: 1fr; }
}

/* Underline-Inputs mit Floating Label + Line-Draw */
.ob-felder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 2.5rem;
}
.ob-feld { position: relative; display: block; }
.ob-feld-breit { grid-column: 1 / -1; }
.ob-feld input,
.ob-feld textarea {
    display: block;   /* Inline-Baseline-Gap killen — sonst hängt die ::after-Linie unter der Feldlinie */
    width: 100%;
    padding: 0.55rem 0;
    font: inherit;
    color: var(--tinte-1);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--linie-stark);
    border-radius: 0;
    resize: vertical;
}
.ob-feld input:focus-visible,
.ob-feld textarea:focus-visible { outline: none; }
.ob-feld::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--akzent-grafik);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease-out);
}
.ob-feld:focus-within::after { transform: scaleX(1); }
.ob-feld-label {
    position: absolute;
    left: 0; top: 0.55rem;
    color: var(--tinte-3);
    pointer-events: none;
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}
.ob-feld:focus-within .ob-feld-label,
.ob-feld:has(input:not(:placeholder-shown)) .ob-feld-label,
.ob-feld:has(textarea:not(:placeholder-shown)) .ob-feld-label {
    transform: translateY(-1.4em) scale(0.76);
    color: var(--akzent);
}
.ob-feld.fehlt input,
.ob-feld.fehlt textarea { border-bottom-color: oklch(0.55 0.19 29); }

/* Autofill-Override (Pflicht — sonst gelber UA-Hintergrund im Briefbogen) */
.ob-feld input:-webkit-autofill,
.ob-feld input:-webkit-autofill:hover,
.ob-feld input:-webkit-autofill:focus,
.ob-feld input:-webkit-autofill:active,
.ob-feld textarea:-webkit-autofill,
.ob-feld textarea:-webkit-autofill:hover,
.ob-feld textarea:-webkit-autofill:focus,
.ob-feld textarea:-webkit-autofill:active {
    /* Token-basiert statt fixem Papier-Ton: folgt der Welt des Blatts
       (seit bau-32 dunkel — fixe Hell-Werte würden gelb aufblitzen) */
    -webkit-box-shadow: 0 0 0 1000px var(--flaeche) inset !important;
    -webkit-text-fill-color: var(--tinte-1) !important;
    caret-color: var(--tinte-1);
    transition: background-color 5000s ease-in-out 0s;
}

.ob-trust {
    margin-top: 1.75rem;
    font-size: var(--t-small);
    color: var(--tinte-3);
}
/* Kontext-Hint im Branch-Pfad (Einzelmöbel): sichtbare Zeile, kein Placeholder */
.ob-einzel-hint {
    margin: -0.5rem 0 1.5rem;
    font-size: var(--t-small);
    color: var(--akzent);
}
.ob-senden {
    margin-top: 1.25rem;
    font-size: 1rem;
}
.ob-zurueck {
    margin-top: 1.5rem;
    font-size: var(--t-small);
    color: var(--tinte-3);
    transition: color var(--dur-fast) var(--ease-out);
}
.ob-zurueck:hover { color: var(--tinte-1); }

.ob-honig {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
}

.ob-erfolg { padding-block: 1.5rem; }
.ob-erfolg-titel {
    font-size: var(--t-1);
    font-weight: var(--w-display);
    color: var(--tinte-1);
    margin-bottom: 0.5rem;
}

.ob-blatt.schuettelt { animation: ob-schuetteln 0.4s var(--ease-out); }
@keyframes ob-schuetteln {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-7px); }
    55% { transform: translateX(6px); }
    80% { transform: translateX(-3px); }
}

.kontakt-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    margin-top: 1.5rem;
    /* matcht die Blatt-Breite (Briefbogen-Formel: Cards unterm Blatt) */
    max-width: 720px;
    margin-inline: auto;
}
.kontakt-cards li {
    background: var(--flaeche);
    border-radius: 14px;
    box-shadow: var(--depth-rest);
    padding: 1.15rem 1.4rem;
    font-size: var(--t-small);
}
.kontakt-card-label {
    display: block;
    font-size: var(--t-meta);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--tinte-3);
    margin-bottom: 0.35rem;
}
.kontakt-cards a { text-decoration: none; color: var(--tinte-1); }
.kontakt-cards a:hover { color: var(--akzent); }
@media (max-width: 720px) {
    .kontakt-cards { grid-template-columns: 1fr; }
    .ob-felder { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ==========================================================================
   AKT 7 — FOOTER: der Boden. bg-tief, kein Radial-Licht, Grain bleibt.
   ========================================================================== */

.fuss {
    position: relative;
    background: var(--dunkel-tief);
    color: var(--tinte-2);
    border-top: 1px solid color-mix(in oklch, var(--dunkel-text-2) 14%, transparent);
    padding-block: clamp(4rem, 8vw, 7rem) 2rem;
}
.fuss-zonen {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
}
.fuss-label {
    font-size: var(--t-meta);
    font-weight: var(--w-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    /* 62% statt 55%: 4.80:1 auf dunkel-tief (55% lag bei 3.93:1 — WCAG-Fail
       für Kleinsttext), identisch zum Ton der fuss-legal */
    color: color-mix(in oklch, var(--tinte-2) 62%, var(--dunkel-tief));
    margin-bottom: 1.1rem;
}
.fuss p, .fuss li { font-size: var(--t-small); line-height: 1.9; }
.fuss a {
    color: var(--tinte-2);
    text-decoration: none;
}
.fuss a:hover { color: var(--akzent); }

.fuss .fuss-marke {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
    margin-bottom: 0;
    font-size: clamp(3.5rem, 21vw, 20rem);
    font-weight: var(--w-display);
    letter-spacing: -0.02em;
    /* eng + overflow:hidden killt den Cap-Height-Leerraum-Schwanz unten
       (0.85 ohne clip ließ ~275px Loch stehen) — der Footer endet dadurch
       sauber direkt unter der Wordmark. Farbe bleibt WEISS (User-Wunsch). */
    line-height: 0.82;
    color: var(--tinte-1);
    white-space: nowrap;
    text-align: center;
    max-width: none;
    overflow: hidden;
}
.fuss .fuss-legal {
    margin-top: 1.6rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in oklch, var(--tinte-2) 10%, transparent);
    font-size: 0.75rem;   /* nie kleiner — §5 DDG */
    color: color-mix(in oklch, var(--tinte-2) 62%, var(--dunkel-tief));
    max-width: none;
}
@media (max-width: 820px) {
    .fuss-zonen { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ==========================================================================
   SCHANIGARTEN-SUBPAGE
   ========================================================================== */

/* Zahlen-Band: Leistungs-Band-Anatomie mit 3 Spalten.
   Kind-Kombinator PFLICHT (bau-23): das Band kann verschachtelte .beweise-
   Listen tragen (Karriere-Hover) — ohne > treffen die Spalten-Regeln deren li */
.zahlen-band { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
    .zahlen-band { grid-template-columns: 1fr; }
    .zahlen-band > li { border-left: 0 !important; padding-left: 0 !important; }
    .zahlen-band > li + li { border-top: 1px solid var(--linie); }
}
.fussnote {
    margin-top: 2rem;
    font-size: var(--t-meta);
    color: var(--tinte-3);
    max-width: 72ch;
}

/* Prozess 4+1: nummerierte Typo-Liste (echte Sequenz) */
.prozess-liste {
    counter-reset: none;
    border-top: 1px solid var(--linie);
}
.prozess-liste li {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: 1.25rem;
    padding-block: 1.7rem;
    border-bottom: 1px solid var(--linie);
}
.prozess-nr {
    padding-top: 0.35rem;
    font-size: var(--t-small);
    font-weight: var(--w-label);
    color: var(--akzent-grafik);
}
.prozess-liste h3 { font-size: var(--t-1); }
.prozess-liste p {
    margin-top: 0.45rem;
    font-size: var(--t-small);
    color: var(--tinte-3);
}
/* 5. Schritt = Nachsatz nach der Saison: keine Fläche (Box wirkt billig),
   stattdessen markiert eine Cognac-Haarlinie die Saison-Grenze — Definition
   an der Kante, Typo bleibt identisch zu 01–04. */
.prozess-liste li:has(+ .prozess-plus) { border-bottom: 0; }
.prozess-liste li.prozess-plus {
    border-top: 1px solid color-mix(in oklch, var(--akzent-grafik) 45%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--akzent-grafik) 45%, transparent);
    padding-top: 2.1rem;
}

/* Referenz-Grid: zwei Werke mit Werkangaben.
   Nach dem Case-Split braucht das Grid eigenen Abstand — sonst kleben
   Case-Video und Grid-Medien direkt aneinander (User-Report bau-36) */
.referenz-case + .ref-grid { margin-top: clamp(3rem, 7vw, 5.5rem); }
.ref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
.ref-grid figure { margin: 0; }
/* Schatten/Border auf dem Zoom-Rahmen, nicht auf dem skalierenden Bild */
.ref-grid .zoomrahmen { box-shadow: var(--depth-rest); }
.ref-grid img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    filter: brightness(0.97) saturate(0.97);
}
/* Dunkle Welt: gleiche Bild-Behandlung wie split/buehne/galerie */
[data-welt="dunkel"] .ref-grid .zoomrahmen {
    box-shadow: none;
    border: 1px solid var(--linie-soft);
}
[data-welt="dunkel"] .ref-grid img {
    filter: brightness(0.88) saturate(0.95);
}
.ref-grid figcaption {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--linie);
    font-size: var(--t-small);
    color: var(--tinte-3);
}
@media (max-width: 720px) {
    .ref-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   REELS — Bewegtbild aus Werkstatt und Straße als stumme Ambient-Loops:
   Poster (webp, Canvas-Pipeline) + preload="none" halten den First-Paint
   leicht; das JS startet muted Loops nur im Viewport und pausiert beim
   Rausscrollen. Reduced-Motion/Save-Data: Poster bleiben stehen.
   ========================================================================== */

.reel { margin: 0; }
.reel-rahmen {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: var(--grund-tint);
    box-shadow: var(--depth-rest);
}
[data-welt="dunkel"] .reel-rahmen {
    box-shadow: none;
    border: 1px solid var(--linie-soft);
}
.reel-rahmen video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ambient-Loops bleiben im Grading ihrer Welt eingebettet — sie sind
       Materialität, kein Spotlight */
    filter: brightness(0.97) saturate(0.97);
}
[data-welt="dunkel"] .reel-rahmen video {
    filter: brightness(0.88) saturate(0.95);
}
.reel figcaption {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--linie);
    font-size: var(--t-small);
    color: var(--tinte-3);
}

/* Kontext-Maße (aus der alten Seite übernommen) */
.referenz-case .media-buehne { width: min(100%, 500px); }
.referenz-case .media-buehne .reel-rahmen { aspect-ratio: 3 / 4; }
/* Karriere-Hero-Reel: volle Spaltenbreite wie das Karriere-Split-Bild
   auf dem Index (User-Entscheid bau-36, vorher 400px-Deckel) */
#karriere .media-buehne { width: 100%; }
/* Index-Schani-Reel: Crop schneidet Fremd-Banner + Himmel oben weg */
#schanigarten .media-buehne video { object-position: center 62%; }
/* Galerie- und Ablauf-Videos croppen aufs Foto-Format der Reihe */
.galerie-grid .reel-rahmen { aspect-ratio: 4 / 5; }
.timing-layout .reel-rahmen { aspect-ratio: 4 / 5; }

/* 4:5-Variante des Reel-Rahmens — für Video in Foto-Reihen (cover-Crop) */
.reel-rahmen--p45 { aspect-ratio: 4 / 5; }

/* ── Media-Bühne: Video als erzählter Moment — Tag (Projekt · Ort) auf der
      Fläche, optional ein Foto-INSET des Ergebnisses, Caption darunter.
      Übersetzung des alten schani-media-Patterns in die neue Sprache:
      harte Kanten, Haarlinien, kein Glass. ─────────────────────────────── */
.media-buehne {
    position: relative;
    margin: 0;
}
/* Maße der alten Seite (User-validiert): Video croppt auf 4:5 — breit und
   präsent, nie turmhoch. Bühne dockt an die Außenkante der Media-Spalte. */
.media-buehne .reel-rahmen {
    max-width: 100%;
    aspect-ratio: 4 / 5;
}
.split-akt .media-buehne {
    width: min(100%, 520px);
    justify-self: end;
}
.media-tag {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2;
    padding: 0.3rem 0.7rem;
    font-size: var(--t-meta);
    font-weight: var(--w-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: oklch(0.93 0.005 var(--hue-d));
    background: oklch(0.17 0.008 var(--hue-d) / 0.6);
}
/* Inset unten LINKS (Alte-Seite-Rezept): klein (34%, max 172px), ragt nur
   ~18px über die Kante, Passepartout in Seitenfarbe trennt es vom Video.
   Die Caption steht rechtsbündig — Inset und Text kollidieren nie. */
.media-inset {
    position: absolute;
    left: -1.15rem;
    bottom: -1.35rem;
    z-index: 3;
    width: clamp(118px, 34%, 172px);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin: 0;
    border: 6px solid var(--grund);
    background: var(--grund);
}
.media-inset img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.media-buehne .media-cap {
    margin: 0.9rem 0 0;
    padding-top: 0;
    border-top: 0;   /* leise Zeile ohne Haarlinie (Alte-Seite-Rezept) */
    text-align: right;
    font-size: var(--t-meta);
    letter-spacing: 0.04em;
    color: var(--tinte-3);
    max-width: none;
    text-wrap: balance;
}
/* Inset hängt 1.35rem unter den Rahmen — die Caption weicht links aus,
   sonst überdeckt das Inset den Zeilenanfang (User-Report bau-36) */
.media-buehne:has(.media-inset) .media-cap {
    padding-left: calc(clamp(118px, 34%, 172px) + 1.25rem);
}
/* Mobile: Inset tuckt sich statisch überlappend unter die rechte Video-
   Kante (Alte-Seite-Rezept) — kein absolutes Overlay mehr */
@media (max-width: 767px) {
    .media-buehne:has(.media-inset) .media-cap { padding-left: 0; }
    .media-inset {
        position: relative;
        left: auto;
        bottom: auto;
        width: 56%;
        margin: -2.2rem 0 0 auto;
        border-width: 5px;
    }
    .media-cap { text-align: left; }
}

/* Ablauf-Split (Schani-Sub): Prozess-Liste + sticky Video-Bühne */
.ablauf-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.65fr;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}
.ablauf-buehne {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
    margin: 0;
    justify-self: end;
    width: min(100%, 400px);
}
.ablauf-buehne .reel-rahmen { aspect-ratio: 4 / 5; }
@media (max-width: 980px) {
    .ablauf-layout { grid-template-columns: 1fr; }
    .ablauf-buehne {
        position: static;
        justify-self: start;
        width: min(100%, 300px);
        margin-top: 1rem;
    }
}

/* Timing-Split (Schani-Sub): Statement + kleines Saisonende-Reel */
.timing-layout {
    display: grid;
    /* Video präsenter + näher am Text (User-Entscheid bau-36, vorher 260px/6rem) */
    grid-template-columns: 1fr minmax(300px, 420px);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}
@media (max-width: 900px) {
    .timing-layout { grid-template-columns: 1fr; }
    .timing-layout .reel { width: min(100%, 320px); }
}

/* ==========================================================================
   WERKVERZEICHNIS-SEITE (projekte.html)
   ========================================================================== */

.seiten-hero h1 { font-size: clamp(2.375rem, 1.7rem + 3vw, 4.25rem); max-width: 18ch; }   /* 38→68, zwischen t-4 und t-5 */
.seiten-hero .hero-zeile {
    margin-top: 1.5rem;
    max-width: 48ch;
    font-size: var(--t-1);
    line-height: 1.45;
}

/* ── Werk-Filter: typografische Controls (Recherche: 10/10 Premium-Sites
      nutzen Text statt Pills), Single-Select, Counts aus dem DOM. Sticky
      unter der geschrumpften Nav (60px), solider Grund + Haarlinie. ────── */
.werk-filter {
    position: sticky;
    top: 60px;   /* Höhe der gescrollten Nav — sticky greift erst nach Scroll */
    z-index: 90;
    background: color-mix(in oklch, var(--grund) 97%, transparent);
    border-bottom: 1px solid var(--linie-soft);
}
.werk-filter-zeile {
    display: flex;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 0.9rem;
}
.werk-filter-zeile::-webkit-scrollbar { display: none; }
.wf {
    position: relative;
    flex: none;
    padding-block: 0.35rem;
    font-size: 0.95rem;
    font-weight: var(--w-label);
    letter-spacing: 0.02em;
    color: var(--tinte-3);
    transition: color var(--dur-fast) var(--ease-out);
}
.wf::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease-out);
}
.wf:hover { color: var(--tinte-1); }
.wf:hover::after { transform: scaleX(1); }
.wf[aria-pressed="true"] {
    color: var(--akzent);
}
.wf[aria-pressed="true"]::after {
    transform: scaleX(1);
    background: var(--akzent-grafik);
}
.wf-count {
    font-size: 0.78em;
    color: var(--tinte-3);
    vertical-align: 0.08em;
}

/* Gefiltert = flaches Grid: Akt-Köpfe weg, Tönung neutral, Padding kompakt */
main.gefiltert .akt-kopf { display: none; }
main.gefiltert .akt-tint { background: var(--grund); }
main.gefiltert #moebel,
main.gefiltert #innenausbau,
main.gefiltert #bad { padding-block: clamp(1.5rem, 3vh, 2.5rem); }
main.gefiltert #moebel { padding-top: clamp(3rem, 6vh, 4rem); }

/* Intra-Doc-VT (Filter): ruhiger FADE-THROUGH über den Root — bewusst kein
   Element-Morph (aus gescrolltem Zustand fliegen Kacheln quer durch den
   Viewport). Sequentiell statt Crossfade (Material-Ratio 90/210ms): erst
   ganz raus, dann mit kurzem Delay rein — der Scroll-Anker springt im
   dunklen Moment dazwischen. */
html.intra-vt::view-transition-old(root) { animation: vt-raus 0.14s var(--ease-in) both; }
html.intra-vt::view-transition-new(root) {
    animation: vt-rein 0.26s var(--ease-out) both;
    animation-delay: 0.10s;
}
/* Nav + Filterleiste als eigene, unbewegte Anker-Snapshots — sie faden
   nicht mit dem Root mit (Chrome-Fixed-Header-Rezept) */
.nav { view-transition-name: hauptnav; }
.werk-filter { view-transition-name: werkfilter; }
/* Scroll-Anchoring darf zwischen DOM-Update und Snapshot nicht dazwischenfunken */
main { overflow-anchor: none; }

/* Galerie im natürlichen Format — keine Crops: die Fotos sind Belege,
   unterschiedliche Höhen sind editorialer Rhythmus, kein Fehler */
.galerie-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
.galerie-grid figure { margin: 0; }
/* Schatten/Border auf dem Zoom-Rahmen, nicht auf dem skalierenden Bild */
.galerie-grid .zoomrahmen { box-shadow: var(--depth-rest); }
.galerie-grid img {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(0.97) saturate(0.97);
}
[data-welt="dunkel"] .galerie-grid .zoomrahmen {
    box-shadow: none;
    border: 1px solid var(--linie-soft);
}
[data-welt="dunkel"] .galerie-grid img {
    filter: brightness(0.88) saturate(0.95);
}
.galerie-grid figcaption {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--linie);
    font-size: var(--t-small);
    color: var(--tinte-3);
}
@media (max-width: 720px) {
    .galerie-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SEITEN OHNE HERO + LEGAL/PROSA
   ========================================================================== */

main > .akt:first-child:not(.hero) {
    padding-top: calc(var(--nav-h) + clamp(4rem, 10vh, 7rem));
}
.legal-titel { font-size: var(--t-4); }
.prosa { margin-top: 2.5rem; }
.prosa h2 {
    font-size: var(--t-1);
    margin-top: 2.25rem;
    margin-bottom: 0.6rem;
}
.prosa p { color: var(--tinte-2); }
.stellen-liste h3 { color: var(--tinte-1); }

/* ==========================================================================
   VIEW TRANSITIONS — Crossfade durch die dunkle Welt (kein Slide)
   ========================================================================== */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) { animation: vt-raus 0.22s var(--ease-in) both; }
    ::view-transition-new(root) { animation: vt-rein 0.34s var(--ease-scene) both; }
}
@keyframes vt-raus { to { opacity: 0; } }
@keyframes vt-rein { from { opacity: 0; } }

/* Fallback, wenn der Browser die VT skipped */
html.page-enter body { animation: vt-rein 0.34s var(--ease-scene) both; }

/* ==========================================================================
   SCROLL-REVEALS — Materialisierung statt Flug: Elemente schärfen aus dem
   Grund (Blur + minimaler Hub). Opacity läuft ~15% kürzer als Transform.
   ========================================================================== */

.rv {
    opacity: 0;
    transform: translateY(var(--reveal-y));
    filter: blur(6px);
}
.rv-in {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition: opacity calc(var(--dur-reveal) * 0.85) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out),
                filter var(--dur-reveal) var(--ease-out);
}
.rv-fertig { filter: none !important; }   /* GPU-Layer-Hygiene nach Ende */

/* Hero-Entrance: Label → Statement → Zeile, einmalig beim Laden */
@media (prefers-reduced-motion: no-preference) {
    .hero-inhalt > * {
        opacity: 0;
        animation: hero-text-rein 0.9s var(--ease-out) both;
    }
    .hero-inhalt > *:nth-child(1) { animation-delay: 0.15s; }
    .hero-inhalt > *:nth-child(2) { animation-delay: 0.28s; }
    .hero-inhalt > *:nth-child(3) { animation-delay: 0.42s; }
    .hero-inhalt > *:nth-child(4) { animation-delay: 0.56s; }
}
@keyframes hero-text-rein {
    from { opacity: 0; transform: translateY(14px); filter: blur(5px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Schani-Hero: Straßenszene liegt ruhiger, Bild etwas präsenter */
.schani-hero .hero-medium img {
    object-position: 50% 62%;
    filter: brightness(0.6) sepia(0.14) saturate(1.05) contrast(1.05);
}