/* v21 — Galerie-Wisch-Fix (Runde 4, Architektur-Wechsel): natives Touch-Scroll zickte auf dem
         Gerät durchweg (Runden 1–3 mit proximity/pointer-events/pan-x halfen nicht, pan-x machte
         es schlimmer). Entscheidende Evidenz: die Lightbox-Wische (JS touchstart/touchend) läuft
         einwandfrei → JS-Wisch geht, natives Scroll nicht. Also Karussell auf JS umgestellt:
         touch-action:pan-y (horizontale Geste → JS, vertikal scrollt die Seite) + JS-Handler
         Wisch→scrollBy(ein Bild, smooth). Bundle ?v=28.
   v20 — Galerie-Wisch-Fix (Runde 3, der eigentliche): `touch-action:pan-x` statt `pan-x pan-y`
         auf dem Karussell. Ursache war NICHT das Bild (pointer-events:none half nicht, keine
         Overlays) — der Browser durfte den leicht diagonalen Daumen-Wisch als vertikales
         Seiten-Scroll werten und kaperte ihn → „Mitte tot, nur am Rand geht's". pan-x gibt die
         Geste zwingend dem Karussell. Zusätzlich scroll-snap ganz raus → freies Momentum-
         Scrollen, kein Zurückschnappen. Bundle ?v=27.
   v19 — Galerie-Wisch-Fix (Runde 2) + Lightbox-Pfeile: (1) Karussell ließ sich auf dem Handy
         NICHT wischen, wenn der Finger auf einem Bild startete (nur „außen"/Lücke ging) — das
         <img> fing die Geste als natives Bild-Ziehen ab. Fix: .gal-cell img pointer-events:none
         + -webkit-user-drag/-touch-callout aus → Wisch geht durch aufs Karussell, Tap landet auf
         der Figur (Lightbox unverändert). (2) Lightbox-Prev/Next jetzt IN der Stage, über dem
         Bild an dessen linkem/rechtem Rand (wie das X), dunkler Chip für Kontrast. Bundle ?v=26.
   v18 — Galerie Mobile-Wisch entklemmt + Tap-to-Zoom-Lightbox: (1) Karussell-Snap von
         `mandatory` auf `proximity` — sanfte Teilwische bleiben liegen statt zurückzuschnappen
         (behob „hakelt in der Mitte, nur am Rand geht's"), + overscroll-behavior-x:contain.
         (2) Galerie-Bilder sind jetzt anklickbar (cursor:zoom-in) und öffnen eine echte
         Lightbox (.glb) mit Prev/Next/Zähler; Tap-vs-Wisch-Erkennung im JS. Bundle ?v=25.
   v17 — Kontrast (WCAG-AA): --muted #6f6d63 → #676555, damit Fließtext auf abgesetzten Bändern
         (paper-2 #EDEAE0) 4,5:1 erreicht (war 4,31:1). Bundle ?v=24.
   v16 — Galerie-Anordnung beruhigt: statt versetztem Masonry (wirkte „wild") jetzt Feature-Raster —
         ein großes Feature (.gal-cell--feature, span 2×2, oben-links) + kleines Raster drumherum.
         Mobile-Karussell unverändert (Feature dort auf flex 80% + grid-column/row auto). Bundle ?v=23.
   v15 — Galerie modernisiert: Desktop von 3×3 auf versetztes Masonry (4 Spalten, grid-auto-rows 220px,
         3 breite span-2-Kacheln diagonal gestaffelt). Mobile bleibt Wisch-Karussell (aspect-ratio 3/2
         + flex 80% jetzt in der Mobile-Query, da Basis keine aspect-ratio mehr hat). Bundle ?v=22.
   v14 — Galerie „Ein Blick in unser Geschäft": echte Fotos statt Platzhalter. Desktop 3×3-Raster
         (aspect-ratio 3/2), Mobile = horizontales Wisch-Karussell mit Scroll-Snap + 80%-Karten,
         sodass das nächste Bild angeschnitten sichtbar ist (Peek). Bundle ?v=21.
   v13 — Standorte-Karten: .loc__link button-tauglich (background/border/cursor/font-family/
         text-align-Resets) → eigene Beer-Karte nutzt jetzt einen js-book-Button „Termin
         vereinbaren →" wie die Link-Pfeile. Bundle ?v=20.
   v12 — Footer-Kontaktspalte einheitlich dunkel: Straße + PLZ in ink statt muted (war
         halb hell/halb dunkel neben Telefon/E-Mail). Bundle ?v=19.
   v11 — Maik-Feinschliff: Öffnungszeiten Komma→dezenter Mittelpunkt-Trenner (.time-sep, auf
         ≤560px ausgeblendet, dort weiter Zwei-Zeilen-Stack); Footer-Typo harmonisiert (Adresse
         + Menü gleiche Größe/Gewicht/Zeilenhöhe, Menü-Links display:block → Zeilen fluchten
         Spalte für Spalte); Tagline-Zeilenhöhe 1.6→1.5. Bundle ?v=18.
   v10 — Footer-Politur: vier Spalten mit gemeinsamen, fluchtenden Eyebrow-Köpfen
         (.foot-nav__label/.nl__label gleicher Stil); Oberkanten fluchten mit dem Marken-Namen;
         Menü-Link-Top-Padding-Versatz raus; Newsletter-Spalte füllt die Rasterzelle (kein
         Leerraum mehr); Input-Fokus-Ring (a11y); Bottom-Bar vertikal zentriert. Bundle ?v=17.
   v9 — Öffnungszeiten: geteilte Di–Fr-Zeit (09–13 / 14–18) rechtsbündig; auf Screens ≤560px
        in zwei Zeilen gestapelt (.time-br + Media-Query), damit der Umbruch neben langen
        Tagesnamen einheitlich ist und bei keiner Breite überläuft. Bundle ?v=16.
   v8 — Marken-Größen ausgewogener: .brand-logo--wide auf max-width 60% (statt 95%) — breite
        Wortmarken dominieren nicht mehr die Karte. Bundle ?v=15.
   v7 — Marken-Logos: .brand-logo--wide (volle Kartenbreite für sehr breite Wortmarken). Bundle ?v=14.
   v6 — Marken-Logos: .brand-logo (höhenbegrenzt, zentriert, transparent/schwarz auf weißer Karte). Bundle ?v=13.
   v5 — Footer mobil kompakter: weniger Padding, Bottom-Bereich gestapelt+eng, engere
        Spalten-/Label-Abstände. Bundle ?v=12.
   v4 — Mobile-Menü-Fix (body overflow-x:clip) · Hero-Subline enger (mobil line-height 1.4) ·
        Footer: Adresse gedämpft + enger + Reihenfolge via Markup (Kontakt vor Menü). Bundle ?v=11.
   v3 — Werte-Pillars (.pillar__ic, Icon-Kreis) + Footer: Spalten-Labels (.foot-nav__label) &
        Kontakt-Block mit einheitlichem Zeilenrhythmus (.foot-contact). Bundle ?v=10.
   v2 — Mobile-Menü: Nav-Toggle-Icon-Swap (Hamburger zu / X offen via body.nav-open). Bundle ?v=9.
   v1 — Optik Beer · Planitz — klassisch-traditioneller One-Pager.
   Familien-DNA zu Eyestyle (Creme/Ink/Olivgrün, Rethink Sans), aber ruhiger:
   Zilla-Slab-Headlines, viel Weißraum, sparsamer Grün-Akzent, kaum Bewegung. */

:root{
  --ink:#1b1a17;          /* warmes Schwarz (Tick wärmer als Eyestyle-Ink) */
  --paper:#F4F2EC;        /* Creme — identisch zu Eyestyle (Familien-Klammer) */
  --paper-2:#EDEAE0;      /* abgesetzte Bänder */
  --card:#FFFFFF;
  --olive:#ABB318;        /* das Grün bleibt — Flächen/Buttons */
  --olive-d:#8F9612;
  --olive-text:#5f640f;   /* Grün als Text auf Creme: dunkel genug für WCAG-AA */
  --muted:#676555;       /* Tick dunkler → WCAG-AA auch auf paper-2 (war #6f6d63 = 4,31:1) */
  --line:#E2DED2;
  --line-strong:#D2CDBE;
  --r:12px; --r-sm:8px; --r-lg:18px;
  --maxw:1080px;
  --serif:'Zilla Slab', Georgia, 'Times New Roman', serif;
  --sans:'Rethink Sans', system-ui, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-font-smoothing:antialiased; color-scheme:light; scroll-behavior:smooth}
body{
  font-family:var(--sans); background:var(--paper); color:var(--ink);
  line-height:1.6; overflow-x:clip;   /* clip statt hidden: kappt horizontal, OHNE position:fixed
                                          zu brechen — sonst wird das Mobile-Menü-Overlay bei
                                          gescrollter Seite auf iOS abgeschnitten. */
}
img{max-width:100%; display:block}
a{color:inherit}
:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--olive-d); outline-offset:3px; border-radius:6px;
}

.container{max-width:var(--maxw); margin:0 auto; padding:0 26px}
@media(max-width:600px){.container{padding:0 20px}}

/* Typo-Grundlagen */
h1,h2,h3{font-family:var(--serif); font-weight:700; line-height:1.08; letter-spacing:-.01em}
.eyebrow{
  font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--olive-text); margin-bottom:16px;
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--olive); display:inline-block}
.section{padding:92px 0}
@media(max-width:760px){.section{padding:60px 0}}
.section-head{max-width:640px; margin-bottom:48px}
.section-head h2{font-size:clamp(27px,3.8vw,40px)}
.section-head p{font-size:17px; color:var(--muted); margin-top:16px; max-width:540px}

/* Buttons — schlank, ruhig */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:inherit; font-weight:700; font-size:15px; padding:13px 26px; border-radius:10px;
  cursor:pointer; border:0; text-decoration:none; transition:.18s; white-space:nowrap;
}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:#322f29; transform:translateY(-1px)}
.btn-olive{background:var(--olive); color:var(--ink)}
.btn-olive:hover{background:#bcc41f; transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-outline-light{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5)}
.btn-outline-light:hover{border-color:#fff; background:rgba(255,255,255,.1)}

/* ── Header ───────────────────────────────────────────────── */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:inline-flex; flex-direction:column; line-height:1; text-decoration:none}
.brand .name{font-family:var(--serif); font-weight:700; font-size:22px; letter-spacing:-.01em}
.brand .sub{font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); margin-top:4px}
.nav{display:flex; align-items:center; gap:30px}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{font-size:14.5px; font-weight:600; text-decoration:none; color:var(--ink); position:relative; padding:11px 0}
.nav-links a::after{content:''; position:absolute; left:0; right:0; bottom:5px; height:2px;
  background:var(--olive); transform:scaleX(0); transform-origin:left; transition:transform .22s ease}
.nav-links a:hover::after{transform:scaleX(1)}
.header-cta .btn{padding:12px 20px; font-size:14px}

/* transparent über Hero (helle Schrift) */
.site-header.on-hero .brand .name,
.site-header.on-hero .brand .sub,
.site-header.on-hero .nav-links a{color:#fff}
.site-header.on-hero .brand .sub{color:rgba(255,255,255,.75)}
.site-header.on-hero .header-cta .btn-ink{background:#fff; color:var(--ink)}
/* gescrollt UND nicht mehr über dem Hero → solide Creme-Leiste.
   :not(.on-hero) ist entscheidend: sonst gäbe es beim Scrollen IM Hero creme-BG + weiße Schrift
   gleichzeitig = unleserlich. Über dem Hero bleibt der Header immer transparent. */
/* Solide Leiste OHNE backdrop-filter: ein blur/backdrop-filter würde den Header zum Containing-Block
   für das position:fixed-Mobile-Menü machen (nav-links liegt IM Header) → Menü nur halb sichtbar.
   Deshalb deckend per (fast) solider Farbe statt Blur. */
.site-header.scrolled:not(.on-hero){background:var(--paper);
  border-bottom:1px solid var(--line); box-shadow:0 1px 20px rgba(0,0,0,.04)}

/* Mobile-Nav */
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:11px; margin:-2px; color:inherit}
.nav-toggle svg{display:block}
/* Icon-Swap: Hamburger zeigt zu, X zeigt offen (gesteuert durch body.nav-open) */
.nav-toggle .i-close{display:none}
body.nav-open .nav-toggle .i-open{display:none}
body.nav-open .nav-toggle .i-close{display:block}
/* nav-foot (Termin + Social) NUR im Mobile-Menü — auf Desktop ausgeblendet. */
.nav-foot{display:none}

@media(max-width:820px){
  /* Vollflächiges Overlay-Menü — Links + unterer Block im normalen Fluss, vertikal zentriert.
     (nav-foot NICHT mehr absolut → überlappt „Standorte" nicht.) Scrollbar, falls eng. */
  /* KEIN transform auf dem fixierten Overlay (ein transform auf einem position:fixed-Element,
     das in einem position:fixed-Header liegt, verschiebt es in Chrome falsch → Menü nur halb/unten).
     Ein-/Ausblenden daher per opacity/visibility statt Slide. */
  .nav-links{position:fixed; inset:0; width:100%; background:var(--ink); overflow-y:auto;
    flex-direction:column; align-items:center; justify-content:center; gap:0; padding:96px 28px 48px;
    opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease; z-index:60}
  .nav-links a{color:#fff !important; font-size:23px; font-family:var(--serif); font-weight:600;
    line-height:1.1; padding:13px 8px; text-align:center}
  .nav-links a::after{display:none}
  .nav-links a:active{color:#dfe27a !important}
  body.nav-open .nav-links{opacity:1; visibility:visible}
  body.nav-open{overflow:hidden}
  body.nav-open .nav-toggle{color:#fff}  /* Toggle auf dunklem Overlay sichtbar halten */
  .nav-toggle{display:inline-flex; z-index:70}
  .header-cta{display:none}
  /* Termin + Angebot + Social — direkt unter den Links, abgesetzt durch Abstand + Hairline */
  .nav-foot{display:flex; flex-direction:column; align-items:center; gap:20px;
    margin-top:34px; padding-top:30px; width:100%; max-width:300px;
    border-top:1px solid rgba(255,255,255,.14)}
  .nav-foot .btn{font-size:16px; padding:14px 30px}
  .nav-offer{background:none; border:0; cursor:pointer; font:inherit; font-size:14.5px; font-weight:600;
    color:#dfe27a; text-decoration:underline; text-underline-offset:4px; padding:6px}
  .nav-social{display:flex; gap:16px}
  .nav-social a{width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.28);
    display:grid; place-items:center; color:#fff; transition:.18s}
  .nav-social a:active{background:rgba(255,255,255,.12); border-color:#fff}
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{position:relative; min-height:88vh; display:flex; align-items:flex-end; color:#fff;
  padding:120px 0 56px; overflow:hidden}
/* Flex-Item muss volle Breite haben, sonst schrumpft der Container + margin:auto zentriert
   den Textblock (→ Headline rutscht nach rechts statt bündig zum Logo). */
.hero > .container{width:100%}
.hero__bg{position:absolute; inset:0; z-index:-2}
.hero__bg img{width:100%; height:100%; object-fit:cover}
.hero::after{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,19,16,.5) 0%, rgba(20,19,16,.2) 38%, rgba(20,19,16,.82) 100%)}
.hero__inner{max-width:720px}
.hero h1{font-size:clamp(38px,6.4vw,68px); letter-spacing:-.02em}
.hero h1 .accent{color:#fff}
.hero p{font-size:clamp(17px,2vw,20px); margin-top:22px; max-width:540px; color:rgba(255,255,255,.92);
  font-weight:400}
/* Eyebrow ist ein <p> → sonst greift .hero p (20px/weight 400). Echte Eyebrow-Größe erzwingen. */
.hero p.eyebrow{font-size:12px; font-weight:700; line-height:1.5; letter-spacing:.18em; margin-top:0; max-width:none}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.hero__strip{display:flex; flex-wrap:wrap; gap:26px; margin-top:40px; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.22); font-size:15px}
.hero__strip .item{display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.92)}
.hero__strip .item svg{flex:none; opacity:.8}
.hero__strip .open{color:#dfe27a; font-weight:700}
/* Mobile-Hero ruhiger: Eyebrow enger gesperrt (lesbar), Subline mehr Zeilenabstand,
   Adresse im Strip weg (steht in Öffnungszeiten/Footer) — nur „Heute geöffnet" bleibt. */
@media(max-width:600px){
  .hero p.eyebrow{letter-spacing:.08em; font-size:11.5px}
  .hero p{font-size:17px; line-height:1.4; margin-top:16px}
  .hero__strip{gap:0; margin-top:30px; padding-top:22px}
  .hero__strip .item:first-child{display:none}
}

/* ── Über uns ─────────────────────────────────────────────── */
.about{background:var(--paper)}
.about__grid{display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center}
@media(max-width:860px){.about__grid{grid-template-columns:1fr; gap:40px}}
.about__lead{font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.6vw,29px);
  line-height:1.3; letter-spacing:-.01em}
.about__lead em{font-style:italic; color:var(--olive-text)}
.about__body p{color:var(--muted); font-size:16.5px; margin-top:18px; max-width:520px}
/* Kästchen (Maik-Wunsch): Nummer + Überschrift + Text in weiß umrandeter Karte. */
.about__pillars{list-style:none; display:flex; flex-direction:column; gap:14px}
.pillar{display:flex; align-items:center; gap:18px; padding:22px 26px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); transition:transform .2s, border-color .2s}
.pillar:hover{border-color:var(--line-strong); transform:translateY(-2px)}
.pillar__no{flex:none; width:26px; font-family:var(--serif); font-weight:700; font-size:15px;
  color:var(--olive-text); letter-spacing:.02em}
/* Werte-Icon (statt Nummer) — grenzt „Warum wir" klar von der nummerierten Leistungsliste ab. */
.pillar__ic{flex:none; width:44px; height:44px; border-radius:50%; background:#F0F1DC;
  color:var(--olive-text); display:grid; place-items:center}
.pillar h3{font-family:var(--serif); font-size:19px; margin-bottom:5px}
.pillar p{font-size:14.5px; color:var(--muted); line-height:1.55}

/* ── Leistungen ───────────────────────────────────────────── */
.services{background:var(--paper-2)}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:820px){.svc-grid{grid-template-columns:1fr}}
.svc{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px;
  position:relative; transition:.2s}
.svc:hover{transform:translateY(-3px); box-shadow:0 14px 40px rgba(27,26,23,.07)}
.svc .num{font-family:var(--serif); font-size:15px; font-weight:700; color:var(--olive-text)}
.svc h3{font-size:22px; margin:14px 0 10px}
.svc p{font-size:15px; color:var(--muted)}
.svc .meta{margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; font-size:13.5px; font-weight:600}
.svc .meta .price{color:var(--olive-text)}
.svc .meta .dur{color:var(--muted)}

/* ── Marken ───────────────────────────────────────────────── */
.brands{background:var(--paper)}
/* Marken in weiß umrandeten Kästchen (Maik bevorzugt — klarer, ziehen den Blick).
   Bei echten Logo-Dateien später: Markenname → <img class="brand-logo" src=…>. */
.brand-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:42px}
@media(max-width:760px){.brand-grid{grid-template-columns:repeat(2,1fr); gap:12px}}
.brand-cell{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  min-height:104px; display:grid; place-items:center; text-align:center; padding:16px 18px;
  font-family:var(--serif); font-weight:600; font-size:clamp(17px,1.7vw,21px); letter-spacing:.01em;
  color:#46443c; transition:transform .2s, border-color .2s, color .2s}
.brand-cell:hover{border-color:var(--line-strong); color:var(--ink); transform:translateY(-2px)}
/* Echte Marken-Logos (schwarz, transparent) — höhenbegrenzt zentriert auf der weißen Karte. */
.brand-logo{max-height:44px; max-width:78%; width:auto; height:auto; object-fit:contain; display:block}
/* sehr breite Wortmarken (Eschenbach, Titanflex, Emporio Armani, Visibilia): NICHT bis an den
   Kartenrand laufen lassen — sonst wirken sie zu dominant ggü. den kompakten Logos. Schmaler
   begrenzen → mehr Rand, ausgewogeneres Gesamtbild. */
.brand-logo--wide{max-width:60%}
@media(max-width:760px){.brand-logo--wide{max-width:72%}}
@media(max-width:760px){.brand-logo{max-height:38px}}

/* ── Galerie ──────────────────────────────────────────────── */
.gallery{background:var(--paper-2)}
/* Desktop: ruhiges Feature-Raster (4 Spalten, feste Reihenhöhe). Ein großes Feature-Bild
   (2×2, oben-links) als Blickfang, rechts ein 2×2-Raster kleiner Kacheln, darunter eine Reihe.
   Ruhiger/strukturierter als das versetzte Masonry (kein Zickzack). */
.gal-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:16px}
.gal-cell{margin:0; border-radius:var(--r); overflow:hidden; position:relative; background:var(--paper)}
.gal-cell--feature{grid-column:span 2; grid-row:span 2}
/* pointer-events:none → Touch-Wisch geht durchs Bild aufs Karussell (iOS-Bild-Drag-Falle);
   Klick landet auf .gal-cell (dort der Handler). Cursor/Zoom-Affordance sitzt auf der Zelle. */
.gal-cell img{width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none; -webkit-user-drag:none; -webkit-touch-callout:none; user-select:none}
/* Mobile (iPhone/Tablet-Mini): horizontales Wisch-Karussell — JS-getrieben (wie die Lightbox).
   Karten 80% breit → nächstes Bild angeschnitten sichtbar (Peek); Feature hier normal breit.
   touch-action:pan-y: der Browser scrollt vertikal die Seite, die HORIZONTALE Geste geht an JS
   (touchstart/touchend → scrollBy ein Bild). Native Touch-Scroll bewusst NICHT genutzt, weil es
   auf dem Gerät zickte (nur am Rand griff); scroll-behavior:smooth für weiches Programm-Scrollen. */
@media(max-width:820px){
  .gal-grid{display:flex; grid-template-columns:none; grid-auto-rows:auto; overflow-x:auto;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-behavior:smooth;
    touch-action:pan-y;
    gap:12px; padding-bottom:4px; scrollbar-width:none}
  .gal-grid::-webkit-scrollbar{display:none}
  .gal-cell, .gal-cell--feature{flex:0 0 80%; grid-column:auto; grid-row:auto; scroll-snap-align:start; aspect-ratio:3/2}
}
/* Platzhalter, solange keine echten Fotos da sind (Umbau) */
.gal-cell.ph{background:
  repeating-linear-gradient(135deg, #E7E3D7 0 14px, #ECE9DE 14px 28px);
  border:1px solid var(--line); display:grid; place-items:center}
.gal-cell.ph .ph-tag{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#9a978a; background:#fff; border:1px solid var(--line); border-radius:20px; padding:6px 14px}
.gal-cell{cursor:zoom-in}
.gal-cell:focus-visible{outline:2px solid var(--olive); outline-offset:3px}

/* ── Galerie-Lightbox (Tap-to-Zoom) ───────────────────────── */
.glb{position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  background:rgba(20,18,12,.92); opacity:0; pointer-events:none; transition:opacity .22s ease}
.glb.is-open{opacity:1; pointer-events:auto}
.glb__stage{position:relative; max-width:92vw; max-height:86vh; display:flex; align-items:center; justify-content:center}
.glb__img{max-width:92vw; max-height:86vh; width:auto; height:auto; object-fit:contain; border-radius:8px;
  box-shadow:0 24px 70px rgba(0,0,0,.5); user-select:none; -webkit-user-drag:none}
/* Steuer-Buttons */
/* Pfeile sitzen IN der Stage → an den tatsächlichen Bildrändern, über dem Bild (wie das X). */
.glb__btn{position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.45); color:#fff; display:grid; place-items:center;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  transition:background .15s ease}
.glb__btn:hover{background:rgba(0,0,0,.66)}
.glb__btn:focus-visible{outline:2px solid #fff; outline-offset:2px}
.glb__btn svg{width:22px; height:22px}
.glb__prev{left:8px}
.glb__next{right:8px}
.glb__close{position:absolute; top:max(14px, env(safe-area-inset-top)); right:max(14px, env(safe-area-inset-right));
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer; z-index:3;
  background:rgba(255,255,255,.14); color:#fff; font-size:22px; line-height:1; display:grid; place-items:center;
  transition:background .15s ease}
.glb__close:hover{background:rgba(255,255,255,.26)}
.glb__close:focus-visible{outline:2px solid #fff; outline-offset:2px}
.glb__count{position:absolute; bottom:max(16px, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  z-index:3; font-size:13px; font-weight:600; letter-spacing:.03em; color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.35); padding:5px 12px; border-radius:20px}
/* Auf schmalen Screens: Pfeile etwas kleiner (bleiben aber über dem Bild am Rand) */
@media(max-width:560px){
  .glb__btn{width:40px; height:40px}
  .glb__btn svg{width:20px; height:20px}
  .glb__prev{left:6px}
  .glb__next{right:6px}
}
@media(prefers-reduced-motion:reduce){ .glb{transition:none} }

/* ── Öffnungszeiten + Standort (balancierte Karten) ───────── */
.visit{background:var(--ink); color:#fff}
.visit .eyebrow{color:#cdd06a}
.visit .eyebrow::before{background:var(--olive)}
.visit__grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch}
@media(max-width:860px){.visit__grid{grid-template-columns:1fr}}
.vcard{background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r); padding:30px 30px 32px; display:flex; flex-direction:column}
.vcard__head{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-bottom:18px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.13)}
.vcard__head h3{font-family:var(--serif); font-size:21px; color:#fff}
.status{font-size:12px; font-weight:700; letter-spacing:.04em; padding:5px 12px; border-radius:20px;
  white-space:nowrap}
.status.is-open{color:#0e1402; background:var(--olive)}
.status.is-shut{color:rgba(255,255,255,.72); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16)}
.hours{margin-top:6px}
.hours .row{display:flex; justify-content:space-between; align-items:center; padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.09); font-size:15.5px}
.hours .row:last-child{border-bottom:0}
.hours .row .day{color:rgba(255,255,255,.78)}
.hours .row .time{font-weight:600; font-variant-numeric:tabular-nums; text-align:right}
/* Geteilte Zeiten (Di–Fr 09–13 / 14–18): auf breiten Screens ein dezenter Mittelpunkt-Trenner
   mit Abstand (statt Komma), auf schmalen Screens stattdessen Zwei-Zeilen-Umbruch. */
.hours .row .time .time-br{display:none}
.hours .row .time .time-sep{color:rgba(255,255,255,.4); font-weight:400}
.hours .row.is-closed .time{color:rgba(255,255,255,.34); font-weight:400}
.hours .row.is-today{margin:0 -14px; padding-left:14px; padding-right:14px; border-radius:8px;
  background:rgba(171,179,24,.14)}
.hours .row.is-today .day{color:#e3e684; font-weight:700}
.hours .row.is-today .time{color:#fff}
/* Schmale Screens: geteilte Zeit (Vormittag/Nachmittag) in zwei rechtsbündige Zeilen stapeln
   — verhindert uneinheitlichen Umbruch neben langen Tagesnamen (z. B. „Donnerstag"). */
@media(max-width:560px){
  .hours .row{align-items:flex-start}
  .hours .row .day{padding-top:1px}
  .hours .row .time{line-height:1.32}
  .hours .row .time .time-br{display:inline}
  .hours .row .time .time-sep{display:none}
}
.contact-list{list-style:none; margin:4px 0 22px}
.contact-list li{display:flex; gap:15px; padding:15px 0; align-items:flex-start;
  border-bottom:1px solid rgba(255,255,255,.09)}
.contact-list li svg{flex:none; margin-top:2px; color:#cdd06a}
.contact-list .k{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:4px}
.contact-list .v{font-size:16px; font-weight:600; line-height:1.45}
.contact-list .v a{text-decoration:none}
.btn-ghost-light{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.3)}
.btn-ghost-light:hover{border-color:#fff; background:rgba(255,255,255,.07)}
.vcard{margin-top:0}
.vcard > .btn, .vcard > .contact-list ~ .btn{margin-top:auto}

/* ── Standorte (Eyestyle-Familie) ─────────────────────────── */
.standorte{background:var(--paper-2)}
.loc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:880px){.loc-grid{grid-template-columns:1fr}}
.loc{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:.22s}
.loc:hover{transform:translateY(-4px); border-color:var(--olive); box-shadow:0 18px 44px -6px rgba(171,179,24,.42)}
.loc--here{border-color:var(--olive); box-shadow:0 0 0 1px var(--olive)}
.loc__photo{aspect-ratio:3/2; overflow:hidden; background:var(--warmgrey,#DDDDD5); position:relative}
.loc__photo img{width:100%; height:100%; object-fit:cover; display:block}
.loc__badge{position:absolute; top:14px; left:14px; z-index:2; font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#0e1402; background:var(--olive);
  padding:5px 11px; border-radius:20px; box-shadow:0 4px 12px rgba(0,0,0,.18)}
.loc__info{padding:26px 28px 28px; display:flex; flex-direction:column; flex:1}
.loc__info h3{font-family:var(--serif); font-size:22px; margin-bottom:2px}
.loc__city{font-size:12px; color:var(--olive-text); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:16px}
.loc address{font-style:normal; color:var(--muted); font-size:15px; line-height:1.55; margin-bottom:0}
.loc__hours{margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
  font-size:14px; color:var(--muted)}
.loc__link{margin-top:auto; padding:20px 0 0; font-size:14.5px; font-weight:700; color:var(--ink); text-decoration:none;
  background:none; border:0; cursor:pointer; font-family:inherit; text-align:left}
.loc__link:hover{color:var(--olive-d)}

/* ── Termin-Band ──────────────────────────────────────────── */
.cta-band{background:var(--olive); color:var(--ink); text-align:center}
.cta-band h2{font-size:clamp(28px,4vw,44px); max-width:760px; margin:0 auto}
.cta-band p{font-size:18px; margin:18px auto 30px; max-width:520px; color:#3a3d09}
.cta-band .btn-ink{padding:15px 34px; font-size:16px}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer{background:var(--paper-2); padding:72px 0 30px; border-top:1px solid var(--line)}
/* 4 Spalten: Marke · Kontakt · Menü · Newsletter — gemeinsame Eyebrow-Köpfe, Oberkanten fluchten. */
.foot-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.5fr; gap:44px 48px; align-items:start}
@media(max-width:980px){.foot-top{grid-template-columns:1fr 1fr; gap:40px 48px}}
@media(max-width:620px){.foot-top{grid-template-columns:1fr; gap:32px}}
.foot-brand .name{font-family:var(--serif); font-weight:700; font-size:23px; letter-spacing:-.01em; line-height:1}
.foot-brand p{font-size:14.5px; color:var(--muted); margin-top:14px; max-width:32ch; line-height:1.5}
/* nav-Wrapper löst sich auf → seine zwei Listen werden direkte Raster-Spalten von .foot-top */
.foot-links{display:contents}
.foot-nav{list-style:none}
/* Menü-Links: gleicher Rhythmus wie der Kontakt-Block (Größe/Zeilenhöhe/Abstand) → die Zeilen
   beider Spalten fluchten; Links nur über Farbe (ink statt muted) abgesetzt, nicht über Gewicht. */
.foot-nav li:not(.foot-nav__label){margin-bottom:8px; line-height:1.5}
.foot-nav li:last-child{margin-bottom:0}
.foot-nav a, .foot-nav .linklike{color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:400;
  display:block; line-height:1.5; transition:color .16s}
.foot-nav a:hover, .foot-nav .linklike:hover{color:var(--olive-text)}

/* Spalten-Eyebrows (Kontakt · Menü · Newsletter): identischer Stil wie die Sektion-Eyebrows
   → die Spalten bekommen eine fluchtende Kopfzeile, optisch auf einer Linie mit dem Marken-Namen. */
.foot-nav__label, .nl__label{display:block; font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--olive-text); margin:3px 0 16px; line-height:1}

/* Newsletter im Footer */
.foot-news{justify-self:end; width:100%; max-width:340px}
.nl{max-width:340px}
.nl__hint{font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 14px; max-width:34ch}
.nl__row{display:flex; gap:8px}
.nl__input{flex:1; min-width:0; padding:11px 13px; border:1px solid var(--line-strong); border-radius:9px;
  background:#fff; color:var(--ink); font:inherit; font-size:14px; transition:border-color .16s}
.nl__input:focus-visible{outline:none; border-color:var(--olive-text);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--olive) 26%, transparent)}
.nl__input::placeholder{color:#a8a499}
.nl__btn{padding:11px 18px; border:0; border-radius:9px; background:var(--ink); color:#fff; font:inherit;
  font-weight:700; font-size:14px; cursor:pointer; transition:background .16s; white-space:nowrap}
.nl__btn:hover{background:#322f29}
.nl__btn:disabled{opacity:.55; cursor:default}
.nl__hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.nl__status{font-size:12.5px; margin-top:10px; min-height:1.1em}
.nl__status.ok{color:var(--olive-text)}
.nl__status.err{color:#b23b3b}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; gap:16px 28px; flex-wrap:wrap;
  margin-top:56px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--muted)}
.foot-bottom a{color:var(--muted); text-decoration:none; display:inline-block; padding:6px 0; transition:color .16s}
.foot-bottom a:hover{color:var(--ink)}
.foot-credit a{color:var(--ink); font-weight:700; text-decoration:none}
.foot-credit a:hover{color:var(--olive-text)}
.foot-legal{display:flex; gap:24px}
/* Kontakt-Block: gedämpfte Adresse (liest sich als Info), klar abgesetzt von den Menü-Links. */
/* Kontakt-Spalte einheitlich dunkel: Straße + PLZ in derselben ink-Farbe wie Telefon/E-Mail
   (nicht mehr halb hell/halb dunkel). */
.foot-contact li:not(.foot-nav__label){font-size:14.5px; line-height:1.5; color:var(--ink); margin-bottom:8px}
.foot-contact li:last-child{margin-bottom:0}
.foot-contact a{color:var(--ink)}
.foot-contact a:hover{color:var(--olive-text)}
/* Tablet: Newsletter linksbündig, sobald 2-spaltig. */
@media(max-width:980px){.foot-news{justify-self:start}}
@media(max-width:760px){
  /* Menü = antippbare Seiten-Links: etwas fetter + Tap-Polster. */
  .foot-nav li:not(.foot-nav__label){margin-bottom:2px}
  .foot-nav a, .foot-nav .linklike{padding:7px 0; line-height:1.25; font-weight:600}
  .foot-contact li:not(.foot-nav__label){margin-bottom:2px; padding:4px 0}
  .foot-legal{gap:18px}
}
/* Mobil kompakter: weniger Luft im gesamten Footer (Maik 16.06.). */
@media(max-width:600px){
  .site-footer{padding:44px 0 24px}
  .foot-bottom{justify-content:flex-start; flex-direction:column; align-items:flex-start; gap:4px;
    margin-top:28px; padding-top:18px}
  .foot-legal{order:-1; gap:18px}
  .foot-legal a, .foot-credit a, .foot-bottom a{padding:5px 0}
  .foot-nav__label, .nl__label{margin-bottom:11px}
}

/* ── Angebots-Popup ───────────────────────────────────────── */
.offer{position:fixed; right:24px; bottom:24px; z-index:90; width:min(360px,calc(100vw - 32px));
  background:var(--card); border:1px solid var(--line-strong); border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(27,26,23,.18); overflow:hidden;
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1)}
.offer.show{opacity:1; transform:none; pointer-events:auto}
.offer__bar{background:var(--olive); color:var(--ink); padding:10px 16px; font-size:11.5px;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase; display:flex;
  justify-content:space-between; align-items:center}
.offer__body{padding:20px 22px 24px}
.offer__body h3{font-size:21px; margin-bottom:8px}
.offer__body p{font-size:14.5px; color:var(--muted); margin-bottom:18px}
.offer__body .btn{width:100%}
.offer__close{background:none; border:0; cursor:pointer; color:var(--ink); opacity:.7; padding:2px;
  line-height:0}
.offer__close:hover{opacity:1}
@media(max-width:600px){.offer{left:12px; right:12px; bottom:12px}}
/* Angebot: Flyer-Thumbnail + Text */
.offer__lead{display:flex; gap:14px; align-items:flex-start; margin-bottom:16px}
.offer__thumb{width:62px; height:86px; object-fit:cover; object-position:center top; border-radius:8px;
  border:1px solid var(--line); cursor:pointer; flex:none; transition:transform .18s}
.offer__thumb:hover{transform:scale(1.03)}
.offer__txt h3{font-size:18px; line-height:1.15; margin-bottom:5px}
.offer__txt p{font-size:13.5px; color:var(--muted); margin:0}

/* ── Angebots-Flyer-Lightbox ──────────────────────────────── */
.flyerbox{position:fixed; inset:0; z-index:110; display:flex; align-items:flex-start; justify-content:center;
  padding:30px; overflow:auto; background:rgba(20,19,16,.82); opacity:0; transition:opacity .25s ease}
.flyerbox.is-open{opacity:1}
.flyerbox[hidden]{display:none}
.flyerbox__inner{display:flex; gap:18px; align-items:flex-start; max-width:980px; width:100%; margin:auto}
.flyerbox__inner img{flex:1 1 0; min-width:0; width:100%; height:auto; border-radius:10px; box-shadow:0 24px 64px rgba(0,0,0,.45)}
/* Mobile: horizontales Wisch-Karussell mit Snap (Seite 2 lugt rechts rein → signalisiert Wischen) */
@media(max-width:760px){
  .flyerbox{padding:28px 0}
  .flyerbox__inner{max-width:100%; gap:14px; align-items:center; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding:0 16px 12px; scrollbar-width:none}
  .flyerbox__inner::-webkit-scrollbar{display:none}
  .flyerbox__inner img{flex:0 0 86%; scroll-snap-align:center}
}
.flyerbox__close{position:fixed; top:18px; right:18px; z-index:2; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.32); color:#fff; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(6px)}
.flyerbox__close:hover{background:rgba(255,255,255,.24)}

/* Footer-Link, der wie ein Link aussieht, aber ein Button ist (öffnet Modal) */
.linklike{background:none; border:0; padding:0; font:inherit; font-size:14.5px; color:var(--ink);
  cursor:pointer; text-align:left}
.linklike:hover{color:var(--olive-text)}

/* ── Buchungs-Modal (bleibt auf der Seite) ────────────────── */
body.modal-open{overflow:hidden}
.modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .25s ease}
.modal.show{opacity:1; pointer-events:auto}
.modal__backdrop{position:absolute; inset:0; background:rgba(20,19,16,.55); backdrop-filter:blur(4px)}
.modal__panel{position:relative; width:min(560px,100%); max-height:calc(100dvh - 48px); overflow:auto;
  background:var(--paper); border-radius:var(--r-lg); box-shadow:0 40px 100px rgba(0,0,0,.32);
  padding:38px 36px 30px; transform:translateY(14px) scale(.985); transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.modal.show .modal__panel{transform:none}
@media(max-width:560px){.modal__panel{padding:30px 22px 22px}}
.modal__close{position:absolute; top:16px; right:16px; background:var(--paper-2); border:1px solid var(--line);
  border-radius:10px; width:38px; height:38px; display:grid; place-items:center; cursor:pointer; color:var(--ink)}
.modal__close:hover{background:#e6e2d6}
.modal__head h2{font-family:var(--serif); font-size:clamp(24px,4vw,32px); margin:4px 0 8px}
.modal__sub{color:var(--muted); font-size:15.5px}
.book-frame{margin:24px 0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--card); min-height:240px}
.book-frame iframe{width:100%; height:560px; border:0; display:block}
.book-placeholder{padding:34px 26px; text-align:center}
.book-placeholder p{font-size:15.5px; color:var(--ink); max-width:380px; margin:0 auto}
.book-placeholder p.muted{color:var(--muted); font-size:13.5px; margin-top:12px}
.modal__foot{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:18px; border-top:1px solid var(--line)}
.modal__foot span{font-size:14.5px; color:var(--muted)}

/* ── Reveal on scroll (sanft) ─────────────────────────────── */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
html.no-js .reveal{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}