/* ===========================================================================
HOTPLAY — Pure Black & Gold (luxury) design system
=========================================================================== */
:root{
/* v23 Spec Tokens */
--color-bg:#0a0a0a; --color-bg-card:#111111; --color-bg-elevated:#161616;
--color-gold:#c9a84c; --color-gold-light:#e8c97a; --color-gold-glow:rgba(201,168,76,0.15);
--color-text-primary:#f0ede6; --color-text-secondary:#8a8680; --color-text-muted:#4a4845;
--color-border:rgba(201,168,76,0.12); --color-border-hover:rgba(201,168,76,0.35);
--radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
--section-gap:120px; --content-max:1200px;
/* Backward-compat Aliases (admin/customer still uses these) */
--bg:var(--color-bg); --bg2:#050505; --panel:var(--color-bg-card); --panel2:#1a1a1a; --elev:var(--color-bg-elevated);
--line:var(--color-border); --line2:var(--color-border-hover);
--txt:var(--color-text-primary); --muted:var(--color-text-secondary); --muted2:var(--color-text-muted);
--gold:var(--color-gold); --gold-lite:var(--color-gold-light); --gold-deep:#8a7235; --amber:#e8c97a;
--grad:linear-gradient(135deg,#c9a84c 0%,#e8c97a 50%,#c9a84c 100%);
--grad-soft:linear-gradient(135deg,rgba(232,201,122,.14),rgba(201,168,76,.08));
--grad-warm:linear-gradient(135deg,#e8c97a 0%,#c9a84c 50%,#8a7235 100%);
--ok:#5fd0a0; --warn:#c9a84c; --bad:#ff6b6b; --info:#7fb8ff;
--r:var(--radius-md); --r-sm:var(--radius-sm); --r-lg:var(--radius-lg); --r-xl:var(--radius-xl);
--shadow:0 20px 60px rgba(0,0,0,.5);
--shadow-gold:0 0 60px var(--color-gold-glow);
--maxw:1200px;
--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'DM Sans','Manrope',system-ui,-apple-system,Segoe UI,sans-serif;
background:var(--bg);color:var(--txt);line-height:1.65;-webkit-font-smoothing:antialiased;letter-spacing:.005em;
text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","tnum"}
::selection{background:rgba(232,184,115,.32);color:#fff}
html{scrollbar-color:#3a3a40 #0a0a0b}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0a0a0b}
::-webkit-scrollbar-thumb{background:#2c2c30;border-radius:8px;border:2px solid #0a0a0b}
::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,label:focus-within{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion: reduce){
.strip-track,.pcol{animation:none!important}
.reveal{opacity:1!important;transform:none!important;transition:none!important}
*{scroll-behavior:auto!important}
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.display,h1,h2,h3.display{font-family:'Fraunces','Playfair Display',Georgia,serif;font-weight:800;letter-spacing:-.022em;line-height:1.04;margin:0 0 .35em;font-variation-settings:"opsz" 144,"SOFT" 50}
h1{font-size:clamp(2.6rem,5.8vw,5.2rem);font-weight:900}
h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:800}
h3{font-family:'DM Sans','Manrope',sans-serif;font-size:1.1rem;font-weight:600;letter-spacing:-.01em;margin:0 0 .3em}
/* Fraunces italic accent — one highlighted word per headline */
.italic{font-style:italic;font-weight:700}
.italic-gold{font-style:italic;font-weight:700;color:var(--color-gold)}
p{margin:0 0 1rem;color:var(--muted)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:68px 0}
.center{text-align:center}
.muted{color:var(--muted)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:.74rem;font-weight:800;letter-spacing:.22em;
text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--grad)}
.section-head{max-width:660px;margin:0 auto 44px;text-align:center}
.section-head p{font-size:1.05rem}
/* ---- buttons (v23) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:15px;
padding:14px 32px;border-radius:999px;border:1px solid transparent;cursor:pointer;font-family:inherit;letter-spacing:.02em;
transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .35s var(--ease),border-color .22s var(--ease);
white-space:nowrap;position:relative;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,#c9a84c 0%,#e8c97a 50%,#c9a84c 100%);background-size:200% 200%;color:#0a0a0a;
box-shadow:0 0 30px rgba(201,168,76,.3);animation:gradient-shift 3s ease infinite}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 50px rgba(201,168,76,.5),0 8px 25px rgba(0,0,0,.3)}
.btn-ghost{background:transparent;border-color:var(--color-border-hover);color:var(--color-text-primary)}
.btn-ghost:hover{background:rgba(201,168,76,.06);border-color:var(--color-gold);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-block{width:100%}
.btn-sm{padding:10px 20px;font-size:13.5px}
@keyframes gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);background:rgba(5,5,6,.7);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.logo-mark{display:grid;place-items:center;flex:0 0 auto;filter:drop-shadow(0 4px 14px rgba(232,184,115,.45))}
.logo-text{line-height:1}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{color:var(--muted);font-weight:600;font-size:.95rem;transition:.15s}
.nav-links a:hover,.nav-links a.active{color:var(--txt)}
.nav-links a.active::after{content:"";display:block;height:2px;width:18px;margin-top:5px;background:var(--grad);border-radius:2px}
@media(max-width:880px){.nav-links a.active::after{display:none}}
.nav-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer}
.nav-links .m-only{display:none}
.nav-links .m-cta{color:var(--gold);font-weight:800}
@media(max-width:880px){
.nav-links{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--bg2);padding:14px 20px;border-bottom:1px solid var(--line);gap:2px;display:none;max-height:calc(100dvh - 72px);overflow:auto}
.nav-links.open{display:flex}.burger{display:block}
.nav-links a{padding:13px 4px;border-bottom:1px solid var(--line)}
.nav-links .m-only{display:block}
.nav-cta .btn{display:none} /* on phones the CTAs live in the burger menu */
}
/* ---- hero (cinematic backdrop) ---- */
.hero{position:relative;overflow:hidden;min-height:82vh;display:flex;align-items:center;padding:96px 0 76px;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
gap:7px;opacity:.16;filter:blur(3px) saturate(.75) brightness(.5);transform:scale(1.06)}
.hero-bg img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px}
.hero-bg.fallback{background:repeating-linear-gradient(135deg,#141416,#141416 40px,#101012 40px,#101012 80px);opacity:.5}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(72% 62% at 50% 20%,rgba(232,184,115,.18),transparent 55%),
linear-gradient(180deg,rgba(5,5,6,.62) 0%,rgba(5,5,6,.9) 60%,var(--bg) 100%)}
.hero-inner{position:relative;z-index:2;max-width:820px;margin:0 auto;text-align:center}
.hero-inner .lead{font-size:1.2rem;color:#cfcdc6;max-width:620px;margin:0 auto 1.4rem}
.hero h1{margin-bottom:18px}
.hero h1 .grad-text{display:inline}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:26px 0 22px}
.trust{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;color:var(--muted2);font-size:.88rem;font-weight:600}
.trust span{display:inline-flex;gap:7px;align-items:center}
.trust b{color:var(--gold);font-weight:800}
/* full-width poster marquee */
.strip{padding:20px 0;border-bottom:1px solid var(--line);overflow:hidden;position:relative;background:var(--bg2)}
.strip::before,.strip::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.strip::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.strip::after{right:0;background:linear-gradient(270deg,var(--bg2),transparent)}
.strip-track{display:flex;gap:13px;width:max-content;animation:marquee 60s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip img{height:150px;width:100px;object-fit:cover;border-radius:9px;flex:0 0 auto;border:1px solid var(--line);box-shadow:0 10px 24px -14px #000}
/* ---- band / stats ---- */
.band{padding:26px 0;border-bottom:1px solid var(--line);background:var(--bg2)}
.band-inner{display:flex;gap:34px;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--muted)}
.band-item{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.92rem}
.band-item b{color:var(--txt);font-weight:800}
/* ---- cards ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:.2s}
.card:hover{border-color:var(--line2);transform:translateY(-5px);background:var(--panel2);box-shadow:0 24px 48px -28px rgba(0,0,0,.85)}
.card .ico{width:48px;height:48px;border-radius:12px;background:var(--grad-soft);border:1px solid var(--line2);
display:grid;place-items:center;font-size:1.4rem;margin-bottom:15px;color:var(--gold)}
.card p{margin:0;font-size:.95rem}
/* ---- pricing ---- */
.price-hero{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
@media(max-width:880px){.price-hero{grid-template-columns:1fr}}
.plan{position:relative;background:linear-gradient(180deg,#16161a,#0e0e10);border:1px solid var(--line2);
border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow)}
.plan .tag{position:absolute;top:20px;right:20px;background:var(--grad);color:#1a1204;font-size:.7rem;font-weight:900;
padding:6px 13px;border-radius:999px;text-transform:uppercase;letter-spacing:.08em}
.price-big{font-family:'Playfair Display',serif;font-size:3.8rem;font-weight:800;line-height:1}
.price-sub{color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}
.price-note{font-size:.85rem;color:var(--muted2)}
.feat-list{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:11px}
.feat-list li{display:flex;gap:11px;align-items:flex-start;color:var(--txt);font-weight:600;font-size:.96rem}
.feat-list li .ok{flex:0 0 auto;width:18px;height:18px;margin-top:2px;position:relative;font-size:0}
.feat-list li .ok::before{content:"";position:absolute;left:6px;top:1px;width:5px;height:10px;border:solid var(--gold);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* compact steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{display:flex;gap:14px;align-items:flex-start}
.step-num{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
font-weight:800;font-family:'Playfair Display',serif;color:#1a1204;background:var(--grad);font-size:1.05rem}
.step h3{margin:2px 0 4px}.step p{margin:0;font-size:.92rem}
/* compact CTA band */
.cta{background:linear-gradient(180deg,#16161a,#0d0d0f);border:1px solid var(--line2);border-radius:var(--r-lg);
padding:44px 32px;text-align:center;box-shadow:var(--shadow)}
.cta .price-big{margin:6px 0 2px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.avail{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;color:var(--muted2);font-size:.88rem;margin-top:14px}
.avail b{color:var(--muted)}
.dev-row{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap;margin:0 0 28px;color:var(--gold);opacity:.92}
.dev svg{width:30px;height:30px}
.ptable{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ptable th,.ptable td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.ptable th{background:var(--bg2);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ptable tr:last-child td{border-bottom:0}
.ptable tr.me{background:var(--grad-soft)}
.ptable .amt{font-weight:800;font-size:1.1rem;color:var(--gold)}
.flag{font-size:1.2rem;margin-right:8px}
.cur-switch{display:inline-flex;gap:6px;background:var(--panel);border:1px solid var(--line);padding:5px;border-radius:999px}
.cur-switch a{padding:7px 15px;border-radius:999px;font-weight:700;font-size:.85rem;color:var(--muted)}
.cur-switch a.active{background:var(--grad);color:#1a1204}
.cur-flag{width:20px;height:14px;object-fit:cover;border-radius:3px;vertical-align:-2px;border:1px solid rgba(255,255,255,.18)}
/* ---- platforms ---- */
.plat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:880px){.plat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.plat-grid{grid-template-columns:repeat(2,1fr)}}
.plat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:22px 14px;text-align:center;transition:.2s;color:var(--muted)}
.plat:hover{transform:translateY(-4px);border-color:var(--line2);color:var(--txt)}
.plat.detected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.plat .pico{font-size:1.9rem;margin-bottom:8px;color:var(--gold)}
.plat .pn{font-weight:800;font-size:.94rem;color:var(--txt)}
.plat .pnote{font-size:.76rem;color:var(--muted2)}
/* ---- faq ---- */
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 22px;margin-bottom:11px;transition:.2s}
.faq details[open]{border-color:var(--line2)}
.faq summary{cursor:pointer;font-weight:800;font-size:1.04rem;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:14px 0 0}
/* ---- footer ---- */
.footer{border-top:1px solid var(--line);padding:54px 0 30px;background:var(--bg2)}
.footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;margin-bottom:34px}
@media(max-width:760px){.footer .cols{grid-template-columns:1fr 1fr}}
.footer h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin:0 0 14px}
.footer a{display:block;color:var(--muted);margin-bottom:9px;font-size:.93rem}
.footer a:hover{color:var(--txt)}
.footer .bottom{border-top:1px solid var(--line);padding-top:22px;color:var(--muted2);font-size:.84rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
/* ---- forms / auth ---- */
.auth-wrap{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:40px 20px}
.auth-card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-lg);padding:38px;box-shadow:var(--shadow)}
label{display:block;font-weight:700;font-size:.84rem;margin:0 0 7px;color:var(--muted)}
.input{width:100%;background:#0c0c0e;border:1px solid var(--line);color:var(--txt);padding:13px 15px;border-radius:11px;font-size:1rem;margin-bottom:16px;font-family:inherit}
.input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,184,115,.16)}
select.input{appearance:none}
textarea.input{resize:vertical;min-height:120px;line-height:1.5}
.alert{padding:13px 16px;border-radius:11px;font-size:.92rem;font-weight:600;margin-bottom:16px}
.alert-bad{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.4);color:#ffb0b0}
.alert-ok{background:rgba(95,208,160,.1);border:1px solid rgba(95,208,160,.4);color:#a7ecca}
.alert-info{background:rgba(232,184,115,.08);border:1px solid var(--line2);color:#f0d9af}
/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.b-active{background:rgba(95,208,160,.14);color:#92e9c2}
.b-paused{background:rgba(232,184,115,.16);color:#f0d09a}
.b-expired{background:rgba(255,107,107,.14);color:#ffb0b0}
.b-pending{background:rgba(127,184,255,.14);color:#bcd9ff}
/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(20px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
/* ---- trial bar ---- */
.trial-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--grad-soft);border:1px solid var(--line2);border-radius:var(--r);padding:18px 24px}
/* ===== ADMIN ===== */
.admin{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:var(--bg2);border-right:1px solid var(--line);padding:22px 16px;position:sticky;top:0;height:100vh;overflow:auto}
.side .logo{margin:4px 8px 26px}
.side a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:11px;color:var(--muted);font-weight:600;margin-bottom:4px;transition:.15s}
.side a:hover{background:rgba(255,255,255,.04);color:var(--txt)}
.side a.active{background:var(--grad-soft);color:var(--gold);border:1px solid var(--line2)}
.side .sep{height:1px;background:var(--line);margin:14px 8px}
.main{padding:30px 34px;max-width:1200px}
.main-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;flex-wrap:wrap;gap:14px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
@media(max-width:1000px){.stat-grid{grid-template-columns:repeat(2,1fr)}.admin{grid-template-columns:1fr}.side{position:static;height:auto;display:flex;flex-wrap:wrap;gap:6px}.side .logo,.side .sep{display:none}}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.stat .k{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);font-weight:700}
.stat .v{font-size:2rem;font-weight:800;margin-top:6px;font-family:'Playfair Display',serif}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:22px}
.panel h3{margin-bottom:16px}
.table{width:100%;border-collapse:collapse;font-size:.92rem}
.table th,.table td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.table th{color:var(--muted2);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.table tbody tr:hover{background:rgba(255,255,255,.025)}
.table .actions{display:flex;gap:6px;align-items:center}
.table-wrap{overflow-x:auto}
.bar{height:9px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.bar i{display:block;height:100%;background:var(--grad)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}
.inline-form{display:inline}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;align-items:end}
.copy{cursor:pointer;border:1px solid var(--line2);background:rgba(232,184,115,.08);color:var(--gold);border-radius:8px;padding:3px 9px;font-size:.78rem}
/* ---- support threads / chat bubbles ---- */
.msg-card{border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px;background:var(--panel)}
.msg-card.unread{border-color:var(--line2);box-shadow:0 0 0 1px rgba(232,184,115,.22)}
.msg-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px;font-size:.85rem}
.thread{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.bubble{max-width:82%;padding:10px 14px;border-radius:13px;font-size:.92rem;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.bubble.cust{align-self:flex-start;background:#17181c;border:1px solid var(--line)}
.bubble.admin{align-self:flex-end;background:var(--grad-soft);border:1px solid var(--line2)}
.bubble .who{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);margin-bottom:3px;font-weight:700}
/* ---- pay ---- */
.pay-wrap{max-width:560px;margin:40px auto;padding:0 20px}
.pay-card{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow);text-align:center}
.pay-amount{font-family:'Playfair Display',serif;font-size:2.6rem;font-weight:800;color:var(--gold)}
.qr{background:#fff;padding:12px;border-radius:16px;display:inline-block;margin:18px 0}
.addr{background:#0c0c0e;border:1px solid var(--line);border-radius:11px;padding:12px;font-family:ui-monospace,monospace;font-size:.84rem;word-break:break-all;display:flex;gap:10px;align-items:center;justify-content:space-between}
.countdown{font-size:1.4rem;font-weight:800;color:var(--gold)}
/* ---- flag grid ---- */
.fg-toolbar{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
.fg-search{flex:0 0 auto}
.flag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.flag-card{position:relative;cursor:pointer;border:1px solid var(--line);border-radius:14px;padding:18px 12px 14px;text-align:center;transition:.18s;background:var(--panel);display:flex;flex-direction:column;gap:7px;align-items:center}
.flag-card input{position:absolute;opacity:0;pointer-events:none}
.flag-card:hover{border-color:var(--line2);transform:translateY(-3px)}
.flag-card.on{border-color:var(--gold);background:var(--grad-soft)}
.fc-flag{height:40px;display:grid;place-items:center}
.fc-flag img{width:56px;height:38px;object-fit:cover;border-radius:7px;box-shadow:0 3px 10px -3px #000;border:1px solid rgba(255,255,255,.18)}
.fc-emoji{font-size:2.1rem;line-height:1}
.fc-name{font-weight:800;font-size:.95rem}
.fc-count{font-size:.7rem;color:var(--muted2)}
.fc-check{position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:50%;background:var(--grad);color:#1a1204;font-size:.8rem;display:grid;place-items:center;opacity:0;transform:scale(.5);transition:.18s;font-weight:900}
.flag-card.on .fc-check{opacity:1;transform:scale(1)}
.flag-card.hide,.flag-card.langhide{display:none}
.fg-langwrap{position:relative}
.lang-toggle .lang-count{margin-left:2px;background:var(--grad);color:#1a1204;border-radius:999px;padding:1px 7px;font-size:.72rem;font-weight:900;display:none}
.lang-toggle.has .lang-count{display:inline-block}
.lang-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;background:var(--panel2);border:1px solid var(--line2);
border-radius:14px;padding:12px;box-shadow:var(--shadow);width:min(440px,88vw);max-height:330px;overflow:auto;
display:none;flex-wrap:wrap;gap:8px}
.lang-menu.open{display:flex}
.lang-opt{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);
font-weight:700;font-size:.82rem;cursor:pointer;font-family:inherit;transition:.12s;white-space:nowrap}
.lang-opt:hover{color:var(--txt);border-color:var(--gold)}
.lang-opt.active{background:var(--grad);color:#1a1204;border-color:transparent}
.fg-section{grid-column:1/-1;font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;
color:var(--gold);border-top:1px solid var(--line);padding-top:16px;margin-top:8px}
/* utility */
.glow-orb,.float-badge,.showcase,.poster-grid,.hero-stage{display:none}
/* genre / actor checkbox picker */
.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-top:6px}
.genre-card{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid rgba(232,184,115,.18);border-radius:11px;cursor:pointer;background:rgba(255,255,255,.02);transition:.15s}
.genre-card:hover{border-color:rgba(232,184,115,.5)}
.genre-card input{position:absolute;opacity:0;width:0;height:0}
.genre-card .gc-check{width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(232,184,115,.4);display:flex;align-items:center;justify-content:center;color:#0a0a0b;font-size:.8rem;font-weight:900;flex:none}
.genre-card.on{border-color:var(--gold);background:rgba(232,184,115,.10)}
.genre-card.on .gc-check{background:linear-gradient(135deg,#E8B873,#d9a55f);border-color:var(--gold)}
.genre-card .gc-name{font-weight:600;font-size:.92rem}
/* collapsible picker sections */
details.gpick{border:1px solid rgba(232,184,115,.18);border-radius:12px;margin:10px 0;background:rgba(255,255,255,.02)}
details.gpick>summary{cursor:pointer;padding:13px 16px;font-weight:800;list-style:none;display:flex;align-items:center;gap:8px}
details.gpick>summary::-webkit-details-marker{display:none}
details.gpick>summary::after{content:'▾';margin-left:auto;opacity:.6;transition:.2s}
details.gpick[open]>summary::after{transform:rotate(180deg)}
details.gpick>summary:hover{background:rgba(232,184,115,.06);border-radius:12px}
details.gpick>.fg-toolbar,details.gpick>.genre-grid,details.gpick>p{margin-left:16px;margin-right:16px}
details.gpick>.genre-grid{margin-bottom:16px}
/* ===========================================================================
Responsive / Geräte-Optimierung (Phone · Tablet · Desktop · TV/4K)
=========================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip;max-width:100%} /* Riegel: nie horizontal verschiebbar (bricht sticky NICHT) */
.table-wrap{-webkit-overflow-scrolling:touch}
/* Tablet & kleinere Laptops */
@media(max-width:1024px){
.section{padding:54px 0}
.main{padding:26px 24px}
}
/* Phones (≤600) — Abstände & Schriftgrößen anpassen, Notch-sichere Ränder */
@media(max-width:600px){
.container{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.section{padding:40px 0}
.hero{min-height:auto;padding:62px 0 50px}
.hero-inner .lead{font-size:1.05rem}
.price-big{font-size:3rem}
.plan,.cta,.auth-card,.pay-card{padding:26px 20px}
.card,.panel{padding:20px}
.main{padding:18px 14px}
.ptable th,.ptable td{padding:11px 12px;font-size:.92rem}
.band-inner{gap:16px}
.trust{gap:14px}
.bubble{max-width:90%}
.section-head{margin-bottom:30px}
}
/* kleine Phones (≤400) */
@media(max-width:400px){
.price-big{font-size:2.5rem}
.hero-cta .btn,.cta-row .btn{width:100%}
.flag-grid,.genre-grid{grid-template-columns:repeat(2,1fr)}
.stat-grid{grid-template-columns:1fr}
.logo{font-size:1.15rem}
}
/* Querformat-Phones (niedrige Höhe) — Hero nicht zu hoch */
@media(max-height:520px) and (orientation:landscape){
.hero{min-height:auto;padding:46px 0 38px}
}
/* tippfreundliche Mindesthöhe auf Touch-Geräten */
@media(hover:none) and (pointer:coarse){
.btn-sm{padding:10px 16px}
.nav-links a{padding:6px 0}
.side a{padding:13px 14px}
}
/* Großbild-Desktop & TV: Breite nutzen + lesbar halten */
@media(min-width:1600px){ :root{--maxw:1320px} }
@media(min-width:2000px){ :root{--maxw:1480px} }
@media(min-width:2560px){ html{font-size:18px} .main{max-width:1600px} } /* große TV/Monitore */
@media(min-width:3400px){ html{font-size:22px} } /* 4K TV (10-foot) */
/* ===========================================================================
ADMIN REDESIGN v19 — compact panels, row menus, status dots, table search
(new class names only → does not affect existing responsive rules)
=========================================================================== */
/* panel header: title left, search/actions right */
.panel-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.panel-head h3{margin:0;display:flex;align-items:center;gap:9px;font-size:1.06rem}
.panel-head .ph-sub{flex-basis:100%;margin:-6px 0 0;font-size:.82rem;color:var(--muted);font-weight:600}
.panel-head .ph-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.count-chip{font-size:.74rem;font-weight:800;color:var(--gold);background:var(--grad-soft);
border:1px solid var(--line2);border-radius:999px;padding:2px 11px;line-height:1.7}
/* tighter table rows + secondary line under a cell value */
.table.compact th,.table.compact td{padding:9px 12px}
.table .sub{display:block;color:var(--muted2);font-size:.72rem;font-weight:600;margin-top:2px}
.table .uname{font-weight:800}
/* status as a glowing dot + label (replaces chunky badges in admin tables) */
.st{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.84rem;white-space:nowrap}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted2)}
.st-active::before{background:var(--ok);box-shadow:0 0 9px rgba(95,208,160,.65)}
.st-paused::before{background:var(--warn);box-shadow:0 0 9px rgba(232,184,115,.5)}
.st-expired::before{background:var(--bad)}
.st-pending::before{background:var(--info);box-shadow:0 0 9px rgba(127,184,255,.5)}
.rest{display:block;color:var(--muted);font-weight:600;font-size:.74rem;margin-top:3px}
.rest.warn{color:var(--warn)} .rest.bad{color:var(--bad)}
/* inline search box for tables */
.tbl-search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);
border-radius:10px;padding:6px 12px;min-width:210px}
.tbl-search::before{content:"🔍";font-size:.82rem;opacity:.6}
.tbl-search input{background:none;border:none;color:var(--txt);font:inherit;font-size:.86rem;width:100%;
outline:none;padding:0;margin:0}
.tbl-search input::placeholder{color:var(--muted2)}
.tbl-empty{color:var(--muted2);text-align:center;padding:22px 0;font-size:.9rem}
/* square icon button */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
border:1px solid var(--line);background:transparent;color:var(--muted);font-size:1.15rem;cursor:pointer;
transition:.15s;line-height:1;padding:0}
.icon-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(232,184,115,.08)}
/* row action dropdown (positioned with JS as fixed → never clipped by table scroll) */
.menu{position:relative;display:inline-block}
.menu-pop{display:none;position:absolute;z-index:70;min-width:212px;background:var(--elev);
border:1px solid var(--line2);border-radius:13px;padding:6px;box-shadow:0 26px 64px -22px rgba(0,0,0,.92)}
.menu.open .menu-pop{display:block}
.menu-pop form{margin:0;display:block}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;
color:var(--txt);font:inherit;font-size:.87rem;font-weight:600;padding:9px 11px;border-radius:9px;
cursor:pointer;white-space:nowrap;text-decoration:none}
.menu-item:hover{background:rgba(232,184,115,.1);color:var(--gold-lite)}
.menu-item.primary{color:var(--gold)}
.menu-item.danger{color:#ff9a9a}
.menu-item.danger:hover{background:rgba(255,107,107,.13);color:#ffb0b0}
.menu-sep{height:1px;background:var(--line);margin:5px 6px}
.menu-form{padding:8px 9px 4px}
.menu-form label{display:block;font-size:.68rem;color:var(--muted2);text-transform:uppercase;letter-spacing:.05em;margin:0 0 5px}
.menu-form .input{margin:0 0 7px;padding:8px 11px;font-size:.84rem}
.menu-form .menu-item{justify-content:center;background:var(--grad-soft);border:1px solid var(--line2);margin-top:2px}
/* two-column management grid that stacks on small screens */
.cols-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:18px;align-items:start}
@media(max-width:520px){.cols-2{grid-template-columns:1fr}.tbl-search{min-width:0;flex:1}}
/* sidebar group label */
.side .grp{font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted2);
font-weight:800;margin:16px 14px 6px}
@media(max-width:1000px){.side .grp{display:none}}
/* ===========================================================================
v21 — Editorial Premium Layer (Fraunces typography, warm palette refinement,
generous whitespace, micro-animations). Additive — does not break v19/v20.
=========================================================================== */
/* Refined hero — bigger type, generous breath, italic accent for one word */
.hero{padding:120px 0 88px;min-height:auto}
.hero h1{font-size:clamp(2.8rem,6vw,5rem);letter-spacing:-.022em;line-height:1.04;margin-bottom:22px;font-weight:700}
.hero-inner{max-width:880px}
.hero-inner .lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:#d6d3cb;max-width:580px;margin:0 auto 1.8rem;line-height:1.65}
.hero-cta{gap:16px;margin:30px 0 30px}
.hero .trust{gap:34px;color:var(--muted);font-size:.9rem;margin-top:14px}
.hero .trust b{font-family:'Playfair Display',serif;font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.hero::after{background:radial-gradient(72% 62% at 50% 18%,rgba(232,184,115,.16),transparent 55%),linear-gradient(180deg,rgba(5,5,6,.65) 0%,rgba(5,4,3,.92) 60%,var(--bg) 100%)}
.hero-bg{opacity:.14;filter:blur(4px) saturate(.7) brightness(.45);transform:scale(1.08)}
@media(max-width:600px){.hero{padding:78px 0 56px}}
/* Section rhythm — generous whitespace as luxury signal */
.section-tight{padding:92px 0}
.section-grand{padding:120px 0}
.section-velvet{background:radial-gradient(120% 80% at 50% 0%,rgba(232,184,115,.05),transparent 55%),var(--bg)}
.section-alt{background:linear-gradient(180deg,#0c0a08 0%,var(--bg) 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:880px){.section-tight{padding:68px 0}.section-grand{padding:84px 0}}
@media(max-width:600px){.section-tight{padding:54px 0}.section-grand{padding:62px 0}}
/* Editorial section-head: smaller eyebrow, larger H2, breathing space */
.shead{max-width:680px;margin:0 auto 56px;text-align:center}
.shead .eyebrow{margin-bottom:22px}
.shead h2{margin:0 0 16px;font-size:clamp(2.1rem,4.4vw,3.4rem)}
.shead p{font-size:1.08rem;color:var(--muted);margin:0;line-height:1.65}
@media(max-width:600px){.shead{margin-bottom:38px}.shead h2{font-size:1.85rem}}
/* Refined eyebrow with hairline rule */
.eyebrow{font-size:.7rem;letter-spacing:.26em;color:var(--gold);font-weight:700;text-transform:uppercase;margin-bottom:20px}
.eyebrow::before{width:30px;background:var(--gold);opacity:.5}
/* ---- Editorial Split (feature row): asymmetric, breathing ---- */
.frow{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.frow.flip{grid-template-columns:.95fr 1.05fr}
.frow.flip>.frow-text{order:2}
@media(max-width:880px){.frow,.frow.flip{grid-template-columns:1fr;gap:36px}.frow.flip>.frow-text{order:0}}
.frow h2{margin:14px 0 18px}
.frow .frow-text p{font-size:1.06rem;line-height:1.72;color:var(--muted);max-width:46ch}
.frow-vis{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line2);background:var(--panel);min-height:340px;display:grid;place-items:center;box-shadow:var(--shadow)}
.frow-vis .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:24px;width:100%}
.frow-vis .pgrid img{aspect-ratio:2/3;object-fit:cover;border-radius:10px;box-shadow:0 14px 30px -16px #000;transition:transform .5s var(--ease)}
.frow-vis:hover .pgrid img:nth-child(2n){transform:translateY(-6px) rotate(-1deg)}
.frow-vis:hover .pgrid img:nth-child(2n+1){transform:translateY(-4px) rotate(1deg)}
/* Big-number stat tiles — editorial */
.stat-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:980px;margin:0 auto}
@media(max-width:880px){.stat-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.stat-tiles{grid-template-columns:1fr}}
.tile{background:linear-gradient(180deg,var(--panel) 0%,var(--bg) 100%);border:1px solid var(--line);border-radius:18px;padding:28px 24px 26px;text-align:left;transition:.3s var(--ease);position:relative;overflow:hidden}
.tile::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 0% 0%,rgba(232,184,115,.06),transparent 60%);opacity:0;transition:.4s var(--ease)}
.tile:hover{border-color:var(--line2);transform:translateY(-5px);box-shadow:var(--shadow-gold)}
.tile:hover::before{opacity:1}
.tile>*{position:relative;z-index:1}
.tile .num{font-family:'Playfair Display',serif;font-size:clamp(2.3rem,4.2vw,3.1rem);font-weight:700;background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;display:block;letter-spacing:-.02em}
.tile .lbl{font-size:.86rem;color:var(--muted);font-weight:500;margin-top:12px;display:block;line-height:1.55}
/* Single Plan Spotlight — focal pricing card on home + pricing pages */
.plan-spot{position:relative;background:linear-gradient(165deg,#1a1611 0%,#0e0c0a 60%);border:1px solid var(--line2);border-radius:var(--r-xl);padding:48px 44px;box-shadow:var(--shadow);max-width:560px;margin:0 auto;overflow:hidden}
.plan-spot::before{content:"";position:absolute;top:-40%;right:-20%;width:80%;height:160%;background:radial-gradient(closest-side,rgba(232,184,115,.18),transparent 70%);pointer-events:none}
.plan-spot::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(232,184,115,.5),transparent)}
.plan-spot>*{position:relative;z-index:1}
.plan-spot .spot-eyebrow{display:inline-block;font-size:.7rem;letter-spacing:.24em;color:var(--gold);font-weight:700;text-transform:uppercase;margin-bottom:14px}
.plan-spot .spot-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,3.6vw,2.6rem);font-weight:700;margin:0 0 8px;letter-spacing:-.018em;line-height:1.12}
.plan-spot .spot-sub{font-size:1rem;color:var(--muted);margin:0 0 28px;line-height:1.6}
.plan-spot .spot-price{display:flex;align-items:baseline;gap:14px;margin:0 0 8px}
.plan-spot .spot-amount{font-family:'Playfair Display',serif;font-size:clamp(3.8rem,7vw,5.2rem);font-weight:700;background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;letter-spacing:-.03em}
.plan-spot .spot-cur{font-family:'Manrope',sans-serif;font-size:1rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.plan-spot .spot-meta{font-size:.92rem;color:var(--muted2);margin:0 0 28px}
.plan-spot .spot-feats{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:14px}
.plan-spot .spot-feats li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;color:var(--txt);line-height:1.5;font-weight:500}
.plan-spot .spot-feats li::before{content:"✓";flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--grad);color:#1a1204;font-weight:900;font-size:.72rem;display:inline-grid;place-items:center;margin-top:2px;box-shadow:0 4px 12px -4px rgba(232,184,115,.6)}
.plan-spot .spot-cta{display:block;width:100%;font-size:1rem;padding:16px 26px}
.plan-spot .spot-foot{font-size:.84rem;color:var(--muted2);margin:18px 0 0;text-align:center}
@media(max-width:600px){.plan-spot{padding:34px 26px;border-radius:20px}.plan-spot .spot-amount{font-size:3.4rem}}
/* Compact luftiger FAQ (home preview + main FAQ) */
.faq-mini{max-width:680px;margin:0 auto}
.faq-mini details{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:24px 4px;margin:0;transition:.2s var(--ease)}
.faq-mini details:last-child{border-bottom:0}
.faq-mini details[open]{padding-bottom:28px}
.faq-mini summary{cursor:pointer;font-family:'Manrope',sans-serif;font-weight:700;font-size:clamp(1rem,1.5vw,1.13rem);list-style:none;display:flex;justify-content:space-between;gap:18px;color:var(--txt);letter-spacing:-.005em;line-height:1.4;transition:color .2s var(--ease)}
.faq-mini summary:hover{color:var(--gold-lite)}
.faq-mini summary::-webkit-details-marker{display:none}
.faq-mini summary::after{content:"";flex-shrink:0;width:24px;height:24px;border:1px solid var(--line2);border-radius:50%;background:radial-gradient(circle,var(--gold) 1.5px,transparent 1.5px) center/3px 3px no-repeat,radial-gradient(circle,transparent 0,transparent 100%);position:relative;transition:.3s var(--ease);margin-top:4px}
.faq-mini details[open] summary::after{background:var(--gold);transform:rotate(180deg)}
.faq-mini p{margin:14px 0 0;color:var(--muted);font-size:1rem;line-height:1.72;max-width:60ch}
/* Final CTA — focal grand */
.cta-grand{position:relative;background:linear-gradient(140deg,#1a1611 0%,#0c0a08 100%);border:1px solid var(--line2);border-radius:var(--r-xl);padding:80px 40px;text-align:center;overflow:hidden;box-shadow:var(--shadow)}
.cta-grand::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 50% 0%,rgba(232,184,115,.16),transparent 60%);pointer-events:none}
.cta-grand::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:140px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.cta-grand>*{position:relative;z-index:1}
.cta-grand h2{font-size:clamp(2.1rem,4.4vw,3.4rem);margin:0 0 18px;font-weight:600}
.cta-grand p{font-size:1.12rem;max-width:560px;margin:0 auto 32px;line-height:1.65;color:var(--muted)}
@media(max-width:600px){.cta-grand{padding:50px 22px;border-radius:20px}}
/* WhatsApp CTA card (contact page) */
.wa-card{display:flex;gap:18px;align-items:center;background:linear-gradient(140deg,rgba(37,211,102,.1),rgba(37,211,102,.03));
border:1px solid rgba(37,211,102,.32);border-radius:18px;padding:22px 24px;margin-bottom:22px;transition:.2s var(--ease)}
.wa-card:hover{border-color:rgba(37,211,102,.5);transform:translateY(-2px)}
.wa-card .wa-ic{flex:0 0 auto;width:52px;height:52px;border-radius:14px;background:#25d366;color:#fff;display:grid;place-items:center;font-size:1.8rem}
.wa-card .wa-meta{flex:1;min-width:0}
.wa-card .wa-meta h3{margin:0 0 3px;font-family:'Manrope',sans-serif;font-size:1.02rem;font-weight:800;color:var(--txt)}
.wa-card .wa-meta p{margin:0;font-size:.9rem;color:var(--muted)}
.wa-card .btn{flex-shrink:0}
@media(max-width:520px){.wa-card{flex-wrap:wrap}.wa-card .btn{width:100%}}
/* Nav scroll shadow */
.nav{transition:background-color .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.nav.scrolled{box-shadow:0 8px 28px -12px rgba(0,0,0,.7);background:rgba(5,4,3,.88);border-bottom-color:var(--line2)}
.nav-links a{transition:color .2s var(--ease)}
.logo{transition:transform .25s var(--ease)}
.logo:hover{transform:translateY(-1px)}
.logo-mark svg{transition:transform .35s var(--ease),filter .35s var(--ease)}
.logo:hover .logo-mark svg{transform:rotate(-4deg) scale(1.04);filter:drop-shadow(0 6px 20px rgba(232,184,115,.65))}
/* Footer polish */
.footer{padding:80px 0 40px}
.footer-cta{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.footer-cta a{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-weight:600;font-size:.92rem;transition:gap .2s var(--ease)}
.footer-cta a:hover{gap:12px;color:var(--gold-lite)}
/* Refined button micro-animation */
.btn{position:relative;transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease)}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn-primary:hover::after{transform:translateX(120%)}
/* Refined card hover */
.card{transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
/* Premium platforms card */
.plat{transition:transform .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.plat:hover{background:var(--panel2);box-shadow:0 18px 36px -22px rgba(0,0,0,.9)}
/* Subtle pill */
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;background:rgba(232,184,115,.05);border:1px solid var(--line2);color:var(--gold-lite);font-size:.82rem;font-weight:600;letter-spacing:.02em}
/* Smooth fade-up reveal upgrade */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* ---- Verfügbarkeits-Checker (Editorial Split 2: Selber prüfen) ---- */
.checker{padding:34px 30px;width:100%;display:flex;flex-direction:column;gap:14px}
.checker-input{position:relative;display:flex;align-items:center;background:#0c0a08;border:1.5px solid var(--line2);border-radius:14px;transition:.25s var(--ease);overflow:hidden}
.checker-input:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(232,184,115,.12)}
.checker-input .ci-ic{position:absolute;left:16px;font-size:1.05rem;color:var(--gold);pointer-events:none;line-height:1}
.checker-input input{flex:1;background:transparent;border:0;color:var(--txt);font:inherit;font-size:1rem;padding:16px 16px 16px 46px;outline:none;font-weight:500}
.checker-input input::placeholder{color:var(--muted2)}
.checker-input .ci-spin{position:absolute;right:18px;width:18px;height:18px;border:2px solid rgba(232,184,115,.25);border-top-color:var(--gold);border-radius:50%;animation:cspin .8s linear infinite;opacity:0;transition:opacity .2s}
.checker-input.loading .ci-spin{opacity:1}
@keyframes cspin{to{transform:rotate(360deg)}}
.checker-meta{font-size:.78rem;color:var(--muted2);min-height:1.2em;line-height:1.4;letter-spacing:.02em}
.checker-meta.fuzzy{color:var(--warn)}
.checker-meta.found{color:var(--ok)}
.checker-results{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;padding:6px;max-height:300px;overflow-y:auto;display:none}
.checker-results.show{display:block}
.checker-results::-webkit-scrollbar{width:8px}
.checker-results::-webkit-scrollbar-track{background:transparent}
.checker-results::-webkit-scrollbar-thumb{background:rgba(232,184,115,.15);border-radius:4px}
.cr-row{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;transition:background .15s var(--ease)}
.cr-row+.cr-row{margin-top:1px}
.cr-row:hover{background:rgba(232,184,115,.06)}
.cr-badge{flex:0 0 auto;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;line-height:1.5}
.cr-badge.tv{background:rgba(127,184,255,.14);color:#bcd9ff}
.cr-badge.film{background:rgba(232,184,115,.14);color:var(--gold-lite)}
.cr-badge.serie{background:rgba(199,138,234,.14);color:#dab8f1}
.cr-name{flex:1;min-width:0;font-size:.92rem;color:var(--txt);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.cr-check{flex:0 0 auto;color:var(--ok);font-size:1rem;line-height:1}
.checker-empty{text-align:center;padding:18px 14px;color:var(--muted);font-size:.9rem}
.checker-empty strong{color:var(--gold-lite)}
.checker-empty .em-hint{font-size:.78rem;color:var(--muted2);margin-top:6px;display:block}
/* ---- Checkout Modal (v22) ---- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer}
.modal-panel{position:relative;background:linear-gradient(170deg,var(--panel) 0%,var(--bg) 80%);border:1px solid var(--line2);border-radius:24px;padding:38px 34px 32px;max-width:480px;width:100%;max-height:calc(100vh - 40px);overflow:auto;box-shadow:var(--shadow);animation:modalUp .35s var(--ease) both}
@keyframes modalUp{from{opacity:0;transform:translateY(24px) scale(.97)} to{opacity:1;transform:none}}
.modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);font-size:1.5rem;cursor:pointer;display:grid;place-items:center;transition:.2s var(--ease);font-family:inherit;line-height:1;padding:0}
.modal-close:hover{background:rgba(255,255,255,.12);color:var(--txt);transform:rotate(90deg)}
.modal-head{margin-bottom:22px;padding-right:40px}
.modal-head .eyebrow{margin-bottom:10px}
.modal-head h3{font-family:'Playfair Display',serif;font-size:1.65rem;font-weight:700;margin:0 0 6px;letter-spacing:-.018em;line-height:1.15}
.modal-head p{margin:0;font-size:.94rem;color:var(--muted);line-height:1.5}
.modal-panel form{display:flex;flex-direction:column;gap:2px}
.modal-panel label{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:8px 0 6px}
.modal-panel .input{padding:13px 15px;font-size:.96rem;margin-bottom:0}
.modal-panel .pay-note{display:flex;gap:10px;align-items:center;background:rgba(232,184,115,.04);border:1px solid var(--line2);border-radius:11px;padding:11px 14px;margin-top:16px;font-size:.8rem;color:var(--muted);line-height:1.5}
.modal-panel .pay-note .pn-ic{flex:0 0 auto;font-size:1rem}
@media(max-width:600px){.modal-panel{padding:30px 22px 26px;border-radius:20px}.modal-head h3{font-size:1.45rem}}
/* ===========================================================================
v23 — Premium IPTV Spec Layer (Fraunces + DM Sans, Glassmorphism, Gold-Glow)
Replaces the public site (hero, sections, pricing-spot, etc.). Admin/customer
inherit colors via aliases on :root but keep their layout.
=========================================================================== */
/* ---- Glass-Card base ---- */
.glass{background:rgba(255,255,255,.03);border:1px solid var(--color-border);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border-radius:var(--radius-lg);
box-shadow:0 0 0 .5px var(--color-border),0 20px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.glass:hover{border-color:var(--color-border-hover);
box-shadow:0 0 0 .5px var(--color-border-hover),0 20px 80px rgba(0,0,0,.5),0 0 40px var(--color-gold-glow)}
/* ---- Eyebrow with star or hairline ---- */
.eyebrow-stars{display:inline-flex;align-items:center;gap:14px;font-size:11.5px;letter-spacing:.32em;color:var(--color-gold);font-weight:600;text-transform:uppercase;font-family:'DM Sans',sans-serif;margin-bottom:20px}
.eyebrow-stars::before,.eyebrow-stars::after{content:"★";font-size:11px;opacity:.85}
/* ---- Container ---- */
.wrap{max-width:var(--content-max);margin:0 auto;padding:0 24px}
@media(max-width:600px){.wrap{padding:0 20px}}
/* ============ HERO v23 ============ */
.hero{position:relative;overflow:hidden;padding:140px 0 100px;min-height:auto;border-bottom:0;background:var(--color-bg)}
.hero-bg{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:7px;opacity:.12;filter:blur(4px) saturate(.45) brightness(.4);transform:scale(1.08)}
.hero-bg img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px}
.hero-bg.fallback{background:repeating-linear-gradient(135deg,#141414,#141414 40px,#0e0e0e 40px,#0e0e0e 80px);opacity:.5}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(201,168,76,.10) 0%,transparent 65%),
linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.92) 60%,var(--color-bg) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(255,255,255,.015) 3px,rgba(255,255,255,.015) 4px)}
.hero-inner{position:relative;z-index:2;max-width:920px;margin:0 auto;text-align:center}
.hero h1{font-size:clamp(2.8rem,6.4vw,5.4rem);letter-spacing:-.028em;line-height:1.02;margin:0 0 22px;font-weight:900;font-variation-settings:"opsz" 144,"SOFT" 30}
.hero h1 .row{display:block}
.hero h1 .gold{color:var(--color-gold)}
.hero h1 .italic-line{font-style:italic;font-weight:700;font-size:.85em;display:block;letter-spacing:-.02em}
.hero .lead{font-size:clamp(1.05rem,1.5vw,1.18rem);color:var(--color-text-secondary);max-width:620px;margin:0 auto 32px;line-height:1.65;font-weight:400}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:0 0 36px;align-items:center}
.hero-trust{display:flex;gap:32px;flex-wrap:wrap;justify-content:center;color:var(--color-text-secondary);font-size:14px;font-weight:500}
.hero-trust .item{display:inline-flex;align-items:center;gap:8px}
.hero-trust .item .ti{color:var(--color-gold);font-size:18px}
.hero-trust b{color:var(--color-text-primary);font-weight:700;font-variant-numeric:tabular-nums}
@media(max-width:600px){.hero{padding:88px 0 64px}.hero-trust{gap:18px;font-size:13px}}
/* ============ POSTER STRIP — angeschrägt mit Hover-Lift ============ */
.poster-strip{padding:30px 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);overflow:hidden;background:#070707;transform:rotate(-1deg);margin:-30px 0}
.poster-strip-inner{transform:rotate(1deg)}
.poster-track{display:flex;gap:14px;width:max-content;animation:scroll-x 50s linear infinite}
.poster-strip:hover .poster-track{animation-play-state:paused}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.poster-track img{height:170px;width:115px;object-fit:cover;border-radius:10px;flex:0 0 auto;border:1px solid var(--color-border);transition:transform .35s var(--ease),box-shadow .35s var(--ease),z-index 0s .35s}
.poster-track img:hover{transform:scale(1.08) translateY(-4px);box-shadow:0 0 30px rgba(201,168,76,.4),0 20px 40px rgba(0,0,0,.6);z-index:2;transition:transform .35s var(--ease),box-shadow .35s var(--ease),z-index 0s 0s}
/* ============ SECTION FOUNDATION v23 ============ */
.sx{padding:var(--section-gap) 0}
.sx-alt{background:#0c0c0c}
@media(max-width:880px){.sx{padding:80px 0}}
@media(max-width:600px){.sx{padding:64px 0}}
.shead{max-width:720px;margin:0 auto 64px;text-align:center}
.shead h2{margin:0 0 16px;font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:800}
.shead p{font-size:1.05rem;color:var(--color-text-secondary);margin:0;line-height:1.65}
/* ============ FEATURE-ROW: Premium-Qualität ============ */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:var(--content-max);margin:0 auto}
.frow.flip{grid-template-columns:1fr 1fr}
.frow.flip>.frow-text{order:2}
@media(max-width:880px){.frow,.frow.flip{grid-template-columns:1fr;gap:40px}.frow.flip>.frow-text{order:0}}
.frow-text h2{margin:14px 0 22px}
.frow-text p{font-size:1.05rem;line-height:1.75;color:var(--color-text-secondary);max-width:48ch}
.bullets{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.bullets li{display:flex;gap:12px;align-items:flex-start;font-size:1.02rem;color:var(--color-text-primary);font-weight:500;line-height:1.55}
.bullets li::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--color-gold);margin-top:.6em;box-shadow:0 0 12px var(--color-gold-glow)}
.bullets li strong{color:var(--color-text-primary);font-weight:700}
.bullets li .btxt{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;min-width:0}
.bullets li .bdesc{font-size:.92em;font-weight:400;color:var(--color-text-secondary);line-height:1.5}
.bullets li .bdesc::before{content:"\2014";margin-right:8px;color:var(--color-text-secondary);opacity:.7}
/* Smartphones/kleine Tablets: Beschreibung als saubere Unterzeile (kein Strich) */
@media(max-width:768px){
.bullets li .btxt{flex-direction:column;column-gap:0}
.bullets li .bdesc{font-size:.86em}
.bullets li .bdesc::before{content:none}
}
.frow-vis{position:relative}
.poster-3x3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.poster-3x3 img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:12px;border:1px solid var(--color-border);box-shadow:0 16px 32px rgba(0,0,0,.5);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.poster-3x3 img:hover{transform:scale(1.04) translateY(-3px);box-shadow:0 0 32px var(--color-gold-glow),0 20px 40px rgba(0,0,0,.6)}
/* ============ STATS-GRID ============ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1080px;margin:0 auto}
@media(max-width:880px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.stats-grid{grid-template-columns:1fr}}
.stat-card{background:rgba(255,255,255,.03);border:1px solid var(--color-border);backdrop-filter:blur(20px);border-radius:var(--radius-lg);padding:32px 24px;text-align:left;transition:.35s var(--ease);position:relative;overflow:hidden}
.stat-card::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 100% at 0% 0%,var(--color-gold-glow),transparent 60%);opacity:0;transition:opacity .4s var(--ease)}
.stat-card:hover{border-color:var(--color-border-hover);transform:translateY(-6px);box-shadow:0 0 50px var(--color-gold-glow),0 20px 60px rgba(0,0,0,.5)}
.stat-card:hover::before{opacity:1}
.stat-card>*{position:relative;z-index:1}
.stat-card .stat-num{font-family:'Fraunces','Playfair Display',serif;font-size:clamp(2.4rem,4.5vw,3.2rem);font-weight:800;color:var(--color-gold);line-height:1;display:block;letter-spacing:-.025em;font-variation-settings:"opsz" 144;font-variant-numeric:tabular-nums}
.stat-card .stat-lbl{font-family:'DM Sans',sans-serif;font-size:.93rem;color:var(--color-text-primary);font-weight:600;margin-top:14px;display:block;line-height:1.4}
.stat-card .stat-sub{font-size:.78rem;color:var(--color-text-secondary);font-weight:400;margin-top:6px;display:block;line-height:1.4}
/* ============ TESTIMONIALS ============ */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1080px;margin:0 auto}
@media(max-width:880px){.tg{grid-template-columns:1fr;max-width:560px}}
.tcard{background:rgba(255,255,255,.03);border:1px solid var(--color-border);backdrop-filter:blur(20px);border-radius:var(--radius-lg);padding:32px 28px;display:flex;flex-direction:column;gap:18px;transition:.35s var(--ease)}
.tcard:hover{border-color:var(--color-border-hover);transform:translateY(-4px);box-shadow:0 0 40px var(--color-gold-glow)}
.tcard .stars{display:flex;gap:3px;color:var(--color-gold);font-size:16px}
.tcard .stars .ti{font-size:18px}
.tcard blockquote{margin:0;font-family:'Fraunces','Playfair Display',serif;font-style:italic;font-size:1.08rem;line-height:1.55;color:var(--color-text-primary);font-weight:400;letter-spacing:-.005em;font-variation-settings:"opsz" 24}
.tcard cite{font-style:normal;color:var(--color-text-secondary);font-size:.86rem;font-weight:500;letter-spacing:.01em;margin-top:auto}
.tcard cite b{color:var(--color-text-primary);font-weight:600;font-style:normal}
/* ============ PRIVACY / USDT-Anonym-Feature ============ */
.privacy-card{max-width:780px;margin:0 auto;background:linear-gradient(140deg,rgba(201,168,76,.05) 0%,rgba(10,10,10,0) 70%),rgba(255,255,255,.03);border:1px solid var(--color-border);backdrop-filter:blur(20px);border-radius:var(--radius-xl);padding:48px 44px;display:flex;gap:28px;align-items:flex-start;position:relative;overflow:hidden}
.privacy-card::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--color-gold),transparent)}
.privacy-card .pc-icon{flex:0 0 auto;width:64px;height:64px;border-radius:18px;background:rgba(201,168,76,.1);border:1px solid var(--color-border-hover);display:grid;place-items:center;color:var(--color-gold);font-size:30px;box-shadow:0 0 24px var(--color-gold-glow)}
.privacy-card .pc-body h3{font-family:'Fraunces','Playfair Display',serif;font-size:1.6rem;font-weight:800;margin:0 0 12px;letter-spacing:-.018em;color:var(--color-text-primary);line-height:1.2}
.privacy-card .pc-body p{margin:0 0 16px;color:var(--color-text-secondary);line-height:1.7;font-size:1rem;max-width:55ch}
.privacy-card details{margin-top:8px}
.privacy-card details summary{cursor:pointer;color:var(--color-gold);font-size:.92rem;font-weight:500;list-style:none;display:inline-flex;align-items:center;gap:6px;letter-spacing:.01em}
.privacy-card details summary::-webkit-details-marker{display:none}
.privacy-card details summary::before{content:"ⓘ";font-style:normal;font-weight:400;font-size:1rem}
.privacy-card details[open] summary::before{content:"⊖"}
.privacy-card details p{margin:14px 0 0;font-size:.92rem;color:var(--color-text-secondary);max-width:60ch;line-height:1.65}
@media(max-width:680px){.privacy-card{flex-direction:column;padding:32px 24px;gap:18px;border-radius:var(--radius-lg)}.privacy-card .pc-icon{width:54px;height:54px;font-size:24px}}
/* ============ PRICING v23 ============ */
.cmp-bar{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;margin:0 auto 38px;padding:18px 26px;background:rgba(255,255,255,.02);border:1px solid var(--color-border);border-radius:999px;max-width:fit-content;font-size:.9rem;font-family:'DM Sans',sans-serif;font-variant-numeric:tabular-nums}
.cmp-bar .cmp{color:var(--color-text-muted);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.15);font-weight:500;letter-spacing:.01em}
.cmp-bar .cmp.us{color:var(--color-gold);text-decoration:none;font-weight:700;font-size:.96rem}
.cmp-bar .cmp.us::after{content:"✓";margin-left:6px;color:var(--color-gold)}
@media(max-width:520px){.cmp-bar{font-size:.82rem;gap:6px 14px;padding:14px 18px;border-radius:18px}}
.plan-spot{position:relative;background:linear-gradient(170deg,#161616 0%,#0c0c0c 60%);border:1px solid rgba(201,168,76,.4);border-radius:var(--radius-xl);padding:56px 48px;box-shadow:0 0 60px rgba(201,168,76,.2),0 0 120px rgba(201,168,76,.08),0 20px 80px rgba(0,0,0,.5);max-width:620px;margin:0 auto;overflow:hidden;text-align:left}
.plan-spot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--color-gold),transparent);opacity:.6}
.plan-spot::after{content:"";position:absolute;top:-40%;right:-20%;width:80%;height:160%;background:radial-gradient(closest-side,rgba(201,168,76,.13),transparent 70%);pointer-events:none}
.plan-spot>*{position:relative;z-index:1}
.plan-spot .spot-eyebrow{display:inline-block;font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.32em;color:var(--color-gold);font-weight:600;text-transform:uppercase;margin-bottom:18px}
.plan-spot .spot-title{font-family:'Fraunces','Playfair Display',serif;font-size:clamp(2rem,3.6vw,2.7rem);font-weight:800;margin:0 0 10px;letter-spacing:-.022em;line-height:1.1;color:var(--color-text-primary)}
.plan-spot .spot-sub{font-size:1.02rem;color:var(--color-text-secondary);margin:0 0 36px;line-height:1.6;max-width:50ch}
.plan-spot .spot-price{display:flex;align-items:baseline;gap:18px;margin:0 0 6px}
.plan-spot .spot-amount{font-family:'Fraunces','Playfair Display',serif;font-size:clamp(4.4rem,8vw,6rem);font-weight:900;color:var(--color-gold);line-height:.92;letter-spacing:-.04em;font-variation-settings:"opsz" 144;font-variant-numeric:tabular-nums}
.plan-spot .spot-cur{font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.12em}
.plan-spot .spot-meta{font-size:.92rem;color:var(--color-text-muted);margin:0 0 36px;font-weight:500}
.plan-spot .spot-feats{list-style:none;padding:0;margin:0 0 38px;display:grid;gap:14px}
.plan-spot .spot-feats li{display:flex;gap:14px;align-items:flex-start;font-size:1rem;color:var(--color-text-primary);line-height:1.5;font-weight:500}
.plan-spot .spot-feats li::before{content:"";flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(201,168,76,.12);border:1px solid var(--color-border-hover);display:grid;place-items:center;color:var(--color-gold);font-size:.82rem;font-weight:800;margin-top:1px}
.plan-spot .spot-feats li{position:relative}
.plan-spot .spot-feats li::after{content:"✓";position:absolute;left:5px;top:4px;color:var(--color-gold);font-size:.8rem;font-weight:800;line-height:1.5;pointer-events:none}
.plan-spot .spot-cta{display:block;width:100%;text-align:center;font-size:16px;padding:18px 26px}
.plan-spot .spot-foot{font-size:.88rem;color:var(--color-text-secondary);margin:22px 0 0;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}
.plan-spot .spot-foot .ti{color:var(--color-gold);font-size:1rem}
.plan-spot .spot-instant{font-size:.88rem;color:var(--color-text-secondary);margin:8px 0 0;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}
.plan-spot .spot-instant .ti{color:var(--color-gold);font-size:1rem}
@media(max-width:600px){.plan-spot{padding:36px 26px;border-radius:24px}.plan-spot .spot-amount{font-size:4rem}}
.trust-badges{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;margin:34px auto 0;max-width:720px}
.trust-badges .tb{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.025);border:1px solid var(--color-border);border-radius:999px;padding:8px 16px;font-size:.84rem;color:var(--color-text-primary);font-weight:500;transition:.25s var(--ease)}
.trust-badges .tb:hover{border-color:var(--color-border-hover);color:var(--color-gold-light)}
.trust-badges .tb .ti{color:var(--color-gold);font-size:1rem}
.trial-promo{max-width:560px;margin:50px auto 0;text-align:center;padding:28px 28px;background:rgba(255,255,255,.02);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.trial-promo p{margin:0 0 16px;color:var(--color-text-secondary);font-size:.96rem;line-height:1.55}
.trial-promo p strong{color:var(--color-text-primary)}
/* ============ FAQ v23 — kategorisierter Akkordeon ============ */
.faq-cat{margin-bottom:48px}
.faq-cat-head{font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.26em;color:var(--color-gold);text-transform:uppercase;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--color-border)}
.faq-mini details{background:transparent;border:0;border-bottom:1px solid var(--color-border);border-radius:0;padding:20px 0;margin:0;transition:.2s var(--ease)}
.faq-mini details:last-child{border-bottom:0}
.faq-mini details[open]{padding-bottom:24px}
.faq-mini summary{cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:18px;color:var(--color-text-primary);transition:color .2s var(--ease);align-items:center}
.faq-mini summary:hover{color:var(--color-gold)}
.faq-mini summary::-webkit-details-marker{display:none}
.faq-mini summary::after{content:"+";color:var(--color-gold);font-size:22px;line-height:1;font-weight:300;transition:transform .3s var(--ease);flex-shrink:0}
.faq-mini details[open] summary::after{transform:rotate(45deg)}
.faq-mini p{margin:14px 0 0;color:var(--color-text-secondary);font-size:14.5px;line-height:1.7;max-width:62ch}
/* ============ DEVICE / PLATFORM Cards v23 ============ */
.dev-group{margin-bottom:40px}
.dev-group-head{font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.26em;color:var(--color-gold);text-transform:uppercase;margin:0 0 22px;padding-bottom:10px;border-bottom:1px solid var(--color-border)}
.dev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
@media(max-width:520px){.dev-grid{grid-template-columns:repeat(2,1fr)}}
.dev-card{background:rgba(255,255,255,.025);border:1px solid var(--color-border);backdrop-filter:blur(20px);border-radius:var(--radius-md);padding:24px 16px;text-align:center;transition:.3s var(--ease);position:relative;overflow:hidden}
.dev-card:hover{border-color:var(--color-border-hover);background:rgba(255,255,255,.04);box-shadow:0 0 24px var(--color-gold-glow),0 12px 30px rgba(0,0,0,.4);transform:translateY(-3px)}
.dev-card .dev-icon{font-size:32px;color:var(--color-gold);margin-bottom:10px;line-height:1}
.dev-card .dev-icon .ti{font-size:32px}
.dev-card .dev-name{font-family:'DM Sans',sans-serif;font-weight:500;font-size:14px;color:var(--color-text-primary);margin:0}
.dev-card .dev-sub{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--color-text-secondary);margin:2px 0 0}
.dev-card .dev-tip{position:absolute;top:8px;right:8px;background:rgba(201,168,76,.15);color:var(--color-gold);font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:999px;opacity:0;transform:translateY(-4px);transition:.25s var(--ease)}
.dev-card:hover .dev-tip{opacity:1;transform:translateY(0)}
/* ============ CHECKER v23 (overrides) ============ */
.checker{padding:32px 28px;background:rgba(255,255,255,.025);border:1px solid var(--color-border);backdrop-filter:blur(20px);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:14px;transition:.3s var(--ease)}
.checker:hover{border-color:var(--color-border-hover)}
.checker-input{position:relative;display:flex;align-items:center;background:#0c0c0c;border:1px solid var(--color-border);border-radius:14px;transition:.25s var(--ease);overflow:hidden}
.checker-input:focus-within{border-color:var(--color-gold);box-shadow:0 0 0 4px var(--color-gold-glow)}
.checker-input .ci-ic{position:absolute;left:18px;color:var(--color-gold);font-size:16px;pointer-events:none;line-height:1}
.checker-input input{flex:1;background:transparent;border:0;color:var(--color-text-primary);font:inherit;font-family:'DM Sans',sans-serif;font-size:15px;padding:16px 16px 16px 46px;outline:none;font-weight:500}
.checker-input input::placeholder{color:var(--color-text-muted)}
.checker-meta{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--color-text-secondary);min-height:1.2em;line-height:1.4;letter-spacing:.01em}
.checker-meta.found{color:var(--color-gold)}
.checker-meta.fuzzy{color:var(--color-gold-light)}
.checker-results{background:rgba(255,255,255,.02);border:1px solid var(--color-border);border-radius:14px;padding:8px;max-height:400px;overflow-y:auto;display:none}
.checker-results.show{display:block;animation:resultsFadeIn .35s var(--ease) both}
@keyframes resultsFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.checker-results::-webkit-scrollbar{width:8px}
.checker-results::-webkit-scrollbar-track{background:transparent}
.checker-results::-webkit-scrollbar-thumb{background:rgba(201,168,76,.15);border-radius:4px}
.checker-results::-webkit-scrollbar-thumb:hover{background:rgba(201,168,76,.3)}
.cr-row{display:grid;grid-template-columns:46px 1fr auto;gap:13px;align-items:center;padding:10px 11px;border-radius:11px;transition:background .2s var(--ease);position:relative;animation:rowFadeIn .4s var(--ease) both}
.cr-row + .cr-row{margin-top:3px}
.cr-row:hover{background:rgba(201,168,76,.07)}
@keyframes rowFadeIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.cr-row:nth-child(1){animation-delay:0ms}.cr-row:nth-child(2){animation-delay:30ms}.cr-row:nth-child(3){animation-delay:60ms}.cr-row:nth-child(4){animation-delay:90ms}.cr-row:nth-child(5){animation-delay:120ms}.cr-row:nth-child(6){animation-delay:150ms}.cr-row:nth-child(7){animation-delay:180ms}.cr-row:nth-child(8){animation-delay:210ms}.cr-row:nth-child(n+9){animation-delay:240ms}
/* Poster/Logo links — 46×68 (2:3 Filmposter Ratio) */
.cr-poster{width:46px;height:68px;object-fit:cover;border-radius:7px;border:1px solid var(--color-border);
background:#141414;flex-shrink:0;display:block;box-shadow:0 4px 12px rgba(0,0,0,.5);transition:transform .25s var(--ease)}
.cr-row:hover .cr-poster{transform:scale(1.04)}
.cr-poster-fallback{width:46px;height:68px;border-radius:7px;border:1px solid var(--color-border);
background:linear-gradient(140deg,#1a1a1a 0%,#0e0e0e 100%);display:grid;place-items:center;
color:var(--color-text-muted);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.cr-poster-fallback svg{width:22px;height:22px}
.cr-poster-fallback.tv{color:#7fb8ff}
.cr-poster-fallback.film{color:var(--color-gold)}
.cr-poster-fallback.serie{color:#c78aea}
.cr-meta{display:flex;flex-direction:column;gap:5px;min-width:0}
.cr-name{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;color:var(--color-text-primary);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.cr-badge{display:inline-flex;align-items:center;gap:4px;font-family:'DM Sans',sans-serif;font-size:9.5px;
font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:999px;
align-self:flex-start;line-height:1.5}
.cr-badge.tv{background:rgba(127,184,255,.13);color:#bcd9ff}
.cr-badge.film{background:rgba(201,168,76,.14);color:var(--color-gold-light)}
.cr-badge.serie{background:rgba(199,138,234,.14);color:#dab8f1}
.cr-check{flex:0 0 auto;color:var(--ok);font-size:1.1rem;line-height:1;opacity:.9}
/* Result-Header: Anzahl Treffer prominent */
.cr-summary{display:flex;align-items:center;gap:10px;padding:6px 12px 10px;border-bottom:1px solid var(--color-border);margin-bottom:6px}
.cr-summary .sum-num{font-family:'Fraunces','Playfair Display',serif;font-size:1.3rem;font-weight:700;
color:var(--color-gold);line-height:1;letter-spacing:-.018em;font-variant-numeric:tabular-nums}
.cr-summary .sum-lbl{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--color-text-secondary);font-weight:500}
.cr-summary .sum-fuzzy{margin-left:auto;font-size:11px;color:var(--color-text-muted);font-style:italic}
/* Empty-State */
.checker-empty{text-align:center;padding:28px 18px;color:var(--color-text-secondary);font-size:14px;font-family:'DM Sans',sans-serif}
.checker-empty .em-ic{display:block;margin:0 auto 12px;width:40px;height:40px;border-radius:50%;
background:rgba(255,255,255,.04);border:1px solid var(--color-border);display:grid;place-items:center;color:var(--color-text-muted)}
.checker-empty .em-ic svg{width:20px;height:20px}
.checker-empty strong{color:var(--color-gold-light);font-weight:600}
.checker-empty .em-hint{font-size:12px;color:var(--color-text-muted);margin-top:10px;display:block;line-height:1.5}
@media(max-width:480px){
.cr-row{grid-template-columns:40px 1fr auto;gap:10px;padding:8px}
.cr-poster,.cr-poster-fallback{width:40px;height:60px}
.cr-name{font-size:13.5px}
}
/* ============ Flag-Wall v34 — Länder + Regionen kompakt, OHNE Box-Umrandung ============ */
.flag-wall{margin:0 auto;max-width:980px;padding:0;background:none;border:0}
.flag-wall-label{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.22em;color:var(--color-gold);
font-weight:600;text-transform:uppercase;text-align:center;margin:0 0 22px;display:flex;align-items:center;gap:14px;justify-content:center}
.flag-wall-label::before,.flag-wall-label::after{content:"";width:36px;height:1px;background:var(--color-gold);opacity:.4}
.flag-grid-compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.flag-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 4px 8px;
background:rgba(255,255,255,.018);border:1px solid transparent;border-radius:10px;
transition:transform .22s var(--ease),background .22s var(--ease);
cursor:default;position:relative}
.flag-tile:hover{background:rgba(201,168,76,.06);transform:translateY(-2px)}
.flag-tile img{width:30px;height:21px;object-fit:cover;border-radius:3px;
border:1px solid rgba(255,255,255,.12);box-shadow:0 2px 6px rgba(0,0,0,.4);display:block}
.flag-tile .ft-emoji{font-size:22px;line-height:21px;height:21px;display:flex;align-items:center;justify-content:center;width:30px}
.flag-tile .ft-code{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;
color:var(--color-text-secondary);letter-spacing:.06em;line-height:1;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.flag-tile:hover .ft-code{color:var(--color-gold-light)}
.flag-tile[title]{cursor:help}
.flag-tile.is-group{background:rgba(201,168,76,.04)}
.flag-tile.is-group:hover{background:rgba(201,168,76,.09)}
.flag-wall-foot{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--color-text-muted);
text-align:center;font-style:italic;letter-spacing:.005em;line-height:1.5;margin:20px 0 0}
.flag-wall-foot b{color:var(--color-text-secondary);font-weight:600;font-style:normal}
@media(max-width:600px){
.flag-wall-label{font-size:10.5px;letter-spacing:.18em;margin-bottom:18px}
.flag-grid-compact{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px}
.flag-tile{padding:8px 3px 7px}
.flag-tile img{width:26px;height:18px}
.flag-tile .ft-emoji{width:26px;font-size:18px;height:18px;line-height:18px}
}
/* Inhalts-Bullets zentriert (Section ohne Editorial-Split) */
.content-bullets{max-width:680px;margin:0 auto 40px}
.content-bullets .feat-list{margin-top:0}
@media(max-width:600px){.content-bullets{margin-bottom:32px}}
/* Plattformen-spezifischer Frow: bessere Proportionen + größere Schrift */
.platforms-frow{grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;max-width:1080px;margin:0 auto}
@media(max-width:880px){.platforms-frow{grid-template-columns:1fr;gap:36px}}
.platforms-frow .feat-list{margin-top:0;gap:20px}
.platforms-frow .feat-list .fl-term{font-size:15.5px;font-weight:600}
.platforms-frow .feat-list .fl-desc{font-size:14px;line-height:1.6}
.platforms-frow .feat-list li{gap:16px;grid-template-columns:14px 1fr}
.platforms-frow .frow-vis{max-width:360px;justify-self:center;width:100%}
@media(max-width:880px){.platforms-frow .frow-vis{max-width:420px}}
/* Geräte-Vitrine: alle 10 Geräte in einer einheitlichen edlen Grid */
.device-showcase{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:1080px;margin:0 auto}
@media(max-width:1024px){.device-showcase{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px){.device-showcase{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.device-showcase{grid-template-columns:repeat(2,1fr);gap:10px}}
.dev-prem{background:rgba(255,255,255,.025);border:1px solid var(--color-border);border-radius:14px;
padding:26px 16px 22px;text-align:center;transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
display:flex;flex-direction:column;align-items:center;gap:12px;min-height:148px;justify-content:center;position:relative;overflow:hidden}
.dev-prem::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--color-gold),transparent);opacity:0;transition:opacity .35s var(--ease)}
.dev-prem:hover{background:rgba(201,168,76,.06);border-color:var(--color-border-hover);transform:translateY(-3px)}
.dev-prem:hover::before{opacity:.6}
.dev-prem .dp-ico{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;
background:rgba(201,168,76,.08);border:1px solid var(--color-border);color:var(--color-gold);transition:.25s var(--ease)}
.dev-prem:hover .dp-ico{background:rgba(201,168,76,.14);border-color:var(--color-border-hover)}
.dev-prem .dp-ico .ti{font-size:26px;line-height:1}
.dev-prem .dp-ico svg{width:26px;height:26px;stroke:currentColor}
.dev-prem .dp-name{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:var(--color-text-primary);line-height:1.2}
.dev-prem .dp-sub{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--color-text-secondary);font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1}
@media(max-width:480px){.dev-prem{padding:22px 12px 18px;min-height:130px;gap:10px}.dev-prem .dp-ico{width:48px;height:48px}.dev-prem .dp-ico .ti,.dev-prem .dp-ico svg{font-size:22px;width:22px;height:22px}}
/* Subtle Poster-Pulse — CSS-only, GPU-accelerated, sehr leise atmend.
Reduce-motion respect. Pausiert bei Hover. */
@keyframes posterPulse{
0%,100%{transform:scale(1);filter:brightness(1)}
50%{transform:scale(1.025);filter:brightness(1.04)}
}
.poster-3x3 img{animation:posterPulse 14s ease-in-out infinite;will-change:transform}
.poster-3x3 img:nth-child(1){animation-delay:0s}
.poster-3x3 img:nth-child(2){animation-delay:1.5s}
.poster-3x3 img:nth-child(3){animation-delay:3s}
.poster-3x3 img:nth-child(4){animation-delay:4.5s}
.poster-3x3 img:nth-child(5){animation-delay:6s}
.poster-3x3 img:nth-child(6){animation-delay:7.5s}
.poster-3x3 img:nth-child(7){animation-delay:9s}
.poster-3x3 img:nth-child(8){animation-delay:10.5s}
.poster-3x3 img:nth-child(9){animation-delay:12s}
.poster-3x3:hover img{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.poster-3x3 img{animation:none}}
/* ============ NAV v23 polish ============ */
.nav{background:rgba(10,10,10,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--color-border)}
.nav-links a{font-family:'DM Sans',sans-serif;color:var(--color-text-secondary);font-weight:500;font-size:14.5px;letter-spacing:.005em;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--color-text-primary)}
.nav-links a.active::after{content:"";display:block;height:1.5px;width:18px;margin:5px auto 0;background:var(--color-gold);border-radius:2px}
/* ============ FOOTER v23 polish ============ */
.footer{background:#070707;border-top:1px solid var(--color-border)}
.footer h4{font-family:'DM Sans',sans-serif;color:var(--color-gold);font-size:11px;letter-spacing:.24em;font-weight:600;text-transform:uppercase}
.footer p,.footer a{font-family:'DM Sans',sans-serif;font-size:14px}
.footer-bottom-bar{border-top:1px solid var(--color-border);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--color-text-muted);font-size:13px;font-family:'DM Sans',sans-serif}
.footer-bottom-bar .ftr-usdt{display:inline-flex;align-items:center;gap:8px;color:var(--color-text-secondary)}
.footer-bottom-bar .ftr-usdt .ti{color:var(--color-gold)}
/* ============ Reveal v23 (smoother + stagger) ============ */
.fade-in-up{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.fade-in-up.visible{opacity:1;transform:translateY(0)}
.fade-in-up.d1{transition-delay:.08s}.fade-in-up.d2{transition-delay:.16s}.fade-in-up.d3{transition-delay:.24s}.fade-in-up.d4{transition-delay:.32s}.fade-in-up.d5{transition-delay:.4s}
/* ===========================================================================
v24 — Visual cleanup: reduce noise, clearer separation, mobile fixes
Diagnose: Hero auf Mobile wirr (Poster-Grid Treppe + Filmstreifen-After),
Headlines mit forced
brechen 3x um, Sections verschmelzen, zu viele
Glow/Hover-Schichten. Lösung: Weniger Effekte, max-width statt
,
klarere Section-Trennung, sparsamerer Goldakzent.
=========================================================================== */
/* ---- Section rhythm: enger, klarere Trennung ---- */
:root{--section-gap:96px}
.sx{padding:96px 0;background:var(--color-bg);border-top:1px solid rgba(255,255,255,.045)}
.sx:first-of-type{border-top:0}
.sx-alt{background:#060606;border-top:1px solid rgba(255,255,255,.045)}
@media(max-width:880px){.sx{padding:72px 0}}
@media(max-width:600px){.sx{padding:54px 0}}
/* ---- Section-Heads: tighter, klare Hierarchie ---- */
.shead{max-width:580px;margin:0 auto 56px;text-align:center;padding:0 16px}
.shead h2{margin:0 auto 14px;font-size:clamp(1.85rem,3.6vw,2.8rem);font-weight:700;letter-spacing:-.018em;line-height:1.15;max-width:18ch}
.shead p{font-size:1rem;color:var(--color-text-secondary);max-width:46ch;margin:0 auto;line-height:1.6}
@media(max-width:600px){.shead{margin-bottom:42px}.shead h2{font-size:1.7rem}}
/* ---- Eyebrow-Stars: subtiler (Hairlines statt sichtbarer ★) ---- */
.eyebrow-stars{display:inline-flex;align-items:center;gap:14px;font-size:10.5px;letter-spacing:.34em;
color:var(--color-gold);font-weight:500;text-transform:uppercase;font-family:'DM Sans',sans-serif;margin-bottom:18px}
.eyebrow-stars::before,.eyebrow-stars::after{content:"";width:22px;height:1px;background:var(--color-gold);opacity:.5}
/* ---- HERO v24: cleanere bg, smoothere gradients, 2-zeiliger H1 ---- */
.hero{padding:120px 0 90px;min-height:auto;background:var(--color-bg);border-bottom:1px solid rgba(255,255,255,.045)}
@media(max-width:880px){.hero{padding:88px 0 64px}}
@media(max-width:480px){.hero{padding:72px 0 52px}}
.hero-bg{opacity:.07;filter:blur(2px) saturate(.3) brightness(.45);transform:scale(1.04);
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:5px}
@media(max-width:600px){.hero-bg{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:4px;opacity:.05}}
.hero::before{background:
radial-gradient(ellipse 65% 50% at 50% 28%,rgba(201,168,76,.07) 0%,transparent 60%),
linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,.85) 70%,var(--color-bg) 100%)}
.hero::after{display:none} /* Filmstreifen-Linien raus — war Visual-Noise */
.hero h1{font-size:clamp(2.3rem,5.4vw,4.6rem);letter-spacing:-.024em;line-height:1.06;
font-weight:800;max-width:16ch;margin:0 auto 22px;font-variation-settings:"opsz" 144,"SOFT" 30}
.hero h1 .row{display:block}
.hero h1 .gold{color:var(--color-gold);font-weight:800}
.hero h1 .italic-line{font-style:italic;font-weight:600;font-size:.72em;color:var(--color-text-secondary);
letter-spacing:-.014em;margin-top:.2em}
.hero .lead{font-size:clamp(1rem,1.4vw,1.13rem);max-width:520px;line-height:1.55;
color:var(--color-text-secondary);font-weight:400;margin:0 auto 32px}
.hero-cta{gap:12px;margin:0 0 30px}
.hero-trust{gap:26px;font-size:13.5px;color:var(--color-text-secondary);font-weight:400}
.hero-trust .item{gap:7px}
.hero-trust .item .ti{font-size:15px;color:var(--color-gold);opacity:.85}
.hero-trust b{font-weight:600;color:var(--color-text-primary);font-family:'DM Sans',sans-serif}
@media(max-width:600px){.hero-trust{flex-direction:column;gap:10px;font-size:13px}.hero-cta .btn{width:100%;justify-content:center}}
/* ---- Poster-Strip v24: kein Schräglage (war unruhig) ---- */
.poster-strip{transform:none;margin:0;padding:20px 0;background:#060606;border-top:1px solid rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.045)}
.poster-strip-inner{transform:none}
.poster-track{gap:12px}
.poster-track img{height:130px;width:88px;border-radius:8px}
.poster-track img:hover{transform:scale(1.06) translateY(-3px);box-shadow:0 0 24px rgba(201,168,76,.3),0 12px 24px rgba(0,0,0,.55)}
@media(max-width:600px){.poster-track img{height:108px;width:72px}}
/* ---- FROW v24: gleichmäßige Spacing ---- */
.frow{gap:64px}
@media(max-width:880px){.frow{gap:36px}}
.frow-text h2{margin:10px 0 18px;font-weight:700;font-size:clamp(1.85rem,3.6vw,2.7rem);letter-spacing:-.018em;line-height:1.18}
.frow-text>p{font-size:1rem;line-height:1.65;color:var(--color-text-secondary);max-width:44ch}
.bullets{margin:24px 0 0;gap:12px}
.bullets li{font-size:.98rem;line-height:1.55;color:var(--color-text-primary);font-weight:400}
.bullets li strong{font-weight:600;color:var(--color-text-primary)}
.poster-3x3 img{border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.5)}
.poster-3x3 img:hover{transform:scale(1.03) translateY(-2px);box-shadow:0 0 24px var(--color-gold-glow),0 16px 32px rgba(0,0,0,.55)}
/* ---- STATS v24: cleaner, weniger Effekte ---- */
.stats-grid{gap:18px;max-width:1080px}
.stat-card{background:rgba(255,255,255,.025);border:1px solid var(--color-border);border-radius:18px;padding:30px 24px;
transition:border-color .3s var(--ease),background .3s var(--ease)}
.stat-card::before{display:none}
.stat-card:hover{border-color:var(--color-border-hover);background:rgba(255,255,255,.04);transform:none;box-shadow:none}
.stat-card .stat-num{font-family:'Fraunces','Playfair Display',serif;font-size:clamp(2.1rem,3.8vw,2.8rem);
font-weight:700;color:var(--color-gold);line-height:1;letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.stat-card .stat-lbl{font-family:'DM Sans',sans-serif;font-size:.93rem;font-weight:500;color:var(--color-text-primary);margin-top:14px}
.stat-card .stat-sub{font-family:'DM Sans',sans-serif;font-size:.78rem;color:var(--color-text-secondary);font-weight:400;margin-top:5px;line-height:1.45}
/* ---- TESTIMONIALS v24: ruhiger ---- */
.tg{gap:20px}
.tcard{background:rgba(255,255,255,.025);border:1px solid var(--color-border);padding:28px 26px;border-radius:18px;gap:16px;
transition:border-color .3s var(--ease),background .3s var(--ease)}
.tcard:hover{border-color:var(--color-border-hover);background:rgba(255,255,255,.035);transform:none;box-shadow:none}
.tcard .stars{font-size:14px;gap:2px}
.tcard .stars .ti{font-size:15px}
.tcard blockquote{font-size:1rem;line-height:1.6;font-style:italic;color:var(--color-text-primary);font-weight:400;
font-variation-settings:"opsz" 24}
.tcard cite{font-size:.84rem;color:var(--color-text-secondary);font-weight:400}
.tcard cite b{color:var(--color-text-primary);font-weight:600;font-style:normal}
/* ---- PRIVACY v24: cleaner Card ---- */
.privacy-card{background:rgba(255,255,255,.02);padding:40px 36px;gap:24px}
.privacy-card::before{display:none}
.privacy-card .pc-icon{width:56px;height:56px;font-size:24px;border-radius:14px;box-shadow:none;background:rgba(201,168,76,.08)}
.privacy-card .pc-icon .ti{font-size:24px}
.privacy-card .pc-body h3{font-size:1.4rem;font-weight:700;margin:0 0 10px;line-height:1.2}
.privacy-card .pc-body p{font-size:.96rem;line-height:1.65;color:var(--color-text-secondary)}
.privacy-card details summary{font-size:.88rem;font-weight:500}
.privacy-card details p{font-size:.88rem}
@media(max-width:680px){.privacy-card{padding:28px 22px;flex-direction:column}.privacy-card .pc-body h3{font-size:1.25rem}}
/* ---- PLAN-SPOT v24: weniger Glow, ruhiger ---- */
.plan-spot{padding:48px 42px;box-shadow:0 0 60px rgba(201,168,76,.12),0 20px 60px rgba(0,0,0,.4);border-color:rgba(201,168,76,.3);max-width:580px}
.plan-spot::after{background:radial-gradient(closest-side,rgba(201,168,76,.08),transparent 70%)}
.plan-spot .spot-eyebrow{font-size:10.5px;letter-spacing:.32em;margin-bottom:14px}
.plan-spot .spot-title{font-size:clamp(1.85rem,3.2vw,2.4rem);margin:0 0 10px;font-weight:700;line-height:1.18}
.plan-spot .spot-sub{font-size:.96rem;margin:0 0 32px;line-height:1.55;max-width:42ch}
.plan-spot .spot-amount{font-size:clamp(3.8rem,7vw,5.2rem);font-weight:800;letter-spacing:-.035em}
.plan-spot .spot-cur{font-size:.9rem;letter-spacing:.1em}
.plan-spot .spot-meta{font-size:.86rem;margin:0 0 28px}
.plan-spot .spot-feats{gap:12px;margin:0 0 30px}
.plan-spot .spot-feats li{font-size:.96rem}
@media(max-width:600px){.plan-spot{padding:36px 26px}.plan-spot .spot-amount{font-size:3.6rem}}
/* ---- CMP-BAR v24 ---- */
.cmp-bar{font-size:.84rem;padding:13px 22px;border-radius:14px;background:rgba(255,255,255,.02);gap:6px 18px;border-color:var(--color-border)}
.cmp-bar .cmp.us{font-size:.92rem}
/* ---- TRUST-BADGES & TRIAL-PROMO subtiler ---- */
.trust-badges{margin-top:28px;gap:8px 14px}
.trust-badges .tb{font-size:.8rem;padding:7px 14px}
.trust-badges .tb .ti{font-size:.92rem}
.trial-promo{padding:24px 24px;border-radius:14px}
.trial-promo p{font-size:.92rem}
/* ---- DEVICE-GROUPS v24: ruhiger, ohne Tooltip-Popup ---- */
.dev-group{margin-bottom:36px}
.dev-group-head{font-size:11px;letter-spacing:.22em;margin-bottom:18px;padding-bottom:8px}
.dev-grid{gap:12px}
.dev-card{background:rgba(255,255,255,.025);padding:22px 14px;border-radius:14px;transition:border-color .3s var(--ease),background .3s var(--ease)}
.dev-card:hover{border-color:var(--color-border-hover);background:rgba(255,255,255,.045);transform:none;box-shadow:none}
.dev-card .dev-icon{margin-bottom:8px}
.dev-card .dev-icon .ti{font-size:28px}
.dev-card .dev-name{font-size:13.5px;font-weight:500}
.dev-card .dev-sub{font-size:11.5px;margin-top:2px}
.dev-card .dev-tip{display:none}
/* ---- CHECKER v24 ---- */
.checker{padding:28px 24px;background:rgba(255,255,255,.02);gap:12px;border-radius:16px}
.checker-input{border-radius:12px}
.checker-input input{padding:14px 16px 14px 44px;font-size:14.5px}
.checker-input .ci-ic{left:16px;font-size:15px}
/* ---- FAQ-MINI v24 ---- */
.faq-cat{margin-bottom:40px}
.faq-cat-head{font-size:11px;letter-spacing:.22em;margin-bottom:14px;padding-bottom:10px}
.faq-mini summary{font-size:15.5px;font-weight:500}
.faq-mini p{font-size:14px;line-height:1.65;max-width:60ch}
/* ---- FOOTER v24 ---- */
.footer{padding:64px 0 32px;background:#060606;border-top:1px solid rgba(255,255,255,.045)}
.footer .cols{margin-bottom:30px}
.footer p{font-size:13px;line-height:1.6;color:var(--color-text-secondary)}
.footer a{font-size:13.5px}
.footer-bottom-bar{padding-top:22px;font-size:12.5px}
/* ---- ITALIC-GOLD: sparsamer, gleiches Gewicht wie umgebende Headline ---- */
.italic-gold{font-style:italic;font-weight:inherit;color:var(--color-gold)}
/* ---- BUTTONS v24 ---- */
.btn{padding:13px 28px;font-size:14.5px}
.btn-sm{padding:9px 18px;font-size:13px}
@media(max-width:600px){.btn{padding:14px 24px;font-size:14.5px}}
/* ---- NAV v24 ---- */
.nav{background:rgba(10,10,10,.88)}
.nav.scrolled{background:rgba(8,8,8,.94)}
.nav-inner{height:68px}
.nav-links a{font-size:14px}
/* ---- Reduce-motion ---- */
@media (prefers-reduced-motion: reduce){
.btn-primary,.fade-in-up{animation:none!important;transition:none!important}
.poster-track{animation:none!important}
}
/* ===========================================================================
v25 — Universal Responsive Polish
Spec-Breakpoints: 480 (small phone) · 768 (tablet portrait) · 1024 (tablet
landscape / small laptop) · 1280 (desktop) · 1600+ (large desktop / TV).
Goal: jede Seite — Public + Admin + Ultraadmin + Customer Dashboard —
sieht auf jedem Gerät professionell aus.
=========================================================================== */
/* ---- Container: progressive padding mit safe-area-Insets ---- */
.container,.wrap{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
@media(max-width:1024px){.container,.wrap{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}}
@media(max-width:768px){.container,.wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}}
@media(max-width:480px){.container,.wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}}
/* ---- Tap-Targets: min 44×44 auf Touch-only Geräten (iOS HIG) ---- */
@media(hover:none) and (pointer:coarse){
.btn{min-height:44px;padding-top:12px;padding-bottom:12px}
.btn-sm{min-height:40px}
.nav-links a{min-height:40px;display:flex;align-items:center}
.menu-item{min-height:42px;padding-top:11px;padding-bottom:11px}
.icon-btn{width:42px;height:42px}
.faq-mini summary{min-height:44px;align-items:center}
.cur-switch a{min-height:36px;display:inline-flex;align-items:center}
.nav-cta .btn-sm{min-height:38px}
}
/* ---- iOS Zoom-Fix: inputs müssen mind. 16px font-size haben, sonst zoomt iPhone ---- */
@media(max-width:768px){
input,select,textarea,.input{font-size:16px!important}
.input.mono.mac-mask{font-size:15px!important} /* Mono ist eh schmaler, ok */
}
/* ===========================================================================
PUBLIC SITE — Mobile-Refinements
=========================================================================== */
/* Hero: optimale Skalierung für 320-480 ----------------------------------- */
@media(max-width:480px){
.hero{padding:64px 0 48px}
.hero h1{font-size:clamp(1.85rem,7.5vw,2.4rem);max-width:14ch;margin-bottom:18px}
.hero h1 .italic-line{font-size:.7em}
.hero .lead{font-size:.96rem;margin-bottom:26px}
.hero-cta{flex-direction:column;width:100%;gap:10px}
.hero-cta .btn{width:100%;max-width:320px;margin:0 auto}
.hero-trust{font-size:12.5px;gap:8px}
.eyebrow-stars{font-size:10px;gap:10px}
}
/* Sehr kleine Phones (iPhone SE = 320, Galaxy Fold geschlossen) */
@media(max-width:360px){
.hero{padding:54px 0 40px}
.hero h1{font-size:1.75rem}
.hero .lead{font-size:.92rem}
.shead h2{font-size:1.55rem}
.shead{margin-bottom:32px}
.stat-card{padding:22px 18px}
.stat-card .stat-num{font-size:1.85rem}
.plan-spot{padding:28px 20px}
.plan-spot .spot-amount{font-size:3.2rem}
}
/* Querformat-Phone — Hero darf nicht ganzen Screen einnehmen */
@media(max-height:520px) and (orientation:landscape){
.hero{padding:48px 0 36px;min-height:auto}
.hero h1{font-size:2.2rem;margin-bottom:14px}
.hero .lead{font-size:.95rem;margin-bottom:20px}
.hero-cta{margin-bottom:18px}
.hero-trust{gap:14px;font-size:12.5px}
}
/* Tablet Portrait (768-1024) — 2-Spalten bleiben, kompakter --------------- */
@media(min-width:768px) and (max-width:1024px){
.hero{padding:104px 0 76px}
.frow,.frow.flip{grid-template-columns:1fr 1fr;gap:44px}
.stats-grid{grid-template-columns:repeat(4,1fr);gap:14px}
.stat-card{padding:24px 18px}
.dev-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.plan-spot{padding:42px 36px;max-width:560px}
.tg{grid-template-columns:repeat(2,1fr)}
}
/* Tablet Portrait präzise (kein iPad-Pro-12.9 das auf 1024 wäre) ---------- */
@media(min-width:600px) and (max-width:880px){
.frow,.frow.flip{grid-template-columns:1fr;gap:32px} /* doch 1-col bei kleinem Tablet/Phablet */
.frow-vis{max-width:540px;margin:0 auto}
.stats-grid{grid-template-columns:repeat(2,1fr)}
}
/* Footer: stacks elegant unter 600px ------------------------------------- */
@media(max-width:600px){
.footer .cols{grid-template-columns:1fr 1fr;gap:20px}
.footer-bottom-bar{flex-direction:column;align-items:flex-start;gap:8px;font-size:12px}
}
@media(max-width:420px){
.footer .cols{grid-template-columns:1fr}
}
/* Privacy-Card optimieren — Mobile stacking */
@media(max-width:600px){
.privacy-card{padding:26px 20px}
.privacy-card .pc-body h3{font-size:1.2rem}
.privacy-card .pc-body p{font-size:.92rem}
}
/* CMP-Bar: stacks auf Mobile */
@media(max-width:560px){
.cmp-bar{flex-direction:column;align-items:center;gap:6px;padding:14px 18px;border-radius:16px;font-size:.82rem}
.cmp-bar .cmp{text-align:center}
}
/* Trust-Badges: 2-spalten auf Mobile */
@media(max-width:480px){
.trust-badges{gap:8px}
.trust-badges .tb{font-size:.78rem;padding:6px 12px}
}
/* FAQ-Categories: Spacing-Anpassung */
@media(max-width:600px){
.faq-cat{margin-bottom:28px}
.faq-cat-head{font-size:10px;letter-spacing:.18em}
.faq-mini summary{font-size:15px}
}
/* Modal-Form: Inputs nutzen iOS 16px (oben global gesetzt) */
@media(max-width:480px){
.modal{padding:12px}
.modal-panel{padding:26px 20px 22px;border-radius:18px;max-height:calc(100vh - 24px)}
.modal-head h3{font-size:1.3rem}
.modal-close{top:10px;right:10px;width:34px;height:34px}
}
/* ===========================================================================
AUTH (Login/Trial-Start/etc) — kompakt
=========================================================================== */
@media(max-width:480px){
.auth-wrap{padding:24px 16px;min-height:calc(100dvh - 60px)}
.auth-card{padding:28px 22px;border-radius:18px}
}
/* ===========================================================================
ADMIN / ULTRAADMIN — Sidebar smoother, Tables scroll-hint
=========================================================================== */
/* Tablet+: Sidebar bleibt links, schmaler */
@media(min-width:1000px) and (max-width:1280px){
.admin{grid-template-columns:220px 1fr}
.side{padding:18px 12px}
.main{padding:26px 24px}
}
/* Tablet/Mobile: Sidebar wird zu Top-Tab-Strip */
@media(max-width:1000px){
.admin{grid-template-columns:1fr;min-height:auto}
.side{position:sticky;top:68px;z-index:30;height:auto;border-right:0;
border-bottom:1px solid var(--color-border);padding:10px 14px;
display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;
-webkit-overflow-scrolling:touch;background:rgba(8,8,8,.94);backdrop-filter:blur(14px)}
.side .logo,.side .sep,.side .grp{display:none}
.side a{padding:9px 14px;border-radius:999px;white-space:nowrap;font-size:13px;margin:0;flex-shrink:0}
.side a.active{background:rgba(201,168,76,.12);border:1px solid var(--color-border-hover);color:var(--color-gold)}
.main{padding:22px 20px;max-width:100%}
}
@media(max-width:600px){
.main{padding:18px 16px}
.main-head{margin-bottom:18px}
.main-head h1,.main-head h2{font-size:1.4rem}
.stat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.stat{padding:16px 14px}
.stat .v{font-size:1.7rem}
.panel{padding:16px 14px;margin-bottom:16px;border-radius:12px}
.panel-head{flex-wrap:wrap;gap:10px}
.panel-head h3{font-size:1rem}
.tbl-search{min-width:0;flex:1}
}
@media(max-width:420px){
.stat-grid{grid-template-columns:1fr}
}
/* Tables: scroll-hint (fade right edge → andeutet horizontal scroll) */
.table-wrap{position:relative}
.table-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:32px;
background:linear-gradient(90deg,transparent,#0a0a0a);pointer-events:none;opacity:0;transition:opacity .2s}
@media(max-width:880px){.table-wrap.has-overflow::after{opacity:1}}
.table{font-size:.88rem}
@media(max-width:600px){.table th,.table td{padding:9px 10px;font-size:.84rem}}
/* Menu-Pop (Row-Action-Dropdown): max-width safe auf kleinen Screens */
@media(max-width:520px){
.menu-pop{min-width:200px;max-width:calc(100vw - 32px);padding:6px}
.menu-item{font-size:.84rem}
}
/* Grid-Form auf Tablet/Mobile */
@media(max-width:600px){
.grid-form{grid-template-columns:1fr;gap:10px}
.cols-2{grid-template-columns:1fr;gap:14px}
}
/* ===========================================================================
CUSTOMER DASHBOARD — Mobile-Polish (Inline-Styles ergänzen)
=========================================================================== */
/* Customer Hero-Card */
@media(max-width:600px){
.hero-card{padding:22px 20px!important;grid-template-columns:1fr!important;gap:14px!important;text-align:left}
.hero-card .hi{font-size:1.5rem!important}
.hero-card .hi-sub{font-size:.9rem!important}
.hero-stat{text-align:left!important}
.hero-stat .big{font-size:2.1rem!important}
}
/* Customer Tiles (Action-Cards) */
@media(max-width:600px){
.tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:10px!important}
.tile{padding:16px 14px!important}
}
@media(max-width:380px){
.tiles{grid-template-columns:1fr!important}
}
/* Customer Genre-Grid */
@media(max-width:600px){
.genre-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px}
.genre-card{padding:9px 12px}
.genre-card .gc-name{font-size:.86rem}
}
/* Customer Flag-Grid */
@media(max-width:600px){
.flag-grid{grid-template-columns:repeat(3,1fr)}
.flag-card{padding:14px 8px 10px}
.fc-flag img{width:42px;height:28px}
.fc-name{font-size:.84rem}
.fc-count{font-size:.66rem}
}
@media(max-width:360px){
.flag-grid{grid-template-columns:repeat(2,1fr)}
}
/* ===========================================================================
CUSTOMER DASHBOARD TYPO: Fraunces statt Playfair (Alias-Consistency)
Inline-Styles in dashboard.ejs nutzen 'Playfair Display' — überschreiben
wir hier mit Fraunces für visuelle Einheitlichkeit zur Public-Site.
=========================================================================== */
.hero-card .hi,.hero-stat .big{font-family:'Fraunces','Playfair Display',Georgia,serif;letter-spacing:-.018em;font-variation-settings:"opsz" 144}
.hero-stat .big{font-weight:800}
.stat .v{font-family:'Fraunces','Playfair Display',serif;font-variation-settings:"opsz" 144}
/* ===========================================================================
PAY-Page (USDT-Bezahlseite) — Mobile-Fix
=========================================================================== */
@media(max-width:600px){
.pay-wrap{margin:24px auto;padding:0 16px}
.pay-card{padding:24px 20px;border-radius:16px}
.pay-amount{font-size:2rem}
.qr{padding:8px;border-radius:12px}
.qr img{max-width:180px;height:auto}
.addr{padding:10px;font-size:.78rem}
}
/* ===========================================================================
LARGE SCREENS — Skalierung für 1600+ und 4K
=========================================================================== */
@media(min-width:1600px){
:root{--content-max:1280px;--maxw:1280px}
}
@media(min-width:2200px){
:root{--content-max:1440px;--maxw:1440px}
html{font-size:17px}
}
@media(min-width:3200px){
html{font-size:20px}
.main{max-width:1800px}
}
/* ===========================================================================
Print-Stylesheet — Falls jemand AGB/Rechnung druckt
=========================================================================== */
@media print{
.nav,.footer,.hero-bg,.poster-strip,.modal,.hero::before,.hero::after{display:none!important}
body{background:#fff;color:#000}
.container{max-width:100%;padding:0}
.btn{border:1px solid #000;background:transparent;color:#000}
}
/* ===========================================================================
Misc Polish — Smooth Scrolling, Focus-Outline einheitlich
=========================================================================== */
html{scroll-padding-top:80px} /* Sticky-Nav respects anchor links */
:focus-visible{outline:2px solid var(--color-gold);outline-offset:3px;border-radius:6px}
/* Wenn überlange Content-Wörter (URLs etc.) keine horizontale Scrollbar erzeugen */
.faq-mini p,.tcard blockquote,.privacy-card p,.bullets li,.shead p{word-wrap:break-word;overflow-wrap:break-word}
/* Hover-Effekte komplett auf hover-fähige Geräte beschränken */
@media(hover:none){
.stat-card:hover,.tcard:hover,.dev-card:hover,.plat:hover,.tile:hover{
transform:none!important;background:initial!important
}
}
/* ===========================================================================
v26 — Witwen-Vermeidung (modern CSS text-wrap)
text-wrap: balance → Headlines: Browser verteilt Zeilen gleichmäßig
text-wrap: pretty → Absätze: Browser vermeidet kurze letzte Zeilen
Fallback in älteren Browsern: harmlos (normal wrapping bleibt)
=========================================================================== */
/* Headlines: ausbalanciert über alle Zeilen */
.hero h1,
.shead h2,
.frow-text h2,
.modal-head h3,
.privacy-card .pc-body h3,
.plan-spot .spot-title,
.tcard blockquote,
.faq-mini summary{
text-wrap:balance;
-webkit-text-wrap:balance;
}
/* Absätze: Witwen-Wörter vermeiden */
.hero .lead,
.shead p,
.frow-text>p,
.privacy-card .pc-body p,
.faq-mini p,
.plan-spot .spot-sub,
.plan-spot .spot-meta,
.modal-head p,
.trial-promo p,
.checker-empty,
.dev-card .dev-name,
.dev-card .dev-sub,
.stat-card .stat-lbl,
.stat-card .stat-sub,
.cmp-bar,
.spot-foot,
.spot-instant{
text-wrap:pretty;
-webkit-text-wrap:pretty;
}
/* Hero Lead spezifisch — schmaler für klare 2-Zeilen-Optik */
.hero .lead{max-width:480px}
@media(max-width:600px){.hero .lead{max-width:380px}}
/* Lead-Sätze als Block-Spans für saubere Trennung */
.lead-line{display:block}
/* Zusammengehörige Phrasen, die nie umbrechen sollen */
.nowrap{white-space:nowrap}
/* Dotlist — Aufzählungen mit · (mid-dot). Jedes Item ist eine untrennbare
Einheit, der Trenner wird automatisch mit umgebrochen. Saubere Optik
auf jedem Screen, kein „TRC20)" alleine in der letzten Zeile. */
.dotlist{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 0;list-style:none;padding:0;margin:0}
.dotlist>*{display:inline-flex;align-items:center;white-space:nowrap}
.dotlist>*:not(:last-child)::after{content:"·";color:var(--color-text-muted);margin:0 12px;font-weight:400}
.shead p.dotlist{justify-content:center;line-height:1.7}
@media(max-width:480px){.dotlist>*:not(:last-child)::after{margin:0 9px}}
/* ============ 4-Pakete-Grid (v27) ============ */
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1080px;margin:0 auto}
@media(max-width:1024px){.pkg-grid{grid-template-columns:repeat(2,1fr);max-width:680px}}
@media(max-width:480px){.pkg-grid{grid-template-columns:1fr;max-width:380px}}
.pkg-card{position:relative;background:rgba(255,255,255,.025);border:1px solid var(--color-border);border-radius:18px;padding:32px 24px 26px;text-align:center;cursor:pointer;
transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);display:flex;flex-direction:column;align-items:center}
.pkg-card:hover{border-color:var(--color-border-hover);background:rgba(255,255,255,.04)}
.pkg-card.popular{border-color:rgba(201,168,76,.4);background:linear-gradient(170deg,rgba(201,168,76,.07),rgba(255,255,255,.02));
box-shadow:0 0 50px rgba(201,168,76,.1),0 16px 40px rgba(0,0,0,.4)}
.pkg-card.popular:hover{box-shadow:0 0 70px rgba(201,168,76,.18),0 16px 40px rgba(0,0,0,.5)}
.pkg-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#c9a84c,#e8c97a);color:#0a0a0a;
font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap;
box-shadow:0 8px 24px -8px rgba(201,168,76,.5)}
.pkg-name{font-family:'DM Sans',sans-serif;font-size:13px;letter-spacing:.18em;color:var(--color-text-secondary);font-weight:600;text-transform:uppercase;margin:0 0 10px}
.pkg-card.popular .pkg-name{color:var(--color-gold)}
.pkg-total{font-family:'Fraunces','Playfair Display',serif;font-size:clamp(2.4rem,4vw,3rem);font-weight:800;color:var(--color-gold);line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin:0 0 4px}
.pkg-cur{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--color-text-secondary);font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin:0 0 18px}
.pkg-per{font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--color-text-primary);font-weight:500;padding:8px 14px;background:rgba(255,255,255,.04);border-radius:999px;margin-bottom:18px;font-variant-numeric:tabular-nums}
.pkg-per b{font-weight:700;color:var(--color-text-primary)}
.pkg-save{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--ok);font-weight:700;letter-spacing:.05em;margin:-10px 0 18px;display:inline-block;background:rgba(95,208,160,.1);padding:3px 10px;border-radius:999px}
.pkg-cta{margin-top:auto;width:100%;font-size:14px;padding:13px 18px}
.pkg-card .pkg-cta{background:rgba(255,255,255,.04);border:1px solid var(--color-border);color:var(--color-text-primary)}
.pkg-card .pkg-cta:hover{background:rgba(201,168,76,.1);border-color:var(--color-gold);color:var(--color-text-primary);transform:none;box-shadow:none}
.pkg-card.popular .pkg-cta{background:linear-gradient(135deg,#c9a84c 0%,#e8c97a 50%,#c9a84c 100%);background-size:200% 200%;color:#0a0a0a;border:0;
box-shadow:0 0 30px rgba(201,168,76,.3);animation:gradient-shift 3s ease infinite}
.pkg-card.popular .pkg-cta:hover{box-shadow:0 0 50px rgba(201,168,76,.5),0 8px 25px rgba(0,0,0,.3);transform:translateY(-2px) scale(1.02)}
/* ============ Currency-Switch v28 — Glassmorphism Toggle ============ */
.cur-switch{display:inline-flex;background:rgba(255,255,255,.025);border:1px solid var(--color-border);
padding:4px;border-radius:999px;gap:2px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.cur-switch a{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:999px;
font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:.04em;
color:var(--color-text-secondary);text-decoration:none;
transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.cur-switch a:hover{color:var(--color-text-primary);background:rgba(255,255,255,.025)}
.cur-switch a.active{background:rgba(201,168,76,.13);color:var(--color-gold);
box-shadow:inset 0 0 0 1px var(--color-border-hover)}
.cur-switch a .ti{font-size:15px;opacity:.92}
.cur-switch a.active .ti{opacity:1}
.cur-switch .cur-flag{display:none} /* alte Flag-Bilder verbergen — Tabler Symbole nutzen */
@media(max-width:480px){.cur-switch a{padding:9px 16px;font-size:12.5px}}
/* ============ Trial-Card v28 — Vertrauens-CTA mit Icon + Bullets ============ */
.trial-card{max-width:760px;margin:54px auto 0;background:linear-gradient(140deg,rgba(201,168,76,.04) 0%,rgba(255,255,255,.02) 70%);
border:1px solid var(--color-border);border-radius:22px;padding:30px 34px;
display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
transition:border-color .3s var(--ease),background .3s var(--ease);position:relative;overflow:hidden}
.trial-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--color-gold),transparent);opacity:.4}
.trial-card:hover{border-color:var(--color-border-hover)}
.trial-card .tc-icon{flex:0 0 auto;width:56px;height:56px;border-radius:16px;
background:rgba(201,168,76,.12);border:1px solid var(--color-border-hover);
display:grid;place-items:center;color:var(--color-gold);box-shadow:0 0 24px var(--color-gold-glow)}
.trial-card .tc-icon svg{width:28px;height:28px;display:block;stroke:var(--color-gold)}
.trial-card .tc-icon .ti{font-size:28px;line-height:1}
.trial-card .tc-body{min-width:0}
.trial-card .tc-body h3{font-family:'Fraunces','Playfair Display',serif;font-size:1.35rem;
font-weight:700;margin:0 0 10px;letter-spacing:-.014em;line-height:1.2;color:var(--color-text-primary)}
.trial-card .tc-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;
gap:8px 20px;font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--color-text-secondary);font-weight:400}
.trial-card .tc-list li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.trial-card .tc-list li .ti{color:var(--ok);font-size:15px;flex:0 0 auto}
.trial-card .tc-cta{flex:0 0 auto;white-space:nowrap}
@media(max-width:760px){
.trial-card{grid-template-columns:1fr;text-align:center;padding:26px 24px;gap:18px;border-radius:18px}
.trial-card .tc-icon{margin:0 auto;width:54px;height:54px}
.trial-card .tc-icon .ti{font-size:24px}
.trial-card .tc-list{justify-content:center}
.trial-card .tc-cta{width:100%;justify-content:center}
}
/* Alte .trial-promo Definition — wird durch .trial-card ersetzt, hide-fallback */
.trial-promo{display:none}
/* ============ Feature-List v29 — Term + Description, kein chaotisches Wrap ============ */
.feat-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:18px}
.feat-list li{display:grid;grid-template-columns:14px 1fr;gap:14px;align-items:flex-start;line-height:1.45}
.feat-list .fl-dot{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--color-gold);
margin-top:.6em;box-shadow:0 0 12px var(--color-gold-glow);justify-self:center}
.feat-list .fl-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.feat-list .fl-term{font-family:'DM Sans',sans-serif;font-weight:600;font-size:14.5px;
color:var(--color-text-primary);letter-spacing:-.005em;text-wrap:balance}
.feat-list .fl-desc{font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--color-text-secondary);
line-height:1.55;font-weight:400;text-wrap:pretty}
/* ============ Premium-Checker v29 — Glass-Card mit Header + Quick-Beispiele ============ */
.checker{padding:30px 30px 26px;
background:linear-gradient(160deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.012) 100%);
border:1px solid var(--color-border);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border-radius:22px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden;
transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.checker::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--color-gold),transparent);opacity:.5}
.checker:hover{border-color:var(--color-border-hover);box-shadow:0 0 50px var(--color-gold-glow)}
.checker-head{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.checker-head .ch-icon{flex:0 0 auto;width:44px;height:44px;border-radius:13px;
background:rgba(201,168,76,.1);border:1px solid var(--color-border-hover);
display:grid;place-items:center;color:var(--color-gold);font-size:20px}
.checker-head .ch-icon .ti{font-size:20px;line-height:1}
.checker-head .ch-icon svg{width:22px;height:22px;stroke:var(--color-gold)}
.checker-head .ch-text{flex:1;min-width:0}
.checker-head h4{margin:0;font-family:'Fraunces','Playfair Display',serif;font-size:1.1rem;
font-weight:700;letter-spacing:-.014em;color:var(--color-text-primary);line-height:1.2}
.checker-head .ch-sub{font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--color-text-secondary);
margin:3px 0 0;line-height:1.4;font-weight:400}
.checker .checker-input{background:#0a0a0a;border-radius:13px;border-width:1.5px}
.checker-examples{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:-2px}
.checker-examples-lbl{font-family:'DM Sans',sans-serif;font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--color-text-muted);font-weight:600;margin-right:4px}
.checker-examples button{background:rgba(255,255,255,.04);border:1px solid var(--color-border);
color:var(--color-text-secondary);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;
padding:6px 12px;border-radius:999px;cursor:pointer;transition:.22s var(--ease);
letter-spacing:.01em;white-space:nowrap}
.checker-examples button:hover{background:rgba(201,168,76,.09);border-color:var(--color-border-hover);
color:var(--color-gold-light);transform:translateY(-1px)}
@media(max-width:480px){
.checker{padding:24px 22px 22px;border-radius:18px}
.checker-head .ch-icon{width:40px;height:40px}
.checker-head h4{font-size:1rem}
.checker-examples-lbl{display:none}
}
/* ===========================================================================
v37 — Fluid Sizing für /plattformen: clamp() statt fixer Pixel.
Skaliert sauber von iPhone SE (320px) bis 4K (3840px). Doppelte Klassen-
Selektoren erhöhen Specificity → überschreibt verlässlich alle Vorgänger.
=========================================================================== */
/* --- Sektion-Headlines fluid --- */
.sx .shead h2{font-size:clamp(1.6rem,4vw,2.8rem);margin:0 auto 14px;max-width:18ch;line-height:1.18}
.sx .shead p{font-size:clamp(.94rem,1.1vw,1.05rem);max-width:46ch;margin:0 auto;line-height:1.6}
.sx .eyebrow-stars{font-size:clamp(9.5px,.85vw,11px);letter-spacing:clamp(.22em,.32vw,.34em);margin-bottom:clamp(16px,1.8vw,22px)}
.sx .eyebrow-stars::before,.sx .eyebrow-stars::after{width:clamp(20px,2.2vw,28px)}
/* --- Editorial-Split: Bullets links + Poster-Mosaic rechts --- */
.platforms-frow.platforms-frow{
grid-template-columns:1.1fr .9fr;
gap:clamp(28px,4vw,64px);
align-items:center;max-width:1080px;margin:0 auto
}
@media(max-width:880px){
.platforms-frow.platforms-frow{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
}
.platforms-frow.platforms-frow .feat-list{margin-top:0;gap:clamp(14px,1.8vw,22px)}
.platforms-frow.platforms-frow .feat-list li{
display:grid;grid-template-columns:12px 1fr;
gap:clamp(12px,1.4vw,16px);align-items:flex-start
}
.platforms-frow.platforms-frow .feat-list .fl-dot{
width:6px;height:6px;border-radius:50%;background:var(--color-gold);
margin-top:.55em;box-shadow:0 0 12px var(--color-gold-glow);justify-self:center
}
.platforms-frow.platforms-frow .feat-list .fl-term{
font-size:clamp(14.5px,1.15vw,16px);font-weight:600;color:var(--color-text-primary);letter-spacing:-.005em
}
.platforms-frow.platforms-frow .feat-list .fl-desc{
font-size:clamp(13px,1vw,14.5px);line-height:1.6;color:var(--color-text-secondary);font-weight:400
}
.platforms-frow.platforms-frow .frow-vis{
max-width:clamp(280px,32vw,400px);width:100%;justify-self:center;
background:none;border:none;min-height:auto;display:block;box-shadow:none;padding:0
}
.platforms-frow.platforms-frow .poster-3x3{gap:clamp(6px,.8vw,10px)}
.platforms-frow.platforms-frow .poster-3x3 img{border-radius:clamp(8px,.9vw,12px)}
/* --- Geräte-Vitrine: 10 Karten fluid auto-fit --- */
.device-showcase.device-showcase{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(clamp(132px,14vw,180px),1fr));
gap:clamp(10px,1.2vw,16px);
max-width:1080px;margin:0 auto
}
.device-showcase.device-showcase .dev-prem{
padding:clamp(20px,2.4vw,28px) clamp(12px,1.4vw,18px) clamp(18px,2vw,22px);
border-radius:clamp(12px,1vw,16px);
gap:clamp(10px,1.2vw,14px);
min-height:clamp(130px,13vw,160px)
}
.device-showcase.device-showcase .dev-prem .dp-ico{
width:clamp(46px,4.5vw,60px);height:clamp(46px,4.5vw,60px);
border-radius:clamp(11px,1vw,15px)
}
.device-showcase.device-showcase .dev-prem .dp-ico .ti{font-size:clamp(22px,2.3vw,30px)}
.device-showcase.device-showcase .dev-prem .dp-ico svg{
width:clamp(22px,2.3vw,30px);height:clamp(22px,2.3vw,30px)
}
.device-showcase.device-showcase .dev-prem .dp-name{font-size:clamp(13px,1.05vw,15px)}
.device-showcase.device-showcase .dev-prem .dp-sub{font-size:clamp(10.5px,.85vw,12px)}
/* --- Flag-Wall: alle Tiles fluid --- */
.flag-wall.flag-wall{margin:0 auto;max-width:980px;padding:0;background:none;border:0}
.flag-wall.flag-wall .flag-wall-label{
font-size:clamp(10px,.95vw,12px);letter-spacing:clamp(.18em,.3vw,.26em);
margin:0 0 clamp(18px,2vw,24px);gap:clamp(10px,1.2vw,16px)
}
.flag-wall.flag-wall .flag-wall-label::before,
.flag-wall.flag-wall .flag-wall-label::after{width:clamp(24px,3vw,40px)}
.flag-wall.flag-wall .flag-grid-compact{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(clamp(56px,6vw,78px),1fr));
gap:clamp(6px,.7vw,10px)
}
.flag-wall.flag-wall .flag-tile{
padding:clamp(7px,.9vw,11px) 4px clamp(6px,.7vw,9px);
border-radius:clamp(8px,.8vw,12px);
gap:clamp(5px,.6vw,8px);
background:rgba(255,255,255,.018);border:1px solid transparent
}
.flag-wall.flag-wall .flag-tile.is-group{background:rgba(201,168,76,.04)}
.flag-wall.flag-wall .flag-tile:hover{background:rgba(201,168,76,.06);transform:translateY(-2px)}
.flag-wall.flag-wall .flag-tile.is-group:hover{background:rgba(201,168,76,.09)}
.flag-wall.flag-wall .flag-tile img{
width:clamp(26px,2.8vw,36px);height:auto;aspect-ratio:3/2;
object-fit:cover;border-radius:clamp(2.5px,.3vw,4px);
border:1px solid rgba(255,255,255,.12);box-shadow:0 2px 6px rgba(0,0,0,.4);display:block
}
.flag-wall.flag-wall .flag-tile .ft-emoji{
font-size:clamp(19px,2vw,26px);
width:clamp(26px,2.8vw,36px);height:auto;aspect-ratio:3/2;
display:flex;align-items:center;justify-content:center;line-height:1
}
.flag-wall.flag-wall .flag-tile .ft-code{
font-size:clamp(9.5px,.85vw,11px);letter-spacing:.06em;font-weight:600;
color:var(--color-text-secondary);line-height:1;white-space:nowrap
}
/* ===========================================================================
v38 — Section-Spacing fluid (clamp)
Reduziert übergroße Abstände zwischen Sektionen auf jedem Gerät.
Specificity-Boost via .sx.sx / .hero.hero / .shead.shead überschreibt alles.
=========================================================================== */
.sx.sx{padding:clamp(46px,5.5vw,80px) 0}
.sx.sx + .sx.sx{padding-top:clamp(40px,5vw,72px)} /* benachbarte Sektionen etwas enger */
.hero.hero{padding:clamp(72px,8vw,120px) 0 clamp(50px,6.5vw,86px)}
.sx .shead.shead{margin:0 auto clamp(30px,3.8vw,52px);max-width:680px}
.sx .shead.shead h2{margin:0 auto 12px}
.sx .shead.shead p{margin:0 auto}
/* Frow gap auf Plattformen-Sektion (innerhalb der Section ein bisschen luftiger) */
.sx > .container > .frow + .flag-wall{margin-top:clamp(40px,5vw,72px)!important}
/* Footer ebenfalls etwas kompakter */
.footer.footer{padding:clamp(48px,5vw,76px) 0 clamp(24px,2.5vw,36px)}
/* v39 — Section-Übergang noch tighter: Bottom der ersten und Top der zweiten benachbarten Section reduzieren */
.sx.sx + .sx.sx{padding-top:clamp(26px,3vw,46px)}
.sx.sx:has(+ .sx.sx){padding-bottom:clamp(26px,3vw,46px)}
/* v40 — Pricing-Karten: Features-Liste statt Save-Badge */
.pkg-card .pkg-feats{
list-style:none;padding:0;
margin:0 0 clamp(14px,1.6vw,18px);
display:grid;gap:clamp(7px,.8vw,9px);
width:100%;text-align:left
}
.pkg-card .pkg-feats li{
display:flex;align-items:flex-start;gap:9px;
font-family:'DM Sans',sans-serif;
font-size:clamp(11.5px,.9vw,13px);
color:var(--color-text-secondary);font-weight:400;line-height:1.45
}
.pkg-card .pkg-feats li::before{
content:"";flex-shrink:0;width:14px;height:14px;border-radius:50%;
background:rgba(201,168,76,.12);
display:grid;place-items:center;
position:relative;margin-top:2px
}
.pkg-card .pkg-feats li::after{
content:"✓";position:absolute;width:14px;height:14px;
display:flex;align-items:center;justify-content:center;
color:var(--color-gold);font-size:9px;font-weight:700;
pointer-events:none;margin-top:2px
}
.pkg-card .pkg-feats li{position:relative;padding-left:0}
.pkg-card.popular .pkg-feats li::before{background:rgba(232,201,122,.18)}
.pkg-card.popular .pkg-feats li::after{color:var(--color-gold-light)}
.pkg-card.popular .pkg-feats li{color:var(--color-text-primary)}
/* Pkg-save Element überall verbergen (auch falls noch im JS auftaucht) */
.pkg-card .pkg-save{display:none!important}
/* v41 — Dashboard-Highlight in feat-list (edler Pulse + Gold-Indikator) */
.feat-list li.fl-highlight{position:relative}
.feat-list li.fl-highlight .fl-dot{
width:9px;height:9px;background:var(--color-gold);
box-shadow:0 0 0 4px rgba(201,168,76,.12),0 0 18px var(--color-gold-glow);
animation:dashPulse 2.8s ease-in-out infinite
}
@keyframes dashPulse{
0%,100%{box-shadow:0 0 0 4px rgba(201,168,76,.12),0 0 18px var(--color-gold-glow)}
50%{box-shadow:0 0 0 7px rgba(201,168,76,.06),0 0 24px var(--color-gold-glow)}
}
.feat-list li.fl-highlight .fl-term{
color:var(--color-gold-light);font-weight:700;letter-spacing:0
}
@media (prefers-reduced-motion: reduce){
.feat-list li.fl-highlight .fl-dot{animation:none}
}
/* v42 — Plattformen Frow-Text näher zur Mitte (näher zum Poster-Mosaic) */
.platforms-frow.platforms-frow .frow-text{
max-width:clamp(380px,36vw,460px);
margin-left:auto;
padding-right:clamp(0px,2vw,28px);
width:100%
}
@media(max-width:880px){
.platforms-frow.platforms-frow .frow-text{
max-width:none;margin-left:0;padding-right:0
}
}
/* v43 — Content-Tabs für Customer Inhalte-Bereich */
.content-tabs{display:inline-flex;gap:4px;background:rgba(255,255,255,.025);
border:1px solid var(--color-border);border-radius:999px;padding:4px;margin-bottom:22px;
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.content-tabs a{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;
border-radius:999px;font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:600;
color:var(--color-text-secondary);text-decoration:none;letter-spacing:.01em;
transition:background .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease)}
.content-tabs a:hover{color:var(--color-text-primary);background:rgba(255,255,255,.03)}
.content-tabs a.active{background:rgba(201,168,76,.12);color:var(--color-gold);
box-shadow:inset 0 0 0 1px var(--color-border-hover)}
@media(max-width:520px){.content-tabs a{padding:9px 14px;font-size:12.5px;gap:5px}}
/* v44 — Customer Add-Device Modal */
.add-dev-tile{background:rgba(201,168,76,.05);border:1.5px dashed var(--color-border-hover);border-radius:12px;
padding:18px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
cursor:pointer;transition:.25s var(--ease);text-decoration:none;color:var(--color-text-primary);
font-family:'DM Sans',sans-serif}
.add-dev-tile:hover{background:rgba(201,168,76,.1);border-color:var(--color-gold);transform:translateY(-2px)}
.add-dev-tile .plus{font-size:1.8rem;color:var(--color-gold);font-weight:300;line-height:1}
.add-dev-tile strong{font-size:.95rem;font-weight:600}
.add-dev-tile .sub{font-size:.78rem;color:var(--color-text-secondary);text-align:center;line-height:1.4}
.addev-pkgs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 18px}
@media(max-width:600px){.addev-pkgs{grid-template-columns:repeat(2,1fr)}}
.addev-pkg{background:rgba(255,255,255,.025);border:1px solid var(--color-border);border-radius:11px;
padding:12px 8px 10px;text-align:center;cursor:pointer;font-family:'DM Sans',sans-serif;
display:flex;flex-direction:column;gap:3px;transition:.22s var(--ease);position:relative}
.addev-pkg:hover{border-color:var(--color-border-hover);background:rgba(255,255,255,.045)}
.addev-pkg.active{border-color:var(--color-gold);background:rgba(201,168,76,.1)}
.addev-pkg.popular{border-color:rgba(201,168,76,.4)}
.addev-pkg.popular::after{content:"★";position:absolute;top:-6px;right:6px;color:var(--color-gold);font-size:11px}
.addev-pkg .ap-label{font-size:11px;color:var(--color-text-secondary);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.addev-pkg .ap-total{font-family:'Fraunces','Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--color-gold);line-height:1.1;letter-spacing:-.01em}
.addev-pkg .ap-per{font-size:10.5px;color:var(--color-text-muted);font-weight:500}
/* v45/v46 — Support Empty-State kompakt (horizontal: Icon + Text + Button) */
.support-empty{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding:14px 16px;margin-top:8px;
background:rgba(255,255,255,.025);border:1px solid var(--color-border);
border-radius:12px}
.support-empty .se-icon{flex:0 0 auto;width:38px;height:38px;border-radius:10px;
background:rgba(201,168,76,.1);border:1px solid var(--color-border-hover);
display:grid;place-items:center;color:var(--color-gold)}
.support-empty .se-icon svg{width:18px;height:18px;display:block;stroke:currentColor}
.support-empty .se-text{flex:1;min-width:200px;font-family:'DM Sans',sans-serif;
font-size:.9rem;color:var(--color-text-secondary);line-height:1.45}
.support-empty .btn{flex:0 0 auto}
@media(max-width:480px){
.support-empty{padding:12px 14px;gap:10px}
.support-empty .se-text{font-size:.86rem;min-width:160px}
.support-empty .btn{width:100%;text-align:center;justify-content:center;margin-top:4px}
}
/* v47 — Logout-Icon-Button im Nav */
.nav-logout{padding:8px 11px!important;min-width:0;display:inline-grid;place-items:center}
.nav-logout svg{display:block;color:var(--color-text-secondary);transition:color .2s var(--ease)}
.nav-logout:hover svg{color:var(--bad)}
/* ===========================================================================
v48 — Ultraadmin Dashboard Redesign (kompakt, edel, glass)
=========================================================================== */
/* --- Admin-Hero kompakt --- */
.adm-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
padding:18px 24px;margin-bottom:22px;
background:linear-gradient(140deg,rgba(201,168,76,.07) 0%,rgba(255,255,255,.02) 70%);
border:1px solid var(--color-border);border-radius:16px;position:relative;overflow:hidden}
.adm-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--color-gold),transparent);opacity:.5}
.adm-hero h1{font-family:'Fraunces','Playfair Display',serif;font-size:clamp(1.3rem,2vw,1.7rem);
font-weight:700;margin:0;letter-spacing:-.018em;line-height:1.2}
.adm-hero .ah-sub{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--color-text-secondary);
margin:3px 0 0;font-weight:500}
.adm-hero .ah-time{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--color-text-muted);
text-align:right;letter-spacing:.04em}
.adm-hero .ah-time b{display:block;color:var(--color-text-primary);font-size:14px;font-weight:600;margin-bottom:2px}
/* --- KPI-Cards (4 prominent Metrics) --- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.kpi-grid{grid-template-columns:1fr}}
.kpi-card{background:rgba(255,255,255,.025);border:1px solid var(--color-border);border-radius:14px;
padding:18px 18px 16px;transition:border-color .25s var(--ease),background .25s var(--ease);position:relative;overflow:hidden}
.kpi-card:hover{border-color:var(--color-border-hover);background:rgba(255,255,255,.04)}
.kpi-card .kpi-lbl{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--color-text-secondary);font-weight:600;display:flex;align-items:center;gap:6px}
.kpi-card .kpi-lbl .ic{color:var(--color-gold);font-size:14px;line-height:1}
.kpi-card .kpi-val{font-family:'Fraunces','Playfair Display',serif;
font-size:clamp(1.6rem,2.6vw,2rem);font-weight:700;
color:var(--color-text-primary);margin:6px 0 2px;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;line-height:1}
.kpi-card.gold .kpi-val{color:var(--color-gold)}
.kpi-card .kpi-sub{font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--color-text-muted);font-weight:500;margin-top:4px}
.kpi-card .kpi-sub.ok{color:var(--ok)}
.kpi-card .kpi-sub.warn{color:var(--warn)}
.kpi-card .kpi-sub.bad{color:var(--bad)}
/* --- Action-Alert (wichtige Warnung wenn was schief läuft) --- */
.adm-alert{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border-radius:12px;margin-bottom:18px;font-family:'DM Sans',sans-serif;font-size:13.5px}
.adm-alert.warn{background:rgba(232,184,115,.08);border:1px solid rgba(232,184,115,.3);color:#f0d9af}
.adm-alert.bad{background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.3);color:#ffb0b0}
.adm-alert .aa-ic{flex:0 0 auto;font-size:1.1rem;line-height:1}
.adm-alert .aa-body strong{display:block;margin-bottom:3px;color:inherit}
.adm-alert .aa-action{margin-left:auto;flex-shrink:0}
/* --- Glass-Panels --- */
.gpanel{background:rgba(255,255,255,.025);border:1px solid var(--color-border);border-radius:14px;padding:18px 20px;margin-bottom:18px}
.gpanel h3{margin:0 0 14px;font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:700;letter-spacing:-.005em;
display:flex;align-items:center;gap:8px}
.gpanel h3 .ic{color:var(--color-gold)}
.gpanel h3 .count{margin-left:auto;background:rgba(201,168,76,.1);color:var(--color-gold);
font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.04em}
.gpanel.tight{padding:14px 16px}
.gpanel-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
@media(max-width:1000px){.gpanel-grid{grid-template-columns:1fr}}
/* --- Bar-Chart edler --- */
.bar-row{display:grid;grid-template-columns:64px 1fr 36px;gap:12px;align-items:center;margin-bottom:6px}
.bar-row .ym{font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--color-text-muted);font-weight:600;letter-spacing:.02em}
.bar-row .bar{height:8px;background:rgba(255,255,255,.05);border-radius:4px;overflow:hidden;position:relative}
.bar-row .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--color-gold-deep),var(--color-gold-light));border-radius:4px;
box-shadow:0 0 12px var(--color-gold-glow);transition:width .4s var(--ease)}
.bar-row .cnt{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;text-align:right;color:var(--color-text-primary);font-variant-numeric:tabular-nums}
/* --- Compact list (Top countries, Expiring etc) --- */
.adm-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.adm-list li{display:flex;justify-content:space-between;align-items:center;padding:8px 0;
border-bottom:1px solid var(--color-border);font-family:'DM Sans',sans-serif;font-size:13px}
.adm-list li:last-child{border-bottom:0}
.adm-list li .nm{color:var(--color-text-primary);font-weight:500}
.adm-list li .vl{color:var(--color-gold);font-weight:700;font-variant-numeric:tabular-nums}
.adm-list li .sub{color:var(--color-text-muted);font-size:11.5px;margin-left:6px}
.adm-list .empty{color:var(--color-text-muted);font-style:italic;text-align:center;padding:14px 0}
/* --- Balance Display --- */
.bal-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--color-border);
font-family:'DM Sans',sans-serif}
.bal-row:last-child{border-bottom:0}
.bal-row .bal-lbl{font-size:13px;color:var(--color-text-secondary);display:flex;align-items:center;gap:7px}
.bal-row .bal-val{font-family:'Fraunces','Playfair Display',serif;font-size:1.3rem;font-weight:700;
color:var(--color-text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.bal-row .bal-val.low{color:var(--bad)}
.bal-row .bal-val.warn{color:var(--warn)}
.bal-row .bal-val .unit{font-size:11px;color:var(--color-text-muted);font-family:'DM Sans',sans-serif;font-weight:500;margin-left:4px;letter-spacing:.04em}
/* v49 — User-Aktionsmenüs erweitern + Kommentare */
.menu-pop .menu-sec{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--color-text-muted);padding:8px 11px 4px;margin-top:4px}
.user-comments{margin-top:8px;padding:10px 12px;background:rgba(255,255,255,.022);
border:1px solid var(--color-border);border-radius:10px}
.user-comments details summary{font-size:12.5px;color:var(--color-text-secondary);cursor:pointer;
font-family:'DM Sans',sans-serif;font-weight:600;letter-spacing:.02em;list-style:none}
.user-comments details summary::-webkit-details-marker{display:none}
.user-comments details summary::before{content:"▸";display:inline-block;margin-right:6px;color:var(--color-gold);transition:transform .2s}
.user-comments details[open] summary::before{transform:rotate(90deg)}
.user-comments .uc-count{margin-left:6px;background:rgba(201,168,76,.12);color:var(--color-gold);
font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;letter-spacing:.04em}
.uc-list{margin:10px 0 0;display:flex;flex-direction:column;gap:7px}
.uc-item{background:rgba(255,255,255,.02);border:1px solid var(--color-border);border-radius:8px;
padding:8px 10px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--color-text-primary);position:relative}
.uc-item .uc-meta{font-size:10.5px;color:var(--color-text-muted);font-weight:600;letter-spacing:.02em;display:flex;align-items:center;gap:6px;margin-bottom:4px}
.uc-item .uc-meta .role{padding:1px 6px;border-radius:999px;font-size:9.5px;letter-spacing:.06em}
.uc-item .uc-meta .role.ultraadmin{background:rgba(201,168,76,.15);color:var(--color-gold-light)}
.uc-item .uc-meta .role.admin{background:rgba(127,184,255,.12);color:#bcd9ff}
.uc-item .uc-body{line-height:1.45;white-space:pre-wrap;word-break:break-word}
.uc-item form.del{position:absolute;top:6px;right:6px}
.uc-item .uc-del{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:14px;padding:2px 4px;line-height:1}
.uc-item .uc-del:hover{color:var(--bad)}
.uc-form{margin-top:8px;display:flex;gap:6px;align-items:flex-start}
.uc-form textarea{flex:1;background:#0c0c0c;border:1px solid var(--color-border);border-radius:8px;
color:var(--color-text-primary);font-family:'DM Sans',sans-serif;font-size:13px;padding:7px 10px;resize:vertical;min-height:36px;line-height:1.45}
.uc-form textarea:focus{outline:0;border-color:var(--color-gold)}
.uc-form button{flex-shrink:0;font-size:12px;padding:7px 12px;border-radius:8px;
background:rgba(201,168,76,.12);border:1px solid var(--color-border-hover);color:var(--color-gold);font-weight:600;cursor:pointer;font-family:inherit}
.uc-form button:hover{background:rgba(201,168,76,.2)}
/* v50 — Admin Dashboard Card-View für User-Liste */
.user-card{background:rgba(255,255,255,.025);border:1px solid var(--color-border);border-radius:13px;
padding:14px 16px;margin-bottom:10px;transition:border-color .25s var(--ease),background .25s var(--ease)}
.user-card:hover{border-color:var(--color-border-hover);background:rgba(255,255,255,.035)}
.uc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.uc-head .uc-name{font-family:'DM Sans',sans-serif;font-weight:700;font-size:1.02rem;color:var(--color-text-primary);
display:flex;align-items:center;gap:8px}
.uc-head .st{padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.uc-head .st.active{background:rgba(95,208,160,.12);color:#9aecbf}
.uc-head .st.paused{background:rgba(232,184,115,.13);color:#f0d09a}
.uc-head .st.expired{background:rgba(255,107,107,.13);color:#ffb0b0}
.uc-info{display:flex;gap:14px;flex-wrap:wrap;font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--color-text-secondary);margin-top:2px}
.uc-info span{display:inline-flex;align-items:center;gap:5px}
.uc-info b{color:var(--color-text-primary);font-weight:600}
.uc-info .uc-mac{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;letter-spacing:.02em}
.uc-info .uc-rest{color:var(--color-gold)}
.uc-info .uc-rest.warn{color:var(--warn)}
.uc-info .uc-rest.bad{color:var(--bad)}
.uc-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.uc-actions .menu{position:relative}
.uc-notes{margin-top:10px;padding-top:10px;border-top:1px solid var(--color-border)}
/* Quick-Action-Tile (User anlegen / Trial) */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:18px}
.qa-tile{background:rgba(255,255,255,.025);border:1px solid var(--color-border);border-radius:13px;padding:16px 18px;
display:flex;align-items:center;gap:14px;transition:.25s var(--ease)}
.qa-tile:hover{border-color:var(--color-border-hover);background:rgba(255,255,255,.04)}
.qa-tile .qa-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;
background:rgba(201,168,76,.1);border:1px solid var(--color-border-hover);
display:grid;place-items:center;color:var(--color-gold);font-size:18px}
.qa-tile .qa-body{flex:1;min-width:0}
.qa-tile .qa-title{font-family:'DM Sans',sans-serif;font-weight:700;font-size:.95rem;color:var(--color-text-primary);line-height:1.2;margin:0 0 2px}
.qa-tile .qa-sub{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--color-text-secondary);margin:0;line-height:1.4}
@media(max-width:600px){
.uc-head{align-items:flex-start}
.uc-info{font-size:12px;gap:10px}
.qa-tile{padding:14px 16px}
}
/* v51 — Ultraadmin Panel Polish: kompakter, professioneller */
.side.side{padding:18px 12px}
.side.side .logo{margin:0 6px 18px;font-size:1rem}
.side.side a{padding:8px 12px;border-radius:9px;font-size:13px;margin-bottom:2px;letter-spacing:.005em;display:flex;align-items:center;gap:9px}
.side.side .grp{font-size:9.5px;letter-spacing:.18em;margin:14px 10px 4px;color:var(--color-text-muted)}
.side.side .sep{height:1px;background:var(--color-border);margin:10px 6px}
/* Dashboard tighter */
.adm-hero.adm-hero{padding:14px 18px;margin-bottom:14px}
.adm-hero h1{font-size:clamp(1.1rem,1.7vw,1.4rem)}
.adm-hero .ah-sub{font-size:12px}
.adm-hero .ah-time{font-size:11.5px}
.adm-hero .ah-time b{font-size:13px}
.kpi-grid.kpi-grid{gap:10px;margin-bottom:14px}
.kpi-card.kpi-card{padding:14px 16px 13px;border-radius:11px}
.kpi-card .kpi-lbl{font-size:10.5px}
.kpi-card .kpi-val{font-size:clamp(1.4rem,2.2vw,1.75rem);margin:4px 0 2px}
.kpi-card .kpi-sub{font-size:10.5px}
.gpanel.gpanel{padding:14px 16px;border-radius:11px;margin-bottom:14px}
.gpanel.gpanel h3{font-size:.88rem;margin-bottom:10px}
.gpanel-grid.gpanel-grid{gap:12px;margin-bottom:14px}
.adm-alert.adm-alert{padding:11px 14px;font-size:13px;border-radius:10px;margin-bottom:12px}
.bar-row{margin-bottom:5px}
.bar-row .bar{height:7px}
.bar-row .cnt{font-size:12.5px}
.bar-row .ym{font-size:11px}
.adm-list li{font-size:12.5px;padding:6px 0}
.bal-row{padding:8px 0}
.bal-row .bal-val{font-size:1.15rem}
/* Main padding kompakter */
.main.main{padding:22px 26px}
@media(max-width:1000px){.main.main{padding:20px}}
@media(max-width:600px){.main.main{padding:16px}}
/* ===========================================================================
v52 — Light-Theme Support
data-theme="light" auf aktiviert Light Mode. Alle Token überschrieben,
plus explizite Surface-Overrides für die wichtigsten Komponenten.
=========================================================================== */
:root{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
html[data-theme="light"]{
--color-bg:#f7f5ef;
--color-bg-card:#ffffff;
--color-bg-elevated:#fbfaf5;
--color-gold:#a8842a;
--color-gold-light:#c9a84c;
--color-gold-glow:rgba(168,132,42,.14);
--color-text-primary:#1a1916;
--color-text-secondary:#5a5854;
--color-text-muted:#8a8680;
--color-border:rgba(0,0,0,.08);
--color-border-hover:rgba(168,132,42,.4);
/* Backward-compat Aliases */
--bg:var(--color-bg);
--bg2:#efedea;
--panel:var(--color-bg-card);
--panel2:#f2f0eb;
--elev:var(--color-bg-elevated);
--line:var(--color-border);
--line2:var(--color-border-hover);
--txt:var(--color-text-primary);
--muted:var(--color-text-secondary);
--muted2:var(--color-text-muted);
--gold:var(--color-gold);
--gold-lite:var(--color-gold-light);
--gold-deep:#7a5f1f;
--grad:linear-gradient(135deg,#a8842a 0%,#c9a84c 50%,#a8842a 100%);
--grad-soft:linear-gradient(135deg,rgba(168,132,42,.14),rgba(168,132,42,.06));
--grad-warm:linear-gradient(135deg,#c9a84c 0%,#a8842a 50%,#7a5f1f 100%);
--shadow:0 20px 60px rgba(0,0,0,.08);
--shadow-gold:0 0 60px var(--color-gold-glow);
}
/* --- Body --- */
html[data-theme="light"] body{color-scheme:light}
html[data-theme="light"] ::selection{background:rgba(168,132,42,.32);color:#000}
/* --- Hero & Poster Backgrounds --- */
html[data-theme="light"] .hero{background:var(--color-bg);border-bottom-color:rgba(0,0,0,.06)}
html[data-theme="light"] .hero-bg{opacity:.18;filter:blur(2px) saturate(.8) brightness(.95)}
html[data-theme="light"] .hero::before{background:
radial-gradient(ellipse 65% 50% at 50% 28%,rgba(168,132,42,.12) 0%,transparent 60%),
linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(247,245,239,.8) 60%,var(--color-bg) 100%)}
html[data-theme="light"] .hero h1{color:var(--color-text-primary)}
html[data-theme="light"] .hero h1 .italic-line{color:var(--color-text-secondary)}
html[data-theme="light"] .hero .lead{color:var(--color-text-secondary)}
/* --- Glass & Cards (rgba(255,255,255,...) → rgba(0,0,0,...)) --- */
html[data-theme="light"] .glass,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .tile,
html[data-theme="light"] .pkg-card,
html[data-theme="light"] .pkg-mini,
html[data-theme="light"] .dev-card,
html[data-theme="light"] .dev-prem,
html[data-theme="light"] .tcard,
html[data-theme="light"] .checker,
html[data-theme="light"] .trial-card,
html[data-theme="light"] .privacy-card,
html[data-theme="light"] .flag-showcase,
html[data-theme="light"] .panel,
html[data-theme="light"] .gpanel,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .user-card,
html[data-theme="light"] .qa-tile,
html[data-theme="light"] .adm-hero,
html[data-theme="light"] .stat,
html[data-theme="light"] .checker-results,
html[data-theme="light"] .checker-input,
html[data-theme="light"] .user-comments,
html[data-theme="light"] .uc-item,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .msg-card,
html[data-theme="light"] .modal-panel,
html[data-theme="light"] .cmp-bar,
html[data-theme="light"] .trial-promo{
background:var(--color-bg-card);
border-color:var(--color-border)
}
html[data-theme="light"] .glass:hover,
html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .tile:hover,
html[data-theme="light"] .dev-card:hover,
html[data-theme="light"] .dev-prem:hover,
html[data-theme="light"] .tcard:hover,
html[data-theme="light"] .pkg-card:hover,
html[data-theme="light"] .kpi-card:hover,
html[data-theme="light"] .user-card:hover{
background:var(--color-bg-elevated);
border-color:var(--color-border-hover)
}
/* --- Section-Backgrounds (alternating) --- */
html[data-theme="light"] .sx{background:var(--color-bg);border-top-color:rgba(0,0,0,.06)}
html[data-theme="light"] .sx-alt{background:#efedea}
html[data-theme="light"] .section-velvet{background:var(--color-bg)}
html[data-theme="light"] .section-alt{background:#efedea}
html[data-theme="light"] .poster-strip{background:#efedea;border-color:rgba(0,0,0,.06)}
/* --- Navigation --- */
html[data-theme="light"] .nav{background:rgba(247,245,239,.85);border-bottom-color:var(--color-border)}
html[data-theme="light"] .nav.scrolled{background:rgba(247,245,239,.94)}
html[data-theme="light"] .nav-links a{color:var(--color-text-secondary)}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active{color:var(--color-text-primary)}
/* --- Footer --- */
html[data-theme="light"] .footer{background:#efedea;border-top-color:var(--color-border)}
/* --- Forms & Inputs --- */
html[data-theme="light"] .input,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{background:#ffffff;border-color:var(--color-border);color:var(--color-text-primary)}
html[data-theme="light"] .input:focus,
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus{border-color:var(--color-gold)}
html[data-theme="light"] .input::placeholder,
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{color:var(--color-text-muted)}
/* --- Buttons --- */
html[data-theme="light"] .btn-ghost{color:var(--color-text-primary);border-color:var(--color-border-hover)}
html[data-theme="light"] .btn-ghost:hover{background:rgba(168,132,42,.08);border-color:var(--color-gold)}
html[data-theme="light"] .icon-btn{color:var(--color-text-secondary);border-color:var(--color-border)}
html[data-theme="light"] .icon-btn:hover{color:var(--color-gold);border-color:var(--color-gold);background:rgba(168,132,42,.08)}
/* --- Admin Sidebar --- */
html[data-theme="light"] .side{background:#efedea;border-right-color:var(--color-border)}
html[data-theme="light"] .side a{color:var(--color-text-secondary)}
html[data-theme="light"] .side a:hover{background:rgba(0,0,0,.04);color:var(--color-text-primary)}
html[data-theme="light"] .side a.active{background:rgba(168,132,42,.13);color:var(--color-gold);border-color:var(--color-border-hover)}
/* --- Tables --- */
html[data-theme="light"] .table{color:var(--color-text-primary)}
html[data-theme="light"] .table th{color:var(--color-text-secondary);background:#f7f5ef}
html[data-theme="light"] .table th,html[data-theme="light"] .table td{border-bottom-color:var(--color-border)}
html[data-theme="light"] .table tbody tr:hover{background:rgba(0,0,0,.02)}
/* --- Status-dots / Badges --- */
html[data-theme="light"] .st-dot{background:rgba(0,0,0,.04);border-color:var(--color-border)}
html[data-theme="light"] .badge.b-active{background:rgba(95,208,160,.18);color:#1f7c52}
html[data-theme="light"] .badge.b-paused{background:rgba(168,132,42,.18);color:#7a5f1f}
html[data-theme="light"] .badge.b-expired{background:rgba(255,107,107,.18);color:#8a2828}
/* --- Modal --- */
html[data-theme="light"] .modal-backdrop{background:rgba(255,255,255,.55)}
html[data-theme="light"] .modal-panel{background:#ffffff;border-color:var(--color-border)}
html[data-theme="light"] .modal-close{background:rgba(0,0,0,.04);border-color:var(--color-border);color:var(--color-text-secondary)}
html[data-theme="light"] .modal-close:hover{background:rgba(0,0,0,.08);color:var(--color-text-primary)}
/* --- Alerts --- */
html[data-theme="light"] .alert-ok{background:rgba(95,208,160,.14);border-color:rgba(31,124,82,.4);color:#1f7c52}
html[data-theme="light"] .alert-bad{background:rgba(255,107,107,.12);border-color:rgba(138,40,40,.4);color:#8a2828}
html[data-theme="light"] .alert-info{background:rgba(168,132,42,.1);border-color:var(--color-border-hover);color:#7a5f1f}
/* --- Plan-Spot Pricing --- */
html[data-theme="light"] .plan-spot{background:linear-gradient(170deg,#ffffff 0%,#fbf9f3 60%);border-color:var(--color-border-hover);
box-shadow:0 0 60px rgba(168,132,42,.15),0 20px 60px rgba(0,0,0,.08)}
html[data-theme="light"] .plan-spot::before{background:linear-gradient(90deg,transparent,var(--color-gold),transparent);opacity:.5}
html[data-theme="light"] .plan-spot::after{background:radial-gradient(closest-side,rgba(168,132,42,.1),transparent 70%)}
/* --- Pkg-Card Pricing --- */
html[data-theme="light"] .pkg-card.popular{background:linear-gradient(170deg,rgba(168,132,42,.08),#fbf9f3);border-color:var(--color-border-hover);
box-shadow:0 0 40px rgba(168,132,42,.1),0 16px 40px rgba(0,0,0,.06)}
/* --- Customer Hero-Card --- */
html[data-theme="light"] .hero-card{background:linear-gradient(135deg,rgba(168,132,42,.08),rgba(168,132,42,.02));border-color:var(--color-border-hover)}
/* --- Choose etc --- */
html[data-theme="light"] .cur-switch{background:rgba(0,0,0,.025);border-color:var(--color-border)}
html[data-theme="light"] .cur-switch a{color:var(--color-text-secondary)}
html[data-theme="light"] .cur-switch a:hover{color:var(--color-text-primary);background:rgba(0,0,0,.03)}
html[data-theme="light"] .cur-switch a.active{background:rgba(168,132,42,.13);color:var(--color-gold)}
/* --- Theme-Toggle Button --- */
.theme-toggle{display:inline-grid;place-items:center;background:none;border:1px solid var(--color-border-hover);
color:var(--color-text-secondary);width:34px;height:34px;border-radius:999px;cursor:pointer;
padding:0;transition:.22s var(--ease);flex-shrink:0}
.theme-toggle:hover{color:var(--color-gold);border-color:var(--color-gold);background:rgba(201,168,76,.08)}
.theme-toggle svg{width:16px;height:16px;display:block}
.theme-toggle .ic-sun{display:none}
.theme-toggle .ic-moon{display:block}
html[data-theme="light"] .theme-toggle .ic-sun{display:block}
html[data-theme="light"] .theme-toggle .ic-moon{display:none}
/* Sidebar-Theme-Toggle Style */
.side .side-theme{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:9px;
font-size:13px;color:var(--color-text-secondary);background:none;border:0;cursor:pointer;
font-family:inherit;width:auto;margin:0 0 2px;transition:.15s;text-align:left}
.side .side-theme:hover{background:rgba(255,255,255,.04);color:var(--color-text-primary)}
.side .side-theme .ic-sun{display:none}
.side .side-theme .ic-moon{display:block}
html[data-theme="light"] .side .side-theme .ic-sun{display:block}
html[data-theme="light"] .side .side-theme .ic-moon{display:none}
html[data-theme="light"] .side .side-theme:hover{background:rgba(0,0,0,.04)}
/* ============================================================ */
/* v55 — Accounts-Page: Tabs, Collapsible Cards, Color-Marker */
/* ============================================================ */
/* Tab-Switch User/Admins */
.acc-tabs{display:flex;gap:4px;margin:0 0 14px;padding:4px;background:rgba(255,255,255,.03);
border:1px solid var(--color-border);border-radius:11px;width:fit-content}
.acc-tab{background:none;border:0;padding:8px 16px;border-radius:8px;cursor:pointer;
color:var(--color-text-secondary);font-family:'DM Sans',sans-serif;font-weight:600;font-size:13px;
display:inline-flex;align-items:center;gap:8px;transition:.18s var(--ease)}
.acc-tab:hover{color:var(--color-text-primary)}
.acc-tab.is-active{background:rgba(201,168,76,.13);color:var(--color-gold)}
.acc-tab .count-chip{background:rgba(255,255,255,.06);color:inherit;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700}
.acc-tab.is-active .count-chip{background:rgba(201,168,76,.18)}
/* Tab-Panes */
.acc-pane{display:none}
.acc-pane.is-active{display:block}
/* Collapsible Card-Layout */
.acc-cards{display:flex;flex-direction:column;gap:8px}
.user-card.collapsible{padding:0;overflow:hidden;position:relative}
.user-card.collapsible .uc-head.uc-toggle{
display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;margin:0;
background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit;
position:relative;transition:background .18s var(--ease)}
.user-card.collapsible .uc-head.uc-toggle:hover{background:rgba(255,255,255,.025)}
.user-card.collapsible .uc-name{display:flex;align-items:center;gap:9px;flex:1;min-width:0;flex-wrap:wrap}
.user-card.collapsible .uc-chev{display:inline-block;color:var(--color-text-muted);
transition:transform .22s var(--ease);font-size:11px;width:10px}
.user-card.collapsible.is-open .uc-chev{transform:rotate(90deg)}
.user-card.collapsible .uc-head-right{display:flex;align-items:center;gap:14px;color:var(--color-text-secondary);
font-family:'DM Sans',sans-serif;font-size:12.5px;flex-shrink:0}
.user-card.collapsible .uc-head-right .uc-rest{font-weight:600}
.user-card.collapsible .uc-head-right .uc-head-mac{
font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;color:var(--color-text-muted)}
/* Farbiger linker Streifen wenn tag_color gesetzt */
.user-card.collapsible .uc-color-bar{
position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent;transition:.2s}
.user-card.collapsible[data-color="red"] .uc-color-bar{background:#e23b3b}
.user-card.collapsible[data-color="orange"] .uc-color-bar{background:#e8881a}
.user-card.collapsible[data-color="yellow"] .uc-color-bar{background:#e6c12a}
.user-card.collapsible[data-color="green"] .uc-color-bar{background:#3aa757}
.user-card.collapsible[data-color="blue"] .uc-color-bar{background:#3879d6}
.user-card.collapsible[data-color="purple"] .uc-color-bar{background:#8e4fc4}
.user-card.collapsible[data-color]:not([data-color=""]){border-left:0}
.user-card.collapsible[data-color]:not([data-color=""]) .uc-head.uc-toggle{padding-left:18px}
/* Notiz-Badge im Head */
.uc-note-badge{display:inline-flex;align-items:center;gap:3px;
background:rgba(201,168,76,.13);color:var(--color-gold);
padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em}
/* Body-Wrap (eingeklappt = hidden) */
.user-card.collapsible .uc-body-wrap{padding:0 16px 14px;border-top:1px solid var(--color-border)}
.user-card.collapsible .uc-actions-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding:12px 0 10px;margin-bottom:8px;border-bottom:1px dashed var(--color-border)}
.user-card.collapsible .uc-info{padding:6px 0 0}
/* Color-Picker */
.color-picker{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.cp-label{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--color-text-secondary);font-weight:600}
.cp-dot-form{display:inline;margin:0;padding:0}
.cp-dot{width:18px;height:18px;border-radius:999px;background:var(--c);border:2px solid transparent;
cursor:pointer;padding:0;transition:.18s var(--ease);outline:0;display:inline-block}
.cp-dot:hover{transform:scale(1.18)}
.cp-dot.is-on{border-color:var(--color-text-primary);box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.cp-clear{width:18px;height:18px;border-radius:999px;background:none;border:1px dashed var(--color-border-hover);
color:var(--color-text-muted);cursor:pointer;font-size:13px;line-height:1;padding:0;display:inline-grid;place-items:center}
.cp-clear:hover{color:var(--bad);border-color:var(--bad)}
/* Notizen-Block im Body */
.user-card.collapsible .uc-notes{margin-top:10px;padding-top:10px;border-top:1px solid var(--color-border)}
.user-card.collapsible .uc-notes-head{font-family:'DM Sans',sans-serif;font-weight:600;font-size:13px;
color:var(--color-text-primary);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.user-card.collapsible .uc-count{background:rgba(201,168,76,.15);color:var(--color-gold);
padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700}
/* Light-Theme Overrides */
html[data-theme="light"] .acc-tabs{background:rgba(0,0,0,.025);border-color:var(--color-border)}
html[data-theme="light"] .acc-tab.is-active{background:rgba(168,132,42,.13);color:var(--color-gold)}
html[data-theme="light"] .user-card.collapsible .uc-head.uc-toggle:hover{background:rgba(0,0,0,.025)}
html[data-theme="light"] .uc-note-badge{background:rgba(168,132,42,.13);color:var(--color-gold)}
html[data-theme="light"] .user-card.collapsible .uc-count{background:rgba(168,132,42,.13);color:var(--color-gold)}
html[data-theme="light"] .cp-dot.is-on{border-color:var(--color-text-primary);box-shadow:0 0 0 2px rgba(0,0,0,.06)}
@media(max-width:600px){
.user-card.collapsible .uc-head.uc-toggle{flex-wrap:wrap;gap:6px}
.user-card.collapsible .uc-head-right{font-size:11.5px;gap:10px}
.user-card.collapsible .uc-actions-row{gap:10px}
.acc-tab{padding:7px 12px;font-size:12px}
}
/* ============================================================ */
/* v56 — Posteingang: Tab-Pills, Msg-Bubbles, Report-Tiles */
/* ============================================================ */
/* Status-Chips im Tab-Header */
.acc-tab .count-chip.unread-chip{background:rgba(232,136,26,.18);color:#f0a85e}
.acc-tab .count-chip.wa-chip-on{background:rgba(95,208,160,.16);color:#9aecbf}
.acc-tab .count-chip.wa-chip-off{background:rgba(255,107,107,.13);color:#ffb0b0}
/* Unread-Marker am Card */
#msg-list .user-card.is-unread{border-left:3px solid var(--color-gold)}
#msg-list .user-card.is-unread .uc-name{font-weight:700}
#msg-list .user-card.is-read{opacity:.92}
#filter-unread.is-active{background:rgba(201,168,76,.13);color:var(--color-gold);border-color:var(--color-gold)}
/* Bubble-Thread im Card-Body */
.msg-thread{display:flex;flex-direction:column;gap:8px;padding:12px 0 10px;margin:0 0 8px;border-bottom:1px dashed var(--color-border)}
.msg-bubble{max-width:80%;padding:9px 13px;border-radius:13px;font-family:'DM Sans',sans-serif;font-size:13.5px;line-height:1.5}
.msg-bubble .msg-who{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:3px;font-weight:600}
.msg-bubble .msg-text{color:var(--color-text-primary);white-space:pre-wrap;word-break:break-word}
.msg-bubble.msg-cust{align-self:flex-start;background:rgba(255,255,255,.04);border:1px solid var(--color-border)}
.msg-bubble.msg-admin{align-self:flex-end;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25)}
.msg-bubble.msg-admin .msg-text{color:#f3e0b4}
.msg-warn{margin:0 0 10px;font-size:12px;color:var(--warn);padding:8px 12px;
background:rgba(232,184,115,.07);border-left:3px solid var(--warn);border-radius:6px}
.msg-reply{display:flex;gap:8px;align-items:flex-end;margin:0 0 8px}
.msg-reply textarea{flex:1;margin:0;resize:vertical;min-height:54px}
.msg-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--color-border)}
/* Report-Tiles (Filter-Kacheln) */
.qa-tile.rep-tile{cursor:pointer}
.qa-tile.rep-tile.is-active{background:rgba(201,168,76,.08);border-color:var(--color-gold)}
.qa-tile.rep-tile.is-active .qa-title{color:var(--color-gold)}
.rep-ic-all{background:rgba(255,255,255,.06);color:var(--color-text-primary)}
.rep-ic-conf{background:rgba(95,208,160,.12);color:#9aecbf;border-color:rgba(95,208,160,.25)}
.rep-ic-dis{background:rgba(232,184,115,.13);color:#f0d09a;border-color:rgba(232,184,115,.3)}
.rep-ic-unc{background:rgba(120,140,200,.13);color:#b6c2eb;border-color:rgba(120,140,200,.3)}
/* Report Status-Pills in der Tabelle */
.rep-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;
letter-spacing:.04em;text-transform:uppercase}
.rep-pill.rep-confirmed{background:rgba(95,208,160,.12);color:#9aecbf}
.rep-pill.rep-disagree{background:rgba(232,184,115,.13);color:#f0d09a}
.rep-pill.rep-unclear{background:rgba(120,140,200,.13);color:#b6c2eb}
.rep-pill.rep-pending{background:rgba(255,255,255,.06);color:var(--color-text-muted)}
.rep-action{font-size:11.5px;color:var(--color-text-secondary)}
/* Light-Theme Overrides */
html[data-theme="light"] .msg-bubble.msg-cust{background:rgba(0,0,0,.025)}
html[data-theme="light"] .msg-bubble.msg-admin{background:rgba(168,132,42,.08);border-color:rgba(168,132,42,.25)}
html[data-theme="light"] .msg-bubble.msg-admin .msg-text{color:#7a5e1d}
html[data-theme="light"] #msg-list .user-card.is-unread{border-left-color:var(--color-gold)}
html[data-theme="light"] .qa-tile.rep-tile.is-active{background:rgba(168,132,42,.07)}
html[data-theme="light"] .rep-pill.rep-confirmed{background:rgba(58,167,87,.13);color:#256d35}
html[data-theme="light"] .rep-pill.rep-disagree{background:rgba(232,136,26,.13);color:#925210}
html[data-theme="light"] .rep-pill.rep-unclear{background:rgba(56,121,214,.12);color:#284f8b}
html[data-theme="light"] .msg-warn{background:rgba(232,184,115,.13);color:#7a5212}
html[data-theme="light"] .acc-tab .count-chip.unread-chip{background:rgba(232,136,26,.16);color:#925210}
html[data-theme="light"] .acc-tab .count-chip.wa-chip-on{background:rgba(58,167,87,.16);color:#256d35}
html[data-theme="light"] .acc-tab .count-chip.wa-chip-off{background:rgba(226,59,59,.13);color:#9c2929}
@media(max-width:600px){
.msg-bubble{max-width:92%;font-size:13px}
.msg-reply{flex-direction:column;align-items:stretch}
.msg-reply textarea{min-height:60px}
}
/* v57 — Balance-Row Stale / Error Indikatoren */
.bal-stale{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;color:var(--warn);
background:rgba(232,184,115,.12);padding:2px 7px;border-radius:999px;margin-left:6px;letter-spacing:.04em;text-transform:uppercase}
.bal-err{font-size:11.5px;color:var(--bad);font-family:'DM Sans',sans-serif;padding:6px 10px;
background:rgba(255,107,107,.07);border-left:3px solid var(--bad);border-radius:6px;margin:6px 0 0}
html[data-theme="light"] .bal-stale{background:rgba(232,136,26,.13);color:#925210}
html[data-theme="light"] .bal-err{background:rgba(226,59,59,.07);color:#9c2929}
/* ============================================================ */
/* v58 — Dashboard refresh: KPI-Warn-States, Status-Strip */
/* ============================================================ */
/* KPI Warn-Zustände (linker farbiger Rand für sofortigen Hinweis) */
.kpi-card.is-warn{border-left:3px solid var(--warn)}
.kpi-card.is-bad{border-left:3px solid var(--bad)}
.kpi-card .kpi-unit{font-size:.55em;color:var(--color-text-muted);font-family:'DM Sans',sans-serif;
font-weight:500;margin-left:5px;letter-spacing:.04em;text-transform:uppercase}
.kpi-card .kpi-sub.ok{color:var(--color-text-muted)}
.kpi-card .kpi-sub.warn{color:var(--warn)}
.kpi-card .kpi-sub.bad{color:var(--bad);font-weight:600}
.kpi-card .bal-stale{margin-left:6px}
/* Status-Strip — 4 schmale Status-Kacheln */
.status-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}
@media(max-width:1100px){.status-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.status-strip{grid-template-columns:1fr}}
.ss-tile{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.02);
border:1px solid var(--color-border);border-radius:11px;padding:11px 14px;
text-decoration:none;color:inherit;transition:.2s var(--ease)}
.ss-tile:hover{border-color:var(--color-border-hover);background:rgba(255,255,255,.035);transform:translateY(-1px)}
.ss-tile.is-warn{border-left:3px solid var(--warn);padding-left:11px}
.ss-tile.is-ok{border-left:3px solid var(--ok,#5fd0a0);padding-left:11px}
.ss-ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
background:rgba(201,168,76,.08);font-size:17px}
.ss-body{display:flex;flex-direction:column;min-width:0;gap:2px}
.ss-title{font-family:'DM Sans',sans-serif;font-weight:700;font-size:13px;color:var(--color-text-primary);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-sub{font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--color-text-muted)}
/* Flag-Pille für Top-Länder */
.ctry-flag{display:inline-block;margin-right:6px;font-size:1.05em;line-height:1;vertical-align:-1px}
/* Light-Theme Overrides */
html[data-theme="light"] .ss-tile{background:rgba(0,0,0,.015)}
html[data-theme="light"] .ss-tile:hover{background:rgba(0,0,0,.03)}
html[data-theme="light"] .ss-ic{background:rgba(168,132,42,.08)}
html[data-theme="light"] .kpi-card.is-warn{border-left-color:var(--warn)}
html[data-theme="light"] .kpi-card.is-bad{border-left-color:var(--bad)}
/* v59 — Benachrichtigungs-Toggles in Settings */
.ntf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.ntf-tog{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;
background:rgba(255,255,255,.025);border:1px solid var(--color-border);
border-radius:10px;cursor:pointer;transition:.18s var(--ease)}
.ntf-tog:hover{border-color:var(--color-border-hover);background:rgba(255,255,255,.04)}
.ntf-tog input{margin:3px 0 0;flex:0 0 auto;accent-color:var(--color-gold);transform:scale(1.05)}
.ntf-tog input:checked + span b{color:var(--color-gold)}
.ntf-tog span{display:flex;flex-direction:column;gap:2px}
.ntf-tog b{font-family:'DM Sans',sans-serif;font-weight:700;font-size:13px;color:var(--color-text-primary);line-height:1.2}
.ntf-tog small{font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--color-text-muted);line-height:1.3}
html[data-theme="light"] .ntf-tog{background:rgba(0,0,0,.02)}
html[data-theme="light"] .ntf-tog:hover{background:rgba(0,0,0,.035)}
/* v60 — API-Key Status-Pillen (Genre-Seite TMDB) */
.key-status{display:inline-flex;align-items:center;gap:6px;font-family:'DM Sans',sans-serif;
font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
padding:4px 10px;border-radius:999px}
.key-status.key-ok{background:rgba(95,208,160,.14);color:#9aecbf}
.key-status.key-bad{background:rgba(255,107,107,.13);color:#ffb0b0}
.key-status.key-off{background:rgba(255,255,255,.05);color:var(--color-text-muted)}
.key-pill{display:inline-block;font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:700;
letter-spacing:.03em;text-transform:none;padding:2px 8px;border-radius:999px;margin-left:8px;
background:rgba(255,255,255,.05);color:var(--color-text-muted);vertical-align:1px}
.key-pill.on{background:rgba(95,208,160,.13);color:#9aecbf}
.key-pill.bad{background:rgba(255,107,107,.12);color:#ffb0b0}
.key-pill.off{background:rgba(255,255,255,.04);color:var(--color-text-muted)}
html[data-theme="light"] .key-status.key-ok{background:rgba(58,167,87,.14);color:#256d35}
html[data-theme="light"] .key-status.key-bad{background:rgba(226,59,59,.12);color:#9c2929}
html[data-theme="light"] .key-pill.on{background:rgba(58,167,87,.13);color:#256d35}
html[data-theme="light"] .key-pill.bad{background:rgba(226,59,59,.12);color:#9c2929}
/* ============================================================ */
/* v61 — Live Autocomplete (Google-Suggest-Stil) */
/* ============================================================ */
.ac-pop{position:absolute;z-index:9999;
background:var(--color-card,#0f0f0f);border:1px solid var(--color-border);
border-radius:11px;padding:6px;max-height:340px;overflow:auto;
box-shadow:0 14px 36px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);
font-family:'DM Sans',sans-serif;min-width:240px}
.ac-pop[hidden]{display:none}
.ac-it{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:8px 11px;border-radius:7px;cursor:pointer;transition:background .12s}
.ac-it:hover,.ac-it.is-on{background:rgba(201,168,76,.13)}
.ac-it .ac-lbl{font-size:13.5px;color:var(--color-text-primary);font-weight:500;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.ac-it .ac-lbl b{color:var(--color-gold);font-weight:700}
.ac-it .ac-sub{font-size:11px;color:var(--color-text-muted);font-weight:500;
white-space:nowrap;flex-shrink:0;max-width:55%;overflow:hidden;text-overflow:ellipsis}
.ac-empty{padding:10px 12px;color:var(--color-text-muted);font-size:12.5px;font-style:italic}
html[data-theme="light"] .ac-pop{background:#fff;border-color:var(--color-border);
box-shadow:0 12px 30px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.05)}
html[data-theme="light"] .ac-it:hover,
html[data-theme="light"] .ac-it.is-on{background:rgba(168,132,42,.12)}
html[data-theme="light"] .ac-it .ac-lbl b{color:var(--color-gold)}
/* v62 — Kompakte API-Key-Liste (read-only Ansicht) */
.keys-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.keys-list li{display:flex;align-items:center;gap:12px;padding:9px 13px;
background:rgba(255,255,255,.025);border:1px solid var(--color-border);border-radius:9px;
font-family:'DM Sans',sans-serif;font-size:13px}
.keys-list .kl-name{font-weight:600;color:var(--color-text-primary);flex:0 0 auto;min-width:130px}
.keys-list .kl-val{color:var(--color-text-secondary);flex:1;min-width:0;font-size:12.5px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.keys-list .kl-flag{flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.05);color:var(--color-text-muted)}
.keys-list .kl-flag.on{background:rgba(95,208,160,.14);color:#9aecbf}
html[data-theme="light"] .keys-list li{background:rgba(0,0,0,.02)}
html[data-theme="light"] .keys-list .kl-flag.on{background:rgba(58,167,87,.14);color:#256d35}
/* v63 — Country-Code Pille auf Country-Special Cards */
.genre-card .gc-flag{display:inline-block;margin-left:auto;font-family:'DM Sans',sans-serif;font-size:9.5px;
font-weight:700;letter-spacing:.06em;color:var(--color-text-muted);
background:rgba(255,255,255,.05);padding:2px 6px;border-radius:6px;line-height:1}
html[data-theme="light"] .genre-card .gc-flag{background:rgba(0,0,0,.04)}
/* ============================================================ */
/* v64 — Pastell-Hintergründe pro Land + Spezial-Genres */
/* + Haken nur sichtbar wenn Card aktiv (.on) */
/* ============================================================ */
/* Haken ist im inaktiven Zustand UNSICHTBAR.
.on (vom JS gesetzt sobald input:checked) zeigt den Haken in Gold. */
.genre-card:not(.on) .gc-check{color:transparent}
.genre-card.on .gc-check{color:#0a0a0b}
/* Spezial-Genres bekommen einen einheitlichen Pastell-Hintergrund (Pflaume/Violett).
Greift überall wo das Grid mit kind="special" gerendert wird (Bollywood, Anime, …). */
.genre-grid[data-kind="special"] .genre-card:not(.on){
background:hsla(290,55%,62%,.13);
border-color:hsla(290,55%,62%,.40);
}
.genre-grid[data-kind="special"] .genre-card:not(.on):hover{
background:hsla(290,55%,62%,.20);
border-color:hsla(290,55%,62%,.60);
}
/* Country-Specials: pro Land eigener Pastell-Ton. Aktiviert sobald
die Karte (in irgendeinem Grid) data-country="XX" trägt.
Aktive (.on) Karten überschreiben das mit Gold — bleibt einheitlich. */
.genre-card[data-country]:not(.on){border-color:hsla(0,0%,80%,.30)}
.genre-card[data-country]:not(.on):hover{filter:brightness(1.08)}
/* Helper-Macro: bg + border in passenden Pastell-Tönen pro Country-Code */
.genre-card[data-country="TR"]:not(.on){background:hsla(180,55%,52%,.20);border-color:hsla(180,55%,52%,.45)}
.genre-card[data-country="DE"]:not(.on){background:hsla(48,75%,55%,.22);border-color:hsla(48,75%,55%,.50)}
.genre-card[data-country="AT"]:not(.on){background:hsla(25,75%,62%,.22);border-color:hsla(25,75%,62%,.50)}
.genre-card[data-country="CH"]:not(.on){background:hsla(0,70%,65%,.18);border-color:hsla(0,70%,65%,.42)}
.genre-card[data-country="IT"]:not(.on){background:hsla(90,40%,52%,.22);border-color:hsla(90,40%,52%,.48)}
.genre-card[data-country="FR"]:not(.on){background:hsla(250,55%,68%,.20);border-color:hsla(250,55%,68%,.45)}
.genre-card[data-country="BE"]:not(.on){background:hsla(35,55%,60%,.22);border-color:hsla(35,55%,60%,.48)}
.genre-card[data-country="ES"]:not(.on){background:hsla(15,70%,58%,.22);border-color:hsla(15,70%,58%,.48)}
.genre-card[data-country="PT"]:not(.on){background:hsla(95,38%,48%,.22);border-color:hsla(95,38%,48%,.48)}
.genre-card[data-country="UK"]:not(.on){background:hsla(350,55%,55%,.18);border-color:hsla(350,55%,55%,.42)}
.genre-card[data-country="EN"]:not(.on){background:hsla(350,55%,55%,.18);border-color:hsla(350,55%,55%,.42)}
.genre-card[data-country="GB"]:not(.on){background:hsla(350,55%,55%,.18);border-color:hsla(350,55%,55%,.42)}
.genre-card[data-country="IE"]:not(.on){background:hsla(130,50%,52%,.20);border-color:hsla(130,50%,52%,.45)}
.genre-card[data-country="SE"]:not(.on){background:hsla(200,65%,62%,.22);border-color:hsla(200,65%,62%,.48)}
.genre-card[data-country="NO"]:not(.on){background:hsla(195,50%,50%,.22);border-color:hsla(195,50%,50%,.48)}
.genre-card[data-country="DK"]:not(.on){background:hsla(220,30%,60%,.22);border-color:hsla(220,30%,60%,.48)}
.genre-card[data-country="FI"]:not(.on){background:hsla(170,50%,60%,.22);border-color:hsla(170,50%,60%,.48)}
.genre-card[data-country="IS"]:not(.on){background:hsla(210,30%,72%,.22);border-color:hsla(210,30%,72%,.48)}
.genre-card[data-country="NORDIC"]:not(.on){background:hsla(200,55%,55%,.20);border-color:hsla(200,55%,55%,.45)}
.genre-card[data-country="PL"]:not(.on){background:hsla(340,60%,68%,.22);border-color:hsla(340,60%,68%,.48)}
.genre-card[data-country="CZ"]:not(.on){background:hsla(195,55%,68%,.22);border-color:hsla(195,55%,68%,.48)}
.genre-card[data-country="SK"]:not(.on){background:hsla(210,55%,68%,.22);border-color:hsla(210,55%,68%,.48)}
.genre-card[data-country="HU"]:not(.on){background:hsla(280,40%,55%,.22);border-color:hsla(280,40%,55%,.48)}
.genre-card[data-country="RO"]:not(.on){background:hsla(30,75%,62%,.22);border-color:hsla(30,75%,62%,.48)}
.genre-card[data-country="BG"]:not(.on){background:hsla(135,45%,52%,.22);border-color:hsla(135,45%,52%,.48)}
.genre-card[data-country="GR"]:not(.on){background:hsla(215,65%,60%,.22);border-color:hsla(215,65%,60%,.48)}
.genre-card[data-country="CY"]:not(.on){background:hsla(110,40%,55%,.22);border-color:hsla(110,40%,55%,.48)}
.genre-card[data-country="RU"]:not(.on){background:hsla(355,55%,55%,.18);border-color:hsla(355,55%,55%,.42)}
.genre-card[data-country="UA"]:not(.on){background:hsla(50,85%,60%,.22);border-color:hsla(50,85%,60%,.50)}
.genre-card[data-country="AL"]:not(.on){background:hsla(355,65%,52%,.18);border-color:hsla(355,65%,52%,.42)}
.genre-card[data-country="EXYU"]:not(.on){background:hsla(20,55%,52%,.22);border-color:hsla(20,55%,52%,.48)}
.genre-card[data-country="HR"]:not(.on){background:hsla(20,55%,52%,.22);border-color:hsla(20,55%,52%,.48)}
.genre-card[data-country="RS"]:not(.on){background:hsla(20,55%,52%,.22);border-color:hsla(20,55%,52%,.48)}
.genre-card[data-country="BA"]:not(.on){background:hsla(20,55%,52%,.22);border-color:hsla(20,55%,52%,.48)}
.genre-card[data-country="SI"]:not(.on){background:hsla(20,55%,52%,.22);border-color:hsla(20,55%,52%,.48)}
.genre-card[data-country="MK"]:not(.on){background:hsla(20,55%,52%,.22);border-color:hsla(20,55%,52%,.48)}
.genre-card[data-country="ME"]:not(.on){background:hsla(20,55%,52%,.22);border-color:hsla(20,55%,52%,.48)}
.genre-card[data-country="AR"]:not(.on){background:hsla(35,55%,58%,.22);border-color:hsla(35,55%,58%,.48)}
.genre-card[data-country="EG"]:not(.on){background:hsla(38,60%,55%,.22);border-color:hsla(38,60%,55%,.48)}
.genre-card[data-country="MA"]:not(.on){background:hsla(45,75%,55%,.22);border-color:hsla(45,75%,55%,.48)}
.genre-card[data-country="DZ"]:not(.on){background:hsla(80,40%,52%,.22);border-color:hsla(80,40%,52%,.48)}
.genre-card[data-country="TN"]:not(.on){background:hsla(40,55%,58%,.22);border-color:hsla(40,55%,58%,.48)}
.genre-card[data-country="IL"]:not(.on){background:hsla(200,65%,65%,.22);border-color:hsla(200,65%,65%,.48)}
.genre-card[data-country="IR"]:not(.on){background:hsla(175,50%,48%,.22);border-color:hsla(175,50%,48%,.48)}
.genre-card[data-country="KU"]:not(.on){background:hsla(355,65%,52%,.20);border-color:hsla(355,65%,52%,.45)}
.genre-card[data-country="IN"]:not(.on){background:hsla(35,80%,55%,.22);border-color:hsla(35,80%,55%,.50)}
.genre-card[data-country="PK"]:not(.on){background:hsla(145,55%,45%,.22);border-color:hsla(145,55%,45%,.48)}
.genre-card[data-country="AF"]:not(.on){background:hsla(25,70%,52%,.20);border-color:hsla(25,70%,52%,.45)}
.genre-card[data-country="KR"]:not(.on){background:hsla(335,65%,68%,.22);border-color:hsla(335,65%,68%,.48)}
.genre-card[data-country="JP"]:not(.on){background:hsla(340,75%,72%,.22);border-color:hsla(340,75%,72%,.48)}
.genre-card[data-country="CN"]:not(.on){background:hsla(5,65%,55%,.20);border-color:hsla(5,65%,55%,.45)}
.genre-card[data-country="HK"]:not(.on){background:hsla(50,80%,55%,.22);border-color:hsla(50,80%,55%,.50)}
.genre-card[data-country="TH"]:not(.on){background:hsla(270,50%,65%,.22);border-color:hsla(270,50%,65%,.48)}
.genre-card[data-country="VN"]:not(.on){background:hsla(100,45%,48%,.22);border-color:hsla(100,45%,48%,.48)}
.genre-card[data-country="PH"]:not(.on){background:hsla(12,75%,60%,.22);border-color:hsla(12,75%,60%,.50)}
.genre-card[data-country="ASIA"]:not(.on){background:hsla(340,55%,65%,.20);border-color:hsla(340,55%,65%,.45)}
/* Lateinamerika — Brasilien = HELL-PINK wie gewünscht */
.genre-card[data-country="BR"]:not(.on){background:hsla(320,85%,72%,.25);border-color:hsla(320,85%,72%,.55)}
.genre-card[data-country="MX"]:not(.on){background:hsla(20,75%,62%,.22);border-color:hsla(20,75%,62%,.48)}
.genre-card[data-country="CR"]:not(.on){background:hsla(150,50%,55%,.22);border-color:hsla(150,50%,55%,.48)}
.genre-card[data-country="CO"]:not(.on){background:hsla(50,80%,55%,.22);border-color:hsla(50,80%,55%,.50)}
.genre-card[data-country="LA"]:not(.on){background:hsla(305,60%,65%,.22);border-color:hsla(305,60%,65%,.48)}
.genre-card[data-country="LATINO"]:not(.on){background:hsla(305,60%,65%,.22);border-color:hsla(305,60%,65%,.48)}
/* Ozeanien + Afrika */
.genre-card[data-country="AU"]:not(.on){background:hsla(25,55%,55%,.22);border-color:hsla(25,55%,55%,.48)}
.genre-card[data-country="NZ"]:not(.on){background:hsla(155,50%,52%,.22);border-color:hsla(155,50%,52%,.48)}
.genre-card[data-country="ZA"]:not(.on){background:hsla(65,55%,52%,.22);border-color:hsla(65,55%,52%,.48)}
.genre-card[data-country="AFR"]:not(.on){background:hsla(130,40%,45%,.22);border-color:hsla(130,40%,45%,.48)}
.genre-card[data-country="SO"]:not(.on){background:hsla(5,70%,58%,.20);border-color:hsla(5,70%,58%,.45)}
/* Light-Theme: gleicher Hue, höhere Sättigung weil heller Untergrund */
html[data-theme="light"] .genre-grid[data-kind="special"] .genre-card:not(.on){
background:hsla(290,60%,55%,.10);border-color:hsla(290,60%,55%,.35)
}
html[data-theme="light"] .genre-card[data-country]:not(.on){
filter:brightness(0.97) saturate(1.05)
}
/* ============================================================ */
/* v65 — „Normaler" Karten-Look in Gold-Pastell */
/* Greift bei: normale Genres, Elite Streaming, Standard- */
/* Schauspieler. NICHT bei Country (haben data-country) */
/* oder Spezial-Genres (haben data-kind="special"). */
/* ============================================================ */
.genre-card:not(.on):not([data-country]){
background:hsla(36,75%,60%,.12);
border-color:hsla(36,75%,60%,.30);
}
.genre-card:not(.on):not([data-country]):hover{
background:hsla(36,75%,60%,.18);
border-color:hsla(36,75%,60%,.50);
}
/* Light-Theme: gleicher Hue, etwas anderer Sättigungs/Helligkeit */
html[data-theme="light"] .genre-card:not(.on):not([data-country]){
background:hsla(36,75%,55%,.11);
border-color:hsla(36,75%,55%,.32);
}
html[data-theme="light"] .genre-card:not(.on):not([data-country]):hover{
background:hsla(36,75%,55%,.16);
border-color:hsla(36,75%,55%,.45);
}
/* ============================================================ */
/* v66 — Light-Mode Lesbarkeit + Mobile-Polish */
/* ============================================================ */
/* (1) Alert-Texte im Light-Theme: dunkle warme/rote Schrift statt Pastell */
html[data-theme="light"] .adm-alert.warn{
background:rgba(232,184,115,.18);
border-color:rgba(168,132,42,.35);
color:#6e4d10;
}
html[data-theme="light"] .adm-alert.warn strong{color:#5a3f08}
html[data-theme="light"] .adm-alert.bad{
background:rgba(255,107,107,.14);
border-color:rgba(204,40,40,.35);
color:#8a1818;
}
html[data-theme="light"] .adm-alert.bad strong{color:#700c0c}
html[data-theme="light"] .adm-alert.info{
background:rgba(58,121,214,.10);
border-color:rgba(40,90,180,.30);
color:#1d3f78;
}
html[data-theme="light"] .adm-alert.info strong{color:#142d56}
/* Gleiches für die generischen alert-* Klassen falls genutzt */
html[data-theme="light"] .alert.alert-bad,
html[data-theme="light"] .alert-bad{color:#8a1818}
html[data-theme="light"] .alert.alert-ok,
html[data-theme="light"] .alert-ok{color:#1f5e34}
/* (2) Hamburger im Light-Theme: dunkles Icon (statt #fff = unsichtbar) */
html[data-theme="light"] .burger{color:var(--color-text-primary)}
.burger:hover{color:var(--color-gold)}
/* (3) Premium-Qualität Bullets: auf Mobile besser umbrechen */
@media(max-width:600px){
.frow-text h2{font-size:1.85rem;line-height:1.18;margin:8px 0 14px}
.frow-text p{font-size:.98rem;line-height:1.65}
.bullets{margin-top:18px;gap:11px}
.bullets li{font-size:.94rem;line-height:1.5}
.bullets li::before{width:5px;height:5px;margin-top:.5em}
.bullets li strong{display:inline} /* nichts erzwingen — flowt natürlich */
.frow{gap:30px !important}
.frow-vis{min-height:240px}
.poster-3x3{gap:6px}
}
@media(max-width:420px){
.frow-text h2{font-size:1.6rem}
.bullets li{font-size:.9rem}
}
/* (4) Footer auf Smartphone kompakt */
@media(max-width:600px){
.footer{padding:36px 0 22px !important}
.footer .container{padding-left:18px;padding-right:18px}
.footer .cols{grid-template-columns:1fr 1fr !important;gap:24px 18px;margin-bottom:22px}
.footer h4{font-size:10.5px;margin:0 0 10px;letter-spacing:.14em}
.footer a{margin-bottom:6px;font-size:12.5px}
.footer p{font-size:12.5px;line-height:1.55;max-width:none !important}
.footer-cta{flex-direction:row !important;flex-wrap:wrap;gap:10px;margin-top:10px}
.footer-cta a{font-size:.85rem}
.footer-bottom-bar{flex-direction:column;align-items:flex-start;gap:6px;padding-top:18px;font-size:11.5px;text-align:left}
.footer-bottom-bar .ftr-usdt{font-size:11px}
}
@media(max-width:380px){
/* Auf sehr schmalen Geräten: 1 Spalte ohne dass Text gequetscht wird */
.footer .cols{grid-template-columns:1fr !important;gap:18px}
.footer p{max-width:100% !important}
}
/* (5) Allgemeines Mobile-Polish */
@media(max-width:600px){
/* Container Padding vergrößern damit Inhalt nicht am Rand klebt */
.container{padding-left:16px;padding-right:16px}
/* Buttons: nicht zu groß */
.btn{font-size:.92rem}
.btn-primary,.btn-ghost{padding:10px 16px}
/* Hero kleiner */
.hero{min-height:auto;padding:64px 0 46px}
/* Section-Headings besser proportioniert */
.shead h2{font-size:1.8rem;line-height:1.18}
.shead p{font-size:.96rem}
/* Code/Mono nicht zu groß im Wrap */
.mono{font-size:.85em;word-break:break-all}
/* Tabellen die nicht ins Layout passen: horizontal scrollen */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Stat-Karten kompakter */
.stat-card{padding:22px 18px}
/* KPI-Karten im Dashboard kompakter */
.kpi-card{padding:14px 14px}
.kpi-card .kpi-val{font-size:1.5rem}
/* Admin Hero kompakter */
.adm-hero{padding:18px 18px;flex-wrap:wrap}
.adm-hero h1{font-size:1.4rem}
.adm-hero .ah-time{font-size:.78rem}
/* GPanel Padding reduzieren */
.gpanel{padding:16px 14px}
}
/* (6) iPhone Notch / safe-area */
.nav{padding-top:env(safe-area-inset-top)}
.footer{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
@media(max-width:600px){
.footer{padding-bottom:calc(22px + env(safe-area-inset-bottom)) !important}
}
/* ============================================================ */
/* v67 — Schauspieler-Avatar (rundes Foto links in der Card) */
/* ============================================================ */
.genre-card .gc-photo{
width:34px;height:34px;border-radius:50%;flex:none;
object-fit:cover;display:inline-block;
background:rgba(255,255,255,.06);
border:1.5px solid rgba(232,184,115,.25);
font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:700;
color:var(--color-text-secondary);
text-align:center;line-height:31px;
margin-right:2px;
}
/* Fallback-Initial (kein TMDB-Foto): Gradient-Background statt leerer Kreis */
.genre-card .gc-photo-fallback{
background:linear-gradient(135deg,rgba(232,184,115,.18),rgba(232,184,115,.04));
color:var(--color-gold);
}
/* Active state: leuchtender Rand */
.genre-card.on .gc-photo{border-color:var(--color-gold)}
/* Grids mit Avatar-Cards: etwas mehr horizontale Mindestbreite damit Foto + Text passt */
.genre-grid.has-avatars{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
/* Mobile: kleineres Foto + kompakter */
@media(max-width:600px){
.genre-card .gc-photo{width:28px;height:28px;line-height:25px;font-size:.85rem}
.genre-grid.has-avatars{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
}
@media(max-width:420px){
.genre-card .gc-photo{width:24px;height:24px;line-height:21px;font-size:.78rem}
}
/* Light-Theme: dezenter Border */
html[data-theme="light"] .genre-card .gc-photo{
background:rgba(0,0,0,.04);
border-color:rgba(168,132,42,.30);
}
html[data-theme="light"] .genre-card .gc-photo-fallback{
background:linear-gradient(135deg,rgba(168,132,42,.22),rgba(168,132,42,.06));
}
/* ============================================================ */
/* v68 — Konsistente Responsive-Ebene */
/* Klare Breakpoints für Phone/Phablet/Tablet/Laptop */
/* ============================================================ */
/* ============ TABLET PORTRAIT (768px–1023px) ============ */
@media (min-width: 768px) and (max-width: 1023px) {
/* Container nutzt mehr Platz */
.container{padding-left:24px;padding-right:24px}
/* Genre-Grid: 2-3 Spalten je nach Verfügbarkeit */
.genre-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:9px}
.genre-grid.has-avatars{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.genre-card{padding:11px 13px;font-size:.93rem}
.genre-card .gc-photo{width:36px;height:36px;line-height:33px}
/* KPI-Strip: 2 Spalten (4 wären zu eng) */
.kpi-grid{grid-template-columns:repeat(2,1fr);gap:14px}
.kpi-card{padding:18px 18px}
.kpi-card .kpi-val{font-size:2rem}
/* Status-Strip: 2 Spalten */
.status-strip{grid-template-columns:repeat(2,1fr);gap:12px}
/* GPanel-Grid: einspaltig statt 2×2 */
.gpanel-grid{grid-template-columns:1fr;gap:14px}
.gpanel{padding:18px 20px}
/* Admin Side: schmaler */
.side.side{width:180px;padding:16px 10px}
.side.side .logo{margin:0 4px 14px;font-size:.95rem}
.main{padding:18px 22px}
/* Hero/Section angemessen */
.hero{min-height:65vh;padding:80px 0 56px}
.hero h1{font-size:clamp(2rem,4.5vw,3rem)}
.frow{gap:42px}
/* Footer: 4 Spalten halten aber kompakter */
.footer .cols{grid-template-columns:1.4fr 1fr 1fr 1fr !important;gap:24px}
/* Tabellen bekommen Touch-Scroll */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* User-Cards: head klar getrennt */
.user-card.collapsible .uc-head.uc-toggle{flex-wrap:wrap;padding:14px 18px}
.user-card.collapsible .uc-head-right{margin-left:auto}
}
/* ============ TABLET LANDSCAPE / SMALL LAPTOP (1024px–1279px) ============ */
@media (min-width: 1024px) and (max-width: 1279px) {
.container{padding-left:28px;padding-right:28px}
.genre-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.genre-grid.has-avatars{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.kpi-grid{grid-template-columns:repeat(2,1fr)}
.status-strip{grid-template-columns:repeat(4,1fr)}
.gpanel-grid{grid-template-columns:1fr 1fr}
}
/* ============ MOBILE LANDSCAPE / PHABLET (480px–767px) ============ */
@media (min-width: 480px) and (max-width: 767px) {
.genre-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}
.genre-grid.has-avatars{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.status-strip{grid-template-columns:repeat(2,1fr);gap:8px}
.gpanel-grid{grid-template-columns:1fr;gap:12px}
/* Admin Side wird zu Toggle, oder verbleibt sichtbar je nach Markup */
.main{padding:16px 14px}
/* Footer 2-spaltig */
.footer .cols{grid-template-columns:1fr 1fr !important;gap:20px 16px}
}
/* ============ SMALL PHONE (320px–479px) ============ */
@media (max-width: 479px) {
.container{padding-left:14px;padding-right:14px}
/* Genre-Cards: 1-2 Spalten, kompakter */
.genre-grid{grid-template-columns:repeat(2,1fr);gap:6px}
.genre-grid.has-avatars{grid-template-columns:1fr} /* mit Avatar: 1 Spalte breit damit Bild+Name passt */
.genre-card{padding:9px 11px;font-size:.86rem;gap:8px}
.genre-card .gc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* KPI: 2 Spalten kompakt */
.kpi-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.kpi-card{padding:12px 12px}
.kpi-card .kpi-val{font-size:1.4rem}
.kpi-card .kpi-lbl{font-size:10px}
.kpi-card .kpi-sub{font-size:11px}
/* Status-Strip 1 Spalte */
.status-strip{grid-template-columns:1fr;gap:8px}
.ss-tile{padding:10px 12px}
/* GPanel kompakt */
.gpanel{padding:14px 12px}
.gpanel h3{font-size:1rem}
/* Admin Hero: smaller */
.adm-hero{padding:14px 14px}
.adm-hero h1{font-size:1.25rem}
.adm-hero .ah-sub{font-size:.78rem}
.adm-hero .ah-time{font-size:.72rem}
/* User-Cards stack besser */
.user-card.collapsible .uc-head.uc-toggle{flex-direction:column;align-items:flex-start;gap:6px;padding:11px 12px}
.user-card.collapsible .uc-head-right{margin-left:0;font-size:11px;gap:8px}
.user-card.collapsible .uc-name{flex-wrap:wrap;gap:6px}
/* Trial-Form Country-Flags */
.flag-grid{grid-template-columns:repeat(2,1fr)!important}
}
/* ============ TOUCH-DEVICE OPTIMIERUNG ============ */
/* Anzeige-bezogen (hover hier nicht zuverlässig auf Touch) */
@media (hover: none) and (pointer: coarse) {
/* Mindest-Touch-Target 44×44px (Apple/Android Empfehlung) */
.btn,.btn-sm,.btn-ghost,.btn-primary,
.menu-item,.icon-btn,.menu-btn,
.acc-tab,.tab,.qa-tile,
.nav a,.side a{min-height:44px}
.btn,.btn-primary,.btn-ghost{padding-top:12px;padding-bottom:12px}
.icon-btn,.menu-btn{min-width:44px}
/* Genre-Cards leichter zu treffen */
.genre-card{min-height:48px;padding:11px 13px}
/* Hover-Effekte deaktivieren (sonst hängt der Hover-State auf Touch) */
.genre-card:hover,.btn:hover,.qa-tile:hover{transform:none}
/* Disable Genre-Card scale auf hover (kein Touch-feedback nötig) */
.stat-card:hover{transform:none}
}
/* ============ LARGE SCREENS (1600px+) ============ */
@media (min-width: 1600px) {
.container{max-width:1440px}
.genre-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.genre-grid.has-avatars{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.main{padding:24px 32px}
}
/* ============ Avatar-Card Mobile Anpassung ============ */
/* Wenn die Card durch Avatar zu hoch wird auf small phones, kompakt halten */
@media (max-width: 479px) {
.genre-card.has-avatar{align-items:center;min-height:44px}
.genre-card.has-avatar .gc-photo{width:28px;height:28px;line-height:25px}
.genre-card.has-avatar .gc-name{font-size:.86rem}
}
/* ============ PRINT (optional, sauber) ============ */
@media print {
.nav,.footer,.side,.menu-pop,.theme-toggle,.burger{display:none !important}
.main{padding:0}
*{color:#000 !important;background:none !important;box-shadow:none !important}
}
/* ============ Accessibility: reduced-motion ============ */
@media (prefers-reduced-motion: reduce) {
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}
/* ============ Quality-Polishes ============ */
/* Anti-Tap-Highlight auf iOS für Buttons (kein blauer Flash) */
.btn,.menu-item,.icon-btn,.genre-card,.qa-tile,.nav a,.side a{
-webkit-tap-highlight-color:transparent;
}
/* Smooth Bilder Loading (kein Layout-Shift) */
img.gc-photo{display:block;background-color:rgba(255,255,255,.04)}
/* User-Card Aktions-Menü auf Mobile auch tappable */
@media (max-width: 600px) {
.menu-pop{position:fixed !important;top:50% !important;left:50% !important;
transform:translate(-50%,-50%);max-width:90vw;max-height:80vh;overflow:auto;
box-shadow:0 25px 60px rgba(0,0,0,.6);border-radius:14px}
.menu-pop::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:-1}
}
/* ============================================================ */
/* v69 — Grids respektieren IMMER Container-Breite */
/* Cards bleiben in der Box, keine Overflows mehr */
/* ============================================================ */
/* WICHTIG: grid-template-columns mit min(100%, Xpx) — so collapsen
die Spalten automatisch wenn Viewport schmaler als min-width.
Vorher: minmax(180px, 1fr) → bei viewport < 180px überschreibt es Container! */
/* Defensiv: alle Grids und ihre Kinder respektieren Container */
.genre-grid,
.flag-grid,
.kpi-grid,
.status-strip,
.qa-grid,
.gpanel-grid,
.acc-cards{
width:100%;
box-sizing:border-box;
}
/* Genre-Grid Default: nie über Container hinaus */
.genre-grid{
grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr)) !important;
gap:8px;
}
.genre-grid.has-avatars{
grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)) !important;
}
/* Cards: flex-shrink für Text, gc-name trunciert */
.genre-card{
box-sizing:border-box;
min-width:0; /* erlaubt schrumpfen */
overflow:hidden; /* clipt überlappenden Content */
}
.genre-card .gc-name{
flex:1 1 auto;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.genre-card .gc-flag{
flex:none;
white-space:nowrap;
}
/* Details: weniger laterale Margin damit Cards mehr Platz haben.
Auf Mobile: keine seitliche Margin im details. */
details.gpick>.fg-toolbar,
details.gpick>.genre-grid,
details.gpick>p{margin-left:0;margin-right:0}
details.gpick>.genre-grid{margin-bottom:16px}
/* fg-toolbar fließt mit der Card-Reihe ohne Margin */
.fg-toolbar{padding:0 0 8px}
/* Panel padding reduziert auf schmalen Bildschirmen — viel mehr Platz für Cards */
@media (max-width:768px){
.panel{padding:18px 14px}
details.gpick>.fg-toolbar,
details.gpick>.genre-grid,
details.gpick>p{margin-left:0;margin-right:0}
}
@media (max-width:480px){
.panel{padding:14px 10px}
.container{padding-left:12px;padding-right:12px}
}
/* Genre-Grid: auf wirklich kleinen Screens 2 Spalten ohne Min-Width */
@media (max-width:600px){
.genre-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:6px;
}
.genre-grid.has-avatars{
grid-template-columns:repeat(1,minmax(0,1fr)) !important;
gap:6px;
}
.genre-card{padding:8px 10px;font-size:.86rem;min-height:42px}
.genre-card .gc-check{width:18px;height:18px;font-size:.72rem}
.genre-card .gc-photo{width:30px;height:30px;line-height:27px;font-size:.84rem}
.genre-card .gc-flag{font-size:9px;padding:1px 5px}
}
/* Tablet: 3 Spalten Standard (oder mehr), kein Overflow */
@media (min-width:601px) and (max-width:1023px){
.genre-grid{
grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr)) !important;
gap:8px;
}
.genre-grid.has-avatars{
grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)) !important;
}
}
/* Buttons in der fg-toolbar: kompakter auf schmalen Screens damit nicht overflows */
@media (max-width:480px){
.fg-toolbar{flex-wrap:wrap;gap:6px}
.fg-toolbar .btn{padding:6px 10px;font-size:.78rem;min-height:34px}
.gg-counter{font-size:.78rem}
}
/* Inputs und Forms innerhalb der Cards (z.B. menu-form) ebenfalls beachten */
.menu-form{box-sizing:border-box;width:100%;max-width:100%}
.menu-form input,.menu-form select{box-sizing:border-box;width:100%;max-width:100%}
/* User-Cards: bleiben in der Box */
.user-card.collapsible{box-sizing:border-box;max-width:100%;overflow:hidden}
.user-card.collapsible .uc-head.uc-toggle{box-sizing:border-box;max-width:100%}
.user-card.collapsible .uc-name{min-width:0;flex:1 1 auto}
/* Flag-Grid (Land-Auswahl): auch responsive */
.flag-grid{
grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr));
gap:8px;
}
@media (max-width:600px){
.flag-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
}
@media (max-width:380px){
.flag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* QA-Grid (Quick-Actions): bleibt in box */
.qa-grid{
grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
}
/* Footer .cols auch konsistent */
.footer .cols{box-sizing:border-box;width:100%;max-width:100%}
/* Container: niemals horizontal überlappen */
.container{box-sizing:border-box;max-width:100%}
/* Body/HTML: kein horizontal-scroll */
html,body{overflow-x:hidden;max-width:100vw}
/* Section: Padding klein auf Mobile */
@media (max-width:600px){
.section{padding:30px 0}
.section[style*="max-width:980px"]{max-width:100% !important}
}
/* Inline max-width:980px auf mobile overriden — sonst zu schmal-rigid */
@media (max-width:1023px){
.container[style*="max-width:980"]{max-width:100% !important}
}
/* ============================================================
v70 — Language Switcher (Desktop Dropdown + Mobile Flag Grid)
============================================================ */
/* --- Desktop: Button mit Flagge + Code, klick öffnet Menü --- */
.lang-switcher{position:relative;flex-shrink:0}
.lang-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--color-border-hover);
color:var(--color-text-secondary);height:34px;padding:0 9px;border-radius:999px;cursor:pointer;
transition:.22s var(--ease);font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em}
.lang-btn:hover,.lang-switcher.is-open .lang-btn{color:var(--color-gold);border-color:var(--color-gold);background:rgba(201,168,76,.08)}
.lang-flag-img{width:18px;height:13px;display:block;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.lang-code{font-size:11px;line-height:1}
.lang-caret{opacity:.7;transition:transform .22s var(--ease)}
.lang-switcher.is-open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;
background:var(--color-surface-1, #161616);border:1px solid var(--color-border-hover);
border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.45);padding:6px;
display:none;flex-direction:column;gap:1px;z-index:60}
.lang-switcher.is-open .lang-menu{display:flex}
html[data-theme="light"] .lang-menu{background:#fff;box-shadow:0 12px 36px rgba(0,0,0,.12)}
.lang-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
color:var(--color-text-secondary);text-decoration:none;font-size:13.5px;font-weight:500;
transition:.18s var(--ease)}
.lang-item img{width:20px;height:15px;border-radius:2px;object-fit:cover;flex-shrink:0;
box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.lang-item:hover{background:rgba(201,168,76,.10);color:var(--color-text-primary)}
.lang-item.is-active{background:rgba(201,168,76,.13);color:var(--color-gold);font-weight:600}
/* --- Mobile: im Burger-Menü als Grid sichtbar (m-only) --- */
.lang-mobile{display:none;padding:14px 4px 4px;margin-top:6px;border-top:1px solid var(--color-border-hover)}
.lang-mobile-label{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--color-text-muted, var(--color-text-secondary));margin-bottom:9px}
.lang-mobile-flags{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.lang-flag{display:inline-grid;place-items:center;padding:6px;border-radius:8px;
border:1px solid transparent;transition:.18s var(--ease);text-decoration:none}
.lang-flag img{width:30px;height:22px;border-radius:3px;display:block;object-fit:cover;
box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.lang-flag:hover{border-color:var(--color-border-hover);background:rgba(201,168,76,.06)}
.lang-flag.is-active{border-color:var(--color-gold);background:rgba(201,168,76,.13)}
/* Mobile: Desktop-Switcher ausblenden, Mobile-Flag-Grid einblenden. */
@media (max-width:768px){
.lang-switcher{display:none}
.lang-mobile{display:block}
}
/* Klein-Phone: Sprach-Button kompakter machen, Code ausblenden */
@media (max-width:380px){
.lang-btn{padding:0 7px;gap:4px}
.lang-code{display:none}
}
/* ============================================================
v70b — Sidebar Lang-Switcher (compact, full-width)
============================================================ */
.side-lang{margin:8px 0}
.side-lang .lang-switcher{position:relative;display:block}
.side-lang .lang-btn{width:100%;justify-content:flex-start;height:36px;padding:0 11px;gap:8px}
.side-lang .lang-code{margin-left:auto;opacity:.7}
/* Menü öffnet nach oben statt nach unten — Sidebar ist scrollbar,
Dropdown nach unten würde nach unten hin abgeschnitten werden. */
/* Sidebar-Sprachmenü: öffnet als ZENTRIERTES Fenster in der Bildschirmmitte (position:fixed),
damit es nie von der scrollbaren Sidebar abgeschnitten wird — alle Sprachen immer sichtbar.
Der riesige box-shadow-Spread dunkelt den Rest ab (Backdrop); Klick daneben schließt. */
.side-lang .lang-switcher.is-open .lang-menu{
position:fixed;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);
width:min(360px,92vw);max-height:82vh;overflow:auto;
display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px;z-index:9999;
box-shadow:0 0 0 100vmax rgba(0,0,0,.55),0 30px 80px -20px rgba(0,0,0,.7)}
.side-lang .lang-item{padding:9px 11px;font-size:13px;gap:9px;border-radius:9px;min-width:0}
.side-lang .lang-item img{width:20px;height:15px}
.side-lang .lang-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media(max-width:420px){ .side-lang .lang-switcher.is-open .lang-menu{grid-template-columns:1fr} }
/* ============ FOOTER MOBIL — aufgeräumt 2-spaltig (v74) ============
Konsolidiert die widersprüchlichen Alt-Breakpoints. Am Datei-Ende →
gewinnt im Cascade. Marke + Tagline + CTAs oben über volle Breite,
darunter die Link-Spalten sauber 2-spaltig. */
@media(max-width:760px){
.footer .cols{grid-template-columns:1fr 1fr !important;gap:24px 20px !important;margin-bottom:26px}
.footer .cols > div:first-child{grid-column:1 / -1 !important}
/* Tagline auf dem Handy ausblenden — wirkt sonst überladen */
.footer .cols > div:first-child p{display:none !important}
.footer-cta{flex-direction:row !important;flex-wrap:wrap;gap:16px;margin-top:0}
.footer-bottom-bar{flex-direction:column;align-items:flex-start;gap:6px}
}
@media(max-width:340px){
.footer .cols{grid-template-columns:1fr !important}
}
/* ============ FOOTER-LOGO: Play-Quadrat entfernt (v77) ============
Das goldene Play-Icon wirkte im Footer wie ein drückbarer Player-Button.
Im Footer nur noch der Schriftzug HOTPLAY.tv — das Icon wird ausgeblendet. */
.footer .logo-mark{display:none !important}
.footer .logo{font-size:1.2rem;align-items:center;gap:0}
/* ============ Geräte-Karten = Download-Links (v78) ============ */
.dev-prem-link{text-decoration:none;color:inherit;cursor:pointer}
.dev-prem-link .dp-dl{position:absolute;top:9px;right:11px;opacity:.3;color:var(--color-gold);font-size:15px;line-height:1;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.dev-prem-link:hover .dp-dl{opacity:1;transform:translateY(1px)}
/* ============ Eingeloggte Bereiche: Sidebar als Hamburger-Drawer (v79) ============
Statt der unruhigen Pillen-Leiste auf Mobile → echter Off-Canvas-Hamburger.
Topbar mit Burger + Logo, Sidebar schiebt von links rein, Backdrop dahinter. */
.side-topbar{display:none}
.side-backdrop{display:none}
@media(max-width:1000px){
.admin{display:block !important}
.side-topbar{display:flex !important;align-items:center;gap:12px;position:sticky;top:0;z-index:50;
background:var(--bg2);border-bottom:1px solid var(--line);padding:10px 14px}
.side-burger{background:none;border:0;color:var(--color-text-primary,#fff);font-size:1.7rem;line-height:1;cursor:pointer;padding:0 6px}
.side-topbar .logo{font-size:1.1rem}
/* Sidebar = Off-Canvas-Drawer */
.side.side{position:fixed !important;top:0;left:0;bottom:0;width:82%;max-width:300px;height:100dvh;z-index:60;
transform:translateX(-100%);transition:transform .28s var(--ease,ease);display:block !important;
flex-wrap:nowrap;gap:0;overflow:auto;padding:18px 14px;border-right:1px solid var(--line)}
.side.side.open{transform:translateX(0)}
.side .logo{display:none} /* Logo steckt schon in der Topbar */
.side .sep,.side .grp{display:block !important}
.side a{padding:12px 14px !important;border-radius:11px !important;white-space:normal !important;
font-size:14px !important;margin-bottom:4px !important;flex-shrink:1 !important}
.side-backdrop{display:none}
.side-backdrop.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
}
/* ===================== ULTRAADMIN UI-VEREINHEITLICHUNG (v80) =====================
Eine Design-Sprache für das gesamte Ultraadmin-Panel. Scoped auf .admin (Public
unberührt), nur Stil — keine Markup-Änderung → Formulare/JS bleiben intakt.
Hebt ältere Komponenten (panel/stat/main-head) auf den modernen Stil
(gpanel/kpi-card/adm-hero): gleicher Kopf, gleiche Karten, gleiche Kennzahlen. */
/* — Einheitlicher Seitenkopf (adm-hero == main-head): klare Titel-Linie — */
.admin .adm-hero,.admin .main-head{
background:none;border:0;border-bottom:1px solid var(--color-border);border-radius:0;
padding:0 0 16px;margin:0 0 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.admin .adm-hero h1,.admin .main-head h1,.admin .main-head h2{
font-family:'Fraunces','Playfair Display',serif;font-weight:700;
font-size:clamp(1.25rem,1.8vw,1.55rem);letter-spacing:-.01em;line-height:1.12;margin:0;
}
.admin .adm-hero .ah-sub{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--color-text-secondary);margin:5px 0 0}
/* — Einheitliche Karte (panel == gpanel) — */
.admin .panel{background:rgba(255,255,255,.025);border:1px solid var(--color-border);border-radius:14px;padding:18px 20px;margin-bottom:16px}
.admin .panel h3{font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:700;letter-spacing:-.005em;margin:0 0 14px;display:flex;align-items:center;gap:8px;color:var(--color-text-primary)}
.admin .panel h3 .ic{color:var(--color-gold)}
/* — Einheitliche Kennzahl-Kachel (stat == kpi-card) — */
.admin .stat{background:rgba(255,255,255,.025);border:1px solid var(--color-border);border-radius:14px;padding:16px 18px}
.admin .stat .k{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-secondary);font-weight:600}
.admin .stat .v{font-family:'Fraunces','Playfair Display',serif;font-size:clamp(1.4rem,2.2vw,1.75rem);font-weight:700;margin-top:5px;color:var(--color-text-primary);line-height:1.05}
/* — Chips konsistent (Gold, dezent) — */
.admin .count-chip{color:var(--color-gold);background:rgba(201,168,76,.12);border-radius:999px;padding:2px 9px;font-size:.72rem;font-weight:700}
/* — Dezenter, einheitlicher Hover/Übergang (ruhig, professionell) — */
.admin .gpanel,.admin .panel,.admin .stat,.admin .kpi-card{transition:border-color .2s ease,background .2s ease}
.admin a.gpanel:hover{border-color:var(--color-border-hover);background:rgba(201,168,76,.045)}
/* ===================== ULTRAADMIN VISUELLES REDESIGN (v81) =====================
Sichtbarer, einheitlicher, kompakter Look — scoped .admin, nur CSS. */
/* Arbeitsbereich etwas kompakter */
.admin .main{padding:28px 32px;max-width:1180px}
/* Sidebar: ruhiger, kompakter, klare Gold-Aktiv-Leiste statt Box */
.admin .side{background:#0b0b0c;border-right:1px solid var(--color-border);padding:18px 12px}
.admin .side a{position:relative;padding:9px 12px 9px 15px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--color-text-secondary);margin-bottom:2px;border:0 !important;background:none !important}
.admin .side a:hover{background:rgba(255,255,255,.045) !important;color:var(--color-text-primary)}
.admin .side a.active{background:rgba(201,168,76,.10) !important;color:var(--color-gold)}
.admin .side a.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--color-gold)}
.admin .side .grp{margin:18px 12px 6px;opacity:.65}
/* Seitenkopf: kompakt, klare Titel-Linie */
.admin .adm-hero,.admin .main-head{background:none;border:0;border-bottom:1px solid var(--color-border);border-radius:0;padding:0 0 14px;margin:0 0 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.admin .adm-hero h1,.admin .main-head h1,.admin .main-head h2{font-family:'Fraunces','Playfair Display',serif;font-weight:700;font-size:clamp(1.2rem,1.7vw,1.5rem);letter-spacing:-.01em;line-height:1.12;margin:0}
.admin .adm-hero .ah-sub{font-size:13px;color:var(--color-text-secondary);margin:5px 0 0}
/* Karten: ERHÖHT (heller als BG) + dezente Tiefe → klar abgesetzt, kompakt */
.admin .gpanel,.admin .panel{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:12px;padding:16px 18px;margin-bottom:14px;box-shadow:0 2px 10px rgba(0,0,0,.28)}
.admin .gpanel h3,.admin .panel h3{font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:700;letter-spacing:.01em;margin:0 0 13px;display:flex;align-items:center;gap:8px;color:var(--color-text-primary)}
.admin .gpanel h3 .ic,.admin .panel h3 .ic{color:var(--color-gold)}
/* KPI/Stat: erhöht + Gold-Hairline oben → klar als Kennzahl erkennbar */
.admin .kpi-card,.admin .stat{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.28);position:relative;overflow:hidden}
.admin .kpi-card::after,.admin .stat::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--color-gold),transparent)}
.admin .stat .k{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-secondary);font-weight:600}
.admin .stat .v{font-family:'Fraunces','Playfair Display',serif;font-size:clamp(1.4rem,2.2vw,1.7rem);font-weight:700;margin-top:5px;color:var(--color-text-primary);line-height:1.05}
/* Chips konsistent gold */
.admin .count-chip{color:var(--color-gold);background:rgba(201,168,76,.12);border-radius:999px;padding:2px 9px;font-size:.72rem;font-weight:700}
/* Klickbare Karten: sanfter Lift */
.admin a.gpanel{transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.admin a.gpanel:hover{transform:translateY(-2px);border-color:var(--color-border-hover);box-shadow:0 8px 22px rgba(0,0,0,.4)}
/* ===== ULTRAADMIN v82 — klar sichtbarer Akzent an Abschnitts-Titeln ===== */
.admin .panel h3,.admin .gpanel h3{padding-left:11px;border-left:3px solid var(--color-gold);line-height:1.1}
.admin .panel,.admin .gpanel{background:var(--color-bg-elevated) !important}