/* =========================================================================
   HSG XeNTiS Lipizzanerheimat — Theme-Styles
   Aufbau: 1 Grundlagen · 2 Kopf/Navigation · 3 Hero · 4 Bausteine
           5 Kader · 6 Spielplan/Tabelle · 7 Partner · 8 Fuss · 9 Utilities
   ========================================================================= */

/* --- 1 Grundlagen ------------------------------------------------------- */

/* Farbrollen: "ink" ist Text und kippt mit dem Erscheinungsbild.
   "deep" ist eine dunkle Fläche und bleibt in beiden Erscheinungsbildern
   dunkel — sonst wuerde weisse Schrift darauf unlesbar. Für Text auf solchen
   Flächen gibt es "on-dark", das ebenfalls nie kippt. */
:root {
	/* Dunkel ist der Grundzustand: Ohne ausdrueckliche Wahl sieht jeder Gast
	   die dunkle Fassung — unabhaengig von der Einstellung seines Systems.
	   Über den Schalter im Kopfbereich lässt sich auf hell wechseln; die
	   Wahl merkt sich der Browser. */
	color-scheme: dark;

	--hsg-radius: 14px;
	--hsg-radius-lg: 22px;
	--hsg-header-h: 76px;
	--hsg-ease: cubic-bezier(.22, 1, .36, 1);
	--hsg-ring: 0 0 0 3px rgba(0, 165, 211, .35);

	--wp--preset--color--base: #071624;
	--wp--preset--color--surface: #0d2233;
	--wp--preset--color--line: #1c3346;
	--wp--preset--color--ink: #e7eef4;
	--wp--preset--color--muted: #93a7b8;
	--wp--preset--color--primary-dark: #38c4e8;

	/* Schaltflaechen: #00a5d3 traegt weisse Schrift nur mit 2,9:1. Dunkel also
	   das helle Blau mit dunkler Schrift, hell das dunklere Blau mit weisser —
	   beides deutlich über 4,5:1. */
	--hsg-btn-bg: #38c4e8;
	--hsg-btn-fg: #062744;
	--hsg-btn-bg-hover: #7ad8f2;

	/* Flächen, die sich nicht aus der Palette ergeben. */
	--hsg-footer-bg: #040d16;
	/* Partnerlogos sind Fremdmaterial für hellen Grund — die Kacheln bleiben
	   deshalb in beiden Fassungen weiss, sonst werden dunkle Logos unlesbar. */
	--hsg-partner-bg: #ffffff;
	--hsg-thead-bg: #0b3f78;
}

/* Helle Fassung — nur nach ausdruecklicher Wahl. */
:root[data-hsg-theme="light"] {
	color-scheme: light;

	--wp--preset--color--base: #ffffff;
	--wp--preset--color--surface: #f4f7fa;
	--wp--preset--color--line: #dde5ed;
	--wp--preset--color--ink: #10181f;
	--wp--preset--color--muted: #5b6b7a;
	--wp--preset--color--primary-dark: #007899;

	--hsg-btn-bg: #007899;
	--hsg-btn-fg: #ffffff;
	--hsg-btn-bg-hover: #005c76;

	--hsg-footer-bg: var(--wp--preset--color--deep);
	--hsg-thead-bg: var(--wp--preset--color--deep);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--hsg-header-h) + 1rem);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

:where(a) {
	text-underline-offset: .18em;
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hsg-skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 1000;
	padding: .75rem 1.25rem;
	background: var(--wp--preset--color--deep);
	color: #fff;
	border-radius: 0 0 var(--hsg-radius) var(--hsg-radius);
	font-weight: 700;
	text-decoration: none;
	transition: top .2s var(--hsg-ease);
}

.hsg-skip-link:focus {
	top: 0;
}

/* Knöpfe -------------------------------------------------------------- */

.hsg-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .85em 1.9em;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--hsg-btn-bg, #007899);
	color: var(--hsg-btn-fg, #fff);
	font-size: .875rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform .25s var(--hsg-ease), background-color .25s var(--hsg-ease), box-shadow .25s var(--hsg-ease);
}

