/* wedding.walliserhof.at — eigene Aufmachung.
 *
 * Der Gedanke: Der ganze Hochzeitstag im Walliserhof passt in einen Spaziergang.
 * 300 Meter zur Kirche, zurück in den Ballsaal, Dessert im Wintergarten. Kein
 * Bus, kein Autokonvoi. Die Seite läuft diesen Weg mit — der Grund wandert von
 * Morgenlicht zu Abend, so wie der Tag selbst.
 *
 * ⭐ Die eine Regel, die man sehen kann: BELEGTE ZAHLEN TRAGEN EINE ANDERE
 *    SCHRIFT ALS VERSPRECHEN. Fließtext steht in EB Garamond und enthält keine
 *    Zahl; jede Zahl steht in General Sans, versalgesperrt, mit ihrer Quelle
 *    darunter (.fakt / .beleg). Wer eine Zahl in einen Garamond-Satz schreibt,
 *    sieht sofort, dass sie dort nicht hingehört.
 *
 * Schriften liegen lokal (static/vendor/fonts) — kein CDN, so wie im ganzen OS.
 */

/* ── Marken-Werte ──────────────────────────────────────────────────────── */
:root {
  /* Farben stammen aus dem Haus, nicht aus einer Palette: Alvierbach am
     Morgen, Kalkputz, die blaue Dämmerung des Bergpanoramas (DJI_0824 ist
     seit Juni der Anmelde-Hintergrund des OS), Fischgrätparkett, Kerzenlicht. */
  --morgen:  #dce3e3;
  --mittag:  #e9e5dc;
  --abend:   #1b2733;
  --nacht:   #10171f;
  --parkett: #a8703f;
  --luster:  #e9c98d;
  --kalk:    #f3f1eb;
  --tinte:   #1b2733;

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --grot:  "General Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --rand: clamp(1.25rem, 5vw, 5rem);
  --spalte: 64rem;
}

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

html { -webkit-text-size-adjust: 100%; }
/* Farbe der Rückweg-Zeile oben (Baustein baukasten/_rand_stil.html): dieselbe Fläche wie der Grund der Seite, Schrift in Kalk. */
body { --heimweg-grund: var(--nacht); --heimweg-farbe: var(--kalk); }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--tinte);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.55vw + 0.95rem, 1.25rem);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

/* Sichtbarer Fokus. Nicht verhandelbar: die Seite wird auch mit der Tastatur
   bedient, und ein unsichtbarer Fokus ist ein kaputter Knopf. */
:focus-visible {
  outline: 2px solid var(--luster);
  outline-offset: 3px;
}

a { color: inherit; }

/* ── Abschnitte und ihr Grund ──────────────────────────────────────────── */
.blatt {
  padding: clamp(3.5rem, 9vw, 8rem) var(--rand);
}
.blatt > .innen {
  max-width: var(--spalte);
  margin-inline: auto;
}
.grund-morgen { background: var(--morgen); color: var(--tinte); }
.grund-mittag { background: var(--mittag); color: var(--tinte); }
.grund-abend  { background: var(--abend);  color: var(--kalk); }
.grund-nacht  { background: var(--nacht);  color: var(--kalk); }
.grund-kalk   { background: var(--kalk);   color: var(--tinte); }   /* Richtung C: hell nach dem Hirschen */

/* ── Typografie ────────────────────────────────────────────────────────── */
.zeile-gross {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 7.5vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.zeile-mittel {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.satz {
  max-width: 34em;
  margin: 0 0 1.1rem;
}
.satz:last-child { margin-bottom: 0; }

/* Das Augenmerk: kleine, gesperrte Versalien in der Grotesk. Trägt Ort,
   Rubrik, Wegmarke — nie einen ganzen Satz. */
.marke {
  font-family: var(--grot);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  opacity: 0.72;
}

/* ⭐ Der belegte Wert. Eigene Schrift, damit man ihn von einem Versprechen
   unterscheiden kann. Darunter steht, woher er kommt. */
.fakt {
  font-family: var(--grot);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.beleg {
  font-family: var(--grot);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  opacity: 0.82; /* war 0.6: 3,9:1, gemessen axe 08.09.2026 (ADR-200) */
  margin: 0.2rem 0 0;
}

/* ── Kopfzeile ─────────────────────────────────────────────────────────── */
/* 🔴 Die Kopfzeile erbt ihre Farbe NICHT vom Grund darunter — sie liegt
   absolut darüber. Ohne eigene Farbe stand „Walliserhof" als dunkles Grau auf
   dunkelblauem Aufmacher und war praktisch unsichtbar. Deshalb zwei Fassungen,
   und jede Seite sagt, auf welchem Grund ihr Kopf sitzt. */
.kopf {
  color: var(--kalk);
  position: absolute;
  inset: calc(var(--rahmen-d, 0px) + var(--heimweg-h, 0px)) 0 auto;   /* unter Rahmen und Rückweg-Zeile (baukasten/_rand_stil.html) */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2.25rem) var(--rand);
  z-index: 3;
}
.kopf a { text-decoration: none; }
.haus {
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.kopf-hell { color: var(--tinte); }
.haus span {
  font-family: var(--grot);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: block;
  opacity: 0.88; /* war 0.66: 3,4:1 auf Kalk, gemessen axe 08.09.2026 (ADR-200) */
  margin-top: 0.15rem;
}

/* ── Aufmacher ─────────────────────────────────────────────────────────── */
.aufmacher {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: clamp(3rem, 8vw, 6rem) var(--rand) clamp(2.5rem, 6vw, 4rem);
  background: var(--nacht);
  color: var(--kalk);
  overflow: hidden;
}
/* Fehlt das Bild, steht hier eine ruhige Fläche — nie ein Platzhalter mit
   Text. „Bild folgt" auf der Startseite kostet den Termin. */
.aufmacher-grund {
  position: absolute;
  inset: 0;
  /* Dämmerung über dem Tal: heller Streifen dort, wo die Sonne hinter dem Grat
     verschwindet, darunter Nacht. Kein Grau, kein Verlauf ins Schwarze — das
     Blau ist dasselbe, das im OS seit Juni die Anmeldeseite trägt. */
  background:
    radial-gradient(80% 55% at 76% 6%, #3c5570 0%, rgba(30,44,60,0) 70%),
    radial-gradient(120% 70% at 18% 96%, #1d2b3a 0%, rgba(16,23,31,0) 60%),
    linear-gradient(178deg, #223549 0%, #182636 38%, var(--nacht) 88%);
  z-index: 0;
}
.aufmacher-grund img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 0,55 → 0,7 → 0,88: Raimund wollte es zweimal heller (09.09.2026). Weiter
     hinauf geht nicht ohne den Verlauf unten — heller Text auf hellem Bild
     ist kein Kontrast mehr, sondern ein Ratespiel. */
  opacity: 0.88;
  display: block;
}
.aufmacher::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,23,31,0.55) 0%, rgba(16,23,31,0.15) 42%, rgba(16,23,31,0.92) 100%);
  z-index: 1;
}
.aufmacher > .innen {
  position: relative;
  z-index: 2;
  max-width: var(--spalte);
  margin-inline: auto;
  width: 100%;
}
.aufmacher .zeile-gross { color: var(--kalk); }
.aufmacher .marke { opacity: 0.8; }

/* Der Aufmacher-Satz kommt in drei Zügen — einmal, beim Laden. Mehr Bewegung
   braucht die Seite nicht. */
/* 🔴 Der Ausgangszustand steht IM Keyframe, nicht an der Klasse.
   `.zug { opacity: 0 }` plus Animation wäre bequem — aber wenn die Animation
   aus irgendeinem Grund nicht läuft (alter Browser, Fehler weiter oben im
   Stylesheet, abgeschaltete Animationen), bliebe die Überschrift für immer
   unsichtbar. Und die Überschrift IST die Seite. So herum ist der ruhende
   Zustand „sichtbar", und die Animation blendet nur ein, wenn sie kann. */
.zug { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .zug { animation: heben 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .zug:nth-child(2) { animation-delay: 0.13s; }
  .zug:nth-child(3) { animation-delay: 0.26s; }
}
@keyframes heben {
  from { opacity: 0; transform: translateY(0.55em); }
  to   { opacity: 1; transform: none; }
}

.unterzeile {
  font-family: var(--grot);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 2rem 0 0;
  opacity: 0.78;
}

/* ── Der eine Knopf ────────────────────────────────────────────────────── */
/* Messing kommt auf dieser Seite genau einmal vor: hier. Deshalb sieht man ihn. */
.knopf {
  display: inline-block;
  font-family: var(--grot);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--nacht);
  background: var(--luster);
  padding: 1.0625rem 2rem;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.knopf:hover,
.knopf:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(233, 201, 141, 0.75);
}
.knopf-reihe {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
}
.knopf-neben {
  font-family: var(--grot);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  opacity: 0.72;
}
.knopf-neben a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Der Weg: das Kennzeichen dieser Seite ─────────────────────────────── */
/* Eine senkrechte Linie mit Stationen. Die Reihenfolge ist keine Zierde —
   es ist der Ablauf des Tages, und die Meterzahl dazwischen ist gemessen. */
.weg { margin: 0; padding: 0; list-style: none; }
.station {
  position: relative;
  padding: 0 0 clamp(2.75rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.25rem);
  border-left: 1px solid currentColor;
  border-left-color: color-mix(in srgb, currentColor 26%, transparent);
}
.station:last-child { border-left-color: transparent; padding-bottom: 0; }
.station::before {
  content: "";
  position: absolute;
  left: -0.3125rem;
  top: 0.5rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--parkett);
}
.station h3 {
  font-family: var(--grot);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.station p { margin: 0 0 0.85rem; max-width: 32em; }
.station p:last-child { margin-bottom: 0; }

/* Die Wegmarke zwischen zwei Stationen — die 300 Meter sind das Argument. */
.wegmarke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--grot);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 999px;
  margin-bottom: 0.9rem;
}
/* „300 m", nicht „300 M": die Wegmarke setzt Versalien, die Einheit ist aber
   ein SI-Zeichen und wird klein geschrieben. */
