/*
 * OuK Brand Motion
 * Behaviour-only CSS for the homepage header.
 *
 * IMPORTANT:
 * Mega-menu panel geometry, imagery, spacing and static typography live in
 * Elementor V4 Atomic styles. This file intentionally contains no panel-specific
 * desktop layout rules.
 */

/* ------------------------------------------------------------
 * 1. Homepage logo entrance
 * ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.home .elementor-location-header .s-header-logo-desktop #ouk-symbol,
	.home .elementor-location-header .s-header-logo-desktop #ouk-wordmark,
	.home .elementor-location-header .s-header-logo-desktop #ouk-logo > g > g > g:nth-child(2) {
		opacity: 0;
		animation: ouk-logo-fade-in 420ms cubic-bezier(0.22, 1, 0.36, 1) 40ms both;
	}

	.home .elementor-location-header .s-header-logo-desktop #ouk-claim {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		animation: ouk-logo-claim-reveal 2600ms cubic-bezier(0.45, 0, 0.2, 1) 220ms both;
		will-change: clip-path, opacity;
	}
}

@keyframes ouk-logo-fade-in {
	from {
		opacity: 0;
		transform: translateY(1px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ouk-logo-claim-reveal {
	0% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
	}
	12% { opacity: 1; }
	100% {
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
}

/* Der Schriftzug im Logo wird von einer 2,6 s langen clip-path-Animation geschrieben. Das Neuzeichnen konkurriert in Firefox mit den Bildern des Heros (Messung 15. Oktober 2026): Sobald der Besucher zu rollen beginnt, setzt das Hero-Skript (snippet 261) die Klasse ouk-claim-fertig am html-Element, und der Schriftzug steht sofort fertig da. Aussehen im Endzustand unveraendert. */
@media (prefers-reduced-motion: no-preference) {
	html.ouk-claim-fertig .home .elementor-location-header .s-header-logo-desktop #ouk-claim {
		animation: none;
		opacity: 1;
		clip-path: none;
		will-change: auto;
	}
}

/* ------------------------------------------------------------
 * 2. Elementor Pro Mega Menu host: horizontal panel correction
 * ------------------------------------------------------------ */
.elementor-element-mega-menu-probe .e-n-menu-content > .e-con {
	margin-inline-start: var(--ouk-mega-shift-x, 0px);
}

/* ------------------------------------------------------------
 * 3. Legacy header compatibility
 * Header template 118 is assigned only to the front page; .home is intentional.
 * Header layout, logo/CTA sizing and the 940px switch live in native Elementor
 * responsive styles. V4 has no white-space control; the legacy menu has no
 * heading-wrap control or separate tablet title minimum-height control.
 * ------------------------------------------------------------ */
@media (min-width: 941px) and (max-width: 1280px) {
	.home .elementor-element-mega-menu-probe .e-n-menu-heading {
		flex-wrap: nowrap;
	}

	.home .elementor-element-mega-menu-probe .e-n-menu-title-container > span,
	.home .s-header-cta-desktop {
		white-space: nowrap;
	}
}

@media (min-width: 941px) and (max-width: 1024px) {
	.home .elementor-element-mega-menu-probe .e-n-menu-title {
		min-height: 44px;
	}
}

/* ------------------------------------------------------------
 * 4. Signal-red active/hover marker on top-level menu text
 * Pseudo-element is intentional: Elementor's native controls do not expose this
 * exact text-proximity marker independently from the 44px target box.
 * ------------------------------------------------------------ */
.elementor-location-header .elementor-element-mega-menu-probe .e-n-menu-title {
	border-bottom-width: 0 !important;
}

.elementor-location-header .elementor-element-mega-menu-probe .e-n-menu-title-text {
	position: relative;
	text-decoration: none !important;
}

.elementor-location-header .elementor-element-mega-menu-probe .e-n-menu-title-text::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -3px;
	height: 2px;
	background: var(--signal-red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 160ms ease;
	pointer-events: none;
}

.elementor-location-header .elementor-element-mega-menu-probe .e-n-menu-title:hover .e-n-menu-title-text::after,
.elementor-location-header .elementor-element-mega-menu-probe .e-n-menu-title:focus-within .e-n-menu-title-text::after,
.elementor-location-header .elementor-element-mega-menu-probe .e-n-menu-title:has(.e-n-menu-dropdown-icon[aria-expanded="true"]) .e-n-menu-title-text::after,
.elementor-location-header .elementor-element-mega-menu-probe .e-n-menu-title:has(a[aria-current]) .e-n-menu-title-text::after {
	transform: scaleX(1);
}

/* Eintrag der aktuellen Seite in der Tafel und im Handy-Menü: dieselbe Farbe wie beim Überfahren
 * (mega-menu.js setzt aria-current, Auftrag Andrej 11.10.2026). */
.elementor-location-header .mega-link:has(a[aria-current="page"]),
#off-canvas-mobile-offcanvas .mega-link:has(a[aria-current="page"]) {
	color: var(--signal-red);
	border-color: var(--signal-red);
}

/* Desktop top navigation: a very small point-specific scale lift remains custom
 * because the legacy Mega Menu can only transform the complete widget natively. */
@media (prefers-reduced-motion: no-preference) {
	.elementor-location-header .elementor-element-mega-menu-probe .e-n-menu-title-text {
		display: inline-block;
		transform: scale(1);
		transform-origin: center center;
		transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.elementor-location-header .elementor-element-mega-menu-probe .e-n-menu-title:hover .e-n-menu-title-text,
	.elementor-location-header .elementor-element-mega-menu-probe .e-n-menu-title:has(.e-n-menu-dropdown-icon[aria-expanded="true"]) .e-n-menu-title-text {
		transform: scale(1.035);
	}
}

/* Footer marker uses the same semantic red line. */
.elementor-location-footer a.footer-nav-link {
	border-bottom-width: 0 !important;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-skip-ink: auto;
	transition: color 160ms ease, text-decoration-color 160ms ease;
}

.elementor-location-footer a.footer-nav-link:hover,
.elementor-location-footer a.footer-nav-link:focus-visible {
	text-decoration-color: var(--signal-red);
}

/* ------------------------------------------------------------
 * 5. Navigation compatibility and accessibility
 * Hover/cursor/mobile spacing and button focus live in Global Classes.
 * ------------------------------------------------------------ */
/* Atomic paragraphs keep their Global Class on the outer span.
 * Forward keyboard focus styling to the inner link; buttons use the native
 * nav-focus-visible state directly. */
.elementor-location-header .nav-focus-visible > a:focus-visible {
	outline: 2px solid var(--precision-blue);
	outline-offset: 2px;
}

.elementor-location-header [data-id^="mobile-panel-"][hidden] {
	display: none !important;
}

/* ------------------------------------------------------------
 * 6. Off-canvas open state
 * JS only adds/removes .is-open and ARIA attributes. The normal drawer structure,
 * links, groups and typography remain Elementor V4 Atomic elements/classes.
 * ------------------------------------------------------------ */
@media (max-width: 940px) {
	.elementor-location-header [data-id^="mobile-section-"].is-open {
		display: grid !important;
		grid-template-columns: 40% 60% !important;
		column-gap: 0 !important;
		align-items: start;
	}

	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-row-"] {
		grid-column: 1 !important;
		width: 100% !important;
		min-width: 0;
		position: relative;
		/* Andrej 22.10.2026: Das Minus steht direkt hinter dem Gruppennamen statt frei am Spaltenrand. */
		display: flex !important;
		align-items: center;
		gap: 2px;
	}

	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-panel-"] {
		grid-column: 2 !important;
		width: 100% !important;
		min-width: 0;
		padding-inline-start: 14px !important;
	}

	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-row-"] [data-id^="mobile-link-"],
	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-row-"] [data-id^="mobile-link-"] > a,
	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-row-"] [data-id^="mobile-link-"] .e-paragraph-link-base {
		display: block !important;
		flex: 0 1 auto;
		min-width: min-content;
		max-width: none;
		font-size: 14px !important;
		line-height: 1.08 !important;
		font-weight: 600;
		letter-spacing: 0.035em;
		text-transform: uppercase;
		white-space: normal !important;
		hyphens: manual;
		word-break: normal;
		overflow-wrap: normal;
		padding-block: 12px !important;
	}

	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-row-"] [data-id^="mobile-toggle-"] {
		position: static !important;
		flex: 0 0 auto;
		justify-content: flex-start !important;
		padding-inline: 6px 0 !important;
		z-index: 2;
		width: 44px !important;
		min-height: 44px !important;
		font-size: 1rem !important;
	}
}


