/* ==========================================================================
   ZIMMERHACKL — Gestaltung & Handwerk
   Skandinavisch Premium · Hellraum · Bodoni Moda + Inter
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1. FONTS — SaveurSansLight (Brand-Display) + Inter (Body)
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'SaveurSansLight';
    src: url('fonts/SaveurSansLight.woff2') format('woff2'),
         url('fonts/SaveurSansLight.woff') format('woff');
    font-weight: 100 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MyriadProRegular';
    src: url('fonts/MyriadProRegular.woff2') format('woff2'),
         url('fonts/MyriadProRegular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200..700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────
   2. CUSTOM PROPERTIES — animatable
   ───────────────────────────────────────────────────────────────────────── */

@property --ghost-progress {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
}
@property --hero-light {
    syntax: '<percentage>';
    initial-value: 8%;
    inherits: true;
}
@property --vignette {
    syntax: '<percentage>';
    initial-value: 4%;
    inherits: true;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────── */

:root {
    /* ─ Hellraum-Skala — sehr hell, fast reines Weiß ─ */
    --bg:           oklch(98.5% 0.004 80);    /* near-white, hauch warm */
    --bg-tint:      oklch(96.8% 0.006 78);    /* Section-Alternation */
    --bg-paper:     oklch(95.2% 0.010 76);    /* Surface-Cards */
    --bg-deeper:    oklch(93.0% 0.014 72);    /* Form-Wrapper, eingelassen */

    /* ─ Text — warm-Anthrazit, NIE reines Schwarz ─ */
    --text:         oklch(24% 0.012 60);      /* matched Logo-Farbe #1E1E1C */
    --text-body:    oklch(40% 0.015 55);
    --text-muted:   oklch(58% 0.018 60);
    --text-soft:    oklch(50% 0.018 58);

    /* ─ Material-Akzent 1: Schwarzstahl (gezundert) ─ */
    --stahl:        oklch(34% 0.010 50);
    --stahl-deep:   oklch(24% 0.012 60);
    --stahl-light:  oklch(48% 0.012 50);

    /* ─ Brand-Accent: gedämpftes Walnuss-Braun (warm, edel, NICHT orange) ─ */
    --accent:       oklch(42% 0.040 55);
    --accent-light: oklch(56% 0.045 58);
    --accent-deep:  oklch(32% 0.035 50);
    --accent-soft:  oklch(72% 0.030 65);

    /* ─ Accent in 8 Transparenz-Stufen (color-mix in oklch) ─ */
    --accent-04: color-mix(in oklch, var(--accent) 4%, transparent);
    --accent-08: color-mix(in oklch, var(--accent) 8%, transparent);
    --accent-12: color-mix(in oklch, var(--accent) 12%, transparent);
    --accent-18: color-mix(in oklch, var(--accent) 18%, transparent);
    --accent-25: color-mix(in oklch, var(--accent) 25%, transparent);
    --accent-40: color-mix(in oklch, var(--accent) 40%, transparent);
    --accent-60: color-mix(in oklch, var(--accent) 60%, transparent);
    --accent-80: color-mix(in oklch, var(--accent) 80%, transparent);

    /* ─ Holz-Atmo (Material-Welt) ─ */
    --holz-weisstanne: oklch(88% 0.025 80);   /* sehr hell, BG-Hauch */
    --holz-eiche:      oklch(72% 0.045 75);
    --holz-walnuss:    oklch(48% 0.060 50);   /* Material-Akzent */
    --holz-shimmer:    oklch(82% 0.045 75);

    /* ─ Borders ─ */
    --border:         oklch(88% 0.008 70);
    --border-soft:    oklch(92% 0.006 70);
    --border-strong:  oklch(76% 0.010 65);

    /* ─ Schatten in Walnussholz-Ton (NIEMALS grau) ─ */
    --depth-rest:   0 8px 28px 0 color-mix(in oklch, var(--holz-walnuss) 14%, transparent);
    --depth-hover:  0 14px 40px 0 color-mix(in oklch, var(--holz-walnuss) 22%, transparent);
    --depth-glow:   0 0 36px var(--accent-18);
    --depth-soft:   0 4px 14px 0 color-mix(in oklch, var(--holz-walnuss) 10%, transparent);

    /* ─ Glass-Highlight (diagonal) ─ */
    --glass-highlight: linear-gradient(135deg,
        color-mix(in oklch, white 28%, transparent) 0%,
        color-mix(in oklch, white 0%, transparent) 30%,
        color-mix(in oklch, white 0%, transparent) 70%,
        color-mix(in oklch, var(--accent-soft) 12%, transparent) 100%);

    /* ─ Fonts — Brand-Display + Body-Sans ─ */
    --font-display: 'SaveurSansLight', 'Avenir Next', 'Avenir', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ─ Display-Font ist eine Light/Hairline Geometric — nur 1 Schnitt verfügbar.
       Keine Variable-Font-Settings nötig, alle Headlines nutzen normales Weight. */

    /* ─ Easing ─ */
    --ease:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft:   cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);

    /* ─ Durations ─ */
    --dur-fast:        180ms;
    --dur-normal:      320ms;
    --dur-medium:      560ms;
    --dur-reveal:      900ms;
    --dur-reveal-fog:  1400ms;
    --dur-hero-enter:  1500ms;

    /* ─ Layout ─ */
    --container-max:    1400px;
    --container-narrow: 880px;
    --container-pad:    clamp(1.25rem, 4vw, 2.5rem);
    --nav-h:            72px;
    --section-pad:      clamp(4rem, 8vw, 8rem);

    /* ─ Radius ─ */
    --radius-sm:    4px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --radius-pill:  100px;
}

/* Display-P3 Override für Wide-Gamut */
@supports (color: color(display-p3 1 0 0)) {
    @media (color-gamut: p3) {
        :root {
            --accent:       color(display-p3 0.42 0.34 0.26);
            --accent-light: color(display-p3 0.56 0.47 0.36);
            --accent-deep:  color(display-p3 0.32 0.26 0.20);
            --accent-soft:  color(display-p3 0.74 0.66 0.55);
            --holz-walnuss: color(display-p3 0.42 0.30 0.18);
            --holz-eiche:   color(display-p3 0.78 0.62 0.42);
            --holz-shimmer: color(display-p3 0.85 0.72 0.52);
        }
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   4. RESET + BASE
   ───────────────────────────────────────────────────────────────────────── */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    font-weight: 300;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-wrap: pretty;
    overflow-x: clip;
}

img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* ─────────────────────────────────────────────────────────────────────────
   5. TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: 0.005em;
    margin: 0;
    color: var(--text);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.6rem, 6vw, 5.5rem);
    letter-spacing: -0.005em;
    line-height: 1.04;
}

h2 {
    font-size: clamp(2rem, 4.2vw, 3.8rem);
    line-height: 1.06;
    letter-spacing: 0;
}

h3 {
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    line-height: 1.15;
}

h4 {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    line-height: 1.2;
    letter-spacing: 0.01em;
}

p {
    margin: 0;
    color: var(--text-body);
    text-wrap: pretty;
}

/* em in Headlines: SaveurSansLight (all-caps) in Akzent-Farbe */
em {
    font-family: var(--font-display);
    font-style: normal;            /* SaveurSansLight hat keinen Italic-Cut, ist all-caps */
    font-weight: 300;
    color: var(--accent);          /* gedämpftes Walnuss-Braun als Akzent */
}

/* em in Body-Text: Inter mit Akzent-Farbe + Medium-Weight (kein Italic) */
p em, li em, blockquote em, dd em {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 500;
    color: var(--accent-deep);
}

strong {
    font-weight: 500;
    color: var(--text);
}

/* Eyebrow-Label */
.label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    display: inline-block;
}

.label-accent {
    color: var(--accent-deep);
}

