/* =========================================================
   SUNSET RESTAURANT & BAR – STYLESHEET
   ========================================================= */

:root{
  /* Sunset palette */
  --gold:        #ffd36e;
  --amber:       #ffb347;
  --orange:      #ff8a3d;
  --sunset:      #ff5e3a;
  --coral:       #ff3d68;
  --plum:        #c23a6b;
  --night:       #1b1030;
  --night-2:     #180b27;
  --night-3:     #1d123e;
  --cream:       #fff8ef;
  --cream-dim:   #f3e6d8;

  --gradient-sunset: linear-gradient(120deg, var(--gold) 0%, var(--amber) 22%, var(--orange) 45%, var(--sunset) 68%, var(--coral) 100%);
  --gradient-glow: radial-gradient(circle at 50% 30%, rgba(255,179,71,.55), rgba(255,61,104,.15) 45%, transparent 70%);

  --glass-bg: rgba(255,255,255,.06);
  --glass-bg-light: rgba(255,255,255,.55);
  --glass-border: rgba(255,255,255,.18);
  --shadow-soft: 0 10px 40px rgba(20,8,30,.35);

  --radius: 18px;
  --radius-sm: 12px;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Poppins", "Segoe UI", sans-serif;
  --font-script: "Great Vibes", cursive;
  --font-wide: "Montserrat", "Segoe UI", sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:var(--gold) transparent;
}
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--gradient-sunset);
  border-radius:10px;
}

body{
  position:relative;
  font-family: var(--font-body);
  background: linear-gradient(180deg,
    var(--night) 0%,
    var(--night-2) 22%,
    var(--night-3) 42%,
    var(--night-2) 62%,
    var(--night-3) 80%,
    var(--night) 100%);
  color: var(--cream);
  overflow-x:hidden;
  line-height:1.6;
}

img{ max-width:100%; display:block; }

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

ul{ list-style:none; }

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------------------------------------------------------
   Page-wide background photo (shown once, full width, never
   duplicated). height is a fixed vh multiple so it always
   covers all of Home (>100vh) and bleeds a bit into the next
   section; background-position is biased toward the BOTTOM
   of the photo because the top ~45% of this particular image
   is plain sky — bottom-aligned cover keeps the hills/sun/deer
   (the recognisable part) on screen instead of just sky.
--------------------------------------------------------- */
.page-bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:130vh;
  z-index:0;
  pointer-events:none;
  background-image:url("../image/background.jpg");
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
  /* Fades the photo itself to transparent between 100vh (end of
     Home) and 130vh, revealing the body's own colour gradient
     underneath — never a hardcoded overlay colour, so it can
     never mismatch/seam against it, whatever the page length. */
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 100vh, transparent 130vh);
  mask-image:linear-gradient(to bottom, #000 0, #000 100vh, transparent 130vh);
}
/* Winterzeit (1. Dez. – 28. Feb., per JS anhand des Systemdatums
   erkannt): ersetzt das Hintergrundfoto durch die Winter-Variante. */
body.winter-bg .page-bg{
  background-image:url("../image/winter.jpg");
}
body.winter-bg .hero-snow-clip{
  display:block;
}
/* Evening-blue sky gradient across the very top of the photo */
.page-bg::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:45vh;
  background:linear-gradient(to bottom,
    rgba(26,74,148,.95) 0%,
    rgba(58,98,168,.8) 25%,
    rgba(104,118,184,.5) 55%,
    rgba(130,125,190,0) 100%);
  pointer-events:none;
}

/* ---------------------------------------------------------
   Utility / typography
--------------------------------------------------------- */
.eyebrow{
  display:inline-block;
  font-size:.8rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  background:var(--gradient-sunset);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:10px;
}
.eyebrow.center{ display:block; text-align:center; }

.section-title{
  position:relative;
  font-family:var(--font-display);
  font-size:clamp(2rem, 4vw, 2.8rem);
  font-weight:700;
  color:var(--cream);
  margin-bottom:28px;
}
.section-title.center{ text-align:center; }


.section-lead{
  color:var(--cream-dim);
  max-width:620px;
  margin:0 auto 40px;
  text-align:center;
}

.script-accent{
  font-family:var(--font-script);
  font-size:1.15em;
  font-weight:400;
  background:var(--gradient-sunset);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------------------------------------------------------
   Glassmorphism card + glossy animated border
--------------------------------------------------------- */
.glass-card{
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow-soft);
  padding:28px;
  isolation:isolate;
}

.glass-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--angle,0deg), transparent 0 60%, var(--gold), var(--coral), transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin-border 5s linear infinite;
  opacity:.55;
  pointer-events:none;
  z-index:1;
}

@keyframes spin-border{
  to{ --angle:360deg; }
}

@property --angle{
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Speisekarte: no spinning border, just a thin static sunset-gradient sheen */
.menu-section .glass-card::before{
  padding:1px;
  background:var(--gradient-sunset);
  animation:none;
  opacity:.6;
}

/* Datenschutz / Impressum modals: these modals scroll internally (.modal has
   overflow-y:auto), so the absolutely-positioned gradient ::before would
   scroll along with the text instead of staying on the frame. Use a real
   border instead, which always stays fixed to the box edge. */
#datenschutz-modal .glass-card::before,
#impressum-modal .glass-card::before{
  display:none;
}
#datenschutz-modal .modal,
#impressum-modal .modal{
  border:1px solid var(--gold);
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 30px;
  border-radius:50px;
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
  border:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.98); }

.btn-glow{
  background:var(--gradient-sunset);
  color:var(--night);
  position:relative;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(255,94,58,.45), 0 0 0 1px rgba(255,255,255,.15) inset;
}
.btn-glow::after{
  content:"";
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent);
  transform:skewX(-20deg);
  animation:shine 3.2s ease-in-out infinite;
}
@keyframes shine{
  0%{ left:-60%; }
  40%{ left:120%; }
  100%{ left:120%; }
}
.btn-glow:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(255,94,58,.6), 0 0 0 1px rgba(255,255,255,.25) inset;
}

.btn-outline{
  background:transparent;
  color:var(--cream);
  border:1.5px solid rgba(255,255,255,.4);
}
.btn-outline:hover{
  border-color:var(--gold);
  color:var(--gold);
  transform:translateY(-2px);
}

.btn-ghost{
  background:transparent;
  color:var(--cream-dim);
  padding:14px 20px;
}
.btn-ghost:hover{ color:var(--gold); }

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

