/* ===========================================================================
   viceversa.swiss (Neubau) · Kursprogramm (09.10.2026)
   Nur auf den Kursseiten geladen (vv_kopf, $zusatz_css). Markup: _lib/kurse.php.
   Termine als Zeilen mit Datum, Kurs, freien Plätzen und Knopf — Aufbau nach
   speak.ch, Formen aus dem Haus (Nebenschrift, Hausrot, rote Pille).
   =========================================================================== */
.vv-kurse-liste { padding-block: clamp(28px, 4vw, 48px) clamp(64px, 8vw, 110px); display: grid; gap: 22px; }
.vv-kurse-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.vv-kurse-filter a { font-size: 14px; font-weight: 600; line-height: 1; padding: 9px 14px; border-radius: 20px;
  text-decoration: none; color: var(--vv-text); border: 1px solid color-mix(in srgb, var(--vv-feld) 70%, var(--vv-grund));
  background: color-mix(in srgb, var(--vv-weiss) 55%, var(--vv-grund)); }
.vv-kurse-filter a:hover { border-color: var(--vv-text); }
.vv-kurse-filter a.vv-hier { background: var(--vv-text); color: var(--vv-grund); border-color: var(--vv-text); }

.vv-kurs-zeilen { border-top: 1px solid var(--vv-feld); }
.vv-kurs-zeile { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 22px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--vv-feld); }
.vv-kurs-abgesagt { opacity: .6; }
.vv-kurs-tag { display: grid; gap: 4px; }
.vv-kurs-tag b { font-family: var(--vv-schrift-titel); font-weight: 400; font-size: 40px; line-height: 1;
  color: var(--vv-rot); font-variant-numeric: lining-nums; }
.vv-kurs-tag span { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.vv-kurs-was { display: grid; gap: 6px; min-width: 0; }
.vv-kurs-raum { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vv-rot); }
.vv-kurs-was h3 { margin: 0; font-family: var(--vv-schrift-neben); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
.vv-kurs-was h3 a { color: inherit; text-decoration: none; }
.vv-kurs-was h3 a:hover { color: var(--vv-rot); }
.vv-kurs-meta { font-size: var(--vv-angabe); line-height: 1.5; }
.vv-kurs-platz { display: grid; justify-items: end; gap: 10px; text-align: right; }
.vv-kurs-frei { font-size: 15px; font-weight: 600; }
.vv-kurs-frei.vv-knapp { color: var(--vv-rot); }
.vv-kurs-frei.vv-voll { opacity: .7; }
.vv-kurs-knopf { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 26px;
  background: var(--vv-rot); color: var(--vv-grund); font-size: 15px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; border: 1px solid var(--vv-rot); }
.vv-kurs-knopf:hover { background: var(--vv-rot-dunkel); border-color: var(--vv-rot-dunkel); }
.vv-kurs-knopf i { font-style: normal; }
.vv-kurs-knopf-leer { background: transparent; color: var(--vv-text); border-color: var(--vv-text); }
.vv-kurs-knopf-leer:hover { background: var(--vv-text); color: var(--vv-grund); border-color: var(--vv-text); }

.vv-kurse-leer { display: grid; gap: 14px; justify-items: start; padding-block: 20px; }
.vv-kurse-leer h2 { margin: 0; }

/* Kursseite: Haupttext links, Fakten rechts. */
.vv-kurs-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 64px);
  align-items: start; padding-block: clamp(36px, 5vw, 64px) clamp(64px, 8vw, 110px); }
.vv-kurs-haupt { display: grid; gap: 16px; min-width: 0; }
.vv-kurs-haupt h3 { margin: 22px 0 0; font-family: var(--vv-schrift-neben); font-weight: 500; font-size: clamp(22px, 2vw, 26px); }
.vv-kurs-kern { margin: 0; padding-left: 20px; border-left: 3px solid var(--vv-rot);
  font-family: var(--vv-schrift-neben); font-style: italic; font-weight: 500; font-size: clamp(21px, 2vw, 25px); line-height: 1.42; }
.vv-kurs-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vv-kurs-punkte li { position: relative; padding-left: 24px; font-size: var(--vv-klein); line-height: 1.55; }
.vv-kurs-punkte li::before { content: "—"; position: absolute; left: 0; color: var(--vv-rot); }
.vv-kurs-zurueck { margin: 18px 0 0; }
.vv-kurs-zurueck a { color: var(--vv-rot); text-decoration: none; font-weight: 600; font-size: var(--vv-klein); }
.vv-kurs-zurueck i { font-style: normal; }
.vv-kurs-fakten { position: sticky; top: 100px; display: grid; gap: 16px; padding: 24px 26px;
  background: color-mix(in srgb, var(--vv-weiss) 55%, var(--vv-grund));
  border: 1px solid color-mix(in srgb, var(--vv-feld) 55%, var(--vv-grund)); border-left: 3px solid var(--vv-rot); border-radius: 3px; }
.vv-kurs-fakten div { display: grid; gap: 3px; }
.vv-kurs-fakten span { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.vv-kurs-fakten b { font-family: var(--vv-schrift-neben); font-weight: 500; font-size: 20px; line-height: 1.3; }
.vv-kurs-fakten small { font-size: 14px; line-height: 1.4; }

@media (max-width: 860px) {
  .vv-kurs-zeile { grid-template-columns: 76px minmax(0, 1fr); row-gap: 14px; }
  .vv-kurs-platz { grid-column: 2; justify-items: start; text-align: left; }
  .vv-kurs-tag b { font-size: 32px; }
  .vv-kurs-detail { grid-template-columns: minmax(0, 1fr); }
  .vv-kurs-fakten { position: static; }
}
.vv-kurs-knopf-breit { justify-content: center; width: 100%; padding-block: 14px; font-size: 16px; }
#termine { scroll-margin-top: 110px; }
.vv-kurs-bed { margin: 0; font-size: 14px; }
.vv-kurs-bed a { color: var(--vv-rot); }