/* ==========================================================================
   DUDU 31
   Werte ausschliesslich aus tokens.css. Kein Farbwert in dieser Datei.

   Zwei Regeln tragen das ganze Blatt:
   1  Bedienelemente sind Pillen, Flaechen sind scharfkantig. Keine Karten,
      keine Rahmen um Inhalt, keine Schatten unter Text. Gruppiert wird mit
      Haarlinie und Leerraum – so wie es das Original tut.
   2  Ein Mass fuer alles: .mass zentriert mit gleichem Rand links und rechts.
      Es gibt keinen Seitenversatz mehr.
   ========================================================================== */

/* =============================================================== 1. Basis */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Browserflaechen, die man sonst dem Browser ueberlaesst */
  accent-color: var(--c-accent);
  caret-color: var(--c-ink);
  scrollbar-color: var(--c-line) transparent;
}

body {
  margin: 0;
  background-color: var(--bg-tief);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-gedaempft);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tap-min) + var(--sp-10) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--text-hell);
  margin: 0 0 var(--sp-15);
  text-wrap: balance;
}

p { margin: 0 0 var(--sp-10); }
ul, ol { margin: 0 0 var(--sp-10); padding: 0; list-style: none; }
address { font-style: normal; }
img { max-width: 100%; height: auto; display: block; }
abbr[title] { text-decoration: none; color: var(--c-accent); }
strong { font-weight: var(--fw-bold); color: var(--c-ink); }

a { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:focus-visible { text-decoration-color: var(--c-accent); }
@media (hover: hover) { a:hover { text-decoration-color: var(--c-accent); } }

/* Auf dunklem Grund muss der Fliesstext-Link hell sein. Ohne diese Regel
   erbt er --c-ink und steht mit 1,28:1 praktisch unsichtbar auf Aubergine. */
.section--dunkel a:not(.btnx):not(.telefon),
.section--aubergine a:not(.btnx):not(.telefon),
.section--aubergine-deckend a:not(.btnx):not(.telefon),
.section--foto a:not(.btnx):not(.telefon),
.menue a { color: var(--c-surface); }

::selection { color: var(--c-selection-text); background-color: var(--c-selection-bg); }

:focus-visible {
  outline: var(--fokus-dicke) solid var(--c-fokus);
  outline-offset: var(--fokus-luft);
}
.section--dunkel :focus-visible,
.section--aubergine :focus-visible,
.section--aubergine-deckend :focus-visible,
.section--foto :focus-visible,
.ankunft :focus-visible,
.section--nacht :focus-visible,
.menue :focus-visible { outline-color: var(--akzent-rose); }

.klein { font-size: var(--fs-small); color: var(--c-text-leise); }

/* ==================================================== 2. Zweisprachigkeit */
html[lang="de"] [data-i18n="en"] { display: none; }
html[lang="en"] [data-i18n="de"] { display: none; }

/* ============================================================== 3. Mass
   width:min() statt Prozent: der Rand links und rechts ist bei jeder
   Fensterbreite identisch, und nichts kann breiter werden als der Viewport. */
.mass {
  width: min(100% - 2 * var(--rand-seite), var(--container-max));
  margin-inline: auto;
}
.mass--eng { max-width: 620px; }


/* ========================================================= 4. Sprungmarke */
.skip-link {
  position: fixed; left: var(--sp-10); top: calc(-1 * var(--sp-50));
  z-index: var(--z-modal);
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--radius-interaktiv);
  background: var(--c-ink); color: var(--c-surface);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: calc(var(--sp-10) + env(safe-area-inset-top, 0px)); }

/* ======================================================= 5. Kopf und Menue */
.kopf {
  position: fixed; top: 0; right: 0; left: auto;
  /* ueber allem, auch ueber dem Menue-Panel: die Staebchen sind das X */
  z-index: var(--z-kopf);
  display: flex; align-items: center; justify-content: flex-end;
  /* Im Hero durchsichtig; ab 100 px Scrollweg (Fuehler) ein Grund in Tief mit Blur */
  background: transparent;
  transition: background-color var(--dur-kopf) var(--ease-out), backdrop-filter var(--dur-kopf) var(--ease-out);
  border-bottom-left-radius: 0;
  gap: var(--sp-10);
  padding: var(--sp-5) 1.25rem;
  padding-top:   calc(var(--sp-5)  + env(safe-area-inset-top, 0px));
  /* Auf Geraeten mit Notch und runden Ecken liegt sonst das Menue darunter –
     im Querformat ist safe-area-inset-right bis zu 59 px. */
  padding-left:  calc(1.25rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1.25rem + env(safe-area-inset-right, 0px));
  /* nie breiter als das Fenster, egal was drinsteht */
  max-width: 100vw;
  box-sizing: border-box;
  pointer-events: none;
}
.kopf.ist-fest {
  background: var(--kopf-grund);
  -webkit-backdrop-filter: blur(var(--kopf-blur));
          backdrop-filter: blur(var(--kopf-blur));
}
body.menue-offen .kopf { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.kopf > * { position: relative; }
.kopf > * { pointer-events: auto; }
.kopf-fuehler { position: absolute; top: 0; left: 0; width: 1px; height: 100px; pointer-events: none; }

/* Drei Punkte im Klartext, nur wo Platz ist */
.kopf__nav { display: none; align-items: center; gap: var(--sp-5); margin-right: var(--sp-10); }
@media (min-width: 900px) { .kopf__nav { display: flex; } }
.kopf__nav a {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min); padding-inline: var(--sp-5);
  font-family: var(--font-ui); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-hell); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.kopf__nav a:focus-visible { color: var(--akzent-orange); }
@media (hover: hover) { .kopf__nav a:hover { color: var(--akzent-orange); } }
.kopf__punkt { color: var(--text-gedaempft); }

.sprache { display: flex; gap: 1px; }
.sprache__btn {
  min-width: 44px; min-height: var(--tap-min);
  border: 0; background: transparent;
  font-family: var(--font-ui); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wider);
  color: var(--text-hell);
  opacity: .55; cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.sprache__btn[aria-pressed="true"] { opacity: 1; color: var(--akzent-orange); text-decoration: underline; text-underline-offset: 0.3em; }
@media (hover: hover) { .sprache__btn:hover { opacity: 1; } }

/* Das Logo links neben den Staebchen. Nicht anklickbar. */
/* Logo und Name links neben den Staebchen. Nicht anklickbar. */
.kopf__marke { display: inline-flex; align-items: center; gap: 10px; margin-right: 20px; }
.kopf__logo { height: 22px; width: auto; display: block; }
.kopf__name { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-hell); white-space: nowrap; }
/* Gestaffelt: bis 900 px keine Navigationspunkte (siehe .kopf__nav), bis
   600 px kein Schriftzug neben dem Logo, bis 480 px keine Sprachwahl in der
   Leiste – die steht dann im Menue. Uebrig bleiben Neon links (im Hero)
   und die Staebchen rechts; nichts kann sich mehr ueberlappen. */
@media (max-width: 600px) { .kopf__name { display: none; } .kopf__marke { margin-right: 12px; } }
@media (max-width: 480px) { .kopf > .sprache { display: none; } }
.menue__sprache { display: none; gap: var(--sp-5); margin-bottom: var(--sp-15); }
@media (max-width: 480px) { .menue__sprache { display: flex; } }
.menue__sprache .sprache__btn { color: var(--text-hell); }

/* --- Das Staebchen-Menue (Vorbild noburestaurants.com) ------------------
   Ruhe: zwei Striche, exakt parallel. Hover oder Antippen: sie drehen sich
   gegeneinander und kreuzen sich wie Staebchen. Offen: ein X – das Motiv
   ist zugleich das Schliessen-Zeichen. Drehpunkt in der Mitte des Strichs. */
.burger {
  display: grid; place-items: center;
  min-width: var(--tap-min); min-height: var(--tap-min);
  padding: 0 var(--sp-5);
  border: 0; background: transparent; cursor: pointer;
  color: var(--akzent-orange);
}
/* Das Menue-Icon als SVG (Masse: 34 x 2 px, Abstand 9 px – siehe viewBox 34x13).
   Je Strich liegen zwei Polygone uebereinander: gleichmaessig 2 px (Ruhe,
   offen) und verjuengt 3,2 -> 1,1 px (Hover); sie blenden ueber. */
.staebchen-menue { display: block; width: var(--staebchen-laenge); height: 13px; overflow: visible; }
.staebchen-menue__strich {
  transform-box: fill-box; transform-origin: 50% 50%;
  transition: transform var(--dur-staebchen) var(--ease-staebchen);
}
.staebchen-menue__ruhe, .staebchen-menue__spitz {
  fill: currentColor; stroke: currentColor; stroke-width: 0.4; stroke-linejoin: round;
  transition: opacity var(--dur-staebchen) var(--ease-staebchen), fill var(--dur-staebchen) var(--ease-staebchen), stroke var(--dur-staebchen) var(--ease-staebchen);
}
.staebchen-menue__spitz { opacity: 0; }
.burger { transition: color var(--dur-staebchen) var(--ease-staebchen); }
/* :focus-visible und :active gelten ueberall; :hover nur dort, wo es
   wirklich einen Zeiger gibt – sonst bleibt der Zustand auf dem Handy
   nach dem Antippen haengen. */
.burger:focus-visible, .burger:active { color: var(--akzent-rose); }
.burger:is(:focus-visible, :active) .staebchen-menue__strich:first-child { transform: rotate(-18deg) translateY(2px); }
.burger:is(:focus-visible, :active) .staebchen-menue__strich:last-child  { transform: rotate(18deg) translateY(-2px); }
.burger:is(:focus-visible, :active) .staebchen-menue__ruhe  { opacity: 0; }
.burger:is(:focus-visible, :active) .staebchen-menue__spitz { opacity: 1; }
@media (hover: hover) {
  .burger:hover { color: var(--akzent-rose); }
  .burger:hover .staebchen-menue__strich:first-child { transform: rotate(-18deg) translateY(2px); }
  .burger:hover .staebchen-menue__strich:last-child  { transform: rotate(18deg) translateY(-2px); }
  .burger:hover .staebchen-menue__ruhe  { opacity: 0; }
  .burger:hover .staebchen-menue__spitz { opacity: 1; }
}
/* Offen: zum X, unveraendert – die Striche ruecken um den halben Abstand
   zusammen (11 px / 2), gleichmaessige Dicke, keine Verjuengung. */
