/* ==========================================================================
   ZIMMERHACKL — Gestaltung & Handwerk
   Skandinavisch Premium · Hellraum · Bodoni Moda + Inter
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1. FONTS — SaveurSansLight (Brand-Display) + Inter (Body)
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: 'SaveurSansLight';
    src: url('fonts/SaveurSansLight-fs.woff2') format('woff2'),
         url('fonts/SaveurSansLight-fs.woff') format('woff');
    font-weight: 100 400;
    font-style: normal;
    font-display: swap;
}

/* Source Sans 3 — Nav-Reiter (Marc wollte Myriad-Look „nicht so fett wie das
   Logo"; Source Sans 3 ist die freie Adobe-Open-Source-Schwester von Myriad Pro,
   optisch praktisch identisch, SIL OFL = lizenzfrei, selbst gehostet. Variable
   Font → eine Datei je Subset deckt 400–600 ab. Ersetzt MyriadProRegular. */
@font-face {
    font-family: 'Source Sans 3';
    src: url('fonts/source-sans/ss3-400-latin.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('fonts/source-sans/ss3-400-latin-ext.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter — selbst gehostet (kein render-blocking @import, GDPR-konform) */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/inter/inter-latinext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/inter/inter-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/inter/inter-latinext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/inter/inter-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lato — Body-Schrift nach Marcs PDF-Vorlagen (Juli 2026), selbst gehostet.
   Statische Schnitte: 100 (Hairline, Reviews-Zitat), 300 (Body Light),
   400 (Labels/Regular), 700 (Bold — fängt auch font-weight:600 ab, Lato hat kein 600). */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/lato/lato-100-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/lato/lato-100-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/lato/lato-100i-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/lato/lato-100i-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/lato/lato-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/lato/lato-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/lato/lato-300i-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/lato/lato-300i-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/lato/lato-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/lato/lato-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/lato/lato-400i-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/lato/lato-400i-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/lato/lato-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/lato/lato-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ─────────────────────────────────────────────────────────────────────────
   2. CUSTOM PROPERTIES — animatable
   ───────────────────────────────────────────────────────────────────────── */

@property --ghost-progress {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
}
@property --hero-light {
    syntax: '<percentage>';
    initial-value: 8%;
    inherits: true;
}
@property --vignette {
    syntax: '<percentage>';
    initial-value: 4%;
    inherits: true;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────── */

:root {
    /* ─ Hellraum-Skala — sehr hell, fast reines Weiß ─ */
    --bg:           #f7f6f5;    /* Pompa Off-White (Marc bestätigt) */
    --bg-tint:      #f1efea;    /* Section-Alternation, einen Hauch tiefer */
    --bg-paper:     #ebe8e2;    /* Surface-Cards */
    --bg-deeper:    #e4e0d8;    /* Form-Wrapper, eingelassen */

    /* ─ Text — warm-Anthrazit, NIE reines Schwarz ─ */
    --text:         oklch(24% 0.012 60);      /* matched Logo-Farbe #1E1E1C */
    --text-body:    oklch(40% 0.015 55);
    --text-muted:   oklch(58% 0.018 60);
    --text-soft:    oklch(50% 0.018 58);

    /* ─ Material-Akzent 1: Schwarzstahl (gezundert) ─ */
    --stahl:        oklch(34% 0.010 50);
    --stahl-deep:   oklch(24% 0.012 60);
    --stahl-light:  oklch(48% 0.012 50);

    /* ─ Brand-Accent: gedämpftes Walnuss-Braun (warm, edel, NICHT orange) ─ */
    --accent:       oklch(42% 0.040 55);
    --accent-light: oklch(56% 0.045 58);
    --accent-deep:  oklch(32% 0.035 50);
    --accent-soft:  oklch(72% 0.030 65);

    /* ─ Accent in 8 Transparenz-Stufen (color-mix in oklch) ─ */
    --accent-04: color-mix(in oklch, var(--accent) 4%, transparent);
    --accent-08: color-mix(in oklch, var(--accent) 8%, transparent);
    --accent-12: color-mix(in oklch, var(--accent) 12%, transparent);
    --accent-18: color-mix(in oklch, var(--accent) 18%, transparent);
    --accent-25: color-mix(in oklch, var(--accent) 25%, transparent);
    --accent-40: color-mix(in oklch, var(--accent) 40%, transparent);

    /* Form-Silber — interaktive/ausgewählte Zustände im Kontaktformular (statt Braun).
       „Neutrales Metall", Hue 246: Linien/Ränder sichtbar, Text als dunkles Cool-Grau lesbar.
       em + Labels site-weit bleiben braun — Silber ist NUR die Form-Insel. */
    --ob-silver-line:   oklch(66% 0.006 246);   /* Fokuslinie / Progress — ENTBLAUT, neutral, noch sichtbar (Kontrast-Boden) */
    --ob-silver-border: oklch(80% 0.005 246);   /* Ränder — helles Platin-Silber, neutral */
    --ob-silver-text:   oklch(44% 0.005 246);   /* aktiver/ausgewählter Text — neutral-dunkelgrau, lesbar */
    --ob-silver-fill-a: oklch(96% 0.004 246);   /* (Reserve) */
    --ob-silver-fill-b: oklch(94% 0.005 246);   /* (Reserve) */
    --ob-silver-glow:   color-mix(in oklch, oklch(84% 0.005 246) 14%, transparent);  /* Auswahl-Glow — heller, neutral, zarter */
    --accent-60: color-mix(in oklch, var(--accent) 60%, transparent);
    --accent-80: color-mix(in oklch, var(--accent) 80%, transparent);

    /* ─ Holz-Atmo (Material-Welt) ─ */
    --holz-weisstanne: oklch(88% 0.025 80);   /* sehr hell, BG-Hauch */
    --holz-eiche:      oklch(72% 0.045 75);
    --holz-walnuss:    oklch(48% 0.060 50);   /* Material-Akzent */
    --holz-shimmer:    oklch(82% 0.045 75);

    /* ─ Borders ─ */
    --border:         oklch(88% 0.008 70);
    --border-soft:    oklch(92% 0.006 70);
    --border-strong:  oklch(76% 0.010 65);

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

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

    /* ─ Fonts — Brand-Display + Body-Sans ─ */
    --font-display: 'SaveurSansLight', 'Avenir Next', 'Avenir', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans:    'Lato', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;   /* Lato = Marcs Body-Schrift (PDF Juli 2026), Inter bleibt Fallback */
    --font-serif:   Georgia, 'Times New Roman', serif;  /* nicht mehr aktiv genutzt — Reviews laufen jetzt auf Inter Hairline */

    /* ─ Display-Größenleiter — 1:1 nach Marcs Satzsystem (08/2026 ausgemessen) ─
       Er kennt GENAU ZWEI Saveur-Größen, im Verhältnis zum Fließtext (12 pt):
         42 pt = 3,50× → jede Section-Headline, ohne Ausnahme
         16 pt = 1,33× → CTAs, Kachel-/Karten-Titel, Personennamen, FAQ-Fragen
       Unser Fließtext-Anker ist 1.25rem (20 px) am Desktop-Ende, daraus 70 px
       und 26,6 px. Die Untergrenzen bleiben moderat, weil sein A4-Entwurf keine
       Mobil-Stufe kennt — ein 3,5×-Titel würde auf 375 px sonst umbrechen. */
    --type-display-l: clamp(2.3rem, 5.2vw, 4.375rem);
    --type-display-s: clamp(1.25rem, 1.85vw, 1.66rem);

    /* ─ Display-Font ist eine Light/Hairline Geometric — nur 1 Schnitt verfügbar.
       Keine Variable-Font-Settings nötig, alle Headlines nutzen normales Weight. */

    /* ─ Easing ─ */
    --ease:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft:   cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);
    /* Seitenwechsel: der Abgang beschleunigt, der Auftritt bremst ab.
       Dieselbe Kurve für beides lässt den Abgang wegreißen und dann kriechen. */
    --ease-vt-out: cubic-bezier(0.55, 0.06, 0.68, 0.19);
    --ease-vt-in:  cubic-bezier(0.72, 0, 0.16, 1);

    /* ─ Durations ─ */
    --dur-fast:        180ms;
    --dur-normal:      320ms;
    --dur-medium:      560ms;
    --dur-header:      720ms;   /* Header-Übergänge: ruhig gleiten (Marc: Ruhe) */
    --dur-reveal:      900ms;
    --dur-reveal-fog:  1400ms;

    /* ─ Layout ─ */
    --container-max:    1400px;
    --container-narrow: 880px;
    --container-pad:    clamp(1.25rem, 4vw, 2.5rem);
    --nav-h:            72px;
    --section-pad:      clamp(3rem, 6vw, 6rem);

    /* ─ Radius ─ */
    --radius-sm:    4px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --radius-pill:  100px;
}

/* Display-P3 Override für Wide-Gamut */
@supports (color: color(display-p3 1 0 0)) {
    @media (color-gamut: p3) {
        :root {
            --accent:       color(display-p3 0.42 0.34 0.26);
            --accent-light: color(display-p3 0.56 0.47 0.36);
            --accent-deep:  color(display-p3 0.32 0.26 0.20);
            --accent-soft:  color(display-p3 0.74 0.66 0.55);
            --holz-walnuss: color(display-p3 0.42 0.30 0.18);
            --holz-eiche:   color(display-p3 0.78 0.62 0.42);
            --holz-shimmer: color(display-p3 0.85 0.72 0.52);
        }
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   4. RESET + BASE
   ───────────────────────────────────────────────────────────────────────── */

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

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

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    font-weight: 300;
    color: var(--text);
    /* Durchgehender, SEHR feiner Verlauf: oben einen Hauch heller → unten einen Hauch
       wärmer. Sections sind transparent → scheint durch, keine Kanten. VIEWPORT-relativ
       (background-attachment: fixed), weil das Dokument ~13000px hoch ist — ein
       document-spanning Verlauf wäre pro Screen unsichtbar. So zeigt jeder Screen den
       feinen Vertikal-Verlauf, gleichmäßig + nur unterbewusst spürbar. */
    background: linear-gradient(to bottom,
                oklch(97.8% 0.003 90),
                oklch(96.0% 0.008 64));
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-wrap: pretty;
    overflow-x: clip;
}

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

/* <picture> als AVIF-Wrapper layout-transparent — das innere <img> verhält sich
   exakt wie ein direktes Kind (Galerie-/Surface-Regeln nutzen width/height:100%
   gegen den Eltern-Container, der wäre sonst das inline-<picture>). */
picture { display: contents; }

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

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

/* ─────────────────────────────────────────────────────────────────────────
   5. TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: 0.005em;
    margin: 0;
    color: var(--text);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.6rem, 6vw, 5.5rem);
    letter-spacing: -0.005em;
    line-height: 1.04;
}

h2 {
    font-size: var(--type-display-l);   /* Marcs 42-pt-Stufe */
    line-height: 1.06;
    letter-spacing: 0;
}

h3 {
    font-size: var(--type-display-s);
    line-height: 1.15;
}

h4 {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    line-height: 1.2;
    letter-spacing: 0.01em;
}

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

/* em in Headlines: SaveurSansLight (all-caps) in Akzent-Farbe */
em {
    font-family: var(--font-display);
    font-style: normal;            /* SaveurSansLight hat keinen Italic-Cut, ist all-caps */
    font-weight: 300;
    color: var(--text);          /* gedämpftes Walnuss-Braun als Akzent */
}

/* em in Body-Text: Inter mit Akzent-Farbe + Medium-Weight (kein Italic) */
p em, li em, blockquote em, dd em {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 300;
    color: var(--text);
}

/* Marc 08/2026: „Gaggenau ist bei ihm nicht mal fett." In seinen Vorlagen gibt es
   im Fließtext KEINE Hervorhebung — weder Stärke noch dunklerer Ton. <strong>
   erbt deshalb vollständig; die Auszeichnung bleibt semantisch, nicht visuell. */
strong {
    font-weight: inherit;
    color: inherit;
}

/* Orts-Links im Fließtext (Für-Sie-vor-Ort, einzelstuecke) — Marcs fette Orte
   verlinken auf die Orts-Landingpages. Muster wie die Caption-Underlines:
   at rest unterstrichen (= Klick-Signal, auch mobil), Hover löst den Strich. */
.ort-link {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: var(--border-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.5s ease;
}
.ort-link:hover {
    text-decoration-color: transparent;
}
/* Ausnahme zum Light-strong: Marcs SEO-Absatz (er hat ihn als Bild-Vorlage
   geschickt) zeigt die drei verlinkten Orte betont. Regular statt Medium —
   sein Satzsystem kennt nur Light und Regular. */
.ort-link strong {
    font-weight: 400;
}

/* Eyebrow-Label */
/* Eyebrow-Zeilen — Typo 1:1 nach Marcs Entwurf (Typo_Beispiel 08/2026):
   Lato Light in MISCHSCHREIBUNG, ungesperrt, auf Fließtext-Größe. Sein Dokument
   setzt Eyebrow, Fließtext und Einladungssatz alle auf 12 pt Lato-Light — nur
   Headlines und CTAs stehen in SaveurSans. Die alten gesperrten Kapitälchen
   („SHOWROOM MIT MATERIALMUSTERN") waren genau das, was er mit „die Schriftarten
   sind noch die alten" gemeint hat. Der ::before-Strich bleibt der Rollen-Marker. */
.label {
    font-family: var(--font-sans);
    font-size: clamp(0.98rem, 1.25vw, 1.12rem);
    font-weight: 300;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-soft);
    margin: 0;
    display: inline-block;
}

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

.label::before {
    content: '';
    display: inline-block;
    width: 1.7em;          /* mitwachsend zur neuen Label-Größe (war fix 32px) */
    height: 1px;
    background: currentColor;
    vertical-align: middle;
    margin-right: 0.8rem;
    opacity: 0.6;
}

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

/* ─────────────────────────────────────────────────────────────────────────
   6. CONTAINER
   ───────────────────────────────────────────────────────────────────────── */

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

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

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

.section-header {
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

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

.section-header h2 {
    max-width: 22ch;
}

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

/* ─────────────────────────────────────────────────────────────────────────
   7. NAVIGATION
   ───────────────────────────────────────────────────────────────────────── */

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

.nav.scrolled,
body[data-page="subpage"] .nav {
    background: var(--bg);
    backdrop-filter: blur(20px) saturate(1.4);
    padding: 0.65rem 0;
    box-shadow: 0 1px 0 var(--border-soft),
                0 8px 24px color-mix(in oklch, var(--holz-walnuss) 6%, transparent);
}

.nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* Logo links · Nav mittig · (Toggle rechts) */
    align-items: center;
    gap: 2rem;
}

.nav-brand {
    display: flex;
    flex-direction: column;
    align-items: center;          /* Tanne mittig über der Wortmarke */
    gap: 0.4rem;
    flex-shrink: 0;
    grid-column: 1;
    justify-self: start;
    align-self: start;            /* Tanne bleibt oben fixiert, wenn die Wortmarke wegklappt */
    transition: opacity var(--dur-normal) var(--ease);
}

.nav-brand:hover {
    opacity: 0.75;
}

.nav-brand-icon {
    height: 30px;
    width: auto;
    display: block;
    position: relative;
    z-index: 2;                   /* Tanne bleibt oben — Wortmarke fährt dahinter raus */
}

/* Wortmarke + Tagline — fährt beim Runter-Scrollen nach oben aus dem Viewport,
   simultan zum Erscheinen der verkleinerten, undurchsichtigen Navbar.
   Span kollabiert die Höhe (Header schrumpft), das Bild gleitet nach oben raus + fadet. */
.nav-brand-word {
    display: block;
    overflow: visible;            /* KEIN Clip → keine sichtbare Schnittkante beim Faden */
    max-height: 52px;
    position: relative;
    z-index: 1;                   /* hinter der Tanne */
    transition: max-height var(--dur-header) var(--ease-soft);
}

.nav-brand-word img {
    height: 30px;
    width: auto;
    display: block;
    transition: transform var(--dur-header) var(--ease-soft),
                opacity var(--dur-header) var(--ease-soft);
}

.nav.nav-collapsed .nav-brand-word { max-height: 0; }
.nav.nav-collapsed .nav-brand-word img {
    transform: translateY(-60%);    /* kurzer Lift nahe der eigenen Position (nicht von ganz oben) + fadet */
    opacity: 0;
}

@media (min-width: 1024px) {
    .nav-brand-icon { height: 34px; }
    .nav-brand-word img { height: 34px; }
}

.nav-links {
    display: none;
    align-items: center;
    gap: clamp(1.5rem, 2.4vw, 2.4rem);
    list-style: none;
    margin: 0;
    padding: 0;
    grid-column: 2;
    justify-self: center;
    align-self: center;
}

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

.nav-links a {
    position: relative;
    font-family: 'Source Sans 3', var(--font-sans);   /* Marc 07/2026: Reiter-Look „nicht so fett wie das Logo" — freie Myriad-Alternative (SIL OFL) */
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-body);
    padding: 0.4rem 0;
    transition: color var(--dur-normal) var(--ease);
}

/* Nav-Hover/Aktiv-Logik (Farbe, kein Unterstrich) lebt im „Navbar-Hover"-Block
   der Pompa-Modus-Sektion am Dateiende (Sibling-Dim + Akzent-Aktiv). */

.nav-cta {
    display: none;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 40%, transparent));
    backdrop-filter: blur(10px);
    transition: border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                background var(--dur-normal) var(--ease);
}

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

