/* ============================================================
   Schreinerei Bock — Steinbock Master Stylesheet
   ============================================================
   Hellraum-OKLCH mit Bock-Orange.
   Cream-Pergament Basis, Honig-Atmosphäre, knallig-saftiger Akzent.
   Alle Farb-Übergänge in oklch interpoliert — keine harten Kanten,
   kein sRGB-Schmutz beim Cream→Orange-Verlauf.

   Architektur:
     1.  Tokens (Custom Properties + @property + Display-P3)
     2.  Reset & Base
     3.  Typografie (Fraunces opsz + Manrope)
     4.  Container & Layout-Utilities
     5.  Reveal-System
     6.  Buttons & Pills (Glass + Depth)
     7.  Navigation (transparent → frosted)
     8.  Hero (Crossfade + Ken-Burns + Trust-Bar)
     9.  Atmo-Wrap (Beams in oklch + Particles)
    10.  Editorial-Intro
    11.  Leistungs-Karussell (zg-Pattern aus Lämmermann)
    12.  Über-Section (mit Bus)
    13.  Reviews (Steinberger-Pattern, plan-werkzeug Atmo)
    14.  CTA-Section
    15.  Footer (mit Watermark)
    16.  View Transitions
    17.  Reduced-Motion + Print
    18.  Responsive
   ============================================================ */


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

/* @property für animatable Custom Properties — sonst kann CSS
   nicht zwischen Number-Werten interpolieren. */
@property --atmo-hue {
    syntax: '<number>';
    initial-value: 75;
    inherits: true;
}
@property --atmo-chroma {
    syntax: '<number>';
    initial-value: 0.04;
    inherits: true;
}
@property --ghost-progress {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
}
@property --beam-drift {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
}
@property --glass-opacity {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

:root {
    /* ─ Hellraum-Skala — Cream/Pergament 93-97% L ─ */
    --bg:           oklch(96.5% 0.014 80);    /* Pergament — fast weiß, leicht warm */
    --bg-tint:      oklch(95.0% 0.022 78);    /* eingelassener Honig-Ton */
    --bg-paper:     oklch(94.0% 0.026 76);    /* Surface-Cards */
    --bg-deeper:    oklch(92.5% 0.034 72);    /* Form-Wrapper, eingelassen */
    --bg-surface:   oklch(98.5% 0.010 82);    /* fast weiß, eingebettete Cards */

    /* ─ Bock-Orange — orangiger als Bus-Foto, weniger rot, immer noch saftig ─ */
    --accent:       oklch(63% 0.19 44);       /* Bock-Orange Base — saftig orange */
    --accent-light: oklch(72% 0.17 47);       /* Hover/Highlights */
    --accent-deep:  oklch(53% 0.20 38);       /* Pressed/Active — bleibt orange */
    --accent-soft:  oklch(80% 0.12 52);       /* Honig-Sub für dezente Tints */

    /* ─ Akzent in 8 Transparenz-Stufen via color-mix in oklch ─
       Nie ad-hoc rgba schreiben — diese Tokens nutzen. */
    --accent-04:    color-mix(in oklch, var(--accent) 4%, transparent);
    --accent-06:    color-mix(in oklch, var(--accent) 6%, transparent);
    --accent-10:    color-mix(in oklch, var(--accent) 10%, transparent);
    --accent-15:    color-mix(in oklch, var(--accent) 15%, transparent);
    --accent-25:    color-mix(in oklch, var(--accent) 25%, transparent);
    --accent-40:    color-mix(in oklch, var(--accent) 40%, transparent);
    --accent-60:    color-mix(in oklch, var(--accent) 60%, transparent);
    --accent-80:    color-mix(in oklch, var(--accent) 80%, transparent);

    /* ─ Walnuss-Bronze — sekundärer Akzent für die "edlen" Stellen
       (Italic-Em, Buttons, Stations, Dots, Stars, Stats, CTA-Card).
       Orange bleibt nur an Brand-Mark + Eyebrows als Marken-Anker. */
    --accent-2:        oklch(45% 0.08 55);     /* Walnuss-Bronze base */
    --accent-2-light:  oklch(60% 0.085 60);    /* hover/highlights / dark BG */
    --accent-2-deep:   oklch(35% 0.075 50);    /* pressed/dark */
    --accent-2-soft:   oklch(72% 0.06 65);     /* sehr dezenter Tint */

    --accent-2-04:  color-mix(in oklch, var(--accent-2) 4%, transparent);
    --accent-2-08:  color-mix(in oklch, var(--accent-2) 8%, transparent);
    --accent-2-12:  color-mix(in oklch, var(--accent-2) 12%, transparent);
    --accent-2-18:  color-mix(in oklch, var(--accent-2) 18%, transparent);
    --accent-2-25:  color-mix(in oklch, var(--accent-2) 25%, transparent);
    --accent-2-40:  color-mix(in oklch, var(--accent-2) 40%, transparent);
    --accent-2-60:  color-mix(in oklch, var(--accent-2) 60%, transparent);

    /* ─ Text — Anthrazit wie das Logo ─ */
    --text:         oklch(28% 0.020 65);      /* Logo-Anthrazit */
    --text-body:    oklch(42% 0.025 60);      /* Body, gut lesbar */
    --text-muted:   oklch(58% 0.022 65);      /* Muted/Captions */
    --text-soft:    oklch(50% 0.024 62);

    /* ─ Holz/Honig-Atmo ─ */
    --honig:        oklch(78% 0.13 75);       /* Goldhonig für Beams */
    --honig-soft:   oklch(86% 0.08 78);       /* Lighter Honig */
    --holz:         oklch(48% 0.08 50);       /* Walnuss-Stütze */
    --holz-warm:    oklch(64% 0.085 60);      /* warmer Walnuss-Hauch */

    /* ─ Borders ─ */
    --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 — Holz-getönt, NIE grau ─
       Hastreiter-Werte 1:1 (kompakt, fein, pro-Tile statt Block-Optik). */
    --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);
    --depth-glow:   0 0 36px var(--accent-15);
    --depth-soft:   0 4px 14px 0 color-mix(in oklch, var(--holz) 14%, transparent);

    /* ─ Glass-Highlight (Steinberger-Pattern: diagonal Cream → Walnuss) ─
       Top-Left: hartes White-Highlight (32%) wie Glas-Lichtbrechung.
       Bottom-Right: Walnuss-Touch (passt zum Akzent-System). */
    --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(--accent-2-soft) 16%, transparent) 100%);

    /* ─ Mesh-Gradient-Background (mehrere overlapping radial-gradients) ─
       Erzeugt weiche Hintergrund-Variation ohne harte Section-Kanten. */
    --bg-mesh: radial-gradient(ellipse 60% 40% at 18% 12%,
                   color-mix(in oklch, var(--honig) 18%, transparent) 0%, transparent 70%),
               radial-gradient(ellipse 70% 50% at 82% 88%,
                   color-mix(in oklch, var(--accent) 10%, transparent) 0%, transparent 70%),
               radial-gradient(ellipse 50% 35% at 50% 50%,
                   color-mix(in oklch, var(--honig-soft) 14%, transparent) 0%, transparent 60%);

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

    /* Variable-Font-Achsen für Fraunces opsz (optical sizing) */
    --font-h1: 'opsz' 144, 'wght' 380, 'SOFT' 90;
    --font-h2: 'opsz' 80,  'wght' 420, 'SOFT' 70;
    --font-h3: 'opsz' 36,  'wght' 460, 'SOFT' 50;
    --font-h4: 'opsz' 14,  'wght' 540, 'SOFT' 40;

    /* ─ Easings — keine Bounce, alles sanft ─ */
    --ease:        cubic-bezier(0.16, 1, 0.3, 1);     /* Primär — Expo-Out */
    --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);     /* Quieter Out */
    --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);      /* UI-Wechsel */
    --ease-slide:  cubic-bezier(0.22, 1, 0.36, 1);    /* Slides/Carousel */

    /* ─ Durations ─ */
    --dur-fast:        0.3s;
    --dur-normal:      0.45s;
    --dur-medium:      0.6s;
    --dur-slow:        0.9s;
    --dur-reveal:      1s;
    --dur-reveal-fog:  1.2s;
    --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-height:       4.5rem;

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

/* Display-P3 für moderne Wide-Gamut-Displays — saftiges Orange (mehr Orange, weniger Rot).
   Body-Tokens bleiben sRGB für Lesbarkeit, nur Akzent + Honig wechseln. */
@supports (color: color(display-p3 1 0 0)) {
    @media (color-gamut: p3) {
        :root {
            --accent:       color(display-p3 0.89 0.40 0.13);  /* Bock-Orange Base — saftig orange */
            --accent-light: color(display-p3 0.97 0.55 0.24);  /* Hover/Highlights */
            --accent-deep:  color(display-p3 0.76 0.30 0.06);  /* Pressed/Active */
            --honig:        color(display-p3 0.86 0.71 0.42);

            /* Walnuss-Bronze in Display-P3 */
            --accent-2:        color(display-p3 0.42 0.30 0.13);
            --accent-2-light:  color(display-p3 0.58 0.42 0.19);
            --accent-2-deep:   color(display-p3 0.32 0.22 0.08);
        }
    }
}


/* ─── 1.5. Atmo-Layer (Edge-Light + Material — Konzept D) ─────────

   Statt Klecks-Beams + Particles: räumliche Beleuchtung + Materialität.

   Layer A: .page-bg — Edge-Light (Top-Light + 2 Side-Vignettes).
            Page wirkt gerahmt wie eine Möbel-Inszenierung im Showroom,
            Tageslicht fällt von oben rein.
   Layer B: .page-grain — Holzfaser-Maserung als globale Textur.
            Diagonale repeating-linear-gradients, sehr subtle (Walnuss
            4%/3% mix). Gibt der Page Material-Charakter ohne Bewegung.
   Layer C: Scroll-driven Top-Light-Intensität — das Tageslicht wird
            beim Scrollen leicht warm-abendlicher (Lichttemperatur fällt). */

/* @property für animatable scroll-driven Lichtintensität */
@property --top-light {
    syntax: '<percentage>';
    initial-value: 18%;
    inherits: true;
}
@property --vignette {
    syntax: '<percentage>';
    initial-value: 14%;
    inherits: true;
}

/* Layer A — Page-BG (Edge-Light Komposition)
   Drei linear-gradients: Top-Light + Right-Vignette + Left-Vignette.
   KEIN radial-gradient mehr — keine punktuellen Lichtquellen IN der Page,
   nur räumliche Beleuchtung an den Rändern. */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        /* Top-Light — Honig-Tageslicht von oben (12% Höhe) */
        linear-gradient(to bottom,
            color-mix(in oklch, var(--honig) var(--top-light, 18%), transparent) 0%,
            color-mix(in oklch, var(--honig) 6%, transparent) 7%,
            transparent 13%),
        /* Right-Vignette — Walnuss-Schimmer am rechten Edge (8% Breite) */
        linear-gradient(to left,
            color-mix(in oklch, var(--accent-2) var(--vignette, 14%), transparent) 0%,
            color-mix(in oklch, var(--accent-2) 5%, transparent) 4%,
            transparent 9%),
        /* Left-Vignette — gespiegelt */
        linear-gradient(to right,
            color-mix(in oklch, var(--accent-2) var(--vignette, 14%), transparent) 0%,
            color-mix(in oklch, var(--accent-2) 5%, transparent) 4%,
            transparent 9%),
        var(--bg);
}

/* Layer B — Page-Grain (deaktiviert).
   Die diagonale Holzmaserung war zu strikt-linear, wirkte als Tapete
   statt als Material. HTML-Container bleibt für mögliche zukünftige
   Material-Layer (z.B. SVG-Noise) reserviert. */
.page-grain { display: none; }

/* Layer C — Scroll-driven Top-Light-Drift
   Das Tageslicht wird beim Scrollen tiefer/wärmer/abendlicher.
   --top-light fällt von 18% auf 8% (Lichtquelle entfernt sich),
   --vignette steigt von 14% auf 22% (Rahmen wird stärker → Fokus
   rückt zur Mitte als wäre die Page näher am Werkstatt-Boden). */
@keyframes bock-edge-light {
    0%   { --top-light: 18%; --vignette: 14%; }
    100% { --top-light:  8%; --vignette: 22%; }
}

@supports (animation-timeline: scroll(root)) {
    html {
        animation: bock-edge-light linear both;
        animation-timeline: scroll(root block);
    }
}

/* Section-Floor-Glow — schmaler horizontaler Akzentstreifen am
   Section-Boden. Wie Bodenbeleuchtung in einer Werkstatt. Nur auf
   Sections die explizit das Marker-Attribut tragen. */
.section-floor-glow {
    position: relative;
}
.section-floor-glow::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        color-mix(in oklch, var(--accent) 35%, transparent) 50%,
        transparent 100%);
    pointer-events: none;
    box-shadow:
        0 -1px 24px 4px color-mix(in oklch, var(--accent) 12%, transparent),
        0 0 8px color-mix(in oklch, var(--accent) 22%, transparent);
}


/* ─── 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-height) + 1rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    touch-action: manipulation;
    color-scheme: light;
}

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

body.nav-open {
    overflow: hidden;
}

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

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

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

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

ul, ol {
    list-style: none;
}

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


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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    color: var(--text);
    line-height: 1.1;
    text-wrap: balance;
}

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

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

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

h4 {
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.005em;
    font-variation-settings: var(--font-h4);
}

p {
    color: var(--text-body);
    text-wrap: pretty;
    max-width: 65ch;
    line-height: 1.7;
}

em {
    font-style: italic;
    color: var(--accent-2);
    font-variation-settings: 'opsz' 144, 'wght' 360, 'SOFT' 100;
}

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

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

/* Eyebrow-Label in Bock-Orange — Marken-Anker.
   Doppel-Class für höhere Specificity damit section-header > p Regeln nicht
   überschreiben (.usp-header > p, .reviews-header > p, etc. = Specificity 0,1,1) */
.label.label-accent,
.label-accent {
    color: var(--accent);
}


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

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

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

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

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

.section-header.center {
    margin-inline: auto;
    text-align: center;
}

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

.section-header p {
    color: var(--text-body);
    font-size: 1.05rem;
}


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

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

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

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

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

.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
.reveal-d5 { transition-delay: 0.5s; }
.reveal-d6 { transition-delay: 0.6s; }


/* ─── Reveal-Emerge — Scroll-Timeline für Container/Cards/Bilder ─

   Konsistenz-Move: Edge-Light + Footer-Ghost laufen schon scroll-driven,
   also bekommen auch Container/Materialisierung diese Sprache. Headlines
   und Body-Copy bleiben bei .reveal (IO + cubic-bezier expo-out) damit
   das edle Snap-In-Easing erhalten bleibt.

   Browser-Support: Chrome 115+, Safari 18+, Firefox 129+.
   Fallback bei unsupported Browsers: Element ist sofort sichtbar (kein
   IO-Pfad — entweder hat der Browser scroll-timeline oder die Animation
   wird stumm). */

.reveal-emerge {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
}

.reveal-emerge-fog {
    opacity: 0;
    filter: saturate(0.92) brightness(0.96) blur(12px);
    transform: scale(1.025);
}

@keyframes reveal-emerge-anim {
    from { opacity: 0; transform: translateY(28px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes reveal-emerge-fog-anim {
    from {
        opacity: 0;
        filter: saturate(0.92) brightness(0.96) blur(12px);
        transform: scale(1.025);
    }
    to {
        opacity: 1;
        filter: saturate(1) brightness(1) blur(0);
        transform: scale(1);
    }
}

@supports (animation-timeline: view()) {
    .reveal-emerge {
        animation: reveal-emerge-anim linear both;
        animation-timeline: view();
        /* entry 25% = Element ist 25% in den Viewport eingetreten
           entry 100% = Element komplett im Viewport (cover-phase beginnt)
           → Animation komplett abgeschlossen bevor Element die Cover-Phase
             erreicht. Vorher war Range zu weit (bis cover 28%), Items
             erschienen halb-transparent wenn schon klar sichtbar. */
        animation-range: entry 25% entry 100%;
    }
    .reveal-emerge-fog {
        animation: reveal-emerge-fog-anim linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
    }
}

@supports not (animation-timeline: view()) {
    .reveal-emerge,
    .reveal-emerge-fog {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

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


/* ─── 6. Buttons & Pills (Glass + Depth) ─────────────────────── */

/* Buttons — Spangler-Pattern: länglicher, 12px-Radius, leichter,
   translateY(-1px) Hover. Bock-Tokens: Walnuss-Bronze für Primary. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.03em;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    transition: all var(--dur-normal) var(--ease);
}

.btn-primary {
    background: linear-gradient(to bottom,
        var(--accent-2-light),
        var(--accent-2-deep));
    color: white;
    border: 1px solid var(--accent-2-40);
    text-shadow: 0 1px 2px color-mix(in oklch, oklch(15% 0.04 60) 35%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 22%, transparent),
                0 3px 10px color-mix(in oklch, oklch(15% 0.04 60) 18%, transparent),
                0 1px 3px color-mix(in oklch, oklch(15% 0.04 60) 12%, transparent);
}

.btn-primary:hover {
    background: linear-gradient(to bottom,
        var(--accent-2),
        var(--accent-2-deep));
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 28%, transparent),
                0 5px 18px color-mix(in oklch, oklch(15% 0.04 60) 22%, transparent),
                0 0 24px var(--accent-25);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-ghost {
    /* Bottom-Stop von 18% → 40% angehoben damit Brand-Image am
       Button-Bottom nicht mehr durchschimmert (Hypothese #1: das war
       die helle 1px-Linie unter dem Button). Glass-Look bleibt durch
       Top-Stop 45% + Bottom-Stop 40% erhalten. */
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 45%, transparent),
        color-mix(in oklch, white 40%, transparent));
    color: var(--text);
    border: 1px solid var(--border-strong);
    background-clip: border-box;
    box-shadow: 0 3px 10px color-mix(in oklch, oklch(15% 0.04 60) 10%, transparent);
}

.btn-ghost:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 14%, white),
        color-mix(in oklch, var(--accent) 6%, white));
    border-color: var(--accent-40);
    color: var(--accent-deep);
    /* Kein translateY-Hover + kein inset white-shadow — beide hätten
       Sub-Pixel Edge-Bleed verursacht. backdrop-filter promotet das
       Element zu eigenem Compositor-Layer; helle inset-Pixel würden
       beim Anti-Aliasing über Edges bluten. Lift läuft über stärkeren
       Drop-Shadow + accent-glow. */
    box-shadow: 0 8px 22px color-mix(in oklch, oklch(15% 0.04 60) 18%, transparent),
                var(--depth-glow);
}

.btn-arrow span:last-child {
    transition: transform var(--dur-normal) var(--ease);
}

.btn-arrow:hover span:last-child {
    transform: translateX(4px);
}

/* Pill (kleinere interaktive Pills, z.B. Filter-Chips) */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: var(--radius-pill);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 40%, transparent),
        color-mix(in oklch, white 12%, transparent));
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-body);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 40%, transparent),
                var(--depth-soft);
    transition: all var(--dur-fast) var(--ease);
    cursor: pointer;
    text-decoration: none;
}

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

.pill.active {
    background: linear-gradient(to bottom,
        var(--accent-light),
        var(--accent-deep));
    color: white;
    border-color: var(--accent-40);
}


/* ─── 7. Navigation ──────────────────────────────────────────── */

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

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

.nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
}

.nav-brand { justify-self: start; }
.nav-cta { justify-self: end; }

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur-normal) var(--ease);
}

.nav-brand:hover {
    transform: translateY(-1px);
}

.nav-brand-mark {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg,
        var(--accent-light),
        var(--accent-deep));
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    font-family: var(--font-serif);
    font-weight: 500;
    color: white;
    font-size: 1.1rem;
    box-shadow: var(--depth-soft);
    flex-shrink: 0;
    /* Wenn Nav initial über Hero: weißer Border-Highlight für Tiefe */
    border: 1px solid color-mix(in oklch, white 25%, transparent);
}

/* Echtes PNG-Logo (ersetzt nav-brand-mark + nav-brand-text).
   Logo hat transparenten Alpha-Channel — funktioniert auf
   dark Hero und cream scrolled nav-bg. */
.nav-brand-logo {
    height: 52px;
    width: auto;
    display: block;
    transition: height var(--dur-medium) var(--ease),
                filter var(--dur-medium) var(--ease);
    /* Initial über Hero: subtle drop-shadow für Lesbarkeit gegen dark BG */
    filter: drop-shadow(0 2px 8px color-mix(in oklch, oklch(15% 0.04 60) 35%, transparent));
}

.nav.scrolled .nav-brand-logo {
    height: 42px;
    filter: none;
}

@media (max-width: 640px) {
    .nav-brand-logo { height: 44px; }
    .nav.scrolled .nav-brand-logo { height: 38px; }
}

/* Bei sehr engem Viewport: Brand-Text ausblenden (Logo allein reicht) */
@media (max-width: 520px) {
    .nav-brand-text { display: none; }
}

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

/* Initial-State (über Hero): WEISS für Lesbarkeit auf dunklem BG.
   Body-Schrift (Manrope sans) statt Serif, weil das Logo selbst
   schon den serif-artigen Brand-Schriftzug trägt — Sans ergänzt
   informativ ohne zu doppeln. */
.nav-brand-name {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.005em;
    text-shadow: 0 1px 8px color-mix(in oklch, oklch(20% 0.04 60) 60%, transparent);
    transition: color var(--dur-medium) var(--ease),
                text-shadow var(--dur-medium) var(--ease);
}

.nav-brand-sub {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in oklch, white 75%, transparent);
    margin-top: 2px;
    text-shadow: 0 1px 6px color-mix(in oklch, oklch(20% 0.04 60) 60%, transparent);
    transition: color var(--dur-medium) var(--ease),
                text-shadow var(--dur-medium) var(--ease);
}

/* Scrolled-State: dunkler Text auf hellem frosted-glass BG */
.nav.scrolled .nav-brand-name {
    color: var(--text);
    text-shadow: none;
}

.nav.scrolled .nav-brand-sub {
    color: var(--text-muted);
    text-shadow: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    justify-self: center;
}

/* Initial: weiß über Hero */
.nav-links a {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: color-mix(in oklch, white 88%, transparent);
    text-shadow: 0 1px 6px color-mix(in oklch, oklch(20% 0.04 60) 50%, transparent);
    transition: color var(--dur-fast) var(--ease),
                text-shadow var(--dur-medium) var(--ease);
    position: relative;
}

