/**
 * saison.css — Designschicht „Saison 26/27" für den SV Kaster 1993 e.V.
 *
 * Wird auf jeder Seite ZULETZT geladen und legt sich über die bestehenden
 * Stile. Inhalte und Funktionen bleiben unangetastet; diese Datei regelt
 * nur Wirkung: Farben, Schrift, Flächen, Verläufe, Tiefe.
 *
 * Grundregeln (bitte beibehalten):
 *   1. Blau trägt die Flächen, Gelb ist gezielter Akzent (Knöpfe, Zahlen,
 *      Ergebnisse, Linien).
 *   2. Gelb NIE als Textfarbe auf hellem Grund.
 *   3. Schatten in Nachtblau, nie in Schwarz.
 *   4. Große Verläufe bekommen feine Körnung, damit sie nicht streifig wirken.
 *   5. Animiert werden nur transform und opacity.
 *
 * Vereinsfarben aus dem Wappen (exakte Werte aus dem bestehenden Code):
 *   Vereinsblau #263F8F · Vereinsgelb #E4D24A
 */

/* ------------------------------------------------------------------ *
 * 1) Schriften — lokal, kein Aufruf fremder Server
 * ------------------------------------------------------------------ */
@font-face {
	font-family: "Anton";
	src: url("../fonts/anton-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Barlow Condensed";
	src: url("../fonts/barlow-condensed-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Barlow Condensed";
	src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "Barlow Condensed";
	src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

/* ------------------------------------------------------------------ *
 * 2) Palette und Gestaltungswerte
 * ------------------------------------------------------------------ */
:root {
	/* Blau */
	--sk-nacht-900: #0b1230;
	--sk-nacht-800: #101a45;
	--sk-nacht-700: #16245f;
	--sk-blau: #263f8f;
	--sk-blau-hell: #3f5bd0;
	/* Gelb */
	--sk-gelb: #e4d24a;
	--sk-gelb-hell: #f3e87a;
	--sk-gold: #f2c230;
	/* Hell */
	--sk-hell: #f5f7fc;
	--sk-hell-2: #ebeff8;
	--sk-weiss: #ffffff;

	/* Rollen im hellen Modus */
	--sk-grund: var(--sk-hell);
	--sk-grund-2: var(--sk-hell-2);
	--sk-flaeche: var(--sk-weiss);
	--sk-text: var(--sk-nacht-900);
	--sk-text-2: #3d4868;
	--sk-linie: #d6dceb;
	--sk-overline: var(--sk-blau);
	--sk-link: var(--sk-blau);

	/* Schrift */
	--sk-schrift-display: "Anton", "Barlow Semi Condensed", Impact, "Arial Narrow", sans-serif;
	--sk-schrift-unter: "Barlow Condensed", "Barlow Semi Condensed", "Arial Narrow", sans-serif;
	--sk-schrift-text: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Größen (fließend 375 bis 1440 px) */
	--sk-h1: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem);
	--sk-h2: clamp(2rem, 1.35rem + 2.8vw, 3.6rem);
	--sk-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
	--sk-lead: clamp(1.08rem, 1rem + 0.35vw, 1.3rem);

	/* Raster und Abstände */
	--sk-container: 1200px;
	--sk-gutter: clamp(16px, 4vw, 32px);
	--sk-sektion: clamp(4rem, 3rem + 5vw, 7.5rem);
	--sk-luft: clamp(1.5rem, 1rem + 2vw, 2.5rem);

	/* Formen */
	--sk-radius: 18px;
	--sk-radius-gross: 26px;
	--sk-radius-klein: 10px;

	/* Schatten in Nachtblau */
	--sk-schatten-1: 0 1px 2px rgba(11, 18, 48, 0.06), 0 4px 12px rgba(11, 18, 48, 0.06);
	--sk-schatten-2: 0 2px 6px rgba(11, 18, 48, 0.08), 0 14px 34px rgba(11, 18, 48, 0.12);
	--sk-schatten-3: 0 6px 18px rgba(11, 18, 48, 0.16), 0 30px 70px rgba(11, 18, 48, 0.24);

	/* Verläufe */
	--sk-verlauf-nacht: radial-gradient(120% 90% at 85% 0%, rgba(63, 91, 208, 0.34) 0%, rgba(63, 91, 208, 0) 55%),
		linear-gradient(135deg, #16245f 0%, #0b1230 62%, #0b1230 100%);
	--sk-verlauf-blau: radial-gradient(90% 80% at 15% 0%, rgba(63, 91, 208, 0.55) 0%, rgba(63, 91, 208, 0) 60%),
		linear-gradient(135deg, #263f8f 0%, #16245f 58%, #0b1230 100%);
	--sk-verlauf-gelb: linear-gradient(180deg, #f6ec8c 0%, #e4d24a 48%, #f2c230 100%);
	--sk-linie-gelb: linear-gradient(90deg, #e4d24a 0%, rgba(228, 210, 74, 0) 100%);

	/* Körnung als eingebettetes SVG-Rauschen */
	--sk-korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23k)'/%3E%3C/svg%3E");

	/* Alte Werte auf die neue Palette umlenken, damit alle Seiten folgen */
	--bg: var(--sk-grund);
	--bg-alt: var(--sk-grund-2);
	--surface: var(--sk-flaeche);
	--surface-sunken: var(--sk-grund-2);
	--text: var(--sk-text);
	--text-muted: var(--sk-text-2);
	--primary: var(--sk-blau);
	--primary-hover: var(--sk-nacht-700);
	--on-primary: #ffffff;
	--accent: var(--sk-gelb);
	--on-accent: var(--sk-nacht-900);
	--accent-strong: var(--sk-gold);
	--border: var(--sk-linie);
	--border-strong: var(--sk-blau);
	--cta-bg: var(--sk-gelb);
	--cta-text: var(--sk-nacht-900);
	--shadow-sm: var(--sk-schatten-1);
	--shadow-md: var(--sk-schatten-2);
	--shadow-lg: var(--sk-schatten-3);
	--radius-lg: var(--sk-radius);
	--radius-xl: var(--sk-radius-gross);
	--sv-blau-600: #263f8f;
	--sv-gelb-400: #e4d24a;
	--sv-nachtblau: #0b1230;
}

/* Dunkler Modus: über den Schalter (.is-dark) oder die Systemeinstellung */
.is-dark {
	--sk-grund: #0b1230;
	--sk-grund-2: #0f1a44;
	--sk-flaeche: #132055;
	--sk-text: #f2f5fc;
	--sk-text-2: #b3bdda;
	--sk-linie: #253472;
	--sk-overline: var(--sk-gelb);
	--sk-link: #c9d3ff;
	--sk-schatten-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px #1d2a63;
	--sk-schatten-2: 0 0 0 1px #1d2a63, 0 14px 34px rgba(3, 6, 20, 0.5);
	--sk-schatten-3: 0 0 0 1px #243374, 0 30px 70px rgba(3, 6, 20, 0.6);
	--primary: var(--sk-gelb);
	--on-primary: var(--sk-nacht-900);
	--border-strong: var(--sk-gelb);
}
@media (prefers-color-scheme: dark) {
	:root:not(.force-light) {
		--sk-grund: #0b1230;
		--sk-grund-2: #0f1a44;
		--sk-flaeche: #132055;
		--sk-text: #f2f5fc;
		--sk-text-2: #b3bdda;
		--sk-linie: #253472;
		--sk-overline: var(--sk-gelb);
		--sk-link: #c9d3ff;
		--sk-schatten-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px #1d2a63;
		--sk-schatten-2: 0 0 0 1px #1d2a63, 0 14px 34px rgba(3, 6, 20, 0.5);
		--sk-schatten-3: 0 0 0 1px #243374, 0 30px 70px rgba(3, 6, 20, 0.6);
		--primary: var(--sk-gelb);
		--on-primary: var(--sk-nacht-900);
		--border-strong: var(--sk-gelb);
	}
}

/* Dunkle Sektionen: Überschriften hell, Akzente gelb — in beiden Modi */
[data-header-theme="dark"],
.sk-dunkel {
	--sk-text: #f2f5fc;
	--sk-text-2: #c3cbe6;
	--sk-overline: var(--sk-gelb);
	--sk-link: #ffffff;
	--sk-linie: rgba(255, 255, 255, 0.14);
	--text: #f2f5fc;
	--text-muted: #c3cbe6;
}

/* ------------------------------------------------------------------ *
 * 3) Grundschrift und Überschriften
 * ------------------------------------------------------------------ */
body {
	background: var(--sk-grund);
	color: var(--sk-text);
	font-family: var(--sk-schrift-text);
}
h1, h2,
.svk-hero__title,
.sk-titel {
	font-family: var(--sk-schrift-display);
	font-weight: 400;
	letter-spacing: 0.005em;
	line-height: 1.02;
	text-wrap: balance;
}
h1, .svk-hero__title { font-size: var(--sk-h1); }
h2 { font-size: var(--sk-h2); }
h3, h4 {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.15;
}
h3 { font-size: var(--sk-h3); }

.svk-overline,
.sk-overline {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sk-overline);
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 0.9rem;
}
/* Gelbe Trennlinie vor der Overline, verläuft ins Transparente */
.sk-overline::before,
.svk-section__head .svk-overline::before {
	content: "";
	width: 2.4rem;
	height: 3px;
	border-radius: 2px;
	background: var(--sk-linie-gelb);
	flex: 0 0 auto;
}
/* Auf hellem Grund ist die Linie blau statt gelb (Gelb verschwindet dort) */
[data-header-theme="light"] .sk-overline::before,
[data-header-theme="light"] .svk-section__head .svk-overline::before {
	background: linear-gradient(90deg, var(--sk-blau) 0%, rgba(38, 63, 143, 0) 100%);
}
.is-dark [data-header-theme="light"] .sk-overline::before,
.is-dark [data-header-theme="light"] .svk-section__head .svk-overline::before {
	background: var(--sk-linie-gelb);
}
@media (prefers-color-scheme: dark) {
	:root:not(.force-light) [data-header-theme="light"] .sk-overline::before,
	:root:not(.force-light) [data-header-theme="light"] .svk-section__head .svk-overline::before {
		background: var(--sk-linie-gelb);
	}
}

.sk-lead,
.svk-lead {
	font-size: var(--sk-lead);
	line-height: 1.55;
	color: var(--sk-text-2);
	max-width: 62ch;
}

/* Zahlen als Typo-Element */
.sk-zahl {
	font-family: var(--sk-schrift-display);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

:focus-visible {
	outline: 3px solid var(--sk-gelb);
	outline-offset: 3px;
}
[data-header-theme="light"] :focus-visible {
	outline-color: var(--sk-blau);
}

/* ------------------------------------------------------------------ *
 * 4) Raster und Sektionen
 * ------------------------------------------------------------------ */
.sk-container {
	width: 100%;
	max-width: calc(var(--sk-container) + 2 * var(--sk-gutter));
	margin-inline: auto;
	padding-inline: var(--sk-gutter);
}
.sk-sektion {
	position: relative;
	isolation: isolate;
	padding-block: var(--sk-sektion);
	overflow: clip;
}
.sk-sektion--hell { background: var(--sk-grund); color: var(--sk-text); }
.sk-sektion--hell-2 { background: var(--sk-grund-2); color: var(--sk-text); }

/* Nachtblau: diagonaler Verlauf mit radialem Lichtschein */
.sk-sektion--nacht,
.sk-sektion--blau {
	color: #f2f5fc;
	background: var(--sk-verlauf-nacht);
}
.sk-sektion--blau { background: var(--sk-verlauf-blau); }

/* Feine Körnung über großen Verläufen */
.sk-sektion--nacht::after,
.sk-sektion--blau::after,
.sk-korn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--sk-korn);
	background-size: 220px 220px;
	opacity: 0.07;
	mix-blend-mode: overlay;
}

/* Trikotstreifen: dezente Diagonalen auf blauen Flächen */
.sk-streifen::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.028) 0 18px, rgba(255, 255, 255, 0) 18px 46px);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
}

