@charset "utf-8";
/* ==========================================================================
   cafecafe — urban eats & coffee
   Designsystem · Glanz Design · 2026
   --------------------------------------------------------------------------
   Haltung: Papier statt Bildschirm. Die Typografie trägt, die Fotos geben
   die Farbe. Kleinschreibung in der Display-Ebene ist die Textmarke des
   Hauses (Logo, Speisekarte, alte Startseite) — nicht Dekoration.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Schriften (selbst gehostet, latin — enthält Umlaute und ß)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Bricolage';
  src: url('../fonts/bricolage-var.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument';
  src: url('../fonts/instrument-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2 · Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Tinte & Papier */
  --ink:        #14110E;
  --ink-soft:   #2E2820;
  --ink-mute:   #6A5E50;
  --paper:      #F7F3EC;
  --paper-warm: #FFFCF6;
  --paper-deep: #EDE5D7;
  --rule:       #DDD2BF;
  --rule-soft:  #E8DFCF;

  /* Akzente */
  --paprika:      #B4441F;
  --paprika-deep: #8E3315;
  --paprika-tint: #F6E7E0;
  --ochre:        #A9741C;
  --ochre-tint:   #F5EBD8;
  --green:        #4A6340;   /* nur für "jetzt geöffnet" — funktional, nicht Marke */
  --wine:         #6F2233;   /* Interaktionsfarbe der Pfeilkreise auf den Kacheln */

  /* Typo */
  --font-display: 'Bricolage', 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-text:    'Instrument', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-quote:   'Newsreader', Georgia, 'Times New Roman', serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.4rem, 1.24rem + 0.8vw, 1.9rem);
  --step-3:  clamp(1.8rem, 1.45rem + 1.75vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.6rem + 3.4vw, 4.4rem);
  --step-5:  clamp(3rem, 1.4rem + 8vw, 8rem);

  /* Raum */
  --gap-xs: 0.5rem;
  --gap-s:  1rem;
  --gap-m:  1.75rem;
  --gap-l:  3rem;
  --gap-xl: clamp(4rem, 8vw, 8rem);
  --gap-2xl: clamp(6rem, 12vw, 12rem);

  --pad-x: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 62ch;
  --wide: 1440px;
  --mid: 1120px;
  --narrow: 760px;

  /* Bewegung — eigene Kurven, keine Browser-Standards */
  --ease-out:   cubic-bezier(0.16, 0.84, 0.28, 1);
  --ease-soft:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-snap:  cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 220ms;
  --dur-mid:  460ms;
  --dur-slow: 820ms;

  --radius: 3px;   /* bewusst fast eckig — Papier, keine App-Kacheln */
  --header-h: 68px;
}

/* --------------------------------------------------------------------------
   3 · Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--paper-deep); }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--paprika);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--paprika); color: var(--paper-warm); }

/* Filmkorn — fixiert, nie im Scroll-Container (GPU) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4 · Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: lowercase;       /* Textmarke des Hauses */
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); letter-spacing: -0.02em; }
h4 { font-size: var(--step-1); letter-spacing: -0.015em; font-weight: 700; }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

strong, b { font-weight: 600; }

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }
.prose a {
  color: var(--paprika-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.prose a:hover { color: var(--ink); }

/* Marke: das Wortzeichen als Text, wenn kein Bild sinnvoll ist */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.045em;
  text-transform: lowercase;
  line-height: 1;
}

/* Kleines Vorlauf-Label.
   Frueher stand ein 28 px langer Farbstrich davor. Der ist raus: als Zeichen
   sagt er nichts, er wiederholt sich auf jeder Sektion und ist genau das
   Muster, das Baukastenseiten kennzeichnet. Die Aufgabe des Strichs, das Label
   vom Fliesstext zu trennen, uebernimmt jetzt die Schrift selbst: kleiner
   gesetzt, halbfett und deutlich weiter gesperrt als alles andere auf der
   Seite. */
.eyebrow {
  display: block;
  font-family: var(--font-text);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Zitat-Kursive — der einzige Ort, an dem die Serifenschrift auftritt */
.quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   5 · Layout
   -------------------------------------------------------------------------- */
.wrap  { width: 100%; max-width: var(--wide);   margin-inline: auto; padding-inline: var(--pad-x); }
.wrap--mid    { max-width: var(--mid); }
.wrap--narrow { max-width: var(--narrow); }

.section { padding-block: var(--gap-xl); }
.section--tight { padding-block: var(--gap-l); }
.section--tall  { padding-block: var(--gap-2xl); }

.section--deep { background: var(--paper-deep); }
.section--ink  { background: var(--ink); color: var(--paper); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--paper-warm); }
.section--ink .eyebrow { color: rgba(247, 243, 236, 0.6); }

.rule { height: 1px; background: var(--rule); border: 0; }

/* Sektionskopf: Label, Titel, optionaler Beitext */
.sec-head { display: grid; gap: var(--gap-s); margin-bottom: var(--gap-m); }
.sec-head--split {
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .sec-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--gap-l);
  }
}

/* Das hidden-Attribut muss stärker sein als jede Klasse, die display setzt.
   Sonst blieben Elemente wie .cart__line (display:flex) oder .cart__rows
   (display:grid) trotz hidden sichtbar — die Rabattzeile stand dann mit
   „− 0,00 €" da, obwohl es keinen Rabatt gab. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   6 · Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper-warm);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.35rem 0.95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: transform var(--dur-fast) var(--ease-snap),
              background-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn:hover { background: var(--paprika-deep); }
.btn:active { transform: scale(0.975); }

/* Pfeil sitzt in eigenem Kreis, bündig in der rechten Innenkante */
.btn__ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  flex: none;
  transition: transform var(--dur-mid) var(--ease-snap),
              background-color var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__ico { transform: translate(3px, -2px); background: rgba(255, 255, 255, 0.28); }
.btn__ico svg { width: 12px; height: 12px; }

.btn--paprika { --btn-bg: var(--paprika); }
.btn--paprika:hover { background: var(--paprika-deep); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.btn--ghost .btn__ico { background: rgba(20, 17, 14, 0.09); }
.btn--ghost:hover { --btn-fg: var(--paper-warm); background: var(--ink); }
.btn--ghost:hover .btn__ico { background: rgba(255, 255, 255, 0.2); }

.btn--light {
  --btn-bg: var(--paper-warm);
  --btn-fg: var(--ink);
}
.btn--light .btn__ico { background: rgba(20, 17, 14, 0.1); }
.btn--light:hover { background: #fff; }
.btn--light:hover .btn__ico { background: rgba(20, 17, 14, 0.16); }

/* Textlink mit wachsender Unterlinie */
.link-u {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--paprika), var(--paprika));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.5px;
  transition: background-size var(--dur-mid) var(--ease-soft), color var(--dur-fast) var(--ease-out);
}
.link-u:hover { color: var(--paprika-deep); background-size: 0% 1.5px; background-position: 100% 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   7 · Kopfzeile
   -------------------------------------------------------------------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: transform var(--dur-mid) var(--ease-soft),
              background-color var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.hdr__in {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

/* Über dem Hero: helle Schrift auf Bild.
   Ohne eigene Bahn darunter lag der Kontrast der Kopfzeile ueber hellen
   Bildstellen bei 2,2:1 (gemessen an der Belgischen Seite) und damit weit
   unter der Grenze von 4,5:1 fuer kleinen Text. Der Verlauf legt eine dunkle
   Bahn nur unter die Leiste und laeuft darunter aus, statt das ganze Foto
   flaechig abzudunkeln. Im Gegenzug ist der obere Anschlag des Hero-Verlaufs
   von 0,42 auf 0,18 zurueckgenommen: unterhalb der Leiste ist das Bild jetzt
   heller als vorher. */
.hdr--over { color: var(--paper-warm); }
.hdr--over .hdr__burger span { background: var(--paper-warm); }
.hdr--over::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--header-h) + 46px);
  z-index: -1;
  background: linear-gradient(to bottom,
              rgba(10, 8, 6, 0.88) 0%,
              rgba(10, 8, 6, 0.8) 40%,
              rgba(10, 8, 6, 0.52) 66%,
              rgba(10, 8, 6, 0) 100%);
  pointer-events: none;
}
/* Beim geoeffneten Menue liegt der dunkle Vollbildschirm ohnehin darunter. */
.hdr--menu-open::before { display: none; }
/* Letzte Reserve fuer die hellsten Stellen des Fotos: ueber der Flaeche liegt
   der Kontrast im Mittel bei 5,4:1, an einzelnen Glanzlichtern darunter. Der
   weiche Schatten faengt genau diese Stellen ab. Nicht auf den hellen
   Anruf-Knopf: dort steht dunkle Schrift auf hellem Grund. */
.hdr--over .hdr__brand,
.hdr--over .hdr__nav > a:not(.btn) { text-shadow: 0 1px 3px rgba(10, 8, 6, 0.55); }

