:root{
  --bg:#060b18; --bg2:#0a1124; --panel:#0f1830; --line:#1b2a47; --line2:#142038;
  --fg:#eaf0fa; --soft:#a9b9d0; --dim:#7487a3; --accent:#f5128c; --accent2:#7b2ff7; --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --grad:linear-gradient(135deg,#f5128c,#7b2ff7);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;} body{margin:0;}
body{font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--fg);line-height:1.6;background:var(--bg);overflow-x:hidden;
  background-image:radial-gradient(900px 520px at 85% -8%,rgba(123,47,247,.30),transparent 60%),radial-gradient(760px 480px at 0% 4%,rgba(245,18,140,.16),transparent 60%);
  background-repeat:no-repeat;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent);text-decoration:none;} a:hover{text-decoration:underline;}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px;} .narrow{max-width:780px;}
h1,h2,h3,h4{line-height:1.15;margin:0;font-weight:800;letter-spacing:-.01em;}
h1{font-size:clamp(34px,5.4vw,62px);} h2{font-size:clamp(26px,3.8vw,40px);} h3{font-size:20px;}
p{margin:0 0 1em;} .lead{font-size:clamp(17px,2vw,20px);color:var(--soft);max-width:600px;} .muted{color:var(--dim);} .soft{color:var(--soft);}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
section{padding:78px 0;} @media(max-width:700px){section{padding:54px 0;}}

/* Navigation */
header.nav{position:sticky;top:0;z-index:50;background:rgba(6,11,24,.74);backdrop-filter:blur(14px);border-bottom:1px solid var(--line2);}
.nav-in{display:flex;align-items:center;gap:24px;height:66px;}
.brand{font-weight:900;font-size:19px;letter-spacing:.4px;color:#fff;} .brand span{color:var(--accent);} .brand:hover{text-decoration:none;}
nav.links{display:flex;gap:24px;margin-left:12px;flex:1;} nav.links a{color:var(--soft);font-size:15px;font-weight:500;} nav.links a:hover{color:#fff;text-decoration:none;}
.nav-cta{padding:9px 18px;font-size:14px;}
@media(max-width:760px){nav.links{display:none;} .nav-in{justify-content:space-between;}}

/* Buttons */
.btn{display:inline-block;background:var(--grad);color:#fff;font-weight:700;padding:14px 26px;border-radius:12px;border:none;cursor:pointer;font-size:16px;
  box-shadow:0 10px 30px -10px rgba(245,18,140,.6);transition:transform .15s,box-shadow .15s,filter .15s;}
.btn:hover{text-decoration:none;transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 14px 34px -10px rgba(245,18,140,.75);}
.btn.ghost{background:rgba(255,255,255,.06);box-shadow:none;border:1px solid var(--line);color:var(--fg);} .btn.ghost:hover{background:rgba(255,255,255,.1);box-shadow:none;}
.btn.block{display:block;text-align:center;width:100%;} .btn.lg{padding:16px 32px;font-size:17px;}

/* Hero */
.hero{padding:70px 0 40px;} .hero-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:46px;align-items:center;}
.hero h1{margin:6px 0 18px;} .hero .lead{margin-bottom:28px;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px;}
.ticks{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--soft);font-size:14.5px;} .ticks span:before{content:"✓";color:var(--ok);font-weight:800;margin-right:7px;}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:34px;} .hero{padding-top:44px;}}