.burger[aria-expanded="true"] .staebchen-menue__strich:first-child { transform: translateY(5.5px) rotate(-45deg); }
.burger[aria-expanded="true"] .staebchen-menue__strich:last-child  { transform: translateY(-5.5px) rotate(45deg); }
.burger[aria-expanded="true"] .staebchen-menue__ruhe  { opacity: 1; }
.burger[aria-expanded="true"] .staebchen-menue__spitz { opacity: 0; }
.burger[aria-expanded="true"] { color: var(--akzent-rose); }
/* Ohne Bewegung: nur der Farbwechsel */
@media (prefers-reduced-motion: reduce) {
  .staebchen-menue__strich, .staebchen-menue__ruhe, .staebchen-menue__spitz, .burger { transition: none; }
  .burger:is(:hover, :focus-visible, :active):not([aria-expanded="true"]) .staebchen-menue__strich { transform: none; }
  .burger:is(:hover, :focus-visible, :active):not([aria-expanded="true"]) .staebchen-menue__ruhe  { opacity: 1; }
  .burger:is(:hover, :focus-visible, :active):not([aria-expanded="true"]) .staebchen-menue__spitz { opacity: 0; }
}

.menue-schatten {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--c-backdrop);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.menue-schatten.ist-da { opacity: 1; }

.menue {
  position: fixed; inset: 0 0 0 auto; z-index: var(--z-modal);
  width: min(100%, 380px);
  display: flex; flex-direction: column;
  /* oben Platz fuer die Kopfleiste, die ueber dem Panel liegt */
  padding: calc(var(--tap-min) + var(--sp-15) + var(--sp-10) + env(safe-area-inset-top, 0px)) var(--sp-15)
           calc(var(--sp-15) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-dunkel);
  color: var(--text-hell);
  transform: translateX(100%);
  transition: transform var(--dur-ui) var(--ease-panel);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menue.ist-da { transform: translateX(0); }

/* Ohne diese Zeile gewinnt display:flex gegen das hidden-Attribut: das
   geschlossene Panel steht dann rechts neben der Seite und erzeugt auf
   schmalen Geraeten horizontales Scrollen. */
.menue[hidden], .menue-schatten[hidden] { display: none; }


.menue__liste { flex: 1; margin: 0; }
.menue__liste a {
  display: block;
  padding: var(--sp-5) 0;
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.5;
  color: var(--text-hell);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .menue__liste a:hover { color: var(--akzent-orange); } }
.menue__liste a[aria-current="true"] { color: var(--akzent-orange); }

.menue__fuss { padding-top: var(--sp-15); border-top: var(--hairline) solid var(--linie-rose); }
.menue__tel {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  font-family: var(--font-display); font-size: var(--fs-h5);
  color: var(--akzent-rose); text-decoration: none; font-variant-numeric: tabular-nums;
}
.menue__adresse { font-size: var(--fs-small); color: var(--text-gedaempft); margin: var(--sp-3) 0 0; }

body.menue-offen { overflow: hidden; }

/* ========================================================== 6. Abschnitte */
.section { padding-block: var(--section-py); scroll-margin-top: 90px; position: relative; background: var(--bg, var(--bg-dunkel)); overflow: clip; /* der Lichtfleck ragt ueber den Rand */ }
.section > .mass { position: relative; z-index: 1; }
/* Ein warmer Lichtfleck am Rand jedes Abschnitts, ohne Kontur, hoechstens 0,08 */
.section::after, .fuss::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(240px, 40vw, 640px); aspect-ratio: 1;
  left: var(--fleck-x, 90%); top: var(--fleck-y, 10%);
  transform: translate(-50%, -50%);
  background: var(--lichtfleck);
  opacity: var(--lichtfleck-deckung);
}
.fuss { position: relative; overflow: clip; background: var(--bg, var(--bg-dunkel)); }
.fuss > .mass { position: relative; z-index: 1; }
/* Nichts steht mittig ausser Hero und Fuss */
.section--mitte { text-align: left; }

.section a:not(.btnx):not(.telefon):not(.kbtn) { color: var(--text-hell); }
.section :focus-visible { outline-color: var(--akzent-rose); }
/* Eine grosse Jahreszahl hinter einem Abschnitt, still (nur 2008 laeuft) */
.section--mitte .lead, .section--mitte p { margin-inline: 0; }
/* Die Nacht: der Grund der Seite. Text hell, Titel weiss. */
.section--nacht { background: var(--bg-dunkel); color: var(--text-gedaempft); }
.section--nacht .titel { color: var(--text-hell); }
.section--nacht a:not(.btnx):not(.telefon) { color: var(--akzent-orange); }
.section--nacht :focus-visible { outline-color: var(--c-surface); }
.section--mitte { text-align: center; }
.section--mitte .lead, .section--mitte p { margin-inline: auto; }
.section--grau { background: var(--c-surface-alt); }
.section--dunkel { color: var(--c-overlay-light-soft); }
.section--aubergine { background: var(--c-aubergine); color: var(--c-overlay-light-soft); }

.section--foto { color: var(--c-surface); }
/* Die Abdunklung muss ueber dem Bild liegen. Seit das Foto ein echtes <img>
   im Rahmen ist statt ein background-image, entscheidet die Stapelreihenfolge
   – ohne z-index lag der Schleier darunter und der Text stand bei 1,0:1. */
.section--foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(23, 18, 26, 0.55);
}
/* Das Original legt Aubergine deckend ueber das Innenraumfoto. Hier bleibt
   der Gastraum sichtbar: die Speisekarte folgt auf eine Blockflaeche
   und darf nicht aussehen wie ihr Nachbar. Der Knopf ist
   deshalb weiss statt orange – auf dem Foto hat Weiss genug Luft. */
.section--aubergine-deckend::before { background: var(--bg-dunkel); opacity: .78; }
.section--foto > .mass { position: relative; }

/* Der Koch laeuft ueber die volle Breite, ohne Text, wie im Original. */
.vollbild { margin: 0; }
.vollbild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 768px) { .vollbild img { aspect-ratio: 21 / 9; } }

/* ========================================================= 7. Typografie
   Echte Spruenge: Titel zu Lead ist Faktor 3, Lead zu Text Faktor 1,25.
   Alles per clamp, kein fester Pixelwert. */
/* Grosse Ueberschriften: Cormorant Garamond Medium, gemischte Schreibung,
   fast ohne Sperrung. Die kleinen Beschriftungen bleiben in Versalien. */
.titel {
  font-size: var(--fs-h2);
  margin-bottom: var(--abstand-titel);
  text-wrap: balance;
  font-weight: var(--fw-display-leicht);
  letter-spacing: var(--ls-display-gross);
}
.titel--hell { color: var(--c-surface); }
.titel--rose { color: var(--c-accent); }

.unterTitel {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-leise);
  margin: 0 0 var(--sp-10);
}
.unterTitel--hell { color: var(--c-overlay-light-soft); }

.lead { font-size: var(--fs-lead); line-height: var(--lh-snug); max-width: var(--measure); }
.section .mass > p + p { margin-top: var(--abstand-block); }
.lead--hell { color: var(--c-surface); }
.section p { max-width: var(--measure); text-wrap: pretty; }

.hinweis {
  font-size: var(--fs-small);
  padding-left: var(--sp-10);
  border-left: var(--hairline) solid var(--c-accent);
  max-width: var(--measure);
}

/* =========================================================== 9. Bewegung
   Der einzige Auftritt der Seite: opacity 0 -> 1 und 16 px von unten,
   700 ms. Er laeuft genau einmal (app.js meldet das Element danach ab).
   Mehrere Elemente desselben Abschnitts folgen mit 80 ms Versatz; --i
   setzt app.js. Ohne JavaScript und bei reduced motion steht alles da. */
.js [data-ein] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-auftritt), transform 700ms var(--ease-auftritt);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-ein].ist-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-ein] { opacity: 1; transform: none; transition: none; }
}

/* ================================================ 9c. Der Staebchen-Zeiger
   Nur ueber Klickbarem, nur mit Maus. Formularfelder behalten den
   Textzeiger, Deaktiviertes not-allowed. Der Zeiger ist nie das einzige
   Signal: Links sind unterstrichen, Knoepfe haben Rahmen und Hover. */
@media (hover: hover) and (pointer: fine) {
  /* :root davor hebt die Spezifitaet ueber die cursor:pointer der Bausteine */
  :root a, :root button, :root [role="button"], :root .klickbar, :root label[for], :root summary,
  :root input[type="checkbox"], :root input[type="radio"], :root select { cursor: var(--zeiger-staebchen); }
  :root input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), :root textarea { cursor: text; }
  :root button[disabled], :root [aria-disabled="true"], :root .btnx[disabled] { cursor: not-allowed; }
}

/* ============================================================ 10. Buttons */
.btnx {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min);
  padding: var(--btn-py) var(--sp-30);
  font-family: var(--btn-font); font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: var(--btn-tracking);
  max-width: 100%;
  text-align: center; text-wrap: balance;
  text-decoration: none; cursor: pointer;
  color: var(--c-ink); background: transparent;
  border: var(--hairline) solid var(--c-ink);
  border-radius: var(--radius-interaktiv);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-druck) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btnx:hover { color: var(--c-surface); background: var(--c-ink); border-color: var(--c-ink); }
}
.btnx:active { transform: translateY(1px); }
.btnx--gross { font-size: var(--fs-base); padding-block: calc(var(--btn-py) + 3px); }

.btnx--voll { color: var(--c-ink); background: var(--c-accent); border-color: var(--c-accent); }
@media (hover: hover) and (pointer: fine) {
  .btnx--voll:hover { color: var(--c-ink); background: var(--c-accent-soft); border-color: var(--c-accent-soft); }
}
.btnx--hell { color: var(--c-surface); border-color: var(--c-surface); }
@media (hover: hover) and (pointer: fine) {
  .btnx--hell:hover { color: var(--c-ink); background: var(--c-surface); }
}
.btnx--warm { color: var(--c-accent-warm); border-color: var(--c-accent-warm); }
@media (hover: hover) and (pointer: fine) {
  .btnx--warm:hover { color: var(--c-ink); background: var(--c-accent-warm); border-color: var(--c-accent-warm); }
}
.btnx[disabled] { opacity: .45; cursor: not-allowed; }

