/* ==========================================================================
   Mamma Mia · Vorschau 2026-09 · start.css
   Die Startseite (Runde 6, Ansage Auftraggeber 23.09.2026) und, ab §14, die
   Bewertungswand von bewertungen.html.  Reihenfolge der Startseite:
     1  Einstieg (Text links, p04 rechts)     6  Gäste, ein Zitat groß
     2  Bildband, ziehbar                  6b Partyservice (Runde 8)
                                           7  Kontakt
     3  Über uns mit Zeitstrahl            8  Karte als Querbalken
     4  Antonino empfiehlt                 9  Häufige Fragen + Fragefeld
     5  Film, spielt auf der Seite
   Farben, Abstände, Schriften kommen ausschließlich aus den Tokens in
   basis.css.  Kein Schatten, kleine Radien, feine Linien.  Bewegung nur
   über transform und opacity, eine Kurve (--ease-aus), und bei
   prefers-reduced-motion steht alles.
   ========================================================================== */

:root { --ease-aus: cubic-bezier(0.23, 1, 0.32, 1); }

/* ---------- 0. Sprungziele der Hauptnavigation ----------------------------
   Der Kopf steht sticky (4,25rem + 1px Linie).  Die Abschnitte tragen ihre
   Luft selbst, das Ziel muss also nur unter dem Kopf beginnen. */

#familie,
#empfehlungen,
#film,
#gaeste,
#partyservice,
#kontakt,
#fragen { scroll-margin-top: calc(4.25rem + 1px); }

/* ---------- 1. Einstieg ----------------------------------------------------
   Runde 8 (Nachtrag Auftraggeber 23.09.2026): auf JEDER Breite geteilt, Text
   links, das Foto p04 rechts daneben, nie darunter.  Handy und Tablet
   trennt eine schräge Kante (clip-path), am Schreibtisch bleibt die gerade
   Kante wie bisher.

   Handy (< 48rem): der Einstieg füllt den ersten Bildschirm zwischen Kopf
   und Handyleiste (100svh minus Kopf minus Leiste).  Das Foto liegt als
   rechte Hälfte (54 %) absolut im Raster, oben um 28 % eingezogen: die
   Kante fällt von oben rechts nach unten links.  Gerechnet wird in cqw
   (Breite des Rasters), damit die Maße an der Kante hängen und nicht an
   der Bildlaufleiste.

   Ab 48rem zwei Spalten: Text links, Foto rechts bis an den Rand des
   Sichtfensters, so hoch wie der erste Bildschirm.  Die Seitenluft trägt
   .start__raster als padding-left, gerechnet mit 100 % statt 100vw (sonst
   Querlauf um die Breite der Bildlaufleiste). */

.start {
  background: var(--grund);
  color: var(--text);
  overflow: hidden;
}

.start__raster {
  display: grid;
  align-items: center;
}

.start__text {
  padding: var(--a7) var(--rand) var(--a6);
}

/* Große Schrift läuft optisch auseinander: negativ sperren, eng setzen. */
.start__gruss {
  font-size: clamp(2.375rem, 1.5rem + 3.2vw, 4.375rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 16ch;
  text-wrap: balance;
}

.start__motto {
  margin-top: var(--a4);
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem);
  line-height: 1.2;
  color: var(--akzent);
}

.start__tat {
  margin-top: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  align-items: center;
  column-gap: var(--a5);
  row-gap: var(--a4);
}

.start__bild {
  position: relative;
  overflow: hidden;
  background: var(--sand-hell);
}
.start__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Handy: geteilt, schräge Kante.  Das Foto ist oben schmal (Wand) und
   unten breit (Antonino, Theke); die Kante läuft von oben rechts nach unten
   links.  Die Textbreiten folgen der Kante: oben (Überschrift) ist am
   meisten Platz, unten (Knopf, Status) am wenigsten.  Gemessen wird der
   Abstand jeder Textzeile zur Kante (Runde 8, 320 bis 430 px). */
