/* SportPort — Gerüst: Kopf, Fuß, Rechtstext.
   Farben, Schriften, Größen, Abstände kommen aus theme.json (web-tokens.json).
   Wer hier einen Farbwert fest einträgt statt einer --wp--preset-Variable,
   umgeht die geschlossene Palette. Maße nach redesign/gestaltung/30-geruest.css. */

/* Deutsche Komposita sind lang: erst ab zwölf Zeichen trennen, vier je Seite
   (im Redesign gemessen: „Anbieterkennzeichnung" schob das Impressum bei 390 px auf). */
h1, h2, h3, h4, p, li, blockquote {
	hyphens: auto;
	overflow-wrap: break-word;
	hyphenate-limit-chars: 12 4 4;
}

/* ===== Kopf ============================================================ */
.sp-kopf {
	min-height: 76px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	gap: var(--wp--preset--spacing--60);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sp-kopf__logo { margin: 0; flex: 0 0 auto; }
.sp-kopf__logo img { display: block; height: 40px; width: auto; max-width: none; }
/* 40 px hoch ist die Wortmarke 307 px breit — auf 320-px-Schirmen bliebe für die
   Menütaste nichts. Unter 30 rem 24 px hoch (184 px breit), über der Mindestbreite
   von 120 px aus dem Handbuch. */
@media (max-width: 30rem) {
	.sp-kopf__logo img { height: 24px; }
}
.sp-kopf__nav a {
	font-family: var(--wp--preset--font-family--sp-display);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--sp-weiss);
}
.sp-kopf__nav a:hover,
.sp-kopf__nav [aria-current="page"] { color: var(--wp--preset--color--sp-gruen); }
.sp-kopf .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--sp-dunkel-seite);
	color: var(--wp--preset--color--sp-weiss);
}

/* ===== Hauptteil ======================================================= */
.sp-haupt {
	padding-block: var(--wp--preset--spacing--90);
}
@media (max-width: 48rem) {
	.sp-haupt { padding-block: var(--wp--preset--spacing--80); }
}

/* ===== Überzeile (Eyebrow) ============================================== */
.sp-ueberzeile {
	font-family: var(--wp--preset--font-family--sp-display);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sp-gruen);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* ===== Fuß ============================================================= */
.sp-fuss {
	background: var(--wp--preset--color--sp-dunkel-abgesenkt);
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding-block: var(--wp--preset--spacing--90) var(--wp--preset--spacing--70);
	font-size: var(--wp--preset--font-size--sm);
}
.sp-fuss__logo { margin: 0; }
.sp-fuss__logo img { display: block; max-width: 100%; height: auto; }
/* Unter 348 px blieben für das Logo mit Claim nur 272 px, das CI-Paket verlangt
   mindestens 300 px (x-Höhe des Claims 8,2 px). Dort steht die Wortmarke ohne
   Claim — Entscheidung des Hubs, 25.09.2026. */
.sp-fuss__logo--schmal { display: none; }
@media (max-width: 347.98px) {
	.sp-fuss__logo--breit { display: none; }
	.sp-fuss__logo--schmal { display: block; }
}
.sp-fuss a { color: var(--wp--preset--color--sp-weiss); }
.sp-fuss a:hover { color: var(--wp--preset--color--sp-gruen); }
.sp-fuss__unten {
	margin-top: var(--wp--preset--spacing--80);
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: var(--wp--preset--font-size--xs);
}

/* ===== Rechtstext ====================================================== */
.sp-rechtstext h2 {
	font-size: var(--wp--preset--font-size--h-3);
	margin-top: var(--wp--preset--spacing--80);
}
.sp-rechtstext h3 {
	font-size: var(--wp--preset--font-size--h-4);
	margin-top: var(--wp--preset--spacing--70);
}
.sp-rechtstext h4 {
	font-size: var(--wp--preset--font-size--lead);
	margin-top: var(--wp--preset--spacing--60);
}

/* Technische Umsetzung: sichtbar abgesetzt, damit kein zweiter Firmenname
   zwischen den Pflichtangaben der Sportport GmbH steht. */
.sp-tu {
	margin-top: var(--wp--preset--spacing--90);
	padding-top: var(--wp--preset--spacing--70);
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.sp-tu__logo { margin: 0; }
.sp-tu__logo img { display: block; background: var(--wp--preset--color--sp-weiss); border-radius: 4px; }