/* Nach dem Hero: schwarze Leiste, weisse Schrift. Sie bleibt von da an stehen
   und wiederholt genau das, was im Hero ueber dem Bild stand: Wortmarke und
   Standort. Damit weiss der Gast auf jedem Bildschirmmeter, in welchem der
   beiden Haeuser er gerade liest.
   Kein backdrop-filter mehr: die Flaeche ist deckend, der Weichzeichner haette
   nur Rechenzeit gekostet. */
.hdr--pinned {
  background: #000;
  color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
}
.hdr--pinned .hdr__burger span { background: #FFFFFF; }
.hdr--pinned .hdr__loc { opacity: 0.66; }

/* Beim geöffneten Menü MUSS backdrop-filter weg, sonst wird der Header zum
   containing block für das fixierte Overlay (Playbook, Fix-Rezept). */
.hdr--menu-open {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.hdr__brand {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: -0.045em;
  line-height: 1;
  margin-right: auto;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.hdr__brand:hover { opacity: 0.65; }
.hdr__loc {
  font-family: var(--font-text);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.72;
}
/* Der Standortname bleibt auch auf dem Telefon stehen: er ist der Grund,
   warum die Leiste ueberhaupt mitlaeuft. Nur die Laufweite wird enger. */
@media (max-width: 480px) { .hdr__loc { letter-spacing: 0.09em; font-size: 0.64rem; } }

.hdr__nav { display: none; }
@media (min-width: 1000px) {
  .hdr__nav { display: flex; align-items: center; gap: 1.9rem; }
  .hdr__nav a {
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-decoration: none;
    position: relative;
    padding-block: 4px;
  }
  .hdr__nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-mid) var(--ease-soft);
  }
  .hdr__nav a:hover::after,
  .hdr__nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
  .hdr__cta { margin-left: 0.4rem; }
}
@media (max-width: 999px) { .hdr__cta { display: none; } }

/* Burger — morpht zum X */
.hdr__burger {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin-right: -10px;
}
@media (min-width: 1000px) { .hdr__burger { display: none; } }
.hdr__burger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-mid) var(--ease-snap), opacity 160ms linear;
}
.hdr__burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hdr__burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.hdr__burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Vollbild-Menü */
.navmodal {
  position: fixed;
  inset: 0;
  z-index: 69;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  align-content: center;
  padding: calc(var(--header-h) + 2rem) var(--pad-x) 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease-out), visibility 0s linear var(--dur-mid);
  overflow-y: auto;
}
.navmodal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-mid) var(--ease-out), visibility 0s;
}
.navmodal ul { list-style: none; padding: 0; display: grid; gap: 0.15rem; }
.navmodal a {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 9vw, 3.6rem);
  letter-spacing: -0.035em;
  text-transform: lowercase;
  text-decoration: none;
  line-height: 1.08;
  padding-block: 0.12em;
  color: var(--paper);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-soft),
              color var(--dur-fast) var(--ease-out);
}
.navmodal.is-open a { opacity: 1; transform: none; }
.navmodal a:hover { color: var(--ochre); }
.navmodal.is-open li:nth-child(1) a { transition-delay: 60ms; }
.navmodal.is-open li:nth-child(2) a { transition-delay: 110ms; }
.navmodal.is-open li:nth-child(3) a { transition-delay: 160ms; }
.navmodal.is-open li:nth-child(4) a { transition-delay: 210ms; }
.navmodal.is-open li:nth-child(5) a { transition-delay: 260ms; }
.navmodal.is-open li:nth-child(6) a { transition-delay: 310ms; }
.navmodal.is-open li:nth-child(7) a { transition-delay: 360ms; }

.navmodal__foot {
  margin-top: var(--gap-l);
  padding-top: var(--gap-s);
  border-top: 1px solid rgba(247, 243, 236, 0.18);
  display: grid;
  gap: 0.9rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out) 380ms, transform var(--dur-slow) var(--ease-soft) 380ms;
}
.navmodal.is-open .navmodal__foot { opacity: 1; transform: none; }
.navmodal__foot a { font-family: var(--font-text); font-size: var(--step-0); font-weight: 500; text-transform: none; letter-spacing: 0; }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   8 · Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  isolation: isolate;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Zwei Schleier uebereinander.
     Der senkrechte traegt den Fuss des Hero, der waagerechte die Textseite.
     Ohne den zweiten lag die Ueberschrift auf der Ehrenfelder Seite bei 2,6:1
     — das Foto ist dort ein heller Innenraum. Mit ihm sind es 4,9:1, und die
     rechte Bildhaelfte bleibt offen. */
  background:
    linear-gradient(to right,
      rgba(12, 10, 8, 0.62) 0%,
      rgba(12, 10, 8, 0.44) 34%,
      rgba(12, 10, 8, 0.14) 62%,
      rgba(12, 10, 8, 0) 82%),
    linear-gradient(to top,
      rgba(12, 10, 8, 0.9) 0%,
      rgba(12, 10, 8, 0.72) 22%,
      rgba(12, 10, 8, 0.34) 46%,
      rgba(12, 10, 8, 0.08) 68%,
      rgba(12, 10, 8, 0.18) 100%);
}
/* Auf schmalen Schirmen laeuft der Text ueber die ganze Breite. Dort muss der
   waagerechte Schleier bis zum rechten Rand tragen. */
@media (max-width: 720px) {
  .hero::before {
    background:
      linear-gradient(to right,
        rgba(12, 10, 8, 0.6) 0%,
        rgba(12, 10, 8, 0.48) 55%,
        rgba(12, 10, 8, 0.34) 100%),
      linear-gradient(to top,
        rgba(12, 10, 8, 0.9) 0%,
        rgba(12, 10, 8, 0.72) 22%,
        rgba(12, 10, 8, 0.34) 46%,
        rgba(12, 10, 8, 0.08) 68%,
        rgba(12, 10, 8, 0.18) 100%);
  }
}
.hero__in {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding: 0 var(--pad-x) clamp(2.5rem, 6vw, 5rem);
  color: var(--paper-warm);
}
.hero__kicker {
  color: rgba(247, 243, 236, 0.82);
  margin-bottom: 1.1rem;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 5.2rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  margin-bottom: 0.45em;
  max-width: 15ch;
  text-wrap: balance;
}
.hero__sub {
  font-size: var(--step-1);
  max-width: 42ch;
  color: rgba(247, 243, 236, 0.9);
  margin-bottom: 1.9rem;
}
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
}

/* Scroll-Hinweis */
.hero__scroll {
  display: none;
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 243, 236, 0.65);
}
@media (min-width: 900px) { .hero__scroll { display: flex; } }
.hero__scroll i {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(rgba(247,243,236,0.7), rgba(247,243,236,0));
  animation: drop 2.4s var(--ease-soft) infinite;
  transform-origin: top;
}
@keyframes drop {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(42px); opacity: 0; }
}

/* --------------------------------------------------------------------------
   9 · Öffnungsstatus (eigene Sektion, nicht in der Hero versteckt)
   -------------------------------------------------------------------------- */
