/*
 * bw_events - Kacheln fuer die Sammelanmeldung.
 *
 * Zweck dieser Fassung: den AUFBAU sichtbar machen. Jede Veranstaltung ist
 * eine Kachel, und innerhalb der Kachel sind die Bereiche voneinander
 * abgesetzt - Kopf, wer kommt mit, Optionen, Zusatzfelder. Wer das Formular
 * beurteilen soll, sieht so auf einen Blick, was wozu gehoert.
 *
 * Bewusst ohne Bilder und ohne Farbspielereien: Flaechen und Abstaende, sonst
 * nichts.
 *
 * FARBEN KOMMEN VON DER SEITE. Jeder Verein hat eigene; hier stehen nur
 * neutrale Vorgaben als Variablen (--bwe-*). Das Template-Paket der Seite
 * ueberschreibt sie in einer eigenen Datei, bei der Phantomstaffel
 * bw_phantomstaffel_template/Resources/Public/Css/bw_events-farben.css.
 * Eine feste Farbe ausserhalb des Blocks unten ist ein Fehler.
 *
 * Eigene Datei im Paket, damit die Umstellung des Frontends auf natives CSS
 * (zweiter Agent, siehe TOGETHER.md) hiervon unberuehrt bleibt.
 */

/*
 * Farben und Abstaende an einer Stelle - und NUR hier.
 *
 * Gesetzt an .bw-events, der Huelle aller Ansichten (Layouts/Default.html),
 * und an keinem inneren Element: eine zweite Definition weiter innen wuerde
 * die Farbdatei der Seite fuer alles darunter wieder ueberstimmen.
 *
 * Die Werte sind die neutrale Vorgabe. Der Akzent ist ein Dunkelrot, damit
 * ein Formular ohne Farbdatei nicht nach Bootstrap-Blau aussieht.
 *
 * Die Abstaende folgen einer Skala statt Einzelwerten. Vorher standen 0.35,
 * 0.4, 0.5, 0.75, 1, 1.25 nebeneinander, und jeder neue Wert war eine eigene
 * Entscheidung.
 */
.bw-events {
    /* Flaechen, von hell nach tief */
    --bwe-grund: #fff;
    --bwe-flaeche: #f7f8fa;
    --bwe-flaeche-tief: #eef0f3;
    --bwe-zebra: #fbfcfd;
    --bwe-rahmen: #d6d9de;
    --bwe-rahmen-zart: #e6e9ed;
    --bwe-schatten: rgba(0, 0, 0, .07);
    --bwe-abdunkeln: rgba(0, 0, 0, .45);

    /* Leitfarbe: Haken, Summen, Titel, Balken */
    --bwe-akzent: #a50010;
    --bwe-akzent-zart: #fdf0f1;
    --bwe-akzent-rahmen-zart: #f0d6d9;
    --bwe-titel: var(--bwe-akzent);

    /*
     * Schrift. Gemessen am 2026-08-30 (upgrade/pruef-kontraste.php): #6b7280
     * ergab auf der tiefen Flaeche nur 4.23:1 und lag damit unter den
     * geforderten 4.5:1. #5b6470 bringt 5.25:1 - dieselbe Anmutung, lesbar.
     */
    --bwe-gedaempft: #5b6470;
    /* Beschriftungen, die direkt auf dem Seitenhintergrund stehen */
    --bwe-schrift: inherit;
    --bwe-knopf-schrift: #333a44;
    --bwe-knopf-rahmen: #7a828e;

    /* Kostenkasten der Veranstaltung */
    --bwe-kosten-flaeche: var(--bwe-flaeche-tief);
    --bwe-kosten-schrift: inherit;
    --bwe-kosten-betrag: var(--bwe-akzent);

    /* Zustaende: fehlt etwas, ausgebucht, angemeldet, Vertretung */
    --bwe-warn-flaeche: #fdf3d8;
    --bwe-warn-schrift: #7a5b00;
    --bwe-warn-rahmen: #b08800;
    --bwe-voll-flaeche: #efe1e1;
    --bwe-voll-schrift: #8a2b2b;
    --bwe-gut-flaeche: #eef7f0;
    --bwe-gut-schrift: #14532d;
    --bwe-gut-rahmen: #1e7b45;
    --bwe-info-flaeche: #eef4fb;

    --bwe-eng: .35rem;
    --bwe-mittel: .75rem;
    --bwe-weit: 1.25rem;
}

