/* ==========================================================================
   Restaurant Kreta Steinbach

   Design-Direktion: "Papier, Oliv, Ziegel". Heller, freundlicher Grund wie
   frisch gestrichener Putz, dazwischen tiefolivgruene Baender, die das
   Firmenschild aufnehmen, und Ziegelrot aus den Geranien als einziger
   Akzent. Grossformatige Serifentypografie, viel Luft, Bewegung, die der
   Leserichtung folgt.

   Der Kontrast der Seite entsteht aus dem Wechsel von hellen Papierflaechen
   und wenigen dunklen Baendern, nicht aus einem durchgehend dunklen Grund.
   Das haelt die Seite einladend und gibt den dunklen Stellen Gewicht.

   Umsetzung: Wimeta GmbH
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften (lokal gehostet, kein Google-CDN)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Platypi';
  src: url('../fonts/platypi-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Platypi';
  src: url('../fonts/platypi-italic-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Helle Flaechen */
  --papier: #f4efe4;
  --papier-2: #ebe4d5;
  --papier-3: #ded5c2;

  /* Gruen vom Firmenschild */
  --oliv: #2c5741;
  --oliv-tief: #1d3a2c;
  --oliv-nacht: #152b21;

  /* Ziegelrot aus den Geranien, der einzige Akzent */
  --ziegel: #a8442a;
  --ziegel-hell: #e08a63;

  /* Schrift auf hellem Grund */
  --tinte: #1e2620;
  --fliess: #40473f;
  --mute: #585d53;

  /* Schrift auf dunklem Grund */
  --hell: #f7f6f0;
  --hell-mute: #c3cec5;

  /* Linien */
  --linie: rgba(30, 38, 32, 0.16);
  --linie-stark: rgba(30, 38, 32, 0.32);
  --linie-hell: rgba(247, 246, 240, 0.2);
  --linie-hell-stark: rgba(247, 246, 240, 0.38);

  --schatten: 0 1px 2px rgba(27, 36, 30, 0.04), 0 12px 34px rgba(27, 36, 30, 0.08);
  --schatten-hoch: 0 2px 6px rgba(27, 36, 30, 0.06), 0 22px 54px rgba(27, 36, 30, 0.13);

  /* Kompatibilitaet: consent.js greift auf diese Namen zu */
  --gruen: var(--oliv);
  --petrol: #276b5c;
  --creme: var(--hell);
  --bg: var(--papier);
  --bg-alt: var(--papier-2);
  --text: var(--tinte);
  --text-mute: var(--mute);
  --akzent: var(--ziegel);
  --tafel-bg: var(--oliv-tief);
  --tafel-text: var(--hell);
  --tafel-mute: var(--hell-mute);
  --tafel-linie: var(--linie-hell);
  --feld-bg: #ffffff;
  --gruen-text: var(--oliv);

  /* Schriftfamilien */
  --font-display: 'Platypi', 'Iowan Old Style', Georgia, serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Groessen. Leerzeichen um + und - sind Pflicht. */
  --t-xs: 0.75rem;
  --t-s: 0.9375rem;
  --t-m: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  --t-l: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --t-xl: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  --t-h4: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --t-h3: clamp(1.375rem, 1.15rem + 1vw, 2rem);
  --t-h2: clamp(2rem, 1.35rem + 2.9vw, 3.75rem);
  --t-h1: clamp(2.75rem, 1.5rem + 5.4vw, 6rem);

  /* Abstaende */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: clamp(4.5rem, 2.5rem + 8vw, 9.5rem);

  --r-flaeche: 3px;
  --r-pille: 999px;

  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
  --kurve-weich: cubic-bezier(0.33, 1, 0.68, 1);
  --dauer: 220ms;
  --dauer-lang: 420ms;

  --breite: 1280px;
  --breite-text: 64ch;
  --rand: clamp(1.25rem, 0.5rem + 3.5vw, 4.5rem);
  --kopf-hoehe: 76px;
}

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

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--papier);
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--fliess);
  font-family: var(--font-text);
  font-size: var(--t-m);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 var(--s-5);
  letter-spacing: -0.018em;
  color: var(--tinte);
  overflow-wrap: break-word;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 0.98; letter-spacing: -0.028em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); font-weight: 500; }

p { margin: 0 0 var(--s-5); max-width: var(--breite-text); }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
ul, ol { margin: 0 0 var(--s-5); padding-left: 1.15em; }
li { margin-bottom: var(--s-2); }
li::marker { color: var(--ziegel); }
strong { font-weight: 600; color: var(--tinte); }
em { font-style: italic; }

:focus-visible { outline: 2px solid var(--ziegel); outline-offset: 4px; border-radius: 2px; }
.tafel :focus-visible, .buehne :focus-visible, .fuss :focus-visible, .streifen :focus-visible,
.leuchtkasten :focus-visible { outline-color: var(--hell); }

::selection { background: var(--ziegel); color: #ffffff; }

.visuell-versteckt {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprungmarke {
  position: absolute; top: -100px; left: var(--s-4); z-index: 300;
  background: var(--oliv); color: var(--hell);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pille);
  font-weight: 600; text-decoration: none;
  transition: top var(--dauer) var(--kurve);
}
.sprungmarke:focus { top: var(--s-4); }

/* hidden muss immer gewinnen, auch gegen display-Angaben einzelner
   Bausteine. Sonst stehen ohne JavaScript leere Statuspillen auf der Seite. */
[hidden] { display: none !important; }

/* Sprungziele nicht unter der festen Kopfzeile verschwinden lassen */
[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.huelle-schmal { width: 100%; max-width: 780px; margin-inline: auto; padding-inline: var(--rand); }

.block {
  position: relative;
  padding-block: var(--s-9);
  scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem);
}
.block--knapp { padding-block: var(--s-8); }
.block--erste { padding-top: calc(var(--kopf-hoehe) + 4rem); }
.block--papier { background: var(--papier-2); }

/* Dunkles Band: nimmt das Firmenschild auf und gibt der Seite Rhythmus */
.tafel { background: var(--oliv-tief); color: var(--hell-mute); }
.tafel h1, .tafel h2, .tafel h3, .tafel h4 { color: var(--hell); }
.tafel p { color: var(--hell-mute); }
.tafel strong { color: var(--hell); }
.tafel--petrol { background: var(--petrol); }

.block + .block:not(.block--papier):not(.tafel)::before {
  content: '';
  position: absolute; top: 0; left: var(--rand); right: var(--rand);
  height: 1px; background: var(--linie);
}

.vorzeile, .inschrift {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-text);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ziegel);
  margin: 0 0 var(--s-5);
}
.vorzeile::before, .inschrift::before {
  content: ''; width: 34px; height: 1px; background: var(--ziegel); flex-shrink: 0;
}
.tafel .inschrift, .tafel .vorzeile { color: var(--ziegel-hell); }
.tafel .inschrift::before, .tafel .vorzeile::before { background: var(--ziegel-hell); }

