/* =====================================================================
   SAAL — Startseite Prototype (v3)
   - Sticky Hero (fixed under content)
   - Floating reservation widget (collapse/expand, mobile + desktop)
   - Compact mobile hours bar
   ===================================================================== */

:root {
  --surface:                  #faf9f5;
  --surface-container-low:    #f4f4f0;
  --surface-container:        #efeeea;
  --surface-container-high:   #e8e6df;
  --surface-container-lowest: #ffffff;

  --on-background:            #1b1c1a;
  --primary:                  #5f5e5e;
  --primary-container:        #a7a5a4;
  --on-primary:               #ffffff;

  --secondary:                #775a19;
  --secondary-soft:           #a07f33;

  --accent:                   #803E48;
  --accent-soft:              #9A4D58;
  --accent-deep:              #6B3340;

  --outline-variant:          #d1c5b4;

  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s8: 32px;  --s10: 40px;
  --s12: 48px; --s14: 56px; --s16: 64px; --s20: 80px;
  --s24: 96px; --s28: 112px;

  --serif: 'Noto Serif', Georgia, serif;
  --sans:  'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-slow: cubic-bezier(.16, 1, .3, 1);

  --hero-h: 100vh;
  /* Dynamic viewport height: on iOS Safari 100vh resolves to the *large*
     viewport (toolbar hidden) and pushes bottom-aligned hero content behind
     the visible address/tool bar. dvh tracks the actually visible area. */
  --hero-h: 100dvh;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-background);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--secondary);
}
.eyebrow.long { letter-spacing: 0.28em; }

/* Rhombus glyph — gestreckt/stehend, angelehnt an die Raute im SAAL-Logo.
   Wird global angewendet, wo das ◆-Glyph erscheint:
     - .rhombus  : von saal-rhombus.js automatisch um jedes ◆ in Texten gewickelt.
     - .diamond  : bestehende manuelle Wrapper (z. B. Home-Signature).
   Pseudo-Element-Diamanten (::after content:"◆") kombinieren denselben
   Stretch zusaetzlich zu ihrer eigenen Positions-Translate (siehe unten). */
.rhombus,
.diamond {
  display: inline-block;
  transform: translateY(-0.12em) scaleX(0.95) scaleY(1.5);
  transform-origin: center center;
  line-height: 1;
  letter-spacing: 0;
  margin-inline-end: 0.06em;
}

.headline {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.headline.xl { font-size: clamp(2.5rem, 7vw, 4.75rem); }
.headline.lg { font-size: clamp(2rem, 5vw, 3.5rem); }
.headline.md { font-size: clamp(1.625rem, 3.5vw, 2.25rem); }
.headline.sm { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }

.lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--on-background);
}

.body { color: var(--on-background); }
.body.muted { color: var(--primary); }

.label-sm {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--s6);
}
@media (min-width: 769px) {
  .wrap { padding: 0 var(--s14); }
}

section { padding: var(--s14) 0; position: relative; z-index: 2; }
@media (min-width: 769px) {
  section { padding: var(--s20) 0; }
}

/* Page content stack — sits above the fixed hero */
.page-content {
  position: relative;
  z-index: 2;
  background: var(--surface);
}

/* ---------- Signature Spacer ---------- */
.signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  padding: var(--s10) 0;
  color: var(--secondary);
}
.signature::before,
.signature::after {
  content: "";
  flex: 0 0 80px;
  height: 1px;
  background: var(--outline-variant);
  opacity: 0.4;
}
.signature .diamond {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 120ms; }
.reveal.delay-2 { transition-delay: 240ms; }
.reveal.delay-3 { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =====================================================================
   NAVIGATION
   ===================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding: var(--s4) var(--s6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(27, 28, 26, 0.78);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: var(--surface);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .55s var(--ease);
}
.nav.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (min-width: 769px) {
  .nav { padding: var(--s5) var(--s14); }
}

.nav-brand { display: flex; align-items: center; gap: var(--s3); }
.nav-brand img {
  height: 34px; width: auto;
  opacity: 0;
  transition: opacity .6s var(--ease) .15s;
}
.nav.is-visible .nav-brand img { opacity: 1; }

.nav-links {
  display: none;
  gap: var(--s8);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--surface);
}
.nav-links a { padding: var(--s2) 0; position: relative; color: var(--surface); transition: color .3s var(--ease); }
.nav-links a:hover { color: var(--secondary-soft); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--secondary-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-toggle {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--surface);
}
.nav-toggle .bars { width: 22px; height: 12px; position: relative; }
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: 1px; background: currentColor;
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars::after  { bottom: 0; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* =====================================================================
   HERO — fixed, content scrolls over it
   ===================================================================== */
.hero {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: var(--hero-h);
  min-height: 640px;
  z-index: 1;
  overflow: hidden;
  background: var(--on-background);
}
.hero-spacer {
  width: 100%;
  height: var(--hero-h);
  min-height: 640px;
  position: relative;
  z-index: 0;
}

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    /* Diagonal: dark bottom-left corner only — true 45° */
    linear-gradient(
      45deg,
      rgba(27,28,26,0.88) 0%,
      rgba(27,28,26,0.55) 12%,
      rgba(27,28,26,0.15) 28%,
      rgba(27,28,26,0)    38%
    ),
    /* Vertical scrim for general legibility (top + bottom) */
    linear-gradient(
      to bottom,
      rgba(27,28,26,0.45) 0%,
      rgba(27,28,26,0.18) 35%,
      rgba(27,28,26,0.55) 100%
    );
}

/* Mobile: stronger vertical scrim, diagonal disabled (portrait viewport) */
@media (max-width: 768px) {
  .hero-scrim {
    background:
      linear-gradient(
        to top,
        rgba(27,28,26,0.85) 0%,
        rgba(27,28,26,0.65) 25%,
        rgba(27,28,26,0.30) 55%,
        rgba(27,28,26,0.10) 85%,
        rgba(27,28,26,0.25) 100%
      );
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--s6) var(--s20);
}
@media (min-width: 769px) {
  .hero-content { padding: 0 var(--s14) var(--s24); }
}

