/* ==========================================================================
   Erinnerung im Revier — Front-End-Stylesheet
   Einzige Stylesheet-Quelle des Themes. Aufbau nach SPEC.md §8.
   Farben, Abstände, Radien, Schatten und Übergänge kommen ausschliesslich
   aus theme.json (var(--wp--preset--…) / var(--wp--custom--…)).
   ========================================================================== */

/* ==========================================================================
   1. Schriftart — Open Sans (lokal, keine externen Requests)
   ========================================================================== */

/* latin-ext */
@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/open-sans-variable-latin-ext.woff2') format('woff2');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/open-sans-variable-latin.woff2') format('woff2');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Basis & Reset-Ergänzungen
   ========================================================================== */

:root {
	/* Innenabstand links/rechts der Sektionen (aus theme.json Root-Padding). */
	--eir-gutter: var(--wp--style--root--padding-right, 2rem);
	/* Aussenbreite eines Abschnitts inkl. Innenabstand — entspricht 1200px der Vorlage. */
	--eir-container: calc(var(--wp--style--global--content-size, 1136px) + 2 * var(--eir-gutter));
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--wp--custom--header--height);
}

body {
	/* clip statt hidden: verträgt sich mit position: sticky im Kopfbereich. */
	overflow-x: clip;
}

/*
 * Abschnitte stossen direkt aneinander.
 *
 * WordPress setzt zwischen den obersten Blöcken einer Seite automatisch den
 * Blockabstand (--wp--style--block-gap, hier 1,5rem) als margin-block-start.
 * Zwischen Kopfbereich, Inhalt und Fussbereich entstand dadurch je ein 24px
 * hoher weisser Streifen: Der Startbereich klebte nicht am Kopfbereich, und
 * über dem Fussbereich stand eine weisse Lücke.
 *
 * Der Abstand ist hier überflüssig, weil jede Sektion ihren eigenen
 * senkrechten Innenabstand mitbringt (Abstands-Voreinstellungen 70/80).
 * Innerhalb der Sektionen bleibt der Blockabstand unverändert erhalten —
 * diese Regel betrifft ausschliesslich die oberste Ebene.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

::selection {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface-alt);
}

img {
	max-width: 100%;
}

/* Sichtbarer Fokus auf allen bedienbaren Elementen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Skip-Link — klassische WordPress-Umsetzung. */
.eir-skip-link {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 1000;
	display: block;
	padding: 12px 24px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-deep);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	border-radius: 0 0 var(--wp--custom--radius--sm) 0;
	box-shadow: var(--wp--custom--shadow--panel);
}

.eir-skip-link:focus {
	left: 0;
	text-decoration: none;
}

/* Pfeil-Icon (eir_arrow_svg) */
.eir-arrow {
	flex-shrink: 0;
}

/* ==========================================================================
   3. Buttons + Core-Button-Block-Styles
   ========================================================================== */

.eir-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border: 1.5px solid transparent;
	border-radius: var(--wp--custom--radius--xs);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--wp--custom--transition--fast);
}

.eir-btn:hover,
.eir-btn:focus {
	text-decoration: none;
}

/* Primär: gefüllt (heller Grund) */
.eir-btn.eir-btn--primary {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--btn);
}

.eir-btn.eir-btn--primary:hover,
.eir-btn.eir-btn--primary:focus {
	background-color: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
	transform: translateY(-1px);
}

/* Primär auf dunklem Grund: weiss mit tiefblauer Schrift (wie in der Vorlage). */
.eir-hero .eir-btn.eir-btn--primary,
.eir-result-box .eir-btn.eir-btn--primary,
.eir-on-dark .eir-btn.eir-btn--primary {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-deep);
}

.eir-hero .eir-btn.eir-btn--primary:hover,
.eir-hero .eir-btn.eir-btn--primary:focus,
.eir-result-box .eir-btn.eir-btn--primary:hover,
.eir-result-box .eir-btn.eir-btn--primary:focus,
.eir-on-dark .eir-btn.eir-btn--primary:hover,
.eir-on-dark .eir-btn.eir-btn--primary:focus {
	background-color: var(--wp--preset--color--primary-pale);
	border-color: var(--wp--preset--color--primary-pale);
	color: var(--wp--preset--color--primary-deep);
}

/* Umrandet */
.eir-btn.eir-btn--outline {
	background-color: transparent;
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.eir-btn.eir-btn--outline:hover,
.eir-btn.eir-btn--outline:focus {
	background-color: var(--wp--preset--color--primary-pale);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-deep);
}

/* Umrandet auf dunklem Grund */
.eir-hero .eir-btn.eir-btn--outline,
.eir-on-dark .eir-btn.eir-btn--outline {
	/* Weisstöne als Schleier — als Token nicht vorhanden. */
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--wp--preset--color--surface);
}

.eir-hero .eir-btn.eir-btn--outline:hover,
.eir-hero .eir-btn.eir-btn--outline:focus,
.eir-on-dark .eir-btn.eir-btn--outline:hover,
.eir-on-dark .eir-btn.eir-btn--outline:focus {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.8);
	color: var(--wp--preset--color--surface);
}

/* --- Core-Button-Block: Kopfbereichs-Schaltfläche ------------------------ */
.wp-block-button.is-style-eir-nav-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 20px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	border: 0;
	border-radius: var(--wp--custom--radius--xs);
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 700;
	line-height: 38px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--wp--custom--transition--fast);
}

.wp-block-button.is-style-eir-nav-cta .wp-block-button__link:hover,
.wp-block-button.is-style-eir-nav-cta .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/* --- Core-Button-Block: hell (für dunkle Sektionen) --------------------- */
.wp-block-button.is-style-eir-btn-light .wp-block-button__link {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-deep);
	border: 1.5px solid var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--xs);
	box-shadow: var(--wp--custom--shadow--btn);
	font-weight: 700;
	text-decoration: none;
	transition: all var(--wp--custom--transition--fast);
}

.wp-block-button.is-style-eir-btn-light .wp-block-button__link:hover,
.wp-block-button.is-style-eir-btn-light .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary-pale);
	border-color: var(--wp--preset--color--primary-pale);
	color: var(--wp--preset--color--primary-deep);
	transform: translateY(-1px);
}

/* --- Core-Button-Block: umrandet ---------------------------------------- */
.wp-block-button.is-style-eir-btn-outline .wp-block-button__link {
	background-color: transparent;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--xs);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
	transition: all var(--wp--custom--transition--fast);
}

.wp-block-button.is-style-eir-btn-outline .wp-block-button__link:hover,
.wp-block-button.is-style-eir-btn-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary-pale);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-deep);
}

.eir-on-dark .wp-block-button.is-style-eir-btn-outline .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-eir-btn-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--wp--preset--color--surface);
}

.eir-on-dark .wp-block-button.is-style-eir-btn-outline .wp-block-button__link:hover,
.eir-on-dark .wp-block-button.is-style-eir-btn-outline .wp-block-button__link:focus,
.wp-block-cover .wp-block-button.is-style-eir-btn-outline .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-eir-btn-outline .wp-block-button__link:focus {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.8);
	color: var(--wp--preset--color--surface);
}

/* --- Core-Gruppen-Styles ------------------------------------------------ */
.wp-block-group.is-style-eir-form-card {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--xl);
	padding: 36px;
	box-shadow: var(--wp--custom--shadow--panel);
}

.wp-block-group.is-style-eir-panel {
	background-color: var(--wp--preset--color--surface-alt);
	border-radius: var(--wp--custom--radius--lg);
	padding: 28px 32px;
}

/* --- Core-Spalten-Style: Kartenlayout (Karte + Stationsliste) ----------- */
.wp-block-columns.is-style-eir-map-layout {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.wp-block-columns.is-style-eir-map-layout > .wp-block-column {
	min-width: 0;
}

/* ==========================================================================
   4. Kopfbereich — Header, Marke, Navigation, Mobilmenü
   ========================================================================== */

/* --- Grundgerüst --------------------------------------------------------- */
.eir-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 900;
	background-color: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--custom--shadow--header);
}

