/*
Theme Name: Die Schützen-Gala
Theme URI: https://schuetzengala.de/
Author: Schützen-Gala-Team
Description: Theme für die Schützen-Gala im Kurhaus Bad Honnef. Saal-Schwarz, Gold und Licht. Eckdaten, Programm und Kartenbestellung im Customizer unter „Schützen-Gala“.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: schuetzengala
*/

/* ==========================================================================
   Schriften (lokal, keine Anfragen an fremde Server)
   ========================================================================== */

@font-face {
	font-family: "Belleza";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/belleza-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Belleza";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/belleza-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Alegreya Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/alegreya-sans-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Alegreya Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/alegreya-sans-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Alegreya Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/alegreya-sans-latin-400-italic.woff2") format("woff2");
}
@font-face {
	font-family: "Alegreya Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/alegreya-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Alegreya Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/alegreya-sans-latin-700-normal.woff2") format("woff2");
}

/* ==========================================================================
   Grundwerte
   ========================================================================== */

:root {
	color-scheme: dark;

	--saal: #07060a;
	--saal-tief: #040306;
	--saal-hoch: #110e14;
	--saal-feld: #16121a;

	--gold: #c9a25a;
	--gold-hell: #f1d9a2;
	--gold-tief: #9a7637;

	--elfenbein: #efe7d6;
	--elfenbein-2: #bdb3a3;
	--elfenbein-3: #8f8678;

	--magenta: #b23a8e;
	--cyan: #2fa8c8;


	--linie: rgb(241 217 162 / 0.18);
	--linie-stark: rgb(241 217 162 / 0.34);
	--linie-feld: rgb(239 231 214 / 0.3);
	--fehler: #ff9c8a;

	--schrift-titel: "Belleza", "Optima", "Candara", "Segoe UI", sans-serif;
	--schrift-text: "Alegreya Sans", "Candara", "Segoe UI", sans-serif;

	--rand: clamp(1.25rem, 4.5vw, 4rem);
	--breite: 82rem;
	--kopf-hoehe: 4.25rem;

	--ease-aus: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-licht: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--kopf-hoehe) + 1.5rem);
	scrollbar-color: #3b3227 var(--saal);
	scrollbar-width: thin;
}

body {
	margin: 0;
	background: var(--saal);
	color: var(--elfenbein);
	font-family: var(--schrift-text);
	font-size: 1.125rem;
	line-height: 1.6;
	font-kerning: normal;
	font-variant-numeric: lining-nums;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	caret-color: var(--gold-hell);
	overflow-x: clip;
}

@media (min-width: 48rem) {
	body {
		font-size: 1.1875rem;
	}
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 30;
	pointer-events: none;
	opacity: 0.05;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

::selection {
	background: var(--gold);
	color: var(--saal);
}

img,
picture,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: var(--gold-hell);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: rgb(241 217 162 / 0.5);
	transition: color 0.2s, text-decoration-color 0.2s;
}

a:hover {
	color: #fff4dc;
	text-decoration-color: currentColor;
}

:focus-visible {
	outline: 2px solid var(--gold-hell);
	outline-offset: 3px;
	border-radius: 2px;
}

main:focus {
	outline: none;
}

h1,
h2,
h3,
h4 {
	font-family: var(--schrift-titel);
	font-weight: 400;
	line-height: 1.15;
	text-wrap: balance;
	margin: 0;
}

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

[hidden] {
	display: none !important;
}

.nur-vorlesen,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sprung {
	position: fixed;
	z-index: 100;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.75rem 1.1rem;
	background: var(--gold);
	color: var(--saal);
	font-family: var(--schrift-titel);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	transform: translateY(-200%);
}

.sprung:focus {
	transform: none;
}

.rahmen {
	width: 100%;
	max-width: calc(var(--breite) + 2 * var(--rand));
	margin-inline: auto;
	padding-inline: var(--rand);
}

.icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

/* ==========================================================================
   Bedienelemente: Gold heißt „man kann es drücken“
   ========================================================================== */

.knopf {
	--glanz: -120%;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	min-height: 3.25rem;
	padding: 0.5rem 1.5rem;
	border: 0;
	border-radius: 2px;
	background:
		linear-gradient(105deg, transparent 40%, rgb(255 248 230 / 0.55) 50%, transparent 60%) var(--glanz) 0 / 220% 100% no-repeat,
		linear-gradient(180deg, #d9b56c, var(--gold) 55%, #b58d47);
	color: var(--saal);
	font-family: var(--schrift-titel);
	font-size: 1rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 10px 30px -14px rgb(241 217 162 / 0.6);
	transition: background-position 0.9s var(--ease-aus), box-shadow 0.3s, transform 0.15s;
}

.knopf:hover {
	--glanz: 220%;
	color: var(--saal);
	box-shadow: 0 14px 40px -12px rgb(241 217 162 / 0.75);
}

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

.knopf .icon {
	width: 1.15em;
	height: 1.15em;
	transition: transform 0.3s var(--ease-aus);
}

.knopf:hover .icon {
	transform: translateX(3px);
}

.knopf[disabled],
.knopf[aria-busy="true"] {
	cursor: progress;
	filter: saturate(0.4) brightness(0.8);
}

.knopf-klein {
	min-height: 2.5rem;
	padding: 0.35rem 1rem;
	font-size: 0.9375rem;
}

.knopf-gross {
	min-height: 3.75rem;
	padding-inline: 1.75rem;
	font-size: 1.0625rem;
}

.knopf-voll {
	width: 100%;
}

.textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--schrift-titel);
	font-size: 1rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--gold-hell);
	padding-block: 0.4rem;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.4s var(--ease-aus), color 0.2s;
}

.textlink:hover {
	background-size: 100% 1px;
}

.textlink .icon {
	transition: transform 0.3s var(--ease-aus);
}

.textlink:hover .icon {
	transform: translateX(3px);
}

/* ==========================================================================
   Kopfleiste
   ========================================================================== */

.kopf {
	position: fixed;
	z-index: 40;
	inset: 0 0 auto;
	height: var(--kopf-hoehe);
	padding-top: env(safe-area-inset-top);
	transition: background-color 0.4s, box-shadow 0.4s;
}

.kopf.ist-fest,
body:not(.home) .kopf.ist-fest {
	background: var(--saal);
	box-shadow: 0 1px 0 var(--linie);
}

.kopf-innen {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	height: 100%;
	max-width: calc(var(--breite) + 2 * var(--rand));
	margin-inline: auto;
	padding-inline: var(--rand);
}

.kopf-marke {
	display: block;
	flex: none;
	transition: opacity 0.5s var(--ease-aus), transform 0.5s var(--ease-aus);
}

.kopf-marke img {
	width: auto;
	height: 2.75rem;
}

/* Auf der Startseite trägt das große Logo im Saal die Marke; das kleine erscheint erst beim Scrollen. */
.home .kopf:not(.ist-fest) .kopf-marke {
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
}

.kopf-nav .menue {
	display: flex;
	gap: clamp(1rem, 2vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kopf-nav .menue a {
	display: block;
	padding-block: 0.5rem;
	color: var(--elfenbein);
	font-family: var(--schrift-titel);
	font-size: 0.9375rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	background: linear-gradient(var(--gold), var(--gold)) 50% 100% / 0 1px no-repeat;
	transition: color 0.2s, background-size 0.4s var(--ease-aus);
}

.kopf-nav .menue a:hover,
.kopf-nav .current-menu-item > a,
.kopf-nav .current_page_item > a {
	color: var(--gold-hell);
	background-size: 100% 1px;
}

.menue-fuss {
	display: none;
}

.kopf-aktionen {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

.menue-knopf {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.25rem 0.9rem;
	border: 1px solid var(--linie-stark);
	border-radius: 2px;
	background: rgb(7 6 10 / 0.4);
	color: var(--gold-hell);
	font-family: var(--schrift-titel);
	font-size: 0.9375rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.menue-knopf > span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.menue-knopf-zu,
.menue-offen .menue-knopf-auf {
	display: none !important;
}

.menue-offen .menue-knopf-zu {
	display: inline-flex !important;
}

@media (max-width: 74.99rem) {
	/* Der Hintergrund deckt den ganzen Bildschirm (::before der Kopfleiste); die
	   Liste scrollt nur unterhalb der Kopfleiste, damit nichts hinter Logo und
	   „Schließen“ durchläuft. „safe center“: passt die Liste nicht, beginnt sie
	   oben, statt oben abgeschnitten zu werden. */
	.kopf::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -2;
		background:
			radial-gradient(60% 50% at 80% 0%, rgb(178 58 142 / 0.28), transparent 70%),
			radial-gradient(50% 45% at 10% 10%, rgb(47 168 200 / 0.2), transparent 70%),
			var(--saal);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s var(--ease-aus), visibility 0s 0.35s;
		pointer-events: none;
	}

	.kopf-nav {
		position: fixed;
		inset: calc(var(--kopf-hoehe) + env(safe-area-inset-top)) 0 0;
		z-index: -1;
		display: flex;
		flex-direction: column;
		justify-content: safe center;
		gap: 2.5rem;
		padding: 1.5rem var(--rand) 3rem;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s var(--ease-aus), visibility 0s 0.35s;
		overflow-y: auto;
		overscroll-behavior: contain;
		/* Beim Scrollen weich unter der Kopfleiste verschwinden statt hart abgeschnitten. */
		-webkit-mask-image: linear-gradient(transparent, #000 1.5rem);
		mask-image: linear-gradient(transparent, #000 1.5rem);
	}

	.menue-offen .kopf::before,
	.menue-offen .kopf-nav {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.35s var(--ease-aus);
	}

	.kopf-nav .menue {
		flex-direction: column;
		gap: 0.25rem;
	}

	.kopf-nav .menue a {
		font-size: clamp(1.5rem, 6vw, 2.25rem);
		letter-spacing: 0.08em;
		padding-block: 0.6rem;
		background-position: 0 100%;
	}

	.menue-fuss {
		display: block;
		color: var(--elfenbein-2);
		font-size: 1.125rem;
		padding-top: 1.5rem;
		border-top: 1px solid var(--linie);
	}

	.menue-offen .kopf {
		background: transparent !important;
		box-shadow: none !important;
	}

	.menue-offen .kopf-marke {
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
	}

	.menue-offen {
		overflow: hidden;
	}
}

@media (min-width: 75rem) {
	.menue-knopf {
		display: none;
	}

	.kopf-nav {
		margin-left: auto;
	}

	.kopf-aktionen {
		margin-left: 0.5rem;
	}
}

/* ==========================================================================
   Der Saal (erstes Bild der Startseite)
   ========================================================================== */

.saal {
	position: relative;
	isolation: isolate;
	display: grid;
	min-height: 100vh;
	min-height: 100svh;
	padding: calc(var(--kopf-hoehe) + clamp(1.5rem, 5vh, 3.5rem)) var(--rand) clamp(4.5rem, 9vh, 6.5rem);
	overflow: hidden;
	background: var(--saal);
}

.saal-buehne {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.saal-foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% 35%;
	filter: brightness(0.4) saturate(1.05);
}

.js .saal-foto {
	animation: saal-geht-an 2.4s var(--ease-licht) both;
}

@keyframes saal-geht-an {
	from {
		filter: brightness(0.08) saturate(0.6);
	}
}

.saal-licht,
.saal-licht-ersatz {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	mix-blend-mode: screen;
}

.saal-licht {
	opacity: 0;
	transition: opacity 1.6s var(--ease-licht);
}

.licht-an .saal-licht {
	opacity: 1;
}

/* Statisches Licht für Geräte ohne WebGL, ohne JavaScript oder mit reduzierter Bewegung. */
.saal-licht-ersatz {
	background:
		radial-gradient(28% 42% at 64% 74%, rgb(255 226 170 / 0.28), transparent 70%),
		conic-gradient(from 168deg at 22% -6%, transparent 0deg, rgb(178 58 142 / 0.5) 8deg, transparent 18deg),
		conic-gradient(from 186deg at 78% -6%, transparent 0deg, rgb(47 168 200 / 0.45) 9deg, transparent 19deg),
		conic-gradient(from 176deg at 50% -8%, transparent 0deg, rgb(160 90 220 / 0.32) 7deg, transparent 15deg);
	filter: blur(14px);
	opacity: 0.85;
	transition: opacity 1.2s;
}

/* Mit JavaScript bleibt es aus, bis licht.js entscheidet: bewegtes Licht oder
   (Klasse .licht-ersatz) dieses statische. So überblenden sich nie beide. */
.js .saal-licht-ersatz {
	opacity: 0;
}

.js .licht-ersatz .saal-licht-ersatz {
	opacity: 0.85;
}

.saal-schleier {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgb(7 6 10 / 0.92) 0%, rgb(7 6 10 / 0.7) 36%, rgb(7 6 10 / 0.38) 62%, rgb(7 6 10 / 0.55) 100%),
		linear-gradient(0deg, var(--saal) 0%, rgb(7 6 10 / 0) 34%),
		linear-gradient(180deg, rgb(7 6 10 / 0.7) 0%, rgb(7 6 10 / 0) 22%);
}

.saal-inhalt {
	display: grid;
	gap: clamp(1.25rem, 3vh, 2.25rem);
	align-content: end;
	width: 100%;
	max-width: var(--breite);
	margin-inline: auto;
}

.saal-titel {
	margin: 0;
	font-size: 1rem;
}

.logo {
	container-type: inline-size;
	display: block;
	position: relative;
}

.logo-bild {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 6px 24px rgb(0 0 0 / 0.55));
}

.logo-saal {
	width: min(88vw, 30rem);
}

/* Der Zusatz sitzt wie auf der Einladung rechts unter „ala“ zwischen zwei Strichen. */
.logo-zusatz {
	display: flex;
	align-items: center;
	gap: 2.4cqi;
	margin: -4.5cqi 0 0 26%;
	width: 70%;
	color: #e2c48a;
	font-family: var(--schrift-titel);
	font-size: max(1rem, 3.6cqi);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
	text-shadow: 0 2px 12px rgb(0 0 0 / 0.6);
}

.logo-strich {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, rgb(201 162 90 / 0.2), var(--gold));
}

.logo-strich:last-child {
	background: linear-gradient(90deg, var(--gold), rgb(201 162 90 / 0.2));
}

.saal-daten {
	display: grid;
	gap: 0.6rem;
	max-width: 40rem;
}

.saal-datum {
	font-family: var(--schrift-titel);
	font-size: clamp(1.75rem, 1rem + 2.5vw, 3.1rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.08;
	text-wrap: balance;
}

.saal-ort {
	font-family: var(--schrift-titel);
	font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.65rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--elfenbein);
	padding-bottom: 0.6rem;
}

.saal-fakten {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0.85rem 0 0;
	list-style: none;
	border-top: 1px solid var(--linie);
	color: var(--elfenbein-2);
	font-size: 1.0625rem;
	max-width: 34rem;
}

.saal-fakten li {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
}

.saal-fakten .saal-countdown {
	color: var(--elfenbein);
}

.saal-fakten .icon {
	margin-top: 0.15em;
	color: var(--gold-tief);
}

/* Kartenwähler: kein Kasten, sondern der Fleck, auf dem der Verfolgerspot landet. */
.kartenwahl {
	position: relative;
	display: grid;
	gap: 1rem;
	width: 100%;
	max-width: 26rem;
	margin: 0;
}

.kartenwahl::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -30% -25% -25%;
	background: radial-gradient(closest-side, rgb(255 228 176 / 0.12), transparent);
	pointer-events: none;
}

.zaehler {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.zaehler legend {
	float: left;
	width: 100%;
	margin-bottom: 0.6rem;
	color: var(--elfenbein-2);
	font-size: 1.0625rem;
}

.zaehler-knopf {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	flex: none;
	border: 1px solid rgb(201 162 90 / 0.65);
	border-radius: 50%;
	background: rgb(7 6 10 / 0.5);
	color: var(--gold-hell);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, transform 0.12s;
}

.zaehler-knopf:hover {
	background: rgb(201 162 90 / 0.16);
	border-color: var(--gold-hell);
}

.zaehler-knopf:active {
	transform: scale(0.95);
}

.zaehler-knopf:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.zaehler-knopf .icon {
	width: 1.4rem;
	height: 1.4rem;
}

.zaehler-zahl {
	width: 4.5rem;
	height: 3.5rem;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--linie-stark);
	background: transparent;
	color: var(--elfenbein);
	font-family: var(--schrift-titel);
	font-size: 2.5rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}

.zaehler-zahl::-webkit-inner-spin-button,
.zaehler-zahl::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.zaehler-zahl:focus-visible {
	outline: none;
	border-bottom-color: var(--gold-hell);
	box-shadow: 0 2px 0 var(--gold-hell);
}

.kartenwahl-summe {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--linie);
	color: var(--elfenbein-2);
}