/*
 * Bootstraps .text-muted (#6c757d, mit !important) kam auf dem Grau der
 * Phantomstaffel-Seite (#dcdcdc) nur auf 3,4:1 und auf dem rosa Kopf eines
 * gewaehlten Kastens auf 4,2:1 - gemessen am 2026-09-25 von termine.mjs.
 * Innerhalb von bw_events gilt deshalb die eigene gedaempfte Farbe, die jede
 * Seite in ihrer Farbdatei gegen ihren Hintergrund waehlt.
 */
.bw-events .text-muted {
    color: var(--bwe-gedaempft) !important;
}

.bw-events .form-label {
    color: var(--bwe-schrift);
}

/* ---------------------------------------------------------------- Knoepfe
 *
 * Eigene Knopfstile statt btn-outline-secondary. Zwei Gruende:
 *
 * Lesbarkeit. Die Klasse zieht ihre Farbe aus --secondary des Template-Pakets,
 * das ist #777777. Auf Weiss ergibt das 4.48:1, auf der Kachelflaeche 4.21:1 -
 * beides unter der Schwelle von 4.5:1 fuer kleine Schrift, und diese Knoepfe
 * sind klein. Genau das hat der Nutzer gemeldet.
 *
 * Unabhaengigkeit. Bootstrap fliegt gerade aus den Template-Paketen (zweiter
 * Agent). Ein Knopf, der ohne .btn auskommt, ueberlebt das.
 */
.bw-events-formular .bw-events-knopf,
.bw-events-teilnehmerliste .bw-events-knopf {
    display: inline-block;
    border: 1px solid var(--bwe-knopf-rahmen);
    border-radius: 4px;
    background: var(--bwe-grund);
    color: var(--bwe-knopf-schrift);
    font: inherit;
    font-size: .875rem;
    line-height: 1.4;
    padding: .25rem .6rem;
    cursor: pointer;
    text-decoration: none;
}

.bw-events-knopf:hover,
.bw-events-knopf:focus-visible {
    background: var(--bwe-flaeche-tief);
    color: var(--bwe-knopf-schrift);
}

/*
 * Der Tastaturfokus muss sichtbar bleiben. Ohne diese Regel erbt der Knopf
 * unter Umstaenden ein "outline: none" aus dem Template-Paket, und wer mit der
 * Tabulatortaste durch das Formular geht, weiss nicht mehr, wo er ist.
 */