/* Rasen: Mähstreifen als leise Textur auf hellem Grund */
.sk-rasen {
	background-image: repeating-linear-gradient(90deg, rgba(38, 63, 143, 0.028) 0 70px, rgba(38, 63, 143, 0) 70px 140px);
}
.is-dark .sk-rasen { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 70px, rgba(255, 255, 255, 0) 70px 140px); }

/* Kreidelinien als Ornament: Mittelkreis mit Mittellinie */
.sk-kreide-mitte {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	width: clamp(420px, 60vw, 820px);
	aspect-ratio: 1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M200 2 C199 90 201 310 200 398'/%3E%3Cpath d='M200 110 c50 -1 91 40 90 90 c1 50 -40 91 -90 90 c-50 1 -91 -40 -90 -90 c-1 -50 40 -91 90 -90z'/%3E%3Ccircle cx='200' cy='200' r='3.2' fill='%23ffffff'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.07;
}
/* Strafraum mit Bogen */
.sk-kreide-strafraum {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	width: clamp(360px, 44vw, 640px);
	aspect-ratio: 16 / 10;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 250' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M40 2 L41 150 L360 149 L359 2'/%3E%3Cpath d='M130 2 L131 58 L270 57 L269 2'/%3E%3Cpath d='M152 150 c12 30 84 31 96 0'/%3E%3Ccircle cx='200' cy='106' r='3' fill='%23ffffff'/%3E%3C/svg%3E") top center / contain no-repeat;
	opacity: 0.08;
}
[data-header-theme="light"] .sk-kreide-mitte,
[data-header-theme="light"] .sk-kreide-strafraum {
	filter: invert(20%) sepia(60%) saturate(2000%) hue-rotate(215deg);
	opacity: 0.07;
}

/* Wappen als halbtransparentes Wasserzeichen */
.sk-wasserzeichen {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	width: clamp(260px, 38vw, 520px);
	aspect-ratio: 1;
	background: url("../logo/sv-kaster-wappen-512.webp") center / contain no-repeat;
	opacity: 0.06;
	filter: grayscale(0.2);
}

/* Sektionskopf */
.sk-kopf {
	display: grid;
	gap: 0.4rem;
	margin-bottom: var(--sk-luft);
	max-width: 70ch;
}
.sk-kopf h2 { margin: 0; color: inherit; }
.sk-kopf .sk-lead { margin: 0.6rem 0 0; }
.sk-kopf--zeile {
	max-width: none;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 1rem 2rem;
}
@media (max-width: 760px) {
	.sk-kopf--zeile { grid-template-columns: 1fr; }
}

/* Übergang: dünne gelbe Linie, die ins Transparente läuft */
.sk-trenner {
	height: 3px;
	border: 0;
	margin: 0;
	background: var(--sk-linie-gelb);
	border-radius: 2px;
	max-width: 180px;
}

/* ------------------------------------------------------------------ *
 * 5) Knöpfe
 * ------------------------------------------------------------------ */
.svk-btn,
.sk-btn {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: 1.06rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 0.78em 1.55em;
	line-height: 1.1;
	transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	border: 0;
	cursor: pointer;
}
.svk-btn--large { font-size: 1.14rem; padding: 0.95em 1.9em; }

/* Gelb: Verlauf mit feiner Glanzkante oben */
.svk-btn--primary,
.sk-btn--gelb {
	background: var(--sk-verlauf-gelb);
	color: var(--sk-nacht-900) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(160, 120, 10, 0.25), 0 6px 18px rgba(242, 194, 48, 0.28);
}
.svk-btn--primary:hover,
.sk-btn--gelb:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(160, 120, 10, 0.25), 0 12px 28px rgba(242, 194, 48, 0.38);
}

