/* SportPort — die Muster der Startseite, übertragen aus redesign/gestaltung/40-startseite.css
   und 30-geruest.css auf das Markup der Blöcke. Variablen aus system.css (Design System).
   Die Messwerte, mit denen dort einzelne Entscheidungen begründet sind, gelten hier genauso;
   sie stehen an der Quelle und werden hier nicht wiederholt.

   Blöcke setzen eigene Abstände (Flow-Layout, Spalten-Lücke). Wo die Gestaltung eigene
   Raster braucht, werden sie hier ausdrücklich überschrieben. */

/* ===== Abschnitte und Flächen ========================================== */
.sp-abschnitt { padding-block: var(--section-y); }
.sp-abschnitt--eng { padding-block: var(--section-y-tight); }
@media (max-width: 48rem) {
	.sp-abschnitt { padding-block: var(--space-9); }
	.sp-abschnitt--eng { padding-block: var(--space-8); }
}
.is-style-flaeche-abgesenkt { background: var(--surface-sunken); }
.is-style-flaeche-navy { background: var(--surface-navy); }
.is-style-flaeche-navy-tief { background: var(--surface-navy-deep); }
.sp-winkel-unten { clip-path: var(--clip-diagonal-bottom); padding-bottom: calc(var(--section-y) + 56px); }

/* Auf der Startseite stößt der erste Abschnitt direkt an den Kopf */
.sp-haupt:has(> .wp-block-post-content > .sp-opener:first-child) { padding-top: 0; margin-top: 0; }
.sp-haupt:has(> .wp-block-post-content > .sp-opener) + * { margin-top: 0; }  /* Kontaktfläche stößt an den Fuß */
.sp-haupt:has(> .wp-block-post-content > .sp-opener) { padding-bottom: 0; }
.wp-block-post-content > .alignfull { margin-block: 0; }

/* Das eingeschränkte Layout zentriert jedes Kind, das schmaler ist als die Inhaltsbreite.
   Vorspann und Titel mit eigener Höchstbreite stünden dann eingerückt statt bündig links
   (gesehen am Bildschirmfoto). Sie beginnen an der linken Kante der Inhaltsbreite. */
.sp-abschnitt > .is-style-vorspann,
.sp-abschnitt > .sp-marken-titel {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

/* ===== Textrollen ====================================================== */
.is-style-ueberzeile {
	font-family: var(--font-display); font-size: var(--text-xs) !important;
	font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase; color: var(--text-muted);
	display: flex; align-items: center; gap: var(--space-4);
	margin-bottom: var(--space-5);
}
/* Auf Navy trägt --text-muted nicht: 4,08:1 (gemessen von pruefen.js, nachgerechnet).
   Das System hat dafür --text-invert-muted: 5,19:1. Derselbe Fehler steckt im Redesign
   (Kontakt-Überzeile auf flaeche-navy); dessen Messung prüfte Token-Paare, nicht die Seite. */
.is-style-flaeche-navy .is-style-ueberzeile { color: var(--text-invert-muted); }
.is-style-ueberzeile::before { content: ""; width: 28px; height: 3px; background: var(--sp-green); flex: none; }
.is-style-vorspann {
	font-size: var(--text-lead); line-height: var(--leading-relaxed);
	color: var(--text-body); max-width: 46ch; margin-block: var(--space-6) var(--space-9) !important;
}

/* ===== Knöpfe ========================================================== */
.wp-block-button .wp-block-button__link {
	display: inline-flex; align-items: center; gap: var(--space-3);
	min-height: var(--control-h-md); padding: 0 var(--control-pad-x);
	border: 1px solid transparent; border-radius: var(--radius-control);
	font: var(--role-button); letter-spacing: var(--tracking-button);
	text-transform: uppercase; text-decoration: none;
	transition: var(--transition-control);
}
.wp-block-button.is-style-gruen .wp-block-button__link { background: var(--sp-green); color: var(--text-on-accent); border-color: var(--sp-green); }
.wp-block-button.is-style-gruen .wp-block-button__link:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); }
.wp-block-button.is-style-umriss .wp-block-button__link { background: transparent; color: var(--text-invert); border-color: var(--border-strong); }
.wp-block-button.is-style-umriss .wp-block-button__link:hover { border-color: var(--sp-green); color: var(--sp-green); }

