/* v177 — 2026-05-08: PDF-Viewer-Modal (Custom mit PDF.js).
   - Custom In-Site PDF-Reader statt Browser-Native-Open.
   - Modal-Pattern wie Standort/Karten-Modal: Backdrop-Blur, Bottom-Sheet
     Mobile / Centered Desktop, Toolbar oben, Page-Nav unten.
   - Page-Navigation: Pfeile + Indicator „3 / 12", Swipe Mobile.
   - Toolbar: Close left, Title center, Download right.
   - Canvas zentriert, fitWidth-Auto-Zoom.
   - Loading-State Spinner bis erste Page rendert.
   v176 — 2026-05-08: Hero-Cone Mobile zuerst (Senior-UI-Pivot, Maik).
   - Auf Mobile (≤900px) bekommt .hero__visual { order: -1 } → Cone oben,
     Headline+Sub+CTAs darunter. Begründung: Dolce Freddo öffnet auf
     Espresso-Schwarz, dort trägt nicht die Schrift sondern das Eis selbst
     die Emotion. Calice öffnet auf Cream → da trägt die Headline. Mobile-
     Magnetism: Eis-Cone = sofort begriffen, Text drunter = Lese-Belohnung.
   - .hero__inner gap space-1 → space-2 (8 → 16px) — Cone und Text-Block
     bekommen Atemraum, sonst wirkt Headline zusammengequetscht unter Cone-Glow.
   - .hero__inner padding-top space-4 → space-2 (32 → 16px) — Cone darf
     näher zum Header (Cone-Mask fadet zur Seite, Header semi-transparent).
   v175 — 2026-05-07 Nacht: Modal-Z-Index ueber Header + Pillars Padding kleiner.
   - Standort-Modal + Karten-Modal: z-index 80 → 120. Header war 102 →
     schaute durch das Modal (Logo + Burger sichtbar trotz Modal-Open).
   - Pillars padding-block Mobile/Tablet: var(--space-5) → var(--space-4)
     (48 → 32). Pillars→About hat keinen Farbtrenner (cream→cream),
     deshalb wirkte symmetrisches 48/48 doppelt so gross wie Hero→Pillars
     (espresso→cream, klarer Visual-Trenner). Kompakter wirkt's gleich.
   v174 — 2026-05-07 Nacht: About border-top zurueck raus + Mikrozittern fix.
   - Maik: „Linie zwischen Pillars und About wieder rausnehmen."
   - Mikrozittern auf Laptop bei Sortiment + Reviews: ursache war
     data-lenis-prevent auf .sortiment__grid + .reviews__grid → Lenis
     wechselte zwischen smooth-scroll und nativem Scroll beim
     Cursor-Eintritt/Austritt = Mikro-Stutter. Fix: prevent-Attribut
     wird per JS NUR auf Mobile (<=900px) gesetzt — auf Desktop ist
     Lenis-Konflikt eh kein Thema.
   - Plus IG-URLs auf dolcefreddo.zwickau / dolcefreddo.meerane.
   v173 — 2026-05-07 Nacht: Stats-Sub-Zeilen raus.
   - Maik: „auf dem Handy ist es 2-zeilig (Zwickau & Meerane, und
     Getränke, insgesamt) — lass einfach weg, Hauptlabel reicht."
   - .stat__sub Markup raus aus HTML (3 Spans entfernt).
   - .stat__label color: cream-72 → cream (voll weiss).
   v172 — 2026-05-07 Nacht: Standort-Card CTA-Pille Mobile gekuerzt.
   - Maik: „auf Mobile dann nur 'Mehr' + Pfeil".
   - „Mehr ansehen" + Inline-SVG-Pfeil; Mobile blendet das „ansehen"
     aus, Desktop blendet den Pfeil aus.
   v171 — 2026-05-07 Nacht: Standort-Card Mobile-Polish (Maik).
   - Photo-Label „EISCAFÉ" / „EISCAFÉ · PIZZERIA": Espresso-BG + Cream-Text
     (statt Gold) — wirkt wie Hero-Ghost-Btn, klar als nicht-klickbares
     Tag erkennbar.
   - Bottom-Block Mobile (≤480): Icons + „Mehr ansehen" Pille auf 1 Zeile
     mit space-between (war stacked column) → spart eine Zeile.
     Icons + CTA-Pille kompakter (32px Icons statt 36, kleinere Pille).
   v170 — 2026-05-07 Nacht: About border-top fuer Pillars-Trenner.
   Maik: „immer noch unterschiedliche paddings". Ursache: Pillars
   selbst war symmetrisch (48/48), aber Pillars→About hatte keinen
   sichtbaren Trenner (cream→cream) → das About-Foto wirkte wie eine
   Riesen-Pillars-Bottom-Lücke. Fix: border-top auf About wie bei
   Pillars/Sortiment/Standorte/etc.
   v169 — 2026-05-07 Nacht: Mobile-Polish-Pass 5 (Maik).
   - Standort-Card Bottom Mobile (≤480): linksbuendig statt zentriert
     (Tel/Location/IG/FB Icons + CTA-Pille).
   - Standort-Modal Pills (Speisekarten): btn__disc Pfeil raus.
   - JS: zentraler position-fixed Body-Lock fuer iOS-Safari (war
     Hauptursache fuer Body-Scroll-Bleed beim Modal).
   v168 — 2026-05-07 Nacht: Pillars-Padding-Asymmetrie auf Tablet fix.
   - Maik: „Abstände oben und unten unterschiedlich" auf Tablet (768).
   - Mobile-Override-Breakpoint von ≤600 auf ≤900 ausgeweitet, sodass
     Tablet auch space-5 statt space-7 padding bekommt.
   - Hero padding-bottom Mobile/Tablet: 24 → 48 (gleich Pillars-Top),
     damit Hero→Pillars-Übergang gleich Pillars→About-Übergang wirkt.
   v167 — 2026-05-07 Nacht: Mobile-Polish-Pass 4 (Maik).
   - Standort-Modal Hero: touch-action pan-y → horizontaler Swipe
     wechselt Bild (JS swipe-detection), vertikal scrollt Modal weiter.
   - Pfeil-Discs aus Hero-Btn („Unsere Cafés"), Standort-Card „Mehr
     ansehen" (ZW + ME) entfernt.
   v166 — 2026-05-07 Nacht: Mobile-Polish-Pass 3 nach Maik-Test.
   - Section-Padding auf Mobile (≤600px) global auf var(--space-5) (48)
     statt space-7 (96). Hero→Pillars→About→Sortiment etc. waren zu
     auseinandergerissen.
   - About Body-Text Mobile: kleiner (1.05rem → 0.95rem) — Calice-Vergleich.
   - About Signature: groesser (Mobile-Override).
   - Hero padding-bottom Mobile: space-5 → space-3 (kompakter Uebergang).
   - Drawer: Tel jetzt im Footer-Format (+49 ohne fuehrende 0).
   v165 — 2026-05-07 Nacht: Mobile-Polish-Pass 2 nach Maik-Test.
   - Drawer-Standorte: Stadt-Label + Social-Icons in einer Zeile
     (Maik: „auf Hoehe von Zwickau bzw Meerane"), Tel separat drunter.
   - About-Foto Mobile: Full-Bleed (100vw) + 4/5-Aspect, mehr Praesenz.
   - Meerane Hours-Group Mobile: stacked statt 2-spaltig, Trenner-Linie
     zwischen Eiscafé + Pizzeria (Maik: „nah dran").
   - Modal-Panels alle data-lenis-prevent (Anfrage-Modal-Scroll-Fix —
     Lenis hatte die Touch-Events gehijackt).
   v164 — 2026-05-07 Spätabend: Hero-Cone Mobile groesser + naeher.
   - Maik: „Video noch ein bisschen groesser + oben ranruecken,
     damit der 3D-Effekt besser zur Geltung kommt."
   - hero__visual height: 50/48vh → 60/58vh.
   - hero-photo max-width: 80/92vw → 95/100vw.
   - hero__inner gap: 16 → 8px (Cone-Block dichter an Headline/CTAs).
   v163 — 2026-05-07 Spätabend: Mobile-Polish-Pass nach Maik-Test.
   - H-Overflow: html + body overflow-x: clip + width 100% (statt nur hidden).
   - Standort-Modal Mobile: padding-bottom mit safe-area, max-height 88dvh.
   - Karten-Modal Mobile: max-height 85dvh + padding-bottom safe-area.
   - Anfrage-Modal Mobile: max-height 88dvh, padding-bottom safe-area,
     overscroll-behavior contain (iOS-Touch-Lock).
   - Galerie Swipe-Hint: align-self flex-end (rechts statt links, Calice).
   - Drawer-Standorte: pro Standort eigene Social-Icons (IG+FB) neben Tel.
   - Footer Mobile: Section-Divider zwischen Cols, Standorte direkt nach
     Brand (wichtigstes Quick-Info zuerst).
   v162 — 2026-05-07 Nacht: Pillars-Padding 64/32 → 96/96 (Findings-Pass).
   Bringt Section-Rhythmus auf einheitliche space-7-Cadence.
   v161 — 2026-05-07 Nacht: Sortiment + Reviews wieder zentriert,
   Standorte + Galerie bleiben linksbündig.
   Maik: Inhalts-Logik — Carousel-zentrierte und Tabs-zentrierte
   Sektionen bekommen mittige Heads, Listen-/Bento-Sektionen links.
   - .sortiment__head: text-align left → center, margin-inline 0 → auto.
   - .sortiment__head .section-head__sub: margin-inline 0 → auto.
   - .reviews__head: text-align left → center, margin-inline 0 → auto.
   - .reviews__head-row: align-items flex-start → center.
   - .reviews__tabs: margin-inline 0 → auto.
   v160 — 2026-05-07 Nacht: P3 — Desktop-Audit-Findings.
   - Reviews-Head Linksbündig-Bruch: .reviews__head-row align-items
     center → flex-start (Tabs/Sterne nicht mehr zentriert).
   - About-Section padding: space-4/space-5 → space-7 (Pillars→About
     Übergang war gequetscht, jetzt 96/96 wie restliche Cream-Sektionen).
   - Stats padding: space-5 → space-6 (Dark-Break braucht mehr Atemraum).
   - Reviews-Tabs margin-inline auto → 0 (linksbündig).
   - Galerie bekommt Sub-Headline (Calice-Pattern).
   v159 — 2026-05-07 Nacht: P1 — Touch-Targets ≥44px (Apple HIG).
   - .nav-toggle: 40×40 → 44×44.
   - .btn: min-height 44px.
   - .reviews__tab: padding aufgestockt → ≥44px Höhe.
   - .nav-drawer__list a: padding-block 8px → Höhe ~44.
   - .nav-drawer__location-tel/mail: padding-block 12px für Touch.
   v158 — 2026-05-07 Nacht: P0 — Section-Heads alle linksbündig
   (Calice-Pattern). Sortiment, Standorte, Galerie, Reviews:
   text-align center → left, margin-inline auto → 0.
   Sortiment-Sub margin-inline auch auf 0.
   v157 — 2026-05-07 Nacht: Galerie Swipe-Hint für Mobile.
   - Calice-Pattern: kleine Pfeil-Animation + „Wischen"-Label
     unterhalb der Galerie-Headline, nur sichtbar ≤1024px.
   - Tick wandert horizontal nach rechts → suggeriert Swipe.
   v156 — 2026-05-07 Nacht: Mobile-Drawer Senior-UI-Designer-Refactor.
   - Schrift halbiert: clamp(2.4rem, 7vw+1, 3.6rem) → clamp(1.5rem,
     1.1rem + 1vw, 2rem). Mobile 24-30px statt 38-58px.
   - Stagger jetzt für 4 Items + Locations + CTA + Contact (statt 5
     Items + Footer-Rows).
   - Neue Komponenten: .nav-drawer__locations (Quick-Block mit Tel),
     .nav-drawer__cta (Gold-Pille mit Pfeil), .nav-drawer__socials
     (round Icon-Buttons).
   - Drawer overflow-y: auto (statt hidden) für iPhone SE / kleine
     Geräte falls Inhalt nicht reinpasst.
   v155 — 2026-05-07 Nacht: Stats-Bar Desktop mittig zentriert.
   - Maik: „mittig anordnen auf desktop!!!"
   - .stats__inner: max-width 720px + margin-inline auto.
     Vorher: full container-width (~1152px @1280) → 3 Stats wirkten
     auseinandergerissen. Jetzt: kompakter Block in der Mitte.
   - Mobile (<600px) bleibt full-width für 3-spaltigen Wrap.
   v154 — 2026-05-07 Nacht: Stats-Bar Refactor (4 → 3, kleinere Zahlen,
   Sub-Labels, Mobile bleibt 3-spaltig).
   - Grid: repeat(4, 1fr) → repeat(3, 1fr).
   - Counter-Größe deutlich runter: clamp(1.8rem, 1.3rem + 2vw, 3rem)
     statt clamp(2.6rem, 1.8rem + 4vw, 4.6rem). Maik: „sind ganz
     schön fett." Block-Höhe via padding-block bleibt unangetastet.
   - .stat__sub: 2. Label-Zeile, mono-uppercase, dezent gold-soft,
     für editorial-Sub („Zwickau & Meerane", „und Getränke").
   - Mobile: keine 2-spalt-Logik mehr — 3 nebeneinander auch unter
     480px (Werte sind kurz: „2", „168+", „200+" — passt easy).
     Trenner-Linie auf engen Sizes ausgeblendet.
   v153 — 2026-05-07 Nacht: Galerie-Title auf Sortiment/Standorte-Größe.
   - Maik: „Überschrift so groß wie Standorte/Sortiment."
   - Galerie nutzte global --fs-h2 (56px @1280) — alle anderen
     Sektionen hatten clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem) Override
     (41.28px @1280). Visuell deutlich größer als Rest.
   - .gallery__head .section-head__title bekommt selbe clamp.
   - <em> in Title bleibt gold-italic (global section-head__title em).
   v152 — 2026-05-07 Nacht: Galerie mittlere 2 Reihen raus.
   - Maik: „Galerie zu viel mittendrin, mittlersten 6 raus."
   - g4-g9 Bento-Spans + Mobile-Reset-Selektoren entfernt.
   - Bleibendes Layout: Reihe 1-2: g1 (7×2) | g2,g3 (je 5)
                       Reihe 3-4: g10 (5) | g11 (7×2) | g12 (5).
   v151 — 2026-05-07 Nacht: Galerie auf Calice-Bento-Pattern.
   - Desktop: 12-Spalten-Grid mit g1-g12 spans (Calice-Layout 1:1).
   - Items: kein Border, kein BG, kein Zoom-Icon mehr — purer
     Editorial-Cut. Image-Hover scale 1.05 (statt vignette overlay).
   - Mobile (≤1024px): horizontal scroll-snap-Carousel mit Peek
     rechts (28vw padding-right), aspect 4/5, scroll-snap mandatory.
   - Lightbox-Click-Logic bleibt (button-Items mit data-gallery-item).
   v150 — 2026-05-07 Nacht: Calice-Link-Reposition.
   - .footer-brand__cross raus.
   - Calice als gold-Link in .footer-nav (5. Eintrag),
     mit Diagonal-Pfeil als External-Indikator.
   v149 — 2026-05-07 Nacht: Footer-Maik-Pass.
   - .footer-brand__copy raus (Maik: „klingt uncool").
   - Neuer .footer-brand__cross Cross-Link „Calice Zwickau ↗"
     unter dem Logo. Mono-Caps, dezent gold, hover-underline.
   - Pfeil-Icon (Diagonale, External-Indikator) neben Text.
   v148 — 2026-05-07 Nacht: Modal-Felder zart + Success-State.
   - Token --field-h: 42px → alle Form-Felder gleiche Höhe.
   - font-size 0.96 → 0.9rem, padding-block via min-height
     statt em (sicherer für vertikale Konsistenz).
   - Stepper bekommt min-height 42, btn-width 38 statt 44.
   - Seg-pills: outer padding 4 → 3, inner pill height auto-clamp.
   - Inputs: gleicher Padding/Höhe-Setup.
   - Success-State Block: Häkchen-Icon (gold-circle), Eyebrow,
     Display-Title mit Italic-Akzent, Copy, Schließen-Pille.
     Form ist hidden wenn success.is-visible.
   v147 — 2026-05-07 Nacht: Anfrage-Pille zart + Konsistenz.
   - .anfrage-cta__btn auf Modal-Submit-Pille-Werte angleichen
     (font 0.78rem, padding kompakter, letter-spacing identisch).
   - .anfrage-cta__arrow + .anfrage-cta__cta-row Styles raus
     (HTML hat den Span entfernt).
   v146 — 2026-05-07 Nacht: Anfrage-Modal Senior-UI-Refactor.
   - Modal in 3 Section-Blocks mit Mono-Caps-Header + Hairline-Trenner.
   - „Egal" Standort-Pill raus → 2 Pillen (Zwickau · Meerane), gleich
     breit (flex:1), Selected → gold-bg.
   - Custom Anlass-Select: Trigger als Mono-Caps-Button, eigenes
     Dropdown-Panel mit Hover-Gold-Highlight, ohne Native-Look.
   - Custom Date-Picker (Inline-Popover): Header mit ←/→-Navi und
     Monat-Title, 7-Spalten Mo-So Grid, Selected-Tag gold-gefüllt,
     Past-Days disabled, Out-of-Month-Days dimmed.
   - Personen-Stepper mit −/+-Buttons + zentralem Number-Input
     (native arrows hidden via -webkit-appearance: none).
   - Submit als Pille mit Pfeil-Icon rechts gepinnt (kein Block).
   v145 — 2026-05-07 Nacht: Anfrage-Sektion Maik-Pass.
   - Title font-size auf Section-Title-Style (clamp 1.7→2.6rem) —
     vorher var(--fs-h2) war zu groß im Verhältnis zu „Google
     Bewertungen.", „Zwickau & Meerane." etc.
   - Button: espresso-rect → GOLD-Pille (border-radius 999px,
     bg gold, color espresso) wie Maiks Referenz-Screenshot.
   - Photo BLEED-OUT links: column 0.8fr/1fr → 1fr/1fr +
     margin-left: clamp(-80px, -6vw, -32px) → ragt aus Container
     (overflow:hidden auf Section clipt sauber am Browser-Rand).
   v144 — 2026-05-07 Nacht: Anfrage-Sektion Refactor (Mockup-DNA).
   - .anfrage-cta__photo: Border-Radius RAUS, Box-Shadow RAUS, BG RAUS.
     Foto liegt jetzt frei auf Cream (editorial-Stillleben-Look),
     wie Maiks Referenz-Mockup.
   - Neuer Mono-Caps-Button .anfrage-cta__btn (espresso-bg, cream-text,
     rounded-rect, kein Disc-Pfeil mehr — Pfeil wandert raus).
   - Neuer .anfrage-cta__arrow (separate Linien-Pfeil-SVG, gold,
     40px breit) als zweiter visueller Anker rechts vom Button.
   - Neuer .anfrage-cta__cta-row (flex-row, gap, align-center).
   - Hover-States: Button leichter Lift + BG-Fade, Arrow translate-X.
   v143 — 2026-05-07 Nacht: Pills feste Spalten + niedriger.
   - Speisekarten-Pills: minmax(150,1fr) → repeat(auto-fill, 11em).
     Pills sind alle 11em (≈175px), nicht mehr container-gestreckt.
     Bei 2 Pills bleibt Platz rechts (statt 50/50 expanded).
   - padding-block 0.55 → 0.4em → Höhe ~43px statt 55px.
   v142 — 2026-05-07 Nacht: Pills gleiche Breite + Karten-Tab gold.
   - Standort-Modal Speisekarten-Pills: flex-wrap → CSS-Grid (auto-fit
     minmax 150px 1fr) → alle gleich breit, kein text-length-Sprung.
   - Karten-Modal Tab active: espresso → gold (Brand-Konsistenz, matched
     Foto-Pille + Komplette-Karte + Card-CTA-Pille).
   v141 — 2026-05-07 Nacht: Speisekarten-Pills kompakt (Maik: „enger und klarer").
   - Pills jetzt inline-flex statt grid (full-width raus). Mehrere passen
     nebeneinander dank flex-wrap.
   - Kein Icon-Bubble mehr, kein Meta („PDF · 2025" raus). Nur kleines
     gold-Icon + Name (mono uppercase 0.7rem) + Mini-Disc.
   - Style 1:1 angeglichen an .standort-card__cta-pill.
   v140 — 2026-05-07 Nacht: Modal radikal entschlackt (Maik-Insight).
   - Modal-Body: Adresse, Hours, Action-Buttons, Eyebrow-Row + Status RAUS.
     Card hat alles → Modal-Wiederholung war redundant.
   - Modal-Inhalt jetzt: Galerie + Title + Description + Speisekarten.
   - Speisekarten-Pills neu: full-width grid (Icon-Bubble + Name+Meta + Disc).
     Prominente Hauptaktion. Hover: gold-tint background + Icon-Bubble fillt
     gold + Disc translate-X.
   v139 — 2026-05-07 Nacht: Mobile-Pass.
   - Card-Bottom (≤480): column statt row → Icons zentriert oben, Pille
     zentriert volle-Breite drunter. Kein gequetschter Wrap mehr.
   - Standort-Modal (≤600): Hero 4:3 → 16:10, Body padding+gap tighter,
     Title 1.45rem fest (kein clamp-Sprung).
   - Karten-Modal (≤600): Panel padding tighter, Title 1.3rem,
     Card-Pills mehr padding für tap-Komfort.
   v138 — 2026-05-07 Nacht: Senior-UI-Pass auf Standort-Modal.
   1. Eyebrow-Row mit Open-Status rechts (Card-Konsistenz, Live-Berechnung).
   2. Title em raus, größer, rhythmischere Margins.
   3. Info-Grid bekommt subtle gold-tinted Card-Zone (border + bg) als
      „Daten-Quartier" abgesetzt von Description.
   4. Speisekarten-Pills mit PDF-Icon (gold), hover gold-fill + lift.
   5. Hours-Sub-Label kleiner + tabular-nums + 0.78rem für tighter Layout.
   6. Action-Buttons padding-block 0.95em (wuchtiger).
   7. Thumbs-Strip: gap+padding 6px, aktiver Thumb mit gold-ring-glow,
      inactive opacity 0.55 (deutlichere Hierarchie).
   v137 — 2026-05-07 Nacht: Open-Status + Disc-Pille + Karten-Modal.
   - .standort-card__status / __status-dot / __status-label: Open/Closed
     Indikator (8px Punkt + mono Label, gold-green wenn offen).
   - .standort-card__cta-pill mit .btn__disc-Pfeil rechts (Brand-DNA wie
     Hero/Komplette-Karte). Hover translate-X 2px nur auf Disc.
   - Neuer Block .karten-modal { __backdrop, __panel, __close, __head,
     __eyebrow, __title, __tabs, __tab, __panel-content, __card-pill,
     __card-name, __card-meta }. Tabs Espresso-Solid wenn aktiv,
     Card-Pills Hover gold-fill. Bottom-Sheet auf Mobile (≤600).
   v136 — 2026-05-07 Nacht: Card-Bottom Icons + CTA-Pill.
   - .standort-card__actions / __more / __social RAUS.
   - Neuer .standort-card__bottom: flex space-between, Icons links,
     CTA-Pill rechts.
   - .standort-card__icons: 4 round 36×36 Icon-Buttons in einer Row
     (Phone, Maps-Route, IG, FB) — Hover gold-fill + 1px translateY.
   - .standort-card__cta-pill „Mehr ansehen →": gold-solid Brand-Pill,
     pointer-events:none (Card-Click greift weiter), translateX 2px on
     Card-Hover.
   v135 — 2026-05-07 Nacht: Card-Cleanup auf Maik-Feedback.
   - Eyebrow „Komm vorbei" → „Standorte" (HTML).
   - Section-Title em raus (HTML) — kein Italic-Skript mehr auf Stadt-Namen.
   - Adresse einzeilig (HTML: br raus, comma rein), Body-Font Inter Tight,
     align-items: center, color brown statt brown-60 (lesbarer).
   - Hours-Label „Eiscafé"/„Pizzeria": Body-Font 0.95rem statt mono 0.62rem,
     normalcase, color espresso, weight 500 — deutlich größer + lesbarer.
   - Action-Button Override raus → Route bekommt jetzt default .btn--primary
     (gold-solid statt schwarz/espresso). Brand-Konsistenz mit Foto-Pille
     und „Komplette Karte".
   v134 — 2026-05-07 Nacht: Modal-Polish nach v133.
   - .standort-modal__panel max-height 90vh → 95vh.
   - .standort-modal__hero aspect 21/10 → 24/9 (deutlich kompakter).
   - .standort-modal__thumb aspect 1/1 → 4/3 (kompakter, breiter).
   - .standort-modal__body padding/gap kompakter.
   v133 — 2026-05-07 Nacht: Standort-Modal aufgeräumt.
   - .standort-modal__description: Body-Font (Inter Tight 300) statt
     Display-Italic-Skript (Maik: „so ein Skript ist Quatsch").
   - .standort-modal__address: Borders raus, Body-Font, Map-Pin via
     ::before/mask-image SVG (Konsistenz mit Card-Adresse).
   - .standort-modal__hours-block h4 / .__cards-block h4: Border-bottom
     raus (Maik: „so viele Linien hat man nirgends").
   - .standort-modal__cards-list: row flex-wrap statt column → Speisekarten
     als Pills NEBENEINANDER (Maik-Vorschlag).
   - .standort-modal__cards-list a: Pill-Style (border, radius-pill,
     padding) statt Text-mit-Underline.
   - .standort-modal__actions .btn: radius-xs Override raus → default pill.
   - .standort-modal__hero: aspect-ratio 16/10 → 21/10 (kompakter, weniger
     vertikales Cropping bei kleinen Viewports).
   - .standort-modal__title em: gold-italic (matched Section-Headline
     Pattern für Brand-Konsistenz).
   v132 — 2026-05-07 Nacht: Standorte-Header + Map-Pin + tabular-nums.
   - .standorte__head Eyebrow + Italic-em im Title gestylt (matched
     .section-head__title em → gold italic).
   - .standort-card__address: grid-Layout auto/1fr für Map-Pin-Icon links
     vor Adresse, gold-tinted SVG, leichter top-margin für Baseline-Match.
   - .standort-card__hours: font-variant-numeric: tabular-nums → alle
     Ziffern in gleicher Spaltenbreite (09:30 vs 11:00 stehen exakt
     untereinander). Senior-Polish.
   v131 — 2026-05-07 Nacht: Action-Buttons als Pills + Hours lesbarer.
   - .standort-card__actions .btn: border-radius-Override (xs/eckig) raus
     → übernimmt jetzt default pill-radius von .btn. Konsistenz mit
     Foto-Pille + „Komplette Karte" + sonstigen Pills auf der Site.
   - .standort-card__hours: font 0.74 → 0.82rem, color brown-60 → espresso,
     gap 0.28 → 0.32em, line-height 1.35 → 1.4. Hours sind jetzt deutlich
     besser lesbar.
   - dt: font-weight 500 → 600 (etwas bolder für Tag-Anker).
   - dd „closed"-Variante: bleibt brown-60 italic für visuelle Differenz.
   - hours-row-Spalte 3.6em → 4em (mehr Luft für „Di–Do"-Range).
   v130 — 2026-05-07 Nacht: Pille gold-solid + Hours-Group/Block/Label retour.
   - .standort-card__photo-label im Brand-Pill-Style (gold-solid +
     espresso-Text + radius-pill, matched .btn--primary „Komplette Karte").
   - .standort-card__hours-group/--dual/__hours-block/__hours-label retour
     (Pizzeria-Hours wieder bei Meerane, Zwickau bekommt auch ein
     __hours-block für visuelle Konsistenz mit Sub-Label „Eiscafé").
   - .standorte__grid align-items: stretch → Cards gleich hoch trotz
     unterschiedlicher Hours-Inhalte. Action-Strip via margin-top:auto.
   v129 — 2026-05-07 Nacht: Standorte kompakter + Pille aufs Foto + Hover-Glow.
   - .standort-card__photo-label überarbeitet: oben LINKS, glass-Effekt
     stärker (espresso 78% + blur 10), font 0.62rem, gold-Color,
     reveal-Animation (slight delay nach Card reveal).
   - .standort-card:hover: KEIN translateY mehr, KEIN border-color-Change,
     Bild-Scale RAUS — nur sanftes box-shadow Schein nach außen.
   - .standort-card__head: City + Social-Icons (statt Pille) auf einer
     Linie. Social-Icons jetzt 28×28 mit transparentem Border, nur Hover
     Gold-Fill — leiser im Header als im alten Footer.
   - .standort-card__pill RAUS (Body hat keine Pille mehr).
   - .standort-card__footer RAUS, .standort-card__more wird Inline-Subtext
     direkt nach Action-Strip, rechts ausgerichtet, gold-mono.
   - .standort-card__body padding kompakter (--space-2 statt --space-3
     unten + reduzierte gap).
   v128 — 2026-05-07 Nacht: Standorte gleiche Höhe + Pille statt Sub-Zeile.
   - Neuer .standort-card__head (City + Pille rechts daneben, baseline).
   - Neue .standort-card__pill (mono uppercase, gold-soft Border-Frame).
   - .standort-card__sub raus (HTML nutzt jetzt Pille).
   - .standort-card__hours-group(--dual) + .standort-card__hours-block +
     .standort-card__hours-label raus (HTML nutzt jetzt einfache .hours
     in beiden Cards, gleiche 7-Zeilen-Struktur → identische Höhe).
   - Body: padding-top reduziert, gap zwischen Header und Address tighter.
   v127 — 2026-05-07 Nacht: Standorte-Polish (Maik: „viel zu groß").
   - .standort-card__photo aspect-ratio 16/11 → 16/9 (kompakter).
   - .standorte__grid align-items: start → Cards stretchen sich nicht
     gegenseitig. Zwickau bleibt schlank, Meerane darf höher sein.
   - .standort-card__hours-group--dual: 2-Spalten Grid für Eiscafé+Pizzeria
     nebeneinander. Mobile (≤768) wieder 1-Spalte.
   - .standort-card__hours-block: einzelner Block in der Hours-Group.
   v126 — 2026-05-07 Nacht: Standorte Senior-UI-Refactor.
   - Header: Title kleiner (Sortiment-Style clamp 1.7-2.6rem), Eyebrow weg,
     Olivenzweig-Ornament-CSS bleibt aber wird durchs Element-Removen inaktiv.
   - Card kompakter: City + Sub-Title, Adresse, Hours-Group (Meerane mit
     2 Sub-Labels „Eiscafé" + „Pizzeria"), Action-Strip, Social + „Mehr ansehen".
     Card komplett klickbar (cursor + subtle Hover-Lift). Action-Buttons mit
     `data-stop-card-click` haben event.stopPropagation im JS.
   - Standort-Modal: Bottom-Sheet Mobile / Centered Desktop. Hero-Foto + 5
     Thumbnails (Click swipt Hero), Eyebrow + Title + Description, Adresse,
     Info-Grid mit Hours-Blocks + Karten-Block, Action-Buttons.
   - Backdrop mit blur + Slide-up-Animation. Body scroll-lock bei Open.
   v125 — 2026-05-07 Nacht: Live-Aggregate-Stern größer + gold (Maik: „Stern
   ist dann noch zu klein"). Span .reviews__live-aggregate-star hebt den ★
   visuell hervor — gleiche Optik wie der 5-Stern-Eyebrow oben.
   v124 — 2026-05-07 Nacht: Reviews Card-Look zurück (Maik: „Box-Style fand
   ich vorher schöner"). Hairline-Pattern komplett raus. Card-BG cream, Border
   brown-15, Radius zurück. Hover BLEIBT weiterhin raus (Maik bestätigt).
   v123 — 2026-05-07 Nacht: Reviews Senior-UI-Polish.
   - Card-Box-Look raus (Hairline-Pattern): kein cream-BG, kein Border, kein
     Radius. Stattdessen Grid mit `gap: 1px; background: brown-15` → 1px
     Hairlines schauen durch zwischen Cards.
   - Card-Hover komplett raus (waren transform + shadow + gold-border —
     anti-Pattern auf Non-Clickable Cards).
   - .reviews__live-aggregate: Mono-Style brown-60, mittig, klein — sitzt
     unter der Headline und zeigt „4,7 ★ aus 980 Bewertungen in Zwickau".
   - Mobile (≤768px): Hairline-Trick aus, Cards zurück zu Box-Look (cream-BG
     + border + radius) — passt im Carousel besser als nackte Cards.
   v122 — 2026-05-07 Nacht: Reviews-Carousel auf Mobile (Senior-UI-Pivot).
   - Desktop unverändert (3-Spalten-Grid).
   - Mobile (≤768px): .reviews__grid wird horizontaler scroll-snap-Container.
     Cards 80vw, scroll-snap-align: center, Peeks links/rechts angetäuscht.
   - .reviews__dots: Pagination-Dots (gold = active, brown-30 = inactive).
     JS gibt `is-active` per IntersectionObserver auf den Cards.
   v121 — 2026-05-07 Nacht: Reviews-Headline angeglichen an Sortiment-Style.
   - .reviews__aggregate jetzt mit Sortiment-Title-Größe (clamp 1.7-2.6rem)
     statt eigener großer Display-Variante. Gold-em raus.
   - Neuer .reviews__rating-stars (5 Sterne gold) ersetzt Eyebrow „Quello".
   - .reviews__sub-aggregate-Block bleibt definiert für künftige Nutzung,
     wird aber im HTML nicht mehr gerendert.
   v120 — 2026-05-07 Nacht: Footer-Bottom-Bar Layout fix.
   - Desktop: Copyright linksbündig + mkul-Spruch rechtsbündig (via
     justify-content: space-between auf .footer-social-row).
   - Mobile (≤600px): beide zentriert (column + align-items + text-align
     center, .footer-mkul mit flex-wrap + justify-content center).
   - .footer-bottom__legal: margin-left: auto raus (Hack ersetzt durch
     space-between auf Parent).
   v119 — 2026-05-07 Nacht: Wischen-Hint komplett entfernt (Maik: „durch
   die Pfeile benötigt es den Wischen-Pfeil nicht mehr"). .sortiment__scroll-hint
   + scrollHintArrow-Keyframe + Mobile-Toggle raus.
   v118 — 2026-05-07 Nacht: Mobile-Polish nach v117-Feedback.
   - Floating-Anfrage-Button (.float-cta) komplett entfernt + bobbing-Keyframe
     raus (Maik: unten gibt's eigene Anfrage-Sektion, doppelt redundant).
   - Wischen-Hint ist jetzt im .sortiment__viewport positioniert (statt im
     .sortiment__head) — sitzt direkt über dem Carousel/Becher.
   - Card-Width Mobile reduziert: 65vw → 55vw (≤768) und 70vw → 58vw (≤480),
     damit Side-Cards links/rechts mehr „angedeutet" durchschauen.
   v117 — 2026-05-07 Nacht: Sortiment 5-Card-Centered (Mockup-Treue).
   - Track ohne padding-inline: JS-Translate zentriert die aktive Card exakt
     auf Viewport-Mitte. Mask-Gradient schmaler (4% statt 6%) damit Edge-Cards
     mehr "angetäuscht" zu sehen sind.
   - 3 Card-States: .is-featured (scale 1.0), .is-side (±1, scale 0.85),
     .is-edge (±2, scale 0.65, opacity 0.4).
   - Card-Width responsive so dass 5 (Desktop) / 3 (Mobile) sichtbar sind:
     Desktop 220px, Laptop 200px, Mobile 65vw.
   - Cursor pointer auf nicht-aktiven Cards (klickbar, holt sie in die Mitte).
   v116 — 2026-05-07 Abend: Sortiment-BG temporär #fefdf9 für DALL-E-Bild-Match.
   v105 — 2026-05-07 Abend: Sortiment Pivot Auto-Marquee → Center-Snap.
   - Maik: „Loop stoppt buggy. Lass uns die Mittel-Card größer und manuell."
   - Marquee-Animation + Card-Duplikation komplett raus.
   - .sortiment__viewport wrapt grid + 2 Nav-Buttons (prev/next).
   - .sortiment__grid: scroll-snap-type x mandatory, scroll-behavior smooth.
   - Cards haben scroll-snap-align: center, JS gibt der Mitte-Card .is-featured.
   - .is-featured: transform scale(1.08), kleinerer drop-shadow.
   - Nav-Buttons absolut links/rechts, scrollen 1 Card jeweils.
   v104 — 2026-05-07 Abend: Marquee zurück auf Container-Breite (Maik-Wahl).
   - Full-width Breakout (100vw + position-Tricks) entfernt.
   - Cards bleiben im Container (1152px @ 1280 viewport), Mask + Loop-Fix bleiben.
   v103 — 2026-05-07 Abend: Sortiment Marquee Polish (3-fach Pass).
   - Loop-Fix: gap → margin-right damit translateX(-50%) seamless landet.
     Vorher hatte Track 11 gaps, halbe Strecke war 5.5 gaps off → 12px-Sprung,
     visuell als weißer Blitz beim Loop-Ende sichtbar.
   - Full-width Breakout: .sortiment__grid bricht aus Container heraus auf 100vw.
     Track läuft über die ganze Browser-Breite.
   - Mask-Gradient: linear-gradient transparent→opaque→transparent links+rechts.
     Cards faden am Rand sanft zur Cream-BG (Apple/Loro-Piana-Pattern).
   v102 — 2026-05-07 Abend: Marquee-Speed 180s → 120s (Mittelweg).
   v101 — 2026-05-07 Abend: Marquee 80s → 180s (Maik: „viel langsamer").
   v100 — 2026-05-07 Abend: Cards kleiner für 4 sichtbar auf Desktop.
   - Card-Width 400 → 270px (4 cards × 270 + 3 gaps × 24 = 1152, exakt Container).
   - Tablet bleibt 320, Mobile 280, Phone 75vw.
   v99 — 2026-05-07 Abend: Sortiment Auto-Marquee Desktop.
   - Maik: „durchlaufen lassen, ganz entspannt, hochwertig."
   - .sortiment__grid wird Viewport (overflow hidden auf Desktop, scroll-snap
     auf Mobile). Inner .sortiment__track wickelt die Cards.
   - Desktop (≥1024px): translateX 0→-50% in 80s linear infinite, pause on hover.
   - Mobile (≤1023px): track als display:contents, normaler scroll-snap-Flow.
   - JS in main.js dupliziert die 6 Cards (data-clone) für seamless Loop.
   - .sortiment__karte-Sub-Section aufgelöst, .sortiment__cta = 1 Pill „Komplette Karte".
   v98 — 2026-05-07 Abend: Sortiment Layout-Pass.
   - Cards Desktop 340 → 400px (premium-Feel).
   - .sortiment__scroll-hint position: relative im Block → absolute oben rechts
     in .sortiment__head (Calice-Pattern). Mobile-only (≤900px).
   - Speisekarte-Sektion aufgelöst, Pills direkt im Sortiment als .sortiment__karte
     (eyebrow „Alles auf einen Blick" + title + 2 Pills).
   - .sortiment__cta CTA-Pill entfernt (redundant).
   v97 — 2026-05-07 Abend: Sortiment Schluss-Pass.
   - Maik: „Cards größer und auf Desktop leicht durchlaufen, Mobile Scroll-Button."
   - .sortiment__grid: permanent horizontal-Scroller (auch auf Desktop), nicht
     mehr 6-Col-Grid. Cards 340px breit (statt 280px), scroll-snap center.
   - Neuer .sortiment__scroll-hint: Mobile-only (≤768px), pulse-Animation
     mit „Wischen ➜"-Indikator unter den Cards.
   - Neuer .sortiment__cta: gold Pill „Komplette Karte" als Anchor zu #speisekarte.
   v96 — 2026-05-07 Abend: Sortiment-BG auf #fefdf9 (Maik-Korrektur).
   - Maik gibt exakten Hex an. TEMPORÄR — bei eigenen 3D-Bildern zurück auf
     var(--cream-50). Memory-Eintrag in project-dolce-freddo-bg-temp.md.
   v95 — 2026-05-07 Abend: Sortiment-BG nochmal korrigiert.
   - Pixel-Sample der 6 ChatGPT-Bilder ergab Mittelwert #FCF9F4 (heller als
     mein Spec-Wert #F4ECDB). DALL-E hat Spec-Hex ignoriert.
   - .sortiment background: #F4ECDB → #FCF9F4 für nahtlose Integration.
   v94 — 2026-05-07 Abend: Sortiment-BG matched neue ChatGPT-Bild-BGs (#F4ECDB).
   - Maik: „exakt den Hintergrund den du hier hattest" (Stil-Lock-Wert in Spec).
   - Sortiment-Sektion war auf var(--cream-50) = #FBF7F0 (heller). Bilder haben
     #F4ECDB als BG, daher entstand sichtbarer Block-Rand. Jetzt 1:1 gleicher Ton.
   v93 — 2026-05-07 Abend: Speisekarten-Cards durch Hero-Pill-Buttons ersetzt.
   - Maik: „so soll die pills aussehen" (gold BG, schwarz Mono-Caps).
   - .speisekarte__grid + .speisekarte__card-Styles bleiben als dead-Code stehen.
   - Neuer .speisekarte__actions Container: flex center mit gap, 2 .btn--primary
     .btn--sm Pills nebeneinander.
   v92 — 2026-05-07 Abend: Speisekarte-Sektion neu (Sortiment-CTA ausgegliedert).
   - Cream-edge BG (warmes Braun) + espresso Eyebrow/Title (schwarz) — Maik:
     „braun mit schwarzen Dingen, eigene Abteilung."
   - 2 große PDF-Cards mit Hover-Lift, Card-Eyebrow Gold/Mono.
   - Sortiment-Ornamente (cone-mini + sprinkles) aus Sortiment-CSS rausgesortiert
     ist überflüssig — sie wurden im HTML schon gelöscht.
   v91 — 2026-05-07 Abend: Sortiment-Sektion editorial Mockup-Look.
   - Maik: „freigestellt wie Mockup, keine einzelnen Buttons. Pille zu groß."
   - Sortiment-Headline + Sub-Typography übersteuert auf About-Title-/Body-Werte
     für visuelle Konsistenz beider Hero-Sektionen.
   - .produkt-card: BG/Border/Shadow/Radius komplett raus → freigestellte Tiles.
   - .produkt-card__strip + __pill: display:none (Pill war zu groß, redundant).
   - .produkt-card__photo: cream-edge BG raus, transparent damit Cream durchscheint.
   - object-fit cover → contain (zeigt freigestellte Bilder voll an).
   - Card-Body: einheitliche Typography wie About-Body (Inter Tight 300, 1.02rem).
   - Card-Title: Display-Font, ~1.3rem.
   - Mobile + Tablet (≤1100px): Grid → horizontaler Flex-Scroller mit Snap-Points.
     Eine Card ~280px breit, scroll-snap-align center.
   v90 — 2026-05-07 Abend: Sortiment-Grid 6-spaltig statt 4-spaltig.
   - Maik: Filter raus, 6 Kategorien direkt anzeigen.
   - Desktop: 6 cols (vorher 4). Tablet: 3 cols. Mobile: 2 cols → 1 col.
   - Filter-CSS bleibt drin als dead-Code falls später wieder gebraucht.
   v89 — 2026-05-07 Abend: Sortiment-Tiles Mockup-DNA-Pass.
   - Card-Border raus (editorialer Look ohne Frame).
   - radius-md → radius-xs (3px, fast eckig, wie Mockup).
   - Neuer Mockup-Signature: schwarzer Footer-Strip zwischen Photo und Body
     mit „DOLCE"-Pill in Gold-Mono-Caps.
   - Hover-Border-Color obsolet entfernt (kein Border mehr).
   v88 — 2026-05-07 Abend: About-Foto Cinematic-Reveal-Animation entfernt.
   - Maik: „bei dem Bild auf über uns keine eingangsanimation."
   - .about__photo: initial clip-path: inset(0 100% 0 0) raus, transition raus.
   - .about__visual.is-revealed-Selektor obsolet entfernt.
   - reduced-motion-Override für .about__photo obsolet entfernt.
   v87 — 2026-05-07 Abend: Signature etwas größer (Maik-Wunsch nach v86-Mini).
   - height clamp(20-32px) → clamp(26-40px) — ~30% größer, bleibt aber inline.
   - signature-text 1rem → 1.1rem damit Grazie nicht zu zart neben Bild wirkt.
   v86 — 2026-05-07 Abend: Signature viel kleiner + inline neben Grazie-Text.
   - Maik: „die Unterschrift viel, viel kleiner machen. Grazie e arrivederci.
     und dahinter schreiben, unbedingt."
   - height clamp(48-90px) → clamp(20-32px). Bild jetzt ~96-153px breit,
     passt locker neben „Grazie e arrivederci." auf einer Linie.
   - vertical-align: middle damit Bild vertikal zentriert sitzt zur Body-Schrift.
   v85 — 2026-05-07 Abend: Signature auf PNG-Schriftzug umgebaut.
   - Italianno-Webfont raus (auch aus Google Fonts URL in HTML).
   - .about__signature-mark__name (span) → .about__signature-mark__img (img).
   - clip-path-Reveal bleibt (signWrite 2.8s) — funktioniert auf img genauso.
   - height clamp(48px, 6vw, 90px) damit PNG responsive skaliert.
   v84 — 2026-05-07 Abend: Pen-Tip-Hybrid komplett raus.
   - Maik: „schaut komisch aus." Pseudo-Punkt + Y-Schwankung kann nie 1:1 die
     Italianno-Glyph-Pfade treffen, daher visuell verloren.
   - .about__signature-mark__pen-Style + penWrite-Keyframes entfernt.
   - Zurück auf cleanen clip-path-Reveal (Italianno + signWrite 2.8s).
   v83 — 2026-05-07 Abend: Hybrid Pen-Tip-Animation für About-Signature.
   - Neuer Pseudo-Punkt `.about__signature-mark__pen` (7×7px schwarz, leicht
     weichgezeichnet, kleines Glow als Tinten-Aura).
   - penWrite-Keyframes synchron zu signWrite (2.8s, gleiche cubic-bezier),
     Pen-Tip läuft 0%→100% der Schrift-Breite mit ±10% Y-Schwankung
     für Auf-/Abstrich-Suggestion. Pausen identisch zu signWrite.
   - Pen erscheint bei 4% (Stift setzt an), verschwindet bei 100% (Stift hebt).
   v82 — 2026-05-07 Abend: signWrite-Keyframes auf 3 Wörter „Gabby e Federico"
   neu kalibriert (war vorher auf 2 Wörter „Federico Calligaro" optimiert).
   - Pausen jetzt nach „Gabby" (~32%) und nach „e" (~46%), Schluss-Schwung am o.
   - Italianno + Größe + Color bleiben.
   v81 — 2026-05-07 Abend: About-Signature Federpen-Pass.
   - Maik: „feine Grafenschrift, wirklich schön wie unterschreiben."
   - Font Caveat 700 → Italianno (Federpen-fein, italienisch, kalligrafisch).
   - Größer (clamp 2.4–3.4rem) damit feine Striche lesbar bleiben.
   - signWrite-Keyframes komplett neu: 2.8s, 5 Schreib-Pausen, ease wie echter
     Stift (langsam ansetzen, schwung, pause am Wort-Ende, weiter, Schluss-Schwung).
   v80 — 2026-05-07 Abend: About-Signature Schrift + Farbe an Maiks Referenzbild.
   - font-family: 'Caveat Brush' → 'Caveat' (regular Variable, 700). Feinere
     Marker-Linien, mehr Schwung im F/C/g — Calice-Brush war zu dick für DF.
   - color: var(--gold) → var(--espresso). Schwarz statt Gold (Referenz-Foto).
   - Weight 700 statt implizit 400, weil Caveat regular ohne Bold zu zart.
   - signWrite-Keyframes-Kommentar angepasst: Pausen jetzt zwischen Federico+Calligaro.
   v74 — 2026-05-07: Scroll-Cue auch auf Mobile/Tablet zeigen.
   Maik: „bei Mobile der Scroll-Button weg? — ja [aktivieren]."
   - Mobile-Override `.hero__cue { display: none }` entfernt.
     Cue rendert auf allen Viewports am Hero-Bottom.
   v73 — 2026-05-07: Sub-Block voll Container-Breite NUR bei echtem Mobile (≤600px).
   Maik: „Bei Mobil quetscht der Text. Volle Breite nutzen — aber bei Tablet
   noch nicht, sonst sieht's wieder blöd aus."
   - Neue @media (max-width: 600px): .hero__sub max-width: none.
     Damit greift bei iPhone (≤414) + kleinen Devices voller Container.
     Tablet-Portrait (601-900) behält den clamp aus v70.
   v72 — 2026-05-07: Header-Mobile-Breakpoint synchron mit Hero (768 → 900px).
   Maik bei vw=820: Desktop-Nav gequetscht („DOLCE FREDDO" wrapt 2-zeilig, Nav-Item
   „ÜBER UNS" wrapt 2-zeilig). Hero-Mobile-Layout greift schon bei 900, Header
   aber erst bei 768 → Inkonsistenz im Tablet-Portrait-Bereich.
   - .site-nav display:none / .nav-toggle display:inline-flex bei 900px (war 768).
   v71 — 2026-05-07: Sub-clamp greift auch auf Mobile/Tablet (nicht überschreiben).
   Maik-Screenshot bei Tablet-Portrait: Sub geht über volle Breite weil v69 Mobile-
   Override `.hero__sub { max-width: none }` den clamp ausgehebelt hat.
   - Mobile-Override-Regel entfernt → clamp aus v70 gilt auf allen Viewports.
     Bei vw=375 (iPhone): Sub ≈ 232px (Container 337px) — schmaler, lesbar.
     Bei vw=768 (Tablet): Sub ≈ 317px (Container 691px) — auf Headline.
   v70 — 2026-05-07: Sub-Block-Breite auf „Dolce Freddo."-Zeile (statt Genussmomente).
   Maik: „aber jetzt ist es wieder breiter als Dolce Freddo." (bei Tablet-Portrait
   ~900px sah Sub breiter aus als die erste Headline-Zeile).
   - hero__sub max-width clamp: 11.8rem + 23.6vw / 30.1rem max → 9.5rem + 21.5vw / 26rem max
     (em-Faktor von Genussmomente 6.55 → Dolce Freddo. 5.69).
     Bei vw=1244+: ≈ 416px (Dolce Freddo. ist 419px). Bei vw=900: ≈ 345px.
   v69 — 2026-05-07: Mobile-Hero-Polish (Sub breiter, Cone näher, Eyebrow neu).
   Maik: „Mobile ist Platz da, Sub soll wieder breiter. Eis näher an CTAs.
   Eyebrow: ‚in Zwickau und Meerane‘ statt ‚Zwickau · Meerane‘."
   - .hero__sub @max-width 900px: max-width none (vollwert Container statt clamp)
   - .hero__inner @max-width 900px: gap var(--space-4) → var(--space-2) (32 → 16px)
   - .hero__visual @max-width 900px: height 56vh → 50vh (Cone-Block kompakter)
   - HTML eyebrow: „Zwickau &middot; Meerane" → „in Zwickau und Meerane"
   v68 — 2026-05-07: Sub-Block dynamisch auf Headline-Breite (fit-content).
   Maik: „22ch zu schmal — soll exakt Breite Headline haben + clampen wie Headline."
   - hero__copy width: fit-content → Container schrumpft auf längste Headline-Zeile.
   - hero__sub max-width: 22ch → none → nimmt Container-Breite (= Headline-Breite).
     Dynamisches Verhalten erbt automatisch vom Headline-Schrift-clamp.
   v67 — 2026-05-07: Sub-Block schmaler + halbe Pixelgröße kleiner.
   - hero__sub max-width: 36ch → 22ch
   - hero__sub font-size: var(--fs-lead) → clamp(1.08rem, 0.93rem + 0.65vw, 1.28rem)
   v66 — 2026-05-07: Cone-Block 1:1 auf ac88745-Stand (Maik: „danach war es gut").
   - .hero-photo max-width: min(75vh, 50vw) → 75vh (nur eine Dimension, kein vw-Mix)
   - .hero-photo margin-inline-end: -4vw → -8vw
   - .hero::after z-index 10 → 4 (zurück auf ac88745-Stand)
   Sub/Headline/Cue v62-Verbesserungen bleiben (Maik hat dazu nichts beanstandet).
   v65 — 2026-05-07: Glow z-index 4 → 10 (verworfen — Maik: ac88745 war besser).
   v64 — 2026-05-07: Cone-Refactor v62/v63 RAUS — zurück auf v59-Cone.
   v63 — 2026-05-07: Cone-Mask + Mix-Blend-Versuch (verworfen — Maik fand's schlechter).
   v62 — 2026-05-07: Hero Cone-Stabilität + Mask + Sub-Block + Headline + Scroll-Cue.
   Maik: „Klo besser (Maske nicht mehr sehen), Eis bleibt zentriert beim Verkleinern,
   Sub eine Nummer kleiner aber etwa Block-Breite Dolce Freddo., Headline ein Tick
   kleiner, Scroll-Animation von oben nach unten."
   - .hero-photo: width clamp(380px, 50vw, 720px), aspect-ratio 4/5, kein
     min(vh,vw)-Mix → kein Sprung mehr beim Viewport-Wechsel.
   - .hero-photo Mask: ellipse 80% 95% mit weicheren Stops (35→55→75→90→100) →
     Container-Edge fadet komplett aus, keine sichtbare Box mehr.
   - .hero-photo align-self: center, margin-block: auto → fest mittig vertikal.
   - .hero__sub: font-size zurück auf var(--fs-lead), max-width 36ch → so breit
     wie Headline-Block, eine Nummer kleiner.
   - --fs-h1 token: clamp(2.4rem, 1.8rem + 3.6vw, 4.6rem) statt 2.6/1.9/4.5/5.4
     → Headline einen Tick kleiner damit Eis länger nebeneinander Platz hat.
   - .hero__cue-line: neuer Drop-Approach mit ::before-Tropfen der eindeutig von
     oben nach unten wandert (translateY -100% → 200%, opacity-Fade).
   v61 — 2026-05-07: Headline 3-zeilig (Dolce Freddo. ungebrochen).
   - hero__copy max-width: 40ch → none
   v60 — 2026-05-07: Hero-Sub eine Stufe größer + max-width auf Headline-Breite.
   - hero__sub font-size: var(--fs-lead) → clamp(1.25rem, 1.1rem + 0.7vw, 1.45rem)
   - hero__sub max-width: 32ch → 26ch
   - hero__sub line-height: 1.65 → 1.55
   v59 — 2026-05-07: Sauberer Revert auf v54-Stand (vor Breakpoint-Verschiebung).
   - Mobile-Breakpoint: 760px → 900px
   - hero-photo: max-width min(75vh, 50vw), margin-end -4vw
   - hero__copy max-width: 40ch
   - hero__sub max-width: 32ch, font-size var(--fs-lead) responsive, alpha 0.72
   - hero__ctas flex-wrap: wrap
   - .hero::after top:15%, height:50%, Center 70% 25%
   v58 — Cone + Glow Revert.
   v55–v57 — verworfen (Breakpoint-Verschiebung + Layout-Disziplin Bugs).
   Bug v56: ich hatte Cone verkleinert (55vw → 50vw, margin -8vw → -6vw) +
   Glow seit v41 nur in oberen 15-65% (passt nicht zur Cone-Position).
   - hero-photo max-width zurück min(75vh, 55vw), margin-end -8vw
   - .hero::after top: 0, height: 100%, Center bei 70% 50% (auf Cone-Position)
   - Mobile: Glow Center bei 50% 65% (auf Cone unten)
   v57 — 2026-05-07: Sub-Text-Breite auf Headline-Breite.
   Maik: Beschreibungstext so lang bis „Dolce Freddo.".
   Sub max-width 28ch → 32em (~480px bei 15px Body-Font). ch-Unit war zu schmal,
   weil ch in Body-Schrift kleiner ist als in Display-Font.
   v56 — 2026-05-07: Headline 3-zeilig + Pills nebeneinander.
   Bug v55: hero__copy max-width 30ch hat die Display-Headline mehrzeilig
   gebrochen — „Dolce Freddo." wurde zu „Dolce" / „Freddo." etc.
   - hero__copy max-width entfernt → Container so breit wie Inhalt
   - hero__sub max-width: 28ch (~ wie in Italien.-Breite)
   - hero__ctas flex-wrap: nowrap → Pills bleiben nebeneinander
   - hero-photo max-width: 50vw (war 55vw) + margin-end -6vw — Headline kriegt
     mehr Atemraum bei schmalen Desktops
   v55 — 2026-05-07: Layout-Disziplin (Bug bei Headline).
   Maik: „so lang wie Dolce Freddo, fixe kleiner, Cone weiter rechts, Breakpoint
   so spät wie möglich".
   - hero__sub max-width: 32ch → 26ch (etwa „Dolce Freddo." Breite)
   - hero__sub font-size: var(--fs-lead) → fixe 0.95rem (war responsive)
   - hero__copy max-width: 40ch → 30ch
   - hero-photo max-width: min(75vh, 55vw) — etwas breiter als 50vw
   - hero-photo margin-inline-end: -4vw → -8vw (Cone weiter rechts/Edge)
   - Mobile-Breakpoint: 900px → 760px (Desktop-Layout länger aktiv)
   v54 — 2026-05-07: Cone responsiver (verworfen).
   Statt Mobile-Breakpoint zu erhöhen, Desktop-Layout funktional bei 900-1024px:
   - hero-photo max-width: min(75vh, 50vw) → schmälere Desktops kriegen kleineren Cone
   - hero-photo margin-inline-end: -4vw (war -8vw) — weniger über Edge raus
   - hero__sub max-width: 32ch (war 52ch) — endet wie „wie in Italien."-Zeile
   - hero__copy max-width: 40ch (war 52ch)
   - Mobile-Breakpoint zurück auf 900px (war 1024px)
   Bei 917px Browserbreite jetzt Desktop-Layout aber ohne Overlap.
   v53 — 2026-05-07: Breakpoint 1024px (verworfen).
   Bei 917px hat Maik gemeldet: Cone überlagert Headline. Bei 900-1024px war
   Desktop-Overlay-Layout aktiv aber Viewport zu eng → Cone-Header-Overlap.
   Stack-Layout greift jetzt bis 1024px. Tablets-Landscape + kleine Laptops
   nutzen damit Text-oben/Cone-unten ohne Überlagerung.
   v52 — 2026-05-07: Eyebrow kurz, Scroll-Cue Drop-Line, Eis Mobile größer.
   1) Eyebrow „Italienisches Eiscafé in Zwickau und Meerane" → „Zwickau · Meerane"
      (Maik: zu lang, „italienisches eiscafé" steht eh schon woanders).
   2) Scroll-Cue zurück zur simplen Drop-Line (single Goldlinie, 70px lang,
      kontinuierlicher Fade-Down via background-position). Stroke-Draw-Pfeile
      raus — Maik fand sie nicht schön. „länger und ruhig wie am Anfang".
   3) Mobile Eis: 50vh → 56vh, ≤540px: 42vh → 48vh, max-width 88vw → 92vw.
   v51 — 2026-05-07: Body-Test mit Inter Tight.
   Maik möchte Inter Tight ausprobieren. Plus Jakarta raus, Inter Tight rein.
   Inter Tight ist tighter spacing als Standard-Inter, weniger generic.
   Weights 200/300/400/500/600 geladen. Hero-Sub + About bleiben weight 300.
   v50 — 2026-05-07: Plus Jakarta Sans (Test).
   Maik: Cormorant Serif raus („keine Italic, keine Serifenschrift im Body"),
   stattdessen zartere Sans als Bricolage. Pivot zu Plus Jakarta Sans Weight
   300 — modern, freundlich, leicht abgerundete Terminals, weniger fett.
   - --font-body jetzt Plus Jakarta Sans
   - --font-ui (neu) bleibt Bricolage für UI-Elemente (Buttons, Forms, Pills)
   - Hero-Sub: weight 300, line-height 1.65 für Atmung
   - About-Copy: weight 300, 1.02rem, line-height 1.7
   - Italic-em-Akzente raus (font-style: normal, weight 500 für Betonung)
   v49 — 2026-05-07: Cormorant Garamond (verworfen).
   Maik: Bricolage zu fett, „spiegelt das schöne nicht wieder". Pivot zu
   Cormorant Garamond — Italian-Editorial-Magazin-Vibe (Vogue Italia Pattern).
   Hero-Sub: 1.15× Größe (Serif braucht mehr), line-height 1.55, 0.85 alpha
   (statt 0.72) weil Light-Serif feiner braucht.
   About-Copy: 1.18rem Cormorant — Story liest sich wie Magazin-Spalte.
   --font-body bleibt Bricolage (für UI-Elemente, Pills, Forms).
   v48 — 2026-05-07: Mobile-Layout getrennt (Text/Cone separate Blöcke).
   Statt hero__visual als absolute über die untere Hälfte: jetzt als relative
   Flow-Block unter dem Text. hero__inner column-flex: Text-Block oben (mit
   eigener natürlicher Höhe), Visual-Block darunter (50vh fixed; ≤540px: 42vh).
   Maik: „zuerst die schriften und dann das eis" — komplette Trennung.
   v47 — 2026-05-07: Mobile-Layout entzerrt (top: 45%).
   Auf Mobile überlagerte Cone (Center) den Text → unleserlich. Jetzt:
   - .hero__visual nur untere Hälfte (top: 45%) statt full-Hero-Background
   - .hero-photo Größe reduziert (78vw × 48vh; ≤540px: 85vw × 42vh)
   - Container nicht mehr über Edge → margin-inline auto (statt -8vw)
   - object-position: center top (Cone-Top sichtbar, Spitze unten weg)
   - Hero__inner align-items: flex-start → Text klebt oben statt zentriert
   v46 — 2026-05-07: Eyebrow länger + Scroll-Cue Senior-Polish.
   1) Eyebrow „Zwickau · Meerane" → „Italienisches Eiscafé in Zwickau und Meerane".
   2) Scroll-Cue umgebaut: zwei gestaffelte SVG-Pfeile mit stroke-dasharray-
      Animation. Zeichnen sich von oben nach unten, fadet bei voll, Stroke
      schiebt sich raus → kontinuierlicher Flow ohne sichtbare Pause. Stagger
      0.65s zwischen Pfeil-A und Pfeil-B. Plus „MEHR"-Label das nur bei Hover
      einblendet (translateY-Reveal).
   v45 — 2026-05-07: Hero-Sub Mockup-Text + Scroll-Cue Drop-Line.
   1) Hero-Sub: „Bei Dolce Freddo vereinen wir italienische Tradition…" (Mockup).
   2) Scroll-Cue: „AVANTI"-Wort raus, stattdessen Drop-Line + Chevron.
      Goldlinie fadet von oben nach unten in Loop, Chevron bouncy synchron.
      Mockup-DNA-Pattern, kein Calice-Wort-Reuse mehr.
   v44 — 2026-05-07: Header initial transparent, beim Scrollen solid Hero-Farbe.
   Auf Hero scheint dunkler Hero-BG durch transparent Header → kein Übergang.
   Beim Scrollen wechselt Header zu --espresso-hero solid für Light-Sektionen.
   Plus Hero-Eyebrow „Italienisches Eis · Echtes Handwerk" → „Zwickau · Meerane".
   v43 — 2026-05-06: Pills im Mockup-Stil (sm Caps ohne Pfeil) + Mask aggressiver.
   1) Hero-CTAs auf btn--sm Variante: Caps, Mono-Spacing, kompakter. „Unsere
      Eissorten" → „Unser Angebot" (Maik-Wunsch). Disc-Pfeil entfernt.
   2) Mask-Edge weiter zurück: Ellipse 50%/60% (war 60%/70%), Edge bei 88% (war
      100%) → Right-Side Container-Rand garantiert nicht mehr sichtbar.
   v42 — 2026-05-06: 2160p-Source mit CRF 20 re-encoded.
   Plus 4-stufiger Source-Switch mit DPR-Check: Retina-Displays (DPR ≥1.5x) ab
   1024px Viewport bekommen die 2160p-Variante (statt erst ab 1440px).
   v41 — 2026-05-06: Glow erst bei 15% Hero-Höhe.
   Direkt unter dem Header war der Hero durch screen-blend leicht aufgehellt
   → sichtbare Kante zum Header-Solid. Top 15% ist jetzt pure --espresso-hero,
   matcht Header exakt.
   v40 — 2026-05-06: Glow z-index 1 → 4 (über Video, unter Inner-Text).
   Maik: Glow war hinter dem Video. Mit z-index 4 + mix-blend-mode screen liegt
   er jetzt VOR dem Video als additive Lichtquelle auf das Eis.
   v39 — 2026-05-06: Vignette ::after entfernt + Mask weicher.
   Maik sah im v38-State den Container immer noch als sichtbare Box, weil die
   Vignette ::after ihn am Edge mit --espresso-hero solid umrandet hatte —
   bei Hero-Glow daneben wirkte der Container als dark cutout. Vignette jetzt
   raus, Mask weicher (5 Stops, fadet ab 20% statt 25%) → kein Container-Edge
   mehr sichtbar, Hero-Glow scheint durch Mask hindurch.
   v38 — 2026-05-06: Glow auf Hero-Level (verworfen wegen Container-Edge).
   Maik-Erkenntnis: Glow am .hero-photo hatte die Eis-Container-Edge als
   sichtbare Kante (= „Video-Kante oben"). Glow ist jetzt am .hero::after,
   damit er über die GANZE Hero-Strecke fadet, ohne Container-Edge.
   Center 70%/22% (Desktop, über Eis rechts oben), 50%/25% auf Mobile.
   Filter blur 60px → keine sichtbare Form mehr.
   v37 — 2026-05-06: Top-Vignette ::before entfernt.
   Maik sah sie als „schwarzes Dazwischen" zwischen Header und Glow.
   Header und Hero sind jetzt durchgehend ein einziger Schwarz-Bereich (#000607).
   v36 — 2026-05-06: Header-BG matcht jetzt exakt Hero-BG.
   Background von --espresso-80 (rgba(11,8,7,0.85)) auf --espresso-hero (#000607)
   geändert → exakter Match mit Hero-Background. Backdrop-filter raus, weil der
   eine sichtbare Edge an der Filter-Grenze erzeugt. Auf Light-Sektionen ist der
   dunkle Header weiterhin klar lesbar.
   v35 — 2026-05-06: Header-Bottom-Border weg.
   .is-scrolled hatte border-bottom-color: cream-15 → sichtbar als helle Linie
   zwischen Header und Hero. Border-Color jetzt entfernt, Trennung kommt nur
   noch durch backdrop-blur + espresso-80.
   v34 — 2026-05-06: Header-Hero-Kante weg (Background transparent).
   Header initial transparent (statt --espresso #0B0807) → Hero-BG #000607
   scheint durch, keine sichtbare Linie zwischen Header und Hero-Top mehr.
   Beim ersten Scroll greift .is-scrolled → solid espresso-80 + blur(14px).
   v33 — 2026-05-06: Glow oben, Top-Vignette subtiler, 2160p-Source.
   1) .hero-photo__glow Center von 78% (unten) → 18% (oben), z-index 5 + mix-blend
      screen. Wirkt jetzt als Spotlight von oben auf die Eiskugeln statt
      Bühnen-Licht von unten.
   2) .hero-photo::before Höhe 30% → 18%, Stops weicher → keine sichtbare Kante.
   3) HTML Source-Switch 3-stufig: ≥1440px = 2160p-scrub (17 MB Retina),
      ≥760px = 1080p-scrub, <760px = 720p loop.
   v32 — 2026-05-06: Top-Vignette + Eis hochgezogen + Standbild-Schärfe.
   1) .hero-photo::before zusätzlicher Linear-Gradient von Hero-BG oben zu
      transparent unten (30% Höhe) → versteckt die Top-Kante des Videos.
   2) .hero-photo margin-block-start: 0; margin-block-end: auto → Eis sitzt
      jetzt am Top des Hero-Bereichs statt vertikal zentriert.
   3) .hero-photo__video: transform translateZ(0) + backface-visibility hidden
      erzwingt GPU-Compositing → Browser interpoliert pausierte Frames nicht
      mehr unscharf.
   v31 — 2026-05-06: Glow-Box-Outline weg.
   .hero-photo__glow Span war auf inset auto 6% 3% 6% + height 42% → klar
   rechteckige Box, gradient nur innen → Edge sichtbar als Rechteck. Jetzt
   inset:0 (voller Container) + gradient fadet mit 4 Stops bis Container-Edge
   transparent + Blur 45px → keine Box mehr sichtbar.
   v30 — 2026-05-06: Eis noch weiter rechts (margin-end -3vw → -8vw).
   v29 — 2026-05-06: Eis noch weiter rechts (margin-end 2vw → -3vw, ragt über Edge raus).
   v28 — 2026-05-06: Eis doch nach rechts (margin-end 12vw → 2vw).
   Maik-Korrektur — er meinte „nach rechts" damit die Headline links den vollen
   Atemraum bekommt. Eis sitzt jetzt knapp 2vw vom rechten Rand entfernt.
   v27 — 2026-05-06: Eis weiter links (verworfen).
   v26 — 2026-05-06: Mask-Edge weicher + Vignette-Overlay über Video.
   Mask jetzt 5-stufig (25/45/65/82/100% statt 35/60/92), Center kleiner (65%/75%
   statt 70%/80%) → längerer Fade. Plus: .hero-photo::after radial-gradient
   blendet Edge-Bereich zum Hero-BG-Schwarz → harte Mask-Kante endgültig weg.
   v25 — 2026-05-06: Gold-Glow kräftiger.
   v24 — 2026-05-06: Cream-Bottom-Gradient raus → Gold-Glow unter dem Eis.
   Der Cream-Linear-Gradient als Sektions-Übergang wirkte grau-grünlich
   (großflächiges Cream auf Schwarz erzeugt Tönungs-Artefakte). Stattdessen
   ist der vorhandene .hero-photo__glow umpositioniert: sitzt jetzt am
   Boden des Eis-Containers und liefert eine dezente Gold-Lichtquelle (matcht
   die Pistazien-Staubwolke im Video-Material). Hero bleibt sonst pure schwarz,
   harter Cut zur Pillars-Sektion (Cream).
   v23 — 2026-05-06: Bottom-Gradient (verworfen).
   v22 — 2026-05-06: heroFloat-Animation raus.
   Die Animation hat das ganze Video alle 7s um 12px hoch/runter geschoben
   und wurde von Maik als „Hintergrund bewegt sich" wahrgenommen. Video sitzt
   jetzt statisch, einzige Bewegung kommt aus dem Material selbst.
   v21 — 2026-05-06: Crossfade raus, neues Source-Video drin.
   v20 — 2026-05-06: Crossfade-Pass (verworfen).
   ARCHITEKTUR: 2 Video-Layer (a + b) im .hero-photo, beide absolut positioniert,
   opacity-getriggert. JS-Engine in main.js v6 fadet kurz vor Loop-Punkt zwischen
   ihnen. Kein Stutter, Original-Drehung erhalten.
   GRÖSSE: .hero-photo limitiert auf 75vh × 75vh (Eis kleiner). Auf Desktop rechts
   versetzt mit 4vw Edge-Abstand. Mobile: 80vw × 65vh, zentriert.
   MASK: jetzt am .hero-photo selbst (war .hero__visual full-hero), fadet Edges
   sanft in Hero-BG → keine Box-Kante.
   v19 — 2026-05-06: CSS-Mask um Hero-Video → Box-Kante endgültig weg.
   v18 — 2026-05-06: Drop-Shadow vom Hero-Video raus.
   v17 — 2026-05-06: Hero-Architektur — Video als Full-Hero-Background.
   PIVOT: Statt 2-Spalten-Grid (Text links · Video rechts) sitzt das Video jetzt
          absolut als Background über die ganze Hero-Strecke. Text-Copy liegt mit
          z-index 5 darüber. Cone-Spitze darf in Text-Bereich reinragen.
   EFFEKT: Eis-Visual ~100vh statt halbe Spalte (deutlich größer), keine Box-Kante
           mehr möglich (Video = Hero), Mockup-Layout-DNA stimmt.
   REIN:   .hero__visual absolute inset:0, z-index 1.
           .hero__inner flex/block statt grid, Text in .hero__copy max-width 52ch,
           z-index 5 für Overlay.
           Video object-fit: contain object-position: right damit Cone leicht rechts
           sitzt, Text links lesbar bleibt.
   v16 — 2026-05-06: Hero-BG #000607 + Eis-Visual größer (Grid-Approach).
   v15 — 2026-05-06: Hero-Korn + Gradient ganz raus.
   v14 — 2026-05-06: Hero-Background auf Video-Schwarz #000405.
   v13 — 2026-05-06: Hero-Background an Video-Schwarz angeglichen.
   v12 — 2026-05-06: Hero-Video (.hero-photo video Regel).
   v11 — 2026-05-06: Filter-Pills auf Editorial-Look.
   v10 — 2026-05-06: Mockup-DNA-Pass Pills (.btn__disc Komponente).
   v9 — 2026-05-05 Abend: Mobile-Drawer komplett-Pass.
   v8 — 2026-05-05 Abend: Mockup-Ornamente. */
