/*
 * TSV 1885 Friedberg-Fauerbach e. V. – was theme.json nicht ausdrücken kann.
 *
 * Erscheinungsbild der bisherigen Seite tsvff.de (blauer Kopf, blauer Fuß,
 * rote Knöpfe/Linie), umgesetzt auf dem Parent (docs/entscheidungen-design.md,
 * „Korrektur nach Rückmeldung von Lars“).
 * Farben nur über Paletten-Rollen und die zwei Vereins-Tokens
 * --wp--custom--tsvff--signal (Rot #E30613) und --signal-hover (#B8050F).
 * Rot ist Signal, nie Fläche unter Fließtext: Weiß auf Rot 4,88:1.
 * Bewegung nur in (prefers-reduced-motion: no-preference), Hover nur in
 * (hover: hover) – wie im Parent.
 */

:root {
	/* Der Strich vor dem Kicker (Seiten des Plugins): auf hellen Flächen Rot. */
	--tsvff-kicker-stroke: var(--wp--custom--tsvff--signal);
}

.is-style-wpce-section-3,
.is-style-wpce-section-4,
.is-style-wpce-section-5 {
	--tsvff-kicker-stroke: currentcolor;
}

.is-style-wpce-kicker::before {
	background: var(--tsvff-kicker-stroke);
}

/* ---------- Links im Fließtext (WCAG 1.4.1) ----------
 * Unterstrichen, nicht nur farbig. Der Parent setzt die Unterstreichung global;
 * hier nur Lage und Stärke, damit Unterlängen lesbar bleiben, und ein
 * kräftigerer Strich bei Hover und Fokus statt eines Farbwechsels allein. */
:where(p, li, td, dd, figcaption, blockquote) a:where(:not(.wp-element-button, .wpce-menu__link)) {
	text-decoration-line: underline;
	text-decoration-thickness: max(1px, 0.0625em);
	text-underline-offset: 0.2em;
}

:where(p, li, td, dd, figcaption, blockquote) a:where(:not(.wp-element-button, .wpce-menu__link)):is(:hover, :focus-visible) {
	text-decoration-thickness: max(2px, 0.125em);
}

/* Lange Adressen (Datenschutz: URLs der Dienste) brechen um, statt die Seite
 * auf dem Handy seitlich scrollen zu lassen. */
:where(p, li, td, dd) a {
	overflow-wrap: anywhere;
}

/* Rasterzellen dürfen schmaler werden als ihr Inhalt (ein Bild, das nicht
 * lädt, zeigt sonst seinen Alt-Text in einer Zeile und sprengt das Raster). */
.wp-block-post-template.is-layout-grid > li {
	min-width: 0;
}

/* ---------- Kopf (blau, wie bisher) ----------
 * Fläche, Schrift, Akzent und Knopf kommen aus theme.json
 * (custom.wpce.header.*); klebend (position: sticky), wird beim Scrollen etwas schlanker.
 * Hier nur die Anordnung der bisherigen Seite: Logo allein links, Menü in der
 * Mitte, roter Knopf rechts. */

/* Der Name steht nur für Screenreader da; sichtbar ist das Logo (56 px). */
.wpce-header__brand .wp-block-site-title {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

/* Menü wie bisher in der Textschrift, normal, in Textgröße. (Die Typografie
 * aus styles.blocks erreicht die Links nicht, das Menü setzt sie selbst.) */
.wpce-header .wpce-menu--horizontal:not(.is-collapsed) .wpce-menu__list > .wpce-menu__item > .wpce-menu__link {
	font-family: var(--wp--preset--font-family--base);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

/* Das Menü nimmt den Platz zwischen Logo und Knopf und steht in dessen Mitte. */
.wpce-header__nav > .wpce-menu--horizontal:not(.is-collapsed) {
	flex: 1 1 auto;
}

.wpce-header__nav > .wpce-menu--horizontal:not(.is-collapsed) .wpce-menu__list {
	justify-content: center;
}

/* Aktiver Menüpunkt wie bisher: fett statt Strich. Gezeichnet mit einer
 * Kontur statt font-weight, damit der Punkt nicht breiter wird (Parent-Regel:
 * der Kopf darf je Seite nicht breiter sein). Der Strich des Parents bleibt
 * für Hover und Fokus (weiß, header.accent). */
.wpce-header .wpce-menu--horizontal .wpce-menu__list > .wpce-menu__item > .wpce-menu__link[aria-current="page"],
.wpce-header .wpce-menu--horizontal .wpce-menu__list > .current-menu-ancestor > .wpce-menu__link {
	-webkit-text-stroke: 0.04em currentcolor;
}

.wpce-header .wpce-menu--horizontal .wpce-menu__list > .wpce-menu__item > .wpce-menu__link[aria-current="page"]:not(:hover, :focus-visible),
.wpce-header .wpce-menu--horizontal .wpce-menu__list > .current-menu-ancestor > .wpce-menu__link:not(:hover, :focus-visible) {
	background-size: 0 2px;
}

/* Der rote Knopf „Mitglied werden“ bleibt rot, auch wenn ein Knopf des Bildes
 * im Blick ist: Die Knöpfe der Startseite führen zu anderen Zielen
 * (Sportangebot, Veranstaltungen), der Kopf-Knopf ist der einzige Weg zur
 * Mitgliedschaft (bisheriges Verhalten). Der Parent schaltet den Umriss mit
 * sehr spezifischen :has()-Selektoren; nur !important hält dagegen, ohne die
 * Selektoren des Parents nachzubauen. */
.wpce-header .wpce-header__action .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--custom--wpce--header--button-background) !important;
	box-shadow: none !important;
	color: var(--wp--custom--wpce--header--button-text) !important;
}

.wpce-header .wpce-header__action .wp-block-button__link:not(.has-background):focus-visible {
	background-color: var(--wp--custom--wpce--header--button-hover-background) !important;
	color: var(--wp--custom--wpce--header--button-hover-text) !important;
}

@media (hover: hover) {

	.wpce-header .wpce-header__action .wp-block-button__link:not(.has-background):hover {
		background-color: var(--wp--custom--wpce--header--button-hover-background) !important;
		color: var(--wp--custom--wpce--header--button-hover-text) !important;
	}
}

/* Kopf-Knopf so groß wie bisher (Montserrat 600, etwas kleiner als der Text). */
.wpce-header__action .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
	padding: 0.5em 1em;
}

/* Auf dem Handy stand der Knopf bisher neben Logo und Menüknopf; ohne
 * sichtbaren Namen ist dafür ab 360 px Platz (der Parent blendet ihn unter
 * 480 px aus). */
@media (min-width: 360px) and (max-width: 479.98px) {

	.wpce-header__nav > .wpce-header__action {
		display: flex;
	}
}

/* ---------- Knöpfe ----------
 * Varianten: gefüllt in Vereinsblau (Standard), Umriss (Parent), „Signal“ in
 * Rot (styles/blocks/button-signal.json). Im Bild der Startseite macht der
 * Parent den ersten Knopf hellblau; hier bleibt er wie bisher rot, der zweite
 * blau (.tsvff-button-primary). Weiß auf Rot 4,88:1, Weiß auf Blau 7,32:1 –
 * unabhängig vom Bild, weil die Knöpfe eine eigene Fläche haben. */
