/* ==========================================================================
   ASC Darmstadt – Theme-Styles
   Ergaenzt theme.json um Kopfbereich, Karten, Tabellen und Interaktion.
   ========================================================================== */

:root {
	--asc-header-h: 5.75rem;     /* Hoehe der schwebenden Kopfleiste */
	--asc-radius: 16px;          /* Bilder, Karten, Kopfleiste */
	--asc-radius-button: 10px;   /* Buttons: Ecken sichtbar, aber weich */
	--asc-radius-pill: 9999px;   /* nur noch winzige Etiketten (Kaderchip) */
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Sprungziele (z. B. /leichtathletik/#imagefilm) landen sonst genau unter der
   schwebenden Kopfleiste - die Ueberschrift, auf die gesprungen wurde, waere
   verdeckt. */
:target {
	scroll-margin-top: calc(var(--asc-header-h) + 1.5rem);
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	font-weight: 600;
	text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --- Kopfbereich: schwebende Leiste --------------------------------------- */

.asc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
}

/* Der Weichzeichner sitzt bewusst auf dem Pseudo-Element, nicht auf der Leiste
   selbst: Ein "backdrop-filter" macht sein Element zum Bezugsrahmen fuer alles
   darin, was "position: fixed" ist. Das Klappmenue oeffnete deshalb INNERHALB
   der Pille - 348x62 Pixel statt bildschirmfuellend. Auf dem Handy war die
   Navigation damit unbenutzbar, ohne dass man den Grund sieht. */
.asc-header__bar {
	position: relative;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--asc-radius);
	padding: .55rem .65rem .55rem 1.35rem;
	box-shadow: 0 6px 26px rgb(1 1 1 / 7%);
}
.asc-header__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: color-mix(in srgb, var(--wp--preset--color--background) 92%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
}

.asc-header__brand { gap: .7rem; }
.asc-header__brand .wp-block-site-title a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}
/* Ohne Scheibe hat die Rundung keinen Zweck mehr - sie wuerde das
   freigestellte Logo nur beschneiden (gemessen: 5 Pixel an den Raendern). */
.asc-header .wp-block-site-logo img { border-radius: 0; }

/* Bei aktiver Adminleiste nicht darunter kleben */
.admin-bar .asc-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .asc-header { top: 46px; } }

/* Navigation */
.asc-header .wp-block-navigation a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	padding-block: .3rem;
	border-bottom: 1.5px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.asc-header .wp-block-navigation a:hover,
.asc-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}

.asc-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--asc-radius);
	box-shadow: 0 14px 36px rgb(1 1 1 / 11%);
	padding: .4rem;
	min-width: 16rem;
	overflow: hidden;
}
.asc-header .wp-block-navigation__submenu-container a {
	border-radius: 8px;
	border-bottom: 0;
	padding: .5rem .75rem;
}
.asc-header .wp-block-navigation__submenu-container a:hover {
	background: var(--wp--preset--color--tertiary);
}

.asc-header .wp-block-navigation__responsive-container-open,
.asc-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--foreground);
}

/* Sieben Menuepunkte brauchen Platz. Reichte er nicht, klappte die Leiste
   bisher in zwei Zeilen um und wurde fast doppelt so hoch. Unter 1200px
   zeigt sie darum das Klappmenue - der Navigationsblock selbst kennt nur
   die feste Grenze bei 600px. Gemessen: ab 1180px passen alle sieben
   Punkte in eine Zeile, 1200px laesst etwas Luft fuer Ersatzschriften. */
@media (min-width: 1200px) {
	.asc-header .wp-block-navigation__container { gap: 1.1rem; }
}
@media (max-width: 1199px) {
	.asc-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.asc-header .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Fingerkuppen sind groesser als 24 Pixel. Der Knopf misst von sich aus
   24x24; die Polsterung bringt ihn auf 44x44, das negative Aussenmass haelt
   die Leiste dabei gleich hoch. */
.asc-header .wp-block-navigation__responsive-container-open,
.asc-header .wp-block-navigation__responsive-container-close {
	padding: 10px;
	margin: -10px;
}

/* Der Navigationsblock gibt seinen Zeilenabstand ans Overlay weiter (1,5 rem).
   Zusammen mit 44-Pixel-Zielen und dem ausgeklappten Untermenue reicht die
   Liste damit bis an den unteren Bildschirmrand. Die Ziele bleiben gross, der
   Abstand zwischen ihnen wird klein. */
.asc-header .wp-block-navigation__responsive-container.is-menu-open,
.asc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: .4rem;
}

/* Im aufgeklappten Menue: grosse Ziele statt 26 Pixel hoher Textzeilen - und
   ueber die ganze Breite, sonst tippt man neben "Verein" ins Leere. */
.asc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.asc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.asc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: 100%;
}
.asc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-block: .35rem;
}

/* Das Untermenue ist auf dem Desktop eine schwebende Karte. Im Overlay hat es
   keinen Grund dazu - dort ist es eine eingerueckte Liste.
   Die Kernregel dafuer traegt fuenf Klassen; mit vier verliert man gegen sie,
   ohne dass man sieht warum. Darum steht ".__responsive-container-content"
   hier mit drin - nicht aus Not, sondern um dieselbe Gewichtung zu erreichen. */
.asc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	width: 100%;
	min-width: 0;
	padding: 0 0 0 1.1rem;
	border: 0;
	/* Weisse Linie statt der grauen: Das Overlay ist seit der Umstellung auf
	   die Vereinsfarbe rot, und "border" (#e2e2e2) verschwand darauf fast. */
	border-left: 2px solid rgb(255 255 255 / 45%);
	border-radius: 0;
	box-shadow: none;
}
.asc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container a {
	border-radius: 0;
	padding-inline: 0;
	font-size: .95rem;
	/* Frueher stand hier "muted" - ein Grau, das auf dem damals WEISSEN
	   Overlay die zweite Ebene ruhig zuruecknahm. Seit das Overlay rot ist,
	   ergab dieselbe Farbe einen Kontrast von 1,12:1: die Unterpunkte waren
	   praktisch unlesbar. Weiss misst 5,19:1.
	   Zurueckgenommen wird die zweite Ebene jetzt ueber die Schriftgroesse
	   und die Einrueckung, nicht ueber die Farbe. */
	color: #fff;
}

/* Sonst bricht der Schriftzug in "asc-" und "Darmstadt" um. */
.asc-header .wp-block-site-title { white-space: nowrap; }

/* Auf sehr schmalen Schirmen ist neben Logo, Klappmenue und Knopf kein Platz
   mehr fuer den Schriftzug - der Name steht ohnehin im Logo. Ohne das
   zerfiel der Knopf bei 320px in einen Buchstaben je Zeile. */
@media (max-width: 30rem) {
	.asc-header .wp-block-site-title { display: none; }
	.asc-header__cta .wp-block-button__link {
		white-space: nowrap;
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.asc-header__bar { padding-right: 1rem; }
}

/* --- Startseite: Baender ohne Fugen --------------------------------------- */

/* WordPress legt zwischen die Kinder eines Constrained-Layouts seinen
   Standardabstand (blockGap, hier 1.5rem). Auf der Startseite erzeugt das
   zweierlei, das wie ein Fehler aussieht:
     - 40px weisse Luft zwischen der schwebenden Leiste und dem Hero-Bild
       (24px Abstand + 16px Innenabstand der Leiste),
     - einen 24px breiten weissen Streifen zwischen JEDEM abgesetzten Band -
       zwischen zwei grauen Flaechen sieht man ihn deutlich.
   Beides gemessen, nicht geschaetzt: Pille endet bei 81px, Bild begann bei
   121px.

   Warum die Regel so umstaendlich aussehen muss: WordPress 6.6 liefert
       :root :where(.is-layout-constrained) > :first-child { margin-block-start: 0 }
       :root :where(.is-layout-constrained) > *            { margin-block-start: … }
   Das :where() zaehlt null, aber :root und :first-child zaehlen zusammen
   (0,2,0) - mehr als ein einzelnes ".asc-hero" (0,1,0). Die Regel unten hat
   deshalb JAHRELANG nichts getan, obwohl sie dastand. Erst
   "body.home main > .asc-hero" (0,2,2) gewinnt. Wer hier den Selektor
   kuerzt, stellt den alten Zustand wieder her, ohne dass etwas kaputtgeht -
   es sieht nur wieder falsch aus. */
body.home main,
body.home main > * {
	margin-block-start: 0;
}

/* Das Bild laeuft bis zur Oberkante und die Leiste schwebt darueber - so wie
   sie beim Scrollen ohnehin ueber jedem Abschnitt liegt. Die zusaetzliche
   1rem zieht etwas weiter als noetig: Die Kopfhoehe haengt an der Schrift,
   und ein weisser Streifen von drei Pixeln faellt mehr auf als drei Pixel
   Bild, die oben aus dem Blick laufen. */
body.home main > .asc-hero {
	margin-block-start: calc(-1 * var(--asc-header-h) - 1rem);
}

/* --- Hero: Bild laeuft unter die Kopfleiste ------------------------------- */

/* Der Hero ist ein Cover-Block: seine Inhaltsposition ("unten links")
   richtet den Text am Innenrand aus, nicht am Inhaltsraster. Ohne die
   Einrueckung unten beginnt die Ueberschrift weiter links als jede andere
   Zeile der Seite. Die Rechnung bildet nach, was das Constrained-Layout
   fuer die uebrigen Abschnitte tut: Seitenrand + halber Ueberschuss
   ueber die Rasterbreite. */
.asc-hero {
	padding-top: calc(var(--asc-header-h) + var(--wp--preset--spacing--60)) !important;
	padding-inline: calc(
		var(--wp--style--root--padding-left) +
		max(0px, (100% - var(--wp--style--global--wide-size)) / 2)
	);
}
/* Solange kein Hero-Bild gesetzt ist, traegt die Vereinsfarbe den Bereich –
   sonst steht dort eine graue Flaeche, die wie ein Fehler aussieht. */
.asc-hero:not(:has(img)):not(:has(.wp-block-cover__image-background)) {
	background-color: var(--wp--preset--color--foreground);
}
.asc-hero .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: 0;
	padding-inline: 0;
}
.asc-hero h1 { max-width: 18ch; text-wrap: balance; }

/* Schatten nur nach unten, nicht flaechig.
   Gemessen auf dem Stadionfoto: Weisse Schrift kam ueber dem hellen Rasen auf
   2,1:1, noetig sind 3:1 fuer grosse Schrift. Eine flaechige Abdunklung
   muesste dafuer auf ueber 40 % - dann verblasst das Flutlicht. Mit diesem
   Verlauf reichen 20 % Grundabdunklung, und der schlechteste Punkt hinter der
   Ueberschrift liegt bei 3,6:1 (Mittel 10,8:1). An einer Stelle steht fast
   reines Weiss im Bild - eine Flutlichtreflexion; darum die harte Stufe unten. */
/* --- Stapelreihenfolge im Hero, unabhaengig vom Kern ----------------------
   WordPress liefert das Cover-Stylesheet nicht auf jeder Seite mit - auf der
   Startseite fehlt es zurzeit komplett (nachgemessen: null Treffer fuer
   ".wp-block-cover" in allen geladenen Stilen). Damit fehlen auch die
   z-index-Angaben, die der Kern normalerweise setzt, und die Reihenfolge
   entscheidet allein die Baumfolge. Das Ergebnis war gut zu sehen:
   
     - Die Abdunklungsflaeche stand VOR dem Bild im Baum und lag damit
       DAHINTER - sie dunkelte nichts ab.
     - Das ::after mit dem Verlauf ist das letzte Kind und lag damit ueber
       ALLEM, auch ueber der Ueberschrift. Aus weisser Schrift wurde graue.
   
   Deshalb stehen die vier Ebenen hier ausdruecklich. So haengt die Lesbarkeit
   der Ueberschrift nicht daran, ob WordPress sein Cover-Stylesheet mitschickt.
   Nachgemessen danach: schlechtester Punkt 6,8:1, Mittel 14,7:1 - WCAG
   verlangt 3:1 fuer grosse Schrift. */
.asc-hero { position: relative; }
.asc-hero .wp-block-cover__image-background { z-index: 0; }
.asc-hero .wp-block-cover__background { z-index: 1; }
.asc-hero .wp-block-cover__inner-container { z-index: 3; }

.asc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgb(1 1 1 / 88%) 0%,
		rgb(1 1 1 / 70%) 25%,
		rgb(1 1 1 / 34%) 50%,
		transparent 75%
	);
}

/* Auf dem Handy schneidet der 92-vh-Hero das 16:9-Bild auf 28 % seiner Breite
   zusammen - uebrig bleibt eine Rasenflaeche. Niedriger heisst hier: mehr vom
   Bild (39 %). Das "!important" muss sein, der Blockeditor schreibt die Hoehe
   als Inline-Stil. */
@media (max-width: 37.5rem) {
	.asc-hero { min-height: 66vh !important; }
}

/* Der helle Umriss-Button verschwindet auf hellem Grund. */
.asc-hero .wp-block-button.is-style-outline .wp-block-button__link {
	backdrop-filter: blur(2px);
	background-color: rgb(1 1 1 / 22%);
}

/* --- Abschnitte ---------------------------------------------------------- */

.asc-section > h2 { text-wrap: balance; }

/* --- Berichte-Kacheln ---------------------------------------------------- */

/* Alle Kacheln einer Reihe gleich hoch. Sonst faellt eine Kachel ohne
   Beitragsbild neben ihren Nachbarn in sich zusammen.
   Rasterelement ist das <li>, nicht die Kachel selbst – ohne das
   Durchreichen bleibt die Kachel auf Inhaltshoehe stehen. */
.asc-cards { align-items: stretch; }
.asc-cards > li { display: flex; }
.asc-cards > li > .asc-card { flex: 1 1 auto; }

.asc-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--wp--preset--color--background);
}

/* Kachel ohne Beitragsbild: statt einer Luecke ein ruhiger Farbblock in
   den Vereinsfarben, damit die Reihe optisch geschlossen bleibt. */
.asc-card:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 10;
	margin-bottom: var(--wp--preset--spacing--30);
	background:
		radial-gradient(circle at 78% 26%, rgb(255 255 255 / 45%) 0 22%, transparent 22.5%),
		linear-gradient(145deg,
			var(--wp--preset--color--secondary) 0%,
			var(--wp--preset--color--tertiary) 100%);
}

.asc-card > .wp-block-group:last-child { margin-top: auto; }

.asc-card .wp-block-post-featured-image {
	margin: 0 0 var(--wp--preset--spacing--30);
	overflow: hidden;
	border-radius: var(--asc-radius);
}
.asc-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.asc-card:hover .wp-block-post-featured-image img { transform: scale(1.035); }

.asc-card .wp-block-post-date { margin: 0; }
.asc-card .wp-block-post-title { margin: 0; text-wrap: balance; }
.asc-card .wp-block-post-title a { transition: color .15s ease; }
.asc-card .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.asc-card .wp-block-post-excerpt { margin: 0; }
.asc-card .wp-block-post-excerpt__more-text { display: none; }

/* --- Beitragsbilder: nichts von den Koepfen abschneiden --------------------

   Die Vorlagen geben eine feste Form vor (16:10 in den Kacheln, 16:9 ueber dem
   Beitrag), die Fotos des Vereins haben sie nicht. Mittig zugeschnitten fehlten
   bei hochkanten Bildern gemessen 16 bis 32 Prozent oben - also die Koepfe.

   Welche Klasse ein Bild bekommt, entscheidet "asc_bild_form" in der
   functions.php anhand der Bildmasse. Das muss dort passieren: CSS kennt das
   Seitenverhaeltnis einer Datei nicht und kann quer nicht von hochkant
   unterscheiden.

   "!important" ist hier kein Notnagel: Der Block schreibt "aspect-ratio",
   "width" und "object-fit" als Inline-Stil an das Bild, und Inline schlaegt
   jede Regel ohne Vorrang. */

/* Quer bis quadratisch: Der Beschnitt geht vollstaendig nach unten. Dort liegt
   auf dem Sportplatz Bahn oder Rasen - oben stehen die Koepfe. */
.wp-block-post-featured-image.asc-bild--oben img { object-position: 50% 0%; }

/* Hochkant, gross ueber dem Beitrag: Hier gibt es keinen Grund zu schneiden.
   Das Bild steht in seinen eigenen Massen mittig, begrenzt auf Fensterhoehe. */
.wp-block-post-featured-image.asc-bild--ganz img {
	display: block;
	aspect-ratio: auto !important;
	width: auto !important;
	max-width: 100%;
	height: auto;
	max-height: 78vh;
	margin-inline: auto;
	object-fit: contain !important;
}

/* Hochkant in einer Kachel: Die Kacheln muessen gleich hoch bleiben, sonst
   zerfaellt die Reihe. Der Rahmen bleibt also - und das Bild wird vollstaendig
   hineingestellt, schmaler als der Rahmen, dafuer ungeschnitten. Ein neutrales
   Hellgrau traegt die Flaeche links und rechts, damit das nach Absicht aussieht
   und nicht nach halb geladenem Bild. */
.asc-card .wp-block-post-featured-image.asc-bild--ganz img {
	aspect-ratio: 16 / 10 !important;
	width: 100% !important;
	max-height: none;
	margin-inline: 0;
	background-color: var(--wp--preset--color--tertiary);
}

/* Und in der Kachel haben ALLE Bilder dieselbe Hoehe. Das ist keine Kosmetik:
   Auf der Startseite steht "aspect-ratio: 4/3" als Inline-Stil am Block, in
   den Newsvorlagen dagegen 16:10. Nebeneinander waeren die Bilder dadurch
   215 und 258 Pixel hoch - gemessen - und Datum und Ueberschrift der drei
   Kacheln stuenden auf drei verschiedenen Hoehen. */
.asc-card .wp-block-post-featured-image img { aspect-ratio: 16 / 10 !important; }

/* --- Angebots-Kacheln ---------------------------------------------------- */