/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  padding:18px 0;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.scrolled{
  padding:10px 0;
  background:rgba(27,16,48,.65);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.header-inner{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* No brand/title element in the header any more — the nav itself
   is centred on the page. */
.header-right{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:32px;
}
.main-nav ul{
  display:flex;
  gap:28px;
}
.nav-link{
  position:relative;
  font-weight:200;
  font-size:20px;
  color:var(--cream);
  padding:6px 0;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:1.5px;
  background:var(--gradient-sunset);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 25%, #000 75%, transparent);
  transition:width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--gold); }

.nav-cta{ padding:9px 18px; font-size:.8rem; }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  z-index:1100;
}
.nav-toggle span{
  width:26px; height:2px;
  background:var(--cream);
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
/* In der Weihnachtszeit oben verankert, damit Baum + Windspiel Platz
   haben ohne die Nav zu überlappen (siehe .hero-content weiter unten). */
body.christmas-time .hero{ align-items:flex-start; }

/* Schneefall: sichtbar von der Seitenspitze bis zur Höhe des Logos,
   über allen Texten/Komponenten dieses Bereichs (auch über der Nav,
   die fixed mit z-index:1000 sitzt). Die Höhe von .hero-snow-clip
   wird per JS an die Logo-Position angepasst; .initial-snow bleibt
   intern 100vh hoch, damit die Fallgeschwindigkeit/-strecke der
   Flocken unverändert bleibt und nur das Sichtfenster kleiner ist. */
.hero-snow-clip{
  display:none; /* nur in Winterzeiten sichtbar, siehe body.winter-bg */
  position:absolute;
  top:0; left:0;
  width:100%;
  height:0;
  overflow:hidden;
  z-index:1002;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 65%, transparent 100%);
}
.hero-snow-clip::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:40%;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 70%, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 70%, #000 100%);
}
.initial-snow{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  overflow:hidden;
}
.initial-snow > *{
  font-size:50px;
  color:#fff;
  position:absolute;
  top:-5vh;
}
@keyframes snowfall{
  0%{ transform:translate3d(var(--left-ini), 0, 0); }
  100%{ transform:translate3d(var(--left-end), 110vh, 0); }
}
.snow:nth-child(2n){ filter:blur(1px); font-size:40px; }
.snow:nth-child(6n){ filter:blur(2px); font-size:30px; }
.snow:nth-child(10n){ filter:blur(5px); font-size:30px; }
.snow:nth-child(1){ --left-ini:0vw; --left-end:-1vw; left:70vw; animation:snowfall 9s linear infinite; animation-delay:-1s; }
.snow:nth-child(2){ --left-ini:-7vw; --left-end:10vw; left:65vw; animation:snowfall 15s linear infinite; animation-delay:-8s; }
.snow:nth-child(3){ --left-ini:6vw; --left-end:6vw; left:1vw; animation:snowfall 9s linear infinite; animation-delay:-7s; }
.snow:nth-child(4){ --left-ini:-3vw; --left-end:9vw; left:88vw; animation:snowfall 14s linear infinite; animation-delay:-5s; }
.snow:nth-child(5){ --left-ini:-2vw; --left-end:-9vw; left:74vw; animation:snowfall 6s linear infinite; animation-delay:-4s; }
.snow:nth-child(6){ --left-ini:5vw; --left-end:1vw; left:35vw; animation:snowfall 6s linear infinite; animation-delay:-7s; }
.snow:nth-child(7){ --left-ini:-2vw; --left-end:-1vw; left:27vw; animation:snowfall 10s linear infinite; animation-delay:-8s; }
.snow:nth-child(8){ --left-ini:-9vw; --left-end:-2vw; left:69vw; animation:snowfall 8s linear infinite; animation-delay:-8s; }
.snow:nth-child(9){ --left-ini:-1vw; --left-end:-5vw; left:84vw; animation:snowfall 11s linear infinite; animation-delay:-6s; }
.snow:nth-child(10){ --left-ini:7vw; --left-end:-9vw; left:82vw; animation:snowfall 10s linear infinite; animation-delay:-3s; }
.snow:nth-child(11){ --left-ini:-2vw; --left-end:-1vw; left:48vw; animation:snowfall 10s linear infinite; animation-delay:-1s; }
.snow:nth-child(12){ --left-ini:5vw; --left-end:6vw; left:39vw; animation:snowfall 15s linear infinite; animation-delay:-8s; }
.snow:nth-child(13){ --left-ini:6vw; --left-end:5vw; left:3vw; animation:snowfall 9s linear infinite; animation-delay:-8s; }
.snow:nth-child(14){ --left-ini:-5vw; --left-end:-2vw; left:49vw; animation:snowfall 11s linear infinite; animation-delay:-8s; }
.snow:nth-child(15){ --left-ini:10vw; --left-end:4vw; left:77vw; animation:snowfall 7s linear infinite; animation-delay:-4s; }
.snow:nth-child(16){ --left-ini:-3vw; --left-end:1vw; left:86vw; animation:snowfall 14s linear infinite; animation-delay:-8s; }
.snow:nth-child(17){ --left-ini:6vw; --left-end:-7vw; left:18vw; animation:snowfall 9s linear infinite; animation-delay:-6s; }
.snow:nth-child(18){ --left-ini:-9vw; --left-end:4vw; left:64vw; animation:snowfall 13s linear infinite; animation-delay:-7s; }
.snow:nth-child(19){ --left-ini:2vw; --left-end:-7vw; left:52vw; animation:snowfall 15s linear infinite; animation-delay:-9s; }
.snow:nth-child(20){ --left-ini:0vw; --left-end:8vw; left:5vw; animation:snowfall 8s linear infinite; animation-delay:-9s; }
.snow:nth-child(21){ --left-ini:-9vw; --left-end:-2vw; left:10vw; animation:snowfall 12s linear infinite; animation-delay:-3s; }
.snow:nth-child(22){ --left-ini:-3vw; --left-end:-8vw; left:54vw; animation:snowfall 11s linear infinite; animation-delay:-9s; }
.snow:nth-child(23){ --left-ini:-7vw; --left-end:-8vw; left:20vw; animation:snowfall 6s linear infinite; animation-delay:-3s; }
.snow:nth-child(24){ --left-ini:10vw; --left-end:-4vw; left:68vw; animation:snowfall 10s linear infinite; animation-delay:-8s; }
.snow:nth-child(25){ --left-ini:3vw; --left-end:5vw; left:90vw; animation:snowfall 7s linear infinite; animation-delay:-9s; }
.snow:nth-child(26){ --left-ini:-7vw; --left-end:5vw; left:71vw; animation:snowfall 13s linear infinite; animation-delay:-2s; }
.snow:nth-child(27){ --left-ini:9vw; --left-end:4vw; left:2vw; animation:snowfall 15s linear infinite; animation-delay:-5s; }
.snow:nth-child(28){ --left-ini:-5vw; --left-end:3vw; left:23vw; animation:snowfall 12s linear infinite; animation-delay:-1s; }
.snow:nth-child(29){ --left-ini:-2vw; --left-end:-1vw; left:39vw; animation:snowfall 14s linear infinite; animation-delay:-9s; }
.snow:nth-child(30){ --left-ini:-9vw; --left-end:-5vw; left:76vw; animation:snowfall 10s linear infinite; animation-delay:-5s; }
.snow:nth-child(31){ --left-ini:-5vw; --left-end:3vw; left:14vw; animation:snowfall 8s linear infinite; animation-delay:-5s; }
.snow:nth-child(32){ --left-ini:5vw; --left-end:-1vw; left:86vw; animation:snowfall 10s linear infinite; animation-delay:-9s; }
.snow:nth-child(33){ --left-ini:-3vw; --left-end:10vw; left:66vw; animation:snowfall 6s linear infinite; animation-delay:-6s; }
.snow:nth-child(34){ --left-ini:-3vw; --left-end:6vw; left:75vw; animation:snowfall 14s linear infinite; animation-delay:-9s; }
.snow:nth-child(35){ --left-ini:-6vw; --left-end:7vw; left:22vw; animation:snowfall 7s linear infinite; animation-delay:-5s; }
.snow:nth-child(36){ --left-ini:3vw; --left-end:4vw; left:10vw; animation:snowfall 11s linear infinite; animation-delay:-10s; }
.snow:nth-child(37){ --left-ini:2vw; --left-end:10vw; left:95vw; animation:snowfall 13s linear infinite; animation-delay:-6s; }
.snow:nth-child(38){ --left-ini:5vw; --left-end:8vw; left:34vw; animation:snowfall 9s linear infinite; animation-delay:-10s; }
.snow:nth-child(39){ --left-ini:4vw; --left-end:0vw; left:80vw; animation:snowfall 11s linear infinite; animation-delay:-2s; }
.snow:nth-child(40){ --left-ini:1vw; --left-end:-7vw; left:45vw; animation:snowfall 11s linear infinite; animation-delay:-4s; }
.snow:nth-child(41){ --left-ini:9vw; --left-end:10vw; left:82vw; animation:snowfall 8s linear infinite; animation-delay:-2s; }
.snow:nth-child(42){ --left-ini:9vw; --left-end:-9vw; left:22vw; animation:snowfall 10s linear infinite; animation-delay:-6s; }
.snow:nth-child(43){ --left-ini:5vw; --left-end:8vw; left:66vw; animation:snowfall 11s linear infinite; animation-delay:-1s; }
.snow:nth-child(44){ --left-ini:-5vw; --left-end:-2vw; left:75vw; animation:snowfall 12s linear infinite; animation-delay:-4s; }
.snow:nth-child(45){ --left-ini:0vw; --left-end:3vw; left:2vw; animation:snowfall 7s linear infinite; animation-delay:-5s; }
.snow:nth-child(46){ --left-ini:8vw; --left-end:-3vw; left:94vw; animation:snowfall 8s linear infinite; animation-delay:-9s; }
.snow:nth-child(47){ --left-ini:-6vw; --left-end:-9vw; left:95vw; animation:snowfall 11s linear infinite; animation-delay:-4s; }
.snow:nth-child(48){ --left-ini:-5vw; --left-end:6vw; left:34vw; animation:snowfall 10s linear infinite; animation-delay:-6s; }
.snow:nth-child(49){ --left-ini:4vw; --left-end:8vw; left:22vw; animation:snowfall 12s linear infinite; animation-delay:-10s; }
.snow:nth-child(50){ --left-ini:-4vw; --left-end:4vw; left:100vw; animation:snowfall 14s linear infinite; animation-delay:-9s; }