.blei {
  font-family: var(--font-display);
  font-size: var(--t-xl); font-weight: 300; line-height: 1.45;
  color: var(--tinte); max-width: 30ch;
}
.tafel .blei { color: var(--hell); }

/* --------------------------------------------------------------------------
   5. Knoepfe mit Fuellwischer
   -------------------------------------------------------------------------- */

.knopf {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 52px; padding: 0.85rem 1.9rem;
  border: 1px solid transparent; border-radius: var(--r-pille);
  font-family: var(--font-text); font-size: var(--t-s); font-weight: 600;
  letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve),
              transform var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve);
}
.knopf::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dauer-lang) var(--kurve);
}

.knopf--voll { background: var(--oliv); border-color: var(--oliv); color: var(--hell); }
.knopf--voll::before { background: var(--oliv-nacht); }
.knopf--voll:hover { transform: translateY(-2px); box-shadow: var(--schatten); }
.knopf--voll:hover::before { transform: scaleX(1); transform-origin: left; }
.knopf--voll:active { transform: translateY(0); }

.knopf--linie { background: transparent; border-color: var(--linie-stark); color: var(--tinte); }
.knopf--linie::before { background: var(--oliv); }
.knopf--linie:hover { color: var(--hell); border-color: var(--oliv); transform: translateY(-2px); }
.knopf--linie:hover::before { transform: scaleX(1); transform-origin: left; }
.knopf--linie:active { transform: translateY(0); }

/* Auf dunklen Baendern und ueber Bildern */
.tafel .knopf--voll, .buehne .knopf--voll, .streifen .knopf--voll {
  background: var(--hell); border-color: var(--hell); color: var(--oliv-nacht);
}
.tafel .knopf--voll::before, .buehne .knopf--voll::before, .streifen .knopf--voll::before { background: #ffffff; }
.tafel .knopf--linie, .buehne .knopf--linie, .streifen .knopf--linie {
  border-color: var(--linie-hell-stark); color: var(--hell);
}
.tafel .knopf--linie::before, .buehne .knopf--linie::before, .streifen .knopf--linie::before { background: rgba(247, 246, 240, 0.16); }
.tafel .knopf--linie:hover, .buehne .knopf--linie:hover, .streifen .knopf--linie:hover {
  color: var(--hell); border-color: var(--hell);
}

.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* Schmale Bildschirme: Lange Knopftexte duerfen umbrechen, statt die Spalte
   ueber den Rand zu schieben. In em statt px, damit die Regel auch bei
   vergroesserter Grundschrift greift. */
@media (max-width: 30em) {
  .knopf { white-space: normal; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .knopf, .knopf::before { transition: none; }
  .knopf:hover, .knopf:active { transform: none; }
}

/* --------------------------------------------------------------------------
   6. Kopfzeile
   -------------------------------------------------------------------------- */

.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dauer-lang) var(--kurve),
              border-color var(--dauer-lang) var(--kurve),
              box-shadow var(--dauer-lang) var(--kurve);
}
.kopf[data-fest='true'] {
  background: rgba(244, 239, 228, 0.92);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--linie);
  box-shadow: 0 1px 24px rgba(27, 36, 30, 0.06);
}

.kopf__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: var(--kopf-hoehe);
}

.marke { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; flex-shrink: 0; }
.marke__name {
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.1;
  color: var(--hell);
  transition: color var(--dauer-lang) var(--kurve);
}
.marke__zusatz {
  font-family: var(--font-text); font-size: 0.5625rem; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; line-height: 1.2;
  color: var(--ziegel-hell);
  transition: color var(--dauer-lang) var(--kurve);
}
.kopf[data-fest='true'] .marke__name { color: var(--tinte); }
.kopf[data-fest='true'] .marke__zusatz { color: var(--ziegel); }

.navi { display: flex; align-items: center; gap: var(--s-6); }
.navi__liste {
  display: flex; align-items: center;
  gap: clamp(0.9rem, 0.2rem + 1.4vw, 2rem);
  list-style: none; margin: 0; padding: 0;
}
.navi__liste li { margin: 0; }

.navi__link {
  position: relative; display: inline-block;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em;
  text-decoration: none; color: var(--hell);
  padding: 0.4rem 0; white-space: nowrap;
  transition: color var(--dauer) var(--kurve);
}
.navi__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--ziegel-hell);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dauer) var(--kurve);
}
.navi__link:hover::after, .navi__link[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.kopf[data-fest='true'] .navi__link { color: var(--fliess); }
.kopf[data-fest='true'] .navi__link:hover,
.kopf[data-fest='true'] .navi__link[aria-current='page'] { color: var(--tinte); }
.kopf[data-fest='true'] .navi__link::after { background: var(--ziegel); }

.kopf__tel {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0.5rem 1.25rem;
  border: 1px solid var(--linie-hell-stark); border-radius: var(--r-pille);
  color: var(--hell); font-size: 0.875rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve);
}
.kopf__tel::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--hell); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dauer-lang) var(--kurve);
}
.kopf__tel:hover { color: var(--oliv-nacht); border-color: var(--hell); }
.kopf__tel:hover::before { transform: scaleX(1); transform-origin: left; }
.kopf__tel-icon { display: none; width: 18px; height: 18px; fill: currentColor; }
.kopf__tel-lang { opacity: 0.7; font-weight: 500; }
.kopf[data-fest='true'] .kopf__tel { border-color: var(--linie-stark); color: var(--tinte); }
.kopf[data-fest='true'] .kopf__tel::before { background: var(--oliv); }
.kopf[data-fest='true'] .kopf__tel:hover { color: var(--hell); border-color: var(--oliv); }

.navi__tel-mobil { display: none; }

