/*
 * ESO – ergänzende Stile.
 *
 * Enthält nur, was sich in theme.json nicht abbilden lässt: Logo, Navigation,
 * Kartensignet, Auszeichnungslinien, Schlagwortlisten, Partnerleiste.
 * Alle Farben laufen über die Paletten-Variablen aus theme.json.
 */

/* ---------- Seitenränder ---------- */
/* Eine einzige Berechnung für Kopfbereich, alle Vollflächen-Abschnitte und
   den Fußbereich: der Inhalt liegt an einem festen Mindestrand, wird aber ab
   --eso-max zentriert. Dadurch stehen Logo, Überschrift und Fußzeile bei
   jeder Fensterbreite exakt auf derselben Kante – vorher war die Kopfleiste
   randlos und der Hero auf 1240 px zentriert, was auf breiten Bildschirmen
   sichtbar auseinanderlief.
   Das !important überschreibt die Inline-Abstände aus dem Block-Markup;
   die bleiben dort stehen, damit der Site-Editor die Struktur korrekt
   anzeigt. */
:root {
	/* 1180 px ist der Satzspiegel von ezs-online.de: dort steht der Inhalt bei
	   1470 px Fensterbreite auf 146 px Rand. Damit stehen ESO und EZS auf
	   derselben Kante. Vorher lief der Inhalt bis 1660 px und wirkte auf
	   breiten Bildschirmen deutlich randloser als die EZS-Seite. */
	--eso-max: 1180px;
	--eso-gutter: 2.5rem;
}

@media (max-width: 1400px) {
	:root {
		--eso-gutter: 1.75rem;
	}
}

@media (max-width: 781px) {
	:root {
		--eso-gutter: 1.25rem;
	}
}

.eso-masthead,
.eso-hero,
.eso-grid,
.eso-about,
.eso-tri,
.eso-partners,
.eso-footer,
.eso-content {
	padding-inline: max(var(--eso-gutter), calc((100% - var(--eso-max)) / 2)) !important;
}

/* ---------- Grundabstände im Fließtext ---------- */
/* theme.json setzt blockGap global auf 0, damit die Vollflächen-Abschnitte
   bündig aufeinandersitzen. Im Inhaltsbereich wird der Abstand hier
   wiederhergestellt. */
.wp-block-post-content > * + *,
.eso-content > * + *,
.eso-rail-content .wp-block-post-content > * + * {
	margin-top: 1.15rem;
}

.eso-content ul,
.eso-content ol,
.wp-block-post-content ul,
.wp-block-post-content ol {
	padding-left: 1.25rem;
}

.eso-content li + li,
.wp-block-post-content li + li {
	margin-top: .35rem;
}

/* ---------- Sichtbarer Tastaturfokus ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- Kopfbereich ---------- */
/* Drei Spalten statt space-between: die äußeren Spalten sind gleich breit
   (1fr), deshalb sitzt die Navigation in der Mitte des Fensters und nicht
   bloß mittig im Rest, der nach Logo und Sprachumschalter übrig bleibt.
   Das Logo ist ein dreizeiliger Block im Verhältnis 2:1 und steht bei 84 px –
   darunter fallen die Versalien der Wortmarke unter 9 px. */
.eso-masthead {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	/* Etwas enger als früher: der Kopfbereich hat im Satzspiegel von 1180 px
	   weniger Platz als vorher bei 1660 px, und Logo, Navigation und
	   Sprachumschalter sollen in einer Zeile bleiben. */
	column-gap: 1.25rem;
	row-gap: 1.25rem;
}

.eso-masthead > .eso-logo {
	justify-self: start;
}

.eso-nav-wrap {
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.eso-masthead > .eso-lang {
	justify-self: end;
}

/* ---------- Sprachumschalter ---------- */
/* <details> statt Hover-Menü: nativ per Tastatur bedienbar, ohne Skript. */
.eso-lang {
	position: relative;
	flex: none;
}

.eso-lang > summary {
	list-style: none;
	cursor: pointer;
	font-size: .8125rem;
	letter-spacing: .08em;
	color: var(--wp--preset--color--ink-muted);
	border: 1px solid var(--wp--preset--color--border);
	padding: .3rem .6rem;
	line-height: 1.2;
}

.eso-lang > summary::-webkit-details-marker {
	display: none;
}

.eso-lang > summary::after {
	content: "";
	display: inline-block;
	margin-left: .4rem;
	width: .32rem;
	height: .32rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-1px) rotate(45deg);
}

.eso-lang[open] > summary,
.eso-lang > summary:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--steel);
}

.eso-lang > ul {
	position: absolute;
	top: calc(100% + .3rem);
	right: 0;
	z-index: 30;
	min-width: 9rem;
	margin: 0;
	padding: .35rem 0;
	list-style: none;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-top: 2px solid var(--wp--preset--color--accent);
	box-shadow: 0 12px 28px rgba(20, 40, 70, .09);
}

.eso-lang > ul a {
	display: block;
	padding: .35rem 1rem;
	font-size: .9rem;
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
}

.eso-lang > ul a:hover {
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--accent);
}

/* ---------- Logo ---------- */
/* assets/img/logo.svg ist eine Nachzeichnung des Originallogos: dieselbe
   Zeichnung, nur vom blauen Grund gelöst. Die Kartenlinien liegen wie im
   Original auf 66 % Deckung, Rahmen, ESO und Schriftzug auf 100 %.
   Weil die Datei inline eingebunden wird, färbt currentColor die gesamte
   Zeichnung – ein Wechsel der Akzentfarbe zieht das Logo mit.
   Die dreizeilige Wortmarke braucht Höhe: unter 80 px fallen die Versalien
   unter 9 px und werden unleserlich. */
