/*
 * Ergänzungen zu theme.json – nur, was sich dort nicht abbilden lässt.
 * Werte immer über Presets/CSS-Variablen aus theme.json, nie fest codiert.
 */

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

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--dunkelrot);
	outline-offset: 3px;
}

:where(.has-dunkelrot-background-color, .has-rot-background-color) :focus-visible {
	outline-color: var(--wp--preset--color--weiss);
}

/*
 * Hintergrund: Foto aus der Mediathek (Adresse setzt functions.php), sehr
 * durchsichtig, steht beim Scrollen still. Ohne Foto bleibt es weiß. Nicht im Editor.
 */
body:not(.editor-styles-wrapper)::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--tsv-hintergrund-bild, none) center / cover;
	opacity: 0.1;
	pointer-events: none;
}

body .skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--weiss);
	border-radius: var(--wp--custom--radius--rund);
	padding: 0.75rem 1.25rem;
	font-weight: 700;
	text-decoration: none;
}

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--weiss);
	border-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--text);
}

/* Link mit Pfeil, z. B. „Alle Berichte“ */
.mehr a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--ziel-groesse);
	font-weight: 700;
	text-decoration: none;
}

.mehr a::after {
	content: "→";
	margin-left: 0.4em;
}

.mehr a:hover {
	text-decoration: underline;
}

/* Kein Abstand zwischen Kopfzeile, Inhalt und Fußzeile: die Bereiche bringen
   ihren Innenabstand selbst mit, sonst bleibt über dem Hero ein weißer Streifen. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ---------- Kopfzeile ---------- */

.kopf {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: rgb(255 255 255 / 0.96);
	border-bottom: 1px solid var(--wp--preset--color--hell-2);
}

.admin-bar .kopf {
	top: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	.admin-bar .kopf {
		top: 0;
	}
}

.kopf__innen {
	padding-block: 0.75rem;
}

.kopf__innen > .alignwide {
	gap: 0.5rem;
}

.kopf .marke {
	gap: 0.625rem;
	margin-right: auto;
}

.marke__logo {
	margin: 0;
}

.marke__logo a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--ziel-groesse);
	min-height: var(--wp--custom--ziel-groesse);
}

.marke__logo img {
	width: 38px;
	height: auto;
}

.marke__text {
	margin: 0;
	line-height: 1.15;
	color: var(--wp--preset--color--grau-11);
	font-size: 0.78rem;
	font-weight: 600;
}

.marke__text strong {
	display: block;
	color: var(--wp--preset--color--text);
	font-size: 0.98rem;
	font-weight: 800;
}

.marke__text br {
	display: none;
}

.kopf .wp-block-buttons .wp-block-button__link {
	min-height: var(--wp--custom--ziel-groesse);
	padding: 0.625rem 1.125rem;
	font-size: 0.95rem;
	white-space: nowrap;
}

/* Kleine Handys: Kopfzeile kompakter, unter 360 px nur das Logo */
@media (max-width: 400px) {
	.marke__text strong {
		font-size: 0.9rem;
	}

	.kopf .wp-block-buttons .wp-block-button__link {
		padding-inline: 0.875rem;
	}
}

@media (max-width: 359.98px) {
	.marke__text {
		display: none;
	}
}

/* Hauptmenü */
.hauptmenue .wp-block-navigation-item__content {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--ziel-groesse);
	padding: 0.5rem 0.875rem;
	border-radius: var(--wp--custom--radius--rund);
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.hauptmenue .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--hell-1);
}

.hauptmenue .current-menu-item > .wp-block-navigation-item__content,
.hauptmenue .wp-block-navigation-item__content[aria-current="page"] {
	background-color: var(--wp--preset--color--rot-hell);
	color: var(--wp--preset--color--dunkelrot);
}

/* Der Schließen-Knopf ist bei WordPress ein Block, dann wirkt das Zentrieren
   nicht und das X steht links im Kreis. Der Öffnen-Knopf bekommt flex von
   WordPress, nur solange er sichtbar sein soll. */
.hauptmenue .wp-block-navigation__responsive-container-close {
	display: flex;
}

.hauptmenue .wp-block-navigation__responsive-container-open,
.hauptmenue .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--ziel-groesse);
	height: var(--wp--custom--ziel-groesse);
	border-radius: var(--wp--custom--radius--rund);
	background-color: var(--wp--preset--color--hell-1);
	color: var(--wp--preset--color--text);
}

.hauptmenue .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

/* Aufgeklapptes Menü: große Einträge mit Trennlinien, darunter „Mitspielen“.
   Lange Kette, weil WordPress dort sonst die Lücke des Menüs (1,25 rem) setzt. */
.hauptmenue .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

.hauptmenue .is-menu-open .wp-block-navigation-item {
	width: 100%;
	padding-block: 0.25rem;
	border-bottom: 1px solid var(--wp--preset--color--grau-2);
}

.hauptmenue .is-menu-open .wp-block-navigation-item__content {
	width: 100%;
	min-height: 56px;
	padding-inline: 0.75rem;
	border-radius: var(--wp--custom--radius--klein);
	font-size: var(--wp--preset--font-size--gross);
	font-weight: 800;
}

/* „Mitspielen“ steht sonst als Button in der Kopfzeile, die das Menü verdeckt */
.hauptmenue .wp-block-navigation__responsive-container:not(.is-menu-open) .nur-im-menue {
	display: none;
}

.hauptmenue .is-menu-open .nur-im-menue {
	margin-top: var(--wp--preset--spacing--40);
	padding-block: 0;
	border-bottom: 0;
}

.hauptmenue .is-menu-open .nur-im-menue .wp-block-navigation-item__content {
	justify-content: center;
	border-radius: var(--wp--custom--radius--rund);
	background-color: var(--wp--preset--color--rot);
	color: var(--wp--preset--color--weiss);
	font-size: var(--wp--preset--font-size--mittel);
}

.hauptmenue .is-menu-open .nur-im-menue .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--dunkelrot);
}

/* Handy: Logo · Shop · Menü-Knopf */
@media (max-width: 1023.98px) {
	.kopf__innen > .alignwide > .hauptmenue {
		order: 3;
	}

	.kopf__innen > .alignwide > .wp-block-buttons {
		order: 2;
	}
}

/* Zwischen 600 und 1023 px passt das Menü nicht in eine Zeile: Menü-Knopf zeigen. */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.hauptmenue .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.hauptmenue .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (min-width: 1024px) {
	.marke__logo img {
		width: 44px;
	}

	.marke__text strong {
		font-size: 1.05rem;
	}
}

/*
 * Instagram und WhatsApp-Kanal (Kopf- und Fußzeile, Block „Social Icons“):
 * einfarbig statt in den Markenfarben, die WordPress bei „Nur Logos“ setzt,
 * Tippfläche 44 px, beim Überfahren wie die Menüpunkte hinterlegt.
 */
.wp-block-social-links.is-style-logos-only.soziale-links {
	--soziale-links-icon: 1.5rem;
	gap: 0;
	margin: 0;
	padding: 0;
}

