/* =========================================================
   Seite /rehasport/ – Rehasport Orthopädie.
   Nur Tokens und Klassen aus theme.css plus eigene Klassen mit Präfix .rehasport-…
   Mobile-first, Breakpoints 600 / 900 / 1100.
   ========================================================= */

/* ---------- Aktueller Hinweis (direkt unter dem Hero) ---------- */
.rehasport-hinweis { padding-top: 24px; }
.rehasport-hinweis-box {
	display: flex; gap: 14px; align-items: flex-start;
	max-width: 48rem; padding: 20px 22px 20px 18px;
	background: var(--weiss); border-left: 6px solid var(--orange);
	border-radius: var(--radius); box-shadow: var(--schatten);
}
.rehasport-hinweis-box > .icon { width: 28px; height: 28px; flex: none; margin-top: 1px; color: var(--orange-tief); }
.rehasport-hinweis-titel { font-size: var(--schrift-zwischen); margin-bottom: 0.35em; }
.rehasport-hinweis-text > :last-child { margin-bottom: 0; }
.rehasport-hinweis-pause { font-weight: 700; }
@media (min-width: 600px) {
	.rehasport-hinweis { padding-top: 32px; }
	.rehasport-hinweis-box { gap: 18px; padding: 24px 28px 24px 22px; }
}

/* ---------- Ablauf: drei Schritte – Schritt-Komponente aus theme.css (.schritte/.schritt), wie auf /kontakt/ ---------- */
.rehasport-verordnung {
	display: flex; gap: 14px; align-items: flex-start;
	max-width: 44rem; margin-top: 40px; padding: 18px 22px;
	background: var(--hellgrau); border-radius: var(--radius);
}
.rehasport-verordnung > .icon { width: 26px; height: 26px; flex: none; margin-top: 2px; color: var(--orange-tief); }
.rehasport-verordnung-text p { margin: 0; }
.rehasport-verordnung-text p + p { margin-top: 0.5em; }

@media (min-width: 900px) {
	.rehasport-verordnung { margin-top: 56px; }
}

/* ---------- Teilnahme und Ziel: H2 links oben, zwei Textspalten ---------- */
.rehasport-teilnahme-raster { display: grid; gap: 32px; }
.rehasport-teilnahme-kopf { margin-bottom: 0; }
.rehasport-spalte { max-width: 36rem; }
.rehasport-spalte h3 { margin-bottom: 0.5em; }
.rehasport-spalte > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
	.rehasport-teilnahme-raster { grid-template-columns: 1fr 1fr; gap: 40px 56px; }
	.rehasport-teilnahme-kopf { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
	.rehasport-teilnahme-raster { grid-template-columns: 1fr 1fr 1fr; gap: 64px 56px; }
	.rehasport-teilnahme-kopf { grid-column: auto; }
}

/* ---------- Gruppen-Zeiten: Tabelle mit Pillen, daneben die Telefon-Karte ---------- */
.rehasport-gruppen-raster { display: grid; gap: 40px; align-items: start; }
.rehasport-gruppen { width: 100%; border-collapse: collapse; }
.rehasport-gruppen th, .rehasport-gruppen td { text-align: left; vertical-align: top; padding: 14px 0; border-bottom: 1px solid var(--grau-linie); }
.rehasport-gruppen thead th { padding-top: 0; font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-klein); color: var(--grau-text); }
.rehasport-gruppen tbody th { width: 9rem; padding-right: 16px; font-family: var(--schrift-titel); font-weight: 700; font-size: var(--schrift-fliess); line-height: 36px; }
.rehasport-zeiten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rehasport-zeit {
	display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;
	min-height: 36px; margin: 0; padding: 5px 14px;
	border-radius: 999px; background: var(--hellgrau);
	font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-klein); line-height: 1.3; color: var(--anthrazit);
}
.rehasport-zeit-uhr { white-space: nowrap; }
.rehasport-zeit-notiz { font-family: var(--schrift-text); font-weight: 600; color: var(--grau-text); }
.rehasport-gruppen-hinweis, .rehasport-gruppen-leer { margin: 20px 0 0; color: var(--grau-text); }