/* Die Telefonnummer ist auf dunklem Grund rose, auf hellem Grund Tinte.
   Rose auf Weiss ergibt 1,69:1 – die Nummer fuer Reservierungen am selben
   Tag waere damit praktisch unlesbar. Der Akzent bleibt als Unterstrich. */
.telefon {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-display); font-size: var(--fs-h4);
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  font-variant-numeric: tabular-nums;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .telefon:hover { text-decoration-color: var(--c-ink); }
}

.section--dunkel .telefon,
.section--foto .telefon,
.section--aubergine-deckend .telefon { color: var(--c-accent); text-decoration-color: currentColor; }
.section--dunkel .telefon:hover,
@media (hover: hover) { .section--foto .telefon:hover { text-decoration-color: var(--c-surface); } }

.section--aubergine .telefon,
.telefon--warm { color: var(--c-accent-warm); text-decoration-color: currentColor; }

.res-cta {
  position: fixed;
  /* Handy: unten in der MITTE. --cta-x haelt die Zentrierung fest, damit
     der Auftritt ueber --cta-y sie nicht ueberschreibt – beide
     Verschiebungen stecken in einem transform. */
  --cta-x: -50%;
  --cta-y: 0px;
  left: 50%; right: auto;
  bottom: var(--cta-unten);
  /* Die Breite haengt am Fenster, nicht an einem festen Wert. */
  max-width: calc(100vw - 2 * var(--sp-10) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  overflow: hidden;
  z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: center;
  min-height: var(--cta-hoehe); padding: var(--btn-py) var(--btn-px);
  font-family: var(--btn-font); font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: var(--btn-tracking); text-decoration: none;
  color: var(--bg-tief); background: var(--akzent-rose);
  border: var(--hairline) solid var(--akzent-rose);
  border-radius: var(--radius-interaktiv);
  box-shadow: var(--shadow-md);
  /* Nie mitten im Wort umbrechen ("reservier-en") */
  hyphens: none; word-break: keep-all; overflow-wrap: normal; white-space: nowrap;
  transform: translate(var(--cta-x), var(--cta-y));
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-druck) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .res-cta:hover { background: var(--akzent-orange); border-color: var(--akzent-orange); }
}
.res-cta:active { --cta-y: 1px; }

/* ======================================================= 10b. Die Geschichte
   Drei Kapitel, je Bild- und Texthaelfte, randlos, Seiten tauschend.
   01 dunkel mit Hintergrundfoto, 02 hell, 03 dunkel. Harte Kanten. */
.geschichte { position: relative; z-index: 1; }
.kap {
  position: relative; z-index: 2;
  /* exakt halbe/halbe in Rasterbruchteilen, nicht in vw: vw rechnet die
     Scrollleiste mit und laesst die Kante um deren Breite wandern */
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 70vh;
  background: var(--bg, var(--bg-dunkel));
  color: var(--text-gedaempft);
  overflow: clip;
}
.kap--bild-links .kap__bild { order: 1; }
.kap--bild-links .kap__text { order: 2; }
/* Kapitel 02 stand auf Off-White. Keine hellen Flaechen mehr ausser dem
   Zitat: es traegt jetzt den mittleren Aubergine-Ton und hebt sich durch
   ihn von den beiden tieferen Nachbarn ab. */
.kap--hell { background: var(--bg-mittel); color: var(--text-gedaempft); }
.kap--hell :focus-visible { outline-color: var(--akzent-rose); }

/* Kapitel 01: Hintergrundfoto und Schleier von links */
.kap__grund {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  filter: brightness(0.45) saturate(1.15);
}
.kap__schleier {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(23, 18, 26, 0.82) 0%, rgba(23, 18, 26, 0.55) 55%, rgba(23, 18, 26, 0.3) 100%);
}
.geschichte__jahr {
  position: absolute; z-index: 0; left: -0.04em; bottom: -0.12em;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(8rem, 18vw, 20rem); line-height: 1;
  color: var(--akzent-orange); opacity: 0.07;
  pointer-events: none; user-select: none; will-change: transform;
}

/* Die Texthaelfte */
.kap__text {
  position: relative; z-index: 2;
  display: grid; align-items: center; justify-items: center;
  padding-block: clamp(4rem, 8vh, 7rem);
  padding-inline: clamp(3rem, 6vw, 7rem);
}
.kap__inhalt { max-width: 46ch; width: 100%; }
.kap__label {
  margin: 0; padding-top: 1rem; position: relative;
  font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--akzent-orange); max-width: none;
}
.kap__label::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 1px; background: var(--akzent-orange); }
.kap__titel {
  margin: 2rem 0 0;
  font-family: var(--font-display); font-weight: var(--fw-display-leicht);
  font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.15; letter-spacing: 0.01em; text-transform: none;
  color: var(--text-hell); max-width: 14ch;
}
.kap--hell .kap__titel { color: var(--text-hell); }
.kap--hell .kap__label, .kap--hell .kap__hinweis { color: var(--akzent-orange); }
.kap--hell .kap__label::before, .kap--hell .kap__punkt { background: var(--akzent-orange); }
.kap__fliess { margin: 2.5rem 0 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.7; max-width: none; }
.kap__hinweis { margin: 2.5rem 0 0; font-size: 0.8rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--akzent-orange); max-width: none; }

/* Die Bildhaelfte: randlos, ohne Vorhang – sie blendet mit allem anderen auf */
.kap__bild { position: relative; z-index: 1; overflow: hidden; min-height: 70vh; height: 100%; }
.kap__bild img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--foto-waerme); }

/* Der Zeitstrang: 1 px in der Mitte, ein Punkt an der Hoehe jedes Labels */
.kap::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--strang-dunkel);
}
.kap--hell::before { background: var(--strang-hell); }
.kap__punkt {
  position: absolute; z-index: 3; pointer-events: none;
  left: 50%; top: var(--punkt-y, 50%);
  width: 7px; height: 7px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--akzent-orange);
  transform: scale(0);
  transition: transform 220ms var(--ease-weich);
}
.kap__punkt.ist-da { transform: scale(1); transition-duration: 400ms; }