.wp-block-social-links.is-style-logos-only.soziale-links .wp-social-link {
	color: var(--wp--preset--color--text);
	transform: none;
	transition: none;
}

.wp-block-social-links.is-style-logos-only.soziale-links .wp-social-link:hover {
	color: var(--wp--preset--color--dunkelrot);
}

.wp-block-social-links.is-style-logos-only.soziale-links .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--ziel-groesse);
	height: var(--wp--custom--ziel-groesse);
	padding: 0;
	border-radius: var(--wp--custom--radius--rund);
}

.wp-block-social-links.is-style-logos-only.soziale-links .wp-social-link a:hover {
	background-color: var(--wp--preset--color--hell-1);
}

.wp-block-social-links.is-style-logos-only.soziale-links .wp-social-link svg {
	width: var(--soziale-links-icon);
	height: var(--soziale-links-icon);
}

/* Desktop: dünne Linie zwischen Menü und Icons */
@media (min-width: 1024px) {
	.hauptmenue .wp-block-navigation-item:has(> .soziale-links)::before {
		content: "";
		width: 1px;
		height: 1.5rem;
		margin-right: 0.5rem;
		background-color: var(--wp--preset--color--grau-2);
	}
}

/* Aufgeklapptes Menü: Icons in einer Zeile über „Shop“, links wie die Einträge */
.hauptmenue .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:has(> .soziale-links) {
	align-items: flex-start;
	padding-block: 0.375rem;
}

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

.hero {
	background: linear-gradient(var(--wp--preset--color--hell-1), transparent);
	padding-block: clamp(1.75rem, 6vw, 4.5rem) clamp(2rem, 6vw, 4rem);
}

.hero .wp-block-columns {
	gap: var(--wp--preset--spacing--50);
}

.hero__dach {
	display: inline-block;
	margin-bottom: 0;
	padding: 0.375rem 0.875rem;
	border-radius: var(--wp--custom--radius--rund);
	background-color: var(--wp--preset--color--rot-hell);
	color: var(--wp--preset--color--dunkelrot);
	font-size: 0.9rem;
	font-weight: 800;
}

.hero h1 mark {
	background: none;
}

.hero__lead {
	max-width: 34em;
	color: var(--wp--preset--color--grau-11);
	font-size: var(--wp--preset--font-size--mittel);
}

.hero__bild {
	margin: 0;
	padding: clamp(0.75rem, 2vw, 1.25rem);
	border-radius: calc(var(--wp--custom--radius--karte) + 8px);
	background-color: var(--wp--preset--color--weiss);
	box-shadow: var(--wp--preset--shadow--karte);
}

.hero__bild img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Abschnitte und Karten ---------- */

/* Sprungziele nicht unter der festen Kopfzeile verstecken */
:where([id]) {
	scroll-margin-top: 6rem;
}

.abschnitt {
	padding-block-start: var(--wp--preset--spacing--70);
}

.abschnitt--eng {
	padding-block-start: var(--wp--preset--spacing--40);
}

.abschnitt__kopf {
	margin-bottom: var(--wp--preset--spacing--50);
}

.abschnitt__kopf h2,
.abschnitt__kopf p {
	margin: 0;
}

.abschnitt__kopf .wp-block-group > * + * {
	margin-top: 0.5rem;
}

.dachzeile {
	margin: 0;
	color: var(--wp--preset--color--dunkelrot);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Überschriften auf farbigen Flächen übernehmen die Textfarbe der Fläche */
.has-weiss-color :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.has-dunkelrot-background-color .dachzeile,
.has-dunkelrot-background-color .spiele__text {
	color: var(--wp--preset--color--rot-hell);
}

.has-dunkelrot-background-color a:where(:not(.wp-element-button)),
.has-rot-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--weiss);
}

/* Info-Karten */
.info-karte {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
	border-radius: var(--wp--custom--radius--karte);
	background-color: var(--wp--preset--color--hell-1);
}

.info-karte--rot {
	background-color: var(--wp--preset--color--rot-hell);
}

.info-karte > * {
	margin: 0;
}

.info-karte h2 {
	font-size: var(--wp--preset--font-size--mittel);
	font-weight: 700;
}

.info-karte p:not(.mehr) {
	color: var(--wp--preset--color--grau-11);
}

.info-karte strong {
	color: var(--wp--preset--color--text);
}

.info-karte .mehr {
	margin-top: auto;
}

.info-karte > .wp-block-image:not(.info-karte__symbol) img {
	width: 100%;
	border-radius: var(--wp--custom--radius--klein);
}

.info-karte__symbol {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius--rund);
	background-color: var(--wp--preset--color--weiss);
}

/* Tablet: drei Info-Karten (Startseite) zu zweit, die dritte quer über die
   volle Breite, wie die übrigen Karten. Sonst steht die dritte bis etwa
   745 px allein in der linken Hälfte, darüber stehen drei schmale Spalten.
   Die Hallen-Seite setzt mit .raster--erste-breit die erste quer. */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.is-layout-grid:not(.raster--erste-breit):has(> .info-karte:first-child:nth-last-child(3)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.is-layout-grid:not(.raster--erste-breit) > .info-karte:nth-child(3):last-child {
		grid-column: 1 / -1;
	}
}

/* Spiele & Ergebnisse */
.spiele {
	position: relative;
	overflow: hidden;
	padding: clamp(1.75rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
	border-radius: calc(var(--wp--custom--radius--karte) + 8px);
}

.spiele::after {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -60px;
	width: 260px;
	height: 305px;
	background: url("../images/logo-tsv.svg") no-repeat center / contain;
	filter: brightness(0) invert(1);
	opacity: 0.08;
	pointer-events: none;
}

.spiele .wp-block-columns {
	position: relative;
	z-index: 1;
	margin: 0;
	gap: var(--wp--preset--spacing--50);
}

.spiele .wp-block-column > * {
	margin-block: 0;
}

.spiele .wp-block-column > * + * {
	margin-top: 0.75rem;
}

/* Baustein „Spielplan“: Spiele, Ergebnisse, Tabelle */
.spielplan {
	align-self: start;
	padding: 1.5rem;
	border-radius: var(--wp--custom--radius--karte);
	background-color: var(--wp--preset--color--hell-1);
	color: var(--wp--preset--color--text);
}

.spielplan > * {
	margin: 0;
}

.spielplan > * + * {
	margin-top: 1rem;
}

/* Gleiche Größe, ob als H2 (direkt unter dem Seitentitel) oder H3 */
.spielplan__titel {
	margin: 0;
	font-size: var(--wp--preset--font-size--mittel);
	font-weight: 700;
}

.spielplan__spalten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: 1.5rem 2rem;
}

.spiele-liste {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.spiel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 1rem;
	padding-block: 0.625rem;
	border-top: 1px solid var(--wp--preset--color--grau-2);
}

.spiel > * {
	grid-column: 1;
}

.spiel__zeit,
.spiel__halle,
.spielplan__quelle {
	color: var(--wp--preset--color--grau-11);
	font-size: var(--wp--preset--font-size--klein);
}

