/*
 * Rahmen der Seite nach Entwurf eins: Kopf, Fuß, Hauptbereich, Hero,
 * Trenner (Ortssilhouette). Bausteine stehen in gestaltung.css,
 * Verzeichnis und Profil in mitglieder.css.
 *
 * Nur Token aus theme.json: --wp--preset--color--…, --wp--preset--font-size--…,
 * --wp--preset--spacing--…, --wp--custom--…. Eine Farbe ändern = theme.json.
 */

/* ── Grundlagen ───────────────────────────────────────────────────────── */
/* Kein Block-Abstand zwischen Kopf und Seite (sonst 20 px Streifen über dem Hero). */
.wp-site-blocks > main, .wp-site-blocks > .seite { margin-block-start: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--wp--custom--kopfhoehe) + 1rem); }
body { font-synthesis: none; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; }
.wir-symbol { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.3em; }
/* Seitenrand = Rand des Seiteninhalts (theme.json spacing.padding), damit Kopf, Fuß, Startseite und Seiten auf jeder Breite an derselben Kante beginnen */
.wir-huelle { width: min(100% - 2 * var(--wp--style--root--padding-left, 1.25rem), var(--wp--style--global--wide-size)); margin-inline: auto; }
/* Die Hülle bringt den Rand selbst mit – kein zweiter Innenabstand vom Kernlayout */
.wir-huelle.has-global-padding { padding-inline: 0; }
.wir-abschnitt { padding-block: var(--wp--preset--spacing--abschnitt); }
.wir-abschnitt--hell { background: var(--wp--preset--color--flaeche); }
.wir-abschnitt--dunkel { background: var(--wp--custom--verlauf--wald) var(--wp--preset--color--wald); color: var(--wp--preset--color--auf-dunkel); }
.wir-abschnitt--dunkel h2, .wir-abschnitt--dunkel h3 { color: var(--wp--preset--color--flaeche); }
.wir-abschnitt--dunkel a { color: var(--wp--preset--color--flaeche); }
.wir-abschnitt--dunkel a:focus-visible { outline-color: var(--wir-fokus-ring); }

/* Sprunglink des Kerns sichtbar machen (Block-Themes bringen ihn mit). */
.skip-link.screen-reader-text:focus { top: 1rem; left: 1rem; background: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--text); padding: .8rem 1.2rem; border-radius: var(--wp--custom--radius--knopf); font-weight: 700; z-index: 100; }

/* Hauptbereich: Platz unter dem Kopf, Luft nach unten */
.seite { padding-block: var(--wp--preset--spacing--l) var(--wp--preset--spacing--xl); }
/* Kurze Seiten: Fuß sitzt am Boden, kein Cremestreifen darunter */
.wp-site-blocks { min-height: 100dvh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1 0 auto; }

/*
 * Standardraster = 88rem (theme.json contentSize = wideSize), linke Kante bündig mit
 * Startseite und Fuß. Kein schmaler Mittelstreifen mehr (Chris, 03.10.2026).
 * Textartiges steht linksbündig auf der Lesebreite (--wp--custom--lesebreite ≈ 70 Zeichen);
 * Bilder, Spalten und Module nutzen die volle Breite.
 * margin-left rechnet die Rasterkante im jeweiligen Container aus (auch 404, Archive);
 * !important, weil das Kernlayout Kinder mit margin auto !important zentriert.
 */
.is-layout-constrained > :is(p, ul, ol, dl, blockquote, details, pre, .wp-block-quote, .wp-block-buttons, .wp-block-separator, .wp-block-search, .wp-block-group.is-style-hinweis, .wp-block-group.is-style-hervorgehoben) {
	max-width: var(--wp--custom--lesebreite);
	margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
	margin-right: auto !important;
}
/* Kästen: Text darin auf Lesebreite, der Kasten um den Innenabstand breiter */
.is-layout-constrained > .wp-block-group:is(.is-style-hinweis, .is-style-hervorgehoben) { max-width: calc(var(--wp--custom--lesebreite) + 2 * var(--wp--preset--spacing--m)); }
.is-layout-constrained > :is(p, ul, ol).has-text-align-center { margin-left: auto !important; }
/* Inhalt ohne constrained-Layout (z. B. Willkommenstext der Startseite): gleiche Lesebreite */
.wp-block-post-content.is-layout-flow > :is(p, ul, ol, dl, blockquote, details, .wp-block-quote) { max-width: var(--wp--custom--lesebreite); }

/* Rhythmus: Abstand über der Zwischenüberschrift groß, darunter eng – sie gehört zum Text danach */
.wp-block-post-content > :is(h2, h3) { margin-block-start: var(--wp--preset--spacing--l); }
.wp-block-post-content > h3 { margin-block-start: var(--wp--preset--spacing--m); }
.wp-block-post-content > :is(h2, h3) + * { margin-block-start: .75rem; }
.wp-block-post-content > :first-child { margin-block-start: 0; }
.seite > .wp-block-post-title + .wp-block-post-content { margin-block-start: var(--wp--preset--spacing--m); }
/* Zwischenüberschriften im Fließtext eine Stufe unter den Abschnittstiteln der Startseite (H1 : H2 ≈ 1,8) */
.seite:not(.seite--start) .wp-block-post-content > h2 { font-size: var(--wp--preset--font-size--titel-mittel); line-height: 1.15; }

/*
 * Textseiten ab 1200 px: Zwischenüberschriften hängen links in einer eigenen Spalte,
 * der Text steht daneben auf Lesebreite. So füllt eine reine Textseite das Raster,
 * ohne dass die Zeilen zu lang werden (designer, 03.10.2026, Variante B).
 * Eingerückt wird nur Textartiges; Module (Vorstand, Spalten, wir/…-Blöcke) bleiben
 * auf voller Breite und beginnen unter der hängenden Überschrift.
 * Darunter und bei 200 % Zoom: einspaltig wie oben.
 */
