/* ===== "Wann & Wo" - Termine + Zusage-Formular =====
   Sitzt als Karte (.hades-karte, siehe css/hades-inhalt.css) direkt im
   Höllentor - Werte identisch zum Countdown der Oberwelt weiter oben auf
   dieser Seite (#countdown data-start="2026-10-31T16:00:00"). Formular
   verarbeitet sich selbst (invitation/index.php, POST auf sich selbst) -
   kein separates zusage.php mehr, siehe dort. Direkt darunter folgt
   "Wir sind dabei" (weiter unten in dieser Datei).
   Kartenüberschrift (.facts-date) folgt --accent/--accent-bright wie die
   Boxen weiter oben (siehe css/hades-inhalt.css für die Begründung). */

.facts-date {
    font-family: 'Creepster', cursive;
    font-weight: 400;
    font-size: clamp(1.6rem, calc(4.5 * var(--uw)), 2.2rem);
    color: var(--accent-bright);
    text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);
    margin: 0 0 0.5rem;
    transition: color var(--theme-transition), text-shadow var(--theme-transition);
}

.facts-time {
    font-weight: 800;
    /* Keine eigene Groesse mehr (vorher 1.1rem) - einheitlich mit den
       uebrigen normalen Textinhalten (Basisgroesse wie z.B. .facts-address/
       Footer-Copyright, siehe TODO-20260901-030). */
    margin: 0 0 1rem;
    color: #f2e6da;
}

.facts-place {
    /* Keine eigene Groesse mehr (vorher 1.05rem) - siehe .facts-time oben. */
    font-weight: 600;
    margin: 0 0 1.6rem;
    color: #f2e6da;
}

.facts-address {
    color: #cbb8a8;
    margin: 0.3rem 0 0;
}

.zusage-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.zusage-form input[type="text"],
.zusage-form input[type="number"],
/* PIN-Feld der Gaesteliste (index.php: #gaesteliste-pin) - gleiche Optik
   wie die Anmeldefelder, deshalb hier mit in die bestehende Regel statt
   einer zweiten, fast gleichlautenden daneben. */
.zusage-form input[type="password"] {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: #f2e6da;
    font-size: 1rem;
    text-align: center;
    font-family: inherit;
}

.zusage-zahlen {
    display: flex;
    gap: 0.8rem;
}

.zusage-zahlen label {
    flex: 1;
    color: #cbb8a8;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.zusage-zahlen input {
    margin-top: 0.3rem;
}

.btn-zusage {
    border: none;
    cursor: pointer;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    font-size: 1.05rem;
    padding: 0.85rem 1.4rem;
    /* Gleicher Abstand wie zwischen den Monsterzahlen-Feldern und diesem
       Button selbst (.zusage-form: gap: 0.8rem) - der Flex-Gap gilt nur
       ZWISCHEN den Feldern, nicht mehr NACH dem letzten (dem Button),
       ohne das hier würde er direkt an die Kante der Karte/das nächste
       Element darunter stoßen. */
    margin-bottom: 0.8rem;
    transition: background var(--theme-transition), box-shadow 0.15s ease, transform 0.1s ease;
}

.btn-zusage:hover {
    background: var(--accent-bright);
    box-shadow: 0 0 25px var(--accent);
}

.btn-zusage:active {
    transform: translateY(1px);
}

/* Chip/Rahmen wie die Formularfelder (.zusage-form input) - nur Rahmen-
   und Flächenfarbe unterscheiden sich je nach Status. */
.zusage-status {
    font-weight: 700;
    text-align: center;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    backdrop-filter: blur(6px);
}

.zusage-status.ok {
    color: #4caf50;
    border-color: #1b5e20;
    background: rgba(76, 175, 80, 0.1);
}

.zusage-status.fehler {
    color: #e63946;
    border-color: #6b1520;
    background: rgba(230, 57, 70, 0.1);
}

.zusage-hinweis {
    color: #cbb8a8;
    /* Keine eigene Groesse mehr (vorher 0.8rem) - einheitlich mit den
       uebrigen normalen Textinhalten (siehe TODO-20260901-030). */
    margin: 1.2rem 0 0;
    line-height: 1.5;
}

/* ===== "Wir sind dabei" (unterhalb von "Wann & Wo", invitation/index.php) =====
   Eigene .hades-karte direkt nach #wannwo - übernimmt automatisch Rahmen/
   Überschrift-Optik von dort (siehe css/hades-inhalt.css: .hades-karte/h2).
   Zwei Zustände: eigene Anmeldung (Cookie erkannt) ODER volle Übersicht
   (?alleZusagen=1) - nie beides gleichzeitig, siehe index.php. */

.teilnehmer-eigener-name {
    font-family: 'Creepster', cursive;
    font-weight: 400;
    font-size: clamp(1.4rem, calc(4 * var(--uw)), 1.9rem);
    color: var(--accent-bright);
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
    margin: 0 0 0.6rem;
}

.teilnehmer-eigene-zahl {
    color: #f2e6da;
    font-weight: 600;
    margin: 0 0 0.3rem;
}

.teilnehmer-zugesagt-am {
    color: #cbb8a8;
    /* Keine eigene Groesse mehr (vorher 0.85rem) - einheitlich mit den
       uebrigen normalen Textinhalten (siehe TODO-20260901-030). */
    margin: 1rem 0 0;
    line-height: 1.5;
}