/* Windspiel: hängt oben links von der Webseite, hinter dem
   Schneefall und dem Weihnachtsbaum (jeweils höherer z-index).
   Nur in der Weihnachtszeit sichtbar, siehe body.christmas-time. */
.chimes-anim{
  display:none;
  position:absolute;
  top:0;
  left:-20px;
  width:560px;
  height:560px;
  z-index:1;
  pointer-events:none;
}
.chimes-anim svg{ width:100%; height:100%; display:block; }
body.christmas-time .chimes-anim{ display:block; }
@media (max-width:700px){
  .chimes-anim{ width:280px; height:280px; left:-60px; }
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
/* No darkening/tint over the photo itself — the image stays
   exactly as-is. Text legibility comes from text-shadow on the
   hero copy instead (see .hero-content below). */
.hero-glow{
  position:absolute;
  inset:0;
  background:var(--gradient-glow);
  mix-blend-mode:screen;
  opacity:.7;
  animation:pulse-glow 8s ease-in-out infinite;
}
@keyframes pulse-glow{
  0%,100%{ opacity:.5; }
  50%{ opacity:.85; }
}

.hero-content .eyebrow{
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.8));
}
.eyebrow-hero{
  margin-top:76px; /* ~2cm down from the top of the hero content */
  margin-bottom:0;
  background:none;
  -webkit-text-fill-color:var(--gold);
  color:var(--gold);
  font-size:1rem;
}
/* Wachsender Weihnachtsbaum: sitzt direkt über "Willkommen in Bayern".
   Nur in der Weihnachtszeit sichtbar, siehe body.christmas-time. */
.hero-tree-anim{
  display:none;
  width:clamp(400px,56vw,680px);
  aspect-ratio:4/3;
  margin:0 auto;
  pointer-events:none;
}
body.christmas-time .hero-tree-anim{ display:block; }
body.christmas-time .hero-tree-anim + .eyebrow-hero{ margin-top:20px; }
.hero-tree-anim .mainSVG{
  visibility:hidden;
  display:block;
  width:100%;
  height:100%;
}
.hero-tree-anim .particle{ pointer-events:none; }
.hero-tree-message{
  font-family:var(--font-script);
  font-size:64px;
  fill:url(#sunsetTextGrad);
  text-anchor:middle;
  paint-order:stroke;
  stroke:rgba(10,5,18,.5);
  stroke-width:5px;
  stroke-linejoin:round;
}
@media (max-width:700px){
  .hero-tree-anim{ width:clamp(300px,92vw,440px); }
  body.christmas-time .hero-tree-anim + .eyebrow-hero{ margin-top:10px; }
}

.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:800px;
  padding:0 24px;
}
body.christmas-time .hero-content{ margin-top:2cm; } /* Abstand von der Seitenspitze bis zum Weihnachtsbaum */
@media (max-width:700px){
  body.christmas-time .hero-content{ margin-top:10px; }
}

/* Logo stands directly on the photo — no card/background behind it. */
.hero-title-card{
  width:fit-content;
  margin:16px auto 24px;
}
body.christmas-time .hero-title-card{ margin-top:2cm; }

.hero-title-logo{
  height:clamp(120px, 16vw, 190px);
  width:auto;
  margin:0 auto;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.55));
}

.hero-title-sub{
  display:block;
  margin-top:14px;
  font-family:var(--font-wide);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.7em;
  text-transform:uppercase;
  color:var(--cream-dim);
}

.hero-sub{
  font-size:1.1rem;
  color:var(--cream-dim);
  max-width:560px;
  margin:0 auto 34px;
  text-shadow:0 2px 18px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.7);
}

