/*
 * termine.css — Anzeige der Kurstermine (Phase 0.58d)
 *
 * Gilt fuer: Kurs-Detailseite (Karte "Kursinformationen", Tabelle "Termine",
 * Seitenleiste "Aktuelle Termine") und das Kursuebersicht-Akkordeon
 * (include_kurstermine.php). Markup kommt aus TI\Admin\TerminAnzeige.
 *
 *  - Terminart (Vormittags · Vollzeit · Praesenz) klein unter dem Zeitraum
 *  - "Naechster Start" als dezentes, getoentes Etikett — nie nur Farbe, immer mit Text
 *  - Akzentfarbe aus --color-primary; Schrift in dunklerem Tuerkis fuer genug Kontrast
 */

.ti-termin-datum { white-space: nowrap; }
.ti-termin-art {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--color-body);
}
.ti-termin-laeuft { white-space: nowrap; }

/* Etikett "Naechster Start" — steht am Anfang der zweiten Zeile, bricht so nicht um */
.ti-termin-label {
    display: inline-block;
    margin: 0 8px 4px 0;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.75;
    font-weight: 500;
    white-space: nowrap;
    vertical-align: 1px;
    color: #0f7d6b;
    background: rgba(26, 182, 157, 0.13);
}

/* Ersatzanzeige "Auf Anfrage" / "Regelmaessiger Start" */
.ti-termin-ersatz strong { font-weight: 600; }

/* --- Tabellen der Kursseite: Standort oben am ersten Termin ausrichten ------------ */
.ti-termine-tabelle td.ti-termin-standort { vertical-align: top; }
.ti-termine-tabelle td.ti-termin { vertical-align: top; }

/* --- Karte "Kursinformationen" ------------------------------------------------------
 * Die Termine stehen dort ohne Trennlinien untereinander. Damit eindeutig ist, wozu ein
 * Hinweis gehoert: jeder Termin ist eine Gruppe mit Abstand zur naechsten, und der
 * naechste Start steht zusammen mit seinem Hinweis in EINEM getoenten Kasten. */
.course-item .ti-termin { display: block; margin-bottom: 9px; line-height: 1.45; }
.course-item .ti-termin:last-child { margin-bottom: 0; }
.course-item .ti-termin .ti-termin-laeuft { display: block; }
.course-item .ti-termin.ti-naechster {
    display: table;
    margin-left: auto;
    padding: 5px 10px 6px;
    border-radius: 8px;
    text-align: right;
    background: rgba(26, 182, 157, 0.11);
}
.course-item .ti-naechster .ti-termin-label {
    display: block;
    margin: 1px 0 0;
    padding: 0;
    background: none;
    border-radius: 0;
    line-height: 1.4;
}

/* --- Kursuebersicht-Akkordeon -------------------------------------------------------
 * Die Tabelle nutzt die Warenkorb-Tabelle des Templates (.cart-table). Unter 768 px
 * reserviert das Template links Platz fuer ein Produktbild und setzt vor jede Zelle
 * "data-title :" — bei uns leere Doppelpunkte und ein englisches "date :" ueber den
 * Terminen. Hier zur lesbaren Terminliste umgebaut. */
.ti-kurstermine .ti-termin + .ti-termin { margin-top: 2px; }

@media only screen and (max-width: 767px) {
    .ti-kurstermine.cart-table tbody tr { padding-left: 0; }
    .ti-kurstermine.cart-table tbody td { text-align: left; padding: 6px 0; min-width: 0; }
    .ti-kurstermine.cart-table tbody td:before { content: none; }
    .ti-kurstermine.cart-table tbody td.ti-kt-stadt { font-weight: 600; padding-top: 14px; }
    .ti-kurstermine.cart-table tbody td.ti-kt-land { font-size: 14px; color: var(--color-body); padding-top: 0; }
    .ti-kurstermine.cart-table tbody td.product-date { padding-bottom: 12px; }
    /* Knopf "ansehen": mittig, breiter, groesser */
    .ti-kurstermine.cart-table tbody td.ti-kt-knopf { text-align: center; padding: 6px 0 16px; }
    .ti-kurstermine.cart-table tbody td.ti-kt-knopf .edu-btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 320px;
        height: auto;
        padding: 14px 24px;
        font-size: 17px;
        line-height: 1.3;
    }
}