:root{--bg1:#2e1a4f;--bg2:#120d24;--ink:#f3eef6;--muted:#b1a6c4;--accent:#ff6fae;--accent2:#7ef2ff;--gold:#ffd27a;--ok:#7ef2ff;--card:rgba(255,255,255,.06);--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg2);color-scheme:dark}
body{margin:0;font-family:ui-rounded,'SF Pro Rounded',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:linear-gradient(160deg,var(--bg1),var(--bg2) 70%);min-height:100vh;line-height:1.55}
a{color:var(--accent2);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:22px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;color:var(--ink)}
.brand img{width:40px;height:40px;border-radius:11px}
nav{display:flex;flex-wrap:wrap;gap:6px 20px}nav a{color:var(--muted);font-size:15px}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:40px 0 20px}
h1{font-size:clamp(34px,5.2vw,58px);line-height:1.04;margin:0 0 18px;letter-spacing:-.01em}
.lead{font-size:20px;color:var(--muted);max-width:560px;margin:0}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;padding:14px 22px;border-radius:999px;font-weight:700;margin-top:26px}
.cta:hover{text-decoration:none;filter:brightness(1.06)}
.cta.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink);margin-left:10px}
.hero-shot{width:100%;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.5);border:1px solid var(--line)}
.figs{display:flex;gap:6px;align-items:end;margin-top:22px}.figs img{width:58px}.figs img:nth-child(2){width:72px}
section{padding:36px 0}h2{font-size:30px;margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:26px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.card h3{margin:0 0 8px;font-size:18px}.card p{margin:0;color:var(--muted);font-size:15px}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:22px 0}
.steps .card::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;margin-bottom:10px}
.shots{display:flex;gap:16px;overflow-x:auto;padding:10px 0 20px;scroll-snap-type:x mandatory}
.shots figure{margin:0;flex:none;scroll-snap-align:start}
.shots img{height:360px;border-radius:18px;border:1px solid var(--line);display:block}
.shots figcaption{color:var(--muted);font-size:13px;margin-top:6px;max-width:520px}
.price{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.price .reco{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.price .amount{display:block;font-size:38px;font-weight:800;letter-spacing:-.02em}
.price strong{font-size:20px;display:block;margin:2px 0 6px}
.price ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:15px}
.note{background:rgba(127,175,138,.1);border:1px solid rgba(127,175,138,.35);border-radius:14px;padding:14px 18px;margin:18px 0}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--card);color:var(--muted)}
footer{border-top:1px solid var(--line);padding:26px 0 50px;color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px}
.doc{max-width:780px}.doc h2{font-size:23px;margin-top:36px}.doc h3{font-size:18px;margin:26px 0 6px}.doc p,.doc li{color:var(--ink)}
.doc img{max-width:100%;border-radius:16px;border:1px solid var(--line);margin:10px 0}
.summary{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:18px 0}
.small{font-size:13px;color:var(--muted)}
code{background:rgba(0,0,0,.3);padding:2px 6px;border-radius:6px;font-size:.92em;overflow-wrap:anywhere}
table{width:100%;border-collapse:collapse;font-size:15px}td,th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{color:var(--muted);font-weight:600}
.tbl{overflow-x:auto}
@media (max-width:820px){.hero{grid-template-columns:1fr}.shots img{height:260px}}
@media (max-width:520px){.cta.ghost{margin-left:0}}
/* Stand 11.11.2026: App-Store-Knopf, Hero mit Fernseher + iPhone, Video, FAQ */
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}.ctas .cta{margin-top:0}
.appstore{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:12px;padding:8px 18px 8px 14px;font-weight:700;font-size:20px;line-height:1.05}
.appstore:hover{text-decoration:none;filter:brightness(1.15)}
.appstore svg{width:26px;height:26px}.appstore small{display:block;font-size:11px;font-weight:500;opacity:.85}
.hero-pic{position:relative;padding:0 0 40px}
.hero-tv{width:100%;border-radius:18px;border:10px solid #0c0b10;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.hero-phone{position:absolute;right:-6px;bottom:0;width:30%;border-radius:26px;border:6px solid #0c0b10;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.video-wrap{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:30px;align-items:center}
.video-wrap video{width:100%;border-radius:20px;border:1px solid var(--line);background:#000;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 18px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:700;padding:12px 0;list-style:none}.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent2);font-size:20px;line-height:1}.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 14px;color:var(--muted)}
@media (max-width:820px){.video-wrap{grid-template-columns:1fr}}

.explain-teaser{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;border:1px solid var(--line);border-radius:22px;padding:30px;background:var(--card);margin:20px 0}
.teaser-shots{position:relative;height:260px}.teaser-shots img{position:absolute;border-radius:14px;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.teaser-shots img:nth-child(1){left:0;top:20px;width:72%}.teaser-shots img:nth-child(2){right:16%;top:0;height:250px}.teaser-shots img:nth-child(3){right:0;top:30px;height:220px}
@media (max-width:820px){.explain-teaser{grid-template-columns:1fr}}
/* Hero: Slogan + Animation „Figur ans iPhone → Fernseher spielt“ */
.hero2x{grid-template-columns:1fr 1.05fr;padding-top:30px}
.hero-kicker{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent2);margin-bottom:12px}
.hero2x h1{font-size:clamp(38px,5.6vw,66px)}.accent{color:var(--accent2)}
.hero-points{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--ink);font-weight:600}
.hero-points b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;margin-right:6px}
.hero-anim{position:relative;aspect-ratio:5/4;container-type:inline-size}
.ha-tv{position:absolute;right:0;top:4%;width:78%;aspect-ratio:16/10;background:#0c0b10;border-radius:2cqw;padding:1.2cqw;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.ha-tv img,.ha-phone img{position:absolute;inset:1.2cqw;width:calc(100% - 2.4cqw);height:calc(100% - 2.4cqw);object-fit:cover;border-radius:1.2cqw}
.ha-phone{position:absolute;left:4%;bottom:0;width:30%;aspect-ratio:1206/2622;background:#0c0b10;border-radius:5cqw;padding:1.2cqw;box-shadow:0 24px 50px rgba(0,0,0,.55)}
.ha-phone img{border-radius:4cqw}
.ha-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12cqw;height:12cqw;border-radius:50%;background:rgba(217,119,74,.92);color:#fff;display:grid;place-items:center;font-size:5cqw;opacity:0}
.ha-fig{position:absolute;left:-2%;bottom:46%;font-size:13cqw;filter:drop-shadow(0 1.5cqw 2cqw rgba(0,0,0,.55))}
.ha-tag{position:absolute;left:31%;bottom:58%;font-size:2.6cqw;font-weight:800;color:#fff;background:var(--accent);padding:.5cqw 1.4cqw;border-radius:99px;opacity:0}
.ha-waves i{position:absolute;left:12%;bottom:53%;width:14cqw;height:14cqw;border-radius:50%;border:.6cqw solid var(--accent2);opacity:0}
.ha-beam{position:absolute;left:36%;top:52%;width:26%;height:2px;display:flex;gap:4%}
.ha-beam i{flex:1;height:.8cqw;border-radius:9px;background:var(--accent2);opacity:0}
/* 7-s-Schleife: Figur kommt, Wellen, iPhone schaltet um, Strahl zum Fernseher, Fernseher spielt */
.hero-anim *{animation-duration:7s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.ha-fig{animation-name:haFig}@keyframes haFig{0%,6%{transform:translate(-8cqw,10cqw) rotate(-12deg);opacity:0}16%{opacity:1}34%,58%{transform:translate(8cqw,-2cqw) rotate(4deg);opacity:1}72%,100%{transform:translate(-6cqw,10cqw) rotate(-10deg);opacity:0}}
.ha-waves i{animation-name:haWave}.ha-waves i:nth-child(2){animation-delay:.35s}@keyframes haWave{0%,32%{transform:scale(.3);opacity:0}36%{opacity:.9}50%,100%{transform:scale(1.5);opacity:0}}
.ha-tag{animation-name:haTag}@keyframes haTag{0%,34%{opacity:0;transform:translateY(1cqw)}40%,58%{opacity:1;transform:none}66%,100%{opacity:0}}
.ha-phone .ha-b{animation-name:haB}.ha-phone .ha-a{animation-name:haA}
@keyframes haA{0%,40%{opacity:1}46%,92%{opacity:0}100%{opacity:1}}@keyframes haB{0%,40%{opacity:0}46%,92%{opacity:1}100%{opacity:0}}
.ha-beam i{animation-name:haBeam}.ha-beam i:nth-child(2){animation-delay:.12s}.ha-beam i:nth-child(3){animation-delay:.24s}
@keyframes haBeam{0%,44%{opacity:0;transform:translateX(-2cqw)}50%{opacity:1}58%,100%{opacity:0;transform:translateX(3cqw)}}
.ha-tv .ha-a{animation-name:haTvA}.ha-tv .ha-b{animation-name:haTvB}
@keyframes haTvA{0%,54%{opacity:1}60%,94%{opacity:0}100%{opacity:1}}@keyframes haTvB{0%,54%{opacity:0}60%,94%{opacity:1}100%{opacity:0}}
.ha-play{animation-name:haPlay}@keyframes haPlay{0%,54%{opacity:0;transform:translate(-50%,-50%) scale(.6)}60%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
@media (prefers-reduced-motion:reduce){.hero-anim *{animation:none!important}.ha-phone .ha-a,.ha-tv .ha-a{opacity:0}}
.slogans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:10px 0 20px}
.slogans div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;color:var(--muted)}.slogans b{color:var(--ink)}
.nfc .nfc-ico{font-size:34px;height:52px;display:flex;align-items:center;margin-bottom:8px}.nfc .nfc-ico svg{width:52px;height:52px}
.faq .faq-top{border-color:var(--accent)}
@media (max-width:820px){.hero2x{grid-template-columns:1fr}.slogans{grid-template-columns:1fr}}

/* Marke Flimmerwerk (Variante B): Neon-Pink, Flimmer-Cyan, Funkel-Gold auf tiefem Violett */
.brand span{color:var(--accent);text-shadow:0 0 14px rgba(255,111,174,.55)}
.brand img{border-radius:10px}
.cta{box-shadow:0 0 22px rgba(255,111,174,.45)}
.accent{color:var(--accent)!important;text-shadow:0 0 22px rgba(255,111,174,.45)}
.hero-kicker{color:var(--accent2)!important;text-shadow:0 0 12px rgba(126,242,255,.45)}
.hero-points b{background:var(--accent);box-shadow:0 0 10px rgba(255,111,174,.6)}
.price .reco{box-shadow:0 0 0 1px var(--accent) inset,0 0 30px rgba(255,111,174,.2)}
.faq .faq-top{box-shadow:0 0 24px rgba(255,111,174,.15)}