.hsg-btn:hover,
.hsg-btn:focus-visible {
	background: var(--hsg-btn-bg-hover, #005c76);
	color: var(--hsg-btn-fg, #fff);
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--brand);
}

.hsg-btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.hsg-btn--ghost:hover,
.hsg-btn--ghost:focus-visible {
	background: #fff;
	color: var(--wp--preset--color--deep);
	box-shadow: none;
}

.hsg-btn--small {
	padding: .6em 1.1em;
	font-size: .75rem;
}

/* --- 2 Kopfbereich und Navigation --------------------------------------- */
/* Basis ist der Core-Navigation-Block, damit die Menüs im Site-Editor
   gepflegt werden können. Hier wird nur das Aussehen gesetzt. */

.hsg-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Deckend — unterhalb von 1024 px bewusst ohne backdrop-filter: Der Filter
	   macht den Header zum Bezugsrahmen für position:fixed und sperrt damit
	   das mobile Menü-Overlay auf die Kopfzeilenhoehe ein. */
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid transparent;
	transition: box-shadow .3s var(--hsg-ease), border-color .3s var(--hsg-ease);
}

/* Ab der Desktop-Navigation gibt es kein Overlay mehr — hier darf geblurrt werden. */
@media (min-width: 1024px) {
	.hsg-header {
		background: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
		backdrop-filter: saturate(180%) blur(14px);
		-webkit-backdrop-filter: saturate(180%) blur(14px);
	}
}

.hsg-header.is-stuck {
	border-bottom-color: var(--wp--preset--color--line);
	box-shadow: 0 6px 24px rgba(6, 39, 68, .07);
}

.hsg-header > .wp-block-group {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 2.5rem);
	min-height: var(--hsg-header-h);
}

/* Logo und Wortmarke */

.hsg-header .wp-block-site-logo img {
	width: auto;
	height: clamp(44px, 5.6vw, 64px);
}

.hsg-header .hsg-brand {
	flex: 0 0 auto;
	min-width: 0;
}

.hsg-header .wp-block-site-logo {
	flex: 0 0 auto;
}

.hsg-brand__name {
	display: none;
	line-height: 1.04;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.hsg-brand__line1,
.hsg-brand__line2 {
	display: block;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -.015em;
	white-space: nowrap;
}

.hsg-brand__line1 {
	font-size: clamp(1.125rem, 1.9vw, 1.5rem);
}

.hsg-brand__line2 {
	font-size: clamp(.8125rem, 1.35vw, 1.0625rem);
	letter-spacing: .03em;
	color: var(--wp--preset--color--primary-dark);
}

/* Auf mittleren Schirmen reicht der Platz für die Wortmarke. */
@media (min-width: 560px) {
	.hsg-brand__name {
		display: block;
	}
}

/* Direkt oberhalb des Umschaltpunkts braucht die Navigation den Platz. */
@media (min-width: 1024px) and (max-width: 1320px) {
	.hsg-brand__name {
		display: none;
	}
}

/* Hauptnavigation */

.hsg-header .wp-block-navigation {
	font-size: .8125rem;
	font-weight: 900;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.hsg-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	display: block;
	padding: .55rem .2rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
}

.hsg-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: .2rem;
	bottom: .05rem;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--hsg-ease);
}

.hsg-header .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.hsg-header .wp-block-navigation-item__content:focus-visible::after,
.hsg-header .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Untermenüs */

/* Der Navigation-Block setzt für Untermenues ohne eigenen Hintergrund per
   Kernregel hartes Weiß — mit höherer Spezifität als eine einfache
   Theme-Regel. Im dunklen Erscheinungsbild stuende sonst helle Schrift auf
   weissem Grund. Deshalb hier gleich spezifisch genug dagegenhalten. */
.hsg-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container,
.hsg-header .wp-block-navigation__submenu-container {
	min-width: 230px;
	padding: .4rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hsg-radius);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--preset--shadow--lift);
}

.hsg-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .55rem .7rem;
	border-radius: 8px;
	text-transform: none;
	letter-spacing: 0;
	font-size: .875rem;
}

