/* Maisto-Websites — gemeinsames Stilblatt aller Seiten (Café und Catering).
   Herkunft: assets/site.css der Vorlage (siehe README.md), Aufbau und
   Maße unverändert übernommen. Farben stehen hier NICHT: jede Seite bringt
   ihre Palette in assets/farben.css mit, dieses Blatt liest nur Tokens.
   Geändert wird HIER, nicht in den einzelnen Seiten — ein Fehler im Kern
   wird einmal behoben und gilt für beide Seiten.

   Tokens, die farben.css setzen MUSS:
     --n-grund --n-tief --n-schrift --n-hell --n-still      (Nacht, dunkel)
     --t-grund --t-zweit --t-schrift --t-still              (Tag, hell)
     --akzent --akzent-hover --akzent-schrift --akzent-hell  --akzent-tag
     --zweit (Etikett auf dunkel)  --zweit-tag (Etikett auf hell)
     --n-grund-rgb --n-hell-rgb --n-schrift-rgb --t-schrift-rgb
     --akzent-rgb --zweit-rgb --schatten-rgb               (Tripel „r, g, b“)
     --buehne-leer   (Fläche der Startbühne, solange kein Foto da ist)
     --monogramm     (Zeichen der Kopfzeile und des Hintergrundzeichens, z. B. "M") */

/* ═══════════════════ Grundlage (aus heros/_tokens.css der Vorlage) ═══════════════════ */

:root{
  /* Abstände: Vierteltakt auf 8 px */
  --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;   --s-6: 1.5rem;
  --s-8: 2rem;   --s-12: 3rem;  --s-16: 4rem;  --s-24: 6rem;

  /* Bewegung */
  --kurve-aus:  cubic-bezier(0.23, 1, 0.32, 1);
  --kurve-beid: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; display: block; }

/* Alles Drückbare gibt sofort Rückmeldung */
:where(a[data-knopf], button):active { transform: scale(.97); }
:where(a[data-knopf], button) { transition: transform 160ms var(--kurve-aus); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════ Seitenaufbau ═══════════════════
   Oben die Bühne, darunter wechseln sich Tag und Nacht ab: hell, wo etwas
   gelesen wird, dunkel, wo sich der Ort zeigt. Der Name steht genau einmal
   groß — im h1. Die Kopfzeile trägt stattdessen das Monogramm. */

/* :where(:root) hat die Spezifität 0 — jede Seite kann diese Werte in ihrer farben.css
   oder seite.css mit einfachem :root{ … } überschreiben, egal in welcher Reihenfolge
   die Blätter geladen werden. */
:where(:root){
  /* Schriftregeln (Ausbau 14.10.2026):
     --dis (Cormorant Garamond) NUR für H1, H2 und große Zitate/Sätze.
     H3, kleine Titel, Gerichtnamen, Etiketten, Knöpfe: --txt (Manrope).
     Familien und Gewichte sind Tokens, damit eine Seite sie ändern kann. */
  --dis:  "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --txt:  "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;
  --dis-gewicht: 500;              /* H1/H2/Zitate — Cormorant 400 ist zu zart */
  --h3-familie: var(--txt);        /* kleine Überschriften, Kacheltitel, Formulartitel */
  --h3-gewicht: 600;
  --h3-sperrung: 0;
  --zahl-familie: var(--dis);      /* große Zahlen (Eckdaten, Wegzahlen) */
  --etikett-gewicht: 600;          /* Etiketten in Versalien: 11,5–13 px, 600, .16–.18em */

  /* Linien aus der Schriftfarbe abgeleitet — so passen sie zu jeder Palette */
  --n-linie:  rgba(var(--n-schrift-rgb), .18);
  --n-linie-s:rgba(var(--n-schrift-rgb), .32);
  --t-linie:  rgba(var(--t-schrift-rgb), .14);
  --t-linie-s:rgba(var(--t-schrift-rgb), .32);

  --rand: clamp(1.15rem, 4.5vw, 4.25rem);
  --bahn: 82rem;

  /* Eine Leiter statt zwanzig Einzelwerte. Gerundet bei 1440 px:
     11 · 14 · 16 · 20 · 22 · 35 · 52 · 68 · 80 */
  --f-mikro: clamp(.72rem,  .70rem + .10vw, .78rem);   /* Etiketten in Versalien (11,5–12,5 px) */
  --f-nav:   clamp(.76rem,  .72rem + .20vw, .875rem);  /* Navigation, Ortzeile   */
  --f-klein: clamp(.80rem,  .77rem + .14vw, .86rem);   /* Kleingedrucktes        */
  --f-text:  clamp(.94rem,  .91rem + .16vw, 1rem);     /* Fließtext — Café: ≥ 1.0625rem (17 px) */
  --f-lead:  clamp(1.05rem, .98rem + .38vw, 1.25rem);  /* Vorlauf, Hero-Absatz   */
  --f-h3:    clamp(1.10rem, 1rem   + .45vw, 1.40rem);  /* kleine Überschrift     */
  --f-zahl:  clamp(1.50rem, 1.10rem + 1.4vw, 2.20rem); /* Eckdaten               */
  --f-h2:    clamp(2rem,    1.15rem + 2.9vw, 3.25rem);
  --f-gross: clamp(2.8rem,  1.80rem + 3.6vw, 4.25rem); /* große Wegzahlen        */
  --f-h1:    clamp(2.6rem,  1.50rem + 4.9vw, 5rem);

  /* Zwei Sperrungen statt sechs */
  --sp-etikett: .17em;
  --sp-nav: .1em;
}

html{ color-scheme: dark; }

body{
  font-family: var(--txt);
  font-size: 100%;
  line-height: 1.55;
  color: var(--n-hell);
  background: var(--n-grund);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.kopf-innen > *, .buehne > *,
.band-innen > *, .bahn > *{ min-width: 0; }

.sprung{
  position: absolute; left: -9999px; top: 0; z-index: 99;
  display: inline-flex; align-items: center;
  min-height: 2.85rem; padding: .8rem 1.2rem;
  background: var(--n-hell); color: var(--t-schrift);
  font-size: var(--f-klein); font-weight: 600; text-decoration: none;
}
.sprung:focus{ left: 1rem; top: 1rem; }

:where(a, button, input, select, textarea):focus-visible{
  outline: 2px solid var(--zweit);
  outline-offset: 3px;
}
.teil--tag :where(a, button, input, select, textarea):focus-visible,
.teil--tag-zweit :where(a, button, input, select, textarea):focus-visible{
  outline-color: var(--akzent-tag);
}

/* ══════════════════════════ Kopfzeile ══════════════════════════ */

/* Aufbau (Ausbau 14.10.2026):
   Telefon (< 48em):  Monogramm · Kopf-Knopf (Hauptaktion) · Knopf „Menü“ (<details>,
                      öffnet eine Liste aller Gruppen und Seiten unter der Kopfzeile)
   48–64em:           Monogramm · Kopf-Knöpfe, darunter die Leiste
   ab 64em:           Monogramm · Leiste · Kopf-Knöpfe in einer Zeile
   Gruppen der Leiste sind <details>: ohne JavaScript bedienbar, das Feld klappt unter
   dem Gruppennamen auf. assets/menue.js schließt nur ab (andere Gruppen, Klick daneben, Esc). */
.kopf{
  position: relative; z-index: 30;
  border-bottom: 1px solid var(--n-linie);
  background: var(--n-grund);
}
.kopf-innen{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .3rem .6rem;
  padding: .7rem var(--rand);
  max-width: var(--bahn);
  margin-inline: auto;
}

/* Das Monogramm statt des Namens (Token --monogramm in farben.css,
   Zeichen im HTML aus SITE["monogramm"]). Der volle Name steht auf jeder
   Seite genau einmal, im h1. */
.marke{
  grid-column: 1; grid-row: 1; justify-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  margin-block: -.4rem;
  font-family: var(--dis);
  font-size: 1.7rem; line-height: 1;
  color: var(--akzent-hell);
  text-decoration: none;
  transition: color 200ms var(--kurve-aus);
}
.marke:hover{ color: var(--n-hell); }
.marke span{ transform: translateY(-.06em); }

.kopf-nav{ display: none; }
.wege-kopf{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 1.05rem; margin: 0; padding: 0; list-style: none;
}
.wege-kopf a,
.gruppe-auf > summary{
  display: inline-flex; align-items: center;
  padding-block: .85rem; margin-block: -.6rem;
  font-size: var(--f-nav);
  font-weight: 500; letter-spacing: var(--sp-nav); text-transform: uppercase;
  color: var(--n-hell); text-decoration: none;
}
.wege-kopf a:hover,
.gruppe-auf > summary:hover{
  text-decoration: underline;
  text-decoration-color: var(--zweit);
  text-underline-offset: .3em;
}
/* Wo man ist: die Seite (aria-current) und die Gruppe, in der sie steht. */
.wege-kopf a[aria-current="page"],
.gruppe--aktiv > .gruppe-auf > summary{
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--zweit); text-underline-offset: .3em;
}

/* ── Gruppe: Name mit Pfeil, Feld darunter ── */
.gruppe{ position: relative; }
.gruppe-auf > summary{ list-style: none; cursor: pointer; gap: .45rem; }
.gruppe-auf > summary::-webkit-details-marker{ display: none; }
.pfeil{
  display: inline-block; width: .42em; height: .42em; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-.18em) rotate(45deg);
  transition: transform 200ms var(--kurve-aus);
}
.gruppe-auf[open] > summary .pfeil{ transform: translateY(.08em) rotate(-135deg); }
.gruppe-feld{
  position: absolute; z-index: 40; top: calc(100% + .7rem); left: -1.1rem;
  min-width: 15.5rem; margin: 0; padding: .45rem 0; list-style: none;
  background: var(--n-tief); border: 1px solid var(--n-linie-s); border-top: 1px solid var(--zweit);
  box-shadow: 0 1.2rem 2.6rem rgba(var(--schatten-rgb), .38);
}
.wege-kopf > li:last-child .gruppe-feld,
.gruppe-feld--rechts{ left: auto; right: -1.1rem; }
.gruppe-feld a{
  display: flex; min-height: 2.85rem; margin: 0; padding: .7rem 1.15rem;
  font-size: var(--f-klein); font-weight: 500; letter-spacing: .02em; text-transform: none;
  white-space: nowrap;
}
.gruppe-feld a:hover{ background: rgba(var(--n-hell-rgb), .06); }

/* ── Kopf-Knöpfe: auf dem Telefon nur der erste (Hauptaktion) ── */
.kopf-tun{ grid-column: 3; grid-row: 1; display: flex; gap: .55rem; }
.kopf-tun a{
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: .45rem .8rem; border: 1px solid var(--n-linie-s); border-radius: 2px;
  font-size: var(--f-klein); font-weight: 600; letter-spacing: .03em;
  color: var(--n-hell); text-decoration: none; white-space: nowrap;
  transition: border-color 200ms var(--kurve-aus), background-color 200ms var(--kurve-aus), transform 160ms var(--kurve-aus);
}
.kopf-tun a:hover{ border-color: var(--n-hell); }
.kopf-tun a:not(:first-child){ display: none; }
.kopf-tun a.kopf-knopf--voll{ background: var(--akzent); border-color: var(--akzent); color: var(--akzent-schrift); }
.kopf-tun a.kopf-knopf--voll:hover{ background: var(--akzent-hover); border-color: var(--akzent-hover); }

/* ── Menü des Telefons ── */
.menue{ grid-column: 4; grid-row: 1; }
.menue-knopf{
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem;
  padding: .45rem .75rem; border: 1px solid var(--n-linie-s); border-radius: 2px;
  font-size: var(--f-klein); font-weight: 600; letter-spacing: .03em; color: var(--n-hell);
}
.menue-knopf::-webkit-details-marker{ display: none; }
.menue-zeichen{ position: relative; display: inline-block; width: 1rem; height: 1px;
  background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
.menue[open] .menue-zeichen{ box-shadow: none; transform: rotate(45deg); }
.menue[open] .menue-zeichen::after{ content: ""; position: absolute; inset: 0;
  background: currentColor; transform: rotate(90deg); }
.menue-feld{
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  max-height: calc(100svh - 4.4rem); overflow-y: auto; overscroll-behavior: contain;
  padding: .4rem var(--rand) 1.6rem;
  background: var(--n-tief); border-bottom: 1px solid var(--n-linie-s);
  box-shadow: 0 1.4rem 2.6rem rgba(var(--schatten-rgb), .4);
}
.menue-liste, .menue-liste ul{ list-style: none; margin: 0; padding: 0; }
.menue-liste a{
  display: flex; align-items: center; min-height: 3rem;
  border-bottom: 1px solid var(--n-linie);
  font-size: var(--f-lead); color: var(--n-hell); text-decoration: none;
}
.menue-liste a[aria-current="page"]{ text-decoration: underline; text-decoration-color: var(--zweit);
  text-underline-offset: .3em; }
.menue-gruppe-name{
  display: block; padding: 1.3rem 0 .35rem;
  font-size: var(--f-mikro); font-weight: var(--etikett-gewicht);
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--zweit);
}
.menue-gruppe ul a{ padding-left: .9rem; }
.menue-tun a{ margin-top: 1.2rem; border: 1px solid var(--n-linie-s); justify-content: center;
  font-size: var(--f-text); font-weight: 600; }

@media (min-width: 48em){
  .kopf-innen{ grid-template-columns: auto minmax(0, 1fr) auto; }
  .menue{ display: none; }
  .kopf-nav{ display: block; grid-column: 1 / -1; grid-row: 2; padding-top: .25rem; }
  .kopf-tun a:not(:first-child){ display: inline-flex; }
}

.sprache{
  grid-column: 2; grid-row: 1; justify-self: end;
  display: flex; align-items: center; gap: .45rem;
  font-size: var(--f-nav); font-weight: 600; letter-spacing: var(--sp-nav);
}
.sprache a{
  color: var(--n-still); text-decoration: none;
  display: inline-flex; align-items: center;
  padding: .82rem .4rem; margin: -.52rem -.3rem;
}
.sprache a[aria-current]{ color: var(--n-hell); }
.sprache a:hover{ color: var(--n-hell); }
.sprache span{ color: var(--n-linie-s); }

/* ══════════════════════════ Bühne ══════════════════════════ */

.buehne{
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-content: end;
  min-height: 28rem;
  min-height: calc(100svh - 10.5rem);
}

.foto{
  position: absolute; inset: 0; z-index: 0; margin: 0;
  overflow: hidden; background: var(--n-grund);
  animation: auftauchen 800ms var(--kurve-aus) both;
}

/* Foto und Film liegen deckungsgleich und tragen denselben Ausschnitt.
   Vergrößerung und Ursprung kommen je Bühne aus bausteine.buehne(zoom=…,
   ursprung=…) als --foto-zoom / --foto-ursprung. Ohne Angabe: kein Zoom.
   Die Größenangabe im srcset rechnet denselben Faktor mit, sonst wird das
   Foto hochgerechnet und weich. */
.foto img,
.foto .film{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(var(--foto-zoom, 1)) translateY(var(--foto-schub, 0%));
  transform-origin: var(--foto-ursprung, 50% 50%);
}

/* Bühne ohne Foto: solange die Bilder nicht ausgewählt sind, steht dort
   eine Fläche aus der Palette (Token --buehne-leer) mit dem Monogramm als
   Kontur. Sie trägt keinen Text und ist für Vorleser unsichtbar. */
.foto--leer{ background: var(--buehne-leer, var(--n-tief)); }
.foto--leer::after{
  content: var(--monogramm, "");
  position: absolute; right: 6%; top: 4%;
  font-family: var(--dis); font-weight: 400; line-height: 1;
  font-size: clamp(12rem, 52vw, 30rem);
  color: transparent;
  -webkit-text-stroke: .012em rgba(var(--n-hell-rgb), .42);
  text-stroke: .012em rgba(var(--n-hell-rgb), .42);
}
/* Der Film liegt oben. Sein Standbild ist dasselbe Foto — beim
   Übergang springt nichts, bis dahin sieht man das Foto darunter. */
.foto .film{
  z-index: 1; opacity: 0;
  animation: filmauf 1100ms var(--kurve-aus) 260ms both;
}

.schleier{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(var(--n-grund-rgb), .55) 0%, rgba(var(--n-grund-rgb), .2) 6%, rgba(var(--n-grund-rgb), 0) 14%);
}

/* Hinweis auf den Film. Bewusst eine Zeile, kein Chip — ein Chip liest
   sich wie „das Bild ist KI". Das Foto ist echt, bewegt wird nur das
   Licht. Verschwindet zusammen mit dem Film, wenn keine Bewegung
   gewuenscht ist: dann gibt es nichts zu kennzeichnen. */
.ki-hinweis{
  position: absolute; z-index: 3;
  top: .55rem; right: var(--rand);
  margin: 0;
  font-size: var(--f-mikro); font-weight: var(--etikett-gewicht);
  letter-spacing: var(--sp-etikett); text-transform: uppercase;
  color: rgba(var(--n-schrift-rgb), .82);
  text-shadow: 0 1px 4px rgba(var(--schatten-rgb), .75);
}

.satz{
  position: relative; z-index: 2;
  padding: 3.6rem var(--rand) clamp(1.1rem, 3vw, 3rem);
  max-width: 44rem;
  background: linear-gradient(to top,
      rgba(var(--n-grund-rgb), .97) 0%, rgba(var(--n-grund-rgb), .96) 72%, rgba(var(--n-grund-rgb), .88) 85%,
      rgba(var(--n-grund-rgb), .5) 93%, rgba(var(--n-grund-rgb), .15) 98%, rgba(var(--n-grund-rgb), 0) 100%);
}
.satz > *{ animation: heben 620ms var(--kurve-aus) both; }
.satz > *:nth-child(1){ animation-delay:  60ms; }
.satz > *:nth-child(2){ animation-delay: 140ms; }
.satz > *:nth-child(3){ animation-delay: 220ms; }
.satz > *:nth-child(4){ animation-delay: 300ms; }
.satz > *:nth-child(5){ animation-delay: 380ms; }

h1{ margin: 0 0 .8rem; font-weight: 400; }
h1 .name{
  display: block;
  font-family: var(--dis); font-weight: var(--dis-gewicht);
  font-size: var(--f-h1);
  line-height: .94; letter-spacing: -.005em;
  color: var(--n-hell);
}
h1 .ort{
  /* Cormorant hat tiefe Unterlängen (g, p): mehr Luft als bei Instrument Serif. */
  display: block; margin-top: .85rem; max-width: 46ch;
  font-family: var(--txt);
  font-size: var(--f-nav);
  font-weight: 500; line-height: 1.45;
  letter-spacing: var(--sp-nav); text-transform: uppercase;
  color: var(--zweit);
}

.unter{
  margin: 0 0 1.1rem; max-width: 42ch;
  font-size: var(--f-lead);
  line-height: 1.5; color: var(--n-hell);
}

.tun{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .7rem; }

.knopf{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.85rem; padding: .7rem 1.15rem;
  border: 1px solid transparent; border-radius: 2px;
  font-family: var(--txt);
  font-size: var(--f-text);
  font-weight: 600; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
}
.knopf--rot{
  background: var(--akzent); border-color: var(--akzent); color: var(--akzent-schrift);
  transition: background-color 200ms var(--kurve-aus), transform 160ms var(--kurve-aus);
}
.knopf--rot:hover{ background: var(--akzent-hover); border-color: var(--akzent-hover); }
.knopf--linie{
  background: transparent; border-color: var(--n-linie-s); color: var(--n-hell);
  transition: border-color 200ms var(--kurve-aus), color 200ms var(--kurve-aus), transform 160ms var(--kurve-aus);
}
.knopf--linie:hover{ border-color: var(--n-hell); color: var(--n-hell); }
.teil--tag .knopf--linie,
.teil--tag-zweit .knopf--linie{ border-color: var(--t-linie-s); color: var(--t-schrift); }
.teil--tag .knopf--linie:hover,
.teil--tag-zweit .knopf--linie:hover{ border-color: var(--t-schrift); }

.dazu{ margin: 0; font-size: var(--f-klein); color: var(--n-still); }
/* Auf hellem Grund war das Sandton-Grau bei 1,6:1 praktisch unsichtbar. */
.teil--tag .dazu, .teil--tag-zweit .dazu{ color: var(--t-still); }



/* ══════════════════════ Band unter der Bühne ══════════════════════ */

.band{
  background: var(--n-tief);
  border-top: 1px solid var(--n-linie);
  border-bottom: 1px solid var(--n-linie);
  font-size: var(--f-klein);
}
.band-innen{
  max-width: var(--bahn); margin-inline: auto;
  padding: .9rem var(--rand);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.4rem;
  color: var(--n-still);
}
.band-innen b{ color: var(--zweit); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; font-size: var(--f-mikro); }
.band-innen .woche{ display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 0; }
.band-innen p{ margin: 0; }

/* ══════════════════════════ Abschnitte ══════════════════════════ */

.teil{ padding: clamp(3.2rem, 8vw, 7rem) 0; }
.teil--nacht{ background: var(--n-grund); color: var(--n-hell); }
.teil--tag{ background: var(--t-grund); color: var(--t-schrift); }
.teil--tag-zweit{ background: var(--t-zweit); color: var(--t-schrift); }

.bahn{ max-width: var(--bahn); margin-inline: auto; padding-inline: var(--rand); }

.eyebrow{
  margin: 0 0 1rem; display: flex; align-items: center; gap: .8rem;
  font-size: var(--f-mikro); font-weight: var(--etikett-gewicht); letter-spacing: .18em; text-transform: uppercase;
  color: var(--zweit);
}
.teil--tag .eyebrow, .teil--tag-zweit .eyebrow{ color: var(--zweit-tag); }
.eyebrow::after{ content: ""; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .3; }

.titel{
  margin: 0 0 1.1rem; max-width: 20ch; text-wrap: balance;
  font-family: var(--dis); font-weight: var(--dis-gewicht);
  font-size: var(--f-h2);
  line-height: 1.02; letter-spacing: -.01em;
}
.vorlauf{
  margin: 0 0 clamp(2rem, 4vw, 3.2rem); max-width: 54ch; text-wrap: pretty;
  font-size: var(--f-lead); line-height: 1.55;
}
.teil--nacht .vorlauf{ color: var(--n-still); }
.teil--tag .vorlauf, .teil--tag-zweit .vorlauf{ color: var(--t-still); }

/* ── Feiern ─────────────────────────────────────────────────────── */

.feier{ display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

.eck{ margin: 0 0 2rem; display: grid; gap: 0; border-top: 1px solid var(--t-linie); }
.eck > div{
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline;
  gap: .4rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--t-linie);
}
.eck dt{
  font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still);
}
.eck dd{
  margin: 0; text-align: right;
  font-family: var(--zahl-familie); font-weight: var(--dis-gewicht); font-size: var(--f-zahl);
  line-height: 1;
}
.eck dd small{
  display: block; margin-top: .35rem;
  font-family: var(--txt); font-size: var(--f-klein); line-height: 1.5;
  letter-spacing: 0; color: var(--t-still); max-width: 38ch; margin-left: auto;
  text-wrap: pretty;
}

.kondition{ list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.kondition li{ display: grid; grid-template-columns: 8.5rem minmax(0,1fr); gap: .1rem .9rem; }
.kondition span:first-child{
  font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still); padding-top: .18rem;
}
.kondition span:last-child{ font-size: var(--f-text); line-height: 1.5; }

.formular{
  display: grid; gap: .8rem; align-content: start;
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--t-zweit); border: 1px solid var(--t-linie);
}
.teil--tag-zweit .formular{ background: var(--t-grund); }
.formular h3{
  margin: 0; font-family: var(--h3-familie); font-weight: var(--h3-gewicht);
  letter-spacing: var(--h3-sperrung); font-size: var(--f-h3); line-height: 1.2;
}
.formular .hinweis{ margin: 0 0 .3rem; font-size: var(--f-klein); line-height: 1.5; color: var(--t-still); }
/* Der Hinweissatz im Formular ist kein .hinweis-Kasten (Klasse doppelt belegt). */
.formular .hinweis{ padding: 0; border: 0; background: none; }

/* Honigtopf gegen selbsttätige Absender. Nicht display:none — das erkennen viele
   Skripte; stattdessen aus dem sichtbaren Bereich geschoben. Menschen sehen und
   erreichen das Feld nicht (aria-hidden, tabindex="-1"), Maschinen füllen es aus. */
.honig{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.paar{ display: grid; gap: .8rem; }
.feld{ display: grid; gap: .28rem; }
.feld > span{
  font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still);
}
.feld input, .feld select, .feld textarea{
  font: inherit; font-size: var(--f-text); color: var(--t-schrift);
  background: var(--t-grund); border: 1px solid var(--t-linie-s); border-radius: 2px;
  padding: .7rem .75rem; min-height: 2.85rem; width: 100%;
}
.teil--tag-zweit .feld input, .teil--tag-zweit .feld select, .teil--tag-zweit .feld textarea{
  background: var(--t-zweit);
}
.feld textarea{ min-height: 6rem; resize: vertical; }
.formular button{ justify-self: start; cursor: pointer; }
.direkt{ margin: 0; font-size: var(--f-klein); color: var(--t-still); }
/* Mailadresse mitten im Satz — bewusste Ausnahme von den 44 px, sonst
   zerreisst der Kasten den Satzspiegel. Dafuer sichtbar unterstrichen. */
.direkt a{
  display: inline-flex; align-items: center; min-height: 1.6rem;
  color: var(--t-schrift); text-decoration: underline;
  text-decoration-color: var(--t-linie-s); text-underline-offset: .25em;
}
.direkt a:hover{ text-decoration-color: var(--t-schrift); }

.beleg{ display: grid; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.beleg figure{ margin: 0; }
.beleg img{ width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.beleg figcaption{
  margin-top: .55rem; font-size: var(--f-mikro); font-weight: var(--etikett-gewicht);
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--t-still);
}

/* ── Termine ────────────────────────────────────────────────────── */

.termine{ list-style: none; margin: 0 0 clamp(2rem,4vw,3rem); padding: 0;
  border-top: 1px solid var(--n-linie); }
.termin{
  display: grid; gap: .5rem 1.5rem; align-items: start;
  padding: 1.4rem 0; border-bottom: 1px solid var(--n-linie);
}
.termin .wann{
  margin: 0; font-family: var(--h3-familie); font-weight: var(--h3-gewicht);
  font-size: var(--f-h3); line-height: 1.15; color: var(--zweit);
}
.termin .wann small{ display: block; margin-top: .25rem; font-family: var(--txt);
  font-size: var(--f-klein); color: var(--n-still); }
.termin h3{ margin: 0 0 .35rem; font-size: var(--f-text); font-weight: 600; letter-spacing: .01em; }
.termin p{ margin: 0; font-size: var(--f-text); line-height: 1.55; color: var(--n-still); max-width: 46ch; }
.termin .marker{
  justify-self: start; align-self: center;
  padding: .3rem .6rem; border: 1px dashed var(--n-linie-s); border-radius: 2px;
  font-size: var(--f-mikro); letter-spacing: .06em; text-transform: uppercase; color: var(--n-hell);
  white-space: nowrap;
}

.verteiler{ display: grid; gap: .6rem; max-width: 34rem; }
.verteiler label{ font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--zweit); }
.verteiler .zeile{ display: grid; gap: .6rem; }
.verteiler input{
  font: inherit; font-size: var(--f-text); color: var(--n-hell);
  background: var(--n-tief); border: 1px solid var(--n-linie-s); border-radius: 2px;
  padding: .7rem .75rem; min-height: 2.85rem; width: 100%;
}
.verteiler input::placeholder{ color: var(--n-still); opacity: .7; }
.verteiler button{ justify-self: start; cursor: pointer; }
.verteiler p{ margin: 0; font-size: var(--f-klein); color: var(--n-still); }

/* ── Drei Gerichte ──────────────────────────────────────────────── */

.drei{ display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); margin-bottom: clamp(2.5rem,5vw,4rem); }
.drei figure{ margin: 0; }
.drei img{ width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.drei figcaption{
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .2rem .8rem;
  margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--t-linie);
}
.drei h3{ margin: 0; font-family: var(--h3-familie); font-weight: var(--h3-gewicht);
  letter-spacing: var(--h3-sperrung); font-size: var(--f-h3); line-height: 1.2; }
.drei .preis{ margin: 0; font-size: var(--f-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.drei figcaption p:last-child{
  grid-column: 1 / -1; margin: .3rem 0 0; font-size: var(--f-klein);
  line-height: 1.55; color: var(--t-still); max-width: 40ch;
}

/* ── Karte ──────────────────────────────────────────────────────── */

.karte-netz{ columns: 1; column-gap: clamp(2rem, 5vw, 4rem); }
/* Eine einzelne Gruppe auf einer Unterseite bleibt einspaltig und schmal —
   sonst reißt eine Liste aus acht Zeilen über die ganze Bahn auseinander. */
.karte-netz--eine{ columns: 1 !important; max-width: 34rem; }
.karte-netz > div{ break-inside: avoid; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.karte-netz h3{
  margin: 0 0 .9rem; padding-bottom: .5rem; border-bottom: 1px solid var(--t-linie-s);
  font-size: var(--f-mikro); font-weight: var(--etikett-gewicht); letter-spacing: .18em; text-transform: uppercase;
  color: var(--zweit-tag);
}
.karte-netz ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .62rem; }
.karte-netz li{ display: flex; align-items: baseline; gap: .4rem; font-size: var(--f-text); }
.karte-netz li > span:first-child{ flex: 0 1 auto; }
.karte-netz li em{
  display: block; font-style: normal; font-size: var(--f-klein); line-height: 1.4;
  color: var(--t-still); margin-top: .1rem;
}
/* Die Fuehrungspunkte gehoeren auf die ERSTE Zeile, auf Hoehe des Preises —
   nicht an den Fuss des Kastens, sonst laufen sie bei zweizeiligen Namen
   unter dem Preis durch. Ein leeres Flexkind nimmt seine Unterkante als
   Grundlinie, damit sitzt die Linie genau dort. */
.fuell{ flex: 1 1 auto; align-self: baseline;
  position: relative; top: .16em;
  border-bottom: 1px dotted var(--t-linie-s); min-width: 1.2rem; }
.eur{ flex: none; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.karte-fuss{
  margin: clamp(2rem,4vw,3rem) 0 0; max-width: 62ch;
  font-size: var(--f-klein); line-height: 1.6; color: var(--t-still);
  padding-top: 1.1rem; border-top: 1px solid var(--t-linie);
}

/* ── Der Name ───────────────────────────────────────────────────── */

.name-teil{ position: relative; overflow: hidden; }
.name-teil .bahn{ position: relative; z-index: 1; }
.signet{ width: 3.6rem; height: auto; margin-bottom: 1.6rem; border-radius: 50%; }
.name-teil blockquote{
  margin: 0 0 1rem; max-width: 24ch;
  font-family: var(--dis); font-weight: var(--dis-gewicht);
  font-size: var(--f-h2); line-height: 1.08;
  color: var(--n-hell);
}
.name-teil blockquote em{ font-style: italic; color: var(--zweit); }
.name-teil .quelle{ margin: 0; font-size: var(--f-klein); letter-spacing: var(--sp-nav);
  text-transform: uppercase; color: var(--n-still); }

/* ── Tisch und Ort ──────────────────────────────────────────────── */

.wege{ display: grid; gap: 1px; background: var(--t-linie);
  border: 1px solid var(--t-linie); margin-bottom: clamp(2.5rem,5vw,4rem); }
.weg{ background: var(--t-grund); padding: clamp(1.3rem,3vw,2rem); display: grid;
  align-content: start; gap: .7rem; }
.teil--tag-zweit .weg{ background: var(--t-zweit); }
.weg .zahl{
  margin: 0; font-family: var(--zahl-familie); font-weight: var(--dis-gewicht); font-size: var(--f-gross);
  line-height: .9; display: flex; align-items: baseline; gap: .4rem;
}
.weg .zahl small{ font-family: var(--txt); font-size: var(--f-mikro); font-weight: 600;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--t-still); }
.weg p:not(.zahl){ margin: 0; font-size: var(--f-text); line-height: 1.55; color: var(--t-still); max-width: 38ch; }
.weg .knopf{ justify-self: start; margin-top: .3rem; }

.ort-netz{ display: grid; gap: clamp(1.5rem,4vw,3rem); }
.ort-netz img{ width: 100%; height: auto; }
.fakten{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--t-linie); }
.fakten li{
  display: grid; grid-template-columns: 7.5rem minmax(0,1fr); gap: .2rem 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--t-linie);
}
.fakten b{
  font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still); padding-top: .2rem;
}
.fakten span{ font-size: var(--f-text); line-height: 1.5; }
.fakten a{
  /* eigenstaendiger Link, kein Wort im Satz: volle 44 px Trefferhoehe,
     der negative Aussenabstand haelt die Zeile bei ihren 22 px. */
  display: inline-flex; align-items: center; min-height: 2.85rem; margin-block: -.65rem;
  color: var(--t-schrift); text-decoration: underline;
  text-decoration-color: var(--t-linie-s); text-underline-offset: .25em;
}
.fakten a:hover{ text-decoration-color: var(--t-schrift); }

/* ── Fuß ────────────────────────────────────────────────────────── */

.fuss{ background: var(--n-tief); border-top: 1px solid var(--n-linie);
  padding: clamp(2.5rem,5vw,4rem) 0 clamp(1.6rem,3vw,2.4rem); }
.fuss-netz{ display: grid; gap: 1.8rem clamp(1.5rem,4vw,3rem); }
.fuss h2{
  margin: 0 0 .9rem; font-size: var(--f-mikro); font-weight: 600;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--zweit);
}
.fuss ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem;
  font-size: var(--f-klein); color: var(--n-still); }
.fuss a{
  display: inline-flex; align-items: center; min-height: 2.85rem; margin-block: -.55rem;
  color: var(--n-hell); text-decoration: underline;
  text-decoration-color: var(--n-linie-s); text-underline-offset: .25em;
}
.fuss a:hover{ text-decoration-color: var(--n-hell); }
.fuss-zeile{
  margin-top: clamp(2rem,4vw,3rem); padding-top: 1.1rem;
  border-top: 1px solid var(--n-linie);
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  font-size: var(--f-klein); color: var(--n-still);
}
.fuss-zeile p{ margin: 0; }
.fuss-zeile a{ margin-block: -.75rem; }

/* ══════════════════════════ Bewegung ══════════════════════════ */

