/* ============================================================
   PCG SCROLLY — Sticky-Media / Scrolling-Content (AUFTRAG "Rolex Motion
   Feinschliff", Schritt B1, Quick Task 260821-h8y)
   Cowork-Brief: design-exports/AUFTRAG_Claude_Code_Rolex_Motion_Feinschliff.md

   OWNS: das gesamte "Rolex-Signature"-Bauteil dieser Runde — sein Grid-
   Layout, seinen gepinnten Medien-Slot und dessen eigene Ein-/Ausblend-
   Bewegung der Textpanels. Zuständig NICHT für die globalen Motion-
   Primitiven (Scroll-Reveal-Entrance, Hover-Lift, Hero-Scroll-Tiefe) —
   die bleiben in pcg-motion.css (D-1, CONVENTIONS.md "ein Eigentümer pro
   Aufgabe").

   MUSS NACH `bricks-frontend-inline` (dem Bricks-Custom-CSS-Handle)
   gedruckt werden — functions.php bindet diese Datei genau mit dieser
   wp_style_is()-abgesicherten Abhängigkeit ein, zwischen pcg-elevation
   und pcg-typecase (dem einzigen freien Slot, siehe deren beider eigene
   Kommentare in functions.php).

   Klassen-API (D-2), drei Namen, vom Kunden in Bricks eintragbar:
     .pcg-scrolly        — die Grid-Sektion
     .pcg-scrolly-media   — der gepinnte Medien-Slot (Bild heute, Video
                            später — siehe Medien-Kind-Regel unten)
     .pcg-scrolly-panel   — jedes einzelne scrollende Textpanel
   Maschinen-Klassen, niemand trägt sie von Hand ein:
     .pcg-scrolly-active  — von JS gesetzt, das aktuell fokussierte Panel
     .pcg-scrolly-ready   — von JS gesetzt, ERST nachdem der Observer
                            verdrahtet ist UND das erste Panel aktiv ist

   Es werden ausschließlich `transform`/`opacity` animiert — keine
   Layout-Eigenschaften, kein `will-change`, keine Keyframe-Animation.
   Genau EINE eigene Easing-Kurve wird wiederverwendet, A1's bereits
   sanktionierte `cubic-bezier(0.16, 1, 0.3, 1)` — keine zweite eigene
   Kurve in dieser Datei.

   Quick task 260821-man (Schritt C1): diese Kurve und ihre Dauer stehen
   NICHT mehr als Literal hier, sondern kommen über
   `var(--pcg-ease-entrance, ...)` / `var(--pcg-dur-entrance, ...)` aus
   pcg-elevation.css — dort liegt jetzt die einzige Quelle der Wahrheit,
   mit demselben Literal als Fallback. Sichtbar ändert sich nichts
   (byte-identische Werte).

   D-3 (Inaktive Panels dimmen, verschwinden nie): der inaktive
   Opacity-Wert ist `var(--pcg-scrolly-dim, 0.32)` — ein Boden über
   Null, niemals `0`. D-4 (kein Failsafe-Timer nötig): das Dimmen ist
   AUSSCHLIESSLICH über `html.pcg-motion .pcg-scrolly.pcg-scrolly-ready`
   erreichbar — JS setzt `pcg-scrolly-ready` erst NACHDEM der Observer
   verdrahtet und das erste Panel aktiv markiert ist, sodass ein
   JS-Fehler, ein fehlender IntersectionObserver oder der Bricks-Editor-
   Kontext strukturell (nicht nur per Failsafe) zu "nichts wurde je
   gedimmt" degradiert.

   D-7 (medien-typ-neutraler Slot): die Kind-Regel nennt `img`,
   `picture`, `picture > img`, `video` und `iframe` gemeinsam — ein
   späterer Tausch des heutigen `<img>` gegen
   `<video muted autoplay playsinline loop poster="...">` braucht dann
   NULL CSS- und NULL JS-Änderungen. Das `<video>`-Element selbst wird
   in dieser Runde NICHT gebaut (Ionos-Bandbreite/LCP, Roadmap-Punkt).

   D-8 (Sticky-in-Grid braucht zwei Deklarationen): ein Grid-Kind
   streckt sich per Default auf die volle Zeilenhöhe — ein volle-Höhe-
   Kind kann nie sichtbar "pinnen". Die Sektion bekommt `align-items:
   start`, der Slot zusätzlich `align-self: start`. Beide OHNE
   `!important` — schlägt ein Bricks-Panel-Layout-Setting diese Regeln,
   ist der korrekte Fix, das Setting im Panel zu leeren (CONVENTIONS.md),
   nicht ein `!important` hier zu ergänzen.

   Alle sechs Custom Properties (--pcg-scrolly-top/-gap/-ratio/
   -panel-min/-dim/-shift) werden AUSSCHLIESSLICH als
   `var(--name, FALLBACK)` konsumiert, OHNE eigenen `:root`-Default
   (gleiche Regel wie bei --pcg-hero-* / --pcg-motion-hero-*, discovered
   fact 10) — ein `:root`-Default würde nach dem Bricks-Custom-CSS-Feld
   drucken und die eigene Übersteuerung des Kunden dort stumm schlagen.
   ============================================================ */

