/*
 * Stile der Seite.
 *
 * Eine Datei, ohne Sass und ohne Build-Schritt: Was hier steht, ist sofort
 * auf der Seite zu sehen. Der Aufbau von oben nach unten:
 *
 *   1. Schriften
 *   2. Werte (Farben, Maße, Zeiten)
 *   3. Grundlagen
 *   4. Gerüst (Kopf, Menü, Bahn, Fuß)
 *   5. Bausteine (Knöpfe, Trenner, Aufmacher, Listen)
 *   6. Redaktioneller Inhalt (Blöcke und Blockstile)
 *   7. Feinschliff an den Plugins
 *   8. Bewegung und Rücksicht
 *
 * ---------------------------------------------------------------------
 * Die drei Regeln, an denen diese Seite hängt
 * ---------------------------------------------------------------------
 *
 * 1. FARBE. Alle Farben stehen unter „2. Werte“ und sonst nirgends. Sie
 *    kommen von dort auch in die pj-Plugins, siehe inc/plugin-bruecke.php.
 *
 *    Weiße Schrift auf Eisblau hat einen Kontrast von 2,0:1 und ist nicht
 *    lesbar. Im Logo steht sie so, das ist als Zeichnung richtig, als
 *    Text nicht. Auf Eisblau schreibt die Seite ausnahmslos in Navy
 *    (9,6:1). Umgekehrt trägt Eisblau auf Navy hervorragend (8,9:1) und
 *    ist dort die Akzentfarbe. Auf Weiß ist Eisblau nur Fläche, nie Text
 *    und nie ein Rahmen, auf den es ankommt.
 *
 * 2. FORM. Flächen sind eckig — das Quadrat ist die Form des Logos.
 *    Bedienelemente sind mit .4rem leicht gerundet. Das ist kein
 *    Widerspruch, sondern die Regel der pj-Plugins: Die runden ihre
 *    Knöpfe und Felder genau so. Sie von außen flachzubügeln bräche beim
 *    nächsten Plugin-Update, also übernimmt das Theme ihren Wert.
 *
 * 3. KEIN SCHATTEN. Tiefe entsteht durch Linien und Flächen, nicht durch
 *    Weichzeichner. Die einzige Ausnahme ist das aufgeklappte Menü auf
 *    dem Handy, das tatsächlich über dem Inhalt liegt.
 */

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

/*
 * Archivo trägt alles Gelesene: eine Grotesk mit ruhiger Zeichnung und
 * kräftigen Schnitten. Sie liegt als variable Schrift bei, deshalb eine
 * Datei für alle Stärken von 100 bis 900.
 */
@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-var.woff2') format('woff2-variations'),
	     url('../fonts/archivo-var.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/*
 * Wire One ist die Displayschrift und der Grund, warum die Seite aussieht
 * wie das Logo: dieselbe Haarlinie, dieselben runden Enden, dieselbe
 * schmale Anlage. Sie hat genau eine Stärke.
 *
 * Sie ist so dünn, dass sie unter etwa 2rem verschwindet. Deshalb steht
 * sie nur in Überschriften ab h2 und im Aufmacher. Kleinere Überschriften
 * setzt Archivo. Wer sie in Fließtext einsetzt, bekommt graue Streifen
 * statt Wörtern.
 *
 * Beide Schriften liegen im Theme, beschnitten auf den lateinischen
 * Zeichensatz. Es geht nichts an Google Fonts oder ein anderes CDN, es
 * entsteht also keine Datenübertragung an Dritte.
 */
@font-face {
	font-family: 'Wire One';
	src: url('../fonts/wire-one-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

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

:root {
	/* --- Farben ------------------------------------------------- */

	/*
	 * Die dunkle Farbe war bis Fassung 1.50 ein tiefes Blau. Eine
	 * Messung des Vereinszeichens hat gezeigt, dass es dort gar nicht
	 * vorkommt: Das Zeichen besteht zu 85 % aus Eisblau und zu 12 % aus
	 * Schwarz. Das Navy war die naheliegende dunkle Verwandte von
	 * Eisblau — und hat die Seite in eine Richtung gezogen, die zum
	 * Verein nicht gehört.
	 *
	 * Jetzt ein Anthrazit mit einem Hauch Blau. Nicht #000: Reines
	 * Schwarz ist auf einem Bildschirm ein Loch, kein Ton.
	 *
	 * Die alten Namen stehen weiter unten als Zweitname — sie kommen in
	 * gespeicherten Inhalten und in der Brücke zu den Modulen vor.
	 */
	--dunkel: #1a1d23;
	--dunkel-tief: #0f1115;
	--dunkel-hoch: #2b3038;

	--eis: #87cedc;
	--eis-hell: #6ec1e4;
	--eis-tief: #3f96ac;

	/*
	 * Dunst und Linie eine Spur kühler und heller als zuvor. Neben
	 * Anthrazit statt Navy wirkten sie sonst blaustichig — dieselben
	 * Werte, die auf einer blauen Seite ruhig aussahen, sehen auf einer
	 * schwarz-weißen nach Farbe aus.
	 */
	--dunst: #f0fafd;
	--linie: #e2e8ec;
	--papier: #ffffff;

	--tinte: #1a1d23;
	--leise: #5c636e;

	/*
	 * Zweitnamen. `is-style-navy` steht in gespeicherten Beiträgen, die
	 * Brücke zu den Modulen erwartet die Namen — ein Umbenennen, das zur
	 * Hälfte durchgeht, ist schlimmer als ein Zweitname.
	 */
	--navy: var(--dunkel);
	--navy-tief: var(--dunkel-tief);
	--navy-hoch: var(--dunkel-hoch);

	/*
	 * Reines Weiß, für Schrift auf dunklem Grund.
	 *
	 * Getrennt von `--papier`, obwohl beide gerade denselben Wert haben.
	 * Das eine ist der Untergrund der Seite, das andere die Schriftfarbe
	 * darauf. Bekäme das Papier irgendwann einen Hauch Wärme, müsste die
	 * Schrift auf Navy weiß bleiben — mit einer Variablen für beides
	 * würde sie stillschweigend mit eingefärbt.
	 */
	--weiss: #ffffff;

	/* --- Schriften ---------------------------------------------- */
	--schrift-text: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--schrift-plakat: 'Wire One', 'Archivo', Arial, sans-serif;

	/* --- Maße ---------------------------------------------------- */
	/*
	 * Die Breite der Seite.
	 *
	 * 90rem sind rund 1440 Pixel — spürbar breiter als das, was
	 * WordPress-Themes gewöhnlich nehmen (meist 1200), und immer noch
	 * schmal genug, dass auf einem 27-Zoll-Schirm ein Rand bleibt. Eine
	 * Seite, die bis an beide Fensterkanten läuft, wirkt nicht großzügig,
	 * sondern ungerahmt.
	 *
	 * Der Fließtext wächst **nicht** mit: Er steht in `--lesebreite`.
	 * Breiter wird also nur, was breit sein soll — Bilder, Kacheln,
	 * Bänder.
	 */
	--bahn: 90rem;
	--rand: clamp(1.25rem, 5vw, 4.5rem);

	/*
	 * Die Breite, in der Fließtext steht.
	 *
	 * ---------------------------------------------------------------
	 * Nachgemessen, nicht geschätzt
	 * ---------------------------------------------------------------
	 *
	 * Sie stand bis Fassung 1.51 auf 52rem. Nachgemessen mit Archivo bei
	 * 17 Pixeln sind das **107 Zeichen je Zeile** — der Satzstandard
	 * liegt bei 60 bis 78. Bei so langen Zeilen findet das Auge beim
	 * Umbruch den nächsten Zeilenanfang nicht mehr zuverlässig; man liest
	 * dieselbe Zeile zweimal oder überspringt eine.
	 *
	 * Das war der eigentliche Grund, warum die Textseiten „langweilig“
	 * wirkten: Es lag nicht an den Farben, sondern daran, dass sie sich
	 * schwer lasen.
	 *
	 * 38rem sind rund 78 Zeichen — die obere Kante des Empfohlenen, was
	 * zu einer Seite passt, die im Übrigen großzügig ist.
	 */
	--lesebreite: 38rem;

	/*
	 * Höhe der Leiste. Sie hängt an der Höhe des Zeichens darin, das im
	 * Customizer eingestellt wird; header.php setzt --leisten-zeichen als
	 * Inline-Stil. Der obere Abstand des Inhalts hängt wiederum hieran,
	 * damit beides nicht auseinanderlaufen kann.
	 */
	--leisten-zeichen: 2.6rem;
	--leisten-hoehe: calc(var(--leisten-zeichen) + 2.25rem);

	/*
	 * Bis Fassung 1.15.0 lag hier ein Terminband unter der Menüzeile,
	 * und `--kopf-hoehe` rechnete dessen Höhe hinzu. Das Band ist einer
	 * Marke unten in der Ecke gewichen; die Variable bleibt, weil an ihr
	 * der obere Abstand des Inhalts, der Aufmacher und das Handymenü
	 * hängen — und weil dort irgendwann wieder etwas stehen kann.
	 */
	--band-hoehe: 0rem;
	--kopf-hoehe: calc(var(--leisten-hoehe) + var(--band-hoehe));

	/*
	 * Zwei Radien und nicht mehr. Null für Flächen, .4rem für alles, was
	 * man anfasst. Siehe Regel 2 oben.
	 */
	--radius: 0;
	--radius-bedienung: .4rem;

	--takt: 180ms;

	/*
	 * Die Abstandsleiter.
	 *
	 * Vier Stufen, und alles Größere kommt aus einer davon. Vorher stand
	 * an jedem Abschnitt ein eigenes `clamp()` mit selbst gewählten
	 * Werten — zwölf verschiedene, von denen keine zwei gleich waren.
	 * Das fällt einzeln nicht auf und in der Summe schon: Die Seite hat
	 * dann keinen Takt, sondern zwölf.
	 *
	 * Von eng nach weit:
	 *
	 *   raum-eng        innerhalb eines Blocks
	 *   raum-block      ein Block zum nächsten
	 *   raum-gross      Innenabstand großer Flächen
	 *   raum-abschnitt  ein Abschnitt zum nächsten
	 *   raum-weit       zwischen den großen Teilen einer Seite
	 *
	 * Nicht jeder Abstand der Seite läuft darüber — Innenabstände von
	 * Knöpfen und Kacheln sind an ihrem Bauteil richtiger aufgehoben.
	 * Was zwei Dinge voneinander trennt, kommt aber von hier.
	 */
	--raum-eng: clamp(1rem, 2vw, 1.5rem);
	--raum-block: clamp(1.5rem, 4vw, 2.5rem);
	--raum-gross: clamp(2rem, 5vw, 3.5rem);
	--raum-abschnitt: clamp(2.5rem, 6vw, 4rem);
	--raum-weit: clamp(3rem, 8vw, 5rem);
}

/* =========================================================
   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` auf demselben Element steht, gewinnt das, und `hidden` bleibt
 * wirkungslos. Einmal von Hand nachziehen ist Zufall, zweimal ist ein
 * Muster, und Muster gehören an die Wurzel.
 */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	/* Angeklickte Ankerpunkte sollen nicht unter der Leiste landen. */
	scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

/*
 * Dem Browser sagen, dass die Seite hell ist. Ohne diese Angabe zeichnet
 * er Bedienelemente, die er selbst beisteuert — Auswahlfelder,
 * Bildlaufleisten, das Datumsfeld — auf einem dunkel eingestellten
 * System in seinen eigenen dunklen Farben, mitten in einer weißen Seite.
 */
:root {
	color-scheme: light;
}

/*
 * Markierter Text in den Vereinsfarben. Eine Kleinigkeit, aber es ist
 * die eine Stelle, an der sonst das Blau des Betriebssystems auf der
 * Seite auftaucht.
 */
::selection {
	background: var(--eis);
	color: var(--dunkel);
}

body {
	margin: 0;
	background-color: var(--papier);
	color: var(--tinte);
	font-family: var(--schrift-text);
	font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* --- Überschriften -------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	color: var(--dunkel);
	text-wrap: balance;
}

/*
 * h1 und h2 in der Haarlinienschrift. Sie darf groß sein, ohne laut zu
 * werden: Eine Schrift, die nur aus einer Linie besteht, schreit auch bei
 * sechs Zentimetern Höhe nicht. Genau deshalb steht sie hier und nicht
 * eine fette Grotesk in derselben Größe.
 */
/*
 * Keine erzwungene Großschreibung. Wire One trägt beides gut, und die
 * Seite braucht beides: Der Aufmacher schreibt den Vereinsnamen klein,
 * wie er auch im Logo steht, ein Bildband darunter darf in Versalien
 * schreien. Wer `text-transform` fest einbaut, nimmt der Redaktion diese
 * Wahl und bekommt „E.V.“ statt „e.V.“.
 */
/*
 * ---------------------------------------------------------------------
 * Wire One ist für den Auftakt, nicht für die Gliederung
 * ---------------------------------------------------------------------
 *
 * Bis Fassung 1.50 stand **jede** `h2` in der Plakatschrift. Auf einer
 * Seite mit sechs Abschnitten war sie damit kein Auftakt mehr, sondern
 * Tapete — und sie hat dreimal Ärger gemacht: unlesbar in Versalien,
 * grau bei kleinen Größen, dünn neben kräftigem Text.
 *
 * Eine Haarlinienschrift hält wenige, große Auftritte aus. Sie steht
 * deshalb nur noch dort, wo etwas **anfängt**:
 *
 *   - der Titel einer Seite und der Aufmacher
 *   - die Jahreszahlen im Rückblick
 *   - die Zahlen der Zahlenreihe
 *   - das große Zitat
 *   - der Tag auf einer Terminkachel
 *
 * Alles, was eine Seite **gliedert**, steht in Archivo: halbfett, eng
 * gesetzt, in der dunklen Farbe. Das ist die Schrift, die man liest,
 * ohne sie zu bemerken — und genau das soll eine Zwischenüberschrift.
 */
h1 {
	font-family: var(--schrift-plakat);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .03em;
	font-size: clamp(2.5rem, 1.4rem + 4.5vw, 5rem);
}

h2, h3, h4, h5, h6 {
	font-family: var(--schrift-text);
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--dunkel);
}

/*
 * Die Abschnittsüberschrift: kräftig und eng, nicht groß und dünn. Der
 * Größensprung zum Fließtext genügt — 1,75rem neben 1rem sind
 * Unterschied genug, wenn das Gewicht stimmt.
 */
h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem);
	font-weight: 700;
}

h3 { font-size: 1.1875rem; font-weight: 700; }
h4 { font-size: 1.125rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 700; }

h6 {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--leise);
}

/* --- Fließtext -------------------------------------------------- */

p {
	margin: 0 0 1.15em;
	/*
	 * Verhindert die einzelne Silbe in der letzten Zeile. `balance` wäre
	 * für Absätze falsch (es rechnet nur bis zu einer Handvoll Zeilen und
	 * macht lange Texte kürzer als nötig), `pretty` sieht nur den Schluss
	 * an. Browser, die es nicht kennen, brechen wie bisher um.
	 */
	text-wrap: pretty;
}

a {
	color: var(--dunkel);
	text-decoration-line: underline;
	text-decoration-color: var(--eis);
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
	transition: color var(--takt) ease, text-decoration-color var(--takt) ease;
}

a:hover,
a:focus-visible {
	color: var(--dunkel-hoch);
	text-decoration-color: var(--dunkel-hoch);
}

/*
 * Der Fokusrahmen ist keine Verzierung, sondern für alle, die mit der
 * Tastatur unterwegs sind, die einzige Auskunft darüber, wo sie gerade
 * stehen. Er wird nie abgeschaltet, nur eingefärbt.
 */
:focus-visible {
	outline: 2px solid var(--eis-tief);
	outline-offset: 3px;
	border-radius: 1px;
}

strong, b { font-weight: 700; }

small { font-size: .875rem; }

hr {
	height: 1px;
	margin: 3rem 0;
	border: 0;
	background: var(--linie);
}

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

img {
	display: block;
	border-radius: var(--radius);
}

figure {
	margin: 2rem 0;
}

figcaption {
	margin-top: .6rem;
	color: var(--leise);
	font-size: .875rem;
	line-height: 1.5;
}

ul, ol {
	margin: 0 0 1.15em;
	padding-left: 1.3em;
}

li {
	margin-bottom: .35em;
}

/*
 * Das gewöhnliche Zitat: eisblaue Kante, etwas größer als der Fließtext,
 * sonst nichts. Es ist fremder Text auf der Seite — dieselbe Zeichnung
 * wie bei Hinweisen und Pressezitaten.
 */
blockquote {
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--eis);
	color: var(--tinte);
	font-size: 1.125rem;
	line-height: 1.6;
}

blockquote cite {
	display: block;
	margin-top: .5rem;
	color: var(--leise);
	font-size: .8125rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

code, kbd, pre {
	font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
	font-size: .9em;
}

code {
	padding: .1em .35em;
	background: var(--dunst);
	border-radius: var(--radius-bedienung);
}

pre {
	overflow-x: auto;
	padding: 1.25rem;
	background: var(--dunst);
	border-left: 2px solid var(--eis);
	line-height: 1.6;
}

table {
	width: 100%;
	margin-bottom: 2rem;
	border-collapse: collapse;
	font-size: .9375rem;
}

/*
 * Eine Linie zwischen den Zeilen, nicht über und unter jeder. Beides
 * ergibt ein Gitter, in dem der Inhalt in Kästchen sitzt statt in einer
 * Tabelle zu stehen.
 */
th, td {
	padding: .7rem .9rem;
	border-bottom: 1px solid var(--linie);
	text-align: left;
	vertical-align: top;
}

th {
	font-weight: 600;
	color: var(--dunkel);
}

/* --- Nur für Vorleseprogramme ---------------------------------- */

.nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Die Sprungmarke ist versteckt, bis sie den Fokus bekommt. Wer mit der
 * Tastatur ankommt, soll nicht durch zwölf Menüpunkte tabben müssen.
 */
.sprungmarke {
	position: absolute;
	top: -100%;
	left: var(--rand);
	z-index: 200;
	padding: .75rem 1.25rem;
	background: var(--dunkel);
	color: var(--weiss);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--radius-bedienung) var(--radius-bedienung);
}

.sprungmarke:focus {
	top: 0;
}

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

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

/*
 * Eine schmale Bahn für Fließtext.
 *
 * ---------------------------------------------------------------------
 * 52rem waren nicht die Lesebreite, sondern die Lesebreite plus Rand
 * ---------------------------------------------------------------------
 *
 * `.bahn` hat innen `padding-inline: var(--rand)` — bei 52rem blieben für
 * den Text also rund 44rem, und für alles, was selbst noch Innenabstand
 * hat (der Zitatkasten eines Presseartikels), noch einmal weniger. Auf
 * dem Bildschirm sah der Artikel gequetscht aus: eine schmale Spalte
 * mitten in viel Weiß.
 *
 * 62rem geben dem Fließtext etwa 54rem. Das ist mehr als die Lesespur der
 * Inhaltsseiten (38rem), und das ist hier richtig: Dort steht Text neben
 * Bildern und Kacheln in einem Raster, hier steht er allein. Eine Zeile
 * bleibt trotzdem unter der Grenze, ab der das Auge beim Zeilenwechsel
 * die Spur verliert, weil die Schrift auf diesen Seiten größer gesetzt
 * ist.
 */
.bahn--schmal {
	max-width: 62rem;
}

/*
 * Ein Vorspann über einer Liste: der Text der Beitragsseite oder die
 * Beschreibung einer Rubrik. Steht in der Bahn und nicht im Raster, weil
 * darin nur ein paar Sätze stehen und kein Bildband.
 */
.vorspann {
	max-width: var(--lesebreite);
	margin-bottom: var(--raum-block);
}

.haupt {
	display: block;
	min-height: 40vh;
	padding-block: var(--raum-weit) clamp(3rem, 8vw, 6rem);
}

/*
 * Auf Unterseiten schiebt die feste Leiste den Inhalt nach unten. Auf der
 * Startseite mit Aufmacher nicht: Dort liegt die Leiste über dem
 * Aufmacher, der seinen Abstand selbst mitbringt.
 */
.ist-unterseite .haupt {
	padding-top: calc(var(--kopf-hoehe) + var(--raum-weit));
}

/* ---------- Kopfleiste ---------- */

.kopf {
	position: relative;
	z-index: 100;
}

/*
 * Menüzeile und Terminband stecken zusammen im Kopfbalken, und der ist
 * das Element, das steht. Läge das Band darunter im Fluss, schöbe es
 * beim Scrollen unter die Leiste und wäre nach einer halben Sekunde weg.
 */
.kopfbalken {
	position: absolute;
	inset: 0 0 auto;
	z-index: 100;
	/*
	 * Das Untermenüband hängt hieran und ragt darunter hinaus. Ohne
	 * diese Zeile wäre es abgeschnitten, sobald irgendwo darüber ein
	 * `overflow: hidden` steht — und der Aufmacher hat eines.
	 */
	overflow: visible;
}

.kopfbalken--fest {
	position: fixed;
}

.leiste {
	height: var(--leisten-hoehe);
	transition: background-color var(--takt) ease, border-color var(--takt) ease;
}

/*
 * Die Leiste ist immer navy.
 *
 * Eine frühere Fassung ließ sie über dem Aufmacher durchsichtig und
 * blendete sie beim Scrollen nach Weiß. Das ist ein hübscher Effekt und
 * ein schlechtes Menü: Die Schriftfarbe wechselt mitten in der Bewegung,
 * und wer auf halbem Weg stehen bleibt, sieht weiße Schrift auf einer
 * halb weißen Fläche. Navy ist außerdem die Farbe, in der die Leiste auf
 * der bisherigen Seite steht.
 *
 * Damit ist auch der Fühler in theme.js entfallen, der das Scrollen
 * gemeldet hat: Er hatte nur diese eine Aufgabe. Die alten Klassen
 * stehen hier noch mit drin, damit eine Seite, die im Cache noch das
 * frühere Markup hält, nicht kurz ohne Leiste dasteht.
 */
.leiste,
.leiste--hell,
.leiste--ueber {
	background: var(--dunkel);
	border-bottom: 1px solid rgba(135, 206, 220, .22);
	color: var(--weiss);
}

/*
 * Unter der Adminleiste beginnen, wenn jemand angemeldet ist.
 *
 * WordPress schiebt die Seite um 32 Pixel nach unten, aber ein Element
 * mit `position: fixed` hängt am Fenster und nicht an der Seite: Es
 * landet unter der schwarzen Leiste, und vom Vereinszeichen ist nur die
 * untere Hälfte zu sehen. Unter 782 Pixeln ist die Adminleiste 46 Pixel
 * hoch und nicht mehr fest, sondern scrollt mit — deshalb dort ohne
 * Versatz.
 */
.admin-bar .kopfbalken--fest {
	top: 32px;
}

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

/*
 * Kopf und Fuß laufen über die volle Fensterbreite, nicht in der Bahn.
 *
 * Das ist ein Unterschied ums Ganze: In der Bahn stehen Zeichen und Menü
 * auf einem großen Bildschirm irgendwo in der Mitte, mit zwei
 * Handbreiten Leere links und rechts daneben. Am Rand verankert wirkt
 * die Leiste wie ein Rahmen um die Seite statt wie ein Kasten darin.
 *
 * Der Inhalt der Seite bleibt in der Bahn — er soll lesbar sein, nicht
 * breit.
 */
.leiste__bahn {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	height: 100%;
	padding-inline: var(--rand);
}

/* ---------- Die Zeichen der Netzwerke in der Leiste ---------- */

.leiste__social .social {
	padding: 0;
}

.leiste__social .social__link {
	width: 2.1rem;
	height: 2.1rem;
	background: transparent;
	border: 1px solid rgba(135, 206, 220, .35);
	color: var(--weiss);
}

.leiste__social .social__link:hover,
.leiste__social .social__link:focus-visible {
	background: var(--eis);
	border-color: var(--eis);
	color: var(--dunkel);
	transform: none;
}

.leiste__social .social__link .icon {
	width: 15px;
	height: 15px;
}

/* Auf dem Handy ist dafür kein Platz; dort steht alles in der Fußzeile. */
@media (max-width: 60rem) {
	.leiste__social {
		display: none;
	}
}

/* ---------- Das Zeichen links ---------- */

/*
 * Das Zeichen ganz links, das Menü ganz rechts. `margin-right: auto`
 * drückt alles Weitere an den rechten Rand — ohne eine feste Breite
 * annehmen zu müssen, die bei einem längeren Vereinsnamen nicht stimmt.
 */
