/* =========================================================
   Theme VIVA – Fitness für Frauen (Mannheim)
   Grundlage: Tokens, Basis, Kopf, Fuß, Buttons, Komponenten.
   Seiten-CSS liegt in assets/css/seiten/<slug>.css, Kursplan/Aktion in bausteine.css.
   Schriften: Outfit (Titel, Buttons, Zahlen) und Manrope (Fließtext), beide lokal.
   Alle Kontraste sind gemessen (WCAG-Formel), siehe doku/ARCHITEKTUR.md Abschnitt 3.
   ========================================================= */

/* ---------- Schriften ---------- */
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/outfit-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/manrope-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens (Vertrag Abschnitt 3) ---------- */
:root {
	/* Farben */
	--weiss: #FFFFFF;
	--hellgrau: #F3F4F6;
	--grau-linie: #D9DCE1;      /* 1,4:1 – nur dekorativ */
	--grau-rand: #8B94A0;       /* 3,1:1 – Ränder von Bedienelementen (Formularfelder) */
	--grau-text: #5B6470;       /* 6,0:1 auf Weiß, 5,5:1 auf Hellgrau */
	--anthrazit: #1F2328;       /* 15,8:1 auf Weiß */
	--schwarz: #111315;
	--orange: #E9501F;          /* 3,7:1 – nur große Schrift ≥ 24 px und Grafik */
	--orange-tief: #C8420F;     /* 4,95:1 auf Weiß, 4,5:1 auf Hellgrau – Buttons, Links, Kicker-Text */
	--orange-dunkel: #A8360A;   /* 6,6:1 – Hover/Active */
	--fehler: #B42318;          /* 6,6:1 auf Weiß, 5,8:1 auf der Fehlerfläche */
	--fehler-flaeche: #FDECEC;
	--erfolg: #1C5A34;          /* 7,2:1 auf der Erfolgsfläche */
	--erfolg-flaeche: #E6F3EA;
	--fokus: var(--anthrazit);

	/* Kategorien: Fläche (Pille/Legende) + dunkle Schrift, jede ≥ 6,5:1 gemessen.
	   --kat-*-text dient dem Kursplan zugleich als Farbleiste (≥ 7:1 auf Weiß). */
	--kat-yoga-flaeche: #E4EEFB;    --kat-yoga-text: #1E4A86;    /* 7,5:1 */
	--kat-pilates-flaeche: #E6F3EA; --kat-pilates-text: #1C5A34; /* 7,2:1 */
	--kat-ruecken-flaeche: #EAF4F5; --kat-ruecken-text: #0F5560; /* 7,5:1 */
	--kat-bauch-flaeche: #FDEFE4;   --kat-bauch-text: #8A3E0A;   /* 6,7:1 */
	--kat-kraft-flaeche: #EDEBFA;   --kat-kraft-text: #3F3390;   /* 8,6:1 */
	--kat-cycling-flaeche: #FDEBEB; --kat-cycling-text: #8E2727; /* 7,4:1 */
	--kat-cardio-flaeche: #FFF3D6;  --kat-cardio-text: #7A4D00;  /* 6,6:1 */
	--kat-tanz-flaeche: #F9E8F3;    --kat-tanz-text: #7E2662;    /* 7,6:1 */
	--kat-reha-flaeche: #ECEDF0;    --kat-reha-text: #1F2328;    /* 13,5:1 */

	/* Schriften */
	--schrift-titel: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--schrift-text: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* Genau fünf Schriftgrößen */
	--schrift-klein: 15px;
	--schrift-fliess: 16px;
	--schrift-zwischen: 22px;
	--schrift-sektion: clamp(26px, 1.6vw + 18px, 32px);
	--schrift-h1: clamp(34px, 2.4vw + 22px, 50px);
	--zeile-text: 1.55;
	--zeile-titel: 1.25;
	--zeile-h1: 1.1;

	/* Raster und Abstände */
	--container: 1200px;
	--rand: 20px;
	--sektion: 64px;
	--band: 72px;
	--radius: 12px;
	--radius-button: 8px;
	--schatten: 0 8px 24px rgba(31, 35, 40, 0.08);
	--kopf-hoehe: 68px;
	--ziel: 44px;
}
@media (min-width: 600px) {
	:root { --schrift-fliess: 17px; --rand: 24px; }
}
@media (min-width: 900px) {
	:root { --sektion: 96px; --kopf-hoehe: 84px; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 16px); scrollbar-gutter: stable; }
html.nav-offen, html.nav-offen body { overflow: hidden; }
body {
	margin: 0;
	font-family: var(--schrift-text);
	font-size: var(--schrift-fliess);
	font-weight: 400;
	line-height: var(--zeile-text);
	color: var(--anthrazit);
	background: var(--weiss);
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--orange-tief); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--orange-dunkel); }
/* Auf Hellgrau erreicht --orange-tief nur 4,49:1 – dort die dunklere Stufe (6,0:1).
   Gilt auch für die hellgrauen Kästen (Kursplan-Hinweise, Aktionsband), in die die Redaktion Links setzen kann. */
.sektion--grau a:not(.button), .seite-kopf a:not(.button), .hero--leer a:not(.button),
.kursplan-hinweise a:not(.button), .aktion-band a:not(.button), .kontakt-seite a:not(.button) { color: var(--orange-dunkel); }
h1, h2, h3, h4 { font-family: var(--schrift-titel); font-weight: 700; line-height: var(--zeile-titel); margin: 0 0 0.5em; color: var(--anthrazit); letter-spacing: -0.01em; }
h1 { font-size: var(--schrift-h1); line-height: var(--zeile-h1); letter-spacing: -0.02em; }
/* Überschriften trennen nur an weichen Trennzeichen (U+00AD, z. B. „Kranken&shy;kasse“, „Kosten&shy;übernahme“,
   viva_weich_trennen()) – hyphens: auto erzeugte in Display-Größen Umbrüche wie „Kos-tenübernahme“ oder „ge-zielt“
   (Prüfrunde 2, Befunde 1 und 6). Ohne Trennstelle bricht ein zu langes Wort über overflow-wrap (body). */
