/*
 * Hero-Section (front-page.html)
 *
 * Die .hero-section ist alignfull mit has-base-2-background-color.
 * Die dekorativen Icons (.hero-icons) sind absolut relativ zur Hero-Section
 * positioniert und per pointer-events: none unsichtbar für Klicks.
 *
 * Icon-Positionen grob am Screenshot orientiert:
 *   gluehbirne  → oben Mitte, etwas links
 *   website     → oben rechts
 *   leporello   → unten rechts
 *   check       → Mitte rechts, nahe am Bild
 *
 * Animationen: sanftes Schweben (float), leichte Drehung (sway), Puls.
 * prefers-reduced-motion: Icons bleiben sichtbar, Animationen deaktiviert.
 */

/* ── Keyframes ─────────────────────────────────────────────────────────── */

@keyframes hero-float {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-10px); }
}

@keyframes hero-sway {
	0%, 100% { transform: rotate(0deg); }
	33%       { transform: rotate(4deg); }
	66%       { transform: rotate(-3deg); }
}

@keyframes hero-pulse {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.08); }
}

/* ── Hero-Container ─────────────────────────────────────────────────────── */

.hero-section {
	position: relative;
	overflow: visible;
}

/* ── Icon-Wrapper ──────────────────────────────────────────────────────── */

.hero-icons {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hero-icon {
	position: absolute;
}

.hero-icon svg {
	display: block;
}

/* ── Individuelle Icon-Positionen & -Größen ────────────────────────────── */

.hero-icon--gluehbirne {
	top: 5%;
	left: 38%;
	width: 72px;
	animation: hero-float 4.5s ease-in-out infinite;
	animation-delay: 0s;
}

.hero-icon--website {
	top: 4%;
	right: 1%;
	width: 86px;
	animation: hero-float 5.5s ease-in-out infinite;
	animation-delay: -2s;
}

.hero-icon--leporello {
	bottom: 5%;
	right: 2%;
	width: 70px;
	animation: hero-sway 6s ease-in-out infinite;
	animation-delay: -3.5s;
}

.hero-icon--check {
	top: 42%;
	right: 26%;
	width: 40px;
	opacity: 0.7;
	animation: hero-pulse 3.5s ease-in-out infinite;
	animation-delay: -1s;
}

/* ── Responsive: Icons auf kleinen Screens ausblenden ──────────────────── */

@media (max-width: 768px) {
	.hero-icons {
		display: none;
	}
}

/* ── Barrierefreiheit: Animationen deaktivieren ────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.hero-icon {
		animation: none;
	}
}