@media (min-width: 960px) {
    .nav-cta {
        display: inline-flex;
        align-items: center;
    }
}

/* Mobile-Menu Toggle */
/* Instagram-Glyph rechts außen (Marcs insta.pdf-Mockup 08/2026): dünner
   Umriss, Farb-Tiers wie die Nav-Links (dunkler Anker → Hover hellt auf). */
.nav-insta {
    grid-column: 3;
    justify-self: end;
    /* Unter 960px übernimmt der Burger die Spalte — der Insta-Link
       wandert dort ins Mobile-Menü (Textlink bei den Kontaktdaten). */
    display: none;
    align-items: center;
    padding: 0.4rem;
    margin-right: -0.4rem;
    color: oklch(16% 0.015 58);
    transition: color 0.4s ease;
}
@media (min-width: 960px) {
    .nav-insta { display: inline-flex; }
}
.nav-insta:hover {
    color: var(--text-body);
}
.nav-insta svg {
    display: block;
    width: 19px;
    height: 19px;
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
    margin-right: -0.5rem;
    align-items: center;
    justify-content: center;
    grid-column: 3;
    justify-self: end;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--text);
    transition: transform var(--dur-normal) var(--ease),
                opacity var(--dur-normal) var(--ease);
}

/* X-Geometrie: Strich-Pitch = 1px Linie + 5px gap = 6px → äußere Linien müssen
   um VOLLE 6px zur Mitte, sonst kreuzen die Arme außermittig und das X wirkt
   einseitig abgeschnitten (Bug: ±3px stammte noch von gap 2px). */
body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}
body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

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

/* Mobile-Menu Panel */
.nav-mobile {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--bg);
    padding: calc(var(--nav-h) + 2rem) var(--container-pad) 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-medium) var(--ease);
}

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

body.nav-open {
    overflow: hidden;
}

.nav-mobile a {
    display: block;
    padding: 1rem 0;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: 400;
    color: var(--text);
    border-bottom: 1px solid var(--border-soft);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--ease),
                transform 0.5s var(--ease);
}

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

body.nav-open .nav-mobile a:nth-child(1) { transition-delay: 0.05s; }
body.nav-open .nav-mobile a:nth-child(2) { transition-delay: 0.10s; }
body.nav-open .nav-mobile a:nth-child(3) { transition-delay: 0.15s; }
body.nav-open .nav-mobile a:nth-child(4) { transition-delay: 0.20s; }
body.nav-open .nav-mobile a:nth-child(5) { transition-delay: 0.25s; }

.nav-mobile-contact {
    margin-top: auto;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.nav-mobile-contact a {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    padding: 0.4rem 0;
    border: none;
    color: var(--text-body);
}

/* ─────────────────────────────────────────────────────────────────────────
   8. BUTTONS
   ───────────────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.95rem 1.7rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--dur-normal) var(--ease),
                background var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
    isolation: isolate;
    position: relative;
}

.btn-primary {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 18%, var(--bg)),
        color-mix(in oklch, var(--accent) 10%, var(--bg)));
    color: var(--accent-deep);
    border: 1px solid var(--accent-40);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 30%, transparent),
                0 4px 14px color-mix(in oklch, var(--holz-walnuss) 10%, transparent),
                0 1px 3px color-mix(in oklch, var(--holz-walnuss) 8%, transparent);
}

.btn-primary:hover {
    background: linear-gradient(to bottom, var(--accent-light), var(--accent));
    color: var(--bg);
    border-color: var(--accent);
    box-shadow: inset 0 1px 0 color-mix(in oklch, white 22%, transparent),
                0 8px 22px color-mix(in oklch, var(--accent) 22%, transparent),
                var(--depth-glow);
}

.btn-ghost {
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 40%, transparent));
    color: var(--text);
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(12px);
    box-shadow: 0 3px 10px color-mix(in oklch, var(--holz-walnuss) 8%, transparent);
}

.btn-ghost:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 12%, white),
        color-mix(in oklch, var(--accent) 6%, white));
    color: var(--accent-deep);
    border-color: var(--accent-40);
    box-shadow: 0 8px 22px color-mix(in oklch, var(--holz-walnuss) 14%, transparent),
                var(--depth-glow);
}

.btn-arrow::after {
    content: '→';
    font-family: var(--font-sans);
    font-weight: 300;
    transition: transform var(--dur-normal) var(--ease);
}

.btn-arrow:hover::after {
    transform: translateX(4px);
}

/* ─────────────────────────────────────────────────────────────────────────
   9. REVEAL SYSTEM
   ───────────────────────────────────────────────────────────────────────── */

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

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

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

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

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

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

/* ─────────────────────────────────────────────────────────────────────────
   10. PLACEHOLDER-DATA (Demo-Marker, Kratzer-Pattern)
   ───────────────────────────────────────────────────────────────────────── */

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

.placeholder-data:hover {
    background: color-mix(in oklch, var(--accent) 18%, transparent);
}

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

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

/* ─────────────────────────────────────────────────────────────────────────
   11. HERO
   ───────────────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    padding-block: calc(var(--nav-h) + 4rem) clamp(7rem, 14vh, 10rem);
}

.hero-bg {
    position: absolute;
    inset: 0;
    /* Marc 07/2026: Bild-Box beginnt UNTER der Nav (wie zimmerhackl.eu) — der bunte
       Kusama-Poster-Kopf liegt frei sichtbar unterm hellen Balken, nichts wird vom
       Header abgeschnitten. JS misst die volle Nav-Höhe → --hero-bg-top. */
    top: var(--hero-bg-top, 114px);
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: hero-crossfade 24s linear infinite;
    filter: saturate(1.02) brightness(1.0);
}

/* Slide-1 hat eigene Animation die DIREKT sichtbar startet (kein Flash bei Load) */
.hero-slide-1 {
    opacity: 1;
    animation: none;   /* Einzelbild statt Crossfade (Marc) — nur das 1. Bild, statisch */
    /* Poster-Kopf oben verankern: bei sehr breiten Viewports (Box > 2:1) beschneidet
       cover unten (Küchenfüße), nie die Kusama-Farbe. */
    background-position: center top;
    background-repeat: no-repeat;
}

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

/* Slide-1 spezifisch: startet sichtbar, fadet aus, kommt sichtbar zurück */
@keyframes hero-crossfade-first {
    0%   { opacity: 1; transform: scale(1.02); }
    33%  { opacity: 1; transform: scale(1.06); }
    37%  { opacity: 0; transform: scale(1.10); }
    66%  { opacity: 0; transform: scale(1.10); }
    96%  { opacity: 0; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1.02); }
}

@supports (animation-timeline: scroll()) {
    @keyframes hero-parallax {
        from { transform: translateY(0); }
        to   { transform: translateY(18vh); }
    }
    .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;
    pointer-events: none;
    /* Blanker Bild-Hero (Marc): kein Text mehr → kein Lesbarkeits-Schleier.
       Sauberes Bild wie im PDF. */
    background: none;
}

/* DARK-Layer als ::before — separater Layer mit opacity gesteuert per JS
   (var(--hero-dark-amount), tracked 1:1 zu Slide-3 Opacity). Opacity IST
   interpolierbar — anders als background-image (Gradients sind discrete).
   Damit fadet der Dim exakt mit dem dunklen Bild rein/raus, kein Snap. */
.hero-overlay::before { content: none; }   /* Dark-Layer raus — Einzelbild-Hero ohne Text/JS-Dim */

/* Hero-Text + Trust-Pill Farben werden via color-mix mit --hero-dark-pct
   direkt in den Element-Definitionen interpoliert (siehe weiter unten).
   Kein data-active-slide-Snap mehr, keine separate transition: color.
   Resultat: Text-Farbe ist EXAKT synchron zu Slide-3 Opacity. */

/* Buttons im Dark-Slide */
.hero[data-active-slide="3"] .btn-ghost {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--bg) 20%, transparent),
        color-mix(in oklch, var(--bg) 12%, transparent));
    color: var(--bg);
    border-color: color-mix(in oklch, var(--bg) 30%, transparent);
}
.hero[data-active-slide="3"] .btn-ghost:hover {
    background: linear-gradient(to bottom,
        color-mix(in oklch, var(--accent) 35%, transparent),
        color-mix(in oklch, var(--accent) 22%, transparent));
    color: var(--bg);
    border-color: var(--accent);
}

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

.hero-content {
    max-width: 36rem;
}

/* Text-Farben werden via color-mix mit --hero-dark-pct (per-frame von JS,
   gekoppelt an Slide-3 Opacity) interpoliert. Damit ist die Color-Transition
   EXAKT synchron zum Hero-Crossfade — kein Lag, keine Transition nötig. */
.hero-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in oklch,
        var(--text-muted),
        color-mix(in oklch, white 85%, transparent) var(--hero-dark-pct, 0%));
    margin-bottom: 1.4rem;
    display: inline-block;
}

.hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 1px;
    background: color-mix(in oklch, var(--accent), var(--accent-light) var(--hero-dark-pct, 0%));
    vertical-align: middle;
    margin-right: 0.9rem;
    opacity: calc(0.8 + 0.2 * var(--hero-dark-amount, 0));
}

.hero-title {
    font-size: clamp(3rem, 7vw, 6.4rem);
    font-variation-settings: 'opsz' 96, 'wght' 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-bottom: 1.8rem;
    color: color-mix(in oklch, var(--text), white var(--hero-dark-pct, 0%));
}

.hero-title em {
    font-style: normal;
    color: color-mix(in oklch, var(--accent-deep), var(--accent-light) var(--hero-dark-pct, 0%));
    display: inline-block;
}

.hero-subline {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    font-weight: 300;
    color: color-mix(in oklch,
        var(--text-body),
        color-mix(in oklch, white 92%, transparent) var(--hero-dark-pct, 0%));
    margin-bottom: 2.4rem;
    max-width: 32rem;
}

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

/* Hero-Trust-Pill (vertikale 1px-Linien als Separator, Steinberger-Pattern) */
.hero-trust {
    position: absolute;
    bottom: clamp(1.5rem, 3vh, 2.5rem);
    left: 0;
    right: 0;
    z-index: 2;
}

.hero-trust-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 1.4rem;
    padding: 0.85rem 1.4rem;
    background: color-mix(in oklch,
        color-mix(in oklch, var(--bg) 78%, transparent),
        color-mix(in oklch, var(--text) 78%, transparent)
        var(--hero-dark-pct, 0%));
    border: 1px solid color-mix(in oklch,
        var(--border-soft),
        color-mix(in oklch, var(--bg) 18%, transparent)
        var(--hero-dark-pct, 0%));
    border-radius: var(--radius-pill);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: var(--depth-soft),
                inset 0 1px 0 color-mix(in oklch, white 30%, transparent);
    width: fit-content;
    max-width: 100%;
}

.hero-trust-item {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--text), white var(--hero-dark-pct, 0%));
    white-space: nowrap;
}

.hero-trust-dot {
    width: 1px;
    height: 12px;
    background: color-mix(in oklch, var(--accent), var(--accent-light) var(--hero-dark-pct, 0%));
    opacity: calc(0.55 + 0.15 * var(--hero-dark-amount, 0));
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .hero-trust-inner {
        gap: 0.7rem;
        padding: 0.7rem 1rem;
    }
    .hero-trust-item {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
    }
    .hero-trust-dot {
        height: 9px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   12. VIEW TRANSITIONS — Cross-Document Setup
   ───────────────────────────────────────────────────────────────────────── */

@view-transition { navigation: auto; }

/* Crossfade statt Slide: die Seiten sind Geschwister, kein Stapel — eine seitliche
   Bewegung würde eine Ordnung behaupten, die es nicht gibt, und der fixierte Header
   rutscht sichtbar mit (er steckt im Viewport-Snapshot). Ein Crossfade braucht auch
   keine Richtungslogik, weil er vorwärts wie rückwärts gleich aussieht. */
::view-transition-old(root) { animation: page-fade-out 0.22s var(--ease-vt-out) both; }
::view-transition-new(root) { animation: page-fade-in  0.34s var(--ease-vt-in)  both; }

@keyframes page-fade-out { to   { opacity: 0; } }
@keyframes page-fade-in  { from { opacity: 0; } }

html.intra-vt::view-transition-old(root),
html.intra-vt::view-transition-new(root) {
    animation: none;
}

/* CSS-Fallback wenn VT skipped (Cache, reduced-motion, älterer Browser) */
html.page-enter body {
    animation: page-fade-in 0.34s var(--ease-vt-in) both;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
    html.page-enter body {
        animation: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   13. WELCOME / MANIFEST
   ───────────────────────────────────────────────────────────────────────── */

.welcome-section {
    text-align: center;
    padding-block: var(--section-pad);
}

.welcome-section .label {
    margin-bottom: 2rem;
}

.welcome-headline {
    font-size: var(--type-display-l);
    font-variation-settings: 'opsz' 96, 'wght' 400;
    line-height: 1.1;
    letter-spacing: -0.018em;
    margin-bottom: 2rem;
    max-width: 24ch;
    margin-inline: auto;
}

.welcome-headline em {
    font-variation-settings: 'opsz' 96, 'wght' 420;
    color: var(--text);
}

/* Marc (Texte-PDF 08/2026): „Fließtext breiter". Der 82ch-Cap allein reicht
   NICHT — .container--narrow (880px − Padding = 800px) hat den Text schon
   vorher gekappt; ohne die Container-Weitung rendert „breiter" unverändert
   800px. Deshalb: Container der Welcome-Section mit aufweiten. */
.welcome-section .container--narrow {
    max-width: 1100px;
}

.welcome-body {
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.55;
    font-weight: 300;
    color: var(--text-body);
    max-width: 82ch;
    margin-inline: auto;
}

/* Marcs Texte1 (08/2026): das Willkommen-Intro sind DREI Absätze — der erste
   Satz steht allein. Absatzabstand deshalb generisch zwischen allen Geschwistern. */
.welcome-body + .welcome-body {
    margin-top: 1.4rem;
}
/* Marc 08/2026: „Willkommenstext in einer Größe" — der dritte Absatz („Ob
   Schreinermöbel in Bad Tölz …") liest wie die beiden darüber. Größe UND Ton
   deshalb identisch; die vorherige Abstufung war unsere Hierarchie, nicht seine. */
.welcome-body-2 {
    margin-top: 1.4rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   14. WERKSCHAU (Editorial Split — Image + Text)
   ───────────────────────────────────────────────────────────────────────── */

.werkschau-section {
    background: transparent;
    /* Bottom enger als Top: die Detail-Galerie darunter zeigt DIESE Küche → bindet
       eng an die Werkschau an (war symmetrisch 9rem → großes Loch zur Galerie). */
    padding-block: var(--section-pad) clamp(2.5rem, 5vw, 4.5rem);
}

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

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

.werkschau-image {
    position: relative;
}

.werkschau-img-frame {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    background: var(--bg-paper);
}

.werkschau-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.werkschau-img-frame img,
.werkschau-img-frame .werkschau-gif {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.werkschau-text {
    max-width: 36rem;
}

.werkschau-text .label {
    margin-bottom: 1.2rem;
}

.werkschau-text h2 {
    margin-bottom: 1.6rem;
}

.werkschau-text p {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.6;
    color: var(--text-body);
    margin-bottom: 2rem;
    max-width: 36rem;
}

/* Marc 08/2026: „Besuch vereinbaren" und „Alle Küchen ansehen" untereinander. */
.werkschau-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   15. EDITORIAL SPLIT — 3 Welten
   ───────────────────────────────────────────────────────────────────────── */

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

.split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 2.4vw, 1.8rem);
}

@media (min-width: 800px) {
    .split-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .split-grid--two {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1100px;
        margin-inline: auto;
    }
    .split-grid--two .split-tile {
        aspect-ratio: 4 / 5;
    }
}

.split-tile {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    background: var(--bg-paper);
    display: block;
    /* Reveal-Fog-Properties MIT in die Transition — sonst killt diese Shorthand
       die .reveal-fog-Transition (opacity/filter snappen → Blitz). Tile selbst
       transformt beim Hover nicht (nur Bild-Scale + CTA-Span), transform = reveal. */
    transition: opacity var(--dur-reveal-fog) var(--ease),
                filter var(--dur-reveal-fog) var(--ease),
                transform var(--dur-reveal-fog) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
}

.split-tile-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.split-tile-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Symmetrisch: gleiche Dauer + Kurve in beide Richtungen (in + zurück). */
    transition: transform 1.3s var(--ease);
}

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

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

.split-tile-content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    padding: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.split-tile-num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    font-variation-settings: 'opsz' 96, 'wght' 420;
    line-height: 0.9;
    color: var(--bg);
    opacity: 0.6;
    margin-bottom: 0.3rem;
    letter-spacing: -0.02em;
}

.split-tile-content h3 {
    color: var(--bg);
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    font-variation-settings: 'opsz' 72, 'wght' 420;
    margin-bottom: 0.5rem;
}

.split-tile-content p {
    color: color-mix(in oklch, var(--bg) 80%, transparent);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.6rem;
    max-width: 24rem;
}

.split-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-soft);
}

.split-tile-cta span {
    transition: transform var(--dur-normal) var(--ease);
}

.split-tile:hover {
    box-shadow: var(--depth-hover), var(--depth-glow);
}

.split-tile:hover .split-tile-bg img {
    transform: scale(1.06);
}

.split-tile:hover .split-tile-cta span {
    transform: translateX(4px);
}

/* Cross-Dim bei Hover (Desktop only) */
@media (hover: hover) and (min-width: 1024px) {
    .split-grid:hover .split-tile:not(:hover) .split-tile-bg img {
        filter: saturate(0.7) brightness(0.85);
        /* transform MUSS in der Liste bleiben — sonst überschreibt diese
           Shorthand die transform-Transition und der Zoom schnappt instant
           zurück sobald die Maus das Tile verlässt (aber noch im Grid ist). */
        transition: filter 0.5s var(--ease), transform 1.3s var(--ease);
    }
    .split-grid:hover .split-tile:not(:hover) .split-tile-overlay {
        opacity: 1.1;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   16. GDA HERO-STÜCK
   ───────────────────────────────────────────────────────────────────────── */

.gda-section {
    background: transparent;
    padding-block: var(--section-pad);
}

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

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

.gda-image {
    position: relative;
}

.gda-img-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest), 0 0 60px var(--accent-12);
    background: var(--bg-paper);
}

.gda-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.gda-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Award-Badge — plakativ IM Bild (User-Wunsch) */
.gda-badge {
    position: absolute;
    top: clamp(1rem, 2.5vw, 1.6rem);
    right: clamp(1rem, 2.5vw, 1.6rem);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width: clamp(96px, 13vw, 132px);
    height: clamp(96px, 13vw, 132px);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%,
        color-mix(in oklch, var(--accent-light) 90%, white),
        var(--accent-deep) 75%);
    color: var(--bg);
    box-shadow: 0 8px 24px color-mix(in oklch, var(--accent-deep) 35%, transparent),
                inset 0 1px 0 color-mix(in oklch, white 32%, transparent),
                inset 0 -8px 14px color-mix(in oklch, var(--accent-deep) 30%, transparent);
    text-align: center;
    padding: 0.5rem;
    transform: rotate(-8deg);
    isolation: isolate;
}

.gda-badge::before {
    content: '';
    position: absolute;
    inset: 6%;
    border: 1px solid color-mix(in oklch, white 36%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

.gda-badge-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.52rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    color: color-mix(in oklch, var(--bg) 92%, transparent);
}

.gda-badge-name {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    font-variation-settings: 'opsz' 24, 'wght' 500;
    line-height: 1;
    letter-spacing: -0.005em;
}

.gda-badge-year {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1;
    margin-top: 0.15rem;
    opacity: 0.9;
}

.gda-badge-year .placeholder-data {
    background: transparent;
    border-bottom-color: var(--bg);
    color: inherit;
}

.gda-text {
    max-width: 36rem;
}

.gda-text .label {
    margin-bottom: 1.2rem;
}

.gda-text h2 {
    margin-bottom: 1.6rem;
}

.gda-text > p {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.6;
    color: var(--text-body);
    margin-bottom: 1.5rem;
    max-width: 36rem;
}

.gda-meta {
    font-size: 0.9rem !important;
    line-height: 1.9 !important;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border-soft);
    color: var(--text-soft) !important;
}

.gda-meta-label {
    display: inline-block;
    width: 5.5rem;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.gda-actions {
    margin-top: 2rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   17. WIR / TEAM
   ───────────────────────────────────────────────────────────────────────── */

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

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

@media (min-width: 900px) {
    .wir-grid {
        grid-template-columns: 1fr 1.1fr;
        /* Textspalte mittig zum hohen 2:3-Portrait — sonst klebt sie oben
           und lässt den Rest der Spalte leer stehen. */
        align-items: center;
    }
}

.wir-image {
    position: relative;
}

.wir-img-frame {
    position: relative;
    /* 2:3 = Hochformat-Standard der Seite (Teaser, Galerie-Strip, Objekt-Index)
       UND die native Ratio von team2.jpg (1600×2400) → kein Beschnitt. */
    aspect-ratio: 2 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    background: var(--bg-paper);
}

.wir-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.wir-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wir-text {
    max-width: 36rem;
}

.wir-text .label {
    margin-bottom: 1.2rem;
}

.wir-text h2 {
    margin-bottom: 1.6rem;
}

.wir-intro {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.6;
    color: var(--text-body);
    margin-bottom: 2.5rem;
    max-width: 36rem;
}

/* Zwei Intro-Absätze (Marc: „Wir sind ein junges Team…" eröffnet den Body) —
   der erste gibt seinen großen Abstand an den zweiten ab. */
.wir-intro-lead {
    margin-bottom: 1.1rem;
}

.wir-team {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border-soft);
}

.wir-member {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border-soft);
}

@media (min-width: 540px) {
    .wir-member {
        flex-direction: row;
        align-items: baseline;
        gap: 1.5rem;
    }
}

.wir-member-name {
    font-family: var(--font-display);
    font-size: var(--type-display-s);
    font-weight: 400;
    font-variation-settings: 'opsz' 48, 'wght' 430;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1;
    min-width: 6rem;
}

.wir-member-role {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--text-soft);
    font-weight: 300;
    letter-spacing: 0.02em;
}

/* Foto-Zuordnung „Links/Rechts" — nach Marcs Wir-Mockup (Texte3-PDF) eine
   eigene, leise Spalte VOR dem Namen: Position · Name (Display) · Rolle. */
.wir-member-pos {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    min-width: 3.4rem;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   18. PROZESS TIMELINE
   ───────────────────────────────────────────────────────────────────────── */

.prozess-section {
    background: transparent;
    padding-block: var(--section-pad);
}

/* Layout: Stepper links, Bleistift-Anker (sticky) rechts */
.prozess-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 900px) {
    .prozess-layout {
        grid-template-columns: 1.3fr 1fr;
        align-items: start;
    }
}

.prozess-header h2 {
    margin-block: 0.4rem 1rem;
}

.prozess-intro {
    color: var(--text-body);
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.6;
    max-width: 42ch;
}

/* Stepper — verbundene Sequenz mit Linie + Nodes */
.prozess-stepper {
    list-style: none;
    margin: clamp(2.2rem, 4vw, 3.2rem) 0 0;
    padding: 0;
}

.prozess-step {
    position: relative;
    padding-left: clamp(2rem, 3vw, 2.6rem);
    padding-bottom: clamp(1.8rem, 3vw, 2.5rem);
}

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

/* Verbindungslinie — läuft durch die Nodes von Schritt zu Schritt */
.prozess-step::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0.45rem;
    bottom: 0;
    width: 1px;
    background: var(--border-strong);
}

.prozess-step:last-child::before {
    display: none;
}

.prozess-step-dot {
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--bg-tint);
    border: 2px solid var(--accent);
    z-index: 1;
    transition: background var(--dur-normal) var(--ease),
                transform var(--dur-normal) var(--ease);
}

.prozess-step-body h3 {
    font-size: var(--type-display-s);   /* Marc setzt die Ablauf-Schritte auf seine 16-pt-Stufe */
    margin-bottom: 0.5rem;
    color: var(--text);
    letter-spacing: 0.01em;
}

.prozess-step-body p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-soft);
    max-width: 46ch;
    margin: 0;
}

/* Key-Step (Nachsorge) — der Patina-Payoff: dicker Akzent-Ring mit hellem Kern
   (Kreis-im-Kreis, user) statt voll gefüllt — bleibt betont (mehr Akzentfläche
   + scale), aber als Donut. Kern in --bg-tint = wie die Innenflächen der anderen Dots. */
.prozess-step--key .prozess-step-dot {
    background: var(--accent);
    transform: scale(1.15);
}
.prozess-step--key .prozess-step-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bg-tint);
    transform: translate(-50%, -50%);
}

.prozess-step--key .prozess-step-body h3 {
    color: var(--text);
}

/* Bleistift-Anker (sticky auf Desktop) */
.prozess-image {
    position: relative;
}

@media (min-width: 900px) {
    .prozess-image {
        position: sticky;
        top: clamp(5rem, 12vh, 8rem);
    }
}

.prozess-img-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--depth-rest);
    background: var(--bg-paper);
}

.prozess-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.prozess-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   19. ANTI-MARKETING — Was wir nicht machen
   ───────────────────────────────────────────────────────────────────────── */

.nicht-section {
    padding-block: var(--section-pad);
    text-align: center;
}

.nicht-section .label {
    margin-bottom: 1.6rem;
}

.nicht-headline {
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-variation-settings: 'opsz' 96, 'wght' 400;
    margin-bottom: 1.8rem;
    max-width: 18ch;
    margin-inline: auto;
}

.nicht-headline em {
    color: var(--text);
}

.nicht-intro {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    color: var(--text-body);
    max-width: 52ch;
    margin: 0 auto 3rem;
}

.nicht-list {
    list-style: none;
    margin: 0 auto 3rem;
    padding: 0;
    max-width: 36rem;
    display: flex;
    flex-direction: column;
}

.nicht-list li {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw, 1.95rem);
    font-style: normal;
    color: var(--text-soft);
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-soft);
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.nicht-list li:last-child {
    border-bottom: none;
}

.nicht-outro {
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.6;
    color: var(--text-body);
    max-width: 52ch;
    margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   20. KONTAKT-TEASER
   ───────────────────────────────────────────────────────────────────────── */

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

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

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

.kontakt-text {
    max-width: 30rem;
}

.kontakt-text .label {
    margin-bottom: 1.2rem;
}

.kontakt-text h2 {
    margin-bottom: 1.6rem;
}

.kontakt-text p {
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.55;
    color: var(--text-body);
    max-width: 28rem;
}

.kontakt-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.kontakt-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.4rem 1.6rem;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--depth-soft);
    transition: transform var(--dur-medium) var(--ease),
                box-shadow var(--dur-medium) var(--ease),
                border-color var(--dur-medium) var(--ease);
    isolation: isolate;
    position: relative;
}

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

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

.kontakt-card-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-muted);
}

.kontakt-card-value {
    font-family: var(--font-display);
    font-size: var(--type-display-s);
    font-variation-settings: 'opsz' 48, 'wght' 430;
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.kontakt-card-meta {
    font-size: 0.85rem;
    color: var(--text-soft);
    line-height: 1.5;
}

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

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

/* ─────────────────────────────────────────────────────────────────────────
   21. FOOTER
   ───────────────────────────────────────────────────────────────────────── */

.footer {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.5rem);
    background: linear-gradient(to bottom,
        var(--bg) 0%,
        var(--bg-deeper) 100%);
    overflow: clip;
    isolation: isolate;
    border-top: 1px solid var(--border-soft);
}

.footer-ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-family: var(--font-display);
    font-size: clamp(7rem, 22vw, 22rem);
    font-weight: 400;
    font-variation-settings: 'opsz' 96, 'wght' 400;
    line-height: 0.85;
    color: var(--text);
    letter-spacing: -0.04em;
    opacity: 0.035;
    z-index: 0;
    white-space: nowrap;
    transform: scale(0.9);
    transform-origin: center;
}

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

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

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

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

.footer-logo {
    height: 32px;
    width: auto;
    margin-bottom: 1.2rem;
}

.footer-brand-col p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 24rem;
}

.footer-heading {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-muted);
    margin-bottom: 1.2rem;
}

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

.footer-col p:last-child {
    margin-bottom: 0;
}

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

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

.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-list li {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-body);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid var(--border-soft);
    font-size: 0.82rem;
    color: var(--text-muted);
}

@media (min-width: 600px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

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

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

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

/* ─────────────────────────────────────────────────────────────────────────
   22. 4er BILDGALERIE-STRIP (nach Werkschau)
   ───────────────────────────────────────────────────────────────────────── */

.galerie-strip {
    /* Top enger (Anbindung an die Werkschau-GIF darüber); Bottom unverändert. */
    padding-block: clamp(1rem, 2vw, 2rem) var(--section-pad);   /* oben eng am Werkschau-Block (eine Einheit), unten normaler Sektions-Abstand */
}
/* Pompa-Breite (1760) wie die Teaser — größere Detail-Kacheln (war 1400). */
.galerie-strip .container {
    max-width: var(--container-max);   /* mit auf 1400 (einheitlicher Container) */
}

.galerie-strip-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.75rem);     /* identisch zum Teaser-Grid → die 4 Objekte exakt teaser-breit, gleicher Rhythmus */
}

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

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

.galerie-strip-item {
    position: relative;
    aspect-ratio: 2 / 3;     /* = Teaser-Kachel → gleiche Höhe wie die anderen Bild-Sektionen (user); alle 4 Bilder nativ 2:3 → kein Beschnitt */
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-paper);
    box-shadow: var(--depth-soft);
    /* Reveal-Fog-Properties MIT in die Transition — sonst killt diese Shorthand
       die Transition-Liste von .reveal-fog (gleiche Spezifität, später definiert)
       → Reveal snapt ohne Fade/Stagger. Die Kachel selbst transformt beim Hover
       nicht (nur Bild-Scale + box-shadow), daher ist transform hier reveal-only. */
    transition: opacity var(--dur-reveal-fog) var(--ease),
                filter var(--dur-reveal-fog) var(--ease),
                transform var(--dur-reveal-fog) var(--ease),
                box-shadow var(--dur-medium) var(--ease);
    display: block;
}

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

.galerie-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 1.4s var(--ease);
}

.galerie-strip-item:hover {
    box-shadow: var(--depth-hover), var(--depth-glow);
}

.galerie-strip-item:hover img {
    transform: scale(1.05);
}

/* ─────────────────────────────────────────────────────────────────────────
   23. TEASER-SECTION (4 Projekt-/Stück-Cards auf Index)
   ───────────────────────────────────────────────────────────────────────── */

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

.teaser-section--alt {
    background: transparent;
}

/* Teaser-Raster BREITER (Pompa-Proportion ~86% Viewport) → größere Kacheln auf
   großen Screens. Cap 1760px statt 1400 (--container-max); auf ≤1760 weiterhin
   voll-breit. Andere Sektionen bleiben bei 1400 (Text-Lesbarkeit); der zentrierte
   section-header (max-width 56rem) bleibt schmal, nur das Bild-Grid geht breit. */
.teaser-section .container {
    max-width: var(--container-max);   /* gleicher Container wie Editionen/Wir → linke Kanten fluchten (Timo) */
}

.teaser-section .section-header {
    text-align: left;
    max-width: 60ch;
    margin-inline: 0;
}

.teaser-section .section-header h2 {
    max-width: none;
    margin-inline: 0;
}

.teaser-section .section-header p {
    margin-inline: 0;
}

.teaser-section .section-header .label::before {
    margin-right: 0.6rem;
}

.teaser-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.75rem);     /* enger, Pompa-Spacing (war 1.5–2.5rem) */
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

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

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

/* ── Bild-Breakout (Timo): die Bild-Grids brechen aus dem 1400-Text-Container aus
   und gehen zurück auf die alte Breite (~1760), viewport-zentriert. Header/Text
   bleiben im 1400er linksbündig. Greift nur, wenn der Viewport breiter als der
   1400-Container ist (sonst --bleed = volle Viewport-Breite → kein H-Scroll). ── */
.teaser-grid,
.teaser-carousel,
.galerie-strip-grid {
    --bleed: min(1760px, calc(100vw - 2 * var(--container-pad)));
    width: var(--bleed);
    margin-inline: calc((100% - var(--bleed)) / 2);
}

.teaser-tile {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    text-align: left;
    /* Reveal-Fog-Properties MIT in die Transition — sonst überschreibt diese
       Shorthand die .reveal-fog-Transition → Reveal snapt ohne Fade/Stagger.
       Die Kachel selbst transformt beim Hover nicht (Bild-Scale + box-shadow
       sitzen auf Kind-Elementen), daher ist transform hier reveal-only. */
    transition: opacity var(--dur-reveal-fog) var(--ease),
                filter var(--dur-reveal-fog) var(--ease),
                transform var(--dur-reveal-fog) var(--ease);
}

.teaser-tile-image {
    position: relative;
    aspect-ratio: 2 / 3;     /* Pompa-Proportion — hohe Hochkant-Kachel (war 4/5) */
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-paper);
    box-shadow: var(--depth-soft);
    transition: box-shadow var(--dur-medium) var(--ease);
}

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

.teaser-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 1.4s var(--ease);
}

.teaser-tile:hover .teaser-tile-image {
    box-shadow: var(--depth-hover), var(--depth-glow);
}

.teaser-tile:hover .teaser-tile-image img {
    transform: scale(1.04);
}

.teaser-tile-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.teaser-tile-num {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 500;
    font-variation-settings: 'opsz' 24, 'wght' 500;
    color: var(--text);
    letter-spacing: 0.04em;
}

.teaser-tile-body h3 {
    font-family: var(--font-display);
    font-size: var(--type-display-s);
    font-variation-settings: 'opsz' 48, 'wght' 400;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--text);
    margin: 0;
}

.teaser-tile-body p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-soft);
    margin: 0;
}

.teaser-cta {
    text-align: center;   /* „Alle … ansehen"-Button bleibt mittig (Timo) */
}

/* ─────────────────────────────────────────────────────────────────────────
   24. EDITIONEN-INTRO-SECTION (Editorial Split mit GIF/Bild + Text)
   ───────────────────────────────────────────────────────────────────────── */

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

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

@media (min-width: 900px) {
    .editionen-intro-grid {
        grid-template-columns: 1fr 1.1fr;
    }
    .editionen-intro-grid .editionen-intro-image {
        order: 2;
    }
}

.editionen-intro-image {
    position: relative;
}

.editionen-intro-img-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-paper);
    box-shadow: var(--depth-rest);
}

.editionen-intro-img-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}

.editionen-intro-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.8s var(--ease);
}

.editionen-intro-image:hover .editionen-intro-img-frame img {
    transform: scale(1.03);
}

.editionen-intro-text {
    max-width: 36rem;
}

.editionen-intro-text .label {
    margin-bottom: 1.2rem;
}

.editionen-intro-text h2 {
    margin-bottom: 1.6rem;
}

.editionen-intro-text > p {
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.6;
    color: var(--text-body);
    margin-bottom: 2rem;
    max-width: 36rem;
}

/* ==========================================================================
   LIGHTBOX — Single-Image "Lift" (hell, editorial, kein Carousel)
   Frosted-cream Backdrop · ein Bild zentriert in Normalgröße · Shared-Element
   Morph via View Transitions (.gal-item img bekommt lb2-shared Name).
   ========================================================================== */

.lb2-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 5vh, 4rem) clamp(1.5rem, 5vw, 5rem);
    background: color-mix(in oklch, var(--bg) 80%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.1);
    backdrop-filter: blur(22px) saturate(1.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--ease), visibility 0.5s;
    will-change: opacity;
}

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

.lb2-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.9rem, 1.6vw, 1.4rem);
    max-width: 100%;
    max-height: 100%;
}

.lb2-img {
    max-width: min(90vw, 1500px);
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--depth-hover);
    background: var(--bg-paper);
}

.lb2-cap {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    max-width: 60ch;
}

.lb2-close {
    position: absolute;
    top: clamp(1rem, 2.5vh, 1.6rem);
    right: clamp(1rem, 2.5vw, 1.6rem);
    width: 46px;
    height: 46px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 55%, transparent),
        color-mix(in oklch, white 42%, transparent));
    border: 1px solid var(--border-strong);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease);
}

.lb2-close:hover {
    border-color: var(--accent-40);
    color: var(--accent-deep);
}

/* Shared-Element Lift: ruhiges Easing für den Morph */
::view-transition-group(lb2-shared) {
    animation-duration: 0.52s;
    animation-timing-function: var(--ease);
}

/* Galerie-Bilder als zoom-bar markieren */
.gal-item { cursor: zoom-in; }

/* Parent-Animationen pausieren während Lightbox offen (Compositor entlasten) */
body.lightbox-open .hero-slide,
body.lightbox-open .footer-ghost,
body.lightbox-open .reviews-track {
    animation-play-state: paused !important;
}

@media (max-width: 720px) {
    .lb2-img { max-width: 94vw; max-height: 74vh; }
    .lb2-close { width: 40px; height: 40px; }
}

/* ==========================================================================
   25. NEUE SECTIONS (USP-Pillars, Materialien, Marc-Quote, Reviews, FAQ)
   ========================================================================== */

/* ─── USP-Pillars: 4 Säulen unter Welcome ─── */
.pillars-section {
    padding-block: clamp(2rem, 4vw, 4rem) clamp(2rem, 5vw, 5rem);
}

.pillars-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.6rem);
}

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

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

.pillar {
    position: relative;
    isolation: isolate;
    padding: clamp(1.5rem, 2.2vw, 2.1rem);
    border-radius: var(--radius-lg);
    background: var(--bg-paper);
    box-shadow: var(--depth-rest);
    overflow: hidden;
}

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

.pillar > * {
    position: relative;
    z-index: 2;
}

/* Lesbarer Ghost — großes Säulen-Wort, oben linksbündig, in-flow als Titel.
   Präsenz über die Größe (Watermark-Charakter), Eleganz über den gedämpften
   Walnuss-Ton — kräftig genug zum Lesen, luftig genug für den Ghost-Look. */
.pillar-word {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--accent) 58%, var(--bg-paper));
    margin: 0 0 0.9rem;
}

.pillar-text {
    color: var(--text-body);
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.55;
    margin: 0;
}

/* (Ghost-Wort entfernt — .pillar-word ist jetzt der voll lesbare Titel.) */


/* ─── Werkschau-Invitation ─── */
/* Marcs Entwurf setzt „Besuchen Sie uns…" als normalen Fließtext-Absatz
   (Lato-Light, 12 pt) — NICHT in der Display-Schrift. Wir hatten es genau
   umgekehrt: Saveur groß. */
.werkschau-invitation {
    font-family: var(--font-sans);
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    font-weight: 300;
    color: var(--text-body);
    margin-block: 1.1rem 1.6rem;
    line-height: 1.55;
}


/* ─── Marc-Quote — als Einheit unter dem Gruppenfoto (kein Divider) ─── */
.marc-quote {
    margin-top: clamp(1.4rem, 2.5vw, 2rem);
    text-align: left;
}

/* Marcs Texte1 S.5 setzt Zitat UND Namenszeile in Lato-Light 12 pt —
   nicht in der Display-Schrift. */
.marc-quote-text {
    font-family: var(--font-sans);
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    line-height: 1.4;
    color: var(--text);
    margin: 0 0 1.4rem 0;
    font-weight: 300;
    text-wrap: pretty;
}

.marc-quote-text em {
    color: var(--text);
    font-style: normal;
}

.marc-quote-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem 1.4rem;
}

.marc-quote-attribution {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.marc-quote-name {
    font-family: var(--font-sans);
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    font-weight: 300;   /* Marc: „nicht fett" */
    color: var(--text);
    letter-spacing: normal;
}

.marc-quote-role {
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: normal;
    text-transform: none;
}

.marc-quote-actions {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.marc-quote-link {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text);
    border-bottom: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
    padding-bottom: 2px;
    transition: color var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease);
}

.marc-quote-link:hover {
    color: var(--accent);
    border-color: var(--accent);
}


/* ─── Reviews — Auto-Scroll Marquee ─── */
.reviews-section {
    background: transparent;
    padding-block: var(--section-pad);   /* Marc: einheitlicher Sektions-Rhythmus */
    overflow: hidden;
}

/* Eyebrow-Label zentrieren in den zentrierten Header-Sections (Reviews + FAQ).
   .label ist inline-block → display:block + text-align:center zentriert die
   inline-Inhalte (Deko-Linie + Text) ohne die Geschwister-Elemente zu
   beeinflussen (FAQ-Accordion-Liste bleibt links). */
.reviews-section .label {
    display: block;
    text-align: center;
    margin-bottom: clamp(1rem, 1.6vw, 1.3rem);
}
.faq-section .label {
    display: block;
    text-align: center;
    margin-bottom: clamp(1rem, 1.6vw, 1.3rem);
}

.reviews-headline {
    text-align: center;
    margin-bottom: 1rem;
}

/* Ganze Rating-Zeile = EIN Google-Link (Logo + Sterne + Wertung klickbar).
   display:flex (volle Zeilenbreite) + justify-content:center → mittig auf der Seite
   (inline-flex schrumpfte auf Inhalt und rutschte an den linken Padding-Rand). */
.reviews-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: clamp(0.9rem, 1.6vw, 1.2rem);
    font-size: 0.95rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-decoration: none;
}
.reviews-rating .reviews-google-g { width: 20px; height: 20px; }
.reviews-rating-num { color: var(--text-soft); 
    letter-spacing: normal;
}

/* „Alle Bewertungen auf Google" inline NEBEN den Sternen, durch feine vertikale
   Haarlinie abgesetzt (user). Unterlinie erscheint erst beim Hover der Zeile. */
.reviews-rating-link {
    margin-left: 0.35rem;
    padding-left: 0.9rem;
    border-left: 1px solid color-mix(in oklch, var(--text-muted) 30%, transparent);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    letter-spacing: normal;
    color: var(--text-muted);
    /* Unterstrich via text-decoration → nur unter den BUCHSTABEN (startet am „A",
       endet am „e"), nicht über padding/Divider wie eine border-bottom (user). */
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}
.reviews-rating:hover .reviews-rating-link,
.reviews-rating:focus-visible .reviews-rating-link {
    color: var(--accent-deep);
    text-decoration-color: var(--accent-deep);
}

.reviews-stars {
    color: var(--accent);
    letter-spacing: 0.1em;
}

.reviews-marquee {
    overflow: hidden;
    /* Vertikales Padding INNEN — sonst clippt overflow:hidden (für den
       horizontalen Marquee-Loop nötig) die Card-Schatten oben/unten ab,
       und die Kacheln wirken abgeschnitten. */
    padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.reviews-track {
    display: flex;
    gap: clamp(1.2rem, 2vw, 2rem);
    width: max-content;
    animation: reviews-scroll 60s linear infinite;
}

.reviews-marquee:hover .reviews-track {
    animation-play-state: paused;
}

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

.review-card {
    flex: 0 0 clamp(280px, 28vw, 380px);
    padding: clamp(1.6rem, 2.4vw, 2.2rem);
    background: var(--bg-paper);
    border-radius: var(--radius-lg);
    box-shadow: var(--depth-soft);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--dur-medium) var(--ease),
                transform var(--dur-medium) var(--ease);
}

.review-card:hover {
    box-shadow: var(--depth-hover);
}

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

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

.review-stars {
    color: var(--accent);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
}

.review-text {
    margin: 0;
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.55;
    color: var(--text-body);
}

.review-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border-top: 1px solid var(--border-soft);
    padding-top: 1rem;
}

.review-author {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text);
    letter-spacing: 0.04em;
}

.review-source {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* ─── FAQ — Accordion ─── */
.faq-section {
    padding-block: clamp(4rem, 7vw, 6rem);
}

.faq-headline {
    text-align: center;
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.faq-item {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-paper);
    overflow: hidden;
    /* opacity/transform für den Entrance-Reveal MIT in die Transition — sonst
       überschreibt diese Shorthand die .reveal-Transition → Eintritt snapt. */
    transition: opacity var(--dur-reveal) var(--ease),
                transform var(--dur-reveal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
}

/* Offen-Zustand über JS-Klasse .faq-open (nicht [open]) — so animieren Icon +
   Border synchron zum Collapse, statt am Ende zurückzuspringen. */
.faq-item.faq-open {
    border-color: color-mix(in oklch, var(--accent) 30%, var(--border));
    box-shadow: var(--depth-soft);
}

.faq-question {
    font-family: var(--font-display);
    font-size: var(--type-display-s);
    font-weight: 400;
    color: var(--text);
    padding: clamp(1.1rem, 1.6vw, 1.4rem) clamp(1.2rem, 1.8vw, 1.6rem);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: clamp(3rem, 4vw, 3.5rem);
    transition: color var(--dur-normal) var(--ease);
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
    content: '+';
    position: absolute;
    right: clamp(1.2rem, 1.8vw, 1.6rem);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--accent);
    transition: transform var(--dur-normal) var(--ease);
    line-height: 1;
}

.faq-item.faq-open .faq-question::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-item:hover .faq-question {
    color: var(--accent-deep);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-medium) var(--ease);
}

/* No-JS-Fallback: native <details open> zeigt die Antwort (ohne Animation). */
.faq-item[open] .faq-answer {
    max-height: none;
}

/* Padding auf dem inneren <p> (NICHT auf .faq-answer) — sonst klemmt der
   border-box max-height-Klamp die Schließ-Animation in den letzten Frames ein. */
.faq-answer p {
    color: var(--text-body);
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.6;
    margin: 0;
    padding: 0 clamp(1.2rem, 1.8vw, 1.6rem) clamp(1.2rem, 1.6vw, 1.4rem);
}


/* ==========================================================================
   26. KONTAKTFORMULAR „Briefbogen" — bespoke, mehrstufig, skandinavisch.
   Ruhiges Blatt, Underline-Inputs, ein Schritt nach dem anderen. ob- Prefix
   gegen Reveal-Konflikte. Mehrfach-instanz-fähig (Main + Kontakt).
   ========================================================================== */

/* Section-Kopf über dem Formular */
.kontakt-form-head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.kontakt-form-head .label { display: block; margin-bottom: clamp(0.9rem, 1.6vw, 1.2rem); }
.kontakt-form-head h2 { margin-bottom: 1rem; }
.kontakt-form-intro {
    color: var(--text-body);
    font-size: clamp(1.08rem, 1.5vw, 1.3rem);
    line-height: 1.6;
    max-width: 42rem;
    margin-inline: auto;
}

/* Das Blatt (Surface-Card: Depth + Glass-Touch). KEINE transition-Shorthand
   hier — das Element trägt reveal-fog. */
.ob-form-wrapper {
    position: relative;
    isolation: isolate;
    max-width: 46rem;
    margin-inline: auto;
    padding: clamp(2.4rem, 4vw, 3.6rem) clamp(1.8rem, 3.4vw, 3.4rem);
    /* Helles Briefpapier — HELLER als der getönte Grund → schwebt nach vorn.
       (Vorher bg-paper = dunkler als die Seite → wirkte eingesunken/flach.) */
    background: var(--bg);
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in oklch, var(--holz-walnuss) 7%, transparent);
    /* Single Shadow, tief + diffus, klar gelifteter Briefbogen statt weichem Anhauch. */
    box-shadow: 0 22px 50px -14px color-mix(in oklch, var(--holz-walnuss) 24%, transparent);
    overflow: hidden;
}
/* Glass-Highlight zwischen Blatt und Inhalt */
.ob-form-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}
/* Sehr dezenter Briefbogen-Strich oben links (kein Logo) */
.ob-form-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: clamp(1.5rem, 3vw, 3rem);
    width: 2.4rem;
    height: 2px;
    background: var(--ob-silver-line);
    opacity: 0.65;
    z-index: 3;
}
.ob-form-wrapper > * { position: relative; z-index: 2; }

/* Progress — editorial, keine Kreise */
.ob-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: clamp(1.6rem, 2.6vw, 2.3rem);
    font-family: var(--font-sans);              /* an Intro-Zeile angeglichen (Inter) */
    font-size: clamp(0.72rem, 1vw, 0.82rem);
    letter-spacing: normal;
    text-transform: none;
}
.ob-progress-step {
    color: var(--text-muted);
    padding-bottom: 0.32rem;
    border-bottom: 1px solid transparent;
    transition: color var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease);
}
.ob-progress-step.is-active { color: var(--ob-silver-text); border-bottom-color: var(--ob-silver-line); }
.ob-progress-step.is-done { color: var(--ob-silver-text); }
.ob-progress-sep { color: var(--border-strong); }

/* Steps — Höhen-Animation + Fade (coordinated: gleiche Dauer + gleiches sanftes Easing) */
:root { --ob-step-dur: 0.46s; --ob-step-ease: cubic-bezier(0.4, 0, 0.2, 1); }
.ob-steps {
    position: relative;
    overflow: hidden;
    transition: height var(--ob-step-dur) var(--ob-step-ease);
}
.ob-step {
    display: none;
    opacity: 0;
    filter: blur(5px);
    /* NEBEL-DISSOLVE: Der alte Step löst sich in leichten Nebel auf (Blur + Fade),
       der neue materialisiert daraus. Blur + Opacity laufen auf gleicher Dauer/Kurve.
       Der Nebel überdeckt sowohl den Höhen-Wechsel als auch das Einwachsen der
       Zurück-Leiste — beide verschwimmen, statt hart zu poppen.
       KEIN translateY (würde im overflow:hidden die Box-Unterkante an der Clip-Linie
       abschneiden). Die Bewegung kommt rein aus Blur + Fade. */
    transition: opacity var(--ob-step-dur) var(--ob-step-ease),
                filter var(--ob-step-dur) var(--ob-step-ease);
}
.ob-step.is-active { display: block; }
.ob-step.is-visible { opacity: 1; filter: blur(0); }

/* Ausgehender Step: absolut overlayen + in Nebel auflösen (Blur + Fade), damit der
   neue Step im selben Moment daraus materialisiert (Cross-Dissolve, kein Blank-Frame). */
.ob-step.is-leaving {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    filter: blur(5px);
    pointer-events: none;
    transition: opacity var(--ob-step-dur) var(--ob-step-ease),
                filter var(--ob-step-dur) var(--ob-step-ease);
}

@media (prefers-reduced-motion: reduce) {
    .ob-steps { transition: none; }
    .ob-step { transition: none; filter: none; }
    .ob-step.is-leaving { transition: none; }
    .ob-nav { transition: none; }
}

.ob-question {
    font-family: var(--font-sans);              /* an Intro-Zeile angeglichen (Inter) */
    font-size: clamp(1.3rem, 2.1vw, 1.7rem);
    font-weight: 300;
    color: var(--text);
    letter-spacing: -0.005em;
    margin: 0 0 clamp(1.2rem, 2vw, 1.6rem);
    text-align: center;
}

/* Chips — Glass-Pill-Sprache der Seite */
.ob-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.ob-chip {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--text);
    padding: 0.72rem 1.3rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 38%, transparent));
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                color var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
}
.ob-chip:hover { border-color: var(--ob-silver-border); color: var(--ob-silver-text); }
.ob-chip.is-selected {
    background: transparent;                        /* nicht voll gefüllt — Mitte durchsichtig */
    border-color: var(--ob-silver-border);
    color: var(--ob-silver-text);
    box-shadow: inset 0 0 10px 0 oklch(86% 0.004 246 / 0.20),  /* leichte helle Silber-Kante → innen durchsichtig (dezenter) */
                0 3px 12px var(--ob-silver-glow);
}

/* Felder — Underline statt Box */
.ob-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 2.4vw, 2rem);
}
.ob-field { position: relative; display: block; }
.ob-field--full { grid-column: 1 / -1; }
.ob-field input,
.ob-field textarea {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 1.08rem;
    color: var(--text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-strong);
    border-radius: 0;
    padding: 0.5rem 0 0.55rem;
    transition: border-color var(--dur-normal) var(--ease);
}
.ob-field textarea { resize: none; line-height: 1.55; display: block; }  /* block: killt den inline-block-Baseline-Spalt (~7px), sonst sitzt die ::after-Fokuslinie tiefer als die graue Grundlinie */
.ob-field input:focus, .ob-field textarea:focus { outline: none; }
/* Linie zieht sich beim Focus in Walnuss */
.ob-field::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--ob-silver-line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
}
.ob-field:focus-within::after { transform: scaleX(1); }
/* Floating Label */
.ob-field-label {
    position: absolute;
    left: 0;
    top: 0.5rem;
    font-family: var(--font-sans);
    font-size: 1.08rem;
    color: var(--text-muted);
    pointer-events: none;
    transform-origin: left;
    transition: transform var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease);
}
.ob-field:focus-within .ob-field-label,
.ob-field:has(input:not(:placeholder-shown)) .ob-field-label,
.ob-field:has(textarea:not(:placeholder-shown)) .ob-field-label {
    transform: translateY(-1.45em) scale(0.78);
    color: var(--ob-silver-text);
}
.ob-opt { color: var(--text-muted); font-size: 0.85em; }

.ob-trust {
    margin: clamp(1.3rem, 2.2vw, 1.7rem) 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.02em;
}

/* Honeypot — visuell entfernt */
.ob-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Nav */
.ob-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Wächst beim Step 1→2 sanft ein, statt hart zu poppen (war die Quelle des
       „abgehackten" Sprungs). max-height + opacity + margin-top kollabiert/expandiert
       auf gleicher Dauer/Kurve wie der Nebel — vom Step-Dissolve mit überdeckt. */
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--ob-step-dur) var(--ob-step-ease),
                margin-top var(--ob-step-dur) var(--ob-step-ease),
                opacity var(--ob-step-dur) var(--ob-step-ease);
}
.ob-nav.is-shown {
    max-height: 6rem;
    margin-top: clamp(1.6rem, 2.6vw, 2.2rem);
    opacity: 1;
}
.ob-nav-spacer { flex: 1; }
.ob-back {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 0;
    transition: color var(--dur-normal) var(--ease);
}
.ob-back:hover { color: var(--ob-silver-text); }
.ob-back[hidden] { display: none; }
.ob-submit[hidden] { display: none; }

/* Success */
.ob-success { text-align: center; padding: clamp(1rem, 2vw, 2rem) 0; }
.ob-success[hidden] { display: none; }
/* Kein generischer Haken — ein dezenter Walnuss-Strich als Marken-Detail
   (echot den Briefbogen-Strich oben am Blatt). */
.ob-success-mark {
    display: block;
    width: 2.4rem;
    height: 2px;
    margin: 0 auto 1.4rem;
    background: var(--ob-silver-line);
    opacity: 0.7;
}
.ob-success-title {
    font-family: var(--font-display);
    font-size: var(--type-display-s);
    font-weight: 400;
    color: var(--text);
    margin: 0 0 0.6rem;
}
.ob-success-text { color: var(--text-body); font-size: 1.05rem; line-height: 1.6; margin: 0; }

/* Direkt-Zeile unter dem Blatt */
.ob-direct {
    margin-top: clamp(1.6rem, 3vw, 2.4rem);
    text-align: center;
    font-size: 0.92rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.ob-direct-label { margin-right: 0.4rem; }
.ob-direct a { color: var(--ob-silver-text); transition: color var(--dur-normal) var(--ease); }
.ob-direct a:hover { color: var(--ob-silver-line); }
.ob-direct-sep { color: var(--border-strong); margin: 0 0.45rem; }

/* Shake bei fehlender Pflichtauswahl */
.ob-shake { animation: ob-shake 0.4s var(--ease); }
@keyframes ob-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
}

/* Autofill-Override — Form-BG matchen */
.ob-form input:-webkit-autofill,
.ob-form input:-webkit-autofill:hover,
.ob-form input:-webkit-autofill:focus,
.ob-form textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text);
    transition: background-color 5000s ease-in-out 0s;
}

@media (max-width: 600px) {
    .ob-fields { grid-template-columns: 1fr; }
}

/* Tiles (Rahmen + Bereich) — größer als Pills, mit Beschreibungszeile */
.ob-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}
.ob-tile {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: left;
    padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.1rem, 2vw, 1.4rem);
    border-radius: var(--radius-md);
    background: linear-gradient(to bottom,
        color-mix(in oklch, white 50%, transparent),
        color-mix(in oklch, white 38%, transparent));
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                box-shadow var(--dur-normal) var(--ease);
}
.ob-tile:hover { border-color: var(--ob-silver-border); box-shadow: var(--depth-soft); }
.ob-tile.is-selected {
    background: transparent;                        /* nicht voll gefüllt — Mitte durchsichtig */
    border-color: var(--ob-silver-border);
    box-shadow: inset 0 0 18px 0 oklch(86% 0.004 246 / 0.18),  /* leichte helle Silber-Kante → innen durchsichtig (dezenter) */
                0 4px 16px var(--ob-silver-glow);
}
.ob-tile-title {
    font-family: var(--font-sans);              /* an Intro-Zeile angeglichen (Inter) */
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    font-weight: 400;
    color: var(--text);
    letter-spacing: 0.01em;
}
.ob-tile.is-selected .ob-tile-title { color: var(--ob-silver-text); }
.ob-tile-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }
@media (max-width: 460px) { .ob-tiles { grid-template-columns: 1fr; } }

/* Dynamischer Progress — „Vorhaben" fällt im Einzelstück-Pfad raus */
.ob-progress-step[hidden], .ob-progress-sep[hidden] { display: none; }

/* Einzelstück-Hinweis am Kontakt-Step */
.ob-einzel-hint {
    margin: 0 0 clamp(1rem, 1.8vw, 1.4rem);
    padding: 0.8rem 1rem;
    border-left: 2px solid var(--ob-silver-border);
    background: color-mix(in oklch, var(--ob-silver-line) 8%, transparent);
    border-radius: 0 6px 6px 0;
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.5;
    text-align: left;
}
.ob-einzel-hint[hidden] { display: none; }

/* ── Kontakt-Split: Formular-Karte neben sinnlichem Marken-Bild (Oakywood) ────
   Hebt das nackte zentrierte Formular aus dem „SaaS-Moment": Papier-Karte + ein
   Material-/Handwerks-Bild als Paar. Beide Spalten gleich hoch (grid stretch),
   das Bild folgt der Höhen-Animation des Formulars (object-fit: cover). */
.kontakt-split {
    display: grid;
    grid-template-columns: 0.82fr 1fr;
    gap: clamp(1.4rem, 2.8vw, 2.4rem);
    align-items: stretch;
    max-width: 66rem;
    margin-inline: auto;
}
.kontakt-split .ob-form-wrapper {
    max-width: none;
    margin-inline: 0;
}
.kontakt-split-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 24rem;
    box-shadow: 0 22px 50px -14px color-mix(in oklch, var(--holz-walnuss) 24%, transparent);
}
.kontakt-split-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kontakt-split-media::before {  /* Glass-Touch wie bei den Tiles */
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}
@media (max-width: 820px) {
    .kontakt-split { grid-template-columns: 1fr; }
    .kontakt-split-media { min-height: 13rem; order: -1; }  /* Bild als Banner oben */
}

/* Direkt-Kontakte als Cards unter dem Blatt (statt verlorener Textzeile) */
.ob-contact-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    max-width: 52rem;   /* breiter als das 46rem-Formular → ragt links/rechts raus (Breakout) */
    margin: clamp(2rem, 3.4vw, 2.8rem) auto 0;
}
@media (min-width: 640px) {
    .ob-contact-cards { grid-template-columns: repeat(3, 1fr); }
}
.ob-contact-cards .kontakt-card { padding: 1.6rem 1.7rem; }
/* EINZIGE Ausnahme der Display-Leiter: die Kontaktkarten im Formularbereich sind
   schmaler (199 px). Auf der 1,33er-Stufe bricht „info@zimmerhackl.eu“ zweizeilig —
   deshalb hier bewusst kompakter. Marcs Vorlage kennt diese Karten nicht. */
.ob-contact-cards .kontakt-card-value {
    font-size: clamp(0.95rem, 1.35vw, 1.12rem);
    overflow-wrap: anywhere;
}
.ob-contact-cards .kontakt-card-meta { font-size: 0.85rem; }


/* ==========================================================================
   27. POMPA-MODUS — V2 FOUNDATION
   Flach · harte Kanten · Ruhe · Scroll-Timeline (Apple-Stil).
   Überschreibt die weiche Schatten-/Rund-/Observer-Reveal-Basis oben.
   Cascade: steht zuletzt → gewinnt bei gleicher Spezifität.
   ========================================================================== */

:root {
    /* harte Kanten — alles eckig. Runde Funktions-Elemente nutzen 50% direkt. */
    --radius-sm:   0px;
    --radius-md:   0px;
    --radius-lg:   0px;
    --radius-xl:   0px;
    --radius-pill: 0px;

    /* Tiefe aus — gültige, unsichtbare Schatten (auch in Komma-Kombis nutzbar) */
    --depth-rest:  0 0 0 0 transparent;
    --depth-hover: 0 0 0 0 transparent;
    --depth-glow:  0 0 0 0 transparent;
    --depth-soft:  0 0 0 0 transparent;
    --glass-highlight: none;

    /* Pompa-Hover: langsam, einheitlich */
    --dur-pompa:  0.5s;
    --ease-pompa: ease;
}

/* ── Streu-Schatten (hartkodiert, nicht über Tokens) neutralisieren ──────── */
.nav.scrolled,
body[data-page="subpage"] .nav {
    box-shadow: none;
    border-bottom: 1px solid var(--border);
}
.gda-badge { box-shadow: none; }
/* (ob-chip/ob-tile.is-selected box-shadow:none entfernt — jetzt tragen sie den
   leichten silbernen Inset-Edge-Fade aus ihren Hauptregeln, Mitte durchsichtig) */

/* ── Buttons → Rest = der „definierte" Silber-Look (permanenter feiner Silberrand);
   Hover = NUR weiche Silber-Aura + leichtes Aufhellen (user 2026-06-15). Kein
   State-Flip — der Button sieht im Ruhezustand schon interaktiv aus, der Hover
   erhellt ihn nur sanft. Neutrales Grau-Silber (hue 246, sehr niedriges Chroma).
   • .btn-primary = fast-weiß gefüllt + Inset-Edge + PERMANENTER Rand (Alpha 0.85)
   • .btn-ghost   = LEER (kein Fill) + dezenterer PERMANENTER Rand (Alpha 0.55)
   Hover: die AURA bloomt (3. Shadow-Layer transparent → Glow), Rand + Fill einen
   Tick heller; Ghost bekommt zusätzlich eine hauchzarte Füllung (= „aufhellen").
   3-Layer-Schatten in fixer Reihenfolge (inset · rim · aura) aus Transparent-Basis
   = reiner Alpha-Ramp, kein Pop. 0.4s ease-out. color:var(--text) neutralisiert die
   Basis-Hover-Flips. Kein translateY → kein Edge-Bleed. */
.btn {
    box-shadow: inset 0 0 14px 0 transparent,
                0 0 0 1px transparent,
                0 0 18px 3px transparent;
    text-shadow: 0 0 0 transparent;
    transition: background-color 0.25s cubic-bezier(0.33, 1, 0.68, 1),
                box-shadow       0.25s cubic-bezier(0.33, 1, 0.68, 1),
                border-color     0.25s cubic-bezier(0.33, 1, 0.68, 1);
    letter-spacing: normal;   /* Marcs Satz kennt keine Sperrung */
}
.btn-primary {
    background: transparent;                     /* innen DURCHSICHTIG — Kante silber, Mitte zeigt den Grund */
    color: var(--text);
    border: 1px solid oklch(85% 0.004 246);      /* helles Platin-Silber, entblaut */
    box-shadow: inset 0 0 14px 0 oklch(82% 0.004 246 / 0.40),  /* helle Silber-Kante → innen durchsichtig */
                0 0 0 1px oklch(85% 0.004 246 / 0.85),          /* PERMANENTER feiner Silberrand */
                0 0 18px 3px transparent;                       /* Aura-Slot (aus) */
}
.btn-primary:hover {
    background: transparent;                     /* durchsichtig halten — Hover lebt in Aura + Rand */
    color: var(--text);
    border-color: oklch(90% 0.004 246);          /* Rand einen Tick heller */
    box-shadow: inset 0 0 14px 0 oklch(84% 0.004 246 / 0.40),  /* Edge minimal heller */
                0 0 0 1px oklch(90% 0.004 246 / 0.9),           /* Rand-Draht heller */
                0 0 18px 3px oklch(91% 0.005 246 / 0.42);       /* AURA — heller/weißer, neutral */
}
.btn-ghost {
    background: oklch(98.5% 0.002 246 / 0);       /* leer */
    color: var(--text);
    border: 1px solid oklch(84% 0.004 246);       /* definiert, aber dezenter als Primary */
    backdrop-filter: none;
    box-shadow: inset 0 0 14px 0 transparent,                  /* kein Inset (leer) */
                0 0 0 1px oklch(85% 0.004 246 / 0.55),          /* PERMANENTER Rand, dezenter */
                0 0 18px 3px transparent;                       /* Aura-Slot (aus) */
}
.btn-ghost:hover {
    background: oklch(98.5% 0.003 246 / 0.40);     /* zarte Füllung fadet ein = „aufhellen" */
    color: var(--text);
    border-color: oklch(90% 0.004 246);
    box-shadow: inset 0 0 14px 0 oklch(82% 0.004 246 / 0.26),  /* leichte Edge mit der Füllung */
                0 0 0 1px oklch(90% 0.004 246 / 0.75),          /* Rand-Draht heller */
                0 0 18px 3px oklch(91% 0.005 246 / 0.38);       /* AURA — heller/weißer, neutral */
}

/* ── Punkt 9 (Marc): Text-CTA mit verschwindendem Unterstrich statt Kasten-Button.
   Gleiches Dissolve-Pattern wie die Kachel-Titel (Empfang/Terrazzo): im Ruhezustand
   unterstrichen, auf Hover löst sich der Strich auf — sonst bewegt sich nichts.
   Gilt NUR für die textlichen CTAs; Formular-Senden-Button + Tel/Mail bleiben Buttons. */
/* Text-CTAs in der DISPLAY-Schrift — Marcs Notiz „Eigenes Möbel anfragen
   (in Saveur)" (Texte3) und sein Typo-Vergleich (08/2026) zeigen alle CTAs so.
   SaveurSans ist caps-only, text-transform daher überflüssig; die alte
   0.13em-Lato-Sperrung war genau die von ihm gestrichene Setzung. */
.link-cta {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-display);
    font-size: var(--type-display-s);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
    text-decoration: none;
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    padding: 0 0 0.1em;   /* Marc: gleicher Unterstrich-Abstand wie die Objekt-Titel */
    /* Der sichtbare Abstand Wort↔Linie ist halber Durchschuss + Padding. Ohne
       eigene line-height erbt der CTA die Fließtext-Höhe 1.55 → 10 px statt der
       5,3 px beim Objekt-Titel. Gleiche Zeilenhöhe = gleicher Abstand. */
    line-height: 1.2;
    cursor: pointer;
    transition: border-bottom-color 0.3s var(--ease-pompa);
}
.link-cta:hover {
    border-bottom-color: transparent;
}
/* Telefonnummer und Mail-Adresse tragen dieselbe Klasse, sind aber Kontaktdaten
   und kein CTA. In Marcs Wir-Sektion stehen beide als NORMALER Fließtext
   (12 pt Lato-Light) — also Lesefassung ohne Kaps, Sperrung und Fettung.
   Der Unterstrich von .link-cta bleibt als Link-Signal. */
.link-cta[href^="tel:"],
.link-cta[href^="mailto:"] {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    font-weight: 300;
    letter-spacing: normal;
    text-transform: none;
}

/* ===========================================================================
   EDITIONEN (Mainpage) — 1:1 nach Marcs Entwurf (Mainpage-Editionen.pdf).
   Content-Breite 1400 = Referenz; alle Maße als % davon → Komposition skaliert
   proportional. Desktop = asymmetrische absolute Komposition (Produkt links,
   Video rechts versetzt, Badge auf dem Produkt, Full-Width-Detail darunter).
   Mobile = sauber gestapelt.
   =========================================================================== */
.editionen-section .edition-block + .edition-block {
    margin-top: clamp(5rem, 9vw, 8rem);   /* normaler Sektions-Abstand, nicht PDF-1:1 */
}
/* Award-Zeile — jetzt identisch zur Editionen-Unterseite (.edition-award-line):
   Marcs Texte1 setzt sie klein in Lato unter die Headline, nicht als große
   Saveur-Kapitälchen-Zeile darüber. Die Regel bleibt für Alt-Markup erhalten. */
.edition-award {
    display: block;
    font-family: var(--font-sans);
    text-transform: none;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
}
.edition-eyebrow { display: block; margin-bottom: 1.2rem; }
/* Eyebrow-Strich wie in Marcs PDFs („— EDITION" / „— KÜCHE") */
.edition-eyebrow::before,
.project-header .label::before {
    content: "";
    display: inline-block;
    width: 1.9em;
    height: 1px;
    background: currentColor;
    vertical-align: middle;
    margin-right: 0.65em;
}
.edition-headline {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-variation-settings: 'opsz' 96, 'wght' 400;
    font-size: var(--type-display-l);
    line-height: 1.02;
    letter-spacing: -0.005em;
    margin: 0;
}
/* Marcs Anordnungs-PDF (08/2026): Bild+Video eröffnen den Block, darunter der
   Beschreibungsteil. Headline+Award leben in der LINKEN Grid-Zelle, damit die
   Zeichnungen-Spalte auf Headline-Höhe beginnt („Zeichnungen höher", 13.08.). */
.edition-block .edition-hero + .edition-specs {
    margin-top: clamp(3rem, 6vw, 5.5rem);
}
.edition-specs-text .edition-headline + .edition-body,
.edition-specs-text .edition-award-line + .edition-body {
    margin-top: clamp(1.6rem, 2.6vw, 2.4rem);
}
.edition-body {
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    line-height: 1.55;
    font-weight: 300;
    color: var(--text-body);
    max-width: 52ch;
    margin-top: clamp(1rem, 1.6vw, 1.5rem);
}

/* ── Editionen-Subpage: Specs-Layout nach Marcs Texte5-PDF (08/2026) ──
   Headline → kleine Award-Zeile → Text links / Maßzeichnungen rechts →
   Material → Downloads. Die große .edition-award-Zeile bleibt für den
   Index-Teaser erhalten. */