.label::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    background: currentColor;
    vertical-align: middle;
    margin-right: 0.8rem;
    opacity: 0.6;
}

/* Selection */
::selection {
    background: var(--accent-25);
    color: var(--text);
}

/* ─────────────────────────────────────────────────────────────────────────
   6. CONTAINER
   ───────────────────────────────────────────────────────────────────────── */

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

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-block: var(--section-pad);
    position: relative;
}

.section-header {
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-header .label {
    margin-bottom: 1.2rem;
}

.section-header h2 {
    max-width: 22ch;
}

.section-header p {
    margin-top: 1.2rem;
    max-width: 56ch;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────────────
   7. NAVIGATION
   ───────────────────────────────────────────────────────────────────────── */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1.2rem 0;
    background: transparent;
    backdrop-filter: blur(0);
    transition: background var(--dur-medium) var(--ease),
                backdrop-filter var(--dur-medium) var(--ease),
                padding var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
    will-change: background, backdrop-filter;
    isolation: isolate;
}

.nav.scrolled,
body[data-page="subpage"] .nav {
    background: color-mix(in oklch, var(--bg) 88%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    padding: 0.65rem 0;
    box-shadow: 0 1px 0 var(--border-soft),
                0 8px 24px color-mix(in oklch, var(--holz-walnuss) 6%, transparent);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    transition: opacity var(--dur-normal) var(--ease);
}

.nav-brand:hover {
    opacity: 0.75;
}

.nav-brand img {
    height: 28px;
    width: auto;
}

@media (min-width: 1024px) {
    .nav-brand img {
        height: 32px;
    }
}

.nav-links {
    display: none;
    align-items: center;
    gap: clamp(1.5rem, 2.4vw, 2.4rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 960px) {
    .nav-links {
        display: flex;
    }
}

.nav-links a {
    position: relative;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-body);
    padding: 0.4rem 0;
    transition: color var(--dur-normal) var(--ease);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width var(--dur-normal) var(--ease);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.nav-cta {
    display: none;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 40%, transparent));
    backdrop-filter: blur(10px);
    transition: border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                background var(--dur-normal) var(--ease);
}

.nav-cta:hover {
    border-color: var(--accent-40);
    color: var(--accent-deep);
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 14%, white),
        color-mix(in oklch, var(--accent) 8%, white));
}

@media (min-width: 960px) {
    .nav-cta {
        display: inline-flex;
        align-items: center;
    }
}

/* Mobile-Menu Toggle */
.nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
    margin-right: -0.5rem;
    align-items: center;
    justify-content: center;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--text);
    transition: transform var(--dur-normal) var(--ease),
                opacity var(--dur-normal) var(--ease);
}

body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(3px) rotate(45deg);
}
body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}
body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-3px) rotate(-45deg);
}

@media (min-width: 960px) {
    .nav-toggle {
        display: none;
    }
}

/* Mobile-Menu Panel */
.nav-mobile {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--bg);
    padding: calc(var(--nav-h) + 2rem) var(--container-pad) 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-medium) var(--ease);
}

body.nav-open .nav-mobile {
    opacity: 1;
    pointer-events: auto;
}

body.nav-open {
    overflow: hidden;
}

.nav-mobile a {
    display: block;
    padding: 1rem 0;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid var(--border-soft);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--ease),
                transform 0.5s var(--ease);
}

body.nav-open .nav-mobile a {
    opacity: 1;
    transform: translateY(0);
}

body.nav-open .nav-mobile a:nth-child(1) { transition-delay: 0.05s; }
body.nav-open .nav-mobile a:nth-child(2) { transition-delay: 0.10s; }
body.nav-open .nav-mobile a:nth-child(3) { transition-delay: 0.15s; }
body.nav-open .nav-mobile a:nth-child(4) { transition-delay: 0.20s; }
body.nav-open .nav-mobile a:nth-child(5) { transition-delay: 0.25s; }

.nav-mobile-contact {
    margin-top: auto;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.nav-mobile-contact a {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    padding: 0.4rem 0;
    border: none;
    color: var(--text-body);
}

/* ─────────────────────────────────────────────────────────────────────────
   8. BUTTONS
   ───────────────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.95rem 1.7rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--dur-normal) var(--ease),
                background var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
    isolation: isolate;
    position: relative;
}

.btn-primary {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 18%, var(--bg)),
        color-mix(in oklch, var(--accent) 10%, var(--bg)));
    color: var(--accent-deep);
    border: 1px solid var(--accent-40);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 30%, transparent),
                0 4px 14px color-mix(in oklch, var(--holz-walnuss) 10%, transparent),
                0 1px 3px color-mix(in oklch, var(--holz-walnuss) 8%, transparent);
}

.btn-primary:hover {
    background: linear-gradient(to bottom, var(--accent-light), var(--accent));
    color: var(--bg);
    border-color: var(--accent);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 22%, transparent),
                0 8px 22px color-mix(in oklch, var(--accent) 22%, transparent),
                var(--depth-glow);
}

.btn-ghost {
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 40%, transparent));
    color: var(--text);
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(12px);
    box-shadow: 0 3px 10px color-mix(in oklch, var(--holz-walnuss) 8%, transparent);
}

.btn-ghost:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 12%, white),
        color-mix(in oklch, var(--accent) 6%, white));
    color: var(--accent-deep);
    border-color: var(--accent-40);
    box-shadow: 0 8px 22px color-mix(in oklch, var(--holz-walnuss) 14%, transparent),
                var(--depth-glow);
}

.btn-arrow::after {
    content: '→';
    font-family: var(--font-sans);
    font-weight: 300;
    transition: transform var(--dur-normal) var(--ease);
}

.btn-arrow:hover::after {
    transform: translateX(4px);
}

/* ─────────────────────────────────────────────────────────────────────────
   9. REVEAL SYSTEM
   ───────────────────────────────────────────────────────────────────────── */

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-reveal) var(--ease),
                transform var(--dur-reveal) var(--ease);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-fog {
    opacity: 0;
    filter: saturate(1) brightness(1) blur(10px);
    transform: scale(1.02);
    transition: opacity var(--dur-reveal-fog) var(--ease),
                filter var(--dur-reveal-fog) var(--ease),
                transform var(--dur-reveal-fog) var(--ease);
}

.reveal-fog.visible {
    opacity: 1;
    filter: saturate(1) brightness(1) blur(0);
    transform: scale(1);
}

.reveal-d1.visible { transition-delay: 0.08s; }
.reveal-d2.visible { transition-delay: 0.16s; }
.reveal-d3.visible { transition-delay: 0.24s; }
.reveal-d4.visible { transition-delay: 0.32s; }
.reveal-d5.visible { transition-delay: 0.40s; }
.reveal-d6.visible { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-fog {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   10. PLACEHOLDER-DATA (Demo-Marker, Kratzer-Pattern)
   ───────────────────────────────────────────────────────────────────────── */

.placeholder-data {
    position: relative;
    background: color-mix(in oklch, var(--accent) 8%, transparent);
    border-bottom: 1px dashed var(--accent);
    padding: 0 0.15em;
    cursor: help;
    transition: background var(--dur-fast) var(--ease);
}

.placeholder-data:hover {
    background: color-mix(in oklch, var(--accent) 18%, transparent);
}

.placeholder-data::after {
    content: 'Platzhalter — bitte bestätigen';
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--accent-soft);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease);
    z-index: 1000;
}

.placeholder-data:hover::after {
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   11. HERO
   ───────────────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    padding-block: calc(var(--nav-h) + 4rem) clamp(7rem, 14vh, 10rem);
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: hero-crossfade 24s linear infinite;
    filter: saturate(1.02) brightness(1.0);
}

/* Slide-1 hat eigene Animation die DIREKT sichtbar startet (kein Flash bei Load) */
.hero-slide-1 {
    opacity: 1;
    animation: hero-crossfade-first 24s linear infinite;
}
.hero-slide-2 { animation-delay:  8s; }
.hero-slide-3 { animation-delay: 16s; }

@keyframes hero-crossfade {
    0%   { opacity: 0; transform: scale(1.02); }
    4%   { opacity: 1; }
    33%  { opacity: 1; }
    37%  { opacity: 0; transform: scale(1.10); }
    100% { opacity: 0; transform: scale(1.10); }
}

/* Slide-1 spezifisch: startet sichtbar, fadet aus, kommt sichtbar zurück */
@keyframes hero-crossfade-first {
    0%   { opacity: 1; transform: scale(1.02); }
    33%  { opacity: 1; transform: scale(1.06); }
    37%  { opacity: 0; transform: scale(1.10); }
    66%  { opacity: 0; transform: scale(1.10); }
    96%  { opacity: 0; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1.02); }
}

@supports (animation-timeline: scroll()) {
    @keyframes hero-parallax {
        from { transform: translateY(0); }
        to   { transform: translateY(18vh); }
    }
    .hero-bg {
        animation: hero-parallax linear both;
        animation-timeline: scroll(root block);
        animation-range: 0vh 120vh;
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* LIGHT-Layer (always present) — warm-anthrazit-Schatten unten-links für
       Text-Lesbarkeit auf hellen Bildern. */
    background:
        radial-gradient(ellipse 60% 70% at 15% 80%,
            color-mix(in oklch, var(--text) 22%, transparent) 0%,
            color-mix(in oklch, var(--text) 8%, transparent) 50%,
            transparent 85%);
}

/* DARK-Layer als ::before — separater Layer mit opacity gesteuert per JS
   (var(--hero-dark-amount), tracked 1:1 zu Slide-3 Opacity). Opacity IST
   interpolierbar — anders als background-image (Gradients sind discrete).
   Damit fadet der Dim exakt mit dem dunklen Bild rein/raus, kein Snap. */
.hero-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,
            color-mix(in oklch, var(--text) 72%, transparent) 0%,
            color-mix(in oklch, var(--text) 50%, transparent) 22%,
            color-mix(in oklch, var(--text) 22%, transparent) 50%,
            transparent 78%);
    opacity: var(--hero-dark-amount, 0);
}

/* Hero-Text + Trust-Pill Farben werden via color-mix mit --hero-dark-pct
   direkt in den Element-Definitionen interpoliert (siehe weiter unten).
   Kein data-active-slide-Snap mehr, keine separate transition: color.
   Resultat: Text-Farbe ist EXAKT synchron zu Slide-3 Opacity. */

/* Buttons im Dark-Slide */
.hero[data-active-slide="3"] .btn-ghost {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--bg) 20%, transparent),
        color-mix(in oklch, var(--bg) 12%, transparent));
    color: var(--bg);
    border-color: color-mix(in oklch, var(--bg) 30%, transparent);
}
.hero[data-active-slide="3"] .btn-ghost:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 35%, transparent),
        color-mix(in oklch, var(--accent) 22%, transparent));
    color: var(--bg);
    border-color: var(--accent);
}

.hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-content {
    max-width: 36rem;
}

/* Text-Farben werden via color-mix mit --hero-dark-pct (per-frame von JS,
   gekoppelt an Slide-3 Opacity) interpoliert. Damit ist die Color-Transition
   EXAKT synchron zum Hero-Crossfade — kein Lag, keine Transition nötig. */
.hero-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in oklch,
        var(--text-muted),
        color-mix(in oklch, white 85%, transparent) var(--hero-dark-pct, 0%));
    margin-bottom: 1.4rem;
    display: inline-block;
}

.hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 1px;
    background: color-mix(in oklch, var(--accent), var(--accent-light) var(--hero-dark-pct, 0%));
    vertical-align: middle;
    margin-right: 0.9rem;
    opacity: calc(0.8 + 0.2 * var(--hero-dark-amount, 0));
}

.hero-title {
    font-size: clamp(3rem, 7vw, 6.4rem);
    font-variation-settings: 'opsz' 96, 'wght' 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-bottom: 1.8rem;
    color: color-mix(in oklch, var(--text), white var(--hero-dark-pct, 0%));
}

.hero-title em {
    font-style: normal;
    color: color-mix(in oklch, var(--accent-deep), var(--accent-light) var(--hero-dark-pct, 0%));
    display: inline-block;
}

.hero-subline {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    font-weight: 300;
    color: color-mix(in oklch,
        var(--text-body),
        color-mix(in oklch, white 92%, transparent) var(--hero-dark-pct, 0%));
    margin-bottom: 2.4rem;
    max-width: 32rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* Hero-Trust-Pill (vertikale 1px-Linien als Separator, Steinberger-Pattern) */
.hero-trust {
    position: absolute;
    bottom: clamp(1.5rem, 3vh, 2.5rem);
    left: 0;
    right: 0;
    z-index: 2;
}

.hero-trust-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 1.4rem;
    padding: 0.85rem 1.4rem;
    background: color-mix(in oklch,
        color-mix(in oklch, var(--bg) 78%, transparent),
        color-mix(in oklch, var(--text) 78%, transparent)
        var(--hero-dark-pct, 0%));
    border: 1px solid color-mix(in oklch,
        var(--border-soft),
        color-mix(in oklch, var(--bg) 18%, transparent)
        var(--hero-dark-pct, 0%));
    border-radius: var(--radius-pill);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: var(--depth-soft),
                inset 0 1px 0 color-mix(in oklch, white 30%, transparent);
    width: fit-content;
    max-width: 100%;
}

.hero-trust-item {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--text), white var(--hero-dark-pct, 0%));
    white-space: nowrap;
}

.hero-trust-dot {
    width: 1px;
    height: 12px;
    background: color-mix(in oklch, var(--accent), var(--accent-light) var(--hero-dark-pct, 0%));
    opacity: calc(0.55 + 0.15 * var(--hero-dark-amount, 0));
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .hero-trust-inner {
        gap: 0.7rem;
        padding: 0.7rem 1rem;
    }
    .hero-trust-item {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
    }
    .hero-trust-dot {
        height: 9px;
    }
}

/* Hero-Enter Stagger */
.hero-enter {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);
    transition: opacity var(--dur-hero-enter) var(--ease),
                transform var(--dur-hero-enter) var(--ease),
                filter var(--dur-hero-enter) var(--ease);
}

.hero-enter.in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.hero-enter.settled {
    filter: none !important;
}

.hero-content .hero-enter:nth-child(1).in { transition-delay: 0s; }
.hero-content .hero-enter:nth-child(2).in { transition-delay: 0.12s; }
.hero-content .hero-enter:nth-child(3).in { transition-delay: 0.24s; }
.hero-content .hero-enter:nth-child(4).in { transition-delay: 0.36s; }
.hero-trust.hero-enter.in { transition-delay: 0.55s; }

/* ─────────────────────────────────────────────────────────────────────────
   12. VIEW TRANSITIONS — Cross-Document Setup
   ───────────────────────────────────────────────────────────────────────── */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: page-slide-out 0.32s var(--ease) both; }
::view-transition-new(root) { animation: page-slide-in 0.32s var(--ease) both; }
html.nav-backwards::view-transition-old(root) { animation: page-slide-out-rev 0.32s var(--ease) both; }
html.nav-backwards::view-transition-new(root) { animation: page-slide-in-rev 0.32s var(--ease) both; }

@keyframes page-slide-out     { to   { opacity: 0; transform: translateX(-4%); } }
@keyframes page-slide-in      { from { opacity: 0; transform: translateX(4%);  } }
@keyframes page-slide-out-rev { to   { opacity: 0; transform: translateX(4%);  } }
@keyframes page-slide-in-rev  { from { opacity: 0; transform: translateX(-4%); } }

html.intra-vt::view-transition-old(root),
html.intra-vt::view-transition-new(root) {
    animation: none;
}

/* CSS-Fallback wenn VT skipped (Cache, reduced-motion, älterer Browser) */
html.page-enter body {
    animation: page-slide-in 0.32s var(--ease) both;
}
html.nav-backwards.page-enter body {
    animation: page-slide-in-rev 0.32s var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
    html.page-enter body {
        animation: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   13. WELCOME / MANIFEST
   ───────────────────────────────────────────────────────────────────────── */

.welcome-section {
    text-align: center;
    padding-block: clamp(5rem, 10vw, 9rem);
}

.welcome-section .label {
    margin-bottom: 2rem;
}

.welcome-headline {
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-variation-settings: 'opsz' 96, 'wght' 400;
    line-height: 1.1;
    letter-spacing: -0.018em;
    margin-bottom: 2rem;
    max-width: 24ch;
    margin-inline: auto;
}

.welcome-headline em {
    font-variation-settings: 'opsz' 96, 'wght' 420;
    color: var(--accent-deep);
}

.welcome-body {
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.55;
    font-weight: 300;
    color: var(--text-body);
    max-width: 58ch;
    margin-inline: auto;
}

.welcome-body-2 {
    margin-top: 1.4rem;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    color: var(--text-soft);
}

/* ─────────────────────────────────────────────────────────────────────────
   14. WERKSCHAU (Editorial Split — Image + Text)
   ───────────────────────────────────────────────────────────────────────── */

.werkschau-section {
    background: var(--bg-tint);
    padding-block: clamp(5rem, 10vw, 9rem);
}

.werkschau-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

@media (min-width: 900px) {
    .werkschau-grid {
        grid-template-columns: 1.1fr 1fr;
    }
}

.werkschau-image {
    position: relative;
}

.werkschau-img-frame {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    background: var(--bg-paper);
}

.werkschau-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.werkschau-img-frame img,
.werkschau-img-frame .werkschau-gif {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.werkschau-text {
    max-width: 36rem;
}

.werkschau-text .label {
    margin-bottom: 1.2rem;
}

.werkschau-text h2 {
    margin-bottom: 1.6rem;
}

.werkschau-text p {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.6;
    color: var(--text-body);
    margin-bottom: 2rem;
    max-width: 36rem;
}

.werkschau-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   15. EDITORIAL SPLIT — 3 Welten
   ───────────────────────────────────────────────────────────────────────── */

.split-section {
    padding-block: clamp(5rem, 10vw, 9rem);
}

.split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 2.4vw, 1.8rem);
}

@media (min-width: 800px) {
    .split-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .split-grid--two {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1100px;
        margin-inline: auto;
    }
    .split-grid--two .split-tile {
        aspect-ratio: 4 / 5;
    }
}

.split-tile {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    background: var(--bg-paper);
    display: block;
    /* Reveal-Fog-Properties MIT in die Transition — sonst killt diese Shorthand
       die .reveal-fog-Transition (opacity/filter snappen → Blitz). Tile selbst
       transformt beim Hover nicht (nur Bild-Scale + CTA-Span), transform = reveal. */
    transition: opacity var(--dur-reveal-fog) var(--ease),
                filter var(--dur-reveal-fog) var(--ease),
                transform var(--dur-reveal-fog) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
}

.split-tile-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.split-tile-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Symmetrisch: gleiche Dauer + Kurve in beide Richtungen (in + zurück). */
    transition: transform 1.3s var(--ease);
}

.split-tile-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
        color-mix(in oklch, var(--text) 62%, transparent) 0%,
        color-mix(in oklch, var(--text) 30%, transparent) 35%,
        color-mix(in oklch, var(--text) 6%, transparent) 65%,
        transparent 100%);
    transition: opacity var(--dur-medium) var(--ease);
}

.split-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--glass-highlight);
    pointer-events: none;
}

.split-tile-content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    padding: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.split-tile-num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    font-variation-settings: 'opsz' 96, 'wght' 420;
    line-height: 0.9;
    color: var(--bg);
    opacity: 0.6;
    margin-bottom: 0.3rem;
    letter-spacing: -0.02em;
}

.split-tile-content h3 {
    color: var(--bg);
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    font-variation-settings: 'opsz' 72, 'wght' 420;
    margin-bottom: 0.5rem;
}

.split-tile-content p {
    color: color-mix(in oklch, var(--bg) 80%, transparent);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.6rem;
    max-width: 24rem;
}

.split-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-soft);
}

.split-tile-cta span {
    transition: transform var(--dur-normal) var(--ease);
}

.split-tile:hover {
    box-shadow: var(--depth-hover), var(--depth-glow);
}

.split-tile:hover .split-tile-bg img {
    transform: scale(1.06);
}

.split-tile:hover .split-tile-cta span {
    transform: translateX(4px);
}

/* Cross-Dim bei Hover (Desktop only) */
@media (hover: hover) and (min-width: 1024px) {
    .split-grid:hover .split-tile:not(:hover) .split-tile-bg img {
        filter: saturate(0.7) brightness(0.85);
        /* transform MUSS in der Liste bleiben — sonst überschreibt diese
           Shorthand die transform-Transition und der Zoom schnappt instant
           zurück sobald die Maus das Tile verlässt (aber noch im Grid ist). */
        transition: filter 0.5s var(--ease), transform 1.3s var(--ease);
    }
    .split-grid:hover .split-tile:not(:hover) .split-tile-overlay {
        opacity: 1.1;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   16. GDA HERO-STÜCK
   ───────────────────────────────────────────────────────────────────────── */

.gda-section {
    background: var(--bg-tint);
    padding-block: clamp(5rem, 10vw, 9rem);
}

.gda-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

@media (min-width: 900px) {
    .gda-grid {
        grid-template-columns: 1.1fr 1fr;
    }
    .gda-grid .gda-text {
        order: 2;
    }
}

.gda-image {
    position: relative;
}

.gda-img-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest), 0 0 60px var(--accent-12);
    background: var(--bg-paper);
}

.gda-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.gda-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Award-Badge — plakativ IM Bild (User-Wunsch) */
.gda-badge {
    position: absolute;
    top: clamp(1rem, 2.5vw, 1.6rem);
    right: clamp(1rem, 2.5vw, 1.6rem);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width: clamp(96px, 13vw, 132px);
    height: clamp(96px, 13vw, 132px);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%,
        color-mix(in oklch, var(--accent-light) 90%, white),
        var(--accent-deep) 75%);
    color: var(--bg);
    box-shadow: 0 8px 24px color-mix(in oklch, var(--accent-deep) 35%, transparent),
                inset 0 1px 0 color-mix(in oklch, white 32%, transparent),
                inset 0 -8px 14px color-mix(in oklch, var(--accent-deep) 30%, transparent);
    text-align: center;
    padding: 0.5rem;
    transform: rotate(-8deg);
    isolation: isolate;
}

.gda-badge::before {
    content: '';
    position: absolute;
    inset: 6%;
    border: 1px solid color-mix(in oklch, white 36%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

.gda-badge-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    color: color-mix(in oklch, var(--bg) 92%, transparent);
}

.gda-badge-name {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    font-variation-settings: 'opsz' 24, 'wght' 500;
    line-height: 1;
    letter-spacing: -0.005em;
}

.gda-badge-year {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1;
    margin-top: 0.15rem;
    opacity: 0.9;
}

.gda-badge-year .placeholder-data {
    background: transparent;
    border-bottom-color: var(--bg);
    color: inherit;
}

.gda-text {
    max-width: 36rem;
}

.gda-text .label {
    margin-bottom: 1.2rem;
}

.gda-text h2 {
    margin-bottom: 1.6rem;
}

.gda-text > p {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.6;
    color: var(--text-body);
    margin-bottom: 1.5rem;
    max-width: 36rem;
}

.gda-meta {
    font-size: 0.9rem !important;
    line-height: 1.9 !important;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border-soft);
    color: var(--text-soft) !important;
}

