/* ============================================================================
   Convivium — Design-Direction "Kolosseum"
   Römischer Travertin bei Abendlicht. Warm, steinern, monumental.
   Wiederkehrendes Formelement ist der Rundbogen; Schatten sind harte
   Steinschatten, keine weichen Material-Elevations.
   ========================================================================= */

/* --- Schriften, lokal ausgeliefert ---------------------------------------
   Selbst gehostet statt vom CDN: die App muss am Veranstaltungstag auch ohne
   Internetverbindung vollständig aussehen. Latin-Subset, woff2.            */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cinzel-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/cinzel-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/archivo-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/archivo-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/archivo-600.woff2') format('woff2');
}

/* --- Token --------------------------------------------------------------- */

:root {
  /* Palette */
  --travertin: #e9dfcb;
  --sandstein: #d8c9ac;
  --basalt: #2b2622;
  --terracotta: #b4472e;
  --antikgold: #c9a227;
  --olive: #6b7a4b;

  /* Abgeleitete Steintöne */
  --travertin-hell: #f2ebdc;
  --travertin-tief: #dbcfb6;
  --sandstein-tief: #c8b795;
  --fuge: #b9a884;

  /* Gedämpfte Textfarben. Nicht weiter aufhellen: darunter reißt der Kontrast gegen
     Travertin unter die 4,5:1 aus WCAG AA. */
  --basalt-weich: rgba(43, 38, 34, 0.78);
  --basalt-platzhalter: rgba(43, 38, 34, 0.68);

  /* Nur für Linien und Rahmen, nie für Text */
  --basalt-zart: rgba(43, 38, 34, 0.48);

  --terracotta-tief: #93361f;

  /* Harte Steinschatten — Versatz ohne Weichzeichnung */
  --schatten-klein: 3px 3px 0 rgba(43, 38, 34, 0.18);
  --schatten: 5px 5px 0 rgba(43, 38, 34, 0.2);
  --schatten-gross: 9px 9px 0 rgba(43, 38, 34, 0.22);
  --eingepraegt: inset 0 3px 9px rgba(43, 38, 34, 0.34);

  /* Typografie */
  --display: 'Cinzel', 'Times New Roman', serif;
  --body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;

  /* Maße */
  --tap: 56px;
  --kante: 4px;
  --spur: 0.16em;

  /* Rundbogen als Segmentbogen: waagrechter Radius die halbe Breite, senkrechter
     Radius eine feste Bogenhöhe. Ein einzelner großer Radius (999px) funktioniert
     hier NICHT — der Browser skaliert alle Radien proportional herunter, bis sie
     ins Kästchen passen, und aus dem Bogen wird eine Kuppel über dem Inhalt. */
  --bogen-tafel: 50% 50% var(--kante) var(--kante) / 34px 34px var(--kante) var(--kante);
  --bogen-karte: 50% 50% var(--kante) var(--kante) / 28px 28px var(--kante) var(--kante);
  --bogen-knopf: 50% 50% var(--kante) var(--kante) / 18px 18px var(--kante) var(--kante);

  /* Echte Pille für kleine Marken und Chips */
  --pille: 999px;

  /* Bewegung — kurz, kein Bounce */
  --dauer: 200ms;
  --kurve: cubic-bezier(0.33, 0, 0.2, 1);
}

/* --- Grundlagen ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--basalt);
  background-color: var(--travertin);

  /* Travertin: waagrechte Lagerung mit feiner Körnung */
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(43, 38, 34, 0.028) 0,
      rgba(43, 38, 34, 0.028) 1px,
      transparent 1px,
      transparent 5px
    ),
    radial-gradient(circle at 22% 14%, rgba(201, 162, 39, 0.09), transparent 46%),
    radial-gradient(circle at 82% 82%, rgba(180, 71, 46, 0.07), transparent 52%);
  background-attachment: fixed;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--spur);
  line-height: 1.1;
  margin: 0;

  /* Deutsche Komposita in gesperrten Versalien werden lang: "Datenschutzerklärung"
     passt sonst in keine Spalte. Erst trennen, im Notfall hart umbrechen. */
  hyphens: auto;
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
}