/* Blau gefüllt */
.svk-btn--secondary,
.sk-btn--blau {
	background: linear-gradient(180deg, #3552b4 0%, #263f8f 60%, #1f3478 100%);
	color: #ffffff !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 18px rgba(11, 18, 48, 0.25);
}
.svk-btn--secondary:hover,
.sk-btn--blau:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 26px rgba(11, 18, 48, 0.32); }
.is-dark .svk-btn--secondary { background: linear-gradient(180deg, #4a67d6 0%, #3f5bd0 55%, #3149ad 100%); }

/* Weiß gefüllt: Zweitknopf auf dunklem Grund */
.svk-btn--hell,
.sk-btn--hell {
	background: #ffffff;
	color: var(--sk-nacht-900) !important;
	box-shadow: inset 0 -2px 0 rgba(11, 18, 48, 0.12), 0 6px 18px rgba(3, 6, 20, 0.25);
}
.svk-btn--hell:hover,
.sk-btn--hell:hover { transform: translateY(-2px); background: #eef2ff; }

/* Kontur: nur auf hellem Grund */
.svk-btn--ghost,
.sk-btn--kontur {
	background: transparent;
	color: var(--sk-blau) !important;
	box-shadow: inset 0 0 0 2px var(--sk-blau);
}
.svk-btn--ghost:hover,
.sk-btn--kontur:hover { transform: translateY(-2px); background: rgba(38, 63, 143, 0.06); }
.is-dark .svk-btn--ghost,
.is-dark .sk-btn--kontur { color: #ffffff !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
@media (prefers-color-scheme: dark) {
	:root:not(.force-light) .svk-btn--ghost,
	:root:not(.force-light) .sk-btn--kontur { color: #ffffff !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
}
[data-header-theme="dark"] .svk-btn--ghost,
[data-header-theme="dark"] .sk-btn--kontur { color: #ffffff !important; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }

.sk-textlink {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sk-link);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
}
.sk-textlink:hover { opacity: 0.8; }

/* ------------------------------------------------------------------ *
 * 6) Karten: weicher Schatten, beim Überfahren Anheben mit gelber Kante
 * ------------------------------------------------------------------ */
.sk-karte,
.svk-info-card,
.svk-team-card,
.svk-news-card,
.svk-spiel,
.svk-sponsor__link {
	background: var(--sk-flaeche);
	border: 1px solid var(--sk-linie);
	border-radius: var(--sk-radius);
	box-shadow: var(--sk-schatten-1);
}
.sk-hebt,
.svk-team-card,
.svk-news-card {
	position: relative;
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}
.sk-hebt::after,
.svk-team-card::after,
.svk-news-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 -3px 0 var(--sk-gelb), 0 0 0 1px rgba(228, 210, 74, 0.55);
	opacity: 0;
	transition: opacity 0.3s ease;
}
@media (hover: hover) {
	.sk-hebt:hover,
	.svk-team-card:hover,
	.svk-news-card:hover {
		transform: translateY(-6px);
		box-shadow: var(--sk-schatten-3);
	}
	.sk-hebt:hover::after,
	.svk-team-card:hover::after,
	.svk-news-card:hover::after { opacity: 1; }
}

/* Abzeichen */
.sk-marke {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.34em 0.8em;
	border-radius: 999px;
	background: rgba(38, 63, 143, 0.1);
	color: var(--sk-blau);
}
[data-header-theme="dark"] .sk-marke,
.sk-dunkel .sk-marke { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.sk-marke--heim { background: var(--sk-verlauf-gelb); color: var(--sk-nacht-900) !important; }
.sk-marke--aus { background: rgba(255, 255, 255, 0.12); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
[data-header-theme="light"] .sk-marke--aus { background: rgba(38, 63, 143, 0.08); color: var(--sk-blau); box-shadow: inset 0 0 0 1px rgba(38, 63, 143, 0.3); }

/* ------------------------------------------------------------------ *
 * 7) Bestehende Sektionen an die neue Palette angleichen
 *    (gilt für alle Unterseiten, die ihr Markup behalten)
 * ------------------------------------------------------------------ */
:root {
	--aurora-a: rgba(63, 91, 208, 0.10);
	--aurora-b: rgba(242, 194, 48, 0.08);
}
.svk-section { background-color: var(--sk-grund); }
.svk-section--alt { background-color: var(--sk-grund-2); }
.svk-section--blau,
.svk-section--dark,
.svk-matchday,
.svk-spielfeld {
	background: var(--sk-verlauf-blau);
	color: #f2f5fc;
}
.svk-section--blau::after,
.svk-section--dark::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--sk-korn);
	background-size: 220px 220px;
	opacity: 0.07;
	mix-blend-mode: overlay;
}
.svk-section--blau :where(h2, h3, h4),
.svk-section--dark :where(h2, h3, h4) { color: #ffffff; }
.svk-section--blau p,
.svk-section--dark p { color: #dbe2f4; }
.svk-section__head { margin-bottom: var(--sk-luft); }
.svk-section__head h2 { margin-block: 0.35rem 0; }
.svk-lead { font-size: var(--sk-lead); }

/* Info-Karten mit gelber Oberkante statt Goldstrich */
.svk-info-card { padding: clamp(1.25rem, 3vw, 1.75rem); }
.svk-info-card--gold { border-top: 0; position: relative; overflow: hidden; }
.svk-info-card--gold::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--sk-verlauf-gelb);
}

/* Gelbe Mitmach-Box: Verlauf mit Glanz, Schrift immer Nachtblau */
.svk-gelb-box {
	background: linear-gradient(125deg, #f6ec8c 0%, #e4d24a 45%, #f2c230 100%);
	border-radius: var(--sk-radius-gross);
	box-shadow: var(--sk-schatten-2), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.svk-gelb-box,
.svk-gelb-box :where(h2, h3, p, li, strong, .svk-overline) { color: var(--sk-nacht-900) !important; }
.svk-gelb-box .svk-overline::before { background: var(--sk-nacht-900); }

/* CTA-Streifen: Gelbverlauf mit Glanzkante, Knopf in Blau */
.svk-cta-streifen {
	background: linear-gradient(118deg, #f6ec8c 0%, #e4d24a 42%, #f2c230 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.svk-cta-streifen__text h2 {
	font-family: var(--sk-schrift-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
	line-height: 1;
	color: var(--sk-nacht-900) !important;
}
.svk-cta-streifen__text p { color: var(--sk-nacht-800) !important; font-weight: 500; }

/* ------------------------------------------------------------------ *
 * 8) Kopfzeile
 * ------------------------------------------------------------------ */
.svk-header__brand-text {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: 1.28rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.svk-nav__list a {
	font-family: var(--sk-schrift-unter);
	font-weight: 600;
	font-size: 1.06rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.svk-header.is-on-dark {
	background: rgba(11, 18, 48, 0.42);
	border-bottom-color: rgba(255, 255, 255, 0.1);
}
.svk-header.is-scrolled.is-on-dark { background: rgba(11, 18, 48, 0.86); }
.svk-header.is-scrolled { box-shadow: 0 10px 30px rgba(11, 18, 48, 0.18); }
.svk-header.is-on-dark .svk-nav__list a[aria-current="page"] { color: #ffffff; box-shadow: inset 0 -3px 0 var(--sk-gelb); }
.svk-header:not(.is-on-dark) .svk-nav__list a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--sk-blau); }
.is-dark .svk-header:not(.is-on-dark) .svk-nav__list a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--sk-gelb); }
.svk-nav-cta.svk-btn { padding: 0.6em 1.2em; font-size: 0.98rem; }

/* ------------------------------------------------------------------ *
 * 9) Seitenköpfe (alle Unterseiten): Foto mit Nachtblau-Verlauf
 * ------------------------------------------------------------------ */
.svk-hero {
	background-color: var(--sk-nacht-900);
	background-image: var(--sk-verlauf-nacht);
}
.svk-hero::before {
	background-image:
		radial-gradient(60% 80% at 85% 0%, rgba(63, 91, 208, 0.35) 0%, rgba(63, 91, 208, 0) 60%),
		linear-gradient(95deg, rgba(11, 18, 48, 0.92) 0%, rgba(11, 18, 48, 0.72) 36%, rgba(16, 26, 69, 0.32) 70%, rgba(22, 36, 95, 0.18) 100%),
		linear-gradient(180deg, rgba(11, 18, 48, 0.1) 0%, rgba(11, 18, 48, 0) 40%, rgba(11, 18, 48, 0.78) 100%),
		var(--svk-hero-image, none);
	background-size: cover, cover, cover, cover;
	background-position: center, center, center, center;
	background-repeat: no-repeat;
}
@media (max-width: 700px) {
	.svk-hero::before {
		background-image:
			linear-gradient(180deg, rgba(11, 18, 48, 0.35) 0%, rgba(11, 18, 48, 0.62) 45%, rgba(11, 18, 48, 0.94) 100%),
			var(--svk-hero-image, none);
		background-size: cover, cover;
	}
}
/* Körnung über dem Kopf, gelbe Lichtkante unten */
.svk-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--sk-korn), linear-gradient(90deg, var(--sk-gelb) 0%, rgba(228, 210, 74, 0.35) 40%, rgba(228, 210, 74, 0) 75%);
	background-size: 220px 220px, 100% 3px;
	background-position: 0 0, left bottom;
	background-repeat: repeat, no-repeat;
	opacity: 0.9;
}
.svk-hero__flutlicht {
	background: radial-gradient(90% 70% at 78% -8%, rgba(255, 244, 196, 0.2) 0%, rgba(255, 244, 196, 0) 55%);
}
.svk-hero__title {
	font-family: var(--sk-schrift-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: var(--sk-h1);
	line-height: 0.95;
	letter-spacing: 0.005em;
	text-shadow: 0 2px 24px rgba(3, 6, 20, 0.35);
	max-width: 16ch;
}
.svk-hero--page .svk-hero__title { font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.2rem); }
.svk-hero__sub { color: #e3e9f7; font-size: var(--sk-lead); line-height: 1.55; }
.svk-hero .svk-overline { color: var(--sk-gelb); }
.svk-hero .svk-overline::before { background: linear-gradient(90deg, var(--sk-gelb), rgba(228, 210, 74, 0)); }

/* ------------------------------------------------------------------ *
 * 10) Fußbereich
 * ------------------------------------------------------------------ */
.svk-footer {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background: linear-gradient(160deg, #0b1230 0%, #0e1740 55%, #101c4f 100%);
	color: #c4cce4;
}
.svk-footer::before {
	content: "";
	position: absolute;
	right: -6%;
	bottom: -18%;
	z-index: -1;
	width: clamp(280px, 40vw, 560px);
	aspect-ratio: 1;
	pointer-events: none;
	background: url("../logo/sv-kaster-wappen-512.webp") center / contain no-repeat;
	opacity: 0.05;
}
.svk-footer::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--sk-gelb) 0%, var(--sk-gold) 30%, rgba(242, 194, 48, 0) 80%);
}
.svk-footer h3 {
	font-family: var(--sk-schrift-unter) !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 1rem !important;
	color: var(--sk-gelb) !important;
}
.svk-footer a { color: #ffffff; }
.svk-footer a:hover { color: var(--sk-gelb); }
.svk-footer hr { border-top-color: rgba(255, 255, 255, 0.12) !important; }
.svk-footer__claim { color: #c4cce4; }

/* ------------------------------------------------------------------ *
 * 11) Startbereich (nur Startseite)
 * ------------------------------------------------------------------ */
.sk-start.svk-hero--video { min-height: min(82svh, 790px); align-items: stretch; flex-direction: column; }
.sk-start .svk-hero__inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(3rem, 7vw, 5rem) clamp(3.5rem, 7vw, 5.5rem);
}
.sk-start::before {
	background-image:
		radial-gradient(50% 60% at 18% 42%, rgba(63, 91, 208, 0.28) 0%, rgba(63, 91, 208, 0) 70%),
		linear-gradient(100deg, rgba(11, 18, 48, 0.9) 0%, rgba(11, 18, 48, 0.62) 42%, rgba(16, 26, 69, 0.2) 75%, rgba(22, 36, 95, 0.1) 100%),
		linear-gradient(180deg, rgba(11, 18, 48, 0.25) 0%, rgba(11, 18, 48, 0) 35%, rgba(11, 18, 48, 0.85) 100%);
	background-size: cover;
}
@media (max-width: 700px) {
	.sk-start::before {
		background-image: linear-gradient(180deg, rgba(11, 18, 48, 0.45) 0%, rgba(11, 18, 48, 0.55) 40%, rgba(11, 18, 48, 0.95) 100%);
	}
}
.sk-start__wappen-wrap {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: clamp(84px, 11vw, 128px);
	aspect-ratio: 1;
	margin-bottom: 1.25rem;
}
.sk-start__wappen-wrap::before {
	content: "";
	position: absolute;
	inset: -45%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 238, 150, 0.4) 0%, rgba(242, 194, 48, 0.14) 45%, rgba(242, 194, 48, 0) 100%);
}
.sk-start__wappen { width: 100%; height: auto; filter: drop-shadow(0 8px 22px rgba(3, 6, 20, 0.5)); }
.sk-start .svk-hero__title { max-width: 13ch; }
.sk-start .svk-hero__sub { max-width: 46ch; }

/* Kompakte Leiste mit dem nächsten Spiel, ragt in den Spieltag hinein */
.sk-leiste-wrap {
	position: relative;
	z-index: 3;
	margin-bottom: calc(-1 * clamp(2.2rem, 4vw, 3rem));
}
.sk-leiste {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 0.9rem 1.5rem;
	padding: 0.9rem 1rem 0.9rem 1.25rem;
	border-radius: var(--sk-radius);
	background: linear-gradient(120deg, rgba(22, 36, 95, 0.94) 0%, rgba(11, 18, 48, 0.96) 100%);
	box-shadow: 0 24px 50px rgba(3, 6, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	color: #ffffff;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.1);
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sk-leiste::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: var(--sk-verlauf-gelb);
}
@media (hover: hover) {
	.sk-leiste:hover { transform: translateY(-3px); box-shadow: 0 30px 60px rgba(3, 6, 20, 0.5), inset 0 0 0 1px rgba(228, 210, 74, 0.5); }
}
.sk-leiste__label {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sk-gelb);
	line-height: 1.2;
}
.sk-leiste__label small { display: block; color: #b3bdda; font-weight: 600; letter-spacing: 0.08em; }
.sk-leiste__paarung {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.sk-leiste__paarung img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.sk-leiste__paarung span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sk-leiste__trenner { color: var(--sk-gelb); padding-inline: 0.15rem; }
.sk-leiste__zeit {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-family: var(--sk-schrift-unter);
	font-weight: 600;
	color: #dbe2f4;
	white-space: nowrap;
}
.sk-leiste__countdown {
	font-family: var(--sk-schrift-display);
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	color: #ffffff;
	font-variant-numeric: tabular-nums;
}
.sk-leiste__pfeil {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sk-verlauf-gelb);
	color: var(--sk-nacht-900);
	flex: none;
}
@media (max-width: 820px) {
	.sk-leiste { grid-template-columns: 1fr auto; }
	.sk-leiste__label { grid-column: 1 / -1; }
	.sk-leiste__paarung { grid-column: 1 / 2; }
	.sk-leiste__zeit { grid-column: 1 / -1; justify-content: space-between; }
}
@media (max-width: 480px) {
	.sk-leiste__paarung img { width: 28px; height: 28px; }
	.sk-leiste__countdown { font-size: 1.25rem; }
}

/* ------------------------------------------------------------------ *
 * 12) Spieltag: nächstes Spiel, letztes Ergebnis, Widget-Rahmen
 * ------------------------------------------------------------------ */
.sk-spieltag { padding-top: calc(var(--sk-sektion) + 1.5rem); }
.sk-spieltag__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: var(--sk-luft);
}
.sk-spieltag__kopf h2 { margin: 0.35rem 0 0; color: #ffffff; }

/* Mannschafts-Umschalter */
.sk-schalter {
	display: inline-flex;
	padding: 4px;
	gap: 4px;
	border-radius: 999px;
	background: rgba(11, 18, 48, 0.55);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.sk-schalter__btn {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: 0.98rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #dbe2f4;
	background: transparent;
	border: 0;
	border-radius: 999px;
	padding: 0.55em 1.15em;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
	white-space: nowrap;
}
.sk-schalter__btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.sk-schalter__btn[aria-pressed="true"] {
	background: var(--sk-verlauf-gelb);
	color: var(--sk-nacht-900);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Karten-Paar: große Karte + Ergebniskarte */
.sk-spieltag__karten {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
	align-items: stretch;
}
@media (max-width: 900px) {
	.sk-spieltag__karten { grid-template-columns: 1fr; }
}

.sk-match {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--sk-radius-gross);
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.03) 100%), rgba(11, 18, 48, 0.55);
	box-shadow: var(--sk-schatten-2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
	color: #ffffff;
}
.sk-match::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--sk-verlauf-gelb);
}
.sk-match::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -40% -30% auto -30%;
	height: 90%;
	pointer-events: none;
	background: radial-gradient(50% 60% at 50% 0%, rgba(255, 244, 196, 0.14) 0%, rgba(255, 244, 196, 0) 70%);
}
.sk-match__zeile-oben {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1rem;
}
.sk-match__wettbewerb {
	font-family: var(--sk-schrift-unter);
	font-weight: 600;
	font-size: 0.98rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #c9d3ee;
	margin: 0;
}
.sk-match__paarung {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(0.5rem, 2vw, 1.5rem);
	margin-block: 0.25rem;
}
.sk-match__seite {
	display: grid;
	justify-items: center;
	gap: 0.6rem;
	text-align: center;
	min-width: 0;
}
.sk-match__wappen {
	width: clamp(64px, 11vw, 104px);
	height: clamp(64px, 11vw, 104px);
	object-fit: contain;
	filter: drop-shadow(0 6px 16px rgba(3, 6, 20, 0.45));
}
.sk-match__team {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
	overflow-wrap: anywhere;
}
.sk-match__mitte {
	display: grid;
	justify-items: center;
	gap: 0.3rem;
	font-family: var(--sk-schrift-display);
	color: var(--sk-gelb);
}
.sk-match__vs { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); line-height: 1; letter-spacing: 0.04em; }
.sk-match__anstoss {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.08em;
	color: #ffffff;
	white-space: nowrap;
}
.sk-match__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0.9rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	list-style: none;
}
.sk-match__meta li {
	display: grid;
	gap: 0.1rem;
	font-family: var(--sk-schrift-unter);
	font-weight: 600;
	color: #ffffff;
	font-size: 1.05rem;
}
.sk-match__meta b {
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9fabd0;
}

