/* ============================================================
   Steinberger Schreinerei — style.css
   ============================================================
   Hellraum-Architektur mit Walnuss-Akzent.
   Nichts faded zu dunkel. Alle Sections operieren in 93–97% Lightness.
   Atmosphäre via Holz-Hauch-Beams (mix-blend multiply) + scroll-driven Hue-Plateaus.

   Architektur:
     1.  Tokens (Custom Properties + @property + Display-P3-Variante)
     2.  Reset & Base
     3.  Typografie + Variable-Font-Achsen
     4.  Container & Layout-Utilities
     5.  Reveal-System (animation-timeline + IntersectionObserver-Fallback)
     6.  Atmosphären-Layer (page-bg + atmo-beams + Holzmaserung)
     7.  Scroll-Driven Hue-Plateaus
     8.  Buttons & Pills (Glass+Depth — hellraum-Variante)
     9.  Navigation (Megamenu + Mobile-Overlay)
    10.  Hero (cineastisches Diorama)
    11.  Editorial-Section
    12.  Section-Connector
    13.  Werkstatt-Index (Bento + 25-Pill-Innovation)
    14.  Spezialitäten-Sektor (ed-card 200%-Slide)
    15.  Material-Palette (lebendige Swatches)
    16.  USP-Section
    17.  Kontakt-Teaser
    18.  Footer (Watermark)
    19.  View Transitions
    20.  Mikro-Patterns (Scroll-Progress, Skip-Link, Selection)
    21.  Reduced-Motion + Print
    22.  Responsive (Mobile-First-Breakpoints)
   ============================================================ */


/* ─── 1. Tokens ──────────────────────────────────────────────── */

@property --atmo-hue {
    syntax: '<number>';
    initial-value: 75;
    inherits: true;
}
@property --atmo-chroma {
    syntax: '<number>';
    initial-value: 0.045;
    inherits: true;
}
@property --atmo-light {
    syntax: '<percentage>';
    initial-value: 78%;
    inherits: true;
}
@property --ghost-progress {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
}
@property --pill-shimmer {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

:root {
    /* ─ Hellraum-Skala — bleibt durchgängig 93–97% L ─ */
    --bg-base:      oklch(96.5% 0.010 78);    /* Pergament — fast weiß, leicht warm */
    --bg-tint:      oklch(95.0% 0.018 80);    /* eingelassener Honig-Ton */
    --bg-paper:     oklch(94.5% 0.022 78);    /* zwischen base und tint */
    --bg-deeper:    oklch(93.0% 0.030 75);    /* Surface-Cards, Form-Wrapper */

    /* ─ Walnuss-Akzent-Skala ─ */
    --walnuss-deep: oklch(28% 0.060 45);      /* Headlines, dunkel */
    --walnuss:      oklch(38% 0.075 50);      /* Standard-Akzent */
    --walnuss-mid:  oklch(50% 0.085 55);      /* Mittel */
    --walnuss-warm: oklch(62% 0.090 65);      /* Hover-State */
    --walnuss-glow: oklch(76% 0.085 75);      /* Highlights, Badges */

    /* Akzent-Aliases */
    --accent:       var(--walnuss);
    --accent-light: var(--walnuss-warm);
    --accent-deep:  var(--walnuss-deep);
    --accent-glow:  var(--walnuss-glow);

    /* Akzent-Transparenzstufen */
    --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);

    /* ─ Text — niemals reines Schwarz ─ */
    --text:         oklch(20% 0.020 50);      /* Warm-Holzkohle */
    --text-body:    oklch(38% 0.030 50);      /* Walnuss-Body */
    --text-muted:   oklch(58% 0.025 60);      /* Sand-Sublabel */
    --text-soft:    oklch(48% 0.025 55);

    /* ─ Holz-Hauch — für Atmo-Effekte ─ */
    --holz-shimmer: oklch(82% 0.045 75);
    --holz-warm:    oklch(72% 0.060 70);
    --holz-deep:    oklch(48% 0.060 50);

    /* ─ Border ─ */
    --border:       color-mix(in oklch, var(--text) 8%, transparent);
    --border-soft:  color-mix(in oklch, var(--text) 5%, transparent);
    --border-strong:color-mix(in oklch, var(--text) 14%, transparent);

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

    /* ─ Glass-Highlight für hellraum (diagonal Cream → Honig) ─ */
    --glass-highlight: linear-gradient(135deg,
        color-mix(in oklch, white 32%, transparent) 0%,
        color-mix(in oklch, white 0%, transparent) 30%,
        color-mix(in oklch, white 0%, transparent) 70%,
        color-mix(in oklch, var(--holz-warm) 14%, transparent) 100%);

    /* ─ Schrift ─ */
    --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ─ Variable-Font-Achsen ─ */
    --font-h1-rest: 'opsz' 144, 'wght' 340, 'SOFT' 80;
    --font-h1-in:   'opsz' 144, 'wght' 380, 'SOFT' 100;
    --font-h2:      'opsz' 80,  'wght' 420, 'SOFT' 60;
    --font-h3:      'opsz' 36,  'wght' 460, 'SOFT' 40;
    --font-h4:      'opsz' 14,  'wght' 540, 'SOFT' 30;

    /* ─ Easings ─ */
    --ease:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);
    --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-slide:  cubic-bezier(0.22, 1, 0.36, 1);

    /* ─ Durations ─ */
    --dur-fast:        0.3s;
    --dur-normal:      0.45s;
    --dur-medium:      0.6s;
    --dur-slow:        0.9s;
    --dur-reveal:      1s;
    --dur-hero-enter:  1.4s;

    /* ─ Layout ─ */
    --container-max:    1400px;
    --container-narrow: 860px;
    --container-pad:    clamp(1.5rem, 4vw, 5rem);
    --section-pad:      clamp(5rem, 9vw, 10rem);
    --nav-h:            76px;

    /* ─ Border-Radius ─ */
    --radius-sm:    8px;
    --radius-md:    12px;
    --radius-lg:    20px;
    --radius-xl:    28px;
    --radius-pill:  100px;
}

/* Display-P3 für saftigere Akzente auf modernen Displays */
@supports (color: color(display-p3 1 0 0)) {
    @media (color-gamut: p3) {
        :root {
            --walnuss:      color(display-p3 0.45 0.32 0.22);
            --walnuss-warm: color(display-p3 0.65 0.48 0.32);
            --walnuss-glow: color(display-p3 0.82 0.68 0.50);
            --holz-warm:    color(display-p3 0.72 0.58 0.40);
            --holz-shimmer: color(display-p3 0.86 0.74 0.52);
        }
    }
}


/* ─── 2. Reset & Base ────────────────────────────────────────── */

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

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    scroll-padding-top: calc(var(--nav-h) + 1rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;          /* Mobile Zoom-Layer 2 von 3 */
    color-scheme: light;
}

body {
    background: var(--bg-base);
    color: var(--text-body);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.62;
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;          /* clip damit animation-timeline funktioniert */
    min-height: 100vh;
    min-height: 100svh;
}

/* Globale Atmo-Wash: viewport-fixe Multiply-Layer die sich scroll-getrieben
   über die ganze Page legt. Macht den Verlauf kontinuierlich über alle
   Sections (overflow-clip pro atmo-room würde sonst Cream-Bänder zwischen
   Sections erzeugen). Der Wash verstärkt sich linear mit Scroll-Progress —
   oben kaum sichtbar, unten dunkel-walnussfarbenes moody overlay.
   z-index 30: über Section-Content (0-4), unter Filter-Nav (40), Floating-
   UI (50) und Nav (100) — die bleiben unverdunkelt lesbar. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    background: linear-gradient(to bottom,
        transparent 0%,
        oklch(var(--atmo-light) calc(var(--atmo-chroma) * 0.6) var(--atmo-hue)) 100%);
    mix-blend-mode: multiply;
    /* Opacity 0.5 hält Lesbarkeit am unteren Scroll-Ende (Multiply-Math:
       text-Kontrastratio bleibt knapp WCAG AA bei voller Tiefe). */
    opacity: 0.5;
}

body.menu-open { overflow: hidden; }
body.mega-open { overflow: hidden; }

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

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

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

input, textarea, select {
    font: inherit;
    color: inherit;
}

ul, ol { list-style: none; }

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--accent) 22%, transparent);
    border-radius: 100px;
    border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklch, var(--accent) 35%, transparent);
}

/* Inline-Akzent-Link */
.link-accent {
    color: var(--accent);
    border-bottom: 1px solid var(--accent-25);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.link-accent:hover {
    color: var(--accent-deep);
    border-bottom-color: var(--accent-60);
}

/* Skip-Link für Tastatur-Nav */
.skip-link {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: 1000;
    padding: 0.75rem 1.25rem;
    background: var(--text);
    color: var(--bg-base);
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Placeholder-Boxen während Bilder noch fehlen */
[data-placeholder] {
    position: relative;
    background:
        linear-gradient(135deg,
            color-mix(in oklch, var(--holz-warm) 18%, transparent) 0%,
            color-mix(in oklch, var(--holz-warm) 8%, transparent) 50%,
            color-mix(in oklch, var(--holz-warm) 14%, transparent) 100%),
        repeating-linear-gradient(45deg,
            transparent 0,
            transparent 8px,
            color-mix(in oklch, var(--holz-warm) 6%, transparent) 8px,
            color-mix(in oklch, var(--holz-warm) 6%, transparent) 9px);
    background-color: var(--bg-deeper);
}
[data-placeholder]::after {
    content: attr(data-placeholder);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--text) 38%, transparent);
    text-align: center;
    padding: 1rem;
}


/* ─── 3. Typografie ──────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: normal;
    color: var(--text);
    letter-spacing: -0.012em;
    line-height: 1.1;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 1.04;
    font-weight: 380;
    letter-spacing: -0.018em;
    font-variation-settings: var(--font-h1-rest);
}

h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.1;
    font-weight: 420;
    letter-spacing: -0.014em;
    font-variation-settings: var(--font-h2);
}

h3 {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.18;
    font-weight: 460;
    letter-spacing: -0.008em;
    font-variation-settings: var(--font-h3);
}

h4 {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.3;
    font-weight: 540;
    letter-spacing: -0.005em;
    font-variation-settings: var(--font-h4);
    color: var(--text);
}

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

em {
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
}

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

.label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.label-accent {
    color: var(--accent-deep);
    position: relative;
    padding-left: 1.6rem;
}
.label-accent::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1px;
    background: linear-gradient(to right, var(--accent), transparent);
}

/* Drop-Cap Editorial-First-Letter */
.dropcap {
    font-family: var(--font-serif);
    font-size: 3.2em;
    font-weight: 380;
    float: left;
    line-height: 0.92;
    margin-right: 0.12em;
    margin-top: 0.05em;
    color: var(--accent);
    font-variation-settings: 'opsz' 144, 'wght' 380, 'SOFT' 70;
}


/* ─── 4. Container & Layout ──────────────────────────────────── */

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

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

.section-header {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: clamp(3rem, 6vw, 5rem);
    text-align: center;
}

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

.section-header h2 {
    margin-bottom: 1rem;
}

.section-header p {
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    color: var(--text-soft);
    max-width: 560px;
    margin-inline: auto;
}


/* ─── 5. Reveal-System ───────────────────────────────────────── */

/* Base State (hidden) */
.reveal {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
}

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

