/* ==========================================================================
   04 – SCROLL-ANIMATIONEN (seitenübergreifend)
   ==========================================================================
   Gehört zu: assets/js/scroll-effekte.js
   Diese Effekte kommen auf so gut wie jeder Seite vor: Fortschrittsbalken
   beim Scrollen, sanftes Einblenden von Abschnitten, "Nach oben"-Button
   und das Ein-/Ausklappen von Karten-Rastern auf dem Smartphone.
   ========================================================================== */

/* Dünner blauer Balken oben am Bildschirmrand, der den Lesefortschritt
   der Seite zeigt (Breite wird per JS aus der Scroll-Position berechnet). */
.scroll-progress {
	position: fixed; top: 0; left: 0;
	height: 3px; width: 0%;
	background: var(--blue);
	z-index: 10000;
	transition: width .1s linear;
}

/* Abschnitte blenden sanft von unten ein, sobald sie beim Scrollen ins
   Blickfeld kommen (Klasse .visible wird per IntersectionObserver gesetzt,
   siehe scroll-effekte.js). */
.fade-in-section {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.fade-in-section.visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.fade-in-section { opacity: 1; transform: none; transition: none; }
}

/* Variante: NICHT der Abschnitt selbst blendet ein, sondern seine direkten
   Kind-Elemente nacheinander (z. B. Fakten-Kästchen oder Werte-Karten,
   die eins nach dem anderen erscheinen sollen). Bis zu 8 Kinder mit
   Zeitversatz vorbereitet – für mehr einfach weitere :nth-child-Zeilen
   ergänzen. */
.stagger-in > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.stagger-in.visible > * { opacity: 1; transform: translateY(0); }
.stagger-in.visible > *:nth-child(1) { transition-delay: .05s; }
.stagger-in.visible > *:nth-child(2) { transition-delay: .13s; }
.stagger-in.visible > *:nth-child(3) { transition-delay: .21s; }
.stagger-in.visible > *:nth-child(4) { transition-delay: .29s; }
.stagger-in.visible > *:nth-child(5) { transition-delay: .37s; }
.stagger-in.visible > *:nth-child(6) { transition-delay: .45s; }
.stagger-in.visible > *:nth-child(7) { transition-delay: .53s; }
.stagger-in.visible > *:nth-child(8) { transition-delay: .61s; }
@media (prefers-reduced-motion: reduce) {
	.stagger-in > * { opacity: 1; transform: none; transition: none; }
}

/* Runder "Nach oben"-Button unten rechts, erscheint erst nach 400px
   Scroll-Strecke (Klasse .show wird per JS gesetzt). */
#scrollTopBtn {
	position: fixed; bottom: 28px; right: 28px; z-index: 900;
	width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--blue); color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 20px rgba(0,150,255,.35);
	opacity: 0; visibility: hidden; transform: translateY(12px);
	transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
#scrollTopBtn.show { opacity: 1; visibility: visible; transform: translateY(0); }
#scrollTopBtn:hover { background: var(--blue-dk); transform: translateY(-2px); }
#scrollTopBtn svg { width: 22px; height: 22px; }
@media (max-width: 600px) {
	#scrollTopBtn { bottom: 18px; right: 18px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	#scrollTopBtn { transition: opacity .2s; }
}

/* --------------------------------------------------------------------
   MOBIL: "Alle anzeigen" – Karten-Raster einklappen
   --------------------------------------------------------------------
   Wird auf mehreren Karten-Rastern verwendet (Startseite-Vorschauen,
   Kompetenzen-Kacheln, News). Container bekommt die Klasse
   .mobile-collapse, JS (assets/js/scroll-effekte.js) toggelt beim Klick
   auf den "Alle anzeigen"-Button die Klasse .is-open.

   Standard   (.mobile-collapse):        zeigt die ersten 2 Karten
   Variante   (.mobile-collapse--eins):   zeigt nur die erste Karte
   "display:revert" gibt jeder Karte ihre EIGENE display-Eigenschaft
   zurück (z. B. flex bei Branchen-Karten, block bei Kompetenz-Kacheln) –
   dadurch funktioniert dieselbe Regel für unterschiedliche Karten-Typen.
   -------------------------------------------------------------------- */
@media (max-width: 600px) {
	.mobile-collapse > *:nth-child(n+3) { display: none; }
	.mobile-collapse.is-open > * { display: revert; }

	.mobile-collapse--eins > *:nth-child(n+2) { display: none; }
	.mobile-collapse--eins.is-open > * { display: revert; }

	.mobile-more-wrap, .mobile-more { display: none; }
	.mobile-more-wrap { display: flex; justify-content: center; width: 100%; }
	.mobile-more {
		display: inline-flex; align-items: center; gap: 8px;
		margin: 16px auto 0; padding: 12px 22px;
		background: var(--blue); color: #fff; border: none; border-radius: 8px;
		font-family: 'PT Sans', sans-serif; font-size: 14px; font-weight: 700;
		cursor: pointer; text-decoration: none;
	}
}
/* Auf Desktop komplett ausgeblendet (Karten stehen dort ohnehin alle offen) */
@media (min-width: 601px) {
	.mobile-more-wrap, .mobile-more { display: none; }
}