/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── Tokens (Gold & Navy on Parchment — matches damas-menue-circle4.html) ── */
:root {
  --bg:         #F3EAD9;
  --bg-alt:     #EDE0C4;
  --ink:        #16243F;
  --ink-rgb:    22, 36, 63;
  --gold:       #B07A34;
  --gold-rgb:   176, 122, 52;
  --gold-soft:  #C7A978;
  --gold-muted: #9A854F;
  /* ⚠️ Kontrast auf dem Pergament (#F3EAD9), gemessen nach WCAG 2.1:
       --gold       3.10:1  |  --gold-muted 3.01:1  |  --muted (alt) 4.07:1
     Alle drei fielen unter 4.5:1 und damit durch AA — betroffen war unter
     anderem die BESCHRIFTUNG beider Formulare. Deshalb zwei Textfarben extra:
     --gold-ink für kleine goldene Schrift, --ink-soft für Fließtext zweiter
     Ordnung. --gold/--gold-muted bleiben für Linien, Rahmen, Punkte und große
     Schrift (ab ~18,66px fett gilt die 3:1-Schwelle). */
  --gold-ink:   #8A5F28;   /* 4.69:1 — schon als Verlaufsende in der Datei */
  --ink-soft:   #574E3C;   /* 6.90:1 — die Farbe der Speisekarten-Beschreibung */
  --muted:      #6F6350;   /* war #7C7059 (4.07:1) → jetzt 4.91:1, gleicher Ton */
  --leader:     #CCBC9C;
  --veg:        #6E7B3D;
  --offer:      #C0392B;   /* Angebotspreis — gleicher Ton wie im Admin */
  --border:     rgba(var(--gold-rgb), 0.25);
  --header-h:   76px;
  --header-pad: 48px;      /* header side padding — the mobile panel offsets against it */
  --content-max: 1140px;   /* shared max content width for all sections */
  --content-pad: 40px;     /* shared horizontal section padding */
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
}

h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; }

a { color: inherit; }

/* ── Shared labels ── */
.eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);   /* 13px Versalien: --gold waere 3.10:1 */
  margin-bottom: 10px;
}

.eyebrow--arabic {
  display: block;
  font-family: 'Aref Ruqaa', serif; direction: rtl;
  font-size: clamp(23px, 2.7vw, 34px);
  color: var(--gold);
  margin: 0 0 12px;
  opacity: 0.95;
}

.placeholder-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Buttons ── */
.btn {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn--primary {
  background: var(--gold);
  color: var(--bg);
}
.btn--primary:hover { background: #96652A; }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ── Ornament: star-tessellation wash ── */
.star-wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Ornament: gold frieze rule ── */
.frieze {
  height: 22px;
  width: 100%;
}

/* ── Ornament: corner brackets (reused on Hero / Speisekarte) ── */
.frame-ornaments { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

.frame-corner { position: absolute; width: 90px; height: 90px; }
.frame-corner.tl { top: 24px; left: 24px; }
.frame-corner.tr { top: 24px; right: 24px; transform: scaleX(-1); }
.frame-corner.bl { bottom: 24px; left: 24px; transform: scaleY(-1); }
.frame-corner.br { bottom: 24px; right: 24px; transform: scale(-1, -1); }

.fc-line-h { position: absolute; top: 9px; left: 9px; width: 70px; height: 1.5px; background: var(--gold); opacity: 0.7; }
.fc-line-v { position: absolute; top: 9px; left: 9px; width: 1.5px; height: 70px; background: var(--gold); opacity: 0.7; }
.fc-dot { position: absolute; width: 11px; height: 11px; background: var(--gold); transform: rotate(45deg); opacity: 0.85; }
.fc-dot--a { top: 6px; left: 76px; width: 7px; height: 7px; opacity: 0.55; }
.fc-dot--b { top: 76px; left: 6px; width: 7px; height: 7px; opacity: 0.55; }
.fc-dot--main { top: 4px; left: 4px; }

.frame-edge { position: absolute; background: var(--gold); opacity: 0.38; }
.frame-edge--top { top: 29px; left: 114px; right: 114px; height: 1px; }
.frame-edge--bottom { bottom: 29px; left: 114px; right: 114px; height: 1px; }
.frame-edge--left { top: 114px; bottom: 114px; left: 29px; width: 1px; }
.frame-edge--right { top: 114px; bottom: 114px; right: 29px; width: 1px; }

.frame-mid { position: absolute; width: 8px; height: 8px; background: var(--gold); opacity: 0.5; transform: rotate(45deg); }
.frame-mid--top { top: 25px; left: 50%; margin-left: -4px; }
.frame-mid--bottom { bottom: 25px; left: 50%; margin-left: -4px; }
.frame-mid--left { top: 50%; left: 25px; margin-top: -4px; }
.frame-mid--right { top: 50%; right: 25px; margin-top: -4px; }

/* ── Ornament: divider glyph (compass rosette) ── */
.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 40px;
}
.ornament-divider__line {
  width: 70px;
  height: 1px;
}
.ornament-divider__line--l { background: linear-gradient(90deg, transparent, var(--gold)); }
.ornament-divider__line--r { background: linear-gradient(90deg, var(--gold), transparent); }
.ornament-divider__dot {
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.ornament-divider__compass {
  position: relative;
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.ornament-divider__compass span { position: absolute; inset: 0; border: 1.3px solid var(--gold); }
.ornament-divider__compass span:first-child { transform: rotate(45deg); }

.ornament-divider--simple {
  margin: 44px auto;
  max-width: 360px;
  gap: 0;
}
.ornament-divider--simple .ornament-divider__line { flex: 1; }

/* ── Header / Nav ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--header-pad);
  background: rgba(243, 234, 217, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.site-header__brand {
  /* Schriftschnitt identisch zur Wortmarke im Fuß (.footer__brand): Georgia
     kursiv 700, 26px. Beide Marken sollen als dieselbe Wortmarke gelesen
     werden — wer hier etwas ändert, ändert es bitte auch dort.
     Einziger Unterschied ist die Farbe: navy auf dem hellen Pergament der
     Kopfzeile, Pergament auf dem dunklen Grund des Fußes. */
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
  text-decoration: none;
  /* Monogramm + Wortmarke in einer Zeile; der Wortlaut bleibt EIN Flex-Element,
     damit „DamasEcke" nicht durch den gap zerrissen wird. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.site-header__logo { height: 34px; width: auto; display: block; }
/* „Ecke" in Navy statt Gold. Der Abstand zu „Damas" kommt als Rand und NICHT
   als Leerzeichen im Markup: ein Leerzeichen wäre eine Umbruchstelle, und auf
   schmalen Displays stünde „Ecke" dann in einer zweiten Zeile. In em, damit er
   mitwächst, wenn die Schriftgröße der Wortmarke einmal geändert wird. */
.site-header__accent { color: var(--ink); margin-left: 0.22em; }
.site-header__right { display: flex; align-items: center; gap: 30px; }
.site-nav { display: flex; align-items: center; gap: 34px; }
.site-nav a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.25s;
}
.site-nav a:hover { color: var(--gold); }
.site-header__cta { padding: 12px 26px; font-size: 11px; }

/* The bar has a fixed height, so it cannot grow to fit — the CTA must never
   wrap and the brand is the element that gives way on very narrow phones. */
.site-header__brand { flex: 0 1 auto; min-width: 0; }
.site-header__cta { white-space: nowrap; flex: none; }
.site-header__cta-short { display: none; }

/* ── Burger (only shown at ≤860px, see the Responsive section) ── */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;                 /* 44px touch target */
  height: 44px;
  flex: none;
  margin-right: -10px;         /* optically aligns the icon with the bar edge */
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.25s;
}
.nav-toggle:hover { color: var(--gold); }
.nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nav-toggle svg { display: block; }
.nav-toggle__bar {
  /* transform-box is required: without it the transform origin of an SVG child
     differs per engine and the X ends up visibly off-centre. */
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--top { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar--bot { transform: translateY(-5px) rotate(-45deg); }

/* ── Mobile-Panel ── */
.nav-panel {
  position: absolute;
  top: calc(100% + 1px);                    /* clears the header's 1px border-bottom */
  /* left/right: 0 is correct — the containing block is the header's PADDING box,
     which already spans its full width (the padding sits inside it). Offsetting
     by -(--header-pad) made the panel 2×48px too wide and scrolled the page. */
  left: 0;
  right: 0;
  padding: 8px var(--header-pad) 18px;
  /* Opaque on purpose: the header has backdrop-filter and is therefore a
     backdrop root, so a nested backdrop-filter would blur nothing at all.
     No z-index needed either — the sticky, z-index:50 header already paints
     everything inside it as one unit at the top of the page. */
  background: #F3EAD9;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 24px 48px -28px rgba(var(--ink-rgb), 0.45);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;             /* no scroll chaining to the page */
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
/* Required, not belt-and-braces: [hidden] is a UA-origin rule, so ANY author
   `display` declaration beats it. Without this line, adding a display to the
   panel would leave it permanently visible. */
.nav-panel[hidden] { display: none; }
.nav-panel.is-open { opacity: 1; transform: translateY(0); }

.nav-panel__list { display: flex; flex-direction: column; }
.nav-panel__list a {
  display: block;
  padding: 15px 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.25s;
}
.nav-panel__list a:last-child { border-bottom: 0; }
.nav-panel__list a:hover { color: var(--gold); }
.nav-panel__cta { display: block; margin-top: 16px; text-align: center; }

/* ── Hero (full-bleed, centered copy over image) ── */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: stretch;
  overflow: hidden;
  scroll-margin-top: var(--header-h);
  background:
    radial-gradient(150% 95% at 50% -18%, rgba(217,190,134,0.38) 0%, rgba(217,190,134,0) 46%),
    radial-gradient(120% 120% at 50% 120%, rgba(176,122,52,0.14) 0%, rgba(176,122,52,0) 50%),
    linear-gradient(180deg, #F6EEDC 0%, #EFE2C6 55%, #E7D6B4 100%);
}

/* ── Hero background layers ── */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-stars {
  position: absolute; inset: -2%; width: 104%; height: 104%;
  opacity: 0.85;
  background-image: url('/images/hero-star-tile.png');
  background-repeat: repeat;
  background-size: 140px 140px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%);
}
.hero-glow {
  position: absolute; left: 50%; top: 32%;
  width: min(780px, 94vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,247,228,0.75) 0%, rgba(240,225,190,0.35) 32%, transparent 64%);
  filter: blur(4px);
  animation: hero-glow-breathe 11s ease-in-out infinite;
}
@keyframes hero-glow-breathe {
  0%, 100% { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.06); }
}
/* faint keyhole-arch silhouette, evoking a Damascene doorway */
.hero-arch {
  position: absolute; left: 50%; bottom: -14%;
  width: min(560px, 78vw); height: 86%;
  transform: translateX(-50%);
  border: 1px solid rgba(176,122,52,0.24);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 62% 62% 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}
.hero-arch::before {
  content: ''; position: absolute; inset: 18px;
  border: 1px solid rgba(176,122,52,0.15);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 62% 62% 0 0;
}
.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(130% 120% at 50% 42%, transparent 54%, rgba(122,90,40,0.16) 100%);
}

/* ── Hero split: copy on the left, engraving panel on the right ── */
.hero-left {
  position: relative; z-index: 2; grid-column: 1;
  display: flex; align-items: center; justify-content: flex-start;
  text-align: left;
  padding: clamp(48px, 8vh, 110px) clamp(28px, 4vw, 56px)
           clamp(48px, 8vh, 110px) clamp(40px, 6vw, 120px);
}
.hero-right {
  position: relative; z-index: 1; grid-column: 2;
  display: block; overflow: hidden;
}

.hero-copy { position: relative; z-index: 3; max-width: 560px; margin: 0; }

/* ── Decorative scene (Damascus old-town street) — feathered right-side panel ── */
.hero-figure {
  position: absolute; inset: 0; z-index: 1;
  /* hero-scene.png is pre-cropped so the drawn scene is centered in the file */
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  pointer-events: none; user-select: none;
  mix-blend-mode: multiply; opacity: 0.44;
  /* feather the left/bottom edges so the panel dissolves into the parchment */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 26%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 26%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  /* Zwei Animationen: erst das einmalige Einblenden (1,8s), danach ein langsames,
     endloses Hinein-/Herauszoomen. Beide bewegen `transform` — die zweite steht
     bewusst SPÄTER in der Liste und startet erst bei 2,1s (0,3s Verzögerung +
     1,8s Einblenden), sodass sie die Skalierung nahtlos bei scale(1) übernimmt.
     Bei „prefers-reduced-motion: reduce" schaltet die globale Regel weiter unten
     alle Animationen ab. */
  animation:
    hero-figure-in 1.8s ease 0.3s both,
    hero-figure-zoom 26s ease-in-out 2.1s infinite alternate;
}
@keyframes hero-figure-in {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 0.44; transform: scale(1); }
}
/* Sanftes Ken-Burns-Pulsieren: langsam heran, langsam zurück (alternate). */
@keyframes hero-figure-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* ── Ornamental divider ── */
.hero-divider {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 18px; margin: 2px 0 32px; max-width: 300px;
}
.hero-divider__line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199,169,120,0.55));
}
.hero-divider__line:last-child {
  background: linear-gradient(90deg, rgba(199,169,120,0.55), transparent);
}
.hero-divider__star { flex: none; filter: drop-shadow(0 0 6px rgba(217,190,134,0.35)); }