h1, h2, h3 { hyphens: manual; }
h2 { font-size: var(--schrift-sektion); }
h3 { font-size: var(--schrift-zwischen); }
h4 { font-size: var(--schrift-fliess); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: 0.35em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
strong, b { font-weight: 700; }
small, .klein { font-size: var(--schrift-klein); }
hr { border: 0; border-top: 1px solid var(--grau-linie); margin: 2em 0; }
table { border-collapse: collapse; width: 100%; }
abbr[title] { text-decoration: none; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Fokus (überall gleich: 2 px Anthrazit, 2 px weißer Versatz) ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--weiss); border-radius: 4px; }
.inhalt:focus-visible { outline: none; box-shadow: none; }

/* ---------- Hilfsklassen ---------- */
.visuell-versteckt { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nur-desktop { display: none; }
@media (min-width: 900px) {
	.nur-mobil { display: none !important; }
	.nur-desktop { display: initial; }
}
.text-grau { color: var(--grau-text); }
.text-mitte { text-align: center; }
.zahl-gross { font-family: var(--schrift-titel); font-weight: 700; font-size: var(--schrift-sektion); color: var(--orange); line-height: 1; }
[hidden] { display: none !important; }

.sprung { position: absolute; left: 12px; top: -100px; z-index: 200; background: var(--anthrazit); color: var(--weiss); padding: 12px 18px; border-radius: var(--radius-button); text-decoration: none; font-family: var(--schrift-titel); font-weight: 600; }
.sprung:focus { top: 12px; }

/* ---------- Container und Sektionen ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.sektion { padding-block: var(--sektion); }
.sektion--grau { background: var(--hellgrau); }
.sektion--eng { padding-block: calc(var(--sektion) * 0.6); }
.sektion--band { padding-block: var(--band); }
.sektion--anschnitt { padding-top: 0; }
.sektion--ohne-oben { padding-top: 0; }

/* Sektionsköpfe – drei Formen, damit sie sich abwechseln */
.sektion-kopf { max-width: 42rem; margin-bottom: 40px; }
.sektion-kopf > :last-child { margin-bottom: 0; }
.sektion-kopf--mitte { margin-inline: auto; text-align: center; }
.sektion-kopf--mitte .kicker { justify-content: center; }
.sektion-kopf--zwei { max-width: none; }
@media (min-width: 900px) {
	.sektion-kopf--zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; }
	.sektion-kopf--zwei > p:not(.kicker) { margin: 0; }
	.sektion-kopf--zwei .kicker { grid-column: 1 / -1; }
}
/* 64ch ≈ 78–82 Zeichen je Zeile in Manrope (ch ist die Ziffernbreite, Buchstaben sind schmaler) */
.lesespalte { max-width: 64ch; }

/* Raster: Kacheln auf einer Linie und gleich hoch */
.raster { display: grid; gap: 24px; grid-template-columns: 1fr; }
.raster > * { min-width: 0; }
@media (min-width: 600px) {
	.raster-2, .raster-3, .raster-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.raster-3 { grid-template-columns: repeat(3, 1fr); }
	.raster-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Markenmotiv: schräger oranger Strich ---------- */
.strich { display: inline-block; width: 12px; height: 32px; background: var(--orange); transform: skewX(-20deg); border-radius: 1px; }

.kicker {
	display: flex; align-items: center; gap: 14px;
	margin: 0 0 14px;
	font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-klein);
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--orange-dunkel); /* 6,6:1 auf Weiß, 6,0:1 auf Hellgrau – Orange-tief läge auf Hellgrau nur bei 4,49:1 */
}
.kicker::before { content: ''; flex: none; width: 12px; height: 32px; background: var(--orange); transform: skewX(-20deg); border-radius: 1px; }

.liste-strich { list-style: none; padding: 0; margin: 0 0 1.5em; }
.liste-strich li { position: relative; padding-left: 28px; margin-bottom: 0.6em; }
.liste-strich li::before { content: ''; position: absolute; left: 4px; top: 0.35em; width: 7px; height: 18px; background: var(--orange); transform: skewX(-20deg); border-radius: 1px; }

/* ---------- Buttons ---------- */
.button {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 46px; padding: 0 22px;
	border: 2px solid var(--orange-tief); border-radius: var(--radius-button);
	background: var(--orange-tief); color: var(--weiss);
	font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-fliess); line-height: 1.2;
	text-decoration: none; text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.button:hover, .button:active { background: var(--orange-dunkel); border-color: var(--orange-dunkel); color: var(--weiss); }
.button .icon { width: 20px; height: 20px; transition: transform 0.15s ease; }
.button:hover .icon-arrow-right { transform: translateX(3px); }
.button--hell { background: var(--weiss); border-color: var(--weiss); color: var(--anthrazit); }
.button--hell:hover, .button--hell:active { background: var(--hellgrau); border-color: var(--hellgrau); color: var(--anthrazit); }
.button--leise { background: transparent; border-color: var(--anthrazit); color: var(--anthrazit); }
.button--leise:hover, .button--leise:active { background: var(--anthrazit); border-color: var(--anthrazit); color: var(--weiss); }
.button--gross { min-height: 50px; padding: 0 26px; }
.button--klein { min-height: 44px; padding: 0 18px; font-size: var(--schrift-klein); }
.button--breit { width: 100%; }

/* Textlink mit Pfeil (z. B. „Zum Kurs“) */
.pfeil-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ziel); font-family: var(--schrift-titel); font-weight: 600; color: var(--orange-tief); text-decoration: none; }
.pfeil-link:hover { color: var(--orange-dunkel); text-decoration: underline; }
.pfeil-link .icon { width: 20px; height: 20px; transition: transform 0.15s ease; }
.pfeil-link:hover .icon { transform: translateX(3px); }