.kartenwahl-summe strong,
.zaehler-summe strong {
	color: var(--elfenbein);
	font-family: var(--schrift-titel);
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.saal-danach {
	max-width: 36rem;
}

.saal-danke {
	font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.saal-danke-text {
	color: var(--elfenbein-2);
	font-size: 1.1875rem;
	max-width: 32rem;
}

.naechster-termin {
	font-family: var(--schrift-titel);
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.1;
}

.naechster-ort {
	color: var(--elfenbein-2);
	font-size: 1.1875rem;
	padding-bottom: 0.5rem;
}

.saal-weiter {
	position: absolute;
	left: 50%;
	bottom: 1.25rem;
	translate: -50% 0;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	color: var(--elfenbein-2);
	font-family: var(--schrift-titel);
	font-size: 1rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
}

.saal-weiter .icon {
	width: 1.1rem;
	height: 1.1rem;
	animation: weiter 2.6s var(--ease-licht) infinite;
}

@keyframes weiter {
	0%,
	100% {
		transform: translateY(0);
		opacity: 0.5;
	}
	50% {
		transform: translateY(5px);
		opacity: 1;
	}
}

@media (min-width: 60rem) {
	.saal-inhalt {
		grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
		grid-template-rows: 1fr auto;
		column-gap: clamp(2rem, 6vw, 6rem);
		align-items: end;
	}

	.saal-titel {
		grid-column: 1;
		align-self: end;
	}

	.saal-daten {
		grid-column: 1;
		grid-row: 2;
	}

	.kartenwahl {
		grid-column: 2;
		grid-row: 1 / 3;
		align-self: end;
	}

	.logo-saal {
		/* Breite folgt auch der Fensterhöhe, damit Datum, Kartenwahl und Knopf immer im ersten Bild stehen. */
		width: min(44vw, 44rem, calc((100svh - 30rem) * 1.58));
		min-width: 24rem;
	}

	.saal-weiter {
		display: flex;
	}

	.saal-datum {
		font-size: clamp(1.9rem, 1.1rem + 1.6vw, 2.6rem);
	}
}

@media (max-width: 59.99rem) {
	.saal {
		padding-top: calc(var(--kopf-hoehe) + 1rem);
		padding-bottom: 2.5rem;
	}

	.saal-schleier {
		background:
			linear-gradient(180deg, rgb(7 6 10 / 0.75) 0%, rgb(7 6 10 / 0.35) 30%, rgb(7 6 10 / 0.75) 55%, var(--saal) 92%);
	}

	.saal-foto {
		object-position: 62% 30%;
	}

	.saal-inhalt {
		gap: 1.5rem;
	}

	.kartenwahl {
		max-width: none;
	}

	.zaehler-knopf {
		width: 3.25rem;
		height: 3.25rem;
	}
}

/* ==========================================================================
   Abschnitte: jeder wird beim Hineinscrollen „angeleuchtet“
   ========================================================================== */

.abschnitt {
	position: relative;
	isolation: isolate;
	padding-block: clamp(4.5rem, 9vw, 8.5rem);
	overflow-x: clip;
}

.abschnitt[data-anleuchten]::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 0 auto;
	height: min(56rem, 100%);
	background:
		conic-gradient(from var(--licht-winkel, 158deg) at var(--licht-x, 12%) -12%, transparent 0deg, var(--licht-farbe, rgb(47 168 200 / 0.26)) 7deg, transparent 16deg),
		radial-gradient(30% 40% at var(--licht-x, 12%) 0%, var(--licht-farbe, rgb(47 168 200 / 0.26)), transparent 70%);
	filter: blur(16px);
	-webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
	mask-image: linear-gradient(180deg, #000 40%, transparent);
	pointer-events: none;
	transition: opacity 1.6s var(--ease-licht);
}

.js .abschnitt[data-anleuchten]:not(.ist-an)::before {
	opacity: 0;
}


.abschnitt:nth-of-type(even)[data-anleuchten] {
	--licht-x: 88%;
	--licht-winkel: 186deg;
	--licht-farbe: rgb(178 58 142 / 0.24);
}

.abschnitt + .abschnitt {
	border-top: 1px solid var(--linie);
}

/* Startseite Bühnenlicht → Rückblick und Gala-Seite Zeitleiste → Ausrichter: keine Linie; der Strahl des Rückblicks taucht schon
   im freien Raum unter den Bildern darüber auf und fällt auf die Überschrift. */
.gala-akte + .impressionen,
.gala-chronik + .gala-vereine {
	--licht-vorlauf: clamp(4rem, 8vw, 8rem);
	border-top: 0;
}

/* Gala-Seite, Kursaal → Die nächste Gala (ohne Linie): der pinke Scheinwerfer
   steht am rechten Seitenrand und strahlt schräg nach links unten. */
.gala-kursaal + .gala-naechste {
	--licht-vorlauf: clamp(4rem, 8vw, 8rem);
}

.gala-kursaal + .gala-naechste[data-anleuchten]::before {
	top: calc(-1 * var(--licht-vorlauf) - 6rem);
	height: calc(min(56rem, 100%) + var(--licht-vorlauf) + 6rem);
	background:
		conic-gradient(from 232deg at 102% 10rem, transparent 0deg, var(--licht-farbe, rgb(178 58 142 / 0.24)) 8deg, transparent 14deg),
		radial-gradient(14rem 11rem at 102% 10rem, var(--licht-farbe, rgb(178 58 142 / 0.24)), transparent 70%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7rem, #000 60%, transparent 92%);
	mask-image: linear-gradient(180deg, transparent 0, #000 7rem, #000 60%, transparent 92%);
}

/* Der Scheinwerfer steht am linken Seitenrand und strahlt schräg nach unten
   über die Überschrift in den Abschnitt. */
.gala-akte + .impressionen[data-anleuchten]::before,
.gala-chronik + .gala-vereine[data-anleuchten]::before {
	top: calc(-1 * var(--licht-vorlauf) - 6rem);
	height: calc(min(56rem, 100%) + var(--licht-vorlauf) + 6rem);
	background:
		conic-gradient(from 114deg at -2% 10rem, transparent 0deg, var(--licht-farbe, rgb(47 168 200 / 0.26)) 6deg, transparent 14deg),
		radial-gradient(14rem 11rem at -2% 10rem, var(--licht-farbe, rgb(47 168 200 / 0.26)), transparent 70%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7rem, #000 60%, transparent 92%);
	mask-image: linear-gradient(180deg, transparent 0, #000 7rem, #000 60%, transparent 92%);
}

.titel {
	font-size: clamp(1.85rem, 1.15rem + 2.6vw, 3.25rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--elfenbein);
}

.einleitung {
	color: var(--elfenbein-2);
	font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.375rem);
	line-height: 1.55;
	max-width: 38rem;
}

.abschnitt-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.bildzeile {
	padding-top: 0.85rem;
	color: var(--elfenbein-3);
	font-size: 1rem;
	font-style: italic;
}

/* Eingebettete Videos: erst nach Klick laden ---------------------------------- */
.video-zwei-klick {
	margin: 2rem 0;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--linie-stark);
	background:
		radial-gradient(60% 70% at 50% 40%, rgb(255 222 165 / 0.07), transparent 75%),
		var(--saal-hoch);
}

.video-zwei-klick-feld {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 1rem;
	height: 100%;
	padding: 1.5rem;
	text-align: center;
}

.video-zwei-klick-feld p {
	max-width: 34rem;
	color: var(--elfenbein-2);
	font-size: 1rem;
}

.video-zwei-klick iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Atempause „Tradition trifft Licht“ ------------------------------------------
   Ohne JavaScript: ein ruhiger, vollständig lesbarer Satz. Mit JavaScript
   bleibt die Bühne beim Scrollen stehen (sticky). seite.js ändert pro Bild
   nur opacity und transform; alles Weiche (Unschärfe, Schein, Kegelränder)
   ist fertig gezeichnet und wird nie neu berechnet. */

.atempause {
	position: relative;
	isolation: isolate;
	text-align: center;
}

.atempause-buehne {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 70vh;
	padding: clamp(5rem, 12vw, 9rem) var(--rand);
	/* Seitlich abgeschnitten, nach unten offen: Die Strahlen laufen ohne Kante
	   in den nächsten Abschnitt weiter und verlöschen dort weich. */
	overflow-x: clip;
	overflow-y: visible;
}

.atempause-satz {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 0.15em;
	max-width: 24ch;
	margin: 0 auto;
	font-family: var(--schrift-titel);
	font-size: clamp(2rem, 1rem + 3.6vw, 4.25rem);
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--elfenbein);
	text-wrap: balance;
}

.atempause-tradition {
	position: relative;
	color: var(--gold-hell);
}

.atempause-anders {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 0.28em;
}

.atempause-wort {
	position: relative;
	display: inline-block;
}

.atempause-licht {
	display: none;
}

/* Moving Heads: oben an der Traverse, nur sichtbar, solange JS sie steuert. */
.atempause-kopf {
	position: absolute;
	z-index: 1;
	top: 0;
	width: 0;
	height: 0;
	display: none;
}

.atempause-kopf-links {
	left: 18%;
}

.atempause-kopf-rechts {
	left: 82%;
}

/* Der Kegel ist ein schmaler, oben spitzer Lichtstreifen; seine weichen Ränder
   stecken im Verlauf selbst, nicht in einem Weichzeichner. */
.atempause-kegel {
	position: absolute;
	top: 0;
	left: -20vmax;
	width: 40vmax;
	height: 130vmax;
	transform-origin: 50% 0;
	background: conic-gradient(from 174deg at 50% 0, transparent 0deg, var(--kopf-farbe) 4deg, var(--kopf-kern) 6deg, var(--kopf-farbe) 8deg, transparent 12deg);
	/* Voll bis knapp unter die Bühnenmitte, dann langsam aus, gut eine
	   halbe Bildschirmhöhe in den nächsten Abschnitt hinein. */
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 55vh, transparent 150vh);
	mask-image: linear-gradient(180deg, #000 0, #000 55vh, transparent 150vh);
	opacity: 0;
	will-change: transform, opacity;
	pointer-events: none;
}

.atempause-kopf-links {
	--kopf-farbe: rgb(178 58 142 / 0.22);
	--kopf-kern: rgb(220 110 190 / 0.4);
}

.atempause-kopf-rechts {
	--kopf-farbe: rgb(47 168 200 / 0.18);
	--kopf-kern: rgb(120 210 235 / 0.38);
}

/* Mit JavaScript: Bühne bleibt stehen, der Satz entsteht im Takt des Scrollens. */
/* Kurze Haltestrecke: stehen bleibt der Abschnitt nur für die Lichtstrahlen. */
.js .atempause.ist-bewegt {
	height: 165vh;
}

.js .atempause.ist-bewegt .atempause-buehne {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	min-height: 0;
	padding-block: 0;
}

.js .atempause.ist-bewegt .atempause-kopf {
	display: block;
}

/* Tradition: eine fertig weichgezeichnete Kopie blendet in die scharfe Schrift über. */
.atempause-unscharf {
	display: none;
}

.js .atempause.ist-bewegt .atempause-unscharf {
	display: block;
	position: absolute;
	inset: 0;
	filter: blur(7px);
	transform: scaleX(1.12);
	opacity: 0;
	will-change: opacity;
}

.js .atempause.ist-bewegt .atempause-scharf {
	display: inline-block;
	opacity: 0;
	text-shadow: 0 0 30px rgb(255 214 150 / 0.25);
	will-change: opacity, transform;
}

/* Wörter: unsichtbar, bis ein Kegel sie trifft. Die Grundschrift hält nur den Platz,
   sichtbar wird allein die fertig leuchtende Kopie darüber. */
.js .atempause.ist-bewegt .atempause-wort {
	color: transparent;
}

.js .atempause.ist-bewegt .atempause-licht {
	display: block;
	position: absolute;
	inset: 0;
	color: var(--elfenbein);
	text-shadow:
		0 0 22px rgb(var(--wort-farbe, 178 58 142) / 0.6),
		0 0 60px rgb(var(--wort-farbe, 178 58 142) / 0.35);
	opacity: 0;
	will-change: opacity, transform;
}

.js .atempause.ist-bewegt .atempause-wort:nth-child(even) {
	--wort-farbe: 47 168 200;
}

/* Schlussakkord: über dem letzten Wort ein warmer Blitz, ebenfalls nur ein- und ausgeblendet. */
.atempause-blitz {
	display: none;
}

.js .atempause.ist-bewegt .atempause-blitz {
	display: block;
	position: absolute;
	inset: 0;
	color: #fff4dc;
	text-shadow: 0 0 40px rgb(255 230 190 / 0.75), 0 0 90px rgb(255 214 150 / 0.4);
	opacity: 0;
	will-change: opacity;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .atempause.ist-bewegt {
		height: auto;
	}

	.js .atempause.ist-bewegt .atempause-buehne {
		position: relative;
		height: auto;
		min-height: 70vh;
		padding-block: clamp(5rem, 12vw, 9rem);
	}
}

/* Galerie ----------------------------------------------------------------------
   Jahrgangsübersicht mit Titelbildern, je Jahrgang ein Kontaktbogen in echten
   Seitenverhältnissen und eine Lightbox im Saalschwarz. */

.galerie-kopf .einleitung {
	max-width: 44rem;
}

/* Ruhiger Zweitknopf: goldene Kontur statt Goldfläche. */
.knopf-zart {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 3rem;
	padding: 0.5rem 1.4rem;
	border: 1px solid rgb(201 162 90 / 0.7);
	border-radius: 2px;
	background: transparent;
	color: var(--gold-hell);
	font-family: var(--schrift-titel);
	font-size: 0.9375rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.knopf-zart:hover {
	background: rgb(201 162 90 / 0.12);
	border-color: var(--gold-hell);
	color: #fff4dc;
}

.knopf-zart .icon {
	width: 1.1em;
	height: 1.1em;
}

/* Kopf „Bilderwand“: drei Reihen echter Fotos ziehen langsam gegeneinander,
   gedimmt wie der Saal vor Beginn; ein Spot von oben liegt auf dem Titel.
   Bewegt werden nur transform-Werte; bei reduzierter Bewegung steht die Wand. */
.galerie-wand {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: min(78vh, 46rem);
	padding: calc(var(--kopf-hoehe) + 2rem) 0 3rem;
	overflow: hidden;
	background: var(--saal-tief);
}

.galerie-wand-bilder {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: grid;
	align-content: center;
	gap: clamp(0.5rem, 1vw, 0.75rem);
	transform: rotate(-4deg) scale(1.12);
}

.galerie-wand-reihe {
	overflow: hidden;
}

.galerie-wand-spur {
	display: flex;
	gap: clamp(0.5rem, 1vw, 0.75rem);
	width: max-content;
	animation: wand-ziehen var(--dauer, 160s) linear infinite;
}

.galerie-wand-reihe:nth-child(2) .galerie-wand-spur {
	animation-direction: reverse;
}

.galerie-wand-spur img {
	flex: none;
	width: auto;
	height: clamp(7rem, 5rem + 7vw, 12rem);
	object-fit: cover;
	filter: brightness(0.36) saturate(0.75);
}

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

/* Vignette rundum, warmer Spot von oben auf die Mitte. */
.galerie-wand-licht {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(42% 58% at 50% 46%, rgb(255 226 170 / 0.16), transparent 70%),
		conic-gradient(from 168deg at 50% -18%, transparent 0deg, rgb(255 226 170 / 0.12) 10deg, rgb(255 226 170 / 0.18) 12deg, rgb(255 226 170 / 0.12) 14deg, transparent 24deg),
		radial-gradient(120% 90% at 50% 50%, transparent 30%, rgb(4 3 6 / 0.85) 78%),
		linear-gradient(180deg, rgb(4 3 6 / 0.7), transparent 22%, transparent 70%, var(--saal) 100%);
	pointer-events: none;
}

.galerie-wand-inhalt {
	display: grid;
	justify-items: center;
	gap: 1.25rem;
	text-align: center;
}

.galerie-wand-titel {
	font-size: clamp(3rem, 1.6rem + 6vw, 7rem);
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--elfenbein);
	text-shadow: 0 0 40px rgb(7 6 10 / 0.9), 0 0 2px rgb(7 6 10 / 0.6);
}

/* Seitentitel: Die Buchstaben kommen von weiter außen zusammen (sg_titel_buchstaben,
   in der Gala-Seite seite.js). Bewegt wird nur transform, damit es flüssig läuft;
   Wörter bleiben zusammen. Dauer und Verzögerung setzt der jeweilige Titel. */
.titel-wort {
	white-space: nowrap;
}

.titel-zeichen {
	display: inline-block;
	animation: wand-titel var(--titel-dauer, 1.6s) var(--ease-aus) var(--titel-start, 0.15s) both;
}

.galerie-wand-titel {
	--titel-start: 0.2s;
}

@keyframes wand-titel {
	from {
		opacity: 0;
		transform: translateX(calc(var(--v) * 0.18em));
	}
}

.galerie-wand-inhalt .einleitung {
	max-width: 34rem;
	color: var(--elfenbein);
	text-shadow: 0 0 24px rgb(7 6 10 / 0.95);
}

/* Die Zahlen in gerahmten Feldern wie beim Countdown, Wert oben, Bezeichnung darunter. */
.galerie-wand-zahlen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(0.6rem, 1.5vw, 1rem);
	margin: 1rem 0 0;
}

.galerie-wand-zahlen > div {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 0.15rem;
	min-width: clamp(6.5rem, 5rem + 4vw, 8.5rem);
	padding: 0.9rem 1rem 0.8rem;
	border: 1px solid var(--linie-stark);
	background: rgb(7 6 10 / 0.6);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.galerie-wand-zahlen dd {
	margin: 0;
	font-family: var(--schrift-titel);
	font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
	line-height: 1;
	color: var(--elfenbein);
	font-variant-numeric: tabular-nums;
}

.galerie-wand-zahlen dt {
	font-family: var(--schrift-titel);
	font-size: 0.8125rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--elfenbein-2);
}

@media (max-width: 39.99rem) {
	.galerie-wand {
		min-height: 34rem;
	}

	/* Schmal: alle Felder in einer Reihe, gleich breit. */
	.galerie-wand-zahlen {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		width: 100%;
		max-width: 22rem;
	}

	.galerie-wand-zahlen > div {
		min-width: 0;
		padding-inline: 0.4rem;
	}

	.galerie-wand-zahlen dt {
		font-size: 0.75rem;
		letter-spacing: 0.14em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.galerie-wand-spur,
	.titel-zeichen {
		animation: none;
	}
}

/* Übersicht: das neueste Jahr groß, die übrigen als Reihe von Titelbildern. */
.galerie-uebersicht {
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
}

.galerie-cover-liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.galerie-cover-1 {
	grid-column: 1 / -1;
}

.galerie-cover a {
	position: relative;
	display: block;
	height: 100%;
	min-height: 11rem;
	overflow: hidden;
	background: var(--saal-hoch);
	color: var(--elfenbein);
	text-decoration: none;
	isolation: isolate;
}

.galerie-cover-bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bildausschnitt aus inc/galerie.php (sg_galerie_titelbilder), sonst mittig. */
	object-position: var(--lage, 50% 50%);
	transform: scale(var(--zoom, 1));
	transform-origin: var(--mitte, 50% 50%);
	filter: brightness(0.62) saturate(0.9);
	transition: filter 0.6s var(--ease-aus), transform 1.2s var(--ease-aus);
}

/* Lesbarkeit: dunkler Verlauf von unten, Text unten links. */
.galerie-cover a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgb(7 6 10 / 0.88) 0%, rgb(7 6 10 / 0.35) 45%, transparent 75%);
	pointer-events: none;
}

.galerie-cover a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border: 1px solid transparent;
	transition: border-color 0.4s;
	pointer-events: none;
}

.galerie-cover a:hover .galerie-cover-bild,
.galerie-cover a:focus-visible .galerie-cover-bild {
	filter: brightness(0.9) saturate(1);
	transform: scale(calc(var(--zoom, 1) * 1.03));
}

.galerie-cover a:hover::before,
.galerie-cover a:focus-visible::before {
	border-color: var(--gold);
}

.galerie-cover a:focus-visible {
	outline-offset: 4px;
}

.galerie-cover-text {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	gap: 0.2rem;
	padding: clamp(0.9rem, 2vw, 1.4rem);
}

.galerie-cover-jahr {
	font-family: var(--schrift-titel);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	line-height: 1;
	letter-spacing: 0.02em;
	font-variant-numeric: lining-nums;
}

.galerie-cover-1 .galerie-cover-jahr {
	font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.galerie-cover-meta {
	color: var(--elfenbein);
	font-size: 1rem;
	line-height: 1.35;
}

.galerie-cover-umfang {
	color: var(--gold-hell);
	font-size: 0.9375rem;
	font-style: italic;
}

@media (max-width: 39.99rem) {
	.galerie-cover:not(.galerie-cover-1) .galerie-cover-meta {
		display: none;
	}
}

@media (min-width: 60rem) {
	.galerie-cover-liste {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-auto-rows: clamp(10rem, 13vw, 13rem);
	}

	.galerie-cover {
		grid-column: span 3;
	}

	.galerie-cover-1 {
		grid-column: span 6;
		grid-row: span 2;
	}

	/* Ab dem sechsten Jahrgang drei pro Reihe (Reihen beginnen bei 6, 9, 12 …);
	   ein Rest von einem oder zwei Jahrgängen füllt seine Reihe ganz. */
	.galerie-cover:nth-child(n + 6) {
		grid-column: span 4;
	}

	.galerie-cover:nth-child(n + 6):nth-child(3n + 6):last-child {
		grid-column: span 12;
	}

	.galerie-cover:nth-child(n + 6):nth-child(3n + 6):nth-last-child(2),
	.galerie-cover:nth-child(n + 6):nth-child(3n + 7):last-child {
		grid-column: span 6;
	}
}

/* Schmal: zwei Spalten; bleibt am Ende einer allein, nimmt er die ganze Breite. */
@media (max-width: 59.99rem) {
	.galerie-cover:nth-child(even):last-child {
		grid-column: 1 / -1;
	}
}

/* Album ------------------------------------------------------------------- */
.galerie-album {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	scroll-margin-top: calc(var(--kopf-hoehe) + 3.5rem);
	border-top: 1px solid var(--linie);
}

.galerie-album-kopf {
	display: grid;
	gap: 0.75rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.galerie-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	color: var(--elfenbein);
	font-size: 1.1875rem;
}

.galerie-meta-umfang {
	color: var(--gold-hell);
	font-style: italic;
}

/* Bildnachweis: dezent hinter der Bildzahl */
.galerie-meta-fotos {
	color: var(--elfenbein-3);
	font-size: 0.9em;
	letter-spacing: 0.02em;
}

.galerie-meta-fotos a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--linie-stark);
	text-underline-offset: 0.2em;
	transition: color 0.2s, text-decoration-color 0.2s;
}

.galerie-meta-fotos a:hover {
	color: var(--gold-hell);
	text-decoration-color: currentColor;
}

.galerie-meta-fotos::before {
	content: "·";
	margin: 0 0.5em;
	color: var(--elfenbein-3);
}

.galerie-text {
	color: var(--elfenbein-2);
	max-width: 46rem;
}

.galerie-videos {
	display: grid;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.galerie-videos .video-zwei-klick {
	margin: 0;
}

.video-zwei-klick-feld p:first-of-type:not(.video-zwei-klick-hinweis) {
	color: var(--elfenbein);
	font-family: var(--schrift-titel);
	letter-spacing: 0.05em;
}

.video-zwei-klick-hinweis {
	font-size: 0.9375rem;
}

@media (min-width: 48rem) {
	.galerie-videos[data-anzahl="2"] {
		grid-template-columns: 1fr 1fr;
	}
}

/* Ein einzelner Film steht rechts neben Jahr und Datum statt allein in einer Zeile. */
@media (min-width: 60rem) {
	.galerie-album-oben.hat-ein-video {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: end;
		gap: clamp(2rem, 4vw, 4rem);
		margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
	}

	.hat-ein-video .galerie-album-kopf,
	.hat-ein-video .galerie-videos {
		margin-bottom: 0;
	}
}

/* Vor dem Laden: ein Bild aus dem Jahrgang, stark gedämpft, als Bühne. */
.video-zwei-klick.hat-bild {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.video-zwei-klick-bild {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.3) saturate(0.7);
}

.video-zwei-klick.hat-bild::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(70% 80% at 50% 50%, rgb(7 6 10 / 0.35), rgb(7 6 10 / 0.8));
}

.video-zwei-klick.hat-bild .video-zwei-klick-feld p {
	color: var(--elfenbein);
}

/* Kontaktbogen: Zeilen gleicher Höhe, jedes Bild in seinem eigenen Format. */
.kontaktbogen {
	--zeile: clamp(7.5rem, 4rem + 9vw, 14rem);
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kontaktbogen::after {
	content: "";
	flex-grow: 10000;
}

.kontakt {
	flex-grow: calc(var(--v) * 100);
	flex-basis: calc(var(--v) * var(--zeile));
	max-width: calc(var(--v) * var(--zeile) * 1.8);
}

.js .kontaktbogen:not(.ist-offen) .ist-weitere {
	display: none;
}

/* Gekürzt endet der Bogen mit einer vollen Reihe; der Füller würde sie stauchen. */
.js .kontaktbogen.ist-gekuerzt:not(.ist-offen)::after {
	display: none;
}

.kontakt a {
	position: relative;
	display: block;
	aspect-ratio: var(--v);
	overflow: hidden;
	background: var(--saal-hoch);
}

.kontakt img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.86);
	transition: filter 0.5s var(--ease-aus), transform 0.9s var(--ease-aus);
}

.kontakt a::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid transparent;
	transition: border-color 0.3s;
}

.kontakt a:hover img,
.kontakt a:focus-visible img {
	filter: brightness(1.04);
	transform: scale(1.03);
}

.kontakt a:hover::after {
	border-color: rgb(241 217 162 / 0.6);
}

.kontakt a:focus-visible {
	outline-offset: 3px;
}

.kontaktbogen-mehr {
	margin-top: 1.5rem;
	text-align: center;
}

.kontaktbogen.ist-offen + .kontaktbogen-mehr {
	display: none;
}

/* Lightbox: Bühne im Saalschwarz, Bild im Licht, Bedienung am Rand. */
.lichtkasten {
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgb(4 3 6 / 0.97);
	color: var(--elfenbein);
	overflow: hidden;
}

.lichtkasten::backdrop {
	background: rgb(4 3 6 / 0.9);
}

.lichtkasten[open] {
	display: grid;
	grid-template-rows: 1fr auto;
	animation: lichtkasten-auf 0.35s var(--ease-aus);
}

@keyframes lichtkasten-auf {
	from {
		opacity: 0;
	}
}

.lichtkasten-buehne {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 0;
	padding: clamp(3.5rem, 6vh, 4.5rem) clamp(0.5rem, 6vw, 6rem) 0.5rem;
	touch-action: pan-y pinch-zoom;
	background: radial-gradient(60% 55% at 50% 45%, rgb(255 222 165 / 0.06), transparent 75%);
}

.lichtkasten-bild {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.9);
	transition: opacity 0.25s var(--ease-aus), transform 0.35s var(--ease-aus);
}

.lichtkasten-bild.ist-wechsel {
	opacity: 0;
	transform: translateX(calc(var(--richtung, 1) * 1.5rem));
}

.lichtkasten-leiste {
	padding: 0.75rem clamp(1rem, 6vw, 6rem) calc(1rem + env(safe-area-inset-bottom));
	text-align: center;
}

.lichtkasten-text {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 1rem;
	font-size: 1rem;
}