.spiel .spiel__tore {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: center;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Link zum Livestream an der Stelle des Ergebnisses, Tippfläche 44 px */
.spiel .spiel__live {
	display: inline-flex;
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: center;
	align-items: center;
	min-height: var(--wp--custom--ziel-groesse);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
}

.spielplan__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1.25rem;
}

.spielplan__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--ziel-groesse);
	font-weight: 700;
}

.spiel-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--klein);
	font-variant-numeric: tabular-nums;
}

.spiel-tabelle caption {
	padding-bottom: 0.5rem;
	color: var(--wp--preset--color--grau-11);
	text-align: left;
}

.spiel-tabelle :is(th, td) {
	padding: 0.5rem 0.375rem;
	border-top: 1px solid var(--wp--preset--color--grau-2);
	text-align: right;
}

.spiel-tabelle thead th {
	border-top: 0;
	color: var(--wp--preset--color--grau-11);
	font-weight: 700;
}

/* Lange Vereinsnamen dürfen umbrechen, sonst läuft die Tabelle auf dem Handy aus der Karte */
.spiel-tabelle :is(th, td):nth-child(2) {
	width: 100%;
	overflow-wrap: anywhere;
	text-align: left;
}

.spiel-tabelle abbr {
	text-decoration: none;
}

.spiel-tabelle .eigene {
	background-color: var(--wp--preset--color--rot-hell);
	font-weight: 700;
}

/* Auf der dunkelroten Fläche „Spiele & Ergebnisse“ */
.has-dunkelrot-background-color .spielplan {
	background-color: var(--wp--preset--color--weiss);
}

.has-dunkelrot-background-color .spielplan a {
	color: var(--wp--preset--color--dunkelrot);
}

/* Die Karte ist weiß, der weiße Fokus-Rahmen der Fläche wäre darauf unsichtbar */
.has-dunkelrot-background-color .spielplan :focus-visible {
	outline-color: var(--wp--preset--color--dunkelrot);
}

/* Finde dein Team */
.kachel {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--karte);
	background-color: var(--wp--preset--color--hell-1);
	transition: background-color 0.15s;
}

.kachel > * {
	margin: 0;
}

.kachel .wp-block-image img {
	width: 100%;
	border-radius: 0;
}

.kachel__titel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.875rem 1rem 0;
	font-size: var(--wp--preset--font-size--mittel);
	font-weight: 800;
}

.kachel__titel::after {
	content: "→";
	color: var(--wp--preset--color--dunkelrot);
}

.kachel__titel a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.kachel__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kachel__info {
	padding: 0.125rem 1rem 1rem;
	color: var(--wp--preset--color--grau-11);
	font-size: 0.85rem;
}

.kachel:hover {
	background-color: var(--wp--preset--color--rot-hell);
}

.kachel:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--dunkelrot);
	outline-offset: 3px;
}

.kachel a:focus-visible {
	outline: none;
}

/* Tablet: 2 × 2 statt vier schmaler Kacheln, Fotos im Querformat */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.is-layout-grid:has(> .kachel) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kachel .wp-block-image img {
		aspect-ratio: 3 / 2 !important; /* der Bild-Block setzt 1:1 */
	}
}

/* Die Menschen dahinter */
.person {
	gap: 0.25rem;
	text-align: center;
}

.person .wp-block-image {
	margin: 0 0 0.625rem;
}

.person .wp-block-image img {
	max-width: 100%;
}

.person__name,
.person__funktion {
	margin: 0;
}

.person__name {
	font-weight: 700;
}

.person__funktion {
	color: var(--wp--preset--color--grau-11);
	font-size: var(--wp--preset--font-size--klein);
}

/* Unser Team (/verein/unser-team/): Karte mit Kontaktdaten */
.person--kontakt {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--karte);
	background-color: var(--wp--preset--color--hell-1);
}

.person--kontakt .person__name {
	font-size: var(--wp--preset--font-size--mittel);
}

.person__kontakt {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--klein);
	overflow-wrap: anywhere;
}

.person__kontakt a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--ziel-groesse);
}

/* Tabelle der Jahrgänge auf „Mitspielen“ */
.wp-block-table.jahrgaenge :is(th, td) {
	padding: 0.5rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--grau-2);
	font-size: var(--wp--preset--font-size--klein);
	text-align: left;
}

.wp-block-table.jahrgaenge td:first-child {
	white-space: nowrap;
}

.wp-block-table.jahrgaenge thead {
	border-bottom: 0;
}

.wp-block-table.jahrgaenge th {
	background-color: var(--wp--preset--color--hell-1);
}

/* Liste mit Emojis als Aufzählungszeichen */
.liste-ohne-punkte {
	padding-left: 0;
	list-style: none;
}

/* Bei drei Karten läuft die erste quer über die volle Breite */
.raster--erste-breit > :first-child:nth-last-child(3) {
	grid-column: 1 / -1;
}

/* Großes Foto im Text einer Seite, z. B. Schiedsrichter:innen */
.seitenfoto img {
	width: 100%;
	border-radius: var(--wp--custom--radius--karte);
}

/* Bei ungerader Zahl läuft die letzte Kachel quer über die volle Breite */
.raster--letzte-breit > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* Probetraining-Banner */
.banner {
	position: relative;
	overflow: hidden;
	gap: var(--wp--preset--spacing--40);
	padding: clamp(1.75rem, 6vw, 3.5rem);
	border-radius: calc(var(--wp--custom--radius--karte) + 8px);
}

.banner::before,
.banner::after {
	content: "";
	position: absolute;
	border-radius: var(--wp--custom--radius--rund);
	background-color: rgb(255 255 255 / 0.1);
	pointer-events: none;
}

.banner::before {
	top: -120px;
	right: -80px;
	width: 280px;
	height: 280px;
}

.banner::after {
	right: 120px;
	bottom: -90px;
	width: 160px;
	height: 160px;
}

.banner > * {
	position: relative;
	z-index: 1;
}

.banner__text {
	flex: 1 1 20rem;
}

.banner__text > * {
	margin: 0;
}

.banner__text p {
	max-width: 32em;
	margin-top: 0.625rem;
	font-size: var(--wp--preset--font-size--mittel);
	font-weight: 600;
}

/* Partner */
.partner.wp-block-gallery {
	justify-content: center;
}

.partner.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-grow: 0;
}

.partner.wp-block-gallery a {
	display: block;
}

/* Einheitliche Kacheln (Galerie und Laufband), die Logos behalten ihr
   Seitenverhältnis. Der Innenabstand wächst mit der Kachel (7 % ihrer Breite). */
.partner.wp-block-gallery.has-nested-images figure.wp-block-image img,
.laufband__logo img {
	box-sizing: border-box;
	width: 100%;
	padding: 7%;
	border: 1px solid var(--wp--preset--color--grau-2);
	border-radius: var(--wp--custom--radius--klein);
	background-color: var(--wp--preset--color--weiss);
	aspect-ratio: 3 / 2;
	object-fit: contain;
}

.partner.wp-block-gallery a:hover img,
.laufband__logo a:hover img {
	border-color: var(--wp--preset--color--dunkelrot) !important;
}

/* Weiße Logos brauchen eine dunkle Kachel */
.partner.wp-block-gallery.has-nested-images figure.logo--dunkel img,
.laufband__logo.logo--dunkel img {
	background-color: var(--wp--preset--color--text);
}

/* Hauptsponsoren (Galerie `partner--haupt`, zwei Spalten) sind größer als die
   übrigen Partner (drei Spalten). Auf dem Handy stehen sie weiter zu zweit,
   die übrigen deshalb zu dritt statt wie sonst bei Galerien zu zweit. */
@media (max-width: 599.98px) {
	.partner.wp-block-gallery.has-nested-images:not(.partner--haupt) figure.wp-block-image:not(#individual-image) {
		width: calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.66667);
	}
}

/* Tablet: drei Logos je Reihe statt sechs winziger */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.partner.wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
		width: calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.66667);
	}
}

/*
 * Partner-Laufband (Startseite): Jede Reihe enthält ihre Logos zweimal und
 * rückt in --laufband-anzahl × 5 s um die Hälfte nach links, also eine
 * Kachel je 5 s, dann beginnt sie unbemerkt von vorn. Der Abstand steht als
 * Außenabstand an jeder Kachel, damit beide Hälften genau gleich breit sind.
 */
.laufband {
	--laufband-kachel: clamp(8.75rem, 30vw, 11.5rem);
	--laufband-abstand: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	gap: var(--laufband-abstand);
}

.laufband__reihe {
	overflow: clip visible;
	/* Logos blenden an den Rändern weich ein und aus (Maske: nur die Deckkraft zählt) */
	mask-image: linear-gradient(to right, transparent, var(--wp--preset--color--text) var(--wp--preset--spacing--60), var(--wp--preset--color--text) calc(100% - var(--wp--preset--spacing--60)), transparent);
}

.laufband__spur {
	display: flex;
	width: max-content;
	animation: laufband calc(var(--laufband-anzahl) * 5s) linear infinite;
}

/* Zweite Reihe um eine halbe Kachel versetzt */
.laufband__reihe + .laufband__reihe .laufband__spur {
	animation-delay: -2.5s;
}

.laufband__liste {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.laufband__logo {
	flex: none;
	width: var(--laufband-kachel);
	margin-right: var(--laufband-abstand);
}

.laufband__logo a {
	display: block;
	border-radius: var(--wp--custom--radius--klein);
}

.laufband__logo img {
	display: block;
	height: auto;
}

/* Fokus innen, damit der Rand der Reihe ihn nicht abschneidet */
.laufband__logo a:focus-visible {
	outline-offset: -3px;
}

@keyframes laufband {
	to {
		transform: translateX(-50%);
	}
}

/* Anhalten: Maus darüber, Logo per Tastatur ausgewählt oder angekreuzt */
.laufband:hover .laufband__spur,
.laufband:has(:focus-visible) .laufband__spur,
.laufband:has(.laufband__anhalten input:checked) .laufband__spur {
	animation-play-state: paused;
}

/*
 * Mit der Tastatur steht die Reihe am Anfang still und lässt sich seitlich
 * verschieben, so scrollt der Browser jedes ausgewählte Logo ins Bild (der
 * Innenrand sorgt dafür, dass er das auch bei halb sichtbaren Logos tut).
 * Ohne Fokus ist „clip“ kein Scroll-Bereich, die Verschiebung fällt wieder weg.
 */
.laufband__reihe:has(:focus-visible) {
	overflow-x: auto;
	scrollbar-width: none;
	scroll-padding-inline: var(--laufband-kachel);
	mask-image: none;
}

.laufband__reihe:has(:focus-visible) .laufband__spur {
	animation: none;
}

.laufband__reihe:has(:focus-visible) .laufband__kopie {
	display: none;
}

.laufband__anhalten {
	display: inline-flex;
	align-self: flex-end;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding-inline: 1rem;
	border-radius: var(--wp--custom--radius--rund);
	background-color: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--grau-11);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	cursor: pointer;
}

.laufband__anhalten input {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--wp--preset--color--dunkelrot);
	cursor: pointer;
}

/* Wenige Logos stehen still wie eine Galerie */
.laufband--still .laufband__reihe {
	overflow: visible;
	mask-image: none;
}

.laufband--still .laufband__spur {
	width: auto;
	animation: none;
}

.laufband--still .laufband__liste {
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--laufband-abstand);
	width: 100%;
}

.laufband--still .laufband__logo {
	margin-right: 0;
}

/* Bewegung reduzieren: nichts läuft, die Reihen lassen sich seitlich wischen */
@media (prefers-reduced-motion: reduce) {
	.laufband__reihe {
		overflow-x: auto;
		scrollbar-width: thin;
		mask-image: none;
	}

	.laufband__spur {
		animation: none;
	}

	.laufband__kopie,
	.laufband__anhalten {
		display: none;
	}
}

/* Archiv auf der Startseite */
.archiv-teaser {
	padding: clamp(1.5rem, 5vw, 3rem);
	border-radius: calc(var(--wp--custom--radius--karte) + 8px);
}

.karten .wp-block-post {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--hell-2);
	border-radius: var(--wp--custom--radius--karte);
	background-color: var(--wp--preset--color--weiss);
	transition: box-shadow 0.15s, transform 0.15s;
}

.karten .wp-block-post:hover {
	box-shadow: var(--wp--preset--shadow--karte);
	transform: translateY(-2px);
}

:is(.karten, .treffer-liste) .wp-block-post:has(.wp-block-post-title a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--dunkelrot);
	outline-offset: 3px;
}

:is(.karten, .treffer-liste) .wp-block-post-title a:focus-visible {
	outline: none;
}

.karten .wp-block-post-featured-image {
	margin: 0;
}

.karten .wp-block-post-featured-image img {
	border-radius: 0;
}

/* Ohne Beitragsbild: ruhige Fläche statt Lücke */
.karten .wp-block-post:not(:has(.wp-block-post-featured-image)) .karte__inhalt {
	border-top: 6px solid var(--wp--preset--color--rot-hell);
}

/* Tablet: genau zwei Spalten. Stehen nur drei Karten da, läuft die dritte
   über die ganze Breite (Bild links, Text rechts), statt allein zu stehen. */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.karten .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.karten .wp-block-post-template.is-layout-grid > .wp-block-post:nth-child(3):last-child {
		grid-column: 1 / -1;
	}

	.karten .wp-block-post:nth-child(3):last-child:has(> .wp-block-post-featured-image) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Bild füllt die Höhe des Textes, bestimmt sie aber nicht */
	.karten .wp-block-post:nth-child(3):last-child .wp-block-post-featured-image {
		position: relative;
		min-height: 12rem;
	}

	.karten .wp-block-post:nth-child(3):last-child .wp-block-post-featured-image img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto !important; /* der Block setzt 16:10 */
	}
}

/* Startseite: Reihen „Aktive“ und „Jugend“ unter „Aktuelle Spielberichte“ */
.berichte-reihe + .berichte-reihe {
	margin-top: var(--wp--preset--spacing--60);
}

