/* ===================================================================
   KONFEKTORY — UNTERSEITEN-DESIGN-SYSTEM  ·  "Patisserie-Atelier"
   Salbeigrün (primär) + Gold (feiner Akzent) · modern & clean · hell
   -------------------------------------------------------------------
   Basis-Stylesheet: Tokens, Nav, Footer, Buttons, Reveal — von ALLEN Seiten
   geladen, auch von der Startseite.
   Die Unterseiten (/sortiment · /torten · /anlasstorten · /ueber-kristina ·
   /kontakt · /impressum · /datenschutz · /agb) brauchen darüber hinaus nichts.
   Die Startseite lädt danach home.css und baut damit ihren dunklen Hero
   ("Die Sortentafel"); sie überschreibt dort u.a. die Nav-Farben, solange
   diese transparent über dem dunklen Grund liegt.

   Deploy-Konvention (für Builder):
     · diese Datei nach  site/assets/css/pages.css
     · Fonts nach        site/assets/fonts/*.woff2   (self-hosted, DSGVO)
     · @font-face-url()  löst relativ zur CSS-Datei auf → "../fonts/…"

   Regeln aus second-brain berücksichtigt: Fonts self-hosted (M20),
   --on-accent-Tokens (M17), Leerzeichen um +/− in clamp/calc (M18),
   overflow-x:clip statt hidden (M3), <a class=btn> mit expliziter
   Hover-Farbe + Container-Regeln :not(.btn) (M28/M31), Sticky-Header
   bei Overlay fixiert (M27), min-width:0 gegen Overflow (M2/M22).
   =================================================================== */

/* ============ 1 · SELF-HOSTED FONTS (WOFF2, kein Google-CDN) ======== */
/* Fraunces = Display-Serife (warm, Soft-Achse, KEIN Didone) — Marken-
   Kontinuität zur Home. Figtree = humanistische Groteske (Body/UI/Preise,
   voller ä/ö/ü/ß). Nur die real gebrauchten Schnitte einbinden. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/Fraunces-Regular.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/Fraunces-Italic.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/Fraunces-Medium.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500;font-display:swap;
  src:url("../fonts/Fraunces-MediumItalic.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/Figtree-Light.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/Figtree-Regular.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/Figtree-Medium.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/Figtree-SemiBold.woff2") format("woff2")}

/* ============ 2 · TOKENS ============ */
:root{
  /* --- Neutrals: warmes Off-White + Sand (viel Weißraum, "clean") --- */
  --porcelain:#FBFAF6;   /* Seitengrund (warmes Weiß) */
  --paper:#FFFFFF;       /* Karten / Formularfelder */
  --sand:#F3EFE4;        /* warme Alt-Fläche / Cream-Band */
  --sand-deep:#EAE3D2;   /* tieferer Sand / Blockflächen */
  --hairline:#E6E1D4;    /* warme 1px-Kante */
  --hairline-sage:#D6E0D1;/* salbei-getönte Kante */

  /* --- Salbeigrün: Primär / Marke (gedämpft-modern, KEIN Teal-Mint) --- */
  --sage-wash:#EBF1E9;   /* hellster Tint: Wash hinter Eyebrows / Sektionsgrund */
  --sage-100:#DBE6D8;
  --sage-200:#C1D2BD;    /* Deko: Diagramm-Balken hell, Ring */
  --sage-300:#A6BCA0;    /* Deko */
  --sage-400:#7E9878;    /* Mid-Sage: aktive Hairline, Icons */
  --sage-500:#5E7B57;    /* Marken-Sage mid (nur große Schrift / Flächen) */
  --sage-600:#4A6544;    /* PRIMÄR: CTA-Füllung + Links (AA auf Weiß ~5.9:1) */
  --sage-700:#3A5136;    /* Headlines / Ink-Sage auf hell (~8:1) */
  --sage-800:#293A26;    /* dunkle Bühne (Bänder, on = Off-White) */
  --sage-900:#1C271A;    /* tiefste Fläche (Footer / Deep-Sektion) */

  /* --- Gold: EIN feiner Akzent (Haarlinien, Zahlen, Rahmen, Hover) --- */
  --gold:#B48A4A;        /* der Akzent (Deko: Hairlines, Icon-Striche, GROSSE Zahlen ≥3:1) */
  --gold-soft:#D9C08A;   /* helles Gold (Sheen / Hairline auf dunkel) */
  --gold-deep:#7C5E2C;   /* Gold-als-Text NUR wenn nötig (AA ~5:1 auf Weiß) */
  --gold-wash:#F5EEDD;   /* zarter Gold-Tint (Badge-Fläche) */

  /* --- Rosé: gedämpfte 2. Nuance (Logo-Aquarell-Echo, SEHR sparsam) --- */
  --rose:#C67C86;        /* Macaron-"O" / Anlass-Ring / 1 Flavor-Ton */
  --rose-deep:#A0555F;   /* Rosé-Detail / kleiner Text auf hell */
  --rose-wash:#F5E6E7;   /* zarter Rosé-Tint */

  /* --- Ink / Text (warmes Salbei-Anthrazit, kein reines Schwarz) --- */
  --ink:#22271F;         /* Fließtext / Headlines default */
  --ink-soft:#4B5346;    /* Sekundärtext (AA ~7:1 auf Weiß) */
  --ink-mute:#6E7566;    /* Captions / Meta (AA ~4.6:1 auf Weiß) */

  /* --- on-accent (Text/Icon AUF Akzentflächen, nie hart #fff) --- */
  --on-sage:#FBFAF6;     /* auf sage-600/700/800/900 */
  --on-gold:#1E2A1D;     /* dunkler Ink-Sage auf Gold (AA ~4.7:1) */
  --on-rose:#FBFAF6;     /* auf rose-deep */

  /* --- Flavor-Achsen: kleiner Akzent je Sorte (Punkt / Keyline / Wash),
         NICHT als Vollfarb-Block — Karten bleiben hell & clean.
         Basis = die 4 Filter-Achsen; per-Sorte via inline --flavor überschreibbar. --- */
  --flavor:var(--sage-500);            /* Default */
  --flavor-wash:var(--sage-wash);

  /* --- Typo --- */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Figtree",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --fs-hero:clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  --fs-h1:clamp(2.2rem, 1.5rem + 3vw, 3.7rem);
  --fs-h2:clamp(1.7rem, 1.25rem + 1.9vw, 2.7rem);
  --fs-h3:clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  --fs-lead:clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --fs-body:1.0625rem;      /* 17px */
  --fs-sm:.92rem;
  --fs-xs:.8rem;
  --fs-eyebrow:.72rem;
  --lh-tight:1.06;
  --lh-body:1.65;
  --measure:66ch;           /* Lesebreite Fließtext */

  /* --- Spacing-Scale (8er-Basis, fluid für Sektionen) --- */
  --sp-1:.375rem; --sp-2:.625rem; --sp-3:1rem; --sp-4:1.5rem;
  --sp-5:2.25rem; --sp-6:3.25rem; --sp-7:4.5rem; --sp-8:6.5rem;
  --edge:clamp(1.25rem, 5vw, 8rem);              /* seitliches Rand-Padding (wie Home) */
  --section-y:clamp(4.5rem, 3rem + 6vw, 8rem);   /* vertikaler Sektions-Rhythmus */
  --wrap:1200px;            /* Content-Container */
  --wrap-narrow:820px;      /* Editorial-Textbreite */
  --wrap-wide:1440px;       /* Wide-Stufe (Galerie) */

  /* --- Radius --- */
  --r-sm:10px; --r:16px; --r-card:20px; --r-lg:28px; --r-pill:999px;

  /* --- Shadow (weich, hell, low) --- */
  --sh-sm:0 2px 10px rgba(34,39,31,.05);
  --sh:0 14px 34px -14px rgba(34,39,31,.14);
  --sh-lg:0 34px 64px -26px rgba(34,39,31,.20);
  --ring-gold:inset 0 0 0 1px var(--gold);

  /* --- Motion --- */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-inout:cubic-bezier(.65,.05,.36,1);
  --ease-settle:cubic-bezier(.16,1,.3,1);   /* softer Settle für Kipp-Karten */
  --dur-fast:.3s; --dur:.55s; --dur-slow:.9s;

  /* --- Layout --- */
  --nav-h:76px;
  --nav-h-scrolled:64px;
}

/* ============ 3 · RESET & BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:auto}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--porcelain);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video{max-width:100%;display:block;height:auto}   /* height:auto: M-Eintrag html-height-attr */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--sage-200);color:var(--ink)}
:focus-visible{outline:2px solid var(--sage-600);outline-offset:3px;border-radius:4px}

/* Headlines: Fraunces, warm, KEINE globale Farb-Erzwingung (M-Eintrag
   global-heading-color-overrides-hero) — Hero setzt Farbe kontextuell selbst */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:var(--lh-tight);
  letter-spacing:-.014em;color:var(--ink);text-wrap:balance}   /* balance: keine Wort-für-Wort-Stapelung */
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
p{max-width:var(--measure)}
strong,b{font-weight:600}
em,i{font-style:italic}

/* ============ 4 · TYPO-UTILITIES ============ */
.eyebrow{               /* Eyebrow SPARSAM einsetzen (taste-skill) */
  display:inline-block;font-family:var(--font-body);
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sage-600);
}
.eyebrow--gold{color:var(--gold-deep)}
.eyebrow--onsage{color:var(--sage-200)}
.display{font-family:var(--font-display);font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.02em}
.lead{font-size:var(--fs-lead);color:var(--ink-soft);font-weight:300;line-height:1.6;max-width:52ch}
.serif-italic{font-family:var(--font-display);font-style:italic;font-weight:400}
.price{font-family:var(--font-body);font-weight:600;font-variant-numeric:tabular-nums;color:var(--sage-700)}
.price .cur{margin-left:.1em;white-space:nowrap}   /* €-Zeichen dicht an Zahl (M-Eintrag currency) */
.muted{color:var(--ink-mute)}

/* Gold-Haarlinie als Leitmotiv (fein, edel — kein Verlauf-Overkill) */
.gold-rule{height:1px;border:0;background:var(--gold);opacity:.55;margin:var(--sp-4) 0}
.gold-rule--short{width:44px;height:1px;background:var(--gold);opacity:.8;margin:.9rem 0}