.hsg-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.hsg-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-dark);
}

/* Mobiles Overlay des Navigation-Blocks */

/* Der Navigation-Block schaltet von Haus aus bei 600 px auf das Overlay um.
   Für dieses Menü ist das zu früh — ab 1024 px ist genug Platz für die
   ausgeschriebene Navigation, darunter übernimmt das Overlay. */
@media (max-width: 1023px) {
	.hsg-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.hsg-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: grid;
	}
}

@media (min-width: 1024px) {
	.hsg-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

.hsg-header .wp-block-navigation__responsive-container-open,
.hsg-header .wp-block-navigation__responsive-container-close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	color: var(--wp--preset--color--ink);
}

.hsg-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1rem, 5vw, 2.5rem);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

/* Die Kopfzeilen-Navigation ist rechtsbündig ausgerichtet. Im Overlay vererbt
   sich dieses align-items:flex-end durch die ganze Kette und schiebt vor allem
   die Untermenüs nach rechts, wo lange Einträge abgeschnitten werden. Deshalb
   hier auf allen Ebenen zurücksetzen. */
.hsg-header .wp-block-navigation__responsive-container.is-menu-open :is(
	.wp-block-navigation__responsive-container-content,
	.wp-block-navigation__container,
	.wp-block-navigation__submenu-container,
	.wp-block-navigation-item
) {
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* Untermenüs im Overlay: eingerückt statt als schwebende Karte. */
.hsg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static;
	padding: 0 0 0 1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
}

.hsg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: 100%;
	/* Die Desktop-Navigation läuft einzeilig; lange Eintraege wie
	   "Trainingsinformation Handballjugend" müssen im Overlay umbrechen
	   dürfen, sonst stehen sie rechts über dem Rand. */
	white-space: normal;
	overflow-wrap: break-word;
}

/* Dritte Ebene etwas weniger einruecken, damit Platz bleibt. */
.hsg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	padding-left: .75rem;
}

/* Der Schließen-Knopf braucht Luft zum oberen Rand. */
.hsg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: clamp(1rem, 5vw, 2.5rem);
	inset-inline-end: clamp(1rem, 5vw, 2.5rem);
}

.hsg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1rem .25rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 1.25rem;
	letter-spacing: -.01em;
}

.hsg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

.hsg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0;
	box-shadow: none;
	background: transparent;
	padding-inline-start: 1rem;
}

/* Umschalter hell/dunkel */

.hsg-iconbtn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: background-color .2s var(--hsg-ease), border-color .2s var(--hsg-ease);
}

.hsg-iconbtn:hover {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--primary);
}

.hsg-iconbtn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hsg-iconbtn .hsg-icon-sun { display: none; }
.hsg-iconbtn[aria-pressed="true"] .hsg-icon-sun { display: block; }
.hsg-iconbtn[aria-pressed="true"] .hsg-icon-moon { display: none; }

/* --- 3 Hero -------------------------------------------------------------- */

.hsg-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(460px, 78vh, 760px);
	padding-block: clamp(3.5rem, 9vw, 7rem);
	overflow: hidden;
	background: var(--wp--preset--color--deep);
	color: #fff;
	isolation: isolate;
}

.hsg-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hsg-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

.hsg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(120% 90% at 85% 15%, rgba(0, 165, 211, .42) 0%, transparent 60%),
		linear-gradient(100deg, rgba(6, 39, 68, .95) 0%, rgba(6, 39, 68, .82) 46%, rgba(6, 39, 68, .35) 100%);
}

.hsg-hero__inner {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 2.5rem);
}

.hsg-hero__content {
	max-width: min(100%, 62rem);
}

