/*
 * Muster für Unterseiten (Kategorie „Unterseite Presslauer“, patterns/seite-*.php).
 * Alles hängt an Klassen mit dem Präfix ps-; die Blöcke sind Core-Blöcke. Bewegung: seite.js gibt
 * Klassen (ps-rv, ps-maske, ist-sichtbar …), die Zustände stehen in bewegung.css. Ohne JavaScript
 * und bei reduzierter Bewegung ist jeder Abschnitt vollständig und ruhig lesbar.
 *
 * Seitenkopf und Einleitung: seitenkopf.css. Bewertungen: bewertungen.css. Resavio: resavio.css.
 */

/* ---------- Gemeinsam: Abschnitte im Inhalt ---------- */
.ps-inhalt > :is(.ps-einleitung--muster, .ps-fakten, .ps-frage-bild, .ps-frage, .ps-geschichte, .ps-bildband, .ps-zitat, .ps-kacheln, .ps-faq--seite, .ps-aufruf, .ps-bewertungen, .ps-steckbrief) { margin-block: 0; }
:where(.ps-einleitung--muster, .ps-fakten, .ps-frage, .ps-bildband, .ps-kacheln, .ps-faq--seite, .ps-steckbrief) > * { margin-block: 0; }
/* Vollbreite Bänder: auch ohne „volle Breite“ im Block über den Seitenrand hinaus */
.ps-inhalt > :is(.ps-fakten, .ps-geschichte, .ps-bildband, .ps-zitat, .ps-aufruf, .ps-bewertungen) {
	max-width: none !important;
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
}
:is(.ps-fakten__kopf, .ps-bildband__kopf, .ps-kacheln__kopf, .ps-geschichte__kopf) { display: grid; gap: 14px; max-width: 760px; }
:is(.ps-fakten__kopf, .ps-bildband__kopf, .ps-kacheln__kopf, .ps-geschichte__kopf) > * { margin: 0; }
:is(.ps-fakten__kopf, .ps-bildband__kopf, .ps-kacheln__kopf, .ps-geschichte__kopf) h2 {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: var(--fs-h1);
	line-height: 1.08;
	letter-spacing: var(--ls-display);
}
:is(.ps-fakten__kopf, .ps-bildband__kopf, .ps-kacheln__kopf, .ps-geschichte__kopf, .ps-aufruf) h2 em { font-style: italic; }

/* ---------- Einleitung (Muster) ---------- */
.ps-einleitung--muster.wp-block-group {
	display: grid;
	gap: 20px;
	padding: clamp(64px, 9vw, 128px) 0 clamp(32px, 4vw, 56px);
}
.ps-einleitung--muster .ps-einleitung__text { max-width: 68ch; color: var(--text-muted); }


/* ---------- Kennzahlen mit Count-up ---------- */
.ps-fakten.wp-block-group {
	position: relative;
	padding: clamp(64px, 8vw, 112px) max(var(--gutter), calc((100% - var(--container)) / 2));
	background: var(--leinen);
	display: grid;
	gap: clamp(32px, 4vw, 56px);
}
.ps-fakten__raster.wp-block-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 0;
	border-top: 1px solid var(--border-default);
}
.ps-fakt.wp-block-group {
	position: relative;
	display: grid;
	align-content: start;
	gap: 10px;
	margin: 0;
	padding: 28px 28px 8px 0;
}
.ps-fakt > * { margin: 0; }
@media (min-width: 700px) {
	.ps-fakt.wp-block-group { padding: 32px 32px 8px 28px; border-left: 1px solid var(--border-subtle); }
	.ps-fakt.wp-block-group:first-child { padding-left: 0; border-left: 0; }
}
/* Zahl und Einheit in einer Zeile (Gruppe ps-fakt__wert), Einheit kursiv wie das letzte Wort der Display-Zeile */
.ps-fakt__wert.wp-block-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.ps-fakt__wert > * { margin: 0; }
.ps-fakt__einheit { font: italic 300 clamp(20px, 1.9vw, 26px)/1.1 var(--font-display); color: var(--tanne-700); }
.ps-fakt__zahl {
	font: 300 var(--fs-display-l)/1 var(--font-display);
	letter-spacing: var(--ls-display);
	color: var(--tanne-700);
	font-variant-numeric: tabular-nums lining-nums;
	white-space: nowrap;
}
.ps-fakt__text { max-width: 26ch; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5; }
/* Linie über der Kennzahl zeichnet sich beim Erscheinen */
.ps-fakten__raster .ps-fakt::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 56px;
	height: 2px;
	background: var(--sonne-500);
	transform-origin: left center;
}
@media (min-width: 700px) { .ps-fakten__raster .ps-fakt:not(:first-child)::before { left: 28px; } }
.ps-bw .ps-fakten__raster .ps-fakt.ps-rv::before { transform: scaleX(0); transition: transform 900ms var(--ease-out) calc(var(--ps-d, 0ms) + 200ms); }
.ps-bw .ps-fakten__raster .ps-fakt.ps-rv.ist-sichtbar::before { transform: scaleX(1); }