.gda-meta-label {
    display: inline-block;
    width: 5.5rem;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.gda-actions {
    margin-top: 2rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   17. WIR / TEAM
   ───────────────────────────────────────────────────────────────────────── */

.wir-section {
    padding-block: clamp(5rem, 10vw, 9rem);
}

.wir-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
}

@media (min-width: 900px) {
    .wir-grid {
        grid-template-columns: 1fr 1.1fr;
    }
}

.wir-image {
    position: relative;
}

.wir-img-frame {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    background: var(--bg-paper);
}

.wir-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.wir-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wir-text {
    max-width: 36rem;
}

.wir-text .label {
    margin-bottom: 1.2rem;
}

.wir-text h2 {
    margin-bottom: 1.6rem;
}

.wir-intro {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.6;
    color: var(--text-body);
    margin-bottom: 2.5rem;
    max-width: 36rem;
}

.wir-team {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border-soft);
}

.wir-member {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border-soft);
}

@media (min-width: 540px) {
    .wir-member {
        flex-direction: row;
        align-items: baseline;
        gap: 1.5rem;
    }
}

.wir-member-name {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 400;
    font-variation-settings: 'opsz' 48, 'wght' 430;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1;
    min-width: 6rem;
}

.wir-member-role {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--text-soft);
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────────────────
   18. PROZESS TIMELINE
   ───────────────────────────────────────────────────────────────────────── */

.prozess-section {
    background: var(--bg-tint);
    padding-block: clamp(5rem, 10vw, 9rem);
}

/* Layout: Stepper links, Bleistift-Anker (sticky) rechts */
.prozess-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 900px) {
    .prozess-layout {
        grid-template-columns: 1.3fr 1fr;
        align-items: start;
    }
}

.prozess-header h2 {
    margin-block: 0.4rem 1rem;
}

.prozess-intro {
    color: var(--text-body);
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.6;
    max-width: 42ch;
}

/* Stepper — verbundene Sequenz mit Linie + Nodes */
.prozess-stepper {
    list-style: none;
    margin: clamp(2.2rem, 4vw, 3.2rem) 0 0;
    padding: 0;
}

.prozess-step {
    position: relative;
    padding-left: clamp(2rem, 3vw, 2.6rem);
    padding-bottom: clamp(1.8rem, 3vw, 2.5rem);
}

.prozess-step:last-child {
    padding-bottom: 0;
}

/* Verbindungslinie — läuft durch die Nodes von Schritt zu Schritt */
.prozess-step::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0.45rem;
    bottom: 0;
    width: 1px;
    background: var(--border-strong);
}

.prozess-step:last-child::before {
    display: none;
}

.prozess-step-dot {
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--bg-tint);
    border: 2px solid var(--accent);
    z-index: 1;
    transition: background var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease);
}

.prozess-step-body h3 {
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    margin-bottom: 0.5rem;
    color: var(--text);
    letter-spacing: 0.01em;
}

.prozess-step-body p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-soft);
    max-width: 46ch;
    margin: 0;
}

/* Key-Step (Nachsorge) — der Patina-Payoff: gefüllter Node + Akzent-Headline */
.prozess-step--key .prozess-step-dot {
    background: var(--accent);
    transform: scale(1.15);
}

.prozess-step--key .prozess-step-body h3 {
    color: var(--accent-deep);
}

/* Bleistift-Anker (sticky auf Desktop) */
.prozess-image {
    position: relative;
}

@media (min-width: 900px) {
    .prozess-image {
        position: sticky;
        top: clamp(5rem, 12vh, 8rem);
    }
}

.prozess-img-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    background: var(--bg-paper);
}

.prozess-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.prozess-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   19. ANTI-MARKETING — Was wir nicht machen
   ───────────────────────────────────────────────────────────────────────── */

.nicht-section {
    padding-block: clamp(5rem, 10vw, 9rem);
    text-align: center;
}

.nicht-section .label {
    margin-bottom: 1.6rem;
}

.nicht-headline {
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-variation-settings: 'opsz' 96, 'wght' 400;
    margin-bottom: 1.8rem;
    max-width: 18ch;
    margin-inline: auto;
}

.nicht-headline em {
    color: var(--accent-deep);
}

.nicht-intro {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    color: var(--text-body);
    max-width: 52ch;
    margin: 0 auto 3rem;
}

.nicht-list {
    list-style: none;
    margin: 0 auto 3rem;
    padding: 0;
    max-width: 36rem;
    display: flex;
    flex-direction: column;
}

.nicht-list li {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw, 1.95rem);
    font-style: normal;
    color: var(--text-soft);
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-soft);
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.nicht-list li:last-child {
    border-bottom: none;
}

.nicht-outro {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.6;
    color: var(--text-body);
    max-width: 52ch;
    margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   20. KONTAKT-TEASER
   ───────────────────────────────────────────────────────────────────────── */

.kontakt-teaser {
    background: var(--bg-tint);
    padding-block: clamp(5rem, 10vw, 9rem);
}

.kontakt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
}

@media (min-width: 900px) {
    .kontakt-grid {
        grid-template-columns: 1fr 1.1fr;
    }
}

.kontakt-text {
    max-width: 30rem;
}

.kontakt-text .label {
    margin-bottom: 1.2rem;
}

.kontakt-text h2 {
    margin-bottom: 1.6rem;
}

.kontakt-text p {
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.55;
    color: var(--text-body);
    max-width: 28rem;
}

.kontakt-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.kontakt-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.4rem 1.6rem;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--depth-soft);
    transition: transform var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease);
    isolation: isolate;
    position: relative;
}

.kontakt-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    border-radius: var(--radius-md);
}

.kontakt-card > * {
    position: relative;
    z-index: 1;
}

.kontakt-card-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.kontakt-card-value {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-variation-settings: 'opsz' 48, 'wght' 430;
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.kontakt-card-meta {
    font-size: 0.85rem;
    color: var(--text-soft);
    line-height: 1.5;
}

.kontakt-card:hover {
    border-color: var(--accent-40);
    box-shadow: var(--depth-hover), var(--depth-glow);
}

.kontakt-card:hover .kontakt-card-value {
    color: var(--accent-deep);
}

/* ─────────────────────────────────────────────────────────────────────────
   21. FOOTER
   ───────────────────────────────────────────────────────────────────────── */

.footer {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.5rem);
    background: linear-gradient(to bottom,
        var(--bg) 0%,
        var(--bg-deeper) 100%);
    overflow: clip;
    isolation: isolate;
    border-top: 1px solid var(--border-soft);
}

.footer-ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-family: var(--font-display);
    font-size: clamp(7rem, 22vw, 22rem);
    font-weight: 400;
    font-variation-settings: 'opsz' 96, 'wght' 400;
    line-height: 0.85;
    color: var(--text);
    letter-spacing: -0.04em;
    opacity: 0.035;
    z-index: 0;
    white-space: nowrap;
    transform: scale(0.9);
    transform-origin: center;
}

@supports (animation-timeline: view()) {
    @keyframes ghost-materialize {
        from { --ghost-progress: 0; }
        to   { --ghost-progress: 1; }
    }
    .footer {
        animation: ghost-materialize linear both;
        animation-timeline: view(block);
        animation-range: entry 0% contain 60%;
    }
    .footer-ghost {
        opacity: calc(0.055 * var(--ghost-progress));
        transform: scale(calc(0.85 + 0.15 * var(--ghost-progress)));
    }
}

.footer .container {
    position: relative;
    z-index: 1;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 720px) {
    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }
}

