:root { --bg:#050312; --cyan:#00f2ff; --purple:#bc13fe; --pink:#ff0080; --text:rgba(255,255,255,.92); --dim:rgba(255,255,255,.72); --faint:rgba(255,255,255,.62); --line:rgba(255,255,255,.1); --card:rgba(255,255,255,.04); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'Outfit',system-ui,sans-serif; line-height:1.6; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 60% 40% at 15% 5%,rgba(0,242,255,.13),transparent 70%), radial-gradient(ellipse 60% 40% at 90% 15%,rgba(188,19,254,.14),transparent 70%), radial-gradient(ellipse 70% 50% at 50% 100%,rgba(255,0,128,.10),transparent 70%); }
main, header, footer { position:relative; z-index:1; }
a { color:var(--cyan); }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }
.grad { background:linear-gradient(135deg,var(--cyan),var(--purple) 55%,var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Kopf */
.top { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.brand { display:flex; align-items:center; gap:10px; font-weight:900; font-style:italic; letter-spacing:-.02em; font-size:1.25rem; color:var(--text); text-decoration:none; }
.brand img { width:34px; height:34px; border-radius:9px; }
.top .mini { font-size:.85rem; font-weight:700; color:var(--dim); text-decoration:none; }
.top .mini:hover { color:var(--text); }

/* Hero */
.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding:36px 0 64px; }
.eyebrow { font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.4em; color:var(--cyan); margin:0 0 14px; }
h1 { font-size:clamp(2.6rem,7.4vw,4.6rem); line-height:1.02; font-weight:900; letter-spacing:-.035em; margin:0 0 18px; }
h1 .eyebrow { display:block; line-height:1.4; }
.lead { font-size:clamp(1.05rem,2.4vw,1.3rem); color:var(--dim); max-width:34rem; margin:0 0 30px; }
.cta { display:inline-flex; align-items:center; gap:12px; padding:20px 38px; border-radius:20px; font-weight:900; font-size:clamp(1.15rem,3vw,1.5rem); text-transform:uppercase; letter-spacing:.06em; text-decoration:none; color:#05040f;
  background:linear-gradient(135deg,var(--cyan),#7b6bff 55%,var(--pink)); box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 12px 50px rgba(0,242,255,.35),0 0 90px rgba(188,19,254,.35); transition:transform .15s, box-shadow .15s; }
.cta:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 16px 60px rgba(0,242,255,.5),0 0 110px rgba(188,19,254,.5); }
.cta svg { width:1.1em; height:1.1em; }
.facts { display:flex; flex-wrap:wrap; gap:8px 18px; margin:20px 0 0; padding:0; list-style:none; font-size:.92rem; color:var(--dim); font-weight:600; }
.facts li::before { content:"✓ "; color:var(--cyan); font-weight:900; }
.hero-shots { position:relative; height:560px; }
.phone { position:absolute; width:250px; aspect-ratio:9/19; border-radius:34px; padding:9px; background:linear-gradient(160deg,#2a2745,#0b0920); border:1px solid rgba(255,255,255,.18); box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(188,19,254,.25); }
.phone img { width:100%; height:100%; object-fit:cover; object-position:top; border-radius:26px; display:block; background:#0b0920; }
.phone.p1 { left:6%; top:40px; transform:rotate(-6deg); z-index:2; }
.phone.p2 { right:4%; top:0; transform:rotate(5deg); }

/* Sektionen */
section { padding:56px 0; }
h2 { font-size:clamp(1.7rem,4.4vw,2.5rem); font-weight:900; letter-spacing:-.025em; margin:0 0 10px; line-height:1.1; }
.sub { color:var(--dim); font-size:1.08rem; max-width:40rem; margin:0 0 34px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:24px; }
.num { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-weight:900; color:#05040f; background:linear-gradient(135deg,var(--cyan),var(--purple)); margin-bottom:14px; }
.card h3 { margin:0 0 6px; font-size:1.2rem; font-weight:800; }
.card p { margin:0; color:var(--dim); font-size:.98rem; }

.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.gallery figure { margin:0; }
.gallery .frame { border-radius:26px; padding:7px; background:linear-gradient(160deg,#2a2745,#0b0920); border:1px solid rgba(255,255,255,.15); box-shadow:0 18px 50px rgba(0,0,0,.5); }
.gallery img { width:100%; height:auto; aspect-ratio:9/19; object-fit:cover; object-position:top; border-radius:20px; display:block; background:#0b0920; }
.gallery figcaption { text-align:center; margin-top:12px; font-weight:700; font-size:.95rem; color:var(--dim); }

.modes { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mode .ico { font-size:1.7rem; margin-bottom:8px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.chip { padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:.88rem; font-weight:700; color:var(--dim); }

.beat { display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; }
.beat img { width:150px; height:auto; filter:drop-shadow(0 0 30px rgba(0,242,255,.35)); }

.final { text-align:center; padding:72px 0 88px; }
.final h2 { font-size:clamp(2rem,6vw,3.2rem); }
.final .sub { margin:0 auto 30px; }
.stores { margin-top:18px; color:var(--faint); font-size:.9rem; font-weight:600; }

/* Fuß: Rechtliches bewusst unauffällig */
footer { border-top:1px solid var(--line); padding:26px 0 40px; color:var(--faint); font-size:.85rem; }
footer .row { display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; align-items:center; }
footer nav a { color:var(--faint); text-decoration:none; margin-right:18px; }
footer nav a:hover { color:var(--dim); text-decoration:underline; }

/* Rechtsseiten */
.legal { max-width:760px; margin:0 auto; padding:14px 20px 90px; }
.legal h1 { font-size:2rem; letter-spacing:-.02em; margin:14px 0 20px; }
.legal h2 { font-size:1.25rem; color:var(--cyan); margin:34px 0 10px; }
.legal h3 { font-size:1.05rem; margin:22px 0 8px; }
.legal p, .legal li { font-size:.98rem; }
.legal .doc { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px 26px; }
.legal .draft { border:1px dashed rgba(255,185,30,.6); background:rgba(255,185,30,.08); color:#ffd166; border-radius:14px; padding:12px 16px; font-size:.92rem; margin:0 0 18px; }
.legal img { max-width:100%; }
.back { display:inline-block; color:var(--cyan); text-decoration:none; font-weight:700; font-size:.95rem; }

.feature { display:grid; grid-template-columns:1fr 250px; gap:40px; align-items:center; padding:26px 0; }
.feature.rev { grid-template-columns:250px 1fr; }
.feature.rev .fshot { order:-1; }
.feature .tag { display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.2em; color:var(--cyan); margin-bottom:8px; }
.feature h3 { font-size:clamp(1.5rem,3.4vw,2rem); font-weight:900; letter-spacing:-.02em; margin:0 0 10px; line-height:1.15; }
.feature p { color:var(--dim); font-size:1.05rem; margin:0; }
.feature p strong { color:var(--text); }
.fshot .frame { border-radius:28px; padding:8px; background:linear-gradient(160deg,#2a2745,#0b0920); border:1px solid rgba(255,255,255,.15); box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 60px rgba(188,19,254,.2); }
.fshot img { width:100%; height:auto; border-radius:21px; display:block; background:#0b0920; }
.steps.two { grid-template-columns:repeat(2,1fr); margin-top:26px; }
.steps .ico { font-size:1.7rem; margin-bottom:8px; }
.modes.four { grid-template-columns:repeat(2,1fr); }
@media (max-width:860px) {
  .feature, .feature.rev { grid-template-columns:1fr; gap:18px; }
  .feature .fshot { order:2; max-width:280px; margin:0 auto; }
  .steps.two, .modes.four { grid-template-columns:1fr; }
  .hero { grid-template-columns:1fr; gap:10px; padding-top:14px; }
  .hero-shots { height:470px; order:2; }
  .phone { width:200px; }
  .phone.p1 { left:calc(50% - 205px); }
  .phone.p2 { right:calc(50% - 205px); }
  .steps, .modes { grid-template-columns:1fr; }
  .gallery { grid-template-columns:repeat(2,1fr); }
  .beat { grid-template-columns:1fr; text-align:center; justify-items:center; }
  .cta { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:no-preference) { .cta { animation:glow 2.6s ease-in-out infinite; } @keyframes glow { 50% { box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 14px 60px rgba(0,242,255,.5),0 0 100px rgba(255,0,128,.4); } } }

/* Hinweisleiste "im Aufbau" */
.construction { position:relative; z-index:2; text-align:center; padding:10px 16px; font-size:.92rem; color:#ffd166; background:linear-gradient(90deg,rgba(255,185,30,.16),rgba(255,80,20,.12)); border-bottom:1px solid rgba(255,185,30,.4); }
.construction strong { text-transform:uppercase; letter-spacing:.08em; margin-right:6px; }
.top .mini.soon { color:#ffd166; border:1px solid rgba(255,185,30,.45); padding:5px 12px; border-radius:999px; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
/* Deaktivierter Start-Button mit Störer */
.cta.off { position:relative; cursor:default; opacity:.55; filter:saturate(.7); animation:none; box-shadow:0 0 0 1px rgba(255,255,255,.15) inset; }
.cta.off:hover { transform:none; box-shadow:0 0 0 1px rgba(255,255,255,.15) inset; }
.stoerer { position:absolute; top:-14px; right:-10px; transform:rotate(6deg); background:#ffd166; color:#1a1200; font-size:.68rem; font-weight:900; letter-spacing:.06em; padding:5px 11px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.4); text-transform:uppercase; }

footer .tm { margin:18px 0 0; font-size:.75rem; line-height:1.5; color:var(--faint); max-width:52rem; }
.feature.solo { grid-template-columns:1fr; }

/* Tastatur-Fokus sichtbar (Barrierefreiheit) */
a:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; border-radius:6px; }

/* Online-Multiplayer-Abschnitt */
.online-card { display:grid; grid-template-columns:1fr 250px; gap:40px; align-items:center; padding:34px; border-radius:28px; border:1px solid rgba(0,242,255,.25); background:linear-gradient(135deg,rgba(0,242,255,.08),rgba(188,19,254,.10)); box-shadow:0 0 80px rgba(0,242,255,.08); }
.online-card h2 { font-size:clamp(1.6rem,4vw,2.3rem); margin:8px 0 12px; }
.online-card .tag { display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.2em; color:var(--cyan); }
.online-card p { color:var(--dim); font-size:1.05rem; margin:0 0 16px; }
.checks { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.checks li { position:relative; padding-left:28px; color:var(--text); font-size:.98rem; }
.checks li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--cyan); font-weight:900; }
@media (max-width:860px) { .online-card { grid-template-columns:1fr; padding:24px; gap:22px; } .online-card .fshot { max-width:260px; margin:0 auto; } }

/* Datenschutz-Seite */
.doc .toc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 20px;margin:0 0 28px;font-size:14px}
.doc .toc a{display:block;padding:2px 0}
.doc .notice{background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.35);border-radius:12px;padding:14px 18px;font-size:14px;margin:0 0 24px}
.doc h2.part{font-size:1.5rem;border-top:2px solid #00f2ff;padding-top:14px;margin-top:48px}
.top-right { display:flex; align-items:center; gap:14px; }
.langs { display:inline-flex; border:1px solid rgba(255,255,255,.2); border-radius:999px; overflow:hidden; font-size:.72rem; font-weight:800; letter-spacing:.14em; }
.langs a, .langs .on { padding:6px 12px; text-decoration:none; color:var(--dim); }
.langs a:hover { color:#fff; }
.langs .on { background:rgba(255,255,255,.14); color:#fff; }
/* Schmale Handys: das Etikett steht schon im gelben Balken und am Button; so passt der Sprachumschalter in die Kopfzeile */
@media (max-width:480px) { .top .mini.soon { display:none; } }

.cta2 { display:inline-flex; align-items:center; gap:10px; margin:14px 0 0 14px; padding:14px 22px; border-radius:16px; font-weight:800; font-size:1rem; text-decoration:none; color:var(--text); background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.28); transition:background .15s, transform .15s; }
.cta2:hover { background:rgba(255,255,255,.14); transform:translateY(-2px); }
.cta2 svg { width:1.2em; height:1.2em; }
.storelink { color:var(--cyan); text-decoration:none; font-weight:700; }
.storelink:hover { text-decoration:underline; }
@media (max-width:480px) { .cta2 { display:flex; justify-content:center; margin:12px 0 0; width:100%; } }
/* Kanzlei-Copyright-Hinweis (Logo) bewusst klein, aber unverändert vorhanden */
#itkanzlei_txt_copyright { margin-top:3em !important; }
#itkanzlei_img_copyright { height:30px !important; width:auto !important; margin-top:0 !important; opacity:.75; }
/* Wortmarke im Kopf: gleicher Farbverlauf wie in der App (Wiedererkennung) */
.brand .word { background:linear-gradient(135deg,#00f2ff 0%,#bc13fe 50%,#ff0080 100%); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.12em; }
@media (max-width:480px) { .eyebrow { letter-spacing:.2em; font-size:.7rem; } }
.slogan { margin:18px 0 0; font-weight:800; font-size:1.02rem; letter-spacing:.01em; color:var(--text); }
.facts + .facts { margin-top:6px; }

/* FAQ-Seiten: ausklappbare Fragen */
.faq-intro { color:var(--dim); font-size:1.05rem; margin:0 0 8px; }
.faq h2 { margin:34px 0 12px; }
.faq-item { background:var(--card); border:1px solid var(--line); border-radius:16px; margin:0 0 10px; padding:0 18px; }
.faq-item summary { cursor:pointer; list-style:none; padding:15px 28px 15px 0; font-weight:700; position:relative; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%); font-size:1.4rem; font-weight:400; color:var(--cyan); }
.faq-item[open] summary::after { content:"–"; }
.faq-item[open] { border-color:rgba(0,242,255,.35); }
.faq-item p { margin:0 0 16px; color:var(--dim); }
.faq-item p a { color:var(--cyan); }