.eso-logo {
	display: block;
	line-height: 0;
	text-decoration: none;
	color: var(--wp--preset--color--accent);
}

.eso-logo svg {
	height: var(--eso-logo-height, 76px);
	width: auto;
	display: block;
	/* Ohne dies greift die Grundregel img,svg{max-width:100%} und staucht das
	   Logo, sobald die Spalte schmaler wird als seine natürliche Breite –
	   die Höhe bliebe fest, die Breite würde beschnitten. */
	max-width: none;
}

.eso-logo:hover {
	opacity: .82;
}

/* Negativfassung für dunkle Flächen */
.eso-logo--invers {
	color: #fff;
}

/* ---------- Navigation ---------- */
.eso-nav-wrap .wp-block-navigation {
	font-size: 1.0625rem;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 1.45rem;
	row-gap: .25rem;
	align-items: center;
}

.eso-nav-wrap .wp-block-navigation > .wp-block-navigation-item {
	align-self: stretch;
}

/* Die Rubriknamen sind lang („Sprachkritik Gesellschaftskritisch"). Statt sie
   zu kürzen, dürfen sie innerhalb einer begrenzten Breite umbrechen – so
   stehen sie zweizeilig nebeneinander, wie schon auf der bisherigen Seite,
   und die Zeile bleibt bei 1180 px Inhaltsbreite umbruchfrei. */
.eso-nav-wrap .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-block: .3rem;
	white-space: nowrap;
	font-size: 1.0625rem;
}

.eso-nav-wrap .wp-block-navigation-item__content {
	padding-block: .45rem;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.eso-nav-wrap .wp-block-navigation-item__content:hover,
.eso-nav-wrap .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Untermenüs */
.eso-nav-wrap .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-top: 2px solid var(--wp--preset--color--accent);
	border-radius: 0;
	padding-block: .5rem;
	width: 15rem;
	min-width: 0;
	max-width: calc(100vw - 2.5rem);
	box-shadow: 0 12px 28px rgba(20, 40, 70, .09);
}

.eso-nav-wrap .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .42rem 1.25rem;
	border-bottom: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: .95rem;
}

/* Lange Untermenüpunkte dürfen innerhalb der festen Breite umbrechen,
   statt das Menü breit zu ziehen. */
.eso-nav-wrap .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	white-space: normal;
	line-height: 1.35;
}

/* Untermenüs in der rechten Hälfte nach innen klappen, damit sie nicht über
   den Fensterrand hinauslaufen (sonst entsteht ein horizontaler Scrollbalken). */
.eso-nav-wrap .wp-block-navigation > .wp-block-navigation-item:nth-last-child(-n+4) .wp-block-navigation__submenu-container {
	left: auto;
	right: 0;
}

.eso-nav-wrap .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--accent);
}

/* ---------- Kapitälchen-Zeile ---------- */
.eso-eyebrow {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
	margin: 0 0 .9rem;
}

.eso-eyebrow--ink {
	color: var(--wp--preset--color--ink-light);
}

.eso-eyebrow--onblue {
	color: rgba(255, 255, 255, .72);
}

/* ---------- Weiterführender Link ---------- */
.eso-more-wrap {
	margin-top: 0;
}

.eso-more {
	display: inline-block;
	font-weight: 600;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-bottom: .3rem;
	text-decoration: none;
}

.eso-more:hover {
	text-decoration: none;
	border-bottom-color: var(--wp--preset--color--accent);
}

.eso-arrow {
	display: inline-block;
	transition: transform .16s ease;
}

.eso-more:hover .eso-arrow {
	transform: translateX(4px);
}

/* ---------- Hero ---------- */
/* Links steht der gesamte Text linksbündig untereinander, rechts das
   Handbuch als gerahmte Zelle – bewusst in derselben Formsprache wie die
   Rubriken darunter und ohne senkrechte Trennlinie, damit daraus keine
   Nebenspalte im Stil anderer Seiten wird. */
.eso-hero__cols {
	align-items: flex-start;
	margin-bottom: 0;
}

.eso-hero__title {
	/* Die Überschrift soll auf zwei Zeilen laufen: das Zeilenmaß gibt die
	   Umbruchstelle vor, text-wrap sorgt für zwei etwa gleich lange Zeilen. */
	font-size: clamp(2.05rem, 1.35rem + 2.1vw, 2.85rem);
	max-width: 29ch;
	text-wrap: balance;
	margin: 0 0 1.2rem;
}

.eso-hero__lede {
	font-size: 1.1rem;
	line-height: 1.62;
	margin: 0 0 1.7rem;
	max-width: 40rem;
}

/* ---------- Publikationszelle ---------- */
.eso-pub {
	border: 1px solid var(--wp--preset--color--border);
	border-top: 2px solid var(--wp--preset--color--accent);
	background: #fbfcfe;
	padding: 1.6rem 1.5rem;
}

.eso-pub__title {
	font-size: 1.32rem;
	line-height: 1.24;
	margin: 0 0 .6rem;
}

.eso-pub__text {
	font-size: .97rem;
	line-height: 1.58;
	margin: 0 0 1.15rem;
}

/* ---------- Zugänge als Zellenraster ---------- */
.eso-grid__hd {
	border-top: 2px solid var(--wp--preset--color--accent);
	padding-top: .9rem;
}

