/* Scroll-Übergänge zwischen Startseiten-Abschnitten – 2026-07-10
   Begleit-CSS zu drg-section-transitions.js. Enthält bewusst KEINE Regel, die
   Abschnitte standardmäßig ausblendet/clippt – der Animations-Startzustand
   wird ausschließlich per JS (GSAP) gesetzt. Fällt JS aus, bleiben alle
   Abschnitte normal sichtbar (progressive enhancement). */

/* rotateX beim Fold-In-Effekt braucht einen 3D-Kontext beim Elternelement.
   2026-07-15, Bugfix "Seite springt am Ende ca. 60px zurück": der
   Ausgangszustand von foldInOnScroll() enthält u.a. y:50 als Inline-Transform,
   bereits gesetzt ab dem ersten Rendern (GSAP fromTo()). Ist der Abschnitt mit
   diesem Zustand gerade der LETZTE im Dokument, zählt der Browser den dadurch
   entstehenden Render-Überlauf (ink overflow) zur scrollbaren
   Dokumenthöhe dazu - document.scrollHeight ist dadurch künstlich größer, als
   die Seite nach Abschluss der Animation tatsächlich ist. Scrollt man schnell
   bis zum scheinbaren Ende, landet man auf dieser aufgeblähten
   Maximal-Position; sobald die Animation einrastet (Transform -> none),
   schrumpft scrollHeight zurück und der Browser klemmt die Scroll-Position
   automatisch auf den neuen, kleineren Wert - das erzeugte das gemeldete
   Zurückspringen (per Playwright nachgewiesen: document.scrollHeight schrumpft
   nach dem Einrasten um ~30-40px, Scroll-Position wird um denselben Betrag
   geklemmt).
   overflow:clip auf #main behebt das an der Wurzel - seit 2026-07-20
   (Durchgang 44) site-weit in css/drg-layout-fixes.css statt nur hier,
   weil derselbe Symptom-Effekt auch auf Seiten ohne GSAP auftrat (siehe
   dort für Details). Hier bleibt nur noch die 3D-Perspektive für den
   Fold-In-Effekt, die ist Startseiten-spezifisch. */
#main {
	perspective: 1200px;
}

/* Sitzt hinter dem Inhalt von #drg-section-loesungsansatz, füllt den
   Abschnitt komplett aus. Der Abschnitt selbst bekommt dafür position:relative
   und sein Inhalt braucht z-index, damit Text/Buttons über dem Canvas liegen
   (fusion_builder_row ist bereits das erste Kind nach dem Hintergrund-Div, da
   dieses per insertBefore als neues erstes Kind eingefügt wird). */
#drg-section-loesungsansatz {
	position: relative !important;
	overflow: hidden;
}

.drg-section-vanta-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

#drg-section-loesungsansatz > .fusion-builder-row {
	position: relative;
	z-index: 1;
}

/* 2026-07-14: separate Overlay-Ebene für die "Mattung" beim Auslaufen eines
   Abschnitts (siehe mattingOnScroll() in drg-section-transitions.js). Ersetzt
   den früheren Ansatz, direkt die opacity des Textinhalts zu reduzieren -
   dieser kollidierte mit foldInOnScroll(), wenn ein Abschnitt gleichzeitig
   einlaufendes UND auslaufendes Element ist (per Playwright nachgewiesen).
   Braucht position:relative am Abschnitt selbst, damit sich das Overlay
   (position:absolute) korrekt einpasst. */
#drg-hero-vanta,
#drg-section-kennen-sie-das,
#drg-section-themen,
#drg-section-erfahrung,
#drg-section-cta {
	/* 2026-07-14: auf die restlichen Startseiten-Abschnitte ausgeweitet (siehe
	   drg-section-transitions.js) - #drg-section-cta brauchte es ursprünglich
	   nicht (letzter Abschnitt, nie "auslaufend"), bekommt es seit Durchgang 52
	   trotzdem für die Fade-Trennlinie unten (::before braucht einen
	   position:relative-Elternkontext für die korrekte Positionierung). */
	position: relative;
}

.drg-section-matting-overlay {
	position: absolute;
	inset: 0;
	background: rgba(13, 12, 12, 0.35); /* leichte Mattung in Hintergrundfarbe, bewusst dezent */
	pointer-events: none;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	/* Zusätzliche Absicherung: falls drg-section-transitions.js aus irgendeinem
	   Grund vor der matchMedia-Prüfung bereits Inline-Styles gesetzt haben
	   sollte, hier hart zurücksetzen. Im Normalfall greift die JS-eigene
	   Prüfung schon vorher und es passiert ohnehin nichts. */
	#drg-hero-vanta,
	#drg-section-kennen-sie-das,
	#drg-section-loesungsansatz,
	#drg-section-themen,
	#drg-section-erfahrung,
	#drg-section-cta {
		opacity: 1 !important;
		clip-path: none !important;
		transform: none !important;
	}

	.drg-section-vanta-bg,
	.drg-section-matting-overlay {
		display: none;
	}
}

/* Fade-In/Fade-Out-Trennlinie zwischen Abschnitten – 2026-07-20,
   einundfünfzigster Durchgang, seit Durchgang 52 auf vier der fünf
   Startseiten-Abschnitte ausgeweitet. Gleiches Muster wie Kopfleiste/
   Fußzeile (Durchgang 44/46/47/48/49/50): die Startseiten-Abschnitte
   untereinander nutzen alle denselben Hintergrundton (#0D0C0C bzw.
   #080807 bei #drg-section-cta) und haben keine erkennbare Trennung.
   Dieselbe weiße, links/rechts ausgeblendete Linie oben an jedem der
   betroffenen Abschnitte. z-index 3 bewusst über der Mattungs-Ebene
   (.drg-section-matting-overlay, z-index:2) und dem Vanta-Hintergrund
   (.drg-section-vanta-bg, z-index:0/1) gesetzt, damit die Linie unabhängig
   vom Scroll-Animationszustand durchgehend sichtbar bleibt statt von den
   bestehenden Overlay-Ebenen verdeckt zu werden. #drg-section-cta bekam
   dafür extra position:relative (siehe oben), die anderen hatten es
   bereits.

   2026-07-20 (Durchgang 53): Linie vor "[01] — AUSGANGSLAGE"
   (#drg-section-kennen-sie-das) auf Wunsch wieder entfernt - direkt nach
   dem Hero soll der Lesefluss noch ungebremst in Schwung kommen, eine
   sichtbare Trennlinie so früh würde genau das unterbrechen. Ab
   "[02] — VORGEHEN" ist die Seite bereits im Lesefluss etabliert, dort
   hilft die Trennung dem Scannen eher, als dass sie stört. */

#drg-section-loesungsansatz::before,
#drg-section-themen::before,
#drg-section-erfahrung::before,
#drg-section-cta::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(
		to right,
		transparent 0%,
		rgba(237, 232, 227, 0.6) 50%,
		transparent 100%
	);
	pointer-events: none;
	z-index: 3;
}