/* ===== Opener ========================================================== */
.sp-opener { position: relative; overflow: hidden; isolation: isolate; }
.sp-opener > .sp-opener__bild { position: absolute; inset: -12% 0; margin: 0 !important; max-width: none !important; z-index: -2; }
.sp-opener__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.sp-opener::before { content: ""; position: absolute; inset: 0; background: var(--scrim-navy); z-index: -1; }
.sp-opener::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
	background-image: var(--pattern-speedlines-light); opacity: .22;
}
/* Die Überzeile steht auf dem Foto: --text-muted erreichte am ungünstigsten Bildpunkt
   4,25:1 (1280 px) und 4,05:1 (320 px), gemessen von pruefen.js. Voller Textwert wie bei
   den Zahlen im Redesign. */
.sp-opener .is-style-ueberzeile { color: var(--text-strong); }
/* Schmal läuft der Text über die ganze Breite, auch dorthin, wo der Schleier von links
   dünn wird: Zusatztext 4,46:1 bei 320 px. Dort deckt der Schleier gleichmäßig. */
@media (max-width: 46rem) { .sp-opener::before { background: var(--surface-overlay); } }
.sp-opener__inhalt { padding-block: clamp(4rem, 11vw, 9rem) var(--space-9); }
.sp-opener h1 {
	font-size: var(--text-hero); font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-hero); line-height: var(--leading-tight);
	margin-bottom: var(--space-6); max-width: 15ch;
}
.sp-opener h1 em { font-style: normal; color: var(--text-accent); }
.sp-opener__zusatz { font-size: var(--text-lead); line-height: var(--leading-relaxed); color: var(--text-strong); max-width: 46ch; }
.sp-opener .wp-block-buttons { margin-block: var(--space-7) var(--space-8); gap: var(--space-5); }
.sp-balken { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; opacity: .9; }
.sp-balken > i { display: block; height: 4px; background: var(--sp-green); transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
	.sp-balken > i { animation: sp-balken 2.4s var(--ease-in-out) infinite; }
	.sp-balken > i:nth-child(2) { animation-delay: .12s; }
	.sp-balken > i:nth-child(3) { animation-delay: .24s; }
	.sp-balken > i:nth-child(4) { animation-delay: .36s; }
	.sp-balken > i:nth-child(5) { animation-delay: .48s; }
}
@keyframes sp-balken { 0% { transform: scaleX(.35); opacity: .5; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(.35); opacity: .5; } }

.sp-opener__zahlen {
	position: relative; display: grid; gap: var(--space-6);
	padding-block: var(--space-8) var(--space-9); border-top: 1px solid var(--border-default);
}
.sp-opener__zahlen::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--scrim-bottom); }
@media (min-width: 46rem) { .sp-opener__zahlen { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }
.sp-opener__zahlen > * { margin: 0 !important; }
.sp-zahl__wert {
	font-family: var(--font-display); font-weight: var(--weight-extrabold);
	font-size: clamp(2.5rem, 1rem + 4.4vw, 3.75rem); letter-spacing: var(--tracking-hero);
	line-height: 1; color: var(--text-strong); font-variant-numeric: tabular-nums; margin: 0;
}
.sp-zahl__text { margin: var(--space-4) 0 0 !important; font-size: var(--text-sm); color: var(--text-strong); }

/* ===== Laufband ======================================================== */
.sp-laufband { overflow: hidden; background: var(--sp-green); color: var(--text-on-accent); padding-block: var(--space-4); }
.sp-laufband__text {
	margin: 0; padding-inline: var(--space-6);
	font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
/* von bewegung.js aufgebaut; ohne Skript bleibt die Zeile stehen */
.sp-laufband__bahn { display: flex; width: max-content; gap: var(--space-6); align-items: center; }
.sp-laufband__bahn > span { display: flex; align-items: center; gap: var(--space-6); white-space: nowrap; }
.sp-laufband__bahn > span::after { content: "·"; opacity: .5; }
@media (prefers-reduced-motion: no-preference) { .sp-laufband__bahn { animation: sp-laufband 30s linear infinite; } }
@keyframes sp-laufband { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== Was wir tun ===================================================== */
.sp-leistungen { display: grid; gap: 1px; background: var(--border-subtle); }
@media (min-width: 46rem) { .sp-leistungen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .sp-leistungen { grid-template-columns: repeat(4, 1fr); } }
.sp-leistungen > * { margin: 0 !important; }
.sp-leistung { background: var(--surface-page); padding: var(--space-7) var(--space-6) var(--space-8); }
.sp-leistung__nr {
	font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); margin-bottom: var(--space-5);
}
.sp-leistung__nr::after { content: ""; display: block; width: 28px; height: 3px; background: var(--sp-green); margin-top: var(--space-5); }
.sp-leistung h3 { font-size: var(--text-h4); margin-bottom: var(--space-5); }
.sp-leistung p:last-child { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); margin: 0; }

/* ===== Zweispaltig (Über uns, Anlass) =================================== */
.sp-zweispalt { gap: var(--space-8); }
@media (min-width: 58rem) { .sp-zweispalt { gap: var(--space-10); } }
.sp-zweispalt h2 { font-size: var(--text-h1); max-width: 14ch; }
.sp-zweispalt p { line-height: var(--leading-relaxed); color: var(--text-body); }
.sp-anlass-zahlen { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.sp-anlass-zahlen > * { margin: 0 !important; }
.sp-anlass-zahl { border-left: 4px solid var(--sp-green); padding-left: var(--space-6); }
.sp-anlass-zahl__wert {
	font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--text-display);
	letter-spacing: var(--tracking-hero); line-height: 1.1; color: var(--text-strong) !important;
	font-variant-numeric: tabular-nums; margin: 0 0 var(--space-3);
}
.sp-anlass-zahl p:last-child { margin: 0; }

/* ===== Marken ========================================================== */
.sp-marken-titel { font-size: var(--text-h1); max-width: 18ch; margin-bottom: var(--space-9); }
.sp-marken { gap: var(--space-7); }
.sp-marke {
	height: 100%; display: flex; flex-direction: column;
	background: var(--surface-glass); border: 1px solid var(--border-default);
	border-radius: var(--radius-card); padding: var(--card-pad);
}
.sp-marke > * { margin-block: 0 var(--space-5); }
.sp-marke__logo { background: var(--sp-white); border-radius: var(--radius-xs); padding: var(--space-5); align-self: flex-start; margin-bottom: var(--space-6) !important; }
.sp-marke__logo img { width: 190px; height: auto; }
.sp-marke__zeile {
	font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-accent); margin-bottom: var(--space-3) !important;
}
.sp-marke h3 { font-size: var(--text-h3); }
.sp-marke p { font-size: var(--text-sm); color: var(--text-body); }
.sp-marke .sp-marke__orte { color: var(--text-muted); }
.sp-marke__fuss { margin-top: auto !important; margin-bottom: 0 !important; padding-top: var(--space-5); font-family: var(--font-display); font-weight: var(--weight-bold); }