.eso-grid__hd .eso-eyebrow {
	margin-bottom: 0;
}

/* Das Raster kommt aus der Datenbank und weiß nicht, wie viele Rubriken es
   gibt – auto-fit legt deshalb so viele gleich breite Spalten an, wie bei
   mindestens 18 rem hineinpassen. Drei Rubriken ergeben drei Spalten, eine
   vierte fügt sich von selbst ein. */
.eso-grid__b {
	margin-top: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	border-left: 1px solid var(--wp--preset--color--border);
}

.eso-cell {
	padding: 2rem 1.75rem 1.85rem;
	border-right: 1px solid var(--wp--preset--color--border);
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-direction: column;
}

.eso-hinweis {
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--accent-light);
	border-left: 2px solid var(--wp--preset--color--accent);
	font-size: .95rem;
	color: var(--wp--preset--color--ink-muted);
}

.eso-cell__title {
	font-size: 1.12rem;
	line-height: 1.28;
	margin: 0 0 .6rem;
}

.eso-cell__text {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 1.5rem;
}

.eso-cell__more {
	margin-top: auto;
}

/* ---------- Kategorienliste ---------- */
/* Zwei gleich breite Spalten statt frei umbrechender Pillen: dadurch fluchten
   die Ränder und die Liste wirkt geordnet. Innenfläche, Schriftgrad und
   Zeilenabstand sind bewusst großzügig – eng gesetzte Pillen wirkten
   gequetscht. */
.eso-taglist {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .55rem;
}

.eso-taglist li {
	margin: 0;
	display: flex;
}

.eso-taglist a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	font-size: .875rem;
	line-height: 1.3;
	padding: .5rem .85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--ink-muted);
	background: var(--wp--preset--color--surface);
	text-decoration: none;
	transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}

.eso-taglist a:hover {
	border-color: var(--wp--preset--color--steel);
	color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-light);
}

/* Sehr schmale Zellen: lieber einspaltig als gequetscht. */
@media (max-width: 1150px) {
	.eso-taglist {
		grid-template-columns: 1fr;
	}

	.eso-taglist a {
		justify-content: flex-start;
		text-align: left;
		padding-left: 1.1rem;
	}
}

/* ---------- Über das Projekt ---------- */
/* Oben Überschrift und Einstiegssatz untereinander, darunter durch eine
   Haarlinie abgesetzt der Fließtext.
   Der Fließtext liegt bewusst in einem Raster und nicht im mehrspaltigen
   Textfluss (columns): dort verteilt der Browser die Absätze nach Höhe, was
   je nach Fensterbreite zwei Absätze in die eine und einen in die andere
   Spalte legt – die Spalten begannen dadurch zwar oben, wirkten aber
   ungleich gefüllt. Im Raster steht ein Absatz je Spalte, alle auf gleicher
   Oberkante. */
.eso-about__top {
	margin-bottom: 2.25rem;
	padding-bottom: 2.25rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.eso-about__title {
	font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.1rem);
	max-width: 24ch;
	margin-bottom: 1.1rem;
}

.eso-about__lead {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.2rem, 1.02rem + .65vw, 1.5rem);
	line-height: 1.4;
	letter-spacing: -.008em;
	color: var(--wp--preset--color--ink);
	margin: 0;
	/* Der Satz soll auf breiten Bildschirmen in einer Zeile stehen. Er darf
	   dafür die volle Breite nutzen; erst wenn der Platz wirklich nicht reicht
	   (schmale Fenster), bricht er um. */
	max-width: none;
	text-wrap: balance;
}

@media (max-width: 1100px) {
	.eso-about__lead {
		text-wrap: pretty;
	}
}

.eso-about__body {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem 3.25rem;
	align-items: start;
}

.eso-about__body > p {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
}

.eso-about__more {
	margin-top: 2rem;
}

/* Gestaffelt statt automatisch: bei drei Spalten unterhalb von 1250 px
   fielen die Zeilen auf 37 Zeichen, und bei zwei automatisch gesetzten
   Spalten rutschte der dritte Absatz allein in eine zweite Reihe. */
@media (max-width: 1250px) {
	.eso-about__body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 850px) {
	.eso-about__top {
		margin-bottom: 1.75rem;
		padding-bottom: 1.75rem;
	}

	.eso-about__body {
		grid-template-columns: 1fr;
		max-width: 40rem;
		gap: 1.15rem;
	}
}

/* ---------- Drei Spalten ---------- */
/* Eine durchgehende Akzentlinie über allen drei Spalten – wie bei den
   Zugängen darüber – statt drei einzelner Striche. Die Spalten sind
   Flex-Container, damit der Verweis unten andockt: so stehen die drei Links
   auf einer Höhe, egal wie lang der Text darüber ist. */
.eso-tri .wp-block-columns {
	border-top: 2px solid var(--wp--preset--color--accent);
	padding-top: 1.3rem;
	margin-bottom: 0;
}

.eso-card {
	display: flex;
	flex-direction: column;
}

.eso-card .eso-more-wrap {
	margin-top: auto;
	padding-top: 1.25rem;
}

.eso-card h3 {
	font-size: 1.2rem;
}

.eso-card .eso-more {
	font-size: .95rem;
}

/* ---------- Seitenleiste ---------- */
.eso-rail .wp-block-page-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .98rem;
}

