/* ==========================================================================
   FLAMENCOFFEE — Kaffeerösterei & Café, Vilshofen a. d. Donau
   Warm-Hellraum · Salbeigrün + Flamingo-Pink · Fraunces + Inter
   Engine adaptiert aus dem Zimmerhackl-Referenz-Playbook, neu eingekleidet.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1. CUSTOM PROPERTIES — animatable
   ───────────────────────────────────────────────────────────────────────── */
@property --ghost-progress { syntax: '<number>'; initial-value: 0; inherits: true; }

/* ─────────────────────────────────────────────────────────────────────────
   2. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────── */
:root {
    /* ─ Warm-Hellraum — Creme, kaffee-getönt (wärmer als Zimmerhackl) ─ */
    --bg:        oklch(97.2% 0.012 84);    /* warmes Creme */
    --bg-tint:   oklch(95.2% 0.016 82);    /* Section-Alternation */
    --bg-paper:  oklch(93.4% 0.020 80);    /* Surface-Cards */
    --bg-deeper: oklch(90.8% 0.024 76);    /* eingelassen */

    /* ─ Text — warmes Espresso-Anthrazit, NIE reines Schwarz ─ */
    --text:      oklch(26% 0.022 55);
    --text-body: oklch(40% 0.022 50);
    --text-muted:oklch(56% 0.020 55);
    --text-soft: oklch(48% 0.020 52);

    /* ─ Brand-Accent 1 — GEWÄHLT: Caramel/Crema (warm, coffee-forward) ─
       Salbei-Alternative (aus dem Logo) zum Zurückschalten:
         --accent: oklch(55% 0.055 142); --accent-light: oklch(66% 0.058 144);
         --accent-deep: oklch(43% 0.050 140); --accent-soft: oklch(78% 0.046 142); */
    --accent:      oklch(58% 0.095 70);
    --accent-light:oklch(69% 0.105 74);
    --accent-deep: oklch(46% 0.095 64);
    --accent-soft: oklch(80% 0.070 76);

    /* ─ Accent in 8 Transparenz-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-18: color-mix(in oklch, var(--accent) 18%, transparent);
    --accent-25: color-mix(in oklch, var(--accent) 25%, transparent);
    --accent-40: color-mix(in oklch, var(--accent) 40%, transparent);
    --accent-60: color-mix(in oklch, var(--accent) 60%, transparent);
    --accent-80: color-mix(in oklch, var(--accent) 80%, transparent);

    /* ─ Brand-Accent 2: Flamingo-Pink (sparsamer Funke) ─ */
    --pink:      oklch(72% 0.135 6);
    --pink-deep: oklch(62% 0.155 8);
    --pink-soft: oklch(86% 0.060 8);
    --pink-12:   color-mix(in oklch, var(--pink) 12%, transparent);
    --pink-25:   color-mix(in oklch, var(--pink) 25%, transparent);

    /* ─ Kaffee-Töne (Material/Atmo) ─ */
    --coffee:       oklch(42% 0.050 52);   /* Espresso — Schatten-Basis */
    --coffee-mid:   oklch(54% 0.055 55);
    --crema:        oklch(82% 0.045 70);

    /* ─ Borders ─ */
    --border:        oklch(86% 0.012 75);
    --border-soft:   oklch(90% 0.010 75);
    --border-strong: oklch(74% 0.016 65);

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

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

    /* ─ Fonts ─ */
    --font-display: 'Fraunces', 'Hoefler Text', Georgia, serif;
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

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

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

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

    /* ─ Radius ─ */
    --radius-sm:   4px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --radius-xl:   26px;
    --radius-pill: 100px;
}

/* Display-P3 Override für Wide-Gamut */
@supports (color: color(display-p3 1 0 0)) {
    @media (color-gamut: p3) {
        :root {
            /* Caramel/Crema (aktiv). Salbei-P3 zum Zurückschalten:
               accent .46 .54 .40 · light .58 .66 .50 · deep .34 .42 .30 · soft .74 .80 .66 */
            --accent:      color(display-p3 0.58 0.46 0.27);
            --accent-light:color(display-p3 0.69 0.57 0.36);
            --accent-deep: color(display-p3 0.46 0.36 0.21);
            --accent-soft: color(display-p3 0.81 0.71 0.53);
            --pink:        color(display-p3 0.92 0.55 0.66);
            --pink-deep:   color(display-p3 0.84 0.40 0.55);
            --coffee:      color(display-p3 0.40 0.30 0.20);
        }
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   3. RESET + BASE
   ───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

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

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   4. TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 360;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--text);
    text-wrap: balance;
    font-optical-sizing: auto;
}

h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 360; line-height: 1.03; }
h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); font-variation-settings: 'opsz' 110, 'SOFT' 30, 'wght' 360; line-height: 1.06; }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-variation-settings: 'opsz' 60, 'SOFT' 20, 'wght' 400; line-height: 1.15; }
h4 { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.2; }

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

/* em in Headlines: Fraunces Italic in Akzent-Farbe (warm, editorial) */
em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 360;
    color: var(--accent-deep);
    font-variation-settings: 'opsz' 110, 'SOFT' 60, 'wght' 380;
}

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

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

/* Eyebrow-Label */
.label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    display: inline-block;
}
.label-accent { color: var(--accent-deep); }
.label::before {
    content: '';
    display: inline-block;
    width: 30px; height: 1px;
    background: currentColor;
    vertical-align: middle;
    margin-right: 0.8rem;
    opacity: 0.6;
}

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

/* ─────────────────────────────────────────────────────────────────────────
   5. CONTAINER + SECTION
   ───────────────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-pad); position: relative; }

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

/* ─────────────────────────────────────────────────────────────────────────
   6. REVEAL SYSTEM
   ───────────────────────────────────────────────────────────────────────── */
.reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

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

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

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

