@font-face{font-family:"MCTen";src:url("/assets/fonts/mcten.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Noto Sans";src:url("/assets/fonts/noto-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Sans";src:url("/assets/fonts/noto-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{--bg:#17181c;--bg2:#1f2025;--pink:#f21fe8;--cyan:#22d4ff;--dark:#111;--ok:#3ddc4a;--bad:#ff5d5d;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:#fff;font-family:"Noto Sans","Segoe UI",system-ui,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:#fff;color:var(--dark);padding:10px 16px;font-family:"MCTen",monospace}
.skip:focus{top:12px}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;text-align:center;background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,.2) 40%,rgba(0,0,0,.6)),url(/assets/img/hero.jpg) center/cover}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.5));pointer-events:none}
#fx{position:absolute;inset:0;pointer-events:none;z-index:2}
#fx i{position:absolute;bottom:-12px;width:8px;height:8px;opacity:0;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:.85}100%{transform:translateY(-105vh) rotate(90deg);opacity:0}}
nav{position:relative;z-index:5;width:100%;max-width:1080px;margin:0 auto;padding:30px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
nav .ic{width:44px;height:42px;display:block;transition:transform .2s}
nav a:hover .ic{transform:rotate(-8deg) scale(1.08)}
.links{display:flex;align-items:center;gap:16px;font-size:19px}
.links a{padding:4px 0;border-bottom:3px solid transparent;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.links a.on,.links a:hover{border-color:#fff}
.links i{width:5px;height:5px;background:rgba(255,255,255,.45)}
.navr{display:flex;align-items:center;gap:12px}
.nbtn{display:none;width:48px;height:48px;padding:0;background:rgba(0,0,0,.35);border:1px solid #fff;color:#fff;cursor:pointer}
.nbtn span,.nbtn span::before,.nbtn span::after{content:"";display:block;width:22px;height:3px;background:#fff;margin:auto;position:relative}
.nbtn span::before{position:absolute;top:-7px;left:0}.nbtn span::after{position:absolute;top:7px;left:0}
.btn{font-family:inherit;display:inline-block;border-radius:0;padding:16px 40px;font-size:20px;letter-spacing:.04em;cursor:pointer;border:1px solid #fff;color:inherit;background:none;transition:transform .1s,background .15s,box-shadow .15s;text-align:center}
.btn:hover{box-shadow:4px 4px 0 var(--pink)}
.btn:active{transform:translateY(2px);box-shadow:none}
.solid{background:#fff;color:var(--dark)}.solid:hover{background:#e9f9ff}
.outline{background:rgba(0,0,0,.15)}.outline:hover{background:rgba(255,255,255,.16);box-shadow:4px 4px 0 var(--cyan)}
.nb{padding:12px 24px}
.center{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px 150px}
.beams{position:absolute;top:0;left:50%;width:min(700px,92vw);height:clamp(190px,26vw,330px);transform:translateX(-50%);z-index:-1;pointer-events:none}
.beams::before,.beams::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.34),rgba(255,255,255,0))}
.beams::before{clip-path:polygon(44% 0,56% 0,100% 100%,0 100%)}
.beams::after{clip-path:polygon(44% 0,56% 0,82% 100%,18% 100%);opacity:.7}
.icon{width:clamp(90px,11vw,150px);height:auto;animation:bob 4s ease-in-out infinite;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.logo{width:min(780px,86vw);height:auto;margin-top:6px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));animation:bob 5s ease-in-out -1.5s infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.badge{margin-top:30px;display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--dark);padding:5px 18px;font-size:15px}
.badge i{width:8px;height:8px;background:#9a9a9a;flex:none}
.badge[data-state="online"] i{background:var(--ok);animation:blink 1.6s steps(2) infinite}
.badge[data-state="offline"] i{background:var(--bad)}
@keyframes blink{50%{opacity:.25}}
.tag{margin-top:22px;font-weight:400;font-size:clamp(26px,4.4vw,52px);line-height:1.25;max-width:860px;text-shadow:0 3px 10px rgba(0,0,0,.6)}
.tag b{font-weight:400;color:var(--cyan)}.tag em{font-style:normal;color:var(--pink)}
.sub{margin-top:16px;max-width:620px;font-size:clamp(15px,1.8vw,18px);line-height:1.7;color:rgba(255,255,255,.78);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.edge{position:absolute;left:0;right:0;bottom:-1px;height:clamp(70px,9vw,130px);z-index:4;pointer-events:none}
.edge div{position:absolute;inset:0}
.e1{background:rgba(23,24,28,.5);clip-path:polygon(0 55%,4% 55%,4% 25%,12% 25%,12% 50%,22% 50%,22% 20%,30% 20%,30% 60%,42% 60%,42% 30%,50% 30%,50% 55%,60% 55%,60% 15%,68% 15%,68% 50%,80% 50%,80% 25%,90% 25%,90% 55%,100% 55%,100% 100%,0 100%)}
.e2{background:var(--bg);clip-path:polygon(0 80%,7% 80%,7% 60%,16% 60%,16% 78%,28% 78%,28% 55%,38% 55%,38% 80%,52% 80%,52% 62%,64% 62%,64% 82%,74% 82%,74% 58%,86% 58%,86% 78%,96% 78%,96% 62%,100% 62%,100% 100%,0 100%)}

/* Unterseiten: kompakter Kopf mit demselben Hero-Look */
.hero.mini{min-height:0}
.hero.mini .center{flex:none;padding:10px 20px 150px}
.hero.mini h1{font-weight:400;font-size:clamp(34px,6vw,64px);line-height:1.15;text-shadow:0 3px 10px rgba(0,0,0,.6)}
.hero.mini .sub{margin-top:14px}

.hero,.btn,h1,h2,h3,.lbl,.pl,.ver,.img span,.faq summary,.links,.badge,.skip,.price{font-family:"MCTen",monospace}
.hero .sub{font-family:"Noto Sans",system-ui,sans-serif}

/* ---------- Abschnitte ---------- */
.sec{padding:80px 20px}.alt{background:#0d0d0d}
.w{max-width:1080px;margin:0 auto}
.lbl{display:inline-block;background:var(--cyan);color:#06222c;font-size:14px;padding:3px 10px;margin-bottom:14px}.lbl.p{background:var(--pink);color:#1a001c}
h2{font-weight:400;font-size:clamp(28px,4vw,42px);line-height:1.2;margin-bottom:12px}
h3{font-weight:400}
.hd{text-align:center;max-width:640px;margin:0 auto 52px}
.hd p,.t p{color:#a8a8a8;line-height:1.7}
.mc,.mg,.mp{padding:12px 26px;font-size:18px;border-width:2px 2px 5px;border-style:solid;color:#fff}
.mc{background:var(--cyan);color:#06222c;border-color:#9aeaff #9aeaff #0e7894}
.mp{background:var(--pink);border-color:#ff9af7 #ff9af7 #8a0f84}
.mg{background:#4a4a4a;border-color:#7a7a7a #7a7a7a #2b2b2b}
.mc:hover,.mg:hover,.mp:hover{box-shadow:none;filter:brightness(1.12)}
.bt{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.bt.mid{justify-content:center}
.bw{position:relative;display:inline-block}
.bw.full{display:block}.bw.full .btn{width:100%}
.pl{position:absolute;top:-12px;right:-8px;background:#00cc66;color:#03281a;font-size:12px;padding:1px 8px;z-index:1}
.row{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:64px}
.row:last-child{margin-bottom:0}.row.rev .img{order:2}
.img{position:relative;aspect-ratio:16/9;border:2px solid #2a2a2a;overflow:hidden;background:linear-gradient(var(--a),var(--b))}
.img::before{content:"";position:absolute;left:24%;right:24%;bottom:24%;height:24%;background:linear-gradient(#5fd13a 28%,#7a4a24 28%);clip-path:polygon(0 0,100% 0,100% 55%,85% 55%,85% 80%,62% 80%,62% 100%,30% 100%,30% 70%,0 70%)}
.img::after{content:"";position:absolute;left:8%;top:18%;width:22%;height:9%;background:rgba(255,255,255,.7);box-shadow:150% 90% 0 rgba(255,255,255,.5)}
.img span{position:absolute;left:10px;bottom:8px;font-size:12px;color:rgba(255,255,255,.6)}
.i1{--a:#7cd4ff;--b:#d8f3ff}.i2{--a:#ff8ee9;--b:#ffe0fa}.i3{--a:#3a6ea5;--b:#8fc3ff}.i4{--a:#b08cff;--b:#ffd1f5}
.t h3{font-size:28px;margin-bottom:10px}
.top{display:grid;grid-template-columns:1.3fr 1fr;gap:44px;align-items:center;margin-bottom:50px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.c{position:relative;border:2px solid #2a2a2a;background:#111;padding:18px 18px 20px}
.c h3{font-size:21px;margin-bottom:8px}.c p{font-size:15px;color:#a8a8a8;line-height:1.65}
.c.hot{border-color:var(--cyan)}
.c .img{margin:-18px -18px 16px;border-width:0 0 2px}
.c .bt{margin-top:18px}
.price{font-size:28px;margin:6px 0 12px}.price small{font-size:14px;color:#888}
.c ul{list-style:none;padding:0;margin-bottom:18px;font-size:15px;color:#bbb;line-height:1.9}.c li::before{content:"+ ";color:var(--ok)}
.pt{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.logo-ph{height:150px;display:grid;place-items:center;border:2px dashed #2a2a2a;font-family:"MCTen",monospace;font-size:26px;color:#666;margin-bottom:22px}
.faq details{background:#111;border:2px solid #2a2a2a;margin-bottom:12px}
.faq summary{cursor:pointer;padding:16px 20px;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--pink)}
.faq details[open]{border-color:var(--cyan)}.faq details[open] summary::after{content:"-";color:var(--cyan)}
.faq p{padding:0 20px 18px;color:#a8a8a8;line-height:1.7;font-size:15px}
.faq p a,.t p a,.hd p a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.narrow{max-width:760px}
.box{position:relative;max-width:580px;margin:0 auto;border:2px solid #2a2a2a;background:#0b0b0b;padding:44px 40px 40px}
.ver{position:absolute;top:-14px;left:20px;background:#fff;color:#111;font-size:13px;padding:2px 10px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
label{display:block;margin:16px 0 6px;font-size:15px}
input,textarea{width:100%;background:#151515;border:2px solid #2a2a2a;color:#fff;padding:12px 14px;font:inherit;border-radius:0}
input[readonly]{cursor:pointer}
textarea{min-height:150px;resize:vertical}
input:focus,textarea:focus{border-color:var(--cyan);outline:none}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--bad)}
.hint{font-size:14px;color:#8a8a8a;margin:14px 0 22px;min-height:42px}
.note{font-size:14px;color:#a8a8a8;min-height:22px;margin-top:12px;text-align:center}
.err{display:block;color:var(--bad);font-size:13px;min-height:1.2em;margin-top:4px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fine{font-size:13px;color:#8a8a8a;margin:14px 0 18px}
.fine a{color:var(--cyan);text-decoration:underline}
.status{min-height:1.6em;margin-top:12px;font-size:15px;text-align:center;color:#a8a8a8}
.status[data-state="ok"]{color:var(--ok)}.status[data-state="err"]{color:var(--bad)}
.cta-band{text-align:center}
.cta-band h2{margin-bottom:10px}
.cta-band p{color:#a8a8a8;max-width:560px;margin:0 auto}

/* ---------- Footer ---------- */
footer{border-top:2px solid #222;background:#0d0d0d;padding:40px 20px calc(28px + env(safe-area-inset-bottom,0px));font-size:14px;color:#777}
.fg{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;text-align:left}
.fg h4{font-family:"MCTen",monospace;font-weight:400;color:#fff;font-size:16px;margin-bottom:12px}
.fg li{list-style:none;margin-bottom:8px}.fg ul{padding:0}
.fg a{color:#a8a8a8}.fg a:hover{color:#fff;text-decoration:underline}
.fg p{max-width:42ch;line-height:1.6}
.fb{max-width:1080px;margin:28px auto 0;padding-top:20px;border-top:2px solid #222;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

/* ---------- Rechtsseiten ---------- */
.legal{max-width:800px;margin:0 auto}
.legal h2{font-size:24px;margin:40px 0 10px;color:var(--cyan)}
.legal h2:first-of-type{margin-top:28px}
.legal p,.legal li{color:#cfcfcf;line-height:1.75;font-size:16px}
.legal p+p{margin-top:12px}
.legal ul{padding-left:22px;margin-top:8px;list-style:square}
.legal a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.legal .meta{color:#8a8a8a;font-size:14px}
.legal code{background:#111;border:1px solid #2a2a2a;padding:1px 6px;font-size:14px}
.legal .todo{background:rgba(255,213,74,.12);border:1px dashed #ffd54a;padding:1px 6px;color:#ffd54a}
.legal .note-box{margin:22px 0;padding:16px 18px;border:2px solid #2a2a2a;border-left:5px solid var(--cyan);background:#111}
.legal table{width:100%;border-collapse:collapse;margin-top:12px;font-size:15px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 12px;border:2px solid #2a2a2a}
.legal th{background:#111;font-family:"MCTen",monospace;font-weight:400}
.tw{overflow-x:auto}
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding:60px 20px}
.nf h1{font-size:clamp(72px,16vw,160px);font-weight:400;color:var(--pink);text-shadow:6px 6px 0 #8a0f84;line-height:1}
.nf p{color:#a8a8a8;margin:14px 0 26px}

.js .rv{opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s}.js .rv.in{opacity:1;transform:none}

@media(max-width:860px){
  .links{display:none;position:absolute;top:calc(100% - 8px);left:20px;right:20px;flex-direction:column;align-items:stretch;gap:0;background:#111;border:2px solid #2a2a2a;padding:8px 18px;z-index:10}
  .links.open{display:flex}
  .links i{display:none}
  .links a{padding:14px 0;border-bottom:2px solid #222}
  .links a:last-child{border-bottom:0}
  .nbtn{display:block}
}
@media(max-width:760px){.row,.top,.pt,.fg,.row2{grid-template-columns:1fr}.row.rev .img{order:0}.box{padding:40px 20px 30px}}
@media(max-width:520px){.btn{padding:14px 26px;font-size:17px}.nb{padding:10px 16px;font-size:16px}.mc,.mg,.mp{padding:12px 20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}#fx{display:none}}

.toast{position:fixed;left:50%;bottom:28px;z-index:300;transform:translate(-50%,24px);padding:12px 22px;background:#fff;color:var(--dark);font-family:"MCTen",monospace;font-size:16px;box-shadow:4px 4px 0 var(--cyan);opacity:0;pointer-events:none;transition:opacity .25s,transform .3s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.vote-cta{margin-top:34px}
.shop-fine{margin-top:30px;text-align:center;max-width:70ch;margin-inline:auto}