.lichtkasten-titel {
	font-family: var(--schrift-titel);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lichtkasten-zaehler {
	color: var(--gold-hell);
	font-variant-numeric: tabular-nums;
}

.lichtkasten-unterschrift {
	flex-basis: 100%;
	color: var(--elfenbein-2);
	font-style: italic;
}

.lichtkasten-unterschrift:empty {
	display: none;
}

.lichtkasten-knopf {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border: 1px solid rgb(201 162 90 / 0.6);
	border-radius: 50%;
	background: rgb(7 6 10 / 0.6);
	color: var(--gold-hell);
	cursor: pointer;
	transition: background-color 0.25s, border-color 0.25s;
}

.lichtkasten-knopf:hover {
	background: rgb(201 162 90 / 0.18);
	border-color: var(--gold-hell);
}

.lichtkasten-knopf .icon {
	width: 1.35rem;
	height: 1.35rem;
}

.lichtkasten-zurueck,
.lichtkasten-vor {
	top: 50%;
	translate: 0 -50%;
}

.lichtkasten-zurueck {
	left: clamp(0.5rem, 2vw, 1.5rem);
}

.lichtkasten-vor {
	right: clamp(0.5rem, 2vw, 1.5rem);
}

.lichtkasten-zu {
	top: clamp(0.5rem, 2vw, 1.25rem);
	right: clamp(0.5rem, 2vw, 1.25rem);
}

/* Auf dem Handy wischt man; die Pfeile rücken nach unten an die Leiste. */
@media (max-width: 47.99rem) {
	.lichtkasten-zurueck,
	.lichtkasten-vor {
		top: auto;
		bottom: calc(0.6rem + env(safe-area-inset-bottom));
		translate: none;
		width: 2.9rem;
		height: 2.9rem;
	}

	.lichtkasten-leiste {
		padding-inline: 4rem;
	}
}

html.lichtkasten-offen {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.lichtkasten-bild.ist-wechsel {
		transform: none;
	}
}

/* Majestäten: Ahnengalerie ---------------------------------------------------- */

/* Kopf „Königskette“: eine Kette hängt im Bogen über die Seite, daran je Jahr
   ein Anhänger mit dem Foto der Majestäten. Die Anhänger werden beim Laden
   nacheinander eingehängt, ein Licht läuft die Kette entlang, beim Darüberfahren
   pendelt der Anhänger. Bei reduzierter Bewegung hängt alles still. */
.ahnen-kette-kopf {
	position: relative;
	isolation: isolate;
	padding: calc(var(--kopf-hoehe) + clamp(2rem, 5vw, 3.5rem)) 0 clamp(1rem, 2vw, 1.5rem);
	overflow: hidden;
	text-align: center;
}

.ahnen-kette-licht {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(50% 60% at 50% 72%, rgb(255 226 170 / 0.08), transparent 70%),
		conic-gradient(from 172deg at 50% -30%, transparent 0deg, rgb(255 226 170 / 0.1) 8deg, transparent 16deg);
	pointer-events: none;
}

.ahnen-kette-text {
	display: grid;
	justify-items: center;
	gap: 1rem;
}

.ahnen-kette-titel {
	font-size: clamp(2.6rem, 1.3rem + 5.2vw, 6rem);
	letter-spacing: 0.08em;
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--elfenbein);
}

.ahnen-kette-text .einleitung {
	max-width: 36rem;
}

.ahnen-kette {
	--bogen: clamp(4.5rem, 2rem + 4.5vw, 8.5rem);
	--anhaenger: clamp(4.75rem, 2rem + 6.5vw, 8.25rem);
	margin-top: clamp(1rem, 3vw, 2rem);
	overflow-x: auto;
	scrollbar-width: none;
}

.ahnen-kette::-webkit-scrollbar {
	display: none;
}

.ahnen-kette-buehne {
	position: relative;
	width: min(100%, calc(var(--breite) + 2 * var(--rand)));
	min-width: calc(var(--n) * (var(--anhaenger) + 0.5rem) + 1rem);
	height: calc(var(--bogen) * 0.55 + var(--anhaenger) + 4.5rem);
	margin-inline: auto;
}

.ahnen-kette-linie {
	position: absolute;
	inset: 0 0 auto;
	width: 100%;
	height: calc(var(--bogen) * 1.0);
	overflow: visible;
	animation: kette-erscheint 1.2s var(--ease-licht) both;
}

.ahnen-kette-linie path {
	fill: none;
	stroke: rgb(241 217 162 / 0.42);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

/* Die Glieder: dieselbe Linie gestrichelt und breiter darübergelegt. */
.ahnen-kette-linie .ahnen-kette-glieder {
	stroke: rgb(241 217 162 / 0.55);
	stroke-width: 4;
	stroke-dasharray: 2 7;
	stroke-linecap: round;
}

@keyframes kette-erscheint {
	from {
		opacity: 0;
	}
}

.ahnen-kette-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ahnen-anhaenger {
	position: absolute;
	left: var(--x);
	top: calc(var(--y) * var(--bogen) - 2px);
	translate: -50% 0;
	animation: anhaengen 1.1s var(--ease-aus) calc(0.3s + var(--i) * 0.09s) backwards;
}

/* Die Öse: ein kurzes Stück vom Bogen zum Anhänger. */
.ahnen-anhaenger::before {
	content: "";
	display: block;
	width: 1px;
	height: 0.9rem;
	margin-inline: auto;
	background: rgb(241 217 162 / 0.5);
}

@keyframes anhaengen {
	0% {
		opacity: 0;
		transform: translateY(-1.5rem) rotate(-7deg);
	}
	55% {
		opacity: 1;
		transform: translateY(0) rotate(4deg);
	}
	78% {
		transform: rotate(-1.5deg);
	}
	100% {
		transform: none;
	}
}

.ahnen-anhaenger-link {
	display: grid;
	justify-items: center;
	gap: 0.55rem;
	color: var(--elfenbein-2);
	text-decoration: none;
	transform-origin: 50% -0.9rem;
	/* Schatten hier statt am Wappen, sonst schneidet die Maske ihn ab. */
	filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.6));
}

/* Wappenschild: Die Fläche in Randfarbe trägt die Form, das Foto liegt mit
   gleicher Form 1,5 px kleiner darin; so entsteht ein feiner Rand rundum. */
.ahnen-anhaenger-bild,
.ahnen-anhaenger-bild img {
	-webkit-mask: var(--wappen) center / 100% 100% no-repeat;
	mask: var(--wappen) center / 100% 100% no-repeat;
}

.ahnen-anhaenger-bild {
	--wappen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V56C100 88 76 106 50 120C24 106 0 88 0 56Z'/%3E%3C/svg%3E");
	display: block;
	width: calc(var(--anhaenger) * 0.84);
	height: var(--anhaenger);
	padding: 1.5px;
	background: var(--linie-stark);
	transition: background-color 0.3s;
}

.ahnen-anhaenger-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
	filter: brightness(0.82) saturate(0.92);
	transition: filter 0.4s var(--ease-aus);
	/* Ein Licht läuft die Kette entlang: jeder Anhänger leuchtet kurz nacheinander auf. */
	animation: anhaenger-licht 1.4s var(--ease-licht) calc(1.1s + var(--i) * 0.16s) backwards;
}

@keyframes anhaenger-licht {
	0% {
		filter: brightness(0.3) saturate(0.6);
	}
	45% {
		filter: brightness(1.25) saturate(1.05);
	}
	100% {
		filter: brightness(0.82) saturate(0.92);
	}
}

.ahnen-anhaenger-jahr {
	font-family: var(--schrift-titel);
	font-size: 1.0625rem;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
	transition: color 0.3s;
}

.ahnen-anhaenger-link:hover,
.ahnen-anhaenger-link:focus-visible {
	animation: pendeln 1.6s ease-in-out;
	color: var(--gold-hell);
}

.ahnen-anhaenger-link:hover .ahnen-anhaenger-bild,
.ahnen-anhaenger-link:focus-visible .ahnen-anhaenger-bild {
	background-color: var(--gold);
}

.ahnen-anhaenger-link:hover img,
.ahnen-anhaenger-link:focus-visible img {
	filter: brightness(1.05) saturate(1);
}

.ahnen-anhaenger-link:focus-visible {
	outline: 2px solid var(--gold-hell);
	outline-offset: 4px;
}

@keyframes pendeln {
	0%,
	100% {
		transform: rotate(0);
	}
	20% {
		transform: rotate(5deg);
	}
	45% {
		transform: rotate(-3.5deg);
	}
	70% {
		transform: rotate(1.5deg);
	}
}

/* Schmal: zwei Ketten untereinander, alle Jahre ohne Wischen sichtbar. */
.ahnen-kette-linie-schmal {
	display: none;
}

@media (max-width: 59.99rem) {
	.ahnen-kette {
		--bogen: clamp(2rem, 1rem + 4vw, 3.5rem);
		--anhaenger: clamp(3.5rem, 1rem + 8.5vw, 5.25rem);
		--zeile-h: calc(var(--bogen) * 0.55 + var(--anhaenger) + 3rem);
		overflow: visible;
	}

	.ahnen-kette-buehne {
		width: auto;
		min-width: 0;
		height: calc(2 * var(--zeile-h));
		margin-inline: var(--rand);
	}

	.ahnen-kette-linie {
		display: none;
	}

	.ahnen-kette-linie-schmal {
		display: block;
		top: calc(var(--zeile) * var(--zeile-h));
	}

	.ahnen-anhaenger {
		left: var(--x2);
		top: calc(var(--zeile) * var(--zeile-h) + var(--y2) * var(--bogen) - 2px);
	}

	.ahnen-anhaenger::before {
		height: 0.7rem;
	}

	.ahnen-anhaenger-link {
		gap: 0.4rem;
		transform-origin: 50% -0.7rem;
	}

	.ahnen-anhaenger-jahr {
		font-size: 0.9375rem;
		letter-spacing: 0.08em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ahnen-kette-titel,
	.ahnen-anhaenger,
	.ahnen-anhaenger-bild img,
	.ahnen-kette-linie,
	.ahnen-anhaenger-link:hover,
	.ahnen-anhaenger-link:focus-visible {
		animation: none;
	}
}

.ahnen-kopf {
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Jahresleiste: klebt unter der Kopfleiste, das sichtbare Jahr leuchtet. */
.ahnen-jahre {
	position: sticky;
	top: var(--kopf-hoehe);
	z-index: 20;
	background: var(--saal);
	border-block: 1px solid var(--linie);
}

.ahnen-jahre-spur {
	display: flex;
	gap: clamp(1.25rem, 3vw, 2.75rem);
	max-width: calc(var(--breite) + 2 * var(--rand));
	margin-inline: auto;
	padding: 0 var(--rand);
	overflow-x: auto;
	scrollbar-width: none;
}

.ahnen-jahre-spur::-webkit-scrollbar {
	display: none;
}

.ahnen-jahre a {
	flex: none;
	padding-block: 0.95rem 0.85rem;
	font-family: var(--schrift-titel);
	font-size: 1.0625rem;
	letter-spacing: 0.12em;
	color: var(--elfenbein-2);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(var(--gold), var(--gold)) 50% 100% / 0 2px no-repeat;
	transition: color 0.3s, background-size 0.5s var(--ease-aus);
}

.ahnen-jahre a:hover,
.ahnen-jahre a[aria-current="true"] {
	color: var(--gold-hell);
	background-size: 100% 2px;
}

.ahnen-jahr {
	position: relative;
	padding-block: clamp(4rem, 8vw, 7rem);
	scroll-margin-top: calc(var(--kopf-hoehe) + 3.5rem);
}

.ahnen-jahr + .ahnen-jahr {
	border-top: 1px solid var(--linie);
}

/* Große Jahreszahl mit goldener Linie, wie ein Kapitel. */
.ahnen-zahl {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	font-family: var(--schrift-titel);
	font-size: clamp(3.25rem, 2rem + 4vw, 6rem);
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--elfenbein);
	font-variant-numeric: lining-nums;
}

.ahnen-zahl::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--gold), transparent);
}

/* Foto im Doppelrahmen wie auf der Einladung; erst dunkel, dann angeleuchtet. */
.ahnen-foto {
	margin: 0;
	padding: 6px;
	border: 1px solid var(--linie-stark);
	outline: 1px solid var(--linie);
	outline-offset: 5px;
}

.ahnen-foto-rahmen {
	position: relative;
	overflow: hidden;
	background: var(--saal-hoch);
}

.ahnen-foto img {
	display: block;
	width: 100%;
	height: auto;
	filter: brightness(0.85) saturate(0.95);
	transition: filter 1.6s var(--ease-licht), transform 1.2s var(--ease-aus);
}

.js .ahnen-jahr:not(.ist-an) .ahnen-foto img {
	filter: brightness(0.25) saturate(0.6);
}

.ahnen-foto:hover img {
	transform: scale(1.02);
}

/* „Wer ist wer“: ein oder mehrere Spots auf die Stellen im Foto, der Rest
   dunkelt deutlich ab. Die Aussparungen setzt seite.js als Maske. */
.ahnen-spot {
	position: absolute;
	inset: 0;
	background: rgb(7 6 10 / 0.78);
	-webkit-mask-image: var(--spot-maske, none);
	mask-image: var(--spot-maske, none);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	opacity: 0;
	transition: opacity 0.45s var(--ease-aus);
	pointer-events: none;
}

/* Der warme Schein liegt außerhalb der Maske auf dem Foto. */
.ahnen-foto-rahmen::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--spot-licht, none);
	opacity: 0;
	transition: opacity 0.45s var(--ease-aus);
	pointer-events: none;
}

.ahnen-foto.spot-an .ahnen-foto-rahmen::after {
	opacity: 1;
}

.ahnen-foto.spot-an .ahnen-spot {
	opacity: 1;
}

.ahnen-paare {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ahnen-paar {
	display: grid;
	gap: 0.3rem;
	padding-block: 1.25rem;
	border-top: 1px solid var(--linie);
	outline: none;
	transition: background-color 0.4s;
}

.ahnen-paar[data-spot] {
	cursor: default;
}

.ahnen-paar:focus-visible {
	outline: 2px solid var(--gold-hell);
	outline-offset: 4px;
}

.ahnen-position {
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--gold-hell);
}

.ahnen-namen {
	font-family: var(--schrift-titel);
	font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem);
	letter-spacing: 0.03em;
	line-height: 1.25;
	color: var(--elfenbein);
	transition: color 0.3s;
}

.ahnen-paar[data-spot]:hover .ahnen-namen,
.ahnen-paar[data-spot]:focus-visible .ahnen-namen {
	color: var(--gold-hell);
}

.ahnen-titel {
	color: var(--elfenbein-2);
}

/* Das neueste Jahr: Foto breit, Paare nebeneinander darunter. */
.ahnen-jahr-gross .ahnen-zahl {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.ahnen-jahr-gross .ahnen-foto {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

@media (min-width: 52rem) {
	.ahnen-paare-reihe {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	}

	.ahnen-paare-reihe .ahnen-paar {
		padding-inline: clamp(1rem, 2.5vw, 2rem);
		text-align: center;
	}

	.ahnen-paare-reihe .ahnen-paar + .ahnen-paar {
		border-left: 1px solid var(--linie);
	}
}

/* Ältere Jahre: mobil Jahr, Foto, Namen; breit Foto und Namen nebeneinander,
   abwechselnd gespiegelt, die Jahreszahl über den Namen. */
.ahnen-raster {
	display: grid;
	gap: 1.75rem;
	grid-template-areas: "zahl" "foto" "paare";
}

.ahnen-raster .ahnen-zahl { grid-area: zahl; }
.ahnen-raster .ahnen-foto { grid-area: foto; }
.ahnen-raster .ahnen-paare { grid-area: paare; }

@media (min-width: 60rem) {
	.ahnen-raster {
		grid-template-columns: 7fr 5fr;
		/* Jahr und Namen gemeinsam senkrecht mittig neben dem Foto. */
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas:
			"foto ."
			"foto zahl"
			"foto paare"
			"foto .";
		column-gap: clamp(2.5rem, 5vw, 5rem);
		row-gap: 1.5rem;
	}

	.ahnen-raster .ahnen-foto {
		align-self: center;
	}

	.ahnen-raster .ahnen-paare {
		align-self: start;
	}

	.ahnen-jahr-gespiegelt .ahnen-raster {
		grid-template-columns: 5fr 7fr;
		grid-template-areas:
			". foto"
			"zahl foto"
			"paare foto"
			". foto";
	}
}

/* Bis zur nächsten Gala ------------------------------------------------------ */

.bis-gala {
	overflow: hidden;
	padding-block: clamp(5rem, 10vw, 8.5rem);
	text-align: center;
}

/* Der abgedunkelte Saal als Hintergrund, ein Kegel zieht langsam hindurch. */
.bis-gala-buehne {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.bis-gala-buehne img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	filter: brightness(0.24) saturate(0.85) blur(2px);
	transform: scale(1.04);
}

.bis-gala-buehne::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, var(--saal) 0%, rgb(7 6 10 / 0.35) 22%, rgb(7 6 10 / 0.35) 78%, var(--saal) 100%);
}

.bis-gala-kegel {
	position: absolute;
	z-index: 1;
	top: -10%;
	left: 50%;
	width: 70rem;
	height: 120%;
	margin-left: -35rem;
	background: conic-gradient(from 168deg at 50% 0, transparent 0deg, rgb(255 222 165 / 0.12) 9deg, rgb(255 222 165 / 0.16) 12deg, rgb(255 222 165 / 0.12) 15deg, transparent 24deg);
	filter: blur(10px);
	transform-origin: 50% 0;
	animation: kegel-schwenk 14s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes kegel-schwenk {
	from {
		transform: rotate(-16deg);
	}
	to {
		transform: rotate(16deg);
	}
}

.bis-gala-inhalt {
	display: grid;
	justify-items: center;
	gap: 1rem;
}

.bis-gala-termin {
	color: var(--elfenbein-2);
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
}

.bis-gala-uhr {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.6rem, 1.5vw, 1.25rem);
	width: 100%;
	max-width: 62rem;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
}

/* Ein Feld: feiner Rahmen, beim Darüberfahren fällt ein Spot hinein. */
.bis-gala-feld {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	justify-items: center;
	gap: 0.7rem;
	padding: clamp(1.4rem, 3vw, 2.4rem) 0.5rem clamp(1.2rem, 2.5vw, 2rem);
	border: 1px solid var(--linie-stark);
	border-radius: 2px;
	background: rgb(7 6 10 / 0.55);
	transition: border-color 0.5s var(--ease-aus), transform 0.5s var(--ease-aus), box-shadow 0.5s var(--ease-aus);
}

.bis-gala-feld::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		conic-gradient(from 160deg at 50% -10%, transparent 0deg, rgb(255 222 165 / 0.2) 12deg, rgb(255 222 165 / 0.2) 28deg, transparent 40deg),
		radial-gradient(60% 45% at 50% 45%, rgb(255 222 165 / 0.17), transparent 75%);
	opacity: 0;
	transition: opacity 0.6s var(--ease-aus);
}

.bis-gala-feld:hover {
	border-color: var(--gold);
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px rgb(255 214 150 / 0.45);
}

.bis-gala-feld:hover::before {
	opacity: 1;
}

/* Sekunden: unten läuft jede Sekunde eine feine Goldlinie durch. */
.bis-gala-feld-sekunden::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: linear-gradient(90deg, transparent, var(--gold-hell));
	transform-origin: 0 50%;
	animation: sekunde 1s linear infinite;
}

@keyframes sekunde {
	from {
		transform: scaleX(0);
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	to {
		transform: scaleX(1);
		opacity: 0;
	}
}

/* overflow: hidden für das Hereinrollen der Ziffern; ein Leuchten an der Zahl
   würde hier rechteckig abgeschnitten, deshalb kommt das Licht vom Feld (::before). */
.bis-gala-zahl-zeile {
	display: flex;
	align-items: baseline;
	overflow: hidden;
	line-height: 1;
	padding-top: 0.05em;
}

.bis-gala-zahl {
	display: inline-block;
	font-family: var(--schrift-titel);
	font-size: clamp(2.4rem, 1rem + 5.2vw, 5.5rem);
	line-height: 1;
	color: var(--elfenbein);
	font-variant-numeric: tabular-nums;
}

/* Wechselt eine Zahl, rollt die neue von unten herein (Klasse setzt seite.js). */
.bis-gala-zahl.rollt {
	animation: rollen 0.55s var(--ease-aus);
}

@keyframes rollen {
	from {
		transform: translateY(60%);
		opacity: 0;
		filter: blur(3px);
	}
}

.bis-gala-punkt {
	font-family: var(--schrift-titel);
	font-size: clamp(2.4rem, 1rem + 5.2vw, 5.5rem);
	line-height: 1;
	color: var(--gold);
}

.bis-gala-einheit {
	font-family: var(--schrift-titel);
	font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1.0625rem);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--elfenbein-2);
}

/* Beim ersten Hineinscrollen steigen die Felder nacheinander auf. */
.js .bis-gala:not(.ist-an) .bis-gala-feld {
	opacity: 0;
	transform: translateY(18px);
}

.js .bis-gala.ist-an .bis-gala-feld {
	transition: opacity 0.9s var(--ease-aus), transform 0.9s var(--ease-aus), border-color 0.5s var(--ease-aus), box-shadow 0.5s var(--ease-aus);
}

.js .bis-gala.ist-an .bis-gala-feld:nth-child(2) {
	transition-delay: 0.12s, 0.12s, 0s, 0s;
}

.js .bis-gala.ist-an .bis-gala-feld:nth-child(3) {
	transition-delay: 0.24s, 0.24s, 0s, 0s;
}

.js .bis-gala.ist-an .bis-gala-feld:nth-child(4) {
	transition-delay: 0.36s, 0.36s, 0s, 0s;
}