.eir-header__inner {
	display: flex;

	/* Warum umbrechend statt nowrap: siehe Stufe 4 im Abschnitt 4.1 unten. */
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;

	/*
	 * Getrennt gesetzt: Der Abstand gehört zwischen Marke und Aktionsgruppe,
	 * nicht zwischen die beiden Zeilen des Umbruchfalls. Ein row-gap würde die
	 * Kopfzeile dort ohne Grund um weitere 24px wachsen lassen.
	 */
	column-gap: var(--wp--preset--spacing--30);
	row-gap: 0;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	min-height: var(--wp--custom--header--height);
}

/*
 * Dieselbe Breite noch einmal — höher gewichtet.
 *
 * Die Kopfzeile steckt in einer Gruppe mit layout: constrained. WordPress
 * erzeugt daraus eine eigene Regel, die jedem Kind die INHALTSbreite zuweist
 * (.wp-container-… > :where(…) { max-width: var(--wp--style--global--content-size) }).
 * Sie ist genauso spezifisch wie .eir-header__inner und steht als eingebettetes
 * Stylesheet weiter hinten — ohne diese Regel würde die Kopfzeile also doch
 * wieder bei 1136px enden. Zwei Klassen heben die Gewichtung eindeutig an.
 *
 * Warum die Kopfzeile überhaupt breiter ist als der Text darunter: In ihr
 * stehen Marke, Menü und Kontakt-Schaltfläche nebeneinander in einer Zeile,
 * deren Bedarf nicht vom Lesekomfort bestimmt wird, sondern von der Länge der
 * Menüpunkte. Die Inhaltsbreite ist für diese Zeile zu knapp — siehe Stufe 4
 * in Abschnitt 4.1.
 */
.eir-header .eir-header__inner {
	max-width: var(--wp--style--global--wide-size);
}

/*
 * Rückfallebene für den seitlichen Abstand — sie greift nur, wenn die
 * umgebende Gruppe ihn ausnahmsweise nicht liefert.
 *
 * Die Gruppe um die Kopfzeile trägt .has-global-padding und damit bereits den
 * Randabstand der Inhaltsspalte. Die frühere Regel prüfte diese Klasse am
 * FALSCHEN Element — an .eir-header__inner selbst, die sie nie trägt — und
 * legte den Abstand deshalb ein zweites Mal auf. Der Kopfzeile fehlten dadurch
 * bei jeder Fensterbreite 2 × 32px nutzbare Breite (1136px statt 1072px), und
 * Marke wie Menü standen 32px weiter innen als der übrige Seiteninhalt.
 * Geprüft wird jetzt der Elternteil; :where() hält die Spezifität bei null,
 * damit die Rückfallebene niemandem im Weg steht.
 */
:where(:not(.has-global-padding)) > .eir-header__inner {
	padding-inline: var(--eir-gutter);
}

/* --- Marke (eir/brand), Grundaussehen ------------------------------------ */
.eir-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	color: inherit;
	text-decoration: none;
}

.eir-brand:hover,
.eir-brand:focus {
	text-decoration: none;
}

.eir-brand__logo {
	display: block;
	width: auto;
}

.eir-brand__divider {
	display: block;
	flex-shrink: 0;
	width: 1px;
	height: 34px;
	background-color: var(--wp--preset--color--border);
}

.eir-brand__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.eir-brand__title {
	display: block;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.3px;
	color: var(--wp--preset--color--primary);
}

.eir-brand__sub {
	display: block;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: 0.3px;
	color: var(--wp--preset--color--text-light);
}

/* --------------------------------------------------------------------------
   4.1 Breitenaufteilung der Kopfzeile — vier Stufen gegen Überlappung
   --------------------------------------------------------------------------

   WARUM DIESER ABSCHNITT SO AUSSIEHT

   Marke, Menü und Kontakt-Schaltfläche teilen sich eine Zeile, deren Breite
   nach oben gedeckelt ist: .eir-header__inner ist auf die WEITE Breite der
   Seite begrenzt und wächst ab rund 1420px Fensterbreite nicht mehr mit. Ob
   der Inhalt hineinpasst, hängt deshalb NICHT von der Fensterbreite ab,
   sondern nur davon, wie lang Projektname und Menüpunkte sind. Ein
   Umschaltpunkt auf Fensterbreite kann diese Frage grundsätzlich nicht
   beantworten — genau daran sind die früheren Reparaturversuche gescheitert:
   Die gemeldete Überlappung war bei 1201px und bei 1920px auf den Pixel
   dieselbe (41,9px).

   Der Deckel lag zunächst bei der Inhaltsbreite (1136px). Das reichte für die
   Vorlage knapp, aber nicht mehr, sobald ein eigenes Logo dazukam: Fünf
   Menüpunkte und die Kontakt-Schaltfläche belegen allein rund 730px, der
   Markentext rund 290px. Für das Logo blieben damit unter 90px — zu wenig für
   jedes Logo, das breiter ist als hoch. Seit die Zeile die weite Breite nutzt
   (1360px), stehen dafür rund 310px zur Verfügung.

   Warum sie zudem für jede Messung unsichtbar blieb: Der frühere Aufbau
   erlaubte Menü und Aktionsgruppe per min-width: 0, unter ihre Inhaltsbreite
   zu schrumpfen, und richtete sie zugleich rechtsbündig aus
   (justify-content: flex-end, erzeugt aus dem Block-Attribut
   justifyContent: right). Ein Flex-Kasten, der schmaler ist als sein Inhalt
   und rechtsbündig ausrichtet, lässt diesen am ZEILENANFANG austreten — also
   nach links, quer über den Markentext. Die Seite wird davon nicht breiter,
   und scrollWidth kennt in Leserichtung links-nach-rechts nur den Überlauf am
   Zeilenende. Deshalb meldete jede Überlaufmessung „alles in Ordnung“,
   während im Bild die Menüpunkte über dem Untertitel lagen.

   Die Enge wird hier in vier Stufen beantwortet, ohne einen einzigen
   geratenen Pixelwert. Jede Stufe greift erst, wenn die vorherige nicht mehr
   reicht:

     Stufe 1  Die Kopfzeile bekommt ihre volle Breite zurück — der seitliche
              Abstand wird nicht mehr doppelt gerechnet (Rückfallebene oben).
     Stufe 2  Rollenverteilung: Nur die Marke gibt nach. Menü und
              Aktionsgruppe behalten ihre automatische Mindestbreite und
              können deshalb nie schmaler werden als ihr Inhalt — und damit
              nie über die Marke laufen.
     Stufe 3  Wird die Marke dennoch zu schmal, kürzt sich ihr Text selbst
              (Ellipse), statt in die Menüpunkte hineinzuragen.
     Stufe 4  Reicht auch das nicht — etwa weil die Redaktion einen sechsten
              Menüpunkt anlegt —, rutscht die Aktionsgruppe in eine zweite
              Zeile; im Extremfall bricht das Menü zusätzlich in sich um.

   Stufe 4 trägt den eigentlichen Beweis: Ein umbrechender Flex-Kasten kann
   konstruktionsbedingt nicht seitlich überlaufen, er beginnt stattdessen eine
   neue Zeile. Zusammen mit Stufe 2 ist eine Überlappung damit strukturell
   ausgeschlossen — nicht nur bei den Breiten, die zufällig geprüft wurden.
   -------------------------------------------------------------------------- */

/*
 * Stufe 2 — Rollenverteilung.
 *
 * min-width: 0 hebt die automatische Mindestbreite eines Flex-Elements auf.
 * Das darf ausschliesslich die Marke: Sie ist das Element, das im Notfall
 * schmaler werden und seinen Text kürzen kann (Stufe 3). Menü und
 * Aktionsgruppe behalten dagegen min-width: auto — sie sind damit nie
 * schmaler als ihr Inhalt und können ihn folglich nicht seitlich austreten
 * lassen. Früher war die Rollenverteilung genau umgekehrt.
 */
.eir-header .eir-brand {
	flex: 0 1 auto;
	min-width: 0;
}

.eir-header .eir-header__actions,
.eir-header .eir-nav {
	flex: 0 1 auto;
	min-width: auto;
}

/*
 * Rechtsbündig über einen automatischen Aussenabstand statt über
 * justify-content: flex-end. Der Unterschied ist der Kern der Korrektur:
 * flex-end schiebt zu breiten Inhalt nach links über den Nachbarn, ein
 * automatischer Aussenabstand schrumpft dagegen einfach auf null, sobald kein
 * Platz mehr da ist. Zusätzlich hält er die Gruppe auch dann rechtsbündig,
 * wenn sie nach Stufe 4 allein in der zweiten Zeile steht.
 */
.eir-header .eir-header__actions {
	justify-content: flex-start;
	margin-inline-start: auto;
}

/*
 * Stufe 4 innerhalb des Menüs: Reicht selbst die zweite Zeile nicht (etwa ab
 * neun Menüpunkten), bricht das Menü in sich um, statt seitlich auszubrechen.
 * Beides wird über die eigenen CSS-Variablen des Navigations-Blocks gesetzt —
 * das ist der vom Kern vorgesehene Weg und wirkt auch dann, wenn der
 * Vorlagenteil in der Datenbank noch die alten Block-Attribute
 * (justifyContent: right, flexWrap: nowrap) trägt.
 */
.eir-header .eir-nav.wp-block-navigation {
	--navigation-layout-wrap: wrap;
	--navigation-layout-justify: flex-start;
}

/*
 * Logo und Trennstrich bleiben ganz. Nur der Text der Marke ist elastisch —
 * ein zusammengestauchtes Logo wäre die schlechtere Antwort auf Platzmangel.
 */
.eir-header .eir-brand__logo,
.eir-header .eir-brand__divider {
	flex: 0 0 auto;
}

/*
 * Obergrenze für die Logofläche.
 *
 * Ohne sie bestimmt allein die Bilddatei, wie viel Breite die Marke belegt:
 * height/width: auto übernimmt jedes Seitenverhältnis ungeprüft. Ein Logo mit
 * viel leerer Fläche neben der Bildmarke — oder ein breiter Schriftzug — kostet
 * dann echte Zeilenbreite und drückt die Aktionsgruppe nach Stufe 4 in die
 * zweite Zeile, obwohl sichtbar kaum etwas dasteht.
 *
 * object-fit gehört zwingend dazu: Die Höhe steht als Inline-Stil am Bild
 * (logoHeight des Bausteins). Eine Breitengrenze ohne object-fit würde das Bild
 * stauchen statt es zu verkleinern. „contain" behält das Seitenverhältnis,
 * „left center" hält die Bildmarke bündig am Zeilenanfang.
 */
.eir-header .eir-brand__logo {
	max-width: 160px;
	object-fit: contain;
	object-position: left center;
}

/*
 * Stufe 3 — der Markentext kürzt sich selbst.
 *
 * Nur im Kopfbereich: Dort steht der Text in einer Zeile fester Höhe neben dem
 * Menü, und ohne overflow: hidden würde er bei Enge einfach darüber hinaus
 * gezeichnet. Im Fussbereich hat dieselbe Marke eine ganze Spalte für sich und
 * darf normal umbrechen — deshalb ist die Regel eingegrenzt. white-space:
 * nowrap gehört zwingend dazu: Es hält den Aufbau der Vorlage (Projektname
 * oben, Untertitel darunter) bei jeder Breite zweizeilig, statt ihn bei Enge
 * auf drei oder vier Zeilen anwachsen zu lassen.
 */
.eir-header .eir-brand__text {
	overflow: hidden;
}

.eir-header .eir-brand__title,
.eir-header .eir-brand__sub {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Navigation (core/navigation) --------------------------------------- */
.eir-header .wp-block-navigation {
	align-items: center;
}

.eir-header .wp-block-navigation .wp-block-navigation__container {
	gap: 0;
	align-items: center;
}

/*
 * 12px statt der 15px der Vorlage: Das spart über fünf Menüpunkte 30px und
 * verschafft der einzeiligen Kopfzeile spürbare Reserve, bevor Stufe 4 sie
 * zweizeilig macht. Optisch bleibt der Abstand zwischen den Menüpunkten dem
 * Vorbild sehr nahe.
 */
.eir-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	display: block;
	padding: 0 12px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: var(--wp--custom--header--height);
	color: var(--wp--preset--color--heading);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--wp--custom--transition--fast);
}

.eir-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: 0;

	/* Deckungsgleich mit dem Innenabstand oben — der Strich endet am Text. */
	left: 12px;
	right: 12px;
	height: 3px;
	background-color: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transition: transform var(--wp--custom--transition--fast);
}

.eir-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.eir-header .wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.eir-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.eir-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible::after,
.eir-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.eir-header .wp-block-navigation .current-menu-item.wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.eir-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.eir-header .wp-block-navigation .current-menu-item.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* Untermenü */
.eir-header .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 240px;
	padding: var(--wp--preset--spacing--10) 0;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--custom--shadow--panel);
}

.eir-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 18px;
	line-height: 1.5;
	white-space: normal;
}

.eir-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

/* Umschalter (Hamburger) und Schliessen-Schaltfläche */
.eir-header .wp-block-navigation .wp-block-navigation__responsive-container-open,
.eir-header .wp-block-navigation .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--heading);
}

/* Overlay-Menü (mobil) */
.eir-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--heading);
}

.eir-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	align-items: stretch;
	width: 100%;
}

.eir-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.eir-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: 100%;
	padding: 14px 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.4;
	white-space: normal;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.eir-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

.eir-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0;
	box-shadow: none;
	padding-left: var(--wp--preset--spacing--20);
}

/* ==========================================================================
   5. Hero — Startbereich
   ========================================================================== */

.eir-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--wp--preset--color--primary-deep);
}

.eir-hero.is-height-full {
	min-height: calc(100vh - var(--wp--custom--header--height));
}

.eir-hero.is-height-large {
	min-height: 78vh;
}

.eir-hero.is-height-medium {
	min-height: 60vh;
}

.eir-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center 40%;
	background-repeat: no-repeat;
	background-size: cover;
}

.eir-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Schleier — Transparenzwert ohne Token. */
	background-color: rgba(0, 0, 40, 0.52);
}

.eir-hero__decor {
	position: absolute;
	right: -60px;
	bottom: -40px;
	z-index: 0;
	width: 480px;
	max-width: 60%;
	height: auto;
	opacity: 0.07;
	pointer-events: none;
}

.eir-hero__content {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: var(--wp--preset--spacing--60);
	align-items: center;
	width: 100%;
	max-width: var(--eir-container);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--eir-gutter);
}

.eir-hero__main {
	min-width: 0;
}

.eir-hero__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	padding: 6px 14px;
	background-color: var(--wp--custom--on-dark--surface);
	border-radius: var(--wp--custom--radius--xs);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.4;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
}

.eir-hero__tag > span {
	opacity: 0.6;
}

.eir-hero .eir-hero__title {
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -1px;
	color: var(--wp--preset--color--surface);
}

.eir-hero .eir-hero__title-accent {
	font-style: normal;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.75);
}

.eir-hero .eir-hero__desc {
	max-width: 560px;
	margin: 0 0 36px;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.7;
	color: var(--wp--custom--on-dark--text);
}

.eir-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* --- Kennzahlen ---------------------------------------------------------- */
.eir-hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--custom--on-dark--surface);
}