/* ─────────────────────────────────────────────────────────────────────────
   7. BUTTONS
   ───────────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 0.7rem;
    padding: 0.95rem 1.7rem;
    font-family: var(--font-sans);
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--dur-normal) var(--ease),
                background var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
    isolation: isolate; position: relative;
}
.btn-primary {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 20%, var(--bg)),
        color-mix(in oklch, var(--accent) 11%, var(--bg)));
    color: var(--accent-deep);
    border: 1px solid var(--accent-40);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 30%, transparent),
                0 4px 14px color-mix(in oklch, var(--coffee) 10%, transparent);
}
.btn-primary:hover {
    background: linear-gradient(to bottom, var(--accent-light), var(--accent));
    color: var(--bg);
    border-color: var(--accent);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 22%, transparent),
                0 8px 22px color-mix(in oklch, var(--accent) 24%, transparent), var(--depth-glow);
}
.btn-ghost {
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 40%, transparent));
    color: var(--text);
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(12px);
    box-shadow: 0 3px 10px color-mix(in oklch, var(--coffee) 8%, transparent);
}
.btn-ghost:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 12%, white),
        color-mix(in oklch, var(--accent) 6%, white));
    color: var(--accent-deep); border-color: var(--accent-40);
    box-shadow: 0 8px 22px color-mix(in oklch, var(--coffee) 14%, transparent), var(--depth-glow);
}
.btn-arrow::after {
    content: '→'; font-family: var(--font-sans); font-weight: 300;
    transition: transform var(--dur-normal) var(--ease);
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* ─────────────────────────────────────────────────────────────────────────
   8. NAVIGATION
   ───────────────────────────────────────────────────────────────────────── */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 1.15rem 0;
    background: transparent; backdrop-filter: blur(0);
    transition: background var(--dur-medium) var(--ease),
                backdrop-filter var(--dur-medium) var(--ease),
                padding var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
    will-change: background, backdrop-filter;
    isolation: isolate;
}
.nav.scrolled {
    background: color-mix(in oklch, var(--bg) 88%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    padding: 0.6rem 0;
    box-shadow: 0 1px 0 var(--border-soft),
                0 8px 24px color-mix(in oklch, var(--coffee) 6%, 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-normal) var(--ease); }
.nav-brand:hover { opacity: 0.72; }
.nav-brand img { height: 40px; width: auto; }
@media (min-width: 1024px) { .nav-brand img { height: 48px; } }

/* Logo ist dunkel (für helle Flächen). Über dem Hero (transparent) hell einfärben. */
.nav:not(.scrolled) .nav-brand img { filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,0.35)); }

.nav-links { display: none; align-items: center; gap: clamp(1.5rem, 2.4vw, 2.4rem); list-style: none; margin: 0; padding: 0; }
@media (min-width: 960px) { .nav-links { display: flex; } }
.nav-links a {
    position: relative; font-family: var(--font-sans);
    font-size: 0.82rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-body); padding: 0.4rem 0;
    transition: color var(--dur-normal) var(--ease);
}
.nav:not(.scrolled) .nav-links a { color: color-mix(in oklch, white 86%, transparent); text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.nav-links a::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px;
    background: var(--accent-light); transition: width var(--dur-normal) var(--ease);
}
.nav:not(.scrolled) .nav-links a::after { background: var(--pink-soft); }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav:not(.scrolled) .nav-links a:hover, .nav:not(.scrolled) .nav-links a.active { color: #fff; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-cta {
    display: none; padding: 0.6rem 1.2rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    font-family: var(--font-sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(to bottom, color-mix(in oklch, white 50%, transparent), color-mix(in oklch, white 40%, transparent));
    backdrop-filter: blur(10px);
    transition: border-color var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease), background var(--dur-normal) var(--ease);
}
.nav:not(.scrolled) .nav-cta {
    color: #fff; border-color: color-mix(in oklch, white 45%, transparent);
    background: linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
}
.nav-cta:hover {
    border-color: var(--accent-40); color: var(--accent-deep);
    background: linear-gradient(to bottom, color-mix(in oklch, var(--accent) 16%, white), color-mix(in oklch, var(--accent) 9%, white));
}
.nav:not(.scrolled) .nav-cta:hover { color: #fff; border-color: #fff; background: linear-gradient(to bottom, var(--accent-40), var(--accent-25)); }
@media (min-width: 960px) { .nav-cta { display: inline-flex; align-items: center; } }

/* Mobile-Toggle */
.nav-toggle { display: flex; flex-direction: column; gap: 5px; padding: 0.5rem; margin-right: -0.5rem; align-items: center; justify-content: center; }
.nav-toggle span { display: block; width: 22px; height: 1px; background: var(--text); transition: transform var(--dur-normal) var(--ease), opacity var(--dur-normal) var(--ease); }
.nav:not(.scrolled) .nav-toggle span { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
body.nav-open .nav-toggle span { background: var(--text); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }
@media (min-width: 960px) { .nav-toggle { display: none; } }

/* Mobile-Menu Panel */
.nav-mobile {
    position: fixed; inset: 0; z-index: 99; background: var(--bg);
    padding: calc(var(--nav-h) + 2rem) var(--container-pad) 2rem;
    display: flex; flex-direction: column; gap: 0.5rem;
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-medium) var(--ease);
}
body.nav-open .nav-mobile { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }
.nav-mobile a {
    display: block; padding: 1rem 0;
    font-family: var(--font-display); font-size: clamp(1.7rem, 5vw, 2.3rem); font-weight: 400; font-variation-settings: 'opsz' 72, 'SOFT' 40;
    color: var(--text); border-bottom: 1px solid var(--border-soft);
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
body.nav-open .nav-mobile a { opacity: 1; transform: translateY(0); }
body.nav-open .nav-mobile a:nth-child(1) { transition-delay: 0.05s; }
body.nav-open .nav-mobile a:nth-child(2) { transition-delay: 0.10s; }
body.nav-open .nav-mobile a:nth-child(3) { transition-delay: 0.15s; }
body.nav-open .nav-mobile a:nth-child(4) { transition-delay: 0.20s; }
body.nav-open .nav-mobile a:nth-child(5) { transition-delay: 0.25s; }
.nav-mobile-contact { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; color: var(--text-muted); }
.nav-mobile-contact a { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 400; padding: 0.4rem 0; border: none; color: var(--text-body); }

/* ─────────────────────────────────────────────────────────────────────────
   9. HERO — 3-Slide Crossfade + rAF-Dark-Tracking
   ───────────────────────────────────────────────────────────────────────── */
.hero {
    position: relative; min-height: 100vh; display: flex; align-items: center;
    overflow: hidden; isolation: isolate;
    padding-block: calc(var(--nav-h) + 4rem) clamp(7rem, 14vh, 10rem);
    /* Zimmerhackl-Farb-Fade: alles interpoliert dunkel→hell via --hero-dark-pct,
       das die rAF-Schleife frame-genau an die Slide-Opazität koppelt.
       Halo läuft GEGENläufig (hell hinter dunklem Text, dunkel hinter hellem Text). */
    --hero-ink:      color-mix(in oklch, var(--text), white var(--hero-dark-pct, 0%));
    --hero-ink-mute: color-mix(in oklch, var(--text-soft), white var(--hero-dark-pct, 0%));
    --hero-ink-body: color-mix(in oklch, var(--text-body), white var(--hero-dark-pct, 0%));
    --hero-em:       color-mix(in oklch, var(--accent-deep), var(--accent-soft) var(--hero-dark-pct, 0%));
    --hero-halo-t:   color-mix(in oklch, color-mix(in oklch, white 72%, transparent), color-mix(in oklch, var(--text) 55%, transparent) var(--hero-dark-pct, 0%));
    --hero-halo-w:   color-mix(in oklch, color-mix(in oklch, white 55%, transparent), color-mix(in oklch, var(--coffee) 60%, transparent) var(--hero-dark-pct, 0%));
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; animation: hero-crossfade 24s linear infinite; filter: saturate(1.03) brightness(1.0);
}
.hero-slide-1 { opacity: 1; animation: hero-crossfade-first 24s linear infinite; }
/* Café-Slide ist ein dunkles, leicht unterbelichtetes Foto → Schatten dezent
   per Filter anheben (kein ImageMagick nötig), damit es atmosphärisch-dunkel
   statt murkig wirkt. Bleibt dunkel genug für weißen Text. */
.hero-slide-2 { animation-delay: 8s; filter: saturate(1.06) brightness(1.16) contrast(0.97); }
.hero-slide-3 { animation-delay: 16s; }

@keyframes hero-crossfade {
    0%   { opacity: 0; transform: scale(1.02); }
    4%   { opacity: 1; }
    33%  { opacity: 1; }
    37%  { opacity: 0; transform: scale(1.10); }
    100% { opacity: 0; transform: scale(1.10); }
}
@keyframes hero-crossfade-first {
    0%   { opacity: 1; transform: scale(1.02); }
    33%  { opacity: 1; transform: scale(1.06); }
    37%  { opacity: 0; transform: scale(1.10); }
    66%  { opacity: 0; transform: scale(1.10); }
    96%  { opacity: 0; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1.02); }
}
@supports (animation-timeline: scroll()) {
    @keyframes hero-parallax { from { transform: translateY(0); } to { transform: translateY(16vh); } }
    .hero-bg { animation: hero-parallax linear both; animation-timeline: scroll(root block); animation-range: 0vh 120vh; }
}

/* Overlay entfernt (User-Wunsch) — das Café-Motiv soll voll sichtbar bleiben.
   Lesbarkeit des weißen Texts läuft jetzt ausschließlich über den Text-Shadow-Halo
   (siehe Hero-Text unten). Kein bildweiter Scrim mehr. */
.hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: none; }
.hero-overlay::before { content: none; }

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

