/*
 * STYLE ENHANCEMENTS – Design-Stellschrauben für mehr Lebendigkeit
 * Keine rötlichen Hintergründe (wirken kränklich)
 * Rückgängig machen: Link in index.html entfernen (Zeile nach style.css)
 * ==============================================================================
 */

/* 1. HERO: Abstraktes Hintergrundbild – zurückhaltend, hell, True Voice */
#hero {
    background: linear-gradient(160deg,
        rgb(248 250 252) 0%,
        rgb(255 255 255) 30%,
        rgb(241 245 249) 60%,
        rgb(248 250 252) 100%) !important;
}
/* Abstrakte Formen: weiche Kreise/ Ellipsen in neutralen Grau-Blau-Tönen */
#hero::before {
    content: '';
    position: absolute;
    top: -15%;
    right: -5%;
    width: 55%;
    height: 80%;
    background: radial-gradient(ellipse 80% 70% at 70% 30%, rgba(148, 163, 184, 0.08) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
#hero::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -8%;
    width: 45%;
    height: 60%;
    background: radial-gradient(ellipse 60% 80% at 20% 80%, rgba(148, 163, 184, 0.06) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
/* Tech-Pattern etwas sichtbarer, aber dezent */
#hero .absolute.inset-0[style*="radial-gradient"]:first-of-type {
    opacity: 0.045 !important;
}
/* Farb-Orbs: neutral (slate, blaugrau) – KEIN Rot/Pink */
#hero .absolute.top-0.right-0 {
    background: radial-gradient(circle, rgba(148, 163, 184, 0.15) 0%, rgba(226, 232, 240, 0.1) 50%, transparent 70%) !important;
    opacity: 1 !important;
}
#hero .absolute.bottom-0.left-0 {
    background: radial-gradient(circle, rgba(203, 213, 225, 0.12) 0%, rgba(226, 232, 240, 0.08) 50%, transparent 70%) !important;
    opacity: 1 !important;
}

/* 2. HERO: Haken wie bei Produkten – roter Kreis, weißer Haken (gleich oder größer) */
#hero ul li .fa-check {
    font-size: 0.875rem !important;
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #ef4444 !important;
    color: white !important;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 3a. HERO: Tone Lab Button – optisch attraktiver mit Tone-Lab-Farbigkeit */
#hero a[href="#tone-lab"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(59, 130, 246, 0.06) 100%) !important;
    border: 2px solid rgba(139, 92, 246, 0.5) !important;
    color: #5b21b6 !important;
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.2);
    transition: all 0.2s ease;
}
#hero a[href="#tone-lab"]:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%) !important;
    border-color: rgba(139, 92, 246, 0.8) !important;
    color: #6d28d9 !important;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25);
}
#hero a[href="#tone-lab"] i {
    color: #8b5cf6;
}

/* 3. Badge "Mit einem System..." – RÜCKGÄNGIG, wieder gräuliches Feld */
#hero .bg-slate-100.inline-block {
    background: rgb(241 245 249) !important;
    border-color: rgb(226 232 240) !important;
}

/* 4. WARUM TRUE VOICE: Icons größer und mit Schatten */
#why .bg-brand-red.rounded-2xl {
    width: 4rem !important;
    height: 4rem !important;
    font-size: 1.5rem !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#why .bg-slate-50.p-8:hover .bg-brand-red.rounded-2xl {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* 5. WARUM: Farbiger linker Rand + Hover */
#why .bg-slate-50.p-8.rounded-3xl {
    border-left: 4px solid rgba(239, 68, 68, 0.35);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#why .bg-slate-50.p-8.rounded-3xl:hover {
    border-left-color: #ef4444;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* 5a. LEISTUNGEN + KONTAKT: Hintergrundverlauf wie Tone Lab (Rückgängig: Block entfernen) */
#modules .bg-brand-dark,
#contact {
    background: 
        radial-gradient(ellipse 80% 50% at 90% 10%, rgba(139, 92, 246, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 10% 90%, rgba(59, 130, 246, 0.14) 0%, transparent 50%),
        #0f172a !important;
}

/* 6. LEISTUNGEN: Icons in "So rechnet sich" prominenter */
#modules .w-10.h-10.bg-brand-red.rounded-full {
    width: 2.75rem !important;
    height: 2.75rem !important;
    font-size: 1rem !important;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4);
}

/* 7. Section-Hintergründe leicht variiert (weniger flach) */
#why {
    background: linear-gradient(180deg, #ffffff 0%, rgb(252 252 253) 100%) !important;
}
#modules {
    background: linear-gradient(180deg, rgb(248 250 252) 0%, rgb(243 246 250) 100%) !important;
}

/* 7a. LEISTUNGEN – Mobilversion: mehr Platz für Text (Zielgruppe, Typische Herausforderungen)
 * Problem: Auf kleinen Screens addieren sich Container-, Karten- und Innenbox-Padding;
 * Bullet-Listen sind stark eingerückt, Text läuft sehr schmal und lang.
 * Lösung: Reduzierte Abstände nur mobil (HTML: responsive Tailwind p-5/p-4/pl-4);
 * hier zusätzlich auf sehr kleinen Viewports etwas mehr Nutzbreite. Desktop unverändert. */
@media (max-width: 480px) {
    #modules .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    #modules .bg-slate-50.rounded-2xl ul {
        padding-left: 0.875rem; /* etwas weniger Einzug als pl-4, mehr Zeilenbreite */
    }
}

/* 8. TONE LAB: Beispiel-Karten Icons größer + Hover-Glow */
#tone-lab .example-card .rounded-full {
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 1.1rem !important;
}
#tone-lab .example-card:hover {
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.12);
}

/* 9. BRAND TICKER: Neutraler Verlauf – KEIN Rot */
section:has(#brand-ticker) {
    background: linear-gradient(90deg,
        rgb(248 250 252) 0%,
        rgb(241 245 249) 50%,
        rgb(248 250 252) 100%) !important;
}