/* TGF.Termine — Vereins-Terminkalender (Ersatz DNN [*TermineListe*] + iCal.ashx).
   Liegt i.d.R. im Creme-Leseband: feste Leseband-Farben statt var(--text)/var(--muted). */

/* display:flow-root = eigener Block-Formatting-Context → die Terminliste läuft NICHT unter eine
   rechts gefloatete Box (Box-Pane „.topic-box"), sondern umfliesst sie und bleibt auf der daneben
   verfügbaren Spaltenbreite (gleiches Muster wie .tgf-bildbox / .tgf-table-flow im Theme). */
.tgf-termine { color: inherit; display: flow-root; }

/* ---------- Tabelle ---------- */
.tgf-termine-table {
    --bs-table-bg: transparent;
    margin-bottom: 1.5rem;
}
.tgf-termine-table thead th {
    border-bottom: 2px solid rgba(36, 27, 18, .18);
    font-weight: 600;
    color: #3d3125;
    white-space: nowrap;
}
.tgf-termine-table td {
    border-top: 1px solid rgba(36, 27, 18, .28);
    vertical-align: top;
    color: #3d3125;
}
/* Erste Spalte bündig zur linken Textkante (kein Bootstrap-Zellen-Padding links). */
.tgf-termine-table th:first-child,
.tgf-termine-table td:first-child { padding-left: 0; }

/* Anlass: roter Titel wie im alten Auftritt (.colored). */
.tgf-termine-titel {
    color: var(--red, #c90000);
    font-weight: 600;
}
.tgf-termine-beschreibung { margin-top: .15rem; }
.tgf-termine-beschreibung p:last-child { margin-bottom: 0; }

/* Zeit + eingeblendete Meta-Zeilen (Mobile/Tablet) etwas gedämpft. */
.tgf-termine-zeit { color: #6f5e4a; }
.tgf-termine-meta {
    margin-top: .2rem;
    color: #6f5e4a;
    font-size: .92rem;
}

/* Abgesagt: Zeile gedämpft, Titel durchgestrichen, roter Badge. */
.tgf-termine-abgesagt .tgf-termine-titel { text-decoration: line-through; }
.tgf-termine-abgesagt td { opacity: .75; }
.tgf-termine-badge {
    display: inline-block;
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--red, #c90000);
}

/* ---------- Download-Buttons (über der Liste) ---------- */
.tgf-termine-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0 0 1.4rem;
}
/* Eigene rote Outline statt Bootstraps btn-outline-secondary (dessen grauer Hover mit der roten
   Theme-Linkfarbe „matschig" wirkte). Default: rote Outline, roter Text/Icon; Hover/Fokus: gefüllt
   rot mit weissem Text. Zwei Klassen (.tgf-termine-downloads .btn) schlagen die Theme-a-Regeln. */
.tgf-termine-downloads .btn {
    border: 1px solid rgba(201, 0, 0, .45);
    background: transparent;
    color: var(--red, #c90000);
    font-weight: 600;
}
.tgf-termine-downloads .btn:hover,
.tgf-termine-downloads .btn:focus-visible {
    background: var(--red, #c90000);
    border-color: var(--red, #c90000);
    color: #fff;
}
.tgf-termine-downloads .btn i {
    margin-right: .4rem;
    color: inherit;   /* Icon folgt der Textfarbe (rot → weiss beim Hover) */
}

/* „Zum Kalender hinzufügen" je Zeile: kleiner, dezenter Link unter dem Anlass. */
.tgf-termine-add {
    display: inline-block;
    margin-top: .35rem;
    font-size: .8rem;
    color: #6f5e4a;
    text-decoration: none;
}
.tgf-termine-add:hover { color: var(--red, #c90000); text-decoration: underline; }
.tgf-termine-add i { margin-right: .3rem; }