/* Unter 600 px: je Tag ein Block (Tag als Zwischenzeile, Pillen darunter); Rollen sichern die Tabellensemantik */
@media (max-width: 599px) {
	.rehasport-gruppen thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
	.rehasport-gruppen tr, .rehasport-gruppen th, .rehasport-gruppen td { display: block; width: auto; }
	.rehasport-gruppen tbody th { padding: 16px 0 8px; border-bottom: 0; line-height: 1.3; }
	.rehasport-gruppen tbody tr:first-child th { padding-top: 0; }
	.rehasport-gruppen td { padding: 0 0 16px; }
}

.rehasport-termin { display: flex; flex-direction: column; align-items: flex-start; }
.rehasport-termin-titel { margin-bottom: 0.4em; }
.rehasport-termin-text { color: var(--grau-text); }
.rehasport-telefon {
	display: inline-flex; align-items: center; min-height: var(--ziel); margin: 0 0 4px;
	font-family: var(--schrift-titel); font-weight: 700; font-size: var(--schrift-zwischen); line-height: 1.15; letter-spacing: -0.02em;
	color: var(--anthrazit); text-decoration: none;
}
.rehasport-telefon:hover { color: var(--orange-dunkel); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
.rehasport-termin-hinweis { display: flex; gap: 8px; align-items: center; margin-bottom: 24px; font-size: var(--schrift-klein); color: var(--grau-text); }
.rehasport-termin-hinweis .icon { width: 20px; height: 20px; flex: none; color: var(--orange); }
.rehasport-termin .button { width: 100%; }
@media (min-width: 360px) {
	.rehasport-telefon { font-size: var(--schrift-sektion); }
}
@media (min-width: 900px) {
	/* 900–1099 px: Karte etwas breiter, damit die Telefonnummer (40 px ≈ 274 px) nicht umbricht */
	.rehasport-gruppen-raster { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; }
}
@media (min-width: 1100px) {
	.rehasport-gruppen-raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; }
}

/* ---------- Bildband: volle Breite, ruhige Zäsur, nur ab 600 px ---------- */
.rehasport-bildband { display: none; }
@media (min-width: 600px) {
	.rehasport-bildband { display: block; height: 40vh; min-height: 280px; max-height: 560px; overflow: hidden; background: var(--hellgrau); }
	.rehasport-bildband img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
}

/* ---------- FAQ (<details>) ---------- */
.rehasport-faq { display: grid; gap: 12px; max-width: 48rem; margin-inline: auto; }
.rehasport-faq-eintrag { background: var(--weiss); border-radius: var(--radius); }
.rehasport-faq-frage {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-height: 60px; padding: 14px 20px;
	list-style: none; cursor: pointer;
	font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-fliess); line-height: 1.3; color: var(--anthrazit);
	border-radius: var(--radius);
}
.rehasport-faq-frage::-webkit-details-marker { display: none; }
.rehasport-faq-frage::marker { content: ''; }
.rehasport-faq-frage .icon { width: 24px; height: 24px; flex: none; color: var(--orange-tief); transition: transform 0.2s ease; }
.rehasport-faq-frage:hover { color: var(--orange-dunkel); }
.rehasport-faq-frage:focus-visible { border-radius: var(--radius); }
.rehasport-faq-eintrag[open] .rehasport-faq-frage .icon { transform: rotate(180deg); }
.rehasport-faq-antwort { padding: 0 20px 20px; max-width: 62ch; }
.rehasport-faq-antwort > :last-child { margin-bottom: 0; }
@media (min-width: 600px) {
	.rehasport-faq-frage { padding: 16px 24px; }
	.rehasport-faq-antwort { padding: 0 24px 24px; }
}

/* ---------- Druck ---------- */
@media print {
	.rehasport-hinweis-box, .rehasport-termin, .rehasport-faq-eintrag { box-shadow: none; border: 1px solid #999; }
	.rehasport-bildband { display: none; }
	.rehasport-zeit { border: 1px solid #999; }
}