.eso-rail .wp-block-page-list li {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.eso-rail .wp-block-page-list a {
	display: block;
	padding: .6rem 0;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.eso-rail .wp-block-page-list a:hover,
.eso-rail .wp-block-page-list .current-menu-item > a {
	color: var(--wp--preset--color--accent);
}

/* ---------- Partnerleiste ---------- */
/* Die Logos sind freigestellt und liegen ohne weißen Kasten auf der hellen
   Fläche. Fester Abstand zueinander, die Gruppe als Ganzes zentriert – so
   bleiben sie als Reihe zusammen, statt über die Breite auseinandergezogen
   zu werden. */
.eso-logorow {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.5rem 3.25rem;
}

.eso-logorow li {
	margin: 0;
}

.eso-logorow a {
	display: block;
	line-height: 0;
}

.eso-logorow img {
	display: block;
	height: var(--eso-partner-height, 72px);
	width: auto;
	max-width: 100%;
}

.eso-logorow a:hover {
	opacity: .75;
}

@media (max-width: 1000px) {
	.eso-logorow img {
		height: 64px;
	}
}

@media (max-width: 600px) {
	.eso-logorow {
		gap: 1.25rem 2rem;
	}

	.eso-logorow img {
		height: 52px;
	}
}

/* ---------- Beitragsliste ---------- */
.eso-postlist > li + li {
	margin-top: 2.25rem;
	padding-top: 2.25rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ---------- Kopfbereich: schmale Fensterbreiten ---------- */
/* Der Kopfbereich liegt jetzt im selben Satzspiegel wie der Inhalt
   (--eso-max). Oberhalb von rund 1260 px Fensterbreite ändert sich seine
   Breite deshalb nicht mehr – die frühere Staffelung bei 1500 und 1400 px
   hätte die Menüschrift ohne Not verkleinert und wurde entfernt. Ab 1280 px
   bekommt die Navigation eine eigene Zeile, dort ist wieder Platz.

   Ab hier also: Logo und Sprachumschalter oben, Navigation mittig darunter. */
@media (max-width: 1280px) {
	.eso-logo {
		--eso-logo-height: 68px;
	}

	.eso-nav-wrap .wp-block-navigation {
		column-gap: 1.35rem;
	}

	.eso-masthead {
		grid-template-columns: auto auto;
		grid-template-areas: "logo lang" "nav nav";
	}

	.eso-masthead > .eso-logo {
		grid-area: logo;
	}

	.eso-masthead > .eso-lang {
		grid-area: lang;
	}

	.eso-nav-wrap {
		grid-area: nav;
		justify-self: center;
	}
}

/* ---------- Schmale Viewports ---------- */
@media (max-width: 781px) {
	.eso-tri .wp-block-column + .wp-block-column {
		border-top: 1px solid var(--wp--preset--color--border);
		padding-top: 1.5rem;
	}

	.eso-grid__b {
		border-left: 0;
	}

	.eso-cell {
		border-left: 1px solid var(--wp--preset--color--border);
	}

	.eso-logo {
		--eso-logo-height: 70px;
	}

}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- Variante C: blaue Kopfzeile ---------- */
/* Der Kopfbereich liegt auf der Markenfarbe (header-blau). Logo, Navigation
   und Sprachumschalter stehen darauf in Weiß. Das nimmt der Seite direkt
   unter der Navigation die kühle, sterile Wirkung und greift zugleich das
   Blau des Logos auf. */
.eso-masthead.has-header-blau-background-color .eso-nav-wrap .wp-block-navigation-item__content {
	color: #fff;
}
.eso-masthead.has-header-blau-background-color .eso-nav-wrap .wp-block-navigation-item__content:hover,
.eso-masthead.has-header-blau-background-color .eso-nav-wrap .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: #fff;
	border-bottom-color: #fff;
}
/* Der Aufklapp-Pfeil neben „Einzelsprachlich"/„Europäisch" ist ein SVG-Icon.
   Zwei Dinge waren daran vorher falsch:
   1. WordPress rendert das Icon innerhalb des Links (<a class="…item__content">
      <span class="…__label">…</span><span class="…__submenu-icon">…</span></a>),
      nicht als direktes Kind des Listeneintrags. Der Kindkombinator „>" hat
      deshalb nie gegriffen – hier steht jetzt ein Nachfahren-Selektor.
   2. Der Pfeil ist eine offene Linie (M1.5 4 L6 8 L10.5 4), die der Kern über
      stroke einfärbt, nicht über fill. „fill" hätte ihn zum ausgefüllten
      Dreieck gemacht; maßgeblich ist stroke.
   Betrifft nur die oberste Ebene auf dem blauen Grund; im aufgeklappten,
   weißen Untermenü bleibt er dunkel (Regel weiter unten). */
.eso-masthead.has-header-blau-background-color .eso-nav-wrap .wp-block-navigation__submenu-icon,
.eso-masthead.has-header-blau-background-color .eso-nav-wrap .wp-block-navigation__submenu-icon svg,
.eso-masthead.has-header-blau-background-color .eso-nav-wrap .wp-block-navigation__submenu-icon svg path {
	color: #fff !important;
	stroke: #fff !important;
}

/* Untermenüs klappen auf hellem Grund auf – dort wieder dunkle Schrift, damit
   sie lesbar bleiben. */
.eso-masthead.has-header-blau-background-color .wp-block-navigation__submenu-container {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
}
.eso-masthead.has-header-blau-background-color .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}
.eso-masthead.has-header-blau-background-color .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon,
.eso-masthead.has-header-blau-background-color .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg,
.eso-masthead.has-header-blau-background-color .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg path {
	color: var(--wp--preset--color--ink) !important;
	stroke: var(--wp--preset--color--ink) !important;
}
.eso-masthead.has-header-blau-background-color .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
	border-bottom-color: transparent;
}

