/* Widget Hero Styles */
/* Mobile-First: Basis-Styles gelten für mobile Geräte */

/* VERPFLICHTEND: overflow: hidden verhindert horizontalen Overflow durch inset: -40px */
.base-hero-widget {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 45px rgba(2,6,23,.22);
    background:
        radial-gradient(900px 420px at 10% 10%, rgba(255, 140, 0, .70), transparent 60%),
        radial-gradient(700px 380px at 70% 10%, rgba(34, 197, 94, .55), transparent 58%),
        radial-gradient(900px 520px at 80% 70%, rgba(59,130,246,.45), transparent 60%),
        radial-gradient(800px 520px at 30% 70%, rgba(239,68,68,.50), transparent 62%),
        linear-gradient(135deg, var(--nav-gradient-1), var(--nav-gradient-2) 55%, var(--nav-gradient-3));
    color: var(--color-text-inverse);
}

.base-hero-widget::after {
    content: "";
    position: absolute;
    inset: -40px;
    background:
        radial-gradient(circle at 15% 25%, rgba(255,255,255,.18) 0 2px, transparent 3px),
        radial-gradient(circle at 35% 65%, rgba(255,255,255,.16) 0 2px, transparent 3px),
        radial-gradient(circle at 55% 30%, rgba(255,255,255,.14) 0 2px, transparent 3px),
        radial-gradient(circle at 75% 50%, rgba(255,255,255,.12) 0 2px, transparent 3px),
        radial-gradient(circle at 85% 20%, rgba(255,255,255,.10) 0 2px, transparent 3px);
    opacity: .8;
    filter: blur(.2px);
    pointer-events: none;
}

.base-hero-widget-inner {
    position: relative;
    padding: 38px 28px 22px;
}

.base-hero-widget h1 {
    margin: 0;
    font-size: 44px;
    line-height: 1.06;
    letter-spacing: -.6px;
    color: var(--color-text-inverse);
}

/* VERPFLICHTEND: Headlines in Hero-Widget müssen weiß sein (überschreibt base-headline-* Klassen) */
.base-hero-widget .base-headline-h1,
.base-hero-widget .base-headline-h2,
.base-hero-widget .base-headline-h3,
.base-hero-widget .base-headline-h4,
.base-hero-widget .base-headline-h5,
.base-hero-widget .base-headline-h6 {
    color: var(--color-text-inverse);
}

.base-hero-widget p {
    margin: 10px 0 18px;
    max-width: 62ch;
    opacity: .92;
}

/* Tablet/iPad (min-width: 600px) */
@media (min-width: 600px) {
    .base-hero-widget-inner {
        padding: 42px 32px 26px;
    }
}

/* Kleiner Desktop/13-Zoll (min-width: 1024px) */
@media (min-width: 1024px) {
    .base-hero-widget-inner {
        padding: 48px 36px 30px;
    }
}

/* Großer Desktop/Widescreen (min-width: 1440px) */
@media (min-width: 1440px) {
    .base-hero-widget-inner {
        padding: 54px 40px 34px;
    }
}