/* ============================================================
   Kratzer GmbH — Design System
   Schreinerei & Küchenbau in Greding / Mittelfranken
   ============================================================
   Architektur:
   1. Tokens (Custom Properties)
   2. Reset & Base
   3. Typography
   4. Reveal System
   5. Placeholder Marker (für fiktive Daten die der Kunde bestätigen muss)
   6. Container & Layout Utilities
   7. Buttons & Pills (Glass+Depth Standard)
   8. Navigation
   9. Hero
   10. Sections (werden später ergänzt)
   11. Scroll-Guard (Hover-Suppression beim Scrollen)
   12. Atmospheric Wrapper (Light-Beams + Partikel-Canvas-Positioning)
   13. View Transitions
   14. Reduced-Motion
   15. Responsive
   ============================================================ */


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

/*
   @property für animatable Custom Properties —
   CSS kann sonst nicht zwischen Number-Werten interpolieren.
*/
@property --beam-drift {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
}

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

/* Karussell-Index für .kueche-carousel — ohne @property würde calc()
   mit --i fehlschlagen (Browser kennt den Typ nicht als Zahl). */
@property --i {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
}

/* Materialize-Properties für Karussell + Bento (PA-Grundstein-Pattern).
   Ohne @property kann CSS nicht zwischen Number-Werten interpolieren. */
@property --glass-opacity {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

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

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

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

:root {
    /* Farbwelt: Warm-Schwarz + Creme + Eichen-Holzton */
    --bg: #141211;                    /* Haupt-Background, fast schwarz mit warmem Touch */
    --bg-surface: #1d1a17;            /* Card-Backgrounds, Modal-Interior */
    --bg-surface-2: #26221e;          /* Nested Cards */
    --bg-light: #f4efe5;              /* Reviews-Section, einzige helle Section */

    --text: #f0e8d9;                  /* Cream-Text auf dunkel */
    --text-body: #a29882;             /* Body-Text, muted-warm */
    --text-muted: #756b58;            /* Captions, Labels */
    --text-dark: #1a1613;             /* Text auf hellem BG (Reviews-Section) */

    --accent: #b88a55;                /* Eichen-Holzton (Marken-Akzent) */
    --accent-light: #d4a574;          /* Hover-State, Highlights */
    --accent-hover: #9c7344;          /* Click/Active-State */
    --accent-dark: #7d5d37;           /* Tiefere Abstufung */

    /* Akzent in 8 Transparenzstufen via color-mix
       Nie ad-hoc rgba(184,138,85, X) schreiben — immer diese Tokens nutzen. */
    --accent-05: color-mix(in srgb, var(--accent) 5%, transparent);
    --accent-08: color-mix(in srgb, var(--accent) 8%, transparent);
    --accent-12: color-mix(in srgb, var(--accent) 12%, transparent);
    --accent-18: color-mix(in srgb, var(--accent) 18%, transparent);
    --accent-25: color-mix(in srgb, var(--accent) 25%, transparent);
    --accent-40: color-mix(in srgb, var(--accent) 40%, transparent);
    --accent-60: color-mix(in srgb, var(--accent) 60%, transparent);
    --accent-80: color-mix(in srgb, var(--accent) 80%, transparent);

    --border: rgba(240, 232, 217, 0.12);
    --border-light: rgba(240, 232, 217, 0.08);
    --border-strong: rgba(240, 232, 217, 0.22);

    --shadow-sm: color-mix(in srgb, #000 15%, transparent);
    --shadow-md: color-mix(in srgb, #000 30%, transparent);
    --shadow-lg: color-mix(in srgb, #000 50%, transparent);

    /* Depth-Shadows — Single Shadow mit Gaussian-Fade.
       Hoher Blur + moderate Opacity = luftige Tiefe, elegant statt wuchtig. */
    --depth-rest: 0 10px 30px 0 rgba(0, 0, 0, 0.4);
    --depth-hover: 0 14px 40px 0 rgba(0, 0, 0, 0.5);
    --depth-glow: 0 0 40px var(--accent-08);

    /* Alias für den Form-Wrapper — gleicher Stil wie --depth-rest, erhalten
       für bestehende Referenz. */
    --form-depth-rest: var(--depth-rest);

    /* Glass-Touch — diagonaler Highlight wie Licht auf einer Glasscheibe.
       Top-Left strong, Mid transparent, Bottom-Right Mini-Reflection. */
    --glass-highlight: linear-gradient(135deg,
                       rgba(255, 255, 255, 0.08) 0%,
                       rgba(255, 255, 255, 0) 30%,
                       rgba(255, 255, 255, 0) 70%,
                       rgba(255, 255, 255, 0.04) 100%);

    /* Overlays */
    --overlay-dark: color-mix(in srgb, var(--bg) 88%, transparent);
    --overlay-mid: color-mix(in srgb, var(--bg) 65%, transparent);

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

    /* Easings — NIE Bounce/Overshoot.
       Alles sanft, keine Richtungsumkehr. */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);           /* Primär — EaseOutExpo-ish */
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);       /* Sekundär — leiser Out */
    --ease-slide: cubic-bezier(0.22, 1, 0.36, 1);    /* Lightbox/Carousel-Slides */
    --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);   /* Filter-Wechsel, subtle UI */

    /* Durations — nie unter 0.3s für Mikro-Interaktionen. */
    --dur-fast: 0.3s;
    --dur-normal: 0.4s;
    --dur-medium: 0.6s;
    --dur-slow: 1s;
    --dur-reveal: 1s;
    --dur-reveal-fog: 1.2s;
    --dur-hero-enter: 1.4s;

    /* Spacing */
    --container-max: 1400px;
    --container-pad: clamp(1.5rem, 4vw, 5rem);
    --section-pad: clamp(5rem, 8vw, 10rem);

    /* Border-Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 100px;

    /* Navigation */
    --nav-height: 4.5rem;
}


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

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

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;       /* verhindert Layout-Shift bei Scrollbar-Wechsel */
    scroll-padding-top: calc(var(--nav-height) + 1rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Touch-action manipulation killt Double-Tap-Zoom zusätzlich zur viewport-meta */
    touch-action: manipulation;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* min-height für Sticky-Footer Flex-Layout falls gewünscht */
    min-height: 100vh;
    min-height: 100svh;
}

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

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

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

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

/* Inline-Akzent-Link: "mehr erfahren" / Telefonnummern im Fließtext. */
.link-accent {
    color: var(--accent-light);
    border-bottom: 1px solid var(--accent-25);
    transition: color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}

.link-accent:hover {
    color: var(--accent);
    border-bottom-color: var(--accent-60);
}

ul, ol {
    list-style: none;
}

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


/* ─── 3. Typography ──────────────────────────────────────────── */

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

h1 {
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
}

h3 {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 400;
}

h4 {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 500;
}

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

/* Eyebrow-Label-Pattern — vor jeder Section-H2 */
.label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

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

/* em als Italic-Akzent für Subline-Hero-Pattern */
em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--accent-light);
}


/* ─── 4. Reveal System ───────────────────────────────────────── */

/*
   Kernpattern (aus /Users/timoadjan/Desktop/claude formeln/css-animationen/reveal-scale.css
   adaptiert an Kratzer-Design-System):
   - .reveal = sanftes Opacity + leichter Lift + subtile Skalierung
   - .reveal-fog = Materialisierung aus Blur
   - .reveal-d1 bis .reveal-d6 = Stagger-Delays

   Re-Trigger beim Re-Entry ist erwünscht (nicht no-retrigger-only) —
   gibt der Seite Lebendigkeit beim Back-Scrollen.
*/

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

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

.reveal-fog {
    opacity: 0;
    filter: saturate(1) brightness(1) blur(14px);   /* Base-State explizit, nicht 'none' — sonst discrete */
    transform: scale(1.03);
    transition: opacity var(--dur-reveal-fog) var(--ease),
                filter var(--dur-reveal-fog) var(--ease),
                transform var(--dur-reveal-fog) var(--ease);
}

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

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

/* Editorial-Bilder mit Lightbox-Trigger — zoom-Cursor als visueller Hinweis. */
.editorial-img[data-lb-images] { cursor: zoom-in; }

/* Reveal auf .btn — Animation statt Transition-Delay.
   Grund: .btn hat eine `transition: all`-Shorthand für Hover-Transitions,
   die transition-delay implizit auf 0s setzt. Eine Spezifitäts-Override
   (.btn.reveal-d4 { transition-delay: 0.4s }) würde die Entry-Delay zwar
   wiederherstellen, aber gleichzeitig Hover-Interaktionen um 0.4s
   verzögern. Animation ist ein eigener Mechanismus und kollidiert nicht
   mit der btn-Transition. */
.btn.reveal.visible {
    animation: btn-reveal-in var(--dur-reveal) var(--ease) both;
}
.btn.reveal-d1.visible { animation-delay: 0.1s; }
.btn.reveal-d2.visible { animation-delay: 0.2s; }
.btn.reveal-d3.visible { animation-delay: 0.3s; }
.btn.reveal-d4.visible { animation-delay: 0.4s; }
.btn.reveal-d5.visible { animation-delay: 0.5s; }
.btn.reveal-d6.visible { animation-delay: 0.6s; }

@keyframes btn-reveal-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ─── 5. Placeholder Marker ──────────────────────────────────── */

/*
   Alle fiktiven Daten (Gründungsjahr, Inhaber-Name, Mitarbeiterzahl,
   Werkstatt-Quadratmeter etc.) werden mit .placeholder-data gekennzeichnet.
   Der Kunde sieht sofort was zu bestätigen ist.
   Tooltip auf Hover macht's explizit.
*/

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

.placeholder-data:hover {
    background: color-mix(in srgb, #ff7a3d 20%, transparent);
}

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

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


/* ─── 6. Container & Layout ──────────────────────────────────── */

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

.container-narrow {
    max-width: 860px;
}

.container-wide {
    max-width: 1600px;
}

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

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

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

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

.section-header p {
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    color: var(--text-body);
}

/* Adaptiert von arztseite-2 (h-px bg-gradient-to-r via-border):
   Gradient-Fade-Stil. Kratzer-Variante: Gold (accent) als Mitte,
   leicht dicker (2px), 2cm Abstand zu beiden Rändern (Fade läuft
   nicht bis in die Ecken). Großes margin-block für Atemraum. */
/* 1:1 Footer-Divider (border-top + ::before-Akzent), aber mit Fade-Enden:
   - Graue Linie fadet 2cm vor jeder Kante aus (statt voll-breit solid)
   - Goldener Akzent zentriert in der Mitte (Footer-Werte: 120-240px, 1px) */
.divider {
    position: relative;
    height: 1px;
    width: calc(100% - 4cm);
    margin-inline: auto;
    background: linear-gradient(to right, transparent, var(--border), transparent);
}

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


/* ─── 7. Buttons & Pills ─────────────────────────────────────── */

/*
   Glass+Depth-Standard für ALLE interaktiven Pills
   (CLAUDE.md-Regel). Display-Pills (Trust-Badges) bleiben flach.
*/

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.9rem 1.8rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    /* `all` statt selektive Liste — sonst überschreibt diese Shorthand die
       opacity-Transition aus .reveal wenn der Button beide Klassen trägt
       (z.B. .btn.btn-primary.reveal.reveal-d4). `all` deckt opacity mit ab. */
    transition: all var(--dur-normal) var(--ease);
}

/* Glass-Primary — Haupt-CTA über dunklem BG */
.btn-primary {
    background: linear-gradient(to bottom,
                    color-mix(in srgb, var(--accent) 70%, transparent),
                    color-mix(in srgb, var(--accent-dark) 60%, transparent));
    border-color: var(--accent-40);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 3px 10px var(--shadow-sm),
                0 1px 3px var(--shadow-sm);
}

.btn-primary:hover {
    background: linear-gradient(to bottom,
                    color-mix(in srgb, var(--accent-light) 85%, transparent),
                    color-mix(in srgb, var(--accent) 80%, transparent));
    border-color: var(--accent-60);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
                0 6px 20px var(--shadow-md),
                0 2px 6px var(--shadow-sm);
}

/* Ghost — transparent-Glass */
.btn-ghost {
    background: linear-gradient(to bottom,
                    rgba(240, 232, 217, 0.08),
                    rgba(240, 232, 217, 0.02));
    border-color: var(--border-strong);
    color: var(--text);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(240, 232, 217, 0.08),
                0 3px 10px var(--shadow-sm);
}