/* Active-Indicator: feiner Strich unter dem Nav-Item.
   Bei .active (Scrollspy auf Hauptseite oder Active-Page auf Subpage)
   wird der Strich auf volle Breite sichtbar. Bei Hover ebenfalls. */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--accent-light);
    transition: width var(--dur-normal) var(--ease);
}

.nav-links a:hover {
    color: white;
}

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

/* Scrolled: dunkel */
.nav.scrolled .nav-links a {
    color: var(--text-body);
    text-shadow: none;
}

.nav.scrolled .nav-links a::after {
    background: var(--accent);
}

.nav.scrolled .nav-links a:hover {
    color: var(--accent-deep);
}

.nav-cta {
    margin-left: 1.2rem;
}

/* CTA initial: glassy weiß; scrolled: solid accent.
   box-shadow als 4-Layer-Set definiert (alle initial transparent),
   damit Hover smooth interpoliert — sonst snappt box-shadow von
   "none" zu Multi-Shadow und wirkt als 2. Animations-Stufe. */
.nav .nav-cta {
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 18%, transparent),
        color-mix(in oklch, white 6%, transparent));
    border-color: color-mix(in oklch, white 25%, transparent);
    color: white;
    text-shadow: 0 1px 4px color-mix(in oklch, oklch(20% 0.04 60) 50%, transparent);
    box-shadow:
        inset 0 1px 0 transparent,
        0 0 0 0 transparent,
        0 0 0 transparent,
        0 0 0 transparent;
}

.nav .nav-cta:hover {
    /* BG identisch zum default — Gradients sind CSS-discrete und würden
       sonst snappen während Box-shadow smooth läuft (2-Stufen-Effekt).
       Glow läuft jetzt komplett über interpolierbare Properties:
       border-color, box-shadow, transform. Werte bewusst dezent. */
    color: white;
    border-color: color-mix(in oklch, white 45%, transparent);
    text-shadow: 0 1px 4px color-mix(in oklch, oklch(20% 0.04 60) 50%, transparent);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 32%, transparent),
        0 0 0 2px color-mix(in oklch, white 8%, transparent),
        0 4px 14px color-mix(in oklch, oklch(15% 0.04 60) 25%, transparent),
        0 0 18px color-mix(in oklch, white 12%, transparent);
}

/* CTA im scrolled-state — Bock-Orange Akzent statt Glass-Ghost.
   Solid accent-gradient + white text + accent-glow gibt dem CTA den Pop
   den er als Haupt-Action im Nav braucht. Inspiration: Kratzer-Pattern.

   box-shadow als 4-Layer-Set definiert in identischer Struktur zum
   :hover — damit der Hover-Glow smooth interpoliert (jedes Layer
   ändert nur Werte, keine Layer werden hinzugefügt/entfernt). */
.nav.scrolled .nav-cta {
    background: linear-gradient(to bottom,
        var(--accent),
        var(--accent-deep));
    border-color: var(--accent);
    color: white;
    text-shadow: 0 1px 2px color-mix(in oklch, oklch(15% 0.04 60) 35%, transparent);
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 25%, transparent),
        0 0 0 0 transparent,
        0 2px 8px color-mix(in oklch, var(--accent) 18%, transparent),
        0 0 0 transparent;
}

.nav.scrolled .nav-cta:hover {
    /* BG bleibt identisch zum default (saturated Bock-Orange, kein
       pastelliger Shift). Glow läuft komplett über box-shadow Layer
       deren Werte gegenüber dem default boosted werden — jeder Layer
       ist im default-state schon definiert, kein Layer wird neu
       hinzugefügt → smooth interpolation, kein 2-Stufen-Effekt.
       Werte bewusst dezent. */
    background: linear-gradient(to bottom,
        var(--accent),
        var(--accent-deep));
    color: white;
    border-color: var(--accent);
    text-shadow: 0 1px 2px color-mix(in oklch, oklch(15% 0.04 60) 35%, transparent);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 32%, transparent),
        0 0 0 2px color-mix(in oklch, var(--accent) 15%, transparent),
        0 4px 14px color-mix(in oklch, var(--accent) 32%, transparent),
        0 0 22px color-mix(in oklch, var(--accent) 22%, transparent);
}

/* Hamburger */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 101;
}

.nav-hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: white;
    border-radius: 2px;
    box-shadow: 0 1px 3px color-mix(in oklch, oklch(20% 0.04 60) 60%, transparent);
    transition: transform var(--dur-normal) var(--ease),
                opacity var(--dur-fast) var(--ease),
                background var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
    transform-origin: center;
}

.nav.scrolled .nav-hamburger span {
    background: var(--text);
    box-shadow: none;
}

/* Beim offenen Mobile-Menu: Hamburger immer dunkel (BG ist Cream) */
.nav-hamburger.open span {
    background: var(--text);
    box-shadow: none;
}

.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);
}

/* ─── Mega-Menu (Leistungs-Dropdown) ─────────────────────────── */

.nav-item-mega {
    position: static;  /* mega panel positioniert sich relativ zur nav */
}

.nav-link-mega {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: color-mix(in oklch, white 88%, transparent);
    text-shadow: 0 1px 6px color-mix(in oklch, oklch(20% 0.04 60) 50%, transparent);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease),
                text-shadow var(--dur-medium) var(--ease);
    position: relative;
}

/* Mega-Link Active-Indicator matcht den .nav-links a Strich-Style. */
.nav-link-mega::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--accent-light);
    transition: width var(--dur-normal) var(--ease);
}

.nav-link-mega:hover {
    color: white;
}

.nav-item-mega.active .nav-link-mega::after,
.nav-link-mega:hover::after {
    width: 100%;
}

.nav.scrolled .nav-link-mega {
    color: var(--text-body);
    text-shadow: none;
}

.nav.scrolled .nav-link-mega:hover,
.nav.scrolled .nav-item-mega.active .nav-link-mega {
    color: var(--accent-deep);
}

.nav.scrolled .nav-link-mega::after {
    background: var(--accent);
}

.nav-chevron {
    transition: transform var(--dur-fast) var(--ease);
    color: currentColor;
}

.nav-item-mega.active .nav-chevron {
    transform: rotate(180deg);
}

/* Mega-Panel — Dropdown unter der Nav.
   Opak (kein backdrop-filter) — Verlauf von --bg-surface (fast weiß)
   nach --bg-paper unten gibt warmen Pergament-Verlauf, der orange
   Akzent-Strich darunter ist die signature der Bock-Welt. */
.mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom,
        var(--bg-surface) 0%,
        var(--bg-paper) 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) 22%, transparent),
        0 4px 12px 0 color-mix(in oklch, var(--holz) 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;
    z-index: 99;
}

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

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

.mega-header {
    text-align: center;
    margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
    max-width: 640px;
    margin-inline: auto;
}

.mega-header h3 {
    margin-bottom: 0;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-variation-settings: 'opsz' 80, 'wght' 420, 'SOFT' 70;
}

.mega-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-width: 1100px;
    margin-inline: auto;
}

@media (max-width: 900px) {
    .mega-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mega-link {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.mega-link:hover {
    background: color-mix(in oklch, var(--accent-2) 6%, transparent);
    border-color: var(--accent-2-12);
    transform: translateY(-1px);
}

.mega-link-name {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
    font-variation-settings: 'opsz' 36, 'wght' 460, 'SOFT' 60;
}

.mega-link-desc {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}


/* Mobile-Menu — Fullscreen Overlay */
.nav-mobile {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--bg);
    background-image: var(--bg-mesh);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 6rem 2rem 4rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-medium) var(--ease),
                visibility var(--dur-medium) var(--ease);
}

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

.nav-mobile a {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--text);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-medium) var(--ease),
                transform var(--dur-medium) var(--ease),
                color var(--dur-fast) var(--ease);
}

.nav-mobile a:hover {
    color: var(--accent-deep);
}

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

.nav-mobile.open a:nth-child(1) { transition-delay: 0.1s; }
.nav-mobile.open a:nth-child(2) { transition-delay: 0.16s; }
.nav-mobile.open a:nth-child(3) { transition-delay: 0.22s; }
.nav-mobile.open a:nth-child(4) { transition-delay: 0.28s; }
.nav-mobile.open a:nth-child(5) { transition-delay: 0.34s; }

/* Mobile-Menu Leistungs-Sub-Section */
.nav-mobile-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.nav-mobile-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0;
    opacity: 0;
    transition: opacity var(--dur-medium) var(--ease) 0.05s;
}

.nav-mobile.open .nav-mobile-label {
    opacity: 1;
}

.nav-mobile-section a {
    font-size: clamp(1.15rem, 3.8vw, 1.6rem);
}


/* ─── 8. Hero ────────────────────────────────────────────────── */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

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

.hero-bg-img,
.hero-static-img,
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 60%;
    filter: saturate(1.05) brightness(0.95) contrast(1.05);
    will-change: transform, opacity;
}

/* Hero-Crossfade-Karussell: 3 Slides à 8s sichtbar, 1s crossfade overlap.
   Ken-Burns scale wandert kontinuierlich (linear, kein ease) damit kein
   Mikro-Plateau zwischen den Slides entsteht. */
.hero-slide {
    opacity: 0;
    animation: hero-crossfade 24s linear infinite;
}

.hero-slide-1 { animation-delay: 0s; opacity: 1; }
.hero-slide-2 { animation-delay: 8s; }
.hero-slide-3 { animation-delay: 16s; }

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

/* Single-Image-Fallback (legacy für Pages die noch hero-static-img nutzen) */
.hero-static-img {
    animation: hero-kenburns 28s ease-in-out infinite alternate;
}

@keyframes hero-kenburns {
    from { transform: scale(1.02); }
    to   { transform: scale(1.09); }
}

/* Auf Mobile: Bildausschnitt leicht justiert */
@media (max-width: 640px) {
    .hero-static-img,
    .hero-slide {
        background-position: 65% 55%;
    }
}

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

/* Overlay — diagonal mit oklch-Mix für sauberen Übergang.
   Schichten von oben nach unten:
   1. Gezielter Dim auf Headline-Area (oben-links) — Kontrast für weißen Text
   2. Mood-Dim unten-links — atmosphärische Tiefe
   3. Diagonaler Wash 135° — globaler Lesbarkeits-Layer
   4. Bottom-Fade ins bg — sanfter Übergang in nächste Section */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 65% 55% at 22% 40%,
            color-mix(in oklch, oklch(15% 0.04 60) 72%, transparent) 0%,
            color-mix(in oklch, oklch(15% 0.04 60) 32%, transparent) 55%,
            transparent 85%),
        radial-gradient(ellipse 80% 70% at 25% 70%,
            color-mix(in oklch, var(--bg) 0%, transparent) 0%,
            color-mix(in oklch, oklch(20% 0.04 60) 60%, transparent) 70%),
        linear-gradient(135deg,
            color-mix(in oklch, oklch(15% 0.04 60) 88%, transparent) 0%,
            color-mix(in oklch, oklch(18% 0.04 60) 65%, transparent) 35%,
            color-mix(in oklch, oklch(20% 0.04 60) 30%, transparent) 70%,
            transparent 100%),
        linear-gradient(to top,
            color-mix(in oklch, var(--bg) 90%, transparent) 0%,
            transparent 30%);
    pointer-events: none;
}

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

.hero-content {
    max-width: 720px;
}