/* Fernseher-Rahmen mit Player-Bildschirmfoto */
.tv-wrap{position:relative;padding:0 0 34px;}
.tv-wrap:before{content:"";position:absolute;inset:8% 4% 2%;background:var(--grad);filter:blur(70px);opacity:.38;border-radius:50%;z-index:0;}
.tv{position:relative;z-index:1;background:#060a14;border:1px solid #243452;border-radius:18px;padding:9px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset;}
.tv img{border-radius:10px;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#05060c;}
.tv-stand{position:relative;z-index:1;width:30%;height:14px;margin:0 auto;background:linear-gradient(#1a2640,#0c1426);border-radius:0 0 12px 12px;}
.float{position:absolute;z-index:2;width:44%;border-radius:14px;border:1px solid #2a3b5e;background:#05070e;padding:5px;box-shadow:0 28px 60px -20px rgba(0,0,0,.95);}
.float img{border-radius:10px;} .float.f1{left:-6%;bottom:-1%;transform:rotate(-4deg);animation:bob 7s ease-in-out infinite;}
.float.f2{right:-3%;top:-7%;width:34%;transform:rotate(3.5deg);animation:bob 8s ease-in-out -2s infinite;}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}} @media(prefers-reduced-motion:reduce){.float{animation:none!important}}
@media(max-width:700px){.float.f2{display:none} .float.f1{left:-2%;width:46%}}
.cap{font-size:12.5px;color:var(--dim);text-align:center;margin-top:10px;}

/* Leiste mit Eckdaten */
.strip{padding:26px 0;border-block:1px solid var(--line2);background:rgba(10,17,36,.6);}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;}
.strip b{display:block;font-size:30px;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;} .strip span{color:var(--soft);font-size:14px;}
@media(max-width:760px){.strip-in{grid-template-columns:repeat(2,1fr);}}

/* Abschnitte mit Bild */
.show{display:grid;grid-template-columns:1fr 1.15fr;gap:54px;align-items:center;margin-bottom:84px;} .show:last-child{margin-bottom:0;}
.show.rev{grid-template-columns:1.15fr 1fr;} .show.rev .show-text{order:2;}
.show-text h2{margin-bottom:14px;} .show-text .lead{font-size:18px;margin-bottom:20px;}
.checks{list-style:none;padding:0;margin:0;} .checks li{padding:7px 0 7px 30px;position:relative;color:var(--soft);}
.checks li:before{content:"✓";position:absolute;left:0;top:7px;width:20px;height:20px;border-radius:50%;background:rgba(74,222,128,.14);color:var(--ok);font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;}
.shot{border-radius:16px;border:1px solid #243452;background:#060a14;padding:7px;box-shadow:0 34px 70px -34px rgba(0,0,0,.95),0 0 60px -20px rgba(123,47,247,.35);} .shot img{border-radius:10px;width:100%;}
@media(max-width:940px){.show,.show.rev{grid-template-columns:1fr;gap:26px;margin-bottom:60px;} .show.rev .show-text{order:0;}}

/* Karten / Funktionsraster */
.sec-head{text-align:center;max-width:720px;margin:0 auto 46px;} .sec-head .lead{margin:12px auto 0;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} @media(max-width:940px){.grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:600px){.grid{grid-template-columns:1fr;}}
.card{background:linear-gradient(180deg,rgba(18,29,54,.85),rgba(12,20,40,.85));border:1px solid var(--line);border-radius:16px;padding:24px;transition:border-color .2s,transform .2s;}
.card:hover{border-color:#34507f;} .card h3{color:#fff;margin-bottom:8px;font-size:18px;} .card p{color:var(--soft);margin:0;font-size:15px;}
.ic{width:44px;height:44px;border-radius:12px;background:rgba(245,18,140,.12);border:1px solid rgba(245,18,140,.28);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:14px;}

/* Fernbedienung */
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} @media(max-width:860px){.keys{grid-template-columns:repeat(2,1fr);}}
.key{border-radius:14px;padding:18px;border:1px solid var(--line);background:var(--panel);} .key i{display:block;width:100%;height:6px;border-radius:6px;margin-bottom:12px;}
.key b{display:block;color:#fff;margin-bottom:3px;} .key span{color:var(--soft);font-size:14px;}
.k-r i{background:#ef4444}.k-g i{background:#22c55e}.k-y i{background:#eab308}.k-b i{background:#3b82f6}

/* Schritte */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} @media(max-width:820px){.steps{grid-template-columns:1fr;}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;position:relative;}
.step .n{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;align-items:center;justify-content:center;font-weight:800;margin-bottom:12px;}
.step h3{margin-bottom:6px;color:#fff;} .step p{color:var(--soft);margin:0;font-size:15px;}

/* Fairness-Block */
.fair{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center;background:linear-gradient(135deg,rgba(123,47,247,.16),rgba(245,18,140,.10));border:1px solid #2d3f6a;border-radius:22px;padding:42px;}
@media(max-width:860px){.fair{grid-template-columns:1fr;padding:26px;}}

/* Preise */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;max-width:900px;margin:0 auto;}
.plan{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;}
.plan.hot{border:1px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;box-shadow:0 30px 70px -34px rgba(245,18,140,.55);}
.ribbon{position:absolute;top:-12px;right:22px;background:var(--grad);color:#fff;font-size:12px;font-weight:800;padding:4px 12px;border-radius:20px;letter-spacing:.04em;}
.plan h3{font-size:20px;color:#fff;} .plan .price{font-size:44px;font-weight:900;color:#fff;margin:8px 0 0;line-height:1.05;} .plan .price .cur{font-size:26px;} .plan .price small{font-size:14px;color:var(--soft);font-weight:500;}
.plan .per{color:var(--ok);font-size:13.5px;margin:2px 0 12px;min-height:20px;}
.plan ul{list-style:none;padding:0;margin:12px 0 22px;color:var(--soft);font-size:14.5px;} .plan li{padding:7px 0 7px 26px;position:relative;border-bottom:1px solid var(--line2);}
.plan li:last-child{border:none;} .plan li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:900;} .plan .btn{margin-top:auto;}

/* FAQ */
details.faq{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden;}
details.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:14px;color:#fff;}
details.faq summary::-webkit-details-marker{display:none;} details.faq summary:after{content:"+";font-size:22px;color:var(--accent);line-height:1;}
details.faq[open] summary:after{content:"–";} details.faq .ans{padding:0 22px 20px;color:var(--soft);}

/* Galerie + Lightbox (nur CSS) */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} @media(max-width:760px){.gal{grid-template-columns:repeat(2,1fr);}}
.gal a{display:block;border-radius:12px;overflow:hidden;border:1px solid #243452;background:#060a14;position:relative;} .gal a:hover{border-color:var(--accent);}
.gal img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .35s;} .gal a:hover img{transform:scale(1.04);}
.gal span{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;font-size:13px;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.8));}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(3,6,14,.92);display:none;align-items:center;justify-content:center;padding:20px;}
.lightbox:target{display:flex;} .lightbox img{max-height:88vh;border-radius:12px;border:1px solid #2a3b5e;} .lightbox .x{position:absolute;inset:0;cursor:zoom-out;}
.lightbox img{position:relative;z-index:1;}

/* CTA-Band */
.cta-band{text-align:center;background:linear-gradient(135deg,rgba(245,18,140,.18),rgba(123,47,247,.22));border:1px solid #3a3f78;border-radius:26px;padding:58px 24px;}
.cta-band p{margin:14px auto 28px;color:var(--soft);max-width:560px;font-size:18px;}

/* Footer */
footer.site{border-top:1px solid var(--line2);margin-top:60px;padding:46px 0 20px;background:rgba(5,8,18,.7);}
.foot-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;} @media(max-width:820px){.foot-in{grid-template-columns:1fr 1fr;}}
footer.site h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:12px;} footer.site a{display:block;color:var(--soft);font-size:14.5px;padding:3px 0;} footer.site a:hover{color:#fff;text-decoration:none;}
footer.site .brand{display:inline-block;margin-bottom:6px;} footer.site p{font-size:14px;max-width:300px;}
.foot-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:34px;padding-top:18px;border-top:1px solid var(--line2);font-size:13px;color:var(--dim);}

/* Bestehende Seiten (Konto, Rechtliches, Danke) */
.pill{padding:3px 11px;border-radius:20px;font-size:12px;font-weight:700;}
.pill.active{background:rgba(74,222,128,.15);color:var(--ok);} .pill.expired{background:rgba(251,191,36,.15);color:var(--warn);} .pill.revoked{background:rgba(248,113,113,.15);color:var(--bad);}
.notice{background:#0f3324;border:1px solid #1d6b48;padding:12px 14px;border-radius:11px;margin-bottom:14px;}
.dev{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;background:#0a1226;border:1px solid var(--line);border-radius:12px;margin-top:8px;}
input[type=text],input[type=email],input[type=password],input:not([type]){padding:13px 15px;border-radius:11px;border:1px solid #2a3b5e;background:#091022;color:var(--fg);width:100%;font:inherit;}
input:focus{outline:2px solid var(--accent2);outline-offset:1px;}
label{font-size:13px;color:var(--soft);} code{background:#0a1226;padding:2px 7px;border-radius:6px;font-size:.92em;}
.legal{color:var(--soft);} .legal h2{color:#fff;margin-top:1.4em;font-size:26px;} .legal h3{color:#fff;margin:1.2em 0 .4em;font-size:18px;} .legal p,.legal li{font-size:15px;} .legal .ph{color:var(--warn);}
.maint main{display:block;}

/* Lizenz-Beispiel (Startseite): nachgestellte Zeilen der Lizenz-Einstellungen mit Beispielwerten */
.licpanel{background:linear-gradient(160deg,#102244,#0a1428);border:1px solid #2b4170;border-radius:18px;padding:18px 20px;box-shadow:0 30px 60px -32px rgba(0,0,0,.9);}
.licpanel-h{font-weight:800;margin-bottom:10px;color:#fff;display:flex;justify-content:space-between;gap:10px;align-items:baseline;} .licpanel-h small{color:var(--dim);font-weight:500;font-size:12px;}
.lrow{display:flex;justify-content:space-between;gap:14px;padding:11px 12px;border-radius:10px;font-size:15px;} .lrow:nth-child(odd){background:rgba(255,255,255,.03);}
.lrow span{color:var(--soft);} .lrow b{color:#fff;font-weight:600;text-align:right;} .lrow b.ok{color:var(--ok);}
.lrow.act{margin-top:8px;background:var(--grad)!important;} .lrow.act span,.lrow.act b{color:#fff;font-weight:700;}

/* Tastenbelegung */
table.kt{width:100%;border-collapse:collapse;margin-top:6px;} table.kt td{padding:9px 6px;border-bottom:1px solid var(--line2);font-size:14.5px;vertical-align:top;} table.kt tr:last-child td{border:none;}
table.kt td:first-child{width:120px;color:#fff;font-weight:600;white-space:nowrap;}
.kc{display:inline-block;padding:1px 10px;border-radius:6px;font-size:12.5px;font-weight:800;color:#fff;} .kc.r{background:#ef4444}.kc.g{background:#16a34a}.kc.y{background:#ca8a04}.kc.b{background:#2563eb}

/* Feinschliff Hero: Bildunterschrift unterhalb der schwebenden Karten */
.tv-wrap{padding-bottom:58px;} .tv-wrap .cap{position:relative;z-index:3;margin-top:34px;}

/* Konto-Seiten */
.form{display:flex;flex-direction:column;gap:10px;} .form label{margin-top:4px;}
.form .chk{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--soft);} .form .chk input{width:auto;margin-top:3px;}
.notice.bad{background:#3a1220;border-color:#8a2b45;}
.codebox{display:inline-block;font-family:ui-monospace,Consolas,monospace;font-size:26px;letter-spacing:4px;color:#fff;background:#0a1226;border:1px solid #2a3b5e;border-radius:10px;padding:6px 14px;}
.card + .card{margin-top:16px;}