.asc-tile img { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.asc-tile h3 { text-wrap: balance; }
.asc-tile p:last-child a { text-decoration: none; }
.asc-tile p:last-child a::after { content: " →"; }
.asc-tile p:last-child a:hover { text-decoration: underline; }

/* --- Athletenprofile ------------------------------------------------------ */

/* Auf der alten Seite standen diese Angaben als Text in einem Bild. Jetzt
   sind es Absaetze und Listen, angeordnet als Karten - drei nebeneinander,
   darunter zwei, auf dem Handy eine. */
/* Breit ausgerichtet wie das Raster, aber mit Lesebreite - sonst laeuft
   der Satz ueber die vollen 1200 Pixel. Der Elementname muss mit hinein:
   die Kernregel fuer ".alignwide" waere sonst genauso stark. */
p.asc-profil-intro.alignwide,
p.asc-tz-intro.alignwide,
p.asc-seiten-text.alignwide,
ul.asc-seiten-text.alignwide {
	max-width: 46rem;
	/* Der Kern zentriert jeden Block im Constrained-Layout mit "!important";
	   ohne Gegengewicht stuende der Satz 200 Pixel weiter rechts als die
	   Ueberschrift darunter. */
	margin-inline: 0 !important;
}

.asc-profil-liste {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}
@media (min-width: 34rem) {
	.asc-profil-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
	.asc-profil-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Bloecke bringen eigene Aussenabstaende mit. Im Raster waeren das doppelte
   Luecken, in der Karte eine Fuge zwischen Foto und Text, und im Textteil
   summierten sie sich auf ueber 400 Pixel je Karte. Den Abstand macht hier
   allein "gap". Zwei Klassen, damit die Regel die Kernregel schlaegt. */
.wp-block-group.asc-profil-liste > *,
.wp-block-group.asc-profil > *,
.wp-block-group.asc-profil__daten > * { margin-block: 0; }

.asc-profil {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--asc-radius);
	background-color: var(--wp--preset--color--background);
}

/* Feste Bildhoehe: sonst beginnt der Name in jeder Karte einer Reihe auf
   einer anderen Linie. */
.asc-profil__bild { margin: 0; }
.asc-profil__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background-color: var(--wp--preset--color--secondary);
}

/* Echte Fotos bekommen dieselbe Bildflaeche wie die alten Namensgrafiken.

   Der Grund ist gemessen: Die Grafiken werden auf 179/200 zugeschnitten
   (0,895), ein Hochkantfoto stand mit 3/4 (0,750) daneben. Im selben Raster
   ergab das 289 x 323 Pixel gegen 289 x 386 - das Foto war 63 Pixel hoeher,
   die Namen darunter begannen auf verschiedener Hoehe, die Reihe wirkte
   ausgefranst. Solange beide Sorten nebeneinander stehen, muessen sie
   dieselbe Flaeche haben.

   "object-position: 50% 20%" haelt dabei den Kopf im Bild: Die Portraets sind
   im oberen Drittel aufgenommen, mittig beschnitten fehlte die Stirn.

   Sobald alle Profile ein Foto haben, kann hier wieder 3/4 stehen - dann ist
   es das einheitliche Mass. */
.asc-profil__bild:not(.asc-profil__bild--kachel) img {
	aspect-ratio: 179 / 200;
	object-position: 50% 20%;
}

/* Die 27 Portraets der alten Seite sind keine Fotos, sondern fertige
   Grafiken: roter Grund, der Name oben als Pixelschrift, darunter das Foto
   mit weissem Rand. Der Name stuende sonst zweimal in der Karte - einmal
   im Bild, einmal als Ueberschrift. Darum zeigt die Karte nur den Ausschnitt
   mit dem Foto. Die Werte sind an allen 27 Dateien nachgemessen (720x960,
   Foto bei 11,2-88,8 % Breite und 20,8-85,8 % Hoehe; die Streuung zwischen
   den Dateien liegt unter einem halben Prozentpunkt).
   Achtung: Die Klasse gehoert nur an diese Grafiken. Wird das Bild spaeter
   durch ein normales Foto ersetzt, muss sie weg - sonst zeigt die Karte
   einen zufaelligen Ausschnitt daraus. */
.asc-profil__bild--kachel {
	position: relative;
	overflow: hidden;
	aspect-ratio: 179 / 200;
	background-color: var(--wp--preset--color--secondary);
}
/* Der Ausschnitt entsteht ueber "transform", nicht ueber Prozentwerte.
   
   Vorgeschichte, weil das hier zweimal danebengegangen ist:
   
   1. Urspruenglich stand hier "height: auto". WordPress haengt seit 6.7 an
      jedes verzoegert geladene Bild ein sizes="auto, ..." und gibt solchen
      Bildern per contain-intrinsic-size eine Ersatzgroesse von 3000x1500,
      solange sie nicht geladen sind. Aus "auto" wurde dadurch eine Bildhoehe
      von 1500 statt 657 Pixeln - sichtbar waren das rote Namensband und vom
      Foto nur die obersten Zentimeter. Weil die ersten drei Bilder einer Seite
      NICHT verzoegert geladen werden, stimmte die erste Kartenreihe und alle
      folgenden nicht.
   
   2. Danach stand hier "height: 153.82%". Das rechnete zwar richtig, loeste
      das Problem aber nur in Chrome. Sowohl diese Hoehe als auch das alte
      "top: -32%" sind Prozentwerte, die sich auf die HOEHE des Elternkastens
      beziehen - und die kommt bei .asc-profil__bild--kachel aus
      "aspect-ratio: 179/200". Nicht jede Maschine loest Prozentwerte gegen
      eine so hergeleitete Hoehe auf; wo sie es nicht tut, faellt beides auf
      "auto" zurueck und Fehler 1 ist wieder da. Genau das war in Firefox zu
      sehen.
   
   Diese Fassung braucht die Hoehe des Elternkastens ueberhaupt nicht mehr:
     - "width: 100%" bezieht sich auf dessen BREITE (immer eindeutig),
     - "aspect-ratio: 3/4" macht daraus die Hoehe, ohne die natuerliche
       Groesse des Bildes zu befragen (damit ist auch Fehler 1 erledigt),
     - die Prozentwerte im "transform" beziehen sich auf den eigenen Kasten
       des Bildes, nicht auf den des Elternteils.
   
   Die Zahlen: Das Bild ist W breit und 4/3 W hoch. Der Fotobereich liegt
   darin bei 11,2-88,8 % der Breite und 20,8-85,8 % der Hoehe. Vergroessert
   um 1/0,776 = 1,2887 fuellt seine Breite genau die Karte; verschoben um
   -14,433 % / -26,805 % des eigenen Kastens sitzt seine linke obere Ecke
   auf der linken oberen Ecke der Karte.
   
   Achtung: Die Klasse gehoert nur an die uebernommenen Namensgrafiken. Wird
   das Bild spaeter durch ein normales Foto ersetzt, muss sie weg - sonst
   zeigt die Karte einen zufaelligen Ausschnitt daraus. */
.asc-profil__bild--kachel img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transform-origin: 0 0;
	transform: translate(-14.433%, -26.805%) scale(1.2887);
}

/* Der Textteil traegt die Kartenhoehe, damit der Trainername unten sitzt. */
.asc-profil__daten {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: .45rem;
	padding: var(--wp--preset--spacing--40);
}

.asc-profil__name {
	font-size: 1.15rem;
	line-height: 1.25;
	text-wrap: balance;
}

.asc-profil__disziplin {
	color: var(--wp--preset--color--primary);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
}

.asc-profil__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .5rem;
	color: var(--wp--preset--color--muted);
	font-size: .85rem;
}
.asc-profil__kader {
	padding: .1rem .5rem;
	border-radius: var(--asc-radius-pill);
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--foreground);
	font-size: .78rem;
	font-weight: 600;
}

/* Der Steckbrief steht im Quelltext in der Karte. Erst wenn das Skript laeuft
   und <dialog> kann, wandert er in den Dialog - dann darf er hier weg. Ohne
   Skript bleibt er lesbar in der Karte stehen. */
.asc-js .asc-profil .asc-profil__steckbrief { display: none; }

.asc-profil__steckbrief { margin-top: .35rem; }

/* Bezeichnung und Wert. In der Karte (ohne Skript) untereinander, im Dialog
   nebeneinander - dort ist Platz dafuer. */
.asc-profil__reihe {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .05rem 1.2rem;
	margin: 0;
	padding-block: .42rem;
	font-size: .95rem;
	line-height: 1.5;
	border-top: 1px solid var(--wp--preset--color--border);
}
.asc-profil__steckbrief > .asc-profil__reihe:first-child { border-top: 0; }
.asc-profil__reihe strong {
	font-weight: 600;
	font-size: .74rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.asc-profil__fehlt {
	margin-top: .35rem;
	color: var(--wp--preset--color--muted);
	font-size: .95rem;
	font-style: italic;
}

/* Der Knopf entsteht erst durch das Skript - ohne Skript gibt es ihn nicht,
   weil es dann auch nichts aufzuklappen gibt. */
.asc-profil__knopf {
	margin-top: auto;
	align-self: start;
	padding: .5rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--asc-radius-button);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.asc-profil__knopf::after { content: " →"; }
.asc-profil--klickbar { cursor: pointer; }
.asc-profil--klickbar:hover { border-color: var(--wp--preset--color--primary); }
.asc-profil--klickbar:hover .asc-profil__knopf,
.asc-profil__knopf:hover,
.asc-profil__knopf:focus-visible {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

/* --- Steckbrief-Dialog ---------------------------------------------------- */

/* Nachbau des Steckbriefs der alten Seite: roter Grund, Name gross links,
   Foto rechts, darunter die Angaben. Dort war das alles ein Bild. */
.asc-steckbrief {
	width: min(46rem, calc(100vw - 2rem));
	max-width: none;
	max-height: calc(100vh - 2rem);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--asc-radius);
	background: var(--wp--preset--color--primary);
	color: #fff;
	box-shadow: 0 24px 60px rgb(1 1 1 / 38%);
	overflow: auto;
	overscroll-behavior: contain;
}
.asc-steckbrief::backdrop {
	background: rgb(1 1 1 / 55%);
	backdrop-filter: blur(2px);
}

.asc-steckbrief__kopf {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0;
}
@media (min-width: 34rem) {
	.asc-steckbrief__kopf { grid-template-columns: minmax(0, 1fr) 12rem; }
}

.asc-steckbrief__name {
	margin: 0;
	color: #fff;
	font-size: clamp(1.75rem, 5vw, 2.7rem);
	line-height: 1.05;
	text-wrap: balance;
}

.asc-steckbrief__bild {
	max-width: 12rem;
	border: 4px solid #fff;
	border-radius: 3px;
	background: none;
}
.asc-steckbrief__bild[hidden] { display: none; }

.asc-steckbrief__inhalt { padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); }

/* Im Dialog tragen die Reihen die Vereinsfarbe, nicht die Kartenfarben. */
.asc-steckbrief .asc-profil__steckbrief { display: block; margin: 0; }
.asc-steckbrief .asc-profil__reihe {
	padding-block: .55rem;
	font-size: 1rem;
	border-top-color: rgb(255 255 255 / 28%);
}
.asc-steckbrief .asc-profil__reihe strong {
	color: #fff;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}
@media (min-width: 30rem) {
	.asc-steckbrief .asc-profil__reihe { grid-template-columns: 9.5rem minmax(0, 1fr); }
}

.asc-steckbrief__fuss {
	display: flex;
	justify-content: flex-end;
	padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}
.asc-steckbrief__zu {
	padding: .55rem 1.3rem;
	border: 1px solid rgb(255 255 255 / 55%);
	border-radius: var(--asc-radius-button);
	background: none;
	color: #fff;
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease;
}
.asc-steckbrief__zu:hover,
.asc-steckbrief__zu:focus-visible { background: rgb(255 255 255 / 18%); }
.asc-steckbrief :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- Trainingszeiten ------------------------------------------------------ */

/* Die Fussnoten zu TFG und TSP-Kader standen im PDF klein unter der Tabelle. */
.asc-tz-fussnote {
	margin-top: .35rem;
	color: var(--wp--preset--color--muted);
	font-size: .9rem;
}
.asc-tz td:first-child { font-weight: 600; }
.asc-tz table { min-width: 48rem; }

/* Zeiten und Orte stehen zeilenweise untereinander und muessen zueinander
   passen. Bricht eine der beiden Spalten um, verschiebt sich alles darunter
   gegeneinander - dann steht neben "Mi" der Ort vom Montag. */
.asc-tz td:nth-child(3),
.asc-tz td:nth-child(4) { white-space: nowrap; }

/* --- Imagefilm ----------------------------------------------------------- */

/* Lesebreite, aber linksbuendig im Raster - der Abschnitt ist ein Hinweis,
   keine Textseite. */
.asc-film__box { max-width: 46rem; }

/* --- Terminliste --------------------------------------------------------- */

/* Die Liste laeuft sonst ueber die volle Breite und reisst Datum,
   Titel und Ort weit auseinander. */
.asc-events {
	max-width: 58rem;
	margin-inline: auto;
}
.asc-event {
	/* Das "display: flex" kam frueher von der Layout-Klasse, die WordPress an
	   den Gruppenblock haengt. Seit die Liste aus dem Block "asc Termine"
	   kommt, gibt es die nicht mehr: Sie traegt einen Hash je Blockinstanz,
	   den ein render_callback nicht nachbilden kann. Ohne diese drei Zeilen
	   stuenden Datum, Titel und Ort untereinander statt nebeneinander. */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-block: 1.15rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	gap: 1rem 1.5rem;
	align-items: baseline;
}
.asc-events .asc-event:first-child { border-top: 1px solid var(--wp--preset--color--border); }

/* Ausschreibung, Flyer und Ergebnisse in der Terminliste.

   Sie stehen ganz rechts und ruecken auf schmalen Schirmen unter den Titel -
   das erledigt das "flex-wrap" der Zeile von selbst. Die Trennpunkte zwischen
   mehreren Links kommen aus dem Plugin, nicht aus CSS: Ein "::before" waere
   fuer Vorlesegeraete ein stummes Zeichen mitten im Linktext. */
.asc-event__links {
	margin: 0;
	font-size: .95rem;
}
.asc-event__links a { color: var(--wp--preset--color--primary); }
.asc-event p { margin: 0; }
.asc-event__date { color: var(--wp--preset--color--primary); font-weight: 600; }
/* Leerer Platzhalter bei Terminen ohne Ort - er haelt die Spalte, darf aber
   keine eigene Hoehe bekommen. */
.asc-event__place:empty { padding: 0; }

/* --- Termine: Jahrestabelle ----------------------------------------------- */

.asc-termine-tabelle .asc-termin__zusatz {
	color: var(--wp--preset--color--muted);
	font-size: .88rem;
}
/* Abgesagt wird doppelt kenntlich gemacht: durchgestrichen UND als Wort.
   Wer Farben nicht unterscheidet oder sich die Seite vorlesen laesst, sieht
   die Linie nicht. */
.asc-termine-tabelle tr.asc-termin--abgesagt { color: var(--wp--preset--color--muted); }
.asc-termine-tabelle tr.asc-termin--abgesagt em {
	color: var(--wp--preset--color--primary);
	font-style: normal;
	font-weight: 600;
}
.asc-event__date {
	flex: 0 0 auto;
	min-width: 10.5rem;
	white-space: nowrap;      /* "18. September 2026" bleibt einzeilig */
	font-variant-numeric: tabular-nums;
}
/* Die Groesse stand frueher als Inline-Stil im abgetippten Markup. Der Block
   kann sie nicht mitliefern, also gehoert sie hierher - sonst faellt der Titel
   um 0,4 Pixel kleiner aus als vorgesehen. */
.asc-event__title { flex: 1 1 12rem; font-size: 1.15rem; }
.asc-event__place { flex: 0 0 auto; text-align: right; }

@media (max-width: 600px) {
	/* Untereinander. Ohne das Zuruecksetzen von flex und align-items wuerde
	   "flex: 1 1 12rem" in der Spaltenrichtung zur Mindest-HOEHE und
	   "align-items: baseline" liesse die Kaesten auf Textbreite schrumpfen –
	   der Titel bricht dann Buchstabe fuer Buchstabe um. */
	.asc-event {
		flex-direction: column;
		align-items: stretch;
		gap: .2rem;
	}
	.asc-event > * {
		flex: 0 0 auto;
		min-width: 0;
		width: 100%;
	}
	.asc-event__place { text-align: left; }
}

/* --- Trainerprofile -------------------------------------------------------- */

/* Dieselben Karten wie bei den Athletenprofilen, aber ohne Steckbrief: Die
   Angaben sind kurz genug, um sie gleich zu zeigen. */

/* Vier in einer Reihe: Die Karten tragen wenig Inhalt, drei sehr breite
   waeren halb leer. */
@media (min-width: 62rem) {
	.asc-profil-liste--trainer { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Hier fuehrt der Text, nicht das Bild - anders als bei den Athletenkarten.
   Der Grund steckt in den Daten: Es gibt zunaechst KEIN einziges Foto. Ein
   grosses Portraetfeld je Karte waere ein Raster aus 30 roten Flaechen
   (gemessen 373 Pixel Monogramm ueber vier Zeilen Text). Also ein kleiner
   runder Kopf neben dem Namen - dieselbe Stelle fuer Monogramm und Foto,
   damit die Reihen in jedem Mischzustand auf einer Linie bleiben. */
.asc-profil--trainer .asc-profil__kopf {
	display: flex;
	align-items: center;
	gap: .8rem;
}
.asc-profil--trainer .asc-profil__kopftext { min-width: 0; }

.asc-profil__avatar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.4rem;
	height: 3.4rem;
	margin: 0;
	overflow: hidden;
	border-radius: 50%;
	background: linear-gradient(150deg,
		var(--wp--preset--color--primary) 0%,
		var(--wp--preset--color--primary-dark) 100%);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.2rem;
	/* Arial kennt keinen Schnitt 500 - der fiele auf die Normalschrift
	   zurueck, und die Initialen saehen im roten Kreis blass aus. */
	font-weight: 700;
	line-height: 1;
	letter-spacing: .03em;
	/* Der Buchstabenabstand schiebt die Schrift optisch nach links; die
	   Einrueckung gleicht das aus, sonst steht das Monogramm nicht mittig. */
	text-indent: .03em;
}
.asc-profil__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bei einem Portraet steht der Kopf oben im Bild, nicht in der Mitte. */
	object-position: 50% 20%;
}

.asc-profil--trainer .asc-profil__name { font-size: 1.05rem; }
.asc-profil--trainer .asc-profil__rolle {
	margin: .1rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: .82rem;
	letter-spacing: .02em;
}
.asc-profil--trainer .asc-profil__vorstellung {
	margin: .35rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: .95rem;
}

/* Der Knopf sitzt unten, auch wenn die Karte darueber wenig Inhalt hat -
   sonst steht er in jeder Karte einer Reihe auf einer anderen Hoehe. */
.asc-profil--trainer .asc-profil__kontakt {
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--30);
}