.eir-hero-stat {
	text-align: left;
}

.eir-hero-stat__value {
	display: block;
	margin-bottom: 4px;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--surface);
}

.eir-hero-stat__label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.3px;
	color: var(--wp--custom--on-dark--muted);
}

/* --- Schwerpunkt-Karte --------------------------------------------------- */
.eir-focus-card {
	padding: 30px;
	background-color: var(--wp--custom--on-dark--border-soft);
	border: 1px solid var(--wp--custom--on-dark--border);
	border-radius: var(--wp--custom--radius--lg);
	backdrop-filter: blur(8px);
}

.eir-focus-card .eir-focus-card__title {
	margin: 0 0 18px;
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--custom--on-dark--muted);
}

.eir-focus-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--custom--on-dark--border-soft);
}

.eir-focus-item:last-child {
	border-bottom: none;
}

.eir-focus-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background-color: var(--wp--custom--on-dark--surface);
	border-radius: 50%;
	font-size: 16px;
	line-height: 1;
}

.eir-focus-item__text {
	display: block;
	min-width: 0;
}

.eir-focus-item__title {
	display: block;
	margin-bottom: 2px;
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--surface);
}

.eir-focus-item__sub {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--custom--on-dark--muted);
}

/* ==========================================================================
   6. Abschnitts-Überschrift & Trennstrich
   ========================================================================== */

.eir-section-header {
	margin-bottom: var(--wp--preset--spacing--50);
}

.eir-section-header.is-centered {
	text-align: center;
}

.eir-section-header__tag {
	display: inline-block;
	margin-bottom: 10px;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.eir-section-header .eir-section-header__title {
	margin: 0 0 14px;
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--wp--preset--color--heading);
}

.eir-section-header .eir-section-header__desc {
	max-width: 640px;
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.7;
	color: var(--wp--preset--color--text-light);
}

.eir-section-header.is-centered .eir-section-header__desc {
	margin-inline: auto;
}

.eir-divider {
	display: block;
	width: 48px;
	height: 4px;
	margin: 16px 0 20px;
	background-color: var(--wp--preset--color--primary);
	border-radius: 2px;
}

.eir-section-header.is-centered .eir-divider {
	margin-inline: auto;
}

/* Auf dunklem Grund */
.eir-section-header.is-on-dark .eir-section-header__tag {
	color: var(--wp--custom--on-dark--muted);
}

.eir-section-header.is-on-dark .eir-section-header__title {
	color: var(--wp--preset--color--surface);
}

.eir-section-header.is-on-dark .eir-section-header__desc {
	color: var(--wp--custom--on-dark--muted);
}

.eir-section-header.is-on-dark .eir-divider {
	/* Heller Trennstrich — Transparenzwert ohne Token. */
	background-color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   7. Hinweisbox & Bild mit Kennzeichnung
   ========================================================================== */

.eir-highlight-box {
	margin: var(--wp--preset--spacing--30) 0;
	padding: 20px 24px;
	background-color: var(--wp--preset--color--primary-pale);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0;
}

.eir-highlight-box p {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1.65;
	color: var(--wp--preset--color--primary-deep);
}

.eir-highlight-box p + p {
	margin-top: 10px;
}

.eir-highlight-box a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

/* --- Bild mit Kennzeichnung ---------------------------------------------- */
.eir-image-badge {
	position: relative;
	margin: 0;
}

.eir-image-badge__frame {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--image);
}

.eir-image-badge__frame img,
.eir-image-badge__frame .eir-placeholder {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
}

.eir-image-badge__badge {
	position: absolute;
	bottom: -20px;
	left: -20px;
	display: block;
	padding: 18px 24px;
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--badge);
	color: var(--wp--preset--color--surface);
}

.eir-image-badge__badge.is-pos-bottom-right {
	left: auto;
	right: -20px;
}

.eir-image-badge__value {
	display: block;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1;
}

.eir-image-badge__label {
	display: block;
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	opacity: 0.85;
}

/* ==========================================================================
   8. Raster
   ========================================================================== */

.eir-grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.eir-grid > * {
	min-width: 0;
}

.eir-grid.eir-grid--2 {
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.eir-grid.eir-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.eir-grid.eir-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

/* ==========================================================================
   9. Themenkarten
   ========================================================================== */

.eir-feature-card {
	position: relative;
	overflow: hidden;
	padding: 32px 28px;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	transition: all var(--wp--custom--transition--base);
}

.eir-feature-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-color: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transition: transform var(--wp--custom--transition--base);
}

.eir-feature-card:hover {
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

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

.eir-feature-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 20px;
	background-color: var(--wp--preset--color--primary-pale);
	border-radius: var(--wp--custom--radius--xl);
	font-size: 24px;
	line-height: 1;
}

.eir-feature-card .eir-feature-card__title {
	margin: 0 0 10px;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--wp--preset--color--heading);
}

.eir-feature-card .eir-feature-card__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	color: var(--wp--preset--color--text-light);
}

.eir-feature-card .eir-feature-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.eir-feature-card .eir-feature-card__link:hover,
.eir-feature-card .eir-feature-card__link:focus {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

/* ==========================================================================
   10. Erinnerungsorte & Karte
   ========================================================================== */

.eir-place-list {
	display: block;
}

.eir-place {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: padding var(--wp--custom--transition--fast);
}

.eir-place:last-child {
	border-bottom: none;
}

.eir-place:hover,
.eir-place:focus-within {
	padding-left: 6px;
}

.eir-place__num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	background-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--surface);
}

.eir-place__text {
	display: block;
	min-width: 0;
}

.eir-place__title {
	display: block;
	margin-bottom: 2px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--heading);
}

.eir-place .eir-place__title a,
.eir-place a.eir-place__title {
	color: inherit;
	text-decoration: none;
}

.eir-place .eir-place__title a:hover,
.eir-place a.eir-place__title:hover,
.eir-place .eir-place__title a:focus,
.eir-place a.eir-place__title:focus {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.eir-place__sub {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--text-light);
}

/* Auf dunklem Grund */
.eir-place-list.is-on-dark .eir-place {
	border-bottom-color: var(--wp--custom--on-dark--border-soft);
}

.eir-place-list.is-on-dark .eir-place__title,
.eir-place-list.is-on-dark a.eir-place__title,
.eir-place-list.is-on-dark .eir-place__title a {
	color: var(--wp--preset--color--surface);
}

.eir-place-list.is-on-dark .eir-place__sub {
	color: var(--wp--custom--on-dark--faint);
}

.eir-place-list.is-on-dark a.eir-place__title:hover,
.eir-place-list.is-on-dark .eir-place__title a:hover {
	color: var(--wp--preset--color--surface);
	text-decoration: underline;
}

/* --- Interaktive Karte (Zwei-Klick-Lösung) ------------------------------- */
.eir-map {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--image);
}

.eir-on-dark .eir-map,
.wp-block-cover .eir-map {
	box-shadow: var(--wp--custom--shadow--image-dark);
}

.eir-map__consent {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: var(--eir-map-height, 480px);
	padding: 32px 24px;
	background-color: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	text-align: center;
}

.eir-map .eir-map__consent-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--heading);
}

.eir-map .eir-map__consent-text {
	max-width: 52ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	color: var(--wp--preset--color--text-light);
}

.eir-map__consent-btn {
	margin-top: 6px;
}

/* Fehlermeldung, wenn Leaflet nicht geladen werden konnte (assets/js/map.js). */
.eir-map__error {
	margin: 4px 0 0;
	padding: 10px 16px;
	font-size: var(--wp--preset--font-size--compact);
	line-height: 1.6;
	text-align: center;
	color: var(--wp--preset--color--text-light);
}

.eir-map__canvas {
	width: 100%;
	height: var(--eir-map-height, 480px);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-alt);
}

.eir-map__canvas[hidden] {
	display: none;
}

/*
 * Ersatzbild: Hat kein einziger Erinnerungsort Koordinaten, gibt der Block
 * statt der Karte ein Bild aus (§6.12). Es füllt dieselbe Höhe wie die Karte.
 */
.eir-map__fallback {
	height: var(--eir-map-height, 480px);
	overflow: hidden;
}

.eir-map__fallback-image,
.eir-map__fallback img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eir-map.is-fallback .eir-editor-hint {
	margin: 0;
}

/* --- Leaflet-Anpassungen im Theme-Stil ---------------------------------- */
.leaflet-container {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	background-color: var(--wp--preset--color--surface-alt);
}

.leaflet-container a {
	color: var(--wp--preset--color--primary);
}

.leaflet-popup-content-wrapper {
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--card-hover);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
}

.leaflet-popup-content {
	margin: 14px 16px;
	font-size: var(--wp--preset--font-size--compact);
	line-height: 1.6;
}

/* Sprechblase: Das Markup baut assets/js/map.js — Titel als <strong> ohne Klasse. */
.eir-map__popup strong {
	display: block;
	margin-bottom: 2px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--heading);
}

.eir-map__popup-sub {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-light);
}

.eir-map__popup-link {
	display: inline-block;
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.leaflet-container a.leaflet-popup-close-button {
	color: var(--wp--preset--color--text-light);
}

.leaflet-container a.leaflet-popup-close-button:hover {
	color: var(--wp--preset--color--heading);
}

.leaflet-control-attribution {
	font-size: var(--wp--preset--font-size--tiny);
}

.leaflet-bar a {
	color: var(--wp--preset--color--heading);
}

/* ==========================================================================
   11. Teamkarten
   ========================================================================== */

.eir-team-card {
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	transition: all var(--wp--custom--transition--base);
}

.eir-team-card:hover,
.eir-team-card:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--custom--shadow--team-hover);
	transform: translateY(-4px);
}

.eir-team-card .eir-team-card__inner {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.eir-team-card .eir-team-card__inner:hover,
.eir-team-card .eir-team-card__inner:focus {
	color: inherit;
	text-decoration: none;
}

.eir-team-card__photo {
	display: block;
	position: relative;
	height: 260px;
	overflow: hidden;
}

.eir-team-card__photo img,
.eir-team-card__photo .eir-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eir-team-card__overlay {
	display: block;
	position: absolute;
	inset: 0;
	/* Farbverlauf aus Primärfarbe — Rückfallwert für ältere Browser. */
	background: linear-gradient(to top, rgba(16, 155, 197, 0.5) 0%, transparent 50%);
	background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent) 0%, transparent 50%);
}

.eir-team-card__body {
	display: block;
	padding: 28px;
}

.eir-team-card__role {
	display: block;
	margin-bottom: 8px;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.eir-team-card .eir-team-card__name {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.25;
	color: var(--wp--preset--color--heading);
}

.eir-team-card__degree {
	display: block;
	margin-bottom: 14px;
	font-size: var(--wp--preset--font-size--compact);
	line-height: 1.5;
	color: var(--wp--preset--color--text-light);
}

.eir-team-card__text {
	display: block;
	margin-bottom: 16px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	color: var(--wp--preset--color--text-light);
}

.eir-team-card__email {
	display: block;
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 600;
	word-break: break-word;
	color: var(--wp--preset--color--primary);
}

.eir-team-card__link {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   12. Veranstaltungskarten, Detailzeilen, Ergebnis-Box, Abzeichen
   ========================================================================== */

.eir-event-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--card);
	transition: all var(--wp--custom--transition--base);
}

.eir-event-card:hover,
.eir-event-card:focus-within {
	box-shadow: var(--wp--custom--shadow--event-hover);
	transform: translateY(-3px);
}

.eir-event-card__photo {
	height: 190px;
	overflow: hidden;
}

.eir-event-card__photo img,
.eir-event-card__photo .eir-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--transition--slow);
}

.eir-event-card:hover .eir-event-card__photo img {
	transform: scale(1.04);
}

.eir-event-card__header {
	position: relative;
	padding: 24px;
	background-color: var(--wp--preset--color--primary);
}

.eir-event-card__header.is-style-deep {
	background-color: var(--wp--preset--color--primary-deep);
}

.eir-event-card__header.is-style-dark {
	background-color: var(--wp--preset--color--heading);
}

.eir-event-card__icon {
	display: block;
	margin-bottom: 10px;
	font-size: 32px;
	line-height: 1;
}

.eir-event-card .eir-event-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.2px;
	color: var(--wp--preset--color--surface);
}

.eir-event-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 24px;
}

.eir-event-card .eir-event-card__text {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	color: var(--wp--preset--color--text-light);
}

.eir-detail {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--compact);
	line-height: 1.6;
	color: var(--wp--preset--color--text);
}

.eir-detail__icon {
	flex-shrink: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--wp--preset--color--primary);
}

.eir-event-card .eir-event-card__link {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.eir-event-card .eir-event-card__link:hover,
.eir-event-card .eir-event-card__link:focus {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

/* --- Ergebnis-Box -------------------------------------------------------- */
.eir-result-box {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	padding: 36px 40px;
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--surface);
}

.eir-result-box__main {
	min-width: 0;
}

.eir-result-box .eir-result-box__title {
	margin: 0 0 10px;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.25;
	color: var(--wp--preset--color--surface);
}

.eir-result-box .eir-result-box__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	opacity: 0.88;
}

.eir-result-box .eir-result-box__text a {
	color: var(--wp--preset--color--surface);
	text-decoration: underline;
}

.eir-result-box__main .eir-btn {
	margin-top: 20px;
}

.eir-result-box__badges {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 160px;
}

.eir-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background-color: var(--wp--custom--on-dark--surface);
	border-radius: var(--wp--custom--radius--md);
}

.eir-badge__icon {
	font-size: 18px;
	line-height: 1;
}

.eir-badge__text {
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--surface);
}

/* ==========================================================================
   13. Buch-Cover & Schlagwörter
   ========================================================================== */

.eir-book-wrap {
	position: relative;
	display: flex;
	justify-content: center;
}

.eir-book {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 260px;
	height: 340px;
	padding: 32px 24px;
	background: linear-gradient(135deg, var(--wp--preset--color--primary-deep) 0%, var(--wp--preset--color--primary) 100%);
	border-radius: var(--wp--custom--radius--sm) 12px 12px var(--wp--custom--radius--sm);
	box-shadow: var(--wp--custom--shadow--book);
	text-align: center;
	color: var(--wp--preset--color--surface);
}

.eir-book::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 24px;
	/* Buchrücken-Schatten — Transparenzwert ohne Token. */
	background-color: rgba(0, 0, 0, 0.18);
	border-radius: var(--wp--custom--radius--sm) 0 0 var(--wp--custom--radius--sm);
}

.eir-book__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 16px;
	background-color: var(--wp--custom--on-dark--surface);
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
}

.eir-book__title {
	display: block;
	margin-bottom: 12px;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 800;
	line-height: 1.3;
}

.eir-book__sub {
	display: block;
	font-size: var(--wp--preset--font-size--tiny);
	line-height: 1.4;
	opacity: 0.7;
}

.eir-book__ribbon {
	position: absolute;
	top: -12px;
	right: -16px;
	padding: 5px 10px;
	background-color: var(--wp--preset--color--signal);
	border-radius: var(--wp--custom--radius--xs);
	box-shadow: var(--wp--custom--shadow--ribbon);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 800;
	letter-spacing: 0.5px;
	line-height: 1.4;
	color: var(--wp--preset--color--surface);
}

/*
 * Echtes Cover-Bild statt der Grafik: Die Buchform legt ihre eigene Darstellung
 * ab (feste Grösse, Farbverlauf, Innenabstand, Buchrücken) und umschliesst das
 * Bild nur noch. Schatten und Radius liefert die Regel für .eir-book__image.
 */
.eir-book.has-image {
	width: auto;
	height: auto;
	padding: 0;
	background: none;
	box-shadow: none;
}

.eir-book.has-image::before {
	display: none;
}

.eir-book-wrap .eir-book__image {
	display: block;
	width: 260px;
	max-width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--sm) 12px 12px var(--wp--custom--radius--sm);
	box-shadow: var(--wp--custom--shadow--book);
}

/* --- Schlagwörter -------------------------------------------------------- */

/*
 * Der Abstand sitzt am Wrapper des Blocks, nicht an der Schilder-Reihe —
 * sonst klafft er zwischen Überschrift und Schildern.
 */
.eir-tag-list {
	margin: 20px 0;
}

.eir-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0;
}

.eir-tag-list > .eir-tags {
	margin: 0;
}

.eir-tag {
	padding: 5px 12px;
	background-color: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.6;
	color: var(--wp--preset--color--text);
}

.eir-tag-list__heading,
h3.eir-tag-list__heading {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-light);
}

/* ==========================================================================
   14. Kontaktangaben, Logo-Reihe, Formular-Karte
   ========================================================================== */

.eir-contact {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 18px;
}

.eir-contact__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	background-color: var(--wp--preset--color--primary-pale);
	border-radius: var(--wp--custom--radius--lg);
	font-size: 18px;
	line-height: 1;
}

.eir-contact__body {
	display: block;
	min-width: 0;
}

.eir-contact__label {
	display: block;
	margin-bottom: 3px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-light);
}

.eir-contact__value {
	display: block;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	word-break: break-word;
	color: var(--wp--preset--color--heading);
}

.eir-contact .eir-contact__value a {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* --- Logo-Reihe ---------------------------------------------------------- */
.eir-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.eir-logos__heading,
h3.eir-logos__heading,
h4.eir-logos__heading {
	width: 100%;
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-light);
}

.eir-logos__item {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.eir-logos img {
	display: block;
	width: auto;
	height: 40px;
	object-fit: contain;
	opacity: 0.85;
	filter: grayscale(20%);
	transition: opacity var(--wp--custom--transition--fast), filter var(--wp--custom--transition--fast);
}

.eir-logos.is-grayscale img {
	filter: grayscale(100%);
}

.eir-logos img:hover,
.eir-logos__item:focus-visible img {
	opacity: 1;
	filter: grayscale(0);
}

/*
 * Ersatz-Schriftzug: erscheint, solange für eine Partnerinstitution noch kein
 * Logo hochgeladen wurde. So bleibt die Reihe sichtbar und der Abschnitt wirkt
 * nicht defekt. Sobald ein Logo hinterlegt ist, verschwindet der Schriftzug.
 */
.eir-logos__wordmark {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text-light);
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	transition: color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
}

.eir-logos__item.is-wordmark:hover .eir-logos__wordmark,
.eir-logos__item.is-wordmark:focus-visible .eir-logos__wordmark {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* --- Formular-Karte ------------------------------------------------------ */
.eir-form-card {
	padding: 36px;
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--custom--shadow--panel);
}

.eir-form-card .eir-form-card__title {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.25;
	color: var(--wp--preset--color--heading);
}

.eir-form-card .eir-form-card__sub {
	margin: 0 0 24px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--text-light);
}

/* Formularfelder — greift auch für eingebundene Formular-Plugins. */
.eir-form-card label,
.wp-block-group.is-style-eir-form-card label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.3px;
	color: var(--wp--preset--color--text);
}

.eir-form-card input[type='text'],
.eir-form-card input[type='email'],
.eir-form-card input[type='tel'],
.eir-form-card input[type='url'],
.eir-form-card input[type='number'],
.eir-form-card input[type='date'],
.eir-form-card input[type='search'],
.eir-form-card select,
.eir-form-card textarea,
.wp-block-group.is-style-eir-form-card input[type='text'],
.wp-block-group.is-style-eir-form-card input[type='email'],
.wp-block-group.is-style-eir-form-card input[type='tel'],
.wp-block-group.is-style-eir-form-card input[type='url'],
.wp-block-group.is-style-eir-form-card select,
.wp-block-group.is-style-eir-form-card textarea {
	width: 100%;
	padding: 11px 14px;
	background-color: var(--wp--preset--color--surface);
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--wp--preset--color--heading);
	transition: border-color var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast);
}

.eir-form-card input:focus,
.eir-form-card select:focus,
.eir-form-card textarea:focus,
.wp-block-group.is-style-eir-form-card input:focus,
.wp-block-group.is-style-eir-form-card select:focus,
.wp-block-group.is-style-eir-form-card textarea:focus {
	border-color: var(--wp--preset--color--primary);
	/* Fokusring als Transparenz — als Token nicht vorhanden. */
	box-shadow: 0 0 0 3px rgba(16, 155, 197, 0.1);
}

.eir-form-card textarea,
.wp-block-group.is-style-eir-form-card textarea {
	min-height: 100px;
	resize: vertical;
}

.eir-form-card button[type='submit'],
.eir-form-card input[type='submit'],
.wp-block-group.is-style-eir-form-card button[type='submit'],
.wp-block-group.is-style-eir-form-card input[type='submit'] {
	width: 100%;
	margin-top: 4px;
	padding: 13px;
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--surface);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--fast);
}

.eir-form-card button[type='submit']:hover,
.eir-form-card input[type='submit']:hover,
.wp-block-group.is-style-eir-form-card button[type='submit']:hover,
.wp-block-group.is-style-eir-form-card input[type='submit']:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/* ==========================================================================
   15. Fußbereich
   ========================================================================== */

.eir-footer {
	padding-top: 56px;
	background-color: var(--wp--preset--color--primary);
	border-top: 4px solid var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
}

.eir-footer h1,
.eir-footer h2,
.eir-footer h3,
.eir-footer h4,
.eir-footer h5,
.eir-footer h6 {
	color: var(--wp--preset--color--surface);
}

.eir-footer h4 {
	margin: 0 0 18px;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.4;
	text-transform: uppercase;
	opacity: 0.7;
}

.eir-footer p {
	font-size: var(--wp--preset--font-size--compact);
	line-height: 1.7;
	color: var(--wp--custom--on-dark--text);
}

.eir-footer a {
	color: var(--wp--custom--on-dark--text);
	text-decoration: none;
	transition: color var(--wp--custom--transition--fast);
}

.eir-footer a:hover,
.eir-footer a:focus {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

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

.eir-footer li {
	margin-bottom: 9px;
	font-size: var(--wp--preset--font-size--medium);
}

.eir-footer address {
	font-style: normal;
	font-size: var(--wp--preset--font-size--compact);
	line-height: 1.8;
	color: var(--wp--custom--on-dark--text);
}

.eir-footer .wp-block-navigation .wp-block-navigation__container {
	flex-direction: column;
	gap: 9px;
	align-items: flex-start;
}

.eir-footer .wp-block-navigation .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--custom--on-dark--text);
}

.eir-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--50);
	padding-bottom: 44px;
}

.eir-footer__brand {
	min-width: 0;
}

/*
 * Der Fussbereich benutzt den Baustein „Projekt-Logo & Titel“ (eir/brand),
 * nicht core/site-logo. Grund: eir/brand greift auf das WordPress-Website-Logo
 * zurück und zeigt notfalls den mitgelieferten Platzhalter — an dieser Stelle
 * klafft also nie eine Lücke. Die helle Platte liegt deshalb am inneren Bild,
 * nicht am Element mit der Klasse eir-footer__logo (das ist hier der Verweis).
 */
.eir-footer__logo {
	display: inline-flex;
	margin-bottom: 14px;
}

.eir-footer__logo .eir-brand__logo {
	padding: 6px 8px;
	/* Heller Untergrund für farbige Logos — Transparenzwert ohne Token. */
	background-color: rgba(255, 255, 255, 0.92);
	border-radius: var(--wp--custom--radius--lg);
}

/*
 * Die Marken-Spalte enthält beschriftete Textlinks („E-Mail schreiben",
 * „Projekt-Website"), keine icon-grossen Schaltflächen. Ohne feste Breite und
 * ohne Wortumbruch bleiben sie in voller Länge lesbar und brechen nur als
 * ganze Zeile um.
 */
.eir-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.eir-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 34px;
	padding: 5px 14px;
	background-color: var(--wp--custom--on-dark--surface);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--fast);
}

.eir-footer__social a:hover,
.eir-footer__social a:focus {
	background-color: var(--wp--custom--on-dark--surface-strong);
}

.eir-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	border-top: 1px solid var(--wp--custom--on-dark--surface);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--on-dark--faint);
}

.eir-footer__bottom a {
	color: var(--wp--custom--on-dark--muted);
}

.eir-footer__bottom a:hover,
.eir-footer__bottom a:focus {
	color: var(--wp--preset--color--surface);
}

.eir-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

/* Marke im Fußbereich hell darstellen */
.eir-footer .eir-brand__title {
	color: var(--wp--preset--color--surface);
}

.eir-footer .eir-brand__sub {
	color: var(--wp--custom--on-dark--muted);
}

.eir-footer .eir-brand__divider {
	background-color: var(--wp--custom--on-dark--border);
}

/* ==========================================================================
   16. Nach-oben-Button
   ========================================================================== */

.eir-back-top {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	box-shadow: var(--wp--custom--shadow--back-top);
	font-size: 18px;
	line-height: 1;
	color: var(--wp--preset--color--surface);
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	transition: all var(--wp--custom--transition--fast);
}

.eir-back-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

.eir-back-top:hover,
.eir-back-top:focus {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
	transform: translateY(-2px);
}

/* ==========================================================================
   17. Einzelansichten (Team, Veranstaltung, Ort) & Archive
   ========================================================================== */

/* --- Titelbereich einer Seite / eines Beitrags -------------------------- */
.eir-page-header {
	padding-block: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--surface-alt);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.eir-page-header .eir-page-header__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--wp--preset--color--heading);
}

.eir-page-header .eir-page-header__intro {
	max-width: 640px;
	margin: 14px 0 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.7;
	color: var(--wp--preset--color--text-light);
}

/* --- Angaben zum aktuellen Beitrag (Block eir/entry-meta) ---------------- */
/*
 * Gibt auf den Detailseiten die Felder aus, die die Redaktion im Seitenmenü
 * gepflegt hat (Datum, Ort, E-Mail, Schwerpunkte …). Die einzelnen Zeilen
 * benutzen bewusst .eir-detail wieder, damit eine Veranstaltungs-Detailseite
 * genauso aussieht wie die Karten auf der Startseite.
 */
.eir-entry-meta {
	display: block;
	margin: 0 0 28px;
}

.eir-entry-meta__kicker {
	display: block;
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.eir-entry-meta__degree {
	display: block;
	margin-bottom: 18px;
	font-size: var(--wp--preset--font-size--compact);
	color: var(--wp--preset--color--text-light);
}

.eir-entry-meta__rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 4px;
}

.eir-entry-meta__rows:empty {
	display: none;
}

.eir-entry-meta__focus-wrap {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.eir-entry-meta__focus-title {
	margin: 0 0 10px;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-light);
}

.eir-entry-meta__focus {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eir-entry-meta__focus li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--text);
}

.eir-entry-meta__focus li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 8px;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
}

.eir-entry-meta__actions {
	margin-top: 24px;
}

/* --- Beitragsbild -------------------------------------------------------- */
.eir-featured-image img,
.eir-featured-image .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--image);
}

/* --- Personenprofil (single-eir_team) -----------------------------------
 *
 * .eir-profile sitzt auf dem <main>-Element und ist reiner Namensraum — hier
 * darf kein Raster stehen. Die Zweispaltigkeit erzeugt das Template selbst
 * über die Spalten .eir-profile__grid; ein Raster auf <main> würde die
 * alignfull-Sektionen darin zerbrechen.
 */
.eir-profile__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--image);
}

.eir-profile__intro {
	min-width: 0;
}

/*
 * Solange für eine Person noch kein Foto hochgeladen wurde, gibt der Block
 * core/post-featured-image gar nichts aus — die Bildspalte bliebe als grosse
 * leere Fläche stehen und die Seite sähe defekt aus. Deshalb wird die Spalte
 * dann ausgeblendet und der Textbereich nimmt die volle Breite ein.
 * Sobald ein Beitragsbild gesetzt ist, greift die Regel nicht mehr.
 */
.eir-profile__grid .eir-profile__media:not(:has(img)) {
	display: none;
}

.eir-profile__grid:not(:has(.eir-profile__media img)) .eir-profile__intro {
	flex-basis: 100%;
}

/* Kicker über dem Namen — Farbe und Auszeichnung stehen im Template. */
.eir-profile__kicker {
	margin: 0 0 10px;
	line-height: 1.4;
}

/* Name der Person — der Titel kommt aus core/post-title. */
.eir-profile__intro .wp-block-post-title {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: 1.2;
	color: var(--wp--preset--color--heading);
}

/* Kurzvorstellung (core/post-excerpt) unter dem Namen. */
.eir-profile__lead {
	margin: 14px 0 0;
	line-height: 1.7;
	color: var(--wp--preset--color--text-light);
}

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

.eir-meta-list li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 22px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	color: var(--wp--preset--color--text);
}

.eir-meta-list li::before {
	content: '';
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 8px;
	height: 8px;
	background-color: var(--wp--preset--color--primary);
	border-radius: 50%;
}

/* --- Archiv- und Suchergebnis-Karten ------------------------------------ */
.eir-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-bottom: 24px;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	transition: all var(--wp--custom--transition--base);
}

.eir-post-card:hover,
.eir-post-card:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--custom--shadow--card-hover);
	transform: translateY(-4px);
}

.eir-post-card .wp-block-post-featured-image img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	border-radius: 0;
}

/*
 * Die Karten in archive/index/search sind flache Gruppen: Datum, Titel und
 * Auszug liegen direkt in .eir-post-card. Der Innenabstand sitzt deshalb an
 * den Kindern — nur das Beitragsbild bleibt randlos.
 */
.eir-post-card > :not(.wp-block-post-featured-image) {
	padding-inline: 24px;
}

.eir-post-card > .wp-block-post-featured-image {
	margin-bottom: 20px;
}

.eir-post-card .wp-block-post-title {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.3;
}

.eir-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}

.eir-post-card .wp-block-post-title a:hover,
.eir-post-card .wp-block-post-title a:focus {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.eir-post-card .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	color: var(--wp--preset--color--text-light);
}

/* --- Pagination ---------------------------------------------------------- */
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	gap: 8px;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	padding: 7px 12px;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: all var(--wp--custom--transition--fast);
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

/* --- Suchfeld ------------------------------------------------------------ */
.wp-block-search__input {
	padding: 11px 14px;
	background-color: var(--wp--preset--color--surface);
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--heading);
	transition: border-color var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast);
}

.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--primary);
	/* Fokusring als Transparenz — als Token nicht vorhanden. */
	box-shadow: 0 0 0 3px rgba(16, 155, 197, 0.1);
}

.wp-block-search__button {
	padding: 11px 22px;
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--surface);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--fast);
}

.wp-block-search__button:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/* ==========================================================================
   18. Hilfsklassen
   ========================================================================== */

/* Textfarben auf dunklem Grund */
.eir-on-dark {
	color: var(--wp--custom--on-dark--text);
}

.eir-on-dark h1,
.eir-on-dark h2,
.eir-on-dark h3,
.eir-on-dark h4,
.eir-on-dark h5,
.eir-on-dark h6 {
	color: var(--wp--preset--color--surface);
}