@media (max-width: 767px) {
  .kap { grid-template-columns: 1fr; min-height: 0; }
  .kap__bild, .kap--bild-links .kap__bild { order: 1; min-height: 0; height: 52vh; }
  .kap__text, .kap--bild-links .kap__text { order: 2; padding-inline: 1.75rem; padding-block: 3rem; justify-items: start; }
  .kap__titel { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .kap::before, .kap__punkt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kap__punkt { transform: scale(1); transition: none; }
}

/* ========================================================= 10e. Die Galerie
   Ein durchgehendes Bilderband ueber die volle Breite, das langsam von LINKS
   nach RECHTS gleitet. Die Reihe steht im HTML zweimal hintereinander; die
   Animation schiebt sie von -50 % auf 0, also um genau eine Reihenbreite –
   dadurch schliesst das Ende nahtlos an den Anfang an.

   Damit -50 % exakt einer Reihe entspricht, traegt JEDES Bild denselben
   rechten Rand (kein gap: bei gap fehlt am Ende genau eine Luecke und das
   Band wuerde springen).

   Die Dauer ist ausgerechnet, nicht geschaetzt:
     Handy   40 Bilder x (360 px Breite + 10 px Rand) = 14 800 px
             bei 35 px/s  ->  423 s
     Desktop 40 Bilder x (540 px Breite + 10 px Rand) = 22 000 px
             bei 35 px/s  ->  629 s
   Die Breite ergibt sich aus der festen Hoehe und dem Seitenverhaeltnis 3:2,
   das alle 40 Bilder teilen. */
.galerie__kopf { margin-bottom: var(--abstand-bild); }

.band {
  --band-hoehe: 240px;
  --band-luecke: var(--sp-5);
  --band-dauer: 423s;
  width: 100%; overflow: hidden;      /* nie waagerecht scrollbar */
}
.band__spur {
  display: flex; width: max-content;
  animation: band-lauf var(--band-dauer) linear infinite;
  will-change: transform;
}
@keyframes band-lauf {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
/* Jedes Bild ist ein Knopf. Der Knopf traegt den Aussenabstand, damit
   -50 % weiterhin exakt einer Reihe entspricht. */
.band__knopf {
  display: block; flex: none;
  margin: 0 var(--band-luecke) 0 0; padding: 0;
  border: 0; border-radius: 0; background: none;
  cursor: zoom-in;
  touch-action: manipulation;          /* kein Zoom beim Doppeltippen */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.band__knopf:focus-visible { outline: 2px solid var(--akzent-rose); outline-offset: -2px; }
.band__bild {
  display: block;
  height: var(--band-hoehe); width: auto;
  border: 0; border-radius: 0;         /* eckig, ohne Rahmen und Schatten */
  filter: var(--foto-waerme);
  pointer-events: none;                /* der Knopf faengt Maus und Finger */
  -webkit-user-drag: none; user-select: none;
}

/* Anhalten: Zeiger darauf, Finger darauf, oder nicht im Bild (app.js 9) */
@media (hover: hover) {
  .band:hover .band__spur { animation-play-state: paused; }
}
.band.ruht .band__spur,
.band.haelt .band__spur { animation-play-state: paused; }

@media (min-width: 768px) {
  .band { --band-hoehe: 360px; --band-dauer: 629s; }
}

/* Ohne Bewegung: keine Animation, dafuer eine Reihe zum selbst Wischen.
   Die zweite Reihe faellt weg, sonst saehe man jedes Bild doppelt. */
@media (prefers-reduced-motion: reduce) {
  .band { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .band__spur { animation: none; transform: none; }
  .band__knopf[aria-hidden="true"] { display: none; }
}

/* ------------------------------------------------- 10f. Die Grossansicht
   Ein <dialog> in der obersten Ebene des Browsers: es liegt ueber dem
   festen Reservieren-Knopf und allem anderen, ohne dass ein z-index
   noetig waere, und bringt Fokusfalle und Escape mit. */
.lupe {
  /* Ausdruecklich gesetzt, nicht dem Browser ueberlassen: Safari gibt einem
     <dialog> sonst eigene Raender und es blieben oben und unten schmale
     Streifen, durch die die Seite hindurchschien. */
  position: fixed; inset: 0;
  width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(0, 0, 0, 0.95);
  overflow: hidden;
  opacity: 0; transition: opacity 200ms var(--ease-out);
}
.lupe[open] { display: flex; align-items: center; justify-content: center; }
.lupe.ist-da { opacity: 1; }
.lupe::backdrop { background: rgba(0, 0, 0, 0.95); }

.lupe__bild {
  max-width: calc(100% - 2 * var(--sp-15));
  max-height: calc(100% - 2 * var(--sp-30));
  width: auto; height: auto;
  object-fit: contain;                 /* nie verzerrt, nie beschnitten */
  opacity: 1; transition: opacity 200ms var(--ease-out);
}
.lupe.blaettert .lupe__bild { opacity: 0; }

.lupe__zu {
  position: absolute; z-index: 2;
  top: calc(var(--sp-5) + env(safe-area-inset-top, 0px));
  right: calc(var(--sp-5) + env(safe-area-inset-right, 0px));
  display: grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  padding: 0; border: 0; background: none; color: #FFFFFF;
  cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.lupe__pfeil {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  padding: 0; border: 0; background: none; color: #FFFFFF;
  cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.lupe__pfeil .staebchen-pfeil { color: #FFFFFF; width: 26px; height: 26px; }
.lupe__pfeil--zurueck { left: calc(var(--sp-5) + env(safe-area-inset-left, 0px)); }
.lupe__pfeil--vor     { right: calc(var(--sp-5) + env(safe-area-inset-right, 0px)); }
/* Auf dem Handy wird gewischt; die Pfeile waeren dort nur im Weg. */
@media (max-width: 767px) { .lupe__pfeil { display: none; } }
.lupe__zu:focus-visible, .lupe__pfeil:focus-visible { outline: 2px solid var(--akzent-rose); outline-offset: 2px; }

.lupe__zaehler {
  position: absolute; z-index: 2; left: 0; right: 0;
  bottom: calc(var(--sp-10) + env(safe-area-inset-bottom, 0px));
  margin: 0; text-align: center;
  font-family: var(--font-ui); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wider); font-variant-numeric: tabular-nums;
  color: var(--text-gedaempft);
}

/* Die Seite dahinter steht still. Die Lage wird in app.js gemerkt und
   beim Schliessen wiederhergestellt – sonst springt das iPhone nach oben. */
body.lupe-offen { position: fixed; left: 0; right: 0; overflow: hidden; }
/* Beim Schliessen wird die gemerkte Lage sofort wiederhergestellt. Ohne
   diese Klasse wuerde das weiche Scrollen der Seite die Ruecksprung-
   bewegung ueber Sekunden strecken und unterwegs abbrechen. */
html.ohne-weich { scroll-behavior: auto !important; }

@media (prefers-reduced-motion: reduce) {
  .lupe, .lupe__bild { transition: none; }
  .lupe { opacity: 1; }
  .lupe.blaettert .lupe__bild { opacity: 1; }
}

/* ============================================================== 11. Zitat */
/* Das Zitat: Bild links, Zitat rechts, exakt halbe/halbe, auf Off-White */
.zitat-sektion {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;   /* dieselbe Kante wie in den Kapiteln */
  min-height: 80vh;
  background: var(--bg-hell);
  overflow: clip;
}
.zitat__bild { position: relative; overflow: hidden; min-height: 80vh; height: 100%; }
.zitat__bild picture { display: block; height: 100%; }
.zitat__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; filter: var(--foto-waerme); }
.zitat {
  margin: 0; display: grid; align-items: center; justify-items: center;
  padding-block: clamp(4rem, 8vh, 7rem); padding-inline: clamp(3.5rem, 7vw, 9rem);
}
.zitat__inhalt { position: relative; max-width: 30ch; }
.zitat__zeichen {
  position: absolute; z-index: 0; left: -30px; top: -40px;
  font-family: var(--font-serif); font-weight: 300; font-size: clamp(7rem, 15vw, 13rem); line-height: 1;
  color: var(--akzent-orange); opacity: 0;
  transform: scale(0.85); transform-origin: 0 0;
  transition: opacity 700ms var(--ease-auftritt), transform 700ms var(--ease-auftritt);
  pointer-events: none; user-select: none;
}
.js .zitat__zeichen.ist-da, html:not(.js) .zitat__zeichen { opacity: 0.16; transform: none; }
.zitat blockquote { margin: 0; position: relative; z-index: 1; }
.zitat p {
  font-family: var(--font-serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.8rem, 3.2vw, 3rem); line-height: 1.38; letter-spacing: 0.005em;
  color: var(--text-auf-hell); margin: 0; max-width: none;
}
.zitat figcaption { position: relative; z-index: 1; margin-top: 3.5rem; display: grid; gap: 8px; }
.zitat__name {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--akzent-orange-auf-hell);
}
.zitat__name::before { content: ""; width: 48px; height: 1px; background: var(--akzent-orange-auf-hell); flex: none; }
.zitat__rolle { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(26, 20, 24, 0.6); }
@media (max-width: 767px) {
  .zitat-sektion { grid-template-columns: 1fr; min-height: 0; }
  .zitat__bild { min-height: 0; height: 48vh; }
  .zitat { padding-inline: 1.75rem; padding-block: 3rem; justify-items: start; }
  .zitat p { font-size: clamp(1.35rem, 6vw, 1.9rem); }
  .zitat__zeichen { left: -10px; top: -30px; font-size: 6rem; }
}
@media (prefers-reduced-motion: reduce) { .zitat__zeichen { opacity: 0.16; transform: none; transition: none; } }

/* ================================================= 12. Asymmetrische Blöcke
   Gleichmaessige Raster sind der Template-Look. Diese drei Bloecke teilen
   bewusst ungleich, damit die Seite eine Leserichtung bekommt. */
/* min-width:0 auf den Kindern: ohne das setzt die Mindestbreite des
   laengsten Inhalts die Spalte und sprengt bei 320 px den Viewport. */
.karte-zeiten, .res { display: grid; gap: var(--sp-30); }
.karte-zeiten > *, .res > * { min-width: 0; }

@media (min-width: 900px) {
  .karte-zeiten { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-50); align-items: start; }
  .res          { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-50); align-items: start; }
}

/* ======================================================== 15. Zeiten, ÖPNV */
.zeiten { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sp-15); margin: 0; }
.zeiten dt { font-size: var(--fs-small); letter-spacing: var(--ls-wide); }
.zeiten dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.zeiten dt, .zeiten dd { padding-block: var(--sp-5); border-top: var(--hairline) solid var(--c-overlay-light-soft); }


/* ============================================================ 17. Formulare */
.formular { margin: 0; }
.paar { display: grid; gap: 0; }
@media (min-width: 560px) {
  .paar { grid-template-columns: 1fr 1fr; gap: var(--sp-15); }
  .paar--drei { grid-template-columns: repeat(3, 1fr); }
}

.feld { position: relative; margin: 0 0 var(--sp-10); }
.feld label {
  display: block; font-size: var(--fs-small); letter-spacing: var(--ls-wide);
  margin-bottom: 4px; color: var(--c-ink);
}
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: var(--tap-min);
  padding: 10px 0;
  font-family: var(--font-body); font-size: var(--fs-base);
  color: var(--c-ink); background: transparent;
  border: 0; border-bottom: var(--hairline) solid var(--c-line);
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.feld textarea { min-height: 0; resize: vertical; }
.feld select { appearance: none; -webkit-appearance: none; padding-right: 36px; }
@media (hover: hover) { .feld input:hover, .feld select:hover, .feld textarea:hover { border-bottom-color: var(--c-text-muted); } }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-bottom-color: var(--c-ink); outline-offset: 1px; }
.feld input[aria-invalid="true"], .feld select[aria-invalid="true"] { border-bottom-color: var(--c-fehler); }
.feld input::placeholder, .feld textarea::placeholder { color: var(--c-text-muted); }

.feld--haken { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: start; margin-top: var(--sp-10); }
.feld--haken input { width: 24px; height: 24px; min-height: 0; margin-top: 1px; }
.feld--haken label { font-size: var(--fs-small); letter-spacing: 0; margin: 0; }
.feld--haken .fehler { grid-column: 1 / -1; }

.fehler { display: block; font-size: var(--fs-small); color: var(--c-fehler); margin-top: 4px; }
.erfolg {
  margin-top: var(--sp-10); padding: var(--sp-10) 0;
  border-top: var(--hairline) solid var(--c-accent);
  color: var(--c-ink); font-size: var(--fs-small);
}

/* Auf dunklem Grund */
.section--dunkel .feld label,
.section--dunkel .unterTitel { color: var(--c-surface); }
.section--dunkel .klein,
.section--aubergine .klein,
.section--foto .klein,
.section--aubergine-deckend .klein { color: var(--c-text-muted); }
.section--dunkel .feld input,
.section--dunkel .feld select,
.section--dunkel .feld textarea {
  color: var(--c-surface); border-bottom-color: var(--c-overlay-light-soft);
}
.section--dunkel .feld input:focus,
.section--dunkel .feld select:focus,
.section--dunkel .feld textarea:focus { border-bottom-color: var(--c-surface); }
.section--dunkel .fehler { color: var(--c-fehler-hell); }
.section--dunkel .erfolg { color: var(--c-surface); }
.section--dunkel .feld select option { color: var(--c-ink); }

/* ============================================================= 19. Fussbereich
   "Our Hours": drei Spalten am Desktop, eine auf dem Handy, dazwischen
   Haarlinien in Rose. Beschriftungen in Versalien Orange, Werte gross
   und hell. Keine Karte. */
.fuss {
  padding-block: var(--section-py);
  color: var(--text-hell);
}
.fuss a { color: var(--text-hell); text-decoration-color: var(--linie-rose); }
.fuss a:focus-visible { color: var(--akzent-orange); text-decoration-color: currentColor; }
@media (hover: hover) { .fuss a:hover { color: var(--akzent-orange); text-decoration-color: currentColor; } }
.fuss__titel {
  margin: 0 0 var(--sp-30);
  text-align: center;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--text-hell);
}
.fuss__spalten { display: grid; gap: var(--sp-15); }
.fuss__spalte { min-width: 0; padding-block: var(--sp-10); border-top: var(--hairline) solid var(--linie-rose); }
@media (min-width: 768px) {
  /* Zwei Spalten: die Oeffnungszeiten stehen jetzt allein beim
     Speisekarten-Abschnitt, hier bleiben Adresse und Kontakt. */
  .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .fuss__spalte { border-top: 0; padding-inline: var(--sp-15); border-left: var(--hairline) solid var(--linie-rose); }
  .fuss__spalte:first-child { border-left: 0; padding-left: 0; }
}
.fuss__label {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-ui); font-weight: var(--fw-body);
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--akzent-orange);
}
.fuss__wert { margin: 0; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: var(--lh-normal); color: var(--text-hell); max-width: none; }
.fuss__zeiten { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--sp-10); }
.fuss__zeiten dt { text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: 1rem; align-self: baseline; }
.fuss__zeiten dd { margin: 0; font-variant-numeric: tabular-nums; }
.fuss__tel { font-family: var(--font-display); font-size: 1.35em; color: var(--akzent-rose); text-decoration: none; }
@media (hover: hover) { .fuss__tel:hover { color: var(--akzent-orange); } }

.fuss__anfahrt { margin-top: var(--sp-30); text-align: center; }
.fuss__punkt { color: var(--text-gedaempft); }
.btnx--rose, .fuss .btnx--rose { color: var(--bg-tief); background: var(--akzent-rose); border-color: var(--akzent-rose); }
@media (hover: hover) and (pointer: fine) {
  .btnx--rose:hover, .fuss .btnx--rose:hover { color: var(--bg-tief); background: var(--akzent-orange); border-color: var(--akzent-orange); }
}

.fuss__unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-10);
  margin-top: var(--sp-30); padding-top: var(--sp-15);
  border-top: var(--hairline) solid var(--linie-rose);
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-gedaempft);
}
.fuss__copy { margin: 0; max-width: none; }
.fuss__nav { display: flex; gap: var(--sp-15); }
.fuss__nav a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--text-gedaempft); }

/* ============================================================ 20. Ab 768px */
@media (min-width: 560px) {
  .btnx { white-space: nowrap; }
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .res-cta {
    --cta-x: 0px;
    left: auto;
    right:  calc(var(--sp-15) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--sp-15) + env(safe-area-inset-bottom, 0px));
    min-width: 0;
  }
  .kopf { padding: var(--sp-10) var(--sp-15); padding-top: calc(var(--sp-10) + env(safe-area-inset-top, 0px)); }
  .section { padding-block: var(--section-py-gross); }
}

/* ============================================ 21. Bewegung abschaltbar
   Aus jeder Animation wird ein einfaches Einblenden. Bewegung, die einen
   Weg zurueckliegt, faellt ganz weg. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bildrahmen__bild { transform: none !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   22. Blockflaechen
   Wie auf der alten Seite: ein Abschnitt ist eine vollflaechige Farbflaeche
   ueber die ganze Breite, mit harter Kante oben und unten. Dazwischen liegen
   helle Abschnitte. Beim Scrollen sieht man dadurch sofort, dass ein neuer
   Bereich beginnt.

   Aufbau wie im Original: grosse Ueberschrift mittig, darunter eine kleinere
   Zeile in Versalien, am Fuss der Pfeil zum naechsten Abschnitt.

   Aubergine #3c303f und Orange #fd8350 stammen beide aus der Original-CSS.
   Gemessen: Orange auf Aubergine 5,06:1, heller Fliesstext 5,94:1.
   ========================================================================== */
.section--block {
  background-color: var(--c-aubergine);
  color: var(--c-overlay-light-soft);
  /* Harte Kante: kein Verlauf, kein Schatten, kein Radius. Der Block
     beginnt und endet sichtbar. */
  border: 0;
  box-shadow: none;
}

.section--block .titel { color: var(--c-accent-warm); }
.section--block .lead { color: var(--c-surface); }
.section--block .unterTitel { color: var(--c-overlay-light-soft); }
.section--block strong { color: var(--c-surface); }

/* Die kleine Versalzeile unter der Ueberschrift */
.block__zeile {
  font-family: var(--font-ui);
  font-size: var(--fs-h6);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-accent-warm);
  margin: calc(-1 * var(--sp-5)) 0 var(--sp-30);
}
.section--block.section--mitte .block__zeile { margin-inline: auto; }

/* Der Pfeil zum naechsten Abschnitt, am Fuss des Blocks */
.block__pfeil {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  width: fit-content;
  margin: var(--sp-50) auto 0;
  min-height: var(--tap-min);
  padding-inline: var(--sp-10);
  color: var(--c-accent-warm);
  text-decoration: none;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.block__pfeil svg { transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .block__pfeil:hover svg { transform: translateY(4px); }
}

/* Formular- und Listenteile auf der Blockflaeche */
.section--block .feld label,
.section--block .zeiten dt { color: var(--c-surface); }
.section--block .feld input,
.section--block .feld select,
.section--block .feld textarea {
  color: var(--c-surface); border-bottom-color: var(--c-overlay-light-soft);
}
.section--block .feld input:focus,
.section--block .feld select:focus,
.section--block .feld textarea:focus { border-bottom-color: var(--c-surface); }
.section--block .feld select option { color: var(--c-ink); }
.section--block .fehler { color: var(--c-fehler-hell); }
.section--block .erfolg { color: var(--c-surface); }
.section--block .klein { color: var(--c-text-muted); }
.section--block .hinweis { border-left-color: var(--c-accent-warm); }
.section--block .telefon { color: var(--c-accent-warm); text-decoration-color: currentColor; }

/* Knoepfe auf der Blockflaeche. Ohne diese Regel erbt .btnx die Tintenfarbe
   und stand mit 1,28:1 auf Aubergine – gemessen bei "Bestellen" und
   "Galerie ansehen". Gilt automatisch fuer jeden weiteren Block. */
.section--block .btnx:not(.btnx--voll) {
  color: var(--c-surface);
  border-color: var(--c-surface);
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .section--block .btnx:not(.btnx--voll):hover {
    color: var(--c-ink); background: var(--c-surface); border-color: var(--c-surface);
  }
}

@media (prefers-reduced-motion: reduce) {
  .block__pfeil svg { transition: none; }
}


/* ==========================================================================
   23. Bildbewegung
   Zwei Dinge in einem System, damit nichts gegeneinander arbeitet:

   1  Ein sehr langsamer Zoom von scale(1) auf scale(1.15), waehrend das Bild
      durch den sichtbaren Bereich wandert, dazu ein Seitwaerts-Versatz von
      insgesamt drei Prozent. Er soll nicht auffallen, wenn man hinsieht –
      nur dafuer sorgen, dass die Flaeche nicht tot wirkt.

   2  Das Bild laeuft dem Scrollen hinterher. Weil der folgende Abschnitt
      deckend ist und mit normaler Geschwindigkeit hochwandert, schiebt er
      sich dabei Stueck fuer Stueck ueber das Bild – und gibt es beim
      Zurueckscrollen wieder frei. Genau das macht auf der alten Seite das
      Parallax-Modul von Slider Revolution.

   Bewegt wird ausschliesslich transform. Der Rahmen schneidet ab.
   ========================================================================== */
.bildrahmen {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
}
.bildrahmen__bild {
  position: absolute;
  /* Vorrat an allen vier Seiten, damit beim Versatz keine Kante auftaucht */
  inset: -10%;
  transform: translate3d(0, 0, 0) scale(1);
}
.bildrahmen__bild img { width: 100%; height: 100%; object-fit: cover; filter: var(--foto-waerme); }


/* Vollbild-Abschnitte: der Rahmen gibt die Hoehe vor */
.vollbild { margin: 0; position: relative; }
.bildrahmen--breit { position: relative; inset: auto; aspect-ratio: 3 / 2; }
@media (min-width: 768px) { .bildrahmen--breit { aspect-ratio: 21 / 9; } }

/* Abschnitte mit Bild im Hintergrund */
.section--foto { position: relative; }
.bildrahmen--fuellend { position: absolute; inset: 0; }
.section--foto > .mass { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .bildrahmen__bild { transform: none !important; }
}

/* ==========================================================================
   24. Reservieren und Catering
   Zwei Bloecke nebeneinander, auf dem Handy untereinander. Je Block ein
   Telefon-Knopf (gefuellt) und ein E-Mail-Knopf (Umriss), beide ueber die
   volle Breite des Blocks. Kein Formular.
   ========================================================================== */
.kpaar-sektion { color: var(--text-gedaempft); }
.kpaar-sektion .titel { color: var(--text-hell); }
.kpaar-sektion :focus-visible { outline-color: var(--akzent-rose); }

.kpaar { display: grid; gap: var(--sp-50); align-items: start; }
@media (min-width: 768px) { .kpaar { grid-template-columns: 1fr 1fr; gap: var(--sp-30); } }
.kpaar__block { min-width: 0; }
.kpaar__block .lead { margin-bottom: var(--sp-30); }
.kpaar__zeile { margin: 0 0 var(--sp-10); max-width: none; }
.kpaar__hinweis { margin: var(--sp-15) 0 0; font-size: var(--fs-small); color: var(--text-gedaempft); max-width: none; }

.kbtn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; box-sizing: border-box;
  min-height: 48px;
  padding-block: 1.1rem; padding-inline: var(--sp-10);
  border-radius: var(--radius-interaktiv);
  font-family: var(--btn-font); font-size: var(--fs-small);
  letter-spacing: var(--btn-tracking); text-transform: uppercase;
  text-decoration: none;
  hyphens: none; word-break: keep-all; overflow-wrap: normal;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-druck) var(--ease-out);
}
.kbtn { text-decoration: none; }
.kbtn--voll   { background: var(--akzent-rose); color: var(--text-auf-hell); border: 1px solid var(--akzent-rose); font-variant-numeric: tabular-nums; font-size: var(--fs-h6); }
.kbtn--umriss { background: transparent;        color: var(--akzent-rose);   border: 1px solid var(--akzent-rose); }
@media (hover: hover) and (pointer: fine) {
  .kbtn--voll:hover   { background: var(--akzent-orange); border-color: var(--akzent-orange); }
  .kbtn--umriss:hover { background: var(--akzent-rose); color: var(--text-auf-hell); }
}
.kbtn:active { transform: translateY(1px); }

