@charset "utf-8";
/* ============================================================
   Luca's Ristorante — La Casa della Pizza, Bad Reichenhall
   Gestaltung: italienisches Steingrau, gebrochenes Messing.
   ============================================================ */

@import url("fonts.css");

/* ---------- 1. Tokens ------------------------------------- */
:root {
  /* Palette laut Briefing */
  --kalk:          #F4F2EE;   /* Hintergrund hell  */
  --stein-hell:    #D8D5CF;
  --stein-mittel:  #9A968E;
  --stein-dunkel:  #2E2E2C;   /* Text              */
  --nero:          #23231F;   /* dunkle Sektionen  */
  --messing:       #B08D57;   /* Akzent, sparsam   */

  /* Abgeleitet, damit Kontraste nach WCAG AA sitzen.
     --messing selbst erreicht auf Kalkweiß nur 2,8:1 und ist dort
     ausschließlich Linie, Fläche oder Großschrift.               */
  --messing-tief:  #8A6A3B;   /* 4,5:1 auf Kalkweiß  */
  --messing-hell:  #C9A876;   /* Großschrift auf Nero */
  --stein-text:    #6B6862;   /* 5,0:1 auf Kalkweiß  */
  --stein-lese:    #C6C2BA;   /* Fließtext auf Nero  */

  --linie:         rgba(46, 46, 44, .14);
  --linie-dunkel:  rgba(216, 213, 207, .16);

  /* Typografie */
  --serif: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Raster */
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --max:     78rem;
  --schmal:  46rem;
  --luft:    clamp(4.5rem, 11vw, 9rem);

  /* Bewegung — laut Briefing maximal 400 ms */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dauer: 400ms;
}

/* ---------- 2. Reset -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--kalk);
  color: var(--stein-dunkel);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; image-orientation: from-image; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--messing-tief);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--messing-hell); }

.skip-link {
  position: absolute; left: 1rem; top: -100%;
  z-index: 200; padding: .8rem 1.4rem;
  background: var(--nero); color: var(--kalk);
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  transition: top 200ms var(--ease);
}
.skip-link:focus { top: 1rem; }

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

/* ---------- 3. Bausteine ---------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--schmal { max-width: calc(var(--schmal) + 2 * var(--gutter)); }

.section { padding-block: var(--luft); position: relative; }

.section--dark {
  background: var(--nero);
  color: var(--stein-lese);
}
.section--stein { background: var(--stein-hell); }

/* Feines Filmkorn — gibt den dunklen Flächen Tiefe statt Flachfarbe. */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section--dark > * { position: relative; z-index: 2; }

/* Kleine Kapitälchen-Marke über jeder Überschrift */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--messing-tief);
  margin-bottom: 1.6rem;
}
.eyebrow::after {
  content: "";
  display: block;
  width: 2.6rem; height: 1px;
  margin-top: 1rem;
  background: var(--messing);
}
.section--dark .eyebrow,
.site-footer .eyebrow { color: var(--messing-hell); }
.eyebrow--zentriert { text-align: center; }
.eyebrow--zentriert::after { margin-inline: auto; }

.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -.005em;
  font-size: clamp(2.5rem, 6.2vw, 4.6rem);
  color: var(--stein-dunkel);
}
.section--dark .display { color: var(--kalk); }
.display em { font-style: italic; color: var(--messing); }
.section--dark .display em { color: var(--messing-hell); }

.lead {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 1.95rem);
  line-height: 1.46;
  font-weight: 300;
  color: var(--stein-dunkel);
}
.section--dark .lead { color: var(--stein-hell); }

.muted { color: var(--stein-text); }
.section--dark .muted { color: var(--stein-lese); }

.rule { height: 1px; background: var(--linie); border: 0; margin: 0; }
.section--dark .rule { background: var(--linie-dunkel); }

/* Textlink mit Messing-Unterstrich, der aus der Mitte wächst */
.link {
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--messing), var(--messing));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dauer) var(--ease);
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }

/* Schaltflächen */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1.05rem 2.1rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--messing);
  color: var(--stein-dunkel);
  background: transparent;
  transition: background-color var(--dauer) var(--ease),
              color var(--dauer) var(--ease),
              border-color var(--dauer) var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--messing); color: var(--nero); }