.hero-eyebrow {
    font-family: var(--font-sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--hero-ink-mute);
    text-shadow: 0 1px 2px var(--hero-halo-t), 0 2px 14px var(--hero-halo-w);
    margin-bottom: 1.4rem; display: inline-block;
}
.hero-eyebrow::before { content: ''; display: inline-block; width: 34px; height: 1px;
    background: color-mix(in oklch, var(--accent), var(--accent-soft) var(--hero-dark-pct, 0%));
    vertical-align: middle; margin-right: 0.9rem; opacity: 0.95; }

.hero-title {
    font-size: clamp(2.9rem, 7vw, 6rem);
    font-variation-settings: 'opsz' 144, 'SOFT' 20, 'wght' 360;
    line-height: 1.02; letter-spacing: -0.018em; margin-bottom: 1.7rem;
    color: var(--hero-ink);
    text-shadow: 0 1px 2px var(--hero-halo-t), 0 2px 22px var(--hero-halo-w);
}
.hero-title em { color: var(--hero-em-col, var(--hero-em));
    /* Robuster Halo: Creme-Glow hebt das Wort auf dunklem Slide, weicher dunkler
       Schatten erdet es auf hellem/mittlerem Slide — switcht-sicher auf allen drei. */
    text-shadow: 0 1px 3px rgba(30, 18, 10, 0.38), 0 0 16px rgba(252, 245, 232, 0.45); }

.hero-subline {
    font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.55; font-weight: 300;
    color: var(--hero-ink-body);
    text-shadow: 0 1px 2px var(--hero-halo-t), 0 2px 16px var(--hero-halo-w);
    margin-bottom: 2.3rem; max-width: 33rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Ghost-Button im Hero — Glas + Text faden mit (hell→dunkel via --hero-dark-pct) */
.hero .btn-ghost {
    color: var(--hero-ink);
    background: linear-gradient(to bottom,
        color-mix(in oklch, color-mix(in oklch, white 50%, transparent), color-mix(in oklch, var(--coffee) 34%, transparent) var(--hero-dark-pct, 0%)),
        color-mix(in oklch, color-mix(in oklch, white 38%, transparent), color-mix(in oklch, var(--coffee) 22%, transparent) var(--hero-dark-pct, 0%)));
    border-color: color-mix(in oklch, var(--border-strong), rgba(255,255,255,0.42) var(--hero-dark-pct, 0%));
    backdrop-filter: blur(12px);
}
.hero .btn-ghost:hover {
    background: linear-gradient(to bottom, var(--accent), var(--accent-deep)); color: #fff; border-color: var(--accent);
}

/* Primary-Button (Unsere Kaffees) trägt den wechselnden Highlight-Ton mit — die Fläche
   switcht synchron zu Bild + Highlight-Wort, Creme-Text bleibt auf jedem Ton lesbar. */
.hero .btn-primary {
    background: var(--hero-em-col, var(--accent-deep));
    color: var(--hero-btn-ink, var(--bg));
    border: 1px solid color-mix(in oklch, white 26%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 24%, transparent),
                0 6px 18px color-mix(in oklch, var(--coffee) 32%, transparent);
    /* KEINE background-Transition — die treibt der rAF-Poll Frame für Frame (sonst Lag). */
    transition: transform var(--dur-normal) var(--ease), color 0.25s linear,
                border-color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease),
                filter var(--dur-normal) var(--ease);
}
.hero .btn-primary:hover {
    background: var(--hero-em-col, var(--accent-deep)); color: var(--hero-btn-ink, var(--bg));
    filter: brightness(1.07); border-color: color-mix(in oklch, white 38%, transparent);
}