.hero-content .label {
    color: color-mix(in oklch, white 80%, transparent);
    margin-bottom: 1.25rem;
}

.hero-content h1 {
    color: white;
    margin-bottom: 1.4rem;
    text-shadow: 0 2px 24px color-mix(in oklch, oklch(20% 0.04 60) 50%, transparent);
}

/* Hero-Headline-Akzent: "Peißenberg." in Bock-Orange (Logo-Ton).
   "Aus" bleibt weiß als Teil der h1, das em wird der Akzent.
   Glow gibt dem Wort eine subtile Lichtkante damit es vom dunklen
   Hero-BG abhebt ohne die Schrift zu verdunkeln. */
.hero-content h1 em {
    color: var(--accent);
    text-shadow:
        0 1px 3px color-mix(in oklch, oklch(15% 0.04 60) 60%, transparent),
        0 0 30px color-mix(in oklch, var(--accent) 35%, transparent);
}

.hero-content > p {
    color: color-mix(in oklch, white 85%, transparent);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    margin-bottom: 2rem;
    max-width: 540px;
    text-shadow: 0 2px 16px color-mix(in oklch, oklch(20% 0.04 60) 60%, transparent);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Hero-CTA — Rest sitzt eine Stufe ÜBER dem Ghost-Hover-Look damit
   keine Hover-Kollision mit dem Ghost-Button entsteht: stärkere
   Saturation (20%/10% statt 14%/6%), accent-60 Border, zusätzlicher
   sanfter accent-glow im box-shadow. Hover legt nochmal eine Stufe
   drauf. Edel statt aggressiv. */
.hero .btn-primary {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 20%, white),
        color-mix(in oklch, var(--accent) 10%, white));
    color: var(--accent-deep);
    border: 1px solid var(--accent-60);
    text-shadow: none;
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 60%, transparent),
        0 5px 16px color-mix(in oklch, oklch(15% 0.04 60) 14%, transparent),
        0 0 18px color-mix(in oklch, var(--accent) 14%, transparent);
}

.hero .btn-primary:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 32%, white),
        color-mix(in oklch, var(--accent) 18%, white));
    border-color: var(--accent-80);
    color: var(--accent-deep);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 65%, transparent),
        0 8px 22px color-mix(in oklch, oklch(15% 0.04 60) 18%, transparent),
        0 0 30px color-mix(in oklch, var(--accent) 28%, transparent);
}

.hero .btn-primary:active {
    transform: translateY(0);
}

/* Hero-Entrance (staggered blur+opacity+scale) */
.hero-enter {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
    filter: blur(8px);
    transition: opacity var(--dur-hero-enter) var(--ease),
                transform var(--dur-hero-enter) var(--ease),
                filter var(--dur-hero-enter) var(--ease);
}

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

/* Nach Filter-Transition-Ende: filter komplett droppen. Sonst bleibt
   filter: blur(0) als aktiver GPU-Layer → Subpixel-Artefakte.
   Wird per JS gesetzt: bei normalem Load nach transitionend('filter'),
   bei VT-Navigation synchron zusammen mit .in im pagereveal. */
.hero-enter.settled {
    filter: none !important;
}

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

/* Hero-Trust-Bar — unten, mit Dot-Separator */
.hero-trust {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity var(--dur-hero-enter) var(--ease) 0.6s,
                transform var(--dur-hero-enter) var(--ease) 0.6s;
}

.hero-trust.in {
    opacity: 1;
    transform: translateY(0);
}

.hero-trust-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.85rem 1.5rem;
    background: color-mix(in oklch, oklch(20% 0.04 60) 35%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in oklch, white 15%, transparent);
    width: fit-content;
    margin-inline: auto;
    box-shadow: var(--depth-soft);
    pointer-events: auto;
}

.hero-trust-item {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in oklch, white 90%, transparent);
}

.hero-trust-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--accent-2-light);
    flex-shrink: 0;
}


/* ─── 9. Atmo-Wrap (Beams in oklch + Particles) ──────────────── */

/* atmo-wrap ist Container-Marker für Sections die Edge-Light
   überlagern sollen (z 1 für direkte Container/Section-Children). */
.atmo-wrap {
    position: relative;
}

.atmo-wrap > .container,
.atmo-wrap > .section {
    position: relative;
    z-index: 1;
}


/* ─── 10. Editorial-Intro ────────────────────────────────────── */

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

.editorial-intro-inner {
    max-width: var(--container-narrow);
    margin-inline: auto;
    text-align: center;
}

.editorial-intro p.lead {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 400;
    line-height: 1.4;
    color: var(--text);
    text-wrap: balance;
    max-width: 780px;
    margin-inline: auto;
    font-variation-settings: 'opsz' 60, 'wght' 380, 'SOFT' 80;
}

.editorial-intro p.lead em {
    color: var(--accent-deep);
}

.editorial-intro-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(to right,
        transparent,
        var(--accent),
        transparent);
    margin: 1.5rem auto 1rem;
}


/* ─── 11. Leistungs-Karussell (zg-Pattern) ───────────────────── */

.zg-section {
    position: relative;
}

.zg-carousel {
    position: relative;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.zg-viewport {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.zg-viewport::-webkit-scrollbar {
    display: none;
}

/* Track: padding-left + ::after centern erste/letzte Slide.
   padding-block: oben/unten Platz damit der Tile-Shadow (bis ~50px
   Reichweite bei depth-hover) sauber ausfaded statt am viewport-clip
   hart abgeschnitten zu werden. */
.zg-track {
    display: flex;
    gap: 32px;
    padding-left: calc((100vw - min(60vw, 640px)) / 2);
    padding-block: 2rem 3.5rem;
}

.zg-track::after {
    content: '';
    flex: 0 0 calc((100vw - min(60vw, 640px)) / 2 - 32px);
}

@media (max-width: 767px) {
    .zg-track {
        gap: 16px;
        padding-left: calc((100vw - 82vw) / 2);
    }
    .zg-track::after {
        flex: 0 0 calc((100vw - 82vw) / 2 - 16px);
    }
}

.zg-slide {
    flex-shrink: 0;
    width: 60vw;
    max-width: 640px;
    scroll-snap-align: center;
    position: relative;
    text-decoration: none;
    color: inherit;
    display: block;
}

@media (max-width: 767px) {
    .zg-slide {
        width: 82vw;
    }
}

/* Scroll-driven scale: edge 0.94, center 1.0 */
@supports (animation-timeline: view()) {
    @keyframes zg-scale {
        0%   { transform: scale(0.94); opacity: 0.7; }
        50%  { transform: scale(1); opacity: 1; }
        100% { transform: scale(0.94); opacity: 0.7; }
    }

    .zg-slide {
        animation: zg-scale linear both;
        animation-timeline: view(inline);
        animation-range: contain 0% contain 100%;
    }
}

/* Image-Container — Tile-Depth + Glass-Highlight */
.zg-image {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-paper);
    box-shadow: var(--depth-rest);
    transition: box-shadow var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease);
}

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

.zg-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        color-mix(in oklch, oklch(15% 0.05 60) 88%, transparent) 0%,
        color-mix(in oklch, oklch(15% 0.05 60) 55%, transparent) 30%,
        color-mix(in oklch, oklch(15% 0.05 60) 18%, transparent) 55%,
        transparent 75%);
    z-index: 1;
    opacity: 0.85;
    transition: opacity var(--dur-normal) var(--ease);
}

.zg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
    z-index: 0;
}

.zg-slide:hover .zg-image {
    transform: translateY(-3px);
    box-shadow: var(--depth-hover);
}

.zg-slide:hover .zg-image img {
    transform: scale(1.05);
}

.zg-slide:hover .zg-image::after {
    opacity: 0.85;
}

/* Info — sitzt im Bild unten links, sichtbar vor Overlay */
.zg-info {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 2;
    color: white;
    text-shadow: 0 2px 12px color-mix(in oklch, oklch(15% 0.04 60) 70%, transparent);
}

.zg-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: white;
    background: linear-gradient(to bottom,
        var(--accent-2-light),
        var(--accent-2-deep));
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 12px color-mix(in oklch, var(--accent-2-deep) 50%, transparent),
                inset 0 1px 0 color-mix(in oklch, white 22%, transparent);
    margin-bottom: 0.65rem;
    text-shadow: none;
}

.zg-info h3 {
    color: white;
    margin-bottom: 0.4rem;
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    font-variation-settings: 'opsz' 36, 'wght' 460, 'SOFT' 60;
}

.zg-info p {
    color: color-mix(in oklch, white 88%, transparent);
    font-size: 0.92rem;
    max-width: 100%;
    line-height: 1.5;
}

/* Carousel Navigation */
.zg-nav-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 2rem;
}

.zg-prev,
.zg-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 60%, transparent),
        color-mix(in oklch, white 25%, transparent));
    border: 1px solid var(--border-strong);
    color: var(--text);
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 40%, transparent),
                var(--depth-soft);
    transition: all var(--dur-fast) var(--ease);
}

.zg-prev:hover,
.zg-next:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 14%, white),
        color-mix(in oklch, var(--accent) 6%, white));
    color: var(--accent-deep);
    border-color: var(--accent-40);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 55%, transparent),
                var(--depth-soft),
                var(--depth-glow);
}

.zg-prev:active,
.zg-next:active {
    transform: scale(0.95);
}

.zg-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.zg-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in oklch, var(--text) 18%, transparent);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    border: none;
    padding: 0;
}

.zg-dot:hover {
    background: color-mix(in oklch, var(--text) 35%, transparent);
}

/* Active Dot — grau-pill ohne Halo. */
.zg-dot.active {
    width: 22px;
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--text) 45%, transparent);
}

.zg-cta {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}


/* ─── 12. Werkstatt-Section (Bus + Story + Stats) ────────────── */
/* Reveal-Choreographie via animation-timeline: view() —
   jedes Element materialisiert kontinuierlich beim Scrollen,
   nicht binär wie ein IntersectionObserver-Reveal.            */

.about-section {
    position: relative;
}

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

.about-text > * {
    margin-bottom: 1.25rem;
}

.about-text > p {
    font-size: 1.02rem;
    color: var(--text-body);
}

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

.about-text h2 {
    margin-bottom: 1.25rem;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-block: 2rem;
    padding-block: 1.75rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.about-stat {
    text-align: left;
}

.about-stat-num {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--accent-2);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variation-settings: 'opsz' 80, 'wght' 420, 'SOFT' 70;
}

.about-stat-label {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Service-Area-Strip: Liste der bayrischen Orte als Pill-Wrap
   unter dem Engagement-Block. Macht das "Voralpenland"-Versprechen
   regional konkret + lokales SEO. */
.service-area {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-soft);
}

.service-area-eyebrow {
    margin-bottom: 0.85rem;
}

.service-area-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
}

.service-area-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-body);
    background: color-mix(in oklch, var(--bg-paper) 70%, transparent);
    border: 1px solid color-mix(in oklch, var(--accent-2) 15%, transparent);
    border-radius: var(--radius-pill);
}

.about-image-wrap {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--depth-rest);
}

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

.about-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 0;
}


/* ─── Scroll-Driven Animations für die Werkstatt-Section ──────── */

