/* =========================================================================
   SCHREINEREI RUDOLF VOGEL KG
   Design Tokens + Base
   Hellraum mit Vogel-Brown (Marken-Anker) + Honig-Gold (Atmo-Light)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..600,30..100&family=Manrope:wght@300..600&display=swap');

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

    /* ─ Vogel-Brown — Marken-Anker (aus Logo #6a3412) ──────────────── */
    --accent:       oklch(34% 0.085 50);
    --accent-light: oklch(48% 0.095 55);
    --accent-deep:  oklch(26% 0.075 48);
    --accent-soft:  oklch(62% 0.070 60);

    /* ─ Honig-Gold — echtes Markengold #FEBF00 (gemessener sRGB-Wert) ─
       Skala mit den bisherigen relativen Abständen um den echten Wert. */
    --honig:        oklch(84% 0.172 84);
    --honig-light:  oklch(92% 0.117 87);
    --honig-soft:   oklch(78% 0.137 81);
    --honig-deep:   oklch(70% 0.162 81);

    /* ─ Text ─ warm-anthrazit mit Bronze-Stich ─────────────────────── */
    --text:         oklch(22% 0.030 55);
    --text-body:    oklch(40% 0.045 55);
    --text-muted:   oklch(58% 0.040 70);
    --text-soft:    oklch(50% 0.035 58);

    /* ─ Holz-Hauch — Schatten, Atmo ────────────────────────────────── */
    --holz:         oklch(48% 0.080 50);
    --holz-warm:    oklch(64% 0.085 60);

    /* ─ Borders ────────────────────────────────────────────────────── */
    --border:       color-mix(in oklch, var(--text) 12%, transparent);
    --border-soft:  color-mix(in oklch, var(--text) 8%, transparent);
    --border-strong:color-mix(in oklch, var(--text) 22%, transparent);

    /* ─ Accent-Opacity-Stufen ──────────────────────────────────────── */
    --accent-04: color-mix(in oklch, var(--accent) 4%, transparent);
    --accent-08: color-mix(in oklch, var(--accent) 8%, transparent);
    --accent-12: color-mix(in oklch, var(--accent) 12%, transparent);
    --accent-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);

    /* ─ Honig-Opacity-Stufen ───────────────────────────────────────── */
    --honig-08: color-mix(in oklch, var(--honig) 8%, transparent);
    --honig-15: color-mix(in oklch, var(--honig) 15%, transparent);
    --honig-25: color-mix(in oklch, var(--honig) 25%, transparent);
    --honig-40: color-mix(in oklch, var(--honig) 40%, transparent);

    /* ─ Depth & Glass ──────────────────────────────────────────────── */
    --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(--honig-25);
    --depth-soft:   0 4px 14px 0 color-mix(in oklch, var(--holz) 14%, transparent);

    --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(--honig) 16%, transparent) 100%);

    /* ─ Fonts ──────────────────────────────────────────────────────── */
    --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) macht
       große Headlines feinstrichig, SOFT rundet die Formen. wght bewusst
       auf Light-Niveau (h1 300!) — die filigrane Anmutung aus dem
       Inter-Zwischenstand auf Fraunces übertragen. */
    --font-h1: 'opsz' 144, 'wght' 300, 'SOFT' 90;
    --font-h2: 'opsz' 80,  'wght' 340, 'SOFT' 70;
    --font-h3: 'opsz' 36,  'wght' 420, 'SOFT' 50;
    --font-h4: 'opsz' 14,  'wght' 520, 'SOFT' 40;

    /* ─ Easing & Durations ─────────────────────────────────────────── */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.2s;
    --dur-medium: 0.45s;
    --dur-slow: 0.7s;
    --dur-reveal: 0.9s;
    --dur-hero-enter: 1.4s;
    --dur-crossfade: 21s;

    /* ─ Layout ─────────────────────────────────────────────────────── */
    --container-pad: clamp(1rem, 3vw, 2.5rem);
    --container-max: 1280px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 100px;

    --nav-h: 78px;
}

/* ── Display-P3 Override für moderne Displays ─────────────────────── */
/* Honig steht bewusst NICHT mehr hier: die oklch()-Honig-Skala in :root
   ist gamut-aware — der Browser rendert sie auf P3-Displays automatisch
   optimal. Ein expliziter P3-Override würde nur den echten Markenwert
   (#FEBF00) überschreiben. --accent bleibt P3-gepflegt. */
@supports (color: color(display-p3 1 0 0)) {
    @media (color-gamut: p3) {
        :root {
            --accent:       color(display-p3 0.42 0.20 0.07);
            --accent-light: color(display-p3 0.56 0.30 0.13);
            --accent-deep:  color(display-p3 0.32 0.15 0.05);
        }
    }
}

/* ── @property für animatable customs ─────────────────────────────── */
@property --ghost-progress {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
}

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

/* =========================================================================
   RESET & BASE
   ========================================================================= */

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

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.62;
    font-weight: 400;
    color: var(--text);
    background: var(--bg);
    overflow-x: clip;
}

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

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

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

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

h1 {
    font-size: clamp(2.2rem, 5.2vw, 4.2rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    font-variation-settings: var(--font-h1);
}
h2 {
    font-size: clamp(1.75rem, 3.6vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    font-variation-settings: var(--font-h2);
}
h3 {
    font-size: clamp(1.3rem, 2.2vw, 1.85rem);
    line-height: 1.24;
    letter-spacing: -0.01em;
    font-variation-settings: var(--font-h3);
}
h4 {
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.32;
    letter-spacing: -0.005em;
    font-variation-settings: var(--font-h4);
}

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

em {
    /* Fraunces-Akzent: filigran, font-style normal (Vogel-Stil, kein
       kursiv), Farbe bleibt Vogel-Brown wie gewünscht. */
    font-style: normal;
    color: var(--accent);
    font-variation-settings: 'opsz' 144, 'wght' 400, 'SOFT' 80;
}

/* ── Editorial-Highlight (Brown + Honig-Underline) ────────────────── */
/* Brown-Accent + dünne Honig-Gold-Underline darunter — funktioniert in
   Bild-Layouts wo der Marker-Stil (Papier-Vokabular) fehl am Platz wäre */
.highlight {
    color: var(--accent);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--honig);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;
}

/* ── Container ─────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-inline: var(--container-pad);
}

/* ── Label / Eyebrow ───────────────────────────────────────────────── */
.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: 0;
}
/* Eyebrow + Headline-em teilen sich eine Akzentfarbe (Vogel-Brown) —
   ein konsistentes Text-Akzent-System statt Gold-Eyebrow neben braunem
   em. Gold bleibt der Atmo-Light-Akzent (Hero-„1948“, Glows). */
.label-accent { color: var(--accent); }

/* ── Caption-Italic für Polaroid-Captions, Lightbox-Captions etc. ──── */
.hand {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.005em;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.05rem 2.3rem;
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: 'opsz' 16, 'wght' 420, 'SOFT' 50;
    letter-spacing: 0.01em;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    backdrop-filter: blur(12px);
    transition: background var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease),
                color var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
}

.btn-primary {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent-light) 80%, white 20%),
        var(--accent));
    color: white;
    border: 1px solid var(--accent-40);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 22%, transparent),
        0 4px 12px color-mix(in oklch, var(--accent) 25%, transparent),
        0 1px 3px color-mix(in oklch, var(--accent) 14%, transparent);
}
.btn-primary:hover {
    background: linear-gradient(to bottom,
        var(--accent-light),
        var(--accent-deep));
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 26%, transparent),
        0 8px 22px color-mix(in oklch, var(--accent) 35%, transparent),
        0 2px 6px color-mix(in oklch, var(--accent) 18%, transparent),
        0 0 24px var(--honig-25);
}

.btn-ghost {
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 40%, transparent));
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 30%, transparent),
        0 3px 10px color-mix(in oklch, var(--holz) 18%, transparent);
}
.btn-ghost:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--honig) 14%, white),
        color-mix(in oklch, var(--honig) 6%, white));
    border-color: var(--accent-40);
    color: var(--accent-deep);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 36%, transparent),
        0 8px 22px color-mix(in oklch, var(--holz) 22%, transparent),
        0 0 24px var(--honig-25);
}

