/*
 * Bewegung und Micro-Interactions (alle Seiten, auch die Startseite).
 *
 * Grundsatz: Bewegung ist eine Ergänzung. Ausgangszustände wie „unsichtbar vor dem Einblenden“
 * gelten nur mit .ps-bw am <html> (JavaScript an, keine reduzierte Bewegung; gesetzt vor dem ersten
 * Rendern) und nur an Elementen, denen kopf.js bzw. seite.js eine Klasse gibt. Animiert werden
 * transform, opacity und clip-path; Farbwechsel als kurze Übergänge (140 ms) wie im Designsystem.
 * Easing ruhig: cubic-bezier(.22,.61,.36,1), keine Federn, keine Sprünge.
 */

/* ---------- Einblenden beim Scrollen (seite.js) ---------- */
.ps-bw .ps-rv {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition: opacity 800ms var(--ease-out) var(--ps-d, 0ms), transform 1000ms var(--ease-out) var(--ps-d, 0ms);
}
.ps-bw .ps-rv.ist-sichtbar { opacity: 1; transform: none; }
/* Bilder: leichtes Scale-in im Rahmen */
.ps-bw .ps-rv-bild { overflow: hidden; }
.ps-bw .ps-rv-bild img { transform: scale(1.07); transition: transform 1600ms var(--ease-out) var(--ps-d, 0ms); }
.ps-bw .ps-rv-bild.ist-sichtbar img { transform: none; }
/* Masken-Reveal (Bild öffnet sich zur Textseite hin) */
.ps-bw .ps-maske { clip-path: inset(0 100% 0 0); transition: clip-path 1300ms var(--ease-in-out) var(--ps-d, 0ms); }
.ps-bw .ps-maske--rechts { clip-path: inset(0 0 0 100%); }
.ps-bw .ps-maske img { transform: scale(1.14); transition: transform 1800ms var(--ease-out) var(--ps-d, 0ms); }
.ps-bw .ps-maske.ist-sichtbar { clip-path: inset(0 0 0 0); }
.ps-bw .ps-maske.ist-sichtbar img { transform: none; }

/* ---------- Buttons: Füllung schiebt sich herein, Pfeil wandert, Magnet (kopf.js) ---------- */
/* Gilt für die Block-Stile Sonne, Tanne, Umriss, Umriss hell und für Standard-Buttons im Inhalt. */
.wp-block-button:is(.is-style-ps-akzent, .is-style-ps-primaer, .is-style-ps-umriss, .is-style-ps-hell) .wp-block-button__link,
.ps-inhalt .wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), translate 420ms var(--ease-out), transform var(--dur-fast);
}
.wp-block-button:is(.is-style-ps-akzent, .is-style-ps-primaer, .is-style-ps-umriss, .is-style-ps-hell) .wp-block-button__link::before,
.ps-inhalt .wp-block-button:not([class*="is-style-"]) .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ps-fuellung, var(--tanne-800));
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 560ms var(--ease-out);
}
.wp-block-button:is(.is-style-ps-akzent, .is-style-ps-primaer, .is-style-ps-umriss, .is-style-ps-hell) .wp-block-button__link:is(:hover, :focus-visible)::before,
.ps-inhalt .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:is(:hover, :focus-visible)::before { transform: scaleX(1); transform-origin: left center; }
/* Die Grundfarbe bleibt beim Überfahren stehen, die Füllung bringt den Hover-Ton */
.wp-block-button.is-style-ps-akzent .wp-block-button__link.wp-element-button:is(:hover, :focus-visible) { background-color: var(--sonne-500); }
.wp-block-button.is-style-ps-primaer .wp-block-button__link.wp-element-button:is(:hover, :focus-visible) { background-color: var(--tanne-600); }
.wp-block-button:is(.is-style-ps-umriss, .is-style-ps-hell) .wp-block-button__link.wp-element-button:is(:hover, :focus-visible) { background-color: transparent; }
.ps-inhalt .wp-block-button:not([class*="is-style-"]) .wp-block-button__link.wp-element-button:is(:hover, :focus-visible) { background-color: var(--tanne-600); }
.is-style-ps-akzent .wp-block-button__link { --ps-fuellung: var(--sonne-300); }
.is-style-ps-umriss .wp-block-button__link { --ps-fuellung: var(--tanne-50); }
.is-style-ps-hell .wp-block-button__link { --ps-fuellung: rgba(252, 250, 245, .16); }
/* Textlink: die Linie zieht sich zurück und zeichnet sich neu (transform an ::after) */
.is-style-ps-textlink .wp-block-button__link { position: relative; border-bottom-color: transparent !important; }
.is-style-ps-textlink .wp-block-button__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform-origin: left center;
}
.is-style-ps-textlink .wp-block-button__link:is(:hover, :focus-visible)::after { animation: ps-strich 760ms var(--ease-out); }
@keyframes ps-strich { 0% { transform: scaleX(1); transform-origin: right center; } 45% { transform: scaleX(0); transform-origin: right center; } 46% { transform: scaleX(0); transform-origin: left center; } 100% { transform: scaleX(1); transform-origin: left center; } }
.wp-block-button__link .ps-pfeil-icon { transition: transform 420ms var(--ease-out); }
.wp-block-button__link:is(:hover, :focus-visible) .ps-pfeil-icon { transform: translateX(4px); }
.wp-block-button__link .ps-i:not(.ps-pfeil-icon) { transition: transform 420ms var(--ease-out); }
.wp-block-button__link:hover .ps-i--calendar-check { transform: rotate(-8deg); }
/* Briefumschlag („Anfragen“, 22.10.2026): hebt sich leicht wie beim Abschicken */
.wp-block-button__link:hover .ps-i--mail { transform: translate(1px, -2px) rotate(-8deg); }

/* ---------- Links: Unterstreichung zeichnet sich ---------- */
/* Fließtext: dünne Linie in Textfarbe, beim Überfahren zeichnet sich eine Linie in Sonne darüber */
:is(.ps-inhalt, .ps-start, .ps-einleitung, .ps-frage-bild, .ps-faq) p a:not(.wp-block-button__link),
:is(.ps-inhalt, .ps-start) li a:not(.wp-block-button__link) {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	background-image: linear-gradient(var(--sonne-500), var(--sonne-500));
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 0px);
	background-size: 0 2px;
	transition: color var(--dur-fast) var(--ease-out), background-size 520ms var(--ease-out), text-decoration-color var(--dur-fast);
}
:is(.ps-inhalt, .ps-start, .ps-einleitung, .ps-frage-bild, .ps-faq) p a:not(.wp-block-button__link):is(:hover, :focus-visible),
:is(.ps-inhalt, .ps-start) li a:not(.wp-block-button__link):is(:hover, :focus-visible) { background-size: 100% 2px; text-decoration-color: transparent; }
/* Einzeilige Links (Fuß, Kontakt, Overlay-Unterpunkte): Linie wächst von links (transform) */
:is(.ps-fuss__nav, .ps-fuss .ps-kontakt, .ps-fuss__bewertung, .ps-overlay__kontakt, .ps-overlay__social .ps-kontakt) a,
.ps-overlay-nav .wp-block-navigation__submenu-container a {
	position: relative;
	text-decoration: none;
}
:is(.ps-fuss__nav, .ps-fuss .ps-kontakt, .ps-fuss__bewertung, .ps-overlay__kontakt, .ps-overlay__social .ps-kontakt) a::after,
.ps-overlay-nav .wp-block-navigation__submenu-container a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--sonne-400);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 520ms var(--ease-out);
}
:is(.ps-fuss__nav, .ps-fuss .ps-kontakt, .ps-fuss__bewertung, .ps-overlay__kontakt, .ps-overlay__social .ps-kontakt) a:is(:hover, :focus-visible)::after,
.ps-overlay-nav .wp-block-navigation__submenu-container a:is(:hover, :focus-visible)::after { transform: scaleX(1); transform-origin: left center; }
/* Große Overlay-Punkte: Text rückt leicht ein */
.ps-overlay-nav .wp-block-navigation__container > li > .wp-block-navigation-item__content.wp-block-navigation-item__content { transition: color var(--dur-fast), transform 520ms var(--ease-out); }
.ps-overlay-nav .wp-block-navigation__container > li > .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { transform: translateX(10px); }

/* ---------- Karten: Lift, Schatten, Bildzoom ---------- */
:is(.ps-karte, .ps-kachel, .ps-thema, .wp-block-group.ps-karte) {
	transition: box-shadow 520ms var(--ease-out), transform 520ms var(--ease-out);
}
:is(.ps-karte, .ps-kachel):is(:hover, :focus-within) { box-shadow: var(--shadow-md); transform: translateY(-4px); }
:is(.ps-karte, .ps-kachel, .ps-bildband, .ps-frage-bild, .ps-geschichte) img { transition: transform var(--dur-image) var(--ease-out); }
:is(.ps-karte, .ps-kachel):is(:hover, :focus-within) img { transform: scale(1.05); }
/* Bilder mit Link im Inhalt (auch alte Getwid-Seiten) */
.ps-inhalt :is(figure, .wp-block-image) a { display: block; overflow: hidden; }
.ps-inhalt :is(figure, .wp-block-image) a img { transition: transform var(--dur-image) var(--ease-out); }
.ps-inhalt :is(figure, .wp-block-image) a:is(:hover, :focus-visible) img { transform: scale(1.04); }