.wegmarke .fakt { text-transform: none; font-size: 0.8125rem; }

@media (prefers-reduced-motion: no-preference) {
  .station { opacity: 0; transform: translateY(0.9rem); }
  .station.da {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,0.61,0.36,1);
  }
}

/* ── Der Aufbau-Rechner ────────────────────────────────────────────────── */
.rechner-feld {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}
.feld { display: block; }
.feld > span {
  display: block;
  font-family: var(--grot);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.45rem;
}
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], select, textarea {
  font-family: var(--grot);
  font-size: 1rem;
  color: inherit;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 2px;
  padding: 0.8rem 0.9rem;
  width: 100%;
  min-height: 3rem;
}
textarea { min-height: 7rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: inherit; opacity: 0.42; }
.feld-schmal { width: 9rem; }

.tabelle { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.tabelle caption {
  text-align: left;
  font-family: var(--grot);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  padding-bottom: 0.75rem;
}
.tabelle th, .tabelle td {
  text-align: left;
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  font-family: var(--grot);
  font-size: 0.875rem;
  vertical-align: baseline;
}
.tabelle th {
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
}
.tabelle td.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.knapp {
  font-family: var(--grot);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--parkett);
}

/* ── Formular ──────────────────────────────────────────────────────────── */
.formular { margin-top: 2rem; max-width: 44rem; }
.paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.honig {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.hinweis {
  font-family: var(--grot);
  font-size: 0.8125rem;
  line-height: 1.5;
  opacity: 0.7;
  margin-top: 1.25rem;
  max-width: 40em;
}
.meldung {
  font-family: var(--grot);
  font-size: 0.9375rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--parkett);
  margin-top: 1.5rem;
  background: color-mix(in srgb, currentColor 6%, transparent);
}

/* ── Fuß ───────────────────────────────────────────────────────────────── */
.fuss {
  font-family: var(--grot);
  font-size: 0.8125rem;
  line-height: 1.7;
  padding: clamp(2.5rem, 6vw, 4rem) var(--rand);
  background: var(--nacht);
  color: var(--kalk);
  border-top: 1px solid rgba(243, 241, 235, 0.12);
}
.fuss > .innen {
  max-width: var(--spalte);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
}
.fuss a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Navigation im Fuß des Aufmachers ──────────────────────────────────── */
.wege {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--grot);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wege a { text-decoration: none; opacity: 0.78; }
.wege a:hover, .wege a:focus-visible { opacity: 1; }

@media (max-width: 40rem) {
  .kopf { position: static; padding-bottom: 0; }
  /* Unter der Breite steht der Kopf frei auf dem Nacht-Grund des <body>: der
     helle Kopf (Tinte) war dort unsichtbar, 1,18:1 (axe 08.09.2026, ADR-200). */
  .kopf.kopf-hell { background: var(--kalk); padding-bottom: clamp(1.25rem, 3vw, 2.25rem); }
  .aufmacher { min-height: 88svh; }
}


/* ── Die Angebotsseite (ADR-191) ─────────────────────────────────────── */
.band-vorschau {
  position: fixed; inset: auto var(--rahmen-d, 0px) var(--rahmen-u, 0px) var(--rahmen-d, 0px); z-index: 5;  /* unten, damit das Band nie die Kopfzeile verdeckt */
  font-family: var(--grot); font-size: 0.8125rem; letter-spacing: 0.04em;
  background: var(--parkett); color: var(--kalk);
  padding: 0.6rem var(--rand); text-align: center;
}
/* Sprachwahl DE · EN · ES (wedding/sprachen.py) — im Kopf und im Sprungmenü */
.sprach-wahl { white-space: nowrap; }
.sprach-wahl a { margin-left: 0.6em; text-decoration: none; opacity: 0.72; }
.sprach-wahl a:first-child { margin-left: 0; }
.sprach-wahl a.aktiv { opacity: 1; text-decoration: underline; text-underline-offset: 0.22em; }
.sprach-wahl .flagge { margin-right: 0.3em; font-size: 1.05em; text-decoration: none; display: inline-block; }
/* Widersprüche Text ↔ Angebot (wedding/stimmig.py) — nur in der Vorschau des Hauses */
.band-befunde summary { cursor: pointer; margin-top: 0.3rem; }
.band-befunde ul { max-height: 40vh; overflow: auto; margin: 0.5rem auto 0; max-width: 46em;
  padding-left: 1.2em; text-align: left; letter-spacing: 0; line-height: 1.4; }
.band-befunde li { margin-bottom: 0.4rem; }
.brief { max-width: 34em; font-size: 1.125rem; line-height: 1.55; }
.brief p { margin: 0 0 1rem; }
.abschnitt { margin-top: 2.5rem; }
.abschnitt .tabelle { margin-top: 0.75rem; }
.posten { display: block; font-family: var(--serif); font-size: 1.0625rem; }
.tabelle td .beleg { display: block; max-width: 34em; }
.summen { display: flex; flex-wrap: wrap; gap: 2.5rem 4rem; margin-top: 0.5rem; }
.summen > div { display: flex; flex-direction: column; gap: 0.35rem; }
.termine { border: 0; padding: 0; margin: 1.5rem 0 0; }
.termine legend { padding: 0; margin-bottom: 0.75rem; }
.termin-wahl {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  cursor: pointer;
}
.termin-wahl input { width: 1.1rem; height: 1.1rem; accent-color: var(--luster); }
.formular textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem;
  padding: 0.75rem 0.85rem; border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 2px; background: color-mix(in srgb, currentColor 5%, transparent); color: inherit;
}
.waehlbar { font-size: 0.625rem; margin-left: 0.5rem; vertical-align: middle; }

/* Bilder und Bewegung auf der Angebotsseite (ADR-191, 08.09.2026) */
.angebot-aufmacher { min-height: clamp(26rem, 70vh, 40rem); }
/* 🔴 z-index 2, nicht 1: `.aufmacher::after` (der Verlauf) liegt auf 1 und kommt
   im DOM NACH dem Text. Mit gleichem z-index malt der Verlauf ÜBER den Namen
   des Paares — oben stand die Schrift grau statt weiss (Raimund 10.09.2026). */