/* ============ 5 · LAYOUT / SEKTIONS-RHYTHMUS ============ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--edge)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.wrap--wide{max-width:var(--wrap-wide)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2.75rem, 2rem + 3vw, 4.5rem)}
.section-head{max-width:640px}
.section-head--center{margin-inline:auto;text-align:center}
.section-head h2{margin-top:.6rem}
.section-head p{margin-top:var(--sp-3);color:var(--ink-soft);font-weight:300}

/* Flächen-Themes (Section-BG umschalten) */
.surface-porcelain{background:var(--porcelain);color:var(--ink)}
/* Kundin-Wunsch 2026-07-16: MEHR Salbeigrün, KEIN Beige mehr — die früheren
   Sand-/Beige-Flächen sind jetzt ein weicher Salbeigrün-Grund. */
.surface-sand{background:var(--sage-100);color:var(--ink)}
.surface-sage-wash{background:var(--sage-wash);color:var(--ink)}
.surface-sage{background:var(--sage-100);color:var(--ink)}
/* Dunkle Salbei-Bühne (Deep-Band / CTA-Band): on-sage-Token, alles hell */
.surface-deep{background:var(--sage-900);color:var(--on-sage)}
.surface-deep h1,.surface-deep h2,.surface-deep h3{color:var(--on-sage)}
.surface-deep .eyebrow{color:var(--sage-200)}
.surface-deep .lead,.surface-deep p{color:rgba(251,250,246,.82)}
.surface-deep .gold-rule,.surface-deep .gold-rule--short{background:var(--gold-soft)}

/* ============ 6 · BUTTONS (Pill; <a class=btn> erbt NICHT Link-Style) === */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1.7em;border-radius:var(--r-pill);
  font-family:var(--font-body);font-weight:500;font-size:.98rem;letter-spacing:.01em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn-lg{padding:1.05em 2.3em;font-size:1.05rem}
.btn-sm{padding:.6em 1.2em;font-size:.9rem}

/* ---- Schleier: der Blick soll am CTA haengenbleiben, bevor die Maus dort ist ----
   Ein Lichtstreifen wandert alle 5,5 s einmal ueber den Button — lange Pause,
   kurzer Moment. Ein dauerpulsender Button wirkt billig und nach 20 Sekunden
   nervig; dieser hier fuehrt nur den Blick.
   Nur auf gefuellten Buttons (btn-primary / nav-cta:hover-Zustand ausgenommen):
   auf einem Outline-Button haette ein Schleier nichts, worueber er laufen kann.
   Laeuft NICHT bei Hover — dort uebernimmt der Lift, zwei Bewegungen
   gleichzeitig waeren Unruhe. */
.btn-primary{position:relative;overflow:hidden}
/* KEIN z-index:-1 — damit läge der Streifen hinter dem eigenen Hintergrund des
   Buttons und wäre unsichtbar (derselbe Fehler steckte im Scrim der
   Torten-Schichten). Er läuft bewusst ÜBER die Schrift: genau das ist der
   Glanz. pointer-events:none, damit er keine Klicks schluckt. */
.btn-primary::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.44) 50%,transparent 66%);
  transform:translate3d(-130%,0,0);
  animation:btn-schleier 5.5s linear infinite}
.btn-primary:hover::after{animation-play-state:paused}
@keyframes btn-schleier{
  /* 22% Weg (~1,2s), 78% Pause. Das Easing steht IM Keyframe, nicht auf der
     animation: dort wuerde es sich ueber den ganzen 5,5s-Zyklus strecken und den
     Streifen vorne hetzen (gemessen: bei 0,22s sichtbar, bei 0,44s schon durch).
     So gleitet er gleichmaessig durch und laesst dann Ruhe. */
  0%    {transform:translate3d(-130%,0,0);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  22%,100%{transform:translate3d(130%,0,0)}
}
/* Wer Bewegung abbestellt hat, bekommt einen ruhigen Button — der CTA verliert
   dadurch nichts, er ist ohnehin der farbstaerkste Punkt der Seite. */
@media (prefers-reduced-motion:reduce){
  .btn-primary::after{animation:none;display:none}
}

/* Primär = Salbei-Füllung (explizite Hover-Farben, M28) */
.btn-primary{background:var(--sage-600);color:var(--on-sage);box-shadow:var(--sh-sm)}
.btn-primary:hover{background:var(--sage-700);color:var(--on-sage);box-shadow:var(--sh)}
/* Sekundär = Outline mit Salbei/Gold-Hairline */
.btn-ghost{background:transparent;border-color:var(--sage-300);color:var(--sage-700)}
.btn-ghost:hover{border-color:var(--sage-600);color:var(--sage-700);background:var(--sage-wash)}
/* Gold-Outline (edler Sekundär-CTA, sparsam) */
.btn-gold{background:transparent;border-color:var(--gold);color:var(--gold-deep)}
.btn-gold:hover{background:var(--gold-wash);border-color:var(--gold-deep);color:var(--gold-deep)}
/* Auf dunkler Bühne: heller Button, explizit hell gehalten */
.surface-deep .btn-primary{background:var(--porcelain);color:var(--sage-800)}
.surface-deep .btn-primary:hover{background:#fff;color:var(--sage-900)}
.surface-deep .btn-ghost{border-color:rgba(251,250,246,.42);color:var(--on-sage)}
.surface-deep .btn-ghost:hover{border-color:var(--porcelain);background:rgba(251,250,246,.08);color:var(--on-sage)}

/* ============ 7 · NAV (hell; solid + blur beim Scrollen) ============ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;gap:2rem;padding-inline:var(--edge);
  transition:background var(--dur) var(--ease-out),height var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),backdrop-filter var(--dur) var(--ease-out);
}
.nav.scrolled{
  height:var(--nav-h-scrolled);
  background:rgba(251,250,246,.82);backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 1px 0 var(--hairline),var(--sh-sm);
}
/* ---- Marke: Bildlogo statt Schriftzug (Owner-Vorgabe 17.07.2026) ----
   ZWEI <img> statt einer CSS-Maske. Eine Maske wäre sparsamer (eine Datei,
   Farbe per currentColor) — sie kann aber nur EINFARBIG. Dieses Logo ist
   zweifarbig: Schrift in Tinte, Zierat und Macaron in Gold. Als Maske ginge
   das Gold verloren, also genau das, was das Logo zur Marke macht.
   Deshalb: die Tinte-Fassung für helle Gründe, eine Fassung mit weißer Schrift
   (Gold bleibt!) für die schwarze Hero-Tafel und den Foto-Hero. Beide sind
   ~16 KB; die je unbenutzte kostet weniger als der Verlust des Golds.

   Das gelieferte Logo ist ein VERTIKALES Lockup (Emblem über Schriftzug) — in
   eine 76-px-Leiste gezwängt wäre es briefmarkenklein. Für die Navi ist daraus
   ein horizontales gebaut (Emblem + Schriftzug nebeneinander); das volle Logo
   steht im Footer, wo es Platz hat. */
.nav .brand{display:block;position:relative;
  /* Höhe an die Leiste gekoppelt: schrumpft beim Scrollen mit ihr. */
  height:clamp(26px, calc(var(--nav-h-scrolled) * .55), 38px);
  aspect-ratio:373/84;
  transition:height var(--dur) var(--ease-out)}
.nav .brand img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:left center;
  transition:opacity var(--dur) var(--ease-out)}
/* Standard: Tinte auf hellem Grund. Die helle Fassung liegt darüber und wird
   nur dort eingeblendet, wo die Leiste über etwas Dunklem schwebt. */
.nav .brand .logo-hell{opacity:0}
.home .nav:not(.scrolled) .brand .logo-dunkel,
.nav--onphoto:not(.scrolled) .brand .logo-dunkel{opacity:0}
.home .nav:not(.scrolled) .brand .logo-hell,
.nav--onphoto:not(.scrolled) .brand .logo-hell{opacity:1}
.nav-links{display:flex;gap:1.7rem;margin-left:auto;
  font-size:.95rem;font-weight:400;color:var(--ink-soft)}
.nav-links a{white-space:nowrap;position:relative;padding-block:.3em;transition:color var(--dur-fast)}
.nav-links a:hover{color:var(--sage-700)}
.nav-links a.is-active{color:var(--sage-700)}
.nav-links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:1px;background:var(--gold)}     /* aktive Seite: feine Gold-Unterlinie */
.nav-cta{padding:.55em 1.35em;border:1px solid var(--sage-400);border-radius:var(--r-pill);
  font-size:.92rem;font-weight:500;color:var(--sage-700);transition:.35s var(--ease-out)}
.nav-cta:hover{background:var(--sage-600);color:var(--on-sage);border-color:var(--sage-600)}
/* Burger (mobil) */
.nav-burger{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center}
.nav-burger span{display:block;width:22px;height:2px;background:var(--sage-700);position:relative;transition:.3s var(--ease-out)}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--sage-700);transition:.3s var(--ease-out)}
.nav-burger span::before{top:-7px}.nav-burger span::after{top:7px}
/* Mobile-Drawer (Overlay): zentriert, gestaffelte Einblendung, elegant.
   Bei Öffnen lenis.stop() + Header fixiert lassen (M24/M27) */
.nav-drawer{position:fixed;inset:0;z-index:59;
  background:linear-gradient(180deg,var(--porcelain) 0%,var(--sage-wash) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  padding:calc(var(--nav-h) + 1.2rem) var(--edge) 2rem;overflow-y:auto;
  transform:translateY(-100%);transition:transform .5s var(--ease-inout);pointer-events:none}
.nav-drawer.open{transform:translateY(0);pointer-events:auto}
/* nur DIREKTE Kinder-Links (nicht die Marke im Kopf) */
.nav-drawer > a{font-family:var(--font-display);font-size:clamp(2rem,8.5vw,2.9rem);color:var(--sage-700);
  padding:.4rem 0;line-height:1.08;text-align:center;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),color .25s}