@media (max-width: 47.9375rem) {
  .start__raster {
    position: relative;
    container-type: inline-size;
    min-height: calc(100vh - 4.25rem - 1px - var(--leiste-h));
    min-height: calc(100svh - 4.25rem - 1px - var(--leiste-h));
  }
  /* Runde 9: mit Skript ruht die Handyleiste über dem Einstieg (§1b),
     darum füllt er den GANZEN ersten Bildschirm unter dem Kopf.  Vorher
     endete er über der (weggeglittenen) Leiste, und in dem Spalt lag das
     erste Bildband schon angeschnitten im Bild.  Ohne Skript steht die
     Leiste, dann gilt die Höhe darüber. */
  html.js .start__raster {
    min-height: calc(100vh - 4.25rem - 1px);
    min-height: calc(100svh - 4.25rem - 1px);
  }
  .start__text {
    position: relative;
    z-index: 1;
    padding: var(--a6) 0 var(--a6) var(--rand);
  }
  .start__gruss {
    font-size: clamp(1.6875rem, 0.85rem + 4.3vw, 2.5rem);
    line-height: 1.06;
    max-width: calc(52cqw - var(--rand) - 0.75rem);
    hyphens: manual;
  }
  .start__motto {
    margin-top: var(--a3);
    font-size: clamp(1.0625rem, 0.8rem + 1.2vw, 1.375rem);
    max-width: calc(50cqw - var(--rand) - 0.75rem);
  }
  .start__tat {
    margin-top: var(--a5);
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--a3);
    max-width: calc(48cqw - var(--rand) - 0.75rem);
  }
  .start__tat .knopf {
    min-height: 52px;
    padding-inline: 0.75rem;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  .start__tat .status { font-size: 0.8125rem; line-height: 1.35; letter-spacing: 0.02em; }
  .start__tat [data-status-text] { text-wrap: balance; }
  .start__bild {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 54%;
    clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
  }
  .start__foto { object-position: 47% 50%; }
}
/* Hochformat: der hohe Ausschnitt p04-einstieg-hoch (index.html,
   <picture>) ist schon auf Antonino zentriert. */
@media (max-width: 47.9375rem) and (orientation: portrait) {
  .start__foto { object-position: 50% 50%; }
}
@media (max-width: 47.9375rem) and (min-width: 22.5rem) {
  .start__tat .knopf { padding-inline: 0.875rem; font-size: 0.75rem; }
}

@media (min-width: 48rem) {
  .start__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    column-gap: clamp(2rem, 4vw, 4.5rem);
    min-height: calc(100vh - 4.25rem - 1px);
    min-height: calc(100svh - 4.25rem - 1px);
    /* 2.20.5: Rechenfunktion EINZEILIG lassen. LiteSpeeds Minimierer
       (extractMath, Regex mit /m) endet am Zeilenende; mehrzeilig fiel live
       das Komma weg, die Regel wurde ungültig, Einzug 0 px. */
    padding-left: max(var(--rand), calc((100% - var(--breit)) / 2 + var(--rand)));
  }
  .start__text { padding: var(--a9) 0; }
  .start__bild {
    align-self: stretch;
    min-height: 32rem;
  }
}

/* Tablet: dieselbe schräge Kante wie am Handy, flacher. */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .start__bild { clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
  .start__foto { object-position: 50% 46%; }
}

@media (prefers-reduced-motion: no-preference) {
  html.js .start__foto {
    animation: einstieg-bild 1200ms var(--ease-aus) 40ms both;
  }
}
@keyframes einstieg-bild {
  from { transform: scale(1.035); }
  to   { transform: none; }
}

/* ---------- 1b. Handyleiste ruht über dem Einstieg -----------------------
   js/start.js setzt html.leiste-ruht, solange Einstieg oder erstes
   Bildband im Bild sind (dort lagen sonst die zwei Leistenknöpfe auf dem
   Bildband).  Die Leiste gleitet nach unten weg und ist dann auch nicht
   bedienbar (visibility), danach kommt sie in 280 ms zurück.  Nur
   transform und opacity; bei reduzierter Bewegung ohne Gleiten. */
@media (max-width: 47.9375rem) {
  .leiste {
    transition: transform 280ms var(--ease-aus), opacity 200ms var(--ease-aus),
                visibility 0s linear 0s;
  }
  html.leiste-ruht .leiste {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
    visibility: hidden;
    transition: transform 240ms var(--ease-aus), opacity 200ms var(--ease-aus),
                visibility 0s linear 240ms;
  }
}
@media (max-width: 47.9375rem) and (prefers-reduced-motion: reduce) {
  .leiste,
  html.leiste-ruht .leiste { transition: none; }
}

/* ---------- 2. Bildband ----------------------------------------------------
   Ein Fries aus echten Fotos, reine Dekoration (aria-hidden).  Zwei gleiche
   Reihen hintereinander, der Umlauf geht genau um eine Reihenbreite, daher
   ohne Sprung.  Runde 6: läuft IMMER (kein Anhalten bei Hover, kein Knopf)
   und lässt sich ziehen; die Bewegung rechnet js/start.js.  Ohne Skript
   läuft dieselbe Strecke als CSS-Animation.  Bei reduzierter Bewegung
   steht das Band, ziehen geht trotzdem. */