/* Animation-Timeline Variante (modernste Browser) */
@supports (animation-timeline: view()) {
    .reveal {
        animation: reveal-enter linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
    .reveal-fog {
        animation: reveal-fog-enter linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
    }

    .reveal-d1 { animation-delay: 0s; animation-range: entry 4% cover 34%; }
    .reveal-d2 { animation-range: entry 8% cover 38%; }
    .reveal-d3 { animation-range: entry 12% cover 42%; }
    .reveal-d4 { animation-range: entry 16% cover 46%; }
    .reveal-d5 { animation-range: entry 20% cover 50%; }
    .reveal-d6 { animation-range: entry 24% cover 54%; }
}

/* Fallback für Browser ohne animation-timeline (JS-Observer setzt .visible) */
@supports not (animation-timeline: view()) {
    .reveal {
        transition: opacity var(--dur-reveal) var(--ease),
                    transform var(--dur-reveal) var(--ease);
    }
    .reveal-fog {
        transition: opacity var(--dur-reveal) var(--ease),
                    transform var(--dur-reveal) var(--ease),
                    filter var(--dur-reveal) var(--ease);
    }
    .reveal.visible,
    .reveal-fog.visible {
        opacity: 1;
        transform: none;
        filter: none;
    }
    .reveal-d1.visible { transition-delay: 0.1s; }
    .reveal-d2.visible { transition-delay: 0.2s; }
    .reveal-d3.visible { transition-delay: 0.3s; }
    .reveal-d4.visible { transition-delay: 0.4s; }
    .reveal-d5.visible { transition-delay: 0.5s; }
    .reveal-d6.visible { transition-delay: 0.6s; }
}

@keyframes reveal-enter {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes reveal-fog-enter {
    from {
        opacity: 0;
        transform: scale(1.03);
        filter: saturate(1) brightness(1) blur(14px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: saturate(1) brightness(1) blur(0);
    }
}

/* Reveal-Words Pattern — Wort-für-Wort-Reveal */
.reveal-words span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
}

@supports (animation-timeline: view()) {
    .reveal-words {
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
    }
    .reveal-words span {
        animation: reveal-word linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
    }
    .reveal-words span:nth-child(1) { animation-range: entry 0% cover 22%; }
    .reveal-words span:nth-child(2) { animation-range: entry 4% cover 26%; }
    .reveal-words span:nth-child(3) { animation-range: entry 8% cover 30%; }
    .reveal-words span:nth-child(4) { animation-range: entry 12% cover 34%; }
    .reveal-words span:nth-child(5) { animation-range: entry 16% cover 38%; }
}

@keyframes reveal-word {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}


/* ─── 6. Atmosphären-Layer ───────────────────────────────────── */

/* Page-BG: durchgehendes atmosphärisches Bett, fixed (Werkstatt-Raum schwebt) */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        /* Honig-Glow oben rechts */
        radial-gradient(ellipse 70% 60% at 82% 6%,
            color-mix(in oklch, var(--holz-warm) 18%, transparent) 0%,
            transparent 62%),
        /* Walnuss-Schimmer unten links */
        radial-gradient(ellipse 50% 50% at 12% 96%,
            color-mix(in oklch, var(--walnuss-warm) 9%, transparent) 0%,
            transparent 65%),
        /* Mid-Schimmer */
        radial-gradient(ellipse 40% 40% at 50% 50%,
            color-mix(in oklch, var(--holz-shimmer) 6%, transparent) 0%,
            transparent 75%),
        var(--bg-base);
}

/* atmo-room — Container-Wrapper für Sections mit Beams */
.atmo-room {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
}


/* atmo-room > .container hebt sich über die Beams */
.atmo-room > .container,
.atmo-room > .hero-content {
    position: relative;
    z-index: 1;
}


/* ─── 7. Scroll-Driven Hue-Plateaus ──────────────────────────── */

@keyframes atmo-section-flow {
    /* Nur zwei Keyframes → perfekt linearer Verlauf, keine Inflection-
       Knicke. Hue bleibt durchgehend Walnuss (75 → 66), Chroma fällt
       von 0.045 auf 0.018 (entsättigt nach unten), Lightness von 78%
       auf 26% (echtes fade into dark). */
    0%   { --atmo-hue: 75; --atmo-chroma: 0.045; --atmo-light: 78%; }
    100% { --atmo-hue: 66; --atmo-chroma: 0.018; --atmo-light: 26%; }
}

@supports (animation-timeline: scroll(root)) {
    html {
        animation: atmo-section-flow linear both;
        animation-timeline: scroll(root block);
    }
}


/* ─── 8. Buttons & Pills (Glass+Depth — Hellraum-Variante) ──── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.55rem;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.005em;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-decoration: none;
    /* `all` ist hier OK — Buttons haben keine reveal-Konflikte (Reveal nutzt Animation) */
    transition: background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
}

.btn-primary {
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, var(--holz-warm)) 0%,
        color-mix(in oklch, white 25%, var(--walnuss-warm)) 180%);
    color: var(--text);
    border-color: var(--accent-25);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 14%, transparent),
        0 4px 14px color-mix(in oklch, var(--holz-warm) 22%, transparent),
        0 1px 3px color-mix(in oklch, var(--holz-warm) 14%, transparent);
}
.btn-primary:hover {
    transform: translateY(-1px);
    color: var(--accent-deep);
    border-color: var(--accent-40);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 20%, transparent),
        0 8px 22px color-mix(in oklch, var(--holz-warm) 30%, transparent),
        0 2px 6px color-mix(in oklch, var(--holz-warm) 18%, transparent),
        0 0 24px var(--accent-12);
}
.btn-primary:active {
    transform: translateY(0);
}

.btn-ghost {
    background: color-mix(in oklch, white 38%, transparent);
    color: var(--text);
    border-color: var(--border-strong);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 10%, transparent),
        0 3px 10px color-mix(in oklch, var(--holz-warm) 14%, transparent);
}
.btn-ghost:hover {
    background: color-mix(in oklch, white 52%, transparent);
    border-color: var(--accent-40);
    color: var(--accent-deep);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 14%, transparent),
        0 6px 18px color-mix(in oklch, var(--holz-warm) 22%, transparent);
}

.btn-arrow span:last-child,
.btn-arrow svg:last-child {
    transition: transform var(--dur-normal) var(--ease);
}
.btn-arrow:hover span:last-child,
.btn-arrow:hover svg:last-child {
    transform: translateX(4px);
}


/* ─── 9. Navigation (Megamenu + Mobile-Overlay) ──────────────── */

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

.nav.scrolled {
    padding: 0.6rem 0;
    background: color-mix(in oklch, var(--bg-base) 88%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    box-shadow:
        0 1px 0 color-mix(in oklch, var(--holz-warm) 14%, transparent),
        0 8px 24px color-mix(in oklch, var(--holz-warm) 14%, transparent);
}

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

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--text);
    font-family: var(--font-serif);
    font-weight: 380;
    transition: color var(--dur-medium) var(--ease);
}

.nav-mark {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--walnuss-warm), var(--walnuss));
    color: color-mix(in oklch, white 85%, var(--holz-shimmer));
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 380;
    font-variation-settings: 'opsz' 144, 'wght' 380, 'SOFT' 80;
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
        0 4px 10px color-mix(in oklch, var(--walnuss) 35%, transparent);
    transition: transform var(--dur-fast) var(--ease);
}

.nav-brand:hover .nav-mark {
    transform: translateY(-1px) rotate(-2deg);
}

.nav-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.nav-brand-name {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 380;
    letter-spacing: -0.005em;
    font-variation-settings: 'opsz' 144, 'wght' 380, 'SOFT' 60;
}

.nav-brand-sub {
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 4px;
}

.nav.scrolled .nav-brand-sub {
    color: var(--text-soft);
}

.nav-links {
    display: none;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
}

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

.nav-link,
.nav-link-mega {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-soft);
    border-radius: var(--radius-pill);
    transition: color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
    background: transparent;
    border: none;
    cursor: pointer;
}

.nav-link:hover,
.nav-link-mega:hover,
.nav-link.active,
.nav-item-mega.active .nav-link-mega {
    color: var(--accent-deep);
    background: color-mix(in oklch, white 32%, transparent);
}

.nav-chevron {
    transition: transform var(--dur-fast) var(--ease);
    color: currentColor;
}
.nav-item-mega.active .nav-chevron {
    transform: rotate(180deg);
}

.nav-cta {
    display: none;
    padding: 0.7rem 1.25rem;
    font-size: 0.86rem;
}

@media (min-width: 1024px) {
    .nav-cta { display: inline-flex; }
}

/* Hamburger */
.nav-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 28px; height: 28px;
    justify-content: center;
    align-items: center;
}

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

.nav-hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--text);
    border-radius: 2px;
    transition: transform var(--dur-normal) var(--ease),
                opacity var(--dur-normal) var(--ease);
}

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


/* ─── 9b. Megamenu Panels ────────────────────────────────────── */

.mega {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    /* Solid Hellraum-BG mit subtiler Tint-Verstärkung — kein Backdrop-Blur,
       weil der auf Cream-Cream kaum sichtbar ist. Glass-Effekt kommt
       stattdessen via ::before Highlight + Depth-Shadow. */
    background: linear-gradient(to bottom,
        var(--bg-base) 0%,
        color-mix(in oklch, var(--bg-base) 96%, var(--holz-warm)) 100%);
    border-bottom: 1px solid var(--accent-25);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 40%, transparent),
        0 16px 44px 0 color-mix(in oklch, var(--holz-warm) 22%, transparent),
        0 4px 12px 0 color-mix(in oklch, var(--holz-warm) 14%, transparent);
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-medium) var(--ease),
                visibility var(--dur-medium) var(--ease),
                transform var(--dur-medium) var(--ease);
    pointer-events: none;
}

/* Diagonaler Glass-Highlight (CLAUDE.md Tile-Standard) — über das ganze
   Mega-Panel, hebt es als eigene Layer-Ebene vom Page-BG ab. */
.mega::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--glass-highlight);
    pointer-events: none;
}

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

.mega.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mega-inner {
    padding-block: clamp(2rem, 4vw, 3rem);
}

.mega-header {
    margin-bottom: 2rem;
    text-align: center;
}

.mega-header h3 {
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    margin-bottom: 0;
}

.mega-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.mega-col-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 460;
    color: var(--text);
    transition: color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}

.mega-col-title:hover {
    color: var(--accent-deep);
    border-bottom-color: var(--accent-40);
}

.mega-col-name {
    flex: 1;
}

.mega-col-count {
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mega-col-title svg {
    transition: transform var(--dur-fast) var(--ease);
    color: var(--accent);
}
.mega-col-title:hover svg {
    transform: translateX(3px);
}

.mega-col-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mega-col-list a {
    display: block;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: var(--text-soft);
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease),
                padding var(--dur-fast) var(--ease);
}

.mega-col-list a:hover {
    color: var(--accent-deep);
    background: color-mix(in oklch, var(--accent) 6%, transparent);
    padding-left: 0.9rem;
}

/* Spezialitäten-Megamenu — 5 Cards */
.mega-spez-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.mega-spez-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.25rem;
    background: color-mix(in oklch, white 35%, transparent);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    transition: transform var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.mega-spez-card:hover {
    transform: translateY(-2px);
    background: color-mix(in oklch, white 50%, transparent);
    border-color: var(--accent-40);
    box-shadow: var(--depth-soft);
}

.mega-spez-num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.8rem;
    color: var(--accent);
    letter-spacing: 0.08em;
}

.mega-spez-name {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 460;
    color: var(--text);
}

.mega-spez-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}


/* ─── 9c. Mobile-Menu Overlay ────────────────────────────────── */

.nav-mobile {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--bg-base);
    padding: calc(var(--nav-h) + 1.5rem) var(--container-pad) 2rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-medium) var(--ease),
                visibility var(--dur-medium) var(--ease);
}

.nav-mobile.open {
    opacity: 1;
    visibility: visible;
}

.nav-mobile-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-mobile-group {
    border-bottom: 1px solid var(--border-soft);
}

.nav-mobile-group summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 0;
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 380;
    color: var(--text);
    cursor: pointer;
}

.nav-mobile-group summary::-webkit-details-marker { display: none; }

.nav-mobile-group summary svg {
    transition: transform var(--dur-fast) var(--ease);
    color: var(--accent);
}

.nav-mobile-group[open] summary svg {
    transform: rotate(180deg);
}

.nav-mobile-sub {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0 1rem 0.5rem;
}

.nav-mobile-sub-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text-soft);
}

.nav-mobile-sub-title span {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-left: auto;
}

.nav-mobile-link {
    display: block;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 380;
    color: var(--text);
}

.nav-mobile-contact {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.5rem 0;
    margin-top: 1rem;
    border-top: 1px solid var(--border-soft);
}

.nav-mobile-contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--accent-deep);
    font-size: 0.92rem;
}


/* ─── 10. Hero (Editorial Split mit Crossfade-Visual) ────────── */

.hero {
    position: relative;
    min-height: 88vh;
    min-height: 88svh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--nav-h) + 2.5rem);
    padding-bottom: clamp(4.5rem, 8vh, 7.5rem);
    overflow-x: clip;
    isolation: isolate;
    /* Hellraum-Background — gleicher BG-Charakter wie der Rest der Seite */
    background:
        radial-gradient(ellipse 80% 60% at 8% 30%,
            color-mix(in oklch, var(--holz-warm) 14%, transparent) 0%,
            transparent 60%),
        radial-gradient(ellipse 50% 50% at 100% 80%,
            color-mix(in oklch, var(--accent) 8%, transparent) 0%,
            transparent 65%),
        var(--bg-base);
}

/* Split-Layout: Text links, Visual rechts. Visual sitzt in seiner Grid-Spalte
   und ist via clip-path mit Cloud-Wave auf seiner LINKEN Kante geformt. */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    width: 100%;
}