.hsg-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1.25rem;
	padding: .5rem 1rem .5rem .75rem;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(6px);
	font-size: .75rem;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hsg-hero h1 {
	/* 8.6vw hält das längste Wort ("LIPIZZANERHEIMAT", rund 9,9 em breit)
	   von 320 px bis 1440 px in einer Zeile; max-width lässt ihm Platz. */
	margin: 0 0 1.25rem;
	max-width: 12em;
	color: #fff;
	font-size: clamp(1.75rem, 8.6vw, 5.5rem);
	line-height: .94;
	letter-spacing: -.035em;
	text-transform: uppercase;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.hsg-hero h1 em {
	display: block;
	font-style: italic;
	color: var(--wp--preset--color--primary);
}

.hsg-hero__lead {
	max-width: 34rem;
	margin: 0 0 2rem;
	color: rgba(255, 255, 255, .84);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

.hsg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.hsg-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 0 rgba(0, 165, 211, .7);
	animation: hsg-pulse 2.4s infinite;
}

@keyframes hsg-pulse {
	70% { box-shadow: 0 0 0 12px rgba(0, 165, 211, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 165, 211, 0); }
}

/* --- 4 Bausteine --------------------------------------------------------- */

.hsg-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.hsg-eyebrow {
	display: block;
	margin: 0 0 .4rem;
	color: var(--wp--preset--color--primary-dark);
	font-size: .75rem;
	font-weight: 900;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Spielleiste (nächstes Spiel + letztes Ergebnis) */

.hsg-matchbar {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.hsg-matchbar {
		grid-template-columns: 2fr 1fr;
	}
}

.hsg-matchbar__card {
	min-width: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--hsg-radius-lg);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
}

.hsg-matchbar__card--next {
	background: var(--wp--preset--gradient--brand-diagonal);
	border-color: transparent;
	color: #fff;
	box-shadow: var(--wp--preset--shadow--lift);
}

.hsg-matchbar__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin: 0 0 .9rem;
	font-size: .75rem;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .9;
}

.hsg-matchbar__comp {
	padding: .25rem .6rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: .625rem;
	letter-spacing: .1em;
	opacity: .8;
}

.hsg-matchbar__teams {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .65rem;
	font-size: clamp(1.4rem, 3.6vw, 2.25rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -.025em;
	text-transform: uppercase;
}

.hsg-matchbar__vs {
	font-size: .8em;
	font-style: italic;
	opacity: .55;
}

.hsg-matchbar__team.is-own {
	color: #fff;
	text-shadow: 0 0 22px rgba(0, 165, 211, .55);
}

.hsg-matchbar__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.2rem;
	margin: .9rem 0 1.25rem;
	font-size: .875rem;
	opacity: .85;
}

.hsg-matchbar__score {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .6rem;
	margin: 0 0 .5rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.hsg-matchbar__score strong {
	font-size: 1.85rem;
	font-weight: 900;
	color: var(--wp--preset--color--ink);
}

.hsg-countdown {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.5rem;
}

.hsg-countdown__unit {
	/* Auf schmalen Schirmen dürfen die Felder schrumpfen, sonst sprengen
	   vier feste Kacheln die Karte. */
	flex: 1 1 54px;
	min-width: 0;
	max-width: 88px;
	padding: .55rem .5rem;
	border-radius: var(--hsg-radius);
	background: rgba(255, 255, 255, .14);
	text-align: center;
}

.hsg-countdown__value {
	display: block;
	font-size: 1.5rem;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.hsg-countdown__label {
	display: block;
	font-size: .625rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .75;
}

/* News */

.hsg-news {
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.75rem);
}

.hsg-news__grid {
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.75rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}

.hsg-news__card {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hsg-radius-lg);
	background: var(--wp--preset--color--base);
	transition: transform .35s var(--hsg-ease), box-shadow .35s var(--hsg-ease), border-color .35s var(--hsg-ease);
}

.hsg-news__card:hover {
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--lift);
}

.hsg-news__link {
	display: grid;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.hsg-news__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--wp--preset--gradient--brand-soft);
}

.hsg-news__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Die Pressefotos sind Hochformat; der obere Bildbereich trägt das Motiv,
	   deshalb beim Beschnitt nach oben ausrichten statt mittig. */
	object-position: center 28%;
	transition: transform .6s var(--hsg-ease);
}

.hsg-news__card:hover .hsg-news__media img {
	transform: scale(1.055);
}