.status {
  border-block: 1px solid var(--rule);
  background: var(--paper-warm);
}
.status__in {
  display: grid;
  gap: var(--gap-m);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .status__in { grid-template-columns: auto 1fr auto; gap: var(--gap-l); }
}
.status__now { display: flex; align-items: center; gap: 0.85rem; }
.status__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink-mute);
  flex: none;
  position: relative;
}
.status__dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
}
.status--open  .status__dot { background: var(--green); color: var(--green); }
.status--open  .status__dot::after { opacity: 0.45; animation: ping 2.6s var(--ease-out) infinite; }
.status--closed .status__dot { background: var(--paprika); }
@keyframes ping {
  0%   { transform: scale(0.7); opacity: 0.6; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.status__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  text-transform: lowercase;
  line-height: 1;
}
.status__note { color: var(--ink-mute); font-size: var(--step--1); }

.status__week {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.status__day { display: flex; gap: 0.5rem; }
.status__day b { font-weight: 600; }
.status__day.is-today { color: var(--paprika-deep); }
.status__day.is-today b { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   10 · Speisekarte (Papieroptik mit Führungspunkten wie im Original-PDF)
   -------------------------------------------------------------------------- */
.menu-group + .menu-group { margin-top: var(--gap-l); }
.menu-group__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: 0.35rem;
}
.menu-group__head h3 { margin-right: auto; }
.menu-group__note { font-size: var(--step--1); color: var(--ink-mute); font-style: italic; }

.menu-list { list-style: none; padding: 0; }
.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 0.6rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--rule-soft);
}
.menu-item__name {
  font-weight: 600;
  font-size: var(--step-0);
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* Führungspunkte */
.menu-item__lead {
  flex: 1 1 40px;
  min-width: 24px;
  align-self: flex-end;
  margin-bottom: 0.28em;
  border-bottom: 1.5px dotted var(--rule);
}
@media (max-width: 620px) { .menu-item__lead { display: none; } }
.menu-item__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.menu-item__desc {
  grid-column: 1 / -1;
  font-size: var(--step--1);
  color: var(--ink-mute);
  line-height: 1.5;
  margin-top: 0.28rem;
  max-width: 58ch;
}
.menu-item__opts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  margin-top: 0.55rem;
}
.opt {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  background: var(--paper-deep);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.opt b { font-weight: 700; font-variant-numeric: tabular-nums; }
/* nowrap haelt Beschreibung und Preis zusammen. Auf sehr schmalen Geraeten wird
   eine einzelne lange Pille dadurch breiter als die Textspalte und schiebt die
   ganze Seite nach rechts (gemessen: 322 px Pille in 280 px Spalte bei 320 px
   Fensterbreite). Ab dort darf sie umbrechen. */
@media (max-width: 400px) { .opt { white-space: normal; } }

/* Kennzeichnung vegan/vegetarisch */
.tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 2px;
  white-space: nowrap;
  align-self: center;
}
.tag--vegan { background: #E3EADF; color: #3C5433; }
.tag--veg   { background: var(--ochre-tint); color: #7A5312; }
.tag--neu   { background: var(--paprika-tint); color: var(--paprika-deep); }

/* Sprungnavigation der Speisekarte */
.menu-jump {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(247, 243, 236, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--gap-m);
}
.menu-jump ul {
  list-style: none;
  padding: 0.8rem 0;
  margin: 0;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.menu-jump ul::-webkit-scrollbar { display: none; }
.menu-jump a {
  display: block;
  padding: 0.45rem 0.9rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.menu-jump a:hover, .menu-jump a.is-active {
  background: var(--ink);
  color: var(--paper-warm);
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* --------------------------------------------------------------------------
   11 · Bildkacheln (Verteilerseite + Standort-Teaser)
   -------------------------------------------------------------------------- */
.tiles { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 940px) {
  .tiles--3 { grid-template-columns: 1fr 1fr 1fr; }
  .tiles--2 { grid-template-columns: 1fr 1fr; }
}

.tile {
  position: relative;
  display: grid;
  align-content: end;
  min-height: clamp(440px, 58vw, 680px);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: var(--paper-warm);
  background: var(--ink);
}
.tile__media { position: absolute; inset: 0; z-index: -2; }
.tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.1s var(--ease-soft), filter 1.1s var(--ease-soft);
  filter: saturate(0.94);
}
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
              rgba(10, 8, 6, 0.88) 0%,
              rgba(10, 8, 6, 0.68) 26%,
              rgba(10, 8, 6, 0.22) 52%,
              rgba(10, 8, 6, 0) 74%);
  transition: opacity var(--dur-slow) var(--ease-out);
}
.tile:hover .tile__media img { transform: scale(1.09); filter: saturate(1.06); }

.tile__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 243, 236, 0.78);
  margin-bottom: 0.85rem;
}
.tile__meta i { width: 20px; height: 1px; background: var(--ochre); display: block; flex: none; }
.tile h2, .tile h3 {
  font-size: var(--step-3);
  line-height: 0.92;
  margin-bottom: 0.4rem;
}
.tile p {
  font-size: var(--step-0);
  color: rgba(247, 243, 236, 0.86);
  max-width: 34ch;
  margin-bottom: 1.3rem;
}
.tile__go {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tile__go i {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(247, 243, 236, 0.16);
  transition: transform var(--dur-mid) var(--ease-snap), background-color var(--dur-fast) var(--ease-out);
}
.tile:hover .tile__go i { transform: translate(4px, -3px); background: var(--wine); }
.tile__go svg { width: 12px; height: 12px; }

/* Statuszeile auf der Kachel */
.tile__open {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: 0.9rem;
  color: var(--paper-warm);
}
.tile__open span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-mute); }
.tile__open.is-open span { background: #7FB06A; }
.tile__open.is-closed span { background: #E0724C; }

/* --------------------------------------------------------------------------
   12 · Editorial-Split (Text | Bild)
   -------------------------------------------------------------------------- */
.split { display: grid; gap: var(--gap-m); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--gap-l); }
  .split--wide-l { grid-template-columns: 1.15fr 0.85fr; }
  .split--wide-r { grid-template-columns: 0.85fr 1.15fr; }
  .split--flip > :first-child { order: 2; }
  /* Ohne Beitext ist die Textspalte kürzer als das Bild. Zentriert entstünde
     oben und unten ein gleich großes Loch; oben bündig ist es eine Kante. */
  .split--oben { align-items: start; }
}
.split__media { position: relative; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__media--wide img { aspect-ratio: 3 / 2; }

/* Bildunterschrift im Zeitungsstil */
/* Gleiche Begruendung wie beim Vorlauf-Label: der kurze Farbstrich davor ist
   entfallen. Die Bildunterschrift traegt sich ueber Groesse und Farbe. */
.caption {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   13 · Galerie
   -------------------------------------------------------------------------- */
.gal { display: grid; gap: clamp(0.5rem, 1.2vw, 1rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px)  { .gal { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .gal { grid-template-columns: repeat(4, 1fr); } }
.gal figure { margin: 0; position: relative; overflow: hidden; background: var(--paper-deep); }
.gal img {
  width: 100%; height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 900ms var(--ease-soft);
}
.gal figure:hover img { transform: scale(1.06); }
.gal figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 0.85rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--paper-warm);
  background: linear-gradient(transparent, rgba(10, 8, 6, 0.78));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-soft);
}
.gal figure:hover figcaption, .gal figure:focus-within figcaption { opacity: 1; transform: none; }

/* Große Kachel */
@media (min-width: 760px) {
  .gal .is-tall { grid-row: span 2; }
  .gal .is-tall img { aspect-ratio: auto; height: 100%; }
}

/* --------------------------------------------------------------------------
   14 · Fakten / Zahlenreihe
   -------------------------------------------------------------------------- */
.facts { display: grid; gap: var(--gap-m); }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.fact { border-top: 1.5px solid var(--ink); padding-top: 1rem; }
.fact b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 0.35rem;
}
.fact span { font-size: var(--step--1); color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   15 · Merkmalsliste (Services)
   -------------------------------------------------------------------------- */
.feats { list-style: none; padding: 0; display: grid; gap: 0; }
@media (min-width: 700px) { .feats { grid-template-columns: 1fr 1fr; column-gap: var(--gap-l); } }
.feats li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
}
.feats svg { width: 19px; height: 19px; color: var(--paprika); flex: none; }

/* --------------------------------------------------------------------------
   16 · Kontaktkarten
   -------------------------------------------------------------------------- */
.cards { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 780px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--2 { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--paper-warm);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  display: grid;
  gap: 0.5rem;
  align-content: start;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
a.card:hover { background: #fff; }
.card__k {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.card__v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.card__v--sm { font-size: var(--step-0); font-family: var(--font-text); font-weight: 500; letter-spacing: 0; line-height: 1.5; }

/* --------------------------------------------------------------------------
   17 · Formular
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }
.field { display: grid; gap: 0.4rem; }
.field > label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--step-0);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0;
  border-color: var(--paprika);
  box-shadow: 0 0 0 3px var(--paprika-tint);
}
.field input::placeholder, .field textarea::placeholder { color: #A2968A; }

/* Formularelemente ins Farbsystem (Playbook: nicht nur Buttons/Links) */
.check { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--step--1); line-height: 1.5; }
.check input[type='checkbox'], .check input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  flex: none;
  margin-top: 1px;
  border: 1px solid var(--ink-mute);
  border-radius: var(--radius);
  background: var(--paper-warm);
  display: grid;
  place-content: center;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.check input[type='radio'] { border-radius: 50%; }
.check input:checked { background: var(--paprika); border-color: var(--paprika); }
.check input:checked::after {
  content: '';
  width: 10px; height: 6px;
  border-left: 2px solid var(--paper-warm);
  border-bottom: 2px solid var(--paper-warm);
  transform: rotate(-45deg) translate(1px, -1px);
}
.check input[type='radio']:checked::after {
  width: 8px; height: 8px; border: 0; border-radius: 50%;
  background: var(--paper-warm); transform: none;
}
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236A5E50' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.6rem;
}

.form__note { font-size: var(--step--1); color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   18 · Hinweisbox
   -------------------------------------------------------------------------- */
.note {
  /* Bewusst block, nicht grid: als Grid-Container würde jedes Inline-Element im
     Fließtext — ein Link, ein <b>, ein <code> — zu einem eigenen Rasterfeld und
     damit auf volle Breite in eine eigene Zeile gedrückt. Nur die einleitende
     Beschriftung soll eine eigene Zeile bekommen, siehe unten. */
  display: block;
  padding: 1.15rem 1.35rem;
  background: var(--ochre-tint);
  border-left: 3px solid var(--ochre);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step--1);
  line-height: 1.55;
}
.note b { font-weight: 700; }
.note > b:first-child { display: block; margin-bottom: 0.5rem; }
.note--demo { background: var(--paprika-tint); border-left-color: var(--paprika); }

/* --------------------------------------------------------------------------
   19 · Fußzeile
   -------------------------------------------------------------------------- */
.ftr {
  background: #000;
  color: #FFFFFF;
  /* Der untere Wert ist bewusst groß: vorher schloss die Zeile mit Impressum und
     Datenschutz 28 px über der Fensterkante ab und wirkte abgeschnitten. */
  padding-block: clamp(3rem, 5vw, 4.5rem) clamp(3.5rem, 6vw, 6rem);
}
.ftr__top { display: grid; gap: var(--gap-m); }
@media (min-width: 900px) { .ftr__top { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: var(--gap-m); } }
.ftr__mark { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; letter-spacing: -0.045em; color: #FFFFFF; line-height: 1; margin-bottom: 0.6rem; }
.ftr__tag { font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; color: #FFFFFF; }
.ftr h2 { font-family: var(--font-text); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 0.9rem; }
.ftr ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.ftr a { text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.ftr a:hover { text-decoration: underline; text-underline-offset: 0.28em; text-decoration-thickness: 1px; }
.ftr__social { display: flex; gap: 0.55rem; margin-top: 1rem; }
.ftr__social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-snap);
}
.ftr__social a:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }
.ftr__social svg { width: 17px; height: 17px; }
.ftr__bot {
  margin-top: var(--gap-m);
  padding-top: var(--gap-s);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  font-size: var(--step--1);
  color: #FFFFFF;
}
.ftr__bot .sp { margin-left: auto; }
@media (max-width: 700px) { .ftr__bot .sp { margin-left: 0; } }

/* --------------------------------------------------------------------------
   20 · Anruf-Knopf mobil
   -------------------------------------------------------------------------- */
.fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  background: var(--ink);
  color: var(--paper-warm);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  /* Der Innenrand hält den Knopf sichtbar, wenn er über dem schwarzen Footer
     steht — ohne ihn verschwindet die Pillenform dort im Hintergrund. */
  box-shadow: 0 10px 30px -8px rgba(20, 17, 14, 0.5),
              inset 0 0 0 1px rgba(255, 255, 255, 0.26);
  transform: translateY(120%);
  transition: transform var(--dur-mid) var(--ease-snap);
}
.fab.is-in { transform: none; }
.fab svg { width: 15px; height: 15px; }
@media (min-width: 1000px) { .fab { display: none; } }

/* --------------------------------------------------------------------------
   21 · Scroll-Einblendung
   -------------------------------------------------------------------------- */
.js .rise { opacity: 0; transform: translateY(26px); }
.js .rise.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-soft);
}
.js .rise:nth-child(2)  { transition-delay: 70ms; }
.js .rise:nth-child(3)  { transition-delay: 140ms; }
.js .rise:nth-child(4)  { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; }
  .hero__scroll i { animation: none; }
  .status__dot::after { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   22 · Hilfsklassen
   -------------------------------------------------------------------------- */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 100;
  padding: 0.8rem 1.4rem;
  background: var(--ink);
  color: var(--paper-warm);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip:focus { transform: translate(-50%, 0); }

.mt-0 { margin-top: 0; }
.mt-s { margin-top: var(--gap-s); }
.mt-m { margin-top: var(--gap-m); }
.mt-l { margin-top: var(--gap-l); }
.center { text-align: center; }
.dim { color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   23 · Verteilerseite (Hub)
   -------------------------------------------------------------------------- */
.hub-intro {
  padding-block: calc(var(--header-h) + clamp(3rem, 8vw, 6.5rem)) clamp(2rem, 4vw, 3rem);
}
.hub-logo {
  width: clamp(190px, 27vw, 340px);
  color: var(--ink);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.hub-claim {
  font-size: clamp(2.1rem, 6.4vw, 5.2rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  max-width: 22ch;
  margin-bottom: 1.1rem;
}
.hub-claim em {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--paprika);
  text-transform: none;
}
.hub-sub {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 44ch;
}

/* Schnellzugriff-Leiste */
.quick {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 640px) { .quick { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .quick { grid-template-columns: repeat(4, 1fr); } }
.quick__item {
  display: grid;
  gap: 0.3rem;
  align-content: center;
  padding: clamp(1.2rem, 2.4vw, 1.7rem) clamp(1rem, 2vw, 1.5rem);
  background: var(--paper);
  text-decoration: none;
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.quick__item::after {
  content: '↗';
  position: absolute;
  top: clamp(1.2rem, 2.4vw, 1.7rem);
  right: clamp(1rem, 2vw, 1.5rem);
  font-size: 0.9rem;
  color: var(--ink-mute);
  transition: transform var(--dur-mid) var(--ease-snap), color var(--dur-fast) var(--ease-out);
}
.quick__item:hover { background: var(--paper-warm); }
.quick__item:hover::after { transform: translate(2px, -2px); color: var(--wine); }
.quick__k {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.quick__v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.025em;
  text-transform: lowercase;
  line-height: 1.15;
  padding-right: 1.6rem;
}

/* --------------------------------------------------------------------------
   25 · Wortmarke als Maske — dadurch in jeder Farbe einsetzbar
   -------------------------------------------------------------------------- */
.logo {
  display: block;
  aspect-ratio: 416 / 96;
  background-color: currentColor;
  -webkit-mask: url('../img/brand/logo.svg') center / contain no-repeat;
  mask: url('../img/brand/logo.svg') center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   26 · Speisekarten-Teaser
   -------------------------------------------------------------------------- */
.tease { display: grid; gap: clamp(0.9rem, 2vw, 1.4rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .tease { grid-template-columns: repeat(4, 1fr); } }
.tease__card {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  text-decoration: none;
  color: inherit;
}
.tease__card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: 0.5rem;
  transition: transform 900ms var(--ease-soft), filter 900ms var(--ease-soft);
  filter: saturate(0.96);
}
.tease__card { overflow: hidden; }
.tease__card > img { will-change: transform; }
.tease__card:hover img { transform: scale(1.045); filter: saturate(1.06); }
.tease__k {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.025em;
  text-transform: lowercase;
  line-height: 1.05;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tease__card:hover .tease__k { color: var(--paprika-deep); }
.tease__k::after {
  content: '↗';
  font-family: var(--font-text);
  font-size: 0.75em;
  opacity: 0.45;
  transition: transform var(--dur-mid) var(--ease-snap), opacity var(--dur-fast) var(--ease-out);
}
.tease__card:hover .tease__k::after { transform: translate(2px, -2px); opacity: 1; }
.tease__d { font-size: var(--step--1); color: var(--ink-mute); line-height: 1.45; }

/* --------------------------------------------------------------------------
   27 · Herausgestelltes Zitat
   -------------------------------------------------------------------------- */
.pull { margin: 0; display: grid; gap: 1.1rem; justify-items: center; }
.pull .quote { font-size: var(--step-3); line-height: 1.22; max-width: 22ch; }
.pull figcaption {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   28 · Wechsel zum anderen Haus
   -------------------------------------------------------------------------- */
.switch {
  display: grid;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  overflow: hidden;
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (min-width: 780px) { .switch { grid-template-columns: 0.9fr 1.1fr; align-items: stretch; } }
.switch:hover { background: #fff; }
.switch__media { overflow: hidden; }
.switch__media img {
  width: 100%; height: 100%;
  min-height: 220px;
  object-fit: cover;
  transition: transform 1s var(--ease-soft);
}
.switch:hover .switch__media img { transform: scale(1.05); }
.switch__body {
  padding: clamp(1.5rem, 3.5vw, 2.8rem);
  display: grid;
  gap: 0.7rem;
  align-content: center;
}
.switch__body h2 { font-size: var(--step-3); }
.switch__body p { color: var(--ink-mute); font-size: var(--step-0); }
.switch__body .tile__go { margin-top: 0.4rem; }
.switch:hover .tile__go i { transform: translate(4px, -3px); background: var(--wine) !important; color: var(--paper-warm); }

/* Fußzeilen-Wortmarke */
.ftr__logo { width: 190px; color: #FFFFFF; margin-bottom: 1.1rem; }

/* --------------------------------------------------------------------------
   29 · Seitenkopf für Unterseiten (ohne Hero)
   -------------------------------------------------------------------------- */
.pagehead {
  padding-block: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
}
.pagehead h1 { font-size: clamp(2.6rem, 8vw, 6rem); letter-spacing: -0.05em; }
.pagehead .lead { max-width: 50ch; }

.menu-legend { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: var(--step--1); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: rgba(20, 17, 14, 0.06);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   30 · Schrittfolge
   -------------------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: var(--paper);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid;
  gap: 0.6rem;
  align-content: start;
}
.step__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  letter-spacing: -0.04em;
  color: var(--paprika);
  line-height: 1;
}
.step h3, .step h2 { font-size: var(--step-1); }
.step p { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.55; }

/* --------------------------------------------------------------------------
   31 · Formular-Ergänzungen
   -------------------------------------------------------------------------- */
fieldset { border: 0; padding: 0; margin: 0; }
legend {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0;
}
.checks { display: grid; gap: 0.65rem; }
@media (min-width: 640px) { .checks { grid-template-columns: 1fr 1fr; } }
.check a { color: var(--paprika-deep); }

.form__ok {
  display: none;
  padding: 1.1rem 1.35rem;
  background: #E6EEE2;
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step--1);
}
.form__ok.is-on { display: block; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--paprika); }
.field__err { display: none; font-size: var(--step--1); color: var(--paprika-deep); }
.field.has-error .field__err { display: block; }

/* --------------------------------------------------------------------------
   32 · Herkunft (Über uns)
   -------------------------------------------------------------------------- */
.origin { display: grid; gap: var(--gap-m); }
@media (min-width: 780px) { .origin { grid-template-columns: 1fr 1fr; gap: var(--gap-m) var(--gap-l); } }
.origin__item { border-top: 1.5px solid var(--ink); padding-top: 1.1rem; display: grid; gap: 0.45rem; align-content: start; }
.origin__k {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paprika-deep);
}
.origin__item h3 { font-size: var(--step-2); }
.origin__item p { font-size: var(--step-0); color: var(--ink-soft); line-height: 1.55; }

/* --------------------------------------------------------------------------
   33 · Standortblock (Kontaktseite)
   -------------------------------------------------------------------------- */
.loc { display: grid; gap: var(--gap-s); }
.loc__head {
  display: grid;
  gap: var(--gap-s);
  align-items: end;
  padding-bottom: 1rem;
  border-bottom: 1.5px solid var(--ink);
}
@media (min-width: 760px) { .loc__head { grid-template-columns: 1fr auto; } }
.loc__head h2 { font-size: var(--step-3); }
.loc__status { display: flex; align-items: center; gap: 0.8rem; }
.loc.status--open  .status__dot { background: var(--green); color: var(--green); }
.loc.status--open  .status__dot::after { opacity: .45; animation: ping 2.6s var(--ease-out) infinite; }
.loc.status--closed .status__dot { background: var(--paprika); }

/* Rechtstexte */
.prose h2 { font-size: var(--step-2); margin-bottom: .6em; }
.prose h3 { font-size: var(--step-1); margin-bottom: .5em; }
.prose ul { padding-left: 1.15rem; display: grid; gap: .4rem; }
.prose li { line-height: 1.55; }

/* --------------------------------------------------------------------------
   34 · Touch-Ziele — auf Fingergröße bringen, ohne das Layout zu verschieben
   -------------------------------------------------------------------------- */
@media (hover: none), (max-width: 999px) {
  .ftr ul li a,
  .ftr__bot a,
  .navmodal__foot a,
  .hero__foot .link-u,
  .hdr__brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Der zusätzliche Raum darf die Listenabstände nicht aufblähen */
  .ftr ul { gap: 0; }
  .ftr ul li { line-height: 1.45; }
}
.ftr__social a { width: 44px; height: 44px; }

/* Sprungnavigation: Hinweis, dass rechts noch mehr kommt */
.menu-jump { position: sticky; }
.menu-jump .wrap { position: relative; }
.menu-jump .wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 46px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(247,243,236,0), rgba(247,243,236,0.95));
}
@media (min-width: 1180px) { .menu-jump .wrap::after { display: none; } }

/* --------------------------------------------------------------------------
   35 · Kacheltext auf schmalen Schirmen zuverlässig lesbar halten
   Auf Mobil steht mehr Text übereinander, also muss der Verlauf höher reichen.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .tile::before {
    background: linear-gradient(to top,
      rgba(10, 8, 6, 0.92) 0%,
      rgba(10, 8, 6, 0.86) 34%,
      rgba(10, 8, 6, 0.62) 58%,
      rgba(10, 8, 6, 0.16) 82%,
      rgba(10, 8, 6, 0) 100%);
  }
  .tile__meta { letter-spacing: 0.1em; font-size: 0.78rem; }
  .tile { min-height: clamp(420px, 92vw, 560px); }
}

/* <picture> darf keine eigene Box bilden, sonst rutscht das <img> aus
   Grid- und Flex-Kontexten heraus. */
picture { display: contents; }

/* Speisekarten-Gruppen sind die zweite Ebene der Seite -> h2, aber optisch
   in der Größe einer Zwischenüberschrift. */
.menu-group__head h2 { font-size: var(--step-2); letter-spacing: -0.02em; }

/* ==========================================================================
   36 · Verteilerseite — Fassung ohne Kopfzeile (Stand 2026-08-27)
   Die Startseite ist reiner Verteiler: keine Navigationsleiste, die Wortmarke
   trägt als h1 die Seite, darunter sofort die drei Wege.
   ========================================================================== */

/* Auftakt: nur die Wortmarke, mittig. Ohne Kopfzeile entfällt deren Höhe.
   Die Wortmarke bekommt bewusst viel Luft nach oben und unten — sie ist auf
   dieser Seite das einzige Absenderzeichen und soll allein stehen. Der untere
   Wert ist so gewählt, dass auf dem Telefon die erste Kachel noch im ersten
   Bildschirm beginnt (gemessen: Kachelbeginn bei ~200 px, Kachelhöhe 420 px). */
.page-hub .hub-intro {
  padding-block: clamp(5rem, 9vw, 8.5rem) clamp(4rem, 7vw, 6.5rem);
  text-align: center;
}
.page-hub .hub-logo {
  width: clamp(250px, 44vw, 540px);
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: 0;
  color: var(--ink);
}

/* Kacheln schließen direkt an */
.hub-tiles { padding-block: 0 var(--gap-l); }

/* --------------------------------------------------------------------------
   Gleiche Höhen über alle drei Kacheln.
   Ohne Subgrid richtet sich jede Kachel nur nach ihrem eigenen Inhalt aus —
   unterschiedlich lange Überschriften und die fehlende Statuszeile beim
   Catering verschieben dann alles gegeneinander. Mit Subgrid teilen sich die
   drei Kacheln dieselben Zeilenhöhen: Ortszeile, Titel und Link liegen exakt
   auf einer Linie.
   -------------------------------------------------------------------------- */
@media (min-width: 940px) {
  @supports (grid-template-rows: subgrid) {
    .hub-tiles .tiles--3 {
      column-gap: clamp(1rem, 2vw, 1.5rem);
      row-gap: 0;
      /* 1 = Dehnfuge  2 = Ortszeile  3 = Status  4 = Titel  5 = Text  6 = Link
         Die Dehnfuge braucht ein Mindestmaß: als reines 1fr kollabiert sie auf 0,
         weil der Rahmen keine eigene Höhe hat — die Kachel wäre dann nur so hoch
         wie ihr Text und das Foto verschwände. */
      grid-template-rows: minmax(clamp(190px, 25vw, 330px), 1fr) auto auto auto auto auto;
    }
    .hub-tiles .tile {
      grid-row: 1 / span 6;
      grid-template-rows: subgrid;
      align-content: initial;
    }
    .hub-tiles .tile__meta { grid-row: 2; }
    .hub-tiles .tile__open { grid-row: 3; }
    .hub-tiles .tile h2    { grid-row: 4; }
    .hub-tiles .tile p     { grid-row: 5; }
    .hub-tiles .tile__go   { grid-row: 6; }
  }
}

/* Die Kachelüberschriften müssen einzeilig bleiben, sonst hilft auch die
   beste Zeilenausrichtung nichts — „belgisches viertel" ist das längste Wort­
   paar und gibt die Obergrenze vor. */
.hub-tiles .tile h2 {
  font-size: clamp(1.5rem, 2.35vw, 2.1rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: nowrap;
}
@media (max-width: 939px) {
  .hub-tiles .tile h2 { font-size: clamp(1.6rem, 7vw, 2.4rem); text-wrap: balance; }
}

/* Gleichmäßiger Abstand zwischen den Zeilen der Kachel */
.hub-tiles .tile__meta { margin-bottom: 0.7rem; }
.hub-tiles .tile__open { margin-bottom: 0.7rem; }
.hub-tiles .tile h2    { margin-bottom: 0.5rem; }
.hub-tiles .tile p     { margin-bottom: 1.15rem; }

/* Catering hat keinen Öffnungsstatus — statt einer sichtbaren Lücke steht dort
   die gleichwertige, belegte Angabe. Neutraler Punkt, damit es nicht als
   Geöffnet-/Geschlossen-Anzeige missverstanden wird. */
.tile__open--note span { background: var(--ochre); }

/* Der Textblock beginnt auf der Verteilerseite höher als auf den Standort-
   seiten. Der Verlauf muss entsprechend weiter hinaufreichen, sonst steht die
   Ortszeile auf hellen Bildstellen (Catering-Kachel) zu schwach. */
@media (min-width: 940px) {
  .hub-tiles .tile::before {
    background: linear-gradient(to top,
      rgba(10, 8, 6, 0.9) 0%,
      rgba(10, 8, 6, 0.82) 30%,
      rgba(10, 8, 6, 0.62) 46%,
      rgba(10, 8, 6, 0.26) 66%,
      rgba(10, 8, 6, 0) 88%);
  }
}

/* --------------------------------------------------------------------------
   37 · Fakten-Sektion der Verteilerseite
   Zwei Dinge waren hier falsch gesetzt:
   1. Der Beitext hing an der Oberkante der Spalte und begann damit über der
      Überschrift statt neben ihr.
   2. „aus dem veedel" brach auf zwei Zeilen, wodurch der zugehörige Fließtext
      47 px tiefer stand als bei den beiden Nachbarn.
   -------------------------------------------------------------------------- */

/* Eyebrow allein in Zeile 1; Überschrift und Beitext teilen sich Zeile 2 und
   werden über ihre erste Grundlinie ausgerichtet. Dadurch startet der Beitext
   exakt auf der Linie der Überschrift — unabhängig davon, wie lang er ist. */
@media (min-width: 900px) {
  .sec-head--baseline {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: baseline;
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: var(--gap-s);
  }
  .sec-head--baseline > .eyebrow { grid-column: 1; grid-row: 1; }
  .sec-head--baseline > h2       { grid-column: 1; grid-row: 2; }
  .sec-head--baseline > .lead    { grid-column: 2; grid-row: 2; max-width: 44ch; }
}

/* Die drei Fakten liegen unter den drei Kacheln und übernehmen deren
   Spaltenabstand, damit die Kanten durchlaufen. Subgrid hält Schlagwort und
   Fließtext auf einer Linie, auch wenn ein Schlagwort zweizeilig wird. */
@media (min-width: 720px) {
  .facts--aligned { column-gap: clamp(1rem, 2vw, 1.5rem); }

  @supports (grid-template-rows: subgrid) {
    .facts--aligned {
      row-gap: 0;
      grid-template-rows: auto auto;
    }
    .facts--aligned .fact {
      display: grid;
      grid-row: 1 / span 2;
      grid-template-rows: subgrid;
    }
    .facts--aligned .fact b    { grid-row: 1; }
    .facts--aligned .fact span { grid-row: 2; }
  }
}

/* ==========================================================================
   38 · Catering-Bestellhelfer
   Ersetzt das PDF-Bestellformular. Alle Preise stehen als data-preis am
   Element; die Rechenlogik liegt in catering.js. Netto-Preise, weil die
   Catering-Karte des Betriebs sie so ausweist („zzgl. 19% mwst").
   ========================================================================== */

/* --- Filterleiste ------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.filters__label {
  font-size: var(--step--1);
  color: var(--ink-mute);
  margin-right: 0.25rem;
}
.chip {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  min-height: 40px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--ink-mute); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-warm);
}

/* --- Zweispaltiger Aufbau: Liste links, Zusammenfassung rechts ---------- */
.build { display: grid; gap: var(--gap-m); }
/* Ab hier läuft die Zusammenfassung mit. Der Umbruchpunkt liegt bewusst
   niedrig: darunter steht sie erst hinter 25 Positionen, und der Gast müsste
   die ganze Liste zurückscrollen, um seine Summe zu sehen. */
@media (min-width: 940px) {
  .build {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
    gap: clamp(1.5rem, 3vw, 3.5rem);
    align-items: start;
  }
  .build__side {
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
  }
}

/* --- Eine bestellbare Position ------------------------------------------ */
.bitem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 1.25rem;
  padding: 0.95rem 0.9rem 0.95rem 0.75rem;
  border-bottom: 1px solid var(--rule-soft);
  transition: background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
/* Text und Bedienung sind zwei Geschwister. Vorher spannte die rechte Spalte
   über die Zeilen des Rasters — mit grid-row: 1 / -1. Ohne explizit gesetzte
   Zeilen zeigt -1 aber auf die erste Linie zurück, die Spannung fiel in sich
   zusammen und die Kennzeichnung rutschte unter den Namen. */
.bitem__body { min-width: 0; }
.bitem.is-picked {
  background: var(--paper-warm);
  box-shadow: inset 3px 0 0 var(--paprika);
}

.bitem__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
}
.bitem__name { font-weight: 600; font-size: var(--step-0); }
.bitem__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bitem__desc {
  font-size: var(--step--1);
  color: var(--ink-mute);
  line-height: 1.5;
  margin-top: 0.3rem;
  max-width: 56ch;
}
/* Preis und Mengenwähler stehen zusammen in der rechten Spalte. Lag der Preis
   im Kopf, brach er auf dem Telefon hinter dem Kennzeichen um und stand allein
   in einer eigenen Zeile — vom Namen abgelöst und schwer zuzuordnen. */
.bitem__ctl {
  display: grid;
  gap: 0.5rem;
  justify-items: end;
}

/* Schmale Bildschirme: Beschreibung bekommt die volle Breite, Preis und
   Mengenwähler rücken darunter in eine eigene Zeile. */
@media (max-width: 560px) {
  .bitem { grid-template-columns: 1fr; }
  .bitem__ctl {
    grid-auto-flow: column;
    justify-content: space-between;
    justify-items: stretch;
    align-items: center;
    margin-top: 0.85rem;
  }
  .bitem__price { font-size: var(--step-1); }
}

/* --- Mengenwähler ------------------------------------------------------- */
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-warm);
  overflow: hidden;
}
.stepper button {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.stepper button:hover:not(:disabled) { background: var(--paper-deep); }
.stepper button:disabled { color: var(--rule); cursor: default; }
.stepper output {
  min-width: 2.4ch;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.is-picked .stepper { border-color: var(--ink); }

/* --- Umschalter Portion / Schüssel -------------------------------------- */
.seg {
  display: inline-flex;
  margin-top: 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper-warm);
}
.seg button {
  font-family: var(--font-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.85rem;
  min-height: 36px;
  border: 0;
  background: none;
  color: var(--ink-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper-warm); }

/* --- Zusammenfassung ---------------------------------------------------- */
.cart {
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.4rem;
}
.cart__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.03em;
  margin-bottom: 0.9rem;
}
.cart__empty { font-size: var(--step--1); color: var(--ink-mute); line-height: 1.55; }
.cart__rows { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.cart__row {
  display: grid;
  grid-template-columns: 2.6ch 1fr auto;
  gap: 0.5rem;
  font-size: var(--step--1);
  line-height: 1.45;
  align-items: baseline;
}
.cart__row b { font-variant-numeric: tabular-nums; font-weight: 700; }
.cart__row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart__note {
  font-size: 0.78rem;
  color: var(--green);
  margin-top: 0.5rem;
  font-weight: 600;
}
.cart__sum { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); display: grid; gap: 0.4rem; }
.cart__line {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: var(--step--1); color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.cart__line--total {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 0.25rem;
}
.cart__hint { font-size: 0.76rem; color: var(--ink-mute); line-height: 1.5; margin-top: 0.85rem; }
.cart__actions { display: grid; gap: 0.5rem; margin-top: 1rem; }
.cart__actions .btn { justify-content: space-between; width: 100%; }

/* --- Mobile Leiste ------------------------------------------------------ */
.cartbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: #000;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform var(--dur-mid) var(--ease-snap);
}
.cartbar.is-in { transform: none; }
.cartbar__txt { font-size: var(--step--1); line-height: 1.3; }
.cartbar__txt b { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }
.cartbar__txt span { display: block; opacity: 0.72; font-size: 0.75rem; }
.cartbar a {
  margin-left: auto;
  background: var(--paper-warm);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  white-space: nowrap;
}
@media (min-width: 940px) { .cartbar { display: none; } }

/* --- Auswahl im Formular ------------------------------------------------ */
.pickbox {
  /* Der Kasten steht auf einer Sektion in --paper-deep. In derselben Farbe
     wäre er unsichtbar — deshalb heller plus Haarlinie. */
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--paprika);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  font-size: var(--step--1);
  line-height: 1.6;
}
.pickbox b { font-weight: 700; }
.pickbox ul { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.3rem; }
.pickbox li { font-variant-numeric: tabular-nums; }

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

/* ==========================================================================
   39 · Impressionen — Mosaik mit gestaffeltem Einstieg
   --------------------------------------------------------------------------
   Die alte Galerie war ein gleichmaessiges Quadratraster: vier gleich grosse
   Kacheln pro Reihe, alle im selben Moment eingeblendet. Das las sich wie ein
   Kontaktbogen, nicht wie ein Blick ins Haus.

   Hier tragen drei Dinge:
   1. Echte Groessenunterschiede. Das Raster hat feste Zeilenhoehen; jede
      Kachel belegt eine abgezaehlte Zahl von Spalten und Zeilen. Die Spannen
      sind so gewaehlt, dass jedes Band die sechs Spalten exakt fuellt — sonst
      liesse die automatische Platzierung Loecher stehen.
   2. Einstieg von unten. Nur transform und opacity, nichts, was Layout
      ausloest.
   3. Staffelung. Den Versatz vergibt site.js beim Eintritt in den Sichtbereich,
      nicht eine :nth-child-Kette (siehe dortiger Kommentar).
   ========================================================================== */
.imp {
  display: grid;
  gap: clamp(0.4rem, 1.1vw, 0.85rem);
  grid-template-columns: repeat(2, 1fr);
  /* Feine Zeilenhoehe: erst dadurch lassen sich Hoch-, Quer- und Panoramaformat
     ueber Zeilenspannen sauber treffen. Eine grobe Zeile haette jede Kachel
     breiter als hoch gemacht. */
  grid-auto-rows: clamp(17px, 5.3vw, 26px);
}

.imp__it {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
}
.imp__it img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1000ms var(--ease-soft);
}
.imp__it:hover img { transform: scale(1.05); }

.imp__it figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 0.85rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--paper-warm);
  background: linear-gradient(transparent, rgba(10, 8, 6, 0.8));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-soft);
}
.imp__it:hover figcaption,
.imp__it:focus-within figcaption { opacity: 1; transform: none; }