/* 6a. Handy (bis 480 px, Andrej 22.10.2026): Links bleibt der Gruppenname, rechts die Unterpunkte. Damit rechts Platz bleibt, steht der Name gedreht (von unten nach oben zu lesen) in einer schmalen Spalte.
 * Andrej 23.10.2026: Das Minus steht genau dort, wo zugeklappt das Plus stand (rechts oben in der Gruppe). Dafuer gibt die Zeile ihre Kinder ans Raster ab (display: contents); der gedrehte Name klebt wie bisher oben (sticky), das Minus liegt rechts ueber der ersten Zeile der Unterpunkte. */
@media (max-width: 480px) {
	.elementor-location-header [data-id^="mobile-section-"].is-open {
		grid-template-columns: 3rem minmax(0, 1fr) !important;
	}

	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-row-"] {
		display: contents !important;
	}

	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-panel-"] {
		grid-row: 1;
	}

	/* Minus = Lage des Plus: 10 px unter der Gruppenoberkante, 10 px vor dem rechten Rand (Innenabstand der zugeklappten Zeile), gleiche Schriftgroesse wie die Rolle mobile-nav-toggle. */
	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-row-"] [data-id^="mobile-toggle-"] {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		align-self: start;
		position: relative !important;
		margin-block-start: 10px;
		margin-inline-end: 10px;
		justify-content: center !important;
		padding-inline: 0 !important;
		font-size: 1.25rem !important;
	}

	/* Erste Zeile rechts (Gruppenschild, IMMO.FM-Einleitung bzw. erster Link in Gruppen ohne Schild wie Immobilienkauf) laeuft nicht unter das Minus. */
	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-panel-"] > p:first-child,
	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-panel-"] > :first-child > .mega-group-label:first-child,
	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-panel-"] > .mega-link:first-child > a {
		padding-inline-end: 44px;
	}

	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-row-"] [data-id^="mobile-link-"] {
		grid-column: 1;
		grid-row: 1;
		justify-self: center;
		position: sticky;
		top: 0;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		white-space: nowrap !important;
		padding-block: 0 !important;
		padding-inline: 0 !important;
	}

	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-row-"] [data-id^="mobile-link-"] > a,
	.elementor-location-header [data-id^="mobile-section-"].is-open > [data-id^="mobile-row-"] [data-id^="mobile-link-"] .e-paragraph-link-base {
		white-space: nowrap !important;
		padding-block: var(--space-xs) !important;
		hyphens: none;
		/* Tippflaeche mindestens 44 px breit (im gedrehten Text ist block die Breite) */
		min-block-size: 44px;
		box-sizing: border-box;
	}
}

/* 7. Mobile drawer viewport discipline.
 * The CTA stays visible; only the navigation list scrolls when an opened
 * disclosure becomes taller than the available viewport. */