.btn--voll { background: var(--messing); color: var(--nero); }
.btn--voll:hover, .btn--voll:focus-visible { background: transparent; color: var(--messing-hell); }
/* Auf dunklem Grund muss die Umrissvariante hell schreiben. */
.section--dark .btn, .hero .btn { color: var(--kalk); }
.section--dark .btn:hover, .section--dark .btn:focus-visible,
.hero .btn:hover, .hero .btn:focus-visible { color: var(--nero); }
.hero .btn--voll { color: var(--nero); }
/* Der Karten-Knopf steht auf hellem Stein und trägt deshalb Messing. */
.map .btn { background: var(--messing); border-color: var(--messing); color: var(--nero); }
.map .btn:hover, .map .btn:focus-visible { background: transparent; color: var(--messing-tief); }
.btn__tel { font-family: var(--sans); letter-spacing: .06em; text-transform: none; font-size: .95rem; }

/* Scroll-Einblendungen */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dauer) var(--ease), transform var(--dauer) var(--ease);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- 4. Kopfzeile ---------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: transform var(--dauer) var(--ease),
              background-color var(--dauer) var(--ease),
              box-shadow var(--dauer) var(--ease);
}
.site-header::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--linie);
  opacity: 0;
  transition: opacity var(--dauer) var(--ease);
}
.site-header.is-solid {
  background: rgba(244, 242, 238, .88);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
.site-header.is-solid::after { opacity: 1; }
.site-header.is-hidden { transform: translateY(-102%); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1rem, 2.4vw, 1.7rem);
  transition: padding-block var(--dauer) var(--ease);
}
.site-header.is-solid .site-header__inner { padding-block: .85rem; }

.brand { text-decoration: none; display: block; line-height: 1; }
.brand__name {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kalk);
  transition: color var(--dauer) var(--ease), font-size var(--dauer) var(--ease);
}
.brand__sub {
  display: block;
  margin-top: .45rem;
  font-size: .58rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, .62);
  transition: color var(--dauer) var(--ease);
}
.site-header.is-solid .brand__name { color: var(--stein-dunkel); font-size: clamp(1.35rem, 2vw, 1.6rem); }
.site-header.is-solid .brand__sub  { color: var(--stein-text); }

.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.4rem); }
.nav__link {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(244, 242, 238, .82);
  position: relative;
  padding-block: .35rem;
  transition: color var(--dauer) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--messing);
  transition: width var(--dauer) var(--ease);
}
.nav__link:hover::after, .nav__link:focus-visible::after { width: 100%; }
.site-header.is-solid .nav__link { color: var(--stein-text); }
.site-header.is-solid .nav__link:hover { color: var(--stein-dunkel); }

.nav__tel {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 1px solid rgba(176, 141, 87, .55);
  padding: .68rem 1.25rem;
  font-size: .74rem; letter-spacing: .14em;
  text-decoration: none;
  color: var(--kalk);
  white-space: nowrap;
  transition: background-color var(--dauer) var(--ease),
              color var(--dauer) var(--ease),
              border-color var(--dauer) var(--ease);
}
.nav__tel:hover, .nav__tel:focus-visible { background: var(--messing); border-color: var(--messing); color: var(--nero); }
.site-header.is-solid .nav__tel { color: var(--stein-dunkel); border-color: var(--messing); }
.site-header.is-solid .nav__tel:hover { color: var(--nero); }

.nav-toggle { display: none; }

/* ---------- 5. Hero --------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: var(--kalk);
  background: radial-gradient(120% 90% at 50% 42%, #4a2f16 0%, #241a10 45%, var(--nero) 100%);
  overflow: hidden;
}
/* Die Kamerafahrt sitzt auf dem gemeinsamen Rahmen, nicht auf dem Standbild:
   So bewegen sich Standbild und Film im Gleichschritt und die Übernahme ist
   nicht zu sehen. Läge sie nur auf dem Standbild, spränge der Film beim
   Einblenden auf den ungezoomten Zustand zurück. */
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  transform-origin: 50% 46%;
  will-change: transform;
  animation: kamerafahrt 32s ease-in-out infinite alternate;
}

/* Stufe 1 — läuft immer, auch wenn Autoplay gesperrt ist. */
.hero__standbild {
  position: absolute; inset: 0;
  overflow: hidden;
  transition: opacity 600ms var(--ease);
}
.hero__standbild img {
  width: 100%; height: 100%;
  object-fit: cover;
}
@keyframes kamerafahrt {
  from { transform: scale(1.04) translate3d(-0.8%, -0.5%, 0); }
  to   { transform: scale(1.14) translate3d(0.9%,  0.6%, 0); }
}