/* Hero-Trust-Pill — Kaffee-Glas, weißer Text */
.hero-trust { position: absolute; bottom: clamp(1.5rem, 3vh, 2.5rem); left: 0; right: 0; z-index: 2; }
.hero-trust-inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem;
    padding: 0.8rem 1.4rem;
    background: color-mix(in oklch, color-mix(in oklch, var(--bg) 72%, transparent), color-mix(in oklch, var(--coffee) 46%, transparent) var(--hero-dark-pct, 0%));
    border: 1px solid color-mix(in oklch, var(--border-soft), rgba(255,255,255,0.30) var(--hero-dark-pct, 0%));
    border-radius: var(--radius-pill);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 8px 24px color-mix(in oklch, var(--coffee) 22%, transparent), inset 0 1px 0 color-mix(in oklch, white 30%, transparent);
    width: fit-content; max-width: 100%;
}
.hero-trust-item {
    font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--hero-ink); white-space: nowrap;
}
.hero-trust-dot { width: 1px; height: 12px; background: color-mix(in oklch, var(--accent), var(--accent-soft) var(--hero-dark-pct, 0%)); opacity: 0.75; flex-shrink: 0; }
@media (max-width: 720px) {
    .hero-trust-inner { gap: 0.7rem; padding: 0.65rem 1rem; }
    .hero-trust-item { font-size: 0.62rem; letter-spacing: 0.08em; }
    .hero-trust-dot { height: 9px; }
}

/* Hero-Enter Stagger */
.hero-enter { opacity: 0; transform: translateY(18px); filter: blur(8px);
    transition: opacity var(--dur-hero-enter) var(--ease), transform var(--dur-hero-enter) var(--ease), filter var(--dur-hero-enter) var(--ease); }
.hero-enter.in { opacity: 1; transform: translateY(0); filter: blur(0); }
.hero-enter.settled { filter: none !important; }
.hero-content .hero-enter:nth-child(1).in { transition-delay: 0s; }
.hero-content .hero-enter:nth-child(2).in { transition-delay: 0.12s; }
.hero-content .hero-enter:nth-child(3).in { transition-delay: 0.24s; }
.hero-content .hero-enter:nth-child(4).in { transition-delay: 0.36s; }
.hero-trust.hero-enter.in { transition-delay: 0.55s; }

/* ─────────────────────────────────────────────────────────────────────────
   10. VIEW TRANSITIONS — Cross-Document
   ───────────────────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-slide-out 0.32s var(--ease) both; }
::view-transition-new(root) { animation: page-slide-in 0.32s var(--ease) both; }
html.nav-backwards::view-transition-old(root) { animation: page-slide-out-rev 0.32s var(--ease) both; }
html.nav-backwards::view-transition-new(root) { animation: page-slide-in-rev 0.32s var(--ease) both; }
@keyframes page-slide-out     { to   { opacity: 0; transform: translateX(-4%); } }
@keyframes page-slide-in      { from { opacity: 0; transform: translateX(4%);  } }
@keyframes page-slide-out-rev { to   { opacity: 0; transform: translateX(4%);  } }
@keyframes page-slide-in-rev  { from { opacity: 0; transform: translateX(-4%); } }
html.intra-vt::view-transition-old(root), html.intra-vt::view-transition-new(root) { animation: none; }
html.page-enter body { animation: page-slide-in 0.32s var(--ease) both; }
html.nav-backwards.page-enter body { animation: page-slide-in-rev 0.32s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
    html.page-enter body { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   11. FOOTER — 4-Col + scroll-driven Ghost-Wortmarke
   ───────────────────────────────────────────────────────────────────────── */
.footer {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.5rem);
    background: linear-gradient(to bottom, var(--bg) 0%, var(--bg-deeper) 100%);
    overflow: clip; isolation: isolate;
    border-top: 1px solid var(--border-soft);
}
.footer-ghost {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 17vw, 17rem); font-weight: 400; font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 380;
    line-height: 0.85; color: var(--accent); letter-spacing: -0.03em;
    opacity: 0.05; z-index: 0; white-space: nowrap; transform: scale(0.9); transform-origin: center; font-style: italic;
}
@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.07 * var(--ghost-progress)); transform: scale(calc(0.85 + 0.15 * var(--ghost-progress))); }
}
.footer .container { position: relative; z-index: 1; }
.footer-grid {
    display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-logo { height: 40px; width: auto; margin-bottom: 1.2rem; }
.footer-brand-col p { font-size: 0.92rem; line-height: 1.6; color: var(--text-soft); max-width: 26rem; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.footer-social a {
    width: 40px; height: 40px; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted); border: 1px solid var(--border);
    background: color-mix(in oklch, var(--bg-paper) 55%, transparent);
    transition: color var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease), background var(--dur-normal) var(--ease);
}
.footer-social a:hover { color: var(--accent-deep); border-color: var(--accent-40); background: var(--accent-08); }
.footer-social svg { width: 19px; height: 19px; }
.footer-heading {
    font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 1.1rem;
}
.footer-col p { font-size: 0.92rem; line-height: 1.7; color: var(--text-body); margin-bottom: 0.8rem; }
.footer-col p:last-child { margin-bottom: 0; }
.footer-col a { color: var(--text-body); transition: color var(--dur-normal) var(--ease); display: inline-block; }
.footer-col a:hover { color: var(--accent-deep); }
.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-list li { font-size: 0.92rem; line-height: 1.5; }
.footer-bottom {
    display: flex; flex-direction: column; gap: 0.85rem;
    padding-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--border-soft);
    font-size: 0.82rem; color: var(--text-muted);
}
@media (min-width: 600px) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { color: var(--text-muted); transition: color var(--dur-normal) var(--ease); }
.footer-legal a:hover { color: var(--accent-deep); }