.marke {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin-right: auto;
	color: inherit;
	text-decoration: none;
	font-family: var(--schrift-plakat);
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.marke img {
	display: block;
	width: auto;
	height: var(--leisten-zeichen);
	transition: opacity var(--takt) ease;
}

/*
 * Das Zeichen reagiert beim Überfahren. Es war das einzige bedienbare
 * Element der Seite ohne Rückmeldung: Es sieht aus wie ein Bild, ist aber
 * der Weg zur Startseite, und wer das nicht weiß, probiert es nicht aus.
 *
 * Nur die Deckkraft, keine Bewegung: Das Zeichen steht in der festen
 * Leiste über allem, und etwas, das dort wandert, zieht bei jedem
 * Mausweg über den Kopf die Aufmerksamkeit auf sich.
 */
.marke:hover img,
.marke:focus-visible img {
	opacity: .75;
}

.marke:hover,
.marke:focus-visible {
	color: inherit;
	text-decoration: none;
}

/* ---------- Hauptmenü ---------- */

.hauptnav__liste {
	display: flex;
	align-items: center;
	gap: clamp(.5rem, 1.6vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hauptnav__punkt {
	position: relative;
	margin: 0;
}

.hauptnav__link {
	display: inline-block;
	/*
	 * `flex: 0 1 auto` und nicht `1`: Im Menüpunkt liegt daneben der
	 * Aufklappknopf, und der Verweis soll nur so breit sein wie sein
	 * Wort. Ohne die Angabe zöge er sich über den Knopf hinweg, und die
	 * Unterlinie liefe unter dem Pfeil weiter.
	 */
	flex: 0 1 auto;
	padding: .4rem 0;
	color: inherit;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

/*
 * Die Unterlinie wächst von links heraus. Sie liegt als eigenes Element
 * unter dem Text und nicht als `text-decoration`, weil sie sich sonst
 * nicht bewegen ließe.
 */
.hauptnav__link span {
	position: relative;
	display: inline-block;
	padding-bottom: .25rem;
}

.hauptnav__link span::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--eis);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--takt) ease;
}

/* Beim Überfahren färbt sich auch die Schrift ein, nicht nur die Linie. */
.hauptnav__link:hover,
.hauptnav__link:focus-visible {
	color: var(--eis);
}

.hauptnav__link:hover span::after,
.hauptnav__link:focus-visible span::after,
.ist-hier > .hauptnav__link span::after {
	transform: scaleX(1);
}

/* Der Punkt, auf dem man steht, bekommt die Akzentfarbe. */
.ist-hier > .hauptnav__link span::after {
	background: var(--eis);
}

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

/*
 * Ein kompaktes Feld unter dem Menüpunkt.
 *
 * ---------------------------------------------------------------------
 * Der Weg hierher, in zwei Irrwegen
 * ---------------------------------------------------------------------
 *
 * Fassung 1: schmales Feld, dritte Ebene seitlich daneben. Das ist der
 * Aufbau von Windows 95 — man fährt einen Gang entlang, verlässt ihn
 * versehentlich, alles ist zu.
 *
 * Fassung 2: ein Band über die volle Fensterbreite mit Spalten. Löste den
 * Gang, war aber für den Normalfall dieses Vereins völlig überdimensioniert:
 * **Zwei Ebenen sind die Regel, drei die seltene Ausnahme.** Für einen
 * einzigen Unterpunkt klappte ein Streifen über den halben Bildschirm auf.
 *
 * Diese Fassung ist so groß wie ihr Inhalt. Die dritte Ebene steht
 * eingerückt im selben Feld — kein zweiter Gang, kein Band. Bei einem
 * Unterpunkt ist es ein kleines Feld, bei zwölfen ein hohes.
 */

/*
 * Der Menüpunkt trägt Verweis und Aufklappknopf **nebeneinander**.
 *
 * Ohne `display: flex` stand der Knopf unter dem Wort. Der Grund ist
 * unauffällig: Der Verweis ist `inline-block`, der Knopf aber `grid` —
 * und `grid` ist ein Blockelement, es beginnt also eine neue Zeile. Im
 * Menü sah das so aus, als hinge unter „Über uns“ ein Pfeil in der Luft,
 * und die Punkte mit Untermenü standen höher als die ohne.
 *
 * `align-items: center` richtet beide auf einer Achse aus, statt sie an
 * der Schriftlinie hängen zu lassen — der Pfeil hat keine Schriftlinie.
 */
.hauptnav__punkt--ebene-0 {
	position: relative;
	display: flex;
	align-items: center;
}

/* ---------- Der Knopf zum Aufklappen ---------- */

/*
 * Er sitzt in der Lücke zum nächsten Menüpunkt, statt sie zu verbreitern
 * — der negative Außenabstand zieht ihn fast ganz aus dem Fluss. Sonst
 * stünde zwischen zwei Punkten mit Untermenü doppelt so viel Luft wie
 * zwischen zweien ohne, und die Leiste wirkte ungleichmäßig gesetzt.
 */
.hauptnav__aufklapp {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	/*
	 * Der Versatz nach oben — und warum Rechnen hier nicht reicht.
	 *
	 * Nachgemessen ergibt sich fast nichts: Die Mitte des Zeilenkastens
	 * liegt bei dieser Schrift 33,5 Einheiten über der Grundlinie, die
	 * Mitte der Versalien bei 34,5. Ein Hundertstel Geviert. Auch der
	 * Pfad des Zeichens ist inzwischen mittig im Feld (siehe
	 * `inc/icons.php`), und der Schwerpunkt der beiden Striche liegt
	 * genau auf der Mitte seines Rahmens.
	 *
	 * Rechnerisch stünde er also mittig — und sah trotzdem zu tief aus.
	 *
	 * Der Grund ist, wie ein Winkel gelesen wird: **nicht als Rahmen,
	 * sondern als Spitze.** Das Auge nimmt den Scheitel unten als „das
	 * Zeichen“ und die beiden Arme als Zulauf darauf. Liegt der Rahmen
	 * mittig, liegt die Spitze darunter — und das Zeichen wirkt
	 * abgesackt.
	 *
	 * Ein Vierzehntel Geviert nach oben rückt die Spitze auf die Mitte
	 * der Versalien. Der Wert ist ausprobiert und nicht ausgerechnet;
	 * er steht als eigene Angabe da, damit man ihn nachstellen kann,
	 * ohne diesen Absatz zu lesen.
	 */
	--winkel-versatz: -.14em;

	margin-top: var(--winkel-versatz);
	margin-left: .3rem;
	margin-right: -.5rem;
	padding: 0;
	background: none;
	border: 0;
	color: currentColor;
	cursor: pointer;
	opacity: .7;
	transition: opacity var(--takt) ease;
}

.hauptnav__aufklapp:hover,
.hauptnav__aufklapp:focus-visible {
	opacity: 1;
}

.hauptnav__aufklapp .icon {
	width: 1rem;
	height: 1rem;
	/*
	 * Etwas dünner als die übrigen Zeichen. Bei elf Pixeln wirkt eine
	 * Strichstärke von 1,6 wie ein Klotz; daneben steht Text in
	 * Halbfett, und der Winkel soll ihn begleiten, nicht überstimmen.
	 */
	stroke-width: 2.2;
	transition: transform var(--takt) ease;
}

.hat-kinder:hover > .hauptnav__aufklapp .icon,
.hauptnav__aufklapp[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

/* ---------- Das Feld ---------- */

.hauptnav__unterliste {
	position: absolute;
	top: 100%;
	left: -1rem;
	z-index: 10;
	min-width: 14rem;
	margin: 0;
	padding: .5rem 0;
	list-style: none;
	background: var(--dunkel-tief);
	border-top: 2px solid var(--eis);
	/*
	 * Die eine erlaubte Ausnahme von der Schattenregel im Kopfbereich:
	 * Das Feld schwebt tatsächlich über dem Inhalt, und über einem
	 * dunklen Aufmacherfoto verschwände es sonst.
	 */
	box-shadow: 0 18px 40px -22px rgba(15, 17, 21, .9);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-.35rem);
	transition: opacity var(--takt) ease, transform var(--takt) ease, visibility var(--takt);
}

.hat-kinder:hover > .hauptnav__unterliste,
.hat-kinder:focus-within > .hauptnav__unterliste,
.hauptnav__aufklapp[aria-expanded="true"] + .hauptnav__unterliste {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/*
 * Am rechten Rand klappt das Feld nach links auf. Ohne diese Regel stünde
 * das Untermenü des letzten Menüpunkts halb außerhalb des Fensters — und
 * das Menü steht rechts.
 */
.hauptnav__punkt--ebene-0:nth-last-child(-n + 2) > .hauptnav__unterliste {
	left: auto;
	right: -1rem;
}

.hauptnav__unterliste .hauptnav__punkt {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.hauptnav__unterliste .hauptnav__link {
	flex: 1;
	display: block;
	padding: .5rem 1.1rem;
	color: rgba(255, 255, 255, .88);
	font-size: .9375rem;
	font-weight: 500;
	letter-spacing: .01em;
	text-transform: none;
	/*
	 * Die Kante links bleibt durchsichtig, bis man darauf zeigt. Sie
	 * springt dann nicht in der Breite, wie es ein erst dann gesetzter
	 * Rahmen täte — der Text rutschte bei jedem Überfahren um drei Pixel.
	 */
	border-left: 3px solid transparent;
	transition: background-color var(--takt) ease, border-color var(--takt) ease, color var(--takt) ease;
}

.hauptnav__unterliste .hauptnav__link:hover,
.hauptnav__unterliste .hauptnav__link:focus-visible,
.hauptnav__unterliste .current-menu-item > .hauptnav__link {
	background: rgba(135, 206, 220, .12);
	border-left-color: var(--eis);
	color: var(--weiss);
}

.hauptnav__unterliste .hauptnav__link span::after {
	display: none;
}

/* ---------- Die dritte Ebene ---------- */

/*
 * Eingerückt im selben Feld, nicht seitlich daneben.
 *
 * Sie kommt selten vor — zwei Ebenen sind der Normalfall. Für eine
 * Ausnahme lohnt kein zweiter Aufklappvorgang mit eigener Fläche, eigenem
 * Verhalten und eigener Randprüfung. Eingerückt darunter ist sie sofort
 * zu sehen und kostet nichts.
 */
.hauptnav__unterliste .hauptnav__unterliste {
	position: static;
	min-width: 0;
	width: 100%;
	padding: 0 0 .35rem;
	background: none;
	border-top: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.hauptnav__unterliste .hauptnav__unterliste .hauptnav__link {
	padding: .3rem 1.1rem .3rem 2rem;
	color: rgba(255, 255, 255, .68);
	font-size: .875rem;
	font-weight: 400;
}

.hauptnav__unterliste .hauptnav__unterliste .hauptnav__link:hover,
.hauptnav__unterliste .hauptnav__unterliste .hauptnav__link:focus-visible {
	color: var(--eis);
	background: none;
	border-left-color: transparent;
}

/* Im Feld selbst braucht die dritte Ebene keinen eigenen Knopf. */
.hauptnav__unterliste .hauptnav__aufklapp {
	display: none;
}

/* ---------- Schalter für das Handy ---------- */

.hauptnav__schalter {
	display: none;
	align-items: center;
	gap: .5rem;
	padding: .5rem .75rem;
	margin-left: auto;
	background: none;
	border: 1px solid currentColor;
	border-radius: var(--radius-bedienung);
	color: inherit;
	font-family: inherit;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ---------- Die Marke mit dem nächsten Termin ---------- */

/*
 * Unten in der Ecke statt als Streifen unter dem Menü.
 *
 * Ein Streifen quer über den Kopf kostet auf jedem Bildschirm Höhe, auch
 * wenn gerade niemand nach dem nächsten Termin sucht — und er sieht
 * genauso aus wie beim Schwesterverein. Diese Fassung nimmt dem
 * Aufmacher nichts weg, kommt erst nach dem ersten Bildschirm und lässt
 * sich wegklicken.
 *
 * Navy mit eisblauer Kante: dieselbe Zeichnung wie beim Hinweistext auf
 * der Terminkachel. Wer sie einmal gesehen hat, erkennt sie wieder.
 */
/*
 * Links unten, nicht rechts: Rechts sitzt der Knopf nach oben, und zwei
 * schwebende Dinge in derselben Ecke stapeln sich entweder oder decken
 * sich zu.
 */
/*
 * `hidden` bleibt wirksam, bis JavaScript die Marke freigibt. Ohne
 * Skript erscheint sie also gar nicht — das ist richtig so: Ein fest
 * über dem Inhalt liegender Kasten, den niemand wegbekommt, wäre
 * schlimmer als eine fehlende Auskunft.
 */
.terminmarke {
	position: fixed;
	left: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 95;
	display: flex;
	align-items: stretch;
	max-width: min(24rem, calc(100vw - 2rem));
	background: var(--dunkel);
	border-left: 3px solid var(--eis);
	color: var(--weiss);
	/*
	 * Die zweite erlaubte Ausnahme von der Schattenregel. Die Marke
	 * schwebt tatsächlich über dem Inhalt, und ohne die Absetzung
	 * verschwindet sie über einem dunklen Foto.
	 */
	box-shadow: 0 14px 34px -18px rgba(15, 17, 21, .9);
	transform: translateY(1rem);
	opacity: 0;
	transition: transform 260ms ease, opacity 260ms ease;
}

.terminmarke.ist-da {
	transform: none;
	opacity: 1;
}

/*
 * Ausgeblendet ist sie nicht nur durchsichtig, sondern auch nicht mehr
 * anzuklicken. Ohne `pointer-events` läge eine unsichtbare Fläche über
 * der Fußzeile, und Klicks auf das Impressum gingen ins Leere.
 */
.terminmarke:not(.ist-da) {
	pointer-events: none;
}

.terminmarke__flaeche {
	display: block;
	padding: .8rem 1.1rem .9rem;
	color: inherit;
	text-decoration: none;
}

.terminmarke__flaeche:hover,
.terminmarke__flaeche:focus-visible {
	color: inherit;
	background: rgba(135, 206, 220, .1);
}

.terminmarke :focus-visible {
	outline-color: var(--eis);
}

.terminmarke__label {
	display: block;
	margin-bottom: .2rem;
	color: var(--eis);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.terminmarke__zeile {
	display: flex;
	align-items: center;
	gap: .7rem;
}

.terminmarke__datum {
	display: flex;
	align-items: baseline;
	gap: .3rem;
	flex: 0 0 auto;
}

.terminmarke__tag {
	font-family: var(--schrift-plakat);
	font-size: 2rem;
	line-height: .9;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
	color: var(--eis);
}

.terminmarke__monat {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--eis);
}

/*
 * Der Name darf gekürzt werden. `min-width: 0` ist dafür nötig: Ein
 * Flex-Element schrumpft ohne diese Angabe nicht unter seine
 * Inhaltsbreite, und statt der Kürzung liefe die Marke über.
 */
.terminmarke__name {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .9375rem;
	font-weight: 600;
}

.terminmarke__pfeil {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--eis);
	transition: transform var(--takt) ease;
}

.terminmarke__flaeche:hover .terminmarke__pfeil {
	transform: translateX(3px);
}


/* Auf dem Handy über die volle Breite unten am Rand. */
@media (max-width: 40rem) {
	.terminmarke {
		right: 0;
		left: 0;
		bottom: 0;
		max-width: none;
		border-left: 0;
		border-top: 2px solid var(--eis);
	}

	.terminmarke__flaeche {
		flex: 1;
		min-width: 0;
		padding: .5rem .9rem .55rem;
	}

	/*
	 * Alles in eine Zeile. Über die volle Breite ist Platz dafür, und
	 * eine zweizeilige Leiste am unteren Rand nimmt dem Inhalt darüber zu
	 * viel weg — auf einem kleinen Schirm sind zwei Zentimeter ein
	 * Zehntel der Seite.
	 */
	.terminmarke__label {
		display: none;
	}

	.terminmarke__tag {
		font-size: 1.5rem;
	}

	.terminmarke__zeile {
		gap: .5rem;
	}

	/* Über die volle Breite deckt die Marke den Knopf nach oben zu. */
	.terminmarke.ist-da ~ .nach-oben {
		bottom: 4.5rem;
	}

	/* Und die Fußzeile braucht unten Luft, solange die Marke steht. */
	.marke-da .fuss {
		padding-bottom: 4.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.terminmarke {
		transform: none;
	}
}

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

/*
 * Die Fußzeile ist die einzige große dunkle Fläche der Seite. Eine glatte
 * Volltonfläche über 400 Pixel Höhe wirkt darin flach wie ein Fehler im
 * Druck, deshalb zwei Ebenen:
 *
 *  - ein sehr flacher radialer Verlauf, der zur Mitte hin aufhellt,
 *  - darüber eine Körnung, mit `soft-light` verrechnet.
 *
 * `struktur.jpg` stammt aus dem Theme des Schwestervereins und ist genau
 * dafür gemacht: um 128 zentriert und in der Körnung 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. Die Lautstärke regelt allein `opacity`.
 *
 * Die Ebene liegt bewusst *über* dem Verlauf. Läge die Textur darunter
 * und der Verlauf mit Deckkraft darüber, bliebe von ihren wenigen
 * Helligkeitsstufen rechnerisch nichts übrig: Die Datei würde geladen
 * und wäre unsichtbar.
 */
.fuss {
	position: relative;
	padding-block: clamp(3rem, 7vw, 5rem) 2rem;
	background-color: var(--dunkel);
	/*
	 * Die mittlere Stufe kommt aus der Farbliste.
	 *
	 * Bis Fassung 1.51 stand hier ein fester Wert (#0d1a63) — eine
	 * Aufhellung des alten Navy. Nach dem Farbwechsel leuchtete
	 * ausgerechnet in der Fußzeile noch ein blauer Fleck, während die
	 * ganze übrige Seite anthrazit war.
	 *
	 * **Ein fester Farbwert in einem Verlauf ist eine Farbe, die beim
	 * nächsten Wechsel niemand findet.** Auch eine Zwischenstufe gehört
	 * in die Liste.
	 */
	background-image: radial-gradient(
		ellipse 70% 80% at 50% 30%,
		var(--dunkel-hoch),
		var(--dunkel) 55%,
		var(--dunkel-tief) 100%
	);
	color: rgba(255, 255, 255, .82);
	font-size: .9375rem;
}

.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: .55;
	pointer-events: none;
}

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

/* ---------- Sponsorenband ---------- */

/*
 * Die Förderer stehen ganz unten und auf jeder Seite. Das ist keine
 * Gestaltungsfrage, sondern eine Zusage: Wer einen Verein trägt, soll
 * nicht auf einer Unterseite versteckt sein, die man erst suchen muss.
 *
 * Auf hellem Grund und nicht auf der navyblauen Fläche: Sponsorenlogos
 * kommen als PNG mit weißem oder durchsichtigem Hintergrund, und ein
 * schwarzes Logo auf Navy ist nicht zu erkennen. Der Streifen ist
 * deshalb hell und sitzt über der Fußzeile.
 */
.sponsorenband {
	padding-block: clamp(2rem, 4vw, 3rem);
	background: var(--dunst);
	border-top: 1px solid var(--linie);
}

.sponsorenband__titel {
	margin: 0 0 1.5rem;
	color: var(--dunkel);
	font-family: var(--schrift-plakat);
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .03em;
	text-align: center;
}

/*
 * Die Ausgabe kommt aus dem Vereinsmodul. Angefasst wird nur, was es
 * nicht wissen kann: dass es hier auf Dunstblau steht und nicht auf
 * Weiß.
 */
.sponsorenband .pjv-block {
	margin: 0;
}

.sponsorenband .pjv-block .pjv-kopf {
	display: none;
}

/*
 * Das Raster des Moduls stellt die Logos schon mittig — die Regel dafür
 * steht in dessen Stylesheet und braucht hier keine Wiederholung.
 *
 * Was fehlte, war der Fall „wenige Sponsoren“: Dort lief bis Fassung
 * 1.28.3 das Laufband, das die Liste zweimal hintereinander setzt. Bei
 * zwei Logos sah man beide Durchgänge gleichzeitig, dasselbe Logo stand
 * zweimal da, und am linken Rand hing ein angeschnittener Name. Ab vier
 * Logos geht die Rechnung auf, darunter schaltet der Shortcode jetzt
 * selbst aufs Raster um.
 */

.fuss a {
	color: var(--weiss);
	text-decoration-color: rgba(135, 206, 220, .55);
}

.fuss a:hover,
.fuss a:focus-visible {
	color: var(--eis);
	text-decoration-color: var(--eis);
}

.fuss :focus-visible {
	outline-color: var(--eis);
}

/*
 * Der Inhalt der Fußzeile läuft über die volle Breite, nur mit Rand.
 * Vier Spalten in einer 84rem-Bahn stehen auf einem großen Bildschirm
 * zusammengedrängt in der Mitte, während der navyblaue Grund bis zum
 * Rand reicht — das sah aus wie ein Fehler im Aufbau.
 */
.fuss__innen,
.sponsorenband__innen {
	width: 100%;
	padding-inline: var(--rand);
}

/*
 * ---------------------------------------------------------------------
 * Der Streifen, der nicht laufen muss
 * ---------------------------------------------------------------------
 *
 * `assets/js/sponsoren.js` setzt `ist-ruhig`, wenn alle Logos ohnehin in
 * den Streifen passen. Dann wäre die Bewegung nicht nur unnötig, sie
 * wäre falsch: Ein Laufband setzt die Liste zweimal, und wenn beide
 * Durchgänge gleichzeitig zu sehen sind, steht dasselbe Logo doppelt da.
 *
 * Im Ruhezustand also: zweite Spur weg, Bewegung aus, die verbliebene
 * Spur mittig. Der rechte Innenabstand der Spur muss dabei zurück —
 * er ist für den Umlauf gedacht und rückte die Reihe sonst nach links.
 */
.sponsorenband.ist-ruhig .pjv-laufband {
	justify-content: center;
	mask-image: none;
	-webkit-mask-image: none;
}

.sponsorenband.ist-ruhig .pjv-laufband-spur {
	animation: none;
	flex-wrap: wrap;
	justify-content: center;
	padding-right: 0;
}

.sponsorenband.ist-ruhig .pjv-laufband-spur[aria-hidden="true"] {
	display: none;
}


.fuss__spalten {
	display: grid;
	grid-template-columns: repeat(var(--fuss-spalten, 3), minmax(0, 1fr));
	gap: 2.5rem 3rem;
	padding-bottom: 3rem;
}

/*
 * Die Spaltenüberschriften stehen in der Plakatschrift und in Eisblau,
 * so wie auf der bisherigen Seite. Sie sind mit rund 1,6rem groß genug,
 * dass die Haarlinie trägt; kleiner dürfen sie nicht werden.
 */
.fuss .widget__titel,
.fuss__spalte h2,
.fuss__spalte h3 {
	margin-bottom: 1.1rem;
	color: var(--eis);
	font-family: var(--schrift-plakat);
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: .03em;
}

/*
 * Jeder Punkt in der Fußzeile bekommt das Kreuz davor. Das ist der
 * einzige Ort, an dem es ohne Zutun der Redaktion erscheint, und es
 * stand auch auf der bisherigen Seite dort.
 *
 * Gezeichnet als zwei Verläufe und nicht als Pluszeichen aus der
 * Schrift: Das aus der Schrift hat gerade Enden, das Zeichen des Vereins
 * runde.
 */
.fuss__spalte li,
.fussnav__liste li {
	position: relative;
	padding-left: 1.6rem;
}

.fuss__spalte li::before,
.fussnav__liste li::before {
	content: '';
	position: absolute;
	left: 0;
	width: .8rem;
	height: .8rem;

	/* Dieselbe Rechnung wie bei `.is-style-kreuze` — siehe dort. */
	top: .4em;
	top: calc((1lh - .8rem) / 2);
	background:
		linear-gradient(var(--eis), var(--eis)) center / 2px 100% no-repeat,
		linear-gradient(var(--eis), var(--eis)) center / 100% 2px no-repeat;
	border-radius: 1px;
}

/*
 * Was aus einem Widget-Bereich kommt, ist Blockinhalt: Überschriften,
 * Absätze, Listen, Knöpfe. Auf der navyblauen Fläche braucht es andere
 * Farben als im Text der Seite, und die Kernblöcke bringen ihre eigenen
 * Abstände mit, die hier zu groß sind.
 */
.fuss .wp-block-heading {
	color: var(--eis);
}

.fuss__spalte p:last-child,
.fuss__spalte ul:last-child {
	margin-bottom: 0;
}

.fuss__spalte .wp-block-buttons {
	margin-top: 1rem;
}

/*
 * Ein Knopf in der Fußzeile ist umrandet und nicht gefüllt. Eine
 * gefüllte eisblaue Fläche zöge dort mehr Aufmerksamkeit auf sich als
 * der eigentliche Inhalt der Seite darüber.
 */
.fuss .wp-block-button__link {
	background: transparent;
	border-color: rgba(135, 206, 220, .55);
	color: var(--weiss);
}

.fuss .wp-block-button__link:hover,
.fuss .wp-block-button__link:focus-visible {
	background: var(--eis);
	border-color: var(--eis);
	color: var(--dunkel);
}

/*
 * Die Kreuze vor jedem Punkt gelten für Menüs, nicht für eine
 * Aufzählung, die jemand in ein Widget geschrieben hat. Dort steht sonst
 * vor „Vereinsabend: jeden ersten Freitag“ ein Vereinszeichen, und das
 * behauptet mehr, als gemeint war.
 */
.fuss__spalte .wp-block-list li {
	padding-left: 0;
}

.fuss__spalte .wp-block-list li::before {
	content: none;
}

.fuss__spalte a {
	text-decoration: none;
}

.fuss__spalte a:hover,
.fuss__spalte a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

.fuss__spalte ul,
.fussnav__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fussnav__liste a {
	text-decoration: none;
}

.fussnav__liste a:hover,
.fussnav__liste a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

.fussnav__liste li {
	margin-bottom: .5rem;
}

.fuss__spalte li {
	margin-bottom: .5rem;
}

.fuss__abschluss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(135, 206, 220, .25);
	font-size: .8125rem;
}

.fuss__abschluss p {
	margin: 0;
}

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

.metanav__liste li {
	margin: 0;
}

.metanav__liste a {
	text-decoration: none;
}

.metanav__liste a:hover,
.metanav__liste a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

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

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

/* Ein Symbol im Knopf steht etwas kleiner als die Zeile hoch ist, sonst
   wirkt es größer als die Beschriftung daneben. */
.knopf .icon {
	width: 17px;
	height: 17px;
}

.knopf,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .85rem 1.6rem;
	background: var(--dunkel);
	border: 1px solid var(--dunkel);
	border-radius: var(--radius-bedienung);
	color: var(--weiss);
	font-family: var(--schrift-text);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	/* Ein Knopf bricht nicht um. Zwei Zeilen Beschriftung heißt, dass die
	   Beschriftung zu lang ist, nicht dass der Knopf zu schmal wäre. */
	white-space: nowrap;
	transition: background-color var(--takt) ease, border-color var(--takt) ease, transform var(--takt) ease;
}

.knopf:hover,
.knopf:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background: var(--dunkel-hoch);
	border-color: var(--dunkel-hoch);
	color: var(--weiss);
	text-decoration: none;
}

/* Gedrückt geht der Knopf nach unten. Sonst nichts. */
.knopf:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

.knopf--umrandet,
.is-style-umrandet .wp-block-button__link {
	background: transparent;
	border-color: currentColor;
	color: var(--dunkel);
}

.knopf--umrandet:hover,
.knopf--umrandet:focus-visible,
.is-style-umrandet .wp-block-button__link:hover,
.is-style-umrandet .wp-block-button__link:focus-visible {
	background: var(--dunkel);
	border-color: var(--dunkel);
	color: var(--weiss);
}

/* Auf dunklem Grund kehrt sich der Knopf um: helle Fläche, navy Schrift. */
.aufmacher .knopf,
.wp-block-cover .knopf,
.is-style-navy .wp-block-button__link,
.is-style-band .wp-block-button__link,
.band .wp-block-button__link,
.ist-dunkel .wp-block-button__link,
.wp-block-cover .wp-block-button__link {
	background: var(--eis);
	border-color: var(--eis);
	color: var(--dunkel);
}

.aufmacher .knopf:hover,
.aufmacher .knopf:focus-visible,
.wp-block-cover .wp-block-button__link:hover,
.is-style-navy .wp-block-button__link:hover,
.is-style-navy .wp-block-button__link:focus-visible,
.ist-dunkel .wp-block-button__link:hover,
.ist-dunkel .wp-block-button__link:focus-visible,
.is-style-band .wp-block-button__link:hover,
.is-style-band .wp-block-button__link:focus-visible {
	background: var(--weiss);
	border-color: var(--weiss);
	color: var(--dunkel);
}

.aufmacher .knopf--umrandet,
.is-style-band .is-style-umrandet .wp-block-button__link,
.band .is-style-umrandet .wp-block-button__link,
.is-style-navy .is-style-umrandet .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: var(--weiss);
}

.aufmacher .knopf--umrandet:hover,
.aufmacher .knopf--umrandet:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: var(--weiss);
	color: var(--weiss);
}

/* ---------- Das Kreuz als Trenner ---------- */

/*
 * Ein Blockstil am Trenner-Block: statt der waagerechten Linie steht ein
 * Kreuz in der Mitte. Es ist als Hintergrundbild gezeichnet und nicht als
 * Buchstabe, weil ein Pluszeichen aus der Schrift gerade Enden hat und
 * das Zeichen des Vereins runde. Der Unterschied ist klein und genau der
 * Punkt.
 */
.wp-block-separator.is-style-kreuze {
	height: 1.25rem;
	margin-block: var(--raum-abschnitt);
	border: 0;
	background:
		linear-gradient(var(--eis), var(--eis)) center / 2px 100% no-repeat,
		linear-gradient(var(--eis), var(--eis)) center / 1.25rem 2px no-repeat;
	opacity: 1;
}

/* ---------- Kleinzeile und Abschnittskopf ---------- */

/*
 * Das Kennzeichen ist die kleine Zeile über einer Überschrift. Es ist
 * freiwillig und soll es bleiben: Steht über jedem Abschnitt eine
 * Kleinzeile, sagt keine davon mehr etwas.
 */
.kennzeichen {
	margin: 0 0 .75rem;
	color: var(--eis-tief);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.abschnittskopf {
	margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

/*
 * Die benannte Ausnahme.
 *
 * „Was war“, „Unsere Sponsoren“ — das sind Auftakte ganzer Abschnitte
 * auf einer Seite, die aus Abschnitten besteht, und keine
 * Zwischenüberschriften in einem Text. Sie behalten die Plakatschrift.
 *
 * Sie ist die **einzige** `h2`, die das tut. Eine Ausnahme, die man
 * benennen kann, ist etwas anderes als eine Regel, die überall gilt: Man
 * sieht ihr an, dass sie gemeint ist.
 */
.abschnittskopf__titel {
	margin: 0;
	font-family: var(--schrift-plakat);
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .03em;
}

/* ---------- Der Kopf einer Seite ---------- */

/*
 * Die Bahn um den Kopf herum darf keinen zweiten Rand aufbauen, wenn der
 * Aufruf doch einmal innerhalb einer Bahn steht. `padding-inline: 0` an
 * einer verschachtelten Bahn nimmt ihn zurück — ohne das rückte der Titel
 * gegenüber dem Text darunter um einen Rand ein.
 */
.bahn .bahn {
	padding-inline: 0;
}

.seitenkopf {
	margin-bottom: var(--raum-block);
}

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

/*
 * Das Band trägt dieselbe Zeichnung wie die Fußzeile: navyblauer
 * Verlauf mit der Struktur darüber. Damit klammern Kopf und Fuß die
 * Seite ein, statt zwei verschiedene dunkle Flächen zu sein.
 *
 * Es läuft bis unter die Leiste — der negative Abstand nimmt den
 * Vorschub zurück, den `.haupt` auf Unterseiten mitbringt, der
 * Innenabstand setzt ihn innerhalb des Bandes wieder ein. Dieselbe
 * Rechnung wie beim Band der Termindetailseite.
 */
/*
 * ---------------------------------------------------------------------
 * Das dunkle Band
 * ---------------------------------------------------------------------
 *
 * Zwei Dinge benutzen dieselbe Fläche, und deshalb steht sie an einer
 * Stelle: der Seitenkopf in der Fassung „Band“ und `.band` als Auftakt
 * eines Abschnitts mitten auf einer Seite (Blockstil „Band“ an einer
 * Gruppe, und der Rückblick auf der Terminseite).
 *
 * Der Unterschied ist allein die Lage: Der Seitenkopf zieht sich unter
 * die Leiste, das Band im Text nicht. Alles andere — Verlauf, Struktur,
 * Farben, Mittigkeit — gehört beiden.
 *
 * Bis 1.55 stand das nur am Seitenkopf, und die Terminseite baute ihren
 * Rückblick mit einer hellen Überschrift nach. Auf einer Seite, deren
 * Kopf ein dunkles Band ist, sah der zweite Abschnitt damit aus wie eine
 * andere Seite.
 */
.band,
.wp-block-group.is-style-band,
.seitenkopf--band {
	position: relative;
	background-color: var(--dunkel);
	background-image: radial-gradient(
		ellipse 70% 90% at 50% 20%,
		var(--dunkel-hoch),
		var(--dunkel) 60%,
		var(--dunkel-tief) 100%
	);
	color: var(--weiss);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

/* Der Seitenkopf zieht sich unter die Leiste. */
.seitenkopf--band {
	margin-top: calc((var(--kopf-hoehe) + clamp(2.5rem, 6vw, 5rem)) * -1);
	margin-bottom: var(--raum-abschnitt);
	padding-block: calc(var(--kopf-hoehe) + var(--raum-block)) var(--raum-gross);
}

/*
 * Das Band im Text steht für sich. Der Abstand nach oben ist der große
 * der Leiter: Ein Band ist der Auftakt eines Abschnitts, und davor
 * gehört eine Zäsur, sonst klebt es am Absatz darüber.
 */
.band {
	margin-block: var(--raum-weit) var(--raum-abschnitt);
	padding-block: var(--raum-gross);
}

.band > .bahn > *:first-child,
.band > *:first-child {
	margin-top: 0;
}

.band > .bahn > *:last-child,
.band > *:last-child {
	margin-bottom: 0;
}

/*
 * Innen kehren sich die Farben um, wie auf der Navyfläche. Die
 * Abschnittsüberschrift bleibt in der Plakatschrift — sie ist der
 * Auftakt, für den die Ausnahme gemacht wurde.
 */
.band .abschnittskopf__titel,
.band h2,
.band .seitentitel,
.is-style-band h2,
.is-style-band h3 {
	color: var(--weiss);
}

.band .kennzeichen,
.is-style-band .kennzeichen {
	color: var(--eis);
}

.band p,
.is-style-band p {
	color: rgba(255, 255, 255, .88);
}

/*
 * Eine Zahl im Band. Sie ist das, was jemand mitnimmt — „hundertsieben
 * Abende“ sagt mehr über den Verein als jeder Satz daneben. Deshalb in
 * der Plakatschrift und in Eisblau, dieselbe Zeichnung wie das Datum auf
 * einer Terminkachel.
 */
.band__zahlblock {
	margin: var(--raum-block) 0 0;
}

.band__zahl {
	display: block;
	margin: 0;
	font-family: var(--schrift-plakat);
	font-size: clamp(2.5rem, 1.5rem + 3.5vw, 4rem);
	line-height: 1;
	letter-spacing: .03em;
	color: var(--eis);
}

.band__text {
	margin: var(--raum-eng) auto 0;
	max-width: 46ch;
}

.band__zahl-text {
	display: block;
	margin-top: .3rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

/*
 * Die Struktur liegt **über** dem Verlauf, nicht darunter. Mit
 * `soft-light` wirkt sie nur dann, wenn etwas da ist, auf das sie
 * wirken kann; darunter gelegt wäre sie unsichtbar. Derselbe Fehler
 * war in der Fußzeile schon einmal drin.
 */
.band::before,
.wp-block-group.is-style-band::before,
.seitenkopf--band::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url('../img/struktur.jpg');
	background-repeat: repeat;
	background-size: 251px 251px;
	mix-blend-mode: soft-light;
	opacity: .5;
	pointer-events: none;
}

.seitenkopf--band .seitentitel {
	margin: 0;
	color: var(--weiss);
}

.seitenkopf--band .kennzeichen {
	color: var(--eis);
}

.seitentitel {
	margin-bottom: var(--raum-block);
}

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

/*
 * Ein Bild über die volle Breite, der Name mittig darin.
 *
 * Die erste Fassung hatte hier eine geteilte Anordnung mit einem kleinen
 * Bild im eisblauen Quadrat rechts. Das war näher am Logo, aber weiter
 * weg von dem, was der Verein macht: Wer auf die Seite kommt, soll einen
 * vollen Saal sehen, kein Briefmarkenformat. Das Quadrat gibt es
 * weiterhin, aber als Blockstil im Text, wo es einem Bild eine Fläche
 * gibt, statt es kleinzuhalten.
 *
 * `100dvh` und nicht `100vh`: Auf dem Handy zieht sich die Adressleiste
 * von Safari beim Scrollen zusammen, und mit `vh` springt in dem Moment
 * das ganze Bild.
 */
.aufmacher {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * Der volle erste Bildschirm, ohne Deckel. Die frühere Grenze von
	 * 56rem sorgte dafür, dass auf einem hohen Monitor unter dem Bild
	 * schon der nächste Abschnitt hervorlugte — und damit war der
	 * Aufmacher kein Aufmacher mehr, sondern ein Streifen.
	 */
	min-height: 100dvh;
	padding-top: calc(var(--kopf-hoehe) + var(--raum-abschnitt));
	padding-bottom: clamp(5rem, 10vw, 8rem);
	background: var(--dunkel);
	color: var(--weiss);
	overflow: hidden;
	text-align: center;
}

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

/*
 * Der Schleier ist kein Geschmack, sondern die Bedingung dafür, dass die
 * Schrift lesbar bleibt. Ein Konzertfoto hat helle Stellen an jeder
 * Stelle, an der gerade ein Scheinwerfer steht, und ohne Schleier steht
 * der Vereinsname dort im Nichts.
 *
 * Zwei Lagen: eine gleichmäßige in Navy über dem ganzen Bild und ein
 * Verlauf, der oben unter der Leiste und unten am Rand nachdunkelt. Der
 * Verlauf allein reicht nicht, weil die Mitte hell bliebe; die
 * gleichmäßige Lage allein macht das Bild flau.
 */
.aufmacher::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom,
			rgba(15, 17, 21, .78) 0,
			rgba(15, 17, 21, .30) 38%,
			rgba(15, 17, 21, .30) 62%,
			rgba(15, 17, 21, .82) 100%),
		rgba(0, 9, 73, .42);
}

.aufmacher__inhalt {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--bahn);
	margin-inline: auto;
	padding-inline: var(--rand);
}

/*
 * Der Name in Eisblau, so wie er auf der bisherigen Seite steht. Auf dem
 * abgedunkelten Bild trägt er (8,9:1 gegen Navy); auf hellem Grund wäre
 * dieselbe Farbe unlesbar. Deshalb steht sie hier und nirgends sonst.
 */
/*
 * Wire One ist eine Haarlinie. Auf einem Konzertfoto, das selbst aus
 * Lichtstreifen besteht, verschwindet sie: Die Buchstaben sind genauso
 * dünn wie die Laserstrahlen dahinter.
 *
 * `-webkit-text-stroke` legt den Strich beidseitig an die Kontur und
 * verdickt sie, ohne die Zeichnung zu verändern — anders als ein
 * Schatten, der die Form verwischt, und anders als eine fette Grotesk,
 * die eine andere Schrift wäre. Der Wert steht in `em`, damit er beim
 * Verkleinern mitwandert; in Pixeln wäre der Name auf dem Handy ein
 * Klumpen.
 *
 * `paint-order: stroke fill` malt zuerst den Strich, dann die Füllung.
 * Ohne das frisst der Strich die Innenform der Buchstaben von innen an,
 * und aus dem „e“ wird ein Punkt.
 *
 * Wie stark, steht im Customizer. Vorgabe ist kräftig.
 */
/*
 * Der Vereinsname steht am Rechner in einer Zeile.
 *
 * Nachgemessen: „initiative party & jugend e.V.“ ist in Wire One
 * einschließlich Laufweite 7,08 mal so breit wie hoch. Bei 10vw
 * Schriftgröße braucht er also 70,8 % der Fensterbreite, und es bleibt
 * überall Rand — auch auf 500 Pixeln. Deshalb `nowrap`, und deshalb
 * hängt die Größe an `vw` statt an einem festen Wert.
 *
 * Unter 30rem bricht er doch um. Dort wäre die Zeile sonst so klein,
 * dass die Haarlinie verschwindet, und ein zweizeiliger lesbarer Name
 * ist besser als ein einzeiliger grauer Streifen.
 */
.aufmacher__titel {
	margin: 0 auto;
	color: var(--eis);
	font-size: clamp(2.25rem, 10vw, 7.5rem);
	line-height: 1.02;
	-webkit-text-stroke: var(--aufmacher-strich, .03em) currentColor;
	paint-order: stroke fill;
}

@media (min-width: 30rem) {
	.aufmacher__titel {
		white-space: nowrap;
	}
}

