/* WinLager Editorial Headings - 2026-07-22 */
:root {
    --wl-heading-ink: #07182f;
    --wl-heading-night: #04070d;
    --wl-heading-white: #f7faff;
    --wl-heading-muted: #b9c5d8;
    --wl-heading-cyan: #23c7ee;
    --wl-heading-blue: #3d84ff;
    --wl-heading-violet: #765cff;
}

:where(.hero, .shop-hero, main.content > .section-white:first-child:has(> h1)) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 18%, rgba(28, 203, 226, .16), transparent 34%),
        radial-gradient(circle at 84% 72%, rgba(105, 78, 255, .16), transparent 36%),
        linear-gradient(145deg, #03070c 0%, #071322 52%, #060511 100%) !important;
    color: var(--wl-heading-white);
}

:where(.hero, .shop-hero, main.content > .section-white:first-child:has(> h1))::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -35%;
    pointer-events: none;
    background:
        radial-gradient(circle at 24% 46%, rgba(15, 214, 201, .16), transparent 25%),
        radial-gradient(circle at 72% 38%, rgba(81, 87, 255, .19), transparent 27%);
    filter: blur(34px);
    animation: wl-heading-aurora 14s ease-in-out infinite alternate;
}

:where(.hero, .shop-hero, main.content > .section-white:first-child:has(> h1)) > *,
:where(.hero, .shop-hero) :where(.wrap, .container, .site-container) {
    position: relative;
    z-index: 1;
}

:where(.hero, .shop-hero, main.content > .section-white:first-child:has(> h1)) h1 {
    color: var(--wl-heading-white) !important;
    font-family: "Plus Jakarta Sans", "Instrument Sans", system-ui, sans-serif !important;
    font-size: clamp(2.35rem, 5.25vw, 4.1rem) !important;
    font-weight: 700 !important;
    letter-spacing: -.055em !important;
    line-height: 1.02 !important;
    text-wrap: balance;
    text-shadow: 0 12px 36px rgba(0, 0, 0, .22);
}

:where(.hero, main.content > .section-white:first-child:has(> h1)) h1 {
    max-width: 940px;
    margin-inline: auto !important;
    text-align: center;
}

:where(.hero) :where(.wrap, .container):not(.hero-grid),
main.content > .section-white:first-child:has(> h1) {
    text-align: center;
}

:where(.hero) :where(.ctas, .cta-row, .hero-actions) {
    justify-content: center;
}

:where(.hero, .shop-hero, main.content > .section-white:first-child:has(> h1)) :where(.lead, .hero-subtitle, .hero-copy > p),
main.content > .section-white:first-child:has(> h1) > p {
    color: var(--wl-heading-muted) !important;
}

:where(.hero, .shop-hero) :where(.eyebrow, .wl-heading-kicker),
.wl-heading-kicker {
    display: block;
    margin: 0 0 1.35rem;
    color: #d37a86 !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .34em !important;
    line-height: 1.4;
    text-transform: uppercase;
}

:where(h1, h2) :where(.gradient-text, .accent, .wl-heading-accent),
.shop-hero .hero-copy h1 > span {
    color: transparent !important;
    background: linear-gradient(100deg, var(--wl-heading-cyan) 0%, var(--wl-heading-blue) 47%, var(--wl-heading-violet) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

:where(
    .section-head h2,
    .section-header h2,
    .wrap.content > h2,
    .seo-section > h2,
    .final-cta h2,
    main.content > .section-blue > h2,
    main.content > .section-green > h2,
    main.content > .section-white > h2,
    main.content > .section-orange > h2,
    main.content > .section-dark > h2
) {
    color: var(--wl-heading-ink);
    font-family: "Plus Jakarta Sans", "Instrument Sans", system-ui, sans-serif !important;
    font-size: clamp(1.75rem, 3.4vw, 2.9rem) !important;
    font-weight: 700 !important;
    letter-spacing: -.045em !important;
    line-height: 1.06 !important;
    text-wrap: balance;
}

.section-head h2 {
    max-width: 880px;
    margin-inline: auto;
    text-align: center;
}

.section-head h2::after,
.wrap.content > h2::after,
.seo-section > h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: .7em;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wl-heading-cyan), var(--wl-heading-violet));
}

.section-head h2::after,
.seo-section > h2::after {
    margin-inline: auto;
}

main.content > .section-dark > h2,
.final-cta h2 {
    color: var(--wl-heading-white) !important;
}

@keyframes wl-heading-aurora {
    from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .72; }
    to { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: 1; }
}

@media (max-width: 680px) {
    :where(.hero, .shop-hero, main.content > .section-white:first-child:has(> h1)) h1 {
        font-size: clamp(2.15rem, 11vw, 2.8rem) !important;
        letter-spacing: -.05em !important;
    }

    :where(
        .section-head h2,
        .section-header h2,
        .wrap.content > h2,
        .seo-section > h2,
        .final-cta h2,
        main.content > .section-blue > h2,
        main.content > .section-green > h2,
        main.content > .section-white > h2,
        main.content > .section-orange > h2,
        main.content > .section-dark > h2
    ) {
        font-size: clamp(1.65rem, 8vw, 2.15rem) !important;
    }

    :where(.hero, main.content > .section-white:first-child:has(> h1)) {
        padding-block: 3.5rem !important;
    }

    :where(.hero, .shop-hero) :where(.eyebrow, .wl-heading-kicker),
    .wl-heading-kicker {
        letter-spacing: .24em !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.hero, .shop-hero, main.content > .section-white:first-child:has(> h1))::after {
        animation: none;
    }
}

/* Einheitliche, mittige Kopfzeile auf allen klassischen WinLager-Seiten. */
@media (min-width: 921px) {
    body .site-header:not(.wl-site-header) > .header-inner {
        width: fit-content !important;
        max-width: calc(100% - 32px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
        justify-content: center !important;
    }

    body .site-header:not(.wl-site-header) > .header-inner > .brand {
        margin: 0 !important;
    }

    body .site-header:not(.wl-site-header) > .header-inner > .main-nav {
        flex: 0 1 auto !important;
        justify-content: center !important;
        margin-left: 0 !important;
    }
}

@media (min-width: 901px) {
    body .wl-header > .wl-nav {
        width: fit-content !important;
        max-width: calc(100% - 32px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
        justify-content: center !important;
    }

    body .wl-header > .wl-nav > .wl-menu {
        flex: 0 1 auto !important;
    }
}

@media (max-width: 920px) {
    body .site-header:not(.wl-site-header) > .header-inner {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr) !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    body .site-header:not(.wl-site-header) > .header-inner > .brand {
        grid-column: 2 !important;
        justify-self: center !important;
        margin: 0 !important;
    }

    body .site-header:not(.wl-site-header) > .header-inner > .menu-button {
        grid-column: 3 !important;
        justify-self: end !important;
        margin: 0 !important;
    }

    body .site-header:not(.wl-site-header) > .header-inner > .main-nav {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 900px) {
    body .wl-header > .wl-nav {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr) !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    body .wl-header > .wl-nav > .wl-brand {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        margin: 0 !important;
    }

    body .wl-header > .wl-nav > .wl-toggle {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
    }

    body .wl-header > .wl-nav > .wl-actions {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
    }

    body .wl-header > .wl-nav > .wl-menu {
        grid-column: 1 / -1 !important;
    }
}