.bw-events-knopf:focus-visible {
    outline: 2px solid var(--bwe-akzent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- Kachel */

.bw-events-punkt {
    border: 1px solid var(--bwe-rahmen);
    border-radius: 8px;
    background: var(--bwe-grund);
    margin-bottom: var(--bwe-weit);
    overflow: hidden;
    padding: 0;
    transition: border-color .15s, box-shadow .15s;
}

/*
 * Angehakt: die Kachel hebt sich ab, damit man die eigene Auswahl in einem
 * langen Formular wiederfindet. Balken links UND eingefaerbter Kopf - der
 * Balken allein ging in einer Reihe von acht Kacheln unter.
 */
.bw-events-punkt:has(.bw-events-punkt-haken:checked) {
    border-color: var(--bwe-akzent);
    box-shadow: inset 4px 0 0 var(--bwe-akzent), 0 1px 3px var(--bwe-schatten);
}

.bw-events-punkt:has(.bw-events-punkt-haken:checked) .bw-events-punkt-kopf {
    background: var(--bwe-akzent-zart);
    border-bottom-color: var(--bwe-akzent-rahmen-zart);
}

/*
 * Wer mit der Tastatur durch das Formular geht, muss die Kachel finden, in der
 * er steht - nicht nur das Kaestchen.
 */
.bw-events-punkt:has(.bw-events-punkt-haken:focus-visible) {
    outline: 2px solid var(--bwe-akzent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .bw-events-punkt {
        transition: none;
    }
}

.bw-events-punkt-kopf {
    padding: 1rem var(--bwe-weit);
    background: var(--bwe-flaeche);
    border-bottom: 1px solid var(--bwe-rahmen);
    transition: background .15s;
}

/*
 * Das Kaestchen ist das wichtigste Bedienelement des Formulars - es entscheidet
 * ueber die Teilnahme. Deshalb groesser als die Vorgabe und in der
 * Leitfarbe.
 */
.bw-events-punkt-haken {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .15rem;
}

.bw-events-punkt-haken:checked {
    background-color: var(--bwe-akzent);
    border-color: var(--bwe-akzent);
}

.bw-events-punkt-kopf .form-check {
    margin-bottom: 0.25rem;
}

/* Der Titel ist wie im alten System gross und in der Leitfarbe - er traegt
   den Kasten, seit der Haken in "Ich nehme teil" steht. Zwei Klassen, weil
   ".frame-default h3" aus main.css sonst die Farbe gewinnt. */
.bw-events-punkt .bw-events-punkt-titel {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--bwe-titel);
    margin: 0 0 var(--bwe-eng);
}

.bw-events-punkt-zeile {
    color: var(--bwe-gedaempft);
    font-size: 0.9rem;
    margin: 0;
}

/* Wer schon kommt, und daneben die Namen zum Aufklappen. */
.bw-events-punkt-zahlen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--bwe-weit);
    margin-top: var(--bwe-eng);
}

.bw-events-punkt-zahlen .bw-events-teilnehmer {
    margin: 0;
}

.bw-events-punkt-teaser {
    margin-top: var(--bwe-eng);
}

/* ---------------------------------------------------------------- Wahl
 *
 * Wie im alten System: "Ich nehme teil" und "Partner/-in nimmt teil"
 * nebeneinander, jeder Kasten mit seinen Kosten und seiner Auswahl, rechts
 * die Kosten der Veranstaltung. Auf dem Telefon untereinander.
 */
.bw-events-wahl {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bwe-mittel);
    padding: var(--bwe-mittel) var(--bwe-weit);
    border-bottom: 1px solid var(--bwe-rahmen-zart);
}

@media (min-width: 768px) {
    .bw-events-wahl {
        grid-template-columns: 1fr 11rem;
    }

    /* Mitglied UND Begleitung: zwei gleich breite Kaesten, dann die Kosten. */
    .bw-events-wahl:has(> .bw-events-person + .bw-events-person) {
        grid-template-columns: 1fr 1fr 11rem;
    }
}

.bw-events-person {
    border: 1px solid var(--bwe-rahmen);
    border-radius: 6px;
    background: var(--bwe-flaeche);
    padding: var(--bwe-mittel);
}

.bw-events-person:has(.bw-events-person-haken:checked) {
    border-color: var(--bwe-akzent);
    background: var(--bwe-akzent-zart);
}

.bw-events-person-kopf {
    font-weight: 600;
    margin-bottom: 0;
}

.bw-events-person-haken {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .15rem;
}

.bw-events-person-haken:checked {
    background-color: var(--bwe-akzent);
    border-color: var(--bwe-akzent);
}

.bw-events-person-kosten {
    font-weight: 400;
    white-space: nowrap;
}

.bw-events-person-kosten strong {
    color: var(--bwe-akzent);
}

/*
 * Die Begleitung zaehlt nur zusammen mit dem Mitglied. Ohne "Ich nehme teil"
 * ist ihr Kasten gedaempft und sagt, warum - statt dass ihr Haken
 * stillschweigend verworfen wird.
 */