@media (min-width: 75em) {
	.seite:not(.seite--start) > .wp-block-post-content { display: flow-root; --wir-einzug: calc(var(--wp--custom--kopfspalte) + clamp(2rem, 4vw, 4rem)); }
	.seite:not(.seite--start) > .wp-block-post-content > :is(h2, h3):has(+ :is(p, ul, ol, dl, blockquote, details, .wp-block-quote, .wp-block-buttons, .wp-block-table, .wp-block-group.is-style-hinweis, .wp-block-group.is-style-hervorgehoben, .wir-suche)) {
		float: left; clear: left; width: var(--wp--custom--kopfspalte);
		margin-left: 0 !important; hyphens: auto; -webkit-hyphens: auto; text-wrap: balance;
		font-size: var(--wp--preset--font-size--titel-mittel);
	}
	.seite:not(.seite--start) > .wp-block-post-content > :is(h2, h3) ~ :is(p, ul, ol, dl, blockquote, details, .wp-block-quote, .wp-block-buttons, .wp-block-separator, .wp-block-table, .wp-block-group.is-style-hinweis, .wp-block-group.is-style-hervorgehoben, .wir-suche, h4, h5, h6) {
		margin-left: var(--wir-einzug) !important;
	}
	/* Text beginnt auf Höhe der Überschrift */
	.seite:not(.seite--start) > .wp-block-post-content > :is(h2, h3) + * { margin-block-start: var(--wp--preset--spacing--l); }
	.seite:not(.seite--start) > .wp-block-post-content > h3 + * { margin-block-start: var(--wp--preset--spacing--m); }
	.seite:not(.seite--start) > .wp-block-post-content > :is(h2, h3):first-child + * { margin-block-start: 0; }
	/* Alles andere (Module, Spalten, Bilder ohne Ausrichtung, Überschrift vor Modul) beginnt unter der hängenden Überschrift */
	.seite:not(.seite--start) > .wp-block-post-content > :not(p, ul, ol, dl, blockquote, details, .wp-block-quote, .wp-block-buttons, .wp-block-separator, .wp-block-table, .wp-block-group.is-style-hinweis, .wp-block-group.is-style-hervorgehoben, .wir-suche, h4, h5, h6, .alignleft, .alignright, style, script) { clear: both; }
}

/*
 * Textseiten: Bildband und Bildspalte (Chris, 04.10.2026: „ohne Bilder geht das Ganze nicht“).
 * Band = Beitragsbild der Seite unter dem Titel, volle Rasterbreite, quer beschnitten
 * (Hochformate filtert inc/textseite.php heraus).
 * Bildspalte = Bildblock „rechts ausgerichtet“ im Inhalt. Ab 85em steht er in der
 * sonst leeren rechten Spalte neben dem Text (im Block VOR die Zwischenüberschrift setzen,
 * dann beginnt er auf ihrer Höhe); darunter steht er im Textfluss auf Lesebreite.
 */
.seite > .wir-seitenbild { margin-block: var(--wp--preset--spacing--m) 0; }
.seite > .wir-seitenbild img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--wp--custom--radius--kachel); }
@media (min-width: 48em) { .seite > .wir-seitenbild img { aspect-ratio: 3 / 1; } }
.seite > .wir-seitenbild + .wp-block-post-content { margin-block-start: var(--wp--preset--spacing--l); }
/* Ab Tablet steht der Seitentitel auf dem Band, links abgedunkelt (Chris, 04.10.2026: „WIR Netzwerker darf gerne auf
   dem Header-Bild drauf sein … nach links hin etwas abgedunkelt“). Titel und Bild teilen sich eine Rasterzelle;
   der Verlauf liegt nur über dem Bild (::before im Seitenverhältnis des Bilds), nicht über der Bildunterschrift.
   Am Handy bleibt der Titel über dem Bild – auf 2 : 1 wäre er zu groß für die Fläche. */