.angebot-aufmacher .innen { position: relative; z-index: 2; }
.kenburns { transform-origin: 55% 45%; }
@media (prefers-reduced-motion: no-preference) {
  .kenburns { animation: kenburns 28s ease-in-out infinite alternate; }
  @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
}
.stimmung .zeile-mittel { max-width: 22em; }
.bildstrecke { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.bildstrecke .bild { margin: 0; }
.bildstrecke .bild.breit { grid-column: 1 / -1; }
.bildstrecke .bild { min-width: 0; }  /* sonst zwingt die Bildzeile (34em) die Spalte breiter als die Seite */
.bildstrecke img { width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: 34rem; object-fit: cover; display: block; border-radius: 2px; }
.bildstrecke .bild.breit img { aspect-ratio: 16 / 9; }
.bildstrecke figcaption { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.45; margin-top: 0.7rem; opacity: 0.85; max-width: 34em; }
.abschnitt-bild { width: 100%; max-height: 18rem; object-fit: cover; display: block; border-radius: 2px; margin-bottom: 1rem; }

/* ── Startseite C (Figma, Raimund 10.09.2026: „Figma freigegeben") ────────── */
.fakten-blatt { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.fakten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem 2.5rem; }
.fakten li { border-top: 1px solid rgba(27,39,51,.25); padding-top: 1rem; }
.fakten .zahl { display: block; font-size: 2rem; letter-spacing: -0.01em; color: var(--parkett); margin-bottom: 0.35rem; }
.fakten p { margin: 0 0 0.4rem; font-size: 1.0625rem; line-height: 1.45; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.zweispaltig.bild-links { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.seitenbild { margin: 0; }
.seitenbild img { width: 100%; height: auto; display: block; border-radius: 2px; }
.seitenbild.frosch img { max-width: 20rem; margin-inline: auto; }
.punkte { margin: 1.5rem 0 0; }
.punkte dt { font-family: var(--grot); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--parkett); margin-top: 1rem; }
.punkte dd { margin: 0.2rem 0 0; max-width: 34em; }
.spalten-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; margin-top: 2rem; }
.spalten-drei h3 { font-weight: 400; font-size: 1.5rem; margin: 0; }
.spalten-drei .punkte { margin-top: 0.5rem; }
.spalten-drei .punkte dd { font-size: 1rem; }
.wir-kacheln { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.wir-kacheln li { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background: rgba(27,39,51,.06); }
.wir-kacheln img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wir-kacheln .zahlkachel { display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; background: var(--tinte); color: var(--kalk); }
.wir-kacheln .zahlkachel .zahl { font-size: 3rem; line-height: 1; color: var(--luster); }
.wir-kacheln .zahlkachel p { margin: 0.5rem 0 0; font-size: 0.95rem; }
.erbstueck .zeile-mittel { max-width: 16em; }
.abschluss .seitenbild { align-self: center; }
/* B4 — die Fabelwesen leben ein bisschen (Raimund: „Fabelwesen animiert, viel
   Herzblut"): der Froschkönig atmet, und wer ihn anklickt, bekommt einen Hüpfer
   und einen Satz. Nur ohne prefers-reduced-motion. */
.seitenbild.frosch img { cursor: pointer; transform-origin: 50% 100%; }
@media (prefers-color-scheme: light), (prefers-color-scheme: dark) {
  @media (prefers-reduced-motion: no-preference) {
    .seitenbild.frosch img { animation: atmen 5.5s ease-in-out infinite; }
    .seitenbild.frosch img.huepft { animation: huepfen 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1; }
    .erbstueck .seitenbild img { animation: schimmern 9s ease-in-out infinite; }
  }
}
@keyframes atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025) translateY(-3px); } }
@keyframes huepfen { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-28px) scale(1.04, 0.96); } 70% { transform: translateY(0) scale(0.97, 1.03); } 100% { transform: translateY(0) scale(1); } }
@keyframes schimmern { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
.frosch-satz { font-family: var(--serif); font-style: italic; margin: 0.75rem 0 0; text-align: center; min-height: 1.6em; opacity: 0; transition: opacity .4s; }
.frosch-satz.da { opacity: 0.85; }
@media (max-width: 48rem) {
  .zweispaltig, .zweispaltig.bild-links { grid-template-columns: 1fr; }
  .zweispaltig.bild-links .seitenbild { order: 2; }
  .spalten-drei { grid-template-columns: 1fr; }
  .wir-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Am Handy ein festes, reduziertes Menü (Post 74): der Kopf bleibt oben stehen. */
  .kopf { position: fixed; top: calc(var(--rahmen-d, 0px) + var(--heimweg-h, 0px)); left: var(--rahmen-d, 0px); right: var(--rahmen-d, 0px); background: rgba(16,23,31,.82); backdrop-filter: blur(8px); padding-block: 0.75rem; }
  .kopf-hell { background: rgba(243,241,235,.9); }
}

/* Stimmen von Paaren (wedding/stimmen.py) — drei Zitate nebeneinander, ruhig. */
.stimmen { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem 2.5rem; }
.stimmen blockquote { margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--parkett); }
.stimmen blockquote p { margin: 0 0 0.6rem; font-size: 1.125rem; line-height: 1.5; }
.stimmen footer .posten { font-family: var(--grot); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* Tafelseite: Katalog ohne Preise + Merkliste (Post 80) */
.merkliste-wahl { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.merkliste-wahl li { border-top: 1px solid rgba(27,39,51,.15); }
.merkliste-wahl label { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; padding: 0.6rem 0; cursor: pointer; align-items: baseline; }
.merkliste-wahl input { accent-color: var(--parkett); width: 1.1rem; height: 1.1rem; grid-row: span 2; }
.merkliste-wahl .beschreibung { grid-column: 2; font-size: 0.95rem; opacity: 0.75; }
.merkliste-leiste { position: sticky; bottom: calc(1rem + var(--rahmen-u, 0px)); margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; background: var(--tinte); color: var(--kalk); padding: 0.9rem 1.25rem; border-radius: 999px; box-shadow: 0 12px 40px rgba(8,12,18,.3); z-index: 5; }
/* Solange die Merkliste gefüllt ist, tritt der Besuchs-Knopf zurück — die Leiste
   trägt denselben Weg (anfragen), sonst lägen zwei Knöpfe übereinander. */
body.hat-merkliste .besuch-schwebe { display: none; }
.merkliste-leiste .leise { font: inherit; font-size: 0.875rem; background: transparent; border: 0; color: inherit; opacity: .7; cursor: pointer; text-decoration: underline; }
.merkliste-anfrage { margin-top: 1rem; padding: 0.9rem 1rem; background: rgba(168,112,63,.08); border-radius: 2px; }
.merkliste-anfrage ul { margin: 0.25rem 0 0; padding-left: 1.2rem; font-size: 0.95rem; }

/* ── Angebot anfragen (wedding/angebotsanfrage.py, 11.09.2026) ──────────── */
/* Ohne Skript: alle Schritte untereinander, durch eine feine Linie getrennt.
   Mit Skript (.in-schritten): ein Schritt, oben der Fortschritt. */
.anfrage-stufen { color-scheme: dark; }            /* Kalender und Pfeile hell auf dem Abend-Grund */
.anfrage-stufen [hidden] { display: none !important; }  /* .knopf-reihe setzt flex und schlüge sonst `hidden` */
.anfrage-schritt { border: 0; padding: 0; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; min-width: 0; }
.anfrage-schritt + .anfrage-schritt { border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.in-schritten .anfrage-schritt { border-top: 0; padding-top: 0; margin-top: 1.75rem; }
.anfrage-schritt legend { padding: 0; margin-bottom: 0.75rem; }
.anfrage-schritt legend .marke { display: block; margin-bottom: 0.9rem; }
.anfrage-schritt legend .zeile-mittel { margin: 0; }
.anfrage-schritt .satz { margin: 0.5rem 0 1.5rem; }
.anfrage-frage { margin-bottom: 1.5rem; }
.anfrage-frage .paar { margin-bottom: 0; }
.anfrage-dazu { margin-top: 1.25rem; }
.anfrage-stufen .termin-wahl:last-of-type { border-bottom: 0; }
.anfrage-stufen .termin-wahl span { font-family: var(--grot); font-size: 0.9375rem; }
.anfrage-saal { margin-top: 0; }
.anfrage-weiter .knopf-leise, .anfrage-absenden .knopf-leise { color: inherit; }
.anfrage-kopf { margin-top: 2.25rem; }
.anfrage-fortschritt {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.3rem;
  font-family: var(--grot); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.anfrage-fortschritt li {
  border-top: 3px solid color-mix(in srgb, currentColor 22%, transparent);
  padding-top: 0.5rem; opacity: 0.55;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.anfrage-fortschritt li.erledigt { border-top-color: var(--parkett); opacity: 0.85; }
.anfrage-fortschritt li[aria-current] { border-top-color: var(--luster); opacity: 1; }
.anfrage-stand { font-family: var(--grot); font-size: 0.8125rem; letter-spacing: 0.02em; margin: 0.9rem 0 0; opacity: 0.85; }
.anfrage-uebersicht { margin-top: 1.75rem; }
.anfrage-uebersicht-liste { margin: 1.5rem 0 0; }
.anfrage-uebersicht-liste > div {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  grid-template-areas: "titel inhalt aktion"; gap: 0.35rem 1.25rem;
  padding: 0.95rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.anfrage-uebersicht-liste dt { grid-area: titel; font-family: var(--grot); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; padding-top: 0.2rem; }
.anfrage-uebersicht-liste dd { margin: 0; }
.anfrage-uebersicht-inhalt { grid-area: inhalt; font-family: var(--grot); font-size: 0.9375rem; line-height: 1.5; }
.anfrage-uebersicht-inhalt p { margin: 0 0 0.3rem; white-space: pre-line; overflow-wrap: anywhere; }
.anfrage-uebersicht-frage { opacity: 0.68; }
.anfrage-uebersicht-aktion { grid-area: aktion; }
.anfrage-aendern {
  font-family: var(--grot); font-size: 0.8125rem; color: inherit; background: none; border: 0;
  padding: 0.2rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 40rem) {
  .anfrage-fortschritt span { display: none; }       /* am Handy nur die Striche; der Satz darunter nennt den Schritt */
  .anfrage-fortschritt li { padding-top: 0; }
  .anfrage-uebersicht-liste > div { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel aktion" "inhalt inhalt"; }
}
/* (Post 78/79, überholt durch Post 80 — Katalog bleibt, Preise nicht) */
.jahr-wahl select { font: inherit; font-size: 1.05rem; padding: 0.55rem 0.7rem; border: 1px solid rgba(27,39,51,.35); border-radius: 2px; background: #fff; }
.katalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem 2.5rem; margin-top: 1.5rem; }
.katalog-gruppe h3 { font-weight: 400; font-size: 1.5rem; margin: 0 0 0.5rem; }
.katalog-gruppe ul { list-style: none; margin: 0; padding: 0; }
.katalog-gruppe li { padding: 0.5rem 0; border-top: 1px solid rgba(27,39,51,.15); font-size: 1rem; line-height: 1.45; }
.katalog-gruppe .posten { display: block; }
.katalog-gruppe .beschreibung { display: block; font-size: 0.95rem; opacity: 0.75; }
.katalog-gruppe .preis { font-size: 0.95rem; opacity: 0.75; }

/* ── Bildstrecken als Unterbrecher (wedding/strecken.py, Raimund 10.09.2026) ──
   Ein Band, das von selbst scrollt (scroll-snap); Pfeile nur mit Skript. Die
   Bilder tragen alle dieselbe Höhe und ihre eigene Breite — Hoch- und
   Querformat stehen nebeneinander wie auf einem Kontaktbogen. Auf Nacht, damit
   die Fotos leuchten und das Band als Pause zwischen den Blättern gelesen wird. */
.strecke { background: var(--nacht); color: var(--kalk); padding: 2.75rem 0 3rem; }
.strecke-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 clamp(1.25rem, 5vw, 4rem); margin-bottom: 1.25rem;
}
.strecke-kopf .marke { margin: 0; }
.strecke-pfeile { margin: 0; display: flex; gap: 0.5rem; }
.strecke-pfeile button {
  font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid rgba(243,241,235,.35); background: transparent; color: var(--kalk);
}
.strecke-pfeile button:hover { background: rgba(243,241,235,.12); }
.strecke-band {
  --bnd-gap: 1rem; --bnd-pad: 0 clamp(1.25rem, 5vw, 4rem);
  overscroll-behavior-x: contain; scroll-padding-inline: clamp(1.25rem, 5vw, 4rem);
}
.strecke-band > li { margin: 0; }
.strecke-band figure { margin: 0; }
.strecke-band img, .strecke-band video.platz-video {
  height: clamp(18rem, 55vh, 34rem); width: auto; max-width: 88vw;
  display: block; object-fit: cover; border-radius: 2px; background: var(--abend);
}
.strecke-band figcaption {
  font-size: 0.95rem; line-height: 1.4; margin-top: 0.6rem; opacity: 0.7; max-width: 24em;
}

/* ── Das Brautpaar-Portal (ADR-211) ───────────────────────────────────────
   Dieselbe Sprache wie die Angebotsseite: Blätter, Marke, Zahlen in .fakt.
   Die Tabelle ist eine Liste von Menschen, kein Cockpit — ruhig, ohne Linien
   zwischen den Spalten, Status als Wort. */
.portal-kopf { padding-top: clamp(6rem, 14vw, 9rem); }
.portal-zahlen { list-style: none; margin: 0; padding: 0; max-width: 40em; }
.portal-zahlen li { padding: 0.55rem 0; border-top: 1px solid rgba(27,39,51,.15); }
.portal-zahlen li:first-child { border-top: 0; }
.grund-abend .portal-zahlen li, .grund-nacht .portal-zahlen li { border-color: rgba(243,241,235,.18); }
.portal-form { margin-top: 2rem; }
.portal-reihe { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.portal-reihe label { display: flex; flex-direction: column; gap: 0.3rem; font-family: var(--grot); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.portal-form input[type=text], .portal-form input[type=email], .portal-form input[type=number],
.portal-form textarea, .portal-form select {
  font: inherit; font-size: 1rem; padding: 0.6rem 0.8rem; border: 1px solid rgba(27,39,51,.35);
  border-radius: 2px; background: #fff; color: var(--tinte); min-width: 0;
}
.portal-form textarea { width: 100%; max-width: 40em; display: block; margin: 0.5rem 0 0.75rem; }
.portal-liste { margin-top: 1.25rem; max-width: 40em; }
.portal-liste summary { cursor: pointer; font-family: var(--grot); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.portal-tabelle { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: 1rem; }
.portal-tabelle th { text-align: left; font-family: var(--grot); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; padding: 0 0.5rem 0.6rem 0; }
.portal-tabelle td { padding: 0.7rem 0.5rem 0.7rem 0; border-top: 1px solid rgba(27,39,51,.15); vertical-align: top; }
.portal-tabelle tr.status-zugesagt td:nth-child(2) { color: #2f6b3a; }
.portal-tabelle tr.status-abgesagt td:nth-child(2) { opacity: 0.6; }
.portal-tabelle .inline { display: inline; }
.portal-tabelle .leise, .portal-tabelle .link-kopieren {
  font: inherit; font-size: 0.875rem; background: transparent; border: 1px solid rgba(27,39,51,.3);
  border-radius: 999px; padding: 0.25rem 0.75rem; cursor: pointer; color: inherit;
}
.portal-tabelle .leise { border-color: transparent; opacity: 0.6; }
.meldung-fehler { border-color: #a33; }
.knopf-leise { background: transparent; border: 1px solid currentColor; }
.tische { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.tisch { background: rgba(255,255,255,.55); border-radius: 2px; padding: 1rem 1.1rem; margin: 0; }
.tisch.brauttisch { outline: 2px solid var(--parkett); }
.tisch h3 { margin: 0 0 0.2rem; font-weight: 400; font-size: 1.25rem; }
.tisch ul { margin: 0.6rem 0 0; padding: 0; list-style: none; font-size: 0.95rem; line-height: 1.5; }
.platz-film { width: 100%; height: auto; display: block; border-radius: 2px; background: var(--abend); margin-top: 1.5rem; }
/* Fortschrittsbalken + Kapitel unter dem Erklärvideo (Raimund 10.09.2026). */
.film-lauf { margin-top: 0.75rem; }
.film-balken { position: relative; height: 8px; background: rgba(243,241,235,.22); border-radius: 4px; cursor: pointer; }
.film-stand { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--luster); border-radius: 4px; transition: width .25s linear; }
.film-balken i { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--kalk); opacity: .7; }
.film-kapitel { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.4rem 1rem; }
.film-kapitel button { font: inherit; font-size: 0.95rem; color: inherit; background: transparent; border: 0; padding: 0.25rem 0; text-align: left; cursor: pointer; opacity: .8; }
.film-kapitel button:hover, .film-kapitel button.aktiv { opacity: 1; }
.film-kapitel button.aktiv .fakt { color: var(--luster); }
.film-kapitel .fakt { display: inline-block; min-width: 3em; }
@media (max-width: 40rem) {
  .portal-tabelle th:nth-child(3), .portal-tabelle td:nth-child(3) { display: none; }
}

/* ── Die Menüfolge als ein Blatt (Raimund 10.09.2026) ─────────────────────
   Die Gänge stehen zusammen, nummeriert, mit einem Ornament dazwischen — wie
   auf einer Menükarte. Der Rest des Abschnitts (Gedeck, Getränke) folgt danach. */
.menuefolge { border: 1px solid rgba(168,112,63,.45); border-radius: 3px; padding: 1.25rem 1.25rem 1rem; margin: 0 0 1.5rem; background: rgba(255,255,255,.35); }
.menue-kopf { margin: 0 0 0.5rem; text-align: center; }
.menue-kopf .marke { margin: 0; color: var(--parkett); opacity: 1; }
.menuefolge .karte { margin: 0; box-shadow: none; }
.menuefolge .karte.gang { border: 0; background: transparent; padding-inline: 0; }
.gang-nr { display: block; font-family: var(--grot); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--parkett); margin: 0 0 0.25rem; }
/* Jeder Gang eine Farbe (Raimund 11.09.2026: „Vorspeise eine Farbe, dass man
   sieht, dass nun die Suppen kommen"). Die Farben kommen aus dem Tal: Wiese,
   Heu, Alvierbach, Enziandämmerung, Parkett, Bergkäse, Beeren. */
.gang-vorspeise { --gang: #6d8a58; }
.gang-warme_vorspeise { --gang: #9a7b3c; }
.gang-suppe { --gang: #3f7f8f; }
.gang-zwischengang { --gang: #6e6a9a; }
.gang-hauptgang { --gang: #a8703f; }
.gang-kaese { --gang: #b8923a; }
.gang-dessert { --gang: #a24d67; }
/* Der Trenner kündigt den nächsten Gang in dessen Farbe an — markant (11.09.). */
.gang-trenner { text-align: center; color: var(--gang, var(--parkett)); font-size: 2rem; line-height: 1; padding: 1.1rem 0 0.9rem; position: relative; }
.gang-trenner span { position: relative; z-index: 1; display: inline-block; padding: 0 0.6rem; }
.gang-trenner::before, .gang-trenner::after { content: ""; position: absolute; top: 50%; width: calc(50% - 2.1rem); border-top: 3px double var(--gang, var(--parkett)); }
.gang-trenner::before { left: 0; } .gang-trenner::after { right: 0; }
.menuefolge .karte.gang { border-left: 4px solid var(--gang, var(--parkett)); padding-left: 1rem; padding-right: 0.75rem; background: color-mix(in srgb, var(--gang, var(--parkett)) 7%, transparent); }
.menuefolge .karte.gang .gang-nr { color: color-mix(in srgb, var(--gang, var(--parkett)) 70%, #000); font-weight: 600; }
.gang-einfuegen { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed rgba(168,112,63,.45); }
.gang-einfuegen summary { cursor: pointer; }
.gang-einfuegen .portal-reihe { margin-top: 0.75rem; }
.gang-einfuegen select { font: inherit; font-size: 1rem; padding: 0.5rem 0.6rem; border: 1px solid rgba(27,39,51,.35); border-radius: 2px; background: #fff; max-width: 100%; }

/* Das Videoband über die ganze Breite — der Unterbrecher vor dem Zeitplan der
   Angebotsseite (und überall, wo ein Clip liegt). Ohne Clip steht hier nichts. */
.videoband { position: relative; background: var(--nacht); line-height: 0; }
.videoband video.platz-video { width: 100%; height: auto; max-height: 82vh; object-fit: cover; display: block; }
.videoband-text {
  position: absolute; left: clamp(1.25rem, 5vw, 4rem); bottom: 1.5rem; margin: 0;
  font-family: var(--serif); font-size: 1.125rem; line-height: 1.4; color: #fff;
  text-shadow: 0 1px 14px rgba(8,12,18,.6);
}
@media (max-width: 40rem) {
  .bildstrecke { grid-template-columns: 1fr; }
}

/* ── Der Baukasten (ADR-191 Nachtrag 08.09.2026) ─────────────────────── */
/* Preise: Textschrift, Regular, am Satzende, gedämpft — die Leistung führt. */
/* 🔴 Raimund 09.09.2026: „mach die Preise nicht größer als der Fließtext."
   Der Preis erbt die Größe seiner Umgebung — er soll am Satzende stehen, nicht
   daneben rufen. Mediävalziffern, weil sie im Satz mitlaufen statt aufzufallen. */
.preis { font-family: var(--serif); font-weight: 400; font-size: 1em;
         font-variant-numeric: oldstyle-nums; opacity: 0.8; white-space: nowrap; }
.haus-logo { display: inline-flex; align-items: center; }
.haus-logo .wh-logo { height: 26px !important; margin: 0 !important; filter: invert(1); }
/* Wortmarke + „Brandnertal 1896" nebeneinander — so wie im Haus ueberall
   (Raimund 10.09.2026: „WALLISERHOF und Brandnertal 1896, nicht Brand im
   Brandnertal, wie immer"). */
.haus-logo span { margin-left: 0.75rem; }
.kopf-hell .haus-logo .wh-logo, .grund-morgen .haus-logo .wh-logo { filter: none; }
.baukasten { margin-top: 2rem; }
.tagabschnitt { margin-top: 2.75rem; }
.abschnitt-titel { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin: 0 0 0.75rem; }
.tipp { border-left: 2px solid var(--parkett); padding: 0.4rem 0 0.4rem 1rem; margin: 0.75rem 0 1.25rem; max-width: 36em; }
.tipp .knapp { display: block; margin-bottom: 0.25rem; }
.tipp p { margin: 0; font-size: 1.0625rem; }
.karten { display: flex; flex-direction: column; gap: 0.75rem; min-height: 2rem; }
.karte { background: color-mix(in srgb, currentColor 4%, transparent); border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 2px; padding: 0.9rem 1rem; position: relative; }
.karte.sortable-ghost { opacity: 0.4; }
.karte-griff { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.griff { cursor: grab; font-family: var(--grot); opacity: 0.5; letter-spacing: -2px; user-select: none; }
.verschieben { display: inline-flex; align-items: center; gap: 0.5rem; }
.verschieben .knapp { font-size: 0.6rem; }
.slot-wahl { font: inherit; font-family: var(--grot); font-size: 0.75rem; padding: 0.2rem 0.4rem; border-radius: 2px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: transparent; color: inherit; }
.option { display: block; }
.option label { display: flex; gap: 0.8rem; align-items: flex-start; cursor: pointer; }
.option input { margin-top: 0.35rem; accent-color: var(--parkett); flex-shrink: 0; }
/* 🔴 Raimund 10.09.2026: „mach die Preise einfach gleich gross, gleiche Schrift
   wie der Fliesstext … KEINE KEINE KEINE Fokus auf Preise." Der Preis steht
   deshalb IM Beschreibungssatz, in dessen Groesse und Daempfung, mit einem
   Punkt davor — nicht mehr als eigene Zeile unter der Karte. */
.option-text { display: block; }
.option-text .posten { display: block; font-size: 1.0625rem; }
.option-text .beschreibung { display: inline; }
.option-text .preis { font-size: 0.95rem; opacity: 0.75; white-space: normal; }
/* Anteil je Gästewahl-Gericht (sql/0091): klein, hinter dem Preis, nur wenn zwei+ angehakt. */
/* Anteil und Zahl der Gerichte als kleine Rechenzeile in der Farbe des Gangs,
   kein grauer Kasten; Erklärung beim Darüberfahren (Raimund 11.09.2026).
   Alles steht im inneren <label>: ein Klick darauf hakt das Gericht nicht ab. */
/* Handy (11.09.2026): die Zeile Anteil·%·=·Gerichte·? ragte bei 375 px 13 px über den Rand ⇒ nie breiter als der Platz, lieber umbrechen. */
.option-text .anteil { max-width: 100%; box-sizing: border-box; }
.option-text .anteil label { max-width: 100%; }
.option-text .anteil { display: inline-flex; margin: 0.4rem 0 0; padding: 0.25rem 0.35rem 0.25rem 0.75rem; border-radius: 1.2rem; font-size: 0.9rem; background: color-mix(in srgb, var(--gang, var(--parkett)) 12%, #fff); border: 1px solid color-mix(in srgb, var(--gang, var(--parkett)) 45%, transparent); }
.option-text .anteil[hidden] { display: none; }
.option-text .anteil label { position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; cursor: help; }
.anteil-wort { font-family: var(--grot); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--gang, var(--parkett)) 70%, #000); }
.option-text .anteil input { width: 3.6rem; font: 600 1rem var(--grot); padding: 0.2rem 0.4rem; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--gang, var(--parkett)); text-align: right; color: var(--tinte); }
.option-text .anteil input:focus { outline: 2px solid var(--gang, var(--parkett)); outline-offset: 2px; }
.anteil-prozent, .anteil-gleich { font-family: var(--grot); color: color-mix(in srgb, var(--gang, var(--parkett)) 70%, #000); }
.anteil-teller { font: 600 1rem var(--grot); color: var(--tinte); padding: 0.1rem 0.6rem; border-radius: 999px; background: #fff; white-space: nowrap; }
.anteil .hilfe { position: static; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; padding: 0; border: 0; border-radius: 50%; font: 600 0.75rem var(--grot); color: #fff; background: var(--gang, var(--parkett)); cursor: help; }
.anteil .hilfe::after { content: attr(data-hilfe); position: absolute; bottom: calc(100% + 0.5rem); left: -0.5rem; width: min(18rem, calc(100vw - 3rem)); padding: 0.6rem 0.75rem; border-radius: 4px; background: var(--abend); color: var(--kalk); font: 400 0.85rem/1.45 var(--grot); text-align: left; box-shadow: 0 6px 20px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s, transform .15s; z-index: 5; }
.anteil label:hover .hilfe::after, .anteil .hilfe:focus::after { opacity: 1; transform: none; }
.option:has(.anteil:not([hidden])) .gedecke { display: none; }
@media (prefers-reduced-motion: reduce) { .anteil .hilfe::after { transition: none; } }
/* Handy (11.09.2026, gemessen): die unsichtbare Erklärblase am „?" hing links am
   Knopf und war bis 18 rem breit — sie ragte bei 375 px 13 px über den Rand und
   machte die Seite seitlich wischbar. Jetzt hängt sie an der Anteil-Pille und ist
   nie breiter als diese. */
.option-text .anteil { position: relative; }
.option-text .anteil label { position: static; }
.anteil .hilfe::after { left: 0; right: 0; width: auto; }
/* Vegan/vegetarisch — die Angabe kommt aus den Diät-Tags der Küche (11.09.). */
.diaet { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.5rem; border-radius: 999px; font: 600 0.6875rem/1.5 var(--grot); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 0.12em; }
.diaet.vegan { background: #e1ebd6; color: #34521f; }
.diaet.vegetarisch { background: #eceed8; color: #545622; }
.option-text .beschreibung + .preis::before { content: " · "; }
.beschreibung { font-family: var(--serif); font-size: 0.95rem; opacity: 0.75; max-width: 40em; }
.zusatz { display: flex; gap: 0.8rem; align-items: flex-start; cursor: pointer; }
.gruppe summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline; list-style: none; }
.gruppe summary::-webkit-details-marker { display: none; }
.gruppe summary::before { content: "▸"; font-family: var(--grot); opacity: 0.6; margin-right: 0.4rem; }
.gruppe[open] summary::before { content: "▾"; }
.optionen { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.optionen li { padding-top: 0.75rem; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.wein { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.2rem; }
.wein-notiz { font-family: var(--serif); font-size: 0.95rem; opacity: 0.8; max-width: 40em; }
.preisleiste { position: sticky; bottom: var(--rahmen-u, 0px); margin-top: 2rem; background: var(--kalk); color: var(--tinte); border-top: 1px solid color-mix(in srgb, var(--tinte) 15%, transparent); padding: 0.9rem 0; z-index: 4; }
.preisleiste .innen { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; padding: 0 var(--rand); }
.summe-satz { font-family: var(--serif); font-size: 1.0625rem; }
.saalplan svg { width: 100%; height: auto; max-width: 40rem; display: block; margin-top: 1.5rem; }
.abschied .fabelwesen { display: flex; align-items: flex-end; justify-content: center; gap: clamp(1rem, 6vw, 4rem); }
.abschied .fabelwesen img { height: clamp(7rem, 22vw, 13rem); width: auto; opacity: 0.9; }
.abschied .wortmarke { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding-bottom: 1rem; }
.abschied .wortmarke .wh-logo { height: 34px !important; }
@media (max-width: 40rem) { .abschied .fabelwesen img { height: 6rem; } }
/* Das Hochzeitspaar der Fabelwesen (Gänsebraut mit Schleier, Hirsch mit Hut) über
   der Wortmarke — Raimund 11.09.2026: „beim Angebot fehlen die beiden Hochzeits-Fabelwesen“. */
.abschied .fabelwesen.paar { flex-direction: column; align-items: center; }
.abschied .fabelwesen.paar .paar-bild { height: clamp(10rem, 42vw, 15rem); width: auto; opacity: 0.95; }

/* Wege aus dem Hero: die eine Handlung ist von oben erreichbar (ADR-191, Warum die Seite verkauft) */
.hero-wege { margin-top: 1.25rem; }
.hero-wege a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
/* ── Rechtliches (ADR-200) ───────────────────────────────────────────────── */
/* 🔴 NUR der Link „Zum Inhalt springen" (a.sprung). Als `.sprung` traf die Regel
   auch das Sprungmenü (<details class="sprung">): left:-999px schob den Knopf
   am Handy aus dem Bild — unerreichbar (Befund 11.09.2026, test_sprungmenue). */
a.sprung { position: absolute; left: -999px; top: 0; background: var(--tinte); color: var(--kalk);
  padding: 0.75rem 1rem; z-index: 9; font-family: var(--grot); }
a.sprung:focus { left: 1rem; top: 1rem; }
.fuss .recht-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.fuss .recht-links a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 0.15em; }
.fuss a:focus-visible, .knopf:focus-visible, .kopf a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* ── Der Hochzeits-Concierge (ADR-202, 09.09.2026) ──────────────────────── */
/* Ein Feld, in das man fragt. Ruhig, im Fluss der Seite — kein Sprechblasen-
   Widget, das sich in die Ecke klebt. Ohne JavaScript ist der Kasten `hidden`
   und die Seite zeigt nur das Formular an den Menschen. */
.concierge { margin: 2rem 0 1.5rem; max-width: 40em; }
.concierge-hinweis { margin-top: 0.15rem; }
.concierge-verlauf { margin: 1rem 0 0; max-height: 22rem; overflow-y: auto; }
.concierge-verlauf:empty { display: none; }
.concierge-zeile {
  font-family: var(--serif); font-size: 1.0625rem; line-height: 1.5;
  margin: 0 0 0.85rem; padding-left: 1rem; border-left: 2px solid var(--parkett);
}
.concierge-zeile.ihr { border-left-color: currentColor; opacity: 0.75; }
.concierge-zeile.wartet { opacity: 0.5; font-style: italic; }
/* ADR-217: ein Mensch aus dem Haus. Die Blase muss sich von der Maschine
   unterscheiden lassen, ohne dass man die Namen lesen muss. */
.concierge-zeile.haus { border-left-color: var(--luster); border-left-width: 3px; }
.concierge-zeile.haus .concierge-wer { opacity: 1; font-weight: 600; }
.concierge-mithaus {
  font-family: var(--grot); font-size: 0.8125rem; margin: 0.75rem 0 0; opacity: 0.85;
}
.wielink {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; cursor: pointer;
}
.concierge-wer {
  display: block; font-family: var(--grot); font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.15rem;
}
.concierge-form { display: flex; gap: 0.75rem; align-items: flex-end; margin-top: 1rem; }
.concierge-form .feld { flex: 1 1 auto; margin: 0; }
.knopf.schmal { padding: 0.45rem 1rem; font-size: 0.8125rem; }
@media (max-width: 34rem) {
  .concierge-form { flex-wrap: wrap; }
  .concierge-form .knopf { width: 100%; }
}

/* Wahlgruppe als Vorschlag: oben steht, was wir kochen würden, darunter kursiv
   die Alternativen mit ihrem Preis (Raimund 09.09.2026). Kursiv heisst hier
   „zählt noch nicht" — die Zahl daneben sagt es zusätzlich, denn Schriftschnitt
   allein ist keine Aussage. */
.option.alternative .option-text { font-style: italic; opacity: 0.72; }
.option.alternative .posten { font-style: italic; }
.satz.beispiel { max-width: 34em; margin-bottom: 1rem; }

/* Der Weg bis zum Fest (ADR-191, 09.09.2026): eine Liste, keine Tabelle — sie
   wird auf dem Handy gelesen, und dort bricht eine Tabelle mit vier Spalten. */
.zeitplan { list-style: none; padding: 0; margin: 2rem 0 0; max-width: 40em; }
.zeitplan .schritt { display: grid; grid-template-columns: 10.5rem 1fr; gap: 0 1.25rem;
  padding: 0.9rem 0; border-top: 1px solid var(--parkett); }
.zeitplan .schritt:last-child { border-bottom: 1px solid var(--parkett); }
.zeitplan .wann { font-family: var(--grot); font-size: 0.75rem; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.65; padding-top: 0.25rem; }
.zeitplan .schritt.geld .posten::after { content: " ·"; opacity: 0.4; }
.zeitplan .beschreibung { display: block; margin-top: 0.15rem; }
.zeitplan .preis { display: block; margin-top: 0.35rem; }
@media (max-width: 34rem) {
  .zeitplan .schritt { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* Der Beispielablauf nutzt dieselbe Liste wie der Zeitplan — nur ohne Betrag
   und mit der Uhrzeit als Anker (ADR-191, 09.09.2026). */
.zeitplan.ablauf .wann { width: auto; font-variant-numeric: tabular-nums; }
.zeitplan.ablauf .schritt { grid-template-columns: 5.5rem 1fr; }
@media (max-width: 34rem) { .zeitplan.ablauf .schritt { grid-template-columns: 1fr; } }

/* Der Weiter-Pfeil (Raimund 09.09.2026: „ich habe ein paar mal übersehen, dass
   es noch weiter geht"). Unten mittig, klein, hüpft alle paar Sekunden einmal —
   und verschwindet am Seitenende. Wer Bewegung nicht mag, bekommt ihn ruhig. */
.weiter-pfeil {
  position: fixed; left: 50%; bottom: calc(1.1rem + var(--rahmen-u, 0px)); transform: translateX(-50%);
  z-index: 6; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid currentColor; background: var(--tinte); color: var(--kalk);
  font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: 0.55;
  display: flex; align-items: center; justify-content: center;
}
.weiter-pfeil:hover, .weiter-pfeil:focus-visible { opacity: 1; }
.weiter-pfeil[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .weiter-pfeil span { display: block; animation: pfeil-hupf 2.4s ease-in-out infinite; }
  @keyframes pfeil-hupf {
    0%, 60%, 100% { transform: translateY(0); }
    70% { transform: translateY(0.28rem); }
    85% { transform: translateY(0); }
  }
}

/* Auch die Summe unten in der Leiste bleibt Fliesstextgroesse (09.09.2026). */
.preisleiste .preis, .preisleiste .summe-satz { font-size: 1em; }
/* Die Leiste (ADR-213, Raimund 11.09.2026): Tag · Gäste · Summe · je Gast — in
   Fliesstextgrösse (kein Fokus auf Preise); die Gästezahl im Blatt darüber,
   Tippflächen 44 px. Theo rückt nach oben, solange die Leiste im Bild ist. */
.preisleiste { padding: 0.5rem 0; font-size: 0.9375rem; }
.preisleiste .innen { gap: 0.4rem 1rem; justify-content: space-between; }
.leiste-daten, .leiste-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.preisleiste .knopf { padding: 0.55rem 1.1rem; font-size: 0.8125rem; }
.leiste-tag { font-family: var(--grot); font-size: 0.8125rem; letter-spacing: 0.04em; }
.leiste-tag .kurz { display: none; }
.leise { font-family: var(--grot); font-size: 0.8125rem; opacity: 0.7; }
.gaeste-innen .leise { display: block; margin: 0.5rem 0 0; line-height: 1.45; }
.gaeste-innen .leise[hidden] { display: none; }
/* Nichts liegt auf der Leiste: der Weiter-Pfeil tritt zurück, solange sie im Bild
   ist, und Theo, solange das Gäste-Blatt offen ist (Sichtprüfung 11.09.). */
body.leiste-da .weiter-pfeil { display: none; }
body:has(.gaeste-blatt[open]) .theo-schwebe { display: none; }
.gaeste-blatt { position: relative; }
.gaeste-blatt summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.85rem; border: 1px solid color-mix(in srgb, var(--tinte) 25%, transparent); border-radius: 999px; font-family: var(--grot); font-size: 0.9375rem; background: #fff; }
.gaeste-blatt summary::-webkit-details-marker { display: none; }
.gaeste-innen { position: absolute; bottom: calc(100% + 0.6rem); left: 0; width: min(21rem, calc(100vw - 2rem)); background: var(--kalk); border: 1px solid color-mix(in srgb, var(--tinte) 18%, transparent); border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 0.9rem 1rem; z-index: 6; }
.stepper-zeile { display: grid; grid-template-columns: 1fr 44px 4.2rem 44px; align-items: center; gap: 0.4rem; margin: 0.35rem 0; font-family: var(--grot); }
.stepper { width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--tinte) 30%, transparent); background: #fff; font: 600 1.25rem/1 var(--grot); color: var(--tinte); cursor: pointer; }
.stepper:disabled { opacity: .4; cursor: default; }
.stepper-zeile input { width: 4.2rem; height: 44px; text-align: center; font: 600 1.05rem var(--grot); border: 1px solid color-mix(in srgb, var(--tinte) 30%, transparent); border-radius: 6px; background: #fff; color: var(--tinte); }
.gaeste-hinweis { color: #8a2f2f; }
.summe-satz .delta { margin-left: 0.5rem; font-family: var(--grot); font-size: 0.875rem; opacity: 0.75; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.leiste-da .theo-schwebe { bottom: calc(var(--leiste-h, 4.5rem) + 0.75rem + var(--rahmen-u, 0px)); }
/* In der Vorschau liegt unten das Band — am Handy zweizeilig. Seine Höhe misst das
   Skript (`--band-h`); feste 2,75rem verdeckten dort die Summenzeile (Live 11.09.). */
body:has(.band-vorschau) .preisleiste { bottom: calc(var(--band-h, 2.75rem) + var(--rahmen-u, 0px)); }
body.leiste-da:has(.band-vorschau) .theo-schwebe { bottom: calc(var(--leiste-h, 4.5rem) + var(--band-h, 2.75rem) + 0.75rem + var(--rahmen-u, 0px)); }
html:has(.preisleiste) { scroll-padding-bottom: 7rem; }
@media (max-width: 640px) {
  .preisleiste { font-size: 0.875rem; }
  .preisleiste .innen { gap: 0.35rem 0.75rem; }
  .preisleiste .knopf.schmal, .preisleiste #ungespeichert { display: none; }
  .leiste-tag .lang { display: none; }
  .leiste-tag .kurz { display: inline; }
  /* Das Blatt hängt am Bildschirm, nicht am Knopf — sonst ragt es rechts hinaus. */
  .gaeste-innen { position: fixed; left: calc(1rem + var(--rahmen-d, 0px)); right: calc(1rem + var(--rahmen-d, 0px)); width: auto; bottom: calc(var(--leiste-h, 7rem) + var(--band-h, 0px) + 0.5rem + var(--rahmen-u, 0px)); }
  /* „Verschieben nach" bekommt am Handy eine eigene Zeile. Neben Griff und Hilfe
     drückten Chromium und Firefox die Auswahl auf 15 px (kein Wert lesbar), und
     WebKit machte die Seite 12 px zu breit (QS vor dem Versand, 11.09.2026). */
  .verschieben { flex: 1 1 100%; }
  .verschieben .slot-wahl { flex: 1 1 auto; min-width: 0; }
}
.verschieben-hilfe { display: block; max-width: 26em; margin: 0.2rem 0 0.4rem; opacity: 0.7; }

/* Heller darf das Bild nur, wenn der Text trotzdem steht (Raimund 09.09.2026:
   „mach das Hero-Bild ein wenig heller und den Text"). Zwei Dinge zugleich:
   ein Verlauf von unten, der genau dort dunkelt, wo die Schrift sitzt, und
   Schrift in vollem Weiss statt gedaempft. Ohne den Verlauf gewinnt das Bild
   und der Name des Paares verschwindet darin. */
.angebot-aufmacher .aufmacher-grund::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(12,18,26,.78) 0%, rgba(12,18,26,.45) 38%,
                              rgba(12,18,26,.10) 68%, rgba(12,18,26,0) 100%);
}
.angebot-aufmacher .zeile-gross { color: #fff; text-shadow: 0 1px 18px rgba(8,12,18,.55); }
.angebot-aufmacher .satz, .angebot-aufmacher .hinweis, .angebot-aufmacher .marke {
  color: #f4f1ec; opacity: 1; text-shadow: 0 1px 12px rgba(8,12,18,.5);
}
.angebot-aufmacher .hero-wege a { color: #fff; }

body:has(.band-vorschau) .weiter-pfeil { bottom: 3.4rem; }

/* Videoplaetze (wedding/filme.py, 10.09.2026): das Video liegt genau dort, wo
   sonst das Bild liegt — gleiche Flaeche, gleiches object-fit. Kein Clip, kein
   Unterschied. */
.aufmacher-grund video.platz-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.88; }
/* Post 84: Foto unter dem Video, sofort da; das Video darüber (gleiche Fläche). */
.aufmacher-grund img.hinter-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.88; transition: opacity 0.6s ease; }
/* Läuft der Clip, geht das Foto weg — sonst scheint es durch das Video (0,88). */
.aufmacher-grund img.hinter-video.weg { opacity: 0; }
.aufmacher-grund video.platz-video { position: relative; background: transparent; }

/* Sprachauswahl oben rechts (Posts 71/81) */
.kopf nav { display: flex; align-items: baseline; gap: 1.25rem; }
.sprache { font-family: var(--grot); font-size: 0.6875rem; letter-spacing: 0.18em; text-decoration: none; opacity: .85; }
.sprache .aktiv { text-decoration: underline; text-underline-offset: 3px; }
.kopf > .sprache { margin-left: auto; }
/* Fabelwesen über der Wortmarke (Post 83): klein, gold, ohne Text. */
.haus-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.haus-wesen { width: 34px; height: 40px; object-fit: contain; display: block; margin: 0 auto 0.1rem; }
/* Der klebende Besuchs-Knopf (Post 82) — unten links, wie der Concierge rechts. */
.besuch-schwebe { position: fixed; left: calc(1rem + var(--rahmen-d, 0px)); bottom: calc(1rem + var(--rahmen-u, 0px)); z-index: 8; max-width: min(24rem, calc(100vw - 2rem)); background: var(--kalk); color: var(--tinte); border-radius: 1.25rem; box-shadow: 0 12px 40px rgba(8,12,18,.35); font-size: 1rem; }
.besuch-schwebe summary { list-style: none; cursor: pointer; padding: 0.8rem 1.2rem; font-family: var(--serif); font-size: 1.05rem; display: flex; gap: 0.6rem; align-items: baseline; }
.besuch-schwebe summary::-webkit-details-marker { display: none; }
.besuch-schwebe summary .knapp { font-family: var(--grot); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: .7; }
.besuch-schwebe[open] summary { border-bottom: 1px solid rgba(27,39,51,.15); }
.besuch-form { padding: 1rem 1.2rem 1.2rem; display: grid; gap: 0.7rem; }
.besuch-form .feld input { width: 100%; }
.besuch-reihe { display: grid; grid-template-columns: 1fr auto; gap: 0.7rem; }
@media (max-width: 40rem) { .besuch-schwebe { left: calc(0.75rem + var(--rahmen-d, 0px)); right: calc(0.75rem + var(--rahmen-d, 0px)); max-width: none; } }

/* Der schwebende Concierge auf der Angebotsseite (Raimund 10.09.2026: „immer
   sichtbar"). Unten rechts, ueber Preisleiste (z 4) und Pfeil (z 6). Zu = Knopf,
   offen = der Kasten aus _concierge.html; auf dem Handy ueber die ganze Breite. */
.theo-schwebe {
  position: fixed; right: calc(1rem + var(--rahmen-d, 0px)); bottom: calc(1rem + var(--rahmen-u, 0px)); z-index: 8;
  max-width: min(26rem, calc(100vw - 2rem - 2 * var(--rahmen-d, 0px)));
  background: var(--kalk); color: var(--tinte);
  border-radius: 1.25rem; box-shadow: 0 12px 40px rgba(8,12,18,.35);
  font-size: 1rem;
}
.theo-schwebe summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 0.8rem 1.25rem; font-family: var(--grot); font-weight: 600; font-size: 0.9rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.theo-schwebe summary::-webkit-details-marker { display: none; }
.theo-schwebe summary .knapp { opacity: 0.6; }
.theo-schwebe[open] { width: min(26rem, calc(100vw - 2rem)); border-radius: 1rem; }
.theo-schwebe[open] summary { border-bottom: 1px solid color-mix(in srgb, var(--tinte) 15%, transparent); }
.theo-schwebe-innen { padding: 0 1.25rem 1.25rem; max-height: min(70vh, 34rem); overflow-y: auto; }
.theo-schwebe .concierge { margin: 0.75rem 0 0; max-width: none; }
.theo-schwebe .concierge-verlauf { max-height: 16rem; }
body:has(.band-vorschau) .theo-schwebe { bottom: calc(var(--band-h, 2.75rem) + 0.65rem + var(--rahmen-u, 0px)); }
@media (max-width: 40rem) {
  .theo-schwebe { right: 0.75rem; bottom: 0.75rem; }
  .theo-schwebe[open] { left: 0.75rem; width: auto; max-width: none; }
}

/* Warum bei uns (wedding/usp.py, 10.09.2026): acht Punkte, zwei Spalten, Titel
   in der Zahlenschrift, Satz in Garamond ohne Zahl. Kein Vergleich mit anderen. */
.usp { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 3rem; }
.usp li { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); padding-top: 1rem; }
.usp .fakt { display: block; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--parkett); }
.grund-abend .usp .fakt, .grund-nacht .usp .fakt { color: var(--luster); }
.usp p { margin: 0.4rem 0 0; max-width: 34em; }
@media (max-width: 40rem) { .usp { grid-template-columns: 1fr; gap: 1.25rem; } }
/* Kleine Nummer vor jedem der acht Dinge (Raimund 11.09.2026: „bei den 8 Dingen auch
   kleine Nummer davor") — ein Zähler, kein Markup; Farbe wie der Titel daneben. */
.usp { counter-reset: usp; }
.usp li { counter-increment: usp; }
.usp .fakt::before { content: counter(usp, decimal-leading-zero); margin-right: 0.75em; font-variant-numeric: tabular-nums; opacity: 0.65; }
.gaenge-zeile { margin: -0.25rem 0 0.75rem; }
.wunsch { margin-top: 1.5rem; padding: 1rem 1.1rem; border: 1px dashed color-mix(in srgb, currentColor 30%, transparent); border-radius: 2px; max-width: 44em; }
.wunsch .feld { margin: 0; }
.wunsch textarea { width: 100%; font: inherit; }

/* Varianten A/B (wedding/varianten.py, Raimund 10.09.2026) */
.varianten { margin-top: 2rem; padding: 1.25rem 1.25rem 1rem; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 2px; }
.varianten-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.variante .fakt { display: block; margin-bottom: 0.35rem; }
.variante p { margin: 0 0 0.6rem; }
.varianten-tabelle { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.95rem; }
.varianten-tabelle th, .varianten-tabelle td { text-align: left; padding: 0.4rem 0.5rem; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.varianten-tabelle th { font-family: var(--grot); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
@media (max-width: 40rem) { .varianten-spalten { grid-template-columns: 1fr; } }

/* Handy: der feste Kopf bleibt schmal (Befund 11.09.2026 auf der Angebotsseite:
   285 px hoch, sechs Menüpunkte untereinander, ein Drittel des Bildschirms stand
   beim Scrollen still). Das Menü wird eine waagrechte Zeile unter dem Logo, die
   man wischt. Steht am Ende, damit es jede frühere `.wege`-Regel schlägt; gilt für
   alle Seiten mit `ul.wege` im Kopf. */
@media (max-width: 48rem) {
  .kopf { flex-wrap: wrap; align-items: center; row-gap: 0.3rem; padding-block: 0.55rem; }
  .kopf nav { flex: 1 0 100%; order: 3; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .kopf nav::-webkit-scrollbar { display: none; }
  .kopf .wege { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 1.1rem; margin: 0; padding: 0 0 0.1rem; list-style: none; }
  .kopf .wege li { margin: 0; }
  .kopf .wege a { display: inline-block; white-space: nowrap; font-size: 0.6875rem; padding-block: 0.3rem; }
  .kopf .haus-wesen { width: 24px; height: 28px; }
}

/* ── Sprungmenü der Angebotsseite (Raimund 11.09.2026) ─────────────────────
   Am Handy im festen Kopf rechts, statt der abgeschnittenen Menüzeile; am
   grossen Schirm erst, wenn der Kopf weggescrollt ist (body.kopf-weg). */
/* 🔴 Nur `details.sprung`: als `.sprung` trafen diese Regeln auch den Link „Zum
   Inhalt springen" (a.sprung) — am Handy lag ein dunkler 52-px-Balken über dem
   Kopf und schnitt das Logo ab (Qualitätsprüfung 11.09.2026, alle Engines). */
details.sprung { position: fixed; top: calc(0.9rem + var(--rahmen-d, 0px)); left: auto; right: calc(var(--rand, 1rem) + var(--rahmen-d, 0px)); z-index: 9; font-family: var(--grot); display: none; }
details.sprung summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.95rem; border-radius: 999px; background: rgba(16,23,31,.86); color: var(--kalk); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
details.sprung summary::-webkit-details-marker { display: none; }
details.sprung summary:focus-visible { outline: 3px solid var(--luster, currentColor); outline-offset: 3px; }
.sprung-strich, .sprung-strich::before, .sprung-strich::after { display: block; width: 1rem; height: 2px; background: currentColor; border-radius: 1px; }
.sprung-strich { position: relative; }
.sprung-strich::before, .sprung-strich::after { content: ""; position: absolute; left: 0; }
.sprung-strich::before { top: -5px; }
.sprung-strich::after { top: 5px; }
details.sprung[open] summary { background: var(--kalk); color: var(--tinte); }
details.sprung nav { position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 13rem; max-width: calc(100vw - 2rem); max-height: calc(100svh - 6rem); overflow-y: auto; background: var(--kalk); color: var(--tinte); border-radius: 1rem; box-shadow: 0 12px 40px rgba(8,12,18,.35); padding: 0.5rem; }
details.sprung ul { list-style: none; margin: 0; padding: 0; }
details.sprung a { display: block; padding: 0.7rem 0.95rem; border-radius: 0.6rem; text-decoration: none; color: inherit; font-size: 0.95rem; letter-spacing: 0.02em; }
details.sprung a:hover, details.sprung a:focus-visible { background: rgba(16,23,31,.07); }
body.kopf-weg details.sprung { display: block; }
main section[id] { scroll-margin-top: 4.5rem; }
@media (max-width: 48rem) {
  details.sprung { display: block; top: calc(0.7rem + var(--rahmen-d, 0px)); }
  .kopf-angebot nav { display: none; }
  .kopf-angebot { padding-right: 8rem; }
  main section[id] { scroll-margin-top: 5.5rem; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }