/* ==========================================================================
   CLAUDE: Hero Home - Full-Bleed City Lighttrails Design
   CLAUDE: Erstellt: 2026-01-12
   CLAUDE: Dark Tech Look - Identisch in Light und Dark Mode
   CLAUDE: Anpassen: Overlay-Opacity, Breakpoints, Farben
   ========================================================================== */

/* ==========================================================================
   CLAUDE: 1. Hero Container - Full-Bleed Background
   ========================================================================== */

.pvm-hero-home {
    position: relative;                           /* CLAUDE: Für absolute Kinder */
    min-height: 90vh;                             /* CLAUDE: Fast volle Viewport-Höhe */
    display: flex;                                /* CLAUDE: Flexbox für Centering */
    align-items: center;                          /* CLAUDE: Vertikal zentriert */
    overflow: hidden;                             /* CLAUDE: Kein Overflow */
    background-color: #0f0f23;                    /* CLAUDE: Fallback während Bild lädt */
}

/* ==========================================================================
   CLAUDE: 2. Hintergrundbild Container
   ========================================================================== */

.pvm-hero-home__bg {
    position: absolute;                           /* CLAUDE: Absolut positioniert */
    inset: 0;                                     /* CLAUDE: Füllt gesamten Container */
    z-index: 0;                                   /* CLAUDE: Hinter allem */
}

.pvm-hero-home__bg img {
    width: 100%;                                  /* CLAUDE: Volle Breite */
    height: 100%;                                 /* CLAUDE: Volle Höhe */
    object-fit: cover;                            /* CLAUDE: Cover ohne Verzerrung */
    object-position: center 40%;                  /* CLAUDE: Fokus auf Autobahnkreuz */
}

/* ==========================================================================
   CLAUDE: 3. Gradient-Overlay für Textlesbarkeit
   CLAUDE: Links dunkel (für Text) → Rechts transparent (Bild sichtbar)
   ========================================================================== */

.pvm-hero-home__overlay {
    position: absolute;                           /* CLAUDE: Absolut positioniert */
    inset: 0;                                     /* CLAUDE: Füllt gesamten Container */
    z-index: 1;                                   /* CLAUDE: Über Bild, unter Content */
    background: linear-gradient(
        90deg,
        rgba(15, 15, 35, 0.92) 0%,                /* CLAUDE: Links dunkel */
        rgba(15, 15, 35, 0.78) 35%,               /* CLAUDE: Übergang */
        rgba(15, 15, 35, 0.45) 60%,               /* CLAUDE: Halbtransparent */
        rgba(15, 15, 35, 0.15) 100%               /* CLAUDE: Rechts fast transparent */
    );
    pointer-events: none;                         /* CLAUDE: Klicks durchlassen */
}

/* ==========================================================================
   CLAUDE: 4. Content Container
   ========================================================================== */

.pvm-hero-home__content {
    position: relative;                           /* CLAUDE: Über Overlay */
    z-index: 2;                                   /* CLAUDE: Über Overlay */
    max-width: 750px;                             /* CLAUDE: Breiterer Container (war 620px) */
    padding: var(--pvm-space-2xl, 64px) 0;        /* CLAUDE: Vertikales Padding */
}

/* ==========================================================================
   CLAUDE: 5. Kicker (Tagline über Headline)
   ========================================================================== */

.pvm-hero-home .pvm-hero-kicker {
    font-size: 0.8rem;                            /* CLAUDE: Klein */
    text-transform: uppercase;                    /* CLAUDE: Großbuchstaben */
    letter-spacing: 2.5px;                        /* CLAUDE: Gesperrt */
    color: rgba(255, 255, 255, 0.75);             /* CLAUDE: Weiß transparent */
    margin-bottom: 0.75rem;                       /* CLAUDE: Abstand zur H1 */
    font-weight: 500;                             /* CLAUDE: Medium */
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);    /* CLAUDE: Subtiler Schatten */
}

/* ==========================================================================
   CLAUDE: 6. Headline (H1)
   ========================================================================== */