/* Sprachumschalter in Weiß */
.eso-masthead.has-header-blau-background-color .eso-lang > summary {
	color: #fff;
	border-color: rgba(255, 255, 255, .45);
}
.eso-masthead.has-header-blau-background-color .eso-lang[open] > summary,
.eso-masthead.has-header-blau-background-color .eso-lang > summary:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .7);
}
/* Das Sprachmenü selbst klappt auf hellem Grund auf. */
.eso-masthead.has-header-blau-background-color .eso-lang > ul {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
}
.eso-masthead.has-header-blau-background-color .eso-lang > ul a {
	color: var(--wp--preset--color--ink);
}
.eso-masthead.has-header-blau-background-color .eso-lang > ul a:hover {
	color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-light);
}

/* Mobiles Menü (Hamburger-Overlay) auf hellem Grund: dunkle Schrift. */
.eso-masthead.has-header-blau-background-color .wp-block-navigation__responsive-container.is-menu-open {
	background: #fff;
}
.eso-masthead.has-header-blau-background-color .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}
.eso-masthead.has-header-blau-background-color .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg,
.eso-masthead.has-header-blau-background-color .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg path {
	color: var(--wp--preset--color--ink) !important;
	stroke: var(--wp--preset--color--ink) !important;
}

/* ---------- Domänen-Kacheln auf der Rubrikseite ---------- */
/* Ausgabe des Shortcodes [eso_domaenen]: die Einträge einer Rubrik als
   schlichte, verlinkte Titel-Kacheln – ohne Beschreibungstext. Das Raster
   füllt sich automatisch, egal ob zwei oder fünf Domänen vorhanden sind. */
.eso-domaenen {
	margin: 2.5rem 0 0;
}

.eso-domaenen__head {
	padding-top: 0.9rem;
	border-top: 2px solid var(--wp--preset--color--accent);
	margin: 0 0 1.5rem;
}

.eso-domaenen__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
}

.eso-domcard {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	padding: 1.4rem 1.6rem;
	background: var(--wp--preset--color--surface);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.eso-domcard:hover {
	border-color: var(--wp--preset--color--accent-mid);
	box-shadow: 0 6px 20px rgba(20, 40, 70, .09);
	transform: translateY(-2px);
}

.eso-domcard__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: 1.22rem;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
}

.eso-domcard__arrow {
	font-size: 1.1rem;
	color: var(--wp--preset--color--accent);
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.eso-domaenen__grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
 * Ergänzungen eso-5
 * ========================================================================= */

/* ---------- Hero: Europa-Umriss als Wasserzeichen ---------- */
/* Der Umriss stammt aus der Logo-Zeichnung (assets/img/europe.svg) und wird
   über [eso_map] eingebunden – das Logo selbst bleibt unangetastet, die
   Fläche zitiert es nur. Sehr geringe Deckung, keine Interaktion, unter dem
   Text (die Spalten liegen darüber). */
.eso-hero {
	position: relative;
	overflow: hidden;
}

.eso-hero__bg {
	position: absolute;
	left: -7rem;
	bottom: -9rem;
	width: 48rem;
	max-width: 80%;
	color: var(--wp--preset--color--steel);
	opacity: .06;
	pointer-events: none;
	line-height: 0;
}

.eso-hero__bg svg {
	width: 100%;
	height: auto;
}

.eso-hero__cols {
	position: relative;
	z-index: 1;
}

/* ---------- Publikationszelle ---------- */
/* Reine Textzelle: Kapitälchen, Titel, Beschreibung, Link. Das Bandcover
   ist bewusst raus; die Grundmaße der Zelle stehen weiter oben bei
   .eso-pub. Die Bilddatei bleibt unter assets/img/heso-band.jpg liegen,
   falls das Cover später doch wieder gebraucht wird. */
.eso-pub {
	display: block;
}

/* ---------- Zugänge: Zellen als Einstiege lesbar machen ---------- */
/* Akzentlinie oben wie bei den Karten weiter unten, dazu ein ruhiger
   Hover-Zustand – so ist auf einen Blick klar, dass die Zellen irgendwohin
   führen. */
.eso-cell {
	border-top: 2px solid var(--wp--preset--color--accent);
	transition: background-color .15s ease;
}

.eso-cell:hover {
	background: #fbfcfe;
}

.eso-cell:hover .eso-more {
	border-bottom-color: var(--wp--preset--color--accent);
}

.eso-cell:hover .eso-arrow {
	transform: translateX(4px);
}

/* ---------- Aktuelles: neueste Beiträge ---------- */
.eso-neues__heading {
	font-size: clamp(1.5rem, 1.25rem + .9vw, 1.9rem);
}

.eso-neues__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 1.5rem;
}

.eso-neues__card {
	display: flex;
	flex-direction: column;
	padding: 1.6rem 1.6rem 1.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-top: 2px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	color: inherit;
	text-decoration: none;
	transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.eso-neues__card:hover {
	border-color: var(--wp--preset--color--accent-mid);
	border-top-color: var(--wp--preset--color--accent);
	box-shadow: 0 8px 24px rgba(20, 40, 70, .1);
	transform: translateY(-2px);
}

.eso-neues__meta {
	font-size: .8rem;
	letter-spacing: .04em;
	color: var(--wp--preset--color--ink-light);
	margin: 0 0 .7rem;
}

.eso-neues__sep {
	margin: 0 .45rem;
}

.eso-neues__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.28rem;
	line-height: 1.3;
	margin: 0 0 .65rem;
	color: var(--wp--preset--color--ink);
}