.brand-block {
  color: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  max-width: 900px;
}
.brand-block .eyebrow {
  align-self: flex-start;
  color: #fff;
  background: rgba(119, 90, 25, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: var(--s2) var(--s4);
  letter-spacing: 0.22em;
  opacity: 0;
  animation: fadeUp .9s var(--ease-slow) .4s forwards;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(5.5rem, 18vw, 12rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--surface);
  margin: 0;
  opacity: 0;
  animation: fadeUp 1.2s var(--ease-slow) .6s forwards;
}
/* Logo ersetzt das Wordmark-Text-Glyph "SAAL". Groesse spiegelt die
   bisherige Schriftgroesse, mit konservativem Cap fuer breite Viewports. */
.wordmark img {
  display: block;
  width: clamp(240px, 38vw, 480px);
  height: auto;
}
.wordmark-sub {
  font-family: var(--sans);
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--surface);
  opacity: 0;
  animation: fadeUp 1s var(--ease-slow) .9s forwards;
}
.brand-claim {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.1vw, 1.65rem);
  line-height: 1.45;
  color: var(--surface);
  max-width: 40ch;
  opacity: 0;
  animation: fadeUp 1s var(--ease-slow) 1.15s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Floating language switch — visible from page-load on the hero (top-right).
   When the user scrolls past the hero, JS adds .is-hidden so the pill fades
   out while the nav (with its own nav-lang link) fades in — the overlap reads
   as the switch "morphing" into the header menu. */
.hero-lang {
  position: absolute;
  top: var(--s4);
  right: var(--s6);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: var(--s2) var(--s4);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--surface);
  background: rgba(27, 28, 26, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(-4px);
  animation: fadeUp .9s var(--ease-slow) .9s forwards;
  transition: opacity .45s var(--ease), transform .5s var(--ease);
}
.hero-lang:hover { color: var(--secondary-soft); }
.hero-lang.is-hidden {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
@media (min-width: 769px) {
  .hero-lang { top: var(--s5); right: var(--s14); }
}

/* Scroll hint — desktop only (mobile users already know to swipe) */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--s14) + 8px);
  transform: translateX(-50%);
  z-index: 3;
  color: var(--surface);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  animation: fadeUp 1s var(--ease-slow) 1.5s forwards;
  transition: opacity .35s var(--ease);
}
@media (min-width: 769px) {
  .scroll-hint { display: flex; }
}
.scroll-hint:hover,
.scroll-hint:focus-visible {
  opacity: 0.6;
}
.scroll-hint:focus-visible {
  outline: 1px solid var(--surface);
  outline-offset: 6px;
}
.scroll-hint .line {
  width: 1px;
  height: 42px;
  background: var(--surface);
  opacity: 0.5;
  animation: lineDrop 2.4s var(--ease) infinite;
  transform-origin: top;
  transition: opacity .35s var(--ease);
}
.scroll-hint:hover .line,
.scroll-hint:focus-visible .line {
  opacity: 0.85;
}
@keyframes lineDrop {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 0.55; }
  100% { transform: scaleY(1); opacity: 0; transform-origin: bottom; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s4) var(--s6);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  min-height: 48px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .25s var(--ease);
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color: #fff;
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 100%);
  box-shadow: 0 18px 36px rgba(128, 62, 72, 0.22);
}
.btn-ghost {
  background: transparent;
  color: var(--on-background);
  box-shadow: inset 0 0 0 1px rgba(209, 197, 180, 0.55);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--secondary); }
.btn-ghost-inverse {
  background: transparent;
  color: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(250, 249, 245, 0.4);
}
.btn-ghost-inverse:hover { box-shadow: inset 0 0 0 1px var(--secondary-soft); }
.btn-block { width: 100%; }

.btn-text {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--on-background);
  padding: var(--s2) 0;
  position: relative;
  transition: gap .3s var(--ease);
}
.btn-text::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: var(--secondary);
  transition: width .4s var(--ease);
}
.btn-text:hover { gap: var(--s4); }
.btn-text:hover::after { width: 100%; }
.btn-text.inverse { color: var(--surface); }
.btn-text.inverse::after { background: var(--secondary-soft); }

/* ---------- Glass Hours Bar (in hero) ---------- */
.hours-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  background: rgba(27, 28, 26, 0.55);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--surface);
  padding: var(--s3) var(--s5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0;
  animation: fadeUp 1s var(--ease-slow) 1.4s forwards;
}
.hours-bar .label-sm {
  color: var(--secondary-soft);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  transition: color .4s var(--ease);
}
.hours-bar .label-sm .dot {
  width: 7px; height: 7px;
  background: var(--secondary-soft);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background .4s var(--ease);
}
.hours-bar.is-closed .label-sm { color: rgba(250, 249, 245, 0.55); }
.hours-bar.is-closed .label-sm .dot { background: rgba(250, 249, 245, 0.45); }

.hours-bar .hours-rows {
  display: flex; gap: var(--s5); flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1;
}
.hours-bar .hours-rows span {
  white-space: nowrap;
}
.hours-bar .hours-rows span strong,
.hours-bar .today-only strong {
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.66rem;
  margin-right: var(--s3);
  color: var(--secondary-soft);
}

/* Status detail suffix (· bis 24 Uhr / · ab Di 11 Uhr) — mobile only */
.hours-bar .label-sm .detail {
  margin-left: var(--s1);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  color: inherit;
  opacity: 0.9;
}
.hours-bar .full-rows { display: none; }

@media (max-width: 600px) {
  .hours-bar {
    padding: var(--s3) var(--s5);
    font-size: 0.72rem;
    gap: var(--s3);
    justify-content: center;
  }
  .hours-bar .label-sm { font-size: 0.68rem; letter-spacing: 0.14em; }
  .hours-bar .label-sm .detail { font-size: 0.72rem; letter-spacing: 0.04em; }
}
@media (min-width: 601px) {
  .hours-bar { padding: var(--s4) var(--s6); }
  .hours-bar .label-sm .detail { display: none; }
  .hours-bar .full-rows { display: flex; gap: var(--s5); flex-wrap: wrap; justify-content: flex-end; flex: 1; }
}
@media (min-width: 769px) {
  .hours-bar { padding: var(--s5) var(--s14); font-size: 0.78rem; }
  .hours-bar .full-rows { gap: var(--s6); }
}

/* =====================================================================
   RÄUME — Full-width elegant carousel
   ===================================================================== */
.rooms {
  background: var(--surface-container);
  padding: var(--s16) 0 var(--s20);
  overflow: hidden;
  scroll-margin-top: var(--s20);
}
@media (min-width: 769px) {
  .rooms { padding: var(--s20) 0 var(--s24); }
}

.rooms .section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  margin-bottom: var(--s12);
}
.rooms .section-head .lede { max-width: 52ch; }
/* Hide the mobile section-head on desktop — we re-render it inside wrap-cd for proper alignment */
@media (min-width: 900px) {
  .rooms > .wrap > .section-head { display: none; }
}

/* Carousel */
.carousel { position: relative; width: 100%; }

/* Default: mobile carousel visible, desktop hidden. Swap at ≥ 900px. */
.carousel-desktop { display: none; }
.carousel-mobile  { display: block; }
@media (min-width: 900px) {
  .carousel-desktop { display: block; }
  .carousel-mobile  { display: none; }
}