.hsg-news__body {
	display: grid;
	align-content: start;
	gap: .55rem;
	padding: clamp(1.1rem, 2.2vw, 1.6rem);
}

.hsg-news__meta {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hsg-news__title {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.25;
	text-wrap: balance;
}

.hsg-news__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: .9375rem;
	line-height: 1.6;
}

.hsg-news__more {
	font-size: .8125rem;
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

@media (min-width: 900px) {
	.hsg-news.has-featured {
		grid-template-columns: 1.15fr 1fr;
		align-items: start;
	}

	.hsg-news__card--featured .hsg-news__media {
		aspect-ratio: 4 / 3;
	}

	.hsg-news__card--featured .hsg-news__title {
		font-size: 1.75rem;
	}

	.hsg-news.has-featured .hsg-news__grid {
		grid-template-columns: 1fr;
	}

	.hsg-news.has-featured .hsg-news__grid .hsg-news__link {
		grid-template-columns: 38% 1fr;
	}

	.hsg-news.has-featured .hsg-news__grid .hsg-news__media {
		aspect-ratio: auto;
		height: 100%;
	}

	/* Karten ohne Beitragsbild nutzen die volle Breite. */
	.hsg-news.has-featured .hsg-news__grid .hsg-news__link:not(:has(.hsg-news__media)) {
		grid-template-columns: 1fr;
	}

	/* In den flachen Seitenkarten wird aus dem Hochformat ein sehr breiter
	   Ausschnitt — daher noch weiter nach oben ausrichten, sonst fehlen Köpfe. */
	.hsg-news.has-featured .hsg-news__grid .hsg-news__media img {
		object-position: center 12%;
	}
}

/* --- 5 Kader ------------------------------------------------------------- */

.hsg-roster__filter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.hsg-chip {
	padding: .5rem 1.05rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--muted);
	font: inherit;
	font-size: .8125rem;
	font-weight: 700;
	cursor: pointer;
	transition: all .22s var(--hsg-ease);
}

.hsg-chip:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-dark);
}

.hsg-chip.is-active {
	background: var(--wp--preset--color--deep);
	border-color: var(--wp--preset--color--deep);
	color: #fff;
}