/* FocusOnNavigate hängt tabindex="-1" an die h1 und fokussiert sie, damit Screenreader
   nach dem Seitenwechsel an der richtigen Stelle stehen. Ein Fokusrahmen um eine
   Überschrift, die man nicht bedienen kann, liest sich für Sehende als Darstellungsfehler
   — der Nutzen für Screenreader bleibt davon unberührt. */
h1[tabindex='-1']:focus,
h1[tabindex='-1']:focus-visible {
  outline: none;
}

h2 {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
}

h3 {
  font-size: 1.05rem;
  letter-spacing: 0.13em;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--terracotta-tief);
  text-underline-offset: 3px;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--antikgold);
  outline-offset: 3px;
}

/* --- Layoutrahmen -------------------------------------------------------- */

.schacht {
  width: min(1180px, 100% - 3rem);
  margin-inline: auto;
}

.schacht--schmal {
  width: min(680px, 100% - 3rem);
  margin-inline: auto;
}

.seite {
  padding-block: clamp(1.75rem, 4vw, 3.25rem);
}

.stapel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.stapel--eng {
  gap: 0.75rem;
}

.reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.reihe--verteilt {
  justify-content: space-between;
}

.schieber {
  margin-left: auto;
}

/* --- Kopfzeile ----------------------------------------------------------- */

.kopf {
  border-bottom: 2px solid var(--basalt);
  background: linear-gradient(180deg, var(--travertin-hell), var(--travertin));
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
  padding-block: 0.75rem;
}

.wortmarke {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--basalt);
  text-decoration: none;
  line-height: 1.15;
}

.wortmarke__zusatz {
  display: block;
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  color: var(--basalt-weich);
  text-transform: none;
}

/* --- Inschrift ----------------------------------------------------------
   Der Eventtitel in der Gästeansicht: römische Kapitalis, eingemeißelt in
   ein Steinband. Das ist der Auftakt des Abends, entsprechend groß.        */

.inschrift {
  position: relative;
  padding: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1rem, 4vw, 3rem);
  text-align: center;
  border-top: 3px solid var(--basalt);
  border-bottom: 3px solid var(--basalt);
  background:
    repeating-linear-gradient(
      0deg,
      rgba(43, 38, 34, 0.035) 0,
      rgba(43, 38, 34, 0.035) 1px,
      transparent 1px,
      transparent 6px
    ),
    linear-gradient(180deg, var(--sandstein), var(--sandstein-tief));
  box-shadow: var(--eingepraegt);
}

.inschrift__titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 6.5vw, 4.5rem);
  text-transform: uppercase;
  letter-spacing: clamp(0.06em, 1.2vw, 0.15em);
  line-height: 1.04;
  margin: 0;
  overflow-wrap: break-word;

  /* Gemeißelt: Lichtkante unten, Schattenkante oben */
  color: #3a332d;
  text-shadow:
    0 1px 0 rgba(255, 250, 238, 0.55),
    0 -1px 0 rgba(43, 38, 34, 0.42);
}

/* Interpunkt zwischen den Wörtern, wie auf römischen Inschriften */
.inschrift__punkt {
  color: var(--terracotta);
  padding-inline: 0.28em;
  font-weight: 600;
}

.inschrift__datum {
  margin: 0.9rem 0 0;
  font-family: var(--display);
  font-size: clamp(0.8rem, 1.6vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--basalt-weich);
}

.inschrift__frage {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--basalt-weich);
}

/* --- Bögen und Arkaden ---------------------------------------------------
   Das Signature-Element: das Gästeraster ist keine Kachelsammlung, sondern
   eine durchgehende Kolonnade. Die Joche teilen sich die Pfeiler, der Bogen
   selbst trägt den Status.                                                 */

.arkade {
  display: grid;

  /* Feste Jochbreite statt 1fr: eine Kolonnade hat gleich breite Joche, egal ob
     drei oder dreißig. auto-fit statt auto-fill, damit keine leeren Rasterspalten
     stehen bleiben — durch die schien sonst der Fugenton als Fläche durch. */
  grid-template-columns: repeat(auto-fit, 170px);
  justify-content: center;
  gap: 0;

  /* Der Rahmen umschließt nur die tatsächlichen Joche und steht mittig. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;

  border: 3px solid var(--basalt);
  border-radius: var(--kante);

  /* Sockel: unten schwerer als oben, wie ein Bauwerk auf seinem Stylobat. */
  border-bottom-width: 9px;

  background: var(--fuge);
  overflow: hidden;
  box-shadow: var(--schatten-gross);
}