.footer-logo {
    height: 32px;
    width: auto;
    margin-bottom: 1.2rem;
}

.footer-brand-col p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 24rem;
}

.footer-heading {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.2rem;
}

.footer-col p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-body);
    margin-bottom: 0.8rem;
}

.footer-col p:last-child {
    margin-bottom: 0;
}

.footer-col a {
    color: var(--text-body);
    transition: color var(--dur-normal) var(--ease);
    display: inline-block;
}

.footer-col a:hover {
    color: var(--accent-deep);
}

.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-list li {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-body);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid var(--border-soft);
    font-size: 0.82rem;
    color: var(--text-muted);
}

@media (min-width: 600px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
}

.footer-legal a {
    color: var(--text-muted);
    transition: color var(--dur-normal) var(--ease);
}

.footer-legal a:hover {
    color: var(--accent-deep);
}

/* ─────────────────────────────────────────────────────────────────────────
   22. 4er BILDGALERIE-STRIP (nach Werkschau)
   ───────────────────────────────────────────────────────────────────────── */

.galerie-strip {
    padding-block: clamp(2rem, 4vw, 4rem) clamp(4rem, 7vw, 6rem);
}

.galerie-strip-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.85rem, 1.4vw, 1.2rem);
}

@media (min-width: 600px) {
    .galerie-strip-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .galerie-strip-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.galerie-strip-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-paper);
    box-shadow: var(--depth-soft);
    /* Reveal-Fog-Properties MIT in die Transition — sonst killt diese Shorthand
       die Transition-Liste von .reveal-fog (gleiche Spezifität, später definiert)
       → Reveal snapt ohne Fade/Stagger. Die Kachel selbst transformt beim Hover
       nicht (nur Bild-Scale + box-shadow), daher ist transform hier reveal-only. */
    transition: opacity var(--dur-reveal-fog) var(--ease),
                filter var(--dur-reveal-fog) var(--ease),
                transform var(--dur-reveal-fog) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
    display: block;
}

.galerie-strip-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.galerie-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 1.4s var(--ease);
}

.galerie-strip-item:hover {
    box-shadow: var(--depth-hover), var(--depth-glow);
}

.galerie-strip-item:hover img {
    transform: scale(1.05);
}

/* ─────────────────────────────────────────────────────────────────────────
   23. TEASER-SECTION (4 Projekt-/Stück-Cards auf Index)
   ───────────────────────────────────────────────────────────────────────── */

.teaser-section {
    padding-block: clamp(5rem, 10vw, 9rem);
}

.teaser-section--alt {
    background: var(--bg-tint);
}

.teaser-section .section-header {
    text-align: center;
    max-width: 56rem;
    margin-inline: auto;
}

.teaser-section .section-header h2 {
    max-width: none;
    margin-inline: auto;
}

.teaser-section .section-header p {
    margin-inline: auto;
}

.teaser-section .section-header .label::before {
    margin-right: 0.6rem;
}

.teaser-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 720px) {
    .teaser-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1180px) {
    .teaser-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.teaser-tile {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    text-align: left;
    /* Reveal-Fog-Properties MIT in die Transition — sonst überschreibt diese
       Shorthand die .reveal-fog-Transition → Reveal snapt ohne Fade/Stagger.
       Die Kachel selbst transformt beim Hover nicht (Bild-Scale + box-shadow
       sitzen auf Kind-Elementen), daher ist transform hier reveal-only. */
    transition: opacity var(--dur-reveal-fog) var(--ease),
                filter var(--dur-reveal-fog) var(--ease),
                transform var(--dur-reveal-fog) var(--ease);
}

.teaser-tile-image {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-paper);
    box-shadow: var(--depth-soft);
    transition: box-shadow var(--dur-medium) var(--ease);
}

.teaser-tile-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.teaser-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 1.4s var(--ease);
}

.teaser-tile:hover .teaser-tile-image {
    box-shadow: var(--depth-hover), var(--depth-glow);
}

.teaser-tile:hover .teaser-tile-image img {
    transform: scale(1.04);
}

.teaser-tile-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.teaser-tile-num {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 500;
    font-variation-settings: 'opsz' 24, 'wght' 500;
    color: var(--accent-deep);
    letter-spacing: 0.04em;
}

.teaser-tile-body h3 {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    font-variation-settings: 'opsz' 48, 'wght' 400;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--text);
    margin: 0;
}

.teaser-tile-body p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-soft);
    margin: 0;
}

.teaser-cta {
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   24. EDITIONEN-INTRO-SECTION (Editorial Split mit GIF/Bild + Text)
   ───────────────────────────────────────────────────────────────────────── */

.editionen-intro-section {
    padding-block: clamp(5rem, 10vw, 9rem);
}

.editionen-intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

@media (min-width: 900px) {
    .editionen-intro-grid {
        grid-template-columns: 1fr 1.1fr;
    }
    .editionen-intro-grid .editionen-intro-image {
        order: 2;
    }
}

.editionen-intro-image {
    position: relative;
}

.editionen-intro-img-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-paper);
    box-shadow: var(--depth-rest);
}

.editionen-intro-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.editionen-intro-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.8s var(--ease);
}

.editionen-intro-image:hover .editionen-intro-img-frame img {
    transform: scale(1.03);
}

.editionen-intro-text {
    max-width: 36rem;
}

.editionen-intro-text .label {
    margin-bottom: 1.2rem;
}

.editionen-intro-text h2 {
    margin-bottom: 1.6rem;
}

.editionen-intro-text > p {
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.6;
    color: var(--text-body);
    margin-bottom: 2rem;
    max-width: 36rem;
}

/* ==========================================================================
   LIGHTBOX — Single-Image "Lift" (hell, editorial, kein Carousel)
   Frosted-cream Backdrop · ein Bild zentriert in Normalgröße · Shared-Element
   Morph via View Transitions (.gal-item img bekommt lb2-shared Name).
   ========================================================================== */

.lb2-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 5vh, 4rem) clamp(1.5rem, 5vw, 5rem);
    background: color-mix(in oklch, var(--bg) 80%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.1);
    backdrop-filter: blur(22px) saturate(1.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--ease), visibility 0.5s;
    will-change: opacity;
}

.lb2-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.lb2-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.9rem, 1.6vw, 1.4rem);
    max-width: 100%;
    max-height: 100%;
}

.lb2-img {
    max-width: min(90vw, 1500px);
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--depth-hover);
    background: var(--bg-paper);
}

.lb2-cap {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    max-width: 60ch;
}

.lb2-close {
    position: absolute;
    top: clamp(1rem, 2.5vh, 1.6rem);
    right: clamp(1rem, 2.5vw, 1.6rem);
    width: 46px;
    height: 46px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 55%, transparent),
        color-mix(in oklch, white 42%, transparent));
    border: 1px solid var(--border-strong);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease);
}

.lb2-close:hover {
    border-color: var(--accent-40);
    color: var(--accent-deep);
}

/* Shared-Element Lift: ruhiges Easing für den Morph */
::view-transition-group(lb2-shared) {
    animation-duration: 0.52s;
    animation-timing-function: var(--ease);
}

/* Galerie-Bilder als zoom-bar markieren */
.gal-item { cursor: zoom-in; }

/* Parent-Animationen pausieren während Lightbox offen (Compositor entlasten) */
body.lightbox-open .hero-slide,
body.lightbox-open .footer-ghost,
body.lightbox-open .reviews-track {
    animation-play-state: paused !important;
}

@media (max-width: 720px) {
    .lb2-img { max-width: 94vw; max-height: 74vh; }
    .lb2-close { width: 40px; height: 40px; }
}

/* ==========================================================================
   25. NEUE SECTIONS (USP-Pillars, Materialien, Marc-Quote, Reviews, FAQ)
   ========================================================================== */

