/*
 * Stile des Themes.
 *
 * Eine einzige Datei, ohne Sass und ohne Build-Schritt: Änderungen hier
 * sind sofort auf der Seite sichtbar. Der Aufbau von oben nach unten:
 *
 *   1. Schriften
 *   2. Werte (Farben, Größen, Abstände)
 *   3. Grundlagen
 *   4. Gerüst (Kopf, Menü, Spalten, Fuß)
 *   5. Bausteine (Knöpfe, Zettel, Termine, Beiträge …)
 *   6. Redaktioneller Inhalt
 *
 * Vereinsrot ist #af121d und steht als --rot ganz oben. Es kommt an
 * genau einer Stelle vor — wer es ändern will, ändert es dort.
 */

/* =========================================================
   1. Schriften
   ========================================================= */

/* Gudea trägt den Fließtext weiter — die Schrift des Vereins bleibt. */
@font-face {
	font-family: 'Gudea';
	src: url('../fonts/gudea-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*
 * Barlow Condensed ist neu: eine schmale Grotesk, wie man sie von
 * Konzertplakaten kennt. Sie übernimmt Überschriften, Datumsangaben und
 * das Menü — dort, wo vorher nur fett gestelltes Gudea stand.
 *
 * Beide Schriften liegen im Theme. Es geht nichts an Google Fonts oder
 * ein anderes CDN, es entsteht also keine Datenübertragung an Dritte.
 */
@font-face {
	font-family: 'Barlow Condensed';
	src: url('../fonts/barlow-condensed-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow Condensed';
	src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow Condensed';
	src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* =========================================================
   2. Werte
   ========================================================= */

:root {
	/* Farben */
	--rot: #af121d;          /* Vereinsrot */
	--rot-tief: #7d0d15;     /* gedrückt */
	--rot-hell: #d1202e;     /* überfahren */

	--tinte: #17140f;        /* Text — warmes Fastschwarz statt #000 */
	--tinte-leise: #5f574c;  /* Nebenangaben */
	--papier: #ffffff;
	--flaeche: #f4f1ec;      /* leichte Hinterlegung */
	--kante: #e2ddd4;

	--wand: #23201d;         /* die dunkle Wand in Kopf und Fuß */
	--wand-tief: #17150e;

	/*
	 * Schatten in der Farbe des Untergrunds statt in reinem Schwarz —
	 * sonst wirken sie schmutzig auf warmem Papier.
	 */
	--schatten-klein: 0 1px 2px rgba(35, 25, 18, 0.07), 0 3px 8px -3px rgba(35, 25, 18, 0.14);
	--schatten-gross: 0 2px 4px rgba(35, 25, 18, 0.06), 0 14px 34px -12px rgba(35, 25, 18, 0.30);

	/* Schriften */
	--schrift-text: 'Gudea', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--schrift-plakat: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue Condensed', Arial, sans-serif;

	/* Maße */
	--bahn: 90rem;
	/*
	 * Höhe der Menüleiste. Der Abstand des Inhalts auf Unterseiten und
	 * der obere Rand im Aufmacher hängen daran — an einer Stelle ändern
	 * genügt. Die zwei Pixel sind der rote Abschluss unten, der zur
	 * Gesamthöhe zählt.
	 */
	--leiste-inhalt: 5.25rem;
	--leiste-hoehe: calc(var(--leiste-inhalt) + 2px);
	--rand: clamp(1rem, 4vw, 3.5rem);
	--radius: 3px;
	--radius-gross: 8px;

	--takt: 200ms;
}

/* =========================================================
   3. Grundlagen
   ========================================================= */

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

/*
 * `hidden` heißt versteckt — ausnahmslos.
 *
 * Das Attribut wirkt über `display: none` aus dem Browser-Standard.
 * Sobald irgendwo `display: grid` oder `display: flex` auf demselben
 * Element steht, gewinnt das, und `hidden` bleibt wirkungslos. Genau
 * das ist bei den Terminkarten passiert: Suche und Filter setzten
 * `hidden`, die Karten blieben trotzdem stehen, weil `.event` auf
 * `display: grid` steht.
 *
 * Zweimal von Hand nachgezogen (`.filter__leeren`, `.nach-oben`) —
 * beim dritten Mal gehört es an die Wurzel.
 */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	/*
	 * Keine Hintergrundgrafik mehr. Seit die Seite über die volle Breite
	 * läuft, lag die Textur ohnehin vollständig hinter der weißen Fläche
	 * — sie wurde geladen und war nie zu sehen. Dazu kommt, dass
	 * `background-attachment: fixed` den Browser bei jedem Scrollschritt
	 * neu zeichnen lässt; auf dem Handy ist das spürbar.
	 *
	 * Struktur gibt es weiterhin, aber nur dort, wo man sie sieht: in
	 * der Fußzeile.
	 */
	background-color: var(--papier);

	color: var(--tinte);
	font-family: var(--schrift-text);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

img {
	vertical-align: middle;
}

a {
	color: var(--rot);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--takt) ease;
}

a:hover {
	color: var(--rot-hell);
}

/* Sichtbarer Fokus für alle, die mit der Tastatur unterwegs sind. */
:focus-visible {
	outline: 2px solid var(--rot);
	outline-offset: 2px;
	border-radius: 2px;
}

h1, h2, h3, h4, h5 {
	font-family: var(--schrift-plakat);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0.005em;
	text-wrap: balance;
	margin: 0 0 0.45em;
}

p {
	margin: 0 0 1.1em;
	text-wrap: pretty;
}

ul, ol {
	margin: 0 0 1.1em;
}

/* Nur für Screenreader. */
.nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sprungmarke {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.7em 1.2em;
	background: var(--rot);
	color: #fff;
	text-decoration: none;
}

.sprungmarke:focus {
	left: 0;
	color: #fff;
}

/* =========================================================
   4. Gerüst
   ========================================================= */

/*
 * Die Seite füllt die volle Breite. Begrenzt wird nur noch der Inhalt
 * innerhalb der Bahnen — vorher saß alles in einem 1024 Pixel schmalen
 * Blatt, das auf heutigen Bildschirmen viel Fläche verschenkt hat.
 */
.seite {
	background: var(--papier);
}

.bahn {
	max-width: var(--bahn);
	margin-inline: auto;
	padding-inline: var(--rand);
}

/*
 * Fußzeile und Sponsorenband nutzen die volle Breite.
 *
 * Der Inhalt oben ist auf --bahn begrenzt, damit Textzeilen nicht
 * beliebig lang werden. Unten gibt es diesen Grund nicht: Dort stehen
 * kurze Linklisten und eine Anschrift. Auf breiten Bildschirmen sah die
 * Fußzeile dadurch aus, als hätte sie rechts und links etwas vergessen.
 */
.fuss > .bahn,
.sponsorenband > .bahn,
.hauptnav > .bahn {
	max-width: none;
	padding-inline: clamp(1rem, 5vw, 5rem);
}

/* --- Kopf ------------------------------------------------ */

/*
 * Das Menü liegt über dem Kopfbereich.
 *
 * Ganz oben durchsichtig, damit das Bild darunter vollständig zu sehen
 * ist; sobald gescrollt wird, färbt es sich dunkel ein. Ohne diesen
 * Wechsel wäre die Schrift auf hellen Motiven nicht lesbar — ein
 * dauerhaft durchsichtiges Menü sieht auf genau einem Foto gut aus und
 * auf allen anderen schlecht.
 */
.hauptnav {
	background: transparent;
	transition: background-color 220ms ease, box-shadow 220ms ease,
		border-color 220ms ease;
	border-bottom: 2px solid transparent;
}

/*
 * Menü und Terminband stehen zusammen im Balken — der ist das feste
 * Element, nicht das Menü allein.
 */
.kopfbalken--fest {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	transition: transform 220ms ease;
}

/*
 * Die Menüzeile liegt über dem Terminband.
 *
 * Ohne diese beiden Regeln verschwindet ein aufgeklapptes Untermenü
 * hinter dem roten Band. Wer auf einen der unteren Punkte will, trifft
 * unterwegs den Termin, und weil der Zeiger damit das Menü verlassen
 * hat, klappt es zu.
 *
 * Der Grund steht an zwei ganz anderen Stellen: `backdrop-filter` an
 * der dunklen Leiste eröffnet einen eigenen Stapelkontext, und das
 * `z-index: 30` des Untermenüs gilt von da an nur noch **innerhalb**
 * der Leiste. Dasselbe macht `transform` an der Bandfläche, dem
 * Versatz zur Menümitte. Es stehen sich also zwei gleichrangige
 * Kontexte gegenüber, und dann gewinnt der spätere: das Band.
 *
 * Auf der Startseite fiel das nicht auf. Dort ist die Leiste oben
 * durchsichtig, ohne `backdrop-filter` und damit ohne eigenen Kontext.
 */
.kopfbalken .hauptnav {
	position: relative;
	z-index: 2;
}

.kopfbalken .terminband {
	position: relative;
	z-index: 1;
}

/*
 * Auf schmalen Schirmen klappt das Terminband beim Scrollen ein, die
 * Menüzeile bleibt stehen (siehe theme.js).
 *
 * `grid-template-rows` statt `max-height`: Damit läuft der Übergang auf
 * die tatsächliche Höhe, ohne dass man sie vorher raten müsste.
 */
.kopfbalken--fest .terminband {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows var(--takt) ease, opacity var(--takt) ease;
}

.kopfbalken--fest .terminband > * {
	overflow: hidden;
}

.kopfbalken--fest.band-eingeklappt .terminband {
	grid-template-rows: 0fr;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.kopfbalken--fest .terminband {
		transition: none;
	}
}

/* Angemeldet schiebt WordPress oben seine eigene Leiste ein. */
body.admin-bar .kopfbalken--fest {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .kopfbalken--fest {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	/* Unterhalb von 600px scrollt die WordPress-Leiste mit weg —
	   dann darf der Balken wieder ganz oben sitzen. */
	body.admin-bar .kopfbalken--fest {
		top: 0;
	}
}

/*
 * Ohne Aufmacher liegt nichts hinter dem Balken — der Inhalt braucht
 * dessen Höhe als Abstand, sonst verschwindet er darunter. Die genaue
 * Höhe setzt assets/js/theme.js, weil das Terminband mal da ist und mal
 * nicht und mal zwei Zeilen hoch. Der Wert hier ist die Rückfalllinie,
 * falls JavaScript nicht läuft.
 */
.kopf--schlicht {
	padding-top: var(--balken-hoehe, calc(var(--leiste-hoehe) + 3.4rem));
}

.hauptnav--dunkel .hauptnav__marke {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Sobald gescrollt wird. */
.hauptnav.ist-gescrollt {
	background: rgba(23, 21, 19, 0.95);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom-color: var(--rot);
	box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.55);
}

/*
 * Drei Bereiche: Logo links, Menü mittig, Aktionen rechts.
 *
 * Als Raster mit gleich breiten Außenspalten — nur so steht das Menü in
 * der Mitte des **Fensters**. Mit Flexbox säße es in der Mitte des
 * Rests, und weil die Aktionen rechts breiter sind als das Logo links,
 * wäre es sichtbar nach links versetzt.
 */
.hauptnav__bahn {
	display: grid;
	/*
	 * Logo und Aktionen so breit wie ihr Inhalt, das Menü dazwischen.
	 *
	 * Es steht mittig **zwischen** beiden, nicht in der Fenstermitte.
	 * Für die Fenstermitte müssten beide Seiten gleich breit gemacht
	 * werden — das kostet Platz und drängt die Leiste früher in zwei
	 * Zeilen. Zwischen Logo und Symbolen ist die ruhigere Lösung: Der
	 * Abstand nach links und rechts ist gleich, gemessen an dem, was
	 * tatsächlich danebensteht.
	 */
	grid-template-columns: auto minmax(0, 1fr) auto;
	/*
	 * Kein Spaltenabstand: Die mittlere Spalte reicht damit von der
	 * Logokante bis zu den Symbolen, und das mittig gesetzte Menü hat
	 * links wie rechts denselben Abstand. Mit Spaltenabstand käme der
	 * einseitig obendrauf, und die Lücken wären verschieden.
	 */
	column-gap: 0;
	align-items: center;
	gap: 1rem;
	/*
	 * Die Höhe richtet sich nach dem Logo — beides aus einem Wert, sonst
	 * ragt ein größeres Logo aus der Leiste oder schwimmt in ihr.
	 */
	min-height: max(var(--leiste-inhalt), calc(var(--leisten-logo, 2.5rem) + 1.75rem));
}

.hauptnav__marke  { justify-self: start; }
.hauptnav__liste  {
	justify-self: center;
	/* Damit die Punkte bei knappem Platz nicht am Logo kleben. */
	padding-inline: 1rem;
}
.navaktionen      { justify-self: end; }

/*
 * Das kleine Logo in der Leiste erscheint erst mit dem dunklen Grund —
 * ganz oben steht das große Logo im Kopfbereich direkt darunter, und
 * zweimal dasselbe Zeichen übereinander sieht nach Versehen aus.
 */
.hauptnav__marke {
	display: flex;
	align-items: center;
	/* Darf schrumpfen: Sonst schiebt sich der Schriftzug bei vielen
	   Menüpunkten unter das Menü, statt Platz zu machen. */
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #fff;
	text-decoration: none;
	font-family: var(--schrift-plakat);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: lowercase;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
}

.hauptnav.ist-gescrollt .hauptnav__marke {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.hauptnav__marke img {
	display: block;
	/* Einstellbar im Customizer unter „Menüleiste“. */
	height: var(--leisten-logo, 2.5rem);
	width: auto;
	max-width: 16rem;
	object-fit: contain;
}

.hauptnav__marke .custom-logo-link {
	display: block;
}

/* Ohne mitlaufendes Menü bleibt die alte, feste Leiste. */
.hauptnav:not(.hauptnav--mitlaufend) {
	background: var(--wand-tief);
	border-top: 3px solid var(--rot);
	border-bottom: 0;
}

.hauptnav:not(.hauptnav--mitlaufend) .hauptnav__marke {
	display: none;
}

.hauptnav__schalter {
	display: none;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.85em 0;
	background: none;
	border: 0;
	color: #fff;
	font-family: var(--schrift-plakat);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.hauptnav__schalter svg {
	width: 1.35em;
	height: 1.35em;
}

.hauptnav__liste {
	display: flex;
	flex-wrap: nowrap;
	/* Mittig zwischen Logo und Aktionen. */
	justify-content: center;
	gap: clamp(0.4rem, 1.2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	/* Nimmt den Platz dazwischen und darf schrumpfen, damit Logo links
	   und Aktionen rechts an ihren Rändern bleiben. */
	flex: 1 1 auto;
	min-width: 0;
}

.hauptnav__liste > li > a {
	display: block;
	position: relative;
	padding: 0.7em 0;
	color: #fff;
	font-family: var(--schrift-plakat);
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	font-weight: 600;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	/* Auf durchsichtigem Grund liegt die Schrift direkt auf dem Bild. */
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.hauptnav.ist-gescrollt .hauptnav__liste > li > a {
	text-shadow: none;
}

/* Der rote Strich wächst von links — nicht bloß ein Farbwechsel. */
.hauptnav__liste > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.45em;
	height: 3px;
	background: var(--rot);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--takt) ease;
}

.hauptnav__liste > li > a:hover,
.hauptnav__liste > li.current-menu-item > a,
.hauptnav__liste > li.current-menu-ancestor > a,
.hauptnav__liste > li.current-page-ancestor > a {
	color: #fff;
}

.hauptnav__liste > li > a:hover::after,
.hauptnav__liste > li.current-menu-item > a::after,
.hauptnav__liste > li.current-menu-ancestor > a::after,
.hauptnav__liste > li.current-page-ancestor > a::after {
	transform: scaleX(1);
}

.menue-hinweis {
	margin: 0;
	padding: 0.8em 0;
	color: #fff;
	font-size: 0.9rem;
}

/* --- Hauptteil ------------------------------------------- */

.haupt {
	padding-block: clamp(1.75rem, 4vw, 3rem);
}

/*
 * Direkt unter dem Aufmacher weniger Luft.
 *
 * Vorher summierten sich drei Abstände: der Rand unter dem Aufmacher,
 * der obere Rand des Inhaltsbereichs und der obere Rand des ersten
 * Blocks. Zusammen ergab das einen breiten weißen Streifen, in dem
 * nichts stand.
 */
.kopf--aufmacher + .haupt {
	padding-top: clamp(1.25rem, 2.5vw, 2rem);
}

/* Der erste Block bringt seinen eigenen Rand nicht mit. */
.haupt .seite-inhalt > .fliesstext > :first-child,
.haupt > .bahn > :first-child > .fliesstext > :first-child {
	margin-top: 0;
}

.widget__titel {
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tinte-leise);
	padding-bottom: 0.35em;
	border-bottom: 2px solid var(--kante);
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li {
	padding: 0.2em 0;
}

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

.fuss {
	position: relative;
	background-color: #262320;
	/*
	 * Verlauf: heller Kegel in der Mitte, zu den Rändern hin dunkler.
	 * Die Körnung liegt darüber als eigene Ebene (::before) — siehe die
	 * Anmerkung dort.
	 */
	background-image: radial-gradient(
		ellipse 60% 75% at 50% 40%,
		#3a3531,
		#262320 55%,
		#191614 100%
	);
	border-top: 4px solid var(--rot);
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.92rem;
	padding-block: clamp(2rem, 4vw, 3rem) 1.5rem;
}

/*
 * Die Struktur.
 *
 * Vorher lag die Textur *unter* einer 93-prozentigen Abdunklung. Von
 * ihren rund fünf Helligkeitsstufen Unterschied blieb dabei ein Drittel
 * einer Stufe übrig — die Datei wurde geladen und war rechnerisch
 * unsichtbar. Deshalb jetzt umgekehrt: eine eigene Ebene *über* dem
 * Verlauf, mit `soft-light` verrechnet.
 *
 * Dazu passend ist `struktur.jpg` um die Mitte zentriert (Mittelwert
 * 128) und in der Körnung sechsfach verstärkt. Zentriert deshalb, weil
 * `soft-light` alles über 128 aufhellt und alles darunter abdunkelt —
 * so bleibt die Grundhelligkeit, wie sie ist, und nur das Korn
 * moduliert. Lautstärke regelt allein `opacity`.
 */
.fuss::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../img/struktur.jpg');
	background-repeat: repeat;
	background-size: 251px 251px;
	mix-blend-mode: soft-light;
	opacity: 0.5;
	pointer-events: none;
}

/* Der Inhalt gehört über die Struktur. */
.fuss > * {
	position: relative;
	z-index: 1;
}

.fuss a {
	color: #fff;
	text-decoration: none;
}

.fuss a:hover {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--rot-hell);
	text-decoration-thickness: 2px;
}

/* Mehrere Widgets im selben Bereich stehen untereinander und brauchen
   Luft dazwischen — sonst klebt die zweite Überschrift an der Liste
   darüber. */
.fuss__spalte > .widget + .widget {
	margin-top: 1.75rem;
}

.fuss__spalten {
	display: grid;
	/* Anzahl kommt aus den Einstellungen; schmale Schirme brechen
	   weiter unten um. */
	grid-template-columns: repeat(var(--fuss-spalten, 3), minmax(0, 1fr));
	align-items: start;
	gap: 1.75rem clamp(1.5rem, 4vw, 3rem);
	margin-bottom: 2rem;
}

.fuss .widget__titel {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.18);
}

.fuss__abschluss {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.fussnav__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	margin: 0;
	list-style: none;
	font-family: var(--schrift-plakat);
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fuss__leistentext {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
}

.fuss__zeile {
	margin: 0;
	margin-left: auto;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.82rem;
}

/* =========================================================
   5. Bausteine
   ========================================================= */

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

.knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.62em 1.15em;
	border: 2px solid var(--rot);
	border-radius: var(--radius);
	background: var(--rot);
	color: #fff;
	font-family: var(--schrift-plakat);
	font-size: 1.08rem;
	font-weight: 600;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--takt) ease, border-color var(--takt) ease,
		color var(--takt) ease, transform var(--takt) ease;
}

.knopf:hover {
	background: var(--rot-tief);
	border-color: var(--rot-tief);
	color: #fff;
}

.knopf:active {
	transform: translateY(1px);
}

.knopf svg {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
}

/*
 * Die laute Stufe. Sieht aus wie `.knopf` allein — steht aber
 * ausdrücklich da, weil die Vorlagen sie so benennen. Ändert jemand
 * eines Tages die Grundform, bleibt der Hauptknopf dadurch rot.
 */
.knopf--rot {
	background: var(--rot);
	border-color: var(--rot);
	color: #fff;
}

/* Zweite Stufe: gleiche Form, weniger Lautstärke. */
.knopf--leise {
	background: transparent;
	border-color: var(--kante);
	color: var(--tinte);
}

.knopf--leise:hover {
	background: var(--flaeche);
	border-color: var(--rot);
	color: var(--rot);
}


/* --- Terminband ------------------------------------------ */

/*
 * Der nächste Termin, direkt unter dem Menü. Er ist die meistgesuchte
 * Angabe auf der Seite und stand vorher rechts in der Seitenleiste —
 * auf dem Handy also unterhalb des gesamten Inhalts.
 */
.terminband {
	background: var(--rot);
	color: #fff;
}

/*
 * Der Inhalt sitzt unter der Mitte des Menüs, nicht in der Mitte des
 * Fensters.
 *
 * Beides ist nicht dasselbe: Das Menü steht mittig zwischen Logo und
 * Symbolen, und weil die verschieden breit sind, liegt seine Mitte
 * neben der Fenstermitte. Stünde das Band in der Fenstermitte, wäre es
 * gegenüber dem Menü darüber leicht verschoben — genau das fällt auf.
 *
 * `--band-versatz` misst `theme.js` an der Menüleiste: der Abstand
 * zwischen Menümitte und Fenstermitte in Pixeln. Der Inhalt wird erst
 * im Fenster zentriert und dann um diesen Wert verschoben.
 */
.terminband__flaeche {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.35em 0.9em;
	padding-block: 0.7em;
	color: #fff;
	text-decoration: none;
	transform: translateX(var(--band-versatz, 0));
	transition: background-color var(--takt) ease;
}

/*
 * Auf dem Handy von links nach rechts.
 *
 * Dort gibt es kein Menü, unter dem etwas sitzen könnte — und bei zwei
 * oder drei Zeilen Umbruch liest sich linksbündig ruhiger als eine
 * mittig ausgerichtete Treppe.
 */
@media (max-width: 46em) {
	.terminband__flaeche {
		justify-content: flex-start;
		transform: none;
	}
}

.terminband__flaeche:hover {
	color: #fff;
	background: var(--rot-tief);
}

.terminband__label {
	font-family: var(--schrift-plakat);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.75;
}

.terminband__datum {
	font-family: var(--schrift-plakat);
	font-size: 1.28rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.terminband__name {
	font-family: var(--schrift-plakat);
	font-size: 1.28rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.terminband__kuenstler {
	font-size: 0.92rem;
	opacity: 0.85;
}

.terminband__mehr {
	margin-left: auto;
	font-size: 1.2rem;
	transition: transform var(--takt) ease;
}

.terminband__flaeche:hover .terminband__mehr {
	transform: translateX(3px);
}

/* --- Sponsoren ------------------------------------------- */

.sponsorenband {
	background: var(--flaeche);
	border-top: 1px solid var(--kante);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.sponsoren__titel {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tinte-leise);
	text-align: center;
}

.sponsoren__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Band: eine ruhige Reihe von Logos über die volle Breite. */
.sponsoren--band .sponsoren__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(1rem, 3vw, 3rem);
}

.sponsoren--band .sponsor__flaeche {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4.5rem;
	padding: 0.25rem;
}

.sponsoren--band .sponsor__flaeche img {
	max-height: 100%;
	width: auto;
	max-width: 11rem;
	object-fit: contain;
	/*
	 * Graustufen nur leicht: in der alten Seitenleiste waren die Logos
	 * vollständig entfärbt und damit praktisch unsichtbar — für etwas,
	 * das der Verein seinen Förderern schuldet, der falsche Weg.
	 */
	filter: grayscale(65%);
	opacity: 0.75;
	transition: filter var(--takt) ease, opacity var(--takt) ease;
}

.sponsoren--band .sponsor__flaeche:hover img {
	filter: none;
	opacity: 1;
}

.sponsoren--band .sponsor__name {
	font-family: var(--schrift-plakat);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tinte-leise);
}

/* Raster: die ausführliche Fassung für eine eigene Partnerseite. */
.sponsoren--raster .sponsoren__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 2rem;
}

.sponsoren--raster .sponsor__flaeche {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 7rem;
	padding: 1rem;
	background: var(--papier);
	border: 1px solid var(--kante);
	border-radius: var(--radius);
	transition: border-color var(--takt) ease;
}

.sponsoren--raster .sponsor__flaeche:hover {
	border-color: var(--rot);
}

.sponsoren--raster .sponsor__flaeche img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

.sponsoren--raster .sponsor__ueberschrift {
	margin: 0.9rem 0 0.3rem;
	font-size: 1.2rem;
}

.sponsoren--raster .sponsor__text {
	font-size: 0.94rem;
}

.sponsoren--raster .sponsor__text p:last-child {
	margin-bottom: 0;
}

/* --- Social-Links ---------------------------------------- */

.social {
	margin-bottom: 1.75rem;
}

.social__titel {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tinte-leise);
}

.social__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social__link {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--kante);
	border-radius: 50%;
	color: var(--tinte);
	transition: background-color var(--takt) ease, border-color var(--takt) ease,
		color var(--takt) ease, transform var(--takt) ease;
}

.social__link svg {
	width: 1.3rem;
	height: 1.3rem;
}

/*
 * Eigene Bilder in der Kugel.
 *
 * Kleiner als die Kugel, damit ringsum Luft bleibt, und entfärbt —
 * bunte Logos in unterschiedlichen Farben würden sich in einer Reihe
 * gegenseitig anschreien. Farbe kommt beim Überfahren zurück, dann ist
 * sie auch eine Aussage.
 */
.social__link--bild {
	overflow: hidden;
	background: var(--flaeche);
}

.social__link--bild img {
	width: 62%;
	height: 62%;
	object-fit: contain;
	filter: grayscale(100%) contrast(1.05);
	transition: filter var(--takt) ease;
}

.social__link--bild:hover img {
	filter: none;
}

/* Beim Überfahren bleibt der Kreis hell, sonst verschwindet das Logo
   im Rot. */
.social__link--bild:hover {
	background: var(--papier);
	border-color: var(--rot);
}

.social__link:hover {
	background: var(--rot);
	border-color: var(--rot);
	color: #fff;
	transform: translateY(-2px);
}

/* In der Fußzeile sitzen sie auf dunklem Grund. */
.fuss .social {
	margin-bottom: 1.5rem;
}

.fuss .social__link {
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.fuss .social__link:hover {
	background: var(--rot);
	border-color: var(--rot);
}

/*
 * Auch in der Fußzeile bleibt der Kreis hell.
 *
 * Vereinslogos sind fast immer dunkel gezeichnet — auf dunklem Grund
 * verschwinden sie schlicht. Der helle Kreis ist dieselbe Lösung wie
 * früher: kleines Logo, viel Luft, entfärbt.
 */
.fuss .social__link--bild {
	background: rgba(255, 255, 255, 0.9);
	border-color: rgba(255, 255, 255, 0.9);
}

.fuss .social__link--bild:hover {
	background: var(--papier);
	border-color: var(--papier);
}


/* --- Aktionen in der Menüleiste -------------------------- */

.navaktionen {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.4rem clamp(0.5rem, 1.2vw, 1rem);
	/* Kein eigener Außenabstand: Er käme zur Lücke rechts des Menüs
	   hinzu und machte sie breiter als die links. */
	margin-left: 0;
	/* Ganz rechts, und nicht schrumpfen — der Knopf ist das Ziel der
	   Leiste, nicht ihr Füllmaterial. */
	flex: 0 0 auto;
}

.navaktionen__social {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Höhe wie der Knopf daneben. Vorher waren die Kreise deutlich flacher;
 * zusammen mit dem knappen Zuschnitt der Markenzeichen — die füllen
 * ihre Zeichenfläche randlos aus — sahen sie unten angeschnitten aus,
 * obwohl sie rechnerisch mittig standen.
 */
.navaktionen__social a {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	color: #fff;
	opacity: 0.75;
	transition: opacity var(--takt) ease, background-color var(--takt) ease,
		transform var(--takt) ease;
}

.navaktionen__social a:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.14);
	transform: translateY(-1px);
	color: #fff;
}

.navaktionen__social svg {
	width: 1.2rem;
	height: 1.2rem;
	/*
	 * Auf der durchsichtigen Leiste liegen sie direkt auf dem Bild und
	 * brauchen etwas Abhebung. Auf dunklem Grund nicht — dort machte
	 * der weiche Rand die Zeichen unscharf, was von Weitem wie ein
	 * Anschnitt aussieht.
	 */
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.hauptnav.ist-gescrollt .navaktionen__social svg,
.hauptnav--dunkel .navaktionen__social svg {
	filter: none;
}

.navaktionen__knopf {
	padding: 0.42em 1em;
	font-size: 0.98rem;
	white-space: nowrap;
}

/*
 * Zwei Zeilen, wenn eine nicht reicht.
 *
 * Zwischen der Handy-Ansicht und rund 1000 Pixeln passen Logo, zehn
 * Menüpunkte und die Aktionen nicht mehr nebeneinander. Statt sie
 * ineinanderzuschieben, rutscht das Menü in eine eigene Zeile darunter
 * und steht dort mittig; oben bleiben Logo links und Aktionen rechts.
 */
/*
 * Zweizeilig — entweder unterhalb von 1024 Pixeln, oder wenn `theme.js`
 * feststellt, dass das Menü einzeilig nicht mittig stehen kann, ohne mit
 * den Aktionen zu kollidieren. Dann ist die zweite Zeile die bessere
 * Lösung: Dort steht das Menü über die volle Breite und damit wirklich
 * in der Mitte.
 */
.hauptnav__bahn.ist-zweizeilig {
	grid-template-columns: auto auto;
	grid-template-areas:
		"marke aktionen"
		"menue menue";
	row-gap: 0.15rem;
	min-height: 0;
	padding-block: 0.6rem;
}

.hauptnav__bahn.ist-zweizeilig .hauptnav__marke {
	grid-area: marke;
	justify-self: start;
}

.hauptnav__bahn.ist-zweizeilig .navaktionen {
	grid-area: aktionen;
	justify-self: end;
	margin-left: 0;
}

.hauptnav__bahn.ist-zweizeilig .hauptnav__liste {
	grid-area: menue;
	justify-self: center;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 0;
}

.hauptnav__bahn.ist-zweizeilig .hauptnav__marke > span {
	display: block;
}

@media (min-width: 46.01em) and (max-width: 64em) {
	.hauptnav__bahn {
		grid-template-columns: auto auto;
		grid-template-areas:
			"marke aktionen"
			"menue menue";
		row-gap: 0.15rem;
		/* Die feste Mindesthöhe gilt nur für die einzeilige Fassung. */
		min-height: 0;
		padding-block: 0.6rem;
	}

	.hauptnav__marke {
		grid-area: marke;
		justify-self: start;
	}

	.navaktionen {
		grid-area: aktionen;
		justify-self: end;
		margin-left: 0;
	}

	.hauptnav__liste {
		grid-area: menue;
		justify-self: center;
		/* Hier darf umbrochen werden — mittig, nicht linksbündig. */
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0;
	}

	/* Der Schriftzug bleibt in dieser Stufe: Oben ist jetzt Platz. */
	.hauptnav__marke > span {
		display: block;
	}
}

/*
 * Zwischenstufe: Bei vielen Menüpunkten wird es vor der eigentlichen
 * Handy-Ansicht eng. Statt umzubrechen, rücken Schrift und Abstände
 * zusammen.
 */
@media (min-width: 46.01em) and (max-width: 82em) {
	.hauptnav__liste > li > a {
		font-size: 1rem;
		letter-spacing: 0.04em;
	}

	.hauptnav__liste {
		gap: 0.75rem;
	}

	.navaktionen__social a {
		width: 2.1rem;
		height: 2.1rem;
	}

	.navaktionen__knopf {
		font-size: 0.9rem;
		padding: 0.38em 0.8em;
	}

	.hauptnav__marke img {
		height: min(var(--leisten-logo, 2.1rem), 3rem);
	}

	/*
	 * Wird es eng, weicht der Schriftzug. Das Menü ist wichtiger als der
	 * Name — der steht auf der Startseite ohnehin groß im Aufmacher. Ein
	 * hinterlegtes Logo bleibt selbstverständlich.
	 */
	.hauptnav__marke > span {
		display: none;
	}
}

/*
 * Sprungziele nicht unter der festen Leiste verstecken.
 *
 * Ein Anker springt an die Oberkante des Ziels — und die liegt dann
 * hinter dem Menüband. `scroll-margin-top` hält den Abstand frei; die
 * Höhe misst `theme.js` am Balken.
 */
[id] {
	scroll-margin-top: calc(var(--balken-hoehe, var(--leiste-hoehe, 5rem)) + 1.5rem);
}

/* --- Untermenüs ------------------------------------------ */

/*
 * Der Aufklappschalter zählt optisch nicht als eigener Menüpunkt.
 *
 * Er ist ein Kästchen mit Rand um ein kleines Zeichen; zusammen mit der
 * Lücke zum Text ergab das nach dem Punkt einen doppelt so großen
 * Abstand wie zwischen allen anderen. Deshalb rückt er dicht an den Text
 * und zieht rechts wieder ein Stück zurück, sodass die Lücke zum
 * nächsten Punkt dieselbe ist wie überall.
 */
.hauptnav .hat-untermenue {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
}

.untermenue-schalter {
	display: grid;
	place-items: center;
	width: 0.95rem;
	height: 1.6rem;
	/* Zieht die Schaltfläche fast vollständig aus dem Fluss: Das Zeichen
	   sitzt dann in der ohnehin vorhandenen Lücke zum nächsten Punkt,
	   statt sie zu verbreitern. */
	margin-right: -0.75rem;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: none;
	color: #fff;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--takt) ease, transform var(--takt) ease;
}

.untermenue-schalter svg {
	width: 0.85rem;
	height: 0.85rem;
}

.untermenue-schalter:hover {
	opacity: 1;
}

.untermenue-schalter[aria-expanded='true'] svg,
.hat-untermenue.ist-offen .untermenue-schalter svg {
	transform: rotate(180deg);
}

.untermenue {
	position: absolute;
	top: 100%;
	left: -0.75rem;
	z-index: 30;
	min-width: 12rem;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background: var(--papier);
	border-radius: 0 0 var(--radius-gross) var(--radius-gross);
	box-shadow: var(--schatten-gross);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--takt) ease, transform var(--takt) ease,
		visibility var(--takt);
}

.hat-untermenue.ist-offen > .untermenue,
.hat-untermenue:focus-within > .untermenue {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.untermenue a {
	display: block;
	padding: 0.5em 1.1em;
	color: var(--tinte);
	font-family: var(--schrift-plakat);
	font-size: 1.12rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border-left: 3px solid transparent;
	transition: background-color var(--takt) ease, border-color var(--takt) ease,
		color var(--takt) ease;
}

.untermenue a:hover,
/* Anker im Menü: markiert wird der Abschnitt, der gerade im Bild
   steht — gesetzt von theme.js, nicht von WordPress. */
.untermenue .ist-aktiv > a,
.untermenue .current-menu-item > a {
	background: var(--flaeche);
	border-left-color: var(--rot);
	color: var(--rot);
}

/* --- Fotogalerie ----------------------------------------- */

.galerie__werkzeuge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1rem;
}

.galerie__suche {
	position: relative;
	flex: 1 1 18rem;
	max-width: 26rem;
}

.galerie__suche svg {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	width: 1.15rem;
	height: 1.15rem;
	transform: translateY(-50%);
	color: var(--tinte-leise);
	pointer-events: none;
}

.galerie__suche input {
	width: 100%;
	padding: 0.65em 0.9em 0.65em 2.5rem;
	border: 1px solid var(--kante);
	border-radius: 999px;
	background: var(--papier);
	font: inherit;
	color: var(--tinte);
}

.galerie__suche input:focus {
	border-color: var(--rot);
	outline: none;
	box-shadow: 0 0 0 3px rgba(175, 18, 29, 0.16);
}

.galerie__jahre {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.galerie__jahre .filter__knopf {
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.galerie__zaehler {
	margin: 0 0 1.25rem;
	font-size: 0.88rem;
	color: var(--tinte-leise);
}

.galerie__mehr {
	margin: 1.5rem 0 0;
}

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

/*
 * Hier stand `content-visibility: auto`, damit der Browser die Kacheln
 * weit außerhalb des Bildes nicht ausrechnen muss.
 *
 * **Raus, weil es sich mit dem Einwilligungs-Plugin beißt.** Für das
 * Plugin sehen übersprungene Kacheln aus wie versteckte Elemente. Es
 * legte deshalb für jede einen zusätzlichen Sperr-Dialog an, hängte ihn
 * ans Ende des Dokuments und gab ihm die Breite einer Kachel. Der Text
 * darin brach in eine 121 Pixel schmale Spalte um und wurde 1634 Pixel
 * hoch — unsichtbar und nicht anklickbar, aber absolut positionierte
 * Elemente vergrößern den scrollbaren Bereich trotzdem. Hinter der
 * Fußzeile stand ein weißer Streifen, in dem nichts zu greifen war.
 *
 * Was das kostet: Bei zweihundert Alben rechnet der Browser jetzt alle
 * Kacheln durch. Das ist messbar, aber es geht um ein Bild und zwei
 * Textzeilen je Kachel, und die Bilder laden ohnehin erst beim
 * Heranscrollen. Eine Seite, die unten ausfranst, ist der schlechtere
 * Handel.
 */


.album__flaeche {
	display: block;
	color: var(--tinte);
	text-decoration: none;
}

.album__bild {
	display: block;
	aspect-ratio: 1;
	background: var(--flaeche);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--schatten-klein);
}

.album__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--takt) ease;
	/* Kurz einblenden, damit nachgereichte Bilder nicht aufploppen. */
	animation: album-bild-auf 220ms ease both;
}

@keyframes album-bild-auf {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.album__flaeche:hover .album__bild img {
	transform: scale(1.04);
}

.album__titel {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--schrift-plakat);
	font-size: 1.18rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.album__flaeche:hover .album__titel {
	color: var(--rot);
}

.album__datum {
	display: block;
	font-size: 0.85rem;
	color: var(--tinte-leise);
	font-variant-numeric: tabular-nums;
}

.albumseite__zurueck {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	align-items: baseline;
}

.albumseite__zumtermin {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.albumseite__zurueck,
.eventseite__zurueck {
	margin-bottom: 1rem;
	font-family: var(--schrift-plakat);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.albumseite__zurueck a,
.eventseite__zurueck a {
	text-decoration: none;
}

.albumseite__kopf {
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--kante);
}

.albumseite__titel {
	margin: 0 0 0.3rem;
	font-size: clamp(1.5rem, 3.5vw, 2.2rem);
}

.albumseite__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	margin: 0;
	font-size: 0.92rem;
	color: var(--tinte-leise);
	font-variant-numeric: tabular-nums;
}

.albumseite__credits {
	margin: 0.5rem 0 0;
	font-size: 0.88rem;
	color: var(--tinte-leise);
}

.fotoliste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(11rem, 45%), 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.foto {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: var(--flaeche);
	overflow: hidden;
	cursor: zoom-in;
	aspect-ratio: 1;
}

.foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--takt) ease, opacity var(--takt) ease;
}

.foto:hover img {
	transform: scale(1.05);
	opacity: 0.9;
}

.fotofenster {
	max-width: 96vw;
	max-height: 94dvh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.fotofenster::backdrop {
	background: rgba(12, 9, 7, 0.9);
}

.fotofenster figure {
	margin: 0;
	text-align: center;
}

.fotofenster img {
	display: block;
	max-height: 86dvh;
	max-width: 96vw;
	width: auto;
	margin: 0 auto;
	border-radius: var(--radius);
	box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.7);
}

.fotofenster figcaption {
	margin-top: 0.6rem;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9rem;
}

.fotofenster__schliessen {
	position: absolute;
	top: -1rem;
	right: -1rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rot);
	color: #fff;
	cursor: pointer;
}

.fotofenster__schliessen svg {
	width: 1.3rem;
	height: 1.3rem;
}

.fotofenster__blatt {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--takt) ease;
}

.fotofenster__blatt:hover {
	background: var(--rot);
}

.fotofenster__blatt svg {
	width: 1.5rem;
	height: 1.5rem;
}

.fotofenster__blatt--zurueck {
	left: -3.75rem;
}

.fotofenster__blatt--vor {
	right: -3.75rem;
}

/* --- Aufmacher der Startseite ---------------------------- */

/*
 * Abdunklung, einstellbar im Customizer.
 *
 * `aus` schaltet die Fläche ganz ab, statt sie auf null zu setzen: Ein
 * Verlauf mit lauter Nullen ist zwar unsichtbar, wird vom Browser aber
 * weiterhin gezeichnet.
 */
.aufmacher--dunkel-leicht { --dunkel: 0.55; }
.aufmacher--dunkel-mittel { --dunkel: 1; }
.aufmacher--dunkel-stark  { --dunkel: 1.35; }

.aufmacher--dunkel-aus::after {
	display: none;
}

.aufmacher {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--wand-tief);
}

/*
 * Höhen bewusst knapp unter der vollen Bildschirmhöhe: Ein wirklich
 * bildschirmfüllender Aufmacher sieht aus, als wäre die Seite hier zu
 * Ende. So bleibt unten immer ein Streifen des Inhalts angeschnitten —
 * das ist die verlässlichste Art zu zeigen, dass es weitergeht.
 *
 * `dvh` statt `vh`: Auf dem Handy zählt `vh` die Adressleiste nicht mit,
 * der Aufmacher wäre dort höher als der sichtbare Bereich und der
 * angeschnittene Streifen läge außerhalb.
 */
.aufmacher--klein  { min-height: 68dvh; }
.aufmacher--mittel { min-height: 86dvh; }
.aufmacher--gross  { min-height: min(94dvh, 70rem); }

/* Für Browser ohne dvh. */
@supports not (height: 1dvh) {
	.aufmacher--klein  { min-height: 68vh; }
	.aufmacher--mittel { min-height: 86vh; }
	.aufmacher--gross  { min-height: min(94vh, 70rem); }
}

.aufmacher__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Verlauf von unten: Der Text steht auf dem Bild und muss auf jedem
 * Motiv lesbar bleiben — ohne dass das Foto flächig abgedunkelt wird.
 */
.aufmacher::after {
	content: '';
	position: absolute;
	inset: 0;
	/*
	 * Die Stärke steuert `--dunkel`, einstellbar im Customizer. Bei
	 * zufällig wechselnden Bildern weiß man vorher nicht, ob gerade ein
	 * helles oder dunkles Motiv dran ist — deshalb einstellbar statt
	 * fest.
	 */
	background: linear-gradient(
		to top,
		rgba(15, 12, 10, calc(0.92 * var(--dunkel, 1))) 0%,
		rgba(15, 12, 10, calc(0.6 * var(--dunkel, 1))) 32%,
		rgba(15, 12, 10, calc(0.1 * var(--dunkel, 1))) 62%,
		rgba(15, 12, 10, 0.35) 100%
	);
	pointer-events: none;
}

.aufmacher__inhalt {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: calc(var(--balken-hoehe, var(--leiste-hoehe)) + clamp(2rem, 5vw, 3.5rem)) clamp(2rem, 5vw, 3.5rem);
	color: #fff;
}

.aufmacher__titel {
	margin: 0 0 0.2em;
	font-size: clamp(2.2rem, 6vw, 4.5rem);
	line-height: 0.98;
	letter-spacing: 0.005em;
	text-transform: lowercase;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.aufmacher__text {
	margin: 0 0 1.5rem;
	max-width: 42ch;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.aufmacher__termin {
	display: inline-block;
	padding: 0.9rem 1.4rem;
	background: var(--rot);
	color: #fff;
	text-decoration: none;
	border-radius: var(--radius);
	box-shadow: var(--schatten-gross);
	transition: background-color var(--takt) ease, transform var(--takt) ease;
}

.aufmacher__termin:hover {
	background: var(--rot-tief);
	color: #fff;
	transform: translateY(-2px);
}

.aufmacher__label {
	display: block;
	font-family: var(--schrift-plakat);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.8;
}

.aufmacher__datum {
	display: block;
	font-family: var(--schrift-plakat);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.aufmacher__name {
	display: block;
	font-family: var(--schrift-plakat);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.aufmacher__kuenstler {
	display: block;
	font-size: 0.9rem;
	opacity: 0.85;
}

/* Der Hinweis, dass es weitergeht. */
.aufmacher__weiter {
	position: absolute;
	left: 50%;
	bottom: 1.1rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.8rem;
	height: 2.8rem;
	margin-left: -1.4rem;
	border-radius: 50%;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(4px);
	transition: background-color var(--takt) ease, transform var(--takt) ease;
	animation: aufmacher-winken 2.4s ease-in-out infinite;
}

.aufmacher__weiter:hover {
	background: var(--rot);
	color: #fff;
	animation: none;
	transform: translateY(2px);
}

.aufmacher__weiter svg {
	width: 1.3rem;
	height: 1.3rem;
}

@keyframes aufmacher-winken {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(5px); }
}

/* --- Terminseite ----------------------------------------- */

.eventseite__raster {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.eventseite--ohne-flyer .eventseite__raster {
	grid-template-columns: minmax(0, 1fr);
	max-width: 52rem;
}

/*
 * Der Flyer läuft beim Scrollen mit. Er ist die eigentliche Einladung —
 * beim Lesen des Textes daneben soll er nicht wegscrollen. Der Abstand
 * nach oben ist die Höhe der Menüleiste, sonst schiebt sie sich darüber.
 */
.eventseite__flyer {
	position: sticky;
	top: calc(var(--balken-hoehe, var(--leiste-hoehe)) + 1rem);
}

/*
 * Zwei Klassen im Selektor, mit Absicht: Die Grundform `.flyer-knopf`
 * (kleines Quadrat in der Liste) steht im Stylesheet weiter unten. Bei
 * gleicher Spezifität gewönne sie, und der Flyer bliebe daumennagelgroß.
 */
.eventseite__flyer .flyer-knopf--gross {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	padding: 0;
	border: 0;
	border-radius: var(--radius-gross);
	overflow: hidden;
	background: var(--flaeche);
	box-shadow: var(--schatten-gross);
	cursor: zoom-in;
}

.eventseite__flyer .flyer-knopf--gross img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--takt) ease;
}

.eventseite__flyer .flyer-knopf--gross:hover img {
	transform: scale(1.02);
}

.eventseite__spalte {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 3vw, 2rem);
}

/* Die Eckdaten abgesetzt, damit sie nicht mit dem Fließtext verschwimmen. */
.eventkarte {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--flaeche);
	border-radius: var(--radius-gross);
	border-top: 4px solid var(--rot);
}

.eventkarte .seitentitel {
	margin-bottom: 0.35em;
}

.eventkarte .event__aktionen {
	margin-bottom: 0;
}

.eventkarte .event__hinweis {
	background: var(--papier);
}

.eventseite__datum {
	margin: 0 0 0.3rem;
	font-family: var(--schrift-plakat);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rot);
}

.eventseite__vorbei {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: var(--papier);
	color: var(--tinte-leise);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
}

.event__kuenstler--gross {
	font-size: clamp(1.3rem, 3vw, 1.75rem);
}

.fakten--gross {
	font-size: 1rem;
	gap: 0.35rem 1.5rem;
	margin-bottom: 1rem;
}

.eventseite__beschreibung {
	font-size: 1.02rem;
}

/* --- Karte ----------------------------------------------- */

.karte {
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
	/* Beim Sprung von „Ort“ hierher nicht unter die feste Menüleiste
	   rutschen. */
	scroll-margin-top: calc(var(--balken-hoehe, var(--leiste-hoehe)) + 1rem);
}

.karte__titel {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	text-transform: lowercase;
}

/* Höhen für den Block; die Terminseite bleibt beim Seitenverhältnis. */
.karte--flach  .karte__flaeche { aspect-ratio: auto; height: 16rem; min-height: 0; }
.karte--mittel .karte__flaeche { aspect-ratio: auto; height: 24rem; min-height: 0; }
.karte--hoch   .karte__flaeche { aspect-ratio: auto; height: 34rem; min-height: 0; }

.karte__flaeche {
	position: relative;
	/*
	 * `width: 100%` ist hier entscheidend. Aus `aspect-ratio` und
	 * `min-height` leitet der Browser sonst die Breite ab: 18rem Höhe
	 * mal 4/3 ergab auf dem Handy 384 Pixel — breiter als der Inhalt
	 * überhaupt sein darf, und die Karte stand rechts über den Rand.
	 */
	width: 100%;
	aspect-ratio: 21 / 9;
	min-height: 18rem;
	background: var(--flaeche);
	border: 1px solid var(--kante);
	border-radius: var(--radius-gross);
	overflow: hidden;
}

/*
 * Alles, was im Kartenkasten landet, füllt ihn aus — nicht nur ein
 * <iframe>.
 *
 * Vorher stand hier `.karte__flaeche iframe { position: absolute }`.
 * Das Einwilligungs-Plugin ersetzt die Karte aber durch **eigene**
 * Auszeichnung: ein `<div>` mit Vorschaubild und Knopf. Das traf die
 * Regel nicht, bekam also keine Höhe — übrig blieb ein leerer grauer
 * Kasten, und der Knopf „Karte laden“ war nirgends zu sehen.
 *
 * Der Hinweis des Themes (`.karte__hinweis`) liegt weiterhin darüber;
 * er ist eigens absolut gesetzt.
 */
.karte__flaeche > * {
	width: 100%;
	height: 100%;
	border: 0;
}

.karte__flaeche iframe {
	display: block;
}

.karte__hinweis {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 1.5rem;
	text-align: center;
}

.karte__ort {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	font-family: var(--schrift-plakat);
	font-size: 1.35rem;
	letter-spacing: 0.03em;
}

.karte__ort svg {
	width: 1.2em;
	height: 1.2em;
	color: var(--rot);
}

.karte__text {
	max-width: 46ch;
	margin: 0;
	font-size: 0.9rem;
	color: var(--tinte-leise);
}

.karte__nurlink {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--flaeche);
	border-radius: var(--radius-gross);
	font-family: var(--schrift-plakat);
	font-size: 1.2rem;
	letter-spacing: 0.02em;
}

.karte__nurlink svg {
	width: 1.2em;
	height: 1.2em;
	color: var(--rot);
}

.karte__nurlink a {
	font-size: 0.85rem;
	font-family: var(--schrift-text);
	letter-spacing: 0;
}

.karte__unterzeile {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
}

.karte__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: 0.6rem 0 0;
}

/* --- Filterleiste ---------------------------------------- */

.filter {
	margin-bottom: 1.75rem;
}

.filter__titel {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tinte-leise);
}

/* Eine Zeile: Typ-Pillen links, Suche rechts. */
.filter__zeile {
	display: flex;
	align-items: center;
	gap: 0.5rem 0.75rem;
	flex-wrap: wrap;
}

.filter__zeile .filter__liste {
	flex: 1 1 auto;
	margin: 0;
}

/*
 * Die Suche als Lupe, die aufklappt.
 *
 * Zusammengeklappt nimmt sie nur den Platz eines Knopfes ein — solange
 * niemand sucht, muss ein leeres Eingabefeld die Zeile nicht in die
 * Breite ziehen. Die Breite wird umgeschaltet, nicht die Sichtbarkeit:
 * So kann der Übergang laufen und das Feld bleibt für die Tastatur
 * erreichbar.
 */
.filter__suche {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin-left: auto;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	transition: background-color var(--takt) ease, border-color var(--takt) ease;
}

.filter__suche.ist-offen {
	background: var(--papier);
	border-color: var(--kante);
	flex: 1 1 14rem;
	max-width: 26rem;
}

.filter__suche.ist-offen:focus-within {
	border-color: var(--rot);
	box-shadow: 0 0 0 3px rgba(175, 18, 29, 0.16);
}

/*
 * Zugeklappt sieht die Suche aus wie die Typ-Knöpfe daneben — Pille mit
 * Rand und Beschriftung. Eine graue Lupe allein wurde als Bedienelement
 * schlicht übersehen.
 */
.filter__lupe {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	flex: 0 0 auto;
	padding: 0.3em 0.9em 0.3em 0.75em;
	border: 1px solid var(--kante);
	border-radius: 999px;
	background: var(--papier);
	color: var(--tinte);
	font-size: 0.9rem;
	cursor: pointer;
	transition: color var(--takt) ease, background-color var(--takt) ease,
		border-color var(--takt) ease;
}

.filter__lupe:hover {
	border-color: var(--rot);
	background: var(--flaeche);
	color: var(--rot);
}

/* Aufgeklappt wird sie zum Symbol im Feld. */
.ist-offen .filter__lupe {
	padding: 0;
	width: 2.4rem;
	height: 2.4rem;
	justify-content: center;
	border-color: transparent;
	background: none;
	color: var(--tinte-leise);
}

.ist-offen .filter__lupe:hover {
	background: none;
	color: var(--rot);
}

.ist-offen .filter__lupe-text {
	display: none;
}

.filter__leeren {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--tinte-leise);
	cursor: pointer;
	transition: color var(--takt) ease, background-color var(--takt) ease;
}

.filter__leeren:hover {
	color: var(--rot);
	background: var(--flaeche);
}

.filter__lupe svg,
.filter__leeren svg {
	width: 1.1rem;
	height: 1.1rem;
	flex: 0 0 auto;
}

.filter__feld {
	flex: 1 1 auto;
	width: 0;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--tinte);
	opacity: 0;
	transition: width var(--takt) ease, opacity var(--takt) ease,
		padding var(--takt) ease;
}

.filter__feld:focus {
	outline: none;
}

.ist-offen .filter__feld {
	width: auto;
	padding-right: 0.5em;
	opacity: 1;
}

/* Das eigene Kreuzchen der Browser stört neben unserem. */
.filter__feld::-webkit-search-cancel-button {
	display: none;
}

.filter__zaehler {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--tinte-leise);
	min-height: 1.2em;
}

.filter__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

button.filter__knopf {
	font: inherit;
	cursor: pointer;
}

.filter__knopf {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	padding: 0.3em 0.7em;
	border: 1px solid var(--kante);
	border-radius: 999px;
	background: var(--papier);
	color: var(--tinte);
	font-size: 0.9rem;
	text-decoration: none;
	transition: border-color var(--takt) ease, background-color var(--takt) ease;
}

.filter__knopf:hover {
	border-color: var(--rot);
	background: var(--flaeche);
	color: var(--rot);
}

/* Typ ohne Treffer zur aktuellen Suche. */
.filter__knopf--leer {
	opacity: 0.4;
}

.filter__knopf--aktiv {
	background: var(--rot);
	border-color: var(--rot);
	color: #fff;
	font-weight: 700;
}

.filter__zahl {
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

.filter__knopf--aktiv .filter__zahl {
	opacity: 0.85;
}

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

.events__ueberschrift {
	font-size: clamp(1.5rem, 3.5vw, 2.1rem);
	letter-spacing: 0.02em;
	text-transform: lowercase;
}

/*
 * Auf breiten Schirmen zwei Spalten — die gewonnene Fläche geht an die
 * Termine statt an einen leeren Rand.
 */
.eventliste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	/*
	 * `min(…, 100%)` ist hier entscheidend: ohne das erzwingt der
	 * Mindestwert von 31rem auch auf einem 390 Pixel breiten Display
	 * eine 496 Pixel breite Spalte — die Karten ragten aus der Seite
	 * heraus und man konnte nach rechts scrollen.
	 */
	grid-template-columns: repeat(auto-fill, minmax(min(31rem, 100%), 1fr));
	gap: 1rem;
	/*
	 * `stretch` statt `start`: Karten einer Reihe sind gleich hoch.
	 *
	 * Vorher richtete sich jede nach ihrem eigenen Inhalt. Hat ein
	 * Termin einen Hinweiskasten und der daneben nicht, endete die eine
	 * Karte deutlich höher als die andere — es sah aus, als wäre etwas
	 * abgeschnitten. Der Inhalt bleibt oben, nur der Rahmen läuft
	 * durch.
	 */
	align-items: stretch;
}

/*
 * Ein einzelner Termin nimmt die volle Breite.
 *
 * `auto-fill` legt die Spalten unabhängig davon an, wie viele Karten es
 * gibt — bei einem einzigen kommenden Termin stand die Karte deshalb
 * links und rechts daneben klaffte eine leere Spalte. `auto-fill` durch
 * `auto-fit` zu ersetzen wäre die naheliegende Lösung, bricht aber die
 * Fotoalben-Reihe darunter; deshalb hier gezielt.
 */
.eventliste:not(:has(> :nth-child(2))) {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Karten außerhalb des Sichtbereichs überspringt der Browser beim
 * Berechnen und Zeichnen. Bei knapp zweihundert vergangenen Terminen
 * spart das den größten Teil der Arbeit beim Aufbau der Seite — ohne
 * eine einzige zusätzliche Anfrage und ohne dass etwas nachgeladen
 * werden müsste. Gesucht und gefiltert wird trotzdem über alle, denn im
 * Dokument stehen sie ja.
 *
 * `contain-intrinsic-size` gibt die geschätzte Höhe an, damit die
 * Bildlaufleiste stimmt und beim Scrollen nichts springt.
 */
.event {
	content-visibility: auto;
	contain-intrinsic-size: auto 13rem;
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	gap: 1.1rem;
	align-items: start;
	padding: 1rem;
	background: var(--papier);
	border: 1px solid var(--kante);
	border-radius: var(--radius-gross);
	transition: border-color var(--takt) ease, box-shadow var(--takt) ease;
}

.event:hover {
	border-color: #cfc7ba;
	box-shadow: var(--schatten-klein);
}

/*
 * Ganze Kachel anklickbar.
 *
 * Umgesetzt über den Titel-Link, der sich unsichtbar über die Kachel
 * legt — nicht dadurch, dass die Kachel selbst zum Link wird. Das ist
 * wichtig, weil in der Kachel weitere Links und Knöpfe stecken
 * (Tickets, Flyer, Bandseiten): Links im Link sind kein gültiges HTML,
 * und der Vorlesemodus würde die ganze Kachel als einen einzigen,
 * endlosen Linktext ausgeben.
 */
.event--verlinkt {
	position: relative;
	cursor: pointer;
}

.event--verlinkt .event__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--radius-gross);
}

.event--verlinkt:hover {
	border-color: var(--rot);
	box-shadow: var(--schatten-klein);
}

.event--verlinkt:hover .event__name {
	color: var(--rot);
}

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

/* Alles, was ein eigenes Ziel hat, liegt über der Klickfläche. */
.event--verlinkt .flyer-knopf,
.event--verlinkt .event__kuenstler a,
.event--verlinkt .event__aktionen,
.event--verlinkt .event__hinweis a {
	position: relative;
	z-index: 2;
}

/* Beim Markieren von Text soll die Kachel nicht mitspringen. */
.event--verlinkt .event__link::after {
	pointer-events: auto;
}

/*
 * Der Datumsblock ist als Kontrollabschnitt einer Eintrittskarte
 * gebaut — mit Perforation an der rechten Kante. Das ist das eine
 * auffällige Element der Seite; alles andere darf ruhig bleiben.
 */
.stub {
	position: relative;
	margin: 0;
	padding: 0.6rem 0.95rem 0.7rem 0.75rem;
	background: var(--rot);
	color: #fff;
	border-radius: var(--radius) 0 0 var(--radius);
	text-align: center;
	min-width: 4.35rem;
	font-variant-numeric: tabular-nums;
}

.stub::after {
	content: '';
	position: absolute;
	top: 0;
	right: -1px;
	bottom: 0;
	width: 6px;
	background-image: radial-gradient(circle at 100% 50%, var(--papier) 0 3px, transparent 3.5px);
	background-size: 6px 9px;
	background-repeat: repeat-y;
}

.stub__tag,
.stub__monat {
	display: block;
	font-family: var(--schrift-plakat);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.9;
}

.stub__tag {
	font-size: 0.82rem;
}

.stub__zahl {
	display: block;
	font-family: var(--schrift-plakat);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 0.95;
	margin: 0.05em 0 0.1em;
}

.stub__monat {
	font-size: 0.78rem;
}

.event__flyer {
	flex: 0 0 auto;
}

/*
 * Das Flyer-Bild in der Terminliste.
 *
 * Hochformat 4:5 statt Quadrat — so sind die meisten Flyer gestaltet.
 * Im Quadrat schnitt der Zuschnitt oben und unten je ein Stück weg, und
 * gerade dort stehen Bandname und Datum.
 *
 * Die Breite bleibt bei 5,5 rem, damit die Zeile nicht schmaler wird;
 * die Höhe wächst auf knapp 7 rem.
 */
.flyer-knopf {
	display: block;
	width: 5.5rem;
	aspect-ratio: 4 / 5;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background-color: var(--flaeche);
	background-size: cover;
	background-position: center;
	box-shadow: var(--schatten-klein);
	cursor: zoom-in;
	transition: transform var(--takt) ease, box-shadow var(--takt) ease;
}

.flyer-knopf:hover {
	transform: scale(1.04);
	box-shadow: var(--schatten-gross);
}

.flyer-knopf:active {
	transform: scale(0.99);
}

.flyer-platzhalter {
	width: 5.5rem;
	aspect-ratio: 4 / 5;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius);
	opacity: 0.45;
}

.event__text {
	min-width: 0;
}

.event__name {
	margin: 0 0 0.2rem;
	font-size: clamp(1.3rem, 2.6vw, 1.65rem);
	letter-spacing: 0.01em;
}

.event__label {
	color: var(--tinte-leise);
	font-size: 0.85em;
}

.event__kuenstler {
	margin: 0 0 0.5rem;
	font-family: var(--schrift-plakat);
	font-size: 1.22rem;
	font-weight: 600;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	line-height: 1.25;
}

.event__kuenstler i {
	font-style: normal;
}

.event__kuenstler a {
	text-decoration: none;
	border-bottom: 2px solid rgba(175, 18, 29, 0.28);
}

.event__kuenstler a:hover {
	border-bottom-color: var(--rot);
}

.fakten {
	margin: 0 0 0.55rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 1.1rem;
	font-size: 0.94rem;
	color: var(--tinte-leise);
}

/*
 * Der Ort ist verlinkt, sieht aber nicht danach aus.
 *
 * Vorher stand eine graue Linie darunter. In einer Zeile mit Ort,
 * Einlass, Beginn und Eintritt wirkte sie wie ein Fehler: Alle Angaben
 * sehen gleich aus, nur eine ist unterstrichen. Beim Überfahren wird
 * der Ort rot, dann sieht man, dass er anklickbar ist.
 */
.ortlink {
	color: inherit;
	text-decoration: none;
}

.ortlink:hover,
.ortlink:focus-visible {
	color: var(--rot);
	text-decoration: underline;
	text-decoration-color: var(--rot);
	text-underline-offset: 0.2em;
}

/* „VVK“ und „AK“ innerhalb der Eintrittsangabe. */
.eintritt__art {
	font-family: var(--schrift-plakat);
	font-size: 0.95em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tinte);
}

.eintritt__trenner {
	color: var(--kante);
	padding-inline: 0.15em;
}

.fakten__label {
	font-family: var(--schrift-plakat);
	font-size: 0.95em;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tinte);
}

.event__hinweis {
	margin: 0 0 0.6rem;
	padding: 0.5em 0.75em;
	background: var(--flaeche);
	border-left: 3px solid var(--rot);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 0.92rem;
}

.event__hinweis > :first-child {
	margin-top: 0;
}

.event__hinweis > :last-child {
	margin-bottom: 0;
}

.event__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
}

.event__aktionen .knopf {
	font-size: 0.98rem;
	padding: 0.45em 0.9em;
}

/* --- Schlagworte ----------------------------------------- */

.schlagworte {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 0.55rem;
}

.schlagwort {
	padding: 0.15em 0.6em;
	background: var(--flaeche);
	/* Ein feiner Rand, damit die Marken auch dann als solche zu erkennen
	   sind, wenn der Untergrund selbst hell abgesetzt ist. */
	border: 1px solid var(--kante);
	border-radius: 999px;
	font-size: 0.8rem;
	color: var(--tinte-leise);
	white-space: nowrap;
}

/*
 * Im Eckdatenkasten der Terminseite ist der Untergrund bereits
 * --flaeche. Dort verschwanden die Genres vollständig: gleiche Farbe auf
 * gleicher Farbe. Deshalb dort weiß.
 */
.eventkarte .schlagwort {
	background: var(--papier);
}

/* --- Fenster (Infos, Flyer) ------------------------------ */

.infofenster,
.flyerfenster {
	max-width: min(58rem, 92vw);
	max-height: 90dvh;
	padding: 0;
	border: 0;
	border-radius: var(--radius-gross);
	background: var(--papier);
	color: var(--tinte);
	box-shadow: var(--schatten-gross);
}

.infofenster::backdrop,
.flyerfenster::backdrop {
	background: rgba(20, 14, 10, 0.78);
	backdrop-filter: blur(2px);
}

.infofenster__inhalt {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1.5rem;
	padding: 1.75rem;
}

.infofenster__text h3 {
	font-size: 1.5rem;
	margin-bottom: 0.6rem;
}

.infofenster__datum {
	display: block;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--tinte-leise);
	letter-spacing: 0.04em;
}

.infofenster__flyer img {
	width: 15rem;
	border-radius: var(--radius);
	box-shadow: var(--schatten-klein);
}

.infofenster__schliessen,
.flyerfenster__schliessen {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--flaeche);
	color: var(--tinte);
	cursor: pointer;
	transition: background-color var(--takt) ease, color var(--takt) ease;
}

.infofenster__schliessen:hover,
.flyerfenster__schliessen:hover {
	background: var(--rot);
	color: #fff;
}

.infofenster__schliessen svg,
.flyerfenster__schliessen svg {
	width: 1.3rem;
	height: 1.3rem;
}

.flyerfenster {
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.flyerfenster img {
	display: block;
	max-height: 86dvh;
	width: auto;
	border-radius: var(--radius);
	box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.7);
}

.flyerfenster__schliessen {
	top: -1rem;
	right: -1rem;
	background: var(--rot);
	color: #fff;
}

/* --- Bands ----------------------------------------------- */

.bands {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.band {
	display: grid;
	grid-template-columns: 12rem minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--kante);
}

.band:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Zickzack: jede zweite Band spiegelverkehrt — sonst entsteht eine
   Kolonne aus lauter gleich aussehenden Zeilen. */
.band:nth-child(even) {
	grid-template-columns: minmax(0, 1fr) 12rem;
}

.band:nth-child(even) .band__bild {
	order: 2;
}

.band__bild img {
	display: block;
	width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--schatten-klein);
}

.band__name {
	margin: 0 0 0.1rem;
	font-size: 1.6rem;
}

.band__genre {
	margin: 0 0 0.7rem;
	font-family: var(--schrift-plakat);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--rot);
}

/* --- Videos ---------------------------------------------- */

.videos {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.video__kopf {
	margin-bottom: 0.85rem;
}

.video__titel {
	margin: 0 0 0.2rem;
	font-size: clamp(1.25rem, 2.6vw, 1.6rem);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.video__titel a {
	text-decoration: none;
}

.video__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	margin: 0 0 0.35rem;
	font-size: 0.9rem;
	color: var(--tinte-leise);
	font-variant-numeric: tabular-nums;
}

.video__meta .schlagworte {
	margin: 0;
}

.video__bands {
	margin: 0;
	font-size: 0.98rem;
}

.video__rahmen {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--wand-tief);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.video__rahmen iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.symbol--klein {
	width: 0.95em;
	height: 0.95em;
	vertical-align: -0.1em;
}

/* --- Medien-Menü ----------------------------------------- */

.medien-menue {
	margin-bottom: 1.75rem;
	border-bottom: 2px solid var(--kante);
}

.medien-menue__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.medien-menue__liste a {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.55em 1em;
	border-radius: var(--radius) var(--radius) 0 0;
	color: var(--tinte-leise);
	font-family: var(--schrift-plakat);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color var(--takt) ease, border-color var(--takt) ease,
		background-color var(--takt) ease;
}

.medien-menue__liste a:hover {
	background: var(--flaeche);
	color: var(--tinte);
}

.medien-menue__bild {
	width: 1.5em;
	height: 1.5em;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter var(--takt) ease, opacity var(--takt) ease;
}

.medien-menue__liste a:hover .medien-menue__bild,
.medien-menue__liste .current-menu-item .medien-menue__bild {
	filter: none;
	opacity: 1;
}

.medien-menue__liste .current-menu-item a,
.medien-menue__liste .current_page_item a {
	color: var(--rot);
	border-bottom-color: var(--rot);
}

/* --- Beiträge -------------------------------------------- */

.seitentitel {
	font-size: clamp(1.75rem, 4.5vw, 2.6rem);
	letter-spacing: 0.005em;
	margin-bottom: 0.5em;
}

.archivkopf {
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px solid var(--kante);
}

.beitragsliste {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Darstellung „raster“ des Shortcodes [beitraege]. */
.beitragsliste--raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: 2rem;
}

.beitragsliste--raster .anriss {
	display: block;
	padding-bottom: 0;
	border-bottom: 0;
}

.beitragsliste--raster .anriss__bild {
	display: block;
	margin-bottom: 0.9rem;
}

/* Darstellung „titel“: nur Überschrift und Datum. */
.beitragsliste--titel {
	gap: 0.9rem;
}

.anriss--titel {
	display: block;
	padding-bottom: 0.9rem;
}

.anriss--titel .anriss__titel {
	font-size: 1.3rem;
	margin-bottom: 0.1rem;
}

.anriss--titel .anriss__meta {
	margin: 0;
}

.anriss {
	display: grid;
	grid-template-columns: 10rem minmax(0, 1fr);
	gap: 1.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--kante);
}

.anriss:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.anriss:not(:has(.anriss__bild)) {
	grid-template-columns: minmax(0, 1fr);
}

.anriss__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--schatten-klein);
	transition: transform var(--takt) ease;
}

.anriss__bild:hover img {
	transform: scale(1.02);
}

.anriss__titel {
	margin: 0 0 0.2rem;
	font-size: clamp(1.3rem, 3vw, 1.75rem);
}

.anriss__titel a {
	text-decoration: none;
}

.anriss__meta,
.beitrag__meta {
	margin: 0 0 0.6rem;
	font-size: 0.9rem;
	color: var(--tinte-leise);
	font-variant-numeric: tabular-nums;
}

.anriss__auszug {
	margin: 0 0 0.6rem;
}

.anriss__mehr {
	margin: 0;
}

.anriss__mehr a {
	font-family: var(--schrift-plakat);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

.beitrag__bild {
	margin: 0 0 1.5rem;
}

.beitrag__bild img {
	display: block;
	width: 100%;
	max-height: 26rem;
	object-fit: cover;
	border-radius: var(--radius);
}

.beitrag__kopf {
	margin-bottom: 1.5rem;
}

.nachbarn {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--kante);
}

.nachbarn__link {
	display: block;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--kante);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--tinte);
	transition: border-color var(--takt) ease, background-color var(--takt) ease;
}

.nachbarn__link:hover {
	border-color: var(--rot);
	background: var(--flaeche);
	color: var(--tinte);
}

.nachbarn__link--zurueck {
	text-align: right;
}

.nachbarn__label {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tinte-leise);
	margin-bottom: 0.2em;
}

.nachbarn__titel {
	display: block;
	font-family: var(--schrift-plakat);
	font-size: 1.22rem;
	font-weight: 600;
	line-height: 1.2;
}

/* --- Blättern -------------------------------------------- */

.blaettern {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--kante);
}

.blaettern ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blaettern .page-numbers {
	display: inline-flex;
	align-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.7em;
	justify-content: center;
	border: 1px solid var(--kante);
	border-radius: var(--radius);
	color: var(--tinte);
	font-family: var(--schrift-plakat);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: border-color var(--takt) ease, background-color var(--takt) ease,
		color var(--takt) ease;
}

.blaettern a.page-numbers:hover {
	border-color: var(--rot);
	color: var(--rot);
	background: var(--flaeche);
}

.blaettern .page-numbers.current {
	background: var(--rot);
	border-color: var(--rot);
	color: #fff;
}

.blaettern .page-numbers.dots {
	border-color: transparent;
}

/* --- Passwortformular ------------------------------------ */

/*
 * Die ganze Inhaltsfläche wird hell hinterlegt, der Kasten steht als
 * weiße Karte darin. Die Klasse setzt WordPress selbst, sobald ein
 * Beitrag ein Passwort verlangt — es braucht dafür keine eigene
 * Vorlage.
 */
body.post-password-required .haupt {
	background: var(--flaeche);
	/* Füllt den Rest des Fensters, damit unter dem Kasten kein weißer
	   Streifen bis zur Fußzeile stehen bleibt. */
	flex: 1 0 auto;
	display: flex;
	align-items: center;
}

/*
 * Die Seite als Spalte über die volle Höhe: Nur so kann der Inhalt
 * dazwischen wachsen und die Fußzeile bleibt unten.
 */
body.post-password-required .seite {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body.post-password-required .seite-inhalt {
	width: 100%;
}

.passwortform {
	position: relative;
	max-width: 30rem;
	margin: clamp(1.5rem, 5vw, 3rem) auto;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--papier);
	border: 1px solid var(--kante);
	border-top: 4px solid var(--rot);
	border-radius: var(--radius-gross);
	box-shadow: var(--schatten-gross);
	text-align: center;
}

.passwortform__schloss {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0 auto 0.9rem;
	border-radius: 50%;
	background: var(--rot);
	color: #fff;
}

.passwortform__schloss svg {
	width: 1.6rem;
	height: 1.6rem;
}

.passwortform__titel {
	margin: 0 0 0.35rem;
	font-size: clamp(1.5rem, 4vw, 2rem);
	letter-spacing: 0.02em;
	text-transform: lowercase;
}

.passwortform__text {
	margin: 0 auto 1.5rem;
	max-width: 32ch;
	font-size: 0.95rem;
	color: var(--tinte-leise);
}

/*
 * Feld und Knopf als ein Stück: Ein Passwortfeld hat genau eine
 * Fortsetzung, und die gehört unmittelbar daneben.
 */
.passwortform__zeile {
	display: flex;
	gap: 0.4rem;
	padding: 0.35rem;
	background: var(--flaeche);
	border: 1px solid var(--kante);
	border-radius: 999px;
	transition: border-color var(--takt) ease, box-shadow var(--takt) ease;
}

.passwortform__zeile:focus-within {
	border-color: var(--rot);
	box-shadow: 0 0 0 3px rgba(175, 18, 29, 0.16);
}

.passwortform input[type='password'] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.55em 0.5em 0.55em 1em;
	border: 0;
	background: none;
	font: inherit;
	color: var(--tinte);
	letter-spacing: 0.08em;
}

.passwortform input[type='password']::placeholder {
	color: var(--tinte-leise);
	letter-spacing: 0;
}

.passwortform input[type='password']:focus {
	outline: none;
}

.passwortform .knopf {
	flex: 0 0 auto;
	border-radius: 999px;
	padding-inline: 1.3em;
}

.passwortform__fehler {
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	color: var(--rot);
}

.passwortform__hilfe {
	margin: 1.25rem 0 0;
	font-size: 0.85rem;
	color: var(--tinte-leise);
}

@media (prefers-reduced-motion: reduce) {
	.passwortform__zeile {
		transition: none;
	}
}

/* --- Blöcke aus dem Editor -------------------------------- */

/* --- Eingebettete Videos ---------------------------------- */

.fliesstext .wp-block-embed {
	margin-block: clamp(1.5rem, 4vw, 2.5rem);
}

.fliesstext .wp-block-embed iframe {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--radius);
}

.fliesstext .wp-block-embed figcaption {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	color: var(--tinte-leise);
}

/* --- Aufklappbares („Details") ---------------------------- */

/*
 * Für Abschnitte, die dazugehören, aber nicht jeden interessieren — die
 * Renovierungsgeschichte des JUZE etwa. Ohne Gestaltung sieht der Block
 * aus wie ein Betriebssystem-Dialog; hier bekommt er die Form der
 * übrigen Kästen.
 */
.fliesstext .wp-block-details {
	margin-block: clamp(2rem, 5vw, 3rem);
	padding: 0 clamp(1.25rem, 3vw, 1.75rem);
	background: var(--flaeche);
	border-radius: var(--radius-gross);
}

.fliesstext .wp-block-details > summary {
	padding: 1.1rem 0;
	font-family: var(--schrift-plakat);
	font-size: clamp(1.1rem, 2.5vw, 1.35rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--tinte);
	cursor: pointer;
	list-style: none;
}

/* Eigenes Zeichen statt des Browser-Dreiecks — das sieht überall anders
   aus und passt nirgends. */
.fliesstext .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.fliesstext .wp-block-details > summary::before {
	content: '';
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-right: 0.6em;
	border-right: 2px solid var(--rot);
	border-bottom: 2px solid var(--rot);
	transform: rotate(-45deg) translate(-0.1em, -0.1em);
	transition: transform var(--takt) ease;
}

.fliesstext .wp-block-details[open] > summary::before {
	transform: rotate(45deg) translate(-0.1em, -0.1em);
}

.fliesstext .wp-block-details > summary:hover {
	color: var(--rot);
}

.fliesstext .wp-block-details > :not(summary):last-child {
	padding-bottom: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.fliesstext .wp-block-details > summary::before {
		transition: none;
	}
}

/*
 * Bild mit Text im aufklappbaren Abschnitt.
 *
 * Dort stehen kleine Bilder neben Absätzen, mehrere hintereinander. Der
 * große Außenabstand der eigenständigen Bausteine wäre hier zu viel —
 * die Teile gehören ja zusammen.
 */
.fliesstext .wp-block-details .wp-block-media-text {
	margin-block: clamp(1.25rem, 3vw, 2rem);
}

.fliesstext .wp-block-details .wp-block-media-text__media img {
	border-radius: var(--radius);
}

/*
 * Ein Knopf direkt hinter einer Termin- oder Albumliste.
 *
 * „Alle Termine“ klebte am Rahmen der Karte darüber und sah aus, als
 * gehörte er noch dazu. Er gehört aber zur Liste als Ganzem.
 */
.fliesstext .events + .wp-block-buttons,
.fliesstext .galerie + .wp-block-buttons {
	margin-top: clamp(1.25rem, 3vw, 2rem);
	margin-bottom: clamp(2rem, 5vw, 3rem);
}

/* --- Knöpfe aus dem Editor -------------------------------- */

/*
 * Der Block „Button" brachte bisher nur die Vorgabe von WordPress mit:
 * dunkelgrau, stark abgerundet, Kleinschreibung — neben den eigenen
 * Knöpfen des Themes sah das aus wie von einer anderen Seite.
 *
 * Jetzt dieselbe Form wie `.knopf`: Vereinsrot, Plakatschrift in
 * Versalien, gleiche Rundung. Die Farbwahl im Editor bleibt möglich —
 * wer dort eine Hintergrundfarbe setzt, bekommt sie auch.
 */
.fliesstext .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.62em 1.15em;
	border: 2px solid var(--rot);
	border-radius: var(--radius);
	background-color: var(--rot);
	color: #fff;
	font-family: var(--schrift-plakat);
	font-size: 1.08rem;
	font-weight: 600;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--takt) ease, border-color var(--takt) ease,
		color var(--takt) ease, transform var(--takt) ease;
}

.fliesstext .wp-block-button__link:hover {
	background-color: var(--rot-tief, #8f0f18);
	border-color: var(--rot-tief, #8f0f18);
	color: #fff;
	transform: translateY(-1px);
}

/* „Umriss" — der leise Knopf für alles Zweitrangige. */
.fliesstext .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--kante);
	color: var(--tinte);
}

.fliesstext .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--flaeche);
	border-color: var(--rot);
	color: var(--rot);
}

/* Eine im Editor gewählte Farbe soll gewinnen. */
.fliesstext .wp-block-button__link.has-background {
	border-color: transparent;
}

/* --- Blockstile für Gruppen ------------------------------- */

/*
 * Damit lassen sich wiederkehrende Bausteine ohne HTML bauen. Alle drei
 * arbeiten nur mit dem, was in der Gruppe liegt — Überschrift, Absatz,
 * Knopf —, damit sie im Editor normal bearbeitbar bleiben.
 */

/* „Kasten": heller Grund, roter Balken links. Für Hinweise, Spenden,
   Mithelfen, Auszeichnungen. */
.fliesstext .wp-block-group.is-style-kasten {
	padding: clamp(1.4rem, 3.5vw, 2rem);
	background: var(--flaeche);
	border-left: 3px solid var(--rot);
	border-radius: var(--radius-gross);
}

/*
 * In einer Spalte auf volle Höhe: Zwei Kästen nebeneinander mit
 * unterschiedlich viel Text sahen sonst aus wie zwei verschiedene
 * Bausteine.
 */
.fliesstext .wp-block-column > .wp-block-group.is-style-kasten {
	height: 100%;
}

/*
 * Der erste und letzte Inhalt eines Kastens braucht keinen eigenen
 * Außenabstand — der Kasten hat schon einen Innenabstand.
 *
 * Die zweite Zeile ist der eigentliche Punkt: WordPress schiebt bei
 * Gruppen je nach Layout einen `.wp-block-group__inner-container`
 * dazwischen. Trifft die Regel nur die direkten Kinder, wird der
 * Behälter zurückgesetzt — die Überschrift darin behält ihren Abstand,
 * und über ihr klaffen 87 statt 32 Pixel.
 */
.fliesstext .wp-block-group.is-style-kasten > :first-child,
.fliesstext .wp-block-group.is-style-kasten > .wp-block-group__inner-container > :first-child {
	margin-top: 0;
}

.fliesstext .wp-block-group.is-style-kasten > :last-child,
.fliesstext .wp-block-group.is-style-kasten > .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}

/* „Zahl mit Beschriftung": erste Zeile groß und rot, zweite klein. */
.fliesstext .wp-block-group.is-style-zahl {
	padding: 1.4rem 1rem;
	border: 1px solid var(--kante);
	border-radius: var(--radius-gross);
	text-align: center;
}

.fliesstext .wp-block-group.is-style-zahl > .wp-block-group__inner-container > :first-child,
.fliesstext .wp-block-group.is-style-zahl > :first-child {
	margin: 0;
	font-family: var(--schrift-plakat);
	line-height: 1;
	font-weight: 700;
	color: var(--rot);
	text-transform: none;
}

.fliesstext .wp-block-group.is-style-zahl > .wp-block-group__inner-container > :first-child + *,
.fliesstext .wp-block-group.is-style-zahl > :first-child + * {
	margin: 0.35rem 0 0;
	/* Nicht grau: Die Beschriftung sagt erst, wofür die Zahl steht —
	   sie darf nicht schwächer wirken als die Zahl selbst. */
	color: var(--tinte);
}

/*
 * Die Größen stehen bewusst in `:where()`.
 *
 * Damit haben sie keine Spezifität und gelten nur, solange im Editor
 * nichts gewählt ist. Wer dort „L" und „M" einstellt, bekommt auch „L"
 * und „M" — vorher gewann meine Regel, und die Einstellung tat nichts.
 */
:where(.fliesstext .wp-block-group.is-style-zahl) > :first-child,
:where(.fliesstext .wp-block-group.is-style-zahl) > .wp-block-group__inner-container > :first-child {
	font-size: clamp(1.8rem, 5vw, 2.6rem);
}

:where(.fliesstext .wp-block-group.is-style-zahl) > :first-child + *,
:where(.fliesstext .wp-block-group.is-style-zahl) > .wp-block-group__inner-container > :first-child + * {
	font-size: 0.85rem;
}

/* „Kleingedrucktes": Formalia am Seitenende. */
.fliesstext .wp-block-group.is-style-leise {
	padding-top: 1.25rem;
	border-top: 1px solid var(--kante);
	font-size: 0.9rem;
	color: var(--tinte-leise);
}

.fliesstext .wp-block-group.is-style-leise > :first-child,
.fliesstext .wp-block-group.is-style-leise > .wp-block-group__inner-container > :first-child {
	margin-top: 0;
}


/*
 * Spalten.
 *
 * Das Stapeln auf schmalen Schirmen erledigt WordPress selbst (unter
 * 782 Pixeln) — dafür braucht es hier nichts. Was fehlt, ist der
 * Abstand: Beim Stapeln stehen die Spalten sonst dichter beieinander
 * als zwei Absätze, und man sieht nicht mehr, wo die eine aufhört.
 */
.fliesstext .wp-block-columns {
	margin-block: clamp(2rem, 5vw, 3.25rem);
}

/* Ein Kasten für sich steht ebenfalls freier. */
.fliesstext > .wp-block-group.is-style-kasten {
	margin-block: clamp(2rem, 5vw, 3rem);
}

/* Das Kleingedruckte am Ende bekommt Abstand nach oben und unten. */
.fliesstext .wp-block-group.is-style-leise {
	margin-top: clamp(2.5rem, 6vw, 4rem);
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/*
 * Raster mit fester Spaltenzahl.
 *
 * Der Raster-Block kennt zwei Betriebsarten. Mit **Mindestbreite** legt
 * WordPress selbst um, sobald es eng wird. Mit **fester Spaltenzahl**
 * nicht: Zwei Spalten bleiben zwei Spalten, auch auf 390 Pixeln — dort
 * sind das 167 Pixel je Spalte, und alles Feste darin ragt hinaus.
 *
 * Deshalb wird unterhalb der Handy-Grenze auf eine Spalte gestellt.
 * `!important` ist nötig, weil WordPress die Spaltenzahl als
 * seitenbezogene Regel mit hoher Spezifität ausgibt.
 *
 * Wer bewusst zwei nebeneinander behalten will — etwa zwei kleine
 * Symbole —, nimmt dafür den Spalten-Block mit abgeschaltetem Stapeln.
 */
@media (max-width: 46em) {
	.fliesstext .wp-block-group.is-layout-grid,
	.fliesstext .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (max-width: 48.8em) {
	.fliesstext .wp-block-columns {
		row-gap: 2.5rem;
	}

	/* Die erste Überschrift einer gestapelten Spalte braucht oben keinen
	   zusätzlichen Abstand — der Zeilenabstand des Rasters reicht. */
	.fliesstext .wp-block-column > :first-child {
		margin-top: 0;
	}
}

/*
 * Listen im Fließtext.
 *
 * **Nur die aus dem Editor.** Beim ersten Anlauf galten die Regeln für
 * jede Liste im Inhaltsbereich — also auch für die Terminliste (ein
 * `<ol>`), die Albumkacheln und die Eckdaten eines Termins. Vor den
 * Terminen stand danach „1.“, vor jeder Fotokachel ein roter Punkt.
 *
 * Deshalb jetzt eng gefasst: Der Block „Liste“ trägt immer
 * `wp-block-list`; ältere Inhalte aus dem klassischen Editor stehen
 * unmittelbar im Fließtext. Alles, was das Theme selbst baut, hat
 * beides nicht.
 *
 * Der Browser rückt Listen von Haus aus um rund vierzig Pixel ein — sie
 * standen dadurch sichtbar weiter innen als die Absätze darüber und
 * darunter. Jetzt hängen die Aufzählungszeichen im Rand: Der **Text**
 * beginnt auf derselben Linie wie der übrige Fließtext, das Zeichen
 * steht links daneben. Wer einrücken will, benutzt den Einzug-Knopf im
 * Editor — daraus wird eine verschachtelte Liste.
 */
.fliesstext > ul,
.fliesstext > ol,
.fliesstext .wp-block-list {
	margin: 1.1em 0;
	padding-left: 0;
	list-style: none;
}

.fliesstext > ul > li,
.fliesstext > ol > li,
.fliesstext .wp-block-list > li {
	position: relative;
	padding-left: 1.35em;
	margin-bottom: 0.35em;
}

.fliesstext > ul > li:last-child,
.fliesstext > ol > li:last-child,
.fliesstext .wp-block-list > li:last-child {
	margin-bottom: 0;
}

/* Punkt in Vereinsrot statt des grauen Standardzeichens. */
.fliesstext > ul > li::before,
.fliesstext ul.wp-block-list > li::before {
	content: '';
	position: absolute;
	left: 0.25em;
	top: 0.62em;
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background: var(--rot);
}

/* Nummerierte Listen zählen selbst. */
.fliesstext > ol,
.fliesstext ol.wp-block-list {
	counter-reset: ifmayc-liste;
}

.fliesstext > ol > li,
.fliesstext ol.wp-block-list > li {
	counter-increment: ifmayc-liste;
	padding-left: 1.8em;
}

.fliesstext > ol > li::before,
.fliesstext ol.wp-block-list > li::before {
	content: counter(ifmayc-liste) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--schrift-plakat);
	font-weight: 600;
	color: var(--rot);
	font-variant-numeric: tabular-nums;
}

/* Verschachtelte Listen — der Einzug-Knopf im Editor. */
.fliesstext .wp-block-list li > ul,
.fliesstext .wp-block-list li > ol,
.fliesstext > ul li > ul,
.fliesstext > ol li > ol {
	margin: 0.4em 0 0.6em 1.2em;
}

.fliesstext .wp-block-list li > ul > li::before {
	background: none;
	border: 1px solid var(--rot);
}

/*
 * Bilder im Fließtext.
 *
 * Ein Foto ohne jede Fassung wirkt im Text wie hineingefallen. Runde
 * Ecken und ein leiser Schatten setzen es ab, ohne es einzurahmen.
 */
/*
 * **Nur Bilder aus dem Editor.**
 *
 * `.fliesstext img` galt für jedes Bild im Inhaltsbereich — also auch
 * für die Album-Kacheln. Deren `height: 100%` wurde dadurch auf `auto`
 * gesetzt, und Querformate füllten ihr Quadrat nicht mehr aus: unten
 * blieb ein heller Streifen. Dieselbe Falle wie zuvor bei den Listen,
 * nur schwerer zu sehen.
 *
 * Deshalb an der Struktur festgemacht: Bilder aus dem Editor stehen in
 * einem `<figure>`, in einem Absatz oder in einem der Bild-Blöcke. Die
 * Kacheln des Themes stehen in keinem davon.
 */
.fliesstext > figure,
.fliesstext .wp-block-image {
	margin: 2rem 0;
}

.fliesstext > figure img,
.fliesstext > p img,
.fliesstext .wp-block-image img,
.fliesstext .wp-block-media-text__media img,
.fliesstext .wp-block-gallery img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.fliesstext > figure img,
.fliesstext .wp-block-image img {
	box-shadow: var(--schatten-klein);
}

.fliesstext figcaption,
.fliesstext .wp-element-caption {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--tinte-leise);
	text-align: left;
}

/* Ausrichtung: Text läuft um das Bild herum. */
.fliesstext .alignleft {
	float: left;
	margin: 0.4rem 2rem 1.5rem 0;
	max-width: 50%;
}

.fliesstext .alignright {
	float: right;
	margin: 0.4rem 0 1.5rem 2rem;
	max-width: 50%;
}

.fliesstext .aligncenter {
	margin-inline: auto;
	text-align: center;
}

.fliesstext .aligncenter img {
	margin-inline: auto;
}

/* Überschriften sollen nicht neben einem umflossenen Bild kleben. */
.fliesstext h2,
.fliesstext h3 {
	clear: both;
}

/*
 * Breiter als der Text, aber nicht über den Rand hinaus. Bewusst ohne
 * `100vw`: Das rechnet die Bildlaufleiste mit und schöbe die ganze
 * Seite waagerecht.
 */
.fliesstext .alignwide {
	margin-inline: calc(-1 * clamp(0rem, 3vw, 3rem));
	max-width: none;
	width: auto;
}

.fliesstext .alignfull {
	margin-inline: calc(-1 * var(--rand));
	max-width: none;
	width: auto;
}

.fliesstext .alignfull img,
.fliesstext .alignwide img {
	width: 100%;
}

.fliesstext .alignfull img {
	border-radius: 0;
}

/*
 * Medien und Text.
 *
 * Der eingebaute Block von WordPress — Bild links oder rechts, Text
 * daneben, auf schmalen Schirmen untereinander. Hier bekommt er nur
 * Luft, runde Ecken und einen sinnvollen Umbruchpunkt.
 */
/*
 * Luft um die großen Bausteine.
 *
 * Ein Absatz braucht eine Zeile Abstand, ein Bild mit Text daneben
 * deutlich mehr — sonst klebt es am Fließtext darüber.
 */
.fliesstext .wp-block-media-text {
	margin-block: clamp(2.5rem, 6vw, 4rem);
	border-radius: var(--radius-gross);
	overflow: hidden;
	align-items: center;
}

.fliesstext .wp-block-media-text__media img {
	border-radius: 0;
	box-shadow: none;
}

/*
 * Kein Innenabstand ohne sichtbaren Grund.
 *
 * WordPress gibt der Textspalte von Haus aus `padding: 0 8%` mit. Ohne
 * Hintergrund sieht man davon nur, dass der Text weiter rechts anfängt
 * als die Überschrift darüber — es wirkt wie ein Einzug, den niemand
 * gesetzt hat. Deshalb: Abstand nur **zum Bild hin**, und zwar so viel,
 * dass beides nicht aneinanderklebt.
 */
.fliesstext .wp-block-media-text__content {
	padding: 0 0 0 clamp(1.25rem, 3vw, 2.5rem);
}

/* Liegt das Bild rechts, gehört der Abstand auf die andere Seite. */
.fliesstext .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	padding: 0 clamp(1.25rem, 3vw, 2.5rem) 0 0;
}

/* Im Kasten gibt es einen Hintergrund — dort ist der Abstand sichtbar
   begründet und läuft ringsum. */
.fliesstext .wp-block-media-text.is-style-kasten .wp-block-media-text__content,
.fliesstext .wp-block-media-text.is-style-kasten.has-media-on-the-right .wp-block-media-text__content {
	padding: clamp(1.25rem, 3vw, 2.5rem);
}

.fliesstext .wp-block-media-text__content > :first-child {
	margin-top: 0;
}

.fliesstext .wp-block-media-text__content > :last-child {
	margin-bottom: 0;
}

/* Blockstil „Als Kasten“: Text auf heller Fläche, Bild randlos daran. */
.fliesstext .wp-block-media-text.is-style-kasten {
	background: var(--flaeche);
	box-shadow: var(--schatten-klein);
}

/* Blockstil „Ohne Schatten“ für Bilder. */
.fliesstext .wp-block-image.is-style-rahmenlos img {
	box-shadow: none;
}

/*
 * Blockstil „Vergrößerbar“.
 *
 * Eine Lupe in der Ecke sagt, dass da etwas passiert — ohne sie klickt
 * niemand ein Bild an, weil Bilder auf Webseiten meistens nichts tun.
 * Sie erscheint beim Überfahren und bei Tastaturfokus.
 */
.fliesstext .wp-block-image.is-style-vergroessern,
.fliesstext .wp-block-image.ifmayc-vergroessern,
.fliesstext .wp-block-media-text.ifmayc-vergroessern .wp-block-media-text__media {
	position: relative;
	width: fit-content;
}

/* In der Medienspalte füllt das Bild die Spalte — dort keine Verengung. */
.fliesstext .wp-block-media-text.ifmayc-vergroessern .wp-block-media-text__media {
	width: auto;
}

.fliesstext .wp-block-image.is-style-vergroessern img,
.fliesstext .wp-block-image.ifmayc-vergroessern img,
.fliesstext .wp-block-media-text.ifmayc-vergroessern .wp-block-media-text__media img {
	cursor: zoom-in;
	transition: filter var(--takt) ease;
}

.fliesstext .wp-block-image.is-style-vergroessern::after,
.fliesstext .wp-block-image.ifmayc-vergroessern::after,
.fliesstext .wp-block-media-text.ifmayc-vergroessern .wp-block-media-text__media::after {
	content: '';
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background-color: rgba(23, 20, 15, 0.65);
	/* Lupe als Grafik im Stylesheet — spart eine Datei und einen
	   zusätzlichen Knopf im Dokument. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Ccircle cx='10.75' cy='10.75' r='6.75'/%3E%3Cpath d='m15.7 15.7 4.3 4.3' stroke-linecap='round'/%3E%3Cpath d='M10.75 8v5.5M8 10.75h5.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.15rem;
	opacity: 0;
	transform: scale(0.9);
	transition: opacity var(--takt) ease, transform var(--takt) ease;
	pointer-events: none;
}

.fliesstext .wp-block-image.is-style-vergroessern:hover::after,
.fliesstext .wp-block-image.is-style-vergroessern:focus-within::after,
.fliesstext .wp-block-image.ifmayc-vergroessern:hover::after,
.fliesstext .wp-block-image.ifmayc-vergroessern:focus-within::after,
.fliesstext .wp-block-media-text.ifmayc-vergroessern .wp-block-media-text__media:hover::after,
.fliesstext .wp-block-media-text.ifmayc-vergroessern .wp-block-media-text__media:focus-within::after {
	opacity: 1;
	transform: none;
}

.fliesstext .wp-block-image.is-style-vergroessern img:focus-visible,
.fliesstext .wp-block-image.ifmayc-vergroessern img:focus-visible,
.fliesstext .wp-block-media-text.ifmayc-vergroessern .wp-block-media-text__media img:focus-visible {
	outline: 3px solid var(--rot);
	outline-offset: 3px;
}

/* Ausgerichtete Bilder behalten ihre Breite. */
.fliesstext .wp-block-image.is-style-vergroessern.alignwide,
.fliesstext .wp-block-image.is-style-vergroessern.alignfull,
.fliesstext .wp-block-image.is-style-vergroessern.aligncenter,
.fliesstext .wp-block-image.ifmayc-vergroessern.alignwide,
.fliesstext .wp-block-image.ifmayc-vergroessern.alignfull,
.fliesstext .wp-block-image.ifmayc-vergroessern.aligncenter {
	width: auto;
}

/* --- Zitate ---------------------------------------------- */

/*
 * Ein Zitat besteht aus zwei Dingen: dem Gesagten und dem, der es
 * gesagt hat. Vorher standen beide gleich groß untereinander, die
 * Quelle sah aus wie ein zweiter Absatz.
 */
.fliesstext blockquote {
	margin: 2em 0;
	padding: 0.1em 0 0.1em 1.3em;
	border-left: 3px solid var(--rot);
	font-size: 1.1em;
	line-height: 1.5;
	color: var(--tinte);
}

.fliesstext blockquote p {
	margin: 0 0 0.5em;
}

.fliesstext blockquote p:last-of-type {
	margin-bottom: 0;
}

.fliesstext blockquote cite {
	display: block;
	margin-top: 0.7em;
	font-family: var(--schrift-plakat);
	font-size: 0.72em;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tinte-leise);
}

/* Ein Strich davor macht aus der Zeile eine Zuschreibung. */
.fliesstext blockquote cite::before {
	content: '— ';
	color: var(--rot);
}

/*
 * Mittig ausgerichtet ergibt ein Balken links keinen Sinn — er zeigt
 * dann auf nichts. Stattdessen ein kurzer Strich über dem Zitat.
 */
.fliesstext blockquote.has-text-align-center {
	padding: 0;
	border-left: 0;
	max-width: 46rem;
	margin-inline: auto;
}

.fliesstext blockquote.has-text-align-center::before {
	content: '';
	display: block;
	width: 3rem;
	height: 3px;
	margin: 0 auto 1.2em;
	background: var(--rot);
}

/*
 * Blockstil „Plakat“: helle Fläche, große Schrift.
 *
 * Vorher dunkel — als einziger dunkler Block zwischen heller Seite und
 * hellem Sponsorenband wirkte er wie ein Fremdkörper und zog mehr
 * Aufmerksamkeit auf sich als die Termine darunter. Jetzt dieselbe
 * Fläche wie die übrigen Kästen, mit rotem Band oben.
 */
.fliesstext .wp-block-quote.is-style-plakat {
	position: relative;
	border: 0;
	border-top: 4px solid var(--rot);
	padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 5vw, 4rem);
	background: var(--flaeche);
	border-radius: var(--radius-gross);
	color: var(--tinte);
	text-align: center;
	max-width: none;
	margin-inline: 0;
}

.fliesstext .wp-block-quote.is-style-plakat::before {
	/* Kein Strich, sondern ein Anführungszeichen — es sitzt als großes,
	   blasses Zeichen hinter dem Text. */
	content: '\201C';
	display: block;
	position: absolute;
	top: 0.15em;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	height: auto;
	margin: 0;
	background: none;
	/* Bewusst eine Serifenschrift: In der Plakatschrift sieht das
	   Anführungszeichen aus wie zwei Schrägstriche. */
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 5rem;
	line-height: 1;
	color: rgba(175, 18, 29, 0.18);
	pointer-events: none;
}

.fliesstext .wp-block-quote.is-style-plakat p {
	position: relative;
	margin: 0 auto;
	max-width: 34ch;
	font-family: var(--schrift-plakat);
	font-size: clamp(1.35rem, 3vw, 2rem);
	font-weight: 500;
	line-height: 1.25;
}

.fliesstext .wp-block-quote.is-style-plakat cite {
	margin-top: 1.1em;
	color: var(--tinte-leise);
}

.fliesstext .wp-block-quote.is-style-plakat cite::before {
	color: var(--rot);
}

/*
 * Der große Zitatblock von WordPress.
 *
 * Er bringt ein eigenes <blockquote> mit — das muss zurückgesetzt
 * werden, sonst steht der rote Balken der gewöhnlichen Zitate mitten
 * darin und die Abstände verdoppeln sich.
 */
.fliesstext .wp-block-pullquote {
	margin: 2.5rem 0;
	padding: clamp(1.25rem, 3vw, 2rem) 0;
	border-top: 3px solid var(--rot);
	border-bottom: 3px solid var(--rot);
	text-align: center;
}

.fliesstext .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	max-width: none;
	font-size: inherit;
}

.fliesstext .wp-block-pullquote blockquote::before {
	content: none;
}

.fliesstext .wp-block-pullquote p {
	margin: 0 auto;
	max-width: 34ch;
	font-family: var(--schrift-plakat);
	font-size: clamp(1.3rem, 3vw, 1.9rem);
	line-height: 1.25;
}

.fliesstext .wp-block-pullquote cite {
	margin-top: 0.8em;
}

@media (max-width: 46em) {
	/* Umflossene Bilder haben auf schmalen Schirmen keinen Sinn — daneben
	   bleiben zwei, drei Wörter je Zeile übrig. */
	.fliesstext .alignleft,
	.fliesstext .alignright {
		float: none;
		max-width: 100%;
		margin-inline: 0;
	}

	/*
	 * Untereinander — aber in der Reihenfolge, die oben gewählt wurde.
	 *
	 * Steht das Bild links, gehört es beim Stapeln **darüber**; steht es
	 * rechts, **darunter**. Sonst springt es beim Verkleinern des
	 * Fensters von einer Seite auf die andere, und der Text, der sich
	 * darauf bezieht, steht plötzlich davor statt dahinter.
	 *
	 * Nur wenn im Block „Auf Mobilgeräten stapeln“ eingeschaltet ist —
	 * wer das abwählt, will die Spalten behalten.
	 */
	.fliesstext .wp-block-media-text.is-stacked-on-mobile {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.fliesstext .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 1;
	}

	.fliesstext .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
		grid-column: 1;
		grid-row: 2;
		/* Untereinander gibt es kein „daneben“ — Abstand nach oben. */
		padding: 1.25rem 0 0 !important;
	}

	/* Bild rechts: beim Stapeln unten. */
	.fliesstext .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__media {
		grid-row: 2;
	}

	.fliesstext .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__content {
		grid-row: 1;
		padding: 0 0 1.25rem !important;
	}

	.fliesstext .wp-block-media-text.is-stacked-on-mobile.is-style-kasten .wp-block-media-text__content {
		padding: 1.25rem !important;
	}
}

/* --- Sonstiges ------------------------------------------- */

/* Gruppen auf der Suchseite. */
.suchgruppe {
	margin-bottom: clamp(2rem, 5vw, 3rem);
}

.suchgruppe__titel {
	font-size: clamp(1.2rem, 2.5vw, 1.5rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tinte-leise);
	padding-bottom: 0.35em;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--kante);
}

.suchliste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.suchliste li + li {
	border-top: 1px solid var(--kante);
}

.suchliste a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 1rem;
	padding: 0.7rem 0;
	text-decoration: none;
	color: var(--tinte);
}

.suchliste a:hover .suchliste__titel {
	color: var(--rot);
}

.suchliste__titel {
	font-family: var(--schrift-plakat);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.suchliste__meta {
	font-size: 0.9rem;
	color: var(--tinte-leise);
	font-variant-numeric: tabular-nums;
}

/*
 * Keine aktiven Ini-Bands.
 *
 * Deutlicher als ein grauer Platzhalter, aber ruhiger als ein
 * Aufmacher — die Seite hat darunter noch die früheren Bands, und die
 * sollen nicht überstrahlt werden.
 */
.keinebands {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--flaeche);
	border-left: 3px solid var(--rot);
	border-radius: var(--radius-gross);
}

.keinebands__satz {
	margin: 0 0 0.5rem;
	font-family: var(--schrift-plakat);
	font-size: clamp(1.15rem, 2.5vw, 1.45rem);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.keinebands__text {
	margin: 0 0 1.25rem;
	color: var(--tinte-leise);
}

.keinebands__wege {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
}

/* Absätze aus dem Editor sollen den Kasten nicht auseinanderziehen. */
.leerzustand > :first-child {
	margin-top: 0;
}

.leerzustand > :last-child {
	margin-bottom: 0;
}

.leerzustand {
	padding: 1.75rem;
	background: var(--flaeche);
	border-radius: var(--radius-gross);
	color: var(--tinte-leise);
	text-align: center;
}

.fehlerseite {
	text-align: center;
	padding-block: 2rem 3rem;
}

.fehlerseite__code {
	margin: 0;
	font-family: var(--schrift-plakat);
	font-size: clamp(5rem, 22vw, 11rem);
	font-weight: 700;
	line-height: 0.85;
	color: var(--rot);
	opacity: 0.16;
	letter-spacing: 0.02em;
}

.fehlerseite .seitentitel {
	margin-top: -0.3em;
}

.fehlerseite__hinweis {
	font-size: 0.9rem;
	color: var(--tinte-leise);
}

.fehlerseite__wege {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
}

.fehlerseite .search-form,
.archivkopf .search-form {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.search-form input[type='search'] {
	padding: 0.6em 0.8em;
	border: 1px solid var(--kante);
	border-radius: var(--radius);
	font: inherit;
	min-width: 14rem;
}

.search-form input[type='search']:focus {
	border-color: var(--rot);
	outline: none;
	box-shadow: 0 0 0 3px rgba(175, 18, 29, 0.16);
}

.search-form input[type='submit'] {
	padding: 0.6em 1.1em;
	border: 2px solid var(--rot);
	border-radius: var(--radius);
	background: var(--rot);
	color: #fff;
	font-family: var(--schrift-plakat);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

.search-form input[type='submit']:hover {
	background: var(--rot-tief);
	border-color: var(--rot-tief);
}

.nach-oben {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 20;
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rot);
	color: #fff;
	box-shadow: var(--schatten-gross);
	cursor: pointer;
	transition: background-color var(--takt) ease, transform var(--takt) ease;
}

.nach-oben:hover {
	background: var(--rot-tief);
	transform: translateY(-2px);
}

.nach-oben[hidden] {
	display: none;
}

.nach-oben svg {
	width: 1.35rem;
	height: 1.35rem;
}

/* Widgets: Sponsoren und soziale Netze */

.social-link {
	display: inline-block;
	box-sizing: border-box;
	width: 2.4rem;
	margin: 0 0.25rem 0.25rem 0;
	padding: 0.4rem;
	background: var(--flaeche);
	border-radius: 50%;
}

.social-link img {
	display: block;
	max-height: 100%;
	filter: grayscale(100%);
	transition: filter var(--takt) ease;
}

.social-link:hover img,
.ifmayc-sponsor-link:hover img {
	filter: none;
}

.ifmayc-sponsor-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 14rem;
	height: 5rem;
	margin-bottom: 1rem;
	padding: 0.5rem;
	border: 1px solid var(--kante);
	border-radius: var(--radius);
	background: var(--papier);
	transition: border-color var(--takt) ease;
}

.ifmayc-sponsor-link:hover {
	border-color: var(--rot);
}

.ifmayc-sponsor-link img {
	max-height: 100%;
	width: auto;
	filter: grayscale(100%);
	transition: filter var(--takt) ease;
}

/* =========================================================
   6. Redaktioneller Inhalt
   ========================================================= */

/*
 * Inhalte laufen über die volle Breite der Bahn. Wer einzelne Abschnitte
 * schmaler setzen will, gibt dem Block im Editor die Zusatzklasse
 * `schmal` — dann greift die Lesebreite unten.
 */
.fliesstext > .schmal {
	max-width: 68ch;
}

.fliesstext > :first-child {
	margin-top: 0;
}

.fliesstext h2 {
	margin-top: 1.8em;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.fliesstext h3 {
	margin-top: 1.5em;
	font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}

.fliesstext h4 {
	margin-top: 1.4em;
	font-size: 1.2rem;
	color: var(--rot);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.fliesstext img {
	border-radius: var(--radius);
}

.fliesstext table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5em;
	font-size: 0.95rem;
}

.fliesstext th,
.fliesstext td {
	padding: 0.6em 0.8em;
	border: 1px solid var(--kante);
	text-align: left;
}

.fliesstext thead th {
	background: var(--wand);
	color: #fff;
	font-family: var(--schrift-plakat);
	font-size: 1.05rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-color: var(--wand);
}

.fliesstext tbody tr:nth-child(even) {
	background: var(--flaeche);
}

/*
 * Blockstil „Beschriftung links“.
 *
 * Die erste Spalte bekommt eine feste, schmale Breite; der Rest gehört
 * dem Inhalt. `table-layout: fixed` ist dafür nötig — sonst rechnet der
 * Browser weiter nach dem Inhalt und ignoriert die Angabe.
 */
.fliesstext .wp-block-table.is-style-beschriftung table {
	table-layout: fixed;
}

.fliesstext .wp-block-table.is-style-beschriftung td:first-child,
.fliesstext .wp-block-table.is-style-beschriftung th:first-child {
	width: 14rem;
	font-family: var(--schrift-plakat);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.92em;
	color: var(--tinte-leise);
	vertical-align: top;
}

/* Auf schmalen Schirmen ist eine feste Spalte zu viel verlangt. */
@media (max-width: 46em) {
	.fliesstext .wp-block-table.is-style-beschriftung table {
		table-layout: auto;
	}

	.fliesstext .wp-block-table.is-style-beschriftung td:first-child,
	.fliesstext .wp-block-table.is-style-beschriftung th:first-child {
		width: auto;
		white-space: nowrap;
	}
}

.wp-block-table {
	overflow-x: auto;
}

/*
 * Blockstil „Streifen“.
 *
 * WordPress legt dabei einen Rahmen unter die **ganze Tabelle**
 * (`border-bottom` am `<figure>`). Der endet nicht an der letzten Zeile,
 * sondern ein Stück darunter — sichtbar als dünner Strich im Nichts.
 * Bei uns tragen die Streifen die Gliederung, ein zusätzlicher Strich
 * braucht es nicht.
 */
.fliesstext .wp-block-table.is-style-stripes {
	border-bottom: 0;
}

/* Streifen in der Fläche des Themes statt im WordPress-Grau. */
.fliesstext .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--flaeche);
}

.fliesstext .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
	background: none;
}

/* Ohne Zellenrahmen — sonst stehen Streifen und Gitter nebeneinander
   und man sieht doppelt so viele Linien wie nötig. */
.fliesstext .wp-block-table.is-style-stripes th,
.fliesstext .wp-block-table.is-style-stripes td {
	border: 0;
}

.wp-block-image.bordered img,
img.bordered {
	border: 1px solid var(--kante);
}

.wp-block-image.inline {
	margin: 0;
}

.float-right {
	float: right;
	margin: 0 0 1rem 1.5rem;
}

.text-center {
	text-align: center;
}

/* =========================================================
   7. Schmale Bildschirme
   ========================================================= */

@media (max-width: 62em) {
	.fuss__spalten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 46em) {
	:root {
		--leiste-inhalt: 4.5rem;
	}

	/* Menü als aufklappbare Liste. */
	/* Auf schmalen Bildschirmen wieder als Reihe mit Umbruch: Dort sind
	   es Logo, Schalter und darunter das aufgeklappte Menü. */
	.hauptnav__bahn {
		display: flex;
		flex-wrap: wrap;
		min-height: var(--leiste-inhalt);
	}

	.hauptnav__liste {
		margin-left: 0;
		justify-content: flex-start;
	}

	.hauptnav__marke {
		opacity: 1;
		visibility: visible;
		transform: none;
		font-size: 1rem;
	}

	.hauptnav__marke img {
		/* Auf dem Handy gedeckelt: Ein 6-rem-Logo nähme oben den halben
		   Bildschirm ein. */
		height: min(var(--leisten-logo, 2.2rem), 2.6rem);
	}

	.hauptnav__schalter {
		display: flex;
		margin-left: auto;
	}

	/* Aufgeklappt braucht es immer einen dunklen Grund, sonst steht die
	   Liste auf dem Foto. */
	.hauptnav__liste.ist-offen {
		background: rgba(23, 21, 19, 0.97);
		margin-inline: calc(-1 * var(--rand));
		padding-inline: var(--rand);
	}

	/*
	 * Auf schmalen Bildschirmen bleibt in der Leiste nur der Knopf —
	 * die Symbole würden sie überfüllen und stehen deshalb im
	 * aufgeklappten Menü.
	 */
	.navaktionen {
		order: 2;
		margin-left: auto;
		margin-right: 0.5rem;
	}

	.navaktionen__social {
		display: none;
	}

	/*
	 * Im aufgeklappten Menü rücken die Symbole unter die Menüpunkte.
	 * Dort brauchen sie Luft nach unten: Vorher klebten sie an der
	 * Unterkante der Leiste, als wären sie abgeschnitten.
	 */
	.hauptnav__liste.ist-offen ~ .navaktionen {
		flex-wrap: wrap;
		padding-bottom: 1.25rem;
	}

	.hauptnav__liste.ist-offen ~ .navaktionen .navaktionen__social {
		display: flex;
		gap: 0.6rem;
	}

	.navaktionen__knopf {
		font-size: 0.9rem;
		padding: 0.35em 0.8em;
	}

	.hauptnav__liste {
		display: none;
		flex-direction: column;
		justify-content: flex-start;
		gap: 0;
		width: 100%;
		padding-bottom: 0.5rem;
	}

	.hauptnav__liste.ist-offen {
		display: flex;
	}

	.hauptnav__liste > li > a {
		padding: 0.6em 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.hauptnav__liste > li > a::after {
		bottom: 0.2em;
	}

	.terminband__flaeche {
		gap: 0.15em 0.6em;
	}

	.terminband__label {
		flex-basis: 100%;
		font-size: 0.78rem;
	}

	.terminband__datum,
	.terminband__name {
		font-size: 1.12rem;
	}

	.terminband__kuenstler {
		flex-basis: 100%;
		font-size: 0.85rem;
	}

	.terminband__mehr {
		display: none;
	}

	.hauptnav .hat-untermenue {
		flex-wrap: wrap;
	}

	.untermenue {
		position: static;
		width: 100%;
		opacity: 1;
		visibility: hidden;
		transform: none;
		display: none;
		background: transparent;
		box-shadow: none;
		padding: 0 0 0.4rem 1rem;
	}

	.hat-untermenue.ist-offen > .untermenue {
		display: block;
		visibility: visible;
	}

	.untermenue a {
		color: rgba(255, 255, 255, 0.85);
		font-size: 1rem;
		padding: 0.45em 0;
		border-left: 0;
	}

	.untermenue a:hover,
	/* Anker im Menü: markiert wird der Abschnitt, der gerade im Bild
   steht — gesetzt von theme.js, nicht von WordPress. */
.untermenue .ist-aktiv > a,
.untermenue .current-menu-item > a {
		background: transparent;
		color: #fff;
	}

	.fuss__spalten {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.fuss__zeile {
		margin-left: 0;
	}

	.fotofenster__blatt--zurueck {
		left: 0.5rem;
	}

	.fotofenster__blatt--vor {
		right: 0.5rem;
	}

	.eventseite__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Auf schmalen Schirmen nicht mitlaufen lassen — dort nähme der
	   Flyer sonst dauerhaft den halben Bildschirm ein. */
	.eventseite__flyer {
		position: static;
		max-width: 22rem;
	}

	.karte__flaeche {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	/* Feste Höhen aus dem Block auf dem Handy deckeln. */
	.karte--flach  .karte__flaeche { height: 13rem; }
	.karte--mittel .karte__flaeche { height: 17rem; }
	.karte--hoch   .karte__flaeche { height: 22rem; }

	.aufmacher--klein  { min-height: 60dvh; }
	.aufmacher--mittel { min-height: 78dvh; }
	.aufmacher--gross  { min-height: 90dvh; }

	.event {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 0.9rem;
	}

	/* Der Datumsabschnitt rückt über den Text, der Flyer daneben. */
	.stub {
		grid-row: 1;
	}

	.event__flyer {
		grid-row: 1;
	}

	.event__text {
		grid-column: 1 / -1;
	}

	.infofenster__inhalt {
		grid-template-columns: minmax(0, 1fr);
		padding: 1.5rem 1.25rem;
	}

	.infofenster__flyer img {
		width: 100%;
		max-width: 18rem;
	}

	.anriss,
	.band,
	.band:nth-child(even) {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.band:nth-child(even) .band__bild {
		order: 0;
	}

	.band__bild img {
		max-width: 16rem;
	}

	.anriss__bild img {
		max-width: 100%;
		aspect-ratio: 16 / 9;
	}

	.nachbarn__link--zurueck {
		text-align: left;
	}
}

/* =========================================================
   8. Rücksichtnahmen
   ========================================================= */

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

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

	.aufmacher__weiter {
		animation: none;
	}

	.album__bild img {
		animation: none;
	}
}

@media print {
	body {
		background: none;
		color: #000;
	}

	.hauptnav,
	.aufmacher__weiter,
	.aufmacher,
	.fuss::before,
	.hauptnav,
	.terminband,
	.sponsorenband,
	.fuss,
	.nach-oben,
	.blaettern,
	.event__aktionen {
		display: none;
	}

	.seite {
		max-width: none;
		box-shadow: none;
	}
}