@media (min-width: 900px) {
    .hero-grid {
        grid-template-columns: 1.05fr 1fr;
        gap: clamp(2.5rem, 5vw, 6rem);
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 620px;
    width: 100%;
}

.hero-content .label {
    margin-bottom: 1.5rem;
    color: var(--text-muted);
    font-weight: 500;
}

.hero-title {
    font-family: var(--font-serif);
    font-size: clamp(2.6rem, 5.6vw, 4.8rem);
    line-height: 1.05;
    font-weight: normal;
    font-variation-settings: 'opsz' 144, 'wght' 360, 'SOFT' 80;
    letter-spacing: -0.005em;
    color: var(--text);
    margin-bottom: 1.4rem;
    font-feature-settings: 'liga' 1, 'dlig' 1, 'salt' 1, 'ss01' 1, 'kern' 1;
    text-rendering: geometricPrecision;
}

/* Italic-Akzent auf "Atmosphären" — klassisches Editorial-Pattern */
.hero-title-em {
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'wght' 380, 'SOFT' 100;
    color: var(--accent-deep);
    display: inline-block;
    /* Display-Italic von Fraunces hat schöne Schwünge — leicht aus der
       baseline heben verstärkt den editorial-Look */
    transform: translateY(-0.02em);
}

.hero-subline {
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    font-style: italic;
    font-variation-settings: 'opsz' 24, 'wght' 320, 'SOFT' 80;
    line-height: 1.5;
    color: var(--text-body);
    margin-bottom: 2.4rem;
    max-width: 480px;
}

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

/* Visual rechts: Blob-Container mit 4 Crossfade-Slides + Ken-Burns.
   Hero-spezifische Depth + Glass-Edge — stärker als die Standard-Tile-Werte
   weil das Visual die Hauptbühne ist, nicht eine kleine Card. */
.hero-visual {
    position: relative;
    aspect-ratio: 5 / 6;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    /* Asymmetrische Blob-Form — organisch, editorial */
    border-radius: 53% 47% 50% 50% / 45% 50% 50% 55%;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        /* Outer depth — kräftiger als depth-rest, etwas Richtung depth-hover */
        0 14px 42px 0 color-mix(in oklch, var(--holz-warm) 30%, transparent),
        /* Accent-Glow als Rest-Zustand (auf Cards nur bei Hover) */
        0 0 32px 0 var(--accent-12),
        /* Inner Glass-Edge — feiner Cream-Hauch innen entlang der Edge,
           wirkt wie Lichtkante auf einer Glasvitrine */
        inset 0 0 0 1px color-mix(in oklch, white 14%, transparent);
}

@media (min-width: 900px) {
    .hero-visual {
        max-width: none;
        margin-inline: 0;
    }
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    opacity: 0;
    will-change: opacity, transform;
}

/* Crossfade + Ken-Burns kombiniert — eine Animation, linear timing.
   4 Slides à 24s Cycle (= 6s pro Slide visible window).
   Zoom überlappt mit Fade-in (Start bei 87% in Hidden-Phase) damit
   das Slide beim Einblenden bereits Mid-Zoom-Bewegung hat — kein
   "stop → go". Reset (1.08 → 1.00) passiert in der Hidden-Phase
   zwischen 25% und 26%, also unsichtbar.
   Sichtbarer Zoom: 1.027 → 1.080 = ~5% deutlich spürbar
   (vs. vorher 1.00 → 1.025 = nur 2.5% kaum sichtbar).
   Stagger via negative animation-delay: 0s / -18s / -12s / -6s. */
@keyframes hero-crossfade {
    0%   { opacity: 1; transform: scale(1.027); }   /* wrap-punkt, mid-zoom */
    21%  { opacity: 1; transform: scale(1.072); }   /* kurz vor fade-out */
    25%  { opacity: 0; transform: scale(1.080); }   /* fade-out komplett, peak */
    26%  { opacity: 0; transform: scale(1); }       /* reset in hidden-phase */
    87%  { opacity: 0; transform: scale(1); }       /* zoom-start, noch hidden */
    96%  { opacity: 0; transform: scale(1.019); }   /* fade-in start, zoom läuft */
    100% { opacity: 1; transform: scale(1.027); }   /* fade-in komplett */
}

.hero-slide {
    animation: hero-crossfade 24s linear infinite;
}
.hero-slide-1 { animation-delay: 0s; }
.hero-slide-2 { animation-delay: -18s; }
.hero-slide-3 { animation-delay: -12s; }
.hero-slide-4 { animation-delay: -6s; }

@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        animation: none !important;
        opacity: 0;
        transform: none !important;
    }
    .hero-slide-1 { opacity: 1; }
}

/* Glass-Highlight diagonal über den Blob — Hero-Variante:
   stärker als der Standard-Tile-Highlight (12%/6% statt 8%/4%),
   Winkel 120° statt 135° für dramatischeres Licht-Spiel. */
.hero-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(120deg,
        rgba(255, 255, 255, 0.13) 0%,
        rgba(255, 255, 255, 0) 32%,
        rgba(255, 255, 255, 0) 68%,
        rgba(255, 255, 255, 0.07) 100%);
}

/* Subtiler Vignette-Edge für mehr Depth im Blob */
.hero-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse 100% 100% at center,
        transparent 55%,
        rgba(20, 14, 8, 0.18) 100%);
}

/* Hero-Enter-Animation (per JS via .in class) */
.hero-enter {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(8px);
}

.hero-enter.in {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition:
        opacity var(--dur-hero-enter) var(--ease),
        transform var(--dur-hero-enter) var(--ease),
        filter var(--dur-hero-enter) var(--ease);
}

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

.hero-content .hero-enter:nth-child(1).in { transition-delay: 0s; }
.hero-content .hero-enter:nth-child(2).in { transition-delay: 0.18s; }
.hero-content .hero-enter:nth-child(3).in { transition-delay: 0.36s; }
.hero-content .hero-enter:nth-child(4).in { transition-delay: 0.54s; }
.hero-visual.hero-enter.in { transition-delay: 0.4s; }

/* Hero-Enter-Animation (per JS via .in class) */
.hero-enter {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(8px);
}

.hero-enter.in {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition:
        opacity var(--dur-hero-enter) var(--ease),
        transform var(--dur-hero-enter) var(--ease),
        filter var(--dur-hero-enter) var(--ease);
}

.hero-enter.settled {
    filter: none;     /* GPU-Layer komplett dropping */
}

.hero-content .hero-enter:nth-child(1).in { transition-delay: 0s; }
.hero-content .hero-enter:nth-child(2).in { transition-delay: 0.18s; }
.hero-content .hero-enter:nth-child(3).in { transition-delay: 0.36s; }
.hero-content .hero-enter:nth-child(4).in { transition-delay: 0.54s; }

/* Trust-Bar — Atelier-Plakette (Variante 1):
   keine Bar, kein Frosted-Glass, kein Border. Direkt aufs Bild als
   eingravierte Inschrift mit Fraunces Small Caps und vertikalen
   Walnuss-Trennern statt runder E-Commerce-Dots. */
.hero-trust {
    position: absolute;
    left: 0; right: 0;
    bottom: clamp(1.75rem, 3vh, 2.75rem);
    z-index: 4;
    padding: 0;
    border: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.hero-trust-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* override container max-width damit die Plakette einzeilig passt */
    max-width: none;
    gap: 0 clamp(1.6rem, 3.2vw, 2.8rem);
    row-gap: 0.55rem;
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 14, 'wght' 460, 'SOFT' 30;
    font-size: clamp(0.82rem, 1vw, 0.92rem);
    font-weight: normal;
    font-variant-caps: small-caps;
    font-feature-settings: 'smcp' 1, 'kern' 1;
    letter-spacing: 0.18em;
    color: color-mix(in oklch, var(--text) 88%, var(--accent-deep));
    text-shadow:
        0 1px 0 color-mix(in oklch, white 28%, transparent),
        0 0 14px color-mix(in oklch, var(--bg-base) 70%, transparent);
}

.hero-trust-item {
    white-space: nowrap;
    /* leichte Vertikal-Korrektur — Small Caps sitzen optisch hoch */
    transform: translateY(0.02em);
}

/* Trenner: schmale vertikale Linie statt runder Dot */
.hero-trust-dot {
    width: 1px;
    height: 14px;
    border-radius: 0;
    background: var(--accent);
    opacity: 0.42;
}


/* ─── 11. Editorial-Section ──────────────────────────────────── */

.editorial-section {
    padding-block: clamp(5rem, 9vw, 9rem);
    /* Holz-Maserung Pattern als subtiler Hintergrund — verbindet die Section
       visuell mit dem Werkstatt-Thema, ohne aufdringlich zu sein.
       95deg-Winkel + 4% Holz-Tint + breite Streifen = sanfte Maserung. */
    background-image:
        repeating-linear-gradient(95deg,
            transparent 0,
            transparent 8px,
            color-mix(in oklch, var(--holz-warm) 4%, transparent) 8px,
            color-mix(in oklch, var(--holz-warm) 4%, transparent) 9px,
            transparent 9px,
            transparent 22px);
}

/* Editorial-Block — Bild links, Text rechts. Bild kleiner als die ehemalige
   Bühne (max-height ~440px statt 615px) damit es nicht mit Hero-Blob und
   Akkordeon-Streifen visuell konkurriert. */
.editorial-block {
    max-width: 1100px;
    margin-inline: auto;
}

.editorial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

@media (min-width: 800px) {
    .editorial-grid {
        grid-template-columns: 0.85fr 1fr;
    }
}

.editorial-img {
    position: relative;
    aspect-ratio: 4/5;
    max-width: 360px;
    width: 100%;
    margin-inline: auto;
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    transform: rotate(-1deg);
    transition: box-shadow 0.6s var(--ease);
}

.editorial-img:hover {
    box-shadow: var(--depth-hover), var(--depth-glow);
}

@media (min-width: 800px) {
    .editorial-img {
        margin-inline: 0;
    }
}

.editorial-img-frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    /* Walnuss-Color-Grade: leicht entsättigt, mehr Kontrast, dezenter Sepia-Hauch
       — zieht das Bild in die Walnuss-Welt der Seite ohne Duotone-Look. */
    filter: saturate(0.88) contrast(1.10) brightness(1.03) sepia(0.06);
    transition: transform 0.8s var(--ease), filter 0.6s var(--ease);
}

.editorial-img:hover .editorial-img-frame {
    transform: scale(1.04);
    filter: saturate(1.0) contrast(1.12) brightness(1.06) sepia(0.04);
}

/* Vignette + Walnuss-Tönung — multiply-blended über das Bild.
   Diagonal von oben-links nach unten-rechts: subtle Walnuss-Schatten.
   Plus radiale Vignette die den Blick aufs Gesicht zieht. */
.editorial-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 110% 105% at 52% 38%,
            transparent 48%,
            rgba(20, 14, 8, 0.30) 100%),
        linear-gradient(165deg,
            transparent 55%,
            color-mix(in oklch, var(--walnuss-deep) 24%, transparent) 100%);
    mix-blend-mode: multiply;
    transition: opacity 0.6s var(--ease);
}

.editorial-img:hover .editorial-img-frame::after {
    opacity: 0.78;
}

/* Glass-Highlight — bleibt über allem (z-index 2) */
.editorial-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
}

.editorial-text {
    min-width: 0;
}

.editorial-text .label {
    margin-bottom: 1rem;
}

.editorial-text h2 {
    margin: 0 0 1.5rem 0;
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    line-height: 1.05;
}

/* Pull-Quote — typografischer Moment statt Lead-Absatz */
.editorial-quote {
    margin: 0 0 2rem 0;
    padding: 0 0 0 1.5rem;
    border-left: 2px solid var(--accent-40);
    position: relative;
}

.editorial-quote p {
    font-family: var(--font-serif);
    font-style: italic;
    font-variation-settings: 'opsz' 48, 'wght' 380, 'SOFT' 90;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    line-height: 1.35;
    color: var(--accent-deep);
    margin: 0 0 1rem 0;
    text-wrap: balance;
}

.editorial-quote cite {
    display: block;
    font-style: normal;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.editorial-body {
    font-size: 1.02rem;
    line-height: 1.72;
    color: var(--text-body);
    margin: 0 0 1.4rem 0;
}

.editorial-actions {
    margin-top: 2rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Photo-Marquee — 8 Premium-Projekte endlos rechts → links durchlaufend.
   Full-bleed außerhalb des .container damit Marquee über die volle
   Viewport-Breite läuft (mehr Tiles parallel sichtbar = stärkerer Loop-Effekt).
   Pattern aus Kratzer Reviews (siehe CLAUDE.md). Items doubled in HTML
   für nahtlosen Loop via translateX(0 → -50%). Kein hover-pause, nicht
   klickbar. Tile-Größe ≥ alte Strip-Squares (~355px). */
.editorial-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: clamp(2.5rem, 4vw, 4rem);
    /* Edge-Fade über mask-image — Bei full-bleed schmaler (3% statt 5%) damit
       weniger Pixel weggebleicht werden und mehr aktive Tile-Fläche bleibt. */
    mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
    /* Padding-Buffer damit drop-shadows der Tiles oben/unten nicht beschnitten werden */
    padding: 1rem 0;
}

.editorial-marquee-track {
    display: flex;
    gap: clamp(0.7rem, 1.2vw, 1rem);
    animation: editorial-marquee-scroll 60s linear infinite;
    width: max-content;
    will-change: transform;
}

@keyframes editorial-marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }   /* Hälfte des doubled tracks = exakt erste Sequenz weg */
}

.editorial-marquee-img {
    flex-shrink: 0;
    /* Gleiche Größe wie ursprüngliche 3-Tile-Strip (1094px / 3 ≈ 355px) damit
       Marquee-Tiles nicht kleiner wirken als die statische Variante davor. */
    width: clamp(280px, 30vw, 380px);
    aspect-ratio: 1;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    box-shadow: var(--depth-rest);
    isolation: isolate;
    position: relative;
    overflow: hidden;
}

/* Glass-Highlight diagonal */
.editorial-marquee-img::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

/* Subtle Bottom-Gradient für Label-Lesbarkeit */
.editorial-marquee-img::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to top,
        rgba(20, 14, 8, 0.55) 0%,
        rgba(20, 14, 8, 0) 40%);
    pointer-events: none;
    z-index: 1;
}

.editorial-marquee-label {
    position: absolute;
    bottom: 0.85rem;
    left: 0.95rem;
    z-index: 2;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bg-base);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

@media (max-width: 540px) {
    .editorial-marquee-img {
        width: 200px;
    }
}

@media (max-width: 540px) {
    .editorial-header {
        gap: 0.85rem;
    }
    .editorial-quote p {
        font-size: 1.2rem;
    }
}


/* ─── 12. Section-Connector ──────────────────────────────────── */

.section-connector {
    height: 96px;
    width: 1px;
    margin: 0 auto;
    background: linear-gradient(to bottom,
        transparent,
        var(--accent-25) 30%,
        var(--accent-25) 70%,
        transparent);
    position: relative;
}

.section-connector::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 14px var(--accent-40);
}


/* ─── 13. Disziplinen-Akkordeon (5 Tiles, expandable Mini-Cards) ─ */

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

.disziplinen-section > .container {
    max-width: 1300px;
}

.acc-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Tile — full-width Reihe mit BG-Bild + Title + Count + Pfeil */
.acc-tile {
    position: relative;
    width: 100%;
    min-height: 110px;
    padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
    border: none;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: var(--depth-rest);
    transition: box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
    -webkit-appearance: none;
    appearance: none;
}

.acc-tile-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: saturate(1.04) brightness(0.85);
    transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}

.acc-tile-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to right,
        rgba(20, 14, 8, 0.72) 0%,
        rgba(20, 14, 8, 0.55) 45%,
        rgba(20, 14, 8, 0.40) 100%);
}

.acc-tile-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.acc-tile-title {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 36, 'wght' 380, 'SOFT' 70;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    line-height: 1.1;
    color: var(--bg-base);
    margin: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.acc-tile-count {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--bg-base) 80%, transparent);
}

.acc-tile-arrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: linear-gradient(to bottom,
        rgba(240, 230, 216, 0.16),
        rgba(240, 230, 216, 0.06));
    border: 1px solid rgba(240, 230, 216, 0.22);
    backdrop-filter: blur(8px);
    color: var(--bg-base);
    flex-shrink: 0;
}
.acc-tile-arrow svg {
    transition: transform 0.55s var(--ease);
}

/* Glass-Highlight (CLAUDE.md Tile-Standard) */
.acc-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--glass-highlight);
    pointer-events: none;
}

/* Hover-Hint (Klick-only Trigger, aber visueller Vorgeschmack auf Hover) */
.acc-tile:hover {
    box-shadow: var(--depth-hover), var(--depth-glow);
}
.acc-tile:hover .acc-tile-bg {
    transform: scale(1.04);
    filter: saturate(1.1) brightness(0.92);
}
.acc-tile:hover .acc-tile-arrow svg {
    transform: translateX(3px);
}

/* Open-State: Pfeil rotiert 90° (zeigt nach unten), Tile bleibt visuell offen */
.acc-tile[aria-expanded="true"] {
    box-shadow: var(--depth-hover), var(--depth-glow);
}
.acc-tile[aria-expanded="true"] .acc-tile-arrow svg {
    transform: rotate(90deg);
}
.acc-tile[aria-expanded="true"]:hover .acc-tile-arrow svg {
    transform: rotate(90deg);     /* Hover-translate weg, bleibt rotated */
}

/* Panel — collapsed/expanded via max-height (JS setzt scrollHeight).

   KRITISCH: padding-block muss 0 auf .acc-panel sein. Mit
   box-sizing: border-box klampt der Browser offsetHeight beim Schließen
   bei max(padding-block-total, max-height). D.h. wenn padding-block 64px
   wäre, würde die Animation visuell bei 64px "frieren" und dann beim
   Setzen von [hidden] (padding-block:0) snappen — das war der "freeze +
   snap"-Bug. Lösung: padding-block lebt auf .acc-cards (Inner-Container),
   wird via overflow:hidden des Panels natürlich mit-clipped während der
   Animation. */
.acc-panel {
    overflow: hidden;
    max-height: 0;
    padding-inline: 1.75rem;
    padding-block: 0;
    margin-inline: -1.75rem;
    transition: max-height 0.55s var(--ease), opacity 0.4s var(--ease);
    opacity: 0;
}
.acc-panel[data-open="true"] {
    opacity: 1;
}
.acc-panel[hidden] {
    display: block !important;     /* override [hidden] damit Animation läuft */
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Mini-Cards — Editorial-Card statt Pill.
   padding-block hier statt auf .acc-panel — sonst Border-Box-Klampe-Bug
   beim Schließen (siehe oben). */
.acc-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    padding-block: 1.5rem 2.5rem;
}
@media (min-width: 600px) {
    .acc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .acc-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .acc-cards { grid-template-columns: repeat(4, 1fr); }
}

.acc-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem;
    border-radius: 12px;
    background: linear-gradient(to bottom,
        var(--bg-paper),
        var(--bg-deeper));
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

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

.acc-card-thumb {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s var(--ease);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.acc-card-name {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 24, 'wght' 380, 'SOFT' 50;
    font-size: 1rem;
    color: var(--text);
    line-height: 1.15;
}

.acc-card-arrow {
    position: relative;
    z-index: 1;
    color: var(--accent);
    flex-shrink: 0;
    transition: transform 0.4s var(--ease);
}

.acc-card:hover {
    box-shadow: var(--depth-hover), var(--depth-glow);
}
.acc-card:hover .acc-card-thumb {
    transform: scale(1.05);
}
.acc-card:hover .acc-card-arrow {
    transform: translateX(3px);
    color: var(--accent-deep);
}

/* Spezialitäten-Tile — leicht akzentuiert */
.acc-item-spez .acc-tile-overlay {
    background: linear-gradient(to right,
        rgba(20, 14, 8, 0.78) 0%,
        rgba(20, 14, 8, 0.50) 50%,
        color-mix(in oklch, var(--accent-deep) 38%, transparent) 100%);
}

/* Mini-Cards bekommen KEINE eigene Reveal-Animation. Das Panel wächst per
   max-height + overflow:hidden — die Cards werden dadurch natürlich von oben
   nach unten progressiv freigegeben (clip-Reveal), in ihrer nativen Größe.
   Eine zusätzliche translateY+fade Animation auf den Cards würde mit der
   vertikalen Panel-Wachstumsbewegung konkurrieren (zwei vertikale Animations
   gleichzeitig auf demselben Pfad) und das Ergebnis als "abgehakt" wirken
   lassen. Weniger ist hier butterweicher. */


/* Material-Strip — kompakte Leiste am Ende der Disziplinen-Section */
.material-strip {
    margin-top: clamp(3rem, 5vw, 4.5rem);
    padding: 1.5rem 1.75rem;
    border-top: 1px solid var(--accent-18);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
}
.material-strip-label {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
}
.material-strip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
}
.material-strip-list li {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 24, 'wght' 380, 'SOFT' 60;
    font-size: 1.05rem;
    color: var(--text);
    position: relative;
}
.material-strip-list li:not(:last-child)::after {
    content: '·';
    position: absolute;
    right: -0.95rem;
    top: 50%;
    transform: translateY(-55%);
    color: var(--accent-40);
    font-weight: 400;
}
@media (max-width: 600px) {
    .material-strip {
        padding: 1.25rem 1rem;
    }
    .material-strip-list {
        gap: 0.4rem 1.2rem;
    }
    .material-strip-list li {
        font-size: 0.95rem;
    }
}


/* ─── 14. Spezialitäten-Sektor (ed-card 200%-Slide) ──────────── */

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

.spez-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 1400px;
    margin-inline: auto;
}

@media (min-width: 700px) {
    .spez-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(280px, auto);
        gap: 1.25rem;
    }
    .ed-card-large {
        grid-column: span 2;
        grid-row: span 2;
        min-height: 580px;
    }
    .ed-card-wide {
        grid-column: span 2;
    }
}

.ed-card {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-deeper);
    box-shadow: var(--depth-rest);
    transition: transform var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
    text-decoration: none;
}

@media (min-width: 700px) {
    .ed-card { aspect-ratio: auto; min-height: 280px; }
    .ed-card-wide { aspect-ratio: auto; min-height: 280px; }
}

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

.ed-card:hover {
    box-shadow: var(--depth-hover), var(--depth-glow);
}

.ed-card-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
    transition: transform 1.2s var(--ease),
                filter var(--dur-medium) var(--ease);
    filter: saturate(1) contrast(1.05);
}

.ed-card:hover .ed-card-img {
    transform: scale(1.06);
}

.ed-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
        color-mix(in oklch, var(--text) 82%, transparent) 0%,
        color-mix(in oklch, var(--text) 50%, transparent) 40%,
        color-mix(in oklch, var(--text) 15%, transparent) 75%,
        transparent 100%);
    transition: opacity var(--dur-medium) var(--ease);
}

/* 200%-Slide-Container */
.ed-card-slide {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.5s var(--ease-slide);
}

.ed-card:hover .ed-card-slide {
    transform: translateX(-50%);
}

.ed-card-front,
.ed-card-back {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.5rem, 2.6vw, 2.2rem);
    color: white;
}

.ed-card-front {
    position: relative;
}

.ed-card-num {
    position: absolute;
    top: clamp(1.5rem, 2.6vw, 2.2rem);
    right: clamp(1.5rem, 2.6vw, 2.2rem);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.5rem, 2.8vw, 2.4rem);
    color: color-mix(in oklch, white 55%, transparent);
}

.ed-card-front h3 {
    color: white;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin-bottom: 0.5rem;
}

.ed-card-front p {
    color: color-mix(in oklch, white 80%, transparent);
    font-size: clamp(0.86rem, 1.1vw, 0.95rem);
    line-height: 1.55;
    margin-bottom: 0.85rem;
    max-width: 360px;
}

.ed-card-tease {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--walnuss-glow) 90%, white);
    background: color-mix(in oklch, white 10%, transparent);
    border: 1px solid color-mix(in oklch, white 22%, transparent);
}

.ed-card-back {
    background: linear-gradient(135deg,
        color-mix(in oklch, var(--walnuss-deep) 92%, transparent),
        color-mix(in oklch, var(--walnuss) 80%, transparent));
    backdrop-filter: blur(8px);
    align-items: flex-start;
}

.ed-card-back-num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.5rem, 2.8vw, 2.4rem);
    color: color-mix(in oklch, var(--walnuss-glow) 82%, white);
    margin-bottom: 0.85rem;
    align-self: flex-end;
}

.ed-card-back-headline {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 460;
    line-height: 1.2;
    color: white;
    margin-bottom: 1rem;
    max-width: 360px;
}

.ed-card-back-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.3rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 500;
    color: white;
    background: color-mix(in oklch, white 18%, transparent);
    border: 1px solid color-mix(in oklch, white 30%, transparent);
    backdrop-filter: blur(10px);
    transition: gap var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}

.ed-card:hover .ed-card-back-cta { gap: 0.85rem; background: color-mix(in oklch, white 26%, transparent); }
.ed-card-back-cta svg { transition: transform var(--dur-fast) var(--ease); }
.ed-card:hover .ed-card-back-cta svg { transform: translateX(3px); }

/* Mobile: Front-Panel always visible, Back-Panel als zweiter-Tap-Reveal */
@media (max-width: 699px), (hover: none) {
    .ed-card.tap-active .ed-card-slide { transform: translateX(-50%); }
}


/* ─── 15. Material-Palette ───────────────────────────────────── */

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

.material-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.85rem;
    max-width: 1300px;
    margin-inline: auto;
}

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

@media (max-width: 700px) {
    .material-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0.75rem;
        padding-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .material-grid::-webkit-scrollbar { display: none; }
    .material-swatch {
        flex: 0 0 160px;
        scroll-snap-align: center;
    }
}

.material-swatch {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-deeper);
    box-shadow: var(--depth-rest);
    transition: transform var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
}

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

.material-swatch:hover {
    transform: translateY(-3px);
    box-shadow: var(--depth-hover), var(--depth-glow);
}

.material-swatch-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: transform var(--dur-slow) var(--ease),
                filter var(--dur-medium) var(--ease);
}

/* Holz — Maserung */
.material-swatch-holz .material-swatch-visual {
    background:
        repeating-linear-gradient(95deg,
            color-mix(in oklch, var(--holz-warm) 92%, transparent) 0px,
            color-mix(in oklch, var(--holz-warm) 92%, transparent) 6px,
            color-mix(in oklch, var(--holz-deep) 88%, transparent) 6px,
            color-mix(in oklch, var(--holz-deep) 88%, transparent) 7px,
            color-mix(in oklch, var(--holz-warm) 88%, transparent) 7px,
            color-mix(in oklch, var(--holz-warm) 88%, transparent) 18px),
        linear-gradient(180deg,
            color-mix(in oklch, var(--holz-warm) 80%, white),
            var(--holz-deep));
}
.material-swatch-holz:hover .material-swatch-visual {
    filter: hue-rotate(8deg) saturate(1.15);
}

/* Glas — Reflektion */
.material-swatch-glas .material-swatch-visual {
    background:
        linear-gradient(105deg,
            color-mix(in oklch, white 88%, transparent) 0%,
            color-mix(in oklch, white 30%, transparent) 28%,
            color-mix(in oklch, oklch(86% 0.020 220) 65%, transparent) 50%,
            color-mix(in oklch, oklch(80% 0.030 230) 65%, transparent) 72%,
            color-mix(in oklch, oklch(72% 0.040 235) 70%, transparent) 100%);
}
.material-swatch-glas:hover .material-swatch-visual {
    background-position: 100% 0;
    transform: scale(1.04);
}

/* Filz — Faltige Punkte */
.material-swatch-filz .material-swatch-visual {
    background:
        radial-gradient(circle at 25% 30%, color-mix(in oklch, oklch(58% 0.090 28) 90%, transparent) 0, transparent 1.5px),
        radial-gradient(circle at 75% 60%, color-mix(in oklch, oklch(58% 0.090 28) 80%, transparent) 0, transparent 1.5px),
        radial-gradient(circle at 50% 80%, color-mix(in oklch, oklch(58% 0.090 28) 70%, transparent) 0, transparent 2px),
        radial-gradient(circle at 15% 70%, color-mix(in oklch, oklch(58% 0.090 28) 75%, transparent) 0, transparent 1.5px),
        radial-gradient(circle at 85% 25%, color-mix(in oklch, oklch(58% 0.090 28) 85%, transparent) 0, transparent 2px),
        oklch(64% 0.110 28);
    background-size: 12px 12px, 14px 14px, 16px 16px, 10px 10px, 18px 18px, auto;
}
.material-swatch-filz:hover .material-swatch-visual {
    transform: scale(1.06);
    filter: brightness(1.05);
}

