/* Schriften liegen auf unserem Server, nicht bei Google.
   Der fruehere @import auf fonts.googleapis.com uebertrug bei jedem
   Seitenaufruf die IP des Besuchers an Google — dafuer gibt es in
   Deutschland Abmahnungen (LG Muenchen I, 2022). Lokal eingebunden
   entfaellt die Uebertragung ganz, es braucht also auch keine
   Einwilligung. Beide Familien stehen unter der SIL Open Font License,
   Selbsthosting ist ausdruecklich erlaubt.
   Nur latin + latin-ext; kyrillisch und vietnamesisch wurden weggelassen. */
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/cormorantgaramond-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/cormorantgaramond-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/cormorantgaramond-500-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/cormorantgaramond-500-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/cormorantgaramond-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/cormorantgaramond-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/cormorantgaramond-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/cormorantgaramond-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/fonts/cormorantgaramond-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/fonts/cormorantgaramond-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(./assets/fonts/jost-300-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(./assets/fonts/jost-300-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/jost-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/jost-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/jost-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/jost-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --cream:#F7F2E8;--cream-deep:#EFE7D7;--ink:#2A2118;--ink-soft:#5C5044;
  /* Seitenflaeche getrennt von --cream: --cream bleibt die helle SCHRIFT auf
     dunklem Grund (Buttons, Nav, mbar), --surface ist der Untergrund der Seite. */
  --surface:#F1F0EC;
  /* zurueckgesetzte Flaechen (Platzhalter, Panels, Kartenhintergrund) — gleicher
     Farbton wie --surface, nur tiefer. Sonst steht Creme als beiger Fleck auf Grau. */
  --surface-2:#E7E5E0;
  --nav-bg:rgba(241,240,236,.85);
  --gold:#A8874E;--gold-light:#C9AE7A;--rule:rgba(168,135,78,.35);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;--rail:240px;

  /* Skalen-Namen für den Hero. Bewusst auf die vorhandene Palette gemappt statt
     neue Farben zu erfinden — dieselben Werte, nur unter den Namen, die das
     Hero-Markup benutzt. */
  --ink-1000:#0F0F0E; --ink-900:#2A2118;
  --gold-500:#A8874E; --gold-400:#C9AE7A;
  --cream-50:#F7F2E8; --cream-300:#E8E1D5;
  /* Schutzverlauf für die Schrift. Links deckend, nach rechts auslaufend —
     Text steht nie auf blankem Video. */
  /* Zwei Verläufe statt eines: einer schützt die untere linke Ecke, wo der Text
     steht, der andere legt nur einen Hauch über den Rest. So bleibt das Video
     sichtbar, statt dass ein Filter über dem ganzen Bild liegt. */
  /* Neutrales Schwarz, kein Braun. Mit dem Ton der Marke (26,21,15) legte sich
     ein warmer Schleier über das ganze Bild — das Video sah wie gefiltert aus,
     statt einfach dunkler. Schwarz nimmt Helligkeit weg und lässt die Farben
     des Videos in Ruhe. */
  --scrim-left:
     linear-gradient(105deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.84) 30%,
                             rgba(0,0,0,.60) 52%, rgba(0,0,0,.18) 72%,
                             rgba(0,0,0,0) 86%),
     linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,.26) 26%,
                             rgba(0,0,0,0) 52%),
     linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 9%,
                                rgba(0,0,0,0) 18%);
  --font-display:var(--serif); --font-sans:var(--sans);
  --weight-display:300; --weight-body:300; --weight-strong:500;
  --lh-display:1.04; --lh-body:1.6;
  --size-md:17px; --size-xs:11px;
  --track-display:.01em; --track-label:.22em; --track-eyebrow:.34em;
  /* Ein Wert für den Abstand zwischen den Abschnitten der Startseite. Vorher
     standen dort 0, 100 und 120 nebeneinander, und auf dem Telefon wurde nichts
     kleiner — 120px sind auf einem 812px hohen Schirm sehr viel Luft. */
  --s-section:clamp(72px,9vw,120px);
}

/* ---- Hero ---- */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;
      overflow:hidden;background:var(--ink-1000)}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Mobil/Hochformat: 16:9-Video wird stark beschnitten - Steak nach links holen */