/* --- Medien-Slot, bei ALLEN Breiten (reserviert die Boxhöhe auch am
   Handy, kein Layout-Sprung während das Bild lädt) -------------------
   Zwei-Klassen-Direktkind-Selektor (`.pcg-scrolly > .pcg-scrolly-media`),
   damit diese Regel Bricks' eigene Ein-Klassen-Basisregeln (Container
   defaultet auf flex column) schlägt. Ein Bricks-Panel-Layout-Setting
   würde diese Regel dennoch schlagen — im Panel leeren, hier kein
   `!important` ergänzen (D-8, CONVENTIONS.md). -------------------- */
.pcg-scrolly > .pcg-scrolly-media {
	display: block;
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: var(--pcg-scrolly-ratio, 4 / 3);
}

/* D-7: `video` steht bewusst in dieser Liste, obwohl heute kein
   <video>-Element existiert — das ist genau das, was den späteren
   Bild->Video-Tausch zu einer Null-CSS-Änderung macht. Nicht
   "aufräumen"! */
.pcg-scrolly > .pcg-scrolly-media > img,
.pcg-scrolly > .pcg-scrolly-media > picture,
.pcg-scrolly > .pcg-scrolly-media > picture > img,
.pcg-scrolly > .pcg-scrolly-media > video,
.pcg-scrolly > .pcg-scrolly-media > iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Desktop-Layout + Panel-Bewegung, NUR innerhalb dieses Gates (D-5,
   byte-synchron mit SCROLLY_DESKTOP_MEDIA_QUERY in site-interactions.js
   — siehe die "h8y: cross-file media-query sync"-Prüfung dort). Unter
   992px bzw. ohne Hover-Gerät existiert diese ganze Regelmenge schlicht
   NICHT — "mobil = Bild oben, Panels gestapelt, keine Bewegung" entsteht
   durch das FEHLEN von Regeln, nicht durch Gegenregeln (am wenigsten
   Code, am wenigsten, das kaputtgehen kann). ------------------------ */
@media (min-width: 992px) and (hover: hover) {
	.pcg-scrolly {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--pcg-scrolly-gap, 56px);
		/* Load-bearend: ohne align-items:start streckt das Grid die
		   Medien-Spalte auf die volle Zeilenhöhe und das Pinnen greift
		   nie — lautlos, ohne jeden Fehler (D-8). */
		align-items: start;
	}

	.pcg-scrolly > .pcg-scrolly-media {
		position: sticky;
		/* ~79px Sticky-Header + Luft */
		top: var(--pcg-scrolly-top, 96px);
		/* Load-bearend, siehe align-items oben (D-8). */
		align-self: start;
	}

	.pcg-scrolly .pcg-scrolly-panel {
		min-height: var(--pcg-scrolly-panel-min, 62vh);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* --- Panel-Bewegung (D-3/D-4) -------------------------------------
	   Gedimmt wird AUSSCHLIESSLICH unter html.pcg-motion UND
	   .pcg-scrolly-ready — JS setzt pcg-scrolly-ready erst, nachdem der
	   Observer verdrahtet UND das erste Panel aktiv ist. Damit ist "Text
	   bleibt dauerhaft gedimmt" strukturell unmöglich statt bloß per
	   Failsafe-Timer abgesichert (anders als A2, das einen numerischen
	   Wert treibt und daher einen Timer brauchte — ein Klassen-Gate ist
	   hier stärker und billiger). Der Dim-Wert ist bewusst ein Boden über
	   Null, kein `0` (D-3, Brief "langsam, sparsam, zurückhaltend"). --- */
	html.pcg-motion .pcg-scrolly.pcg-scrolly-ready .pcg-scrolly-panel {
		opacity: var(--pcg-scrolly-dim, 0.32);
		transform: translateY(var(--pcg-scrolly-shift, 18px));
		transition: opacity var(--pcg-dur-entrance, .7s) var(--pcg-ease-entrance, cubic-bezier(0.16, 1, 0.3, 1)), transform var(--pcg-dur-entrance, .7s) var(--pcg-ease-entrance, cubic-bezier(0.16, 1, 0.3, 1));
	}

	html.pcg-motion .pcg-scrolly.pcg-scrolly-ready .pcg-scrolly-panel.pcg-scrolly-active {
		opacity: 1;
		transform: none;
	}

	/* --- Reveal-Eigentümerschaft (D-6) --------------------------------
	   Panels enthalten Elemente, die A1's Scroll-Reveal ebenfalls
	   animiert (.pcg-h2/.pcg-eyebrow/.pcg-lead/...). Zwei Eigentümer, die
	   dieselbe Opacity multiplizieren, ergeben einen unsauberen Doppel-
	   Fade — innerhalb eines Panels ist das Panel der alleinige
	   Eigentümer, der Reveal-Startzustand wird hier neutralisiert. Diese
	   Liste wird von einem Test live aus site-interactions.js'
	   REVEAL_SELECTOR geparst, damit beide Listen nie auseinanderlaufen
	   können. Unter 992px gibt es keine Panel-Bewegung, dort läuft der
	   sitezweite Reveal unverändert weiter wie in jeder anderen Sektion.
	   Ohne `!important` — die zusätzliche Klasse gewinnt bereits per
	   Spezifität. */
	html.pcg-motion .pcg-scrolly-panel .pcg-h2,
	html.pcg-motion .pcg-scrolly-panel .pcg-eyebrow,
	html.pcg-motion .pcg-scrolly-panel .pcg-lead,
	html.pcg-motion .pcg-scrolly-panel .pcg-card,
	html.pcg-motion .pcg-scrolly-panel .pcg-box,
	html.pcg-motion .pcg-scrolly-panel .pcg-step,
	html.pcg-motion .pcg-scrolly-panel a.brxe-block[href^="/leistungen/"] {
		opacity: 1;
		transform: none;
	}
}

