/*
 * Nur was theme.json nicht ausdrücken kann.
 * Alle Werte stammen 1:1 aus der Figma-Datei (Rahmen 1920, Inhalt 1680).
 */

:root {
	--roth--schliessen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 41'%3E%3Cpath d='M20.5 17.0837L3.41626 0L0 3.41626L17.0837 20.5L0 37.5837L3.41626 41L20.5 23.9163L37.5837 41L41 37.5837L23.9163 20.5L41 3.41626L37.5837 0L20.5 17.0837Z' fill='%23000'/%3E%3C/svg%3E");
	--roth--pfeil-gross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 23'%3E%3Cpath d='M13.4434 12.7776L2.68829 23L0 20.4448L9.41092 11.5L0 2.55515L2.68829 0L13.4434 10.2224C13.7998 10.5613 14 11.0208 14 11.5C14 11.9792 13.7998 12.4387 13.4434 12.7776Z' fill='%23000'/%3E%3C/svg%3E");
	--roth--pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 11' fill='none'%3E%3Cpath d='M1 1l4 4.5L1 10' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---- Pfeil-Link (Block-Stil auf core/button und core/read-more) ---- */

/* Sonst umgibt die Huelle den 16px hohen Link mit einer 28px hohen Zeile. */
.wp-block-button.is-style-pfeil {
	line-height: 0;
}

.wp-block-button.is-style-pfeil .wp-block-button__link,
a.wp-block-read-more.is-style-pfeil {
	background: none;
	border: 0;
	padding: 0;
	color: currentColor;
	font-size: var(--wp--preset--font-size--button);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.23;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 11px;
}

.wp-block-button.is-style-pfeil .wp-block-button__link:hover,
a.wp-block-read-more.is-style-pfeil:hover {
	color: var(--wp--preset--color--rot-hover);
}

/* Farbwechsel allein ist kein ausreichender Fokus-Indikator. */
.wp-block-button.is-style-pfeil .wp-block-button__link:focus-visible,
a.wp-block-read-more.is-style-pfeil:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.wp-block-button.is-style-pfeil .wp-block-button__link::before,
a.wp-block-read-more.is-style-pfeil::before {
	content: "";
	width: 6px;
	height: 11px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: var(--roth--pfeil) no-repeat center / contain;
	mask: var(--roth--pfeil) no-repeat center / contain;
}

/* Nicht eingefärbte Pfeil-Links sind rot; auf farbigem Grund erben sie. */
.wp-block-button.is-style-pfeil .wp-block-button__link:not([class*="has-"][class*="-color"]),
a.wp-block-read-more.is-style-pfeil:not([class*="has-"][class*="-color"]) {
	color: var(--wp--preset--color--rot);
}

/* ---- Karten-Raster ----
 * Figma zeichnet fuenf Karten a 321px bei 1680px Inhalt. Fuenf Spalten
 * bleiben bis zum Tablet stehen, damit Notebooks mit 1280 bis 1600px die
 * Reihe nicht umbrechen. Damit die Karte dabei nicht gedraengt wirkt, sind
 * Schrift und Innenabstaende in cqi angegeben, also in Prozent der
 * Kartenbreite: bei 321px ergeben sie exakt die Figma-Werte, darunter
 * verkleinert sich die Karte als Ganzes statt nur enger zu werden.
 */

@media (max-width: 1023.98px) {
	.roth-karten .wp-block-post-template.is-layout-grid,
	.roth-karten .wp-block-term-template.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 899.98px) {
	.roth-karten .wp-block-post-template.is-layout-grid,
	.roth-karten .wp-block-term-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599.98px) {
	.roth-karten .wp-block-post-template.is-layout-grid,
	.roth-karten .wp-block-term-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Karten sind Spalten. Der Pfeil-Link folgt dem Text, wie im Entwurf –
   dort stehen die Links der Reihe bewusst nicht auf einer Linie. */
.roth-karten .wp-block-post-template > li,
.roth-karten .wp-block-term-template > li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	container-type: inline-size;
}

/* In einem Flex-Container fallen Aussenabstaende nicht zusammen. Ohne das
   hier addiert sich der untere Standardabstand jedes Elements auf den oberen
   des naechsten, und jede Karte waechst um rund 20px je Zeile. */
.roth-karten .wp-block-post-template > li > *,
.roth-karten .wp-block-term-template > li > * {
	margin-bottom: 0;
}

/* Schriftgroessen der Karte: Maximum ist immer der Figma-Wert. */
.roth-karten p.roth-bildlegende.roth-bildlegende {
	font-size: clamp(8px, 3.43cqi, 11px) !important;
}

.roth-karten .wp-block-post-title,
.roth-karten .wp-block-term-name {
	font-size: clamp(12px, 6.23cqi, 20px);
}

.roth-karten .wp-block-post-excerpt,
.roth-karten .wp-block-term-description {
	font-size: clamp(11px, 5.3cqi, 17px);
}

.roth-karten a.wp-block-read-more.is-style-pfeil {
	font-size: clamp(10px, 4.05cqi, 13px);
}

/* Der Pfeil selbst skaliert mit der Schrift mit. */
.roth-karten a.wp-block-read-more.is-style-pfeil::before {
	width: 0.46em;
	height: 0.85em;
}

.roth-karten a.wp-block-read-more.is-style-pfeil {
	gap: 0.85em;
}

/* Innenabstaende der Sammlungs-Karte: 7 / 45 / 20 / 20 bei 321px */
.roth-karten .roth-bildlegende {
	margin-top: clamp(4px, 2.18cqi, 7px);
}

.roth-karten .wp-block-post-title,
.roth-karten .wp-block-term-name {
	margin-top: clamp(24px, 14.02cqi, 45px);
}

.roth-karten .wp-block-post-excerpt,
.roth-karten .wp-block-term-description,
.roth-karten .roth-entdecken,
.roth-karten .roth-zusatzlink,
.roth-karten .wp-block-post-template > li > .wp-block-read-more {
	margin-top: clamp(12px, 6.23cqi, 20px);
}

/* Veranstaltungs-Karte: 32 / 11 / 21 / 21 bei 321px */
.roth-karten .roth-veranstaltung-bild + .wp-block-post-title {
	margin-top: clamp(19px, 9.97cqi, 32px);
}

.roth-karten .roth-veranstaltung-bild ~ .wp-block-post-excerpt {
	margin-top: clamp(7px, 3.43cqi, 11px);
}

.roth-karten .wp-block-post-excerpt + .wp-block-group,
.roth-karten .wp-block-group + .wp-block-read-more {
	margin-top: clamp(13px, 6.54cqi, 21px);
}

.roth-karten .wp-block-post-excerpt + .wp-block-group,
.roth-karten .wp-block-post-excerpt + .wp-block-group p {
	font-size: clamp(10px, 4.67cqi, 15px) !important;
}

.roth-karten .wp-block-post-excerpt + .wp-block-group {
	gap: clamp(14px, 13.4cqi, 43px);
}

/* Bildlegende: in Figma zwei Zeilen hoch, auch wenn der Text kuerzer ist –
   so beginnen die Titel aller Karten auf derselben Hoehe. */
.roth-bildlegende {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: 2.47em;
}

/* ---- Sammlungskategorien (Uebersichtsseite) ---- */

/* Das Bild kommt aus einem ACF-Feld, nicht aus dem Beitragsbild. */
.roth-kategoriebild,
.roth-kategoriebild img {
	width: 100%;
}

.roth-kategoriebild img {
	aspect-ratio: 0.8403;
	object-fit: cover;
}

/* Der Titel verlinkt auf das Kategorie-Archiv und bleibt schwarz. */
.roth-karten .wp-block-term-name a {
	color: var(--wp--preset--color--schwarz);
}

.roth-karten .wp-block-term-name a:hover {
	color: var(--wp--preset--color--rot);
}

/* Bildlegende hier vier Zeilen hoch statt zwei. */
.roth-bildlegende--lang {
	-webkit-line-clamp: 4;
	height: 4.94em;
}

/* Der Zusatzlink ist optional; ohne Text faellt der ganze Block weg. */
.roth-zusatzlink .wp-block-button__link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--rot);
	font-size: clamp(12px, 6.23cqi, 20px);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: underline;
}