/* ─────────────────────────────────────────────────────────────────────────
   12. MANIFEST
   ───────────────────────────────────────────────────────────────────────── */
.manifest-section { text-align: center; padding-block: clamp(5rem, 10vw, 9rem); }
.manifest-section .label { margin-bottom: 2rem; }
.manifest-headline {
    font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.1; letter-spacing: -0.018em;
    margin-bottom: 2rem; max-width: 20ch; margin-inline: auto;
}
.manifest-body {
    font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.55; font-weight: 300;
    color: var(--text-body); max-width: 58ch; margin-inline: auto;
}
.manifest-body-2 { margin-top: 1.4rem; font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--text-soft); }

/* ─────────────────────────────────────────────────────────────────────────
   13. TRUST-SÄULEN
   ───────────────────────────────────────────────────────────────────────── */
/* Werte — typografisches Band: keine Boxen, keine Texturen. Haarlinien strukturieren,
   das Anker-Wort trägt im Lesbaren-Ghost-Ton, die Spalten antworten auf den Cursor
   (gleiche Dimm-Choreographie wie die Café-Karte). */
.werte-section { padding-block: clamp(2rem, 4vw, 4rem) clamp(3.5rem, 7vw, 6.5rem); }
.werte-section .label { margin-bottom: 1.2rem; }
.werte-kernsatz {
    font-size: clamp(1.6rem, 3vw, 2.6rem); max-width: 24ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.werte-row {
    display: grid; grid-template-columns: 1fr;
    border-top: 1px solid color-mix(in oklch, var(--coffee) 26%, transparent);
}
.werte-item { padding: clamp(1.4rem, 2vw, 2rem) 0; border-bottom: 1px solid color-mix(in oklch, var(--coffee) 14%, transparent); }
@media (min-width: 640px) {
    .werte-row { grid-template-columns: repeat(2, 1fr); }
    .werte-item { padding: clamp(1.4rem, 2vw, 2rem) clamp(1.2rem, 2vw, 2rem); border-bottom: none; }
    .werte-item:nth-child(odd) { padding-left: 0; }
    .werte-item:nth-child(even) { border-left: 1px solid color-mix(in oklch, var(--coffee) 14%, transparent); }
}
@media (min-width: 1080px) {
    .werte-row { grid-template-columns: repeat(4, 1fr); }
    .werte-item, .werte-item:nth-child(odd) { padding: clamp(1.6rem, 2.2vw, 2.2rem) clamp(1.4rem, 1.8vw, 1.9rem); border-left: 1px solid color-mix(in oklch, var(--coffee) 14%, transparent); border-bottom: none; }
    .werte-item:first-child { border-left: none; padding-left: 0; }
}
.werte-wort {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 400; font-variation-settings: 'opsz' 72, 'SOFT' 30, 'wght' 400;
    line-height: 1.05; letter-spacing: -0.01em;
    color: color-mix(in oklch, var(--accent) 58%, var(--bg));
    margin: 0 0 0.8rem;
    transition: color 0.35s var(--ease), opacity 0.35s var(--ease);
}
.werte-item p { color: var(--text-soft); font-size: clamp(0.92rem, 1.15vw, 1rem); line-height: 1.6; margin: 0; transition: opacity 0.35s var(--ease); }
/* Cursor-Choreographie: aktives Wort kippt ins tiefe Caramel, die anderen Spalten treten zurück.
   Transitions liegen auf h3/p — die Items tragen .reveal, deren Liste bleibt unangetastet. */
.werte-row:hover .werte-item:not(:hover) .werte-wort,
.werte-row:hover .werte-item:not(:hover) p { opacity: 0.45; }
.werte-item:hover .werte-wort { color: var(--accent-deep); }
@media (prefers-reduced-motion: reduce) {
    .werte-wort, .werte-item p { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   14. CAFÉ-SHOWCASE
   ───────────────────────────────────────────────────────────────────────── */
/* Tönung fadet aus der Creme rein und wieder raus — gleiches Atmen wie Sortiment/Karte,
   kein harter Bruch an den Section-Kanten. (Gilt auch für die Atmosphäre auf der Café-Sub.) */
.cafe-section {
    background: linear-gradient(to bottom, var(--bg) 0%, var(--bg-tint) 12%, var(--bg-tint) 88%, var(--bg) 100%);
    padding-block: clamp(5rem, 10vw, 9rem);
}
.cafe-grid { display: grid; grid-template-columns: 1fr; gap: clamp(3rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .cafe-grid { grid-template-columns: 1.05fr 1fr; } }
.cafe-media { position: relative; }
.cafe-img-frame {
    position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
    overflow: hidden; isolation: isolate; box-shadow: var(--depth-rest); background: var(--bg-paper);
}
.cafe-img-frame::after { content: ''; position: absolute; inset: 0; background: var(--glass-highlight); pointer-events: none; z-index: 1; }
.cafe-img-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cafe-img-inset {
    position: absolute; left: clamp(-0.75rem, -1.5vw, -1.5rem); bottom: clamp(-0.75rem, -1.5vw, -1.5rem);
    width: clamp(110px, 38%, 200px); aspect-ratio: 1 / 1;
    border-radius: var(--radius-md); overflow: hidden;
    box-shadow: var(--depth-hover); border: 5px solid var(--bg-tint);
    background: var(--bg-paper); z-index: 2;
}
.cafe-img-inset img { width: 100%; height: 100%; object-fit: cover; }
.cafe-text { max-width: 34rem; }
.cafe-text .label { margin-bottom: 1.2rem; }
.cafe-text h2 { margin-bottom: 1.5rem; }
.cafe-lead { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; color: var(--text-body); margin-bottom: 2rem; }
.cafe-hours { padding: 1.3rem 0; border-block: 1px solid var(--border-soft); margin-bottom: 2rem; }
.cafe-hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; font-size: 1rem; }
.cafe-hours-day { font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.02em; color: var(--text); }
.cafe-hours-time { color: var(--text-body); }
.cafe-hours-row--closed .cafe-hours-day, .cafe-hours-row--closed .cafe-hours-time { color: var(--text-muted); }
.cafe-hours-addr { margin-top: 0.85rem; font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0.02em; }
.cafe-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Café-Strip — Frühstück · Atmosphäre · Terrasse (Schaufenster unter dem Split) */
.cafe-strip { display: grid; grid-template-columns: 1fr; gap: clamp(0.85rem, 1.6vw, 1.3rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 700px) { .cafe-strip { grid-template-columns: repeat(3, 1fr); } }
.cafe-strip-item {
    position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-md);
    overflow: hidden; isolation: isolate; box-shadow: var(--depth-soft); background: var(--bg-paper);
    transition: opacity var(--dur-reveal-fog) var(--ease),
                filter var(--dur-reveal-fog) var(--ease),
                transform var(--dur-reveal-fog) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
}
.cafe-strip-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1.4s var(--ease); }
.cafe-strip-item::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, color-mix(in oklch, var(--coffee) 58%, transparent), transparent 48%); }
.cafe-strip-item::before { content: ''; position: absolute; inset: 0; z-index: 2; background: var(--glass-highlight); pointer-events: none; }
.cafe-strip-cap { position: absolute; left: 0; bottom: 0; z-index: 3; padding: 0.7rem 1.1rem; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px color-mix(in oklch, var(--coffee) 60%, transparent); }
.cafe-strip-item:hover { box-shadow: var(--depth-hover), var(--depth-glow); }
.cafe-strip-item:hover img { transform: scale(1.05); }