.nav-drawer.open > a{opacity:1;transform:none}
.nav-drawer.open > a:nth-child(2){transition-delay:.10s}
.nav-drawer.open > a:nth-child(3){transition-delay:.16s}
.nav-drawer.open > a:nth-child(4){transition-delay:.22s}
.nav-drawer.open > a:nth-child(5){transition-delay:.28s}
.nav-drawer.open > a:nth-child(6){transition-delay:.34s}
.nav-drawer.open > a:nth-child(7){transition-delay:.40s}
.nav-drawer > a:not(.btn):hover{color:var(--gold-deep)}
.nav-drawer > a.btn{font-family:var(--font-body);font-size:1.05rem;margin-top:1.7rem;
  min-width:min(78vw,320px);justify-content:center;color:var(--on-sage)}
@media (prefers-reduced-motion: reduce){
  .nav-drawer > a{opacity:1;transform:none;transition:none}
}

/* ============ 8 · FOOTER (hell, schlank, THAEVEN-Credit) ============ */
.site-footer{background:var(--sage-100);color:var(--ink-soft);
  padding:clamp(3rem,6vw,5rem) var(--edge) 2rem;
  border-top:1px solid var(--hairline-sage);font-size:var(--fs-sm)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;
  max-width:var(--wrap);margin-inline:auto}
.footer-grid>*{min-width:0}
.foot-brand{font-family:var(--font-display);font-size:1.35rem;color:var(--sage-700)}
.foot-brand span{display:block;font-family:var(--font-body);font-size:.82rem;color:var(--ink-mute);margin-top:.3rem}
.foot-col h3{font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:.8rem}
.foot-col a{display:block;padding:.22rem 0;color:var(--ink-soft);transition:color var(--dur-fast)}
.foot-col a:not(.btn):hover{color:var(--sage-700)}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  max-width:var(--wrap);margin:2.5rem auto 0;padding-top:1.5rem;border-top:1px solid var(--hairline)}
.foot-legal{display:flex;flex-wrap:wrap;gap:1.3rem}
.foot-legal a:not(.btn):hover{color:var(--sage-700)}
/* THAEVEN-Credit — dezent, KEIN umrandeter Button: der Credit gehoert der
   Agentur, nicht der Kundenseite, und darf nie mit deren CTAs konkurrieren.
   Wortlaut exakt "Website von THAEVEN" (nicht "THAEVEN WEB"), Marke in
   Grossbuchstaben.
   Sitzt als zweites Kind in .footer-bottom (space-between): Copyright der
   Kundin links, Credit rechts, eine Zeile. Kein width:100% — das erzwaenge
   ueber flex-wrap eine eigene Zeile darunter. Auf schmalen Schirmen bricht
   die Flex-Zeile von selbst um, dann steht der Credit links unter dem
   Copyright — gewollt, denn zentriert neben linksbuendig sieht nach Versehen aus. */
.thaeven-credit{margin:0;
  opacity:.62;font-size:.82rem;letter-spacing:.02em;color:var(--ink-mute)}
.thaeven-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px;
  transition:opacity var(--dur-fast) var(--ease-out)}
.thaeven-credit a:hover{opacity:.75}

/* ============ 9 · KARTEN + KIPP-REVEAL (/sortiment Signature) ======== */
/* Sorten-Grid: bei fester Zahl kein blind auto-fit (M22) — feste Spalten,
   gestuft; letzte Reihe via dense/wrap sauber. 18 Karten → 3/4-teilbar. */
.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.card-grid>*{min-width:0}

/* Flavor-Karte: HELL & CLEAN — Foto groß, nur feiner Flavor-Punkt +
   Gold-Hairline + zarter Flavor-Wash hinter dem Produkt (kein Farbblock) */
.flavor-card{
  position:relative;background:var(--paper);border:1px solid var(--hairline);
  border-radius:var(--r-card);padding:1.5rem 1.35rem 1.4rem;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.flavor-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--flavor);opacity:.85}
.flavor-card .thumb{aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 30%,var(--flavor-wash),var(--paper) 78%);margin-bottom:1.1rem}
.flavor-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.flavor-card h3{display:flex;align-items:center;gap:.5rem}
.flavor-card h3::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--flavor);flex:0 0 auto}
.flavor-card .desc{margin-top:.3rem;font-size:var(--fs-sm);color:var(--ink-mute);font-weight:300}
.flavor-card .card-price{margin-top:.9rem;font-size:.88rem;color:var(--sage-700);font-weight:600;font-variant-numeric:tabular-nums}
.flavor-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--hairline-sage)}
.flavor-card:hover .thumb img{transform:scale(1.05)}
/* anklickbare Karte → Lightbox (Kundin-Wunsch 2026-07-16) */
.flavor-card.is-zoomable{cursor:zoom-in}
.flavor-card.is-zoomable .thumb{position:relative}
.flavor-card.is-zoomable .thumb::after{content:"";position:absolute;right:.6rem;bottom:.6rem;
  width:32px;height:32px;border-radius:50%;background:rgba(28,39,26,.55) center/16px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbfaf6' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.8);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);backdrop-filter:blur(2px)}
.flavor-card.is-zoomable:hover .thumb::after,
.flavor-card.is-zoomable:focus-visible .thumb::after{opacity:1;transform:scale(1)}

/* Signature "Die Verkostungskarte kippt herein" — REINE CSS-Rotation
   (KEINE parallele JS-Transform am selben Element, M16). IO togglet .in. */
.tilt-in{opacity:0;transform:perspective(900px) rotateX(12deg) translateY(26px);
  transform-origin:50% 100%;
  transition:opacity var(--dur-slow) var(--ease-settle),transform var(--dur-slow) var(--ease-settle)}
.tilt-in.in{opacity:1;transform:perspective(900px) rotateX(0) translateY(0)}
/* Staffelung via inline --i (transition-delay: calc(var(--i)*60ms)) */
.tilt-in{transition-delay:calc(var(--i, 0) * 60ms)}

/* Flavor-Achsen-Tokens (Filter + Karten-Akzent). Per-Sorte via inline --flavor. */
[data-flavor="fruchtig"]{--flavor:#C25A6A;--flavor-wash:#F6E6E7}
[data-flavor="schokoladig"]{--flavor:#7A5643;--flavor-wash:#EFE7E0}
[data-flavor="nussig"]{--flavor:#8A9A4E;--flavor-wash:#EDEFDB}
[data-flavor="exotisch"]{--flavor:#DB8F3C;--flavor-wash:#F7EBD7}

/* ============ 10 · FILTER-CHIPS (sticky, mobil scrollbar) =========== */
/* KEIN overflow:hidden-Vorfahr (M3/mobile-filter-chips). Angedockte
   Toolbar: deckender Blur-BG über volle Breite + Hairline. */
.filterbar{position:sticky;top:var(--nav-h-scrolled);z-index:40;
  background:rgba(251,250,246,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);padding:.9rem var(--edge)}
.filter-track{display:flex;gap:.7rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:center}
.filter-track::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:.55em 1.15em;border-radius:var(--r-pill);
  border:1px solid var(--sage-300);color:var(--sage-700);font-size:.92rem;font-weight:500;
  white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;transition:.3s var(--ease-out)}
.chip:hover{background:var(--sage-wash)}
.chip.is-active{background:var(--sage-600);color:var(--on-sage);border-color:var(--sage-600)}

/* ============ 11 · FILTER-CROSS-DISSOLVE PORTFOLIO (/anlasstorten) === */
/* Masonry via CSS columns (break-inside:avoid) → kein Reihen-Loch (M22). */
.masonry{columns:3 320px;column-gap:1.25rem}
.masonry>*{break-inside:avoid;margin-bottom:1.25rem;min-width:0}
.tile{position:relative;border-radius:var(--r);overflow:hidden;background:var(--sand-deep);cursor:zoom-in;
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.tile img{width:100%;height:auto;transition:transform var(--dur-slow) var(--ease-out)}
.tile:hover img{transform:scale(1.04)}
/* Label über optionalem Hover-Scrim (M-Eintrag menu-card-hover-label) */
.tile .tile-label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.2rem 1rem .9rem;
  color:#fff;font-size:.9rem;opacity:0;transform:translateY(6px);
  background:linear-gradient(180deg,transparent,rgba(28,39,26,.72));transition:.35s var(--ease-out)}
.tile:hover .tile-label{opacity:1;transform:translateY(0)}
/* Cross-Dissolve beim Tab-Wechsel: gefilterte Kacheln raus/rein (Klasse-Toggle) */
.tile.is-hidden{opacity:0;transform:scale(.96);pointer-events:none;position:absolute;visibility:hidden}
/* Lightbox: bei Öffnen lenis.stop(), Header position:fixed halten (M24/M27) */
.lightbox{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--edge);
  background:rgba(28,39,26,.88);opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease-out)}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-height:82vh;width:auto;border-radius:var(--r);box-shadow:var(--sh-lg)}
.lightbox .lb-cta{margin-top:1.2rem;text-align:center}
.lightbox .lb-close{position:absolute;top:1.2rem;right:1.4rem;color:#fff;font-size:.85rem;letter-spacing:.1em}

/* ============ 12 · STICKY-SPLIT + SCHICHT-DIAGRAMM (/torten) ======== */
/* Sticky braucht overflow-x:clip-Vorfahr (M3), KEIN overflow:hidden. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.split>*{min-width:0}
/* Die Sticky-Spalte ist GENAU fensterhoch und zentriert ihren Inhalt: nur so
   steht das Bild auf derselben Höhe wie der Text, der es auswählt (die aktive
   Sorte wird nach Fenstermitte bestimmt). Vorher war die Spalte ~1000 px hoch
   → Bild oben, Karte unten, unterste Sorte scrollte aus dem Bild heraus.
   Der Zuschlag unten gibt der letzten Sorte ihren Moment in der Mitte, bevor
   das Sticky freigegeben wird. (Kundin-Wunsch 2026-07-16) */
.split .list{display:flex;flex-direction:column;gap:clamp(4.5rem,9vw,8.5rem);
  padding-top:max(2rem, calc(50vh - 6rem));
  padding-bottom:max(6rem, calc(50vh - 11rem))}
.split .sticky{position:sticky;top:var(--nav-h-scrolled);align-self:start;
  height:calc(100svh - var(--nav-h-scrolled));min-height:0;
  display:flex;flex-direction:column;justify-content:center;gap:1.1rem;
  padding-block:1.2rem}
/* ---- Törtchen-Foto über dem Schicht-Diagramm ----
   Das Foto zeigt die Aussenseite (die glasierte Kuppel), das Diagramm darunter
   das Innere. Beide zusammen sind die ganze Aussage — deshalb stehen sie
   uebereinander und nicht nebeneinander.
   ⚠️ Die Bilder sind KI-PLATZHALTER, bis Kristina ihre Toertchen fotografiert.
   Dateinamen bleiben (toertchen-<key>.webp) -> spaeterer Austausch ohne Code. */
.tt-foto{margin:0;border-radius:var(--r-card);overflow:hidden;
  background:var(--sage-wash);border:1px solid var(--hairline)}
.tt-foto img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
/* Sticky-Spalte: das Foto darf das Diagramm nie aus dem Fenster druecken —
   beide zusammen muessen in 100svh passen, sonst reisst die Synchronisierung
   (genau der Fehler aus Runde 4: Spalte ~1000 px hoch, passte in kein Fenster). */
.tt-foto--sticky{flex:0 1 auto;min-height:0;max-height:46%}
.tt-foto--sticky img{height:100%;max-height:100%;aspect-ratio:auto}
.tt-foto--sticky img{transition:opacity var(--dur) var(--ease-out)}
.tt-foto--sticky img.wechselt{opacity:0}

.torte-item{scroll-margin-top:120px}
.torte-item h3{font-size:var(--fs-h3)}
.torte-item .claim{font-family:var(--font-display);font-style:italic;color:var(--sage-600);margin:.4rem 0 .8rem}
.torte-item .desc{color:var(--ink-soft);font-weight:300}
/* Schicht-Diagramm: schematische Balken (Boden/Mousse/Füllung/Glasur),
   Crossfade zur aktiven Sorte via IntersectionObserver (kein GSAP-Pin) */
.diagram{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:1.6rem 1.6rem 1.7rem;box-shadow:var(--sh);position:relative}
.diagram .layers{display:flex;flex-direction:column-reverse;gap:.5rem}
/* Torten-Querschnitt: gefüllte Bänder, aber IMMER lesbar (weiße Schrift +
   Kontrast-Verlauf links + Schatten) — auf jeder Sortenfarbe (Kundin-Wunsch 2026-07-16) */
.layer{position:relative;isolation:isolate;height:clamp(40px,5.4vw,54px);border-radius:11px;
  display:flex;align-items:center;padding-inline:1.05rem;
  font-size:clamp(.92rem,1.5vw,1.05rem);font-weight:600;color:#fff;letter-spacing:.005em;
  text-shadow:0 1px 2px rgba(16,22,12,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  transition:transform var(--dur) var(--ease-out)}
/* Der Scrim traegt die weisse Schrift und liegt als background-IMAGE ueber der
   Zutatenfarbe (background-color). Vorher war er ein ::before mit z-index:-1 —
   und lag damit HINTER dem eigenen Hintergrund des Bandes, also wirkungslos.
   Das fiel nie auf, solange die Baender Salbei und Gold waren: die sind von
   sich aus dunkel genug fuer weisse Schrift. Mit echten Zutatenfarben
   (Raffaello-Creme #FBF5E7, Vanillecreme, Lemon-Curd) fiel es sofort auf —
   gemessen 2,49:1 statt der noetigen 4,5:1, bei 32 von 36 Schichten.
   Deckt nur die linke Haelfte ab, wo der Text sitzt; rechts bleibt die
   Zutatenfarbe unberuehrt. */
.layer{background-image:linear-gradient(90deg,rgba(12,16,9,.88),rgba(12,16,9,.66) 46%,
    rgba(12,16,9,.2) 76%,transparent)}
/* Echte Zutatenfarben, je Sorte gesetzt (data-cb/cm/cf/cg -> --c-*).
   Vorher: boden=Salbei, glasur=Gold — Markenfarben. Schokoboeden sind aber
   nicht dunkelgruen. Die Fallbacks greifen nur, falls eine Karte die
   Farbdaten nicht mitbringt. */
.layer[data-kind="boden"]{background-color:var(--c-boden,var(--sage-800))}
.layer[data-kind="mousse"]{background-color:var(--c-mousse,var(--sage-500))}
.layer[data-kind="fuellung"]{background-color:var(--c-fuellung,var(--flavor))}
.layer[data-kind="glasur"]{background-color:var(--c-glasur,var(--gold))}

/* Ohne Foto daneben darf der Querschnitt die Buehne fuellen — er IST jetzt
   das Bild der Torte, nicht mehr die Fussnote. */
.diagram--gross .layers{gap:.42rem}
.diagram--gross .layer{height:clamp(52px,6.6vw,72px);font-size:clamp(.95rem,1.5vw,1.08rem)}

/* Anfrage-Link je Torten-Sorte: trägt den Sortennamen ins Kontaktformular
   (?sorte=…), damit niemand nachtippen muss, was er gerade angesehen hat. */
.torte-anfrage{margin-top:1.1rem;align-self:flex-start}

/* Vorbefülltes Wunschfeld sichtbar machen — sonst übersieht man, dass schon
   etwas drinsteht, und schreibt es ein zweites Mal. */
.textarea.is-vorbefuellt{border-color:var(--sage-400);background:var(--sage-wash)}

/* ============ 12b · SORTEN-PALETTE (/torten) ============ */
/* Alle neun Querschnitte nebeneinander: der Vergleich, den kein Foto leisten kann.
   auto-fit statt fester Spalten — bei 9 Sorten und schmalen Streifen waere jede
   feste Zahl auf irgendeiner Breite falsch. */
.palette{list-style:none;margin:2.4rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:clamp(.5rem,1.2vw,1rem)}
.pal-link{display:flex;flex-direction:column;align-items:stretch;gap:.55rem;text-decoration:none;
  transition:transform var(--dur) var(--ease-out)}
.pal-link:hover{transform:translateY(-5px)}
.pal-link:focus-visible{outline:2px solid var(--sage-600);outline-offset:4px;border-radius:10px}
/* Der Querschnitt: vier Baender, Reihenfolge im DOM ist glasur->boden (oben nach unten). */
.pal-schnitt{display:flex;flex-direction:column;height:clamp(120px,15vw,168px);
  border-radius:10px;overflow:hidden;box-shadow:var(--sh-sm);border:1px solid var(--hairline)}
.pal-schnitt i{flex:1}
.pal-schnitt i[data-kind="glasur"]{background:var(--c-glasur);flex:.72}
.pal-schnitt i[data-kind="fuellung"]{background:var(--c-fuellung)}
.pal-schnitt i[data-kind="mousse"]{background:var(--c-mousse);flex:1.25}
.pal-schnitt i[data-kind="boden"]{background:var(--c-boden)}
.pal-nr{font-family:var(--font-display);font-size:.82rem;color:var(--gold-deep);line-height:1}
.pal-name{font-size:.86rem;font-weight:500;color:var(--ink);line-height:1.25;text-wrap:balance}
.pal-link:hover .pal-name{color:var(--sage-700)}
@media (max-width:560px){
  .palette{grid-template-columns:repeat(auto-fit,minmax(78px,1fr))}
  .pal-name{font-size:.76rem}
}
.diagram .gold-frame{position:absolute;inset:.55rem;border:1px solid var(--gold);opacity:.35;border-radius:calc(var(--r-card) - 6px);pointer-events:none}

/* ============ 13 · ZEITSTRAHL-FADEN (/ueber-kristina) ============== */
/* Sektions-LOKALER stroke-dashoffset-Draw (kein seitenweiter Spine).
   Vertikal auf allen Breakpoints (nur 4 Punkte). */
.timeline{position:relative;padding-left:2.5rem;max-width:var(--wrap-narrow)}
.timeline svg.thread{position:absolute;left:.6rem;top:0;height:100%;width:24px;overflow:visible}
.timeline svg.thread path{fill:none;stroke:var(--gold);stroke-width:2;
  stroke-dasharray:var(--len,1);stroke-dashoffset:var(--len,1)}   /* JS scrubbt dashoffset→0 */
.milestone{position:relative;padding-bottom:clamp(2.5rem,5vw,4rem)}
.milestone::before{content:"";position:absolute;left:calc(-2.5rem + .4rem);top:.35rem;
  width:14px;height:14px;border-radius:50%;background:var(--porcelain);border:2px solid var(--gold);z-index:2}
.milestone.reached::before{background:var(--gold)}
.milestone .year{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);color:var(--sage-600);
  font-variant-numeric:tabular-nums}
.milestone h3{margin:.2rem 0 .3rem}
.milestone p{color:var(--ink-soft);font-weight:300}

/* ============ 14 · FORM + ANLASS-WÄHLER (/kontakt) ================= */
.form-field{margin-bottom:1.3rem}
.form-field label{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--ink);margin-bottom:.45rem;min-height:1.2em}
.input,.textarea,.select{width:100%;min-width:0;background:var(--paper);
  border:1px solid var(--hairline);border-radius:var(--r);padding:.85rem 1rem;
  font:inherit;color:var(--ink);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.input::placeholder,.textarea::placeholder{color:var(--ink-mute)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--sage-500);box-shadow:0 0 0 3px var(--sage-wash)}
.textarea{min-height:130px;resize:vertical}
.form-help{font-size:var(--fs-xs);color:var(--ink-mute);margin-top:.35rem}

/* Anlass-Wähler: große Kacheln (erster Schritt), einheitliche min-height,
   Auswahl = Rosé-Ring + Macaron-Punkt (M25: gleich hohe Choices) */
.choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.choice-grid>*{min-width:0}
.choice{position:relative;display:flex;flex-direction:column;gap:.25rem;text-align:left;
  min-height:96px;padding:1.1rem 1.15rem;border-radius:var(--r);background:var(--paper);
  border:1px solid var(--hairline);cursor:pointer;transition:.3s var(--ease-out)}
.choice .c-title{font-family:var(--font-display);font-size:1.15rem;color:var(--sage-700)}
.choice .c-sub{font-size:var(--fs-xs);color:var(--ink-mute)}
.choice::after{content:"";position:absolute;top:.9rem;right:.9rem;width:12px;height:12px;border-radius:50%;
  border:1.5px solid var(--sage-300);transition:.3s var(--ease-out)}
.choice:hover{border-color:var(--sage-400)}
.choice.selected{border-color:var(--rose);box-shadow:inset 0 0 0 1px var(--rose)}
.choice.selected::after{background:var(--rose);border-color:var(--rose);
  animation:mac-bounce .5s var(--ease-settle)}      /* dezenter Macaron-Punkt-Bounce */
@keyframes mac-bounce{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* Accordion: passendes Feld-Set klappt per grid-template-rows auf (kein JS-Höhensprung) */
.accordion{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease-inout)}
.accordion.open{grid-template-rows:1fr}
.accordion>.inner{overflow:hidden;min-height:0}

/* Radio-Zeile Abholung/Lieferung */
.radio-row{display:flex;flex-wrap:wrap;gap:.8rem}
.radio-pill{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.6rem 1.1rem;
  border:1px solid var(--hairline);border-radius:var(--r-pill);cursor:pointer}
.radio-pill.selected{border-color:var(--sage-600);background:var(--sage-wash)}

/* Liefergebiet-RECHNER: interaktiver Entfernungs-Slider → Zone + Preis live.
   Ersetzt die Ringe (Kundin-Wunsch 2026-07-16: „was Cooleres, Interaktiveres"). */
.delivery-calc{max-width:640px;margin:clamp(1.6rem,4vw,2.6rem) auto 0;
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3.5vw,2.4rem);box-shadow:var(--sh)}
.dc-lead{max-width:44ch;margin-inline:auto;text-wrap:balance}
/* EINE Schiene: Linie, Halte-Punkte, Auto und der (unsichtbare) Slider liegen
   deckungsgleich übereinander — vorher zwei parallele Bahnen, und das Auto saß
   auf der Beschriftung. Der seitliche Einzug gibt „Fischbach"/„Umland" Platz,
   der Slider ragt um seinen halben Griff (13 px) hinaus, damit die Griffmitte
   exakt 0 %–100 % der Schiene abfährt. (Kundin-Wunsch 2026-07-16) */