.burger {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--linie-hell-stark);
  border-radius: var(--r-pille); cursor: pointer;
  color: var(--hell); flex-shrink: 0;
  transition: border-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve);
}
.kopf[data-fest='true'] .burger { border-color: var(--linie-stark); color: var(--tinte); }
.burger__strich { display: block; width: 18px; height: 1px; background: currentColor; position: relative; transition: background-color var(--dauer) var(--kurve); }
.burger__strich::before, .burger__strich::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1px;
  background: currentColor; transition: transform var(--dauer) var(--kurve);
}
.burger__strich::before { top: -6px; }
.burger__strich::after { top: 6px; }
.burger[aria-expanded='true'] .burger__strich { background: transparent; }
.burger[aria-expanded='true'] .burger__strich::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__strich::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
  .burger { display: inline-flex; }
  .navi {
    position: fixed; inset: var(--kopf-hoehe) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(244, 239, 228, 0.99);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten);
    padding: var(--s-4) var(--rand) var(--s-6);
    transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve), visibility 0s linear var(--dauer);
  }
  .navi[data-offen='true'] {
    transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve), visibility 0s linear 0s;
  }
  .navi__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .navi__link {
    display: block; padding: var(--s-4) 0;
    border-bottom: 1px solid var(--linie);
    font-family: var(--font-display); font-size: 1.375rem; letter-spacing: 0;
    color: var(--tinte);
  }
  .navi__link::after { display: none; }
  .navi__tel-mobil { display: inline-flex; margin-top: var(--s-5); }
}

@media (max-width: 620px) {
  .kopf__tel-lang, .kopf__tel-nr { display: none; }
  .kopf__tel-icon { display: block; }
  .kopf__tel { width: 44px; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .kopf, .navi, .navi__link::after, .kopf__tel::before,
  .burger__strich, .burger__strich::before, .burger__strich::after { transition: none; }
}

/* --------------------------------------------------------------------------
   7. Buehne
   -------------------------------------------------------------------------- */

.buehne {
  position: relative; isolation: isolate;
  min-height: 100svh; display: flex; align-items: flex-end;
  background: var(--oliv-nacht); overflow: hidden;
}
.buehne__bilder { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

.folie {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: scale(1.04);
  transition: opacity 1100ms var(--kurve-weich), transform 7000ms linear;
}
.folie[data-aktiv='true'] { opacity: 1; transform: scale(1.12); }
.folie picture { display: block; width: 100%; height: 100%; }
.folie img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }

.buehne__schleier {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top,
      rgba(21, 43, 33, 0.92) 0%,
      rgba(21, 43, 33, 0.8) 24%,
      rgba(21, 43, 33, 0.42) 50%,
      rgba(21, 43, 33, 0.12) 74%,
      rgba(21, 43, 33, 0.42) 100%),
    linear-gradient(to right, rgba(21, 43, 33, 0.5) 0%, rgba(21, 43, 33, 0) 60%);
}

.buehne__inhalt {
  position: relative; width: 100%;
  padding-block: clamp(3rem, 1rem + 6vw, 6rem) clamp(6rem, 3rem + 8vw, 9rem);
  color: var(--hell);
}
.buehne__titel { max-width: 15ch; margin-bottom: var(--s-5); color: #ffffff; }
.buehne__titel .zeile { display: block; overflow: hidden; padding-bottom: 0.06em; }
.buehne__titel .zeile > span { display: block; }
.buehne__claim {
  font-family: var(--font-display); font-size: var(--t-xl); font-weight: 300;
  line-height: 1.45; color: var(--hell); max-width: 34ch; margin-bottom: 0;
}

.status--auf-bild {
  display: inline-flex; align-items: center; align-self: flex-start; gap: var(--s-3);
  padding: 0.45rem 1.1rem 0.45rem 0.9rem; margin-bottom: var(--s-6);
  border: 1px solid var(--linie-hell-stark); border-radius: var(--r-pille);
  background: rgba(21, 43, 33, 0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--hell);
}
.status--auf-bild::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--hell-mute); flex-shrink: 0;
}
.status--auf-bild[data-offen='true']::before { background: #8fe0ab; box-shadow: 0 0 0 4px rgba(143, 224, 171, 0.2); }

.buehne__steuerung {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(100% - 2 * var(--rand), var(--breite));
  bottom: clamp(1.5rem, 0.5rem + 2vw, 2.75rem);
  z-index: 2; display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s-3); pointer-events: none;
}
.buehne__steuerung > * { pointer-events: auto; }

.folie__name {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--hell-mute);
  margin: 0 var(--s-3) 0 0; white-space: nowrap;
}

.buehne__knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--linie-hell-stark); border-radius: var(--r-pille);
  background: rgba(21, 43, 33, 0.45); color: var(--hell); cursor: pointer;
  transition: background-color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.buehne__knopf:hover { background: var(--hell); border-color: var(--hell); color: var(--oliv-nacht); transform: scale(1.08); }
.buehne__knopf svg { width: 17px; height: 17px; fill: currentColor; }

.buehne__punkte { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.buehne__punkte li { margin: 0; }
.buehne__punkt { display: flex; align-items: center; width: 30px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.buehne__punkt::before {
  content: ''; display: block; width: 100%; height: 2px;
  background: var(--linie-hell-stark);
  transition: background-color var(--dauer) var(--kurve), height var(--dauer) var(--kurve);
}
.buehne__punkt[aria-current='true']::before { background: var(--ziegel-hell); height: 3px; }
.buehne__punkt:hover::before { background: var(--hell); }

@media (max-width: 900px) {
  .buehne { min-height: 92svh; }
  .buehne__titel { max-width: 12ch; }
  .buehne__steuerung { justify-content: flex-start; }
  .folie__name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .folie { transition: opacity var(--dauer) linear; transform: none; }
  .folie[data-aktiv='true'] { transform: none; }
  .buehne__knopf, .buehne__punkt::before { transition: none; }
  .buehne__knopf:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   8. Schau: wiederverwendbarer Slider im Fliesstext
   -------------------------------------------------------------------------- */

.schau { position: relative; }

.schau__buehne {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-flaeche);
  background: var(--papier-3);
  box-shadow: var(--schatten);
}
.schau--hoch .schau__buehne { aspect-ratio: 4 / 5; }
.haftbild.schau .schau__buehne { aspect-ratio: 4 / 5; }

.schau__folie {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transition: opacity 700ms var(--kurve-weich);
}
.schau__folie[data-aktiv='true'] { opacity: 1; }
.schau__folie picture { display: block; width: 100%; height: 100%; }
.schau__folie img { width: 100%; height: 100%; object-fit: cover; }

.schau__fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-top: var(--s-4);
}
.schau__titel {
  margin: 0; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute);
}
.schau__steuerung { display: flex; align-items: center; gap: var(--s-2); }

.schau__knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--linie-stark); border-radius: var(--r-pille);
  background: transparent; color: var(--tinte); cursor: pointer;
  transition: background-color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve),
              color var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.schau__knopf:hover { background: var(--oliv); border-color: var(--oliv); color: var(--hell); transform: scale(1.08); }
.schau__knopf svg { width: 16px; height: 16px; fill: currentColor; }