.wp-block-button.is-style-tsvff-signal > .wp-block-button__link:not(.has-background, .has-text-color),
.wpce-slideshow .wp-block-button.is-style-tsvff-signal.is-style-tsvff-signal > .wp-block-button__link.wp-element-button:not(.has-background, .has-text-color) {
	background-color: var(--wp--custom--tsvff--signal);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-tsvff-signal > .wp-block-button__link:is(:hover, :focus-visible),
.wpce-slideshow .wp-block-button.is-style-tsvff-signal.is-style-tsvff-signal > .wp-block-button__link.wp-element-button:not(.has-background, .has-text-color):is(:hover, :focus-visible) {
	background-color: var(--wp--custom--tsvff--signal-hover);
	color: var(--wp--preset--color--base);
}

.wpce-slideshow .wp-block-button.tsvff-button-primary.tsvff-button-primary > .wp-block-button__link.wp-element-button:not(.has-background, .has-text-color) {
	background-color: var(--wp--preset--color--primary);
	border: 0;
	box-shadow: none;
	color: var(--wp--preset--color--base);
}

.wpce-slideshow .wp-block-button.tsvff-button-primary.tsvff-button-primary > .wp-block-button__link.wp-element-button:not(.has-background, .has-text-color):is(:hover, :focus-visible) {
	background-color: var(--wp--custom--wpce--color--hover);
	color: var(--wp--preset--color--base);
}

.is-style-tsvff-signal > .wp-block-button__link:focus-visible,
.tsvff-button-primary > .wp-block-button__link:focus-visible {
	outline: var(--wp--custom--wpce--focus--width, 3px) solid var(--wpce-focus, currentcolor);
	outline-offset: var(--wp--custom--wpce--focus--offset, 3px);
}

@media (prefers-reduced-motion: no-preference) {

	/* Nur Text-Links; Knöpfe bewegt der Parent (motion.css), das bleibt unberührt. */
	:where(p, li, td, dd, figcaption, blockquote) a:where(:not(.wp-element-button, .wpce-menu__link)) {
		transition:
			color var(--wp--custom--wpce--motion--duration--fast, 150ms) ease,
			text-decoration-thickness var(--wp--custom--wpce--motion--duration--fast, 150ms) ease;
	}
}

/* ---------- Startseite (patterns/page-home.php) ---------- */

/* Vereinsname und Claim im Bild wie bisher: weiße Schrift auf blauen Balken.
 * Weiß auf Blau 7,32:1, unabhängig vom Bild. */
.tsvff-hero .tsvff-highlight {
	background: none;
	color: var(--wp--preset--color--base);
	margin-block: 0;
}

.tsvff-hero .tsvff-highlight > *,
.tsvff-hero h1.tsvff-highlight,
.tsvff-hero p.tsvff-highlight {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.tsvff-hero h1.tsvff-highlight,
.tsvff-hero p.tsvff-highlight {
	background: var(--wp--preset--color--primary);
	display: table;
	padding: 0.05em 0.25em;
}

.tsvff-hero h1.tsvff-highlight {
	font-size: clamp(1.85rem, 1.45rem + 1.6vw, 2.675rem);
	line-height: 1.2;
	max-width: 100%;
}

.tsvff-hero .tsvff-claim {
	font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
	line-height: 1.3;
}

/* Die Bilderfolge ist 75 vh hoch (Pattern); auf hohen Fenstern (Tablet hoch,
 * Monitor) wird sie nicht zur Wand. */
.tsvff-hero {
	max-height: 52rem;
}

/* Knöpfe stehen links unter dem Text, auch am Handy (der Parent zentriert sie
 * dort in der Bilderfolge). */
.tsvff-hero .wp-block-buttons {
	justify-content: flex-start;
}

/* Name, Claim und Knöpfe stehen dicht beieinander wie bisher. */
.tsvff-hero .wpce-slideshow__content {
	gap: 0.5rem;
}

/* Der Text steht auf eigenen Balken – kein Schleier dahinter nötig, das Bild
 * bleibt hell wie bisher. */
.tsvff-hero .wpce-slideshow__content::before {
	opacity: 0.35;
}

/* Bänder der Startseite sind alle weiß wie bisher: zwei gleiche hintereinander
 * bekämen sonst doppelten Abstand. */
.tsvff-home {
	padding-block: var(--wp--preset--spacing--40);
}

.tsvff-home + .tsvff-home {
	padding-block-start: var(--wp--preset--spacing--30);
}

/* Überschrift und Karten dichter beieinander als im Parent (spacing 50),
 * wie bisher auf tsvff.de. */
.tsvff-home > .wpce-section__head + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.tsvff-home:last-child {
	padding-block-end: var(--wp--preset--spacing--50);
}

/* Zwei Termine füllen die Zeile (sonst zwei von drei Spalten, eine Lücke). */
@media (min-width: 700px) {

	.tsvff-home .wpce-entries--type-event .wpce-entries__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Event card without a picture: the pale strip behind the date block stays, but
 * it spans the full card height, rounds its outer corners like the card (the
 * square corners stuck out past the border) and centres the block between the
 * edges; the text is centred vertically beside it. */
.tsvff-home .wpce-card--date {
	align-items: stretch;
}

.tsvff-home .wpce-card--date .wpce-card__media {
	--tsvff-strip-radius: calc(var(--wpce-card-radius) - var(--wpce-card-line-width));

	align-items: center;
	background: var(--wpce-surface);
	border-radius: var(--tsvff-strip-radius) 0 0 var(--tsvff-strip-radius);
	display: flex;
	padding-inline: var(--wpce-card-pad);
}

.tsvff-home .wpce-card--date .wpce-card__body {
	justify-content: center;
}

/* On a phone the strip takes less room, so a long title (Saisonabschlussfeier)
 * is not torn in the middle of the word. */
@media (max-width: 480px) {

	.tsvff-home .wpce-card--date .wpce-card__media {
		padding-inline: 0.75rem;
	}

	.tsvff-home .wpce-card--date .wpce-card__body {
		padding-inline-start: 1rem;
	}
}

/* „Mehr“-Knopf unter einem Raster (Alle Nachrichten, Zum Sportangebot …). */
.tsvff-more {
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Nachrichten: vier gleich hohe Karten in einer Reihe wie bisher – Titel
 * höchstens zwei Zeilen (den Anriss kürzt der Parent auf drei); am Tablet
 * zwei, am Handy eine. Der volle Titel steht auf der Beitragsseite und bleibt
 * für Screenreader ganz. */
.tsvff-news .wpce-news-card .wp-block-post-title {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Der Link muss inline stehen, sonst zählt er als eine einzige Zeile. */
.tsvff-news .wpce-news-card .wp-block-post-title > a {
	display: inline;
}

@media (max-width: 1023.98px) {

	.tsvff-news .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599.98px) {

	.tsvff-news .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Front page on a phone: the news cards sit side by side and are swiped, with the
 * next card peeking in (no script: scroll snapping). The list page keeps one column. */
@media (max-width: 599.98px) {

	.tsvff-home .tsvff-news .wp-block-post-template.is-layout-grid {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding-block-end: 0.75rem;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
	}

	.tsvff-home .tsvff-news .wp-block-post-template.is-layout-grid > li {
		flex: 0 0 82%;
		margin: 0;
		scroll-snap-align: start;
	}

	/* The departments and the events of the front page swipe the same way. */
	.tsvff-home :is(.wpce-entries--type-section, .wpce-entries--type-event) .wpce-entries__list {
		display: flex;
		flex-wrap: nowrap;
		gap: 1rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding-block-end: 0.75rem;
		scroll-snap-type: x mandatory;
	}

	.tsvff-home :is(.wpce-entries--type-section, .wpce-entries--type-event) .wpce-entries__item {
		flex: 0 0 82%;
		margin: 0;
		scroll-snap-align: start;
	}

	/* Dots instead of a scroll bar (assets/js/sliders.js adds them). */
	.tsvff-home .tsvff-news .wp-block-post-template.is-layout-grid,
	.tsvff-home :is(.wpce-entries--type-section, .wpce-entries--type-event) .wpce-entries__list {
		scrollbar-width: none;
	}

	.tsvff-home .tsvff-news .wp-block-post-template.is-layout-grid::-webkit-scrollbar,
	.tsvff-home :is(.wpce-entries--type-section, .wpce-entries--type-event) .wpce-entries__list::-webkit-scrollbar {
		display: none;
	}

	.tsvff-dots {
		align-items: center;
		display: flex;
		gap: 0;
		justify-content: center;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.tsvff-dots > li {
		display: flex;
		margin: 0;
		padding: 0;
	}

	.tsvff-dots button {
		background: transparent;
		border: 0;
		cursor: pointer;
		display: block;
		height: 2.75rem;
		margin: 0;
		min-height: 0;
		padding: 0;
		position: relative;
		width: 1.75rem;
	}

	.tsvff-dots button::before {
		background: var(--wp--preset--color--contrast-2);
		border-radius: 50%;
		content: "";
		height: 0.625rem;
		inset: 50% auto auto 50%;
		opacity: 0.4;
		position: absolute;
		translate: -50% -50%;
		width: 0.625rem;
	}

	.tsvff-dots button[aria-current="true"]::before {
		background: var(--wp--preset--color--primary);
		opacity: 1;
	}

	.tsvff-dots button:focus-visible {
		outline: var(--wp--custom--wpce--focus--width, 3px) solid var(--wp--preset--color--primary);
		outline-offset: -4px;
	}
}

/* The dots only exist on phones. */
@media (min-width: 600px) {

	.tsvff-dots {
		display: none;
	}
}

/* ---------- Fuß (blau, wie bisher; patterns/footer.php) ----------
 * Abschnittsstil 4 (Vereinsblau, weiße Schrift); drei gleich breite Spalten,
 * darunter Kontakt und Zeiten, unter einer roten Linie Copyright und
 * Rechtliches. */
.tsvff-footer {
	font-size: var(--wp--preset--font-size--medium);
}

.tsvff-footer .tsvff-footer__heading {
	color: inherit;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
}

.tsvff-footer .wpce-footer__column {
	flex: 1 1 14rem;
}

.tsvff-footer .tsvff-footer__info {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Phone: the columns stack, so they need to be told apart. Each group after the first
 * starts below a fine line with room above it, its heading is a small caption, and
 * the links inside are close together: the distance between two groups is clearly
 * larger than the distance between two links. */
@media (max-width: 47.99rem) {

	.tsvff-footer .tsvff-footer__columns {
		display: grid;
		gap: 0;
	}

	.tsvff-footer .tsvff-footer__columns > .wpce-footer__column + .wpce-footer__column {
		border-block-start: 1px solid rgb(255 255 255 / 0.25);
		margin-block-start: 1.75rem;
		padding-block-start: 1.75rem;
	}

	.tsvff-footer .tsvff-footer__heading {
		font-size: 0.9375rem;
		font-weight: 800;
		letter-spacing: 0.08em;
		margin-block-end: 0.75rem;
		text-transform: uppercase;
	}

	/* The red stroke of the site's headings under the group heading, so the heading is told
	 * from the links beneath it (they are plain, a little softer). */
	.tsvff-footer .tsvff-footer__heading::after {
		background: var(--wp--custom--tsvff--signal);
		border-radius: 2px;
		content: "";
		display: block;
		height: 3px;
		margin-block-start: 0.5rem;
		width: 2rem;
	}

	.tsvff-footer .tsvff-footer__columns .wpce-menu__link {
		color: rgb(255 255 255 / 0.88);
		font-weight: 400;
	}

	.tsvff-footer .tsvff-footer__columns .wpce-menu__link {
		min-height: 2.25rem;
		padding-block: 0.3rem;
	}

	/* The club column lines up with the other columns (no indent). */
	.tsvff-footer .tsvff-footer__club .wp-block-site-logo,
	.tsvff-footer .tsvff-footer__club .wpce-address {
		margin-inline-start: 0;
	}

	/* The last row: the copyright, then the legal links in an even flow (the same
	 * distance across and down), each still a 24 px target. */
	.tsvff-footer .tsvff-footer__bottom {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.75rem;
	}

	.tsvff-footer .tsvff-footer__bottom .wpce-menu__list {
		column-gap: 1.5rem;
		row-gap: 0.25rem;
	}

	.tsvff-footer .tsvff-footer__bottom .wpce-menu__link {
		min-height: 1.75rem;
		padding-block: 0.15rem;
	}
}

.tsvff-footer .tsvff-footer__info .wpce-footer__column > * + * {
	margin-block-start: 0;
}

.tsvff-footer :is(.tsvff-footer__label, .wpce-opening-hours__label) {
	font-weight: 700;
	margin-block: 0;
}

/* Tag und Zeit stehen wie bisher hintereinander („Mittwoch: 10:00–12:00“). */
.tsvff-footer .wpce-opening-hours__day {
	display: flex;
	gap: 0.35em;
	justify-content: flex-start;
	padding-block: 0;
}

.tsvff-footer .wpce-opening-hours__day dt {
	color: inherit;
}

.tsvff-footer .wpce-opening-hours__day dt::after {
	content: ":";
}

.tsvff-footer .wpce-opening-hours__day dd {
	margin: 0;
}

.tsvff-footer .tsvff-footer__club .wp-block-site-logo {
	margin-inline-start: var(--wp--preset--spacing--20);
}

.tsvff-footer .tsvff-footer__club .wpce-address {
	margin-inline-start: var(--wp--preset--spacing--20);
}

/* Die rote 1-px-Linie über der letzten Zeile läuft wie bisher über die ganze
 * Breite (border-image mit Überstand: zeichnet nur, verbreitert die Seite nicht). */
.tsvff-footer .tsvff-footer__bottom {
	border-block-start: 1px solid var(--wp--custom--tsvff--signal);
	border-image: linear-gradient(var(--wp--custom--tsvff--signal), var(--wp--custom--tsvff--signal)) 1 0 0 / 1px 0 0 / 0 100vw;
	color: inherit;
}

/* ---------- Bilderfolge: weitere Bilder erst kurz vor ihrem Einsatz ----------
 * Alle Folien liegen übereinander im Sichtbaren, deshalb lädt der Browser
 * auch die „lazy“-Bilder 2 bis 5 sofort (4 × 100 bis 250 KB, noch bevor das
 * erste Bild fertig ist). Hier bekommt jedes weitere Bild display: none bis drei
 * Sekunden vor seinem Einsatz (gleicher Takt und Versatz wie die Folie, die
 * der Parent über --wpce-slideshow-cycle und --wpce-slideshow-delay setzt);
 * display: none hält den lazy-Ladevorgang an. Ein Browser, der display nicht
 * animiert (vor Chrome 116, Safari 17.4, Firefox 125), lädt wie bisher
 * alle Bilder. */
@keyframes tsvff-slide-gate {

	0% {
		display: none;
	}

	0.01%,
	100% {
		display: block;
	}
}

@media (prefers-reduced-motion: no-preference) {

	.tsvff-hero.wpce-slideshow--animated .wpce-slideshow__slide + .wpce-slideshow__slide .wpce-slideshow__image {
		animation: tsvff-slide-gate var(--wpce-slideshow-cycle, 30s) linear calc(var(--wpce-slideshow-delay, 6s) - 3s) infinite both;
	}
}

/* Bei „weniger Bewegung“ steht nur das erste Bild still (Parent): die anderen
 * brauchen nie geladen zu werden. */
@media (prefers-reduced-motion: reduce) {

	.tsvff-hero .wpce-slideshow__slide + .wpce-slideshow__slide .wpce-slideshow__image {
		display: none;
	}
}

/* ---------- Unterseiten: blauer Kopf, Titelbild mit blauem Balken ----------
 * Die Kopf-Muster (patterns/hidden-*-head.php) sind blau (Abschnittsstil 4).
 * Hat die Seite oder der Beitrag ein Beitragsbild, legt sich der Kopf wie auf
 * tsvff.de als Balken auf das Bild: Pfad und Titel stehen auf eigenem Blau
 * (weiß auf Blau 7,32:1, unabhängig vom Bild); das Bild bleibt hell und ohne
 * Schleier. Die Vorlage liefert Kopf und Bild als zwei Geschwister in <main>;
 * ein Raster legt sie in dieselbe Zelle. Ohne Bild bleibt es das blaue Band. */
.wpce-page-head:not(.wpce-page-head--opener) {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}

.wpce-page-head__inner > h1 {
	font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
	line-height: 1.15;
}

.wpce-page-head .wp-block-breadcrumbs a:where(:not(.wp-element-button)) {
	text-underline-offset: 0.2em;
}

main:has(> .wpce-page-head + .wpce-page-image) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(clamp(18rem, 22vw + 10rem, 30rem), auto);
}

main:has(> .wpce-page-head + .wpce-page-image) > * {
	grid-column: 1;
}

main:has(> .wpce-page-head + .wpce-page-image) > .wpce-page-image.wpce-page-image {
	grid-row: 1;
	margin-block: 0;
	margin-inline: calc(var(--wp--style--root--padding-left, 0px) * -1) calc(var(--wp--style--root--padding-right, 0px) * -1) !important;
	max-width: none !important;
	min-height: 0;
	position: relative;
}

main:has(> .wpce-page-head + .wpce-page-image) > .wpce-page-image img {
	aspect-ratio: auto !important;
	border-radius: 0;
	display: block;
	height: 100%;
	inset: 0;
	max-height: none;
	object-fit: cover;
	object-position: 50% 30%;
	position: absolute;
	width: 100%;
}

main:has(> .wpce-page-head + .wpce-page-image) > .wpce-page-head {
	align-self: end;
	background: none;
	grid-row: 1;
	padding-block: var(--wp--preset--spacing--40);
	position: relative;
	z-index: 1;
}

main:has(> .wpce-page-head + .wpce-page-image) > .wpce-page-head::before {
	content: none;
}

main:has(> .wpce-page-head + .wpce-page-image) > :not(.wpce-page-head, .wpce-page-image) {
	grid-row: auto;
}

main:has(> .wpce-page-head + .wpce-page-image) .wpce-page-head__inner > * {
	-webkit-box-decoration-break: clone;
	background: var(--wp--preset--color--primary);
	box-decoration-break: clone;
	color: var(--wp--preset--color--base);
	display: table;
	max-width: 100%;
	padding: 0.1em 0.4em;
}

main:has(> .wpce-page-head + .wpce-page-image) .wpce-page-head__inner > * + * {
	margin-block-start: 0.35rem;
}

main:has(> .wpce-page-head + .wpce-page-image) .wpce-page-head__inner > .wp-block-breadcrumbs {
	padding-block: 0.25em;
}

main:has(> .wpce-page-head + .wpce-page-image) .wpce-page-head__inner > h1 {
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
}

main:has(> .wpce-page-head + .wpce-page-image) .wpce-page-head__inner > :is(.wpce-page-head__lead, .wpce-page-head__meta) {
	font-size: var(--wp--preset--font-size--medium);
}

main:has(> .wpce-page-head + .wpce-page-image) .wpce-page-head__inner > .wpce-page-head__lead {
	display: none;
}

@media (max-width: 599.98px) {

	main:has(> .wpce-page-head + .wpce-page-image) .wpce-page-head__inner > h1 {
		font-size: 1.5rem;
	}
}

/* ---------- Seiteninhalt: Text in Lesebreite, Raster in voller Breite ----------
 * Die migrierten Seiten (Verein, Mitgliedschaft ...) liegen in schlichten
 * Gruppen ohne Ausrichtung. Der Parent begrenzt solche Gruppen auf die
 * Lesebreite (44rem); ein breiter Block darin (Personen-, Karten-Raster)
 * kann dann nie breiter werden als die Gruppe – er stand links in 704 px,
 * rechts blieb Platz. Hier sind die Gruppen so breit wie der Inhalt (80rem);
 * Text, Zitate und Listen bleiben bei der Lesebreite und stehen links bündig
 * mit Überschrift und Raster (nicht mittig), wie der Seitenkopf. */
.entry-content > .wp-block-group.is-layout-constrained:not(.alignfull),
.entry-content > .wp-block-group.is-layout-constrained .wp-block-group.is-layout-constrained:not(.alignfull) {
	max-width: var(--wp--style--global--wide-size);
}

.entry-content .wp-block-group.is-layout-constrained:not(.alignfull) > :where(:not(.alignwide, .alignfull, .alignleft, .alignright)) {
	margin-inline-start: 0 !important;
}

/* Knöpfe unter linksbündigem Text stehen links (der Editor hatte sie in der
 * 44-rem-Spalte zentriert, das wirkt neben dem Text verrutscht). Die
 * „Mehr“-Knöpfe der Startseite bleiben mittig. */
.entry-content .wp-block-group:not(.alignfull) > .wp-block-buttons.is-content-justification-center:not(.tsvff-more) {
	justify-content: flex-start;
}

/* ---------- Köpfe der Plugin-Seiten (Abteilung, Termine, Personen ...) ----------
 * Der Block „Kopf“ des Plugins bringt seine Farben als Variablen mit; hier
 * dieselbe blaue Fläche wie bei den Kopf-Mustern oben (weiß auf Blau 7,32:1,
 * gedämpfter Text 88 % Weiß = 5,8:1). */
.wpce-head {
	--wpce-head-accent: var(--wp--preset--color--base);
	--wpce-head-color: var(--wp--preset--color--base);
	--wpce-head-link: var(--wp--preset--color--base);
	--wpce-head-muted: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	--wpce-head-surface: var(--wp--preset--color--primary);
	--wpce-head-padding-top: var(--wp--preset--spacing--50);
	--wpce-head-padding-bottom: var(--wp--preset--spacing--50);
}

.wpce-head .wpce-trail {
	color: var(--wpce-head-muted);
}

.wpce-head__title {
	font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
	line-height: 1.15;
}

/* ---------- Suche (inc/search.php) ----------
 * Symbol im Kopf (Weiß auf Vereinsblau 7,32:1), Feld in einem weißen Fenster
 * (dunkle Schrift auf Weiß), Fokusring wie im Parent. Unter 1024 px sitzt das
 * Feld oben im geöffneten Menü, darüber hinter dem Symbol. */
.tsvff-search--bar {
	flex: none;
	position: relative;
}

.tsvff-search__toggle {
	align-items: center;
	border-radius: 50%;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	display: flex;
	height: 2.75rem;
	justify-content: center;
	list-style: none;
	width: 2.75rem;
}

.tsvff-search__toggle::-webkit-details-marker {
	display: none;
}

.tsvff-search__toggle:is(:hover, :focus-visible),
.tsvff-search--bar[open] > .tsvff-search__toggle {
	background: rgb(255 255 255 / 0.18);
}

.tsvff-search__toggle:focus-visible,
.tsvff-search-form input[type="search"]:focus-visible,
.tsvff-search-form__button:focus-visible {
	outline: var(--wp--custom--wpce--focus--width, 3px) solid var(--wpce-focus, currentcolor);
	outline-offset: var(--wp--custom--wpce--focus--offset, 2px);
}

.tsvff-search--bar > .tsvff-search__panel {
	background: var(--wp--preset--color--base);
	border-radius: 0.5rem;
	box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.28);
	color: var(--wp--preset--color--contrast);
	padding: 1rem;
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	width: min(24rem, calc(100vw - 2rem));
	z-index: 110;
}

.tsvff-search-form__row {
	display: flex;
	gap: 0.5rem;
}

.tsvff-search-form input[type="search"] {
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--contrast-2);
	border-radius: var(--wp--custom--wpce--button--radius);
	color: var(--wp--preset--color--contrast);
	flex: 1 1 auto;
	font: inherit;
	min-height: 2.75rem;
	min-width: 0;
	padding: 0.4rem 0.75rem;
}

.tsvff-search-form__button {
	background: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--wpce--button--radius);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	min-height: 2.75rem;
	padding: 0.4rem 1rem;
}

.tsvff-search-form__button:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--tertiary);
	border-color: var(--wp--preset--color--tertiary);
}

/* Small screens (and menus that always sit behind the button): field in the open panel. */
.tsvff-search--panel {
	margin-block-end: 1.25rem;
}

/* "Startseite" is a normal item of the open phone and tablet menu (the logo is covered by the
 * panel); where the menu is inline it would only repeat the logo. */
@media (min-width: 64rem) {

	.wpce-menu--break-large .tsvff-menu-home-item {
		display: none;
	}
}

/* In the open menu the list is a column: the item moves to the top. */
.wpce-menu__panel .tsvff-menu-home-item {
	order: -1;
}

.tsvff-search--panel .tsvff-search-form input[type="search"] {
	border-color: transparent;
}

@media (min-width: 64rem) {

	.wpce-menu--overlay-mobile.wpce-menu--break-large .tsvff-search--panel {
		display: none;
	}
}

@media (min-width: 48.875rem) {

	.wpce-menu--overlay-mobile:not(.wpce-menu--break-large) .tsvff-search--panel {
		display: none;
	}
}

@media (max-width: 63.99rem) {

	.wpce-header__nav .tsvff-search--bar {
		display: none;
	}
}

.wpce-header__nav:has(.wpce-menu--overlay-always) .tsvff-search--bar {
	display: none;
}

/* Results page */
.tsvff-search-results {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--40);
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 80rem);
}

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

