/* ============================================================
   ERA SKIN — 2000s mixtape design system (V1 winner, 12.10.2026)
   Loaded AFTER app.css. Black stage, red accents, white type,
   flowing gradient, sweep CTAs, CD logo. Landing page only.
   ============================================================ */

/* ---- stage: flowing gradient over the whole page ---- */
body.lp{background:linear-gradient(180deg,#101010 0%,#151515 18%,#20100f 34%,#131111 50%,#121212 64%,#2b0d0f 84%,#101010 100%);color:#fff}
body.lp::before{content:"";position:fixed;inset:0;opacity:.45;mix-blend-mode:overlay;pointer-events:none;z-index:0;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.36'/></svg>")}

/* ---- tape banderole ---- */
.tape{background:#C1121F;color:#fff;font:400 12px/1 Anton;letter-spacing:.35em;text-transform:uppercase;text-align:center;padding:9px 6px;position:relative;z-index:30}

/* ---- header / logo ---- */
body.lp .lhead{top:31px}
.lhead .logo.hd.tlogo2{display:flex;flex-direction:column;gap:0;align-items:flex-start;font:400 15px/.98 'Anton';letter-spacing:.14em;margin:0 auto 0 12px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.lhead .logo.hd.tlogo2 span{display:block}
.lhead .logo.hd.tlogo2 span:nth-child(2){color:#C1121F;font-size:12px;letter-spacing:.34em;margin:1px 0}
@media(min-width:900px){.lhead .logo.hd.tlogo2{font-size:19px;margin-left:16px}.lhead .logo.hd.tlogo2 span:nth-child(2){font-size:14px}}
body.lp .lhead .burg{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.25);box-shadow:none;color:#fff}
body.lp .lhead .cartb{color:#fff}

/* ---- hero ---- */
body.lp .lhero{background:transparent;min-height:0;display:block;position:relative}
.hbg{position:relative;width:100%;height:46vh;min-height:300px}
.hbg img{width:100%;height:100%;object-fit:cover;display:block;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.cdimg{position:absolute;top:46px;right:10px;width:118px;transform:rotate(12deg);filter:drop-shadow(0 12px 26px rgba(0,0,0,.55));z-index:6}
body.lp .hcopy{position:relative;padding:4px 20px 36px;z-index:2}
body.lp .lhero .sticker{background:rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.4);color:#fff;box-shadow:none;font:400 13px 'Anton';letter-spacing:.06em;transform:rotate(-2deg)}
body.lp .hcopy h1{color:#fff;line-height:1.04}
body.lp .hcopy h1 em,body.lp .lhero em{color:#C1121F}
.hcopy h1 .mk{position:relative;white-space:nowrap}
.hcopy h1 .mk i{position:absolute;left:-2%;right:-4%;bottom:10%;height:32%;background:#C1121F;transform:rotate(-1.6deg);z-index:-1}
body.lp .hcopy p{color:rgba(255,255,255,.85)}
.pabrow{display:flex;align-items:center;gap:14px;margin-top:14px}
.ctasub{color:rgba(255,255,255,.65);font:700 11.5px Inter;letter-spacing:.14em;text-transform:uppercase;max-width:200px}
.pab{display:inline-flex;flex-direction:column;background:#fff;border:3px solid #000;padding:3px 8px;text-align:center;white-space:nowrap;flex:none}
.pab i{font:800 8px/1.5 Inter;color:#000;letter-spacing:.16em;text-transform:uppercase;font-style:normal}
.pab b{font:900 14px/1.15 Inter;color:#fff;background:#000;letter-spacing:.05em;text-transform:uppercase;padding:1px 4px;margin:1.5px 0}
@media(min-width:900px){
 body.lp .lhero{min-height:92vh;display:flex;align-items:center}
 .hbg{position:absolute;right:0;top:0;width:56vw;height:100%;min-height:0}
 .hbg img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%)}
 body.lp .hcopy{padding:120px 0 60px max(32px,calc((100vw - 1140px)/2));max-width:calc(560px + max(32px,calc((100vw - 1140px)/2)))}
 .cdimg{width:168px;top:62px;right:28px}
}

/* ---- buttons: red block + gold sweep ---- */
body.lp .btn.fire{background:#C1121F;color:#fff;border:3px solid #000;border-radius:0;box-shadow:0 7px 0 #000,0 16px 34px rgba(0,0,0,.5);font-family:'Anton';letter-spacing:.05em;text-transform:uppercase;position:relative;overflow:hidden}
body.lp .btn.fire::after{content:"";position:absolute;inset:0 0 50% 0;background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.02));pointer-events:none}
body.lp .btn.fire::before{content:"";position:absolute;top:-30%;bottom:-30%;width:38%;left:-70%;background:linear-gradient(100deg,transparent,rgba(255,240,180,.55),transparent);transform:skewX(-20deg);animation:erasweep 3s ease-in-out infinite;z-index:1;pointer-events:none}
@keyframes erasweep{0%{left:-70%}55%{left:140%}100%{left:140%}}
body.lp .btn.fire span{position:relative;z-index:2}
body.lp .btn.fire:hover{filter:brightness(1.07)}

/* ---- trust badges as pills ---- */
body.lp .stickbar{background:transparent;padding-top:4px}
body.lp .stk{border:2px solid rgba(255,255,255,.35);border-radius:999px;box-shadow:none;transform:none;background:rgba(0,0,0,.22);color:#fff;font-size:14px}
body.lp .stk.r{border-color:#C1121F;background:rgba(193,18,31,.2)}

/* ---- sections: transparent, light type, red eyebrows ---- */
body.lp .s,body.lp .s.light{background:transparent;color:#fff}
body.lp .s h2,body.lp .s.light h2,body.lp .s h3{color:#fff}
body.lp .eyebrow{color:#C1121F}
body.lp .s p,body.lp .s.light p{color:rgba(255,255,255,.82)}
body.lp .s .help{color:rgba(255,255,255,.6)}
body.lp .s.red{background:radial-gradient(ellipse 110% 90% at 50% 50%,rgba(142,16,19,.55),transparent 78%)}
body.lp .s.red h2{color:#fff}
body.lp .s.red .sub{color:rgba(255,255,255,.85)}

/* ---- cards: dark glass ---- */
body.lp .step{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:none;color:#fff}
body.lp .step h3{color:#fff}
body.lp .step p{color:rgba(255,255,255,.75)}
body.lp .step span{background:#C1121F;color:#fff;border:none;box-shadow:none}
body.lp .exc b{color:#fff}
body.lp .exc small{color:rgba(255,255,255,.6)}
body.lp .styc{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:none;color:#fff}
body.lp .styc b{color:#fff}
body.lp .styc small{color:rgba(255,255,255,.6)}
body.lp .rev{background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.15);border-radius:14px;box-shadow:none;color:#fff}
body.lp .rev b{color:#fff}
body.lp .rev p{color:rgba(255,255,255,.78)}
body.lp .rev .meta{color:rgba(255,255,255,.55)}
body.lp .ad{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:none;color:#fff}
body.lp .ad h3{color:#fff}
body.lp .ad p{color:rgba(255,255,255,.75)}
body.lp .ad .pr{color:#fff;background:#C1121F;padding:2px 10px;border-radius:6px;display:inline-block}
body.lp .crewtxt{color:rgba(255,255,255,.82)}
body.lp .guar{background:rgba(0,0,0,.3)!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:none!important;color:#fff;border-radius:14px}
body.lp .guar h3{color:#fff}
body.lp .guar p{color:rgba(255,255,255,.8)!important}

/* ---- faq / footer / drawers ---- */
body.lp .faq{color:#fff}
body.lp .faq>*{border-color:rgba(255,255,255,.18)!important;background:transparent!important;color:#fff!important;box-shadow:none!important}
body.lp .faq p,body.lp .faq div{color:rgba(255,255,255,.8)}
body.lp footer{background:transparent;color:rgba(255,255,255,.55)}
body.lp footer a{color:rgba(255,255,255,.75)}
body.lp .sticky{background:linear-gradient(transparent,rgba(0,0,0,.85) 40%)}
body.lp .menu,body.lp .cart{background:#161616;color:#fff;border-left:1px solid rgba(255,255,255,.15)}
body.lp .menu a{color:#fff}
body.lp .caro-nav button{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);box-shadow:none}
body.lp .dots i{background:rgba(255,255,255,.3)}
body.lp .dots i.on{background:#C1121F}

/* late overrides */
body.lp .s.foreversec{background:radial-gradient(ellipse 100% 80% at 50% 40%,rgba(142,16,19,.3),transparent 75%)}
body.lp .s.foreversec .eyebrow{color:#C1121F!important}
body.lp footer .logo.stack.ft span{color:#fff;font:400 20px Anton;letter-spacing:.1em;text-transform:uppercase}
body.lp .im{background:#1a1a1a}

/* hard resets gegen Alt-Reste */
body.lp .hcopy h1{font-family:'Anton'!important;font-weight:400;text-transform:uppercase;font-size:clamp(34px,9.6vw,64px);letter-spacing:.01em;color:#fff!important}
@media(min-width:900px){body.lp .hcopy h1{font-size:58px}}
body.lp .btn.fire{background:#C1121F!important;color:#fff!important}
body.lp footer .logo.stack.ft{color:#fff}
body.lp footer .logo.stack.ft span{color:#fff!important;font:400 20px Anton!important;letter-spacing:.1em;text-transform:uppercase}
body.lp footer .logo.stack.ft img{display:none!important}

/* kill remaining purple + unreadable crew text */
body.lp section.s:not(.light):not(.red):not(.yellow){background:transparent}
body.lp section.s.foreversec{background:radial-gradient(ellipse 90% 70% at 50% 35%,rgba(142,16,19,.28),transparent 75%)}
body.lp .crewsec .crewtxt,body.lp section.s .crewtxt{color:rgba(255,255,255,.85)!important}
body.lp .btn.fire.herocta,body.lp .s.red .btn.fire{white-space:nowrap}

/* ===== Feinschliff-Runde 2 ===== */
/* tape groesser */
.tape{font-size:13.5px;padding:12px 8px;letter-spacing:.28em}
/* logo-einheit: mini-cd + stack */
.lhead .logo.hd.tlogo2{flex-direction:row;align-items:center;gap:9px}
.cdmini{width:40px;height:40px;transform:rotate(10deg);filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.tlogo2 .st{display:flex;flex-direction:column;gap:0}
.tlogo2 .st span{display:block}
@media(min-width:900px){.cdmini{width:52px;height:52px}}
/* burger besser sichtbar */
body.lp .lhead .burg{background:#0d0d0d;border:2px solid rgba(255,255,255,.85);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.6)}
/* hero-badge kombiniert */
.pab.pabhero{margin-bottom:16px;transform:rotate(-2deg)}
.pab.pabhero i:last-child{letter-spacing:.08em}
/* buttons: glossy rot, glow schon ohne hover */
body.lp .btn.fire{background:linear-gradient(180deg,#e8323f 0%,#C1121F 45%,#8d0c16 100%)!important;box-shadow:0 7px 0 #000,0 0 26px rgba(193,18,31,.55),0 16px 34px rgba(0,0,0,.5)}
/* pills alle rot */
body.lp .stk{border-color:#C1121F;background:rgba(193,18,31,.16)}
body.lp .pl{border-color:#C1121F;background:rgba(193,18,31,.14)}
/* h2 akzente */
body.lp .s h2 em,body.lp .s.light h2 em{color:#C1121F;font-style:normal}
/* bg: schwarz mit abwechselnd grauen + roten nebeln */
body.lp{background:#0f0f0f}
body.lp section.s:not(.light):not(.red):not(.yellow){background:transparent}
body.lp .s.light{background:radial-gradient(ellipse 110% 85% at 50% 30%,rgba(255,255,255,.05),transparent 80%)}
body.lp .s.red{background:radial-gradient(ellipse 120% 100% at 50% 50%,rgba(142,16,19,.5),transparent 86%);padding-top:84px;padding-bottom:84px}
body.lp section.s.foreversec{background:radial-gradient(ellipse 100% 80% at 50% 35%,rgba(142,16,19,.3),transparent 85%)}
body.lp .s.stysec{background:radial-gradient(ellipse 110% 85% at 50% 30%,rgba(255,255,255,.04),transparent 80%)}
/* reviews: weisse karten, schwarzer text */
body.lp .rev{background:#faf8f3;border:none;color:#141414;box-shadow:0 10px 26px rgba(0,0,0,.4)}
body.lp .rev b{color:#111}
body.lp .rev p{color:#3c3a36}
body.lp .rev .meta{color:#8a867c}

/* logo zentral im header */
.lhead .logo.hd.tlogo2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
body.lp .lhead{position:absolute;display:flex;justify-content:space-between}
/* generiertes advisory-badge */
.pabimg{display:block;width:150px;margin-bottom:16px;transform:rotate(-2deg);filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
@media(min-width:900px){.pabimg{width:170px}}

/* ===== Runde 3 ===== */
/* tape: eine zeile, groesser, leserlich */
.tape{font-size:14px;letter-spacing:.1em;padding:12px 8px;white-space:nowrap;overflow:hidden}
@media(max-width:370px){.tape{font-size:12.5px}}
/* header: nur CD-logo, zentral, kein overlap */
.lhead .logo.hd.tlogo2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
.cdlogo{width:62px;height:62px;display:block;transform:rotate(10deg);filter:drop-shadow(0 4px 12px rgba(0,0,0,.65))}
@media(min-width:900px){.cdlogo{width:84px;height:84px}}
/* 24h-zeile zentriert, weiss, unter dem button */
.ctasub2{text-align:center;color:#fff;font:700 13.5px Inter;letter-spacing:.12em;text-transform:uppercase;margin-top:14px;opacity:.95}
/* pills: rot nur als akzent, bg neutral-grau */
body.lp .pl,body.lp .stk{border-color:#C1121F;background:rgba(255,255,255,.07);color:#fff}
body.lp .stk.r{background:rgba(255,255,255,.07)}
/* gesamtes schwarz etwas heller + wechselnde zonen */
body.lp{background:#141416}
body.lp .stickbar{background:radial-gradient(ellipse 120% 100% at 50% 0%,rgba(255,255,255,.05),transparent 75%)}
body.lp .s.light{background:radial-gradient(ellipse 110% 85% at 50% 30%,rgba(255,255,255,.065),transparent 80%)}

/* fix: foreversec desktop-grid kollabiert im neuen skin -> einspaltig zentriert */
@media(min-width:900px){
 body.lp .foreversec{display:block!important;max-width:900px;margin:0 auto;text-align:center}
 body.lp .foreversec .addons{display:flex;justify-content:center}
 body.lp .foreversec .ad{max-width:460px;text-align:left}
}

/* logo groesser + lesbarer vor buntem bild, balken-fix */
.cdlogo{width:84px;height:84px;filter:drop-shadow(0 0 18px rgba(0,0,0,.9)) drop-shadow(0 4px 12px rgba(0,0,0,.7))}
@media(min-width:900px){.cdlogo{width:104px;height:104px}}
.hcopy h1 .mk i{bottom:18%;height:26%}

/* ===== Runde 4: weiche Sektions-Verlaeufe statt Kanten ===== */
body.lp .s.red{background:linear-gradient(180deg,rgba(142,16,19,0) 0%,rgba(142,16,19,.48) 26%,rgba(142,16,19,.48) 74%,rgba(142,16,19,0) 100%);margin-top:-70px;margin-bottom:-70px;padding-top:150px;padding-bottom:150px;position:relative;z-index:1}
body.lp .s.light{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.06) 25%,rgba(255,255,255,.06) 75%,rgba(255,255,255,0) 100%)}
body.lp .s.stysec{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.05) 25%,rgba(255,255,255,.05) 75%,rgba(255,255,255,0) 100%)}
body.lp section.s.foreversec{background:linear-gradient(180deg,rgba(142,16,19,0) 0%,rgba(142,16,19,.26) 30%,rgba(142,16,19,.26) 70%,rgba(142,16,19,0) 100%)}
body.lp .stickbar{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0))}
/* step-headlines rot */
body.lp .step h3{color:#C1121F}
/* cta mobile minimal groesser */
body.lp .btn.fire.herocta{font-size:21px;padding:21px 16px}

/* step-nummern: rote box raus, dezent */
body.lp .step span{background:#1b1b1e;color:#fff;border:1px solid rgba(255,255,255,.28)}
/* reviews-sektion: hellerer grauer grund hinter den weissen karten */
body.lp .s.light.revsec{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.16) 22%,rgba(255,255,255,.16) 78%,rgba(255,255,255,0) 100%)}

/* ===== steps komplett neu: keine kaesten, bild traegt ===== */
body.lp .step{background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0;padding:0;display:block;position:relative}
body.lp .stimg{width:100%;height:auto;aspect-ratio:4/3;border-radius:14px;border:none;object-fit:cover;display:block;box-shadow:0 14px 34px rgba(0,0,0,.5)}
body.lp .step>span{position:static;display:inline-block;background:none!important;border:none!important;font:400 26px Anton;color:#C1121F;width:auto;margin:14px 10px 0 0;vertical-align:baseline}
body.lp .step>div{display:inline-block;vertical-align:top;margin-top:12px;max-width:calc(100% - 50px)}
body.lp .step h3{color:#C1121F;font-size:20px}
body.lp .step p{color:rgba(255,255,255,.82);font-size:14.5px}
body.lp .steps{gap:30px}
/* steps-sektion: kein grauer film dahinter */
body.lp .s.light:not(.revsec){background:transparent}
body.lp .s.stysec{background:transparent}

/* ===== Runde 5 ===== */
/* cd-logo: verzerrung fixen (app.css setzt height:28px auf .lhead .logo img) */
.lhead .logo.hd img.cdlogo{width:84px!important;height:84px!important;object-fit:contain}
@media(min-width:900px){.lhead .logo.hd img.cdlogo{width:104px!important;height:104px!important}}
/* advisory kleiner, hero-schrift groesser */
.pabimg{width:105px}
@media(min-width:900px){.pabimg{width:120px}}
body.lp .hcopy h1{font-size:clamp(36px,10vw,64px)!important}
body.lp .hcopy p{color:rgba(255,255,255,.93);font-size:17px}
.ctasub2{font-size:15px;letter-spacing:.14em;color:#fff}
/* fade hero -> trustbar: weicher uebergang statt kante */
body.lp .stickbar{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,0) 100%);padding-top:26px}
/* gesamt-schwarz minimal heller */
body.lp{background:#19191c}
/* steps: weisse dicke titel, alles etwas groesser */
body.lp .step h3{color:#fff;font-size:22px;letter-spacing:.03em}
body.lp .step p{font-size:15.5px;color:rgba(255,255,255,.88)}
body.lp .step>span{font-size:30px}
/* spotify/forever-sektion: heller + groesser */
body.lp .foreversec h2{color:#fff;font-size:clamp(30px,6.4vw,48px)}
body.lp .foreversec .hsub{color:rgba(255,255,255,.92);font-size:16.5px}
body.lp .foreversec .ad p{color:rgba(255,255,255,.85)}
/* guarantee: direkt nach mid-cta, helle box */
body.lp .s.guarmoved{padding-top:0;margin-top:-30px;background:transparent}
body.lp .s.guarmoved .guar{background:#faf8f3!important;border:none!important;box-shadow:0 14px 34px rgba(0,0,0,.45)!important;color:#141414;border-radius:14px;max-width:560px;margin:0 auto;text-align:center}
body.lp .s.guarmoved .guar h3{color:#141414;font-size:22px}
body.lp .s.guarmoved .guar p{color:#3c3a36!important}

/* ===== Runde 6 ===== */
/* logo: rechts statt zentral, kein clipping, ein sauberer schatten */
.lhead .logo.hd.tlogo2{position:static;transform:none;margin:0 0 0 auto;left:auto;top:auto}
body.lp .lhead{align-items:center}
.cdlogo{width:66px;height:66px;filter:drop-shadow(0 3px 10px rgba(0,0,0,.6))}
.lhead .logo.hd img.cdlogo{width:66px!important;height:66px!important}
@media(min-width:900px){.cdlogo{width:96px;height:96px}.lhead .logo.hd img.cdlogo{width:96px!important;height:96px!important}}
/* trust-pills: weiss mit schwarzem text */
body.lp .stk{background:#faf8f3;color:#141414;border:none;box-shadow:0 6px 16px rgba(0,0,0,.35)}
body.lp .stk.r{background:#faf8f3;color:#141414}
body.lp .pl{background:#faf8f3;color:#141414;border:none;box-shadow:0 6px 16px rgba(0,0,0,.35)}
body.lp .pl.hot{background:#faf8f3;color:#141414}
/* steps: textbereich als umrandete karte */
.stxt{border:1.5px solid rgba(255,255,255,.22);border-radius:14px;padding:14px 16px;margin-top:14px;background:rgba(255,255,255,.035);display:flex;gap:12px;align-items:flex-start}
body.lp .step>.stxt>span{margin:0;font-size:26px}
body.lp .step .stxt>div{margin:0;display:block;max-width:none}
/* guarantee-stamp platz */
.guarstamp{width:110px;flex:none;margin:0 auto 10px;display:block;transform:rotate(-7deg)}

/* ===== Runde 7 ===== */
/* step-nummern: komplett nackt, als "1." links neben titel */
body.lp .step span{background:none!important;border:none!important;color:#C1121F!important;box-shadow:none!important;padding:0}
body.lp .step>.stxt>span::after{content:"."}
/* mike unten: weisse kachel gegen rot-auf-rot */
body.lp .mike.mikepoint{background:#faf8f3;border-radius:16px;padding:12px 10px 0;box-shadow:0 14px 34px rgba(0,0,0,.45)}
/* guarantee-stempel groesser */
.guarstamp{width:140px}

/* step-nummer exakt neben der headline */
.stxt{display:grid!important;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline}
.stxt>span{line-height:1}
.stxt>div{margin:0!important;display:block!important;max-width:none!important}
/* addon-bilder nicht quetschen */
body.lp .ad .im.sq img{object-fit:contain;background:#141416}

/* ===== H1-Winner: nur MOBILE (Desktop bleibt OG) ===== */
@media(max-width:899px){
 .hbg{height:37vh!important;min-height:300px!important}
 .hbg img{object-position:50% 43%!important}
 body.lp .hcopy{margin-top:-30px;position:relative;z-index:2}
 body.lp .hcopy h1{text-shadow:0 3px 14px rgba(0,0,0,.9)}
 body.lp .hcopy .pabimg{display:none}
}

/* ===== Runde 8: Feinschliff ===== */
/* END HIM: kein Schatten am roten Text */
body.lp .hcopy h1 em{text-shadow:none}
/* Button-Gloss entschaerft (wirkte beim Laden grau), Buttons kraeftiger */
body.lp .btn.fire::after{background:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,0))}
body.lp .btn.fire{padding:18px 16px}
body.lp .btn.fire.herocta{padding:21px 16px}
/* 24h-Zeile ueberall gross & weiss */
.ctasub2{text-align:center;color:#fff!important;font:700 15px Inter!important;letter-spacing:.14em;text-transform:uppercase;margin-top:14px}
/* Steps-Pille volle Breite */
.stxt{width:100%;box-sizing:border-box}
body.lp .step>div.stxt{max-width:none!important;width:100%!important}

/* ===== Desktop-Feinschliff (13.10.) ===== */
@media(min-width:900px){
 /* 24h-Zeile zentriert unter dem Button (Button max-width 380px) */
 body.lp .hcopy .ctasub2{max-width:380px;text-align:center}
 /* Guarantee verschmilzt mit roter Sektion */
 body.lp .s.guarmoved{margin-top:-120px;padding-top:40px;padding-bottom:70px;background:radial-gradient(ellipse 120% 100% at 50% 30%,rgba(142,16,19,.5),transparent 82%)}
 body.lp .s.guarmoved .guar{background:transparent!important;border:none!important;box-shadow:none!important;color:#fff}
 body.lp .s.guarmoved .guar h3{color:#fff}
 body.lp .s.guarmoved .guar p{color:rgba(255,255,255,.88)!important}
 body.lp .s.guarmoved .guarstamp{content:url("/img/guar_stamp_w.png");filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
}

/* foreversec: desktop nebeneinander */
@media(min-width:900px){
 body.lp .foreversec .fwrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1020px;margin:0 auto;align-items:start}
 body.lp .foreversec .fcol .wallh2{margin-top:0!important}
 body.lp .foreversec{max-width:none}
}
/* final-cta mike: ganzes bild auf weisser kachel */
body.lp .mike.mikepoint{width:230px;height:auto;object-fit:contain;background:#faf8f3;border-radius:16px;padding:12px;box-shadow:0 14px 34px rgba(0,0,0,.45)}

/* style-kategorien */
.scat{font:800 11px Inter;letter-spacing:.3em;color:#C1121F;text-transform:uppercase;margin:22px 0 10px;grid-column:1/-1}
body.lp .stydeck .scat{width:100%;flex:0 0 100%}

/* ===== Style-Karten: Kategorie-Banner oben auf jeder Karte ===== */
.styc,.card{position:relative}
.catb{position:absolute;top:0;left:0;right:0;z-index:3;display:block;text-align:center;font:400 10px/1 'Anton';letter-spacing:.3em;text-transform:uppercase;padding:6px 4px 5px}
.catb.os{background:#C1121F;color:#fff}
.catb.ns{background:#faf8f3;color:#141414}
body.lp .styc{overflow:hidden;padding-top:34px}
body.lp .styc .catb{border-radius:14px 14px 0 0}
/* LP: 9 karten als grid, desktop 2 zeilen */
@media(min-width:900px){
 body.lp .stydeck{display:grid!important;grid-template-columns:repeat(5,1fr);gap:14px;overflow:visible;max-width:1140px;margin:0 auto}
 body.lp .stydeck .styc{width:auto;flex:none}
 body.lp .caro-nav[data-for=chips]{display:none}
}

/* ============================================================
   ERA FUNNEL SKIN — quiz / offer / upsell / thank-you
   body.era on top of body.light: dark stage, red accents,
   white type, cream payment boxes, gold only as button sweep.
   ============================================================ */
html.qz,html:has(body.era){background:#19191c!important}
body.era{background:linear-gradient(180deg,#141416 0%,#19191c 30%,#221012 62%,#161618 100%)!important;color:#fff}
body.era::before{content:"";display:block;position:fixed;inset:0;opacity:.4;mix-blend-mode:overlay;pointer-events:none;z-index:0;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.36'/></svg>")}
body.era main,body.era section,body.era .qhead,body.era .ohead{position:relative;z-index:1}
body.era .cta{z-index:9}

/* header + progress */
body.era .qhead,body.era .ohead{background:#0f0f0fee!important;border-color:rgba(255,255,255,.12)!important}
body.era .qhead .logo,body.era .ohead .logo{color:#fff;font-family:'Anton';text-transform:uppercase}
body.era .qhead .logo b,body.era .ohead .logo b{color:#C1121F!important;font-weight:400}
body.era .count{color:rgba(255,255,255,.55)}
body.era .bar{background:rgba(255,255,255,.14)}
body.era .bar i{background:#C1121F}
body.era .back{color:#fff}
body.era .ohead .tp,body.era .ohead .tp *{color:#fff}

/* typo */
body.era h1,body.era h2,body.era h3,body.era .screen h2,body.era .frame h2{color:#fff}
body.era .sub,body.era .help,body.era .frame p{color:rgba(255,255,255,.65)}
body.era .eyebrow{color:#C1121F}
body.era .l,body.era label{color:#fff}
body.era .err{color:#ff6b5e}

/* inputs + cards: dark glass */
body.era .opt,body.era .card,body.era .trk,body.era input,body.era select,body.era textarea,body.era .total,body.era .faq details,body.era .rev,body.era .ept,body.era .plq,body.era .tyline li,body.era .tydrop div,body.era .tysum,body.era .ralt,body.era .rtrk,body.era .teaser{background:rgba(255,255,255,.055);color:#fff;border:1.5px solid rgba(255,255,255,.18);box-shadow:none}
body.era .opt small,body.era .card small,body.era .trk small,body.era .rev .meta,body.era .rtrk small,body.era .bump small,body.era .tyline p,body.era .tydrop p{color:rgba(255,255,255,.62)}
body.era .opt.sel,body.era .card.sel{background:rgba(193,18,31,.18);border-color:#C1121F;box-shadow:0 0 0 1.5px #C1121F}
body.era .opt.sel .r{border-color:#C1121F}body.era .opt.sel .r:after{background:#C1121F}
body.era input::placeholder,body.era textarea::placeholder{color:rgba(255,255,255,.38)}
body.era input:focus,body.era textarea:focus,body.era select:focus{border-color:#C1121F}
body.era .rev p,body.era .teaser p{color:rgba(255,255,255,.78)}
body.era .rev b,body.era .trk b,body.era .rtrk b,body.era .tyline b,body.era .tydrop b{color:#fff}
body.era .card .sim{background:#0d0d0f}
body.era .play{background:#C1121F;color:#fff}body.era .play.on{background:#faf8f3;color:#141414}
body.era .dots i{background:rgba(255,255,255,.3)}body.era .dots i.on{background:#C1121F}
body.era .teaser{border-style:dashed}

/* buttons: red block + black base + gold sweep */
body.era .btn{background:#C1121F!important;color:#fff!important;border:3px solid #000;border-radius:0;box-shadow:0 6px 0 #000,0 14px 30px rgba(0,0,0,.5)!important;font-family:'Anton';letter-spacing:.05em;text-transform:uppercase;position:relative;overflow:hidden}
body.era .btn::before{content:"";position:absolute;top:-30%;bottom:-30%;width:38%;left:-70%;background:linear-gradient(100deg,transparent,rgba(255,240,180,.55),transparent);transform:skewX(-20deg);animation:erasweep 3s ease-in-out infinite;pointer-events:none}
body.era .btn.fire{background:#C1121F!important;color:#fff!important}
body.era .cta{background:linear-gradient(transparent,#17171a 30%)}
body.era .toast{background:#C1121F;color:#fff}
body.era .scrollhint{background:#faf8f3;color:#141414}

/* loading screen */
body.era .load{color:#fff}body.era .load h1{color:#fff}
body.era .pbar{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
body.era .pbar i{background:repeating-linear-gradient(-45deg,#C1121F,#C1121F 10px,#8e1013 10px,#8e1013 20px)}
body.era .load .status{color:rgba(255,255,255,.7)}
body.era .load .mike,body.era .mike{border-radius:14px}

/* ready screen */
body.era .rtrk .no{background:#C1121F;color:#fff;border:none}
body.era .rtrk i{color:rgba(255,255,255,.7)}
body.era .rtrk .new{background:#faf8f3;color:#141414}
body.era .ralt{color:#fff}
body.era .ralt:active{box-shadow:none}
body.era .rnote{color:rgba(255,255,255,.6)}
body.era .link{color:#ff8d84}

/* lyrics cards */
body.era .lyr,body.offer.era .lyr{border:1.5px solid rgba(255,255,255,.2);box-shadow:0 14px 30px rgba(0,0,0,.45);background:#1d1d20;border-radius:14px}
body.era .lyr .top,body.offer.era .lyr .top{background:#C1121F;color:#fff}
body.era .lyr .top span{color:rgba(255,255,255,.85)}
body.era .lyr .sec,body.offer.era .lyr .sec{background:#C1121F;color:#fff}
body.era .lyr .ln{color:rgba(255,255,255,.88)}
body.era .lyrwrap:after{background:linear-gradient(transparent,#1d1d20)}
body.era .unlock{background:#C1121F!important;color:#fff}

/* offer page */
body.era .fence{opacity:.6}
body.era .promo{background:#C1121F;border:3px solid #000;box-shadow:0 10px 26px rgba(0,0,0,.5);border-radius:14px}
body.era .timer{color:#fff}
body.era .bump{background:rgba(255,255,255,.055);border-color:#C1121F;color:#fff}
body.era .bump.sel{background:rgba(193,18,31,.18)}
body.era .bump .pr{color:#fff;background:#C1121F;padding:2px 8px;border-radius:5px}
body.era .bump input{accent-color:#C1121F}
body.era .relf label{color:#fff}
body.era .relf input,body.era .ept select,body.era .ept textarea,body.era .xbf input,body.era .xbf select,body.era .xbf textarea{background:rgba(0,0,0,.3);color:#fff;border:1.5px solid rgba(255,255,255,.25)}
body.era .relf small{color:rgba(255,255,255,.6)}
body.era .total .row.big{border-color:#C1121F}
body.era .total .row .rm{color:#ff8d84}
body.era .trust{color:rgba(255,255,255,.85)}
body.era .whopbox{background:#faf8f3;border:none;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.45)}
body.era .guar{background:#faf8f3!important;border:none!important;box-shadow:0 14px 34px rgba(0,0,0,.45)!important;color:#141414;border-radius:14px}
body.era .guar h3{color:#141414}body.era .guar p{color:#3c3a36!important}
body.era .rmhmodal .mbox{background:#1d1d20;color:#fff;border:1.5px solid rgba(255,255,255,.2);box-shadow:0 20px 50px rgba(0,0,0,.6)}
body.era .rmhmodal .mno{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);box-shadow:none!important}
body.era footer{background:transparent;color:rgba(255,255,255,.55)}
body.era footer a{color:rgba(255,255,255,.75)}

/* thank-you + upsell */
body.era .tystamp{background:transparent;border-color:#4cc46a;color:#4cc46a}
body.era .tysub,body.era .tytip,body.era .tyrec{color:rgba(255,255,255,.7)}
body.era .tyeta{background:#0f0f0f;border:1.5px solid rgba(255,255,255,.18);box-shadow:none}
body.era .tyeta small{color:#ff8d84}
body.era .tyline li>span{background:#C1121F;border:none;color:#fff}
body.era .codewrap code{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:#fff}
body.era .tyend{background:radial-gradient(ellipse 120% 100% at 50% 30%,rgba(142,16,19,.65),rgba(193,18,31,.35));border:1.5px solid rgba(255,255,255,.15)}
body.era .tyend .btn{background:#faf8f3!important;color:#141414!important;box-shadow:0 6px 0 #000!important}
body.era .tyend .help{color:rgba(255,255,255,.75)}
body.era .eplock{background:#C1121F;color:#fff}
body.era .ept>span{color:#C1121F}
body.era .ept small{color:#4cc46a}
body.era .ept.done{background:rgba(76,196,106,.08)}
body.era .epprice{color:#fff}body.era .epprice s{color:rgba(255,255,255,.45)}
body.era .epno{color:rgba(255,255,255,.6)}
/* style-karten play-button: rot statt gold (gold nur als button-sweep) */
body.lp .styc .pp{background:#C1121F;color:#fff;border:none;box-shadow:0 4px 10px rgba(0,0,0,.5)}
/* sektionen im funnel: alles auf dunkler buehne */
body.era .s,body.era .s.light,body.era .s.yellow{background:transparent;color:#fff}
body.era .s.yellow .check li:before{background:#C1121F;color:#fff}
body.era .check li{color:rgba(255,255,255,.88)}
body.era .s p{color:rgba(255,255,255,.82)}
body.era .faq summary{color:#fff}
body.era .faq details,body.era .faq>*{background:transparent!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:none!important}
body.era .faq p{color:rgba(255,255,255,.75)!important}
body.era .tycd,body.era .tycd b{color:#fff}
/* upsell: gelbe EP-box -> dunkle glass-box */
body.era .ep{background:rgba(255,255,255,.055);border:1.5px solid rgba(255,255,255,.18);box-shadow:none;color:#fff}
body.era .ept{background:rgba(0,0,0,.3)}
body.era .ept b{color:#fff}
/* funnel-header: cd-logo */
.cdlogo-f{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 3px 10px rgba(0,0,0,.6));display:block}
body.era .qhead .logo,body.era .ohead .logo{display:flex;align-items:center}
/* hidden-attribut gewinnt gegen display:grid (release/plaque-formulare) */
.relf[hidden]{display:none!important}

/* ===== Feedback-Runde 13.10. abends ===== */
/* logo groesser im funnel-header */
.cdlogo-f{width:64px;height:64px}
@media(min-width:900px){.cdlogo-f{width:76px;height:76px}}
body.era .qhead{padding-top:8px;padding-bottom:6px}
/* quiz style-karten: cover ungecropped (quadratisch), kategorie-header statt banner */
body.era .card .sim{aspect-ratio:1/1}
body.era .card .catb{display:none}
body.era .scat{margin:18px 0 10px;font-size:13px;letter-spacing:.32em}
body.era .scat:first-child{margin-top:0}

/* ready-screen: heller + shiny track-card + knallige buttons */
body.era .ready{background:radial-gradient(ellipse 130% 70% at 50% 0%,rgba(193,18,31,.34),transparent 70%);border-radius:0 0 22px 22px}
body.era .ready .lyr{background:#faf8f3;color:#141414;border:none;box-shadow:0 0 0 3px #C1121F,0 18px 44px rgba(0,0,0,.55)}
body.era .ready .lyr .body{color:#141414}
body.era .ready .lyr .ln{color:#26241f}
body.era .ready .lyr .sec{background:#C1121F;color:#fff}
body.era .ready .lyrwrap:after{background:linear-gradient(transparent,#faf8f3)}
body.era .ready .lyr .blur{color:#26241f}
body.era .ready .btn.fire{box-shadow:0 6px 0 #000,0 0 34px rgba(193,18,31,.65)!important}
body.era .ralt{background:#faf8f3;color:#141414;border:3px solid #000;border-radius:0;box-shadow:0 6px 0 #000;font-family:'Anton';text-transform:uppercase}
body.era .ralt small{color:#4a463d}
body.era .ready .rnote{color:rgba(255,255,255,.75)}

/* offer: schmale weisse deal-bar oben, lock-in = groesster CTA */
.dealbar{background:#faf8f3;color:#141414;text-align:center;font:700 12.5px Inter;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;position:relative;z-index:5}
.dealbar b{font:400 14px 'Anton';color:#C1121F;letter-spacing:.08em;margin-left:8px}
body.era .hero .btn.fire{font-size:21px;padding:20px 16px;box-shadow:0 6px 0 #000,0 0 34px rgba(193,18,31,.55)!important}
body.era .addbtn{margin-top:12px}
a.ralt{text-decoration:none;display:block}
a.ralt small{text-decoration:none}

/* ===== Feedback 13.10. #2: checkout-reihenfolge + add-slot ===== */
/* ohead-logo groesser */
body.era .ohead .cdlogo-f{width:78px;height:78px}
body.era .ohead{padding-top:8px;padding-bottom:8px}
/* "roast another homie" als dezenter #2-slot im track-karten-stil */
.addtrk{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;margin-top:12px;text-decoration:none}
body.era .addtrk{background:rgba(255,255,255,.03);border:1.5px dashed rgba(255,255,255,.3);box-shadow:none;color:#fff}
.addtrk .no{flex:none;width:44px;height:44px;border-radius:10px;font:400 20px Anton;display:flex;align-items:center;justify-content:center}
body.era .addtrk .no{background:rgba(255,255,255,.12);color:rgba(255,255,255,.85);border:none}
.addtrk b{display:block;font:400 17px Anton;text-transform:uppercase;line-height:1.1}
body.era .addtrk small{display:block;color:rgba(255,255,255,.55);font-size:13px;font-weight:600;margin-top:2px}
.addtrk .plus{margin-left:auto;font:400 26px Anton;color:rgba(255,255,255,.6)}

/* ===== song-preview box ===== */
.prevbox{margin:14px 0;padding:14px;border-radius:14px;text-align:left}
body.era .prevbox{background:rgba(193,18,31,.14);border:1.5px solid #C1121F;color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.prevbox b{font:400 17px 'Anton';text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:6px}
.prevbox audio{width:100%;margin:6px 0 2px}
.prevbox .pvst{font-size:13px;color:rgba(255,255,255,.7);margin-top:4px}
body.era .ready .prevbox{background:rgba(0,0,0,.35)}
.pvspin{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:#C1121F;border-radius:50%;margin-right:8px;vertical-align:-2px;animation:pvs 1s linear infinite}
@keyframes pvs{to{transform:rotate(360deg)}}
#pvslot .prevbox{margin-top:0}

/* ===== integrierte teaser-card + custom player ===== */
.pchead{display:flex;gap:12px;align-items:center;margin-bottom:12px;text-align:left}
.pchead .no{width:44px;height:44px;border-radius:10px;background:#C1121F;color:#fff;font:400 20px Anton;display:flex;align-items:center;justify-content:center;flex:none}
.pchead b{font:400 19px Anton;text-transform:uppercase;display:block;line-height:1.05;color:#fff}
.pchead small{color:rgba(255,255,255,.6);font-weight:600;font-size:13px;display:block;margin-top:2px}
.plab{font:800 10.5px Inter;letter-spacing:.24em;color:#ff8d84;display:block;margin:2px 0 8px;text-transform:uppercase}
.pcrow{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 16px 7px 7px}
.pplay{width:48px;height:48px;border-radius:50%;background:#C1121F;color:#fff;border:none;font-size:17px;cursor:pointer;flex:none;box-shadow:0 0 20px rgba(193,18,31,.55);padding-left:3px;transition:transform .1s}
.pplay:active{transform:scale(.94)}
.pplay.on{padding-left:0}
.pbarw{flex:1;height:7px;background:rgba(255,255,255,.18);border-radius:9px;overflow:hidden;cursor:pointer}
.pbarw i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8e1013,#C1121F);border-radius:9px;transition:width .2s linear}
.ptime{font:700 12.5px ui-monospace,monospace;color:rgba(255,255,255,.75);min-width:34px;text-align:right}

/* ===== split-test: full-song varianten-picker + runder add-button ===== */
.pvver{background:rgba(0,0,0,.25);border:1.5px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 12px;margin-bottom:10px}
.pvver.picked{border-color:#C1121F;box-shadow:0 0 0 1.5px #C1121F}
.pvvh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pvvh b{font:400 15px Anton;text-transform:uppercase;color:#fff}
.pickb{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);border-radius:999px;padding:6px 12px;font:700 12px Inter;cursor:pointer}
.pvver.picked .pickb{background:#C1121F;border-color:#C1121F}
/* roast-another: dezenter runder pill-button mit plus */
.ralt2{display:flex;align-items:center;gap:12px;width:100%;background:transparent;border:1.5px dashed rgba(255,255,255,.35);border-radius:999px;padding:10px 18px 10px 10px;cursor:pointer;text-align:left;color:#fff}
.ralt2 .plusc{flex:none;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font:400 24px Anton;display:flex;align-items:center;justify-content:center}
.ralt2 .r2t{font:400 17px Anton;text-transform:uppercase;line-height:1.1}
.ralt2 small{display:block;font:600 11.5px Inter;text-transform:none;color:rgba(255,255,255,.6);margin-top:3px;letter-spacing:0}
.ralt2:hover{border-color:rgba(255,255,255,.6)}

/* ===== Speedrun-Fixes 13.10. ===== */
/* A1: LP-Review-Karten: Text schwarz auf creme (spaete .s-p-Regel ueberstach) */
body.lp .rev b{color:#111!important}
body.lp .rev p{color:#3c3a36!important}
body.lp .rev .meta{color:#8a867c!important}
/* A2: Add-on-Bildboxen gleich gross (Spotify + Plaque) */
body.era .bump .im.port,body.era .bump .im.port.sqc{width:150px;aspect-ratio:3/4;border-radius:12px;overflow:hidden}
body.era .bump .im.port img,body.era .bump .im.port.sqc img{width:100%;height:100%;object-fit:cover}
body.era .bump .relwrap{align-items:stretch}