.btn-arrow::after {
    content: '→';
    transition: transform var(--dur-fast) var(--ease);
}
.btn-arrow:hover::after {
    transform: translateX(3px);
}

/* ── Reveal-System (scroll-timeline + Fallback) ───────────────────── */
.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);
}

@supports (animation-timeline: view()) {
    @keyframes reveal-flow {
        from { opacity: 0; transform: translateY(20px) scale(0.985); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .reveal {
        animation: reveal-flow linear both;
        animation-timeline: view();
        animation-range: entry 5% entry 60%;
    }
}

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

/* ── Section ──────────────────────────────────────────────────────── */
.section {
    padding-block: clamp(4rem, 8vw, 7rem);
    position: relative;
}

/* ── Page-BG (KEIN fixed background — zu teuer beim Scroll) ──────── */
/* Multi-Layer fixed gradients zwingen den Browser, bei JEDEM Scroll-Frame
   den ganzen Background neu zu rendern. Stattdessen: einfacher Body-BG
   plus sections setzen ihre Hauche selbst. */

/* ── Atmo-Underlay für Hellraum-Sections (Bock/Hastreiter-Pattern) ─── */
/* Sepia + Multiply auf weißem Bauplan-Bild → subtile Werkstatt-Skizze
   durchs Pergament. Verwende per HTML mit:
   <section class="section section-atmo" style="--atmo-image: url('...')">
*/
.section-atmo {
    position: relative;
    isolation: isolate;
    /* Default-Bleed: Atmo reicht 47px unter die Section in den Folge-Sektor.
       Per-Section override via .sp-process.section-atmo { --atmo-bleed: 120px }. */
    --atmo-bleed: 47px;
}
.section-atmo > * {
    position: relative;
    z-index: 1;
}
.section-atmo::after {
    content: '';
    position: absolute;
    /* Inset koppelt an --atmo-bleed → Mask-Bottom-Fade endet exakt an
       der Section-Grenze, fadet aus IM Bleed-Bereich. So ist das Atmo
       an section.bottom voll sichtbar (100% mask) und verschwindet erst
       in der Folge-Section. */
    inset: 0 0 calc(-1 * var(--atmo-bleed)) 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    /* Bock-Pattern (Hellraum-Standard): Bild HELLER (brightness > 1) statt
       dunkler. Damit bleibt weißes Bauplan-Pattern weiß, nur die Linien sind
       als feine Akzente sichtbar. Hue-rotate dreht in Honig-Richtung. */
    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% - var(--atmo-bleed)),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 120px,
        black calc(100% - var(--atmo-bleed)),
        transparent 100%
    );
    pointer-events: none;
}

/* Per-Section Atmo-Bilder + Bleed-Overrides */
.sp-section.section-atmo::after      { background-image: url('/images/atmo/bauplan-arch-schnitte.jpg'); }
.sp-editorial.section-atmo::after    { background-image: url('/images/atmo/bauplan-arch-treppe.jpg'); }
.sp-process.section-atmo            { --atmo-bleed: 120px; }
.sp-process.section-atmo::after      { background-image: url('/images/atmo/bauplan-arch-hochbau.jpg'); }
.jobs-list.section-atmo::after       { background-image: url('/images/atmo/plan-werkzeug-bleistift.jpg'); }
.reviews-section.section-atmo::after { background-image: url('/images/atmo/plan-werkzeug-bleistift.jpg'); }

/* Split-Section: 3 Honig-Gold Atmo-Beams organisch verteilt
   (Kratzer-Pattern für Hellraum — radial-gradient ohne mix-blend für
   Performance, soft-edge durch Gradient-Stops statt filter:blur) */
.split-section {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: linear-gradient(180deg,
        var(--bg) 0%,
        var(--bg-tint) 45%,
        var(--bg) 100%);
}
.split-section > .container {
    position: relative;
    z-index: 1;
}

.split-beam {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Beam 1 — Hauptlicht von oben mitte (Studio-Spotlight) */
.split-beam-1 {
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(500px, 65vw, 900px);
    height: clamp(400px, 50vw, 700px);
    background: radial-gradient(ellipse,
        var(--honig-25) 0%,
        color-mix(in oklch, var(--honig) 12%, transparent) 30%,
        transparent 65%);
}

/* Beam 2 — sekundär links unten (warm-organisch) */
.split-beam-2 {
    bottom: 5%;
    left: -8%;
    width: clamp(300px, 38vw, 520px);
    height: clamp(300px, 38vw, 520px);
    background: radial-gradient(circle,
        color-mix(in oklch, var(--honig) 18%, transparent) 0%,
        color-mix(in oklch, var(--honig) 6%, transparent) 35%,
        transparent 65%);
}

/* Beam 3 — sekundär rechts mitte (Balance + diagonal-fluss) */
.split-beam-3 {
    top: 35%;
    right: -10%;
    width: clamp(280px, 35vw, 480px);
    height: clamp(280px, 35vw, 480px);
    background: radial-gradient(circle,
        color-mix(in oklch, var(--honig) 14%, transparent) 0%,
        color-mix(in oklch, var(--honig) 5%, transparent) 35%,
        transparent 65%);
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   NAVIGATION
   ========================================================================= */

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

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

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

.nav-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: opacity var(--dur-fast) var(--ease);
}
.nav-brand:hover { opacity: 0.85; }

.nav-logo {
    height: clamp(32px, 3.2vw, 42px);
    width: auto;
    transition: filter var(--dur-medium) var(--ease);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(1.6rem, 2.5vw, 2.2rem);
}
.nav-links a {
    position: relative;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: white;
    transition: color var(--dur-medium) var(--ease);
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--honig);
    transition: width var(--dur-medium) var(--ease);
}
.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}
.nav.scrolled .nav-links a {
    color: var(--text);
}
.nav.scrolled .nav-links a:hover {
    color: var(--accent);
}
.nav-links a:hover {
    color: var(--honig);
}

.nav-cta {
    padding: 0.7rem 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in oklch, white 30%, transparent);
    backdrop-filter: blur(8px);
    background: color-mix(in oklch, white 8%, transparent);
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: 'opsz' 16, 'wght' 420, 'SOFT' 50;
    letter-spacing: 0.01em;
}
.nav-cta::after { display: none !important; }
.nav.scrolled .nav-cta {
    border-color: var(--accent-40);
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent-light) 80%, white 20%),
        var(--accent));
    color: white !important;
}
.nav.scrolled .nav-cta:hover {
    background: linear-gradient(to bottom,
        var(--accent-light),
        var(--accent-deep));
}

/* Mobile Burger */
.nav-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
}
.nav-burger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: white;
    transition: background var(--dur-medium) var(--ease),
                transform var(--dur-medium) var(--ease),
                opacity var(--dur-medium) var(--ease);
}
.nav.scrolled .nav-burger span { background: var(--text); }
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile Menu */
.nav-mobile {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-medium) var(--ease);
}
.nav-mobile.open {
    opacity: 1;
    pointer-events: auto;
}
.nav-mobile-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--container-pad);
    gap: 1.5rem;
}
.nav-mobile-inner > a {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    color: var(--text);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.nav-mobile.open .nav-mobile-inner > a {
    opacity: 1;
    transform: translateY(0);
}
.nav-mobile.open .nav-mobile-inner > a:nth-child(1) { transition-delay: 0.1s; }
.nav-mobile.open .nav-mobile-inner > a:nth-child(2) { transition-delay: 0.16s; }
.nav-mobile.open .nav-mobile-inner > a:nth-child(3) { transition-delay: 0.22s; }
.nav-mobile.open .nav-mobile-inner > a:nth-child(4) { transition-delay: 0.28s; }
.nav-mobile.open .nav-mobile-inner > a:nth-child(5) { transition-delay: 0.34s; }

.nav-mobile-contact {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s var(--ease) 0.5s, transform 0.5s var(--ease) 0.5s;
}
.nav-mobile.open .nav-mobile-contact {
    opacity: 1;
    transform: translateY(0);
}
.nav-mobile-contact a {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--accent);
}