/* Countdown */
.sk-uhr {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sk-uhr li {
	flex: 1 1 0;
	min-width: 68px;
	display: grid;
	justify-items: center;
	gap: 0.15rem;
	padding: 0.65rem 0.4rem 0.5rem;
	border-radius: var(--sk-radius-klein);
	background: rgba(11, 18, 48, 0.55);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.sk-uhr__zahl {
	font-family: var(--sk-schrift-display);
	font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem);
	line-height: 1;
	color: #ffffff;
	font-variant-numeric: tabular-nums;
}
.sk-uhr__cap {
	font-family: var(--sk-schrift-unter);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9fabd0;
}
.sk-match__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: 0;
}
.sk-match__quelle {
	font-family: var(--sk-schrift-unter);
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	color: #9fabd0;
	margin: 0;
}
.sk-match__quelle a { color: #dbe2f4; }

/* Ergebniskarte */
.sk-match--ergebnis { background: linear-gradient(150deg, rgba(63, 91, 208, 0.35) 0%, rgba(11, 18, 48, 0.75) 60%), rgba(11, 18, 48, 0.6); }
.sk-match--ergebnis .sk-match__wappen { width: clamp(46px, 7vw, 66px); height: clamp(46px, 7vw, 66px); }
.sk-match--ergebnis .sk-match__team { font-size: 1rem; }
.sk-ergebnis {
	display: grid;
	justify-items: center;
	gap: 0.35rem;
	text-align: center;
}
.sk-ergebnis__zahl {
	font-family: var(--sk-schrift-display);
	font-size: clamp(3.4rem, 2rem + 6vw, 5.6rem);
	line-height: 0.9;
	letter-spacing: 0.02em;
	background: var(--sk-verlauf-gelb);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 6px 18px rgba(242, 194, 48, 0.25));
	font-variant-numeric: tabular-nums;
}
.sk-ergebnis__label {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0;
}
.sk-match__leer {
	margin: 0;
	color: #dbe2f4;
	font-size: 1.05rem;
}

