/* Halloween-Aktionsbanner – schlankes Band über der Navbar.
   Extern geladen wegen CSP (style-src 'self'; keine Inline-Styles). */

:root { --ec-promo-h: 44px; }
@media (max-width: 575.98px) { :root { --ec-promo-h: 72px; } }

/* Offsets greifen nur, wenn das Banner aktiv ist (Klasse per JS auf <html>) */
html.ec-has-promo body { padding-top: var(--ec-promo-h); }
html.ec-has-promo .ec-navbar {
    top: calc(var(--ec-visual-viewport-top, 0px) + var(--ec-promo-h)) !important;
}

.ec-promo {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--ec-promo-h);
    z-index: 1060; /* über der Navbar (1030), unter dem Cookie-Banner (2000) */
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #0f172a 0%, #1a1026 50%, #0f172a 100%);
    border-bottom: 1px solid rgba(255, 138, 43, .35);
    box-shadow: 0 2px 20px rgba(255, 120, 20, .18);
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
html.ec-has-promo .ec-promo { display: flex; }

.ec-promo__inner {
    display: flex;
    align-items: center;
    gap: .55rem;
    max-width: 1140px;
    width: 100%;
    padding: 0 2.75rem 0 1rem; /* rechts Platz für den Schließen-Button */
    font-size: .95rem;
    line-height: 1.25;
}
.ec-promo__pumpkin { font-size: 1.15rem; margin-right: .3rem; }
.ec-promo__text { color: #e8eaf0; }
.ec-promo__text b { color: #ff9a3d; font-weight: 700; }
.ec-promo__text--short { display: none; }

.ec-promo__cta {
    margin-left: .35rem;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: .28rem .8rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff8a2b, #ff6a00);
    box-shadow: 0 2px 10px rgba(255, 120, 20, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ec-promo__cta:hover {
    transform: translateY(-1px);
    color: #fff;
    box-shadow: 0 4px 16px rgba(255, 120, 20, .5);
}

.ec-promo__close {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #cbd0dc;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: .2rem .5rem;
    border-radius: 8px;
    transition: color .15s ease, background .15s ease;
}
.ec-promo__close:hover { color: #fff; background: rgba(255, 255, 255, .08); }

@media (max-width: 575.98px) {
    .ec-promo__inner {
        flex-direction: column;
        gap: .3rem;
        font-size: .82rem;
        line-height: 1.2;
        padding: .5rem 2.25rem;
        text-align: center;
    }
    .ec-promo__text--full  { display: none; }
    .ec-promo__text--short { display: block; }
    .ec-promo__cta { padding: .18rem .8rem; font-size: .82rem; margin-left: 0; }
}

@media (prefers-reduced-motion: no-preference) {
    .ec-promo__pumpkin { animation: ecPromoWobble 3s ease-in-out infinite; display: inline-block; }
}
@keyframes ecPromoWobble {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-9deg); }
    75%      { transform: rotate(9deg); }
}