/* Die Mailadresse steht ueber dem Knopf.

   "margin-top: auto" hat vorher der Knopf getragen - er schob sich damit an
   das untere Ende der Karte, damit er in einer Reihe ueberall gleich hoch
   sitzt. Jetzt uebernimmt das die Adresse, sonst risse sie den Knopf nach
   oben. Deshalb faellt beim Knopf das "auto" weg, sobald eine Adresse
   dasteht.

   "overflow-wrap: anywhere": "francisco.castellanos@asc-darmstadt.de" ist
   38 Zeichen lang und passt in keine Kartenspalte. */
.asc-profil__mail {
	margin: auto 0 .4rem;
	font-size: .88rem;
	overflow-wrap: anywhere;
}
.asc-profil__mail a { color: var(--wp--preset--color--primary); }
.asc-profil__mail + .asc-profil__kontakt { margin-top: 0; }
.asc-profil--trainer .asc-profil__knopf {
	display: inline-block;
	font-size: .88rem;
	text-decoration: none;
}
/* Hier stand eine eigene Hover-Regel fuer den Trainerknopf: roter Rahmen,
   rote Schrift, kein Grund. Sie stammt aus der Zeit, als der Knopf beim
   Ueberfahren nur seine Umrandung faerbte.

   Seit die allgemeine Regel weiter oben die Flaeche rot fuellt, war das ein
   Widerspruch: Die Trainer-Regel ist spezifischer (0,3,0 gegen 0,2,0) und
   gewann deshalb bei der Schriftfarbe - der Grund kam aber von der
   allgemeinen. Ergebnis: rote Schrift auf rotem Grund, der Text verschwand
   beim Ueberfahren.

   Die Regel ist ersatzlos weg. Jetzt gilt die allgemeine: roter Grund,
   weisse Schrift - gemessen 7,50:1. */

/* Eine Randnotiz zur Gruppe, etwa "Mitglieder werden durch den HLV berufen".
   Bewusst NICHT in Vereinsrot wie die Disziplinzeile darueber: Dort stand sie
   zuerst und schrie die Karte an, obwohl sie die unwichtigste Zeile ist. */
.asc-profil__gruppenhinweis {
	margin: .2rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: .85rem;
	line-height: 1.45;
}

/* Die Gruppenzeilen sind hier der Hauptinhalt, nicht ein aufklappbarer
   Steckbrief - deshalb etwas mehr Luft als in der Athletenkarte. */
.asc-profil--trainer .asc-profil__reihe {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: .2rem .6rem;
	margin: .3rem 0 0;
	font-size: .92rem;
}
.asc-profil--trainer .asc-profil__reihe strong {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

/* --- Uebersichtsseiten: Verweiskacheln ------------------------------------ */

/* Fuer Erfolge, Verein und Infos. Die Kachel ist als Ganzes anklickbar, der
   Link liegt aber trotzdem auf der Ueberschrift: So bleibt ein sinnvoller
   Linktext fuer Vorlesegeraete und fuer das Durchsteppen mit der Tastatur -
   ein Kartenrahmen mit onclick haette beides nicht. */
.asc-uebersicht { gap: var(--wp--preset--spacing--40); }

.asc-uebersicht__karte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--asc-radius);
	background: var(--wp--preset--color--background);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.asc-uebersicht__karte:hover {
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgb(1 1 1 / 7%);
}

.asc-uebersicht__karte h3 { margin: 0; text-wrap: balance; }
.asc-uebersicht__karte h3 a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}
/* Die ganze Kachel als Tippziel - der Link darin waere auf dem Handy
   sonst eine schmale Textzeile. */
.asc-uebersicht__karte h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.asc-uebersicht__karte:hover h3 a { color: var(--wp--preset--color--primary); }
.asc-uebersicht__karte p { margin: 0; }

/* Der Fokusrahmen gehoert um die Kachel, nicht um die Textzeile - sonst
   sieht man beim Steppen mit der Tastatur kaum, wo man ist. */
.asc-uebersicht__karte:focus-within {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}
.asc-uebersicht__karte h3 a:focus-visible { outline: none; }

/* --- Uebersichtsseiten: Jahresraster -------------------------------------- */

.asc-jahre { gap: var(--wp--preset--spacing--30); }

.asc-jahre__karte {
	position: relative;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--asc-radius);
	background: var(--wp--preset--color--background);
	text-align: center;
	transition: border-color .15s ease, background-color .15s ease;
}
.asc-jahre__karte:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--tertiary);
}
.asc-jahre__karte:focus-within {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.asc-jahre__zahl {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.1;
	/* Jahreszahlen untereinander sollen buendig stehen. */
	font-variant-numeric: tabular-nums;
}
.asc-jahre__zahl a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}
.asc-jahre__zahl a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.asc-jahre__zahl a:focus-visible { outline: none; }

.asc-jahre__art {
	margin: .2rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: .82rem;
	letter-spacing: .04em;
}

/* Redaktionshinweis auf einer Seite - faellt bewusst auf, damit er nicht
   jahrelang stehen bleibt. */
.asc-hinweis {
	padding: var(--wp--preset--spacing--40);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 0 var(--asc-radius) var(--asc-radius) 0;
	background: var(--wp--preset--color--tertiary);
	font-size: .95rem;
}

/* --- Partner: laufende Logoreihe ------------------------------------------ */

.asc-lauf {
	--asc-lauf-gap: clamp(2.5rem, 6vw, 5rem);
	overflow: hidden;
}

.asc-lauf__fenster { overflow: hidden; }

/* Ausgangszustand - und zugleich der Zustand, in dem es bleibt, wenn kein
   JavaScript laeuft: eine ruhige, mittige Reihe, die bei Bedarf umbricht.
   Das ist kein Notbehelf, sondern eine brauchbare Darstellung. */
.asc-lauf__band {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) var(--asc-lauf-gap);
}

/* Erst wenn sponsorenlauf.js die Kopien angelegt und die Strecke gemessen
   hat, wird daraus ein Band. Vorher zu animieren hiesse, eine unbekannte
   Strecke zu verschieben - die Reihe risse sichtbar ab. */
.asc-lauf__band[data-asc-lauf="an"] {
	width: max-content;
	flex-wrap: nowrap;
	justify-content: flex-start;
	/* Im Laufzustand KEIN gap - der Abstand haengt an jedem Logo einzeln.
	   Grund: Bei zehn Logos gibt es neun Abstaende, und die Haelfte davon
	   waere viereinhalb. Die Verschiebung um "-50%" ginge dann nicht
	   auf, und man saehe bei jedem Durchlauf einen Ruecksprung. Traegt
	   jedes Logo seinen Abstand selbst, belegt es genau "Breite + Abstand",
	   und zwei gleiche Haelften teilen sich sauber. Siehe sponsorenlauf.js. */
	gap: 0;
	animation: asc-lauf-umlauf var(--asc-lauf-dauer, 40s) linear infinite;
}

.asc-lauf__band[data-asc-lauf="an"] .asc-lauf__logo {
	margin-right: var(--asc-lauf-gap);
}

/* Verschoben wird um "-50%" - also um genau eine der beiden identischen
   Haelften, aus denen das Band besteht. Kein Pixelwert ist beteiligt, deshalb
   kann die Naht auch dann nicht sichtbar werden, wenn Bilder spaeter laden,
   das Fenster sich aendert oder das Handy gedreht wird. Genau daran ist die
   erste Fassung gescheitert. */
@keyframes asc-lauf-umlauf {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Anhalten, solange jemand hinsieht oder sich mit der Tastatur darin bewegt. */
.asc-lauf__fenster:hover .asc-lauf__band,
.asc-lauf__fenster:focus-within .asc-lauf__band {
	animation-play-state: paused;
}

/* Weiche Raender nur im laufenden Zustand: An einer stehenden, mittigen Reihe
   wuerde die Ausblendung die aeusseren Logos ohne Grund blass machen. */
.asc-lauf__band[data-asc-lauf="an"] {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}

.asc-lauf__logo {
	flex: 0 0 auto;
	margin: 0;
}
.asc-lauf__logo img {
	display: block;
	width: auto;
	height: 2.4rem;
	/* Deckel auf der Breite: Die Dateien haben sehr unterschiedliche
	   Seitenverhaeltnisse - "bauverein" ist 300x78 und waere bei gleicher
	   Hoehe fast dreimal so breit wie "Merck" (300x200). Ohne den Deckel
	   beherrscht ein einzelnes Logo die halbe Reihe. */
	max-width: 8rem;
	object-fit: contain;
	/* theme.json rundet Bilder auf 16px ab. Bei einem Logo sieht das nach
	   beschnittener Ecke aus, nicht nach Gestaltung. */
	border-radius: 0;
}

@media (max-width: 37.5rem) {
	.asc-lauf__logo img { height: 1.9rem; max-width: 6.5rem; }
	.asc-lauf__band[data-asc-lauf="an"] {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
		mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
	}
}

/* Wer Bewegung abgestellt hat, bekommt die stehende Reihe. Das Skript legt
   dann gar nicht erst Kopien an; diese Regel ist der Gurt dazu, falls die
   Einstellung erst nach dem Laden umgestellt wird. */
@media (prefers-reduced-motion: reduce) {
	.asc-lauf__band[data-asc-lauf="an"] {
		animation: none;
		transform: none;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* --- Nur fuer Vorlesegeraete ---------------------------------------------- */

/* Text, der auf dem Bildschirm nicht erscheint, aber vorgelesen wird. Das
   Theme brachte diese Klasse bisher nicht mit - "display: none" waere falsch,
   denn davon ueberspringen Vorlesegeraete den Text ebenfalls. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Kontaktformular ------------------------------------------------------ */

.asc-formular {
	max-width: 40rem;
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.asc-formular__feld { margin: 0; }
.asc-formular__feld label {
	display: block;
	margin-bottom: .35rem;
	font-weight: 600;
}

.asc-formular input[type="text"],
.asc-formular input[type="email"],
.asc-formular select,
.asc-formular textarea {
	width: 100%;
	padding: .7rem .9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--asc-radius-button);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	/* Ohne das erben Formularfelder die Systemschrift statt der Theme-Schrift,
	   und unter 16px zoomt Safari auf dem iPhone beim Antippen hinein. */
	font: inherit;
	font-size: 1rem;
	/* Browser stellen Formularfelder von sich aus auf "content-box" - anders
	   als alle uebrigen Elemente. "width: 100%" meint dort nur den Inhalt,
	   Polsterung und Rahmen kommen obendrauf. In der schmalen Spalte der
	   Kontaktseite waren die Felder dadurch 439 statt 408 Pixel breit und
	   ragten in die Spalte daneben. */
	box-sizing: border-box;
}
.asc-formular textarea { resize: vertical; min-height: 9rem; }

.asc-formular input:focus-visible,
.asc-formular select:focus-visible,
.asc-formular textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--primary);
}

.asc-formular__hinweis {
	display: block;
	margin-top: .3rem;
	color: var(--wp--preset--color--muted);
	font-size: .9rem;
}

/* Das Sternchen traegt die Vereinsfarbe, aber die Information steckt nicht in
   der Farbe: Daneben steht "(Pflichtfeld)" fuer Vorlesegeraete. */
.asc-formular__pflicht { color: var(--wp--preset--color--primary); }

/* Flex statt Grid, und der Text steckt im Markup in EINEM span. Im Grid wird
   jedes Kind zu einer eigenen Zelle - auch ein blosser Textabschnitt, der Link
   und das Sternchen. Gemessen sah das so aus: Kaestchen ganz links, Text 100
   Pixel weiter rechts, "Datenschutzerklaerung" und das Sternchen je eine
   eigene Zeile darunter. */
.asc-formular__einwilligung label {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-weight: 400;
	font-size: .95rem;
	line-height: 1.5;
}
.asc-formular__einwilligung label > span { min-width: 0; }
.asc-formular__einwilligung input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin: .15rem 0 0;
	accent-color: var(--wp--preset--color--primary);
}

/* Die Spamfalle. Nicht "display: none": Manche Skripte fuellen genau die
   Felder NICHT aus, die unsichtbar geschaltet sind. So steht sie im Quelltext
   wie ein normales Feld und ist trotzdem nirgends zu sehen. */
.asc-formular__falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.asc-formular__absenden { margin: 0; }

.asc-formular__meldung {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--asc-radius);
	border-left: 3px solid;
}
.asc-formular__meldung p:first-child { margin-top: 0; }
.asc-formular__meldung p:last-child,
.asc-formular__meldung ul:last-child { margin-bottom: 0; }
.asc-formular__meldung--ok {
	border-color: #1c5c33;
	background: #eaf5ee;
	color: #12341d;
}
.asc-formular__meldung--fehler {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--tertiary);
}
.asc-formular__meldung--fehler:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}
.asc-formular__meldung ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* --- Tabellen (Bestenlisten, Bilanzen, Ergebnisse) ----------------------- */

/* Die Bilanz- und Bestenlisten sind breit. Auf schmalen Schirmen
   horizontal scrollbar statt das Layout zu sprengen. */
.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--asc-radius);
	border: 1px solid var(--wp--preset--color--border);
}
.wp-block-table table {
	border-collapse: collapse;
	min-width: 34rem;
	width: 100%;
	color: var(--wp--preset--color--foreground);
}
.wp-block-table :where(th, td) {
	padding: .6rem .85rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
}
.wp-block-table thead th {
	position: sticky;
	top: 0;
	background: var(--wp--preset--color--tertiary);
	font-weight: 600;
	font-size: .88rem;
	letter-spacing: .02em;
}
.wp-block-table tbody tr:last-child :where(th, td) { border-bottom: 0; }
.wp-block-table tbody tr:hover {
	background: color-mix(in srgb, var(--wp--preset--color--tertiary) 45%, transparent);
}
.wp-block-table td { font-variant-numeric: tabular-nums; }

/* --- Inhaltstypografie --------------------------------------------------- */

.wp-block-post-content > * + * { margin-block-start: 1.5em; }
.wp-block-post-content :where(h2, h3) { margin-block-start: 2em; }
.wp-block-post-content img { border-radius: var(--asc-radius); height: auto; }

/* PDF-Links kenntlich machen – der Verein verlinkt viele Dokumente */
.wp-block-post-content a[href$=".pdf"]::after,
.wp-block-list a[href$=".pdf"]::after {
	content: " (PDF)";
	font-size: .8em;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}
.wp-block-post-content a[target="_blank"]::after {
	content: " ↗";
	font-size: .85em;
	text-decoration: none;
}

/* --- Buttons ------------------------------------------------------------- */

.wp-block-button__link { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.wp-block-button.is-style-outline .wp-block-button__link {
	border-radius: var(--asc-radius-button);
	border-width: 1px;
}
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--foreground);
	border-color: var(--wp--preset--color--foreground);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--foreground);
}
/* Umrandeter Button auf dunklem Hero */
.asc-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	border-color: var(--wp--preset--color--background);
}

/* --- Tippziele im Inhalt -------------------------------------------------- */

/* Aufgezaehlte Links sind keine Links im Satz - fuer sie gilt das Mindestmass
   von 24 Pixeln. Gemessen waren sie 18 bis 22 Pixel hoch. Die Polsterung
   wirkt auch am Schreibtisch, stoert dort aber nicht. */
.asc-footer__list a,
.asc-tile p:last-child a {
	display: inline-block;
	padding-block: .3rem;
}
.asc-footer__legal a {
	display: inline-block;
	padding-block: .25rem;
}

/* --- Fussbereich --------------------------------------------------------- */

.asc-footer .wp-block-site-title a {
	color: #fff;
	text-decoration: none;
}
/* Wie in der Kopfleiste: Das Logo ist freigestellt, eine Rundung hat daran
   nichts zu runden - sie beschneidet nur die Raender des Zeichens. Und wie
   oben steht es weiss auf dem Rot, wie es die CI vorschreibt. */
.asc-footer .wp-block-site-logo img {
	border-radius: 0;
	filter: brightness(0) invert(1);
}
.asc-footer a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	transition: color .15s ease;
}
.asc-footer a:hover { color: var(--wp--preset--color--primary); }
.asc-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: .6rem;
	font-size: 1rem;
}

/* Fuenf Spalten (Marke + vier Rubriken) passen auf einen breiten Schirm, auf
   einem schmalen Notebook nicht mehr. Ohne diese Zeilen quetscht der Block sie
   trotzdem nebeneinander, bis "Kooperation Sport Mroczek" vier Zeilen hoch
   steht. Mit Mindestbreite und Umbruch rutscht stattdessen eine Rubrik in die
   naechste Reihe. Unterhalb von 782 Pixeln stapelt WordPress die Spalten
   ohnehin selbst. */
.asc-footer .wp-block-columns { flex-wrap: wrap; }
.asc-footer .wp-block-column { min-width: 10rem; }
.asc-footer__legal a { color: var(--wp--preset--color--muted); }

/* --- Imagefilm ------------------------------------------------------------ */

/* Vorschaubild mit Startknopf statt eingebautem YouTube-Fenster. Der Grund ist
   nicht Geschmack: Ein fest eingebettetes Video baut die Verbindung zu Google
   schon beim Laden der Seite auf, mit IP-Adresse und allem. Damit waere der
   Satz "diese Seite laedt nichts von Dritten" falsch, und die Seite braeuchte
   einen Einwilligungsbanner. So passiert bis zum Klick gar nichts.

   Der Knopf ist absichtlich ein <a> und kein <button>: Ohne JavaScript fuehrt
   er ganz normal zu YouTube, mit JavaScript wird der Sprung abgefangen und der
   Film erscheint an Ort und Stelle. */
.asc-film { margin: 0; }

.asc-film__buehne {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--asc-radius);
	background: #14110f;
}