@property --at-progress {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

/* Fallback: ohne animation-timeline-Support sehen Items normal aus */
.at-eyebrow, .at-headline, .at-body, .at-stat, .at-image > img {
    opacity: 1;
}

@supports (animation-timeline: view()) {

    /* Image: scroll-driven Parallax-Zoom + Brightness ──────────── */
    @keyframes at-image-flow {
        from { transform: scale(1.12); filter: saturate(0.9) brightness(0.92); }
        to   { transform: scale(1);    filter: saturate(1.05) brightness(1); }
    }
    .at-image > img {
        animation: at-image-flow linear both;
        animation-timeline: view(block);
        animation-range: cover 0% cover 100%;
    }

    /* Eyebrow: kommt zuerst, kurzer Range ────────────────────── */
    @keyframes at-fade-up {
        from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
        to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
    }
    @keyframes at-fade-up-soft {
        from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
        to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
    }

    .at-eyebrow {
        animation: at-fade-up linear both;
        animation-timeline: view(block);
        animation-range: entry 5% entry 35%;
    }
    .at-headline {
        animation: at-fade-up linear both;
        animation-timeline: view(block);
        animation-range: entry 10% entry 45%;
    }
    .at-body-1 {
        animation: at-fade-up-soft linear both;
        animation-timeline: view(block);
        animation-range: entry 18% entry 55%;
    }
    .at-body-2 {
        animation: at-fade-up-soft linear both;
        animation-timeline: view(block);
        animation-range: entry 25% entry 65%;
    }

    /* Stats: jedes einzelne mit Versatz ────────────────────────── */
    @keyframes at-stat-rise {
        from { opacity: 0; transform: translateY(24px) scale(0.92); filter: blur(6px); }
        to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
    }
    .at-stat-1 {
        animation: at-stat-rise linear both;
        animation-timeline: view(block);
        animation-range: entry 35% entry 70%;
    }
    .at-stat-2 {
        animation: at-stat-rise linear both;
        animation-timeline: view(block);
        animation-range: entry 40% entry 75%;
    }
    .at-stat-3 {
        animation: at-stat-rise linear both;
        animation-timeline: view(block);
        animation-range: entry 45% entry 80%;
    }

    .at-body-3 {
        animation: at-fade-up-soft linear both;
        animation-timeline: view(block);
        animation-range: entry 55% entry 90%;
    }
}

@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .about-image-wrap {
        order: -1;
    }
}

@media (max-width: 480px) {
    .about-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}


/* ─── 12.5. USP-Section / Manifesto-Card ─────────────────────────
   Single-Card-Manifest mit Logo-Watermark INNEN als Stempel-Anker.
   Inspiriert vom PA-Grundstein-Brief, narrativ als handwerkliches
   Versprechen statt Karriere-Story (Bock hat keine Kontrast-Szene). */

.usp-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-top: clamp(5rem, 9vw, 10rem);
    padding-bottom: clamp(5rem, 9vw, 10rem);
}

/* Background-Watermark fällt weg — der Logo-Halo um die Card lebt
   jetzt als zentraler Anker (siehe .manifesto-ghost-halo). */

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

/* Stage: Wrapper der Halo + Card umfasst.
   Ghost ragt links/rechts aus der Card raus, Card sitzt z-1 darüber. */
.manifesto-stage {
    position: relative;
    isolation: isolate;
}

/* Logo-Halo — Original-Watermark-Setup (1:1 vom Pre-Manifest-Design),
   nur Width vergrößert damit er links/rechts aus der Card ragt.
   width: clamp(420px, 85vw, 1300px) → bei Desktop 1440 = ~1224px,
   ~250px Überstand auf jeder Seite der 720px Card. */
.manifesto-ghost-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(420px, 85vw, 1300px);
    aspect-ratio: 1779 / 1466;
    transform: translate(-50%, -50%);
    opacity: 0.18;
    mix-blend-mode: multiply;
    filter: blur(0.6px);
    border-radius: clamp(20px, 4vw, 40px);
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(
        ellipse 65% 70% at center,
        black 0%,
        black 60%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(
        ellipse 65% 70% at center,
        black 0%,
        black 60%,
        transparent 100%
    );
}

.manifesto-ghost-halo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.usp-header {
    text-align: center;
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
    max-width: 720px;
    margin-inline: auto;
}

.usp-header .label {
    margin-bottom: 0.85rem;
}

.usp-header h2 {
    margin-bottom: 0;
}

/* ─── Manifesto-Card ──────────────────────────────────────────── */

.manifesto-card {
    max-width: 720px;
    margin-inline: auto;
    position: relative;
    z-index: 1;
    /* Opakes Papier-Cream statt Glass — Zettel-Charakter wie PA Grundstein.
       bg-paper ist eingebetteter cream-Ton (94% L), wirkt als Briefblatt
       gegen den helleren Page-bg (96.5% L). */
    background: var(--bg-paper);
    border: 1px solid color-mix(in oklch, var(--accent-2) 12%, transparent);
    border-radius: var(--radius-lg);
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 3.5rem);
    /* Papier-Schatten: wide-soft (großflächiger Tiefen-Hauch) + close-pop.
       Bewusst leichter als depth-hover, weil ein Zettel auf dem Tisch
       schwebt nicht wie eine Glass-Card — er liegt. */
    box-shadow:
        0 24px 60px 0 color-mix(in oklch, var(--holz) 16%, transparent),
        0 4px 12px 0 color-mix(in oklch, var(--holz) 10%, transparent);
    overflow: hidden;
    isolation: isolate;
}

/* Glass-Highlight (::before) für Papier-Look reduziert — minimaler
   Lichteinfall statt voller Glass-Sheen. */
.manifesto-card::before {
    opacity: 0.45;
}

/* Glass-Highlight (Standard auf Surface-Cards) */
.manifesto-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

.manifesto-body {
    position: relative;
    z-index: 2;
}

.manifesto-body > * + * {
    margin-top: 1.4rem;
}

.manifesto-body p {
    font-family: var(--font-sans);
    font-size: clamp(0.96rem, 1.1vw, 1.04rem);
    font-weight: 300;
    line-height: 1.85;
    color: var(--text-body);
    max-width: none;
    text-wrap: pretty;
}

/* Highlight — gelb-honig Marker hinter zentralem Statement */
.manifesto-highlight {
    color: var(--text);
    font-weight: 500;
    background: linear-gradient(to top,
        color-mix(in oklch, var(--accent) 24%, transparent) 42%,
        transparent 42%);
    padding: 0 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Climax — der zentrale Statement-Satz, Serif-Drama */
.manifesto-body p.manifesto-climax {
    font-family: var(--font-serif);
    font-size: clamp(1.55rem, 2.8vw, 2.25rem);
    font-weight: 400;
    line-height: 1.22;
    color: var(--text);
    margin-block: clamp(2rem, 3.5vw, 2.8rem);
    letter-spacing: -0.012em;
    text-wrap: balance;
    font-variation-settings: 'opsz' 80, 'wght' 460, 'SOFT' 60;
}

.manifesto-body p.manifesto-climax em {
    color: var(--accent-2);
    font-variation-settings: 'opsz' 80, 'wght' 380, 'SOFT' 100;
}

/* Manifest-Quote — italic Serif mit Walnuss-Border */
.manifesto-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    font-weight: 400;
    line-height: 1.55;
    color: var(--text);
    border-left: 2px solid var(--accent-2);
    padding-left: clamp(1rem, 2vw, 1.5rem);
    margin-block: clamp(2rem, 3.5vw, 2.8rem);
    font-variation-settings: 'opsz' 36, 'wght' 380, 'SOFT' 100;
    text-wrap: pretty;
    max-width: none;
}

/* Signatur — Andreas Bock als italic-Serif Name + sans-tiny Title */
.manifesto-signature {
    display: flex;
    flex-direction: column;
    margin-top: clamp(2rem, 3.5vw, 2.8rem);
}

.manifesto-name {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.55rem, 2.4vw, 2rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.15;
    letter-spacing: -0.005em;
    font-variation-settings: 'opsz' 80, 'wght' 380, 'SOFT' 100;
}

.manifesto-title {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.45rem;
}

/* P.S. — italic-small mit border-top als Separator */
.manifesto-body p.manifesto-ps {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(0.88rem, 1vw, 0.95rem);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-muted);
    padding-top: clamp(1.75rem, 3vw, 2.25rem);
    border-top: 1px solid var(--border-soft);
    margin-top: clamp(2rem, 3.5vw, 2.8rem);
    font-variation-settings: 'opsz' 24, 'wght' 380, 'SOFT' 100;
    max-width: none;
}

@media (max-width: 600px) {
    .manifesto-ghost-halo {
        opacity: 0.06;
    }
}


/* ─── 12.7. Bock-Timeline (Spangler-Pattern, Zigzag oben/unten) ──
   5 Stationen mit horizontaler Rail. Cards alternieren über/unter
   der Rail (1,3,5 oben — 2,4 unten). Two-Observer-State-Machine:
     .bt-active        → Headlines + Rail-Container faden
     .bt-rail-active   → Rail-Fill (5s linear) + Stations + Step-Glows
   Mikro-Pausen alle 4% bei 8/12, 28/32, 48/52, 68/72, 88/92
   → Stations zünden synchron via --bt-sd 1s/2s/3s/4s/5s. */

#bock-timeline { position: relative; overflow: visible; }

#bock-timeline .section-header { margin-bottom: clamp(3rem, 6vw, 5rem); }

/* Pre-Entry States — translate (nicht transform) damit transform frei für Hover */
.bt-reveal-el {
    opacity: 0;
    translate: 0 12px;
    filter: blur(4px);
}
.bt-fog {
    opacity: 0;
    translate: 0 12px;
    scale: 0.99;
    filter: blur(10px);
}

/* Headline-Reveals on section enter */
#bock-timeline.bt-active .bt-reveal-el:not(.bt-step) {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
    transition: opacity 0.9s var(--ease) var(--bt-d, 0ms),
                translate 0.9s var(--ease) var(--bt-d, 0ms),
                filter 1.1s var(--ease) var(--bt-d, 0ms);
}

#bock-timeline.bt-active .bt-fog {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
    transition: opacity 1.1s var(--ease) 300ms,
                translate 1.1s var(--ease) 300ms,
                scale 1.1s var(--ease) 300ms,
                filter 1.4s var(--ease) 300ms;
}

/* Step Cards syncen mit Rail-Fill */
#bock-timeline.bt-rail-active .bt-step.bt-reveal-el {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
    transition: opacity 0.9s var(--ease) var(--bt-d, 0ms),
                translate 0.9s var(--ease) var(--bt-d, 0ms),
                filter 1.1s var(--ease) var(--bt-d, 0ms);
}


/* ─── Schongebaut-Layout: Rail oben, alle Cards nebeneinander darunter ─── */

.bt-zigzag {
    display: none;  /* Mobile: hidden, nur .bt-mobile-stepper */
}

@media (min-width: 1024px) {
    .bt-zigzag {
        display: block;
        position: relative;
        margin-top: clamp(2.5rem, 4vw, 3.5rem);
    }

    /* Rail OBEN über den Cards, volle Breite */
    .bt-rail {
        position: relative;
        height: 2px;
        background: color-mix(in oklch, var(--text) 8%, transparent);
        margin-bottom: clamp(3rem, 5vw, 4rem);
    }

    /* Card-Grid darunter — alle 5 Cards nebeneinander */
    .bt-cards-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        column-gap: clamp(1rem, 2vw, 2rem);
        align-items: stretch;
    }
}