@media (max-width: 39.99rem) {
	.bis-gala-uhr {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bis-gala-zahl,
	.bis-gala-punkt {
		font-size: 3.25rem;
	}

	.bis-gala-einheit {
		letter-spacing: 0.12em;
	}
}

/* Der Abend ---------------------------------------------------------------- */

.abend-raster {
	display: grid;
	gap: 3rem;
}

.abend-text {
	display: grid;
	gap: 1.75rem;
	align-content: start;
}

.abend-ort {
	display: flex;
	gap: 0.85rem;
	font-style: normal;
	color: var(--elfenbein-2);
	padding-top: 1.5rem;
	border-top: 1px solid var(--linie);
}

.abend-ort strong {
	color: var(--elfenbein);
	font-weight: 500;
}

.abend-ort .icon {
	color: var(--gold-tief);
	margin-top: 0.2em;
}

.ablauf-zeiten,
.ablauf-punkte {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ablauf-zeiten li {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	column-gap: 1.5rem;
	align-items: baseline;
	padding-block: 1.35rem;
	border-bottom: 1px solid var(--linie);
}

.ablauf-zeiten li:first-child {
	border-top: 1px solid var(--linie);
}

.ablauf-zeit {
	grid-row: span 2;
	font-family: var(--schrift-titel);
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem);
	letter-spacing: 0.02em;
	color: var(--elfenbein);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.ablauf-titel {
	font-family: var(--schrift-titel);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--elfenbein);
}

.ablauf-text {
	color: var(--elfenbein-2);
}

.ablauf-zeiten .ablauf-text {
	grid-column: 2;
}

.ablauf-zeiten + .ablauf-punkte {
	margin-top: 2.5rem;
	border-top: 1px solid var(--linie);
}

/* „Unter anderem mit“: leitet die Programmpunkte ein und lässt Raum für Überraschungen. */
.ablauf-vorspann {
	margin-top: 2.5rem;
	padding-bottom: 0.9rem;
	color: var(--elfenbein-2);
	font-size: 1.1875rem;
	font-style: italic;
}

.ablauf-vorspann + .ablauf-punkte {
	border-top: 1px solid var(--linie);
}

.ablauf-punkte li {
	display: grid;
	gap: 0.15rem;
	padding: 1.1rem 0 1.1rem 2rem;
	border-bottom: 1px solid var(--linie);
	position: relative;
}

.ablauf-punkte li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 1.55rem;
	width: 0.55rem;
	height: 0.55rem;
	border: 1px solid var(--gold-tief);
	transform: rotate(45deg);
}

@media (min-width: 60rem) {
	.abend-raster {
		grid-template-columns: 5fr 7fr;
		gap: clamp(3rem, 7vw, 7rem);
	}

	.abend-text {
		position: sticky;
		top: calc(var(--kopf-hoehe) + 2rem);
		align-self: start;
	}
}

/* Kartenbestellung --------------------------------------------------------- */

.bestellung {
	background: linear-gradient(180deg, var(--saal) 0%, var(--saal-hoch) 100%);
}

.bestellung-raster {
	display: grid;
	gap: 3rem;
}

.bestellung-text {
	display: grid;
	gap: 1.75rem;
	align-content: start;
}

.bestellung-preis {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	color: var(--elfenbein-2);
}

.bestellung-preis-zahl {
	font-family: var(--schrift-titel);
	font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	color: var(--elfenbein);
	line-height: 1;
}

.stationen {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stationen li {
	position: relative;
	display: flex;
	gap: 1.1rem;
	padding-bottom: 1.4rem;
}

.stationen li:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 1.375rem;
	top: 2.9rem;
	bottom: 0.3rem;
	width: 1px;
	background: linear-gradient(var(--linie-stark), var(--linie));
}

.station-zahl {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border: 1px solid var(--linie-stark);
	border-radius: 50%;
	color: var(--gold-hell);
}

.station-zahl .icon {
	width: 1.2rem;
	height: 1.2rem;
}

.stationen strong {
	display: block;
	font-family: var(--schrift-titel);
	font-weight: 400;
	font-size: 1.125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--elfenbein);
}

.stationen li > span:last-child {
	color: var(--elfenbein-2);
	padding-top: 0.35rem;
}

.bestellung-hinweis {
	color: var(--elfenbein-2);
	font-size: 1.0625rem;
	max-width: 34rem;
}

/* Das Formular trägt den Doppelrahmen der gedruckten Einladung. */
.bestellung-formular {
	position: relative;
	isolation: isolate;
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
	border-top: 1px solid var(--linie-stark);
	border-bottom: 1px solid var(--linie-stark);
	scroll-margin-top: calc(var(--kopf-hoehe) + 2rem);
}

/* Der Verfolgerspot aus dem Saal steht hier auf dem Formular. */
.bestellung-formular::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -6rem -10% -2rem;
	background:
		conic-gradient(from 172deg at 62% -40%, transparent 0deg, rgb(255 226 170 / 0.07) 7deg, transparent 15deg),
		radial-gradient(55% 45% at 55% 32%, rgb(255 226 170 / 0.085), transparent 72%);
	pointer-events: none;
}

.formular {
	display: grid;
	gap: 1.5rem;
}

.feld {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.feld-reihe {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 40rem) {
	.feld-reihe {
		grid-template-columns: 1fr 1fr;
	}
}

.feld-label {
	color: var(--elfenbein);
	font-weight: 500;
	font-size: 1.0625rem;
	padding: 0;
}

.pflicht {
	margin-left: 0.4rem;
	color: var(--elfenbein-3);
	font-weight: 400;
	font-size: 0.9375rem;
	font-style: italic;
}

.eingabe {
	width: 100%;
	min-height: 3.4rem;
	padding: 0.7rem 1rem;
	border: 1px solid var(--linie-feld);
	border-radius: 2px;
	background: var(--saal-feld);
	color: var(--elfenbein);
	font: inherit;
	font-size: 1.125rem;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.eingabe::placeholder {
	color: var(--elfenbein-3);
	opacity: 1;
}

.eingabe:hover {
	border-color: rgb(239 231 214 / 0.5);
}

.eingabe:focus {
	outline: none;
	border-color: var(--gold-hell);
	box-shadow: 0 0 0 3px rgb(241 217 162 / 0.22);
	background: #1b161f;
}

.eingabe[aria-invalid="true"],
.zaehler-zahl[aria-invalid="true"] {
	border-color: var(--fehler);
}

.eingabe:-webkit-autofill {
	-webkit-text-fill-color: var(--elfenbein);
	-webkit-box-shadow: 0 0 0 100px var(--saal-feld) inset;
	caret-color: var(--gold-hell);
}

.feld-fehler,
.formular-meldung {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	color: var(--fehler);
	font-size: 1.0625rem;
}

.feld-fehler .icon,
.formular-meldung .icon {
	margin-top: 0.15em;
	width: 1.15rem;
	height: 1.15rem;
}

.formular-meldung {
	padding: 1rem 1.15rem;
	border: 1px solid rgb(255 156 138 / 0.45);
	background: rgb(255 156 138 / 0.07);
	border-radius: 2px;
}

.feld-hilfe {
	color: var(--elfenbein-3);
	font-size: 1rem;
}

.feld-falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.zaehler-formular {
	flex-wrap: wrap;
}

.zaehler-summe {
	margin-left: auto;
	color: var(--elfenbein-2);
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
}

.wahl-gruppe {
	display: grid;
	gap: 0.5rem;
}

@media (min-width: 40rem) {
	.wahl-gruppe {
		grid-template-columns: 1fr 1fr;
	}
}

.wahl {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 3.25rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--linie-feld);
	border-radius: 2px;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
	line-height: 1.3;
}

.wahl:hover {
	border-color: rgb(239 231 214 / 0.5);
}

.wahl:has(input:checked) {
	border-color: var(--gold);
	background: rgb(201 162 90 / 0.1);
}

/* „Eigene Gruppe“: Gewählt wird aus der Beschriftung ein schlichtes Eingabefeld
   in derselben Kachel – nur eine feine Linie, kein eigener Rahmen. */
.wahl-eingabe {
	display: none;
	flex: 1;
	min-width: 0;
	padding: 0.15rem 0;
	border: 0;
	border-bottom: 1px solid rgb(201 162 90 / 0.45);
	border-radius: 0;
	background: transparent;
	color: var(--elfenbein);
	font: inherit;
	line-height: 1.3;
}

.wahl-eingabe::placeholder {
	color: var(--elfenbein-3);
	opacity: 1;
}

.wahl-eingabe:focus {
	outline: 0;
	border-bottom-color: var(--gold-hell);
}

/* Falls der Browser doch automatisch ausfüllt: kein graues Feld. */
.wahl-eingabe:-webkit-autofill,
.wahl-eingabe:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--elfenbein);
	box-shadow: 0 0 0 100px #1b1712 inset;
	transition: background-color 9999s;
}

.wahl-eingabe[aria-invalid="true"] {
	border-bottom-color: var(--fehler, #e08a7a);
}

.wahl-eigene:has(input[type="radio"]:checked) .wahl-text {
	display: none;
}

.wahl-eigene:has(input[type="radio"]:checked) .wahl-eingabe {
	display: block;
	animation: wahl-auf 0.3s var(--ease-aus);
}

@keyframes wahl-auf {
	from {
		opacity: 0;
	}
}

.wahl input[type="radio"],
.haken-feld input {
	-webkit-appearance: none;
	appearance: none;
	display: grid;
	place-items: center;
	width: 1.375rem;
	height: 1.375rem;
	margin: 0;
	flex: none;
	border: 1px solid rgb(201 162 90 / 0.75);
	background: var(--saal);
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.wahl input[type="radio"] {
	border-radius: 50%;
}

.haken-feld input {
	border-radius: 2px;
}

.wahl input[type="radio"]:checked {
	border-color: var(--gold-hell);
	box-shadow: inset 0 0 0 4px var(--saal), inset 0 0 0 12px var(--gold);
}

.haken-feld input:checked {
	border-color: var(--gold);
	background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307060a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 80% no-repeat;
}

.wahl input[type="radio"]:focus-visible,
.haken-feld input:focus-visible {
	outline: 2px solid var(--gold-hell);
	outline-offset: 3px;
}

.haken-feld input[aria-invalid="true"] {
	border-color: var(--fehler);
}

.haken-feld {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	color: var(--elfenbein-2);
	font-size: 1.0625rem;
	cursor: pointer;
}

.haken-feld input {
	margin-top: 0.2rem;
}

.absenden-hilfe {
	text-align: center;
	margin-top: -0.75rem;
}

.danke {
	display: grid;
	gap: 1.1rem;
	justify-items: start;
	padding-block: 1rem;
}

.danke:focus {
	outline: none;
}

.danke-icon {
	width: 3.25rem;
	height: 3.25rem;
	padding: 0.7rem;
	border: 1px solid var(--gold);
	border-radius: 50%;
	color: var(--gold-hell);
}

.danke-titel {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.danke p {
	color: var(--elfenbein-2);
	max-width: 34rem;
}

.danke-klein {
	font-size: 1rem;
}

@media (min-width: 60rem) {
	.bestellung-raster {
		grid-template-columns: 5fr 7fr;
		gap: clamp(3rem, 6vw, 6rem);
	}

	.bestellung-text {
		position: sticky;
		top: calc(var(--kopf-hoehe) + 2rem);
		align-self: start;
	}
}

/* Majestäten --------------------------------------------------------------- */

.majestaeten-bild {
	margin: 0 auto;
}

/* Fotos erscheinen „angeleuchtet“: Mitte hell, Ränder fallen ins Saal-Schwarz. */
.spotlicht {
	position: relative;
	-webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 46%, #000 52%, rgb(0 0 0 / 0.35) 80%, transparent 100%);
	mask-image: radial-gradient(ellipse 72% 78% at 50% 46%, #000 52%, rgb(0 0 0 / 0.35) 80%, transparent 100%);
}

.spotlicht img {
	width: 100%;
	filter: brightness(0.8) saturate(0.92);
}

.spotlicht::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		conic-gradient(from 166deg at 46% -35%, transparent 0deg, rgb(255 226 170 / 0.22) 9deg, transparent 20deg),
		radial-gradient(38% 50% at 50% 42%, rgb(255 226 170 / 0.16), transparent 72%);
	mix-blend-mode: screen;
	pointer-events: none;
}

/* Die Majestäten stehen im warmen Verfolgerspot, der Rest des Bildes fällt ab. */
/* Drei gleich starke Pools, einer je Königspaar: kein Verein steht heller als der andere. */
.spotlicht-warm {
	-webkit-mask-image: radial-gradient(ellipse 78% 80% at 50% 50%, #000 52%, rgb(0 0 0 / 0.3) 82%, transparent 100%);
	mask-image: radial-gradient(ellipse 78% 80% at 50% 50%, #000 52%, rgb(0 0 0 / 0.3) 82%, transparent 100%);
}

.spotlicht-warm img {
	filter: brightness(0.66) saturate(0.88) contrast(1.04);
}

.spotlicht-warm::after {
	background:
		radial-gradient(13% 46% at 29% 52%, rgb(255 222 160 / 0.3), transparent 80%),
		radial-gradient(13% 46% at 49% 52%, rgb(255 222 160 / 0.3), transparent 80%),
		radial-gradient(13% 46% at 69% 52%, rgb(255 222 160 / 0.3), transparent 80%),
		linear-gradient(180deg, transparent 18%, rgb(255 222 160 / 0.07) 45%, transparent 85%);
}

/* Impressionen: jedes Bild ruht abgedunkelt, ein Kegel in der Saalfarbe kreuzt es. */
.spotlicht-kegel {
	position: relative;
}

.spotlicht-kegel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: conic-gradient(from var(--kegel-winkel, 160deg) at var(--kegel-x, 20%) -30%, transparent 0deg, var(--kegel-farbe, rgb(178 58 142 / 0.42)) 8deg, transparent 18deg);
	mix-blend-mode: screen;
	filter: blur(6px);
	opacity: 0.9;
	pointer-events: none;
	transition: opacity 0.6s var(--ease-aus);
}

.spotlicht-kegel:nth-child(3n + 2) {
	--kegel-farbe: rgb(47 168 200 / 0.4);
	--kegel-x: 78%;
	--kegel-winkel: 190deg;
}

.spotlicht-kegel:nth-child(3n) {
	--kegel-farbe: rgb(255 226 170 / 0.32);
	--kegel-x: 50%;
	--kegel-winkel: 172deg;
}

.spotlicht-kegel:hover::after {
	opacity: 0.35;
}

/* Majestäten auf der Startseite: Foto kleiner und mittig, in einem feinen
   Goldrahmen wie die Bilder der Gala-Seite; Überschrift mittig darüber. */
.majestaeten .abschnitt-kopf {
	display: grid;
	justify-content: center;
	justify-items: center;
	gap: 0.85rem;
	text-align: center;
}

@media (min-width: 60rem) {
	.majestaeten-bild {
		max-width: min(62rem, 100%);
	}
}

.majestaeten-bild .spotlicht-warm {
	padding: 6px;
	border: 1px solid var(--linie-stark);
	background: var(--saal-hoch);
	box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.9);
	-webkit-mask-image: none;
	mask-image: none;
}

.majestaeten-bild .spotlicht-warm img {
	display: block;
	height: auto;
	filter: brightness(0.82) saturate(0.92) contrast(1.03);
}

.majestaeten-bild .spotlicht-warm::after {
	inset: 6px;
}

.majestaeten .majestaeten-namen {
	max-width: 64rem;
	margin-inline: auto;
}

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

.majestaeten-namen {
	display: grid;
	gap: 0;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.majestaeten-namen li {
	display: grid;
	gap: 0.35rem;
	padding: 1.5rem 0;
	border-top: 1px solid var(--linie);
}

.majestaet-namen {
	font-family: var(--schrift-titel);
	font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
	letter-spacing: 0.06em;
	color: var(--elfenbein);
	text-wrap: balance;
}

.majestaet-titel {
	color: var(--elfenbein-2);
}

/* Königsschild: Das Vereinszeichen hängt an einem Stück feiner Goldkette an der
   Linie über den Namen, wie die Schilder an der Königskette. Kommt die Liste
   ins Bild, schwingt jedes Schild einmal aus, nacheinander. Mit der Maus über
   einem Eintrag bekommt sein Schild eine warme Lichtkante. */
.majestaeten-namen li:has(.maj-plakette) {
	justify-items: center;
	padding-top: 0;
	text-align: center;
}

.maj-plakette {
	display: grid;
	justify-items: center;
	margin-bottom: 0.9rem;
	transform-origin: 50% 0;
}

.maj-plakette-kette {
	position: relative;
	width: 4px;
	height: clamp(1.6rem, 2.5vw, 2.25rem);
	/* Glieder wie bei der Königskette: kurze runde Striche in Gold. */
	background: radial-gradient(circle, rgb(241 217 162 / 0.6) 1.6px, transparent 2px) 50% 0 / 4px 7px repeat-y;
}

/* Die Öse über dem Schild. */
.maj-plakette-kette::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -0.3rem;
	width: 0.55rem;
	height: 0.55rem;
	translate: -50% 0;
	border: 1px solid rgb(241 217 162 / 0.6);
	border-radius: 50%;
}

.maj-plakette-schild {
	display: grid;
	place-items: center;
	width: clamp(3.75rem, 3rem + 1.5vw, 4.5rem);
	aspect-ratio: 1;
	margin-top: 0.25rem;
	border: 1px solid var(--linie-stark);
	border-radius: 50%;
	outline: 1px solid var(--linie);
	outline-offset: 4px;
	background: radial-gradient(circle at 50% 30%, rgb(255 228 176 / 0.09), transparent 70%), var(--saal);
	box-shadow: 0 14px 28px -16px rgb(0 0 0 / 0.95);
	transition: border-color 0.4s, box-shadow 0.6s, outline-color 0.4s;
}

.maj-plakette-schild img {
	width: 66%;
	height: 66%;
	object-fit: contain;
	opacity: 0.94;
}

.majestaeten-namen li:hover .maj-plakette-schild {
	border-color: rgb(241 217 162 / 0.7);
	outline-color: rgb(241 217 162 / 0.28);
	box-shadow: 0 14px 28px -16px rgb(0 0 0 / 0.95), 0 0 28px -4px rgb(255 214 140 / 0.35);
}

.js [data-plaketten] .maj-plakette {
	opacity: 0;
}

.js [data-plaketten].ist-an .maj-plakette {
	opacity: 1;
	animation: plakette-schwingt 1.6s var(--ease-aus) calc(var(--i) * 0.18s) backwards;
}

@keyframes plakette-schwingt {
	0% {
		opacity: 0;
		transform: translateY(-0.75rem) rotate(-9deg);
	}
	35% {
		opacity: 1;
		transform: translateY(0) rotate(6deg);
	}
	60% {
		transform: rotate(-3deg);
	}
	80% {
		transform: rotate(1.2deg);
	}
	100% {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.js [data-plaketten] .maj-plakette {
		opacity: 1;
	}

	.js [data-plaketten].ist-an .maj-plakette {
		animation: none;
	}
}

@media (min-width: 52rem) {
	.majestaeten-namen {
		grid-template-columns: repeat(3, 1fr);
	}

	.majestaeten-namen li {
		padding: 1.75rem clamp(1rem, 2.5vw, 2.25rem);
		text-align: center;
	}

	.majestaeten-namen li + li {
		border-left: 1px solid var(--linie);
	}
}

/* Vereine ------------------------------------------------------------------ */

.vereine-kopf {
	display: grid;
	gap: 1.25rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Der Einleitungstext steht in voller Länge unter der Überschrift. */
.vereine-kopf .einleitung {
	max-width: 62rem;
}

/* Startseite und Gala-Seite: Überschrift und Einleitung mittig über den drei Vereinen. */
.vereine .vereine-kopf,
.gala-vereine .vereine-kopf {
	justify-items: center;
	text-align: center;
}

.vereine .vereine-kopf .einleitung,
.gala-vereine .vereine-kopf .einleitung {
	max-width: 52rem;
}

.vereine-liste {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.verein {
	display: grid;
	gap: 0.6rem;
	padding: 2rem 0;
	border-top: 1px solid var(--linie);
}

.verein-name {
	font-family: var(--schrift-titel);
	font-size: min(clamp(1.3rem, 1rem + 0.75vw, 1.7rem), 7.4cqi);
	letter-spacing: 0.06em;
	overflow-wrap: break-word;
	hyphens: manual; /* Vereinsnamen nicht trennen (kein „Bondor-fer“), nur am Bindestrich umbrechen */
	text-transform: uppercase;
	color: var(--elfenbein);
	line-height: 1.25;
}

.verein-meta {
	color: var(--elfenbein-2);
}

/* Vereinszeichen im runden Doppelrahmen wie auf der Seite „Die Schützen-Gala“,
   mittig über Name und Gründungszeile. */
.verein:has(.verein-zeichen) {
	justify-items: center;
	text-align: center;
}

.verein-zeichen {
	display: grid;
	place-items: center;
	width: 4.75rem;
	margin: 0.3rem 0 0.75rem;
	aspect-ratio: 1;
	border: 1px solid var(--linie-stark);
	border-radius: 50%;
	outline: 1px solid var(--linie);
	outline-offset: 4px;
	background: radial-gradient(circle at 50% 30%, rgb(255 228 176 / 0.09), transparent 70%);
}

.verein-zeichen img {
	width: 70%;
	height: 70%;
	object-fit: contain;
	opacity: 0.94;
}

@media (min-width: 52rem) {
	/* Drei exakt gleich breite Spalten; die Trennlinie sitzt mittig im Zwischenraum. */
	.vereine-liste {
		--spalt: clamp(2rem, 5vw, 5rem);
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--spalt);
	}

	/* Name oben, Gründungszeile unten: so stehen alle drei Zeilen auf einer Linie. */
	.verein {
		position: relative;
		grid-template-rows: 1fr auto;
		padding: 0.5rem 0;
		border-top: 0;
	}

	/* Mit Zeichen: Zeichen, Name, Gründungszeile untereinander, in allen Spalten bündig. */
	.verein:has(.verein-zeichen) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
		align-items: start;
		justify-items: center;
	}

	.verein-zeichen {
		width: 6rem;
		margin-bottom: 1.1rem;
	}

	.verein + .verein::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(var(--spalt) / -2);
		width: 1px;
		background: var(--linie);
	}
}

/* Vereinsnamen ohne Silbentrennung: Die Schrift richtet sich nach der Breite
   der Spalte, damit auch „Schützenbruderschaft“ ganz in eine Zeile passt. */
.verein,
.gala-verein,
.impressum-verein {
	container-type: inline-size;
}

/* Rückblick als laufende Bilderwand ----------------------------------------
   Drei schräge Reihen wie im Kopf der Galerie, aber hell: hier sind die Bilder
   die Hauptsache. Für ruckelfreien Lauf wird nur verschoben (transform auf
   eigener Grafikebene); die weichen Ränder sind feste Verläufe darüber statt
   einer Maske, die die laufenden Bilder bei jedem Bild neu zeichnen ließe. */
.rueckblick-wand {
	--bild-h: clamp(6.25rem, 4.25rem + 5vw, 10.5rem);
	--spalt-w: clamp(0.4rem, 0.8vw, 0.6rem);
	position: relative;
	overflow: hidden;
	/* Platz für die Drehung: Bei -3° und scale(1.06) heben/senken sich die
	   Enden um gut 2,8 % der Breite; ohne diesen Zuschlag würden die Ecken
	   oben rechts und unten links gerade abgeschnitten. */
	padding-block: calc(clamp(1rem, 2vw, 1.75rem) + 2.9vw);
}

.rueckblick-wand::before,
.rueckblick-wand::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	width: clamp(2rem, 9vw, 9rem);
	pointer-events: none;
}

.rueckblick-wand::before {
	left: 0;
	background: linear-gradient(90deg, var(--saal), transparent);
}

.rueckblick-wand::after {
	right: 0;
	background: linear-gradient(270deg, var(--saal), transparent);
}

.rueckblick-schraege {
	display: grid;
	gap: var(--spalt-w);
	transform: rotate(-3deg) scale(1.06);
}

.rueckblick-reihe {
	overflow: hidden;
	contain: paint;
}

.rueckblick-spur {
	display: flex;
	gap: var(--spalt-w);
	width: max-content;
	will-change: transform;
	backface-visibility: hidden;
	animation: wand-ziehen var(--dauer, 80s) linear infinite;
}

.rueckblick-reihe:nth-child(2) .rueckblick-spur {
	animation-direction: reverse;
}

.rueckblick-spur img {
	flex: none;
	width: auto;
	height: var(--bild-h);
	object-fit: cover;
	filter: brightness(0.78) saturate(0.95);
	transition: filter 0.5s var(--ease-aus);
}

/* Mit der Maus: Reihe hält an, das Bild darunter leuchtet auf. */
@media (hover: hover) and (pointer: fine) {
	.rueckblick-reihe:hover .rueckblick-spur {
		animation-play-state: paused;
	}

	.rueckblick-spur img:hover {
		filter: brightness(1.04) saturate(1.05);
	}
}

.rueckblick .bildzeile {
	padding-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

@media (prefers-reduced-motion: reduce) {
	.rueckblick-spur {
		animation: none;
	}
}

/* Impressionen ------------------------------------------------------------- */

.bildband {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 42vw;
	gap: 0.5rem;
	max-width: calc(var(--breite) + 2 * var(--rand));
	margin-inline: auto;
	padding-inline: var(--rand);
}

.bildband-bild {
	margin: 0;
	overflow: hidden;
	background: var(--saal-hoch);
}

.bildband-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.66) saturate(0.9);
	transition: filter 0.6s var(--ease-aus), transform 1.2s var(--ease-aus);
}

.bildband-bild:hover img {
	filter: brightness(0.98) saturate(1.02);
	transform: scale(1.025);
}

.bildband-1 {
	grid-column: 1 / -1;
	grid-row: span 2;
}

@media (min-width: 52rem) {
	.bildband {
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: clamp(9rem, 12vw, 11.5rem);
		gap: 0.6rem;
	}

	.bildband > * {
		grid-column: span 4;
	}

	.bildband-1 {
		grid-column: 1 / 8;
		grid-row: 1 / 3;
	}

	[data-anzahl="7"] .bildband-2 { grid-column: 8 / 13; grid-row: 1; }
	[data-anzahl="7"] .bildband-3 { grid-column: 8 / 11; grid-row: 2; }
	[data-anzahl="7"] .bildband-4 { grid-column: 11 / 13; grid-row: 2; }
	[data-anzahl="7"] .bildband-5 { grid-column: 1 / 4; grid-row: 3; }
	[data-anzahl="7"] .bildband-6 { grid-column: 4 / 9; grid-row: 3; }
	[data-anzahl="7"] .bildband-7 { grid-column: 9 / 13; grid-row: 3; }
}

.impressionen .bildzeile {
	padding-top: 1rem;
}

/* Die Gala in vier Worten: „Bühnenlicht“ ------------------------------------
   Vier Bildstreifen; der angeleuchtete öffnet sich. Damit das flüssig läuft,
   haben die Fotos eine feste Größe (so breit wie ein geöffneter Streifen) und
   werden nur mehr oder weniger freigegeben, nie neu skaliert. Licht, Abdunkeln
   und Wörter wechseln allein über opacity. */

.akte {
	--spalt: clamp(0.4rem, 0.8vw, 0.65rem);
	--offen: 3.4;
	container-type: inline-size;
	display: flex;
	gap: var(--spalt);
	height: clamp(24rem, 62vh, 36rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.akt {
	--licht: rgb(47 168 200 / 0.38);
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	contain: layout paint;
	background: var(--saal-tief);
	transition: flex-grow 0.95s cubic-bezier(0.65, 0, 0.35, 1);
}

.akt:nth-child(2) { --licht: rgb(178 58 142 / 0.42); }
.akt:nth-child(3) { --licht: rgb(255 214 150 / 0.34); }
.akt:nth-child(4) { --licht: rgb(160 110 230 / 0.38); }

.akt.ist-dran {
	flex-grow: var(--offen);
}

/* Feste Bildgröße: Breite eines geöffneten Streifens, mittig im Streifen. */
.akt img {
	position: absolute;
	top: 0;
	left: 50%;
	width: calc((100cqw - 3 * var(--spalt)) * var(--offen) / (var(--offen) + 3));
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--lage, 50% 50%);
	transform: translateX(-50%);
}

/* Abdunkeln der ruhenden Streifen, Verlauf für die Schrift. */
.akt::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgb(7 6 10 / 0.85), transparent 45%),
		rgb(7 6 10 / 0.55);
	transition: opacity 0.95s ease;
	pointer-events: none;
}

.akt.ist-dran::after {
	opacity: 0.55;
}

/* Weiches Licht von oben in der Farbe des Akts: fertiger Verlauf, nur Einblenden. */
.akt::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(60% 55% at 50% 0%, var(--licht), transparent 72%);
	opacity: 0;
	transition: opacity 1.1s ease;
	pointer-events: none;
}

.akt.ist-dran::before {
	opacity: 1;
}

/* Schrift: im Ruhezustand ein kleiner Name, im Licht das große Wort.
   Beide stehen fest und blenden nur über. */
.akt-name,
.akt-wort {
	position: absolute;
	left: clamp(0.9rem, 2vw, 1.75rem);
	bottom: clamp(1rem, 2vw, 1.75rem);
	z-index: 2;
	color: var(--elfenbein);
	font-family: var(--schrift-titel);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

.akt-name {
	font-size: clamp(0.8125rem, 0.75rem + 0.25vw, 0.9375rem);
	letter-spacing: 0.2em;
	opacity: 0.8;
	transition: opacity 0.4s ease;
}

.akt-wort {
	font-size: clamp(2.5rem, 1.5rem + 3.6vw, 5rem);
	letter-spacing: 0.08em;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.akt.ist-dran .akt-name {
	opacity: 0;
}

.akt.ist-dran .akt-wort {
	opacity: 1;
	transition: opacity 0.7s ease 0.45s;
}

.akte-fuss {
	display: flex;
	justify-content: flex-end;
	margin-top: 1.25rem;
}

/* Schmal: die Streifen liegen übereinander, die Bilder sind so hoch wie ein geöffneter Streifen. */
@media (max-width: 47.99rem) {
	.akte {
		--offen: 4;
		flex-direction: column;
		height: 34rem;
	}

	.akt img {
		top: 50%;
		left: 0;
		width: 100%;
		height: calc((34rem - 3 * var(--spalt)) * 4 / 7);
		transform: translateY(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.akt,
	.akt::after,
	.akt::before,
	.akt-name,
	.akt-wort,
	.akt.ist-dran .akt-wort {
		transition: none;
	}
}

/* Partner: einfarbiges Laufband in Elfenbein ------------------------------- */

/* Überschrift und Dank stehen zentriert über dem Band. */
.partner .abschnitt-kopf {
	display: grid;
	justify-content: center;
	justify-items: center;
	gap: 0.75rem;
	text-align: center;
}

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

.partner-dank {
	color: var(--elfenbein-2);
	font-size: 1.1875rem;
}

.partner-einladung {
	margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
	color: var(--elfenbein-3);
	text-align: center;
}

.partner-einladung a {
	display: inline-block;
	margin-top: 0.4rem;
	color: var(--gold-hell);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

/* Der Abschnitt bekommt das gleiche ruhige Licht wie die anderen (data-anleuchten);
   das Band läuft ohne Rahmenlinien und taucht an den Rändern weich aus dem Dunkel.
   Kompakter als die übrigen Abschnitte: weniger Luft oben, unten und zwischen Titel und Band. */
.partner {
	padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(2.5rem, 4vw, 3.5rem);
}

.partner .abschnitt-kopf {
	margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}

.laufband {
	--luecke: clamp(3rem, 6vw, 5.5rem);
	overflow: hidden;
	padding-block: clamp(1rem, 2vw, 1.5rem);
	/* Die Logos tauchen an den Rändern aus dem Dunkel auf und verschwinden darin. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.laufband-spur {
	display: flex;
	width: max-content;
	animation: laufband var(--dauer, 60s) linear infinite;
}

/* Nur bei Tastaturbedienung anhalten, damit ein fokussiertes Logo nicht wegläuft. */
.laufband:has(:focus-visible) .laufband-spur {
	animation-play-state: paused;
}

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

.laufband-reihe {
	display: flex;
	align-items: center;
	gap: var(--luecke);
	margin: 0;
	padding: 0 calc(var(--luecke) / 2);
	list-style: none;
	font-size: 1rem;
}

.laufband-reihe li {
	display: flex;
	align-items: center;
	flex: none;
	min-height: 4.6rem;
}

.laufband-reihe a {
	display: flex;
	align-items: center;
	text-decoration: none;
	border-radius: 2px;
	transition: opacity 0.3s;
}

.laufband-reihe img {
	width: auto;
	max-width: 13rem;
	opacity: 0.86;
	transition: opacity 0.3s;
}

.laufband-reihe a:hover img,
.laufband-reihe a:focus-visible img {
	opacity: 1;
}

.laufband-name {
	font-family: var(--schrift-titel);
	font-size: 1.35rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--elfenbein);
	opacity: 0.86;
	white-space: nowrap;
}

.partner-fuss {
	padding-top: 1.75rem;
}

@media (max-width: 47.99rem) {
	.laufband-reihe {
		font-size: 0.8rem;
	}

	.laufband-reihe img {
		max-width: 10rem;
	}

	.laufband-reihe li {
		min-height: 3.8rem;
	}
}

/* Ohne Bewegung: alle Logos stehen still und umbrechen in Zeilen. */
@media (prefers-reduced-motion: reduce) {
	.laufband {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.laufband-spur {
		width: auto;
		animation: none;
	}

	.laufband-reihe {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 2rem;
		padding-inline: var(--rand);
	}

	.laufband-kopie {
		display: none;
	}
}

/* Aktuelles ---------------------------------------------------------------- */

.beitragsliste {
	display: grid;
	border-top: 1px solid var(--linie);
}

.beitrag-zeile {
	position: relative;
	display: grid;
	gap: 1.25rem;
	padding-block: 1.75rem;
	border-bottom: 1px solid var(--linie);
}

.beitrag-zeile-text {
	display: grid;
	gap: 0.6rem;
	align-content: start;
}

.beitrag-datum {
	font-size: 1.0625rem;
	color: var(--elfenbein-2);
}

.beitrag-zeile-titel {
	font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
	letter-spacing: 0.03em;
	line-height: 1.25;
}

.beitrag-zeile-titel a {
	color: var(--elfenbein);
	text-decoration: none;
}

.beitrag-zeile-titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.beitrag-zeile:hover .beitrag-zeile-titel a {
	color: var(--gold-hell);
}

.beitrag-zeile-anriss {
	color: var(--elfenbein-2);
	max-width: 44rem;
}

/* Hinweis, dass der ganze Beitrag hinter der Zeile liegt. */
.beitrag-zeile-mehr {
	color: var(--gold-hell);
	font-size: 1rem;
	font-style: italic;
	transition: color 0.2s;
}

.beitrag-zeile:hover .beitrag-zeile-mehr {
	color: #fff4dc;
}

.beitrag-zeile-bild {
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--saal-hoch);
}

.beitrag-zeile-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.82);
	transition: filter 0.6s var(--ease-aus), transform 1.2s var(--ease-aus);
}

.beitrag-zeile:hover .beitrag-zeile-bild img {
	filter: brightness(1);
	transform: scale(1.03);
}

@media (min-width: 48rem) {
	.beitrag-zeile {
		grid-template-columns: 1fr minmax(14rem, 22rem);
		gap: clamp(2rem, 5vw, 5rem);
		padding-block: 2.25rem;
	}
}

.beitragsliste-archiv {
	margin-bottom: 3rem;
}

.leer {
	padding-block: 3rem;
	color: var(--elfenbein-2);
}

.pagination {
	padding-bottom: 5rem;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 3rem;
	height: 3rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--linie);
	font-family: var(--schrift-titel);
	text-decoration: none;
}

.pagination .page-numbers.current {
	border-color: var(--gold);
	color: var(--elfenbein);
}

/* ==========================================================================
   Unterseiten und Beiträge
   ========================================================================== */

.seitenkopf {
	position: relative;
	isolation: isolate;
	padding: calc(var(--kopf-hoehe) + clamp(3rem, 8vw, 6rem)) 0 clamp(2.5rem, 5vw, 4rem);
	overflow: hidden;
}

.seitenkopf .rahmen {
	display: grid;
	gap: 1.1rem;
}

.seitenkopf-licht {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		conic-gradient(from 166deg at 16% -20%, transparent 0deg, rgb(178 58 142 / 0.32) 9deg, transparent 20deg),
		conic-gradient(from 188deg at 86% -20%, transparent 0deg, rgb(47 168 200 / 0.26) 8deg, transparent 18deg),
		radial-gradient(40% 70% at 30% 110%, rgb(255 228 176 / 0.08), transparent);
	filter: blur(18px);
	animation: seitenlicht 2s var(--ease-licht) both;
}

@keyframes seitenlicht {
	from {
		opacity: 0;
	}
}

.seitenkopf-titel {
	font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	max-width: 22ch;
}

.seitenkopf-404 .einleitung {
	margin-bottom: 1rem;
}

.seite .seitenkopf .rahmen,
.seite > .rahmen {
	max-width: calc(48rem + 2 * var(--rand));
}

.beitrag-bild {
	margin: 0 auto 2.5rem;
	max-width: calc(64rem + 2 * var(--rand));
}

/* Hochformate und kleine Bilder: nicht höher als der Bildschirm, mittig, Spot passt sich an. */
.beitrag-bild .spotlicht {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.beitrag-bild .spotlicht img {
	display: block;
	width: auto;
	max-height: min(78vh, 44rem);
	margin-inline: auto;
}

.inhalt {
	max-width: 48rem;
	padding-bottom: clamp(4rem, 8vw, 7rem);
	color: var(--elfenbein);
}

.inhalt > * + * {
	margin-top: 1.25em;
}

.inhalt h2,
.inhalt h3,
.inhalt h4 {
	margin-top: 2.2em;
	letter-spacing: 0.05em;
	color: var(--elfenbein);
}

.inhalt h2 {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	text-transform: uppercase;
}

.inhalt h3 {
	font-size: 1.4rem;
}

.inhalt h4 {
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.inhalt h2 + *,
.inhalt h3 + *,
.inhalt h4 + * {
	margin-top: 0.6em;
}

.inhalt p,
.inhalt li {
	color: #e3dac8;
}

.inhalt ul,
.inhalt ol {
	padding-left: 1.3em;
}

.inhalt li + li {
	margin-top: 0.4em;
}

.inhalt li::marker {
	color: var(--gold-tief);
}

.inhalt strong {
	color: var(--elfenbein);
	font-weight: 700;
}

.inhalt blockquote {
	margin-inline: 0;
	padding: 0.2em 0 0.2em 1.4em;
	border-left: 1px solid var(--gold);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--elfenbein);
}

.inhalt hr {
	border: 0;
	height: 1px;
	background: var(--linie);
	margin-block: 2.5em;
}

.inhalt img {
	border-radius: 1px;
}

.inhalt figure {
	margin-inline: 0;
}

.inhalt figcaption,
.inhalt .wp-caption-text,
.inhalt .wp-element-caption {
	margin-top: 0.8rem;
	color: var(--elfenbein-2);
	font-size: 1.0625rem;
	line-height: 1.5;
}

/* Galerien dürfen breiter als die Textspalte sein; Einzelbilder teilen die Kante mit dem Text. */
.inhalt > .wp-block-gallery {
	width: min(64rem, 100vw - 2 * var(--rand));
	margin-inline: calc(50% - min(32rem, 50vw - var(--rand)));
}

.inhalt .aligncenter {
	margin-inline: auto;
}

.inhalt .alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
	max-width: 50%;
}

.inhalt .alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
	max-width: 50%;
}

.inhalt p:empty {
	display: none;
}

.inhalt h2,
.inhalt h3,
.inhalt h4 {
	clear: both;
}

/* Große Bilder aus älteren Beiträgen waren umflossen und hatten feste Breiten;
   in der Lesespalte stehen sie frei über die ganze Breite. */
.inhalt .size-large.alignleft,
.inhalt .size-large.alignright,
.inhalt .size-full.alignleft,
.inhalt .size-full.alignright,
.inhalt .wp-block-image .alignleft.is-resized,
.inhalt .wp-block-image .alignright.is-resized {
	float: none;
	max-width: none;
	margin: 0;
}

.inhalt .wp-block-image img[style*="width"] {
	width: 100% !important;
	height: auto !important;
}

@media (max-width: 40rem) {
	.inhalt .alignleft,
	.inhalt .alignright {
		float: none;
		max-width: none;
		margin: 0;
	}
}

.inhalt .alignwide,
.inhalt .alignfull {
	width: min(100vw - 2 * var(--rand), 68rem);
	max-width: none;
}

.inhalt::after {
	content: "";
	display: table;
	clear: both;
}

.inhalt table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.inhalt th,
.inhalt td {
	padding: 0.7rem 0.6rem;
	border-bottom: 1px solid var(--linie);
	text-align: left;
	vertical-align: top;
}

.inhalt .wp-block-gallery,
.inhalt .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(14rem, 44vw), 1fr));
	gap: 0.5rem;
}

.inhalt .gallery-item {
	margin: 0;
}

.inhalt .wp-block-gallery img,
.inhalt .gallery img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.inhalt iframe,
.inhalt video {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.inhalt .wp-block-button__link {
	background: var(--gold);
	color: var(--saal);
	border-radius: 2px;
	font-family: var(--schrift-titel);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-decoration: none;
}

.blaettern {
	display: grid;
	gap: 1rem;
	padding-bottom: clamp(4rem, 8vw, 7rem);
	border-top: 1px solid var(--linie);
	padding-top: 2rem;
}

.blaettern-link {
	display: grid;
	gap: 0.4rem;
	text-decoration: none;
	color: var(--elfenbein);
}

.blaettern-richtung {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--schrift-titel);
	font-size: 0.9375rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-hell);
}

.blaettern-titel {
	font-family: var(--schrift-titel);
	font-size: 1.2rem;
	line-height: 1.3;
}

.blaettern-link:hover .blaettern-titel {
	color: var(--gold-hell);
}

@media (min-width: 48rem) {
	.blaettern {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}

	.blaettern-neuer {
		grid-column: 2;
		text-align: right;
		justify-items: end;
	}
}

/* ==========================================================================
   Seite „Die Schützen-Gala“
   Aufbau wie ein Programmheft: Titel und Saal, Eckdaten auf einer Linie,
   dann Abend, Chronik, Vereine, Team, Ort und nächster Termin. Fotos gehen
   beim Hineinscrollen „an“ (nur Helligkeit, kein Scroll-Effekt).
   ========================================================================== */

/* Kopf „Vom Saal zur Gala“: derselbe Blick durch den Kursaal, erst still bei
   Tag, dann geht das Licht an und der Gala-Abend blendet herüber (nur opacity,
   filter, transform). Der Titel liegt auf der Unterkante des Fotos. */
.gala-saal {
	position: relative;
	isolation: isolate;
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.gala-saal-bild {
	position: relative;
	height: clamp(22rem, 66vh, 40rem);
	overflow: hidden;
	background: var(--saal-tief);
}

.gala-saal-bild picture {
	display: contents;
}

.gala-saal-bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Bildausschnitte so gewählt, dass Gewölbe und Kronleuchter in beiden Fotos ähnlich liegen. */
.gala-saal-tag {
	object-position: 50% 42%;
	filter: brightness(0.9) saturate(0.95);
	transition: filter 2.6s var(--ease-licht), transform 6s var(--ease-aus);
	animation: saal-atmen 6s var(--ease-aus) backwards;
}

.gala-saal-abend {
	object-position: 50% 38%;
	filter: brightness(0.9) saturate(1.02);
	transition: opacity 2.6s var(--ease-licht), transform 7s var(--ease-aus);
}

@keyframes saal-atmen {
	from {
		transform: scale(1.04);
	}
}

/* Mit JavaScript zuerst der Saal bei Tag; ohne bleibt der Gala-Abend stehen. */
.js .gala-saal:not(.ist-abend) .gala-saal-abend {
	opacity: 0;
	transform: scale(1.05);
}

.js .gala-saal.ist-abend .gala-saal-tag {
	filter: brightness(0.25) saturate(0.6);
}

/* Lesbarkeit: oben für die Navigation, unten Übergang ins Saalschwarz unter dem Titel. */
.gala-saal-bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgb(7 6 10 / 0.75), transparent 22%),
		linear-gradient(0deg, var(--saal) 0%, rgb(7 6 10 / 0.55) 22%, transparent 48%);
	pointer-events: none;
}