/* ---- Desktop 2-column grid: 2fr (media) + 1fr (body) ---- */
/* Two rows: section-head on top, carousel content below. */
.carousel-desktop .wrap-cd {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: var(--s16);
  row-gap: var(--s14);
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--s14);
}
@media (min-width: 1280px) {
  .carousel-desktop .wrap-cd {
    column-gap: var(--s20);
    row-gap: var(--s16);
    padding: 0 var(--s20);
  }
}
/* Section head: title + short subtitle stacked, full-width above the carousel */
.cd-head {
  grid-column: 1 / -1;
  display: block;
}
.cd-head .eyebrow { color: var(--secondary); }
.cd-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin-top: var(--s4);
  letter-spacing: -0.01em;
}
.cd-head .cd-sub {
  display: block;
  max-width: 58ch;
  margin-top: var(--s5);
  color: var(--primary);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.65;
}

/* Coverflow stack: slide aspect 4/3 landscape, track overflows horizontally */
.media-stack {
  position: relative;
  width: 100%;
  overflow: hidden;
  grid-column: 1;
}
.media-track {
  display: flex;
  align-items: center;
  gap: 2%;
  transition: transform 1.2s var(--ease-slow);
  will-change: transform;
}
.media-slide {
  flex: 0 0 70%;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: var(--surface-container-low);
  box-shadow: 0 14px 36px rgba(27, 28, 26, 0.16);
  transform: scale(0.88);
  transition:
    opacity 1s var(--ease-slow),
    filter 1s var(--ease-slow),
    transform 1s var(--ease-slow),
    box-shadow 1s var(--ease-slow);
  opacity: 0.42;
  filter: blur(3px) brightness(0.65);
}
.media-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.media-slide.is-active {
  opacity: 1;
  filter: none;
  transform: scale(1);
  box-shadow: 0 32px 64px rgba(27, 28, 26, 0.28);
  z-index: 2;
}

/* Body stack — aligns with media-stack (2nd row, right column) */
.body-stack {
  position: relative;
  grid-column: 2;
  align-self: center;
  min-height: 360px;
}
.body-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s4);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease-slow), transform .8s var(--ease-slow);
  pointer-events: none;
}
.body-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: .35s;
}
.body-slide .slide-floor {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--secondary);
}
.body-slide .slide-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  line-height: 1.05;
  color: var(--on-background);
  letter-spacing: -0.01em;
}
.body-slide .slide-name em {
  display: block;
  font-style: italic;
  font-size: 0.52em;
  color: var(--secondary);
  margin-top: var(--s3);
  font-weight: 400;
}
.body-slide .slide-desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--primary);
  max-width: 36ch;
  line-height: 1.55;
}
.body-slide .slide-more { margin-top: var(--s5); align-self: flex-start; }

/* ---- Mobile fullbleed carousel (existing) ---- */
.carousel-track-wrap { overflow: hidden; width: 100%; }
.carousel-track {
  display: flex;
  transition: transform .9s var(--ease-slow);
  will-change: transform;
}
.room-slide {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--on-background);
}
@media (min-width: 769px) {
  .room-slide { aspect-ratio: 21 / 9; }
}
.room-slide .slide-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2s var(--ease-slow), opacity 1.1s var(--ease-slow);
  opacity: 0.92;
}
.room-slide.is-active .slide-img { transform: scale(1.04); opacity: 1; }
.room-slide .slide-scrim {
  position: absolute; inset: 0;
  background:
    /* Diagonal: dark bottom-left corner only — true 45° */
    linear-gradient(
      45deg,
      rgba(27,28,26,0.90) 0%,
      rgba(27,28,26,0.55) 14%,
      rgba(27,28,26,0.18) 30%,
      rgba(27,28,26,0)    42%
    ),
    /* Vertical anchor at the bottom for body text */
    linear-gradient(
      to top,
      rgba(27,28,26,0.70) 0%,
      rgba(27,28,26,0.25) 50%,
      rgba(27,28,26,0)    100%
    );
}
.room-slide .slide-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s10) var(--s6) var(--s12);
  color: var(--surface);
  display: flex; flex-direction: column; gap: var(--s3);
  max-width: 720px;
}
@media (min-width: 769px) {
  .room-slide .slide-body { padding: var(--s14) var(--s14) var(--s16); max-width: 640px; }
}
.room-slide .slide-floor {
  display: none; /* hidden on mobile — too dense over the image */
  align-self: flex-start;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--secondary);
  background: rgba(250, 249, 245, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-left: 2px solid var(--secondary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-slow) .15s, transform .8s var(--ease-slow) .15s;
}
.room-slide .slide-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.05;
  color: var(--surface);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-slow) .25s, transform .9s var(--ease-slow) .25s;
}
.room-slide .slide-name em {
  display: table; /* shrink-wrap to text width but force a new line */
  font-style: italic;
  font-size: 0.52em;
  color: var(--secondary);
  background: rgba(250, 249, 245, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 4px 12px;
  margin-top: var(--s3);
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  text-shadow: none;
}
.room-slide .slide-name {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
.room-slide .slide-desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(250, 249, 245, 0.9);
  max-width: 42ch;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-slow) .35s, transform .9s var(--ease-slow) .35s;
}
.room-slide .slide-more {
  margin-top: var(--s4);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-slow) .45s, transform .9s var(--ease-slow) .45s;
}
.room-slide.is-active .slide-floor,
.room-slide.is-active .slide-name,
.room-slide.is-active .slide-desc,
.room-slide.is-active .slide-more {
  opacity: 1;
  transform: translateY(0);
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s6) var(--s6) 0;
}
@media (min-width: 769px) {
  .carousel-controls { padding: var(--s8) var(--s14) 0; }
}

.carousel-dots {
  display: flex;
  gap: var(--s3);
  flex: 1;
  justify-content: center;
}
.carousel-dot {
  width: 32px;
  height: 2px;
  background: var(--outline-variant);
  opacity: 0.5;
  transition: background .5s var(--ease), opacity .5s var(--ease), width .5s var(--ease);
  cursor: pointer;
}
.carousel-dot.is-active {
  background: var(--secondary);
  opacity: 1;
  width: 56px;
}

.carousel-arrow {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-background);
  font-family: var(--serif);
  font-size: 1.5rem;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.carousel-arrow:hover { color: var(--secondary); }
.carousel-arrow.prev:hover { transform: translateX(-4px); }
.carousel-arrow.next:hover { transform: translateX(4px); }

.carousel-counter {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: center;
}
.carousel-counter .current {
  font-family: var(--serif);
  color: var(--on-background);
  font-size: 0.95rem;
  margin-right: var(--s1);
}

/* =====================================================================
   MENU — 3-column teaser grid
   ===================================================================== */