.hero-actions{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}
.hero-actions .btn-outline{
  background:rgba(20,10,30,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.scroll-cue{
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  width:26px; height:42px;
  border:2px solid rgba(255,255,255,.5);
  border-radius:20px;
  z-index:2;
}
.scroll-cue span{
  position:absolute;
  top:8px; left:50%;
  width:5px; height:5px;
  background:var(--gold);
  border-radius:50%;
  transform:translateX(-50%);
  animation:scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot{
  0%{ opacity:1; top:8px; }
  70%{ opacity:0; top:24px; }
  100%{ opacity:0; top:8px; }
}

/* Fade-up entrance for hero */
.fade-up{
  opacity:0;
  transform:translateY(28px);
  animation:fadeUp .9s ease forwards;
}
.fade-up.delay-1{ animation-delay:.15s; }
.fade-up.delay-2{ animation-delay:.3s; }
.fade-up.delay-3{ animation-delay:.45s; }
@keyframes fadeUp{
  to{ opacity:1; transform:translateY(0); }
}

/* Scroll reveal (JS toggles .in-view) */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* ---------------------------------------------------------
   Section divider (sunset horizon accent)
--------------------------------------------------------- */
.section-divider{
  height:1.5px;
  background:var(--gradient-sunset);
  background-size:200% 100%;
  animation:slide-gradient 6s linear infinite;
  box-shadow:0 0 16px rgba(255,138,61,.45);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
  opacity:.8;
}
@keyframes slide-gradient{
  0%{ background-position:0% 0; }
  100%{ background-position:200% 0; }
}

/* ---------------------------------------------------------
   Menu section
--------------------------------------------------------- */
.menu-section{
  padding:110px 0 100px;
  position:relative;
}

.menu-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-bottom:48px;
}
.menu-tab{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  color:var(--cream-dim);
  padding:10px 22px;
  border-radius:50px;
  font-family:var(--font-body);
  font-size:.9rem;
  font-weight:500;
  cursor:pointer;
  transition:all .3s ease;
}
.menu-tab:hover{ color:var(--gold); border-color:var(--gold); }
.menu-tab.active{
  background:var(--gradient-sunset);
  color:var(--night);
  border-color:transparent;
  box-shadow:0 6px 20px rgba(255,94,58,.35);
}
@media (max-width:700px){
  .menu-tabs{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
  }
  .menu-tab{
    width:100%;
    min-height:52px;
    padding:8px 6px;
    font-size:.8rem;
    line-height:1.2;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
}

.menu-panel{ display:none; }
.menu-panel.active{ display:block; }

.allergen-info-row{
  display:flex;
  justify-content:center;
  margin-bottom:40px;
}
.allergen-info-btn{
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:700;
  color:var(--gold);
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-border);
  border-radius:50px;
  padding:14px 32px;
  cursor:pointer;
  transition:all .3s ease;
}
.allergen-info-btn:hover{
  color:var(--night);
  background:var(--gradient-sunset);
  border-color:transparent;
  box-shadow:0 6px 20px rgba(255,94,58,.35);
}

/* Augustiner-Feature: Standardansicht der Speisekarte, bevor ein
   Tab angeklickt wird. Logo mit unscharfem Glow-Hintergrund, das
   Bier-Foto liegt 10px überlappend links darüber (Schatten/3D),
   beide wechseln sich alle 8s per Fade+Blur ab, darunter wechselt
   der Text per Fade+Blur zwischen zwei Zeilen. Beim Klick auf einen
   Menu-Tab blendet das Ganze per .is-fading aus, .is-hidden nimmt es
   danach aus dem Layout (siehe script.js). */
.augustiner-feature{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:0 auto 60px;
  padding:20px 24px 0;
  transition:opacity .5s ease, filter .5s ease;
}
.augustiner-feature.is-fading{
  opacity:0;
  filter:blur(14px);
  pointer-events:none;
}
.augustiner-feature.is-hidden{
  display:none;
}
/* Wie die Galerie-Karussell-Slides: alle drei Bilder liegen exakt
   hintereinander in derselben Fläche und wechseln sich alle 8s ab
   (aktiv = groß/scharf/mittig, prev/next = klein/blass/seitlich
   versetzt, siehe .gallery-slide für die identischen Werte). */
.augustiner-logos{
  position:relative;
  width:100%;
  max-width:520px;
  height:430px;
  z-index:1;
}
.augustiner-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transform:translateX(0) scale(.8);
  filter:blur(10px);
  transition:opacity .6s ease, transform .6s ease, filter .6s ease;
  z-index:1;
}
.augustiner-slide.prev{ opacity:.4; transform:translateX(-6%) scale(.86); filter:blur(6px); z-index:2; }
.augustiner-slide.next{ opacity:.4; transform:translateX(6%) scale(.86); filter:blur(6px); z-index:2; }
.augustiner-slide.active{ opacity:1; transform:translateX(0) scale(1); filter:blur(0); z-index:3; }
.augustiner-img-wrap{
  position:relative;
  display:flex;
}
.augustiner-bier-img{
  position:relative;
  z-index:2;
  height:430px;
  width:auto;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));
  transform:rotate(-3deg);
}
.augustiner-logo-img{
  position:relative;
  z-index:1;
  height:430px;
  width:auto;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.augustiner-photo-img{
  position:relative;
  z-index:1;
  height:430px;
  width:auto;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.augustiner-caption{
  position:relative;
  z-index:1;
  margin-top:18px;
  min-height:1.6em;
  width:100%;
  max-width:480px;
  text-align:center;
}
.augustiner-text{
  position:absolute;
  top:0; left:0; right:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.2rem;
  background:var(--gradient-sunset);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.augustiner-text-1{ animation:augustiner-fade-1 10s ease-in-out infinite; }
.augustiner-text-2{ animation:augustiner-fade-2 10s ease-in-out infinite; }
@keyframes augustiner-fade-1{
  0%,35%{ opacity:1; filter:blur(0); }
  45%,100%{ opacity:0; filter:blur(8px); }
}
@keyframes augustiner-fade-2{
  0%,35%{ opacity:0; filter:blur(8px); }
  45%,90%{ opacity:1; filter:blur(0); }
  100%{ opacity:0; filter:blur(8px); }
}
@media (max-width:700px){
  .augustiner-logos{ height:200px; }
  .augustiner-bier-img, .augustiner-logo-img, .augustiner-photo-img{ height:200px; }
}

.allergen-legend{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.allergen-col h4{ margin:0 0 10px; font-size:1.05rem; }
.allergen-col ul{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.allergen-col li{
  font-size:1.05rem;
  color:var(--cream-dim);
  line-height:1.4;
}
.allergen-col li strong{
  color:var(--gold);
  margin-right:6px;
}
#allergen-modal h3{
  font-family:"Ubuntu", "Segoe UI", sans-serif;
}
#allergen-modal .modal::before{ display:none; }
.modal-overlay[id^="drink-modal-"] .modal::before{ display:none; }
@media (max-width:640px){
  .allergen-legend{ grid-template-columns:1fr; }
}

.menu-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  max-width:920px;
  margin:0 auto;
}

.menu-item{
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.menu-item:hover{
  transform:translateY(-6px);
  border-color:rgba(255,179,71,.5);
  box-shadow:0 16px 40px rgba(255,94,58,.25);
}
.menu-item-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  margin-bottom:8px;
}
.menu-item-head h3{
  font-family:var(--font-display);
  font-size:1.25rem;
  color:var(--cream);
}
.menu-item-head h3 sup{
  font-size:1.2rem;
  color:var(--cream-dim);
  font-weight:200;
  margin-left:2px;
}
.diet-tag{
  display:inline-block;
  margin-left:4px;
  padding:2px 9px;
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-radius:20px;
  border:1px solid var(--glass-border);
  color:var(--gold);
  vertical-align:middle;
}
.menu-panel-note{
  grid-column:1 / -1;
  text-align:center;
  font-size:.85rem;
  font-style:italic;
  color:var(--cream-dim);
  margin:-6px 0 6px;
}

#spezialitaeten > .menu-panel-note{
  margin-top:1cm;
}

.drink-categories{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  max-width:920px;
  margin:0 auto;
}
.drink-cat{
  min-width:0;
  aspect-ratio:1 / 1;
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  cursor:pointer;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.drink-cat:hover{
  transform:translateY(-6px);
  border-color:rgba(255,179,71,.5);
  box-shadow:0 16px 40px rgba(255,94,58,.25);
}
.drink-cat-icon{
  width:76px;
  height:76px;
  color:var(--gold);
}
.drink-cat-icon svg{ width:100%; height:100%; stroke-width:1.2; }
.icon-scale-82{ transform:scale(.82); transform-origin:center; }
.drink-cat-label{
  font-size:1.15rem;
  font-weight:400;
  color:var(--cream);
  overflow-wrap:break-word;
  max-width:100%;
}
@media (max-width:640px){
  .drink-categories{ grid-template-columns:repeat(2, 1fr); }
}

.specialty-card{
  display:flex;
  flex-direction:column;
}
.specialty-card-full{ grid-column:1 / -1; }
.specialty-title{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:700;
  background:var(--gradient-sunset);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:16px;
}
.specialty-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.specialty-item-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
}
.specialty-item-head h4{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:600;
  color:var(--cream);
}
.specialty-item-head h4 sup{
  font-size:1.2rem;
  color:var(--cream-dim);
  font-weight:200;
  margin-left:2px;
}
.specialty-item-head .price{
  font-weight:700;
  font-size:1.05rem;
  white-space:nowrap;
  background:var(--gradient-sunset);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.specialty-list li p{
  color:var(--cream-dim);
  font-size:1rem;
  margin-top:2px;
}
.specialty-subhead{
  color:var(--gold);
  font-weight:600;
  font-size:1rem;
  margin-top:2px;
}
.specialty-note{
  margin-top:18px;
  font-size:.85rem;
  color:var(--cream-dim);
  font-style:italic;
}
.specialty-note-small{
  display:block;
  font-size:.75rem;
  opacity:.7;
  margin-top:2px;
  font-style:normal;
}

.drink-menu-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:8px;
}
.modal-body .specialty-item-head h4{
  color:var(--cream);
  font-size:1.05rem;
  margin:0;
}
.drink-menu-list li p{
  color:var(--cream-dim);
  font-size:.9rem;
  margin-top:2px;
}
.drink-menu-note{
  margin-top:4px;
  margin-bottom:18px;
  font-size:.9rem;
  color:var(--coral);
}
.drink-menu-highlight{ color:var(--gold); }
.modal-body .drink-menu-quote{
  margin-top:24px;
  font-size:clamp(1.4rem, 2.4vw, 1.7rem);
}
.modal-body .drink-menu-quote-sub{
  margin-top:16px;
  font-size:clamp(1.1rem, 2vw, 1.3rem);
}
.modal-body .drink-menu-quote + .drink-menu-quote{
  margin-top:6px;
}

.modal-overlay[id^="drink-modal-"] h3{
  font-family:"Segoe UI", sans-serif;
  font-size:24px;
}

.modal-title-icon{
  display:inline-flex;
  width:24px;
  height:24px;
  color:var(--gold);
  vertical-align:middle;
  margin-right:10px;
}
.modal-title-icon svg{ width:100%; height:100%; }

.drink-menu-list, .drink-menu-note{
  font-family:"Segoe UI", sans-serif;
}
.drink-menu-list .specialty-item-head h4,
.drink-menu-list .price,
.drink-menu-list li p,
.drink-menu-note{
  font-family:"Segoe UI", sans-serif;
  font-size:20px;
}
.drink-menu-list .specialty-item-head h4 sup{
  font-family:"Segoe UI", sans-serif;
  font-size:18px;
}
.drink-menu-list + .drink-menu-list{
  margin-top:22px;
}
.drink-menu-list .drink-vol{
  font-family:"Segoe UI", sans-serif;
  font-size:16px;
  color:var(--cream-dim);
  white-space:nowrap;
}
.specialty-item-head:has(.drink-vol){
  display:grid;
  grid-template-columns:1fr 60px auto;
  align-items:baseline;
  gap:10px;
}
.specialty-item-head:has(.drink-vol) .drink-vol,
.specialty-item-head:has(.drink-vol) .price{
  text-align:right;
}

.menu-quote{
  text-align:center;
  font-family:var(--font-script);
  font-size:clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight:400;
  background:var(--gradient-sunset);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  max-width:640px;
  margin:32px auto 0;
  line-height:1.4;
}
.menu-item .price{
  font-weight:700;
  background:var(--gradient-sunset);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  white-space:nowrap;
}
.menu-item p{
  color:var(--cream-dim);
  font-size:.92rem;
}

.menu-note{
  text-align:center;
  margin-top:36px;
  font-size:.8rem;
  color:rgba(255,255,255,.45);
}

/* ---------------------------------------------------------
   Daily special carousel — 7 slides (Mo–So), dot navigation,
   defaults to today's weekday but the user can browse all of
   them. Smaller/more compact card than the old single version.
--------------------------------------------------------- */
.daily-special-carousel{
  position:relative;
  max-width:920px;
  margin:60px auto 0;
  padding:20px 26px;
  display:flex;
  flex-direction:column;
}

.ds-slides{
  position:relative;
  height:380px;
}

.ds-slide{
  display:none;
  height:100%;
  align-items:center;
  overflow:hidden;
  animation:ds-fade .4s ease;
}
.ds-slide.active{ display:grid; }
.ds-slide-burger.active{
  grid-template-columns:1.3fr 1fr;
  gap:24px;
  align-items:center;
}
.daily-special-text{ min-width:0; }
.daily-special-media{ min-width:0; }
@keyframes ds-fade{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

.ds-placeholder{
  grid-column:1 / -1;
  text-align:center;
  padding:24px 12px;
}
.ds-title{
  font-family:var(--font-display);
  font-size:clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight:700;
  background:var(--gradient-sunset);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:10px;
}
.ds-placeholder p{ color:var(--cream-dim); font-size:1.1rem; max-width:520px; margin:0 auto; }
.ds-rest .ds-title{ background:none; -webkit-text-fill-color:var(--cream); color:var(--cream); }
.ds-rest-lottie{
  width:130px;
  height:130px;
  margin:0 auto 8px;
}

.ds-eyebrow{ font-size:1.6rem; letter-spacing:.1em; margin-bottom:2px; }

.daily-special-title{
  font-family:var(--font-display);
  font-size:clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight:700;
  background:var(--gradient-sunset);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:10px;
}
.burger-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:8px;
}
.burger-item-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
}
.burger-item-head h4{
  font-family:var(--font-display);
  font-size:1.2rem;
  color:var(--cream);
}
.burger-item-head h4 sup{
  font-size:1.2rem;
  color:var(--cream-dim);
  font-weight:200;
  margin-left:2px;
}
.burger-item-head .price{
  font-weight:700;
  font-size:1.1rem;
  white-space:nowrap;
  background:var(--gradient-sunset);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.burger-list li p{
  color:var(--cream-dim);
  font-size:1.1rem;
  margin-top:2px;
}
.burger-footnote-wrap{
  overflow:hidden;
  width:100%;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.burger-footnote{
  display:inline-block;
  white-space:nowrap;
  font-size:1.15rem;
  color:var(--cream);
  font-style:italic;
  opacity:.95;
  animation:burger-ticker 22s linear infinite;
}
@keyframes burger-ticker{
  0%{ transform:translateX(100%); }
  100%{ transform:translateX(-100%); }
}
.daily-special-media{
  display:flex;
  align-items:center;
  justify-content:center;
}
.daily-special-media img{
  width:100%;
  max-width:220px;
  height:auto;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));
}

.ds-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:16px;
}
.ds-dot{
  width:46px;
  height:46px;
  padding:0;
  border-radius:12px;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,.06);
  color:var(--cream-dim);
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.ds-dot:hover{ border-color:var(--gold); color:var(--gold); }
.ds-dot.active{
  background:var(--gradient-sunset);
  border-color:transparent;
  color:var(--night);
  transform:scale(1.06);
}

