/* juvi Tickets — Grundgestaltung, angelehnt an meinjuvi.org.
 *
 * Die Markenwerte stehen in brand.css. Hier werden sie auf Rollen abgebildet,
 * damit der dunkle Satz nur Werte tauschen muss und nicht Regeln.
 *
 * Haltung der Vereinsseite, übernommen: schwarze Kopfleiste, weisse Fläche,
 * kräftige Farbflächen, fette Versalien für die Auszeichnung, der rot-orange
 * Verlauf als Signatur. Rechteckige Knöpfe statt Pillen — so macht es die
 * Vereinsseite auch.
 */

@import url("brand.css");

:root {
  --paper: #ffffff;
  --paper-raised: #ffffff;
  --paper-sunken: #f4f4f2;
  --ink: #111111;
  --ink-soft: #4d4d4d;
  --ink-faint: #808080;
  --line: #e4e4e1;
  --line-strong: #c9c9c5;

  --accent: var(--brand-red);
  --accent-strong: #c9241b;
  --accent-ink: #ffffff;
  --accent-wash: #fdeceb;

  --good: #4d8a00;
  --good-wash: #f0f8e2;
  --warn: #8a6100;
  --warn-wash: #fff6e0;
  --bad: #cc1f18;
  --bad-wash: #fdecea;

  --seat-free: var(--brand-green);
  --seat-mine: var(--brand-red);
  --seat-taken: #cfcdc8;
  --seat-blocked: #8d8a85;
  --seat-held: var(--brand-amber);
  --stage: #1a1a1a;

  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
  --shadow: 0 2px 6px rgb(0 0 0 / 8%), 0 12px 28px -12px rgb(0 0 0 / 14%);
  --shadow-lg: 0 4px 10px rgb(0 0 0 / 10%), 0 28px 56px -20px rgb(0 0 0 / 24%);

  --sans: var(--raleway);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 74rem;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111111;
    --paper-raised: #1a1a1a;
    --paper-sunken: #0a0a0a;
    --ink: #f5f5f4;
    --ink-soft: #b5b3b0;
    --ink-faint: #85837f;
    --line: #2c2c2a;
    --line-strong: #454542;

    --accent: #f2564c;
    --accent-strong: #ff6f66;
    --accent-ink: #14100f;
    --accent-wash: #2b1614;

    --good: #8fd022;
    --good-wash: #1b2410;
    --warn: #ffc63d;
    --warn-wash: #2a2110;
    --bad: #f4695f;
    --bad-wash: #2c1614;

    --seat-taken: #3f3d3a;
    --seat-blocked: #2b2926;
    --stage: #000000;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 50%);
    --shadow: 0 2px 6px rgb(0 0 0 / 45%), 0 12px 28px -12px rgb(0 0 0 / 65%);
    --shadow-lg: 0 4px 10px rgb(0 0 0 / 50%), 0 28px 56px -20px rgb(0 0 0 / 75%);
  }
}

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

/* Muss vor jeder Regel stehen, die display setzt: das hidden-Attribut kommt
 * aus dem Browser-Stylesheet und verliert sonst gegen jede eigene Angabe. */
[hidden] { display: none !important; }

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

body {
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

h1 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem);
  letter-spacing: -0.03em;
  margin: 0 0 0.7rem;
  text-transform: uppercase;
}

h2 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); margin: 2.6rem 0 0.9rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }

/* Die Signatur der Vereinsseite: Versalien im Verlauf. Sparsam einsetzen. */
.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--accent-strong); }

:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
}

code, pre { font-family: var(--mono); font-size: 0.88em; }

pre {
  background: var(--paper-sunken);
  border-radius: var(--radius);
  overflow-x: auto;
  padding: 0.9rem 1.1rem;
}

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

/* ------------------------------------------------------------------ Gerüst */

/* Schwarze Leiste in beiden Sätzen — so hält es die Vereinsseite auch. */
.site-header {
  background: var(--brand-black);
}

.site-header > * {
  margin-inline: auto;
  max-width: var(--measure);
  padding-inline: 1.6rem;
}

.site-header::after {
  background: var(--brand-gradient);
  content: "";
  display: block;
  height: 4px;
}

/* Wortmarke links, Vereinsname rechts — eine Zeile.
   Unten mehr Luft als oben: der Abstrich des j haengt unter die Grundlinie. */
.site-head-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  /* Der erste Wert greift nur beim Umbruch: dann steht der Vereinsname unter
     dem Logo, und der Abstrich des j braucht Platz. In einer Zeile ist der
     Wert wirkungslos. */
  gap: 0.7rem 2rem;
  justify-content: space-between;
  padding-block: 1.3rem 1.6rem;
}

.site-title {
  align-items: baseline;
  color: var(--brand-white);
  display: flex;
  font-size: 1.7rem;
  font-weight: 800;
  gap: 0.5rem;
  letter-spacing: -0.04em;
  text-decoration: none;
}

/* Die Wortmarke ist bereits weiss und freigestellt; beide Kopfleisten sind in
   hell wie dunkel schwarz, deshalb braucht sie keine zweite Fassung.

   Zwei Masse stecken in der Datei und stehen hier als Zahl:

     Seitenverhaeltnis   350 : 217
     Grundlinie          bei 66 % der Bildhoehe

   Unter der Grundlinie laeuft nur noch der Abstrich des j. Deshalb ist das
   Bild deutlich hoeher als die Schrift darin — wer es nach Bildhoehe misst,
   bekommt eine viel zu kleine Wortmarke. */
.site-logo {
  display: block;
  height: 2.2em;
  width: auto;
}

/* Flexbox legt die **Unterkante** des Bildes auf die Grundlinie der Zeile.
   Die Schrift im Bild endet aber 34 % darueber, also schwebte die Wortmarke.
   Der Versatz holt sie herunter: 2.2em Bildhoehe × 0.34 = 0.75em.

   Bewusst ueber `position`, nicht ueber einen Rand: so bleibt der Abstrich
   aus der Zeilenhoehe heraus und die Kopfleiste waechst nicht mit. */
.site-title .site-logo {
  position: relative;
  top: 0.75em;
}

/* Steht in derselben Zeile wie die Wortmarke, rechts aussen. Wird es zu eng,
   rutscht der Name in die naechste Zeile und beginnt dann links unter dem
   Logo — rechtsbuendig waere er dort verloren. */
.site-subtitle {
  color: rgb(255 255 255 / 62%);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  margin: 0;
  text-transform: uppercase;
}

.content {
  flex: 1;
  margin-inline: auto;
  max-width: var(--measure);
  padding: 3rem 1.6rem 5rem;
  width: 100%;
}

.site-footer {
  background: var(--brand-black);
  color: rgb(255 255 255 / 62%);
  font-size: 0.85rem;
  margin-top: auto;
}

.site-footer > * {
  margin-inline: auto;
  max-width: var(--measure);
  padding-inline: 1.6rem;
}

.site-footer nav { display: flex; gap: 1.8rem; padding-top: 1.8rem; }

.site-footer nav a {
  color: var(--brand-white);
  font-weight: 600;
  text-decoration: none;
}

.site-footer nav a:hover { color: var(--brand-orange); }
.site-footer p { margin: 0.6rem 0 0; padding-bottom: 1.8rem; }

.breadcrumb {
  color: var(--ink-faint);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1.2rem;
}

.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }

.lead { color: var(--ink-soft); font-size: 1.1rem; margin-top: 0; }
.hint { color: var(--ink-faint); font-size: 0.9rem; }

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

.notice,
.error-box {
  border-left: 5px solid;
  font-size: 0.95rem;
  margin: 1.3rem 0;
  padding: 0.9rem 1.2rem;
}

.notice { background: var(--good-wash); border-color: var(--brand-green); color: var(--ink); }
.error-box { background: var(--bad-wash); border-color: var(--brand-red); color: var(--ink); }

/* ---------------------------------------------------------------- Knöpfe */

/* Wer hier einen Knopf ergänzt, trägt ihn auch ein: die Grundform steht nur
 * in dieser Liste. Ein Knopf mit nur .secondary sähe sonst aus wie vom
 * Browser gezeichnet — genau das ist einmal passiert. */
.button,
button.primary,
button.secondary,
button.danger,
.stacked button,
.waitlist-form button,
.modal-foot button {
  align-items: center;
  background: var(--accent);
  border: 2px solid transparent;
  border-radius: var(--radius);
  color: var(--accent-ink);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  gap: 0.45rem;
  justify-content: center;
  letter-spacing: 0.03em;
  line-height: 1.2;
  padding: 0.7rem 1.5rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}

.button:hover,
button.primary:hover,
.stacked button:hover {
  background: var(--accent-strong);
  color: var(--accent-ink);
}

.button.secondary,
button.secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.button.secondary:hover,
button.secondary:hover {
  background: var(--ink);
  color: var(--paper);
}

button.danger { background: var(--bad); }