/* Stufe 2 — der Film. Deckkraft 0 heißt: auch Safaris Abspielsymbol, das als
   Teil des <video> gezeichnet wird, ist durchsichtig. Keine Berührungsannahme,
   damit nichts antippbar ist, was man nicht sieht. */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--ease);
}
.hero__media.film-laeuft .hero__video { opacity: 1; }
.hero__media.film-laeuft .hero__standbild { opacity: 0; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(19, 19, 16, .94) 0%, rgba(19, 19, 16, .55) 38%, rgba(19, 19, 16, .3) 68%, rgba(19, 19, 16, .55) 100%),
    radial-gradient(90% 70% at 50% 55%, transparent 20%, rgba(19, 19, 16, .5) 100%);
}
.hero__inner {
  position: relative; z-index: 3;
  width: 100%;
  padding-block: clamp(3rem, 9vh, 6.5rem);
}
.hero__eyebrow {
  font-size: .72rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--messing-hell);
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
}
.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.7rem, 8vw, 6.4rem);
  line-height: .99;
  letter-spacing: -.012em;
  margin: 0;
  max-width: 15ch;
  text-wrap: balance;
}
.hero__title em { font-style: italic; color: var(--messing-hell); }
.hero__sub {
  margin: clamp(1.6rem, 3.4vw, 2.4rem) 0 0;
  max-width: 40ch;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.65;
  color: rgba(244, 242, 238, .8);
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-top: clamp(2rem, 4vw, 2.8rem);
}
.hero__meta {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.6rem;
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(216, 213, 207, .2);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, .6);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .8rem; }
.hero__meta span::before {
  content: ""; width: 4px; height: 4px;
  background: var(--messing); border-radius: 50%;
  flex: none;
}
.hero__meta span:first-child::before { display: none; }

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 3;
  width: 1px; height: 3.6rem;
  background: linear-gradient(to bottom, transparent, rgba(216, 213, 207, .55));
}
.hero__scroll::after {
  content: ""; position: absolute; inset: auto 0 0 0;
  height: 34%; background: var(--messing);
  animation: schleifen 2.8s var(--ease) infinite;
}
@keyframes schleifen {
  0%   { transform: translateY(-190%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(0);     opacity: 0; }
}

/* ---------- 6. Versprechen -------------------------------- */
.versprechen { text-align: center; }
.versprechen .display { margin-bottom: 2rem; text-wrap: balance; }
.versprechen__text {
  max-width: 54ch;
  margin-inline: auto;
  font-size: 1.06rem;
  color: var(--stein-text);
}
.versprechen__signet {
  margin: clamp(2.6rem, 5vw, 3.6rem) auto 0;
  width: 1px; height: 3rem;
  background: linear-gradient(to bottom, var(--messing), transparent);
}

/* ---------- 7. Verfahren 01–05 ---------------------------- */
.schritte { margin-top: clamp(3.5rem, 7vw, 5.5rem); }

.schritt {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.6rem, 5vw, 4rem);
  border-top: 1px solid var(--linie-dunkel);
}
.schritt:first-child { border-top: 0; padding-top: 0; }

.schritt__text { max-width: 46ch; }
.schritt__ziffer {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 7vw, 5.2rem);
  line-height: .85;
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--messing);
  margin-bottom: 1.4rem;
  letter-spacing: .04em;
  /* Cormorant setzt sonst Mediävalziffern — als Umriss wäre „01“ unlesbar. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
/* Ohne text-stroke (Firefox älter) bleibt die Ziffer sonst unsichtbar. */
@supports not (-webkit-text-stroke: 1px red) {
  .schritt__ziffer { color: var(--messing); }
}
.schritt__titel {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.16;
  color: var(--kalk);
  margin-bottom: .9rem;
}
.schritt__titel em { font-style: italic; color: var(--messing-hell); }
.schritt__text p { color: var(--stein-lese); }
.schritt__media { position: relative; }

@media (min-width: 62rem) {
  .schritt { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); }
  .schritt--links .schritt__media { order: -1; }
}