/* Einstieg. Der Weg ist bewusst laenger als bei .rise (26px): eine grosse
   Bildflaeche braucht mehr Strecke, damit die Bewegung als Einfliegen und
   nicht als Zucken gelesen wird. */
.js .imp__it { opacity: 0; transform: translateY(44px); }
/* Kachel, die oben aus dem Bild gelaufen ist: sie kommt beim Zurueckscrollen
   von oben wieder herein. site.js setzt die Klasse beim Verlassen, damit der
   Startpunkt feststeht, bevor der Uebergang beginnt. */
.js .imp__it--oben:not(.is-in) { transform: translateY(-44px); }
.js .imp__it.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-soft);
}
@media (prefers-reduced-motion: reduce) {
  .js .imp__it { opacity: 1; transform: none; }
  .imp__it:hover img { transform: none; }
}
/* Beim Drucken gibt es kein Scrollen und damit keinen Ausloeser. Ohne diese
   Regel blieben alle eingeblendeten Bausteine auf dem Papier leer. */
@media print {
  .js .rise,
  .js .imp__it { opacity: 1 !important; transform: none !important; }
  .imp__lupe, .imp__zoom, .fab, .lbx { display: none !important; }
}

/* Unter 1000px greifen die Bandklassen nicht — dort erzeugt ein Wechsel der
   Zeilenhoehe im Zweierpaar die Abwechslung. Paarweise, damit nie eine Luecke
   entsteht. Deshalb max-width statt min-width: so kollidieren die Regeln nicht
   mit den Bandklassen der grossen Fassung. */