.joch {
  /* Jedes Joch stellt seinen eigenen Pfeiler links und oben; die Außenkanten
     deckt der Rahmen ab. So entsteht die Fassade ohne doppelte Trennlinien. */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 0.6rem 1rem;
  min-height: calc(var(--tap) * 3);
  border: 0;
  border-left: 2px solid var(--fuge);
  border-top: 2px solid var(--fuge);
  background: var(--travertin-hell);
  font: inherit;
  color: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dauer) var(--kurve),
    transform var(--dauer) var(--kurve);
}

.joch:hover {
  background: var(--travertin);
}

.joch:active {
  transform: translateY(2px);
}

/* Der Bogen: Nische im Pfeiler, in der der Avatar sitzt */
.joch__nische {
  position: relative;
  width: 84px;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  border: 2px solid var(--basalt);

  /* Halbkreis oben: Radius = halbe Breite, bei 3:4 sind das 37,5 % der Höhe */
  border-radius: 50% 50% var(--kante) var(--kante) / 37.5% 37.5% var(--kante) var(--kante);

  /* Mosaik-Textur, dezent */
  background:
    repeating-conic-gradient(
      from 45deg,
      rgba(43, 38, 34, 0.05) 0% 25%,
      transparent 0% 50%
    ),
    linear-gradient(180deg, var(--sandstein), var(--sandstein-tief));
  background-size: 13px 13px, 100% 100%;
  box-shadow: var(--eingepraegt);
  transition: box-shadow var(--dauer) var(--kurve);
}

.joch__avatar {
  font-size: 2.15rem;
  line-height: 1;
  font-family: var(--emoji);
}

.joch__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.joch__status {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--basalt-weich);
  transition: color var(--dauer) var(--kurve);
}

/* Banderole über die Bogenspitze — immer im Layout, nur unsichtbar.
   Dadurch verschiebt der Statuswechsel nichts.                            */
.joch__banderole {
  position: absolute;
  top: 26%;
  left: -14%;
  right: -14%;
  padding: 0.18rem 0;
  transform: rotate(-4deg) scale(0.92);
  opacity: 0;
  background: var(--olive);
  border-block: 2px solid rgba(43, 38, 34, 0.5);
  color: var(--travertin-hell);
  font-family: var(--display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: var(--schatten-klein);
  pointer-events: none;
  transition:
    opacity var(--dauer) var(--kurve),
    transform var(--dauer) var(--kurve);
}

.joch.is-gewaehlt .joch__banderole {
  opacity: 1;
  transform: rotate(-4deg) scale(1);
}

.joch.is-gewaehlt .joch__nische {
  box-shadow: var(--eingepraegt), 0 0 0 3px var(--olive);
}

.joch.is-gewaehlt .joch__status {
  color: var(--olive);
}

/* --- Karten -------------------------------------------------------------- */

.tafel {
  border: 3px solid var(--basalt);
  border-radius: var(--bogen-tafel);
  background: linear-gradient(180deg, var(--sandstein), var(--sandstein-tief));
  box-shadow: var(--schatten);

  /* Oben so viel Luft, dass der Bogen über dem Inhalt steht und nichts anschneidet */
  padding: 3rem 1.5rem 1.5rem;
}

.tafel--flach {
  border-radius: var(--kante);
  background: var(--travertin-hell);
  box-shadow: var(--schatten-klein);
  padding: 1.1rem 1.15rem;
}

.tafel__titel {
  margin-bottom: 0.6rem;
}

/* --- Optionskarte -------------------------------------------------------- */

.optionen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 0.9rem;
}

.option {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: calc(var(--tap) * 2);
  border: 3px solid var(--basalt);
  border-radius: var(--bogen-karte);
  background: var(--travertin-hell);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;

  /* Der Ring liegt immer an und wechselt nur die Farbe — kein Layout-Shift */
  box-shadow: 0 0 0 3px transparent, var(--schatten-klein);
  transition:
    box-shadow var(--dauer) var(--kurve),
    transform var(--dauer) var(--kurve),
    background-color var(--dauer) var(--kurve);
}

.option:hover {
  background: var(--travertin);
}