.btn-ghost:hover {
    background: linear-gradient(to bottom,
                    rgba(240, 232, 217, 0.14),
                    rgba(240, 232, 217, 0.06));
    border-color: var(--accent-40);
    color: var(--accent-light);
    transform: translateY(-1px);
}

/* Dark — auf hellem BG */
.btn-dark {
    background: linear-gradient(to bottom, #2b2520, #1a1613);
    border-color: rgba(0, 0, 0, 0.3);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(240, 232, 217, 0.08),
                0 3px 10px var(--shadow-md);
}

.btn-dark:hover {
    background: linear-gradient(to bottom, var(--accent-light), var(--accent-hover));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--depth-hover);
}

/* Arrow-Modifier — Pfeil rückt bei Hover */
.btn-arrow::after {
    content: '\2192';
    display: inline-block;
    margin-left: 0.25rem;
    transition: transform var(--dur-fast) 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.25rem 0;
    background: color-mix(in srgb, var(--bg) 0%, transparent);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    will-change: transform;             /* stabilisiert backdrop-filter bei smooth-scroll */
    transition: background var(--dur-medium) var(--ease),
                padding var(--dur-normal) var(--ease),
                box-shadow var(--dur-medium) var(--ease),
                backdrop-filter var(--dur-medium) var(--ease),
                -webkit-backdrop-filter var(--dur-medium) var(--ease);
}

.nav.scrolled,
body.page-no-hero .nav {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0.75rem 0;
    box-shadow: 0 1px 0 var(--border);
}

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

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text);
}

.nav-logo {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: var(--bg);
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.1rem;
    transition: transform var(--dur-normal) var(--ease);
}

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

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

.nav-brand-name {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.nav-brand-sub {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-top: 0.2rem;
}

.nav-links {
    display: none;
    gap: 2.5rem;
    align-items: center;
}

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

/* Nav-Link: hell (cream) über transparent-Hero, dunkler (body) wenn scrolled */
.nav-link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 75%, transparent);
    transition: color var(--dur-fast) var(--ease-soft),
                opacity var(--dur-fast) var(--ease-soft);
}

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

.nav.scrolled .nav-link,
body.page-no-hero .nav .nav-link {
    color: color-mix(in srgb, var(--text-body) 100%, transparent);
}

.nav.scrolled .nav-link:hover,
.nav.scrolled .nav-link.active,
body.page-no-hero .nav .nav-link:hover,
body.page-no-hero .nav .nav-link.active {
    color: var(--text);
}

.nav-cta {
    display: none;
}

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

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

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

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

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

.nav-hamburger.open span:nth-child(2) {
    opacity: 0;
}

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

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

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

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

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

.nav-mobile.open .nav-mobile-link:nth-child(1) { transition-delay: 0.1s, 0.1s, 0s; }
.nav-mobile.open .nav-mobile-link:nth-child(2) { transition-delay: 0.15s, 0.15s, 0s; }
.nav-mobile.open .nav-mobile-link:nth-child(3) { transition-delay: 0.2s, 0.2s, 0s; }
.nav-mobile.open .nav-mobile-link:nth-child(4) { transition-delay: 0.25s, 0.25s, 0s; }
.nav-mobile.open .nav-mobile-link:nth-child(5) { transition-delay: 0.3s, 0.3s, 0s; }
.nav-mobile.open .nav-mobile-link:nth-child(6) { transition-delay: 0.35s, 0.35s, 0s; }

.nav-mobile-link:hover {
    color: var(--accent-light);
}


/* ─── 9. Hero ─────────────────────────────────────────────────── */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(4rem, 10vh, 8rem);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg);
}

/* Hero-BG ist jetzt Container für 3 crossfadende Slides.
   Parallax läuft auf dem Container, Crossfade auf den einzelnen Slides. */
.hero-bg {
    position: absolute;
    inset: -15%;        /* extra Bildfläche für Parallax */
    z-index: 0;
    will-change: transform;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    opacity: 0;
    animation: hero-crossfade 21s linear infinite;
}

/* 3 Slides mit versetzten Delays: Slot 1 (0-7s), Slot 2 (7-14s), Slot 3 (14-21s).
   Delay -14s für Slide 2 und -7s für Slide 3 bringt ihre sichtbaren Phasen
   in die korrekte Reihenfolge (Bar → Küche → Wohnen). */
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: -14s; }
.hero-slide:nth-child(3) { animation-delay: -7s; }

/* Crossfade + durchlaufender Ken-Burns, linear (kein ease-Plateau).
   Peak scale 1.08, Zoom läuft von 88% bis 33% via wrap = 45% Cycle.
   Linear timing auf .hero-slide verhindert Mikro-Stopps an Keyframe-Grenzen. */
@keyframes hero-crossfade {
    0%   { opacity: 1; transform: scale(1.0213); }  /* wrap-punkt, mid-zoom */
    28%  { opacity: 1; transform: scale(1.0711); }  /* kurz vor fade-out */
    33%  { opacity: 0; transform: scale(1.08); }    /* fade-out komplett, peak */
    34%  { opacity: 0; transform: scale(1); }       /* reset im hidden (unsichtbar) */
    88%  { opacity: 0; transform: scale(1); }       /* zoom-start (hidden) */
    95%  { opacity: 0; transform: scale(1.0124); }  /* fade-in start, zoom läuft */
    100% { opacity: 1; transform: scale(1.0213); }  /* fade-in komplett */
}

/* Scroll-Driven Parallax via animation-timeline (kein JS)
   mit @supports-Fallback: ohne animation-timeline bleibt das Bild einfach statisch. */
@supports (animation-timeline: scroll()) {
    @keyframes hero-parallax {
        from { transform: translateY(0); }
        to   { transform: translateY(30vh); }
    }

    .hero-bg {
        animation: hero-parallax linear both;
        animation-timeline: scroll(root block);
        animation-range: 0vh 120vh;
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* Diagonaler Fokus-Overlay: links stärker gedimmt (Text-Bereich) */
        linear-gradient(to right,
                        color-mix(in srgb, var(--bg) 90%, transparent) 0%,
                        color-mix(in srgb, var(--bg) 65%, transparent) 40%,
                        color-mix(in srgb, var(--bg) 30%, transparent) 75%,
                        color-mix(in srgb, var(--bg) 20%, transparent) 100%),
        /* Vertikaler Gradient: oben leichter, unten stärker */
        linear-gradient(to bottom,
                        color-mix(in srgb, var(--bg) 25%, transparent) 0%,
                        color-mix(in srgb, var(--bg) 40%, transparent) 50%,
                        color-mix(in srgb, var(--bg) 85%, transparent) 100%);
    pointer-events: none;
}

/* Hero-Helligkeit dämpfen — Werkstatt-/Möbelfotos oft überbelichtet.
   Filter auf den Slide, nicht auf den Container (damit Parallax-Transform
   nicht mit Filter kollidiert und Slides mit unterschiedlichen Licht-
   verhältnissen trotzdem einheitlich wirken). */
.hero-slide {
    filter: brightness(0.7) contrast(1.08) saturate(0.95);
}

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

.hero-label {
    color: color-mix(in srgb, var(--text) 55%, transparent);
    margin-bottom: 1.5rem;
}

.hero-title {
    font-family: var(--font-serif);
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text);
    margin-bottom: 1.5rem;
    text-wrap: balance;
}

.hero-subline {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.7;
    color: color-mix(in srgb, var(--text) 70%, transparent);
    max-width: 540px;
    margin-bottom: 2.5rem;
}

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

/* Hero-Entrance Animation
   Wird per JS nach 200ms timeout getriggert (.in Klasse).
   Keine CSS-Animation die unabhängig läuft — synchronisiert mit JS. */
.hero-enter {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    filter: saturate(1) brightness(1) blur(6px);
}

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

/* Nach Transition-Ende: filter komplett droppen. Sonst bleibt
   filter: blur(0) als aktiver GPU-Layer → Subpixel-Artefakte.
   .settled wird per JS nach transitionend('filter') gesetzt.
   !important weil .hero-enter.in via gleicher Specificity sonst
   weiter greift (beide 0,2,0). */
.hero-enter.settled {
    filter: none !important;
}

.hero-enter:nth-child(1).in { transition-delay: 0s; }
.hero-enter:nth-child(2).in { transition-delay: 0.15s; }
.hero-enter:nth-child(3).in { transition-delay: 0.3s; }
.hero-enter:nth-child(4).in { transition-delay: 0.45s; }
.hero-enter:nth-child(5).in { transition-delay: 0.6s; }

/* Hero Trust-Bar — absolute am unteren Rand, über dem Overlay */
.hero-trust {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 1rem var(--container-pad);
    border-top: 1px solid var(--border-light);
    background: linear-gradient(to bottom,
                    transparent,
                    color-mix(in srgb, var(--bg) 50%, transparent));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-trust-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 70%, transparent);
}

.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.hero-trust-item + .hero-trust-item::before {
    content: '·';
    color: var(--accent);
    font-weight: 700;
    margin-right: 1rem;
}

@media (max-width: 768px) {
    .hero-trust-inner {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
    .hero-trust-item + .hero-trust-item::before {
        display: none;
    }
}


/* ─── 11. Scroll-Guard — Hover Suppression beim Scrollen ─────── */

/*
   Während des Scrollens werden alle pointer-events auf der Seite
   deaktiviert — verhindert Fake-Hover-States wenn Cursor zufällig
   über Cards driftet. Re-enable erst bei echter Mausbewegung
   (nicht bei Scroll-Stop-Timeout).
*/
html.is-scrolling *:not(input):not(textarea):not(select) {
    pointer-events: none !important;
}


/* ─── 12. Atmospheric Wrapper — Light-Beams + Partikel-Basis ─── */

.atmo-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.atmo-beam {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.35;
    mix-blend-mode: screen;
    background: radial-gradient(circle,
                    var(--accent-light) 0%,
                    transparent 70%);
    /* kein will-change: scroll-driven animation-timeline promoted das Element
       automatisch zum GPU-Layer — explizites will-change ist redundant und
       hält Composite-Layer dauerhaft im GPU-Memory belegt. */
}

.atmo-beam-a {
    top: 10%;
    left: 5%;
    width: 320px;
    height: 320px;
}

.atmo-beam-b {
    top: 55%;
    right: 8%;
    width: 280px;
    height: 280px;
    opacity: 0.25;
}

.atmo-beam-c {
    bottom: 15%;
    left: 45%;
    width: 240px;
    height: 240px;
    opacity: 0.2;
    background: radial-gradient(circle,
                    color-mix(in srgb, var(--accent) 80%, #fff 20%) 0%,
                    transparent 70%);
}

.atmo-beam-d {
    top: 30%;
    right: 35%;
    width: 200px;
    height: 200px;
    opacity: 0.18;
}

/* Scroll-Driven Drift: Counter-Direction für organische Bewegung */
@supports (animation-timeline: view()) {
    @keyframes beam-drift-up {
        from { transform: translateY(60px); }
        to   { transform: translateY(-60px); }
    }
    @keyframes beam-drift-down {
        from { transform: translateY(-60px); }
        to   { transform: translateY(60px); }
    }
    .atmo-beam-a, .atmo-beam-c {
        animation: beam-drift-up linear both;
        animation-timeline: view();
        will-change: transform;
    }
    .atmo-beam-b, .atmo-beam-d {
        animation: beam-drift-down linear both;
        animation-timeline: view();
        will-change: transform;
    }
}

/* Partikel-Canvas — Container für Holzspäne-Partikel
   (JS zeichnet in dieses Canvas).
   width/height 100% explizit weil Browser sonst die Default-Canvas-Attribute
   (300×150) als intrinsic size nimmt trotz inset:0 — besonders wenn Script
   zu früh läuft. */
.atmo-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
    mix-blend-mode: screen;
}

/* Content-Children sitzen über der Atmosphäre — NICHT die BG-Layer
   (hero-bg, hero-overlay, subpage-hero-bg, subpage-hero-overlay, usp-ghost
   sind absolute positioniert und sollen das bleiben) */
.atmo-wrap > .container,
.atmo-wrap > .hero-content,
.atmo-wrap > .subpage-hero-content,
.atmo-wrap > .section-header,
.atmo-wrap > .split-grid,
.atmo-wrap > .bento-grid,
.atmo-wrap > .ref-grid {
    position: relative;
    z-index: 2;
}

/* hero-trust bleibt absolute (bottom:0/left:0/right:0), nur z-index erhöhen */
.atmo-wrap > .hero-trust {
    z-index: 3;
}


/* ─── 13. View Transitions ───────────────────────────────────── */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: page-slide-out 0.45s var(--ease) both;
}

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

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

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

/* Fallback wenn Chrome die Cross-Doc-VT skipped (page-transition.js setzt .page-enter).
   Ohne diese Regel macht die Klasse nichts sichtbar — siehe Spangler-Pattern. */
html.page-enter body {
    animation: page-slide-in 0.45s var(--ease) both;
}

/* Direction-Reversal bei Back-Navigation */
html.nav-backwards::view-transition-old(root) {
    animation: page-slide-out-rev 0.45s var(--ease) both;
}

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

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

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

/* Fallback-Reverse-Variante für Back-Navigation ohne native VT */
html.nav-backwards.page-enter body {
    animation: page-slide-in-rev 0.45s var(--ease) both;
}


/* ─── 14. Reduced-Motion ─────────────────────────────────────── */

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

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

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

    /* Hero-Crossfade aus: nur erstes Slide statisch zeigen */
    .hero-slide {
        animation: none !important;
        opacity: 0;
        transform: none !important;
    }
    .hero-slide:first-child {
        opacity: 1;
    }

    .atmo-beam {
        animation: none !important;
    }

    .atmo-particles {
        display: none !important;
    }

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

    html.page-enter body {
        animation: none !important;
    }
}


/* ─── 15. Split-Block (Küche ↔ Schreinerei) ──────────────────── */

.split-section {
    background: var(--bg);
    padding-block: var(--section-pad);
}

.split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

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

/* Split-Tile im Spangler-ed-card-Stil:
   Base-State hat opacity:0 + blur + translateY — wird durch JS-Observer
   (unobserve nach erstem Entry) auf .tile-visible umgeschaltet. Nach 1100ms
   setzt JS zusätzlich .tile-ready — dann switcht die transition-Liste auf
   kurze Interaktions-Zeiten.
   Klick ist IMMER aktiv (kein pointer-events:none) — sonst wirkte der erste
   Klick während der 1100ms tot. Will-change als GPU-Layer-Hint für die
   Entrance-Animation, danach released auf .tile-ready.
   Desktop-Hover (≥1025px) zieht scale + accent-border + accent-Glow. */
.split-tile {
    position: relative;
    display: block;
    aspect-ratio: 4/5;
    border-radius: var(--radius-xl);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid transparent;
    box-shadow: var(--depth-rest);
    background: var(--bg);

    opacity: 0;
    transform: translateY(32px);
    filter: blur(2px);
    will-change: opacity, transform;
    transition:
        opacity 0.6s var(--ease-out) var(--tile-d, 0ms),
        transform 0.7s var(--ease) var(--tile-d, 0ms),
        filter 0.5s var(--ease-out) var(--tile-d, 0ms),
        border-color 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}

/* Beide Tiles faden gleichzeitig (Spangler-ref-duo-Pattern — kein Stagger) */

.split-tile.tile-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Nach 1100ms — Hover-Transitions auf Interaktions-Speed, will-change released.
   filter: none !important droppet den GPU-Filter-Layer komplett. Ohne das bleibt
   filter: blur(0) aus .tile-visible als aktiver Filter-Layer aktiv —
   verursacht halb-opake Subpixel-Kante am border-radius (sichtbar als
   "durchsichtiger Streifen" am unteren Tile-Rand, der erst nach einem
   Hover verschwindet weil Hover einen Re-Composite triggert).
   !important weil .tile-visible (via gleicher Specificity) sonst im
   Cascade-Order-Konflikt gewinnen kann. */
.split-tile.tile-ready {
    filter: none !important;
    will-change: auto;
    transition:
        transform 0.5s var(--ease),
        border-color 0.5s var(--ease),
        box-shadow 0.5s var(--ease);
}

/* Desktop-Hover: Depth + Glow (nur wenn ready).
   .sticky-hover = JS-emulierter Hover während Scroll (Scroll-Guard sperrt :hover). */
@media (min-width: 1025px) {
    .split-tile.tile-ready:is(:hover, .sticky-hover) {
        transform: scale(1.015);
        border-color: var(--accent-20);
        box-shadow: var(--depth-hover), var(--depth-glow);
    }
}

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

@media (min-width: 1025px) {
    .split-tile.tile-ready:is(:hover, .sticky-hover) .split-tile-bg {
        transform: scale(1.08);
    }
}

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

/* Dim-Pseudo: dunklere Gradient-Variante, opacity-toggled statt direktem
   Background-Wechsel (Gradients sind discrete → würden snappen). Wird
   sichtbar wenn die ANDERE Tile im .split-grid gehovert ist. */
.split-tile-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to top,
                    var(--bg) 0%,
                    color-mix(in srgb, var(--bg) 82%, transparent) 40%,
                    color-mix(in srgb, var(--bg) 50%, transparent) 80%,
                    color-mix(in srgb, var(--bg) 25%, transparent) 100%);
    transition: opacity var(--dur-medium) var(--ease);
}

.split-tile-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.75rem, 3vw, 2.75rem);
    color: var(--text);
}

.split-tile-content .label {
    margin-bottom: 0.75rem;
}

.split-tile-content h3 {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 400;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.split-tile-content p {
    font-size: 14px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--text) 75%, transparent);
    margin-bottom: 1.5rem;
    max-width: 440px;
}

.split-tile-cta {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color var(--dur-fast) var(--ease-soft),
                gap var(--dur-normal) var(--ease);
}

.split-tile:is(:hover, .sticky-hover) .split-tile-cta {
    color: var(--accent-light);
    gap: 0.9rem;
}

/* Container-Hover-Dim — andere Tile tritt zurück beim Hover auf einer.
   Greift nur wenn beide Tiles ready sind (sonst flackert's beim Entrance).
   Trigger sitzt am Container (nicht am einzelnen Tile), damit der Dim
   beim Cursor-Wechsel durch den Gap nicht kurz wegblitzt.
   .has-sticky-hover auf .split-grid = JS-emulierter :hover-Zustand während Scroll. */
@media (min-width: 1025px) {
    .split-grid:is(:hover, .has-sticky-hover) .split-tile.tile-ready:not(:hover):not(.sticky-hover) .split-tile-bg {
        filter: saturate(0.5) brightness(0.6);
    }
    .split-grid:is(:hover, .has-sticky-hover) .split-tile.tile-ready:not(:hover):not(.sticky-hover) .split-tile-overlay::before {
        opacity: 1;
    }
}


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

.usp-section {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-light);
    padding-top: var(--section-pad);
    padding-bottom: clamp(7rem, 11vw, 14rem);
}

.usp-points {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: clamp(2rem, 4vw, 3rem);
    row-gap: clamp(3rem, 5vw, 4.5rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

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

.usp-point {
    position: relative;
    padding-left: 1.75rem;
}

.usp-point::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 16px var(--accent-40);
}

.usp-point h4 {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.usp-point p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-body);
}


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

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


/* ─── 18. Footer ─────────────────────────────────────────────── */

.footer {
    background: color-mix(in srgb, var(--bg) 100%, transparent);
    border-top: 1px solid var(--border);
    padding-block: clamp(3rem, 5vw, 5rem) 2rem;
    color: var(--text-body);
    position: relative;
    overflow: hidden;
}

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

/* Container hebt sich über das Ghost — sonst läge es über dem Text */
.footer > .container {
    position: relative;
    z-index: 1;
}

/* Footer-Wordmark-Ghost: großes "Kratzer" hinter dem Footer-Inhalt.
   Scroll-driven: opacity 0 → 0.07, scale 0.85 → 1.0, animiert über
   view(block) timeline vom Footer-Eintritt bis 50% im Viewport.
   Fallback: opacity 0.035 statisch für Browser ohne scroll-timeline. */
.footer-ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0.035;
    z-index: 0;
}

.footer-ghost span {
    font-family: var(--font-serif);
    font-size: clamp(5rem, 14vw, 12rem);
    font-weight: 400;
    color: var(--text);
    letter-spacing: 0.02em;
    line-height: 1;
}

@supports (animation-timeline: view()) {
    @property --ghost-progress {
        syntax: '<number>';
        inherits: true;
        initial-value: 0;
    }

    @keyframes footer-ghost-enter {
        from { --ghost-progress: 0; }
        to   { --ghost-progress: 1; }
    }

    .footer {
        animation: footer-ghost-enter linear both;
        animation-timeline: view(block);
        animation-range: entry 0% contain 50%;
    }

    .footer-ghost {
        opacity: calc(0.07 * var(--ghost-progress));
        transform: scale(calc(0.85 + 0.15 * var(--ghost-progress)));
    }
}

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

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

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

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

.footer-col p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-body);
}

.footer-col a {
    color: var(--text-body);
    transition: color var(--dur-fast) var(--ease-soft);
}

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

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

.footer-about {
    max-width: 340px;
    font-size: 13px;
    line-height: 1.7;
}

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

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

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

.footer-legal a:hover {
    color: var(--text-body);
}


/* ─── 19. Body-Scroll-Lock (bei offenem Mobile-Menu) ─────────── */

body.menu-open {
    overflow: hidden;
}


/* ============================================================
   Subpage-spezifische Styles
   ============================================================ */


/* ─── 20. Subpage-Hero ───────────────────────────────────────── */

.subpage-hero {
    position: relative;
    min-height: 65vh;
    min-height: 65svh;
    padding-top: calc(var(--nav-height) + 4rem);
    padding-bottom: clamp(4rem, 8vh, 7rem);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
    background: var(--bg);
}

.subpage-hero-bg {
    position: absolute;
    inset: -10%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

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

.subpage-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at 30% 80%,
                        color-mix(in srgb, var(--bg) 80%, transparent) 0%,
                        transparent 60%),
        linear-gradient(to bottom,
                        color-mix(in srgb, var(--bg) 30%, transparent) 0%,
                        color-mix(in srgb, var(--bg) 60%, transparent) 50%,
                        color-mix(in srgb, var(--bg) 95%, transparent) 100%);
}

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

.subpage-hero-content h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--text);
    margin-bottom: 1.5rem;
}

.subpage-hero-content p {
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.7;
    color: color-mix(in srgb, var(--text) 75%, transparent);
    max-width: 580px;
}

.subpage-hero-content em {
    color: var(--accent-light);
}


/* ─── 21. Area-Back Button (statische Variante) ──────────────── */

.area-back-section {
    background: var(--bg);
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.area-back {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-body);
    padding: 0.9rem 1.75rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(to bottom,
                    rgba(240, 232, 217, 0.06),
                    rgba(240, 232, 217, 0.02));
    border: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(240, 232, 217, 0.06),
                0 2px 6px var(--shadow-sm);
    transition: background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease);
}

.area-back:hover {
    background: linear-gradient(to bottom, var(--accent-25), var(--accent-12));
    border-color: var(--accent-60);
    color: var(--text);
    transform: translateY(-1px);
}

.area-back > span:first-child {
    transition: transform var(--dur-fast) var(--ease-soft);
}

.area-back:hover > span:first-child {
    transform: translateX(-3px);
}


/* ─── 21b. Area-Back Button (floating Variante) ─────────────── */
/*
   Fixed auf der linken Seite, vertikal mittig. Taucht auf sobald
   der Hero nach oben aus dem Viewport gescrollt ist (JS-Observer
   in script.js setzt .visible). Mobile display:none — dort reicht
   der statische Back-Button.
*/
.area-back-float {
    position: fixed;
    left: clamp(1rem, 2vw, 2.5rem);
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-body);
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(to bottom,
                    rgba(240, 232, 217, 0.06),
                    rgba(240, 232, 217, 0.02));
    border: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(240, 232, 217, 0.06),
                0 2px 6px var(--shadow-sm);
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    transition: opacity 0.5s var(--ease),
                transform 0.5s var(--ease),
                background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease);
}

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

.area-back-float:hover {
    background: linear-gradient(to bottom, var(--accent-25), var(--accent-12));
    border-color: var(--accent-60);
    color: var(--text);
}

.area-back-float > span:first-child {
    transition: transform var(--dur-fast) var(--ease-soft);
}

.area-back-float:hover > span:first-child {
    transform: translateX(-3px);
}

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


/* ─── 22. Editorial-Section ──────────────────────────────────── */

.editorial-section {
    background: var(--bg);
    padding-block: var(--section-pad);
}

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

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

.editorial-text h2 {
    margin-bottom: 1.5rem;
    font-size: clamp(1.8rem, 3.5vw, 2.75rem);
}

.editorial-text p {
    margin-bottom: 1.25rem;
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    line-height: 1.8;
}

.editorial-text .btn {
    margin-top: 1.5rem;
}

.editorial-img {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--depth-rest);
}

.editorial-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s var(--ease);
}

.editorial-img:hover img {
    transform: scale(1.03);
}


/* ─── 23. Material-Konfigurator ──────────────────────────────── */

.configurator-section {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding-block: var(--section-pad);
}

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

@media (min-width: 1024px) {
    .configurator {
        grid-template-columns: 1.4fr 1fr;
        gap: 3rem;
    }
}

/* --- Preview (Live-Bild-Stack) --- */

.configurator-preview {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-surface-2);
    box-shadow: var(--depth-rest),
                inset 0 1px 0 rgba(240, 232, 217, 0.05);
}

.configurator-stage {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--bg);
}

.cfg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.03);
    transition: opacity 0.9s var(--ease),
                transform 1.4s var(--ease);
    pointer-events: none;
}

.cfg-layer.active {
    opacity: 1;
    transform: scale(1);
}

.configurator-summary {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--text);
}

.configurator-summary-label {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
}

.configurator-summary-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--text);
}

/* --- Controls --- */

.configurator-controls {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.cfg-group-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.cfg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cfg-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-body);
    background: linear-gradient(to bottom,
                    rgba(240, 232, 217, 0.04),
                    rgba(240, 232, 217, 0.01));
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(240, 232, 217, 0.04),
                0 2px 6px var(--shadow-sm);
    cursor: pointer;
    transition: background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease);
}

.cfg-chip:hover {
    background: linear-gradient(to bottom,
                    rgba(240, 232, 217, 0.08),
                    rgba(240, 232, 217, 0.03));
    border-color: var(--accent-40);
    color: var(--text);
    transform: translateY(-1px);
}

.cfg-chip.selected {
    background: linear-gradient(to bottom, var(--accent-25), var(--accent-12));
    border-color: var(--accent-60);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 3px 10px var(--accent-18);
}

.cfg-chip-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.cfg-cta {
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
    margin-top: 0.5rem;
}

.btn-full {
    width: 100%;
    justify-content: center;
    font-size: 14px;
    padding: 1rem 1.5rem;
}

.cfg-note {
    margin-top: 0.75rem;
    font-size: 11.5px;
    font-style: italic;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.6;
}


/* ─── 24. Fake PaletteCAD-UI ─────────────────────────────────── */

.paletteCad-section {
    background: var(--bg);
    padding-block: var(--section-pad);
}

.palette-ui {
    max-width: 1200px;
    margin-inline: auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #0e0d0c;
    border: 1px solid rgba(240, 232, 217, 0.08);
    box-shadow: var(--depth-rest),
                0 0 0 1px rgba(240, 232, 217, 0.03),
                0 0 100px 20px var(--accent-05);
    font-family: var(--font-sans);
    color: #d4cab5;
    isolation: isolate;
}

/* Chrome (Window-Top-Bar) */
.palette-chrome {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(to bottom, #1a1816, #141210);
    border-bottom: 1px solid rgba(240, 232, 217, 0.06);
    font-size: 11px;
}

.palette-dots {
    display: flex;
    gap: 0.4rem;
}

.palette-dots span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3a3632;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
}

.palette-dots span:nth-child(1) { background: #ff5f57; }
.palette-dots span:nth-child(2) { background: #febc2e; }
.palette-dots span:nth-child(3) { background: #28c840; }

.palette-tabs {
    display: flex;
    gap: 0.25rem;
    overflow: hidden;
}

.palette-tab {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: #756b58;
    background: transparent;
    border-radius: 4px 4px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palette-tab.active {
    background: #0e0d0c;
    color: var(--accent-light);
    border: 1px solid rgba(240, 232, 217, 0.06);
    border-bottom: 1px solid #0e0d0c;
    margin-bottom: -1px;
}

.palette-tools {
    display: flex;
    gap: 0.5rem;
}

.palette-tool {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #756b58;
    font-size: 12px;
    border-radius: 4px;
    background: rgba(240, 232, 217, 0.03);
}

/* Body — 3 Spalten auf Desktop */
.palette-body {
    display: grid;
    grid-template-columns: 180px 1fr 180px;
    min-height: 480px;
    background: #0e0d0c;
}

@media (max-width: 900px) {
    .palette-body {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .palette-panel {
        display: none;
    }
}

.palette-panel {
    padding: 1.25rem 1rem;
    background: linear-gradient(to bottom, #13110f, #0e0d0c);
    font-size: 11px;
}

.palette-panel-left {
    border-right: 1px solid rgba(240, 232, 217, 0.05);
}

.palette-panel-right {
    border-left: 1px solid rgba(240, 232, 217, 0.05);
}

.palette-panel-heading {
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.75rem;
    margin-top: 1.25rem;
}

.palette-panel-heading:first-child {
    margin-top: 0;
}

.palette-layer-list,
.palette-measure-list,
.palette-status-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.palette-layer {
    font-size: 11px;
    color: #756b58;
    padding: 0.3rem 0.4rem;
    border-radius: 3px;
    cursor: default;
    transition: color var(--dur-fast) var(--ease-soft),
                background var(--dur-fast) var(--ease-soft);
}

.palette-layer:hover {
    background: rgba(240, 232, 217, 0.03);
    color: #a29882;
}

.palette-layer.active {
    color: var(--accent-light);
}

.palette-measure-list li {
    color: #8a7f6a;
    font-family: 'SF Mono', 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.palette-status-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #8a7f6a;
    font-size: 11px;
}

.palette-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3a3632;
    flex-shrink: 0;
}

/* Viewport — das "3D-Fenster" */
.palette-viewport {
    position: relative;
    overflow: hidden;
    background: #0a0906;
    isolation: isolate;
}

.palette-viewport img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9) contrast(1.08);
}

.palette-viewport-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.7rem;
    background: rgba(14, 13, 12, 0.75);
    border: 1px solid rgba(240, 232, 217, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 4px;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--accent-light);
    text-transform: uppercase;
}

.palette-viewport-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.palette-ruler-h {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(184, 138, 85, 0.3), transparent);
}

.palette-ruler-v {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 60%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(184, 138, 85, 0.3), transparent);
}

.palette-material-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.palette-material {
    aspect-ratio: 1;
    border-radius: 3px;
    padding: 2px;
    background: rgba(240, 232, 217, 0.03);
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-soft),
                transform var(--dur-fast) var(--ease-soft);
}

.palette-material:hover {
    border-color: var(--accent-40);
}

.palette-material.active {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(14, 13, 12, 1),
                0 0 0 1px var(--accent);
}

.palette-material-swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px;
}

/* Status-Bar unten */
.palette-statusbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: #080706;
    border-top: 1px solid rgba(240, 232, 217, 0.05);
    font-family: 'SF Mono', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: #8a7f6a;
    flex-wrap: wrap;
}

.palette-statusbar-sep {
    color: var(--accent);
    opacity: 0.5;
}

.palette-cta {
    max-width: 720px;
    margin: 3rem auto 0;
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
}

.palette-cta p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-body);
    margin-bottom: 1.5rem;
}


/* ─── 25. Küchen-Typen-Grid ──────────────────────────────────── */

.kueche-types-section {
    background: var(--bg);
    padding-block: var(--section-pad);
}

.kueche-types-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 700px) and (max-width: 999px) {
    .kueche-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .kueche-types-grid > :last-child {
        grid-column: 1 / -1;
        aspect-ratio: 16/9;
    }
}

@media (min-width: 1000px) {
    .kueche-types-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ktype {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    /* `all` — sonst killt die selektive transform/box-shadow-Liste die
       opacity-Transition aus .reveal bei .ktype.reveal-Kombinationen */
    transition: all var(--dur-medium) var(--ease);
    cursor: default;
}

.ktype:is(:hover, .sticky-hover) {
    transform: translateY(-4px);
    box-shadow: var(--depth-hover), var(--depth-glow);
}

.ktype-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    transition: filter var(--dur-medium) var(--ease),
                transform 1.2s var(--ease);
}

.ktype:is(:hover, .sticky-hover) .ktype-img {
    transform: scale(1.08);
}

.ktype-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
                    color-mix(in srgb, var(--bg) 92%, transparent) 0%,
                    color-mix(in srgb, var(--bg) 55%, transparent) 45%,
                    color-mix(in srgb, var(--bg) 10%, transparent) 80%,
                    transparent 100%);
}

.ktype-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.5rem, 2.5vw, 2rem);
}

.ktype-num {
    position: absolute;
    top: clamp(1.5rem, 2.5vw, 2rem);
    right: clamp(1.5rem, 2.5vw, 2rem);
    font-family: var(--font-serif);
    font-size: clamp(4rem, 10vw, 7rem);
    font-weight: 300;
    color: rgba(240, 232, 217, 0.08);
    line-height: 1;
    pointer-events: none;
    transition: color var(--dur-medium) var(--ease);
}

.ktype:is(:hover, .sticky-hover) .ktype-num {
    color: var(--accent-25);
}

.ktype-content h3 {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    margin-bottom: 0.5rem;
    color: var(--text);
}

.ktype-content p {
    font-size: 14px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--text) 75%, transparent);
    max-width: 400px;
}


/* ─── 25b. Kueche-Carousel + Bento ──────
   Single-Panel-Slide-Karussell für die 3 USP-Spezialitäten (Bild + Text
   als Einheit pro Panel, horizontal-slide beim Wechsel). JS-driven: setzt
   --i auf Container, track transformt translateX(calc(var(--i) * -100%)).
   Auto-Advance 6s, Pause bei Hover, Dots mit Labels, Touch-Swipe.

   Bento darunter: 21 Küchen-Referenzen, jede Tile öffnet Lightbox am
   eigenen Bild (werkstatt.html-Pattern, reordered via Inline-Script). */

/* --- Karussell: full-bleed aus dem Container ausbrechen --- */
.kueche-carousel {
    /* Breakout-Trick: zieht das Element bis zum Browser-Rand, egal wie schmal der Parent ist.
       Funktioniert weil 50% = Container-Mitte und 50vw = halbe Viewport-Breite. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* Nav-Wrap zurück auf Container-Breite für normales Layout */
.kueche-carousel-nav {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* Viewport: native scroll container, KEIN padding-inline — die Edge-Zentrierung
   passiert über Track-padding-left + ::after-Spacer (PA-Grundstein-Pattern).
   padding-block gibt dem Shadow des aktiven Panels Raum zum Atmen — sonst würde
   overflow-y: hidden den Shadow oben/unten abschneiden. */
.kueche-carousel-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;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    isolation: isolate;
    /* Top ≥30px weil hover-shadow nach oben ~20px ragt + Puffer.
       Bottom ≥64px weil depth-hover shadow (14+40 = 54px extent) + Puffer. */
    padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(4rem, 5vw, 4.5rem);
}

.kueche-carousel-viewport::-webkit-scrollbar {
    display: none;
}

/* Track: flex row mit padding-left + ::after-Spacer für Edge-Zentrierung */
.kueche-carousel-track {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
    padding-left: calc((100vw - min(68vw, 820px)) / 2);
}

/* Trailing-Spacer damit letztes Panel zentriert snappen kann (minus gap) */
.kueche-carousel-track::after {
    content: '';
    flex: 0 0 calc((100vw - min(68vw, 820px)) / 2 - clamp(1rem, 2vw, 2rem));
}

@media (max-width: 767px) {
    .kueche-carousel-track {
        gap: 1rem;
        padding-left: calc((100vw - 85vw) / 2);
    }
    .kueche-carousel-track::after {
        flex: 0 0 calc((100vw - 85vw) / 2 - 1rem);
    }
}

.kueche-carousel-panel {
    flex-shrink: 0;
    width: clamp(300px, 68vw, 820px);
    aspect-ratio: 16/9;
    scroll-snap-align: center;
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    background: var(--bg);
    border-radius: var(--radius-xl);
    /* Kein default shadow — nur das aktive (zentrierte) Panel bekommt ihn
       via .active-Klasse (JS setzt sie in updateDots basierend auf Scroll-Center).
       Pattern aus PA-Grundstein: .ba-slide.ba-active */
    transition: box-shadow var(--dur-medium) var(--ease);
    /* Defaults damit Panel auch ohne Timeline-Support klar dargestellt wird */
    --glass-opacity: 0;
    --info-progress: 1;
}

.kueche-carousel-panel.active {
    /* Kompakterer Shadow als --depth-rest — blur 20 statt 30 für fokussiertere Tiefe */
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.45);
}