.bw-events-person-hinweis {
    display: none;
    color: var(--bwe-gedaempft);
    font-size: .875rem;
    margin: var(--bwe-eng) 0 0;
}

/* Gedaempft wird alles AUSSER dem Hinweis: mit opacity .72 kaeme er auf
   3,1:1 - ausgerechnet der Satz, der erklaert, warum der Kasten ruht. */
.bw-events-punkt:not(:has(.bw-events-punkt-haken:checked)) .bw-events-begleitung > :not(.bw-events-person-hinweis) {
    opacity: .72;
}

.bw-events-punkt:not(:has(.bw-events-punkt-haken:checked)) .bw-events-begleitung .bw-events-person-hinweis {
    display: block;
}

.bw-events-partnername,
.bw-events-optionsgruppe {
    margin-top: var(--bwe-mittel);
}

.bw-events-feldname {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--bwe-gedaempft);
    margin: 0 0 .15rem;
}

/* Die Kosten der Veranstaltung, rechts im eigenen Kasten. */
.bw-events-kostenkasten {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--bwe-mittel);
    border: 1px solid var(--bwe-rahmen);
    border-radius: 6px;
    background: var(--bwe-kosten-flaeche);
    color: var(--bwe-kosten-schrift);
    padding: var(--bwe-mittel);
    font-weight: 600;
    align-self: start;
}

.bw-events-kostenkasten strong {
    color: var(--bwe-kosten-betrag);
    font-size: 1.15rem;
    white-space: nowrap;
}

.bw-events-punkt-marken {
    margin-top: 0.35rem;
}

/*
 * Marken. Alle gleich grau zu halten war der Fehler der ersten Fassung: der
 * Preis ist eine andere Sorte Angabe als "noch 12 Plaetze", und "ausgebucht"
 * eine dritte. Jetzt tragen sie drei Stufen - neutral, hervorgehoben, warnend.
 */
/*
 * Nicht unter 0.875rem: html traegt hier 14 px, 0.78rem waren 10,9 px - zu
 * klein fuer das, was darin steht (Preise, freie Plaetze).
 */
.bw-events-marke {
    display: inline-block;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    background: var(--bwe-flaeche-tief);
    color: var(--bwe-gedaempft);
    margin: 0 var(--bwe-eng) var(--bwe-eng) 0;
    white-space: nowrap;
}

/* Preise stehen im Vordergrund: danach fragt man zuerst. */
.bw-events-marke--preis {
    background: var(--bwe-grund);
    border: 1px solid var(--bwe-rahmen);
    color: var(--bwe-knopf-schrift);
    font-weight: 600;
}

.bw-events-marke--eng {
    background: var(--bwe-warn-flaeche);
    color: var(--bwe-warn-schrift);
}

.bw-events-marke--voll {
    background: var(--bwe-voll-flaeche);
    color: var(--bwe-voll-schrift);
}

/* ------------------------------------------------------------- Abschnitte */

.bw-events-punkt-koerper {
    padding: 1rem 1.25rem;
}

/*
 * Die Abschnitte innerhalb einer Kachel hatten je einen eigenen Rahmen auf
 * grauer Flaeche - in einer Kachel, die selbst einen Rahmen hat. Rahmen in
 * Rahmen in Rahmen, und bei vier Abschnitten sah eine Veranstaltung aus wie
 * ein Formularschrank.
 *
 * Jetzt trennen Linien statt Rahmen. Dieselbe Gliederung, ein Drittel weniger
 * Kanten.
 */
.bw-events-abschnitt-kachel {
    padding: var(--bwe-mittel) 0;
    margin: 0;
    border-top: 1px solid var(--bwe-rahmen-zart);
}

.bw-events-abschnitt-kachel:first-child {
    border-top: 0;
    padding-top: 0;
}

.bw-events-abschnitt-kachel:last-child {
    padding-bottom: 0;
}

.bw-events-abschnitt-titel {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bwe-gedaempft);
    margin: 0 0 var(--bwe-mittel);
}