.teilnehmer-leer {
    color: #cbb8a8;
    text-align: center;
    margin: 0;
}

/* Hinweiszeile ueber dem PIN-Feld der Gaesteliste - gleiche gedaempfte
   Farbe wie .teilnehmer-leer, das an derselben Stelle steht. */
.gaesteliste-pin-text {
    color: #cbb8a8;
    text-align: center;
    margin: 0 0 0.9rem;
}

/* Das Feld ist nur eine kurze Zahl - in voller Kartenbreite wirkte es wie
   ein Namensfeld. Zentriert und schmaler, der Knopf darunter bleibt breit. */
.gaesteliste-pin-form input[type="password"] {
    max-width: 10rem;
    align-self: center;
    letter-spacing: 0.35em;
}

/* overflow-x bewusst hidden statt auto - table-layout:fixed unten sorgt
   dafür, dass die Tabelle die verfügbare Breite nie überschreitet (lange
   Namen brechen um statt die Spalte zu sprengen), ein Scrollbalken soll
   also nie nötig sein. hidden statt auto/visible als Absicherung gegen
   Rundungsdifferenzen von 1px. */
.teilnehmer-tabelle-wrap {
    overflow-x: hidden;
}

table.teilnehmer-tabelle {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-family: 'Nunito', system-ui, sans-serif;
    /* Keine eigene Groesse mehr (vorher 0.9rem) - Namen/Zahlen/Datum sind
       normale Textinhalte, einheitlich mit den uebrigen (siehe
       TODO-20260901-030). Spaltenkoepfe (th) bleiben bewusst bei ihrer
       eigenen, kleineren Ausschnitt-Beschriftungsgroesse (siehe unten). */
}

/* Feste Spaltenbreiten für GM/JM/Datum (immer gleich breit, auch bei
   leerem Wert wie "–" bei Editiert am) - Name (keine feste Breite) bekommt
   dadurch automatisch den kompletten Rest der Zeile. */
table.teilnehmer-tabelle col.col-zahl {
    width: 3.5em;
}

table.teilnehmer-tabelle col.col-datum {
    width: 10em;
}

table.teilnehmer-tabelle th,
table.teilnehmer-tabelle td {
    padding: 0.6rem 0.7rem;
    text-align: left;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    white-space: nowrap;
}

table.teilnehmer-tabelle th {
    color: var(--accent-bright);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    font-weight: 700;
}

table.teilnehmer-tabelle td {
    color: #f2e6da;
}

/* Name ist die einzige Spalte, die umbrechen darf (und muss, bei sehr
   langen Namen, statt die Tabelle zu sprengen). */
table.teilnehmer-tabelle th.name,
table.teilnehmer-tabelle td.name {
    white-space: normal;
    overflow-wrap: break-word;
}

table.teilnehmer-tabelle th.zahl,
table.teilnehmer-tabelle td.zahl {
    text-align: center;
}

/* Gesamt-Zeile (Summe GM/JM über alle Anmeldungen) - optisch von den
   Datenzeilen abgesetzt statt wie eine weitere Anmeldung auszusehen. */
table.teilnehmer-tabelle tfoot td {
    color: var(--accent-bright);
    font-weight: 800;
    border-top: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
    border-bottom: none;
}

/* Kompakte Karten-Ansicht (statt Tabellenzeilen) per @media(max-width)
   entfernt (2026-08-24, Bühnen-Nachbesserung) - siehe css/dialog.css fuer
   die Begruendung. Die Tabelle skaliert (table-layout:fixed, rem-basierte
   Schrift) bereits proportional mit der Buehne mit, ein an den echten
   Viewport gekoppelter Umbau in Karten ist dadurch nicht mehr noetig und
   widerspraeche der Buehnen-Logik (siehe Auftrag). */

/* ===== Verschleierung vor gebrochenem Fluch: Uebergang nachziehen =====
   #wannwo traegt zusaetzlich .programm-verschleiert (siehe index.php) und
   wird damit vom selben Blur erfasst wie die Unterwelt-Inhalte
   (css/programm.css). Der dort mitgelieferte weiche Uebergang kommt hier
   allerdings NICHT an: .hades-karte (css/hades-inhalt.css) setzt ebenfalls
   die Kurzschreibweise transition (fuer border-color), hat dieselbe
   Spezifitaet und wird spaeter geladen - es gewinnt also
   "transition: border-color ..." und der Blur wuerde im Erloesungsmoment
   hart wegspringen, statt wie ueber "Was dich erwartet"/"Der Ablauf der
   Nacht" weich scharfzuziehen.

   Deshalb hier beide Uebergaenge gemeinsam, mit hoeherer Spezifitaet
   (ID + Klasse). Die 2.5s bzw. 0.4s bei reduzierter Bewegung sind exakt
   die Werte aus css/programm.css (.programm-verschleiert) - dieselbe
   Dauer wie das Ausblenden von Nebel/Glut/Spinnen. */
#wannwo.programm-verschleiert {
    transition: filter 2.5s ease, border-color var(--theme-transition);
}

@media (prefers-reduced-motion: reduce) {
    #wannwo.programm-verschleiert {
        transition: filter 0.4s ease, border-color var(--theme-transition);
    }
}