body.nav-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-burger { display: flex; }
}

/* =========================================================================
   HERO — Vollbild-Crossfade + Polaroid-Foreground
   ========================================================================= */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    padding-top: calc(var(--nav-h) + 1rem);
    /* padding-bottom hält den Content über der absolut positionierten
       Trust-Bar (bottom: 2rem + ~3rem Pill-Höhe). */
    padding-bottom: 7rem;
}

/* ── Crossfade BG ─────────────────────────────────────────────────── */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    filter: brightness(0.72) contrast(1.06) saturate(0.95);
    animation: hero-crossfade var(--dur-crossfade) linear infinite;
    will-change: opacity, transform;
}

.hero-slide-1 { animation-delay: 0s; opacity: 1; }
.hero-slide-2 { animation-delay: calc(var(--dur-crossfade) / -3 * 2); }
.hero-slide-3 { animation-delay: calc(var(--dur-crossfade) / -3); }

@keyframes hero-crossfade {
    0%   { opacity: 1; transform: scale(1.02); }
    28%  { opacity: 1; transform: scale(1.08); }
    33%  { opacity: 0; transform: scale(1.09); }
    34%  { opacity: 0; transform: scale(1); }
    88%  { opacity: 0; transform: scale(1); }
    95%  { opacity: 0; transform: scale(1.012); }
    100% { opacity: 1; transform: scale(1.02); }
}

/* 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;
    }
}

/* ── Lesbarkeits-Overlay (Multi-Layer) ───────────────────────────── */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        /* Diagonaler Fokus: links unten gedimmt für Textlesbarkeit, rechts deutlich
           heller damit das Bild atmet und einladend wirkt statt düster. */
        linear-gradient(110deg,
            rgba(28, 18, 10, 0.55) 0%,
            rgba(28, 18, 10, 0.35) 35%,
            rgba(28, 18, 10, 0.15) 65%,
            rgba(28, 18, 10, 0.05) 100%),
        /* Bottom-Fade in den Page-BG — moderater */
        linear-gradient(to bottom,
            transparent 0%,
            rgba(28, 18, 10, 0.08) 50%,
            rgba(28, 18, 10, 0.45) 100%);
}

/* Kein Bottom-Fade ins helle BG: der Hero endet als abgeschlossener
   dunkler Block, die nächste Section setzt mit klarer Kante an. Den
   weichen Übergang nach unten federt der dunkle Bottom-Fade im
   .hero-overlay ab — ein zusätzlicher heller Fade würde das untere
   Drittel des Hero-Bilds nur auswaschen. */

/* ── Grid: Content links + Polaroid rechts ───────────────────────── */
.hero-grid {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.hero-content > * + * {
    margin-top: 1.5rem;
}

.hero-content .label {
    /* Hero-Eyebrow weiß (Bock-Logik) — der Honig-Akzent sitzt im h1 em
       ("Seit 1948."), damit pro Hero nur ein Gold-Akzent leuchtet. */
    color: color-mix(in oklch, white 82%, transparent);
}

.hero-content h1 {
    /* weight / letter-spacing / variation-settings erbt die h1-Base
       (Fraunces opsz 144, wght 300). Nur font-size hier kleiner als die
       globale h1 — Abstände/margins bleiben unangetastet. */
    color: white;
    font-size: clamp(2rem, 4.6vw, 3.7rem);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero-content h1 em {
    color: var(--honig);
}

.hero-sub {
    max-width: 48ch;
    font-size: clamp(0.95rem, 1.3vw, 1.08rem);
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.3);
}

.hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.hero-actions .btn-ghost {
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.04));
    color: white;
    border-color: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 3px 10px rgba(0, 0, 0, 0.15);
}
.hero-actions .btn-ghost:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--honig) 24%, transparent),
        color-mix(in oklch, var(--honig) 10%, transparent));
    border-color: var(--honig-40);
    color: white;
}

/* ── Polaroid Frame (mit Ralf + Rudolf — Vogel-Identität) ────────── */
.hero-polaroid {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-polaroid-frame {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 5 / 6;
    background: color-mix(in oklch, white 78%, var(--bg-paper));
    border-radius: 4px;
    transform: rotate(-1.2deg);
    /* Dezentere Schatten — passt zur filigraneren Hero-Anmutung statt
       wuchtig-dramatisch zu schweben. */
    box-shadow:
        0 18px 44px 0 color-mix(in oklch, oklch(20% 0.04 50) 28%, transparent),
        0 6px 16px 0 color-mix(in oklch, oklch(20% 0.04 50) 18%, transparent),
        0 0 30px 0 var(--honig-15),
        inset 0 0 0 1px color-mix(in oklch, var(--accent) 14%, transparent);
    overflow: hidden;
    isolation: isolate;
    padding: 12px 12px 52px 12px;
}

.hero-polaroid-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 2px;
    display: block;
}

/* Glass-Highlight auf Foto-Fläche */
.hero-polaroid-frame::before {
    content: '';
    position: absolute;
    inset: 12px 12px 52px 12px;
    background: linear-gradient(125deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0) 32%,
        rgba(255, 255, 255, 0) 70%,
        rgba(255, 255, 255, 0.07) 100%);
    pointer-events: none;
    z-index: 2;
    border-radius: 2px;
}

/* Vignette */
.hero-polaroid-frame::after {
    content: '';
    position: absolute;
    inset: 12px 12px 52px 12px;
    background: radial-gradient(ellipse 95% 95% at center,
        transparent 60%,
        rgba(20, 14, 8, 0.20) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: 2px;
}

.hero-polaroid-tape {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 90px;
    height: 26px;
    background:
        linear-gradient(135deg,
            color-mix(in oklch, var(--honig) 30%, white) 0%,
            color-mix(in oklch, var(--honig) 15%, white) 100%);
    opacity: 0.62;
    z-index: 3;
    border-radius: 1px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.hero-polaroid-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    text-align: center;
    color: var(--text);
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    line-height: 1;
    margin: 0;
    z-index: 3;
}

/* ── Trust-Pill — absolut am Hero-Bottom (Bock-Pattern) ──────────── */
.hero-trust {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    z-index: 2;
}
.hero-trust-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    padding: 0.7rem 1.4rem;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.10),
        rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(14px);
    max-width: max-content;
    margin-inline: auto;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 4px 14px rgba(0, 0, 0, 0.16);
}
.hero-trust-item {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}
.hero-trust-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--honig);
    box-shadow: 0 0 6px var(--honig-40);
    flex-shrink: 0;
}

/* ── Hero-Enter Stagger ──────────────────────────────────────────── */
.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);
}
.hero-enter.settled {
    filter: none !important;
}

.hero-content .hero-enter:nth-child(1).in { transition-delay: 0.05s; }
.hero-content .hero-enter:nth-child(2).in { transition-delay: 0.18s; }
.hero-content .hero-enter:nth-child(3).in { transition-delay: 0.32s; }
.hero-content .hero-enter:nth-child(4).in { transition-delay: 0.46s; }
.hero-polaroid.hero-enter.in { transition-delay: 0.6s; }
.hero-trust.hero-enter.in { transition-delay: 0.8s; }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hero {
        /* display:block statt flex align-items:center — Content + Polaroid
           + Trust-Bar stapeln im Flow. Die absolute Trust-Bar würde sonst
           mit dem (im einspaltigen Layout hohen) Polaroid kollidieren. */
        display: block;
        min-height: auto;
        padding-top: calc(var(--nav-h) + 2rem);
        padding-bottom: 3rem;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .hero-polaroid-frame {
        max-width: 300px;
        margin-inline: auto;
    }
    .hero-trust {
        position: static;
        margin-top: 2.5rem;
    }
    .hero-trust-inner {
        padding: 0.6rem 1.1rem;
        gap: 0.75rem;
    }
    .hero-trust-item {
        font-size: 0.68rem;
    }
}