/* ── Scroll cue ── */
.hero-scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; opacity: 0.75; transition: opacity 0.4s ease;
}
.hero-scroll:hover { opacity: 1; }
.hero-scroll__text {
  font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--gold-muted); font-weight: 600;
}
.hero-scroll__line {
  position: relative; width: 1px; height: 46px;
  background: rgba(var(--gold-rgb),0.28); overflow: hidden;
}
.hero-scroll__line span {
  position: absolute; top: 0; left: 0; width: 100%; height: 40%;
  background: linear-gradient(180deg, transparent, var(--gold));
  animation: hero-scroll-run 2.4s cubic-bezier(0.7,0,0.3,1) infinite;
}
@keyframes hero-scroll-run {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(250%); }
  100% { transform: translateY(250%); }
}
.hero-arabic {
  display: block;
  font-family: 'Aref Ruqaa', serif; direction: rtl;
  font-size: clamp(23px, 2.7vw, 34px);
  color: var(--gold); margin-bottom: 22px; opacity: 0.95;
}
.hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold-muted); margin-bottom: 28px;
}
.hero-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(44px, 6.8vw, 84px); line-height: 1.05; letter-spacing: 0.004em;
  color: #1a2a52; margin-bottom: 24px; text-wrap: balance;
}
.hero-title em {
  font-style: italic; font-weight: 600;
  background: linear-gradient(180deg, #C7A978 0%, #B07A34 55%, #8A5F28 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
}
.hero-sub {
  font-size: clamp(15px, 1.55vw, 18px); line-height: 1.9;
  color: var(--muted); max-width: 480px; margin: 0 0 40px;
}
.hero-actions { display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; }
.hero-actions .btn {
  padding: 17px 36px; letter-spacing: 0.14em;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.hero-actions .btn--primary { box-shadow: 0 10px 28px -12px rgba(138,95,40,0.55); }
.hero-actions .btn:hover { transform: translateY(-2px); }
.hero-actions .btn--primary:hover { box-shadow: 0 16px 34px -12px rgba(138,95,40,0.6); }
.btn--ghost {
  background: rgba(255,255,255,0.28); color: var(--gold);
  border-color: rgba(var(--gold-rgb), 0.55);
  backdrop-filter: blur(2px);
}
.btn--ghost:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }

/* ── Ambient hero atmosphere (slow, never bouncy) ── */
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.fx-rays {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: repeating-linear-gradient(115deg, rgba(176,122,52,0.05) 0px, rgba(176,122,52,0.05) 2px, transparent 2px, transparent 100px);
  animation: rays-breathe 13s ease-in-out infinite;
}
@keyframes rays-breathe { 0%,100% { opacity: 0.35; } 50% { opacity: 0.6; } }
.fx-dust span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(176, 122, 52, 0.4); animation: mote-drift 16s ease-in-out infinite;
}
@keyframes mote-drift {
  0% { transform: translate(0,0); opacity: 0; }
  12% { opacity: 0.6; }
  50% { transform: translate(16px,-70px); opacity: 0.3; }
  88% { opacity: 0.5; }
  100% { transform: translate(-8px,-140px); opacity: 0; }
}
.fx-dust span:nth-child(1){ left:10%; top:76%; animation-delay:-2s;  animation-duration:17s; }
.fx-dust span:nth-child(2){ left:24%; top:64%; animation-delay:-9s;  animation-duration:20s; }
.fx-dust span:nth-child(3){ left:38%; top:82%; animation-delay:-4s;  animation-duration:14s; }
.fx-dust span:nth-child(4){ left:52%; top:60%; animation-delay:-13s; animation-duration:19s; }
.fx-dust span:nth-child(5){ left:66%; top:78%; animation-delay:-7s;  animation-duration:16s; }
.fx-dust span:nth-child(6){ left:80%; top:66%; animation-delay:-11s; animation-duration:21s; }
.fx-dust span:nth-child(7){ left:90%; top:84%; animation-delay:-5s;  animation-duration:15s; }
.fx-petals span {
  position: absolute; top: -6vh; width: 9px; height: 9px; opacity: 0.55;
  background: radial-gradient(ellipse at 30% 30%, #E4CB97, #B07A34 75%);
  border-radius: 60% 40% 60% 40%;
  animation: petal-fall linear infinite, petal-sway ease-in-out infinite alternate;
}
@keyframes petal-fall { 0% { transform: translateY(-6vh) rotate(0deg); } 100% { transform: translateY(106vh) rotate(220deg); } }
@keyframes petal-sway { 0% { margin-left: 0px; } 100% { margin-left: 34px; } }
.fx-petals span:nth-child(1){ left:6%;  animation-delay:-2s,-1s;   animation-duration:23s,5s; }
.fx-petals span:nth-child(2){ left:20%; animation-delay:-9s,-2s;   animation-duration:27s,4.5s; }
.fx-petals span:nth-child(3){ left:35%; animation-delay:-15s,-3s;  animation-duration:20s,5.4s; }
.fx-petals span:nth-child(4){ left:52%; animation-delay:-5s,-1.6s; animation-duration:25s,4.8s; }
.fx-petals span:nth-child(5){ left:68%; animation-delay:-19s,-2.8s; animation-duration:22s,5.2s; }
.fx-petals span:nth-child(6){ left:83%; animation-delay:-11s,-3.6s; animation-duration:26s,4.4s; }

/* ── Reveal-on-scroll ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Impressionen: Bild-Karussell (Stil aus damas-menue-circle4.html) ── */
.reel {
  position: relative; overflow: hidden;
  background: var(--bg); border-top: 1px solid var(--border);
  padding: clamp(64px, 9vh, 104px) 0;
  /* Ziel des Hero-Knopfes „Kategorie wählen" — unter dem klebenden Header landen. */
  scroll-margin-top: var(--header-h);
}
/* ornament layers copied from damas-menue-circle4.html */
.orn { position: absolute; inset: 0; pointer-events: none; }
.orn-corner { position: absolute; pointer-events: none; }
.orn-corner.tl { top: 0; left: 0; }
.orn-corner.tr { top: 0; right: 0; transform: scaleX(-1); }
.orn-corner.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.orn-corner.br { bottom: 0; right: 0; transform: scale(-1, -1); }
.reel__wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 50% 50%,
    rgba(243,234,217,0.80) 0%, rgba(243,234,217,0.42) 55%, transparent 80%);
}
/* merged intro (title + option chips) above the carousel */
.reel-intro {
  position: relative; z-index: 2;
  padding: 0 clamp(28px, 4vw, 64px);
  margin-bottom: clamp(30px, 4.5vh, 52px);
}

/* category header row — matches circle4 .half-head */
.reel-head {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  padding: 0 clamp(28px, 4vw, 64px); margin-bottom: clamp(20px, 3vh, 34px);
}
.reel-head-star { color: var(--gold); font-size: 15px; }
.reel-head-title { font-size: 12px; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.reel-head-count { font-size: 10px; color: var(--muted); letter-spacing: 1px; }
.reel-head-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(176,122,52,0.45), rgba(176,122,52,0.10) 70%, transparent); }

.reel-track {
  position: relative; z-index: 2;
  display: flex; align-items: center; overflow: hidden;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  /* Waagerechtes Wischen zieht das Band (js/reel.js); senkrecht scrollt weiter
     die Seite. cursor: grab zeigt am Rand, dass man ziehen kann. */
  touch-action: pan-y;
  cursor: grab;
}
.reel-track.is-dragging { cursor: grabbing; }
.reel-track.is-dragging .reel-inner { user-select: none; }
/* Beim Ziehen soll kein Bild als Geisterbild mitgezogen werden. */
.reel-inner img { -webkit-user-drag: none; user-select: none; }
.reel-inner { display: flex; gap: 20px; flex-shrink: 0; width: max-content; }
.reel-inner:hover { animation-play-state: paused; }
.reel-inner--left { animation: reel-left var(--dur, 34s) linear infinite; }
@keyframes reel-left { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--tx))); } }