.menu {
  background: var(--surface-container-low);
  padding: var(--s16) 0 var(--s20);
}
@media (min-width: 769px) {
  .menu { padding: var(--s20) 0 var(--s24); }
}
.menu .section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--s14);
}
.menu .section-head .eyebrow { color: var(--secondary); }
.menu .section-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  margin-top: var(--s4);
}
.menu .section-head .lede {
  max-width: 48ch;
  margin: var(--s6) auto 0;
  color: var(--primary);
}

/* Mobile: coverflow carousel — cards overlap, center card scales up */
.menu-grid {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--s8) 0 var(--s12);
  margin: 0 calc(-1 * var(--s6));
  scrollbar-width: none;
  perspective: 1200px;
}
.menu-grid::-webkit-scrollbar { display: none; }
.menu-grid > .menu-col {
  flex: 0 0 78%;
  scroll-snap-align: center;
  min-width: 0;
  margin-right: -8%;
  transform: scale(0.84);
  opacity: 0.55;
  filter: blur(0.5px);
  z-index: 1;
  transition:
    transform .6s var(--ease-slow),
    opacity .6s var(--ease-slow),
    filter .6s var(--ease-slow),
    box-shadow .6s var(--ease-slow);
}
.menu-grid > .menu-col:first-child { margin-left: 11%; }
.menu-grid > .menu-col:last-child  { margin-right: 11%; }
.menu-grid > .menu-col.is-active {
  transform: scale(1);
  opacity: 1;
  filter: none;
  z-index: 3;
  box-shadow:
    0 2px 4px rgba(27, 28, 26, 0.06),
    0 24px 48px rgba(27, 28, 26, 0.14),
    0 56px 90px rgba(27, 28, 26, 0.12);
}
@media (min-width: 769px) {
  .menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s8);
    overflow: visible;
    padding: 0;
    margin: 0;
    perspective: none;
  }
  .menu-grid > .menu-col,
  .menu-grid > .menu-col:first-child,
  .menu-grid > .menu-col:last-child {
    flex: initial;
    margin: 0;
    transform: none;
    opacity: 1;
    filter: none;
    z-index: auto;
  }
}

.menu-col {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  padding: var(--s10) var(--s8) var(--s10);
  /* Warm paper gradient — cream top to soft beige bottom */
  background: linear-gradient(180deg, #ffffff 0%, #faf4e6 100%);
  position: relative;
  box-shadow:
    0 1px 2px rgba(27, 28, 26, 0.05),
    0 14px 32px rgba(27, 28, 26, 0.09),
    0 36px 72px rgba(27, 28, 26, 0.07);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.menu-col:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(27, 28, 26, 0.05),
    0 20px 40px rgba(27, 28, 26, 0.10),
    0 48px 80px rgba(27, 28, 26, 0.10);
}
.menu-col::before {
  content: "";
  position: absolute;
  left: var(--s8); right: var(--s8); top: 0;
  height: 3px;
  background: var(--secondary);
  opacity: 0.85;
}
@media (min-width: 769px) {
  .menu-col { padding: var(--s14) var(--s10) var(--s12); gap: var(--s6); }
  .menu-col::before { left: var(--s10); right: var(--s10); height: 3px; }
}

.menu-col .col-eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--secondary);
}
.menu-col h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  margin-top: var(--s1);
}
.menu-col h3 em {
  display: block;
  font-style: italic;
  font-size: 0.72em;
  color: var(--secondary);
  margin-top: var(--s1);
  font-weight: 400;
}
.menu-col .col-intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--primary);
  line-height: 1.6;
  margin-bottom: var(--s2);
}

.dish-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  margin: 0;
  padding: 0;
  flex: 1;
}
.dish-list li {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding-bottom: var(--s4);
  border-bottom: 1px solid rgba(209, 197, 180, 0.4);
}
.dish-list li:last-child { border-bottom: 0; }
.dish-list .dish-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1rem;
  color: var(--on-background);
  line-height: 1.3;
}
.dish-list .dish-note {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--primary);
  letter-spacing: 0.02em;
}

.menu-col .col-cta {
  margin-top: var(--s4);
  align-self: flex-start;
}

/* =====================================================================
   ANLÄSSE — Full-bleed hero with Ken-Burns zoom
   ===================================================================== */
.events {
  position: relative;
  width: 100%;
  min-height: 720px;
  height: 88vh;
  max-height: 920px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--surface);
}
.events-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.events-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center 35%;
  animation: kenBurns 22s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  0%   { transform: scale(1.0)  translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .events-bg img { animation: none; }
}
.events-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  /* Subtle overall tint — the content-box provides primary legibility */
  background:
    linear-gradient(
      to top,
      rgba(27, 28, 26, 0.22) 0%,
      rgba(27, 28, 26, 0.05) 45%,
      rgba(27, 28, 26, 0)    100%
    );
}
.events-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--s14) 0;
}
@media (min-width: 769px) {
  .events-content { padding: var(--s20) 0 var(--s16); }
}

/* Glass content-box for readability on photo background */
.content-box {
  background: rgba(27, 28, 26, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-left: 2px solid var(--secondary-soft);
  padding: var(--s8) var(--s6);
  max-width: 680px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
@media (min-width: 769px) {
  .content-box { padding: var(--s12); }
}
.content-box .eyebrow {
  display: inline-block;
  color: var(--secondary);
  background: rgba(250, 249, 245, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-left: 2px solid var(--secondary);
  font-weight: 600;
  letter-spacing: 0.28em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.content-box h2 {
  color: var(--surface);
  margin-top: var(--s4);
  max-width: 16ch;
  font-size: clamp(1.7rem, 4.5vw, 3rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.content-box .lede {
  color: rgba(250, 249, 245, 0.92);
  max-width: 52ch;
  margin-top: var(--s5);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Typing effect — blinking caret while typing */
.typing {
  white-space: pre-line;
  min-height: 1.2em;
}
.typing::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-left: 6px;
  vertical-align: -0.08em;
  background: var(--secondary-soft);
  animation: caretBlink 0.9s steps(1) infinite;
}
.typing.typing-done::after { display: none; }
@keyframes caretBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .typing::after { animation: none; }
}
.events-types {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: var(--s6);
}
.events-types span {
  font-size: 0.92rem;
  color: rgba(250, 249, 245, 0.85);
  position: relative;
  padding-right: var(--s5);
}
.events-types span:not(:last-child)::after {
  content: "◆";
  position: absolute; right: 0; top: 50%;
  /* gestreckte Raute (siehe .rhombus) zusaetzlich zur vertikalen Zentrierung;
     -62% statt -50% verschiebt den Glyph ein Stueck nach oben. */
  transform: translateY(-62%) scaleX(0.95) scaleY(1.5);
  font-size: 0.5rem;
  color: var(--secondary);
}

/* ---- Mobile overrides for events (placed after base rules so they win) ---- */
@media (max-width: 768px) {
  .events {
    min-height: 0;
    height: auto;
    max-height: none;
    flex-direction: column-reverse; /* box on top, image below it */
    align-items: stretch;
    overflow: visible;
    margin-top: var(--s12);
    padding-bottom: var(--s14); /* tail air below image */
  }
  .events-bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 5;
    min-height: 130vw;
    margin-top: -60vw; /* image climbs up under the bottom half of the box */
    z-index: 0;
  }
  .events-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .events-scrim { display: none; }
  .events-content {
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding: 0;
    background: transparent;
  }
  .events-content .wrap {
    padding-left: var(--s5);
    padding-right: var(--s5);
  }
  .content-box {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.28),
      0 32px 64px rgba(0, 0, 0, 0.45);
  }
}

/* =====================================================================
   TEAM
   ===================================================================== */
.team {
  background: var(--surface-container);
  padding: var(--s20) 0 var(--s24);
  text-align: center;
}
@media (min-width: 769px) {
  .team { padding: var(--s24) 0 var(--s28); }
}
.team { overflow: hidden; }
.team .eyebrow { color: var(--secondary); }
.team h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: var(--s4);
  margin-bottom: var(--s14);
}
.team-oval-wrap {
  position: relative;
  width: 80%;
  max-width: 620px;
  margin: 0 auto var(--s12);
}
@media (min-width: 769px) {
  .team-oval-wrap { width: 50%; margin-bottom: var(--s14); }
}
.team-oval-wrap .orn-left,
.team-oval-wrap .orn-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 62%;
  pointer-events: none;
  z-index: 1;
  display: block;
}
.team-oval-wrap .orn-left {
  right: 98%;
}
.team-oval-wrap .orn-right {
  left: 98%;
  transform: translateY(-50%) scaleX(-1);
}
.team-oval-wrap .orn-stroke {
  fill: none;
  stroke: var(--secondary, #775a19);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5000;
  stroke-dashoffset: -5000;
  transition: stroke-dashoffset 6s cubic-bezier(0.65, 0, 0.35, 1);
}
.team-oval-wrap.is-in .orn-stroke {
  stroke-dashoffset: 0;
}
.team-oval-wrap.is-in .orn-right .orn-stroke {
  transition-delay: 0.4s;
}
@media (prefers-reduced-motion: reduce) {
  .team-oval-wrap .orn-stroke { stroke-dashoffset: 0 !important; transition: none !important; }
}
.team-oval {
  width: 100%;
  padding-bottom: 75%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #dbdad6;
  box-shadow: 0 20px 40px rgba(27,28,26,0.08);
  z-index: 2;
}
.team-oval img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2s var(--ease-slow);
}
.team-oval:hover img { transform: scale(1.04); }
.team-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--primary);
  line-height: 1.75;
  max-width: 60ch;
  margin: 0 auto;
  padding: 0 var(--s4);
}
.team-cta { margin-top: var(--s10); }

/* =====================================================================
   HOTEL
   ===================================================================== */
.hotel { background: var(--surface-container-low); }
.hotel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s10);
  align-items: center;
}
@media (min-width: 769px) {
  .hotel-grid { grid-template-columns: 1fr 1fr; gap: var(--s16); }
}
.hotel-img-wrap { overflow: hidden; }
.hotel-img {
  aspect-ratio: 16 / 11;
  width: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-slow);
}
.hotel-img-wrap:hover .hotel-img { transform: scale(1.04); }
.hotel-body { display: flex; flex-direction: column; gap: var(--s6); }
.hotel-body .eyebrow { color: var(--secondary); }
.hotel-body .quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.35;
  color: var(--on-background);
  max-width: 24ch;
}
.hotel-body .meta {
  font-size: 0.88rem;
  color: var(--primary);
  letter-spacing: 0.04em;
}

/* =====================================================================
   FOOTER — INVERSE (dark)
   ===================================================================== */
.footer {
  background: var(--on-background);
  color: var(--surface);
  padding: var(--s16) 0 var(--s10);
  position: relative;
  z-index: 2;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s10);
}
@media (min-width: 769px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--s12);
  }
}
.footer h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--secondary-soft);
  margin-bottom: var(--s5);
}
.footer .brand-foot {
  display: block;
  max-width: 180px;
  margin-bottom: var(--s4);
  filter: brightness(0) invert(1);
}
.footer p, .footer li, .footer a { font-size: 0.92rem; color: var(--surface); line-height: 1.7; }
.footer .body.muted { color: rgba(250, 249, 245, 0.65); }
.footer ul { list-style: none; }
.footer a { transition: color .3s var(--ease); }
.footer a:hover { color: var(--secondary-soft); }

.hours-list { display: flex; flex-direction: column; gap: var(--s2); }
.hours-list .row {
  display: flex; justify-content: space-between; gap: var(--s4);
  position: relative;
}
.hours-list .row + .row::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -4px;
  height: 1px;
  background: rgba(250, 249, 245, 0.12);
}
.hours-list .day { color: rgba(250, 249, 245, 0.6); }

.optin { display: flex; flex-direction: column; gap: var(--s4); }
.optin .check {
  display: flex; align-items: flex-start; gap: var(--s3);
  font-size: 0.85rem;
  color: rgba(250, 249, 245, 0.7);
  margin-top: var(--s4);
  cursor: pointer;
  user-select: none;
}
.optin .check input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: 2px;
  border: 1px solid rgba(250, 249, 245, 0.25);
  background: transparent;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.optin .check input:checked {
  background: var(--secondary);
  border-color: var(--secondary);
}
.optin .check input:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--surface);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.field {
  display: flex; flex-direction: column; gap: var(--s2);
  /* In Grid-Containern (z.B. .fab-panel form .row) muessen Fields ueber den
     intrinsic min-content hinaus schrumpfen koennen, sonst sprengen lange
     Input-Default-Breiten das Grid und der Container scrollt horizontal. */
  min-width: 0;
}
.field label {
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--primary);
}
.field label .optional {
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--primary);
  opacity: 0.55;
  margin-left: 0.3em;
}
.field input, .field select, .field textarea {
  font: inherit;
  width: 100%;
  /* Erlaubt Schrumpfen in Flex/Grid-Tracks unter intrinsic min-content. */
  min-width: 0;
  /* Default-Browser-Box-Sizing fuer inputs wuerde Border zur Breite addieren;
     border-box garantiert width:100% = sichtbare Breite. */
  box-sizing: border-box;
  padding: var(--s3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(209, 197, 180, 0.6);
  color: var(--on-background);
  outline: none;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), padding .25s var(--ease);
}
.field textarea {
  resize: vertical;
  min-height: calc(var(--s3) * 2 + 3.4em);
  line-height: 1.5;
  font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-bottom-color: var(--secondary);
  background: var(--surface-container-low);
  padding-left: var(--s3);
}

/* Reservation popup: full border + light fill instead of just a bottom-line,
   so fields read clearly against the panel's white background. */
.fab-panel .field input,
.fab-panel .field select,
.fab-panel .field textarea {
  padding: var(--s3);
  background: var(--surface-container-low);
  border: 1px solid rgba(209, 197, 180, 0.55);
  border-radius: 6px;
}
.fab-panel .field input:focus,
.fab-panel .field select:focus,
.fab-panel .field textarea:focus {
  border-color: var(--secondary);
  background: var(--surface-container);
  padding-left: var(--s3);
}
/* Datum/Uhrzeit stacken jetzt auf Mobile auf volle Breite (siehe .row),
   wirken dabei aber unnoetig gestreckt, weil ihr Inhalt (der native
   Picker-Wert) viel schmaler ist als eine Zeile. Kappen statt strecken. */
.fab-panel .field input[type="date"],
.fab-panel .field input[type="time"] {
  max-width: 220px;
}

/* Footer field overrides (dark) */
.footer .field label { color: rgba(250, 249, 245, 0.55); }
.footer .field input, .footer .field select {
  color: var(--surface);
  border-bottom-color: rgba(250, 249, 245, 0.2);
}
.footer .field input::placeholder { color: rgba(250, 249, 245, 0.35); }
.footer .field input:focus, .footer .field select:focus {
  border-bottom-color: var(--secondary-soft);
  background: rgba(250, 249, 245, 0.04);
}
.footer .btn-ghost {
  color: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(250, 249, 245, 0.25);
}
.footer .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--secondary-soft); }

.footer-bottom {
  margin-top: var(--s12);
  padding-top: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s5);
  justify-content: space-between;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(250, 249, 245, 0.5);
  position: relative;
}
.footer-bottom::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: rgba(250, 249, 245, 0.12);
}

/* =====================================================================
   FLOATING RESERVATION WIDGET (collapse / expand)
   ===================================================================== */
.fab {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  /* Own compositing layer — mitigates iOS Safari's fixed-position repaint
     lag while its toolbar animates in/out on scroll. */
  will-change: transform, opacity;
}
.fab.is-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fab.is-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }

/* Mobile placement: bottom bar full-width */
@media (max-width: 768px) {
  .fab {
    left: 0; right: 0; bottom: 0;
  }
}
/* Desktop placement: bottom-right corner */
@media (min-width: 769px) {
  .fab {
    right: var(--s8);
    bottom: var(--s8);
  }
}

/* ---- Pill (collapsed) ---- */
.fab-pill {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
  color: #fff;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  min-height: 56px;
  box-shadow: 0 18px 36px rgba(128, 62, 72, 0.22);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .3s var(--ease);
  width: 100%;
  justify-content: space-between;
}
.fab-pill:hover {
  background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 100%);
  box-shadow: 0 24px 48px rgba(128, 62, 72, 0.28);
}
.fab-pill .pill-arrow {
  display: inline-block;
  flex-shrink: 0;
  transition: transform .35s var(--ease);
}
.fab-pill:hover .pill-arrow { transform: translate(2px, -2px); }

@media (min-width: 769px) {
  .fab-pill {
    width: auto;
    min-width: 240px;
    padding: var(--s4) var(--s5);
  }
}

.fab.is-open .fab-pill {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
}

/* ---- Panel (expanded) ---- */
.fab-panel {
  position: absolute;
  background: var(--surface-container-lowest);
  box-shadow: 0 30px 60px rgba(27, 28, 26, 0.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

/* Mobile: full-width sheet from bottom */
@media (max-width: 768px) {
  .fab-panel {
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    /* Stops elastic overscroll inside the panel from chaining to (and
       rubber-banding) the page behind it — part of the "floating,
       draggable" feel on iOS, together with the body-lock in fab.js. */
    overscroll-behavior-y: contain;
    transform: translateY(100%);
    padding: var(--s5) var(--s6) var(--s10);
  }
  .fab.is-open .fab-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Desktop: anchored bottom-right window */
@media (min-width: 769px) {
  .fab-panel {
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: calc(100vw - var(--s12));
    max-height: calc(100vh - var(--s12));
    overflow-y: auto;
    transform: scale(0.94);
    transform-origin: bottom right;
    padding: var(--s8);
  }
  .fab.is-open .fab-panel {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
}

.fab-panel .panel-handle {
  width: 36px; height: 3px;
  background: var(--outline-variant);
  opacity: 0.6;
  margin: 0 auto var(--s5);
}
@media (min-width: 769px) {
  .fab-panel .panel-handle { display: none; }
}

.fab-panel .panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s4);
  margin-bottom: var(--s6);
}
.fab-panel .panel-head .eyebrow { color: var(--secondary); margin-bottom: var(--s2); }
.fab-panel h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.2;
}
.fab-panel .panel-close {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--primary);
  flex-shrink: 0;
  transition: color .25s var(--ease), transform .3s var(--ease);
}
.fab-panel .panel-close:hover { color: var(--accent); transform: rotate(90deg); }

.fab-panel form { display: flex; flex-direction: column; gap: var(--s5); }
.fab-panel form .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
@media (min-width: 769px) {
  .fab-panel form .row { grid-template-columns: 1fr 1fr; }
}
.fab-panel .helper {
  font-size: 0.82rem;
  color: var(--primary);
  margin-top: var(--s2);
}
.fab-panel .helper a { color: var(--accent); }

/* =====================================================================
   MOBILE NAV DRAWER
   ===================================================================== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(27, 28, 26, 0.94);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: var(--surface);
  /* Top/Bottom-Padding respektieren die Safe-Area (Notch, Dynamic Island,
     iOS-Home-Indicator). Fallback auf var(--s6) auf Geraeten ohne env(). */
  padding: max(var(--s6), env(safe-area-inset-top) + var(--s4))
           var(--s6)
           max(var(--s6), env(safe-area-inset-bottom) + var(--s4))
           var(--s6);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.drawer.is-open { opacity: 1; pointer-events: auto; }