.dc-rail{margin:.2rem 0 1.5rem}
.dc-rail-inner{position:relative;height:84px;margin-inline:clamp(1.6rem,7%,2.8rem)}
.dc-line{position:absolute;left:0;right:0;top:46px;height:7px;border-radius:99px;background:var(--sage-100)}
.dc-fill{position:absolute;left:0;top:46px;height:7px;border-radius:99px;
  background:linear-gradient(90deg,var(--sage-500),var(--gold));transition:width .25s var(--ease-out)}
.dc-stop{position:absolute;top:60px;transform:translateX(-50%);font-size:var(--fs-xs);color:var(--ink-mute);
  white-space:nowrap;letter-spacing:.02em;transition:color .25s var(--ease-out)}
.dc-stop::before{content:"";position:absolute;left:50%;top:-18px;transform:translateX(-50%);
  width:15px;height:15px;border-radius:50%;background:var(--porcelain);border:2px solid var(--sage-400);
  transition:.25s var(--ease-out)}
.dc-stop[data-active]{color:var(--sage-700);font-weight:600}
.dc-stop[data-active]::before{background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(180,138,74,.16)}
/* Auto schwebt ÜBER der Linie und zeigt mit einer kleinen Spitze darauf */
.dc-van{position:absolute;top:2px;transform:translateX(-50%);width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--sage-600);color:var(--on-sage);z-index:3;
  pointer-events:none;box-shadow:0 10px 22px -6px rgba(74,101,68,.65);
  transition:left .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.dc-van::after{content:"";position:absolute;left:50%;bottom:-4px;width:11px;height:11px;z-index:-1;
  background:var(--sage-600);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.dc-van svg{width:20px;height:20px}
/* Slider: unsichtbar, aber voll bedienbar — das Auto IST der Griff */
.dc-range{position:absolute;left:-13px;right:-13px;top:32px;height:32px;width:auto;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;border:0;opacity:0;cursor:grab;z-index:4}
.dc-range:active{cursor:grabbing}
.dc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%}
.dc-range::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%}
.dc-range:focus-visible ~ .dc-van{box-shadow:0 0 0 4px var(--sage-wash),0 10px 22px -6px rgba(74,101,68,.65)}
/* Ergebnis-Karte */
.dc-readout{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.2rem;
  padding:1.1rem 1.3rem;border-radius:var(--r-card);background:var(--sage-wash);border:1px solid var(--hairline-sage)}
.dc-readout .dc-km{font-family:var(--font-display);font-size:1.35rem;color:var(--sage-700)}
.dc-readout .dc-km b{font-variant-numeric:tabular-nums}
.dc-readout .dc-info{text-align:right}
.dc-readout .dc-zone{font-weight:600;color:var(--sage-700)}
.dc-readout .dc-price{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:.1rem}
.dc-readout .dc-price b{color:var(--gold-deep);font-variant-numeric:tabular-nums}
@media(max-width:480px){
  .dc-readout{flex-direction:column;align-items:flex-start;text-align:left}
  .dc-readout .dc-info{text-align:left}
}
/* Schmal: „Fischbach" und „Stadtgebiet" liegen nur 16 % auseinander und würden
   sich überschreiben → die mittlere Beschriftung fällt in eine zweite Reihe.
   Alle drei bleiben mittig über ihrem Punkt, damit die Punkte exakt auf
   0 %/16 %/100 % sitzen — dorthin fährt auch das Auto. */
@media(max-width:760px){
  .dc-rail-inner{height:106px;margin-inline:.9rem}
  .dc-stop{font-size:10px}
  .dc-stop[data-i="1"]{top:84px}
  .dc-stop[data-i="1"]::before{top:-42px}
}

/* ============ 14b · GESCHMACKSWELTEN-EXPLORER (Sortiment) ============
   „Vier Welten – Unzählige Kombinationen": die Macaron-Box steht groß im
   Zentrum, dahinter ploppt je Geschmackswelt die echte Zutat auf. */
/* Geometrie-Anker ist die BOX (.fx-frame): alle Zutaten-Maße sind Prozente
   davon → die Zutat sitzt auf jeder Breite gleich tief hinter dem Deckel.
   Die vier Zutaten-PNGs sind auf identische Grundlinie normalisiert
   (Inhalt endet bei 600/640 px), sonst wäre keine Position allgemeingültig. */
.flavor-explorer .fx-stage{position:relative;max-width:580px;margin:clamp(1.6rem,4vw,2.8rem) auto 0;
  display:flex;justify-content:center}
.flavor-explorer .fx-frame{position:relative;width:74%;aspect-ratio:1200 / 896;
  margin-top:30%}                                 /* Kopfraum für die Zutat, skaliert mit */
.flavor-explorer .fx-box{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;
  filter:drop-shadow(0 28px 36px rgba(28,39,26,.26))}
.flavor-explorer .fx-ingredients{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Zutat steht groß HINTER der Box und schaut oben heraus; Hover auf den Tabs
   lässt sie noch ein Stück hochschießen (Kundin-Wunsch 2026-07-16). */
.flavor-explorer .fx-ing{position:absolute;left:50%;bottom:62%;width:76%;
  transform:translate(-50%,30%) scale(.88);opacity:0;transform-origin:50% 100%;
  transition:opacity .45s var(--ease-out),transform .7s var(--ease-settle);
  filter:drop-shadow(0 26px 32px rgba(28,39,26,.3))}
.flavor-explorer .fx-ing.is-active{opacity:1;transform:translate(-50%,0) scale(1)}
.flavor-explorer .fx-stage.fx-lift .fx-ing.is-active{transform:translate(-50%,-12%) scale(1.03)}
/* weicher Gold-Schein hinter der aufsteigenden Zutat */
.flavor-explorer .fx-frame::before{content:"";position:absolute;left:50%;top:-6%;
  width:96%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(180,138,74,.22),transparent 66%);
  opacity:0;transition:opacity .5s ease}
.flavor-explorer.fx-lit .fx-frame::before{opacity:1}
/* Tabs */
.flavor-explorer .fx-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;
  margin-top:clamp(1.2rem,3vw,1.8rem)}
.flavor-explorer .fx-tab{padding:.55em 1.2em;border-radius:var(--r-pill);
  border:1px solid var(--sage-300);color:var(--sage-700);font-size:.94rem;font-weight:500;
  min-height:44px;display:inline-flex;align-items:center;gap:.5em;transition:.3s var(--ease-out)}
.flavor-explorer .fx-tab::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--fxdot,var(--sage-500))}
.flavor-explorer .fx-tab[data-fx="fruchtig"]{--fxdot:#C25A6A}
.flavor-explorer .fx-tab[data-fx="schokoladig"]{--fxdot:#7A5643}
.flavor-explorer .fx-tab[data-fx="nussig"]{--fxdot:#8A9A4E}
.flavor-explorer .fx-tab[data-fx="exotisch"]{--fxdot:#DB8F3C}
.flavor-explorer .fx-tab:hover{background:var(--sage-wash)}
.flavor-explorer .fx-tab.is-active{background:var(--sage-600);color:var(--on-sage);border-color:var(--sage-600)}
.flavor-explorer .fx-caption{text-align:center;margin:1.1rem auto 0;max-width:52ch;
  color:var(--ink-soft);font-weight:300;min-height:3em}
.flavor-explorer .fx-caption strong{color:var(--sage-700);font-weight:600}
@media (prefers-reduced-motion: reduce){
  .flavor-explorer .fx-ing{transition:opacity .3s ease;transform:translate(-50%,0) scale(1)}
  .flavor-explorer .fx-stage.fx-lift .fx-ing.is-active{transform:translate(-50%,0) scale(1)}
}
@media (max-width:560px){
  .flavor-explorer .fx-frame{width:82%}       /* alles Weitere skaliert prozentual mit */
}

/* ============ 15 · REVEAL-UTILITY (IntersectionObserver) ============ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-i]{transition-delay:calc(var(--i, 0) * 70ms)}

/* Dezente Hero-Parallax-Ebene (nur Desktop; data-speed via JS) */
.parallax-layer{will-change:transform}

/* ============ 16 · RESPONSIVE ============ */
@media(max-width:1024px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr;gap:2rem}
  .split .sticky{position:static}      /* Mobile: Bild+Diagramm inline, kein Sticky/Crossfade */
  .masonry{columns:2 300px}
  .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-burger{display:inline-flex}
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.8rem}
}
@media(max-width:640px){
  /* Filter-Chips mobil linksbündig scrollen (zentriert würde 1. Chip abschneiden) */
  .filter-track{justify-content:flex-start}
}
@media(max-width:560px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
  .masonry{columns:1}
  .choice-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .flavor-card{padding:1.1rem 1rem 1.1rem}
  /* Über Kristina: „Aus Leidenschaft…" + Aristoteles-Zitat mobil kompakter */
  .story .section-head h2{font-size:1.5rem;line-height:1.14}
  .portrait-quote{font-size:1.3rem;line-height:1.32}
}
/* Wide-Stufe: Galerie/Content mitwachsen lassen, nicht 1200 strecken (M-ULTRAWIDE) */
@media(min-width:2200px){
  :root{--wrap:1440px;--wrap-wide:1720px}
  .masonry{columns:4 360px}
}

/* ============ 17 · REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .tilt-in,.reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .flavor-card:hover{transform:none}
  .timeline svg.thread path{stroke-dashoffset:0 !important}   /* Faden direkt gezeichnet */
  .choice.selected::after{animation:none}
  .btn:hover{transform:none}
}

/* ===================================================================
   18 · PAGE-SPECIFIC ADDITIONS (Builder)
   Extends the design-system above; uses ONLY its tokens.
   Heroes, badges, sticky-split visuals, portfolio hero, timeline glue,
   contact split, legal editorial. Leerzeichen um +/- in calc/clamp (M18).
   =================================================================== */

/* --- Skip-Link (a11y) --- */
.skip-link{position:absolute;left:.6rem;top:-3rem;z-index:200;background:var(--sage-700);
  color:var(--on-sage);padding:.65em 1.1em;border-radius:0 0 var(--r-sm) var(--r-sm);
  font-size:.9rem;font-weight:500;transition:top var(--dur-fast) var(--ease-out)}
.skip-link:focus{top:0}

/* --- Nav: brand + burger row, drawer close --- */
.nav .brand{margin-right:.2rem}
.nav-drawer .drawer-head{display:flex;align-items:center;justify-content:space-between;
  position:absolute;top:0;left:0;right:0;height:var(--nav-h);padding-inline:var(--edge)}
.nav-drawer .drawer-brand{font-family:var(--font-display);font-size:1.5rem;color:var(--sage-700)}
.nav-drawer .drawer-close{width:44px;height:44px;display:inline-flex;align-items:center;
  justify-content:center;color:var(--sage-700);font-size:1.7rem;line-height:1}
.nav-drawer a.is-active{color:var(--sage-600)}
.nav-drawer a.is-active::after{content:"";display:block;width:38px;height:1px;background:var(--gold);margin-top:.2rem}

/* --- Footer logo + tagline --- */
.foot-logo{display:block;width:clamp(150px, 20vw, 188px);height:auto;margin-bottom:.7rem}
.foot-tagline{color:var(--ink-mute);font-size:.86rem;max-width:32ch;margin-top:.2rem}
.foot-nap{margin-top:1rem;line-height:1.7}
.foot-nap a{color:var(--ink-soft)}
.foot-nap a:not(.btn):hover{color:var(--sage-700)}
.foot-note{font-size:var(--fs-xs);color:var(--ink-mute)}

/* ============ EDITORIAL PAGE-HERO ============ */
.page-hero{position:relative;isolation:isolate;overflow:clip;
  padding-top:calc(var(--nav-h) + clamp(2.4rem, 6vw, 5rem));
  padding-bottom:clamp(2.4rem, 4vw, 4rem)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero--center{text-align:center}
.hero-wash{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../img/wash-sage-gold-16x9.webp") center top/cover no-repeat;opacity:.75;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
          mask-image:linear-gradient(180deg,#000 55%,transparent)}
@media(max-width:767px){.hero-wash{background-image:url("../img/wash-sage-gold-4x5.webp")}}
.page-hero h1{color:var(--sage-700);max-width:24ch;margin-top:.7rem;text-wrap:balance}
.page-hero--center h1{margin-inline:auto}
.page-hero .lead{margin-top:var(--sp-3)}
.page-hero--center .lead{margin-inline:auto}

/* Price badges */
.badge-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--sp-4)}
.page-hero--center .badge-row{justify-content:center}
.badge{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1.05rem;border-radius:var(--r-pill);
  background:var(--gold-wash);border:1px solid var(--gold);color:var(--gold-deep);
  font-weight:600;font-size:.9rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.badge .b-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:0 0 auto}

/* Hero / generic CTA row */
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:var(--sp-5)}
.page-hero--center .cta-row{justify-content:center}

/* ============ SCHLUSS-CTA DEEP BAND ============ */
.cta-band{text-align:center}
.cta-band .inner{max-width:660px;margin-inline:auto}
.cta-band .gold-rule--short{margin-inline:auto}
.cta-band .cta-row{justify-content:center}
.cta-band .cta-note{margin:1.1rem auto 0;color:rgba(251,250,246,.7);font-size:var(--fs-sm)}

/* ============ QUOTE / CALLOUT (Nichts dabei?) ============ */
.callout{background:var(--rose-wash);border:1px solid #EED9DB;border-radius:var(--r-lg);
  padding:clamp(1.8rem, 4vw, 3rem);max-width:var(--wrap-narrow);margin-inline:auto;text-align:center}
.callout blockquote{font-family:var(--font-display);font-style:italic;font-size:var(--fs-h3);
  color:var(--rose-deep);line-height:1.4;max-width:34ch;margin-inline:auto}
.callout cite{display:block;margin-top:1rem;font-style:normal;font-size:var(--fs-sm);
  color:var(--ink-mute);letter-spacing:.02em}
.callout .btn{margin-top:1.6rem}

/* ============ INTRO LINE over lists ============ */
.intro-line{font-family:var(--font-display);font-style:italic;color:var(--sage-600);
  font-size:var(--fs-lead);max-width:44ch;margin-bottom:var(--sp-5)}

/* ============ STICKY-SPLIT (/torten) additions ============ */
.torte-visual{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--hairline);
  box-shadow:var(--sh);background:var(--sage-100);aspect-ratio:4/5}
/* In der Sticky-Spalte teilt sich das Bild die Fensterhöhe mit der Karte —
   es bekommt den Rest, statt starr 4/5 zu erzwingen (object-fit deckt ab). */
.split .sticky .torte-visual{flex:1 1 auto;min-height:0;aspect-ratio:auto}
.split .sticky .diagram{flex:0 0 auto}
.torte-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}   /* etwas weichere Überblendung */
.torte-visual img.is-active{opacity:1}
.diagram .layers{min-height:0}
.diagram .dg-title{font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage-700);margin-bottom:.95rem;font-weight:700}
.torte-item{opacity:.5;transition:opacity var(--dur) var(--ease-out)}
.torte-item.active{opacity:1}
.torte-item .idx{font-family:var(--font-display);font-size:clamp(1.4rem,2.4vw,2rem);
  color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}
/* Mobile inline visual (Foto + statisches Diagramm) unter 1024 */
.torte-inline{display:none;margin-top:1.2rem}
.torte-inline .torte-visual{aspect-ratio:4/5;margin-bottom:1.1rem}
.torte-inline .torte-visual img{position:static;opacity:1;height:auto;aspect-ratio:4/5}
/* Mobil steht das Foto ueber dem Diagramm derselben Sorte — kein Sticky, kein
   Wechsel: jede Sorte bringt ihr eigenes Bild mit. */
.torte-inline .tt-foto{margin-bottom:1.1rem}
@media(max-width:1023px){
  .torte-item{opacity:1}
  .torte-inline{display:block}
  .split .sticky{display:none}
}
@media(min-width:1024px){ .torte-inline{display:none} }

/* ============ GESCHMACKSACHSEN — der Torten-Mixer ============
   Die Sektion löst ihre eigene Überschrift ein: zwei Achsen wählen, und die
   Torte baut sich im Querschnitt daraus zusammen — erste Achse trägt (Boden +
   Mousse), zweite setzt den Akzent (Füllung + Glasur). Runder Querschnitt statt
   der eckigen Balken oben, damit sich die Seite nicht selbst wiederholt.
   Fotos scheiden aus: die Spiegelglasur verrät den Geschmack nicht.
   (Ersetzt die vier flachen Karten — Kundin-Wunsch 2026-07-16.) */
.mixer{margin-top:var(--sp-5)}
.mx-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem}
.mx-chip{position:relative;padding:.6em 1.25em;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--sage-300);background:var(--paper);color:var(--sage-700);
  font-size:.95rem;font-weight:500;min-height:46px;display:inline-flex;align-items:center;gap:.55em;
  transition:.3s var(--ease-out)}
.mx-chip::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--flavor);
  transition:transform .3s var(--ease-settle)}
.mx-chip:hover{border-color:var(--sage-500);background:var(--sage-wash)}
.mx-chip[aria-pressed="true"]{background:var(--flavor);border-color:var(--flavor);color:#fff;
  box-shadow:0 10px 24px -10px var(--flavor)}
.mx-chip[aria-pressed="true"]::before{background:#fff;transform:scale(1.25)}
.mx-chip .mx-role{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:.82}
.mx-chip:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.mx-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;margin-top:var(--sp-5)}
.mx-grid>*{min-width:0}
.mx-torte-wrap{display:flex;flex-direction:column;align-items:center}
/* Querschnitt: gewölbte Glasur oben, gerader Boden unten */
.mx-torte{position:relative;width:min(100%,400px);aspect-ratio:1 / .74;display:flex;flex-direction:column;
  border-radius:15% 15% 10px 10px / 10% 10% 7px 7px;overflow:hidden;   /* Zylinder mit leichter Krone */
  box-shadow:0 26px 48px -18px rgba(28,39,26,.45),inset 0 0 0 1px rgba(255,255,255,.14)}