.fries {
  position: relative;
  overflow: hidden;
  background: var(--espresso);
  padding-block: var(--a4);
  border-block: var(--strich) solid var(--linie-dunkel);
}

.fries__lauf {
  display: flex;
  width: max-content;
}
html:not(.js) .fries__lauf { animation: fries-lauf 78s linear infinite; }

html.js .fries {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
html.js .fries.ist-gezogen { cursor: grabbing; }
html.js .fries__lauf { will-change: transform; }

.fries__reihe {
  display: flex;
  flex: none;
  gap: var(--a3);
  padding: 0 var(--a3) 0 0;   /* trägt den Abstand zur nächsten Reihe selbst */
  margin: 0;
  list-style: none;
}

.fries__bild {
  flex: none;
  height: clamp(10rem, 7.4rem + 6vw, 15rem);   /* 160 px … 240 px */
  width: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  pointer-events: none;
  -webkit-user-drag: none;
}

@keyframes fries-lauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.js) .fries__lauf { animation: none; }
}

/* ---------- 3. Über uns ----------------------------------------------------
   Text links (breiter), Bild rechts, am Handy Text zuerst.  Unter dem Bild
   der Zeitstrahl: eine Haarlinie, drei Marken, drei Randnotizen.  Die
   dritte Marke rechts ist das Heute, als kleiner gefüllter Punkt am Ende
   der Linie. */

/* Handy und Tablet (< 52rem, Nachtrag Auftraggeber 23.09.2026: nebeneinander,
   wo es lesbar bleibt): Überschrift über die ganze Breite, darunter Text
   links und Bild rechts, dann Zeitstrahl und Knopf wieder breit.  Dafür
   löst sich .familie__wort auf (display: contents, ein schlichtes div ohne
   Bedeutung), seine Teile liegen direkt im Raster.
   Ab 52rem: Text links über beide Zeilen, rechts Bild und darunter der
   Zeitstrahl, wie bisher. */
.familie__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  grid-template-areas:
    "kopf  kopf"
    "text  bild"
    "notiz notiz"
    "tat   tat";
  column-gap: var(--a4);
  align-items: start;
}
.familie__wort { display: contents; }
.familie__wort .abschnitt__kopf { grid-area: kopf; margin-bottom: var(--a5); }
.familie__text { grid-area: text; font-size: 0.9375rem; line-height: 1.55; hyphens: auto; }
.familie__wort .tat-reihe { grid-area: tat; margin-top: var(--a6); }
.familie__bild { grid-area: bild; }
.notizen { grid-area: notiz; }
@media (min-width: 30rem) {
  .familie__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: var(--a5); }
  .familie__text { font-size: var(--t-basis); line-height: var(--zeile-text); }
}
@media (min-width: 52rem) {
  .familie__raster {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas:
      "wort bild"
      "wort notiz";
    grid-template-rows: auto auto;
    column-gap: var(--a8);
    align-items: center;
  }
  .familie__wort { display: block; grid-area: wort; }
  .familie__wort .abschnitt__kopf { margin-bottom: var(--a6); }
  .familie__text { font-size: inherit; }
  .familie__wort .tat-reihe { margin-top: var(--a6); }
  .notizen { align-self: start; }
}
.familie__text > p + p { margin-top: var(--a4); }
@media (max-width: 29.9375rem) {
  .familie__text > p + p { margin-top: var(--a3); }
}

/* Auf Sand trägt der Nebenton nur 4,76:1 (gemessen am Pixel 4,49).  Auf den
   Seiten mit start.css steht er darum auf Sand eine Stufe dunkler: 5,72:1. */
.abschnitt--sand { --text-leise: #5f5750; }

.notizen { margin-top: var(--a5); }

.notizen__liste {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--a5);
  padding-top: var(--a4);
  margin: 0;
  list-style: none;
}
.notizen__liste::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--espresso) 26%, transparent);
  transform-origin: left center;
}