/* ─── USP-Pillars: 4 Säulen unter Welcome ─── */
.pillars-section {
    padding-block: clamp(2rem, 4vw, 4rem) clamp(2rem, 5vw, 5rem);
}

.pillars-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.6rem);
}

@media (min-width: 720px) {
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .pillars-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pillar {
    position: relative;
    isolation: isolate;
    padding: clamp(1.5rem, 2.2vw, 2.1rem);
    border-radius: var(--radius-lg);
    background: var(--bg-paper);
    box-shadow: var(--depth-rest);
    overflow: hidden;
}

.pillar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.pillar > * {
    position: relative;
    z-index: 2;
}

/* Lesbarer Ghost — großes Säulen-Wort, oben linksbündig, in-flow als Titel.
   Präsenz über die Größe (Watermark-Charakter), Eleganz über den gedämpften
   Walnuss-Ton — kräftig genug zum Lesen, luftig genug für den Ghost-Look. */
.pillar-word {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--accent) 58%, var(--bg-paper));
    margin: 0 0 0.9rem;
}

.pillar-text {
    color: var(--text-body);
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.55;
    margin: 0;
}

/* (Ghost-Wort entfernt — .pillar-word ist jetzt der voll lesbare Titel.) */


/* ─── Werkschau-Invitation ─── */
.werkschau-invitation {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 400;
    color: var(--accent-deep);
    margin-block: 0.6rem 1.6rem;
    line-height: 1.2;
}


/* ─── Marc-Quote — als Einheit unter dem Gruppenfoto (kein Divider) ─── */
.marc-quote {
    margin-top: clamp(1.4rem, 2.5vw, 2rem);
    text-align: left;
}

.marc-quote-text {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.4;
    color: var(--text);
    margin: 0 0 1.4rem 0;
    font-weight: 400;
    text-wrap: pretty;
}

.marc-quote-text em {
    color: var(--accent);
    font-style: normal;
}

.marc-quote-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem 1.4rem;
}

.marc-quote-attribution {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.marc-quote-name {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    color: var(--text);
    letter-spacing: 0.05em;
}

.marc-quote-role {
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.marc-quote-actions {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.marc-quote-link {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--accent-deep);
    border-bottom: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
    padding-bottom: 2px;
    transition: color var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease);
}

.marc-quote-link:hover {
    color: var(--accent);
    border-color: var(--accent);
}


/* ─── Reviews — Auto-Scroll Marquee ─── */
.reviews-section {
    background: var(--bg-tint);
    padding-block: clamp(4rem, 6vw, 5rem);
    overflow: hidden;
}

/* Eyebrow-Label zentrieren in den zentrierten Header-Sections (Reviews + FAQ).
   .label ist inline-block → display:block + text-align:center zentriert die
   inline-Inhalte (Deko-Linie + Text) ohne die Geschwister-Elemente zu
   beeinflussen (FAQ-Accordion-Liste bleibt links). */
.reviews-section .label,
.faq-section .label {
    display: block;
    text-align: center;
    margin-bottom: clamp(1rem, 1.6vw, 1.3rem);
}

.reviews-headline {
    text-align: center;
    margin-bottom: 1rem;
}

.reviews-rating {
    text-align: center;
    margin-bottom: clamp(0.9rem, 1.6vw, 1.2rem);
    font-size: 0.95rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.reviews-stars {
    color: var(--accent);
    letter-spacing: 0.1em;
    margin-right: 0.5rem;
}

.reviews-cta {
    text-align: center;
}

.reviews-marquee {
    overflow: hidden;
    /* Vertikales Padding INNEN — sonst clippt overflow:hidden (für den
       horizontalen Marquee-Loop nötig) die Card-Schatten oben/unten ab,
       und die Kacheln wirken abgeschnitten. */
    padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.reviews-track {
    display: flex;
    gap: clamp(1.2rem, 2vw, 2rem);
    width: max-content;
    animation: reviews-scroll 60s linear infinite;
}

.reviews-marquee:hover .reviews-track {
    animation-play-state: paused;
}

@keyframes reviews-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.review-card {
    flex: 0 0 clamp(280px, 28vw, 380px);
    padding: clamp(1.6rem, 2.4vw, 2.2rem);
    background: var(--bg-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--depth-soft);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--dur-medium) var(--ease),
                transform var(--dur-medium) var(--ease);
}

.review-card:hover {
    box-shadow: var(--depth-hover);
}

.review-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.review-card > * {
    position: relative;
    z-index: 2;
}

.review-stars {
    color: var(--accent);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
}

.review-text {
    margin: 0;
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.55;
    color: var(--text-body);
}

.review-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border-top: 1px solid var(--border-soft);
    padding-top: 1rem;
}

.review-author {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text);
    letter-spacing: 0.04em;
}

.review-source {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* ─── FAQ — Accordion ─── */
.faq-section {
    padding-block: clamp(4rem, 7vw, 6rem);
}

.faq-headline {
    text-align: center;
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.faq-item {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-paper);
    overflow: hidden;
    /* opacity/transform für den Entrance-Reveal MIT in die Transition — sonst
       überschreibt diese Shorthand die .reveal-Transition → Eintritt snapt. */
    transition: opacity var(--dur-reveal) var(--ease),
                transform var(--dur-reveal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
}

/* Offen-Zustand über JS-Klasse .faq-open (nicht [open]) — so animieren Icon +
   Border synchron zum Collapse, statt am Ende zurückzuspringen. */
.faq-item.faq-open {
    border-color: color-mix(in oklch, var(--accent) 30%, var(--border));
    box-shadow: var(--depth-soft);
}

.faq-question {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-weight: 400;
    color: var(--text);
    padding: clamp(1.1rem, 1.6vw, 1.4rem) clamp(1.2rem, 1.8vw, 1.6rem);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: clamp(3rem, 4vw, 3.5rem);
    transition: color var(--dur-normal) var(--ease);
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
    content: '+';
    position: absolute;
    right: clamp(1.2rem, 1.8vw, 1.6rem);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--accent);
    transition: transform var(--dur-normal) var(--ease);
    line-height: 1;
}

.faq-item.faq-open .faq-question::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-item:hover .faq-question {
    color: var(--accent-deep);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-medium) var(--ease);
}

/* No-JS-Fallback: native <details open> zeigt die Antwort (ohne Animation). */
.faq-item[open] .faq-answer {
    max-height: none;
}

/* Padding auf dem inneren <p> (NICHT auf .faq-answer) — sonst klemmt der
   border-box max-height-Klamp die Schließ-Animation in den letzten Frames ein. */
.faq-answer p {
    color: var(--text-body);
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.6;
    margin: 0;
    padding: 0 clamp(1.2rem, 1.8vw, 1.6rem) clamp(1.2rem, 1.6vw, 1.4rem);
}


/* ==========================================================================
   26. KONTAKTFORMULAR „Briefbogen" — bespoke, mehrstufig, skandinavisch.
   Ruhiges Blatt, Underline-Inputs, ein Schritt nach dem anderen. ob- Prefix
   gegen Reveal-Konflikte. Mehrfach-instanz-fähig (Main + Kontakt).
   ========================================================================== */

/* Section-Kopf über dem Formular */
.kontakt-form-head {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.kontakt-form-head .label { display: block; margin-bottom: clamp(0.9rem, 1.6vw, 1.2rem); }
.kontakt-form-head h2 { margin-bottom: 1rem; }
.kontakt-form-intro {
    color: var(--text-body);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.6;
    max-width: 40rem;
    margin-inline: auto;
}

/* Das Blatt (Surface-Card: Depth + Glass-Touch). KEINE transition-Shorthand
   hier — das Element trägt reveal-fog. */
.ob-form-wrapper {
    position: relative;
    isolation: isolate;
    max-width: 40rem;
    margin-inline: auto;
    padding: clamp(1.8rem, 3.4vw, 3rem) clamp(1.5rem, 3vw, 3rem);
    background: var(--bg-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--depth-rest);
    overflow: hidden;
}
/* Glass-Highlight zwischen Blatt und Inhalt */
.ob-form-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}
/* Sehr dezenter Briefbogen-Strich oben links (kein Logo) */
.ob-form-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: clamp(1.5rem, 3vw, 3rem);
    width: 2.4rem;
    height: 2px;
    background: var(--accent);
    opacity: 0.65;
    z-index: 3;
}
.ob-form-wrapper > * { position: relative; z-index: 2; }