.schritt__abschluss {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2.4rem, 5vw, 3.4rem);
  border-top: 1px solid var(--linie-dunkel);
  text-align: center;
}
.schritt__abschluss p {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.35;
  font-weight: 300;
  color: var(--kalk);
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}
.schritt__abschluss em { font-style: italic; color: var(--messing-hell); }

/* Bildrahmen mit feiner Messingkante */
.figur { margin: 0; position: relative; }
.figur img { width: 100%; }
.figur__rahmen {
  position: relative;
  overflow: hidden;
  background: var(--stein-hell);
}
.section--dark .figur__rahmen { background: #1a1a17; }
.figur__rahmen::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid rgba(176, 141, 87, .28);
  pointer-events: none;
}
.figur figcaption {
  margin-top: .95rem;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stein-text);
}
.section--dark .figur figcaption { color: var(--stein-mittel); }

/* Seitenverhältnisse */
.ar-3-2   { aspect-ratio: 3 / 2; }
.ar-4-3   { aspect-ratio: 4 / 3; }
.ar-1-1   { aspect-ratio: 1 / 1; }
.ar-3-4   { aspect-ratio: 3 / 4; }
.ar-16-9  { aspect-ratio: 16 / 9; }
.ar-3-2 img, .ar-4-3 img, .ar-1-1 img, .ar-3-4 img, .ar-16-9 img,
.ar-3-2 video, .ar-16-9 video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 8. Platzhalter -------------------------------- */
/* Gestalteter Leerplatz: sieht gewollt aus, bis ein Foto kommt.
   Austausch = <div class="platz"> durch <img> ersetzen.        */
.platz {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 11rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 2rem;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .05) 0%, transparent 55%),
    var(--stein-hell);
  color: var(--stein-text);
  overflow: hidden;
}
.section--dark .platz {
  background:
    linear-gradient(135deg, rgba(216, 213, 207, .05) 0%, transparent 55%),
    #1c1c19;
  color: var(--stein-mittel);
}
.platz::before {
  content: "";
  position: absolute; inset: .75rem;
  border: 1px solid rgba(176, 141, 87, .34);
  pointer-events: none;
}
.platz__wort {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.1;
  color: var(--messing-tief);
}
.section--dark .platz__wort { color: var(--messing-hell); }
.platz__note {
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  max-width: 26ch;
  line-height: 1.7;
}
.platz__linie { width: 2.2rem; height: 1px; background: var(--messing); opacity: .6; }

/* ---------- 9. La tavola — Tellerstrecke ------------------- */
/* Fünf Kacheln, alle im selben Seitenverhältnis. Umbrochene Reihen werden
   zentriert, damit eine unvollständige Reihe gewollt aussieht statt links
   angeschlagen. */
.teller {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.6rem, 1.4vw, 1.1rem);
  margin-top: clamp(2.6rem, 5vw, 4rem);
}
.teller__feld {
  margin: 0;
  flex: 0 1 calc(50% - clamp(.6rem, 1.4vw, 1.1rem) / 2);
  max-width: 22rem;
}
@media (min-width: 40rem) {
  .teller__feld { flex-basis: calc(33.333% - clamp(.6rem, 1.4vw, 1.1rem) * 2 / 3); }
}
@media (min-width: 64rem) {
  /* Drei statt fünf Spalten: Essensfotos brauchen Fläche. Die Deckelung hält
     sie zugleich klein genug, dass die Schnappschuss-Herkunft nicht auffällt. */
  .teller__feld { flex-basis: calc(33.333% - clamp(.6rem, 1.4vw, 1.1rem) * 2 / 3); max-width: none; }
}
.teller__feld .figur__rahmen { overflow: hidden; }
.teller__feld img { transition: transform 600ms var(--ease); }
.teller__feld:hover img { transform: scale(1.04); }

/* ---------- 10. Speisekarte ------------------------------- */
.karte__kopf { text-align: center; }

.karte__leiste {
  position: sticky;
  top: var(--kopfhoehe, 0px);
  z-index: 60;
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  background: rgba(244, 242, 238, .93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-block: 1px solid var(--linie);
  transition: top var(--dauer) var(--ease);
}
/* Tritt die Kopfzeile zurück, rückt die Kartenleiste an den Rand. */
body.kopf-weg .karte__leiste { top: 0; }

.karte__leiste-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .9rem;
}