/* ---------- Frage mit Bild (Media & Text), Bild im Wechsel links/rechts ----------
   Gestaltung 21.10.2026 („Bühne“, Variante A, umsetzung/unterseiten-abnahme.md Abschnitt 11):
   - Bühne (::before des Moduls): ruhige Fläche in Heu hinter dem Bild, so hoch wie das Bild, um
     --ps-bt-y nach unten versetzt und zur Textseite um --ps-bt-innen kürzer; zur Außenseite läuft sie bis
     zum Bildschirmrand (border-image-outset = reine Malfläche: kein Layout-Überlauf, kein seitliches
     Scrollen). Mit dem Wechsel links/rechts entsteht ein Zickzack über die Seite.
   - Goldwinkel (::after): feine Linie in Sonne an der oberen Innenecke des Bilds, zum Text hin.
   - Beide sind Rasterelemente in der Bildzelle (Zeile/Spalte wie das Bild, mittig, Höhe = 80 % der
     Zellbreite = 5:4) und liegen dadurch immer genau am Bild, auch wenn der Text höher ist.
   Rein dekorativ (kein Text, kein Bild, nichts für Screenreader); im Block-Editor ausgenommen, damit die
   Auswahlrahmen des Editors (::after) unberührt bleiben. Bewegung: weiter unten und seite.js. */
.ps-frage-bild.wp-block-media-text {
	--ps-bt-farbe: var(--heu);
	--ps-bt-linie: var(--sonne-500);
	--ps-bt-innen: 16%;
	--ps-bt-y: 14%;
	--ps-bt-ecke: clamp(44px, 4.6vw, 72px);
	--ps-bt-abstand: clamp(12px, 1.3vw, 18px);
	--ps-bt-raum: clamp(36px, 5.5vw, 88px);
	position: relative;
	isolation: isolate;
	gap: 0;
	align-items: center;
	padding-block: clamp(64px, 8.5vw, 128px);
	grid-template-columns: minmax(0, 1.26fr) minmax(0, 1fr);
}
.ps-frage-bild.wp-block-media-text.has-media-on-the-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.26fr); }
/* Folgt ein vollbreites Band (Zitat, Tag, Aufruf …), bleibt unter der Bühne ruhiger Abstand statt eines schmalen Spalts */
@media (min-width: 782px) {
	.ps-frage-bild.wp-block-media-text:has(+ :is(.ps-zitat, .ps-geschichte, .ps-aufruf, .ps-bildband, .ps-fakten, .ps-bewertungen, .ps-resavio)) { padding-bottom: calc(clamp(64px, 8.5vw, 128px) + 48px); }
}
.ps-frage-bild .wp-block-media-text__media { position: relative; z-index: 0; margin: 0; border-radius: var(--radius-image); overflow: hidden; background: var(--fels-200); }
/* object-position: Hochformat-Fotos (Kopf meist oben) werden im 5:4-Rahmen oben-mittig statt mittig
   beschnitten; Querformat-Fotos füllen die Höhe ganz aus und sind davon nicht betroffen. */
.ps-frage-bild .wp-block-media-text__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 35%; display: block; }
.ps-frage-bild.wp-block-media-text:not(.block-editor-block-list__block)::before,
.ps-frage-bild.wp-block-media-text:not(.block-editor-block-list__block)::after {
	content: "";
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	justify-self: stretch;
	height: 0;
	padding-bottom: 80%;
	pointer-events: none;
}
.ps-frage-bild.wp-block-media-text.has-media-on-the-right:not(.block-editor-block-list__block)::before,
.ps-frage-bild.wp-block-media-text.has-media-on-the-right:not(.block-editor-block-list__block)::after { grid-column: 2; }
/* Bühne (kein seitlicher Versatz per translate: der zählte als Überlauf) */
.ps-frage-bild.wp-block-media-text:not(.block-editor-block-list__block)::before {
	z-index: -1;
	margin-right: var(--ps-bt-innen);
	translate: 0 var(--ps-bt-y);
	border-image: linear-gradient(var(--ps-bt-farbe) 0 0) fill 0 / 0 / 0 0 0 100vw;
}
.ps-frage-bild.wp-block-media-text.has-media-on-the-right:not(.block-editor-block-list__block)::before { margin-right: 0; margin-left: var(--ps-bt-innen); border-image-outset: 0 100vw 0 0; }
/* Goldwinkel an der oberen Innenecke */
.ps-frage-bild.wp-block-media-text:not(.block-editor-block-list__block)::after {
	z-index: 1;
	translate: var(--ps-bt-abstand) calc(-1 * var(--ps-bt-abstand));
	background:
		linear-gradient(var(--ps-bt-linie) 0 0) right top / var(--ps-bt-ecke) 1.5px no-repeat,
		linear-gradient(var(--ps-bt-linie) 0 0) right top / 1.5px var(--ps-bt-ecke) no-repeat;
}
.ps-frage-bild.wp-block-media-text.has-media-on-the-right:not(.block-editor-block-list__block)::after {
	translate: calc(-1 * var(--ps-bt-abstand)) calc(-1 * var(--ps-bt-abstand));
	background-position: left top, left top;
}
.ps-frage-bild .wp-block-media-text__content { display: grid; gap: 18px; padding: 0 0 0 var(--ps-bt-raum); }
.ps-frage-bild.has-media-on-the-right .wp-block-media-text__content { padding: 0 var(--ps-bt-raum) 0 0; }
.ps-frage-bild .wp-block-media-text__content > * { margin: 0; }
.ps-frage-bild h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.ps-zitierabsatz { color: var(--text-body); font-size: var(--fs-body); line-height: 1.7; }
.ps-frage-bild .wp-block-buttons { margin-top: 6px; }
@media (max-width: 781px) {
	/* Mobil: Bild oben, Text darunter; Bühne zur Außenseite des Bilds (links bzw. rechts im Wechsel) */
	.ps-frage-bild.wp-block-media-text, .ps-frage-bild.wp-block-media-text.has-media-on-the-right {
		--ps-bt-innen: 8%;
		--ps-bt-y: 11%;
		--ps-bt-ecke: 40px;
		--ps-bt-abstand: 10px;
		grid-template-columns: 100% !important;
		gap: 0;
		row-gap: clamp(52px, 14vw, 64px);
		padding-block: 56px 48px;
	}
	.ps-frage-bild.wp-block-media-text > .wp-block-media-text__media,
	.ps-frage-bild.wp-block-media-text:not(.block-editor-block-list__block)::before,
	.ps-frage-bild.wp-block-media-text:not(.block-editor-block-list__block)::after,
	.ps-frage-bild.wp-block-media-text.has-media-on-the-right:not(.block-editor-block-list__block)::before,
	.ps-frage-bild.wp-block-media-text.has-media-on-the-right:not(.block-editor-block-list__block)::after { grid-row: 1; grid-column: 1; }
	.ps-frage-bild .wp-block-media-text__content, .ps-frage-bild.has-media-on-the-right .wp-block-media-text__content { padding: 0; grid-row: 2; grid-column: 1; }
}

/* Bewegung nur mit JavaScript und ohne „reduzierte Bewegung“ (Klasse ps-bw); sonst steht alles still und
   vollständig da. Das Bild sitzt leicht vergrößert (1,06) im Rahmen und wandert beim Scrollen um ±2,6 %
   (Scroll-driven Animation; ohne Unterstützung übernimmt seite.js), auf Desktop zoomt es beim Überfahren
   langsam (× 1,03). Beim ersten Erscheinen (Klassen ps-bt-rv / ist-sichtbar aus seite.js) wischt die Bühne
   vom Bildschirmrand herein, das Bild öffnet sich (Maske, bewegung.css), danach zeichnet sich der Goldwinkel. */
.ps-bw .ps-frage-bild .wp-block-media-text__media img {
	scale: 1.06;
	transition: transform 1800ms var(--ease-out) var(--ps-d, 0ms), scale var(--dur-image) var(--ease-out);
}
/* Zeitleiste am Bildrahmen (nicht view() am Bild: der Rahmen ist mit overflow: hidden selbst ein
   Scroll-Container, das Bild bewegte sich darin nie). */
