/* Ederfähre · style.css
   Leitidee „Übersetzen“: Die Startseite geht einen Tag am Fischtor entlang, vom Mittagslicht in den Abend.
   Räume färben sich mit (theme-farbwechsel-scroll), Seiten wechseln mit einem Panel in der Hausfarbe Dunkel.
   Nur Variablen aus tokens.css. Bewegung: Bilder, h1 und Seitenwechsel (token-editorial-langsam),
   UI über --ui-* (token-toggle-asymmetrisch). */

/* ---------- Grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Raum: wird von seite.js je Abschnitt gesetzt (data-ton am html) */
  --g: var(--farbe-grund);
  --t: var(--farbe-text);
  --l: var(--farbe-leise);
  --li: var(--farbe-linie);
  --flaeche: var(--farbe-blatt);
  --fokus: var(--farbe-text);
  background: var(--g);
}
html[data-ton="salbei"] { --g: var(--farbe-salbei-hell); --flaeche: #E8ECE1; }
html[data-ton="rose"]   { --g: var(--farbe-rose-hell); --flaeche: #F6E7E0; }
html { scroll-padding-top: calc(var(--kopf-hoehe) + var(--raum-5)); }
html[data-seite="karte"] { scroll-padding-top: calc(var(--kopf-hoehe) + 88px); }
/* Ohne JS (oder ohne IntersectionObserver) tragen die Abschnitte ihre Farbe selbst */
html:not(.raeume) [data-ton="salbei"] { --g: var(--farbe-salbei-hell); --flaeche: #E8ECE1; background: var(--g); }
html:not(.raeume) [data-ton="rose"] { --g: var(--farbe-rose-hell); --flaeche: #F6E7E0; background: var(--g); }
html:not(.raeume) [data-ton="dunkel"] { --g: var(--farbe-dunkle); --t: var(--farbe-auf-dunkel); --l: var(--farbe-auf-dunkel-leise); --li: var(--farbe-linie-dunkel); --flaeche: #34504A; --fokus: var(--farbe-akzent); background: var(--g); color: var(--t); }
html[data-ton="dunkel"] { --g: var(--farbe-dunkle); --t: var(--farbe-auf-dunkel); --l: var(--farbe-auf-dunkel-leise); --li: var(--farbe-linie-dunkel); --flaeche: #34504A; --fokus: var(--farbe-akzent); }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--g);
  color: var(--t);
  font: 400 var(--groesse-text) / var(--zeilenhoehe-text) var(--schrift-text);
  font-variation-settings: 'FLAR' 0;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dauer-m) var(--ease), color var(--dauer-m) var(--ease);
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
p, ul, ol, dl, figure, address, blockquote { margin: 0; }
ul[class], ol[class], nav ul, .fuss ul { list-style: none; padding: 0; margin: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }

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

/* Fokus als Gestaltungssystem (fokus-stil-system) */
:focus-visible { outline: 2px solid var(--fokus); outline-offset: var(--fokus-abstand); border-radius: var(--radius-klein); }
:focus:not(:focus-visible) { outline: none; }
main:focus { outline: none; }

/* Sprunglinks (sprunglinks-landmarken) */
.sprung {
  position: fixed; left: var(--raster-rand); top: var(--raum-3); z-index: 90;
  padding: var(--raum-3) var(--raum-5); border-radius: var(--radius-button);
  background: var(--farbe-dunkle); color: var(--farbe-auf-dunkel); text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--ui-dauer-s) var(--ui-ease);
}
.sprung:focus { transform: none; outline: 2px solid var(--farbe-akzent); }

/* ---------- Schrift ---------- */
.h1, h1 {
  font-family: var(--schrift-headline);
  font-size: var(--groesse-h1);
  font-weight: 470;
  font-variation-settings: var(--fraunces-display);
  letter-spacing: var(--laufweite-headline);
  line-height: var(--zeilenhoehe-headline);
  text-wrap: balance;
}
.h2, h2 {
  font-family: var(--schrift-headline);
  font-size: var(--groesse-h2);
  font-weight: 440;
  font-variation-settings: var(--fraunces-titel);
  letter-spacing: var(--laufweite-headline);
  line-height: 1.04;
  text-wrap: balance;
}
.h3, h3 {
  font-family: var(--schrift-headline);
  font-size: var(--groesse-h3);
  font-weight: 480;
  font-variation-settings: var(--fraunces-titel);
  line-height: 1.12;
  letter-spacing: var(--laufweite-headline);
}
.kursiv { font-style: italic; font-weight: 300; }
.label {
  font-family: var(--schrift-text);
  font-size: var(--groesse-label);
  font-weight: 560;
  font-variation-settings: 'FLAR' 80;
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
}
.leise { color: var(--l); }
.klein { font-size: var(--groesse-klein); }
.gross { font-size: var(--groesse-gross); line-height: 1.45; text-wrap: pretty; }
p { text-wrap: pretty; max-width: var(--mass); }

/* Unterstreichung: Variante „wiederkehr“ (unterstreichung-varianten) */
.linie {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left 100% / 100% 1px no-repeat,
              linear-gradient(currentColor, currentColor) right 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--ui-dauer-m) var(--ui-ease);
}
@media (hover: hover) and (pointer: fine) {
  .linie:hover { background-size: 0 1px, 100% 1px; background-position: right 100%, left 100%; }
}

/* Masken-Reveal der h1 (split-mask-reveal, nur h1) */
.maske { display: inline-block; overflow: clip; overflow-clip-margin: 0.1em; padding-bottom: 0.08em; margin-bottom: -0.08em; vertical-align: top; }
.maske > span { display: inline-block; }
html[data-bewegung="voll"] .maske > span {
  animation: steigen var(--dauer-m) var(--ease) both;
  animation-delay: calc(120ms + var(--i, 0) * var(--stagger));
}
html.intro .maske > span { animation-delay: calc(420ms + var(--i, 0) * var(--stagger)); }
html.wechsel-wisch .maske > span { animation-delay: calc(var(--wechsel-rein) + var(--wechsel-halten) + 80ms + var(--i, 0) * var(--stagger)); }
@keyframes steigen { from { transform: translateY(108%); } }

/* ---------- Raster ---------- */
.rahmen { width: 100%; max-width: calc(var(--raster-max) + 2 * var(--raster-rand)); margin-inline: auto; padding-inline: var(--raster-rand); }
.raster { display: grid; grid-template-columns: repeat(var(--raster-spalten), minmax(0, 1fr)); column-gap: var(--raster-spalt); }

/* ---------- Knöpfe: pfeil-icon-button (tausch) + druck-feedback ---------- */
.knopf {
  --k-grund: var(--farbe-signal);
  --k-text: var(--farbe-auf-dunkel);
  --k-kreis: var(--farbe-akzent);
  position: relative;
  display: inline-flex; align-items: center; gap: var(--raum-3);
  min-height: var(--button-hoehe);
  padding: 0 var(--raum-5);
  border: 0; border-radius: var(--radius-button);
  background: var(--k-grund); color: var(--k-text);
  font-weight: 560; font-size: var(--groesse-text); line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: transform var(--druck-aus) var(--ease-feder), background-color var(--ui-dauer-s) var(--ui-ease);
  -webkit-tap-highlight-color: transparent;
}
.knopf--pfeil { padding-right: calc((var(--button-hoehe) - var(--button-kreis)) / 2); }
.knopf__kreis {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: var(--button-kreis); height: var(--button-kreis); border-radius: 50%;
  background: var(--k-kreis); color: var(--farbe-dunkle);
  flex: none;
}
.knopf__kreis svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--ui-dauer-m) var(--ui-ease); }
.knopf__kreis svg + svg { position: absolute; transform: translateX(-160%); }
@media (hover: hover) and (pointer: fine) {
  .knopf--pfeil:hover .knopf__kreis svg:first-child { transform: translateX(160%); }
  .knopf--pfeil:hover .knopf__kreis svg + svg { transform: none; }
}
.knopf:active, .knopf.ist-gedrueckt { transform: scale(var(--druck-skala)); transition-duration: var(--druck-ein); transition-timing-function: ease-out; }
.knopf--kontur { --k-grund: transparent; --k-text: var(--t); box-shadow: inset 0 0 0 1px var(--farbe-linie-stark); }
html[data-ton="dunkel"] .knopf--kontur, .dunkel .knopf--kontur { box-shadow: inset 0 0 0 1px var(--farbe-linie-dunkel); }
.knopf--hell { --k-grund: var(--farbe-grund); --k-text: var(--farbe-text); }
.knopf--senf { --k-grund: var(--farbe-akzent); --k-text: var(--farbe-dunkle); --k-kreis: var(--farbe-dunkle); }
.knopf--senf .knopf__kreis { color: var(--farbe-akzent); }
@media (hover: hover) and (pointer: fine) {
  .knopf--kontur:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
}
.knopf[aria-busy="true"] { pointer-events: none; }
.knopf__lader { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
.knopf[aria-busy="true"] .knopf__lader { display: inline-block; animation: drehen 700ms linear infinite; }
@keyframes drehen { to { transform: rotate(1turn); } }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 40;
  height: var(--kopf-hoehe);
  background: var(--g);
  color: var(--t);
  transition: background-color var(--dauer-m) var(--ease), color var(--dauer-m) var(--ease), box-shadow var(--ui-dauer-m) var(--ui-ease);
}
html.ist-gescrollt .kopf { box-shadow: 0 1px 0 var(--li); }
.kopf__innen { height: 100%; display: flex; align-items: center; gap: var(--raum-6); }
.marke {
  font-family: var(--schrift-headline); font-size: 1.625rem; font-weight: 520;
  font-variation-settings: var(--fraunces-display); letter-spacing: -0.02em;
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 0.06em;
  min-height: 44px; align-items: center;
}
.marke i { font-style: italic; font-weight: 300; }
.kopf__nav { margin-left: auto; }
.kopf__nav ul { display: flex; gap: var(--raum-6); }
.kopf__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; font-weight: 520;
}
.rolle { display: inline-block; overflow: clip; line-height: 1.3; height: 1.3em; vertical-align: middle; }
.rolle > span { display: inline-block; text-shadow: 0 1.3em 0 currentColor; transition: transform var(--ui-dauer-m) var(--ui-ease); }
@media (hover: hover) and (pointer: fine) {
  .kopf__nav a:hover .rolle > span, .kopf__nav a:focus-visible .rolle > span { transform: translateY(-1.3em); }
}
.kopf__nav a[aria-current="page"] .rolle { box-shadow: inset 0 -1px 0 currentColor; }
.kopf__rechts { display: flex; align-items: center; gap: var(--raum-4); }

