/*
 * Renos Wandel: Effekte und Bewegung
 *
 * Grundregeln:
 * - Ohne JavaScript ist alles sofort sichtbar. Versteckte Startzustände gelten nur mit der Klasse .rw-js am <html>.
 * - Wer im System „Bewegung reduzieren“ eingestellt hat, bekommt die ruhige Version ohne Animationen.
 * - Effekte abschalten pro Block: Zusätzliche CSS-Klasse „rw-statisch“ (Block → Erweitert).
 */

/* ---------- Kopfbereich: mitlaufend, kompakt beim Scrollen, mobil ausblendbar ---------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	transition: top .35s ease;
}
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part { top: 0; }
}
.rw-header { transition: padding .35s ease, box-shadow .35s ease; }
.rw-logo img { transition: height .35s ease; }
.rw-kopf-kompakt .rw-header {
	padding-top: .6rem;
	padding-bottom: .6rem;
	box-shadow: 0 14px 30px -24px rgba(12, 34, 54, .5);
}
.rw-kopf-kompakt .rw-header .rw-logo img { height: 38px; }
@media (max-width: 899px) {
	.rw-kopf-kompakt .rw-header .rw-logo img { height: 32px; }
	.rw-kopf-weg .wp-site-blocks > header.wp-block-template-part { top: calc(-1 * var(--rw-kopf-hoehe, 120px) - 8px); }
}

/* Sprungziele nicht unter dem mitlaufenden Kopf verstecken */
:where([id]) { scroll-margin-top: 110px; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }

	/* ---------- Seitenwechsel als weiche Überblendung ---------- */
	@view-transition { navigation: auto; }
	.wp-site-blocks > header.wp-block-template-part { view-transition-name: rw-kopf; }
	::view-transition-old(root),
	::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .65, .3, 1); }

	/* ---------- Einblenden beim Scrollen ---------- */
	.rw-js [data-rw-einblenden] {
		opacity: 0;
		translate: 0 24px;
		transition:
			opacity .8s cubic-bezier(.2, .65, .3, 1) var(--rw-verzoegerung, 0s),
			translate .8s cubic-bezier(.2, .65, .3, 1) var(--rw-verzoegerung, 0s);
	}
	.rw-js [data-rw-einblenden].rw-sichtbar { opacity: 1; translate: none; }
	.rw-js [data-rw-einblenden].rw-sofort { transition: none; }

	/* Hero: Inhalte fließen beim Laden nacheinander ein */
	.rw-js .rw-hero .wp-block-column > *,
	.rw-js .rw-hero > .alignwide > * {
		animation: rw-hero-ein .9s cubic-bezier(.2, .65, .3, 1) both;
	}
	.rw-js .rw-hero :is(.wp-block-column, .alignwide) > :nth-child(2) { animation-delay: .08s; }
	.rw-js .rw-hero :is(.wp-block-column, .alignwide) > :nth-child(3) { animation-delay: .16s; }
	.rw-js .rw-hero :is(.wp-block-column, .alignwide) > :nth-child(4) { animation-delay: .24s; }
	.rw-js .rw-hero :is(.wp-block-column, .alignwide) > :nth-child(n+5) { animation-delay: .32s; }
}
@keyframes rw-hero-ein { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }

/* ---------- Karten ---------- */
.is-style-karte,
.is-style-karte-rahmen,
.is-style-karte-dunkel {
	position: relative;
	transition: transform .45s cubic-bezier(.2, .65, .3, 1), box-shadow .45s ease, border-color .45s ease;
}
.is-style-karte::before,
.is-style-karte-rahmen::before,
.is-style-karte-dunkel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--wp--preset--color--strom);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .55s cubic-bezier(.65, 0, .35, 1);
	pointer-events: none;
	border-radius: var(--wp--custom--radius--karte) var(--wp--custom--radius--karte) 0 0;
	z-index: 2;
}
.is-style-karte-dunkel::before { background: var(--wp--preset--color--spiegel); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.is-style-karte:hover,
	.is-style-karte-rahmen:hover,
	.is-style-karte-dunkel:hover {
		transform: translateY(-4px);
		box-shadow: var(--wp--preset--shadow--tief);
	}
	.is-style-karte-rahmen:hover { border-color: transparent; }
	.is-style-karte:hover::before,
	.is-style-karte-rahmen:hover::before,
	.is-style-karte-dunkel:hover::before { transform: scaleX(1); }
	.is-style-karte:hover .is-style-symbol img,
	.is-style-karte-rahmen:hover .is-style-symbol img { transform: translateY(-2px); }
}
.is-style-symbol img { transition: transform .45s cubic-bezier(.2, .65, .3, 1); }
.rw-klickbar { cursor: pointer; }

/* Textlink-Pfeil rückt nach rechts */
.rw-pfeil { display: inline-block; transition: transform .3s cubic-bezier(.2, .65, .3, 1); }
@media (prefers-reduced-motion: no-preference) {
	a:hover .rw-pfeil,
	a:focus-visible .rw-pfeil,
	.rw-klickbar:hover .rw-pfeil { transform: translateX(6px); }
}