/*
 * Die Textschrift ist deutlich breiter als Wire One. Sie bekommt
 * deshalb keine feste Zeile und eine kleinere Größe, sonst steht der
 * Name über den Fensterrand hinaus.
 */
.aufmacher--textschrift .aufmacher__titel {
	white-space: normal;
	max-width: 16ch;
	font-size: clamp(2.25rem, 1rem + 5vw, 4.5rem);
}

/*
 * Die Textschrift als Alternative, für den Fall, dass die Haarlinie auch
 * verdickt zu leise bleibt. Dann ist es eine andere Schrift, und das
 * darf man wissen: Großschreibung und die enge Laufweite gehören dazu,
 * sonst wirkt sie neben dem übrigen Auftritt wie ein Fremdkörper.
 */
.aufmacher--textschrift .aufmacher__titel {
	font-family: var(--schrift-text);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: .98;
	-webkit-text-stroke: 0;
	text-transform: uppercase;
}

/* Der Name braucht Laufweite, sonst kleben die Haarlinien aneinander. */
.aufmacher__titel {
	letter-spacing: .03em;
}

.aufmacher__text {
	max-width: 46ch;
	margin: 1.5rem auto 0;
	color: rgba(255, 255, 255, .88);
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
}

.aufmacher .zier {
	margin: 1.75rem auto 0;
}

.aufmacher__knoepfe {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin-top: 2rem;
}

/* ---------- Der nächste Termin im Aufmacher ---------- */

/*
 * Unten rechts in der Ecke des Aufmachers, in Eisblau.
 *
 * Die erste Fassung hing als Flex-Element neben dem mittigen Inhalt und
 * landete dadurch auf halber Höhe am rechten Rand — mitten in den
 * Laserstrahlen des Fotos und mit einem Schleier, der zu leise war, um
 * dort zu tragen. Jetzt ist es aus dem Fluss genommen und sitzt fest in
 * der Ecke.
 *
 * Eisblaue Fläche mit navyblauer Schrift, nicht umgekehrt: Auf Eisblau
 * schreibt die Seite ausnahmslos in Navy (9,6:1). Damit ist es das
 * einzige helle Stück auf dem dunklen Bild und wird gesehen, ohne dem
 * Vereinsnamen die Aufmerksamkeit zu nehmen.
 */
.aufmacher__termin {
	position: absolute;
	right: var(--rand);
	bottom: clamp(1.5rem, 4vw, 3rem);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	max-width: calc(100% - var(--rand) * 2);
	padding: .55rem .9rem;
	background: var(--eis);
	color: var(--dunkel);
	text-decoration: none;
	transition: background-color var(--takt) ease, transform var(--takt) ease;
}

.aufmacher__termin:hover,
.aufmacher__termin:focus-visible {
	background: var(--weiss);
	color: var(--dunkel);
	transform: translateY(-2px);
}

.aufmacher__termin :focus-visible {
	outline-color: var(--dunkel);
}

.aufmacher__termin-label {
	flex: 0 0 auto;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .7;
}

.aufmacher__termin-datum {
	flex: 0 0 auto;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/*
 * Der Name darf gekürzt werden, die Angaben davor nicht. `min-width: 0`
 * ist dafür nötig: Ein Flex-Element schrumpft ohne diese Angabe nicht
 * unter seine Inhaltsbreite.
 */
.aufmacher__termin-name {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

.aufmacher__termin-pfeil {
	flex: 0 0 auto;
	display: inline-flex;
	transition: transform var(--takt) ease;
}

.aufmacher__termin:hover .aufmacher__termin-pfeil {
	transform: translateX(3px);
}

/*
 * Sobald die Marke unten links erscheint, verschwindet die Zeile im
 * Aufmacher. Beide sagen dasselbe, und zwei Hinweise auf denselben
 * Termin gleichzeitig sind einer zu viel — sichtbar wird das auf einem
 * hohen Bildschirm, auf dem der Aufmacher noch im Bild ist, wenn der
 * Fühler unten schon ausgelöst hat.
 */
.marke-da .aufmacher__termin {
	opacity: 0;
	visibility: hidden;
	transition: opacity 200ms ease, visibility 200ms;
}

/*
 * Auf schmalen Schirmen steht die Zeile wieder im Fluss, unter den
 * Knöpfen. In der Ecke wäre sie dort so breit wie der halbe Bildschirm
 * und läge über dem Bild, das die Seite eigentlich zeigen will.
 */
@media (max-width: 52rem) {
	/*
	 * Der Aufmacher stapelt, damit die Zeile unter dem Inhalt landet und
	 * nicht daneben: Ohne die Umstellung wäre sie ein zweites
	 * Flex-Element neben dem mittigen Block — genau der Fehler, den die
	 * absolute Lage oben behebt.
	 */
	.aufmacher {
		flex-direction: column;
	}

	.aufmacher__termin {
		position: static;
		max-width: 100%;
		margin-top: 1.75rem;
	}
}

/* ---------- Das Zeichen, dass es weitergeht ---------- */

/*
 * Ein Bild über den ganzen Bildschirm hat einen Haken: Man sieht ihm
 * nicht an, dass darunter noch etwas kommt. Wer das Scrollrad nicht von
 * selbst dreht, hält die Seite für die ganze Seite.
 *
 * Deshalb ein Pfeil am unteren Rand, der sich alle zwei Sekunden kurz
 * senkt. Er ist ein echter Sprunglink auf den Inhalt und kein Bildchen:
 * Wer mit der Tastatur ankommt, kommt damit ebenfalls weiter, und wer
 * ihn anklickt, landet an derselben Stelle wie beim Scrollen.
 */
.aufmacher__weiter {
	position: absolute;
	left: 50%;
	bottom: clamp(1.25rem, 3vw, 2.5rem);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	transform: translateX(-50%);
	color: var(--eis);
	text-decoration: none;
	animation: pjt-weiter 2.4s ease-in-out infinite;
}

.aufmacher__weiter:hover,
.aufmacher__weiter:focus-visible {
	color: var(--weiss);
}

.aufmacher__weiter .icon {
	width: 30px;
	height: 30px;
	stroke-width: 1.4;
}

@keyframes pjt-weiter {
	0%, 55%, 100% { transform: translate(-50%, 0); }
	72%           { transform: translate(-50%, .5rem); }
}

/*
 * Wer weniger Bewegung eingestellt hat, bekommt den Pfeil trotzdem, nur
 * still. Ihn ganz wegzunehmen hieße, genau denen die Auskunft zu
 * nehmen, die sie am ehesten brauchen.
 */
@media (prefers-reduced-motion: reduce) {
	.aufmacher__weiter {
		animation: none;
	}
}

/* ---------- Die Schraffur ---------- */

/*
 * Der kleine schräge Streifen unter einer Überschrift.
 *
 * Er ist nicht neu erfunden: Genau diese Zeichnung steht als `.pj-zier`
 * im Stylesheet des Veranstaltungsmoduls und damit über jeder
 * Terminübersicht. Hätte das Theme sich hier etwas eigenes ausgedacht,
 * stünden auf derselben Seite zwei verschiedene Zierstücke.
 */
.zier {
	display: block;
	width: 96px;
	height: 8px;
	margin: .9rem auto 0;
	background: repeating-linear-gradient(115deg,
		var(--eis) 0 2px, transparent 2px 7px);
}

/* Linksbündig, wo die Überschrift links steht. */
.abschnittskopf .zier {
	margin-inline: 0;
}

/* ---------- Termine ---------- */

/*
 * Die Kachel ist eine helle Karte mit einem großen Datum.
 *
 * ---------------------------------------------------------------------
 * Warum sie nicht mehr dunkel ist
 * ---------------------------------------------------------------------
 *
 * Bis Fassung 1.52 war sie eine navyblaue Fläche. Das hatte einen guten
 * Grund — das Datum sollte das Größte auf der Kachel sein, und auf
 * Dunkel trägt Eisblau — und zwei Folgen, die erst auffielen, als
 * daneben andere Karten standen:
 *
 *  - **Auf der Terminseite standen dunkle Kacheln über hellen
 *    Fadenkarten.** Dieselbe Sache, zweimal verschieden gezeichnet.
 *  - Sechs dunkle Flächen nebeneinander sind auf einer hellen Seite
 *    keine Karten mehr, sondern ein Block.
 *
 * Jetzt sind Terminkachel, Newskachel und Fadenkarte dieselbe Karte:
 * hell, mit dünner Linie, Bild oben, Datum groß. Das Dunkle bleibt den
 * Stellen, an denen es etwas bedeutet — dem Seitenkopf, der
 * Terminmarke, dem Band auf der Detailseite.
 *
 * Das Datum ist trotzdem das Größte auf der Kachel: Es steht in der
 * Plakatschrift in der dunklen Farbe, und die Kleinzeile darunter in
 * Eisblau-tief. Der Auftritt kommt aus der Größe, nicht aus der Fläche.
 *
 * (Der alte Text dazu, zur Einordnung: Die Kachel war eine Karte mit
 * navyblauem Kern, nicht eine weiße Karte mit dünnen Linien.)
 *
 * Der Grund ist das Datum. In der ersten Fassung stand es als kleines
 * Schild in der Ecke des Flyers und ging genau deshalb unter — obwohl es
 * die Angabe ist, wegen der jemand überhaupt hinsieht. Jetzt ist die
 * Zahl das Größte auf der Kachel, in der Plakatschrift, in Eisblau auf
 * Navy (8,9:1).
 *
 * Das beantwortet zugleich die Frage, wo das Blau der Seite bleibt. Eine
 * weiße Karte mit Haarlinien ist korrekt und leise; eine navyblaue
 * Fläche neben dem Flyer ist das, was ein Plakat täte.
 *
 * `auto-fit` mit `minmax` statt einer festen Spaltenzahl: Bei einem
 * Termin gibt es eine Spalte, bei zweien zwei, und es gibt keinen
 * Sonderfall abzufangen.
 */
.termine {
	display: grid;
	/*
	 * `auto-fit` und nicht `auto-fill`: Leere Spuren fallen damit
	 * zusammen, statt als Lücke stehen zu bleiben. Bei zwei Terminen auf
	 * einem breiten Schirm stünden sonst zwei Kacheln links und zwei
	 * leere Spalten rechts daneben.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

/*
 * Bei zwei oder drei Terminen sollen die Kacheln nicht über die ganze
 * Breite gezogen werden. Eine Kachel von 40rem Breite mit einem Flyer im
 * Verhältnis 4:5 wird einen halben Meter hoch.
 *
 * ---------------------------------------------------------------------
 * Die Obergrenze zählt mit, nicht die Untergrenze
 * ---------------------------------------------------------------------
 *
 * Bis 1.52 stand hier 26rem. Ein `repeat(auto-fit, minmax(21rem, 26rem))`
 * rechnet die Spaltenzahl aber mit der **oberen** Grenze aus, sobald die
 * eine feste Länge ist — so steht es in der Spezifikation, und so tun es
 * alle Browser. In der weiten Spur von 72rem passten damit nur zwei
 * Kacheln, obwohl drei zu 21rem gepasst hätten: Drei Termine auf der
 * Startseite standen als 2 + 1.
 *
 * 22,5rem: Drei Kacheln plus zwei Lücken in 72rem, vier in der Bahn.
 * Nachrechnen, wer den Wert ändert: (Spurbreite + Lücke) / (Wert + Lücke)
 * muss über der gewünschten Zahl liegen.
 */
.termine {
	--termin-breite: 22.5rem;
}

@media (min-width: 64rem) {
	.termine:not(.termine--einzeln) {
		grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), var(--termin-breite)));
		justify-content: center;
	}
}

.termin {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--papier);
	border: 1px solid var(--linie);
	color: var(--tinte);
	transition: transform var(--takt) ease, border-color var(--takt) ease;
}

/*
 * Beim Überfahren fährt oben eine eisblaue Linie auf. Sie ist billiger
 * als ein Schatten (den es auf dieser Seite ohnehin nicht gibt) und sagt
 * dasselbe: Hier passiert etwas, wenn du klickst.
 */
.termin::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	height: 3px;
	background: var(--eis);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 240ms ease;
}

.termin:hover::before,
.termin:focus-within::before {
	transform: scaleX(1);
}

.termin:hover,
.termin:focus-within {
	transform: translateY(-3px);
}

.termin :focus-visible {
	outline-color: var(--eis);
}

/*
 * Hochkant, nicht quer.
 *
 * Ein Veranstaltungsflyer ist so gut wie immer hochformatig, und auf ihm
 * steht Text. Ein Ausschnitt im Verhältnis 3:2 schneidet davon oben und
 * unten je ein Viertel weg — genau die Stellen, an denen Titel und
 * Uhrzeit stehen. 4:5 lässt fast den ganzen Flyer stehen und sieht
 * nebenbei aus wie das, was es ist: ein Plakat.
 *
 * `object-position` etwas oberhalb der Mitte, weil der Kopf eines Flyers
 * mehr trägt als sein Fuß.
 */
.termin__flyer {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--dunst);
}

/*
 * Der Flyer als Knopf.
 *
 * `z-index: 2` hebt ihn über die Klickfläche des Titels, die sonst die
 * ganze Kachel bedeckt. Damit vergrößert ein Klick auf den Flyer das
 * Plakat, und ein Klick auf alles andere führt zur Detailseite — zwei
 * Ziele, sauber getrennt, ohne verschachtelte Links.
 *
 * `display: block` und `padding: 0`, weil ein Knopf sonst die
 * Voreinstellungen des Browsers mitbringt: Innenabstand, Rahmen, zentrierten
 * Text und eine Schriftgröße, die nichts mit der Seite zu tun hat.
 */
.termin__flyer--knopf {
	z-index: 2;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	cursor: zoom-in;
	font: inherit;
	color: inherit;
	text-align: left;
}

/*
 * Die Lupe erscheint beim Überfahren. Sie ist der Hinweis darauf, dass
 * hier etwas anderes passiert als bei der übrigen Kachel — ohne sie
 * erwartet man den Sprung zur Detailseite und bekommt ein Bild.
 */
.termin__lupe {
	position: absolute;
	right: .6rem;
	bottom: .6rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(26, 29, 35, .8);
	color: var(--eis);
	opacity: 0;
	transform: scale(.9);
	transition: opacity var(--takt) ease, transform var(--takt) ease;
	pointer-events: none;
}

.termin__lupe .icon {
	width: 18px;
	height: 18px;
}

.termin__flyer--knopf:hover .termin__lupe,
.termin__flyer--knopf:focus-visible .termin__lupe {
	opacity: 1;
	transform: none;
}

/*
 * Beim Überfahren des Flyers zieht das Bild nicht mit an: Die
 * Vergrößerung der ganzen Kachel gehört zum Sprung auf die Detailseite,
 * und der findet hier nicht statt.
 */
.termin__flyer--knopf:hover img {
	transform: none;
}

.termin__flyer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	transition: transform 400ms ease;
}

.termin:hover .termin__flyer img {
	transform: scale(1.03);
}

.termin__kern {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	/*
	 * Als Container angemeldet, damit die Angaben darunter auf die
	 * Breite der Kachel reagieren können und nicht auf die des Fensters.
	 * Dieselbe Kachel steht mal in drei Spalten und mal allein über die
	 * volle Zeile; ein Medienbereich wüsste davon nichts.
	 */
	container-type: inline-size;
}

/* ---------- Das Datum ---------- */

.termin__datum {
	margin: 0 0 .9rem;
}

/*
 * Die Zahl links, daneben zwei Zeilen: Monat und Wochentag.
 *
 * `align-items: center` und nicht `baseline`. Das war der sichtbare
 * Fehler der ersten Fassung: An der Schriftlinie ausgerichtet hängt der
 * zweizeilige Block am unteren Rand der Zahl, und die Zahl steht
 * scheinbar zu hoch. Mittig ausgerichtet sitzen beide auf einer Achse.
 *
 * Der Ausgleich um `.08em` fängt die Oberlänge von Wire One ab: Die
 * Ziffern haben oben mehr Luft als unten, ohne die Verschiebung wirkte
 * der Block trotz `center` einen Hauch zu tief.
 */
.termin__datum time {
	display: flex;
	align-items: center;
	gap: .75rem;
}

/*
 * Die Zahl in der Plakatschrift. Sie darf so groß sein, weil Wire One
 * aus einer Haarlinie besteht: Bei fünf Zentimetern Höhe schreit sie
 * nicht, sie steht nur da. Eine fette Grotesk in derselben Größe wäre
 * eine Schlagzeile.
 */
/*
 * Etwas kleiner als in der ersten Fassung.
 *
 * `clamp(3.25rem … 5rem)` war auf einer Terminseite mit mehreren
 * Kacheln zu viel: Dort steht die Zahl nicht allein auf der Startseite,
 * sondern sechsmal untereinander, und sechs Zahlen in Überschriftgröße
 * sind eine Wand. Groß genug zum Nichtübersehen bleibt sie trotzdem.
 */
.termin__tag {
	flex: 0 0 auto;
	margin-top: -.08em;
	font-family: var(--schrift-plakat);
	font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.5rem);
	line-height: .82;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
	color: var(--dunkel);
}

.termin__rest {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	/* Die beiden Zeilen sollen nicht umbrechen. „September“ ist das
	   längste Wort, und es passt. */
	white-space: nowrap;
}

.termin__monat {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--dunkel);
}

.termin__wochentag {
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--eis-tief);
}

/* ---------- Titel ---------- */

.termin__titel {
	margin: 0 0 .9rem;
	font-family: var(--schrift-text);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--dunkel);
	text-wrap: balance;
}

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

/*
 * Die ganze Kachel ist anklickbar, aber es gibt trotzdem nur **einen**
 * Link.
 *
 * Der naheliegende Weg — die Kachel in ein `<a>` zu wickeln — legt den
 * Ticketknopf in einen Link. Verschachtelte Links sind ungültiges HTML,
 * und ein Screenreader liest dann den kompletten Kachelinhalt als
 * Linktext vor.
 *
 * Stattdessen zieht dieses Pseudoelement die Klickfläche des
 * Titellinks über die ganze Kachel. Die Knöpfe liegen mit
 * `position: relative; z-index: 1` darüber und bleiben eigenständig.
 *
 * Der Preis: Der Text auf der Kachel lässt sich nicht mehr markieren. Das
 * ist hier vertretbar — es steht nichts darauf, was jemand kopieren
 * wollte; die Adresse und der volle Hinweistext stehen auf der
 * Detailseite.
 */
.termin {
	position: relative;
}

.termin__titel a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.termin__titel a:hover,
.termin__titel a:focus-visible {
	color: var(--dunkel);
	text-decoration: underline;
	text-decoration-color: var(--eis);
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

/* ---------- Angaben ---------- */

/*
 * Zwei Spalten aus Bezeichnung und Wert, getrennt durch eine sehr leise
 * Linie. Als Beschreibungsliste und nicht als Absätze: Es sind Paare,
 * und ein Screenreader liest sie dann auch als solche vor.
 */
.termin__fakten {
	margin: 0 0 1.1rem;
}

/*
 * Untereinander, sobald es eng wird. Zwei Spalten mit fester
 * Bezeichnungsbreite reißen auf einem Handy eine Lücke von zwei
 * Zentimetern zwischen „ORT“ und dem Ort auf.
 */
.termin__faktum {
	padding: .4rem 0;
	border-top: 1px solid var(--linie);
}

@container (min-width: 18rem) {
	.termin__faktum {
		display: grid;
		grid-template-columns: 7rem 1fr;
		gap: .75rem;
		align-items: baseline;
	}
}

.termin__faktum dt {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--eis-tief);
	opacity: .85;
}

.termin__faktum dd a {
	color: var(--eis);
	text-decoration-color: rgba(135, 206, 220, .5);
}

.termin__faktum dd {
	margin: 0;
	color: var(--dunkel);
	/*
	 * Ziffern mit gleicher Breite. Untereinander stehende Uhrzeiten und
	 * Preise fluchten damit, statt um einen halben Buchstaben zu
	 * verspringen.
	 */
	font-variant-numeric: tabular-nums;
}

/* ---------- Hinweistext ---------- */

/*
 * Auf drei Zeilen begrenzt. Der Hinweistext aus gigAdmin ist oft eine
 * Tagesordnung mit sechs Punkten, und die sprengt jede Kachel. Wer mehr
 * wissen will, klickt auf „Alle Angaben“.
 */
/*
 * Der Hinweistext ist etwas anderes als die Angaben darüber: Er kommt aus
 * einem Freitextfeld und steht nicht in jedem Termin. Deshalb hebt er
 * sich ab — eine eisblaue Kante links und eine sehr leise Fläche
 * dahinter. Das ist dieselbe Zeichnung wie beim Zitat im Fließtext.
 */
.termin__hinweis {
	margin: 0 0 1.4rem;
	padding: .7rem 0 .7rem 1rem;
	border-left: 2px solid var(--eis);
	background: var(--dunst);
	color: var(--tinte);
	font-size: .9375rem;
	line-height: 1.5;
}

/*
 * Die Kürzung liegt auf dem inneren Element und nicht auf dem Kasten:
 * `-webkit-line-clamp` schneidet am Innenabstand ab, nicht am Rand. Auf
 * dem Kasten selbst schaute die vierte Zeile halb in die untere
 * Polsterung — sichtbar abgeschnitten statt sauber gekürzt.
 *
 * Lange Adressen ohne Leerzeichen brechen mit `overflow-wrap` um, statt
 * die Kachel auseinanderzudrücken. Genau das passiert mit den
 * Besprechungslinks, die im Hinweistext stehen.
 */
/*
 * Verweise im Hinweis. Sie liegen im gekürzten Bereich, also über einem
 * `-webkit-box` — `position: relative` hebt sie über die Kachel, die
 * selbst anklickbare Flächen hat, sonst käme der Klick nicht an.
 */
.termin__hinweis a {
	position: relative;
	z-index: 1;
	color: var(--eis-tief);
	font-weight: 600;
	text-decoration-thickness: 1px;
	text-underline-offset: .15em;
	overflow-wrap: anywhere;
}

.termin__hinweis a:hover,
.termin__hinweis a:focus-visible {
	color: var(--dunkel);
}

.termin__hinweis strong,
.termin__hinweis b {
	font-weight: 700;
}

.termin__hinweis span {
	display: -webkit-box;
	/*
	 * Bis 1.53 drei Zeilen. Der Hinweis ist aber genau das, was jemand
	 * vor dem Klick wissen will — Einlass ab 16 mit Muttizettel, Vorverkauf
	 * nur bei —, und drei Zeilen schnitten den entscheidenden Satz ab.
	 * Acht Zeilen tragen einen gepflegten Hinweis ganz; eine Tagesordnung
	 * mit zwölf Punkten bleibt weiterhin auf der Detailseite.
	 */
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

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

.termin__taten {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-top: auto;
}

/*
 * Auf einer schmalen Kachel stehen die Knöpfe untereinander und über die
 * volle Breite. Nebeneinander bräche „Alle Angaben“ um, und ein Knopf
 * mit zwei Zeilen Beschriftung ist kein Knopf mehr.
 */
@container (max-width: 17rem) {
	.termin__taten {
		align-items: stretch;
		flex-direction: column;
	}

	.termin .knopf {
		justify-content: center;
	}

	/*
	 * Zwei Klassen, weil die Grundregel für dieses Zeichen weiter unten
	 * steht und `margin-left: auto` setzt. Bei gleicher Spezifität
	 * gewinnt die spätere Regel, und die stünde hier ohne das `.termin`
	 * davor über der Container-Abfrage.
	 */
	.termin .termin__zeichen {
		margin: 0 auto;
	}
}

/*
 * Auf dunklem Grund kehren sich die Knöpfe um: der handelnde in
 * Eisblau mit navyblauer Schrift, der zweite nur umrandet. Das ist
 * dieselbe Regel wie im Aufmacher.
 */
.termin .knopf {
	background: var(--eis);
	border-color: var(--eis);
	color: var(--dunkel);
	padding: .7rem 1.2rem;
	font-size: .75rem;
	/*
	 * Die Knöpfe füllen ihre Zeile. Seit 1.53 sind es drei (Tickets,
	 * Alle Angaben, Event), und auf einer Kachel von 22,5rem passen
	 * keine drei nebeneinander. Ohne `flex: 1` stünde der dritte allein
	 * und linksbündig in der zweiten Zeile — mit ihm läuft er über die
	 * ganze Breite und sieht nach Absicht aus.
	 */
	flex: 1 1 auto;
	justify-content: center;
}

/*
 * ---------------------------------------------------------------------
 * Weiß auf Weiß: der Knopf verschwand beim Überfahren
 * ---------------------------------------------------------------------
 *
 * Hier stand `background: var(--weiss)` mit weißem Rahmen. Das ist die
 * Umkehrung für dunklen Grund — sie stammt aus der Zeit, als die
 * Terminkachel dunkel war. Auf der hellen Kachel von heute hieß das:
 * Wer mit der Maus auf „Tickets“ zeigt, sieht den Knopf nicht mehr, nur
 * noch die Schrift, die in der Luft hängt.
 *
 * Jetzt dieselbe Umkehrung wie beim gewöhnlichen Knopf des Themes:
 * dunkel mit weißer Schrift. Das Überfahren macht den Knopf **stärker**
 * statt schwächer, und es ist derselbe Vorgang wie überall sonst auf der
 * Website.
 */
.termin .knopf:hover,
.termin .knopf:focus-visible {
	background: var(--dunkel);
	border-color: var(--dunkel);
	color: var(--weiss);
}

.termin .knopf--umrandet {
	background: transparent;
	border-color: var(--linie);
	color: var(--dunkel);
}

.termin .knopf--umrandet:hover,
.termin .knopf--umrandet:focus-visible {
	background: var(--dunst);
	border-color: var(--eis);
	color: var(--dunkel);
}

/*
 * Ein Symbolknopf ohne Beschriftung: rund, wie in der Fußzeile.
 *
 * Er steht direkt neben den Knöpfen, nicht am rechten Rand. Vorher schob
 * `margin-left: auto` ihn dorthin; in der schmalen Kachel sah das
 * aufgeräumt aus, auf der Detailseite stand er einsam weit rechts und
 * wirkte wie versehentlich abgerutscht. Ein Zeichen gehört zu den
 * Knöpfen, mit denen es eine Reihe bildet.
 */
.termin__zeichen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--linie);
	border-radius: 50%;
	color: var(--dunkel);
	text-decoration: none;
	transition: background-color var(--takt) ease, color var(--takt) ease, border-color var(--takt) ease;
}

.termin__zeichen:hover,
.termin__zeichen:focus-visible {
	background: var(--dunkel);
	border-color: var(--dunkel);
	color: var(--weiss);
}

.termin__zeichen .icon {
	width: 18px;
	height: 18px;
}

/* ---------- Nur ein anstehender Termin ---------- */

/*
 * Steht nur ein Abend an — im ruhigen Teil des Jahres der Normalfall —
 * liegen Flyer und Angaben nebeneinander statt übereinander. Eine schmale
 * Karte allein in einer Zeile ist ein einsamer Kasten.
 *
 * Die Umschaltung hängt an der Breite des **Rasters**, nicht an der des
 * Fensters. Genau daran ist sie schon einmal gescheitert: Sie lag in
 * einem `@media (min-width: 48rem)`, und ob 48rem zur Verfügung stehen,
 * hängt nicht am Fenster, sondern an der Bahn, in der das Raster steht.
 * Mit einer Containerabfrage entscheidet der Platz, der tatsächlich da
 * ist — und die Kachel wechselt auch dann richtig, wenn sie irgendwann
 * in einer Spalte steht.
 */
.termine--einzeln {
	grid-template-columns: minmax(0, 1fr);
	container-type: inline-size;
}

/*
 * Gestapelt zeigt der Flyer sich ganz: Steht nur ein Termin an, ist er
 * das Hauptbild der Seite, und dann ist es falsch, ihn zu beschneiden.
 * Die Höhengrenze verhindert nur, dass ein hochformatiges Plakat
 * anderthalb Bildschirmhöhen füllt.
 */
.termine--einzeln .termin__flyer {
	aspect-ratio: auto;
}

.termine--einzeln .termin__flyer img {
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	object-position: top;
}

@container (min-width: 44rem) {
	.termine--einzeln .termin {
		display: grid;
		grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
		max-height: 34rem;
	}

	.termine--einzeln .termin__flyer {
		height: 100%;
	}

	.termine--einzeln .termin__flyer img {
		height: 100%;
		max-height: none;
		object-fit: cover;
		object-position: center 35%;
	}

	.termine--einzeln .termin__kern {
		padding: clamp(1.5rem, 2.5vw, 2.25rem);
		/* Läuft der Inhalt über, ist er scrollbar statt abgeschnitten. */
		overflow: auto;
	}

	.termine--einzeln .termin__titel {
		font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem);
	}

	/* Nebeneinander ist Platz für mehr Text. */
	.termine--einzeln .termin__hinweis span {
		-webkit-line-clamp: 12;
	}
}

/* ---------- Ein einzelner Termin ---------- */

/*
 * Das Band trägt den Flyer zweimal: einmal scharf daneben, einmal als
 * weichgezeichneten Grund über die volle Breite.
 *
 * Damit bekommt jeder Abend die Farben seines eigenen Plakats, ohne dass
 * das Gerüst der Seite wechselt. Ein rotes Konzertplakat macht die Seite
 * rötlich, ein blaues bläulich — und beide bleiben erkennbar dieselbe
 * Vereinsseite, weil Schrift, Datum und Knöpfe unverändert darüberliegen.
 *
 * Die Fassungen davor waren erst weiß und dann navy: korrekt, aber bei
 * jedem Termin gleich. Eine Detailseite soll sich anfühlen wie
 * angekommen, nicht wie eine größere Kachel.
 */
.termindetail__band {
	position: relative;
	/*
	 * Das Band läuft bis unter die Leiste. `.haupt` bringt auf
	 * Unterseiten oben einen Abstand mit, damit der Inhalt nicht unter
	 * der festen Leiste beginnt; hier ist genau das gewollt — das Band
	 * soll die Leiste hinterlegen. Der negative Abstand nimmt den
	 * Vorschub zurück, der Innenabstand setzt ihn innerhalb des Bandes
	 * wieder ein, sodass die Schrift dort steht, wo sie vorher stand.
	 */
	margin-top: calc((var(--kopf-hoehe) + clamp(2.5rem, 6vw, 5rem)) * -1);
	padding-block: calc(var(--kopf-hoehe) + var(--raum-block)) var(--raum-abschnitt);
	background: var(--dunkel);
	color: var(--weiss);
	overflow: hidden;
	isolation: isolate;
}

/*
 * Der weichgezeichnete Grund liegt in einem eigenen Element, weil ein
 * `filter` auf dem Band auch die Schrift darin unscharf machte.
 *
 * `scale(1.15)`: Weichzeichnen zieht die Ränder eines Bildes nach innen
 * ein und lässt außen einen durchsichtigen Saum. Das Bild wird deshalb
 * über die Kante hinaus vergrößert, sonst steht rundherum ein heller
 * Rand.
 */
.termindetail__band.hat-grund::before {
	content: '';
	position: absolute;
	inset: -5%;
	z-index: -2;
	background-image: var(--flyer);
	background-size: cover;
	background-position: center;
	filter: blur(48px) saturate(1.4);
	transform: scale(1.15);
}

/*
 * Der Schleier darüber. Zwei Lagen wie beim Aufmacher: eine gleichmäßige
 * in Navy und ein Verlauf, der nach unten hin schließt. Ohne ihn stünde
 * die Schrift auf einem Plakat mit hellen Stellen im Nichts — und
 * Flyerfarben sind nicht vorhersehbar.
 */
.termindetail__band.hat-grund::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom,
			rgba(15, 17, 21, .88) 0,
			rgba(15, 17, 21, .72) 45%,
			rgba(15, 17, 21, .94) 100%),
		rgba(0, 9, 73, .55);
}

.termindetail__zurueck {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.75rem;
	margin-bottom: var(--raum-block);
}

.termindetail__zurueck a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--eis);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

.termindetail__zurueck a:hover,
.termindetail__zurueck a:focus-visible {
	color: var(--weiss);
}

.termindetail__kopf {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--raum-gross);
	align-items: center;
}

@media (min-width: 52rem) {
	.termindetail__kopf {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	}
}

/*
 * Der scharfe Flyer daneben, ungeschnitten. Er ist das Plakat des
 * Abends; ihn zu beschneiden nähme ihm die Hälfte der Aussage.
 */
.termindetail__flyer {
	margin: 0;
	max-width: 20rem;
	justify-self: center;
	position: relative;
	overflow: hidden;
	background: var(--dunkel-tief);
	/* Die zweite Ausnahme von der Schattenregel ist die Marke; hier ist
	   es keine: Der Flyer setzt sich über eine eisblaue Kante ab, nicht
	   über einen Weichzeichner. */
	border: 1px solid rgba(135, 206, 220, .3);
}

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