.eso-neues__card:hover .eso-neues__title {
	color: var(--wp--preset--color--accent);
}

.eso-neues__text {
	font-size: .95rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 1.3rem;
}

.eso-neues__more {
	margin-top: auto;
	font-weight: 600;
	font-size: .92rem;
	color: var(--wp--preset--color--accent);
}

.eso-neues__card:hover .eso-neues__more .eso-arrow {
	transform: translateX(4px);
}

/* ---------- Beitragsseite: Autor- und Datumszeile ---------- */
.eso-single__meta {
	gap: .5rem 1.5rem;
	margin-top: .9rem;
}

.eso-single__meta .eso-eyebrow {
	margin-bottom: 0;
}

/* ---------- Zitieren-Box ---------- */
/* Erscheint automatisch unter jedem Beitrag (inc/zitieren.php). Zurückhaltend
   gehalten: helle Fläche, Akzentlinie links, Vorschlag als markierbarer
   Text, der Kopieren-Knopf ist reine Zugabe. */
.eso-zitieren {
	margin-top: 3rem;
	padding: 1.5rem 1.75rem 1.4rem;
	background: var(--wp--preset--color--surface-2);
	border-left: 2px solid var(--wp--preset--color--accent);
}

.eso-zitieren__hd {
	margin-bottom: .8rem;
}

.eso-zitieren__text {
	font-size: .95rem;
	line-height: 1.65;
	color: var(--wp--preset--color--ink-muted);
	margin: 0;
	overflow-wrap: anywhere;
}

.eso-zitieren__copy {
	margin-top: 1.1rem;
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	padding: .45rem .9rem;
	cursor: pointer;
	transition: border-color .14s ease, background-color .14s ease;
}

.eso-zitieren__copy:hover {
	border-color: var(--wp--preset--color--steel);
	background: var(--wp--preset--color--accent-light);
}

/* =====================================================================
   1.5 – Startseite „Variante A", Veranstaltungen, Seitenkopf
   ---------------------------------------------------------------------
   Grundgedanke: ein Hero mit einer Aussage, ein einziger gefüllter Knopf
   pro Seite, sonst leise Textlinks. Zellen und Zeilen teilen sich eine
   Rahmenlogik (Haarlinien, Akzentlinie nur einmal am Kopf eines
   Abschnitts). Die Regeln stehen bewusst unten, damit sie die älteren
   Fassungen derselben Klassen überschreiben.
   ===================================================================== */

.eso-band,
.eso-termine {
	padding-inline: max(var(--eso-gutter), calc((100% - var(--eso-max)) / 2)) !important;
}

/* ---------- Knopf und leiser Link ---------- */
.eso-btn {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	padding: .8rem 1.35rem;
	border-radius: 3px;
	text-decoration: none;
	transition: background-color .15s ease;
}

.eso-btn:hover,
.eso-btn:focus-visible {
	background: var(--wp--preset--color--accent-mid);
	color: #fff;
}

.eso-more--quiet {
	border-bottom: 0;
	padding-bottom: 0;
	color: var(--wp--preset--color--accent);
}

.eso-more--quiet:hover {
	text-decoration: underline;
	text-underline-offset: .25em;
}

/* ---------- Hero ---------- */
.eso-hero__cols {
	align-items: center;
}

.eso-hero__title {
	font-size: clamp(2.3rem, 1.35rem + 2.7vw, 3.45rem);
	line-height: 1.08;
	letter-spacing: -.012em;
	max-width: 24ch;
	margin: .3rem 0 1.25rem;
}

.eso-hero__lede {
	font-size: 1.15rem;
	max-width: 34rem;
	margin-bottom: 1.9rem;
}

.eso-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.6rem;
	margin: 0;
}

.eso-hero__card {
	border-left: 2px solid var(--wp--preset--color--accent);
	padding: .2rem 0 .2rem 1.5rem;
	max-width: 24rem;
}

.eso-hero__card .eso-eyebrow {
	margin-bottom: .6rem;
}

.eso-hero__card-text {
	color: var(--wp--preset--color--ink-muted);
	font-size: 1.02rem;
	line-height: 1.6;
	margin: 0 0 1rem;
}

.eso-hero__card .eso-more-wrap {
	margin: 0;
}

/* ---------- Zugänge ---------- */
.eso-grid__hd {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 1rem 2.5rem;
	align-items: end;
	border-top: 2px solid var(--wp--preset--color--accent);
	padding-top: 1.2rem;
	margin-bottom: 1.4rem;
}

.eso-grid__title {
	font-size: clamp(1.55rem, 1.25rem + 1vw, 2rem);
	margin: 0;
}

.eso-grid__intro {
	font-size: 1rem;
	line-height: 1.55;
	margin: 0;
}

.eso-grid__b {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-left: 0;
}

.eso-cell {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.6rem 1.75rem 1.5rem 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	color: inherit;
	transition: background-color .15s ease;
}

/* Der Titel-Link wird über die ganze Zelle gestreckt – ohne Link-Hülle um
   Block-Elemente, die wpautop() zerlegen könnte. */
.eso-cell__title a {
	color: inherit;
	text-decoration: none;
}

.eso-cell__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.eso-cell__title a:focus-visible {
	outline: none;
}

.eso-cell:has(.eso-cell__title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.eso-cell + .eso-cell {
	padding-left: 1.75rem;
	border-left: 1px solid var(--wp--preset--color--border);
}

.eso-cell:hover {
	background: #fbfcfe;
}

.eso-cell__kicker {
	margin: 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-light);
}

.eso-cell__title {
	font-size: clamp(1.3rem, 1.1rem + .6vw, 1.55rem);
	line-height: 1.2;
	margin: .35rem 0 .7rem;
	transition: color .15s ease;
}

.eso-cell:hover .eso-cell__title {
	color: var(--wp--preset--color--accent);
}

.eso-cell__text {
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 1.2rem;
}

.eso-cell__more {
	margin: auto 0 0;
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	gap: .5rem;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	font-size: .92rem;
}

.eso-cell__label {
	opacity: 0;
	transition: opacity .15s ease;
}

.eso-cell:hover .eso-cell__label {
	opacity: 1;
}

.eso-cell__more .eso-arrow {
	font-size: 1.3rem;
	line-height: 1;
}

.eso-cell:hover .eso-arrow {
	transform: translateX(4px);
}

/* ---------- Handbuch-Band ---------- */
.eso-band__cols {
	align-items: center;
	margin-bottom: 0;
}

.eso-band__cover {
	flex: 0 0 200px;
}

.eso-cover {
	margin: 0;
}

.eso-cover img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba(20, 40, 70, .14);
}

.eso-band__title {
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.05rem);
	max-width: 22ch;
	margin: .3rem 0 .8rem;
}

.eso-band__text {
	font-size: 1.1rem;
	line-height: 1.6;
	max-width: 40rem;
	margin: 0 0 1.25rem;
}

/* ---------- Terminliste (Startseite, Übersicht, „Weitere Termine") ---------- */
.eso-termine__hd {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	padding-bottom: .9rem;
	gap: 1rem 2rem;
}

.eso-termine__hd .eso-eyebrow {
	margin-bottom: .2rem;
}

.eso-termine__title {
	font-size: clamp(1.55rem, 1.25rem + 1vw, 2rem);
	margin: 0;
}

.eso-termine__hd .eso-more-wrap {
	padding-bottom: .2rem;
}

.eso-ev-list {
	display: grid;
}

.eso-ev {
	position: relative;
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr) 2.5rem;
	gap: .5rem 2rem;
	align-items: start;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: inherit;
}

.eso-ev > p,
.eso-ev__body > p,
.eso-ev__body > h3 {
	margin: 0;
}

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

.eso-ev__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.eso-ev__title a:focus-visible {
	outline: none;
}

.eso-ev:has(.eso-ev__title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.eso-ev__date time {
	display: flex;
	flex-direction: column;
	line-height: 1;
	padding-top: .15rem;
}

.eso-ev__date time b {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 2.6rem;
	color: var(--wp--preset--color--accent);
	letter-spacing: -.02em;
}

.eso-ev__date time span {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-light);
	margin-top: .5rem;
}

.eso-ev--vergangen .eso-ev__date time b {
	color: var(--wp--preset--color--ink-light);
}

.eso-ev__body {
	display: block;
}

.eso-ev__kicker {
	display: block;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
	margin-bottom: .3rem;
}

.eso-ev--vergangen .eso-ev__kicker::before {
	content: "Vergangen · ";
	color: var(--wp--preset--color--ink-light);
}

.eso-ev__title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.25rem, 1.1rem + .5vw, 1.45rem);
	line-height: 1.22;
	color: var(--wp--preset--color--ink);
	transition: color .15s ease;
}

.eso-ev:hover .eso-ev__title {
	color: var(--wp--preset--color--accent);
}

.eso-ev__span {
	display: block;
	font-size: .92rem;
	color: var(--wp--preset--color--ink-light);
	margin-top: .3rem;
}

.eso-ev__text {
	display: block;
	color: var(--wp--preset--color--ink-muted);
	max-width: 44rem;
	margin-top: .45rem;
}

.eso-ev__arrow {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-size: 1.4rem;
	line-height: 1;
	justify-self: end;
	padding-top: .35rem;
}

.eso-ev:hover .eso-ev__arrow {
	transform: translateX(4px);
}

/* ---------- Übersichtsseite ---------- */
.eso-archiv {
	max-width: 60rem;
}

.eso-archiv__gruppe + .eso-archiv__gruppe {
	margin-top: 3.5rem;
}

.eso-archiv__h {
	margin: 0;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	padding-bottom: .8rem;
}

.eso-archiv__h .eso-eyebrow {
	margin: 0;
}

.eso-archiv__jahr {
	font-size: 1.05rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	color: var(--wp--preset--color--ink-light);
	margin: 1.8rem 0 .2rem;
}

.eso-archiv__leer {
	color: var(--wp--preset--color--ink-muted);
	padding: 1.25rem 0;
}

/* ---------- Seitenkopf auf Unterseiten ---------- */
/* Dieselbe Kopfzeile wie die Abschnitte der Startseite: Akzentlinie,
   Kapitälchen-Zeile, große Serifenüberschrift. Der Kopf darf breiter sein
   als der Fließtext darunter, damit die Überschrift nicht zu früh umbricht;
   beides steht linksbündig auf derselben Kante wie das Logo. */
.eso-page__head {
	max-width: 60rem;
	padding-top: 1.2rem;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.eso-page__head .eso-eyebrow {
	margin-bottom: .6rem;
}

.eso-page__head .eso-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.eso-page__head .eso-eyebrow a:hover {
	color: var(--wp--preset--color--accent);
}

.eso-page__title {
	font-size: clamp(2rem, 1.35rem + 2vw, 2.9rem);
	line-height: 1.1;
	letter-spacing: -.012em;
	max-width: 24ch;
	text-wrap: balance;
	margin: 0 auto;
}

.eso-page__lede {
	font-size: 1.15rem;
	line-height: 1.6;
	max-width: 40rem;
	margin: 1rem auto 0;
}

.eso-page__head .eso-single__meta {
	margin-top: .9rem;
}

.eso-page .eso-page__content {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}

.eso-page .eso-page__content > * {
	margin-left: 0;
}

.eso-page__content h2 {
	font-size: clamp(1.45rem, 1.2rem + .8vw, 1.8rem);
	margin-top: 2.4rem;
}

.eso-page__content h3 {
	font-size: 1.25rem;
	margin-top: 2rem;
}

.eso-page__content h2 + *,
.eso-page__content h3 + * {
	margin-top: .75rem;
}

.eso-page__content a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--rule);
	text-underline-offset: .2em;
}

.eso-page__content a:hover {
	text-decoration-color: var(--wp--preset--color--accent);
}

.eso-page__content blockquote {
	margin: 1.75rem 0;
	padding: 1.1rem 1.5rem;
	background: var(--wp--preset--color--surface-2);
	border-left: 2px solid var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	line-height: 1.5;
}

.eso-page__content hr {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	margin: 2.5rem 0;
}

.eso-page__content figure {
	margin: 1.75rem 0;
}

.eso-page__content figcaption {
	font-size: .875rem;
	color: var(--wp--preset--color--ink-light);
	margin-top: .5rem;
}

/* Seite mit Seitenleiste: der Kopf beginnt in der Inhaltsspalte. */
.eso-with-rail .eso-page__head {
	margin-top: 0;
}

/* ---------- Einzelne Veranstaltung ---------- */
.eso-event__cols {
	margin-bottom: 0;
	align-items: flex-start;
}

.eso-event__bild {
	margin: 0 0 1.75rem;
}

.eso-event__bild img {
	display: block;
	width: 100%;
	height: auto;
}

.eso-event__aside {
	position: sticky;
	top: 2rem;
}

.eso-event__meta {
	background: var(--wp--preset--color--surface-2);
	border-top: 2px solid var(--wp--preset--color--accent);
	padding: 1.5rem 1.6rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.eso-event__meta > p {
	margin: 0;
}

.eso-event__big time {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.eso-event__big time b {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 3.6rem;
	color: var(--wp--preset--color--accent);
	letter-spacing: -.02em;
}

.eso-event__big time span {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-light);
	margin-top: .55rem;
}

.eso-event__badge {
	align-self: flex-start;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-light);
	border: 1px solid var(--wp--preset--color--border);
	padding: .3rem .6rem;
	background: var(--wp--preset--color--surface);
}

.eso-event__dl {
	margin: 0;
	display: grid;
	gap: 0;
}

.eso-event__dl > div {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: 1rem;
	padding: .6rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: .97rem;
}

.eso-event__dl > div:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.eso-event__dl dt {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-light);
	padding-top: .2rem;
}

.eso-event__dl dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
}

.eso-event__btn .eso-btn {
	display: block;
	text-align: center;
}

.eso-event__back {
	font-size: .92rem;
}

.eso-event__weitere {
	margin-top: 3.5rem;
	max-width: 60rem;
	border-top: 2px solid var(--wp--preset--color--accent);
	padding-top: 1.2rem;
}

.eso-event__weitere .eso-eyebrow {
	margin-bottom: 0;
}

.eso-event__weitere .eso-ev-list {
	margin-top: .4rem;
}

/* ---------- Schmale Fenster ---------- */
@media (max-width: 1000px) {
	.eso-grid__b {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.eso-cell + .eso-cell {
		padding-left: 1.75rem;
	}

	.eso-cell:nth-child(2n+1) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 781px) {
	.eso-hero__side {
		margin-top: 1.75rem;
	}

	.eso-hero__card {
		max-width: none;
	}

	.eso-grid__hd {
		grid-template-columns: 1fr;
		gap: .5rem;
	}

	.eso-grid__b {
		grid-template-columns: 1fr;
	}

	.eso-cell,
	.eso-cell + .eso-cell {
		padding-left: 0;
		padding-right: 0;
		border-left: 0;
	}

	.eso-band__cover {
		max-width: 160px;
		margin-bottom: 1.25rem;
	}

	.eso-ev {
		grid-template-columns: 4.5rem minmax(0, 1fr) 2rem;
		gap: .5rem 1.1rem;
	}

	.eso-ev__date time b {
		font-size: 2rem;
	}

	.eso-event__aside {
		position: static;
	}
}

/* In der Gruppe „Vergangen" der Übersicht wäre das Präfix doppelt. */
.eso-archiv__gruppe--vergangen .eso-ev__kicker::before {
	content: none;
}

/* Sicherheitsnetz: die Spalten von Hero, Band und Einzelveranstaltung
   stapeln auf schmalen Fenstern auch dann, wenn die Core-Regel für
   Spaltenblöcke nicht greift. */
@media (max-width: 781px) {
	.eso-hero__cols,
	.eso-band__cols,
	.eso-event__cols {
		flex-direction: column;
	}

	.eso-hero__cols > .wp-block-column,
	.eso-band__cols > .wp-block-column,
	.eso-event__cols > .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}
}