.tsvff-filter__link {
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 2rem;
	color: var(--wp--preset--color--primary);
	display: inline-block;
	font-weight: 600;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	text-decoration: none;
}

.tsvff-filter__link:is(:hover, :focus-visible),
.tsvff-filter__link[aria-current="true"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.tsvff-search-count {
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}

.tsvff-group__title,
.tsvff-suggest__title {
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.tsvff-hits {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.tsvff-hit {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--wpce--card--line);
	border-radius: var(--wp--custom--wpce--card--radius);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.tsvff-hit__media {
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--neutral);
}

.tsvff-hit__image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.tsvff-hit--wpce_person.tsvff-hit--has-image {
	flex-direction: row;
}

.tsvff-hit--wpce_person .tsvff-hit__media {
	aspect-ratio: 1;
	flex: 0 0 5.5rem;
}

.tsvff-hit__body {
	display: grid;
	gap: 0.25rem;
	padding: 1rem;
}

.tsvff-hit__type {
	background: var(--wp--preset--color--neutral);
	border-radius: 0.25rem;
	color: var(--wp--preset--color--tertiary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	justify-self: start;
	letter-spacing: 0.02em;
	margin: 0;
	padding: 0.1rem 0.5rem;
	text-transform: uppercase;
}

.tsvff-hit__title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	margin: 0.25rem 0 0;
}

/* The whole card is the link; the focus ring surrounds the card. */
.tsvff-hit__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.tsvff-hit__title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.tsvff-hit:hover .tsvff-hit__title a {
	color: var(--wp--preset--color--primary);
}

.tsvff-hit:has(a:focus-visible) {
	outline: var(--wp--custom--wpce--focus--width, 3px) solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.tsvff-hit__title a:focus-visible {
	outline: none;
}

.tsvff-hit__meta {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.tsvff-hit__text {
	margin: 0.25rem 0 0;
}

.tsvff-pagination .page-numbers {
	display: inline-block;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.5rem 0.75rem;
	text-align: center;
}

.tsvff-pagination .current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.tsvff-suggest__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.tsvff-suggest__link {
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 0.375rem;
	display: inline-block;
	font-weight: 600;
	padding: 0.5rem 1rem;
	text-decoration: none;
}

.tsvff-suggest__link:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* "Find an offer" on the departments overview */
.tsvff-finder {
	background: var(--wp--preset--color--neutral);
	border-radius: 0.5rem;
	margin-block: 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.tsvff-finder__title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.tsvff-finder__hint {
	margin: 0.25rem 0 0.75rem;
}

.tsvff-finder .tsvff-search-form {
	max-width: 36rem;
}

/* ---------- Bildnachweis (inc/credits.php) ---------- */
.tsvff-credit {
	background: rgb(0 0 0 / 0.72);
	color: #fff;
	display: block;
	font-size: 0.75rem;
	line-height: 1.4;
	padding: 0.15rem 0.5rem;
	width: fit-content;
}

main:has(> .wpce-page-head + .wpce-page-image) > .wpce-page-image > .tsvff-credit {
	bottom: 0;
	position: absolute;
	right: 0;
	z-index: 2;
}

.tsvff-credits__group + .tsvff-credits__group {
	margin-block-start: var(--wp--preset--spacing--50);
}

.tsvff-credits__count {
	color: var(--wp--preset--color--contrast-2);
	font-size: 1rem;
	font-weight: 400;
}

.tsvff-credits__list {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.tsvff-credits__image {
	aspect-ratio: 1;
	border-radius: 0.25rem;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.tsvff-credits__figure {
	margin: 0;
}

.tsvff-credits__caption {
	font-size: var(--wp--preset--font-size--small);
	margin-block-start: 0.25rem;
	overflow-wrap: anywhere;
}

.tsvff-search--panel .tsvff-search-form__button {
	background: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
}

.tsvff-search--panel .tsvff-search-form__button:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

.tsvff-filter__list > li,
.tsvff-hits > li,
.tsvff-suggest__list > li,
.tsvff-credits__list > li {
	margin: 0;
}

.tsvff-filter__link {
	line-height: 1.5;
}

.tsvff-search-results {
	margin-block-start: 0;
}

.tsvff-hit__media {
	flex: none;
	overflow: hidden;
	position: relative;
}

.tsvff-hit__image {
	inset: 0;
	position: absolute;
}

.tsvff-finder {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 80rem);
}

.tsvff-finder {
	box-sizing: border-box;
}

/* ======================================================================
 * Polish round 3 (docs/entscheidungen-design.md, section 13)
 * Posts, plugin pages, buttons, small movements. No new request, no script.
 * ====================================================================== */

/* ---------- Plugin heads: date block, path, long titles ---------- */

/* The date block takes the accent as its fill: blue on the blue head, so the
 * box vanished (multi-day dates showed bare white text). On the head it is a
 * white tile with blue text (7.32:1); a past date keeps the plugin's pale tile. */
.wpce-head {
	--wpce-accent-fill: var(--wp--preset--color--base);
	--wpce-on-accent: var(--wp--preset--color--primary);
}

/* A very long title (events, courses) must not take six lines at 1440 px. */
.wpce-head__title {
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
}

/* Phones: the department's symbol sits beside the title instead of above it,
 * so the head is not a tall stack (symbol, title, picture) before any text. */
@media (max-width: 37.4375rem) {

	.wpce-head--media-logo .wpce-head__inner {
		align-items: center;
		display: flex;
		flex-direction: row;
		gap: 1rem;
	}

	.wpce-head--media-logo .wpce-head__media {
		flex: none;
		width: 4.5rem;
	}

	.wpce-head--media-logo .wpce-head__logo {
		height: auto;
		width: 100%;
	}
}

/* Long words in list rows (Saisonabschlussfeier) break at a syllable, not in
 * the middle of a letter run. */
.wpce-row__title,
.wpce-card__title {
	hyphens: auto;
	overflow-wrap: break-word;
}

/* On a phone the longest title word still has to fit between date block and
 * arrow (not every browser has a German hyphenation dictionary). */
@media (max-width: 30rem) {

	.wpce-entries__list {
		--wpce-font-title: 1.0625rem;
	}
}

/* The last path item repeats the title; one line, cut with an ellipsis. */
:is(.wpce-trail, .wpce-page-head .wp-block-breadcrumbs) li:last-child:not(:first-child) {
	max-width: min(40rem, 75vw);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Downloads: one tidy row each ---------- */
.wpce-files {
	display: grid;
	gap: 0.5rem;
	max-width: 40rem;
}

.wpce-files__item {
	margin: 0;
}

.wpce-files__link {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--wpce--card--line);
	border-radius: var(--wp--custom--wpce--button--radius);
	box-sizing: border-box;
	display: flex;
	gap: 0.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.875rem;
	width: 100%;
}

.wpce-files__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.wpce-files__meta {
	flex: none;
	font-size: var(--wp--preset--font-size--small);
}

.wpce-files__link:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--primary);
}

.wpce-files__link:is(:hover, :focus-visible) .wpce-files__label {
	text-decoration-thickness: 2px;
}

.wpce-files__link:focus-visible {
	outline: var(--wp--custom--wpce--focus--width, 3px) solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ---------- People without a portrait: monogram on a lighter, lower tile ----------
 * The square fallback of the people grid is as tall as a photo; with 50 people
 * it is a wall of grey. Lower tile, soft club-blue gradient. */
.wpce-entries--type-person .wpce-card__media--fallback {
	aspect-ratio: 5 / 3;
	background: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent), color-mix(in srgb, var(--wp--preset--color--secondary) 40%, transparent));
}

.wpce-entries--type-person .wpce-monogram {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
}

/* ---------- News post ----------
 * Text column left, a narrow aside right (share, way back); below: more from the
 * same category, previous/next. Reading width 46 rem, body 18 px / 1.7. */
.tsvff-post-body {
	padding-block: var(--wp--preset--spacing--50);
}

.tsvff-post {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64rem) {

	.tsvff-post {
		column-gap: var(--wp--preset--spacing--50);
		grid-template-columns: minmax(0, 46rem) minmax(14rem, 16rem);
		justify-content: space-between;
	}
}

.tsvff-post__main .wp-block-post-content {
	font-size: 1.125rem;
	line-height: 1.7;
}

.tsvff-post__main .wp-block-post-content > :where(:not(.alignwide, .alignfull, .alignleft, .alignright)) {
	margin-inline-start: 0 !important;
	max-width: none;
}

.tsvff-post__main .wp-block-post-content > .alignwide,
.tsvff-post__main .wp-block-post-content > .alignfull {
	margin-inline: 0 !important;
	max-width: 100%;
}

.tsvff-post__main .wp-block-post-content > * + * {
	margin-block-start: 1.25em;
}

.tsvff-post__main .wp-block-post-content > p:first-child {
	color: var(--wp--preset--color--contrast);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.6;
}

.tsvff-post__main .wp-block-post-content > :is(h2, h3, h4) {
	margin-block-start: 2em;
}

.tsvff-post__main .wp-block-post-content > h2 {
	font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
}

.tsvff-post__main .wp-block-post-content > h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
}

.tsvff-post__main .wp-block-post-content :is(ul, ol) {
	padding-inline-start: 1.4em;
}

.tsvff-post__main .wp-block-post-content li {
	margin-block: 0.35em;
}

.tsvff-post__main .wp-block-post-content li::marker {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* Quotes: red bar, pale field. */
.tsvff-post__main .wp-block-post-content :is(blockquote, .wp-block-quote) {
	background: var(--wp--preset--color--neutral);
	border: 0;
	border-inline-start: 4px solid var(--wp--custom--tsvff--signal);
	border-radius: 0 var(--wp--custom--wpce--button--radius) var(--wp--custom--wpce--button--radius) 0;
	font-size: 1.1875rem;
	margin-inline: 0;
	padding: 1rem 1.25rem;
}

.tsvff-post__main .wp-block-post-content blockquote > * + * {
	margin-block-start: 0.75em;
}

.tsvff-post__main .wp-block-post-content :is(blockquote, .wp-block-quote) cite {
	color: var(--wp--preset--color--contrast-2);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 600;
}

/* Pictures and captions. */
.tsvff-post__main .wp-block-post-content :is(figure, .wp-block-image) img {
	border-radius: var(--wp--custom--wpce--button--radius);
	height: auto;
	max-width: 100%;
}

.tsvff-post__main .wp-block-post-content figcaption {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	margin-block-start: 0.5rem;
	text-align: start;
}

.tsvff-post__main .wp-block-post-content .wp-block-gallery {
	gap: 0.75rem;
}

.tsvff-post__main .wp-block-post-content .wp-block-gallery img {
	border-radius: 0.5rem;
}

/* Tables scroll inside their column instead of widening the page. */
.tsvff-post__main .wp-block-post-content .wp-block-table {
	overflow-x: auto;
}

.tsvff-post__main .wp-block-post-content table {
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--medium);
	width: 100%;
}

.tsvff-post__main .wp-block-post-content :is(th, td) {
	border: 0;
	border-block-end: 1px solid var(--wp--custom--wpce--card--line);
	padding: 0.625rem 0.75rem;
	text-align: start;
}

.tsvff-post__main .wp-block-post-content thead th {
	background: var(--wp--preset--color--neutral);
	border-block-end: 2px solid var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
}

.tsvff-post__main .wp-block-post-content .wp-block-separator {
	border: 0;
	border-block-start: 3px solid var(--wp--custom--tsvff--signal);
	margin-block: 2em;
	max-width: 4rem;
}

/* Aside: red top line, share links as outline buttons. */
.tsvff-post__aside {
	align-self: start;
	border-block-start: 3px solid var(--wp--custom--tsvff--signal);
	padding-block-start: 1rem;
}

@media (min-width: 64rem) {

	.tsvff-post__aside {
		position: sticky;
		top: calc(var(--wpce-header-height, 5rem) + 1.5rem);
	}
}

.tsvff-post__aside-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.tsvff-share {
	display: grid;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

.tsvff-share > li {
	margin: 0;
}

.tsvff-post__aside .tsvff-share__link {
	width: 100%;
}

@media (max-width: 63.99rem) {

	.tsvff-share {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	}
}

.tsvff-post__back {
	margin: 1.25rem 0 0;
}

/* The department of the post: a small card (picture, name, way to it). */
.tsvff-aside-section {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--wpce--card--line);
	border-radius: var(--wp--custom--wpce--card--radius);
	color: inherit;
	display: block;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 200ms ease;
}

.tsvff-aside-section:is(:hover, :focus-visible) {
	box-shadow: 0 0.5rem 1.25rem rgb(0 51 102 / 0.14);
}

.tsvff-aside-section:focus-visible {
	outline: var(--wp--custom--wpce--focus--width, 3px) solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.tsvff-aside-section__media {
	aspect-ratio: 16 / 9;
	display: block;
}

.tsvff-aside-section__image {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
	width: 100%;
}

.tsvff-aside-section__body {
	display: grid;
	gap: 0.25rem;
	padding: 0.875rem 1rem 1rem;
}

.tsvff-aside-section__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.25;
}

.tsvff-aside-section__more {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.tsvff-related-band {
	padding-block: var(--wp--preset--spacing--50);
}

.tsvff-related-band:not(:has(.wp-block-post-template)) {
	display: none;
}

.tsvff-related__title {
	font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
	margin-block-end: var(--wp--preset--spacing--30);
}

.tsvff-related .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 899.98px) {

	.tsvff-related .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wpce-post-nav {
	gap: 1rem 2rem;
}

.wpce-post-nav a {
	text-decoration: none;
}

.wpce-post-nav a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Buttons: one family ----------
 * Same height (44 px), radius 12 px (token), Montserrat 600, clear focus ring.
 * Filled blue (default), red (signal), outline; the small ones the plugin and the
 * search bring (route, filter pills, share, pagination) follow the same shape. */
.wp-block-button__link,
.wp-element-button,
.tsvff-share__link,
.wpce-map__route,
.tsvff-filter__link,
.tsvff-suggest__link,
.tsvff-search-form__button {
	align-items: center;
	border-radius: var(--wp--custom--wpce--button--radius);
	box-sizing: border-box;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	justify-content: center;
	line-height: 1.25;
	min-height: 2.75rem;
	text-align: center;
	text-decoration: none;
}

.tsvff-share__link,
.wpce-map__route,
.tsvff-filter__link,
.tsvff-suggest__link {
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	gap: 0.5rem;
	padding: 0.5rem 1rem;
}

.tsvff-share__link:is(:hover, :focus-visible),
.wpce-map__route:is(:hover, :focus-visible),
.tsvff-suggest__link:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.tsvff-share__link--back {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.tsvff-share__link--back:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--tertiary);
	border-color: var(--wp--preset--color--tertiary);
}

.tsvff-share__link:focus-visible,
.wpce-map__route:focus-visible,
.tsvff-filter__link:focus-visible,
.tsvff-suggest__link:focus-visible,
.tsvff-pagination .page-numbers:focus-visible,
.wp-block-query-pagination a:focus-visible {
	outline: var(--wp--custom--wpce--focus--width, 3px) solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Pagination of the lists: same height and radius as the buttons. */
.wp-block-query-pagination {
	gap: 0.5rem;
}

.wp-block-query-pagination :is(.page-numbers, a, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	align-items: center;
	border-radius: var(--wp--custom--wpce--button--radius);
	box-sizing: border-box;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
}

/* ---------- Small movements (no script) ----------
 * Lift of the news cards on hover; section heads and cards fade in and rise
 * a few pixels while they scroll into view (scroll-driven animation, where the
 * browser knows it; elsewhere everything is simply there). Both only without
 * "reduce motion". */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	.wpce-news-card {
		transition: transform 200ms ease, box-shadow 200ms ease;
	}

	.tsvff-hit {
		transition: transform 200ms ease, box-shadow 200ms ease;
	}

	.tsvff-hit:hover,
	.wpce-news-card:hover {
		box-shadow: 0 0.75rem 1.5rem rgb(0 51 102 / 0.14);
		transform: translateY(-4px);
	}

	.wp-block-button__link:active,
	.tsvff-share__link:active {
		transform: translateY(1px);
	}
}

@keyframes tsvff-rise {

	from {
		opacity: 0.35;
		transform: translateY(1rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) {

		.tsvff-home .wpce-entries__item,
		.tsvff-news .wp-block-post-template > li,
		.tsvff-related .wp-block-post-template > li {
			animation: tsvff-rise linear both;
			animation-range: entry 0% entry 35%;
			animation-timeline: view();
		}
	}
}

/* Red accent under the section heads of the front page, as the kicker strokes
 * on the plugin pages. */
.tsvff-home > .wp-block-heading::after,
.tsvff-home > .wpce-section__head .wp-block-heading::after {
	background: var(--wp--custom--tsvff--signal);
	border-radius: 2px;
	content: "";
	display: block;
	height: 3px;
	margin-block-start: 0.5rem;
	width: 3rem;
}

/* An orphan row of cards (5 offers in 3 columns) is centred, not left over. */
@media (min-width: 700px) {

	.tsvff-home .wpce-entries--type-section .wpce-entries__list {
		display: flex;
		flex-wrap: wrap;
		gap: 1.5rem;
		justify-content: center;
	}

	.tsvff-home .wpce-entries--type-section .wpce-entries__item {
		flex: 0 1 calc((100% - 3rem) / 3);
	}
}

/* Pagination of the search results (own markup, `.tsvff-pagination`) and the
 * consent dialog's buttons: same 44 px / 12 px / Montserrat as every button. */
.tsvff-pagination .page-numbers {
	align-items: center;
	border: 1px solid var(--wp--custom--wpce--card--line);
	border-radius: var(--wp--custom--wpce--button--radius);
	box-sizing: border-box;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	justify-content: center;
	line-height: 1.25;
	text-decoration: none;
}

.tsvff-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--primary);
}

/* Titles of the "Weiterlesen" cards: at most three lines. */
.tsvff-related .wpce-news-card .wp-block-post-title {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.tsvff-related .wpce-news-card .wp-block-post-title > a {
	display: inline;
}

/* ---------- Orientation: "Ich suche ..." text links, editor notes in drafts (section 14) ----------
 * The tiles themselves are the parent's (.wpce-tiles / .wpce-tile). */
.tsvff-quick__more {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
}
.tsvff-quick__more a {
	display: inline-block;
	padding: 0.5rem 0.25rem;
}
.tsvff-redaktion {
	margin-bottom: var(--wp--preset--spacing--40);
	padding: 1rem 1.25rem;
	border: 2px dashed var(--wp--preset--color--accent, #e2001a);
	border-radius: 12px;
	font-size: var(--wp--preset--font-size--small);
}

/* The results page uses the core search block: the same field and button as the
 * forms above (field 12 px radius, 2 px grey line, blue button, 44 px). */
.wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.wp-block-search .wp-block-search__input,
.wpce-page-head .wp-block-search .wp-block-search__input {
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--contrast-2);
	border-radius: var(--wp--custom--wpce--button--radius);
	color: var(--wp--preset--color--contrast);
	min-height: 2.75rem;
	padding: 0.4rem 0.75rem;
}

.wp-block-search .wp-block-search__button {
	border: 2px solid var(--wp--preset--color--primary);
	margin-inline-start: 0;
	min-height: 2.75rem;
}

/* "Alle Kurse und Kursplan" under the department cards: left, with air above. */
.tsvff-all-courses {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Closing band "Etwas Passendes dabei?": it stood in the same strong blue as the
 * footer right below and merged with it. White band with a fine line above, dark
 * text, blue button: the line tells it from a white band before it, the colour from a
 * pale one; the footer keeps the club blue. */
.wpce-cta.is-style-wpce-section-4 {
	background-color: var(--wp--preset--color--base);
	border-block-start: 1px solid var(--wp--custom--wpce--card--line);
	color: var(--wp--preset--color--contrast);
}

.wpce-cta.is-style-wpce-section-4 .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.wpce-cta.is-style-wpce-section-4 .wp-block-button__link:not(.has-background):is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--tertiary);
}

/* Live suggestions under the search field of the results page and the finder
 * (assets/js/suggest.js): a white list with one line per hit. */
.tsvff-typeahead {
	margin-block-start: 0.5rem;
}

.tsvff-typeahead__list {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--wpce--card--line);
	border-radius: var(--wp--custom--wpce--button--radius);
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

.tsvff-typeahead__list > li {
	margin: 0;
}

.tsvff-typeahead__list > li + li {
	border-block-start: 1px solid var(--wp--custom--wpce--card--line);
}

.tsvff-typeahead__link {
	align-items: baseline;
	color: var(--wp--preset--color--contrast);
	column-gap: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	min-height: 2.75rem;
	padding: 0.6rem 1rem;
	text-decoration: none;
}

.tsvff-typeahead__link:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--neutral);
	color: var(--wp--preset--color--primary);
}