/* ─────────────────────────────────────────────────────────────────────────
   15. RÖSTEREI / PROZESS
   ───────────────────────────────────────────────────────────────────────── */
.roesterei-section { padding-block: clamp(5rem, 10vw, 9rem); }
.roesterei-grid { display: grid; grid-template-columns: 1fr; gap: clamp(3rem, 6vw, 4.5rem); align-items: start; }
@media (min-width: 900px) {
    .roesterei-grid { grid-template-columns: 1fr 1.05fr; }
}
.roesterei-text { max-width: 36rem; display: flex; flex-direction: column; }
.roesterei-text .label { margin-bottom: 1.2rem; }
.roesterei-text h2 { margin-bottom: 1.5rem; }
.roesterei-lead { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; color: var(--text-body); margin-bottom: 2.2rem; }
.roesterei-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(1.1rem, 2vw, 1.5rem); }
.roesterei-steps li { display: flex; gap: 1.1rem; align-items: flex-start; }
.roesterei-step-num {
    flex-shrink: 0; font-family: var(--font-display); font-variation-settings: 'opsz' 48, 'wght' 400;
    font-size: 1.05rem; line-height: 1; padding-top: 0.2rem;
    color: var(--accent); width: 2rem;
}
.roesterei-steps h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); margin-bottom: 0.3rem; color: var(--text); }
.roesterei-steps p { font-size: 0.95rem; line-height: 1.55; color: var(--text-soft); margin: 0; max-width: 38ch; }
.roesterei-media { position: relative; }
.roesterei-img-frame {
    position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-lg);
    overflow: hidden; isolation: isolate; box-shadow: var(--depth-rest); background: var(--bg-paper);
}
.roesterei-img-frame::after { content: ''; position: absolute; inset: 0; background: var(--glass-highlight); pointer-events: none; z-index: 1; }
.roesterei-img-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.roesterei-img-inset {
    position: absolute; right: clamp(-0.75rem, -1.5vw, -1.5rem); bottom: clamp(-0.75rem, -1.5vw, -1.5rem);
    width: clamp(110px, 36%, 190px); aspect-ratio: 1 / 1;
    border-radius: var(--radius-md); overflow: hidden;
    box-shadow: var(--depth-hover); border: 5px solid var(--bg); background: var(--bg-paper); z-index: 2;
}
.roesterei-img-inset img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Vertikale Prozess-Rail — der Fill wächst per JS Schritt für Schritt bis zum jeweils
   erreichten Node (einmal vorwärts, bleibt — nicht scroll-getrieben); jede Premium-Card
   taucht auf, sobald die Rail ihren Punkt erreicht. ─── */