.option.is-gewaehlt {
  background: var(--travertin);
  box-shadow: 0 0 0 3px var(--antikgold), var(--eingepraegt);
  transform: translateY(2px);
}

/* Bild füllt die obere Fläche und sitzt im Bogen */
.option__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-bottom: 3px solid var(--basalt);

  /* Wärmekorrektur, damit Fotos im selben Raster nicht auseinanderfallen */
  filter: saturate(0.9) sepia(0.08);
}

.option__emojiflaeche {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-bottom: 3px solid var(--basalt);
  background:
    repeating-conic-gradient(
      from 45deg,
      rgba(43, 38, 34, 0.045) 0% 25%,
      transparent 0% 50%
    ),
    linear-gradient(180deg, var(--sandstein), var(--sandstein-tief));
  background-size: 13px 13px, 100% 100%;
  font-size: 2.6rem;
  font-family: var(--emoji);
}

/* Label auf Steinband unter dem Bild */
.option__band {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.7rem 0.75rem 0.8rem;
  background: linear-gradient(180deg, var(--sandstein), var(--sandstein-tief));
}

.option__label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.option__beschreibung {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--basalt-weich);
}

.option__haken {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid var(--basalt);
  border-radius: 50%;
  background: var(--antikgold);
  color: var(--basalt);
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity var(--dauer) var(--kurve),
    transform var(--dauer) var(--kurve);
}

.option.is-gewaehlt .option__haken {
  opacity: 1;
  transform: scale(1);
}

/* --- Bedienelemente ------------------------------------------------------ */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0.75rem 1.5rem 0.5rem;
  border: 3px solid var(--basalt);
  border-radius: var(--bogen-knopf);
  background: var(--travertin-hell);
  box-shadow: var(--schatten-klein);
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--basalt);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dauer) var(--kurve),
    box-shadow var(--dauer) var(--kurve),
    background-color var(--dauer) var(--kurve);
}

.knopf:hover {
  background: var(--travertin);
}

.knopf:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(43, 38, 34, 0.18);
}

.knopf:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.knopf--haupt {
  background: var(--terracotta);
  color: var(--travertin-hell);
}

.knopf--haupt:hover {
  background: var(--terracotta-tief);
}

.knopf--gross {
  min-height: 68px;
  padding-inline: 2.25rem;
  font-size: 1rem;
}

.knopf--still {
  border-width: 2px;
  background: transparent;
  box-shadow: none;
  font-size: 0.75rem;
  padding-inline: 1rem;
}

.knopf--still:hover {
  background: var(--travertin-tief);
}

.knopf--gefahr {
  border-color: var(--terracotta-tief);
  color: var(--terracotta-tief);
}

/* Kleiner quadratischer Griff, etwa zum Löschen einer Zeile */
.griff {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 auto;
  border: 2px solid var(--basalt-zart);
  border-radius: var(--kante);
  background: transparent;
  color: var(--basalt-weich);
  font-size: 1.1rem;
  cursor: pointer;
  transition:
    color var(--dauer) var(--kurve),
    border-color var(--dauer) var(--kurve);
}

.griff:hover {
  color: var(--terracotta);
  border-color: var(--terracotta);
}

/* --- Formulare ----------------------------------------------------------- */

.feld {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.feld__marke {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--basalt-weich);
}

.feld__hinweis {
  font-size: 0.78rem;
  color: var(--basalt-weich);
}

.eingabe {
  width: 100%;
  min-height: var(--tap);
  padding: 0.6rem 0.85rem;
  border: 3px solid var(--basalt);
  border-radius: var(--kante);
  background: var(--travertin-hell);
  box-shadow: var(--eingepraegt);
  font-family: var(--body);
  font-size: 1rem;
  color: var(--basalt);
}

.eingabe::placeholder {
  color: var(--basalt-platzhalter);
  opacity: 1;
}

textarea.eingabe {
  min-height: calc(var(--tap) * 2);
  resize: vertical;
  line-height: 1.5;
}

.eingabe--emoji {
  width: 84px;
  flex: 0 0 auto;
  text-align: center;
  font-size: 1.5rem;
  font-family: var(--emoji);
}

/* Beschriftetes Kästchen: ohne die Marke sieht ein leeres Emoji-Feld
   aus wie ein Darstellungsfehler statt wie eine Eingabe. */
.emojifeld {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex: 0 0 auto;
}