/* ---------- Kopf: kompakter beim Scrollen, weg beim Herunter-, zurück beim Hochscrollen ---------- */
.ps-kopf-bereich { transition: transform 520ms var(--ease-out); }
.ps-kopf-bereich.ist-weg { transform: translate3d(0, -110%, 0); }
.ps-kopf { transition: transform 420ms var(--ease-out); }
.ps-kopf .ps-kopf__innen { transition: transform 420ms var(--ease-out); }
.ps-kopf.ist-kompakt { transform: translate3d(0, -14px, 0); }
.ps-kopf.ist-kompakt .ps-kopf__innen { transform: translate3d(0, 7px, 0); }
/* Logo (22.10.2026): ganz oben groß (Layout-Größe --ps-logo-h, kopf.css), auf den ersten 120 px Scrollweg
   stufenlos kleiner bis zur bisherigen Größe; beim Hochscrollen bis ganz oben wächst es wieder. kopf.js setzt
   --ps-logo-p am Kopf (0 … 1, weich an Anfang und Ende). Skaliert wird der Logo-Block (Bild, Link und
   Fokusrahmen gemeinsam) von der linken Mitte aus; nur transform, daher kein Layout-Versatz. Der kurze
   Übergang glättet Sprünge (Pos1/Ende, Anker) und gilt erst nach dem ersten Takt (ist-bereit), damit das
   Logo beim Laden mitten auf der Seite nicht sichtbar schrumpft. Ohne JavaScript bleibt es groß. */
.ps-kopf .ps-kopf__logo.wp-block-site-logo {
	transform-origin: left center;
	transform: scale(calc(1 - (1 - var(--ps-logo-klein)) * var(--ps-logo-p, 0)));
}
.ps-kopf.ist-bereit .ps-kopf__logo.wp-block-site-logo { transition: transform 180ms var(--ease-out); }
/* Menü-Overlay: Logo und Kopfzeile wie der Kopf im Moment des Öffnens (kein Sprung): Logo-Höhe aus
   --ps-logo-p, kompakte Kopfzeile, wenn der Kopf kompakt ist. */
html.ps-js .ps-overlay__logo.wp-block-site-logo img { height: calc(var(--ps-logo-h) * (1 - (1 - var(--ps-logo-klein)) * var(--ps-logo-p, 0))); }
.ps-kopf.ist-kompakt .ps-overlay__kopf.wp-block-group { height: calc(var(--ps-kopf-h) - 14px); }
/* Solange das Menü-Overlay offen ist: keine Transformation (sonst wäre das Overlay an den Kopf gebunden) */
html.ps-menue-offen :is(.ps-kopf-bereich, .ps-kopf, .ps-kopf__innen, .ps-kopf__aktionen, .ps-menueknopf, .ps-menueknopf *) { transform: none !important; translate: none !important; transition: none !important; }
/* … dabei bleibt das Logo im kompakten Kopf, wo es war (gleicht das Zurücksetzen von −14 px + 7 px aus) */
html.ps-menue-offen .ps-kopf.ist-kompakt .ps-kopf__logo.wp-block-site-logo { translate: 0 -7px; transition: none; }

/* Menü-Knopf: Wort „Menü“ bleibt sichtbar; der Sonnenkreis atmet, die Linien ordnen sich */
.ps-menueknopf .wp-block-navigation__responsive-container-open { position: relative; transition: border-color var(--dur-fast), color var(--dur-base), translate 420ms var(--ease-out); }
.ps-menueknopf .wp-block-navigation__responsive-container-open::after { transition: transform 520ms var(--ease-out), background-size 520ms var(--ease-out); }
.ps-menueknopf .wp-block-navigation__responsive-container-open:is(:hover, :focus-visible)::after {
	transform: scale(1.08) rotate(90deg);
}
.ps-menueknopf .wp-block-navigation__responsive-container-open:active::after { transform: scale(.94) rotate(90deg); }

/* ---------- Lesefortschritt (lange Unterseiten) und Nach oben ---------- */
.ps-fortschritt {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 70;
	height: 2px;
	pointer-events: none;
}
body.admin-bar .ps-fortschritt { top: var(--wp-admin--admin-bar--height, 32px); }
.ps-fortschritt > span {
	display: block;
	height: 100%;
	background: var(--sonne-500);
	transform: scaleX(var(--ps-fortschritt, 0));
	transform-origin: left center;
}
@supports (animation-timeline: scroll()) {
	.ps-fortschritt > span { animation: ps-fortschritt linear both; animation-timeline: scroll(root block); }
}
@keyframes ps-fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.ps-nachoben {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 55;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1.5px solid rgba(252, 250, 245, .24);
	border-radius: var(--radius-pill);
	background: var(--tanne-900);
	color: var(--sonne-300);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	pointer-events: none;
	transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out), translate 420ms var(--ease-out), border-color var(--dur-fast);
}
.ps-nachoben.ist-sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.ps-nachoben:hover { border-color: var(--sonne-500); }
.ps-nachoben svg { transition: transform 420ms var(--ease-out); }
.ps-nachoben:hover svg { transform: translateY(-3px); }
@media (max-width: 899px) { .ps-nachoben { bottom: calc(84px + env(safe-area-inset-bottom)); } }
html.ps-menue-offen .ps-nachoben { opacity: 0; pointer-events: none; }

/* ---------- Häufige Fragen: weiches Auf- und Zuklappen (Höhe) ---------- */
/* Moderne Browser: ::details-content mit interpolierbarer Höhe; sonst übernimmt seite.js */
@supports selector(::details-content) {
	:root { interpolate-size: allow-keywords; }
	.ps-bw details.wp-block-details::details-content {
		block-size: 0;
		overflow-y: clip;
		transition: block-size 520ms var(--ease-out), content-visibility 520ms allow-discrete;
	}
	.ps-bw details.wp-block-details[open]::details-content { block-size: auto; }
}
details.wp-block-details > summary::after { transition: transform 420ms var(--ease-out); }
.ps-bw details.wp-block-details[open] > :not(summary) { animation: ps-faq-text 520ms var(--ease-out) both; }
@keyframes ps-faq-text { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }

/* ---------- Fokus: immer sichtbar ---------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--sonne-500);
	outline-offset: 3px;
	border-radius: 2px;
}
:is(.wp-block-cover, .ps-aufruf, .ps-fuss, .ps-overlay, .ps-zitat--dunkel) :where(a, button, summary):focus-visible { outline-color: var(--sonne-300); }
.wp-block-button__link:focus-visible { outline-offset: 3px; }
:is(.ps-karte, .ps-kachel):focus-within { outline: 2px solid var(--sonne-500); outline-offset: 3px; }
:is(.ps-karte, .ps-kachel):focus-within a:focus-visible { outline: none; }

/* ---------- Seitenwechsel: weiche Übergänge (Cross-Document View Transitions) ---------- */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	.ps-seitenkopf.wp-block-cover { view-transition-name: ps-kopfbild; }
	.ps-kopf-bereich { view-transition-name: ps-kopf; }
	::view-transition-old(root) { animation: 260ms var(--ease-out) both ps-vt-aus; }
	::view-transition-new(root) { animation: 420ms var(--ease-out) 60ms both ps-vt-ein; }
	::view-transition-group(ps-kopfbild) { animation-duration: 640ms; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
	::view-transition-old(ps-kopfbild), ::view-transition-new(ps-kopfbild) { height: 100%; object-fit: cover; overflow: clip; }
	::view-transition-group(ps-kopf) { animation-duration: 0s; }
}
@keyframes ps-vt-aus { to { opacity: 0; } }
@keyframes ps-vt-ein { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

/* ---------- Reduzierte Bewegung: alles ruhig, alle Inhalte sichtbar ---------- */
@media (prefers-reduced-motion: reduce) {
	.ps-rv, .ps-maske, .ps-rv-bild img, .ps-maske img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.ps-kopf-bereich.ist-weg { transform: none; }
	.ps-kopf.ist-kompakt, .ps-kopf.ist-kompakt .ps-kopf__innen, .ps-kopf.ist-kompakt .ps-logo img { transform: none; }
	/* Logo: nur der Größenwechsel (kopf.js schaltet --ps-logo-p bei 60 px von 0 auf 1), kein Übergang;
	   gescrollt so groß wie bisher bei reduzierter Bewegung (Kopf bleibt 84 px hoch, nicht kompakt) */
	.ps-kopf .ps-kopf__logo.wp-block-site-logo { transform: scale(calc(1 - (1 - var(--ps-logo-klein-ruhig)) * var(--ps-logo-p, 0))); transition: none !important; }
	html.ps-js .ps-overlay__logo.wp-block-site-logo img { height: calc(var(--ps-logo-h) * (1 - (1 - var(--ps-logo-klein-ruhig)) * var(--ps-logo-p, 0))); }
	.ps-kopf.ist-kompakt .ps-overlay__kopf.wp-block-group { height: var(--ps-kopf-h); }
	html.ps-menue-offen .ps-kopf.ist-kompakt .ps-kopf__logo.wp-block-site-logo { translate: none; }
	:is(.ps-karte, .ps-kachel):is(:hover, :focus-within), :is(.ps-karte, .ps-kachel):is(:hover, :focus-within) img { transform: none; }
	.wp-block-button__link.wp-element-button::before { transition: none; }
}