.gala-saal-wahl {
	position: absolute;
	top: calc(var(--kopf-hoehe) + 1rem);
	right: var(--rand);
	z-index: 2;
	display: flex;
	gap: 0.25rem;
	padding: 0.25rem;
	border: 1px solid var(--linie-stark);
	background: rgb(7 6 10 / 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.gala-saal-wahl button {
	padding: 0.45rem 0.8rem;
	border: 0;
	background: none;
	color: var(--elfenbein-2);
	font-family: var(--schrift-titel);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.3s, background-color 0.3s;
}

.gala-saal-wahl button:hover {
	color: var(--gold-hell);
}

.gala-saal-wahl button[aria-pressed="true"] {
	background: rgb(201 162 90 / 0.18);
	color: var(--gold-hell);
}

.gala-saal-text {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 1rem;
	margin-top: calc(-0.62 * clamp(2.75rem, 1.2rem + 6vw, 7rem));
}

.gala-saal-titel {
	font-size: clamp(2.75rem, 1.2rem + 6vw, 7rem);
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--elfenbein);
	text-shadow: 0 2px 30px rgb(7 6 10 / 0.7);
	--titel-dauer: 1.8s;
	--titel-start: 0.2s;
}

.gala-saal-text .einleitung {
	max-width: 46rem;
}

/* Verfolgerspots: Mit dem Gala-Abend gehen oben zwei warmweiße Spots an,
   fahren von außen nach innen über den Titel und treffen sich in der Mitte;
   jeder Buchstabe glüht auf, sobald ein Kegel ihn erreicht. seite.js setzt
   Ursprung und Länge (--x, --laenge, --breite) und dreht die Kegel Bild für
   Bild. Bewegt werden nur Drehung und Deckkraft. */
.gala-spots {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.9s var(--ease-licht);
}

.gala-saal.spot-an.ist-abend .gala-spots {
	opacity: 1;
}

.gala-saal.spot-ruhe.ist-abend .gala-spots {
	opacity: 0.78;
	transition-duration: 1.6s;
}

.gala-spot {
	position: absolute;
	top: -1rem;
	left: var(--x, 50%);
	width: var(--breite, 20rem);
	height: var(--laenge, 60vh);
	margin-left: calc(var(--breite, 20rem) / -2);
	transform-origin: 50% 0;
	background: conic-gradient(from 174deg at 50% 0, transparent 0deg, rgb(255 232 190 / 0.12) 2.5deg, rgb(255 242 218 / 0.42) 6deg, rgb(255 232 190 / 0.12) 9.5deg, transparent 12deg);
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 84%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0, #000 84%, transparent 100%);
	will-change: transform;
}

/* Treffer: Wo sich die Kegel treffen, legt sich ein warmer Lichtfleck unter den Titel. */
.gala-saal-text::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: calc(var(--rand) - 6%);
	top: -18%;
	width: min(70rem, 92%);
	height: 62%;
	background: radial-gradient(50% 50% at 50% 50%, rgb(255 226 176 / 0.16), transparent 72%);
	opacity: 0;
	transition: opacity 1.1s var(--ease-licht);
	pointer-events: none;
}

.gala-saal-titel {
	position: relative;
}

/* Jeder Buchstabe trägt seinen Glow als fertige Ebene darüber; der Kegel
   blendet ihn nur ein. Kurz hell aufblitzen, dann warm stehen bleiben. */
.gala-zeichen {
	position: relative;
}

.gala-zeichen::after {
	content: attr(data-z);
	position: absolute;
	inset: 0;
	color: transparent;
	text-shadow: 0 0 22px rgb(255 220 160 / 0.7), 0 0 64px rgb(255 200 130 / 0.34);
	opacity: 0;
	transition: opacity 0.45s var(--ease-licht);
	pointer-events: none;
}

.gala-saal.ist-abend .gala-zeichen.ist-hell::after {
	opacity: 1;
}

.gala-saal.spot-treffer.ist-abend .gala-saal-text::before {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.gala-spots {
		display: none;
	}
}

/* Breite Bildschirme zeigen nur ein flaches Band des Fotos: dort den Ausschnitt
   tiefer setzen, damit Bühne und Saal zu sehen sind, nicht nur das Gewölbe. */
@media (min-width: 40rem) {
	.gala-saal-bild {
		height: clamp(24rem, 74vh, 46rem);
	}

	.gala-saal-tag {
		object-position: 50% 60%;
	}

	.gala-saal-abend {
		object-position: 50% 58%;
	}
}

@media (max-width: 39.99rem) {
	.gala-saal-bild {
		height: clamp(20rem, 56vh, 28rem);
	}

	.gala-saal-wahl {
		left: var(--rand);
		right: auto;
		top: calc(var(--kopf-hoehe) + 0.75rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gala-saal-tag,
	.gala-saal-titel {
		animation: none;
	}

	.gala-saal-tag,
	.gala-saal-abend {
		transition: none;
	}
}

/* Der Einladungsfilm als zusätzliche Impression im Abschnitt „Die Veranstaltung“. */
.gala-film {
	display: grid;
	gap: 1.5rem clamp(2rem, 4vw, 3.5rem);
	align-items: end;
	margin-top: clamp(3.5rem, 8vw, 6rem);
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid var(--linie);
}

.gala-film-text {
	display: grid;
	gap: 0.85rem;
	color: var(--elfenbein-2);
}

.gala-film-titel {
	color: var(--elfenbein);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gala-film-hinweis {
	color: var(--elfenbein-3);
	font-size: 0.9375rem;
}

.gala-film-hinweis a {
	color: var(--gold-hell);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

@media (min-width: 60rem) {
	.gala-film {
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	}
}

.film-leinwand {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--linie-stark);
	background: #000;
}

.film-leinwand img,
.film-leinwand iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* Abspielknopf unten links wie bei einem Filmplayer, der Schriftzug im Standbild bleibt frei. */
.film-start {
	position: absolute;
	inset: 0;
	display: grid;
	align-items: end;
	justify-items: start;
	padding: clamp(0.75rem, 2.5vw, 1.5rem);
	background: linear-gradient(20deg, rgb(7 6 10 / 0.78), rgb(7 6 10 / 0.35) 30%, transparent 55%);
}

.film-abspielen {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.5rem;
	border: 0;
	background: none;
	color: var(--elfenbein);
	font-family: var(--schrift-titel);
	font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.film-abspielen-kreis {
	display: grid;
	place-items: center;
	width: clamp(3rem, 2.25rem + 2.5vw, 4.25rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(180deg, #d9b56c, var(--gold) 55%, #b58d47);
	color: var(--saal);
	box-shadow: 0 12px 34px -12px rgb(0 0 0 / 0.9);
	transition: transform 0.3s var(--ease-aus);
}

.film-abspielen-kreis .icon {
	width: 44%;
	height: 44%;
	translate: 7% 0;
}

.film-abspielen:hover .film-abspielen-kreis,
.film-abspielen:focus-visible .film-abspielen-kreis {
	transform: scale(1.07);
}

.film-abspielen:focus-visible {
	outline: 0;
}

.film-abspielen:focus-visible .film-abspielen-kreis {
	outline: 2px solid var(--gold-hell);
	outline-offset: 5px;
}

.film-abspielen-text {
	text-shadow: 0 1px 14px rgb(7 6 10 / 0.95), 0 0 2px rgb(7 6 10 / 0.8);
}

/* „Licht an“: ein Foto geht beim Laden von dunkel auf hell (Leinwand, Aufmacher). */
@keyframes gala-licht-an {
	from {
		filter: brightness(0.12) saturate(0.5);
		transform: scale(1.04);
	}
}

.gala-eckdaten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: clamp(3rem, 6vw, 4.5rem) 0 0;
	border-top: 1px solid var(--linie-stark);
}

.gala-eckdaten > div {
	display: grid;
	align-content: start;
	gap: 0.35rem;
	padding: 1.1rem 1rem 1.25rem 0;
	border-bottom: 1px solid var(--linie);
}

.gala-eckdaten > div:nth-child(even) {
	padding-left: 1rem;
	border-left: 1px solid var(--linie);
}

.gala-eckdaten dt,
.gala-steckbrief dt {
	font-family: var(--schrift-titel);
	font-size: 0.875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--elfenbein-3);
}

.gala-eckdaten dd {
	margin: 0;
	font-family: var(--schrift-titel);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	letter-spacing: 0.03em;
	line-height: 1.3;
	color: var(--elfenbein);
}

.gala-eckdaten a,
.gala-steckbrief a,
.gala-fliesstext a {
	color: var(--gold-hell);
	text-decoration: underline;
	text-decoration-color: rgb(241 217 162 / 0.45);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.25s;
}

.gala-eckdaten a:hover,
.gala-steckbrief a:hover,
.gala-fliesstext a:hover {
	text-decoration-color: currentColor;
}

@media (min-width: 60rem) {
	.gala-eckdaten {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.gala-eckdaten > div + div {
		padding-left: 1.5rem;
		border-left: 1px solid var(--linie);
	}
}

/* Die Veranstaltung ------------------------------------------------------- */
.gala-veranstaltung-raster {
	display: grid;
	gap: 2rem clamp(3rem, 7vw, 7rem);
}

/* Fließtext in einer Größe; der letzte Absatz wird zum Schlusssatz. */
.gala-fliesstext {
	max-width: 40rem;
	color: var(--elfenbein);
	font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
	line-height: 1.65;
}

.gala-fliesstext > * + * {
	margin-top: 1.15em;
}

.gala-fliesstext > p:last-child:not(:first-child) {
	position: relative;
	margin-top: 1.8em;
	padding-top: 1.3em;
	font-family: var(--schrift-titel);
	font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
	letter-spacing: 0.02em;
	line-height: 1.35;
	text-wrap: balance;
}

.gala-fliesstext > p:last-child:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3.5rem;
	height: 1px;
	background: var(--linie-stark);
}

/* Zitat als Pull-Quote: großes Anführungszeichen, Linie links, mittig zum Text. */
.gala-zitat {
	position: relative;
	align-self: center;
	margin: 0;
	padding: 0 0 0 clamp(1.5rem, 3vw, 2.5rem);
	border-left: 1px solid var(--linie-stark);
}

/* Das deutsche Anführungszeichen sitzt unten; als Zierzeichen steht es über dem Text. */
.gala-zitat::before {
	content: "„";
	display: block;
	height: 2.6rem;
	margin: -0.5rem 0 0.4rem -0.15rem;
	color: var(--gold);
	font-family: var(--schrift-titel);
	font-size: 5rem;
	line-height: 0.3;
	opacity: 0.7;
	pointer-events: none;
}

.gala-zitat blockquote {
	margin: 0;
}

.gala-zitat p {
	color: var(--elfenbein);
	font-family: var(--schrift-titel);
	font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem);
	line-height: 1.42;
	letter-spacing: 0.01em;
	text-wrap: pretty;
}

.gala-zitat figcaption {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.4rem;
	color: var(--elfenbein-3);
	font-style: italic;
}

.gala-zitat figcaption::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1px;
	background: var(--linie-stark);
}

@media (min-width: 60rem) {
	.gala-veranstaltung-raster {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: center;
	}

	.gala-veranstaltung-raster .titel {
		grid-column: 1 / -1;
		align-self: start;
	}
}

/* Der Abend in vier Momenten: Hochformate, auf breiten Schirmen versetzt. */
.gala-momente {
	display: grid;
	gap: 3rem 1.5rem;
	margin: clamp(3.5rem, 8vw, 6.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.gala-moment {
	display: grid;
	align-content: start;
	gap: 0.7rem;
}

.gala-moment-bild {
	margin: 0 0 0.6rem;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--saal-hoch);
}

.gala-moment-bild picture {
	display: contents;
}

.gala-moment-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.86) saturate(0.95);
	transition: filter 1.6s var(--ease-licht);
}

.js .gala-moment:not(.ist-an) .gala-moment-bild img {
	filter: brightness(0.18) saturate(0.5);
}

.gala-moment-titel {
	font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--elfenbein);
}

.gala-moment-text {
	color: var(--elfenbein-2);
	max-width: 30rem;
}

/* Schmal untereinander: quer statt hoch, damit die Folge nicht endlos wird. */
@media (max-width: 39.99rem) {
	.gala-moment-bild {
		aspect-ratio: 4 / 3;
	}
}

@media (min-width: 40rem) {
	.gala-momente {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 60rem) {
	.gala-momente {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.gala-moment:nth-child(even) {
		margin-top: clamp(3rem, 6vw, 5.5rem);
	}

	/* Nebeneinander gehen die Bilder nacheinander an, wie eine Lichtfolge. */
	.gala-moment:nth-child(2) .gala-moment-bild img { transition-delay: 0.18s; }
	.gala-moment:nth-child(3) .gala-moment-bild img { transition-delay: 0.36s; }
	.gala-moment:nth-child(4) .gala-moment-bild img { transition-delay: 0.54s; }
}

/* Chronik: waagerechte Zeitleiste, die linke Kante folgt dem Seitenraster. */
.gala-chronik-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 1.5rem 2rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.gala-chronik-kopf > div:first-child {
	display: grid;
	gap: 1.1rem;
}

.chronik-steuerung {
	display: flex;
	gap: 0.75rem;
}

.chronik-steuerung .lichtkasten-knopf {
	position: static;
}

.chronik-steuerung .lichtkasten-knopf:disabled {
	opacity: 0.35;
	cursor: default;
	background: transparent;
	border-color: rgb(201 162 90 / 0.6);
}

.chronik {
	--spalt: clamp(1rem, 2vw, 1.75rem);
	--aussen: max(var(--rand), (100% - var(--breite)) / 2);
	position: relative; /* Bezugspunkt für die Lage der Karten (seite.js) */
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(15rem, 72vw, 19rem);
	gap: var(--spalt);
	margin: 0;
	padding: 0.5rem var(--aussen) 1.25rem;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--aussen);
	/* Statt der Bildlaufleiste des Browsers: der kurze goldene Balken darunter. */
	scrollbar-width: none;
}

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

/* Mit der Maus greifen und ziehen; beim Ziehen rastet nichts ein (seite.js). */
@media (hover: hover) and (pointer: fine) {
	.js .chronik {
		cursor: grab;
	}
}

.chronik.wird-gezogen {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.chronik.wird-gezogen a {
	cursor: grabbing;
}

.chronik img {
	-webkit-user-drag: none;
}

/* Der kurze Schiebebalken: zeigt, wo man in den zehn Jahren steht; anklicken
   oder ziehen springt dorthin. */
.chronik-leiste {
	position: relative;
	width: min(13rem, 55%);
	height: 3px;
	margin-top: 0.5rem;
	border-radius: 3px;
	background: var(--linie-stark);
	cursor: pointer;
	touch-action: none;
}

.chronik-leiste::before {
	content: "";
	position: absolute;
	inset: -0.75rem 0;
}

.chronik-leiste-griff {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--griff-breite, 30%);
	border-radius: 3px;
	background: var(--gold-tief);
	transform: translateX(var(--griff-x, 0px));
	transition: background-color 0.3s;
}

.chronik-leiste:hover .chronik-leiste-griff,
.chronik-leiste.wird-gezogen .chronik-leiste-griff {
	background: var(--gold-hell);
}

.chronik:focus-visible {
	outline: 2px solid var(--gold-hell);
	outline-offset: -2px;
}

.chronik-station {
	scroll-snap-align: start;
}

.chronik-karte {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.chronik-bild {
	display: block;
	aspect-ratio: 4 / 3;
	margin-bottom: 1.1rem;
	overflow: hidden;
	background: var(--saal-hoch);
}

.chronik-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--lage, 50% 50%);
	transform: scale(var(--zoom, 1));
	transform-origin: var(--mitte, 50% 50%);
	filter: brightness(0.72) saturate(0.9);
	transition: filter 0.6s var(--ease-aus), transform 1s var(--ease-aus);
}

a.chronik-karte:hover .chronik-bild img,
a.chronik-karte:focus-visible .chronik-bild img {
	filter: brightness(1) saturate(1);
	transform: scale(calc(var(--zoom, 1) * 1.03));
}

a.chronik-karte:focus-visible {
	outline-offset: 6px;
}

/* Jahre ohne Bilder: leerer Rahmen. */
.ohne-bild .chronik-bild {
	border: 1px dashed var(--linie-stark);
	background: radial-gradient(60% 70% at 50% 0%, rgb(255 228 176 / 0.06), transparent 70%);
}

/* Bild aus dem Theme, optional mit Logo darüber (z. B. 2026 mit Jubiläumslogo). */
.chronik-bild {
	position: relative;
}

.chronik-bild picture {
	display: contents;
}

.chronik-bild:has(.chronik-logo)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(58% 62% at 50% 50%, rgb(7 6 10 / 0.6), rgb(7 6 10 / 0.25) 70%, transparent);
	pointer-events: none;
}

.chronik-bild .chronik-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 72%;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 2px 10px rgb(7 6 10 / 0.8));
	transform: translate(-50%, -50%);
}

/* Die Zeitlinie läuft durch alle Karten, ein Punkt markiert jedes Jahr. */
.chronik-kopf {
	position: relative;
	display: grid;
	gap: 0.35rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--linie-stark);
}

.chronik-kopf::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--elfenbein);
	box-shadow: 0 0 12px rgb(255 228 176 / 0.6);
}

.chronik-station:not(:last-child) .chronik-kopf::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 100%;
	width: var(--spalt);
	height: 1px;
	background: var(--linie-stark);
}

/* Beim Blättern zieht sich die Zeitlinie in Gold nach: von 2016 bis zum Jahr,
   das gerade vorne steht. seite.js setzt je Karte --fuellung (0 bis 1). */
.chronik-linie {
	position: absolute;
	z-index: 1;
	top: -1px;
	left: 0;
	width: calc(100% + var(--spalt));
	height: 1px;
	background: linear-gradient(90deg, var(--gold-tief), var(--gold-hell));
	box-shadow: 0 0 10px rgb(255 214 140 / 0.45);
	transform: scaleX(var(--fuellung, 0));
	transform-origin: 0 50%;
	pointer-events: none;
}

.chronik-station:last-child .chronik-linie {
	width: 100%;
}

.chronik-kopf::before {
	z-index: 2;
	transition: background-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease-aus);
}

.chronik-station.ist-erreicht .chronik-kopf::before {
	background: var(--gold-hell);
	box-shadow: 0 0 14px rgb(255 214 140 / 0.8);
}

/* Das Jahr, das gerade vorne steht: Lichtring um den Punkt, Jahr in Gold, Bild heller. */
.chronik-station.ist-aktuell .chronik-kopf::before {
	transform: scale(1.5);
	animation: chronik-puls 2.4s var(--ease-aus) infinite;
}

@keyframes chronik-puls {
	0% {
		box-shadow: 0 0 14px rgb(255 214 140 / 0.8), 0 0 0 0 rgb(241 217 162 / 0.55);
	}
	70%,
	100% {
		box-shadow: 0 0 14px rgb(255 214 140 / 0.8), 0 0 0 9px rgb(241 217 162 / 0);
	}
}

.chronik-jahr {
	transition: color 0.5s;
}

.chronik-station.ist-aktuell .chronik-jahr {
	color: var(--gold-hell);
}

.chronik-station.ist-aktuell .chronik-bild img {
	filter: brightness(0.95) saturate(1);
}

@media (prefers-reduced-motion: reduce) {
	.chronik-station.ist-aktuell .chronik-kopf::before {
		animation: none;
	}
}

.chronik-jahr {
	font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--elfenbein);
}

.chronik-titel {
	font-size: 1.0625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--elfenbein);
}

.chronik-datum {
	color: var(--elfenbein-3);
	font-style: italic;
}

.chronik-text {
	color: var(--elfenbein-2);
}

.chronik-mehr {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	justify-self: start;
	margin-top: 0.4rem;
	color: var(--gold-hell);
	font-family: var(--schrift-titel);
	font-size: 0.9375rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.4s var(--ease-aus);
}

a.chronik-karte:hover .chronik-mehr {
	background-size: 100% 1px;
}

.chronik-mehr .icon {
	width: 1.1em;
	height: 1.1em;
}

.chronik-folgt {
	color: var(--elfenbein-3);
	font-family: var(--schrift-text);
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
	font-size: 1rem;
}

/* Die Ausrichter: drei gleich gebaute Spalten, Zeilen über alle drei bündig. */
.gala-vereine-liste {
	display: grid;
	gap: 3.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gala-verein {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 0.85rem;
	text-align: center;
}

.gala-verein-zeichen {
	display: grid;
	place-items: center;
	width: clamp(8.5rem, 7rem + 4vw, 10.5rem);
	aspect-ratio: 1;
	margin-bottom: 1.25rem;
	border: 1px solid var(--linie-stark);
	border-radius: 50%;
	outline: 1px solid var(--linie);
	outline-offset: 6px;
	background: radial-gradient(circle at 50% 30%, rgb(255 228 176 / 0.09), transparent 70%);
}

.gala-verein-zeichen img {
	width: 72%;
	height: 72%;
	object-fit: contain;
	opacity: 0.94;
}

.gala-verein-name {
	font-size: min(clamp(1.2rem, 1rem + 0.55vw, 1.5rem), 7.4cqi);
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--elfenbein);
	hyphens: manual; /* Vereinsnamen nicht trennen (kein „Bondor-fer“), nur am Bindestrich umbrechen */
	overflow-wrap: break-word;
}

.gala-verein-meta {
	color: var(--elfenbein-3);
	font-style: italic;
}

.gala-verein-text {
	max-width: 26rem;
	color: var(--elfenbein-2);
}

.gala-verein-link {
	align-self: end;
	margin-top: 0.4rem;
	text-transform: none;
	letter-spacing: 0.04em;
}

@media (min-width: 56rem) {
	.gala-vereine-liste {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.85rem clamp(2rem, 5vw, 5rem);
	}

	/* Subgrid: Name, Zeile, Text und Link stehen in allen drei Spalten auf einer Höhe. */
	.gala-verein {
		grid-row: span 5;
		grid-template-rows: subgrid;
		gap: 0.85rem;
	}

	.gala-verein + .gala-verein {
		position: relative;
	}

	.gala-verein + .gala-verein::before {
		content: "";
		position: absolute;
		top: 2rem;
		bottom: 0;
		left: calc(clamp(2rem, 5vw, 5rem) / -2);
		width: 1px;
		background: linear-gradient(180deg, transparent, var(--linie) 20%, var(--linie) 80%, transparent);
	}
}

/* Die Köpfe hinter der Gala ------------------------------------------------ */
.gala-koepfe-raster {
	display: grid;
	gap: 2.5rem clamp(3rem, 6vw, 6rem);
	align-items: center;
}

.gala-koepfe-text {
	display: grid;
	gap: 1.25rem;
}

.js .gala-team-foto:not(.ist-an) img {
	filter: brightness(0.2) saturate(0.5);
}

.gala-team {
	display: grid;
	gap: 2.5rem;
	margin: clamp(3rem, 6vw, 5rem) 0 0;
	padding: clamp(2rem, 4vw, 3rem) 0 0;
	list-style: none;
	border-top: 1px solid var(--linie);
}

.gala-person {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start; /* Namen in allen drei Spalten auf einer Linie, egal wie lang das Zitat ist */
	align-items: center;
	gap: 1rem 1.25rem;
}