.asc-film__bild,
.asc-film__rahmen {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.asc-film__bild { object-fit: cover; }

.asc-film__knopf {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	text-decoration: none;
	color: #fff;
	background: linear-gradient(180deg, rgb(0 0 0 / 12%) 0%, rgb(0 0 0 / 55%) 100%);
	transition: background-color .2s ease;
}
.asc-film__knopf:hover { background-color: rgb(0 0 0 / 12%); }

/* Der Rahmen gehoert innen, sonst schneidet ihn das overflow der Buehne ab. */
.asc-film__knopf:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
	border-radius: var(--asc-radius);
}

.asc-film__pfeil {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 8px 28px rgb(0 0 0 / 35%);
	transition: transform .2s ease;
}
.asc-film__knopf:hover .asc-film__pfeil,
.asc-film__knopf:focus-visible .asc-film__pfeil { transform: scale(1.08); }

/* Das Dreieck: reine Rahmenkanten, damit keine Grafikdatei noetig ist. Der
   kleine Versatz nach rechts gleicht aus, dass die Spitze weiter aussen liegt
   als die Grundseite - optisch mittig ist nicht rechnerisch mittig. */
.asc-film__pfeil::before {
	content: "";
	margin-left: .3rem;
	border-style: solid;
	border-width: .72rem 0 .72rem 1.2rem;
	border-color: transparent transparent transparent #fff;
}

/* Die Beschriftung bekommt eine eigene dunkle Flaeche und verlaesst sich
   nicht auf den Verlauf.

   Der Grund ist das Vorschaubild: Heute ist es eine Nachtaufnahme, aber der
   Verein kann jederzeit ein anderes einsetzen. Auf dem Verlauf allein stuende
   Weiss ueber einem hellen Foto nur bei 3,8:1 - unter der Anforderung von
   4,5:1, und niemand haette gemerkt, woran es liegt. Mit dieser Flaeche sind
   es selbst ueber einem rein weissen Foto noch 12,7:1. */
.asc-film__beschriftung {
	padding: .4rem 1rem;
	border-radius: var(--asc-radius-button);
	background: rgb(20 17 15 / 86%);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: .01em;
}

.asc-film__fuss {
	margin-top: .75rem;
	color: var(--wp--preset--color--muted);
	font-size: .92rem;
	line-height: 1.6;
}

@media (max-width: 600px) {
	.asc-film__pfeil { width: 3.4rem; height: 3.4rem; }
	.asc-film__pfeil::before { border-width: .55rem 0 .55rem .92rem; }
	.asc-film__beschriftung { font-size: .95rem; }
}

/* --- Aufruf-Kasten am Seitenende ------------------------------------------ */

.asc-aufruf {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	border-radius: var(--asc-radius);
	background: var(--wp--preset--color--tertiary);
}
.asc-aufruf > :first-child { margin-top: 0; }
.asc-aufruf > :last-child { margin-bottom: 0; }
.asc-aufruf p { max-width: 46rem; }

/* Der Rahmenknopf, ausgeschrieben statt geerbt.

   Grund: Die Regeln fuer "is-style-outline" liefert WordPress nur dann mit,
   wenn es auf der Seite einen Knopfblock sieht. Fehlen sie, faellt der Knopf
   auf die Vorgabe aus theme.json zurueck - rote Flaeche, und darauf dann die
   schwarze Schrift des Rahmenstils. Gemessen kam dabei 4,1:1 heraus, also
   unter der Anforderung. Diese Regel macht das unmoeglich. */
.asc-aufruf .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--foreground);
	border: 1px solid currentColor;
}
.asc-aufruf .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

/* --- Blaetterfunktion ---------------------------------------------------- */

.wp-block-query-pagination { font-weight: 600; }
.wp-block-query-pagination-numbers .page-numbers {
	padding: .35rem .75rem;
	border-radius: var(--asc-radius-button);
	text-decoration: none;
}
.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

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

@media print {
	.asc-header, .asc-footer, .wp-block-query-pagination { display: none; }
	body { font-size: 11pt; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* --- Aktiver Menuepunkt ---------------------------------------------------
   Nicht nur ueber die Farbe: Der Unterstrich traegt die Information auch
   dann, wenn Farben nicht unterschieden werden koennen. */

.asc-header [data-asc-aktiv="seite"] {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: .35em;
	text-decoration-thickness: 2px;
}

.asc-header [data-asc-aktiv="zweig"] {
	color: var(--wp--preset--color--primary);
}

/* --- Geradegezogene Ueberschriften ----------------------------------------
   Das Werkzeug "asc Überschriften" korrigiert die Gliederungsebene, damit
   Vorlesegeraete keine Luecke melden. Die Optik soll sich dabei NICHT
   aendern: Ein H4 der Partnerliste wuerde als H2 sonst in 44 statt 18 Pixeln
   stehen. Diese Klassen halten die urspruengliche Groesse fest.

   Eine im Block gesetzte eigene Schriftgroesse steht inline und gewinnt
   weiterhin - hier wird nur nachgeholt, was vorher das Tag geregelt hat. */

.asc-ueber--h1 { font-size: var(--wp--preset--font-size--xx-large); }
.asc-ueber--h2 { font-size: var(--wp--preset--font-size--x-large); }
.asc-ueber--h3 { font-size: var(--wp--preset--font-size--large); }
.asc-ueber--h4,
.asc-ueber--h5,
.asc-ueber--h6 { font-size: var(--wp--preset--font-size--medium); }

/* --- Rote Vollflaeche -----------------------------------------------------
   Die Vereinsfarbe als Flaeche, nicht nur als Tupfer. Gemessen: Weiss auf
   #ae0000 ergibt 7,50:1 und liegt damit weit ueber den geforderten 4,5:1.

   Innerhalb dieses Abschnitts muessen Schrift und Knoepfe umgedreht werden:
   Ein roter Knopf auf rotem Grund waere unsichtbar. */

.asc-section--rot,
.asc-section--rot :is(h1, h2, h3, h4, p, li) {
	color: #fff;
}

/* Gefuellter Knopf: weiss mit roter Schrift. */
.asc-section--rot .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-color: #fff;
	color: var(--wp--preset--color--primary);
}
.asc-section--rot .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--primary-dark);
}

/* Umrissknopf: weisse Linie, weisse Schrift. */
.asc-section--rot .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: #fff;
	color: #fff;
	background-color: transparent;
}
.asc-section--rot .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: #fff;
	color: var(--wp--preset--color--primary);
}

/* Verweise und Fokus muessen sich ebenfalls vom Rot abheben. */
.asc-section--rot a { color: #fff; }
.asc-section--rot :is(a, button, input):focus-visible { outline-color: #fff; }

/* --- Roter Akzent unter den Abschnittsueberschriften ----------------------
   Bringt die Vereinsfarbe ueber die ganze Seite verteilt ins Bild, ohne dass
   jede Flaeche eingefaerbt werden muss. Auf der roten Flaeche wird der Strich
   weiss, sonst waere er unsichtbar. */

.asc-section > h2::after {
	content: "";
	display: block;
	width: 3rem;
	height: 4px;
	margin-top: .75rem;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
}

.asc-section > h2.has-text-align-center::after {
	margin-inline: auto;
}

.asc-section--rot > h2::after {
	background: #fff;
}

/* --- Mehr Vereinsrot auf den Unterseiten ----------------------------------
   Vorgabe des Vereins: rund 40 % Rot statt der bisherigen 0,1 %. Gemessen
   auf /verein/ liegt die Flaeche in drei Bauteilen - Footer (23,9 %),
   Uebersichtskarten (11,1 %) und Seitenkopf. Zusammen ergibt das etwa 41 %,
   verteilt auf oben, Mitte und unten statt als eine rote Wand.

   Der Fliesstext bleibt bewusst auf Weiss: Laengere Absaetze auf farbigem
   Grund lesen sich schlechter, und 40 % waeren sonst schnell 70 %. */

/* Gemeinsame Umkehrung fuer alle roten Flaechen. WordPress gibt den
   Farbklassen "!important" mit, deshalb hier ebenfalls - sonst bliebe der
   graue Kartentext auf Rot stehen und waere praktisch unlesbar. */
.asc-seitenkopf,
.asc-seitenkopf :is(h1, h2, p),
.asc-footer,
.asc-footer :is(h1, h2, h3, h4, p, li, a),
.asc-uebersicht__karte,
.asc-uebersicht__karte :is(h1, h2, h3, h4, p, li, a),
.asc-jahre__karte,
.asc-jahre__karte :is(p, a) {
	color: #fff !important;
}

/* Der rote Seitenkopf traegt auf normalen Seiten den Beitragstitel, auf den
   Listenseiten (Berichte, Suche nach Kategorie) den Archivtitel. Beides sind
   verschiedene Bloecke mit verschiedenen Klassen - ohne die zweite Zeile
   haette die Ueberschrift im Band ihren Standardabstand behalten und das
   Band unten aufgeblaeht. */
.asc-seitenkopf .wp-block-post-title,
.asc-seitenkopf .wp-block-query-title { margin: 0; }

/* Die Kategoriebeschreibung steht unter dem Titel im selben Band. */
.asc-seitenkopf .wp-block-term-description {
	margin: .6rem 0 0;
	max-width: 46rem;
}

/* --- Footer ---------------------------------------------------------------- */

.asc-footer a { text-decoration: underline; text-underline-offset: .2em; }
.asc-footer a:hover { text-decoration-thickness: 2px; }
.asc-footer :is(a, button):focus-visible { outline-color: #fff; }

/* --- Uebersichtskarten ----------------------------------------------------- */

.asc-uebersicht__karte {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary-dark);
}
.asc-uebersicht__karte:hover {
	background: var(--wp--preset--color--primary-dark);
	border-color: #fff;
}
.asc-uebersicht__karte h3 a { text-decoration: none; }
.asc-uebersicht__karte h3 a:hover { text-decoration: underline; }

/* --- Jahreskacheln (Erfolge, Termine) -------------------------------------- */

.asc-jahre__karte {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary-dark);
}
.asc-jahre__karte:hover {
	background: var(--wp--preset--color--primary-dark);
	border-color: #fff;
}
.asc-jahre__karte a { text-decoration: none; }
.asc-jahre__karte a:hover { text-decoration: underline; }

/* --- Rote Kopfleiste ------------------------------------------------------
   Wunsch des Vereins: Leiste in Vereinsrot, Schrift weiss, und der Knopf am
   Ende soll NICHT mehr hervorstechen, sondern sich einfuegen.

   Der Hintergrund sitzt auf ::before und nicht auf der Leiste selbst - siehe
   die Erklaerung weiter oben zu backdrop-filter. Deshalb muss die Farbe auch
   dort gesetzt werden. Der Weichzeichner entfaellt: Auf einer deckenden
   Flaeche hat er keine Wirkung mehr und kostet nur Rechenzeit. */

.asc-header__bar {
	border-color: var(--wp--preset--color--primary-dark);
}
.asc-header__bar::before {
	background: var(--wp--preset--color--primary);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Das Logo steht SCHWARZ auf einer weissen Scheibe - Wunsch des Vereins vom
   22. September 2026. Die CI erlaubt beides ausdruecklich: "Das Logo darf
   sowohl in Schwarz als auch negativ Weiss verwendet werden, je nach
   Hintergrund." Auf Weiss ist Schwarz die richtige Fassung.

   Umgesetzt mit einem Filter statt mit einer zweiten Bilddatei.
   "brightness(0)" macht jeden deckenden Pixel schwarz; die Durchsichtigkeit
   der freigestellten PNG bleibt unberuehrt, die Kanten also sauber. Eine
   zweite Datei muesste jemand pflegen - der Filter gilt automatisch, auch
   wenn der Verein das Logo austauscht.

   Die Scheibe sitzt auf dem LINK und nicht hinter der Figur: So fuehrt die
   ganze runde Flaeche zur Startseite und nicht nur das Bild darin. */
.asc-header .wp-block-site-logo .custom-logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	/* Quadrat mit abgerundeten Ecken, nicht rund - Wunsch des Vereins vom
	   23. September 2026. 12 Pixel statt der 16 der Leiste: Die Scheibe sitzt
	   INNERHALB der Leiste, und eine Rundung, die genauso stark ist wie die
	   des Rahmens darum, wirkt an der Ecke dicker als der Rest. */
	border-radius: 12px;
	background: #fff;
}
.asc-header .wp-block-site-logo img {
	background: transparent;
	filter: brightness(0);
}

/* Die Leiste wird oben und unten enger gepolstert, damit die groessere
   Scheibe sie nicht in die Hoehe zieht: gemessen 70 statt 65 Pixel. Die
   Scheibe bleibt mit 58 Pixeln also innerhalb der Leiste. Links und rechts
   bleibt die Polsterung des Themes unangetastet. */
/* Der Abstand links ist genauso gross wie oben und unten - Wunsch des Vereins.
   Vorher standen dort 1,35rem gegen 0,3rem, das Logo klebte also optisch
   weiter vom linken Rand weg als von der Ober- und Unterkante. */
.asc-header__bar { padding-left: .55rem; }

@media (min-width: 30rem) {
	.asc-header__bar {
		padding-top: .3rem;
		padding-bottom: .3rem;
		padding-left: .3rem;
	}
}

/* Unter 30rem ist neben Klappmenue, Suche und Knopf kein Platz fuer eine
   breitere Marke: Gemessen ragte "Mitglied werden" sonst 7 Pixel ueber die
   Leiste hinaus. Dort bleibt die Scheibe so breit wie das Logo bisher, im
   gleichen Verhaeltnis von Figur zu Flaeche. */
@media (max-width: 30rem) {
	.asc-header .wp-block-site-logo .custom-logo-link {
		width: 42px;
		height: 42px;
	}
	.asc-header .wp-block-site-logo img {
		width: 30px;
		height: auto;
	}
}

/* Das Menue sitzt mittig zwischen dem Schriftzug und den Zeichen rechts.

   "margin-inline: auto" teilt den freien Platz zu gleichen Teilen davor und
   dahinter: gemessen 111 Pixel links und 116 rechts bei 1440 Pixel Breite.
   Die fuenf Pixel Unterschied sind die beiden verschiedenen Grundabstaende
   des Themes (16 zwischen Marke und Menueblock, 21 innerhalb der rechten
   Gruppe) - sichtbar ist das nicht. Vorher klebte das Menue rechts und die
   Luecke wuchs mit dem Bildschirm: 136 Pixel bei 1200, 205 bei 1920.

   Der freie Platz haengt am MENUE und nicht am Instagram-Zeichen: Das ist
   zwischen 1200 und 1260 Pixeln ausgeblendet, ein Aussenabstand darauf bliebe
   dort wirkungslos - gemessen stuende der Knopf dann 116 Pixel vor dem Rand.

   Erst ab 1200px, weil das Theme darunter auf das Klappmenue umschaltet. */
@media (min-width: 1200px) {
	.asc-header__bar {
		gap: 1rem;
	}
	.asc-header__end {
		flex: 1 1 auto;
		justify-content: flex-start;
	}
	.asc-header__end .wp-block-navigation { margin-inline: auto; }
}

/* Der Schriftzug daneben folgt dem Logo und steht ebenfalls weiss.
   
   Vorher stand er schwarz auf dem Rot. Gemessen waren das 4,03:1 - unter den
   4,5:1, die WCAG AA fuer Fliesstext verlangt, und mit dem dunkleren Rot
   (#ae0000, der Ton des Vereinsflyers) waeren es nur noch 2,78:1 - unter der
   Schwelle von 3:1, die selbst fuer grafische Elemente gilt. Weiss auf
   #ae0000 ergibt dagegen 7,50:1.
   Schwarz neben einem weissen Logo saehe ausserdem nach Versehen aus. */
.asc-header__brand .wp-block-site-title a { color: #fff; }

.asc-header .wp-block-navigation a,
.asc-header .wp-block-navigation__responsive-container-open,
.asc-header .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* Aktiver Punkt und Hover: Der Unterstrich traegt die Information, nicht die
   Farbe - auf Rot gaebe es keine zweite Farbe, die kontrastreich genug waere. */
.asc-header .wp-block-navigation a:hover,
.asc-header .wp-block-navigation .current-menu-item > a,
.asc-header .wp-block-navigation [data-asc-aktiv],
.asc-header [data-asc-aktiv="seite"],
.asc-header [data-asc-aktiv="zweig"] {
	color: #fff;
	border-bottom-color: #fff;
}

/* Klappmenues ebenfalls rot, sonst sitzt eine weisse Flaeche unter der roten
   Leiste und wirkt wie ein Fremdkoerper. */
.asc-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary-dark);
}
.asc-header .wp-block-navigation__submenu-container a { color: #fff; }
.asc-header .wp-block-navigation__submenu-container a:hover {
	background: var(--wp--preset--color--primary-dark);
}

/* Der Knopf fuegt sich ein: gleiche Flaeche wie die Leiste, weisse Schrift,
   kein Rahmen, kein Schatten. */
.asc-header__cta .wp-block-button__link {
	background-color: transparent;
	color: #fff;
	box-shadow: none;
}
.asc-header__cta .wp-block-button__link:hover,
.asc-header__cta .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary-dark);
	color: #fff;
}

.asc-header :is(a, button):focus-visible { outline-color: #fff; }

/* --- Vorstandsraster ------------------------------------------------------
   Eine Karte je Person: Portraet oben, darunter der Name in der Vereinsfarbe,
   das Amt und die Mailadresse. Wie viele Karten nebeneinander stehen, regelt
   das Grid-Layout des Blocks selbst; hier steht nur das Aussehen der Karte.

   Bewusst helle Karten und nicht rote wie in den Uebersichtsrastern: In
   diesen Karten stehen Portraetfotos, und rote Flaechen ringsum wuerden mit
   den Hauttoenen streiten. Die Vereinsfarbe traegt stattdessen der Name.

   Dieser Abschnitt ersetzt ZWEI aeltere Bloecke, die aus zwei Entwurfsrunden
   nebeneinander stehen geblieben waren. Im zweiten fehlte vor dem erklaerenden
   Text das Zeichenpaar, das einen Kommentar eroeffnet. Der Browser las den
   Fliesstext deshalb als Selektor und
   verschluckte die Regel dahinter - die Karte hatte GAR KEINE Polsterung.
   Genau daher sassen die Bilder ohne Abstand an der Oberkante und die
   Mailadresse klebte am linken Kartenrand. Gemessen an der Live-Seite:
   "padding: 0px" statt der vorgesehenen 1,5 Rem. */

.asc-vorstand__karte {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--asc-radius);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	text-align: center;
}

/* --- Das Portraet in der Karte --------------------------------------------
   Hier stehen zwei Sorten Bildmaterial nebeneinander, und das bleibt so, bis
   jede und jeder eine neue Aufnahme hat:

     - 12 neue Fotos vor der Vereinswand, 683 x 1024 Pixel. An vier davon
       nachgemessen: Der Kopf liegt zwischen 8 und 55 Prozent der Bildhoehe,
       das asc-Logo auf der Brust zwischen 62 und 85 Prozent.
     - 8 alte Freisteller aus dem Import: runde Kopfausschnitte von nur
       150 x 150 Pixeln, mit durchsichtigen Ecken.

   Deshalb "contain" und nicht "cover": Es wird nichts abgeschnitten, und
   nichts wird ueber seine eigene Groesse hinaus aufgeblasen. Mit "cover"
   fuellten die kleinen Freisteller den Rahmen nur, indem sie auf das
   2,4-Fache hochgerechnet wuerden. Nachgestellt und in Originalgroesse
   angesehen: sichtbar unscharf, und vom Kopf blieb ein formatfuellender
   Ausschnitt, waehrend daneben ein ganzes Brustbild stand.

   Einheitlich ist damit alles, was sich einheitlich machen laesst: derselbe
   Rahmen, dasselbe Verhaeltnis, derselbe helle Grund, dieselbe Rundung,
   dieselbe Groesse in der Karte. Was bleibt, ist der Bildinhalt - ein
   Kopfausschnitt ist kein Brustbild, und das kann kein Stylesheet aendern.

   4:5 und nicht 3:4: Ein Foto im Verhaeltnis 2:3 steht in einem 3:4-Rahmen
   schmaler als der Rahmen selbst, links und rechts bliebe unnoetig viel
   Grund. 4:5 kommt dem Bildformat naeher.

   Der helle Grund traegt beides: bei den Freistellern die durchsichtigen
   Ecken, bei den Fotos die zwei schmalen Streifen links und rechts. */

.asc-vorstand__bild {
	width: 12rem;
	max-width: 100%;
	margin: 0 auto .9rem;
	padding: 0;
}
.asc-vorstand__bild a {
	display: block;
	line-height: 0;
	border-radius: 10px;
}
.asc-vorstand__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	height: auto;
	object-fit: contain;
	background: var(--wp--preset--color--tertiary);
	border-radius: 10px;
}

/* Wer kein Foto hat, bekommt die Initialen - gleiche Flaeche, damit das
   Raster nicht springt. */
.asc-vorstand__initialen {
	width: 12rem;
	max-width: 100%;
	aspect-ratio: 4 / 5;
	margin: 0 auto .9rem;
	padding: 0;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(150deg,
		var(--wp--preset--color--primary) 0%,
		var(--wp--preset--color--primary-dark) 100%);
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.asc-vorstand__name {
	margin: 0 0 .15rem;
	padding: 0;
	color: var(--wp--preset--color--primary);
}
.asc-vorstand__amt {
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--muted);
	font-size: .95rem;
	line-height: 1.45;
}

/* --- Kontakt an der Vorstandskarte ----------------------------------------
   Wunsch des Vereins: "wenn man auf die Gesichter klickt, sollen die
   Kontaktdaten erkennbar sein". Beides also - das Portraet fuehrt zur
   Mailadresse, und darunter steht sie noch einmal lesbar.

   "overflow-wrap: anywhere" muss sein: "berthold.schneider@asc-darmstadt.de"
   ist 35 Zeichen lang und passt in keine 16rem breite Karte. Ohne die Zeile
   ragte die Adresse aus der Karte heraus.

   "margin-top: auto" setzt die Adresse an den unteren Rand: In einer Reihe
   sind alle Karten gleich hoch, und damit stehen die Adressen auf einer
   Linie, auch wenn ein Amt zwei Zeilen braucht und das naechste nur eine. */
.asc-vorstand__mail {
	margin: .55rem 0 0;
	margin-top: auto;
	padding: .55rem 0 0;
	font-size: .85rem;
	overflow-wrap: anywhere;
}
.asc-vorstand__mail a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.asc-vorstand__mail a:hover { text-decoration: underline; }

/* --- Nachtrag: Menueschrift dauerhaft weiss ------------------------------- */

/* WordPress erzwingt auf Navigationslinks "color: inherit" und benutzt dafuer
   einen Spezifitaetstrick - die Klasse steht doppelt im Selektor:
       .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
   Das sind drei Klassen (0,3,0) und schlaegt jede Regel auf "a" innerhalb der
   Kopfleiste (0,2,1). Die Links waren deshalb schwarz und wurden erst beim
   Ueberfahren weiss - der Hover-Zustand traf einen anderen Selektor.

   Statt die Spezifitaet zu ueberbieten, wird die Farbe dort gesetzt, wo
   "inherit" sie holt: am Container. Das ist robuster, weil es auch fuer
   alles gilt, was WordPress spaeter noch in die Leiste haengt. */
.asc-header { color: #fff; }

/* --- Nachtrag: Hero laeuft wieder unter die Kopfleiste -------------------- */

/* Die urspruengliche Regel lautete "body.home main > .asc-hero" - also
   DIREKTES Kind von <main>. Seit die Startseite im Seiteninhalt steht, haengt
   der Hero eine Ebene tiefer (main > .entry-content > .asc-hero), und die
   Regel griff nicht mehr: weisser Streifen oben, Bild erst unter der Leiste.

   Der Nachfahren-Selektor ist gegen genau diesen Fall unempfindlich. Die
   Spezifitaet (0,2,2) reicht weiterhin gegen die Kernregel
   ":root :where(.is-layout-constrained) > :first-child" (0,2,0). */
body.home main .wp-block-post-content > *,
body.home main .entry-content > * {
	margin-block-start: 0;
}

body.home main .asc-hero {
	margin-block-start: calc(-1 * var(--asc-header-h) - 1rem);
}

/* --- Galerien: nichts abschneiden, nichts aufblasen ------------------------

   Der Block "Galerie" ist im Blockeditor standardmaessig auf "Bilder
   zuschneiden" gestellt. Dahinter steckt diese Kernregel:

     .wp-block-gallery.has-nested-images.is-cropped
     figure.wp-block-image:not(#individual-image) img
     { height: 100%; width: 100%; object-fit: cover; }

   Sie zwingt jedes Bild in ein Feld gleicher Hoehe und schneidet weg, was
   nicht hineinpasst. Bei Fotos faellt das kaum auf, bei Logos ist es fatal:
   Auf der Kollektionsseite standen drei Logos nebeneinander, und dem
   breitesten (170x65) fehlten links und rechts je rund 30 Pixel - aus
   "TOP4RUNNING" wurde "OP4RUNNIN". Sichtbar war nur das Ergebnis, nicht die
   Ursache; im Editor sieht die Galerie unauffaellig aus.

   "scale-down" ist das Gegenmittel und macht beides zugleich:

     - Es schneidet nichts ab. Das Bild wird vollstaendig eingepasst.
     - Es vergroessert nichts ueber die eigene Aufloesung hinaus. "contain"
       haette das Logo von 170 auf 219 Pixel (mobil sogar auf 335) gezogen
       und damit unscharf gemacht; "scale-down" nimmt den kleineren der
       beiden Werte und laesst es bei 170.

   Die Zeilenhoehe der Galerie bleibt erhalten, die Bilder stehen also
   weiterhin sauber nebeneinander - der Zweck von "zuschneiden" ist damit
   erfuellt, nur ohne den Verlust.

   Zur Spezifitaet: Die Kernregel liegt bei (1,4,3) - die ID stammt aus
   ":not(#individual-image)". Die Klasse "is-cropped" steht hier deshalb
   doppelt; das hebt die Spezifitaet auf (1,5,3) und macht die Regel
   unabhaengig davon, in welcher Reihenfolge die Stylesheets geladen werden. */

.wp-block-gallery.has-nested-images.is-cropped.is-cropped
figure.wp-block-image:not(#individual-image) img {
	object-fit: scale-down;
}

/* --- Instagram-Knopf ------------------------------------------------------

   Auf der alten Website sass der Instagram-Verweis als kleines Symbol oben in
   der Seitenleiste. Die neue Seite hat keine Seitenleiste; der uebliche und
   erwartete Platz dafuer ist der Fussbereich.

   Das Symbol kommt aus dem Stylesheet, nicht aus der Mediathek: als Maske mit
   "currentColor". Das hat drei Vorteile - keine zusaetzliche Anfrage, keine
   Datei, die jemand versehentlich loescht, und der Knopf nimmt automatisch die
   Farbe an, die an seiner Stelle richtig ist.

   Der Link traegt sichtbar das Wort "Instagram". Ein reines Symbol muesste den
   Namen fuer Vorlesegeraete nachreichen - mit sichtbarer Beschriftung ist der
   Knopf fuer alle gleich verstaendlich, und das Symbol bleibt reine Zutat. */

.asc-instagram { margin: 1.2rem 0 0; }

/* Umriss statt Flaeche - und zwar aus einem handfesten Grund, nicht aus
   Geschmack: Der Fussbereich setzt seine Schrift mit
       .asc-footer :is(h1, h2, h3, h4, p, li, a) { color: #fff !important; }
   auf Weiss. Eine weisse Flaeche mit roter Schrift waere daran nur mit einem
   zweiten "!important" vorbeizubekommen. Ein weisser Umriss mit weisser
   Schrift nimmt die vorhandene Farbe einfach an - kein Wettstreit, und der
   Knopf sieht aus wie "Mitglied werden" oben in der Kopfleiste. */
.asc-instagram a {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .5rem 1.15rem .5rem .95rem;
	border: 1.5px solid currentColor;
	border-radius: var(--asc-radius-pill);
	background: transparent;
	/* Ohne das faerbt WordPress den Verweis mit
	   "a:where(:not(.wp-element-button)) { color: primary }" rot - und rot auf
	   rot ist in Kopfleiste und Fussbereich schlicht unsichtbar. "inherit"
	   nimmt stattdessen die Farbe der Umgebung, also weiss. */
	color: inherit;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background .15s ease;
}

.asc-instagram a:hover,
.asc-instagram a:focus-visible {
	background: rgb(255 255 255 / 16%);
	text-decoration: none;
}

/* Das Symbol als Maske: Es faerbt sich mit "currentColor" von selbst richtig
   ein - im roten Fussbereich weiss, ueberall sonst in der Textfarbe. */
.asc-instagram a::before {
	content: "";
	width: 1.15em;
	height: 1.15em;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--asc-instagram-symbol) center / contain no-repeat;
	mask: var(--asc-instagram-symbol) center / contain no-repeat;
}

.asc-instagram {
	--asc-instagram-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* --- Aushang ("Save the date") --------------------------------------------

   Ein Aushang mit Datum: Er steht eine Weile auf der Startseite und muss
   danach wieder verschwinden. Deshalb eine eigene Klasse, an der das Werkzeug
   "asc Aushang" den Abschnitt spaeter zuverlaessig wiederfindet und ihn
   herausnimmt, ohne den Rest der Startseite anzufassen.

   Sie heisst "asc-aushang" und nicht "asc-hinweis": Letztere gibt es schon
   fuer redaktionelle Anmerkungen im Fliesstext ("Noch zu ergaenzen: ...").
   Zwei verschiedene Dinge duerfen nicht denselben Namen tragen - sonst
   greift eines Tages eine Regel dorthin, wo sie nicht gemeint war.

   Das Plakat ist 594 x 794 Pixel gross. Breiter als das darf es nicht
   dargestellt werden, sonst wird es hochgerechnet und unscharf - daher die
   Deckelung auf 22rem (352 px) statt einer Spaltenbreite. */

.asc-aushang__bild img {
	max-width: 22rem;
	width: 100%;
	height: auto;
	border-radius: var(--asc-radius);
	box-shadow: 0 12px 30px rgb(0 0 0 / 12%);
}

.asc-aushang__zeit {
	list-style: none;
	padding: 0;
	margin: 0 0 1.4rem;
	display: grid;
	gap: .45rem;
	font-size: 1.05rem;
}

.asc-aushang__zeit li {
	padding-left: 1.6rem;
	position: relative;
}

.asc-aushang__zeit li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

@media (max-width: 46rem) {
	.asc-aushang__bild img { max-width: 16rem; }
}

/* --- Instagram in der Kopfleiste ------------------------------------------

   Derselbe Verweis wie im Fussbereich, hier aber nur als Symbol. Grund ist
   schlicht der Platz: Bei 1200 Pixeln - der Breite, ab der alle sieben
   Menuepunkte in eine Zeile passen - blieben in der Leiste gemessen rund
   5 Pixel uebrig. Ein beschrifteter Knopf braucht 133.

   Der Platz fuer das Symbol kommt deshalb nicht "von irgendwo", sondern aus
   drei bewusst etwas engeren Abstaenden: dem Abstand zwischen den
   Menuepunkten, dem zwischen Menue und Knopf und der Polsterung von "Mitglied
   werden". Zusammen ergibt das genug, ohne dass die Leiste frueher umbricht.

   Das Wort "Instagram" bleibt im Quelltext stehen und wird nur aus dem
   sichtbaren Bereich geschoben (text-indent). Damit hat der Verweis fuer
   Vorlesegeraete weiterhin einen Namen - anders als bei einem Symbol ohne
   Text, das dort nur als "Link" angesagt wuerde. "display: none" oder
   "font-size: 0" waeren hier falsch: Beides nimmt den Namen wieder weg. */

@media (min-width: 1200px) {
	.asc-header .wp-block-navigation__container { gap: .95rem; }
}

.asc-header__end { gap: 1rem; }

.asc-instagram--symbol { margin: 0; }

/* Das Symbol erscheint erst ab 1240px - und zwar aus gemessenen Gruenden:

   In der Leiste sitzen Logo, Schriftzug, sieben Menuepunkte und der Knopf
   "Mitglied werden". Bei 1200px, wo das ausgeklappte Menue beginnt, blieben
   davon null Pixel uebrig; bei 1240px sind es 28.

   Schmaler wird es NICHT einfach eingeblendet, obwohl dort scheinbar Platz
   ist. Auf dem Handy schiebt der Flex-Kasten den Mangel naemlich nicht vor
   sich her, sondern staucht das Vereinslogo: gemessen von 42 auf 32 Pixel bei
   375px Breite und auf 17 bei 360px. Das faellt in keiner Ueberlaufpruefung
   auf und sieht trotzdem falsch aus.

   Auf schmalen Schirmen uebernimmt deshalb der Menueeintrag weiter unten -
   und im Fussbereich steht der Knopf ohnehin auf jeder Seite. */
.asc-header .asc-instagram--symbol { display: none; }

@media (min-width: 1240px) {
	.asc-header .asc-instagram--symbol { display: block; }
}

/* Derselbe Verweis noch einmal als Menuepunkt - sichtbar nur dort, wo das
   Menue eingeklappt ist. Im ausgeklappten Menue waere er doppelt (das Symbol
   steht dann daneben) und wuerde ausserdem Breite kosten, die die Leiste
   nicht hat. */
@media (min-width: 1200px) {
	.asc-header .wp-block-navigation .asc-nav-instagram { display: none; }
}

.asc-header .asc-instagram--symbol a {
	position: relative;
	display: block;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	gap: 0;
	border: 0;
	border-radius: 50%;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

/* Das Symbol liegt absolut - sonst wuerde "text-indent" es mitverschieben. */
.asc-header .asc-instagram--symbol a::before {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.3rem;
	height: 1.3rem;
}

.asc-header .asc-instagram--symbol a:hover,
.asc-header .asc-instagram--symbol a:focus-visible {
	background: rgb(255 255 255 / 20%);
}

/* --- Vereinsname im Fussbereich -------------------------------------------

   Hier stand eine Ausnahme mit "!important", die den Namen schwarz auf dem
   Rot hielt - gegen die gemeinsame Umkehrung fuer alle roten Flaechen:

       .asc-footer :is(h1, h2, h3, h4, p, li, a) { color: #fff !important; }

   Die Ausnahme ist weg. Der Verein hat fuer sein Zeichen auf rotem Grund
   Weiss festgelegt, und der Schriftzug folgt dem Zeichen. Damit greift wieder
   die Regel oben, ganz ohne Sonderfall: Weiss auf #ae0000 sind 7,50:1, die
   schwarze Fassung kaeme auf 2,78:1 und laege damit unter jeder Schwelle. */

/* --- Suche ---------------------------------------------------------------
   Zwei Orte, eine Gestaltung: das Band auf der Startseite und das Feld ueber
   den Treffern. Beide benutzen dieselben Klassen, damit die Suche ueberall
   gleich aussieht.

   Zum Rahmen: Der Kern zeichnet das Feld mit "#949494", das Theme benutzt
   sonst "--border" (#e2e2e2). Beides scheidet hier aus. #e2e2e2 hat gegen den
   grauen Grund des Bandes einen Kontrast von 1,10:1 und gegen Weiss 1,30:1 -
   die Umrandung eines Bedienelements braucht nach WCAG 1.4.11 aber 3:1, sonst
   ist gar nicht zu sehen, wo das Feld anfaengt. "--muted" (#5e5e5e) kommt auf
   5,3:1 gegen das Band und 6,5:1 gegen Weiss. */

.asc-suche > h2 { margin-top: 0; }

/* Keine eigene max-width: Der Absatz steht ohnehin in der Textspalte, und
   jede engere Begrenzung wuerde ihn im Constrained-Layout mittig stellen -
   also gegenueber Ueberschrift und Suchfeld um die halbe Differenz
   eingerueckt. */
.asc-suche__text {
	color: var(--wp--preset--color--muted);
}

/* Breiter als noetig soll das Feld nicht werden - aber die Begrenzung gehoert
   an die innere Huelle, nicht an den Block selbst.
   Der Grund: Im Constrained-Layout bekommt jedes Kind "max-width: contentSize"
   und "margin-inline: auto !important". Ein schmalerer Block wird darin
   mittig gestellt und stuende dann gegenueber Ueberschrift und Text 80 Pixel
   eingerueckt; "margin-inline: 0" wiederum schoebe ihn ganz an den Seitenrand,
   224 Pixel VOR die Ueberschrift. Gemessen bei 1280 Pixeln Fensterbreite.
   Bleibt der Block auf voller Textbreite und wird nur seine Huelle begrenzt,
   beginnt das Feld genau dort, wo auch die Ueberschrift beginnt. */
.wp-block-search.asc-suche__feld .wp-block-search__inside-wrapper {
	max-width: 34rem;
	padding: 4px;
	border: 1px solid var(--wp--preset--color--muted);
	background: var(--wp--preset--color--background);
}

.wp-block-search.asc-suche__feld .wp-block-search__input {
	padding: .55rem .7rem;
	background: none;
	color: var(--wp--preset--color--foreground);
	/* Ohne das erben Formularfelder die Systemschrift statt der Theme-Schrift,
	   und unter 16px zoomt Safari auf dem iPhone beim Antippen hinein. */
	font: inherit;
	font-size: 1rem;
}
.wp-block-search.asc-suche__feld .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/* Der Knopf sitzt im Feld; die 1,9rem Polsterung der grossen Seitenknoepfe
   waeren dort zu viel. */
.wp-block-search.asc-suche__feld .wp-block-search__button {
	padding: .6rem 1.2rem;
	font-size: .95rem;
}

/* Der Fokusring gehoert um das ganze Feld, nicht um das Eingabefeld im
   Inneren - sonst laege er unter dem Knopf und waere halb verdeckt. */
.wp-block-search.asc-suche__feld .wp-block-search__input:focus-visible {
	outline: none;
}
.wp-block-search.asc-suche__feld .wp-block-search__inside-wrapper:has(.wp-block-search__input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--primary);
}

/* --- Schnellverweise ------------------------------------------------------
   Die vier haeufigsten Ziele als Etiketten. Sie stehen in einem ganz normalen
   Absatz, damit der Verein sie im Editor aendern kann; die Optik macht allein
   das CSS. */

.asc-suche__schnell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .6rem;
	margin-top: var(--wp--preset--spacing--40);
	font-size: .95rem;
}
.asc-suche__schnell strong {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}
/* Rahmen in Vereinsrot, nicht in "--border": Die Etiketten stehen einmal auf
   dem grauen Band und einmal auf Weiss. #e2e2e2 kommt dort auf 1,10:1 bzw.
   1,30:1 - man saehe die Kapsel schlicht nicht. Rot liegt bei 6,18:1 und
   7,50:1 und ist ausserdem die Form, die das Theme fuer Umriss-Knoepfe schon
   benutzt. */
.asc-suche__schnell a {
	padding: .35rem .85rem;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--asc-radius-pill);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
}
.asc-suche__schnell a:hover,
.asc-suche__schnell a:focus-visible {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

/* --- Die Suche im grossen Bild --------------------------------------------
   Auf der Startseite steht sie IM Hero, unter der Ueberschrift - sichtbar,
   ohne dass jemand scrollen muss. Das Eingabefeld braucht dafuer nichts
   Eigenes: Es ist ohnehin weiss gefuellt und damit auf jedem Foto lesbar.
   Die Etiketten schon.

   Zur Deckkraft: Der Hero dunkelt flaechig nur um 20 % ab, den Rest macht ein
   Verlauf von unten (.asc-hero::after). Auf den Verlauf soll sich die
   Lesbarkeit aber nicht verlassen muessen - er haengt daran, wie hoch der
   Abschnitt im Bild sitzt, und das aendert sich mit jeder Fensterhoehe.
   62 % Schwarz reichen fuer sich genommen: Selbst wenn an dieser Stelle des
   Fotos reines Weiss laege, ergaebe das #616161 und damit 6,2:1 fuer weisse
   Schrift - WCAG verlangt 4,5:1.

   Gebunden an ".asc-hero", nicht an eine eigene Klasse: Wandert die Gruppe im
   Editor aus dem Bild heraus, greift wieder die helle Fassung oben. */

.asc-hero .asc-suche { margin-top: var(--wp--preset--spacing--40); }

.asc-hero .asc-suche__schnell {
	margin-top: var(--wp--preset--spacing--30);
	font-size: .92rem;
}
.asc-hero .asc-suche__schnell a {
	padding: .32rem .8rem;
	border-color: rgb(255 255 255 / 70%);
	background: rgb(1 1 1 / 62%);
	backdrop-filter: blur(3px);
	/* Schlaegt die rote Schrift der hellen Fassung weiter oben: dort (0,2,0),
	   hier (0,3,0). Kein "!important" noetig - und keines gesetzt, damit die
	   Regel spaeter ueberschreibbar bleibt. */
	color: #fff;
}
.asc-hero .asc-suche__schnell a:hover,
.asc-hero .asc-suche__schnell a:focus-visible {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
}

/* --- Trefferliste --------------------------------------------------------- */

.asc-treffer .wp-block-post-template { padding: 0; }
.asc-treffer .wp-block-post-template > li {
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.asc-treffer .wp-block-post-template > li:last-child { border-bottom: 0; }

/* Seiten haben keine Kategorie - dort faellt die Zeile ersatzlos weg, und der
   Titel darf nach oben rutschen. */
.asc-treffer .wp-block-post-terms { margin-bottom: .2rem; }
.asc-treffer .wp-block-post-title { margin-top: 0; }

/* --- Ankuendigungsband ----------------------------------------------------
   Loest den fest eingebauten Aushang ab (siehe .asc-aushang weiter oben). Die
   Optik bleibt dieselbe - Plakat links, Text rechts, pfirsichfarbenes Band -,
   nur der Inhalt kommt jetzt aus dem Inhaltstyp "Ankuendigung".

   Das Layout steht bewusst hier und nicht auf den Spalten-Klassen des Kerns:
   Der Block bringt zwar "wp-block-columns" mit, damit das Markup im Editor
   vertraut aussieht - aber das zugehoerige Stylesheet laedt WordPress nur,
   wenn auf der Seite auch ein echter Spalten-Block steht. Auf einer Startseite
   ohne Spalten faellt das Band sonst in eine einzige Reihe zusammen. */

.asc-ank {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
}
.asc-ank > .wp-block-column {
	flex: 1 1 16rem;
	min-width: 0;
	margin: 0;
}

/* Ankuendigung ohne Plakat: Der Text bekaeme sonst die ganze Bandbreite -
   gemessen 1152 Pixel, rund 150 Zeichen je Zeile. Das liest niemand gern. */
.asc-ank > .wp-block-column:only-child {
	max-width: 46rem;
}

/* Mehrere Ankuendigungen untereinander bekommen eine Trennlinie - ohne sie
   liest sich die zweite wie die Fortsetzung der ersten. */
.asc-ankuendigungen > .asc-ank + .asc-ank {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
}

/* Plakate sind hochformatig und selten gross. Ueber ihre eigene Breite
   hinaus vergroessert werden sie nicht - hochgerechnet wird jedes Plakat
   unscharf, und genau daran erkennt man eine lieblose Website. */
.asc-ank__bild {
	margin: 0;
}
.asc-ank__bild img {
	max-width: 22rem;
	width: 100%;
	height: auto;
	border-radius: var(--asc-radius);
	box-shadow: 0 12px 30px rgb(0 0 0 / 12%);
}

.asc-ank__label {
	margin: 0 0 .4rem;
	color: var(--wp--preset--color--primary);
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.asc-ank__titel {
	margin: 0 0 .6rem;
	text-wrap: balance;
}

.asc-ank__text {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: 1.1rem;
	line-height: 1.6;
}

.asc-ank__knopf { margin: 0; }

/* --- Startbuehne: Hero und Ankuendigungen wechseln sich ab -----------------
   Zusammengesetzt wird erst im Browser (assets/js/buehne.js) - in der
   Datenbank bleibt alles, wie es ist. Faellt das Skript aus, steht die Seite
   wie vorher da: grosses Bild, darunter das Ankuendigungsband.

   Die Klasse am <html> setzt ein winziges Skript im Seitenkopf, noch bevor
   irgendetwas gezeichnet wird. Ohne sie blitzte das Band an seiner alten
   Stelle auf, bevor es in die Buehne wandert. Scheitert der Aufbau, nimmt
   buehne.js die Klasse wieder weg - dann ist das Band einfach wieder da. */

.asc-buehne-js .asc-ankuendigungen { display: none; }

.asc-buehne { position: relative; }

/* Der Hero zieht sich normalerweise selbst unter die Kopfleiste. In der Buehne
   muss das die Buehne tun - sonst risse der Hero ein Loch in ihren oberen
   Rand. Der Selektor muss "body.home main" mitnehmen, um die urspruengliche
   Regel (0,2,2) zu schlagen. */
body.home main .asc-buehne { margin-block-start: calc(-1 * var(--asc-header-h) - 1rem); }
body.home main .asc-buehne .asc-hero { margin-block-start: 0; }

/* Alle Folien liegen im selben Rasterfeld uebereinander. Damit ist die Buehne
   immer so hoch wie ihre hoechste Folie - und der Wechsel laesst die Seite
   NICHT springen. Genau deshalb werden inaktive Folien auch nicht auf
   "display: none" gesetzt: Dann waere die Buehne bei jeder Folie anders hoch,
   und alles darunter huepfte. */
.asc-buehne__bahn { display: grid; }
.asc-buehne__folie {
	grid-area: 1 / 1;
	min-width: 0;
}
.asc-buehne__folie[aria-hidden="true"] {
	visibility: hidden;
	opacity: 0;
}
.asc-buehne.ist-bereit .asc-buehne__folie {
	transition: opacity .45s ease;
}

/* Die Ankuendigungsfolie uebernimmt die Masse des Heros: dieselbe Hoehe,
   dieselbe obere Polsterung, damit nichts unter der Kopfleiste verschwindet.

   Und sie sieht aus wie ein Bild, nicht wie ein Farbband. Das war der Wunsch
   des Vereins: Als pfirsichfarbene Flaeche war sie vom Abschnitt darunter
   ("Gemeinsam stark", ebenfalls pfirsich) kaum zu unterscheiden - zwei gleiche
   Baender hintereinander verschwimmen ineinander, und die Folie las sich wie
   ein Stueck Seite statt wie eine eigene Ansicht.

   Die dunkle Grundfarbe traegt auch dann, wenn eine Ankuendigung gar kein Bild
   hat - dann bleibt es bei ihr. */
.asc-buehne__folie--ank {
	display: grid;
	align-content: center;
	/* Ohne "border-box" zaehlt "min-height" nur den Inhalt, und die 300 Pixel
	   Polsterung kommen obendrauf: gemessen 1128 statt 828 Pixel. Die Buehne
	   waere damit hoeher als der Hero, den sie eigentlich nachbilden soll. */
	box-sizing: border-box;
	min-height: 92vh;
	padding-top: calc(var(--asc-header-h) + var(--wp--preset--spacing--60));
	padding-bottom: var(--wp--preset--spacing--70);
	padding-inline: calc(
		var(--wp--style--root--padding-left) +
		max(0px, (100% - var(--wp--style--global--wide-size)) / 2)
	);
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #2a0a10 0%, var(--wp--preset--color--primary-dark) 100%);
	color: #fff;
}

/* Das Bild der Ankuendigung, gross und weichgezeichnet als Flaeche. Es liegt
   bewusst ueber den Rand hinaus: Ein Weichzeichner rechnet an den Kanten mit
   Nichts und liesse sonst einen helleren Saum stehen. */
.asc-buehne__grund {
	position: absolute;
	inset: -5%;
	/* Ohne die Stapelnummern malt der Browser in Baumreihenfolge, und ein
	   ::before ist der erste Knoten VOR den echten Kindern - der Schleier laege
	   also HINTER dem Bild und dunkelte nichts ab. Genau so war es zuerst. */
	z-index: 0;
	background-position: center;
	background-size: cover;
	filter: blur(28px) saturate(115%);
	transform: scale(1.08);
}

/* Die Abdunklung. 62 % Schwarz sind kein Gefuehlswert: Selbst wenn an dieser
   Stelle des Bildes reines Weiss laege, ergaebe das #616161 und damit 6,2:1
   fuer weisse Schrift - WCAG verlangt 4,5:1. Damit haengt die Lesbarkeit
   nicht davon ab, welches Plakat der Verein hochlaedt. */
.asc-buehne__folie--ank.hat-grund::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgb(1 1 1 / 62%);
}

.asc-buehne__folie--ank > .asc-ank {
	position: relative;
	z-index: 2;
}

/* Schrift auf dunklem Grund. Die Kennzeichnung ("Save the date") stand in
   Vereinsrot - auf Dunkel kaeme sie auf 2,5:1 und waere kaum zu lesen. */
.asc-buehne__folie--ank .asc-ank__label { color: #fff; opacity: .85; }
.asc-buehne__folie--ank .asc-ank__titel,
.asc-buehne__folie--ank .asc-ank__text { color: #fff; }

/* Das Plakat bekommt einen weissen Rand - sonst franst ein Bild mit dunklen
   Raendern in den dunklen Grund aus. */
.asc-buehne__folie--ank .asc-ank__bild img {
	border: 4px solid #fff;
	box-shadow: 0 18px 44px rgb(0 0 0 / 45%);
}
/* Auf dem Handy bekommen die Folien EIGENE Hoehen.
   
   Der Grund: Nebeneinander ist dort kein Platz, das Plakat rutscht ueber den
   Text, und die Ankuendigungsfolie wird 957 statt 536 Pixel hoch. Weil alle
   Folien im selben Rasterfeld liegen, zoege sie den Hero mit - und der ist auf
   dem Handy mit Absicht nur 66vh hoch: Bei mehr schneidet der Ausschnitt vom
   16:9-Bild fast nur noch Rasen heraus (siehe .asc-hero weiter oben).
   
   Mit "display: none" ist die Buehne so hoch wie die gerade sichtbare Folie.
   Dafuer springt die Seitenhoehe beim Blaettern - deshalb laeuft auf dem Handy
   auch nichts von selbst weiter (buehne.js), sondern nur auf Fingerdruck. Ein
   Sprung, den man selbst ausgeloest hat, ueberrascht niemanden. */
@media (max-width: 37.5rem) {
	.asc-buehne__folie[aria-hidden="true"] { display: none; }
	.asc-buehne__folie--ank {
		min-height: 66vh;
		padding-top: calc(var(--asc-header-h) + var(--wp--preset--spacing--40));
		padding-bottom: var(--wp--preset--spacing--50);
	}
}

/* In der Buehne steht die Ankuendigung fuer sich - der Trennstrich zwischen
   mehreren gehoert ins Band, nicht hierher. */
.asc-buehne__folie--ank > .asc-ank { margin: 0; padding: 0; border: 0; }

/* --- Steuerung ------------------------------------------------------------
   Unten rechts, weil die Ueberschrift des Heros unten links steht.

   Weisse Kapseln mit dunklem Zeichen: Die Knoepfe stehen mal auf einem Foto,
   mal auf dem grauen Band. Eine Farbe, die auf beidem sitzt, gibt es nicht -
   eine weisse Flaeche schon. Schwarz auf Weiss sind 20:1, und die weisse
   Flaeche selbst hebt sich von beidem ab. */

.asc-buehne__steuerung {
	position: absolute;
	right: calc(
		var(--wp--style--root--padding-right) +
		max(0px, (100% - var(--wp--style--global--wide-size)) / 2)
	);
	bottom: var(--wp--preset--spacing--50);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.asc-buehne__knopf {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
	box-shadow: 0 4px 14px rgb(1 1 1 / 18%);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.asc-buehne__knopf:hover,
.asc-buehne__knopf:focus-visible {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: #fff;
}
.asc-buehne__knopf--pause { width: 2.25rem; height: 2.25rem; }

.asc-buehne__zaehler {
	margin: 0 0 0 .25rem;
	padding: .35rem .7rem;
	border-radius: var(--asc-radius-pill);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	font-size: .85rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 4px 14px rgb(1 1 1 / 18%);
}

@media (prefers-reduced-motion: reduce) {
	.asc-buehne.ist-bereit .asc-buehne__folie { transition: none; }
	/* Wer weniger Bewegung eingestellt hat, bekommt ohnehin keinen Selbstlauf.
	   Blaettert er selbst, soll auch der Rahmen nicht gleiten. */
	.asc-buehne--zweispaltig .asc-buehne__bahn { transition: none; }
}

/* --- Suche in der Kopfleiste ----------------------------------------------
   Eingesetzt wird sie von assets/js/kopfsuche.js - die Kopfleiste kommt aus
   der Datenbank, dorthin reicht keine Theme-Datei mehr. Die Gestaltung steht
   trotzdem hier, damit sie mit dem Rest der Seite gepflegt wird.

   Aufgeklappt statt dauerhaft sichtbar: In der Leiste ist kein Platz fuer ein
   Eingabefeld, gemessen bleiben bei 1280 Pixeln keine 200 uebrig. */

/* "flex: none" an beiden Enden: Die Leiste ist "nowrap", also verteilt sie
   Platzmangel auf alle Kinder. Ohne die Sperre schrumpfte das Logo durch die
   Lupe von 42 auf 34 Pixel - gemessen bei 375 Pixeln Fensterbreite. Das Logo
   ist das Letzte, was kleiner werden darf. */
.asc-header__brand { flex: 0 0 auto; }
.asc-kopfsuche { position: relative; display: flex; align-items: center; flex: 0 0 auto; }

.asc-kopfsuche__knopf {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 55%);
	border-radius: 50%;
	background: none;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.asc-kopfsuche__knopf:hover,
.asc-kopfsuche__knopf[aria-expanded="true"] {
	border-color: #fff;
	background: #fff;
	color: var(--wp--preset--color--primary);
}

/* Das Feld haengt unter der Leiste, rechtsbuendig unter dem Knopf. Es sitzt
   INNERHALB der roten Pille (die ist position: relative), damit es beim
   Scrollen mitgeht und nicht irgendwo stehen bleibt. */
.asc-kopfsuche__feld {
	position: absolute;
	top: calc(100% + .85rem);
	right: 0;
	z-index: 20;
	width: min(22rem, calc(100vw - 3rem));
	padding: .75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--asc-radius);
	background: var(--wp--preset--color--background);
	box-shadow: 0 16px 40px rgb(1 1 1 / 22%);
}
.asc-kopfsuche__feld form { display: flex; gap: .5rem; }

.asc-kopfsuche__feld input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: .55rem .7rem;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--asc-radius-button);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	/* Ohne das erben Formularfelder die Systemschrift statt der Theme-Schrift,
	   und unter 16px zoomt Safari auf dem iPhone beim Antippen hinein. */
	font: inherit;
	font-size: 1rem;
}

.asc-kopfsuche__senden {
	padding: .55rem 1rem;
	border: 0;
	border-radius: var(--asc-radius-button);
	background: var(--wp--preset--color--primary);
	color: #fff;
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.asc-kopfsuche__senden:hover { background: var(--wp--preset--color--primary-dark); }

/* Auf schmalen Bildschirmen spannt das Feld ueber die ganze Leiste.
   Rechtsbuendig unter der Lupe ragte es sonst links aus dem Bild: Die Lupe
   sitzt dort in der Mitte der Leiste, das Feld ist 353 Pixel breit - gemessen
   begann es bei -179. Mit "position: static" an der Huelle wird die rote
   Pille selbst zum Bezugsrahmen (die ist position: relative). */
@media (max-width: 60rem) {
	.asc-kopfsuche { position: static; }
	.asc-kopfsuche__feld {
		left: 0;
		right: 0;
		width: auto;
	}
}

/* --- Startbuehne, zweispaltig ---------------------------------------------
   Text links (steht fest), Bildrahmen rechts (wechselt) - statt Bild im
   Vollbild mit Schrift darauf.

   Der Grund war messbar, nicht nur Geschmack: Im Vollbild-Hero wurde das
   Startbild auf 51 % seiner Breite beschnitten UND um Faktor 1,97
   hochgerechnet. Eingefasst passiert das Gegenteil - es wird auf etwa 0,43
   verkleinert, und verkleinerte Bilder sind immer scharf.

   Gewechselt wird nur im Rahmen. Die Begruessung gilt immer, die Ankuendigung
   wechselt - deshalb steht die Textspalte NEBEN der Bahn und nicht darin.

   Alles hier haengt an ".asc-buehne--zweispaltig". Die Klasse setzt buehne.js
   nur, wenn es den Begruessungstext gibt. Ohne ihn - und ohne JavaScript -
   bleibt der Hero, wie er war. */

/* Das Band traegt die Farbe und laeuft von Rand zu Rand.

   Frueher stand hier ein Rosaton (Vereinsrot bei 7 % auf Weiss, #fdf0f2).
   Die Vereinsfarben sind Rot, Weiss und Schwarz - andere Farben laesst die
   CI nicht zu. Also traegt die Flaeche jetzt dasselbe neutrale Hellgrau wie
   die uebrigen abgesetzten Abschnitte. Gemessen darauf: Schwarz 18,7:1, die
   graue Fliesstextfarbe 5,8:1, Vereinsrot 6,7:1. */
.asc-buehne-band { background: var(--wp--preset--color--tertiary); }
body.home main .asc-buehne-band {
	/* Nicht mehr unter die Kopfleiste ziehen: Die rote Pille schwebte sonst
	   ueber der Farbflaeche statt ueber dem Foto. */
	margin-block-start: 0;
	padding-block: var(--wp--preset--spacing--60);
}

.asc-buehne--zweispaltig {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	align-items: center;
	/* Nur SPALTENabstand. "gap" allein gilt auch fuer Zeilen, und die
	   Steuerung steht in einer zweiten Zeile - sie rutschte damit 80 Pixel
	   unter den Rahmen und schwebte im Leeren. Ihren eigenen Abstand bringt
	   sie selbst mit. */
	gap: 0 var(--wp--preset--spacing--60);
	max-width: none;
}

/* Die Buehne darf sich im Band NICHT mehr unter die Kopfleiste ziehen.
   Die Regel dafuer gilt weiter fuer die randlose Fassung; hier wuerde sie die
   Buehne um 108 Pixel nach oben holen - gemessen begann sie 28 Pixel oberhalb
   ihres eigenen Bandes, die obere Polsterung war damit aufgezehrt und das Bild
   klebte an der Kopfleiste. */
body.home main .asc-buehne--zweispaltig { margin-block-start: 0; }

.asc-buehne--zweispaltig .asc-buehne__text { order: 1; }

/* Der Rahmen. Er gibt die Form vor, die Folien darin fuellen ihn aus. */
.asc-buehne--zweispaltig .asc-buehne__bahn {
	order: 2;
	aspect-ratio: 4 / 3;
	border-radius: var(--asc-radius);
	overflow: hidden;
	/* Waagerechtes Wischen wertet das Skript aus, senkrechtes gehoert der
	   Seite. Ohne diese Zeile verschluckt der Rahmen das Scrollen. */
	touch-action: pan-y;
}
.asc-buehne--zweispaltig .asc-buehne__folie { min-height: 0; height: 100%; }

/* Das Bild. Das "!important" beim Seitenverhaeltnis muss sein - der
   Blockeditor schreibt "aspect-ratio: unset" als Inline-Stil an die Cover,
   und Inline schlaegt jede Regel ohne Vorrang. */
.asc-buehne--zweispaltig .asc-hero {
	min-height: 0 !important;
	height: 100%;
	padding: 0 !important;
	aspect-ratio: auto !important;
}
/* Die Groessenangaben stehen hier, weil WordPress sein Cover-Stylesheet auf
   dieser Seite nicht mitliefert - siehe die Erklaerung bei .asc-hero::after. */
.asc-buehne--zweispaltig .asc-hero .wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Ohne Schrift auf dem Bild braucht es weder Verlauf noch Abdunklung. */
.asc-buehne--zweispaltig .asc-hero::after { background: none; }
.asc-buehne--zweispaltig .asc-hero .wp-block-cover__background { opacity: .06; }

/* --- Die Ankuendigung im Rahmen -------------------------------------------
   Eigenes, flaches Markup aus buehne.js: Grundflaeche, Plakat, Beschriftung.
   Warum nicht das Spalten-Markup der grossen Fassung, steht dort im Skript. */

/* Die Vollbild-Regeln von ".asc-buehne__folie--ank" gelten sonst mit: Raster
   mit zentriertem Inhalt, 92vh Mindesthoehe und 300 Pixel Polsterung. Im
   Rahmen ergab das eine Folie, in der die Ankuendigung auf Hoehe 0 zusammenfiel
   und die Beschriftung ueber dem Plakat landete. */
.asc-buehne--zweispaltig .asc-buehne__folie--ank {
	display: block;
	align-content: normal;
	min-height: 0;
	padding: 0;
	background: none;
	border-radius: 0;
}

.asc-rahmen-ank {
	position: relative;
	height: 100%;
	background: linear-gradient(160deg, #2a0a10 0%, var(--wp--preset--color--primary-dark) 100%);
	color: #fff;
}

/* Das Plakat sitzt vollstaendig im Rahmen - "contain", nicht "cover".
   Ein Plakat anzuschneiden hiesse, seine Schrift anzuschneiden.

   Die Huelle spannt den Platz auf, das Bild fuellt ihn. Warum nicht direkt am
   Bild: siehe die Begruendung in buehne.js - bei einem Bild meint "width:
   100%" den Elternkasten und nicht den durch inset aufgespannten Rahmen. */
.asc-rahmen-ank__bild {
	position: absolute;
	/* Der untere Wert haelt genau so viel frei, wie die Beschriftung hoch ist.
	   Vorher waren es 7,5rem bei 212 Pixeln Beschriftung - sie lag dadurch
	   ueber dem unteren Drittel des Plakats, und dort steht auf dem Plakat
	   das Datum. */
	inset: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 9rem;
	z-index: 2;
}
/* Zwei Klassen im Selektor, nicht eine: Die Regel ".wp-block-post-content img"
   weiter oben setzt "height: auto" und ist mit (0,2,0) staerker als eine
   einzelne Klasse. Das Plakat blieb dadurch auf seiner natuerlichen Hoehe -
   gemessen 766 Pixel in einem 318er Kasten. */
.asc-rahmen-ank__bild .asc-rahmen-ank__plakat {
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: contain;
	border: 0;
	border-radius: 4px;
	filter: drop-shadow(0 10px 22px rgb(0 0 0 / 42%));
}

/* Die Beschriftung unten auf einem Verlauf - lesbar auch dann, wenn das
   Plakat bis nach unten hell ist. */
.asc-rahmen-ank__text {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	padding: 1.6rem var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	background: linear-gradient(to top, rgb(1 1 1 / 82%) 0%, rgb(1 1 1 / 58%) 60%, transparent 100%);
	text-align: center;
}
.asc-rahmen-ank__text .asc-ank__label {
	margin: 0 0 .15rem;
	color: #fff;
	opacity: .85;
	font-size: .72rem;
}
.asc-rahmen-ank__text .asc-ank__titel {
	margin: 0 0 .3rem;
	color: #fff;
	font-size: 1.3rem;
	line-height: 1.2;
}
/* Auf zwei Zeilen begrenzt. Vorlesegeraete lesen trotzdem alles vor -
   "line-clamp" verbirgt nur optisch. Die vollstaendigen Angaben stehen im
   Alternativtext des Plakats und auf der verlinkten Seite. */
/* Eine Zeile, nicht zwei: Auf dem Plakat stehen dieselben Angaben noch
   einmal, und im Rahmen ist der Platz knapp. Vorlesegeraete lesen den Text
   trotzdem vollstaendig vor - "line-clamp" verbirgt nur optisch. */
.asc-rahmen-ank__text .asc-ank__text {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 .7rem;
	color: #fff;
	font-size: .9rem;
	line-height: 1.35;
}
/* Weisse Kapsel mit rotem Text - nicht umgekehrt.
   
   Der Knopf sitzt auf dem dunkelroten Rahmen. Als roter Knopf darauf gemessen:
   1,35:1 gegen das untere Ende des Verlaufs. WCAG 1.4.11 verlangt fuer die
   Umrandung eines Bedienelements 3:1 - man sah schlicht nicht, wo der Knopf
   anfaengt. Beim Ueberfahren wurde es grotesk: Die Hover-Farbe war exakt die
   Rahmenfarbe, 1,00:1, der Knopf verschwand und nur die Schrift blieb stehen.
   
   Weiss loest beides: 10,1:1 gegen das untere Ende, 18,3:1 gegen das obere,
   und der dunkelrote Text darauf ebenfalls 10,1:1. Dieselbe Logik wie bei den
   Pfeil- und Pausenknoepfen der Buehne, die aus demselben Grund weiss sind. */
.asc-rahmen-ank__knopf {
	display: inline-block;
	padding: .45rem 1.1rem;
	border-radius: var(--asc-radius-button);
	background: #fff;
	color: var(--wp--preset--color--primary-dark) !important;
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.asc-rahmen-ank__knopf:hover {
	background: var(--wp--preset--color--primary);
	color: #fff !important;
}

/* --- Die Textspalte -------------------------------------------------------- */

.asc-willkommen__kicker {
	margin: 0 0 .6rem;
	color: var(--wp--preset--color--primary);
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Jede Angabe mit "!important": Die Ueberschrift kam aus dem Cover-Block und
   traegt von dort Inline-Stile fuer Groesse, Zeilenhoehe, Farbe und Abstand.
   Inline schlaegt jede Regel ohne Vorrang - ohne das blieb sie bei 4,25rem
   und brach in der halben Spalte auf vier Zeilen um. */
.asc-buehne__titel {
	margin: 0 0 .9rem !important;
	font-size: clamp(1.9rem, 2.6vw, 2.5rem) !important;
	line-height: 1.1 !important;
	font-weight: 500;
	color: var(--wp--preset--color--foreground) !important;
	text-wrap: balance;
}

.asc-willkommen__text {
	margin: 0 0 1.4rem;
	max-width: 34rem;
	color: var(--wp--preset--color--muted);
	font-size: 1.12rem;
	line-height: 1.6;
}

/* Die Kennzahlen. Bewusst eine Liste: Es sind Angaben ueber den Verein, keine
   Dekoration - Vorlesegeraete sollen sie als Aufzaehlung ankuendigen. */
.asc-willkommen__zahlen {
	display: flex;
	flex-wrap: wrap;
	gap: 1.8rem;
	margin: 0 0 1.8rem;
	padding: 0;
	list-style: none;
	font-size: .95rem;
	color: var(--wp--preset--color--muted);
}
.asc-willkommen__zahlen li { padding: 0; border: 0; }
.asc-willkommen__zahlen strong {
	display: block;
	color: var(--wp--preset--color--foreground);
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1.1;
}

.asc-willkommen__knoepfe { margin: 0; }

/* Die Steuerung sitzt jetzt unter dem Rahmen, nicht mehr im Bild. */
/* "order: 3" muss sein: Ohne Angabe steht die Steuerung bei 0 und damit VOR
   Text (1) und Rahmen (2) - sie landete oben rechts ueber dem Bild. */
.asc-buehne--zweispaltig .asc-buehne__steuerung {
	position: static;
	order: 3;
	grid-column: 2;
	justify-content: flex-end;
	margin-top: var(--wp--preset--spacing--30);
}

/* --- Punkte unter dem Rahmen ----------------------------------------------
   Auf dem Desktop verborgen - dort gibt es Pfeile, Pause und Zaehler. Auf dem
   Handy sind sie die einzige sichtbare Bedienung; gewischt wird direkt auf dem
   Bild. Sie zeigen zugleich an, dass es ueberhaupt mehr als ein Bild gibt. */

.asc-buehne__punkte { display: none; }

.asc-buehne__punkt {
	width: .7rem;
	height: .7rem;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 28%, transparent);
	cursor: pointer;
	/* Die sichtbare Flaeche ist klein, die antippbare nicht: WCAG 2.5.8
	   verlangt 24 x 24 Pixel. Die Polsterung liefert sie, ohne dass der Punkt
	   groesser aussieht. */
	box-sizing: content-box;
	padding: .55rem;
	background-clip: content-box;
	transition: background-color .15s ease;
}
/* "background-color", nicht "background": Die Kurzschrift setzt alle
   Hintergrund-Eigenschaften zurueck, auch das "background-clip: content-box"
   von oben. Der aktive Punkt fuellte dadurch seine ganze Tastflaeche aus und
   war 29 statt 11 Pixel gross - neben dem kleinen zweiten Punkt sah das aus
   wie zwei verschiedene Bedienelemente. */
.asc-buehne__punkt[aria-current="true"] { background-color: var(--wp--preset--color--primary); }

/* --- Auf dem Handy untereinander ------------------------------------------
   Nebeneinander bliebe fuer beides zu wenig: Das Bild waere 160 Pixel breit,
   der Text braeche nach jedem zweiten Wort um. Bild oben, Text darunter -
   in dieser Reihenfolge, weil das Bild der Aufhaenger ist. */
@media (max-width: 50rem) {
	.asc-buehne--zweispaltig {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}

	/* Reihenfolge: Punkte, Bild, Text.

	   Die Bedienung stand zuerst hinter dem ganzen Textblock, fast 500 Pixel
	   unter dem Bild - dort bringt sie niemand damit in Verbindung. Danach
	   stand sie direkt unter dem Bild, und das ging gut, solange nur auf
	   Fingerdruck gewechselt wurde.

	   Seit die Buehne auch auf dem Handy von selbst weiterschaltet, geht es
	   nicht mehr: Foto und Plakat sind verschieden hoch, gemessen 209 gegen
	   655 Pixel. Alles UNTER dem Rahmen ruecke also alle drei Sekunden um 446
	   Pixel auf und ab - ein Ziel, das wegspringt, waehrend man danach tippt.
	   Die Oberkante des Rahmens steht dagegen still. Darum sitzt die Bedienung
	   jetzt darueber: immer an derselben Stelle, immer im Blick, ohne zu
	   scrollen. */
	.asc-buehne--zweispaltig .asc-buehne__punkte {
		order: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .1rem;
		margin-bottom: calc(-1 * var(--wp--preset--spacing--20));
	}
	.asc-buehne--zweispaltig .asc-buehne__bahn { order: 2; }

	/* Der Pausenknopf stellt sich zu den Punkten - das Skript haengt ihn
	   dorthin um, weil die Leiste mit Pfeilen und Zaehler hier ausgeblendet
	   ist. Er bleibt sichtbar, weil WCAG 2.2.2 fuer alles, was sich von selbst
	   bewegt, eine angeschriebene Moeglichkeit zum Anhalten verlangt. Ein
	   Wisch haelt zwar auch an, aber das weiss niemand vorher. */
	.asc-buehne--zweispaltig .asc-buehne__punkte .asc-buehne__knopf--pause {
		margin-left: .45rem;
	}
	.asc-buehne--zweispaltig .asc-buehne__text { order: 3; }

	/* Pfeile, Pause und Zaehler entfallen - gewischt wird auf dem Bild, und
	   die Punkte bleiben als Bedienung mit einem Antippen. */
	.asc-buehne--zweispaltig .asc-buehne__steuerung { display: none; }

	/* Die Bahn gibt keine feste Form mehr vor: Ein Querformat-Rahmen laesst
	   von einem hochkanten Plakat nur einen Streifen uebrig - gemessen 49
	   Pixel Hoehe, darauf war nichts zu erkennen. Stattdessen bestimmt jede
	   Folie ihre Hoehe selbst.

	   Die Hoehe der Bahn setzt das Skript auf die der sichtbaren Folie (siehe
	   buehne.js). Deshalb steht hier ein Uebergang: Beim Wechsel liegen rund
	   450 Pixel zwischen Foto und Plakat, und die springt der Rahmen sonst in
	   einem Satz. So waechst er stattdessen mit.

	   "align-self: start" gehoert dazu - ohne das zoege das Raster jede Folie
	   auf die Hoehe der hoechsten, und unter dem Foto klaffte eine Luecke.
	   "display: none" fuer die verborgene Folie waere hier falsch: Dann gaebe
	   es keine Ueberblendung, und der Beobachter im Skript koennte ihre Hoehe
	   nicht messen, solange sie unsichtbar ist. */
	.asc-buehne--zweispaltig .asc-buehne__bahn {
		aspect-ratio: auto;
		transition: height .45s ease;
	}
	.asc-buehne--zweispaltig .asc-buehne__folie {
		height: auto;
		align-self: start;
	}
	.asc-buehne--zweispaltig .asc-hero { aspect-ratio: 16 / 10 !important; }

	/* Die Ankuendigung untereinander: Plakat gross, Beschriftung darunter -
	   nicht mehr darueber gelegt. Bei 335 Pixeln Breite ist fuer beides
	   nebeneinander kein Platz. */
	.asc-buehne--zweispaltig .asc-rahmen-ank { height: auto; }

	/* Kein Weichzeichner auf dem Handy.
	   
	   Das Plakat fuellt hier fast die ganze Breite - vom weichgezeichneten
	   Grund bleibt nur ein verschmierter Streifen darunter sichtbar, und der
	   sieht nach Fehler aus statt nach Absicht. Die dunkle Grundfarbe der
	   Folie traegt die Flaeche besser. */
	.asc-buehne--zweispaltig .asc-buehne__grund { display: none; }

	/* "relative", nicht "static" - und das ist kein Schoenheitsfehler.
	   
	   Ein statisches Element ignoriert seine Stapelnummer. Plakat und
	   Beschriftung rutschten dadurch in eine Malebene UNTER den absolut
	   gesetzten Grund, und der deckte sie zu. Sichtbar blieb nur, was von
	   sich aus einen eigenen Stapelkontext aufmacht: das Plakat wegen seines
	   Schlagschattens (filter) und die Kennzeichnung wegen ihrer Deckkraft
	   von 0,85. Titel, Datum und Knopf verschwanden - gemessen lag an ihrer
	   Stelle ".asc-buehne__grund" obenauf. */
	.asc-buehne--zweispaltig .asc-rahmen-ank__bild {
		position: relative;
		inset: auto;
		box-sizing: border-box;
		aspect-ratio: 3 / 4;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
	}
	.asc-buehne--zweispaltig .asc-rahmen-ank__text {
		position: relative;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
		background: none;
	}
	.asc-buehne--zweispaltig .asc-rahmen-ank__text .asc-ank__text { -webkit-line-clamp: 3; }

	.asc-willkommen__zahlen { gap: 1.2rem; }
}

/* Ohne Skript steht der Begruessungstext ueber dem Bild in der Seite. Dann
   soll er wenigstens ordentlich sitzen und nicht am Bild kleben. */
.asc-willkommen { margin-bottom: var(--wp--preset--spacing--50); }

/* --- Kaderlisten --------------------------------------------------------- */

/* Die Listen sind Bilder im Hochformat (gemessen 720 x 960 Pixel). Als Kachel
   mit Jahrgang darunter sind sie auf einen Blick auseinanderzuhalten; das
   ganze Blatt lesbar zu zeigen braeuchte die volle Breite mal sechs. */
/* Die neueste Liste steht in voller Breite da - lesbar ohne Klick. 45rem sind
   genau 720 Pixel und damit die Originalbreite des Blattes. Gemessen bei
   46rem: 734 Pixel - das waere eine Vergroesserung ueber die Originalgroesse
   hinaus, und die macht Schrift weich. */
.asc-kader__aktuell {
	max-width: 45rem;
	margin: var(--wp--preset--spacing--40) auto 0;
	text-align: center;
}
.asc-kader__aktuell > a {
	display: block;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--asc-radius);
	overflow: hidden;
}
.asc-kader__aktuell img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}
.asc-kader__aktuell figcaption {
	margin-top: .6rem;
	font-weight: 600;
}

/* Die Kachel des gerade gezeigten Jahrgangs. Der Ring liegt INNEN, sonst
   waechst die Kachel beim Wechsel um zwei Pixel und die Reihe zuckt. Rot auf
   Weiss misst 7,5:1 - deutlich mehr als die 3:1 fuer eine Umrandung. */
.asc-kader__karte[aria-current="true"] {
	border-color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--primary);
}
.asc-kader__karte[aria-current="true"] .asc-kader__titel {
	color: var(--wp--preset--color--primary);
}

/* Die aelteren Jahrgaenge als Kacheln. auto-fill statt fester Spaltenzahl:
   So bleiben die Kacheln gleich gross, egal ob fuenf oder zehn Jahrgaenge
   dastehen. */
/* Dieselbe Bremse wie beim Profilraster: Sollten die WordPress-Layoutklassen
   je wieder am Kachelraster haengen, haengen sie jedem Kind ausser dem ersten
   einen Abstand an - und die erste Kachel faellt aus der Reihe. Den Abstand
   macht hier allein "gap". Zwei Klassen, damit die Regel die Kernregel schlaegt. */
.wp-block-group.asc-kader > * { margin-block: 0; }

.asc-kader {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	/* Seit die Ueberschrift "Jahrgang waehlen" unsichtbar ist, faellt ihr
	   Abstand weg. Den Abstand zur grossen Liste macht jetzt die Reihe
	   selbst - sonst klebte sie am Bild darueber. */
	margin-top: var(--wp--preset--spacing--50);
}
@media (min-width: 34rem) {
	/* auto-FIT, nicht auto-fill: fill laesst leere Spalten stehen, die
	   Kacheln blieben dann bei gemessenen 149 Pixeln stehen, obwohl die
	   Reihe Platz fuer mehr hat. fit verteilt die Breite auf das, was da
	   ist - bei fuenf Jahrgaengen rund 215 Pixel je Kachel. */
	.asc-kader { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}

.asc-kader__karte {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--asc-radius);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.asc-kader__karte:hover,
.asc-kader__karte:focus-visible {
	/* Rot ist die Vereinsfarbe; auf Weiss misst der Rahmen 7,5:1 und damit
	   weit mehr als die 3:1, die eine Umrandung braucht. */
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
}

.asc-kader__bild { display: block; }
.asc-kader__bild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.asc-kader__titel {
	display: block;
	padding: .55rem .7rem .7rem;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.3;
	text-align: center;
}

/* --- Kollektionsseiten ----------------------------------------------------
   Die vier Nike-Seiten kamen als Tabellen aus Joomla. Das Plugin macht daraus
   Spaltenbloecke; hier steht nur, wie die drei Angaben je Spalte aussehen.

   Der Pfeil am Bild faellt weg: Das Theme haengt an jeden Link, der in einem
   neuen Tab oeffnet, ein "↗" als Hinweis. Hinter einem Produktfoto stand der
   Pfeil bisher frei in der Luft - gemessen in der alten Tabelle genauso. Am
   Text darueber bleibt der Hinweis erhalten, wo er etwas nuetzt. */

.asc-kollektion__art {
	margin-bottom: .2rem;
	font-size: 1.05rem;
}
.asc-kollektion__name {
	margin-top: 0;
	color: var(--wp--preset--color--muted);
	font-size: .95rem;
	line-height: 1.45;
}
.asc-kollektion__bild {
	margin-top: .8rem;
}
.asc-kollektion__bild img {
	max-width: 100%;
	height: auto;
}
.asc-kollektion__bild a[target="_blank"]::after { content: none; }

/* --- Seitenkopf mit Foto --------------------------------------------------
   Das Foto liegt HINTER dem Seitentitel statt darunter.

   Vorgeschichte: Zuerst stand das Bild als eigener Block im Seiteninhalt. Auf
   den Trainingszeiten schob es die Tabelle um rund 450 Pixel nach unten - wer
   die Zeiten sehen wollte, musste erst am Foto vorbeiscrollen. Genau das hat
   der Verein beanstandet, und zu Recht: Ein Bild, das den eigentlichen Inhalt
   aus dem Bild schiebt, wirkt hineingezwungen.

   Im Kopfband kostet dasselbe Foto NULL zusaetzliche Hoehe. Die Tabelle
   beginnt genau dort, wo sie vorher begann.

   Zur Deckung von 75 Prozent: Das ist kein Gefuehlswert. Selbst wenn an der
   Stelle des Fotos reines Weiss laege, ergaebe die Mischung mit dem
   Vereinsrot noch 5,1:1 fuer weisse Schrift - WCAG verlangt 4,5:1. Damit
   haengt die Lesbarkeit des Titels nicht davon ab, welches Foto der Verein
   spaeter einsetzt. An den beiden jetzigen Bildern nachgemessen: 5,15:1 und
   5,76:1 im jeweils schlechtesten Pixel des sichtbaren Streifens. */

body.asc-kopfbild .asc-seitenkopf {
	background-image:
		linear-gradient(
			color-mix(in srgb, var(--wp--preset--color--primary) 75%, transparent),
			color-mix(in srgb, var(--wp--preset--color--primary) 75%, transparent)
		),
		var(--asc-kopfbild);
	background-size: cover;
	background-position: center;
}

/* Die Seitenvorlage zeigt das Beitragsbild ausserdem als 16:9-Banner unter
   dem Titel. Auf Seiten waere es damit zweimal da - einmal als Kopfgrund,
   einmal als Banner. Beitraege behalten ihr Banner: Dort ist es das
   Aufmacherbild des Berichts und bleibt unberuehrt.

   Das "main >" ist nicht kosmetisch, sondern der Kern der Regel. Gemeint ist
   AUSSCHLIESSLICH das Beitragsbild der Seite selbst, und das steht in der
   Vorlage direkt in <main>. Ohne diesen Zusatz traf die Regel jedes
   Beitragsbild auf einer Seite - auch die Vorschaubilder in den Newskacheln
   auf der Startseite, denn die Startseite IST eine Seite. Gemessen: drei
   Kacheln mit Bild im Quelltext, alle drei "display: none". Genau das hat
   der Verein am 23. September gemeldet. */
body.page main > .wp-block-post-featured-image { display: none; }

/* --- Bildfolie in der Buehne ----------------------------------------------
   Eine Ankuendigung ohne Kennzeichnung, ohne Text und ohne Link ist keine
   Ankuendigung mehr, sondern ein Bild. Dann faellt auch die Ueberschrift weg
   und es bleibt das Bild.

   Der Unterschied zum Aushang ist kein Geschmack, sondern die Sache selbst:
   Ein Plakat ist hochkant und traegt Schrift, es muss VOLLSTAENDIG zu sehen
   sein ("contain") - ringsum bleibt Flaeche frei, und die traegt der
   weichgezeichnete Grund. Ein Foto hat nichts, was abgeschnitten werden
   koennte; es fuellt den Rahmen wie das Hero-Bild in der ersten Folie
   ("cover"), scharf und randlos. Weichzeichnen wuerde es nur verderben. */

/* ZUERST der Fall ohne Skript: Dann bleibt das Band im Seiteninhalt stehen,
   und das Bild ist dort einfach ein Bild - mittig, auf lesbare Breite
   begrenzt. Diese Regeln stehen vor den Folienregeln, weil beide dieselbe
   Staerke haben (0,2,1) und bei Gleichstand die spaetere gewinnt. Stuenden
   sie danach, holten sie die Begrenzung auf 56rem in die Folie zurueck und
   das Bild fuellte sie nicht mehr aus. */
.asc-ank--nurbild { justify-content: center; }
.asc-ank--nurbild > .wp-block-column:only-child { max-width: none; }
.asc-ank--nurbild .asc-ank__bild { margin-inline: auto; text-align: center; }
.asc-ank--nurbild .asc-ank__bild img {
	max-width: min(100%, 56rem);
	margin-inline: auto;
}

/* Im 4:3-Rahmen neben dem Begruessungstext (der Normalfall). */
.asc-rahmen-ank--nurbild { background: none; }
.asc-rahmen-ank--nurbild .asc-rahmen-ank__bild { inset: 0; }
.asc-rahmen-ank--nurbild .asc-rahmen-ank__bild .asc-rahmen-ank__plakat {
	/* "block", sonst bleibt unter dem Bild der Platz fuer Unterlaengen frei,
	   den jede Textzeile hat - gemessen 9 Pixel. Auf dem Handy wuchs der
	   Rahmen dadurch von 209 auf 218 Pixel, unten stand ein heller Streifen. */
	display: block;
	object-fit: cover;
	border-radius: 0;
	filter: none;
}

/* Auf dem Handy bestimmt jede Folie ihre Hoehe selbst, und der Kasten fuer
   Plakate ist dort hochkant (3:4) mit Innenabstand - richtig fuer ein Plakat,
   falsch fuer ein Foto: gemessen 303 x 431 Pixel mit Rand, ein Hochformat-
   Ausschnitt aus einem Querformat. Die Bildfolie nimmt stattdessen das Format
   des Hero-Bildes an (16:10, randlos). Dann sehen beide gleich aus - und der
   Rahmen springt beim Wechsel zwischen ihnen nicht in der Hoehe. */
@media (max-width: 50rem) {
	.asc-buehne--zweispaltig .asc-rahmen-ank--nurbild .asc-rahmen-ank__bild {
		aspect-ratio: 16 / 10;
		padding: 0;
	}
}

/* Ohne Begruessungstext laeuft die Buehne ueber die volle Breite. Dann fuellt
   das Bild die ganze Folie - genauso wie der Hero es dort tut. */
.asc-buehne__folie--bild {
	padding: 0;
	background: none;
}
.asc-buehne__folie--bild > .asc-ank,
.asc-buehne__folie--bild > .asc-ank > .wp-block-column {
	height: 100%;
	max-width: none;
	margin: 0;
	gap: 0;
}
.asc-buehne__folie--bild .asc-ank__bild { height: 100%; margin: 0; }
.asc-buehne__folie--bild .asc-ank__bild img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* --- Portraets bei den Trainer*innen: Rechteck statt Kreis ----------------
   Wunsch des Vereins vom 23. September 2026: Die Bilder bei Trainer*innen und
   im Gesamtvorstand sollen nicht rund sein, sondern das Trikot mit dem
   asc-Logo zeigen - die Koepfe trotzdem gut sichtbar.

   Fuer den Gesamtvorstand steht das weiter oben im Abschnitt
   "Vorstandsraster": Dort liegen zwei Sorten Bildmaterial nebeneinander, und
   die Karte zeigt jedes Bild deshalb vollstaendig statt es zu beschneiden.

   Auf den Trainerkarten steht nur EINE Sorte - die neuen Aufnahmen. Dort
   darf der Ausschnitt also fest sein: Die Fotos sind im Hochformat 2:3, ein
   Ausschnitt im Verhaeltnis 3:4 zeigt 89 Prozent der Bildhoehe.
   "object-position: 50% 36%" setzt die Oberkante des Ausschnitts auf 4
   Prozent der Bildhoehe. An acht Fotos durchgesehen - Kopf frei, Trikotlogo
   vollstaendig im Bild. */

/* Trainerkarten. Der Kreis war 3,4rem breit - darin waere vom Trikot nichts
   zu erkennen. Das Rechteck ist etwas breiter und deutlich hoeher. */
.asc-profil__avatar {
	/* 5rem und nicht die bisherigen 3,4rem: Bei 61 Pixeln Breite war das
	   asc-Logo auf der Brust rund 12 Pixel gross und nicht mehr zu erkennen.
	   Mit 80 Pixeln sind es 16 - klein, aber lesbar. Breiter wuerde die
	   Kopfzeile der Karte umbrechen. */
	width: 5rem;
	height: 6.67rem;
	border-radius: 10px;
}
.asc-profil__avatar img {
	/* Der Kasten ist ein Flex-Behaelter (wegen des Monogramms derer ohne Foto).
	   Ein Bild darin nimmt seine eigene Hoehe an, wenn man es laesst: gemessen
	   91 Pixel in einem 81er Kasten - die 10 Pixel schnitt "overflow: hidden"
	   unten ab, und vom Trikot blieb nichts uebrig. "align-self: stretch" und
	   die feste Hoehe zwingen es auf die Kastenhoehe, den Rest macht "cover". */
	align-self: stretch;
	flex: 0 0 auto;
	width: 100%;
	height: 100%;
	object-position: 50% 36%;
}
/* Das Monogramm derer ohne Foto bekommt dieselbe Flaeche, sonst springt die
   Kopfzeile der Karte. */
.asc-profil__avatar--mono {
	border-radius: 10px;
	font-size: 1.15rem;
}

/* --- Bilder im Bericht ----------------------------------------------------
   Sie nehmen zu viel Platz. Gemessen im Bericht ueber die Schuelerspiele:
   Die Fotos sind hochkant und laufen auf die volle Spaltenbreite von 700
   Pixeln - daraus werden 933 Pixel Hoehe, mehr als ein Bildschirm. Zwischen
   zwei Absaetzen liegt damit jedes Mal eine ganze Seite Bild, und der Text
   zerfaellt in Schnipsel.

   Die Begrenzung geht ueber die HOEHE, nicht die Breite: Nur so werden
   hochkante Bilder kleiner, ohne dass quer liegende schmal und verloren
   wirken. Bei 26rem ist ein Hochkantfoto noch 312 Pixel breit - gross genug,
   um etwas zu erkennen, klein genug, um den Text zusammenzuhalten.

   Die Bildunterschrift bleibt an der Bildbreite und nicht an der Spalte,
   sonst stuende sie unter einem 312 Pixel breiten Bild ueber 700 Pixel. */

/* Ausdruecklich nur auf einer Berichtsseite ("single-post").

   Zuerst stand hier ".wp-block-post-content .wp-block-image img" ohne diese
   Einschraenkung - und traf damit auch die Portraets im Gesamtvorstand: Die
   stecken ebenfalls in einem Bild-Block. Aus 128 Pixel Breite wurden dort 114,
   weil "width: auto" das Fuellen des Rahmens aufhob. Gemessen, nicht vermutet. */
body.single-post .wp-block-post-content .wp-block-image img {
	max-height: 26rem;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}
body.single-post .wp-block-post-content .wp-block-image {
	display: flex;
	flex-direction: column;
	align-items: center;
}
body.single-post .wp-block-post-content .wp-block-image figcaption {
	max-width: 30rem;
	text-align: center;
}

/* --- Ersatzbild in der Kachel ---------------------------------------------
   Sieht aus wie ein echtes Beitragsbild, damit die Reihe gleichmaessig
   bleibt. Die Rundung steht hier, weil sie beim echten Bild aus dem
   Blockeditor als Inline-Stil kommt und dem Ersatzbild fehlt. */
.wp-block-post-featured-image.asc-bild--ersatz img {
	border-radius: var(--asc-radius);
	aspect-ratio: 4 / 3;
	width: 100%;
	object-fit: cover;
}
.asc-card .wp-block-post-featured-image.asc-bild--ersatz img {
	aspect-ratio: 16 / 10;
}