.hero-simple {
    position: relative;
    overflow: hidden;
    width: 100%;

    /* --- VARIANTE: PREMIUM GRADIENT --- */
    &.hero-gradient {
        background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
        color: #ffffff; /* Erzwingt weiße Schrift */

        .hero-simple-title { color: #ffffff; }
        .hero-simple-description { color: rgba(255, 255, 255, 0.8); }

        /* Der Glow nur bei dieser Variante */
        &::before {
            content: "";
            position: absolute;
            top: -20%; left: 50%;
            transform: translateX(-50%);
            width: 100%; height: 140%;
            background: radial-gradient(circle at 50% 0%, rgba(6, 182, 212, 0.15) 0%, transparent 60%);
            z-index: 1;
        }
    }

    /* --- VARIANTE: WEISS ODER GRAU --- */
    &.bg-white, &.bg-slate-50 {
        background-color: var(--bg-main, #ffffff);
        color: var(--text-main);
        
        &.bg-slate-50 { background-color: #f8fafc; }
        
        .hero-simple-title { color: inherit; }
        .hero-simple-description { color: var(--text-main); opacity: 0.7; }
    }

    /* Gemeinsame Styles für alle Varianten */
    .hero-simple-title {
        font-size: clamp(1.875rem, 4vw, 2.75rem);
        font-weight: 300;
        line-height: 1.2;
        z-index: 2;
        position: relative;
        .hero-simple-accent { color: var(--current-accent, var(--cyan)); }
    }
    
    .hero-simple-description, .hero-simple-actions {
        z-index: 2;
        position: relative;
    }

    .hero-simple-description {
        margin: 40px 0;
    }
}