.schau__punkte { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0 var(--s-2); padding: 0; }
.schau__punkte li { margin: 0; }
.schau__punkt { display: flex; align-items: center; width: 26px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.schau__punkt::before {
  content: ''; display: block; width: 100%; height: 2px;
  background: var(--linie-stark);
  transition: background-color var(--dauer) var(--kurve), height var(--dauer) var(--kurve);
}
.schau__punkt[aria-current='true']::before { background: var(--ziegel); height: 3px; }
.schau__punkt:hover::before { background: var(--oliv); }

.tafel .schau__knopf { border-color: var(--linie-hell-stark); color: var(--hell); }
.tafel .schau__knopf:hover { background: var(--hell); border-color: var(--hell); color: var(--oliv-nacht); }
.tafel .schau__titel { color: var(--hell-mute); }
.tafel .schau__punkt::before { background: var(--linie-hell-stark); }
.tafel .schau__punkt[aria-current='true']::before { background: var(--ziegel-hell); }
.tafel .schau__punkt:hover::before { background: var(--hell); }

/* Auf schmalen Bildschirmen passen Bildtitel und Steuerung nicht in eine
   Zeile. Der Titel bekommt dann immer eine eigene Zeile, sonst springt die
   Steuerung bei jedem Bildwechsel zwischen erster und zweiter Zeile hin und
   her, je nachdem, wie lang der Titel gerade ist. */
@media (max-width: 560px) {
  .schau__fuss { flex-wrap: wrap; row-gap: var(--s-2); }
  .schau__titel { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .schau__folie { transition: opacity var(--dauer) linear; }
  .schau__knopf { transition: none; }
  .schau__knopf:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   9. Staerkenband
   -------------------------------------------------------------------------- */

.staerken { background: var(--papier); border-block: 1px solid var(--linie); padding-block: var(--s-7); }
.staerken__liste { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.staerken__liste li {
  position: relative; margin: 0;
  padding: var(--s-2) clamp(1rem, 0.2rem + 2vw, 2.5rem);
  font-family: var(--font-display); font-size: var(--t-h4); font-weight: 400;
  line-height: 1.3; color: var(--tinte);
}
.staerken__liste li::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 2.2em; background: var(--linie);
}
.staerken__liste li:first-child { padding-left: 0; }
.staerken__liste li:first-child::before { display: none; }

@media (max-width: 820px) {
  .staerken__liste { grid-template-columns: repeat(2, 1fr); gap: var(--s-5) 0; }
  .staerken__liste li:nth-child(odd) { padding-left: 0; }
  .staerken__liste li:nth-child(odd)::before { display: none; }
}
@media (max-width: 420px) {
  .staerken__liste { grid-template-columns: 1fr; }
  .staerken__liste li { padding-left: 0; }
  .staerken__liste li::before { display: none; }
}

/* --------------------------------------------------------------------------
   10. Splits und Bilder
   -------------------------------------------------------------------------- */

/* Oben buendig, nicht vertikal zentriert. Sonst rutscht die kuerzere
   Spalte nach unten und die beiden Ueberschriften stehen versetzt. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; }
.split--mitte { align-items: center; }
.split--eng { grid-template-columns: 1.1fr 1fr; }
.split__bild--zuerst { order: -1; }
.split--haftend { align-items: start; }
.split--haftend .haftbild { position: sticky; top: calc(var(--kopf-hoehe) + 2rem); }

@media (max-width: 900px) {
  .split, .split--eng { grid-template-columns: 1fr; gap: var(--s-7); }
  .split__bild--zuerst { order: 0; }
  .split--haftend .haftbild { position: static; }
}

.abzug {
  position: relative; overflow: hidden;
  background: var(--papier-3); border-radius: var(--r-flaeche);
  box-shadow: var(--schatten);
  transition: box-shadow var(--dauer-lang) var(--kurve), transform var(--dauer-lang) var(--kurve);
}
/* Ohne eigene Hoehe am <picture> laeuft height:100% am Bild ins Leere. */
.abzug picture { display: block; width: 100%; height: 100%; }
.abzug img { width: 100%; height: 100%; object-fit: cover; }
.abzug--hoch { aspect-ratio: 4 / 5; }
.abzug--quer { aspect-ratio: 3 / 2; }
.abzug--breit { aspect-ratio: 16 / 9; }
.abzug--gross { aspect-ratio: 5 / 6; }
.abzug:hover { box-shadow: var(--schatten-hoch); transform: translateY(-3px); }

.bildunterschrift {
  margin: var(--s-4) 0 0; font-size: var(--t-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); max-width: 42ch;
}

.paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.paar--versetzt { align-items: start; }
.paar--versetzt > :nth-child(2) { margin-top: clamp(2rem, 6vw, 5rem); }
@media (max-width: 640px) {
  .paar { grid-template-columns: 1fr; }
  .paar--versetzt > :nth-child(2) { margin-top: 0; }
}

.streifen {
  position: relative; min-height: clamp(440px, 74vh, 760px);
  display: flex; align-items: center; overflow: hidden; isolation: isolate;
  color: var(--hell-mute);
}
.streifen h2, .streifen h3 { color: var(--hell); }
.streifen .blei { color: var(--hell); }
.streifen__bild { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.streifen__bild img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.streifen::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(21, 43, 33, 0.86) 0%, rgba(21, 43, 33, 0.56) 30%, rgba(21, 43, 33, 0.12) 62%, rgba(21, 43, 33, 0.02) 100%);
}
.streifen__inhalt { position: relative; padding-block: var(--s-8); }
.streifen h2, .streifen .blei { max-width: 20ch; text-shadow: 0 1px 18px rgba(10, 20, 15, 0.6); }

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

/* --------------------------------------------------------------------------
   11. Kuechenkarte mit Hover
   -------------------------------------------------------------------------- */

.karte { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 1rem + 4vw, 5rem); margin-top: var(--s-7); }
@media (max-width: 820px) { .karte { grid-template-columns: 1fr; gap: var(--s-7); } }

.karte__gruppe { margin: 0; }
.karte__titel {
  font-family: var(--font-text); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ziegel);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--linie); margin-bottom: var(--s-2);
}

.karte__posten {
  position: relative;
  margin: 0; padding: var(--s-5) var(--s-4) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--linie);
  transition: background-color var(--dauer) var(--kurve);
}
.karte__posten::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--ziegel);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--dauer-lang) var(--kurve);
}
.karte__posten:hover { background: var(--papier-2); }
.karte__posten:hover::before { transform: scaleY(1); transform-origin: top; }
.karte__posten:last-child { border-bottom: 0; }

.karte__name {
  font-family: var(--font-display); font-size: var(--t-h4); font-weight: 400;
  color: var(--tinte); margin: 0 0 var(--s-1); line-height: 1.25;
  transition: color var(--dauer) var(--kurve);
}
.karte__posten:hover .karte__name { color: var(--oliv); }
.karte__note { margin: 0; font-size: var(--t-s); color: var(--mute); max-width: 44ch; }

/* Speisekarte als PDF und Essen zum Mitnehmen. Eine dunkle Karte am Ende
   der Kueche, damit der wichtigste Link des Abschnitts nicht zwischen den
   Kategorien untergeht. Die Farben kommen ueber die Klasse .tafel, hier
   stehen nur Aufbau und Abstaende. Die eingebettete Ansicht erscheint nur,
   wenn das PDF auf dem Server liegt und der Browser es selbst darstellen
   kann, siehe kreta.js. */
.speisekarte {
  margin-top: var(--s-8);
  padding: clamp(1.75rem, 0.9rem + 3.4vw, 3.75rem);
  border-radius: var(--r-flaeche);
  box-shadow: var(--schatten-hoch);
  scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem);
}

.speisekarte__raster {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
}
.speisekarte__teil + .speisekarte__teil {
  padding-left: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
  border-left: 1px solid var(--linie-hell);
}
.speisekarte h3 { margin-bottom: var(--s-4); }
.speisekarte p { max-width: 48ch; }
.speisekarte a:not(.knopf) { color: var(--hell); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.speisekarte a:not(.knopf):hover { color: var(--ziegel-hell); }
.speisekarte__klein { margin-top: var(--s-6); font-size: var(--t-s); }

.speisekarte__ansicht { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.speisekarte__ansicht iframe {
  display: block; width: 100%; height: min(70vh, 900px);
  border: 0; border-radius: var(--r-flaeche); background: var(--papier);
}

/* Die drei Karten als Liste, am Rechner mit Umschalter ueber der Ansicht */
.kartenliste { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 1px solid var(--linie-hell); }
.kartenliste__eintrag {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3) var(--s-5); margin: 0; padding: var(--s-4) 0;
  border-bottom: 1px solid var(--linie-hell);
}
.kartenliste__eintrag > :first-child { flex: 1 1 13rem; min-width: 0; }
.kartenliste__name {
  display: block; font-family: var(--font-display); font-size: var(--t-h4);
  line-height: 1.25; color: var(--hell);
}
.kartenliste__info { display: block; margin-top: 2px; font-size: var(--t-xs); line-height: 1.5; color: var(--hell-mute); }
.kartenliste__groesse { display: block; margin-top: 2px; font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--hell-mute); }
.kartenliste__aktionen { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.knopf--klein { min-height: 44px; padding: 0.55rem 1.15rem; font-size: var(--t-xs); }

.speisekarte__ansicht { scroll-margin-top: calc(var(--kopf-hoehe) + 1rem); }
.kartenwahl { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.kartenwahl__knopf {
  min-height: 44px; padding: 0.55rem 1.2rem;
  border: 1px solid var(--linie-hell-stark); border-radius: var(--r-pille);
  background: transparent; color: var(--hell); cursor: pointer;
  font-family: var(--font-text); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em;
  transition: background-color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve),
              color var(--dauer) var(--kurve);
}
.kartenwahl__knopf:hover { border-color: var(--hell); }
.kartenwahl__knopf[aria-pressed='true'] { background: var(--hell); border-color: var(--hell); color: var(--oliv-nacht); }
@media (prefers-reduced-motion: reduce) { .kartenwahl__knopf { transition: none; } }

/* Sehr schmale Bildschirme: weniger Innenabstand in der dunklen Box, damit
   auch bei grosser Schrift beide Kartenknoepfe hineinpassen. */
@media (max-width: 22.5em) {
  .speisekarte { padding-inline: 1rem; }
  .knopf--klein { padding-inline: 0.9rem; }
}

@media (max-width: 820px) {
  .speisekarte__raster { grid-template-columns: 1fr; }
  .speisekarte__teil + .speisekarte__teil {
    padding-left: 0; border-left: 0;
    padding-top: var(--s-6); border-top: 1px solid var(--linie-hell);
  }
}

@media (prefers-reduced-motion: reduce) {
  .karte__posten, .karte__posten::before, .karte__name { transition: none; }
}

/* --------------------------------------------------------------------------
   12. Preise
   -------------------------------------------------------------------------- */

.preise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-7) 0 0; padding: 0; list-style: none; }
.preise li { margin: 0; }
.preis {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--linie); border-radius: var(--r-flaeche);
  background: var(--papier); height: 100%;
  transition: border-color var(--dauer) var(--kurve), transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
}
.preis:hover { border-color: var(--ziegel); transform: translateY(-4px); box-shadow: var(--schatten); }
.preis__wert {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.5rem); font-weight: 300; line-height: 1.05;
  white-space: nowrap;
  color: var(--oliv); margin-bottom: var(--s-3);
  font-variant-numeric: lining-nums tabular-nums;
}
.preis__was { display: block; font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }

.tafel .preis { background: rgba(247, 246, 240, 0.06); border-color: var(--linie-hell); }
.tafel .preis:hover { border-color: var(--ziegel-hell); background: rgba(247, 246, 240, 0.1); }
.tafel .preis__wert { color: var(--hell); }
.tafel .preis__was { color: var(--hell-mute); }

@media (max-width: 520px) { .preise { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .preis { transition: none; } .preis:hover { transform: none; } }

/* --------------------------------------------------------------------------
   13. Merkmale, Zeiten, Status
   -------------------------------------------------------------------------- */

.merkmale {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 var(--s-7);
}
.merkmale li {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0; padding: var(--s-4) 0; border-bottom: 1px solid var(--linie);
  font-size: var(--t-s); color: var(--fliess);
  transition: color var(--dauer) var(--kurve);
}
.merkmale li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ziegel); flex-shrink: 0;
  transition: transform var(--dauer) var(--kurve);
}
.merkmale li:hover { color: var(--tinte); }
.merkmale li:hover::before { transform: scale(1.8); }
.tafel .merkmale li { color: var(--hell-mute); border-bottom-color: var(--linie-hell); }
.tafel .merkmale li:hover { color: var(--hell); }

.zeiten { width: 100%; border-collapse: collapse; margin-top: var(--s-6); font-size: var(--t-s); }
.zeiten caption {
  text-align: left; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ziegel); padding-bottom: var(--s-4);
}
.zeiten th, .zeiten td { text-align: left; padding: var(--s-4) var(--s-3) var(--s-4) 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.zeiten th { font-weight: 500; color: var(--tinte); white-space: nowrap; }
.zeiten td { color: var(--fliess); }
.zeiten tr:last-child th, .zeiten tr:last-child td { border-bottom: 0; }
.zeiten td:last-child { padding-right: 0; text-align: right; }
.zeiten .ruhetag { color: var(--ziegel); }

.status {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 0.5rem 1.1rem; border-radius: var(--r-pille);
  border: 1px solid var(--linie-stark);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tinte);
}
.status[data-offen='true'] { border-color: var(--oliv); color: var(--oliv); }

/* --------------------------------------------------------------------------
   14. Kontakt und Telefon
   -------------------------------------------------------------------------- */

.kontakt-raster { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 1rem + 5vw, 5.5rem); align-items: start; }
@media (max-width: 940px) { .kontakt-raster { grid-template-columns: 1fr; gap: var(--s-8); } }

.anschrift { font-style: normal; font-family: var(--font-display); font-size: var(--t-l); line-height: 1.8; color: var(--tinte); }
.anschrift a { color: var(--ziegel); text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Seit es kein Formular mehr gibt, ist der Anruf der einzige Weg zu
   reservieren und zu bestellen. Die Nummer steht deshalb gross da und ist
   auf dem Handy mit einem Tipp gewaehlt. */
.telefonkarte {
  display: inline-flex; flex-direction: column; gap: var(--s-1);
  max-width: 100%;
  margin-top: var(--s-6);
  padding: var(--s-5) clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
  border: 1px solid var(--linie-stark); border-radius: var(--r-flaeche);
  background: var(--papier);
  text-decoration: none; color: var(--tinte);
  transition: border-color var(--dauer) var(--kurve), transform var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve);
}
.telefonkarte:hover { border-color: var(--ziegel); transform: translateY(-3px); box-shadow: var(--schatten); }
.telefonkarte__zeile {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ziegel);
}
.telefonkarte__nummer {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.75rem); line-height: 1.1;
  font-size: clamp(1.5rem, 9.5cqi, 3rem);
  letter-spacing: -0.01em; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--oliv);
}
.merkmale--liste { grid-template-columns: 1fr; margin-top: var(--s-6); }
.merkmale--liste li { align-items: flex-start; }
.merkmale--liste li::before { margin-top: 0.7em; }

/* Die Telefonnummer richtet sich nach ihrer Spalte (cqi), nicht nach dem
   Fenster. Bei 1905 px war die Spalte der Pension-Seite schmaler als bei
   1280 px, die Schrift aber groesser, und die Nummer brach in zwei Zeilen.
   Umbrechen darf sie nur bei grosser Schrift auf schmalen Bildschirmen. */
#kontakt, #anfrage .kontakt-raster > :first-child { container-type: inline-size; }
@media (max-width: 30em) {
  .telefonkarte__nummer { white-space: normal; }
}

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

/* --------------------------------------------------------------------------
   15. Karte und Routen
   -------------------------------------------------------------------------- */

.karte-flaeche {
  margin-top: var(--s-6); border: 1px solid var(--linie);
  border-radius: var(--r-flaeche); overflow: hidden;
  background: var(--papier-3); min-height: 300px;
  display: flex; align-items: center; justify-content: center;
}
.karte-flaeche iframe { width: 100%; min-height: 340px; border: 0; display: block; }

.route { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); padding: 0; list-style: none; }
.route li { margin: 0; }
.route a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.5rem 1.15rem; border: 1px solid var(--linie); border-radius: var(--r-pille);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em;
  text-decoration: none; color: var(--fliess); overflow: hidden; isolation: isolate;
  transition: color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve);
}
.route a::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--oliv); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dauer-lang) var(--kurve);
}
.route a:hover { color: var(--hell); border-color: var(--oliv); }
.route a:hover::before { transform: scaleX(1); transform-origin: left; }
@media (prefers-reduced-motion: reduce) { .route a, .route a::before { transition: none; } }

/* --------------------------------------------------------------------------
   16. Galerie mit Hover-Beschriftung
   -------------------------------------------------------------------------- */

.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 0.4rem + 1vw, 1.5rem); margin-top: var(--s-7); }
.galerie__feld {
  position: relative; margin: 0; padding: 0; border: 0;
  background: var(--papier-3); border-radius: var(--r-flaeche);
  overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3;
  box-shadow: var(--schatten);
  transition: box-shadow var(--dauer-lang) var(--kurve), transform var(--dauer-lang) var(--kurve);
}
.galerie__feld img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--kurve-weich);
}
.galerie__feld::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(21, 43, 33, 0.55) 0%, rgba(21, 43, 33, 0) 45%);
  opacity: 0;
  transition: opacity var(--dauer-lang) var(--kurve);
}
.galerie__feld:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
.galerie__feld:hover img { transform: scale(1.07); }
.galerie__feld:hover::after, .galerie__feld:focus-visible::after { opacity: 1; }
.galerie__feld--gross { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

@media (max-width: 820px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie__feld--gross { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
  .galerie__feld, .galerie__feld img, .galerie__feld::after { transition: none; }
  .galerie__feld:hover { transform: none; }
  .galerie__feld:hover img { transform: none; }
}

.leuchtkasten {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-5);
  background: rgba(21, 43, 33, 0.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dauer-lang) var(--kurve), visibility 0s linear var(--dauer-lang);
}
.leuchtkasten[data-offen='true'] { opacity: 1; visibility: visible; transition: opacity var(--dauer-lang) var(--kurve), visibility 0s linear 0s; }
.leuchtkasten img { max-width: min(1300px, 94vw); max-height: 84vh; width: auto; border-radius: var(--r-flaeche); }
.leuchtkasten__text {
  position: absolute; bottom: max(1.25rem, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  max-width: 62ch; padding: 0 var(--s-5); text-align: center;
  color: var(--hell-mute); font-size: var(--t-s);
}
.leuchtkasten__schliessen, .leuchtkasten__blaettern {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: rgba(247, 246, 240, 0.1); border: 1px solid var(--linie-hell-stark);
  border-radius: var(--r-pille); color: var(--hell);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: background-color var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.leuchtkasten__schliessen:hover, .leuchtkasten__blaettern:hover { background: rgba(247, 246, 240, 0.24); }
.leuchtkasten__schliessen { top: var(--s-5); right: var(--s-5); }
.leuchtkasten__blaettern--zurueck { left: var(--s-5); top: 50%; transform: translateY(-50%); }
.leuchtkasten__blaettern--vor { right: var(--s-5); top: 50%; transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) { .leuchtkasten, .leuchtkasten__schliessen, .leuchtkasten__blaettern { transition: none; } }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */

.faq { margin-top: var(--s-7); max-width: 82ch; }
.faq__punkt { border-bottom: 1px solid var(--linie); }
.faq__punkt:first-child { border-top: 1px solid var(--linie); }

.faq__frage {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  width: 100%; padding: var(--s-5) 0;
  background: none; border: 0;
  font-family: var(--font-display); font-size: var(--t-h4); font-weight: 400;
  color: var(--tinte); text-align: left; cursor: pointer;
  transition: color var(--dauer) var(--kurve), padding-left var(--dauer) var(--kurve);
}
.faq__frage:hover { color: var(--ziegel); padding-left: var(--s-2); }

.faq__zeichen { flex-shrink: 0; width: 24px; height: 24px; position: relative; transition: transform var(--dauer-lang) var(--kurve); }
.faq__zeichen::before, .faq__zeichen::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 1px; background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity var(--dauer) var(--kurve);
}
.faq__zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__frage[aria-expanded='true'] .faq__zeichen { transform: rotate(180deg); }
.faq__frage[aria-expanded='true'] .faq__zeichen::after { opacity: 0; }

.faq__antwort { overflow: hidden; padding: 0 0 var(--s-6); max-width: 70ch; }
.faq__antwort[hidden] { display: none; }
.faq__antwort p { font-size: var(--t-s); color: var(--fliess); }
.faq__antwort a { color: var(--ziegel); }

@media (prefers-reduced-motion: reduce) {
  .faq__frage, .faq__zeichen, .faq__zeichen::before, .faq__zeichen::after { transition: none; }
  .faq__frage:hover { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   18. Fusszeile
   -------------------------------------------------------------------------- */

.fuss { background: var(--oliv-nacht); color: var(--hell-mute); padding-block: var(--s-8) var(--s-6); }
.fuss__raster {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s-7);
  padding-bottom: var(--s-7); border-bottom: 1px solid var(--linie-hell);
}
@media (max-width: 820px) { .fuss__raster { grid-template-columns: 1fr; gap: var(--s-6); } }

.fuss h3 {
  font-family: var(--font-text); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ziegel-hell); margin-bottom: var(--s-4);
}
.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste li { margin-bottom: var(--s-3); }
.fuss__liste a, .fuss address a {
  display: inline-block;
  color: var(--hell-mute); font-size: var(--t-s); text-decoration: none;
  transition: color var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.fuss__liste a:hover, .fuss address a:hover { color: var(--hell); transform: translateX(4px); }
.fuss address { font-style: normal; font-size: var(--t-s); color: var(--hell-mute); line-height: 1.9; }

.fuss__schluss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding-top: var(--s-6);
  font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--hell-mute);
}
.fuss__schluss a { color: var(--hell-mute); }
.fuss__schluss a:hover { color: var(--ziegel-hell); }
.fuss__knopf-link {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--hell-mute); text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
  transition: color var(--dauer) var(--kurve);
}
.fuss__knopf-link:hover { color: var(--ziegel-hell); }