/* Statuszeile: live-uhr-und-standort + oeffnungszeiten-status (Signatur) */
.status {
  display: inline-flex; align-items: center; gap: var(--raum-2);
  min-height: 44px; padding: 0 var(--raum-4);
  border: 0; border-radius: var(--radius-button);
  background: transparent; color: inherit;
  box-shadow: inset 0 0 0 1px var(--li);
  font-size: var(--groesse-klein); font-weight: 500; white-space: nowrap;
  text-decoration: none; cursor: pointer;
}
.status__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--farbe-akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe-akzent) 35%, transparent); flex: none; }
html[data-zustand="zu"] .status__punkt { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.status time { font-variant-numeric: tabular-nums; }

/* Wochen-Popover */
.woche-pop {
  margin: 0; inset: auto; position-area: bottom span-left; position-try-fallbacks: flip-block;
  margin-top: var(--raum-2);
  width: min(360px, calc(100vw - 2 * var(--raster-rand)));
  padding: var(--raum-5); border: 0; border-radius: var(--radius-gross);
  background: var(--farbe-dunkle); color: var(--farbe-auf-dunkel);
  --t: var(--farbe-auf-dunkel); --l: var(--farbe-auf-dunkel-leise); --li: var(--farbe-linie-dunkel); --fokus: var(--farbe-akzent);
  opacity: 1; transform: none;
  transition: opacity var(--ui-dauer-s) var(--ui-ease), transform var(--ui-dauer-m) var(--ui-ease), overlay var(--ui-dauer-m) allow-discrete, display var(--ui-dauer-m) allow-discrete;
}
.woche-pop:not(:popover-open) { opacity: 0; transform: translateY(-6px); transition-duration: calc(var(--ui-dauer-s) * var(--ui-aus-faktor)); transition-timing-function: var(--ui-ease-aus); }
@starting-style { .woche-pop:popover-open { opacity: 0; transform: translateY(-6px); } }
.woche-pop__status { font-weight: 560; margin-bottom: var(--raum-4); }
.woche-pop .woche th, .woche-pop .woche td { padding-block: var(--raum-2); }

/* ---------- Woche (Tabelle) ---------- */
.woche { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.woche th { text-align: left; font-weight: 500; }
.woche td { text-align: right; }
.woche th, .woche td { padding: var(--raum-3) 0; border-bottom: 1px solid var(--li); }
.woche tr.ist-heute th, .woche tr.ist-heute td { font-weight: 640; }
.woche .heute { margin-left: var(--raum-2); padding: 1px 8px; border-radius: var(--radius-button); background: var(--farbe-akzent); color: var(--farbe-dunkle); font-size: var(--groesse-label); font-weight: 600; letter-spacing: 0.04em; }

/* ---------- Seitenwechsel: gebogener-wipe-shape über Cross-Document View Transitions ---------- */
@view-transition { navigation: auto; }
.wisch { display: none; }
html.wechsel-wisch .wisch {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: var(--farbe-dunkle); color: var(--farbe-auf-dunkel);
  view-transition-name: wisch;
}
.wisch__name {
  display: block; overflow: clip;
  font-family: var(--schrift-headline); font-style: italic; font-weight: 300;
  font-size: clamp(3rem, 1rem + 8vw, 8rem); letter-spacing: var(--laufweite-display); line-height: 1.1;
  padding-bottom: 0.1em;
}
.wisch__name span { display: inline-block; animation: wisch-name var(--wechsel-gesamt) linear both; }
/* 520 + 160 + 820 = 1500 ms: rein bis 34,7 %, Halten bis 45,3 % */
@keyframes wisch-name {
  0%, 14% { transform: translateY(110%); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  34% { transform: none; }
  45% { transform: none; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  62%, 100% { transform: translateY(-110%); }
}
html.wechsel-wisch::view-transition-group(root) { animation: none; }
html.wechsel-wisch::view-transition-old(root) { animation: wisch-alt var(--wechsel-gesamt) linear both; }
html.wechsel-wisch::view-transition-new(root) { animation: wisch-neu var(--wechsel-gesamt) linear both; }
html.wechsel-wisch::view-transition-group(wisch) { animation: none; }
html.wechsel-wisch::view-transition-new(wisch) { animation: wisch-form var(--wechsel-gesamt) linear both; }
@keyframes wisch-alt {
  0% { transform: none; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  34.7%, 100% { transform: translateY(calc(var(--wechsel-versatz) * -1)); }
}
@keyframes wisch-neu {
  0%, 45.3% { opacity: 0; transform: translateY(var(--wechsel-versatz)); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  45.4% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
/* Vorderkante steigt mit Wölbung nach oben (Anlauf), Hinterkante hängt beim Freigeben durch */
@keyframes wisch-form {
  0% { clip-path: shape(from 0% 100%, curve to 100% 100% with 50% 100%, line to 100% 100%, curve to 0% 100% with 50% 100%, close); animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  20% { clip-path: shape(from 0% 58%, curve to 100% 58% with 50% 40%, line to 100% 100%, curve to 0% 100% with 50% 100%, close); animation-timing-function: linear; }
  34.7% { clip-path: shape(from 0% -2%, curve to 100% -2% with 50% -10%, line to 100% 100%, curve to 0% 100% with 50% 100%, close); }
  45.3% { clip-path: shape(from 0% -2%, curve to 100% -2% with 50% -2%, line to 100% 100%, curve to 0% 100% with 50% 100%, close); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  72% { clip-path: shape(from 0% -2%, curve to 100% -2% with 50% -2%, line to 100% 46%, curve to 0% 46% with 50% 64%, close); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  100% { clip-path: shape(from 0% -2%, curve to 100% -2% with 50% -2%, line to 100% -2%, curve to 0% -2% with 50% -2%, close); }
}
/* Richtung: zurück und zur Startseite kommt das Panel von oben */
html.wechsel-zurueck::view-transition-new(wisch) { animation-name: wisch-form-oben; }
html.wechsel-zurueck::view-transition-old(root) { animation-name: wisch-alt-oben; }
html.wechsel-zurueck::view-transition-new(root) { animation-name: wisch-neu-oben; }
@keyframes wisch-alt-oben {
  0% { transform: none; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  34.7%, 100% { transform: translateY(var(--wechsel-versatz)); }
}
@keyframes wisch-neu-oben {
  0%, 45.3% { opacity: 0; transform: translateY(calc(var(--wechsel-versatz) * -1)); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  45.4% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes wisch-form-oben {
  0% { clip-path: shape(from 0% 0%, curve to 100% 0% with 50% 0%, line to 100% 0%, curve to 0% 0% with 50% 0%, close); animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  20% { clip-path: shape(from 0% 0%, curve to 100% 0% with 50% 0%, line to 100% 42%, curve to 0% 42% with 50% 60%, close); animation-timing-function: linear; }
  34.7% { clip-path: shape(from 0% 0%, curve to 100% 0% with 50% 0%, line to 100% 102%, curve to 0% 102% with 50% 110%, close); }
  45.3% { clip-path: shape(from 0% 0%, curve to 100% 0% with 50% 0%, line to 100% 102%, curve to 0% 102% with 50% 102%, close); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  72% { clip-path: shape(from 0% 54%, curve to 100% 54% with 50% 36%, line to 100% 102%, curve to 0% 102% with 50% 102%, close); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  100% { clip-path: shape(from 0% 102%, curve to 100% 102% with 50% 102%, line to 100% 102%, curve to 0% 102% with 50% 102%, close); }
}
/* Telefon: Wölbung halb so hoch (meta.json → mobil) */
@media (max-width: 760px) {
  @keyframes wisch-form {
    0% { clip-path: shape(from 0% 100%, curve to 100% 100% with 50% 100%, line to 100% 100%, curve to 0% 100% with 50% 100%, close); animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
    20% { clip-path: shape(from 0% 56%, curve to 100% 56% with 50% 47%, line to 100% 100%, curve to 0% 100% with 50% 100%, close); animation-timing-function: linear; }
    34.7% { clip-path: shape(from 0% -2%, curve to 100% -2% with 50% -6%, line to 100% 100%, curve to 0% 100% with 50% 100%, close); }
    45.3% { clip-path: shape(from 0% -2%, curve to 100% -2% with 50% -2%, line to 100% 100%, curve to 0% 100% with 50% 100%, close); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
    72% { clip-path: shape(from 0% -2%, curve to 100% -2% with 50% -2%, line to 100% 46%, curve to 0% 46% with 50% 55%, close); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
    100% { clip-path: shape(from 0% -2%, curve to 100% -2% with 50% -2%, line to 100% -2%, curve to 0% -2% with 50% -2%, close); }
  }
}
/* Ohne shape(): gerader Wipe */
@supports not (clip-path: shape(from 0% 0%, line to 100% 100%)) {
  html.wechsel-wisch::view-transition-new(wisch) { animation-name: wisch-gerade; }
  @keyframes wisch-gerade {
    0% { clip-path: inset(100% 0 0 0); animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
    34.7%, 45.3% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
    100% { clip-path: inset(0 0 100% 0); }
  }
}
/* Gericht → Karte: Bild fliegt mit, Kopf bleibt stehen (vt-shared-element-morph) */
html.wechsel-morph [data-morph-ziel] { view-transition-name: gericht; }
html.wechsel-morph .kopf { view-transition-name: kopf; }
html.wechsel-morph::view-transition-group(gericht) { animation-duration: var(--dauer-l); animation-timing-function: var(--ease); }
html.wechsel-morph::view-transition-old(gericht), html.wechsel-morph::view-transition-new(gericht) { height: 100%; object-fit: cover; animation-duration: var(--dauer-l); }
html.wechsel-morph::view-transition-old(root) { animation: morph-raus calc(var(--dauer-l) * 0.4) var(--ease-aus) both; }
html.wechsel-morph::view-transition-new(root) { animation: morph-rein var(--dauer-m) var(--ease) calc(var(--dauer-l) * 0.3) both; }
html.wechsel-morph::view-transition-group(kopf) { animation: none; }
@keyframes morph-raus { to { opacity: 0; } }
@keyframes morph-rein { from { opacity: 0; transform: translateY(24px); } }
/* Bewegung reduziert: kurzer Fade */
html.wechsel-ruhig::view-transition-old(root) { animation: morph-raus 200ms linear both; }
html.wechsel-ruhig::view-transition-new(root) { animation: ruhig-rein 200ms linear both; }
@keyframes ruhig-rein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 200ms !important; animation-delay: 0ms !important; }
}

/* ---------- Intro (intro-ohne-wartezeit): Fährseil zieht sich über das Bild, das Bild öffnet sich daran ---------- */
.held__bild { position: relative; }
.seil { display: none; }
html.intro .seil {
  display: block; position: absolute; left: 0; right: 0; top: 50%; z-index: 3; height: 1px;
  background: var(--farbe-text); transform-origin: left center;
  animation: seil-ziehen 700ms var(--ease) 80ms both, seil-weg 400ms var(--ease-aus) 1150ms forwards;
}
html.intro .held__bild::before, html.intro .held__bild::after {
  content: ''; position: absolute; left: 0; right: 0; z-index: 2; height: 50.5%;
  background: var(--g);
  animation: deckel-oben var(--dauer-l) var(--ease) 520ms both;
}
html.intro .held__bild::before { top: 0; }
html.intro .held__bild::after { bottom: 0; animation-name: deckel-unten; }
@keyframes seil-ziehen { from { transform: scaleX(0); } }
@keyframes seil-weg { to { opacity: 0; } }
@keyframes deckel-oben { to { transform: translateY(-101%); } }
@keyframes deckel-unten { to { transform: translateY(101%); } }
html.intro .held__bild img { animation: bild-ruhen var(--dauer-xl) var(--ease) 520ms both; }
@keyframes bild-ruhen { from { transform: scale(1.08); } }
html.intro .kopf, html.intro .held .auftauchen { animation: auftauchen 700ms var(--ease) both; animation-delay: calc(700ms + var(--j, 0) * 90ms); }
@keyframes auftauchen { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Startseite: Hero ---------- */
.held { position: relative; }
.held__raster {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt);
  min-height: calc(100svh - var(--kopf-hoehe));
  padding-right: var(--raster-rand);
}
.held__bild { grid-column: 1 / span 7; overflow: hidden; background: var(--flaeche); }
.held__bild img, .held__bild .platz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.held__text {
  grid-column: 8 / span 5;
  padding-inline-start: clamp(0px, 3vw, var(--raum-8));
  min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--raum-6);
  padding-block: var(--raum-8) var(--raum-8);
  container-type: inline-size;
}
.held__text h1 { font-size: min(var(--groesse-h1), 13.2cqi); }
.held__zeiten { display: grid; gap: var(--raum-2); }
.held__zeiten dl { display: grid; grid-template-columns: auto 1fr; gap: var(--raum-1) var(--raum-4); font-size: var(--groesse-klein); }
.held__zeiten dt { font-weight: 600; }
.held__zeiten dd { margin: 0; color: var(--l); }
.held__knoepfe { display: flex; flex-wrap: wrap; gap: var(--raum-3); }
.held__adresse { font-size: var(--groesse-klein); color: var(--l); }

/* Bewertungsband unter dem Hero (bewertungsprofil-mit-echtheitshinweis, band) */
.band { border-block: 1px solid var(--li); }
.band__innen { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--raum-2) var(--raum-6); padding-block: var(--raum-4); font-size: var(--groesse-klein); }
.band__wert { font-family: var(--schrift-headline); font-size: 1.375rem; }
.band__hinweis { color: var(--l); flex: 1 1 320px; max-width: none; }

/* ---------- Startseite: Ein Tag am Fischtor ---------- */
.tag { position: relative; }
.zeit {
  position: relative;
  min-height: 118svh;
  padding-block: var(--raum-sektion);
}
.zeit__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); align-items: start; }
.zeit__text { grid-column: 1 / span 5; position: sticky; top: calc(var(--kopf-hoehe) + 8svh); display: grid; gap: var(--raum-5); }
.zeit__medien { grid-column: 7 / span 6; display: grid; gap: var(--raster-spalt); }
.zeit--rechts .zeit__text { grid-column: 8 / span 5; grid-row: 1; }
.zeit--rechts .zeit__medien { grid-column: 1 / span 6; grid-row: 1; }
.zeit__uhr {
  display: block;
  font-family: var(--schrift-headline); font-style: italic; font-weight: 300;
  font-size: var(--groesse-zeit); line-height: 0.82; letter-spacing: var(--laufweite-display);
  font-variant-numeric: lining-nums tabular-nums;
  margin-left: -0.04em;
}
.zeit__uhr .ziffer { display: inline-block; overflow: clip; overflow-clip-margin: 0.05em; vertical-align: top; padding-bottom: 0.06em; }
.zeit__uhr .ziffer > span { display: inline-block; }
html[data-bewegung="voll"].js .zeit:not(.ist-da) .zeit__uhr .ziffer > span { transform: translateY(100%); }
html[data-bewegung="voll"].js .zeit .zeit__uhr .ziffer > span { transition: transform var(--dauer-m) var(--ease); transition-delay: calc(var(--n, 0) * 70ms); }
.zeit__jetzt {
  display: inline-flex; align-items: center; gap: var(--raum-2); width: fit-content;
  padding: 4px 12px; border-radius: var(--radius-button);
  background: var(--farbe-akzent); color: var(--farbe-dunkle);
  font-size: var(--groesse-label); font-weight: 620; letter-spacing: 0.06em; text-transform: uppercase; font-variation-settings: 'FLAR' 80;
}
.zeit__jetzt::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.weiter {
  display: inline-flex; align-items: center; gap: var(--raum-3); width: fit-content;
  min-height: 44px; text-decoration: none; font-weight: 560;
}
.weiter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--ui-dauer-m) var(--ui-ease); }
@media (hover: hover) and (pointer: fine) { .weiter:hover svg { transform: translateX(4px); } }

/* Bilder: Blende öffnet sich, Bild zoomt gegenläufig (clip-path-bild-reveal) */
.blende { position: relative; overflow: hidden; border-radius: var(--radius-gross); background: var(--flaeche); }
.blende > img, .blende > .platz { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--format, 4 / 5); }
html.js[data-bewegung="voll"] .blende {
  clip-path: inset(10% 10% 10% 10% round var(--radius-gross));
  transition: clip-path var(--dauer-l) var(--ease);
}
html.js[data-bewegung="voll"] .blende > img, html.js[data-bewegung="voll"] .blende > .platz { transform: scale(1.14); transition: transform var(--dauer-xl) var(--ease); }
html.js[data-bewegung="voll"] .blende.ist-da { clip-path: inset(0 0 0 0 round var(--radius-gross)); }
html.js[data-bewegung="voll"] .blende.ist-da > img, html.js[data-bewegung="voll"] .blende.ist-da > .platz { transform: none; }
/* Hover: Rahmen schrumpft, Bild zoomt gegenläufig (bild-zoom-in-maske, Variante gegen) */
@media (hover: hover) and (pointer: fine) {
  a:hover > .blende.ist-da, a:focus-visible > .blende.ist-da { clip-path: inset(2.5% 2.5% 2.5% 2.5% round var(--radius-gross)); transition-duration: var(--dauer-rezept-3); }
  a:hover > .blende.ist-da > img, a:hover > .blende.ist-da > .platz { transform: scale(1.06); transition-duration: var(--dauer-rezept-3); }
}
.bildlink { display: block; text-decoration: none; }
.unterschrift { margin-top: var(--raum-3); font-size: var(--groesse-klein); color: var(--l); }

/* Bildplatz (Leitfaden 7b): ruhig getönt, Motiv als Hinweis */
.platz {
  display: grid; align-items: end;
  padding: var(--raum-5);
  background: var(--farbe-blatt);
  color: var(--farbe-text);
  box-shadow: inset 0 0 0 1px var(--farbe-linie);
  font-size: var(--groesse-klein); line-height: 1.35;
}
.platz--salbei { background: #C3CEB6; }
.platz--rose { background: #E3BBA9; }
.platz--senf { background: var(--farbe-senf-hell); }
/* Teller-Skizze: ein fester Bildplatz je Gang, überall gleich (zwei Haarlinien als Tellerrand) */
.platz--teller {
  background:
    radial-gradient(circle at 50% 44%, transparent 0 41%, rgb(53 56 57 / 0.22) 41% calc(41% + 1px), transparent calc(41% + 1px) 52%, rgb(53 56 57 / 0.3) 52% calc(52% + 1.5px), transparent calc(52% + 1.5px)),
    var(--farbe-blatt);
  background-size: 100% 100%;
}
.platz--teller .platz__motiv { justify-self: start; }
.platz--tief { background: #3A5650; color: var(--farbe-auf-dunkel); box-shadow: inset 0 0 0 1px var(--farbe-linie-dunkel); }
.platz__motiv { max-width: 28ch; }
.platz__motiv::before { content: 'Foto folgt · '; font-weight: 600; }

/* Medien-Expansion: Holzofen wächst zum Vollbild (medien-expansion-scroll) */
.weite { position: relative; height: 230svh; }
.weite__buehne { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.weite__bild { position: absolute; inset: 0; margin: auto; width: 34vw; height: 46svh; border-radius: var(--radius-gross); overflow: hidden; }
.weite__bild img { width: 100%; height: 100%; object-fit: cover; }
.weite__worte {
  position: relative; z-index: 2; width: 100%;
  display: flex; justify-content: space-between; gap: var(--raum-6);
  padding-inline: var(--raster-rand);
  font-family: var(--schrift-headline); font-size: var(--groesse-h2); font-weight: 420; letter-spacing: var(--laufweite-headline); line-height: 1;
  pointer-events: none;
}
.weite__worte span { display: block; max-width: 7ch; }
.weite__worte span:last-child { text-align: right; }
.weite__satz { position: absolute; left: var(--raster-rand); bottom: var(--raum-8); z-index: 2; max-width: 34ch; color: var(--farbe-auf-dunkel); }
@supports (animation-timeline: view()) {
  html[data-bewegung="voll"] .weite { view-timeline: --weite block; }
  html[data-bewegung="voll"] .weite__bild { animation: weite-bild linear both; animation-timeline: --weite; animation-range: contain 0% contain 55%; }
  html[data-bewegung="voll"] .weite__worte span:first-child { animation: weite-links linear both; animation-timeline: --weite; animation-range: contain 0% contain 45%; }
  html[data-bewegung="voll"] .weite__worte span:last-child { animation: weite-rechts linear both; animation-timeline: --weite; animation-range: contain 0% contain 45%; }
  html[data-bewegung="voll"] .weite__satz { animation: weite-satz linear both; animation-timeline: --weite; animation-range: contain 55% contain 75%; }
}
@keyframes weite-bild { to { width: 100vw; height: 100svh; border-radius: 0; } }
@keyframes weite-links { to { transform: translateX(-40vw); opacity: 0; } }
@keyframes weite-rechts { to { transform: translateX(40vw); opacity: 0; } }
@keyframes weite-satz { from { opacity: 0; transform: translateY(24px); } }
/* ohne Scroll-Timeline oder bei reduzierter Bewegung: Vollbild steht */
@supports not (animation-timeline: view()) {
  .weite { height: auto; } .weite__buehne { position: relative; height: 90svh; }
  .weite__bild { width: 100%; height: 100%; border-radius: 0; } .weite__worte { display: none; }
}
html:not([data-bewegung="voll"]) .weite { height: auto; }
html:not([data-bewegung="voll"]) .weite__buehne { position: relative; height: 90svh; }
html:not([data-bewegung="voll"]) .weite__bild { width: 100%; height: 100%; border-radius: 0; }
html:not([data-bewegung="voll"]) .weite__worte { display: none; }

/* Telefon groß (Startseite 21.30, Reservieren) */
.anruf {
  display: inline-block;
  font-family: var(--schrift-headline); font-weight: 300; font-variation-settings: var(--fraunces-display);
  font-size: clamp(2.5rem, 1rem + 5.6vw, 6.5rem); letter-spacing: var(--laufweite-display); line-height: 1;
  text-decoration: none; white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) left 100% / 0 2px no-repeat;
  transition: background-size var(--dauer-rezept-3) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .anruf:hover { background-size: 100% 2px; } }

/* Schluss 21.30: dieselbe Gaststube wie um 11.30, das Licht geht beim Scrollen aus */
.heute { padding-block: var(--raum-sektion); }
.heute__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); row-gap: var(--raum-7); align-items: center; min-height: calc(100svh - var(--kopf-hoehe) - 2 * var(--raum-sektion)); }
.heute__text { grid-column: 1 / span 6; display: grid; gap: var(--raum-5); }
.heute__text h2 { font-size: clamp(2.5rem, 1.3rem + 4vw, 5rem); line-height: 1; letter-spacing: -0.02em; font-variation-settings: var(--fraunces-display); font-weight: 400; }
.heute__bild { grid-column: 8 / span 5; }
.heute__wege { display: flex; flex-wrap: wrap; gap: var(--raum-3); margin-top: var(--raum-3); }
@supports (animation-timeline: view()) {
  html[data-bewegung="voll"] .licht > img { animation: licht-aus linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
}
html:not([data-bewegung="voll"]) .licht > img { filter: brightness(0.42) saturate(0.8); }
@keyframes licht-aus { from { filter: brightness(1) saturate(1); } to { filter: brightness(0.42) saturate(0.8); } }

/* ---------- Unterseiten: Kopfbereich ---------- */
.seitenkopf { padding-block: clamp(var(--raum-7), 6vw, var(--raum-9)) var(--raum-7); }
.seitenkopf__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); row-gap: var(--raum-6); align-items: end; }
.seitenkopf__titel { grid-column: 1 / span 7; display: grid; gap: var(--raum-5); }
.seitenkopf__titel h1 { font-size: clamp(3.25rem, 1.6rem + 7vw, 8rem); line-height: 0.95; letter-spacing: -0.02em; }
.seitenkopf__bild { grid-column: 8 / span 5; }
.seitenkopf__meta { display: grid; gap: var(--raum-2); }
.seitenkopf__titel--breit { grid-column: 1 / span 8; }
.seitenkopf__aktion { grid-column: 9 / span 4; display: flex; flex-wrap: wrap; gap: var(--raum-3); justify-content: flex-end; }

/* ---------- Karte als gesetzte Tafel (speisekarte-editorial, bistro) ---------- */
.karte-kopf .seitenkopf__bild { grid-column: 9 / span 4; }
.gang { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); padding-block: var(--raum-9); border-top: 1px solid var(--farbe-linie-stark); }
.gang:first-of-type { border-top: 0; padding-top: var(--raum-8); }
.gang__bild { grid-column: 1 / span 4; position: sticky; top: calc(var(--kopf-hoehe) + 88px); align-self: start; }
.gang__liste { grid-column: 6 / span 7; }
.gang__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--raum-5); margin-bottom: var(--raum-6); }
.gang__titel { font-family: var(--schrift-headline); font-style: italic; font-weight: 300; font-size: clamp(2.75rem, 1.6rem + 3.6vw, 5rem); letter-spacing: -0.025em; line-height: 0.95; }
.gang__zeit { color: var(--l); font-variant-numeric: tabular-nums; }
.tafel { display: grid; }
.t { display: grid; grid-template-columns: 1fr auto; column-gap: var(--raum-4); row-gap: var(--raum-1); padding-block: var(--raum-5); border-bottom: 1px solid var(--li); }
.t:first-child { border-top: 1px solid var(--li); }
.t__zeile { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--raum-3); }
.t__name { font-family: var(--schrift-headline); font-weight: 420; font-variation-settings: var(--fraunces-gericht); font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem); line-height: 1.1; letter-spacing: -0.012em; }
.t__punkte { flex: 1; min-width: var(--raum-5); border-bottom: 1.5px dotted var(--farbe-linie-stark); transform: translateY(-0.3em); }
.t__preis { font-family: var(--schrift-headline); font-weight: 400; font-variation-settings: var(--fraunces-gericht); font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.t__text { grid-column: 1; color: var(--l); font-size: var(--groesse-text); }
.t .kz { grid-column: 2; grid-row: 2; }
.t-gruppe + .t-gruppe { margin-top: var(--raum-7); }
.t-gruppe__titel { font-size: var(--groesse-label); font-weight: 600; letter-spacing: var(--laufweite-label); text-transform: uppercase; font-variation-settings: 'FLAR' 80; color: var(--l); margin-bottom: var(--raum-3); }
.karte-fuss { padding-bottom: var(--raum-8); }
html[data-bewegung="voll"] .panel.ist-neu .gang { animation: rubrik-rein var(--ui-dauer-l) var(--ui-ease) both; animation-delay: calc(var(--r, 0) * var(--ui-stagger)); }

/* ---------- Karte: Reiter, Allergene ---------- */
.reiterleiste { position: sticky; top: var(--kopf-hoehe); z-index: 20; background: var(--g); border-bottom: 1px solid var(--li); transition: background-color var(--dauer-m) var(--ease); }
.reiterleiste__innen { display: flex; align-items: center; gap: var(--raum-5); padding-block: var(--raum-3); }
.reiter { display: flex; gap: var(--raum-2); overflow-x: auto; scrollbar-width: none; }
.reiter__tab {
  display: inline-flex; align-items: baseline; gap: var(--raum-2);
  min-height: 44px; padding: 0 var(--raum-5);
  border: 0; border-radius: var(--radius-button);
  background: transparent; box-shadow: inset 0 0 0 1px var(--li);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--ui-dauer-s) var(--ui-ease), box-shadow var(--ui-dauer-s) var(--ui-ease), transform var(--druck-aus) var(--ease-feder);
}
.reiter__tab:active { transform: scale(var(--druck-skala)); transition-duration: var(--druck-ein); }
.reiter__titel { font-weight: 600; align-self: center; }
.reiter__zeit { font-size: var(--groesse-klein); color: var(--l); align-self: center; }
.reiter__tab[aria-selected="true"] { background: var(--farbe-akzent); box-shadow: none; color: var(--farbe-dunkle); }
.reiter__tab[aria-selected="true"] .reiter__zeit { color: var(--farbe-dunkle); }
.reiterleiste__rechts { margin-left: auto; display: flex; gap: var(--raum-4); align-items: center; }
.textknopf { border: 0; background: none; padding: 0; min-height: 44px; cursor: pointer; font-weight: 520; }

.panel { padding-block: 0 var(--raum-8); }
.panel:focus-visible { outline-offset: -4px; }
html[data-bewegung="voll"] .panel.ist-neu .rubrik { animation: rubrik-rein var(--ui-dauer-l) var(--ui-ease) both; animation-delay: calc(var(--r, 0) * var(--ui-stagger)); }
@keyframes rubrik-rein { from { opacity: 0; transform: translateY(10px); } }
.rubriken { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); row-gap: var(--raum-9); }
.rubrik { grid-column: span 6; display: grid; grid-template-columns: subgrid; align-content: start; }
.rubrik__kopf { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: var(--raum-4); padding-bottom: var(--raum-4); border-bottom: 1px solid var(--farbe-linie-stark); margin-bottom: var(--raum-2); }
.rubrik__titel { font-family: var(--schrift-headline); font-style: italic; font-weight: 300; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); letter-spacing: -0.015em; line-height: 1.05; }
.rubrik--breit { grid-column: 1 / -1; }
.rubrik--breit .gerichte { columns: 2; column-gap: calc(var(--raster-spalt) * 3); }
.gerichte { grid-column: 1 / -1; }
.g { display: grid; grid-template-columns: 1fr auto; column-gap: var(--raum-4); row-gap: var(--raum-1); padding-block: var(--raum-gericht); border-bottom: 1px solid var(--li); break-inside: avoid; }
.g__name { font-family: var(--schrift-text); font-size: var(--groesse-gericht); font-weight: 560; line-height: 1.3; }
.g__preis { font-size: var(--groesse-gericht); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.g__text { grid-column: 1; color: var(--l); font-size: var(--groesse-klein); }
.kz {
  grid-column: 2; justify-self: end; align-self: start;
  min-width: 44px; min-height: 32px; padding: 0 var(--raum-2);
  border: 0; border-radius: var(--radius-klein); background: transparent; box-shadow: inset 0 0 0 1px var(--li);
  font-size: var(--groesse-label); font-weight: 600; letter-spacing: 0.06em; color: var(--l); cursor: pointer;
}
.kz::after { content: ''; position: absolute; inset: -6px; }
.kz { position: relative; }
.kz.ist-anker { anchor-name: --kz; }
.zeichen { text-decoration: none; margin-left: var(--raum-2); padding: 0 6px; border-radius: var(--radius-klein); background: var(--farbe-salbei-hell); color: var(--farbe-salbei-tief); font-size: var(--groesse-label); font-weight: 700; vertical-align: 2px; }
.platzhalter, .platzhalter-hinweis { color: var(--l); }
.platzhalter-hinweis { font-size: var(--groesse-klein); }
.platzhalter-hinweis::before { content: '◌ '; }
.kz-info {
  margin: 0; inset: auto; position-anchor: --kz; position-area: bottom span-left; position-try-fallbacks: flip-block, flip-inline;
  margin-top: var(--raum-2); width: min(300px, calc(100vw - 32px));
  padding: var(--raum-5); border: 0; border-radius: var(--radius-gross);
  background: var(--farbe-dunkle); color: var(--farbe-auf-dunkel);
  transition: opacity var(--ui-dauer-s) var(--ui-ease), overlay var(--ui-dauer-s) allow-discrete, display var(--ui-dauer-s) allow-discrete;
}
.kz-info.ohne-anker { inset: auto 16px 16px auto; position: fixed; }
.kz-info:not(:popover-open) { opacity: 0; }
@starting-style { .kz-info:popover-open { opacity: 0; } }
.kz-info__titel { font-weight: 600; margin-bottom: var(--raum-3); }
.kz-info ul { list-style: none; padding: 0; display: grid; gap: var(--raum-2); }
.kz-info li { display: grid; grid-template-columns: 2ch 1fr; gap: var(--raum-3); }

/* Legende als Dialog (dialog-modal-nativ) */
.dialog {
  width: min(640px, calc(100vw - 2 * var(--raster-rand))); max-height: min(80svh, 720px);
  padding: 0; border: 0; border-radius: var(--radius-gross);
  background: var(--farbe-grund); color: var(--farbe-text);
  --g: var(--farbe-grund); --t: var(--farbe-text); --l: var(--farbe-leise); --li: var(--farbe-linie); --fokus: var(--farbe-text);
  opacity: 1; transform: none;
  transition: opacity var(--ui-dauer-m) var(--ui-ease), transform var(--ui-dauer-l) var(--ui-ease), overlay var(--ui-dauer-l) allow-discrete, display var(--ui-dauer-l) allow-discrete;
}
.dialog:not([open]) { opacity: 0; transform: translateY(16px); transition-duration: calc(var(--ui-dauer-m) * var(--ui-aus-faktor)); transition-timing-function: var(--ui-ease-aus); }
@starting-style { .dialog[open] { opacity: 0; transform: translateY(16px); } }
.dialog::backdrop { background: rgb(20 30 28 / 0.55); transition: opacity var(--ui-dauer-m) var(--ui-ease), overlay var(--ui-dauer-l) allow-discrete, display var(--ui-dauer-l) allow-discrete; }
.dialog:not([open])::backdrop { opacity: 0; }
@starting-style { .dialog[open]::backdrop { opacity: 0; } }
.dialog__inhalt { padding: var(--raum-7); display: grid; gap: var(--raum-5); }
.dialog__kopf { display: flex; justify-content: space-between; align-items: start; gap: var(--raum-5); }
.legende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-2) var(--raum-6); }
.legende div { display: grid; grid-template-columns: 2.5ch 1fr; gap: var(--raum-3); padding-block: var(--raum-2); border-bottom: 1px solid var(--li); }
.legende dt { font-weight: 700; }
.legende dd { margin: 0; }
.schliessen { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--li); cursor: pointer; flex: none; }
.schliessen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.bildpaar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); padding-bottom: var(--raum-sektion); }
.bildpaar figure:first-child { grid-column: 2 / span 5; }
.bildpaar figure:last-child { grid-column: 8 / span 4; margin-top: var(--raum-10); }

