/* =========================================================
   Seite /kurse/ – Intro mit Zahlenzeile, Filterleiste (haftet ab 1100 px),
   Kursliste nach Kategorien gruppiert (ein Bild je Gruppe, Kurse als kompakte Einträge),
   Rehasport-Hinweis-Band.
   Nur Tokens und Klassen aus theme.css; eigene Klassen mit Präfix .kurse-/.kurs-eintrag.
   Mobile-first, Breakpoints 600 / 900 / 1100.
   ========================================================= */

/* ---------- Intro: Text links, drei Zahlen rechts (ohne Karten) ---------- */
.kurse-intro-innen { display: grid; gap: 40px; }
.kurse-intro-text { max-width: 36rem; }
.kurse-intro-text h2 { margin-bottom: 0.4em; }
.kurse-intro-text p { margin: 0; color: var(--grau-text); }

/* Unter 600 px als kompakte Zeilen (Zahl rechtsbündig, Label daneben), ab 600 px als Zahlenzeile mit Trennlinien */
.kurse-fakten { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.kurse-fakt { display: grid; grid-template-columns: minmax(2.5ch, auto) 1fr; align-items: baseline; column-gap: 14px; margin: 0; }
.kurse-fakt-zahl { font-variant-numeric: tabular-nums; text-align: right; }
.kurse-fakt-text { font-size: var(--schrift-klein); color: var(--grau-text); line-height: 1.35; }

@media (min-width: 600px) {
	.kurse-fakten { display: flex; flex-wrap: wrap; gap: 24px 0; }
	.kurse-fakt { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 7.5rem; padding-right: 24px; }
	.kurse-fakt + .kurse-fakt { padding-left: 24px; border-left: 1px solid var(--grau-linie); }
	.kurse-fakt-zahl { text-align: left; }
}
@media (min-width: 900px) {
	.kurse-intro-innen { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 64px; }
	.kurse-fakten { justify-content: flex-end; }
	.kurse-fakt { flex: 0 1 auto; padding-right: 32px; }
	.kurse-fakt + .kurse-fakt { padding-left: 32px; }
	.kurse-fakt:last-child { padding-right: 0; }
}

/* ---------- Hero: Im Kurse-Motiv (erhobene Arme) liegen die Gesichter bei ≈ 22–40 % der Bildhöhe. Mobil zeigt object-fit: cover
   das 16:9-Bild in voller Höhe (668 px bei 390 px Breite), die Gesichter also bei 148–267 px – hinter der Karte, sobald sie vor
   270 px beginnt. Deshalb hier mehr Vorlauf als bei den anderen Heros; der kurze Hero-Satz (drei Zeilen) hält den Haupt-Button
   bei 390 × 664 trotzdem im ersten Bildschirm (Prüfrunde 2, Befunde 10 und 24). ---------- */
@media (max-width: 899.98px) {
	.kurse-hero .hero-innen { padding-top: clamp(200px, 30vh, 280px); }
	.kurse-hero .hero-medien img { object-position: 68% center; }
}
@media (max-width: 899.98px) and (max-height: 450px) {
	.kurse-hero .hero-innen { padding-top: 24px; }
}

/* ---------- Filterleiste ---------- */
.kurse-filterleiste { background: var(--weiss); border-bottom: 1px solid var(--grau-linie); padding: 12px 0; }
.kurse-filterleiste-innen { display: flex; flex-direction: column; gap: 12px; }
.kurse-filterleiste .kurs-filter { margin: 0; }
.kurse-filterleiste .kurs-filter-status { margin: 0; }
/* Ohne JavaScript bleiben die Kurse alle sichtbar; die wirkungslosen Knöpfe werden nicht angeboten. */
.kein-js .kurse-filterleiste .kurs-filter, .kein-js .kurse-filter-details { display: none; }

/* Unter 600 px stecken die zehn Pillen (vier Reihen, 260 px) in einem <details> „Kategorie wählen“ –
   theme.js schließt es dort und öffnet es ab 600 px; die Liste beginnt so direkt unter dem Sektionskopf. */
.kurse-filter-details > summary { list-style: none; }
.kurse-filter-details > summary::-webkit-details-marker { display: none; }
.kurse-filter-details > summary::marker { content: ''; }
.kurse-filter-zusammenfassung {
	display: inline-flex; align-items: center; gap: 10px; min-height: var(--ziel); padding: 6px 18px;
	border: 2px solid var(--grau-rand); border-radius: 999px; background: var(--weiss); color: var(--anthrazit);
	font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-klein); cursor: pointer;
}
.kurse-filter-zusammenfassung:hover { border-color: var(--anthrazit); }
.kurse-filter-zusammenfassung .icon { width: 20px; height: 20px; color: var(--orange-tief); transition: transform 0.2s ease; }
.kurse-filter-details[open] > .kurse-filter-zusammenfassung .icon { transform: rotate(180deg); }
.kurse-filter-details[open] > .kurse-filter-zusammenfassung { margin-bottom: 12px; }
@media (min-width: 600px) {
	.kurse-filter-details > summary { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.kurse-filter-zusammenfassung .icon { transition: none; }
}

@media (min-width: 900px) {
	/* 900–1099 px: zehn Pillen brauchen zwei Zeilen – kompakter und noch nicht haftend (sonst 200 px Kopf+Leiste fest) */
	.kurse-filterleiste .kurs-filter { gap: 6px; }
	.kurse-filterleiste .kurs-filter button { padding: 4px 12px; }
}
@media (min-width: 1100px) {
	.kurse-filterleiste { position: sticky; top: var(--kurse-kopf-hoehe, var(--kopf-hoehe)); z-index: 40; }
	.kurse-filterleiste-innen { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px 24px; }
	.kurse-filterleiste .kurs-filter button { padding: 6px 14px; }
	.kurse-filterleiste .kurs-filter-status { flex: none; white-space: nowrap; }
}

/* ---------- Gruppen: Bild + Kategorie links, Kurse rechts ---------- */
.kurse-liste { display: flex; flex-direction: column; }

.kurse-gruppe {
	--kurs-farbe: var(--grau-rand);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	padding: 32px 0 32px 16px;
	border-left: 4px solid var(--kurs-farbe);
	border-bottom: 1px solid var(--grau-linie);
	scroll-margin-top: 8px;
}
.kurse-gruppe[data-kategorie="yoga"]    { --kurs-farbe: var(--kat-yoga-text); }
.kurse-gruppe[data-kategorie="pilates"] { --kurs-farbe: var(--kat-pilates-text); }
.kurse-gruppe[data-kategorie="ruecken"] { --kurs-farbe: var(--kat-ruecken-text); }
.kurse-gruppe[data-kategorie="bauch"]   { --kurs-farbe: var(--kat-bauch-text); }
.kurse-gruppe[data-kategorie="kraft"]   { --kurs-farbe: var(--kat-kraft-text); }
.kurse-gruppe[data-kategorie="cycling"] { --kurs-farbe: var(--kat-cycling-text); }
.kurse-gruppe[data-kategorie="cardio"]  { --kurs-farbe: var(--kat-cardio-text); }
.kurse-gruppe[data-kategorie="tanz"]    { --kurs-farbe: var(--kat-tanz-text); }
.kurse-gruppe[data-kategorie="reha"]    { --kurs-farbe: var(--kat-reha-text); border-left-style: dashed; }

.kurse-gruppe-kopf { display: flex; flex-direction: column; gap: 16px; }
/* Mobil 16:9 (flacher als die alten 4:3-Bilder, die Seite wird deutlich kürzer), ab 900 px 4:3 in der Spalte */
.kurse-gruppe-medien { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--hellgrau); }
.kurse-gruppe-medien img { width: 100%; height: 100%; object-fit: cover; }
.kurse-gruppe-platzhalter { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--grau-text); font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-zwischen); }
.kurse-gruppe-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
/* Titel in Anthrazit wie alle Überschriften (Vertrag Abschnitt 3); die Kategorie-Farbe trägt nur der 4-px-Randbalken */
.kurse-gruppe-titel { margin: 0; font-size: var(--schrift-sektion); color: var(--anthrazit); }
.kurse-gruppe-zahl { margin: 0; font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-klein); color: var(--grau-text); }