@media (max-width:900px){.hero__video{object-position:79% 50%}}
.hero__scrim{position:absolute;inset:0;background:var(--scrim-left);pointer-events:none}
/* Mobil/Hochformat: gleiche Verlaufsrichtung wie am Desktop, aber 20% durch-
   sichtiger (alle Alphawerte x0.8) — das Video soll hochkant mehr durchkommen. */
@media (max-width:900px){
  .hero__scrim{background:
    linear-gradient(105deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.67) 30%,
                            rgba(0,0,0,.48) 52%, rgba(0,0,0,.14) 72%,
                            rgba(0,0,0,0) 86%),
    linear-gradient(to top, rgba(0,0,0,.56) 0%, rgba(0,0,0,.21) 26%,
                            rgba(0,0,0,0) 52%),
    linear-gradient(to bottom, rgba(0,0,0,.44) 0%, rgba(0,0,0,.18) 9%,
                               rgba(0,0,0,0) 18%)}
}
.hero__body{position:relative;width:100%;max-width:1240px;margin:0 auto;
  padding:0 clamp(24px,5vw,64px) clamp(72px,10vh,112px);
  display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero__eyebrow{font-family:var(--font-sans);font-size:var(--size-xs);font-weight:var(--weight-strong);
  letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--gold-400)}
.hero h1{font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:clamp(44px,7.4vw,76px);line-height:var(--lh-display);
  letter-spacing:var(--track-display);color:var(--cream-50);max-width:22ch;margin:0}
.hero__lede{font-family:var(--font-sans);font-weight:var(--weight-body);font-size:var(--size-md);
  line-height:var(--lh-body);color:var(--cream-300);max-width:46ch;margin:0}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.hero__btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 32px;
  border-radius:2px;font-family:var(--font-sans);font-size:var(--size-xs);font-weight:var(--weight-strong);
  text-transform:uppercase;letter-spacing:var(--track-label);
  transition:color .24s cubic-bezier(.2,.7,.3,1),background .24s cubic-bezier(.2,.7,.3,1),border-color .24s cubic-bezier(.2,.7,.3,1)}
.hero__btn:active{transform:scale(.985)}
.hero__btn--primary{background:var(--gold-500);color:var(--ink-900);border:1px solid var(--gold-500)}
.hero__btn--primary:hover{background:var(--gold-400);border-color:var(--gold-400);color:var(--ink-900)}
.hero__btn--ghost{background:transparent;border:1px solid rgba(232,225,213,.28);color:var(--cream-50)}
.hero__btn--ghost:hover{border-color:rgba(168,135,78,.55);background:rgba(168,135,78,.12);color:var(--cream-50)}
.hero :focus-visible{outline:3px solid rgba(208,181,127,.55);outline-offset:2px}
.hero__hours{position:absolute;right:clamp(24px,5vw,64px);bottom:clamp(24px,4vh,40px);
  font-family:var(--font-sans);font-size:var(--size-xs);font-weight:var(--weight-strong);
  text-transform:uppercase;letter-spacing:var(--track-label);color:var(--cream-300)}
*{box-sizing:border-box;margin:0;padding:0}
/* the runtime injects a #dc-root/.sc-host{height:100%} rule of its own after
   this stylesheet loads, capping the page at one viewport; .nav's sticky
   containing block ends there too, so it stops sticking past the first
   screen. !important is needed only to out-rank that later same-specificity
   injected rule, not to beat anything else. */
#dc-root,#dc-root>.sc-host{height:auto!important;min-height:100%!important}
/* dc-import wraps SiteNav in its own host div sized to the nav's own height;
   that box is an even tighter sticky-containing-block than the one above, so
   .nav still can't stick past it. Unwrap it so .nav sticks to the real page. */