.gala-person-bild {
	display: grid;
	place-items: center;
	width: 4.75rem;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid var(--linie-stark);
	border-radius: 50%;
	outline: 1px solid var(--linie);
	outline-offset: 4px;
	background: radial-gradient(circle at 50% 30%, rgb(255 228 176 / 0.1), var(--saal-hoch) 75%);
}

.gala-person-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gala-monogramm {
	font-family: var(--schrift-titel);
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	color: var(--elfenbein-2);
	translate: 0.05em 0;
}

.gala-person-name {
	font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.4rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--elfenbein);
}

.gala-person-zitat {
	grid-column: 1 / -1;
	margin: 0;
}

.gala-person-zitat blockquote {
	margin: 0;
}

.gala-person-zitat p {
	color: var(--elfenbein);
	font-size: 1.1875rem;
	font-style: italic;
	line-height: 1.5;
}

@media (min-width: 56rem) {
	.gala-team {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: clamp(2rem, 5vw, 5rem);
	}
}

@media (min-width: 60rem) {
	.gala-koepfe-raster {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

/* Der Kursaal: das Saalbild über die ganze Breite, darunter Fakten und Wege. */
.gala-kursaal {
	position: relative;
	padding-bottom: clamp(4.5rem, 9vw, 8.5rem);
	border-top: 1px solid var(--linie);
}

.gala-kursaal-buehne {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: clamp(20rem, 58vw, 44rem);
	overflow: hidden;
}

.gala-kursaal-buehne img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.78) saturate(0.95);
	transition: filter 2.4s var(--ease-licht), transform 3s var(--ease-aus);
}

.js .gala-kursaal:not(.ist-an) .gala-kursaal-buehne img {
	filter: brightness(0.12) saturate(0.5);
	transform: scale(1.05);
}

.gala-kursaal-buehne::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(0deg, var(--saal) 0%, rgb(7 6 10 / 0.55) 28%, transparent 60%),
		linear-gradient(180deg, rgb(7 6 10 / 0.4), transparent 14%);
	pointer-events: none;
}

.gala-kursaal-titel {
	padding-bottom: clamp(1.25rem, 3vw, 2.25rem);
	font-size: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
	letter-spacing: 0.05em;
}

.gala-kursaal-raster {
	display: grid;
	gap: 2.75rem clamp(3rem, 6vw, 6rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.gala-kursaal-text {
	display: grid;
	align-content: start;
	gap: 1.25rem;
}

.gala-kursaal-text > p:not(.einleitung) {
	color: var(--elfenbein-2);
	max-width: 38rem;
}

.gala-kursaal-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	margin-top: 0.75rem;
}

.gala-steckbrief {
	display: grid;
	align-content: start;
	margin: 0;
	border-top: 1px solid var(--linie-stark);
}

.gala-steckbrief > div {
	display: grid;
	gap: 0.3rem 1.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--linie);
}

.gala-steckbrief dt {
	padding-top: 0.2rem;
}

.gala-steckbrief dd {
	margin: 0;
	color: var(--elfenbein);
}

.gala-folgt {
	color: var(--elfenbein-3);
	font-style: italic;
}

@media (min-width: 30rem) {
	.gala-steckbrief > div {
		grid-template-columns: 8.5rem minmax(0, 1fr);
	}
}

@media (min-width: 60rem) {
	.gala-kursaal-raster {
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
		grid-template-areas:
			"text foto"
			"steckbrief foto";
		align-items: start;
	}

	.gala-kursaal-text { grid-area: text; }
	.gala-kursaal-raster .gala-steckbrief { grid-area: steckbrief; }

	/* Das Foto steht so hoch wie Text und Steckbrief zusammen. */
	.gala-kurhaus-foto {
		grid-area: foto;
		align-self: stretch;
		display: flex;
	}

	.gala-kurhaus-foto .ahnen-foto-rahmen {
		flex: 1;
	}

	.gala-kurhaus-foto img {
		position: absolute;
		inset: 0;
		height: 100%;
	}
}

/* Hochkant zugeschnitten: das Mikrofon (bei 48 % der Breite) bleibt in der Mitte. */
.gala-kurhaus-foto img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 48% 62%;
}

/* Die nächste Gala ------------------------------------------------------- */
.gala-naechste-raster {
	display: grid;
	gap: 2.5rem clamp(3rem, 6vw, 6rem);
}

.gala-naechste-raster > div:first-child {
	display: grid;
	align-content: start;
	gap: 1.1rem;
}

.gala-naechste-aktion {
	margin-top: 2rem;
}

@media (min-width: 60rem) {
	.gala-naechste-raster {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js .gala-moment:not(.ist-an) .gala-moment-bild img,
	.js .gala-team-foto:not(.ist-an) img,
	.js .gala-kursaal:not(.ist-an) .gala-kursaal-buehne img {
		filter: brightness(0.86) saturate(0.95);
		transform: none;
	}
}

/* ==========================================================================
   Aktuelles: Übersicht nach Jahren, Bildstrecken und Lichtkasten im Beitrag
   ========================================================================== */

/* Kopf „Titelseite“: Zeitungskopf zwischen Doppellinien, die sich beim Laden
   von der Mitte aus aufziehen; darunter der neueste Beitrag als Aufmacher mit
   der Schlagzeile im Bild und eine Spalte „Weitere Meldungen“. */
.titelseite {
	position: relative;
	isolation: isolate;
	padding: calc(var(--kopf-hoehe) + clamp(1.5rem, 3.5vw, 2.75rem)) 0 clamp(2.5rem, 5vw, 4rem);
}

.titelseite-licht {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(60% 45% at 50% 0%, rgb(255 226 170 / 0.08), transparent 70%);
	pointer-events: none;
}

.titelseite-kopf {
	position: relative;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	padding-block: 1.1rem 0;
	border-top: 1px solid var(--linie-stark);
	text-align: center;
}

/* Doppellinie oben, einfache Linie unter der Datumszeile. */
.titelseite-kopf::before,
.titelseite-kopf::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--linie-stark);
	animation: linie-ziehen 1.3s var(--ease-aus) 0.1s both;
}

.titelseite-kopf::before {
	top: -6px;
}

.titelseite-kopf::after {
	bottom: 0;
}

@keyframes linie-ziehen {
	from {
		transform: scaleX(0);
	}
}

.titelseite-titel {
	padding-left: 0.14em;
	font-size: clamp(3rem, 1rem + 8vw, 8.5rem);
	letter-spacing: 0.14em;
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--elfenbein);
}

.titelseite-zeile {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.3rem 1.5rem;
	margin-top: 1rem;
	padding-block: 0.7rem;
	border-top: 1px solid var(--linie);
	color: var(--elfenbein-2);
	font-family: var(--schrift-titel);
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.titelseite-raster {
	display: grid;
	gap: 2rem clamp(2rem, 4vw, 3.5rem);
}

.titelseite-aufmacher {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(22rem, 33vw, 30rem);
	overflow: hidden;
	background: var(--saal-hoch);
}

.titelseite-aufmacher-bild {
	position: absolute;
	inset: 0;
}

.titelseite-aufmacher-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	filter: brightness(0.85) saturate(0.95);
	transition: transform 1.4s var(--ease-aus), filter 0.6s;
	animation: gala-licht-an 2.2s var(--ease-licht) 0.25s backwards;
}

.titelseite-aufmacher::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgb(7 6 10 / 0.96) 0%, rgb(7 6 10 / 0.82) 38%, rgb(7 6 10 / 0.3) 62%, transparent 80%);
	pointer-events: none;
}

.titelseite-aufmacher-text {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 0.55rem;
	max-width: 46rem;
	padding: clamp(1.25rem, 3vw, 2.25rem);
}

.titelseite-aufmacher-text .beitrag-datum {
	color: var(--elfenbein);
}

.titelseite-aufmacher-titel {
	text-shadow: 0 1px 18px rgb(7 6 10 / 0.7);
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-wrap: balance;
}

.titelseite-aufmacher-titel a {
	color: var(--elfenbein);
	text-decoration: none;
	transition: color 0.2s;
}

.titelseite-aufmacher-titel a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.titelseite-aufmacher-titel a:focus-visible {
	outline: 0;
}

.titelseite-aufmacher:has(a:focus-visible) {
	outline: 2px solid var(--gold-hell);
	outline-offset: 4px;
}

.titelseite-aufmacher-anriss {
	display: -webkit-box;
	max-width: 40rem;
	overflow: hidden;
	color: var(--elfenbein);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.titelseite-aufmacher:hover img {
	filter: brightness(0.95) saturate(1);
	transform: scale(1.03);
}

.titelseite-aufmacher:hover .titelseite-aufmacher-titel a {
	color: var(--gold-hell);
}

.titelseite-weitere {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	border-top: 1px solid var(--linie-stark);
}

.titelseite-weitere-titel {
	padding-top: 0.9rem;
	color: var(--elfenbein-2);
	font-size: 0.9375rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.titelseite-liste {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.titelseite-liste li {
	display: grid;
	gap: 0.3rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--linie);
}

.titelseite-liste .beitrag-datum {
	font-size: 0.9375rem;
}

.titelseite-liste a {
	color: var(--elfenbein);
	font-family: var(--schrift-titel);
	font-size: 1.2rem;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.2s;
}

.titelseite-liste a:hover {
	color: var(--gold-hell);
}

.titelseite-weitere .textlink {
	justify-self: start;
	margin-top: 0.5rem;
}

@media (max-width: 59.99rem) {
	.titelseite-zeile {
		justify-content: center;
		letter-spacing: 0.12em;
		text-align: center;
	}
}

@media (max-width: 47.99rem) {

	/* Schmal: Schlagzeile unter dem Bild statt darauf, damit sie immer lesbar ist. */
	.titelseite-aufmacher {
		display: block;
		min-height: 0;
		overflow: visible;
		background: none;
	}

	.titelseite-aufmacher-bild {
		position: relative;
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.titelseite-aufmacher::after {
		display: none;
	}

	.titelseite-aufmacher-text {
		padding: 1rem 0 0;
	}

	.titelseite-aufmacher-text .beitrag-datum {
		color: var(--elfenbein-2);
	}

	.titelseite-aufmacher-anriss {
		color: var(--elfenbein-2);
	}
}

/* Handy: nur der Zeitungskopf; die Beiträge folgen direkt darunter nach Jahren. */
@media (max-width: 47.99rem) {
	.titelseite {
		padding-bottom: 1.5rem;
	}

	.titelseite-kopf {
		margin-bottom: 0;
	}

	.titelseite-raster {
		display: none;
	}
}

@media (min-width: 60rem) {
	.titelseite-raster {
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	}
}

/* Weitere Meldungen: Mit der Maus darüber klappt eine Meldung weich auf und
   zeigt ihr Titelbild, das langsam aus dem Dunkel kommt. Nur mit Maus und
   breitem Bildschirm; die ganze Zeile ist anklickbar. */
.titelseite-meldung-bild {
	display: none;
}

@media (min-width: 60rem) and (hover: hover) and (pointer: fine) {
	/* Der Aufmacher ist so hoch, dass eine aufgeklappte Meldung daneben Platz
	   hat: Beim Darüberfahren verschiebt sich nichts auf der Seite. */
	.titelseite-aufmacher {
		min-height: 35rem;
	}

	.titelseite-meldung {
		position: relative;
		grid-template-rows: auto auto 0fr;
		gap: 0;
		transition: grid-template-rows 0.6s var(--ease-aus);
	}

	.titelseite-meldung .beitrag-datum {
		margin-bottom: 0.3rem;
	}

	.titelseite-meldung a::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.titelseite-meldung-bild {
		display: block;
		min-height: 0;
		overflow: hidden;
	}

	.titelseite-meldung-bild > span {
		display: block;
		padding-top: 0.85rem;
	}

	.titelseite-meldung-bild img {
		display: block;
		width: 100%;
		height: 7.5rem;
		object-fit: cover;
		object-position: 50% 30%;
		opacity: 0;
		filter: brightness(0.9);
		transform: scale(1.08);
		transition: opacity 0.5s 0.1s, transform 1.4s var(--ease-aus);
	}

	.titelseite-meldung.hat-bild:hover,
	.titelseite-meldung.hat-bild:focus-within {
		grid-template-rows: auto auto 1fr;
	}

	.titelseite-meldung:hover .titelseite-meldung-bild img,
	.titelseite-meldung:focus-within .titelseite-meldung-bild img {
		opacity: 1;
		transform: scale(1);
	}

	.titelseite-meldung:hover a {
		color: var(--gold-hell);
	}
}

@media (prefers-reduced-motion: reduce) {
	.titelseite-meldung,
	.titelseite-meldung-bild img {
		transition: none;
	}
}

/* Startseite „Vom Vogel zur Gala“: dieselbe Titelseite wie bei Aktuelles,
   mit erklärender Unterzeile. Auf dem Handy bleibt sie hier sichtbar. */
.aktuelles-kopf {
	display: grid;
	justify-content: start;
	gap: 0.75rem;
}

.rueckblick-kopf {
	align-items: end;
}

.rueckblick-kopf .abschnitt-unterzeile {
	margin-top: 0.75rem;
}

.aktuelles-unterzeile,
.abschnitt-unterzeile {
	max-width: 40rem;
	color: var(--elfenbein-2);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.55;
}

.aktuelles .titelseite-raster {
	display: grid;
}

@media (prefers-reduced-motion: reduce) {
	.titelseite-kopf::before,
	.titelseite-kopf::after,
	.titelseite-titel,
	.titelseite-aufmacher-bild img {
		animation: none;
	}
}

.aktuelles-jahr {
	padding-block: clamp(3rem, 6vw, 5rem);
	scroll-margin-top: calc(var(--kopf-hoehe) + 3.5rem);
}

.aktuelles-jahr + .aktuelles-jahr {
	border-top: 1px solid var(--linie);
}

.aktuelles-jahr-kopf {
	display: grid;
	gap: 0.75rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.aktuelles-jahr-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1.75rem;
	color: var(--elfenbein-3);
	font-style: italic;
}

.aktuelles-jahr-meta .textlink {
	font-style: normal;
}

/* Karte: Bild links, Text rechts; die ganze Karte ist über den Titel klickbar. */
.aktuelles-liste {
	display: grid;
}

.beitrag-karte {
	position: relative;
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	align-items: start;
	gap: 1.25rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--linie);
}

.aktuelles-liste > .beitrag-karte:first-child {
	padding-top: 0;
	border-top: 0;
}

.beitrag-karte-bild {
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--saal-hoch);
}

.beitrag-karte-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.84) saturate(0.95);
	transition: filter 1s var(--ease-licht), transform 1.2s var(--ease-aus);
}

/* Die Bilder eines Jahres gehen an, wenn das Jahr in den Blick kommt. */
.js .aktuelles-jahr:not(.ist-an) .beitrag-karte-bild img {
	filter: brightness(0.25) saturate(0.6);
}

.beitrag-karte:hover .beitrag-karte-bild img {
	filter: brightness(1) saturate(1);
	transform: scale(1.03);
}

.beitrag-karte-text {
	display: grid;
	align-content: start;
	gap: 0.4rem;
}

.beitrag-karte .beitrag-datum {
	order: -1;
	font-size: 1rem;
}

.beitrag-karte-titel {
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
	letter-spacing: 0.02em;
	line-height: 1.28;
}

.beitrag-karte-titel a {
	color: var(--elfenbein);
	text-decoration: none;
	transition: color 0.2s;
}

.beitrag-karte-titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.beitrag-karte-titel a:focus-visible {
	outline: 0;
}

.beitrag-karte:has(.beitrag-karte-titel a:focus-visible) {
	outline: 2px solid var(--gold-hell);
	outline-offset: 6px;
}

.beitrag-karte:hover .beitrag-karte-titel a {
	color: var(--gold-hell);
}

.beitrag-karte-anriss {
	display: -webkit-box;
	max-width: 44rem;
	overflow: hidden;
	color: var(--elfenbein-2);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.beitrag-karte-mehr {
	color: var(--gold-hell);
	font-size: 1rem;
	font-style: italic;
}

@media (min-width: 48rem) {
	.beitrag-karte {
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: 2rem;
		padding-block: 1.75rem;
	}

	.beitrag-karte-bild {
		aspect-ratio: 3 / 2;
	}

	.beitrag-karte-anriss {
		-webkit-line-clamp: 3;
	}
}

.aktuelles-liste-archiv {
	padding-bottom: 3rem;
}

/* Im Beitrag: Bildstrecken als Kontaktbogen, etwas niedrigere Reihen. */
.beitrag-bildstrecke {
	margin: 2.25rem 0;
}

.beitrag-bildstrecke .kontaktbogen {
	--zeile: clamp(6rem, 3rem + 8vw, 10.5rem);
	gap: 0.35rem;
}

.beitrag-bildstrecke .kontaktbogen-mehr {
	margin-top: 1rem;
}

/* Breiter als die Textspalte, wie Galerien im Editor; Listenregeln der Spalte gelten hier nicht. */
.inhalt .beitrag-bildstrecke {
	width: min(64rem, 100vw - 2 * var(--rand));
	max-width: none;
	margin-inline: calc(50% - min(32rem, 50vw - var(--rand)));
}

.inhalt :has(> .beitrag-bildstrecke) {
	display: block;
}

.inhalt .kontaktbogen {
	padding: 0;
}

.inhalt .kontaktbogen li + li {
	margin-top: 0;
}

.inhalt .kontakt img {
	height: 100%;
	border-radius: 0;
}

.beitrag-bildstrecke-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-top: 0.85rem;
	color: var(--elfenbein-3);
	font-size: 1rem;
	font-style: italic;
}

.beitrag-bildstrecke-fuss .textlink {
	font-style: normal;
}

/* Einzelbilder im Text öffnen den Lichtkasten. */
.beitrag-bild-link {
	display: inline-block;
	cursor: zoom-in;
}

.beitrag-bild-link img {
	transition: filter 0.4s var(--ease-aus);
}

.beitrag-bild-link:hover img {
	filter: brightness(1.08);
}

.beitrag-hinweis {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--linie-stark);
	color: var(--elfenbein);
	font-style: italic;
}

.beitrag-hinweis:has(.knopf) {
	padding: 0;
	border: 0;
	font-style: normal;
}

.blaettern:has(+ .blaettern-alle) {
	padding-bottom: 2rem;
}

.blaettern-alle {
	padding-bottom: clamp(4rem, 8vw, 7rem);
	text-align: center;
}

/* ==========================================================================
   Kontakt: „Antwortkarte“ und Impressum
   Wie die Antwortkarte einer Einladung: ein Umschlag öffnet sich, eine Karte
   mit Goldschnitt gleitet heraus. Bewegt werden nur transform und opacity.
   ========================================================================== */

.antwortkarte {
	position: relative;
	isolation: isolate;
	padding: calc(var(--kopf-hoehe) + clamp(1.25rem, 3vw, 2.25rem)) 0 clamp(2.5rem, 5vw, 4rem);
	overflow: hidden;
}

.antwortkarte-licht {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Das Licht läuft nach unten weich aus, statt an der Unterkante abzureißen. */
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 82%);
	mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 82%);
	background:
		conic-gradient(from 170deg at 50% -25%, transparent 0deg, rgb(255 226 170 / 0.1) 9deg, rgb(255 226 170 / 0.14) 10deg, rgb(255 226 170 / 0.1) 11deg, transparent 20deg),
		radial-gradient(45% 55% at 50% 62%, rgb(255 226 170 / 0.07), transparent 70%);
	pointer-events: none;
}

/* Wo der Strahl ausläuft, liegt ein weicher Lichtschein unter dem Umschlag. */
.antwortkarte::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	height: clamp(8rem, 14vw, 12rem);
	background: radial-gradient(42% 36% at 50% 58%, rgb(255 226 170 / 0.11), transparent 100%);
	pointer-events: none;
}

.antwortkarte-raster {
	display: grid;
	justify-items: center;
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.antwortkarte-seitentitel {
	font-size: clamp(2.4rem, 1.2rem + 4vw, 4.75rem);
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--elfenbein);
}

/* Umschlag -------------------------------------------------------------------
   Rückseite mit Futter, Klappe (Außenseite mit Siegel, Innenseite mit Futter),
   die Karte und vorn die Tasche aus Seiten- und Bodenlasche. Maße hängen an
   der Breite des Umschlags (Container-Einheiten): Höhe --h, die Karte steckt
   mit --t in der Tasche. Ablauf: Umschlag steigt herein, die Klappe öffnet
   sich räumlich, die Karte gleitet heraus. Nur transform und opacity. */
.brief {
	position: relative;
	width: min(46rem, 100%);
	container-type: inline-size;
	perspective: 1600px;
	animation: brief-herein 0.7s var(--ease-aus) 0.1s backwards;
}

@keyframes brief-herein {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
}

.brief > * {
	--h: 42cqw;
	--t: calc(var(--h) * 0.38);
}

/* Die Karte bestimmt die Höhe; der Umschlag liegt unter ihrem unteren Ende. */
.brief-karte {
	position: relative;
	z-index: 3;
	display: grid;
	justify-items: center;
	gap: 0.7rem;
	width: 82%;
	margin: 0 auto calc(var(--h) - var(--t));
	padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.25rem, 4vw, 2.5rem) calc(var(--t) + 1.25rem);
	border: 1px solid rgb(201 162 90 / 0.7);
	background:
		radial-gradient(80% 50% at 50% 0%, rgb(255 226 170 / 0.08), transparent 70%),
		linear-gradient(180deg, #120e15, #0b090d);
	box-shadow: 0 -18px 40px -24px rgb(0 0 0 / 0.9);
	text-align: center;
	animation: karte-heraus 1.35s cubic-bezier(0.22, 0.8, 0.25, 1) 1.15s backwards;
}

/* Am Anfang steckt die Karte ganz im Umschlag; was unten herausragt, schneidet .brief-schacht ab. */
@keyframes karte-heraus {
	from {
		transform: translateY(calc(100% - var(--t) + 0.75rem));
	}
}

/* Unterhalb des Umschlags darf die Karte nicht hervorschauen. */
.brief {
	clip-path: inset(-50vh -50vw 0 -50vw);
}

.brief-rueckseite,
.brief-klappe,
.brief-tasche {
	position: absolute;
	left: 0;
	right: 0;
}

/* Rückseite innen: dunkles Futter mit feinem Goldmuster. */
.brief-rueckseite {
	bottom: 0;
	z-index: 0;
	height: var(--h);
	border: 1px solid rgb(201 162 90 / 0.4);
	background:
		repeating-linear-gradient(45deg, rgb(201 162 90 / 0.07) 0 1px, transparent 1px 9px),
		repeating-linear-gradient(-45deg, rgb(201 162 90 / 0.07) 0 1px, transparent 1px 9px),
		#0d0a10;
}

/* Klappe: hängt an der Oberkante der Rückseite, öffnet sich räumlich nach oben. */
.brief-klappe {
	bottom: calc(var(--h) - 1px);
	z-index: 1;
	height: calc(var(--h) * 0.56);
	transform-origin: 50% 100%;
	transform-style: preserve-3d;
	animation: klappe-auf 0.75s cubic-bezier(0.55, 0, 0.3, 1) 0.6s backwards;
}

.brief-klappe-innen,
.brief-klappe-aussen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.brief-klappe-innen polygon {
	stroke: rgb(201 162 90 / 0.55);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/* Außenseite: zeigt bei geschlossener Klappe nach unten, Siegel an der Spitze.
   Die doppelte Drehung (Klappe und Seite) hebt sich auf, gezeichnet wird sie
   so, wie sie geschlossen aussieht. */
.brief-klappe-aussen {
	transform: rotateX(180deg);
}

.brief-klappe-aussen svg {
	display: block;
	width: 100%;
	height: 100%;
}

.brief-klappe-aussen polygon {
	fill: #241e28;
	stroke: rgb(201 162 90 / 0.55);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.brief-siegel {
	position: absolute;
	left: 50%;
	top: 78%;
	display: grid;
	place-items: center;
	width: clamp(2.75rem, 2rem + 3vw, 3.75rem);
	aspect-ratio: 1;
	border: 1px solid var(--gold);
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #3a2c3e, #140f17 70%);
	box-shadow: 0 6px 14px -6px rgb(0 0 0 / 0.9), inset 0 0 0 3px rgb(7 6 10 / 0.6), inset 0 0 0 4px rgb(201 162 90 / 0.35);
	transform: translate(-50%, -50%);
}

.brief-siegel img {
	width: 72%;
	height: auto;
}

@keyframes klappe-auf {
	0% {
		z-index: 6;
		transform: rotateX(180deg);
	}
	50% {
		z-index: 6;
	}
	51% {
		z-index: 1;
	}
	100% {
		z-index: 1;
		transform: rotateX(0deg);
	}
}

/* Tasche vorn: Seitenlaschen treffen sich in der Mitte, die Bodenlasche liegt darüber. */
.brief-tasche {
	bottom: 0;
	z-index: 5;
	height: var(--h);
	filter: drop-shadow(0 -6px 10px rgb(0 0 0 / 0.45));
	pointer-events: none;
}

.brief-tasche svg {
	display: block;
	width: 100%;
	height: 100%;
}

.brief-kante {
	fill: none;
	stroke: rgb(201 162 90 / 0.6);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.brief-kante-zart {
	stroke: rgb(201 162 90 / 0.3);
}

.brief-karte-logo {
	width: clamp(4.5rem, 3.5rem + 3vw, 6rem);
	height: auto;
	margin-bottom: 0.25rem;
}

.brief-karte-titel {
	font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem);
	letter-spacing: 0.04em;
	line-height: 1.25;
	color: var(--elfenbein);
	text-wrap: balance;
}

.brief-karte-text {
	max-width: 31rem;
	color: var(--elfenbein-2);
}

.brief-karte-adresse {
	margin-top: 0.4rem;
	font-family: var(--schrift-titel);
	font-size: clamp(1.15rem, 0.9rem + 1.3vw, 1.75rem);
	letter-spacing: 0.04em;
	overflow-wrap: anywhere;
}

.brief-karte-adresse a {
	color: var(--gold-hell);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat;
	transition: background-size 0.4s var(--ease-aus);
}

.brief-karte-adresse a:hover {
	background-size: 100% 1px;
}

.brief-karte-aktionen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

.brief-karte-aktionen .knopf-zart.ist-kopiert {
	border-color: var(--gold-hell);
	color: var(--elfenbein);
}

.brief-karte-gruss {
	display: grid;
	gap: 0.15rem;
	margin-top: 0.75rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--linie);
	color: var(--elfenbein-2);
	font-size: 1rem;
}

.brief-karte-gruss span {
	color: var(--elfenbein);
	font-style: italic;
	font-size: 1.0625rem;
}

/* Kontakt: Wege zu den drei Vereinen, mittig unter ihren Zeichen. */
.kontakt-vereine-kopf {
	display: grid;
	justify-items: center;
	gap: 1rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.kontakt-vereine-kopf .einleitung {
	max-width: 40rem;
}

.kontakt-vereine-liste {
	display: grid;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kontakt-verein {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 0.5rem;
	text-align: center;
}

.kontakt-verein .verein-zeichen {
	margin: 0 0 0.5rem;
}

.kontakt-verein-name {
	color: var(--elfenbein);
	font-family: var(--schrift-titel);
	font-size: 1.125rem;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.kontakt-verein .textlink {
	text-transform: none;
	letter-spacing: 0.04em;
}

.kontakt-impressum-hinweis {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	color: var(--elfenbein-3);
	text-align: center;
}

.kontakt-impressum-hinweis a {
	color: var(--gold-hell);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

@media (min-width: 52rem) {
	.kontakt-vereine-liste {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: clamp(2rem, 5vw, 5rem);
	}

	.kontakt-verein {
		grid-row: span 3;
		grid-template-rows: subgrid;
	}
}

/* Impressum: drei Vereine als gleich gebaute Karten, darunter die Angaben. */
.impressum-rechtsgrund {
	color: var(--elfenbein-2);
	font-family: var(--schrift-titel);
	font-size: 0.9375rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.impressum-vereine {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.impressum-verein {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 0.75rem;
	padding: 2rem 1.5rem;
	border: 1px solid var(--linie);
	text-align: center;
}

.impressum-verein .verein-zeichen {
	margin: 0 0 0.5rem;
}

.impressum-verein-name {
	font-size: min(clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem), 7.4cqi);
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--elfenbein);
	hyphens: manual; /* Vereinsnamen nicht trennen (kein „Bondor-fer“), nur am Bindestrich umbrechen */
	overflow-wrap: break-word;
}

.impressum-verein-angaben {
	color: var(--elfenbein-2);
	line-height: 1.7;
}

.impressum-seite .seitenkopf .rahmen,
.impressum-seite > .rahmen {
	max-width: calc(var(--breite) + 2 * var(--rand));
}

.impressum-rahmen {
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* Übrige Angaben als ruhige Liste: Bezeichnung links, Angaben rechts, Haarlinien. */
.impressum-angaben {
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	border-top: 1px solid var(--linie-stark);
}

.impressum-angaben > div {
	display: grid;
	gap: 0.6rem 2rem;
	padding-block: 1.4rem;
	border-bottom: 1px solid var(--linie);
}

.impressum-angaben > div:has(+ .impressum-anschluss) {
	border-bottom: 0;
}

.impressum-angaben > .impressum-anschluss {
	padding-top: 0;
	border-bottom: 0;
}

.impressum-angaben dt {
	color: var(--elfenbein);
	font-family: var(--schrift-titel);
	font-size: 0.9375rem;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
}

.impressum-angaben dd {
	display: grid;
	gap: 0.9rem;
	margin: 0;
	color: var(--elfenbein-2);
	line-height: 1.65;
}

.impressum-angaben dd a,
.impressum-mehr-text a {
	color: var(--gold-hell);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

/* Die drei Verantwortlichen nebeneinander, der einleitende Satz darüber. */
@media (min-width: 48rem) {
	.impressum-angaben dd:has(> p:nth-of-type(3)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 1.5rem;
	}

	.impressum-angaben dd:has(> p:nth-of-type(3)) > p:first-child {
		grid-column: 1 / -1;
	}
}

@media (min-width: 60rem) {
	.impressum-angaben > div {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}
}

.impressum-mehr {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	border-block: 1px solid var(--linie);
}

.impressum-mehr summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.1rem;
	color: var(--elfenbein);
	font-family: var(--schrift-titel);
	font-size: 1.0625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.impressum-mehr summary::-webkit-details-marker {
	display: none;
}

.impressum-mehr summary .icon {
	color: var(--gold-hell);
	transition: transform 0.3s var(--ease-aus);
}

.impressum-mehr[open] summary .icon {
	transform: rotate(180deg);
}

.impressum-mehr summary:hover {
	color: var(--gold-hell);
}

.impressum-mehr-text {
	display: grid;
	gap: 0.9rem;
	max-width: 48rem;
	padding-bottom: 1.75rem;
	color: var(--elfenbein-2);
}

.impressum-mehr-text strong {
	color: var(--elfenbein);
}

@media (min-width: 56rem) {
	.impressum-vereine {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Zeichen, Name und Angaben stehen in allen drei Karten auf einer Höhe. */
	.impressum-verein:has(.verein-zeichen) {
		grid-row: span 3;
		grid-template-rows: subgrid;
		row-gap: 0.75rem;
	}
}

/* Schmal: Karte fast so breit wie der Umschlag, Knöpfe einzeilig. */
@media (max-width: 39.99rem) {
	.brief-karte {
		width: 92%;
		padding-inline: 1rem;
	}

	.brief-karte-aktionen .knopf,
	.brief-karte-aktionen .knopf-zart {
		white-space: nowrap;
		padding-inline: 1.1rem;
		font-size: 0.9375rem;
		letter-spacing: 0.1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.brief,
	.brief-klappe,
	.brief-karte {
		animation: none;
	}
}

/* ==========================================================================
   Fußzeile
   ========================================================================== */

.fuss {
	background: var(--saal-tief);
	border-top: 1px solid var(--linie);
	padding: clamp(3.5rem, 7vw, 6rem) 0 calc(2.5rem + env(safe-area-inset-bottom));
	color: var(--elfenbein-2);
	font-size: 1.0625rem;
}

.fuss .rahmen {
	display: grid;
	gap: 3rem;
}

.fuss-marke {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 3rem;
}

.logo-fuss {
	width: 12rem;
}

.fuss-claim {
	font-family: var(--schrift-titel);
	font-size: 1.25rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--elfenbein);
}

.fuss-vereine {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--linie);
}

.fuss-vereine li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding-block: 0.9rem;
	border-bottom: 1px solid var(--linie);
}

.fuss-verein-name {
	color: var(--elfenbein);
}

.fuss-verein-jahr {
	color: var(--elfenbein-3);
	font-variant-numeric: tabular-nums;
}

.fuss-spalten {
	display: grid;
	gap: 2rem;
}

.fuss-titel {
	margin-bottom: 0.6rem;
	font-size: 0.9375rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--elfenbein);
}

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

.fuss-menue li + li {
	margin-top: 0.3rem;
}

.fuss-gruss {
	padding-top: 2rem;
	border-top: 1px solid var(--linie);
	font-style: italic;
	color: var(--elfenbein-3);
}

@media (min-width: 52rem) {
	.fuss-vereine {
		grid-template-columns: repeat(3, 1fr);
		border-bottom: 1px solid var(--linie);
	}

	.fuss-vereine li {
		display: grid;
		border-bottom: 0;
		padding: 1rem 1.5rem 1rem 0;
	}

	.fuss-vereine li + li {
		padding-left: 1.5rem;
		border-left: 1px solid var(--linie);
	}

	.fuss-spalten {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Seitenwechsel als Lichtblende, reduzierte Bewegung
   ========================================================================== */

@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: 0.28s ease-in both licht-aus;
}

::view-transition-new(root) {
	animation: 0.55s var(--ease-aus) both licht-an;
}

@keyframes licht-aus {
	to {
		opacity: 0;
	}
}

@keyframes licht-an {
	from {
		opacity: 0;
	}
}

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

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

	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
}

@media print {
	.kopf,
	.saal-buehne,
	.saal-weiter,
	.kartenwahl,
	.fuss {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* ==========================================================================
   Beitrag als Reportage (single.php)
   ========================================================================== */

/* Kopf: Beitragsbild über die ganze Breite, die Schlagzeile steht darauf.
   Das Bild zieht sich beim Öffnen langsam zurück (nur transform). */
.reportage-kopf {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: clamp(24rem, 70vh, 42rem);
	padding: calc(var(--kopf-hoehe) + 3rem) 0 clamp(2rem, 4vw, 3.25rem);
	overflow: hidden;
}

.reportage-kopf:not(.mit-bild) {
	min-height: 0;
	padding-top: calc(var(--kopf-hoehe) + clamp(3rem, 8vw, 6rem));
}

.reportage-bild {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--saal-tief);
}

.reportage-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 32%;
	filter: brightness(0.82) saturate(0.95);
	animation: reportage-bild 7s var(--ease-aus) both;
}

@keyframes reportage-bild {
	from {
		transform: scale(1.08);
	}
}

.reportage-bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgb(7 6 10 / 0.7), transparent 24%),
		linear-gradient(0deg, var(--saal) 0%, rgb(7 6 10 / 0.86) 20%, rgb(7 6 10 / 0.35) 52%, transparent 72%);
}

.reportage-text {
	display: grid;
	gap: 1rem;
	max-width: calc(58rem + 2 * var(--rand));
	animation: reportage-titel 1.4s var(--ease-aus) 0.15s both;
}

@keyframes reportage-titel {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}

/* Rubrikzeile wie auf einer Zeitungsseite: Rubrik · Datum · Lesezeit. */
.reportage-rubrik {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.9rem;
	color: var(--elfenbein-2);
	font-family: var(--schrift-titel);
	font-size: 0.875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.reportage-rubrik > * + *::before {
	content: "";
	display: inline-block;
	width: 1.1rem;
	height: 1px;
	margin-right: 0.9rem;
	vertical-align: middle;
	background: var(--gold);
}

.reportage-rubrik a {
	color: var(--gold-hell);
	text-decoration: none;
}

.reportage-rubrik a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.reportage-titel {
	max-width: 24ch;
	color: var(--elfenbein);
	font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem);
	line-height: 1.12;
	letter-spacing: 0.015em;
	text-shadow: 0 2px 30px rgb(7 6 10 / 0.7);
	text-wrap: balance;
}

.reportage-bildzeile {
	max-width: calc(58rem + 2 * var(--rand));
	margin-top: 0.25rem;
	color: var(--elfenbein-3);
	font-size: 0.9375rem;
	font-style: italic;
}

/* Lesespalte: größer, heller, ruhiger Zeilenabstand. */
.reportage-rahmen {
	max-width: calc(42rem + 2 * var(--rand));
	margin-inline: auto;
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.reportage-inhalt {
	max-width: none;
	padding-bottom: 0;
	font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	line-height: 1.75;
}

.reportage-inhalt p,
.reportage-inhalt li {
	color: var(--elfenbein);
}

/* Vorspann: der erste Absatz größer, mit goldenem Initial. */
.reportage-inhalt > p:first-of-type {
	font-size: 1.18em;
	line-height: 1.62;
}

.reportage-inhalt > p:first-of-type::first-letter {
	float: left;
	margin: 0.08em 0.12em 0 0;
	color: var(--gold-hell);
	font-family: var(--schrift-titel);
	font-size: 3.6em;
	line-height: 0.82;
}

/* Bilder im Text stehen breiter als die Spalte. */
.reportage-inhalt > .wp-block-image,
.reportage-inhalt > figure.wp-block-image,
.reportage-inhalt > p:has(> .beitrag-bild-link:only-child) {
	width: min(60rem, 100vw - 2 * var(--rand));
	margin-inline: calc(50% - min(30rem, 50vw - var(--rand)));
	margin-block: 2.25em;
}

.reportage-inhalt > .wp-block-image img,
.reportage-inhalt > p:has(> .beitrag-bild-link:only-child) img {
	display: block;
	width: 100%;
	height: auto;
}

.reportage-inhalt .wp-element-caption,
.reportage-inhalt figcaption {
	position: relative;
	max-width: 42rem;
	margin: 0.9rem auto 0;
	padding-left: 1.6rem;
	color: var(--elfenbein-2);
	font-size: 0.9375rem;
	font-style: italic;
}

.reportage-inhalt .wp-element-caption::before,
.reportage-inhalt figcaption::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.8em;
	width: 1rem;
	height: 1px;
	background: var(--gold);
}

/* Das erste Zitat des Beitrags, groß herausgestellt (inc/beitraege.php). */
.beitrag-zitat {
	position: relative;
	margin: 2.4em 0;
	padding: 0.4em 0 0.4em clamp(1.25rem, 3vw, 2.25rem);
	border-left: 1px solid var(--gold);
}


.beitrag-zitat p::before {
	content: "„";
	margin-right: 0.08em;
	color: var(--gold);
}

.beitrag-zitat p::after {
	content: "“";
	color: var(--gold);
}

.beitrag-zitat p {
	margin: 0;
	color: var(--elfenbein);
	font-family: var(--schrift-titel);
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

/* Schlusszeichen nach dem Text. */
.reportage-ende {
	display: flex;
	justify-content: center;
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}

.reportage-ende span {
	width: 0.55rem;
	height: 0.55rem;
	transform: rotate(45deg);
	background: var(--gold);
	box-shadow: -1.6rem 1.6rem 0 -0.12rem var(--gold-tief), 1.6rem -1.6rem 0 -0.12rem var(--gold-tief);
}

/* Weitere Meldungen: drei Karten nebeneinander, Bild oben. */
.reportage-weitere {
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
	border-top: 1px solid var(--linie);
}

.reportage-weitere-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.reportage-weitere-liste {
	display: grid;
	gap: 0 clamp(1.5rem, 3vw, 2.5rem);
}

.reportage-weitere-liste .beitrag-karte:first-child {
	border-top: 0;
	padding-top: 0;
}

@media (min-width: 56rem) {
	.reportage-weitere-liste {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.reportage-weitere-liste .beitrag-karte {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
		padding-top: 0;
		border-top: 0;
	}

	.reportage-weitere-liste .beitrag-karte-bild {
		aspect-ratio: 3 / 2;
	}
}

/* Lesefortschritt: feine goldene Linie unter der Navigation. */
.lesefortschritt {
	position: fixed;
	z-index: 60;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	pointer-events: none;
}

.lesefortschritt span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--gold-tief), var(--gold-hell));
	box-shadow: 0 0 8px rgb(255 214 140 / 0.5);
	transform: scaleX(var(--fortschritt, 0));
	transform-origin: 0 50%;
}

@media (prefers-reduced-motion: reduce) {
	.reportage-bild img,
	.reportage-text {
		animation: none;
	}
}

/* ==========================================================================
   Handy (unter 48rem): ruhiger und kompakter. Überschriften und Einleitungen
   mittig wie die übrigen Abschnitte, lange Bildfolgen zum Wischen statt
   untereinander, Bilder flacher. Die Computer-Ansicht bleibt unberührt.
   ========================================================================== */
@media (max-width: 47.99rem) {

	/* Abschnittsköpfe mittig */
	.abschnitt-kopf,
	.aktuelles-kopf,
	.gala-chronik-kopf,
	.gala-chronik-kopf > div:first-child,
	.gala-koepfe-text,
	.gala-naechste-raster > div:first-child {
		display: grid;
		justify-content: center;
		justify-items: center;
		text-align: center;
	}

	.abschnitt-kopf .einleitung,
	.aktuelles-unterzeile,
	.abschnitt-unterzeile,
	.gala-chronik-kopf .einleitung,
	.gala-koepfe-text .einleitung,
	.gala-naechste-raster .einleitung {
		margin-inline: auto;
	}

	.gala-veranstaltung-raster > .titel,
	.gala-kursaal-titel {
		text-align: center;
	}

	.gala-kursaal-text .einleitung {
		text-align: center;
	}

	/* Gala-Seite, Kopf: Foto flacher, damit Titel und Einleitung auf den
	   ersten Blick zu sehen sind; Titel und Text mittig. */
	.gala-saal-bild {
		height: clamp(15rem, 42vh, 21rem);
	}

	.gala-saal-text {
		justify-items: center;
		text-align: center;
	}

	.gala-saal-titel {
		font-size: clamp(2.1rem, 1rem + 6.4vw, 2.75rem);
	}

	/* Gala-Seite, „Der Abend in vier Momenten“: zum Wischen nebeneinander
	   statt vier großer Bilder untereinander. */
	.gala-momente {
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		gap: 1rem;
		margin-inline: calc(-1 * var(--rand));
		padding: 0 var(--rand) 0.5rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--rand);
		scrollbar-width: none;
	}

	.gala-momente::-webkit-scrollbar {
		display: none;
	}

	.gala-moment {
		scroll-snap-align: start;
	}

	.gala-moment-bild {
		aspect-ratio: 4 / 3;
	}

	/* Startseite, Vereine: etwas enger untereinander */
	.verein {
		padding-block: 1.4rem;
	}

	/* Galerie: kleinere Bildreihen, mehr Bilder je Reihe */
	.kontaktbogen {
		--zeile: 5.25rem;
		gap: 0.35rem;
	}

	.kontakt {
		max-width: calc(var(--v) * var(--zeile) * 1.5);
	}

	/* Startseite, Kopf: Daten und Dank mittig unter dem Logo */
	.saal-daten {
		justify-items: center;
		text-align: center;
	}

	.saal-daten .knopf {
		justify-self: center;
	}

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

	.kartenwahl-danach .knopf {
		margin-inline: auto;
	}

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

	/* Fußzeile: Marke mittig */
	.fuss-marke {
		display: grid;
		justify-items: center;
		text-align: center;
	}
}

/* Film-Player in Galerie und Beiträgen: wie der Einladungsfilm der Gala-Seite. */
.film-block {
	display: grid;
	gap: 0.6rem;
	margin: 0;
}

.inhalt .film-block {
	margin-block: 2em;
}

.film-leinwand.ohne-standbild {
	background: radial-gradient(60% 70% at 50% 40%, rgb(255 222 165 / 0.08), transparent 75%), var(--saal-hoch);
}

.film-leinwand img {
	filter: brightness(0.82) saturate(0.95);
}

.film-hinweis {
	color: var(--elfenbein-3);
	font-size: 0.875rem;
	line-height: 1.5;
}

.film-hinweis-titel {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--elfenbein-2);
	font-family: var(--schrift-titel);
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
}

.film-hinweis a {
	color: var(--gold-hell);
	text-underline-offset: 0.2em;
}