/* ---------- Kurs-Einträge: kompakte Zeilen mit Trennlinien ---------- */
.kurse-gruppe-liste { display: flex; flex-direction: column; }
.kurs-eintrag {
	display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
	padding: 24px 0;
	border-top: 1px solid var(--grau-linie);
	scroll-margin-top: 8px; /* zusätzlich zum scroll-padding-top des Kopfes */
}
.kurs-eintrag:first-child { padding-top: 0; border-top: 0; }
.kurs-eintrag:last-child { padding-bottom: 0; }
/* Lange Kursnamen („Langhanteltraining“) dürfen bei 320 px und WCAG-Textabständen umbrechen statt überzulaufen */
.kurs-eintrag-titel { margin-bottom: 0.4em; max-width: 100%; font-size: var(--schrift-zwischen); hyphens: auto; overflow-wrap: anywhere; }

.kurs-eintrag-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 14px; font-size: var(--schrift-klein); color: var(--grau-text); }
.kurs-eintrag-meta-punkt { margin: 0; }
.kurs-eintrag-meta dd { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 24px; }
.kurs-eintrag-meta .icon { width: 20px; height: 20px; color: var(--orange); }

.kurs-eintrag-beschreibung { max-width: 62ch; }
.kurs-eintrag-beschreibung p:last-child { margin-bottom: 0; }