/* --- prefers-reduced-motion (Brief PFLICHT) --------------------------
   Belt-and-braces, wie pcg-motion.css's eigenes Muster: ein Besucher,
   der "Bewegung reduzieren" ERST NACH dem Laden der Seite einschaltet,
   landet trotzdem vollständig statisch. `!important` schlägt jede Regel
   oben unabhängig vom html.pcg-motion-Präfix — deshalb stehen hier
   sowohl die html.pcg-motion-präfixierten als auch die nackten
   Selektoren, damit auch ein Besucher, der "Bewegung reduzieren" erst
   nach dem Laden einschaltet, vollständig statisch landet. Das Bild
   wird bewusst entpinnt (Brief-Wortlaut "statisch, alle Panels
   sichtbar") und die Panel-min-height zurückgesetzt, damit die Sektion
   zu einem gewöhnlichen Textblock kollabiert statt hohe, leere Spalten
   neben einem nun unpinnbaren Bild stehen zu lassen. Ans Dateiende
   gesetzt, damit die Druckreihenfolge einen Gleichstand zwischen gleich
   starken !important-Regeln entscheidet. -------------------------- */
@media (prefers-reduced-motion: reduce) {
	html.pcg-motion .pcg-scrolly .pcg-scrolly-panel,
	.pcg-scrolly .pcg-scrolly-panel {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		min-height: 0 !important;
	}

	html.pcg-motion .pcg-scrolly > .pcg-scrolly-media,
	.pcg-scrolly > .pcg-scrolly-media {
		position: static !important;
	}
}

/* --- Instanz-Opt-out (quick-260822): #brxe-aoztqg auf /ueber-uns/ trägt noch
   die Klasse .pcg-scrolly aus dem alten Sticky-Media-Aufbau - der Bricks-Editor
   lässt sich diese eine globale Klasse an diesem Element nicht über die übliche
   Klassen-UI entfernen (bestätigter Editor-Bug, kein Layout-Entscheid). Die
   Sektion wurde beim Umbau auf das A2-Hero-Fade-Muster umgestellt und die
   Medienspalte gelöscht, daher darf hier kein Panel mehr gedimmt oder hoch
   aufgeblasen werden. Byte-identischer Reset wie der reduced-motion-Block oben,
   aber unbedingt (nicht nur bei reduzierter Bewegung) und ID-scoped, damit
   andere/zukünftige .pcg-scrolly-Instanzen ihr Verhalten behalten. */
#brxe-aoztqg .pcg-scrolly-panel {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	min-height: 0 !important;
}

/* --- Lesbarkeit über dem Foto-Hintergrund (quick-260822): unabhängig vom
   obigen Opt-out - die zwei Absätze in #brxe-xvsrqt ("Unsere Geschichte")
   behalten sonst ihre alte dunkle pcg-body-Farbe, die auf dem neuen
   Foto-Hintergrund nicht lesbar ist. Bricks' Typografie-Panel-Wert dafür
   ist im Editor wiederholt nicht dauerhaft gespeichert worden (Editor-Bug,
   nicht Layout-Entscheid), deshalb hier als zuverlässiger Code-Fallback. */
#brxe-xvsrqt .pcg-scrolly-panel {
	color: #ffffff !important;
}