/* ===== Programme ======================================================= */
.sp-programm { gap: var(--space-9); align-items: center !important; margin-bottom: var(--space-10) !important; }
.sp-programm__bild { margin: 0; overflow: hidden; background: var(--surface-sunken); }
.sp-programm__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sp-programm__feld {
	display: flex; align-items: center; gap: var(--space-4);
	font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted);
}
.sp-programm__feld::before { content: ""; width: 28px; height: 3px; background: var(--sp-green); }
.sp-programm h3 { font-size: var(--text-h2); margin-bottom: var(--space-4); }
.sp-programm__auftrag { font-size: var(--text-sm); color: var(--text-accent); }
.sp-programme-weitere__titel {
	font-family: var(--font-display); font-size: var(--text-xs) !important; font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted);
	margin: var(--space-10) 0 var(--space-5);
}
.sp-programme-weitere { border-top: 1px solid var(--border-subtle); }
.sp-programme-weitere > * { margin: 0 !important; }
.sp-programm-zeile {
	display: grid; gap: var(--space-3) var(--space-6); grid-template-columns: 1fr;
	padding-block: var(--space-6); border-bottom: 1px solid var(--border-subtle);
}
.sp-programm-zeile > * { margin: 0 !important; }
@media (min-width: 46rem) { .sp-programm-zeile { grid-template-columns: minmax(0, 1.6fr) 10rem minmax(0, 1fr); align-items: baseline; } }
.sp-programm-zeile__titel { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h4); color: var(--text-strong); }
.sp-programm-zeile__titel a { color: inherit; text-decoration: none; }
.sp-programm-zeile__titel a:hover { color: var(--sp-green); }
.sp-programm-zeile__feld {
	font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-accent);
}
.sp-programm-zeile__auftrag { font-size: var(--text-sm); color: var(--text-muted); }