@media (max-width: 999px) {
  .imp__it { grid-column: span 1; grid-row: span 5; }
  .imp__it:nth-child(4n+3),
  .imp__it:nth-child(4n+4) { grid-row: span 7; }
}
@media (min-width: 640px) and (max-width: 999px) {
  .imp { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(34px, 5.7vw, 54px); }
  .imp__it { grid-column: span 2; }
}

/* Die grosse Fassung: sechs Spalten, Baender aus abgezaehlten Spannen.
   Jedes Band ergibt genau sechs Spalten, und alle Kacheln eines Bandes enden
   auf derselben Zeile (im ersten Band gilt 8 = 3 + 5). Bliebe irgendwo ein
   Rest, schluege die automatische Platzierung ein Loch ins Raster.

   Die Formate sind nach den vorhandenen Fotos gewaehlt, nicht umgekehrt. Das
   war der Fehler der ersten Fassung: Ehrenfeld besitzt fast nur Hochformate,
   musste aber breite und Panoramafelder fuellen, und die Bilder wurden dabei
   bis zur Unkenntlichkeit beschnitten. Deshalb gibt es jetzt zwei dreispaltige
   Formate, ein liegendes und ein stehendes, waehrend die frueheren Felder
   „breit" und „panorama" ersatzlos entfallen sind.

   Seitenverhaeltnisse bei 1440 px Fensterbreite:
   gross 1,46 · flach 2,00 · Standard 1,17 · hoch 0,83 · halbhoch 1,24 ·
   saeule 0,78. */
@media (min-width: 1000px) {
  .imp { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(40px, 4.3vw, 68px); }
  .imp__it            { grid-column: span 2; grid-row: span 5;  }
  .imp__it--gross     { grid-column: span 4; grid-row: span 8;  }
  .imp__it--flach     { grid-column: span 2; grid-row: span 3;  }
  .imp__it--hoch      { grid-column: span 2; grid-row: span 7;  }
  .imp__it--halbhoch  { grid-column: span 3; grid-row: span 7;  }
  .imp__it--saeule    { grid-column: span 3; grid-row: span 11; }
}

/* ==========================================================================
   40 · Services und Zahlung
   --------------------------------------------------------------------------
   Die Altseiten zeigten beides als gruene Kreise auf abgedunkeltem Foto — die
   Voreinstellung des Baukastens, an dem sie gebaut waren. Hier stehen die
   Angaben in der Sprache des uebrigen Hauses: Haarlinie oben, Strichzeichnung,
   Text darunter. Dieselbe Bauform wie die Faktenreihe der Startseite.
   ========================================================================== */
.svcs {
  list-style: none;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.4vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 620px) { .svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .svcs { grid-template-columns: repeat(var(--svcs-cols, 5), minmax(0, 1fr)); } }

.svcs li {
  border-top: 1.5px solid var(--ink);
  padding-top: 0.85rem;
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  /* align-content muss auf start stehen. Die Listenpunkte sind gleich hoch
     (Rasterstandard), und wer weniger Text hat, behaelt Rest-Hoehe uebrig.
     Ohne diese Zeile verteilt das Raster den Rest gleichmaessig auf alle drei
     Zeilen — dadurch rutschten Symbol und Ueberschrift der kuerzeren Eintraege
     um sieben Pixel nach unten und die Reihe stand nicht mehr auf einer Linie. */
  align-content: start;
}
.svcs svg { width: 26px; height: 26px; color: var(--paprika); stroke-width: 1.5; }
.svcs b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.svcs span { font-size: var(--step--1); color: var(--ink-mute); line-height: 1.5; }

/* --- Zahlungsarten ------------------------------------------------------- */
.pay {
  display: grid;
  gap: 0.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
@media (min-width: 820px) {
  .pay { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: start; gap: 1.6rem; }
}
.pay__k {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 0.55rem;
}
.pay__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Ein Zahlungsmittel: Marke im Kaestchen. Bewusst einfarbig — bunte
   Kartenlogos waeren der eine Fremdkoerper, den diese Seite nicht braucht. */
.pay__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 42px;
  padding-inline: 0.8rem;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pay__list svg { width: 21px; height: 21px; color: var(--ink); flex: none; }
.pay__note { font-size: var(--step--1); color: var(--ink-mute); }

/* ==========================================================================
   41 · Karte ueber der Fusszeile
   --------------------------------------------------------------------------
   Vollbreite Karte, die den ganzen Block anklickbar macht: ein Klick fuehrt
   direkt in die Routenberechnung.
   Das Kartenbild ist selbst gehostet und aus OpenStreetMap-Kacheln aufgebaut,
   in die Papierfarben gezogen. Damit laedt die Seite beim Aufruf nichts von
   Google — kein Einwilligungsbanner noetig — und die Karte passt farblich ins
   Haus. Der Weg zu Google beginnt erst mit dem Klick des Gastes.
   Die Nadel liegt als eigenes Element mittig darueber, nicht im Bild: so
   bleibt sie in jeder Bildschirmbreite scharf und exakt in der Mitte, waehrend
   das Foto darunter beschnitten wird.
   ========================================================================== */
.mapsec { position: relative; background: var(--paper-deep); }
.mapsec__a {
  display: block;
  position: relative;
  height: clamp(340px, 40vw, 540px);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
}
.mapsec__a img { width: 100%; height: 100%; object-fit: cover; }

.mapsec__pin {
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 46px;
  margin: -46px 0 0 -17px;   /* Spitze der Nadel sitzt genau auf dem Mittelpunkt */
  color: var(--paprika);
  pointer-events: none;
}
.mapsec__pin svg { width: 34px; height: 46px; filter: drop-shadow(0 3px 7px rgba(20, 17, 14, 0.4)); }
/* Ruhiger Puls, damit die Nadel im Kartenbild gefunden wird */
.mapsec__pin::before {
  content: '';
  position: absolute;
  left: 50%; top: 100%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--paprika);
  opacity: 0.28;
  animation: mappuls 2600ms var(--ease-out) infinite;
}
@keyframes mappuls {
  0%   { transform: scale(0.5); opacity: 0.32; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .mapsec__pin::before { animation: none; } }

/* Beschriftung unten links, mit Abstand zur Kante */
.mapsec__box {
  position: absolute;
  left: var(--pad-x);
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  right: var(--pad-x);
  max-width: 26rem;
  display: grid;
  gap: 0.75rem;
  padding: 1.15rem 1.25rem;
  background: var(--paper-warm);
  box-shadow: 0 14px 34px -16px rgba(20, 17, 14, 0.5);
  border-radius: var(--radius);
}
.mapsec__k {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.mapsec__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paprika-deep);
}
.mapsec__cta i {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(180, 68, 31, 0.12);
  transition: transform var(--dur-mid) var(--ease-snap), background-color var(--dur-fast) var(--ease-out);
}
.mapsec__cta i svg { width: 12px; height: 12px; }
.mapsec__a:hover .mapsec__cta i { transform: translate(3px, -2px); background: rgba(180, 68, 31, 0.22); }