.tsvff-typeahead__kind {
	color: var(--wp--preset--color--tertiary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	min-width: 5rem;
	text-transform: uppercase;
}

.tsvff-typeahead__title {
	font-weight: 600;
}

.tsvff-typeahead__meta {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

/* Cropped pictures keep the top: people stand in the upper part of the shot, and a
 * centred crop cut off heads (a runner without a face). */
.wpce-news-card .wp-block-post-featured-image img,
.wpce-card__image,
.tsvff-hit__image {
	object-position: 50% 20%;
}

/* News post: blue head band as on every inner page; the picture lies below it as a
 * wide, rounded card (16:9, top-aligned), not under the title bars. */
.tsvff-post-image {
	padding-block-start: var(--wp--preset--spacing--50);
}

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

.tsvff-post-image .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--wpce--card--radius);
	object-position: 50% 20%;
}

/* News band on a department page: pale, so it is told apart from the events band
 * (white) above it; the closing band after it is white with a fine line. */
.tsvff-section-news.tsvff-section-news {
	background: var(--wp--preset--color--neutral);
}

/* Target size (24 px minimum): the footer's mail and phone links and the links of the
 * path were 21 to 23 px high on tablet and desktop. The padding enlarges what can be
 * hit; the negative margin keeps every line where it was. */