/* item card — matches circle4 .item-card */
.reel-card {
  width: 230px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 18px 16px 16px; border-radius: 12px;
  border: 1px solid rgba(176,122,52,0.20);
  background: rgba(243,234,217,0.60); backdrop-filter: blur(4px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.reel-card:hover { transform: translateY(-5px); box-shadow: 0 10px 28px rgba(176,122,52,0.18); }
/* Anklickbar → öffnet das Detail-Popup (js/reel.js). */
.reel-card[data-reel-card] { cursor: pointer; }
.reel-card[data-reel-card]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.reel-card.featured { border-color: rgba(176,122,52,0.38); background: rgba(176,122,52,0.10); }
.reel-photo {
  width: 116px; height: 116px; border-radius: 50%; flex-shrink: 0;
  border: 2px dashed var(--gold); margin-bottom: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; color: var(--muted); font-size: 9px;
  overflow: hidden; position: relative; background: rgba(176,122,52,0.07);
}
.reel-photo::before {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(176,122,52,0.17); pointer-events: none;
}
.reel-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.reel-photo-ico { opacity: 0.36; }
.reel-badges { display: flex; gap: 4px; justify-content: center; min-height: 16px; margin-bottom: 4px; }
.reel-badge { font-size: 8.5px; font-weight: 700; padding: 1px 5px; border-radius: 2px; flex-shrink: 0; }
.reel-badge--v { color: var(--veg); border: 1.5px solid var(--veg); }
.reel-badge--star { color: var(--gold); border: 1.5px solid var(--gold); }
/* „NEU" gab es im festen Entwurf nicht — die Produkte in der Datenbank kennen
   das Abzeichen aber (Product::BADGES), also braucht es hier eine Farbe. */
.reel-badge--neu { color: var(--offer); border: 1.5px solid var(--offer); }
.reel-name {
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--ink); line-height: 1.25; margin-bottom: 5px;
}
/* Der Name bleibt IMMER navy — auch auf einer Empfehlung. Kenntlich ist die
   allein am ★-Abzeichen, wie auf den Karten der Speisekarte. */
.reel-price { font-size: 20px; font-weight: 700; color: var(--gold); margin-bottom: 6px; }
/* Angebot: NUR der reduzierte Preis, in Rot. 20px fett in --offer misst 5,0:1
   auf dem Pergament, ist also auch als kleiner Text noch sicher lesbar. */
.reel-price--offer { color: var(--offer); }
.reel-desc { font-size: 11.5px; color: var(--muted); font-style: italic; line-height: 1.4; }

/* ── Auswahl: "Wähle dein Lieblingsgericht" — helle Kategorien-Sektion ── */
.picker {
  position: relative;
  background: var(--bg);
  padding: clamp(64px, 9vh, 112px) clamp(28px, 4vw, 60px);
  border-top: 1px solid var(--border);
}
.picker__inner { position: relative; z-index: 2; width: 100%; }
.picker__eyebrow {
  display: inline-flex; align-items: baseline; gap: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-ink);
  margin-bottom: 18px;
}
.picker__num { color: var(--muted); opacity: 0.7; letter-spacing: 0.12em; }
.picker__title {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(38px, 5.4vw, 66px); line-height: 1.04; color: #1a2a52;
  margin: 0 0 clamp(30px, 4.5vh, 48px); text-wrap: balance;
}
.picker__title em { font-style: italic; font-weight: 600; color: var(--gold); }
.picker__chips { display: flex; flex-wrap: wrap; gap: 14px; }
.picker__chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 30px;
  background: #FBF7EE; color: var(--ink);
  border: 1px solid rgba(var(--gold-rgb), 0.16);
  font-family: 'DM Sans', sans-serif; font-size: 14px; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 6px 16px -9px rgba(var(--ink-rgb), 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.picker__chip svg { width: 13px; height: 13px; opacity: 0.55; transition: opacity 0.2s ease, transform 0.2s ease; }
.picker__chip:hover {
  background: var(--gold); color: var(--bg); border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(138, 95, 40, 0.5);
}
.picker__chip:hover svg { opacity: 1; transform: translateY(-2px); }
/* Gewählte Kategorie des Karussells — gleiche Optik wie der Hover, damit klar
   ist, dass beides derselbe Zustand ist. */
.picker__chip.is-active {
  background: var(--gold); color: var(--bg); border-color: var(--gold);
}
.picker__chip.is-active svg { opacity: 1; }

/* Während das neue Band geholt wird: der alte Streifen läuft weiter, wird aber
   blass — darüber liegt der Lader. */
.reel-track.is-loading .reel-inner { opacity: 0.25; }
.reel-track .reel-inner { transition: opacity 0.2s ease; }

/* Der neue Streifen steht zwei Sekunden still, bevor er losläuft (js/reel.js).
   Gehalten wird über den Abspielzustand, nicht durch Entfernen der Animation —
   so beginnt sie exakt bei 0 und ruckelt beim Start nicht. */
.reel-inner.is-held { animation-play-state: paused; }

/* ── Ladeanzeige ──
   Liegt mittig über dem Band. Der Ring dreht sich; steht die Bewegung still
   (prefers-reduced-motion oder abgeschaltete Animationen), trägt die
   Beschriftung „Lädt …" die Aussage allein. */
.reel-loader {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.reel-track.is-loading .reel-loader { opacity: 1; }
.reel-loader__ring {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(var(--gold-rgb), 0.25);
  border-top-color: var(--gold);
  animation: reel-spin 0.8s linear infinite;
}
.reel-loader__text {
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-ink);
}
@keyframes reel-spin { to { transform: rotate(360deg); } }

/* ── Ansagekarte zwischen zwei Kategorien ──
   Baut auf .reel-card auf (gleiche 230px Breite — die Schleife rechnet mit einer
   festen Schrittweite je Karte), sieht aber bewusst anders aus: gefüllt statt
   umrandet, kein Foto, keine Zahlen. Sie soll im Vorbeifahren als „hier beginnt
   etwas Neues" gelesen werden, nicht als Gericht. */
.reel-card--switch {
  justify-content: center; gap: 10px;
  border-style: dashed; border-color: rgba(var(--gold-rgb), 0.45);
  background: rgba(var(--gold-rgb), 0.12);
}
.reel-card--switch:hover { transform: none; box-shadow: none; }
.reel-switch__eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold-ink);
}
.reel-switch__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 600; line-height: 1.15;
  color: #1a2a52; text-wrap: balance;
}
.reel-switch__rule { color: var(--gold); }
.reel-switch__logo { width: 64px; height: auto; margin-top: 2px; opacity: 0.92; }

/* ── Steuerung des Karussells ──
   Sitzt rechts in der Kopfzeile. Wird erst von js/reel.js sichtbar gemacht
   ([hidden] fällt dann weg): ohne Skript bewegt sich das Band ohnehin von allein
   und die Knöpfe hätten nichts zu steuern. */
.reel-ctl { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.reel-ctl[hidden] { display: none; }
.reel-ctl__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex-shrink: 0;
  border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(var(--gold-rgb), 0.32);
  background: #FBF7EE; color: var(--gold-ink);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.reel-ctl__btn svg { width: 18px; height: 18px; }
.reel-ctl__btn:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); transform: translateY(-1px); }
.reel-ctl__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.reel-ctl__btn:active { transform: translateY(0); }
/* Aktive Laufrichtung: der gedrückte Pfeil bleibt gefüllt, damit man sieht,
   wohin (und dass) das Band gerade zieht. */
.reel-ctl__btn.is-active { background: var(--gold); color: var(--bg); border-color: var(--gold); }
/* Pause-/Weiter-Knopf zeigt genau EIN Symbol: läuft das Band → Pause-Symbol,
   steht es → Play-Symbol. Gesteuert über aria-pressed. */
.reel-ctl__ico-play { display: none; }
.reel-ctl__btn--toggle[aria-pressed="true"] .reel-ctl__ico-pause { display: none; }
.reel-ctl__btn--toggle[aria-pressed="true"] .reel-ctl__ico-play { display: block; }

/* ── Detail-Popup einer Gerichtkarte ──
   Vollflächige, mittig zentrierte Überlagerung. z-index über allem, damit es
   auch über dem klebrigen Header liegt. */
.reel-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 4vw, 32px);
}
.reel-modal[hidden] { display: none; }
.reel-modal__backdrop {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(var(--ink-rgb), 0.62);
  backdrop-filter: blur(3px);
  animation: reel-modal-fade 0.2s ease;
}
.reel-modal__dialog {
  position: relative; z-index: 1;
  width: min(94vw, 460px); max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  box-shadow: 0 24px 60px -18px rgba(var(--ink-rgb), 0.55);
  animation: reel-modal-pop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes reel-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes reel-modal-pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

.reel-modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  border-radius: 50%; border: none;
  background: rgba(var(--ink-rgb), 0.55); color: #fff;
  transition: background 0.15s ease, transform 0.15s ease;
}
.reel-modal__close svg { width: 20px; height: 20px; }
.reel-modal__close:hover { background: rgba(var(--ink-rgb), 0.8); transform: rotate(90deg); }
.reel-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.reel-modal__media {
  position: relative; flex-shrink: 0;
  aspect-ratio: 16 / 11; width: 100%;
  background: rgba(var(--gold-rgb), 0.10);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.18);
}
.reel-modal__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-modal__badges { display: flex; gap: 6px; margin-bottom: 12px; }
.reel-modal__badges:empty { display: none; }
.reel-modal__badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: var(--bg); }
.reel-modal__badge--star { color: var(--gold); border: 1.5px solid var(--gold); }
.reel-modal__badge--v { color: var(--veg); border: 1.5px solid var(--veg); }
.reel-modal__badge--neu { color: var(--offer); border: 1.5px solid var(--offer); }

.reel-modal__body { padding: 20px clamp(20px, 4vw, 28px) clamp(22px, 4vw, 28px); overflow-y: auto; }
.reel-modal__name {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(26px, 5vw, 34px); line-height: 1.1; color: #1a2a52;
  margin: 0 0 10px; text-wrap: balance;
}
.reel-modal__price { font-size: 24px; font-weight: 700; color: var(--gold); margin-bottom: 14px; }
.reel-modal__price del { color: var(--muted); font-weight: 500; font-size: 18px; margin-right: 10px; }
.reel-modal__price ins { color: var(--offer); text-decoration: none; }
.reel-modal__desc { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0; }
.reel-modal__desc:empty { display: none; }

/* Solange das Popup offen ist: Seite nicht scrollen und das Band anhalten.
   !important schlägt den Abspielzustand, den js/reel.js an .reel-inner setzt. */
body.reel-modal-open { overflow: hidden; }
body.reel-modal-open .reel-inner { animation-play-state: paused !important; }

