/* Scroll Animation - Einfaches Fade In von unten für Blocs Body Klasse */

/* ==================================================
   WENN fade-in-element AUF BODY - ALLE ELEMENTE ANIMIEREN
   ================================================== */

/* Alle relevanten Elemente im Body animieren */
body.fade-in-element .bloc,
body.fade-in-element section,
body.fade-in-element .container > .row,
body.fade-in-element [class*="bloc-"],
body.fade-in-element .card,
body.fade-in-element .feature-bloc,
body.fade-in-element article {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Wenn Element sichtbar wird */
body.fade-in-element .bloc.is-visible,
body.fade-in-element section.is-visible,
body.fade-in-element .container > .row.is-visible,
body.fade-in-element [class*="bloc-"].is-visible,
body.fade-in-element .card.is-visible,
body.fade-in-element .feature-bloc.is-visible,
body.fade-in-element article.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Automatische gestaffelte Verzögerung für Blocs */
body.fade-in-element .bloc:nth-of-type(1).is-visible { transition-delay: 0s; }
body.fade-in-element .bloc:nth-of-type(2).is-visible { transition-delay: 0.1s; }
body.fade-in-element .bloc:nth-of-type(3).is-visible { transition-delay: 0.2s; }
body.fade-in-element .bloc:nth-of-type(4).is-visible { transition-delay: 0.3s; }
body.fade-in-element .bloc:nth-of-type(5).is-visible { transition-delay: 0.4s; }
body.fade-in-element .bloc:nth-of-type(6).is-visible { transition-delay: 0.5s; }

/* ==================================================
   MANUELLE KLASSEN (optional für mehr Kontrolle)
   ================================================== */

/* Einzelnes Element manuell animieren */
.fade-in-element:not(body) {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-element.is-visible:not(body) {
    opacity: 1;
    transform: translateY(0);
}

/* Von links */
.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Von rechts */
.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Von unten */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Verzögerungen für manuelle Klassen */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* Geschwindigkeiten */
.fade-in-fast { transition-duration: 0.4s; }
.fade-in-slow { transition-duration: 1.2s; }

/* Keine Animation */
.no-animation,
body.fade-in-element .no-animation {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Hero/Header Blocs nicht animieren (normalerweise erste Sektion) */
body.fade-in-element .bloc:first-of-type {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}