/* Telefon / E-Mail-Links mit Icon */
.telefon-link, .email-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ziel); color: var(--anthrazit); text-decoration: none; font-family: var(--schrift-titel); font-weight: 600; }
.telefon-link:hover, .email-link:hover { color: var(--orange-dunkel); text-decoration: underline; }
.telefon-link .icon, .email-link .icon { color: var(--orange); width: 22px; height: 22px; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 100; background: var(--weiss); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.kopf.ist-gescrollt { border-bottom-color: var(--grau-linie); box-shadow: 0 1px 0 rgba(31, 35, 40, 0.02); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--kopf-hoehe); }
/* Das Logo schrumpft nie (WCAG 1.4.12: mit Textabständen geben Navigation und Aktionen nach, nicht die Marke) */
.kopf-logo { display: flex; align-items: center; flex: none; }
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--schwarz); }
.logo-bild { height: 44px; width: auto; max-width: none; flex: none; }
@media (min-width: 900px) { .logo-bild { height: 50px; } }

/* Wortmarke (Ersatz, solange kein logo.svg vorliegt) */
.wortmarke { display: inline-flex; align-items: baseline; gap: 10px; line-height: 1; white-space: nowrap; }
.wortmarke-name { position: relative; font-family: var(--schrift-titel); font-weight: 800; font-style: italic; font-size: 40px; letter-spacing: -0.04em; color: var(--schwarz); }
.wortmarke-i { position: relative; display: inline-block; }
.wortmarke-i::before { content: ''; position: absolute; left: 0.12em; top: -0.42em; width: 0.16em; height: 0.36em; background: var(--orange); transform: skewX(-22deg); border-radius: 1px; }
.wortmarke-claim { font-family: var(--schrift-titel); font-weight: 700; font-style: italic; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--schwarz); }
@media (min-width: 900px) {
	.wortmarke-name { font-size: 46px; }
	.wortmarke-claim { font-size: 14px; }
}
@media (max-width: 380px) { .wortmarke-claim { display: none; } }

.kopf-aktionen { display: none; align-items: center; gap: 20px; }
.kopf-telefon { display: none; white-space: nowrap; }

.nav-schalter {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	min-width: var(--ziel); min-height: var(--ziel); padding: 4px 6px; margin-right: -6px;
	background: transparent; border: 0; border-radius: var(--radius-button); color: var(--anthrazit);
}
.nav-schalter .icon { width: 28px; height: 28px; }
.nav-schalter .icon-x { display: none; }
.nav-schalter-text { font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-klein); line-height: 1; }
.kopf.ist-offen .nav-schalter .icon-x { display: block; }
.kopf.ist-offen .nav-schalter .icon-menu { display: none; }

/* Navigation: mobil als Vollflächen-Panel unter dem Kopf */
.nav { display: none; }
.kopf.ist-offen .nav {
	display: block; position: fixed; left: 0; right: 0; top: var(--kopf-hoehe); bottom: 0;
	background: var(--weiss); overflow-y: auto; z-index: 99; border-top: 1px solid var(--grau-linie);
}
.nav-panel { padding: 24px var(--rand) 40px; max-width: 32rem; }
.nav-cta { margin-bottom: 20px; }
.nav-cta .button { width: 100%; }
.nav-liste { list-style: none; margin: 0; padding: 0; }
.nav-liste li { margin: 0; }
.nav-liste a {
	display: flex; align-items: center; min-height: 52px; padding: 8px 0;
	border-bottom: 1px solid var(--grau-linie);
	font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-zwischen);
	color: var(--anthrazit); text-decoration: none;
}
.nav-liste a:hover { color: var(--orange-dunkel); }
.nav-liste a[aria-current="page"] { color: var(--orange-tief); }
.nav-liste a[aria-current="page"]::before { content: ''; width: 7px; height: 18px; margin-right: 12px; background: var(--orange); transform: skewX(-20deg); border-radius: 1px; }
.nav-kontakt { margin-top: 24px; }

/* Querformat auf Smartphones (Panelhöhe ≈ 320 px): Menüpunkte zweispaltig und knappere Abstände, damit CTA,
   fünf Menüpunkte und Telefon ohne Scrollen ins Panel passen (Prüfrunde 2, Befund 20) */
@media (max-width: 899.98px) and (max-height: 450px) {
	.nav-panel { padding: 12px var(--rand) 24px; max-width: 40rem; }
	.nav-cta { margin-bottom: 12px; }
	.nav-cta .button { min-height: 48px; }
	.nav-liste { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
	.nav-liste a { min-height: var(--ziel); padding: 4px 0; }
	.nav-kontakt { margin-top: 12px; }
}

/* Ohne JS: Navigation als normale Liste unter dem Kopf, kein Schalter */
.kein-js .nav { display: block; }
.kein-js .nav-schalter { display: none; }
.kein-js .kopf-innen { flex-wrap: wrap; }
.kein-js .nav { flex-basis: 100%; }

@media (min-width: 900px) {
	.kopf-innen { gap: 24px; }
	.nav-schalter, .kein-js .nav-schalter { display: none; }
	.nav, .kein-js .nav, .kopf.ist-offen .nav { display: block; position: static; flex: 1 1 auto; min-width: 0; overflow: visible; border: 0; background: transparent; }
	.nav-panel { padding: 0; max-width: none; display: flex; justify-content: center; }
	/* Reicht der Platz nicht (Textabstände, 200 % Zoom), brechen die Menüpunkte in eine zweite Zeile – das Logo bleibt ganz */
	.nav-liste { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; }
	.nav-liste a {
		position: relative; min-height: var(--ziel); padding: 8px 12px; border: 0;
		font-size: var(--schrift-klein); border-radius: var(--radius-button);
	}
	.nav-liste a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; background: var(--orange); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.18s ease; }
	.nav-liste a:hover::after, .nav-liste a[aria-current="page"]::after { transform: scaleX(1); }
	.nav-liste a[aria-current="page"] { color: var(--anthrazit); }
	.nav-liste a[aria-current="page"]::before { display: none; }
	.kopf-aktionen { display: flex; flex: none; gap: 12px; }
	/* 900–1100 px: kompakter Button ohne Pfeil, damit Logo (234 px), fünf Menüpunkte und CTA in eine Zeile passen */
	.kopf-aktionen .button { min-height: 46px; padding: 0 14px; font-size: var(--schrift-klein); white-space: nowrap; }
	.kopf-aktionen .button .icon { display: none; }
	.nav-liste a { padding: 8px 8px; }
	.nav-liste a::after { left: 8px; right: 8px; }
}
@media (min-width: 1100px) {
	.nav-liste { gap: 8px; }
	.nav-liste a { font-size: 17px; padding: 8px 12px; }
	.nav-liste a::after { left: 12px; right: 12px; }
	.kopf-aktionen { gap: 20px; }
	.kopf-aktionen .button { min-height: 48px; padding: 0 18px; font-size: 17px; }
	.kopf-aktionen .button .icon { display: block; }
}
/* Telefonnummer erst ab 1280 px: Logo (234) + fünf Menüpunkte (≈ 455) + Telefon (150) + CTA (≈ 280) passen
   erst dann ohne Umbruch in die 1200 px des Containers */