/*
 * Die Textspalte im Band. Ohne Höchstbreite liefe der Hinweistext auf
 * einem breiten Schirm über die ganze Spalte — 120 Zeichen je Zeile
 * neben einem Flyer von 20rem.
 */
.termindetail__text {
	min-width: 0;
}

/*
 * Das Datum auf dem dunklen Band.
 *
 * ---------------------------------------------------------------------
 * Warum es überhaupt verschwunden ist
 * ---------------------------------------------------------------------
 *
 * Die Detailseite benutzt **dieselben Klassen** wie die Kachel —
 * `.termin__tag`, `.termin__monat`, `.termin__wochentag`. Das war
 * sinnvoll, solange beide auf dunklem Grund standen.
 *
 * Als die Kachel hell wurde, bekamen die Klassen die dunkle Schriftfarbe
 * — und auf dem dunklen Band der Detailseite stand damit Anthrazit auf
 * Anthrazit. Der Tag war nur noch als Schemen zu erkennen.
 *
 * Merksatz: **Wer eine gemeinsam benutzte Klasse umfärbt, muss jeden Ort
 * prüfen, an dem sie steht.** Die Suche danach ist eine Zeile; der
 * Fehler fällt sonst erst dem auf, der die Seite besucht.
 */
.termindetail__band .termin__tag {
	color: var(--eis);
}

.termindetail__band .termin__monat {
	color: var(--weiss);
}

.termindetail__band .termin__wochentag {
	color: var(--eis);
}

/*
 * Das runde Zeichen (Facebook, Tickets) ebenso: auf der hellen Kachel in
 * der dunklen Farbe, auf dem Band in Eisblau. Eisblau auf Weiß sind
 * 2:1 — man sähe den Umriss und müsste raten, was darin steht.
 */
.termindetail__band .termin__zeichen {
	border-color: rgba(135, 206, 220, .5);
	color: var(--eis);
}

.termindetail__band .termin__zeichen:hover,
.termindetail__band .termin__zeichen:focus-visible {
	background: var(--eis);
	border-color: var(--eis);
	color: var(--dunkel);
}

.termindetail__titel {
	margin: .75rem 0 1rem;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
	color: var(--weiss);
}

.termindetail__band .termin__taten {
	margin-top: var(--raum-eng);
}

.termindetail__band .knopf {
	background: var(--eis);
	border-color: var(--eis);
	color: var(--dunkel);
}

.termindetail__band .knopf:hover,
.termindetail__band .knopf:focus-visible {
	background: var(--weiss);
	border-color: var(--weiss);
	color: var(--dunkel);
}

.termindetail__band :focus-visible {
	outline-color: var(--eis);
}

.termindetail__band .worte__wort {
	border-color: rgba(135, 206, 220, .4);
	color: var(--eis);
}

/* ---------- Die Eckdaten ---------- */

/*
 * Ein Streifen quer unter dem Band, getrennt vom Fließtext.
 *
 * Sie werden anders gelesen als der Beschreibungstext: Wann, wo, was
 * kostet es — das überfliegt man. In einer Liste neben oder unter dem
 * Text gingen sie unter, obwohl sie die Angaben sind, wegen derer jemand
 * die Seite überhaupt geöffnet hat.
 */
.termindetail > .bahn {
	padding-top: var(--raum-abschnitt);
}

.eckdaten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
	gap: 0;
	margin: 0 0 var(--raum-abschnitt);
	border-top: 1px solid var(--linie);
	border-bottom: 1px solid var(--linie);
}

.eckdatum {
	padding: var(--raum-eng) 0;
}

/*
 * Trennlinien zwischen den Spalten, aber nicht vor der ersten. `+`
 * statt `:not(:first-child)`, weil bei einem Umbruch in die nächste
 * Zeile sonst die dortige erste Spalte einen Strich links bekäme —
 * mitten im Nichts.
 */
@media (min-width: 40rem) {
	.eckdatum + .eckdatum {
		margin-left: var(--raum-eng);
		padding-left: var(--raum-eng);
		border-left: 1px solid var(--linie);
	}
}

.eckdatum dt {
	margin-bottom: .2rem;
	color: var(--leise);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.eckdatum dd {
	margin: 0;
	color: var(--dunkel);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

/*
 * Die Verweise auf die Musik der Künstler stehen unter „Mit dabei“. Sie
 * bekommen die Unterlinie erst beim Überfahren: In einer Reihe von
 * Eckdaten wäre eine ständige Unterstreichung das Auffälligste, obwohl
 * die Uhrzeit daneben wichtiger ist.
 */
.eckdatum dd a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--eis);
}

.eckdatum dd a:hover,
.eckdatum dd a:focus-visible {
	border-bottom-color: var(--dunkel);
}

/*
 * Der Hinweistext, im Band.
 *
 * Dieselbe Zeichnung wie überall, wo fremder Text steht — eisblaue Kante,
 * leise Fläche —, hier in der dunklen Fassung.
 *
 * Er steht oben und nicht unter den Eckdaten: In ihm steht das, was man
 * **vor** dem Klick auf „Tickets“ wissen muss — dass ein Link erst ab
 * einer Uhrzeit funktioniert, dass es eine Tagesordnung gibt, dass etwas
 * ausfällt. Weiter unten stand er hinter der Entscheidung, die er
 * beeinflussen soll.
 */
.termindetail__hinweis {
	max-width: 52ch;
	margin: var(--raum-eng) 0 0;
	padding: .8rem 1rem .8rem 1.1rem;
	border-left: 2px solid var(--eis);
	background: rgba(135, 206, 220, .1);
	color: rgba(255, 255, 255, .85);
	font-size: .9375rem;
	line-height: 1.55;
}

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

.termindetail__hinweis a {
	color: var(--weiss);
	text-decoration-color: var(--eis);
	/* Adressen ohne Leerzeichen brechen um, statt das Band zu weiten. */
	overflow-wrap: anywhere;
}

/*
 * Die Beschriftung ist kein Schmuck: Ohne sie liest sich der Text wie
 * eine Beschreibung der Veranstaltung, und die ist es nicht.
 */
.termindetail__hinweis-marke {
	margin: 0 0 .3rem;
	color: var(--eis);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/*
 * Der Social-Media-Text: ein Satz zum Weitersagen, vom Verein selbst
 * geschrieben. Er steht deshalb groß und frei — nicht im Kasten mit der
 * eisblauen Kante, denn der ist für Text reserviert, der nicht von hier
 * stammt.
 */
/*
 * Der Social-Media-Text steht in normaler Lesegröße.
 *
 * Die erste Fassung setzte ihn groß, in der Annahme, es sei ein Satz zum
 * Weitersagen. In Wirklichkeit ist es der fertige Beitrag: Überschrift,
 * Aufzählung mit Emoji, Hashtags, oft zwanzig Zeilen. Groß gesetzt füllte
 * er den halben Bildschirm und drängte alles andere weg.
 *
 * Er bleibt trotzdem ohne die eisblaue Kante: Sie ist für Text
 * reserviert, der nicht vom Verein stammt — dieser schon.
 */
.termindetail__ansage {
	max-width: var(--lesebreite);
	margin-bottom: var(--raum-block);
	color: var(--tinte);
	line-height: 1.65;
}

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

/* Hashtags am Ende sind eine Zeile Nachtrag, kein Absatz. */
.termindetail__ansage p:last-child {
	margin-bottom: 0;
}

/*
 * Die Überschriften darin sind die des Beitrags, nicht die der Seite.
 * Ohne diese Zeile stünde mitten auf der Termindetailseite eine zweite
 * `h2` in der Plakatschrift und behauptete, ein Abschnitt zu sein.
 */
.termindetail__ansage h1,
.termindetail__ansage h2,
.termindetail__ansage h3,
.termindetail__ansage h4 {
	font-family: var(--schrift-text);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.5;
	margin-bottom: .2em;
}

.termindetail__ansage a {
	overflow-wrap: anywhere;
}

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

.termindetail__fotos {
	margin-top: var(--raum-abschnitt);
}

/* ---------- Der Termin auf dem Handy ---------- */

/*
 * Auf einem schmalen Schirm stimmten am Band drei Dinge nicht: Der
 * Flyer nahm zwei Drittel der Höhe, zwischen Bild und Text klaffte der
 * große Abstand vom Rechner, und die Eckdaten standen als vier
 * Einzelblöcke mit je einer Zeile Inhalt untereinander — auf einer
 * Bildschirmhöhe verteilt.
 */
@media (max-width: 52rem) {
	.termindetail__band {
		padding-bottom: var(--raum-block);
	}

	.termindetail__kopf {
		gap: var(--raum-block);
	}

	/*
	 * Der Flyer kleiner und nicht mehr über die halbe Spalte. Er ist
	 * hier nicht das Hauptbild — das ist der weichgezeichnete Grund
	 * dahinter —, sondern die Beigabe zum Titel.
	 */
	.termindetail__flyer {
		max-width: 14rem;
	}

	.termindetail__text {
		text-align: left;
	}

	/*
	 * Die Eckdaten in zwei Spalten statt in vier Blöcken untereinander.
	 * „Beginn 15:00 Uhr“ braucht keine ganze Zeile, und vier davon
	 * untereinander sind ein Bildschirm voll Luft.
	 */
	.eckdaten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--raum-eng);
	}

	.eckdatum {
		padding: .7rem 0;
		border-top: 1px solid var(--linie);
	}

	/* Die oberste Zeile hat schon die Linie des Rasters darüber. */
	.eckdatum:nth-child(-n + 2) {
		border-top: 0;
	}

	.eckdatum dd {
		font-size: 1rem;
	}
}

@media (max-width: 30rem) {
	/*
	 * Ganz schmal wieder einspaltig: Zwei Spalten ergäben bei „JuZe und
	 * Online“ drei Zeilen Umbruch neben einer Zeile „15:00 Uhr“.
	 */
	.eckdaten {
		grid-template-columns: minmax(0, 1fr);
	}

	.eckdatum:nth-child(-n + 2) {
		border-top: 1px solid var(--linie);
	}

	.eckdatum:first-child {
		border-top: 0;
	}

	.termindetail__flyer {
		max-width: 11rem;
	}

	/*
	 * Die Knöpfe über die volle Breite. Nebeneinander bräche „Tickets“
	 * mit Symbol um, und ein Knopf mit zwei Zeilen ist kein Knopf mehr.
	 */
	.termindetail__band .termin__taten {
		align-items: stretch;
		flex-direction: column;
	}

	.termindetail__band .knopf {
		justify-content: center;
	}

	.termindetail__band .termin__zeichen {
		margin: 0 auto;
	}
}

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

.worte {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

/*
 * Umriss statt Fläche. Ein Schlagwort ist keine Schaltfläche; eine
 * gefüllte Kapsel behauptet, man könne darauf klicken, und genau das
 * kann man nicht.
 */
.worte__wort {
	margin: 0;
	padding: .22rem .7rem;
	border: 1px solid var(--linie);
	border-radius: var(--radius-bedienung);
	color: var(--leise);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
}

/* ---------- Die Reiterleiste über den Medienseiten ---------- */

/*
 * Reiter unter dem Seitenkopf: Fotos, Videos, Presse. Vorbild ist die
 * Leiste des Schwestervereins, mit zwei Abweichungen — kein Bildchen je
 * Reiter (ein Feld, das niemand pflegt) und Textschrift statt
 * Plakatschrift, die bei dieser Größe zu grauen Strichen wird.
 *
 * Die Linie unten liegt an der Leiste, die farbige Kante am Reiter, und
 * der Reiter zieht sich mit `margin-bottom: -2px` darüber. So sitzt die
 * Kante des gewählten Reiters genau auf der Linie statt zwei Pixel
 * darunter.
 *
 * Die Kante ist immer da, nur durchsichtig: Ein erst beim Überfahren
 * gesetzter Rahmen ließe die Schrift um zwei Pixel springen. Dieselbe
 * Regel wie im Hauptmenü.
 */
.medienleiste {
	margin-bottom: var(--raum-block);
	border-bottom: 2px solid var(--linie);
}

.medienleiste__liste {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.medienleiste__liste a {
	display: block;
	margin-bottom: -2px;
	padding: .55rem .2rem;
	border-bottom: 2px solid transparent;
	color: var(--leise);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--takt) ease, border-color var(--takt) ease;
}

.medienleiste__liste a:hover,
.medienleiste__liste a:focus-visible {
	color: var(--dunkel);
	border-bottom-color: var(--eis);
}

.medienleiste__liste .current-menu-item > a,
.medienleiste__liste .current_page_item > a,
.medienleiste__liste .current-menu-ancestor > a {
	color: var(--dunkel);
	border-bottom-color: var(--eis-tief);
}

/*
 * Auf dem Handy eine Zeile zum Wischen statt drei Zeilen Umbruch. Die
 * Reiter sind kurz; über die Kante hinaus geht es erst bei vieren.
 */
@media (max-width: 32rem) {
	.medienleiste__liste {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.medienleiste__liste::-webkit-scrollbar {
		display: none;
	}

	.medienleiste__liste a {
		white-space: nowrap;
	}
}

/* ---------- Alben und Fotos ---------- */

/*
 * Quadratische Deckblätter im Raster. Quadratisch, weil die Bilder aus
 * Flickr in jedem Format kommen und ein Raster aus unterschiedlich hohen
 * Kacheln unruhig wirkt — bei zwanzig Strecken sieht man nur noch die
 * Treppe an der Unterkante.
 */
.albenliste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.album {
	margin: 0;
}

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

.album__bild {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--dunst);
}

.album__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.album__flaeche:hover .album__bild img,
.album__flaeche:focus-visible .album__bild img {
	transform: scale(1.04);
}

/*
 * Die Bildanzahl auf dem Deckblatt, unten rechts. Sie beantwortet die
 * Frage, ob sich der Klick lohnt, bevor man ihn tut — bei einer Strecke
 * mit drei Bildern anders als bei einer mit zweihundert.
 */
.album__anzahl {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: .3rem .6rem;
	background: var(--dunkel);
	color: var(--eis);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.album__titel {
	display: block;
	margin-top: .7rem;
	color: var(--dunkel);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.album__flaeche:hover .album__titel,
.album__flaeche:focus-visible .album__titel {
	text-decoration: underline;
	text-decoration-color: var(--eis);
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

.album__datum {
	display: block;
	margin-top: .15rem;
	color: var(--leise);
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
}

/*
 * Wer fotografiert hat, auf der Kachel. Eine Zeile, gekürzt: Bei drei
 * Namen stünde die Kachel sonst schief im Raster, und für die Namen im
 * Ganzen gibt es die Albumseite.
 */
.album__credits {
	display: block;
	margin-top: .3rem;
	overflow: hidden;
	color: var(--leise);
	font-size: .75rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ---------- Die Einwilligungsschranke ---------- */

/*
 * Steht über einem Bereich mit Bildern von Flickr, solange niemand sie
 * freigegeben hat. Dieselbe Zeichnung wie beim Hinweistext eines Termins
 * — eisblaue Kante, leise Fläche —, denn es ist derselbe Fall: etwas auf
 * der Seite, das nicht von hier kommt.
 */
.fotoschranke {
	max-width: 46rem;
	margin-bottom: var(--raum-block);
	padding: var(--raum-eng) var(--raum-eng) var(--raum-eng) 1.25rem;
	border-left: 2px solid var(--eis);
	background: var(--dunst);
}

.fotoschranke__text {
	margin: 0 0 .9rem;
	color: var(--tinte);
}

.fotoschranke__taten {
	margin: 0 0 .7rem;
}

.fotoschranke__merken {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--leise);
	font-size: .875rem;
}

/*
 * Ein Bild ohne Quelle ist null Pixel hoch. Die Kachel behält trotzdem
 * ihre Fläche, weil sie ihr Seitenverhältnis selbst setzt — sonst
 * sprängen beim Freigeben fünfzig Kacheln gleichzeitig auf und die Seite
 * würde unter dem Finger länger.
 */
.foto img:not([src]),
.album__bild img:not([src]),
.termin__flyer img:not([src]),
.termindetail__flyer img:not([src]) {
	visibility: hidden;
}

/* ---------- Die knappe Schranke auf einem Flyer ---------- */

/*
 * Auf einer Terminkachel ist für drei Sätze und ein Kästchen kein Platz.
 * Diese Fassung sagt dasselbe in vier Wörtern und einem Knopf, mitten
 * auf der Fläche, die sonst der Flyer füllt.
 *
 * Der Kasten ist sichtbar ein wartendes Bild und kein Fehler — das ist
 * der ganze Zweck. Ein leerer Rahmen an dieser Stelle sähe nach einer
 * kaputten Seite aus, und niemand käme auf die Idee, dass ein Klick ihn
 * füllt.
 */
.flyerschranke {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	padding: 1rem;
	background: var(--dunkel-tief);
	color: rgba(255, 255, 255, .8);
	text-align: center;
}

.flyerschranke__text {
	font-size: .8125rem;
	letter-spacing: .04em;
}

.flyerschranke__knopf {
	padding: .5rem 1rem;
	background: var(--eis);
	border: 0;
	border-radius: var(--radius-bedienung);
	color: var(--dunkel);
	font: inherit;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}

.flyerschranke__knopf:hover,
.flyerschranke__knopf:focus-visible {
	background: var(--weiss);
}

/*
 * Der Knopf muss über der Klickfläche des Titels liegen, sonst führt ein
 * Klick darauf zur Detailseite statt das Bild freizugeben — dieselbe
 * Überlagerung wie beim Flyerknopf, und derselbe Grund.
 */
.termin .flyerschranke {
	z-index: 2;
}

/* ---------- Die Bilder einer Strecke ---------- */

/*
 * Dichter als die Alben: Hier zählt die Menge, nicht das einzelne Bild.
 * Wer eines genauer ansehen will, klickt es groß.
 */
.fotoliste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(10rem, 45%), 1fr));
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fotoliste__punkt {
	margin: 0;
}

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

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

.foto:hover img,
.foto:focus-visible img {
	transform: scale(1.05);
	opacity: .88;
}

.fotoliste__mehr {
	margin: 1.25rem 0 0;
}

/* ---------- Eine Albumseite ---------- */

.albumseite__zurueck {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.75rem;
	margin-bottom: 1.25rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.albumseite__zurueck a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	text-decoration: none;
}

.albumseite__kopf {
	margin-bottom: var(--raum-block);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--linie);
}

.albumseite__titel {
	margin: 0 0 .35rem;
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
}

/*
 * Die Foto-Credits. Sie stehen unter der Meta-Zeile und nicht darin: In
 * der Zeile mit Datum und Bildzahl wären sie eine Angabe unter Angaben,
 * und der Name des Fotografen ist keine Zahl.
 *
 * Die Marke „Fotos“ ist dieselbe Kleinzeile wie überall (`.kennzeichen`
 * in klein) — ohne sie liest sich ein Name unter einer Bildergalerie wie
 * eine Bildunterschrift.
 */
.albumseite__credits {
	margin: .6rem 0 0;
	color: var(--leise);
	font-size: .875rem;
	line-height: 1.6;
}

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

.albumseite__credits-marke {
	margin-right: .5rem;
	color: var(--eis-tief);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.albumseite__credits a {
	color: inherit;
	font-weight: 600;
	text-decoration-color: var(--eis);
}

.albumseite__credits a:hover,
.albumseite__credits a:focus-visible {
	color: var(--dunkel);
}

.albumseite__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.5rem;
	margin: 0;
	color: var(--leise);
	font-size: .9375rem;
	font-variant-numeric: tabular-nums;
}

/* ---------- Alle Strecken untereinander ---------- */

.fotostrecke {
	margin-bottom: var(--raum-abschnitt);
}

.fotostrecke__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .35rem 1.5rem;
	margin-bottom: 1rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--linie);
}

.fotostrecke__titel {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -.01em;
}

.fotostrecke__datum {
	margin: 0;
	color: var(--leise);
	font-size: .875rem;
	font-variant-numeric: tabular-nums;
}

/* ---------- Die Großansicht ---------- */

/*
 * Ein echtes `<dialog>`. Der Browser übernimmt damit vier Dinge, die man
 * sonst von Hand nachbaut und dabei die Hälfte vergisst: den Fokus
 * einfangen, Escape zum Schließen, alles dahinter für Vorleseprogramme
 * stummschalten und die Verdunklung darunter.
 */
.fotofenster {
	max-width: 96vw;
	max-height: 94dvh;
	padding: 0;
	background: transparent;
	border: 0;
	overflow: visible;
}

.fotofenster::backdrop {
	background: rgba(15, 17, 21, .93);
}

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

.fotofenster img {
	display: block;
	max-width: 96vw;
	max-height: 84dvh;
	width: auto;
	margin: 0 auto;
}

.fotofenster figcaption {
	margin-top: .7rem;
	color: rgba(255, 255, 255, .8);
	font-size: .875rem;
}

.fotofenster :focus-visible {
	outline-color: var(--eis);
}

.fotofenster__zu,
.fotofenster__blatt {
	position: absolute;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(135, 206, 220, .16);
	color: var(--weiss);
	cursor: pointer;
	transition: background-color var(--takt) ease, color var(--takt) ease;
}

.fotofenster__zu:hover,
.fotofenster__zu:focus-visible,
.fotofenster__blatt:hover,
.fotofenster__blatt:focus-visible {
	background: var(--eis);
	color: var(--dunkel);
}

.fotofenster__zu {
	top: -1rem;
	right: -1rem;
	z-index: 2;
	width: 2.4rem;
	height: 2.4rem;
}

.fotofenster__zu svg {
	width: 1.2rem;
	height: 1.2rem;
}

.fotofenster__blatt {
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
}

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

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

/*
 * Auf schmalen Schirmen ist neben dem Bild kein Platz für die Knöpfe.
 * Sie rücken dorthin, wo der Daumen ohnehin liegt: an den unteren Rand.
 */
@media (max-width: 60rem) {
	.fotofenster__blatt {
		top: auto;
		bottom: -3.75rem;
		transform: none;
	}

	.fotofenster__blatt--zurueck { left: calc(50% - 4rem); }
	.fotofenster__blatt--vor     { right: calc(50% - 4rem); }

	.fotofenster__zu {
		top: -3.25rem;
		right: 0;
	}

	.fotofenster img {
		max-height: 68dvh;
	}
}

/*
 * Ein Satz im Kleingedruckten: eine Einschränkung, kein Nebensatz.
 *
 * Auf der Kontaktseite steht darin, dass die Anschrift der Sitz des
 * Vereins ist und keine Anlaufstelle. Das muss lesbar sein — nur eben
 * nicht so laut wie die Anschrift darüber.
 */
.has-text-align-center.kleingedruckt {
	max-width: none;
}

.kleingedruckt {
	/*
	 * 46 Zeichen, damit eine Fußnote nicht so breit läuft wie der Text
	 * darüber. Mittig gesetzt gilt das nicht: Dort ist die schmale
	 * Spalte keine Fußnote am Rand, sondern eine Einbuchtung in der
	 * Mitte — und die sieht aus wie ein Fehler.
	 */
	max-width: 46ch;
	color: var(--leise);
	font-size: .875rem;
	line-height: 1.55;
}

/* ---------- Nach einer Bestätigung ---------- */

.bestaetigung {
	padding-bottom: var(--raum-weit);
}

.bestaetigung__text {
	font-size: 1.125rem;
	line-height: 1.65;
	margin-bottom: var(--raum-block);
}

/*
 * Bei einem abgelaufenen Link bekommt der Text die eisblaue Kante — die
 * Zeichnung, die auf dieser Seite überall für „hier ist etwas anderes“
 * steht. Kein Rot: Es ist kein Fehler des Besuchers, und eine rote
 * Warnfläche für „der Link ist alt“ ist unverhältnismäßig.
 */
.bestaetigung__text--fehler {
	padding: 1.1rem 0 1.1rem 1.25rem;
	border-left: 2px solid var(--eis);
	background: var(--dunst);
}

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

.bestaetigung__taten {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin: 0 0 var(--raum-eng);
}

.bestaetigung__hilfe {
	margin: 0;
	color: var(--leise);
	font-size: .9375rem;
}

/* ---------- Lesedauer ---------- */

/*
 * Sie steht in derselben Zeile wie Datum und Rubrik und sieht aus wie
 * die beiden — sie ist eine Angabe zum Beitrag und keine Auszeichnung.
 * Ein Kästchen oder eine Uhr daneben machte aus einer Nebenangabe eine
 * Ankündigung.
 */
.lesedauer {
	color: var(--leise);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

/*
 * Getrennt wird mit demselben Zeichen wie zwischen Datum und Rubrik —
 * `.meta__trenner` steht dafür schon im Stylesheet. Ein eigener Punkt
 * hier hätte zwei Trennzeichen in einer Zeile ergeben, die verschieden
 * aussehen.
 */

/*
 * Das Beitragsbild steht **nicht** im Beitrag. Es gehört in die
 * Übersicht und in die Vorschau beim Teilen; im Text setzt die Redaktion
 * Bildblöcke, die sich ziehen lassen und an der Stelle stehen, an die
 * sie gehören.
 *
 * Die vier Formate aus Fassung 1.44.0 sind damit entfallen. Die Klasse
 * `.beitrag__bild` bleibt: Sie trägt weiterhin das Bild einer **Seite**.
 */

/* ---------- Teilen ---------- */

/*
 * Verweise, keine Schaltflächen der Anbieter. Deren Skripte laden bei
 * jedem Seitenaufruf Code von fremden Servern — und zwar bevor jemand
 * darauf klickt.
 */
.teilen {
	margin: var(--raum-block) 0 0;
	padding-top: var(--raum-eng);
	border-top: 1px solid var(--linie);
}

.teilen__marke {
	margin: 0 0 .7rem;
	color: var(--leise);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

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

/*
 * Umrandet und nicht gefüllt: Fünf gefüllte Knöpfe unter einem Beitrag
 * wären lauter als der Beitrag. Sie sollen dastehen, wenn man sie
 * sucht — nicht auffallen, während man liest.
 */
.teilen__weg {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .9rem;
	background: none;
	border: 1px solid var(--linie);
	border-radius: var(--radius-bedienung);
	color: var(--dunkel);
	font: inherit;
	font-size: .8125rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--takt) ease, background-color var(--takt) ease;
}

.teilen__weg:hover,
.teilen__weg:focus-visible {
	background: var(--dunst);
	border-color: var(--eis);
	color: var(--dunkel);
}

.teilen__weg .icon {
	width: 16px;
	height: 16px;
	color: var(--eis-tief);
}

/* Kurz nach dem Klick sagt der Knopf, dass es geklappt hat. */
.teilen__kopieren.ist-kopiert {
	background: var(--dunst);
	border-color: var(--eis);
}

/* ---------- Rechtstexte ---------- */

/*
 * Impressum und Datenschutzerklärung sind lange Fließtexte mit vielen
 * Zwischenüberschriften. Sie brauchen keine eigene Gestaltung — nur
 * etwas mehr Luft zwischen den Abschnitten, damit man beim Suchen nach
 * „Registernummer“ nicht durch eine Textwand scrollt.
 *
 * Die Klasse setzt niemand von Hand: `pjt_rechtstext_klasse()` erkennt
 * die Seiten an ihrer Rolle.
 */
.ist-rechtstext .inhalt > h2 {
	margin-top: var(--raum-block);
	font-family: var(--schrift-text);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--dunkel);
}

.ist-rechtstext .inhalt > h2:first-child {
	margin-top: 0;
}

/*
 * Die Zwischenüberschriften stehen in der Textschrift und nicht in Wire
 * One. Ein Impressum wird gesucht, nicht gelesen: Man springt zu
 * „Registereintrag“, und dafür braucht es eine Überschrift, die sich vom
 * Absatz abhebt — nicht eine, die schön aussieht.
 */
.ist-rechtstext .inhalt > p {
	max-width: 46rem;
}

/* ---------- Kontaktkarten ---------- */

/*
 * Eine Karte je Ansprechpartner: Rolle, Name, zwei Wege.
 *
 * Die Rolle steht **über** dem Namen, nicht darunter. Wer eine
 * Kontaktseite aufruft, sucht selten einen bestimmten Menschen — er sucht
 * den, der für seine Frage zuständig ist. Die Rolle ist die Angabe, an
 * der entlang gelesen wird.
 */
.kontaktkarte {
	height: 100%;
	padding: var(--raum-eng);
	background: var(--dunst);
	border-left: 2px solid var(--eis);
}

.kontaktkarte .kennzeichen {
	margin-bottom: .35rem;
	text-align: left;
}

.kontaktkarte__name {
	margin: 0 0 .6rem;
	font-family: var(--schrift-text);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -.01em;
}

/*
 * Die beiden Wege stehen untereinander und nicht als Knöpfe
 * nebeneinander. Zwei Knöpfe gleicher Größe stellen die Frage „welchen
 * denn?“; zwei Zeilen beantworten sie mit der Reihenfolge — anrufen
 * zuerst, schreiben danach.
 */
.kontaktkarte__wege {
	margin: 0;
	line-height: 1.9;
}

.kontaktkarte__wege a {
	font-weight: 600;
	overflow-wrap: anywhere;
}

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

/*
 * Höhe über eine eigene Angabe, damit der Shortcode sie setzen kann,
 * ohne dass hier für jeden Fall eine Regel steht.
 */
.karte {
	position: relative;
	height: var(--kartenhoehe, 360px);
	overflow: hidden;
	background: var(--dunst);
	border: 1px solid var(--linie);
}

.karte iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * Die Schranke liegt über der Fläche, die später die Karte einnimmt —
 * nicht daneben und nicht darüber im Fluss. Sonst spränge die Seite beim
 * Freigeben um dreihundert Pixel, und man verlöre die Stelle, an der man
 * gerade gelesen hat.
 */
.karte__schranke {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: .6rem;
	padding: var(--raum-eng);
	background: var(--dunst);
}

.karte__ort {
	margin: 0;
	color: var(--dunkel);
}

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

.karte__taten {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: .2rem 0 0;
}

.karte__merken {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--leise);
	font-size: .875rem;
}

/*
 * Hat das Skript des Moduls die Karte geladen, setzt es diese Klasse.
 * Die Schranke verschwindet damit, ohne dass das Theme eigenes
 * JavaScript dafür braucht.
 */
.pj-karte--geladen .karte__schranke {
	display: none;
}

/* ---------- News ---------- */

/*
 * Alle Kacheln gleich hoch, mit Bild und ohne.
 *
 * Das ist die Stelle, an der eine Beitragsübersicht gewöhnlich
 * auseinanderfällt: Ein Beitrag hat ein Foto, der nächste nicht, der
 * dritte einen längeren Titel — und aus dem Raster wird eine Treppe.
 *
 * `align-items: stretch` (die Vorgabe im Raster) zieht die Kacheln auf
 * dieselbe Höhe; damit das etwas nützt, muss die Kachel selbst eine
 * Spalte sein, deren Textteil wächst.
 */
.newsliste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
	margin-bottom: var(--raum-abschnitt);
}

.newskarte {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--papier);
	border: 1px solid var(--linie);
	transition: transform var(--takt) ease;
}

.newskarte:hover,
.newskarte:focus-within {
	transform: translateY(-3px);
}

/*
 * Dieselbe Akzentlinie wie bei der Terminkachel: billiger als ein
 * Schatten, den es auf dieser Seite nicht gibt, und sie sagt dasselbe.
 */
.newskarte::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	height: 3px;
	background: var(--eis);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 240ms ease;
}

.newskarte:hover::before,
.newskarte:focus-within::before {
	transform: scaleX(1);
}

/* ---------- Die Bildfläche ---------- */

/*
 * Quadratisch, `cover`. Ein hochformatiges Foto wird beschnitten — die
 * Kachel bleibt, wie sie ist. Anders herum wäre es falsch: Ein Raster,
 * dessen Höhe von den hochgeladenen Bildern abhängt, ist kein Raster.
 *
 * Das Quadrat und nicht 3:2, weil die Bilder eines Vereins in jedem
 * Format daherkommen: Hochformat vom Telefon, Querformat von der Kamera,
 * ein quadratisches Logo. Ein quadratischer Ausschnitt beschneidet beide
 * Richtungen gleich stark und trifft damit im Mittel besser als einer,
 * der Hochformate halbiert.
 *
 * Nebenbei passt es zu den Fotostrecken — die stehen ebenfalls im
 * Quadrat.
 */
.newskarte__bild {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--dunst);
}

.newskarte__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.newskarte:hover .newskarte__bild img {
	transform: scale(1.04);
}

/*
 * Ohne Bild steht dort trotzdem eine Fläche — mit dem Datum darauf.
 *
 * Sie ist **kein Platzhalter für ein fehlendes Bild**, sondern eine
 * eigene Gestaltung. Der Unterschied ist der ganze Punkt: Ein grauer
 * Kasten mit einem Bildsymbol sagt „hier fehlt etwas“; ein Datum in der
 * Plakatschrift sagt „so ist dieser Beitrag“.
 */
.newskarte__ersatz {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	height: 100%;
	padding: 1rem;
	background: var(--dunst);
	color: var(--dunkel);
	text-align: center;
}

/*
 * Im Quadrat ist mehr Höhe als vorher — das Datum darf entsprechend
 * größer stehen, sonst schwimmt es in der Fläche.
 */
.newskarte__ersatzdatum {
	font-family: var(--schrift-plakat);
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
	line-height: 1;
	letter-spacing: .02em;
}

.newskarte__ersatz .zier {
	margin: 0;
}

/* ---------- Der Textteil ---------- */

/*
 * `flex: 1` lässt ihn wachsen, `margin-top: auto` am Verweis schiebt
 * diesen nach unten. Damit steht „Weiterlesen“ in jeder Kachel auf
 * derselben Höhe, auch wenn der Titel darüber zwei Zeilen braucht und
 * beim Nachbarn nur eine.
 */
.newskarte__kern {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--raum-eng);
}

.newskarte__datum {
	margin: 0 0 .3rem;
	color: var(--leise);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.newskarte__titel {
	margin: 0 0 .6rem;
	font-family: var(--schrift-text);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-wrap: balance;
}

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

/*
 * Die ganze Kachel anklickbar, mit genau einem Link — dieselbe Lösung
 * wie bei Terminkachel und Presseartikel. Das Bild trägt deshalb
 * `aria-hidden` und `tabindex="-1"`: Es zeigt aufs selbe Ziel, und ein
 * Vorleseprogramm nennte sonst jeden Beitrag zweimal.
 */
.newskarte__titel a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.newskarte:hover .newskarte__titel a,
.newskarte__titel a:focus-visible {
	color: var(--dunkel-hoch);
	text-decoration: underline;
	text-decoration-color: var(--eis);
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

/*
 * Der Anriss wird auf drei Zeilen gekürzt. Er ist schon in Worten
 * begrenzt — aber ein Titel mit zwei Zeilen und ein Anriss mit vieren
 * ergäben zusammen wieder unterschiedliche Höhen im Textteil, und die
 * fallen auf, sobald zwei Kacheln nebeneinander stehen.
 */
.newskarte__anriss {
	margin: 0 0 1rem;
	color: var(--leise);
	font-size: .9375rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.newskarte__weiter {
	margin: auto 0 0;
}

.newskarte__mehr {
	color: var(--dunkel);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.newskarte:hover .newskarte__mehr {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

/* ---------- Presse ---------- */

/*
 * Die Übersicht trägt Titel und Anriss, nicht das ganze Zitat. Bei einem
 * längeren Ausschnitt wurde sie zur Textwüste, durch die man scrollt, um
 * den nächsten Titel zu finden.
 */
.presse__liste {
	display: grid;
	gap: var(--raum-block);
}

.presseartikel {
	position: relative;
	display: grid;
	gap: 1rem 2rem;
	padding-bottom: var(--raum-block);
	border-bottom: 1px solid var(--linie);
}

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

@media (min-width: 48rem) {
	.presseartikel:has(.presseartikel__bild) {
		grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
		align-items: start;
	}
}

.presseartikel__bild {
	display: block;
	overflow: hidden;
	border: 1px solid var(--linie);
}

.presseartikel__bild img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 400ms ease;
}

.presseartikel:hover .presseartikel__bild img {
	transform: scale(1.03);
}

/*
 * Die Quelle steht über dem Titel und nicht darunter. Bei einem
 * Zeitungsausschnitt ist sie die halbe Aussage: „Saale-Zeitung“ und
 * „irgendein Blog“ sind zwei verschiedene Dinge, und das soll man wissen,
 * bevor man liest.
 */
.presseartikel__quelle {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem .9rem;
	margin: 0 0 .4rem;
	color: var(--leise);
	font-size: .8125rem;
	letter-spacing: .04em;
}

.presseartikel__medium {
	color: var(--eis-tief);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.presseartikel__titel {
	margin: 0 0 .6rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	text-wrap: balance;
}

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

/*
 * Die ganze Kachel anklickbar, mit genau einem Link — dieselbe Lösung wie
 * bei der Terminkachel. Ein zweiter Link auf dasselbe Ziel („Weiterlesen“)
 * wäre für ein Vorleseprogramm eine Dopplung; er trägt deshalb
 * `aria-hidden` über das Pseudoelement des Titels.
 */
.presseartikel__titel a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.presseartikel:hover .presseartikel__titel a,
.presseartikel__titel a:focus-visible {
	color: var(--dunkel-hoch);
	text-decoration: underline;
	text-decoration-color: var(--eis);
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

.presseartikel__anriss {
	margin: 0 0 .7rem;
	color: var(--leise);
}

.presseartikel__weiter {
	margin: 0;
}

.presseartikel__mehr {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

.presseartikel:hover .presseartikel__mehr {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

/* ---------- Ein einzelner Artikel ---------- */

/*
 * Der Kopf ist seit 1.63 ein Band (siehe `single-ipuj_presse.php`); die
 * Klasse bleibt für gespeicherte Inhalte stehen, die sie noch benutzen.
 */
.pressebeitrag__kopf {
	margin-bottom: var(--raum-block);
}

/* Der Zurück-Verweis führt zur Presseübersicht und steht über allem. */
.pressebeitrag .albumseite__zurueck {
	margin-bottom: var(--raum-block);
}

.pressebeitrag__bild {
	margin: 0 0 var(--raum-block);
	border: 1px solid var(--linie);
}

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

/*
 * Die Bildunterschrift ohne Fläche. Ein Dunstbalken unter einem Bild mit
 * abgeschnittener Ecke stößt an der Ecke gegen die Kante und sieht aus
 * wie ein Fehler beim Zuschneiden.
 */
.pressebeitrag__bild figcaption {
	margin: .5rem 0 0;
	padding: 0;
	background: none;
	color: var(--leise);
	font-size: .8125rem;
}

/*
 * ---------------------------------------------------------------------
 * Der Ausschnitt
 * ---------------------------------------------------------------------
 *
 * Bis 1.63 war das ein Dunstkasten mit dünner Kante links: derselbe
 * Kasten, in dem anderswo auf der Seite ein Hinweis steht. Auf einer
 * Presseseite ist der Ausschnitt aber nicht die Beigabe, sondern das
 * Eigentliche — und er sah aus wie eine Fußnote von acht Zeilen.
 *
 * Jetzt trägt er ein Anführungszeichen in der Plakatschrift, das
 * halb über der Kante sitzt. Es ist groß genug, um den Abschnitt als
 * Zitat erkennbar zu machen, bevor jemand liest, und `aria-hidden`
 * braucht es nicht: Es steht in `::before` und wird von Vorleseprogrammen
 * ohnehin meist übergangen.
 */
.presseauszug {
	margin: 0 0 var(--raum-block);
}

.pressebeitrag__zitat {
	position: relative;
	margin: 0;
	/* Oben mehr Platz: Dort steht das Anführungszeichen, und der Text
	   beginnt darunter statt daneben. Ohne den Zuschlag lief die erste
	   Zeile in das Zeichen hinein und das „I“ von „Im“ verschwand. */
	padding: clamp(3.25rem, 6vw, 4rem) clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.25rem);
	border: 0;
	border-left: 3px solid var(--eis);
	background: var(--dunst);
	color: var(--tinte);
	font-size: 1.0625rem;
	line-height: 1.7;
}

/*
 * Das Anführungszeichen in der Textschrift, nicht in der Plakatschrift:
 * Wire One ist so schmal, dass zwei Kommas daraus bei jeder Größe wie
 * Staub aussehen. Archivo Fett trägt die Form.
 */
.pressebeitrag__zitat::before {
	content: '\201E';
	position: absolute;
	top: .35rem;
	left: clamp(1.25rem, 3vw, 2rem);
	font-family: var(--schrift-text);
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--eis);
	opacity: .55;
	pointer-events: none;
}

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

/*
 * Die Quelle unter dem Ausschnitt: Blatt in der Kleinzeile, Datum in
 * Grau daneben. Rechtsbündig, damit sie als Abschluss gelesen wird und
 * nicht als weiterer Absatz.
 */
.presseauszug__quelle {
	margin: .6rem 0 0;
	text-align: right;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--eis-tief);
}

.presseauszug__datum {
	margin-left: .5rem;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--leise);
}

.pressebeitrag__weiter {
	margin: 0 0 .8rem;
}

/*
 * Das Bild bekommt die Ecke des Themes statt eines Rahmens auf allen vier
 * Seiten. Ein Kasten um ein Foto ist die Zeichnung eines Dokuments; die
 * Bilder dieser Website haben stattdessen eine abgeschnittene Ecke.
 */
.pressebeitrag__bild {
	border: 0;
}

.pressebeitrag__bild img {
	/* Dieselbe Ecke wie `is-style-ecke`: unten rechts abgeschnitten. */
	border-radius: 0 0 clamp(2rem, 5vw, 3.5rem) 0;
}

.pressebeitrag__quellenhinweis {
	margin: 0;
	color: var(--leise);
	font-size: .875rem;
}

/* ---------- Was außerhalb des Bildschirms liegt ---------- */

/*
 * ---------------------------------------------------------------------
 * `content-visibility`: der Browser rechnet nur, was zu sehen ist
 * ---------------------------------------------------------------------
 *
 * `loading="lazy"` an den Bildern gibt es im Theme längst überall. Es
 * spart aber nur die **Bilddateien** — das HTML ist trotzdem vollständig
 * da, und der Browser rechnet Layout und Zeichnung für jeden Eintrag,
 * auch für den fünfhundertsten weit unten.
 *
 * Genau dort liegt bei diesem Theme die Arbeit: Der Rückblick zeigt alle
 * vergangenen Abende, eine Fotostrecke alle Bilder eines Albums. Bei
 * hundert Einträgen ist das Laden nicht das Problem, sondern das erste
 * Zeichnen.
 *
 * `content-visibility: auto` überspringt beides für alles, was weit
 * außerhalb des Sichtfensters liegt, und holt es nach, sobald es in die
 * Nähe kommt. Für den Leser ändert sich nichts: Suchen mit Strg+F,
 * Sprungmarken und Vorleseprogramme finden den Inhalt weiterhin.
 *
 * **`contain-intrinsic-size` ist dabei Pflicht, kein Beiwerk.** Ohne die
 * Angabe hätte ein übersprungener Eintrag die Höhe null, die Seite wäre
 * beim Laden kurz und die Bildlaufleiste spränge bei jedem Scrollen.
 * Die Werte sind Schätzungen der üblichen Höhe — sie müssen nicht genau
 * stimmen, nur ungefähr.
 */
.fadenpunkt,
.foto,
.albenliste > .album {
	content-visibility: auto;
}

.fadenpunkt {
	contain-intrinsic-size: auto 320px;
}

/* Quadratisch, also so hoch wie eine Spalte des Rasters breit ist. */
.foto {
	contain-intrinsic-size: auto 220px;
}

.albenliste > .album {
	contain-intrinsic-size: auto 300px;
}

/*
 * Beim Drucken nicht: Was übersprungen ist, stünde sonst als leere
 * Fläche auf dem Papier.
 */
@media print {
	.fadenpunkt,
	.foto,
	.albenliste > .album {
		content-visibility: visible;
	}
}

/* ---------- Der Faden ---------- */

/*
 * Vergangene Termine wechseln die Seite, dazwischen führt eine Kurve.
 *
 * Das ist kein Schmuck. Bei zwanzig gleich gebauten Kacheln untereinander
 * verliert man beim Scrollen das Gefühl dafür, wo man ist; der Wechsel
 * gibt jedem Abend eine eigene Stelle, und die Kurve sagt, dass es
 * weitergeht.
 *
 * Der Faden selbst ist eine Linie in der Mitte. Die Kurven sind
 * Viertelkreise: ein Element mit zwei Rändern und einer Eckenrundung,
 * mehr braucht es dafür nicht. Ein SVG je Punkt wäre der andere Weg und
 * hätte den Nachteil, dass es die Höhe nicht mitwächst.
 */
.termine-rueckblick {
	max-width: none;
	margin: 0;
}

.faden {
	position: relative;
	padding: 1rem 0;

	/*
	 * Der Container sitzt **hier** und nicht an der Karte.
	 *
	 * Das war der zweite Anlauf und der zweite Fehler: `container-type`
	 * an `.fadenpunkt` und dann `.fadenpunkt` in einer Containerabfrage
	 * gestalten — das geht nicht. Eine Abfrage misst immer den nächsten
	 * Container **oberhalb**; ihren eigenen kann sie nicht gestalten,
	 * sonst müsste der Browser eine Breite berechnen, die von ihrem
	 * Ergebnis abhängt.
	 *
	 * Sichtbar war das an zwei Karten nebeneinander, von denen die eine
	 * gestapelt stand und die andere nicht — dieselbe Breite, dieselben
	 * Regeln, verschiedenes Ergebnis.
	 *
	 * Am Faden funktioniert es, weil die Kartenbreite von seiner
	 * abhängt: `50% - 3.5rem`. Bei 62rem Faden ist eine Karte gut 27rem
	 * breit — die Schwelle unten ist entsprechend gerechnet.
	 */
	container-type: inline-size;
}

/*
 * Die Linie endet an den äußeren Punkten und läuft nicht ins Leere —
 * dieselbe Überlegung wie beim früheren Zeitstrahl: Eine Linie, die
 * ausläuft, sieht nach einem abgeschnittenen Element aus.
 */
.faden::before {
	content: '';
	position: absolute;
	top: 2rem;
	bottom: 2rem;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var(--linie);
}

/* ---------- Die Jahreszahl ---------- */

/*
 * Sie sitzt mittig auf dem Faden und unterbricht ihn. Der eigene
 * Hintergrund in Papierweiß ist dafür nötig — ohne ihn liefe die Linie
 * mitten durch die Ziffern.
 */
/*
 * Die Sprungliste im Band. Sie stand bis 1.57 als helle Zeile über dem
 * Faden und sah dort aus wie der Anfang der Liste; im Band ist sie das,
 * was sie ist: eine Auswahl, bevor die Liste anfängt.
 *
 * Auf dunklem Grund wird aus der grauen Kante eine helle: `currentColor`
 * mit wenig Deckung, damit die Zahlen lesbar bleiben und die Reihe
 * trotzdem ruhig ist.
 */
.band__spruenge {
	margin-top: var(--raum-block);
}

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

.band__spruenge a {
	display: inline-block;
	padding: .3rem .75rem;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--radius-bedienung);
	color: rgba(255, 255, 255, .82);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: border-color var(--takt) ease, background var(--takt) ease, color var(--takt) ease;
}

.band__spruenge a:hover,
.band__spruenge a:focus-visible {
	border-color: var(--eis);
	background: rgba(255, 255, 255, .1);
	color: var(--weiss);
}

.faden__jahr {
	scroll-margin-top: calc(var(--kopf-hoehe) + 1rem);
	position: relative;
	z-index: 1;
	width: max-content;
	margin: var(--raum-abschnitt) auto var(--raum-block);
	padding: 0 1rem;
	background: var(--papier);
	color: var(--dunkel);
	font-family: var(--schrift-plakat);
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
	line-height: 1;
	letter-spacing: .04em;
	text-align: center;
}

.faden__jahr:first-child {
	margin-top: 0;
}

/* ---------- Ein Punkt am Faden ---------- */

.fadenpunkt {
	position: relative;
	display: grid;
	gap: 1.25rem;
	width: calc(50% - 3.5rem);
	margin-bottom: var(--raum-block);
	padding: var(--raum-eng);
	background: var(--papier);
	border: 1px solid var(--linie);

}

.fadenpunkt--links {
	margin-right: auto;
}

.fadenpunkt--rechts {
	margin-left: auto;
}

/*
 * Plakat und Text nebeneinander — aber erst, wenn der Faden breit genug
 * ist. Bei 62rem ist eine Karte gut 27rem breit; darunter bliebe für den
 * Text weniger als 16rem, und darin steht kein Bandname mehr in einer
 * Zeile.
 */
@container (min-width: 62rem) {
	.fadenpunkt {
		grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
	}

	/* In der Spalte füllt es sie ganz — die Grenze oben gilt nur für den
	   gestapelten Fall. */
	.fadenpunkt__flyer {
		max-width: none;
	}
}

/*
 * Rechts vom Faden dreht sich die Anordnung: Plakat außen, Text innen.
 * So bleibt die Schrift nah am Faden und die Bilder liegen am Rand.
 *
 * Der Text wird dabei **nicht** rechtsbündig. Das war die erste Fassung
 * und sah gespiegelt aus statt gestaltet: Ein Absatz, der rechts
 * ausgerichtet ist, liest sich schlechter, und bei vier Schlagworten
 * ergibt es eine ausgefranste linke Kante.
 */
@container (min-width: 62rem) {
	.fadenpunkt--rechts {
		grid-template-columns: minmax(0, 1fr) minmax(0, 10rem);
	}

	.fadenpunkt--rechts .fadenpunkt__flyer {
		grid-column: 2;
		grid-row: 1;
	}

	.fadenpunkt--rechts .fadenpunkt__kern {
		grid-column: 1;
		grid-row: 1;
	}
}

/* ---------- Die Kurve zum Faden ---------- */

/*
 * Ein Viertelkreis aus zwei Rändern. Er beginnt an der Oberkante des
 * Punktes und endet auf dem Faden — von links kommend nach rechts
 * gebogen, von rechts kommend andersherum.
 */
.fadenpunkt__kurve {
	position: absolute;
	top: 1.5rem;
	width: 3.5rem;
	height: 3rem;
	border-color: var(--linie);
	border-style: solid;
	pointer-events: none;
}

/*
 * Der Bogen entsteht aus **zwei** Rändern und einer Eckenrundung: unten
 * und zur Fadenseite hin. Die Rundung verbindet beide, und übrig bleibt
 * genau ein Viertelkreis.
 *
 * Nur `border-bottom` allein ergäbe einen Strich — so sah die erste
 * Fassung aus, und ein gerader Strich zwischen Kasten und Linie ist eine
 * Verbindung, kein Faden.
 *
 * Der Weg des Auges: unten am Kasten heraus, im Bogen nach oben, oben an
 * der Linie an. Dort sitzt der Knoten.
 */
.fadenpunkt--links .fadenpunkt__kurve {
	right: -3.5rem;
	border-width: 0 2px 2px 0;
	border-bottom-right-radius: 3rem;
}

.fadenpunkt--rechts .fadenpunkt__kurve {
	left: -3.5rem;
	border-width: 0 0 2px 2px;
	border-bottom-left-radius: 3rem;
}

/*
 * Der Knoten auf dem Faden: ein Kreuz, wie überall auf dieser Seite.
 *
 * ---------------------------------------------------------------------
 * Der weiße Ring war zu breit
 * ---------------------------------------------------------------------
 *
 * Er deckt die Linie ab, damit das Kreuz darauf liegt und nicht davon
 * durchkreuzt wird — so weit richtig. Mit `.3rem` war er aber fast so
 * breit wie das Kreuz selbst: Rundherum entstand ein weißer Fleck von
 * achtzehn Pixeln, und Faden wie Bogen verschwanden darin, bevor sie den
 * Knoten erreichten.
 *
 * Das Kreuz saß dadurch **rechnerisch** mittig auf beiden Linien und
 * **sichtbar** nicht: Man sah drei Dinge mit Lücken dazwischen statt
 * eines Knotens.
 *
 * Zwei Pixel genügen. Sie trennen das Kreuz von der Linie, ohne sie
 * abzuschneiden.
 */
.fadenpunkt__kurve::after {
	content: '';
	position: absolute;
	top: -.4rem;
	width: .8rem;
	height: .8rem;
	background:
		linear-gradient(var(--eis-tief), var(--eis-tief)) center / 2px 100% no-repeat,
		linear-gradient(var(--eis-tief), var(--eis-tief)) center / 100% 2px no-repeat,
		var(--papier);
	box-shadow: 0 0 0 2px var(--papier);
}

/* Oben am Bogen, dort wo er auf den Faden trifft. */
.fadenpunkt--links .fadenpunkt__kurve::after {
	right: -.4rem;
	top: -.4rem;
}

.fadenpunkt--rechts .fadenpunkt__kurve::after {
	left: -.4rem;
	top: -.4rem;
}

/* ---------- Der Inhalt eines Punktes ---------- */

/*
 * Das Plakat bekommt **immer** eine Höchstbreite, auch gestapelt.
 *
 * Ohne sie füllte es die ganze Karte, sobald die Umschaltung auf zwei
 * Spalten nicht griff — und dann stand links ein Plakat über die volle
 * Kartenbreite und rechts eines von zehn Zeichen daneben. Zwei Karten,
 * dieselbe Sache, völlig verschiedene Wirkung.
 *
 * Die Grenze ist die Rückversicherung: Sollte eine Abfrage künftig nicht
 * greifen, sieht es immer noch aufgeräumt aus statt kaputt.
 */
.fadenpunkt__flyer {
	position: relative;
	display: block;
	width: 100%;
	max-width: 12rem;
	padding: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--dunst);
	border: 0;
	cursor: zoom-in;
}

.fadenpunkt__flyer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.fadenpunkt__datum {
	margin: 0 0 .15rem;
	color: var(--leise);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.fadenpunkt__titel {
	margin: 0 0 .5rem;
	font-family: var(--schrift-text);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.fadenpunkt__titel a {
	text-decoration: none;
}

.fadenpunkt__titel a:hover,
.fadenpunkt__titel a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--eis);
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

.fadenpunkt__lineup,
.fadenpunkt__ort {
	margin: 0 0 .35rem;
	font-size: .9375rem;
	color: var(--leise);
}

/*
 * „Mit dabei“ als Kleinzeile davor, nicht als eigene Zeile darüber. In
 * einem Kasten dieser Größe wäre eine Bezeichnungszeile über zwei
 * Bandnamen mehr Beschriftung als Inhalt.
 */
.fadenpunkt__marke {
	color: var(--eis-tief);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.fadenpunkt__lineup a {
	color: var(--dunkel);
	text-decoration-color: var(--eis);
}

.fadenpunkt__kern .worte {
	margin-bottom: .6rem;
}

.fadenpunkt__wege {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1rem;
	margin: 0;
}

/*
 * Schlagworte und Wege bleiben in einer Zeile, solange Platz ist. Ohne
 * `min-width: 0` an der Textspalte drückt der längste Bandname die
 * Spalte auf und das Plakat daneben zusammen.
 */
.fadenpunkt__kern {
	min-width: 0;
}

.fadenpunkt__kern .worte {
	gap: .35rem;
}

.fadenpunkt__kern .worte__wort {
	white-space: nowrap;
}

.fadenpunkt__weg {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}

.fadenpunkt__weg .icon {
	width: 15px;
	height: 15px;
}

.fadenpunkt__weg:hover,
.fadenpunkt__weg:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

/* ---------- Auf schmalen Schirmen ---------- */

/*
 * Kein Wechsel der Seite mehr: Bei einer Spalte gäbe es nichts zu
 * wechseln, und die Kurven führten ins Leere. Der Faden rutscht an den
 * linken Rand und wird zu dem, was er auf einem Telefon sein kann —
 * einer Linie, an der die Abende aufgereiht sind.
 */
@media (max-width: 60rem) {
	.faden::before {
		left: .8rem;
		margin-left: 0;
	}

	.faden__jahr {
		width: auto;
		margin-left: 0;
		padding-left: 0;
		text-align: left;
	}

	.fadenpunkt,
	.fadenpunkt--links,
	.fadenpunkt--rechts {
		width: auto;
		margin-left: 2.75rem;
		margin-right: 0;
	}

	.fadenpunkt--links .fadenpunkt__kurve,
	.fadenpunkt--rechts .fadenpunkt__kurve {
		left: -2.75rem;
		right: auto;
		width: 2.75rem;
		height: 2.25rem;
		border-width: 0 0 2px 2px;
		border-bottom-left-radius: 2.25rem;
		border-bottom-right-radius: 0;
	}

	.fadenpunkt--links .fadenpunkt__kurve::after,
	.fadenpunkt--rechts .fadenpunkt__kurve::after {
		left: -.4rem;
		right: auto;
	}

}

/* ---------- Zeitstrahl ---------- *//* ---------- Zeitstrahl ---------- */

/*
 * Vergangene Termine stehen als Zeitstrahl und nicht als Kacheln.
 *
 * Der Grund ist nicht Abwechslung, sondern die Frage, mit der jemand
 * hier ankommt: Was ansteht, sucht man nach Bild und Datum — was war,
 * nach Jahr. Ein Strahl gibt das Jahr als Anker und trägt in einer
 * Bildschirmhöhe zwanzig Abende statt drei.
 *
 * Er ist zudem die Form, die dieser Seite am nächsten liegt: eine
 * Haarlinie mit Kreuzen darauf, dieselbe Zeichnung wie im Logo.
 */
/*
 * Der Rückblick steht in der Lesebreite und mittig, nicht über die volle
 * Bahn. Ein Zeitstrahl mit drei Wörtern je Zeile über 84rem hinweg hat
 * rechts einen halben Meter Leere neben sich.
 */
/*
 * Die Breite des Rückblicks steht beim Faden, nicht hier.
 *
 * Bis Fassung 1.42.1 stand sie an beiden Stellen — hier mit 46rem aus
 * der Zeit des Zeitstrahls, dort mit voller Breite für den Faden. Die
 * spätere Regel gewann, und das war diese: Der Faden lief in einer Bahn
 * von 46rem, seine Karten waren damit 312 Pixel breit, und der Text
 * darin brach nach jedem zweiten Wort um.
 *
 * Eine Regel, die zweimal dasteht, ist keine doppelte Absicherung.
 */

.strahl {
	position: relative;
	margin: 0;
	padding: 0 0 0 var(--raum-abschnitt);
	list-style: none;
}

/*
 * Die Linie liegt hinter den Einträgen und endet an ihnen: `top` und
 * `bottom` mit demselben Wert, damit sie nicht über den ersten und
 * letzten Punkt hinaussteht. Eine Linie, die ins Leere ausläuft, sieht
 * nach einem abgeschnittenen Element aus.
 */
.strahl::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.4rem;
	bottom: 1.4rem;
	width: 1px;
	background: var(--linie);
}

/* ---------- Die Jahreszahl ---------- */

/*
 * Sie sitzt auf der Linie und unterbricht sie. Deshalb ein eigener
 * Hintergrund in Papierweiß: Ohne ihn liefe die Linie mitten durch die
 * Ziffern.
 */
.strahl__jahr {
	position: relative;
	margin: clamp(2rem, 5vw, 3rem) 0 1.25rem;
	padding: 0 .6rem 0 0;
	margin-left: clamp(-2rem, -5vw, -4rem);
	background: var(--papier);
	color: var(--dunkel);
	font-family: var(--schrift-plakat);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	line-height: 1;
	letter-spacing: .04em;
	/* Der Kasten soll nur so breit sein wie die Zahl. */
	display: inline-block;
}

.strahl__jahr:first-child {
	margin-top: 0;
}

/* ---------- Ein Eintrag ---------- */

.strahl__punkt {
	position: relative;
	margin: 0;
	padding: .9rem 0 .9rem 1.75rem;
}

/*
 * Das Kreuz auf der Linie, gezeichnet als zwei Verläufe mit einem
 * weißen Ring darum. Der Ring deckt die Linie ab, sodass das Kreuz
 * darauf liegt und nicht davon durchkreuzt wird.
 */
.strahl__punkt::before {
	content: '';
	position: absolute;
	left: -.4rem;
	top: 1.25rem;
	width: .8rem;
	height: .8rem;
	background:
		linear-gradient(var(--eis-tief), var(--eis-tief)) center / 2px 100% no-repeat,
		linear-gradient(var(--eis-tief), var(--eis-tief)) center / 100% 2px no-repeat,
		var(--papier);
	box-shadow: 0 0 0 .35rem var(--papier);
}

.strahl__datum {
	margin: 0 0 .15rem;
	font-variant-numeric: tabular-nums;
	color: var(--leise);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.strahl__titel {
	margin: 0;
	font-family: var(--schrift-text);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.strahl__titel a {
	text-decoration: none;
}

.strahl__titel a:hover,
.strahl__titel a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--eis);
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

.strahl__zusatz {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem .9rem;
	margin: .25rem 0 0;
	color: var(--leise);
	font-size: .875rem;
}

.strahl__fotos {
	color: var(--eis-tief);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/*
 * Auf einer navyblauen Fläche kehren sich Linie und Ring um. Sonst
 * stünde dort ein weißer Fleck hinter jedem Kreuz.
 */
.is-style-navy .strahl::before {
	background: rgba(135, 206, 220, .3);
}

.is-style-navy .strahl__jahr {
	background: var(--dunkel);
	color: var(--weiss);
}

.is-style-navy .strahl__punkt::before {
	background:
		linear-gradient(var(--eis), var(--eis)) center / 2px 100% no-repeat,
		linear-gradient(var(--eis), var(--eis)) center / 100% 2px no-repeat,
		var(--dunkel);
	box-shadow: 0 0 0 .35rem var(--dunkel);
}

/* ---------- Mittige Abschnittsköpfe ---------- */

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

.abschnittskopf--mitte .zier {
	margin-inline: auto;
}

.vorspann--mitte {
	margin-inline: auto;
	text-align: center;
}

/* ---------- Liste der Beiträge ---------- */

/*
 * Zeilen, keine Karten. Ein Beitrag ist eine Zeile mit Datum, Titel,
 * Anriss und einem kleinen Bild rechts. Drei gleich große Kacheln
 * nebeneinander sagen bei drei Beiträgen dasselbe wie eine Liste und bei
 * vier Beiträgen weniger.
 *
 * Nur eine Linie je Zeile, unten. Oben und unten ergäbe ein Gitter.
 */
.beitragsliste {
	margin: 0;
	border-top: 1px solid var(--linie);
}

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

@media (min-width: 48rem) {
	.anriss {
		grid-template-columns: 7rem minmax(0, 1fr) 12rem;
		align-items: start;
	}

	.anriss--ohne-bild {
		grid-template-columns: 7rem minmax(0, 1fr);
	}
}

.anriss__datum {
	color: var(--leise);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.anriss__titel {
	margin: 0 0 .5rem;
	font-family: var(--schrift-text);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	text-transform: none;
}

.anriss__titel a {
	text-decoration: none;
}

.anriss__titel a:hover,
.anriss__titel a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--eis);
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

.anriss__text {
	margin: 0 0 .75rem;
	color: var(--leise);
}

.anriss__bild img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.anriss__mehr {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}

.anriss__mehr:hover,
.anriss__mehr:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

/* ---------- Nebenangaben eines Beitrags ---------- */

.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.5rem;
	color: var(--leise);
	font-size: .8125rem;
	letter-spacing: .04em;
}

.meta a {
	color: var(--leise);
	text-decoration-color: var(--linie);
}

/*
 * Der Trenner zwischen Datum und Rubrik ist ein kurzer Strich, kein
 * Mittelpunkt. Der Mittelpunkt taucht sonst überall auf der Seite auf,
 * und dann trennt er nichts mehr, sondern verziert.
 */
.meta__trenner {
	display: inline-block;
	width: 1rem;
	height: 1px;
	background: var(--linie);
}

/* ---------- Einzelner Beitrag ---------- */

.beitrag__bild {
	margin-bottom: var(--raum-block);
}

.beitrag__bild img {
	width: 100%;
	max-height: 34rem;
	object-fit: cover;
}

.beitragsfuss {
	margin-top: 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--linie);
}

/*
 * Vor und Zurück unter einem Beitrag. Zwei Spalten, die zweite rechts
 * ausgerichtet — auch dann, wenn die erste fehlt. Deshalb `grid` mit
 * benannten Bereichen und nicht `flex` mit `space-between`: Bei nur einem
 * Link stünde der sonst links, egal welcher der beiden es ist.
 */
.post-navigation .nav-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 2rem;
	margin-top: 2rem;
}

.post-navigation .nav-previous { grid-column: 1; }

.post-navigation .nav-next {
	grid-column: 2;
	text-align: right;
}

.post-navigation a {
	display: block;
	text-decoration: none;
}

.post-navigation .anriss__titel {
	margin: .2rem 0 0;
	font-size: 1.0625rem;
}

.post-navigation a:hover .anriss__titel,
.post-navigation a:focus-visible .anriss__titel {
	color: var(--dunkel-hoch);
	text-decoration: underline;
	text-decoration-color: var(--eis);
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

/* ---------- Blätterung ---------- */

.blaetterung {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin-top: 3rem;
}

.blaetterung .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: .5rem;
	border: 1px solid var(--linie);
	border-radius: var(--radius-bedienung);
	color: var(--dunkel);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
}

.blaetterung .page-numbers:hover,
.blaetterung .page-numbers:focus-visible {
	border-color: var(--dunkel);
	background: var(--dunst);
}

.blaetterung .current {
	background: var(--dunkel);
	border-color: var(--dunkel);
	color: var(--weiss);
}

.blaetterung .dots {
	border-color: transparent;
	min-width: 1.5rem;
}

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

.social {
	padding-bottom: 2.5rem;
}

.social__titel {
	margin-bottom: 1rem;
	color: var(--eis);
	font-family: var(--schrift-text);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

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

.social__punkt {
	margin: 0;
}

/*
 * Runde Scheiben in Eisblau mit dem Zeichen in Navy, so wie auf der
 * bisherigen Seite. Navy auf Eisblau ergibt 9,6:1; die naheliegende
 * Umkehrung, weißes Zeichen auf Eisblau, ergäbe 2,0:1 und wäre auf einem
 * Handybildschirm bei Sonne nicht mehr zu erkennen. Siehe Regel 1 ganz
 * oben.
 *
 * Rund und nicht eckig: Ein Symbolknopf ohne Beschriftung ist das eine
 * Bedienelement, bei dem die Form die Funktion trägt. Alles andere auf
 * der Seite bleibt bei .4rem.
 */
.social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--eis);
	border: 0;
	border-radius: 50%;
	color: var(--dunkel);
	text-decoration: none;
	transition: background-color var(--takt) ease, transform var(--takt) ease;
}

.social__link:hover,
.social__link:focus-visible {
	background: var(--weiss);
	color: var(--dunkel);
	transform: translateY(-2px);
}

.social__link .icon {
	width: 20px;
	height: 20px;
}

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

.suchformular {
	display: flex;
	gap: .5rem;
	max-width: 30rem;
	margin-bottom: 2.5rem;
}

.suchformular input[type="search"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
	width: 100%;
	padding: .7rem .9rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-radius: var(--radius-bedienung);
	color: var(--tinte);
	font-family: inherit;
	font-size: 1rem;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	border-color: var(--eis-tief);
	outline-offset: 1px;
}

::placeholder {
	/* Gerade so hell, dass es als Hinweis lesbar bleibt. Heller wäre auf
	   Weiß nicht mehr zu entziffern. */
	color: var(--leise);
	opacity: .75;
}

.suchformular button {
	flex: 0 0 auto;
}

/* ---------- Nichts gefunden ---------- */

.nichts {
	max-width: 46rem;
	padding: clamp(2rem, 5vw, 3rem);
	background: var(--dunst);
}

.nichts h2 {
	margin-top: 0;
}

/* ---------- Fehlseite ---------- */

.fehlseite {
	max-width: 46rem;
}

.fehlseite__zahl {
	margin: 0;
	color: var(--eis);
	font-family: var(--schrift-plakat);
	font-size: clamp(6rem, 22vw, 14rem);
	line-height: .85;
	letter-spacing: .04em;
}

/* ---------- Nach oben ---------- */

.nach-oben {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: var(--dunkel);
	border: 0;
	border-radius: var(--radius-bedienung);
	color: var(--weiss);
	cursor: pointer;
	transition: background-color var(--takt) ease;
}

.nach-oben:hover,
.nach-oben:focus-visible {
	background: var(--dunkel-hoch);
}

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

/*
 * Der Inhaltsbereich ist ein Raster mit drei Spurbreiten.
 *
 * Das ist die Antwort auf die eine Sache, die eine Vereinsseite braucht
 * und die eine feste Bahn nicht kann: Fließtext soll lesbar schmal
 * stehen, ein Bildband darunter über die ganze Fensterbreite laufen.
 * Vorher steckte beides in derselben Bahn, und `alignfull` hörte an
 * deren Rand auf.
 *
 * Drei benannte Spuren:
 *
 *   eng   — Fließtext, höchstens --lesebreite. Die Vorgabe.
 *   breit — „Weite Breite“ im Editor, für Bilder und Tabellen.
 *   voll  — „Volle Breite“, von Fensterkante zu Fensterkante.
 *
 * `min(--lesebreite, 100% - 2*--rand)` statt eines festen Wertes: Auf
 * einem schmalen Bildschirm behält der Text so seinen Seitenrand, statt
 * am Displayrand zu kleben.
 */
/*
 * Die Endungen der Linien heißen `-start` und `-end`, englisch, und das
 * ist keine Nachlässigkeit gegenüber dem übrigen Code, sondern Vorschrift.
 *
 * `grid-column: eng` ist eine Kurzschreibweise: Der Browser setzt selbst
 * `-start` und `-end` an den Namen. Die erste Fassung hatte hier
 * `eng-ende` stehen — dann findet er `eng-start`, aber kein `eng-end`,
 * legt eine Spalte außerhalb des Rasters an und schiebt den ganzen Inhalt
 * dorthin. Auf einem breiten Bildschirm stand der Text danach rechts
 * neben der Seite und lief über den Rand hinaus.
 *
 * Es fällt schwer, das an einem einzelnen Buchstaben zu sehen. Deshalb
 * steht es hier.
 */
/*
 * Die breite Spur ist 72rem: 38 Lesebreite und zweimal 17. Das ist der
 * Wert, den theme.json als `wideSize` nennt — bis 1.52 standen hier 11rem
 * je Seite, also 60rem, und der Editor versprach etwas anderes als die
 * Seite hielt. Sichtbar war es auf der Startseite: Drei Terminkacheln
 * (je mindestens 21rem) passten nicht in 60rem und standen als 2 + 1.
 */
.inhalt {
	display: grid;
	grid-template-columns:
		[voll-start] minmax(var(--rand), 1fr)
		[breit-start] minmax(0, 17rem)
		[eng-start] min(var(--lesebreite), 100% - var(--rand) * 2) [eng-end]
		minmax(0, 17rem) [breit-end]
		minmax(var(--rand), 1fr) [voll-end];
}

.inhalt > * {
	grid-column: eng;
}

/*
 * Die Vorlage „Seite über die ganze Breite“.
 *
 * ---------------------------------------------------------------------
 * Umgedreht: erst schmal, dann breit — nicht andersherum
 * ---------------------------------------------------------------------
 *
 * Die erste Fassung gab **allem** die weite Spur und nahm sie einer
 * Liste von Elementen wieder weg: Absätze, Listen, Zitate,
 * Überschriften. Das ist eine Ausnahmeliste, und Ausnahmelisten sind nie
 * vollständig.
 *
 * Alles, was nicht daraufstand, rutschte nach außen: Knopfreihen,
 * Gruppen, Spalten, Trenner, Shortcodes, eingebettete Videos. Auf der
 * Vereinsseite sah man es an den beiden Knöpfen — sie standen zwei
 * Handbreit weiter links als der Absatz darüber, zu dem sie gehören.
 * Beim nächsten Block wäre es wieder passiert.
 *
 * Jetzt umgekehrt: **Alles steht in der Lesespur.** Breit wird, was
 * ausdrücklich breit sein soll — entweder weil die Redaktion es im
 * Editor auf „Breite Breite“ stellt, oder weil es ein Block ist, der aus
 * sich heraus nichts anderes kann.
 *
 * Das ist zugleich die Antwort auf „es muss einfach gehen“: Was im
 * Editor auf breit steht, ist breit. Was nicht, steht bei den Absätzen.
 * Es gibt keine dritte Regel, die man kennen muss.
 */
.inhalt--breit > * {
	grid-column: eng;
}

/*
 * Diese drei bekommen die weite Spur auch ohne eigene Angabe.
 *
 * Sie sind auf einer breiten Seite **immer** Anordnung und nie
 * Fließtext: Spalten wollen nebeneinander, ein Cover ist ein Bildband,
 * eine Galerie ein Raster. Wer sie schmal will, stellt sie im Editor
 * auf „Keine“ — die Angabe gewinnt, siehe unten.
 */
.inhalt--breit > .wp-block-columns,
.inhalt--breit > .wp-block-cover,
.inhalt--breit > .wp-block-gallery {
	grid-column: breit;
}

/*
 * Die Angabe aus dem Editor schlägt alles.
 *
 * Der Auswahlpfad nennt zwei Klassen und ist damit stärker als die
 * Regeln oben — auch als die für Spalten und Cover. „Keine Ausrichtung“
 * erzeugt gar keine Klasse, deshalb greift dafür die Vorgabe: die
 * Lesespur.
 */
.inhalt > .alignwide,
.inhalt--breit > .alignwide {
	grid-column: breit;
	max-width: none;
	margin-inline: 0;
}

.inhalt > .alignfull,
.inhalt--breit > .alignfull {
	grid-column: voll;
	max-width: none;
	margin-inline: 0;
	width: auto;
}

/*
 * Und „Keine Ausrichtung“ an einem Block, der von sich aus breit stünde.
 * WordPress schreibt dafür keine Klasse — greifbar ist es nur über das
 * Fehlen der beiden anderen.
 */
.inhalt--breit > .wp-block-columns:not(.alignwide):not(.alignfull),
.inhalt--breit > .wp-block-cover:not(.alignwide):not(.alignfull),
.inhalt--breit > .wp-block-gallery:not(.alignwide):not(.alignfull) {
	grid-column: breit;
}

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

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

/*
 * Außerhalb des Rasters (etwa in einer Spalte oder in einem Widget)
 * bleiben die alten Bedeutungen erhalten. Ein `alignfull` in einer
 * Spalte kann nicht bis zur Fensterkante, und es soll dort auch nicht.
 */
.alignwide {
	max-width: 72rem;
	margin-inline: auto;
}

.alignfull {
	max-width: none;
}

.alignleft {
	float: left;
	margin: .35rem 2rem 1.5rem 0;
}

.alignright {
	float: right;
	margin: .35rem 0 1.5rem 2rem;
}

.aligncenter {
	margin-inline: auto;
}

.wp-block-image figcaption {
	text-align: left;
}

/*
 * Eine im Editor gezogene Breite wird nicht überschrieben.
 *
 * WordPress schreibt sie als `style="width:…"` an das `<figure>`. Die
 * Bahn darum begrenzt die Breite auf die Lesebreite — das ist für Text
 * richtig und für ein bewusst breiter gezogenes Bild falsch.
 *
 * `width: fit-content` gilt nur für Bilder mit gesetzter Breite: Wer
 * nichts zieht, merkt von dieser Regel nichts.
 */
.wp-block-image[style*="width"] {
	max-width: none;
	width: fit-content;
}

/*
 * Das Bild darin füllt die gezogene Breite. Ohne diese Zeile bliebe es
 * bei seiner Dateibreite stehen, und der gezogene Rahmen stünde leer
 * daneben — sichtbar wird das erst, wenn jemand ein kleines Bild groß
 * zieht.
 */
.wp-block-image[style*="width"] img {
	width: 100%;
	height: auto;
}

/* ---------- Blockstile ---------- */

/* Bild im Quadrat: dieselbe Anlage wie im Aufmacher. */
.is-style-quadrat img {
	position: relative;
	background: var(--eis);
	box-shadow: 1.25rem 1.25rem 0 0 var(--eis);
}

/* Bild mit eisblauer Kante links. */
.is-style-kante img {
	border-left: 4px solid var(--eis);
}

/*
 * Bild mit einer großen Ecke.
 *
 * Die eine Rundung unten rechts ist der Zuschnitt, den die bisherige
 * Seite in jedem Textabschnitt benutzt hat. Sie steht als Blockstil zur
 * Wahl und nicht als Vorgabe: Ein Bild in einer Fotostrecke soll
 * rechteckig bleiben, sonst schneidet die Rundung mitten in Gesichter.
 */
.is-style-ecke img {
	border-radius: 0 0 clamp(2rem, 5vw, 3.5rem) 0;
}

/* ---------- Wechselnde Reihen (Medien-und-Text-Block) ---------- */

/*
 * Bild links, Text rechts, in der nächsten Reihe umgekehrt. Der Aufbau,
 * den die bisherige Seite über die ganze Länge benutzt hat.
 *
 * Der Kernblock kann das von Haus aus, er braucht nur Luft: Ohne `gap`
 * kleben Bild und Text aneinander, und ohne die Ausrichtung an der Mitte
 * steht ein kurzer Text oben in einer hohen Spalte.
 */
.wp-block-media-text {
	gap: 0 clamp(1.5rem, 4vw, 3.5rem);
	margin-block: clamp(2.5rem, 7vw, 5rem);
	align-items: center;
}

.wp-block-media-text__content {
	padding: 0;
}

.wp-block-media-text__media img {
	width: 100%;
}

/* Die große Ecke, spiegelverkehrt je nachdem, auf welcher Seite das Bild
   steht. Sonst zeigt die Rundung in zwei aufeinanderfolgenden Reihen in
   dieselbe Richtung und wirkt wie ein Versehen. */
.wp-block-media-text.is-style-ecke .wp-block-media-text__media img {
	border-radius: 0 0 clamp(2rem, 5vw, 3.5rem) 0;
}

.wp-block-media-text.is-style-ecke.has-media-on-the-right .wp-block-media-text__media img {
	border-radius: 0 0 0 clamp(2rem, 5vw, 3.5rem);
}

/*
 * Das Bild im eisblauen Quadrat, jetzt als Reihe. Die Fläche schaut
 * unten rechts hervor, so wie im Logo.
 */
.wp-block-media-text.is-style-quadrat .wp-block-media-text__media {
	position: relative;
}

.wp-block-media-text.is-style-quadrat .wp-block-media-text__media img {
	position: relative;
	box-shadow: 1.25rem 1.25rem 0 0 var(--eis);
}

.wp-block-media-text.is-style-quadrat.has-media-on-the-right .wp-block-media-text__media img {
	box-shadow: -1.25rem 1.25rem 0 0 var(--eis);
}

/*
 * Der Text auf einer Dunstfläche statt im Weiß. Für die Reihe, die etwas
 * erklärt, während die darüber und darunter nur erzählen.
 */
.wp-block-media-text.is-style-flaeche .wp-block-media-text__content {
	padding: var(--raum-block);
	background: var(--dunst);
}

/*
 * Am Handy steht das Bild immer oben.
 *
 * Das ist die eine Regel, die WordPress hier fast richtig macht und
 * gerade nicht ganz: Der Kern stapelt erst unter 600 Pixeln, und in dem
 * Streifen darüber quetschen sich Bild und Text auf einem Tablet in zwei
 * Spalten, in denen jede Zeile drei Wörter trägt. Deshalb stapeln wir
 * schon ab 48rem.
 *
 * Und weil bei „Bild rechts“ im Quelltext erst der Text steht, stünde
 * beim Stapeln der Text oben und das Bild darunter — in einer Reihe so,
 * in der nächsten anders. Die beiden `grid-row` sorgen dafür, dass das
 * Bild in jeder Reihe oben steht. Das `!important` ist nötig, weil der
 * Kern die Spaltenangabe seinerseits mit `!important` setzt.
 */
@media (max-width: 48rem) {
	.wp-block-media-text {
		grid-template-columns: minmax(0, 1fr) !important;
		margin-block: clamp(2rem, 6vw, 3rem);
	}

	.wp-block-media-text > .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 1.5rem;
	}

	.wp-block-media-text > .wp-block-media-text__content {
		grid-column: 1;
		grid-row: 2;
	}

	/* Gestapelt hat der Versatz des Quadrats keinen Platz mehr. */
	.wp-block-media-text.is-style-quadrat .wp-block-media-text__media img,
	.wp-block-media-text.is-style-quadrat.has-media-on-the-right .wp-block-media-text__media img {
		box-shadow: .75rem .75rem 0 0 var(--eis);
	}
}

/* ---------- Bildband (Cover-Block) ---------- */

/*
 * Das breite Bild mit Schleier und Text darin, wie der Abschnitt „Die
 * Initiative“ auf der bisherigen Seite. Es ist der Cover-Block von
 * WordPress, hier nur eingekleidet: eigene Blöcke dafür zu bauen hieße,
 * den Umgang damit noch einmal zu erklären.
 */
.wp-block-cover {
	padding-block: clamp(4rem, 10vw, 8rem);
	color: var(--weiss);
	text-align: center;
}

.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3 {
	color: var(--weiss);
}

/*
 * Der Schleier des Cover-Blocks lässt sich im Editor einstellen, aber
 * niemand rechnet dabei Kontraste nach. Die Vorgabe hier liegt hoch
 * genug, dass weißer Text auch über einer angestrahlten Bühne steht.
 * Wer sie im Editor ändert, überschreibt sie über einen Inline-Stil.
 */
.wp-block-cover .wp-block-cover__background {
	background-color: var(--dunkel-tief);
	opacity: .62;
}

.wp-block-cover p {
	max-width: 62ch;
	margin-inline: auto;
}

.wp-block-cover .zier {
	margin-block: 1.5rem;
}

/* ---------- Die Kante unter einem Bildband ---------- */

/*
 * Zwei Formen, wie das Bildband nach unten aufhört. Beide sind
 * Blockstile am Cover-Block, beide liegen als `::after` darüber und
 * decken den unteren Rand des Bildes ab.
 *
 * Die Farbe steht in `--kante-farbe` und ist standardmäßig Weiß, weil
 * das Band fast immer auf einem weißen Abschnitt endet. Folgt darunter
 * eine Dunstfläche, setzt man die Variable am Block:
 *
 *     <div class="wp-block-cover is-style-welle" style="--kante-farbe:#ecfbff">
 *
 * Gezeichnet wird über `mask` und nicht über ein Hintergrundbild mit
 * eingebauter Farbe. Ein Hintergrundbild trüge die Farbe im Bild und
 * ließe sich genau dann nicht mehr ändern, wenn man es braucht.
 */
.wp-block-cover.is-style-welle::after,
.wp-block-cover.is-style-schraege::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px; /* ein Pixel Überstand: sonst blitzt bei manchen
	                 Zoomstufen eine Haarlinie des Bildes durch */
	z-index: 2;
	background: var(--kante-farbe, var(--papier));
	pointer-events: none;
}

/*
 * Die Welle. Dieselbe Form wie auf der bisherigen Seite, nur ruhiger
 * geschwungen: Die alte hatte drei Wellenberge auf 1200 Pixel und wirkte
 * bei voller Breite unruhig.
 */
.wp-block-cover.is-style-welle::after {
	height: clamp(2.5rem, 5vw, 5rem);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,54 C200,96 400,8 640,38 C880,68 1040,18 1200,46 L1200,100 L0,100 Z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,54 C200,96 400,8 640,38 C880,68 1040,18 1200,46 L1200,100 L0,100 Z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/*
 * Die Schräge. Eine gerade Kante, die von links unten nach rechts oben
 * läuft. Sie braucht kein SVG, `clip-path` mit vier Punkten genügt, und
 * sie altert besser als die Welle.
 */
.wp-block-cover.is-style-schraege::after {
	height: clamp(2rem, 4vw, 4rem);
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/*
 * Der Inhalt darf nicht in die Kante hineinlaufen, sonst steht die
 * letzte Zeile halb in der Welle.
 */
.wp-block-cover.is-style-welle > .wp-block-cover__inner-container,
.wp-block-cover.is-style-schraege > .wp-block-cover__inner-container {
	padding-bottom: var(--raum-abschnitt);
}

/* Liste mit Kreuzen statt Punkten. */
.is-style-kreuze {
	padding-left: 0;
	list-style: none;
}

.is-style-kreuze li {
	position: relative;
	padding-left: 1.75rem;
}

.is-style-kreuze li::before {
	content: '';
	position: absolute;
	left: 0;
	width: .75rem;
	height: .75rem;

	/*
	 * ------------------------------------------------------------------
	 * Auf der Mitte der ersten Zeile, nicht auf einem geschätzten em-Wert
	 * ------------------------------------------------------------------
	 *
	 * Hier stand `.62em`. Das war für eine bestimmte Zeilenhöhe einmal
	 * gemessen und stimmte danach nie wieder: In den Kästen der
	 * Vereinsseite läuft der Text mit 1,7 Zeilenhöhe, die erste Zeile ist
	 * also rund 27 Pixel hoch, das Kreuz 12 — mittig säße es bei 7,5
	 * Pixeln, es saß bei 10. Zwei Pixel klingen nach nichts und sind bei
	 * vier Zeilen untereinander genau das, was man sieht: Die Kreuze
	 * hängen.
	 *
	 * `1lh` ist die tatsächliche Zeilenhöhe an dieser Stelle. Damit
	 * rechnet die Regel selbst nach, statt zu schätzen — und sie stimmt
	 * auch dann noch, wenn jemand die Zeilenhöhe ändert.
	 *
	 * Der `em`-Wert darüber bleibt als Rückfall für ältere Browser
	 * stehen; er ist die bessere Schätzung für die übliche Zeilenhöhe von
	 * 1,6 bis 1,7.
	 */
	top: .45em;
	top: calc((1lh - .75rem) / 2);
	/*
	 * Das Kreuz als Hintergrundbild und nicht als Buchstabe: Ein
	 * Pluszeichen aus der Schrift hat gerade Enden, das Zeichen des
	 * Vereins runde. Der Unterschied ist klein und genau der Punkt.
	 */
	background:
		linear-gradient(var(--eis-tief), var(--eis-tief)) center / 2px 100% no-repeat,
		linear-gradient(var(--eis-tief), var(--eis-tief)) center / 100% 2px no-repeat;
	border-radius: 1px;
}

/* Dunstfläche. */
/*
 * Ein abgesetzter Kasten. Die eisblaue Kante links ist dieselbe
 * Zeichnung wie bei jedem Hinweis auf dieser Seite — ohne sie ist es
 * eine hellblaue Fläche, von der niemand weiß, warum sie da ist.
 */
.is-style-dunst {
	padding: var(--raum-block) var(--raum-block) var(--raum-block) calc(var(--raum-block) - 3px);
	background: var(--dunst);
	border-left: 3px solid var(--eis);
}

.is-style-dunst > *:first-child {
	margin-top: 0;
}

.is-style-dunst > *:last-child {
	margin-bottom: 0;
}

/*
 * Die Überschrift darin ist keine Abschnittsüberschrift der Seite: Sie
 * gehört zum Kasten. In der Plakatschrift stünde sie so groß da wie
 * „Was wir machen“ darüber und behauptete denselben Rang.
 */
.is-style-dunst h2,
.is-style-dunst h3 {
	margin-top: 0;
	margin-bottom: .5rem;
	font-family: var(--schrift-text);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--dunkel);
}


/*
 * Der Blockstil „Band“ an einer Gruppe. Er benutzt dieselbe Fläche wie
 * `.band`; die Regeln stehen dort. Hier nur, was der Blockeditor
 * dazwischenfunkt: Eine Gruppe auf voller Breite hat vom Kern keine
 * Innenbreite, der Inhalt liefe sonst bis an die Fensterkante.
 */
.wp-block-group.is-style-band {
	margin-block: var(--raum-weit) var(--raum-abschnitt);
	padding: var(--raum-gross) var(--rand);
}

.wp-block-group.is-style-band > .wp-block-group__inner-container,
.wp-block-group.is-style-band > * {
	margin-inline: auto;
	max-width: var(--lesebreite);
}

.wp-block-group.is-style-band .wp-block-heading {
	font-family: var(--schrift-plakat);
	font-weight: 400;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
	line-height: 1;
	letter-spacing: .03em;
}

/* Kacheln. */
/*
 * ---------------------------------------------------------------------
 * Dieselbe Karte wie bei Terminen und News
 * ---------------------------------------------------------------------
 *
 * Eine Kachel ist hell, hat eine dünne Linie, trägt oben optional ein
 * Bild und unten einen Knopf. Das ist mit Absicht die Zeichnung der
 * Terminkachel und nicht eine dritte Kartensorte: Wer auf der Startseite
 * Termine gesehen hat und auf der Vereinsseite „Was wir machen“, soll
 * dieselbe Sache wiedererkennen.
 *
 * Zwei Stile, weil zwei Blöcke beteiligt sind:
 *
 *   is-style-kacheln  an core/columns — macht aus den Spalten ein Raster,
 *                     das sich nach dem Platz richtet, nicht nach der
 *                     Spaltenzahl. Vier Kacheln stehen so zu viert, zu
 *                     zweit oder untereinander, nie zu dritt plus eine.
 *   is-style-kachel   an core/group — die Kachel selbst.
 *
 * Der Knopf steht immer unten, egal wie lang der Text darüber ist. Sonst
 * hängen vier Knöpfe auf vier Höhen, und das Raster sieht aus wie eine
 * Treppe.
 */
.wp-block-columns.is-style-kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

.wp-block-columns.is-style-kacheln > .wp-block-column {
	flex-basis: auto;
	display: flex;
}

.is-style-kachel {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--papier);
	border: 1px solid var(--linie);
	color: var(--tinte);
}

/*
 * Die Kachel ist eine Flex-Spalte, damit der Knopf unten stehen kann.
 * In einer Flex-Spalte zentriert `margin: auto` ein Kind — und genau
 * das schreibt WordPress an jedes Kind einer eingeschränkten Gruppe,
 * mit !important. Ohne die Rücknahme stünde jede Überschrift mittig.
 */
.is-style-kachel > * {
	margin-block: 0;
	margin-inline: 0 !important;
	max-width: none;
	width: 100%;
}

.is-style-kachel > * + * {
	margin-top: .75rem;
}

/* Ein Bild oben läuft bis an die Kante, wie der Flyer auf der Terminkachel. */
.is-style-kachel > .wp-block-image:first-child {
	margin: calc(-1 * clamp(1.25rem, 3vw, 1.75rem));
	margin-bottom: 1rem;
}

.is-style-kachel > .wp-block-image:first-child img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.is-style-kachel h2,
.is-style-kachel h3 {
	font-family: var(--schrift-text);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--dunkel);
}

.is-style-kachel .kennzeichen {
	text-align: left;
	margin-bottom: .35rem;
}

.is-style-kachel p,
.is-style-kachel li {
	font-size: .95rem;
	line-height: 1.6;
}

.is-style-kachel .wp-block-buttons {
	margin-top: auto;
	padding-top: 1rem;
}

/*
 * Die eisblaue Kante oben erscheint nur, wenn die Kachel irgendwohin
 * führt. Eine Kachel ohne Verweis, die beim Überfahren reagiert,
 * verspricht etwas, das nicht kommt.
 */
.is-style-kachel::before {
	content: '';
	position: absolute;
	inset: -1px -1px auto;
	height: 3px;
	background: var(--eis);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 240ms ease;
}

.is-style-kachel:has(a):hover::before,
.is-style-kachel:has(a):focus-within::before {
	transform: scaleX(1);
}

/*
 * Eine dunkle Kachel im Raster. Genau eine: Sie ist der Auftakt der
 * Reihe, nicht ihr Muster. Innen gelten die Farben der Navyfläche.
 */
.is-style-kachel.ist-dunkel {
	background: var(--dunkel);
	border-color: var(--dunkel);
	color: rgba(255, 255, 255, .88);
}

.is-style-kachel.ist-dunkel h2,
.is-style-kachel.ist-dunkel h3 {
	color: var(--weiss);
}

.is-style-kachel.ist-dunkel .kennzeichen {
	color: var(--eis);
}

/*
 * Navyfläche. Innen kehrt sich alles um. Das steht hier an einer Stelle,
 * damit niemand in jeder einzelnen Gruppe nachfärben muss und die Seite
 * nach dem dritten Mal aus zwei verschiedenen Blautönen besteht.
 */
.is-style-navy {
	padding: var(--raum-gross);
	background: var(--dunkel);
	color: rgba(255, 255, 255, .88);
}

/*
 * Der Kleingedruckte-Absatz darin: leiser, aber lesbar. Die graue
 * Textfarbe von außen wäre auf Navy 2:1.
 */
.is-style-navy .kleingedruckt {
	color: rgba(255, 255, 255, .62);
	max-width: 46ch;
}

.is-style-navy h1,
.is-style-navy h2 {
	color: var(--weiss);
}

.is-style-navy h3,
.is-style-navy h4,
.is-style-navy h5 {
	color: var(--eis);
}

.is-style-navy .kennzeichen {
	color: var(--eis);
}

.is-style-navy a:not(.wp-block-button__link) {
	color: var(--weiss);
	text-decoration-color: var(--eis);
}

.is-style-navy :focus-visible {
	outline-color: var(--eis);
}

/* Großes Zitat. */
.is-style-gross {
	padding-left: 0;
	border-left: 0;
	text-align: left;
}

/*
 * Der Absatz **im** Zitat trägt keinen eigenen Abstand nach unten.
 *
 * Er ist kein Kind von `.inhalt` — die Regeln des Seitentakts greifen
 * dort nicht, und der Grundabstand für Absätze bleibt stehen. Zwischen
 * Zitat und Quellenangabe standen dadurch anderthalb Rem, die niemand
 * gesetzt hatte, plus der halbe Rem der Angabe selbst.
 *
 * Dasselbe gilt für jedes gewöhnliche Zitat: Wer den Abstand innen nicht
 * abräumt, sieht ihn nur nicht, weil dort keine großen Schriften stehen.
 */
.wp-block-quote > *,
blockquote > * {
	margin-block: 0;
}

.wp-block-quote > * + p,
blockquote > * + p {
	margin-top: .6rem;
}

/*
 * Keine Versalien mehr.
 *
 * Wire One ist eine Haarlinienschrift. In Großbuchstaben verliert sie
 * die Ober- und Unterlängen, an denen man Wörter erkennt — übrig bleibt
 * eine Reihe gleich hoher Striche, die man Buchstabe für Buchstabe
 * entziffert. Bei einer Überschrift aus zwei Wörtern geht das; bei einem
 * Satz über drei Zeilen nicht mehr.
 *
 * In Gemischtschreibung bleibt die Plakatschrift erkennbar und der Satz
 * lesbar. Dazu etwas mehr Breite (28 statt 22 Zeichen), damit ein Zitat
 * nicht in vier Zeilen zerfällt.
 */
.is-style-gross p {
	max-width: 28ch;
	font-family: var(--schrift-plakat);
	font-size: clamp(1.75rem, 1rem + 2.6vw, 2.75rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: .02em;
	color: var(--dunkel);
}

/*
 * Die Namenszeile unter einem Zitat mit gewöhnlichem Bindestrich. Der
 * Gedankenstrich sieht in der Haarlinienschrift aus wie ein verrutschter
 * Unterstrich.
 */
/*
 * Die Namenszeile steht dicht am Zitat. Mit einem Abstand von einem Rem
 * hing sie darunter wie ein eigener Absatz — und ein Name ohne
 * erkennbaren Bezug ist keine Quellenangabe.
 */
.is-style-gross cite {
	display: block;
	margin-top: .5rem;
	color: var(--leise);
	font-size: .875rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .06em;
}

/*
 * Ein Halbgeviertstrich, kein Bindestrich. Ein Bindestrich verbindet
 * zwei Wortteile; vor einer Quellenangabe steht ein Gedankenstrich — das
 * ist keine Kleinigkeit, sondern der Unterschied zwischen gesetzt und
 * getippt.
 */
.is-style-gross cite::before,
blockquote cite::before {
	content: '– ';
}

/* Knöpfe im Editor. */
.pjt-knoepfe .wp-block-button__link {
	text-decoration: none;
}

/* ---------- Widgets ---------- */

.widget {
	margin-bottom: 2rem;
}

.widget:last-child {
	margin-bottom: 0;
}

/* =========================================================
   7. Die eingebauten Module einkleiden
   ========================================================= */

/*
 * Hier wird der Code angefasst, den das Theme aus den Plugins übernommen
 * hat: Termine, Fotos, Vereinsangaben. Er bringt ein eigenes, in sich
 * schlüssiges Aussehen mit — nur eben nicht dieses.
 *
 * ---------------------------------------------------------------------
 * Der Umfang, und warum er genau so gezogen ist
 * ---------------------------------------------------------------------
 *
 * Angefasst werden **Schrift, Form und Farbe**. Nicht angefasst wird die
 * **Anordnung**: keine Rasterspalten, keine Abstände zwischen Kacheln,
 * keine Positionen. Die kennt das Modul besser, es weiß, was passiert,
 * wenn eine Kachel kein Bild hat oder ein Termin drei Zeilen Titel.
 *
 * Der Unterschied in einem Satz: Eine geänderte Farbe sieht falsch aus,
 * wenn sie falsch ist. Eine geänderte Anordnung sieht drei Wochen lang
 * richtig aus und bricht dann bei dem einen Termin, den niemand getestet
 * hat.
 *
 * Farben und die Textgröße kommen weiterhin über inc/plugin-bruecke.php
 * als Variablen. Was hier steht, sind die Dinge, für die es keine
 * Variable gibt.
 */

/* ---------- Schrift ---------- */

.pj-block,
.pjv-block,
.pjf-formular,
.pjl-katalog {
	font-family: var(--schrift-text);
}

/*
 * Die Blocküberschrift in der Plakatschrift, und in der Größe, die eine
 * `h2` auf der übrigen Seite hat.
 *
 * Die Größe muss hier stehen und darf nicht aus der Brücke kommen: Im
 * Modul hängt sie an `--pj-skala`, und dieselbe Skala verkleinert auch
 * den Fließtext. Wire One wäre bei 1,54rem eine graue Linie. Deshalb
 * bekommt die Überschrift ihre Größe fest und der Text seine über die
 * Skala.
 */
.pj-block .pj-kopf h2,
.pjv-block .pjv-kopf h2 {
	font-family: var(--schrift-plakat);
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .03em;
	color: var(--dunkel);
}

/* Kachel- und Zeilentitel wie eine `h3` der Seite. */
.pj-block--kacheln .pj-kachel-titel,
.pj-block--liste .pj-zeile-kern strong {
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--dunkel);
}

/* ---------- Form ---------- */

/*
 * Nachgesehen statt angenommen: Das Veranstaltungsmodul rundet nichts.
 * Seine Kacheln, Zeilen und Bilder sind bereits eckig, es passt also
 * ohne Zutun zur Formregel der Seite. Hier stand einmal eine Liste von
 * Rundungen, die es abschalten sollte — sie traf ausschließlich Klassen,
 * die es gar nicht gibt.
 *
 * Übrig bleibt eine einzige Stelle im Vereinsmodul: das Bild einer
 * Person, mit 6px gerundet. Der Kommentar dort sagt, warum es nicht ganz
 * rund ist; eckig passt zum übrigen Auftritt, und ein Porträt verliert
 * daran nichts.
 */
.pjv-block--vorstand .pjv-person-flaeche {
	border-radius: 0;
}

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

/*
 * Der betonte Knopf im Modul und `.knopf` auf der Seite sollen derselbe
 * Knopf sein. Übernommen werden Rundung, Laufweite und das Verhalten
 * beim Drücken; die Farben stimmen über die Brücke schon.
 */
.pj-block .pj-tat--betont {
	border-radius: var(--radius-bedienung);
	font-weight: 700;
	transition: background-color var(--takt) ease, transform var(--takt) ease;
}

.pj-block .pj-tat--betont::after {
	letter-spacing: .1em;
}

/*
 * Beim Überfahren wird der Knopf dunkler, nicht hell. Das Modul färbt
 * ihn nach Eisblau um; auf der übrigen Seite geht jeder Knopf auf
 * hellem Grund nach Navy-hoch, und zwei Knöpfe untereinander mit
 * verschiedenem Verhalten sind ein Fehler, den man nicht benennen kann,
 * aber sieht.
 */
.pj-block .pj-tat--betont:hover,
.pj-block .pj-tat--betont:focus-visible {
	background: var(--dunkel-hoch);
	color: var(--weiss);
}

.pj-block .pj-tat--betont:active {
	transform: translateY(1px);
}

/* ---------- Fokus ---------- */

/*
 * Das Modul bringt keinen eigenen Fokusrahmen mit und erbt damit den des
 * Browsers. Der ist auf einer navyblauen Fläche mitunter nicht zu sehen.
 */
.pj-block :focus-visible,
.pjv-block :focus-visible {
	outline: 2px solid var(--eis-tief);
	outline-offset: 3px;
}

/* Auf dem navyblauen Datumsschild ist der dunkle Rahmen unsichtbar. */
.pj-block--kacheln .pj-kachel-datum :focus-visible {
	outline-color: var(--eis);
}

/* ---------- Abstände zum übrigen Inhalt ---------- */

/*
 * Steht ein Modulblock direkt unter der Seitenüberschrift, bringt er
 * seinen eigenen oberen Abstand mit. Zusammen mit dem der Überschrift
 * wird daraus eine leere Fläche.
 */
.inhalt > .pj-block:first-child,
.inhalt > .pjv-block:first-child {
	margin-top: 0;
}

/*
 * Ein Modulblock im Raster bekommt die weite Spur. Er zeigt Kacheln in
 * drei Spalten; in der Lesespur von 52rem stünden die untereinander,
 * und die Terminübersicht sähe aus wie eine Liste mit Bildern.
 */
.inhalt > .pj-block,
.inhalt > .pjv-block,
.inhalt > .pjl-katalog {
	grid-column: breit;
}

/*
 * Der eigene Terminblock braucht das nicht: Er trägt seine Breite als
 * `alignwide` oder `alignfull` selbst, weil er ein richtiger Block ist
 * und die Redaktion sie im Editor einstellt. Ohne Angabe steht er in der
 * weiten Spur, weil drei Kacheln in der Lesespur untereinander stünden.
 */
.inhalt > .termineblock {
	grid-column: breit;
}

.termineblock {
	margin-block: var(--raum-gross);
}

/* Der Kopf des Blocks braucht Luft zu den Kacheln, aber nicht doppelt. */
.termineblock > .abschnittskopf {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---------- Der Kachelraster des Moduls ---------- */

/*
 * Das ist die eine Stelle, an der das Theme in die **Anordnung** eines
 * Moduls eingreift, und sie braucht eine Begründung.
 *
 * Das Modul setzt ab 1000px drei feste Spalten. Zusätzlich begrenzt es
 * bei einem einzigen Termin die Breite des Rasters auf 420px, damit
 * rechts keine Lücke bleibt. Beides zusammen ergibt: ein Termin in der
 * ersten von drei 130-Pixel-Spalten. Der Titel bricht dann Buchstabe für
 * Buchstabe um.
 *
 * Das ist kein Geschmacksurteil, sondern ein Fehler, und er tritt genau
 * dann auf, wenn nur ein Termin ansteht — also im ruhigen Teil des
 * Jahres, wenn niemand nachsieht.
 *
 * `auto-fit` mit `minmax` löst beides: Bei einem Termin gibt es eine
 * Spalte, bei zweien zwei, und die Sonderregeln für die Breite werden
 * überflüssig.
 *
 * Nötig ist das nur noch für Seiten, auf denen `[pj_termine]` steht. Die
 * eigene Darstellung des Themes (der Block „Termine“) hat das Problem
 * nicht.
 */
.pj-block--kacheln .pj-kacheln {
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.pj-block--kacheln .pj-kacheln:not(:has(> :nth-child(2))) {
	max-width: 26rem;
}

.pj-block--kacheln .pj-kacheln:not(:has(> :nth-child(3))) {
	max-width: 54rem;
}

/* Der Zierstreifen der Module ist derselbe wie der der Seite. Hier steht
   er nur, damit die Farbe aus derselben Variablen kommt. */
.pj-block .pj-zier,
.pjv-block .pjv-zier {
	background: repeating-linear-gradient(115deg,
		var(--eis) 0 2px, transparent 2px 7px);
}

/* ---------- Der Takt einer Seite ---------- */

/*
 * ---------------------------------------------------------------------
 * In einem Grid verschmelzen Abstände nicht
 * ---------------------------------------------------------------------
 *
 * `.inhalt` ist ein Raster — es muss eines sein, damit Blöcke die weite
 * und die volle Spur nehmen können. Damit fällt eine Eigenschaft weg,
 * auf die man sich sonst blind verlässt: **In normalem Fluss
 * verschmelzen der untere Abstand eines Absatzes und der obere der
 * Überschrift darunter zu einem.** In einem Raster tun sie das nicht,
 * sie addieren sich.
 *
 * Die erste Fassung dieser Regeln gab dem Zitat unten `--raum-gross` und
 * der Überschrift darunter oben `--raum-abschnitt`. Gemeint waren sechs
 * Rem; heraus kamen zehn. Auf der Vereinsseite stand deshalb zwischen
 * zwei Abschnitten eine halbe Bildschirmhöhe Leere.
 *
 * Deshalb hier **nur Abstände nach oben**. Jeder Block sagt, wie viel
 * Luft er über sich braucht; nach unten sagt keiner etwas. Damit kann
 * sich nichts mehr aufaddieren, und man liest die Regeln von oben nach
 * unten wie eine Liste.
 */

.inhalt > *,
.inhalt--breit > * {
	margin-block: 0;
}

/*
 * Die Meta-Zeile eines Beitrags steht allein in einem `.inhalt`, der Text
 * folgt im nächsten. Zwischen zwei Rastern greift der Grundabstand nicht,
 * und die Zeile klebte am ersten Absatz.
 */
.inhalt > .meta:only-child {
	margin-bottom: var(--raum-block);
}

/* Der Grundabstand zwischen zwei Blöcken. */
.inhalt > * + *,
.inhalt--breit > * + * {
	margin-top: 1.5rem;
}

/*
 * Elemente der weiten Spur brauchen mehr Vorlauf.
 *
 * Ein Absatz und der nächste Absatz sind eine Sache; ein Absatz und eine
 * Bild-Text-Reihe, die doppelt so breit ist, sind zwei. Mit dem
 * Grundabstand von 1,5rem klebte auf der Vereinsseite die Reihe „Die
 * Idee hinter dem Verein“ am Vorspann darüber, während alles Weitere
 * (jeweils nach einer Überschrift) das Vierfache hatte. Genau dieser
 * Wechsel war der unruhige Eindruck.
 *
 * Nach einer Überschrift gilt das nicht: Dort gehört das breite Element
 * eng an seine Überschrift, wie jeder andere Block auch.
 */
.inhalt > * + .alignwide,
.inhalt > * + .alignfull,
.inhalt--breit > * + .alignwide,
.inhalt--breit > * + .alignfull,
.inhalt > * + .wp-block-media-text,
.inhalt--breit > * + .wp-block-media-text {
	margin-top: var(--raum-abschnitt);
}

.inhalt > h2 + .alignwide,
.inhalt > h2 + .alignfull,
.inhalt > h2 + .wp-block-media-text,
.inhalt > h3 + .alignwide,
.inhalt--breit > h2 + .alignwide,
.inhalt--breit > h2 + .alignfull,
.inhalt--breit > h2 + .wp-block-media-text,
.inhalt--breit > h3 + .alignwide {
	margin-top: var(--raum-eng);
}

/*
 * Viel Luft vor einer Abschnittsüberschrift, wenig danach. Eine
 * Überschrift gehört näher an ihren Text als an den Abschnitt darüber —
 * der älteste Satzgrundsatz, und der, den Blockeditoren als Erstes
 * verlieren, weil jeder Block denselben Abstand bekommt.
 */
.inhalt > * + h2,
.inhalt--breit > * + h2 {
	margin-top: var(--raum-abschnitt);
}

.inhalt > * + h3,
.inhalt--breit > * + h3 {
	margin-top: var(--raum-block);
}

.inhalt > h2 + *,
.inhalt--breit > h2 + *,
.inhalt > h3 + *,
.inhalt--breit > h3 + * {
	margin-top: .6rem;
}

/*
 * Und derselbe Takt **innerhalb** einer Gruppe.
 *
 * Der Inhalt eines Kastens ist kein Kind von `.inhalt` — dort griffen
 * die Regeln oben nicht, und der Grundabstand für Absätze blieb stehen.
 * Sichtbar wird das erst, wenn ein Kasten mehr als zwei Absätze hat.
 */
.wp-block-group > *,
.wp-block-media-text__content > * {
	margin-block: 0;
}

.wp-block-group > * + *,
.wp-block-media-text__content > * + * {
	margin-top: 1rem;
}

.wp-block-group > * + .wp-block-buttons,
.wp-block-media-text__content > * + .wp-block-buttons {
	margin-top: 1.25rem;
}

/*
 * Ein Kasten, ein Zitat oder eine Zahlenreihe steht für sich und
 * braucht mehr Luft als ein Absatz.
 */
.inhalt > * + .wp-block-group,
.inhalt--breit > * + .wp-block-group,
.inhalt > * + .wp-block-columns,
.inhalt--breit > * + .wp-block-columns,
.inhalt > * + .wp-block-quote,
.inhalt--breit > * + .wp-block-quote,
.inhalt > * + .wp-block-separator,
.inhalt--breit > * + .wp-block-separator {
	margin-top: var(--raum-gross);
}

/*
 * Eine Knopfreihe ist die **Folge** des Absatzes darüber: „Die
 * Mitgliedschaft kostet … — Antrag ausfüllen.“ Sie gehört dorthin und
 * nicht in die Mitte zwischen zwei Abschnitte.
 */
.inhalt > * + .wp-block-buttons,
.inhalt--breit > * + .wp-block-buttons {
	margin-top: 1.25rem;
}

/* ---------- Zahlenreihe ---------- */

/*
 * Vier Zellen mit einer Zahl und einem Wort darunter. Auf einer
 * Vereinsseite sind sie das, was ein Bild sonst leistet: Sie sagen in
 * einer Zeile, wie groß die Sache ist.
 *
 * Kein Kasten, kein Rahmen — nur eine eisblaue Linie oben. Vier
 * umrandete Kästen nebeneinander sähen aus wie eine Preisliste.
 */
.zahlkasten {
	padding-top: .9rem;
	border-top: 2px solid var(--eis);
	text-align: left;
}

/*
 * Auf schmalen Schirmen bricht die Spaltenreihe von WordPress in eine
 * Spalte um — vier Zahlen untereinander sind dann eine lange Liste.
 * Zwei nebeneinander behalten den Charakter einer Reihe.
 */
@media (max-width: 60rem) {
	.wp-block-columns:has(> .wp-block-column > .zahlkasten) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:has(> .wp-block-column > .zahlkasten) > .wp-block-column {
		flex-basis: calc(50% - .75rem) !important;
	}
}

.zahlkasten__zahl {
	margin: 0 0 .1rem;
	color: var(--dunkel);
	font-family: var(--schrift-plakat);
	font-size: clamp(2.5rem, 1.5rem + 3.5vw, 4rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .02em;
	/*
	 * Ziffern in gleicher Breite: Ohne das stünden „184“ und „2012“
	 * verschieden breit, und die Wörter darunter fluchteten nicht.
	 */
	font-variant-numeric: tabular-nums;
}

.zahlkasten__text {
	margin: 0;
	color: var(--leise);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.4;

	/*
	 * Nicht trennen und nicht sperren, bis es bricht: „Veranstaltungen“
	 * ist das längste Wort der Reihe und stand in vier Spalten als
	 * „VERANSTALTUNGE / N“ da. Weniger Sperrung und eine Stufe kleiner
	 * halten es in einer Zeile; wo es doch nicht reicht, bricht das
	 * Raster vorher auf zwei Spalten um.
	 */
	text-wrap: balance;
}

/*
 * Die Blöcke des Vereinsmoduls stehen in der weiten Spur.
 *
 * Vier Vorstandskarten in der Lesespur (38rem) sind neun Zentimeter je
 * Karte — Bild, Name und Amt darin sind dann kleiner als der Fließtext
 * daneben. Sie sind eine Anordnung und kein Absatz, und Anordnungen
 * gehören in die weite Spur, wie Kacheln und Spalten auch.
 */
.inhalt > .pjv-block,
.inhalt--breit > .pjv-block {
	grid-column: breit;
}

/* ---------- Vorstand, Beisitzer, Sponsoren ---------- */

/*
 * Dasselbe wie beim Formularmodul: Das Vereinsmodul bringt eine eigene
 * Größenordnung mit — Name 1,35rem, Funktion 1,1rem, Fließtext 1,3rem,
 * und bei einer einzelnen Person noch eine Stufe darüber.
 *
 * Für ein Plugin war das richtig gedacht; neben dem Text dieser Seite
 * (1rem) steht ein Vorstandsname größer da als eine Zwischenüberschrift.
 *
 * Die Skala `--pjv-skala` wäre der naheliegende Griff, und sie ist
 * falsch: Sie zieht **alles** gleichmäßig zusammen, auch die
 * Blocküberschrift in Wire One — die dann als graue Linie dasteht. Was
 * verschieden groß sein soll, muss verschieden gesetzt werden.
 */

/*
 * Der Block steht als Abschnitt in einer Seite und nicht mehr allein
 * auf einer eigenen. Er braucht deshalb keinen eigenen Vorlauf — den
 * gibt die Überschrift darüber — aber Luft nach unten, bevor die
 * nächste Überschrift kommt.
 */
body .inhalt .pjv-block,
body .inhalt--breit .pjv-block {
	/*
	 * Oben ein Blockabstand, nicht null.
	 *
	 * Bis 1.58 stand hier `0`, mit der Begründung, die Überschrift
	 * darüber gebe den Abstand. Das stimmt nur, wenn direkt eine
	 * Überschrift darüber steht — seit Vorstand und Beisitzer auf der
	 * Vereinsseite stehen, steht dazwischen ein Absatz, und die Karten
	 * klebten daran.
	 */
	/*
	 * Nach unten nichts. Der Takt von `.inhalt` besteht ausschließlich
	 * aus Abständen nach oben, damit sich im Raster nichts addiert (der
	 * lange Block weiter oben erklärt, warum). Ein `--raum-gross` hier
	 * unten kam zu dem Abstand der nächsten Überschrift hinzu, und
	 * zwischen Vorstand und „Beisitzer“ standen fast hundert Pixel.
	 */
	margin-block: var(--raum-block) 0;
}

/* Direkt unter der eigenen Überschrift genügt der kleine Abstand. */
body .inhalt .wp-block-heading + .pjv-block,
body .inhalt--breit .wp-block-heading + .pjv-block {
	margin-top: var(--raum-eng);
}

/*
 * Eine einzelne Person stand mittig in der Fläche und wirkte verloren.
 * Bei einer Person genügt die halbe Breite; bei zweien und mehr greift
 * das Raster des Moduls.
 */
/*
 * ---------------------------------------------------------------------
 * Wenige Personen: kleiner, nicht größer
 * ---------------------------------------------------------------------
 *
 * Das Modul macht das Porträt größer, je weniger Personen es sind, bis
 * zu 290px bei einer einzigen. Der Gedanke ist richtig für ein Plugin
 * auf einer leeren Seite: Eine kleine Karte allein auf breiter Fläche
 * wirkt verloren.
 *
 * Auf dieser Seite ist er falsch. Der Vorstand steht hier am Ende einer
 * Seite, unter Kacheln, Kästen und einem Band; die Karte steht nicht
 * allein, sie steht in einer Reihe von Abschnitten. Ein Porträt, das
 * größer ist als jedes andere Bild der Seite, zieht die
 * Aufmerksamkeit an die falscheste Stelle.
 *
 * Deshalb hier eine Obergrenze, unabhängig von der Anzahl.
 */
body .pjv-block--vorstand .pjv-personen,
body .pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(3))),
body .pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(2))) {
	/*
	 * 1.60 deckelte auf 12rem, weil eine einzelne Person mit 290px
	 * Porträt am Seitenende alles andere erschlug. Das war eine Stufe
	 * zu weit: Bei vier Personen in der weiten Spur (72rem) blieben je
	 * Karte 18rem, und ein Bild von 12rem stand darin wie ein
	 * Vorschaubild. Die Vorstandschaft ist der Abschluss der
	 * Vereinsseite und darf so groß sein wie die Kacheln darüber.
	 *
	 * 15rem: vier Karten plus Lücken passen in die weite Spur, das Bild
	 * bleibt kleiner als jedes Foto im Text.
	 */
	--pjv-bild-groesse: clamp(10rem, 17vw, 15rem);
}

/*
 * Auch beim Vorstand zentriert jede Zeile für sich.
 *
 * Das Modul setzt vier feste Rasterspalten. Bei fünf Personen steht die
 * fünfte allein links unter der ersten Spalte; dieselbe Sache wie bei
 * den Beisitzern, nur mit Porträts. Der Flex-Fluss zentriert jede Zeile,
 * die Karten behalten über `flex-basis` ihre gemeinsame Breite.
 */
body .pjv-block--vorstand .pjv-personen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.75rem, 4vw, 2.4rem) clamp(1rem, 3vw, 1.6rem);
	max-width: none;
}

body .pjv-block--vorstand .pjv-person {
	flex: 0 1 15rem;
}

/*
 * Nicht jede Person hat eine Adresse hinterlegt. Ohne Mindesthöhe endet
 * eine Karte ohne Symbol höher als die daneben, und die Reihe franst
 * unten aus — auf der Seite gut zu sehen, wenn beim Vorsitzenden das
 * Briefsymbol fehlt und bei den drei anderen nicht.
 */
body .pjv-block--vorstand .pjv-person {
	display: flex;
	flex-direction: column;
}

body .pjv-block--vorstand .pjv-wege {
	min-height: 2.25rem;
	margin-top: auto;
	padding-top: .5rem;
}

/*
 * Eine einzelne Person steht links, nicht in der Mitte.
 *
 * Mittig unter einer mittigen Überschrift sieht ein einzelnes Porträt
 * aus wie ein Denkmal. Links beginnt es dort, wo auch der Text beginnt,
 * und die Lücke rechts ist erkennbar Platz für die nächste Person.
 */
body .pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(2))) {
	max-width: none;
	justify-content: flex-start;
}

body .pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(2))) .pjv-person {
	flex: 0 1 auto;
}

/*
 * Eine einzelne Person liegt quer: Bild links, Name und Amt daneben.
 *
 * Untereinander bleibt bei einer Person unter einer breiten Überschrift
 * eine hohe schmale Säule mit viel Weiß rechts daneben. Quer gelesen
 * füllt dieselbe Angabe eine Zeile, und es sieht nach Absicht aus statt
 * nach einer Liste, der die übrigen Einträge fehlen.
 *
 * Sobald eine zweite Person dazukommt, greift wieder das Raster des
 * Moduls; die Regel hängt an `:not(:has(> :nth-child(2)))`.
 */
body .pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(2))) .pjv-person {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0 clamp(1rem, 3vw, 2rem);
	max-width: none;
	text-align: left;
}

body .pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(2))) .pjv-person-flaeche {
	grid-row: span 2;
	margin: 0;
}

body .pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(2))) .pjv-person-name {
	align-self: end;
	margin: 0;
}

body .pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(2))) .pjv-person-rolle {
	align-self: start;
	margin: .25rem 0 0;
}

/*
 * Ohne Foto keine große leere Fläche.
 *
 * Der Platzhalter ist ein Kasten mit zwei Buchstaben darin. In voller
 * Porträtgröße ist das ein handtellergroßes Nichts, und bei einem
 * Vorstand, bei dem noch niemand ein Bild hochgeladen hat, sieht die
 * Seite kaputt aus. Zwei Drittel der Größe genügen: Man sieht, dass hier
 * ein Bild hingehört, ohne dass das Fehlen zum Hauptmotiv wird.
 */
body .pjv-block--vorstand .pjv-person-flaeche:has(.pjv-person-platzhalter) {
	/*
	 * 1.60 nahm zwei Drittel, damit ein leeres Kästchen nicht das
	 * auffälligste Element der Seite wird. Zusammen mit der damals
	 * gedeckelten Grundgröße kam am Ende ein Porträtfeld von 158 Pixeln
	 * heraus — und weil bisher **kein einziges** Foto hinterlegt ist,
	 * sah man genau das: vier kleine Kästchen unter einer breiten
	 * Überschrift.
	 *
	 * Vier Fünftel treffen es besser. Der Platzhalter ist erkennbar
	 * kleiner als ein echtes Foto (sonst behauptete das leere Feld
	 * dieselbe Wichtigkeit), aber die Reihe trägt die Seite.
	 */
	width: calc(var(--pjv-bild-groesse, 15rem) * .8);
	height: calc(var(--pjv-bild-groesse, 15rem) * .8);
	min-width: 0;
	min-height: 0;
}

body .pjv-block--vorstand .pjv-person-name,
body .pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(2))) .pjv-person-name {
	font-family: var(--schrift-text);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--dunkel);
}

/*
 * Die Funktion als Kleinzeile, nicht als zweite Namenszeile.
 *
 * „1. Vorsitzender“ in 1,1rem unter einem Namen in 1,35rem liest sich
 * wie ein zweiter Name. Als gesperrte Versalzeile in Eisblau ist sofort
 * klar, was Name ist und was Amt — dieselbe Zeichnung wie auf den
 * Kontaktkarten.
 */
body .pjv-block--vorstand .pjv-person-rolle,
body .pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(2))) .pjv-person-rolle {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--eis-tief);
}

/* Der Buchstabe, wenn jemand kein Bild hinterlegt hat. */
body .pjv-block--vorstand .pjv-person-platzhalter,
body .pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(2))) .pjv-person-platzhalter {
	font-size: 1.75rem;
}

/*
 * Die Beisitzer als Reihe kleiner Karten.
 *
 * Bis 1.56 waren sie eine Textzeile in einem Kasten, mit Kreuzen
 * zwischen den Namen. Auf einer Seite, deren Vorstandschaft aus Karten
 * mit Bild und Amt besteht, sah das aus, als wären die Beisitzer eine
 * Fußnote zu den richtigen Leuten. Sie sind aber dasselbe: Menschen mit
 * Stimmrecht, nur ohne eigenes Amt.
 *
 * Deshalb dieselbe Zeichnung wie die Vorstandskarten, eine Stufe
 * kleiner: helle Fläche, dünne Linie, Name in der Textschrift, darüber
 * die Kleinzeile „Beisitzer“. Ohne Bild — das Modul liefert für
 * Beisitzer nur Namen, und ein Platzhalterkreis mit Initialen wäre eine
 * Behauptung von Information, die es nicht gibt.
 *
 * Das Modul bleibt unangetastet: Namen kommen von dort, das Aussehen aus
 * dem Theme. Deshalb hängt alles an `.pjv-block--beisitzer`.
 */
body .pjv-block--beisitzer .pjv-namen {
	/*
	 * ------------------------------------------------------------------
	 * Waagerechter Fluss, keine Rasterspalten
	 * ------------------------------------------------------------------
	 *
	 * Mit `repeat(auto-fit, …)` stehen die Karten in festen Spalten, und
	 * eine angebrochene letzte Zeile beginnt links: Bei sieben Beisitzern
	 * saßen sechs oben und einer allein darunter am linken Rand, wie ein
	 * vergessener Eintrag.
	 *
	 * Ein umbrechender Flex-Fluss mit `justify-content: center` zentriert
	 * **jede** Zeile für sich, auch die letzte. Die Karten sind dann
	 * unterschiedlich breit, je nach Länge des Namens; das ist bei Namen
	 * kein Nachteil, sondern sieht aus wie eine Aufzählung und nicht wie
	 * eine Tabelle.
	 */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	text-align: left;

	/*
	 * Der Trenner des Moduls (Vorgabe „, “) ist ein echter Textknoten
	 * zwischen den Namen. In einem Raster wird daraus eine eigene Zelle
	 * mit einem Komma darin. Das Muster ruft den Shortcode deshalb mit
	 * `trenner=""` auf; `font-size: 0` fängt die Fälle ab, in denen
	 * jemand ihn von Hand ohne das Attribut einsetzt.
	 */
	font-size: 0;
}

body .pjv-block--beisitzer .pjv-name {
	position: relative;
	display: block;
	flex: 0 1 auto;
	min-width: 9rem;
	padding: .9rem 1rem .9rem 1.1rem;
	background: var(--papier);
	border: 1px solid var(--linie);
	border-left: 3px solid var(--eis);
	color: var(--dunkel);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.35;
}

/*
 * Die Kleinzeile „Beisitzer“ über jedem Namen — dieselbe gesperrte
 * Versalzeile wie das Amt auf einer Vorstandskarte. Sie steht im
 * Stylesheet und nicht im HTML, weil das Modul sie nicht liefert;
 * `aria-hidden` gibt es für erzeugten Inhalt nicht, aber Vorleser lesen
 * `content` ohnehin je nach Einstellung mit — und mitgelesen ist sie
 * hier richtig.
 */
body .pjv-block--beisitzer .pjv-name::before {
	content: 'Beisitzer';
	display: block;
	margin-bottom: .3rem;
	color: var(--eis-tief);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/*
 * Der Trenner aus der Textfassung muss weg: Zwischen zwei Karten steht
 * keine Kommaersatz-Raute, sondern eine Lücke.
 */
body .pjv-block--beisitzer .pjv-name + .pjv-name::after {
	content: none;
}

body .pjv-block--sponsoren .pjv-sponsor-name {
	font-size: .875rem;
}

body .pjv-block--sponsoren .pjv-sponsor-ersatz {
	font-size: 1.5rem;
}

/*
 * Die Buchstaben, wenn jemand kein Bild hinterlegt hat, standen in
 * Eisblau auf Dunstblau — 1,7:1, also eher eine Ahnung als eine
 * Auskunft. In Navy sind es 15:1, und es sieht aus wie Absicht statt
 * wie ein Ladefehler.
 */
body .pjv-block--vorstand .pjv-person-platzhalter,
body .pjv-block--sponsoren .pjv-sponsor-ersatz {
	color: var(--dunkel);
	opacity: .35;
}

/* Der Fließtext unter einer Blocküberschrift. */
body .pjv-block .pjv-kopf p,
body .pjv-block .pjv-leer {
	font-size: 1rem;
	line-height: 1.65;
}

/*
 * Und dieselben Werte noch einmal für die schmale Stufe des Moduls.
 *
 * Es verkleinert unterhalb von 780px und nimmt die Verkleinerung
 * unterhalb von 400px wieder zurück — beides mit eigenen Regeln, die
 * ohne diesen Block gewinnen würden. Dann stimmte es auf dem Rechner und
 * nicht auf dem Telefon.
 */
@media (max-width: 780px) {
	body .pjv-block--vorstand .pjv-person-name {
		font-size: 1.0625rem;
	}

	body .pjv-block--vorstand .pjv-person-rolle {
		font-size: .6875rem;
	}

	body .pjv-block--beisitzer .pjv-name {
		font-size: 1rem;
	}

	body .pjv-block--sponsoren .pjv-sponsor-name {
		font-size: .875rem;
	}
}

@media (max-width: 400px) {
	body .pjv-block--vorstand .pjv-person-name {
		font-size: 1.125rem;
	}

	body .pjv-block--vorstand .pjv-person-rolle {
		font-size: .6875rem;
	}
}

/* ---------- Formulare ---------- */

/*
 * Das Formularmodul kommt mit einer eigenen Größenordnung: Grundschrift
 * 1,2rem, Beschriftungen 1,14rem, der Absendeknopf 1,18rem mit 32 Pixeln
 * Eckenrundung.
 *
 * Das war für ein Plugin richtig gedacht — es wusste nicht, in welchem
 * Theme es landet, und ein Formular, das zu klein gerät, ist schlimmer
 * als eines, das zu groß gerät. Neben dem Text dieser Seite (1rem) sieht
 * es aus wie aus einem anderen Baukasten: Die Beschriftung „Name“ steht
 * größer da als die Überschrift eines Absatzes daneben.
 *
 * Hier wird deshalb die ganze Größenordnung heruntergezogen. Nicht in
 * einer Zeile über `font-size` am Wurzelelement — die Angaben im Modul
 * stehen in `rem` und rechnen damit an einer Elternangabe vorbei.
 */
body .pjf-formular {
	font-size: 1rem;
	line-height: 1.65;
}

/* ---------- Beschriftungen ---------- */

/*
 * Halbfett in Navy, in der Größe des Fließtexts. Sie sind die einzige
 * Erklärung, was in ein Feld gehört — deshalb dürfen sie deutlich sein,
 * aber sie sind keine Überschriften.
 */
body .pjf-formular .pjf-feld-name,
body .pjf-formular legend {
	font-size: .9375rem;
	font-weight: 600;
	color: var(--dunkel);
}

/*
 * Der Pflichtstern in der abgedunkelten Eisstufe, nicht in Rot.
 *
 * Rot heißt auf einer Seite „hier ist etwas schiefgegangen“. Ein
 * Pflichtfeld ist aber nichts Schiefgegangenes, sondern eine Auskunft
 * vorab — und wenn jedes zweite Feld einen roten Stern trägt, ist der
 * Ton für die tatsächliche Fehlermeldung verbraucht.
 *
 * Für Fehler bleibt Rot: Dort ist es richtig, und die Farbe steht als
 * `--pjf-rot` weiter im Modul.
 */
/*
 * Hier steht `!important`, und zwar als Antwort.
 *
 * Das Modul setzt die Farbe des Pflichtsterns selbst mit `!important` —
 * mit gutem Grund: Es hat sich gegen Themes wehren müssen, die
 * Formularbeschriftungen pauschal einfärben. Ohne dieselbe Deutlichkeit
 * kommt keine Regel dagegen an, egal wie lang ihr Auswahlpfad ist.
 *
 * Das ist die eine Stelle im Theme, an der `!important` richtig ist:
 * Nicht um eine Ladereihenfolge zu übergehen, sondern um einer
 * ausdrücklichen Angabe eine ausdrücklichere entgegenzusetzen.
 */
body .pjf-formular .pjf-stern {
	color: var(--eis-tief) !important;
}

body .pjf-formular .pjf-hinweis,
body .pjf-formular .pjf-erklaerung,
body .pjf-formular .pjf-schranke-merken {
	font-size: .875rem;
	color: var(--leise);
}

/*
 * Titel und Zwischenüberschrift eines Formulars sind Überschriften der
 * Seite und tragen deshalb die Plakatschrift — dieselbe Regel wie bei
 * den Blocküberschriften der übrigen Module.
 */
body .pjf-formular .pjf-titel {
	font-family: var(--schrift-plakat);
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
	font-weight: 400;
	line-height: 1.05;
	color: var(--dunkel);
}

body .pjf-formular .pjf-beschreibung {
	font-size: 1rem;
	color: var(--leise);
}

/*
 * Die Zwischenüberschrift bleibt in der Textschrift: Sie steht mitten im
 * Formular zwischen zwei Feldgruppen, und Wire One wäre dort ein
 * Abschnittswechsel, wo nur eine Gliederung gemeint ist.
 */
body .pjf-formular .pjf-zwischen {
	font-family: var(--schrift-text);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--dunkel);
	border-top-color: var(--linie);
}

/* ---------- Felder ---------- */

/*
 * Dieselbe Rundung wie jedes Bedienelement der Seite, dieselbe
 * Linienfarbe, dieselbe Schrift. Die Größe eine Spur über dem Fließtext,
 * weil in ein Feld geschrieben wird und nicht nur gelesen.
 */
body .pjf-formular input,
body .pjf-formular select,
body .pjf-formular textarea {
	font-family: inherit;
	font-size: 1rem;
	border-radius: var(--radius-bedienung);
}

/*
 * Der Rahmen eines Feldes, in dem gerade geschrieben wird: zwei Linien
 * statt eines Rings. Ein Ring in der Browserfarbe säße hier neben
 * eisblauen Kanten und sähe fremd aus.
 */
body .pjf-formular input:focus,
body .pjf-formular select:focus,
body .pjf-formular textarea:focus {
	outline: 2px solid var(--eis-tief);
	outline-offset: 1px;
	border-color: var(--eis-tief);
}

/* ---------- Der Absendeknopf ---------- */

/*
 * Die Zeichnung jedes Knopfes dieser Seite: eckig-gerundet, Versalien,
 * gesperrt, halbfett. Die 32 Pixel Rundung des Moduls ergäben eine
 * Kapsel — die einzige auf der ganzen Seite, und ausgerechnet an der
 * Stelle, an der jemand etwas abschickt.
 *
 * ---------------------------------------------------------------------
 * `:hover` und `:focus` müssen mit in den Auswahlpfad
 * ---------------------------------------------------------------------
 *
 * Das Modul schreibt seine Maße in **einen** Block für alle drei
 * Zustände:
 *
 *     .pjf-formular .pjf-knopf,
 *     .pjf-formular .pjf-knopf:hover,
 *     .pjf-formular .pjf-knopf:focus { … }
 *
 * Ein Auswahlpfad mit Pseudoklasse ist stärker als einer ohne. Wer nur
 * den Ruhezustand überschreibt, bekommt beim Überfahren **alles** zurück
 * — Rundung, Innenabstand, Schriftgröße. Genau das war zu sehen: ein
 * ordentlicher Knopf, der unter der Maus zur Kapsel wurde und dabei
 * wuchs.
 */
body .pjf-formular .pjf-knopf,
body .pjf-formular .pjf-knopf:hover,
body .pjf-formular .pjf-knopf:focus,
body .pjf-formular .pjf-knopf:active,
body .pjf-formular .pjf-knopf-rand,
body .pjf-formular .pjf-knopf-rand:hover,
body .pjf-formular .pjf-knopf-rand:focus,
body .pjf-formular button[type="submit"],
body .pjf-formular button[type="submit"]:hover,
body .pjf-formular button[type="submit"]:focus {
	padding: .95rem 1.6rem;
	border-radius: var(--radius-bedienung);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/*
 * Der zweite Knopf des Moduls („ohne Google absenden“) ist umrandet. Ein
 * Rand von zwei Pixeln ist auf dieser Seite nirgends sonst — die
 * umrandeten Knöpfe haben einen.
 */
body .pjf-formular .pjf-knopf-rand,
body .pjf-formular .pjf-knopf-rand:hover,
body .pjf-formular .pjf-knopf-rand:focus {
	border-width: 1px;
	border-color: var(--linie);
	color: var(--dunkel);
}

body .pjf-formular .pjf-knopf-rand:hover,
body .pjf-formular .pjf-knopf-rand:focus {
	background: var(--dunst);
	border-color: var(--eis);
}

/* ---------- Wahlfelder ---------- */

/*
 * Die Kreise und Kästchen des Moduls sind für 1,2rem Grundschrift
 * gerechnet und stehen neben 1rem-Text zu groß. Mit `accent-color`
 * tragen sie außerdem die Vereinsfarbe statt des Systemblaus — die eine
 * Stelle, an der sonst eine fremde Farbe im Formular auftaucht.
 */
body .pjf-formular .pjf-wahl-feld,
body .pjf-formular .pjf-haken-feld {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: .15rem;
	accent-color: var(--dunkel);
}

body .pjf-formular .pjf-wahl-text,
body .pjf-formular .pjf-haken-text {
	font-size: 1rem;
	font-weight: 400;
	color: var(--tinte);
}

/* ---------- Meldungen ---------- */

/*
 * Die Danke-Meldung nach dem Absenden trägt die Zeichnung, die auf
 * dieser Seite überall für einen abgesetzten Hinweis steht: eisblaue
 * Kante, leise Fläche.
 */
/*
 * Die Danke-Seite behält ihre Mindesthöhe — sie steht allein auf der
 * Seite, und ohne sie endet der Inhalt mitten im Bildschirm. Nur die
 * Schriftgröße wird auf das Maß der Seite gezogen.
 */
body .pjf-danke-text {
	font-size: 1.125rem;
}

body .pjf-mitteilung {
	padding: 1.1rem 0 1.1rem 1.25rem;
	border-left: 2px solid var(--eis);
	background: var(--dunst);
	font-size: 1rem;
}

/* ---------- Und dasselbe auf großen Bildschirmen ---------- */

/*
 * Das Modul vergrößert ab 1500px alles um rund ein Zehntel — eine
 * eigene Skala für breite Schirme.
 *
 * Auf dieser Seite gibt es die nicht: Der Text steht in einer Bahn von
 * 84rem und wächst nicht mit dem Fenster, weil eine Zeile mit 130
 * Zeichen nicht dadurch besser wird, dass der Bildschirm größer ist.
 * Ohne diesen Block stünde ab 1500px ein Formular in der Seite, dessen
 * Schrift ein Drittel größer ist als der Absatz darüber.
 *
 * Die Liste ist vollständig gegen die des Moduls geprüft — dort steht
 * der Hinweis, dass beim Ergänzen zweimal eine Stelle vergessen wurde
 * und alles Übrige mitwuchs.
 */
@media (min-width: 1500px) {
	body .pjf-formular,
	body .pjf-formular .pjf-eingabe,
	body .pjf-formular .pjf-wahl-text,
	body .pjf-formular .pjf-haken-text {
		font-size: 1rem;
	}

	body .pjf-formular .pjf-feld-name {
		font-size: .9375rem;
	}

	body .pjf-formular .pjf-hinweis,
	body .pjf-formular .pjf-erklaerung,
	body .pjf-formular .pjf-schranke-merken,
	body .pjf-formular .pjf-recaptcha-hinweis {
		font-size: .875rem;
	}

	body .pjf-formular .pjf-beschreibung {
		font-size: 1rem;
	}

	body .pjf-formular .pjf-zwischen {
		font-size: 1.0625rem;
	}

	body .pjf-formular .pjf-knopf {
		font-size: .8125rem;
		padding: .95rem 1.6rem;
	}

	body .pjf-formular .pjf-wahl-feld,
	body .pjf-formular .pjf-haken-feld {
		width: 1.15rem;
		height: 1.15rem;
	}

	body .pjf-fehler-text,
	body .pjf-mitteilung,
	body .pjf-schranke-text,
	body .pjf-sperre-text {
		font-size: 1rem;
	}

	body .pjf-danke-text {
		font-size: 1.125rem;
	}
}

/* =========================================================
   8. Bewegung und Rücksicht
   ========================================================= */

/*
 * Eingeblendet wird beim Scrollen, aber sparsam: ein kurzes Aufziehen,
 * einmal je Element, und danach nie wieder. Ausgelöst wird es in
 * theme.js über einen IntersectionObserver, nicht über ein
 * Scroll-Ereignis. Ein `scroll`-Listener läuft bei jeder Bewegung des
 * Fingers, der Observer nur, wenn tatsächlich etwas die Kante kreuzt.
 *
 * Die Klasse wird von theme.js gesetzt, nicht hier: Ohne JavaScript soll
 * der Inhalt sichtbar sein und nicht auf ein Skript warten, das nie
 * kommt.
 */
.js .auftritt {
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 500ms ease, transform 500ms ease;
}

.js .auftritt.ist-da {
	opacity: 1;
	transform: none;
}

/*
 * Wer im Betriebssystem weniger Bewegung eingestellt hat, hat das aus
 * einem Grund getan. Hier wird nichts halb abgeschaltet: keine
 * Übergänge, keine Verschiebungen, kein weiches Scrollen.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

	.js .auftritt {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================
   9. Schmale Bildschirme
   ========================================================= */

@media (max-width: 60rem) {

	/*
	 * Unter dieser Breite passt das Menü nicht mehr in eine Zeile. Zwei
	 * Zeilen Menü sind kein Menü, deshalb wandert es in eine Fläche, die
	 * sich über den Inhalt legt.
	 */
	.hauptnav__schalter {
		display: inline-flex;
	}

	.hauptnav__liste {
		position: fixed;
		inset: var(--kopf-hoehe) 0 0;
		z-index: 99;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 1.5rem var(--rand) 3rem;
		overflow-y: auto;
		background: var(--dunkel);
		color: var(--weiss);
		transform: translateY(-100%);
		visibility: hidden;
		transition: transform 260ms ease, visibility 260ms;
	}

	.hauptnav__liste.ist-offen {
		transform: translateY(0);
		visibility: visible;
	}

	.hauptnav__punkt {
		border-bottom: 1px solid rgba(135, 206, 220, .2);
	}

	.hauptnav__punkt--ebene-0 {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.hauptnav__link {
		flex: 1;
		padding: 1rem 0;
		color: var(--weiss);
		font-size: 1rem;
		letter-spacing: .08em;
	}

	.hauptnav__link span::after {
		display: none;
	}

	/* Am Handy ein richtiger Knopf mit Fingerfläche, nicht das
	   schmale Zeichen aus der Leiste. */
	.hauptnav__aufklapp {
		margin: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		color: var(--eis);
	}

	.hauptnav__aufklapp .icon {
		transition: transform var(--takt) ease;
	}

	.hauptnav__aufklapp[aria-expanded="true"] .icon {
		transform: rotate(180deg);
	}

	/*
	 * Auf dem Handy ist das Feld eine eingerückte Liste.
	 *
	 * Aufgeklappt wird per Knopf, nicht beim Berühren: Ein Untermenü,
	 * das beim Scrollen unter dem Daumen aufgeht, ist auf einem Telefon
	 * kein Menü, sondern ein Hindernis. Auch die dritte Ebene wartet
	 * hier auf einen Knopf — anders als am Rechner, wo sie im Feld ohne
	 * Zutun sichtbar ist.
	 */
	.hauptnav__unterliste,
	.hauptnav__unterliste .hauptnav__unterliste {
		position: static;
		display: none;
		width: 100%;
		min-width: 0;
		padding: 0 0 .75rem 1rem;
		background: transparent;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.hat-kinder:hover > .hauptnav__unterliste,
	.hat-kinder:focus-within > .hauptnav__unterliste {
		display: none;
	}

	.hauptnav__aufklapp[aria-expanded="true"] + .hauptnav__unterliste {
		display: block;
	}

	/* Am Handy steht das Menü über die ganze Breite; es kann nicht
	   überstehen und muss nicht nach links ausweichen. */
	.hauptnav__punkt--ebene-0:nth-last-child(-n + 2) > .hauptnav__unterliste {
		left: auto;
		right: auto;
	}

	/* Hier braucht es die Knöpfe wieder — im Feld waren sie überflüssig. */
	.hauptnav__unterliste .hauptnav__aufklapp {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		color: var(--eis);
	}

	.hauptnav__unterliste .hauptnav__punkt {
		border-bottom: 0;
	}

	.hauptnav__unterliste .hauptnav__link {
		padding-left: 0;
		border-left: 0;
	}

	.hauptnav__unterliste .hauptnav__link:hover,
	.hauptnav__unterliste .hauptnav__link:focus-visible {
		background: none;
	}

	.hauptnav__unterliste .hauptnav__unterliste .hauptnav__link {
		padding-left: 0;
		font-size: .875rem;
	}

	.hauptnav__unterliste .hauptnav__link {
		padding: .6rem 0;
		color: rgba(255, 255, 255, .82);
		font-size: .9375rem;
	}

	.hauptnav__unterliste .hauptnav__link:hover,
	.hauptnav__unterliste .hauptnav__link:focus-visible {
		background: transparent;
		color: var(--eis);
	}

	/*
	 * Solange das Menü offen ist, steht die Leiste auf Navy und fest.
	 * Fest auch dann, wenn die mitlaufende Leiste abgeschaltet ist: Die
	 * Menüfläche hängt an `--leisten-hoehe` von oben, und eine Leiste,
	 * die weggescrollt ist, während das Menü steht, lässt einen leeren
	 * Streifen darüber stehen.
	 */
	.menue-offen .kopfbalken {
		position: fixed;
		top: 0;
	}

	.admin-bar.menue-offen .kopfbalken {
		top: 46px;
	}

	/* Hinter dem offenen Menü soll nichts mitscrollen. */
	.menue-offen {
		overflow: hidden;
	}

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

@media (max-width: 40rem) {
	.fuss__spalten {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.alignleft,
	.alignright {
		float: none;
		margin-inline: 0;
	}
}

/* =========================================================
   10. Druck
   ========================================================= */

@media print {
	.kopfbalken,
	.hauptnav,
	.nach-oben,
	.social,
	.sponsorenband,
	.aufmacher__weiter,
	.sprungmarke {
		display: none !important;
	}

	body {
		/* Auf Papier reines Schwarz: Das navygestimmte Fastschwarz der
		   Seite frisst im Druck Toner und wird auf einem Schwarzweiß-
		   drucker zu Grau. */
		color: #000;
		font-size: 11pt;
	}

	.ist-unterseite .haupt {
		padding-top: 0;
	}

	/* Die Fußzeile ohne Verlauf und Körnung: Ein dunkler Kasten kostet
	   auf Papier nur Farbe und bringt nichts. */
	.fuss {
		background: none;
		color: #000;
	}

	.fuss::before {
		display: none;
	}

	a {
		text-decoration: underline;
	}
}

/* ---------- Der Verleih ---------- */

/*
 * ---------------------------------------------------------------------
 * Warum hier überall `body` davorsteht
 * ---------------------------------------------------------------------
 *
 * Das Stylesheet des Moduls wird von `PJL_Frontend::mittel()` erst dann
 * eingehängt, wenn auf der Seite ein Verleih-Shortcode steht — also
 * **nach** `theme.css`. Bei gleicher Gewichtung gewinnt die spätere
 * Regel, und `.pjl-karte-titel` steht in beiden Dateien mit derselben
 * Gewichtung.
 *
 * In 1.72 hatte ich das übersehen, weil meine Vorschau die beiden Dateien
 * in der umgekehrten Reihenfolge lädt: Dort sah der Katalog richtig aus,
 * auf der Website blieb alles beim Alten. Das `body` davor macht die
 * Regel um ein Element schwerer und beendet den Streit.
 */

/*
 * ---------------------------------------------------------------------
 * Warum das Modul hier zurechtgerückt wird
 * ---------------------------------------------------------------------
 *
 * Das Verleihmodul war ein Plugin für sich und hat seine Größen selbst
 * gewählt: Kacheltitel 1,45rem, Kurztext 1,05rem, Bestand 1,02rem. Der
 * Kommentar dort sagt sogar, warum — auf einer Kachel, die ein Drittel
 * der Seite einnimmt, wirke ein Name in 1,1rem verloren.
 *
 * Auf dieser Website stimmt das nicht mehr. Neben Terminkacheln, deren
 * Titel 1,125rem misst, und Kacheln, deren Text 0,95rem hat, liest sich
 * der Katalog wie eine andere Seite: alles eine Nummer größer, gerundete
 * Ecken, Knöpfe mit anderer Zeichnung.
 *
 * Deshalb gilt hier dieselbe Karte wie überall: heller Grund, dünne
 * Linie, keine Rundung, Titel wie eine Zwischenüberschrift, Knopf unten.
 * Geändert wird nur das Aussehen — Aufbau und Verhalten des Moduls
 * bleiben unangetastet.
 */

body .pjl-karte {
	border-color: var(--linie);
	border-radius: 0;
	background: var(--papier);
	transition: border-color var(--takt) ease;
}

body .pjl-karte:hover,
body .pjl-karte:focus-within {
	border-color: var(--eis);
}

/*
 * Die Bildfläche in Dunstblau statt in Grau, wie jede leere Fläche hier,
 * und flacher: 4:3 gibt bei drei Spalten in der weiten Spur rund 275
 * Pixel Höhe. Bei einem Katalog, in dem noch kein einziges Foto liegt,
 * sind das drei leere Felder von der Größe einer Postkarte, bevor der
 * erste Name kommt.
 */
body .pjl-karte-bild {
	aspect-ratio: 3 / 2;
	background: var(--dunst);
}

/*
 * Ohne Foto noch flacher. Die Fläche verschwindet nicht ganz — dann
 * stünden Kacheln mit und ohne Bild unterschiedlich hoch in derselben
 * Reihe —, aber sie nimmt nur noch so viel Platz, dass man sieht: Hier
 * gehört ein Bild hin.
 */
body .pjl-karte-bild:has(.pjl-kein-bild) {
	aspect-ratio: 5 / 1;
}

body .pjl-kein-bild {
	background: var(--dunst);
}

/*
 * Die Schriftgrößen eine Stufe zurück, auf die der übrigen Kacheln.
 * Der Titel bekommt zusätzlich die enge Laufweite, mit der auf dieser
 * Seite jede Zwischenüberschrift gesetzt ist.
 */
body .pjl-karte-text {
	padding: clamp(1rem, 2.5vw, 1.25rem);
	gap: .5rem;
}

body .pjl-katalog .pjl-karte-titel {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--dunkel);
}

body .pjl-katalog .pjl-kurz {
	font-size: .95rem;
	line-height: 1.6;
	color: var(--tinte);
}

/*
 * Der Bestand ist eine Angabe, keine Aussage: dieselbe gesperrte
 * Kleinzeile, mit der auf der Terminkachel „Einlass“ oder „Eintritt“
 * steht.
 */
body .pjl-katalog .pjl-bestand {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--eis-tief);
}

body .pjl-varianten-kurz {
	font-size: .9375rem;
}

/* Die Knöpfe des Moduls in der Zeichnung der Seite. */
body .pjl-katalog .pjl-knopf {
	border-radius: var(--radius-bedienung);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/*
 * ---------------------------------------------------------------------
 * Die Kategorien
 * ---------------------------------------------------------------------
 *
 * Der Katalog ist eine lange Seite, auf der man scrollt, ohne zu wissen,
 * wie weit es noch ist. Zwei Dinge helfen dagegen, und beide brauchen
 * kein Banner:
 *
 * 1. Die Kategorieüberschrift bekommt die Zeichnung eines
 *    Abschnittskopfs: Plakatschrift, darüber eine eisblaue Linie. Man
 *    sieht beim Scrollen, dass ein neuer Abschnitt beginnt.
 * 2. `scroll-margin-top` hält den Kopf frei. Ohne die Angabe verschwindet
 *    die angesprungene Überschrift unter der festen Leiste, und man
 *    landet scheinbar mitten in der vorigen Kategorie.
 */
body .pjl-gruppe {
	scroll-margin-top: calc(var(--kopf-hoehe, 4rem) + 1.5rem);
}

body .pjl-gruppe + .pjl-gruppe {
	margin-top: var(--raum-abschnitt);
}

body .pjl-gruppe-titel {
	position: relative;
	margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
	padding-top: 1.25rem;
	border-top: 2px solid var(--linie);
	font-family: var(--schrift-plakat);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .03em;
	color: var(--dunkel);
}

/* Ein kurzes eisblaues Stück auf der Linie, als Marke des Abschnitts. */
body .pjl-gruppe-titel::before {
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	width: 3rem;
	height: 2px;
	background: var(--eis-tief);
}

body .pjl-gruppe-text {
	margin: -.5rem 0 clamp(1rem, 2.5vw, 1.5rem);
	color: var(--leise);
	font-size: .95rem;
}

/*
 * Die Sprungleiste über den Kategorien. Dieselbe Zeichnung wie die
 * Reiterleiste über den Medienseiten — es ist dieselbe Sache: eine
 * Auswahl, bevor der lange Teil anfängt.
 */
body .pjl-sprungleiste {
	margin-bottom: var(--raum-block);
	border-bottom: 2px solid var(--linie);
}

body .pjl-sprungleiste ul {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .pjl-sprungleiste a {
	display: block;
	margin-bottom: -2px;
	padding: .55rem .2rem;
	border-bottom: 2px solid transparent;
	color: var(--leise);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--takt) ease, border-color var(--takt) ease;
}

body .pjl-sprungleiste a:hover,
body .pjl-sprungleiste a:focus-visible {
	color: var(--dunkel);
	border-bottom-color: var(--eis);
}

/* Auf dem Handy eine Zeile zum Wischen statt vier Zeilen Umbruch. */
@media (max-width: 32rem) {
	body .pjl-sprungleiste ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	body .pjl-sprungleiste ul::-webkit-scrollbar {
		display: none;
	}

	body .pjl-sprungleiste a {
		white-space: nowrap;
	}
}

/*
 * Die Merkleiste am unteren Rand: navyblau wie die Fußzeile, damit sie
 * als Teil der Seite gelesen wird und nicht als Einblendung einer
 * fremden Anwendung.
 */
body .pjl-merkleiste {
	background: var(--dunkel);
	color: rgba(255, 255, 255, .88);
	border-top: 3px solid var(--eis);
}

/*
 * ---------------------------------------------------------------------
 * Die beiden Knöpfe in der Merkleiste
 * ---------------------------------------------------------------------
 *
 * „Anfrage stellen“ ist die Handlung, auf die alles zuläuft — er trägt
 * die Fläche. „Ansehen“ klappt nur die Liste auf; er bekommt einen
 * Rahmen und sonst nichts. Vorher war es andersherum: Der wichtige Knopf
 * war dunkel auf dunkler Leiste und kaum zu lesen, der unwichtige
 * leuchtete eisblau.
 *
 * Die Farben gehen über `--pjl-haupt-*` in das Modul hinein, statt seine
 * Regeln zu überschreiben. So bleibt die Zeichnung an einer Stelle, und
 * die harten Dunkelwerte im Modul dienen nur noch als Rückfall unter
 * einem fremden Theme.
 */
body .pjl-merkleiste {
	--pjl-haupt-flaeche: var(--eis);
	--pjl-haupt-flaeche-hover: var(--weiss);
	--pjl-haupt-schrift: var(--dunkel);
}

/*
 * Die aufgeklappte Liste steht auf demselben dunklen Grund. Das Modul
 * setzt dort die Schriftfarbe für hellen Untergrund — „entfernen“ war
 * dunkelrot auf Navy und praktisch unlesbar.
 */
body .pjl-merkleiste .pjl-merkliste-zeile {
	color: rgba(255, 255, 255, .88);
	border-color: rgba(255, 255, 255, .14);
}

body .pjl-merkleiste .pjl-textknopf {
	color: var(--eis);
}

body .pjl-merkleiste .pjl-textknopf:hover,
body .pjl-merkleiste .pjl-textknopf:focus-visible {
	color: var(--weiss);
}

/*
 * „Ansehen“: nur ein Rahmen, heller Text.
 *
 * ---------------------------------------------------------------------
 * Warum hier `:focus` steht und nicht nur `:focus-visible`
 * ---------------------------------------------------------------------
 *
 * Das Modul hat für alle Knöpfe eine Regel
 * `.pjl-katalog .pjl-knopf:hover, :focus { background: #f0f0f1 }` — ein
 * helles Grau, richtig für die weiße Leiste des Plugins. Nach einem
 * Klick auf „ansehen“ bleibt der Fokus auf dem Knopf stehen, und auf der
 * navyblauen Leiste stand dann ein weißgrauer Kasten mit grauer Schrift
 * darin. Genau in dem Moment, in dem man ihn ansieht.
 *
 * Die Modulregel wiegt (0,3,0) — zwei Klassen und eine Pseudoklasse.
 * `body .pjl-merkleiste .pjl-knopf-leise:focus` wiegt (0,3,1) und
 * gewinnt. `:focus-visible` allein hätte nicht gereicht: Es greift nach
 * einem Mausklick gar nicht, die Regel des Moduls aber schon.
 */
body .pjl-merkleiste .pjl-knopf-leise {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .45);
	color: rgba(255, 255, 255, .9);
}

body .pjl-merkleiste .pjl-knopf-leise:hover,
body .pjl-merkleiste .pjl-knopf-leise:focus,
body .pjl-merkleiste .pjl-knopf-leise:focus-visible {
	background: rgba(255, 255, 255, .1);
	border-color: var(--eis);
	color: var(--weiss);
}

/*
 * Dasselbe für die übrigen Knöpfe der Leiste: Der Grauwert des Moduls
 * darf hier nirgends durchschlagen.
 */
body .pjl-merkleiste .pjl-knopf:hover,
body .pjl-merkleiste .pjl-knopf:focus {
	color: var(--dunkel);
}

body .pjl-merkleiste .pjl-knopf-leise:hover,
body .pjl-merkleiste .pjl-knopf-leise:focus {
	color: var(--weiss);
}

/*
 * Der Gegenblock zur 1500-Pixel-Vergrößerung ist mit 1.76 entfallen: Die
 * Vergrößerung selbst steht nicht mehr im Modul. Eine Regel, die eine
 * andere Regel zurücknimmt, ist immer die schlechtere Lösung — sie muss
 * jede Zeile der anderen kennen und mitwachsen.
 */

/*
 * Die Einzelansicht in den Größen der Seite, auch unterhalb von 1500px.
 * Der Titel steht dort in der Plakatschrift, wie jede Überschrift dieser
 * Website; die Merkfläche ist ein Dunstkasten mit eisblauer Kante statt
 * eines grauen Blocks mit runden Ecken.
 */
body .pjl-katalog .pjl-einzeln-titel {
	font-family: var(--schrift-plakat);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .03em;
	color: var(--dunkel);
}

body .pjl-katalog .pjl-kurz-gross {
	font-size: 1.0625rem;
	line-height: 1.7;
}

body .pjl-katalog .pjl-wahlkasten {
	padding: var(--raum-eng);
	background: var(--dunst);
	border: 1px solid var(--linie);
	border-left: 3px solid var(--eis);
	border-radius: 0;
}

/*
 * „1 Stück vorhanden“: die Zahl in der Plakatschrift, der Zusatz als
 * Kleinzeile — dieselbe Paarung wie „187 Veranstaltungen“ im Band.
 */
body .pjl-katalog .pjl-bestand-gross {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--eis-tief);
}

body .pjl-katalog .pjl-bestand-zahl {
	font-family: var(--schrift-plakat);
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: .03em;
	color: var(--dunkel);
}

body .pjl-knopf-gross {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .85rem 1.5rem;
}

/* Die Liste der technischen Angaben in der Textgröße der Seite. */
body .pjl-technik-name,
body .pjl-technik-wert,
body .pjl-beschreibung li,
body .pjl-beschreibung p {
	font-size: .95rem;
	line-height: 1.7;
}

/* Der Zurück-Verweis wie überall: Kleinzeile, nicht Fließtext. */
body .pjl-katalog .pjl-zurueck-link {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--leise);
}

body .pjl-katalog .pjl-zurueck-link:hover,
body .pjl-katalog .pjl-zurueck-link:focus-visible {
	color: var(--dunkel);
}

/* Die Lupe am Bild: eckig und navyblau statt gerundet und violett. */
body .pjl-katalog .pjl-lupe {
	border-radius: var(--radius-bedienung);
	background: var(--dunkel);
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.125rem;
}

body .pjl-katalog .pjl-lupe:hover,
body .pjl-katalog .pjl-lupe:focus {
	background: var(--dunkel-hoch);
}

/*
 * ---------------------------------------------------------------------
 * Was am unteren Rand schwebt, muss sich vertragen
 * ---------------------------------------------------------------------
 *
 * Drei Dinge sitzen dort fest: die Terminmarke („Als Nächstes“) links,
 * der Nach-oben-Knopf rechts und im Verleih die Merkleiste über die
 * ganze Breite. Jedes für sich ist richtig gesetzt, zusammen liegen sie
 * übereinander — auf der Katalogseite verschwand die Terminmarke halb
 * hinter der Merkleiste, und der Knopf lag darauf.
 *
 * Statt jedes Element einzeln zu verschieben, gibt es hier eine Höhe:
 * `--leiste-unten`. Sie ist normalerweise null und wird von der
 * Merkleiste gesetzt, solange die Leiste sichtbar ist. Wer später ein
 * viertes schwebendes Ding hinzufügt, rechnet mit derselben Zahl.
 *
 * `:has()` prüft dabei den Zustand, den das Modul ohnehin pflegt: Die
 * Leiste trägt `hidden`, solange nichts gemerkt ist. Ein eigenes
 * Skript, das eine Klasse setzt, wäre eine zweite Wahrheit über
 * denselben Zustand.
 */
:root {
	--leiste-unten: 0px;
}

/*
 * Der Wert kommt aus `theme.js`, gemessen an der echten Leiste — sie ist
 * je nach Umbruch verschieden hoch. Hier steht nur ein Rückfall für den
 * Augenblick vor dem ersten Messen und für den Fall, dass kein
 * JavaScript läuft.
 */
body:has(.pjl-merkleiste:not([hidden])) {
	--leiste-unten: 4.75rem;
}

.terminmarke,
.nach-oben {
	bottom: calc(clamp(1rem, 3vw, 2rem) + var(--leiste-unten));
	transition: bottom var(--takt) ease;
}

/*
 * Solange die Merkleiste steht, braucht auch die Fußzeile unten Luft —
 * sonst deckt die Leiste die unterste Zeile zu, und dort stehen
 * Impressum und Datenschutz.
 */
body:has(.pjl-merkleiste:not([hidden])) .fuss {
	padding-bottom: calc(var(--leiste-unten) + 1rem);
}

/*
 * ---------------------------------------------------------------------
 * Die Merkleiste in der Zeichnung der Seite
 * ---------------------------------------------------------------------
 *
 * Sie ist navyblau wie die Fußzeile, aber niedriger als bisher: Eine
 * Leiste, die vier Zentimeter hoch über den Inhalt liegt, nimmt auf
 * einem Laptop ein Zehntel der Seite.
 */
body .pjl-merkleiste {
	padding-block: .75rem;
}

body .pjl-merkleiste-innen {
	max-width: var(--bahn);
	margin-inline: auto;
}

body .pjl-merktext,
body .pjl-merkliste {
	font-size: .9375rem;
	color: rgba(255, 255, 255, .82);
}

body .pjl-merkzahl {
	font-family: var(--schrift-plakat);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1;
	color: var(--eis);
}

/*
 * ---------------------------------------------------------------------
 * Der Katalog auf dem Laptop
 * ---------------------------------------------------------------------
 *
 * Die Kachel hatte 1,5rem Innenabstand und 1,4 Zeilenabstand zwischen
 * ihren drei Zeilen — bei drei Kacheln nebeneinander steht dann mehr
 * Luft als Text darin, und die Reihe wird höher als der Bildschirm.
 * Enger gesetzt trägt dieselbe Reihe dreimal so viel Übersicht.
 */
body .pjl-karte-text {
	padding: 1rem;
	gap: .35rem;
}

body .pjl-karten {
	gap: clamp(.75rem, 2vw, 1.25rem);
}

/* Der Merkknopf muss nicht die ganze Kachelbreite einnehmen. */
body .pjl-karte-text .pjl-knopf {
	align-self: start;
	padding: .55rem 1.1rem;
}

/*
 * Das Anfrageformular. Die Überschriften in der Sprache der Seite: die
 * große in der Plakatschrift, die Schritte als Zwischenüberschriften mit
 * einer Kleinzeile davor — es ist eine Abfolge, und man soll sehen, wo
 * man gerade steht.
 */
body .pjl-katalog .pjl-anfrage-titel {
	font-family: var(--schrift-plakat);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .03em;
	color: var(--dunkel);
}

body .pjl-katalog .pjl-schritt-titel {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--dunkel);
}

/* Die Schritte voneinander absetzen, wie zwei Abschnitte einer Seite. */
body .pjl-katalog .pjl-schritt + .pjl-schritt {
	margin-top: var(--raum-block);
	padding-top: var(--raum-block);
	border-top: 1px solid var(--linie);
}

/* Eingabefelder wie im Kontaktformular des Themes: eckig, ruhige Linie. */
body .pjl-katalog .pjl-eingabe {
	border-radius: 0;
	border-color: var(--linie);
	background: var(--papier);
}

body .pjl-katalog .pjl-eingabe:focus {
	border-color: var(--eis-tief);
	outline: 2px solid var(--eis);
	outline-offset: 1px;
}

/* Der Korb ist ein Hinweis, kein Titel. */
body .pjl-katalog .pjl-korb {
	font-size: .9375rem;
}