/* Rail Fill — Walnuss-Gradient (edler als Orange) */
.bt-rail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
                    color-mix(in oklch, var(--accent-2) 40%, transparent) 0%,
                    color-mix(in oklch, var(--accent-2) 70%, transparent) 70%,
                    var(--accent-2) 100%);
    box-shadow: 0 0 8px var(--accent-2-25);
}

#bock-timeline.bt-rail-active .bt-rail::after {
    animation: btRailFill 5s linear 0.6s 1 forwards;
}
@keyframes btRailFill {
    0%   { width: 0%; }
    8%   { width: 10%; }
    12%  { width: 10%; }
    28%  { width: 30%; }
    32%  { width: 30%; }
    48%  { width: 50%; }
    52%  { width: 50%; }
    68%  { width: 70%; }
    72%  { width: 70%; }
    88%  { width: 90%; }
    92%  { width: 90%; }
    100% { width: 100%; }
}

/* ─── Stations (Walnuss, Spangler-Pattern: luftig statt solid) ───
   32px Kreise, BG bleibt cream — Stations wirken als Lichtpunkte
   auf der Rail, nicht als gefüllte Pillen. Settle-State zeigt nur
   Border + Glow + accent-light Number. */
.bt-station {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid color-mix(in oklch, var(--accent-2) 15%, transparent);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: color-mix(in oklch, var(--text) 35%, transparent);
}

/* Key-Station (Nr. 03 — die Mitte): 2px Border, stärkerer Flash.
   Visuelle Hierarchie auf der Rail, hebt den narrativen Mittelpunkt
   (ZUG-Engagement) hervor. */
.bt-station--key {
    border-color: color-mix(in oklch, var(--accent-2) 25%, transparent);
    border-width: 2px;
}

/* Standard Station-Flash — luftiger Settle (BG bleibt cream) */
#bock-timeline.bt-rail-active .bt-station {
    animation: btStationFlash 750ms ease-out var(--bt-sd, 0s) 1 forwards;
}
@keyframes btStationFlash {
    0%   { border-color: color-mix(in oklch, var(--accent-2) 15%, transparent); color: color-mix(in oklch, var(--text) 35%, transparent); box-shadow: none; }
    10%  { border-color: var(--accent-2); color: var(--text); box-shadow: 0 0 12px color-mix(in oklch, var(--accent-2) 24%, transparent); }
    35%  { border-color: color-mix(in oklch, var(--accent-2) 50%, transparent); color: var(--accent-2-light); box-shadow: 0 0 8px color-mix(in oklch, var(--accent-2) 14%, transparent); }
    100% { border-color: color-mix(in oklch, var(--accent-2) 35%, transparent); color: var(--accent-2-light); box-shadow: 0 0 6px color-mix(in oklch, var(--accent-2) 10%, transparent); }
}

/* Key-Station-Flash — stärker (peak-Glow 14px statt 12, settle 45% border statt 35) */
#bock-timeline.bt-rail-active .bt-station--key {
    animation: btStationFlashKey 750ms ease-out var(--bt-sd, 0s) 1 forwards;
}
@keyframes btStationFlashKey {
    0%   { border-color: color-mix(in oklch, var(--accent-2) 25%, transparent); color: color-mix(in oklch, var(--text) 35%, transparent); box-shadow: none; }
    10%  { border-color: var(--accent-2); color: var(--text); box-shadow: 0 0 14px color-mix(in oklch, var(--accent-2) 28%, transparent); }
    35%  { border-color: color-mix(in oklch, var(--accent-2) 60%, transparent); color: var(--accent-2-light); box-shadow: 0 0 10px color-mix(in oklch, var(--accent-2) 18%, transparent); }
    100% { border-color: color-mix(in oklch, var(--accent-2) 45%, transparent); color: var(--accent-2-light); box-shadow: 0 0 8px color-mix(in oklch, var(--accent-2) 12%, transparent); }
}

/* Connector-Linie von Card zur Rail — Walnuss */
@media (min-width: 1024px) {
    .bt-step::after {
        content: '';
        position: absolute;
        left: 50%;
        top: -1.75rem;
        width: 1px;
        height: 1.75rem;
        background: linear-gradient(to bottom,
                        color-mix(in oklch, var(--accent-2) 35%, transparent),
                        color-mix(in oklch, var(--accent-2) 12%, transparent));
        transform: translateX(-50%);
        pointer-events: none;
    }
}


/* ─── Step Cards — Bild über Text ─── */
.bt-step {
    position: relative;
    isolation: isolate;
    border: 1px solid color-mix(in oklch, var(--text) 8%, transparent);
    border-radius: var(--radius-md);
    background: linear-gradient(to bottom,
                    color-mix(in oklch, white 50%, transparent),
                    color-mix(in oklch, white 22%, transparent));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    box-shadow: var(--depth-soft);
    transition: transform 0.5s var(--ease),
                border-color 0.4s var(--ease),
                box-shadow 0.4s var(--ease);
}

/* Glass-Highlight auf jeder Card */
.bt-step > .bt-glass {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.bt-step-img {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    z-index: 0;
}

.bt-step-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease), filter 0.5s var(--ease);
    filter: saturate(0.95) brightness(0.96);
}

.bt-step:hover .bt-step-img img {
    transform: scale(1.04);
    filter: saturate(1.05) brightness(1);
}

.bt-step-body {
    position: relative;
    z-index: 2;
    padding: 1.1rem 1.25rem 1.25rem;
}

.bt-step-year {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-2);
    margin-bottom: 0.4rem;
}

.bt-step-title {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 0.4rem;
    letter-spacing: -0.005em;
    font-variation-settings: 'opsz' 36, 'wght' 460, 'SOFT' 60;
}

.bt-step-title em {
    color: var(--accent-2);
    font-style: italic;
}

.bt-step-desc {
    font-size: 0.85rem;
    color: var(--text-body);
    line-height: 1.55;
    margin: 0;
    text-wrap: pretty;
}

/* Key-Step (Position 3 — narrative Mitte: ZUG-Engagement).
   Permanent erhöhte Border + accent-2 BG-Tint + Top-Edge-Akzent als
   "Featured"-Badge. Walnuss ist gedämpfter als Spanglers Orange,
   deshalb stärkere Werte für gleichen Visual-Impact. */
.bt-step--key {
    border-color: color-mix(in oklch, var(--accent-2) 35%, transparent);
    background:
        linear-gradient(to bottom,
            color-mix(in oklch, white 55%, transparent),
            color-mix(in oklch, white 25%, transparent)),
        color-mix(in oklch, var(--accent-2) 8%, transparent);
}

/* Top-Edge-Akzent — feiner Walnuss-Strich oben als Badge.
   Nutzt ::before weil .bt-step::after schon die Connector-Linie
   zur Rail belegt (Zeile ~2052). */
.bt-step--key::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent-2) 30%,
        var(--accent-2-light) 50%,
        var(--accent-2) 70%,
        transparent 100%);
    z-index: 3;
    pointer-events: none;
}

/* Step-Glow on Rail-Hit — Walnuss */
#bock-timeline.bt-rail-active .bt-step:nth-child(1) { animation: btStepGlow 1.4s ease-out 1.0s 1 both; }
#bock-timeline.bt-rail-active .bt-step:nth-child(2) { animation: btStepGlow 1.4s ease-out 2.0s 1 both; }
#bock-timeline.bt-rail-active .bt-step:nth-child(3) { animation: btStepGlow 1.4s ease-out 3.0s 1 both; }
#bock-timeline.bt-rail-active .bt-step:nth-child(4) { animation: btStepGlow 1.4s ease-out 4.0s 1 both; }
#bock-timeline.bt-rail-active .bt-step:nth-child(5) { animation: btStepGlowHold 2s ease-out 5.0s 1 both; }

/* Key-Step bekommt eigenen, stärkeren Glow-Moment.
   Specificity (0,1,4,0) beats :nth-child(3) (0,1,3,0).
   2.0s Duration (statt 1.4s) damit der Peak länger steht. */
#bock-timeline.bt-rail-active .bt-step.bt-step--key {
    animation: btStepGlowKey 2.0s ease-out 3.0s 1 both;
}

@keyframes btStepGlow {
    0%   { border-color: color-mix(in oklch, var(--accent-2) 35%, transparent); box-shadow: 0 0 18px var(--accent-2-12), var(--depth-rest); }
    100% { border-color: color-mix(in oklch, var(--text) 8%, transparent); box-shadow: var(--depth-soft); }
}
@keyframes btStepGlowHold {
    0%   { border-color: color-mix(in oklch, var(--accent-2) 35%, transparent); box-shadow: 0 0 18px var(--accent-2-12), var(--depth-rest); }
    100% { border-color: color-mix(in oklch, var(--accent-2) 28%, transparent); box-shadow: 0 0 14px var(--accent-2-12), var(--depth-rest); }
}
/* Key-Glow: Hybrid Walnuss-Light Halo + Bock-Orange Inner-Pop.
   Walnuss-Light ist heller als accent-2 → sichtbarer großer Halo auf cream-BG.
   Bock-Orange als Inner-Akzent → Marken-Identity flackert auf
   (Position 3 = ZUG-Moment = sozialer Kern der Marke).
   3-Layer pro Phase: outer-Halo + inner-Marken-Pop + depth-rest. */
@keyframes btStepGlowKey {
    0% {
        border-color: color-mix(in oklch, var(--accent-2) 65%, transparent);
        box-shadow:
            0 0 60px color-mix(in oklch, var(--accent-2-light) 60%, transparent),
            0 0 28px var(--accent-40),
            var(--depth-rest);
    }
    35% {
        border-color: color-mix(in oklch, var(--accent-2) 55%, transparent);
        box-shadow:
            0 0 44px color-mix(in oklch, var(--accent-2-light) 40%, transparent),
            0 0 20px var(--accent-25),
            var(--depth-rest);
    }
    100% {
        border-color: color-mix(in oklch, var(--accent-2) 35%, transparent);
        box-shadow:
            0 0 28px color-mix(in oklch, var(--accent-2-light) 25%, transparent),
            0 0 14px var(--accent-15),
            var(--depth-rest);
    }
}

#bock-timeline.bt-rail-active .bt-step:hover {
    transform: translateY(-3px);
    box-shadow: var(--depth-hover), var(--depth-glow);
    border-color: var(--accent-25);
}


/* ─── Mobile Vertikaler Stepper (<1024px) ─── */
.bt-mobile-stepper {
    display: block;
    position: relative;
    margin-top: clamp(2rem, 5vw, 3rem);
}

@media (min-width: 1024px) {
    .bt-mobile-stepper { display: none; }
}

.bt-mobile-stepper {
    padding-left: 56px;
    counter-reset: bt-counter;
}

.bt-mobile-stepper::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 32px;
    bottom: 32px;
    width: 2px;
    background: color-mix(in oklch, var(--accent-2) 16%, transparent);
    border-radius: 1px;
    z-index: 0;
}

.bt-mobile-fill {
    position: absolute;
    left: 19px;
    top: 32px;
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom,
                    color-mix(in oklch, var(--accent-2) 60%, transparent) 0%,
                    var(--accent-2) 100%);
    box-shadow: 0 0 8px var(--accent-2-25);
    z-index: 1;
    transition: height 0.5s var(--ease);
    border-radius: 1px;
}

.bt-m-step {
    counter-increment: bt-counter;
    position: relative;
    padding: 0.5rem 0 2.5rem 0;
    opacity: 0;
    translate: 0 16px;
    transition: opacity 0.5s var(--ease), translate 0.5s var(--ease);
}

.bt-m-step.bt-m-visible {
    opacity: 1;
    translate: 0 0;
}

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

.bt-m-step::before {
    content: counter(bt-counter, decimal-leading-zero);
    position: absolute;
    left: -56px;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid color-mix(in oklch, var(--accent-2) 22%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in oklch, var(--accent-2) 70%, transparent);
    letter-spacing: 0.04em;
    z-index: 2;
    transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.bt-m-step.bt-rail-reached::before {
    border-color: var(--accent-2);
    background: var(--accent-2);
    color: white;
    box-shadow: 0 0 14px var(--accent-2-25);
}

.bt-m-step .bt-step-img {
    aspect-ratio: 16/10;
    border-radius: var(--radius-md);
    margin-bottom: 0.85rem;
    box-shadow: var(--depth-soft);
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bt-reveal-el, .bt-fog {
        opacity: 1 !important;
        transform: none !important;
        translate: 0 0 !important;
        filter: none !important;
        transition: none !important;
    }
    .bt-rail::after { width: 100% !important; animation: none !important; }
    .bt-station { animation: none !important; border-color: color-mix(in oklch, var(--accent-2) 35%, transparent) !important; color: var(--accent-2-light) !important; }
    .bt-station--key { border-color: color-mix(in oklch, var(--accent-2) 45%, transparent) !important; }
    #bock-timeline .bt-step { animation: none !important; }
    .bt-m-step { opacity: 1 !important; translate: 0 0 !important; }
    .bt-mobile-fill { height: 100% !important; }
}


/* ─── 13. Reviews-Section (Steinberger-Pattern + Atmo) ───────── */

.reviews-section {
    position: relative;
    overflow: hidden;
}

/* Atmo-Underlay: Bauplan-Bild mit invert-Filter (helles Pattern auf hellem BG) */
.reviews-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('images/atmo/plan-werkzeug-bleistift.jpg');
    background-size: cover;
    background-position: center;
    /* Auf hellem BG: NICHT invert. Stattdessen sepia + Hue für Honig-Wash. */
    filter: sepia(0.6) saturate(1.4) brightness(1.1) hue-rotate(-15deg);
    opacity: 0.08;
    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;
}

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

.reviews-header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.reviews-header .label {
    margin-bottom: 0.85rem;
}

.reviews-header h2 {
    margin-bottom: 1.5rem;
}

.reviews-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.2rem;
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 20%, transparent));
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-decoration: none;
    color: var(--text-body);
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 40%, transparent),
                var(--depth-soft);
    transition: all var(--dur-fast) var(--ease);
}

.reviews-badge:hover {
    border-color: var(--accent-40);
    color: var(--accent-deep);
}

.reviews-badge-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: var(--accent-2);
}

.reviews-badge-arrow {
    transition: transform var(--dur-fast) var(--ease);
}

.reviews-badge:hover .reviews-badge-arrow {
    transform: translateX(3px);
}

/* Grid mit 2 Reviews (Platzhalter) */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    max-width: 920px;
    margin-inline: auto;
}

.review-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 60%, transparent),
        color-mix(in oklch, white 30%, transparent));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--depth-rest);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease);
}

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

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

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

.review-source {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.review-stars {
    color: var(--accent-2);
    font-size: 0.92rem;
    letter-spacing: 0.04em;
}

.review-source-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.review-text {
    color: var(--text-body);
    font-size: 0.96rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: auto;
}

.review-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        var(--accent-2-light),
        var(--accent-2-deep));
    display: grid;
    place-items: center;
    font-family: var(--font-serif);
    font-weight: 500;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.review-author-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.review-name {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
}

.review-date {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Placeholder-Marker (Kratzer-Pattern für Demo-Daten) */
.review-card.placeholder-data {
    border-style: dashed;
    border-color: var(--accent-40);
}

.review-card.placeholder-data::after {
    content: 'Platzhalter';
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-deep);
    background: color-mix(in oklch, var(--accent) 12%, white);
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent-40);
    pointer-events: none;
}


/* ─── 14. CTA-Section ────────────────────────────────────────── */

.cta-section {
    position: relative;
    overflow: hidden;
}

.cta-inner {
    max-width: var(--container-narrow);
    margin-inline: auto;
    text-align: center;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
    background: linear-gradient(135deg,
        var(--accent-2-light) 0%,
        var(--accent-2-deep) 100%);
    border-radius: var(--radius-xl);
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: var(--depth-hover),
                0 0 60px var(--accent-2-25);
}

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

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

.cta-inner .label {
    color: color-mix(in oklch, white 80%, transparent);
    margin-bottom: 1rem;
}

.cta-inner h2 {
    color: white;
    margin-bottom: 1rem;
}

.cta-inner h2 em {
    color: color-mix(in oklch, white 95%, transparent);
    font-variation-settings: 'opsz' 144, 'wght' 380, 'SOFT' 100;
    text-decoration-color: color-mix(in oklch, white 50%, transparent);
}

.cta-inner > p {
    color: color-mix(in oklch, white 92%, transparent);
    margin-inline: auto;
    max-width: 580px;
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.cta-actions .btn-primary {
    background: linear-gradient(to bottom, white, color-mix(in oklch, white 88%, var(--accent-2-deep)));
    color: var(--accent-2-deep);
    border-color: color-mix(in oklch, white 60%, transparent);
}

.cta-actions .btn-primary:hover {
    background: white;
    color: var(--accent-2-deep);
}

.cta-actions .btn-ghost {
    background: color-mix(in oklch, white 12%, transparent);
    color: white;
    border-color: color-mix(in oklch, white 30%, transparent);
}

.cta-actions .btn-ghost:hover {
    background: color-mix(in oklch, white 22%, transparent);
    color: white;
    border-color: color-mix(in oklch, white 50%, transparent);
}

.cta-meta {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: color-mix(in oklch, white 80%, transparent);
}

.cta-meta a {
    color: white;
    border-bottom: 1px solid color-mix(in oklch, white 40%, transparent);
    transition: border-color var(--dur-fast) var(--ease);
}

.cta-meta a:hover {
    border-bottom-color: white;
}


/* ─── 15. Footer (mit Watermark) ─────────────────────────────── */

.footer {
    position: relative;
    padding-top: clamp(4rem, 7vw, 6rem);
    padding-bottom: 2rem;
    /* Transparent am Top — die Page-BG (Edge-Light + Vignetten) scheint
       durch, sodass es keine harte Kante zur Kontakt-Section gibt. Erst
       ab ~20% Footer-Höhe färbt sich der BG ein und fadet zu bg-deeper. */
    background: linear-gradient(to bottom,
        transparent 0%,
        var(--bg) 22%,
        var(--bg-deeper) 100%);
    /* clip statt hidden — clipt visuell ohne Scrollport zu erzeugen,
       wichtig für animation-timeline: view(block) */
    overflow: clip;
    isolation: isolate;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
    padding-top: clamp(2rem, 4vw, 3.5rem);
    border-top: 1px solid transparent;
    border-image: linear-gradient(to right,
        transparent,
        color-mix(in oklch, var(--accent) 30%, transparent),
        transparent) 1;
    position: relative;
    z-index: 2;
}

.footer-col h4 {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.1rem;
}

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

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

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

.footer-col ul li {
    margin-bottom: 0.4rem;
}

.footer-brand .nav-brand {
    margin-bottom: 1rem;
}

.footer-brand-link {
    display: inline-block;
    margin-bottom: 1.25rem;
}

.footer-brand-logo {
    height: 80px;
    width: auto;
    display: block;
}

@media (max-width: 640px) {
    .footer-brand-logo { height: 64px; }
}

.footer-brand p {
    color: var(--text-muted);
    font-size: 0.88rem;
    max-width: 280px;
}

.footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid transparent;
    border-image: linear-gradient(to right,
        transparent,
        color-mix(in oklch, var(--accent) 20%, transparent),
        transparent) 1;
    font-size: 0.82rem;
    color: var(--text-muted);
    position: relative;
    z-index: 2;
}

.footer-bar a {
    color: var(--text-muted);
    margin-left: 1.25rem;
    transition: color var(--dur-fast) var(--ease);
}

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

/* Footer-Watermark — Spangler-Pattern: zentral im Footer, scroll-driven
   entry (opacity + scale) während der Footer ins Viewport scrollt.
   Container füllt ganzen Footer (inset: 0), flex-zentriert das Wort. */
.footer-ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    font-family: var(--font-serif);
    font-size: clamp(7rem, 18vw, 18rem);
    font-weight: 400;
    line-height: 0.85;
    color: var(--text);
    letter-spacing: -0.04em;
    opacity: 0.04;
    z-index: 0;
    font-variation-settings: 'opsz' 144, 'wght' 380, 'SOFT' 100;
}

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

@media (prefers-reduced-motion: reduce) {
    .footer-ghost {
        opacity: 0.04 !important;
        transform: none !important;
    }
}


/* ─── 16. View Transitions ───────────────────────────────────── */

@view-transition {
    navigation: auto;
}

/* Slide-Hub 4%, Duration 0.32s symmetrisch — Direction-Hint sichtbar
   ohne dass mid-page-Klicks im Header den Old/New-Snapshot-Versatz
   visualisieren. Hero-Enter wird im pagereveal synchron gesetzt, sodass
   der New-Snapshot bereits den fertigen Hero zeigt → eine Bewegung statt
   zwei Wellen (Slide + nachgelagerter Hero-Stagger). */
::view-transition-old(root) {
    animation: page-slide-out 0.32s var(--ease) both;
}

::view-transition-new(root) {
    animation: page-slide-in 0.32s var(--ease) both;
}

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

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

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

/* Fallback wenn Chrome die Cross-Doc-VT skipped (Load zu langsam,
   reduced-motion etc.) — page-transition.js setzt dann html.page-enter,
   das body via dieser Regel animiert. Verhindert harten Cut. */
html.page-enter body {
    animation: page-slide-in 0.32s var(--ease) both;
}

html.nav-backwards.page-enter body {
    animation: page-slide-in-rev 0.32s var(--ease) both;
}


/* ─── 17. 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;
    }
    .hero-slide { animation: none; opacity: 1; }
    .hero-slide-1 { opacity: 1; }
    .hero-slide-2, .hero-slide-3 { opacity: 0; }
    .page-grain { opacity: 0.4; }
}

@media print {
    .nav, .nav-mobile, .hero-trust, .footer-ghost,
    .page-bg, .page-grain, .reviews-section::before {
        display: none !important;
    }
    .hero { min-height: auto; }
    body { background: white; }
}


/* ─── 18. Responsive ─────────────────────────────────────────── */