/* Materialize-Animation via view(inline) timeline — 3-Phasen: frosted → klar → frosted.
   Nur der zentrale Slide ist scharf, Nachbarn sind milchig (PA-Grundstein-Effekt). */
@supports (animation-timeline: view()) {
    @keyframes kueche-carousel-materialize {
        0% {
            --glass-opacity: 1;
            --info-progress: 0;
            transform: scale(0.95) translateY(10px);
        }
        50% {
            --glass-opacity: 0;
            --info-progress: 1;
            transform: scale(1) translateY(0);
        }
        100% {
            --glass-opacity: 1;
            --info-progress: 0;
            transform: scale(0.95) translateY(10px);
        }
    }
    .kueche-carousel-panel {
        animation: kueche-carousel-materialize linear both;
        animation-timeline: view(inline);
        animation-range: contain 0% contain 100%;
    }
}

@media (max-width: 767px) {
    .kueche-carousel-panel {
        width: 85vw;
        aspect-ratio: 4/5;
    }
}

/* Hover auf dem aktiven Panel verstärkt den Shadow leicht + Glow */
.kueche-carousel-panel.active:hover {
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.55), 0 0 28px var(--accent-08);
}

.kueche-carousel-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: saturate(0.92) contrast(1.05) brightness(0.92);
}

.kueche-carousel-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right,
        color-mix(in srgb, var(--bg) 95%, transparent) 0%,
        color-mix(in srgb, var(--bg) 75%, transparent) 35%,
        color-mix(in srgb, var(--bg) 35%, transparent) 70%,
        color-mix(in srgb, var(--bg) 15%, transparent) 100%);
}

.kueche-carousel-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(2rem, 5vw, 4rem);
    max-width: 640px;
}

.kueche-carousel-num {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--accent-light);
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.kueche-carousel-content h3 {
    font-size: clamp(1.65rem, 3.2vw, 2.6rem);
    font-weight: 400;
    margin-bottom: 1rem;
    line-height: 1.15;
    color: var(--text);
}

.kueche-carousel-content p {
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    line-height: 1.7;
    color: color-mix(in srgb, var(--text) 78%, transparent);
}

/* Glass-Highlight pro Panel (::before damit ::after für Materialize-Frosted-Glass frei bleibt).
   border-radius: inherit fixt Rendering-Artefakte an den Ecken (Parent overflow:hidden
   greift bei backdrop-filter/isolation-isolate-Kombinationen nicht immer sauber). */
.kueche-carousel-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 2;
}

/* Frosted-Glass-Overlay für Materialize-Effekt. */
.kueche-carousel-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 3;
    background: rgba(240, 232, 217, 0.12);
    backdrop-filter: blur(6px) saturate(0.85);
    -webkit-backdrop-filter: blur(6px) saturate(0.85);
    opacity: var(--glass-opacity);
    pointer-events: none;
}

/* Panel-Content fadet mit --info-progress — klar bei zentriert, frosted an Rändern */
.kueche-carousel-content {
    opacity: var(--info-progress);
    transform: translateY(calc(8px * (1 - var(--info-progress))));
}

/* --- Dot-Nav mit USP-Labels --- */
.kueche-carousel-nav {
    /* Minimal weil viewport bereits padding-bottom hat für Shadow-Raum */
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.kueche-carousel-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.2rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-body);
    background: linear-gradient(to bottom,
                    rgba(240, 232, 217, 0.04),
                    rgba(240, 232, 217, 0.01));
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(240, 232, 217, 0.04),
                0 2px 6px var(--shadow-sm);
    cursor: pointer;
    transition: background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease);
}

.kueche-carousel-dot:hover {
    border-color: var(--accent-40);
    color: var(--text);
    transform: translateY(-1px);
}

.kueche-carousel-dot.active {
    background: linear-gradient(to bottom, var(--accent-25), var(--accent-12));
    border-color: var(--accent-60);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 3px 10px var(--accent-18);
}

.kueche-carousel-dot .dot-num {
    font-family: var(--font-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-light);
    letter-spacing: 0.08em;
}

.kueche-carousel-dot.active .dot-num {
    color: var(--accent);
}

.kueche-carousel-dot .dot-label {
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Mobile: Portrait-Ratio + vertikaler Overlay + kompakte Dots */
@media (max-width: 767px) {
    .kueche-carousel-viewport {
        aspect-ratio: 4/5;
    }
    .kueche-carousel-overlay {
        background: linear-gradient(to top,
            var(--bg) 0%,
            color-mix(in srgb, var(--bg) 60%, transparent) 50%,
            color-mix(in srgb, var(--bg) 20%, transparent) 85%);
    }
    .kueche-carousel-content {
        max-width: 100%;
    }
    .kueche-carousel-dot {
        padding: 0.5rem 0.85rem;
        font-size: 11px;
    }
    .kueche-carousel-dot .dot-label {
        display: none;
    }
}

/* Reduced-Motion: Transition aus */
@media (prefers-reduced-motion: reduce) {
    .kueche-carousel-track {
        transition: none;
    }
}


/* --- Bento-Grid mit allen 21 Küchen --- */
.kueche-bento-section {
    background: var(--bg);
    padding-block: var(--section-pad);
}

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

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

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

.kueche-bento-item {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--depth-rest);
    cursor: pointer;
    isolation: isolate;
    transition: box-shadow var(--dur-medium) var(--ease);
    background: var(--bg);
    /* Defaults — wenn Timeline nicht greift, bleibt Tile klar */
    --bento-glass: 0;
    --bento-progress: 1;
}

/* Hover nur Shadow-Change — kein transform weil der mit Materialize-scale konfligiert */
.kueche-bento-item:is(:hover, .sticky-hover) {
    box-shadow: var(--depth-hover), var(--depth-glow);
}

/* Materialize-Animation beim vertikalen Durchscrollen des Bentos.
   Subtiler als Karussell (weniger scale, kein translateY) weil 11 Tiles
   gleichzeitig animieren — sonst wirkt's unruhig. */
@supports (animation-timeline: view()) {
    @keyframes kueche-bento-materialize {
        0% {
            --bento-glass: 1;
            --bento-progress: 0;
            transform: scale(0.97);
        }
        50% {
            --bento-glass: 0;
            --bento-progress: 1;
            transform: scale(1);
        }
        100% {
            --bento-glass: 1;
            --bento-progress: 0;
            transform: scale(0.97);
        }
    }
    .kueche-bento-item {
        animation: kueche-bento-materialize linear both;
        animation-timeline: view();
        animation-range: contain 0% contain 100%;
    }
}

/* Frosted-Glass-Overlay pro Bento-Tile (::after, weil ::before = Glass-Highlight).
   border-radius: inherit fixt Corner-Bleed-Artefakte bei backdrop-filter. */
.kueche-bento-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 2;
    background: rgba(240, 232, 217, 0.12);
    backdrop-filter: blur(5px) saturate(0.9);
    -webkit-backdrop-filter: blur(5px) saturate(0.9);
    opacity: var(--bento-glass);
    pointer-events: none;
}

.kueche-bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    transition: transform 1.2s var(--ease),
                filter var(--dur-medium) var(--ease);
    filter: saturate(0.92) contrast(1.05) brightness(0.92);
}

.kueche-bento-item:is(:hover, .sticky-hover) img {
    transform: scale(1.08);
    filter: saturate(1) contrast(1.08) brightness(1);
}

/* Glass-Highlight auf Bento-Items — border-radius: inherit fixt Corner-Bleed */
.kueche-bento-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}


/* ─── 26. Kontakt-Hero (kompakt, ohne Bild) ──────────────────── */

.kontakt-hero {
    padding-top: calc(var(--nav-height) + 5rem);
    padding-bottom: clamp(4.5rem, 7.5vw, 6.5rem);
    background: var(--bg);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Hero-Parallax: beams wandern scroll-getrieben nach unten — identische
   Werte wie Subpage-Hero-BG (translateY 15vh über 0vh-80vh scroll).
   Überschreibt die view()-basierte drift-Animation nur innerhalb .kontakt-hero.
   Content (Headline, Subtext) bleibt statisch — wie bei Subpages auch. */
@supports (animation-timeline: scroll()) {
    @keyframes kontakt-hero-parallax {
        from { transform: translateY(0); }
        to   { transform: translateY(15vh); }
    }
    .kontakt-hero .atmo-beam-a,
    .kontakt-hero .atmo-beam-b {
        animation: kontakt-hero-parallax linear both;
        animation-timeline: scroll(root block);
        animation-range: 0vh 80vh;
    }
}

.kontakt-hero h1 {
    max-width: 760px;
    margin: 0.5rem auto 1.25rem;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
}

.kontakt-hero-sub {
    max-width: 580px;
    margin-inline: auto;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    color: color-mix(in srgb, var(--text) 75%, transparent);
}


/* ─── 27. Onboarding-Form ────────────────────────────────────── */

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

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

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

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

/* Nur abgeschlossene Schritte sind zurück-klickbar (form.js:371 erlaubt nur step < currentStep) */
.ob-step-indicator.completed {
    cursor: pointer;
}

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

.ob-step-indicator.active .ob-step-num {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
    box-shadow: 0 0 20px var(--accent-40);
}

.ob-step-indicator.completed .ob-step-num {
    background: var(--bg-surface);
    border-color: var(--accent-60);
    color: var(--accent-light);
}

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

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

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

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

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

/* --- Form-Wrapper --- */
.ob-form-wrapper {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--form-depth-rest);
    overflow: hidden;
    position: relative;
}

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

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

.ob-step-title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 300;
    margin-bottom: 0.75rem;
    color: var(--text);
    text-align: center;
}

.ob-step-subtitle {
    font-size: 13.5px;
    color: var(--text-body);
    margin-bottom: 2.5rem;
    text-align: center;
    max-width: 440px;
    margin-inline: auto;
}

/* --- Type-Buttons (Step 0) --- */
.ob-type-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

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

.ob-type-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(to bottom,
                    rgba(240, 232, 217, 0.03),
                    rgba(240, 232, 217, 0.01));
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: left;
    cursor: pointer;
    transition: background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease);
}

.ob-type-btn:hover {
    background: linear-gradient(to bottom,
                    rgba(240, 232, 217, 0.06),
                    rgba(240, 232, 217, 0.02));
    border-color: var(--accent-40);
    transform: translateY(-1px);
}

.ob-type-btn.selected {
    background: linear-gradient(to bottom, var(--accent-25), var(--accent-12));
    border-color: var(--accent-60);
    box-shadow: 0 8px 24px var(--accent-18),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ob-type-icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.25rem;
    filter: grayscale(0.3);
}

.ob-type-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text);
}

.ob-type-desc {
    font-size: 12px;
    color: var(--text-body);
    line-height: 1.5;
}

/* --- Service-Chips (Step 1) --- */
.ob-service-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    min-height: 100px;
}

/* Override: [hidden] muss display:none erzwingen (sonst überschreibt display:flex) */
.ob-service-grid[hidden] {
    display: none;
}

.ob-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-body);
    background: linear-gradient(to bottom,
                    rgba(240, 232, 217, 0.04),
                    rgba(240, 232, 217, 0.01));
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(240, 232, 217, 0.04),
                0 2px 6px var(--shadow-sm);
    cursor: pointer;
    transition: background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease);
}

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

.ob-chip.selected {
    background: linear-gradient(to bottom, var(--accent-25), var(--accent-12));
    border-color: var(--accent-60);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 3px 10px var(--accent-18);
}

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

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

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

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

.ob-field-optional {
    font-size: 9px;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    opacity: 0.6;
}

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

.ob-field textarea {
    resize: vertical;
    min-height: 80px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    line-height: 1.6;
}

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

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

/* :user-invalid mit has() → moderne Validation nach User-Interaktion */
.ob-field input:user-invalid,
.ob-field textarea:user-invalid {
    border-color: #c0392b;
}

.ob-field:has(input:user-invalid) label,
.ob-field:has(textarea:user-invalid) label {
    color: #c0392b;
}

/* --- Summary in Step 2 --- */
.ob-summary {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(to bottom, var(--accent-12), var(--accent-05));
    border: 1px solid var(--accent-40);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ob-summary-label {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
}

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

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

.ob-back {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-body);
    padding: 0.5rem 0;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-soft);
    background: none;
    border: none;
}