.notiz { position: relative; }
.notiz::before {                 /* die Marke auf der Linie */
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * var(--a4) - 4px);
  width: 1px;
  height: 9px;
  background: var(--akzent);
}
.notiz--heute { text-align: right; }
.notiz--heute::before {
  left: auto;
  right: 0;
  top: calc(-1 * var(--a4) - 3px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.notiz__wann {
  display: block;
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--akzent);
}
.notiz__was {
  display: block;
  margin-top: var(--a1);
  font-family: var(--serif);
  font-size: var(--t-basis);
  line-height: 1.3;
  color: var(--text);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {
  html.js .notizen .notizen__liste::before {
    transform: scaleX(0);
    transition: transform 900ms var(--ease-aus) 120ms;
  }
  html.js .notizen.ist-da .notizen__liste::before { transform: none; }
}

/* ---------- 4. Antonino empfiehlt -----------------------------------------
   Runde 9 (Nachtrag Auftraggeber 23.09.2026 abends): auf JEDER Breite nur zwei
   Teller, Alessandro und Carbonara, gleich groß nebeneinander (Funghi ist
   aus dem HTML raus).  Beide Bilder im selben Format, dadurch stehen Namen
   und Preise auf einer Linie.  Der gefüllte Knopf steht mittig darunter,
   über beide Spalten.  Nur Name und Preis. */

.teller-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "a   c"
    "tat tat";
  column-gap: clamp(0.875rem, 0.3rem + 3vw, 3.5rem);
  row-gap: clamp(2rem, 1.25rem + 2.4vw, 3.5rem);
  align-items: start;
}
.teller--a { grid-area: a; }
.teller--c { grid-area: c; }
.teller__tat {
  grid-area: tat;
  justify-self: center;
}

.teller .rahmen { aspect-ratio: 4 / 5; }
@media (min-width: 48rem) {
  .teller .rahmen { aspect-ratio: 5 / 4; }
}

/* Name links, Preis rechts auf derselben Grundlinie; am Handy darunter. */
.teller__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a1) var(--a4);
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--a4);
}
.teller__kopf h3 {
  flex: 1 1 auto;
  font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.75rem);
  line-height: 1.15;
}
.teller__preis {
  flex: none;
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (min-width: 48rem) {
  .teller__preis { font-size: var(--t-basis); }
}
@media (max-width: 47.9375rem) {
  .teller__kopf { margin-top: var(--a3); }
}

/* ---------- 5. Film --------------------------------------------------------
   Kleiner als bisher: Text links, der Film rechts, am Handy untereinander.
   Vor dem Klick nur das eigene Foto mit dem Wort-Knopf; das iframe von
   youtube-nocookie.com setzt erst js/start.js nach dem Klick ein. */

.film__raster {
  display: grid;
  gap: var(--a6);
  align-items: center;
}
@media (min-width: 52rem) {
  .film__raster {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--a8);
  }
}
.film__wort h2 { max-width: 16ch; }
.film__wort .vorspann { margin-top: var(--a4); max-width: 34ch; }

.film__angaben {
  margin-top: var(--a5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--a1) var(--a5);
  font-size: var(--t-klein);
  letter-spacing: 0.04em;
  color: var(--auf-dunkel-weich);
  font-variant-numeric: tabular-nums;
}

.film { position: relative; background: var(--linie-dunkel); }

.film__knopf {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(40 35 31 / 0.28);
  cursor: pointer;
  transition: background-color var(--zeit) var(--kurve);
}
.film__knopf:hover { background: rgb(40 35 31 / 0.18); }
.film__knopf:focus-visible { outline: 2px solid var(--sand); outline-offset: -6px; }

/* Wort statt Piktogramm (Ansage Auftraggeber 22.09.2026). */
.film__marke {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius);
  background: var(--elfenbein);
  color: var(--espresso);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 160ms var(--ease-aus), background-color var(--zeit) var(--kurve);
}
.film__knopf:hover .film__marke { background: var(--sand); }
.film__knopf:active .film__marke { transform: scale(0.97); }

.film iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.film__hinweis {
  margin-top: var(--a3);
  font-size: var(--t-klein);
  color: var(--auf-dunkel-weich);
}
.film__hinweis a { color: var(--sand); text-decoration-color: color-mix(in srgb, var(--sand) 50%, transparent); }

/* ---------- 6. Gäste -------------------------------------------------------
   EIN Zitat groß.  Die Bahn ist ein waagerechter Scroll-Container mit
   Einrasten: am Handy wischt man sie mit dem Finger, ganz ohne Skript.
   js/start.js legt nur die Pfeile und den 15-Sekunden-Takt darüber.  Alle
   Stimmen stehen gleich hoch nebeneinander (Flex streckt sie auf die
   längste), daher springt beim Wechsel nichts. */

