@charset "UTF-8";
/* ===========================================================================
   Einladung · 10.10.2026 · Gewölbekeller
   Gestaltung nach der freien Vorlage „Story" von HTML5 UP (@ajlkn),
   CC BY 3.0 – https://html5up.net/story · Kopie in design/vorlage_story/.

   Übernommen ist Storys Bausystem, nicht ihr Code:
     · banner   → Deckblatt über bildschirmfüllendem Foto, geteilt ab 62rem
     · spotlight→ Ort/Weinkeller als Foto bis an den Seitenrand + ruhige Spalte
     · gallery  → gleich hohe Kacheln, 2 px Fuge, keine Rahmen
     · wrapper  → mittig gesetzte Abschnitte mit viel Luft, Haarlinien statt Kästen
   Storys Schriften (Google Fonts) und Font-Awesome sind NICHT übernommen –
   es bleibt bei den self-hosted Schriften Fraunces und Alegreya Sans.

   0 externe Ressourcen: Schriften liegen in static/fonts/, jede Grafik ist CSS,
   Inline-SVG oder ein Foto aus static/img/. Kontraste gemessen mit
   a11y-audit/scripts/contrast.py; die Werte stehen an den Farbtoken.

   Gliederung
     1 Schriften          8 Deckblatt (banner)     15 Formular
     2 Token              9 Marke „vorläufig"      16 Bestätigung
     3 Grundlagen        10 Der Abend in Kürze     17 FAQ
     4 Typografie        11 Ort, Bilder, Lightbox  18 Fußzeile
     5 Gerüst            12 Menü und Wein          19 Login
     6 Kopfleiste        13 Ablauf (Kerzenlinie)   20 Gastgeber-Ansicht
     7 Schaltflächen     14 Anreise                21 Klebeleiste, Meldungen
                                                   22 Stimmung (Fotos)
                                                   23 Bewegung, Druck
   =========================================================================== */

/* --- 1 · Schriften (OFL, self-hosted) ------------------------------------ */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-var-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Alegreya Sans';
  src: url('fonts/alegreya-sans-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('fonts/alegreya-sans-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('fonts/alegreya-sans-400italic-latin.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('fonts/alegreya-sans-400italic-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('fonts/alegreya-sans-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('fonts/alegreya-sans-500-latin-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('fonts/alegreya-sans-700-latin.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('fonts/alegreya-sans-700-latin-ext.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2 · Token ----------------------------------------------------------- */

:root {
  /* Gewölbe – tiefer und ruhiger als zuvor, damit die Fotos tragen */
  --nacht:        #0A0D14;   /* Seitengrund                                  */
  --nacht-karte:  #121722;   /* Karten, Blöcke                               */
  --nacht-feld:   #1A2030;   /* Eingabefelder                                */
  --nacht-tief:   #05070C;   /* Fußzeile, Kopfleiste                         */

  /* Kerzenlicht (Werte unverändert – Kontraste bleiben gemessen gültig) */
  --gold:         #E7B667;   /* Akzenttext    >10,4:1 auf Nacht              */
  --gold-tief:    #C08A38;   /* Linien, Dekor  >6,4:1 auf Nacht              */

  /* Text */
  --creme:        #F4EADB;   /* Fließtext     >16,2:1 auf Nacht              */
  --creme-still:  #CDBBA4;   /* Metadaten     >10,3:1 auf Nacht              */

  /* Linien und Zustände */
  --linie:        rgba(231, 182, 103, .16);
  --linie-stark:  rgba(231, 182, 103, .30);
  --linie-ui:     #8A7159;   /* Rand Bedienelemente  >3,8:1 auf Nacht        */
  --fehler:       #F2A79E;   /* 9,53:1 auf Karte                             */
  --gut:          #9FD6A6;   /* 11,16:1 auf Karte                            */

  /* Maße – Story arbeitet mit sehr viel Luft und fast ohne Rundung */
  --breit:   66rem;
  --breiter: 80rem;
  --rand:    clamp(1.25rem, 5vw, 3rem);
  --spalten-rand: clamp(1.25rem, 5vw, 5rem);
  --luft:    clamp(4rem, 9vw, 8.5rem);
  --radius:  2px;
  --kopfhoehe: 3.75rem;
  --bild: url("img/orte/weinkeller/1.jpg");
}

@media (min-width: 105rem) {
  :root { --breit: 72rem; --breiter: 88rem; --spalten-rand: 6.5rem; }
}

/* --- 3 · Grundlagen ------------------------------------------------------ */

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

/* Muss über allen display-Regeln stehen: sonst zeigt sich ein per hidden
   ausgeblendeter Knopf trotzdem, weil .knopf display:inline-flex setzt. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* = Höhe der Kopfleiste plus Luft (Jury-Auflage 9) */
  scroll-padding-top: calc(var(--kopfhoehe) + 1.25rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--nacht);
  color: var(--creme);
  font-family: 'Alegreya Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.72;
  text-rendering: optimizeLegibility;
  /* KEIN overflow-x: hidden (Jury-Auflage 9) – Überläufe werden dort gelöst,
     wo sie entstehen. Lange Wörter (E-Mail, Adresse) brechen stattdessen um. */
  overflow-wrap: break-word;
}

/* Ein einziger, sehr ruhiger Lichtschein statt der früheren drei Farbwolken –
   die Fotos sollen die Wärme liefern, nicht der Hintergrund. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(70rem 46rem at 50% -18rem, rgba(231, 182, 103, .075), transparent 70%);
}

/* Korn – verhindert Farbstreifen auf den dunklen Verläufen */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)' opacity='.22'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; }

/* --- 4 · Typografie ------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: 'Fraunces', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;
  color: var(--creme);
  margin: 0 0 .5em;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-variation-settings: 'opsz' 144, 'SOFT' 20, 'WONK' 1;
  font-weight: 300;
  font-size: clamp(2.5rem, 1.5rem + 5.4vw, 5.75rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
}
h2 {
  font-variation-settings: 'opsz' 90, 'SOFT' 18, 'WONK' 1;
  font-weight: 400;
  font-size: clamp(1.85rem, 1.3rem + 2.6vw, 3.35rem);
  letter-spacing: -0.022em;
}
/* Am Handy ist die Zeile nur 335 px breit: eine H2 in Schreibtischgröße
   bricht dort dreimal um. 1,7 rem trägt den Ton und spart zwei Zeilen. */
@media (max-width: 34rem) {
  h1 { font-size: clamp(2.25rem, 1.2rem + 5.4vw, 3rem); }
  h2 { font-size: 1.7rem; }
}

h3 {
  font-variation-settings: 'opsz' 28, 'SOFT' 12, 'WONK' 0;
  font-weight: 500;
  font-size: clamp(1.2rem, 1.08rem + 0.55vw, 1.45rem);
  letter-spacing: -0.005em;
}
h4 {
  font-variation-settings: 'opsz' 20, 'SOFT' 10, 'WONK' 0;
  font-weight: 600;
  font-size: 1.05rem;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--creme); }

strong, b { font-weight: 700; }
small { font-size: .9375rem; }

.vorspann {
  font-size: clamp(1.12rem, 1.02rem + 0.6vw, 1.4rem);
  line-height: 1.55;
  color: var(--creme);
  max-width: 40ch;
}

.stille { color: var(--creme-still); }

/* Storys Kleinversalien-Zeile: weit gesperrt, still, nie laut */
.oberzeile {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--creme-still);
  margin: 0 0 1.35rem;
}