@keyframes auftauchen{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes filmauf{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes heben{
  from{ opacity: 0; transform: translateY(14px) scale(.985) }
  to  { opacity: 1; transform: none }
}

/* ══════════════════════════ Breiten ══════════════════════════ */

@media (min-width: 34em){
  .beleg{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .drei{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .paar{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .termin{ grid-template-columns: 9rem minmax(0,1fr) auto; }
  .verteiler .zeile{ grid-template-columns: minmax(0,1fr) auto; }
  .wege{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 48em){
  .buehne{ min-height: calc(100svh - 12rem); }
  .karte-netz{ columns: 2; }
  .ort-netz{ grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: start; }
  /* Spaltenzahl aus bausteine.fuss(): höchstens drei je Reihe, keine leeren Spuren. */
  .fuss-netz{ grid-template-columns: repeat(var(--fuss-spalten-mittel, 3), minmax(0,1fr)); }
}

@media (min-width: 64em){
  .kopf-innen{
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--s-6); padding-top: .95rem; padding-bottom: .95rem;
  }
  .kopf-nav{ grid-column: 2; grid-row: 1; padding-top: 0; }
  .wege-kopf{ gap: 1.6rem; }
  .kopf-tun{ grid-column: 3; grid-row: 1; }
  .kopf-tun a{ padding: .45rem .95rem; }

  .buehne{
    align-content: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 38vw);
    min-height: calc(100svh - 9.5rem);
  }
  .foto{
    position: relative; inset: auto; grid-column: 2; grid-row: 1;
    height: 100%; border-left: 1px solid var(--n-linie);
  }
  .foto img, .foto .film{ transform: scale(var(--foto-zoom-breit, var(--foto-zoom, 1))); }
  .foto--leer::after{ right: auto; left: 50%; top: 50%; transform: translate(-50%, -54%);
    font-size: clamp(16rem, 30vw, 34rem); }

  /* Kein Schleier über dem Foto — nur ein Schein der Akzentfarbe fällt
     in die dunkle Spalte hinein. */
  .schleier{
    background:
      radial-gradient(32% 36% at 100% 40%, rgba(var(--akzent-rgb), .13), rgba(var(--akzent-rgb), 0) 72%),
      linear-gradient(to right, rgba(var(--n-grund-rgb), .5) 0%, rgba(var(--n-grund-rgb), 0) 46%);
  }

  /* In der Saeule steht der Hinweis unten an der Kante des Bildes. */
  .ki-hinweis{ top: auto; bottom: .6rem; right: .9rem; }

  .satz{
    grid-column: 1; grid-row: 1; align-self: end;
    max-width: 41rem; padding-right: var(--s-8);
    /* Der Satz sitzt im unteren Drittel, nicht auf der Kante: seit die
       dreispaltige Leiste weg ist, wuerde er sonst unten kleben und oben
       ein Loch lassen. */
    padding-bottom: clamp(3rem, 14vh, 9rem);
    background: none;
  }
  h1{ margin-bottom: 1.1rem; }
  .unter{ margin-bottom: 1.5rem; }
  .tun{ gap: .7rem; margin-bottom: .9rem; }
  .knopf{ min-height: 3rem; padding: .8rem 1.5rem; }

  .feier{ grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
  .karte-netz{ columns: 3; }
}

@media (min-width: 90em){
  .buehne{ grid-template-columns: minmax(0, 1fr) minmax(17rem, 36vw); }
}

@media (max-height: 34rem){
  .buehne{ min-height: 0; }
  h1 .name{ font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3rem); }
  .satz{ padding-top: 2.4rem; }
}

@media (prefers-reduced-motion: reduce){
  /* Kein bewegtes Licht für Menschen, die keine Bewegung wollen. Ist das Standbild
     selbst mit KI bearbeitet, erscheint statt des Film-Hinweises seine Marke. */
  .film,
  .ki-hinweis{ display: none; }
  .ki-marke--standbild{ display: inline-flex; }
  .foto, .satz > *{ animation: none; opacity: 1; transform: none; }
  .knopf, .kopf-tun a, .wege-kopf a, .marke, .pfeil{ transition: none; }
  .knopf:hover, .knopf:active, .kopf-tun a:hover, .kopf-tun a:active{ transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   Ab hier: was die Unterseiten zusätzlich brauchen.
   Die Startseite trägt eine Bühne mit Bild. Jede Unterseite trägt
   stattdessen ein Kopfstück aus Schrift — dieselbe Leiter, kein Foto,
   damit die erste Zeile sofort steht und nichts nachladen muss.
   ═══════════════════════════════════════════════════════════════════ */

.kopfstueck{
  background: var(--n-grund); color: var(--n-hell);
  padding: clamp(2.6rem, 7vw, 5.25rem) 0 clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--n-linie);
}
.kopfstueck h1{
  margin: 0 0 1rem; max-width: 17ch; text-wrap: balance;
  font-family: var(--dis); font-weight: var(--dis-gewicht); font-size: var(--f-h2);
  line-height: 1.02; letter-spacing: -.01em; color: var(--n-hell);
}
.kopfstueck .unter{ margin: 0; color: var(--n-schrift); }
.kopfstueck .tun{ margin: 1.5rem 0 0; }
.kopfstueck .dazu{ margin-top: .8rem; }
.kopfstueck :where(a, button):focus-visible{ outline: 2px solid var(--n-hell); outline-offset: 3px; }
.kopfstueck-text > *:last-child{ margin-bottom: 0; }

/* Rechts neben dem Kopfstück stand eine leere Fläche. Dort steht jetzt ein
   Foto — auf jeder Unterseite ein anderes. Auf dem Telefon liegt es unter
   dem Text, quer, damit die Seite nicht zur Rolltreppe wird. */
.kopfstueck-bild{ margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; }
.kopfstueck-bild img{ width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; display: block; }
@media (min-width: 64em){
  /* Die Bahn endet bei 82rem, das Bild darf deshalb nicht mit dem Fenster weiterwachsen —
     sonst drückt es auf breiten Bildschirmen den Text auf ein schmales Band (14.10.2026). */
  .kopfstueck .bahn{ display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, min(34vw, 31rem));
    gap: clamp(2rem, 5vw, 4.5rem); }
  .kopfstueck-text{ grid-column: 1; }
  /* Das Bild darf die Hoehe des Kopfstuecks NICHT bestimmen. Sonst zieht ein
     Hochformat den Kopf auf einen ganzen Bildschirm und die Ueberschrift
     rutscht unter die Falz. Deshalb: der Kasten wird von der Textspalte
     gestreckt, das Bild liegt absolut darin und fuellt ihn. */
  .kopfstueck-bild{ grid-column: 2; grid-row: 1 / -1; align-self: stretch;
    margin: 0; position: relative; min-height: 15rem; }
  .kopfstueck-bild img{ position: absolute; inset: 0;
    width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .kopfstueck-bild .leuchtet{ position: absolute; inset: 0; }
}
/* Kopfstück mit Film (15.10.2026): der Film liegt deckungsgleich über seinem Standbild, beide mit
   demselben Ausschnitt (--film-ursprung). Auf dem Telefon bleibt das Bild quer (16:9 wie sonst). */
.kopfstueck-bild--film{ position: relative; overflow: hidden; }
.kopfstueck-bild--film img{ object-position: var(--film-ursprung, 50% 50%); }
.kopfstueck-bild--film .film{ position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--film-ursprung, 50% 50%);
  z-index: 1; opacity: 0; animation: filmauf 1100ms var(--kurve-aus) 260ms both; }
.kopfstueck-bild--film .ki-hinweis{ top: auto; bottom: .6rem; right: .6rem; }

/* ── Vier Türen auf der Startseite ───────────────────────────────────
   Jede Kachel ist EIN Link. Damit ist die Trefferfläche das ganze Bild
   und nicht nur die Zeile darunter — das löst die 44-px-Regel von selbst. */

.tueren{ list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.tuer{ display: grid; align-content: start; gap: .7rem;
  color: inherit; text-decoration: none; }
.tuer img{ width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  transition: opacity 200ms var(--kurve-aus); }
.tuer h3{ margin: 0; padding-top: .55rem; border-top: 1px solid var(--t-linie);
  font-family: var(--h3-familie); font-weight: var(--h3-gewicht); letter-spacing: var(--h3-sperrung);
  font-size: var(--f-h3); line-height: 1.2; }
.tuer p{ margin: 0; font-size: var(--f-klein); line-height: 1.55;
  color: var(--t-still); max-width: 34ch; }
.tuer .weiter{ font-size: var(--f-mikro); font-weight: 600;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--zweit-tag); }
.tuer:hover img{ opacity: .88; }
/* Kachel ohne Foto: Fläche der Palette mit dem Monogramm, gleiche Maße. */
.tuer-leer{ position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  overflow: hidden; background: var(--buehne-leer, var(--n-tief)); }
.tuer-leer::after{ content: var(--monogramm, ""); position: absolute; right: 8%; bottom: -6%;
  font-family: var(--dis); line-height: 1; font-size: clamp(7rem, 22vw, 12rem);
  color: transparent; -webkit-text-stroke: .012em rgba(var(--n-hell-rgb), .45);
  text-stroke: .012em rgba(var(--n-hell-rgb), .45); }
.tuer:hover h3{ text-decoration: underline; text-underline-offset: .18em;
  text-decoration-color: var(--t-linie-s); }

/* ── Fließtext: Impressum, Datenschutz, Erklärendes ─────────────── */

.text{ max-width: 64ch; }
.text h2{ margin: 2.3rem 0 .7rem; font-family: var(--h3-familie); font-weight: var(--h3-gewicht);
  letter-spacing: var(--h3-sperrung); font-size: var(--f-h3); line-height: 1.25; }
.text > h2:first-child{ margin-top: 0; }
.text p, .text li, .text dd{ font-size: var(--f-text); line-height: 1.65; color: var(--t-still); }
.text p{ margin: 0 0 .9rem; }
.text ul{ margin: 0 0 1rem; padding-left: 1.1rem; }
.text li{ margin-bottom: .3rem; }
.text dl{ margin: 0 0 1rem; }
.text dt{ font-size: var(--f-text); font-weight: 600; color: var(--t-schrift); }
.text dd{ margin: 0 0 .6rem; }
/* Links mitten im Satz bekommen keinen 44-px-Kasten — der zerrisse den
   Satzspiegel. Stattdessen sichtbare Unterstreichung und ueber den
   Innenabstand eine Trefferhoehe von rund 27 px. Bewusstes Risiko,
   so in doku/pruefung/FERTIGSTELLEN.md §1.1 ausdruecklich erlaubt. */
/* :not(.knopf) ist Pflicht und keine Feinheit. Ein Selektor wie
   ".karte-fuss a" ist spezifischer als ".knopf--rot" und faerbte die Schrift
   auf dem roten Knopf dunkel: gemessen 2,49:1 statt der geforderten 4,5:1,
   dazu eine Unterstreichung quer durch den Knopf. Aufgefallen ist es erst
   am 02.09.2026 auf den neuen Quittungsseiten — vorher stand nirgends ein
   roter Knopf in einem dieser Absaetze. */
.text a:not(.knopf), .karte-fuss a:not(.knopf), .direkt a:not(.knopf),
.quelle a:not(.knopf), .vorlauf a:not(.knopf), .kondition a:not(.knopf),
.unter a:not(.knopf), .anfahrt a:not(.knopf){
  color: var(--t-schrift); text-decoration: underline;
  text-decoration-color: var(--t-linie-s); text-underline-offset: .25em;
  padding-block: .3rem;
}
.text a:not(.knopf):hover, .karte-fuss a:not(.knopf):hover,
.direkt a:not(.knopf):hover, .vorlauf a:not(.knopf):hover,
.kondition a:not(.knopf):hover,
.anfahrt a:not(.knopf):hover{ text-decoration-color: var(--t-schrift); }
.teil--nacht .karte-fuss a:not(.knopf),
.teil--nacht .vorlauf a:not(.knopf), .kopfstueck .unter a:not(.knopf),
.verteiler p a:not(.knopf){ color: var(--n-hell); text-decoration: underline;
  text-decoration-color: var(--n-linie-s); text-underline-offset: .25em;
  padding-block: .35rem; }
.teil--nacht .karte-fuss a:not(.knopf):hover,
.teil--nacht .vorlauf a:not(.knopf):hover, .kopfstueck .unter a:not(.knopf):hover,
.verteiler p a:not(.knopf):hover{ text-decoration-color: var(--n-hell); }

/* Sichtbare Lücke: was vor der Veröffentlichung noch eingetragen wird.
   Rot gestrichelt, damit es niemand überliest und niemand live schaltet. */
.offen{ margin: 1rem 0 1.5rem; padding: .95rem 1.1rem;
  border: 1px dashed var(--akzent-tag); background: var(--t-zweit); }
.teil--tag-zweit .offen{ background: var(--t-grund); }
/* Auf dunklem Grund: Messing statt Rot, helle Schrift. Der Grund ist
   deckend, damit pruefen.mjs den Kontrast messen kann. */
:is(.teil--nacht, .kopfstueck, .buehne, .abschluss, .fuss, .band) .offen{
  border-color: var(--zweit); background: var(--n-tief); }
:is(.teil--nacht, .kopfstueck, .buehne, .abschluss, .fuss, .band) .offen b{ color: var(--zweit); }
:is(.teil--nacht, .kopfstueck, .buehne, .abschluss, .fuss, .band) .offen p{ color: var(--n-hell); }
/* Platzhalter mitten in einer Zeile (Fuß, Band, Liste) — erbt die Schriftfarbe. */
.offen-zeile{ border: 1px dashed currentColor; padding: .05em .4em; }
.offen b{ display: block; margin-bottom: .3rem;
  font-size: var(--f-mikro); font-weight: 700; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--akzent-tag); }
.offen p{ margin: 0; font-size: var(--f-klein); line-height: 1.6; color: var(--t-schrift); }
.offen p + p{ margin-top: .4rem; }

/* Derselbe Kasten in ruhig: fuer Absaetze, die dauerhaft auf der Seite
   stehen und nur hervorgehoben gehoeren — nicht fuer offene Punkte. */
.hinweis{ margin: 1rem 0 1.5rem; padding: .95rem 1.1rem;
  border: 1px solid var(--t-linie-s); background: var(--t-zweit); }
.hinweis b{ display: block; margin-bottom: .3rem;
  font-size: var(--f-mikro); font-weight: 700; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-schrift); }
.hinweis p{ margin: 0; font-size: var(--f-klein); line-height: 1.6; color: var(--t-schrift); }
.hinweis p + p{ margin-top: .4rem; }

/* Häufige Fragen benutzen dasselbe Gerüst wie die Faktenliste — nur ist
   die linke Spalte hier eine ganze Frage und kein Etikett. */
.fragen li{ grid-template-columns: minmax(0,1fr); gap: .35rem; }
.fragen b{ font-size: var(--f-text); font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--t-schrift); padding-top: 0; }
.fragen span{ color: var(--t-still); max-width: 62ch; }

/* ── Anfahrt: drei Wege nebeneinander ───────────────────────────── */

.anfahrt{ list-style: none; margin: 0 0 clamp(2rem,4vw,3rem); padding: 0;
  display: grid; gap: 1px; background: var(--t-linie); border: 1px solid var(--t-linie); }
.anfahrt li{ background: var(--t-zweit); padding: clamp(1.1rem, 2.5vw, 1.6rem);
  display: grid; gap: .35rem; align-content: start; }
.teil--tag-zweit .anfahrt li{ background: var(--t-grund); }
.anfahrt b{ font-size: var(--f-mikro); font-weight: 600; letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still); }
.anfahrt span{ font-size: var(--f-text); line-height: 1.5; }

/* ── Rückblick auf vergangene Formate ────────────────────────────
   Die Plakate tragen alte Datumsangaben im Bild. Sie sind nur zulässig,
   wenn sichtbar als Rückblick beschriftet — genau dafür ist .war da. */

.war figcaption{ grid-template-columns: minmax(0,1fr); }
.war img{ aspect-ratio: 4 / 5; object-fit: contain; background: var(--t-zweit);
  padding: clamp(.7rem, 2vw, 1.2rem); }
.war .marke-alt{ margin: 0; font-size: var(--f-mikro); font-weight: 600;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--zweit-tag); }

@media (min-width: 34em){
  .tueren{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tuer img, .tuer-leer{ aspect-ratio: 4 / 5; }
  .anfahrt{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .war{ grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 48rem; }
}
/* ── Bilderband: eine Reihe Fotos, die den Raum zeigt statt ihn zu beschreiben.
   Hochformate nebeneinander, auf dem Telefon zwei, sonst drei oder vier. ── */

.bilderband{ list-style: none; margin: 0 0 clamp(2rem,4vw,3rem); padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(.5rem, 1.4vw, 1rem); }
.bilderband li{ margin: 0; }
.bilderband figure{ margin: 0; }
.bilderband img{ width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.bilderband figcaption{ margin-top: .5rem; font-size: var(--f-mikro); font-weight: var(--etikett-gewicht);
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--t-still); }
.teil--nacht .bilderband figcaption{ color: var(--n-still); }

/* ── Wege in die Karte: sechs eigene Seiten, als Liste mit einem Satz je Weg ── */

.kartenwege{ list-style: none; margin: 0 0 clamp(2rem,4vw,3rem); padding: 0;
  display: grid; gap: 1px; background: var(--t-linie);
  border: 1px solid var(--t-linie); }
.kartenwege li{ margin: 0; }
.kartenwege a{
  display: grid; gap: .3rem; align-content: start;
  background: var(--t-grund); padding: clamp(1rem,2.4vw,1.5rem);
  color: inherit; text-decoration: none; min-height: 100%;
  transition: background-color 200ms var(--kurve-aus);
}
.teil--tag-zweit .kartenwege a{ background: var(--t-zweit); }
.kartenwege a:hover{ background: var(--t-zweit); }
.teil--tag-zweit .kartenwege a:hover{ background: var(--t-grund); }
.kartenwege b{ font-family: var(--h3-familie); font-weight: var(--h3-gewicht);
  letter-spacing: var(--h3-sperrung); font-size: var(--f-h3); line-height: 1.2; }
.kartenwege span{ font-size: var(--f-klein); line-height: 1.55; color: var(--t-still);
  max-width: 40ch; }
.kartenwege em{ font-style: normal; font-size: var(--f-mikro); font-weight: 600;
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--zweit-tag); }

@media (min-width: 34em){
  .kartenwege{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 48em){
  .fragen li{ grid-template-columns: minmax(0, 22rem) minmax(0,1fr); gap: .35rem 2.5rem; }
  .bilderband{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .bilderband--vier{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  /* Zwei Bilder in einem Dreierraster lassen eine Spalte leer stehen. */
  .bilderband--zwei{ grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 58rem; }
  .kartenwege{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 64em){
  .tueren{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .kopfstueck h1{ max-width: 20ch; }
}
@media (prefers-reduced-motion: reduce){
  .tuer img{ transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   Lichtschein, Hintergrundzeichen und Abschlussband
   ═══════════════════════════════════════════════════════════════════ */

/* ── Licht atmet ─────────────────────────────────────────────────
   Für Fotos mit einer echten Lichtquelle (Leuchte, Schild). Das Foto
   bleibt, wie es ist; darüber liegt ein weicher Lichtkegel an der Stelle,
   an der das Licht wirklich sitzt, und der wird langsam heller und dunkler.
   Nur Fotos, die in SITE["leuchten"] stehen, bekommen ihn.
   Position und Radius kommen je Bild aus --nx / --ny / --nr, gemessen
   am 3:4-Ausschnitt. Nur opacity wird bewegt — das kostet nichts. */

.leuchtet{ position: relative; display: block; overflow: hidden; }
.leuchtet img{ display: block; }
.leuchtet .glut{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle var(--nr, 22%) at var(--nx, 50%) var(--ny, 45%),
    rgba(var(--akzent-rgb), .60), rgba(var(--akzent-rgb), .26) 42%, rgba(var(--akzent-rgb), 0) 72%);
  animation: atmen 4.6s ease-in-out infinite;
}
.leuchtet--warm .glut{
  background: radial-gradient(circle var(--nr, 22%) at var(--nx, 50%) var(--ny, 45%),
    rgba(var(--n-hell-rgb), .55), rgba(var(--zweit-rgb), .24) 42%, rgba(var(--zweit-rgb), 0) 72%);
}
@keyframes atmen{
  0%, 100%{ opacity: .40; }
  50%     { opacity: .95; }
}

/* ── Das Monogramm im Hintergrund ────────────────────────────────
   Füllt die Flächen, die sonst leer blieben — im Kopf der Bühne, im
   Namensteil, im Abschlussband. Rein dekorativ, deshalb per ::before
   und ohne eigenen Text im Dokument. */

.mit-zeichen{ position: relative; overflow: hidden; isolation: isolate; }
.mit-zeichen::before{
  content: var(--monogramm, "");
  position: absolute; z-index: -1; pointer-events: none;
  font-family: var(--dis); font-weight: 400; line-height: 1;
  /* Der Buchstabe steht GANZ im Bild — keine negativen Abstaende, keine
     angeschnittene Kante. Ein halber Buchstabe liest sich als Klecks, und
     drei davon uebereinander sind Tapete. Deshalb höchstens an EINER Stelle
     je Seite, am besten im Band ueber dem Fuss. */
  font-size: clamp(6rem, 16vw, 15rem);
  left: 6%; bottom: 8%;
  color: var(--n-hell); opacity: .05;
}
.mit-zeichen--rechts::before{ left: auto; right: 7%; }
/* Der Namensteil hat rechts eine ganze leere Haelfte. Dort darf das Zeichen
   groesser stehen — es ist die Seite, auf der es um den Namen geht. */
.name-teil.mit-zeichen::before{ font-size: clamp(8rem, 26vw, 26rem); bottom: 12%; right: 8%; }
@media (max-width: 47.99em){
  .name-teil.mit-zeichen::before{ font-size: clamp(7rem, 34vw, 12rem); bottom: 6%; right: 6%; }
}
.mit-zeichen--oben::before{ bottom: auto; top: 7%; }


/* Auf den dunklen Flächen ist das Zeichen kein Wasserzeichen, sondern Licht:
   nur die Kontur leuchtet in der Akzentfarbe, und sie atmet im selben Takt
   wie der Lichtschein auf den Fotos. Gezeichnet wird nichts nach — Kontur und Schein
   kosten keine einzige Berechnung pro Bild. */
.mit-zeichen--leuchtend::before{
  color: transparent;
  -webkit-text-stroke: .016em rgba(var(--akzent-rgb), .75);
  text-stroke: .016em rgba(var(--akzent-rgb), .75);
  text-shadow: 0 0 .07em rgba(var(--akzent-rgb), .35), 0 0 .22em rgba(var(--akzent-rgb), .18);
  opacity: 1;
  animation: atmen 5.4s ease-in-out infinite;
}
.teil--tag.mit-zeichen::before, .teil--tag-zweit.mit-zeichen::before{ color: var(--t-schrift); opacity: .035; }
/* NICHT `.mit-zeichen > * { position: relative }` — das nimmt dem Buehnenfoto sein
   `position: absolute`, und auf dem Telefon war das Foto damit ganz weg.
   `isolation: isolate` am Vater plus z-index -1 am ::before tut dasselbe,
   ohne ein einziges Kind anzufassen. */

/* ── Abschlussband über dem Fuß ──────────────────────────────────
   Statt einer toten Fläche am Seitenende steht dort ein Satz und ein Weg. */

.abschluss{ background: var(--n-tief); color: var(--n-hell);
  padding: clamp(2.8rem, 7vw, 5rem) 0; border-top: 1px solid var(--n-linie); }
.abschluss .bahn{ display: grid; gap: 1.2rem; align-items: end; }
.abschluss p{ margin: 0; max-width: 30ch; text-wrap: balance;
  font-family: var(--dis); font-weight: var(--dis-gewicht); font-size: var(--f-h2); line-height: 1.04; }
.abschluss .tun{ margin: 0; }
@media (min-width: 48em){
  .abschluss .bahn{ grid-template-columns: minmax(0,1fr) auto; gap: 2rem; }
}

/* ── Einwilligung im Formular ────────────────────────────────────
   Kein Kasten mit Rand, sondern eine Zeile, die man liest. Die
   Trefferfläche des Hakens bleibt bei vollen 44 px. */

.feld--haken{ display: grid; grid-template-columns: auto minmax(0,1fr);
  gap: .1rem .7rem; align-items: start; margin-top: .2rem; }
.feld--haken input{ inline-size: 1.15rem; block-size: 1.15rem; margin: .55rem 0 0;
  accent-color: var(--akzent); }
.feld--haken > span{ font-size: var(--f-klein); line-height: 1.55; color: var(--t-still);
  letter-spacing: 0; text-transform: none; font-weight: 400; padding-block: .35rem; }
.feld--haken a{ color: var(--t-schrift); text-decoration: underline;
  text-decoration-color: var(--t-linie-s); text-underline-offset: .25em;
  padding-block: .35rem; }
.verteiler .feld--haken > span{ color: var(--n-still); }
.verteiler .feld--haken a{ color: var(--n-hell); text-decoration-color: var(--n-linie-s); }

/* ── Sozialer Beleg: ein Satz gross, ein Weg daneben ────────────── */

.beleg-band{ display: grid; gap: 1.2rem; align-items: end; }
.beleg-band p.gross{ margin: 0; max-width: 26ch; text-wrap: balance;
  font-family: var(--dis); font-weight: var(--dis-gewicht); font-size: var(--f-h2); line-height: 1.04; }
.beleg-band p.klein{ margin: 0; max-width: 44ch; font-size: var(--f-text);
  line-height: 1.6; color: var(--n-still); }
@media (min-width: 48em){
  .beleg-band{ grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 2.5rem; }
}

.beleg-bild{ margin: clamp(1.8rem,4vw,2.6rem) 0 0; }
.beleg-bild img{ width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover;
  display: block; }
.beleg-bild figcaption{ margin-top: .7rem; font-size: var(--f-mikro); font-weight: var(--etikett-gewicht);
  letter-spacing: var(--sp-etikett); text-transform: uppercase; color: var(--n-still); }

/* ── Instagram-Raster: unsere eigenen Bilder, kein fremdes Skript ──
   Ein echter Instagram-Einbettungscode laedt Skripte von Meta, setzt Cookies
   und braucht damit ein Einwilligungsbanner. Das Versprechen „keine
   Verbindung nach aussen" waere weg. Deshalb: eigene Bilder, ein Link. */

.insta{ list-style: none; margin: 0 0 clamp(1.6rem,3vw,2.4rem); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(.4rem,1vw,.7rem); }
.insta a{ display: block; position: relative; }
.insta img{ width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  transition: opacity 200ms var(--kurve-aus); }
.insta a:hover img{ opacity: .85; }
@media (min-width: 48em){ .insta{ grid-template-columns: repeat(6, minmax(0,1fr)); } }

/* ── Der Roester, genannt wie ein Lieferant und nicht wie Werbung ── */

.roester{ display: grid; gap: 1rem; align-items: center; margin: clamp(1.6rem,4vw,2.4rem) 0 0; }
.roester img{ width: 9.5rem; height: auto; }
.roester p{ margin: 0; font-size: var(--f-text); line-height: 1.6; color: var(--t-still);
  max-width: 46ch; }
.roester a{ color: var(--t-schrift); text-decoration: underline;
  text-decoration-color: var(--t-linie-s); text-underline-offset: .25em;
  padding-block: .3rem; }
@media (min-width: 48em){
  .roester{ grid-template-columns: auto minmax(0,1fr); gap: 2rem; }
}

/* Im Fuss nur eine Zeile mit dem hellen Logo. */
.fuss .roester-fuss{ display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 1.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--n-linie); }
.fuss .roester-fuss span{ font-size: var(--f-mikro); letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--n-still); }
.fuss .roester-fuss img{ width: 7rem; height: auto; opacity: .85; }
.fuss .roester-fuss a{ display: inline-flex; align-items: center; min-height: 2.85rem; }

/* ── WhatsApp-Weg im Verteiler ───────────────────────────────────── */
.verteiler .oder{ margin: 1.1rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--n-linie); }

@media (prefers-reduced-motion: reduce){
  .leuchtet .glut{ animation: none; opacity: .55; }
  .mit-zeichen--leuchtend::before{ animation: none; opacity: .8; }
}


/* ═══════════════ Speisekarte zum Mitlesen (QR-Code am Tisch) ═══════════════
   Kein Kopf, kein Fuss, keine Wege — nur die Karte. Gedruckt soll sie wie
   eine Karte aussehen und nicht wie eine ausgedruckte Website. */

.speisekarte{ background: var(--t-grund); color: var(--t-schrift);
  padding: clamp(2rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 5rem); min-height: 100vh; }
.speisekarte .karte-signet{ width: 3.4rem; height: auto; border-radius: 50%;
  display: block; margin: 0 auto 1.4rem; }
.speisekarte h1{ margin: 0 0 .4rem; text-align: center;
  font-family: var(--dis); font-weight: var(--dis-gewicht); font-size: var(--f-h2); line-height: 1.05; }
.speisekarte .karte-ort{ margin: 0 0 clamp(2rem,5vw,3rem); text-align: center;
  font-size: var(--f-mikro); letter-spacing: var(--sp-etikett);
  text-transform: uppercase; color: var(--t-still); }
.speisekarte .karte-netz{ margin-bottom: 1.5rem; }

/* ═══════════════════════════════════════════════════════════════════
   Ausbau 14.10.2026: Einstellungen der Bühne, Film-Band, KI-Kennzeichnung
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bühne: Werte kommen als Tokens aus bausteine.buehne() ──────────
   --buehne-spalten (aufteilung), --buehne-hoehe (hoehe), Klasse buehne--mitte
   (textlage), buehne--gestapelt + --buehne-handy-bild (handy_bild). Ohne Angabe
   gelten die Maße der Vorlage. */
@media (min-width: 64em){
  .buehne{
    grid-template-columns: var(--buehne-spalten, minmax(0, 1fr) minmax(17rem, 38vw));
    min-height: var(--buehne-hoehe, calc(100svh - 9.5rem));
  }
  /* Breiter als die Bahn: der Text beginnt an derselben Kante wie Kopfzeile und Abschnitte.
     Der Zusatzabstand kommt auf die Höchstbreite oben drauf (border-box) — sonst bleibt ab
     etwa 1700 px Fensterbreite nur ein Wort je Zeile übrig (14.10.2026). */
  .buehne .satz{ padding-left: max(var(--rand), calc((100vw - var(--bahn)) / 2 + var(--rand)));
    max-width: calc(41rem + max(0px, (100vw - var(--bahn)) / 2)); }
  .buehne--mitte .satz{ align-self: center;
    padding-top: clamp(2.5rem, 7vh, 5rem); padding-bottom: clamp(2.5rem, 7vh, 5rem); }
}
@media (min-width: 90em){
  .buehne{ grid-template-columns: var(--buehne-spalten, minmax(0, 1fr) minmax(17rem, 36vw)); }
}
/* Telefon und Tablet hochkant: Foto oben in fester Höhe, Titel und Knopf direkt darunter. */
@media (max-width: 63.99em){
  .buehne--gestapelt{ display: block; min-height: 0; }
  .buehne--gestapelt .foto{ position: relative; inset: auto;
    height: var(--buehne-handy-bild, 55svh); min-height: 16rem; }
  .buehne--gestapelt .schleier{ bottom: auto; height: var(--buehne-handy-bild, 55svh); min-height: 16rem;
    background: linear-gradient(to bottom,
      rgba(var(--n-grund-rgb), .5) 0%, rgba(var(--n-grund-rgb), 0) 16%,
      rgba(var(--n-grund-rgb), 0) 74%, rgba(var(--n-grund-rgb), 1) 100%); }
  .buehne--gestapelt .satz{ max-width: none; padding-top: 1.2rem; background: var(--n-grund); }
}

/* ── Film-Band: breites Bild mit Film, darunter optional Titel und Satz ── */
.film-band{ background: var(--n-grund); color: var(--n-hell); }
.film-band--tag{ background: var(--t-grund); color: var(--t-schrift); }
.film-band-bild{ position: relative; overflow: hidden; background: var(--n-grund);
  aspect-ratio: var(--film-handy, 4 / 5); }
.film-band-bild img,
.film-band-bild .film{ position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--film-ursprung, 50% 50%); }
.film-band-bild .film{ z-index: 1; opacity: 0; animation: filmauf 1100ms var(--kurve-aus) 260ms both; }
.film-band-bild .ki-hinweis{ top: auto; bottom: .6rem; right: var(--rand); }
.film-band-text{ padding-top: clamp(1.8rem, 4vw, 2.8rem); padding-bottom: clamp(2.6rem, 6vw, 4.2rem); }
.film-band-text .vorlauf{ margin-bottom: 0; }
.film-band--nacht .vorlauf{ color: var(--n-still); }
.film-band--tag .vorlauf{ color: var(--t-still); }
.film-band--tag .eyebrow{ color: var(--zweit-tag); }
@media (min-width: 48em){
  .film-band-bild{ aspect-ratio: var(--film-verhaeltnis, 21 / 9); max-height: 82vh; }
}
/* Film als Abbildung in einer Spalte (bausteine.film_figur): Hochformat bleibt Hochformat und scharf. */
.film-figur-bild{ position: relative; overflow: hidden; background: var(--n-grund);
  aspect-ratio: var(--film-verhaeltnis, 4 / 5); }
figure.figur.film-figur .film-figur-bild img,
figure.figur.film-figur .film-figur-bild .film{ position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--film-ursprung, 50% 50%); }
.film-figur-bild .film{ z-index: 1; opacity: 0; animation: filmauf 1100ms var(--kurve-aus) 260ms both; }
.film-figur-bild .ki-hinweis{ top: auto; bottom: .6rem; right: .6rem; }
/* Filme weiter unten (preload="none", Start per assets/menue.js): unsichtbar, bis sie laufen —
   kein leerer Videokasten über dem Standbild, kein Sprung (Standbild = erstes Bild). */
.film-band-bild .film--spaeter,
.film-figur-bild .film--spaeter{ animation: none; opacity: 0; transition: opacity 700ms var(--kurve-aus); }
.film-band-bild .film--spaeter.film--laeuft,
.film-figur-bild .film--spaeter.film--laeuft{ opacity: 1; }

/* ── KI-Kennzeichnung ───────────────────────────────────────────────
   Die Marke sitzt oben links im nächsten Kasten. :where() hält die Regel bei
   Spezifität 0: ein Kasten, der schon absolut steht (Bühnenfoto), bleibt es. */
:where(:has(> .ki-marke)){ position: relative; }
.ki-marke{
  position: absolute; z-index: 3; top: .55rem; left: .55rem;
  display: inline-flex; align-items: center; padding: .3rem .55rem; border-radius: 2px;
  background: var(--n-tief); color: var(--n-hell);
  font-family: var(--txt); font-size: var(--f-mikro); font-weight: var(--etikett-gewicht);
  line-height: 1.2; letter-spacing: var(--sp-etikett); text-transform: uppercase;
}
.ki-marke--standbild{ display: none; }
@media (prefers-reduced-motion: reduce){
  /* Film aus → das Standbild steht allein; ist es selbst KI-bearbeitet, trägt es die Marke. */
  .ki-marke--standbild{ display: inline-flex; }
}
.figur{ margin: 0; }
.figur img{ width: 100%; height: auto; }
.figur figcaption{ margin-top: .55rem; font-size: var(--f-klein); line-height: 1.5; color: var(--t-still); }
.teil--nacht .figur figcaption{ color: var(--n-still); }
/* Bildnachweis im Impressum (bausteine.ki_nachweis) */
.text .ki-liste b{ color: var(--t-schrift); font-weight: 600; }
.ki-liste-wo{ display: block; font-size: var(--f-klein); }

@media (min-width: 64em){
  .fuss-netz{ grid-template-columns: repeat(var(--fuss-spalten, 3), minmax(0,1fr)); }
}

@media print{
  .kopf, .fuss, .abschluss, .sprung{ display: none !important; }
  .speisekarte{ min-height: 0; padding: 0; }
  .karte-netz{ columns: 2; }
  .karte-netz > div{ break-inside: avoid; }
  a{ text-decoration: none; color: inherit; }
}

/* Faktenliste auf dunklem Grund (14.10.2026 abends): Etikett Edelstahl, Text und Links hell.
   Vorher trug sie auch in .teil--nacht die Tag-Farben — Links waren dort unsichtbar. */
.teil--nacht .fakten{ border-top-color: var(--n-linie); }
.teil--nacht .fakten li{ border-bottom-color: var(--n-linie); }
.teil--nacht .fakten b{ color: var(--zweit); }
.teil--nacht .fakten span{ color: var(--n-hell); }
.teil--nacht .fakten a{ color: var(--n-hell); text-decoration-color: rgba(var(--n-hell-rgb), .45); }
.teil--nacht .fakten a:hover{ text-decoration-color: var(--n-hell); }

/* ══ Akzente und Hintergrund (BAUPLAN-5, Nicola 14.10.2026 abends: „Akzentfarben rein und Hintergrund-Designelemente“) ══
   Ein kurzer Strich vor jeder Augenzeile (Rot auf Hell, Petrol auf Dunkel), ein Hauch Mosaik wie am Kupferofen im
   Café (nur auf Dunkel, zur Ecke hin auslaufend), die Linie des Vesuvs unter jedem Kopfstück und über dem Fuß.
   Nur Dekor über Pseudoelemente: liest kein Screenreader, fängt keinen Klick, fällt im Druck weg. Farben aus
   farben.css (--golf-hell, --akzent); ohne diese Werte greifen --zweit bzw. currentColor. */
:root{
  --ornament-n: var(--golf-hell, var(--zweit));
  --ornament-t: var(--akzent, currentColor);
  --mosaik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='white'%3E%3Crect x='1' y='1' width='12' height='12' opacity='.07'/%3E%3Crect x='15' y='1' width='12' height='12' opacity='.035'/%3E%3Crect x='1' y='15' width='12' height='12' opacity='.05'/%3E%3Crect x='15' y='15' width='12' height='12' opacity='.085'/%3E%3C/g%3E%3C/svg%3E");
  --vesuv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 78 C120 77 210 70 300 58 C350 50 380 34 410 31 L440 33 L462 27 L488 31 L515 29 C540 33 552 40 566 41 C600 38 640 22 676 15 L690 13 L716 13 L728 15 C770 26 840 48 930 64 C1010 74 1100 78 1200 78' fill='none' stroke='black' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M703 11 C698 7 708 4 702 0' fill='none' stroke='black' stroke-width='1' opacity='.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --vesuv-hoehe: clamp(2.2rem, 4.5vw, 4.2rem);
}
.eyebrow::before{ content: ""; flex: none; width: 1.5rem; height: 2px; background: var(--ornament-n); }
.teil--tag .eyebrow::before, .teil--tag-zweit .eyebrow::before{ background: var(--ornament-t); }

.teil--nacht, .kopfstueck, .fuss{ position: relative; isolation: isolate; }
.teil--nacht::before, .kopfstueck::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--mosaik); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(110% 85% at 100% 0%, #000 0%, transparent 62%);
          mask-image: radial-gradient(110% 85% at 100% 0%, #000 0%, transparent 62%);
}
.kopfstueck::before{
  -webkit-mask-image: radial-gradient(90% 90% at 0% 0%, #000 0%, transparent 60%);
          mask-image: radial-gradient(90% 90% at 0% 0%, #000 0%, transparent 60%);
}
.kopfstueck::after, .fuss::before{
  content: ""; position: absolute; left: 0; right: 0; z-index: -1; height: var(--vesuv-hoehe); pointer-events: none;
  background: var(--ornament-n); opacity: .38;
  -webkit-mask: var(--vesuv) center bottom / min(100%, 90rem) 100% no-repeat;
          mask: var(--vesuv) center bottom / min(100%, 90rem) 100% no-repeat;
}
.kopfstueck::after{ bottom: 0; }
.fuss::before{ top: 0; opacity: .3; }
.fuss{ padding-top: calc(clamp(2.5rem, 5vw, 4rem) + var(--vesuv-hoehe) * .6); }

/* Band in Petrol (z. B. Hochzeiten): eigene Werte für Nebentext und Etiketten, damit der Kontrast hält */
.teil--golf{ --n-grund: var(--golf, #1E4A53); --n-still: #C3D4D7; --zweit: #C3D4D7; --ornament-n: #E4EEEF;
  background: var(--golf, #1E4A53); }

@media print{
  .teil--nacht::before, .kopfstueck::before, .kopfstueck::after, .fuss::before, .eyebrow::before{ display: none; }
}

/* ══ Wappen (15.10.2026, Nicola 14.10.: „logo wappen, mit zwei pferden … wie grill royal“) ══
   Zwei steigende Pferde halten einen Schild mit dem Vesuv, in dessen Fuß der Ofen sitzt. Eine Datei
   (assets/marke/wappen-zeichen.svg aus gemeinsam/marke/) als Maske in der Schriftfarbe: Kopfzeile,
   Wasserzeichen (höchstens eins je Seite, wie bisher das Monogramm) und leere Flächen. --monogramm bleibt
   als Rückfall in farben.css stehen, wird aber nicht mehr gezeigt. */
:root{
  --wappen: url(marke/wappen-zeichen.svg);
  --wappen-verhaeltnis: 1702 / 935;
}
.marke{ width: auto; height: 2.75rem; font-size: 1rem; }
.marke > span{ display: inline-flex; align-items: center; gap: .7rem; transform: none; }
.wappen{ display: block; flex: none; height: 2.45rem; width: auto; aspect-ratio: var(--wappen-verhaeltnis);
  background: currentColor;
  -webkit-mask: var(--wappen) center / contain no-repeat;
          mask: var(--wappen) center / contain no-repeat; }
.marke-text{ display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; line-height: 1; }
.marke-wort{ font-family: var(--dis); font-weight: 600; font-size: 1.14rem; letter-spacing: .16em;
  text-transform: uppercase; margin-right: -.16em; }
.marke-zeile{ font-family: var(--txt); font-weight: 600; font-size: .56rem; letter-spacing: .42em;
  text-transform: uppercase; color: var(--zweit); margin-right: -.42em; transition: color 200ms var(--kurve-aus); }
.marke:hover .marke-zeile{ color: var(--n-hell); }
/* Telefon: Kopf-Knopf und „Menü“ brauchen den Platz — nur das Wappen, der Name steht im h1 */
@media (max-width: 47.99em){
  .marke-text{ display: none; }
}
@media (max-width: 23.5em){
  .wappen{ height: 1.55rem; }   /* so breit wie früher das „M“ (2.75rem): Knöpfe behalten ihren Platz */
}

/* Wasserzeichen und leere Flächen: Wappen statt Buchstabe */
.mit-zeichen::before, .tuer-leer::after, .foto--leer::after{
  content: ""; font-size: 0; color: transparent; -webkit-text-stroke: 0; text-stroke: 0;
  height: auto; aspect-ratio: var(--wappen-verhaeltnis);
  background: var(--n-hell);
  -webkit-mask: var(--wappen) center / contain no-repeat;
          mask: var(--wappen) center / contain no-repeat;
}
.mit-zeichen::before{ width: clamp(12rem, 28vw, 24rem); }
.name-teil.mit-zeichen::before{ width: clamp(14rem, 38vw, 36rem); }
.tuer-leer::after{ width: 72%; opacity: .14; right: 14%; bottom: 14%; }
.foto--leer::after{ width: min(58%, 34rem); opacity: .16; }
@media (max-width: 47.99em){
  .name-teil.mit-zeichen::before{ width: clamp(11rem, 52vw, 18rem); }
}
/* Abschlussband (beide Seiten, vorher nur Dining mit der Wortmarke): leise, rechts neben dem Satz,
   die Knöpfe rücken davor; auf dem Telefon unten rechts. */
.abschluss.mit-zeichen::before{
  top: 50%; bottom: auto; left: auto; transform: translateY(-50%);
  right: calc((100% - min(100%, var(--bahn))) / 2 + var(--rand));
  width: clamp(11rem, 24vw, 20rem);
  background: rgba(var(--zweit-rgb), .13);
  text-shadow: none; animation: none; opacity: 1;
}
@media (min-width: 48em){
  .abschluss.mit-zeichen .tun{ padding-right: calc(clamp(11rem, 24vw, 20rem) + 1.5rem); }
}
@media (max-width: 47.99em){
  .abschluss.mit-zeichen::before{ top: auto; bottom: clamp(1.4rem, 5vw, 2rem); transform: none; width: 9.5rem; }
}
@media print{
  .mit-zeichen::before, .tuer-leer::after, .foto--leer::after{ display: none; }
  .wappen{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* Café: Maisto-Wortmarke mit dem Bohnen-O statt Wappen (Nicola 15.10.2026: „Maisto Café behält sein normales Logo“,
   Dining trägt das Wappen). Auf dem Telefon nur die Wortmarke, unter 23,5em kleiner (Kopf-Knöpfe behalten Platz). */
.wortmarke{ display: block; flex: none; height: 1.02rem; width: auto; }
.marke-zeile--neben{ padding-left: .7rem; border-left: 1px solid rgba(var(--zweit-rgb), .55); }
@media (max-width: 47.99em){ .marke-zeile--neben{ display: none; } }
@media (max-width: 26em){ .wortmarke{ height: .86rem; } }
@media (max-width: 23.5em){ .wortmarke{ height: .62rem; } }