/* ---------------------------------------------------------
   Specialties gallery — coverflow-style carousel below the
   daily-special card. Auto-advances every 6s, pauses on
   hover/click/touch, resumes after 10s of no interaction.
--------------------------------------------------------- */
.gallery-eyebrow{ margin-top:60px; margin-bottom:20px; }

.gallery-carousel{
  position:relative;
  max-width:920px;
  margin:0 auto;
  padding:20px 26px;
}
.gallery-track{
  position:relative;
  height:380px;
}
.gallery-slide{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:24px;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transform:translateX(0) scale(.8);
  filter:blur(10px);
  transition:opacity .6s ease, transform .6s ease, filter .6s ease;
  z-index:1;
}
.gallery-slide.prev{
  opacity:.4;
  pointer-events:auto;
  cursor:pointer;
  transform:translateX(-6%) scale(.86);
  filter:blur(6px);
  z-index:2;
}
.gallery-slide.next{
  opacity:.4;
  pointer-events:auto;
  cursor:pointer;
  transform:translateX(6%) scale(.86);
  filter:blur(6px);
  z-index:2;
}
.gallery-slide.active{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0) scale(1);
  filter:blur(0);
  z-index:3;
}
.gallery-text{ min-width:0; }
.gallery-media{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gallery-media img{
  width:100%;
  max-width:240px;
  height:auto;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));
}
/* Drink-Fotos: vertikales Rechteck mit dünner (2px) Sunset-Gradient-
   Kante und 3D-wirkendem Schlagschatten + innerem Bevel statt Freisteller. */
.gallery-media-drink{
  width:180px;
  aspect-ratio:2/3; /* exakte Fotogröße der neuen Getränke-Bilder, damit nichts beschnitten wird */
  flex-shrink:0;
}
.gallery-media-drink img{
  width:100%;
  max-width:none;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));
}
@media (max-width:900px){
  .gallery-media-drink{ width:150px; }
}
.gallery-title{
  font-family:var(--font-display);
  font-size:clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight:700;
  background:var(--gradient-sunset);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:10px;
}
.gallery-title sup{
  font-size:1.1rem;
  color:var(--cream-dim);
  font-weight:400;
  margin-left:2px;
}
.gallery-slide[data-index="0"] .gallery-title,
.gallery-slide[data-index="14"] .gallery-title{ font-weight:400; }
.gallery-ingredients{
  color:var(--cream-dim);
  font-size:1.1rem;
  margin-bottom:10px;
}
.gallery-price{
  font-weight:700;
  font-size:1.15rem;
  white-space:nowrap;
  background:var(--gradient-sunset);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.gallery-nav{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:20px;
}
.gallery-nav-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,.05);
  color:var(--gold);
  cursor:pointer;
  transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.gallery-nav-btn:hover{
  background:var(--gradient-sunset);
  color:var(--night);
  border-color:transparent;
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(255,94,58,.4);
}