@media (min-width: 48em) {
	.seite:has(> .wir-seitenbild) { display: grid; grid-template-columns: minmax(0, 1fr); }
	.seite > .wp-block-post-title:has(+ .wir-seitenbild) {
		grid-row: 1; grid-column: 1; z-index: 1; align-self: start; box-sizing: border-box; width: 100%;
		margin-block: var(--wp--preset--spacing--m) 0 !important; padding: clamp(1.5rem, 3.5vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
		color: var(--wp--preset--color--flaeche); text-wrap: balance;
	}
	.seite > .wp-block-post-title + .wir-seitenbild { grid-row: 1; grid-column: 1; position: relative; }
	.seite > .wp-block-post-title + .wir-seitenbild::before {
		content: ""; position: absolute; inset: 0 0 auto; aspect-ratio: 3 / 1; border-radius: var(--wp--custom--radius--kachel); pointer-events: none;
		background: linear-gradient(90deg, rgba(6, 27, 15, .82) 0%, rgba(6, 27, 15, .55) 32%, rgba(6, 27, 15, 0) 62%);
		-webkit-mask: linear-gradient(to bottom, #000 80%, transparent 96%); mask: linear-gradient(to bottom, #000 80%, transparent 96%); /* unten frei: dort sitzt bei Bildern mit Hügelkante die helle Fläche */
	}
	.seite > .wir-seitenbild + .wp-block-post-content { grid-row: 2; grid-column: 1; }
}

.seite:not(.seite--start) > .wp-block-post-content > .wp-block-image.alignright:not(.is-resized) {
	float: none; max-width: var(--wp--custom--lesebreite);
	margin: var(--wp--preset--spacing--m) auto var(--wp--preset--spacing--m) max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
}
.seite:not(.seite--start) > .wp-block-post-content > .wp-block-image.alignright img { width: 100%; height: auto; }
.seite:not(.seite--start) > .wp-block-post-content > .wp-block-image.is-resized img { width: auto; }
/* Rechtsbündige Bilder stehen schon ab 40em neben dem Text, nicht als Riesenbild dazwischen (Chris, 04.10.2026: Emblem auf „Unser Logo“ verbrannte Platz); auf dem Handy höchstens 14rem */
@media (max-width: 39.99em) {
	.seite:not(.seite--start) > .wp-block-post-content > .wp-block-image.alignright:is(*, .is-resized) { max-width: 14rem; }
	.seite:not(.seite--start) > .wp-block-post-content > .wp-block-image.alignright:first-child { margin-top: 0 !important; }
}
@media (min-width: 40em) and (max-width: 84.99em) {
	.seite:not(.seite--start) > .wp-block-post-content > .wp-block-image.alignright:is(*, .is-resized) {
		float: right; clear: right; width: min(35%, 18rem); max-width: none;
		margin: var(--wp--preset--spacing--l) 0 var(--wp--preset--spacing--m) var(--wp--preset--spacing--l) !important;
	}
	.seite:not(.seite--start) > .wp-block-post-content > .wp-block-image.alignright:first-child { margin-top: .4rem !important; }
}
@media (min-width: 85em) {
	.seite:not(.seite--start) > .wp-block-post-content > .wp-block-image.alignright:is(*, .is-resized) {
		float: right; clear: right;
		width: min(30rem, 100% - var(--wir-einzug) - var(--wp--custom--lesebreite) - var(--wp--preset--spacing--l));
		margin: var(--wp--preset--spacing--l) 0 var(--wp--preset--spacing--m) var(--wp--preset--spacing--l) !important;
		max-width: none;
	}
	.seite:not(.seite--start) > .wp-block-post-content > .wp-block-image.alignright:first-child { margin-top: .4rem !important; }
}

/* Tabellen: Wörter nicht mitten im Wort brechen; Telefonnummern als 44-px-Ziel, ruhig in langen Listen */
.wp-block-table :is(td, th) { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.wp-block-table td a[href^="tel:"] { display: inline-flex; align-items: center; min-height: var(--wp--custom--ziel); font-weight: 600; font-variant-numeric: tabular-nums; text-underline-offset: .2em; }
.seite__datum { color: var(--wp--preset--color--text-leise); font-size: var(--wp--preset--font-size--meta); }
.seite--start { padding-block: 0; }
/* Jobs (templates/archive-stelle.html): grüner Seitenkopf direkt unter dem Kopf, darunter ein Abschnitt */
/* Archive und Suche (templates/index.html, search.html, Muster wir/archiv) genauso */
.seite--jobs, .seite--archiv { padding-block: 0; }
:is(.seite--jobs, .seite--archiv) .wir-seitenkopf { padding-top: clamp(2rem, 5vw, 3.5rem); }
:is(.seite--jobs, .seite--archiv) > .wir-abschnitt { padding-block: var(--wp--preset--spacing--l) var(--wp--preset--spacing--xl); }
.seite--archiv .wir-seitenkopf h1 { max-width: 22ch; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

/* Blättern in Archiven: Ziffern als leise Knöpfe (.wir-knopf--leise), die aktuelle Seite gefüllt */
.wir-blaettern { margin-top: var(--wp--preset--spacing--l); }
.wir-blaettern ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.wir-blaettern .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--wp--custom--ziel); min-height: var(--wp--custom--ziel); padding: 0 .9rem; box-sizing: border-box; border: 1.5px solid var(--wp--preset--color--linie-stark); border-radius: var(--wp--custom--radius--knopf); background: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--primaer); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; }
.wir-blaettern a.page-numbers:hover { background: var(--wp--preset--color--primaer-hell); color: var(--wp--preset--color--wald); border-color: var(--wp--preset--color--primaer); }
.wir-blaettern .page-numbers.current { background: var(--wp--preset--color--primaer); border-color: var(--wp--preset--color--primaer); color: var(--wp--preset--color--flaeche); }
.wir-blaettern .page-numbers.dots { border-color: transparent; background: none; min-width: auto; padding: 0 .2rem; }
.seite--start > .wp-block-post-content { padding-block: var(--wp--preset--spacing--l); }

/* ── Kopf ─────────────────────────────────────────────────────────────── */
/* Klebt der Kopf: der Template-Teil <header> selbst, nicht die Gruppe darin — sonst fehlt der Platz zum Kleben. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 30; }
/* Angemeldet liegt die WP-Werkzeugleiste fest darüber (32/46 px) — ohne Versatz rutscht der Kopf beim
   Scrollen darunter und das Logo hängt abgeschnitten am Rand (Chris, 03.10.2026). Unter 600 px scrollt die Leiste mit. */
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }
.wir-kopf {
	background: var(--wp--preset--color--grund);
	border-bottom: 1px solid var(--wp--preset--color--linie);
}
/* Der Kopf ist Bedienleiste, kein Lesetext: bleibt bei 18 px, auch wenn der Fließtext auf großen Bildschirmen 20 px hat (sonst bricht die Leiste um) */
.wir-kopf { --wp--preset--font-size--normal: 1.125rem; }
/* Der Kopf steht im selben Raster wie die Seite (.wir-huelle, 88rem) — breiter
   „sieht unfertig und defekt aus“ (Chris, 03.10.2026). Passt, weil das Menü nur
   noch fünf Punkte hat und das Telefon im Kopf immer als Symbol steht. */
.wir-kopf__innen { min-height: var(--wp--custom--kopfhoehe); gap: 1rem; }
/* Notnetz: Wird es doch zu eng (große Grundschrift, Textabstände WCAG 1.4.12), bricht der Kopf um statt abzuschneiden */
.wir-kopf__innen.wp-block-group { flex-wrap: wrap; row-gap: .25rem; }
.wir-marke { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--wp--preset--color--text); min-height: var(--wp--custom--ziel); flex: none; }
.wir-marke:hover { color: var(--wp--preset--color--primaer); text-decoration: none; }
.wir-marke__emblem { width: 56px; height: 56px; display: block; }
.wir-marke__text { display: block; font: 700 1.2rem/1.05 var(--wp--preset--font-family--titel); letter-spacing: -.01em; } /* schrift-ok: alle Wortmarke im Kopf (Logo-Schriftzug, nicht Teil der Textskala) */
.wir-marke__text small { display: block; font: 400 var(--wp--preset--font-size--klein)/1.2 var(--wp--preset--font-family--text); color: var(--wp--preset--color--text-leise); margin-top: .2rem; letter-spacing: 0; }

/* Navigation (core/navigation) — die Einträge stehen als innere Blöcke in patterns/kopf.php */
.wir-kopf__navigation { flex: 1 1 auto; justify-content: center; }
.wir-kopf__navigation .wp-block-navigation__container { gap: 0; flex-wrap: nowrap; }
.wir-kopf__navigation .wp-block-navigation-item__content {
	display: inline-flex; align-items: center; min-height: 48px; padding: 0 .65rem;
	border-radius: var(--wp--custom--radius--klein); color: var(--wp--preset--color--text); text-decoration: none; font-weight: 400; white-space: nowrap;
	font-size: var(--wp--preset--font-size--normal);
}
.wir-kopf__navigation .wp-block-navigation-item__content:focus-visible { outline: 3px solid var(--wir-fokus-ring); outline-offset: 2px; }
/*
 * Leiste (ab 76,25 em): Hover = dieselbe Welle, halb deckend. Aktuelle Seite (oder ihr
 * Oberpunkt) = „der Fluss“: eine Welle in Logo-Blau unter dem ganzen Wort – der
 * Bach aus dem Emblem, die Wahnbachtalsperre – und Schriftgewicht 600 (Idee 18,
 * Chris 04.10.2026; vorher ein goldener Strich). Nur hier, nie an Fließtext-Links.
 * Kein Balken (Slop-Katalog: Side-Tab). Die Welle ist EIN Schwung (anderthalb Wellen),
 * auf die Wortbreite gedehnt; die Strichstärke bleibt (non-scaling-stroke). Nie
 * gekachelt (brach an den Nähten), nie die enge Wellenlinie „wavy“ (Chris, 04.10.2026).
 */
