/* =========================================================================
   Ola del Mar · Designwelt "Cyclorama"
   Die Seite ist ein Bühnen-Rundhorizont: sie beginnt im tiefen Schwarz der
   Nacht, ein Kobaltband legt sich als Horizont darunter, Rosé sammelt sich
   darüber, und erst die Reservierung steht im weißen Tageslicht. Jede Fläche
   ist eine flache Lichtphase; geblendet wird nur im Horizontstreifen
   zwischen zwei Phasen, nie unter Text. Cue-Etiketten in Schablonenschrift
   benennen die Phasen, Marcellus trägt die Titel, Familjen Grotesk den Text.
   ========================================================================= */

/* --- 1. Schriften ------------------------------------------------------- */

@font-face {
  font-family: "Marcellus";
  src: url("assets/fonts/marcellus-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Marcellus";
  src: url("assets/fonts/marcellus-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("assets/fonts/familjen-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Familjen Grotesk";
  src: url("assets/fonts/familjen-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Allerta Stencil";
  src: url("assets/fonts/allerta-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* --- 2. Lichtphasen ----------------------------------------------------- */

:root {
  /* Der Rundhorizont: vier flache Phasen. */
  --night: #07090f;
  --night-up: #0f1524;
  --night-line: #1e2740;
  --cobalt: #1a46a6;
  --cobalt-deep: #10307a;
  --cobalt-line: #3b64c4;
  --cobalt-light: #8fb1ff;
  --rose: #e6a0a6;
  --rose-deep: #c97e86;
  --peach: #f2c3a4;
  --peach-deep: #d9a07b;
  --day: #f7f4ee;
  --day-up: #ffffff;
  --day-line: #d9d3c6;

  /* Tinte auf Dunkel und auf Hell, Nebenfarbe stets aus dem Farbton der Fläche. */
  --ink: #f3efe8;
  --ink-dim: #a9b4d0;
  --ink-on-cobalt-dim: #d3ddff;
  --ink-dark: #0b0e18;
  --ink-on-rose-dim: #5a2a33;
  --ink-on-peach-dim: #5f3c26;
  --ink-on-day-dim: #5a5852;

  /* Preview-Streifen (PixelUno) */
  --stripe-bg: #6c3bd1;
  --stripe-ink: #f6f2ff;

  /* Schriften */
  --display: "Marcellus", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --text: "Familjen Grotesk", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --stencil: "Allerta Stencil", "Familjen Grotesk", ui-sans-serif, sans-serif;

  /* Maß */
  --shell: 80rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --band-y: clamp(4rem, 9vw, 8.5rem);
  --rail: 0px;
  --stripe: 34px;
  --headbar: 70px;

  --fs-micro: 0.6875rem;
  --fs-small: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.7rem);
  --fs-h2: clamp(2rem, 4.2vw, 3.4rem);
  --fs-h1: clamp(2.5rem, 5.6vw, 4.9rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --raise: 0.9s;
  color-scheme: dark;
}

@media (max-width: 47.99em) {
  :root { --stripe: 48px; --headbar: 62px; }
}
@media (min-width: 62em) {
  :root { --rail: 5.25rem; }
}

/* --- 3. Grundlagen ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--stripe) + var(--headbar) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  padding-top: calc(var(--stripe) + var(--headbar));
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4 { font-family: var(--text); font-weight: 600; font-size: var(--fs-body); }

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cobalt-light);
  outline-offset: 3px;
  border-radius: 2px;
}
.band--cobalt :where(a, button, summary):focus-visible { outline-color: var(--day); }
.band--rose :where(a, button, summary):focus-visible,
.band--peach :where(a, button, summary):focus-visible,
.band--day :where(a, button, summary):focus-visible { outline-color: var(--cobalt); }

::selection { background: var(--cobalt); color: var(--day); }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: fixed; top: -6rem; left: 50%;
  translate: -50% 0;
  z-index: 90;
  transition: top 0.18s var(--ease);
  background: var(--day); color: var(--ink-dark);
  padding: 0.7rem 1.2rem; font-weight: 600; font-size: var(--fs-base);
  text-decoration: none;
}
.skip:focus-visible { top: calc(var(--stripe) + 8px); }

.shell {
  width: min(var(--shell), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- 4. Schablone: Cue-Etiketten --------------------------------------- */

.stencil {
  font-family: var(--stencil);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

/* Die Spezifikationsleiste am oberen Rand jeder Lichtphase. */
.spec {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: 0.65rem;
  border-top: 1px solid var(--line, var(--night-line));
  border-bottom: 1px solid var(--line, var(--night-line));
  color: var(--spec-ink, var(--cobalt-light));
}
.spec__cue { display: flex; gap: 1.1rem; min-width: 0; }
.spec__cue > span { white-space: nowrap; }
.spec__cue > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.spec__phase { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 47.99em) { .spec { font-size: 0.625rem; letter-spacing: 0.14em; } }
.spec__cue b { font-weight: 400; }
.spec__phase { display: flex; align-items: center; gap: 0.6rem; }
.spec__phase::before {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--phase-dot, var(--cobalt));
  box-shadow: 0 0 0 2px var(--phase-ring, var(--night));
}

/* --- 5. Preview-Streifen, Kopf, Navigation ------------------------------ */

.stripe {
  position: fixed; inset: 0 0 auto 0;
  z-index: 70;
  height: var(--stripe);
  display: flex; align-items: center; justify-content: center;
  background: var(--stripe-bg);
  color: var(--stripe-ink);
  padding-inline: 0.9rem;
  text-align: center;
  font-size: var(--fs-micro);
  line-height: 1.28;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.head {
  position: fixed; inset: var(--stripe) 0 auto 0;
  z-index: 60;
  height: var(--headbar);
  display: flex; align-items: center;
  background: rgba(7, 9, 15, 0.94);
  border-bottom: 1px solid var(--night-line);
}
@supports (backdrop-filter: blur(1px)) {
  .head { background: rgba(7, 9, 15, 0.82); backdrop-filter: blur(12px); }
}
.head__in {
  width: min(96rem, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}
.head__logo { display: flex; align-items: center; flex: 0 0 auto; }
.head__logo img { height: 50px; width: auto; }

.nav { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.nav__link {
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
  padding-block: 0.45rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.nav__link:hover { border-bottom-color: var(--cobalt-light); }
.nav__link[aria-current="page"] { color: var(--cobalt-light); border-bottom-color: var(--cobalt-light); }
.nav__cta { margin-left: 0.4rem; }

.langs { display: flex; align-items: center; gap: 0.1rem; margin-left: 0.4rem; }
.langs__link {
  font-family: var(--stencil);
  font-size: var(--fs-micro); letter-spacing: 0.12em;
  text-decoration: none; color: var(--ink-dim);
  padding: 0.35rem 0.45rem;
  border: 1px solid transparent;
}
.langs__link:hover { color: var(--ink); }
.langs__link[aria-current="true"] { color: var(--ink); border-color: var(--cobalt-line); }

.burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--night-line); color: var(--ink);
  cursor: pointer;
}
.burger span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
  transition: translate 0.2s var(--ease), rotate 0.2s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { translate: 0 6px; rotate: 45deg; }
.burger[aria-expanded="true"] span::after { translate: 0 -6px; rotate: -45deg; }

@media (max-width: 61.99em) {
  .burger { display: flex; }
  .nav {
    position: fixed; inset: calc(var(--stripe) + var(--headbar)) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0;
    background: var(--night);
    border-bottom: 1px solid var(--night-line);
    padding: 0.5rem var(--gutter) 1.5rem;
    display: none;
    max-height: calc(100dvh - var(--stripe) - var(--headbar));
    overflow: auto;
  }
  .nav[data-open="true"] { display: flex; }
  .nav__link { font-size: 1.2rem; padding-block: 0.9rem; border-bottom: 1px solid var(--night-line); }
  .nav__link[aria-current="page"] { border-bottom-color: var(--night-line); }
  .nav__cta { margin: 1rem 0 0; align-self: flex-start; }
  .langs { margin: 1rem 0 0; }
}

/* --- 6. Knöpfe ---------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border-radius: 2px;
  border: 1px solid transparent;
  font-weight: 600; font-size: var(--fs-base); letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s var(--ease), translate 0.2s var(--ease), background-color 0.2s var(--ease);
}
.btn:hover { filter: brightness(1.12); translate: 0 -1px; }
.btn:active { translate: 0 0; filter: brightness(0.98); }
.btn--primary { background: var(--cobalt); color: var(--day); border-color: var(--cobalt); }
.btn--light { background: var(--day); color: var(--cobalt-deep); border-color: var(--day); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
.band--rose .btn--ghost:hover, .band--peach .btn--ghost:hover, .band--day .btn--ghost:hover { background: rgba(11, 14, 24, 0.06); }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* --- 7. Lichtphasen als Flächen ---------------------------------------- */

.band {
  position: relative;
  padding-left: var(--rail);
}
.band__in { padding-block: var(--band-y); }
.band__spec { padding-top: 0; }

.band--night { background: var(--night); color: var(--ink); --line: var(--night-line); --spec-ink: var(--cobalt-light); --phase-dot: var(--cobalt); --phase-ring: var(--night); --dim: var(--ink-dim); }
.band--cobalt { background: var(--cobalt); color: var(--day); --line: var(--cobalt-line); --spec-ink: var(--ink-on-cobalt-dim); --phase-dot: var(--day); --phase-ring: var(--cobalt); --dim: var(--ink-on-cobalt-dim); }
.band--rose { background: var(--rose); color: var(--ink-dark); --line: var(--rose-deep); --spec-ink: var(--ink-on-rose-dim); --phase-dot: var(--cobalt); --phase-ring: var(--rose); --dim: var(--ink-on-rose-dim); }
.band--peach { background: var(--peach); color: var(--ink-dark); --line: var(--peach-deep); --spec-ink: var(--ink-on-peach-dim); --phase-dot: var(--cobalt); --phase-ring: var(--peach); --dim: var(--ink-on-peach-dim); }
.band--day { background: var(--day); color: var(--ink-dark); --line: var(--day-line); --spec-ink: var(--cobalt-deep); --phase-dot: var(--day-up); --phase-ring: var(--cobalt); --dim: var(--ink-on-day-dim); }

.dim { color: var(--dim); }

/* Der Horizont: die einzige Blende der Seite, ein Streifen ohne Text. */
.horizon {
  height: clamp(2.5rem, 7vw, 6rem);
  background: linear-gradient(to bottom, var(--from), var(--to));
}
.horizon--dawn {
  height: clamp(5rem, 12vw, 10rem);
  background: linear-gradient(to bottom, var(--night) 0%, var(--cobalt) 42%, var(--peach) 80%, var(--day) 100%);
}

/* --- 8. Lichtfahrplan: die Schiene ------------------------------------- */

.rail {
  display: none;
  position: fixed; left: 0; top: 50%;
  translate: 0 -50%;
  z-index: 40;
  width: var(--rail);
  padding: 0.9rem 0;
  background: var(--night);
  border: 1px solid var(--night-line); border-left: 0;
}
@media (min-width: 62em) { .rail { display: block; } }
.rail__title { text-align: center; color: var(--ink-dim); padding: 0 0.4rem 0.7rem; border-bottom: 1px solid var(--night-line); }
.rail__list { display: grid; }
.rail__link {
  display: grid; justify-items: center; gap: 0.25rem;
  padding: 0.7rem 0.3rem;
  text-decoration: none;
  color: var(--ink-dim);
  border-left: 3px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.rail__link:hover { color: var(--ink); }
.rail__link[aria-current="true"] { color: var(--ink); border-left-color: var(--tick, var(--cobalt-light)); }
.rail__num { font-family: var(--stencil); font-size: 0.95rem; letter-spacing: 0.08em; }
.rail__name { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }

/* --- 9. Erstes Bild: Nacht --------------------------------------------- */

.hero { position: relative; z-index: 0; overflow: hidden; }
.hero__grid {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
  padding-block: clamp(2.5rem, 6vw, 5rem) 0;
}
@media (min-width: 62em) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.hero__text { display: grid; gap: 1.4rem; padding-bottom: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 62em) { .hero__text { padding-bottom: calc(clamp(2rem, 5vw, 4.5rem) + 2.8rem); } }
.hero__title { display: grid; gap: 0.35em; max-width: 14ch; }
.hero__name { font-size: var(--fs-h1); line-height: 1; }
.hero__tagline { font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.2; color: var(--ink-dim); max-width: 22ch; }
.hero__lead { font-size: var(--fs-lead); color: var(--ink-dim); max-width: 44ch; line-height: 1.5; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }

.hero__stage { position: relative; display: grid; gap: 0.9rem; }
.hero__pics { position: relative; aspect-ratio: 3 / 2; }
.hero__pic {
  position: absolute; inset: 0;
  transition: opacity 0.7s var(--ease);
}
.hero__pic img { width: 100%; height: 100%; object-fit: cover; }
.hero__pic[aria-hidden="true"] { opacity: 0; pointer-events: none; }
.hero__cap { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; color: var(--ink-on-cobalt-dim); font-size: var(--fs-small); min-height: 2.2rem; }
.hero__cap b { font-weight: 500; color: var(--ink); }

/* Der Horizont unter dem Bild: das Bild steht auf dem Kobaltband. */
.hero__floor { height: calc(clamp(3rem, 8vw, 6.5rem) + 2.8rem); background: var(--cobalt); margin-top: calc(-1 * (clamp(3rem, 8vw, 6.5rem) * 0.55 + 2.8rem)); position: relative; z-index: -1; }
.hero__floor--line { border-top: 1px solid var(--cobalt-line); }

/* Wahl des Moments: Mittag / Nacht */
.toggle { display: inline-flex; border: 1px solid var(--night-line); padding: 3px; gap: 3px; }
.toggle__btn {
  background: none; border: 0; cursor: pointer;
  padding: 0.5rem 0.85rem; min-height: 40px;
  font-family: var(--stencil); font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-dim);
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.toggle__btn[aria-pressed="true"] { background: var(--cobalt); color: var(--day); }
.toggle__btn:hover:not([aria-pressed="true"]) { color: var(--ink); }
.hero__moment { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; }

/* Öffnungsstatus */
.stamp {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--fs-small); font-weight: 500;
  color: var(--ink);
}
.stamp__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ink-dim); flex: 0 0 auto; }
.stamp[data-state="open"] .stamp__dot { background: #5ad38a; }
.stamp__sub { color: var(--ink-dim); font-weight: 400; }
.band--day .stamp__sub, .band--rose .stamp__sub, .band--peach .stamp__sub { color: var(--dim); }
.band--day .stamp { color: var(--ink-dark); }

/* --- 10. Abschnittsköpfe und Fließtext -------------------------------- */

.sec-head { display: grid; gap: 1.1rem; max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec-head--wide { max-width: 52rem; }
.sec-head p { font-size: var(--fs-lead); color: var(--dim); line-height: 1.5; }
.sec-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; }

.prose { max-width: 62ch; display: grid; gap: 1.1rem; }
.prose p { color: var(--dim); }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: 1.2rem; }
.prose li { color: var(--dim); }

.fig { margin: 0; display: grid; gap: 0.6rem; align-content: start; }
.fig img { width: 100%; height: auto; }
.fig__cap { font-size: var(--fs-small); color: var(--dim); display: flex; justify-content: space-between; gap: 1rem; }

/* --- 11. Küche: Kobalt ------------------------------------------------- */

.cocina { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 62em) {
  .cocina { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; }
}
.cocina__text { display: grid; gap: 1.2rem; max-width: 40rem; }
.cocina__text p { color: var(--ink-on-cobalt-dim); }
.chef { margin-top: 1.4rem; padding-top: 1.6rem; border-top: 1px solid var(--cobalt-line); display: grid; gap: 0.8rem; }
.chef__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1rem; }
.chef__name b { font-family: var(--display); font-weight: 400; font-size: 1.25rem; }
.chef__name span { color: var(--ink-on-cobalt-dim); font-size: var(--fs-small); }

.cocina__pics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.9rem; align-content: start; }
.cocina__pics .fig:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; align-content: stretch; grid-template-rows: 1fr auto; }
.cocina__pics .fig:nth-child(1) picture, .cocina__pics .fig:nth-child(1) img { height: 100%; object-fit: cover; }
.cocina__pics .fig:nth-child(2) { grid-column: 4 / 7; }
.cocina__pics .fig:nth-child(3) { grid-column: 4 / 7; }
.cocina__pics .fig__cap { color: var(--ink-on-cobalt-dim); }

/* --- 12. Degustation als Cue-Liste ------------------------------------- */

.cues { border-top: 1px solid var(--line); }
.cue-row {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0.4rem 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
@media (min-width: 48em) {
  .cue-row { grid-template-columns: 3.6rem minmax(0, 1fr) minmax(12rem, 0.6fr); }
}
.cue-row__n { font-family: var(--stencil); font-size: 1.05rem; letter-spacing: 0.08em; color: var(--spec-ink); }
.cue-row__name { font-weight: 500; font-size: 1.08rem; line-height: 1.35; }
.cue-row__al { font-size: var(--fs-small); color: var(--dim); grid-column: 2; }
@media (min-width: 48em) { .cue-row__al { grid-column: 3; text-align: right; } }
.cues__foot {
  display: grid; gap: 1.2rem; padding-top: 1.6rem;
  align-items: start;
}
@media (min-width: 48em) { .cues__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.price-tag { display: grid; gap: 0.15rem; }
.price-tag__big { font-family: var(--display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; }
.price-tag__note { font-size: var(--fs-small); color: var(--dim); }
.cues__terms { display: grid; gap: 0.3rem; font-size: var(--fs-small); color: var(--dim); }
.cues__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

/* --- 13. Räume: Rosé -------------------------------------------------- */

.spaces { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 62em) {
  .spaces { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.space { display: grid; gap: 0.9rem; }
.spaces__main { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.space__body { display: grid; gap: 0.5rem; max-width: 40rem; }
.space__body p { color: var(--dim); }
.space__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: var(--fs-small); color: var(--dim); }
.spaces__side { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 48em) and (max-width: 61.99em) {
  .spaces__side { grid-template-columns: 1fr 1fr; }
}
.spaces__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: clamp(2rem, 4vw, 3rem); }

/* --- 14. Gruppen: Pfirsich -------------------------------------------- */

.events { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 62em) { .events { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.events__text { display: grid; gap: 1.2rem; max-width: 40rem; }
.events__text p { color: var(--dim); }
.events__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }

/* Merkmale als Liste mit Linien, keine Kacheln */
.features { display: grid; border-top: 1px solid var(--line); }
@media (min-width: 48em) { .features { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.features > div { padding: 1.1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: 0.3rem; }
.features dt { font-weight: 600; }
.features dd { margin: 0; color: var(--dim); }

/* Ablauf als Cue-Liste (die Reihenfolge ist die Information) */
.steps { display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: step; }
.step { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0.3rem 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.step__n { font-family: var(--stencil); font-size: 1.05rem; letter-spacing: 0.08em; color: var(--spec-ink); grid-row: 1 / 3; }
.step h3 { font-family: var(--text); font-weight: 600; font-size: 1.1rem; line-height: 1.3; }
.step p { color: var(--dim); }

/* --- 15. Bewertungen, FAQ --------------------------------------------- */

.ratings { display: grid; gap: 1rem; }
@media (min-width: 48em) { .ratings { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.rating { display: grid; gap: 0.35rem; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.rating__val { display: flex; align-items: baseline; gap: 0.8rem; }
.rating__val b { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; }
.rating__val span { font-size: var(--fs-small); color: var(--dim); }
.rating__stars { position: relative; display: inline-block; line-height: 0; }
.rating__stars-bg, .rating__stars-fill { display: inline-flex; gap: 2px; }
.rating__stars-bg { color: var(--peach-deep); }
.rating__stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--cobalt); }
.rating__stars svg { width: 15px; height: 15px; flex: 0 0 auto; }
.rating__src { font-size: var(--fs-small); color: var(--dim); }
.rating__src a { color: inherit; }
.ratings__note { font-size: var(--fs-small); color: var(--dim); max-width: 60ch; margin-top: 0.8rem; }

.faq { display: grid; border-top: 1px solid var(--line); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: center;
  padding: 1.1rem 0; font-weight: 600; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 0.8rem; height: 0.8rem; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: 45deg; translate: 0 -3px;
  transition: rotate 0.25s var(--ease), translate 0.25s var(--ease);
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 3px; }
.faq details > p { padding: 0 0 1.2rem; color: var(--dim); max-width: 62ch; }
.faq details > p a { color: var(--cobalt-deep); }

/* --- 16. Reservieren: Tag --------------------------------------------- */

.book { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 62em) { .book { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; } }
.book__text { display: grid; gap: 1.2rem; max-width: 40rem; }
.book__text p { color: var(--dim); }
.book__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }
.book__facts { display: grid; gap: 1.6rem; }
.hours { display: grid; gap: 0; border-top: 1px solid var(--line); }
.hours__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.hours__row span:last-child { text-align: right; color: var(--dim); }
.fact { display: grid; gap: 0.25rem; }
.fact__k { font-size: var(--fs-small); color: var(--dim); }
.fact__v { font-weight: 500; }
.fact__v a { text-decoration-color: var(--cobalt-line); text-underline-offset: 3px; }
.note {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--dim);
}
.note::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--cobalt); flex: 0 0 auto; margin-top: 0.4rem; }

/* Eingebettete Module: Restoo, Karte */
.frame { border: 1px solid var(--line); background: var(--day-up); }
.frame iframe { width: 100%; border: 0; min-height: 640px; }
.frame--map iframe { min-height: 420px; }
.frame__fallback { padding: 0.9rem 1rem; font-size: var(--fs-small); color: var(--dim); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.frame__fallback a { color: var(--cobalt-deep); }

/* --- 17. Karte (Speisekarte) ------------------------------------------ */

.filters { display: grid; gap: 0.9rem; }
.filters__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  min-height: 40px;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font-size: var(--fs-small); font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.chip:hover { border-color: currentColor; }
.chip[aria-pressed="true"] { background: var(--cobalt); color: var(--day); border-color: var(--cobalt); }
.chip[aria-pressed="true"]::before { content: ""; width: 8px; height: 8px; background: currentColor; rotate: 45deg; }
.chip--reset { border-style: dashed; }
.filters__live { font-size: var(--fs-small); color: var(--dim); }

.menu-section { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.menu-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1.2rem; }
.menu-section__note { font-size: var(--fs-small); color: var(--dim); }
.dishes { border-top: 1px solid var(--line); }
.dish {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.dish__name { font-weight: 500; line-height: 1.35; }
.dish__note { font-size: var(--fs-small); color: var(--dim); }
.dish__price { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; text-align: right; }
.dish__price small { font-weight: 400; color: var(--dim); font-size: var(--fs-small); margin-left: 0.25rem; }
.dish__al { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--dim); }
.dish.is-filtered-out { display: none; }
.dishes__empty { padding: 0.9rem 0; font-size: var(--fs-small); color: var(--dim); border-bottom: 1px solid var(--line); }
.menu-notes { display: grid; gap: 0.5rem; margin-top: 2rem; font-size: var(--fs-small); color: var(--dim); max-width: 62ch; }

/* --- 18. Fuß: Blackout ------------------------------------------------- */

.foot { background: var(--night); color: var(--ink); border-top: 1px solid var(--night-line); padding-left: var(--rail); }
.foot__in { padding-block: clamp(3rem, 6vw, 5rem) 1.5rem; display: grid; gap: 2.5rem; }
.foot__grid { display: grid; gap: 2rem; }
@media (min-width: 48em) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot__brand { display: grid; gap: 1rem; align-content: start; }
.foot__brand img { height: 52px; width: auto; }
.foot__brand p { color: var(--ink-dim); font-size: var(--fs-small); max-width: 30ch; }
.foot__col { display: grid; gap: 0.5rem; align-content: start; }
.foot__col h2 { font-family: var(--stencil); font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cobalt-light); margin-bottom: 0.4rem; }
.foot__col a { color: var(--ink); text-decoration: none; }
.foot__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__col li, .foot__col p { color: var(--ink-dim); font-size: var(--fs-base); }
.foot__end {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem;
  padding-top: 1.2rem; border-top: 1px solid var(--night-line);
  font-size: var(--fs-small); color: var(--ink-dim);
}
.foot__made a { color: var(--ink); }

/* --- 19. Mobiles Dock --------------------------------------------------- */

.dock {
  display: none;
  position: fixed; inset: auto 0 0 0; z-index: 55;
  background: var(--night);
  border-top: 1px solid var(--night-line);
  padding: 0.5rem var(--gutter) max(0.5rem, env(safe-area-inset-bottom));
  gap: 0.5rem;
}
.dock a {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 48px;
  text-decoration: none;
  font-size: 0.75rem; font-weight: 600; line-height: 1.15; text-align: center;
  color: var(--ink);
  border: 1px solid var(--night-line);
  border-radius: 2px;
}
.dock a.is-primary { background: var(--cobalt); border-color: var(--cobalt); color: var(--day); }
.dock svg { width: 17px; height: 17px; }
@media (max-width: 55.99em) {
  .dock { display: flex; }
  body { padding-bottom: 74px; }
}

/* --- 20. Bewegung: das Licht kommt hoch -------------------------------- */

/* Ohne JavaScript ist alles sichtbar. Erst die Klasse am <html> setzt den
   Startzustand: Bilder liegen im Dunkel und werden hochgefahren, Text tritt
   aus dem Schwarz. Eine Bewegung, orchestriert, nicht verstreut. */
.js-raise .raise {
  opacity: 0;
  translate: 0 14px;
  transition: opacity var(--raise) var(--ease), translate var(--raise) var(--ease), filter 1.2s var(--ease);
}
.js-raise .raise.is-up { opacity: 1; translate: 0 0; }
.js-raise .raise--pic { translate: 0 0; opacity: 1; filter: brightness(0.12) saturate(0.6); }
.js-raise .raise--pic.is-up { filter: brightness(1) saturate(1); }
.js-raise .raise[data-delay="1"] { transition-delay: 0.12s; }
.js-raise .raise[data-delay="2"] { transition-delay: 0.24s; }
.js-raise .raise[data-delay="3"] { transition-delay: 0.36s; }

/* Der Hero fährt beim Laden als Sequenz hoch: erst der Horizont, dann das Bild, dann der Text. */
.js-raise .hero__floor { transform-origin: left center; scale: 0 1; transition: scale 0.8s var(--ease); }
.js-raise .hero.is-lit .hero__floor { scale: 1 1; }

@media (prefers-reduced-motion: reduce) {
  .js-raise .raise, .js-raise .raise--pic { opacity: 1; translate: 0; filter: none; transition: none; }
  .js-raise .hero__floor { scale: 1 1; transition: none; }
  .btn, .nav__link, .chip, .hero__pic, .faq summary::after { transition: none; }
  .btn:hover { translate: 0; }
}

/* --- 21. Unterseiten-Köpfe ------------------------------------------- */

.page-head { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: end; padding-block: clamp(2.5rem, 6vw, 5rem) 0; }
@media (min-width: 62em) { .page-head { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.page-head__text { display: grid; gap: 1.3rem; padding-bottom: clamp(2rem, 5vw, 4rem); }
.page-head__text h1 { max-width: 14ch; }
.page-head__text p { font-size: var(--fs-lead); color: var(--ink-dim); max-width: 46ch; line-height: 1.5; }
.page-head__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }
.page-head__pic img { width: 100%; }
@media (min-width: 62em) { .page-head__pic img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; } }

.duo { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 62em) { .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.duo--flip > :first-child { order: 2; }
@media (min-width: 62em) { .duo--flip > :first-child { order: 0; } }
.duo__text { display: grid; gap: 1.2rem; max-width: 40rem; }
.duo__text p { color: var(--dim); }
.duo__pics { display: grid; gap: 0.9rem; }
@media (min-width: 48em) { .duo__pics--2 { grid-template-columns: 3fr 2fr; align-items: start; } .duo__pics--row { grid-template-columns: 1fr 1fr; align-items: start; } }

.contact-grid { display: grid; gap: 2rem; }
@media (min-width: 48em) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.social { display: flex; flex-wrap: wrap; gap: 0.8rem; }