.pvm-hero-home h1 {
    font-size: clamp(2.25rem, 4vw + 0.5rem, 4rem); /* CLAUDE: Fluid Typography */
    line-height: 1.1;                              /* CLAUDE: Kompakt */
    color: #ffffff;                                /* CLAUDE: Weiß */
    margin-bottom: var(--pvm-space-md, 24px);      /* CLAUDE: Abstand */
    font-weight: 700;                              /* CLAUDE: Bold */
    text-shadow: 0 2px 25px rgba(0, 0, 0, 0.4);    /* CLAUDE: Schatten für Tiefe */
    text-wrap: balance;                            /* CLAUDE: Besserer Zeilenumbruch (modern browsers) */
}

/* CLAUDE: Dynamischer Text mit Glow */
/* CLAUDE: "durch [Wort]" als Einheit für stabile Breite */
/* CLAUDE: 2026-01-14 - Weißer Text für maximalen Kontrast, Lila-Glow beibehalten */
.pvm-hero-home__highlight {
    color: #ffffff;                               /* CLAUDE: Weiß für maximalen Kontrast */
    text-shadow:
        0 0 4px rgba(192, 132, 252, 1),           /* CLAUDE: Enger Halo - sanfter Übergang Weiß→Lila */
        0 0 15px rgba(192, 132, 252, 0.85),       /* CLAUDE: Innerer Glow (leicht verstärkt) */
        0 0 35px rgba(192, 132, 252, 0.55),       /* CLAUDE: Mittlerer Glow */
        0 0 70px rgba(192, 132, 252, 0.3);        /* CLAUDE: Äußerer Glow */
    display: block;                               /* CLAUDE: Eigene Zeile */
    min-width: 14em;                              /* CLAUDE: Stabile Breite für alle Wörter */
    white-space: nowrap;                          /* CLAUDE: Kein Umbruch innerhalb */
    transition:
        opacity 0.4s ease-in-out,                  /* CLAUDE: Fade-Animation */
        text-shadow 0.4s ease-in-out;              /* CLAUDE: Glow synchron mit Opacity */
}

/* ==========================================================================
   CLAUDE: 7. Hero Text (Subheadline)
   ========================================================================== */

.pvm-hero-home .pvm-hero-text {
    font-size: clamp(1.05rem, 1.2vw + 0.2rem, 1.2rem); /* CLAUDE: Fluid */
    color: rgba(255, 255, 255, 0.85);                   /* CLAUDE: Weiß transparent */
    max-width: 620px;                                   /* CLAUDE: Breitere Lesebreite (war 520px) */
    line-height: 1.6;                                   /* CLAUDE: Gute Lesbarkeit */
    margin-bottom: var(--pvm-space-lg, 32px);           /* CLAUDE: Abstand zu CTAs */
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);         /* CLAUDE: Subtiler Schatten */
    text-wrap: balance;                                 /* CLAUDE: Besserer Zeilenumbruch (modern browsers) */
}

/* ==========================================================================
   CLAUDE: 8. CTA Buttons
   ========================================================================== */

.pvm-hero-home__ctas {
    display: flex;                                /* CLAUDE: Flexbox */
    flex-wrap: wrap;                              /* CLAUDE: Umbrechen erlaubt */
    gap: var(--pvm-space-sm, 16px);               /* CLAUDE: Abstand zwischen Buttons */
}

/* CLAUDE: Primary CTA - Gradient */
.pvm-hero-home .pvm-btn--primary {
    background: var(--pvm-gradient, linear-gradient(36deg, #6B078A 0%, #3D35C2 100%));
    border: none;
    color: #ffffff;
    padding: 1rem 2rem;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(107, 7, 138, 0.35);
    transition: all 0.3s ease;
}

.pvm-hero-home .pvm-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(107, 7, 138, 0.45);
    color: #ffffff;
}

/* CLAUDE: Secondary CTA - Outline auf dunklem Hintergrund */
/* CLAUDE: Optimiert für bessere Sichtbarkeit auf dem Hero-Bild */
.pvm-hero-home .pvm-btn--outline {
    background: rgba(255, 255, 255, 0.08);        /* CLAUDE: Subtiler Hintergrund für "Körper" */
    border: 2px solid rgba(255, 255, 255, 0.75);  /* CLAUDE: Stärkere Border (war 0.5) */
    color: #ffffff;
    padding: calc(1rem - 2px) calc(2rem - 2px);   /* CLAUDE: Border kompensieren */
    font-weight: 600;                             /* CLAUDE: Dickere Schrift (war 500) */
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);                   /* CLAUDE: Leichter Glaseffekt */
    -webkit-backdrop-filter: blur(4px);           /* CLAUDE: Safari Support */
}