.karte__kapitel {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 -.2rem;
  padding: .2rem;
}
.karte__kapitel::-webkit-scrollbar { display: none; }
.karte__kapitel a {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--stein-text);
  white-space: nowrap;
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: color var(--dauer) var(--ease), border-color var(--dauer) var(--ease);
}
.karte__kapitel a:hover { color: var(--stein-dunkel); }
/* Der Reiter zeigt jetzt eine Auswahl an, nicht mehr nur die Scrollposition —
   deshalb deutlicher als eine Haarlinie. */
.karte__kapitel a.is-aktiv {
  color: var(--nero);
  border-color: var(--messing);
  border-bottom-width: 2px;
}
.karte__kapitel a[role="tab"] { cursor: pointer; }

/* Preisebenen-Umschalter */
.ebene {
  display: inline-flex;
  position: relative;
  border: 1px solid var(--linie);
  background: rgba(255, 255, 255, .5);
  flex: none;
}
.ebene__knopf {
  position: relative;
  z-index: 2;
  padding: .62rem 1.15rem;
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stein-text);
  white-space: nowrap;
  transition: color var(--dauer) var(--ease);
}
.ebene__knopf[aria-pressed="true"] { color: var(--nero); }
.ebene__pille {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  background: var(--messing);
  transition: transform var(--dauer) var(--ease), width var(--dauer) var(--ease);
}
.no-js .ebene__pille { display: none; }
.no-js .ebene__knopf[aria-pressed="true"] { background: var(--messing); color: var(--nero); }

.karte__hinweis {
  margin-top: 1.6rem;
  text-align: center;
  font-size: .82rem;
  color: var(--stein-text);
  min-height: 1.6em;
}

/* Gänge */
.gang { margin-top: clamp(3.2rem, 6vw, 5rem); scroll-margin-top: 9rem; }
.gang__kopf { margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.gang__titel {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 300;
  line-height: 1.15;
}
.gang__titel em { font-style: italic; color: var(--messing-tief); }
.gang__unter {
  margin-top: .6rem;
  font-size: .88rem;
  color: var(--stein-text);
  max-width: 52ch;
}

.gang__liste {
  display: grid;
  gap: clamp(1.5rem, 2.6vw, 2rem) clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 56rem) {
  .gang__liste--zwei { grid-template-columns: 1fr 1fr; }
}

/* Eine Speise */
.speise { break-inside: avoid; }
.speise__kopf {
  display: flex;
  align-items: baseline;
  gap: .55rem;
}
.speise__name {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.25;
  flex: 0 1 auto;
}
.speise__punkte {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 2px;
  align-self: flex-end;
  margin-bottom: .42rem;
  background-image: radial-gradient(circle, var(--stein-mittel) .9px, transparent 1.1px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  opacity: .8;
}
.speise__preis {
  flex: none;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
  color: var(--stein-dunkel);
}
.speise__zutaten {
  margin: .35rem 0 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--stein-text);
  max-width: 44ch;
}
.zusatz {
  font-size: .68em;
  vertical-align: .45em;
  color: var(--stein-mittel);
  letter-spacing: .04em;
  margin-left: .1em;
}

/* Zwei Preisebenen: eine im DOM sichtbar, eine verborgen. */
.karte[data-ebene="restaurant"] [data-preis="lieferung"],
.karte[data-ebene="lieferung"]  [data-preis="restaurant"] { display: none; }
.karte[data-ebene="restaurant"] [data-nur="lieferung"],
.karte[data-ebene="lieferung"]  [data-nur="restaurant"] { display: none; }

/* Getränke — kompaktere Raster */
.tropfen-gruppe + .tropfen-gruppe { margin-top: clamp(2.2rem, 4vw, 3.2rem); }
.tropfen-gruppe .gang__titel { font-family: var(--serif); font-weight: 400; }

.tropfen {
  display: grid;
  gap: .1rem 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .tropfen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .tropfen--drei { grid-template-columns: repeat(3, 1fr); } }

.tropfen__zeile {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding-block: .58rem;
  border-bottom: 1px solid var(--linie);
}
.tropfen__name { flex: 0 1 auto; font-size: .97rem; }
.tropfen__name small { display: block; font-size: .78rem; color: var(--stein-text); }
.tropfen__punkte {
  flex: 1 1 auto; min-width: 1rem; height: 2px; align-self: flex-end; margin-bottom: .34rem;
  background-image: radial-gradient(circle, var(--stein-mittel) .9px, transparent 1.1px);
  background-size: 6px 2px; background-repeat: repeat-x; background-position: 0 100%;
  opacity: .7;
}
.tropfen__preise {
  flex: none;
  display: flex;
  gap: 1.4rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: .95rem;
}
.tropfen__preis { min-width: 4.6rem; text-align: right; }
.tropfen__preis small {
  display: block;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stein-mittel);
  font-variant-numeric: normal;
}

.gang__zeilen-kopf {
  display: flex;
  justify-content: flex-end;
  gap: 1.4rem;
  padding-bottom: .5rem;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stein-mittel);
}
.gang__zeilen-kopf span { min-width: 4.6rem; text-align: right; }

/* Aufpreise */
.aufpreise {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.5rem;
  font-size: .9rem;
  color: var(--stein-text);
}
.aufpreise li { display: inline-flex; gap: .5rem; align-items: baseline; }
.aufpreise b { font-weight: 500; color: var(--stein-dunkel); font-variant-numeric: tabular-nums; }

/* Pflichthinweise */
.pflicht {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 2.8rem);
  border-top: 1px solid var(--linie);
  font-size: .86rem;
  color: var(--stein-text);
  max-width: 68ch;
}
.pflicht p { margin-bottom: .8em; }

details.zusatzstoffe { margin-top: 1.4rem; }
details.zusatzstoffe > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--messing-tief);
}
details.zusatzstoffe > summary::-webkit-details-marker { display: none; }
details.zusatzstoffe > summary::after {
  content: "+";
  font-size: 1rem;
  line-height: 1;
  transition: transform var(--dauer) var(--ease);
}
details.zusatzstoffe[open] > summary::after { transform: rotate(45deg); }
.zusatzstoffe__liste {
  margin-top: 1.2rem;
  display: grid;
  gap: .35rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  font-size: .84rem;
}
.zusatzstoffe__liste li { display: flex; gap: .6rem; }
.zusatzstoffe__liste b { font-weight: 500; color: var(--stein-dunkel); min-width: 1.4rem; }

/* ---------- 11. Über uns ---------------------------------- */
.ueber { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 62rem) { .ueber { grid-template-columns: .95fr 1.05fr; } }
.ueber__text .display { margin-bottom: 1.8rem; }
.ueber__zitat {
  margin: clamp(2rem, 4vw, 2.8rem) 0 0;
  padding-left: 1.6rem;
  border-left: 1px solid var(--messing);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  line-height: 1.45;
  color: var(--stein-dunkel);
}
.ueber__zitat footer {
  margin-top: 1rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stein-text);
}

/* ---------- 12. Ambiente ---------------------------------- */
/* Ausgerichtete Reihe: Jede Kachel wächst im Verhältnis ihres eigenen
   Seitenverhältnisses (--ar), und trägt dasselbe als aspect-ratio. Dadurch
   sind alle Höhen gleich, ohne dass ein Bild beschnitten werden müsste —
   Hochformat, Quadrat und Querformat stehen nebeneinander in einer Linie. */
.ambiente-raster {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.6rem, 1.4vw, 1.1rem);
}
.ambiente-raster > .galerie__feld {
  margin: 0;
  flex: 0 0 100%;          /* schmal: eines unter dem anderen */
}
.ambiente-raster .figur__rahmen { aspect-ratio: var(--ar); }
@media (min-width: 60rem) {
  .ambiente-raster > .galerie__feld {
    flex-grow: var(--ar);
    flex-shrink: 1;
    flex-basis: 0;
  }
}

.galerie__feld { position: relative; overflow: hidden; background: var(--stein-hell); margin: 0; }
.galerie__feld img { transition: transform 600ms var(--ease); }
.galerie__feld:hover img { transform: scale(1.035); }
.galerie__feld::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid rgba(176, 141, 87, .22);
  pointer-events: none;
}

/* ---------- 13. Reservierung ------------------------------ */
.karten { display: grid; gap: 1px; background: var(--linie-dunkel); margin-top: clamp(2.6rem, 5vw, 4rem); }
@media (min-width: 54rem) { .karten { grid-template-columns: 1fr 1fr; } }
.karte-block {
  background: var(--nero);
  padding: clamp(2rem, 4vw, 3rem);
}
.karte-block__label {
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--messing-hell);
  margin-bottom: 1.2rem;
}
.karte-block__titel {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  color: var(--kalk);
  margin-bottom: .7rem;
}
.karte-block p { color: var(--stein-lese); font-size: .96rem; }
.karte-block__nummer {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 300;
  letter-spacing: .01em;
  color: var(--kalk);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(176, 141, 87, .5);
  padding-bottom: .2rem;
  transition: color var(--dauer) var(--ease), border-color var(--dauer) var(--ease);
}
.karte-block__nummer:hover, .karte-block__nummer:focus-visible {
  color: var(--messing-hell); border-color: var(--messing-hell);
}

/* Öffnungszeiten */
.zeiten { margin-top: clamp(2.6rem, 5vw, 3.6rem); display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
@media (min-width: 54rem) { .zeiten { grid-template-columns: 1.35fr .65fr; align-items: start; } }

.zeiten__tabelle { width: 100%; border-collapse: collapse; }
.zeiten__tabelle caption {
  text-align: left;
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--messing-hell);
  padding-bottom: 1.2rem;
}
.zeiten__tabelle th, .zeiten__tabelle td {
  text-align: left;
  padding-block: .95rem;
  border-bottom: 1px solid var(--linie-dunkel);
  font-weight: 400;
  vertical-align: baseline;
}
.zeiten__tabelle th { color: var(--kalk); font-size: .95rem; width: 42%; }
.zeiten__tabelle td {
  color: var(--stein-lese);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: .97rem;
}

/* Ruhetag — bewusst als eigene Fläche, nicht als Tabellenzeile. */
.ruhetag {
  border: 1px solid rgba(176, 141, 87, .45);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  text-align: center;
  background: rgba(176, 141, 87, .06);
}
.ruhetag__label {
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--messing-hell);
}
.ruhetag__tag {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--kalk);
  margin-block: .6rem .5rem;
}
.ruhetag__note { font-size: .84rem; color: var(--stein-mittel); margin: 0; }

/* ---------- 14. Kontakt & Anfahrt -------------------------- */
.anfahrt { display: grid; gap: clamp(2.4rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .anfahrt { grid-template-columns: .8fr 1.2fr; } }

.adresse { font-style: normal; }
.adresse__zeile {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 300;
  line-height: 1.35;
}
.kontaktliste { margin-top: clamp(2rem, 4vw, 2.6rem); }
.kontaktliste > div {
  display: grid;
  gap: .25rem;
  padding-block: 1.05rem;
  border-top: 1px solid var(--linie);
}
.kontaktliste dt {
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--stein-text);
}
.kontaktliste dd { margin: 0; font-size: 1.02rem; }
.kontaktliste a { text-decoration: none; }

/* Karte erst auf Klick — keine Google-Verbindung ohne Einwilligung. */
.map {
  position: relative;
  background: var(--stein-hell);
  border: 1px solid var(--linie);
}
.map__platzhalter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem);
  height: 100%;
  background-image:
    linear-gradient(var(--linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 44px 44px;
}
.map__hinweis { font-size: .84rem; color: var(--stein-text); max-width: 40ch; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }

.parkhinweis {
  margin-top: 1.2rem;
  font-size: .86rem;
  color: var(--stein-text);
  display: flex;
  gap: .8rem;
}
.parkhinweis::before { content: "—"; color: var(--messing-tief); flex: none; }

/* ---------- 15. Fußzeile ---------------------------------- */
.site-footer {
  background: var(--nero);
  color: var(--stein-lese);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
}
.site-footer__oben {
  display: grid;
  gap: clamp(2.2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--linie-dunkel);
}
@media (min-width: 54rem) { .site-footer__oben { grid-template-columns: 1.2fr .8fr .8fr; } }
.site-footer__marke {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kalk);
  line-height: 1.1;
}
.site-footer__claim {
  margin-top: .9rem;
  font-size: .74rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--stein-mittel);
}
.site-footer h2 {
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--messing-hell);
  margin-bottom: 1.2rem;
}
.site-footer li { padding-block: .34rem; }
.site-footer a { text-decoration: none; }
.site-footer__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 2rem;
  font-size: .78rem;
  color: var(--stein-mittel);
}
.site-footer__unten nav { display: flex; flex-wrap: wrap; gap: 1.6rem; }

/* ---------- 16. Rechtstexte ------------------------------- */
.rechtstext { padding-top: calc(var(--luft) + 4rem); }
.rechtstext h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 2.5rem; }
.rechtstext h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin: 2.8rem 0 .9rem;
}
.rechtstext h3 { font-size: .95rem; font-weight: 500; margin: 1.8rem 0 .5rem; font-family: var(--sans); }
.rechtstext p, .rechtstext li { color: var(--stein-text); font-size: .97rem; }
.rechtstext ul { list-style: disc; padding-left: 1.3rem; margin-bottom: 1.15em; }
.rechtstext li { padding-block: .2rem; }
.rechtstext a { color: var(--stein-dunkel); }

/* ---------- 17. Mobil ------------------------------------- */
@media (max-width: 60rem) {
  .nav__gruppe {
    position: fixed;
    inset: 0;
    /* Muss über dem Seiteninhalt liegen, sonst scheint die Seite durch das
       geöffnete Menü und die Einträge verschmelzen mit dem Hintergrund. */
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.6rem;
    padding: 6rem var(--gutter) 3rem;
    background: var(--nero);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1.5rem);
    transition: opacity var(--dauer) var(--ease),
                transform var(--dauer) var(--ease),
                visibility var(--dauer);
  }
  .site-header.is-offen .nav__gruppe {
    opacity: 1; visibility: visible; transform: none;
  }
  /* Marke und Schaltfläche bleiben über der Menüfläche bedienbar. */
  .brand { position: relative; z-index: 3; }

  /* Wichtig: Die verfestigte Kopfzeile trägt backdrop-filter, und ein
     Filter macht das Element zum Bezugsrahmen für position:fixed. Bliebe er
     beim geöffneten Menü stehen, spannte sich die Menüfläche nur über die
     Kopfzeile statt über den Bildschirm — der Rest liefe ohne Hintergrund
     über den Seiteninhalt. Solange offen, also kein Filter. */
  .site-header.is-offen {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header.is-offen .brand__name { color: var(--kalk); }
  .site-header.is-offen .brand__sub  { color: rgba(244, 242, 238, .62); }
  .nav__gruppe .nav__link {
    font-family: var(--serif);
    font-size: 1.9rem;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--kalk);
  }
  .nav__gruppe .nav__tel { border-color: var(--messing); margin-top: 1rem; }

  /* Muss `.site-header.is-solid .nav__link` schlagen (gleiche Spezifität,
     steht aber weiter oben): sonst steht dunkelgrauer Text auf der dunklen
     Menüfläche und ist praktisch unlesbar. */
  .site-header.is-offen .nav__link,
  .site-header.is-offen .nav__tel { color: var(--kalk); }
  .site-header.is-offen .nav__tel { border-color: var(--messing); }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem; height: 2.75rem;
    align-items: flex-end;
    position: relative;
    z-index: 3;
  }
  .nav-toggle span {
    display: block; height: 1px; width: 1.6rem;
    background: var(--kalk);
    transition: transform var(--dauer) var(--ease),
                opacity var(--dauer) var(--ease),
                width var(--dauer) var(--ease),
                background-color var(--dauer) var(--ease);
  }
  .site-header.is-solid .nav-toggle span { background: var(--stein-dunkel); }
  .site-header.is-offen .nav-toggle span { background: var(--kalk); }
  .site-header.is-offen .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header.is-offen .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.is-offen .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 1.6rem; }
  .nav-toggle span:nth-child(3) { width: 1rem; }

  .nav { gap: 0; }
  body.nav-offen { overflow: hidden; }
}

@media (max-width: 48rem) {
  .karte__leiste-inner { justify-content: flex-start; }
  .ebene { width: 100%; }
  .ebene__knopf { flex: 1; text-align: center; padding-inline: .5rem; }
  .speise__preis { font-size: .98rem; }
  .hero { min-height: 92svh; }
}

/* ---------- 18. Rücksicht --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__media { animation: none; transform: scale(1.04); }
  .hero__scroll::after { animation: none; }
}

@media print {
  .site-header, .hero__media, .karte__leiste, .map, .hero__scroll { display: none !important; }
  /* Auf Papier gehört die ganze Karte aufs Blatt, nicht nur der offene Gang. */
  .gang[hidden] { display: block !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1.5rem; }
  .section--dark { background: #fff !important; color: #000 !important; }
  .karte [data-preis="lieferung"] { display: none !important; }
}