.emojifeld__marke {
  font-family: var(--display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--basalt-weich);
}

/* --- Meldungen ----------------------------------------------------------- */

.meldung {
  padding: 0.85rem 1.1rem;
  border-left: 6px solid var(--basalt);
  border-radius: var(--kante);
  background: var(--travertin-hell);
  font-size: 0.92rem;
}

.meldung--gut {
  border-left-color: var(--olive);
}

.meldung--fehler {
  border-left-color: var(--terracotta);
}

.meldung--hinweis {
  border-left-color: var(--antikgold);
}

/* --- Marke / Status ------------------------------------------------------ */

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border: 2px solid var(--basalt);
  border-radius: var(--pille);
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marke--live {
  background: var(--terracotta);
  color: var(--travertin-hell);
}

.marke--entwurf {
  background: transparent;
  color: var(--basalt-weich);
  border-color: var(--basalt-zart);
}

.marke--beendet {
  background: var(--travertin-tief);
  color: var(--basalt-weich);
}

/* --- Lorbeer-Trenner ----------------------------------------------------- */

.lorbeer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block: clamp(2.25rem, 6vw, 4rem);
  color: var(--basalt-zart);
}

.lorbeer::before,
.lorbeer::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--basalt-zart), transparent);
}

.lorbeer svg {
  display: block;
  height: 26px;
  width: auto;
}

/* --- Landing ------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 9vw, 6.5rem);
  text-align: center;
}

.hero__silhouette {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: auto;
  color: var(--sandstein-tief);
  opacity: 0.55;
  pointer-events: none;
}

.hero__innen {
  position: relative;
}

.hero__claim {
  max-width: 16ch;
  margin-inline: auto;
}

.hero__text {
  max-width: 54ch;
  margin: 1.25rem auto 2rem;
  font-size: 1.1rem;
  color: var(--basalt-weich);
}

.bogenkarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.bogenkarte {
  padding: 3.25rem 1.5rem 1.75rem;
  border: 3px solid var(--basalt);
  border-radius: var(--bogen-tafel);
  background: linear-gradient(180deg, var(--travertin-hell), var(--sandstein));
  box-shadow: var(--schatten);
  text-align: center;
}

.bogenkarte__nummer {
  display: block;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--terracotta);
  letter-spacing: 0.1em;
}

.bogenkarte h3 {
  margin: 0.6rem 0 0.5rem;
}

.bogenkarte p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--basalt-weich);
}

.fusszeile {
  margin-top: clamp(2.5rem, 7vw, 5rem);
  padding-block: 1.75rem;
  border-top: 2px solid var(--basalt-zart);
  font-size: 0.85rem;
  color: var(--basalt-weich);
}

/* --- Live-Ansicht --------------------------------------------------------
   Auf das iPad im Querformat gerechnet: links die Gästeliste, rechts das
   Detail. Beide Spalten scrollen für sich, die Seite selbst nicht.        */

.live {
  display: grid;
  grid-template-columns: minmax(260px, 33%) 1fr;
  gap: 0;
  height: calc(100dvh - 74px);
  border-top: 2px solid var(--basalt);
}

.live__liste {
  overflow-y: auto;
  border-right: 3px solid var(--basalt);
  background: var(--travertin-hell);
  padding: 1rem;
}

.live__detail {
  overflow-y: auto;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.live__fortschritt {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--basalt-weich);
  margin-bottom: 0.85rem;
}

.gastzeile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: var(--tap);
  margin-bottom: 0.4rem;
  padding: 0.5rem 0.7rem;
  border: 2px solid transparent;
  border-radius: var(--kante);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: grab;
  transition:
    background-color var(--dauer) var(--kurve),
    border-color var(--dauer) var(--kurve);
}

.gastzeile:hover {
  background: var(--travertin);
}

.gastzeile.is-aktiv {
  border-color: var(--basalt);
  background: var(--sandstein);
  box-shadow: var(--schatten-klein);
}

.gastzeile.is-gezogen {
  opacity: 0.45;
  cursor: grabbing;
}

.gastzeile.is-ziel {
  border-color: var(--antikgold);
}

.gastzeile__avatar {
  font-size: 1.5rem;
  line-height: 1;
  flex: 0 0 auto;
  font-family: var(--emoji);
}

