/* ==========================================================================
   CLAUDE: Dark Mode Hero Section
   CLAUDE: Startseiten-Hero Animation, Glow Effects, Dynamic Text
   CLAUDE: Lädt NUR auf der Startseite (Conditional Loading)
   CLAUDE: Hinzugefügt: 2026-01-12
   ========================================================================== */

/* ==========================================================================
   CLAUDE: Hero Background Overlay (Glow Effect)
   ========================================================================== */

/* CLAUDE: Manueller Toggle */
html[data-theme="dark"] .header_start::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(
        ellipse 90% 70% at 65% 35%,
        rgba(192, 132, 252, 0.22) 0%,
        rgba(129, 140, 248, 0.15) 35%,
        transparent 65%
    );
    pointer-events: none;
}

/* ==========================================================================
   CLAUDE: Hero Images
   ========================================================================== */

/* CLAUDE: SVG Layer (transparenter Gradient) */
html[data-theme="dark"] .header_start .bgimg img:nth-child(1) {
    opacity: 0.6;
    filter: brightness(1.5) saturate(1.4);
    mix-blend-mode: screen;
}

/* CLAUDE: PNG Hauptbild mit Glow */
html[data-theme="dark"] .header_start .bgimg img:nth-child(2) {
    filter:
        drop-shadow(0 0 60px rgba(192, 132, 252, 0.45))
        drop-shadow(0 0 120px rgba(129, 140, 248, 0.25))
        brightness(1.1);
}

/* ==========================================================================
   CLAUDE: Hero Text
   ========================================================================== */

html[data-theme="dark"] .header_start h1 {
    color: var(--pvm-text, var(--pvm-dark-text));
    text-shadow: 0 0 30px rgba(228, 228, 231, 0.1);
}

html[data-theme="dark"] .header_start h1 span {
    color: var(--pvm-primary-dm, #c084fc);
}

html[data-theme="dark"] .header_start p,
html[data-theme="dark"] .pvm-hero-text {
    color: var(--pvm-text, var(--pvm-dark-text));
}

html[data-theme="dark"] .pvm-hero-kicker {
    color: var(--pvm-primary-dm, #c084fc);
}

/* ==========================================================================
   CLAUDE: Dynamic Word Animation (Typewriter Effect)
   ========================================================================== */

html[data-theme="dark"] #dynamic-word {
    text-shadow:
        0 0 15px rgba(192, 132, 252, 0.8),
        0 0 35px rgba(192, 132, 252, 0.5),
        0 0 70px rgba(192, 132, 252, 0.3);
    transition:
        opacity 0.4s ease-in-out,
        text-shadow 0.4s ease-in-out;
}

/* CLAUDE: Glow verschwindet bei Fade-Out */
html[data-theme="dark"] #dynamic-word.fade-out {
    text-shadow:
        0 0 15px rgba(192, 132, 252, 0),
        0 0 35px rgba(192, 132, 252, 0),
        0 0 70px rgba(192, 132, 252, 0);
}

/* ==========================================================================
   CLAUDE: System-Präferenz Fallback
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* CLAUDE: Hero Overlay */
    html:not([data-theme="light"]) .header_start::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: radial-gradient(
            ellipse 90% 70% at 65% 35%,
            rgba(192, 132, 252, 0.22) 0%,
            rgba(129, 140, 248, 0.15) 35%,
            transparent 65%
        );
        pointer-events: none;
    }

    /* CLAUDE: Images */
    html:not([data-theme="light"]) .header_start .bgimg img:nth-child(1) {
        opacity: 0.6;
        filter: brightness(1.5) saturate(1.4);
        mix-blend-mode: screen;
    }

    html:not([data-theme="light"]) .header_start .bgimg img:nth-child(2) {
        filter:
            drop-shadow(0 0 60px rgba(192, 132, 252, 0.45))
            drop-shadow(0 0 120px rgba(129, 140, 248, 0.25))
            brightness(1.1);
    }

    /* CLAUDE: Text */
    html:not([data-theme="light"]) .header_start h1 {
        color: var(--pvm-text, var(--pvm-dark-text));
        text-shadow: 0 0 30px rgba(228, 228, 231, 0.15);
    }

    html:not([data-theme="light"]) .header_start h1 span {
        color: var(--pvm-primary-dm, #c084fc);
    }

    html:not([data-theme="light"]) .header_start p,
    html:not([data-theme="light"]) .pvm-hero-text {
        color: var(--pvm-text, var(--pvm-dark-text));
    }

    html:not([data-theme="light"]) .pvm-hero-kicker {
        color: var(--pvm-primary-dm, #c084fc);
    }

    /* CLAUDE: Dynamic Word */
    html:not([data-theme="light"]) #dynamic-word {
        text-shadow:
            0 0 15px rgba(192, 132, 252, 0.8),
            0 0 35px rgba(192, 132, 252, 0.5),
            0 0 70px rgba(192, 132, 252, 0.3);
        transition:
            opacity 0.4s ease-in-out,
            text-shadow 0.4s ease-in-out;
    }

    html:not([data-theme="light"]) #dynamic-word.fade-out {
        text-shadow:
            0 0 15px rgba(192, 132, 252, 0),
            0 0 35px rgba(192, 132, 252, 0),
            0 0 70px rgba(192, 132, 252, 0);
    }
}