.tsvff-footer :is(a[href^="mailto:"], a[href^="tel:"]),
:is(.wpce-trail, .wpce-page-head .wp-block-breadcrumbs) a {
	display: inline-block;
	margin-block: -0.25rem;
	padding-block: 0.25rem;
}

/* Cards that keep their line: the news cards inside a band that sets a background (the
 * department news band) lost the card line, so every bordered card says it itself. */
.wpce-news-card.is-style-card,
.tsvff-section-news .wpce-news-card {
	border-color: var(--wp--custom--wpce--card--line);
}

/* The tiles of "Ich suche ..": the title in the heading font like every other card. */
.wpce-tile :is(h2, h3, .wpce-tile__title) {
	font-family: var(--wp--preset--font-family--heading);
}

/* Phones: every button in the content is as wide as the column (hero, "Alle ...", the
 * closing band, the department buttons). Some were full width and some as wide as their
 * text, which looked unplanned. The header button and the buttons of forms are not
 * part of it (they are outside main or inside a form row). */
@media (max-width: 599.98px) {

	main .wp-block-buttons {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0.75rem;
	}

	main .wp-block-buttons > .wp-block-button {
		margin: 0;
		width: 100%;
	}

	main .wp-block-buttons > .wp-block-button > .wp-block-button__link {
		box-sizing: border-box;
		justify-content: center;
		text-align: center;
		width: 100%;
	}
}