/* Aluminium — Brushed */
.material-swatch-alu .material-swatch-visual {
    background:
        repeating-linear-gradient(90deg,
            color-mix(in oklch, oklch(78% 0.005 250) 90%, transparent) 0px,
            color-mix(in oklch, oklch(86% 0.005 250) 90%, transparent) 0.5px,
            color-mix(in oklch, oklch(82% 0.005 250) 90%, transparent) 1.2px,
            color-mix(in oklch, oklch(74% 0.005 250) 90%, transparent) 2.5px),
        linear-gradient(180deg,
            oklch(86% 0.005 250),
            oklch(72% 0.005 250));
}
.material-swatch-alu:hover .material-swatch-visual {
    background-position: 100px 0, 0 0;
    transform: scale(1.02);
}

/* Metall — Stahl-Schimmer */
.material-swatch-metall .material-swatch-visual {
    background:
        linear-gradient(135deg,
            oklch(45% 0.010 240) 0%,
            oklch(62% 0.010 240) 35%,
            oklch(72% 0.010 240) 50%,
            oklch(58% 0.010 240) 65%,
            oklch(42% 0.010 240) 100%);
}
.material-swatch-metall:hover .material-swatch-visual {
    filter: brightness(1.1) contrast(1.05);
    transform: scale(1.02);
}

/* Edelstahl — gebürstet horizontal */
.material-swatch-edelstahl .material-swatch-visual {
    background:
        repeating-linear-gradient(0deg,
            color-mix(in oklch, oklch(72% 0.005 250) 92%, transparent) 0px,
            color-mix(in oklch, oklch(78% 0.005 250) 92%, transparent) 0.5px,
            color-mix(in oklch, oklch(74% 0.005 250) 92%, transparent) 1.5px,
            color-mix(in oklch, oklch(68% 0.005 250) 92%, transparent) 3px),
        linear-gradient(135deg,
            oklch(78% 0.005 250),
            oklch(62% 0.005 250));
}
.material-swatch-edelstahl:hover .material-swatch-visual {
    background-position: 0 100px, 0 0;
}

/* Shoji-Papier — durchschienen */
.material-swatch-shoji .material-swatch-visual {
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%,
            color-mix(in oklch, oklch(96% 0.012 80) 100%, transparent) 0%,
            color-mix(in oklch, oklch(92% 0.018 78) 96%, transparent) 60%,
            color-mix(in oklch, oklch(86% 0.024 76) 88%, transparent) 100%);
    position: relative;
}
.material-swatch-shoji .material-swatch-visual::after {
    content: '';
    position: absolute;
    inset: 14% 8%;
    background:
        linear-gradient(0deg,
            transparent 32%,
            color-mix(in oklch, var(--holz-deep) 26%, transparent) 33%,
            color-mix(in oklch, var(--holz-deep) 26%, transparent) 34%,
            transparent 35%,
            transparent 65%,
            color-mix(in oklch, var(--holz-deep) 26%, transparent) 66%,
            color-mix(in oklch, var(--holz-deep) 26%, transparent) 67%,
            transparent 68%),
        linear-gradient(90deg,
            transparent 32%,
            color-mix(in oklch, var(--holz-deep) 26%, transparent) 33%,
            color-mix(in oklch, var(--holz-deep) 26%, transparent) 34%,
            transparent 35%,
            transparent 65%,
            color-mix(in oklch, var(--holz-deep) 26%, transparent) 66%,
            color-mix(in oklch, var(--holz-deep) 26%, transparent) 67%,
            transparent 68%);
    border: 1px solid color-mix(in oklch, var(--holz-deep) 35%, transparent);
}
.material-swatch-shoji:hover .material-swatch-visual {
    filter: brightness(1.05);
}

.material-swatch-meta {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 3;
    padding: 1rem;
    background: linear-gradient(to top,
        color-mix(in oklch, var(--bg-base) 88%, transparent) 0%,
        color-mix(in oklch, var(--bg-base) 64%, transparent) 60%,
        transparent 100%);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.material-swatch-num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.7rem;
    color: var(--accent);
    letter-spacing: 0.08em;
}

.material-swatch-name {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 460;
    color: var(--text);
    line-height: 1.1;
}

.material-swatch-detail {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}


/* ─── 16. USP-Section ────────────────────────────────────────── */

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

/* Kratzer-Pattern: text-only USP-Points mit Walnuss-Dot-Akzent.
   Kein Card-Container, keine BG/Border/Shadow. Pure Typografie auf der
   Section-Image-Atmosphäre. 4 Items in 2×2 Grid. Walnuss-Dot mit Accent-
   Glow als einziger Graphic-Akzent. Steinberger-Typografie: Fraunces Serif
   Headlines (statt Kratzers Sans) damit der editoriale Charakter erhalten
   bleibt. */
.usp-points {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: clamp(2.5rem, 4.5vw, 4rem);
    max-width: var(--container-narrow);
    margin-inline: auto;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

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

.usp-point {
    position: relative;
    padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.5rem, 2.5vw, 2rem);
    border-radius: 0 8px 8px 0;
    isolation: isolate;
    overflow: hidden;
    /* Subtiler Inset-Shadow für minimale Tiefe — keine harten Card-Edges,
       keine outer-shadow. Item wirkt "ins Material gepresst". */
    box-shadow:
        inset 0 1px 1px color-mix(in oklch, white 18%, transparent),
        inset 0 -1px 1px color-mix(in oklch, var(--text) 4%, transparent);
}

/* Vertical Walnuss-Akzent-Line links — Editorial-Pull-Quote-Bar.
   Volle Item-Höhe, 3px breit, walnuss-uniform für alle 4 Items
   (Akzent-Line ist das verbindende Graphic-Motiv, Material variiert). */
.usp-point::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    background: linear-gradient(to bottom,
        var(--accent) 0%,
        var(--accent) 70%,
        var(--accent-40) 100%);
    box-shadow: 0 0 12px var(--accent-25);
    border-radius: 2px;
    z-index: 2;
}

/* Material-Patterns — pro USP eine eigene Material-Welt.
   Pattern als ::after damit es z-index unter Content (z-index 0) liegt.
   Subtile opacity (~10-18%) damit Text vollständig lesbar bleibt. */
.usp-point > * {
    position: relative;
    z-index: 1;
}

/* USP 01: Walnuss-Holzmaserung — diagonale wood-grain Linien */
.usp-point--wood {
    background: linear-gradient(to right,
        color-mix(in oklch, var(--walnuss-warm) 10%, transparent) 0%,
        color-mix(in oklch, var(--walnuss-warm) 4%, transparent) 60%,
        color-mix(in oklch, var(--walnuss-warm) 1%, transparent) 100%);
}
.usp-point--wood::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        repeating-linear-gradient(82deg,
            transparent 0,
            transparent 7px,
            color-mix(in oklch, var(--walnuss-deep) 10%, transparent) 7px,
            color-mix(in oklch, var(--walnuss-deep) 10%, transparent) 8px,
            transparent 8px,
            transparent 22px),
        repeating-linear-gradient(82deg,
            transparent 0,
            transparent 33px,
            color-mix(in oklch, var(--walnuss) 7%, transparent) 33px,
            color-mix(in oklch, var(--walnuss) 7%, transparent) 34px,
            transparent 34px,
            transparent 55px);
    pointer-events: none;
    border-radius: inherit;
}

/* USP 02: Paper-Texture — radiale weiche Tonungen wie altes Papier */
.usp-point--paper {
    background:
        radial-gradient(ellipse at 25% 30%,
            color-mix(in oklch, var(--bg-deeper) 50%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse at 75% 70%,
            color-mix(in oklch, var(--bg-paper) 40%, transparent) 0%,
            transparent 65%),
        linear-gradient(to right,
            color-mix(in oklch, var(--bg-paper) 60%, transparent),
            color-mix(in oklch, var(--bg-paper) 20%, transparent));
}
.usp-point--paper::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Subtle paper-grain via fine noise-like cross-hatch */
    background:
        repeating-linear-gradient(45deg,
            transparent 0,
            transparent 2px,
            color-mix(in oklch, var(--text-muted) 3%, transparent) 2px,
            color-mix(in oklch, var(--text-muted) 3%, transparent) 3px),
        repeating-linear-gradient(-45deg,
            transparent 0,
            transparent 2px,
            color-mix(in oklch, var(--text-muted) 2%, transparent) 2px,
            color-mix(in oklch, var(--text-muted) 2%, transparent) 3px);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.6;
}

/* USP 03: Multi-Material — vertikale Material-Streifen, je 25%
   (Walnuss / Holz-Shimmer / Brass-Glow / Holz-Deep) */
.usp-point--mix {
    background: linear-gradient(to right,
        color-mix(in oklch, var(--walnuss-warm) 10%, transparent) 0%,
        color-mix(in oklch, var(--walnuss-warm) 4%, transparent) 100%);
}
.usp-point--mix::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        repeating-linear-gradient(0deg,
            color-mix(in oklch, var(--walnuss-warm) 14%, transparent) 0%,
            color-mix(in oklch, var(--walnuss-warm) 14%, transparent) 24%,
            color-mix(in oklch, var(--holz-shimmer) 12%, transparent) 25%,
            color-mix(in oklch, var(--holz-shimmer) 12%, transparent) 49%,
            color-mix(in oklch, var(--accent-glow) 10%, transparent) 50%,
            color-mix(in oklch, var(--accent-glow) 10%, transparent) 74%,
            color-mix(in oklch, var(--walnuss-deep) 10%, transparent) 75%,
            color-mix(in oklch, var(--walnuss-deep) 10%, transparent) 100%);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.55;
}

/* USP 04: Brushed Brass — feine horizontale Linien + warmer Diagonal-
   Gradient (gold/brass-Anmutung) */
.usp-point--brass {
    background: linear-gradient(135deg,
        color-mix(in oklch, var(--accent-glow) 14%, transparent) 0%,
        color-mix(in oklch, var(--holz-shimmer) 10%, transparent) 50%,
        color-mix(in oklch, var(--accent-glow) 8%, transparent) 100%);
}
.usp-point--brass::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: repeating-linear-gradient(90deg,
        transparent 0,
        transparent 0.5px,
        color-mix(in oklch, var(--accent-glow) 22%, transparent) 0.5px,
        color-mix(in oklch, var(--accent-glow) 22%, transparent) 1.5px,
        transparent 1.5px,
        transparent 2.5px);
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.45;
}

.usp-point h4 {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 2vw, 1.55rem);
    font-variation-settings: 'opsz' 36, 'wght' 380, 'SOFT' 70;
    color: var(--text);
    margin-bottom: 0.7rem;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.usp-point p {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-body);
}

/* Section-Image-Underlay — Hellraum-adaptiert.
   Kratzer nutzt invert(1) auf dunklem BG. Steinberger ist Hellraum (cream),
   da würden invertierte (helle) Linien verschwinden. Stattdessen:
   - kein invert (dunkle Plan-Linien bleiben dunkel)
   - grayscale (entfernt Foto-Farbe)
   - sehr niedrige opacity damit auf cream BG nur subtil durchscheint
   Mask-Edge-Fade gleich wie Kratzer (top/bottom 120px linear-gradient). */
.section-image {
    position: relative;
}

.section-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--section-image);
    background-size: cover;
    background-position: center;
    /* Kein invert — Hellraum braucht dunkle Linien auf cream */
    filter: grayscale(1) contrast(1.05);
    opacity: 0.10;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 120px,
        black calc(100% - 120px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 120px,
        black calc(100% - 120px),
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
}

/* WICHTIG: KEIN `.section-image > * { position: relative }` Pattern wie
   bei Kratzer — das überschreibt position:absolute der atmo-beam Decorative-
   Elemente und drückt sie in den Flow (Bug: 630px ungewolltes Top-Padding).
   Bei Steinberger lifted `.atmo-room > .container { position: relative;
   z-index: 1 }` schon den Content über das ::before-Underlay. */


/* ─── 16c. Reviews-Section (Kundenstimmen — Hastreiter-Pattern 1:1) ──
   Lokal überschriebene Tokens: Honig-Gold + Hastreiter-Rot Akzent +
   fast-weißer Surface BG. Diese Section bricht bewusst das Walnuss-Schema —
   identisches Look-and-Feel zur Hastreiter-Stimmen-Section. */

.reviews-section {
    /* Lokale Hastreiter-Tokens — überschreiben die Walnuss-Tokens nur in
       dieser Section + cascading auf alle Children. */
    --honig:        oklch(78% 0.130 80);
    --holz:         oklch(48% 0.080 50);
    --accent:       oklch(58% 0.180 28);     /* Hastreiter-Rot */
    --accent-15:    color-mix(in oklch, var(--accent) 15%, transparent);
    --accent-18:    color-mix(in oklch, var(--accent) 18%, transparent);
    --accent-25:    color-mix(in oklch, var(--accent) 25%, transparent);
    --accent-60:    color-mix(in oklch, var(--accent) 60%, transparent);
    --bg-surface:   oklch(99% 0.014 80);
    --border-soft:  color-mix(in oklch, var(--text) 6%, transparent);
    --depth-rest:   0 8px 24px 0 color-mix(in oklch, var(--holz) 18%, transparent);
    --depth-hover:  0 14px 36px 0 color-mix(in oklch, var(--holz) 26%, transparent);
    --glass-highlight: linear-gradient(135deg,
        color-mix(in oklch, white 35%, transparent) 0%,
        color-mix(in oklch, white 0%, transparent) 30%,
        color-mix(in oklch, white 0%, transparent) 70%,
        color-mix(in oklch, var(--honig) 12%, transparent) 100%);
    --radius:       14px;

    padding-block: var(--section-pad);
    position: relative;
    isolation: isolate;
}

