/* Terminliste (templates/partials/owg_termine.html.twig): Vereinskalender und
   Kurse nach Tagen. Links je Tag ein Kalenderblatt (Tageszahl, Monat,
   Wochentag), rechts die Termine, eine Zeile je Termin: farbiger Punkt,
   Beginn, Titel; was nicht passt, endet mit "…".

   Auf der Startseite ist jede Zeile anklickbar (owg-termine--klickbar): ein
   Kurs ist ein Link, ein Vereinstermin klappt auf. Die ganze Zeile ist die
   Fläche zum Tippen, auf Touch-Geräten etwas höher. */

.owg-termine {
    --owg-termine-verein: #f4511e;
    --owg-termine-akzent: #b45400;
    --owg-termine-text: #1d1b19;
    --owg-termine-grau: #6b655f;
    --owg-termine-linie: rgba(60, 40, 20, 0.12);
    --owg-termine-hover: rgba(60, 40, 20, 0.06);
    text-align: left;
    font-size: 0.95em;
    line-height: 1.35;
    color: var(--owg-termine-text);
}

/* Ein Tag: Kalenderblatt links, Termine rechts. */
.owg-termine__tag {
    display: grid;
    grid-template-columns: 2.6em minmax(0, 1fr);
    column-gap: 0.9em;
    align-items: start;
    padding: 0.55em 0;
    border-top: 1px solid var(--owg-termine-linie);
}

.owg-termine__tag:first-child {
    border-top: 0;
    padding-top: 0.1em;
}

.owg-termine .owg-termine__blatt {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding-top: 0.1em;
    font-size: 1em;
    line-height: 1.05;
    text-align: center;
}

.owg-termine__nr {
    font-size: 1.45em;
    font-weight: 700;
}

.owg-termine__monat,
.owg-termine__wochentag {
    font-size: 0.68em;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--owg-termine-grau);
}

.owg-termine__tag--heute .owg-termine__nr,
.owg-termine__tag--heute .owg-termine__wochentag {
    color: var(--owg-termine-akzent);
}

/* Die Selektoren sind absichtlich so lang: Das Theme gestaltet jede Liste in
   .markdown (Einzug 30px, Zeilenhöhe 160 %, eigener Punkt, Abstand darunter),
   und das soll hier nicht greifen. */
.owg-termine .owg-termine__liste.owg-termine__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.owg-termine .owg-termine__liste > li.owg-termine__eintrag {
    margin: 0;
    padding: 0;
    line-height: 1.35;
    hyphens: manual;
}

.owg-termine .owg-termine__liste > li.owg-termine__eintrag::before {
    content: none;
}

/* Eine Zeile: Punkt, Beginn, Text. */
.owg-termine__zeile {
    display: flex;
    align-items: baseline;
    gap: 0.55em;
    padding: 0.18em 0.4em;
    margin: 0 -0.4em;
    border-radius: 0.4em;
    color: inherit;
    text-decoration: none;
}

/* Der Punkt in der Farbe der Quelle (owg.yaml: termine.kalender[].farbe),
   gesetzt als --owg-punkt am Eintrag. */
.owg-termine__zeile::before {
    content: "";
    flex: none;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--owg-punkt, var(--owg-termine-verein));
    transform: translateY(-0.08em);
}

.owg-termine__eintrag--abgesagt .owg-termine__zeile::before {
    opacity: 0.4;
}