/* Progress — editorial, keine Kreise */
.ob-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: clamp(1.6rem, 2.6vw, 2.3rem);
    font-family: var(--font-display);
    font-size: clamp(0.72rem, 1vw, 0.82rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ob-progress-step {
    color: var(--text-muted);
    padding-bottom: 0.32rem;
    border-bottom: 1px solid transparent;
    transition: color var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease);
}
.ob-progress-step.is-active { color: var(--accent-deep); border-bottom-color: var(--accent); }
.ob-progress-step.is-done { color: var(--accent); }
.ob-progress-sep { color: var(--border-strong); }

/* Steps — Höhen-Animation + Fade */
.ob-steps {
    position: relative;
    overflow: hidden;
    transition: height 0.5s var(--ease);
}
.ob-step { display: none; opacity: 0; transition: opacity 0.4s var(--ease); }
.ob-step.is-active { display: block; }
.ob-step.is-visible { opacity: 1; }

.ob-question {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.3vw, 1.95rem);
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.005em;
    margin: 0 0 clamp(1.2rem, 2vw, 1.6rem);
    text-align: center;
}

/* Chips — Glass-Pill-Sprache der Seite */
.ob-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.ob-chip {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--text);
    padding: 0.72rem 1.3rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 38%, transparent));
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
}
.ob-chip:hover { border-color: var(--accent-40); color: var(--accent-deep); }
.ob-chip.is-selected {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 18%, white),
        color-mix(in oklch, var(--accent) 10%, white));
    border-color: var(--accent);
    color: var(--accent-deep);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 40%, transparent),
                0 3px 12px color-mix(in oklch, var(--accent) 16%, transparent);
}

/* Felder — Underline statt Box */
.ob-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 2.4vw, 2rem);
}
.ob-field { position: relative; display: block; }
.ob-field--full { grid-column: 1 / -1; }
.ob-field input,
.ob-field textarea {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-strong);
    border-radius: 0;
    padding: 0.5rem 0 0.55rem;
    transition: border-color var(--dur-normal) var(--ease);
}
.ob-field textarea { resize: none; line-height: 1.55; }
.ob-field input:focus, .ob-field textarea:focus { outline: none; }
/* Linie zieht sich beim Focus in Walnuss */
.ob-field::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
}
.ob-field:focus-within::after { transform: scaleX(1); }
/* Floating Label */
.ob-field-label {
    position: absolute;
    left: 0;
    top: 0.5rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-muted);
    pointer-events: none;
    transform-origin: left;
    transition: transform var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease);
}
.ob-field:focus-within .ob-field-label,
.ob-field:has(input:not(:placeholder-shown)) .ob-field-label,
.ob-field:has(textarea:not(:placeholder-shown)) .ob-field-label {
    transform: translateY(-1.45em) scale(0.78);
    color: var(--accent-deep);
}
.ob-opt { color: var(--text-muted); font-size: 0.85em; }

.ob-trust {
    margin: clamp(1.3rem, 2.2vw, 1.7rem) 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.02em;
}

/* Honeypot — visuell entfernt */
.ob-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Nav */
.ob-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: clamp(1.6rem, 2.6vw, 2.2rem);
}
.ob-nav[hidden] { display: none; }
.ob-nav-spacer { flex: 1; }
.ob-back {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 0;
    transition: color var(--dur-normal) var(--ease);
}
.ob-back:hover { color: var(--accent-deep); }
.ob-back[hidden] { display: none; }
.ob-submit[hidden] { display: none; }

/* Success */
.ob-success { text-align: center; padding: clamp(1rem, 2vw, 2rem) 0; }
.ob-success[hidden] { display: none; }
/* Kein generischer Haken — ein dezenter Walnuss-Strich als Marken-Detail
   (echot den Briefbogen-Strich oben am Blatt). */
.ob-success-mark {
    display: block;
    width: 2.4rem;
    height: 2px;
    margin: 0 auto 1.4rem;
    background: var(--accent);
    opacity: 0.7;
}
.ob-success-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 400;
    color: var(--text);
    margin: 0 0 0.6rem;
}
.ob-success-text { color: var(--text-body); font-size: 1.05rem; line-height: 1.6; margin: 0; }

/* Direkt-Zeile unter dem Blatt */
.ob-direct {
    margin-top: clamp(1.6rem, 3vw, 2.4rem);
    text-align: center;
    font-size: 0.92rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.ob-direct-label { margin-right: 0.4rem; }
.ob-direct a { color: var(--accent-deep); transition: color var(--dur-normal) var(--ease); }
.ob-direct a:hover { color: var(--accent); }
.ob-direct-sep { color: var(--border-strong); margin: 0 0.45rem; }

/* Shake bei fehlender Pflichtauswahl */
.ob-shake { animation: ob-shake 0.4s var(--ease); }
@keyframes ob-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
}

/* Autofill-Override — Form-BG matchen */
.ob-form input:-webkit-autofill,
.ob-form input:-webkit-autofill:hover,
.ob-form input:-webkit-autofill:focus,
.ob-form textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-paper) inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text);
    transition: background-color 5000s ease-in-out 0s;
}

@media (max-width: 600px) {
    .ob-fields { grid-template-columns: 1fr; }
}

/* Tiles (Rahmen + Bereich) — größer als Pills, mit Beschreibungszeile */
.ob-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}
.ob-tile {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: left;
    padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.4rem);
    border-radius: var(--radius-md);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 38%, transparent));
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
}
.ob-tile:hover { border-color: var(--accent-40); box-shadow: var(--depth-soft); }
.ob-tile.is-selected {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 16%, white),
        color-mix(in oklch, var(--accent) 9%, white));
    border-color: var(--accent);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 40%, transparent),
                0 4px 16px color-mix(in oklch, var(--accent) 16%, transparent);
}
.ob-tile-title {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    color: var(--text);
    letter-spacing: 0.01em;
}
.ob-tile.is-selected .ob-tile-title { color: var(--accent-deep); }
.ob-tile-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }
@media (max-width: 460px) { .ob-tiles { grid-template-columns: 1fr; } }

/* Dynamischer Progress — „Vorhaben" fällt im Einzelstück-Pfad raus */
.ob-progress-step[hidden], .ob-progress-sep[hidden] { display: none; }

/* Einzelstück-Hinweis am Kontakt-Step */
.ob-einzel-hint {
    margin: 0 0 clamp(1rem, 1.8vw, 1.4rem);
    padding: 0.8rem 1rem;
    border-left: 2px solid var(--accent-40);
    background: color-mix(in oklch, var(--accent) 6%, transparent);
    border-radius: 0 6px 6px 0;
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.5;
    text-align: left;
}
.ob-einzel-hint[hidden] { display: none; }

/* Direkt-Kontakte als Cards unter dem Blatt (statt verlorener Textzeile) */
.ob-contact-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    max-width: 40rem;
    margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
}
@media (min-width: 640px) {
    .ob-contact-cards { grid-template-columns: repeat(3, 1fr); }
}
.ob-contact-cards .kontakt-card { padding: 1.1rem 1.2rem; }
.ob-contact-cards .kontakt-card-value {
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    overflow-wrap: anywhere;
}
.ob-contact-cards .kontakt-card-meta { font-size: 0.78rem; }