.sc-host[data-sc-name="SiteNav"]{display:contents}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{background:var(--surface);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--gold)}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:.04em;line-height:1}
h1{font-size:clamp(56px,9vw,124px);letter-spacing:.06em;line-height:.95}
h2{font-size:clamp(38px,5vw,56px)}
p{max-width:62ch;text-wrap:pretty}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:20px;top:-60px;background:var(--ink);color:var(--cream);padding:10px 16px;z-index:100;font-size:14px}
.skip:focus{top:12px}
.container{max-width:1140px;margin:0 auto;padding:0 40px}
@media (max-width:900px){.container{padding:0 20px}}
.tlink{border-bottom:1px solid var(--gold);padding-bottom:2px;font-size:15px;letter-spacing:.02em;transition:color .2s}
.tlink:hover{color:var(--gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 26px;border:1px solid var(--gold);color:var(--ink);font-size:14px;letter-spacing:.04em;transition:background .25s,color .25s;background:none;font-weight:400}
.btn:hover{background:var(--gold);color:#fff}
.btn--solid{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn--solid:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--cream)}
.btn--gold:hover{background:var(--surface);color:var(--ink);border-color:var(--surface)}
/* deaktiviert: eigene Farben statt opacity. Mit opacity:.45 sanken Flaeche und
   Schrift gemeinsam ab, der Text stand bei 1.59:1 und das Wort verschwand.
   Umriss statt Flaeche unterscheidet den Zustand klar vom aktiven Gold-Button. */
.btn:disabled,.btn:disabled:hover{opacity:1;background:transparent;
  border-color:var(--rule);color:var(--ink-soft);cursor:not-allowed}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 40px;background:var(--nav-bg);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--rule)}
/* dark nav: transparent at the very top so it reads as part of the hero, solid
   once you scroll. The faint gradient keeps logo/links legible over the video
   without drawing a bar edge. */
.nav--dark{color:var(--cream);position:fixed;left:0;right:0;background:transparent;backdrop-filter:none;transition:background .35s ease,backdrop-filter .35s ease,border-color .3s}
/* Fast schwarz statt Braun: der Scrim über dem Video ist neutral schwarz, ein
   brauner Balken davor las sich wie ein zweites, fremdes Element. Ohne goldene
   Haarlinie — auf Schwarz zieht sie einen Rahmen, statt zu trennen. */
.nav--dark.scrolled{background:rgba(6,6,6,.95);backdrop-filter:blur(12px);border-bottom-color:transparent}
/* Gleiches Gold wie der Hauptknopf im Hero — zwei verschiedene Farben für
   dieselbe Handlung auf einem Bildschirm lesen sich wie zwei Angebote. */
.nav--dark .btn--solid{background:var(--gold-500);color:var(--ink-900);border-color:var(--gold-500)}
.nav--dark .btn--solid:hover{background:var(--gold-400);border-color:var(--gold-400);color:var(--ink-900)}
.nav__logo img{height:52px;width:auto}
.nav__links{display:flex;gap:34px;font-size:18px;letter-spacing:.02em}
.nav__links a{position:relative;padding:4px 0}
.nav__links a.active::after,.nav__links a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold)}
.nav__links a:hover{color:inherit}
.nav__right{display:flex;align-items:center;gap:22px}
.lang{display:flex;gap:2px;font-size:13px}
.lang button{padding:4px 8px;opacity:.5}
.lang button.on{opacity:1;border-bottom:1px solid var(--gold)}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;align-items:center;margin-right:-10px}
.burger span{display:block;width:22px;height:1px;background:currentColor}
.nav__sheet{position:fixed;inset:0;z-index:70;background:var(--surface);color:var(--ink);display:flex;flex-direction:column;padding:24px 20px}
.nav__sheet nav{display:flex;flex-direction:column;gap:6px;margin-top:40px}
.nav__sheet nav a{font-family:var(--serif);font-size:38px;letter-spacing:.04em;padding:10px 0;border-bottom:1px solid var(--rule)}
@media (max-width:900px){.nav{padding:12px 20px}.nav__links{display:none}.nav .btn{display:none}.burger{display:flex}
  /* Logo am Telefon eine Stufe kleiner als am Desktop (52px) — dort steht es
     neben Sprachwahl und Burger, 52px draengen die Leiste zu voll. */
  .nav__logo img{height:44px}}

/* photo placeholder */
.ph{background:var(--surface-2);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;color:var(--gold);font-size:15px;text-align:center;padding:10px}
.ph--dark{background:#2A2118;color:var(--gold-light)}
.sketch{mix-blend-mode:multiply;opacity:.85;will-change:transform;pointer-events:none}
.sketch--dark{mix-blend-mode:screen;filter:invert(1);opacity:.15}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-soft)}
.field input,.field select,.field textarea{font:inherit;font-family:var(--sans);font-weight:300;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);padding:10px 0;border-radius:0;transition:border-color .2s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.field textarea{min-height:110px;resize:vertical}
.field .err{color:#9B3B2E;font-size:13px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-bottom-color:#9B3B2E}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-soft);cursor:pointer}
.check input{margin-top:5px;accent-color:var(--gold);width:16px;height:16px;flex:none}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;margin:0 6px 8px 0;border:1px solid var(--rule);border-radius:999px;font-size:13px;color:var(--ink-soft);transition:all .2s}
.chip:hover{border-color:var(--gold)}
.chip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* reservation widget */
.rw{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:32px 0}
.rw__steps{display:flex;gap:28px;font-size:14px;color:var(--ink-soft);margin-bottom:28px;flex-wrap:wrap}
.rw__steps span{padding-bottom:4px}
.rw__steps .cur{color:var(--ink);border-bottom:1px solid var(--gold)}
.rw__steps .done{color:var(--gold)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:14px;max-width:360px}
.cal__hd{display:flex;justify-content:space-between;align-items:center;max-width:360px;margin-bottom:12px;font-family:var(--serif);font-size:20px}
.cal__hd button{width:36px;height:36px;font-size:22px;line-height:1}
.cal .dow{font-size:11px;letter-spacing:.06em;color:var(--ink-soft);text-align:center;padding:6px 0}
.cal button{height:40px;text-align:center;border:1px solid transparent;transition:all .15s}
.cal button:hover:not(:disabled){border-color:var(--gold)}
.cal button:disabled{color:rgba(42,33,24,.25);cursor:default;text-decoration:line-through}
.cal button.on{background:var(--ink);color:var(--cream)}
.slots{display:flex;flex-wrap:wrap;gap:6px}
/* kompakte Reservierung: drei Pillen, jeweils nur ein Panel offen */
.rwc__bar{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.rwc__pill{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;
  padding:10px 20px;min-height:60px;min-width:158px;border:1px solid var(--rule);background:none;text-align:left;
  transition:border-color .2s,background .2s}
.rwc__pill:hover{border-color:var(--gold)}
.rwc__pill.on{border-color:var(--gold);background:rgba(168,135,78,.07)}
.rwc__lbl{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.rwc__val{font-family:var(--serif);font-size:20px;line-height:1.15;color:var(--ink)}
.rwc__pill--empty .rwc__val{color:var(--ink-soft)}
.rwc__go{margin-left:auto;min-height:60px}
@keyframes rwcIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.rwc__panel{margin-top:16px;padding:20px;border:1px solid var(--rule);background:var(--surface-2);animation:rwcIn .18s ease-out}
.rwc__hint{font-size:13px;color:var(--ink-soft);margin-top:12px}
/* Variante "line": nur Haarlinien, keine Kaesten — Hausregel (kein Card/Shadow) */
.rwc--line .rwc__bar{gap:0;align-items:flex-end;border-bottom:1px solid var(--rule);padding-bottom:14px}
.rwc--line .rwc__pill{border:0;background:none;min-height:0;min-width:0;padding:0 24px;
  border-left:1px solid var(--rule);align-items:flex-start}
.rwc--line .rwc__pill:first-child{padding-left:0;border-left:0}
.rwc--line .rwc__pill:hover{border-color:transparent}
.rwc--line .rwc__pill:first-child:hover{border-left-color:transparent}
.rwc--line .rwc__lbl{font-size:10px;letter-spacing:.2em;margin-bottom:6px}
.rwc--line .rwc__val{border-bottom:1px solid var(--gold);padding-bottom:2px;width:fit-content;
  transition:border-color .2s,color .2s}
.rwc--line .rwc__pill--empty .rwc__val{color:var(--ink-soft);border-bottom-color:var(--rule)}
.rwc--line .rwc__pill:hover .rwc__val,
.rwc--line .rwc__pill.on .rwc__val{color:var(--gold);border-bottom-color:var(--gold)}
.rwc--line .rwc__go{margin-left:auto;min-height:0;align-self:center}
.rwc--line .rwc__panel{background:none;border:0;border-bottom:1px solid var(--rule);padding:20px 0}
@media (max-width:700px){
  .rwc--line .rwc__bar{flex-direction:column;align-items:stretch;gap:0;padding-bottom:0;border-bottom:0}
  .rwc--line .rwc__pill{border-left:0;padding:12px 0;min-height:44px;
    border-bottom:1px solid var(--rule)}
  .rwc--line .rwc__go{margin-left:0;width:100%;margin-top:18px}
}
.slots--scroll{max-height:184px;overflow-y:auto;padding-right:4px}
@media (max-width:700px){
  .rwc__pill{flex:1 1 100%}
  .rwc__go{margin-left:0;width:100%}
}
.slots button{padding:8px 12px;border:1px solid var(--rule);font-size:14px;transition:all .15s}
.slots button:hover{border-color:var(--gold)}
.slots button.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.stepper{display:flex;align-items:center;gap:18px;font-family:var(--serif);font-size:28px}
.stepper button{width:40px;height:40px;border:1px solid var(--rule);font-size:22px;line-height:1;font-family:var(--sans)}
.stepper button:hover{border-color:var(--gold)}

/* hairline facts */
.facts{border-top:1px solid var(--rule)}
.facts div{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px}
.facts div span:last-child{color:var(--ink-soft);text-align:right}

/* menu page (from prototype) */
.wrap{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:60px;max-width:1140px;margin:40px auto 0;padding:0 40px 100px}
.rail{position:sticky;top:84px;align-self:start;height:calc(100vh - 100px);display:flex;flex-direction:column}
.rail__list{display:flex;flex-direction:column;gap:2px;font-size:15px}
.rail__list a{padding:7px 0 7px 16px;position:relative;color:var(--ink-soft);transition:color .2s,padding-left .2s}
.rail__list a::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--gold);transition:width .25s;transform:translateY(-50%)}
.rail__list a.active{color:var(--ink);padding-left:26px;font-weight:400}
.rail__list a.active::before{width:16px}
.rail__list a:hover{color:var(--ink)}
.rail__venue{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);padding:18px 0 6px;white-space:nowrap}
.rail__venue:first-child{padding-top:0}
.venue-head{padding-top:60px;border-top:2px solid var(--gold)}
.venue-head:first-child{padding-top:0;border-top:0}
.venue-head h2{margin-bottom:0}
.item__num{color:var(--gold);font-family:var(--sans);font-weight:400;font-size:.6em;letter-spacing:.02em;margin-right:8px;vertical-align:middle}
.filters{margin-top:34px;padding-top:24px;border-top:1px solid var(--rule)}
.filters__title{font-family:var(--serif);font-style:italic;font-size:19px;margin-bottom:12px}
.rail .btn{margin-top:auto}
.mhero{position:relative;overflow:hidden;padding:40px 40px 20px;text-align:center}
.mhero__chariot{width:min(900px,100%);margin:0 auto;mix-blend-mode:multiply;opacity:.9;will-change:transform}
.mhero__gold{position:absolute;right:6%;top:0;width:200px;mix-blend-mode:multiply;opacity:.8;pointer-events:none}
.mhero h1{margin-top:10px}
.mhero__sub{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,28px);color:var(--ink-soft);margin-top:14px;margin-left:auto;margin-right:auto}
.tages{display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;margin:36px auto 0;padding:14px 28px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:15px}
.tages b{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.02em}
.tages .price{color:var(--gold);font-weight:400}
@media (max-width:700px){.mhero{padding:24px 20px 10px}.mhero__gold{width:120px;right:-10px}}
@media (max-width:900px){
  .wrap{display:block;padding:0 20px 120px;margin-top:20px}
  .rail{position:static;height:auto;display:contents}
  .rail__list{position:sticky;top:64px;z-index:40;flex-direction:row;gap:0;overflow-x:auto;background:var(--surface);margin:0 -20px;padding:10px 20px;border-bottom:1px solid var(--rule);scrollbar-width:none}
  .rail__list::-webkit-scrollbar{display:none}
  .rail__list a{white-space:nowrap;padding:8px 14px!important;border:1px solid transparent;border-radius:999px}
  .rail__list a::before{display:none}
  .rail__list a.active{border-color:var(--gold);color:var(--ink)}
  .filters{margin-top:20px;padding-top:18px;border-top:0}
  .rail .btn{display:none}
}
.section{position:relative;padding:20px 0 60px;scroll-margin-top:110px}
.section+.section{border-top:1px solid var(--rule)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;min-height:96px}
.section__head h2 small{display:block;font-style:italic;font-size:.44em;letter-spacing:.02em;color:var(--ink-soft);margin-top:6px}
.section__note{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink-soft);margin-top:18px}
.items{display:flex;flex-direction:column}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;padding:16px 0;border-bottom:1px solid rgba(42,33,24,.08);transition:opacity .25s}
.item:last-child{border-bottom:0}
.item.hidden{display:none}
.item__name{font-family:var(--serif);font-weight:500;font-size:23px;letter-spacing:.01em;line-height:1.15;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.item__name .sub{font-weight:400;font-style:italic;font-size:17px;color:var(--ink-soft)}
.item__desc{color:var(--ink-soft);font-size:15px;margin-top:4px;max-width:58ch}
.item__price{font-family:var(--serif);font-weight:500;font-size:21px;white-space:nowrap;color:var(--ink);padding-top:2px}
.item.sig .item__price{color:var(--gold)}
.tag{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.06em;color:var(--gold);border:1px solid var(--rule);padding:2px 7px;border-radius:999px;vertical-align:middle}
.tag--spicy{color:#9B3B2E;border-color:rgba(155,59,46,.35)}
.tag--veg{color:#5B7A4A;border-color:rgba(91,122,74,.35)}
.item--photo{grid-template-columns:120px minmax(0,1fr) auto;padding:20px 0}
.item__img{width:120px;height:120px;border-radius:2px;background:var(--cream-deep);position:relative;overflow:hidden;display:block;object-fit:cover}
.item__img::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:13px;color:var(--gold);text-align:center;padding:10px}
@media (max-width:600px){.item--photo{grid-template-columns:minmax(0,1fr) auto}.item__img{grid-column:1/-1;width:100%;height:180px;margin-bottom:10px}.item__name{font-size:21px}}
.empty{display:none;font-family:var(--serif);font-style:italic;color:var(--ink-soft);font-size:19px;padding:10px 0 20px}
.section.is-empty .empty{display:block}
.mfoot{border-top:1px solid var(--rule);padding:46px 40px 60px;display:flex;flex-wrap:wrap;gap:24px 60px;align-items:center;justify-content:space-between;max-width:1140px;margin:0 auto}
.mfoot p{font-size:14px;color:var(--ink-soft);max-width:52ch}
.mfoot .actions{display:flex;gap:14px;flex-wrap:wrap}
.mfoot__legal{width:100%;font-size:12px;color:var(--ink-soft);opacity:.7;margin-top:10px}
@media (max-width:900px){.mfoot{padding:36px 20px 40px}}

/* footer + mobile bar */
/* ---- Einwilligungsdialog + Karten-Platzhalter ---- */
/* Mittig statt am Rand: die Wahl soll bewusst getroffen werden, nicht
   nebenbei weggeklickt. Ablehnen sieht genauso aus wie Zustimmen — in
   Deutschland muss die Ablehnung genauso leicht erreichbar sein. */
.cdlg{position:fixed;inset:0;z-index:90;background:rgba(42,33,24,.6);
  display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.cdlg[hidden]{display:none}
html.cdlg-open,html.cdlg-open body{overflow:hidden}
/* Unten kein Innenabstand: den traegt die Knopfleiste selbst, damit sie
   buendig kleben kann (siehe .cdlg__act). */
.cdlg__box{background:var(--surface);border:1px solid var(--rule);color:var(--ink);
  width:min(640px,100%);max-height:calc(100vh - 48px);overflow-y:auto;padding:40px 40px 0}
.cdlg__box:focus{outline:none}
.cdlg__h{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,34px);
  line-height:1.15;margin-bottom:14px;color:var(--ink)}
.cdlg__lede{font-size:14px;line-height:1.7;color:var(--ink-soft);max-width:62ch}
.cdlg__grp{border-top:1px solid var(--rule);padding-top:18px;margin-top:22px}
.cdlg__row{display:flex;align-items:center;gap:20px;min-height:44px}
.cdlg__name{font-family:var(--serif);font-size:22px;line-height:1.2;flex:1 1 auto}
.cdlg__state{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap}
.cdlg__b{font-size:13.5px;line-height:1.65;color:var(--ink-soft);margin-top:8px;max-width:62ch}
.cdlg__more{font-size:13.5px;line-height:1.65;color:var(--ink-soft);margin-top:26px}
.cdlg__more a{color:var(--ink);border-bottom:1px solid var(--gold)}
/* Die Knopfleiste klebt am unteren Rand des scrollenden Kastens. Auf dem
   Handy stand sie sonst unter vier Absaetzen Text: man musste erst kurbeln,
   bevor man ueberhaupt etwas entscheiden konnte. Jetzt sind alle drei Knoepfe
   von der ersten Sekunde an sichtbar, der Text scrollt dahinter durch. */
.cdlg__act{position:sticky;bottom:0;z-index:1;display:flex;gap:12px;flex-wrap:wrap;
  margin-top:26px;padding:16px 0 24px;background:var(--surface);
  border-top:1px solid var(--rule)}
.cdlg__btn{font-family:var(--sans);font-size:13px;letter-spacing:.06em;
  padding:13px 20px;border:1px solid var(--ink);background:none;color:var(--ink);
  min-height:44px;flex:1 1 auto;transition:background .2s,color .2s}
.cdlg__btn:hover{background:var(--ink);color:var(--surface)}
/* Schalter. Rund, weil ein Schalter rund gelesen wird — der Kasten drumherum
   bleibt eckig wie der Rest des Hauses. */
.cdlg__sw{position:relative;width:52px;height:30px;flex:0 0 auto;padding:0;
  border:1px solid var(--ink-soft);border-radius:15px;background:none;cursor:pointer;
  transition:background .2s,border-color .2s}
/* unsichtbare Vergroesserung der Trefferflaeche auf 48px fuer den Daumen */
.cdlg__sw::before{content:"";position:absolute;inset:-9px -4px}
.cdlg__sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;
  border-radius:50%;background:var(--ink-soft);transition:transform .2s,background .2s}
/* Goldfuellung allein kaeme auf 2,95:1 gegen den Grund — knapp unter den
   3:1, die eine Bedienelement-Kontur braucht. Die Haarlinie in Tinte traegt
   den Kontrast und ist ohnehin die Sprache des Hauses. */
.cdlg__sw[aria-checked="true"]{background:var(--gold);border-color:var(--ink)}
.cdlg__sw[aria-checked="true"]::after{transform:translateX(22px);background:var(--surface)}
.cdlg__sw[disabled]{cursor:not-allowed;background:var(--gold-light);border-color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){
  .cdlg__sw,.cdlg__sw::after,.cdlg__btn{transition:none}
}
@media (max-width:700px){
  .cdlg{padding:0;align-items:flex-end}
  .cdlg__box{padding:22px 20px 0;max-height:88vh;width:100%}
  .cdlg__h{font-size:26px}
  .cdlg__lede{font-size:13.5px}
  /* Gestapelt, alle drei gleich breit und gleich schwer — Ablehnen darf nicht
     kleiner oder blasser sein als Zustimmen. */
  .cdlg__btn{flex:1 1 100%;padding:12px 16px}
  .cdlg__act{gap:8px;padding:14px 0 18px}
}
/* Platzhalter statt Karte, solange keine Zustimmung vorliegt */
.cph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--surface-2);border:1px solid var(--rule);cursor:pointer;text-align:center;padding:16px}
.cph:hover{border-color:var(--gold)}
/* .cph setzt display:flex und schlaegt damit das [hidden] des Browsers —
   ohne diese Zeile bleibt der Platzhalter ueber der geladenen Karte stehen. */
.cph[hidden]{display:none}
.grev__map.cph{display:flex}
.cph__btn{font-family:var(--sans);font-size:13px;letter-spacing:.08em;color:var(--ink);
  border-bottom:1px solid var(--gold);padding-bottom:2px}
.cph__note{font-size:11px;color:var(--ink-soft);max-width:36ch;line-height:1.5}
.foot__map.cph{height:300px}
@media (max-width:900px){.foot__map.cph{height:200px}}

/* ---- Google-Bewertungen, direkt ueber dem Footer ---- */
/* Zahlen sind Stand der Abfrage vom 10.09.2026 (4,5 aus 507) und werden von
   Hand gepflegt — es laeuft bewusst keine Places-API, also auch kein Google-
   Skript und kein Bild von Google im Browser. */
.grev{border-bottom:1px solid var(--rule)}
.grev__in{max-width:1140px;margin:0 auto;padding:64px 40px;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.grev__src{font-family:var(--sans);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft)}
.grev__rate{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:12px}
.grev__score{font-family:var(--serif);font-size:46px;line-height:1;color:var(--ink)}
.grev__stars{display:inline-flex;gap:3px;align-self:center}
.grev__stars svg{width:17px;height:17px;display:block;fill:var(--gold)}
.grev__stars .grev__half path{stroke:var(--gold);stroke-width:1.1;stroke-linejoin:round}
.grev__count{font-size:14px;color:var(--ink-soft)}
.grev__quote{font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.55;
  color:var(--ink);max-width:34ch;margin-top:24px}
.grev__by{font-size:13px;color:var(--ink-soft);margin-top:10px}
.grev__link{margin-top:22px}
.grev__media{display:flex;flex-direction:column;gap:10px}
.grev__map{width:100%;height:190px;border:0;display:block;background:var(--surface-2)}
.grev__map[hidden]{display:none}
/* minmax(0,...) statt 1fr: ein blosses 1fr ist minmax(auto,1fr), und die
   min-content-Hoehe der Bilder (aus ihrem Seitenverhaeltnis) sprengt dann die
   Zeilen — die Bilder liefen ueber den Kasten in den Footer hinein. */
.grev__shots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:10px;height:220px}
.grev__shots img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
.grev__shots img:first-child{grid-row:1/3}
@media (max-width:900px){
  .grev__in{grid-template-columns:1fr;gap:28px;padding:44px 20px}
  .grev__map{height:160px}
  .grev__shots{height:190px}
  .grev__quote{font-size:20px;max-width:none}
}
.foot{border-top:1px solid var(--rule);margin-top:120px}
.foot__grid{max-width:1140px;margin:0 auto;padding:60px 40px 40px;display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:40px;font-size:14px;color:var(--ink-soft)}
.foot__grid h3{font-family:var(--sans);font-weight:400;font-size:14px;color:var(--ink);letter-spacing:.02em;margin-bottom:12px}
.foot__grid a:hover{color:var(--gold)}
.foot__map{grid-column:1/-1;height:300px;background:var(--surface-2);border:0;width:100%;filter:sepia(.4) saturate(.6) brightness(1.02)}
.foot__legal{max-width:1140px;margin:0 auto;padding:18px 40px 40px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:12px;color:var(--ink-soft);border-top:1px solid var(--rule)}
.foot__legal div{display:flex;gap:18px}
@media (max-width:900px){.foot{margin-top:80px;padding-bottom:60px}.foot__grid{grid-template-columns:1fr 1fr;padding:40px 20px 30px;gap:28px}.foot__legal{padding:18px 20px 30px}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;grid-template-columns:1fr 1fr;background:var(--ink);color:var(--cream);
  transform:translateY(100%);visibility:hidden;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),visibility .32s}
html.mbar-on .mbar{transform:translateY(0);visibility:visible}
.mbar a{padding:16px;text-align:center;font-size:14px;letter-spacing:.04em;min-height:52px}
.mbar a:hover{color:var(--cream)}
.mbar a.gold{background:var(--gold)}
@media (max-width:900px){.mbar{display:grid}}

/* print (menu) */
@media print{
  .nav,.rail,.mbar,.mfoot .actions,.foot,.nav__sheet{display:none!important}
  .wrap{display:block;padding:0}
  body{background:#fff}
  .section{break-inside:avoid;padding:10px 0 20px}
  .mhero__chariot{width:60%}
}