.kurs-eintrag-termine { margin-top: 18px; width: 100%; }
.kurs-termine-label { margin: 0 0 8px; font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-klein); color: var(--anthrazit); }
.kurs-termine { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.kurs-termin {
	display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px;
	min-height: 34px; margin: 0; padding: 5px 14px;
	border-radius: 999px; background: var(--hellgrau);
	font-size: var(--schrift-klein); line-height: 1.4; color: var(--anthrazit);
}
.kurs-termin-zeit { font-family: var(--schrift-titel); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kurs-termin-raum { color: var(--grau-text); white-space: nowrap; }
.kurs-termine-leer { margin: 0; color: var(--grau-text); font-size: var(--schrift-klein); }

.kurse-liste-fuss { margin: 32px 0 0; }

@media (min-width: 600px) {
	.kurse-gruppe { padding: 40px 0 40px 24px; gap: 32px; }
	.kurs-eintrag { padding: 28px 0; }
}
@media (min-width: 900px) {
	.kurse-gruppe {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: 48px;
		align-items: start;
		padding: 48px 0 48px 28px;
		/* Sprungziel unter Kopf und haftender Filterleiste (Höhe setzt das Seitenskript, nur wenn die Leiste haftet) */
		scroll-margin-top: calc(var(--kurse-filter-hoehe, 0px) + 8px);
	}
	.kurs-eintrag { scroll-margin-top: calc(var(--kurse-filter-hoehe, 0px) + 8px); }
	.kurse-gruppe-kopf { position: sticky; top: calc(var(--kurse-kopf-hoehe, var(--kopf-hoehe)) + var(--kurse-filter-hoehe, 0px) + 24px); }
	.kurse-gruppe-medien { aspect-ratio: 4 / 3; }
	.kurse-gruppe-text { flex-direction: column; align-items: flex-start; gap: 4px; }
	.kurse-liste-fuss { margin-top: 40px; }
}
@media (min-width: 1100px) {
	.kurse-gruppe { gap: 64px; }
}

/* ---------- Rehasport-Hinweis-Band (hellgrau, schmal) ---------- */
.kurse-reha-innen { display: flex; flex-direction: column; gap: 24px; }
.kurse-reha-text { max-width: 44rem; }
.kurse-reha-titel { font-size: var(--schrift-zwischen); margin-bottom: 0.4em; }
.kurse-reha-text p { margin: 0; color: var(--grau-text); }
.kurse-reha-aktion { flex: none; }

@media (min-width: 900px) {
	.kurse-reha-innen { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
}

/* ---------- Bewegung reduzieren / Druck ---------- */
@media (prefers-reduced-motion: reduce) {
	.kurse-gruppe-kopf { position: static; }
}
@media print {
	.kurse-filterleiste, .kurse-liste-fuss { display: none !important; }
	.kurse-gruppe { break-inside: avoid; grid-template-columns: 1fr 2fr; gap: 16px; padding: 12px 0 12px 12px; }
	.kurse-gruppe-kopf { position: static; }
	.kurs-eintrag { break-inside: avoid; }
	.kurs-termin { border: 1px solid #999; background: #fff; }
}