/* Tables on phones (fee table, tables in posts): the label column takes the room, the
 * figure column is as wide as its figure and stands on the right; header and rows line up. */
@media (max-width: 599.98px) {

	.wp-block-table table,
	.wp-block-table table.has-fixed-layout {
		table-layout: auto;
	}

	.wp-block-table :is(th, td) {
		padding: 0.75rem 0.75rem;
		text-align: start;
		vertical-align: top;
	}

	.wp-block-table :is(th, td):not(:first-child) {
		text-align: end;
		white-space: nowrap;
		width: 1%;
	}

	.wp-block-table td:not(:first-child) {
		font-family: var(--wp--preset--font-family--heading);
		font-weight: 700;
	}
}

/* Course filters: the bar of departments scrolled sideways on a phone while the chips of days
 * and places wrapped. All three rows wrap now and start at the same edge. */
.wpce-entries__filter-list {
	flex-wrap: wrap;
	overflow-x: visible;
	padding: 0;
}

/* Person page: "Zuständig für" (the department) comes before "Im Verein aktiv" (the courses).
 * The page comes from the plugin with the courses first; the bands are reordered here, and
 * the pale and the white band swap places so they keep taking turns. */
.single-wpce_person main.wpce-page {
	display: flex;
	flex-direction: column;
}

.single-wpce_person main.wpce-page > .wpce-page__band:has(.wpce-entries--type-section) {
	background-color: transparent;
	order: 1;
}

.single-wpce_person main.wpce-page > .wpce-page__band:has(.wpce-entries--type-course) {
	background-color: var(--wp--preset--color--neutral);
	order: 2;
}

.single-wpce_person main.wpce-page > .wpce-page__band:has(.wpce-entries--type-person) {
	order: 3;
}

.single-wpce_person main.wpce-page > .wpce-head,
.single-wpce_person main.wpce-page > :not(.wpce-page__band) {
	order: 0;
}