/* ---- Widget-Rahmen (fussball.de) ---- */
.sk-widget {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--sk-radius-gross);
	overflow: hidden;
	background: var(--sk-flaeche);
	box-shadow: var(--sk-schatten-2);
	border: 1px solid var(--sk-linie);
}
.sk-widget__kopf {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding: 1rem clamp(1rem, 2.5vw, 1.5rem);
	background: linear-gradient(120deg, #101a45 0%, #16245f 100%);
	color: #ffffff;
}
.sk-widget__kopf::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 4px;
	background: var(--sk-verlauf-gelb);
}
.sk-widget__titel {
	margin: 0;
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: 1.16rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
}
.sk-widget__titel small {
	display: block;
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	color: #9fabd0;
}
.sk-tabs {
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(3, 6, 20, 0.35);
	overflow: auto;
	scrollbar-width: none;
}
.sk-tabs::-webkit-scrollbar { display: none; }
.sk-tabs__btn {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #c9d3ee;
	background: transparent;
	border: 0;
	border-radius: 999px;
	padding: 0.5em 1.1em;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.sk-tabs__btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.sk-tabs__btn[aria-selected="true"] {
	background: #ffffff;
	color: var(--sk-nacht-900);
}
.sk-widget__buehne {
	position: relative;
	padding: clamp(0.75rem, 2vw, 1.25rem);
	background: #ffffff;
	min-height: 220px;
}
.is-dark .sk-widget__buehne { background: #f5f7fc; }
/* Ausgeblendete Tabs behalten ihre Breite, damit die Widgets innen die
   richtige Höhe melden. display:none würde die Höhe auf 0 rechnen. */
.sk-panel { position: relative; }
.sk-panel.is-aus {
	position: absolute;
	inset: clamp(0.75rem, 2vw, 1.25rem) clamp(0.75rem, 2vw, 1.25rem) auto;
	visibility: hidden;
	pointer-events: none;
}
.sk-panel iframe { display: block; width: 100%; border: 0; min-height: 200px; }
.sk-widget__fuss {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	padding: 0.75rem clamp(1rem, 2.5vw, 1.5rem);
	background: var(--sk-grund-2);
	border-top: 1px solid var(--sk-linie);
	font-size: 0.92rem;
	color: var(--sk-text-2);
}

/* Platzhalter für eine fehlende Widget-Kennung */
.sk-platzhalter {
	display: grid;
	gap: 0.6rem;
	justify-items: start;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 2px dashed var(--sk-linie);
	border-radius: var(--sk-radius);
	background: repeating-linear-gradient(135deg, rgba(38, 63, 143, 0.04) 0 12px, rgba(38, 63, 143, 0) 12px 24px);
	color: var(--sk-text);
}
.sk-platzhalter__titel {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sk-blau);
	margin: 0;
}
.is-dark .sk-platzhalter__titel { color: var(--sk-gelb); }
.sk-platzhalter p { margin: 0; color: var(--sk-text-2); max-width: 60ch; }

/* Einwilligungs-Fassade im Widget-Rahmen */
.sk-consent-box {
	display: grid;
	gap: 0.75rem;
	justify-items: start;
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--sk-radius);
	background: linear-gradient(135deg, rgba(38, 63, 143, 0.06) 0%, rgba(38, 63, 143, 0.02) 100%);
	border: 1px solid var(--sk-linie);
}
.sk-consent-box h4 {
	margin: 0;
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sk-text);
}
.sk-consent-box p { margin: 0; color: var(--sk-text-2); max-width: 62ch; }
.sk-consent-box label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem;
	color: var(--sk-text-2);
}