/* Ein Formular ohne Auswahl ist nicht ausgegraut, sondern nur ruhiger: wer
   die Veranstaltung nicht angehakt hat, soll trotzdem lesen koennen, was
   drinsteht. */
.bw-events-punkt:not(:has(.bw-events-punkt-haken:checked)) .bw-events-punkt-koerper {
    opacity: 0.72;
}

/* -------------------------------------------------------------- Beiwerk */

.bw-events-abschnitt {
    margin-bottom: 1.5rem;
}

.bw-events-summe {
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
    background: var(--bwe-flaeche);
    border: 1px solid var(--bwe-rahmen);
    border-radius: 4px;
}

.bw-events-gastzeile {
    padding: var(--bwe-eng) var(--bwe-mittel);
    background: var(--bwe-flaeche);
    border-radius: 6px;
    margin-bottom: var(--bwe-eng);
}

/* Die Gastzeile ist eine Zeile: sechs Angaben nebeneinander. Der Platz kommt
   daher, dass die Beschriftungen als Platzhalter im Feld stehen und die
   Schrift kleiner ist. Unter 768px bricht Bootstrap sie ohnehin um. */
.bw-events-gastfeld {
    margin-bottom: 0;
}

.bw-events-gastzeile .form-control-sm,
.bw-events-gastzeile .form-select-sm {
    font-size: 0.875rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

@media (min-width: 992px) {
    /* Breit: die Kachel nutzt die volle Spalte, die Angaben darin stehen
       nebeneinander statt untereinander. */
    .bw-events-punkt-kopf {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Umbrechen darf der Block, jede Marke fuer sich nicht. Ein nowrap am
       ganzen Block schob bei 992 px die Marken aus der Kachel, sobald die
       Angemeldeten ausgeschrieben dastanden. */
    .bw-events-punkt-marken {
        margin-top: 0;
        text-align: right;
        max-width: 55%;
    }
}

/* ---------------------------------------------------------------- Gaeste
 *
 * Gaeste werden je Veranstaltung eingetragen. Ohne Zutun steht dort keine
 * Zeile, sie entstehen ueber "+ Gast".
 */
.bw-events-gaeste .bw-events-gastzeile {
    margin-bottom: .4rem;
}

.bw-events-gaeste .bw-events-gastzeile:last-of-type {
    margin-bottom: .6rem;
}

/*
 * Der Entfernen-Knopf soll die Zeilenhoehe nicht aufblasen - deshalb enger
 * gesetzt als die uebrigen Knoepfe. Das Zeichen "x" ist klein, also braucht es
 * den vollen Kontrast; die Farbe kommt aus .bw-events-knopf.
 */
.bw-events-gast-weg {
    line-height: 1;
    padding: .1rem .45rem;
    font-size: 1rem;
}

.bw-events-gaeste-zahl {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ------------------------------------------------------ Kosten, mitlaufend
 *
 * Die Summe stand bisher links am Rand. Eine Randspalte hat auf dem Telefon
 * keinen Platz, und dort wird das Formular ausgefuellt - deshalb unten und
 * klebend. position: sticky braucht keinen festen Platz im Layout und laesst
 * die Leiste am Ende des Formulars stehenbleiben, statt ueber allem zu
 * schweben.
 */
.bw-events-kostenleiste {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 1.5rem;
    padding: var(--bwe-mittel) var(--bwe-weit);
    background: var(--bwe-grund);
    border: 1px solid var(--bwe-rahmen);
    border-radius: 8px;
    /*
     * Schatten nach OBEN, weil die Leiste am unteren Rand klebt und sich vom
     * Formular darueber abheben muss - nicht von etwas darunter.
     */
    box-shadow: 0 -2px 8px var(--bwe-schatten);
}

.bw-events-kosten-summe strong {
    font-size: 1.15rem;
    color: var(--bwe-akzent);
}

/*
 * Der Knopf "nach oben" aus dem Template-Paket ist fixed am unteren Rand,
 * z-index 1040 - er lag auf dem Telefon ueber Summe und Absendeknopf. Auf
 * Seiten mit dieser Leiste steht er deshalb ueber ihr. 7rem sind 98 px, die
 * Leiste ist umgebrochen hoechstens 91 px hoch (html traegt 14 px).
 */
body:has(.bw-events-kostenleiste) .scroll-to-top {
    bottom: 7rem;
}

.bw-events-kostenleiste-inhalt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
}

.bw-events-kosten-summe {
    margin-right: auto;
}

.bw-events-kosten-punkte {
    color: var(--bwe-gedaempft);
    font-size: .9rem;
}

/* --------------------------------------------------------- Wer schon kommt */

.bw-events-teilnehmer {
    margin-top: .75rem;
    font-size: .9rem;
}

.bw-events-teilnehmer > summary {
    cursor: pointer;
    color: var(--bwe-gedaempft);
}

.bw-events-teilnehmer-liste {
    margin: .5rem 0 0 0;
    padding-left: 1.1rem;
    columns: 2;
}

@media (max-width: 36rem) {
    .bw-events-teilnehmer-liste {
        columns: 1;
    }
}

/* ------------------------------------------------------ Teilnehmerliste
 *
 * "zur Teilnehmerliste" mit dem Info-Zeichen, wie im alten System. Mit
 * Skript oeffnet es ein Fenster (dialog), ohne klappt es hier auf.
 */
.bw-events-punkt-zahlen .bw-events-teilnehmer {
    font-size: inherit;
}

.bw-events-infoknopf {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    list-style: none;
    cursor: pointer;
    color: var(--bwe-gedaempft);
}

.bw-events-infoknopf::-webkit-details-marker {
    display: none;
}

.bw-events-infoknopf:hover,
.bw-events-infoknopf:focus-visible {
    color: var(--bwe-knopf-schrift);
    text-decoration: underline;
}

.bw-events-infozeichen {
    color: var(--bwe-titel);
    flex: none;
}

/* Das Info-Zeichen am Titel: mehr zu der Veranstaltung. */
.bw-events-punkt-titelzeile {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 .5rem;
}

.bw-events-info {
    display: inline;
}

.bw-events-infoknopf--titel .bw-events-infozeichen {
    width: 1.35rem;
    height: 1.35rem;
    /* Auf der Grundlinie des Titels, nicht darueber */
    transform: translateY(.15rem);
}

.bw-events-infobild {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: var(--bwe-mittel) 0;
}

.bw-events-infoteaser {
    font-weight: 600;
    margin: var(--bwe-mittel) 0 var(--bwe-eng);
}

.bw-events-infotext {
    margin: 0 0 var(--bwe-mittel);
}

.bw-events-infotext > :last-child {
    margin-bottom: 0;
}

.bw-events-listeninhalt .bw-events-feldname {
    margin-top: var(--bwe-mittel);
}

.bw-events-listentitel {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bwe-titel);
    margin: 0 2.5rem var(--bwe-eng) 0;
}

.bw-events-tabellenrahmen {
    overflow-x: auto;
    margin-top: var(--bwe-mittel);
}

.bw-events-listentabelle {
    width: 100%;
    border-collapse: collapse;
}

.bw-events-listentabelle th,
.bw-events-listentabelle td {
    padding: .35rem .6rem;
    text-align: left;
    vertical-align: top;
}

/* Der Kopf der Vorstandstabelle traegt .8rem; hier nicht unter 12 px. */
.bw-events .bw-events-listentabelle thead th {
    font-size: .875rem;
}

.bw-events-listentabelle td:first-child {
    color: var(--bwe-gedaempft);
    width: 3rem;
}

.bw-events-listenfenster {
    width: min(60rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    padding: var(--bwe-weit);
    border: 1px solid var(--bwe-rahmen);
    border-radius: 8px;
    background: var(--bwe-grund);
    color: inherit;
    box-shadow: 0 8px 32px var(--bwe-schatten);
}

/* ::backdrop erbt die Variablen seines dialog-Elements (Chrome 122,
   Firefox 120, Safari 17.4). Aeltere lassen den Hintergrund klar. */
.bw-events-listenfenster::backdrop {
    background: var(--bwe-abdunkeln);
}

.bw-events-listenfenster-zu {
    position: absolute;
    top: var(--bwe-mittel);
    right: var(--bwe-mittel);
    font-size: 1.25rem;
    line-height: 1;
}

/* ------------------------------------------------ Fehlende Profilangaben
 *
 * Auffaellig, aber nicht als Fehler: es ist noch nichts schiefgegangen, es
 * fehlt nur etwas. Deshalb der Gelbton der Marke "Ausweis noetig" und nicht
 * das Rot einer Fehlermeldung.
 */
.bw-events-fehlende-daten {
    margin-bottom: 1.25rem;
    padding: .75rem 1rem;
    border-left: 3px solid var(--bwe-warn-rahmen);
    background: var(--bwe-warn-flaeche);
    color: var(--bwe-warn-schrift);
}

.bw-events-fehlende-daten p {
    margin: 0 0 .5rem 0;
}

/* ------------------------------------------------- Anmeldung in Vertretung
 *
 * Auffaellig abgesetzt, weil hier etwas Ungewoehnliches passiert: man traegt
 * fuer jemand anderen ein. Wer das uebersieht, meldet aus Versehen das falsche
 * Mitglied an.
 */
.bw-events-vertretung {
    margin-bottom: 1.5rem;
    padding: .75rem 1rem;
    border-left: 3px solid var(--bwe-akzent);
    background: var(--bwe-info-flaeche);
}

.bw-events-vertretung-aktiv {
    margin: 0 0 .5rem 0;
}

.bw-events-vertretung-wahl > summary {
    cursor: pointer;
}

.bw-events-vertretung-suche {
    margin: .75rem 0 .5rem 0;
    max-width: 22rem;
}

.bw-events-vertretung-liste {
    margin: 0;
    padding-left: 1.1rem;
    max-height: 18rem;
    overflow-y: auto;
    columns: 2;
}

@media (max-width: 36rem) {
    .bw-events-vertretung-liste {
        columns: 1;
    }
}

/* -------------------------------------------------------- Kopf und Fristen
 *
 * Der Anmeldeschluss ist die wichtigste Angabe ueber dem Formular: danach
 * geht nichts mehr. Er stand bisher als gewoehnlicher Absatz da.
 */
.bw-events-frist {
    padding: var(--bwe-mittel) var(--bwe-weit);
    background: var(--bwe-flaeche);
    border-left: 3px solid var(--bwe-akzent);
    border-radius: 0 6px 6px 0;
    margin-bottom: var(--bwe-mittel);
}

.bw-events-status {
    padding: var(--bwe-mittel) var(--bwe-weit);
    background: var(--bwe-gut-flaeche);
    border-left: 3px solid var(--bwe-gut-rahmen);
    border-radius: 0 6px 6px 0;
    color: var(--bwe-gut-schrift);
}

.bw-events-summen {
    color: var(--bwe-gedaempft);
}

/* Die Zahl der Angemeldeten neben dem Titel - eine Angabe, kein Schmuck. */
.bw-events-summen strong {
    color: var(--bwe-knopf-schrift);
}

/* --------------------------------------------------------------- Kleinkram */

.bw-events-klein {
    font-size: .875rem;
}

/*
 * Die Tabelle der Teilnehmerlisten: Zebrastreifen und ein klebender Kopf. Bei
 * 66 Personen verliert man sonst die Spalte.
 */
.bw-events-tabelle thead th {
    position: sticky;
    top: 0;
    background: var(--bwe-flaeche);
    border-bottom: 2px solid var(--bwe-rahmen);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bwe-gedaempft);
}

.bw-events-tabelle tbody tr:nth-child(odd) {
    background: var(--bwe-zebra);
}