/*
 * 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. Die endgueltige Gestaltung kommt spaeter und gehoert ins
 * Template-Paket der jeweiligen Seite, nicht hierher.
 *
 * 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.
 *
 * Der Akzent ist das Dunkelrot der Seite (--primary in overrideColors.css),
 * nicht mehr ein eigenes Blau: ein Formular, das eine andere Leitfarbe
 * mitbringt als die Seite, sieht aus wie hineingeklebt.
 *
 * 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-formular,
.bw-events-teilnehmerliste {
    --bwe-rahmen: #d6d9de;
    --bwe-rahmen-zart: #e6e9ed;
    --bwe-flaeche: #f7f8fa;
    --bwe-flaeche-tief: #eef0f3;
    --bwe-akzent: #a50010;
    --bwe-akzent-zart: #fdf0f1;
    --bwe-eng: .35rem;
    --bwe-mittel: .75rem;
    --bwe-weit: 1.25rem;
    /*
     * 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;
    --bwe-knopf-schrift: #333a44;
    --bwe-knopf-rahmen: #7a828e;
}

/* ---------------------------------------------------------------- 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: #fff;
    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: #fff;
    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 rgba(0, 0, 0, .07);
}

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

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

.bw-events-punkt-titel {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

/* Die ganze Ueberschrift ist anklickbar - ein 18 Pixel breites Kaestchen ist
   auf dem Telefon kein Ziel. */
.bw-events-punkt-titel:hover {
    color: var(--bwe-akzent);
}

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

.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.
 */
.bw-events-marke {
    display: inline-block;
    font-size: 0.78rem;
    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: #fff;
    border: 1px solid var(--bwe-rahmen);
    color: var(--bwe-knopf-schrift);
    font-weight: 600;
}

.bw-events-marke--eng {
    background: #fdf3d8;
    color: #7a5b00;
}

.bw-events-marke--voll {
    background: #efe1e1;
    color: #8a2b2b;
}

/* ------------------------------------------------------------- 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.75rem;
    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-gastzeile .form-control-sm,
.bw-events-gastzeile .form-select-sm {
    font-size: 0.85rem;
    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;
    }

    .bw-events-punkt-marken {
        margin-top: 0;
        text-align: right;
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------- 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;
    font-size: .85em;
}

/* ------------------------------------------------------ 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: #fff;
    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 rgba(0, 0, 0, .06);
}

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

.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, #5b6470);
    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, #5b6470);
}

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

/* ------------------------------------------------ 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 #b08800;
    background: #fdf3d8;
    color: #7a5b00;
}

.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, #2d7dd2);
    background: #eef4fb;
}

.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: #eef7f0;
    border-left: 3px solid #1e7b45;
    border-radius: 0 6px 6px 0;
    color: #14532d;
}

.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: .85rem;
}

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