.mx-band{flex:1 1 0;background:var(--sage-200);
  transition:background .7s var(--ease-out)}
.mx-band[data-b="glasur"]{flex:0 0 21%}
.mx-band[data-b="boden"]{flex:0 0 23%}
.mx-gloss{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(176deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 26%,transparent 46%),
             radial-gradient(120% 60% at 50% 108%,rgba(16,22,12,.3),transparent 62%)}
.mx-plate{width:min(100%,432px);height:8px;margin-top:-2px;border-radius:0 0 99px 99px;
  background:linear-gradient(180deg,rgba(180,138,74,.7),rgba(180,138,74,.12))}

.mx-name{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--sage-700);
  line-height:1.15;text-wrap:balance;min-height:2.3em}
.mx-name em{font-style:normal;color:var(--gold-deep)}
.mx-name .mx-sub{display:block;font-family:var(--font-body);font-size:var(--fs-sm);
  color:var(--ink-soft);font-weight:300;margin-top:.5rem;line-height:1.55}
.mx-legend{list-style:none;margin:var(--sp-4) 0 0;padding:0;
  border-top:1px solid var(--hairline-sage)}
.mx-legend li{display:grid;grid-template-columns:14px 5.4rem 1fr;align-items:center;gap:.75rem;
  padding:.7rem 0;border-bottom:1px solid var(--hairline-sage)}
.mx-legend i{width:14px;height:14px;border-radius:4px;background:var(--sage-200);
  transition:background .7s var(--ease-out)}
.mx-legend b{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:600}
.mx-legend span{color:var(--sage-700);font-weight:500}
.mx-cta{margin-top:var(--sp-4)}
.mixer.is-idle .mx-cta{opacity:.4;pointer-events:none}
@media(max-width:860px){
  .mx-grid{grid-template-columns:1fr;gap:2rem}
  .mx-torte{width:min(84%,340px)}
  .mx-name{min-height:0}
}
@media(max-width:420px){
  .mx-legend li{grid-template-columns:14px 1fr;gap:.6rem}
  .mx-legend b{grid-column:2;margin-bottom:-.35rem}
  .mx-legend span{grid-column:2}
}
@media (prefers-reduced-motion: reduce){
  .mx-band,.mx-legend i,.mx-chip{transition-duration:.01ms}
}

/* ============ IMG ROW (Cremetorten) ============ */
.img-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:var(--sp-5)}
.img-row>*{min-width:0}
.img-row figure{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--sh);background:var(--paper)}
.img-row img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:720px){.img-row{grid-template-columns:1fr 1fr;gap:.8rem}
  .img-row figure:first-child{grid-column:1 / -1}}

/* Split-content generic (text + card) */
.info-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.info-split>*{min-width:0}
@media(max-width:820px){.info-split{grid-template-columns:1fr;gap:1.8rem}}
.hair-card{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:clamp(1.5rem,3vw,2.2rem);box-shadow:var(--sh-sm)}
.hair-card .gold-rule--short{margin-top:.2rem}

/* ============ ABLAUF STEPS (4 numbered, gold) ============ */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;margin-top:var(--sp-5)}
.steps>*{min-width:0}
.step{position:relative;padding-top:.4rem}
.step .num{font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.4rem);color:var(--gold);
  line-height:1;font-variant-numeric:tabular-nums;display:block}
.step h3{margin:.5rem 0 .35rem;font-size:var(--fs-h3)}
.step p{color:var(--ink-soft);font-weight:300;font-size:var(--fs-sm)}
.step::before{content:"";position:absolute;top:1.4rem;left:2.6rem;right:-1.6rem;height:1px;background:var(--gold);opacity:.35}
.step:last-child::before{display:none}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr;gap:1.4rem}.step::before{display:none}}
@media(max-width:460px){.steps{grid-template-columns:1fr}}

/* ============ WERTE (3 tiles) ============ */
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:var(--sp-5)}
.values>*{min-width:0}
.value{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:1.6rem 1.5rem;text-align:left}
.value .v-mark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--gold);color:var(--gold-deep);margin-bottom:.9rem}
.value h3{font-size:var(--fs-h3)}
.value p{margin-top:.35rem;color:var(--ink-soft);font-weight:300;font-size:var(--fs-sm)}
@media(max-width:760px){.values{grid-template-columns:1fr;gap:1rem}}

/* ============ ANLASSTORTEN FOTO-HERO ============ */
.photo-hero{position:relative;isolation:isolate;overflow:clip;min-height:min(86vh,760px);
  display:flex;align-items:flex-end}
.photo-hero .ph-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.photo-hero .ph-grain{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url("../img/grain-gold-vignette.webp") center/cover no-repeat;
  mix-blend-mode:multiply;opacity:.6}
.photo-hero .ph-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(28,39,26,.82) 0%,rgba(28,39,26,.34) 34%,rgba(28,39,26,.06) 60%,rgba(28,39,26,.24) 100%)}
.photo-hero .wrap{position:relative;z-index:3;width:100%;padding-block:clamp(2.4rem,5vw,4rem);color:var(--on-sage)}
.photo-hero .eyebrow{color:var(--gold-soft)}
.photo-hero h1{color:var(--porcelain);max-width:22ch;text-shadow:0 2px 30px rgba(20,28,18,.45);text-wrap:balance}
.photo-hero .lead{color:rgba(251,250,246,.9);max-width:44ch;margin-top:var(--sp-3)}
.photo-hero .caption-count{margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--gold-soft);letter-spacing:.04em}

/* ============ PORTFOLIO filter result / empty ============ */
.masonry.filtering .tile{transition-delay:calc(var(--d,0) * 30ms)}
.gal-empty{display:none;text-align:center;color:var(--ink-mute);padding:2rem 0}

/* Lightbox figure */
.lightbox figure{position:relative;display:flex;flex-direction:column;align-items:center;max-width:min(92vw,1000px)}
.lightbox .lb-cap{color:var(--porcelain);margin-top:.8rem;font-size:var(--fs-sm);text-align:center}
.lightbox .lb-cta .btn{pointer-events:auto}
.lightbox .lb-close{background:none;border:1px solid rgba(251,250,246,.4);border-radius:var(--r-pill);
  padding:.4em 1em;cursor:pointer}
.lightbox .lb-close:hover{background:rgba(251,250,246,.12)}

/* ============ UEBER-KRISTINA portrait hero ============ */
.portrait-hero{position:relative;isolation:isolate;overflow:clip;
  padding-top:calc(var(--nav-h) + clamp(2rem,5vw,4rem));padding-bottom:var(--section-y)}
.portrait-hero .wrap{position:relative;z-index:2}
.ph-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.ph-grid>*{min-width:0}
@media(max-width:860px){.ph-grid{grid-template-columns:1fr;gap:2rem}}
.portrait-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);
  border:1px solid var(--hairline);max-width:440px}
.portrait-frame img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.portrait-frame::after{content:"";position:absolute;inset:12px;border:1px solid var(--gold-soft);
  border-radius:calc(var(--r-lg) - 8px);opacity:.55;pointer-events:none}
.portrait-quote{font-family:var(--font-display);font-style:italic;font-size:var(--fs-h2);
  color:var(--sage-700);line-height:1.3;max-width:20ch}
.portrait-quote .q-src{display:block;font-style:normal;font-family:var(--font-body);
  font-size:var(--fs-sm);color:var(--ink-mute);margin-top:1rem;letter-spacing:.02em}
.ph-mono{width:60px;height:auto;opacity:.9;margin-bottom:1.2rem}

/* Story column */
.story{max-width:var(--wrap-narrow);margin-inline:auto}
.story p{max-width:none;margin-bottom:1.2rem;color:var(--ink-soft)}
.story .story-figure{float:right;width:min(42%,300px);margin:0 0 1.2rem 1.6rem;border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--sh);border:1px solid var(--hairline)}
.story .story-figure img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
@media(max-width:560px){.story .story-figure{float:none;width:100%;max-width:340px;margin:0 auto 1.6rem}}

/* Timeline extra (sits inside .timeline from system) */
.timeline-wrap{max-width:var(--wrap-narrow);margin-inline:auto}

/* ============ KONTAKT split ============ */
.contact-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.contact-split>*{min-width:0}
@media(max-width:900px){.contact-split{grid-template-columns:1fr}
  .contact-info{order:2}.contact-form{order:1}}