.roth-zusatzlink .wp-block-button__link:hover {
	color: var(--wp--preset--color--rot-hover);
}

/* Ist das Feld leer, laesst WordPress den Button ganz weg und es bleibt nur
   die leere Huelle stehen. Die faellt hier mit weg. */
.roth-karten .roth-zusatzlink:not(:has(.wp-block-button)),
.roth-karten .roth-zusatzlink:has(.wp-block-button__link:empty) {
	display: none;
}

/* ---- Kategorieseite: ein Abschnitt je Sammlungs-Eintrag ---- */

/* Figma: Textspalte 970, Bildspalte 402, Abstand 166, zusammen 1538 –
   der Abschnitt nutzt die Inhaltsbreite also bewusst nicht ganz aus. */
.roth-sammlung {
	max-width: 1538px;
	/* Der Abschnitt beginnt am linken Rand der Inhaltsspalte, nicht mittig
	   und nicht am Seitenrand: liegt er direkt in einer Gruppe, ist sein
	   Bezug deren Innenkante, und er rutschte auf breiten Schirmen unter
	   den Titel hinaus. Das !important ist noetig, weil Cores
	   Constrained-Layout die Zentrierung selbst mit !important setzt. */
	margin-left: max(0px, (100% - 1680px) / 2) !important;
	margin-right: auto !important;
}