@supports (animation-timeline: view()) {
	.ps-bw .ps-frage-bild .wp-block-media-text__media { view-timeline: --ps-bt-rahmen block; }
	.ps-bw .ps-frage-bild .wp-block-media-text__media img {
		animation: ps-bt-innen linear both;
		animation-timeline: --ps-bt-rahmen;
		animation-range: cover 0% cover 100%;
	}
}
@keyframes ps-bt-innen { from { translate: 0 -2.6%; } to { translate: 0 2.6%; } }
@media (hover: hover) and (pointer: fine) {
	.ps-bw .ps-frage-bild .wp-block-media-text__media:hover img { scale: 1.092; }
}
.ps-bw .ps-frage-bild.ps-bt-rv::before { clip-path: inset(0 0 0 -100vw); transition: clip-path 1500ms var(--ease-in-out) 120ms; }
.ps-bw .ps-frage-bild.ps-bt-rv:not(.ist-sichtbar)::before { clip-path: inset(0 100% 0 -100vw); }
.ps-bw .ps-frage-bild.ps-bt-rv.has-media-on-the-right::before { clip-path: inset(0 -100vw 0 0); }
.ps-bw .ps-frage-bild.ps-bt-rv.has-media-on-the-right:not(.ist-sichtbar)::before { clip-path: inset(0 -100vw 0 100%); }
.ps-bw .ps-frage-bild.ps-bt-rv::after { transition: background-size 900ms var(--ease-out) 1000ms; }
.ps-bw .ps-frage-bild.ps-bt-rv:not(.ist-sichtbar)::after { background-size: 0 1.5px, 1.5px 0; }
@media (prefers-reduced-motion: reduce) {
	.ps-frage-bild .wp-block-media-text__media img { scale: none !important; translate: none !important; animation: none !important; }
	.ps-frage-bild.wp-block-media-text::before, .ps-frage-bild.wp-block-media-text::after { transition: none !important; clip-path: none !important; }
}

/* Frage ohne Bild (Text) */
.ps-frage.wp-block-group { display: grid; gap: 16px; padding-block: clamp(40px, 6vw, 80px); }
.ps-frage > * { max-width: 760px; }
.ps-frage h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.ps-frage .ps-quelle { color: var(--text-subtle); font-size: var(--fs-caption); }

/* ---------- Scroll-Geschichte (seite-tag) ---------- */
.ps-geschichte.wp-block-group {
	position: relative;
	padding: clamp(72px, 9vw, 128px) max(var(--gutter), calc((100% - var(--container)) / 2));
	background: var(--tanne-950);
	color: var(--tanne-100);
	display: grid;
	gap: clamp(40px, 5vw, 64px);
}
.ps-geschichte .is-style-ps-dachzeile { color: var(--sonne-300); }
.ps-geschichte h2 { color: var(--schnee); }
.ps-geschichte__kopf p:not(.is-style-ps-dachzeile) { color: var(--tanne-200); font-size: var(--fs-lead); line-height: 1.55; }
.ps-geschichte__stationen.wp-block-group { position: relative; display: grid; gap: clamp(40px, 6vw, 72px); counter-reset: ps-station; }
.ps-geschichte__station.wp-block-group { position: relative; display: grid; gap: 0; margin: 0; counter-increment: ps-station; }
.ps-geschichte__station > * { margin: 0; }
.ps-geschichte__bild { margin: 0; border-radius: var(--radius-image); overflow: hidden; }
.ps-geschichte__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.ps-geschichte__karte.wp-block-group {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 12px;
	width: min(92%, 560px);
	margin: -56px 0 0 clamp(16px, 4vw, 40px);
	padding: clamp(24px, 3vw, 36px);
	background: var(--schnee);
	color: var(--text-body);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-lg);
}
.ps-geschichte__karte > * { margin: 0; }
.ps-geschichte__karte h3 { color: var(--text-strong); font-size: var(--fs-h3); line-height: var(--lh-snug); }
.ps-geschichte__marke {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font: 600 var(--fs-eyebrow)/1.2 var(--font-sans);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-accent);
}
.ps-geschichte__marke::after {
	content: counter(ps-station, decimal-leading-zero);
	color: var(--fels-500);
	letter-spacing: .14em;
}

/* Bühne (nur mit seite.js ab 900 px und Bewegung): Bilder kleben links und blenden über, die
   Karten ziehen rechts vorbei, eine Linie mit Punkten zeigt den Fortschritt. */
.ps-geschichte.ist-buehne .ps-geschichte__stationen.wp-block-group {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 0 clamp(48px, 6vw, 96px);
	align-items: start;
}
.ps-geschichte__spalte { position: relative; grid-column: 2; grid-row: 1; display: grid; }
.ps-geschichte__buehne {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	grid-column: 1;
	grid-row: 1;
	height: calc(100vh - var(--header-h) - 64px);
	min-height: 420px;
	border-radius: var(--radius-image);
	overflow: hidden;
	background: var(--tanne-900);
}
.ps-geschichte__buehne .ps-geschichte__bild {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 900ms var(--ease-out), transform 1800ms var(--ease-out);
	border-radius: 0;
}
.ps-geschichte__buehne .ps-geschichte__bild.ist-aktiv { opacity: 1; transform: none; }
.ps-geschichte__buehne .ps-geschichte__bild img { height: 100%; aspect-ratio: auto; }
.ps-geschichte__buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 38, 30, 0) 55%, rgba(20, 38, 30, .55)); pointer-events: none; }
.ps-geschichte__zaehler {
	position: absolute;
	left: 28px;
	bottom: 22px;
	z-index: 2;
	display: flex;
	align-items: baseline;
	gap: 12px;
	font: 300 clamp(56px, 6vw, 88px)/1 var(--font-display);
	letter-spacing: var(--ls-display);
	color: var(--schnee);
	overflow: hidden;
}
.ps-geschichte__zaehler b { display: inline-block; font-weight: 300; animation: ps-zaehler 700ms var(--ease-out) both; }
.ps-geschichte__zaehler small { font: 600 12px/1 var(--font-sans); letter-spacing: .14em; color: var(--tanne-100); }
@keyframes ps-zaehler { from { transform: translate3d(0, 60%, 0); opacity: 0; } to { transform: none; opacity: 1; } }
.ps-geschichte.ist-buehne .ps-geschichte__station.wp-block-group {
	min-height: 76vh;
	align-content: center;
	padding-left: 40px;
}
.ps-geschichte.ist-buehne .ps-geschichte__station .ps-geschichte__karte {
	width: 100%;
	margin: 0;
	opacity: .4;
	transform: scale(.97);
	transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), box-shadow 700ms var(--ease-out);
	box-shadow: var(--shadow-sm);
}
.ps-geschichte.ist-buehne .ps-geschichte__station.ist-aktiv .ps-geschichte__karte { opacity: 1; transform: none; box-shadow: var(--shadow-lg); }
.ps-geschichte__linie {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: rgba(252, 250, 245, .16);
	pointer-events: none;
}
.ps-geschichte__linie > span { position: absolute; inset: 0; background: var(--sonne-400); transform: scaleY(var(--ps-linie, 0)); transform-origin: top center; }
.ps-geschichte.ist-buehne .ps-geschichte__station::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 50%;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--tanne-950);
	border: 1.5px solid rgba(252, 250, 245, .45);
	transition: background 520ms var(--ease-out), border-color 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.ps-geschichte.ist-buehne .ps-geschichte__station.ist-erreicht::before { background: var(--sonne-500); border-color: var(--sonne-500); }
.ps-geschichte.ist-buehne .ps-geschichte__station.ist-aktiv::before { transform: scale(1.4); }

/* ---------- Bildband: horizontal wischbar mit Scroll-Snap ---------- */
.ps-bildband.wp-block-group {
	padding: clamp(64px, 8vw, 112px) 0;
	display: grid;
	gap: clamp(28px, 3vw, 40px);
	overflow: hidden;
}
.ps-bildband__kopf.wp-block-group { margin-inline: max(var(--gutter), calc((100% - var(--container)) / 2)) !important; }
.ps-bildband__oben { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); }
.ps-bildband__oben > .ps-bildband__kopf.wp-block-group { margin-inline: 0 !important; }
.ps-bildband__reihe.wp-block-gallery.has-nested-images {
	display: flex;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: clamp(12px, 1.6vw, 20px) !important;
	margin: 0 !important;
	padding: 4px max(var(--gutter), calc((100% - var(--container)) / 2)) 14px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
	scrollbar-width: thin;
	scrollbar-color: var(--fels-300) transparent;
}
.ps-bildband__reihe.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex: 0 0 auto !important;
	width: clamp(240px, 30vw, 440px) !important;
	margin: 0 !important;
	scroll-snap-align: start;
	border-radius: var(--radius-image);
	overflow: hidden;
}
.ps-bildband__reihe.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	flex: none;
}
.ps-bildband__reihe.wp-block-gallery.has-nested-images figure.wp-block-image:hover img { transform: scale(1.04); }
.ps-bildband__reihe:focus-visible { outline: 2px solid var(--sonne-500); outline-offset: -2px; }
.ps-bildband__knoepfe { display: flex; gap: 10px; }
.ps-bildband__knopf {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1.5px solid var(--tanne-600);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--tanne-700);
	cursor: pointer;
	transition: background-color var(--dur-fast), color var(--dur-fast), opacity var(--dur-base), translate 420ms var(--ease-out);
}
.ps-bildband__knopf:hover:not(:disabled) { background-color: var(--tanne-600); color: var(--schnee); }
.ps-bildband__knopf:disabled { opacity: .35; cursor: default; }
.ps-bildband__knopf svg { transition: transform 420ms var(--ease-out); }
.ps-bildband__knopf--zurueck:hover:not(:disabled) svg { transform: translateX(-3px); }
.ps-bildband__knopf--weiter:hover:not(:disabled) svg { transform: translateX(3px); }
.ps-bildband__leiste { position: relative; height: 2px; margin-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); background: var(--border-subtle); overflow: hidden; }
.ps-bildband__leiste > span { position: absolute; inset: 0; background: var(--tanne-600); transform: scaleX(var(--ps-band, .1)); transform-origin: left center; transition: transform 160ms linear; }

/* ---------- Gästestimme ---------- */
.ps-zitat.wp-block-group {
	padding: clamp(72px, 9vw, 128px) max(var(--gutter), calc((100% - var(--container-narrow)) / 2));
	background: var(--leinen);
	display: grid;
	justify-items: center;
	gap: 24px;
	text-align: center;
}
.ps-zitat > * { margin: 0; }
.ps-zitat .is-style-ps-dachzeile { justify-content: center; }
.ps-zitat__text.wp-block-quote {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: 22px;
	justify-items: center;
	max-width: 820px;
}
.ps-zitat__text.wp-block-quote::before {
	content: "„";
	display: block;
	height: .45em;
	font: 300 clamp(96px, 10vw, 140px)/0 var(--font-display);
	color: var(--sonne-500);
	transform-origin: 50% 50%;
}
/* Zierzeichen je Sprache (lang am <html>): Englisch “, Italienisch «. Beide sitzen in der Schrift höher als „;
   translate schiebt die Tinte auf dieselbe Mitte wie „ (Newsreader 300), damit sie zwischen Dachzeile und Text
   bleibt und nicht über die Dachzeile ragt. translate wirkt unabhängig vom transform der Einblendung. */
.ps-zitat__text.wp-block-quote:lang(en)::before { content: "“"; translate: 0 .64em; }
.ps-zitat__text.wp-block-quote:lang(it)::before { content: "«"; translate: 0 .29em; }
.ps-zitat__text p { font: italic 300 clamp(24px, 2.6vw, 36px)/1.38 var(--font-display); color: var(--text-strong); text-wrap: balance; }
.ps-zitat__text cite { display: block; font: 400 14px/1.6 var(--font-sans); font-style: normal; color: var(--text-muted); }
.ps-zitat__text cite strong { display: block; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-accent); }
.ps-zitat__text cite a { color: inherit; }
.ps-bw .ps-zitat__text.ps-rv::before { transform: scale(.6); opacity: 0; transition: transform 1100ms var(--ease-out) 150ms, opacity 900ms var(--ease-out) 150ms; }
.ps-bw .ps-zitat__text.ps-rv.ist-sichtbar::before { transform: none; opacity: 1; }

/* ---------- Kacheln mit Bild und Link (ganze Karte klickbar) ---------- */
.ps-kacheln.wp-block-group { display: grid; gap: clamp(28px, 3vw, 40px); padding-block: clamp(56px, 8vw, 112px); }
.ps-kacheln__raster.wp-block-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 24px; }
.ps-kachel.wp-block-group {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0 0 26px;
	background: var(--weiss);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
}
.ps-kachel > * { margin: 0 24px; }
.ps-kachel > .wp-block-image { margin: 0 0 8px; overflow: hidden; }
.ps-kachel > .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; display: block; }
.ps-kachel h3 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
.ps-kachel h3 a { display: inline-flex; align-items: baseline; gap: 10px; color: var(--text-strong); text-decoration: none; transition: color var(--dur-fast); }
.ps-kachel h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ps-kachel h3 a > .ps-kachel__pfeil { flex: none; color: var(--sonne-600); transition: transform 520ms var(--ease-out); }
.ps-kachel:is(:hover, :focus-within) h3 a { color: var(--tanne-700); }
.ps-kachel:is(:hover, :focus-within) h3 a > .ps-kachel__pfeil { transform: translateX(5px); }
.ps-kachel p { color: var(--text-muted); font-size: var(--fs-small); }
.ps-kachel .wp-block-buttons { position: relative; z-index: 2; }