/* ---------- Dunkler Streifen (Handlung) ---------- */
.dunkel { background: var(--farbe-dunkle); color: var(--farbe-auf-dunkel); --t: var(--farbe-auf-dunkel); --l: var(--farbe-auf-dunkel-leise); --li: var(--farbe-linie-dunkel); --fokus: var(--farbe-akzent); }
.streifen { padding-block: var(--raum-sektion); }
.streifen__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); row-gap: var(--raum-6); align-items: end; }
.streifen__raster > :first-child { grid-column: 1 / span 7; }
.streifen__raster > :last-child { grid-column: 8 / span 5; display: flex; flex-wrap: wrap; gap: var(--raum-3); justify-content: flex-end; }

/* ---------- Haus ---------- */
.ueber { padding-block: var(--raum-8) var(--raum-sektion); }
.ueber__satz { font-family: var(--schrift-headline); font-weight: 360; font-variation-settings: var(--fraunces-display); font-size: clamp(2rem, 1.1rem + 3.6vw, 4.5rem); line-height: 1.06; letter-spacing: -0.02em; max-width: 18ch; text-wrap: balance; }
.wortlicht { max-width: 28ch; }
.wortlicht.ist-geteilt .w { color: var(--farbe-text-blass, #80807C); }
@supports (animation-timeline: view()) {
  html[data-bewegung="voll"] .wortlicht.ist-geteilt .w { animation: wort-hell linear both; animation-timeline: view(); animation-range: cover calc(20% + var(--a) * 30%) cover calc(26% + var(--a) * 30%); }
}
html[data-bewegung="ruhig"] .wortlicht.ist-geteilt .w { color: inherit; }
@keyframes wort-hell { to { color: var(--t); } }
.breitbild { padding-bottom: var(--raum-sektion); }
.breitbild .blende { border-radius: 0; }
.breitbild .blende > img, .breitbild .blende > .platz { aspect-ratio: 16 / 9; }
html.js[data-bewegung="voll"] .breitbild .blende { clip-path: inset(0 var(--raster-rand) 0 var(--raster-rand) round var(--radius-gross)); }
html.js[data-bewegung="voll"] .breitbild .blende.ist-da { clip-path: inset(0 0 0 0 round 0); }

.leute { padding-block: var(--raum-sektion); }
.leute__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); row-gap: var(--raum-8); }
.leute__kopf { grid-column: 1 / span 4; display: grid; gap: var(--raum-4); align-content: start; }
.person { grid-column: span 4; display: grid; gap: var(--raum-4); }
.person:nth-of-type(2) { margin-top: var(--raum-10); }
.person__name { font-family: var(--schrift-headline); font-size: var(--groesse-h3); }
.person__rolle { color: var(--l); }

.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); padding-block: var(--raum-sektion); }
.split__medien { grid-column: 1 / span 6; position: sticky; top: calc(var(--kopf-hoehe) + var(--raum-6)); align-self: start; }
.split__text { grid-column: 8 / span 5; display: grid; gap: var(--raum-6); align-content: start; }

.wand { columns: 3; column-gap: var(--raster-spalt); padding-bottom: var(--raum-sektion); }
.wand li { break-inside: avoid; margin-bottom: var(--raster-spalt); }

/* Formular (validierung-nach-interaktion, button-zustaende) */
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-5) var(--raum-4); }
.feld { grid-column: 1 / -1; display: grid; gap: var(--raum-2); }
.feld--halb { grid-column: span 1; }
.feld label { font-weight: 560; font-size: var(--groesse-klein); }
.feld input, .feld textarea {
  width: 100%; min-height: 48px; padding: var(--raum-3) var(--raum-4);
  border: 0; border-radius: var(--radius-klein); background: var(--flaeche); color: var(--t);
  box-shadow: inset 0 -1px 0 var(--farbe-linie-stark);
  transition: box-shadow var(--ui-dauer-s) var(--ui-ease);
}
.feld input:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.feld [aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--farbe-fehler); }
.feld__fehler { color: var(--farbe-fehler); font-size: var(--groesse-klein); font-weight: 560; }
.formular__hinweis, .formular__meldung { grid-column: 1 / -1; font-size: var(--groesse-klein); }
.formular__meldung:empty { display: none; }
.formular__meldung.ist-fehler { color: var(--farbe-fehler); }
.formular .knopf { justify-self: start; }

/* Zwei-Klick (termin-buchung-zwei-klick, karte-zwei-klick) */
.zweiklick { position: relative; border-radius: var(--radius-gross); background: var(--flaeche); overflow: hidden; }
.zweiklick__platz { padding: var(--raum-6); display: grid; gap: var(--raum-4); }
.zweiklick__knoepfe { display: flex; flex-wrap: wrap; gap: var(--raum-4); align-items: center; }
.zweiklick iframe { display: block; width: 100%; height: 560px; border: 0; background: #fff; }
.zweiklick.ist-geladen .zweiklick__platz { display: none; }
.zweiklick__entfernen { position: absolute; top: var(--raum-3); right: var(--raum-3); }
.zweiklick__quelle { position: absolute; left: var(--raum-3); bottom: var(--raum-3); padding: 2px 8px; background: var(--farbe-grund); color: var(--farbe-text); border-radius: var(--radius-klein); font-size: var(--groesse-label); }
.zweiklick--karte { aspect-ratio: 3 / 2; }
.zweiklick--karte .zweiklick__platz { padding: 0; height: 100%; }
.zweiklick--karte img { width: 100%; height: 100%; object-fit: cover; }
.zweiklick--karte iframe { height: 100%; position: absolute; inset: 0; }
.zweiklick__auflage { position: absolute; left: var(--raum-5); bottom: var(--raum-5); display: grid; gap: var(--raum-2); justify-items: start; padding: var(--raum-4); border-radius: var(--radius-gross); background: var(--farbe-dunkle); color: var(--farbe-auf-dunkel); --fokus: var(--farbe-akzent); }

/* ---------- Reservieren / Anfahrt ---------- */
.block { padding-block: var(--raum-8); border-top: 1px solid var(--li); }
.block__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); row-gap: var(--raum-6); }
.block__titel { grid-column: 1 / span 4; }
.block__inhalt { grid-column: 6 / span 7; display: grid; gap: var(--raum-5); align-content: start; }
.adresse-gross { font-family: var(--schrift-headline); font-weight: 320; font-variation-settings: var(--fraunces-display); font-size: clamp(3rem, 1.4rem + 7vw, 8rem); line-height: 0.95; letter-spacing: -0.025em; }
.liste-ruhig { display: grid; gap: var(--raum-2); }
.liste-ruhig li { padding-left: var(--raum-5); position: relative; }
.liste-ruhig li::before { content: ''; position: absolute; left: 0; top: 0.68em; width: 10px; height: 1px; background: currentColor; }
.zeiten-status { font-weight: 600; }

/* ---------- Fuß ---------- */
.fuss { background: var(--farbe-dunkle); color: var(--farbe-auf-dunkel); --t: var(--farbe-auf-dunkel); --l: var(--farbe-auf-dunkel-leise); --li: var(--farbe-linie-dunkel); --fokus: var(--farbe-akzent); overflow: hidden; }
.fuss__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); row-gap: var(--raum-7); padding-block: var(--raum-9) var(--raum-7); }
.fuss__spalte { grid-column: span 3; display: grid; gap: var(--raum-3); align-content: start; font-size: var(--groesse-klein); }
.fuss__spalte:first-child { grid-column: span 3; }
.fuss__spalte h2 { font-family: var(--schrift-text); font-size: var(--groesse-label); font-weight: 600; letter-spacing: var(--laufweite-label); text-transform: uppercase; font-variation-settings: 'FLAR' 80; color: var(--l); }
.fuss__spalte ul { display: grid; gap: var(--raum-1); }
.fuss__spalte a { display: inline-flex; min-height: 32px; align-items: center; }
.fuss__uhr { font-size: var(--groesse-gross); font-family: var(--schrift-headline); line-height: 1.2; }
.fuss__marke {
  display: block; padding: 0 var(--raster-rand) 0.14em;
  font-family: var(--schrift-headline); font-weight: 300; font-variation-settings: var(--fraunces-display);
  font-size: var(--groesse-marke); line-height: 0.9; letter-spacing: var(--laufweite-display);
  white-space: nowrap;
  color: var(--farbe-auf-dunkel);
}
.fuss__marke i { font-style: italic; font-weight: 300; }
.fuss__knopf { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; min-height: 32px; }
.schalter { display: inline-flex; align-items: center; gap: var(--raum-3); }
.schalter__spur { width: 34px; height: 20px; border-radius: var(--radius-button); box-shadow: inset 0 0 0 1.5px currentColor; position: relative; flex: none; }
.schalter__spur::after { content: ''; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: currentColor; transition: transform var(--ui-dauer-s) var(--ui-ease); }
.schalter[aria-pressed="true"] .schalter__spur::after { transform: translateX(14px); }
.beispiel { background: #111; color: #f5f5f5; font: 14px/1.5 system-ui, sans-serif; padding: 14px 20px; text-align: center; }
.beispiel a { color: #9fe3ec; }

/* ---------- Telefon: Leiste und Blatt (mobile-bottom-navigation, basis) ---------- */
.leiste { display: none; }
.blatt { display: none; }
@media (max-width: 859px) {
  body { padding-bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom)); }
  .leiste {
    display: grid; grid-template-columns: 1.4fr repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--farbe-grund); color: var(--farbe-text); box-shadow: 0 -1px 0 var(--farbe-linie);
    --fokus: var(--farbe-text);
  }
  .leiste a, .leiste button { display: grid; place-items: center; align-content: center; gap: 2px; border: 0; background: none; text-decoration: none; font-size: 0.75rem; font-weight: 600; min-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--druck-aus) var(--ease-feder); }
  .leiste a:active, .leiste button:active { transform: scale(var(--druck-skala)); transition-duration: var(--druck-ein); }
  .leiste svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .leiste .leiste__haupt { background: var(--farbe-dunkle); color: var(--farbe-auf-dunkel); --fokus: var(--farbe-akzent); }
  .blatt[open] {
    display: block; position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 86svh; margin: 0;
    padding: var(--raum-6) var(--raster-rand) calc(var(--raum-6) + env(safe-area-inset-bottom));
    border: 0; border-radius: var(--radius-gross) var(--radius-gross) 0 0;
    background: var(--farbe-dunkle); color: var(--farbe-auf-dunkel);
    --t: var(--farbe-auf-dunkel); --l: var(--farbe-auf-dunkel-leise); --li: var(--farbe-linie-dunkel); --fokus: var(--farbe-akzent);
    clip-path: inset(0 0 0 0 round var(--radius-gross) var(--radius-gross) 0 0);
    transition: clip-path var(--ui-dauer-l) var(--ui-ease);
  }
  @starting-style { .blatt[open] { clip-path: inset(100% 0 0 0 round var(--radius-gross) var(--radius-gross) 0 0); } }
  .blatt::backdrop { background: rgb(20 30 28 / 0.5); }
  .blatt__kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--raum-5); }
  .blatt__titel { font-family: var(--schrift-headline); font-size: 1.75rem; }
  .blatt__nav { display: grid; }
  .blatt__nav a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-bottom: 1px solid var(--li); text-decoration: none; font-family: var(--schrift-headline); font-size: 1.75rem; }
  .blatt__nav a[aria-current="page"]::after { content: 'hier'; font-family: var(--schrift-text); font-size: var(--groesse-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--l); }
  .blatt__status { margin-top: var(--raum-5); color: var(--l); }
  .schliessen { color: inherit; }
}

/* ---------- Umbrüche ---------- */
@media (max-width: 1100px) {
  .fuss__spalte { grid-column: span 6; }
  .fuss__spalte:first-child { grid-column: span 6; }
}
@media (max-width: 859px) {
  :root { --kopf-hoehe: 60px; }
  .kopf__nav, .kopf__reservieren { display: none; }
  .kopf__rechts { margin-left: auto; }
  .marke { font-size: 1.375rem; }
  .status { padding: 0 var(--raum-3); font-size: 0.875rem; }
  .held__raster { grid-template-columns: 1fr; padding-right: 0; min-height: 0; }
  .held__bild { grid-column: 1; aspect-ratio: 4 / 5; max-height: 72svh; width: 100%; }
  .held__text { grid-column: 1; padding: var(--raum-6) var(--raster-rand) var(--raum-7); }
  .zeit { min-height: 0; }
  .zeit__raster { grid-template-columns: 1fr; row-gap: var(--raum-6); }
  .zeit__text, .zeit--rechts .zeit__text { grid-column: 1; grid-row: 1; position: relative; top: 0; }
  .zeit__medien, .zeit--rechts .zeit__medien { grid-column: 1; grid-row: 2; }
  .weite { height: 180svh; }
  .weite__bild { width: 64vw; height: 40svh; }
  .heute__text, .heute__bild { grid-column: 1 / -1; }
  .heute__raster { min-height: 0; }
  .seitenkopf__titel, .seitenkopf__bild, .seitenkopf__aktion { grid-column: 1 / -1; justify-content: flex-start; }
  .rubrik { grid-column: 1 / -1; }
  .gang__bild { grid-column: 1 / -1; position: relative; top: 0; margin-bottom: var(--raum-6); }
  .gang__bild .blende > .platz { aspect-ratio: 3 / 2; }
  .gang__liste { grid-column: 1 / -1; }
  .karte-kopf .seitenkopf__bild { display: none; }
  .gang { padding-block: var(--raum-8); }
  .rubrik--breit .gerichte { columns: 1; }
  .bildpaar figure:first-child, .bildpaar figure:last-child { grid-column: 1 / -1; margin-top: 0; }
  .bildpaar { row-gap: var(--raum-5); }
  .streifen__raster > :first-child, .streifen__raster > :last-child { grid-column: 1 / -1; justify-content: flex-start; }
  .leute__kopf, .person { grid-column: 1 / -1; }
  .person:nth-of-type(2) { margin-top: 0; }
  .split__medien { grid-column: 1 / -1; position: relative; top: 0; margin-bottom: var(--raum-6); }
  .split__text { grid-column: 1 / -1; }
  .wand { columns: 2; }
  .block__titel, .block__inhalt { grid-column: 1 / -1; }
  .fuss__spalte, .fuss__spalte:first-child { grid-column: 1 / -1; }
  .legende { grid-template-columns: 1fr; }
  .reiterleiste__rechts { display: none; }
}
@media (max-width: 480px) {
  .reiter__zeit { display: none; }
  .status { padding: 0 10px; gap: 6px; font-size: 0.8125rem; }
  .marke { font-size: 1.25rem; }
  .kopf__innen { gap: var(--raum-3); }
  .formular { grid-template-columns: 1fr; }
  .feld--halb { grid-column: 1; }
  .status__ort { display: none; }
}
@media (max-width: 400px) {
  .status__zeit { display: none; }
  .anruf { font-size: clamp(2.25rem, 11vw, 3rem); }
}

/* Kontrastmodus (kontrastmodus-forced-colors) */
@media (forced-colors: active) {
  .knopf, .status, .reiter__tab, .kz, .schliessen { border: 1px solid ButtonText; }
  .reiter__tab[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .blende, .platz, .zweiklick { border: 1px solid CanvasText; }
  .status__punkt { forced-color-adjust: none; background: CanvasText; }
  .wisch { display: none !important; }
}

/* Bewegung reduzieren: alles steht */
html[data-bewegung="ruhig"] *, html[data-bewegung="ruhig"] *::before, html[data-bewegung="ruhig"] *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-bewegung="voll"]) *, html:not([data-bewegung="voll"]) *::before { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Druck */
@media print {
  .kopf, .leiste, .fuss, .reiterleiste, .beispiel, .wisch, .weite { display: none !important; }
  .panel[hidden] { display: block !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Textseiten (Impressum, Datenschutz, Barrierefreiheit, 404) ---------- */
.textseite { padding-block: clamp(var(--raum-7), 6vw, var(--raum-9)) var(--raum-sektion); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--raster-spalt); }
.textseite h1 { grid-column: 1 / -1; font-size: clamp(2.75rem, 1.4rem + 5vw, 6rem); line-height: 0.98; letter-spacing: -0.02em; margin-bottom: var(--raum-8); }
.textseite__inhalt { grid-column: 5 / span 7; display: grid; gap: var(--raum-4); }
.textseite__inhalt h2 { margin-top: var(--raum-6); }
.kasten { padding: var(--raum-5); border-radius: var(--radius-gross); background: var(--flaeche); }
.wahl { display: flex; gap: var(--raum-3); align-items: center; min-height: 44px; }
.wahl input { width: 20px; height: 20px; accent-color: var(--farbe-dunkle); }
@media (max-width: 859px) { .textseite__inhalt { grid-column: 1 / -1; } }

/* Im dunklen Raum wird die Haupthandlung im Kopf zur Senf-Pille (sonst dunkel auf dunkel) */
html[data-ton="dunkel"] .kopf .knopf:not(.knopf--kontur) { --k-grund: var(--farbe-akzent); --k-text: var(--farbe-dunkle); --k-kreis: var(--farbe-dunkle); }
html[data-ton="dunkel"] .kopf .knopf:not(.knopf--kontur) .knopf__kreis { color: var(--farbe-akzent); }