/* v8 — Mockup-Ornamente (figurative Gold-Outline-SVGs an Sektions-Rändern). */
/* v7 — Marquee raus + Side-Watermarks + Hero-Sparkles. */
/* v6 — Sortiment-Filter, Footer Social, Anfrage-CTA, Marquee, Lenis. */
/* v5 — Mockup-DNA-Pass (Hero-Visual, About+Play, Filter-Pills, Standorte-Buttons, 4-Counter, Editorial-CTA). */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Farben */
  --cream: #F7F1E6;
  --cream-50: #FBF7F0;
  --cream-edge: #ECE4D2;
  --espresso: #0B0807;
  --espresso-deep: #050302;
  --espresso-hero: #000607;
  --espresso-80: rgba(11, 8, 7, 0.85);
  --gold: #B8945A;
  --gold-soft: #D4B989;
  --gold-dim: rgba(184, 148, 90, 0.55);
  --burgundy: #7B3340;
  --burgundy-soft: #9C4754;
  --brown: #231C18;
  --brown-60: rgba(35, 28, 24, 0.6);
  --brown-30: rgba(35, 28, 24, 0.3);
  --brown-15: rgba(35, 28, 24, 0.15);
  --cream-72: rgba(247, 241, 230, 0.72);
  --cream-40: rgba(247, 241, 230, 0.4);
  --cream-15: rgba(247, 241, 230, 0.15);
  --cream-08: rgba(247, 241, 230, 0.08);

  /* Type-Faces */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter Tight', system-ui, sans-serif;
  --font-ui: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type-Scale */
  --fs-mono: clamp(0.72rem, 0.65rem + 0.3vw, 0.84rem);
  --fs-body: clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
  --fs-lead: clamp(1.15rem, 1rem + 0.7vw, 1.35rem);
  --fs-h3: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --fs-h1: clamp(2.4rem, 1.8rem + 3.6vw, 4.6rem); /* v62: Tick kleiner damit Eis nebeneinander Platz hat. */
  --fs-counter: clamp(2.6rem, 1.8rem + 4vw, 4.6rem);

  /* Spacing-Scale (8pt-Basis) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;
  --space-9: 12rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: clamp(64px, 4vw + 48px, 88px);

  /* Easing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;

  /* Radii — Mockup-DNA: Bilder + Cards weicher, Pills + kleine Items eckig */
  --radius-xs: 3px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 12px 40px -16px rgba(35, 28, 24, 0.18);
  --shadow-lift: 0 24px 60px -20px rgba(35, 28, 24, 0.25);
  --shadow-tile: 0 2px 0 var(--brown-15), 0 18px 40px -22px rgba(35, 28, 24, 0.4);
  --shadow-tile-hover: 0 28px 60px -22px rgba(35, 28, 24, 0.45);
  --shadow-dark: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip; /* v163: hard-clip + auf html, weil body-only-overflow auf iOS-Safari rumzickt. */
}