/* =========================================================================
   SPEZIALITÄTEN — Split-Tiles für Denkmalschutz + Wintergarten
   (Kratzer-Split-Pattern, an Vogel-Brand angepasst)
   ========================================================================= */

.split-section {
    position: relative;
}

.split-header {
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
    text-align: center;
}
.split-header .label {
    display: block;
    margin-bottom: 1rem;
}
.split-header h2 {
    color: var(--text);
    margin: 0;
}
.split-header h2 em {
    color: var(--accent);
}

/* ── Grid ─────────────────────────────────────────────────────────── */
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 2.5vw, 2.25rem);
}
@media (max-width: 800px) {
    .split-grid { grid-template-columns: 1fr; }
}

/* Bento-Layout — Denkmalschutz als großes Feature-Tile links (spannt
   beide Grid-Reihen), Wintergarten + Fenster & Türen als kleineres
   Paar rechts gestapelt. Auto-Placement füllt die rechte Spalte: das
   Feature-Tile belegt explizit Spalte 1 / Reihe 1–3, die zwei Small-
   Tiles rutschen automatisch in Spalte 2.
   Doppel-Klassen-Selektor für höhere Spezifität — sonst gewinnt die
   später im Stylesheet stehende .split-tile-aspect-ratio (4/5). */
.split-tile.split-tile-feature {
    grid-column: 1;
    grid-row: 1 / 3;
    /* Höhe = 2 Small-Tiles + gap (via grid-row-span + align-self:stretch),
       nicht ratio-bestimmt. */
    aspect-ratio: auto;
}
.split-tile.split-tile-small {
    aspect-ratio: 4 / 3;
}
@media (max-width: 800px) {
    /* Gestapelt: Bento auflösen, alle drei Tiles gleiches Format. */
    .split-tile.split-tile-feature {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 4 / 3.5;
    }
    .split-tile.split-tile-small {
        aspect-ratio: 4 / 3.5;
    }
}

/* ── Tile ─────────────────────────────────────────────────────────── */
.split-tile {
    position: relative;
    display: block;
    /* width:100% löst die aspect-ratio/Grid-stretch-Ambiguität: ohne
       explizite Breite schrumpft ein Grid-Item mit aspect-ratio leicht
       unter die Track-Breite → Tiles sitzen nicht bündig. Mit width:100%
       füllt jedes Tile seinen Track, aspect-ratio bestimmt nur die Höhe. */
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-xl);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    color: white;
    text-decoration: none;
    transition: transform var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease);
    border: 1px solid var(--border-soft);
}

@media (max-width: 800px) {
    .split-tile { aspect-ratio: 4 / 3.5; }
}

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

.split-tile-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform var(--dur-slow) var(--ease),
                filter var(--dur-slow) var(--ease);
    z-index: 0;
}

/* Brand-Tint-Overlay für Lesbarkeit (Brown-Hauch unten, Honig oben subtle) */
.split-tile-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            transparent 0%,
            transparent 45%,
            rgba(28, 18, 10, 0.55) 85%,
            rgba(28, 18, 10, 0.85) 100%),
        linear-gradient(135deg,
            color-mix(in oklch, var(--accent) 18%, transparent) 0%,
            transparent 60%);
}

/* Cross-Dim-Overlay (wird bei Hover des Geschwister-Tiles aktiviert) */
.split-tile-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(28, 18, 10, 0.55);
    opacity: 0;
    transition: opacity var(--dur-medium) var(--ease);
    pointer-events: none;
}

/* ── Content ──────────────────────────────────────────────────────── */
.split-tile-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.split-tile-label {
    display: inline-block;
    align-self: flex-start;
    padding: 0.4rem 0.85rem;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--honig);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(10px);
}

.split-tile-content h3 {
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 500;
    line-height: 1.1;
    color: white;
    margin: 0;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.split-tile-content p {
    font-size: clamp(0.92rem, 1.2vw, 1.05rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    max-width: 38ch;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

.split-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--honig);
    transition: color var(--dur-medium) var(--ease);
}
.split-tile-cta span {
    transition: transform var(--dur-fast) var(--ease);
}

/* ── Hover-State (Desktop only — kein translateY wegen Edge-Bleed) ─ */
@media (hover: hover) and (min-width: 1025px) {
    .split-tile:hover {
        border-color: var(--accent-25);
        box-shadow: var(--depth-hover), var(--depth-glow);
    }
    .split-tile:hover .split-tile-bg {
        transform: scale(1.04);
    }
    .split-tile:hover .split-tile-cta {
        color: white;
    }
    .split-tile:hover .split-tile-cta span {
        transform: translateX(4px);
    }

    /* Cross-Dim: andere Tile dimmen wenn eine gehovert ist */
    .split-grid:hover .split-tile:not(:hover) .split-tile-overlay::after {
        opacity: 1;
    }
    .split-grid:hover .split-tile:not(:hover) .split-tile-bg {
        filter: saturate(0.6) brightness(0.6);
    }
}

/* =========================================================================
   SECHS PUNKTE — Service-Tiles + USP vereint
   ========================================================================= */

.sp-section {
    position: relative;
}

.sp-header {
    max-width: 720px;
    margin: 0 auto clamp(3rem, 5vw, 4.5rem);
    text-align: center;
}
.sp-header .label {
    display: block;
    margin-bottom: 1rem;
}
.sp-header h2 {
    color: var(--text);
    margin-bottom: 1rem;
}
.sp-header h2 em {
    color: var(--accent);
}
.sp-header-sub {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    color: var(--text-muted);
    margin: 0;
}

/* ── Grid ─────────────────────────────────────────────────────────── */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

@media (max-width: 1000px) {
    .sp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .sp-grid { grid-template-columns: 1fr; }
}

/* ── Tile ─────────────────────────────────────────────────────────── */
.sp-tile {
    position: relative;
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 60%, var(--bg-surface)),
        color-mix(in oklch, var(--bg-paper) 80%, transparent));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    transition: transform var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease);
}

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

/* Surface-Card mit statisch fließendem Content braucht z-index:2 auf > * */
.sp-tile > * {
    position: relative;
    z-index: 2;
}

@media (hover: hover) and (min-width: 1025px) {
    .sp-tile:hover {
        transform: scale(1.012);
        border-color: var(--accent-25);
        box-shadow: var(--depth-hover), var(--depth-glow);
    }
    .sp-tile:hover .sp-tile-img img {
        transform: scale(1.05);
    }
}

/* ── Tile-Image ───────────────────────────────────────────────────── */
.sp-tile-img {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: var(--bg-paper);
}
.sp-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
}

/* Brown-Tint Overlay für Brand-Konsistenz */
.sp-tile-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 55%,
        color-mix(in oklch, var(--accent) 22%, transparent) 100%);
    pointer-events: none;
}

/* Label-Pill in Vogels Style (Cream-Pill mit Honig-Border) */
.sp-tile-label {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    padding: 0.45rem 0.95rem;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-deep);
    background: linear-gradient(to bottom,
        rgba(255, 250, 240, 0.96),
        rgba(245, 235, 220, 0.92));
    border: 1px solid color-mix(in oklch, var(--honig) 30%, transparent);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(8px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 3px 8px color-mix(in oklch, var(--holz) 14%, transparent);
    z-index: 2;
}

/* ── Tile-Body ────────────────────────────────────────────────────── */
.sp-tile-body {
    padding: clamp(1.25rem, 2vw, 1.75rem);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.sp-tile-body h3 {
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    line-height: 1.18;
    color: var(--text);
    text-wrap: balance;
}
.sp-tile-body p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0;
    text-wrap: pretty;
}

/* =========================================================================
   FOUNDER-SECTION — 3 Generationen Story (ft-section)
   ========================================================================= */

.ft-section {
    position: relative;
    /* Top-Stop transparent damit der Atmo-Bleed der vorigen sp-section
       (-47px nach unten) durch die ersten Pixel von ft-section sichtbar
       bleibt. Honig-Hauch in der Mitte + smoother Cream-Abschluss bleiben. */
    background: linear-gradient(180deg,
        transparent 0%,
        var(--bg-tint) 30%,
        var(--bg-tint) 70%,
        var(--bg) 100%);
    overflow: clip;
    isolation: isolate;
}

/* Honig-Atmo-Hauch — fertig gerendert in den Gradients statt mit blur+multiply
   (Performance: vermeidet GPU-Compositor-Stress beim Scrollen) */
.ft-section::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -15%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, var(--honig-15) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}
.ft-section::after {
    content: '';
    position: absolute;
    bottom: -15%;
    left: -15%;
    width: 580px;
    height: 580px;
    background: radial-gradient(circle, color-mix(in oklch, var(--accent) 8%, transparent) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

/* ── Header (Eyebrow + H2 + Lead) zentriert ───────────────────────── */
.ft-header {
    max-width: 760px;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    position: relative;
    z-index: 1;
}
.ft-header .label {
    display: block;
    margin-bottom: 1rem;
}
.ft-header h2 {
    color: var(--text);
    margin: 0 0 1.25rem;
    text-wrap: balance;
}
.ft-header h2 em {
    color: var(--accent);
}
.ft-lead {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.5;
    max-width: 60ch;
    margin: 0 auto;
    text-wrap: balance;
}

/* ── Zigzag-Reihen: Bild + Copy alternierend ──────────────────────── */
.ft-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    margin-bottom: clamp(3rem, 6vw, 5rem);
    position: relative;
    z-index: 1;
}
.ft-row:last-of-type {
    margin-bottom: 0;
}

/* Reverse: Text links, Bild rechts */
.ft-row-reverse {
    direction: rtl;
}
.ft-row-reverse > * {
    direction: ltr;
}

@media (max-width: 900px) {
    .ft-row {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        margin-bottom: 3rem;
    }
    .ft-row-reverse { direction: ltr; }
}

/* Bild-Container — Tile-Depth + Glass-Highlight + klickbar (Lightbox) */
.ft-row-image {
    /* button reset */
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    display: block;
    width: 100%;
    /* Card-Styling */
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    border: 1px solid color-mix(in oklch, var(--accent) 18%, transparent);
    background: #6a3412;
    cursor: pointer;
    transition: box-shadow var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease);
}
.ft-row-image:focus-visible {
    outline: 2px solid var(--accent-40);
    outline-offset: 3px;
}
.ft-row-image:hover {
    box-shadow: var(--depth-hover), var(--depth-glow);
    border-color: var(--accent-40);
}
.ft-row-image img {
    transition: transform var(--dur-slow) var(--ease);
}
.ft-row-image:hover img {
    transform: scale(1.02);
}
/* Glass-Highlight diagonal ::before — liegt zwischen Bild (z:0) und ggf.
   Content. z-index 1 — bei Surface-Cards mit Bild als einzigem Child OK */
.ft-row-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}
.ft-row-image img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 0;
}

/* Text-Spalte */
.ft-row-text {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.ft-row-text h3 {
    font-family: var(--font-serif);
    color: var(--text);
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.15;
    text-wrap: balance;
}
.ft-row-text h3 em {
    color: var(--accent);
}
.ft-row-text p {
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--text-body);
    margin: 0;
}
.ft-row-text p:first-of-type {
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1.4vw, 1.25rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.5;
}

/* ── Stats-Strip unter den Reihen ─────────────────────────────────── */
.ft-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2vw, 1.75rem);
    position: relative;
    z-index: 1;
}
@media (max-width: 700px) {
    .ft-stats { grid-template-columns: 1fr; }
}

.ft-stat {
    position: relative;
    padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 70%, var(--bg-surface)),
        color-mix(in oklch, var(--bg-paper) 70%, transparent));
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-soft);
}
.ft-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
.ft-stat > * { position: relative; z-index: 1; }

.ft-stat-num {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    font-weight: 500;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 0.4rem;
}
.ft-stat-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* =========================================================================
   LIGHTBOX (shared — auch von Founder-Bildern auf index genutzt)
   ========================================================================= */

.lb-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    /* Fast solid — minimal alpha lässt Browser nicht weiter rendern was
       hinter dem Backdrop liegt (Compositor-Stress vermeiden) */
    background: rgba(20, 14, 8, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* visibility-transition delayed beim hide damit erst opacity-fade läuft */
    transition: opacity 0.35s var(--ease),
                visibility 0s linear 0.35s;
    will-change: opacity;
}
.lb-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s var(--ease),
                visibility 0s linear 0s;
}

.lb-stage {
    position: relative;
    max-width: 96vw;
    max-height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* Initial: leicht scale-down + transparent — Open-Animation expandiert
       das Stage von 0.94 auf 1.0 mit smooth expo-easing */
    transform: scale(0.94);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s var(--ease);
    will-change: transform, opacity;
}
.lb-backdrop.open .lb-stage {
    transform: scale(1);
    opacity: 1;
}

.lb-img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-md);
    /* Swap-Animation beim prev/next */
    transition: opacity 0.22s var(--ease),
                transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-drag: none;
}
.lb-img.lb-swap {
    opacity: 0;
    transform: scale(0.96);
}
.lb-img.lb-swap-out-left {
    opacity: 0;
    transform: translateX(-40px);
}
.lb-img.lb-swap-out-right {
    opacity: 0;
    transform: translateX(40px);
}

.lb-caption {
    margin-top: 1.25rem;
    color: var(--honig);
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    text-align: center;
    line-height: 1.3;
    max-width: 60ch;
}

.lb-close,
.lb-prev,
.lb-next {
    position: absolute;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
    border-radius: 50%;
    color: white;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease);
    z-index: 2;
}
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--honig) 24%, transparent),
        color-mix(in oklch, var(--honig) 10%, transparent));
    border-color: var(--honig-40);
}
.lb-close {
    top: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    font-size: 1.8rem;
}
.lb-prev {
    left: clamp(0.5rem, 2vw, 1.5rem);
    top: 50%;
    transform: translateY(-50%);
}
.lb-next {
    right: clamp(0.5rem, 2vw, 1.5rem);
    top: 50%;
    transform: translateY(-50%);
}
.lb-counter {
    position: absolute;
    bottom: clamp(1rem, 3vw, 2rem);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .lb-prev, .lb-next { width: 40px; height: 40px; }
}

body.lb-open {
    overflow: hidden;
}

/* Parent-Animationen pausieren während Lightbox aktiv — Compositor-Schutz */
body.lb-open .hero-slide,
body.lb-open .footer-ghost {
    animation-play-state: paused !important;
}

/* =========================================================================
   REFERENZEN-TEASER — Karussell (Bock zg-Pattern, Polaroid-Aesthetic)
   ========================================================================= */

.rt-section {
    position: relative;
    overflow: clip;
}

.rt-header-wrap {
    /* Header bleibt im container */
}

.rt-header {
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
    text-align: center;
}
.rt-header .label {
    display: block;
    margin-bottom: 1rem;
}
.rt-header h2 {
    color: var(--text);
    margin-bottom: 1rem;
}
.rt-header-sub {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--text-muted);
    margin: 0;
}

/* ── Karussell-Viewport (full-bleed) ──────────────────────────────── */
.rt-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;
}
.rt-viewport::-webkit-scrollbar { display: none; }
.rt-viewport:focus-visible {
    outline: 2px solid var(--accent-40);
    outline-offset: -2px;
}

.rt-track {
    display: flex;
    gap: clamp(1rem, 2vw, 1.75rem);
    /* Padding-Trick: erste Slide wird mittig — User sieht Peek-Slide
       auf der linken Seite als Affordance */
    padding-left: calc((100vw - min(56vw, 480px)) / 2);
    /* Padding-block: oben/unten Platz für Tile-Shadow (depth-hover bis
       ~50px Reichweite) — sonst wird Shadow am viewport-clip hart
       abgeschnitten. Bock-Pattern. */
    padding-block: 2rem 3.5rem;
}