/* ---------- Häufige Fragen (Gruppe ps-faq; das Plugin erzeugt daraus FAQPage) ---------- */
.ps-faq--seite.wp-block-group { display: grid; gap: 24px 64px; padding-block: clamp(56px, 8vw, 112px); }
@media (min-width: 960px) {
	.ps-faq--seite.wp-block-group:has(> .ps-faq__kopf) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: start; }
	.ps-faq--seite > .ps-faq__kopf { position: sticky; top: calc(var(--header-h) + 24px); }
}
.ps-faq--seite > .ps-faq__kopf { display: grid; gap: 14px; }
.ps-faq--seite > .ps-faq__kopf > * { margin: 0; }
.ps-faq--seite h2 { font: 300 var(--fs-h1)/1.08 var(--font-display); letter-spacing: var(--ls-display); }
.ps-faq--seite .ps-faq__kopf p:not(.is-style-ps-dachzeile) { color: var(--text-muted); font-size: var(--fs-small); }
.ps-faq--seite .ps-faq__liste { border-top: 1px solid var(--border-default); }
.ps-faq--seite .ps-faq__eintrag { border-bottom: 1px solid var(--border-default); padding: 0; margin: 0; }
.ps-faq--seite .ps-faq__eintrag > summary {
	position: relative;
	padding: 24px 60px 24px 0;
	cursor: pointer;
	list-style: none;
	color: var(--text-strong);
	font: 400 var(--fs-h4)/1.35 var(--font-display);
	transition: color var(--dur-fast);
}
.ps-faq--seite .ps-faq__eintrag > summary:hover { color: var(--tanne-700); }
.ps-faq--seite .ps-faq__eintrag > summary::-webkit-details-marker { display: none; }
.ps-faq--seite .ps-faq__eintrag > summary::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	border: 1.5px solid var(--border-default);
	border-radius: var(--radius-pill);
	background:
		linear-gradient(var(--tanne-700), var(--tanne-700)) center / 12px 1.5px no-repeat,
		linear-gradient(var(--tanne-700), var(--tanne-700)) center / 1.5px 12px no-repeat;
	transition: transform 420ms var(--ease-out), border-color var(--dur-fast);
}
.ps-faq--seite .ps-faq__eintrag > summary:hover::after { border-color: var(--tanne-600); }
.ps-faq--seite .ps-faq__eintrag[open] > summary::after { transform: rotate(135deg); border-color: var(--sonne-500); }
.ps-faq--seite .ps-faq__eintrag > :not(summary) { margin: 0; padding: 0 60px 24px 0; max-width: 68ch; color: var(--text-body); }

/* ---------- Aufruf (Abschluss mit zwei Buttons) ---------- */
.ps-aufruf.wp-block-group {
	position: relative;
	padding: clamp(72px, 9vw, 128px) max(var(--gutter), calc((100% - var(--container)) / 2));
	background: var(--tanne-900);
	color: var(--schnee);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 32px 64px;
	align-items: end;
	overflow: hidden;
}
.ps-aufruf > * { margin: 0; }
.ps-aufruf::before {
	content: "";
	position: absolute;
	top: 0;
	left: max(var(--gutter), calc((100% - var(--container)) / 2));
	width: 72px;
	height: 2px;
	background: var(--sonne-500);
	transform-origin: left center;
}
.ps-bw .ps-aufruf.ps-linie-rv::before { transform: scaleX(0); transition: transform 1100ms var(--ease-out) 200ms; }
.ps-bw .ps-aufruf.ps-linie-rv.ist-sichtbar::before { transform: scaleX(1); }
.ps-aufruf__text.wp-block-group { display: grid; gap: 16px; }
.ps-aufruf__text > * { margin: 0; }
.ps-aufruf .is-style-ps-dachzeile { color: var(--sonne-200); }
.ps-aufruf h2 { color: var(--schnee); font-weight: 300; font-size: var(--fs-display-l); line-height: 1.02; letter-spacing: var(--ls-display); }
.ps-aufruf p { color: var(--schnee); }
.ps-aufruf .wp-block-buttons { justify-content: flex-start; }
@media (min-width: 900px) { .ps-aufruf .wp-block-buttons { justify-content: flex-end; } }
/* Buttons im Band wie im Muster vorgesehen und wie auf der Startseite: Sonne (Akzent) und Umriss hell.
   bestand.css färbt Buttons im Inhalt sonst einheitlich Tanne 600 (gedacht für alte Getwid-Inhalte). */
.ps-aufruf .wp-block-button.is-style-ps-akzent .wp-block-button__link { background-color: var(--sonne-500); color: var(--fels-950); }
.ps-aufruf .wp-block-button.is-style-ps-hell .wp-block-button__link { background-color: transparent; color: var(--schnee); border: 1.5px solid rgba(252, 250, 245, .8); }

/* ---------- Abschluss mit Bild (21.10.2026): letztes Aufruf-Band vor dem Fuß ----------
 * Das Beitragsbild der Seite liegt stark abgedunkelt im Band (Foto nur dezent sichtbar) und läuft unten in
 * reines Tanne 900 aus, also nahtlos in den Fuß; oben die Klammer zum Seitenkopf (gleiches Foto).
 * Bild-Adresse: --ps-abschluss-bild (inc/assets.php, ca. 1536 px, mobil 1024 px); rein dekorativ (::after).
 * Laden: mit JavaScript erst kurz vor dem Band (seite.js setzt ps-bild-laden), mit Bewegung sanft
 * einblenden, sobald das Band sichtbar ist (ist-sichtbar); ohne JavaScript sofort. Ohne Beitragsbild
 * bleibt das Band einfach dunkel. Abstand zum Fuß: seite.css (kein heller Streifen). */