.vrail { position: relative; list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 16rem; }
.vrail-track, .vrail-fill { position: absolute; left: 15px; width: 2px; border-radius: 2px; }
.vrail-track { top: var(--vrail-top, 1.9rem); height: var(--vrail-h, calc(100% - 5rem)); background: var(--border); }
.vrail-fill { top: var(--vrail-top, 1.9rem); height: 0; background: linear-gradient(to bottom, var(--accent-light), var(--accent)); box-shadow: 0 0 8px var(--accent-25); transition: height 0.76s linear; }
.vrail-step { position: relative; display: flex; align-items: flex-start; gap: clamp(1.1rem, 1.8vw, 1.5rem); }
.vrail-node {
    position: relative; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; margin-top: -0.26rem;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 0.9rem; font-weight: 500;
    font-variation-settings: 'opsz' 24, 'SOFT' 0, 'wght' 500; color: var(--coffee);
    background: var(--bg); border: 1.5px solid var(--border-strong); z-index: 2;
    transition: background var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease);
}
.vrail-step.active .vrail-node { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-12); transform: scale(1.06); }
.vrail-step--key.active .vrail-node { box-shadow: 0 0 0 5px var(--accent-18), 0 0 14px var(--accent-40); }
/* Reiner Text neben der Rail — keine Card, kein Surface, nur Titel + Beschreibung. */
.vrail-card {
    flex: 1;
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.vrail-step.active .vrail-card { opacity: 1; transform: none; }
.vrail-card h3 { font-family: var(--font-display); font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-variation-settings: 'opsz' 48, 'SOFT' 20, 'wght' 400; color: var(--text); margin-bottom: 0.4rem; }
.vrail-card p { font-size: 0.95rem; line-height: 1.6; color: var(--text-soft); margin: 0; max-width: 42ch; }
@media (prefers-reduced-motion: reduce) {
    .vrail-fill { transition: none; }
    .vrail-card { opacity: 1 !important; transform: none !important; filter: none !important; }
    .vrail-node { border-color: var(--accent); }
}

/* ─────────────────────────────────────────────────────────────────────────
   16. SORTIMENT — Kaffee-Menü mit Geschmacksprofilen
   ───────────────────────────────────────────────────────────────────────── */
/* BG tönt von Creme (oben, = Nachbar) → bg-tint (Mitte) → Creme (unten, = Nachbar):
   die Section atmet ohne harte Kanten in die anliegenden Sektionen. */
.sortiment-section { position: relative; isolation: isolate; padding-block: clamp(5rem, 10vw, 9rem);
    background: linear-gradient(to bottom, var(--bg) 0%, var(--bg-tint) 12%, var(--bg-tint) 88%, var(--bg) 100%); }
.sortiment-section > * { position: relative; z-index: 1; }
/* Kaffeebohnen-Textur als warmer Grund — vertikal aus- und eingefadet (oben/unten
   transparent → kein harter Rand), tritt hinter den Cards + Hover-Artworks zurück.
   16%: präsent genug, um nicht ausgewaschen zu wirken (11% war zu zaghaft). */
.sortiment-section::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    /* Nahtlose Kachel (Original + vertikale Spiegelung) — kein sichtbarer Schnitt beim Tiling. */
    background-image: url('images/textures/frische-seamless.jpg?v=20260610');
    background-size: 100% auto; background-repeat: repeat; background-position: center top;
    opacity: 0.16;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.sortiment-header { text-align: center; max-width: 56rem; margin-inline: auto; }
.sortiment-header h2 { max-width: none; margin-inline: auto; }
.sortiment-header p { margin-inline: auto; }
.sortiment-header .label::before { margin-right: 0.6rem; }

.sortiment-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.sortiment-group-title {
    font-size: clamp(1.3rem, 2vw, 1.7rem); font-variation-settings: 'opsz' 48, 'SOFT' 20, 'wght' 380;
    color: var(--text); margin-bottom: clamp(1.4rem, 2.5vw, 2rem);
    padding-bottom: 0.9rem; border-bottom: 1px solid color-mix(in oklch, var(--coffee) 42%, transparent);
    display: flex; align-items: baseline; gap: 0.8rem;
}

.kaffee-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr)); gap: clamp(1rem, 1.6vw, 1.4rem); }

.kaffee-card {
    position: relative; isolation: isolate; display: flex; flex-direction: column;
    padding: clamp(1.3rem, 1.8vw, 1.65rem);
    background: var(--bg-paper); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
    box-shadow: var(--depth-soft); overflow: hidden;
    /* Reveal-fog-Properties MIT in der Transition (sonst snapt der Entrance). Hover über
       box-shadow + border (kein translateY → kein Sub-Pixel-Edge-Bleed). */
    transition: opacity var(--dur-reveal-fog) var(--ease),
                filter var(--dur-reveal-fog) var(--ease),
                transform var(--dur-reveal-fog) var(--ease),
                box-shadow var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease);
}
.kaffee-card::before { content: ''; position: absolute; inset: 0; background: var(--glass-highlight); pointer-events: none; z-index: 0; border-radius: inherit; }
.kaffee-card > * { position: relative; z-index: 1; transition: opacity var(--dur-medium) var(--ease); }
.kaffee-card:hover { box-shadow: var(--depth-hover), var(--depth-glow); border-color: var(--accent-40); }

.kaffee-tag { font-family: var(--font-sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.7rem; }
.kaffee-name { font-family: var(--font-display); font-size: clamp(1.35rem, 1.9vw, 1.65rem); font-variation-settings: 'opsz' 48, 'SOFT' 20, 'wght' 400; letter-spacing: -0.01em; line-height: 1.1; color: var(--text); margin: 0 0 0.6rem; }
.kaffee-notes { font-size: 0.9rem; line-height: 1.5; color: var(--text-body); margin: 0 0 1.2rem; }
.kaffee-meter { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.3rem; }
.kaffee-meter-label { font-family: var(--font-sans); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); flex-shrink: 0; }
.kaffee-meter-track { flex: 1; height: 4px; border-radius: 4px; background: color-mix(in oklch, var(--coffee) 12%, transparent); overflow: hidden; }
.kaffee-meter-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(to right, var(--accent-light), var(--accent)); }
.kaffee-foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; padding-top: 0.9rem; border-top: 1px solid var(--border-soft); }
.kaffee-price { font-family: var(--font-display); font-size: 1.05rem; font-variation-settings: 'opsz' 36, 'wght' 420; color: var(--text); }
.kaffee-cta { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); transition: color var(--dur-normal) var(--ease); white-space: nowrap; }
.kaffee-card:hover .kaffee-cta { color: var(--accent); }

/* Hover-Reveal: das echte Produkt-Artwork (aus dem Shop) füllt die Card, der Card-Text
   blendet aus — wie ein "Umdrehen" zur Produktseite. Bild via data-kaffee-img + JS gesetzt. */
.kaffee-card::after {
    content: ''; position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; border-radius: inherit;
    background-color: var(--bg-paper);
    background-image: var(--kaffee-img, url('images/textures/frische.jpg?v=20260608'));
    background-size: contain; background-position: center; background-repeat: no-repeat;
    transition: opacity var(--dur-medium) var(--ease);
}
.kaffee-card:hover::after { opacity: 1; }
.kaffee-card:hover > * { opacity: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   17. PROBIERPAKET / EINSTIEG
   ───────────────────────────────────────────────────────────────────────── */
/* Bestseller-Marker auf der Signature-Blend-Card — ersetzt die alte Probier-Section
   als Einstiegs-Schubs (die Sorte steht ohnehin an erster Stelle im Sortiment). */
.kaffee-badge {
    position: absolute; top: clamp(1rem, 1.5vw, 1.35rem); right: clamp(1rem, 1.5vw, 1.35rem); z-index: 1;
    font-family: var(--font-sans); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--accent-deep);
    background: color-mix(in oklch, var(--accent) 14%, var(--bg-paper));
    border: 1px solid var(--accent-25);
    padding: 0.28rem 0.6rem; border-radius: 100px;
}