@media (min-width: 76.25em) {
	/* Jeder Punkt trägt die Welle, unsichtbar. Darüberfahren zeigt sie halb, die aktuelle Seite ganz –
	   so ist es überall dieselbe Linie, nie ein gerader Strich neben der Welle (Chris, 04.10.2026). */
	.wir-kopf .wir-kopf__navigation .wp-block-navigation__container > li > .wp-block-navigation-item__content { position: relative; }
	.wir-kopf .wir-kopf__navigation .wp-block-navigation__container > li > .wp-block-navigation-item__content::after {
		--wir-welle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'%3E%3Cpath d='M1.5 5.2C7.5 1 13.5 1 20 4S32.5 7 40 4 52.5 1 58.5 3' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
		content: ""; position: absolute; left: .65rem; right: .65rem; top: calc(50% + .75em); height: .5rem; background: var(--wp--preset--color--logo-blau);
		-webkit-mask: var(--wir-welle) center / 100% 100% no-repeat; mask: var(--wir-welle) center / 100% 100% no-repeat;
		opacity: 0; transition: opacity var(--wp--custom--uebergang, .15s ease); pointer-events: none;
	}
	.wir-kopf .wir-kopf__navigation .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle::after { right: 2.1rem; }
	.wir-kopf .wir-kopf__navigation .wp-block-navigation__container > li:not(.current-menu-item, .wir-nav-aktuell, :has(.current-menu-item)) > .wp-block-navigation-item__content:not([aria-expanded="true"]):hover { background: transparent; text-decoration: none; }
	.wir-kopf .wir-kopf__navigation .wp-block-navigation__container > li:not(.current-menu-item, .wir-nav-aktuell, :has(.current-menu-item)) > .wp-block-navigation-item__content:not([aria-expanded="true"]):hover::after { opacity: .55; }
	.wir-kopf .wir-kopf__navigation .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
	.wir-kopf .wir-kopf__navigation .wp-block-navigation__container > .has-child:has(.current-menu-item) > .wp-block-navigation-item__content,
	.wir-kopf .wir-kopf__navigation .wp-block-navigation__container > .wir-nav-aktuell > .wp-block-navigation-item__content { color: var(--wp--preset--color--wald); font-weight: 600; text-decoration: none; }
	.wir-kopf .wir-kopf__navigation .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after,
	.wir-kopf .wir-kopf__navigation .wp-block-navigation__container > .has-child:has(.current-menu-item) > .wp-block-navigation-item__content::after,
	.wir-kopf .wir-kopf__navigation .wp-block-navigation__container > .wir-nav-aktuell > .wp-block-navigation-item__content::after { opacity: 1; }
}
/*
 * Aufklappmenü: öffnet nur per Klick (submenuVisibility „click“, patterns/kopf.php).
 * Der Oberpunkt ist dann selbst der Knopf (…item__content + …submenu__toggle),
 * der Pfeil ein <span> daneben — er liegt über dem Knopf und lässt Klicks durch.
 * Der Kasten ist hell mit dunkler Schrift, zwischen den Einträgen feine,
 * halbtransparente 1-px-Linien (Chris, 03.10.2026). Vorangestellt .wir-kopf,
 * damit core (.wp-block-navigation:not(.has-background) …, weiß/schwarz) nicht gewinnt.
 */
.wir-kopf .wir-kopf__navigation .has-child { position: relative; }
.wir-kopf .wir-kopf__navigation .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
	width: auto; height: auto; margin: 0; padding: 0 2.1rem 0 .65rem; border: 0; background: transparent; cursor: pointer;
	font: inherit; font-size: var(--wp--preset--font-size--normal); font-weight: 400; line-height: 1.2; color: var(--wp--preset--color--text);
}
.wir-kopf .wir-kopf__navigation .has-child > .wp-block-navigation__submenu-icon {
	position: absolute; z-index: 2; top: 24px; right: .75rem; translate: 0 -50%; display: flex; width: 14px; height: 14px; margin: 0; padding: 0;
	pointer-events: none; color: var(--wp--preset--color--text-leise);
}
.wir-kopf .wir-kopf__navigation .has-child > .wp-block-navigation__submenu-icon svg { width: 14px; height: 14px; margin: 0; stroke: currentColor; transition: transform .2s ease; }
.wir-kopf .wir-kopf__navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] { background: var(--wp--preset--color--primaer-hell); color: var(--wp--preset--color--wald); }
/* Gedreht wird das SVG von core (aria-expanded="true" ~ … svg), hier nur die Farbe */
.wir-kopf .wir-kopf__navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--wald); }
.wir-kopf .wir-kopf__navigation .wp-block-navigation-submenu__toggle:focus-visible { outline: 3px solid var(--wir-fokus-ring); outline-offset: 2px; }
.wir-kopf .wir-kopf__navigation .has-child > .wp-block-navigation__submenu-container {
	top: calc(100% + .5rem); left: 0; width: max-content; max-width: min(24rem, calc(100vw - 2rem)); padding: .35rem 0; z-index: 40;
	border: 1px solid var(--wp--preset--color--linie-stark); border-radius: var(--wp--custom--radius--klein); /* Kante statt Schatten — bleibt auch über weißen Abschnitten sichtbar */
	background: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--text); box-shadow: none;
}
.wir-kopf .wir-kopf__navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item + .wp-block-navigation-item { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--text) 12%, transparent); }
/* core setzt geöffnet min-width: 200px mit höherer Spezifität — hier gewinnt die Inhaltsbreite */
@media (min-width: 76.25em) { .wir-kopf .wir-kopf__navigation .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { width: max-content; min-width: 14rem;
	/* niedriges Fenster: Kasten scrollt in sich, statt unter der Fensterkante zu verschwinden */
	max-height: calc(100dvh - var(--wp--custom--kopfhoehe) - 1rem); overflow-y: auto; overscroll-behavior: contain; } }
/* Letzter Punkt (Jobs): Kasten rechtsbündig, sonst läuft er bei schmalen Fenstern über den Rand */
@media (min-width: 76.25em) { .wir-kopf .wir-kopf__navigation .wir-nav-rechts > .wp-block-navigation__submenu-container { left: auto; right: 0; } }
.wir-kopf .wir-kopf__navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex; align-items: center; box-sizing: border-box; width: 100%; min-height: 48px; padding: .5rem 1.25rem; white-space: nowrap;
	color: var(--wp--preset--color--text); font-weight: 400; box-shadow: none; border-radius: 0;
}
.wir-kopf .wir-kopf__navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--primaer-hell); color: var(--wp--preset--color--wald); }
.wir-kopf .wir-kopf__navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { outline-offset: -3px; }
.wir-kopf .wir-kopf__navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
.wir-kopf .wir-kopf__navigation .wp-block-navigation__submenu-container .wir-nav-aktuell > .wp-block-navigation-item__content { color: var(--wp--preset--color--primaer); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
/* Wichtiger Punkt im Untermenü (Beitrittsformular): Logo-Blau, halbfett, ein Hauch Blau als Fläche – Chris 04.10.2026. Klasse aus inc/menues.php, href als Rückfall für ein im Editor gepflegtes Menü. */
.wir-kopf .wir-kopf__navigation .wp-block-navigation__submenu-container .wir-nav-hervor:not(.current-menu-item) > .wp-block-navigation-item__content,
.wir-kopf .wir-kopf__navigation .wp-block-navigation__submenu-container li:not(.current-menu-item, .wir-nav-aktuell) > a.wp-block-navigation-item__content[href$="/beitrittsformular/"] { color: var(--wp--preset--color--logo-blau); font-weight: 600; background: color-mix(in srgb, var(--wp--preset--color--logo-blau) 7%, var(--wp--preset--color--flaeche)); }
.wir-kopf .wir-kopf__navigation .wp-block-navigation__submenu-container .wir-nav-hervor:not(.current-menu-item) > .wp-block-navigation-item__content:hover,
.wir-kopf .wir-kopf__navigation .wp-block-navigation__submenu-container li:not(.current-menu-item, .wir-nav-aktuell) > a.wp-block-navigation-item__content[href$="/beitrittsformular/"]:hover { color: var(--wp--preset--color--logo-blau); background: color-mix(in srgb, var(--wp--preset--color--logo-blau) 14%, var(--wp--preset--color--flaeche)); }
@media (prefers-reduced-motion: reduce) { .wir-kopf .wir-kopf__navigation .has-child > .wp-block-navigation__submenu-icon svg { transition: none; } }
/* Telefon, Mitglied werden, Social-Icons gibt es als Menüeinträge nur im Handy-Overlay */
.wir-kopf__navigation .wir-nav-handy { display: none; }

/* Menüknopf (Handy): 48 px, dunkel, mit Wort „Menü“ */
.wir-kopf .wp-block-navigation__responsive-container-open {
	display: none; align-items: center; gap: .5rem; min-height: 48px; min-width: 48px; padding: 0 1rem;
	border-radius: var(--wp--custom--radius--klein); background: var(--wp--preset--color--wald); color: var(--wp--preset--color--flaeche); border: 0;
	font: 600 var(--wp--preset--font-size--meta)/1 var(--wp--preset--font-family--text); cursor: pointer;
}
.wir-kopf .wp-block-navigation__responsive-container-open::after { content: "Menü"; }
.wir-kopf .wp-block-navigation__responsive-container-open svg { width: 24px; height: 24px; }
.wir-kopf .wp-block-navigation__responsive-container-open:hover { background: var(--wp--preset--color--primaer); }
.wir-kopf .wp-block-navigation__responsive-container-open:focus-visible { outline: 3px solid var(--wir-fokus-ring); outline-offset: 3px; }

/* ── Overlay (Handy, < 1180 px): bildschirmfüllend, Waldgrün, große Ziele ──
 * core setzt das Overlay auf position: fixed. Der Kopf hat backdrop-filter —
 * das macht ihn zum Containing Block, und das Overlay wäre nur so hoch wie
 * der Kopf (gemessen 03.10.2026: 390 × 68 px). Solange das Menü offen ist,
 * fällt der Filter deshalb weg; html.has-modal-open setzt core selbst
 * (und sperrt damit auch das Scrollen der Seite). */
html.has-modal-open .wir-kopf { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* .wp-block-navigation im Selektor: schlägt core (.wp-block-navigation:not(.has-background) … is-menu-open → weiß) */
.wir-kopf .wir-kopf__navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	inset: 0; height: 100dvh; padding: 0; overflow: auto; overscroll-behavior: contain;
	background: var(--wp--preset--color--wald); color: var(--wp--preset--color--flaeche);
	animation: none;
}
@media (prefers-reduced-motion: no-preference) {
	.wir-kopf .wir-kopf__navigation .wp-block-navigation__responsive-container.is-menu-open { animation: wir-overlay-ein .25s ease-out both; }
	.wir-kopf .wir-kopf__navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { animation: wir-overlay-inhalt .35s ease-out both; }
}
@keyframes wir-overlay-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes wir-overlay-inhalt { from { opacity: 0; translate: 0 .75rem; } to { opacity: 1; translate: 0 0; } }
/* Die Kette bis zur Liste füllt die Höhe, damit Telefon & Co. unten stehen */
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__responsive-close,
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__responsive-dialog,
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__responsive-container-content { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; max-width: none; margin: 0; gap: 0; }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__responsive-container-content { padding: var(--wp--custom--kopfhoehe-handy) 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
/* Oben links das Emblem wie im Kopf — statt eines gesperrten Versal-Labels „MENÜ“ (crbd-design: kein Eyebrow) */
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: ""; position: fixed; z-index: 2; top: calc((var(--wp--custom--kopfhoehe-handy) - 48px) / 2); left: 1.25rem; width: 48px; height: 48px;
	background: url("../img/logo/wir-emblem.svg") no-repeat center / contain;
}
/* Fester Kopfstreifen: Emblem und „Schließen“ stehen, die Liste läuft darunter durch */
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__responsive-dialog::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 1; height: var(--wp--custom--kopfhoehe-handy); background: var(--wp--preset--color--wald); border-bottom: 1px solid rgba(255,255,255,.16); }
@media (min-width: 37.5em) { .wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__responsive-container-content { max-width: calc(36rem + 2.5rem); } }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__container { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; gap: 0; }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation-item { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%; border-bottom: 1px solid rgba(255,255,255,.16); }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation-item__content {
	display: flex; align-items: center; flex: 1 1 0; min-width: 0; box-sizing: border-box; min-height: 60px; padding: .6rem .5rem;
	font: 600 var(--wp--preset--font-size--titel-3)/1.2 var(--wp--preset--font-family--titel); letter-spacing: 0; color: var(--wp--preset--color--flaeche); border-radius: 0; box-shadow: none; white-space: normal;
}
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation-item__content:hover { background: rgba(255,255,255,.08); color: var(--wp--preset--color--flaeche); }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation-item__content:focus-visible { outline: 3px solid var(--wir-fokus-ring); outline-offset: -3px; }
/* Aktuelle Seite: fett und unterstrichen — kein Farbbalken am Rand (Chris: „diese Klammer“ nirgends) */
.wir-kopf .wir-kopf__navigation .is-menu-open .current-menu-item > .wp-block-navigation-item__content { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; color: var(--wp--preset--color--flaeche); }
/*
 * Untermenü im Overlay: Akkordeon. Der Oberpunkt ist im Klickmodus selbst der
 * Knopf und füllt die Zeile, der Pfeil liegt rechts darüber. core meldet im
 * offenen Overlay jedes Untermenü als offen (aria-expanded="true") — deshalb
 * führt gestaltung.js den Zustand selbst (Klasse wir-offen am <li>).
 */
.wir-kopf .wir-kopf__navigation .is-menu-open .has-child { position: relative; }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
	box-sizing: border-box; flex: 1 1 100%; width: 100%; height: auto; min-height: 60px; margin: 0; padding: .6rem 3.75rem .6rem .5rem; justify-content: flex-start; text-align: left;
	border: 0; background: transparent; color: var(--wp--preset--color--flaeche); cursor: pointer;
	font: 600 var(--wp--preset--font-size--titel-3)/1.2 var(--wp--preset--font-family--titel); letter-spacing: 0;
}
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation-submenu__toggle:hover { background: rgba(255,255,255,.08); color: var(--wp--preset--color--flaeche); }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation-submenu__toggle:focus-visible { outline: 3px solid var(--wir-fokus-ring); outline-offset: -3px; }
.wir-kopf .wir-kopf__navigation .is-menu-open .has-child > .wp-block-navigation__submenu-icon { top: 30px; right: 1.1rem; width: 22px; height: 22px; color: var(--wp--preset--color--flaeche); }
.wir-kopf .wir-kopf__navigation .is-menu-open .has-child > .wp-block-navigation__submenu-icon svg { width: 22px; height: 22px; }
.wir-kopf .wir-kopf__navigation .is-menu-open .has-child > .wp-block-navigation__submenu-container { display: none; flex: 1 0 100%; flex-direction: column; width: 100%; max-width: none; min-width: 0; position: static; height: auto; opacity: 1; visibility: visible; overflow: visible; margin: 0; padding: 0 0 .75rem; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--wp--preset--color--flaeche); }
.wir-kopf .wir-kopf__navigation .is-menu-open .has-child.wir-offen > .wp-block-navigation__submenu-container { display: flex; }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border: 0; width: auto; margin: 0 0 0 1.25rem; } /* Untergruppe eingerückt, Trenner beginnen dort */
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { min-height: 52px; white-space: normal; padding: .4rem .5rem; font: 400 var(--wp--preset--font-size--gross)/1.25 var(--wp--preset--font-family--text); letter-spacing: 0; color: var(--wp--preset--color--auf-dunkel); }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: rgba(255,255,255,.08); color: var(--wp--preset--color--flaeche); }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__submenu-container .wir-nav-aktuell > .wp-block-navigation-item__content { font-weight: 700; color: var(--wp--preset--color--flaeche); }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__submenu-container .wir-nav-hervor:not(.current-menu-item) > .wp-block-navigation-item__content,
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__submenu-container li:not(.current-menu-item, .wir-nav-aktuell) > a.wp-block-navigation-item__content[href$="/beitrittsformular/"] { font-weight: 600; color: var(--wp--preset--color--flaeche); background: color-mix(in srgb, var(--wp--preset--color--logo-blau) 35%, transparent); }
/* Unten: Mitglied werden, Social-Icons */
.wir-kopf .wir-kopf__navigation .is-menu-open .wir-nav-handy { display: flex; border: 0; }
.wir-kopf .wir-kopf__navigation .is-menu-open .wir-nav-handy--cta { margin-top: auto; padding-top: 1.5rem; }
.wir-kopf .wir-kopf__navigation .is-menu-open .wir-nav-handy--cta .wp-block-navigation-item__content {
	flex: 1 1 auto; justify-content: center; min-height: 56px; margin-bottom: .75rem; padding: .6rem 1.25rem;
	border-radius: var(--wp--custom--radius--knopf); font: 600 var(--wp--preset--font-size--normal)/1.2 var(--wp--preset--font-family--text); letter-spacing: 0; text-align: center; font-variant-numeric: tabular-nums;
}
.wir-kopf .wir-kopf__navigation .is-menu-open .wir-nav-handy--cta .wp-block-navigation-item__content { background: var(--wp--preset--color--akzent); color: #fff; }
.wir-kopf .wir-kopf__navigation .is-menu-open .wir-nav-handy--cta .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--akzent-hell); color: #fff; }
.wir-kopf .wir-kopf__navigation .is-menu-open .wir-nav-handy--cta .wp-block-navigation-item__content:focus-visible { outline-color: var(--wir-fokus-ring); outline-offset: 3px; }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-social-links { justify-content: center; gap: .5rem; width: 100%; margin: .25rem 0 0; padding: 0; }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-social-links .wp-block-social-link { margin: 0; }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-social-links .wp-block-social-link-anchor { width: 48px; height: 48px; padding: 0; border-radius: var(--wp--custom--radius--klein); }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-social-links .wp-block-social-link-anchor:hover { background: rgba(255,255,255,.12); }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-social-links .wp-block-social-link-anchor:focus-visible { outline: 3px solid var(--wir-fokus-ring); outline-offset: 2px; }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-social-links svg { width: 28px; height: 28px; }
/* Schließen: 48 × 48 px oben rechts, bleibt beim Scrollen stehen, mit Wort */
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed; top: calc((var(--wp--custom--kopfhoehe-handy) - 48px) / 2); right: 1.25rem; z-index: 2;
	display: inline-flex; align-items: center; gap: .4rem; min-width: 48px; min-height: 48px; padding: 0 .9rem 0 .7rem;
	border: 1.5px solid rgba(255,255,255,.45); border-radius: var(--wp--custom--radius--klein); background: var(--wp--preset--color--wald); color: var(--wp--preset--color--flaeche);
	font: 600 var(--wp--preset--font-size--klein)/1 var(--wp--preset--font-family--text); cursor: pointer;
}
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__responsive-container-close::after { content: "Schließen"; }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; fill: currentColor; }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__responsive-container-close:hover { background: rgba(255,255,255,.12); border-color: var(--wp--preset--color--flaeche); }
.wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__responsive-container-close:focus-visible { outline: 3px solid var(--wir-fokus-ring); outline-offset: 3px; }

/* Aktionen rechts: Social, Mitglied werden (keine Telefonnummer im Kopf, Chris 04.10.2026) */
.wir-kopf__aktionen { display: flex; align-items: center; gap: .5rem; flex: none; }
.wir-social { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.wir-social__link { display: inline-flex; align-items: center; justify-content: center; width: var(--wp--custom--ziel); height: var(--wp--custom--ziel); border-radius: var(--wp--custom--radius--klein); color: var(--wp--preset--color--text); }
.wir-social__link .wir-symbol { width: 24px; height: 24px; }
.wir-social__link:hover { background: var(--wp--preset--color--primaer-hell); color: var(--wp--preset--color--wald); }

/* 76,25–90 em (1220–1439 px): etwas enger, damit alles in eine Zeile passt */
@media (max-width: 89.9375em) {
	.wir-kopf__innen { gap: .75rem; }
	.wir-marke { gap: .6rem; }
	.wir-marke__emblem { width: 48px; height: 48px; }
	.wir-marke__text { font-size: 1rem; } /* schrift-ok: groesse Wortmarke im Kopf */
	.wir-marke__text small { font-size: var(--wp--preset--font-size--klein); }
	.wir-kopf__navigation .wp-block-navigation-item__content { padding: 0 .5rem; }
	.wir-kopf__navigation .has-child > .wp-block-navigation-item__content { padding-right: .1rem; }
	.wir-kopf .wir-kopf__cta { padding: .5rem .9rem; }
}

/* Unter 76,25 em (1220 px bei 16 px Grundschrift): Menüknopf statt Leiste. Logo 274 + Menü 606 + Aktionen 224 px + Abstände ≈ 1128 px Innenbreite; seit 7d72dc9 (Seitenrand der Hülle) ist die bei 1220 px 1156 px.
   Grenzen in em, damit sie mit der Grundschrift des Browsers wandern (Designprüfung 03.10.2026, WCAG 1.4.4).
   core zeigt ab 600 px die Leiste — die Regeln hier sind spezifischer und gelten auch darüber. */
@media (max-width: 76.1875em) {
	.wir-kopf__innen { min-height: var(--wp--custom--kopfhoehe-handy); gap: .5rem; }
	.wir-kopf__innen.wp-block-group { flex-wrap: nowrap; } /* Notnetz nur für die volle Leiste: hier soll die Marke schrumpfen, nicht der Knopf umbrechen */
	.wir-kopf .wir-kopf__innen > .wir-marke { flex: 0 1 auto; min-width: 0; margin-right: auto; } /* Klickfläche nur Emblem + Name, nicht der leere Kopf */
	.wir-marke__emblem { width: 48px; height: 48px; }
	.wir-marke__text { font-size: 1.05rem; } /* schrift-ok: groesse Wortmarke im Kopf */
	.wir-kopf__navigation { flex: none; order: 5; }
	.wir-kopf .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; }
	.wir-kopf .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.wir-kopf__aktionen, .wir-kopf .wir-kopf__cta, .wir-social--kopf { display: none; } /* .wir-kopf davor: gestaltung.css lädt später und setzt .wir-knopf auf inline-flex */
			html { scroll-padding-top: calc(var(--wp--custom--kopfhoehe-handy) + 1rem); }
}
@media (max-width: 30em) { /* bis 480 px: große iPhones (428/430) brachen den Namen vierzeilig */  .wir-marke__text small { display: none; } .wir-marke__wir { display: block; } /* Name immer vollständig: „WIR“ über „NeunkirchenSeelscheider“ (Chris 04.10.2026) */ .wir-marke__text { font-size: min(1rem, calc((100vw - 13.5rem) / 12.75)); } /* „NeunkirchenSeelscheider“ ist 12,75 em breit und muss vor den Menü-Knopf passen */ } /* schrift-ok: groesse Wortmarke im Kopf */
@media (max-width: 23.4375em) { .wir-marke__text { display: none; } .wir-kopf .wp-block-navigation__responsive-container-open::after, .wir-kopf .wir-kopf__navigation .is-menu-open .wp-block-navigation__responsive-container-close::after { content: none; } }

/* ── Hero (Startseite): Foto, Waldgrün, Suche ─────────────────────────── */
.wir-hero { position: relative; background: var(--wp--preset--color--wald); color: var(--wp--preset--color--flaeche); overflow: hidden; isolation: isolate; }
.wir-hero__bild { position: absolute; inset: 0; z-index: -2; margin: 0; }
.wir-hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--wp--custom--hero--bildposition); display: block; }
.wir-hero__ton { position: absolute; inset: 0; z-index: -1; background: var(--wp--custom--hero--ueberlagerung); }
/* Kein Blockabstand im Hero: sonst rutscht die Abdunklung 20 px nach unten und oben bleibt ein heller Fotostreifen */
.wir-hero > * { margin-block-start: 0; }
.wir-hero__innen { position: relative; padding: clamp(3rem, 7.5vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem); /* etwas knapper (Chris 04.10.2026) */ max-width: 64rem; }
.wir-hero h1 { color: var(--wp--preset--color--flaeche); font-size: var(--wp--preset--font-size--riesig); margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); /* ohne Unterzeile (Chris 04.10.2026) direkt vor der Suche */ letter-spacing: -.01em; }
.wir-hero .wir-vorzeile { color: var(--wp--preset--color--hellgruen); }
.wir-hero__alle { margin: 1rem 0 0; }
.wir-hero__alle .wir-link-pfeil { color: var(--wp--preset--color--hellgruen); font-size: var(--wp--preset--font-size--normal); }
.wir-hero__alle .wir-link-pfeil:hover { color: var(--wp--preset--color--flaeche); }
@media (max-width: 760px) {
	.wir-hero__ton { background: var(--wp--custom--hero--ueberlagerung-handy); }
}

/* Seitenkopf anderer Seiten (dunkel, kleiner) */
.wir-seitenkopf { background: var(--wp--custom--verlauf--wald) var(--wp--preset--color--wald); color: var(--wp--preset--color--flaeche); padding: 1rem 0 clamp(2.5rem, 6vw, 4rem); }
.wir-seitenkopf h1, .wir-seitenkopf .wp-block-post-title, .wir-seitenkopf .wp-block-query-title { color: var(--wp--preset--color--flaeche); margin: .5rem 0 .4em; }
.wir-seitenkopf p { color: var(--wp--preset--color--auf-dunkel); }

/* ── Fuß ──────────────────────────────────────────────────────────────── */
/* Linienfarbe der Ortssilhouette (docs/logo.md) für Hover und Fokus auf
   dunklen Flächen — Chris, 03.10.2026: Hellgrün statt Blau. Blau hat auf
   Waldgrün nur rund 2:1 und taugt dort nicht als Fokusrahmen. */
:root { --wir-silhouette: #B4D250; }
/* Filigran wie im Konzept (Chris, 03.10.2026): kleine Spaltentitel, leise
   Links ohne Unterstreichung, enger Zeilenfall, unten eine Haarlinie mit ©
   und den Rechtslinks. Links in Menülisten brauchen keine Unterstreichung —
   sie stehen nicht im Fließtext; beim Überfahren kommt sie. */
.wir-fuss { --wir-fuss-leise: rgba(233, 239, 233, .74); --wir-fuss-linie: rgba(255, 255, 255, .12); background: var(--wp--custom--verlauf--wald-tief) var(--wp--preset--color--wald-tief); color: var(--wir-fuss-leise); padding: 0 0 1.5rem; margin-top: 0; font-size: var(--wp--preset--font-size--meta); }
/* Kein Blockabstand vor dem Fuß — sonst steht ein 20-px-Streifen Seitengrund
   zwischen letztem Abschnitt und Fuß. */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
/* Bergische Hügel als Oberkante (Chris, 04.10.2026): keine Linie, der Fuß
   selbst läuft oben in zwei sanften Kämmen aus. Die Maske schneidet den
   Wald-Grund zu; der hintere Kamm ist halb durchsichtig und gibt Tiefe. */
.wir-fuss {
	--wir-huegel-h: clamp(1.75rem, 3.6vw, 3.25rem);
	--wir-huegel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill-opacity='.45' d='M0 60V30C150 18 260 8 400 14s250 26 400 22 260-30 420-28 190 14 220 16V60Z'/%3E%3Cpath d='M0 60V40C130 34 220 24 340 26s220 18 340 14 230-28 380-26 230 22 380 20V60Z'/%3E%3C/svg%3E");
	padding-top: var(--wir-huegel-h);
	-webkit-mask: var(--wir-huegel) top / 100% var(--wir-huegel-h) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wir-huegel-h) - 1px) / 100% 100% no-repeat;
	mask: var(--wir-huegel) top / 100% var(--wir-huegel-h) no-repeat, linear-gradient(#000, #000) 0 calc(var(--wir-huegel-h) - 1px) / 100% 100% no-repeat;
}
.wir-fuss__innen { padding-top: clamp(3rem, 6vw, 4.5rem); }
.wir-fuss__raster { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
/* Marke: Querformat — Ortssilhouette als Linie über die Schlaufe ins Emblem
   (Entwurf eins, Chris 03.10.2026). Einziger Auftritt der Silhouette. */
.wir-fuss__marke { margin: 0 0 1.25rem; }
.wir-fuss__marke a { display: inline-block; max-width: 100%; }
.wir-fuss__marke img { display: block; width: min(100%, 280px); height: auto; }
.wir-fuss a { color: var(--wir-fuss-leise); text-decoration: none; }
.wir-fuss a:hover { color: var(--wp--preset--color--flaeche); text-decoration: underline; text-decoration-color: var(--wir-silhouette); text-underline-offset: .25em; }
.wir-fuss a:focus-visible { outline-color: var(--wir-fokus-ring); }
.wir-fuss__titel { font: 600 var(--wp--preset--font-size--meta)/1.3 var(--wp--preset--font-family--text); color: var(--wp--preset--color--hellgruen); margin: 0 0 .6rem; }
.wir-fuss__titel a { color: inherit; }
.wir-fuss__links { list-style: none; margin: 0; padding: 0; }
.wir-fuss__links li { margin: 0; }
/* 36 px Zeilenziel: dichter als die 48 px im Inhalt, über dem Minimum von WCAG 2.5.8. */
.wir-fuss__links a, .wir-fuss .wir-vereinskontakt a { display: inline-flex; align-items: center; min-height: 2.25rem; }
.wir-fuss .wir-vereinskontakt > p { margin: 0; font-size: inherit; line-height: 1.6; }
.wir-fuss .wir-vereinskontakt > .wir-vereinskontakt__adresse { margin-bottom: .5rem; }
.wir-fuss .wir-social { gap: .5rem; margin-top: 1.25rem; }
.wir-fuss .wir-social__link { width: 2.75rem; height: 2.75rem; color: var(--wir-fuss-leise); border: 1px solid var(--wir-fuss-linie); }
.wir-fuss .wir-social__link .wir-symbol { width: 20px; height: 20px; }
.wir-fuss .wir-social__link:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .36); color: var(--wp--preset--color--flaeche); text-decoration: none; }
/* Die Zeile unter der Haarlinie */
.wir-fuss__unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 2rem; border-top: 1px solid var(--wir-fuss-linie); padding-top: .9rem; font-size: var(--wp--preset--font-size--klein); }
.wir-fuss__unten p { margin: 0; }
.wir-fuss__recht ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; margin: 0; padding: 0; }
.wir-fuss__recht a { display: inline-flex; align-items: center; min-height: 2.25rem; }
/* Kontakt steht unter dem Logo (Chris, 03.10.2026). Schmal: Marke mit Kontakt
   oben über die ganze Breite, darunter die drei Linkspalten; am Handy zwei
   nebeneinander, die letzte über die ganze Breite — keine Spalte steht allein. */
@media (max-width: 900px) { .wir-fuss__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wir-fuss__verein { grid-column: 1 / -1; } }
@media (max-width: 600px) {
	.wir-fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
	.wir-fuss__spalte:last-child { grid-column: 1 / -1; }
	.wir-fuss__spalte:last-child .wir-fuss__links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
	.wir-fuss__unten { flex-direction: column-reverse; align-items: flex-start; }
	.wir-fuss__register { display: block; }
	.wir-fuss__register > span { display: none; }
}