/* ------------------------------------------------------------------ *
 * 13) Bento: Mannschaften
 * ------------------------------------------------------------------ */
.sk-bento {
	display: grid;
	gap: clamp(0.85rem, 1.8vw, 1.4rem);
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1000px) { .sk-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sk-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sk-team {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 200px;
	padding: clamp(1rem, 2vw, 1.5rem);
	border-radius: var(--sk-radius);
	background: var(--sk-flaeche);
	box-shadow: var(--sk-schatten-1);
	border: 1px solid var(--sk-linie);
	color: var(--sk-text);
	grid-column: span 2;
}
.sk-team--gross { grid-column: span 3; grid-row: span 2; min-height: clamp(320px, 34vw, 440px); }
.sk-team--breit { grid-column: span 3; min-height: clamp(200px, 20vw, 250px); }
.sk-team--klein { grid-column: span 1; }
@media (max-width: 1000px) {
	.sk-team--gross { grid-column: span 4; grid-row: auto; min-height: 320px; }
	.sk-team--breit { grid-column: span 4; }
	.sk-team--klein { grid-column: span 2; }
}
@media (max-width: 620px) {
	.sk-team,
	.sk-team--gross,
	.sk-team--breit,
	.sk-team--klein { grid-column: span 2; min-height: 200px; }
}

/* Foto-Karten: Bild füllt die Karte, Nachtblau-Verlauf trägt die Schrift */
.sk-team--foto { color: #ffffff; border-color: transparent; }
.sk-team__bild {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sk-team--foto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(170deg, rgba(11, 18, 48, 0.15) 0%, rgba(11, 18, 48, 0.55) 45%, rgba(11, 18, 48, 0.94) 100%);
}
.sk-team--foto .sk-team__zeit,
.sk-team--foto .sk-team__label { color: #dbe2f4; }

/* Buchstaben-Karten: Typografie statt Bild (keine Kinderfotos) */
.sk-team--wort {
	background: linear-gradient(155deg, #16245f 0%, #0b1230 100%);
	color: #ffffff;
	border-color: transparent;
	justify-content: flex-end;
}
.sk-team__buchstabe {
	position: absolute;
	right: -0.06em;
	top: -0.18em;
	z-index: -1;
	font-family: var(--sk-schrift-display);
	font-size: clamp(7rem, 12vw, 11rem);
	line-height: 1;
	color: rgba(255, 255, 255, 0.09);
	pointer-events: none;
	user-select: none;
}
.sk-team--wort .sk-team__zeit,
.sk-team--wort .sk-team__label { color: #b3bdda; }

.sk-team__label {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sk-text-2);
	margin: 0 0 0.3rem;
}
.sk-team__name {
	font-family: var(--sk-schrift-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: clamp(1.35rem, 1.05rem + 1vw, 2.1rem);
	line-height: 1;
	margin: 0 0 0.45rem;
	color: inherit;
}
.sk-team--klein .sk-team__name { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); }
.sk-team__name a { color: inherit; text-decoration: none; }
.sk-team__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sk-team__zeit {
	margin: 0;
	font-family: var(--sk-schrift-unter);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--sk-text-2);
}
.sk-team__zeit b {
	display: block;
	font-size: 0.76rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sk-gold);
}
.sk-team--foto .sk-team__zeit b { color: var(--sk-gelb); }

/* ------------------------------------------------------------------ *
 * 14) Bento: Aktuelles
 * ------------------------------------------------------------------ */
/* Keine eigene Spaltenzahl: Diese Zeile stand NACH den Regeln für
   schmale Bildschirme und hat sie ausgehebelt – auf dem Handy standen
   die Beiträge dadurch in drei schmalen Spalten nebeneinander. Das
   Raster von .sk-bento gilt jetzt auch hier, samt Handy-Regeln. */
.sk-news {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--sk-radius);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: var(--sk-schatten-2), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	color: #ffffff;
	grid-column: span 2;
}
.sk-news--gross { grid-column: span 3; grid-row: span 2; }
.sk-news--klein { grid-column: span 3; }
@media (max-width: 1000px) {
	.sk-news, .sk-news--gross, .sk-news--klein { grid-column: span 4; grid-row: auto; }
}
@media (max-width: 620px) {
	.sk-news, .sk-news--gross, .sk-news--klein { grid-column: span 2; }
}
.sk-news__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #101a45;
}
.sk-news--gross .sk-news__media { aspect-ratio: 16 / 10; }
.sk-news__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-news__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(180deg, rgba(11, 18, 48, 0) 0%, rgba(11, 18, 48, 0.75) 100%);
}
.sk-news__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1rem, 2vw, 1.5rem);
}
.sk-news__meta {
	margin: 0;
	font-family: var(--sk-schrift-unter);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sk-gelb);
}
.sk-news__titel {
	margin: 0;
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: clamp(1.15rem, 1rem + 0.7vw, 1.7rem);
	line-height: 1.15;
	color: #ffffff;
}
.sk-news--gross .sk-news__titel { font-family: var(--sk-schrift-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.02; }
.sk-news__titel a { color: inherit; text-decoration: none; }
.sk-news__titel a::after { content: ""; position: absolute; inset: 0; }
.sk-news__text { margin: 0; color: #cdd6ee; font-size: 1rem; line-height: 1.55; }

/* ------------------------------------------------------------------ *
 * 15) Verein: Bilder links, Text rechts
 * ------------------------------------------------------------------ */
.sk-verein {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}
@media (max-width: 900px) { .sk-verein { grid-template-columns: 1fr; } }
.sk-verein__bilder {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.sk-bild {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--sk-radius);
	box-shadow: var(--sk-schatten-2);
	background: var(--sk-flaeche);
}
.sk-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk-bild--gross { grid-column: span 2; aspect-ratio: 16 / 9; }
.sk-bild--hoch { aspect-ratio: 4 / 3; }
.sk-bild figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.4rem 1rem 0.7rem;
	font-family: var(--sk-schrift-unter);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.06em;
	color: #ffffff;
	background: linear-gradient(180deg, rgba(11, 18, 48, 0) 0%, rgba(11, 18, 48, 0.85) 100%);
}
/* Klar beschrifteter Platzhalter statt Stockfoto */
.sk-foto-platzhalter {
	display: grid;
	place-content: center;
	gap: 0.4rem;
	text-align: center;
	padding: 1rem;
	aspect-ratio: 4 / 3;
	border: 2px dashed var(--sk-linie);
	border-radius: var(--sk-radius);
	background: repeating-linear-gradient(135deg, rgba(38, 63, 143, 0.05) 0 14px, rgba(38, 63, 143, 0) 14px 28px);
	color: var(--sk-text-2);
	font-family: var(--sk-schrift-unter);
	font-weight: 600;
	letter-spacing: 0.04em;
}
.sk-foto-platzhalter b {
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sk-blau);
}
.is-dark .sk-foto-platzhalter b { color: var(--sk-gelb); }

.sk-verein__text > * { max-width: 56ch; }
.sk-zahlen {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 3vw, 2.5rem);
	margin: 1.75rem 0;
	padding: 0;
	list-style: none;
}
.sk-zahlen li { display: grid; gap: 0.1rem; }
.sk-zahlen .sk-zahl {
	font-family: var(--sk-schrift-display);
	font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem);
	line-height: 0.95;
	color: var(--sk-blau);
	font-variant-numeric: tabular-nums;
}
.is-dark .sk-zahlen .sk-zahl { color: var(--sk-gelb); }
.sk-zahlen b {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sk-text-2);
}

/* ------------------------------------------------------------------ *
 * 16) Sponsoren auf dunklem Grund
 * ------------------------------------------------------------------ */
.sk-sektion--nacht .svk-sponsor__link,
.sk-sektion--blau .svk-sponsor__link {
	background: #ffffff;
	color: var(--sk-nacht-900);
	border-color: rgba(11, 18, 48, 0.08);
	box-shadow: 0 10px 26px rgba(3, 6, 20, 0.3);
}
.sk-sektion--nacht .svk-sponsor__name,
.sk-sektion--blau .svk-sponsor__name { color: var(--sk-nacht-900); }
.sk-sektion--nacht .svk-sponsor__zusatz,
.sk-sektion--blau .svk-sponsor__zusatz { color: #4a5678; }
.sk-sektion--nacht .svk-sponsor--text .svk-sponsor__link,
.sk-sektion--blau .svk-sponsor--text .svk-sponsor__link {
	background: rgba(255, 255, 255, 0.92);
	border-color: rgba(11, 18, 48, 0.2);
}
.sk-sektion--nacht .svk-sponsor__link:hover { border-color: var(--sk-gelb); }
.sk-sponsoren-band { margin-top: var(--sk-luft); }

/* ------------------------------------------------------------------ *
 * 17) Kontakt
 * ------------------------------------------------------------------ */
.sk-kontakt {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
@media (max-width: 900px) { .sk-kontakt { grid-template-columns: 1fr; } }
.sk-kontakt__liste {
	display: grid;
	gap: 1rem;
	margin: 1.75rem 0;
	padding: 0;
	list-style: none;
}
.sk-kontakt__liste li {
	display: grid;
	gap: 0.15rem;
	padding-left: 1rem;
	border-left: 3px solid var(--sk-gelb);
	font-size: 1.08rem;
}
.sk-kontakt__liste b {
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sk-text-2);
}
.sk-karte {
	overflow: hidden;
	border-radius: var(--sk-radius-gross);
	box-shadow: var(--sk-schatten-2);
	border: 1px solid var(--sk-linie);
	background: var(--sk-flaeche);
}
.sk-karte iframe { display: block; width: 100%; height: clamp(300px, 42vw, 440px); border: 0; }
.sk-karte__fuss {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	font-size: 0.92rem;
	color: var(--sk-text-2);
	border-top: 1px solid var(--sk-linie);
}

/* ------------------------------------------------------------------ *
 * 18) Ruhe bei prefers-reduced-motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.sk-hebt,
	.svk-team-card,
	.svk-news-card,
	.sk-leiste,
	.svk-btn,
	.sk-btn { transition: none !important; }
	.sk-hebt:hover,
	.svk-team-card:hover,
	.svk-news-card:hover,
	.sk-leiste:hover,
	.svk-btn:hover { transform: none !important; }
}

/* Flyer und Grafiken in den News-Karten: ganz zeigen statt beschneiden. */
.sk-news__media--grafik { aspect-ratio: 4 / 3; background: #0b1230; }
.sk-news--gross .sk-news__media--grafik { aspect-ratio: 16 / 11; }
.sk-news__media--grafik img { object-fit: contain; padding: 0.5rem; }
.sk-news__media--grafik::after { display: none; }

/* Hinweiszeile in der Spielkarte, wenn der Anpfiff erreicht ist. */
.sk-match__status {
	margin: 0;
	padding: 0.85rem 1rem;
	border-radius: var(--sk-radius-klein);
	background: rgba(11, 18, 48, 0.55);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sk-gelb);
	text-align: center;
}

/* Gezeichneter Ball im Sieg-Jubel (ersetzt das frühere Emoji). */
.svk-sieg-jubel__ball svg { display: block; width: 38px; height: 38px; }

/* Die Widget-Bühne ist immer hell (fussball.de liefert helle Ansichten).
   Deshalb stehen Schriftfarben hier fest und folgen nicht dem Dunkelmodus. */
.sk-widget__buehne { color: var(--sk-nacht-900); }
.sk-widget__buehne .sk-consent-box,
.sk-widget__buehne .sk-platzhalter { border-color: rgba(11, 18, 48, 0.18); }
.sk-widget__buehne .sk-consent-box h4 { color: var(--sk-nacht-900); }
.sk-widget__buehne .sk-consent-box p,
.sk-widget__buehne .sk-consent-box label,
.sk-widget__buehne .sk-platzhalter p { color: #3d4868; }
.sk-widget__buehne .sk-platzhalter__titel { color: var(--sk-blau); }
.sk-widget__buehne .sk-match__quelle a { color: var(--sk-blau); }

/* Mannschaftsnamen nicht am Bindestrich umbrechen (B-Juniorinnen). */
.sk-team__name { hyphens: none; word-break: keep-all; overflow-wrap: normal; }
.sk-team--klein .sk-team__name { font-size: clamp(1.02rem, 0.9rem + 0.4vw, 1.3rem); }
.sk-team--klein .sk-team__zeit { font-size: 0.95rem; }

/* Die große News-Karte füllt zwei Reihen: das Bild wächst mit, damit unten
   keine leere Fläche steht. */
.sk-news--gross .sk-news__media { flex: 1 1 auto; aspect-ratio: auto; min-height: 260px; }
.sk-news--gross .sk-news__body { flex: 0 0 auto; }

/* Schmale Bildschirme: Pfeil nach oben rechts, Paarung und Zeit darunter. */
@media (max-width: 820px) {
	.sk-leiste {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"label pfeil"
			"paarung paarung"
			"zeit zeit";
	}
	.sk-leiste__label { grid-area: label; }
	.sk-leiste__pfeil { grid-area: pfeil; }
	.sk-leiste__paarung { grid-area: paarung; }
	.sk-leiste__zeit { grid-area: zeit; }
}

/* Kopf- und Fußzeile des Widget-Rahmens liegen auf heller Fläche, auch wenn
   ringsherum eine dunkle Sektion steht. Farben deshalb fest setzen. */
.sk-widget__fuss { color: #3d4868; background: #ebeff8; border-top-color: #d6dceb; }
.sk-widget__fuss a { color: var(--sk-blau); }
.is-dark .sk-widget__fuss { color: #3d4868; }

/* Große Zahlen und Platzhalter-Beschriftungen: auf hellem Grund Vereinsblau,
   auf dunklem Grund Vereinsgelb. Ein Token, damit beide Modi stimmen. */
:root { --sk-zahl-farbe: var(--sk-blau); }
.is-dark { --sk-zahl-farbe: var(--sk-gelb); }
@media (prefers-color-scheme: dark) {
	:root:not(.force-light) { --sk-zahl-farbe: var(--sk-gelb); }
}
[data-header-theme="dark"],
.sk-dunkel,
.sk-sektion--nacht,
.sk-sektion--blau { --sk-zahl-farbe: var(--sk-gelb); }
.sk-zahlen .sk-zahl,
.sk-foto-platzhalter b,
.sk-platzhalter__titel { color: var(--sk-zahl-farbe); }

/* Die Leiste „Nächstes Spiel" ragt absichtlich in den Spieltag-Bereich.
   Der Startbereich darf sie dafür unten nicht abschneiden – seitlich bleibt
   er begrenzt, damit nichts waagerecht überläuft. */
.sk-start { overflow: visible; z-index: 2; }
@supports (overflow: clip) {
	.sk-start { overflow-x: clip; overflow-y: visible; }
}

/* ------------------------------------------------------------------ *
 * 19) Instagram-Feed (Startseite, im Bereich „Aktuelles")
 *     Offizielle Profil-Einbettung von Instagram. Sie meldet keine Höhe,
 *     deshalb rechnet CSS sie aus: Kopfzeile plus zwei Reihen mit je drei
 *     quadratischen Beiträgen (2/3 der Breite).
 * ------------------------------------------------------------------ */
.sk-insta {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 900px) {
	.sk-insta { grid-template-columns: 1fr; }
}
.sk-insta__text > * { max-width: 44ch; }
.sk-insta__titel {
	margin: 0.35rem 0 0.75rem;
	font-family: var(--sk-schrift-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
	line-height: 1.02;
	color: #ffffff;
}
.sk-insta__text .sk-lead { color: #cdd6ee; margin: 0 0 1.5rem; }
.sk-insta__rahmen {
	container-type: inline-size;
	border-radius: var(--sk-radius-gross);
	overflow: hidden;
	background: #ffffff;
	box-shadow: var(--sk-schatten-2);
	position: relative;
}
.sk-insta__rahmen::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	z-index: 1;
	background: var(--sk-verlauf-gelb);
}
.sk-insta__iframe {
	display: block;
	width: 100%;
	height: calc(66.667cqw + 205px);
	border: 0;
	background: #ffffff;
}
@supports not (height: 1cqw) {
	.sk-insta__iframe { height: 590px; }
}
/* Die Einwilligungs-Fläche steht auf weißem Grund: Schrift fest dunkel. */
.sk-insta__rahmen .svk-consent__facade,
.sk-insta__rahmen .svk-consent__facade :where(h3, p, label) { color: var(--sk-nacht-900); }
.sk-insta__rahmen .svk-consent__text,
.sk-insta__rahmen .svk-consent__remember { color: #3d4868; }
.sk-insta__rahmen .svk-consent__legal a { color: var(--sk-blau); }
.sk-insta__rahmen .svk-consent__icon { color: var(--sk-blau); }

/* ------------------------------------------------------------------ *
 * 20) Wappen einheitlich groß
 *
 * Die Logos der Gegner kommen vom Verband in jeder Form: mal quadratisch,
 * mal breit, mal mit eigenem weißem Rand. Nebeneinander sah das aus, als
 * wären die Embleme unterschiedlich groß. Jedes Wappen sitzt deshalb in
 * einem gleich großen runden Feld mit weißem Grund – so wirken sie alle
 * gleich, egal welche Form das Logo hat.
 * ------------------------------------------------------------------ */
.sk-match__wappen,
.sk-leiste__paarung img,
.svk-spiel__wappen {
	box-sizing: border-box;
	background: #ffffff;
	border-radius: 50%;
	object-fit: contain;
	box-shadow: inset 0 0 0 1px rgba(11, 18, 48, 0.1), 0 6px 16px rgba(3, 6, 20, 0.32);
}
.sk-match__wappen { padding: 10px; }
.sk-match--ergebnis .sk-match__wappen { padding: 7px; }
.sk-leiste__paarung img { padding: 4px; border-radius: 50%; }
.svk-spiel__wappen { padding: 3px; box-shadow: inset 0 0 0 1px rgba(11, 18, 48, 0.12); }

/* ------------------------------------------------------------------ *
 * 21) Sponsorenkarten gleich hoch, Logos gleich groß
 *
 * Karten mit Logo waren höher als Karten ohne, dadurch standen die Reihen
 * schief. Jetzt hat jede Karte dieselbe Höhe und jedes Logo denselben
 * Platz; der Name sitzt immer unten.
 * ------------------------------------------------------------------ */
.svk-sponsoren-grid { align-items: stretch; }
.svk-sponsor { display: flex; }
.svk-sponsor__link {
	width: 100%;
	min-height: 10.5rem;
	justify-content: center;
}
.svk-sponsor__logo {
	width: 100%;
	max-width: 220px;
	height: 72px;
	max-height: 72px;
	object-fit: contain;
}
.svk-sponsor--text .svk-sponsor__link { min-height: 10.5rem; }
/* Firmennamen nicht mitten im Wort trennen */
.svk-sponsor__name { hyphens: manual; overflow-wrap: break-word; }

/* ------------------------------------------------------------------ *
 * 22) Beitragsliste (Newsseite)
 *
 * Vorher stand je Beitrag der ganze Auszug als Textwand ohne Bild – auf
 * dem Handy eine endlose Kolonne, in der man nichts erkannte. Jetzt:
 * Bild, Überschrift, zwei Zeilen Anreißer, Knopf. Auf dem Handy liegt
 * das Bild oben, ab Tablet links daneben.
 * ------------------------------------------------------------------ */
.sk-beitrag {
	display: grid;
	gap: clamp(0.9rem, 2vw, 1.5rem);
	align-items: start;
	margin-bottom: 1.25rem;
}
@media (min-width: 720px) {
	.sk-beitrag { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: center; }
	.sk-beitrag--ohne-bild { grid-template-columns: minmax(0, 1fr); }
}
.sk-beitrag__media {
	display: block;
	overflow: hidden;
	border-radius: var(--sk-radius-klein);
	background: #0b1230;
	aspect-ratio: 4 / 3;
	box-shadow: inset 0 0 0 1px rgba(11, 18, 48, 0.12);
}
.sk-beitrag__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-beitrag__media--grafik img { object-fit: contain; padding: 0.35rem; }
@media (max-width: 719px) {
	/* Hochformatige Flyer auf dem Handy höher zeigen, sonst wird die
	   Schrift darin zu klein. */
	.sk-beitrag__media { aspect-ratio: 5 / 4; }
	.sk-beitrag__media--grafik { aspect-ratio: 3 / 4; }
}
.sk-beitrag__text { display: grid; gap: 0.45rem; }
.sk-beitrag__meta {
	margin: 0;
	font-family: var(--sk-schrift-unter);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sk-text-2);
}
.sk-beitrag__titel {
	margin: 0;
	font-family: var(--sk-schrift-unter);
	font-weight: 700;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	line-height: 1.15;
	overflow-wrap: break-word;
	hyphens: manual;
}
.sk-beitrag__titel a { color: inherit; text-decoration: none; }
.sk-beitrag__titel a:hover { text-decoration: underline; }
.sk-beitrag__teaser {
	margin: 0;
	color: var(--sk-text-2);
	font-size: 1rem;
	line-height: 1.55;
	/* Höchstens drei Zeilen, damit alle Karten ruhig nebeneinander stehen */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sk-beitrag__mehr { margin: 0.35rem 0 0; }
.sk-beitrag__mehr .svk-btn { font-size: 0.95rem; padding: 0.6em 1.2em; }

/* Firmennamen nicht mitten im Wort trennen – die ältere Regel für
   Text-Sponsoren war stärker und erzwang „Sanie-rung". */
.svk-sponsor--text .svk-sponsor__name,
.svk-sponsor__name { hyphens: manual; overflow-wrap: break-word; }

/* ------------------------------------------------------------------ *
 * 23) Fußzeile auf schmalen Bildschirmen
 *
 * Vier Blöcke untereinander ergaben auf dem Handy anderthalb Bildschirme
 * Fußzeile. Die beiden Linklisten stehen jetzt nebeneinander, Zeilen und
 * Logo sind enger. Inhalte bleiben alle erhalten.
 * ------------------------------------------------------------------ */
@media (max-width: 620px) {
	.svk-footer .svk-section--tight { padding-block: 2.25rem 1.5rem; }
	.svk-footer .svk-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1rem;
	}
	/* Zwei mal zwei statt vier untereinander: Wappen | Verein,
	   Mitmachen | Kontakt. Halbiert die Höhe, ohne etwas wegzulassen. */
	.svk-footer .svk-grid--4 > div:first-child img { width: 56px; height: 56px; }
	.svk-footer .svk-grid--4 :where(ul, p) { font-size: 0.95rem; }
	.svk-footer .svk-social a { font-size: 0.9rem; }
	.svk-footer__claim { line-height: 1.5; }
	.svk-footer .has-body-sm-font-size { font-size: 0.8rem !important; }
	.svk-footer .svk-grid--4 > div:first-child .svk-footer__claim { margin-top: 0.6rem !important; }
	.svk-footer h3 { margin-bottom: 0.3rem; }
	.svk-footer h3[style*="margin-top"] { margin-top: 1.1rem !important; }
	/* Die Zeilenhöhe steht als Inline-Angabe im Markup und lässt sich nur
	   so überschreiben. */
	.svk-footer ul { line-height: 1.85 !important; }
	.svk-footer hr { margin: 1.25rem 0 !important; }
	.svk-footer__bottom { gap: 0.75rem; }
	.svk-effekt-toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
	.svk-effekt-toggles .svk-toggle-btn { font-size: 0.82rem; padding: 0.45em 0.9em; }
}