.hsg-roster__grid {
	display: grid;
	gap: clamp(.75rem, 2vw, 1.5rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.hsg-player {
	transition: opacity .3s var(--hsg-ease), transform .3s var(--hsg-ease);
}

.hsg-player[hidden] {
	display: none;
}

.hsg-player__link {
	display: grid;
	height: 100%;
	overflow: hidden;
	border-radius: var(--hsg-radius-lg);
	background: var(--wp--preset--color--surface);
	color: inherit;
	text-decoration: none;
	transition: transform .35s var(--hsg-ease), box-shadow .35s var(--hsg-ease);
}

.hsg-player__link:hover {
	transform: translateY(-6px);
	box-shadow: var(--wp--preset--shadow--lift);
}

.hsg-player__media {
	position: relative;
	display: grid;
	place-items: end center;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background:
		radial-gradient(90% 70% at 50% 100%, rgba(0, 165, 211, .28) 0%, transparent 70%),
		linear-gradient(170deg, #0b3f78 0%, #062744 100%);
}

.hsg-player__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform .5s var(--hsg-ease);
}

.hsg-player__link:hover .hsg-player__media img {
	transform: scale(1.04);
}

.hsg-player__initials {
	place-self: center;
	font-size: 2.75rem;
	font-weight: 900;
	color: rgba(255, 255, 255, .35);
	letter-spacing: -.03em;
}

.hsg-player__number {
	position: absolute;
	top: .65rem;
	inset-inline-end: .75rem;
	font-size: 2.25rem;
	font-weight: 900;
	font-style: italic;
	line-height: 1;
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 2px 14px rgba(6, 39, 68, .55);
	font-variant-numeric: tabular-nums;
}

.hsg-player__body {
	display: grid;
	gap: .3rem;
	padding: .95rem 1.05rem 1.15rem;
}

.hsg-player__name {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.hsg-player__role {
	margin: 0;
	color: var(--wp--preset--color--primary-dark);
	font-size: .75rem;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hsg-player__facts {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .9rem;
	margin: .45rem 0 0;
	font-size: .75rem;
	color: var(--wp--preset--color--muted);
}

.hsg-player__facts div {
	display: flex;
	gap: .3rem;
}

.hsg-player__facts dt {
	font-weight: 700;
}

.hsg-player__facts dt::after {
	content: ":";
}

.hsg-player__facts dd {
	margin: 0;
}

/* --- 6 Spielplan und Tabelle --------------------------------------------- */

.hsg-fixtures__list {
	display: grid;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hsg-fixture {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"date teams result"
		"date info info";
	align-items: center;
	gap: .2rem .95rem;
	padding: .85rem 1.1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-inline-start: 4px solid var(--wp--preset--color--line);
	border-radius: var(--hsg-radius);
	background: var(--wp--preset--color--base);
	transition: border-color .25s var(--hsg-ease), background-color .25s var(--hsg-ease);
}

.hsg-fixture:hover {
	border-color: var(--wp--preset--color--primary);
}

.hsg-fixture.is-win { border-inline-start-color: #1aa06d; }
.hsg-fixture.is-loss { border-inline-start-color: var(--wp--preset--color--signal); }
.hsg-fixture.is-draw { border-inline-start-color: #e0a800; }

.hsg-fixture__date {
	grid-area: date;
	display: grid;
	place-items: center;
	min-width: 54px;
	padding: .4rem .5rem;
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	line-height: 1.05;
}

.hsg-fixture__day {
	font-size: 1.375rem;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
}

.hsg-fixture__month {
	font-size: .625rem;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.hsg-fixture__teams {
	grid-area: teams;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem;
	font-size: clamp(.9375rem, 2vw, 1.0625rem);
	font-weight: 700;
	line-height: 1.25;
}

.hsg-fixture__teams .is-own {
	font-weight: 900;
	color: var(--wp--preset--color--primary-dark);
}

.hsg-fixture__sep {
	opacity: .4;
}

.hsg-fixture__info {
	grid-area: info;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .8rem;
	font-size: .75rem;
	color: var(--wp--preset--color--muted);
}

.hsg-fixture__badge {
	padding: .1rem .5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .625rem;
}

.hsg-fixture__result {
	grid-area: result;
	font-size: 1.125rem;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	text-align: end;
	white-space: nowrap;
}

.hsg-fixture__pending {
	color: var(--wp--preset--color--muted);
}

/* Tabelle */

.hsg-standings__scroll {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hsg-radius-lg);
	-webkit-overflow-scrolling: touch;
}

.hsg-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: .875rem;
}

.hsg-table th,
.hsg-table td {
	padding: .7rem .75rem;
	text-align: start;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.hsg-table thead th {
	position: sticky;
	top: 0;
	background: var(--hsg-thead-bg);
	color: #fff;
	font-size: .6875rem;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hsg-table thead th abbr {
	text-decoration: none;
	border: 0;
}

.hsg-table tbody th {
	font-weight: 700;
}

.hsg-table .is-num {
	text-align: center;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hsg-table .is-points {
	font-weight: 900;
	color: var(--wp--preset--color--ink);
}

.hsg-table tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 55%, transparent);
}

.hsg-table tbody tr.is-own {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 13%, transparent);
	box-shadow: inset 4px 0 0 var(--wp--preset--color--primary);
}

.hsg-table tbody tr.is-own th {
	font-weight: 900;
	color: var(--wp--preset--color--primary-dark);
}

.hsg-table tbody tr:last-child th,
.hsg-table tbody tr:last-child td {
	border-bottom: 0;
}

.hsg-standings__stamp {
	margin: .75rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: .75rem;
}

@media (max-width: 640px) {
	.hsg-table .is-optional {
		display: none;
	}

	.hsg-table {
		min-width: 0;
		font-size: .8125rem;
	}

	.hsg-table th,
	.hsg-table td {
		padding: .6rem .4rem;
	}

	/* Mannschaftsnamen dürfen umbrechen, Zahlen nie. */
	.hsg-table tbody th {
		white-space: normal;
	}
}

/* --- 7 Partner ----------------------------------------------------------- */

.hsg-partners {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
}

.hsg-partners__title {
	margin: 0 0 1.25rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--wp--preset--color--line);
	font-size: .8125rem;
	font-weight: 900;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.hsg-partners__grid {
	display: grid;
	gap: clamp(.6rem, 1.6vw, 1.1rem);
	grid-template-columns: repeat(auto-fill, minmax(min(45%, 150px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.hsg-partners__group--hauptsponsor .hsg-partners__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.hsg-partners__group--goldpartner .hsg-partners__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(48%, 200px), 1fr));
}

.hsg-partners__link {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	padding: clamp(.75rem, 2vw, 1.25rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hsg-radius);
	background: var(--hsg-partner-bg);
	transition: transform .3s var(--hsg-ease), box-shadow .3s var(--hsg-ease), border-color .3s var(--hsg-ease);
}

.hsg-partners__link img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
	transition: filter .35s var(--hsg-ease), opacity .35s var(--hsg-ease);
}

.hsg-partners.is-grayscale .hsg-partners__link img {
	filter: grayscale(1);
	opacity: .72;
}

a.hsg-partners__link:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--soft);
}

.hsg-partners.is-grayscale a.hsg-partners__link:hover img {
	filter: none;
	opacity: 1;
}

.hsg-partners__name {
	font-size: .8125rem;
	font-weight: 900;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

/* --- 8 Fußbereich ------------------------------------------------------- */

.hsg-footer {
	background: var(--hsg-footer-bg);
	color: rgba(255, 255, 255, .78);
}

.hsg-footer a {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
}

.hsg-footer a:hover {
	color: #fff;
	text-decoration: underline;
}

.hsg-footer h2,
.hsg-footer h3 {
	color: #fff;
}

.hsg-footer__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 5vw, 2.5rem) clamp(2rem, 4vw, 3rem);
}

.hsg-footer__title {
	margin: 0 0 1rem;
	font-size: .75rem;
	font-weight: 900;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.hsg-footer ul {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .9375rem;
}

.hsg-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.hsg-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: 1.5rem clamp(1rem, 5vw, 2.5rem);
	font-size: .8125rem;
}

.hsg-footer__social {
	display: flex;
	gap: .5rem;
}

.hsg-footer__social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	transition: background-color .25s var(--hsg-ease), border-color .25s var(--hsg-ease);
}

.hsg-footer__social a:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.hsg-footer__social svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

/* --- 9 Utilities und Bewegungen ------------------------------------------ */

.hsg-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s var(--hsg-ease), transform .7s var(--hsg-ease);
}

.hsg-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.hsg-stats {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(min(50%, 180px), 1fr));
	overflow: hidden;
	border-radius: var(--hsg-radius-lg);
	background: var(--wp--preset--color--line);
}

