/* Hover-Glow auf allen Sparten-Seiten (wie Startseite) in der Farbe der Sparte.
   Muss nach den Inline-Styles der Seite geladen werden (Link am Ende von <head>).
   --accent-light statt --accent: der Advisory-Akzent #6b2030 ist zu dunkel zum Leuchten. */
:root { --vg-glow: var(--accent-light, #8ba4ff); }

/* Menü: Glow-Pille ragt über den Link hinaus, damit sich die Abstände nicht verschieben. */
.nav-links a:not(.nav-cta) { position: relative; z-index: 0; transition: color 0.25s, text-shadow 0.25s; }
.nav-links a:not(.nav-cta)::before {
    content: ''; position: absolute; inset: -7px -12px; z-index: -1; border-radius: 999px;
    background: color-mix(in srgb, var(--vg-glow) 24%, transparent);
    border: 1px solid color-mix(in srgb, var(--vg-glow) 60%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--vg-glow) 42%, transparent), 0 0 30px color-mix(in srgb, var(--vg-glow) 22%, transparent);
    opacity: 0; transform: scale(0.9);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta):focus-visible {
    color: #fff;
    text-shadow: 0 0 10px color-mix(in srgb, var(--vg-glow) 85%, transparent), 0 0 22px color-mix(in srgb, var(--vg-glow) 50%, transparent);
}
.nav-links a:not(.nav-cta):hover::before,
.nav-links a:not(.nav-cta):focus-visible::before {
    opacity: 1; transform: scale(1);
    animation: vgNavGlow 2.8s ease-in-out 0.25s infinite;
}
@keyframes vgNavGlow {
    0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--vg-glow) 42%, transparent), 0 0 30px color-mix(in srgb, var(--vg-glow) 22%, transparent); }
    50% { box-shadow: 0 0 20px color-mix(in srgb, var(--vg-glow) 62%, transparent), 0 0 46px color-mix(in srgb, var(--vg-glow) 36%, transparent); }
}
.nav-cta:hover { box-shadow: 0 0 18px color-mix(in srgb, var(--vg-glow) 55%, transparent), 0 0 40px color-mix(in srgb, var(--vg-glow) 32%, transparent); }

/* Kacheln */
.price-card, .faq-item, .hero-card, .roi-card, .trust-item, .proof-card, .demo-audio,
.vw-col, .vw-note, .vw-upgrade, .vc-panel, .vc-result, .step, .stat-item, .funding-card,
.audio-sample, .vs-chip, .nav-back {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.feature-card:hover, .price-card:hover, .faq-item:hover, .roi-card:hover, .trust-item:hover,
.proof-card:hover, .demo-audio:hover, .vw-col:hover, .vw-note:hover, .vw-upgrade:hover,
.vc-panel:hover, .vc-result:hover, .step:hover, .stat-item:hover, .funding-card:hover,
.audio-sample:hover, .vs-chip:hover, .nav-back:hover {
    border-color: color-mix(in srgb, var(--vg-glow) 55%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--vg-glow) 24%, transparent), 0 0 56px color-mix(in srgb, var(--vg-glow) 12%, transparent);
}
.feature-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 28px color-mix(in srgb, var(--vg-glow) 30%, transparent), 0 0 64px color-mix(in srgb, var(--vg-glow) 14%, transparent);
}
.price-card.featured:hover {
    border-color: var(--vg-glow);
    box-shadow: 0 0 48px color-mix(in srgb, var(--vg-glow) 36%, transparent), 0 0 96px color-mix(in srgb, var(--vg-glow) 16%, transparent);
}
.hero-card:hover {
    border-color: color-mix(in srgb, var(--vg-glow) 55%, transparent);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 40px color-mix(in srgb, var(--vg-glow) 26%, transparent), 0 0 90px color-mix(in srgb, var(--vg-glow) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .nav-links a:not(.nav-cta)::before { transition: none; animation: none !important; }
}