/* ---------------------------------------------- Der Buchungsbereich
   Ein Umschalter, darunter die Eingaben des gewaehlten Modus. Die Felder
   tragen keinen Kasten: transparenter Grund, ein Unterstrich in Rose. */
.buchung { color: var(--text-gedaempft); }
.buchung .titel { color: var(--text-hell); }
.buchung :focus-visible { outline-color: var(--akzent-rose); }
/* Ohne JavaScript steht nur der einfache Block da, mit JavaScript nur der Umschalter */
.nur-js { display: none; }
.js .nur-js { display: block; }
.js .ohne-js { display: none; }

.bu__umschalt { display: flex; gap: var(--sp-5); margin-bottom: var(--sp-30); flex-wrap: wrap; }
.bu__tab {
  min-height: var(--tap-min); padding: 10px var(--sp-15);
  border: 1px solid var(--akzent-rose); border-radius: var(--radius-interaktiv);
  background: transparent; color: var(--text-gedaempft);
  font-family: var(--btn-font); font-size: var(--fs-small);
  letter-spacing: var(--btn-tracking); text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bu__tab[aria-selected="true"] { background: var(--akzent-rose); color: var(--text-auf-hell); }
@media (hover: hover) and (pointer: fine) {
  .bu__tab[aria-selected="false"]:hover { color: var(--akzent-rose); }
}

.bu__rahmen { position: relative; overflow: hidden; }
.js .bu__rahmen { opacity: 0; transition: opacity 250ms var(--ease-out); }
.js .bu__rahmen.ist-da { opacity: 1; }
.bu__blatt[hidden] { display: none; }

/* Felder */
.bu__label {
  display: block; margin-bottom: 4px; padding: 0;
  font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--akzent-orange);
}
.bu__feld { position: relative; margin: 0 0 var(--sp-15); max-width: none; }
.bu__feld input, .bu__feld select, .bu__feld textarea {
  width: 100%; box-sizing: border-box; min-height: var(--tap-min);
  padding: 8px 0; border: 0; border-bottom: 1px solid var(--akzent-rose); border-radius: 0;
  background: transparent; color: var(--text-hell);
  font-family: var(--font-body); font-size: 1.1rem;
  color-scheme: dark;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.bu__feld textarea { min-height: 0; resize: vertical; }
.bu__feld select { appearance: none; -webkit-appearance: none; padding-right: 30px; }
.bu__feld select option { color: var(--c-ink); }
.bu__feld input[aria-invalid="true"], .bu__feld select[aria-invalid="true"] { border-bottom-color: var(--akzent-orange); }
.bu__feld input::placeholder, .bu__feld textarea::placeholder { color: var(--text-gedaempft); }
.buchung abbr[title] { color: var(--akzent-orange); text-decoration: none; }
.bu__fehler { display: block; margin: 4px 0 0; font-size: var(--fs-small); color: var(--akzent-orange); }
.bu__zaehler { display: block; margin-top: 4px; font-size: var(--fs-micro); color: var(--text-gedaempft); font-variant-numeric: tabular-nums; }
.bu__paar { display: grid; gap: 0; }
@media (min-width: 640px) { .bu__paar { grid-template-columns: 1fr 1fr; gap: var(--sp-15); } }

/* Die Personen-Knoepfe: echte Radios, optisch eine Reihe */
.bu__gruppe { border: 0; padding: 0; margin: 0 0 var(--sp-15); min-width: 0; }
.bu__knopfreihe { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.bu__knopf { position: relative; }
.bu__knopf input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
  font-size: 16px;   /* unter 16 px zoomt iOS beim Antippen hinein */
}
.bu__knopf span {
  display: grid; place-items: center;
  min-width: 44px; min-height: 44px; padding-inline: 12px;
  border: 1px solid var(--linie-rose); border-radius: var(--radius-interaktiv);
  color: var(--text-hell); font-family: var(--font-body); font-size: var(--fs-small);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.bu__knopf input:checked + span { background: var(--akzent-rose); color: var(--text-auf-hell); border-color: var(--akzent-rose); }
.bu__knopf input:focus-visible + span { outline: 2px solid var(--akzent-rose); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .bu__knopf input:not(:checked):hover + span { border-color: var(--akzent-rose); }
}

/* Knoepfe und Ausweg */
.bu__aktionen { display: grid; gap: var(--sp-5); margin-top: var(--sp-30); }
@media (min-width: 640px) { .bu__aktionen { grid-template-columns: 1fr 1fr; gap: var(--sp-10); } }
.bu__gruppenhinweis { margin: var(--sp-10) 0 0; font-size: var(--fs-small); color: var(--akzent-orange); max-width: none; }
.bu__ausweg { margin-top: var(--sp-15); }
.js .bu__ausweg { opacity: 0; transition: opacity 250ms var(--ease-out); }
.js .bu__ausweg.ist-da { opacity: 1; }
.bu__auswegsatz { margin: 0 0 var(--sp-5); font-size: var(--fs-small); max-width: none; }
.bu__auswegreihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5) var(--sp-10); }
.bu__klein {
  min-height: var(--tap-min); padding: 6px var(--sp-10);
  border: 1px solid var(--linie-rose); border-radius: var(--radius-interaktiv);
  background: transparent; color: var(--text-hell);
  font-family: var(--font-ui); font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) { .bu__klein:hover { border-color: var(--akzent-rose); color: var(--akzent-rose); } }
.bu__klein__ok { display: none; }
.bu__klein.ist-kopiert .bu__klein__wort { display: none; }
.bu__klein.ist-kopiert .bu__klein__ok { display: inline; }
.bu__klein.ist-kopiert { color: var(--akzent-rose); border-color: var(--akzent-rose); }
.bu__adresse { font-size: var(--fs-small); color: var(--text-gedaempft); word-break: break-all; }

/* Anker landen unter der festen Kopfzeile: 90 px Luft fuer alle Sprungziele */
.geschichte, .fuss, .kap { scroll-margin-top: 90px; }
#reservieren { padding-top: max(90px, var(--section-py)); }
/* Der feste Knopf weicht, solange der Abschnitt im Bild ist (app.js 8) */
.res-cta.ist-weg { opacity: 0; pointer-events: none; }
.res-cta { transition: opacity 300ms var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-druck) var(--ease-out); }
/* Der Auftritt: einmal beim Laden, ruhig. Er ist von Anfang an da, auch
   auf dem Startbildschirm – die frueher Regel "erst nach dem Hero" ist raus. */
.js .res-cta { opacity: 0; --cta-y: 12px; }
.js .res-cta.ist-da {
  opacity: 1; --cta-y: 0px;
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.js .res-cta.ist-da:active { --cta-y: 1px; transition-duration: var(--dur-druck); }
/* Muss NACH .ist-da stehen: sonst gewinnt der Auftritt und der Knopf
   bliebe im Reservierungsbereich sichtbar (gleiche Spezifitaet). */
.js .res-cta.ist-weg { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .js .res-cta, .js .res-cta.ist-da { opacity: 1; --cta-y: 0px; transition: none; }
  .js .res-cta.ist-weg { opacity: 0; }
}

/* ==========================================================================
   25. Die Ankunft
   Man steht vor dem dunklen Restaurant. Das Foto auf 0,38, oben links das
   weisse Neon-Schriftzug, die Hauptzeile links im unteren Drittel, unten die Zeilen an
   den Raendern. Der Abschnitt bleibt stehen, waehrend "Das Eintreten" ihn
   zudeckt; --p auf .abend (0 bis 1 ueber eine Fensterhoehe) traegt das.
   ========================================================================== */
.abend { position: relative; --p: 0; }

.ankunft {
  position: sticky; top: 0; z-index: 0;
  /* 100vh nur als Rueckfall: auf dem iPhone liegt die Browserleiste sonst
     ueber dem unteren Teil des Heros. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg-tief);
  color: var(--text-hell);
  /* Rand links und rechts, und die Grundlinie der unteren Zeilen: sie
     sitzen ueber dem festen Reservieren-Knopf, nicht dahinter. */
  --rand: calc(var(--sp-10) + env(safe-area-inset-left, 0px));
  --rand-rechts: calc(var(--sp-10) + env(safe-area-inset-right, 0px));
  /* Scroll-Pfeil, "since 2008" und die Uhrzeit sitzen 12 px ueber dem
     festen Reservieren-Knopf, der unten in der Mitte klebt. */
  --fuss: calc(var(--cta-unten) + var(--cta-hoehe) + 12px);
}
@media (min-width: 768px) {
  .ankunft {
    --rand: calc(var(--sp-30) + env(safe-area-inset-left, 0px));
    --rand-rechts: calc(var(--sp-30) + env(safe-area-inset-right, 0px));
    --fuss: calc(var(--sp-15) + var(--tap-min) + var(--sp-10) + env(safe-area-inset-bottom, 0px));
  }
}

.ankunft__bild { position: absolute; inset: 0; }
.ankunft__bild picture { display: block; height: 100%; }
.ankunft__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; filter: var(--hero-filter); }
/* Handy: das Querformat fuellt den Hero weiter aus. Der Ausschnitt wandert
   nach rechts, damit der Gang mit den gedeckten Tischen im Bild bleibt und
   nicht nur die unscharfe Wand links. */
@media (max-width: 767px) {
  .ankunft__bild img { object-position: 62% 42%; }
}
/* Die Grundhelligkeit traegt der Filter auf dem Foto (einmal gerechnet,
   kein bewegter Filter). Was am Neon haengt, ist nur diese Schicht in Tief:
   beim Aussetzer legt sie sich ueber das Foto. Dazu die Vignette. */
.neon-dunkel {
  position: absolute; inset: 0;
  background: var(--bg-tief);
  opacity: calc(var(--hero-dunkel-grund) + (1 - var(--neon)) * var(--hero-dunkel-hub));
  pointer-events: none;
}
.ankunft__vignette { position: absolute; inset: 0; background: var(--vignette); pointer-events: none; }
/* Hinter den Zeilen unten links wird es Nacht – Licht ohne Form, damit
   Kleinzeile und Hauptzeile auf dem hellen Streifenpulli 4,5:1 halten. */