.menu__category { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ── "Finde dein Gericht" — dark green search band (second section) ── */
/* ⚠️ z-index MUSS hier stehen, sonst zeichnet die FOLGENDE Sektion über die
   Suchergebnisse — auf dem Handy gut sichtbar, weil die Liste dort über den
   Abschnittsrand hinausragt.

   Warum das z-index: 30 an .find__results allein nicht reicht: .find__inner
   trägt .reveal, und .reveal.is-visible setzt transform: translateY(0) — eine
   Transformation, auch wenn sie nichts verschiebt. Damit ist .find__inner ein
   eigener Stapelkontext, und die 30 gelten nur INNERHALB davon. Nach außen
   zählt der Wert von .find__inner selbst (2) — und .reel-intro der nächsten
   Sektion hat ebenfalls 2 und steht später im Dokument, gewinnt also.
   Hier bekommt die ganze Sektion einen Rang über allem, was danach kommt
   (höchster Wert sonst: 3; die klebende Kopfzeile liegt mit 50 darüber). */
.find {
  position: relative; z-index: 4;
  padding: clamp(74px, 12vh, 132px) var(--content-pad);
  color: #EAE4D0;
  /* Dasselbe Navy wie die Nacht-Sektion — bewusst var(--ink) statt eines
     zweiten Hex-Werts, sonst laufen die beiden Sektionen auseinander, sobald
     der Grundton oben in :root einmal angepasst wird. (Vorher: #2e3c24, ein
     Olivgrün, das als einziger Ton der Seite außerhalb der Palette lag.) */
  background: var(--ink);
  border-top: 1px solid rgba(199,169,120,0.22);
  border-bottom: 1px solid rgba(0,0,0,0.22);
  scroll-margin-top: var(--header-h);
}
.find__inner { position: relative; z-index: 2; width: 100%; text-align: left; }
/* hängende Girlande — volle Breite oben in der Sektion */
.find__garland {
  position: relative; z-index: 2; overflow: hidden;
  margin: calc(-1 * clamp(34px, 6vh, 72px)) calc(-1 * var(--content-pad)) clamp(22px, 4vh, 44px);
}
.find__ornament {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  width: min(420px, 46vw); height: auto; pointer-events: none;
  opacity: 0.5; display: block;
  /* recolor the dark line-art into a warm gold so it reads on the green */
  filter: brightness(0) invert(0.82) sepia(0.55) saturate(3) hue-rotate(357deg) brightness(1.05);
}
.find__eyebrow {
  display: inline-flex; align-items: baseline; gap: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 20px;
}
.find__num { color: rgba(234,228,208,0.5); letter-spacing: 0.12em; }
.find__title {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(40px, 6vw, 74px); line-height: 1.03; color: #F1EAD6;
  margin: 0 0 clamp(34px, 5vh, 54px); text-wrap: balance;
}
.find__title em { font-style: italic; font-weight: 600; color: var(--gold-soft); }

/* search bar */
/* Breiter als die ursprünglichen 620px: seit die Vorschläge aus der Datenbank
   kommen, stehen hier echte Gerichtsnamen mit Beschreibung — die brauchen Platz,
   und die Ergebnisliste übernimmt die Breite des Feldes (left/right: 0).
   min() statt einer festen Breite, damit auf schmalen Fenstern nichts anstößt. */
.find__search { position: relative; max-width: min(880px, 100%); margin: 0 auto; }
.find__bar {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 4px 4px 4px 24px;
  background: #FBF7EE; border-radius: 40px;
  box-shadow: 0 20px 52px -20px rgba(0,0,0,0.6), 0 0 30px -6px rgba(199,169,120,0.4);
}
.find__bar::before {           /* gold gradient ring */
  content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: 42px;
  background: linear-gradient(90deg, #C7A978, #B07A34 48%, #E4C88E);
}
.find__icon { color: var(--gold); flex: none; }
.find__input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--ink);
  padding: 18px 22px 18px 4px;
}
.find__input::placeholder { color: #A89B80; }

/* Ladeanzeige im Suchfeld. Rechts im Feld, damit sie nicht mit der Lupe links
   konkurriert, und mit fester Breite, damit der Text beim Ein- und Ausblenden
   nicht springt. */
.find__spinner {
  width: 20px; height: 20px; flex: none; margin-right: 18px;
  border-radius: 50%;
  border: 2px solid rgba(176,122,52,0.22);
  border-top-color: var(--gold);
  animation: find-spin 0.7s linear infinite;
}
/* ⚠️ Nötig, weil eine eigene display-Angabe die UA-Regel für [hidden] schlagen
   würde — derselbe Stolperstein wie bei .btn im Admin. Hier explizit, damit ein
   späteres display: block am Spinner ihn nicht dauerhaft sichtbar macht. */
.find__spinner[hidden] { display: none; }
@keyframes find-spin { to { transform: rotate(360deg); } }
/* Nicht abschalten, sondern beruhigen: ohne Bewegung wäre nicht erkennbar, dass
   überhaupt etwas passiert — und genau das soll die Anzeige ja sagen. */
@media (prefers-reduced-motion: reduce) {
  .find__spinner { animation-duration: 2.2s; }
}

/* Ladezeile in der Ergebnisliste — nur beim ERSTEN Suchlauf, wenn noch keine
   Treffer dastehen, die man stehen lassen könnte. */
/* display: flex überschreibt hier ebenfalls das Raster von .find__result —
   aus demselben Grund wie bei --empty, siehe die Notiz dort. */
.find__result--loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 16px; color: var(--muted); font-size: 14px; cursor: default; }
.find__result--loading:hover { background: transparent; }
.find__result--loading::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(176,122,52,0.22); border-top-color: var(--gold);
  animation: find-spin 0.7s linear infinite;
}

/* live results */
.find__results {
  position: absolute; left: 0; right: 0; top: calc(100% + 12px); z-index: 30;
  margin: 0; padding: 6px; list-style: none; text-align: left;
  background: #FBF7EE; border-radius: 18px;
  box-shadow: 0 26px 64px -20px rgba(0,0,0,0.6);
  max-height: 360px; overflow-y: auto;
}
/* Drei Spalten: Bild — Text — Preis. Benannte Bereiche statt grid-column, weil
   das Bild über ALLE drei Textzeilen läuft; mit Zahlen wäre bei jeder neuen
   Zeile nachzurechnen. */
.find__result {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb cat  cat"
    "thumb name price"
    "thumb desc desc";
  gap: 2px 14px;
  padding: 12px 16px; border-radius: 12px; cursor: pointer;
  transition: background 0.15s ease;
}
.find__result:hover, .find__result.is-active { background: rgba(176,122,52,0.12); }
.find__result-thumb {
  grid-area: thumb; align-self: center;
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(176,122,52,0.07);
}
.find__result-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Platzhalter: gestrichelter Goldring wie auf den TV-Tafeln — ein echtes Foto
   trägt sich selbst und bekommt den Ring deshalb NICHT. */
.find__result-thumb--empty { border: 1.5px dashed rgba(176,122,52,0.45); color: var(--gold-muted); }
.find__result-cat {
  grid-area: cat; font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-muted); margin-bottom: 1px;
}
.find__result-name { grid-area: name; font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 600; color: var(--ink); }
.find__result-price { grid-area: price; align-self: center; font-size: 14px; font-weight: 600; color: var(--gold); white-space: nowrap; }
.find__result-desc { grid-area: desc; font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 2px; }
.find__result mark { background: rgba(176,122,52,0.28); color: inherit; border-radius: 2px; padding: 0 1px; }
/* ⚠️ display MUSS zurückgesetzt werden: .find__result ist ein Raster mit festen
   Bereichen, und der nackte Text dieser Zeile würde sonst als anonymes Element
   in die erste freie Zelle rutschen — die 52px schmale Bildspalte. */
.find__result--empty { display: block; padding: 18px 16px; text-align: center; color: var(--muted); font-size: 14px; cursor: default; }
.find__result--empty:hover { background: transparent; }

/* quick-search chips */
.find__quick {
  margin-top: 24px; display: flex; align-items: center; justify-content: center;
  gap: 10px 14px; flex-wrap: wrap;
}
.find__quick-label { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(234,228,208,0.5); }
.find__chip {
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: #E6DEC8;
  background: transparent; border: 1px solid rgba(199,169,120,0.35);
  padding: 7px 17px; border-radius: 30px; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Schriftfarbe im Hover war ein Dunkelgrün, passend zum alten grünen Grund.
   Auf Navy trägt --ink denselben Kontrast auf dem goldenen Chip. */
.find__chip:hover { background: var(--gold-soft); color: var(--ink); border-color: var(--gold-soft); }

/* flash the matching dish when a result is chosen */
.menu__item--hit { animation: menu-hit 2.4s ease; border-radius: 6px; }
@keyframes menu-hit {
  0%   { background: rgba(176,122,52,0.22); box-shadow: 0 0 0 8px rgba(176,122,52,0.10); }
  70%  { background: rgba(176,122,52,0.14); box-shadow: 0 0 0 8px rgba(176,122,52,0.05); }
  100% { background: transparent; box-shadow: 0 0 0 8px transparent; }
}

/* ── Nacht · Kardamom (dunkles Band) ── */
.night {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--ink);
  color: #EAE4D0;
  border-top: 1px solid rgba(199,169,120,0.18);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  scroll-margin-top: var(--header-h);
  overflow: hidden;
}
.night__text {
  position: relative; z-index: 2;
  padding: clamp(56px, 9vh, 108px) clamp(30px, 6vw, 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.night__rule {
  display: block;
  width: 46px; height: 1px;
  background: var(--gold-soft);
  opacity: 0.7;
  margin-bottom: 26px;
}
.night__eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 26px;
}
.night__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.04;
  color: #F0E9D6;
  margin-bottom: 26px;
}
.night__lead {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.75;
  color: rgba(234,228,208,0.72);
  max-width: 34ch;
  margin-bottom: 48px;
}
.night__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  align-self: center;
}
.night__icon { width: 58px; height: auto; color: var(--gold-soft); }
.night__ar {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--gold-soft);
  margin-top: 4px;
}
.night__mark-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-muted);
}
.night__photo {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
  margin: 0;
  overflow: hidden;
  border-left: 1px solid rgba(199,169,120,0.12);
  background:
    repeating-linear-gradient(135deg,
      rgba(199,169,120,0.06) 0px, rgba(199,169,120,0.06) 1px,
      transparent 1px, transparent 13px),
    #131f36;
}
/* Die Zeichnung ist schwarze Tusche auf Weiß — vor diesem Marineblau wäre sie
   als weißer Kasten sichtbar und die Linien fast unsichtbar. invert(1) dreht
   sie zu hellen Linien auf Schwarz, screen macht dieses Schwarz durchsichtig:
   übrig bleibt eine Lichtzeichnung auf der Nacht. (multiply, wie auf der
   Bewertungsseite, funktioniert nur auf hellem Grund.) */
.night__photo picture { display: block; width: 100%; margin: auto 0; }
.night__photo img {
  display: block; width: 100%; height: auto;
  max-height: 62vh; object-fit: contain;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: 0.2;
}
/* Unten im Feld, nicht direkt unter der Zeichnung: margin-top:auto sticht das
   justify-content:center des Containers für genau dieses Element aus. */
.night__photo-cap {
  margin-top: auto;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(199,169,120,0.5);
  padding: 0 20px;
  text-align: center;
}
@media (max-width: 860px) {
  .night { grid-template-columns: 1fr; }
  .night__photo { min-height: 220px; order: 2; border-left: 0; border-top: 1px solid rgba(199,169,120,0.12); }
  .night__text { order: 1; }
}

/* ── Section shared ── */
.section { position: relative; padding: 100px var(--content-pad); scroll-margin-top: var(--header-h); }
.section__head { text-align: center; max-width: 640px; margin: 0 auto; }
.section__title { font-size: 46px; color: var(--ink); margin: 0 0 4px; letter-spacing: -0.012em; text-wrap: balance; }

/* ── Story / Geschichte ── */
.story { background: var(--bg); }
.story__grid {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: center;
}
/* ⚠️ clamp statt fester 44px: die Überschrift hatte als einzige der Seite KEINE
   Anpassung nach unten und lief auf einem 320px-Display aus dem Satzspiegel.
   Der Höchstwert bleibt 44px, am Desktop ändert sich also nichts. */
.story__title { font-size: clamp(30px, 4.2vw, 44px); margin: 0 0 26px; letter-spacing: -0.012em; text-wrap: balance; }
.story__text { font-size: 16px; line-height: 1.85; color: var(--ink); margin: 0 0 20px; }
.story__dropcap {
  float: left;
  font-family: 'Cormorant Garamond', serif;
  font-size: 74px;
  line-height: 0.72;
  padding: 6px 12px 0 0;
  color: var(--gold);
}
.story__fountain { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 20px; }
.story__fountain-ar { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--gold); direction: rtl; margin-top: 2px; }
.story__fountain-label { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-ink); }

.story__visual {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.story__visual img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
  filter: drop-shadow(0 16px 34px rgba(var(--ink-rgb), 0.16));
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
}
.story__visual:hover img {
  transform: scale(1.035);
  filter: drop-shadow(0 22px 46px rgba(var(--ink-rgb), 0.22));
}
.story__visual-caption {
  margin-top: 16px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-muted);
}