@supports (color: color(display-p3 1 0 0)) {
    @media (color-gamut: p3) {
        .reviews-section {
            --accent: color(display-p3 0.78 0.20 0.16);
            --honig:  color(display-p3 0.86 0.71 0.42);
        }
    }
}

/* Atmo-Underlay: plan-bleistift.jpg unter der ganzen Section.
   Selbe Filter-Familie + Mask wie Hastreiter — sepia + multiply,
   oben+unten ausgefadet damit die Section-Übergänge weich bleiben. */
.reviews-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('images/atmo/plan-bleistift.jpg');
    background-size: cover;
    background-position: center 45%;
    filter: sepia(0.5) saturate(0.4) brightness(1.4) contrast(0.92);
    opacity: 0.16;
    mix-blend-mode: multiply;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 240px,
        black calc(100% - 280px),
        transparent 100%);
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 240px,
        black calc(100% - 280px),
        transparent 100%);
    z-index: 0;
    pointer-events: none;
}

.reviews-section > .container {
    position: relative;
    z-index: 1;
}

/* Trust-Badge unter H2 — Pill mit 5 Sternen + Text + Pfeil. */
.reviews-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.4rem;
    padding: 0.55rem 1rem 0.55rem 0.9rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, var(--honig) 8%, transparent));
    border: 1px solid color-mix(in oklch, var(--accent) 18%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 60%, transparent),
        inset 0 -1px 0 color-mix(in oklch, var(--holz) 14%, transparent),
        0 6px 20px color-mix(in oklch, var(--holz) 6%, transparent);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.reviews-badge-stars {
    display: inline-flex;
    gap: 1px;
    color: var(--accent);
}
.reviews-badge-stars svg { display: block; }
.reviews-badge-text {
    color: var(--text-body);
    letter-spacing: 0.005em;
}
.reviews-badge-arrow {
    color: var(--accent);
    font-weight: 500;
    transition: transform var(--dur-fast) var(--ease);
    margin-left: 0.2rem;
}
.reviews-badge:hover {
    border-color: var(--accent-60);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 70%, transparent),
        0 6px 16px color-mix(in oklch, var(--accent) 18%, transparent);
}
.reviews-badge:hover .reviews-badge-arrow { transform: translateX(3px); }
.reviews-badge:hover .reviews-badge-text { color: var(--text); }

/* Cards-Grid: zentriert, max 2 Spalten. */
.reviews-grid {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 880px;
    margin-inline: auto;
}

@media (max-width: 720px) {
    .reviews-grid { grid-template-columns: 1fr; max-width: 480px; }
}

.review-card {
    padding: 1.6rem;
    border-radius: var(--radius);
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    box-shadow: var(--depth-rest);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    position: relative;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.review-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}
.review-card > * { position: relative; z-index: 1; }

.review-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--depth-hover);
}

.review-source {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.review-stars {
    color: var(--accent);
    letter-spacing: 0.1em;
    font-size: 1rem;
}
.review-source-label { font-weight: 500; }

.review-text {
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.55;
    flex-grow: 1;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.4rem;
}
.review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, var(--honig), var(--holz));
    color: white;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1rem;
    flex-shrink: 0;
}
.review-author-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}
.review-name {
    font-weight: 500;
    color: var(--text);
    font-size: 0.92rem;
}
.review-date {
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}


/* ─── 17. Kontakt-Teaser ─────────────────────────────────────── */

.kontakt-teaser {
    padding-block: var(--section-pad);
}

.kontakt-teaser-inner {
    text-align: center;
}

.kontakt-teaser h2 {
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    margin-bottom: 1.4rem;
}

.kontakt-teaser-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.6;
    color: var(--text-body);
    max-width: 640px;
    margin: 0 auto 2.4rem;
}

.kontakt-teaser-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.kontakt-teaser-tertiary {
    margin-top: 1rem;
}


/* ─── 18. Footer (Watermark + 4-Col) ─────────────────────────── */

.footer {
    position: relative;
    overflow: hidden;
    padding-block: clamp(4rem, 6vw, 6rem) 2rem;
    background: linear-gradient(to bottom,
        transparent 0%,
        color-mix(in oklch, var(--bg-paper) 100%, transparent) 30%);
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(120px, 20vw, 240px);
    height: 1px;
    background: linear-gradient(to right, transparent, var(--accent-60), transparent);
    z-index: 2;
}

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

.footer-ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0.04;
    z-index: 0;
}

.footer-ghost span {
    font-family: var(--font-serif);
    font-size: clamp(5rem, 14vw, 11rem);
    font-weight: 380;
    color: var(--walnuss-deep);
    letter-spacing: -0.005em;
    line-height: 0.9;
    font-variation-settings: 'opsz' 144, 'wght' 380, 'SOFT' 60;
}

@supports (animation-timeline: view()) {
    @keyframes footer-ghost-enter {
        from { --ghost-progress: 0; }
        to   { --ghost-progress: 1; }
    }
    .footer {
        animation: footer-ghost-enter linear both;
        animation-timeline: view(block);
        animation-range: entry 0% contain 50%;
    }
    .footer-ghost {
        opacity: calc(0.085 * var(--ghost-progress));
        transform: scale(calc(0.86 + 0.14 * var(--ghost-progress)));
    }
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 700px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1.2fr;
        gap: 3rem;
    }
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
    color: var(--text);
}

.footer-about {
    max-width: 320px;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-soft);
}

.footer-heading {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin-bottom: 1rem;
}

.footer-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.footer-list a {
    font-size: 0.92rem;
    color: var(--text-soft);
    transition: color var(--dur-fast) var(--ease),
                padding var(--dur-fast) var(--ease);
}

.footer-list a:hover {
    color: var(--accent-deep);
    padding-left: 0.4rem;
}

.footer-contact {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-soft);
    margin-bottom: 0.85rem;
}

.footer-contact strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.footer-contact a {
    color: var(--accent-deep);
    transition: color var(--dur-fast) var(--ease);
}
.footer-contact a:hover { color: var(--accent); }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border-soft);
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 1rem;
}

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

.footer-legal a {
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease);
}
.footer-legal a:hover { color: var(--accent-deep); }


/* ─── 19. View Transitions ───────────────────────────────────── */

@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;
}

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

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-rev { to { opacity: 0; transform: translateX(3%); } }
@keyframes page-slide-in-rev  { from { opacity: 0; transform: translateX(-3%); } }

/* Intra-document VT (Filter) — root-Slide stumm schalten */
html.intra-vt::view-transition-old(root),
html.intra-vt::view-transition-new(root) {
    animation: none;
}

/* Auf Filter-Subpages (wohnen/schlafen-bad/kueche-einbau/arbeit) die
   scroll-driven atmo-section-flow Animation komplett deaktivieren.

   Problem ohne diese Regel: scroll-driven animation-timeline rechnet
   progress = scrollY / scrollMax. Beim Filter wird die Page kürzer
   (scrollMax kleiner), gleicher scrollY ergibt höheren progress, atmo-state
   springt dunkler. User sieht "vor Filter heller — nach Filter dunkler".

   Lösung: statischer Mid-State (gleicher Wert wie reduced-motion-Fallback).
   Subpage bleibt konstant in der Hellraum-Atmosphäre, kein Filter-Sprung. */
html.has-filter {
    --atmo-hue: 72;
    --atmo-chroma: 0.038;
    --atmo-light: 60%;
    animation: none !important;
}

::view-transition-group(*) {
    animation-duration: 350ms;
    animation-timing-function: ease-out;
}

/* Filter-VT spezifisch: Sections faden gleichzeitig in dichtem Vertikal-
   Stack — Crossfade-Moment summiert opacity additiv → "heller Blitz".
   Während intra-vt sind die Section-Group-Animations sequenziert
   (old fadet schnell aus, new fadet danach ein) statt parallel überlappt,
   das eliminiert den additiven Hellmoment. */
html.intra-vt::view-transition-old(*) {
    animation: vt-section-out 150ms ease-in forwards;
}
html.intra-vt::view-transition-new(*) {
    animation: vt-section-in 150ms 150ms ease-out forwards;
}
html.intra-vt::view-transition-old(root),
html.intra-vt::view-transition-new(root) {
    animation: none;
}

@keyframes vt-section-out {
    to { opacity: 0; }
}
@keyframes vt-section-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Page-Enter Fallback */
html.page-enter body {
    animation: page-slide-in 0.32s var(--ease) both;
}


/* ─── 20. Mikro-Patterns ─────────────────────────────────────── */


/* ─── 21. Reduced-Motion + Print ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal,
    .reveal-fog,
    .reveal-words span {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .hero-enter {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .hero-bg {
        animation: none !important;
        transform: none !important;
    }

    /* Reduced-Motion-Fallback: mid-page Werte aus dem neuen Walnuss-Verlauf */
    html { --atmo-hue: 72; --atmo-chroma: 0.038; --atmo-light: 60%; }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

@media print {
    .nav, .nav-mobile, .mega, .scroll-progress, .footer-ghost, .hero-grain, .hero-light, .hero-diorama { display: none !important; }
    body { background: white; color: black; }
    .hero { min-height: auto; padding-top: 2rem; }
    .hero-title, .hero-subline { color: black; text-shadow: none; }
}


/* ============================================================
   SUBPAGE-PATTERNS
   ============================================================
     S1.  Subpage-Hero (kompakt, 65vh, eigenes BG)
     S2.  Area-Back-Buttons (statisch + floating)
     S3.  Bereichs-Editorial-Intro
     S4.  Sticky Filter-Quicknav
     S5.  Gallery-Section (pro Sub-Kategorie)
     S6.  Lightbox (3-Slide-Carousel)
     S7.  Cross-Sell-Block (Links zu anderen Bereichen)
     S8.  Legal-Page-Pattern
   ============================================================ */


/* ─── S1. Subpage-Hero ───────────────────────────────────────── */

.subpage-hero {
    position: relative;
    min-height: 62vh;
    min-height: 62svh;
    padding-top: calc(var(--nav-h) + 4rem);
    padding-bottom: clamp(3rem, 6vh, 5rem);
    display: flex;
    align-items: flex-end;
    overflow: clip;
    isolation: isolate;
}

.subpage-hero-bg {
    position: absolute;
    inset: -8%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    filter: saturate(1.05) contrast(1.06) brightness(1.0);
    opacity: 0.95;
    will-change: transform;
}

@supports (animation-timeline: scroll(root)) {
    @keyframes subpage-hero-parallax {
        from { transform: translateY(0) scale(1.02); }
        to   { transform: translateY(10vh) scale(1.05); }
    }
    .subpage-hero-bg {
        animation: subpage-hero-parallax linear both;
        animation-timeline: scroll(root block);
        animation-range: 0vh 80vh;
    }
}

.subpage-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 65% 75% at 80% -5%,
            color-mix(in oklch, white 40%, transparent) 0%,
            transparent 55%),
        linear-gradient(to top,
            color-mix(in oklch, var(--bg-base) 92%, transparent) 0%,
            color-mix(in oklch, var(--bg-base) 64%, transparent) 18%,
            color-mix(in oklch, var(--bg-base) 18%, transparent) 38%,
            transparent 55%);
}

.subpage-hero-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.14;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0 0.22 0 0 0 0.50 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

.subpage-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.subpage-hero-content .label {
    margin-bottom: 1.2rem;
    color: var(--text);
    font-weight: 600;
    text-shadow:
        0 1px 0 color-mix(in oklch, white 28%, transparent),
        0 0 14px color-mix(in oklch, var(--bg-base) 70%, transparent);
}

.subpage-hero-content h1 {
    font-size: clamp(2.4rem, 5.5vw, 4.4rem);
    line-height: 1.04;
    color: var(--text);
    margin-bottom: 1.4rem;
    text-shadow:
        0 1px 0 color-mix(in oklch, white 28%, transparent),
        0 0 22px color-mix(in oklch, var(--bg-base) 75%, transparent);
}

.subpage-hero-content p {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.6;
    color: var(--text);
    max-width: 580px;
    text-shadow:
        0 1px 0 color-mix(in oklch, white 24%, transparent),
        0 0 14px color-mix(in oklch, var(--bg-base) 70%, transparent);
}

.subpage-hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.subpage-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--bg-base) 78%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-soft);
}

.subpage-hero-meta-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
}


/* ─── S1b. Subpage-Editorial-Aufmacher (Bild links, Text rechts) ──
   Ersetzt den klassischen Subpage-Hero. Reduzierter, scanbarer
   Editorial-Aufmacher: cineastisches Bild der Galerie + sachliche Copy,
   kein Pathos, integriert Static Back-Button + Reveal-Animation. */

.subpage-editorial {
    padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem));
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.subpage-editorial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    max-width: 1200px;
    margin-inline: auto;
}

@media (min-width: 800px) {
    .subpage-editorial-grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2.5rem, 5vw, 5rem);
    }
}

.subpage-editorial-img {
    position: relative;
    aspect-ratio: 4/5;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    transition: box-shadow 0.6s var(--ease);
}

@media (min-width: 800px) {
    .subpage-editorial-img {
        margin-inline: 0;
        aspect-ratio: 5/6;
    }
}

.subpage-editorial-img:hover {
    box-shadow: var(--depth-hover), var(--depth-glow);
}