/* Überschrift und Link auf einer Grundlinie (der Block setzt „unten“) */
.berichte-reihe__kopf.is-layout-flex {
	gap: 0.5rem 1.5rem;
	align-items: baseline;
	margin-bottom: 1rem;
}

.berichte-reihe__kopf > * {
	margin: 0;
}

.berichte-reihe__kopf h3 {
	font-size: var(--wp--preset--font-size--gross);
}

/* Handy: kompakte Karten mit kleinem Bild links und ohne Anrisstext,
   sonst wären die sechs Karten zusammen rund 3.500 px hoch. */
@media (max-width: 599.98px) {
	.berichte-reihe .wp-block-post-template.is-layout-grid {
		gap: 0.75rem;
	}

	.berichte-reihe .karten .wp-block-post:has(> .wp-block-post-featured-image) {
		display: grid;
		grid-template-columns: 6.5rem minmax(0, 1fr);
	}

	/* Bild füllt die Höhe des Textes, bestimmt sie aber nicht */
	.berichte-reihe .karten .wp-block-post-featured-image {
		position: relative;
	}

	.berichte-reihe .karten .wp-block-post-featured-image img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto !important; /* der Block setzt 16:10 */
	}

	.berichte-reihe .karte__inhalt {
		gap: 0.375rem;
		padding: 0.875rem 1rem;
	}

	.berichte-reihe .karten .wp-block-post-title {
		font-size: var(--wp--preset--font-size--normal) !important; /* statt „mittel“ */
	}

	.berichte-reihe .karten .wp-block-post-excerpt {
		display: none;
	}
}

.karte__inhalt {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 1.25rem 1.375rem 1.5rem;
}

.karte__inhalt > * {
	margin: 0;
}

/* Ganze Karte klickbar über den Titel-Link */
:is(.karten, .treffer-liste) .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.karten .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Kategorie-Chips */
.wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

.wp-block-post-terms a {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: var(--wp--custom--radius--rund);
	background-color: var(--wp--preset--color--rot-hell);
	color: var(--wp--preset--color--dunkelrot);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

/* Trefferfläche auf 44 px vergrößern, ohne die Optik zu ändern */
.wp-block-post-terms a::before {
	content: "";
	position: absolute;
	inset: -10px -2px;
}

.wp-block-post-terms a:hover {
	background-color: var(--wp--preset--color--hell-2);
	color: var(--wp--preset--color--text);
}

/* Seitennummerierung */
.wp-block-query-pagination {
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--ziel-groesse);
	min-height: var(--wp--custom--ziel-groesse);
	padding-inline: 0.875rem;
	border-radius: var(--wp--custom--radius--rund);
	background-color: var(--wp--preset--color--hell-1);
	color: var(--wp--preset--color--text);
	font-weight: 700;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--weiss);
}

.wp-block-query-pagination .page-numbers.dots {
	background: none;
}

.wp-block-query-pagination a:hover {
	background-color: var(--wp--preset--color--hell-2);
}

/* ---------- Mannschaften ---------- */

/* Link zurück, z. B. „Alle Mannschaften“ */
.mehr--zurueck a::after {
	content: none;
}

.mehr--zurueck a::before {
	content: "←";
	margin-right: 0.4em;
}

.mannschaft__kopf > * {
	margin-block: 0;
}

.mannschaft__kopf > * + * {
	margin-top: 0.75rem;
}

.mannschaft__liga-kopf {
	width: fit-content;
	padding: 0.375rem 0.875rem;
	border-radius: var(--wp--custom--radius--rund);
	background-color: var(--wp--preset--color--rot-hell);
	color: var(--wp--preset--color--dunkelrot);
	font-size: 0.9rem;
	font-weight: 800;
}

/* Keine Liga (Minis, Bambinis): Zeile ausblenden */
:is(.mannschaft__liga-kopf, .karte__liga, .karte__zeiten):empty {
	display: none;
}

/* Die Liga steht im Seitenkopf; im Text nur zum Bearbeiten im Editor
   (dort bleibt sie sichtbar, auch in der Ansicht mit Template) */
body:not(.editor-styles-wrapper) .mannschaft-seite .wp-block-post-content > .mannschaft__liga {
	display: none;
}

.mannschaft-seite .wp-block-post-content h2 {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--gross);
}

.mannschaft-seite .wp-block-post-content > :is(.mannschaft__trainingszeiten, .mannschaft__trainer) {
	margin-top: 0.75rem;
	padding: 1.125rem 1.375rem;
	border-radius: var(--wp--custom--radius--karte);
	background-color: var(--wp--preset--color--hell-1);
	font-weight: 600;
	line-height: 1.8;
}

/* Übersicht /mannschaften/ und Berichte-Archiv */
:is(.mannschaften-kopf, .mannschaften-kopf__titel, .archiv-kopf) > * {
	margin-block: 0;
}

:is(.mannschaften-kopf, .mannschaften-kopf__titel, .archiv-kopf) > * + * {
	margin-top: 0.75rem;
}

/* Mitspielen: großer Knopf oben rechts, unter 768 px über die volle Breite */
.mitspielen-knopf .wp-block-button__link {
	min-height: 64px;
	padding: 1rem 2.5rem;
	box-shadow: var(--wp--preset--shadow--karte);
	font-size: var(--wp--preset--font-size--mittel);
}

@media (max-width: 767.98px) {
	.mitspielen-knopf,
	.mitspielen-knopf .wp-block-button,
	.mitspielen-knopf .wp-block-button__link {
		width: 100%;
	}
}

:is(.mannschaften-kopf__text, .archiv-kopf__text) {
	color: var(--wp--preset--color--grau-11);
	font-size: var(--wp--preset--font-size--mittel);
}

.sprungmarken {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.sprungmarken a {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--ziel-groesse);
	padding: 0.5rem 1.125rem;
	border-radius: var(--wp--custom--radius--rund);
	background-color: var(--wp--preset--color--hell-1);
	color: var(--wp--preset--color--text);
	font-weight: 700;
	text-decoration: none;
}

.sprungmarken a:hover {
	background-color: var(--wp--preset--color--rot-hell);
	color: var(--wp--preset--color--dunkelrot);
}

.mannschaften-bereich > h2 {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--gross);
}

.karte__liga {
	color: var(--wp--preset--color--dunkelrot);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
}

.karte__zeiten {
	color: var(--wp--preset--color--grau-11);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.7;
}

.halle {
	white-space: nowrap;
}

/* Handy, Mannschaftsseite: Halle in eigener Zeile statt „·“ am Zeilenende */
@media (max-width: 599.98px) {
	.mannschaft__trainingszeiten .halle__trenner {
		display: none;
	}

	.mannschaft__trainingszeiten .halle {
		color: var(--wp--preset--color--grau-11);
		font-weight: 500;
	}

	.mannschaft__trainingszeiten .halle::before {
		content: "\A";
		white-space: pre;
	}
}

/* ---------- Kader (/mannschaften/<name>/kader/) ---------- */

/* Mannschaftsseite: Das Foto führt zum Kader, darunter der Knopf „Zum Kader“ */
.mannschaft__foto > a {
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--karte);
}

.mannschaft__foto > a img {
	display: block;
	transition: transform 0.3s;
}

.mannschaft__foto > a:hover img {
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.mannschaft__foto > a img {
		transition: none;
	}

	.mannschaft__foto > a:hover img {
		transform: none;
	}
}

.kader-knopf {
	margin-top: var(--wp--preset--spacing--40);
}

/* Kaderseite */
.kader__kopf > * {
	margin-block: 0;
}

.kader__kopf > * + * {
	margin-top: 0.75rem;
}

.kader__sprungmarken {
	margin-top: var(--wp--preset--spacing--50);
}

.kader__sprungmarken .sprungmarken {
	margin: 0;
}

.kader-gruppe {
	margin-top: var(--wp--preset--spacing--60);
}

.kader-gruppe > h2 {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--gross);
}

/* Raster: Handy eine Spalte (kompakt), Tablet zwei, Desktop vier */
.kader {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.kader {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
	}
}

@media (min-width: 1024px) {
	.kader {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Karte wie bei den Berichten: Bild oben, Text darunter. Nicht verlinkt,
   eine Seite je Person gibt es nicht. */
.kader-karte {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--hell-2);
	border-radius: var(--wp--custom--radius--karte);
	background-color: var(--wp--preset--color--weiss);
}

.kader-karte__bild {
	position: relative;
	margin: 0;
}

/* Hochformat 4:5, Ausschnitt eher oben, damit Köpfe nicht abgeschnitten werden */
.kader-karte__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
}

/* Rückennummer als Schild unten rechts auf dem Foto (Weiß auf Rot 4,87:1) */
.kader-karte__nummer {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.5rem;
	border: 3px solid var(--wp--preset--color--weiss);
	border-radius: var(--wp--custom--radius--rund);
	background-color: var(--wp--preset--color--rot);
	color: var(--wp--preset--color--weiss);
	font-size: var(--wp--preset--font-size--mittel);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.kader-karte__inhalt {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.125rem 1.25rem 1.375rem;
}

.kader-karte__inhalt > * {
	margin: 0;
}

.kader-karte__name {
	font-size: var(--wp--preset--font-size--mittel);
	font-weight: 800;
}

.kader-karte__daten {
	color: var(--wp--preset--color--dunkelrot);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	line-height: 1.5;
}

.kader-karte__jahrgang {
	color: var(--wp--preset--color--grau-11);
	font-weight: 600;
	white-space: nowrap;
}

.kader-karte__text {
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.6;
}

.kader-karte__text > * {
	margin: 0;
}

.kader-karte__text > * + * {
	margin-top: 0.5em;
}

/* Handy: kompakte Karte wie bei den Berichten, kleines Bild links, der Text
   läuft darunter weiter. Mit Bild oben wäre jede Karte rund 650 px hoch. */
@media (max-width: 599.98px) {
	.kader-karte {
		display: flow-root;
		padding: 1rem;
	}

	.kader-karte__bild {
		float: left;
		width: 6.5rem;
		margin: 0 1rem 0.5rem 0;
	}

	.kader-karte__foto {
		border-radius: var(--wp--custom--radius--klein);
	}

	.kader-karte__nummer {
		right: 0.375rem;
		bottom: 0.375rem;
		min-width: 1.875rem;
		height: 1.875rem;
		padding-inline: 0.3rem;
		border-width: 2px;
		font-size: var(--wp--preset--font-size--klein);
	}

	.kader-karte__inhalt {
		display: block;
		padding: 0;
	}

	.kader-karte__inhalt > * + * {
		margin-top: 0.375rem;
	}
}

/* ---------- Aktionen (/aktionen/) ---------- */

/* Zeitraum als Chip wie die Liga der Mannschaften (Dunkelrot auf hellem Rotton 6,09:1) */
.aktion__zeitraum {
	width: fit-content;
	margin: 0;
	padding: 0.25rem 0.75rem;
	border-radius: var(--wp--custom--radius--rund);
	background-color: var(--wp--preset--color--rot-hell);
	color: var(--wp--preset--color--dunkelrot);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 800;
}

/* Beendet: Grau 11 auf Hell 2 (5,79:1) */
.aktion__zeitraum--beendet {
	background-color: var(--wp--preset--color--hell-2);
	color: var(--wp--preset--color--grau-11);
}

/* Ohne Ende bzw. solange die Aktion läuft: Zeile ausblenden */
:is(.aktion__zeitraum, .aktion-beendet):empty {
	display: none;
}

/* Aktionsseite: Kopf wie bei den Mannschaften */
.aktion__kopf > * {
	margin-block: 0;
}

.aktion__kopf > * + * {
	margin-top: 0.75rem;
}

.aktion__kopf .aktion__zeitraum {
	padding: 0.375rem 0.875rem;
	font-size: 0.9rem;
}

/* Beendete Aktion, die jemand über einen alten Link aufruft */
.aktion-beendet {
	padding: 1rem 1.25rem;
	border-radius: var(--wp--custom--radius--klein);
	background-color: var(--wp--preset--color--hell-2);
	font-weight: 700;
}

.aktion-seite .wp-block-post-content > h2 {
	margin-top: var(--wp--preset--spacing--60);
}

.aktion-seite .wp-block-post-content > h3 {
	margin-top: var(--wp--preset--spacing--50);
}

.aktion-seite .wp-block-post-content > :is(h3, h4) + * {
	margin-top: 0.75rem;
}

/* Kasten im Text für das Wichtigste, z. B. wo bestellt wird (Klasse im Editor) */
.kasten {
	padding: 1.125rem 1.375rem;
	border-radius: var(--wp--custom--radius--karte);
	background-color: var(--wp--preset--color--rot-hell);
}

/* Preistabellen (Klasse „preise“ am Tabellen-Block) */
.wp-block-table.preise table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table.preise :is(th, td) {
	padding: 0.625rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--grau-2);
	text-align: left;
	vertical-align: top;
}

.wp-block-table.preise thead {
	border-bottom: 0;
}

.wp-block-table.preise th {
	background-color: var(--wp--preset--color--hell-1);
	font-size: var(--wp--preset--font-size--klein);
}

.wp-block-table.preise th:first-child {
	border-top-left-radius: var(--wp--custom--radius--klein);
}

.wp-block-table.preise th:last-child {
	border-top-right-radius: var(--wp--custom--radius--klein);
}

/* Weiß hinterlegt, damit der Seitenhintergrund (Foto) die Zahlen nicht stört */
.wp-block-table.preise td {
	background-color: var(--wp--preset--color--weiss);
}

/* Größen („XS–5XL“) und Preise nicht am Strich umbrechen, nur die erste Spalte */
.wp-block-table.preise td:not(:first-child) {
	white-space: nowrap;
}

/* Aktionspreis hervorgehoben, Dunkelrot auf Weiß 7,45:1 */
.wp-block-table.preise strong {
	color: var(--wp--preset--color--dunkelrot);
}

/* Handy: kleinere Schrift, damit drei Spalten in die Breite passen */
@media (max-width: 599.98px) {
	.wp-block-table.preise :is(th, td) {
		padding: 0.5rem 0.625rem;
		font-size: var(--wp--preset--font-size--klein);
	}
}