:is(.ps-inhalt > .ps-aufruf:last-child, .ps-inhalt > .wprt-container:last-child > .ps-aufruf:last-child) { isolation: isolate; }
:is(.ps-inhalt > .ps-aufruf:last-child, .ps-inhalt > .wprt-container:last-child > .ps-aufruf:last-child)::before { z-index: 1; }
:is(.ps-inhalt > .ps-aufruf:last-child, .ps-inhalt > .wprt-container:last-child > .ps-aufruf:last-child)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--scrim-abschluss), var(--ps-abschluss-bild, none) center 45% / cover no-repeat;
}
html.ps-js :is(.ps-inhalt > .ps-aufruf:last-child, .ps-inhalt > .wprt-container:last-child > .ps-aufruf:last-child):not(.ps-bild-laden)::after { background-image: var(--scrim-abschluss); }
.ps-bw :is(.ps-inhalt > .ps-aufruf:last-child, .ps-inhalt > .wprt-container:last-child > .ps-aufruf:last-child)::after { opacity: 0; transform: scale(1.04); transition: opacity 1400ms var(--ease-out) 100ms, transform 2400ms var(--ease-out) 100ms; }
.ps-bw :is(.ps-inhalt > .ps-aufruf:last-child, .ps-inhalt > .wprt-container:last-child > .ps-aufruf:last-child).ist-sichtbar::after { opacity: 1; transform: none; }

/* ---------- Steckbrief (Muster der letzten Runde, weiter gültig) ---------- */
.ps-steckbrief.wp-block-group { padding-block: clamp(48px, 7vw, 96px); }
.ps-steckbrief .ps-steckbrief__karte {
	display: grid;
	gap: 18px;
	max-width: 760px;
	padding: clamp(24px, 4vw, 40px);
	background: var(--weiss);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
}
.ps-steckbrief__karte > * { margin: 0; }
.ps-steckbrief__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ps-steckbrief__liste li { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.ps-steckbrief__liste li:last-child { border-bottom: 0; }
.ps-steckbrief__liste strong { display: inline-block; min-width: 11em; color: var(--text-strong); font-weight: 600; }

/* ---------- Seitenkopf-Muster der letzten Runde (Klasse ps-seitenkopf-muster) ---------- */
.ps-seitenkopf-muster.wp-block-cover {
	min-height: max(560px, 78svh);
	padding: calc(var(--header-h) + 40px) 0 clamp(72px, 11vh, 120px);
	background: var(--tanne-900);
	align-items: flex-end;
}
.ps-seitenkopf-muster > .wp-block-cover__background { opacity: 1 !important; background: var(--scrim-bottom) !important; }
.ps-seitenkopf-muster > .wp-block-cover__inner-container { width: 100% !important; max-width: var(--container); margin: 0 auto !important; padding: 0 var(--gutter); display: grid; gap: 14px; }
.ps-seitenkopf-muster > .wp-block-cover__inner-container > * { margin: 0; }
.ps-seitenkopf-muster .is-style-ps-dachzeile { color: var(--sonne-300); }
.ps-seitenkopf-muster h1 { max-width: 22ch; color: var(--schnee); font-weight: 300; font-size: var(--fs-display-l); line-height: 1.05; letter-spacing: var(--ls-display); }

/* Muster „Seitenkopf“: Display-Zeile ohne Zeilen-Masken blendet als Ganzes ein */
.ps-bw .ps-seitenkopf__display:not(:has(.ps-zeile)) { animation: ps-kopf-auf 1000ms var(--ease-out) 260ms both; }

/* ---------- Ergänzungen der Muster 2026 (seite-*.php) ---------- */
/* Hinweisbox (Frage ohne Bild mit Klasse ps-frage--hinweis), z. B. Stand von Passsperren */
.ps-frage.ps-frage--hinweis.wp-block-group {
	max-width: 860px;
	margin-block: clamp(32px, 5vw, 64px);
	padding: clamp(24px, 3.4vw, 40px) clamp(24px, 3.4vw, 44px);
	background: var(--leinen);
	border-left: 3px solid var(--sonne-500);
	border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.ps-frage--hinweis h2 { font-size: var(--fs-h3); }
/* Überschriften im Muster „Wort. Wort“: letztes Wort kursiv */
:is(.ps-geschichte__karte, .ps-kacheln__kopf, .ps-bildband__kopf, .ps-geschichte__kopf) :is(h2, h3) em { font-style: italic; }
/* Kopf der Kacheln, des Bildbands und der Geschichte: Abstand zur Reihe */
.ps-kacheln__kopf.wp-block-group { margin-bottom: 0; }