/* ── Speisekarte / Menu ── */
.menu { background: var(--bg); border-top: 2px solid var(--gold); }
/* warm radial wash — matches damas-menue-circle4.html background */
.menu__wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 50% 50%,
    rgba(243,234,217,0.80) 0%, rgba(243,234,217,0.42) 55%, transparent 80%);
}
.menu__inner { position: relative; z-index: 2; max-width: var(--content-max); margin: 0 auto; }
.menu__category {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 30px;
  align-items: start;
  margin-bottom: 40px;
}
.menu__category-label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 26px;
  color: var(--gold);
  padding-top: 4px;
  /* Es ist ein <button> (Akkordeon-Schalter am Handy), sieht am Desktop aber aus
     wie die frühere Beschriftung: Reset + linksbündig, Zeiger erst am Handy. */
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; width: 100%; margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-align: left; line-height: 1.2; cursor: default;
}
.menu__category-label:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
/* Der Pfeil erscheint nur, wenn js/app.js das Akkordeon aktiviert (am Handy). */
.menu__cat-chevron { display: none; flex-shrink: 0; color: var(--gold); }
.menu__item {
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.18);
  padding: 14px 0 14px 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease;
}
.menu__item:hover {
  transform: translateX(8px);
  border-color: rgba(var(--gold-rgb), 0.45);
}
.menu__item-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.menu__item-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 23px; color: var(--ink); }
.menu__item-price { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 22px; letter-spacing: 0.03em; color: var(--gold); white-space: nowrap; }
/* Angebot: regulärer Preis kleiner + gedämpft durchgestrichen, Angebotspreis in
   Rot (--offer). Token, damit es auf dunklem Grund mit umkippt. */
.menu__item-price--old { color: var(--muted); font-weight: 500; font-size: 0.8em; margin-right: 6px; }
.menu__item-price--offer { color: var(--offer); }
.menu__item-desc { font-size: 14px; color: rgba(var(--ink-rgb), 0.68); margin-top: 4px; }

.menu__link {
  display: inline-block;
  margin-top: 20px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.menu__link:hover { color: var(--ink); border-color: var(--ink); }
.menu__link-wrap { text-align: center; margin-top: 8px; }

/* ── Speisekarte-Akkordeon (nur Handy) ──
   Greift ausschließlich, wenn js/app.js .menu.is-enhanced gesetzt hat — ohne
   Skript bleibt jede Kategorie offen und der Kopf eine gewöhnliche Überschrift.
   Am Desktop (über 640px) ist dieser Block wirkungslos: alles steht offen. */
@media (max-width: 640px) {
  .menu.is-enhanced .menu__category-label {
    cursor: pointer;
    padding: 14px 2px;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.30);
  }
  .menu.is-enhanced .menu__cat-chevron {
    display: inline-block;
    transition: transform 0.28s ease;
  }
  /* Offen = Pfeil zeigt nach oben; zu = nach unten (das übliche „hier aufklappen"). */
  .menu.is-enhanced .menu__category-label[aria-expanded="true"] .menu__cat-chevron {
    transform: rotate(180deg);
  }
  /* Zugeklapptes Panel ausblenden. Nachbar-Selektor: Schalter + Panel sind
     Geschwister im .menu__category-Raster. */
  .menu.is-enhanced .menu__category-label[aria-expanded="false"] + .menu__cat-panel {
    display: none;
  }
  .menu.is-enhanced .menu__cat-panel { padding-top: 4px; }
}

/* ── Galerie / Gallery ── */
.gallery { background: var(--bg-alt); }
.gallery__grid {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 36px 28px;
}
.scene-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 14px -9px rgba(var(--ink-rgb), 0.30);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.45s ease, border-color 0.45s ease, opacity 0.8s ease;
}
.scene-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 28px 48px -22px rgba(var(--ink-rgb), 0.40);
  border-color: rgba(var(--gold-rgb), 0.5);
}
.scene-card .illustration-frame { background: var(--bg-alt); }
.scene-card__caption {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
}

/* Staggered card entrance across the grid */
.gallery__grid .reveal:nth-child(3n+2) { transition-delay: 0.08s; }
.gallery__grid .reveal:nth-child(3n)   { transition-delay: 0.16s; }

/* ── Illustration scaling system (shared by gallery scenes + Bab Touma visual) ── */
.illustration-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 760 / var(--nh, 200);
}
.illustration-stage {
  position: absolute;
  top: 0; left: 0;
  width: 760px;
  height: calc(var(--nh, 200) * 1px);
  transform-origin: top left;
}
.scene-card__caption-ar {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 4px;
  direction: rtl;
}
.scene-card__caption-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

/* ── Footer / Kontakt ── */
.footer { background: var(--ink); color: var(--bg); padding: 80px 60px 40px; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 54px;
  border-bottom: 1px solid rgba(243, 234, 217, 0.18);
}
.footer__brand {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 18px;
  color: var(--bg);
  /* DE-Monogramm in Pergament links neben der Wortmarke — gleiche Farbe. */
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__brand-logo { height: 40px; width: auto; display: block; }
.footer__desc { font-size: 14px; line-height: 1.8; color: rgba(243, 234, 217, 0.75); max-width: 260px; }
.footer__label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 14px;
}
.footer__info { font-size: 15px; line-height: 1.9; color: rgba(243, 234, 217, 0.9); }
.footer__info a { text-decoration: none; color: inherit; }
.footer__info a:hover { color: var(--gold-soft); }

/* ── Social ── */
.footer__socials { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(243, 234, 217, 0.28);
  border-radius: 50%;
  color: rgba(243, 234, 217, 0.9);
  transition: color 0.25s, border-color 0.25s;
}
/* a. prefix: only the real link reacts — the placeholder <span> must not look clickable */
a.footer__social:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.footer__social--off { opacity: 0.45; }
.footer__social svg { display: block; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 26px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(243, 234, 217, 0.55);
}

/* ── Reservierung & Kontakt ── */
.contact { background: var(--bg); border-top: 1px solid var(--border); }
.contact__inner {
  position: relative; z-index: 2;
  max-width: var(--content-max); margin: 0 auto;
  display: grid; grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(40px, 5vw, 84px); align-items: start;
}
.contact__title {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(34px, 4vw, 48px); line-height: 1.08; color: var(--ink);
  margin: 6px 0 16px; letter-spacing: -0.01em; text-wrap: balance;
}
.contact__lead { font-size: 16px; line-height: 1.8; color: var(--muted); margin: 0 0 28px; max-width: 420px; }
.contact__details { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.contact__details li { display: flex; flex-direction: column; gap: 3px; font-size: 15px; color: var(--ink); }
.contact__details span { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); }
.contact__details a { color: var(--gold-ink); text-decoration: none; }
.contact__details a:hover { text-decoration: underline; }

.contact__form { position: relative; }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.contact__row .field { margin-bottom: 0; }
/* ⚠️ Der zweite Selektor ist NICHT redundant: auf /bewertungen ist das Sternefeld
   ein <fieldset class="field"> und seine Beschriftung steht in <legend><span>,
   also ein ENKEL von .field. Mit nur `.field > span` traf die Regel dort nichts —
   „Ihre Sterne" stand als 16px-Fließtext zwischen drei 11px-Versalbeschriftungen.
   Farbe: --gold-ink statt --gold-muted (3.01:1 → 4.69:1, siehe :root). */
.field > span,
.field > legend > span { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); }
.field input, .field textarea {
  font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 22px; color: var(--ink);
  background: #FBF7EE; border: 1px solid rgba(var(--gold-rgb), 0.28);
  border-radius: 6px; padding: 12px 14px; width: 100%; resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.14);
}
.field input::placeholder, .field textarea::placeholder { color: #A89B80; }
.contact__submit { margin-top: 6px; cursor: pointer; }
.contact__submit:disabled { opacity: 0.6; cursor: default; }
.contact__note { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--veg); }

/* Server response to a submitted reservation: confirmation / validation summary */
.contact__note--ok, .contact__note--error {
  margin: 0 0 22px; padding: 13px 16px; border-radius: 8px; border: 1px solid;
}
.contact__note--ok {
  color: #4F5A2E; background: rgba(110, 123, 61, 0.10); border-color: rgba(110, 123, 61, 0.38);
}
.contact__note--error {
  color: #B23A48; background: rgba(178, 58, 72, 0.08); border-color: rgba(178, 58, 72, 0.32);
}

/* Per-field validation message + invalid input outline */
.field__optional {
  font-weight: 400; letter-spacing: 0.06em; text-transform: none;
  color: var(--muted); opacity: 0.8;
}
.field__error { display: block; font-size: 13px; font-style: normal; color: #B23A48; line-height: 1.5; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: rgba(178, 58, 72, 0.55);
}
.field input[aria-invalid="true"]:focus, .field textarea[aria-invalid="true"]:focus {
  border-color: #B23A48; box-shadow: 0 0 0 3px rgba(178, 58, 72, 0.14);
}


/* ═══════════════════════════════════════════════════════════════════════
   BEWERTUNGSSEITE  (/bewertungen)
   Nutzt die .reel-Sektion und die .picker__-Typografie der Startseite; hier
   steht nur, was eine eigenständige Seite zusätzlich braucht.
   ═══════════════════════════════════════════════════════════════════════ */

/* Zwei GLEICH BREITE Hälften — 1fr 1fr, wie die Hero-Sektion der Startseite.
   Das Raster sitzt auf der Sektion selbst, damit jede Hälfte die volle Höhe
   füllt; ein Raster innerhalb eines schmalen Mittelkastens würde beide Spalten
   in der Seitenmitte zusammendrängen. */
.review {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: clamp(40px, 6vh, 80px) 0;
}

/* Beide Hälften über die Ornamentebenen heben: reel-bg malt auf z-index 0 und 1. */
.review__form-col,
.review__art { position: relative; z-index: 2; min-width: 0; }

/* .reel-intro bringt eigenen Seitenabstand mit — hier sitzt er auf der Spalte,
   sonst addieren sich beide. */
.review .reel-intro { padding: 0; margin-bottom: clamp(20px, 3vh, 32px); }
.review__form-col { padding: 0 clamp(24px, 3vw, 56px); }

.review__lead {
  font-size: 16px; line-height: 1.8; color: var(--muted);
  max-width: 52ch; margin: 0;
}
.review__body { width: 100%; max-width: 620px; }

/* Zeichnung mittig in ihrer Hälfte. `contain` statt `cover`: eine Strichgrafik
   darf nicht angeschnitten werden, nur skaliert. */
.review__art {
  margin: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 clamp(20px, 2.5vw, 48px);
}
.review__art picture { display: block; width: 100%; }
.review__art img {
  display: block; width: 100%; height: auto;
  max-height: 72vh; object-fit: contain;
  /* Strichgrafik auf weißem Grund: multiply blendet das Weiß aus, damit die
     Zeichnung auf dem Pergament liegt statt in einem weißen Kasten. */
  mix-blend-mode: multiply;
  /* Halbtransparent, damit die Zeichnung als Hintergrundmotiv wirkt und dem
     Formular nicht die Aufmerksamkeit nimmt. */
  opacity: 0.5;
}
.review__art-cap {
  margin-top: 12px; text-align: center;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 15px; color: var(--muted);
}

/* Unter 900px fällt die Zeichnung weg, statt das Formular zu quetschen —
   sie ist Beiwerk und weicht als erstes. */
@media (max-width: 900px) {
  .review { grid-template-columns: 1fr; }
  .review__art { display: none; }
  .review__body { max-width: none; }
}

