/* =========================================================================
   BASTELBEN — ULTIMATIVE ALL-IN-ONE ANIMATIONS CSS (STRATO-READY)
   =========================================================================
   1. GLOBAL & PAGE LOAD
   2. SCROLL-REVEAL (Fix für Chrome/Safari)
   3. HERO-ANIMATIONS
   4. HOVER-INTERACTIONS (Keine Bewegung für Buttons/Service-Cards)
   5. ALIGNMENT-FIXES (Icons & Bilder)
   6. ACCESSIBILITY
   ========================================================================= */

/* ── 1. GLOBAL & PAGE LOAD ─────────────────────────────────────────── */

@keyframes page-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

body {
    animation: page-fade-in 0.5s ease forwards;
}

/* ── 2. SCROLL-REVEAL (Modern CSS View-Timeline) ───────────────────── 
   Der Endpunkt 'entry 80%' sorgt dafür, dass Elemente in Safari & Chrome
   nicht wieder ausfaden, wenn man das Ende der Sektion erreicht.
───────────────────────────────────────────────────────────────────────── */

@supports (view-timeline: --reveal) {
    [data-reveal], [data-reveal="left"], [data-reveal="right"], [data-reveal="scale"],
    h1, h2, h3, .portfolio-karte, .service-card, .faq-item, 
    .timeline-item, .wert-card, .blog-karte, .shop-karte, .skill-gruppe,
    .projekt-beschreibung, .prozess-schritt, .social-link, .antwortzeit {
        view-timeline-name: --reveal;
        view-timeline-axis: block;
        
        animation: reveal-fade both;
        animation-timeline: --reveal;
        /* Fix: Endet innerhalb des 'entry'-Bereichs, um Sichtbarkeit zu halten */
        animation-range: entry 5% entry 80%;
    }

    /* Richtungs-Zuweisung */
    [data-reveal="left"], .prozess-schritt, .timeline-item { animation-name: reveal-left; }
    [data-reveal="right"] { animation-name: reveal-right; }
    [data-reveal="scale"], .service-card, .wert-card { animation-name: reveal-scale; }
}

/* ── 3. KEYFRAMES ──────────────────────────────────────────────────── */

@keyframes reveal-fade {
    from { opacity: 0; transform: translateY(3rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-left {
    from { opacity: 0; transform: translateX(-3rem); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes reveal-right {
    from { opacity: 0; transform: translateX(3rem); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes reveal-scale {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(2rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── 4. HERO-ANIMATIONS (Sofort-Effekt beim Laden) ─────────────────── */

h1, .hero-content h1, .story-hero-label, .portfolio-hero-label, .anfrage-hero-label {
    animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.hero-content p, .hero-hero h1, .kontakt-hero h1 {
    animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.hero-content .primary-btn, .hero-hero p {
    animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

/* ── 5. ALIGNMENT-FIXES (Icons & Bilder linksbündig) ───────────────── */

/* Service Cards & Bilder */
.service-card img {
    height: 5rem;
    width: auto;
    object-fit: contain;
    margin: 0 0 2rem 0;
    align-self: flex-start; /* Linksbündig */
    display: block;
}

/* Story-Werte & Herz-Icon */
.wert-icon, .herz-icon {
    height: 4.5rem; /* Einheitliche "Parkhöhe" für die Icons */
    width: auto;
    display: flex;
    align-items: flex-end; 
    justify-content: flex-start;
    margin-bottom: 1.5rem;
}

.wert-card svg, .wert-card img {
    max-height: 100%;
    width: auto;
    align-self: flex-start;
}

/* Titel-Alignment für einheitlichen Textbeginn */
.service-card h3, .wert-card h3 {
    min-height: 3.2rem; /* Platz für 2 Zeilen, damit Absatz darunter auf gleicher Höhe */
    display: flex;
    align-items: flex-start;
}

/* ── 6. HOVER-EFFECTS ──────────────────────────────────────────────── */

/* Navigation */
.menueleiste a { position: relative; transition: color 0.3s ease; }
.menueleiste a::after {
    content: ''; position: absolute; bottom: -3px; left: 0;
    width: 0; height: 1.5px; background: var(--blue);
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.menueleiste a:hover::after { width: 100%; }

/* Portfolio-Karten (Einzige mit Bewegung) */
.portfolio-karte {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.portfolio-karte:hover { transform: translateY(-8px); }

/* Buttons & Service-Cards (KEINE Bewegung) */
.primary-btn, .download-btn, .senden-btn, .cookie-btn, .service-card, .blog-karte, .shop-karte {
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Bild-Zoom in Karten */
.portfolio-karte-bild img, .blog-karte-bild img, .shop-karte-bild img {
    transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}
.portfolio-karte:hover img, .blog-karte:hover img, .shop-karte:hover img {
    transform: scale(1.05);
}

/* Marquee Pause */
#service-banner:hover .marquee-track { animation-play-state: paused; }

/* ── 7. ACCESSIBILITY ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal], h1, h2, h3 {
        opacity: 1 !important;
        transform: none !important;
    }
}