@media (min-width: 1280px) {
	.kopf-telefon { display: inline-flex; }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; background: var(--hellgrau); margin-bottom: 40px; }
.hero-medien { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--hellgrau); }
.hero-medien img, .hero-medien video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Mobil bleibt über der Karte ein sichtbarer Bildausschnitt (clamp statt fester 48 px); die Personen
   stehen in allen Hero-Motiven rechts, deshalb liegt der Ausschnitt unter 900 px rechts der Mitte.
   20vh statt 24vh: bei 390 × 664 (iPhone-Safari) endet der Haupt-Button so vor dem Falz (Prüfrunde 2, Befund 24). */
.hero-innen { display: flex; align-items: flex-end; min-height: clamp(360px, 52vh, 640px); padding-top: clamp(120px, 20vh, 200px); padding-bottom: 0; }
.hero--leer .hero-innen { min-height: 0; padding-top: 48px; }
.hero-karte {
	width: 100%; max-width: 40rem; margin-bottom: -40px;
	padding: 24px 20px; background: var(--weiss); border-radius: var(--radius);
	box-shadow: var(--schatten);
}
.hero-karte > :last-child { margin-bottom: 0; }
.hero-titel { margin-bottom: 0.4em; }
.hero-text { font-size: var(--schrift-fliess); color: var(--grau-text); max-width: 34rem; }
.hero-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* Unter 600 px stehen die Hero-Buttons untereinander in voller Breite mit knapperem Innenabstand –
   so bleibt „Jetzt Probetraining buchen“ ab 320 px einzeilig */
@media (max-width: 599.98px) {
	.hero-aktionen > .button { width: 100%; padding-inline: 12px; }
	.hero-aktionen > .button .icon { display: none; }
}
/* Ab 900 px: Text links, Foto rechts bis zum Bildschirmrand – dasselbe Vier-Spalten-Muster wie „Ihre
   Vorteile“ auf der Startseite (Rand | Container-Hälfte | Container-Hälfte | Rand).
   Vorher lief das Bild randlos hinter einer weißen Karte: Die Personen standen dann hinter der Karte, und
   weil das Bild dabei die volle Breite füllt, ist es höher als der Ausschnitt – object-position konnte
   waagerecht nichts verschieben (0 % und 100 % ergeben dasselbe Bild). Im eigenen Feld ist das Bild
   breiter als hoch beschnitten, die Personen sind vollständig zu sehen. */
@media (min-width: 900px) {
	.hero {
		display: grid; align-items: center; background: var(--weiss); margin-bottom: 56px;
		grid-template-columns:
			minmax(var(--rand), 1fr)
			minmax(0, calc(var(--container) / 2))
			minmax(0, calc(var(--container) / 2))
			minmax(var(--rand), 1fr);
	}
	.hero-innen {
		grid-column: 2; grid-row: 1;
		display: block; max-width: none; min-height: 0;
		padding: 64px 64px 64px 0;
	}
	.hero-karte { max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; }
	.hero-medien {
		grid-column: 3 / 5; grid-row: 1;
		position: static; z-index: auto; align-self: stretch;
		min-height: min(58vh, 520px);
	}
	.hero-medien .hero-bild, .hero-video {
		height: 100%; width: 100%;
		border-radius: var(--radius) 0 0 var(--radius); overflow: hidden;
	}
	/* Ohne Motiv steht der Text über die ganze Containerbreite auf hellgrauem Grund. */
	.hero--leer { background: var(--hellgrau); }
	.hero--leer .hero-medien { display: none; }
	.hero--leer .hero-innen { grid-column: 2 / 4; padding-right: 0; }
}
/* Ausnahme Startseite (.hero--breit): Das Video läuft randlos über die volle Breite, die weiße Karte liegt
   darauf – so war der Hero vor dem Umbau und so bleibt er auf Wunsch. Möglich ist das hier, weil im Video
   niemand hinter der Karte verschwindet (die Läuferin steht rechts). Steht nach dem Raster-Block, damit es
   ihn überschreibt. */