.pvm-hero-home .pvm-btn--outline:hover {
    background: rgba(255, 255, 255, 0.15);        /* CLAUDE: Stärkerer Hover-Hintergrund */
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);    /* CLAUDE: Subtiler Schatten */
}

/* ==========================================================================
   CLAUDE: 9. Trust-Bar (direkt nach Hero)
   ========================================================================== */

.pvm-trust-bar--home {
    background: var(--pvm-gradient, linear-gradient(36deg, #6B078A 0%, #3D35C2 100%));
    padding: var(--pvm-space-lg, 32px) 0;
    position: relative;                           /* CLAUDE: Für Overlay falls nötig */
}

.pvm-trust-bar--home .pvm-trust-bar__stats {
    display: flex;
    justify-content: center;
    gap: var(--pvm-space-2xl, 64px);
    flex-wrap: wrap;
}

.pvm-trust-bar--home .pvm-trust-stat {
    text-align: center;
    min-width: 100px;
}

.pvm-trust-bar--home .pvm-trust-stat__number {
    display: block;
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 0.35rem;
}

.pvm-trust-bar--home .pvm-trust-stat__label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   CLAUDE: 10. Responsive - Tablet (768px - 1199px)
   ========================================================================== */

@media (max-width: 1199px) {
    .pvm-hero-home {
        min-height: 85vh;
    }

    /* CLAUDE: Stärkeres Overlay für bessere Lesbarkeit */
    .pvm-hero-home__overlay {
        background: linear-gradient(
            90deg,
            rgba(15, 15, 35, 0.94) 0%,
            rgba(15, 15, 35, 0.82) 40%,
            rgba(15, 15, 35, 0.55) 70%,
            rgba(15, 15, 35, 0.25) 100%
        );
    }

    .pvm-hero-home__content {
        max-width: 650px;                         /* CLAUDE: Angepasst (war 550px) */
    }
}

/* ==========================================================================
   CLAUDE: 11. Responsive - Mobile (< 768px)
   ========================================================================== */

@media (max-width: 767px) {
    .pvm-hero-home {
        min-height: auto;                         /* CLAUDE: Automatische Höhe */
        padding: 100px 0 60px;                    /* CLAUDE: Padding statt min-height */
    }

    /* CLAUDE: Bild-Position auf interessantes Detail (Autobahnkreuz Mitte) */
    .pvm-hero-home__bg img {
        object-position: 55% 35%;                 /* CLAUDE: Fokus auf Lichtspuren */
    }

    /* CLAUDE: Vollflächiges dunkleres Overlay für Mobile */
    .pvm-hero-home__overlay {
        background: linear-gradient(
            180deg,
            rgba(15, 15, 35, 0.88) 0%,
            rgba(15, 15, 35, 0.78) 50%,
            rgba(15, 15, 35, 0.88) 100%
        );
    }

    .pvm-hero-home__content {
        text-align: center;                       /* CLAUDE: Zentriert auf Mobile */
        max-width: 100%;
    }

    .pvm-hero-home .pvm-hero-kicker {
        font-size: 0.7rem;                        /* CLAUDE: Kleiner auf Mobile */
        letter-spacing: 1.5px;                    /* CLAUDE: Weniger Sperrung */
        white-space: nowrap;                      /* CLAUDE: Kein Umbruch */
    }

    .pvm-hero-home h1 {
        font-size: clamp(1.85rem, 6vw, 2.5rem);   /* CLAUDE: Kleinere Headlines */
    }

    .pvm-hero-home__highlight {
        min-width: auto;                          /* CLAUDE: Keine Mindestbreite */
        white-space: nowrap;                      /* CLAUDE: Kein Umbruch - Text muss passen */
        font-size: clamp(1.35rem, 5vw, 1.85rem);  /* CLAUDE: Kleiner damit längster Text passt */
    }

    .pvm-hero-home .pvm-hero-text {
        max-width: 100%;
        font-size: clamp(0.95rem, 3vw, 1.1rem);   /* CLAUDE: Fluid auf Mobile */
    }

    /* CLAUDE: CTAs vertikal stacken */
    .pvm-hero-home__ctas {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .pvm-hero-home__ctas .pvm-btn {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

    /* CLAUDE: Trust-Bar auf Mobile */
    .pvm-trust-bar--home .pvm-trust-bar__stats {
        gap: var(--pvm-space-lg, 32px);
    }

    .pvm-trust-bar--home .pvm-trust-stat {
        flex: 1 1 40%;                            /* CLAUDE: 2 pro Reihe */
        min-width: 120px;
    }

    .pvm-trust-bar--home .pvm-trust-stat__number {
        font-size: 1.5rem;
    }

    .pvm-trust-bar--home .pvm-trust-stat__label {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   CLAUDE: 12. Responsive - Sehr kleine Screens (< 400px)
   ========================================================================== */

@media (max-width: 399px) {
    .pvm-hero-home {
        padding: 80px 0 40px;                     /* CLAUDE: Weniger Padding */
    }

    .pvm-hero-home h1 {
        font-size: clamp(1.5rem, 5vw, 1.75rem);   /* CLAUDE: Fluid statt fix */
    }

    .pvm-hero-home__highlight {
        font-size: clamp(1.1rem, 4.5vw, 1.35rem); /* CLAUDE: Noch kleiner für 320px */
    }

    .pvm-hero-home .pvm-hero-kicker {
        font-size: 0.65rem;                       /* CLAUDE: Kleiner für schmale Screens */
        letter-spacing: 1.5px;                    /* CLAUDE: Weniger Sperrung */
    }

    .pvm-hero-home .pvm-hero-text {
        font-size: 0.95rem;                       /* CLAUDE: Etwas kleiner */
    }

    .pvm-hero-home__ctas .pvm-btn {
        max-width: 280px;                         /* CLAUDE: Schmaler für 320px Screens */
        padding: 0.875rem 1.5rem;                 /* CLAUDE: Kompaktere Buttons */
    }

    .pvm-trust-bar--home .pvm-trust-stat {
        flex: 1 1 45%;
    }
}

/* ==========================================================================
   CLAUDE: 12b. Responsive - Landscape Mobile
   ========================================================================== */

@media (max-width: 896px) and (orientation: landscape) {
    .pvm-hero-home {
        min-height: auto;
        padding: 70px 0 40px;                     /* CLAUDE: Weniger Padding im Landscape */
    }

    .pvm-hero-home__content {
        max-width: 60%;                           /* CLAUDE: Mehr Platz für Bild */
    }

    .pvm-hero-home h1 {
        font-size: clamp(1.5rem, 4vw, 2rem);      /* CLAUDE: Kompakter im Landscape */
    }

    .pvm-hero-home .pvm-hero-text {
        font-size: 0.95rem;
    }

    /* CLAUDE: CTAs horizontal im Landscape */
    .pvm-hero-home__ctas {
        flex-direction: row;
        justify-content: flex-start;
    }

    .pvm-hero-home__ctas .pvm-btn {
        width: auto;
        max-width: none;
    }

    /* CLAUDE: Trust-Bar kompakter */
    .pvm-trust-bar--home {
        padding: var(--pvm-space-md, 16px) 0;
    }

    .pvm-trust-bar--home .pvm-trust-stat__number {
        font-size: 1.25rem;
    }

    .pvm-trust-bar--home .pvm-trust-stat__label {
        font-size: 0.7rem;
    }
}

/* ==========================================================================
   CLAUDE: 13. Dark Mode Anpassungen
   CLAUDE: Minimal - da Hero bereits "dark" ist
   ========================================================================== */

/* CLAUDE: Kicker im Dark Mode etwas heller */
html[data-theme="dark"] .pvm-hero-home .pvm-hero-kicker {
    color: rgba(255, 255, 255, 0.8);
}

/* CLAUDE: Highlight-Farbe für Dark Mode - bleibt weiß (Hero ist bereits dunkel) */
html[data-theme="dark"] .pvm-hero-home__highlight {
    color: #ffffff;
}

/* CLAUDE: Trust-Bar im Dark Mode - dunklerer Gradient */
html[data-theme="dark"] .pvm-trust-bar--home {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
    border-top: 1px solid rgba(192, 132, 252, 0.2);
    border-bottom: 1px solid rgba(192, 132, 252, 0.2);
}

html[data-theme="dark"] .pvm-trust-bar--home .pvm-trust-stat__number {
    color: var(--pvm-primary-dark-mode, #c084fc);
}

html[data-theme="dark"] .pvm-trust-bar--home .pvm-trust-stat__label {
    color: var(--pvm-dark-text-muted, #a1a1aa);
}

/* CLAUDE: System-Präferenz Fallback */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pvm-hero-home .pvm-hero-kicker {
        color: rgba(255, 255, 255, 0.8);
    }

    html:not([data-theme="light"]) .pvm-hero-home__highlight {
        color: #ffffff;
    }

    html:not([data-theme="light"]) .pvm-trust-bar--home {
        background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
        border-top: 1px solid rgba(192, 132, 252, 0.2);
        border-bottom: 1px solid rgba(192, 132, 252, 0.2);
    }

    html:not([data-theme="light"]) .pvm-trust-bar--home .pvm-trust-stat__number {
        color: var(--pvm-primary-dark-mode, #c084fc);
    }

    html:not([data-theme="light"]) .pvm-trust-bar--home .pvm-trust-stat__label {
        color: var(--pvm-dark-text-muted, #a1a1aa);
    }
}

/* ==========================================================================
   CLAUDE: 14. Animations (Fade-In)
   ========================================================================== */

/* CLAUDE: Fade-Out State für Dynamic Word */
/* CLAUDE: Transition ist bereits in Sektion 6 definiert */
/* CLAUDE: Blur-Radien bleiben gleich, nur Alpha→0 für synchrones Fading */
.pvm-hero-home__highlight.fade-out {
    opacity: 0;
    text-shadow:
        0 0 4px rgba(192, 132, 252, 0),           /* CLAUDE: Halo ausblenden */
        0 0 15px rgba(192, 132, 252, 0),          /* CLAUDE: Gleiche Blur, Alpha 0 */
        0 0 35px rgba(192, 132, 252, 0),
        0 0 70px rgba(192, 132, 252, 0);
}

/* CLAUDE: Trust-Bar Stats Animation */
.pvm-trust-bar--home .pvm-trust-stat {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

.pvm-trust-bar--home .pvm-trust-stat:nth-child(1) { animation-delay: 0.1s; }
.pvm-trust-bar--home .pvm-trust-stat:nth-child(2) { animation-delay: 0.2s; }
.pvm-trust-bar--home .pvm-trust-stat:nth-child(3) { animation-delay: 0.3s; }
.pvm-trust-bar--home .pvm-trust-stat:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   CLAUDE: 15. Accessibility - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pvm-hero-home__highlight {
        transition: none;                         /* CLAUDE: Keine Fade-Animation */
    }

    .pvm-hero-home__highlight.fade-out {
        opacity: 1;                               /* CLAUDE: Sofortiger Wechsel */
    }

    .pvm-trust-bar--home .pvm-trust-stat {
        animation: none;                          /* CLAUDE: Keine Einblende-Animation */
        opacity: 1;
    }

    .pvm-hero-home .pvm-btn--primary:hover,
    .pvm-hero-home .pvm-btn--outline:hover {
        transform: none;                          /* CLAUDE: Kein Hover-Transform */
    }
}

/* ==========================================================================
   CLAUDE: 16. Accessibility - Focus States
   ========================================================================== */

.pvm-hero-home .pvm-btn:focus-visible {
    outline: 3px solid #c084fc;                   /* CLAUDE: Sichtbarer Fokus-Ring */
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(192, 132, 252, 0.25);
}

.pvm-hero-home .pvm-btn--primary:focus-visible {
    outline-color: #ffffff;
}

/* ==========================================================================
   CLAUDE: 17. Accessibility - High Contrast Mode
   ========================================================================== */

@media (forced-colors: active) {
    .pvm-hero-home__overlay {
        background: none;
    }

    .pvm-hero-home h1,
    .pvm-hero-home .pvm-hero-text,
    .pvm-hero-home .pvm-hero-kicker {
        text-shadow: none;
    }

    .pvm-hero-home .pvm-btn {
        border: 2px solid currentColor;
    }
}

/* ==========================================================================
   CLAUDE: 18. Print Styles
   ========================================================================== */

@media print {
    .pvm-hero-home {
        min-height: auto;
        background: #ffffff !important;
    }

    .pvm-hero-home__bg,
    .pvm-hero-home__overlay {
        display: none;
    }

    .pvm-hero-home h1,
    .pvm-hero-home .pvm-hero-text,
    .pvm-hero-home .pvm-hero-kicker {
        color: #000000 !important;
        text-shadow: none !important;
    }

    .pvm-hero-home__highlight {
        color: #6B078A !important;
        text-shadow: none !important;
    }
}