/* =========================================================
   Startseite (front-page.php)
   Nur Tokens und Klassen aus theme.css plus eigene Klassen mit Präfix .start-.
   Mobile-first, Breakpoints 600 / 900 / 1100.
   ========================================================= */

/* ---------- Hero mit Video ---------- */
/* Unter 900 px stehen Kicker, Titel, Video, Text und Buttons untereinander (theme.css). Ab 900 px laeuft das
   Video randlos ueber die volle Breite und die Karte liegt darauf – dafuer traegt der Hero `hero--breit`
   (front-page.php). Hoehe laut Auftrag min(78vh, 720px). */
@media (min-width: 900px) {
	.start-hero .hero-innen { min-height: min(78vh, 720px); }
}

/* Kein weisser Streifen zwischen Video und Aktionsband: Hero ohne Unter-Aussenabstand, das graue Band
   beginnt direkt am Video; die Karte ragt 56 px hinein, das Padding-top des Bandes gleicht das aus. */
.seite-start .hero { margin-bottom: 0; }
@media (min-width: 900px) {
	.seite-start .hero + .aktion-band { padding-top: calc(var(--band) + 48px); }
}

/* ---------- Leere Bildfläche (Bild fehlt noch) ---------- */
.start-bild-leer { width: 100%; min-height: 240px; background: var(--hellgrau); border-radius: var(--radius); }

/* ---------- Vorteile: Text links, Bild rechts mit Anschnitt bis zum Seitenrand ---------- */
.start-vorteile-innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-inline: var(--rand); }
.start-vorteile-bild { order: -1; }
.start-vorteile-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--hellgrau); }
.start-vorteile-text > h2 { margin-bottom: 0.8em; max-width: 18ch; }
.start-vorteile-liste { margin-bottom: 0; }
.start-vorteile-liste li { padding-left: 32px; margin-bottom: 1.1em; }
.start-vorteile-liste li:last-child { margin-bottom: 0; }
.start-vorteile-liste li::before { top: 0.3em; }
.start-vorteile-liste strong { display: block; margin-bottom: 4px; font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-fliess); line-height: var(--zeile-titel); }
.start-vorteile-liste span { display: block; color: var(--grau-text); max-width: 34rem; }
@media (min-width: 900px) {
	/* Vier Spalten: Seitenrand | Container-Hälfte | Container-Hälfte | Seitenrand – das Bild läuft bis zum rechten Rand. */
	.start-vorteile-innen {
		grid-template-columns: minmax(var(--rand), 1fr) minmax(0, calc(var(--container) / 2)) minmax(0, calc(var(--container) / 2)) minmax(var(--rand), 1fr);
		gap: 0; padding-inline: 0; align-items: center;
	}
	.start-vorteile-text { grid-column: 2; padding-right: 64px; }
	.start-vorteile-bild { grid-column: 3 / 5; order: 0; align-self: stretch; }
	.start-vorteile-bild img, .start-vorteile-bild .start-bild-leer { height: 100%; min-height: 520px; max-height: 760px; aspect-ratio: auto; border-radius: var(--radius) 0 0 var(--radius); }
}
@media (min-width: 1100px) {
	.start-vorteile-text { padding-right: 96px; }
}