@media (prefers-reduced-motion: reduce) {
  .fuss__liste a, .fuss address a { transition: none; }
  .fuss__liste a:hover, .fuss address a:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   19. Schwebender Knopf: nach oben
   -------------------------------------------------------------------------- */

.schwebe {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1vw, 2.5rem);
  bottom: clamp(1rem, 0.5rem + 1vw, 2.5rem);
  z-index: 95;
  display: flex; flex-direction: column-reverse; align-items: center; gap: var(--s-3);
}

.nach-oben {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--papier); color: var(--tinte);
  border: 1px solid var(--linie-stark); border-radius: var(--r-pille);
  cursor: pointer; box-shadow: var(--schatten);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve),
              background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve),
              visibility 0s linear var(--dauer);
}
.nach-oben[data-sichtbar='true'] {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve),
              background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve),
              visibility 0s linear 0s;
}
.nach-oben:hover { background: var(--oliv); color: var(--hell); border-color: var(--oliv); }

@media (prefers-reduced-motion: reduce) {
  .nach-oben { transition: opacity var(--dauer) linear; transform: none; }
}

/* --------------------------------------------------------------------------
   20. Rechtsseiten
   -------------------------------------------------------------------------- */

.rechtstext { padding-block: calc(var(--kopf-hoehe) + 3rem) var(--s-8); }
.rechtstext h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); }
.rechtstext h2 { font-size: var(--t-h3); margin-top: var(--s-8); }
.rechtstext h2:first-of-type { margin-top: var(--s-6); }
.rechtstext h3 { font-size: var(--t-h4); margin-top: var(--s-6); }
.rechtstext p, .rechtstext li { font-size: var(--t-s); max-width: 72ch; color: var(--fliess); }
.rechtstext a { color: var(--ziegel); text-underline-offset: 4px; }
.rechtstext address { font-style: normal; font-size: var(--t-s); line-height: 1.9; margin-bottom: var(--s-5); color: var(--fliess); }
.rechtstext code { font-size: 0.9em; background: var(--papier-3); padding: 0.15em 0.4em; border-radius: 2px; }

mark.offen {
  background: #fdf0d5; color: #7a4a10;
  padding: 0.15em 0.5em;
  border: 1px solid #e6c790; border-radius: 2px;
  font-weight: 600; font-size: 0.95em;
}
.tafel mark.offen, .buehne mark.offen { background: #fdf0d5; color: #7a4a10; }

.stand {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--linie);
  font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--mute);
}

.fehlerseite {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100svh - var(--kopf-hoehe) - 220px);
  padding-block: calc(var(--kopf-hoehe) + 3rem) var(--s-8);
}

/* Die Fehlerseite und die Rechtsseiten haben keine Buehne, deshalb muss die
   Kopfzeile dort von Anfang an lesbar sein. */
.ohne-buehne .kopf { background: rgba(244, 239, 228, 0.92); border-bottom-color: var(--linie); }
.ohne-buehne .marke__name { color: var(--tinte); }
.ohne-buehne .marke__zusatz { color: var(--ziegel); }
.ohne-buehne .navi__link { color: var(--fliess); }
.ohne-buehne .navi__link::after { background: var(--ziegel); }
.ohne-buehne .kopf__tel { border-color: var(--linie-stark); color: var(--tinte); }
.ohne-buehne .kopf__tel::before { background: var(--oliv); }
.ohne-buehne .kopf__tel:hover { color: var(--hell); border-color: var(--oliv); }
.ohne-buehne .burger { border-color: var(--linie-stark); color: var(--tinte); }