/* ::after spacer — letzte Slide kann wirklich center-snappen (Bock-Pattern).
   Ohne diesen Pseudo-Spacer scrollt der Browser nicht weit genug nach rechts
   damit die letzte Slide WIRKLICH in der Viewport-Mitte landet. */
.rt-track::after {
    content: '';
    flex: 0 0 calc((100vw - min(56vw, 480px)) / 2 - clamp(1rem, 2vw, 1.75rem));
}

/* ── Slide (Container — Border-Radius + Shadow am img, nicht am Slide,
   damit das Bild beim Hover-Tilt nicht am overflow:hidden clipped wird) */
.rt-slide {
    flex: 0 0 auto;
    width: clamp(260px, 56vw, 480px);
    aspect-ratio: 1 / 1;
    scroll-snap-align: center;
    display: block;
    position: relative;
    /* Default Scale für Browser ohne animation-timeline */
    transform: scale(0.94);
    opacity: 0.7;
    transition: transform var(--dur-medium) var(--ease),
                opacity var(--dur-medium) var(--ease);
}

.rt-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    /* Single-Shadow via Token (Bock-Pattern) */
    box-shadow: var(--depth-rest);
    transition: transform var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
    transform-origin: center center;
}

/* Scroll-driven Scale: edge 0.94, center 1.0 (Bock view(inline) pattern) */
@supports (animation-timeline: view()) {
    @keyframes rt-scale {
        0%   { transform: scale(0.94); opacity: 0.7; }
        50%  { transform: scale(1);    opacity: 1; }
        100% { transform: scale(0.94); opacity: 0.7; }
    }
    .rt-slide {
        animation: rt-scale linear both;
        animation-timeline: view(inline);
        animation-range: contain 0% contain 100%;
        transition: filter var(--dur-medium) var(--ease);
    }
}

@media (hover: hover) and (min-width: 1025px) {
    .rt-slide:hover img {
        /* Polaroid tilten — wie wenn man ein Foto am Tisch zur Seite kippt */
        transform: rotate(-2deg) scale(1.02);
        /* Token-Pattern: depth-hover + depth-glow (Glow zentriert, kein
           Klon-Artefakt) */
        box-shadow: var(--depth-hover), var(--depth-glow);
    }
}

/* ── Caption (Polaroid-Text des aktiven Slides) ───────────────────── */
/* EB Garamond Italic — seriös-editorial wie Bock's Slide-Headlines */
.rt-caption {
    text-align: center;
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 500;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--accent);
    margin: clamp(0.75rem, 2vw, 1.25rem) 0 0;
    transition: opacity 0.25s var(--ease);
    min-height: 1em;
    font-feature-settings: 'ss01';
}

/* ── Nav (Pfeile + Dots) ──────────────────────────────────────────── */
.rt-nav-wrap {
    margin-top: clamp(0.5rem, 2vw, 1rem);
}

.rt-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.rt-arrow {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 40%, transparent));
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    color: var(--accent);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 28%, transparent),
        0 3px 10px color-mix(in oklch, var(--holz) 14%, transparent);
    transition: background var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease),
                color var(--dur-medium) var(--ease),
                opacity var(--dur-medium) var(--ease);
}
.rt-arrow:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--honig) 18%, white),
        color-mix(in oklch, var(--honig) 8%, white));
    border-color: var(--accent-40);
    color: var(--accent-deep);
}
.rt-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.rt-dots {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.rt-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border-strong);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.rt-dot:hover {
    background: var(--accent-40);
}
.rt-dot.active {
    background: var(--accent);
    transform: scale(1.35);
    box-shadow: 0 0 0 3px var(--accent-12);
}

/* ── Action ───────────────────────────────────────────────────────── */
.rt-action {
    text-align: center;
}

/* =========================================================================
   REVIEWS-BRÜCKE — Google-Bewertungen Platzhalter
   ========================================================================= */

/* Reviews-Section — Marquee mit 3 Google-Reviews + Badge.
   Kratzer-Pattern, an Vogel-Farbwelt angepasst. */
.reviews-section {
    position: relative;
    padding-block: clamp(3rem, 6vw, 5rem);
    background: linear-gradient(180deg,
        var(--bg) 0%,
        var(--bg-tint) 50%,
        var(--bg) 100%);
    /* overflow: visible — das Atmo-::after darf bewusst unten in die
       Folge-Section bluten (Marquee wird separat von .reviews-carousel
       geclippt, hier also kein hidden nötig). */
    overflow: visible;
}

.reviews-header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.reviews-header .label {
    display: block;
    margin-bottom: 0.85rem;
}
.reviews-header h2 {
    color: var(--text);
    margin-bottom: 0.75rem;
}

.reviews-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 75%, var(--bg-surface)),
        color-mix(in oklch, var(--bg-paper) 80%, transparent));
    /* Subtle depth — definiert Bottom-Edge gegen Cream-BG */
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 50%, transparent),
        0 2px 6px color-mix(in oklch, var(--holz) 10%, transparent);
    font-size: 13px;
    color: var(--text-body);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.reviews-badge:hover {
    border-color: var(--accent-25);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--accent-08),
                0 4px 12px color-mix(in oklch, var(--holz) 10%, transparent);
}
.reviews-badge-stars {
    display: flex;
    gap: 2px;
}

.reviews-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 2rem 0;
    /* Edge-Fade damit Cards weich ein-/ausgleiten */
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.reviews-track {
    display: flex;
    /* Kein flex-gap — Spacing läuft über margin-right auf .review-card.
       gap würde die translateX(-50%)-Berechnung um einen halben Gap
       verfälschen (sichtbarer Sprung pro Loop). Mit margin-right ist
       jede Card inkl. Spacing exakt gleich breit → -50% trifft exakt. */
    animation: reviews-scroll 60s linear infinite;
    width: max-content;
    will-change: transform;
}
.reviews-track:hover {
    animation-play-state: paused;
}

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

.review-card {
    flex-shrink: 0;
    width: 360px;
    margin-right: 20px;
    padding: 1.75rem;
    /* Opake Karte: Rezensionen sollen klar lesbar sein, nicht durchscheinen.
       Kein backdrop-filter — auf dem laufenden Marquee erzeugt es Sub-Pixel-
       Artefakte an den Karten-Kanten (harte Kante + Border wirkt unterbrochen). */
    background: linear-gradient(to bottom, var(--bg-surface), var(--bg-paper));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    /* Depth-soft als Rest — Karten heben sich klar vom Cream-BG ab,
       Bottom-Edge bekommt visuelle Definition. */
    box-shadow: var(--depth-soft);
    color: var(--text);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--dur-medium) var(--ease),
                transform var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease);
}
.review-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-25);
    box-shadow: 0 0 0 1px var(--accent-08),
                0 4px 10px color-mix(in oklch, var(--holz) 8%, transparent),
                0 10px 22px color-mix(in oklch, var(--holz) 12%, transparent);
}

.review-source {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.review-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 1rem;
}
/* Stars via currentColor → Honig-Gold */
.review-stars,
.reviews-badge-stars {
    color: var(--honig-deep);
}

.review-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-body);
    flex: 1;
    margin-bottom: 1.25rem;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft);
}
.review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--accent-deep);
    flex-shrink: 0;
}
.review-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.review-date {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

@media (max-width: 767px) {
    .review-card { width: 300px; padding: 1.25rem; margin-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-track { animation: none !important; }
    .reviews-carousel { overflow-x: auto; }
}

/* =========================================================================
   JOBS-TEASER — 3 Stellen-Cards + Link zu jobs.html
   ========================================================================= */

.jt-section {
    position: relative;
}

.jt-header {
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
    text-align: center;
}
.jt-header .label {
    display: block;
    margin-bottom: 1rem;
}
.jt-header h2 {
    color: var(--text);
    margin-bottom: 1rem;
}
.jt-header h2 em {
    color: var(--accent);
}
.jt-header-sub {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--text-muted);
    margin: 0;
}

/* ── Grid ─────────────────────────────────────────────────────────── */
.jt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2vw, 2rem);
}
@media (max-width: 900px) {
    .jt-grid { grid-template-columns: 1fr; }
}