/* ---------- Wachsende Ablauflinie (Schritte und Zeitstrahl) ---------- */
.is-style-schritt { position: relative; }
.rw-js .is-style-schritt::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--strom);
	transform: scaleX(var(--rw-linie-wert, 0));
	transform-origin: left center;
}
:is(.is-style-section-tiefe, .is-style-section-strom) .is-style-schritt::before { background: var(--wp--preset--color--spiegel); }
.rw-js .is-style-zeitstrahl > .is-style-schritt::before { top: 0; }
.rw-js .is-style-zeitstrahl > .is-style-schritt::after { transition: background-color .4s ease, color .4s ease, scale .4s cubic-bezier(.2, .65, .3, 1); }
.rw-js .is-style-zeitstrahl > .is-style-schritt.rw-erreicht::after { background: var(--wp--preset--color--strom); color: #fff; }
:is(.is-style-section-tiefe, .is-style-section-strom) .is-style-zeitstrahl > .is-style-schritt.rw-erreicht::after { background: var(--wp--preset--color--spiegel); color: var(--wp--preset--color--tiefe); }
@media (prefers-reduced-motion: no-preference) {
	.rw-js .is-style-zeitstrahl > .is-style-schritt:not(.rw-erreicht)::after { scale: .82; }
	.rw-js .is-style-schritt:not(.rw-erreicht) > .is-style-schrittnummer { opacity: .35; }
	.rw-js .is-style-schritt > .is-style-schrittnummer { transition: opacity .5s ease; }
}

/* ---------- Kennzahlen zählen hoch ---------- */
.is-style-kennzahl { min-width: 1ch; }

/* ---------- Strömungslinien in Bewegung ---------- */
.rw-stroemung-svg path { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
	.rw-stroemung-svg .rw-welle {
		animation: rw-wogen var(--rw-dauer, 14s) ease-in-out var(--rw-start, 0s) infinite alternate;
	}
	.rw-stroemung-svg .rw-glanz {
		stroke: #CFE4F6;
		stroke-width: 1.6;
		stroke-dasharray: 140 2600;
		stroke-dashoffset: 2740;
		animation: rw-glanz var(--rw-dauer, 9s) linear var(--rw-start, 0s) infinite;
	}
}
.rw-stroemung-svg .rw-glanz { stroke-opacity: .6; }
@media (prefers-reduced-motion: reduce) {
	.rw-stroemung-svg .rw-glanz { display: none; }
}
@keyframes rw-wogen {
	0% { transform: translate(0, 0); }
	100% { transform: translate(-28px, var(--rw-hub, 10px)); }
}
@keyframes rw-glanz {
	to { stroke-dashoffset: 0; }
}

/* ---------- Mobile Kontaktleiste ---------- */
.rw-kontaktleiste { display: none; }
@media (max-width: 781px) {
	.rw-kontaktleiste:not([hidden]) {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
		background: var(--wp--preset--color--tiefe);
		color: var(--wp--preset--color--hell-auf-dunkel);
		box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .5);
		transform: translateY(110%);
		transition: transform .45s cubic-bezier(.2, .65, .3, 1);
	}
	.rw-kontaktleiste.rw-sichtbar { transform: none; }
	.rw-kontaktleiste.rw-sichtbar ~ .rw-nach-oben { bottom: 5.5rem; }
}
.rw-kontaktleiste__text { margin: 0; font-size: .875rem; line-height: 1.3; }
.rw-kontaktleiste__text strong { display: block; font-family: var(--wp--preset--font-family--manrope); font-size: 1rem; color: #fff; }
.rw-kontaktleiste__button {
	flex: 0 0 auto;
	background: var(--wp--preset--color--strom);
	color: #fff;
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: .75rem 1.15rem;
	border-radius: 3px;
}
.rw-kontaktleiste__button:hover,
.rw-kontaktleiste__button:focus-visible { background: #fff; color: var(--wp--preset--color--tiefe); }

/* Bei geöffnetem Menü stören Leiste und Pfeil nicht */
.has-modal-open :is(.rw-kontaktleiste, .rw-nach-oben) { visibility: hidden; }

/* ---------- Nach oben ---------- */
.rw-nach-oben {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 89;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--tiefe);
	color: #fff;
	box-shadow: var(--wp--preset--shadow--sanft);
	opacity: 0;
	translate: 0 12px;
	pointer-events: none;
	transition: opacity .35s ease, translate .35s ease, background-color .2s ease, bottom .45s cubic-bezier(.2, .65, .3, 1);
}
.rw-nach-oben[hidden] { display: none; }
.rw-nach-oben.rw-sichtbar { opacity: 1; translate: none; pointer-events: auto; }
.rw-nach-oben:hover { background: var(--wp--preset--color--strom); color: #fff; }

/* ---------- Weiche FAQs ---------- */
.wp-block-details.rw-faq-bewegt { overflow: hidden; }

/* ---------- Reiter: weicher Wechsel ---------- */
@media (prefers-reduced-motion: no-preference) {
	.rw-reiter-aktiv > details[open] > :not(summary) { animation: rw-reiter-ein .45s cubic-bezier(.2, .65, .3, 1) both; }
}
@keyframes rw-reiter-ein { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }