/* Gastseiten (Block 88 #235, Block 95 #259): Anmeldung in Schritten, Bestätigung mit Tickets, Teilnehmerliste, Startseite, Datenschutz.
   Dieses Stylesheet gehört allen Gastseiten (index, register, success, teilnehmer, datenschutz) und lädt nach style.css.
   Eigene Datei statt style.css: style.css liegt im Precache des Einlass-Service-Workers – eine Änderung dort zwänge alle
   Einlassgeräte zum Nachladen, obwohl sich am Einlass nichts ändert. Farben, Formen und Schrift kommen aus tokens.css
   (--gast-*, --event-farbe, --ecke…); das Event gibt den Akzent vor (--event-farbe, gesetzt von gast.js), Klönschnack steht nur in der Kopfzeile.

   Aufbau: 1 Rahmen · 2 Schrift · 3 Felder und Knöpfe · 4 Startseite · 5 Eventkopf · 6 Fortschritt · 7 Schritte ·
   8 Leiste · 9 Bestätigung und Ticket · 10 Löschbereich · 11 Teilnehmerliste · 12 Fußzeile, Hinweise, Datenschutztext.

   Block 140 (#355): in vier Dateien geteilt, geladen in dieser Reihenfolge: anmeldung.css (1 bis 3), anmeldung-eventkopf.css (4, 5),
   anmeldung-schritte.css (6 bis 8), anmeldung-bestaetigung.css (9 bis 12). */

/* --- 1 Rahmen ----------------------------------------------------------------------------------------------------- */
body.gast {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--gast-grund);
  color: var(--gast-text);
  font-size: 16px;
  line-height: 1.55;
}
/* Der rote Strich über der Überschrift (style.css: body:not([data-page]) .container::before) entfällt – die Gastseiten haben
   keinen .container mehr; die Regel trifft hier nichts. */
.gast-seite { flex: 1 0 auto; width: 100%; padding: 56px 24px 24px; }
.gast-seite--start { padding-top: 96px; }
.gast-karte {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px;
  background: var(--gast-karte);
  border: 1px solid var(--gast-rand);
  border-radius: var(--ecke-karte);
  box-shadow: none; /* Karten haben keinen Schatten */
}
.gast-seite--start .gast-karte { max-width: 480px; padding: 48px 48px 40px; }
.gast-seite--bestaetigung .gast-karte { max-width: 980px; padding: 44px 52px; }
@media (max-width: 600px) {
  /* Karte randlos über die volle Breite */
  .gast-seite, .gast-seite--start { padding: 0; }
  .gast-karte, .gast-seite--start .gast-karte, .gast-seite--bestaetigung .gast-karte {
    max-width: none;
    padding: 24px 20px;
    border-width: 0 0 1px;
    border-radius: 0;
  }
  .gast-seite--start .gast-karte { padding: 32px 20px; }
}
/* Handy: Die Leiste unten ist fest (Abschnitt 8); die Seite bekommt Abstand, und ein fokussiertes Feld wird beim Scrollen
   nie darunter geschoben. */
@media (max-width: 600px) {
  body.mit-leiste { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  html:has(body.mit-leiste) { scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
}

/* --- 2 Schrift ---------------------------------------------------------------------------------------------------- */
.gast-ueberzeile, .anmeldung-dachzeile {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gast-gedaempft);
}
.gast-titel, .anmeldung-titel {
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 1.12;
  font-weight: 300;
  letter-spacing: -0.8px;
  text-align: left;
  color: var(--gast-text);
  overflow-wrap: anywhere;
}
.gast-titel--bestaetigung { margin: 0; font-size: 36px; line-height: 1.15; letter-spacing: -0.6px; }
.gast-lead { margin: 0; font-size: 17px; color: var(--gast-text-2); }
.gast-hinweis { margin: 16px 0 0; font-size: 14px; text-align: center; color: var(--gast-gedaempft); }
@media (max-width: 600px) {
  .gast-titel, .anmeldung-titel { font-size: 34px; }
  .gast-titel--bestaetigung { font-size: 30px; }
}

/* --- 3 Felder und Knöpfe ------------------------------------------------------------------------------------------ */
.gast-karte label { display: block; margin: 18px 0 6px; font-size: 14px; font-weight: 700; color: var(--gast-text); }
.gast-karte input[type="text"],
.gast-karte input[type="email"],
.gast-karte input[type="tel"],
.gast-karte input[type="date"],
.gast-karte input[type="search"],
.gast-karte select {
  width: 100%;
  max-width: 100%;
  height: 48px;
  padding: 0 14px;
  font-size: 16px;
  color: var(--gast-text);
  background: var(--gast-karte);
  border: 1px solid var(--gast-feldrand);
  border-radius: var(--ecke);
  box-shadow: none;
}
.gast-karte input[readonly] { background: var(--gast-grund); color: var(--gast-text-2); cursor: not-allowed; }
.gast-karte input[type="text"]:focus-visible,
.gast-karte input[type="email"]:focus-visible,
.gast-karte input[type="tel"]:focus-visible,
.gast-karte input[type="date"]:focus-visible,
.gast-karte select:focus-visible {
  outline: none;
  border-color: var(--event-farbe);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--event-farbe) 16%, transparent), inset 0 0 0 1px var(--event-farbe);
}
.gast-karte .section-hint, .gast-karte .pair-hint { margin: 6px 0 0; font-size: 14px; color: var(--gast-gedaempft); }
.gast-karte .pflicht-hinweis { margin: 0 0 18px; }
.gast-karte .required-star { color: var(--gast-text); font-weight: 700; }
.gast-karte .feedback { font-size: 14px; }

/* Primärknopf in der Eventfarbe, Zweitknopf weiß mit Knopfrand. Die Knöpfe richten sich nach dem Inhalt, nicht nach der Breite. */
button.gast-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-height: 48px;
  margin: 0;
  padding: 0 28px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #ffffff;
  background: var(--event-farbe);
  border: 1px solid transparent;
  border-radius: var(--ecke);
  box-shadow: none;
}
button.gast-knopf:hover:not(:disabled) { background: color-mix(in srgb, var(--event-farbe) 88%, black); }
button.gast-knopf:active:not(:disabled) { background: color-mix(in srgb, var(--event-farbe) 76%, black); }
button.gast-knopf.gast-knopf--zweit,
.gast-karte button.secondary-btn {
  color: var(--gast-text);
  background: var(--gast-karte);
  border: 1px solid var(--gast-knopfrand);
}
button.gast-knopf.gast-knopf--zweit:hover:not(:disabled),
.gast-karte button.secondary-btn:hover:not(:disabled) { background: var(--gast-grund); border-color: var(--gast-knopfrand); }
.gast-karte button.secondary-btn { min-height: 44px; padding: 0 18px; font-size: 15px; font-weight: 700; border-radius: var(--ecke); }
/* Fokus: Ring in der Eventfarbe (alle Gastseiten) */
.gast-karte a:focus-visible,
.gast-karte button:focus-visible,
.gast-fuss a:focus-visible,
.gast-karte .antwortkarte:focus-within {
  outline: 3px solid var(--event-farbe);
  outline-offset: 2px;
  box-shadow: none;
  border-radius: var(--ecke);
}
.gast-karte .antwortkarte:focus-within { box-shadow: 0 0 0 5px color-mix(in srgb, var(--event-farbe) 16%, transparent); }
@media (max-width: 600px) {
  .gast-karte input[type="text"],
  .gast-karte input[type="email"],
  .gast-karte input[type="tel"],
  .gast-karte input[type="date"],
  .gast-karte select { height: 50px; }
}