/* ===== Team ============================================================ */
.sp-team { gap: var(--space-7); }
.sp-person__bild { margin: 0; background: var(--surface-sunken); overflow: hidden; }
.sp-person__bild img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.sp-team h3 { font-size: var(--text-h4); margin: var(--space-6) 0 var(--space-2); }
.sp-person__rolle {
	font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-accent);
}
.sp-team p:last-child { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

/* ===== Stimmen ========================================================= */
.sp-stimmen { gap: var(--space-9); }
.sp-stimme__zitat { font-size: var(--text-lead); line-height: var(--leading-relaxed); color: var(--text-strong); margin-bottom: var(--space-6); }
.sp-stimme__zitat::before { content: "„"; color: var(--sp-green); }
.sp-stimme__person { gap: var(--space-5); align-items: center; }
.sp-stimme__bild { margin: 0; flex: none; }
.sp-stimme__bild img { width: 56px; height: 56px; border-radius: var(--radius-pill); object-fit: cover; }
.sp-stimme__wer { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.sp-stimme__wer strong { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--text-strong); font-size: var(--text-body-size); }

/* ===== Partner ========================================================= */
.sp-partner { gap: var(--space-7) var(--space-9) !important; align-items: center; }
.sp-partner > * { margin: 0 !important; }
.sp-partner__logo img { width: 118px; height: auto; opacity: .85; }
.sp-partner__logo:hover img { opacity: 1; }

/* ===== Kontakt ========================================================= */
.sp-kontakt { gap: var(--space-8); align-items: flex-end !important; }
.sp-kontakt h2 { font-size: var(--text-h1); max-width: 16ch; }
.sp-kontakt__vorspann { font-size: var(--text-lead); color: var(--text-invert-muted); margin: 0; }
.sp-kontakt .sp-kontakt__daten { font-size: var(--text-lead); line-height: 1.9; margin: 0; }
.sp-kontakt .sp-kontakt__daten a { color: var(--sp-green); }

/* ===== Einblenden (von bewegung.js gesetzt; ohne Skript alles sichtbar) === */
@media (prefers-reduced-motion: no-preference) {
	.sp-einblenden { opacity: 0; transform: translateY(18px); }
	.sp-einblenden.ist-da {
		opacity: 1; transform: none;
		transition: opacity var(--dur-slower) var(--ease-entrance), transform var(--dur-slower) var(--ease-entrance);
	}
}

/* ===== Lesefortschritt und Kopf beim Scrollen ========================== */
.sp-fortschritt { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.sp-fortschritt > span { display: block; height: 100%; width: 0; background: var(--sp-green); transition: width var(--dur-fast) linear; }
.wp-site-blocks > header:first-child, .wp-site-blocks > .wp-block-template-part:first-child { position: sticky; top: 0; z-index: 30; }
.sp-kopf { transition: background var(--dur-base) var(--ease-out), min-height var(--dur-base) var(--ease-out); }
.sp-kopf.ist-gescrollt { background: var(--surface-overlay); backdrop-filter: saturate(130%) blur(12px); min-height: var(--header-h-compact); }
.sp-kopf.ist-gescrollt .sp-kopf__logo img { height: 32px; }
@media (max-width: 30rem) { .sp-kopf.ist-gescrollt .sp-kopf__logo img { height: 22px; } }

/* nur für Vorlesegeräte (das Laufband behält seinen Text, die Bahn ist aria-hidden) */
.sp-nur-vorlesen {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ===== Programmseite und Programmlisten ================================ */
.sp-zurueck { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-bold); margin-bottom: var(--space-7); }
.sp-zurueck a { color: var(--text-muted); text-decoration: none; }
.sp-zurueck a:hover { color: var(--sp-green); }
.sp-programmseite__feld p,
.sp-programmliste .wp-block-post-excerpt__excerpt {
	font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-accent); margin: 0;
}
.sp-programmseite h1 { font-size: var(--text-h1); margin-top: var(--space-4); }
.sp-programmseite__bild { margin-block: var(--space-8) !important; }
.sp-programmseite__bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sp-programmseite .wp-block-post-content p, .sp-programmseite .wp-block-post-content li { line-height: var(--leading-relaxed); color: var(--text-body); }
.sp-weitere-programme { margin-top: var(--space-10) !important; padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }
.sp-programmliste .wp-block-post-template { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-subtle); }
.sp-programmliste .wp-block-post-template > li { padding-block: var(--space-6); border-bottom: 1px solid var(--border-subtle); margin: 0; }
.sp-programmliste .wp-block-post-title { font-size: var(--text-h4); margin: 0 0 var(--space-3); }
.sp-programmliste--uebersicht .wp-block-post-title { font-size: var(--text-h3); }
.sp-programmliste .wp-block-post-title a { color: var(--text-strong); text-decoration: none; }
.sp-programmliste .wp-block-post-title a:hover { color: var(--sp-green); }

/* ===== Projektlogos auf den Programmseiten ============================== */
/* Farbige Logos auf heller Kachel, wie die Markenlogos: auf dem dunklen Grund
   verlören sie sonst ihre eigenen Farben. */
.sp-projektlogos { gap: var(--space-5) !important; margin-top: var(--space-8) !important; }
.sp-projektlogos > * { margin: 0 !important; }
.sp-projektlogo { background: var(--sp-white); border-radius: var(--radius-xs); padding: var(--space-4); }
.sp-projektlogo img { height: 64px; width: auto; max-width: 260px; object-fit: contain; }