/* Sichtbarer Fokus – überall gleich (WCAG 2.4.7 / 2.4.11) */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Überschrift, Fehlerkasten und Bestätigung bekommen den Fokus per Skript,
   damit Vorleser die neue Stelle ansagen. Mit der Tabulatortaste sind sie
   nicht erreichbar – ein zweiter Rahmen um den ohnehin farbigen Kasten würde
   nur wie ein Gestaltungsfehler aussehen. */
[tabindex="-1"]:focus { outline: none; }

/* Nur für Screenreader. Bewusst ohne position:absolute – in einem Container
   mit overflow-x:auto fiele ein absolut gesetztes Element aus dem
   Scrollbereich und machte die ganze Seite quer scrollbar. */
.nur-fuer-vorleser {
  display: inline-block;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprungmarke {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -140%);
  z-index: 100;
  background: var(--gold);
  color: var(--nacht);
  padding: .7rem 1.2rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700;
  text-decoration: none;
}
.sprungmarke:focus { transform: translate(-50%, 0); color: var(--nacht); }

/* --- 5 · Gerüst ---------------------------------------------------------- */

.huelle {
  width: 100%;
  max-width: var(--breit);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.huelle--breit { max-width: var(--breiter); }

.abschnitt { padding-block: calc(var(--luft) * .55); position: relative; }
.abschnitt:last-of-type { padding-bottom: var(--luft); }

.abschnitt-kopf { margin-bottom: clamp(2rem, 4.5vw, 3.25rem); }
.abschnitt-kopf p { max-width: 46ch; color: var(--creme-still); }

/* Storys „wrapper style1 align-center": mittig gesetzte Abschnitte */
#vorab .abschnitt-kopf,
#kuerze .abschnitt-kopf,
#ablauf .abschnitt-kopf,
#faq .abschnitt-kopf { text-align: center; }
#vorab .abschnitt-kopf p,
#kuerze .abschnitt-kopf p,
#ablauf .abschnitt-kopf p,
#faq .abschnitt-kopf p { margin-inline: auto; }

/* Am Handy zaehlt jede Zeile: die Luft zwischen den Abschnitten wird von
   rund 35 auf 28 px zurueckgenommen, der Abschnittskopf ruecht naeher an
   seinen Inhalt. Am Schreibtisch bleibt Storys grosszuegiges Mass. */
@media (max-width: 61.99rem) {
  .abschnitt { padding-block: 1.4rem; }
  .abschnitt:last-of-type { padding-bottom: 2rem; }
  .abschnitt-kopf { margin-bottom: .9rem; }
  .abschnitt-kopf .oberzeile { margin-bottom: .45rem; }
  .abschnitt-kopf p:last-child { margin-bottom: 0; }
  /* Fließtext bleibt bei knapp 17 px – nur der Zeilenabstand wird ruhiger. */
  .einladungstext p { font-size: 1.06rem; line-height: 1.62; }
  .einladungstext { margin-bottom: 0; }
}

.trenner {
  border: 0;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--linie) 22%, var(--linie) 78%, transparent);
  position: relative;
}
.trenner::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold-tief);
  opacity: .7;
}

/* --- 6 · Kopfleiste ------------------------------------------------------ */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(5, 7, 12, .80);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--kopfhoehe);
  justify-content: space-between;
}
.kopf-marke {
  display: flex;
  /* F-8 (Kritik Runde 1): als einziges Bedienelement hatte die Marke kein
     min-height und blieb mit 42,9 px unter den geforderten 44 px. */
  min-height: 2.75rem;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--creme);
  text-decoration: none;
  padding-block: .5rem;
}
.kopf-marke .datum { color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kopf-marke .ort {
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--creme-still);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kopf-marke .ort::before { content: "·"; margin-right: .7rem; color: var(--gold-tief); }
@media (max-width: 30rem) { .kopf-marke .ort { display: none; } }

.kopf-tasten { display: flex; align-items: center; gap: .4rem; }
/* siehe kopfSetzen(): auf der Einladung am Handy überflüssig */
@media (max-width: 61.99rem) { .kopf .kopf-aktion--doppelt { display: none; } }
.kopf-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .3rem .55rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--creme-still);
  text-decoration: none;
  white-space: nowrap;
}
.kopf-link:hover { color: var(--gold); }
.kopf-link[aria-current="page"] { color: var(--gold); }

/* --- 7 · Schaltflächen --------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;           /* 44 px – Touch-Ziel (WCAG 2.5.8 / Jury 9) */
  padding: .8rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: 'Alegreya Sans', sans-serif;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.knopf--haupt {
  background: var(--gold);
  color: var(--nacht);
}
.knopf--haupt:hover { background: #F2C87F; color: var(--nacht); }
.knopf--still {
  background: transparent;
  border-color: var(--linie-ui);
  color: var(--creme);
}
.knopf--still:hover { border-color: var(--gold); color: var(--gold); }
.knopf--warnung { border-color: var(--fehler); color: var(--fehler); background: transparent; }
.knopf--warnung:hover { background: rgba(242, 167, 158, .12); color: var(--fehler); }
.knopf--klein { min-height: 2.75rem; padding: .5rem 1.1rem; font-size: .8125rem; }
.knopf[disabled] { opacity: .55; cursor: not-allowed; }

/* --- 8 · Deckblatt (Storys „banner fullscreen") -------------------------- */

/* Am Handy liegt das Foto hinter dem Text (mit kräftigem Schleier), ab 62rem
   teilt sich der Schirm: links der Text, rechts das Foto bis an den Rand. */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.25rem, 8vw, 6rem) clamp(2.75rem, 8vw, 5rem);
  min-height: min(38rem, calc(100svh - var(--kopfhoehe)));
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-innen { position: relative; z-index: 1; width: 100%; }

/* Das frühere Deko-Element trägt jetzt das Foto (aria-hidden, kein Inhalt).
   Seit 16.09.2026 in zwei Lagen: der Rahmen hält den Schleier fest, die innere
   Ebene trägt nur das Foto und fährt beim Scrollen leicht mit (Abschnitt 22). */