.hsg-stat {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--wp--preset--color--base);
	text-align: center;
}

.hsg-stat__value {
	display: block;
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--wp--preset--color--primary-dark);
	font-variant-numeric: tabular-nums;
}

.hsg-stat__label {
	display: block;
	margin-top: .5rem;
	font-size: .75rem;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.hsg-prose > * + * {
	margin-block-start: 1.1em;
}

/* --- Reduzierte Bewegung -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.hsg-reveal {
		opacity: 1;
		transform: none;
	}
}

/* --- Druck ---------------------------------------------------------------- */

@media print {
	.hsg-header,
	.hsg-footer,
	.hsg-hero__media {
		display: none !important;
	}
}

/* --- Ticketverkauf (universe.com) ---------------------------------------- */

.hsg-tickets {
	min-height: 120px;
}

/* Das Widget bringt eigene Abstände mit; hier nur Platz nach oben und unten. */
.hsg-tickets > iframe {
	display: block;
	width: 100%;
	border: 0;
}

.hsg-tickets__fallback {
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hsg-radius);
	background: var(--wp--preset--color--surface);
}

/* Trennung zwischen oberem und unterem Playoff — im Liga-Feed als
   "trennlinie" markiert, in Vereinsrot wie auf der bisherigen Seite. */
.hsg-table tbody tr.is-cut > th,
.hsg-table tbody tr.is-cut > td {
	border-bottom: 2px solid #e30613;
}

/* --- Anfahrt ------------------------------------------------------------- */

.hsg-maps {
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.hsg-map {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hsg-radius-lg);
	background: var(--wp--preset--color--base);
}

.hsg-map__head {
	display: grid;
	gap: .15rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.hsg-map__name {
	font-size: 1.0625rem;
	font-weight: 900;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink);
}

.hsg-map__adresse {
	font-size: .875rem;
	color: var(--wp--preset--color--muted);
}

.hsg-map__frame {
	position: relative;
	aspect-ratio: 16 / 11;
	background: var(--wp--preset--color--surface);
}

.hsg-map__frame iframe,
.hsg-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.hsg-consent {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: .85rem;
	height: 100%;
	padding: clamp(1rem, 4vw, 2rem);
	text-align: center;
}

.hsg-consent p {
	max-width: 32ch;
	margin: 0;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.hsg-map__link {
	font-size: .8125rem;
	font-weight: 700;
}

/* --- Datenblatt eines Kadermitglieds ------------------------------------- */

.hsg-datasheet__list {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hsg-radius-lg);
	background: var(--wp--preset--color--line);
}

.hsg-datasheet__row {
	display: grid;
	gap: .15rem;
	padding: .95rem 1.15rem;
	background: var(--wp--preset--color--base);
}

.hsg-datasheet__row dt {
	font-size: .6875rem;
	white-space: nowrap;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.hsg-datasheet__row dd {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* Quellenangabe unter einem Porträt */
.hsg-sources {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: .75rem;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
}

/* Datenblatt im dunklen Spielerkopf: neben dem Foto, heller auf dunklem Grund. */

.hsg-playerhero .hsg-datasheet__list {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	border-color: rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .16);
}

.hsg-playerhero .hsg-datasheet__row {
	background: rgba(255, 255, 255, .07);
	padding: .8rem 1rem;
}

.hsg-playerhero .hsg-datasheet__row dt {
	color: rgba(255, 255, 255, .78);
}

.hsg-playerhero .hsg-datasheet__row dd {
	font-size: 1rem;
	color: #fff;
}

.hsg-playerhero .hsg-eyebrow,
.hsg-playerhero .hsg-eyebrow a {
	color: var(--wp--preset--color--primary);
}

/* Das Foto darf im Kopfbereich nicht zu hoch werden. */
.hsg-playerhero .wp-block-post-featured-image img {
	border-radius: 22px;
}

/* --- Social Media -------------------------------------------------------- */

.hsg-social + .hsg-social {
	margin-top: var(--wp--preset--spacing--50);
}

.hsg-social__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-large);
}

.hsg-social__link {
	margin: 1rem 0 0;
	font-size: .875rem;
	font-weight: 700;
}

.hsg-embed--facebook {
	position: relative;
	/* Vor dem Laden nur so hoch wie nötig, danach die Höhe des Widgets. */
	min-height: 220px;
	/* Facebook rendert höchstens 500 px breit; ein breiterer Kasten bliebe leer. */
	max-width: var(--hsg-embed-w, 500px);
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hsg-radius-lg);
	background: var(--wp--preset--color--surface);
}

/*
 * Nach dem Laden trägt das Widget seinen eigenen weissen Grund — Rahmen und
 * Füllung der Hülle würden dahinter als zweiter Rand sichtbar bleiben.
 */
.hsg-embed--facebook.is-loaded {
	height: var(--hsg-embed-h, 700px);
	border-color: transparent;
	background: #fff;
}

.hsg-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Smash Balloon bringt eigene Abstände mit; hier nur die Ecken angleichen. */
.hsg-social--instagram #sb_instagram .sbi_photo_wrap,
.hsg-social--instagram #sb_instagram .sbi_photo {
	border-radius: var(--hsg-radius);
	overflow: hidden;
}

.hsg-social--instagram #sb_instagram {
	padding-bottom: 0 !important;
}