.ob-back:hover {
    color: var(--accent-light);
}

/* --- Disable via :has() — next Button wenn keine Auswahl --- */
.ob-step[data-step="0"]:not(:has(.ob-type-btn.selected)) [data-next],
.ob-step[data-step="1"]:not(:has(.ob-type-btn.selected)) [data-next] {
    opacity: 0.35;
    pointer-events: none;
}

.ob-step[data-step="2"]:not(:has(.ob-chip.selected)) [data-next] {
    opacity: 0.35;
    pointer-events: none;
}

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

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

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

/* --- Shake-Animation für Validation-Fails --- */
@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 ease;
}

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

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

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

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

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

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

.ob-success-sub a {
    color: var(--accent-light);
    border-bottom: 1px solid var(--accent-40);
}


/* ─── 28. Kontakt-Alternative-Cards ──────────────────────────── */

.kontakt-alt-section {
    background: var(--bg);
    border-top: 1px solid var(--border-light);
    padding-block: clamp(4rem, 6vw, 6rem) var(--section-pad);
}

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

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

.kontakt-alt-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--depth-rest);
    transition: border-color var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
}

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

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

.kontakt-alt-card h3 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    margin-bottom: 1rem;
}

.kontakt-alt-tel {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 400;
    color: var(--accent-light);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--accent-25);
    padding-bottom: 0.2rem;
    transition: color var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft);
}

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

.kontakt-alt-card p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-body);
}


/* ─── 29. Leistungen-Section + Bento-Grid ────────────────────── */

.leistungen-section {
    background: var(--bg);
    padding-block: var(--section-pad);
}

.leistungen-gewerbe {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

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

@media (min-width: 700px) {
    .bento-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-flow: dense;
        gap: 20px;
    }
}

.bento-tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    display: block;
    color: var(--text);
    box-shadow: var(--depth-rest);
    background: var(--bg);
    transition: transform var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
}

@media (min-width: 700px) {
    .bento-tile {
        aspect-ratio: auto;
        min-height: 280px;
    }

    .bento-tile-large {
        grid-column: span 2;
        grid-row: span 2;
        min-height: 580px;
    }

    .bento-tile-wide {
        grid-column: span 2;
        aspect-ratio: 2/1;
    }

    .bento-tile-tall {
        grid-row: span 2;
        aspect-ratio: 1/2;
        min-height: 580px;
    }
}

.bento-tile:is(:hover, .sticky-hover) {
    transform: translateY(-3px);
    box-shadow: var(--depth-hover), var(--depth-glow);
}

.bento-tile-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    transition: filter var(--dur-medium) var(--ease),
                transform 1.2s var(--ease);
}

.bento-tile:is(:hover, .sticky-hover) .bento-tile-img {
    transform: scale(1.09);
}

.bento-tile-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
                    var(--bg) 0%,
                    color-mix(in srgb, var(--bg) 55%, transparent) 50%,
                    color-mix(in srgb, var(--bg) 10%, transparent) 85%,
                    transparent 100%);
}

.bento-tile-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

.bento-tile-num {
    position: absolute;
    top: clamp(1.25rem, 2.2vw, 1.75rem);
    right: clamp(1.25rem, 2.2vw, 1.75rem);
    font-family: var(--font-serif);
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 300;
    line-height: 1;
    color: rgba(240, 232, 217, 0.06);
    pointer-events: none;
    transition: color var(--dur-medium) var(--ease);
}

.bento-tile:is(:hover, .sticky-hover) .bento-tile-num {
    color: var(--accent-25);
}

.bento-tile-content h3 {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 400;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.bento-tile-content p {
    font-size: 13px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--text) 72%, transparent);
    max-width: 420px;
}

.bento-tile-large .bento-tile-content h3 {
    font-size: clamp(1.75rem, 2.8vw, 2.3rem);
}

.bento-tile-large .bento-tile-content p {
    font-size: 14px;
}

/* CTA-Hinweis für Bento-Tiles die zu Subpages verlinken (statt Lightbox).
   Nur dort einsetzen, wo die Kachel navigiert — nicht auf Galerie-Kacheln. */
.bento-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--accent-light);
    transition: gap var(--dur-fast) var(--ease);
}

.bento-tile:is(:hover, .sticky-hover) .bento-tile-cta {
    gap: 0.9rem;
}


/* ─── 30. USP-Letter (Werkstatt-Story) ───────────────────────── */

.usp-letter-section {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding-block: var(--section-pad);
    position: relative;
    overflow: hidden;
}

/* Ghost-Watermark "Kratzer" im Hintergrund */
.usp-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    font-family: var(--font-serif);
    font-size: clamp(10rem, 28vw, 22rem);
    font-weight: 300;
    color: rgba(240, 232, 217, 0.025);
    letter-spacing: -0.03em;
    line-height: 0.9;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    white-space: nowrap;
    will-change: transform, opacity;
}

@supports (animation-timeline: view()) {
    @keyframes ghost-reveal {
        from { --ghost-progress: 0; }
        to   { --ghost-progress: 1; }
    }
    .usp-letter-section {
        animation: ghost-reveal linear both;
        animation-timeline: view(block);
        animation-range: entry 0% contain 50%;
    }
    .usp-ghost {
        opacity: calc(0.25 + 0.75 * var(--ghost-progress));
        transform: translate(-50%, -50%) scale(calc(0.88 + 0.12 * var(--ghost-progress)));
    }
}

.usp-letter {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin-inline: auto;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: color-mix(in srgb, var(--bg) 65%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--accent-18);
    border-radius: var(--radius-lg);
    box-shadow: var(--depth-rest),
                inset 0 1px 0 rgba(240, 232, 217, 0.05);
}

.usp-letter .label {
    text-align: left;
    margin-bottom: 1rem;
}

.usp-letter h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 300;
    margin-bottom: 2rem;
    line-height: 1.15;
    text-align: left;
}

.usp-letter-body {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text-body);
    margin-bottom: 1.5rem;
}

.usp-letter-highlight {
    position: relative;
    display: inline;
    background: linear-gradient(to top,
                    var(--accent-25) 0%,
                    var(--accent-25) 38%,
                    transparent 38%);
    padding: 0 0.1em;
    color: var(--text);
    font-weight: 500;
}

.usp-letter-climax {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.4rem, 2.8vw, 1.95rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text);
    margin: 2.5rem 0;
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid var(--accent-25);
    border-bottom: 1px solid var(--accent-25);
}

.usp-letter-founders {
    margin: 2.5rem 0 1.5rem;
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.usp-letter-founder {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.usp-letter-fname {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text);
}

.usp-letter-ftitle {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.usp-letter-ps {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.7;
}

.usp-letter-ps strong {
    font-style: normal;
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--accent);
    margin-right: 0.5rem;
}

.usp-letter-ps a {
    color: var(--accent-light);
    border-bottom: 1px solid var(--accent-40);
    transition: color var(--dur-fast) var(--ease-soft),
                border-color var(--dur-fast) var(--ease-soft);
}

.usp-letter-ps a:hover {
    color: var(--text);
    border-color: var(--accent);
}


/* ─── 31. Stats-Section ──────────────────────────────────────── */

.stats-section {
    background: var(--bg);
    padding-block: clamp(3rem, 5vw, 5rem);
    border-bottom: 1px solid var(--border-light);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

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

.stat {
    text-align: center;
}

.stat-number {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}


/* ─── 32. Editorial Reverse (Bild links, Text rechts) ────────── */

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


/* ─── 33. Werkstatt-Gallery ──────────────────────────────────── */

.werkstatt-gallery-section {
    background: var(--bg);
    padding-block: var(--section-pad);
}

.werkstatt-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 700px) {
    .werkstatt-gallery {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: dense;
    }
}

.werkstatt-gallery-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--depth-rest);
    background: var(--bg);
}

@media (min-width: 700px) {
    .werkstatt-gallery-large {
        grid-column: span 2;
        grid-row: span 2;
        aspect-ratio: 1;
    }
}

.werkstatt-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    transition: transform 1.2s var(--ease),
                filter var(--dur-medium) var(--ease);
}

.werkstatt-gallery-item:is(:hover, .sticky-hover) img {
    transform: scale(1.08);
}


/* ─── 34. Zertifizierungen ───────────────────────────────────── */

.zert-section {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-light);
    padding-block: var(--section-pad);
}

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

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

.zert-card {
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: color-mix(in srgb, var(--bg) 65%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color var(--dur-medium) var(--ease),
                transform var(--dur-medium) var(--ease);
}

.zert-card:hover {
    border-color: var(--accent-40);
    transform: translateY(-3px);
}

.zert-card-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    border: 1px solid var(--accent-40);
    border-radius: 50%;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--accent);
    background: linear-gradient(135deg, var(--accent-12), var(--accent-05));
}

.zert-card h3 {
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.zert-card p {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-body);
}


/* ─── 35. Referenzen-Filter + Grid ──────────────────────────── */

/* Toolbar: Back-Button + Filter-Chips in einer Zeile, scrollen normal mit */
.ref-toolbar,
.page-atmo-wrap > .ref-toolbar {
    background: transparent;
    /* !important + höhere Spezifität wegen der generischen
       `.page-atmo-wrap > section { border-bottom: none !important }` Regel. */
    border-bottom: 1px solid var(--border-light) !important;
    padding-block: 1rem;
}

.ref-toolbar-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

/* Back-Button absolute positioniert damit die Chips perfekt im Container
   zentriert sind (nicht nur im verbleibenden Flex-Bereich). */
.ref-toolbar-inner > .area-back {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.ref-filter-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-block: 0.25rem;
    justify-content: center;
}

/* Mobile: Back über die Chips statt daneben (Platz-Budget) */
@media (max-width: 767px) {
    .ref-toolbar-inner {
        flex-direction: column;
        gap: 1rem;
    }
    .ref-toolbar-inner > .area-back {
        position: static;
        transform: none;
        align-self: flex-start;
    }
    .ref-filter-chips {
        justify-content: flex-start;
        align-self: stretch;
    }
}

.ref-filter-chips::-webkit-scrollbar { display: none; }

@media (min-width: 700px) {
    .ref-filter-chips {
        justify-content: center;
        flex-wrap: wrap;
        overflow: visible;
    }
}

.ref-filter-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.1rem;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-body);
    background: linear-gradient(to bottom,
                    rgba(240, 232, 217, 0.04),
                    rgba(240, 232, 217, 0.01));
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease);
}

.ref-filter-chip:hover {
    border-color: var(--accent-40);
    color: var(--text);
}

.ref-filter-chip.active {
    background: linear-gradient(to bottom, var(--accent-25), var(--accent-12));
    border-color: var(--accent-60);
    color: var(--text);
}

.ref-grid-section {
    background: var(--bg);
    padding-block: clamp(3rem, 5vw, 5rem);
}

.ref-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Hidden state — display:none damit View Transitions API das Item als
   "nicht präsent" behandeln kann. Der Browser animiert den Übergang
   zwischen präsent/nicht-präsent automatisch via startViewTransition. */
.ref-item.hidden {
    display: none;
}

/* View Transitions — ref-grid als eigenständige Transition-Gruppe damit
   die Höhenänderung smooth gemorpht wird (sonst snappt die Grid-Höhe). */
.ref-grid {
    view-transition-name: ref-grid;
}

/* Default-Timing für alle Transition-Gruppen auf dieser Seite.
   Browser-default wäre 250ms ease — wir wollen etwas länger + weicher. */
::view-transition-group(*) {
    animation-duration: 350ms;
    animation-timing-function: ease-out;
}

/* Während intra-document Filter-Transitions die globale Page-Slide-Animation
   (die für Cross-Document-Navigation gedacht ist, siehe page-slide-out/in oben)
   für die root-Gruppe deaktivieren — sonst slidet die ganze Seite beim Filter. */
html.filter-transition::view-transition-old(root),
html.filter-transition::view-transition-new(root) {
    animation: none;
}

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

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

.ref-item {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    background: var(--bg);
    /* `all` — sonst killt die selektive Liste die opacity-Transition aus
       .reveal bei .ref-item.reveal-Kombinationen (9× auf referenzen.html) */
    transition: all var(--dur-medium) var(--ease);
    cursor: default;
}

.ref-item:is(:hover, .sticky-hover) {
    transform: translateY(-3px);
    box-shadow: var(--depth-hover), var(--depth-glow);
}