.hero-bogen {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Absichtlich höher als der Rahmen: beim Verschieben kommt so nie eine Kante
   zum Vorschein – und weil nur transform bewegt wird, springt kein Layout. */
.hero-bogen__bild {
  position: absolute;
  left: 0;
  right: 0;
  top: -14%;
  height: 128%;
  background-image: var(--bild);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
/* Der Schleier steht still – führe er mit, wanderte die dunkle Kante mit. */
.hero-bogen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 13, 20, .74) 0%, rgba(10, 13, 20, .86) 55%, rgba(10, 13, 20, .95) 100%);
}

.hero h1 { margin-bottom: .32em; max-width: 14ch; }
.hero-anlass {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 36, 'SOFT' 20, 'WONK' 1;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  color: var(--gold);
  margin: 0 0 1.15rem;
  letter-spacing: .005em;
}
.hero-text { max-width: 44ch; }

/* Der warme Satz aus Jury-Auflage 1 (Kritik F-7) – zwischen Anlasszeile und
   Deckblatt, deutlich ruhiger gesetzt als der Titel. */
.hero-satz {
  max-width: 44ch;
  margin: 0 0 1.35rem;
  font-size: clamp(1rem, .97rem + .2vw, 1.1rem);
  line-height: 1.6;
  color: var(--creme-still);
}

.hero-tasten {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.6rem;
}
.hero-frist {
  margin-top: 1.1rem;
  font-size: .9375rem;
  color: var(--creme-still);
}
.hero-frist b { color: var(--creme); }

/* Deckblatt: WANN · BEGINN · WO · ENDE, nur Haarlinien, keine Kästen. */
.deckblatt {
  margin: 1.75rem 0 0;
  display: grid;
  gap: 0;
  max-width: 34rem;
  border-top: 1px solid var(--linie);
}
.deckblatt > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: .15rem .9rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linie);
}
.deckblatt dt {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-tief);
  padding-top: .42rem;
}
.deckblatt dd {
  margin: 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .1rem .55rem;
}
.deckblatt dd b {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 30, 'SOFT' 14, 'WONK' 0;
  font-weight: 400;
  font-size: 1.16rem;
  line-height: 1.35;
}
@media (max-width: 24rem) {
  .deckblatt > div { grid-template-columns: minmax(0, 1fr); }
}

/* Handy-Deckblatt (Vorgabe vom 11.09.2026: die Einladung wird zu 100 % am
   Handy gelesen). Auf dem ersten Schirm stehen Foto, Anlass, der eine Satz,
   WANN / BEGINN / WO, die Frist und der Anmeldeknopf. Die Frist steht schon
   im Markup vor den Knoepfen - Lesefolge und Bildfolge sind damit gleich
   (WCAG 1.3.2), das Stylesheet muss nichts mehr umsortieren. */
@media (max-width: 61.99rem) {
  .hero-frist { margin-top: 0; }
  .hero-tasten { margin-top: 1.1rem; }
}
@media (max-width: 34rem) {
  .hero-taste--zweit { display: none; }   /* Klebeleiste + Scrollen leisten dasselbe */
  /* Jede Zeile hier ist gemessene Hoehe. */
  .hero { padding-block: 1rem 1.25rem; min-height: 0; }
  .hero .oberzeile { margin-bottom: .4rem; }
  .hero h1 { margin-bottom: .16em; font-size: clamp(2.25rem, 1.2rem + 5.4vw, 3rem); }
  .hero-anlass { margin-bottom: .5rem; }
  .hero-satz { margin-bottom: .5rem; }
  .deckblatt { margin-top: .7rem; }
  .deckblatt > div { grid-template-columns: 4.4rem minmax(0, 1fr); padding: .42rem 0; }
  .deckblatt dt { padding-top: .38rem; }
  .deckblatt dd b { font-size: 1.08rem; }
  .hero-tasten { margin-top: .9rem; }
  .hero-tasten .knopf { width: 100%; }    /* daumenbreit statt linksbuendig */
}

/* Geteiltes Deckblatt ab 62rem: Text links, Foto rechts bis an den Rand. */
@media (min-width: 62rem) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    align-items: stretch;
    padding: 0;
    min-height: min(45rem, calc(100svh - var(--kopfhoehe)));
  }
  .hero-bogen {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
  }
  .hero-bogen__bild { background-position: 52% center; }
  .hero-bogen::after {
    background: linear-gradient(90deg, rgba(10, 13, 20, .95) 0%, rgba(10, 13, 20, .35) 22%, rgba(10, 13, 20, 0) 55%);
  }
  .hero-innen {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 4vw, 4rem)
             clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 7rem);
  }
  /* Die Frist und der Anmeldeknopf sollen ohne Scrollen zu sehen sein:
     Titel etwas kleiner, Deckblattzeilen enger als am Handy-Hochformat. */
  .hero h1 { max-width: 11ch; font-size: clamp(3rem, 1.2rem + 4.4vw, 5rem); }
  .hero .deckblatt > div { padding: .55rem 0; }
  .hero-kopf, .hero-text, .deckblatt { width: 100%; max-width: 34rem; }
}

.einladungstext { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.einladungstext p { font-size: clamp(1.08rem, 1.02rem + 0.35vw, 1.24rem); line-height: 1.7; }
#vorab .einladungstext,
#kuerze .einladungstext { margin-inline: auto; text-align: center; }
/* „Vorweg" (einladung.vorab) erklärt, warum aus Südtirol Kraiburg wurde. Der
   Block steht als eigener Abschnitt VOR der Einladung; sein Fließtext darf
   eine Spur ruhiger sein als der Einladungstext selbst. */
#vorab .einladungstext p { color: var(--creme-still); }
#vorab .einladungstext p:first-child { color: var(--creme); }

/* --- 9 · Marke „vorläufig" ----------------------------------------------- */

.marke {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .18rem .6rem .22rem;
  border: 1px solid var(--gold-tief);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  vertical-align: middle;
  white-space: nowrap;
}
.marke--still { border-color: var(--linie-ui); color: var(--creme-still); }

/* Platzhalter, die Florian noch liefern muss – sollen auffallen */
.platzhalter {
  display: inline-block;
  padding: .05rem .45rem;
  border: 1px dashed var(--gold-tief);
  border-radius: 4px;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: .8125em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gold);
  background: rgba(192, 138, 56, .14);
}

/* --- 10 · Einladungstext und Handy-Helfer -------------------------------- */

/* Die vier Kacheln „Der Abend in Kürze" sind weg: sie wiederholten Ablauf,
   Menü und Raum und standen am Handy als eigener Bildschirm im Weg. Den
   Abschnitt trägt jetzt der Einladungstext allein (siehe .einladungstext,
   Abschnitt 8). */

/* Was am Handy nur Wiederholung wäre, am Schreibtisch aber als Merkzettel
   taugt. Hier darf nichts stehen, das man zum Kommen braucht. */
.nur-breit { display: none; }
@media (min-width: 62rem) { .nur-breit { display: block; } }

/* Karten ohne Kasten am Handy: siehe die Regel zu .karte--flach am Ende
   dieses Stylesheets – sie muss nach Abschnitt 12 stehen. */

/* --- 11 · Ort und Raum, Fotostrecke, Lichtkasten ------------------------- */

/* Ort und Weinkeller waren zwei Abschnitte mit sieben Fotos untereinander –
   zusammen gut 2 400 px am Handy. Jetzt ist es ein Abschnitt: zwei kurze
   Absätze und EINE Fotostrecke, die waagrecht in sich selbst scrollt. Ab
   62 rem wird daraus wieder ein ruhiges Raster über die volle Breite. */

.orttext { max-width: 62ch; }
.orttext p { color: var(--creme-still); }
.orttext > p:first-child { color: var(--creme); }
.raum { margin-top: 1.2rem; }
.raum h3 { margin-bottom: .3em; }

/* Belege zum Haus – Küche, Auszeichnungen, Bewertung – bleiben vollständig,
   aber aufgeklappt nur, wenn jemand sie sehen will. */
.mehr {
  margin-top: 1.2rem;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.mehr > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .6rem 0;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--creme-still);
}
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary::after {
  content: "";
  width: .5rem; height: .5rem;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.mehr[open] > summary { color: var(--gold); }
.mehr[open] > summary::after { transform: rotate(-135deg); }
.mehr > div { padding-bottom: 1.3rem; }
.mehr .kochzeile { margin-top: 0; }
.mehr p:last-child { margin-bottom: 0; }
/* In einer Karte (Menü) reicht eine Haarlinie oben. */
.karte > .mehr { margin-top: 1.2rem; border-bottom: 0; }
/* Als eigene Zeile in der Anreise-Liste: die Haarlinie kommt von der Zeile. */
.mehr--zeile { margin-top: 0; }
.mehr--zeile > summary { padding: .2rem 0; }
/* In der Fußzeile: dort ist der Text ohnehin still. */
.mehr--fuss { margin-top: 0; border: 0; }
.mehr--fuss > summary { padding: .2rem 0 .8rem; color: var(--creme); }

.kochzeile {
  margin-top: 1.6rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--gold-tief);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--creme);
}

.auszeichnungen { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .5rem; }
.auszeichnungen li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: .6rem;
  font-size: .9375rem;
  color: var(--creme-still);
}
.auszeichnungen li::before { content: "✦"; color: var(--gold-tief); }

.google-pille {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.2rem;
  padding: .35rem .85rem .4rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: .8125rem;
  color: var(--creme-still);
}
.google-pille b { color: var(--creme); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.google-pille .stern { color: var(--gold); }

/* Hinweis auf den zweiten Google-Eintrag, direkt unter dem Kartenknopf
   (Jury-Auflage 10, Kritik F-6) – und nur dort, wo der Knopf steht. */
.karten-hinweis {
  margin: .45rem 0 0;
  max-width: 42ch;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--creme-still);
}

/* Storys „gallery": gleich hohe Kacheln, schmale Fuge, keine Rahmen */
.bildstreifen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
/* Ab drei Fotos führt das erste als breites Bild, der Rest steht darunter. */
.bildstreifen--viele li:first-child { grid-column: 1 / -1; }
.bildstreifen li { margin: 0; min-width: 0; }
.bildstreifen__knopf {
  display: block;
  width: 100%;
  padding: 0;
  cursor: pointer;
  background: var(--nacht-feld);
  border: 0;
  overflow: hidden;
}
.bildstreifen__knopf img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(.92) contrast(1.02);
  transition: transform .5s cubic-bezier(.2, .6, .2, 1), filter .3s ease;
}
.bildstreifen--viele li:first-child .bildstreifen__knopf img { aspect-ratio: 16 / 10; }
.bildstreifen:not(.bildstreifen--viele):not(.bildstreifen--strecke)
  .bildstreifen__knopf img { aspect-ratio: 4 / 5; }
.bildstreifen__knopf:hover img { transform: scale(1.04); filter: saturate(1) contrast(1.02); }
.bildstreifen__knopf:focus-visible { outline-offset: -3px; }

/* Die Fotostrecke: eine Zeile, waagrecht zu wischen. Sie scrollt in sich
   selbst, das Dokument bleibt ruhig – deshalb steht sie außerhalb der Hülle
   und trägt den Seitenrand als eigenen Innenrand. */
.bildstreifen--strecke {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  gap: 6px;
  padding: 0 var(--rand) .5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-tief) transparent;
}
.bildstreifen--strecke li { scroll-snap-align: center; }
.bildstreifen--strecke .bildstreifen__knopf img { aspect-ratio: 4 / 3; }
@media (min-width: 34rem) { .bildstreifen--strecke { grid-auto-columns: 46%; } }
@media (min-width: 62rem) {
  .bildstreifen--strecke {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 2px;
    padding: 0;
    overflow: visible;
  }
}

.bildquelle {
  margin: .8rem 0 0;
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--creme-still);
}
/* Lichtkasten */
.lichtkasten {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.6rem, 3vw, 2rem);
  background: rgba(5, 7, 12, .97);
}
.lichtkasten[hidden] { display: none; }
body.hat-lichtkasten { overflow: hidden; }
.lichtkasten__buehne {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: min(72rem, 100%);
  max-height: 100%;
}
.lichtkasten__figur {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  max-height: calc(100vh - 4rem);
}
.lichtkasten__bild {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(68vh, 44rem);
  height: auto;
  object-fit: contain;
  background: var(--nacht-karte);
  margin-inline: auto;
}
.lichtkasten__text { color: var(--creme); max-width: 60ch; margin-inline: auto; }
.lichtkasten__alt { font-size: .9375rem; line-height: 1.45; margin: 0 0 .3rem; }
.lichtkasten__quelle { font-size: .8125rem; color: var(--creme-still); margin: 0 0 .2rem; }
.lichtkasten__zaehler {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--creme-still); margin: 0; font-variant-numeric: tabular-nums;
}
.lichtkasten__schliessen {
  position: absolute; top: -3rem; right: 0;
  font: inherit; font-size: .8125rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--nacht); background: var(--gold);
  border: 1px solid var(--gold); border-radius: 999px;
  padding: .35rem 1.1rem; min-height: 2.75rem; min-width: 2.75rem; cursor: pointer;
}
.lichtkasten__pfeil {
  flex: none;
  font: inherit; font-size: 1.7rem; line-height: 1;
  color: var(--nacht); background: var(--gold);
  border: 1px solid var(--gold); border-radius: 50%;
  width: 2.75rem; height: 2.75rem; cursor: pointer;
}
.lichtkasten__schliessen:hover, .lichtkasten__pfeil:hover { background: #F2C87F; }
@media (max-width: 34rem) {
  .lichtkasten__buehne { flex-wrap: wrap; justify-content: center; }
  .lichtkasten__figur { order: -1; flex-basis: 100%; }
}

/* --- 12 · Menü und Wein -------------------------------------------------- */

.karte {
  background: var(--nacht-karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 4vw, 2.6rem);
}
.karte--betont {
  background: linear-gradient(180deg, rgba(231, 182, 103, .045), transparent 16rem), var(--nacht-karte);
  border-color: var(--linie-stark);
}
.karte h3 { letter-spacing: .01em; }

.menue-liste { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.menue-liste li {
  display: grid;
  grid-template-columns: minmax(2.6rem, max-content) 1fr;
  gap: 1rem;
  padding: .7rem 0;
  border-top: 1px solid var(--linie);
}
.menue-liste .gang {
  white-space: nowrap;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 20, 'SOFT' 0, 'WONK' 0;
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-tief);
  padding-top: .28rem;
  font-variant-numeric: tabular-nums;
}
.menue-liste b { display: block; font-weight: 700; }
.menue-liste p { color: var(--creme-still); font-size: 1rem; margin: .15rem 0 0; }

/* --- 13 · Ablauf (Kerzenlinie) ------------------------------------------- */

#ablauf .ablauf { max-width: 40rem; margin-inline: auto; }
.ablauf { list-style: none; margin: 0; padding: 0; position: relative; }
.ablauf::before {
  content: "";
  position: absolute;
  left: 0.72rem;
  top: 1.5rem;
  bottom: 2.4rem;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(231, 182, 103, .45),
    rgba(231, 182, 103, .22) 55%,
    rgba(231, 182, 103, .06));
}
.ablauf li { position: relative; padding: 0 0 clamp(.9rem, 3.5vw, 2.4rem) 2.7rem; }
.ablauf li:last-child { padding-bottom: 0; }

.ablauf li::before {
  content: "";
  position: absolute;
  left: .43rem;
  top: .5rem;
  width: 11px;
  height: 16px;
  border-radius: 50% 50% 50% 50% / 68% 68% 36% 36%;
  background: radial-gradient(ellipse at 50% 72%, #FFF3D6 0%, var(--gold) 42%, #C4671F 78%, rgba(196, 103, 31, 0) 100%);
  box-shadow: 0 0 12px 3px rgba(231, 182, 103, .28);
  animation: flackern 3.6s ease-in-out infinite;
}
.ablauf li:nth-child(2)::before { animation-delay: -.9s; }
.ablauf li:nth-child(3)::before { animation-delay: -1.8s; }
.ablauf li:nth-child(4)::before { animation-delay: -2.6s; }
.ablauf li:nth-child(5)::before { animation-delay: -1.3s; }

.ablauf .mitternacht::before {
  width: 15px;
  height: 21px;
  left: .32rem;
  box-shadow: 0 0 22px 7px rgba(231, 182, 103, .36);
}

@keyframes flackern {
  0%, 100% { transform: scaleY(1) translateY(0); opacity: 1; }
  35%      { transform: scaleY(1.08) translateY(-1px); opacity: .92; }
  62%      { transform: scaleY(.95) translateY(.5px); opacity: 1; }
}

.ablauf .zeit {
  display: block;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: .2rem;
}
.ablauf h3 { margin: 0 0 .25rem; }
.ablauf p { color: var(--creme-still); font-size: 1rem; line-height: 1.55; max-width: 52ch; }
.ablauf .mitternacht h3 { color: var(--gold); }

/* --- 14 · Anreise -------------------------------------------------------- */

.anreise-gitter { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.anreise-gitter > .karte {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  padding: 1rem 0;
}
@media (min-width: 48rem) {
  .anreise-gitter { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
}
@media (min-width: 72rem) {
  .anreise-gitter { grid-template-columns: repeat(3, 1fr); }
  .anreise-gitter > .karte { border-bottom: 0; padding: 1.9rem 0 0; }
}

.anreise-gitter h3 { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; }
.anreise-gitter .stille p:last-child { margin-bottom: 0; }

.adresse { font-style: normal; font-size: 1.0625rem; line-height: 1.6; }
.telefonliste { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .7rem; }
.telefonliste li { display: grid; gap: .1rem; }
.telefonliste a {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 20, 'SOFT' 8, 'WONK' 0;
  font-weight: 500;
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;          /* Touch-Ziel */
  align-self: start;
}
.telefonliste small { color: var(--creme-still); }
.abstand-oben { margin-top: .9rem; }
.abstand-klein { margin-top: .6rem; }

/* --- 15 · Formular ------------------------------------------------------- */

.anmeldung-gitter { display: grid; gap: clamp(1.25rem, 4vw, 3rem); align-items: start; }
.anmeldung-text { max-width: 46ch; }
.anmeldung-knopf { margin: 0; }
.anmeldung-knopf .knopf { width: 100%; }
.anmeldung-notiz { margin: .85rem 0 0; font-size: .9375rem; }
@media (min-width: 40rem) { .anmeldung-knopf .knopf { width: auto; } }
@media (min-width: 68rem) {
  .anmeldung-gitter {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  /* Auf dem Formularschirm: links Text oben und unten, rechts die Antwortkarte */
  .anmeldung-gitter--klebt {
    grid-template-areas: "oben karte" "unten karte";
    grid-template-rows: max-content 1fr;
  }
  .anmeldung-text--oben { grid-area: oben; }
  .anmeldung-text--unten { grid-area: unten; }
  .anmeldung-gitter--klebt > .antwortkarte,
  .anmeldung-gitter--klebt > .karte { grid-area: karte; }
}

.antwortkarte {
  position: relative;
  background:
    linear-gradient(180deg, rgba(231, 182, 103, .055), transparent 18rem),
    var(--nacht-karte);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 4vw, 2.6rem);
}
.antwortkarte::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  width: min(18rem, 70%);
  height: 2.4rem;
  transform: translateX(-50%);
  border: 1px solid var(--gold-tief);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: .4;
  pointer-events: none;
}

fieldset { border: 0; margin: 0 0 1.8rem; padding: 0; min-width: 0; }
legend {
  padding: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 30, 'SOFT' 12, 'WONK' 0;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--creme);
  margin-bottom: .85rem;
}

.feld { margin-bottom: 1.15rem; }
.feld:last-child { margin-bottom: 0; }

label {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .4rem;
  color: var(--creme);
}
label .freiwillig { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--creme-still); }

.gruppenlabel {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .5rem;
  color: var(--creme);
}

.hilfe {
  display: block;
  margin: .4rem 0 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--creme-still);
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  width: 100%;
  min-height: 2.75rem;
  padding: .7rem .9rem;
  background: var(--nacht-feld);
  border: 1px solid var(--linie-ui);
  border-radius: var(--radius);
  color: var(--creme);
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 1.45;
}
textarea { min-height: 6.5rem; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 1.1rem center, right .75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
input::placeholder, textarea::placeholder { color: #9C8871; opacity: 1; }
input:hover, textarea:hover, select:hover { border-color: var(--gold-tief); }

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--fehler);
  background-color: rgba(242, 167, 158, .06);
}

.feld-fehler {
  display: block;
  margin-top: .4rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--fehler);
}
.feld-fehler::before { content: "✕ "; }

.wahl { display: grid; gap: .75rem; }
@media (min-width: 30rem) { .wahl { grid-template-columns: 1fr 1fr; } }

.wahl-karte {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 3.4rem;
  margin: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--linie-ui);
  border-radius: var(--radius);
  background: var(--nacht-feld);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.wahl-karte:hover { border-color: var(--gold-tief); }
.wahl-karte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl-karte .punkt {
  flex: 0 0 auto;
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--linie-ui);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.wahl-karte .punkt::after {
  content: "";
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--gold);
  transform: scale(0);
  transition: transform .16s ease;
}
.wahl-karte input:checked ~ .punkt { border-color: var(--gold); }
.wahl-karte input:checked ~ .punkt::after { transform: scale(1); }
.wahl-karte:has(input:checked) { border-color: var(--gold); background: rgba(231, 182, 103, .10); }
.wahl-karte:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.wahl-karte .zusatz { display: block; font-weight: 400; font-size: .875rem; color: var(--creme-still); }

/* Essen als Chips mit Mehrfachauswahl (Jury-Auflage 6) */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  margin: 0;
  padding: .45rem .95rem;
  border: 1px solid var(--linie-ui);
  border-radius: 999px;
  background: var(--nacht-feld);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip .haken { color: var(--gold); font-weight: 700; visibility: hidden; }
.chip:hover { border-color: var(--gold-tief); }
.chip:has(input:checked) {
  border-color: var(--gold);
  background: rgba(231, 182, 103, .14);
  color: var(--creme);
  font-weight: 700;
}
.chip:has(input:checked) .haken { visibility: visible; }
.chip:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }

.person {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(.9rem, 3vw, 1.3rem);
  margin-bottom: 1rem;
  background: rgba(231, 182, 103, .02);
}
.person-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
}
.person-kopf h3 {
  margin: 0;
  color: var(--gold);
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.knopf-text {
  background: none;
  border: 0;
  padding: .5rem .25rem;
  min-height: 2.75rem;
  color: var(--creme-still);
  font: inherit;
  font-size: .9375rem;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.knopf-text:hover { color: var(--fehler); }

.knopf--begleitung {
  width: 100%;
  border: 1px dashed var(--linie-ui);
  background: transparent;
  color: var(--creme);
}
.knopf--begleitung:hover { border-color: var(--gold); color: var(--gold); }
.knopf--begleitung .plus { color: var(--gold); font-size: 1.2rem; line-height: 1; }

.absenden { margin-top: 1.85rem; padding-top: 1.6rem; border-top: 1px solid var(--linie); }
.absenden .knopf--haupt { width: 100%; }
.frist-hinweis { margin-top: .9rem; font-size: .9375rem; color: var(--creme-still); }

.fehler-kasten {
  border: 1px solid var(--fehler);
  border-radius: var(--radius);
  background: rgba(242, 167, 158, .08);
  padding: 1rem 1.1rem;
  margin-bottom: 1.4rem;
}
.fehler-kasten h3 { color: var(--fehler); font-size: 1.05rem; margin-bottom: .4rem; }
.fehler-kasten ul { margin: 0; padding-left: 1.1rem; }
.fehler-kasten a { color: var(--fehler); }
.fehler-kasten p { margin: 0; }

/* --- 16 · Bestätigung ---------------------------------------------------- */

.bestaetigung { text-align: left; }
.bestaetigung .siegel {
  width: 3.4rem; height: 3.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(159, 214, 166, .12);
  border: 1px solid var(--gut);
  color: var(--gut);
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.bestaetigung dl {
  margin: 1.3rem 0 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .5rem 1rem;
  font-size: 1rem;
}
.bestaetigung dt { color: var(--creme-still); }
.bestaetigung dd { margin: 0; min-width: 0; }
.bestaetigung-tasten { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

/* Zweistufiges Zurückziehen (Jury-Auflage 4) */
.rueckzug {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
}
.rueckzug-frage {
  border: 1px solid var(--fehler);
  border-radius: var(--radius);
  background: rgba(242, 167, 158, .08);
  padding: 1rem 1.1rem;
}
.rueckzug-frage p { margin-bottom: .8rem; font-size: .9375rem; }
.rueckzug-tasten { display: flex; flex-wrap: wrap; gap: .6rem; }

.zaehler-notiz { margin-top: 1.1rem; font-size: .9375rem; color: var(--creme-still); }
.zaehler-zahl {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 24, 'SOFT' 10, 'WONK' 0;
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* --- 17 · FAQ ------------------------------------------------------------ */

#faq .faq { max-width: 46rem; margin-inline: auto; }
.faq { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.2rem 2.5rem 1.2rem 0;
  position: relative;
  min-height: 2.75rem;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 30, 'SOFT' 12, 'WONK' 0;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--creme);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 1.65rem;
  width: .55rem; height: .55rem;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .antwort { padding: 0 0 1.4rem; color: var(--creme-still); max-width: 62ch; }
.faq .antwort p:not(:last-child) { margin-bottom: .7rem; }
@media (max-width: 61.99rem) {
  .faq summary { padding: .7rem 2.2rem .7rem 0; font-size: 1.05rem; }
  .faq summary::after { top: 1.2rem; }
  .faq .antwort { padding-bottom: 1rem; }
}

/* --- 18 · Fußzeile ------------------------------------------------------- */

.fuss {
  margin-top: var(--luft);
  background: var(--nacht-tief);
  border-top: 1px solid var(--linie);
  padding-block: clamp(2.75rem, 6vw, 4rem);
  /* Platz für die Klebeleiste am Handy (Jury-Auflage 3) */
  padding-bottom: calc(clamp(2.75rem, 6vw, 4rem) + var(--klebeleiste, 0px));
  font-size: .9375rem;
  color: var(--creme-still);
}
.fuss-gitter { display: grid; gap: 1.75rem; }
@media (max-width: 61.99rem) {
  .fuss { margin-top: 2rem; padding-block: 1.75rem; }
  .fuss-gitter { gap: 1rem; }
  .fuss .unterschrift { font-size: 1.45rem; }
  .fuss-schluss { margin-top: 1.2rem; padding-top: .85rem; }
}
@media (min-width: 48rem) { .fuss-gitter { grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); } }
.fuss .fuss-titel {
  color: var(--creme);
  margin-bottom: .7rem;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fuss .unterschrift {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 60, 'SOFT' 40, 'WONK' 1;
  font-weight: 300;
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--gold);
  margin-bottom: .5rem;
}
.fuss-schluss {
  margin-top: 2.25rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem .9rem;
  font-size: .8125rem;
}
/* Pflicht aus CC BY 3.0: Nennung der Vorlage */
.vorlage-hinweis { color: var(--creme-still); opacity: .85; }
.vorlage-hinweis a { color: var(--creme-still); }
.vorlage-hinweis a:hover { color: var(--gold); }

/* --- 19 · Anmeldeseite (login.html) -------------------------------------- */

.tor {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem var(--rand);
  isolation: isolate;
}
/* ACHTUNG: hier darf KEIN Foto des Hauses stehen. Die Anmeldeseite bekommt
   jeder ohne Sitzung; sie verrät weder Ort noch Raum (siehe login.html).
   Deshalb nur Licht und ein gezeichnetes Gewölbe aus CSS. */
.tor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(38rem 26rem at 50% 12%, rgba(231, 182, 103, .11), transparent 70%),
    radial-gradient(30rem 30rem at 50% 120%, rgba(192, 138, 56, .07), transparent 72%);
}
.tor::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: min(34rem, 84vw);
  aspect-ratio: 3 / 4;
  border: 1px solid var(--linie);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 78%);
  pointer-events: none;
}
.tor-karte {
  width: 100%;
  max-width: 27rem;
  text-align: center;
  background: rgba(18, 23, 34, .92);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 6vw, 3rem);
  backdrop-filter: blur(4px);
}
.tor-flamme {
  width: 15px; height: 21px;
  margin: 0 auto 1.6rem;
  border-radius: 50% 50% 50% 50% / 68% 68% 36% 36%;
  background: radial-gradient(ellipse at 50% 72%, #FFF3D6 0%, var(--gold) 42%, #C4671F 78%, rgba(196, 103, 31, 0) 100%);
  box-shadow: 0 0 24px 8px rgba(231, 182, 103, .35);
  animation: flackern 3.6s ease-in-out infinite;
}
.tor-karte h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); margin-bottom: .35em; }
.tor-karte .tor-satz { color: var(--creme-still); margin-bottom: 1.9rem; }
.tor-karte form { text-align: left; }
.tor-karte .knopf--haupt { width: 100%; margin-top: 1.2rem; }
.tor-fuss { margin-top: 1.7rem; font-size: .8125rem; color: var(--creme-still); }