.edition-award-line {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--text);
    margin-top: clamp(1rem, 1.6vw, 1.4rem);
}
.edition-specs {
    margin-top: clamp(1.3rem, 2.2vw, 2rem);
}
@media (min-width: 768px) {
    .edition-specs {
        display: grid;
        grid-template-columns: minmax(0, 52fr) minmax(0, 40fr);
        column-gap: clamp(2.5rem, 6vw, 6rem);
        align-items: start;
    }
}
.edition-specs .edition-body { margin-top: 0; }
.edition-specs .edition-body + .edition-body { margin-top: clamp(0.8rem, 1.2vw, 1.1rem); }
.edition-dl-link {
    font-family: var(--font-sans);
    font-size: 1.06rem;
    font-weight: 300;
    color: var(--text-soft);
    letter-spacing: 0.01em;
    text-decoration: none;
    align-self: flex-start;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 0.1em;
    transition: color 0.35s var(--ease-pompa), border-color 0.35s var(--ease-pompa);
}
.edition-dl-link:hover {
    color: var(--text);
    border-color: currentColor;
}
.edition-specs-drawings {
    margin-top: clamp(2.2rem, 4vw, 3rem);    /* mobile: Luft nach dem Downloads-Block */
}
@media (min-width: 768px) {
    /* bündig mit der Oberkante der Bodycopy (Marc) */
    .edition-specs-drawings { margin-top: 0; }
}
.edition-specs-drawings img {
    /* PNGs sind echt transparent (weiß → Alpha) — kein mix-blend-mode nötig,
       der würde im Stacking-Context des Reveal-Systems (translateY(0)) kappen. */
    display: block;
    max-width: 100%;
    height: auto;
}
.edition-specs-drawings img + img { margin-top: clamp(1.4rem, 2.4vw, 2.2rem); }

/* Marc 08/2026: „Linien mittig, und das untere proportional zum oberen."
   Beide Zeichnungen eines Produkts stammen aus DERSELBEN PDF-Seite mit gleichem
   Render-Maßstab — gleiche Skala heißt darum: Anzeigebreiten im Verhältnis der
   natürlichen Pixelbreiten. Dann stimmt das Größenverhältnis der Objekte.
     Ateliertisch  Front 1642 px : Seite 1357 px  → 100 % : 82,6 %
     Baumscheibe   groß 1017 px : klein  893 px  → 100 % : 87,8 %
   Die alten Pauschalbreiten (76 % / 58 %) galten paarübergreifend und haben die
   Maßstäbe deshalb verzerrt. */
.edition-specs-drawings img { margin-inline: auto; }
#ateliertisch .edition-specs-drawings img:nth-of-type(1) { width: 100%; }
#ateliertisch .edition-specs-drawings img:nth-of-type(2) { width: 82.6%; }
#baumdruck    .edition-specs-drawings img:nth-of-type(1) { width: 100%; }
#baumdruck    .edition-specs-drawings img:nth-of-type(2) { width: 87.8%; }

/* ── Hero-Komposition (Produkt + Video + Badge) ──
   Auf .edition-block gescoped: einzelstuecke.html hat eine eigene alte
   `section.edition-hero` (GDA-Block, subpage.css) — die darf die Kompositions-
   Geometrie (aspect-ratio!) NICHT erben. */
.edition-block .edition-hero {
    margin-top: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    /* mobil dieselbe Gasse wie die Galerie darunter (Marc 13.08.: nichts klebt) —
       am Desktop irrelevant, dort ist der Hero absolut komponiert */
    gap: clamp(2.5rem, 4.4vw, 5.3rem);
}
.edition-hero-product {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 660 / 918;
}
.edition-hero-product picture,
.edition-hero-product img:not(.edition-badge) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.edition-badge {
    position: absolute;
    top: 4%;
    left: 70%;
    width: 19%;
    height: auto;
    z-index: 3;
}
.edition-hero-video {
    overflow: hidden;
    aspect-ratio: 424 / 592;
}
.edition-hero--baumdruck .edition-hero-video { aspect-ratio: 660 / 442; }
.edition-hero-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.edition-wide {
    position: relative;
    display: block;
    overflow: hidden;
    margin-top: clamp(1rem, 2vw, 1.75rem);
    aspect-ratio: 1400 / 918;
}
.edition-wide picture { display: contents; }
.edition-wide img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── klickbare Editionen-Bilder: weißer Veil wie der Rest der Seite ── */
.edition-hero-product::after,
.edition-wide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.35s var(--ease-pompa);
}
.edition-hero-product:hover::after,
.edition-wide:hover::after {
    opacity: 0.12;
    transition: opacity 0.2s var(--ease-pompa);
}

/* ── Desktop: asymmetrische absolute Komposition (1:1 zu Marcs Maßen) ── */
@media (min-width: 768px) {
    .edition-block .edition-hero {
        position: relative;
        display: block;
        aspect-ratio: 1400 / 918;
    }
    .edition-hero-product {
        position: absolute;
        left: 0;
        top: 0;
        width: 47.143%;              /* 660/1400 */
        height: 100%;
        aspect-ratio: auto;
    }
    .edition-badge {                  /* relativ zum Produkt: x492, w113, von 660 */
        top: 0.2%;
        left: 74.55%;
        width: 17.12%;
    }
    .edition-hero-video {
        position: absolute;
        left: 61.43%;                /* 860/1400 */
        top: 17.76%;                 /* 163/918 */
        width: 30.29%;               /* 424/1400 */
        height: 64.49%;              /* 592/918 */
        aspect-ratio: auto;
    }
    .edition-hero--baumdruck .edition-hero-video {
        left: 53%;                   /* 742/1400 */
        top: 23.64%;                 /* 217/918 */
        width: 47.143%;              /* 660/1400 */
        height: 48.15%;              /* 442/918 */
    }
}

/* ===== EDITION — MATERIAL-Zeile (PDF2) =====
   PDF Juli 2026: Haarlinie über dem MATERIAL-Block (volle Content-Breite),
   Label 15px Lato-Regular dunkel, Wert 18px Lato-Light. */
.edition-meta {
    margin-top: clamp(1.8rem, 3.4vw, 3.3rem);
    padding-top: clamp(0.9rem, 1.6vw, 1.4rem);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.edition-meta-label {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
}
.edition-meta-value {
    font-family: var(--font-sans);
    font-size: 1.06rem;
    font-weight: 300;
    color: var(--text-soft);
    letter-spacing: 0.01em;
}
/* Editionen-Subpage: Body läuft volle Content-Breite (PDF Juli 2026 — der
   Fließtext bricht erst an der Content-Kante, nicht bei 52ch). */
.edition-showcase .edition-body { max-width: none; }

/* ===== EDITION-GALERIE — Anordnung 1:1 nach Marcs Projektseiten-PDF.
   Läuft in Container-Breite (wie Komposition + edition-wide), KEIN Breakout —
   im PDF fluchten alle Galerie-Bilder mit der Content-Kante. Leerräume folgen
   unserem Standard-Rhythmus (Timo: PDF-Weißraum nicht 1:1 übernehmen). ===== */
.edition-gallery {
    margin-top: clamp(2.5rem, 4.4vw, 5.3rem);
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 4.4vw, 5.3rem);     /* PDF Juli 2026: uniforme ~86px-Gassen auf 1400 */
}
.edition-gallery .gal-item { margin-bottom: 0; }   /* Masonry-Abstand hier ohne Funktion */
.eg-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6.5%;              /* PDF: ~91px Gasse auf 1400 Content */
    align-items: center;           /* Quer neben Hoch = vertikal zentriert (PDF) */
}
.eg-row--tri {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 6.3%;              /* PDF: 88px Gasse, Dreierreihe 406er-Kacheln */
}
.eg-row--r3r {
    align-items: stretch;          /* Anker-Hochformat definiert die Reihenhöhe */
}
.eg-row--r3r .eg-stack {
    display: flex;
    flex-direction: column;
    justify-content: space-between;   /* Stapel füllt die Anker-Höhe, Luft mittig (PDF) */
}

/* ── Slot-Formate 1:1 aus Marcs Projektseiten-PDF (Module auf 1400er-Content):
   Halb-Hoch 656x916 · Halb-Quer 655x437 · Voll 1397x916 · Dreier 406x620.
   Die Boxen croppen randlos (cover) wie Marcs InDesign-Rahmen. ── */
.gal-item.eg-p { aspect-ratio: 656 / 916; }
.gal-item.eg-l { aspect-ratio: 655 / 437; }
.gal-item.eg-f { aspect-ratio: 1397 / 916; }
.gal-item.eg-t { aspect-ratio: 406 / 620; }
:is(.eg-p, .eg-l, .eg-f, .eg-t) picture { display: contents; }
:is(.eg-p, .eg-l, .eg-f, .eg-t) img {
    width: 100%;
    height: 100% !important;   /* schlägt das galerie-eigene height:auto */
    object-fit: cover;
}
/* Freisteller-Variante (Zeitmesser): natürliche Proportion, mittig in der
   Halbspalte, kein Crop — exakt Marcs Platzierung (620 breit in 656er-Spalte). */
.gal-item.eg-p--contain { background: transparent; }
.eg-p--contain img { object-fit: contain; }

@media (max-width: 767px) {
    /* Marc 13.08.: „mobil kleben die Bilder zusammen" — einspaltig gestapelte
       Reihen bekommen dieselbe Gasse wie zwischen den Reihen (.edition-gallery),
       damit der vertikale Rhythmus uniform ist statt 16px/40px im Wechsel. */
    .eg-row,
    .eg-row--r3r { grid-template-columns: 1fr; row-gap: clamp(2.5rem, 4.4vw, 5.3rem); }
    /* Dreierreihe bleibt 2-spaltiges Raster — Gassen symmetrisch (row = column). */
    .eg-row--tri { grid-template-columns: 1fr 1fr; column-gap: clamp(0.6rem, 2vw, 1rem); row-gap: clamp(0.6rem, 2vw, 1rem); }
    .eg-row--r3r .eg-stack { gap: clamp(2.5rem, 4.4vw, 5.3rem); }
}

/* ===== EDITIONEN — Zusammenarbeit-Split (Montage-Video links, Copy rechts) ===== */
.editionen-collab-grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
@media (min-width: 860px) {
    .editionen-collab-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.editionen-collab-media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bg-paper);
}
.editionen-collab-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.editionen-collab-text {
    max-width: 40rem;
}
.editionen-collab-text .label {
    margin-bottom: clamp(1rem, 1.6vw, 1.3rem);
}

/* ── Trennung statt Schatten: 1px-Haarlinien NUR auf echten Flächen-Karten.
   Bild-Tiles bleiben randlos (Pompa) — das Foto trägt seine eigene Kante. ─── */
.ob-form-wrapper,
.kontakt-card,
.review-card {
    border: 1px solid var(--border);
}

/* ── Bild-Hover: ZERO (Pompa). Bilder reagieren NIE auf Hover — Original-Zoom
   (scale) + Cross-Dim neutralisiert. Hover lebt ausschließlich in der Schrift. */
.split-tile:hover .split-tile-bg img,
.galerie-strip-item:hover img,
.editionen-intro-image:hover .editionen-intro-img-frame img,
.teaser-tile:hover .teaser-tile-image img {
    transform: none;
    filter: none;
}
@media (hover: hover) and (min-width: 1024px) {
    .split-grid:hover .split-tile:not(:hover) .split-tile-bg img {
        filter: none;
    }
}

/* ── „Zwei Welten"-Bereiche: gleicher weißer Schleier wie die anderen Bilder
   (teaser-tile, galerie-strip) — Marc-Standard. Veil über dem ganzen Tile, ABER
   unter dem Text: z-index 2 < .split-tile-content (z-index 3), damit die Schrift
   scharf bleibt. Werte identisch zur Homepage: #fff, opacity 0 → 0.10, 0.3s ease-pompa. */
.split-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.35s var(--ease-pompa);
}
.split-tile:hover::after {
    opacity: 0.15;
}
/* ── Split-Tile-Titel: KEIN Unterstrich (user-Wunsch 2026-06-17). Der Dissolve-Underline
   bleibt nur auf Teaser-Kacheln + Galerie-Captions, NICHT hier in der „Zwei Welten"-Split. */

/* ── Teaser-Titel: Pompa-Unterstrich — DAUERHAFT unterstrichen im Ruhezustand, und
   beim Hover LÖST SICH der Strich auf (genau wie davidpompa.com: Content-Tile-Titel
   `border-bottom-color` currentColor → transparent über transition 0.5s ease — live
   am Original verifiziert). Läuft parallel zum weißen Veil auf dem Bild. Der Rest-
   Strich ist zugleich der Klick-Hinweis auf Mobile (kein Hover dort → bleibt sichtbar). */
.teaser-tile-body h3 {
    align-self: flex-start;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.12em;
    /* Basis = OUT (Wiedererscheinen) — minimal weicher/länger, NICHT gespiegelt. */
    transition: border-bottom-color 0.4s var(--ease-pompa);
}
.teaser-tile:hover .teaser-tile-body h3 {
    border-bottom-color: transparent;
    /* :hover = IN (Auflösen) — schneller (Marc). */
    transition: border-bottom-color 0.3s var(--ease-pompa);
}

/* ── Reveal-System → Scroll-Timeline (Apple-Stil) ────────────────────────────
   Basis = sichtbar. Das ist zugleich der Fallback für Browser ohne
   animation-timeline (Safari teils 2026) UND der reduced-motion-Zustand.
   Transition NICHT anfassen — sonst sterben Komponenten-Hovers auf .reveal-Elementen. */
.reveal,
.reveal-fog {
    opacity: 1;
    transform: none;
    filter: none;
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .reveal,
        .reveal-fog {
            animation: pompa-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 38%;
        }
    }
}
@keyframes pompa-reveal {
    /* Ruhe-Tuning: minimaler Hub (6px statt 26px) + sehr hoher Fade-Boden (0.65)
       → Bilder sind beim Entry schon fast voll da, nur ein Hauch Aufhellen + Setzen. */
    from { opacity: 0.65; transform: translateY(6px); }
    to   { opacity: 1;    transform: translateY(0); }
}

/* ── Pompa: zarter weißer Schleier auf klickbaren Bildern (Klick-Hinweis) ───
   Ersetzt das „Signal hier-klickbar", das bei harten Kanten ohne Schatten fehlt.
   Sehr niedrig + langsam = edel und ruhig, nicht aufdringlich.
   Tuning-Werte: opacity 0.08 (Stärke), 0.6s (Tempo). */
.teaser-tile-image,
.galerie-strip-item {
    position: relative;
}
.teaser-tile-image::after,
.galerie-strip-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.35s var(--ease-pompa);
}
.teaser-tile:hover .teaser-tile-image::after,
.galerie-strip-item:hover::after {
    opacity: 0.15;
    transition: opacity 0.2s var(--ease-pompa);   /* Hover-IN bleibt responsiv; der OUT (Basis) ist 0.5s = sanfter (Marc) */
}

/* ── Navbar-Hover: „Hover hellt auf" (Marc wörtlich) ─────────────────────────
   Marc: „Farbänderung, heller" beim Hover + aktiver Bereich „hervorgehoben durch
   (hellere) Farbänderung". Drei lesbare Stufen in der Silber-Familie (Hue 245):
   Ruhe near-black → Hover lesbares Silber + sanfter Glow → Aktiv helles Silber +
   starkes Leuchten. DER GLOW TRÄGT DIE LESBARKEIT: der Header schwebt im gescrollten
   Zustand transparent über wechselnden Gründen (Creme oben, graue/dunkle Bilder beim
   Scrollen) — ein mittleres Silber allein hat dort zu wenig Kontrast. Der Licht-Halo
   gibt lokalen Kontrast unabhängig von der Hintergrund-Helligkeit, so bleibt der Hover
   lesbar, OHNE so hell wie der aktive Punkt zu werden.
   Reihenfolge = Kaskade (active gewinnt, auch beim Hover über dem aktiven Punkt). */
.nav-links a {
    color: oklch(10% 0.012 58);        /* Max-Schwarz (warmer Hauch statt kaltem #000) → durchgängig lesbar über dem transparenten Header */
    transition: color 0.25s ease, text-shadow 0.25s ease;
}
.nav-links a:hover {
    color: oklch(60% 0.016 245);   /* dunkler als zuvor (Marc: runter mit %) — ruhiges, flaches Silber */
    text-shadow: none;             /* Leuchten raus (Marc) — der Glow gehört jetzt exklusiv dem aktiven Punkt */
}
.nav-links a.active {
    /* Aktiv = HELLSTE Stufe, OHNE Leuchten (Timo 26.06.: Glow raus — flacher Pompa-Stil).
       Hierarchie bleibt: Ruhe (near-black) < Hover (Silber 60%) < Aktiv (helles Silber 72%).
       Sichtbarkeit trägt allein der Kontrast zu den near-black Nachbarn. */
    color: oklch(72% 0.020 248);
    text-shadow: none;
}

/* Nav-Schrift: durchgängig SaveurSansLight (var(--font-display), vom Base-Font geerbt).
   KEIN Font-Wechsel beim Scrollen — font-family ist nicht animierbar, der Sprung
   ließe sich nicht ruhig/unsichtbar lösen (Cross-Fade → Geister-Doppelung, Blur →
   Wisch-Moment). Lesbarkeit trägt die near-black-Ruhefarbe (max Kontrast). */

/* ============================================================
   3-STUFIGER HEADER (Marc, PDF web-01/05/07)
   Stufe 1 (oben):           Bar (cream + Haarlinie) + Wortmarke + Nav
   Stufe 2 (gescrollt runter): KEINE Bar, transparent, nur Tanne, keine Nav
   Stufe 3 (gescrollt hoch):   KEINE Bar, transparent, Tanne + Nav
   → Die Bar ist NUR oben da. JS schaltet .scrolled / .nav-collapsed /
     .nav-hide-links. Letzter Block in der Kaskade → gewinnt über die
     früheren .nav.scrolled- und body[data-page=subpage]-Regeln.
   ============================================================ */
.nav,
body[data-page="subpage"] .nav {
    background: var(--bg);
    backdrop-filter: none;
    box-shadow: none;
    border-bottom: 1px solid var(--border);
    /* Bar ruhig aus-/einblenden (sanftes Easing, längere Dauer) */
    transition: background var(--dur-header) var(--ease-soft),
                border-color var(--dur-header) var(--ease-soft),
                padding var(--dur-header) var(--ease-soft);
}
.nav.scrolled,
body[data-page="subpage"] .nav.scrolled {
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    border-bottom-color: transparent;
    padding: 0.5rem 0;
}
/* Punkt 1 (Marc): Tanne im gescrollten/kompakten Zustand tiefer setzen — war zu
   nah am oberen Rand. translateY verschiebt optisch ohne den Header zu vergrößern
   (margin-top würde die Brand-Box und damit die Header-Höhe aufblähen) und animiert
   sauber mit. ~16px = Icon-Mitte fluchtet mit der Nav-Linie. */
.nav-brand-icon {
    transition: transform var(--dur-header) var(--ease-soft);
}
.nav.scrolled .nav-brand-icon {
    transform: translateY(6px);
}
@media (min-width: 960px) {
    /* Marc 08/2026: „Insta-Logo wie Kontakt behandeln, es soll wegfliegen beim
       Scrollen" — der Glyph gehört zur Menü-Ebene, also identische Transition
       und identischer Hide-Zustand wie die Menüpunkte. */
    .nav-links,
    .nav-insta {
        transition: opacity var(--dur-header) var(--ease-soft),
                    transform var(--dur-header) var(--ease-soft),
                    color 0.4s ease;
    }
    /* Stufe 2 (runter): Menüpunkte weg. Stufe 1 & 3: sichtbar. */
    .nav.nav-hide-links .nav-links,
    .nav.nav-hide-links .nav-insta {
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
    }
}

/* ===========================================================================
   OBJEKT-ÜBERSICHT — kompaktes Raster aller Objekte (wie zimmerhackl.eu),
   sitzt zwischen Intro und Detail-Abschnitten, klickbar → Ankersprung (JS-Handler
   #-Links mit nav-offset). Übernimmt die bestehende Bild-Kachel-Sprache
   (galerie-strip-item: Radius/Depth/Glass via Tokens — in Pompa-Modus flach;
   weißer Veil-Hover + Bild-Scale) + den Dissolve-Unterstrich des Namens (teaser).
   =========================================================================== */
.object-index {
    padding-top: clamp(0.5rem, 1.5vw, 1.4rem);
    padding-bottom: clamp(1.5rem, 3.5vw, 3rem);
}
.object-index .label {
    margin-bottom: clamp(1.2rem, 2.2vw, 1.8rem);
}
/* Übersichts-Dimensionen = alter Stand VOR dem Juli-PDF (Marc 07/2026: das
   Vorschaubilder-PDF zeigte nur die BILD-AUSWAHL, nicht die Dimensionen —
   „alte Dimensionen und wieder 5 nebeneinander"). */
.object-index .container { max-width: 1760px; }

/* Hero-Copy auf Übersichts-Subpages (Einzelstücke, Küchen & Einbauten) fluchtet
   links mit den ausgebrochenen Objekt-Kacheln (1760) statt im 1400er zu hängen.
   :has(+) trifft nur Heros, denen direkt eine Objekt-Übersicht folgt —
   editionen/kontakt (ohne object-index) bleiben unberührt. */
.subpage-hero:has(+ .object-index) .container { max-width: 1760px; }
.object-index-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.75rem);
}
@media (min-width: 720px)  { .object-index-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .object-index-grid { grid-template-columns: repeat(5, 1fr); } }  /* Marc: 5 nebeneinander */

.object-tile {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;                 /* = Teaser-Tile-Gap (Bild ↔ Titel) */
    text-decoration: none;
}

/* Bildrahmen — gleiche Sprache wie .galerie-strip-item */
.object-tile-frame {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-paper);
    box-shadow: var(--depth-soft);
    transition: box-shadow var(--dur-medium) var(--ease);
}
.object-tile-frame::before {                 /* Glass-Highlight (Pompa: none) */
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-highlight);
    pointer-events: none;
    z-index: 1;
}
.object-tile-frame::after {                   /* weißer Veil beim Hover */
    content: '';
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.35s var(--ease-pompa);
}
.object-tile-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.object-tile:hover .object-tile-frame { box-shadow: var(--depth-hover), var(--depth-glow); }
.object-tile:hover .object-tile-frame::after { opacity: 0.15; transition: opacity 0.2s var(--ease-pompa); }   /* Veil wie die anderen Bild-Hovers; KEIN Zoom; IN 0.3s, OUT 0.5s (sanfter) */

/* Name unter dem Bild — Dissolve-Unterstrich (Ruhe = unterstrichen, Hover = löst sich) */
.object-tile-name {
    align-self: flex-start;
    font-family: var(--font-display);
    font-size: var(--type-display-s);
    font-variation-settings: 'opsz' 36, 'wght' 400;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text);
    margin: 0;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.1em;
    transition: border-bottom-color 0.4s var(--ease-pompa);
}
.object-tile:hover .object-tile-name { border-bottom-color: transparent; }

/* ===========================================================================
   TEASER-KARUSSELL (Einzelstücke) — 2 Blöcke (4+3), Dot-Navigation, scroll-snap.
   Ruhig/edel: KEIN Autoplay, weiches Einrasten (scroll-snap + smooth), Dots als
   Blöcke. Desktop ≥1180 = horizontales Karussell; darunter stapeln die Blöcke als
   Grid (kein horizontales Scrollen, Dots aus). Tiles = bestehende .teaser-tile.
   =========================================================================== */
.teaser-carousel {
    display: block;                         /* Mobil/Tablet: Blöcke stapeln */
}
.teaser-carousel .teaser-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.75rem);
}
.teaser-carousel .teaser-page + .teaser-page {
    margin-top: clamp(1rem, 2vw, 1.75rem);
}
@media (min-width: 720px) {
    .teaser-carousel .teaser-page { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1180px) {
    .teaser-carousel {
        display: flex;
        overflow-x: auto;
        align-items: flex-start;            /* Blöcke OBEN-bündig (war bottom-aligned → versetzt) */
        gap: clamp(1rem, 2vw, 1.75rem);     /* Abstand ZWISCHEN den Blöcken = wie Kachel-Gap */
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;              /* Firefox */
        -ms-overflow-style: none;           /* alte Edge */
    }
    .teaser-carousel::-webkit-scrollbar { display: none; }   /* Webkit — Dots tragen die Nav */
    .teaser-carousel .teaser-page {
        flex: 0 0 100%;
        scroll-snap-align: start;
        grid-template-columns: repeat(4, 1fr);
        align-content: start;               /* 3-er-Block (Seite 2) oben/links bündig */
    }
    /* Mobile-Stapel-Margin killen (höhere Spezifität als margin-top:0 oben) — sonst
       sitzt Block 2 im Flex 28px tiefer (vertikaler Versatz). */
    .teaser-carousel .teaser-page + .teaser-page {
        margin-top: 0;
    }
    /* Caption auf 2 Zeilen reservieren → ALLE Tiles exakt gleich hoch → beide Blöcke
       identische Höhe (sonst variiert die Höhe mit der Beschreibungslänge 1 vs 2 Zeilen). */
    .teaser-carousel .teaser-tile-body p {
        min-height: 3rem;
    }
}

/* Dot-Bar — nur im Desktop-Karussell sichtbar (Mobil: Blöcke stapeln, keine Dots) */
.teaser-dots {
    display: none;
    justify-content: center;
    gap: 0.7rem;
    margin-top: clamp(1.6rem, 2.6vw, 2.2rem);
}
@media (min-width: 1180px) {
    .teaser-dots { display: flex; }
}
.teaser-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid var(--ob-silver-border);
    background: transparent;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.teaser-dot:hover { border-color: var(--ob-silver-line); }
.teaser-dot.is-active {
    background: var(--ob-silver-line);
    border-color: var(--ob-silver-line);
}
/* Abstand Dots → CTA-Button (klebte sonst). Scoped auf den CTA NACH den Dots, damit
   der Küchen-Teaser (.teaser-grid mit eigenem margin-bottom) nicht doppelt Abstand bekommt.
   Gilt auch mobil (Dots display:none, Adjazenz bleibt) → Karussell→Button bekommt Luft. */
.teaser-dots + .teaser-cta {
    margin-top: clamp(2.4rem, 4vw, 3.4rem);
}
@media (prefers-reduced-motion: reduce) {
    .teaser-carousel { scroll-behavior: auto; }
}

/* ===========================================================================
   REVIEWS-FADE-BÜHNE — eine echte Google-Rezension nach der anderen (Crossfade
   alle 5s, Pause bei Hover), klickbar zur Original-Rezension. Ruhig/beweis-artig:
   Google-Badge VOR dem Zitat (echte Rezension, kein Marketing), zurückhaltende
   Größe statt Riesen-Hero. Grid-Stacking → Bühne = höchstes Zitat, kein Springen.
   =========================================================================== */
/* Breiter ziehen — raus aus dem schmalen Block, ~4cm-Seitenränder (responsiv, nicht
   wortgenau). Betrifft Top-Block + Bühne (beide .container--narrow in #reviews). */
.reviews-section .container--narrow {
    max-width: var(--container-max);   /* gleicher 1400-Container wie der Rest → linke Kante fluchtet */
    padding-inline: var(--container-pad);
}
.reviews-stage {
    display: grid;
    margin-top: clamp(2.2rem, 4vw, 3.4rem);
}
.reviews-quote {
    grid-area: 1 / 1;                       /* alle Zitate in derselben Zelle gestapelt */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.3rem, 2.2vw, 1.9rem);
    text-align: center;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    /* Weicher, ruhiger Crossfade — länger + sanfte ease-in-out-Kurve (slow-in/slow-out)
       statt expo-out → dezentes Auf-/Abblenden, passend zum edlen Charakter. */
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.reviews-quote.is-active {
    opacity: 1;
    pointer-events: auto;
}
.reviews-google-g { display: block; flex-shrink: 0; width: 22px; height: 22px; }
.reviews-quote-text {
    margin: 0;
    /* Inter statt Light-Display: ein langes Zitat braucht in groß mehr Substanz +
       Lesbarkeit — SaveurSansLight (Light) wirkt bei der Länge zu dünn. Inter ist die
       etablierte Text-Schrift der Seite (passt), Headline bleibt Light → Hierarchie. */
    font-family: var(--font-sans);
    font-size: clamp(1.4rem, 2.35vw, 2.2rem);
    /* NICHT auf 100 (Hairline) zurückdrehen: bei dem Schnitt sind die Striche so dünn,
       dass das Antialiasing sie aufhellt — der Text liest silbrig, während Punkte und
       Kommata als kleine Vollflächen die echte Farbe zeigen. Der sichtbare Hell-Dunkel-
       Unterschied im selben Satz kommt also von der Strichstärke, nicht von der Farbe.
       300 ist der leichteste Schnitt, der bei dieser Größe die volle Farbe trägt. */
    font-weight: 300;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.005em;
    color: var(--text-body);
    max-width: 52ch;                             /* Inter läuft breiter als die Serife → mehr ch fürs gleiche Zeilenmaß */
    text-wrap: balance;
}
.reviews-quote-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}
.reviews-quote-author {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 300;                            /* meta-Text braucht etwas mehr Strich als das Hairline-Zitat */
    font-size: 1.15rem;
    color: var(--text-soft);
    letter-spacing: 0.01em;
    transition: color 0.3s var(--ease);
}
.reviews-quote-author::before { content: "– "; }   /* Signatur-Strich (user) */
.reviews-quote-date {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
/* Klick-Cue (statt „Auf Google lesen"): ganzes Zitat ist klickbar → Cursor + dezenter
   Hover (Autorname in Akzent). Kein Label nötig (user). */
.reviews-quote { cursor: pointer; }
.reviews-quote:hover .reviews-quote-author { color: var(--accent-deep); }

@media (prefers-reduced-motion: reduce) {
    .reviews-quote { transition: none; }
}