@media (min-width: 900px) {
	.hero--breit { display: block; background: var(--hellgrau); }
	.hero--breit .hero-medien {
		position: absolute; inset: 0; z-index: -1; overflow: hidden; min-height: 0;
	}
	.hero--breit .hero-medien .hero-bild, .hero--breit .hero-video { height: 100%; border-radius: 0; }
	.hero--breit .hero-innen {
		display: flex; align-items: flex-end;
		min-height: clamp(360px, 52vh, 640px);
		max-width: calc(var(--container) + 2 * var(--rand)); margin-inline: auto;
		padding: 96px var(--rand) 0;
	}
	.hero--breit .hero-karte {
		width: 100%; max-width: 40rem; margin-bottom: -56px; padding: 40px;
		background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten);
	}
	/* Der Container liegt über dem Video und ist bis auf die Karte durchlässig. */
	.hero--breit.hero--video .hero-innen { pointer-events: none; }
	.hero--breit.hero--video .hero-karte { pointer-events: auto; }
}
/* Unter 900 px: erst Kicker und Titel, dann das Bild oder Video, dann Text und Buttons – randlos hinter
   der Karte war auf dem Telefon kaum etwas vom Motiv zu sehen, und das Motiv vor der Überschrift ließ die
   Seite ohne Anfang beginnen. `display: contents` löst Container und Karte auf, damit alle Teile in einer
   gemeinsamen Reihenfolge stehen. Steht nach den 600er/900er Regeln, damit es sie überschreibt. */