.subpage-editorial-img-frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    /* Walnuss-Color-Grade — leicht entsättigt + Sepia-Hauch
       zieht das Bild in die Walnuss-Welt, ohne Duotone-Look. */
    filter: saturate(0.92) contrast(1.06) brightness(1.02) sepia(0.04);
    transition: transform 0.8s var(--ease), filter 0.6s var(--ease);
}

.subpage-editorial-img:hover .subpage-editorial-img-frame {
    transform: scale(1.03);
    filter: saturate(1.0) contrast(1.08) brightness(1.04) sepia(0.02);
}

/* Subtle Vignette — diagonal Walnuss-Schatten unten-rechts */
.subpage-editorial-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 110% 105% at 52% 38%,
            transparent 55%,
            rgba(20, 14, 8, 0.22) 100%);
    mix-blend-mode: multiply;
}

/* Glass-Highlight diagonal über dem Bild */
.subpage-editorial-img::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: var(--glass-highlight);
    border-radius: inherit;
}

.subpage-editorial-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.subpage-editorial-text .area-back {
    align-self: flex-start;
    margin-bottom: 1rem;
}

.subpage-editorial-text .label {
    margin-bottom: 0.25rem;
}

.subpage-editorial-text h1 {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: 1.05;
    margin-bottom: 0.5rem;
}

.subpage-editorial-lead {
    font-family: var(--font-serif);
    font-style: italic;
    font-variation-settings: 'opsz' 32, 'wght' 360, 'SOFT' 80;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.5;
    color: var(--text-body);
    max-width: 520px;
}

.subpage-editorial-meta {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 520px;
}


/* ─── S2. Area-Back-Buttons ──────────────────────────────────── */

.area-back-section {
    padding-block: 1.5rem 0;
}

.area-back {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1.2rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-soft);
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, white 38%, transparent);
    border: 1px solid var(--border-soft);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--depth-soft);
    text-decoration: none;
    transition: background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.area-back:hover {
    background: color-mix(in oklch, white 52%, transparent);
    border-color: var(--accent-40);
    color: var(--accent-deep);
    transform: translateX(-2px);
}

.area-back svg { transition: transform var(--dur-fast) var(--ease); }
.area-back:hover svg { transform: translateX(-3px); }

/* Floating Back-Button — fixed left, mid-page */
.area-back-float {
    position: fixed;
    left: clamp(1rem, 2vw, 2rem);
    top: 50%;
    z-index: 50;
    transform: translateY(-50%) translateX(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease),
                transform 0.4s var(--ease),
                background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease);
}

.area-back-float.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

@media (max-width: 767px) {
    .area-back-float { display: none !important; }
}


/* ─── S3. Bereichs-Editorial-Intro ───────────────────────────── */

.bereich-intro {
    padding-block: clamp(3rem, 5vw, 5rem) clamp(2rem, 4vw, 3.5rem);
}

.bereich-intro-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    max-width: 1200px;
    margin-inline: auto;
    align-items: start;
}

@media (min-width: 900px) {
    .bereich-intro-inner {
        grid-template-columns: 1fr 1.5fr;
        gap: clamp(3rem, 6vw, 5rem);
    }
}

.bereich-intro-label h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    margin-bottom: 0.5rem;
}

.bereich-intro-label .label {
    margin-bottom: 0.6rem;
}

.bereich-intro-text p {
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.65;
    color: var(--text-body);
    margin-bottom: 1.1rem;
    max-width: 60ch;
}

.bereich-intro-text p:first-child::first-letter {
    /* Drop-Cap Variante */
    font-family: var(--font-serif);
    font-size: 3em;
    font-weight: 380;
    float: left;
    line-height: 0.9;
    margin-right: 0.1em;
    margin-top: 0.05em;
    color: var(--accent);
}


/* ─── S4. Sticky Filter-Quicknav ─────────────────────────────── */

.filter-nav {
    position: sticky;
    /* JS setzt --nav-h-actual dynamisch auf nav.offsetHeight (scrolled = kleiner)
       damit kein Spalt zwischen Header-Bottom und Filter-Top entsteht. */
    top: var(--nav-h-actual, var(--nav-h));
    z-index: 40;
    /* Layout-Trick: -nav-h margin damit der Flow keinen sichtbaren Streifen
       reserviert wenn Filter-Nav im hidden-State ist. Content-Wrap überdeckt. */
    margin-bottom: calc(var(--nav-h) * -1);
    padding-block: 0.85rem;
    background: color-mix(in oklch, var(--bg-base) 92%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 4px 16px color-mix(in oklch, var(--holz-warm) 12%, transparent);
    /* Initial hidden — JS triggert .visible wenn Subpage-Aufmacher nach oben raus. */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
    will-change: transform, opacity;
}

.filter-nav.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.filter-nav-inner {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-block: 0.25rem;
}

.filter-nav-inner::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
    .filter-nav-inner {
        justify-content: center;
        flex-wrap: wrap;
        overflow: visible;
    }
}

.filter-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-soft);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 18%, transparent));
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 20%, transparent),
        0 2px 6px color-mix(in oklch, var(--holz-warm) 14%, transparent);
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
    text-decoration: none;
    cursor: pointer;
}

.filter-chip:hover {
    transform: translateY(-1px);
    border-color: var(--accent-40);
    color: var(--accent-deep);
}

.filter-chip.active {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--walnuss-glow) 28%, white),
        color-mix(in oklch, var(--walnuss-glow) 14%, white));
    border-color: var(--accent-60);
    color: var(--accent-deep);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 24%, transparent),
        0 4px 12px var(--accent-18),
        0 0 24px var(--accent-08);
}

.filter-count {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.74rem;
    color: var(--accent);
    opacity: 0.78;
}

.filter-chip.active .filter-count {
    color: var(--accent-deep);
    opacity: 1;
}


/* ─── S5. Gallery-Section ────────────────────────────────────── */

/* Wrapper um alle Gallery-Sections.
   KEIN view-transition-name: bei großen Höhen-Sprüngen (Filter "all" →
   "Tische" reduziert die Page um 90%) wirkt der Wrap-Höhen-Morph als
   sichtbare "Bewegung-drüber"-Drift. Stattdessen lassen wir die Wrap-
   Höhe snap-changen und nur die Sections per Section-Name morphen
   (fade-in/out an Position). */
.gallery-wrap {
    position: relative;
}

/* Hidden state für Filter — display:none damit View Transitions API
   das Element als "nicht-präsent" behandelt und automatisch fade-out
   morpht. (Kratzer-Pattern: ohne display:none würde der Browser einen
   reinen Crossfade ohne Layout-Morph machen.) */
.gallery-section.hidden {
    display: none;
}

.gallery-section {
    padding-block: clamp(3rem, 6vw, 6rem);
    scroll-margin-top: calc(var(--nav-h) + 64px);
}

.gallery-section-header {
    max-width: 760px;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.gallery-section-header .gallery-section-num {
    display: inline-block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--accent);
    letter-spacing: 0.1em;
    margin-bottom: 0.6rem;
}

.gallery-section-header h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin-bottom: 0.85rem;
}

.gallery-section-header p {
    font-size: clamp(0.96rem, 1.2vw, 1.05rem);
    line-height: 1.65;
    color: var(--text-body);
    max-width: 60ch;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    max-width: 1400px;
    margin-inline: auto;
}

@media (min-width: 700px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

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

/* Bento-Variant: erste Tile large 2x2 alle 8 Items */
@media (min-width: 700px) {
    .gallery-grid > .gallery-tile-large {
        grid-column: span 2;
        grid-row: span 2;
    }
    .gallery-grid > .gallery-tile-wide {
        grid-column: span 2;
    }
}

.gallery-tile {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-deeper);
    box-shadow: var(--depth-soft);
    cursor: zoom-in;
    transition: transform var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
    border: none;
    padding: 0;
    width: 100%;
    text-align: left;
    contain: layout;
}

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

.gallery-tile-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    transition: transform var(--dur-slow) var(--ease),
                filter var(--dur-medium) var(--ease);
    filter: saturate(1) contrast(1.05);
}

.gallery-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--depth-rest), var(--depth-glow);
}

.gallery-tile:hover .gallery-tile-img {
    transform: scale(1.09);
    filter: saturate(1.1) contrast(1.07);
}

.gallery-tile-tag {
    position: absolute;
    bottom: 0.7rem; left: 0.7rem;
    z-index: 3;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
    background: color-mix(in oklch, var(--bg-base) 88%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-soft);
    transform: translateY(8px);
    opacity: 0;
    transition: transform var(--dur-fast) var(--ease),
                opacity var(--dur-fast) var(--ease);
}

.gallery-tile:hover .gallery-tile-tag {
    transform: translateY(0);
    opacity: 1;
}

/* Hire-Hook (subtile Animation zum nächsten Bereich) */
.cross-sell {
    padding-block: clamp(3rem, 5vw, 5rem);
}

.cross-sell-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 1200px;
    margin-inline: auto;
}

@media (min-width: 700px) {
    .cross-sell-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

.cross-sell-card {
    position: relative;
    padding: clamp(1.5rem, 2.6vw, 2rem);
    border-radius: var(--radius-md);
    background: var(--bg-tint);
    border: 1px solid var(--border-soft);
    box-shadow: var(--depth-soft);
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    transition: transform var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

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

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

.cross-sell-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-40);
    box-shadow: var(--depth-rest);
}

.cross-sell-card-num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--accent);
    letter-spacing: 0.08em;
}

.cross-sell-card h3 {
    font-size: 1.2rem;
    color: var(--text);
}

.cross-sell-card p {
    font-size: 0.86rem;
    color: var(--text-body);
    line-height: 1.55;
    flex: 1;
}

.cross-sell-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--accent-deep);
    transition: gap var(--dur-fast) var(--ease);
}

.cross-sell-card:hover .cross-sell-card-cta {
    gap: 0.7rem;
}


/* ─── S5b. Spezialitäts-Subpage Pattern ──────────────────────── */

.spez-story {
    padding-block: clamp(4rem, 7vw, 7rem);
}

.spez-story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    max-width: 1200px;
    margin-inline: auto;
    align-items: start;
}

@media (min-width: 900px) {
    .spez-story-grid {
        grid-template-columns: 1.05fr 1fr;
        gap: clamp(3rem, 5vw, 5rem);
    }
}

.spez-story-text h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    margin-bottom: 1.4rem;
}

.spez-story-text .label {
    margin-bottom: 0.7rem;
}

.spez-story-text p {
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.7;
    color: var(--text-body);
    margin-bottom: 1.2rem;
    max-width: 60ch;
}

.spez-story-text p:first-of-type::first-letter {
    font-family: var(--font-serif);
    font-size: 3em;
    font-weight: 380;
    float: left;
    line-height: 0.9;
    margin-right: 0.1em;
    margin-top: 0.05em;
    color: var(--accent);
}

.spez-story-feature {
    position: relative;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--bg-tint);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--depth-rest);
    overflow: hidden;
    isolation: isolate;
}

.spez-story-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.06;
    background:
        repeating-linear-gradient(95deg,
            transparent 0px, transparent 8px,
            color-mix(in oklch, var(--holz-deep) 100%, transparent) 8px,
            color-mix(in oklch, var(--holz-deep) 100%, transparent) 9px,
            transparent 9px, transparent 22px);
    pointer-events: none;
    border-radius: inherit;
}

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

.spez-story-feature > * {
    position: relative;
    z-index: 2;
}

.spez-story-feature .label {
    margin-bottom: 1rem;
}

.spez-story-feature h3 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    margin-bottom: 1.5rem;
}

.spez-feature-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.spez-feature-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-soft);
}

.spez-feature-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.spez-feature-num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--accent);
    letter-spacing: 0.06em;
    line-height: 1.2;
    padding-top: 0.1em;
}

.spez-feature-content strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.2rem;
}

.spez-feature-content span {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-body);
}


/* ─── S6. Lightbox (3-Slide-Carousel — Formel-Pattern) ───────── */

.lb-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--bg-base);
    /* SOLID — niemals rgba mit alpha < 1 (CLAUDE.md Performance) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s;
    will-change: opacity;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

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

.lb-close, .lb-prev, .lb-next {
    position: absolute;
    z-index: 10010;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in oklch, white 38%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-soft);
    color: var(--text);
    font-size: 1.4rem;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.lb-close:hover, .lb-prev:hover, .lb-next:hover {
    background: color-mix(in oklch, var(--walnuss-glow) 35%, white);
    border-color: var(--accent-40);
}

.lb-close { top: 1.5rem; right: 1.5rem; }
.lb-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }

.lb-viewport {
    position: relative;
    width: 90vw;
    max-width: 1400px;
    height: 80vh;
    overflow: hidden;
    transform: scale(0.94);
    transition: transform 0.5s var(--ease-slide);
    will-change: transform;
}

.lb-backdrop.active .lb-viewport {
    transform: scale(1);
}

.lb-track {
    display: flex;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.45s var(--ease-slide);
    will-change: transform;
}

.lb-track.lb-no-transition { transition: none; }

.lb-slide {
    flex: 0 0 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.lb-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px color-mix(in oklch, var(--holz-deep) 32%, transparent);
}

.lb-counter {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--accent-deep);
    letter-spacing: 0.06em;
}

@media (max-width: 700px) {
    .lb-close, .lb-prev, .lb-next {
        width: 40px;
        height: 40px;
    }
    .lb-close { top: 0.75rem; right: 0.75rem; }
    .lb-prev { left: 0.5rem; }
    .lb-next { right: 0.5rem; }
    .lb-viewport { width: 96vw; height: 75vh; }
}

/* Lightbox-open: Atmo-Animations pausieren (CLAUDE.md Performance) */
body.lightbox-open .footer-ghost,
body.lightbox-open .hero-bg,
body.lightbox-open .scroll-progress {
    animation-play-state: paused !important;
}