/* Flyer (Galerie mit der Klasse „flyer“): zwei nebeneinander, auch auf dem
   Handy, ganz und ohne Zuschnitt; ein Klick öffnet sie groß. */
.wp-block-gallery.has-nested-images.flyer {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-gallery.has-nested-images.flyer figure.wp-block-image {
	width: auto !important;
	margin: 0;
}

.wp-block-gallery.has-nested-images.flyer figure.wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--klein);
	box-shadow: var(--wp--preset--shadow--karte);
}

/* Bildunterschrift unter dem Flyer statt unscharf darübergelegt (Galerie-Standard) */
.wp-block-gallery.has-nested-images.flyer figure.wp-block-image::before {
	display: none !important;
}

.wp-block-gallery.has-nested-images.flyer figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	margin-top: 0.5rem;
	padding: 0;
	overflow: visible;
	background: none;
	color: var(--wp--preset--color--grau-11);
	font-size: var(--wp--preset--font-size--klein);
	text-align: center;
	text-shadow: none;
}

/* Karten der Übersicht: Flyer im Hochformat zeigen oben ihren Kopf */
.aktionen-karten .wp-block-post-featured-image img {
	object-position: top;
}

.aktionen-leer {
	padding: 1.25rem 1.5rem;
	border-radius: var(--wp--custom--radius--karte);
	background-color: var(--wp--preset--color--hell-1);
}

.aktionen-leer > * {
	margin: 0;
}

/* Startseite: Hinweis auf laufende Aktionen (Block „Hinweis auf Aktionen“) */
.aktion-hinweis {
	position: relative;
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	align-items: center;
	padding: var(--wp--preset--spacing--30);
	border-radius: calc(var(--wp--custom--radius--karte) + 8px);
	background-color: var(--wp--preset--color--rot-hell);
	transition: box-shadow 0.15s, transform 0.15s;
}

.aktion-hinweis:not(:has(> .aktion-hinweis__bild)) {
	grid-template-columns: minmax(0, 1fr);
}

.aktion-hinweis + .aktion-hinweis {
	margin-top: 1rem;
}

.aktion-hinweis:hover {
	box-shadow: var(--wp--preset--shadow--karte);
	transform: translateY(-2px);
}

.aktion-hinweis:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--dunkelrot);
	outline-offset: 3px;
}

.aktion-hinweis a:focus-visible {
	outline: none;
}

.aktion-hinweis__bild {
	margin: 0;
}

.aktion-hinweis__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: top;
	border-radius: var(--wp--custom--radius--klein);
}

.aktion-hinweis__text > * {
	margin: 0;
}

.aktion-hinweis__text > * + * {
	margin-top: 0.25rem;
}

.aktion-hinweis__titel {
	font-size: var(--wp--preset--font-size--gross);
}

.aktion-hinweis__titel a {
	color: inherit;
	text-decoration: none;
}

/* Ganze Fläche klickbar über den Titel-Link */
.aktion-hinweis__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.aktion-hinweis__kurz {
	font-weight: 600;
}

/* Sieht aus wie ein Button, der Link ist der Titel */
.aktion-hinweis__knopf {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--wp--custom--ziel-groesse);
	padding: 0.75rem 1.5rem;
	border-radius: var(--wp--custom--radius--rund);
	background-color: var(--wp--preset--color--rot);
	color: var(--wp--preset--color--weiss);
	font-weight: 700;
	line-height: 1.2;
}

.aktion-hinweis__knopf::after {
	content: "→";
	margin-left: 0.5em;
}

.aktion-hinweis:hover .aktion-hinweis__knopf {
	background-color: var(--wp--preset--color--dunkelrot);
}

@media (min-width: 600px) {
	.aktion-hinweis {
		grid-template-columns: 9rem minmax(0, 1fr) auto;
		padding: var(--wp--preset--spacing--40);
	}

	.aktion-hinweis:not(:has(> .aktion-hinweis__bild)) {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.aktion-hinweis__knopf {
		grid-column: auto;
	}
}

/* Im Editor, wenn gerade keine Aktion läuft */
.aktionen-hinweis-leer {
	margin: 0;
	padding: 1rem 1.25rem;
	border: 2px dashed var(--wp--preset--color--grau-2);
	border-radius: var(--wp--custom--radius--klein);
	color: var(--wp--preset--color--grau-11);
	font-size: var(--wp--preset--font-size--klein);
}

/* ---------- Berichte-Archiv ---------- */

.filter-kasten {
	padding: clamp(1.25rem, 4vw, 2rem);
	border-radius: calc(var(--wp--custom--radius--karte) + 8px);
}

/* Filter-Formular (Archiv und Startseite), funktioniert ohne JavaScript */
.berichte-filter__formular {
	display: grid;
	gap: 0.875rem;
}

@media (min-width: 900px) {
	.berichte-filter__formular {
		grid-template-columns: 2fr 1fr 1fr auto;
		align-items: end;
	}
}

.berichte-filter__feld {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.berichte-filter__feld label {
	font-size: 0.9rem;
	font-weight: 700;
}

.berichte-filter :is(input, select) {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0.625rem 1.125rem;
	border: 2px solid var(--wp--preset--color--grau-11);
	border-radius: var(--wp--custom--radius--rund);
	background-color: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--text);
	font: inherit;
	appearance: none;
}

.berichte-filter input::placeholder {
	color: var(--wp--preset--color--grau-11);
	opacity: 1;
}

.berichte-filter select {
	padding-right: 2.75rem;
	text-overflow: ellipsis;
}

/* Pfeil der Auswahlliste in Textfarbe statt fester Grafik */
.berichte-filter__auswahl {
	position: relative;
	display: block;
}

.berichte-filter__auswahl::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.25rem;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2.5px solid var(--wp--preset--color--text);
	border-bottom: 2.5px solid var(--wp--preset--color--text);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.berichte-filter__knopf {
	border: 0;
	font-family: inherit;
	cursor: pointer;
}

.berichte-filter__ergebnis {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1rem;
	margin: 1rem 0 0;
	color: var(--wp--preset--color--grau-11);
}

.berichte-filter__ergebnis strong {
	color: var(--wp--preset--color--text);
}

.berichte-filter__ergebnis a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--ziel-groesse);
	font-weight: 700;
}

/* Trefferliste: kompakt, ohne Bilder */
.treffer-liste {
	margin-top: var(--wp--preset--spacing--50);
}

.treffer-liste .wp-block-post-template {
	display: grid;
	gap: 0.625rem;
	padding: 0;
	list-style: none;
}

.treffer-liste .wp-block-post {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--hell-2);
	border-radius: var(--wp--custom--radius--klein);
	background-color: var(--wp--preset--color--weiss);
	transition: box-shadow 0.15s;
}

.treffer-liste .wp-block-post:hover {
	box-shadow: var(--wp--preset--shadow--karte);
}

.treffer-liste .wp-block-post-title {
	margin: 0;
	font-weight: 700;
	line-height: 1.3;
}

.treffer__meta {
	gap: 0.375rem 0.75rem;
	align-items: center;
}

.treffer__meta > * {
	margin: 0;
}

/* ---------- Suche ---------- */

.wp-block-search__label {
	font-weight: 700;
}

.wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.wp-block-search__input {
	min-height: 48px;
	padding: 0.625rem 1.125rem;
	border: 2px solid var(--wp--preset--color--grau-11);
	border-radius: var(--wp--custom--radius--rund);
	font: inherit;
}

.wp-block-search__button {
	margin-left: 0;
}

/* ---------- Beitrags- und Seiteninhalt (auch alte, klassische Inhalte) ---------- */

/* Inhalt in einer verschachtelten Gruppe (article in main): kein zweiter
   Randabstand, sonst steht der Text auf dem Handy weiter innen als der Titel. */
:where(.has-global-padding .has-global-padding) > .wp-block-post-content.alignfull {
	padding-inline: 0;
}

.wp-block-post-content img {
	height: auto;
	border-radius: var(--wp--custom--radius--klein);
}

.wp-block-post-content :where(iframe, video, embed, object) {
	max-width: 100%;
}

.wp-block-post-content :where(img.alignleft, .wp-caption.alignleft) {
	float: left;
	margin: 0.25rem 1.5rem 1rem 0;
}

.wp-block-post-content :where(img.alignright, .wp-caption.alignright) {
	float: right;
	margin: 0.25rem 0 1rem 1.5rem;
}

.wp-block-post-content :where(img.aligncenter, .wp-caption.aligncenter) {
	display: block;
	margin-inline: auto;
}

.wp-block-post-content .wp-caption {
	max-width: 100%;
}

/* Alte Tabellen mit fester Breite: auf schmalen Bildschirmen innerhalb
   ihres Kastens wischen, die Seite selbst bleibt fest (Hülle aus functions.php). */
.tabelle-scroll {
	max-width: 100%;
	overflow-x: auto;
}

/* Statt eingebetteter Videos, Karten und Beiträge fremder Dienste: Kasten
   mit Link (MU-Plugin, Schritt 8.3). Ein span, deshalb als Block anzeigen. */
.fremdinhalt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-block: 0.5rem;
	padding: 0.85rem 1.25rem 0.35rem;
	border-radius: var(--wp--custom--radius--klein);
	background-color: var(--wp--preset--color--hell-1);
}

.fremdinhalt__art {
	color: var(--wp--preset--color--grau-11);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
}

.fremdinhalt__titel {
	margin-top: 0.25rem;
	font-weight: 600;
	line-height: 1.4;
}

.fremdinhalt__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--ziel-groesse);
	font-weight: 700;
}

/* Im Block „Einbetten“ keinen leeren Platz fürs Seitenverhältnis des Videos */
.wp-block-embed__wrapper:has(> .fremdinhalt)::before {
	content: none;
}

.wp-block-post-content .wp-caption-text {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--grau-11);
	font-size: var(--wp--preset--font-size--klein);
}

.wp-block-post-content::after {
	content: "";
	display: table;
	clear: both;
}

@media (max-width: 600px) {
	.wp-block-post-content :where(img.alignleft, img.alignright, .wp-caption.alignleft, .wp-caption.alignright) {
		float: none;
		display: block;
		margin: 0 auto 1rem;
	}
}

/* Navigation unter einem Bericht: kleine Zeile „← Älterer Bericht“ bzw.
   „Neuerer Bericht →“, darunter der Titel; der neuere steht rechts. */
.beitrag-nav {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.beitrag-nav .wp-block-post-navigation-link {
	flex: 1 1 16rem;
	max-width: 28rem;
}

.beitrag-nav .wp-block-post-navigation-link:empty {
	display: none;
}

.beitrag-nav .post-navigation-link-next {
	margin-left: auto;
	text-align: right;
}

.wp-block-post-navigation-link a {
	display: inline-flex;
	flex-direction: column;
	gap: 0.25rem;
	min-height: var(--wp--custom--ziel-groesse);
	color: var(--wp--preset--color--text);
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

.post-navigation-link-next a {
	align-items: flex-end;
}

.wp-block-post-navigation-link .post-navigation-link__label {
	color: var(--wp--preset--color--dunkelrot);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Pfeile nur zur Ansicht, Screenreader lesen sie nicht vor (Alternativtext "") */
.post-navigation-link-previous .post-navigation-link__label::before {
	content: "← ";
	content: "← " / "";
}

.post-navigation-link-next .post-navigation-link__label::after {
	content: " →";
	content: " →" / "";
}

.wp-block-post-navigation-link a:hover .post-navigation-link__title {
	text-decoration: underline;
}

/* ---------- Fußzeile ---------- */

/*
 * Der Inhalt beginnt unter den Lücken der Waben. Sie reichen bis 7,4 % der Bildbreite,
 * das Bild ist so breit wie die Fußzeile, mindestens 75rem (Lücken dann 5,6rem).
 * Grau 11 hätte auf den Waben zu wenig Kontrast, deshalb Textfarbe.
 */
.fuss {
	position: relative;
	isolation: isolate;
	margin-top: var(--wp--preset--spacing--70);
	padding-block: calc(max(7.4%, 5.6rem) + 1rem) 1.25rem;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--klein);
}

/*
 * Rote Waben, oben aufgelockert. In den Lücken scheint das Foto des Seitenhintergrunds
 * durch. Unter den Waben liegt Weiß, ausgeschnitten mit demselben Bild als Maske,
 * damit das Foto dort nicht durchscheint und die Schrift lesbar bleibt. Das Bild ist
 * nach unten verlängert, die Waben behalten so auf jeder Breite ihre Größe.
 */
.fuss::before,
.fuss::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.fuss::before {
	background-color: var(--wp--preset--color--weiss);
	-webkit-mask: url("../images/fusszeile-waben.webp") center top / max(100%, 75rem) auto no-repeat;
	mask: url("../images/fusszeile-waben.webp") center top / max(100%, 75rem) auto no-repeat;
}

.fuss::after {
	background: url("../images/fusszeile-waben.webp") center top / max(100%, 75rem) auto no-repeat;
	opacity: 0.4;
}

.fuss h2 {
	margin-bottom: 0.25rem;
}

/* Logo neben dem Namen statt darüber, spart Höhe */
.fuss__marke {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.fuss__marke > * {
	margin-block: 0;
}

.fuss__marke .wp-block-image {
	flex: none;
}

.fuss a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--ziel-groesse);
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

/* Tablet: Spalten 2 × 2 statt untereinander (WordPress stapelt bis 781 px) */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.fuss .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.fuss .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex: 1 1 40% !important;
	}
}

.fuss .wp-block-list {
	padding-left: 0;
	list-style: none;
}

/* Icons bündig mit den Links darüber (das Icon sitzt mittig in der Tippfläche) */
.fuss .soziale-links {
	margin-left: calc((var(--soziale-links-icon) - var(--wp--custom--ziel-groesse)) / 2) !important;
}

.fuss__unten {
	margin-top: 1.25rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--grau-2);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}