/* ---------- Kurse: zweispaltiger Kopf, vier Karten ---------- */
.start-kurse-intro p { color: var(--grau-text); margin-bottom: 20px; }
.start-kurse-intro > :last-child { margin-bottom: 0; }
.start-kurse-raster { grid-template-columns: 1fr; }
@media (min-width: 600px) {
	.start-kurse-raster { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	/* Rechts steht Text plus Button – deshalb oben ausrichten, sonst rutscht die H2 weit unter den Kicker. */
	.start-kurse .sektion-kopf--zwei { align-items: start; }
	.start-kurse-intro { max-width: 34rem; justify-self: end; }
}
@media (min-width: 1100px) {
	.start-kurse-raster { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Rehasport: Bildband volle Breite, weiße Karte rechts ---------- */
.start-reha { position: relative; isolation: isolate; background: var(--hellgrau); }
/* Unter 900 px eigener Bildblock mit Rand (kein randloses Band unter der Karte) */
.start-reha-medien {
	width: 100%; max-width: calc(var(--container) + 2 * var(--rand));
	margin-inline: auto; padding: var(--sektion) var(--rand) 0;
	background: none;
}
.start-reha-medien img {
	width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 25%;
	border-radius: var(--radius); background: var(--hellgrau);
}
.start-reha-innen { position: relative; padding-block: 24px var(--sektion); }
.start-reha-karte { max-width: 36rem; padding: 28px; background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); }
.start-reha-karte > :last-child { margin-bottom: 0; }
.start-reha-karte h2 { margin-bottom: 0.5em; }
.start-reha-text { color: var(--grau-text); }
.start-reha-punkte { margin-bottom: 0; }
.start-reha-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 24px; }
.start-reha--leer .start-reha-medien { display: none; }
.start-reha--leer .start-reha-innen { padding-top: var(--sektion); }
/* Ab 900 px gespiegelt zum Hero: Foto links bis zum Bildschirmrand, Karte rechts daneben. Randlos hinter
   der Karte verschwanden die beiden Frauen darunter, und ueber die volle Breite laesst sich das Motiv
   waagerecht nicht verschieben (siehe .hero in theme.css). */
@media (min-width: 900px) {
	.start-reha {
		display: grid; align-items: center;
		grid-template-columns:
			minmax(var(--rand), 1fr)
			minmax(0, calc(var(--container) / 2))
			minmax(0, calc(var(--container) / 2))
			minmax(var(--rand), 1fr);
	}
	.start-reha-medien {
		grid-column: 1 / 3; grid-row: 1;
		align-self: stretch; min-height: min(58vh, 520px);
		max-width: none; margin: 0; padding: 0;
	}
	.start-reha-medien img { height: 100%; aspect-ratio: auto; border-radius: 0 var(--radius) var(--radius) 0; }
	.start-reha-innen { grid-column: 3; grid-row: 1; display: block; max-width: none; padding: 72px 0 72px 64px; }
	.start-reha-karte { max-width: none; padding: 0; background: none; box-shadow: none; }
}

/* ---------- Wellness und Beratung: zwei Reihen im Wechsel, quadratische Bilder ---------- */
.start-reihe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.start-reihe + .start-reihe { margin-top: 64px; }
.start-reihe-bild img, .start-reihe-bild .start-bild-leer { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); background: var(--hellgrau); }
.start-reihe-text { max-width: 36rem; }
.start-reihe-text > :last-child { margin-bottom: 0; }
.start-reihe-titel { font-size: var(--schrift-sektion); margin-bottom: 0.6em; }
@media (min-width: 900px) {
	.start-reihe { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
	.start-reihe + .start-reihe { margin-top: 96px; }
	/* width: 100 % + margin-left: auto statt justify-self: end – so behält die Bildspalte ihre Breite (und über
	   aspect-ratio ihre Höhe), bevor das lazy geladene Bild da ist; kein Layout-Sprung von 66 px (Prüfrunde 2, Befund 15) */
	.start-reihe-bild { width: 100%; max-width: 520px; }
	.start-reihe--umgekehrt .start-reihe-bild { order: 2; margin-left: auto; }
	.start-reihe-text { padding-block: 24px; }
}
@media (min-width: 1100px) {
	.start-reihe { gap: 96px; }
}

/* ---------- Preise-Teaser: zwei große Zahlenkarten ---------- */
.start-preis-karten { margin-bottom: 0; }
.start-preis-karte { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 28px; border: 1px solid var(--grau-linie); }
.start-preis-name { margin-bottom: 14px; }
.start-preis-zahl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin: 0 0 10px; font-family: var(--schrift-titel); font-weight: 800; font-size: var(--schrift-h1); line-height: 1; letter-spacing: -0.02em; color: var(--orange); /* 3,7:1 auf Weiß – große Schrift ≥ 44 px */ }
.start-preis-praefix { font-size: var(--schrift-zwischen); font-weight: 700; color: var(--anthrazit); letter-spacing: 0; }
.start-preis-text { color: var(--grau-text); margin: 0; }
.start-preise-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 32px; }
.start-preise-fuss p { margin: 0; }
@media (min-width: 900px) {
	.start-preis-karte { padding: 40px; }
	.start-preise-fuss { margin-top: 40px; }
}

/* ---------- Öffnungszeiten (Karte) | kurzer Kontakt-Verweis ----------
   Adresse, E-Mail und Routenlink stehen nur im Fuß (≈ 1 000 px tiefer) – hier nur Zeiten, Telefon und der
   Verweis auf Kontakt und Anfahrt (Prüfrunde 2, Befund 14). */
.start-zeiten-innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.start-zeiten-karte { padding: 24px 20px; }
.start-zeiten-karte .zeiten { max-width: none; }
.start-kontakt-satz { max-width: 24rem; margin: 0 0 20px; font-family: var(--schrift-titel); font-weight: 700; font-size: var(--schrift-zwischen); line-height: var(--zeile-titel); letter-spacing: -0.01em; }
.start-kontakt-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
@media (min-width: 600px) {
	.start-zeiten-karte { padding: 36px 40px; }
}
@media (min-width: 900px) {
	.start-zeiten-innen { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px 80px; }
	.start-kontakt { padding-left: 8px; }
}

/* ---------- FAQ: Kopf links (haftet beim Scrollen), natives Akkordeon rechts ---------- */
.start-faq-innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.start-faq-kopf p:not(.kicker) { color: var(--grau-text); max-width: 30rem; }
.start-faq-eintrag { background: var(--weiss); border-radius: var(--radius); }
.start-faq-eintrag + .start-faq-eintrag { margin-top: 12px; }
.start-faq-eintrag summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-height: var(--ziel); padding: 18px 22px; border-radius: var(--radius);
	list-style: none; cursor: pointer;
	font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-fliess); line-height: var(--zeile-titel); color: var(--anthrazit);
}
.start-faq-eintrag summary::-webkit-details-marker { display: none; }
.start-faq-eintrag summary::marker { content: ''; }
.start-faq-eintrag summary:hover { color: var(--orange-dunkel); }
/* Fokusring nach innen, sonst überdeckt er bei geöffnetem Eintrag die erste Antwortzeile (Anthrazit auf Weiß 15,8:1). */
.start-faq-eintrag summary:focus-visible { outline-offset: -4px; box-shadow: none; }
.start-faq-eintrag summary .icon { width: 24px; height: 24px; flex: none; color: var(--orange-tief); transition: transform 0.2s ease; }
.start-faq-eintrag[open] summary .icon { transform: rotate(180deg); }
.start-faq-eintrag[open] summary { padding-bottom: 12px; }
.start-faq-antwort { padding: 0 22px 22px; }
.start-faq-antwort > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
	.start-faq-innen { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 64px; align-items: start; }
	.start-faq-kopf { position: sticky; top: calc(var(--kopf-hoehe) + 32px); }
	.start-faq-eintrag summary { padding: 20px 28px; }
	.start-faq-antwort { padding: 0 28px 24px; max-width: 60ch; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
	.start-faq-eintrag summary .icon { transition: none; }
}