/*
 * Motion. Grundsätze (Motion-Audit 2026-10-24, Gewichtung Jakub › Emil › Jhey):
 * - Ein Motiv: der Kupferstrich. Wenige erzählende Momente statt flächiger Einblendung:
 *   Hero (einmal pro Aufruf), Kennzahlen zählen hoch, Portal-Vorgang läuft durch,
 *   Fortschrittslinie durch die Schritte, je Seite genau ein gestaffeltes Raster.
 * - Texte, Überschriften und Seiten-Intros stehen sofort. Eingeblendet werden nur Objekte.
 * - Übergänge dort, wo sich etwas öffnet: Dialoge, Akkordeons, mobiles Menü.
 * - Häufige Bedienung (Formular, Ortssuche, Tastatur) bewegt sich nicht.
 * - Startzustände nur unter html.motion (Inline-Skript im <head>, nur ohne "Bewegung reduzieren").
 *   Ohne JS oder mit reduzierter Bewegung ist alles sofort im Endzustand.
 * - Nur opacity, transform, filter, clip-path (und block-size für Akkordeons über ::details-content).
 */
:root {
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--copper-line: linear-gradient(90deg, var(--copper) 0%, #D9A27F 55%, var(--copper-dark) 100%);
	interpolate-size: allow-keywords;
}

/* ---------- Hero: einmal pro Seitenaufruf. Nur Kicker, Überschrift und Fokuszeile erzählen. ---------- */
@keyframes adsensio-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}
@keyframes adsensio-materialize {
	from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
	to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes adsensio-curtain {
	from { clip-path: inset(100% 0 0 0 round 160px 3px 3px 3px); }
	to { clip-path: inset(0 0 0 0 round 160px 3px 3px 3px); }
}
@keyframes adsensio-settle {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}
@keyframes adsensio-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes adsensio-draw {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.motion .hero > .hero-kicker { animation: adsensio-rise .6s var(--ease-out) .05s both; }
.motion .hero-copy > h1 { animation: adsensio-materialize .7s var(--ease-out) .12s both; }
.motion .hero-copy > .hero-focus { animation: adsensio-rise .6s var(--ease-out) .28s both; }

.motion .hero-image { animation: adsensio-curtain 1.15s var(--ease-in-out) .1s both; }
.motion .hero-image img { animation: adsensio-settle 1.6s var(--ease-out) .1s both; }
.motion .hero-image figcaption { animation: adsensio-fade .5s var(--ease-out) 1.2s both; }
@media (max-width: 1150px) {
	@keyframes adsensio-curtain {
		from { clip-path: inset(100% 0 0 0 round 110px 3px 3px 3px); }
		to { clip-path: inset(0 0 0 0 round 110px 3px 3px 3px); }
	}
}

/* Kupferstrich unter "WEG- und Mietverwaltung" – das Markenmotiv */
.focus-mark { position: relative; display: inline-block; white-space: nowrap; }
.focus-mark::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: -.12em;
	height: .16em; min-height: 3px;
	background: var(--copper-line);
	border-radius: 2px;
	transform-origin: left center;
}
.motion .focus-mark::after { animation: adsensio-draw .9s var(--ease-out) .7s both; }
@media (max-width: 550px) { .focus-mark { white-space: normal; } }

/* Ruhige Tiefe beim Scrollen (nur wo Scroll-Timelines unterstützt werden) */
@supports (animation-timeline: view()) {
	@keyframes adsensio-settle-deep {
		from { transform: scale(1.12); }
		to { transform: scale(1.05); }
	}
	@keyframes adsensio-drift {
		from { translate: 0 -2%; }
		to { translate: 0 2%; }
	}
	.motion .hero-image img {
		animation: adsensio-settle-deep 1.6s var(--ease-out) .1s both, adsensio-drift linear both;
		animation-timeline: auto, view();
		animation-range: normal, cover;
	}
}

/* ---------- Objekte einblenden (einmal). Gestaffelt nur das eine Raster je Seite. ---------- */
.motion [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
	transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
.motion [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Kennzahlen: Zahl zählt hoch, Kupferstrich darüber zeichnet sich ---------- */
.facts-band { padding-block: 46px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.fact { position: relative; padding-top: 22px; }
.fact::before {
	content: '';
	position: absolute; top: 0; left: 0;
	width: 56px; height: 3px; border-radius: 2px;
	background: var(--copper-line);
	transform-origin: left center;
}
.fact-num {
	font-size: clamp(40px, 4.2vw, 58px);
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--ink);
	margin: 0 0 12px;
	font-variant-numeric: tabular-nums;
}
.fact-num .unit { font-size: .5em; letter-spacing: 0; margin-left: .08em; color: var(--copper-dark); }
.fact-label { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0; max-width: 240px; }
.motion .facts:not(.is-counted) .fact::before { transform: scaleX(0); }
.motion .facts .fact::before { transition: transform .9s var(--ease-out); }
.motion .facts .fact:nth-child(2)::before { transition-delay: .12s; }
.motion .facts .fact:nth-child(3)::before { transition-delay: .24s; }
.motion .facts .fact:nth-child(4)::before { transition-delay: .36s; }
@media (max-width: 850px) { .facts { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; } }

/* ---------- Fortschrittslinie durch die Schritte (Verwalterwechsel, Projektablauf) ---------- */
.steps li { position: relative; }
.steps li::after {
	content: '';
	position: absolute; top: -1px; left: 0; right: 0;
	height: 3px; border-radius: 2px;
	background: var(--copper-line);
	transform-origin: left center;
	transform: scaleX(1);
}
.steps .step-number { transition: color .3s var(--ease-out); }
/* Ohne Scroll-Timelines: einmal nacheinander durchzeichnen, sobald die Liste sichtbar ist (app.js). */
.motion .steps:not(.is-drawn) li::after { transform: scaleX(0); }
.motion .steps li::after { transition: transform .55s var(--ease-in-out); }
.motion .steps li:nth-child(2)::after { transition-delay: .4s; }
.motion .steps li:nth-child(3)::after { transition-delay: .8s; }
.motion .steps li:nth-child(4)::after { transition-delay: 1.2s; }
.motion .steps li:nth-child(5)::after { transition-delay: 1.6s; }
/* Mit Scroll-Timelines: Linie folgt dem Scrollen von Schritt 01 bis 05. */
@supports (animation-timeline: view()) {
	@keyframes adsensio-fill {
		from { transform: scaleX(0); }
		to { transform: scaleX(1); }
	}
	.motion .steps { view-timeline: --adsensio-steps block; }
	.motion .steps li::after,
	.motion .steps:not(.is-drawn) li::after {
		transition: none;
		transform: scaleX(1);
		animation: adsensio-fill linear both;
		animation-timeline: --adsensio-steps;
		animation-range: cover calc(18% + var(--step, 0) * 7%) cover calc(25% + var(--step, 0) * 7%);
	}
	.steps li:nth-child(2) { --step: 1; }
	.steps li:nth-child(3) { --step: 2; }
	.steps li:nth-child(4) { --step: 3; }
	.steps li:nth-child(5) { --step: 4; }
}

/* ---------- Portal-Vorgang: Stationen laufen einmal nacheinander durch (app.js) ---------- */
.portal-timeline li { transition: opacity .35s var(--ease-out); }
.portal-timeline li::before { transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
.portal-title .status { transition: opacity .2s var(--ease-out), background-color .3s var(--ease-out), color .3s var(--ease-out); }
.motion .portal-example.is-playing .portal-timeline li:not(.is-done) { opacity: .38; }
.motion .portal-example.is-playing .portal-timeline li:not(.is-done)::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--copper); }
.portal-timeline li.is-current::before { transform: scale(1.35); }
.portal-title .status.is-swapping { opacity: 0; }
.portal-title .status[data-state="neu"] { background: #F3EBE4; color: #7A4A33; }

/* ---------- Öffnen und Schließen ---------- */
/* Dialoge: Einstieg materialisiert sich (220 ms), Ausstieg nur Fade (150 ms). */
.motion dialog {
	transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), filter .22s var(--ease-out),
		overlay .22s var(--ease-out) allow-discrete, display .22s var(--ease-out) allow-discrete;
}
.motion dialog:not([open]) { opacity: 0; transition-duration: .15s; }
@starting-style {
	.motion dialog[open] { opacity: 0; transform: translateY(10px) scale(.97); filter: blur(3px); }
}
.motion dialog::backdrop {
	transition: opacity .2s var(--ease-out), overlay .2s allow-discrete, display .2s allow-discrete;
}
.motion dialog:not([open])::backdrop { opacity: 0; }
@starting-style {
	.motion dialog[open]::backdrop { opacity: 0; }
}

/* FAQ- und Leistungs-Akkordeons: Antwort klappt weich auf (wo ::details-content unterstützt wird). */
@supports selector(::details-content) {
	.motion details.faq-item::details-content {
		block-size: 0;
		overflow: clip;
		opacity: 0;
		transition: block-size .26s var(--ease-out), opacity .22s var(--ease-out), content-visibility .26s allow-discrete;
	}
	.motion details.faq-item[open]::details-content { block-size: auto; opacity: 1; }
}

/* Mobiles Menü: 160 ms von oben */
@media (max-width: 850px) {
	.motion .navbar nav.open { transition: opacity .16s var(--ease-out), transform .16s var(--ease-out); }
	@starting-style {
		.motion .navbar nav.open { opacity: 0; transform: translateY(-6px); }
	}
}

/* ---------- Kleine Rückmeldungen ---------- */
.btn .arrow-icon,
.text-link .arrow-icon,
.region-hub .arrow-icon { transition: transform .2s var(--ease-out); }
.btn:hover .arrow-icon,
.text-link:hover .arrow-icon { transform: translate(2px, -2px); }
.btn:hover .arrow-icon[class~="arrow-back"] { transform: translateX(-2px); }
.region-hub:hover .arrow-icon { transform: translateY(3px); }
.btn:active { transform: scale(.97); transition-duration: .12s; }
.region-hub { transition: transform .3s var(--ease-out); }
@media (hover: hover) { .region-hub:hover { transform: translateY(-2px); } }
.city-links a { transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out); }

/* Kundenstimmen: Ausblenden leiser als Einblenden */
.review-content { transition: opacity .32s var(--ease-out), transform .32s var(--ease-out), filter .32s var(--ease-out); }
.review-content.is-swapping { opacity: 0; transition-duration: .18s; }
.review-content.is-entering { opacity: 0; transform: translateY(6px); filter: blur(2px); transition: none; }

/* Systemeinstellung "Bewegung reduzieren" hat immer Vorrang */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Kennzahl mit vorangestelltem "rund" */
.fact-num .unit.pre { font-size: .3em; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 .35em 0 0; font-weight: 700; vertical-align: .55em; }