.gaeste { text-align: center; }

.gaeste__buehne {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "zurueck bahn vor";
  align-items: center;
  column-gap: clamp(0.5rem, 2vw, 2rem);
}
.gaeste__pfeil--zurueck { grid-area: zurueck; }
.gaeste__pfeil--vor { grid-area: vor; }
.gaeste__bahn { grid-area: bahn; }

.gaeste__bahn {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gaeste__bahn::-webkit-scrollbar { display: none; }
.gaeste__bahn:focus-visible { outline: 2px solid var(--fokus); outline-offset: 6px; }

.gast {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--a2);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.gast figure { margin: 0; }

.gast__wer {
  display: block;
  margin-bottom: var(--a5);
  font-size: var(--t-klein);
  letter-spacing: 0.04em;
  color: var(--text-leise);
}
.gast__name { font-weight: 500; color: var(--text); }

.gast__zitat {
  margin: 0 auto;
  max-width: 26ch;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 0.95rem + 2.6vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.gaeste__pfeil {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--strich) solid color-mix(in srgb, var(--weinrot) 32%, transparent);
  border-radius: 50%;
  color: var(--weinrot);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--zeit) var(--kurve), transform 120ms var(--ease-aus);
}
.gaeste__pfeil:hover { border-color: var(--weinrot); }
.gaeste__pfeil:active { transform: scale(0.94); }

/* Am Handy stehen die Pfeile unter dem Zitat, die Bahn bekommt die ganze
   Breite zum Wischen. */
@media (max-width: 47.9375rem) {
  .gaeste__buehne {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "bahn bahn"
      "zurueck vor";
    row-gap: var(--a6);
  }
  .gaeste__pfeil--zurueck { justify-self: end; margin-right: var(--a2); }
  .gaeste__pfeil--vor { justify-self: start; margin-left: var(--a2); }
}

.gaeste__quelle {
  margin: var(--a7) auto 0;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-leise);
}
.gaeste__quelle a { color: inherit; }

/* Wechsel über das Ende hinaus (20 -> 1): kurz ausblenden, springen,
   einblenden, statt 19 Stimmen zurückzurollen. */
.gaeste__bahn { transition: opacity 160ms var(--kurve); }
.gaeste__bahn.ist-sprung { opacity: 0; }

/* ---------- 6b. Partyservice ---------------------------------------------
   Klein und ruhig: eine Zeile Elfenbein zwischen Gästen (Rosé) und Kontakt
   (Sand).  Überschrift und Satz links, der Anruf rechts daneben, auch am
   Handy.  Kein Foto, keine Fläche, kein Symbol. */

.party { padding-block: clamp(2.25rem, 1.6rem + 3vw, 4rem); }

.party__reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a5) clamp(1.25rem, 4vw, 4rem);
}
.party__wort { min-width: 0; }
.party__kopf { font-size: var(--t-h3); line-height: 1.15; }
.party__satz {
  margin-top: var(--a2);
  max-width: 44ch;
  color: var(--text-leise);
  text-wrap: pretty;
}
.party__tat { flex: none; }
@media (max-width: 47.9375rem) {
  .party__reihe { gap: var(--a4); }
  .party__satz { font-size: var(--t-klein); line-height: 1.5; }
  .party__tat { padding-inline: 1.125rem; }
}

/* ---------- 7. Kontakt -----------------------------------------------------
   Am Handy: Überschrift, dann Text und Bild NEBENEINANDER, darunter die
   Knöpfe über die ganze Breite.  Ab 52rem: Text links, das Bild rechts
   über die volle Höhe; die Textspalte streckt sich auf die Bildhöhe
   (Knöpfe unten bündig mit der Bildkante). */

.kontakt__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  grid-template-areas:
    "kopf kopf"
    "wort bild"
    "tat  tat";
  column-gap: var(--a5);
  row-gap: var(--a5);
}
.kontakt__kopf { grid-area: kopf; }
.kontakt__wort { grid-area: wort; }
.kontakt__tat  { grid-area: tat; }
.kontakt__bild { grid-area: bild; }

.kontakt__bild .rahmen {
  height: 100%;
  min-height: 12rem;
}

@media (min-width: 52rem) {
  .kontakt__raster {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "kopf bild"
      "wort bild"
      "tat  bild";
    column-gap: var(--a8);
    row-gap: var(--a6);
  }
  /* Bild quadratisch: dann trägt die Textspalte (Überschrift, Adresse,
     Zeiten, Knöpfe) fast genau seine Höhe, die Knöpfe schließen unten
     bündig mit der Bildkante ab. */
  .kontakt__bild .rahmen { height: auto; aspect-ratio: 1 / 1; }
  .kontakt__tat { align-self: end; }
}

.kontakt__adresse {
  font-style: normal;
  font-family: var(--serif);
  font-size: var(--t-gross);
  line-height: 1.35;
}

.kontakt__zeiten {
  margin: var(--a4) 0 0;
  padding: 0;
  list-style: none;
  max-width: 22rem;
  font-size: var(--t-klein);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
.kontakt__zeiten li {
  display: flex;
  justify-content: space-between;
  gap: var(--a3);
}
.kontakt__zeiten li span + span { white-space: nowrap; color: var(--text-leise); }
@media (min-width: 52rem) {
  .kontakt__zeiten { margin-top: var(--a5); font-size: var(--t-basis); line-height: 1.6; }
}

.kontakt__heute { margin-top: var(--a4); }
.kontakt__route { margin-top: var(--a4); }

.kontakt__tat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a3);
}

/* Anrufen: zwei Zeilen im Knopf, die Nummer klein darunter. */
.knopf--zwei {
  flex-direction: column;
  gap: 0.125rem;
  padding-block: 0.45rem;
  line-height: 1.2;
}
.knopf__klein {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}
@media (max-width: 47.9375rem) {
  .kontakt__tat .knopf--zwei { flex: 1 1 100%; }
}

/* ---------- 8. Karte -------------------------------------------------------
   Querbalken Rand an Rand.  Das Bild ist ein eigenes, statisches WebP aus
   OpenStreetMap-Kacheln; seine Mitte ist das Haus, die Marke sitzt darum
   genau in der Mitte (object-position 50 % 50 %).  Die ganze Fläche ist
   der Verweis zur Route. */

.lage {
  position: relative;
  background: var(--sand-hell);
  border-block: var(--strich) solid var(--linie);
}
.lage__flaeche {
  position: relative;
  display: block;
  height: clamp(16rem, 11rem + 14vw, 26rem);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.lage__flaeche picture { display: block; width: 100%; height: 100%; }
.lage__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform 600ms var(--ease-aus);
}
@media (hover: hover) and (pointer: fine) {
  .lage__flaeche:hover .lage__bild { transform: scale(1.015); }
}
.lage__flaeche:focus-visible { outline: 2px solid var(--fokus); outline-offset: -4px; }

.lage__marke {
  position: absolute;
  left: calc(50% - 1.375rem);
  top: calc(50% - 1.375rem);
  display: flex;
  align-items: center;
  gap: var(--a3);
}
.lage__punkt {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--elfenbein);
  border: var(--strich) solid var(--weinrot);
}
.lage__punkt img { width: 1.75rem; height: 1.75rem; }

.lage__schild {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius);
  background: var(--elfenbein);
  border: var(--strich) solid var(--linie);
  transition: border-color var(--zeit) var(--kurve);
}
.lage__flaeche:hover .lage__schild { border-color: var(--weinrot); }
.lage__name {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.1;
  color: var(--espresso);
}
.lage__route {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--weinrot);
}

.lage__vermerk {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.2rem 0.5rem;
  background: rgb(246 241 232 / 0.88);
  font-size: 0.6875rem;
  color: var(--espresso-weich);
}
.lage__vermerk a { color: inherit; }

/* ---------- 9. Häufige Fragen ----------------------------------------------
   Vier Fragen stehen, der Rest und das Fragefeld klappen über „Andere
   Frage stellen" auf.  Ohne JavaScript ist alles sichtbar und der Schalter
   fehlt.  Keine Kästen, keine Symbole, nur Haarlinien. */

.fragen { max-width: 70ch; margin-inline: auto; }
.fragen__kopf {
  font-size: var(--t-h2);
  margin-bottom: var(--a6);
}

.frage { border-bottom: var(--strich) solid var(--linie); }
.fragen .zeig > .frage:first-child { border-top: var(--strich) solid var(--linie); }