.drawer-top {
  display: flex; justify-content: space-between; align-items: center;
}
.drawer-top img { height: 34px; }
.drawer-close {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  color: var(--surface);
}
.drawer nav {
  margin-top: var(--s16);
  display: flex; flex-direction: column; gap: var(--s8);
}
.drawer nav a {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--surface);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.drawer.is-open nav a { opacity: 1; transform: translateY(0); }
.drawer.is-open nav a:nth-child(1) { transition-delay: .1s; }
.drawer.is-open nav a:nth-child(2) { transition-delay: .16s; }
.drawer.is-open nav a:nth-child(3) { transition-delay: .22s; }
.drawer.is-open nav a:nth-child(4) { transition-delay: .28s; }
.drawer.is-open nav a:nth-child(5) { transition-delay: .34s; }
.drawer.is-open nav a:nth-child(6) { transition-delay: .40s; }
.drawer nav a span {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--secondary-soft);
  margin-bottom: var(--s2);
}
.drawer .drawer-foot {
  margin-top: auto;
  padding-top: var(--s10);
  font-size: 0.85rem;
  color: var(--primary-container);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =====================================================================
   SUBPAGE FRAMEWORK
   Shared structure for anlaesse / restaurants / menue / hotel pages
   ===================================================================== */

/* Nav: always visible on subpages */
body.subpage .nav { transform: translateY(0); }
body.subpage .nav .nav-brand img { opacity: 1; }
body.subpage { padding-top: 0; }

/* Subpage hero — slimmer than the home hero, full-bleed image with overlay */
.subhero {
  position: relative;
  width: 100%;
  min-height: 56vh;
  height: 56vh;
  max-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--surface);
}
@media (max-width: 768px) {
  .subhero { min-height: 64vh; height: 64vh; max-height: none; }
}
.subhero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.subhero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center 45%;
  animation: kenBurns 26s ease-in-out infinite alternate;
}
.subhero-scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(27,28,26,0.78) 0%, rgba(27,28,26,0.32) 50%, rgba(27,28,26,0.10) 100%);
}
.subhero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 0 var(--s14);
}
@media (min-width: 769px) {
  .subhero-content { padding: 0 0 var(--s20); }
}
.subhero-content .wrap { display: flex; flex-direction: column; gap: var(--s4); }

/* Eyebrow — glass-layer pill like the startseite content-box eyebrow, so it
   always sits legibly on top of photographic hero backgrounds. */
.subhero .eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--secondary);
  background: rgba(250, 249, 245, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-left: 2px solid var(--secondary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(16px);
  animation: subheroFade 900ms var(--ease-slow) 120ms forwards;
}
.subhero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--surface);
  margin: 0;
  max-width: 22ch;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(22px);
  animation: subheroFade 1100ms var(--ease-slow) 280ms forwards;
}
.subhero .lede {
  color: rgba(250,249,245,0.92);
  max-width: 56ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(22px);
  animation: subheroFade 1100ms var(--ease-slow) 440ms forwards;
}
.subhero .breadcrumb {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(250, 249, 245, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 5px 12px;
  margin-bottom: var(--s2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(12px);
  animation: subheroFade 800ms var(--ease-slow) 0ms forwards;
}
.subhero .breadcrumb a { color: var(--secondary); transition: color .3s var(--ease); }
.subhero .breadcrumb a:hover { color: var(--on-background); }
.subhero .breadcrumb .sep { margin: 0 var(--s2); color: var(--secondary); }

@keyframes subheroFade {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .subhero .eyebrow,
  .subhero h1,
  .subhero .lede,
  .subhero .breadcrumb {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Uniform 3-up image grid used on hotel impressions row */
.image-grid-3 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--s5);
}
@media (min-width: 700px) {
  .image-grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
}
.image-grid-3 > .tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-container);
  box-shadow: 0 18px 40px rgba(27, 28, 26, 0.18);
}
.image-grid-3 > .tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-slow);
}
.image-grid-3 > .tile:hover img { transform: scale(1.04); }

/* Reveal variant: slightly softer entrance for inline/small bits */
.reveal.soft {
  transform: translateY(14px);
  transition-duration: 0.9s;
}
.reveal.delay-4 { transition-delay: 480ms; }
.reveal.delay-5 { transition-delay: 600ms; }

/* Staggered children reveal — apply .stagger to a .reveal container and its
   direct children fade in sequentially once the parent is visible. */
.stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease-slow), transform 0.9s var(--ease-slow);
}
.stagger.is-in > * { opacity: 1; transform: translateY(0); }
.stagger.is-in > *:nth-child(1) { transition-delay: 80ms; }
.stagger.is-in > *:nth-child(2) { transition-delay: 200ms; }
.stagger.is-in > *:nth-child(3) { transition-delay: 320ms; }
.stagger.is-in > *:nth-child(4) { transition-delay: 440ms; }
.stagger.is-in > *:nth-child(5) { transition-delay: 560ms; }
.stagger.is-in > *:nth-child(6) { transition-delay: 680ms; }
@media (prefers-reduced-motion: reduce) {
  .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Subtle hover interactions on subpage cards + media */
.feature-media {
  transition: transform .7s var(--ease-slow), box-shadow .5s var(--ease);
}
.feature-media img {
  transition: transform 1.3s var(--ease-slow);
}
.feature-media:hover { transform: translateY(-4px); box-shadow: 0 32px 70px rgba(27,28,26,0.24); }
.feature-media:hover img { transform: scale(1.035); }

.capacity-strip .item {
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.capacity-strip .item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(27,28,26,0.12);
}

/* Menu item subtle hover */
.menu-items li {
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.menu-items li:hover {
  border-bottom-color: var(--secondary);
  transform: translateX(2px);
}
.menu-items .name .title { transition: color .3s var(--ease); }
.menu-items li:hover .name .title { color: var(--secondary); }

/* Gentle inline underline-expand for text buttons */
.btn-text {
  position: relative;
}
.btn-text::after {
  content: "";
  position: absolute;
  left: 0; right: auto; bottom: -2px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .5s var(--ease-slow);
}
.btn-text:hover::after { width: 100%; }

/* Voucher amount picker — chip-style buttons + custom amount */
.amount-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
}
.amount-picker .chip {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 12px 22px;
  background: var(--surface);
  border: 1px solid rgba(27, 28, 26, 0.18);
  color: var(--on-background);
  cursor: pointer;
  transition: all .25s var(--ease);
  font-feature-settings: "tnum";
}
.amount-picker .chip:hover {
  border-color: var(--secondary);
  color: var(--secondary);
}
.amount-picker .chip.is-active {
  background: var(--on-background);
  border-color: var(--on-background);
  color: var(--surface);
}
.amount-custom-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(27, 28, 26, 0.16);
  background: var(--surface);
  max-width: 220px;
}
.amount-custom-wrap .currency {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: var(--surface-container);
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--primary);
  border-right: 1px solid rgba(27, 28, 26, 0.16);
}
.amount-custom-wrap input {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  padding: 12px 14px !important;
  font-feature-settings: "tnum";
  font-size: 1rem;
}

/* Hotel teaser image gently zooms on hover */
.hotel-teaser .hotel-media img {
  transition: transform 1.5s var(--ease-slow);
}
.hotel-teaser .hotel-media:hover img { transform: scale(1.03); }

/* Subpage section base */
.subsection {
  padding: var(--s16) 0;
}
@media (min-width: 769px) {
  .subsection { padding: var(--s24) 0; }
}
.subsection.alt { background: var(--surface-container); }
.subsection-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-bottom: var(--s12);
  max-width: 760px;
}
.subsection-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.subsection-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.85rem, 4vw, 3rem);
  line-height: 1.12;
  margin: 0;
  color: var(--on-background);
}
.subsection-head .lede {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: var(--primary);
  line-height: 1.55;
  max-width: 56ch;
}
.subsection-head.center .lede { margin-left: auto; margin-right: auto; }

/* Two-column split feature row (image + text) — used in restaurants page */
.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s10);
  align-items: center;
  margin-bottom: var(--s20);
}
.feature-row:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .feature-row { grid-template-columns: 1fr 1fr; gap: var(--s16); }
  .feature-row.reverse > .feature-media { order: 2; }
}
.feature-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-container);
  box-shadow: 0 24px 60px rgba(27,28,26,0.18);
}
.feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-text { display: flex; flex-direction: column; gap: var(--s4); }
.feature-text .floor {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--secondary);
}
.feature-text h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  margin: 0;
  color: var(--on-background);
}
.feature-text h3 em {
  display: block;
  font-style: italic;
  font-size: 0.72em;
  color: var(--primary);
  margin-top: var(--s2);
  font-weight: 400;
}
.feature-text p { color: var(--primary); line-height: 1.65; max-width: 52ch; }
.feature-text .meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: var(--s4);
  font-size: 0.88rem;
  color: var(--primary);
}
.feature-text .meta span { position: relative; padding-right: var(--s5); }
.feature-text .meta span:not(:last-child)::after {
  content: "◆";
  position: absolute; right: 0; top: 50%;
  transform: translateY(-62%) scaleX(0.95) scaleY(1.5);
  font-size: 0.5rem;
  color: var(--secondary);
}

/* Menu accordion / list view (for menue page) */
.menu-section {
  border-top: 1px solid rgba(27,28,26,0.10);
  padding-top: var(--s10);
  margin-top: var(--s14);
}
.menu-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.menu-section-head {
  display: flex; flex-direction: column; gap: var(--s2);
  margin-bottom: var(--s8);
}
.menu-section-head .eyebrow { color: var(--secondary); font-size: 0.74rem; letter-spacing: 0.28em; text-transform: uppercase; }
.menu-section-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  margin: 0;
}
.menu-section-head h2 em { display: block; font-style: italic; font-size: 0.6em; color: var(--primary); margin-top: var(--s1); font-weight: 400; }
.menu-section-head .desc { color: var(--primary); max-width: 60ch; line-height: 1.6; margin-top: var(--s3); }

.menu-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
@media (min-width: 769px) {
  .menu-items { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s12); }
}
.menu-items li {
  display: flex; flex-direction: column; gap: var(--s1);
  padding-bottom: var(--s4);
  border-bottom: 1px solid rgba(209, 197, 180, 0.4);
}
.menu-items .name { display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline; }
.menu-items .name .title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--on-background);
}
.menu-items .name .price {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--secondary);
  font-feature-settings: "tnum";
  letter-spacing: 0.04em;
}
.menu-items .note { font-size: 0.85rem; color: var(--primary); line-height: 1.45; }

/* Hotel teaser block (for startseite + standalone hotel page) */
.hotel-teaser {
  background: var(--on-background);
  color: var(--surface);
  position: relative;
  overflow: hidden;
}
.hotel-teaser .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s10);
  align-items: center;
  padding-top: var(--s16);
  padding-bottom: var(--s16);
}
@media (min-width: 900px) {
  .hotel-teaser .wrap { grid-template-columns: 1fr 1fr; gap: var(--s16); padding-top: var(--s20); padding-bottom: var(--s20); }
}
.hotel-teaser .eyebrow { color: var(--secondary-soft); }
.hotel-teaser h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 4vw, 3rem);
  line-height: 1.15;
  color: var(--surface);
  margin: var(--s3) 0 var(--s5);
  max-width: 18ch;
}
.hotel-teaser p { color: rgba(250,249,245,0.82); max-width: 52ch; line-height: 1.6; margin-bottom: var(--s6); }
.hotel-teaser .hotel-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.hotel-teaser .hotel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hotel-teaser .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: rgba(250,249,245,0.10);
  border-left: 2px solid var(--secondary);
  padding: 8px 14px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondary-soft);
  margin-bottom: var(--s4);
}

/* Inquiry / contact form for anlaesse */
.inquiry-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  max-width: 720px;
}
@media (min-width: 769px) {
  .inquiry-form { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .inquiry-form .full { grid-column: 1 / -1; }
}
.inquiry-form label {
  display: flex; flex-direction: column; gap: var(--s1);
  font-size: 0.82rem;
  color: var(--primary);
  letter-spacing: 0.04em;
}
.inquiry-form input, .inquiry-form select, .inquiry-form textarea {
  font-family: var(--sans);
  font-size: 1rem;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid rgba(27,28,26,0.16);
  border-radius: 0;
  color: var(--on-background);
  transition: border-color .25s var(--ease);
}
.inquiry-form input:focus, .inquiry-form select:focus, .inquiry-form textarea:focus {
  outline: none;
  border-color: var(--secondary);
}
.inquiry-form textarea { resize: vertical; min-height: 120px; }

/* Voucher-Form: Versand-Sektion. Wrapper hat display:contents (Children werden
   zu direkten Grid-Items des Formulars), die `is-disabled`-Klasse blendet die
   Labels visuell aus, bis der Versand-Checkbox gesetzt wird. */
.shipping-fields.is-disabled label {
  opacity: 0.45;
  cursor: not-allowed;
  transition: opacity .25s var(--ease);
}
.shipping-fields.is-disabled input,
.shipping-fields.is-disabled select,
.shipping-fields.is-disabled textarea {
  cursor: not-allowed;
  background: rgba(27,28,26,0.03);
}

/* Capacity strip on anlaesse / restaurants */
.capacity-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
  padding: var(--s8) 0;
}
@media (min-width: 769px) {
  .capacity-strip { grid-template-columns: repeat(4, 1fr); gap: var(--s8); padding: var(--s10) 0; }
}
.capacity-strip .item {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s5);
  background: var(--surface);
  border-left: 2px solid var(--secondary);
}
.capacity-strip .num {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.2vw, 2.4rem);
  color: var(--on-background);
  font-weight: 500;
}
.capacity-strip .label {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
}

/* Anchor-Nav on menue: 3-column grid (overrides the shared 4-col
   capacity-strip layout). */
.anchor-strip { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) {
  .anchor-strip { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
}

/* Back-to-home link on subpages */
.back-link {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  padding: var(--s8) 0 0;
}
.back-link:hover { color: var(--secondary); }