/* Pflichtangabe der Kartenquelle (ODbL). Klein, aber vorhanden. */
/* Gemessen lag die alte Fassung bei 3,5:1 und damit unter der Grenze von
   4,5:1 fuer kleinen Text. Schrift dunkler, Traegerflaeche deckender, eine
   Spur groesser gesetzt: jetzt 7,0:1. */
.mapsec__credit {
  position: absolute;
  right: 0.55rem;
  bottom: 0.4rem;
  font-size: 0.7rem;
  color: rgba(20, 17, 14, 0.78);
  background: rgba(255, 252, 246, 0.92);
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
}
.mapsec__credit a { color: inherit; }

@media (max-width: 700px) {
  /* Auf schmalen Schirmen ist der Kasten fast so hoch wie die halbe Karte und
     verdeckte damit die Nadel, die ja genau in der Mitte sitzen muss.
     Deshalb wird die Karte hier hoeher. */
  .mapsec__a { height: clamp(400px, 60vh, 520px); }
  .mapsec__box { max-width: none; padding: 1rem 1.05rem; }
}

/* ==========================================================================
   42 · Impressionen: Lupe und Grossansicht
   --------------------------------------------------------------------------
   Die Kacheln waren vorher tote Flaechen. Jetzt liegt ueber jeder ein
   unsichtbarer Knopf, der die Grossansicht oeffnet. Ein Knopf und nicht ein
   Klick-Handler auf dem <figure>, damit die Kachel auch mit der Tastatur
   erreichbar ist und Vorleseprogramme sie als Bedienelement ansagen.
   ========================================================================== */
.imp__zoom {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
}
.imp__zoom:focus-visible { outline: 3px solid var(--paprika); outline-offset: -3px; }

/* Lupenzeichen oben rechts. Es erscheint erst beim Zeigen, damit das Raster
   im Ruhezustand nur aus Fotos besteht. Auf Tastatur-Fokus ebenfalls, sonst
   waere die Kachel fuer Tastaturnutzer stumm. */
.imp__lupe {
  position: absolute;
  top: 0.55rem; right: 0.55rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 252, 246, 0.92);
  color: var(--ink);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-snap);
  pointer-events: none;
}
.imp__lupe svg { width: 16px; height: 16px; }
.imp__it:hover .imp__lupe,
.imp__it:focus-within .imp__lupe { opacity: 1; transform: none; }
@media (hover: none) { .imp__lupe { opacity: 1; transform: none; } }

/* --- Grossansicht -------------------------------------------------------- */
.lbx {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  /* minmax(0, 1fr) statt 1fr: die Kurzform hat ein automatisches Minimum,
     mit dem die Zeile am Inhalt waechst statt ihn zu begrenzen. */
  grid-template-rows: minmax(0, 1fr) auto;
  background: rgba(10, 8, 6, 0.97);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.lbx.is-open { opacity: 1; }
body.lbx-open { overflow: hidden; }

.lbx__buehne {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(3.5rem, 7vw, 5rem) clamp(1rem, 8vw, 6rem) 0;
  min-height: 0;   /* sonst waechst die Zeile ueber den Bildschirm hinaus */
}
.lbx__img {
  max-width: 100%;
  /* Bewusst am Fenster gemessen, nicht in Prozent der Buehne. Prozentwerte
     haetten sich auf eine Zeile bezogen, deren Hoehe erst aus dem Inhalt
     entsteht — dieser Zirkelschluss macht sie unwirksam, und das Bild lief
     nach unten aus dem Bild heraus (gemessen: 904 px in 749 px Platz).
     Der Abzug deckt Kopfabstand und Bildunterschrift. */
  max-height: calc(100dvh - 12rem);
  width: auto; height: auto;
  object-fit: contain;
  background: none;
  border-radius: 2px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-soft);
}
.lbx.is-open .lbx__img { opacity: 1; transform: none; }
.lbx__img.is-laedt { opacity: 0.25; }

.lbx__fuss {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem clamp(1rem, 8vw, 6rem) clamp(1.4rem, 3vw, 2rem);
  color: var(--paper-warm);
}
.lbx__cap { font-size: var(--step--1); line-height: 1.5; }
.lbx__zaehler {
  flex: none;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  /* Der Zaehler ist Nebeninformation, muss aber lesbar bleiben:
     Kontrast gegen den Hintergrund 7,4:1. */
  color: rgba(247, 243, 236, 0.72);
  font-variant-numeric: tabular-nums;
}

.lbx__x, .lbx__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--paper-warm);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-snap);
}
.lbx__x:hover, .lbx__nav:hover { background: rgba(255, 255, 255, 0.22); }
.lbx__x:active, .lbx__nav:active { transform: scale(0.94); }
.lbx__x svg, .lbx__nav svg { width: 18px; height: 18px; }
.lbx__x { top: clamp(0.9rem, 2vw, 1.6rem); right: clamp(0.9rem, 2vw, 1.6rem); }
.lbx__nav { top: 50%; margin-top: -24px; }
.lbx__nav--vor  { right: clamp(0.5rem, 1.6vw, 1.4rem); }
.lbx__nav--zur  { left:  clamp(0.5rem, 1.6vw, 1.4rem); }
@media (max-width: 560px) {
  .lbx__nav { top: auto; bottom: 0.6rem; margin-top: 0; width: 44px; height: 44px; }
  .lbx__fuss { flex-direction: column; align-items: flex-start; gap: 0.4rem; padding-bottom: 4.2rem; }
  /* Untenherum steht mehr: zweizeilige Fusszeile plus die Blaetterknoepfe. */
  .lbx__img { max-height: calc(100dvh - 16rem); }
}

/* ==========================================================================
   43 · Filmvorschau
   --------------------------------------------------------------------------
   Das Standbild liegt auf unserem Server, der YouTube-Rahmen wird erst beim
   Klick nachgeladen. Damit laedt die Seite beim Aufruf nichts von Google,
   und der Gast entscheidet selbst, wann er die Verbindung aufbaut.
   ========================================================================== */
.film {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
}
/* Der Klickbereich ist ein eigener Knopf ueber dem Standbild. Ein Knopf um das
   ganze Feld ginge nicht: sobald der YouTube-Rahmen darin steht, waere ein
   Bedienelement in einem Bedienelement verschachtelt. */
.film__btn {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.film__btn:focus-visible { outline: 3px solid var(--paprika); outline-offset: -4px; }
.film:hover .film__play { transform: translate(-50%, -50%) scale(1.07); background: #fff; }
.film.is-an::after { display: none; }
.film img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-soft), filter var(--dur-mid) var(--ease-out);
  filter: saturate(0.96);
}
.film:hover img { transform: scale(1.03); filter: saturate(1.04); }
.film::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.72) 0%, rgba(10, 8, 6, 0.12) 46%, rgba(10, 8, 6, 0.06) 100%);
  pointer-events: none;
}
.film__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(66px, 9vw, 96px);
  height: clamp(66px, 9vw, 96px);
  border-radius: 50%;
  background: rgba(255, 252, 246, 0.94);
  color: var(--ink);
  box-shadow: 0 18px 48px -14px rgba(0, 0, 0, 0.6);
  transition: transform var(--dur-mid) var(--ease-snap), background-color var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.film__play svg { width: 26px; height: 26px; margin-left: 4px; }
.film__label {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(0.9rem, 2.4vw, 1.6rem);
  z-index: 2;
  display: grid;
  gap: 0.2rem;
  text-align: left;
  color: var(--paper-warm);
  pointer-events: none;
}
.film__k {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.03em;
  text-transform: lowercase;
}
.film__d { font-size: var(--step--1); color: rgba(255, 252, 246, 0.82); }

.film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film__hinweis { margin-top: 0.7rem; font-size: 0.78rem; color: var(--ink-mute); }

/* ==========================================================================
   44 · Anfahrt-Zeile ueber der Karte
   --------------------------------------------------------------------------
   Ersetzt die frueher eigenstaendige schwarze Anfahrt-Sektion. Ueberschrift
   und Beitext stehen jetzt direkt ueber der Karte, die Kontaktwege daneben in
   einer Zeile statt in drei grossen Karten.
   ========================================================================== */
.wegweiser {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem clamp(1.25rem, 3vw, 2.25rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
}
.wegweiser a {
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(var(--paprika), var(--paprika));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.5px;
  padding-bottom: 2px;
  transition: background-size var(--dur-mid) var(--ease-soft), color var(--dur-fast) var(--ease-out);
}
.wegweiser a:hover { color: var(--paprika-deep); background-size: 0% 1.5px; background-position: 100% 100%; }
.wegweiser__k {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: -0.9rem;
}
.wegweiser__note { color: var(--ink-mute); flex-basis: 100%; }