.frage > summary {
  display: flex;
  align-items: baseline;
  gap: var(--a4);
  justify-content: space-between;
  padding-block: var(--a4);
  min-height: 2.75rem;
  cursor: pointer;
  font-family: var(--serif);
  font-size: var(--t-gross);
  line-height: 1.34;
  list-style: none;
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary:focus-visible { outline-offset: -2px; }

/* Das Zeichen ist ein SCHRIFTZEICHEN, kein gezeichnetes Piktogramm (Ansage
   Auftraggeber 22.09.2026).  Zu „+", offen „\2212" (Minuszeichen). */
.frage > summary::after {
  content: "+";
  flex: none;
  width: 13px;
  text-align: center;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1;
  margin-top: 0.3em;
  color: var(--akzent);
}
.frage[open] > summary::after { content: "\2212"; }

.frage > p {
  margin: 0 0 var(--a5);
  padding-right: calc(13px + var(--a4));
  color: var(--text-leise);
  max-width: 62ch;
}

/* 2.20.7 (Ansage Auftraggeber 05.10.2026): kein Schalter und keine aufklappbaren
   weiteren Fragen mehr, das Fragefeld steht direkt unter den vier Fragen. */
.fragefeld { margin: var(--a5) 0 0; }
.fragefeld[hidden] { display: none; }
/* Fragefeld, Runde 10 (Ansage Auftraggeber 23.09.2026: „da muss auch kleiner").
   Eine flache Zeile statt Kasten plus Knopf: feine 1-px-Linie, Eingabe und
   Knopf „Fragen" teilen sich einen Rahmen, 40 px hoch am Schreibtisch,
   44 px am Handy (Fingerziel, pruef.py).  Fokus nur als dunklere Linie
   plus ein ganz leiser Schein, kein dicker roter Rahmen. */
.fragefeld__etikett {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: 0.375rem;
}
.fragefeld__reihe {
  display: flex;
  align-items: stretch;
  max-width: 34rem;
  min-height: 2.875rem;         /* 2.20.12: innen 44 px Tippflaeche fuer Feld und Knopf (Rahmen zaehlt mit, pruef.py) */
  border: var(--strich) solid var(--linie);
  border-radius: var(--radius);
  background: #fffdf9;
  transition: border-color var(--zeit) var(--kurve), box-shadow var(--zeit) var(--kurve);
}
.fragefeld__reihe:hover { border-color: color-mix(in srgb, var(--espresso) 30%, var(--linie)); }
.fragefeld__reihe:focus-within {
  border-color: var(--espresso-weich);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--weinrot) 10%, transparent);
}
.fragefeld__eingabe {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0.75rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
}
.fragefeld__eingabe::placeholder { color: var(--text-leise); opacity: 1; }
.fragefeld__eingabe:focus,
.fragefeld__eingabe:focus-visible { outline: none; }
.fragefeld .knopf {
  flex: none;
  min-height: 0;
  padding: 0 1rem;
  border: 0;
  border-left: var(--strich) solid var(--linie);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: transparent;
  color: var(--weinrot);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}
.fragefeld .knopf:hover { background: color-mix(in srgb, var(--weinrot) 6%, transparent); color: var(--weinrot-tief); }
.fragefeld .knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.fragefeld__hilfe {
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: var(--text-leise);
}
@media (max-width: 47.9375rem), (pointer: coarse) {
  .fragefeld__reihe { min-height: 2.875rem; max-width: none; }  /* innen 44 px (2.20.12) */
  /* 16 px, sonst zoomt Safari am iPhone beim Antippen hinein */
  .fragefeld__eingabe { font-size: 1rem; }
}
.fragefeld__antwort:empty { display: none; }
.fragefeld__antwort {
  margin-top: var(--a5);
  padding: var(--a4) 0 0;
  border-top: var(--strich) solid var(--linie);
}
.fragefeld__antwort p { max-width: 60ch; }
.fragefeld__antwort .tat-reihe { margin-top: var(--a4); }
@media (prefers-reduced-motion: no-preference) {
  .fragefeld__antwort > * { animation: antwort-rein 260ms var(--ease-aus) both; }
}
@keyframes antwort-rein {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Kleine Knöpfe (Nebenknöpfe) -----------------------------------
   Ansage Runde 6: „kleinere Nebenknöpfe".  Weniger Luft und kleinere
   Schrift; die Höhe bleibt bei 40 px am Schreibtisch und 44 px am Handy
   (Ansage 22.09.2026, pruef.py). */
.knopf--klein {
  min-height: 2.5rem;
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
}
@media (max-width: 47.9375rem), (pointer: coarse) {
  /* 23.09.2026 Mobil-Prüfer: auch Tablet (768 px, Finger) bekam 40 px, jetzt 44 px (MB7) */
  .knopf--klein { min-height: 2.75rem; }
}

/* ---------- Reste, die bewertungen.html noch braucht ---------------------- */
.sterne {
  display: block;
  letter-spacing: 0.3em;
  font-size: var(--t-klein);
  color: var(--sand);
}
.stimme__name { font-weight: 500; }

.beleg {
  margin-top: var(--a7);
  padding-top: var(--a5);
  border-top: var(--strich) solid var(--linie);
  font-size: var(--t-klein);
  color: var(--text-leise);
  max-width: 68ch;
}

/* ==========================================================================
   14. BEWERTUNGSWAND (bewertungen.html)
   183 Stimmen, statisch im HTML (erzeugt von _werkzeuge/bewertungen-bauen.py).
   Ruhige Spalten statt Kacheln: CSS-columns bricht die Stimmen umbruchfrei
   auf zwei bzw. drei Spalten, ohne dass eine Stimme zerrissen wird
   (break-inside: avoid).  Kein Raster mit Löchern, keine Karten, keine
   Schatten — nur eine Haarlinie über jeder Stimme.
   ========================================================================== */

.stimmen-wand {
  margin-top: var(--a6);
  column-gap: var(--a7);
}
@media (min-width: 48rem) { .stimmen-wand { column-count: 2; } }
@media (min-width: 72rem) { .stimmen-wand { column-count: 3; } }

.stimme {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding-top: var(--a5);
  margin-bottom: var(--a6);
  border-top: var(--strich) solid var(--linie);
}

.stimme .sterne { color: var(--akzent); }
.sterne__leer { color: var(--linie); }

.stimme blockquote {
  margin-top: var(--a3);
  font-family: var(--serif);
  font-size: var(--t-gross);
  line-height: 1.38;
}
.stimme blockquote p + p { margin-top: var(--a3); }

/* Name klar lesbar: voller Textton, nicht leise. */
.stimme__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a1) var(--a3);
  align-items: baseline;
  margin-top: var(--a4);
  font-size: var(--t-klein);
  letter-spacing: 0.04em;
}
.stimme__fuss .stimme__name { color: var(--text); font-weight: 500; }
.stimme__wann { color: var(--text-leise); }

/* Lange Stimmen: der Anfang steht immer, der Rest klappt auf. */
.stimme__mehr > summary {
  display: block;
  cursor: pointer;
  list-style: none;
  margin-top: var(--a3);
}
.stimme__mehr > summary::-webkit-details-marker { display: none; }
.stimme__anriss {
  display: block;
  font-family: var(--serif);
  font-size: var(--t-gross);
  line-height: 1.38;
}
.stimme__wort {
  display: inline-block;
  margin-top: var(--a3);
  min-height: 24px;
  line-height: 24px;
  font-family: var(--sans);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--akzent);
  border-bottom: var(--strich) solid color-mix(in srgb, var(--akzent) 40%, transparent);
}
.stimme__mehr > summary:hover .stimme__wort { border-bottom-color: var(--akzent); }
.stimme__mehr[open] > summary .stimme__anriss { display: none; }
.stimme__mehr[open] > summary .stimme__wort { margin-top: 0; }
.stimme__mehr[open] > summary { margin-bottom: var(--a3); }
/* Zwei Beschriftungen, immer genau eine sichtbar */
.stimme__mehr:not([open]) > summary .stimme__wort--zu,
.stimme__mehr[open] > summary .stimme__wort--auf { display: none; }

.stimmen-zahl { color: var(--text); }

.fuss__quelle {
  margin-top: var(--a7);
  font-size: var(--t-klein);
  color: var(--auf-dunkel-weich);
}

/* ---------- Tippflächen am Handy (2.20.1) ----------------------------------
   Gemessen 23.09.2026 (375 px, live): die Verweise in Quellen- und
   Hinweiszeilen waren 14 bis 35 px hoch, „Speisekarte“ in Antwort 8 21 px.
   Derselbe Griff wie im Fuß (basis.css, Runde 5): die Fläche wächst auf
   44 px, der negative Außenabstand nimmt genau das wieder heraus.  Zeilen,
   Abstände und Schrift stehen wie vorher, nur der tippbare Bereich wächst.
   Am Schreibtisch mit Maus bleibt alles, wie es ist. */
@media (max-width: 47.9375rem), (pointer: coarse) {
  .film__hinweis a,
  .gaeste__quelle a,
  .fuss__quelle a,
  .lage__vermerk a,
  .frage > p a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -0.625rem;
    margin-block: calc((1lh - 44px) / 2);
  }
}