.ankunft__hof { position: absolute; inset: 0; background: var(--hero-hof); pointer-events: none; }

/* --- Der weisse Neon-Schriftzug, oben links, klein ----------------------
   Die erste Fassung: echter Text, der Schein aus text-shadow in Lagen.
   Eine registrierte Zahl --neon (0,12 bis 1) traegt den Zustand; Schriftzug
   und Abdunklung des Fotos lesen dieselbe Zahl. */
@property --neon {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
.abend {
  --neon: 1;
  animation: neon-atmen 5.3s ease-in-out infinite,
             neon-aussetzer 21.3s linear infinite;
}
.ankunft__marke {
  position: absolute; z-index: 2;
  top: calc(var(--sp-5) + env(safe-area-inset-top, 0px));
  left: var(--rand);
  display: inline-flex; align-items: center;
  min-height: var(--tap-min);
  text-decoration: none;
}
/* Der Lichthof auf der Wand hinter dem Schriftzug – flackert mit */
.ankunft__marke::before {
  content: ""; position: absolute; z-index: -1;
  inset: -120% -70%;
  background: var(--neon-wand);
  /* Die Ellipse (140 % x 200 %) ist groesser als ihre Box; ohne Maske
     stuende ein Rechteck auf der Wand. */
  -webkit-mask-image: radial-gradient(closest-side, rgb(0 0 0) 30%, transparent 100%);
          mask-image: radial-gradient(closest-side, rgb(0 0 0) 30%, transparent 100%);
  opacity: var(--neon);
  pointer-events: none;
}
@media (min-width: 768px) { .ankunft__marke { top: calc(var(--sp-10) + env(safe-area-inset-top, 0px)); } }
.neon {
  font-family: var(--neon-font);
  font-weight: 300;
  font-size: var(--fs-neon-klein);
  line-height: 1;
  letter-spacing: var(--neon-tracking);
  color: var(--neon-roehre);
  text-shadow: var(--neon-schein-klein);
  opacity: var(--neon);
}
/* Handy: 1.6rem, Schein-Radien auf 55 % – sonst ueberstrahlt er den halben Schirm */
@media (max-width: 480px) {
  .neon { font-size: 1.6rem; text-shadow: var(--neon-schein-handy); }
  .ankunft__marke::before { inset: -60% -40%; }
}
.neon__roehre {
  display: inline-block;
  animation: neon-segment 7.1s ease-in-out infinite;
}
.neon__roehre:nth-child(2) { animation-duration: 9.7s;  animation-delay: -2.3s; }
.neon__roehre:nth-child(3) { animation-duration: 11.3s; animation-delay: -5.1s; }
.neon__roehre:nth-child(4) { animation-duration: 8.3s;  animation-delay: -1.7s; }

@keyframes neon-atmen {
  0%   { --neon: 1; }
  38%  { --neon: 0.94; }
  61%  { --neon: 0.99; }
  80%  { --neon: 0.92; }
  100% { --neon: 1; }
}
/* Aussetzer in einem 21,3-s-Zyklus (1 % = 213 ms), an krummen Stellen:
   kurzes Zucken, etwa eine halbe Sekunde fast aus, Rueckkehr in zwei, drei
   Zuckungen. Bei 52,6 % nur ein einzelnes Zucken ohne Ausfall. */
@keyframes neon-aussetzer {
  0%, 31.5%, 35.5%, 52.6%, 53.0%, 74.6%, 78.7%, 100% { --neon: 1; }
  31.7%  { --neon: 0.55; }
  31.9%  { --neon: 1; }
  32.2%, 34.5% { --neon: 0.12; }
  34.7%  { --neon: 0.80; }
  34.9%  { --neon: 0.20; }
  35.1%  { --neon: 0.95; }
  35.3%  { --neon: 0.35; }
  52.8%  { --neon: 0.50; }
  74.8%  { --neon: 0.60; }
  75.0%  { --neon: 1; }
  75.3%, 77.7% { --neon: 0.12; }
  77.9%  { --neon: 0.75; }
  78.1%  { --neon: 0.25; }
  78.3%  { --neon: 1; }
  78.5%  { --neon: 0.40; }
}
@keyframes neon-segment {
  0%, 100% { filter: brightness(1); }
  23%      { filter: brightness(0.97); }
  47%      { filter: brightness(1); }
  49%      { filter: brightness(0.9); }
  50%      { filter: brightness(1); }
  78%      { filter: brightness(0.98); }
}

/* --- Die Hauptzeile: gross, mehrzeilig, linksbuendig ---------------------
   Beim Zudecken steigt sie nach oben und blendet aus. */
.ankunft__inhalt {
  position: absolute; z-index: 1;
  left: var(--rand); right: var(--rand-rechts);
  /* Auf dem Handy steht darunter der Catch-Streifen: die Hauptzeile weicht
     so weit nach oben, dass sie ihn nicht beruehrt. max() laesst hohe
     Fenster bei der Vorgabe von 30vh. */
  bottom: max(var(--hero-text-unten-handy), var(--titel-unten-mindestens));
  --weg: clamp(0, calc(var(--p) / 0.55), 1);
  opacity: calc(1 - var(--weg));
  transform: translateY(calc(-1 * var(--weg) * 10vh));
}
@media (min-width: 768px) { .ankunft__inhalt { bottom: var(--hero-text-unten); } }
/* Die Hauptzeile: Versalien, duenn, weit gesperrt, zwei Zeilen mit festem
   Umbruch am <br> – Werte nach Vorgabe, in Josefin Sans */
.ankunft__titel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display-leicht);
  font-size: var(--fs-hero-titel-handy);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero-handy);
  word-spacing: var(--ws-hero);
  white-space: nowrap;
  color: var(--text-hell);
  text-shadow: var(--text-schatten-nacht);
}
html[lang="de"] .ankunft__titel { font-size: var(--fs-hero-titel-handy-de); }
@media (min-width: 768px) {
  .ankunft__titel, html[lang="de"] .ankunft__titel { font-size: var(--fs-hero-titel); letter-spacing: var(--ls-hero); }
}

/* --- Die Zeilen unten: links "since 2008", rechts die Uhr ---------------- */
.ankunft__seit, .ankunft__uhr {
  position: absolute; z-index: 1;
  bottom: var(--fuss);
  margin: 0;
  /* block statt inline-flex: ein Flex-Container wuerde das Leerzeichen
     zwischen "DUDU —" und "since 2008" verschlucken */
  display: block; line-height: var(--tap-min);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-gedaempft);
  white-space: nowrap;
}
.ankunft__seit { left: var(--rand); }
.ankunft__uhr  { right: var(--rand-rechts); font-variant-numeric: tabular-nums; }

/* --- Der Scroll-Hinweis: zwei Striche wie Staebchen -----------------------
   Leicht ueberkreuzt in Ruhe; beim Hovern oder Antippen richten sie sich
   auf. Er steht in derselben Zeile wie "since 2008" und die Uhr; unter
   360 px faellt dafuer das "DUDU —" vor "since 2008" weg. */
.ankunft__scroll {
  position: absolute; z-index: 1;
  bottom: var(--fuss); left: 50%;
  transform: translateX(-50%);
  display: grid; place-items: center;
  width: var(--tap-min); height: var(--tap-min);
  text-decoration: none;
  animation: puls 3.8s ease-in-out infinite;
}
/* Schmale Schirme: eine Zeile hoeher, sonst liegen die Staebchen auf
   "DUDU 31 — since 2008" und der Uhr */
@media (max-width: 600px) { .ankunft__scroll { bottom: calc(var(--fuss) + var(--tap-min) + var(--sp-5)); } }
@media (max-width: 359px) { .ankunft__seit-marke { display: none; } }
@keyframes puls { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }


.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Flache Fenster: die Hauptzeile schrumpft, der Hinweis faellt weg */
@media (max-height: 540px) {
  .ankunft__titel { font-size: clamp(1.75rem, 9vh, 4rem); }
  .ankunft__scroll { display: none; }
}

/* Ohne Bewegung: konstantes Neon, fester Raum in mittlerer Helligkeit,
   kein Driften, kein Flackern, kein Zoom. Der Text ist einfach da. */
@media (prefers-reduced-motion: reduce) {
  .abend, .ankunft__scroll { animation: none; }
  .abend { --neon: 1; --p: 0 !important; }
  .neon__roehre { animation: none; filter: none; }
}

/* ==========================================================================
   Staebchen-Pfeil – EINE Komponente fuer alle Pfeile der Seite.
   Zwei Striche, die sich zur Spitze hin verjuengen (3,2 px -> 1,1 px,
   28 px lang) und sich dort nicht treffen: 3 px Luft. Jeder Strich ist ein
   SVG-Polygon in einer Gruppe, deren Ursprung am dicken Ende liegt; so
   dreht der Hover um das dicke Ende und die duennen Enden kreuzen sich.
   Grundform ist "<" (links); rechts, oben, unten per rotate() auf dem SVG.

   Markup (identisch an jeder Stelle, nur die Richtungsklasse wechselt):
   <svg class="staebchen-pfeil staebchen-pfeil--links" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
     <g transform="translate(29.2 0.5) rotate(150)"><path class="staebchen-pfeil__strich" d="M0,-1.6 L28,-0.55 L28,0.55 L0,1.6 Z"/></g>
     <g transform="translate(29.2 31.5) rotate(-150)"><path class="staebchen-pfeil__strich" d="M0,-1.6 L28,-0.55 L28,0.55 L0,1.6 Z"/></g>
   </svg>
   ========================================================================== */
.staebchen-pfeil {
  display: block; width: 32px; height: 32px; overflow: visible;
  color: var(--akzent-rose);
  transition: color var(--dur-staebchen) var(--ease-staebchen);
}
.staebchen-pfeil--rechts { transform: rotate(180deg); }
.staebchen-pfeil--oben   { transform: rotate(90deg); }
.staebchen-pfeil--unten  { transform: rotate(-90deg); }
.staebchen-pfeil--klein  { width: 20px; height: 20px; }
/* In Aufklappfeldern: rechts am Feld, ohne Hover, Klick geht durch */
.staebchen-pfeil--feld { position: absolute; right: 4px; bottom: 14px; width: 16px; height: 16px; pointer-events: none; color: var(--akzent-rose); }
.feld .staebchen-pfeil--feld { color: var(--c-text-muted); }
.section--dunkel .feld .staebchen-pfeil--feld { color: var(--akzent-rose); }
.staebchen-pfeil__strich {
  fill: currentColor; stroke: currentColor; stroke-width: 0.4; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: 0 50%;   /* das dicke Ende */
  transition: transform var(--dur-staebchen) var(--ease-staebchen);
}
/* Hover/Fokus auf dem umschliessenden Link oder Knopf: die Striche
   drehen um ihr dickes Ende, rutschen nach vorn und kreuzen sich. */
.staebchen-pfeil.ist-gekreuzt,
:is(a, button):focus-visible .staebchen-pfeil { color: var(--akzent-orange); }
.staebchen-pfeil.ist-gekreuzt g:first-child .staebchen-pfeil__strich,
:is(a, button):focus-visible .staebchen-pfeil g:first-child .staebchen-pfeil__strich { transform: rotate(-9deg) translate(4px, 0); }
.staebchen-pfeil.ist-gekreuzt g:last-child .staebchen-pfeil__strich,
:is(a, button):focus-visible .staebchen-pfeil g:last-child .staebchen-pfeil__strich  { transform: rotate(9deg) translate(4px, 0); }
@media (hover: hover) and (pointer: fine) {
  :is(a, button):hover .staebchen-pfeil { color: var(--akzent-orange); }
  :is(a, button):hover .staebchen-pfeil g:first-child .staebchen-pfeil__strich { transform: rotate(-9deg) translate(4px, 0); }
  :is(a, button):hover .staebchen-pfeil g:last-child .staebchen-pfeil__strich  { transform: rotate(9deg) translate(4px, 0); }
}
/* Auf hellem Grund: der Pfeil in der dunklen Tintenfarbe statt in Rose.
   Auch im Hover bleibt er dunkel genug – das helle Orange laege bei 2,7:1. */
.staebchen-pfeil--dunkel { color: var(--text-auf-hell); }
@media (hover: hover) and (pointer: fine) {
  :is(a, button):hover .staebchen-pfeil--dunkel { color: var(--akzent-orange-auf-hell); }
}
:is(a, button):focus-visible .staebchen-pfeil--dunkel { color: var(--akzent-orange-auf-hell); }

/* Ohne Bewegung: nur der Farbwechsel, keine Drehung */
@media (prefers-reduced-motion: reduce) {
  .staebchen-pfeil, .staebchen-pfeil__strich { transition: none; }
  :is(a, button):is(:hover, :focus-visible) .staebchen-pfeil .staebchen-pfeil__strich,
  .staebchen-pfeil.ist-gekreuzt .staebchen-pfeil__strich { transform: none; }
}

/* ==========================================================================
   26. Catch of the Day – die Tafel
   HANDY (Grundregel): ein breiter Streifen ueber die volle Inhaltsbreite,
   buendig mit der Hauptzeile darueber, unter ihr und ueber dem Scroll-Pfeil.
   AB 768 PX: unveraendert die schmale Tafel buendig am rechten Rand.
   Links die Textflaeche in Papierweiss, rechts das Foto – eine Einheit,
   eckig, ein einziger Link.
   ========================================================================== */
.tagestafel {
  position: absolute; z-index: 2;
  /* Derselbe seitliche Abstand wie die Hauptzeile */
  left: var(--rand); right: var(--rand-rechts);
  /* Ueber dem Scroll-Pfeil: dessen Oberkante plus 16 px Luft. Der Pfeil
     sitzt unter 600 px eine Zeile hoeher als "since 2008" und die Uhr. */
  bottom: calc(var(--fuss) + 2 * var(--tap-min) + var(--sp-5) + 16px);
  display: flex; align-items: stretch;
  max-height: 120px;
  box-sizing: border-box;
  border: 0; border-radius: 0;                 /* ueberall eckig */
  /* Der Schatten faellt nach links unten, wie bei der Tafel am Rand */
  box-shadow: -12px 12px 32px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.tagestafel[hidden] { display: none; }

/* Die Textflaeche: dasselbe warme Papierweiss wie die Karte auf der
   Catch-of-the-Day-Seite, hier ohne Struktur, nur die Farbe. */
.tagestafel__wort {
  flex: 1 1 55%; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 12px 14px;
  box-sizing: border-box;
  background: var(--papier-karte);
}
/* Handy: die Ueberschrift steht oben, "TODAY · 24 SEP" entfaellt */
.tagestafel__wann { display: none; }
.tagestafel__fuss {
  order: -1;
  display: block;
  font-family: var(--font-ui); font-size: 0.6875rem;   /* 11 px */
  font-weight: var(--fw-body); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tafel-label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tagestafel__pfeil { display: none; }
/* Hoechstens zwei Zeilen, danach drei Punkte. Der volle Name steht im title. */
.tagestafel__name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.0625rem; line-height: 1.18; letter-spacing: 0.01em;
  color: var(--text-auf-hell);
}
.tagestafel__preis {
  font-family: var(--font-ui); font-size: 0.8125rem; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--tafel-fuss);
}
.tagestafel__preis[hidden] { display: none; }

/* Das Foto: klar erkennbar, ohne Weichzeichner, ohne Abdunklung.
   Faellt die Haelfte weg, nimmt die Textflaeche die ganze Breite ein. */
.tagestafel__foto { position: relative; flex: 0 0 45%; overflow: hidden; }
.tagestafel__foto[hidden] { display: none; }
/* Absolut gesetzt, damit das Bild die Hoehe der Tafel nicht bestimmt:
   sonst zog ein hochformatiges Foto die ganze Tafel in die Laenge. */
.tagestafel__foto img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform var(--dur-weich) var(--ease-auftritt);
}

/* Der Auftritt auf dem Handy: ruhig von unten einblenden, einmal. */
.js .tagestafel { opacity: 0; transform: translateY(16px); }
.js .tagestafel.ist-da {
  opacity: 1; transform: translateY(0);
  transition: opacity 700ms var(--ease-auftritt), transform 700ms var(--ease-auftritt);
}
.js .tagestafel.ist-da:active { transform: translateY(2px); transition-duration: var(--dur-druck); }
.tagestafel:focus-visible { outline: 2px solid var(--akzent-rose); outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .js .tagestafel, .js .tagestafel.ist-da { opacity: 1; transform: none; transition: none; }
  .js .tagestafel.ist-da:active { transform: none; }
  .tagestafel__foto img, .tagestafel:hover .tagestafel__foto img { transform: none; transition: none; }
}

/* --- Ab 768 px: die schmale Tafel buendig am rechten Rand ------------- */
@media (min-width: 768px) {
  .tagestafel {
    top: 40%; bottom: auto;
    left: auto; right: 0;
    width: 420px; max-width: 100%; min-height: 140px; max-height: none;
  }
  .tagestafel__wort { padding: 20px 22px; }
  .tagestafel__wann {
    display: block;
    font-family: var(--font-ui); font-size: 0.6875rem;   /* 11 px */
    font-weight: var(--fw-body); letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--tafel-label);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tagestafel__name { font-size: 1.35rem; }
  .tagestafel__fuss {
    order: 0;
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; letter-spacing: 0.06em; text-transform: none;
    color: var(--tafel-fuss);
    white-space: normal; overflow: visible;
  }
  .tagestafel__pfeil { display: block; flex: 0 0 auto; width: 18px; height: 18px; }
  .tagestafel__preis { display: none; }

  /* Der Auftritt: einmal von rechts hereingeschoben, ohne Einblenden. */
  .js .tagestafel { opacity: 1; transform: translateX(100%); }
  .js .tagestafel.ist-da {
    opacity: 1; transform: translateX(0);
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js .tagestafel.ist-da:active { transform: translateX(3px); transition-duration: var(--dur-druck); }
}
/* Zeiger vorhanden UND breiter Schirm: sie schiebt sich weiter heraus,
   das Foto zoomt minimal. Auf dem Handy gibt es das nicht. */
@media (hover: hover) and (min-width: 768px) {
  .js .tagestafel.ist-da:hover { transform: translateX(-6px); transition-duration: 300ms; }
  .tagestafel:hover .tagestafel__foto img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  .js .tagestafel, .js .tagestafel.ist-da { transform: none; }
}

/* Die Vorschau im Speisekarten-Abschnitt: Foto, Label, Name, Verweis */
.catchvor {
  display: flex; align-items: center; gap: var(--sp-10);
  margin: 0 0 var(--sp-15); padding: 0;
  text-decoration: none; max-width: 30rem;
}
.catchvor[hidden] { display: none; }
.catchvor__bild { width: 96px; height: 96px; object-fit: cover; flex: none; filter: var(--foto-waerme); }
.catchvor__wort { display: grid; gap: 2px; min-width: 0; }
.catchvor__label {
  /* 0,68rem ergab 10,88 px – knapp unter der Grenze von 11 px */
  font-family: var(--font-ui); font-size: 0.6875rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--akzent-orange);
}
.catchvor__name {
  font-family: var(--font-display); font-weight: var(--fw-display-leicht);
  font-size: 1.35rem; letter-spacing: 0.01em; color: var(--text-hell);
}
.catchvor__mehr { font-size: var(--fs-small); color: var(--text-gedaempft); }
@media (hover: hover) and (pointer: fine) {
  .catchvor:hover .catchvor__mehr { color: var(--akzent-rose); }
}
/* Die Tageskarte: Knopf mit dem Stand daneben. Sie erscheint nur, wenn in
   der Tabelle ein Link hinterlegt und aktiv gesetzt ist. */
.tageskarte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5) var(--sp-10); margin-top: var(--sp-10); max-width: none; }
.tageskarte[hidden] { display: none; }
.tageskarte__stand { font-size: var(--fs-small); color: var(--c-overlay-light-soft); }
/* Die drei Kontaktangaben im Fuss sind eigenstaendige Links, keine im
   Fliesstext – sie bekommen volle Antippflaeche. */
.fuss__spalte .fuss__wert a {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
}