/* --- 20 · Gastgeber-Ansicht ---------------------------------------------- */

.verwaltung-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.verwaltung-kopf h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); margin: 0; }

.hinweiszeile {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  border: 1px solid var(--linie-ui);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: 1.5rem;
  font-size: .9375rem;
  color: var(--creme-still);
  background: rgba(231, 182, 103, .04);
}

.kacheln { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 34rem) { .kacheln { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .kacheln { grid-template-columns: repeat(4, 1fr); } }
.kachel {
  background: var(--nacht-karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
}
.kachel .wert {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 90, 'SOFT' 14, 'WONK' 0;
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.kachel .bezeichnung {
  display: block;
  margin-top: .5rem;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--creme-still);
}

.werkzeugleiste {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.werkzeugleiste .filter { display: flex; flex-wrap: wrap; gap: .9rem; }
.werkzeugleiste .feld { margin: 0; min-width: 11rem; flex: 1 1 11rem; }
.werkzeugleiste .tasten { display: flex; flex-wrap: wrap; gap: .6rem; }

.tabelle-rahmen {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--nacht-karte);
}
table { border-collapse: collapse; width: 100%; min-width: 56rem; font-size: .9375rem; }
caption { text-align: left; padding: .9rem 1rem; color: var(--creme-still); font-size: .875rem; }
th, td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--linie); }
thead th {
  border-top: 0;
  border-bottom: 1px solid var(--gold-tief);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
thead th button {
  background: none; border: 0; padding: .35rem 0; min-height: 2.75rem;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
}
thead th button:hover { color: var(--creme); }
tbody tr:hover { background: rgba(231, 182, 103, .04); }
td .namen { display: grid; gap: .2rem; }
td .zeit { color: var(--creme-still); white-space: nowrap; font-variant-numeric: tabular-nums; }
.zeilen-tasten { display: flex; flex-wrap: wrap; gap: .4rem; }

.stand {
  display: inline-flex;
  align-items: center;
  padding: .15rem .6rem .2rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  white-space: nowrap;
}
.stand--zusage  { background: rgba(159, 214, 166, .14); color: var(--gut); }
.stand--absage  { background: rgba(242, 167, 158, .12); color: var(--fehler); }
.stand--zurueck { background: rgba(205, 187, 164, .12); color: var(--creme-still); }

.aufraeumen {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-end;
}
.aufraeumen .feld { margin: 0; min-width: 12rem; }

/* Bearbeiten-Dialog */
.dialog-grund {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(5, 7, 12, .86);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(.75rem, 4vw, 3rem);
  overflow-y: auto;
}
.dialog-grund[hidden] { display: none; }
.dialog {
  width: 100%;
  max-width: 34rem;
  background: var(--nacht-karte);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 4vw, 2rem);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}
.dialog h2 { font-size: 1.5rem; }
.dialog-tasten { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }

/* --- 21 · Klebeleiste, Meldungen ----------------------------------------- */

/* „Kommt ihr?" – verschwindet, sobald der Anmeldeblock im Bild ist, und gibt
   es am Schreibtisch gar nicht erst. */
.klebeleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem var(--rand) calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 7, 12, .95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linie-stark);
  transition: transform .25s ease, opacity .25s ease;
}
.klebeleiste[hidden] { display: none; }
.klebeleiste.ist-weg { transform: translateY(120%); opacity: 0; pointer-events: none; }
.klebeleiste .frage { font-weight: 700; font-size: .9375rem; }
.klebeleiste .frage small { display: block; font-weight: 400; color: var(--creme-still); font-size: .8125rem; }
@media (min-width: 62rem) { .klebeleiste { display: none; } }
/* Solange die Leiste am Handy erscheinen kann, bekommt die Fußzeile ihren Platz */
@media (max-width: 61.99rem) { :root { --klebeleiste: 4.25rem; } }

.meldung {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--linie-ui);
  background: rgba(231, 182, 103, .06);
  font-size: .9375rem;
}
.meldung:empty { display: none; }
.meldung--fehler { border-color: var(--fehler); color: var(--fehler); background: rgba(242, 167, 158, .08); }
.meldung--gut { border-color: var(--gut); color: var(--gut); background: rgba(159, 214, 166, .08); }

.laedt {
  color: var(--creme-still);
  padding-block: var(--luft);
  text-align: center;
}
/* F-1 (Kritik Runde 1): Ohne diese Zeile zeichnet der Browser die Fußzeile
   beim ersten Aufbau mitten ins Bild und schiebt sie 78 ms später nach unten
   – gemessen CLS 0,303 statt < 0,1. */
#ansicht:has(.laedt) { min-height: 100svh; }
@supports not selector(:has(*)) {
  .laedt { min-height: 100svh; box-sizing: border-box; }
}

/* Karten ohne Kasten am Handy: Rahmen und doppelter Innenrand kosten Höhe und
   sagen nichts. Am Schreibtisch bleibt die Karte eine Karte. Die Regel steht
   hier am Ende, weil sie .karte und .karte--betont (Abschnitt 12) schlagen
   muss, ohne deren Spezifität hochzuziehen. */
@media (max-width: 61.99rem) {
  .karte--flach {
    background: none;
    border: 0;
    border-top: 1px solid var(--linie);
    border-radius: 0;
    padding: 1.1rem 0 0;
  }
  .karte--flach > .mehr:last-child { border-bottom: 0; }
}

/* Kurze Sätze am Deckblatt und bei der Anmeldung sind Fließtext und bleiben
   am Handy deshalb bei 16 px (Vorgabe Lesbarkeit). Die Regel steht bewusst
   hier am Ende: sie muss die Grundwerte der Abschnitte 8, 15 und 16
   überschreiben, ohne deren Spezifität hochzuziehen. */
@media (max-width: 61.99rem) {
  .hero-frist, .anmeldung-notiz, .zaehler-notiz { font-size: 1rem; }
}

/* --- 22 · Stimmung: die Fotos hinter dem Text ---------------------------- */

/* Vorgabe Florian, 16.09.2026: „Ich möchte, dass man während des Lesens
   Stimmung bekommt – die Fotos als Hintergrund hinter dem Text, dass es edler
   wirkt. Vielleicht beim Scrollen, dass sich das Bild leicht verschiebt."
   Umgesetzt in zwei Stärken:

     · .stimmung  – ruhige Textur hinter einem ganzen Abschnitt. Schleier
                    mindestens 84 % Deckung, dazu brightness(.78) auf dem Foto.
                    Gerechnet gegen den härtesten denkbaren Fall (ein
                    reinweißer Bildpunkt, also 199 nach dem Filter): Fließtext
                    11,9:1 · stille Zeilen 7,6:1 · Gold 7,6:1 · Gold-tief
                    (Kleinversalien) 4,7:1 · UI-Linie 3,1:1.
                    NACHGEMESSEN am fertig gerenderten Bild (Schrift auf
                    transparent, Bildpunkt hinter jeder Zeile abgetastet):
                    143 Textknoten, alle über AA, schlechtester Wert 5,57:1
                    bei 375 px und 6,09:1 bei 1280 px – qa/stimmung/
                    kontraste.md, Messskript qa/stimmung/qa_stimmung.py.
     · .fotoband  – ein schmaler Streifen ZWISCHEN zwei Abschnitten, ganz ohne
                    Text. Dort darf das Foto hell bleiben (34 % Schleier in der
                    Mitte, an den Rändern in den Seitengrund auslaufend) – es
                    trägt die Stimmung, ohne je hinter Buchstaben zu geraten.

   Bewegt wird ausschließlich mit ``transform`` aus einer rAF-Schleife
   (static/app.js, Abschnitt „Stimmung"). KEIN
   ``background-attachment: fixed``: das ruckelt auf iOS und friert dort beim
   Scrollen ein. Beide Ebenen sind höher als ihr Rahmen und absolut gesetzt –
   sie können deshalb weder eine Kante zeigen noch das Layout verschieben
   (CLS bleibt bei 0). */

.hat-stimmung { overflow: hidden; isolation: isolate; }
.hat-stimmung > *:not(.stimmung) { position: relative; z-index: 1; }

.stimmung {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Der Schleier steht still, nur das Foto darunter fährt mit. */
.stimmung::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 13, 20, .96) 0%,
    rgba(10, 13, 20, .87) 13%,
    rgba(10, 13, 20, .84) 50%,
    rgba(10, 13, 20, .88) 87%,
    rgba(10, 13, 20, .96) 100%);
}
.stimmung__bild {
  position: absolute;
  left: 0;
  top: -14%;
  width: 100%;
  height: 128%;
  object-fit: cover;
  object-position: center 45%;
  filter: brightness(.78) saturate(.75);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Nur solange eine Ebene wirklich im Bild ist – ein dauerhaftes
   ``will-change`` auf sieben Fotos kostet am Handy unnötig Speicher. */
.faehrt-mit { will-change: transform; }

/* Fotoband zwischen zwei Abschnitten: läuft von Rand zu Rand, steht an der
   Stelle einer Trennlinie und hat eine feste Höhe – das Bild kann also
   nachladen, ohne dass etwas springt. */
.fotoband {
  position: relative;
  overflow: hidden;
  height: clamp(9rem, 30vh, 17rem);
  isolation: isolate;
}
.fotoband .stimmung__bild { filter: brightness(.94) saturate(.92); }
.fotoband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--nacht) 0%,
    rgba(10, 13, 20, .56) 26%,
    rgba(10, 13, 20, .34) 50%,
    rgba(10, 13, 20, .58) 74%,
    var(--nacht) 100%);
}

/* Sanftes Einfahren der Abschnitte. Die Klasse ``enthuellen`` setzt erst
   static/app.js – und nur, wenn IntersectionObserver da ist UND der Gast
   keine bewegungsarme Darstellung verlangt. Ohne Skript bleibt deshalb nie
   etwas unsichtbar stehen. Bewegt werden nur opacity und transform: kein
   Layout, kein CLS. */
.enthuellen {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .75s cubic-bezier(.22, .61, .36, 1),
              transform .75s cubic-bezier(.22, .61, .36, 1);
}
.enthuellen.ist-da { opacity: 1; transform: none; }

/* --- 23 · Bewegungsarme Darstellung, Druck ------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Die Fotos bleiben stehen – es entfällt nur das Mitfahren und das
     Einfahren. static/app.js meldet die Ebenen dann gar nicht erst an. */
  .stimmung__bild, .hero-bogen__bild { transform: none !important; }
  .enthuellen { opacity: 1 !important; transform: none !important; }
}

@media print {
  /* Gedruckt wird die Gastgeberliste – schwarz auf weiß, ohne Bedienelemente. */
  body { background: #fff; color: #000; font-size: 11pt; }
  body::before, body::after { display: none; }
  .kopf, .klebeleiste, .werkzeugleiste, .zeilen-tasten, .aufraeumen,
  .sprungmarke, .fuss, .hinweiszeile, .dialog-grund, .lichtkasten { display: none !important; }
  .hero-bogen, .tor::before, .stimmung, .fotoband { display: none !important; }
  .enthuellen { opacity: 1 !important; transform: none !important; }
  .tabelle-rahmen { border: 0; overflow: visible; background: none; }
  table { min-width: 0; width: 100%; font-size: 10pt; }
  th, td { border-top: 1px solid #999; color: #000; }
  thead th { color: #000; border-bottom: 1px solid #000; }
  .kacheln { grid-template-columns: repeat(4, 1fr); }
  .kachel { border: 1px solid #999; }
  .kachel .wert, .kachel .bezeichnung, .stand, .stille, td .zeit { color: #000; background: none; }
  a { color: #000; text-decoration: none; }
  h1, h2, h3 { color: #000; }
}