/* Hundeschule Wolfstein — Sonderstunden: Termine und Anmeldung
   Nur fuer service/kurse.php. Ergaenzt fragebogen.css.

   NEU AM 14.09.2026 — Umbau auf ein Formular fuer mehrere Termine. Die
   bisherigen Kurskarten und Reiter entfallen; das Formular nutzt jetzt die
   Bausteine aus fragebogen.css wie alle anderen Boegen. Hier steht nur,
   was es dort nicht gibt: die Terminliste, der Filter, die Auswahl-Leiste
   und der Ueberblick. Alle Farben kommen aus den Token von neu.css und
   funktionieren damit auch in der dunklen Ansicht. */

/* ── Filter ─────────────────────────────────────────────────── */
.ss-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.ss-filter:empty { display: none; }
.ss-chip {
    font-family: var(--font-body, inherit); font-size: .82rem; line-height: 1.3;
    padding: 5px 12px; border-radius: 20px; cursor: pointer;
    border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
}
.ss-chip:hover { border-color: var(--sage); color: var(--ink); }
.ss-chip.aktiv { background: var(--sage-dark); border-color: var(--sage-dark); color: #fff; }
.theme-dark .ss-chip.aktiv { color: #191b14; }

/* ── Terminliste ────────────────────────────────────────────── */
.ss-monat {
    font-family: var(--font-display, inherit); text-transform: uppercase; letter-spacing: .08em;
    font-size: .78rem; color: var(--sage-deep); margin: 18px 0 6px; max-width: none;
}
.theme-dark .ss-monat { color: var(--sage); }
.ss-monat:first-child { margin-top: 0; }
.ss-gruppe { display: grid; gap: 6px; }

/* ".formular label" aus neu.css setzt Beschriftungen in Versalien —
   hier sind es Auswahlzeilen, also Fliesstext (wie .optionen-liste). */
.formular .ss-termin {
    display: grid; grid-template-columns: 20px 8.5em 1fr auto; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
    font-family: var(--font-body, inherit); font-size: .95rem; color: var(--ink);
    text-transform: none; letter-spacing: normal; line-height: 1.4; cursor: pointer; margin: 0;
}
.formular .ss-termin:hover { border-color: var(--sage-line); }
.formular .ss-termin:has(input:checked) { border-color: var(--sage-dark); background: var(--sage-tint); }
.ss-termin input { width: 18px; height: 18px; margin: 0; accent-color: var(--sage-dark); cursor: pointer; }
.ss-wann strong { display: block; font-weight: 600; }
.ss-wann { color: var(--ink-soft); font-size: .88rem; }
.ss-wann strong { color: var(--ink); font-size: .95rem; }
.ss-was strong { font-weight: 500; }
.ss-was small { display: block; color: var(--ink-soft); font-size: .8rem; }
.ss-preis { font-family: var(--font-display, inherit); color: var(--sage-deep); white-space: nowrap; }
.theme-dark .ss-preis { color: var(--sage); }
.formular .ss-termin.voll { opacity: .6; cursor: not-allowed; }
.ss-voll {
    font-family: var(--font-body, inherit); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-soft); border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px;
}
@media (max-width: 560px) {
    .formular .ss-termin { grid-template-columns: 20px 1fr auto; }
    .ss-was { grid-column: 2 / 4; }
    .ss-preis { grid-row: 1; grid-column: 3; }
}

.ss-leise { color: var(--ink-soft); font-size: .88rem; }
.ss-unterkennung {
    font-family: var(--font-display, inherit); text-transform: uppercase; letter-spacing: .08em;
    font-size: .74rem; color: var(--ink-faint); margin: 14px 0 2px; padding-top: 10px;
    border-top: 1px solid var(--line); max-width: none;
}

/* ── Verbindlichkeit (nur bei Terminen sichtbar) ────────────── */
.ss-verbindlich { border-left: 3px solid var(--sage); padding: 2px 0 2px 14px; margin-bottom: 14px; }
.ss-verbindlich p { font-size: .9rem; color: var(--ink-soft); max-width: none; }
.ss-verbindlich p + p { margin-top: 8px; }

/* ── Überblick ──────────────────────────────────────────────── */
.ss-ueberblick-titel { margin-bottom: 4px; }
.ss-ueberblick { display: grid; gap: 8px; margin-top: 16px; }
.ss-karte { border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 0 16px; }
.ss-karte summary {
    cursor: pointer; padding: 12px 0; list-style: none;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.ss-karte summary::-webkit-details-marker { display: none; }
.ss-karte summary::before { content: "+"; color: var(--sage-dark); font-weight: 600; width: 1em; }
.ss-karte[open] summary::before { content: "–"; }
.ss-karte-name { font-family: var(--font-display, inherit); font-size: 1.05rem; color: var(--ink); }
.ss-karte-tag { font-size: .8rem; color: var(--ink-soft); }
.ss-karte p { font-size: .92rem; color: var(--ink-soft); margin: 0 0 12px 1.8em; }

/* ── Auswahl-Leiste ─────────────────────────────────────────── */
.ss-leiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--card); border-top: 1px solid var(--sage-line);
    box-shadow: 0 -4px 18px rgba(38, 41, 31, .12);
}
.ss-leiste[hidden] { display: none; }
.ss-leiste-innen { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.ss-leiste-innen span { font-family: var(--font-display, inherit); color: var(--ink); }
body:has(.ss-leiste:not([hidden])) .site-footer { padding-bottom: 80px; }

@media print { .ss-leiste, .ss-filter { display: none !important; } }

/* ── 17.09.2026 · Formular-Review, Etappe 2 ─────────────────────────
   Berührungsziele ab 44 px, Rahmen mit 3:1 (der Live-Server kennt
   --line-strong noch nicht, daher der Rückfallwert), Auswahl nicht nur über
   Farbe, sichtbarer Tastaturfokus. */
.ss-chip { min-height: 44px; padding: 8px 16px; font-size: .9rem; border-color: var(--line-strong, #8a8f7e); }
.ss-chip.aktiv { background: var(--sage-deep); border-color: var(--sage-deep); }   /* Weiß auf --sage-dark waren 3,9:1 */
.formular .ss-termin {
    grid-template-columns: 24px 8.5em 1fr auto; min-height: 56px;
    border-color: var(--line-strong, #8a8f7e); border-radius: 10px;
}
.ss-termin input { width: 22px; height: 22px; }
.formular .ss-termin:has(input:checked) { border-color: var(--sage-deep); box-shadow: inset 0 0 0 1px var(--sage-deep); }
.formular .ss-termin:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.formular .ss-termin:has(input:focus-visible) input { outline: none; box-shadow: none; }
.formular .ss-termin.voll { opacity: 1; background: var(--tint, var(--sage-tint)); border-style: dashed; color: var(--ink-faint); }
.formular .ss-termin.voll .ss-wann strong, .formular .ss-termin.voll .ss-preis { color: var(--ink-faint); }
@media (max-width: 560px) {
    .formular .ss-termin { grid-template-columns: 24px 1fr auto; }
}