/* Feste Breite, damit alle Titel in einer Flucht stehen. */
.owg-termine__zeit {
    flex: none;
    width: 3.4em;
    color: var(--owg-termine-grau);
    font-size: 0.92em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* "ganztags", "bis 13:00", "bis 12.12." - kleiner, damit es in die Spalte passt. */
.owg-termine__zeit--tag {
    font-size: 0.74em;
    width: calc(3.4em * 0.92 / 0.74);
    letter-spacing: 0.01em;
}

.owg-termine__text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.owg-termine__titel {
    font-weight: 600;
}

.owg-termine__ort {
    color: var(--owg-termine-grau);
}

.owg-termine__marke {
    display: inline-block;
    margin-left: 0.15em;
    padding: 0.05em 0.45em;
    border-radius: 1em;
    background: #f1ece6;
    color: #6b5d50;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: 0.1em;
}

.owg-termine__marke--abgesagt {
    margin: 0 0.15em 0 0;
    background: #f3e4e4;
    color: #9b1c1c;
}

.owg-termine__eintrag--abgesagt .owg-termine__titel {
    text-decoration: line-through;
    font-weight: 400;
}

/* --- anklickbar ----------------------------------------------------------- */

.owg-termine--klickbar .owg-termine__zeile {
    cursor: pointer;
}

@media (hover: hover) {
    .owg-termine--klickbar .owg-termine__zeile:hover {
        background: var(--owg-termine-hover);
    }
}

.owg-termine__details[open] > summary.owg-termine__zeile {
    background: var(--owg-termine-hover);
}

.owg-termine--klickbar .owg-termine__zeile:focus-visible {
    outline: 2px solid var(--owg-termine-verein);
    outline-offset: 1px;
}

.owg-termine summary.owg-termine__zeile {
    list-style: none;
}

.owg-termine summary.owg-termine__zeile::-webkit-details-marker {
    display: none;
}

/* custom.css macht jede aufgeklappte summary fett und gibt details Abstand;
   in der Liste bleibt die Zeile, wie sie war. */
.owg-termine .owg-termine__liste details.owg-termine__details[open] {
    padding: 0;
}

.owg-termine .owg-termine__liste details.owg-termine__details[open] > summary.owg-termine__zeile {
    font-weight: inherit;
}

/* Das Aufgeklappte, eingerückt unter den Titel. */
.owg-termine__mehr {
    margin: 0.2em 0 0.45em calc(0.5em + 0.55em + 3.4em * 0.92 / 0.9 + 0.55em);
    font-size: 0.9em;
    color: var(--owg-termine-grau);
}

.owg-termine__mehr p {
    margin: 0 0 0.25em;
}

/* Aufgeklappt bricht die Zeile um, statt den Titel mit "…" abzuschneiden. */
.owg-termine__details[open] > summary .owg-termine__text {
    white-space: normal;
    overflow: visible;
    hyphens: auto;
    overflow-wrap: anywhere;
}

.owg-termine__beschreibung {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Zwei Knöpfe: gefüllt die Anmeldung, mit Rahmen der Kalender (und "Mehr
   dazu"). Nebeneinander mit Abstand, auf dem Handy untereinander. */
.owg-termine .owg-termine__mehr .owg-termine__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin: 0.5em 0 0.2em;
}

.owg-termine.owg-termine .owg-termine__aktionen a {
    display: inline-block;
    padding: 0.4em 1em;
    border: 1px solid var(--owg-termine-verein);
    border-radius: 0.6em;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.owg-termine.owg-termine a.owg-termine__knopf {
    background: #fff;
    color: var(--owg-termine-akzent);
}

.owg-termine.owg-termine a.owg-termine__knopf:hover,
.owg-termine.owg-termine a.owg-termine__knopf:focus {
    background: #fff4ec;
    color: var(--owg-termine-akzent);
}

.owg-termine.owg-termine a.owg-termine__anmelden {
    background: var(--owg-termine-verein);
    color: #fff;
}

.owg-termine.owg-termine a.owg-termine__anmelden:hover,
.owg-termine.owg-termine a.owg-termine__anmelden:focus {
    color: #fff;
    filter: brightness(0.92);
}

/* Handy: beide Knöpfe über die ganze Breite und gut zu treffen. */
@media (max-width: 480px) {
    .owg-termine .owg-termine__mehr .owg-termine__aktionen {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5em;
    }

    .owg-termine.owg-termine .owg-termine__aktionen a {
        padding: 0.6em 0.8em;
        font-size: 0.92em;
    }
}

/* Finger statt Maus: höhere Zeilen, damit man die richtige trifft. */
@media (pointer: coarse) {
    .owg-termine--klickbar .owg-termine__zeile {
        min-height: 2.4em;
        align-items: center;
    }

    .owg-termine--klickbar .owg-termine__zeile::before {
        transform: none;
    }
}

/* Schmale Bildschirme: das Aufgeklappte nur leicht einrücken. */
@media (max-width: 480px) {
    .owg-termine__mehr {
        margin-left: calc(0.5em + 0.55em);
    }
}

.owg-termine__leer {
    color: var(--owg-termine-grau);
}

/* "Weitere Termine anzeigen": aufgeklappt verschwindet der Knopf, und die
   übrigen Tage schließen nahtlos an. */
.owg-termine .owg-termine__weitere,
.owg-termine .owg-termine__weitere[open] {
    margin: 0;
    padding: 0;                       /* hebt das Polster aus "details[open]" auf */
}

.owg-termine .owg-termine__weitere-knopf {
    display: block;
    margin: 0.5em 0 0.2em;
    padding: 0.5em 0.85em;
    border: 1px solid var(--owg-termine-linie);
    border-radius: 2em;
    background: #fff;
    color: var(--owg-termine-akzent);
    font-size: 0.92em;
    font-weight: 600;
    text-align: center;
    list-style: none;
    cursor: pointer;
}

.owg-termine .owg-termine__weitere-knopf::-webkit-details-marker {
    display: none;
}

.owg-termine .owg-termine__weitere[open] > .owg-termine__weitere-knopf {
    display: none;
}

@media (hover: hover) {
    .owg-termine .owg-termine__weitere-knopf:hover {
        background: var(--owg-termine-hover);
    }
}

.owg-termine .owg-termine__weitere-knopf:focus-visible {
    outline: 2px solid var(--owg-termine-verein);
    outline-offset: 2px;
}

/* Abonnieren: ein dezenter Knopf unter der Liste, aufgeklappt zwei Wege. */
.owg-termine .owg-termine__abo,
.owg-termine .owg-termine__abo[open] {
    margin: 0.6em 0 0;
    padding: 0.8em 0 0.9em;
    border-top: 1px solid var(--owg-termine-linie);
    font-size: 0.88em;
}

.owg-termine .owg-termine__abo-knopf,
.owg-termine .owg-termine__abo[open] > .owg-termine__abo-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.35em 0.85em;
    border: 1px solid var(--owg-termine-linie);
    border-radius: 2em;
    background: #fff;
    color: var(--owg-termine-text);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.owg-termine .owg-termine__abo-knopf::-webkit-details-marker {
    display: none;
}

/* Ein kleines Kalendersymbol aus CSS, ohne Schrift oder Grafik von außen. */
.owg-termine .owg-termine__abo-knopf::before {
    content: "";
    width: 0.85em;
    height: 0.8em;
    border: 2px solid currentColor;
    border-top-width: 4px;
    border-radius: 2px;
    box-sizing: border-box;
}

@media (hover: hover) {
    .owg-termine .owg-termine__abo-knopf:hover {
        background: var(--owg-termine-hover);
    }
}

.owg-termine .owg-termine__abo-knopf:focus-visible {
    outline: 2px solid var(--owg-termine-verein);
    outline-offset: 2px;
}

.owg-termine__abo-inhalt {
    display: grid;
    gap: 0.45em;
    margin-top: 0.7em;
}

.owg-termine.owg-termine a.owg-termine__abo-app {
    justify-self: start;
    padding: 0.4em 0.9em;
    border-radius: 2em;
    background: var(--owg-termine-verein);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.owg-termine.owg-termine a.owg-termine__abo-app:hover,
.owg-termine.owg-termine a.owg-termine__abo-app:focus {
    color: #fff;
    filter: brightness(0.92);
}

.owg-termine__abo-hinweis {
    margin: 0.2em 0 0;
    color: var(--owg-termine-grau);
    font-weight: 400;
}

.owg-termine .owg-termine__abo-adresse {
    width: 100%;
    padding: 0.4em 0.55em;
    border: 1px solid var(--owg-termine-linie);
    border-radius: 0.4em;
    background: #fff;
    color: var(--owg-termine-text);
    font: inherit;
    font-size: 0.95em;
}

/* Startseite und Kiosk am großen Bildschirm: begrenzte Höhe, der Rest
   scrollt. Auf dem Handy nicht - eine Scrollfläche in der
   scrollenden Seite ist mit dem Finger kaum zu bedienen. */
@media (min-width: 768px) {
    .owg-termine--kachel {
        max-height: 30em;
        overflow-y: auto;
    }
}

/* Kiosk 2: die Kachel schneidet unten ab, Farben vom Kiosk. */
.owg-termine--kiosk2 {
    --owg-termine-linie: var(--k2-line, #e6e0d8);
    --owg-termine-grau: var(--k2-muted, #5d5853);
    --owg-termine-akzent: var(--k2-accent-ink, #b45400);
}