@media (max-width: 899.98px) {
	.hero {
		display: grid; grid-template-columns: minmax(0, 1fr);
		width: 100%; max-width: calc(var(--container) + 2 * var(--rand));
		margin-inline: auto; padding: 24px var(--rand) 0;
		background: var(--weiss); margin-bottom: 32px;
	}
	.hero--leer { background: var(--hellgrau); }
	.hero-innen, .hero-karte { display: contents; pointer-events: auto; }
	/* Reihenfolge: Kicker, Titel, Bild/Video, Text, Buttons */
	.hero-karte .kicker { order: 1; }
	.hero-titel { order: 2; }
	.hero-medien {
		order: 3; position: static; z-index: auto; overflow: visible; background: none;
		margin-block: 4px 20px;
	}
	.hero-text { order: 4; }
	/* Hero ohne Bild (hero--leer): der leere Medienblock darf keine Luecke reissen */
	.hero-medien:empty { display: none; }
	/* 3:2 statt 16:9 – etwas höher, dabei nur wenig seitlicher Beschnitt am Motiv */
	.hero-medien .hero-bild {
		height: auto; aspect-ratio: 3 / 2; object-position: center;
		border-radius: var(--radius); background: var(--hellgrau);
	}
	.hero-video { height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
	.hero-video video, .hero-video .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
	.hero-aktionen { order: 5; margin-top: 8px; }
}
/* Querformat auf Smartphones (z. B. 844 × 390): flaches Bild und zusätzlich auf 42vh gedeckelt, damit
   Text und Buttons kurz unter dem ersten Bildschirm folgen (steht nach den Breiten-Regeln, damit es sie
   überschreibt). object-fit: cover beschneidet das Motiv dabei mittig. */
@media (max-width: 899.98px) and (max-height: 450px) {
	.hero { padding-top: 16px; }
	.hero-medien .hero-bild, .hero-video { aspect-ratio: 21 / 9; max-height: 42vh; }
	.hero-medien { margin-block: 4px 12px; }
}

/* Video im Hero; bei reduzierter Bewegung nur das Poster */
.hero-video { position: relative; width: 100%; height: 100%; }
.hero-video .hero-poster { display: none; }
@media (prefers-reduced-motion: reduce) {
	.hero-video video { display: none; }
	.hero-video .hero-poster { display: block; }
}
/* „Daten sparen“ (prefers-reduced-data): theme.js lädt kein Video, das Poster bleibt stehen */
.hero-video.ist-poster video { display: none; }
.hero-video.ist-poster .hero-poster { display: block; }
/* Unter 900 px liegt das Video im Textfluss, ab 900 px in einer eigenen Spalte – es liegt nie mehr
   über oder unter dem Text, deshalb braucht es weder align-items noch die pointer-events-Krücke. */
/* Ohne JavaScript wird keine Videoquelle gesetzt – dann nur das Poster. */
.kein-js .hero-video video { display: none; }
.kein-js .hero-video .hero-poster { display: block; }

/* ---------- CTA-Band ---------- */
.cta-band { background: var(--orange-tief); color: var(--weiss); padding-block: var(--band); }
.cta-band-innen { display: flex; flex-direction: column; gap: 28px; }
.cta-band-titel { color: var(--weiss); margin-bottom: 0.35em; }
.cta-band-text p { margin: 0; max-width: 36rem; font-size: var(--schrift-fliess); }
.cta-band-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.cta-band-telefon { color: var(--weiss); text-decoration: underline; text-underline-offset: 0.2em; }
.cta-band-telefon .icon { color: var(--weiss); }
.cta-band-telefon:hover { color: var(--weiss); text-decoration-thickness: 2px; }
.cta-band .button--hell:focus-visible { outline-color: var(--weiss); box-shadow: 0 0 0 2px var(--anthrazit); }
.cta-band-telefon:focus-visible { outline-color: var(--weiss); box-shadow: 0 0 0 2px var(--anthrazit); }
@media (min-width: 900px) {
	.cta-band-innen { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
	/* darf schrumpfen und umbrechen – mit Textabständen (WCAG 1.4.12) sonst horizontales Scrollen bei 900 px */
	.cta-band-aktionen { flex: 0 1 auto; min-width: 0; justify-content: flex-end; }
}

/* ---------- Karten ---------- */
.karte { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 28px; }
.karte > :last-child { margin-bottom: 0; }
.sektion--grau .karte { box-shadow: none; }
.karte--rand { box-shadow: none; border: 1px solid var(--grau-linie); }
.karte-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 10px; background: var(--hellgrau); color: var(--orange-tief); }
.karte-icon .icon { width: 26px; height: 26px; }
.sektion--grau .karte-icon { background: var(--weiss); }

/* Kategorie-Pillen: ruhig/neutral mit kleinem Farbpunkt statt bunter Fläche (Premium-Look). Die Farbe
   (--kp-text) dient zugleich als Streifen der Kursplan-Karte – so bleibt die Kodierung, ohne „Regenbogen". */
.kategorie {
	display: inline-flex; align-items: center; min-height: 26px; padding: 2px 12px;
	border-radius: 999px; font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-klein); line-height: 1.2;
	background: var(--hellgrau); color: var(--anthrazit);
}
.kategorie::before {
	content: ""; flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
	background: var(--kp-text, var(--grau-text));
}
.kategorie--yoga,    .kategorie.kat-yoga    { --kp-text: #2E6BB8; }
.kategorie--pilates, .kategorie.kat-pilates { --kp-text: #2C8A50; }
.kategorie--ruecken, .kategorie.kat-ruecken { --kp-text: #1E7C8A; }
.kategorie--bauch,   .kategorie.kat-bauch   { --kp-text: #C2600F; }
.kategorie--kraft,   .kategorie.kat-kraft   { --kp-text: #5B4CC0; }
.kategorie--cycling, .kategorie.kat-cycling { --kp-text: #C23B3B; }
.kategorie--cardio,  .kategorie.kat-cardio  { --kp-text: #B07A00; }
.kategorie--tanz,    .kategorie.kat-tanz    { --kp-text: #B03A86; }
.kategorie--reha,    .kategorie.kat-reha    { --kp-text: #5B6470; }

/* Kurs-Karte */
.kurs-karte {
	position: relative; display: flex; flex-direction: column;
	background: var(--weiss); border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--schatten); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sektion--grau .kurs-karte { box-shadow: none; }
.kurs-karte:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(31, 35, 40, 0.12); }
.kurs-karte-medien { aspect-ratio: 4 / 3; background: var(--hellgrau); overflow: hidden; }
.kurs-karte-medien img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.kurs-karte:hover .kurs-karte-medien img { transform: scale(1.03); }
.kurs-karte-platzhalter { display: flex; align-items: center; justify-content: center; height: 100%; background: var(--hellgrau); color: var(--grau-text); font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-zwischen); }
.kurs-karte-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 22px 24px 24px; }
.kurs-karte-text .kategorie { margin-bottom: 12px; }
.kurs-karte-titel { margin-bottom: 0.35em; }
.kurs-karte-kurz { color: var(--grau-text); margin-bottom: 1em; }
.kurs-karte-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; min-height: var(--ziel); font-family: var(--schrift-titel); font-weight: 600; color: var(--orange-tief); text-decoration: none; }
.kurs-karte-link .icon { width: 20px; height: 20px; transition: transform 0.15s ease; }
.kurs-karte-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.kurs-karte-link:hover { text-decoration: underline; }
.kurs-karte:hover .kurs-karte-link .icon { transform: translateX(3px); }
.kurs-karte-link:focus-visible { outline: none; box-shadow: none; }
.kurs-karte:has(.kurs-karte-link:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--weiss); }
/* Rückfall für Browser ohne :has() */
.kurs-karte-link:focus-visible::after { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* Kurs-Filter (/kurse/) */
.kurs-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.kurs-filter button {
	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);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kurs-filter button:hover { border-color: var(--anthrazit); }
.kurs-filter button[aria-pressed="true"] { background: var(--anthrazit); border-color: var(--anthrazit); color: var(--weiss); }
.kurs-filter-status { color: var(--grau-text); font-size: var(--schrift-klein); margin-bottom: 24px; }

/* ---------- Formular ---------- */
.formular-bereich { scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
.formular-titel { margin-bottom: 0.4em; }
.formular-intro { color: var(--grau-text); max-width: 40rem; }
.formular-pflicht { font-size: var(--schrift-klein); color: var(--grau-text); margin-bottom: 20px; }
.formular-pflicht abbr, .feld label abbr { color: var(--orange-tief); font-weight: 700; }
.formular-honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-raster { display: grid; grid-template-columns: 1fr; gap: 20px 24px; }
@media (min-width: 600px) {
	.formular-raster { grid-template-columns: 1fr 1fr; }
	.feld--gruppe { grid-column: 1 / -1; }
}
.feld { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.feld label, .feld legend { font-family: var(--schrift-titel); font-weight: 600; font-size: var(--schrift-fliess); color: var(--anthrazit); padding: 0; }
.feld legend { margin-bottom: 6px; }
.feld legend .feld-hilfe { font-family: var(--schrift-text); font-weight: 400; }
.feld input:not([type="radio"]):not([type="checkbox"]), .feld select, .feld textarea {
	width: 100%; min-height: 52px; padding: 10px 16px;
	border: 1.5px solid var(--grau-rand); border-radius: var(--radius-button);
	background: var(--weiss); color: var(--anthrazit); font-size: var(--schrift-fliess);
	transition: border-color 0.15s ease;
}
.feld textarea { min-height: 140px; resize: vertical; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--fokus); outline-offset: 0; border-color: var(--anthrazit); box-shadow: none; }
.feld input::placeholder { color: var(--grau-text); }
.feld.feld--fehler input:not([type="radio"]):not([type="checkbox"]), .feld.feld--fehler select, .feld.feld--fehler textarea { border-color: var(--fehler); border-width: 2px; }
.feld-hilfe { font-size: var(--schrift-klein); color: var(--grau-text); }
.feld-fehler { display: flex; gap: 6px; font-size: var(--schrift-klein); font-weight: 600; color: var(--fehler); }
.feld-fehler::before { content: '!'; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--fehler); color: var(--weiss); font-size: 12px; margin-top: 2px; }
.feld-optionen { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.option { display: inline-flex; align-items: center; gap: 10px; min-height: var(--ziel); cursor: pointer; font-weight: 400; font-family: var(--schrift-text); }
.option input[type="radio"], .option input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--orange-tief); flex: none; }
.formular-aktion { margin: 28px 0 16px; }
.formular-hinweis { font-size: var(--schrift-klein); color: var(--grau-text); max-width: 40rem; }

/* Meldungen */
.meldung { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; margin-bottom: 24px; border-radius: var(--radius-button); border-left: 4px solid; }
.meldung > .icon { width: 24px; height: 24px; margin-top: 2px; }
.meldung p, .meldung ul { margin: 0; }
.meldung ul { margin-top: 8px; padding-left: 1.2em; }
.meldung p:first-child { font-weight: 600; }
.meldung--fehler { background: var(--fehler-flaeche); border-color: var(--fehler); color: var(--fehler); }
.meldung--fehler a { color: var(--fehler); font-weight: 600; }
.meldung--erfolg { background: var(--erfolg-flaeche); border-color: var(--erfolg); color: var(--erfolg); }
.meldung:focus-visible { outline-offset: 4px; }

/* ---------- Seite (Impressum, Datenschutz, Barrierefreiheit, 404) ---------- */
.seite-kopf { background: var(--hellgrau); padding-block: calc(var(--sektion) * 0.6); margin-bottom: calc(var(--sektion) * 0.6); }
.seite-kopf .kicker { margin-bottom: 8px; }
/* Kopfband mit Aktionen rechts (Preise; der Kursplan bringt dieselbe Aufteilung noch unter eigenen
   .kursplan-kopfband-Klassen mit). Unter 600 px stehen Text und Buttons untereinander. */
.seite-kopf-innen { display: grid; gap: 24px; }
.seite-kopf-satz { max-width: 40rem; margin: 12px 0 0; color: var(--grau-text); /* 5,45:1 auf Hellgrau */ }
.seite-kopf-aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 600px) {
	.seite-kopf--zwei .seite-kopf-innen { grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
	.seite-kopf--zwei .seite-kopf-aktionen { justify-content: flex-end; }
}
.seite-titel { margin: 0; max-width: 20ch; }
.prosa { max-width: 64ch; padding-bottom: var(--sektion); }
.prosa h2 { font-size: var(--schrift-zwischen); margin-top: 2em; }
.prosa h3 { font-size: var(--schrift-fliess); margin-top: 1.6em; }
.prosa h4 { margin-top: 1.4em; }
.prosa > :first-child { margin-top: 0; }
.prosa p, .prosa ul, .prosa ol { margin-bottom: 1.2em; }
.prosa li { margin-bottom: 0.4em; }
.prosa a { overflow-wrap: anywhere; }
.prosa table { margin: 0 0 1.5em; font-size: var(--schrift-klein); }
.prosa th, .prosa td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--grau-linie); }
.prosa th { font-family: var(--schrift-titel); font-weight: 600; }
.prosa .wp-block-table, .prosa .tabelle-scroll { overflow-x: auto; }
.prosa blockquote { margin: 0 0 1.5em; padding-left: 20px; border-left: 3px solid var(--orange); color: var(--grau-text); }
.prosa address { font-style: normal; margin-bottom: 1.2em; }
.prosa .wp-block-buttons a, .prosa .wp-block-button__link { text-decoration: none; }
/* Nur die Linkliste im Inhalt der 404-Seite (der Body trägt dieselbe Klasse – deshalb an .prosa gebunden) */
.prosa.seite-404 ul { margin-bottom: 2em; }
.prosa.seite-404 .liste-strich a { display: inline-flex; align-items: center; min-height: var(--ziel); }
.prosa.seite-404 .liste-strich li { margin-bottom: 0; }
.prosa.seite-404 .liste-strich li::before { top: 50%; transform: translateY(-50%) skewX(-20deg); }

/* ---------- Schritte (Rehasport-Ablauf, „Ihr erster Besuch“): eine Komponente für beide Seiten ---------- */
.schritte { --schritt-grund: var(--weiss); list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; gap: 32px; }
.sektion--grau .schritte { --schritt-grund: var(--hellgrau); }
.schritt {
	position: relative; isolation: isolate; counter-increment: schritt;
	display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: start; margin: 0;
}
/* Große Ziffer ohne führende Null: Outfit 800 in Markenorange (≥ 44 px, damit 3,7:1 für große Schrift reicht) */
.schritt::before {
	content: counter(schritt); min-width: 1.2ch;
	font-family: var(--schrift-titel); font-weight: 800; font-size: var(--schrift-h1); line-height: 1;
	color: var(--orange); font-variant-numeric: tabular-nums;
}
.schritt-text { min-width: 0; }
.schritt-titel { margin: 0.15em 0 0.35em; }
.schritt-text p { margin: 0; color: var(--grau-text); }
@media (min-width: 600px) {
	.schritte { gap: 40px; }
	.schritt { column-gap: 28px; }
}
@media (min-width: 900px) {
	.schritte { grid-template-columns: repeat(3, 1fr); gap: 48px; }
	.schritt { display: block; }
	/* Ziffer mit Grundfarbe der Fläche, damit die Verbindungslinie dahinter abbricht */
	.schritt::before { display: inline-block; position: relative; z-index: 1; padding-right: 20px; background: var(--schritt-grund); }
	/* Feine Linie von Ziffer zu Ziffer (nur Desktop); endet vor der nächsten Ziffer */
	.schritt:not(:last-child)::after {
		content: ''; position: absolute; z-index: 0;
		top: calc(var(--schrift-h1) / 2); left: 0; right: -32px; height: 2px;
		background: var(--grau-linie);
	}
	.schritt-titel { margin-top: 20px; }
}

/* ---------- Fuß ---------- */
.fuss { background: var(--hellgrau); border-top: 1px solid var(--grau-linie); font-size: var(--schrift-klein); }
.fuss-innen { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: 56px 48px; }
.fuss-spalte > :last-child { margin-bottom: 0; }
/* Spaltentitel als ruhige Versalzeile – die Spalten wirken dadurch als gleichwertige Blöcke */
.fuss-titel {
	font-family: var(--schrift-titel); font-size: 13px; font-weight: 700;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau-text);
	margin: 0 0 12px;
}
.fuss .logo { margin-bottom: 20px; }
.fuss .wortmarke-name { font-size: 36px; }
/* Ein Satz statt einer leeren Fläche neben dem Logo */
.fuss-satz { max-width: 34ch; margin-bottom: 20px; color: var(--grau-text); line-height: 1.6; }
.fuss-adresse { font-style: normal; margin-bottom: 16px; line-height: 1.6; }
.fuss-links { list-style: none; margin: 0; padding: 0; }
.fuss-links li { margin: 0; }
.fuss-link { display: inline-flex; align-items: center; gap: 10px; min-height: var(--ziel); color: var(--anthrazit); text-decoration: none; font-weight: 600; }
.fuss-link:hover { color: var(--orange-dunkel); text-decoration: underline; }
.fuss-link .icon { width: 20px; height: 20px; color: var(--orange); }
/* Die Telefonnummer ist der wichtigste Kontaktweg – etwas größer als der Rest */
.fuss-link--stark { font-family: var(--schrift-titel); font-size: var(--schrift-fliess); }
.fuss-link .icon-extern { width: 16px; height: 16px; color: var(--grau-text); }
.fuss-notiz { display: inline-flex; align-items: center; gap: 10px; min-height: var(--ziel); color: var(--grau-text); }
.fuss-notiz .icon { width: 20px; height: 20px; color: var(--orange); }
.fuss-innen > * { min-width: 0; }
.fuss-adresse, .fuss-link span { overflow-wrap: anywhere; }
.fuss-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fuss-liste a { hyphens: auto; }
.fuss-liste { list-style: none; margin: 0; padding: 0; }
.fuss-liste li { margin: 0; }
.fuss-liste a { display: inline-flex; align-items: center; min-width: var(--ziel); min-height: var(--ziel); color: var(--anthrazit); text-decoration: none; }
.fuss-liste a:hover { color: var(--orange-dunkel); text-decoration: underline; }
.fuss-liste a[aria-current="page"] { font-weight: 700; }
.fuss-zeile { border-top: 1px solid var(--grau-linie); }
.fuss-zeile-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 16px; color: var(--grau-text); }
.fuss-zeile p { margin: 0; }
.fuss-zeile-hinweis a { color: inherit; }
.nach-oben { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ziel); padding: 0 4px; color: var(--anthrazit); text-decoration: none; font-family: var(--schrift-titel); font-weight: 600; }
.nach-oben .icon { width: 20px; height: 20px; color: var(--orange); }
.nach-oben:hover { color: var(--orange-dunkel); text-decoration: underline; }
@media (min-width: 600px) and (max-width: 899.98px) {
	.fuss-innen { grid-template-columns: 1fr 1fr; }
	.fuss-studio { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
	/* Drei Blöcke: Studio, Kontakt, Seiten/Rechtliches – letzterer am rechten Rand */
	.fuss-innen { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) auto; gap: 48px; padding-block: 72px 56px; }
	/* Beide Listen so breit wie nötig, damit „Datenschutzerklärung“ nicht im Wort bricht */
	.fuss-navigation { grid-template-columns: auto auto; gap: 56px; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
	.kurs-karte:hover { transform: none; }
	.kurs-karte:hover .kurs-karte-medien img { transform: none; }
}

/* ---------- Druck ---------- */
@media print {
	:root { --sektion: 24px; --band: 16px; }
	.kopf, .fuss, .cta-band, .nach-oben, .nav-schalter, .sprung, .hero-video, .formular, .kurs-filter, .aktion-dialog, .aktion-band { display: none !important; }
	body { color: #000; background: #fff; font-size: 12pt; }
	a { color: #000; text-decoration: underline; }
	.hero { margin-bottom: 16px; }
	.hero-medien { display: none; }
	.hero-innen { min-height: 0; padding: 0; }
	.hero-karte { box-shadow: none; padding: 0; margin: 0; max-width: none; }
	.sektion--grau { background: #fff; }
	.karte, .kurs-karte { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
	/* Kursplan: mobile Tabs aufgelöst, alle Tage untereinander als Tabelle */
	.kursplan [role="tablist"] { display: none !important; }
	.kursplan [role="tabpanel"][hidden], .kursplan [hidden] { display: block !important; }
	.kursplan-tag, .kursplan table { break-inside: avoid; }
	.kursplan table, .kursplan th, .kursplan td { border: 1px solid #999; border-collapse: collapse; padding: 4px 6px; }
}

/* ---------- Datensparsam-Hinweis (Cookie-Banner) ---------- */
.cookie-hinweis { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; background: var(--anthrazit); color: var(--weiss); padding-block: 14px; box-shadow: 0 -2px 16px rgba(31, 35, 40, 0.18); }
.cookie-hinweis-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.cookie-hinweis p { margin: 0; flex: 1 1 320px; font-size: var(--schrift-klein); line-height: 1.5; color: var(--weiss); }
.cookie-hinweis a { color: var(--weiss); text-decoration: underline; text-underline-offset: 0.15em; }
.cookie-hinweis .cookie-hinweis-ok { flex: none; }

/* ---------- Formular: mitgegebenes Paket ---------- */
.formular-paket { margin: 0 0 20px; padding: 12px 16px; background: var(--hellgrau); border-radius: var(--radius-button); font-size: var(--schrift-klein); }
.formular-paket strong { color: var(--anthrazit); }

/* ---------- Formular: Einwilligung (Datenschutz-Checkbox) ---------- */
.feld--einwilligung { margin-top: 4px; }
.einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: var(--schrift-klein); line-height: 1.5; cursor: pointer; }
.einwilligung input { margin-top: 2px; flex: none; width: 18px; height: 18px; accent-color: var(--orange-tief); }