/* Honigtopf — unsichtbar, aber NICHT display:none: manche Bots überspringen
   genau das und füllen den Rest trotzdem aus. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Sternebewertung (reines CSS, siehe reviews/partials/rating.blade.php) ──
   Das <input> liegt IM <label>, siehe Kommentar dort.

   Die Färbung ist rein additiv: leer ist der Grundzustand, gold wird nur
   dazugemalt. Die frühere Fassung färbte erst alle fünf und nahm die hinteren
   wieder weg — schlug das Zurücknehmen fehl, standen dauerhaft fünf Sterne. */
.rating { border: 0; padding: 0; }
.rating legend { padding: 0; margin-bottom: 7px; }
.rating__stars { display: flex; gap: 6px; }

.rating__star {
  position: relative;            /* Bezugsrahmen für das versteckte Input */
  cursor: pointer; line-height: 0; border-radius: 4px;
  color: #D8CBB0;                /* Grundzustand: leer */
  transition: color 0.15s ease, transform 0.15s ease;
}
.rating__star svg { width: 34px; height: 34px; display: block; }

/* sichtbar versteckt, NICHT display:none — sonst raus aus der Tabulatorreihenfolge */
.rating__input,
.rating__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Gewählt: der markierte Stern UND jeder davor.
   „:has(~ …)“ liest sich als „hat einen späteren Geschwisterstern, in dem das
   Input markiert ist“ — trifft also genau die Sterne links davon. */
.rating__star:has(.rating__input:checked),
.rating__star:has(~ .rating__star .rating__input:checked) { color: var(--gold); }

/* Hover-Vorschau. Setzt bewusst zuerst zurück, weil sie den gewählten Zustand
   überschreiben muss; die beiden Malregeln tragen dasselbe Präfix und sind
   damit spezifischer als das Zurücksetzen. */
