/*
 * Shared premium marketing polish (Startseite + Zielgruppen).
 * Richtung A + Design-Kit V2 (PNG-Assets).
 */

/* -------------------------------------------------------------------------
 * Mega-Menü: Eagle-Amber statt blauer Fallbacks
 * ------------------------------------------------------------------------- */

body.marketing-page .topnav__actions .cms-nav__mega-item:hover,
body.marketing-page .topnav__actions .cms-nav__mega-item:focus-visible {
    background: rgba(217, 119, 6, 0.08);
}

body.marketing-page .topnav__actions .cms-nav__mega-item.is-active {
    background: rgba(217, 119, 6, 0.1);
}

body.marketing-page .topnav__actions .cms-nav__mega-icon {
    background: rgba(217, 119, 6, 0.12);
    color: var(--accent);
}

body.marketing-page .topnav__actions .cms-nav__mega {
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.04);
}

/* -------------------------------------------------------------------------
 * Hero — Dashboard / Use-Case PNG
 * ------------------------------------------------------------------------- */

.mkt-hero-visual {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin-inline: auto;
}

.mkt-hero-visual__aurora {
    position: absolute;
    inset: -8% -12% -4%;
    width: calc(100% + 24%);
    height: calc(100% + 16%);
    object-fit: cover;
    z-index: 0;
    opacity: 0.85;
    pointer-events: none;
}

.mkt-hero-visual__shot {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow:
        0 2px 8px rgba(15, 23, 42, 0.05),
        0 28px 56px rgba(15, 23, 42, 0.12);
}

.mkt-hero-visual__shot--usecase {
    max-width: 420px;
    margin-inline: auto;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

@media (min-width: 900px) {
    .mkt-hero-visual {
        margin-inline: 0 0 auto;
    }
}

/* -------------------------------------------------------------------------
 * Feature-Icons (Sprite aus feature-icons.png, 4×2)
 * ------------------------------------------------------------------------- */

.mkt-feature-icon {
    --mkt-sprite-x: 0%;
    --mkt-sprite-y: 0%;
    --mkt-sprite-url: none;
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    background-color: var(--bg-surface-2);
    background-image: var(--mkt-sprite-url);
    background-repeat: no-repeat;
    background-size: 400% 200%;
    background-position: var(--mkt-sprite-x) var(--mkt-sprite-y);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.home-trust__item .mkt-feature-icon,
.home-product__item .mkt-feature-icon {
    margin-bottom: 2px;
}