/*
Theme Name: Wirtshaus-Musikanten
Theme URI: https://www.wirtshaus-musikanten.de
Author: Sauerländer Wirtshaus-Musikanten
Description: Eigenständiges Theme für die Sauerländer Wirtshaus-Musikanten. Bayerische Blasmusik aus dem Märkischen Sauerland – traditionell im Ton, modern im Auftritt. Bindet keine externen Dienste ein.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wirtshaus-musikanten
Tags: musik, veranstaltung, blasmusik, responsive
*/

/* ==========================================================================
   1. Design-Token
   Farbwelt aus den Fotos abgeleitet: Trachtengrün der Westen, Messing der
   Instrumente, Cremeweiß wie Papier, dunkles Holz wie die Wirtshausstube.
   ========================================================================== */

:root {
	/* Grün – Tracht, Wald, Sauerland */
	--gruen-900: #14261d;
	--gruen-800: #1d3729;
	--gruen-700: #2a5140;
	--gruen-600: #3a6b52;
	--gruen-300: #a8c4b3;
	--gruen-100: #e2ece6;

	/* Messing – Tuba, Flügelhorn, Trompete */
	--messing-700: #8a6114;
	--messing-600: #a67518;
	--messing-500: #c8952b;
	--messing-400: #ddb257;
	--messing-200: #f0dfb4;

	/* Creme – Papier, Putz, Schaumkrone */
	--creme-50:  #fdfbf6;
	--creme-100: #f8f3e9;
	--creme-200: #efe6d5;
	--creme-300: #ded0b8;

	/* Holz, Enzian, Signalrot */
	--holz-800: #3a2a1d;
	--enzian:   #1d4e79;
	--rot:      #93291f;

	/* Rollen */
	--grund:      var(--creme-50);
	--grund-alt:  var(--creme-100);
	--text:       var(--gruen-900);
	--text-leise: #55665b;
	--linie:      var(--creme-300);
	--akzent:     var(--messing-600);

	/* Typografie */
	--schrift-text:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--schrift-titel: "Bitter", Georgia, "Times New Roman", serif;

	--gr-basis: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
	--gr-klein: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
	--gr-mini:  0.8125rem;
	--gr-h1:    clamp(2.15rem, 1.45rem + 3.1vw, 4.15rem);
	--gr-h2:    clamp(1.65rem, 1.28rem + 1.6vw, 2.6rem);
	--gr-h3:    clamp(1.25rem, 1.14rem + 0.5vw, 1.55rem);
	--gr-h4:    clamp(1.08rem, 1.03rem + 0.25vw, 1.22rem);
	--gr-lead:  clamp(1.15rem, 1.06rem + 0.4vw, 1.4rem);

	/* Abstände */
	--a-1: 0.25rem;
	--a-2: 0.5rem;
	--a-3: 0.75rem;
	--a-4: 1rem;
	--a-5: 1.5rem;
	--a-6: 2rem;
	--a-7: 3rem;
	--a-8: 4rem;
	--a-9: clamp(3.5rem, 2rem + 6vw, 7rem);

	/* Maße */
	--breite:      1180px;
	--breite-weit: 1440px;
	--breite-text: 66ch;
	--radius:       4px;
	--radius-gross: 8px;

	/* Schatten – sparsam, nur wo Tiefe echte Information ist */
	--schatten-1: 0 1px 2px rgba(20, 38, 29, 0.08), 0 2px 8px rgba(20, 38, 29, 0.05);
	--schatten-2: 0 2px 4px rgba(20, 38, 29, 0.09), 0 8px 24px rgba(20, 38, 29, 0.09);
	--schatten-3: 0 4px 8px rgba(20, 38, 29, 0.10), 0 16px 40px rgba(20, 38, 29, 0.13);

	color-scheme: light;
}

/* ==========================================================================
   2. Grundlagen
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--grund);
	color: var(--text);
	font-family: var(--schrift-text);
	font-size: var(--gr-basis);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--schrift-titel);
	font-weight: 700;
	line-height: 1.13;
	margin: 0 0 var(--a-4);
	color: var(--gruen-900);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 { font-size: var(--gr-h1); }
h2 { font-size: var(--gr-h2); }
h3 { font-size: var(--gr-h3); }
h4 { font-size: var(--gr-h4); }

p { margin: 0 0 var(--a-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--messing-700);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.15s ease;
}
a:hover { color: var(--gruen-700); }

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

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

::selection { background: var(--messing-200); color: var(--gruen-900); }

hr { border: 0; border-top: 1px solid var(--linie); margin: var(--a-7) 0; }

/* ==========================================================================
   3. Bausteine
   ========================================================================== */

.wm-huelle { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.wm-huelle--weit   { width: min(100% - 2.5rem, var(--breite-weit)); }
.wm-huelle--schmal { width: min(100% - 2.5rem, 780px); }

.wm-abschnitt { padding-block: var(--a-9); }
.wm-abschnitt--eng   { padding-block: var(--a-8); }
.wm-abschnitt--creme { background: var(--creme-100); }
.wm-abschnitt--dunkel { background: var(--gruen-800); color: var(--creme-100); }
.wm-abschnitt--dunkel h2,
.wm-abschnitt--dunkel h3 { color: var(--creme-50); }
/* Knöpfe ausnehmen: sonst färbt diese Regel auch den goldenen Hauptknopf
   golden ein – Text und Fläche wären dann fast gleich hell. */
.wm-abschnitt--dunkel a:not(.wm-knopf) { color: var(--messing-400); }

.wm-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wm-sprung {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--a-3) var(--a-5);
	background: var(--messing-500);
	color: var(--gruen-900);
	font-weight: 600;
	text-decoration: none;
}
.wm-sprung:focus { left: var(--a-4); top: var(--a-4); }

/* --- Überschrift mit Zierlinie ------------------------------------------ */

.wm-kopf { margin-bottom: var(--a-7); }
.wm-kopf--mitte { text-align: center; }
.wm-kopf--mitte .wm-kopf__strich { margin-inline: auto; }
.wm-kopf--mitte .wm-lead { margin-inline: auto; }

.wm-kopf__oben {
	display: block;
	font-family: var(--schrift-text);
	font-size: var(--gr-klein);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--messing-700);
	margin-bottom: var(--a-2);
}
.wm-abschnitt--dunkel .wm-kopf__oben { color: var(--messing-400); }

.wm-kopf__strich {
	width: 68px; height: 4px;
	margin-top: var(--a-4);
	background: var(--messing-500);
	border-radius: 2px;
}

.wm-lead {
	font-size: var(--gr-lead);
	line-height: 1.55;
	color: var(--text-leise);
	max-width: var(--breite-text);
}
.wm-abschnitt--dunkel .wm-lead { color: var(--gruen-300); }

/* --- Rautenband (dezent, kein Kirmes) ----------------------------------- */

.wm-raute {
	height: 7px;
	background-image:
		linear-gradient(135deg, var(--enzian) 25%, transparent 25%),
		linear-gradient(225deg, var(--enzian) 25%, transparent 25%),
		linear-gradient(315deg, var(--enzian) 25%, transparent 25%),
		linear-gradient(45deg,  var(--enzian) 25%, transparent 25%);
	background-size: 14px 14px;
	background-color: var(--creme-50);
	opacity: 0.5;
}

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

.wm-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--a-2);
	min-height: 52px;
	padding: var(--a-3) var(--a-6);
	font-family: var(--schrift-text);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.wm-knopf:active { transform: translateY(1px); }
.wm-knopf svg { width: 20px; height: 20px; flex-shrink: 0; }

.wm-knopf--haupt {
	background: var(--messing-500);
	border-color: var(--messing-500);
	color: var(--gruen-900);
	box-shadow: var(--schatten-1);
}
.wm-knopf--haupt:hover {
	background: var(--messing-400);
	border-color: var(--messing-400);
	color: var(--gruen-900);
	box-shadow: var(--schatten-2);
}

.wm-knopf--zweit { background: transparent; border-color: currentColor; color: var(--gruen-800); }
.wm-knopf--zweit:hover { background: var(--gruen-800); border-color: var(--gruen-800); color: var(--creme-50); }

.wm-knopf--hell { background: transparent; border-color: var(--creme-200); color: var(--creme-50); }
.wm-knopf--hell:hover { background: var(--creme-50); color: var(--gruen-900); border-color: var(--creme-50); }

.wm-knopfreihe { display: flex; flex-wrap: wrap; gap: var(--a-4); }
.wm-knopfreihe--mitte { justify-content: center; }

/* ==========================================================================
   4. Kopfbereich
   ========================================================================== */

.wm-oben { background: var(--gruen-900); color: var(--gruen-300); font-size: var(--gr-mini); }
.wm-oben__inhalt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--a-3);
	padding-block: var(--a-2);
	min-height: 38px;
}
.wm-oben__spruch { letter-spacing: 0.04em; }
.wm-oben__kontakt { display: flex; align-items: center; gap: var(--a-4); }
.wm-oben a {
	color: var(--messing-400);
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}
.wm-oben a:hover { color: var(--messing-200); text-decoration: underline; }
.wm-oben svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
	.wm-oben__spruch { display: none; }
	.wm-oben__inhalt { justify-content: center; }
}

.wm-kopfleiste {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(253, 251, 246, 0.97);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--linie);
	transition: box-shadow 0.2s ease;
}
.wm-kopfleiste.ist-gescrollt { box-shadow: var(--schatten-2); }

.wm-kopfleiste__inhalt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--a-4);
	min-height: 74px;
	padding-block: var(--a-2);
}

/* Wortmarke */
.wm-marke {
	display: flex;
	align-items: center;
	gap: var(--a-3);
	text-decoration: none;
	color: var(--gruen-900);
	flex-shrink: 0;
}
.wm-marke:hover { color: var(--gruen-900); }
.wm-marke__zeichen { flex-shrink: 0; width: 46px; height: 46px; color: var(--messing-600); }
.wm-marke__text { display: flex; flex-direction: column; line-height: 1.05; }
.wm-marke__klein {
	font-family: var(--schrift-text);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--messing-700);
}
.wm-marke__gross {
	font-family: var(--schrift-titel);
	font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}
@media (max-width: 380px) { .wm-marke__zeichen { display: none; } }

/* Navigation */
.wm-nav__liste { display: flex; align-items: center; gap: var(--a-1); list-style: none; margin: 0; padding: 0; }
.wm-nav a {
	display: block;
	padding: var(--a-2) var(--a-3);
	font-weight: 600;
	font-size: 1rem;
	color: var(--gruen-800);
	text-decoration: none;
	border-radius: var(--radius);
	position: relative;
	white-space: nowrap;
}
.wm-nav a::after {
	content: "";
	position: absolute;
	left: var(--a-3); right: var(--a-3);
	bottom: 4px;
	height: 3px;
	background: var(--messing-500);
	border-radius: 2px;
	transform: scaleX(0);
	transition: transform 0.18s ease;
}
.wm-nav a:hover { color: var(--gruen-900); background: var(--creme-100); }
.wm-nav a:hover::after,
.wm-nav .current-menu-item > a::after,
.wm-nav .current_page_item > a::after,
.wm-nav .current-menu-parent > a::after { transform: scaleX(1); }
.wm-nav .current-menu-item > a,
.wm-nav .current_page_item > a { color: var(--gruen-900); }

.wm-nav__knopf { display: none; }

.wm-kopfleiste__aktion { display: flex; align-items: center; gap: var(--a-3); }
.wm-kopfleiste__aktion .wm-knopf { min-height: 44px; padding: var(--a-2) var(--a-4); font-size: 0.95rem; }

/* Burger */
.wm-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	padding: 0;
	background: transparent;
	border: 2px solid var(--linie);
	border-radius: var(--radius);
	cursor: pointer;
	color: var(--gruen-800);
}
.wm-burger:hover { background: var(--creme-100); border-color: var(--gruen-600); }
.wm-burger__balken {
	display: block;
	position: relative;
	width: 22px; height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: background-color 0.15s ease;
}
.wm-burger__balken::before,
.wm-burger__balken::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px; height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease;
}
.wm-burger__balken::before { top: -7px; }
.wm-burger__balken::after  { top: 7px; }
.wm-burger[aria-expanded="true"] .wm-burger__balken { background: transparent; }
.wm-burger[aria-expanded="true"] .wm-burger__balken::before { transform: translateY(7px) rotate(45deg); }
.wm-burger[aria-expanded="true"] .wm-burger__balken::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
	.wm-burger { display: inline-flex; }
	.wm-kopfleiste__aktion .wm-knopf { display: none; }
	.wm-nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--creme-50);
		border-bottom: 3px solid var(--messing-500);
		box-shadow: var(--schatten-3);
		max-height: calc(100dvh - 74px);
		overflow-y: auto;
		display: none;
	}
	.wm-nav.ist-offen { display: block; }
	.wm-nav__liste { flex-direction: column; align-items: stretch; gap: 0; padding: var(--a-3); }
	.wm-nav a {
		padding: var(--a-4);
		font-size: 1.15rem;
		border-bottom: 1px solid var(--creme-200);
		border-radius: 0;
	}
	.wm-nav a::after { display: none; }
	.wm-nav li:last-child a { border-bottom: 0; }
	.wm-nav .current-menu-item > a,
	.wm-nav .current_page_item > a { background: var(--creme-100); border-left: 4px solid var(--messing-500); }
	.wm-nav__knopf { display: block; margin-top: var(--a-3); padding: 0 var(--a-3) var(--a-3); }
	.wm-nav__knopf .wm-knopf { width: 100%; }
}

/* ==========================================================================
   5. Bühne (Hero)
   ========================================================================== */

.wm-buehne {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(440px, 76vh, 760px);
	background: var(--gruen-900);
	overflow: hidden;
}
/* Das Bühnenbild ist ein Hochformat (1458×1944), der Rahmen ist breit.
   Bei object-fit: cover bleibt auf einem 1600×720-Schirm nur ein Streifen von
   rund 34 % der Bildhöhe stehen. 58 % legt ihn auf 38–72 % des Fotos: alle
   vier Köpfe komplett drin, oben noch etwas Luft, unten bis zu den Händen. */
.wm-buehne__bild {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 58%;
}
/* Der Schleier dunkelt nur so weit ab, wie der Text es zum Lesen braucht,
   und zwar neutral statt grün – das Foto behält seine eigenen Farben.
   Nachgemessen für das Bandfoto (hellste 2 % der Textzone, 1600x720):
   cremeweiße Schrift kommt auf 7,2:1, das Messing der Kopfzeile auf 5,6:1.
   Der Verlauf trägt das Motiv also unverändert – nicht abschwächen, die
   helle Wiese links unten liegt genau hinter dem Fließtext.
   Der Verlauf läuft seitlich: Der Text sitzt links, die rechte Bildhälfte
   bleibt dadurch unberührt. Er greift nur zwischen 901 und 1199 px – darunter
   ist die Bühne gestapelt, darüber geteilt. */
.wm-buehne__schleier {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right,
			rgba(0, 0, 0, 0.66) 0%,
			rgba(0, 0, 0, 0.58) 30%,
			rgba(0, 0, 0, 0.40) 52%,
			rgba(0, 0, 0, 0.12) 76%,
			rgba(0, 0, 0, 0) 92%),
		linear-gradient(to top,
			rgba(0, 0, 0, 0.30) 0%,
			rgba(0, 0, 0, 0.06) 42%,
			rgba(0, 0, 0, 0) 70%);
}

.wm-buehne__inhalt {
	position: relative;
	padding-block: var(--a-8) var(--a-9);
	color: var(--creme-50);
}

/* Geteilte Bühne ab 1200 px.
   Das Bandfoto ist ein Hochformat. Als vollflächiger Grund liegt die
   Überschrift zwangsläufig auf den beiden linken Musikanten – zwei von vier
   verschwinden hinter der Schrift. Ab dieser Breite bekommt das Foto deshalb
   die rechte Hälfte für sich, der Text steht links auf der Hausfarbe.
   Der Text ist dann höchstens 42vw breit: So bleibt er auch bei 1200 px
   diesseits der Kante, die bei genau 50 % läuft.
   Der Ausschnitt sitzt tiefer als auf schmalen Schirmen (56 statt 58 %):
   In der halbbreiten Spalte ist mehr Bildhöhe sichtbar, die Kapelle steht
   dadurch groß in der Mitte statt klein unter der Fahne. */
@media (min-width: 1200px) {
	.wm-buehne { min-height: clamp(560px, 78vh, 820px); }
	.wm-buehne__bild {
		left: 50%;
		width: 50%;
		object-position: center 56%;
	}
	/* Statt der ganzflächigen Abdunklung nur noch ein schmaler Übergang an
	   der Kante – er nimmt der Trennlinie die Härte, ohne das Foto zu trüben. */
	.wm-buehne__schleier {
		left: 50%;
		width: 9%;
		background: linear-gradient(to right,
			var(--gruen-900) 0%,
			rgba(20, 38, 29, 0.45) 40%,
			rgba(20, 38, 29, 0) 100%);
	}
	.wm-buehne__text { max-width: min(36rem, 42vw); }
}

/* Die Breitenbegrenzung sitzt hier und nicht an der Hülle: Die Hülle ist
   mittig ausgerichtet, eine Begrenzung an ihr würde den Text in die
   Bildmitte schieben statt ihn links zu halten.
   Gemessen am Bild: weiter rechts wird der Untergrund zu hell für weiße
   Schrift (Instrumente im Sonnenlicht). */
.wm-buehne__text { max-width: 36rem; }
.wm-buehne__oben {
	display: inline-flex;
	align-items: center;
	gap: var(--a-3);
	margin-bottom: var(--a-4);
	padding: 0.35rem 0.9rem 0.35rem 0.35rem;
	background: rgba(253, 251, 246, 0.12);
	border: 1px solid rgba(253, 251, 246, 0.25);
	border-radius: 999px;
	font-size: var(--gr-mini);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--messing-200);
	backdrop-filter: blur(4px);
}
.wm-buehne__punkt {
	width: 22px; height: 22px;
	display: grid; place-items: center;
	background: var(--messing-500);
	border-radius: 50%;
	color: var(--gruen-900);
}
.wm-buehne__punkt svg { width: 13px; height: 13px; }
.wm-buehne h1 {
	color: var(--creme-50);
	margin-bottom: var(--a-4);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 22px rgba(0, 0, 0, 0.55);
}
.wm-buehne__lead {
	font-size: var(--gr-lead);
	line-height: 1.5;
	color: var(--creme-100);
	margin-bottom: var(--a-6);
	max-width: 30rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 14px rgba(0, 0, 0, 0.6);
}

/* Der Block steht bewusst am Ende des Abschnitts: Eine Media-Query hat
   dieselbe Spezifität wie die Regel, die sie überschreiben soll – gewinnt
   also nur, wenn sie danach steht. Weiter oben blieben padding-block,
   margin-bottom und max-width wirkungslos. */
/* Schmale Schirme: gestapelt statt übereinander.
   Auf dem Handy steht der Text über die volle Breite – ein Verlauf, egal in
   welcher Richtung, muss dann das ganze Bild abdunkeln. Nachgemessen mit
   dem früheren Schleier (Zeilenkästen des echten Textes, 390x844): Die
   Überschrift kam auf 5,8:1, der Fließtext auf 6,9:1, die Kopfzeile aber nur
   auf 3,0:1 – unter dem Mindestwert für Kleintext. Entscheidender als die
   Zahlen war die Unruhe: Unter der Überschrift schwankte der Untergrund um
   das 3,4-fache (Fahne, Himmel, Blätter), die Buchstaben liefen über Kanten.
   Und das Foto war unter der nötigen Abdunklung kaum noch zu erkennen.
   Deshalb hier dasselbe Prinzip wie ab 1200 px, nur vertikal: Das Foto
   bekommt einen eigenen Streifen, der Text steht darunter auf der Hausfarbe.
   Gemessen: Überschrift 15,3:1, Fließtext 14,3:1, Kopfzeile 8,9:1, Unruhe
   1,00 – und das Bild ist erstmals unverschleiert zu sehen.
   Die Höhe ist an die Viewporthöhe gekoppelt, damit „Kapelle anfragen“ auf
   allen geprüften Geräten (360x740 bis 430x932) im ersten Sichtfeld bleibt.
   Der Ausschnitt bei 48 % legt das Fenster auf die Gesichter und Instrumente:
   Fahne oben angeschnitten, alle vier Musikanten drin. */
@media (max-width: 900px) {
	.wm-buehne {
		display: block;
		min-height: 0;
		background: var(--gruen-900);
	}
	.wm-buehne__bild {
		position: static;
		display: block;
		width: 100%;
		height: clamp(170px, 26vh, 300px);
		object-position: center 48%;
	}
	.wm-buehne__schleier { display: none; }
	.wm-buehne__inhalt { padding-block: var(--a-5) var(--a-7); }
	.wm-buehne__text { max-width: none; }
	.wm-buehne__lead { max-width: none; margin-bottom: var(--a-5); }
	/* Auf deckendem Grund trägt der Schatten nichts mehr bei, er macht die
	   Schrift nur weicher. */
	.wm-buehne h1,
	.wm-buehne__lead { text-shadow: none; }
	/* Kein Foto mehr hinter der Kopfzeile: Das helle Feld reicht wieder. */
	.wm-buehne__oben {
		background: rgba(253, 251, 246, 0.10);
		border-color: rgba(240, 223, 180, 0.30);
		backdrop-filter: none;
	}
}

/* Kennzahlen unter der Bühne */
.wm-fakten { background: var(--gruen-800); color: var(--creme-100); border-top: 3px solid var(--messing-500); }
.wm-fakten__liste {
	display: grid;
	/* Feste Stufen statt auto-fit: sonst bleibt bei Tablet-Breite eine
	   angebrochene Zeile mit leerer Fläche stehen. */
	grid-template-columns: 1fr;
	gap: 1px;
	background: rgba(253, 251, 246, 0.14);
	list-style: none;
	margin: 0; padding: 0;
}
.wm-fakten__eintrag { background: var(--gruen-800); padding: var(--a-5) var(--a-4); text-align: center; }
.wm-fakten__zahl {
	display: block;
	font-family: var(--schrift-titel);
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
	font-weight: 700;
	color: var(--messing-400);
	line-height: 1.1;
}
.wm-fakten__wort {
	display: block;
	margin-top: var(--a-1);
	font-size: var(--gr-klein);
	color: var(--gruen-300);
	letter-spacing: 0.02em;
}
@media (min-width: 520px) { .wm-fakten__liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .wm-fakten__liste { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   6. Raster & Karten
   ========================================================================== */

.wm-zwei { display: grid; grid-template-columns: 1fr; gap: var(--a-7); align-items: center; }
@media (min-width: 900px) {
	.wm-zwei { grid-template-columns: 1fr 1fr; gap: var(--a-8); }
	.wm-zwei--breit-links  { grid-template-columns: 1.25fr 1fr; }
	.wm-zwei--breit-rechts { grid-template-columns: 1fr 1.25fr; }
	.wm-zwei__erst { order: -1; }
}

.wm-raster { display: grid; gap: var(--a-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.wm-raster--vier { grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); }
.wm-raster--zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.wm-karte {
	display: flex;
	flex-direction: column;
	background: var(--creme-50);
	border: 1px solid var(--linie);
	border-radius: var(--radius-gross);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.wm-karte--schwebt:hover { transform: translateY(-4px); box-shadow: var(--schatten-3); border-color: var(--messing-400); }
.wm-karte__bild { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--creme-200); }
.wm-karte__bild--breit { aspect-ratio: 16 / 10; }
.wm-karte__bild--passen { aspect-ratio: auto; object-fit: contain; padding: var(--a-4); }
.wm-karte__text { padding: var(--a-5); flex: 1; display: flex; flex-direction: column; }
.wm-karte__titel { margin-bottom: var(--a-1); }
.wm-karte__rolle {
	font-size: var(--gr-klein);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--messing-700);
	margin-bottom: var(--a-3);
}
.wm-karte__fuss { margin-top: auto; padding-top: var(--a-4); }

/* Bild mit Messingrahmen */
.wm-bildrahmen { position: relative; border-radius: var(--radius-gross); overflow: hidden; box-shadow: var(--schatten-2); }
.wm-bildrahmen img { width: 100%; }
.wm-bildrahmen::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(200, 149, 43, 0.4);
	border-radius: var(--radius-gross);
	pointer-events: none;
	z-index: 1;
}
.wm-bildunterschrift { margin-top: var(--a-3); font-size: var(--gr-klein); color: var(--text-leise); font-style: italic; }

/* ==========================================================================
   7. Termine
   ========================================================================== */

.wm-terminliste { display: grid; gap: var(--a-4); }

.wm-termin {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--a-5);
	align-items: start;
	padding: var(--a-5);
	background: var(--creme-50);
	border: 1px solid var(--linie);
	border-left: 5px solid var(--messing-500);
	border-radius: var(--radius-gross);
	transition: box-shadow 0.18s ease;
}
.wm-termin:hover { box-shadow: var(--schatten-2); }
.wm-termin--vorbei { opacity: 0.62; border-left-color: var(--creme-300); }
@media (max-width: 560px) { .wm-termin { grid-template-columns: 1fr; gap: var(--a-4); } }

.wm-termin__datum {
	display: grid;
	place-items: center;
	align-content: center;
	min-width: 88px;
	padding: var(--a-3) var(--a-2);
	background: var(--gruen-800);
	color: var(--creme-50);
	border-radius: var(--radius);
	text-align: center;
	line-height: 1.1;
}
.wm-termin--vorbei .wm-termin__datum { background: var(--text-leise); }
.wm-termin__tag { font-family: var(--schrift-titel); font-size: 1.9rem; font-weight: 700; }
.wm-termin__monat {
	font-size: var(--gr-mini);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--messing-400);
	margin-top: 2px;
}
.wm-termin__jahr { font-size: var(--gr-mini); color: var(--gruen-300); margin-top: 2px; }

.wm-termin__titel { margin-bottom: var(--a-2); font-size: var(--gr-h4); }
.wm-termin__zeilen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--a-2) var(--a-5);
	margin: 0 0 var(--a-3);
	font-size: var(--gr-klein);
	color: var(--text-leise);
	list-style: none;
	padding: 0;
}
.wm-termin__zeilen li { display: inline-flex; align-items: center; gap: 0.45em; margin: 0; }
.wm-termin__zeilen svg { width: 17px; height: 17px; color: var(--messing-600); flex-shrink: 0; }
.wm-termin__text { font-size: var(--gr-klein); }

.wm-merker {
	display: inline-block;
	padding: 0.2em 0.7em;
	font-size: var(--gr-mini);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 999px;
}
.wm-merker--oeffentlich { background: var(--gruen-100); color: var(--gruen-700); }
.wm-merker--geschlossen { background: var(--creme-200); color: var(--holz-800); }

.wm-leermeldung {
	padding: var(--a-7) var(--a-5);
	text-align: center;
	background: var(--creme-100);
	border: 2px dashed var(--creme-300);
	border-radius: var(--radius-gross);
	color: var(--text-leise);
}
.wm-leermeldung strong { display: block; font-size: var(--gr-h4); color: var(--text); margin-bottom: var(--a-2); font-family: var(--schrift-titel); }

/* ==========================================================================
   8. Zitat
   ========================================================================== */

.wm-zitat { max-width: 46rem; margin: 0 auto; text-align: center; padding: 0; }
.wm-zitat__text {
	font-family: var(--schrift-titel);
	font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.35rem);
	font-weight: 600;
	line-height: 1.32;
	margin: 0 0 var(--a-5);
	color: var(--creme-50);
	text-wrap: balance;
}
.wm-zitat__text::before { content: "\201E"; color: var(--messing-400); }
.wm-zitat__text::after  { content: "\201C"; color: var(--messing-400); }
.wm-zitat__quelle {
	font-size: var(--gr-klein);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--messing-400);
	font-style: normal;
}

/* ==========================================================================
   9. Galerie
   ========================================================================== */

.wm-galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--a-4); }
.wm-galerie__feld {
	position: relative;
	display: block;
	margin: 0; padding: 0;
	border: 0;
	background: var(--creme-200);
	border-radius: var(--radius-gross);
	overflow: hidden;
	cursor: zoom-in;
	aspect-ratio: 4 / 3;
}
.wm-galerie__feld img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.wm-galerie__feld:hover img { transform: scale(1.05); }
.wm-galerie__feld::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(20,38,29,0.45), transparent 45%);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.wm-galerie__feld:hover::after { opacity: 1; }
.wm-galerie--presse .wm-galerie__feld { aspect-ratio: 3 / 4; background: var(--creme-100); }
.wm-galerie--presse .wm-galerie__feld img { object-fit: contain; padding: var(--a-3); }

/* Lightbox */
.wm-lupe {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	place-items: center;
	padding: var(--a-5);
	background: rgba(20, 38, 29, 0.95);
	backdrop-filter: blur(6px);
}
.wm-lupe.ist-offen { display: grid; }
.wm-lupe__buehne { display: grid; justify-items: center; }
.wm-lupe__bild {
	max-width: min(96vw, 1400px);
	max-height: 82vh;
	width: auto;
	object-fit: contain;
	border-radius: var(--radius);
	box-shadow: var(--schatten-3);
	background: var(--creme-50);
}
.wm-lupe__text { margin-top: var(--a-4); text-align: center; color: var(--creme-100); font-size: var(--gr-klein); max-width: 60ch; }
.wm-lupe__zu, .wm-lupe__pfeil {
	position: absolute;
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	background: rgba(253, 251, 246, 0.12);
	border: 1px solid rgba(253, 251, 246, 0.3);
	border-radius: 50%;
	color: var(--creme-50);
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1;
	transition: background-color 0.15s ease;
}
.wm-lupe__zu:hover, .wm-lupe__pfeil:hover { background: rgba(253, 251, 246, 0.28); }
.wm-lupe__zu { top: var(--a-5); right: var(--a-5); }
.wm-lupe__pfeil--zurueck { left: var(--a-4); top: 50%; transform: translateY(-50%); }
.wm-lupe__pfeil--vor     { right: var(--a-4); top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
	.wm-lupe__pfeil--zurueck { left: var(--a-2); }
	.wm-lupe__pfeil--vor { right: var(--a-2); }
	.wm-lupe__zu { top: var(--a-3); right: var(--a-3); }
}

/* ==========================================================================
   10. Video mit Einwilligung (DSGVO)
   ========================================================================== */

.wm-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--gruen-900);
	border-radius: var(--radius-gross);
	overflow: hidden;
	box-shadow: var(--schatten-2);
}
.wm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wm-video__deckel {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	align-content: center;
	gap: var(--a-4);
	padding: var(--a-6);
	text-align: center;
	color: var(--creme-100);
	cursor: pointer;
	border: 0;
	width: 100%;
	font-family: inherit;
	font-size: inherit;
	background: transparent;
	overflow: hidden;
}
.wm-video__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wm-video__schleier { position: absolute; inset: 0; background: linear-gradient(rgba(20,38,29,0.68), rgba(20,38,29,0.86)); }
.wm-video__mitte { position: relative; display: grid; place-items: center; gap: var(--a-4); }
.wm-video__deckel:hover .wm-video__knopf { background: var(--messing-400); transform: scale(1.06); }
.wm-video__knopf {
	display: grid;
	place-items: center;
	width: 76px; height: 76px;
	background: var(--messing-500);
	border-radius: 50%;
	color: var(--gruen-900);
	transition: transform 0.18s ease, background-color 0.18s ease;
	box-shadow: var(--schatten-2);
}
.wm-video__knopf svg { width: 30px; height: 30px; margin-left: 4px; }
.wm-video__titel { font-family: var(--schrift-titel); font-size: var(--gr-h3); color: var(--creme-50); margin: 0; }
.wm-video__hinweis { font-size: var(--gr-klein); max-width: 46ch; color: var(--creme-200); margin: 0; }
.wm-video__hinweis strong { color: var(--creme-50); }

/* ==========================================================================
   11. Formular
   ========================================================================== */

.wm-formular { display: grid; gap: var(--a-5); }
.wm-formular__paar { display: grid; gap: var(--a-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.wm-feld { display: grid; gap: var(--a-2); }
.wm-feld__marke { font-weight: 700; font-size: var(--gr-klein); }
.wm-feld__marke .noetig { color: var(--rot); }
.wm-feld__hilfe { font-size: var(--gr-mini); color: var(--text-leise); }

.wm-formular input[type="text"],
.wm-formular input[type="email"],
.wm-formular input[type="tel"],
.wm-formular input[type="date"],
.wm-formular textarea,
.wm-formular select {
	width: 100%;
	min-height: 52px;
	padding: var(--a-3) var(--a-4);
	font-family: inherit;
	font-size: 1.05rem;
	color: var(--text);
	background: var(--creme-50);
	border: 2px solid var(--creme-300);
	border-radius: var(--radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wm-formular textarea { min-height: 170px; resize: vertical; line-height: 1.6; }
.wm-formular input:focus,
.wm-formular textarea:focus,
.wm-formular select:focus {
	border-color: var(--messing-500);
	box-shadow: 0 0 0 4px rgba(200, 149, 43, 0.18);
	outline: none;
}
.wm-formular input[aria-invalid="true"],
.wm-formular textarea[aria-invalid="true"] { border-color: var(--rot); }

.wm-zustimmung {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--a-3);
	align-items: start;
	font-size: var(--gr-klein);
	line-height: 1.5;
}
.wm-zustimmung input[type="checkbox"] { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--messing-600); }

.wm-falle { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.wm-meldung {
	padding: var(--a-4) var(--a-5);
	border-radius: var(--radius);
	border-left: 5px solid;
	font-size: var(--gr-klein);
}
.wm-meldung--gut  { background: var(--gruen-100); border-color: var(--gruen-600); color: var(--gruen-800); }
.wm-meldung--fehl { background: #fbeae8; border-color: var(--rot); color: #6d1f17; }
.wm-meldung ul { margin: var(--a-2) 0 0; padding-left: 1.2em; }
.wm-meldung strong { font-family: var(--schrift-titel); }

/* Kontaktdaten-Kasten */
.wm-kontaktkasten {
	padding: var(--a-6);
	background: var(--creme-100);
	border: 1px solid var(--linie);
	border-radius: var(--radius-gross);
}
.wm-kontaktkasten dl { margin: 0; display: grid; gap: var(--a-4); }
.wm-kontaktkasten dt {
	font-size: var(--gr-mini);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--messing-700);
	margin-bottom: 2px;
}
.wm-kontaktkasten dd { margin: 0; font-size: 1.1rem; }
.wm-kontaktkasten dd a { font-weight: 600; }

/* ==========================================================================
   12. Fußbereich
   ========================================================================== */

.wm-fuss {
	background: var(--gruen-900);
	color: var(--gruen-300);
	padding-block: var(--a-8) var(--a-5);
	font-size: var(--gr-klein);
}
.wm-fuss__raster {
	display: grid;
	gap: var(--a-7);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	padding-bottom: var(--a-7);
	border-bottom: 1px solid rgba(253, 251, 246, 0.14);
}
.wm-fuss h2, .wm-fuss h3 { font-size: 1.05rem; color: var(--creme-50); margin-bottom: var(--a-4); letter-spacing: 0.02em; }
.wm-fuss a:not(.wm-knopf) { color: var(--messing-400); text-decoration: none; }
.wm-fuss a:hover { color: var(--messing-200); text-decoration: underline; }
.wm-fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-2); }
.wm-fuss__marke { font-family: var(--schrift-titel); font-size: 1.3rem; color: var(--creme-50); margin-bottom: var(--a-3); line-height: 1.2; }
.wm-fuss__spruch { font-style: italic; color: var(--gruen-300); max-width: 34ch; }
.wm-fuss__unten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--a-3);
	padding-top: var(--a-5);
	font-size: var(--gr-mini);
	color: #7f9488;
}
.wm-fuss__unten nav { display: flex; flex-wrap: wrap; gap: var(--a-4); }
.wm-fuss__sozial { display: flex; gap: var(--a-3); margin-top: var(--a-4); }
.wm-fuss__sozial a { display: grid; place-items: center; width: 44px; height: 44px; background: rgba(253, 251, 246, 0.1); border-radius: var(--radius); color: var(--creme-100); }
.wm-fuss__sozial a:hover { background: var(--messing-500); color: var(--gruen-900); }
.wm-fuss__sozial svg { width: 21px; height: 21px; }

/* ==========================================================================
   13. Inhaltsseiten
   ========================================================================== */

/* Wie beim Bühnenbild: Das Foto bleibt in seinen eigenen Farben, die
   Abdunklung ist neutral und nur so stark, wie der Text sie braucht.
   Ein grün eingefärbter Überzug hat das Bild vorher vergraut. */
.wm-seitenkopf {
	position: relative;
	padding-block: var(--a-8) var(--a-7);
	background: var(--gruen-900);
	color: var(--creme-100);
	overflow: hidden;
}
.wm-seitenkopf__bild {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 1;
}
.wm-seitenkopf::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.60) 34%, rgba(0,0,0,0.34) 62%, rgba(0,0,0,0.18) 100%),
		linear-gradient(to top,   rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0) 100%);
}
.wm-seitenkopf__inhalt { position: relative; z-index: 1; }
.wm-seitenkopf h1 { text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 2px 18px rgba(0,0,0,0.5); }
.wm-seitenkopf__lead { text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.wm-seitenkopf h1 { color: var(--creme-50); margin-bottom: var(--a-3); }
/* Cremeweiß statt des blassen Grüns: Über einem Foto ist --gruen-300 zu hell,
   um sich abzusetzen, und zu dunkel, um hell zu wirken. Auf den fünf
   Unterseiten kam der Lead damit auf 1,7 bis 3,4:1 – durchgefallen. Rechnerisch
   ist der Wert mit dieser Farbe auf keinem Foto zu retten: Für 4,5:1 müsste
   der Untergrund dunkler als #4d4d4d sein, also praktisch schwarz. */
.wm-seitenkopf__lead { color: var(--creme-100); font-size: var(--gr-lead); max-width: 52ch; }
.wm-brotkrumen { margin-bottom: var(--a-4); font-size: var(--gr-mini); color: var(--gruen-300); letter-spacing: 0.04em; }
.wm-brotkrumen a { color: var(--messing-400); text-decoration: none; }
.wm-brotkrumen a:hover { text-decoration: underline; }

/* Schmale Schirme: Der seitliche Verlauf oben schützt nur die linke Bildhälfte.
   Auf dem Handy läuft der Text über die volle Breite, also muss der Verlauf
   von unten kommen und durchgehend tragen. Nachgemessen auf allen fünf
   Unterseiten bei 390 und 360 px: schlechtester Wert 4,7:1 (Brotkrumen),
   Überschriften ab 6,3:1, Leads ab 7,6:1. */
@media (max-width: 900px) {
	.wm-seitenkopf::after {
		background: linear-gradient(to top,
			rgba(0, 0, 0, 0.76) 0%,
			rgba(0, 0, 0, 0.70) 45%,
			rgba(0, 0, 0, 0.64) 78%,
			rgba(0, 0, 0, 0.60) 100%);
	}
	.wm-brotkrumen { color: var(--creme-200); }
	.wm-brotkrumen a { color: var(--messing-200); }
}

.wm-inhalt { max-width: var(--breite-text); }
.wm-inhalt--weit { max-width: none; }
.wm-inhalt > * + * { margin-top: var(--a-4); }
.wm-inhalt h2 { margin-top: var(--a-7); }
.wm-inhalt h3 { margin-top: var(--a-6); }
.wm-inhalt ul, .wm-inhalt ol { padding-left: 1.4em; }
.wm-inhalt li + li { margin-top: var(--a-2); }
.wm-inhalt blockquote {
	margin: var(--a-6) 0;
	padding: var(--a-4) var(--a-5);
	border-left: 5px solid var(--messing-500);
	background: var(--creme-100);
	font-family: var(--schrift-titel);
	font-size: 1.15rem;
	font-style: italic;
	border-radius: 0 var(--radius) var(--radius) 0;
}
.wm-inhalt img { border-radius: var(--radius); }
.wm-inhalt table { width: 100%; border-collapse: collapse; }
.wm-inhalt th, .wm-inhalt td { padding: var(--a-3); border-bottom: 1px solid var(--linie); text-align: left; }
.wm-inhalt th { font-family: var(--schrift-titel); background: var(--creme-100); }
.wm-tabellenhuelle { overflow-x: auto; }

/* Stilrichtungen als Marken */
.wm-marken { display: flex; flex-wrap: wrap; gap: var(--a-3); list-style: none; margin: 0; padding: 0; }
.wm-marken li {
	padding: var(--a-2) var(--a-4);
	margin: 0;
	background: var(--creme-100);
	border: 1px solid var(--creme-300);
	border-radius: 999px;
	font-weight: 600;
	font-size: var(--gr-klein);
}
.wm-abschnitt--dunkel .wm-marken li { background: rgba(253, 251, 246, 0.1); border-color: rgba(253, 251, 246, 0.24); color: var(--creme-100); }

/* Titelliste der CD */
.wm-titelliste { list-style: none; margin: 0; padding: 0; counter-reset: titel; }
.wm-titelliste li {
	display: grid;
	grid-template-columns: 2.4rem 1fr auto;
	gap: var(--a-3);
	align-items: baseline;
	padding: var(--a-3) 0;
	border-bottom: 1px solid var(--linie);
	margin: 0;
}
.wm-titelliste li::before {
	counter-increment: titel;
	content: counter(titel, decimal-leading-zero);
	font-family: var(--schrift-titel);
	font-weight: 700;
	color: var(--messing-600);
}
.wm-titelliste__art { font-size: var(--gr-klein); color: var(--text-leise); }

/* Aufruf-Kasten */
.wm-aufruf {
	position: relative;
	padding: var(--a-7) var(--a-6);
	background: var(--creme-100);
	border: 3px solid var(--gruen-800);
	border-radius: var(--radius-gross);
	text-align: center;
}
.wm-aufruf__stempel {
	display: inline-block;
	margin-bottom: var(--a-4);
	padding: 0.35em 1em;
	background: var(--rot);
	color: var(--creme-50);
	font-family: var(--schrift-titel);
	font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.6rem);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transform: rotate(-2.5deg);
	border-radius: 2px;
}
.wm-aufruf p { max-width: 52ch; margin-inline: auto; }

/* ==========================================================================
   14. Rücksicht & Druck
   ========================================================================== */

@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;
	}
	.wm-karte--schwebt:hover { transform: none; }
	.wm-galerie__feld:hover img { transform: none; }
}

@media print {
	.wm-oben, .wm-kopfleiste, .wm-fuss__sozial, .wm-burger, .wm-video, .wm-lupe, .wm-knopfreihe { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.wm-buehne { min-height: auto; }
	.wm-buehne__bild, .wm-buehne__schleier, .wm-seitenkopf__bild { display: none; }
	.wm-buehne, .wm-buehne h1, .wm-buehne__lead,
	.wm-seitenkopf, .wm-seitenkopf h1, .wm-abschnitt--dunkel { color: #000; background: #fff; }
	.wm-abschnitt { padding-block: 1rem; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ==========================================================================
   15. Blöcke aus dem Editor
   Die Fotogalerie pflegt die Kapelle über den Galerie-Block. Damit sie sich
   ins Bild fügt, bekommt sie hier dasselbe Aussehen wie die eigenen Raster.
   ========================================================================== */

/* Der Galerie-Block bringt ein eigenes Flex-Layout mit, das die Bilder auf
   ihre natürliche Breite schrumpfen lässt (img { width: auto }). Die Auswahl
   ist hier absichtlich so lang: Sie muss die Core-Regeln überbieten. */
.wm-inhalt .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--a-4);
	margin: var(--a-6) 0;
	padding: 0;
	list-style: none;
}
/* :not(#wm) hebt die Spezifität über die Core-Regel
   "figure.wp-block-image:not(#individual-image) { width: calc(50% - ...) }",
   die sonst jedes Bild auf halbe Breite zwingt. Der Bezeichner existiert
   nicht – er zählt nur als Gewicht. */
.wm-inhalt .wp-block-gallery.has-nested-images figure.wp-block-image:not(#wm) {
	width: 100%;
	max-width: none;
	flex-basis: auto;
	flex-grow: 0;
	margin: 0;
	position: relative;
	border-radius: var(--radius-gross);
	overflow: hidden;
	background: var(--creme-200);
}
.wm-inhalt .wp-block-gallery.has-nested-images figure.wp-block-image:not(#wm) > a,
.wm-inhalt .wp-block-gallery.has-nested-images figure.wp-block-image:not(#wm) > img {
	display: block;
	width: 100%;
	line-height: 0;
}
.wm-inhalt .wp-block-gallery.has-nested-images figure.wp-block-image:not(#wm) img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	max-width: none;
	transition: transform 0.35s ease;
	cursor: zoom-in;
}
.wm-inhalt .wp-block-gallery.has-nested-images figure.wp-block-image:not(#wm):hover img { transform: scale(1.05); }
.wm-inhalt .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	margin: 0;
	padding: var(--a-4) var(--a-3) var(--a-3);
	background: linear-gradient(transparent, rgba(20, 38, 29, 0.85));
	color: var(--creme-50);
	font-size: var(--gr-mini);
	text-align: left;
}

.wm-inhalt .wp-block-image { margin-block: var(--a-6); }
.wm-inhalt .wp-block-image figcaption { font-size: var(--gr-klein); color: var(--text-leise); font-style: italic; text-align: left; }
.wm-inhalt .wp-block-buttons { margin-block: var(--a-6); }
.wm-inhalt .wp-block-button__link {
	background: var(--messing-500);
	color: var(--gruen-900);
	font-family: var(--schrift-text);
	font-weight: 700;
	border-radius: var(--radius);
	padding: var(--a-3) var(--a-6);
	min-height: 52px;
	display: inline-flex;
	align-items: center;
}
.wm-inhalt .wp-block-separator { border-top: 1px solid var(--linie); border-bottom: 0; margin-block: var(--a-7); }
.wm-inhalt .wp-block-quote { margin-block: var(--a-6); }

/* Blätterlinks bei mehrseitigen Inhalten */
.wm-seitenblaettern { display: flex; flex-wrap: wrap; gap: var(--a-3); margin-top: var(--a-6); font-size: var(--gr-klein); }

/* Blätternavigation der Beitragsliste */
.wp-block-query-pagination, .navigation.pagination { margin-top: var(--a-7); }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.navigation.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 46px; min-height: 46px;
	padding: 0 var(--a-3);
	background: var(--creme-100);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	text-decoration: none;
	font-weight: 600;
}
.navigation.pagination .page-numbers.current { background: var(--gruen-800); color: var(--creme-50); border-color: var(--gruen-800); }