button:disabled,
button.primary:disabled {
  background: var(--paper-sunken);
  border-color: transparent;
  color: var(--ink-faint);
  cursor: not-allowed;
}

button.link {
  background: none;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0;
  padding: 0;
  text-decoration: underline;
  text-transform: none;
  text-underline-offset: 3px;
}

button.link:hover { color: var(--accent); }

.optional {
  color: var(--ink-faint);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: none;
}

/* --------------------------------------------------------------- Dialoge */

dialog.modal {
  background: transparent;
  border: 0;
  margin: auto;
  max-height: 100dvh;
  max-width: min(46rem, 100vw);
  padding: 1rem;
  width: 100%;
}

dialog.modal.wide { max-width: min(74rem, 100vw); }

dialog.modal::backdrop {
  backdrop-filter: blur(3px);
  background: rgb(0 0 0 / 60%);
}

dialog.modal > form,
dialog.modal > .modal-card {
  animation: modal-in 160ms var(--ease);
  background: var(--paper-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.modal-head {
  align-items: start;
  background: var(--brand-black);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.2rem 1.6rem;
}

.modal-head h2 {
  color: var(--brand-white);
  font-size: 1.25rem;
  margin: 0;
  text-transform: uppercase;
}

.modal-head p { color: rgb(255 255 255 / 65%); font-size: 0.86rem; margin: 0.3rem 0 0; }

.modal-close {
  background: none;
  border: 0;
  color: rgb(255 255 255 / 70%);
  cursor: pointer;
  font-size: 1.6rem;
  height: 2rem;
  line-height: 1;
  width: 2rem;
}

.modal-close:hover { color: var(--brand-white); }

.modal-body { overflow-y: auto; padding: 1.4rem 1.6rem; }
.modal-body > .stacked { max-width: none; }
.modal-body > .stacked button { display: none; }

.modal-foot {
  background: var(--paper-sunken);
  border-top: 1px solid var(--line);
  display: flex;
  gap: 0.7rem;
  justify-content: flex-end;
  padding: 1rem 1.6rem;
}

/* --------------------------------------------------------------- Schritte */

.steps {
  counter-reset: step;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.8rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.steps li {
  align-items: center;
  color: var(--ink-faint);
  counter-increment: step;
  display: flex;
  font-size: 0.85rem;
  font-weight: 700;
  gap: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.steps li::before {
  align-items: center;
  background: var(--paper-sunken);
  border-radius: 50%;
  color: var(--ink-faint);
  content: counter(step);
  display: inline-flex;
  flex: none;
  font-size: 0.8rem;
  height: 1.7rem;
  justify-content: center;
  width: 1.7rem;
}

.steps li[aria-current="step"] { color: var(--ink); }

.steps li[aria-current="step"]::before {
  background: var(--brand-gradient);
  color: var(--brand-white);
}

.steps li.done { color: var(--ink-soft); }
.steps li.done::before { background: var(--brand-green); color: #fff; content: "✓"; }

/* -------------------------------------------------------------- Spielplan */

.schedule {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

/* Farbfläche links wie die Kacheln der Vereinsseite. */
.schedule-item {
  align-items: center;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 13rem);
  padding: 0;
  position: relative;
  transition: box-shadow 160ms var(--ease);
}

.schedule-item::before {
  background: var(--brand-gradient);
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 6px;
}

.schedule-item:hover { box-shadow: var(--shadow); }

.schedule-item > * { padding-block: 1.6rem; }
.schedule-item .when { padding-left: 2.2rem; }
.schedule-item .action { padding-right: 1.8rem; }

@media (max-width: 46rem) {
  .schedule-item {
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-item > * { padding: 0 1.8rem; }
  .schedule-item .when { padding-top: 1.6rem; }
  .schedule-item .action { padding-bottom: 1.6rem; padding-left: 1.8rem; }
}

.schedule-item .date {
  color: var(--ink);
  display: block;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-transform: uppercase;
}

.schedule-item .venue {
  color: var(--ink-faint);
  display: block;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.schedule-item .what { min-width: 0; }

.schedule-item h2 {
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
}

.schedule-item .description {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0.5rem 0 0;
}

.schedule-item .action { text-align: right; }

@media (max-width: 46rem) {
  .schedule-item .action { text-align: left; }
}

.schedule-item .free {
  color: var(--ink-faint);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0.6rem 0 0;
  text-transform: uppercase;
}

.schedule-item .free.cancelled { color: var(--bad); }
.state-abgesagt { opacity: 0.6; }
.state-abgesagt h2 { text-decoration: line-through; }
.state-abgesagt::before { background: var(--seat-blocked); }
.state-ausverkauft::before { background: var(--brand-amber); }
.state-ausverkauft .free { color: var(--warn); }

/* ------------------------------------------------------ Vorstellungskopf */

.show-head { margin-bottom: 0.5rem; padding-bottom: 1.6rem; }

.show-head .season,
.schedule-item .season {
  color: var(--brand-red);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

.show-head .lead {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.4rem 0 0;
}

.show-head .sep { color: var(--line-strong); }
.description { color: var(--ink-soft); max-width: 46rem; }

/* ------------------------------------------------------------ Buchung */

.booking { margin-top: 1rem; }
.booking-step[hidden] { display: none; }

.seatmap-panel,
.form-panel {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  padding: 1.6rem;
}

/* Platz für die klebende Leiste — sonst deckt sie die unterste Sitzreihe zu. */
.seatmap-panel { padding-bottom: 5.5rem; }

.seatmap-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.seatmap-head h2,
.form-panel h2 { font-size: 1.05rem; margin: 0; text-transform: uppercase; }

.countdown {
  background: var(--brand-amber);
  color: #241a00;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 0;
  padding: 0.3rem 0.8rem;
  text-transform: uppercase;
}

/* Bühne dunkel wie im echten Saal, Plätze in den Vereinsfarben. */
.seatmap {
  background: var(--paper-sunken);
  display: block;
  max-height: 34rem;
  padding: 0.6rem;
  width: 100%;
}

.seatmap .stage { fill: var(--stage); }

.seatmap .stage-label {
  fill: #ffffff;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-anchor: middle;
  text-transform: uppercase;
}

.seatmap .seat rect {
  fill: var(--seat-taken);
  stroke: transparent;
  stroke-width: 2;
  transition: fill 110ms var(--ease);
}

.seatmap .seat text {
  fill: #fff;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  pointer-events: none;
  text-anchor: middle;
}

.seatmap .seat.is-free rect { cursor: pointer; fill: var(--seat-free); }
.seatmap .seat.is-free:hover rect { fill: color-mix(in srgb, var(--seat-free) 75%, #fff); }
.seatmap .seat.is-reserved rect { fill: var(--seat-taken); }
.seatmap .seat.is-blocked rect { fill: var(--seat-blocked); }
.seatmap .seat.is-held rect { fill: var(--seat-held); }

.seatmap .seat.is-mine rect {
  cursor: pointer;
  fill: var(--seat-mine);
  stroke: var(--paper-raised);
}

.legend-inline {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.76rem;
  font-weight: 600;
  gap: 0.5rem 1.2rem;
  letter-spacing: 0.03em;
  list-style: none;
  margin: 1rem 0 0.4rem;
  padding: 0;
  text-transform: uppercase;
}

.legend-inline li {
  align-items: center;
  color: var(--ink-faint);
  display: flex;
  gap: 0.4rem;
}

.legend-inline .swatch { display: inline-block; height: 0.8rem; width: 0.8rem; }
.legend-inline .free { background: var(--seat-free); }
.legend-inline .mine { background: var(--seat-mine); }
.legend-inline .taken { background: var(--seat-taken); }
.legend-inline .blocked { background: var(--seat-blocked); }
.legend-inline .wheelchair { background: var(--seat-free); outline: 2px solid var(--brand-amber); outline-offset: -2px; }

.actionbar {
  align-items: center;
  background: var(--brand-black);
  bottom: 1rem;
  box-shadow: var(--shadow-lg);
  color: var(--brand-white);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: space-between;
  margin-top: 1.2rem;
  padding: 1rem 1.4rem;
  position: sticky;
  z-index: 5;
}

.actionbar .tally {
  color: rgb(255 255 255 / 70%);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

.actionbar .tally strong {
  color: var(--brand-white);
  font-size: 1.2rem;
  font-weight: 800;
}

.actionbar button.secondary { border-color: var(--brand-white); color: var(--brand-white); }
.actionbar button.secondary:hover { background: var(--brand-white); color: var(--brand-black); }

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

.form-panel label,
.waitlist-form label,
.stacked label,
.modal-body label {
  display: grid;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 0.35rem;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.form-panel input,
.form-panel textarea,
.form-panel select,
.waitlist-form input,
.waitlist-form textarea,
.stacked input,
.stacked textarea,
.stacked select,
.modal-body input,
.modal-body textarea,
.modal-body select {
  background: var(--paper);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.6rem 0.75rem;
  text-transform: none;
  transition: border-color 140ms var(--ease);
  width: 100%;
}

.form-panel input:focus,
.form-panel textarea:focus,
.waitlist-form input:focus,
.stacked input:focus,
.stacked textarea:focus,
.modal-body input:focus,
.modal-body textarea:focus,
.modal-body select:focus {
  border-color: var(--brand-red);
  outline: none;
}

.form-panel small,
.stacked small,
.modal-body small {
  color: var(--ink-faint);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

label.checkbox {
  align-items: start;
  display: grid;
  font-size: 0.9rem;
  font-weight: 500;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr);
  letter-spacing: 0;
  margin: 1.2rem 0;
  text-transform: none;
}

label.checkbox input {
  accent-color: var(--brand-red);
  height: 1.15rem;
  margin-top: 0.15rem;
  width: 1.15rem;
}

.stacked { display: grid; gap: 0.1rem; max-width: 32rem; }
.stacked button { justify-self: start; margin-top: 0.7rem; }

.field-row { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }

@media (max-width: 34rem) {
  .field-row { grid-template-columns: 1fr; }
}

.waitlist-form {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-top: 5px solid var(--brand-amber);
  margin-top: 1.6rem;
  max-width: 36rem;
  padding: 1.8rem;
}

.waitlist-form h2 { margin-top: 0; text-transform: uppercase; }

/* Für Menschen unsichtbar, für Roboter verlockend. */
.honeypot {
  height: 0;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

/* -------------------------------------------------------- Platzauswahl */

.chosen { background: var(--paper-sunken); padding: 1rem 1.1rem; }

.chosen h3 {
  color: var(--ink-faint);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin: 0 0 0.7rem;
  text-transform: uppercase;
}

.chosen-table { border-collapse: collapse; width: 100%; }

.chosen-table th,
.chosen-table td {
  padding: 0.3rem 0.4rem 0.3rem 0;
  text-align: left;
  vertical-align: middle;
}

.chosen-table th { font-size: 0.9rem; font-weight: 800; width: 3.4rem; }

.chosen-table select {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  max-width: 100%;
  padding: 0.25rem 0.4rem;
}

.chosen-table .num { text-align: right; white-space: nowrap; }
.empty-hint { color: var(--ink-faint); font-size: 0.86rem; margin: 0.4rem 0; }

.chosen.recap { margin-bottom: 1.6rem; }
.chosen.recap .seats { font-size: 0.92rem; font-weight: 600; margin: 0; }

.total {
  align-items: baseline;
  border-top: 2px solid var(--ink);
  display: flex;
  font-size: 0.78rem;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: 0.06em;
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  text-transform: uppercase;
}

.total strong { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }

/* ------------------------------------------------------- Bestätigung */

.code-box {
  background: var(--brand-black);
  color: var(--brand-white);
  display: inline-block;
  margin: 0.5rem 0 1.8rem;
  padding: 1.4rem 2.6rem;
  position: relative;
  text-align: center;
}

.code-box::after {
  background: var(--brand-gradient);
  bottom: 0;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
}

.code-box .label {
  color: rgb(255 255 255 / 60%);
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.code-box strong {
  display: block;
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-top: 0.35rem;
}

.summary { border-collapse: collapse; margin: 1.2rem 0 2rem; }

.summary th {
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.4rem 1.6rem 0.4rem 0;
  text-align: left;
  text-transform: uppercase;
  vertical-align: top;
  white-space: nowrap;
}

.summary td { padding: 0.4rem 0; }

/* ----------------------------------------------------------- Tabellen */

.listing { border-collapse: collapse; font-size: 0.93rem; width: 100%; }

.listing th,
.listing td {
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 1rem 0.6rem 0;
  text-align: left;
}

.listing thead th {
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.listing tfoot th {
  border-bottom: 0;
  border-top: 2px solid var(--ink);
  font-weight: 800;
}

.listing .num { padding-right: 1.2rem; text-align: right; white-space: nowrap; }
.listing tbody tr { transition: background 110ms var(--ease); }
.listing tbody tr:hover { background: var(--paper-sunken); }

/* ---------------------------------------------------- Rechtstexte */

.document { max-width: 44rem; }
.document h1 { margin-top: 0; }
.document h2 { font-size: 1.25rem; margin-top: 2.2rem; text-transform: uppercase; }
.document p, .document li { color: var(--ink-soft); }
.document strong { color: var(--ink); }

.document blockquote {
  background: var(--warn-wash);
  border-left: 5px solid var(--brand-amber);
  margin: 1.3rem 0;
  padding: 0.9rem 1.2rem;
}

.document blockquote p { color: var(--ink); margin: 0; }