.contact-form{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3.5vw,2.6rem);box-shadow:var(--sh-sm)}
.form-step-label{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;margin-bottom:.8rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field-row>*{min-width:0}
@media(max-width:560px){.field-row{grid-template-columns:1fr;gap:0}}
input[type=date].input{appearance:none;-webkit-appearance:none}
.form-consent{display:flex;gap:.7rem;align-items:flex-start;margin:.4rem 0 1.4rem;font-size:var(--fs-sm);color:var(--ink-soft)}
.form-consent input{margin-top:.3rem;width:18px;height:18px;flex:0 0 auto;accent-color:var(--sage-600)}
.form-consent a{color:var(--sage-700);text-decoration:underline;text-underline-offset:2px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:1rem;padding:.9rem 1.1rem;border-radius:var(--r);font-size:var(--fs-sm);display:none}
.form-status.ok{display:block;background:var(--sage-wash);color:var(--sage-700);border:1px solid var(--hairline-sage)}
.form-status.err{display:block;background:var(--rose-wash);color:var(--rose-deep);border:1px solid #EED9DB}

/* Contact info card */
.contact-info .hair-card+.hair-card{margin-top:1.2rem}
.contact-deco{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--hairline);
  box-shadow:var(--sh-sm);margin-bottom:1.2rem}
/* 4:5 statt 4:3 — das Bild zeigt Kristina hochkant an einer dreistoeckigen Torte;
   ein Querformat-Crop wuerde entweder sie oder die Torte abschneiden. */
.contact-deco img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.nap-list{list-style:none;line-height:1.8}
.nap-list li{display:flex;gap:.7rem}
.nap-list .k{color:var(--ink-mute);min-width:5.5rem;font-size:var(--fs-sm)}
.nap-list a{color:var(--sage-700)}
.nap-list a:hover{text-decoration:underline}
.pay-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.pay-pill{padding:.4em .9em;border:1px solid var(--hairline);border-radius:var(--r-pill);font-size:var(--fs-sm);color:var(--ink-soft)}


/* ============ LEGAL / EDITORIAL TEXT ============ */
.legal{max-width:var(--wrap-narrow);margin-inline:auto;
  padding-top:calc(var(--nav-h) + clamp(2.4rem,6vw,4.6rem))}
.legal h1{color:var(--sage-700);overflow-wrap:break-word;hyphens:auto;margin-bottom:.4rem}
.legal .updated{color:var(--ink-mute);font-size:var(--fs-sm);margin-bottom:2rem}
.legal h2{font-size:var(--fs-h3);color:var(--sage-700);margin:2.2rem 0 .6rem}
.legal h3{font-size:1.1rem;color:var(--ink);margin:1.4rem 0 .4rem}
.legal p,.legal li{color:var(--ink-soft);max-width:none;margin-bottom:.9rem;overflow-wrap:break-word}
.legal ul{padding-left:1.2rem;margin-bottom:1rem}
.legal address{font-style:normal;color:var(--ink-soft);line-height:1.8;margin-bottom:1rem}
.legal a{color:var(--sage-700);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.legal .owner-note{background:var(--sand);border:1px dashed var(--sage-300);border-radius:var(--r);
  padding:.9rem 1.1rem;color:var(--ink-mute);font-size:var(--fs-sm);margin:.4rem 0 1.4rem}
.legal .gold-rule{margin:2.4rem 0}

/* ============ SECTION-HEAD helpers ============ */
.section-head .eyebrow{margin-bottom:.2rem}
.lead-narrow{max-width:56ch}

/* ============ small print row ============ */
.hairline-row{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;
  padding:1.1rem 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  color:var(--ink-mute);font-size:var(--fs-sm)}

/* Wide stage */
@media(min-width:2200px){
  .steps,.axes-grid{gap:2rem}
}

/* --- Timeline: default fully-drawn (no-JS/reduced-motion Fallback); dash nur bei js-draw --- */
.timeline svg.thread path{stroke-dasharray:none;stroke-dashoffset:0}
.timeline.js-draw svg.thread path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}

/* --- Filterbar: Chips an Content-Breite ausrichten --- */
.filterbar{padding-inline:0}
.filterbar > .wrap{padding-block:0}
/* --- Foto-Hero Nav-Lesbarkeit: dezenter Top-Scrim --- */
.photo-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:120px;z-index:2;
  background:linear-gradient(180deg,rgba(20,28,18,.28),transparent);pointer-events:none}

/* --- Tile-Button-Reset (Masonry) --- */
.tile{display:block;width:100%;padding:0;text-align:left;font:inherit;color:inherit}
/* --- Zeitstrahl-Ausrichtung: Faden exakt durch die Punkte --- */
.timeline{padding-left:2.4rem}
.timeline svg.thread{left:0;width:20px}
.timeline .milestone::before{left:calc(-2.4rem + 3px)}

/* --- Drawer über die Nav legen (sonst fängt der Burger die Close-Klicks ab) --- */
.nav-drawer{z-index:70}

/* --- Nav über Foto-Hero: helle Schrift bis zum Scrollen (Kontrast) --- */
.nav--onphoto:not(.scrolled) .brand,
.nav--onphoto:not(.scrolled) .nav-links a{color:var(--porcelain)}
.nav--onphoto:not(.scrolled) .nav-links a:hover{color:#fff}
.nav--onphoto:not(.scrolled) .nav-links a.is-active::after{background:var(--gold-soft)}
.nav--onphoto:not(.scrolled) .nav-cta{color:var(--porcelain);border-color:rgba(251,250,246,.55)}
.nav--onphoto:not(.scrolled) .nav-cta:hover{background:rgba(251,250,246,.15);color:#fff;border-color:var(--porcelain)}
.nav--onphoto:not(.scrolled) .nav-burger span,
.nav--onphoto:not(.scrolled) .nav-burger span::before,
.nav--onphoto:not(.scrolled) .nav-burger span::after{background:var(--porcelain)}

/* --- Anlass-Wähler in der schmalen Formularspalte: 2×2 statt 4 --- */
.contact-form .choice-grid{grid-template-columns:1fr 1fr}
.contact-form .choice .c-title{font-size:1.05rem}
@media(max-width:520px){.contact-form .choice-grid{grid-template-columns:1fr}}

/* --- sr-only (visuell versteckte, für Screenreader/Outline sichtbare Überschrift) --- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ 15 · DIE SECHSERBOX (/toertchen Signature) ==============
   Loest die alte "Palette" ab (neun Querschnitte nebeneinander) — die
   wiederholte nur, was direkt darueber schon steht. Hier waehlt man
   stattdessen echte sechs aus echten neun; 4,50 €/Stueck gilt ab sechs.
   Bewusst OHNE Drag&Drop: das waere auf dem Handy eine Zumutung und fuer
   Kristinas Kundschaft eine Huerde. Antippen legt rein, antippen nimmt raus. */
.box-bau{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(1.5rem,3vw,3rem);
  align-items:start}
.box-bau>*{min-width:0}

.bx-wahl{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.6rem,1.2vw,1rem)}
.bx-sorte{width:100%;display:block;position:relative;cursor:pointer;
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:0;overflow:hidden;text-align:left;
  transition:border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out)}
.bx-sorte img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.bx-name{display:block;padding:.5rem .6rem .55rem;font-size:.86rem;font-weight:500;
  color:var(--ink);line-height:1.2}
/* Der Punkt in der Sortenfarbe: verbindet die Kachel mit dem Querschnitt oben. */
.bx-name::before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;
  background:var(--c-glasur);margin-right:.42em;vertical-align:.04em}
.bx-plus{position:absolute;top:.5rem;right:.5rem;width:1.6rem;height:1.6rem;
  display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--porcelain) 88%,transparent);
  color:var(--sage-700);font-weight:600;line-height:1;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.bx-sorte:hover{border-color:var(--sage-400);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(46,124,110,.13)}
.bx-sorte:hover .bx-plus{background:var(--sage-600);color:#fff}
.bx-sorte:focus-visible{outline:2px solid var(--sage-600);outline-offset:2px}
/* Wie oft liegt diese Sorte in der Box? Zaehler statt Aus/An — sechsmal
   dieselbe Sorte ist eine legitime Bestellung. */
.bx-sorte[data-anzahl]:not([data-anzahl="0"]){border-color:var(--sage-500)}
.bx-sorte[data-anzahl]:not([data-anzahl="0"]) .bx-plus{background:var(--sage-600);color:#fff;
  font-size:.8rem}
.bx-sorte[data-anzahl]:not([data-anzahl="0"]) .bx-plus::after{content:"×" attr(data-anzahl)}
.bx-sorte[data-anzahl]:not([data-anzahl="0"]) .bx-plus{font-size:0}
.bx-sorte[data-anzahl]:not([data-anzahl="0"]) .bx-plus::after{font-size:.8rem}
.bx-sorte[data-voll]{opacity:.42;cursor:not-allowed}
.bx-sorte[data-voll]:hover{transform:none;box-shadow:none;border-color:var(--hairline)}

.bx-schachtel{position:sticky;top:calc(var(--nav-h-scrolled) + 1rem);
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:clamp(1.1rem,2vw,1.6rem)}
.bx-head{font-family:var(--font-display);font-size:1.25rem;margin:0 0 .8rem;color:var(--ink)}
.bx-plaetze{list-style:none;margin:0 0 1rem;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
/* Der leere Platz ist bewusst sichtbar: sechs Mulden zeigen ohne ein Wort,
   wie viele noch fehlen. */
.bx-platz{aspect-ratio:1;border-radius:calc(var(--r-card) - 4px);
  border:1px dashed var(--hairline);background:var(--sage-wash);
  position:relative;overflow:hidden;
  transition:border-color var(--dur-fast) var(--ease-out)}
.bx-platz img{width:100%;height:100%;object-fit:cover;display:block;
  animation:bx-rein .32s var(--ease-out)}
.bx-platz.belegt{border-style:solid;border-color:var(--sage-400);cursor:pointer}
@keyframes bx-rein{from{opacity:0;transform:scale(.72) translateY(-10px)}
                   to{opacity:1;transform:none}}
.bx-platz .bx-weg{position:absolute;inset:0;border:0;background:rgba(20,29,24,.55);
  color:#fff;font-size:1.1rem;line-height:1;cursor:pointer;opacity:0;
  display:grid;place-items:center;
  transition:opacity var(--dur-fast) var(--ease-out)}
.bx-platz:hover .bx-weg,.bx-platz .bx-weg:focus-visible{opacity:1}

.bx-stand{margin:0 0 .2rem;color:var(--ink-soft);font-size:.94rem}
.bx-stand strong{color:var(--sage-700)}
.bx-preis{margin:0 0 1rem;font-size:.94rem;color:var(--ink-mute);opacity:0;
  transition:opacity var(--dur) var(--ease-out)}
.bx-preis.an{opacity:1}
.bx-preis span{font-family:var(--font-display);font-size:1.5rem;color:var(--ink);
  margin-right:.25em}
.bx-aktion{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.bx-aktion .btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.bx-reset{background:none;border:0;color:var(--ink-mute);font-size:.86rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;padding:.3rem}
.bx-reset:hover{color:var(--ink)}
.bx-fuss{margin:.9rem 0 0;font-size:.8rem;color:var(--ink-mute);line-height:1.45}

@media(max-width:900px){
  .box-bau{grid-template-columns:1fr}
  /* Auf dem Handy MUSS die Schachtel unter die Auswahl und darf nicht kleben:
     sticky + eigener Scrollkontext = die Box verdeckt die Sorten, die man
     gerade waehlen will. */
  .bx-schachtel{position:static;order:2}
  .bx-wahl{order:1;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:420px){ .bx-wahl{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(prefers-reduced-motion:reduce){ .bx-platz img{animation:none} }