/* ── Card — Image-BG mit Brown-Tint-Overlay (wie Split-Tiles aber kleiner) */
.jt-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    border: 1px solid var(--border-soft);
    color: white;
    text-decoration: none;
    transition: transform var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease);
}

/* Glass-Highlight liegt über dem Image */
.jt-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
}

@media (hover: hover) and (min-width: 1025px) {
    .jt-card:hover {
        border-color: var(--accent-40);
        box-shadow: var(--depth-hover), var(--depth-glow);
    }
    .jt-card:hover .jt-card-image {
        transform: scale(1.04);
    }
    .jt-card:hover .jt-card-cta span {
        transform: translateX(4px);
    }
}

/* Image als BG-Layer */
.jt-card-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transition: transform var(--dur-slow) var(--ease);
}

/* Brown-Tint Overlay für Lesbarkeit unten + leichter Diagonal-Tint */
.jt-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            transparent 0%,
            transparent 35%,
            rgba(28, 18, 10, 0.55) 75%,
            rgba(28, 18, 10, 0.88) 100%),
        linear-gradient(135deg,
            color-mix(in oklch, var(--accent) 15%, transparent) 0%,
            transparent 55%);
}

/* Content unten */
.jt-card-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.jt-card h3 {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 500;
    line-height: 1.15;
    color: white;
    margin: 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.jt-card p {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}
.jt-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--honig);
}
.jt-card-cta span {
    transition: transform var(--dur-fast) var(--ease);
}

/* =========================================================================
   KONTAKT-TEASER — Direkt-Cards + Form-CTA
   ========================================================================= */

.kt-section {
    position: relative;
    /* Symmetrisch cream → tint → cream — keine harte Kante zur vorherigen Section */
    background: linear-gradient(180deg,
        var(--bg) 0%,
        var(--bg-tint) 50%,
        var(--bg) 100%);
    overflow: clip;
    isolation: isolate;
}

/* Honig-Underlay — fertig gerendert (kein blur+multiply für GPU-Schonung) */
.kt-section::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 600px;
    background: radial-gradient(ellipse, var(--honig-15) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

.kt-header {
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
    text-align: center;
    position: relative;
    z-index: 1;
}
.kt-header .label {
    display: block;
    margin-bottom: 1rem;
}
.kt-header h2 {
    color: var(--text);
    margin-bottom: 1rem;
}
.kt-header h2 em {
    color: var(--accent);
}
.kt-header-sub {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--text-muted);
    margin: 0;
}

/* ── Grid ─────────────────────────────────────────────────────────── */
.kt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2vw, 2rem);
    position: relative;
    z-index: 1;
}
@media (max-width: 800px) {
    .kt-grid { grid-template-columns: 1fr; }
}

/* ── Card ─────────────────────────────────────────────────────────── */
.kt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 75%, var(--bg-surface)),
        color-mix(in oklch, var(--bg-paper) 65%, transparent));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    color: var(--text);
    text-align: left;
    transition: transform var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease);
}

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

@media (hover: hover) and (min-width: 1025px) {
    .kt-card:hover {
        transform: translateY(-2px);
        border-color: var(--accent-25);
        box-shadow: var(--depth-hover), var(--depth-glow);
    }
}

.kt-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent-light) 90%, white),
        var(--accent));
    color: white;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 4px 10px var(--accent-25);
    margin-bottom: 0.6rem;
}

.kt-card-label {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}
.kt-card-value {
    font-family: var(--font-serif);
    font-size: clamp(1.2rem, 1.7vw, 1.45rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--text);
    margin: 0;
}
.kt-card-meta {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-body);
    margin: 0.35rem 0 0;
}

/* "oder direkt" — feiner Divider zwischen Form und Alt-Kontakt-Cards */
.kt-alt-divider {
    margin: clamp(2.5rem, 4vw, 3.25rem) auto clamp(1.5rem, 2.5vw, 2rem);
    max-width: 720px;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}
.kt-alt-divider::before,
.kt-alt-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--accent-15), transparent);
}
.kt-alt-divider span {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* =========================================================================
   FOOTER
   ========================================================================= */

.footer {
    position: relative;
    overflow: clip;
    isolation: isolate;
    background: linear-gradient(to bottom,
        var(--bg) 0%,
        var(--bg-deeper) 100%);
    padding: clamp(3.5rem, 6vw, 5.5rem) 0 1.5rem;
    margin-top: 0;
}

/* Section-Divider oben — weicher Akzent-Fade (Spangler-Pattern) */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right,
        transparent,
        var(--accent-25),
        transparent);
    z-index: 2;
}

.footer-inner {
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.9fr 1.1fr 1fr;
    gap: clamp(1.75rem, 3vw, 3.25rem);
    padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    .footer-brand {
        grid-column: span 2;
    }
}
@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-brand {
        grid-column: span 1;
    }
}

/* ── Brand-Col ────────────────────────────────────────────────────── */
.footer-brand-link {
    display: inline-block;
    margin-bottom: 1.25rem;
    transition: opacity var(--dur-fast) var(--ease);
}
.footer-brand-link:hover { opacity: 0.85; }
.footer-logo {
    height: 60px;
    width: auto;
}
.footer-desc {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}

/* ── Col-Titles ───────────────────────────────────────────────────── */
.footer-col-title {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 1.25rem;
}
/* Contact-Cols sind Flex mit gap:1rem — Title-Margin runter, damit
   Margin + Flex-Gap zusammen wieder 1.25rem ergeben (Bündigkeit mit Link-Cols) */
.footer-contact .footer-col-title {
    margin-bottom: 0.25rem;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.footer-col li a {
    font-size: 0.95rem;
    color: var(--text-body);
    transition: color var(--dur-fast) var(--ease);
}
.footer-col li a:hover {
    color: var(--accent);
}

/* ── Contact-Col ──────────────────────────────────────────────────── */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.footer-contact-block {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-body);
}
.footer-contact-block strong {
    display: block;
    color: var(--text);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}
.footer-contact-block a {
    color: var(--text-body);
    transition: color var(--dur-fast) var(--ease);
}
.footer-contact-block a:hover {
    color: var(--accent);
}

/* ── Footer-Bar ───────────────────────────────────────────────────── */
.footer-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid transparent;
    border-image: linear-gradient(to right, transparent, var(--accent-15), transparent) 1;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.footer-legal {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}
.footer-legal a {
    color: var(--text-muted);
    letter-spacing: 0.04em;
    transition: color var(--dur-fast) var(--ease);
}
.footer-legal a:hover {
    color: var(--accent);
}

/* ── Watermark-Ghost (scroll-driven materialize) ──────────────────── */
.footer-ghost {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(calc(0.85 + 0.15 * var(--ghost-progress, 1)));
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(7rem, 20vw, 22rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--accent);
    opacity: calc(0.05 * var(--ghost-progress, 1));
    z-index: 0;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

@supports (animation-timeline: view()) {
    @keyframes ghost-materialize {
        from { --ghost-progress: 0; }
        to   { --ghost-progress: 1; }
    }
    .footer {
        animation: ghost-materialize linear both;
        animation-timeline: view(block);
        animation-range: entry 0% contain 60%;
    }
    .footer-ghost {
        opacity: calc(0.06 * var(--ghost-progress, 0));
    }
}
/* =========================================================================
   ONBOARDING-FORM (ob-Prefix) — Kontakt-Section auf Index (Kratzer-Pattern)
   ========================================================================= */

/* In der Kontakt-Section (Index) sitzt der Form zentriert + schmal. */
.kt-section .ob-form-wrapper,
.kt-section .ob-progress {
    max-width: 720px;
    margin-inline: auto;
}

.ob-form-wrapper {
    position: relative;
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 70%, var(--bg-surface)),
        color-mix(in oklch, var(--bg-paper) 75%, transparent));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
}
.ob-form-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
.ob-form-wrapper > * { position: relative; z-index: 1; }

.ob-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Progress-Indicator (5 Steps: 5 Kreise + 4 Linien) ────────────── */
.ob-progress {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: clamp(2rem, 3vw, 2.5rem);
}
.ob-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    transition: opacity var(--dur-medium) var(--ease);
    opacity: 0.5;
}
.ob-step-indicator.active,
.ob-step-indicator.done {
    opacity: 1;
}
.ob-step-num {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: background var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease),
                color var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
}
.ob-step-indicator.active .ob-step-num {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent-light) 80%, white 20%),
        var(--accent));
    border-color: var(--accent-40);
    color: white;
    box-shadow: 0 0 0 4px var(--accent-12), 0 4px 12px var(--accent-25);
}
.ob-step-indicator.done .ob-step-num {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}
.ob-step-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ob-step-indicator.active .ob-step-label,
.ob-step-indicator.done .ob-step-label {
    color: var(--text);
}
.ob-step-line {
    height: 1px;
    background: var(--border-strong);
    margin: 0 0.25rem;
    align-self: flex-start;
    margin-top: 18px;
}

/* ── Step Container ───────────────────────────────────────────────── */
/* Kein CSS-Entry-Animation: die Step-Transition (Height + Scroll + Zoom +
   Opacity, synced via rAF) steuert kontakt.js. Eine CSS-animation hier
   würde mit den JS-gesetzten inline-styles für opacity/transform kollidieren. */
.ob-step {
    display: none;
}
.ob-step.active {
    display: block;
}

@keyframes ob-step-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ob-step-title {
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    color: var(--text);
    margin: 0 0 0.6rem;
    text-align: center;
}
.ob-step-help {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0 auto 1.75rem;
    text-align: center;
    max-width: 480px;
}

/* ── Chip-Gruppen (Step „Anliegen“ — Schwerpunkte vs. Weitere) ─────── */
.ob-chip-group {
    margin-bottom: 1.4rem;
}
.ob-chip-group-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.7rem;
}
/* margin lebt auf der Gruppe — Grid drin neutral. Step „Zeitrahmen“
   nutzt .ob-chip-grid ohne Gruppe und behält sein eigenes margin. */
.ob-chip-group .ob-chip-grid {
    margin-bottom: 0;
}

/* ── Chip-Grid ────────────────────────────────────────────────────── */
.ob-chip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
.ob-chip-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
@media (max-width: 640px) {
    .ob-chip-grid { grid-template-columns: 1fr; }
    /* 5 Indicators auf schmalen Screens: Labels weg, nur Nummern,
       kompakte Kreise. Sonst wird die Progress-Leiste zu eng. */
    .ob-progress { gap: 0.25rem; }
    .ob-step-num { width: 28px; height: 28px; font-size: 0.7rem; }
    .ob-step-label { display: none; }
    .ob-step-line { margin: 0; margin-top: 0; align-self: center; }
}

.ob-chip {
    padding: 0.85rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 38%, transparent));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-align: center;
    transition: background var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease),
                color var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
}
.ob-chip:hover {
    border-color: var(--accent-40);
    color: var(--accent-deep);
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--honig) 18%, white),
        color-mix(in oklch, var(--honig) 8%, white));
}
.ob-chip.selected {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent-light) 80%, white 20%),
        var(--accent));
    color: white;
    border-color: var(--accent-40);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 26%, transparent),
        0 4px 12px var(--accent-25),
        0 0 24px var(--honig-25);
}

/* ── Type-Buttons (große Auswahl-Cards, Step „Für wen?“) ──────────── */
.ob-type-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 480px) {
    .ob-type-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ob-type-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1.4rem 1.35rem;
    text-align: left;
    cursor: pointer;
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 38%, transparent));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    transition: background var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease),
                color var(--dur-medium) var(--ease);
}
.ob-type-btn:hover {
    border-color: var(--accent-40);
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--honig) 18%, white),
        color-mix(in oklch, var(--honig) 8%, white));
    box-shadow: 0 4px 14px color-mix(in oklch, var(--holz) 14%, transparent);
}
.ob-type-btn.selected {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent-light) 80%, white 20%),
        var(--accent));
    border-color: var(--accent-40);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 26%, transparent),
        0 4px 12px var(--accent-25),
        0 0 24px var(--honig-25);
}
.ob-type-icon {
    display: flex;
    color: var(--accent);
    transition: color var(--dur-medium) var(--ease);
}
.ob-type-btn.selected .ob-type-icon {
    color: color-mix(in oklch, white 88%, var(--honig));
}
.ob-type-title {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 1.15rem;
    color: var(--text);
    transition: color var(--dur-medium) var(--ease);
}
.ob-type-desc {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
    transition: color var(--dur-medium) var(--ease);
}
.ob-type-btn.selected .ob-type-title { color: white; }
.ob-type-btn.selected .ob-type-desc { color: color-mix(in oklch, white 82%, transparent); }

/* ── Field-Grid ───────────────────────────────────────────────────── */
.ob-field {
    margin-bottom: 1.25rem;
}
.ob-field label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.ob-field-optional {
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--text-muted);
    opacity: 0.7;
}

.ob-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 500px) {
    .ob-field-grid { grid-template-columns: 1fr; }
}
.ob-field-grid .ob-field {
    margin-bottom: 0;
}
.ob-field-grid .ob-field-wide {
    grid-column: 1 / -1;
}

.ob-field input,
.ob-field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text);
    background: var(--bg-paper);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-medium) var(--ease),
                background var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
}
.ob-field textarea {
    resize: vertical;
    min-height: 100px;
    font-family: var(--font-sans);
}
.ob-field input:focus,
.ob-field textarea:focus {
    outline: none;
    border-color: var(--accent-60);
    background: var(--bg-surface);
    box-shadow: 0 0 0 3px var(--accent-12);
}

/* Autofill-Override (CLAUDE.md Standard) */
.ob-form input:-webkit-autofill,
.ob-form input:-webkit-autofill:hover,
.ob-form input:-webkit-autofill:focus,
.ob-form input:-webkit-autofill:active,
.ob-form textarea:-webkit-autofill,
.ob-form textarea:-webkit-autofill:hover,
.ob-form textarea:-webkit-autofill:focus,
.ob-form 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 {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--honig) 8%, var(--bg-surface)),
        color-mix(in oklch, var(--honig) 4%, var(--bg-surface)));
    border: 1px dashed color-mix(in oklch, var(--accent) 30%, transparent);
    border-radius: var(--radius-md);
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-body);
}
.ob-summary strong {
    color: var(--text);
    font-weight: 600;
    font-style: normal;
}

/* ── Actions ──────────────────────────────────────────────────────── */
.ob-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-soft);
}
.ob-actions .ob-next,
.ob-actions .ob-submit {
    margin-left: auto;
}

/* ── Legal-Hinweis (Step Kontakt) ─────────────────────────────────── */
.ob-legal {
    margin: 1.25rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
}
.ob-legal a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--accent-40);
    transition: text-decoration-color var(--dur-fast) var(--ease);
}
.ob-legal a:hover {
    text-decoration-color: var(--accent);
}

/* ── Shake-Animation ──────────────────────────────────────────────── */
@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: 1rem 0;
}
.ob-success.active {
    display: block;
    animation: ob-step-in 0.5s var(--ease);
}
.ob-success-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent-light) 80%, white 20%),
        var(--accent));
    color: white;
    margin: 0 auto 1.5rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 8px 24px var(--accent-25),
        0 0 32px var(--honig-25);
}
.ob-success h2 {
    color: var(--text);
    margin: 0 0 0.85rem;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}
.ob-success h2 em { color: var(--accent); }
.ob-success p {
    font-size: 1rem;
    color: var(--text-body);
    margin: 0 0 0.8rem;
    line-height: 1.55;
}
.ob-success-fallback {
    font-family: var(--font-serif);
    font-style: normal;
    color: var(--text-muted);
}
.ob-success-fallback a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}