/* ============================================================================
   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;

  /* Keine Silbentrennung in der Inschrift: "Geburts-tag" ist keine Trennung, die ein
     Steinmetz gesetzt hätte. Umgebrochen wird an den Interpunkten (dort steht ein <wbr>),
     und nur ein einzelnes überlanges Wort bricht notfalls hart. */
  hyphens: manual;
  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);
}

/* Statt des Emojis darf auch ein Bild in der Nische stehen — es füllt sie ganz aus und
   übernimmt ihren Bogen. */
.joch__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: saturate(0.9) sepia(0.08);
}

.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;

  /* Safari streckt die Kinder eines Buttons nicht von selbst — ohne das hier sitzt das
     Steinband schmal am linken Rand statt auf voller Kartenbreite. */
  align-items: stretch;
  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: center;
  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%;

  /* Ohne height:auto gewinnt das height-Attribut aus dem Markup gegen aspect-ratio —
     das Bild wird 384px hoch und sprengt die Karte. */
  height: auto;
  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%;
  height: auto;
  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;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 100%;
  padding: 0.7rem 0.75rem 0.8rem;
  text-align: center;
  background: linear-gradient(180deg, var(--sandstein), var(--sandstein-tief));
}

.option__label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  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);
}

/* Zwei gestapelte Pfeile zum Umsortieren. Zusammen so hoch wie ein Griff, damit die
   Zeilenhöhe gleich bleibt. */
.rangier {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 2px;
}

.rangier__knopf {
  width: 28px;
  height: 23px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--basalt-zart);
  border-radius: var(--kante);
  background: transparent;
  color: var(--basalt-weich);
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--dauer) var(--kurve),
    border-color var(--dauer) var(--kurve);
}

.rangier__knopf:hover:not(:disabled) {
  color: var(--basalt);
  border-color: var(--antikgold);
}

.rangier__knopf:disabled {
  opacity: 0.3;
  cursor: default;
}

/* --- 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: 64px;
  flex: 0 0 auto;
  padding-inline: 0.35rem;
  text-align: center;
  font-size: 1.4rem;
  font-family: var(--emoji);
}

/* --- 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 {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 1.5rem;
  line-height: 1;
  flex: 0 0 auto;
  font-family: var(--emoji);
}

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

.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;
}

/* Der Zusatz "nur eine Wahl" hängt am Gruppentitel, ohne dessen Inschriftton mitzumachen */
.wahlgruppe__modus {
  margin-left: 0.6rem;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}

.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.5rem;
  padding: 0.45rem 0.5rem;
  border: 2px solid var(--basalt-zart);
  border-radius: var(--kante);
  background: var(--travertin-hell);
  margin-bottom: 0.5rem;
}

.zeile__vorschau {
  width: 52px;
  height: 52px;
  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);
}

/* Emoji, Bezeichnung und Beschreibung stehen nebeneinander in einer Zeile; erst wenn der
   Platz eng wird, rutscht die Beschreibung darunter. Eine Optionsliste wird sonst schnell
   zu einer Bildschirmseite pro vier Belägen. */
.zeile__inhalt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  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;
}

/* Ablage für eigene Bilder. Das Dateifeld darin ist unsichtbar und deckt die ganze Fläche
   ab — so nimmt sie Fallenlassen und Klick entgegen, ganz ohne JavaScript. */
.ablage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 3px dashed var(--basalt-zart);
  border-radius: var(--kante);
  background: var(--travertin-tief);
  cursor: pointer;
  transition:
    border-color var(--dauer) var(--kurve),
    background-color var(--dauer) var(--kurve);
}

.ablage:hover,
.ablage:focus-within {
  border-color: var(--antikgold);
  background: var(--travertin-hell);
}

.ablage.is-still {
  opacity: 0.55;
  cursor: default;
}

.ablage input[type='file'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: inherit;
}

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

.ablage__text {
  font-size: 0.9rem;
  color: var(--basalt-weich);
}

/* Gästekartei im Übernehmen-Dialog: eine Karte je Person, antippen holt sie herein. */
.kartei {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 0.6rem;
  max-height: 46vh;
  overflow-y: auto;
}

.karteikarte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.4rem;
  border: 2px solid var(--basalt-zart);
  border-radius: var(--kante);
  background: var(--travertin-hell);
  cursor: pointer;
  transition:
    border-color var(--dauer) var(--kurve),
    background-color var(--dauer) var(--kurve);
}

.karteikarte:hover:not(:disabled) {
  border-color: var(--antikgold);
  background: var(--travertin);
}

.karteikarte.is-dabei {
  opacity: 0.45;
  cursor: default;
}

.karteikarte__bild {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 2px solid var(--basalt);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--sandstein), var(--sandstein-tief));
  font-size: 1.5rem;
  font-family: var(--emoji);
}

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

.karteikarte__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  overflow-wrap: break-word;
}

/* --- 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;
  }
}