.gastzeile__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* Statuspunkt: fester Platz, wechselt nur die Farbe */
.punkt {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin-left: auto;
  border: 2px solid var(--basalt);
  border-radius: 50%;
  background: transparent;
  transition: background-color var(--dauer) var(--kurve);
}

.punkt.is-gewaehlt {
  background: var(--olive);
}

.wahlgruppe {
  margin-bottom: 1.5rem;
}

.wahlgruppe__titel {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--basalt-weich);
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--basalt-zart);
  margin-bottom: 0.7rem;
}

.wahlliste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wahlposten {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem 0.35rem 0.35rem;
  border: 2px solid var(--basalt);
  border-radius: var(--pille);
  background: var(--travertin-hell);
  font-size: 0.9rem;
}

.wahlposten__bild {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--basalt-zart);
  filter: saturate(0.9) sepia(0.08);
}

.wahlposten__emoji {
  width: 34px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-family: var(--emoji);
}

/* --- Editor -------------------------------------------------------------- */

.zeile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem;
  border: 2px solid var(--basalt-zart);
  border-radius: var(--kante);
  background: var(--travertin-hell);
  margin-bottom: 0.5rem;
}

.zeile__vorschau {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--basalt);
  border-radius: 50% 50% var(--kante) var(--kante) / 42% 42% var(--kante) var(--kante);
  background: linear-gradient(180deg, var(--sandstein), var(--sandstein-tief));
  overflow: hidden;
  cursor: pointer;
  font-size: 1.5rem;
  font-family: var(--emoji);
}

.zeile__vorschau img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) sepia(0.08);
}

.zeile__inhalt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* --- Bildsuche ----------------------------------------------------------- */

.bildraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
  max-height: 46vh;
  overflow-y: auto;
}

.bildtreffer {
  padding: 0;
  border: 3px solid var(--basalt);
  border-radius: var(--kante);
  background: var(--travertin-tief);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  transition: box-shadow var(--dauer) var(--kurve);
}

.bildtreffer:hover {
  box-shadow: 0 0 0 3px var(--antikgold);
}

.bildtreffer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Dialog -------------------------------------------------------------- */

.schleier {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(43, 38, 34, 0.55);
}

.dialog {
  width: min(760px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  padding: 1.5rem;
  border: 3px solid var(--basalt);
  border-radius: var(--kante);
  background: var(--travertin);
  box-shadow: var(--schatten-gross);
}

/* --- Rechtstexte ---------------------------------------------------------
   Lange Fließtexte: schmales Satzband, ruhige Hierarchie, keine Bögen. Hier
   soll man lesen, nicht bewundern.                                          */

.rechtstext {
  max-width: 68ch;
}

/* Rechtstitel sind lange Komposita und stehen in einer schmalen Spalte — deutlich
   kleiner als eine Landing-Headline und enger gesperrt. */
.rechtstext h1 {
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  letter-spacing: 0.07em;
  line-height: 1.18;
}

.rechtstext h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
}

.rechtstext h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

.rechtstext ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.rechtstext li {
  margin-bottom: 0.35rem;
}

.rechtstext dl {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 0.4rem 1.25rem;
  margin: 0 0 1rem;
}

.rechtstext dt {
  font-weight: 600;
  color: var(--basalt-weich);
}

.rechtstext dd {
  margin: 0;
}

.rechtstext__stand {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 2px solid var(--basalt-zart);
  font-size: 0.82rem;
  color: var(--basalt-weich);
}

@media (max-width: 560px) {
  .rechtstext dl {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  .rechtstext dd {
    margin-bottom: 0.6rem;
  }
}

/* --- Hilfsklassen -------------------------------------------------------- */

.leer {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--basalt-weich);
  font-size: 0.95rem;
}

.klein {
  font-size: 0.82rem;
  color: var(--basalt-weich);
}

.nur-lesen {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* --- Schmale Geräte ------------------------------------------------------ */

@media (max-width: 900px) {
  .live {
    grid-template-columns: 1fr;
    height: auto;
  }

  .live__liste {
    border-right: 0;
    border-bottom: 3px solid var(--basalt);
  }
}

@media (max-width: 560px) {
  .schacht,
  .schacht--schmal {
    width: calc(100% - 1.75rem);
  }

  .arkade {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }
}

/* --- Bewegungsarme Darstellung ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}