/* ─────────────────────────────────────────────────────────────────────────
   18. NEWSLETTER
   ───────────────────────────────────────────────────────────────────────── */
/* Newsletter — Split (Oakywood-Pattern): Formular auf Papier-Karte (Surface-Standard),
   daneben die Marken-Tasse. Tönung fadet an den Kanten wie überall. */
.newsletter-section {
    background: linear-gradient(to bottom, var(--bg) 0%, var(--bg-tint) 12%, var(--bg-tint) 88%, var(--bg) 100%);
    padding-block: clamp(4.5rem, 9vw, 8rem);
}
.nl-split { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: stretch; }
@media (min-width: 900px) { .nl-split { grid-template-columns: 1.15fr 1fr; } }
.nl-card {
    position: relative; isolation: isolate;
    background: var(--bg-paper); border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg); box-shadow: var(--depth-rest);
    padding: clamp(1.8rem, 3.2vw, 3rem);
    /* Karte trägt reveal-fog — keine eigene transition-Shorthand */
}
.nl-card::before { content: ''; position: absolute; inset: 0; background: var(--glass-highlight); pointer-events: none; z-index: 1; border-radius: inherit; }
.nl-card > * { position: relative; z-index: 2; }
.nl-card .label { margin-bottom: 1.2rem; }
.nl-card h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); margin-bottom: 1.1rem; max-width: 16ch; }
.newsletter-lead { font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.6; color: var(--text-body); max-width: 48ch; margin: 0 0 1rem; }
.nl-promise {
    font-family: var(--font-display); font-style: italic;
    font-variation-settings: 'opsz' 30, 'SOFT' 30, 'wght' 400;
    font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--accent-deep);
    margin: 0 0 1.8rem;
}
.newsletter-form { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: flex-start; max-width: 34rem; margin: 0; }
.nl-media { min-height: 300px; }
.nl-img-frame {
    position: relative; height: 100%; min-height: 340px;
    border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
    box-shadow: var(--depth-rest); background: var(--bg-paper);
}
.nl-img-frame::after { content: ''; position: absolute; inset: 0; background: var(--glass-highlight); pointer-events: none; z-index: 1; }
.nl-img-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
@media (max-width: 899px) {
    .nl-media { order: -1; min-height: 0; }
    .nl-img-frame { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
}
.newsletter-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsletter-input {
    flex: 1 1 16rem; min-width: 0;
    font-family: var(--font-sans); font-size: 1rem; color: var(--text);
    padding: 0.95rem 1.3rem;
    background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    transition: border-color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease);
}
.newsletter-input::placeholder { color: var(--text-muted); }
.newsletter-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-12); }
.newsletter-form .btn { flex: 0 0 auto; }
.newsletter-note { margin-top: 1.2rem; font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.01em; }
.newsletter-success { text-align: left; padding: clamp(1rem, 2vw, 1.5rem) 0 0; }
.newsletter-success[hidden] { display: none; }
.newsletter-success-mark { display: block; width: 2.4rem; height: 2px; margin: 0 0 1.2rem; background: var(--accent); opacity: 0.8; }
.newsletter-success p { font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-variation-settings: 'opsz' 48, 'SOFT' 20; color: var(--text); line-height: 1.4; }
/* Autofill-Override */
.newsletter-input:-webkit-autofill, .newsletter-input:-webkit-autofill:hover, .newsletter-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text);
    transition: background-color 5000s ease-in-out 0s;
}

/* ─────────────────────────────────────────────────────────────────────────
   19. REVIEWS — Auto-Scroll Marquee
   ───────────────────────────────────────────────────────────────────────── */
.reviews-section { padding-block: clamp(4rem, 7vw, 6rem); overflow: hidden; }
.reviews-section .label { display: block; text-align: center; margin-bottom: clamp(1rem, 1.6vw, 1.3rem); }
.reviews-headline { text-align: center; margin-bottom: 1rem; }
.reviews-rating { text-align: center; margin-bottom: clamp(0.9rem, 1.6vw, 1.2rem); font-size: 0.95rem; color: var(--text-muted); letter-spacing: 0.02em; }
.reviews-stars { color: var(--accent); letter-spacing: 0.12em; margin-right: 0.5rem; }
.reviews-cta { text-align: center; }
.reviews-marquee {
    overflow: hidden;
    padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.reviews-track { display: flex; gap: clamp(1.2rem, 2vw, 2rem); width: max-content; animation: reviews-scroll 40s linear infinite; }
.reviews-marquee:hover .reviews-track { animation-play-state: paused; }
@keyframes reviews-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.review-card {
    flex: 0 0 clamp(280px, 28vw, 380px);
    padding: clamp(1.6rem, 2.4vw, 2.2rem);
    background: var(--bg-paper); border-radius: var(--radius-lg); box-shadow: var(--depth-soft);
    display: flex; flex-direction: column; gap: 1rem;
    position: relative; isolation: isolate; overflow: hidden; cursor: pointer;
    transition: box-shadow var(--dur-medium) var(--ease);
}
.review-card:hover { box-shadow: var(--depth-hover), var(--depth-glow); }
.review-card::before { content: ''; position: absolute; inset: 0; background: var(--glass-highlight); pointer-events: none; z-index: 1; border-radius: inherit; }
.review-card > * { position: relative; z-index: 2; }
.review-stars { color: var(--accent); font-size: 0.95rem; letter-spacing: 0.12em; }
.review-text { margin: 0; font-size: clamp(0.95rem, 1.15vw, 1.05rem); line-height: 1.55; color: var(--text-body); }
.review-meta { display: flex; flex-direction: column; gap: 0.15rem; border-top: 1px solid var(--border-soft); padding-top: 1rem; }
.review-author { font-family: var(--font-display); font-size: 1.05rem; font-variation-settings: 'opsz' 36, 'SOFT' 20, 'wght' 420; color: var(--text); }
.review-source { font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
    .reviews-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
    .reviews-track .review-card[aria-hidden="true"] { display: none; }
}