body.lightbox-open {
    overflow: hidden;
}


/* ─── S8. Legal-Page-Pattern ─────────────────────────────────── */

.legal-page {
    padding-top: calc(var(--nav-h) + 4rem);
    padding-bottom: clamp(4rem, 7vw, 7rem);
    min-height: 100vh;
}

.legal-page-header {
    max-width: 800px;
    margin: 0 auto clamp(2.5rem, 4vw, 4rem);
}

.legal-page-header h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 0.5rem;
}

.legal-page-body {
    max-width: 760px;
    margin: 0 auto;
    font-size: 0.96rem;
    line-height: 1.78;
    color: var(--text-body);
}

.legal-page-body h2 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    color: var(--text);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

.legal-page-body h3 {
    font-size: 1.1rem;
    color: var(--text);
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.legal-page-body p {
    margin-bottom: 1rem;
}

.legal-page-body a {
    color: var(--accent-deep);
    border-bottom: 1px solid var(--accent-25);
    transition: color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}

.legal-page-body a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent-60);
}

.legal-page-body ul,
.legal-page-body ol {
    list-style: disc inside;
    margin-left: 0;
    margin-bottom: 1rem;
}

.legal-page-body ul li,
.legal-page-body ol li {
    margin-bottom: 0.4rem;
}


/* ============================================================
   KONTAKT-PAGE-SPECIFIC
   ============================================================ */

/* ============================================
   KONTAKT — Multi-Step Form (Lämmermann-Pattern, 6 Steps)
   ============================================ */

.kontakt-section {
    padding-top: var(--section-pad);
    /* padding-bottom halbiert — Form und Alt-Cards bilden visuell eine
       Kontakt-Einheit, sind nicht zwei isolierte Sektionen. */
    padding-bottom: calc(var(--section-pad) * 0.5);
}

/* ---------- PROGRESS INDICATOR ---------- */
.kontakt-form-progress {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}

.kontakt-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: default;
    transition: opacity 0.4s var(--ease);
    opacity: 0.5;
    flex-shrink: 0;
}

.kontakt-step-indicator.active,
.kontakt-step-indicator.completed {
    opacity: 1;
}

.kontakt-step-indicator.completed {
    cursor: pointer;
}

.kontakt-step-num {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    background: var(--bg-tint);
    transition: background 0.4s var(--ease),
                border-color 0.4s var(--ease),
                color 0.4s var(--ease);
}

.kontakt-step-indicator.active .kontakt-step-num {
    background: linear-gradient(135deg, var(--walnuss-warm), var(--walnuss));
    border-color: var(--accent);
    color: white;
    box-shadow: 0 0 18px var(--accent-25);
}

.kontakt-step-indicator.completed .kontakt-step-num {
    background: var(--bg-tint);
    border-color: var(--accent-40);
    color: var(--accent-deep);
}

.kontakt-step-label {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.4s var(--ease);
}

.kontakt-step-indicator.active .kontakt-step-label {
    color: var(--accent-deep);
}

.kontakt-step-line {
    flex: 1;
    height: 1px;
    background: var(--border);
    margin-top: 20px;
    position: relative;
    overflow: hidden;
}

.kontakt-step-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--walnuss-warm), var(--walnuss));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--ease);
}

.kontakt-step-line.active::after {
    transform: scaleX(1);
}

/* ---------- FORM WRAPPER ---------- */
.kontakt-form-wrapper {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: var(--bg-tint);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--depth-rest);
    overflow: hidden;
    position: relative;
    isolation: isolate;
    transition: height 0.8s var(--ease);
}

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

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

/* ---------- STEP ---------- */
.kontakt-step { display: none; }
.kontakt-step.active { display: block; }

.kontakt-step-title {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 80, 'wght' 380, 'SOFT' 60;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    line-height: 1.15;
    text-align: center;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.kontakt-step-subtitle {
    font-size: 0.9rem;
    color: var(--text-body);
    text-align: center;
    max-width: 460px;
    margin: 0 auto 2.5rem;
    line-height: 1.65;
}

/* ---------- TYPE-BUTTONS (Tiles) ---------- */
.kontakt-type-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.kontakt-type-grid[hidden] { display: none !important; }

@media (min-width: 640px) {
    .kontakt-type-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .kontakt-type-grid-2 {
        grid-template-columns: repeat(2, 1fr);
        max-width: 560px;
        margin-inline: auto;
    }
}

.kontakt-type-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 1.4rem 1.2rem;
    background: color-mix(in oklch, white 30%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: left;
    cursor: pointer;
    transition: background 0.4s var(--ease),
                border-color 0.4s var(--ease),
                transform 0.4s var(--ease),
                box-shadow 0.4s var(--ease);
}

.kontakt-type-btn:hover {
    background: color-mix(in oklch, white 50%, transparent);
    border-color: var(--accent-40);
    transform: translateY(-1px);
}

.kontakt-type-btn.selected {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--walnuss-glow) 28%, white),
        color-mix(in oklch, var(--walnuss-glow) 14%, white));
    border-color: var(--accent-60);
    box-shadow: 0 8px 22px var(--accent-18),
                inset 0 1px 0 color-mix(in oklch, white 22%, transparent);
}

.kontakt-type-title {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 36, 'wght' 420, 'SOFT' 50;
    font-size: 1.18rem;
    line-height: 1.2;
    color: var(--text);
}

.kontakt-type-desc {
    font-size: 0.78rem;
    color: var(--text-body);
    line-height: 1.5;
}

/* ---------- CHIPS (Disziplin Multi-Select) ---------- */
.kontakt-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    min-height: 90px;
    justify-content: center;
}

.kontakt-chip-grid[hidden] { display: none !important; }

.kontakt-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-body);
    background: color-mix(in oklch, white 35%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 22%, transparent),
                0 2px 6px color-mix(in oklch, var(--holz-warm) 8%, transparent);
    cursor: pointer;
    transition: background 0.4s var(--ease),
                border-color 0.4s var(--ease),
                color 0.4s var(--ease),
                transform 0.4s var(--ease);
}

.kontakt-chip:hover {
    border-color: var(--accent-40);
    color: var(--text);
    transform: translateY(-1px);
}

.kontakt-chip.selected {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--walnuss-glow) 30%, white),
        color-mix(in oklch, var(--walnuss-glow) 14%, white));
    border-color: var(--accent-60);
    color: var(--accent-deep);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 30%, transparent),
                0 3px 10px var(--accent-18);
}

/* ---------- FIELDS ---------- */
.kontakt-field-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

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

.kontakt-field {
    margin-bottom: 1.5rem;
}

.kontakt-field label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.kontakt-field-optional {
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    opacity: 0.7;
    text-transform: none;
    font-weight: 500;
}

.kontakt-field input,
.kontakt-field textarea {
    width: 100%;
    padding: 0.75rem 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-strong);
    outline: none;
    transition: border-color 0.3s var(--ease);
}

.kontakt-field textarea {
    resize: vertical;
    min-height: 84px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    line-height: 1.6;
}

.kontakt-field input::placeholder,
.kontakt-field textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.65;
}

.kontakt-field input:focus,
.kontakt-field textarea:focus {
    border-color: var(--accent);
}

.kontakt-field input:user-invalid,
.kontakt-field textarea:user-invalid {
    border-color: oklch(54% 0.18 22);
}

/* Autofill-Override (CLAUDE.md Standard) */
.kontakt-field input:-webkit-autofill,
.kontakt-field input:-webkit-autofill:hover,
.kontakt-field input:-webkit-autofill:focus,
.kontakt-field input:-webkit-autofill:active,
.kontakt-field textarea:-webkit-autofill,
.kontakt-field textarea:-webkit-autofill:hover,
.kontakt-field textarea:-webkit-autofill:focus,
.kontakt-field textarea:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-tint) inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text);
    transition: background-color 5000s ease-in-out 0s;
}

/* ---------- SUMMARY ---------- */
.kontakt-summary {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--walnuss-glow) 16%, white),
        color-mix(in oklch, var(--walnuss-glow) 6%, white));
    border: 1px solid var(--accent-40);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.kontakt-summary-label {
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.kontakt-summary-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-variation-settings: 'opsz' 24, 'wght' 380, 'SOFT' 70;
    font-size: 0.98rem;
    color: var(--text);
}

/* ---------- NAV (Weiter/Zurück) ---------- */
.kontakt-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-soft);
    gap: 1rem;
}

.kontakt-back {
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-soft);
    padding: 0.5rem 0;
    cursor: pointer;
    background: none;
    border: none;
    transition: color 0.3s var(--ease);
}

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

/* Disable Weiter wenn keine Auswahl (via :has) */
.kontakt-step[data-step="0"]:not(:has(.kontakt-type-btn.selected)) [data-next],
.kontakt-step[data-step="1"]:not(:has(.kontakt-type-btn.selected)) [data-next],
.kontakt-step[data-step="2"]:not(:has(.kontakt-type-btn.selected)) [data-next],
.kontakt-step[data-step="3"]:not(:has(.kontakt-chip.selected)) [data-next],
.kontakt-step[data-step="4"]:not(:has(.kontakt-type-btn.selected)) [data-next] {
    opacity: 0.4;
    pointer-events: none;
}

/* ---------- LEGAL ---------- */
.kontakt-legal {
    margin-top: 1.5rem;
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.6;
    text-align: center;
}

.kontakt-legal a {
    color: var(--accent-deep);
    border-bottom: 1px solid var(--accent-25);
    transition: color 0.3s var(--ease),
                border-color 0.3s var(--ease);
}

.kontakt-legal a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* ---------- SHAKE ---------- */
@keyframes kontakt-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.kontakt-shake { animation: kontakt-shake 0.4s ease; }

/* ---------- SUCCESS STATE ---------- */
.kontakt-success {
    display: none;
    text-align: center;
    padding: 2rem 0;
}

.kontakt-success.active {
    display: block;
}

.kontakt-success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--walnuss-warm), var(--walnuss));
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    box-shadow: 0 12px 36px var(--accent-25);
}

.kontakt-success-icon svg {
    width: 36px;
    height: 36px;
}

.kontakt-success h3 {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    color: var(--text);
    margin-bottom: 1rem;
}

.kontakt-success p {
    max-width: 480px;
    margin: 0 auto 0.75rem;
    color: var(--text-body);
    line-height: 1.7;
}

.kontakt-success-sub a {
    color: var(--accent-deep);
    font-weight: 500;
    border-bottom: 1px solid var(--accent-40);
}


/* ============================================
   KONTAKT-ALT — 3-Card-Grid (Tel / E-Mail / Vor Ort)
   ============================================ */

.kontakt-alt-section {
    /* padding-top halbiert — siehe .kontakt-section */
    padding-top: calc(var(--section-pad) * 0.5);
    padding-bottom: var(--section-pad);
    position: relative;
}

.kontakt-alt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 800px) {
    .kontakt-alt-grid { grid-template-columns: repeat(3, 1fr); }
}

.kontakt-alt-card {
    position: relative;
    padding: clamp(1.75rem, 3vw, 2.4rem);
    border-radius: var(--radius-lg);
    background: var(--bg-tint);
    border: 1px solid var(--border-soft);
    box-shadow: var(--depth-rest);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
}

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

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

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

.kontakt-alt-card .label {
    margin-bottom: 0.25rem;
}

.kontakt-alt-card h3 {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 36, 'wght' 380, 'SOFT' 50;
    font-size: 1.35rem;
    color: var(--text);
    letter-spacing: -0.005em;
    margin: 0;
}

.kontakt-alt-tel {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 48, 'wght' 380, 'SOFT' 60;
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    font-weight: 380;
    color: var(--accent-deep);
    margin: 0.25rem 0;
    word-break: break-word;
    transition: color 0.3s var(--ease);
}

a.kontakt-alt-tel {
    border-bottom: 1px solid var(--accent-25);
    padding-bottom: 0.15rem;
    align-self: flex-start;
}

a.kontakt-alt-tel:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.kontakt-alt-address {
    font-size: 1.18rem;
    line-height: 1.4;
    font-style: normal;
}

.kontakt-alt-card p {
    font-size: 0.88rem;
    color: var(--text-body);
    line-height: 1.65;
}


/* ─── 22. Responsive ─────────────────────────────────────────── */

@media (max-width: 1023px) {
    .mega { display: none !important; }
}

@media (max-width: 920px) {
    .mega-cols { grid-template-columns: repeat(2, 1fr); }
    .mega-spez-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .hero {
        min-height: 88vh;
        padding-bottom: 6rem;
    }
    .hero-content { max-width: 100%; }
    .hero-title { font-size: clamp(2.6rem, 12vw, 3.8rem); }
    .hero-trust-inner {
        gap: 0.5rem 0.85rem;
        font-size: 0.6rem;
    }
    .hero-trust-dot { display: none; }
    .hero-trust-item:not(:last-child)::after {
        content: '·';
        margin-left: 0.85rem;
        color: var(--accent-40);
    }

    .editorial-img { max-width: 460px; margin-inline: auto; transform: rotate(0); }

    .bereich-grid { gap: 1rem; }
    .bereich-tile-content { padding: 1.25rem; }
    .bereich-tile-num {
        top: 1rem; right: 1rem;
        font-size: 1.6rem;
    }

    .disziplinen-flow { gap: 0.4rem 0.5rem; }
    .disziplin-pill { font-size: 0.78rem; padding: 0.5rem 0.95rem; }
}