.ref-item-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    transition: filter var(--dur-medium) var(--ease),
                transform 1.2s var(--ease);
}

.ref-item:is(:hover, .sticky-hover) .ref-item-img {
    transform: scale(1.09);
}

.ref-item-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
                    var(--bg) 0%,
                    color-mix(in srgb, var(--bg) 35%, transparent) 55%,
                    transparent 85%);
}

.ref-item-meta {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    color: var(--text);
}

.ref-item-cat {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: 0.5rem;
}

.ref-item-meta h3 {
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    font-weight: 400;
    color: var(--text);
    margin-bottom: 0.3rem;
    line-height: 1.2;
}

.ref-item-meta p {
    font-size: 12px;
    color: color-mix(in srgb, var(--text) 65%, transparent);
    line-height: 1.5;
}


/* ─── 36. Text-Page (Impressum, Datenschutz) ────────────────── */

.text-page-hero {
    padding-top: calc(var(--nav-height) + 4rem);
    padding-bottom: 3rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border-light);
}

.text-page-hero h1 {
    font-size: clamp(2rem, 4vw, 3.2rem);
}

.text-page {
    background: var(--bg);
    padding-block: clamp(3rem, 5vw, 5rem);
}

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

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

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

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

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

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


/* ─── 37. Terrassen / Stellfuss Spezial-Subpages ────────────── */

.special-section {
    background: var(--bg);
    padding-block: var(--section-pad);
}

.special-hero {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-light);
    padding-block: clamp(4rem, 8vw, 7rem);
    padding-top: calc(var(--nav-height) + 4rem);
    position: relative;
    overflow: hidden;
}

.special-hero h1 em {
    color: var(--accent-light);
}

.spec-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    max-width: 720px;
    margin: 2rem auto 0;
    border-top: 1px solid;
    border-image: linear-gradient(to right, transparent, var(--border) 8%, var(--border) 92%, transparent) 1;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, transparent, var(--border-light) 8%, var(--border-light) 92%, transparent) 1;
    gap: 1rem;
}

.spec-label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    flex-shrink: 0;
}

.spec-value {
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--text);
    text-align: right;
}


/* ─── 38. Werkstatt-Teaser (Homepage) ────────────────────────── */

.upm-teaser {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-light);
    padding-block: var(--section-pad);
}


/* ─── 39. Reviews-Sektor (Spangler-Pattern, Kratzer-Farben) ───── */

.reviews-section {
    background: var(--bg-light);
    padding-block: var(--section-pad);
    color: var(--text-dark);
    position: relative;
    overflow: hidden;
}

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

.reviews-header h2 {
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

.reviews-section .label,
.reviews-section .label-accent {
    color: var(--accent-hover);
}

.reviews-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(26, 22, 19, 0.12);
    background: #fff;
    font-size: 13px;
    color: color-mix(in srgb, var(--text-dark) 65%, transparent);
    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);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(26, 22, 19, 0.03),
                0 4px 12px rgba(26, 22, 19, 0.08);
}

.reviews-badge-stars {
    display: flex;
    gap: 2px;
}

.reviews-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Padding als Buffer, damit Hover-Shadows der Karten oben/unten nicht abgeschnitten werden */
    padding: 2rem 0;
    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;
    gap: 20px;
    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;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid rgba(26, 22, 19, 0.10);
    border-radius: var(--radius-lg);
    color: var(--text-dark);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease);
}

.review-card:hover {
    transform: translateY(-4px);
    /* Ambient ring + kompakter directed shadow — bleibt im carousel-padding-Buffer,
       keine harten Kanten beim Clip */
    box-shadow: 0 0 0 1px rgba(26, 22, 19, 0.05),
                0 4px 10px rgba(26, 22, 19, 0.06),
                0 10px 22px rgba(26, 22, 19, 0.08);
}

.review-source {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    font-size: 11px;
    color: color-mix(in srgb, var(--text-dark) 60%, transparent);
    letter-spacing: 0.02em;
}

.review-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 1rem;
}

/* Stars beziehen die Gold-Farbe via currentColor aus dem <symbol>-Fill */
.review-stars,
.reviews-badge-stars {
    color: #f4b400;
}

.review-text {
    font-size: 14px;
    line-height: 1.7;
    color: color-mix(in srgb, var(--text-dark) 85%, transparent);
    flex: 1;
    margin-bottom: 1.25rem;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(26, 22, 19, 0.08);
}

.review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-hover);
    flex-shrink: 0;
}

.review-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
}

.review-date {
    display: block;
    font-size: 11px;
    color: color-mix(in srgb, var(--text-dark) 60%, transparent);
}

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


/* ─── 40. Reduced-Motion Override für Reviews ────────────────── */

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


/* ─── 41. Lightbox (portiert aus Spangler, Farbwelt angepasst) ───── */

.lb-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(14, 12, 10, 0.97);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-normal) var(--ease), visibility var(--dur-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

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

.lb-viewport {
    position: relative;
    width: 90vw;
    height: 85vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    touch-action: pan-y;
    cursor: default;
    transform: scale(0.94);
    transition: transform 0.5s var(--ease-slide);
}

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

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

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

.lb-slide {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    overflow: hidden;
}

.lb-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    opacity: 0;
    transform-origin: center center;
    transition: opacity 0.4s ease, transform 0.4s var(--ease-slide);
    -webkit-user-drag: none;
}

.lb-slide img.lb-loaded { opacity: 1; }

.lb-slide img.lb-zoomed {
    transform: scale(2);
    cursor: zoom-out;
}

.lb-close,
.lb-prev,
.lb-next {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--text) 45%, transparent);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    z-index: 10001;
    -webkit-tap-highlight-color: transparent;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
    color: var(--text);
}

.lb-close {
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
}

.lb-prev,
.lb-next {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
}

.lb-prev { left: 1.5rem; }
.lb-next { right: 1.5rem; }

.lb-counter {
    position: fixed;
    bottom: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-serif);
    font-size: 14px;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--text) 60%, transparent);
    z-index: 10001;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.lb-counter-num { line-height: 1; }

.lb-counter-sep {
    display: inline-block;
    width: 22px;
    height: 1px;
    background: color-mix(in srgb, var(--text) 35%, transparent);
}

.lb-thumbs {
    position: fixed;
    bottom: 1.25rem;
    left: 0;
    right: 0;
    display: none;
    gap: 6px;
    padding: 0 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 10001;
    justify-content: flex-start;
    scroll-behavior: smooth;
}

.lb-thumbs::-webkit-scrollbar { display: none; }

.lb-thumbs.active {
    display: flex;
    justify-content: center;
}

.lb-thumbs.active::before,
.lb-thumbs.active::after {
    content: '';
    flex: 0 0 auto;
}

.lb-thumb {
    flex: 0 0 54px;
    height: 54px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.38;
    background: transparent;
    padding: 0;
    transition: opacity var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.lb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.lb-thumb:hover { opacity: 0.75; }

.lb-thumb.active {
    opacity: 1;
    border-color: color-mix(in srgb, var(--text) 70%, transparent);
}

.lb-backdrop.has-thumbs .lb-counter {
    bottom: 5.25rem;
}

@media (max-width: 767px) {
    .lb-prev, .lb-next { display: none; }
    .lb-close { top: 0.75rem; right: 0.75rem; width: 40px; height: 40px; }
    .lb-viewport { width: 100vw; height: 78vh; }
    .lb-counter { bottom: 1.75rem; font-size: 12px; }
    .lb-backdrop.has-thumbs .lb-counter { bottom: 4.5rem; }
    .lb-thumbs { bottom: 0.75rem; }
    .lb-thumb { flex: 0 0 46px; height: 46px; }
}


/* ─── 42. Lightbox-Clickable Cursors ─────────────────────────── */

.werkstatt-gallery-item { cursor: pointer; }
.ref-item[data-lb-images] { cursor: pointer; }
button.bento-tile { cursor: pointer; }

/* Button als Bento-Tile: keine Default-Button-Styles */
button.bento-tile {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    width: 100%;
    display: block;
}


/* ─── 43. Einheitlicher Filter-Stack auf Kundenbilder ───────────
   Smartphone-Fotos haben unterschiedliche Lichtstimmung. Der einheitliche
   Filter macht alle Bilder visuell kohärent — warmer, leicht gedämpfter
   Ton passend zur Marken-Atmosphäre. Entfernt werden kann bei professionell
   fotografiertem Material (dann Kommentar-out oder Klasse setzen).
   ─────────────────────────────────────────────────────────────── */

.bento-tile-img,
.ref-item-img,
.werkstatt-gallery-item img,
.split-tile-bg,
.subpage-hero-bg,
.editorial-img img,
.kueche-types-grid .ktype-img,
.cfg-layer {
    filter: saturate(0.92) contrast(1.05) brightness(0.92);
}

/* Hover-State: Filter leicht zurück (lebendiger) */
.bento-tile:is(:hover, .sticky-hover) .bento-tile-img,
.ref-item:is(:hover, .sticky-hover) .ref-item-img,
.werkstatt-gallery-item:is(:hover, .sticky-hover) img,
.split-tile:is(:hover, .sticky-hover) .split-tile-bg,
.ktype:is(:hover, .sticky-hover) .ktype-img,
.editorial-img:hover img {
    filter: saturate(1) contrast(1.08) brightness(1);
}

/* Lightbox-Bilder: KEIN Filter — echte Detailansicht */
.lb-slide img {
    filter: none !important;
}


/* ─── 44. Accessibility — Focus-States ────────────────────────── */

/*
   Nur sichtbar bei Tastatur-Navigation (nicht bei Maus-Click).
   Akzent-Outline für klare visuelle Aufmerksamkeit.
*/

*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Buttons + Links: eigener stil statt outline */
.btn:focus-visible,
.nav-link:focus-visible,
.nav-cta:focus-visible,
.cfg-chip:focus-visible,
.ob-type-btn:focus-visible,
.ob-chip:focus-visible,
.ref-filter-chip:focus-visible,
.area-back:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 3px;
}

.nav-brand:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 6px;
    border-radius: 8px;
}

/* Skip-Link für Screenreader */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 1000;
    padding: 0.75rem 1.25rem;
    background: var(--accent);
    color: var(--bg);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-md);
    transition: top 0.2s var(--ease);
}

.skip-link:focus-visible {
    top: 1rem;
    outline: 2px solid var(--text);
    outline-offset: 2px;
}


/* ─── 45. Mobile hero-trust fix (override prev) ──────────────── */

@media (max-width: 768px) {
    .hero-trust-inner {
        width: 100%;
        text-align: center;
    }
    .hero-trust-item {
        font-size: 10px;
        gap: 0.5rem;
        justify-content: center;
    }
}


/* ============================================================
   46. Page-Atmo-Wrap (Spangler-Pattern)
   Shared Background über mehrere Sections hinweg — kein sichtbarer
   Section-Break. Fixed-BG mit Scroll-Parallax-Feeling auf Desktop,
   Absolute-BG als Fallback auf Mobile (Performance).
   ============================================================ */

.page-atmo-wrap {
    position: relative;
    background: var(--bg);
    overflow: hidden;
}

.page-atmo-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--bg);
    pointer-events: none;
}

/* Kein Gradient auf dem page-atmo-bg mehr — die Farbvariation kommt über
   .section-surface, damit die schwarz↔braun Alternation definiert ist und
   über mask-image weich an den Kanten ausfadet statt als durchgehender Verlauf */

/* Mobile-Fallback — fixed kann auf iOS Safari ruckeln */
@media (max-width: 768px) {
    .page-atmo-bg {
        position: absolute;
    }
}

/* Light-Beams im Spangler-Stil: lange diagonale Lichtstreifen statt runder Blobs.
   120vw Breite überragt die Seite an beiden Seiten — beim leichten Scroll-Drift
   kommt der Beam nie "ins Nichts". linear-gradient fadet die Enden weich aus,
   blur(70px) löst die Kanten auf, transform: rotate erzeugt die Diagonale. */
.page-atmo-wrap > .atmo-beam {
    position: absolute;
    width: 120vw;
    height: 280px;
    pointer-events: none;
    z-index: 0;
    filter: blur(70px);
    mix-blend-mode: screen;
    will-change: transform;
    background: none;
    border-radius: 0;
}

/* 7 Beam-Presets für unterschiedliche Wrap-Längen — pro Wrap wird die Anzahl
   der verwendeten Beams (pab-1 ... pab-N) der Länge angepasst. Wechselnde
   Rotations-Richtungen + Intensitäten für organischen Rhythmus. */
.page-atmo-wrap > .atmo-beam.pab-1 {
    top: 4%; left: -10%; transform: rotate(-12deg);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 165, 116, 0.30) 40%,
        rgba(212, 165, 116, 0.42) 50%,
        rgba(212, 165, 116, 0.30) 60%,
        transparent 100%);
}
.page-atmo-wrap > .atmo-beam.pab-2 {
    top: 22%; right: -10%; transform: rotate(10deg);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(184, 138, 85, 0.22) 40%,
        rgba(184, 138, 85, 0.34) 50%,
        rgba(184, 138, 85, 0.22) 60%,
        transparent 100%);
}
.page-atmo-wrap > .atmo-beam.pab-3 {
    top: 40%; left: -10%; transform: rotate(-8deg);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 165, 116, 0.24) 40%,
        rgba(212, 165, 116, 0.36) 50%,
        rgba(212, 165, 116, 0.24) 60%,
        transparent 100%);
}
.page-atmo-wrap > .atmo-beam.pab-4 {
    top: 58%; right: -10%; transform: rotate(14deg);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(184, 138, 85, 0.20) 40%,
        rgba(184, 138, 85, 0.30) 50%,
        rgba(184, 138, 85, 0.20) 60%,
        transparent 100%);
}
.page-atmo-wrap > .atmo-beam.pab-5 {
    top: 74%; left: -10%; transform: rotate(-10deg);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 165, 116, 0.22) 40%,
        rgba(212, 165, 116, 0.32) 50%,
        rgba(212, 165, 116, 0.22) 60%,
        transparent 100%);
}
.page-atmo-wrap > .atmo-beam.pab-6 {
    top: 88%; right: -10%; transform: rotate(8deg);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(184, 138, 85, 0.24) 40%,
        rgba(184, 138, 85, 0.34) 50%,
        rgba(184, 138, 85, 0.24) 60%,
        transparent 100%);
}
.page-atmo-wrap > .atmo-beam.pab-7 {
    bottom: 2%; left: -10%; transform: rotate(-6deg);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 165, 116, 0.22) 40%,
        rgba(212, 165, 116, 0.32) 50%,
        rgba(212, 165, 116, 0.22) 60%,
        transparent 100%);
}

/* Scroll-getriggerter Drift: benachbarte Beams bewegen sich entgegengesetzt
   für organischen Eindruck. Wichtig: Rotation im transform mit translateY
   kombinieren sonst geht die Rotation verloren. */
@supports (animation-timeline: view()) {
    @keyframes pab-drift-a { from { transform: rotate(-12deg) translateY(-60px); } to { transform: rotate(-12deg) translateY(60px); } }
    @keyframes pab-drift-b { from { transform: rotate(10deg)  translateY(60px);  } to { transform: rotate(10deg)  translateY(-60px); } }
    @keyframes pab-drift-c { from { transform: rotate(-8deg)  translateY(-40px); } to { transform: rotate(-8deg)  translateY(40px);  } }
    @keyframes pab-drift-d { from { transform: rotate(14deg)  translateY(40px);  } to { transform: rotate(14deg)  translateY(-40px); } }
    @keyframes pab-drift-e { from { transform: rotate(-10deg) translateY(-50px); } to { transform: rotate(-10deg) translateY(50px);  } }
    @keyframes pab-drift-f { from { transform: rotate(8deg)   translateY(50px);  } to { transform: rotate(8deg)   translateY(-50px); } }
    @keyframes pab-drift-g { from { transform: rotate(-6deg)  translateY(-35px); } to { transform: rotate(-6deg)  translateY(35px);  } }

    .page-atmo-wrap > .atmo-beam.pab-1 { animation: pab-drift-a linear both; animation-timeline: view(); }
    .page-atmo-wrap > .atmo-beam.pab-2 { animation: pab-drift-b linear both; animation-timeline: view(); }
    .page-atmo-wrap > .atmo-beam.pab-3 { animation: pab-drift-c linear both; animation-timeline: view(); }
    .page-atmo-wrap > .atmo-beam.pab-4 { animation: pab-drift-d linear both; animation-timeline: view(); }
    .page-atmo-wrap > .atmo-beam.pab-5 { animation: pab-drift-e linear both; animation-timeline: view(); }
    .page-atmo-wrap > .atmo-beam.pab-6 { animation: pab-drift-f linear both; animation-timeline: view(); }
    .page-atmo-wrap > .atmo-beam.pab-7 { animation: pab-drift-g linear both; animation-timeline: view(); }
}

/* Partikel-Canvas über die ganze Wrap-Länge */
.page-atmo-wrap > .atmo-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
    mix-blend-mode: screen;
}

/* Content-Sections im Wrap: transparenter BG, kein eigenes Border */
.page-atmo-wrap > section,
.page-atmo-wrap > .split-section,
.page-atmo-wrap > .usp-section,
.page-atmo-wrap > .upm-teaser,
.page-atmo-wrap > .editorial-section,
.page-atmo-wrap > .configurator-section,
.page-atmo-wrap > .paletteCad-section,
.page-atmo-wrap > .kueche-types-section,
.page-atmo-wrap > .leistungen-section,
.page-atmo-wrap > .usp-letter-section,
.page-atmo-wrap > .stats-section,
.page-atmo-wrap > .werkstatt-gallery-section,
.page-atmo-wrap > .zert-section,
.page-atmo-wrap > .ref-grid-section,
.page-atmo-wrap > .kontakt-teaser,
.page-atmo-wrap > .kontakt-alt-section,
.page-atmo-wrap > .onboarding-section,
.page-atmo-wrap > .special-section,
.page-atmo-wrap > .area-back-section {
    background: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    position: relative;
    z-index: 1;
}

/* Divider im wrap: nur z-index erhöhen, NICHT background überschreiben
   (sonst killt der Override den linear-gradient des Dividers).
   Großes margin-block (analog arztseite-2 my-24 md:my-32 = 96/128px). */
.page-atmo-wrap > .divider {
    position: relative;
    z-index: 2;
    margin-block: clamp(6rem, 12vw, 8rem);
}

/* ════════════════════════════════════════════════════════════════
   .image-divider — Story-Beat zwischen Sections
   ================================================================
   Adaptiert von Dad Arztseite (Quelle: Dad Arztseite/css/style.css).
   50vh Cover-Bild + dunkler Overlay + zentriertes Italic-Pullquote.
   Anpassungen für Kratzer:
   - Overlay aus Kratzer-bg (statt rgba(30,27,24,0.55))
   - Quote-Font: Fraunces Italic (statt Gilda Display)
   - Quote-Color: var(--text) cream */
.image-divider {
    position: relative;
    height: 50vh;
    min-height: 350px;
    overflow: hidden;
    isolation: isolate;
}

.image-divider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-divider::after {
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    z-index: 1;
}

.image-divider blockquote {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    max-width: 700px;
    text-align: center;
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 300;
    font-style: italic;
    color: var(--text);
    line-height: 1.5;
    padding: 0 2rem;
    letter-spacing: -0.005em;
}

@media (max-width: 768px) {
    .image-divider {
        height: 40vh;
        min-height: 250px;
    }
}

/* Im page-atmo-wrap: über Beams/Partikel legen */
.page-atmo-wrap > .image-divider {
    position: relative;
    z-index: 2;
}

/* Keine border-bottom mehr — Sections im Wrap fadet via section-surface
   weich aus statt durch harte Kanten getrennt zu werden */

/* Innerhalb des Wraps: atmo-wrap-Klasse der einzelnen Sections neutralisieren
   (damit die alten atmo-beams/particles nicht doppelt rendern) */
.page-atmo-wrap .atmo-wrap > .atmo-beam,
.page-atmo-wrap .atmo-wrap > .atmo-particles {
    display: none;
}

/* ════════════════════════════════════════════════════════════════
   .section-surface — "braune" Sections mit weich ausfadenden Kanten
   ================================================================
   Statt harter BG-Kante fadet die Farbe über 120px an Ober- und
   Unterrand der Section in den dunklen Wrap-BG aus. mask-image nutzt
   den linear-gradient als Alpha-Mask — die Ecken werden transparent,
   die Mitte bleibt vollflächig bg-surface. Kombiniert mit dem
   flat-schwarzen page-atmo-bg ergibt das die schwarz↔braun Alternation
   als weicher Verlauf zwischen Sections. */

.section-surface {
    position: relative;
}

.section-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    /* bg-surface-2 statt bg-surface — deutlicherer braun↔schwarz Kontrast.
       bg-surface wäre zu subtil (nur 9 Helligkeitsunits Differenz zu bg) */
    background: var(--bg-surface-2);
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 120px,
        black calc(100% - 120px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 120px,
        black calc(100% - 120px),
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
}

/* Kontakt-Sektor: Surface semi-transparent via Alpha (0.9) damit die Partikel
   aus dem page-atmo-wrap canvas durch die Fläche schimmern. Mask-Image wird
   von der generischen .section-surface::before geerbt (120px top/bottom fade). */
.onboarding-section.section-surface::before {
    background: rgba(38, 34, 30, 0.9);
}

/* Alle direct-children der section MÜSSEN über dem ::before liegen */
.section-surface > * {
    position: relative;
    z-index: 1;
}

/* Transparent-Force aus .page-atmo-wrap überschreibt NICHT
   das ::before (greift nur auf die section selbst), deshalb
   funktioniert die Klasse direkt in der wrap-Liste mit */


/* ════════════════════════════════════════════════════════════════
   .section-image — Bild-Underlay mit Fade-Kanten
   ================================================================
   Gleicher Mask-Mechanismus wie section-surface, aber statt
   Farbfläche ein über --section-image CSS-Variable gesetztes
   Background-Image. Für die USP-Section auf index zeigt das einen
   Bauplan als atmosphärischen Unterbau — statt "nur braun" wird
   die Themensektion visuell mit Inhalt aufgeladen.

   Bild wird invertiert + entsättigt damit weißes Papier zu schwarz
   und die Tuschlinien zu hellen Akzenten werden — funktioniert so
   auf dunklem Wrap-BG. Niedrige Opacity (~0.22) damit der Text
   lesbar bleibt. */

.section-image {
    position: relative;
}

.section-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--section-image);
    background-size: cover;
    background-position: center;
    filter: invert(1) grayscale(1) brightness(0.75) contrast(1.3);
    opacity: 0.22;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 120px,
        black calc(100% - 120px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 120px,
        black calc(100% - 120px),
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
}

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


/* ════════════════════════════════════════════════════════════════
   Glass-Touch über alle Tile-Klassen
   ================================================================
   Diagonaler Light-Highlight als ::before — sieht aus wie sanftes
   Licht auf einer Glasscheibe. z-index 1 platziert das Layer ZWISCHEN
   Bild (z-index 0) und Text-Content (z-index 2) — Text bleibt scharf.
   pointer-events: none damit Klicks durch zum Tile-Link gehen. */
.split-tile::before,
.bento-tile::before,
.ref-item::before,
.werkstatt-gallery-item::before,
.ktype::before,
.editorial-img::before,
.ob-form-wrapper::before,
.kontakt-alt-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

/* Form-Wrapper + Alt-Cards: Kinder sind static/flow — ohne position:relative
   würden sie UNTER dem Glass-Highlight::before liegen (z-index 1) und optisch
   überlagert werden. Heben auf z-index 2 damit Content klar über dem Glass bleibt. */
.ob-form-wrapper > *,
.kontakt-alt-card > * {
    position: relative;
    z-index: 2;
}


/* ─── 45. Job-List (karriere.html) ──────────────────────────── */

.job-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.job-list li {
    position: relative;
    padding: 0.8rem 0 0.8rem 1.6rem;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--cream);
    border-top: 1px solid rgba(240, 232, 217, 0.08);
}

.job-list li:first-child {
    border-top: none;
}

.job-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.25rem;
    width: 0.6rem;
    height: 2px;
    background: var(--accent);
}


/* ─── 46. Hire-Hook (subtiler Jobs-CTA auf werkstatt/referenzen) ──── */

.hire-hook {
    padding: 3.5rem 0 1rem;
    text-align: center;
}

.hire-hook p {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(240, 232, 217, 0.7);
    margin: 0;
    line-height: 1.5;
}

.hire-hook a {
    font-style: normal;
    white-space: nowrap;
}