.rating__stars:has(.rating__star:hover) .rating__star { color: #D8CBB0; }
.rating__stars:has(.rating__star:hover) .rating__star:hover,
.rating__stars:has(.rating__star:hover) .rating__star:has(~ .rating__star:hover) { color: var(--gold-soft); }
.rating__star:hover { transform: translateY(-2px); }

/* Der Fokus liegt auf dem versteckten Input — der Ring gehört aufs Label. */
.rating__star:has(.rating__input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.rating--invalid .rating__star { color: rgba(178, 58, 72, 0.45); }

/* aktive Seite in der Kopfnavigation */
.site-nav a.is-active { color: var(--gold); }

/* ── Responsive ── */
@media (max-width: 980px) {
  /* stack the hero: centered copy over a faint full backdrop */
  .hero { grid-template-columns: 1fr; }
  .hero-left { grid-column: 1; justify-content: center; text-align: center; }
  .hero-copy { margin: 0 auto; max-width: 620px; }
  .hero-divider, .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-divider { justify-content: center; }
  .hero-actions { justify-content: center; }
  .hero-right { position: absolute; inset: 0; z-index: 0; grid-column: 1; }
  /* Auf dem Handy steht der Text ÜBER der Szene. Die dunklen Stellen (Bögen,
     Minarett) verschluckten sonst den Fließtext — daher deutlich blasser UND ein
     weicher Pergament-Schleier hinter der Copy, der der Schrift einen ruhigen,
     gleichmäßigen Grund gibt (dunkler Text allein reicht nicht, wenn der
     Hintergrund fleckig ist). Der Verlauf blendet zu den Rändern aus, wirkt also
     wie ein sanfter Schein statt einer harten Karte. */
  .hero-figure { opacity: 0.11; }
  .hero-copy {
    background: radial-gradient(125% 85% at 50% 42%,
      rgba(243, 234, 217, 0.78) 0%, rgba(243, 234, 217, 0.55) 50%, rgba(243, 234, 217, 0) 100%);
    border-radius: 26px;
  }
  .hero-sub { color: var(--ink-soft); }

  /* 2.webp wird auf dem Handy zur blassen Illustration HINTER dem Text (wie die
     Hero-Szene), statt als eigener Block darüber zu stehen. */
  .story__grid { grid-template-columns: 1fr; }
  .story__visual {
    position: absolute; inset: 0; z-index: 0;
    max-width: none; margin: 0; justify-content: center;
    pointer-events: none;
  }
  .story__visual img {
    width: 100%; height: 100%; max-height: none; object-fit: contain;
    opacity: 0.28; filter: none;
  }
  .story__visual-caption { display: none; }
  /* Textspalte über das Bild heben; ein weicher Pergament-Schleier hält den
     Fließtext klar lesbar, lässt die Zeichnung aber durchscheinen. */
  .story__grid > div:not(.story__visual) {
    position: relative; z-index: 1;
    background: radial-gradient(120% 82% at 50% 45%,
      rgba(243, 234, 217, 0.66) 0%, rgba(243, 234, 217, 0.40) 55%, rgba(243, 234, 217, 0) 100%);
    border-radius: 24px;
  }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .contact__inner { grid-template-columns: 1fr; }
}

/* The bar needs ~771px for brand + three links + CTA + padding, and stops being
   comfortable around 831px — so the burger takes over at 860px, which also
   catches iPad portrait (768px). Deliberately independent of the 980px tier,
   which is about the hero grid, not the nav. */
@media (max-width: 860px) {
  .site-nav   { display: none; }   /* moved here out of the 640 block — leaving it
                                      there rendered BOTH navs between 641–860px */
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 640px) {
  :root { --header-h: 62px; --header-pad: 20px; --content-pad: 20px; }
  .site-header__right { gap: 10px; }
  .site-header__cta { padding: 10px 16px; }
  .site-header__cta-long  { display: none; }
  .site-header__cta-short { display: inline; }
  /* the footer kept a fixed 60px side padding at every width until now */
  .footer { padding: 60px var(--content-pad) 32px; }
  .find { padding-block: 64px; }
  .find__input { font-size: 15px; padding: 15px 18px 15px 4px; }
  .section { padding-block: 70px; }
  .section__title { font-size: 34px; }
  .menu__category { grid-template-columns: 1fr; gap: 8px; }
  .contact__row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .contact__row .field { margin-bottom: 18px; }
  .frame-edge--left, .frame-edge--right, .frame-mid--left, .frame-mid--right { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero-scroll { display: none; }
  .hero-figure { opacity: 0.09; }
}

@media (max-width: 600px) {
  .fx-petals span:nth-child(n+5), .fx-dust span:nth-child(n+5) { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Speisekarte-Seite (/speisekarte) — eigener .mp-Namensraum („menu page")

   Die Seite erbt Grund, Ornamente und Überschrift von .reel (Karussell der
   Startseite), ersetzt das Karussell aber durch ein statisches Raster. Alle
   Klassen sind neu vergeben, statt .reel- oder .picker__ wiederzuverwenden:
   .picker__chip trägt einen app.js-Handler mit preventDefault(), der jeden
   Filterlink töten würde, und .reel-card ist auf 230px Festbreite ausgelegt.

   ⚠️ In einem CSS-Kommentar darf die Zeichenfolge Stern-Schrägstrich NICHT
   vorkommen (z. B. als „.reel-*(hier)/.picker__*"): sie beendet den Kommentar
   vorzeitig, der Rest wird als kaputtes CSS gelesen und der Parser verschluckt
   die NÄCHSTE Regel gleich mit. Genau so verlor .mp-grid seinen Seitenrand.
   ══════════════════════════════════════════════════════════════════════════ */

/* Gleiche Randbreite wie .reel-intro / .reel-head, damit Suchfeld, Abschnitts-
   überschrift und Raster auf einer Kante stehen. */
.mp-search,
.mp-chips,
.mp-result,
.mp-grid,
.mp-empty { padding-inline: clamp(28px, 4vw, 64px); }

/* .reel-intro bringt das Padding schon mit — sonst läge es doppelt an. */
.reel-intro .mp-search,
.reel-intro .mp-chips,
.reel-intro .mp-result { padding-inline: 0; }

/* ── Suche ── */
.mp-search {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: clamp(18px, 2.5vh, 26px);
}
.mp-search__field {
  position: relative; display: flex; align-items: center;
  flex: 1 1 320px; max-width: 560px;
}
/* Sichtbar nur für Screenreader: das Feld hat schon einen Platzhalter, aber ein
   Platzhalter ist keine Beschriftung. */
.mp-search__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.mp-search__ico {
  position: absolute; left: 16px; width: 18px; height: 18px;
  color: var(--gold); opacity: 0.7; pointer-events: none;
  transition: opacity 0.15s ease;
}
/* Lade-Ring an derselben Stelle wie die Lupe. Nicht blockierend: das Feld bleibt
   fokussiert und beschreibbar, während die Suche im Hintergrund lädt. */
.mp-search__spinner {
  position: absolute; left: 15px; width: 18px; height: 18px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid rgba(var(--gold-rgb), 0.30);
  border-top-color: var(--gold);
  animation: reel-spin 0.8s linear infinite;
  opacity: 0; pointer-events: none;
}
.mp-search__field.is-loading .mp-search__ico { opacity: 0; }
.mp-search__field.is-loading .mp-search__spinner { opacity: 1; }
/* Optik aus .field input übernommen, damit die Seite sich wie die Formulare anfühlt. */
.mp-search input[type="search"] {
  width: 100%; padding: 14px 18px 14px 44px;
  /* ⚠️ MINDESTENS 16px. Unter 16px zoomt iOS Safari die ganze Seite heran, sobald
     das Feld den Fokus bekommt — auf dem iPhone sprang die Speisekarte bei jedem
     Antippen der Suche. Das Reservierungsformular hat das Problem nicht, weil
     .field input mit 22px darüber liegt. */
  font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--ink);
  background: #FBF7EE; border: 1px solid rgba(var(--gold-rgb), 0.28);
  border-radius: 30px; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mp-search input[type="search"]::placeholder { color: var(--muted); opacity: 0.8; }
.mp-search input[type="search"]:focus {
  border-color: rgba(var(--gold-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.14);
}
/* Das native X von WebKit sitzt sonst halb im Rundrand. */
.mp-search input[type="search"]::-webkit-search-cancel-button { margin-right: 4px; }
/* Rot wie der Angebotspreis (--offer): es ist die einzige Aktion auf der Seite,
   die etwas wegnimmt statt hinzuzufügen. */
.mp-reset {
  font-size: 14px; color: var(--offer); text-decoration: underline;
  text-underline-offset: 3px; padding: 8px 4px;   /* Tippfläche, nicht nur Text */
  transition: color 0.2s ease;
}
.mp-reset:hover { color: #8E2A1E; }   /* dunkler, nicht heller — bleibt lesbar */

/* ── Kategorie-Chips ── */
.mp-chips {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.mp-chip {
  display: inline-flex; align-items: center; min-height: 44px;  /* Touch-Ziel */
  padding: 10px 20px; border-radius: 30px;
  background: #FBF7EE; color: var(--ink);
  border: 1px solid rgba(var(--gold-rgb), 0.16);
  font-family: 'DM Sans', sans-serif; font-size: 14px; text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 16px -9px rgba(var(--ink-rgb), 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease,
              color 0.2s ease, border-color 0.2s ease;
}
.mp-chip:hover {
  background: var(--gold); color: var(--bg); border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(138, 95, 40, 0.5);
}
.mp-chip.is-active {
  background: var(--gold); color: var(--bg); border-color: var(--gold);
  font-weight: 500;
}

.mp-result {
  position: relative; z-index: 2;
  margin-top: 16px; font-size: 14px; color: var(--muted);
}
.mp-result__page { opacity: 0.75; }

/* ── Abschnittsüberschrift ──
   Bewusst KEINE eigene Gestaltung mehr: der Abschnittskopf sieht hier exakt so
   aus wie „Unsere Gerichte · 76 Gerichte" im Karussell der Startseite — Pfeil,
   Schrift und Farbe kommen unverändert aus .reel-head-* weiter oben. Nur der
   Abstand ist eigen, weil hier mehrere Köpfe untereinander stehen. */
.mp .reel-head {
  gap: 14px; align-items: center;
  /* Mehr Luft NACH OBEN als nach unten: die Überschrift gehört zum Raster
     darunter, nicht zum Raster darüber. */
  margin-top: clamp(26px, 4vh, 46px);
}
/* ⚠️ Diese Regel ist NICHT überflüssig, obwohl sie .reel-head-title nur
   wiederholt: der Titel ist hier ein <h2> (auf der Startseite ein <span>), und
   die globale Regel h1,h2,h3 { Cormorant Garamond; 500 } würde sonst greifen.
   Ohne font-family/font-weight stünde hier eine andere Schrift als drüben. */
.mp .reel-head-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}
/* Rein zum Schutz des Umbruchs, ohne optische Wirkung: die Startseite hat einen
   einzigen Kopf, hier stehen längere Kategorienamen daneben. */
.mp .reel-head-count { white-space: nowrap; flex-shrink: 0; }

/* ── Raster ── */
.mp-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  margin-bottom: clamp(34px, 5vh, 58px);
}

/* ── Karte ── */
/* ⚠️ Die Spalte ist auf einem 2560er-Monitor rund 490px breit. Ohne Grenzen läuft
   der Text über die volle Karte — eine einzige lange Zeile neben einem kleinen
   Foto, die „unorganisiert" wirkt. Deshalb bekommen Foto, Name und Beschreibung
   je eine eigene Maximalbreite und stehen mittig zentriert übereinander. */
.mp-card {
  position: relative;   /* Bezugsrahmen für die Abzeichen oben links */
  /* Gemeinsame Breite der Textflächen (Name + Beschreibung).
     ⚠️ ABSOLUT, nicht in `ch`: ch bezieht sich auf die Schriftgröße des JEWEILIGEN
     Elements, 38ch wären beim 18,5px-Namen ~380px und bei der 14px-Beschreibung
     ~290px — die beiden Flächen stünden unterschiedlich breit übereinander.
     28rem = 448px ≈ 58 Zeichen in 14px. Mehr sollte es nicht werden: darüber
     wird die Zeile so lang, dass das Auge den Zeilenanfang schlechter findet. */
  --mp-text-w: 28rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 22px clamp(16px, 5%, 34px) 20px; border-radius: 12px;
  border: 1px solid rgba(var(--gold-rgb), 0.20);
  background: rgba(243, 234, 217, 0.60); backdrop-filter: blur(4px);
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              border-color 0.25s ease, background 0.25s ease;
}
/* Der Rahmen ist im Ruhezustand fast unsichtbar (0.20 Gold) — beim Überfahren
   zieht er auf volles Gold an, das Pergament wird eine Spur wärmer und die Karte
   hebt sich ab. Drei kleine Signale statt eines großen: die Karte soll antworten,
   nicht springen. */
.mp-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.09);
  box-shadow: 0 14px 32px -12px rgba(var(--ink-rgb), 0.28),
              0 0 0 1px rgba(var(--gold-rgb), 0.35);
}
/* Anklickbar → öffnet das Detail-Popup (js/product-modal.js). */
.mp-card[data-reel-card] { cursor: pointer; }
.mp-card[data-reel-card]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Eine Empfehlung sieht aus wie jede andere Karte — Grund und Rahmen bleiben
   gleich. Kenntlich ist sie allein am ★-Abzeichen oben rechts und am goldenen
   Namen. Deshalb entfallen hier alle Flächen-Sonderregeln: sie waren nur dazu
   da, den Goldschleier der Karte auszugleichen, den es nicht mehr gibt. */
/* Größer als die 116px der Karussellkarte: hier ist das Foto der Grund, warum
   ein Gast die Seite überhaupt aufmacht, und die Rasterspalte hat den Platz. */
/* Wächst mit der Spalte statt starr 156px zu bleiben — auf breiten Karten war
   das Foto sonst eine kleine Murmel in viel leerer Fläche. */
.mp-photo {
  width: clamp(140px, 46%, 210px); aspect-ratio: 1; height: auto;
  border-radius: 50%; flex-shrink: 0;
  border: 2px dashed var(--gold); margin-bottom: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; color: var(--muted); font-size: 10.5px;
  overflow: hidden; position: relative; background: rgba(var(--gold-rgb), 0.07);
}
/* Liegt ein echtes Foto vor, ist der gestrichelte Ring kein Rahmen mehr sondern
   nur noch Rauschen — dieselbe Regel wie auf den TV-Tafeln. */
.mp-photo:has(img) { border-style: solid; border-color: rgba(var(--gold-rgb), 0.28); }
.mp-photo::before {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb), 0.17); pointer-events: none;
}
.mp-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mp-photo-ico { opacity: 0.36; }

/* Abzeichen oben RECHTS — Gegenstück zum Preisschild oben links.
   Vorher standen sie als eigene Zeile zwischen Foto und Name: das kostete jede
   Karte eine reservierte Leerzeile (min-height), auch wenn kein Abzeichen da
   war, und schob Name und Beschreibung nach unten. In der Ecke kosten sie
   nichts und die beiden freien Ecken der Karte tragen je eine Information. */
.mp-badges {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  display: flex; gap: 5px; max-width: calc(40% - 14px); flex-wrap: wrap;
  justify-content: flex-end;
}
.mp-badge {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
  flex-shrink: 0; letter-spacing: 0.4px; line-height: 1.4;
  /* Deckend wie das Preisschild: auf schmalen Karten kann die Ecke auf dem Foto
     liegen, und ein durchsichtiges Abzeichen wäre dort nicht mehr zu lesen. */
  background: var(--bg);
}
.mp-badge--v    { color: var(--veg);  border: 1.5px solid var(--veg); }
.mp-badge--neu  { color: var(--offer); border: 1.5px solid var(--offer); }
.mp-badge--star { color: var(--gold); border: 1.5px solid var(--gold); }

/* Größer als die 11px der Karussellkarte: dort huscht der Name vorbei, hier
   liest der Gast ihn. Kein uppercase mehr — Versalien mit Sperrung kosten bei
   langen Gerichtnamen („Crispy & Zinger Menü") spürbar Lesbarkeit. */
.mp-name {
  font-family: 'DM Sans', sans-serif;
  /* Deutlich über der Beschreibung (14px): bei 14,5 zu 14 wirkten beide gleich
     laut und die Karte hatte keine Rangfolge. */
  font-size: 16.5px; font-weight: 700; letter-spacing: 0.1px;
  color: var(--ink); line-height: 1.3; margin-bottom: 8px;
  /* balance verteilt einen zweizeiligen Namen gleichmäßig statt „Crispy & Zinger
     Menü mit Pommes" / „und Salat" zu setzen. */
  text-wrap: balance;
  /* Eigene Fläche wie bei der Beschreibung, aber eine Stufe kräftiger (0.13 statt
     0.07 Gold): beide Blöcke sind dadurch als Paar erkennbar, und trotzdem bleibt
     der Name der lautere von beiden. Gleiche Breite wie die Beschreibung, damit
     die zwei Flächen bündig übereinander stehen statt zu versetzen. */
  width: 100%; max-width: var(--mp-text-w); margin-inline: auto;
  padding: 10px 16px; border-radius: 10px;
  background: rgba(var(--gold-rgb), 0.13);
  transition: background 0.25s ease;
}
.mp-card:hover .mp-name { background: rgba(var(--gold-rgb), 0.19); }
/* Auch der Name bleibt auf einer Empfehlung unverändert. Kenntlich ist sie damit
   allein am ★-Abzeichen oben rechts — .mp-card.featured hat auf dieser Seite
   bewusst KEINE eigene Gestaltung mehr. */

/* Preisschild oben LINKS, aus dem Fluss genommen. Bei einem Angebot liegen alter
   und neuer Preis IM SELBEN Schild: zwei Schilder nebeneinander läsen sich wie
   zwei Gerichte. Umbruch erlaubt, damit ein Angebot auf schmalen Karten
   zweizeilig wird statt über den Kartenrand zu laufen. */
.mp-price {
  /* Bündig in der oberen linken Ecke, ohne Abstand: das Schild liegt in der Ecke
     der Karte statt darin zu schweben. */
  position: absolute; top: 0; left: 0; z-index: 1;
  /* max-content + Deckel: das Schild ist immer genau so breit wie die Zahl.
     Ohne max-content zieht es sich als absolut positioniertes Flex-Element bis
     an den Deckel auf, sobald der Text umbrechen KÖNNTE — auf schmalen Karten
     saß deshalb ein viel zu breiter Kasten in der Ecke. */
  width: max-content; max-width: 60%;
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  justify-content: flex-start; column-gap: 8px; row-gap: 1px;
  /* Außen der Kartenradius minus 1px Rahmen, innen nur leicht gerundet — so
     folgt die Ecke der Karte exakt und die Kante bleibt sauber. */
  padding: 6px 12px; border-radius: 11px 0 8px 0;
  /* Nur die INNEREN Kanten bekommen eine Linie; oben und links liegt schon der
     Kartenrahmen, eine zweite Linie darauf sähe doppelt aus. */
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  border-width: 0 1px 1px 0;
  /* DECKEND (Goldschleier auf Pergament, nicht durchsichtig): das Schild liegt
     über der Karte und könnte auf schmalen Karten auf dem Foto landen, wo die
     Zahl unlesbar würde. Auf dem Pergament sieht es aus wie ein 8%-Gold. */
  background: linear-gradient(rgba(var(--gold-rgb), 0.08), rgba(var(--gold-rgb), 0.08)), var(--bg);
  font-size: 17px; font-weight: 700; color: var(--gold-ink); line-height: 1.2;
  transition: border-color 0.25s ease, background 0.25s ease;
}
/* Nur bei einem Angebot: alter Preis über dem neuen.
   ⚠️ Über die Richtung, NICHT über `flex: 0 0 100%` am alten Preis — eine
   Prozent-Basis in einem `width: max-content`-Kasten ist zirkulär (die Breite
   soll aus dem Inhalt kommen, der Inhalt misst sich an der Breite). Genau daran
   wurde das Schild bei Angeboten zu breit. `max-content` misst bei einer Spalte
   ohnehin die längere der beiden Zahlen — also exakt richtig. */
.mp-price:has(.mp-price__old) {
  flex-direction: column; align-items: flex-start; row-gap: 1px;
}
.mp-card:hover .mp-price {
  border-color: rgba(var(--gold-rgb), 0.6);
  background: linear-gradient(rgba(var(--gold-rgb), 0.16), rgba(var(--gold-rgb), 0.16)), var(--bg);
}
.mp-price__old   { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.mp-price__offer { color: var(--offer); }

/* Dunkler und größer als der Karussell-Ton (--muted, 11,5px kursiv): auf dem
   Pergament liegt Beschreibungstext sonst bei rund 4:1 Kontrast, und in 13px
   ist genau er die Zeile, die ein Gast wirklich liest. #574E3C bringt ~7:1.

   Der Text steht auf EINER Zeile: passt er nicht, wird er mit „…" abgeschnitten
   (nowrap + ellipsis). Den vollen Text sieht der Gast, indem er die Karte
   anklickt — dann öffnet das Detail-Popup (js/product-modal.js). So bleiben alle
   Karten einer Reihe gleich hoch. */
.mp-desc {
  font-size: 14px; color: var(--ink-soft); font-style: normal; line-height: 1.5;
  letter-spacing: 0.1px;
  /* Dieselbe Breite wie die Namensfläche darüber (--mp-text-w auf .mp-card) —
     so sind alle Kästen einer Reihe gleich breit, statt mit der Textlänge zu
     zappeln. */
  width: 100%; max-width: var(--mp-text-w); margin-inline: auto;
  /* Kein Rahmen: neben dem umrandeten Preiskasten ergäbe ein zweiter Rahmen
     zwei gleich laute Kästen übereinander. Stattdessen eine weiche, randlose
     Fläche mit großzügigem Radius — sie trägt den Text, ohne ihn einzusperren. */
  padding: 11px 16px; border-radius: 10px;
  background: rgba(var(--gold-rgb), 0.07);
  margin-top: auto;   /* sitzt unten an der Karte, auch bei kurzem Namen */
  transition: background 0.25s ease;
  /* Genau eine Zeile; längerer Text wird mit „…" gekürzt. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-card:hover .mp-desc { background: rgba(var(--gold-rgb), 0.12); }

/* Damit margin-top:auto greifen kann, muss die Karte die Höhe der Reihe haben. */
.mp-card { height: 100%; }

/* ── Seitennavigation ── */
.mp-pager {
  position: relative; z-index: 2;
  padding-inline: clamp(28px, 4vw, 64px);
}
.mp-pagination {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
  padding-top: clamp(10px, 2vh, 22px);
}
.mp-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px;   /* 44px = Touch-Ziel */
  border-radius: 24px; background: #FBF7EE; color: var(--ink);
  border: 1px solid rgba(var(--gold-rgb), 0.16);
  font-family: 'DM Sans', sans-serif; font-size: 14px; text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mp-page:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.mp-page.is-active {
  background: var(--gold); color: var(--bg); border-color: var(--gold); font-weight: 500;
}
/* Die Pfeile am Rand bleiben stehen statt zu verschwinden, damit die Leiste beim
   Blättern nicht springt — sie sind nur nicht mehr anklickbar. */
.mp-page.is-disabled {
  color: var(--muted); opacity: 0.4; pointer-events: none;
}
.mp-page-gap { color: var(--muted); padding: 0 4px; }

.mp-empty {
  position: relative; z-index: 2;
  text-align: center; color: var(--muted); font-size: 16px;
  padding-block: clamp(40px, 8vh, 90px);
}
.mp-empty a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── Ladeanzeige beim Kategoriewechsel / Suchen / Blättern (menu.js) ──
   Liegt über allem (Header ist z-index 50). Wird von menu.js beim Klick auf eine
   Kategorie bzw. beim Absenden der Suche eingeblendet und verschwindet mit der
   neuen Seite von selbst. */
.mp-loading {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(243, 234, 217, 0.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.mp-loading.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.mp-loading__box {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 26px 36px; border-radius: 16px;
  background: #FBF7EE; border: 1px solid rgba(var(--gold-rgb), 0.28);
  box-shadow: 0 22px 60px -18px rgba(0, 0, 0, 0.45);
}
.mp-loading__ring {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid rgba(var(--gold-rgb), 0.25);
  border-top-color: var(--gold);
  animation: reel-spin 0.8s linear infinite;
}
.mp-loading__text {
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-ink);
}

@media (max-width: 1200px) { .mp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 860px = derselbe Umbruch wie die mobile Navigation */
@media (max-width: 860px) {
  .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Zehn Kategorien sprengen die Zeile — hier laufen sie waagerecht weiter statt
     vier Reihen hoch zu werden. Das Padding wandert nach innen, sonst schneidet
     der Scrollbereich den Rand ab. */
  /* Beide Selektoren, weil `.reel-intro .mp-chips` weiter oben das Padding auf 0
     setzt und mit zwei Stufen gewinnen würde — die Chips lägen dann um den
     negativen Rand links AUSSERHALB des Bildschirms. */
  .mp-chips,
  .reel-intro .mp-chips {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    /* bis an beide Bildschirmkanten, damit sichtbar ist, dass es weitergeht */
    margin-inline: calc(-1 * clamp(28px, 4vw, 64px));
    padding-inline: clamp(28px, 4vw, 64px);
    padding-bottom: 12px;
    /* Die Leiste ist der einzige Teil der Seite, der waagerecht läuft — hier ist
       ein SICHTBARER Balken die Ansage, keine Verschmutzung. */
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--gold-rgb), 0.55) rgba(var(--gold-rgb), 0.13);
    /* Ausblenden an den Kanten: der angeschnittene Chip sagt „da kommt noch
       was", ein hart abgeschnittener sieht nach Fehler aus. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px,
                                        #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 22px,
                                        #000 calc(100% - 30px), transparent 100%);
  }
  .mp-chips::-webkit-scrollbar { height: 6px; }
  .mp-chips::-webkit-scrollbar-track {
    background: rgba(var(--gold-rgb), 0.13); border-radius: 3px;
  }
  .mp-chips::-webkit-scrollbar-thumb {
    background: rgba(var(--gold-rgb), 0.55); border-radius: 3px;
  }
  .mp-chip { scroll-snap-align: start; }
  /* Der letzte Chip soll frei stehen können, sonst klebt er unter der Blende. */
  .mp-chip:last-child { margin-right: 8px; }
}

@media (max-width: 640px) {
  .mp-search { gap: 10px; }
  .mp-search__field { flex-basis: 100%; max-width: none; }
  .mp-grid { gap: 14px; }
  /* Engeres Seitenpadding schafft Platz fürs größere Foto. */
  .mp-card { padding: 16px 9px 14px; }
  /* Auf dem Handy soll das Gericht (Foto) dominieren, nicht der Text: das Foto
     wächst gegenüber der Karte, Name/Preis/Beschreibung rücken eine Spur kleiner.
     Die engeren Textkästen halten das Verhältnis auf der schmalen Karte stimmig. */
  .mp-photo { width: clamp(126px, 84%, 168px); height: auto; margin-bottom: 14px; }
  .mp-name  { font-size: 14px; padding: 8px 12px; margin-bottom: 6px; }
  /* Der Deckel muss eng bleiben, sonst nimmt ein Angebot („8,50 € 7,50 €") die
     halbe Kartenbreite ein. */
  .mp-price  { font-size: 13.5px; padding: 5px 9px; column-gap: 6px; max-width: 58%; }
  .mp-desc   { font-size: 12.5px; padding: 9px 12px; }
  .mp-badges { top: 10px; right: 10px; }
}

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


/* ═══════════════════════════════════════════════════════════════════════
   ÜBER-UNS-SEITE  (/ueber-uns)
   Sitzt wie die Bewertungsseite auf .reel + backgrounds/reel-bg — Farben und
   Grund kommen damit unverändert von dort. Hier steht nur, was eine Seite aus
   Text und Fotos zusätzlich braucht.
   ═══════════════════════════════════════════════════════════════════════ */

.about { padding: clamp(48px, 7vh, 88px) 0; }

/* Satzspiegel der Textsektionen. z-index:2 hebt den Inhalt über die
   Ornamentebenen von reel-bg (die malen auf z-index 0 und 1) — derselbe Griff
   wie bei .review__form-col. */
.about__inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}

/* Auftakt: zwei gleich breite Hälften über die volle Höhe, wie .review. Das
   Raster sitzt auf der Sektion selbst, damit jede Hälfte die ganze Höhe füllt. */
.about--hero {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  padding: clamp(40px, 6vh, 80px) clamp(24px, 3vw, 56px);
}
.about--hero .reel-intro { padding: 0; margin-bottom: clamp(18px, 2.5vh, 28px); }

.about__col { position: relative; z-index: 2; min-width: 0; }

.about__lead {
  font-size: 17px; line-height: 1.8; color: var(--muted);
  max-width: 52ch; margin: 0;
}

/* Textzeile + Bild nebeneinander; jede weitere Zeile kehrt die Seiten um. */
.about__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.about__row + .about__row { margin-top: clamp(48px, 8vh, 88px); }
.about__row--reverse .about__fig { order: -1; }

/* Fotos, keine Strichgrafik: KEIN mix-blend-mode wie bei .review__art — das
   dient dort nur dazu, das Weiß einer Zeichnung verschwinden zu lassen, und
   würde ein Foto vergrauen. */
.about__fig {
  position: relative; z-index: 2;
  margin: 0; min-width: 0;
}
.about__fig img {
  display: block; width: 100%; height: auto;
  border-radius: 3px;
  border: 1px solid var(--border);
  box-shadow: 0 16px 34px rgba(var(--ink-rgb), 0.16);
}
.about__fig--hero img { max-height: 74vh; object-fit: cover; }
.about__fig-cap {
  margin-top: 12px; text-align: center;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-muted);
}

/* Spezialitäten. <dt> trägt die Auszeichnung der Eyebrow-Zeilen (Versalien,
   --gold-ink statt --gold: 13px Gold käme auf 3.10:1 und fiele durch AA). */
.about__list { margin: 26px 0 0; padding: 0; }
.about__list-item {
  position: relative;
  padding-left: 22px;
  margin-bottom: 18px;
}
.about__list-item::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
}
.about__list dt {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 5px;
}
.about__list dd {
  margin: 0;
  font-size: 15.5px; line-height: 1.75;
  color: var(--ink-soft);
}

/* Zitat über die volle Breite, von zwei Goldlinien gehalten. */
.about__quote {
  margin: clamp(48px, 8vh, 88px) auto 0;
  max-width: 46ch;
  padding: clamp(24px, 4vh, 40px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(21px, 3vw, 30px);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
}
/* Die typografischen Anführungszeichen stehen in der CSS, nicht im Text —
   so bleibt der Satz im Markup zitierfähig. */
.about__quote::before { content: "„"; }
.about__quote::after  { content: "“"; }

.about__address {
  margin: 26px 0 0;
  font-size: 15px; line-height: 1.8;
  color: var(--muted);
}

.about__cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(26px, 4vh, 36px);
}

/* Unter 900px stapeln alle Raster. Anders als die Zeichnung auf /bewertungen
   bleiben die Fotos sichtbar — sie sind hier Inhalt, nicht Beiwerk. Das
   Umkehren entfällt, damit überall Bild-unter-Text steht. */
@media (max-width: 900px) {
  .about--hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-left: var(--content-pad);
    padding-right: var(--content-pad);
  }
  .about__row { grid-template-columns: 1fr; }
  .about__row--reverse .about__fig { order: 0; }
  .about__fig--hero img { max-height: none; }
  .about__lead { max-width: none; }
}

@media (max-width: 640px) {
  .about__inner { padding: 0 22px; }
  .about--hero { padding-left: 22px; padding-right: 22px; }
  /* Vollbreite Schaltflächen: nebeneinander brechen sie auf 320px um. */
  .about__cta .btn { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  /* transform ist keine Transition und überlebt die Regel oben. */
  .mp-card:hover, .mp-chip:hover { transform: none; }
  /* The panel is faded in by a class; with transitions off it must already be
     at its final state, otherwise unhiding it would show nothing. `hidden`
     still does the actual hiding. */
  .nav-panel { opacity: 1; transform: none; }
}