body {
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  width: 100%;
}

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

button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: inherit; background: transparent; border: none; outline: none; width: 100%; }

a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }

ul { list-style: none; }

::selection { background: var(--gold); color: var(--espresso); }

/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section-head { margin-bottom: var(--space-6); max-width: 64ch; }

.section-head__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: var(--space-2);
}

.section-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.05;
  color: var(--espresso);
  letter-spacing: -0.015em;
}

.section-head__title em {
  font-style: italic;
  color: var(--gold);
  font-feature-settings: "ss01" 1;
}

.section-head__sub {
  font-size: var(--fs-lead);
  color: var(--brown-60);
  margin-top: var(--space-3);
  max-width: 56ch;
}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95em 1.65em;
  min-height: 44px; /* v159: Apple HIG Touch-Target. */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  cursor: pointer;
  text-align: center;
  position: relative;
}

.btn--primary {
  background: var(--gold);
  color: var(--espresso);
  border: 1px solid var(--gold);
}
.btn--primary:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--cream);
  opacity: 0.92;
}
.btn--ghost:hover { background: var(--cream); color: var(--espresso); opacity: 1; }

.btn--ghost-dark {
  color: var(--espresso);
  border: 1px solid var(--brown-30);
}
.btn--ghost-dark:hover { background: var(--espresso); color: var(--cream); border-color: var(--espresso); }

.btn--solid-dark {
  background: var(--espresso);
  color: var(--cream);
  border: 1px solid var(--espresso);
  border-radius: var(--radius-xs);
}
.btn--solid-dark:hover { background: var(--brown); border-color: var(--brown); transform: translateY(-1px); }

.btn--block { width: 100%; }

.btn--sm {
  padding: 0.7em 1.3em;
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-family: var(--font-mono);
  font-weight: 500;
}

@media (max-width: 768px) {
  .btn--sm.btn--hide-sm { display: none; }
}

/* Header-CTA: kompakter (vertikales Padding reduziert) — wirkt weniger wuchtig. */
.site-header__actions .btn--sm {
  padding-block: 0.45em;
}

/* Disc-Pfeil-Indikator — Mockup-Signatur.
   Sitzt rechts im Pill, kreisförmig, etwas dunkler als Pill-Background, mit
   Pfeil drin. Skaliert über em mit dem Button. */
.btn__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--espresso);
  color: var(--cream);
  flex-shrink: 0;
  margin-left: 0.5em;
  margin-right: -0.55em;
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.btn__disc svg {
  width: 0.95em;
  height: 0.95em;
  stroke-width: 1.8;
}

/* Pills mit Disc bekommen automatisch tighter Right-Padding,
   damit die Disc bündig im Pill sitzt. */
.btn:has(.btn__disc) { padding-right: 0.5em; }

/* Disc-Hover: leichter Shift nach rechts + Tönung-Tick. */
.btn:hover .btn__disc {
  transform: translateX(2px) rotate(-4deg);
}
.btn--primary:hover .btn__disc { background: var(--brown); }

/* Invertierte Disc für solid-dark Pills (Espresso-Pill → Gold-Disc) */
.btn--solid-dark .btn__disc {
  background: var(--gold);
  color: var(--espresso);
}
.btn--solid-dark:hover .btn__disc {
  background: var(--gold-soft);
}

/* Outline-Disc für Ghost-Pills */
.btn--ghost .btn__disc,
.btn--ghost-dark .btn__disc {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
}

/* Kleine Pills (btn--sm) — Disc kompakter */
.btn--sm .btn__disc {
  width: 1.7em;
  height: 1.7em;
  margin-left: 0.4em;
  margin-right: -0.4em;
}
.btn--sm .btn__disc svg {
  width: 0.85em;
  height: 0.85em;
}

/* ============================================================
   5. SITE HEADER
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 102;
  /* v44: Initial transparent. Auf Hero (dunkel) scheint Hero-BG durch → wirkt
     wie Hero-Farbe ohne sichtbaren Übergang. Beim Scrollen (.is-scrolled) wird
     Header solid --espresso-hero — sorgt für Lesbarkeit auf Light-Sektionen. */
  background: transparent;
  color: var(--cream);
  height: var(--header-h);
  transition: background var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled {
  background: var(--espresso-hero);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  /* v9: Drawer ist DOM-Kind des Headers (z-index 101) und liegt im selben
     Stacking-Context. Inner muss höheren z-index haben damit Logo + Burger
     ÜBER dem geöffneten Drawer sichtbar bleiben. */
  position: relative;
  z-index: 110;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  color: var(--cream);
  transition: transform var(--dur-fast) var(--ease-out);
  transform-origin: left center;
}

.site-header.is-scrolled .site-header__logo { transform: scale(0.94); }

.logo-crown {
  display: inline-flex;
  width: calc(var(--header-h) - 16px);
  height: calc(var(--header-h) - 16px);
  color: var(--gold);
  flex-shrink: 0;
}
.logo-crown svg { width: 100%; height: 100%; }
.logo-crown img { width: 100%; height: 100%; object-fit: contain; display: block; }

.logo-text { display: inline-flex; flex-direction: column; line-height: 1; }

.logo-name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--cream);
}

.logo-sub {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--gold);
  margin-top: 0.32em;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.site-nav__list a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cream);
  opacity: 0.75;
  position: relative;
  padding: 0.5em 0;
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.site-nav__list a:hover { opacity: 1; color: var(--gold-soft); }
.site-nav__list a:hover::after,
.site-nav__list a.is-current::after { transform: scaleX(1); }
.site-nav__list a.is-current { opacity: 1; color: var(--gold); }

.site-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Mobile-Burger */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 105;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--cream);
  border-radius: 1px;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

/* ============================================================
   5b. NAV-DRAWER (Mobile)
   ============================================================ */
.nav-drawer {
  position: fixed;
  inset: 0;
  /* v9: explizite Viewport-Höhe — inset:0 reicht bei flex+space-between nicht aus,
     der Container kollabierte sonst auf Inhalts-Höhe (~176px) und Pillars schienen durch.
     dvh + vh-Fallback für iOS-Safari Dynamic-Viewport. */
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  background: var(--espresso);
  padding: calc(var(--header-h) + var(--space-4))
           var(--container-pad)
           calc(var(--space-4) + env(safe-area-inset-bottom, 0));
  z-index: 101;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto; /* v156: scrollable wenn Inhalt zu viel (kleine Geräte) */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
}

.nav-drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(247, 241, 230, 0.04) 1px, transparent 0);
  background-size: 18px 18px;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.nav-drawer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(184, 148, 90, 0.12), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.nav-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.nav-drawer.is-open::before,
.nav-drawer.is-open::after { opacity: 1; }

.nav-drawer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.nav-drawer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav-drawer__list li { overflow: hidden; }

/* v156: Schrift halbiert + line-height auf 1.15 für mehrzeilige Items. */
/* v159: padding-block für Touch-Target ≥44px. */
.nav-drawer__list a {
  display: block;
  padding-block: 0.5em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  color: var(--cream);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 700ms var(--ease-quint),
              opacity 500ms var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.nav-drawer.is-open .nav-drawer__list a {
  transform: translateY(0);
  opacity: 1;
}

.nav-drawer.is-open .nav-drawer__list li:nth-child(1) a { transition-delay: 120ms; }
.nav-drawer.is-open .nav-drawer__list li:nth-child(2) a { transition-delay: 170ms; }
.nav-drawer.is-open .nav-drawer__list li:nth-child(3) a { transition-delay: 220ms; }
.nav-drawer.is-open .nav-drawer__list li:nth-child(4) a { transition-delay: 270ms; }

.nav-drawer__list a:hover { color: var(--gold); }

.nav-drawer__num {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  color: var(--gold);
  vertical-align: top;
  margin-right: 0.7em;
  display: inline-block;
  transform: translateY(0.5em);
}

/* v156: Standorte Quick-Block — 2 Spalten auf ≥420px, 1 Spalte sonst. */
.nav-drawer__locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--cream-15);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out) 320ms,
              transform var(--dur-slow) var(--ease-quint) 320ms;
}

.nav-drawer.is-open .nav-drawer__locations {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 420px) {
  .nav-drawer__locations { grid-template-columns: 1fr; gap: var(--space-2); }
}

.nav-drawer__location { display: flex; flex-direction: column; gap: 4px; }

.nav-drawer__location-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.nav-drawer__location-addr {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--cream-72);
  line-height: 1.4;
  margin: 0;
}

.nav-drawer__location-tel {
  display: inline-block;
  padding-block: 12px; /* v159: Touch-Target ~44px. */
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--gold);
  text-decoration: none;
  margin-top: 2px;
}

/* v165: Stadt-Label + Social-Icons auf einer Zeile (Maik), Tel separat drunter. */
.nav-drawer__location-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* v163: Legacy Row-Wrapper falls noch genutzt. */
.nav-drawer__location-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.nav-drawer__location-socials {
  display: inline-flex;
  gap: 6px;
}

.nav-drawer__location-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--cream-15);
  color: var(--cream-72);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.nav-drawer__location-socials a:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(184, 148, 90, 0.08);
}

.nav-drawer__location-socials svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.nav-drawer__location-tel:hover { color: var(--gold-soft); }

/* v156: Footer-Block — CTA-Pille + Mail + Socials. */
.nav-drawer__footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--cream-15);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out) 380ms,
              transform var(--dur-slow) var(--ease-quint) 380ms;
}

.nav-drawer.is-open .nav-drawer__footer { opacity: 1; transform: translateY(0); }

/* Gold-Pille CTA */
.nav-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1rem 1.4rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--espresso);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.nav-drawer__cta:hover {
  background: var(--gold-soft);
  transform: translateY(-1px);
}

.nav-drawer__cta-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav-drawer__cta:hover .nav-drawer__cta-arrow { transform: translateX(3px); }

/* Mail + Socials Row */
.nav-drawer__contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.nav-drawer__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* v159: Touch-Target. */
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--cream-72);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-drawer__mail:hover { color: var(--gold); }

.nav-drawer__socials { display: flex; gap: 8px; }

.nav-drawer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--cream-15);
  color: var(--cream-72);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.nav-drawer__social:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(184, 148, 90, 0.08);
}

.nav-drawer__social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (max-width: 900px) {
  /* v72: Synchron mit Hero-Mobile-Breakpoint (war 768) — verhindert Header-
     Quetschung bei Tablet-Portrait. */
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ============================================================
   6. HERO — Mockup-DNA: Headline links + großes Foto rechts
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--space-5));
  padding-bottom: var(--space-6);
  overflow: hidden;
  color: var(--cream);
  background: var(--espresso-hero);
  isolation: isolate;
}

.hero::before {
  content: none;
}

/* v59: Glow zurück auf v54-Stand — top:15%, height:50%, Center 70% 25%. */
.hero::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 0;
  right: 0;
  height: 50%;
  background: radial-gradient(
    ellipse 45% 50% at 70% 25%,
    rgba(184, 148, 90, 0.32) 0%,
    rgba(184, 148, 90, 0.16) 30%,
    rgba(184, 148, 90, 0.05) 55%,
    transparent 80%
  );
  filter: blur(60px);
  pointer-events: none;
  z-index: 4; /* v66: zurück auf ac88745-Stand. */
  mix-blend-mode: screen;
}

@media (max-width: 900px) {
  .hero::after {
    top: 12%;
    background: radial-gradient(
      ellipse 60% 40% at 50% 25%,
      rgba(184, 148, 90, 0.32) 0%,
      rgba(184, 148, 90, 0.16) 30%,
      rgba(184, 148, 90, 0.05) 55%,
      transparent 80%
    );
  }
}

.hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h) - var(--space-6));
  min-height: calc(100svh - var(--header-h) - var(--space-6));
  z-index: 5; /* über dem Video */
}

.hero__copy {
  position: relative;
  z-index: 5;
  /* v61: max-width: none — Headline darf natürlich fließen, "Dolce Freddo." auf
     einer Zeile, insgesamt 3 Zeilen. */
  max-width: none;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: var(--space-3);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
}

.hero__title-line { display: block; }
.hero__title-line--italic { font-style: italic; color: var(--gold); font-feature-settings: "ss01" 1; }

.hero__sub {
  /* v68: max-width folgt der Headline-Schrift-clamp × em-Faktor (~6.55 für
     „Genussmomente" in Fraunces) → Sub-Block schrumpft/wächst dynamisch genauso
     wie die Headline. Bei großen Viewports endet der Sub auf gleicher Pixel-
     Position wie das „e" von „Genussmomente". */
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.08rem, 0.93rem + 0.65vw, 1.28rem);
  color: rgba(247, 241, 230, 0.72);
  max-width: clamp(13.5rem, 9.5rem + 21.5vw, 26rem); /* v70: „Dolce Freddo."-Breite. */
  margin-bottom: var(--space-5);
  line-height: 1.6;
  letter-spacing: 0.005em;
}

.hero__ctas {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap; /* v59: Revert auf v54 — Pills wrappen wieder bei Bedarf */
}

/* Video sitzt absolut über den ganzen Hero-Bereich, aber das eigentliche
   .hero-photo ist begrenzt (max 75vh) und rechts versetzt. Cone darf in
   Text-Bereich reinragen. Mask sitzt am .hero-photo selbst (siehe unten). */
.hero__visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.hero-photo {
  position: relative;
  width: 100%;
  height: 100%;
  /* v66: 1:1 ac88745 — max-width 75vh (eine Dimension), margin-end -8vw. */
  max-width: 75vh;
  max-height: 75vh;
  margin-inline-start: auto;
  margin-inline-end: -8vw;
  margin-block-start: 0;
  margin-block-end: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-image: radial-gradient(
    ellipse 50% 60% at 50% 50%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 0.9) 35%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0.2) 72%,
    rgba(0, 0, 0, 0) 88%
  );
  mask-image: radial-gradient(
    ellipse 50% 60% at 50% 50%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 0.9) 35%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0.2) 72%,
    rgba(0, 0, 0, 0) 88%
  );
}

/* v39: Vignette ::after entfernt — sie hatte den hero-photo Container am Edge
   mit --espresso-hero solid umrandet und damit den Container als sichtbare Box
   abgegrenzt (genau das was Maik als „Video-Kante" sah). Mask alleine reicht
   für sauberen Edge-Fade — der Hero-Glow scheint durch den Mask-Bereich. */
.hero-photo::after {
  content: none;
}

/* v37: Top-Vignette komplett raus. Maik sah sie als „schwarzes Dazwischen"
   zwischen Header und Hero-Glow. Mask + radiale Vignette (::after) reichen
   für Edge-Verstecken — Top braucht keinen extra Layer. */
.hero-photo::before {
  content: none;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
  display: block;
  image-rendering: auto;
}

/* Video-Schärfe: image-rendering auto + transform: translateZ(0) erzwingt
   GPU-Layer → Browser interpoliert beim Pause-Frame nicht mehr unscharf. */
/* v192: Hero-Poster als sichtbares <img> im DOM für instant-LCP. Image lädt
   schneller als Video-Decode, Lighthouse registriert Image als LCP-Element.
   v193: Poster verschwindet INSTANT wenn Video bereit ist (kein 1.4s-Crossfade
   weil Poster und Video-Frame-0 identisch sind; Crossfade erzeugte Geister-
   effekt zwischen Poster-Frame-0 und Video-Frame-15+). */
.hero-photo__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 1;
  display: block;
  pointer-events: none;
  opacity: 1;
}
.hero-photo.is-video-ready .hero-photo__poster {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.hero-photo__video {
  image-rendering: auto;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Crossfade: zwei Videos liegen exakt übereinander. Aktives = opacity 1,
   anderes = opacity 0. JS-Engine schaltet beim Loop-Punkt um.
   v64: mix-blend-mode RAUS — Mask alleine löst Edge wie in v59 schon gut. */
.hero-photo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 2;
  display: block;
  opacity: 0;
  /* v193: Instant-Swap statt 1.4s Crossfade. Poster und Video-Frame-0 sind
     identisch → Snap erzeugt keinen sichtbaren Schnitt, vermeidet aber den
     Geistereffekt durch parallelen Render von Poster-Frame-0 + Video-Frame-N. */
  transition: opacity 0ms;
}

.hero-photo__video.is-active {
  opacity: 1;
}

@media (max-width: 900px) {
  .hero-photo {
    max-width: 80vw;
    max-height: 65vh;
    margin-inline: auto;
  }
}

/* v38: hero-photo__glow Span deaktiviert — Glow ist jetzt am .hero (siehe oben).
   Span bleibt im DOM für Backwards-Compat, aber unsichtbar. */
.hero-photo__glow {
  display: none;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Scroll-Cue: simple Drop-Line. Eine längere Goldlinie, die kontinuierlich
   von oben nach unten fadet (gradient-mask move). Klar, ruhig, editorial.
   Maik: „nach unten fädt wie ganz am Anfang, ruhig ein bisschen länger". */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--space-3) + 1vh);
  transform: translateX(-50%);
  display: block;
  z-index: 5;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity var(--dur-base) var(--ease-out);
}

.hero__cue:hover { opacity: 1; }

.hero__cue-line {
  /* v62: ::before-Tropfen wandert eindeutig oben → unten, opacity-Fade an Enden. */
  position: relative;
  display: block;
  width: 1px;
  height: 70px;
  background: linear-gradient(
    to bottom,
    rgba(184, 148, 90, 0.18) 0%,
    rgba(184, 148, 90, 0.18) 100%
  );
  overflow: hidden;
}
.hero__cue-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, transparent 0%, var(--gold) 100%);
  animation: cue-drop 2.4s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}

@keyframes cue-drop {
  0%   { transform: translateY(-110%); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateY(220%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cue-line::before { animation: none; transform: translateY(50%); opacity: 0.6; }
}

@media (max-width: 900px) {
  .hero {
    /* v168: padding-bottom wird im Mobile-Override-Block am Datei-Ende
       auf space-5 gesetzt (gleich wie Pillars-Top).
       v187 (Maik): padding-top reduziert von space-5 (96) → space-2 (16) damit
       Cone direkt unter den Header rückt. */
    min-height: auto;
    padding-top: calc(var(--header-h) + var(--space-2));
  }
  .hero__copy { max-width: none; }
  /* v71: hero__sub max-width-Override entfernt — clamp aus v70 gilt überall. */
  /* v59: Mobile-Breakpoint zurück auf 900px (Stand v54). */
  .hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0; /* v182: Text-Block schiebt mit negativer margin-top in Cone-Bereich. */
    padding-top: 0; /* v182: Cone bis zur Oberkante des Hero (Maik). */
    min-height: auto;
  }
  .hero__visual {
    position: relative;
    inset: auto;
    width: 100%;
    /* v185: Container 1:1 quadratisch. Video ist 1:1 (4K-Render), bei rechteck.
       Container letterboxte Cone vertikal mittig → leerer Raum oben + unten.
       Mit aspect 1:1 füllt Video den Container ohne Padding-Lücken (Maik:
       „bis zur Oberkante"). Höhe ergibt sich aus 100vw. */
    aspect-ratio: 1 / 1;
    height: auto;
    flex-shrink: 0;
    order: -1;
  }
  .hero__copy {
    /* v182: Text rueckt visuell in den Cone-Bereich rein (mask fadet zum Rand,
       keine sichtbare Kante). „Auf das Video drauf"-Effekt (Maik). */
    margin-top: -6vh;
    position: relative;
    z-index: 5;
  }
  /* v182: Title + Sub auf Mobile leicht kleiner (Maik: 1–2 Pixel). */
  .hero__title { font-size: clamp(2.2rem, 1.7rem + 2.8vw, 3.6rem); }
  .hero__sub { font-size: clamp(1.0rem, 0.88rem + 0.55vw, 1.18rem); }
  .hero-photo {
    max-width: 95vw; /* v164: 80 → 95vw (mehr Praesenz fuer 3D-Effekt). */
    max-height: 100%;
    width: 100%;
    height: 100%;
    margin-inline: auto;
    margin-block: 0;
  }
  .hero-photo img,
  .hero-photo video { object-position: center; }
  /* v190 (Maik): Hero-Cue auf Mobile wieder ausblenden — Hero ist jetzt
     kompakt + linksbündig, der zentrierte Drop-Cue passt nicht mehr. */
  .hero__cue { display: none; }
}

@media (max-width: 600px) {
  /* v73: Sub voll Container-Breite nur bei echtem Mobile (≤600).
     Tablet-Portrait (601-900) behält den clamp aus v70. */
  .hero__sub { max-width: none; }
}

@media (max-width: 540px) {
  /* v185: Full-Bleed-Pattern, aspect 1:1 Container (Video ist quadratisch). */
  .hero__visual {
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
  .hero-photo { max-width: 100vw; }
}

@media (prefers-reduced-motion: reduce) { .hero-photo { animation: none; } }

/* ============================================================
   7. PILLARS — Mockup-DNA: dezent, Liner-Icons, leicht
   ============================================================ */
.pillars {
  /* v162: Padding angeglichen an restliche Cream-Sektionen (96/96 statt 64/32). */
  padding-block: var(--space-7);
  background: var(--cream);
  border-top: 1px solid var(--brown-15);
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.pillar {
  padding: var(--space-3) var(--space-3);
  background: transparent;
  border: 1px solid var(--brown-15);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  position: relative;
  align-items: center;
  text-align: center;
}

.pillar:hover {
  transform: translateY(-2px);
  border-color: var(--gold-soft);
  box-shadow: var(--shadow-soft);
}

.pillar__icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  transition: transform var(--dur-base) var(--ease-out);
  margin-bottom: 0.3em;
}

.pillar:hover .pillar__icon { transform: scale(1.08); }
.pillar__icon svg { width: 100%; height: 100%; }

.pillar__title {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--espresso);
  line-height: 1.2;
}

.pillar__copy {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--brown-60);
  max-width: 22ch;
}

@media (max-width: 1024px) { .pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .pillars__grid { grid-template-columns: 1fr; } }

/* ============================================================
   8. ABOUT — ECHTE Story + Café-Foto rechts mit Play-Button + Caption
   ============================================================ */
.about {
  /* v160: Padding angeglichen an restliche Cream-Sektionen.
     v174: border-top zurueck raus (Maik). */
  padding-block: var(--space-7);
  background: var(--cream);
  position: relative;
  overflow: hidden;
}

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

.about__content { max-width: 52ch; }

.about__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: var(--space-2);
}

.about__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--espresso);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
  white-space: nowrap;
}

.about__title em { font-style: italic; color: var(--gold); }

.about__copy { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--space-4); }
/* Lücke nur nach Para 1 („...gutem Genuss."). */
.about__copy p:nth-child(2) { margin-top: var(--space-2); }
.about__copy p {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--brown-60);
  line-height: 1.7;
  font-size: 1.02rem;
  letter-spacing: 0.005em;
}
.about__copy p em { font-style: italic; color: var(--gold); font-weight: 400; }

.about__inline-link {
  color: var(--espresso);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.about__inline-link:hover { color: var(--gold); text-decoration-color: var(--gold); }

/* Signature-Block: Grazie-Text + handgeschriebene Unterschrift nebeneinander.
   Gabby e Federico in Caveat (Handschrift), darunter ein dünner Gold-Schwung
   per SVG-Stroke-Draw beim Scroll-Reveal. */
.about__signature-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(0.6rem, 1.2vw, 1.4rem);
  margin-top: var(--space-3);
}
.about__signature-text {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--brown-60);
}
.about__signature-text em { font-style: italic; color: var(--gold); }

.about__signature-mark {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.about__signature-mark__img {
  /* WebP-Schriftzug von Maik geliefert (transparenter BG, lossless).
     clip-path-Reveal animiert das Bild von links nach rechts. Klein gehalten
     damit es inline neben „Grazie e arrivederci." sitzt. */
  display: inline-block;
  height: clamp(26px, 3vw, 40px);
  width: auto;
  vertical-align: middle;
  clip-path: inset(0 100% 0 0);
}
.about__signature-block.is-revealed .about__signature-mark__img {
  animation: signWrite 2.8s cubic-bezier(.65, .02, .35, 1) 0.35s forwards;
}
@keyframes signWrite {
  /* Schreib-Sequenz für „Gabby e Federico": ansetzen → "Gabby" schwungvoll →
     kurz absetzen → "e" → kleine Pause → "Federico" → Schluss-Schwung am o.
     Pausen wirken wie echter Stift-Halt am Wort-Ende. */
  0%   { clip-path: inset(0 100% 0 0); }
  4%   { clip-path: inset(0 98% 0 0); }   /* Stift ansetzt am G */
  12%  { clip-path: inset(0 86% 0 0); }   /* G-Schwung */
  28%  { clip-path: inset(0 67% 0 0); }   /* "Gabby" geschrieben */
  34%  { clip-path: inset(0 65% 0 0); }   /* Pause Wort-Ende */
  40%  { clip-path: inset(0 59% 0 0); }   /* "e" geschrieben */
  46%  { clip-path: inset(0 57% 0 0); }   /* Pause vor Federico */
  52%  { clip-path: inset(0 49% 0 0); }   /* F-Anfang */
  70%  { clip-path: inset(0 27% 0 0); }   /* Federico Mitte */
  82%  { clip-path: inset(0 12% 0 0); }   /* fast fertig */
  88%  { clip-path: inset(0 7% 0 0); }    /* mini-Pause vor Schwung */
  100% { clip-path: inset(0 0 0 0); }     /* Schluss-o-Schwung */
}
@media (prefers-reduced-motion: reduce) {
  .about__signature-mark__img { clip-path: none; animation: none; }
}

.about__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.about__bullets li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.about__bullets svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--gold);
}

.about__bullets div { display: flex; flex-direction: column; gap: 0.1em; }

.about__bullets strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--espresso);
  letter-spacing: -0.005em;
}

.about__bullets span {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--brown-60);
  line-height: 1.4;
}

.about__signature {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brown-60);
}

.about__signature strong {
  color: var(--espresso);
  font-weight: 500;
}

.about__avatar {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold);
}

/* About-Visual (Foto + Play-Button + Caption) */
.about__visual {
  position: relative;
  aspect-ratio: 4 / 3;
}

.about__photo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream-edge);
  box-shadow: var(--shadow-lift);
}

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

.about__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11, 8, 7, 0.45) 100%);
  pointer-events: none;
}

.about__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(72px, 8vw, 96px);
  height: clamp(72px, 8vw, 96px);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

.about__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.about__play svg { width: 100%; height: 100%; }

.about__caption {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--cream);
  z-index: 3;
  text-align: right;
  line-height: 1.4;
}

.about__caption-line { display: block; }

@media (max-width: 900px) {
  .about__inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .about__visual { order: -1; aspect-ratio: 4 / 3; }
  .about__caption { font-size: 0.7rem; }
}

/* v165: About-Foto Mobile groesser — Full-Bleed + 4:5 Aspect (Maik). */
@media (max-width: 600px) {
  .about__visual {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    aspect-ratio: 4 / 5;
  }
  .about__photo { border-radius: 0; }
}

/* ============================================================
   9. SORTIMENT — Filter-Pills + Karten-Grid (Mockup-DNA)
   ============================================================ */
.sortiment {
  padding-block: var(--space-7);
  background: #fefdf9; /* TEMPORÄR — bei eigenen Bildern zurück auf var(--cream-50) */
  border-top: 1px solid var(--brown-15);
}

.sortiment__head {
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  max-width: 64ch;
}

.sortiment__head .section-head__sub { margin-inline: auto; }

/* Sortiment-Headline 1:1 auf About-Title-Style — Maik will einheitliche
   Schriftfarbe (kein gold em) und gleiche Größe in beiden Hero-Sektionen. */
.sortiment__head .section-head__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--espresso);
  letter-spacing: -0.015em;
}
.sortiment__head .section-head__title em {
  font-style: normal;
  color: inherit;
}
.sortiment__head .section-head__sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.02rem;
  color: var(--brown-60);
  line-height: 1.7;
  letter-spacing: 0.005em;
  max-width: 56ch;
  margin-top: var(--space-3);
}

.sortiment__filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.filter-pill {
  padding: 0.65em 1.35em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--espresso);
  background: var(--cream-50);
  border: 1px solid var(--brown-30);
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  cursor: pointer;
}

.filter-pill:hover {
  background: var(--cream-edge);
  border-color: var(--espresso);
  transform: translateY(-1px);
}

.filter-pill.is-active {
  background: var(--gold);
  color: var(--espresso);
  border-color: var(--gold);
  transform: none;
}

.filter-pill.is-active:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  transform: none;
}

/* Viewport wrapt grid + Nav-Buttons. Pfeile absolut positioniert. */
.sortiment__viewport {
  position: relative;
  margin-inline: calc(var(--space-4) * -1);
  padding-inline: var(--space-4);
}

.sortiment__grid {
  /* Transform-basiertes 5-Card-Carousel (Lenis-Workaround). Kein Scroll. */
  overflow: hidden;
  padding-block: var(--space-3);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.sortiment__track {
  display: flex;
  gap: var(--space-3);
  width: max-content;
  /* Kein padding-inline — JS-Translate (calcTxForIndex) zentriert aktive Card.
     CSS keine transition auf transform (Lenis-Konflikt) — JS-rAF-Tween. */
  will-change: transform;
}

.produkt-card {
  flex: 0 0 220px;
  transform: scale(0.65);
  opacity: 0.4;
  transform-origin: center center;
  cursor: pointer;
  transition: transform 420ms var(--ease-out), opacity 360ms var(--ease-out);
}

.produkt-card.is-edge {
  transform: scale(0.65);
  opacity: 0.4;
}

.produkt-card.is-side {
  transform: scale(0.85);
  opacity: 0.85;
}

.produkt-card.is-featured {
  transform: scale(1.0);
  opacity: 1;
  z-index: 2;
  cursor: default;
}

/* Nav-Pfeile (Desktop only — Mobile nutzt Touch-Swipe) */
.sortiment__nav {
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--brown-15);
  color: var(--espresso);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: 0 2px 8px rgba(11, 8, 7, 0.08);
}
.sortiment__nav svg {
  width: 18px;
  height: 18px;
}
.sortiment__nav:hover {
  background: var(--gold);
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(11, 8, 7, 0.16);
}
.sortiment__nav--prev { left: var(--space-3); }
.sortiment__nav--next { right: var(--space-3); }

.sortiment__nav { display: inline-flex; }

/* Card-Breite responsive — pro Breakpoint so dass 5 (Desktop) / 3 (Mobile)
   visible passen. Featured 100%, Side 85%, Edge 65%. */
@media (max-width: 1200px) {
  .produkt-card { flex: 0 0 200px; }
}
@media (max-width: 1024px) {
  .produkt-card { flex: 0 0 200px; }
}
@media (max-width: 768px) {
  .sortiment__grid {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .produkt-card { flex: 0 0 55vw; }
  /* Mobile: nur Featured + 2 Peeks visible — Edge-Cards verstecken. */
  .produkt-card.is-edge {
    transform: scale(0.55);
    opacity: 0;
  }
}
@media (max-width: 480px) {
  .produkt-card { flex: 0 0 58vw; }
}

.produkt-card {
  position: relative;
  background: transparent;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.produkt-card.is-hidden {
  display: none;
}

/* Strip + Pill versteckt — Maik: „Pille viel zu groß." Mockup-DNA-Brand
   wird später durch die freigestellten DOLCE-Becher-Bilder selbst gemacht. */
.produkt-card__strip { display: none; }
.produkt-card__pill { display: none; }

.produkt-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: visible;
  background: transparent;
}

.produkt-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(0.98);
  transition: transform 360ms var(--ease-out);
}

.produkt-card:hover .produkt-card__photo img {
  transform: scale(1.04);
}

.produkt-card__body {
  padding: var(--space-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  flex: 1 1 auto;
  text-align: center;
}

.produkt-card__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--espresso);
  letter-spacing: -0.01em;
}

.produkt-card__copy {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--brown-60);
  letter-spacing: 0.005em;
}

.produkt-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cream);
  background: rgba(11, 8, 7, 0.85);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  padding: 0.4em 0.8em;
  white-space: nowrap;
  z-index: 2;
}

.produkt-card__badge--paw {
  color: var(--espresso);
  background: var(--gold);
}

.sortiment__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-5);
}

/* Card-Width-Responsive ist oben definiert (1773-Block).
   Photo-Aspect-Ratio Mobile bleibt 4:5. */
@media (max-width: 480px) {
  .produkt-card__photo { aspect-ratio: 4 / 5; }
}

/* Wischen-Hint (.sortiment__scroll-hint) komplett entfernt in v119 —
   Pfeile machen den Carousel-Charakter selbsterklärend. */

/* CTA-Pill „Komplette Karte" am Ende der Sortiment-Sektion (Maik: 1 Pill,
   später dynamische Aufteilung mit mehreren Karten Zwickau/Meerane). */
.sortiment__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

/* ============================================================
   9b. SPEISEKARTE — Sub-Sektion mit PDF-Karten (cream-edge BG)
   ============================================================ */
.speisekarte {
  padding-block: var(--space-6);
  background: var(--cream-edge);
  border-top: 1px solid var(--brown-15);
  border-bottom: 1px solid var(--brown-15);
}

.speisekarte__inner { }

.speisekarte__head {
  text-align: center;
  margin-inline: auto;
  max-width: 64ch;
  margin-bottom: var(--space-4);
}

.speisekarte__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--espresso);
  margin-bottom: var(--space-2);
}

.speisekarte__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--espresso);
  letter-spacing: -0.015em;
}

.speisekarte__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.speisekarte__card {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: var(--space-4) var(--space-3);
  background: var(--cream);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 320ms var(--ease-out),
              box-shadow 320ms var(--ease-out);
}

.speisekarte__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-tile-hover);
}

.speisekarte__card-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 0.2em;
}

.speisekarte__card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--espresso);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.speisekarte__card-copy {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.02rem;
  color: var(--brown-60);
  line-height: 1.5;
  margin-bottom: var(--space-2);
}

.speisekarte__card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-top: auto;
  transition: transform 320ms var(--ease-out);
}

.speisekarte__card:hover .speisekarte__card-arrow {
  transform: translateX(3px);
}

@media (max-width: 700px) {
  .speisekarte__grid { grid-template-columns: 1fr; }
}

/* Pill-Buttons als CTA (Hero-Pill-Style): gold BG, schwarz Mono-Caps. */
.speisekarte__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

/* ============================================================
   10. STANDORTE — Mockup-DNA: Foto + Pill-Label + Action-Grid
   ============================================================ */
.standorte {
  padding-block: var(--space-7);
  background: var(--cream);
  border-top: 1px solid var(--brown-15);
}

.standorte__head { text-align: left; margin-inline: 0; max-width: 64ch; margin-bottom: var(--space-5); }

.standorte__head .section-head__eyebrow { margin-bottom: var(--space-2); }

/* Title-Override: kompakter, wie Sortiment-Title-Style. Italic-em greift global (.section-head__title em) → gold-italic auf <em> Stadtnamen. */
.standorte__head .section-head__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--espresso);
  letter-spacing: -0.015em;
}

.standorte__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}

.standort-card {
  position: relative;
  background: var(--cream);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--brown-15);
  cursor: pointer;
  transition: box-shadow 420ms var(--ease-quart);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Hover: nur Schein nach außen — kein translate, kein Bild-Zoom. */
.standort-card:hover {
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--gold) 22%, transparent),
    0 18px 40px -22px color-mix(in oklab, var(--espresso) 35%, transparent),
    0 0 0 6px color-mix(in oklab, var(--gold) 6%, transparent);
}

.standort-card__photo {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--cream-edge);
  overflow: hidden;
}

.standort-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pille AUF dem Foto, oben links — Brand-Pille (gold-solid wie .btn--primary). */
.standort-card__photo-label {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1;
  /* v171: Espresso-BG + Cream-Text (Maik: wie Hero-Ghost-Btn — klar als nicht-klickbares Tag erkennbar). */
  color: var(--cream);
  background: var(--espresso);
  border: 1px solid var(--espresso);
  padding: 0.7em 1.3em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45);
}

.standort-card__body {
  padding: var(--space-3) var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
}

/* Head: City links, Open-Status rechts. */
.standort-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
}

/* Open/Closed-Indikator: kleiner Punkt + Mono-Label. */
.standort-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brown-60);
  white-space: nowrap;
}

.standort-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brown-30);
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.standort-card__status.is-open {
  color: var(--espresso);
}

.standort-card__status.is-open .standort-card__status-dot {
  background: #4caf50;
  box-shadow: 0 0 0 3px color-mix(in oklab, #4caf50 22%, transparent);
}

.standort-card__city {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--espresso);
  letter-spacing: -0.01em;
  margin: 0;
}

.standort-card__address {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.55em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--brown);
  line-height: 1.3;
  font-style: normal;
  font-weight: 400;
  margin: 0;
}

.standort-card__address-icon {
  color: var(--gold);
  flex: 0 0 auto;
}

/* Hours-Group: Wrapper für 1+ Blöcke (Zwickau 1, Meerane Eiscafé+Pizzeria). */
.standort-card__hours-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Dual-Modifier: 2 Hours-Blöcke nebeneinander (nur Meerane). */
.standort-card__hours-group--dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

@media (max-width: 768px) {
  /* v165: Mobile auf stacked statt 2-spaltig — Eiscafé + Pizzeria
     waren zu nah aneinander. Trenner-Linie für klare Hierarchie. */
  .standort-card__hours-group--dual {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .standort-card__hours-group--dual .standort-card__hours-block + .standort-card__hours-block {
    padding-top: var(--space-2);
    border-top: 1px solid var(--brown-15);
  }
}

.standort-card__hours-block {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  min-width: 0;
}

.standort-card__hours-label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--espresso);
  margin: 0 0 0.1em;
  line-height: 1.1;
}

.standort-card__hours {
  display: flex;
  flex-direction: column;
  gap: 0.32em;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--espresso);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.standort-card__hours-row {
  display: grid;
  grid-template-columns: 4em 1fr;
  gap: var(--space-1);
  align-items: baseline;
}

.standort-card__hours-row dt {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--espresso);
  font-weight: 600;
}

.standort-card__hours-row dd { color: var(--espresso); font-weight: 400; }
.standort-card__hours-row--closed dd { color: var(--brown-60); font-style: italic; font-weight: 400; }

/* v180: Split-Shift — zwei Zeit-Slots pro Tag (Pizzeria Meerane: 11–14 + 17–21).
   Slots stacken untereinander, dt bleibt oben aligned. */
.standort-card__hours-row--split { align-items: start; }
.standort-card__hours-row--split dd {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.standort-card__hours-slot { display: block; }

/* Bottom-Strip: 4 round Icons links + „Mehr ansehen"-Pille rechts. */
.standort-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-2);
}

.standort-card__icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.standort-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--brown-15);
  color: var(--espresso);
  background: var(--cream);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.standort-card__icon:hover {
  background: var(--gold);
  color: var(--espresso);
  border-color: var(--gold);
  transform: translateY(-1px);
}

/* CTA-Pill „Mehr ansehen" — Brand-Pill mit Disc-Pfeil rechts. */
.standort-card__cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--espresso);
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  padding: 0.6em 0.5em 0.6em 1.2em;
  line-height: 1;
  pointer-events: none;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.standort-card__cta-pill .btn__disc {
  width: 1.85em;
  height: 1.85em;
  margin-left: 0.4em;
  margin-right: 0;
  background: var(--espresso);
  color: var(--gold);
}

.standort-card__cta-pill .btn__disc svg {
  width: 0.85em;
  height: 0.85em;
}

.standort-card:hover .standort-card__cta-pill {
  background: var(--gold-soft);
}

.standort-card:hover .standort-card__cta-pill .btn__disc {
  transform: translateX(2px);
}

@media (max-width: 768px) { .standorte__grid { grid-template-columns: 1fr; } }

/* v171: Mobile bleibt 1-Zeile mit space-between (wie Desktop) —
   Icons links, „Mehr ansehen" Pille rechts → spart eine Zeile. */
.standort-card__cta-text--short { display: none; }
.standort-card__cta-arrow { display: none; }

@media (max-width: 480px) {
  .standort-card__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .standort-card__icons { justify-content: flex-start; gap: 4px; }
  .standort-card__icon { width: 32px; height: 32px; }
  .standort-card__icon svg { width: 14px; height: 14px; }
  /* v172: Auf Mobile „Mehr ansehen" → „Mehr →" (Pfeil-Icon). Kompakter, passt sauber neben 4 Icons. */
  .standort-card__cta-pill {
    padding: 0.55em 0.85em;
    font-size: 0.65rem;
    gap: 0.4em;
  }
  .standort-card__cta-text { display: none; }
  .standort-card__cta-text--short { display: inline; }
  .standort-card__cta-arrow {
    display: inline-block;
    width: 11px;
    height: 11px;
    flex-shrink: 0;
  }
}

/* ============================================================
   STANDORT-MODAL — Galerie + Detail (Bottom-Sheet/Centered)
   ============================================================ */
.standort-modal {
  position: fixed;
  inset: 0;
  z-index: 120; /* v175: ueber Header (102) + Drawer (101). War 80, Header schaute durch. */
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

/* v163: Mobile-Polish — mehr Bottom-Atmungsraum, dvh statt vh, weniger seitliches Padding. */
@media (max-width: 600px) {
  .standort-modal { padding: var(--space-2); padding-bottom: max(var(--space-3), env(safe-area-inset-bottom, 0)); }
}

.standort-modal[aria-hidden="false"] {
  display: flex;
}

.standort-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 8, 7, 0.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  cursor: pointer;
  animation: standortModalFadeIn 280ms var(--ease-out);
}

.standort-modal__panel {
  position: relative;
  background: var(--cream);
  border-radius: var(--radius-lg);
  max-width: 720px;
  width: 100%;
  max-height: 95vh;
  max-height: 95dvh; /* v163: iOS-Dynamic-Viewport */
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 24px 64px rgba(11, 8, 7, 0.4);
  animation: standortModalSlideUp 380ms var(--ease-quart);
  -webkit-overflow-scrolling: touch;
}

/* v163: Mobile — Modal kompakter, Inhalt scrollt sauber. */
@media (max-width: 600px) {
  .standort-modal__panel { max-height: 88dvh; border-radius: var(--radius-md); }
}

@keyframes standortModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes standortModalSlideUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

.standort-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(247, 241, 230, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--brown-15);
  color: var(--espresso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.standort-modal__close:hover {
  background: var(--gold);
  transform: scale(1.05);
}

/* Galerie-Block oben im Panel */
.standort-modal__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.standort-modal__hero {
  width: 100%;
  aspect-ratio: 24 / 9;
  overflow: hidden;
  background: var(--cream-edge);
  touch-action: pan-y; /* v167: horizontale Touches bleiben fuer Swipe-Detect, vertikale scrollen Modal weiter. */
}

.standort-modal__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 220ms var(--ease-out);
}

.standort-modal__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 6px;
  margin-top: 0;
  background: var(--cream);
}

.standort-modal__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: var(--cream-edge);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  opacity: 0.55;
}

.standort-modal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.standort-modal__thumb:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.standort-modal__thumb.is-active {
  border-color: var(--gold);
  opacity: 1;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--gold) 25%, transparent);
}

/* Body unter der Galerie. Modal = Galerie + Title + Description + Speisekarten.
   Adresse/Hours/Actions sind auf der Card → wäre redundant. */
.standort-modal__body {
  padding: var(--space-3) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Eyebrow + Status auf einer Zeile (matched .standort-card__head Pattern). */
.standort-modal__eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.standort-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin: 0;
}

.standort-modal__status {
  /* Erbt .standort-card__status Styles, override nur falls nötig. */
}

.standort-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.1rem + 1.4vw, 2.15rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--espresso);
  letter-spacing: -0.015em;
  margin: 0.15em 0 0;
}

.standort-modal__title em {
  font-style: italic;
  color: var(--gold);
}

/* Description: Body-Font, kein Italic-Skript mehr. */
.standort-modal__description {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--brown);
  margin: 0;
}

/* Adresse: Map-Pin-Anker (wie Card), keine Border-Linien mehr. */
.standort-modal__address {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--brown);
  font-style: normal;
  text-transform: none;
  padding-block: 0;
  border: none;
  margin-top: var(--space-1);
}

.standort-modal__address::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  color: var(--gold);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-7-7-12a7 7 0 0 1 14 0c0 5-7 12-7 12Z'/><circle cx='12' cy='9' r='2.6'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-7-7-12a7 7 0 0 1 14 0c0 5-7 12-7 12Z'/><circle cx='12' cy='9' r='2.6'/></svg>") center / contain no-repeat;
}

/* Info-Grid: Hours-Block + Cards-Block. Subtile gold-tinted card-ähnliche
   Zone für Daten-Density (von Description abgesetzt). */
.standort-modal__info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-2);
  background: color-mix(in oklab, var(--gold) 5%, transparent);
  border: 1px solid color-mix(in oklab, var(--gold) 18%, transparent);
  border-radius: var(--radius-md);
}

.standort-modal__hours-block,
.standort-modal__cards-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Sub-Labels: Mono-uppercase, KEINE Border-bottom mehr. */
.standort-modal__hours-block h4,
.standort-modal__cards-block h4 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin: 0 0 0.6em;
  padding-bottom: 0;
  border-bottom: none;
}

/* Hours im Modal mit tabular-nums für saubere Ziffern-Spalten. */
.standort-modal__hours-block .standort-card__hours {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}

/* Speisekarten: feste Spalten-Breite (auto-fill mit fester Größe) →
   Pills gleich breit wie längster, NICHT auf Container gestreckt.
   Bei 2 Pills (Meerane) bleibt Platz rechts statt überdimensioniert. */
.standort-modal__card-pills {
  display: grid;
  grid-template-columns: repeat(auto-fill, 11em);
  gap: 0.5em;
}

.standort-modal__card-pill {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.4em 0.4em 0.85em;
  background: var(--cream);
  border: 1px solid color-mix(in oklab, var(--brown) 15%, transparent);
  border-radius: var(--radius-pill);
  color: var(--espresso);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.standort-modal__card-pill:hover {
  background: var(--gold);
  border-color: var(--gold);
}

.standort-modal__card-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out);
}

.standort-modal__card-pill:hover .standort-modal__card-pill-icon {
  color: var(--espresso);
}

.standort-modal__card-pill-name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--espresso);
  line-height: 1;
}

.standort-modal__card-pill-disc {
  width: 1.85em;
  height: 1.85em;
  background: var(--espresso);
  color: var(--gold);
  margin: 0 0 0 0.15em;
  flex-shrink: 0;
}

.standort-modal__card-pill-disc svg {
  width: 0.85em;
  height: 0.85em;
}

.standort-modal__card-pill:hover .standort-modal__card-pill-disc {
  transform: translateX(2px);
}

/* Cards-Block-Header: kompakt, gold, mono. */
.standort-modal__cards-block h4 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin: 0 0 var(--space-1);
  padding: 0;
  border: none;
}

.standort-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
  margin-top: var(--space-2);
}

.standort-modal__actions .btn {
  width: 100%;
  white-space: nowrap;
  padding-block: 0.95em;
  /* Default pill-radius — kein eckiges Override mehr. */
}

@media (max-width: 600px) {
  .standort-modal {
    padding: 0;
    align-items: flex-end;
  }
  .standort-modal__panel {
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .standort-modal__info-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .standort-modal__thumbs {
    grid-template-columns: repeat(5, 1fr);
  }
  /* Mobile-Hero kompakter — sonst frisst Hero zu viel Höhe vom 92vh-Sheet. */
  .standort-modal__hero {
    aspect-ratio: 16 / 10;
  }
  .standort-modal__body {
    padding: var(--space-2) var(--space-2) var(--space-3);
    gap: var(--space-1);
  }
  .standort-modal__title {
    font-size: 1.45rem;
  }
}

/* ============================================================
   KARTEN-MODAL — Tabs Zwickau/Meerane mit allen Speisekarten
   ============================================================ */
.karten-modal {
  position: fixed;
  inset: 0;
  z-index: 120; /* v175: ueber Header (102) + Drawer (101). */
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

.karten-modal[aria-hidden="false"] {
  display: flex;
}

.karten-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 8, 7, 0.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  cursor: pointer;
  animation: standortModalFadeIn 280ms var(--ease-out);
}

.karten-modal__panel {
  position: relative;
  background: var(--cream);
  border-radius: var(--radius-lg);
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  max-height: 90dvh; /* v163: iOS-Dynamic-Viewport */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* v163: kein body-Bouncing */
  box-shadow: 0 24px 64px rgba(11, 8, 7, 0.4);
  animation: standortModalSlideUp 380ms var(--ease-quart);
  padding: var(--space-3) var(--space-3) var(--space-3);
  -webkit-overflow-scrolling: touch;
}

.karten-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(247, 241, 230, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--brown-15);
  color: var(--espresso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.karten-modal__close:hover {
  background: var(--gold);
  transform: scale(1.05);
}

.karten-modal__head {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin-bottom: var(--space-2);
}

.karten-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin: 0;
}

.karten-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--espresso);
  letter-spacing: -0.015em;
  margin: 0;
}

.karten-modal__tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: color-mix(in oklab, var(--brown) 6%, transparent);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-2);
}

.karten-modal__tab {
  appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brown-60);
  padding: 0.7em 1.4em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.karten-modal__tab:hover {
  color: var(--espresso);
}

.karten-modal__tab.is-active {
  background: var(--gold);
  color: var(--espresso);
}

.karten-modal__panel-content {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.karten-modal__panel-content[hidden] {
  display: none;
}

.karten-modal__card-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.85em 1em 0.85em 1.2em;
  border: 1px solid var(--brown-15);
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--espresso);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.karten-modal__card-pill:hover {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateX(2px);
}

.karten-modal__card-name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
}

.karten-modal__card-meta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brown-60);
}

.karten-modal__card-pill:hover .karten-modal__card-meta {
  color: var(--espresso);
}

@media (max-width: 600px) {
  .karten-modal {
    padding: 0;
    align-items: flex-end;
  }
  .karten-modal__panel {
    max-height: 85dvh; /* v163: war 88vh, mehr Bottom-Atmungsraum */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-2) var(--space-2) var(--space-3);
    padding-bottom: max(var(--space-3), calc(var(--space-2) + env(safe-area-inset-bottom, 0)));
  }
  .karten-modal__title {
    font-size: 1.3rem;
  }
  .karten-modal__card-pill {
    padding: 1em 1.1em;
  }
  .karten-modal__card-name {
    font-size: 0.95rem;
  }
}

/* ============================================================
   11. STATS-BAR (DARK, 3 Counter — v154)
   ============================================================ */
.stats {
  padding-block: var(--space-6); /* v160: war space-5, zu dünn als Dark-Break. */
  background: var(--espresso);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 50%, rgba(184, 148, 90, 0.08), transparent 70%);
  pointer-events: none;
}

.stats::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(247, 241, 230, 0.04) 1px, transparent 0);
  background-size: 22px 22px;
  pointer-events: none;
  mix-blend-mode: screen;
}

.stats__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  text-align: center;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
}

.stat { display: flex; flex-direction: column; gap: var(--space-1); position: relative; padding-block: var(--space-2); }

.stat:not(:first-child)::before {
  content: "";
  position: absolute;
  inset: 18% auto 18% 0;
  width: 1px;
  background: var(--cream-15);
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem);
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat__label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--cream); /* v173: war cream-72, jetzt voll weiss (Maik). */
  line-height: 1.3;
}

.stat__sub {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-50);
  line-height: 1.3;
  margin-top: 2px;
}

@media (max-width: 600px) {
  .stats__inner { gap: var(--space-2); }
  .stat__label { font-size: 0.78rem; }
  .stat__sub { font-size: 0.62rem; letter-spacing: 0.06em; }
  .stat:not(:first-child)::before { inset: 22% auto 22% 0; }
}

@media (max-width: 380px) {
  .stat:not(:first-child)::before { display: none; }
  .stats__inner { gap: var(--space-3); }
}

/* ============================================================
   12. REVIEWS (LIGHT, Tab-Switch)
   ============================================================ */
.reviews {
  padding-block: var(--space-7);
  background: var(--cream-50);
  border-top: 1px solid var(--brown-15);
}

.reviews__head { text-align: center; margin-inline: auto; max-width: 64ch; margin-bottom: var(--space-4); }

/* Sortiment-/About-Title-Style: kompakt, kein Gold-Akzent, klar lesbar. */
.reviews__aggregate {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 500;
  color: var(--espresso);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* 5-Stern-Eyebrow ersetzt das Mono-„Quello che dicono". Gold + zentriert. */
.reviews__rating-stars {
  font-size: 1.6rem;
  color: var(--gold);
  letter-spacing: 0.18em;
  margin-bottom: var(--space-2);
  text-shadow: 0 1px 2px rgba(184, 148, 90, 0.18);
}

/* Sub-Aggregate-Style bleibt für künftige Nutzung. */
.reviews__sub-aggregate {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brown-60);
}

/* Live-Aggregate sitzt unter der Headline, JS füllt mit aktueller Standort-
   Statistik (z.B. „4,7 ★ aus 980 Bewertungen in Zwickau"). */
.reviews__live-aggregate {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brown-60);
  margin-top: var(--space-2);
  min-height: 1.2em; /* Reserved Space gegen Layout-Shift bei async-Load */
}

/* Stern in der Aggregate-Zeile: größer + gold, optisch zentriert.
   Unicode-★ hat tieferen visuellen Mittelpunkt als seine Bounding-Box —
   translateY hebt ihn auf optische Mitte mit den Mono-Caps daneben. */
.reviews__live-aggregate-star {
  display: inline-block;
  font-size: 1.4em;
  color: var(--gold);
  letter-spacing: 0;
  margin-inline: 0.05em 0.15em;
  line-height: 1;
  transform: translateY(-3px);
}

.reviews__tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--cream);
  padding: 0.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--brown-15);
  margin: var(--space-4) auto var(--space-5); /* v161: zurück auf auto-zentriert. */
  position: relative;
}

.reviews__tab {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85em 1.4em;
  min-height: 44px; /* v159: Touch-Target (Apple HIG). */
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brown-60);
  border-radius: var(--radius-pill);
  transition: color var(--dur-base) var(--ease-out);
}

.reviews__tab.is-active { color: var(--espresso); }

.reviews__tab-indicator {
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--gold);
  transition: left 480ms var(--ease-quart),
              width 480ms var(--ease-quart);
  z-index: 1;
  pointer-events: none;
}

.reviews__head-row { display: flex; flex-direction: column; align-items: center; } /* v161: zurück auf center — Reviews-Section bleibt zentral-aggregiert. */

.reviews__panel { display: none; animation: panelFadeIn 420ms var(--ease-out); }
.reviews__panel.is-active { display: block; }

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* Box-Look (Maik-Wahl) — Hover bleibt weiterhin raus. */
.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--cream);
  border: 1px solid var(--brown-15);
  border-radius: var(--radius-md);
}

.review-card__stars { color: var(--gold); letter-spacing: 0.1em; font-size: 1.05rem; }

.review-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--espresso);
  flex-grow: 1;
}

.review-card__quote::before { content: "« "; color: var(--gold); }
.review-card__quote::after  { content: " »"; color: var(--gold); }

.review-card__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brown-60);
}

.reviews__cta { display: flex; justify-content: center; margin-top: var(--space-4); }

.reviews__cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--espresso);
  border-bottom: 1px solid var(--brown-30);
  padding-bottom: 0.3em;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.reviews__cta a:hover { color: var(--gold); border-color: var(--gold); }

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

/* Pagination-Dots: nur Mobile sichtbar, sitzt zwischen Grid und CTA. */
.reviews__dots {
  display: none;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--space-3);
}

.reviews__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brown-30);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.reviews__dot:hover { background: var(--brown-60); }
.reviews__dot.is-active {
  background: var(--gold);
  transform: scale(1.25);
}

/* Mobile Carousel: Grid wird zu horizontalem scroll-snap-Container.
   Cards-Box-Style erbt vom Default (oben). */
@media (max-width: 768px) {
  .reviews__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: var(--space-2);
    padding-inline: 10vw;
    margin-inline: calc(var(--space-4) * -1);
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .reviews__grid::-webkit-scrollbar { display: none; }

  .review-card {
    flex: 0 0 80vw;
    scroll-snap-align: center;
  }

  .reviews__dots {
    display: flex;
  }
}

/* ============================================================
   13. ANFRAGE-CTA — Editorial-Block mit Foto links + Text rechts
   ============================================================ */
.anfrage-cta {
  padding-block: var(--space-7);
  background: var(--cream);
  border-top: 1px solid var(--brown-15);
  position: relative;
  overflow: hidden;
}

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

/* v145: Foto frei auf Cream + Bleed-Out links über Container-Edge. */
.anfrage-cta__photo {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  margin-left: clamp(-80px, -6vw, -32px);
}

.anfrage-cta__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.anfrage-cta__content { max-width: 48ch; }

.anfrage-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: var(--space-2);
}

.anfrage-cta__title {
  font-family: var(--font-display);
  /* v145: kleiner — auf Section-Title-Style angeglichen
     (Reviews/Standorte/Sortiment haben alle diesen Wert). */
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--espresso);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
}

.anfrage-cta__title em { font-style: italic; color: var(--gold); }

.anfrage-cta__copy {
  font-size: 1.05rem;
  color: var(--brown-60);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

/* v147: Pille zart — gleiche Werte wie .form__submit-pill (Modal). */
.anfrage-cta__btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--espresso);
  background: var(--gold);
  border: none;
  padding: 1em 1.8em;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.anfrage-cta__btn:hover {
  background: var(--gold-soft);
  transform: translateY(-1px);
}

.anfrage-cta__btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .anfrage-cta__inner { grid-template-columns: 1fr; gap: var(--space-4); }
  .anfrage-cta__photo { max-width: 480px; margin-inline: auto; aspect-ratio: 4 / 3; }
  .anfrage-cta__content { text-align: center; margin-inline: auto; }
}

/* ============================================================
   14. FOOTER (DARK)
   ============================================================ */
.site-footer {
  background: var(--espresso);
  color: var(--cream);
  padding-block: var(--space-6) var(--space-3);
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(247, 241, 230, 0.03) 1px, transparent 0);
  background-size: 22px 22px;
  pointer-events: none;
  mix-blend-mode: screen;
}

.site-footer__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.footer-col__heading {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.footer-brand__lockup {
  /* Gleiches Lockup wie Header — Logo + Wortbild + Sub als zusammengehöriges Logo. */
  margin-bottom: var(--space-3);
}

.footer-brand__copy {
  color: var(--cream-72);
  max-width: 32ch;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* v150: Cross-Link zu Calice — als 5. Nav-Link, gold. */
.footer-nav__cross {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold) !important;
}
.footer-nav__cross:hover {
  color: var(--gold-soft) !important;
}
.footer-nav__cross svg {
  width: 11px;
  height: 11px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.footer-nav__cross:hover svg {
  transform: translate(2px, -2px);
}

.footer-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.footer-nav a {
  color: var(--cream-72);
  font-size: 0.92rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-nav a:hover { color: var(--gold); }

.footer-locations {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-location {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--cream-72);
}

.footer-location strong {
  display: block;
  color: var(--cream);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  margin-bottom: 0.3em;
}

.footer-location a { color: var(--cream-72); transition: color var(--dur-fast) var(--ease-out); }
.footer-location a:hover { color: var(--gold); }

/* Social-Row + Bottom-Bar in einem.
   Desktop: legal links, mkul-Spruch rechts (space-between).
   Mobile: gestapelt + zentriert (siehe ≤600px Block unten). */
.footer-social-row {
  position: relative;
  padding-top: var(--space-3);
  border-top: 1px solid var(--cream-15);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cream-72);
}

.footer-social-row > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--cream-15);
  color: var(--cream);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.footer-social-row > a:hover {
  background: var(--gold);
  color: var(--espresso);
  border-color: var(--gold);
}

.footer-social-row > a svg { width: 14px; height: 14px; fill: currentColor; }

.footer-bottom__legal {
  color: var(--cream-72);
}

.footer-mkul {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em;
  justify-content: flex-end;
}
.footer-mkul a { color: var(--gold); transition: color var(--dur-fast) var(--ease-out); }
.footer-mkul a:hover { color: var(--gold-soft); }

/* Brand-Punkt: GOLD (Dolce-Freddo-Brand-Color) */
.footer-mkul__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(184, 148, 90, 0.5);
}

@media (max-width: 1024px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .footer-col--brand { grid-column: span 2; }
}

@media (max-width: 600px) {
  /* v163: Footer Mobile-Polish — Reihenfolge nach Wichtigkeit (Standorte zuerst nach Brand),
     Section-Divider zwischen Spalten für klare Hierarchie. */
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-col {
    padding-block: var(--space-3);
    border-top: 1px solid var(--cream-15);
  }
  .footer-col--brand {
    grid-column: auto;
    border-top: none;
    padding-top: 0;
  }
  /* Standorte direkt nach Brand — wichtigstes Quick-Info auf Mobile.
     Brand bleibt order 0 (oben), dann Standorte (1), dann Navigation (2), dann Info (3). */
  .footer-col:nth-child(4) { order: 1; }
  .footer-col:nth-child(2) { order: 2; }
  .footer-col:nth-child(3) { order: 3; }
  .footer-social-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .footer-bottom__legal { text-align: center; }
  .footer-mkul {
    justify-content: center;
    text-align: center;
  }
}

/* Sektion 15 (Floating-Anfrage-Button) komplett entfernt in v118. */

/* ============================================================
   16. MODAL — Anfrage-Form
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

.modal.is-open { display: flex; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 8, 7, 0.6);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.modal.is-open .modal__backdrop { opacity: 1; }

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 2rem);
  max-height: calc(100svh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain; /* v163: iOS-Touch-Lock — kein body-Bouncing */
  -webkit-overflow-scrolling: touch;
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-dark);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-quart),
              opacity var(--dur-base) var(--ease-out);
}

.modal.is-open .modal__panel { transform: translateY(0) scale(1); opacity: 1; }

.modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--espresso);
  transition: background var(--dur-fast) var(--ease-out);
}
.modal__close:hover { background: var(--brown-15); }
.modal__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

.modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--espresso);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-1);
}
.modal__title em { font-style: italic; color: var(--gold); }

.modal__sub { color: var(--brown-60); margin-bottom: var(--space-4); }

.form { display: flex; flex-direction: column; gap: var(--space-3); }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.form__field { display: flex; flex-direction: column; gap: 0.4em; }

.form__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brown-60);
}

.form__input,
.form__select,
.form__textarea {
  padding: 0.85em 1em;
  background: var(--cream-50);
  border: 1px solid var(--brown-15);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--espresso);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus { border-color: var(--gold); background: #fff; }

.form__textarea { min-height: 100px; resize: vertical; font-family: inherit; }

.form__radios { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.form__radio { position: relative; flex: 1 0 auto; min-width: 80px; }
.form__radio input { position: absolute; opacity: 0; pointer-events: none; }

.form__radio-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65em 1em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid var(--brown-15);
  border-radius: var(--radius-pill);
  background: var(--cream-50);
  color: var(--brown-60);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}

.form__radio input:checked + .form__radio-label {
  background: var(--gold);
  color: var(--espresso);
  border-color: var(--gold);
}

.form__honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; height: 0; }
.form__submit { margin-top: var(--space-2); }

.form__feedback { display: none; padding: var(--space-2); border-radius: var(--radius-sm); font-size: 0.95rem; text-align: center; }
.form__feedback.is-visible { display: block; }
.form__feedback--success { background: rgba(147, 184, 106, 0.15); color: #4a6b2c; border: 1px solid rgba(147, 184, 106, 0.4); }
.form__feedback--error   { background: rgba(123, 51, 64, 0.1);   color: var(--burgundy); border: 1px solid rgba(123, 51, 64, 0.3); }

@media (max-width: 600px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal__panel {
    max-width: 100%;
    max-height: 88dvh; /* v163: war 92svh — zu hoch, ließ keinen Bottom-Atmungsraum. */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
    padding: var(--space-4) var(--space-3);
    padding-bottom: max(var(--space-4), calc(var(--space-3) + env(safe-area-inset-bottom, 0)));
  }
  .modal.is-open .modal__panel { transform: translateY(0); }
  .form__row { grid-template-columns: 1fr; }
}

/* ============================================================
   v146: ANFRAGE-MODAL SENIOR-UI-REFACTOR
   ============================================================ */

/* --- Modal-Eyebrow oberhalb des Titles --- */
.modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-1);
}

/* --- Polished Form Layout --- */
.form--polished { gap: var(--space-4); }

.form__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3) 0;
  border-top: 1px solid var(--brown-15);
}
.form__section:first-of-type { border-top: 0; padding-top: 0; }

.form__section-head {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brown-60);
  margin: 0 0 var(--space-1);
}

.form__row--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.form__label-hint {
  font-weight: 400;
  color: var(--brown-30);
  text-transform: none;
  letter-spacing: 0.04em;
  margin-left: 6px;
}

/* v148: --field-h Token für vertikale Konsistenz aller Form-Felder. */
.form--polished {
  --field-h: 42px;
  --field-px: 0.95em;
  --field-fs: 0.9rem;
}

/* --- Custom Select (Anlass) --- */
.custom-select { position: relative; }
.custom-select__trigger {
  width: 100%;
  min-height: var(--field-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--field-px);
  background: var(--cream-50);
  border: 1px solid var(--brown-15);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--field-fs);
  color: var(--brown);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.custom-select__trigger[aria-expanded="true"],
.custom-select__trigger:hover { border-color: var(--gold); background: #fff; }
.custom-select__trigger.is-empty { color: var(--brown-30); }
.custom-select__chevron { width: 12px; height: 8px; transition: transform var(--dur-mid) var(--ease-out); color: var(--brown-60); }
.custom-select__trigger[aria-expanded="true"] .custom-select__chevron { transform: rotate(180deg); }

.custom-select__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--brown-15);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px -10px rgba(35, 28, 24, 0.2);
  list-style: none;
  margin: 0;
  padding: 6px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.custom-select.is-open .custom-select__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.custom-select__panel li {
  padding: 0.7em 0.9em;
  border-radius: var(--radius-xs, 4px);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--brown);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.custom-select__panel li:hover,
.custom-select__panel li[aria-selected="true"] {
  background: var(--gold);
  color: var(--espresso);
}
.custom-select__panel li span {
  color: var(--brown-30);
  font-size: 0.85em;
  margin-left: 4px;
}
.custom-select__panel li:hover span,
.custom-select__panel li[aria-selected="true"] span { color: rgba(11, 8, 7, 0.55); }

/* --- Segmented Pills (Standort) — v148: Höhe = --field-h --- */
.seg-pills {
  display: flex;
  gap: 4px;
  background: var(--cream-50);
  border: 1px solid var(--brown-15);
  border-radius: 999px;
  padding: 3px;
  min-height: var(--field-h);
}
.seg-pill {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brown-60);
  background: transparent;
  border: none;
  padding: 0 1em;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.seg-pill:hover { color: var(--espresso); }
.seg-pill[aria-checked="true"] {
  background: var(--gold);
  color: var(--espresso);
}

/* --- Date Picker — v148: --field-h --- */
.datepicker { position: relative; }
.datepicker__trigger {
  width: 100%;
  min-height: var(--field-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--field-px);
  background: var(--cream-50);
  border: 1px solid var(--brown-15);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--field-fs);
  color: var(--brown);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.datepicker__trigger[aria-expanded="true"],
.datepicker__trigger:hover { border-color: var(--gold); background: #fff; }
.datepicker__trigger.is-empty { color: var(--brown-30); }
.datepicker__trigger svg { width: 18px; height: 18px; color: var(--brown-60); flex-shrink: 0; }

.datepicker__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(320px, 100%);
  background: #fff;
  border: 1px solid var(--brown-15);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 48px -16px rgba(35, 28, 24, 0.28);
  padding: 16px;
  z-index: 20;
}
.datepicker__panel[hidden] { display: none; }

.datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.datepicker__nav {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown-60);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.datepicker__nav:hover { background: var(--cream-edge); color: var(--gold); }
.datepicker__nav svg { width: 12px; height: 12px; }

.datepicker__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--espresso);
  letter-spacing: -0.005em;
}

.datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown-30);
  text-align: center;
  margin-bottom: 6px;
}
.datepicker__weekdays span { padding: 4px 0; }

.datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.datepicker__day {
  aspect-ratio: 1 / 1;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--brown);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.datepicker__day:hover:not(:disabled) {
  background: var(--cream-edge);
}
.datepicker__day.is-other-month { color: var(--brown-30); }
.datepicker__day:disabled {
  color: var(--brown-30);
  cursor: not-allowed;
  opacity: 0.4;
}
.datepicker__day.is-today {
  font-weight: 600;
  color: var(--gold);
}
.datepicker__day.is-selected {
  background: var(--gold);
  color: var(--espresso);
  font-weight: 500;
}
.datepicker__day.is-selected:hover { background: var(--gold-soft); }

/* --- Stepper (Personen) — v148: --field-h --- */
.stepper {
  display: flex;
  align-items: stretch;
  min-height: var(--field-h);
  background: var(--cream-50);
  border: 1px solid var(--brown-15);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--dur-fast);
}
.stepper:focus-within { border-color: var(--gold); background: #fff; }

.stepper__btn {
  width: 38px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown-60);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.stepper__btn:hover { background: var(--cream-edge); color: var(--gold); }
.stepper__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.stepper__btn svg { width: 12px; }

.stepper__value {
  flex: 1;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--brown);
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper__value::-webkit-outer-spin-button,
.stepper__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper__value::placeholder { color: var(--brown-30); font-style: italic; }

/* --- Submit Pill --- */
.form__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-2);
}
.form__submit-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--espresso);
  background: var(--gold);
  border: none;
  padding: 1em 1.6em 1em 1.8em;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.form__submit-pill:hover { background: var(--gold-soft); transform: translateY(-1px); }
.form__submit-pill:disabled { opacity: 0.5; cursor: wait; transform: none; }
.form__submit-pill svg { width: 28px; height: 10px; }

/* v148: form__input/textarea innerhalb form--polished auf --field-h */
.form--polished .form__input,
.form--polished .form__select {
  min-height: var(--field-h);
  padding: 0 var(--field-px);
  font-size: var(--field-fs);
}
.form--polished .form__textarea {
  padding: 0.7em var(--field-px);
  font-size: var(--field-fs);
  min-height: 88px;
}

/* v148: Modal-Title leicht kleiner (matched zarteres Form) */
.form--polished + .form-success .form-success__title,
.modal__title {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}

/* v148: Form-Success Block */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3) 0;
  gap: var(--space-2);
  animation: form-success-in 0.5s var(--ease-out) both;
}
.form-success[hidden] { display: none; }

.form-success__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background: rgba(184, 148, 90, 0.12);
  margin-bottom: var(--space-1);
}
.form-success__icon svg { width: 56px; height: 56px; }

.form-success__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.form-success__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--espresso);
  margin: 0;
}
.form-success__title em { font-style: italic; color: var(--gold); font-weight: 400; }

.form-success__copy {
  font-size: 0.96rem;
  color: var(--brown-60);
  max-width: 36ch;
  line-height: 1.55;
  margin: 0 0 var(--space-2);
}

@keyframes form-success-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .form__row--2 { grid-template-columns: 1fr; }
  .datepicker__panel { width: 100%; left: 0; right: 0; }
  .form__footer { justify-content: center; }
  .form__submit-pill { width: 100%; justify-content: center; }
}

/* ============================================================
   20. GALERIE — Bild-Reel zwischen Stats und Reviews + Lightbox (WOW v6)
   ============================================================ */
.gallery {
  padding-block: var(--space-7);
  background: var(--cream);
  border-top: 1px solid var(--brown-15);
}

.gallery__head { text-align: left; margin-inline: 0; max-width: 64ch; margin-bottom: var(--space-5); }

/* v160: Galerie-Sub passt sich Sortiment-Sub-Style an. */
.gallery__sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.02rem;
  color: var(--brown-60);
  line-height: 1.7;
  letter-spacing: 0.005em;
  max-width: 56ch;
  margin: var(--space-3) 0 0;
}

/* v191: Swipe-Hint einzelne, fluide Bewegung. Pfeil (Linie + Tip) komplett
   sichtbar als Einheit, glided sanft von links rein, hält kurz, glided rechts
   raus mit Fade. Eine zusammenhängende Animation, kein 2-Phase-Draw. */
.gallery__swipe {
  display: none;
  align-items: center;
  margin-top: var(--space-3);
  color: var(--gold);
  overflow: hidden; /* Pfeil verschwindet beim Rausgleiten am Container-Rand. */
}

.gallery__swipe-svg {
  width: 96px;
  height: 24px;
  animation: gallery-swipe-glide 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, opacity;
}

@keyframes gallery-swipe-glide {
  0%   { opacity: 0;   transform: translateX(-22px); }
  22%  { opacity: 1;   transform: translateX(0); }
  60%  { opacity: 1;   transform: translateX(6px); }
  92%  { opacity: 0;   transform: translateX(22px); }
  100% { opacity: 0;   transform: translateX(22px); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__swipe-svg { animation: none; opacity: 1; }
}

@media (max-width: 1024px) {
  /* v163: Galerie-Head als flex-column nur Mobile, damit Swipe-Hint rechts (Calice-Pattern) */
  .gallery__head { display: flex; flex-direction: column; }
  .gallery__swipe { display: inline-flex; align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__swipe-tick,
  .gallery__swipe-head { animation: none; }
}

/* v153: Title-Größe auf Sortiment/Standorte-Style (kompakter). */
.gallery__head .section-head__title {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  line-height: 1.15;
}

/* v151: Calice-Bento — 12-Spalten-Grid mit g1-g12 spans. */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(140px, 14vw, 200px);
  gap: 14px;
}

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow, 0.6s) var(--ease-out);
}
.gallery__item:hover img { transform: scale(1.05); }

/* Bento-Pattern (v152: mittlere 2 Reihen raus, je 12 auf) */
.gallery__item.g1  { grid-column: span 7; grid-row: span 2; }   /* groß links Reihe 1-2 */
.gallery__item.g2  { grid-column: span 5; }                     /* oben rechts */
.gallery__item.g3  { grid-column: span 5; }                     /* unten rechts unter g2 */
.gallery__item.g10 { grid-column: span 5; }                     /* Reihe 3 oben links */
.gallery__item.g11 { grid-column: span 7; grid-row: span 2; }   /* groß rechts Reihe 3-4 */
.gallery__item.g12 { grid-column: span 5; }                     /* Reihe 4 unten links */

/* Mobile + Tablet: Bento → horizontaler Swipe-Carousel mit Peek-Effekt */
@media (max-width: 1024px) {
  .gallery__grid {
    display: flex;
    grid-template-columns: none;
    grid-auto-rows: auto;
    gap: 14px;
    padding: 0 calc(var(--space-3) + 28vw) 12px var(--space-3);
    margin-inline: calc(var(--space-3) * -1);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--space-3);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .gallery__grid::-webkit-scrollbar { display: none; }
  .gallery__item {
    flex: 0 0 auto;
    width: 72vw;
    max-width: 340px;
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
    cursor: default;
  }
  .gallery__item.g1,
  .gallery__item.g2,
  .gallery__item.g3,
  .gallery__item.g10,
  .gallery__item.g11,
  .gallery__item.g12 {
    grid-column: auto;
    grid-row: auto;
  }
  /* Tablet (≥600px): schmalere figures — 2 voll + Peek */
  @media (min-width: 600px) {
    .gallery__item {
      width: 38vw;
      max-width: 300px;
    }
  }
}

/* Lightbox-Overlay */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: rgba(11, 8, 7, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  cursor: zoom-out;
}

.lightbox.is-open { display: flex; opacity: 1; }

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dark);
  transform: scale(0.96);
  transition: transform var(--dur-base) var(--ease-quart);
}

.lightbox.is-open .lightbox__img { transform: scale(1); }

.lightbox__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--espresso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

/* ============================================================
   18. SIDE-WATERMARKS + HERO-SPARKLES (v7)
   Mockup-DNA: italienische Wörter dezent rotated an Sektions-Rändern,
   plus zarte Gold-Sterne im Hero. Ersetzt die alte Marquee-Sektion.
   ============================================================ */

/* Side-Watermarks pro Sektion */
section[data-side-mark] {
  position: relative;
}

section[data-side-mark]::after {
  content: attr(data-side-mark);
  position: absolute;
  top: 50%;
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 0.55rem + 0.3vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--espresso);
  opacity: 0.13;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

section[data-side-mark][data-side-pos="right"]::after {
  right: clamp(0.75rem, 1.6vw, 1.4rem);
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
}

section[data-side-mark][data-side-pos="left"]::after {
  left: clamp(0.75rem, 1.6vw, 1.4rem);
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
}

/* DARK-Sektion (Stats): Cream-Variante mit höherer Opacity */
.stats[data-side-mark]::after {
  color: var(--cream);
  opacity: 0.22;
}

/* Auf Mobile ausblenden — zu wenig Platz, würde Content schneiden */
@media (max-width: 860px) {
  section[data-side-mark]::after { display: none; }
}

/* Hero-Sparkles — 5 Gold-Sterne, langsame Drift */
.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  pointer-events: none;
  opacity: 0;
  background: var(--gold);
  /* 4-Punkt-Stern via clip-path */
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  filter: drop-shadow(0 0 4px rgba(184, 148, 90, 0.6));
  animation: sparkleDrift 16s var(--ease-soft) infinite;
}

.sparkle--1 { top: 18%;  left: 12%;  width: 5px;  height: 5px; animation-duration: 14s; animation-delay: 0s;    }
.sparkle--2 { top: 32%;  left: 38%;  width: 7px;  height: 7px; animation-duration: 18s; animation-delay: -3s;   }
.sparkle--3 { top: 64%;  left: 22%;  width: 4px;  height: 4px; animation-duration: 20s; animation-delay: -8s;   }
.sparkle--4 { top: 22%;  right: 8%;  width: 6px;  height: 6px; animation-duration: 17s; animation-delay: -5s;   }
.sparkle--5 { top: 72%;  right: 18%; width: 5px;  height: 5px; animation-duration: 22s; animation-delay: -11s;  }

@keyframes sparkleDrift {
  0%, 100% { opacity: 0;    transform: translateY(0) scale(0.7); }
  20%      { opacity: 0.5;  transform: translateY(-6px) scale(1); }
  50%      { opacity: 0.32; transform: translateY(-12px) scale(0.95); }
  80%      { opacity: 0.46; transform: translateY(-4px) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; opacity: 0.32; }
}

/* ============================================================
   18b. ORNAMENTS (v8) — figurative Gold-Outline-Schnörkel
   Eis-Cones, Pistazien-Zweige, Olivenzweige als dezente Decorations.
   ============================================================ */
.ornament {
  position: absolute;
  pointer-events: none;
  color: var(--gold);          /* currentColor → stroke/fill */
  opacity: 0.5;
  z-index: 1;
  width: clamp(56px, 5vw + 32px, 96px);
  height: auto;
}

/* Etwas größer für die Cone-Outlines (sind das Hero-Element der Mockup-Schnörkel) */
.ornament--cone        { width: clamp(72px, 6vw + 40px, 124px); }
.ornament--cone-mini   { width: clamp(56px, 4vw + 28px, 88px);  }
.ornament--olive       { width: clamp(80px, 7vw + 40px, 132px); }
.ornament--pistachio   { width: clamp(56px, 5vw + 28px, 90px);  }
.ornament--sprinkles   { width: clamp(48px, 4vw + 24px, 78px);  }

/* Position-Variants */
.ornament--top-left     { top: clamp(2rem, 4vh, 4rem); left: clamp(1rem, 3vw, 3rem); }
.ornament--top-right    { top: clamp(2rem, 4vh, 4rem); right: clamp(1rem, 3vw, 3rem); }
.ornament--top-center   { top: clamp(2rem, 4vh, 4rem); left: 50%; transform: translateX(-50%); }
.ornament--bottom-left  { bottom: clamp(2rem, 4vh, 4rem); left: clamp(1rem, 3vw, 3rem); }
.ornament--bottom-right { bottom: clamp(2rem, 4vh, 4rem); right: clamp(1rem, 3vw, 3rem); }

/* DARK-Sektionen → Cream-Stroke statt Gold */
.stats .ornament,
.hero .ornament,
.site-footer .ornament {
  color: var(--cream);
  opacity: 0.32;
}

/* Mobile: kleiner + dezenter (oder ganz ausblenden bei <520) */
@media (max-width: 720px) {
  .ornament { opacity: 0.4; }
}
@media (max-width: 520px) {
  .ornament { display: none; }
}

/* ============================================================
   19. FOOTER SOCIAL PRO STANDORT (Maik-Feedback v6)
   ============================================================ */
.footer-location-social {
  display: inline-flex;
  gap: 0.4em;
  margin-top: 0.6em;
}

.footer-location-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--cream-15);
  color: var(--cream);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.footer-location-social a:hover {
  background: var(--gold);
  color: var(--espresso);
  border-color: var(--gold);
}

.footer-location-social svg { width: 12px; height: 12px; fill: currentColor; }

/* ============================================================
   17. REVEAL-ANIMATIONEN
   ============================================================ */
[data-reveal],
[data-reveal-stagger],
[data-reveal-visual] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-quart),
              transform var(--dur-slow) var(--ease-quart);
}

[data-reveal-visual] { transform: translateY(0) scale(0.96); }

.is-revealed { opacity: 1; transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal],
  [data-reveal-stagger],
  [data-reveal-visual] { opacity: 1; transform: none; }
  .nav-drawer__list a { transform: translateY(0); opacity: 1; }
}

/* ============================================================
   v167/v168 — MOBILE+TABLET SECTION-PADDING-OVERRIDE (≤900px)
   - Cream/Dark-Sektionen kompakter (96 → 48), Section-Rhythmus
     symmetrisch — Hero-bottom + alle Sektionen-block alle bei 48,
     damit Pillars-Top + Pillars-Bottom optisch gleich wirken.
   - About-Typo nur ≤600px (Mobile only).
   ============================================================ */
@media (max-width: 900px) {
  .hero { padding-bottom: var(--space-5); }
  .pillars,
  .about,
  .sortiment,
  .standorte,
  .gallery,
  .reviews,
  .anfrage-cta {
    padding-block: var(--space-5); /* 96 → 48 */
  }
  /* v175: Pillars padding-block kompakter — der Pillars→About-Uebergang
     (cream→cream, kein Farbwechsel) wirkt sonst doppelt so gross wie
     Hero→Pillars (espresso→cream, klare Trennung). */
  .pillars { padding-block: var(--space-4); }
  .stats { padding-block: var(--space-4); } /* 64 → 32 (Dark-Block) */
}

@media (max-width: 600px) {
  /* About-Typo: Body kleiner, Signature-Text kleiner, Signature-Image groesser */
  .about__copy p { font-size: 0.95rem; line-height: 1.65; }
  .about__signature-text { font-size: 0.95rem; }
  .about__signature-mark__img { height: clamp(38px, 9vw, 54px); }
}