@media (max-width:900px){
  .gallery-carousel{ padding:20px; }
  .gallery-track{ height:560px; }
  .gallery-slide{ grid-template-columns:1fr; }
  .gallery-media{ order:-1; }
  .gallery-media img{ max-width:170px; }
  .gallery-nav{ display:none; }
}

/* ---------------------------------------------------------
   About section
--------------------------------------------------------- */
.about-section{
  padding:110px 0;
  position:relative;
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}

.about-mobile-label{ display:none; }

.about-media{
  position:relative;
}
.about-media-frame{
  position:relative;
  isolation:isolate;
  aspect-ratio:4/5;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:1px solid var(--glass-border);
}
.about-slide-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  opacity:0;
  filter:blur(20px);
  transition:opacity 1.2s ease, filter 1.2s ease, transform .6s ease;
}
.about-slide-img.active{
  opacity:1;
  filter:blur(0);
  z-index:1;
}
.about-media:hover .about-slide-img.active{ transform:scale(1.05); }
.about-media-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, transparent 60%, rgba(27,16,48,.75) 100%);
}
.about-dark-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:rgba(10,5,18,.75);
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
}
.about-tap-hint{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  margin:0;
  padding:10px 20px;
  border-radius:50px;
  background:none;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:none;
  color:rgba(255,255,255,.82);
  text-shadow:0 2px 10px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.9);
  font-weight:600;
  font-size:.95rem;
  white-space:nowrap;
  z-index:2;
  animation:tap-hint-pulse 1.8s ease-in-out infinite;
  transition:opacity .3s ease;
  display:none;
}

.about-cta-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:28px;
}
.about-call-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  flex-shrink:0;
  border-radius:100%;
  background:var(--gradient-sunset);
  color:var(--night);
  box-shadow:0 6px 20px rgba(255,94,58,.45);
  transition:transform .25s ease, box-shadow .25s ease;
}
.about-call-btn:hover{
  transform:scale(1.06);
  box-shadow:0 10px 28px rgba(255,94,58,.6);
}

@keyframes tap-hint-pulse{
  0%,100%{ transform:translate(-50%, -50%) scale(1); opacity:1; }
  50%{ transform:translate(-50%, -50%) scale(1.06); opacity:.75; }
}

.about-badge{
  position:absolute;
  z-index:2;
  bottom:-24px;
  right:-24px;
  background:var(--gradient-sunset);
  color:var(--night);
  border-radius:var(--radius-sm);
  padding:18px 22px;
  text-align:center;
  box-shadow:0 14px 34px rgba(255,94,58,.5);
  animation:float-badge 4s ease-in-out infinite;
}
.about-badge-num{
  display:block;
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:700;
  line-height:1;
}
.about-badge-text{
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
}
@keyframes float-badge{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

.about-text p{ color:var(--cream-dim); margin-bottom:16px; }
.about-text strong{ color:var(--gold); }
.about-text p.about-signature{
  font-family:var(--font-script);
  font-size:1.4rem;
  color:var(--gold);
  margin-top:-4px;
}

.about-features{
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.feature{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.feature-icon{
  font-size:1.6rem;
  flex-shrink:0;
  filter:drop-shadow(0 4px 10px rgba(255,138,61,.5));
}
.feature h4{ color:var(--cream); font-size:1rem; margin-bottom:2px; }
.feature p{ color:var(--cream-dim); font-size:.88rem; margin-bottom:0; }

/* ---------------------------------------------------------
   Contact section
--------------------------------------------------------- */
.contact-section{
  padding:110px 0 90px;
  position:relative;
}

.contact-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:32px;
  margin-top:40px;
}

.social-proof-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:32px;
  margin:32px auto 0;
}
.google-reviews-summary{
  color:var(--cream-dim);
  font-size:.9rem;
  margin:0;
}
.google-reviews-summary .google-reviews-stars{ color:var(--gold); letter-spacing:2px; }
.google-reviews-slide{
  width:100%;
  min-height:48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
}
.google-reviews-loading, .google-reviews-error{
  color:var(--cream-dim);
  font-size:.95rem;
  margin:0;
}
.google-review-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  opacity:0;
  animation:google-review-fade-in .5s ease forwards;
}
@keyframes google-review-fade-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
.google-review-item .google-reviews-stars{ color:var(--gold); font-size:.85rem; letter-spacing:1px; }
.google-review-author{
  color:var(--cream);
  font-weight:600;
  margin:0;
  font-size:.9rem;
}
.google-review-text{
  color:var(--cream-dim);
  font-size:.95rem;
  line-height:1.5;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.google-review-time{
  color:var(--cream-dim);
  opacity:.6;
  font-size:.75rem;
  margin:0;
}
.social-proof-card{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  cursor:pointer;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.social-proof-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,179,71,.5);
  box-shadow:0 16px 40px rgba(255,94,58,.25);
}
.social-proof-icon{ display:inline-flex; }
.social-proof-icon-instagram{ color:var(--gold); }
.social-proof-card h3{
  font-family:var(--font-display);
  font-size:1.3rem;
  color:var(--cream);
  margin:0;
}
.social-proof-card p{
  color:var(--cream-dim);
  font-size:.95rem;
  margin:0;
}

.social-proof-card-instagram{ position:relative; overflow:hidden; }
.social-proof-card-instagram::after{
  content:"";
  position:absolute;
  inset:0;
  background:url("../image/instagram-bg.jpg") center/cover no-repeat;
  opacity:.5;
  z-index:-1;
  border-radius:inherit;
}
.social-proof-card-instagram h3,
.social-proof-card-instagram p{
  color:var(--cream);
  text-shadow:0 1px 6px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.9);
}

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

.contact-info h3, .contact-form h3{
  font-family:var(--font-display);
  font-size:1.5rem;
  margin-bottom:20px;
  color:var(--cream);
}
.contact-info h4{
  margin:24px 0 12px;
  font-size:.95rem;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.contact-list li{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:var(--cream-dim);
  font-size:.95rem;
}
.contact-icon{
  font-size:1.1rem;
  display:inline-flex;
  flex-shrink:0;
  color:var(--gold);
}

.hours-list li{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px dashed rgba(255,255,255,.12);
  font-size:.9rem;
  color:var(--cream-dim);
}
.hours-note{
  margin-top:10px;
  font-size:.8rem;
  color:rgba(255,255,255,.45);
}

.social-row{
  display:flex;
  gap:12px;
  margin-top:24px;
}
.social-icon{
  width:42px; height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid var(--glass-border);
  font-weight:700;
  transition:all .3s ease;
}
.social-icon:hover{
  background:var(--gradient-sunset);
  color:var(--night);
  transform:translateY(-3px);
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.form-group{ margin-bottom:16px; }
.form-honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-group label{
  display:block;
  font-size:.82rem;
  color:var(--cream-dim);
  margin-bottom:6px;
}
.form-group input, .form-group textarea{
  width:100%;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:.92rem;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.form-group input:focus, .form-group textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,179,71,.2);
}
.form-group textarea{ resize:vertical; }

/* Custom number stepper (Personen): hide the native browser
   spin buttons, use our own transparent gold arrow buttons. */
.stepper{ position:relative; }
.stepper input[type="number"]{
  padding-right:38px;
  -moz-appearance:textfield;
}
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.stepper-btns{
  position:absolute;
  right:4px;
  top:32px;
  bottom:4px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;
}
.stepper-btn{
  width:26px;
  height:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  color:var(--gold);
  cursor:pointer;
  transition:color .2s ease, transform .15s ease;
}
.stepper-btn:hover{ color:var(--coral); }
.stepper-btn:active{ transform:scale(.85); }

.form-note{
  margin-top:10px;
  color:rgba(255,255,255,.65);
  font-size:1.05rem;
  text-align:center;
}
.form-success{
  margin-top:14px;
  color:var(--gold);
  font-size:.9rem;
  text-align:center;
}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.site-footer{
  padding:70px 0 0;
  border-top:1px solid rgba(255,255,255,.06);
  position:relative;
}
.footer-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2cm;
  padding-bottom:50px;
}
.footer-grid .footer-brand{ max-width:340px; }
.footer-grid .footer-col{ max-width:220px; }
.footer-brand p{ color:var(--cream-dim); font-size:.9rem; max-width:280px; }

.footer-map{
  position:relative;
  isolation:isolate;
  width:380px;
  max-width:100%;
  flex-shrink:0;
  aspect-ratio:16/10;
  border-radius:var(--radius-sm);
  overflow:hidden;
  filter:saturate(.85) brightness(.9);
}
.footer-map::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--angle,0deg), transparent 0 60%, var(--gold), var(--coral), transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin-border 5s linear infinite;
  opacity:.7;
  pointer-events:none;
  z-index:2;
}
.footer-map iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.footer-map-placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  padding:20px;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.footer-map-placeholder p{
  color:var(--cream-dim);
  font-size:.82rem;
  line-height:1.4;
  margin:0;
}

.footer-live{ display:flex; flex-direction:column; gap:12px; }
.fl-row{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--cream-dim);
  font-size:.9rem;
}
.fl-icon{
  display:inline-flex;
  flex-shrink:0;
  color:var(--gold);
}

.footer-holidays-label{
  margin-top:18px;
  margin-bottom:8px;
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--gold);
}
.footer-logos-row{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:20px;
}
.footer-club-logo{
  display:inline-flex;
  opacity:.85;
  transition:opacity .25s ease, transform .25s ease;
}
.footer-club-logo:hover{ opacity:1; transform:scale(1.05); }
.footer-club-logo img{ width:auto; height:56px; }
.footer-holidays{ display:flex; flex-direction:column; gap:6px; }
.footer-holidays li{
  font-size:.85rem;
  color:var(--cream-dim);
}
.footer-holidays li .fh-date{ color:var(--gold); }
.footer-holidays li .fh-name{ color:#fff; font-weight:400; }

.footer-col h4{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--gold);
  margin-bottom:16px;
}
.footer-col li{ margin-bottom:10px; font-size:.9rem; color:var(--cream-dim); }
.footer-col a:hover{ color:var(--gold); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:22px 0 26px;
  text-align:center;
  font-size:.8rem;
  color:rgba(255,255,255,.45);
}
.footer-bottom .credit{
  margin-top:6px;
  font-size:.75rem;
}
.footer-bottom .credit a{
  color:var(--gold);
  transition:color .2s ease;
}
.footer-bottom .credit a:hover{ color:var(--coral); }
.rauten-strip{
  height:8px;
  max-width:220px;
  margin:0 auto 18px;
  background:
    linear-gradient(45deg, #3f5ea8 25%, transparent 25%, transparent 75%, #3f5ea8 75%),
    linear-gradient(45deg, #3f5ea8 25%, #fff 25%, #fff 75%, #3f5ea8 75%);
  background-size:16px 16px;
  background-position:0 0, 8px 8px;
  opacity:.5;
  border-radius:4px;
}

/* ---------------------------------------------------------
   Cookie banner
--------------------------------------------------------- */
.cookie-banner{
  position:fixed;
  bottom:24px;
  left:24px;
  right:24px;
  max-width:900px;
  margin:0 auto;
  z-index:2000;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  padding:24px 28px;
  transform:translateY(140%);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.cookie-banner.show{ transform:translateY(0); }
.cookie-text h4{ margin-bottom:8px; font-size:1rem; }
.cookie-text p{ font-size:.85rem; color:var(--cream-dim); max-width:640px; }
.cookie-text a{ color:var(--gold); text-decoration:underline; }
.cookie-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.cookie-actions .btn{ padding:11px 20px; font-size:.85rem; }

/* ---------------------------------------------------------
   Modals
--------------------------------------------------------- */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,5,18,.7);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:3000;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.modal-overlay.show{ opacity:1; visibility:visible; }

.modal{
  max-width:480px;
  width:100%;
  max-height:82vh;
  overflow-y:auto;
  transform:translateY(20px) scale(.97);
  transition:transform .35s ease;
  background:var(--night-2);
}
.modal-overlay.show .modal{ transform:translateY(0) scale(1); }
.modal-large{ max-width:640px; }

.modal h3{
  font-family:var(--font-display);
  font-size:1.4rem;
  margin-bottom:8px;
  color:var(--gold);
}
.modal-lead{ color:var(--cream-dim); font-size:.9rem; margin-bottom:20px; }
.modal-close{
  position:absolute;
  top:16px; right:16px;
  background:rgba(255,255,255,.08);
  border:none;
  color:var(--cream);
  width:34px; height:34px;
  border-radius:50%;
  cursor:pointer;
  font-size:.9rem;
  transition:background .25s ease;
}
.modal-close:hover{ background:var(--gradient-sunset); color:var(--night); }

.modal-body h4{ color:var(--gold); font-size:.95rem; margin:18px 0 6px; }
.modal-body p{ color:var(--cream-dim); font-size:.88rem; margin-bottom:6px; }
.modal-note{ margin-top:18px; font-style:italic; opacity:.7; }

.cookie-option{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cookie-option h4{ font-size:.92rem; color:var(--cream); margin-bottom:4px; }
.cookie-option p{ font-size:.8rem; color:var(--cream-dim); }

.switch{
  position:relative;
  width:46px; height:26px;
  flex-shrink:0;
}
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.15);
  border-radius:20px;
  cursor:pointer;
  transition:background .3s ease;
}
.slider::before{
  content:"";
  position:absolute;
  width:20px; height:20px;
  left:3px; top:3px;
  background:var(--cream);
  border-radius:50%;
  transition:transform .3s ease;
}
.switch input:checked + .slider{ background:var(--gradient-sunset); }
.switch input:checked + .slider::before{ transform:translateX(20px); }
.switch input:disabled + .slider{ opacity:.6; cursor:not-allowed; }

/* Sunset/night consent switch (Uiverse.io by satyamchaudharydev,
   recoloured to the site palette): off = night sky with a moon,
   on = sunset gradient with a sun. */
.privacy-consent{
  display:flex;
  align-items:center;
  gap:12px;
  margin:4px 0 20px;
}
.consent-switch{
  position:relative;
  display:inline-block;
  --width-of-switch:3.5em;
  --height-of-switch:2em;
  --size-of-icon:1.35em;
  --slider-offset:0.3em;
  width:var(--width-of-switch);
  height:var(--height-of-switch);
  flex-shrink:0;
}
.consent-switch input{
  opacity:0;
  width:0;
  height:0;
}
.consent-slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background-color:var(--night);
  border:1px solid rgba(255,255,255,.15);
  border-radius:30px;
  transition:.4s;
}
.consent-slider::before{
  position:absolute;
  content:"";
  height:var(--size-of-icon);
  width:var(--size-of-icon);
  border-radius:50%;
  left:var(--slider-offset);
  top:50%;
  transform:translateY(-50%);
  background:var(--night-3);
  box-shadow:inset -3px -2px 5px -2px rgba(255,211,110,.6), inset -10px -4px 0 0 var(--night-2);
  transition:.4s;
}
.consent-switch input:checked + .consent-slider{ background-color:var(--cream-dim); }
.consent-switch input:checked + .consent-slider::before{
  left:calc(100% - (var(--size-of-icon) + var(--slider-offset)));
  background:linear-gradient(40deg, var(--coral), var(--gold) 70%);
  box-shadow:none;
}
.consent-switch input:focus-visible + .consent-slider{ box-shadow:0 0 0 3px rgba(255,179,71,.35); }

.privacy-consent-text{
  font-size:.85rem;
  color:var(--cream-dim);
  cursor:pointer;
}
.privacy-consent-text a{
  color:var(--gold);
  text-decoration:underline;
}
.privacy-consent-text a:hover{ color:var(--coral); }

.modal-actions{
  display:flex;
  gap:12px;
  margin-top:24px;
  flex-wrap:wrap;
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width: 900px){
  .menu-section{ padding-bottom:0; }
  .about-section{ padding:2cm 0 3cm; }
  .contact-section{ padding-top:0; }
  .about-grid{ grid-template-columns:1fr; gap:0; position:relative; padding-bottom:0; transition:padding-bottom .4s ease; }
  .about-grid.revealed{ padding-bottom:4cm; }
  .about-mobile-label{
    display:block;
    font-family:var(--font-display);
    font-size:clamp(2rem, 4vw, 2.8rem);
    font-weight:700;
    text-align:left;
    margin:0 0 1cm;
    color:var(--cream);
  }
  .about-tap-hint{ display:block; top:calc(50% - 5cm); background:rgba(0,0,0,.75); border-radius:50px; }
  .about-text{
    position:absolute;
    inset:10px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow-y:auto;
    padding:28px;
    border-radius:var(--radius);
    background:rgba(10,5,18,.55);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid var(--glass-border);
    opacity:0;
    pointer-events:none;
    transition:opacity .5s ease;
  }
  .about-grid.revealed .about-text{
    opacity:1;
    pointer-events:auto;
  }
  .about-grid.revealed .about-dark-overlay{ opacity:1; }
  .about-grid.revealed .about-tap-hint{ opacity:0; pointer-events:none; }

  .about-cta-row .btn{
    background:linear-gradient(120deg, rgba(255,211,110,.4), rgba(255,61,104,.4));
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,179,71,.5);
    color:var(--cream);
    box-shadow:none;
  }
  .about-cta-row .btn::after{ display:none; }
  .about-call-btn{
    background:linear-gradient(120deg, rgba(255,211,110,.4), rgba(255,61,104,.4));
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,179,71,.5);
    color:var(--cream);
    box-shadow:none;
  }
  .contact-grid{ grid-template-columns:1fr; }
  .menu-grid{ grid-template-columns:1fr; }
  .daily-special-carousel{ padding:20px; }
  .ds-slides{ height:385px; }
  .ds-slide-burger.active{ grid-template-columns:1fr; }
  .daily-special-media{ order:-1; }
  .daily-special-media img{ max-width:170px; }
}

@media (max-width: 1100px){
  .main-nav{
    display:none;
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(78vw, 320px);
    background:rgba(31, 24, 44, 0.805);
    border-radius:0;
    box-shadow:0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter:blur(9.8px);
    -webkit-backdrop-filter:blur(9.8px);
    border:none;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:36px;
    padding:0 40px;
    transform:translate3d(100%, 0, 0);
    transition:transform .4s ease;
    will-change:transform;
    isolation:isolate;
  }
  .main-nav::before{
    content:"";
    position:absolute;
    top:0; left:0; bottom:0;
    width:2px;
    background:var(--gradient-sunset);
    opacity:.9;
  }
  .main-nav.open{ transform:translate3d(0, 0, 0); }
  /* Pause the page's perpetual border/badge animations while the nav is
     open -- a constantly-repainting backdrop is a known trigger for mobile
     browsers to stop updating backdrop-filter blur behind a fixed element. */
  body.nav-open .glass-card::before,
  body.nav-open .about-badge,
  body.nav-open .footer-map::before{
    animation-play-state:paused;
  }
  .main-nav ul{ flex-direction:column; gap:24px; }
  .nav-toggle{ display:flex; }
  .nav-cta{ margin-top:8px; }

  .header-inner{ justify-content:flex-end; }

  .form-row{ grid-template-columns:1fr; }
  .footer-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    row-gap:28px;
    column-gap:16px;
    justify-items:start;
    text-align:left;
  }
  .footer-map{ grid-column:1 / 3; grid-row:1; justify-self:center; }
  .footer-brand{ display:contents; }
  .footer-live{ grid-column:1; grid-row:2; }
  .footer-holidays-label{ grid-column:1 / 3; grid-row:3; }
  .footer-holidays{ grid-column:1 / 3; grid-row:4; }
  .footer-col{ display:contents; }
  .footer-col-links{ grid-column:2; grid-row:2; justify-self:end; text-align:left; }
  .footer-logos-row{ grid-column:1 / 3; grid-row:5; justify-self:start; margin-top:16px; }
  .footer-grid .footer-brand, .footer-grid .footer-col-links{ max-width:none; }
  .cookie-banner{ flex-direction:column; align-items:flex-start; left:12px; right:12px; bottom:12px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* ---------------------------------------------------------
   Ubuntu font for all content sections below the hero
   (Speisekarte, Über uns, Kontakt, Footer). Kept at the end of
   the file with a body-prefixed selector so it wins over the
   per-element font-family rules above.
--------------------------------------------------------- */
body :is(.menu-section, .about-section, .contact-section, .site-footer) *{
  font-family:"Ubuntu", "Segoe UI", sans-serif;
}
body .menu-section .menu-quote{
  font-family:var(--font-script);
}

/* ---------------------------------------------------------
   Custom date picker (TT.MM.JJJJ) — dark 60% blur popup
--------------------------------------------------------- */
.datepicker{ position:relative; }
.datepicker input{ cursor:pointer; }

.dp-popup{
  position:fixed;
  z-index:1500;
  width:290px;
  padding:16px;
  border-radius:var(--radius-sm);
  background:rgba(15,8,20,.6);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,179,71,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  color:#fff;
}
.dp-popup[hidden]{ display:none; }

.dp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.dp-title{
  font-weight:600;
  font-size:1rem;
  color:#fff;
}
.dp-nav{
  width:32px; height:32px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:1.2rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease;
}
.dp-nav:hover{ background:var(--gradient-sunset); color:var(--night); }

.dp-weekdays, .dp-days{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:4px;
  text-align:center;
}
.dp-weekdays span{
  font-size:.75rem;
  font-weight:600;
  color:var(--gold);
  padding-bottom:6px;
}
.dp-day{
  aspect-ratio:1;
  border:none;
  border-radius:8px;
  background:transparent;
  color:#fff;
  font-size:.88rem;
  cursor:pointer;
  transition:background .15s ease;
}
.dp-day:hover:not(:disabled){ background:rgba(255,255,255,.15); }
.dp-day.today{ outline:1px solid var(--gold); }
.dp-day.selected{
  background:var(--gradient-sunset);
  color:var(--night);
  font-weight:700;
}
.dp-day:disabled{
  color:rgba(255,255,255,.28);
  cursor:not-allowed;
}
.dp-day.empty{ visibility:hidden; }
.dp-nav:disabled{ opacity:.3; cursor:not-allowed; background:rgba(255,255,255,.1); color:#fff; }

/* Contact cards: no spinning border animation — just a static
   glossy sunset-colour edge, bright on the top/left side only. */
.contact-info::before,
.contact-form::before{
  animation:none;
  padding:1px;
  background:linear-gradient(135deg, var(--gold) 0%, var(--coral) 40%, transparent 72%);
  opacity:.85;
}