@media (max-width: 980px) {
    .nav-links,
    .nav-cta {
        display: none;
    }
    .nav-hamburger {
        display: flex;
    }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .about-image-wrap {
        order: -1;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .hero-trust-inner {
        gap: 0.6rem;
        padding: 0.6rem 1rem;
    }
    .hero-trust-item {
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }
    .hero-trust-dot {
        width: 2px;
        height: 2px;
    }
    .about-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-bar a {
        margin-left: 0;
        margin-right: 1.25rem;
    }
}


/* ─── 19. Onboarding-Form (Multi-Step Kontakt, Kratzer-Pattern) ───
   6 Steps: Bereich → Disziplin → Detail → Vorhaben → Termin → Kontakt
   Glass-Cards + Walnuss-Akzent für selected-States (Bock-Look statt
   Kratzer's Orange — passt zum existing Form-System). */

.onboarding-section {
    padding-block: var(--section-pad) clamp(4rem, 6vw, 6rem);
    position: relative;
}

.onboarding-section .section-header {
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

/* Progress-Indicator */
.ob-progress {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ob-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    cursor: default;
    transition: opacity var(--dur-normal) var(--ease);
    opacity: 0.45;
    flex-shrink: 0;
}

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

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

.ob-step-num {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in oklch, var(--accent-2) 18%, transparent);
    border-radius: 50%;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: color-mix(in oklch, var(--text) 40%, transparent);
    background: var(--bg);
    transition: background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
}

.ob-step-indicator.active .ob-step-num {
    background: var(--accent-2);
    border-color: var(--accent-2);
    color: white;
    box-shadow: 0 0 18px var(--accent-2-25);
}

.ob-step-indicator.completed .ob-step-num {
    background: var(--bg);
    border-color: color-mix(in oklch, var(--accent-2) 45%, transparent);
    color: var(--accent-2);
}

.ob-step-label {
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.ob-step-indicator.active .ob-step-label {
    color: var(--text);
}

.ob-step-line {
    flex: 1;
    height: 1px;
    background: var(--border);
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
    min-width: 8px;
}

.ob-step-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent-2);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-medium) var(--ease);
}

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

@media (max-width: 640px) {
    .ob-step-label { display: none; }
    .ob-step-num { width: 32px; height: 32px; font-size: 10px; }
    .ob-progress { margin-bottom: 2rem; gap: 0.25rem; }
}

/* Form-Wrapper */
.ob-form-wrapper {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: var(--bg-paper);
    border: 1px solid color-mix(in oklch, var(--accent-2) 12%, transparent);
    border-radius: var(--radius-lg);
    box-shadow:
        0 24px 60px 0 color-mix(in oklch, var(--holz) 16%, transparent),
        0 4px 12px 0 color-mix(in oklch, var(--holz) 10%, transparent);
    overflow: hidden;
    position: relative;
}

/* Step */
.ob-step { display: none; }
.ob-step.active { display: block; }

.ob-step-title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 400;
    margin-bottom: 0.6rem;
    color: var(--text);
    text-align: center;
    font-variation-settings: 'opsz' 80, 'wght' 420, 'SOFT' 70;
}

.ob-step-subtitle {
    font-size: 0.9rem;
    color: var(--text-body);
    margin-bottom: 2.25rem;
    text-align: center;
    max-width: 460px;
    margin-inline: auto;
    line-height: 1.6;
}

/* Type-Buttons */
.ob-type-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

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

.ob-type-btn {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.75rem 1.5rem;
    background: linear-gradient(to bottom,
                    color-mix(in oklch, white 65%, transparent),
                    color-mix(in oklch, white 28%, transparent));
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 40%, transparent),
        var(--depth-soft);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
}

/* Glass-Highlight (Tile-Standard, CLAUDE.md) */
.ob-type-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    opacity: 0.55;
    transition: opacity var(--dur-normal) var(--ease);
}

.ob-type-btn > * {
    position: relative;
    z-index: 1;
}

.ob-type-btn:hover {
    background: linear-gradient(to bottom,
                    color-mix(in oklch, var(--accent-2) 8%, white),
                    color-mix(in oklch, var(--accent-2) 4%, white));
    border-color: color-mix(in oklch, var(--accent-2) 38%, transparent);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 50%, transparent),
        var(--depth-rest),
        0 0 28px color-mix(in oklch, var(--accent-2) 14%, transparent);
}

.ob-type-btn:hover::before {
    opacity: 0.75;
}

.ob-type-btn.selected {
    background: linear-gradient(to bottom,
                    var(--accent-2-light),
                    var(--accent-2-deep));
    border-color: var(--accent-2);
    color: white;
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 28%, transparent),
        var(--depth-rest),
        0 0 36px color-mix(in oklch, var(--accent-2) 32%, transparent);
}

.ob-type-btn.selected::before {
    opacity: 0.18;
}

.ob-type-btn.selected .ob-type-title,
.ob-type-btn.selected .ob-type-desc {
    color: white;
}

.ob-type-icon {
    font-size: 1.35rem;
    line-height: 1;
    margin-bottom: 0.2rem;
}

.ob-type-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text);
    transition: color var(--dur-normal) var(--ease);
    font-variation-settings: 'opsz' 36, 'wght' 460, 'SOFT' 60;
}

.ob-type-desc {
    font-size: 0.78rem;
    color: var(--text-body);
    line-height: 1.5;
    transition: color var(--dur-normal) var(--ease);
}

/* Service-Sections (Multi-Disziplin: mehrere Chip-Sets mit Sub-Headern) */
.ob-service-section {
    margin-bottom: 1.75rem;
}

.ob-service-section[hidden] { display: none; }

.ob-service-section-header {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-2);
    text-align: center;
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid color-mix(in oklch, var(--accent-2) 18%, transparent);
}

/* Service-Chips */
.ob-service-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    min-height: 60px;
    justify-content: center;
}

.ob-service-grid[hidden] { display: none; }
.ob-service-grid-static { min-height: 0; margin-bottom: 1.5rem; }

.ob-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-body);
    background: linear-gradient(to bottom,
                    color-mix(in oklch, white 65%, transparent),
                    color-mix(in oklch, white 28%, transparent));
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 50%, transparent),
        var(--depth-soft);
    cursor: pointer;
    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);
}

.ob-chip:hover {
    background: linear-gradient(to bottom,
                    color-mix(in oklch, var(--accent-2) 8%, white),
                    color-mix(in oklch, var(--accent-2) 4%, white));
    border-color: color-mix(in oklch, var(--accent-2) 40%, transparent);
    color: var(--text);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 55%, transparent),
        var(--depth-rest),
        0 0 18px color-mix(in oklch, var(--accent-2) 10%, transparent);
}

.ob-chip.selected {
    background: linear-gradient(to bottom,
                    var(--accent-2-light),
                    var(--accent-2-deep));
    border-color: var(--accent-2);
    color: white;
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 28%, transparent),
        0 6px 18px color-mix(in oklch, var(--accent-2) 32%, transparent),
        0 0 24px color-mix(in oklch, var(--accent-2) 18%, transparent);
}

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

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

.ob-field { margin-bottom: 1.25rem; }

.ob-field label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.45rem;
}

.ob-field-optional {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    opacity: 0.65;
}

.ob-field input,
.ob-field textarea {
    width: 100%;
    padding: 0.7rem 0;
    font-family: var(--font-sans);
    font-size: 0.96rem;
    font-weight: 400;
    color: var(--text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    outline: none;
    transition: border-color var(--dur-normal) var(--ease);
}

.ob-field textarea {
    resize: vertical;
    min-height: 88px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    line-height: 1.6;
}

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

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

.ob-field input:user-invalid,
.ob-field textarea:user-invalid {
    border-color: oklch(55% 0.16 25);
}

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

/* Summary */
.ob-summary {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(to bottom,
                    color-mix(in oklch, var(--accent-2) 8%, transparent),
                    color-mix(in oklch, var(--accent-2) 4%, transparent));
    border: 1px solid color-mix(in oklch, var(--accent-2) 30%, transparent);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ob-summary-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-2);
}

.ob-summary-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.96rem;
    color: var(--text);
}

/* Nav */
.ob-nav {
    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;
}

.ob-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-body);
    padding: 0.65rem 1.1rem;
    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);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 40%, transparent),
        var(--depth-soft);
    cursor: pointer;
    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);
}

.ob-back:hover {
    background: linear-gradient(to bottom,
                    color-mix(in oklch, var(--accent-2) 8%, white),
                    color-mix(in oklch, var(--accent-2) 3%, white));
    border-color: color-mix(in oklch, var(--accent-2) 35%, transparent);
    color: var(--accent-2);
    transform: translateX(-2px);
}

/* Form-Submit-Buttons (Weiter / Anfrage senden) — edler im Form-Kontext */
.ob-form-wrapper .btn-primary {
    padding: 0.95rem 2.25rem;
    font-size: 0.86rem;
    letter-spacing: 0.05em;
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 26%, transparent),
        0 4px 14px color-mix(in oklch, oklch(15% 0.04 60) 22%, transparent),
        0 1px 4px color-mix(in oklch, oklch(15% 0.04 60) 14%, transparent);
}

.ob-form-wrapper .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 32%, transparent),
        0 8px 24px color-mix(in oklch, oklch(15% 0.04 60) 28%, transparent),
        0 0 32px var(--accent-2-25);
}

/* Disable Next-Button bei fehlender Auswahl
   Step 0: Sector (single-select)
   Step 1: Disziplin (multi-select, mind. 1 nötig)
   Step 2: Detail (multi-select, mind. 1 nötig)
   Step 3: Termin (single-select) */
.ob-step[data-step="0"]:not(:has(.ob-type-btn.selected)) [data-next],
.ob-step[data-step="1"]:not(:has(.ob-type-btn.selected)) [data-next],
.ob-step[data-step="2"]:not(:has(.ob-chip.selected)) [data-next],
.ob-step[data-step="3"]:not(:has(.ob-chip.selected)) [data-next] {
    opacity: 0.35;
    pointer-events: none;
}

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

.ob-legal a {
    color: var(--accent-2);
    border-bottom: 1px solid color-mix(in oklch, var(--accent-2) 25%, transparent);
    transition: color var(--dur-fast) var(--ease);
}

.ob-legal a:hover {
    color: var(--accent-2-deep);
    border-color: var(--accent-2);
}

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

.ob-shake {
    animation: ob-shake 0.4s var(--ease);
}

/* Success-State */
.ob-success {
    display: none;
    text-align: center;
    padding: 2rem 0;
}

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

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

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

.ob-success h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    margin-bottom: 1rem;
}

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

.ob-success-sub a {
    color: var(--accent-2);
    border-bottom: 1px solid color-mix(in oklch, var(--accent-2) 40%, transparent);
}


/* Direkt-Kontakt-Karten neben Form */
.kontakt-alt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1200px;
    margin: clamp(3rem, 5vw, 4.5rem) auto 0;
}

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

.kontakt-alt-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--bg-paper);
    border: 1px solid color-mix(in oklch, var(--accent-2) 12%, transparent);
    border-radius: var(--radius-lg);
    box-shadow: var(--depth-rest);
    transition: border-color var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
}

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

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

.kontakt-alt-card:hover {
    border-color: color-mix(in oklch, var(--accent-2) 35%, transparent);
    transform: translateY(-2px);
    box-shadow: var(--depth-hover);
}

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

.kontakt-alt-card h3 {
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
    margin-bottom: 0.85rem;
    color: var(--text);
}

.kontakt-alt-tel {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 2vw, 1.55rem);
    font-weight: 400;
    color: var(--accent-2);
    margin-bottom: 0.85rem;
    border-bottom: 1px solid color-mix(in oklch, var(--accent-2) 25%, transparent);
    padding-bottom: 0.18rem;
    transition: color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
    text-decoration: none;
    font-variation-settings: 'opsz' 60, 'wght' 420, 'SOFT' 70;
}

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

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