/*
 * com_training -- Termin-Seite
 *
 * Alles haengt an der ID #training-event. Die Fenster fuer Anmeldung und
 * Notiz haengt UIkit beim Oeffnen an das Seitenende, also ausserhalb dieser
 * ID -- sie tragen deshalb die eigene Klasse .te-modal.
 *
 * Farben, Rahmen und Flaechen kommen aus den UIkit-Klassen. Hier steht keine
 * feste Farbe, kein font-weight und kein Schatten -- einzige Ausnahme sind
 * die Druckregeln fuer das Papier, siehe unten.
 */

/* ---------- Raster ---------- */

/*
 * Handy und Tablet: eine Spalte. Die rechte Spalte loest sich ueber
 * "display: contents" auf, ihre beiden Karten werden direkt Teil des Rasters
 * und lassen sich einzeln anordnen: Detailkarte und direkt darunter die
 * Teilnehmer, beide vor dem Inhalt. Gleiche order-Zahl heisst: Sie behalten
 * untereinander ihre Reihenfolge aus der Vorlage.
 */
#training-event .te-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

#training-event .te-seite {
    display: contents;
}

#training-event .te-details {
    order: -1;
}

#training-event .te-teilnehmer {
    order: -1;
}

/*
 * Desktop: zwei Spalten. Die rechte Spalte ist so hoch wie der Inhalt links,
 * die Detailkarte klebt darin beim Scrollen fest -- und bleibt am Ende des
 * zweispaltigen Bereichs stehen, statt ueber das zu gleiten, was darunter
 * folgt.
 */
@media (min-width: 960px) {
    #training-event .te-raster {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
        gap: 3rem;
    }

    #training-event .te-seite {
        display: block;
    }

    #training-event .te-details {
        position: sticky;
        top: 1.5rem;
        z-index: 1;
    }

    #training-event .te-teilnehmer {
        margin-top: 1.5rem;
    }
}

/* ---------- Bild und Beschreibung ---------- */

/* Handy: Bild ueber dem Text */
#training-event .te-bild {
    margin-bottom: 1.5rem;
}

/* Ab Tablet: Text fliesst um das Bild */
@media (min-width: 640px) {
    #training-event .te-bild {
        float: left;
        width: 45%;
        margin: .3rem 1.5rem 1rem 0;
    }
}

/* ---------- Detailkarte ---------- */

/* Symbol links, Text rechts daneben -- auch bei Umbruch sauber eingerueckt */
#training-event .te-angaben > li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

#training-event .te-angaben > li > [uk-icon] {
    flex: 0 0 auto;
    margin-top: .15rem;
}

/* Eigene Antwort: derselbe Abstand zwischen Symbol und Text wie oben */
#training-event .te-status {
    gap: .75rem;
}

/* Der Notiz-Knopf steht am rechten Rand derselben Zeile */
#training-event .te-notiz-knopf {
    margin-left: auto;
}

/* ---------- Karte und Routen ---------- */

#training-event .te-karte-rahmen {
    display: block;
    width: 100%;
    height: 22rem;
    border: 0;
}

@media (max-width: 639px) {
    #training-event .te-karte-rahmen {
        height: 17rem;
    }
}

/* Symbol und Beschriftung mit demselben Abstand wie in der Detailkarte */
#training-event .te-route {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

#training-event .te-route-symbol {
    flex: 0 0 auto;
}

/* ---------- Weitere Termine der Serie ---------- */

/*
 * Titel und Datum etwas kleiner als ein normaler kleiner Knopf (Vorgabe vom
 * 13.09.2026). Bewusst am inneren span und in Prozent: So bezieht sich die
 * Verkleinerung auf die Schriftgroesse, die das Theme fuer uk-button-small
 * vorgibt, egal wie gross die ist.
 */
#training-event .te-serie-termin > span {
    font-size: 90%;
}

/* ---------- Teilen ---------- */

#training-event .te-teilen {
    gap: .75rem;
}

/* ---------- Druckfassung ---------- */

/*
 * Das Bild darf auf dem Blatt nicht die ganze Seite fuellen.
 */
#training-print .te-druckbild {
    max-width: 50%;
}

/*
 * Beim Drucken: schwarze Schrift auf weissem Papier.
 *
 * Die einzige Stelle mit festen Farben, und das mit Absicht. Die Website ist
 * dunkel, ihre Schrift hell. Browser drucken Hintergruende standardmaessig
 * nicht mit -- ohne diese Regel kaeme hellgraue Schrift auf weissem Papier
 * heraus, kaum lesbar.
 */
@media print {
    #training-print,
    #training-print * {
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-color: #999 !important;
    }
}

/* ---------- Anwesenheitsliste ---------- */

/* Kurz gedimmt, solange ein Tipp gespeichert wird */
#training-attendance .ta-speichert {
    opacity: .5;
    transition: opacity .15s ease-in-out;
}

/*
 * Gesperrte Liste: Der gewaehlte Knopf traegt bewusst kein disabled -- UIkit
 * faerbt gesperrte Knoepfe alle gleich ein, die Auswahl waere nicht mehr zu
 * sehen. Klicks und Hover verhindert stattdessen diese Regel.
 */
#training-attendance[data-gesperrt] [data-feld] {
    pointer-events: none;
}

/* ---------- Fenster ---------- */

/* Spamschutz: fuer Menschen unsichtbar, fuer Maschinen ein normales Feld */
.te-modal .te-honig {
    position: absolute;
    left: -5000px;
}

/*
 * Datumsfeld (Geburtstag beim Probetraining): Das Kalender-Symbol zeichnet der
 * Browser selbst und nimmt ohne Hinweis die helle Vorgabe -- schwarz auf dem
 * dunklen Theme. color-scheme sagt dem Browser, dass das Feld dunkel ist
 * (MDN: "the default colors of form controls"). Keine feste Farbe.
 */
.te-modal input[type="date"] {
    color-scheme: dark;
}