#p24p-bar,#p24p-pop{--bg:#050505;--bg2:#1a1a1a;--fg:#fff;--muted:rgba(255,255,255,.8);--acc:#ffd700;--acc2:#b8860b;--btn:#00a514;--btnfg:#fff;--fx:#ffe27a;--card:#0b0b0b;font-family:Poppins,Manrope,Arial,sans-serif}
#p24p-bar.p24p-theme-weihnachten,#p24p-pop.p24p-theme-weihnachten{--bg:#7a0f1a;--bg2:#0f3d2e;--fg:#fff;--muted:rgba(255,255,255,.85);--acc:#ffd56b;--acc2:#e9b949;--btn:#00a514;--fx:#fff;--card:#0f3d2e}
#p24p-bar.p24p-theme-neujahr,#p24p-pop.p24p-theme-neujahr{--bg:#0b1030;--bg2:#1b2560;--fg:#fff;--muted:rgba(255,255,255,.82);--acc:#e8c766;--acc2:#fff2c2;--btn:#00a514;--fx:#e8c766;--card:#0b1030}
#p24p-bar.p24p-theme-fruehling,#p24p-pop.p24p-theme-fruehling{--bg:#eaf7ec;--bg2:#ffffff;--fg:#173a1f;--muted:#2f5a37;--acc:#00a514;--acc2:#5cc46a;--btn:#00a514;--fx:#f7a8c4;--card:#ffffff}
#p24p-bar.p24p-theme-ostern,#p24p-pop.p24p-theme-ostern{--bg:#fff6e5;--bg2:#f1e8ff;--fg:#3b2a4a;--muted:#5d4a6e;--acc:#9b6fd6;--acc2:#f5b5c8;--btn:#00a514;--fx:#b48ee0;--card:#fffdf8}
#p24p-bar.p24p-theme-sommer,#p24p-pop.p24p-theme-sommer{--bg:#ffb627;--bg2:#ff7a3d;--fg:#2a1a00;--muted:#4a3000;--acc:#fff;--acc2:#fff3b0;--btn:#00a514;--fx:#fff7c2;--card:#fff8e8}
html.p24p-lock{overflow:hidden}
/* ---------- Banner ---------- */
#p24p-bar{position:relative;z-index:1001;overflow:hidden;color:var(--fg);background:linear-gradient(90deg,var(--bg),var(--bg2) 50%,var(--bg));border-bottom:2px solid var(--btn);line-height:1.2}
#p24p-bar::before{content:"";position:absolute;top:0;left:-40%;width:35%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg);animation:p24pSweep 5s ease-in-out infinite}
.p24p-bar-in{position:relative;max-width:1200px;margin:0 auto;padding:9px 16px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.p24p-bar-tag{font-weight:800;font-size:16px;letter-spacing:1.5px;text-transform:uppercase;background:linear-gradient(90deg,var(--acc2),var(--acc),#fff,var(--acc),var(--acc2));background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:p24pShine 3s linear infinite;white-space:nowrap}
.p24p-bar-offer{font-size:14px}.p24p-bar-offer strong{font-weight:800;display:block}.p24p-bar-offer span{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px}
/* ---------- Countdown + Button ---------- */
.p24p-cd{display:inline-flex;gap:5px}
.p24p-cd>span{display:flex;flex-direction:column;align-items:center;min-width:38px;padding:3px 4px;border-radius:7px;background:rgba(255,255,255,.12);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.p24p-theme-fruehling .p24p-cd>span,.p24p-theme-ostern .p24p-cd>span,.p24p-theme-sommer .p24p-cd>span{background:rgba(0,0,0,.06)}
.p24p-cd em{font-style:normal}.p24p-cd small{font-size:8.5px;font-weight:600;opacity:.75;text-transform:uppercase;letter-spacing:.4px}
.p24p-btn{display:inline-block;padding:8px 18px;border-radius:30px;background:var(--btn);color:var(--btnfg)!important;font-weight:800;font-size:13px;text-decoration:none!important;white-space:nowrap;animation:p24pPulse 2.2s infinite;transition:transform .2s,filter .2s}
.p24p-btn:hover{transform:translateY(-1px) scale(1.03);filter:brightness(1.1)}
/* ---------- Pop-up ---------- */
#p24p-pop{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px}
#p24p-pop[hidden]{display:none}
.p24p-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.p24p-modal{position:relative;overflow:hidden;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow-y:auto;padding:34px 28px 22px;border-radius:20px;text-align:center;color:var(--fg);background:radial-gradient(120% 80% at 50% 0%,var(--bg2),var(--bg) 70%);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent);transform:translateY(24px) scale(.94);opacity:0;transition:transform .45s cubic-bezier(.2,1.3,.4,1),opacity .3s}
#p24p-pop.is-open .p24p-overlay{opacity:1}#p24p-pop.is-open .p24p-modal{transform:none;opacity:1}
.p24p-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(127,127,127,.18);color:var(--fg);font-size:22px;line-height:1;cursor:pointer;z-index:3}
.p24p-x:hover{background:rgba(127,127,127,.32)}
.p24p-modal>*:not(.p24p-fx):not(.p24p-x){position:relative;z-index:2}
.p24p-kicker{margin:0 0 4px;font-size:15px;font-weight:800;letter-spacing:3px;text-transform:uppercase;background:linear-gradient(90deg,var(--acc2),var(--acc),#fff,var(--acc),var(--acc2));background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:p24pShine 3s linear infinite}
.p24p-theme-fruehling .p24p-kicker,.p24p-theme-ostern .p24p-kicker,.p24p-theme-sommer .p24p-kicker{background:none;-webkit-text-fill-color:var(--acc);color:var(--acc);animation:none}
.p24p-theme-sommer .p24p-kicker{-webkit-text-fill-color:#7a2e00;color:#7a2e00}
.p24p-big{margin:2px 0 8px;font-size:48px;line-height:1;font-weight:800;color:var(--acc);text-shadow:0 0 24px color-mix(in srgb,var(--acc) 45%,transparent);animation:p24pPop .6s .25s both}
.p24p-theme-sommer .p24p-big{color:#fff;text-shadow:0 3px 0 #e05a00,0 0 30px rgba(255,255,255,.6)}
.p24p-theme-fruehling .p24p-big,.p24p-theme-ostern .p24p-big{text-shadow:none}
.p24p-h{margin:0 0 8px!important;font-family:inherit!important;font-size:18px!important;line-height:1.35!important;font-weight:600!important;color:var(--fg)!important}
.p24p-note{display:inline-block;margin:4px 0 14px;padding:6px 12px;border-radius:8px;font-weight:800;font-size:14px;color:var(--fg);background:color-mix(in srgb,var(--acc) 22%,transparent);border:1px dashed var(--acc)}
.p24p-code{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 14px;padding:8px 10px;border-radius:10px;background:rgba(127,127,127,.14);max-width:320px;font-size:12px}
.p24p-code strong{font-size:17px;letter-spacing:2px;font-weight:800}
.p24p-code button{border:0;border-radius:6px;padding:5px 10px;background:var(--btn);color:#fff;font-weight:700;font-size:12px;cursor:pointer}
.p24p-cdwrap{margin:4px 0 16px}.p24p-cdwrap small{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}
.p24p-cdwrap .p24p-cd>span{min-width:52px;padding:6px;font-size:20px}
.p24p-btn-lg{display:block;padding:14px 20px;font-size:15px;border-radius:40px}
.p24p-no{margin-top:10px;border:0;background:none;color:var(--muted);font-size:12px;text-decoration:underline;cursor:pointer}
/* Deko-Element oben je Thema */
.p24p-deco{height:0}
.p24p-theme-weihnachten .p24p-modal::after,.p24p-theme-sommer .p24p-modal::after,.p24p-theme-ostern .p24p-modal::after,.p24p-theme-fruehling .p24p-modal::after{content:"";position:absolute;pointer-events:none;z-index:1}
.p24p-theme-weihnachten .p24p-modal::after{left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(45deg,#c8102e 0 12px,#fff 12px 24px);opacity:.9}
.p24p-theme-sommer .p24p-modal::after{width:260px;height:260px;top:-130px;right:-90px;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.35) 0 10deg,transparent 10deg 20deg);animation:p24pSpin 30s linear infinite}
.p24p-theme-ostern .p24p-modal::after{left:-30px;bottom:-30px;width:120px;height:150px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:repeating-linear-gradient(-20deg,#f5b5c8 0 14px,#b48ee0 14px 28px,#ffe08a 28px 42px);opacity:.35}
.p24p-theme-fruehling .p24p-modal::after{right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,#ffd1e2 0 30%,transparent 31%),radial-gradient(circle at 70% 30%,#c9f2cf 0 25%,transparent 26%);opacity:.8}
/* ---------- Effekte ---------- */
.p24p-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.p24p-fx i{position:absolute;top:-12px;display:block;width:var(--s);height:var(--s);background:var(--fx);border-radius:50%;opacity:0;animation:p24pFall linear infinite}
.p24p-theme-black-november .p24p-fx i{top:auto;bottom:20%;width:4px;height:4px;box-shadow:0 0 8px 2px rgba(255,215,0,.8);animation-name:p24pTwinkle;animation-duration:3s!important}
.p24p-theme-black-november .p24p-fx i:nth-child(odd){bottom:70%}
.p24p-theme-weihnachten .p24p-fx i{background:#fff;box-shadow:0 0 6px rgba(255,255,255,.9)}
.p24p-theme-neujahr .p24p-fx i,.p24p-theme-ostern .p24p-fx i{border-radius:2px;width:calc(var(--s) * .7);height:calc(var(--s) * 1.6);animation-name:p24pConfetti}
.p24p-theme-neujahr .p24p-fx i:nth-child(3n){background:#ff5e7e}.p24p-theme-neujahr .p24p-fx i:nth-child(3n+1){background:#5ec8ff}
.p24p-theme-ostern .p24p-fx i:nth-child(3n){background:#f5b5c8}.p24p-theme-ostern .p24p-fx i:nth-child(3n+1){background:#ffe08a}.p24p-theme-ostern .p24p-fx i:nth-child(3n+2){background:#a8e6cf}
.p24p-theme-fruehling .p24p-fx i{border-radius:60% 0 60% 0;width:calc(var(--s) + 4px);height:calc(var(--s) + 4px);animation-name:p24pPetal}
.p24p-theme-fruehling .p24p-fx i:nth-child(even){background:#ffc2d6}
.p24p-theme-sommer .p24p-fx i{width:calc(var(--s) * 1.4);height:calc(var(--s) * 1.4);background:rgba(255,255,255,.7);animation-name:p24pBubble;top:auto;bottom:-14px}
#p24p-bar .p24p-fx i{animation-duration:6s}
@keyframes p24pFall{0%{opacity:0;transform:translateY(0)}10%{opacity:.9}100%{opacity:0;transform:translate(20px,560px)}}
@keyframes p24pConfetti{0%{opacity:0;transform:translateY(0) rotate(var(--r))}10%{opacity:1}100%{opacity:0;transform:translate(-30px,560px) rotate(calc(var(--r) + 720deg))}}
@keyframes p24pPetal{0%{opacity:0;transform:translate(0,0) rotate(var(--r))}10%{opacity:.9}50%{transform:translate(40px,270px) rotate(calc(var(--r) + 180deg))}100%{opacity:0;transform:translate(-20px,560px) rotate(calc(var(--r) + 360deg))}}
@keyframes p24pBubble{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:.8}100%{opacity:0;transform:translateY(-560px) scale(1.2)}}
@keyframes p24pTwinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.3)}}
@keyframes p24pSweep{0%{left:-40%}60%,100%{left:120%}}
@keyframes p24pShine{0%{background-position:0 0}100%{background-position:250% 0}}
@keyframes p24pPulse{0%{box-shadow:0 0 0 0 rgba(0,165,20,.6)}70%{box-shadow:0 0 0 12px rgba(0,165,20,0)}100%{box-shadow:0 0 0 0 rgba(0,165,20,0)}}
@keyframes p24pPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes p24pSpin{to{transform:rotate(360deg)}}
/* ---------- Mobile ---------- */
@media(max-width:767px){
.p24p-bar-in{gap:6px 8px;padding:8px 10px}
.p24p-bar-tag{width:100%;text-align:center;font-size:14px}
.p24p-bar-offer{width:100%;text-align:center;font-size:12.5px}
.p24p-cd{gap:3px}.p24p-cd>span{min-width:30px;font-size:12.5px;padding:2px}.p24p-cd small{font-size:7.5px}
.p24p-btn{padding:7px 12px;font-size:12px}
#p24p-pop{align-items:flex-end;padding:0}
.p24p-modal{max-width:none;border-radius:22px 22px 0 0;padding:30px 20px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%)}
.p24p-big{font-size:40px}.p24p-h{font-size:16px!important}
.p24p-cdwrap .p24p-cd>span{min-width:46px;font-size:18px}
}
@media(prefers-reduced-motion:reduce){#p24p-bar *,#p24p-pop *,#p24p-bar::before{animation:none!important;transition:none!important}.p24p-fx{display:none}}