@media (max-width: 940px) {
	.elementor-location-header .s-mobile-offcanvas-panel {
		height: 100vh !important;
		height: 100dvh !important;
		min-height: 100vh !important;
		min-height: 100dvh !important;
		max-height: 100dvh !important;
		overflow: hidden !important;
		gap: 10px !important;
		padding-block-start: 16px !important;
		padding-block-end: max(12px, env(safe-area-inset-bottom)) !important;
	}

	.elementor-location-header .s-mobile-nav-top {
		flex: 0 0 auto;
	}

	.elementor-location-header .s-mobile-nav-main {
		flex: 1 1 auto;
		min-height: 0;
		margin-block-start: 6px !important;
		margin-block-end: 8px !important;
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.elementor-location-header [data-id^="mobile-section-"]:not(.is-open) > [data-id^="mobile-row-"] {
		min-height: 58px !important;
	}

	.elementor-location-header [data-id^="mobile-section-"]:not(.is-open) [data-id^="mobile-link-"] {
		padding-block: 8px !important;
	}

	.elementor-location-header .s-mobile-nav-cta {
		flex: 0 0 auto;
		min-height: 48px;
		margin-top: 0 !important;
	}
}


/* 8. Mobile main-navigation entrance.
 * Elementor V4 4.2.4 has no "off-canvas opened" trigger. The tiny JS bridge
 * above adds this class from Elementor Pro's own off-canvas event. Motion stays
 * CSS-only and affects only opacity/transform. */
@media (max-width: 940px) and (prefers-reduced-motion: no-preference) {
	.elementor-location-header #off-canvas-mobile-offcanvas.ouk-main-menu-entering [data-id^="mobile-row-"] {
		opacity: 0;
		animation: ouk-mobile-main-row-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.elementor-location-header #off-canvas-mobile-offcanvas.ouk-main-menu-entering [data-id="mobile-row-gutachten"] { animation-delay: 40ms; }
	.elementor-location-header #off-canvas-mobile-offcanvas.ouk-main-menu-entering [data-id="mobile-row-immobilienkauf"] { animation-delay: 115ms; }
	.elementor-location-header #off-canvas-mobile-offcanvas.ouk-main-menu-entering [data-id="mobile-row-geschaeftskunden"] { animation-delay: 190ms; }
	.elementor-location-header #off-canvas-mobile-offcanvas.ouk-main-menu-entering [data-id="mobile-row-immo-fm"] { animation-delay: 265ms; }
	.elementor-location-header #off-canvas-mobile-offcanvas.ouk-main-menu-entering [data-id="mobile-row-die-gutachter"] { animation-delay: 340ms; }
}

@keyframes ouk-mobile-main-row-in {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
 * 9. Desktop mega-menu link hover
 * Native mega-link typography, spacing and borders are preserved.
 * Only the inner link moves; the marker stays anchored to its original row.
 * The state override keeps the approved blue instead of the older red hover.
 * ------------------------------------------------------------ */
@media (min-width: 941px) {
	.elementor-location-header .elementor-element-mega-menu-probe .mega-link {
		position: relative;
	}

	.elementor-location-header .elementor-element-mega-menu-probe .mega-link:hover,
	.elementor-location-header .elementor-element-mega-menu-probe .mega-link:focus-within {
		color: var(--ouk-blue);
		border-color: var(--blueprint-mist);
	}

	.elementor-location-header .elementor-element-mega-menu-probe .mega-link::before {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		top: calc(50% - 1px);
		width: 18px;
		height: 2px;
		background: var(--signal-red);
		transform: scaleX(0);
		transform-origin: left center;
		pointer-events: none;
	}

	.elementor-location-header .elementor-element-mega-menu-probe .mega-link > a {
		display: inline-block;
		transform: translateX(0);
	}

	.elementor-location-header .elementor-element-mega-menu-probe .mega-link:hover::before,
	.elementor-location-header .elementor-element-mega-menu-probe .mega-link:focus-within::before {
		transform: scaleX(1);
	}

	.elementor-location-header .elementor-element-mega-menu-probe .mega-link:hover > a,
	.elementor-location-header .elementor-element-mega-menu-probe .mega-link:focus-within > a {
		transform: translateX(28px);
	}
}

@media (min-width: 941px) and (prefers-reduced-motion: no-preference) {
	.elementor-location-header .elementor-element-mega-menu-probe .mega-link::before,
	.elementor-location-header .elementor-element-mega-menu-probe .mega-link > a {
		transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
	}
}

/* 10. Immo.FM introduction marker.
 * Native paragraph margin aligns the text with the nested menu columns.
 * The decorative mark stays in the left gutter, centred on the first line.
 */
.elementor-location-header .s-mega-immo-explainer-v2::before {
	content: "";
	position: absolute;
	/* The marker stays in the left gutter while the paragraph begins after it.
	 * The vertical position is font-relative, so it remains centred on the line. */
	inset-inline-start: 0;
	top: calc(0.75em - 1px);
	width: 18px;
	height: 2px;
	background: var(--signal-red);
	pointer-events: none;
}


/* 11. Reusable precision text links.
 * Typography and static box geometry belong to the native precision-link class.
 * Only the inner anchor moves; the pseudo-element keeps a fixed starting edge.
 * Used for the footer's email action in all responsive variants.
 */
.elementor .precision-link > a {
	display: inline-flex;
	align-items: center;
	min-height: inherit;
	color: inherit;
	text-decoration: none;
	transform: translateX(0);
}
.elementor .precision-link::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: calc(50% - 1px);
	width: 18px;
	height: 2px;
	background: var(--signal-red);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}
.elementor .precision-link:focus-within::before {
	transform: scaleX(1);
}
.elementor .precision-link:focus-within > a {
	transform: translateX(28px);
}
.elementor .precision-link > a:focus-visible {
	outline: 2px solid var(--precision-blue);
	outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
	.elementor .precision-link:hover::before { transform: scaleX(1); }
	.elementor .precision-link:hover > a { transform: translateX(28px); }
}
@media (prefers-reduced-motion: no-preference) {
	.elementor .precision-link::before,
	.elementor .precision-link > a {
		transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
	}
}
/* Sitzt die Rolle direkt am Link (V4-Knopf ohne Hülle), gibt es kein inneres Element, das rücken kann: Dann rückt der Text
 * über den Innenabstand ein, damit der rote Strich davor steht und nicht durch das Wort läuft (9.10.2026). */
.elementor a.precision-link:focus {
	padding-inline-start: 28px;
}
.elementor a.precision-link:focus-visible {
	outline: 2px solid var(--precision-blue);
	outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
	.elementor a.precision-link:hover { padding-inline-start: 28px; }
}
@media (prefers-reduced-motion: no-preference) {
	.elementor a.precision-link {
		transition: padding-inline-start 320ms cubic-bezier(0.22, 1, 0.36, 1);
	}
}


/* ------------------------------------------------------------
 * 12. Reusable service-link row interaction
 * Elementor V4 Global Class variants style one element at a time; this shared
 * bridge connects the existing row, mark and label roles across their parent
 * hover/focus state. All appearance values remain in the global class library
 * or global colour variables; this file only expresses the parent-child state.
 * ------------------------------------------------------------ */
.elementor .linkzeile-hohe-klickflaeche .linkzeile-marke-rot {
	transform: scaleX(0);
	transform-origin: left center;
}

.elementor .linkzeile-hohe-klickflaeche:focus-visible .linkzeile-marke-rot {
	transform: scaleX(1);
}

.elementor .linkzeile-hohe-klickflaeche:focus-visible :is(.linkzeile-beschriftung, .service-link-copy-stacked) {
	transform: translateX(28px);
}

/* Auf dunklem Grund (Klassen textfarbe-*-auf-dunklem-grund) bleibt die Schrift beim Hover in ihrer Farbe; Präzisionsblau wäre dort kaum lesbar (21.10.2026, Podcast-Zeilen der Startseite). */
.elementor .linkzeile-hohe-klickflaeche:focus-visible :is(.linkzeile-beschriftung, .service-link-copy-stacked) :is(h3, h4, p):not([class*="auf-dunklem-grund"]) {
	color: var(--precision-blue);
}

@media (hover: hover) and (pointer: fine) {
	.elementor .linkzeile-hohe-klickflaeche:hover .linkzeile-marke-rot {
		transform: scaleX(1);
	}

	.elementor .linkzeile-hohe-klickflaeche:hover :is(.linkzeile-beschriftung, .service-link-copy-stacked) {
		transform: translateX(28px);
	}

	.elementor .linkzeile-hohe-klickflaeche:hover :is(.linkzeile-beschriftung, .service-link-copy-stacked) :is(h3, h4, p):not([class*="auf-dunklem-grund"]) {
		color: var(--precision-blue);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.elementor .linkzeile-hohe-klickflaeche .linkzeile-marke-rot,
	.elementor .linkzeile-hohe-klickflaeche :is(.linkzeile-beschriftung, .service-link-copy-stacked) {
		transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.elementor .linkzeile-hohe-klickflaeche :is(.linkzeile-beschriftung, .service-link-copy-stacked) :is(h3, h4, p) {
		transition: color 320ms cubic-bezier(0.22, 1, 0.36, 1);
	}
}


/* 13. Reusable service-card link interaction.
 * The existing card link roles form one right-aligned group. The small red
 * mark sits immediately before its label and appears on card hover/focus.
 * This applies to either card-width variant without a page-specific class.
 */
.elementor a:has(> .karte-inhalt-mit-innenabstand) :is(.linkzeile-mit-pfeil-weiss, .linkzeile-mit-pfeil-blau) {
	justify-content: flex-end;
	gap: 10px;
}

.elementor a:has(> .karte-inhalt-mit-innenabstand) .linkzeile-marke-rot {
	position: relative;
	inset: auto;
	flex: 0 0 18px;
	transform: scaleX(0);
	transform-origin: left center;
}

.elementor a:has(> .karte-inhalt-mit-innenabstand) .kartenkennung-klein-fett {
	width: auto;
	padding-inline-end: 0;
	transform: none;
	transition: none;
}

.elementor a:has(> .karte-inhalt-mit-innenabstand):focus-visible .linkzeile-marke-rot {
	transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
	.elementor a:has(> .karte-inhalt-mit-innenabstand):hover .linkzeile-marke-rot {
		transform: scaleX(1);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.elementor a:has(> .karte-inhalt-mit-innenabstand) .linkzeile-marke-rot {
		transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
	}
}

/* Vertikal gesteuerte Kartenstrecke: one named, reusable role composition.
 * Scroll geometry comes from the Global Classes; the central JS bridge only
 * provides travel distance and synchronizes axes. */
.elementor .lange-scrollstrecke-fuer-buehne:has(.buehne-bleibt-unter-kopfzeile-stehen .reihe-seitlich-wischbar) {
	min-height: calc(100svh + var(--ouk-scroll-travel, 0px));
}
.elementor .lange-scrollstrecke-fuer-buehne .buehne-bleibt-unter-kopfzeile-stehen .reihe-seitlich-wischbar {
	scrollbar-width: none;
	scroll-padding-inline-start: 0;
}
.elementor .lange-scrollstrecke-fuer-buehne .buehne-bleibt-unter-kopfzeile-stehen .reihe-seitlich-wischbar::-webkit-scrollbar {
	display: none;
}


/* 14. Reusable document-link row interaction.
 * Geometry, signal colour and typography live in Elementor Global Classes.
 * This bridge links the parent's hover/focus state to its child marker and label.
 */
.elementor .linkzeile-dokument > .linkzeile-dokument-marke {
	transform: scaleX(0);
	transform-origin: left center;
}
.elementor .linkzeile-dokument:focus-visible {
	outline: 2px solid var(--precision-blue);
	outline-offset: 4px;
}
.elementor .linkzeile-dokument:focus-visible > .linkzeile-dokument-marke {
	transform: scaleX(1);
}
@media (hover: hover) and (pointer: fine) {
	.elementor .linkzeile-dokument:hover > .linkzeile-dokument-marke {
		transform: scaleX(1);
	}
}
@media (prefers-reduced-motion: no-preference) {
	.elementor .linkzeile-dokument > .linkzeile-dokument-marke {
		transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
	}
}
@media (prefers-reduced-motion: reduce) {
	.elementor .linkzeile-dokument > .linkzeile-dokument-marke {
		transition: none;
	}
}

/* Split-Hero: O-Rahmen und Bildöffnung an der vom Widget gemessenen Wortfuge ausrichten.
   Die derzeit ausgelieferte Widget-CSS setzt beide noch starr auf 50 %. */
.elementor .nvm-ouk-split-hero .ouk-split-hero__o-frame {
  left: var(--ouk-split-media-seam-x, 50%);
}
.elementor .nvm-ouk-split-hero .ouk-split-hero__image {
  -webkit-mask-position: calc(var(--ouk-split-media-seam-x, 50%) - var(--ouk-split-aperture, 0px)) 50%;
  mask-position: calc(var(--ouk-split-media-seam-x, 50%) - var(--ouk-split-aperture, 0px)) 50%;
}

/* Lange Split-Hero-Wörter auf schmalen Viewports lesbar halten. */
@media (max-width: 1024px) {
  .elementor .nvm-ouk-split-hero .ouk-split-hero__word {
    font-size: clamp(4rem, 11vw, 8.5rem);
  }
}
@media (max-width: 767px) {
  .elementor .nvm-ouk-split-hero .ouk-split-hero__word {
    font-size: clamp(2.2rem, 12vw, 5rem);
  }
}

/* Bei 0 px Apertur darf Safari den SVG-Inhalt nicht aus seinem Rahmen malen.
   Der Rahmen wird erst mit beginnender Bildöffnung sichtbar und blendet am Ende aus. */
.elementor .nvm-ouk-split-hero .ouk-split-hero__o-frame {
  overflow: hidden;
  opacity: min(1, calc(var(--ouk-split-reveal, 0) * 20), calc(1 - var(--ouk-split-complete, 0)));
}

/* Schrittfolge: Zeitleiste an der Schrittliste (Rollenkomposition .buehne-bleibt-unter-kopfzeile-stehen + .inhaltsspalte-sehr-grosser-zwischenraum, Verhalten in schrittfolge.js).
   Farben nur aus den globalen Variablen; die aktive Stufe kommt über aria-current. */
.elementor .inhaltsspalte-sehr-grosser-zwischenraum[data-ouk-schrittfolge="ready"] > * {
  position: relative;
  padding-block-start: 0;
  padding-inline-start: 44px;
  border-block-start-width: 0;
}

.elementor .inhaltsspalte-sehr-grosser-zwischenraum[data-ouk-schrittfolge="ready"] > *::before {
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  inset-block-start: 14px;
  width: 1px;
  height: calc(100% + var(--ouk-step-gap, 0px));
  background: var(--blueprint-mist);
}

.elementor .inhaltsspalte-sehr-grosser-zwischenraum[data-ouk-schrittfolge="ready"] > :last-child::before {
  display: none;
}

/* Punktform einheitlich mit der Schrittlinie (Andrej 22.10.2026, #44): heller Ring mit dunkler Linie, 12 px, Strich wie die Linie
   (--measurement-stroke). Rot nur beim aktiven Schritt. Auf dunklem Grund (Texte mit textfarbe-weiss-auf-dunklem-grund) umgekehrt:
   heller Ring auf OuK-Blau, wie die Schrittlinie mit data-grund="dunkel". Mitte des Punkts auf der Mitte der 1-px-Linie (8,5 px). */
.elementor .inhaltsspalte-sehr-grosser-zwischenraum[data-ouk-schrittfolge="ready"] > *::after {
  content: "";
  position: absolute;
  inset-inline-start: 2.5px;
  inset-block-start: 8px;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: var(--measurement-stroke) solid var(--ouk-blue);
  background: var(--pure-white);
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}

.elementor .inhaltsspalte-sehr-grosser-zwischenraum[data-ouk-schrittfolge="ready"]:has(.textfarbe-weiss-auf-dunklem-grund) > :not([aria-current="step"])::after {
  border-color: var(--pure-white);
  background: var(--ouk-blue);
}

.elementor .inhaltsspalte-sehr-grosser-zwischenraum[data-ouk-schrittfolge="ready"] > [aria-current="step"]::after {
  background: var(--signal-red);
  border-color: var(--signal-red);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal-red) 16%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .elementor .inhaltsspalte-sehr-grosser-zwischenraum[data-ouk-schrittfolge="ready"] > *::after {
    transition: none;
  }
}

/* Startseite „So arbeiten wir“ (M-19, 21. Oktober 2026): Beim letzten Schritt wechselt die Fläche in rund 0,4 s von OuK-Blau auf warmes Papier (die Farbe des folgenden Abschnitts, keine harte Kante). Schrift, Zeitleisten-Linie und Punkte wechseln mit. Der Zustand data-methode-ende kommt aus schrittfolge.js; Rückwärtsscrollen setzt ihn zurück. Bewusst kein stufenloses Überblenden über die Scrollstrecke (in der Mitte wäre der Kontrast zu gering). Nur Variablen der Marke; die aktive Stufe (rot) bleibt unberührt. */
.elementor [data-id="methode-section"] {
  transition: background-color .4s ease;
}

.elementor [data-id="methode-section"] .textfarbe-weiss-auf-dunklem-grund {
  transition: color .4s ease;
}

.elementor [data-id="methode-section"] .inhaltsspalte-sehr-grosser-zwischenraum[data-ouk-schrittfolge="ready"] > *::before {
  transition: background-color .4s ease;
}

.elementor [data-id="methode-section"][data-methode-ende="1"] {
  background-color: var(--warm-paper);
}

.elementor [data-id="methode-section"][data-methode-ende="1"] .textfarbe-weiss-auf-dunklem-grund {
  color: var(--ouk-blue);
}

.elementor [data-id="methode-section"][data-methode-ende="1"] .kleine-zeile-ueber-ueberschrift-rot {
  color: var(--signal-red);
}

.elementor [data-id="methode-section"][data-methode-ende="1"] .inhaltsspalte-sehr-grosser-zwischenraum[data-ouk-schrittfolge="ready"] > *::before {
  background: color-mix(in srgb, var(--ouk-blue) 30%, transparent);
}

.elementor [data-id="methode-section"][data-methode-ende="1"] .inhaltsspalte-sehr-grosser-zwischenraum[data-ouk-schrittfolge="ready"] > :not([aria-current="step"])::after {
  background: var(--pure-white);   /* heller Ring auf warmem Papier (Punktform #44, 22.10.2026) */
  border-color: var(--ouk-blue);
}

@media (prefers-reduced-motion: reduce) {
  .elementor [data-id="methode-section"],
  .elementor [data-id="methode-section"] .textfarbe-weiss-auf-dunklem-grund,
  .elementor [data-id="methode-section"] .inhaltsspalte-sehr-grosser-zwischenraum[data-ouk-schrittfolge="ready"] > *::before {
    transition: none;
  }
}

/* Schrittfolge-Bühne auf Handy und Tablet (bis 880 px), rollenbasiert: Die Bühne (.buehne-bleibt-unter-kopfzeile-stehen) gibt ihre Kinder an das Raster ab (display:contents), damit der Bildrahmen (der Container, der .ebene-liegt-uebereinander direkt enthält) über die ganze Schrittfolge unter der Kopfzeile haftet. Gilt für jede Seite mit dieser Rollenkomposition (Startseite Methode, Gutachten Ablauf); schrittfolge.js bleibt unverändert. Ersetzt die ID-gebundene Fassung vom 2. Oktober 2026. */
@media(max-width:880px){
.buehne-bleibt-unter-kopfzeile-stehen:has(.ebene-liegt-uebereinander),.buehne-bleibt-unter-kopfzeile-stehen :is(div,section):has(.ebene-liegt-uebereinander):not(:has(> .ebene-liegt-uebereinander)){display:contents!important}
.buehne-bleibt-unter-kopfzeile-stehen :has(> .ebene-liegt-uebereinander){position:sticky!important;top:var(--header-sticky-height,72px)!important;z-index:4;width:100%!important;max-height:34svh!important;aspect-ratio:16/10}
}
/* Handy (bis 767 px): Die feste Kopfzeile ist dort nur --header-sticky-height-mobile plus 1 px Rand hoch. Das Foto rastet deshalb bündig darunter ein, ohne Lücke, und der Text scrollt unter dem Foto weg (Nutzerwunsch vom 15. Oktober 2026). Seit 15.10. auch Tablet bis 880 px (dort hat die Kopfzeile ebenfalls die Handyhöhe; vorher 7 bis 8 px Lücke). */
@media(max-width:880px){
.buehne-bleibt-unter-kopfzeile-stehen :has(> .ebene-liegt-uebereinander){top:calc(var(--header-sticky-height-mobile,4rem) + 1px)!important}
}

/* 15. Mobiler Kontaktknopf in der Kopfzeile (header-kontakt-mobil): im angehefteten Zustand ohne den oberen Ausgleich, damit er auf einer Linie mit dem Menü-Auslöser steht. Farbe, Schrift und Größe kommen aus Elementor. */
.elementor-location-header.ouk-is-sticky [data-id="header-kontakt-mobil"] {
	margin-block-start: 0;
}

/* 16. Mobiler Kontaktknopf in allen Kopfzeilen (118, 288, 854).
 * Startseite: ueber dem dunklen Hero weiss umrandet, haftend wie ueberall blau und mittig. Auf der Kontaktseite selbst entfaellt der Knopf. */
.elementor-118:not(.ouk-home-is-sticky) [data-id="header-kontakt-mobil"]:not(:hover):not(:focus-visible){color:var(--pure-white);border-color:var(--pure-white);}
.elementor-118.ouk-home-is-sticky [data-id="header-kontakt-mobil"]{align-self:center;margin-block:0;}
body.page-id-791 .elementor-location-header [data-id="header-kontakt-mobil"]{display:none;}

/* ------------------------------------------------------------
 * Scrollgebundene Bewegungen für Global Classes.
 * Elementor schachtelt den CSS-Zusatz einer Klasse; @keyframes sind dort ungültig und stehen deshalb hier.
 * Genutzt von der Rolle `ansprechpartner` (Verkaufsseite). Nur transform und opacity, kein Skript.
 * ------------------------------------------------------------ */
@keyframes ouk-foto-tritt-zurueck{from{transform:scale(2.1)}to{transform:scale(1)}}
@keyframes ouk-satz-bekommt-platz{from{transform:translateX(12.1rem) scale(.74)}to{transform:none}}
@keyframes ouk-erscheint{from{opacity:0}to{opacity:1}}
/* Blogbeitrag, Rolle `beitrag-auftakt`: Titelbild fährt hinaus, Titel rückt an die Lesespalte (--weg-x rechnet die Rolle). */
@keyframes ouk-beitrag-foto-faehrt-weg{to{transform:translateX(102%)}}
@keyframes ouk-beitrag-titel-rueckt-ein{to{transform:translateX(var(--weg-x,0px))}}

/* Karte der Bauprojekte (Rolle projektkarte, Seite Die Gutachter; Freigabe Andrej 7. Oktober 2026): Punkte setzen sich. Nur die Bewegung steht hier, alles andere in der Rolle. */
@keyframes ouk-punkt-setzt-sich{from{opacity:0;translate:0 -1.1rem;scale:.4}to{opacity:1;translate:0 0;scale:1}}

/* ------------------------------------------------------------
 * Tippflächen in Kopfzeile und Footer (10. Oktober 2026, Auftrag Andrej): mindestens 44 px hoch, ohne das Aussehen zu ändern.
 * Die Fläche wächst über ein unsichtbares Pseudo-Element am Link; Größen, Abstände und Farben bleiben, wie sie in Elementor stehen.
 * Hauptpunkte am Rechner: Die Titelfläche (.e-n-menu-title) ist die Tippfläche und öffnet das Menü; sie bekommt in allen Kopfzeilen
 * 44 px Mindesthöhe (bisher nur Startseite). Der Text darin bleibt der Link zur Seite.
 * Footer-Navigation: Die Zeilen stehen im Abstand von 40 px. Mehr als 40 px Tippfläche ginge nur mit größerem Zeilenabstand,
 * also sichtbar; deshalb dort 40 px. Telefon und E-Mail sowie Impressum und Datenschutz stehen paarweise dicht übereinander
 * und wachsen jeweils nach außen.
 * ------------------------------------------------------------ */
.elementor-location-header .elementor-element-mega-menu-probe .e-n-menu-title { min-height: 44px; }
.elementor-location-header :is([data-id="header-kontakt-mobil"], [data-id="header-cta-desktop"], [data-id="header-logo-desktop"], [data-id^="mobile-link-"] > a),
.elementor-location-footer :is(a.footer-nav-link, [data-id="footer-rsp-imprint"], [data-id="footer-rsp-privacy"], [data-id="footer-rsp-phone-mobile"], [data-id="footer-rsp-email-mobile"] > a, [data-id="footer-email-tablet"] > a, [data-id="footer-email-desktop"] > a, :is([data-id="fb30009"], [data-id="footer-rsp-contact-copy"]) a[href^="tel:"]) { position: relative; }
.elementor-location-header :is([data-id="header-kontakt-mobil"], [data-id="header-cta-desktop"], [data-id="header-logo-desktop"], [data-id^="mobile-link-"] > a)::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 44px; translate: 0 -50%; }
.elementor-location-footer :is(a.footer-nav-link, [data-id="footer-rsp-imprint"], [data-id="footer-rsp-privacy"], [data-id="footer-rsp-phone-mobile"], [data-id="footer-rsp-email-mobile"] > a, [data-id="footer-email-tablet"] > a, [data-id="footer-email-desktop"] > a, :is([data-id="fb30009"], [data-id="footer-rsp-contact-copy"]) a[href^="tel:"])::after { content: ""; position: absolute; inset-inline: 0; top: calc(0px - var(--tipp-oben, 0px)); bottom: calc(0px - var(--tipp-unten, 0px)); }
/* Wie weit die Fläche über den Link hinausreicht, steht je Gruppe als Maß am Link. */
.elementor-location-footer a.footer-nav-link { --tipp-oben: 4px; --tipp-unten: 4px; }
.elementor-location-footer :is([data-id="footer-rsp-imprint"], [data-id="footer-rsp-phone-mobile"]) { --tipp-oben: 12px; }
.elementor-location-footer :is([data-id="fb30009"], [data-id="footer-rsp-contact-copy"]) a[href^="tel:"] { --tipp-oben: 20px; }
.elementor-location-footer :is([data-id="footer-rsp-privacy"], [data-id="footer-rsp-email-mobile"] > a, [data-id="footer-email-tablet"] > a, [data-id="footer-email-desktop"] > a) { --tipp-unten: 12px; }
.elementor-location-footer a.footer-nav-link[data-id="footer-rsp-nav-gutachten"] { --tipp-oben: 12px; }
.elementor-location-footer a.footer-nav-link[data-id="footer-rsp-nav-team"] { --tipp-unten: 12px; }

/* Folgenspieler (Podcast-Folge): mitlaufende Leiste am unteren Rand, Rolle folgenspieler */
@keyframes ouk-mitlaeufer-kommt{from{transform:translateY(100%)}to{transform:none}}
body.ouk-mitlaeufer-an{padding-bottom:5rem}

/* Handy-Menü: Erklärsatz der Gruppe Immo.FM mindestens 14 px (Durchsicht 11.10.2026) */
.elementor-location-header p[data-id="mobile-immo-explainer"]{font-size:.875rem}


/* Schrittlinie am Handy (Andrej 22.10.2026): Die senkrechte Linie faerbt sich beim Scrollen von oben nach unten dunkel. Gebraucht von der Rolle schrittlinie (Keyframes duerfen nicht ins Klassen-CSS). */
@keyframes ouk-linie-waechst { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Schrittlinie am Handy (Andrej 23.10.2026: „War das nicht unser Standard … bei den roten Punkten?“): Erreicht die mitwachsende Linie
   einen Punkt, füllt er sich rot wie der aktive Punkt der Schrittfolge (Farbe und Rand, ohne Lichthof). assets/schrittlinie.js setzt
   data-erreicht, nur bis 1023 px, nur mit Scroll-Zeitleiste und ohne „weniger Bewegung“. Ohne Zeitleiste (Firefox) bleibt die Linie
   durchgehend dunkel und die Punkte bleiben hell wie am Rechner. */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .elementor .schrittlinie > .schrittlinie-schritt::before { transition: background-color .3s ease, border-color .3s ease; }
  .elementor .schrittlinie > .schrittlinie-schritt[data-erreicht]::before { background: var(--signal-red); border-color: var(--signal-red); }
}

/* Schrittlinie, Variante „Belegstücke“ (Andrej 22.10.2026, Lösung B): data-form="belegstuecke" an der Rolle schrittlinie.
   Über jedem Schritt liegt als natives Bild (e-image, erstes Kind des Schritts) das Schriftstück, das nach dem Schritt vorliegt.
   Ab 1024 px stehen die Blätter mit --blatt-luft (24 px, Andrej 22.10.2026: vorher 6 px „gequetscht“) über der waagerechten Linie, darunter Vorzeile, Titel und Text (24 px unter der Linie).
   Bis 1023 px bleibt die senkrechte Linie der Rolle samt ihrer Scroll-Bewegung unverändert; von 768 bis 1023 px steht das Blatt klein rechts
   neben Vorzeile und Titel. Bis 767 px keine Blätter (Andrej 22.10.2026: am Handy „das kleine bisschen zu viel“): Die Bilder sind dort
   ausgeblendet (loading=lazy, werden also nicht geladen), die Schrittlinie sieht aus wie ohne Variante.
   Bewegung nur ab 1024 px: assets/schrittlinie.js setzt data-ablage="wartet", solange die Liste unter dem Bildschirm liegt, und beim
   Hineinscrollen einmal "liegt" (Linie zieht sich auf, Punkte, Blätter legen sich nacheinander ab). Ohne Skript, bei weniger Bewegung
   und wenn die Liste schon zu sehen ist, steht sofort der Endzustand. Drehung je Blatt über die Stellung des Schritts; Schatten aus ink. */
.elementor .schrittlinie[data-form="belegstuecke"] { --blatt: 13.25rem; --blatt-luft: var(--space-md); --blatt-klein: 5rem; }
.elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt > img {
  display: block; width: auto; max-width: 100%; height: var(--blatt); object-fit: contain; object-position: left bottom;
  transform: rotate(var(--dreh, 0deg)); transform-origin: 50% 100%;
  filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--ink) 55%, transparent)) drop-shadow(0 2px 3px color-mix(in srgb, var(--ink) 40%, transparent));
}
.elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt:nth-child(4n+1) { --dreh: -2.5deg; }
.elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt:nth-child(4n+2) { --dreh: 1.8deg; }
.elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt:nth-child(4n+3) { --dreh: -1deg; }
.elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt:nth-child(4n+4) { --dreh: -2deg; }
@media (min-width: 1024px) {
  .elementor .schrittlinie[data-form="belegstuecke"] { position: relative; border-top-width: 0; }
  .elementor .schrittlinie[data-form="belegstuecke"]::before {
    content: ""; position: absolute; left: 0; right: 0; top: calc(var(--blatt) + var(--blatt-luft)); height: var(--measurement-stroke);
    background: var(--ouk-blue); transform-origin: left center; pointer-events: none;
  }
  .elementor .schrittlinie[data-form="belegstuecke"][data-grund="dunkel"]::before { background: var(--pure-white); }
  .elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt { padding-top: 0; }
  .elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt::before { top: calc(var(--blatt) + var(--blatt-luft) + var(--measurement-stroke) / 2 - 6px); z-index: 1; }
  .elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt > img { align-self: flex-start; margin: 0 0 calc(var(--blatt-luft) + var(--measurement-stroke)) var(--space-md); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .elementor .schrittlinie[data-form="belegstuecke"] { --blatt: 11.5rem; }
}
@media (max-width: 767px) {
  .elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt > img { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); align-items: start; }
  .elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt > img {
    grid-column: 2; grid-row: 1; height: var(--blatt-klein); margin: 0 4px 0 0;
    filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--ink) 50%, transparent)) drop-shadow(0 1px 2px color-mix(in srgb, var(--ink) 35%, transparent));
  }
  .elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt > :not(img) { grid-column: 1; }
  .elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt > :not(img):last-child { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .elementor .schrittlinie[data-form="belegstuecke"] { --blatt-klein: 6rem; }
  /* Tablet: genug Breite, das Blatt steht neben dem ganzen Schritt, der Text bleibt daneben (sonst Lücke unter dem Titel) */
  .elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt > img { grid-row: 1 / span 2; }
  .elementor .schrittlinie[data-form="belegstuecke"] > .schrittlinie-schritt > :not(img):last-child { grid-column: 1; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .elementor .schrittlinie[data-form="belegstuecke"][data-ablage="wartet"]::before { transform: scaleX(0); }
  .elementor .schrittlinie[data-form="belegstuecke"][data-ablage="wartet"] > .schrittlinie-schritt::before { transform: scale(0); }
  .elementor .schrittlinie[data-form="belegstuecke"][data-ablage="wartet"] > .schrittlinie-schritt > img { opacity: 0; translate: 0 -26px; }
  .elementor .schrittlinie[data-form="belegstuecke"][data-ablage="liegt"]::before { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
  .elementor .schrittlinie[data-form="belegstuecke"][data-ablage="liegt"] > .schrittlinie-schritt { --takt: 0s; }
  .elementor .schrittlinie[data-form="belegstuecke"][data-ablage="liegt"] > .schrittlinie-schritt:nth-child(2) { --takt: .22s; }
  .elementor .schrittlinie[data-form="belegstuecke"][data-ablage="liegt"] > .schrittlinie-schritt:nth-child(3) { --takt: .44s; }
  .elementor .schrittlinie[data-form="belegstuecke"][data-ablage="liegt"] > .schrittlinie-schritt:nth-child(4) { --takt: .66s; }
  .elementor .schrittlinie[data-form="belegstuecke"][data-ablage="liegt"] > .schrittlinie-schritt::before { transition: transform .35s ease calc(var(--takt) + .15s); }
  .elementor .schrittlinie[data-form="belegstuecke"][data-ablage="liegt"] > .schrittlinie-schritt > img {
    transition: opacity .5s ease calc(var(--takt) + .35s), translate .7s cubic-bezier(.2, .9, .25, 1.15) calc(var(--takt) + .35s);
  }
}

/* Großansicht (Andrej 22.10.2026, zuerst Postkarten 2013 auf Seite 83): Attribut data-grossansicht am e-image mit Link auf die große
   Datei; Verhalten in assets/grossansicht.js. Vorschau: Mauszeiger Lupe, sichtbarer Tastaturfokus. Dialog: dunkler Grund (ink, am Dialog selbst, weil ::backdrop die Variablen nicht sicher erbt),
   Bild ab 1024 px ganz im Fenster, darunter 64rem breit und seitlich wischbar, damit kleine Schrift lesbar bleibt. Keine Bewegung. */
.elementor a:has(> img[data-grossansicht]) { display: block; cursor: zoom-in; border-radius: var(--radius-md); }
.elementor a:has(> img[data-grossansicht]):focus-visible { outline: 2px solid var(--signal-red); outline-offset: 4px; }
html[data-grossansicht-offen] { overflow: hidden; }
dialog.grossansicht {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--ink) 94%, transparent); overflow: hidden;
}
dialog.grossansicht::backdrop { background: transparent; }
.grossansicht-buehne {
  box-sizing: border-box; display: flex; width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain;
  padding: var(--space-lg) calc(var(--gutter-page) + 3rem);
}
.grossansicht-buehne > img { display: block; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; cursor: zoom-out; }
dialog.grossansicht .grossansicht-schliessen,
dialog.grossansicht .grossansicht-schliessen:hover,
dialog.grossansicht .grossansicht-schliessen:focus {
  position: fixed; top: var(--space-sm); right: var(--space-sm); z-index: 1; display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--pure-white); color: var(--ouk-blue); cursor: pointer;
}
dialog.grossansicht .grossansicht-schliessen:hover { color: var(--signal-red); }
dialog.grossansicht .grossansicht-schliessen:focus-visible { outline: 2px solid var(--signal-red); outline-offset: 3px; }
@media (max-width: 1023px) {
  .grossansicht-buehne { padding: calc(48px + 2 * var(--space-sm)) var(--space-sm) var(--space-lg); }
  .grossansicht-buehne > img { width: 64rem; max-width: none; max-height: none; }
}

/* Knopf „Nach oben“ (Andrej 23.10.2026), nur am Handy bis 767 px; Verhalten in assets/nach-oben.js. Glasbox im Kleinen: warm-paper-90 mit der
   Unschärfe der Glasbox (16 px), Haarlinie limestone, damit das Quadrat auch auf Warmpapier erkennbar bleibt; Pfeil ouk-blue. Tippfläche 44 × 44 px,
   unten rechts mit Abstand zu Rand und Safe-Area. Ein- und Ausblenden nur über die Deckkraft; bei „weniger Bewegung“ ohne Übergang.
   Unter dem Handy-Menü (Elementor-Off-Canvas) und der Großansicht. */
button.nach-oben-knopf { display: none; }
@media (max-width: 767px) {
  button.nach-oben-knopf {
    position: fixed; z-index: 900;
    right: calc(var(--space-sm) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
    display: grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px; margin: 0; padding: 0;
    border: var(--border-hairline) solid var(--limestone); border-radius: var(--radius-md);
    background: var(--warm-paper-90); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    color: var(--ouk-blue); cursor: pointer; -webkit-tap-highlight-color: transparent;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  button.nach-oben-knopf[data-sichtbar] { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease, visibility 0s; }
  button.nach-oben-knopf:hover, button.nach-oben-knopf:focus { background: var(--warm-paper-90); color: var(--ouk-blue); }
  button.nach-oben-knopf:focus-visible { outline: 2px solid var(--signal-red); outline-offset: 3px; }
  button.nach-oben-knopf > svg { display: block; }
}
@media (prefers-reduced-motion: reduce) { button.nach-oben-knopf, button.nach-oben-knopf[data-sichtbar] { transition: none; } }
@media print { button.nach-oben-knopf { display: none !important; } }
.nach-oben-ziel:focus { outline: none; }

/* Tastaturfokus an verlinkten Bildern (23.10.2026): Elementor setzt an .e-image-link-base alles zurück (.elementor .e-image-link-base, auch den Fokusrahmen);
   damit war der Fokus an jedem Bild-Link unsichtbar (zuerst bemerkt an den Apple-/Spotify-Abzeichen auf 120 und 2994). Rahmen wie bei der Großansicht. */
.elementor a.e-image-link-base:focus-visible { outline: 2px solid var(--signal-red); outline-offset: 4px; }

/* Eine-Box-Regel (1.5.98, 26.10.2026, Andrej: „das machen wir nie“): Beim Ankommen einer Fahrt steht nur Kopf bzw. Einleitung; sobald die
   erste Station erscheint, blendet der Kopf aus. Nur mit data-auftakt="kopf" (Kamerafahrt an der Strecke [data-camera-journey], Hausfahrt am
   Abschnitt [data-hausfahrt]); Zustand aus erzaehlseite.js (data-phase="auftakt") bzw. hausfahrt.js (data-auftakt-vorbei). */
html.ouk-camera-ready [data-camera-journey][data-auftakt="kopf"] .fahrt-kopf { transition: opacity .25s ease, visibility 0s; }
html.ouk-camera-ready [data-camera-journey][data-auftakt="kopf"]:not([data-phase="auftakt"]) .fahrt-kopf { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.hausfahrt.ist-bereit[data-auftakt="kopf"] [data-rolle="kopf"] { transition: opacity .25s ease, visibility 0s; }
.hausfahrt.ist-bereit[data-auftakt="kopf"][data-auftakt-vorbei] [data-rolle="kopf"] { opacity: 0; visibility: hidden; transition: none; } /* sofort weg, weil die erste Karte zugleich einblendet (Firefox zeigte sonst kurz beide) */

/* Schrittlinie, Fortschritt (Andrej 26.10.2026, Vorschlag A „Schritteband“, Entwurf 1 Webseiten/Übergreifend/Entwürfe/Schritteband-2026-10-26/).
   Nur wenn assets/schrittlinie.js läuft (data-ouk-linie an der Liste; nicht bei „weniger Bewegung“, nicht ohne Skript):
   Grundlinie blueprint-mist, darüber die rote Füllung (::after, --ouk-linie von 0 bis 1), erreichte Punkte rot, der laufende Punkt mit Hof
   wie in der Schrittfolge. Texte bleiben voll lesbar (keine Abdunklung, Beschluss 26.10.2026). Ersetzt am Handy die Scroll-Zeitleiste der
   Rolle (Klassen-CSS ::after mit animation-timeline, lief in Firefox nicht). Ohne Attribut gilt der Ruhezustand des Klassen-CSS
   (ganze Linie OuK-Blau, helle Punkte). Belegstücke: Linie und Punkte stehen sofort, nur die Blätter legen sich weiter einmal ab. */
.elementor .schrittlinie[data-ouk-linie] { position: relative; border-top-color: var(--blueprint-mist); }
.elementor .schrittlinie[data-ouk-linie]::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--measurement-stroke)); width: auto; height: var(--measurement-stroke);
  background: var(--signal-red); transform-origin: left center; transform: scaleX(var(--ouk-linie, 0)); transition: transform .18s linear;
  animation: none; pointer-events: none; z-index: 0;
}
.elementor .schrittlinie[data-ouk-linie] > .schrittlinie-schritt::before { transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.elementor .schrittlinie[data-ouk-linie] > .schrittlinie-schritt[data-zustand]::before { background: var(--signal-red); border-color: var(--signal-red); }
.elementor .schrittlinie[data-ouk-linie] > .schrittlinie-schritt[data-zustand="aktiv"]::before { box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal-red) 18%, transparent); }
.elementor .schrittlinie[data-ouk-linie][data-grund="dunkel"] { border-top-color: color-mix(in srgb, var(--pure-white) 30%, transparent); }
@media (min-width: 1024px) {
  .elementor .schrittlinie[data-ouk-linie][data-form="belegstuecke"]::before { background: var(--blueprint-mist); transform: none; transition: none; }
  .elementor .schrittlinie[data-ouk-linie][data-form="belegstuecke"]::after { top: calc(var(--blatt) + var(--blatt-luft)); }
  .elementor .schrittlinie[data-ouk-linie][data-form="belegstuecke"] > .schrittlinie-schritt::before { transform: none; }
}
@media (max-width: 1023px) {
  .elementor .schrittlinie[data-ouk-linie] { border-left-color: var(--blueprint-mist); }
  .elementor .schrittlinie[data-ouk-linie][data-grund="dunkel"] { border-left-color: color-mix(in srgb, var(--pure-white) 30%, transparent); }
  .elementor .schrittlinie[data-ouk-linie]::after {
    left: calc(-1 * var(--measurement-stroke)); right: auto; top: 0; bottom: 0; width: var(--measurement-stroke); height: auto;
    transform-origin: center top; transform: scaleY(var(--ouk-linie, 0));
  }
}