/* --------------------------------------------------------------------------
   21. Bewegung
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  .js-auftritt .auftritt {
    opacity: 0; transform: translateY(28px);
    transition: opacity 800ms var(--kurve-weich), transform 800ms var(--kurve-weich);
  }
  .js-auftritt .auftritt[data-sichtbar='true'] { opacity: 1; transform: translateY(0); }

  .js-auftritt .auftritt[data-sichtbar='true'] > * { animation: hochblenden 700ms var(--kurve-weich) both; }
  .js-auftritt .auftritt[data-sichtbar='true'] > :nth-child(2) { animation-delay: 90ms; }
  .js-auftritt .auftritt[data-sichtbar='true'] > :nth-child(3) { animation-delay: 170ms; }
  .js-auftritt .auftritt[data-sichtbar='true'] > :nth-child(4) { animation-delay: 240ms; }

  @keyframes hochblenden {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .buehne__titel .zeile > span { animation: zeileHerein 1100ms var(--kurve-weich) both; }
  .buehne__titel .zeile:nth-child(2) > span { animation-delay: 110ms; }
  .buehne__titel .zeile:nth-child(3) > span { animation-delay: 210ms; }
  @keyframes zeileHerein {
    from { transform: translateY(105%); }
    to   { transform: translateY(0); }
  }

  .buehne__inhalt .status--auf-bild,
  .buehne__inhalt .buehne__claim,
  .buehne__inhalt .knopf-reihe { animation: hochblenden 900ms var(--kurve-weich) both; }
  .buehne__inhalt .status--auf-bild { animation-delay: 120ms; }
  .buehne__inhalt .buehne__claim { animation-delay: 420ms; }
  .buehne__inhalt .knopf-reihe { animation-delay: 540ms; }

  @supports (animation-timeline: view()) {
    .parallax img {
      animation: parallaxWeg linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
    @keyframes parallaxWeg {
      from { transform: translate3d(0, -7%, 0) scale(1.16); }
      to   { transform: translate3d(0, 7%, 0) scale(1.16); }
    }

    .parallax--stark img { animation-name: parallaxStark; }
    @keyframes parallaxStark {
      from { transform: translate3d(0, -11%, 0) scale(1.26); }
      to   { transform: translate3d(0, 11%, 0) scale(1.26); }
    }

    .zoomt img {
      animation: langsamHeran linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
    @keyframes langsamHeran {
      from { transform: scale(1.14); }
      to   { transform: scale(1); }
    }

    /* Das Bild ist 175 Prozent so hoch wie das Band und faehrt beim Scrollen
       einmal komplett durch. Der Weg betraegt 75 Prozent der Bandhoehe, auf
       einem grossen Bildschirm also rund 570 Pixel. Das sieht man wirklich.
       Bewegt wird transform, das laeuft auf dem Compositor.
       Hoehe und Animation stehen bewusst zusammen in diesem Block: ohne
       Animation waere ein 175 Prozent hohes Bild nur ein fester Ausschnitt
       des oberen Drittels. */
    .streifen__bild img {
      height: 175%;
      animation: streifenZug linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
    @keyframes streifenZug {
      from { transform: translate3d(0, 0, 0); filter: brightness(0.92); }
      to   { transform: translate3d(0, -42.85%, 0); filter: brightness(1.06); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .auftritt { opacity: 1; transform: none; }
  .buehne__titel .zeile > span { transform: none; animation: none; }
}

/* Notbremse aus kreta.js */
.bewegung-fertig .buehne__titel .zeile > span { animation: none; transform: none; }
.bewegung-fertig .auftritt { opacity: 1; transform: none; transition: none; }
.bewegung-fertig .auftritt > * { animation: none; }

/* --------------------------------------------------------------------------
   22. Druck
   -------------------------------------------------------------------------- */

@media print {
  .kopf, .nach-oben, .schwebe, .galerie, .leuchtkasten, .speisekarte__ansicht,
  .karte-flaeche, .buehne__steuerung, .schau__steuerung { display: none; }
  html, body { background: #fff; color: #000; }
  .buehne, .staerken, .fuss, .tafel, .block--papier, .streifen { background: #fff; color: #000; }
  h1, h2, h3, h4, .anschrift, strong { color: #000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}

/* --------------------------------------------------------------------------
   23. Nachtrag
   -------------------------------------------------------------------------- */

/* Haftender Text: die Bilderspalte laeuft weiter, der Text bleibt stehen. */
.split--haftend-text { align-items: start; }
.split--haftend-text .hafttext { position: sticky; top: calc(var(--kopf-hoehe) + 3rem); }
@media (max-width: 900px) {
  .split--haftend-text .hafttext { position: static; }
}

/* Bilderstapel: sorgt fuer die Scrollstrecke, die den Hafteffekt sichtbar macht */
.bilderstapel { display: grid; gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); }
.bilderstapel > * { margin: 0; }

/* Mobil: Telefon und Menue gehoeren zusammen an den rechten Rand, nicht
   auseinandergezogen ueber die ganze Breite. */
@media (max-width: 1040px) {
  .kopf__innen { justify-content: flex-start; gap: var(--s-3); }
  .marke { margin-right: auto; }
}

/* Der Telefonknopf ist der wichtigste Knopf im Kopf und darf nie schrumpfen.
   Auf sehr schmalen Bildschirmen wird dafuer die Marke etwas kleiner. */
.kopf__tel { flex-shrink: 0; }
@media (max-width: 370px) {
  .marke__name { font-size: 0.9375rem; letter-spacing: 0.08em; }
  .marke__zusatz { letter-spacing: 0.22em; }
}

/* Grosse Schrift auf schmalen Bildschirmen: Spalten duerfen schmaler werden
   als ihr laengstes Wort, lange Woerter in Ueberschriften werden getrennt,
   und die Marke kuerzt sich, bevor Telefon und Menue aus dem Bild rutschen. */
.split > *, .kontakt-raster > *, .karte > *, .speisekarte__raster > *,
.fuss__raster > *, .paar > * { min-width: 0; }
@media (max-width: 30em) {
  h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; }
  .zeiten th { white-space: normal; }
}
@media (max-width: 1040px) {
  .marke { min-width: 0; flex-shrink: 1; }
  .marke__name, .marke__zusatz { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Lange Adressen in den Rechtstexten, etwa der Link zur Datenschutzerklaerung
   von OpenStreetMap, duerfen mitten im Wort umbrechen. */
.rechtstext a { overflow-wrap: anywhere; }

/* Sehr lange Woerter wie "Verbraucherstreitbeilegungsgesetz" brechen im
   Fliesstext um, statt bei grosser Schrift aus dem Absatz zu laufen. Die
   Rechtstexte trennen auf schmalen Bildschirmen zusaetzlich nach Silben. */
p, li, address { overflow-wrap: break-word; }
@media (max-width: 30em) {
  .rechtstext { -webkit-hyphens: auto; hyphens: auto; }
}

/* Die kleinen Etiketten mit Zierlinie duerfen bei Platzmangel unter die
   Linie umbrechen, statt aus schmalen Spalten zu laufen. */
.vorzeile, .inschrift { flex-wrap: wrap; row-gap: var(--s-1); }