.eir-on-dark p {
	color: var(--wp--custom--on-dark--text);
}

.eir-on-dark a:not(.eir-btn):not(.wp-block-button__link) {
	color: var(--wp--preset--color--surface);
	text-decoration: underline;
}

/* Platzhaltergrafik (eir_placeholder) */
.eir-placeholder {
	display: block;
	width: 100%;
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--border);
}

.eir-placeholder svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Redaktionshinweis — nur für angemeldete Redakteur/innen sichtbar */
.eir-editor-hint {
	display: block;
	margin: var(--wp--preset--spacing--20) 0;
	padding: 16px 20px;
	background-color: var(--wp--preset--color--surface-alt);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	font-size: var(--wp--preset--font-size--compact);
	line-height: 1.6;
	color: var(--wp--preset--color--text-light);
}

.eir-editor-hint a {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.eir-on-dark .eir-editor-hint,
.wp-block-cover .eir-editor-hint {
	background-color: var(--wp--custom--on-dark--border-soft);
	border-color: var(--wp--custom--on-dark--border);
	color: var(--wp--custom--on-dark--text);
}

/* Nur für Screenreader */
.screen-reader-text,
.eir-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.screen-reader-text:focus,
.eir-sr-only:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/* ==========================================================================
   19. Responsive
   ========================================================================== */

/*
 * Menü-Umschaltpunkt: Overlay-Menü („Burger") schon ab 1200px statt erst ab
 * 600px, wie der Navigations-Block des Kerns es vorsieht.
 *
 * WARUM 1200px UND WARUM ER NICHT MEHR TRAGEND IST
 *
 * Die einzeilige Kopfzeile braucht mit den fünf deutschen Menüpunkten rund
 * 1108px (Marke 342,5 + 24 Abstand + Menü 625 + 24 Abstand + Schaltfläche
 * 92,4). Nutzbar sind bei 1200px Fensterbreite 1136px — es bleiben also rund
 * 28px Reserve, und darunter wird es zu eng. Deshalb steht der Wert hier.
 *
 * Anders als früher hängt die Fehlerfreiheit aber nicht mehr an diesem Wert:
 * Läge er falsch, entstünde durch Stufe 4 des Abschnitts 4.1 höchstens eine
 * zweizeilige Kopfzeile — nie wieder eine Überlappung. Ein Umschaltpunkt auf
 * Fensterbreite kann die Frage „passt das Menü?" ohnehin nicht beantworten,
 * weil die Kopfzeile ab 1200px nicht mehr mitwächst; er ist reine
 * Bequemlichkeit, keine Absicherung.
 *
 * Der Untertitel der Marke bleibt unterhalb 1200px absichtlich stehen: Neben
 * dem schmalen Burger-Symbol ist reichlich Platz, er wurde früher nur wegen
 * des damals überlaufenden Menüs ausgeblendet. Erst ab 781px tritt er zurück
 * (siehe unten), weil dort die Marke selbst die Zeile füllt.
 *
 * Die Selektoren sind bewusst mit .eir-header vorangestellt: Damit liegt ihre
 * Spezifität über den Kernregeln und der Umschaltpunkt gilt nur hier, nicht
 * für andere Navigations-Blöcke der Seite.
 */
@media (max-width: 1200px) {

	.eir-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.eir-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.eir-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}
}

@media (max-width: 1024px) {

	.eir-hero__content {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}

	.eir-hero.is-height-full {
		min-height: 0;
	}

	.eir-hero__decor {
		width: 340px;
	}

	.eir-focus-card {
		max-width: 520px;
	}

	.wp-block-columns.is-style-eir-map-layout {
		grid-template-columns: 1fr 300px;
		gap: var(--wp--preset--spacing--40);
	}

	.eir-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.eir-result-box {
		padding: 32px;
		gap: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 781px) {

	/*
	 * Nur der waagerechte Abstand wird kleiner. Ein row-gap würde die
	 * zweite Zeile aus Stufe 4 (Abschnitt 4.1) ohne Grund abrücken.
	 */
	.eir-header__inner {
		column-gap: var(--wp--preset--spacing--20);
	}

	.eir-brand__logo {
		max-height: 48px;
	}

	/* Auf schmalen Geräten ist die Zeile noch knapper — siehe Abschnitt 4.1. */
	.eir-header .eir-brand__logo {
		max-width: 110px;
	}

	.eir-brand__title {
		font-size: var(--wp--preset--font-size--medium);
	}

	/*
	 * Auf Mobilgeräten füllt schon der Projektname die Zeile — der Untertitel
	 * würde dort nur noch als Ellipse erscheinen und tritt deshalb zurück.
	 * Eingegrenzt auf .eir-header: Im Fussbereich steht dieselbe Marke in
	 * einer eigenen Spalte und behält ihren Untertitel.
	 */
	.eir-header .eir-brand__sub {
		display: none;
	}

	/*
	 * Die Kontakt-Schaltfläche tritt auf dem Telefon zurück — genau wie in der
	 * Vorlage (dort .nav-cta ab 768px). Ohne sie bleibt die Kopfzeile auf den
	 * üblichen Telefonbreiten einzeilig und 80px hoch; mit ihr bräuchte sie ab
	 * etwa 444px abwärts die zweite Zeile aus Stufe 4. Der Kontaktbereich
	 * bleibt erreichbar: über die Seite selbst und über den Fussbereich.
	 */
	.eir-header .eir-header__cta {
		display: none;
	}

	.eir-hero__content {
		padding-block: var(--wp--preset--spacing--60);
		gap: var(--wp--preset--spacing--40);
	}

	.eir-hero__decor {
		display: none;
	}

	.eir-hero-stats {
		gap: 20px;
		margin-top: 32px;
	}

	.eir-focus-card {
		max-width: none;
		padding: 24px;
	}

	.eir-grid,
	.eir-grid.eir-grid--2,
	.eir-grid.eir-grid--3,
	.eir-grid.eir-grid--4 {
		grid-template-columns: 1fr;
	}

	.wp-block-columns.is-style-eir-map-layout {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}

	.eir-image-badge__badge,
	.eir-image-badge__badge.is-pos-bottom-right {
		position: static;
		display: inline-block;
		margin-top: 16px;
	}

	.eir-result-box {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
		padding: 28px 24px;
	}

	.eir-result-box__badges {
		flex-direction: row;
		flex-wrap: wrap;
		min-width: 0;
	}

	.eir-book {
		width: 220px;
		height: 300px;
		padding: 28px 20px;
	}

	.eir-form-card,
	.wp-block-group.is-style-eir-form-card {
		padding: 24px;
	}

	.wp-block-group.is-style-eir-panel {
		padding: 24px;
	}

	.eir-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}

	.eir-footer__bottom {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}

	.eir-back-top {
		right: 16px;
		bottom: 16px;
	}
}

/* ==========================================================================
   20. Reduzierte Bewegung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	/* !important nötig, um Core- und Theme-Übergänge zuverlässig zu stoppen. */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}

	.eir-btn:hover,
	.eir-btn:focus,
	.eir-feature-card:hover,
	.eir-team-card:hover,
	.eir-team-card:focus-within,
	.eir-event-card:hover,
	.eir-event-card:focus-within,
	.eir-post-card:hover,
	.eir-post-card:focus-within,
	.eir-back-top,
	.eir-back-top:hover,
	.eir-back-top:focus,
	.wp-block-button.is-style-eir-btn-light .wp-block-button__link:hover,
	.wp-block-button.is-style-eir-btn-light .wp-block-button__link:focus {
		transform: none !important;
	}

	.eir-event-card:hover .eir-event-card__photo img {
		transform: none !important;
	}

	.eir-place:hover,
	.eir-place:focus-within {
		padding-left: 0 !important;
	}
}