.roth-sammlung__bild img {
	width: 100%;
}

/* Der Abschnittstitel ist rot; die Regel fuer core/post-title in theme.json
   faerbt Links sonst schwarz. */
.roth-sammlung__titel,
.roth-sammlung__titel a {
	color: var(--wp--preset--color--rot);
}

.roth-sammlung__titel a:hover {
	color: var(--wp--preset--color--rot-hover);
}

/* Beide Links sind 20px fett; der eine schwarz und versal, der andere rot
   und unterstrichen. Buttons, damit das Ziel aus einem Feld kommen kann. */
.roth-galerie-link .wp-block-button__link,
.roth-mehr .wp-block-button__link,
.roth-sammlung .roth-zusatzlink .wp-block-button__link {
	background: none;
	border: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--fliesstext);
	font-weight: 700;
	line-height: 1.2;
}

.roth-galerie-link .wp-block-button__link {
	color: var(--wp--preset--color--schwarz);
	text-transform: uppercase;
}

.roth-galerie-link .wp-block-button__link:hover {
	color: var(--wp--preset--color--rot);
}

.roth-mehr .wp-block-button__link,
.roth-sammlung .roth-zusatzlink .wp-block-button__link {
	color: var(--wp--preset--color--rot);
	text-decoration: underline;
}

.roth-mehr .wp-block-button__link:hover,
.roth-sammlung .roth-zusatzlink .wp-block-button__link:hover {
	color: var(--wp--preset--color--rot-hover);
}

/* Vorschaubilder 118 x 118, Abstand 24. Ab dem fuenften nur in der Lightbox. */
.roth-galerie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 22px;
}

.roth-galerie__bild {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.roth-galerie__bild img {
	width: 118px;
	height: 118px;
	object-fit: cover;
}

.roth-galerie__bild--versteckt {
	display: none;
}

.roth-galerie__bild:focus-visible,
.roth-galerie__mehr:focus-visible {
	outline: 2px solid var(--wp--preset--color--rot);
	outline-offset: 3px;
}

.roth-galerie__mehr {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--wp--preset--color--rot);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--fliesstext);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: underline;
}

.roth-galerie__mehr:hover {
	color: var(--wp--preset--color--rot-hover);
}

.roth-galerie__leer {
	font-size: var(--wp--preset--font-size--beschreibung);
	color: var(--wp--preset--color--rot);
}

/* ---- Lightbox ----
   Figma: Grund #262626 mit 90 Prozent, Bild 402 x 482, Legende darunter,
   Streifen aus 118er Vorschaubildern, Schliessen 41 x 41, Pfeile 14 x 23. */

html.roth-lightbox-offen {
	overflow: hidden;
}

.roth-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 50px 24px;
}

/* Ohne das bliebe die Lightbox sichtbar: das display:flex oben schlaegt
   das display:none, das der Browser dem hidden-Attribut mitgibt. */
.roth-lightbox[hidden] {
	display: none;
}

.roth-lightbox__grund {
	position: absolute;
	inset: 0;
	background: rgba(38, 38, 38, 0.9);
	border: 0;
}

/* Nur der Inhalt liegt im Fluss; Schliessen und Pfeile werden weiter
   unten absolut gesetzt und duerfen hier nicht ueberschrieben werden. */
.roth-lightbox__buehne,
.roth-lightbox__zaehler,
.roth-lightbox__streifen {
	position: relative;
}

.roth-lightbox__buehne {
	margin: 0;
	touch-action: pan-y;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	max-width: 402px;
}

.roth-lightbox__bild {
	width: auto;
	max-width: min(402px, 90vw);
	max-height: 60vh;
	object-fit: contain;
}

.roth-lightbox__legende {
	color: var(--wp--preset--color--weiss);
	font-size: var(--wp--preset--font-size--bildlegende);
	line-height: 1.235;
	text-align: left;
	width: 100%;
}

.roth-lightbox__zaehler {
	margin: 0;
	color: #cecece;
	font-size: var(--wp--preset--font-size--button);
	font-weight: 700;
}

/* Kein Scrollbalken: der Streifen ist ein Fenster, die Spur darin wird so
   verschoben, dass das aktuelle Bild mittig steht. Sichtbar ist, was passt. */
.roth-lightbox__streifen {
	width: 100%;
	overflow: hidden;
}

.roth-lightbox__spur {
	display: flex;
	gap: 24px;
	width: max-content;
	transition: transform 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.roth-lightbox__spur {
		transition: none;
	}
}

.roth-lightbox__thumb {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	opacity: 0.5;
	transition: opacity 0.15s;
}

.roth-lightbox__thumb.is-aktiv,
.roth-lightbox__thumb:hover,
.roth-lightbox__thumb:focus-visible {
	opacity: 1;
}

.roth-lightbox__thumb img {
	width: 118px;
	height: 118px;
	object-fit: cover;
}

.roth-lightbox__schliessen,
.roth-lightbox__pfeil {
	position: absolute;
	padding: 0;
	border: 0;
	background: #cecece;
	cursor: pointer;
}

.roth-lightbox__schliessen {
	top: 50px;
	right: 50px;
	width: 41px;
	height: 41px;
	-webkit-mask: var(--roth--schliessen) no-repeat center / contain;
	mask: var(--roth--schliessen) no-repeat center / contain;
}

.roth-lightbox__pfeil {
	top: 50%;
	width: 14px;
	height: 23px;
	-webkit-mask: var(--roth--pfeil-gross) no-repeat center / contain;
	mask: var(--roth--pfeil-gross) no-repeat center / contain;
}

.roth-lightbox__pfeil--vor {
	right: min(24.4%, 480px);
}

.roth-lightbox__pfeil--zurueck {
	left: min(24.4%, 480px);
	transform: scaleX(-1);
}

.roth-lightbox__schliessen:hover,
.roth-lightbox__pfeil:hover,
.roth-lightbox__schliessen:focus-visible,
.roth-lightbox__pfeil:focus-visible {
	background: var(--wp--preset--color--weiss);
}

@media (max-width: 781px) {
	.roth-lightbox__pfeil--vor { right: 16px; }
	.roth-lightbox__pfeil--zurueck { left: 16px; }

	.roth-lightbox__schliessen {
		top: 16px;
		right: 16px;
		width: 28px;
		height: 28px;
	}

	.roth-lightbox__thumb img,
	.roth-galerie__bild img {
		width: 84px;
		height: 84px;
	}
}

/* ---- Veranstaltungen: Datum über dem Bild ---- */

.roth-veranstaltung-bild {
	position: relative;
}

.roth-veranstaltung-bild .roth-datum {
	position: absolute;
	top: 10px;
	left: 12px;
	right: 12px;
	color: var(--wp--preset--color--weiss);
	font-size: var(--wp--preset--font-size--datum);
	line-height: 1.2;
	font-weight: 700;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

.roth-veranstaltung-bild .roth-datum > * {
	margin: 0;
}

.roth-veranstaltung-bild .roth-datum :empty {
	display: none;
}

/* ---- Neuigkeiten: Titel | Auszug | Link in einer Zeile ----
   Figma: Zeile 117px hoch, Titelspalte ab 58px, Beschreibung ab 568px,
   Rahmen rgba(0,0,0,.1) mit weichem Schatten. */

.roth-neuigkeit {
	display: grid;
	grid-template-columns: minmax(0, 510px) 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-height: 117px;
	padding: var(--wp--preset--spacing--30) 54px var(--wp--preset--spacing--30) 58px;
	border: 1px solid var(--wp--preset--color--rahmen);
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05);
}

.roth-neuigkeit > * {
	margin: 0;
}

@media (max-width: 1279.98px) {
	.roth-neuigkeit {
		grid-template-columns: 1fr;
		align-items: start;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--40);
	}
}

/* ---- Randlose Bänder ---- */

/*
 * "alignfull" reicht in Core nur bis Inhaltsbreite plus Root-Padding.
 * Das Missions-Band läuft im Design über die ganze Breite, so wie die
 * Linie unter der Kopfzeile. overflow-x: clip fängt die
 * Scrollbalken-Differenz von 100vw ab, ohne einen Scroll-Container zu bilden.
 */
.wp-site-blocks {
	overflow-x: clip;
}

.roth-vollbreite {
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---- Ausstellungen ---- */

/* Das Hauptbild wird nicht beschnitten: ein Werk soll ganz zu sehen sein.
   Deshalb contain und ein heller Grund fuer die Raender. */
.roth-ausstellung__bild img {
	width: 100%;
	object-fit: contain;
	object-position: left center;
}

.roth-ausstellung,
.roth-ausstellung-detail {
	max-width: 1681px;
	margin-left: max(0px, (100% - 1680px) / 2) !important;
	margin-right: auto !important;
}

.roth-ausstellung-detail {
	max-width: 1534px;
}

/* Der Spaltenabstand aus dem Entwurf (311 bzw. 228) ist auf schmaleren
   Bildschirmen breiter als die Spalten selbst. Core schreibt ihn als
   Layout-Regel mit gleicher Spezifitaet, deshalb hier mit !important. */
@media (max-width: 1400px) {
	.roth-ausstellung {
		column-gap: clamp(32px, 11vw, 311.5px) !important;
	}

	.roth-ausstellung-detail {
		column-gap: clamp(32px, 8vw, 228.5px) !important;
	}
}

/* Datum auf rotem Grund, im Entwurf 39px hoch mit 39/56 Innenabstand. */
.roth-datumsschild {
	display: inline-block;
	padding: 7px 56px 8px 39px;
	line-height: 1.2;
}

/* Ohne Datum kein leeres Schild, ohne Anmeldelink kein Link.
   Bei leerer Bindung schreibt WordPress href="" – das Attribut ist also
   da, nur ohne Wert. Darauf muss der Selektor pruefen. */
.roth-datumsschild:empty,
.roth-anmelden:not(:has(.wp-block-button)),
.roth-anmelden:has(.wp-block-button__link[href=""]),
.roth-anmelden:has(.wp-block-button__link:not([href])) {
	display: none;
}

/* Vergangene Ausstellungen: zwei Spalten, zentriert. */
.roth-vergangene-liste .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.roth-vergangene-liste .wp-block-post-template > li > * {
	margin-bottom: 0;
}

/* align-items: flex-start laesst auch das Bild schrumpfen – ein hohes
   Werk waere dann schmaler als die Spalte und die Legende rutschte mit. */
.roth-vergangene-liste .wp-block-post-featured-image {
	align-self: stretch;
}

@media (max-width: 899.98px) {
	.roth-vergangene-liste .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Rote Flächen ----
   Figma legt die Textur mit 25% Deckkraft und multiply über das Rot.
   Core kann für Block-Hintergründe weder Blendmodus noch Deckkraft,
   deshalb steht das Bild hier statt im Block-Attribut. */

.roth-rotflaeche {
	position: relative;
	isolation: isolate;
}

.roth-rotflaeche::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../images/mission-hintergrund.webp") center / cover no-repeat;
	opacity: 0.25;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Die Infokarten und der Kontaktblock nutzen dieselben Innenabstaende:
   66 oben, 42 rechts, 77 unten, 51 links. */
.roth-rotflaeche--karte {
	padding: clamp(2rem, 3.44vw, 4.125rem) clamp(1.25rem, 2.19vw, 2.625rem) clamp(2.25rem, 4.01vw, 4.8125rem) clamp(1.5rem, 2.66vw, 3.1875rem);
	/* Nebeneinander stehende Karten sollen gleich hoch sein. Cores Spalten
	   werden schon auf gleiche Hoehe gezogen, die Karte darin nicht: sie
	   ist ein gewoehnlicher Block und endet nach ihrem Text. */
	height: 100%;
}

/* Links auf roter Flaeche sind weiss und unterstrichen. */
.roth-rotflaeche a {
	color: var(--wp--preset--color--weiss);
	text-decoration: underline;
}

.roth-rotflaeche a:hover {
	text-decoration: none;
}

/* Ausnahme: Karten-Titel und Pfeil-Links tragen auf Rot keinen Unterstrich. */
.roth-rotflaeche .wp-block-post-title a {
	text-decoration: none;
}

.roth-rotflaeche .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* Zwei Textspalten im Kopf von "Über uns": 828 und 686, Abstand 166. */
.roth-zweispalter > .wp-block-column:first-child {
	flex-basis: 54.69%;
}

.roth-zweispalter > .wp-block-column:last-child {
	flex-basis: 45.31%;
}

/* ---- Leistungs-Kacheln (CONSULTATION: HUB) ----
   Im Entwurf 822 x 178: Bild 253 breit, 49 Abstand, Titel, 55 rechts.
   Zwei Spalten mit 29 quer und 32 hoch, beides steht am Block. */

.roth-leistung {
	position: relative;
	min-height: clamp(120px, 9.27vw, 178px);
	padding-right: clamp(1.25rem, 2.86vw, 3.4375rem);
	overflow: hidden;
}

.roth-leistung__bild {
	/* Ohne feste Hoehe zieht das Seitenverhaeltnis des Bildes die ganze
	   Kachel in die Laenge. */
	flex: 0 0 clamp(110px, 13.18vw, 253px);
	height: clamp(120px, 9.27vw, 178px);
	margin: 0;
}

.roth-leistung__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Die ganze Kachel ist anklickbar, es bleibt aber ein einziger Link.
   Der Titel spannt sich per ::after ueber die Flaeche. */
.roth-leistung__titel {
	margin: 0;
}

.roth-leistung__titel a {
	color: inherit;
	text-decoration: none;
}

.roth-leistung__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.roth-leistung:hover .roth-leistung__titel a,
.roth-leistung__titel a:focus-visible {
	text-decoration: underline;
}

.roth-leistung__titel a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Cores Raster kennt nur eine feste Spaltenzahl. */
@media (max-width: 899.98px) {
	.roth-leistungen.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Header ---- */

.roth-header {
	min-height: 128px;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

/* Auf den Detailseiten trennt der Entwurf den Kopf nicht mit einer Linie
   ab, auf den Uebersichten schon. Eine Unterseite ist hier immer eine
   Detailseite, deshalb greift page-child. */
.single-ausstellung .roth-header,
.single-veranstaltung .roth-header,
.page-child .roth-header {
	border-bottom: 0;
}

/* Zwischen 1024 und 1920 muss alles in eine Zeile: das Logo geht von 293
   auf 150 zurueck, Schriftgrad und Abstaende gehen mit, sonst reicht der
   Platz nicht. Ueber 1920 stehen ueberall die Werte aus dem Entwurf. */
.roth-header .wp-block-site-logo img {
	width: clamp(150px, calc(15.96vw - 13.4px), 293px);
	height: auto;
}

.roth-header > .wp-block-group {
	gap: clamp(20px, calc(1.674vw + 2.86px), 35px);
}

.roth-header .wp-block-navigation {
	font-size: clamp(12px, calc(0.558vw + 6.29px), 17px);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
}

.roth-header .wp-block-navigation__container {
	gap: clamp(16px, calc(2.009vw - 4.57px), 34px);
}

.roth-header .wp-block-navigation a {
	color: var(--wp--preset--color--schwarz);
}

.roth-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--rot);
}

/*
 * Core schaltet den Burger erst unter 600px ein, dazwischen bricht die
 * Kopfzeile um. Ab 1024px steht das volle Menue in einer Zeile, dafuer
 * schrumpfen Logo, Schriftgrad und Abstaende mit (siehe unten).
 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.roth-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

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

/* ---- Untermenue (SUBMENU) ----
   Im Entwurf kein Kaestchen, sondern ein weisses Band ueber die ganze
   Breite unter der Kopfzeile: roter Titel, zwei Spalten Links, rechts
   ein Bild. Der Rest der Seite liegt derweil unter einem dunklen Schleier.
   Nur ab 1024px, darunter uebernimmt das Burger-Overlay von Core.

   Die Selektoren sind absichtlich lang: Core setzt Position, Breite und
   display auf .wp-block-navigation .has-child .wp-block-navigation__submenu-container
   und gewinnt sonst. */

@media (min-width: 1024px) {
	.roth-header {
		position: relative;
		z-index: 20;
		/* Linker Rand der 1680er Inhaltsspalte, mindestens der Seitenrand. */
		--roth--rand: max(var(--wp--style--root--padding-left), (100% - 1680px) / 2);
		/* Das Bild im Band: 685 im Entwurf, darunter mitschrumpfend. */
		--roth--menuebild: clamp(320px, calc(35.68vw), 685px);
	}

	/* Der Menuepunkt reicht bis zur Kopfunterkante, sonst faellt das Band
	   zu, sobald die Maus den Zwischenraum kreuzt. Die 52 ergeben mit der
	   24er Zeile genau die 128 der Kopfzeile. */
	.roth-header .wp-block-navigation__container > li {
		align-items: center;
		padding-top: 52px;
		padding-bottom: 52px;
	}

	/* Das Band richtet sich am Kopf aus, nicht am Menuepunkt. Core setzt
	   die ganze Kette dazwischen auf relative, jede Stufe zaehlt. */
	.roth-header .wp-block-navigation,
	.roth-header .wp-block-navigation .wp-block-navigation__responsive-container,
	.roth-header .wp-block-navigation .wp-block-navigation__responsive-dialog,
	.roth-header .wp-block-navigation .wp-block-navigation__container,
	.roth-header .wp-block-navigation .wp-block-navigation-item.has-child {
		position: static;
	}

	.roth-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		width: auto;
		min-width: 0;
		max-width: none;
		border: 0;
		box-shadow: none;
		background-color: var(--wp--preset--color--weiss);
		/* Titel bei 201, Links bei 254, Bandende 62 unter dem letzten Text. */
		padding-top: 73px;
		padding-bottom: 62px;
		padding-left: var(--roth--rand);
		/* Zwei Spalten zu 420; wird es enger, weichen sie dem Bild. */
		padding-right: max(
			calc(100% - var(--roth--rand) - 840px),
			calc(var(--roth--rand) + var(--roth--menuebild) + 40px)
		);
		display: block;
		/* Zwei Spalten, solange 420 je Spalte da sind; sonst eine. */
		column-count: 2;
		column-width: 420px;
		column-gap: 0;
		background-repeat: no-repeat;
		background-position: right var(--roth--rand) top 66px;
		background-size: var(--roth--menuebild) auto;
		/* 66 oben + Bildhoehe + 62 unten: sonst schneidet ein kurzes Menue
		   das Bild ab. Das Bild ist 685 zu 300, also Faktor 0.438. */
		min-height: calc(128px + var(--roth--menuebild) * 0.438);
	}

	/* Der Schleier ueber dem Rest der Seite. Er haengt am Band, nicht an
	   body: dann erbt er dessen Sichtbarkeit, es braucht kein :has(), und
	   er beginnt genau an der Bandunterkante, laesst den Kopf also hell. */
	.roth-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		pointer-events: none;
	}

	/* Eine unsichtbare Bruecke ueber dem Band: der 1px-Rand der Kopfzeile
	   liegt sonst genau zwischen Menuepunkt und Band. */
	.roth-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 8px;
	}

	/* Core klappt die letzten beiden Klappmenues nach rechts, damit sie
	   nicht aus dem Bild laufen. Ein Band ueber die volle Breite braucht
	   das nicht, und die Regel hat dieselbe Staerke wie die obige. */
	.roth-header .wp-block-navigation .has-child:last-child > .wp-block-navigation__submenu-container,
	.roth-header .wp-block-navigation .has-child:nth-last-child(2) > .wp-block-navigation__submenu-container {
		left: 0;
		right: 0;
	}

	.roth-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > li {
		margin: 0;
		break-inside: avoid;
	}

	/* Der erste Eintrag ist der Titel des Bandes. */
	.roth-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > li:first-child {
		column-span: all;
		margin-bottom: 8px;
	}

	.roth-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > li:first-child > a {
		color: var(--wp--preset--color--rot);
		font-size: var(--wp--preset--font-size--sektion);
		font-weight: 600;
		line-height: 1.28;
	}

	/* Core polstert die Linkflaeche mit 0.5em/1em; im Entwurf sitzt der
	   Text buendig am Rand und die Zeilen stehen genau 35 auseinander. */
	.roth-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > li > a.wp-block-navigation-item__content {
		padding: 0;
	}

	.roth-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > li > a {
		color: var(--wp--preset--color--schwarz);
		/* 20 auf 35 im Entwurf, auf schmalen Schirmen entsprechend kleiner. */
		font-size: clamp(15px, calc(0.558vw + 9.29px), 20px);
		font-weight: 400;
		line-height: clamp(26px, calc(1.004vw + 15.71px), 35px);
		text-transform: none;
	}

	.roth-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > li > a:hover {
		color: var(--wp--preset--color--rot);
	}

	/* Der Verweis ins Kulturgueterportal steht rot und fett unter beiden
	   Spalten; sonst landet er je nach Anzahl Eintraege irgendwo. */
	.roth-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > li:has(> a[href*="kimnet"]) {
		column-span: all;
		margin-top: 44px;
	}

	.roth-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > li:has(> a[href*="kimnet"]) > a {
		color: var(--wp--preset--color--rot);
		font-weight: 700;
		line-height: 1.25;
	}

	/* Der offene Menuepunkt wird rot, sein Winkel dreht sich. */
	.roth-header .wp-block-navigation-item.has-child:hover > a,
	.roth-header .wp-block-navigation-item.has-child:focus-within > a {
		color: var(--wp--preset--color--rot);
	}

	.roth-header .wp-block-navigation__submenu-icon svg {
		transition: transform 0.2s ease;
	}

	.roth-header .wp-block-navigation-item.has-child:hover .wp-block-navigation__submenu-icon svg,
	.roth-header .wp-block-navigation-item.has-child:focus-within .wp-block-navigation__submenu-icon svg {
		transform: rotate(180deg);
	}

	/* Welches Bild zu welchem Menuepunkt gehoert, steht unter
	   Design > Untermenue-Bilder. functions.php haengt die Regeln dazu
	   hinter dieses Stylesheet. */
}

/* ---- Footer ---- */

.roth-footer .wp-block-heading a {
	color: var(--wp--preset--color--rot);
	text-decoration: underline;
}

.roth-footer .roth-liste {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	font-size: var(--wp--preset--font-size--fliesstext);
	line-height: 1.5;
}

.roth-footer .roth-liste a {
	color: var(--wp--preset--color--schwarz);
}

.roth-footer .roth-liste a:hover {
	color: var(--wp--preset--color--rot);
}

.roth-footer .roth-kontakt a {
	text-decoration: underline;
}