/* WELTLAGE Landingpage v2 — produktzentriert, echte Screenshots, Scroll-Choreografie.
   Kein Build-Step: reines CSS + IntersectionObserver; Libraries nur als Verstaerkung. */
:root {
  --bg:#080C16; --bg2:#0D1322; --bg3:#141C2E;
  --ink:#F7F9FB; --mut:#8FA0C0; --mut2:#5E7093;
  --accent:#C044C0; --accent2:#8B2C8B;
  --rot:#FF5252; --orange:#FFB74D; --gruen:#3ED598; --blau:#4FC3F7;
  --line:rgba(255,255,255,.10); --card:rgba(255,255,255,.035);
  --wrap:1200px; --r:16px;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
}
* { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  background:var(--bg); color:var(--ink); overflow-x:hidden;
  font:16px/1.65 'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-feature-settings:'kern' 1,'liga' 1;
}
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,5vw,40px) }
a { color:inherit; text-decoration:none }
img { max-width:100%; display:block }

/* ---------------- Scroll-Choreografie ---------------- */
.rv { opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1) }
.rv.in { opacity:1; transform:none }
.rv.d1 { transition-delay:.09s } .rv.d2 { transition-delay:.18s }
.rv.d3 { transition-delay:.27s } .rv.d4 { transition-delay:.36s } .rv.d5 { transition-delay:.45s }
.rv-l { opacity:0; transform:translateX(-32px) } .rv-l.in { opacity:1; transform:none }
.rv-r { opacity:0; transform:translateX(32px) } .rv-r.in { opacity:1; transform:none }
.rv-l,.rv-r { transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1) }
.rv-s { opacity:0; transform:scale(.965); transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1) }
.rv-s.in { opacity:1; transform:none }
@media (prefers-reduced-motion:reduce) {
  .rv,.rv-l,.rv-r,.rv-s { opacity:1 !important; transform:none !important; transition:none }
  html { scroll-behavior:auto }
}

/* ---------------- Kopfleiste ---------------- */
#nav {
  position:fixed; inset:0 0 auto 0; z-index:80; height:66px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,5vw,40px);
  background:rgba(8,12,22,0); border-bottom:1px solid transparent;
  transition:background .35s, border-color .35s, backdrop-filter .35s;
}
#nav.solid { background:rgba(8,12,22,.86); backdrop-filter:blur(14px); border-bottom-color:var(--line) }
.brand { font-family:'Space Grotesk',sans-serif; display:flex; align-items:baseline; gap:9px; font-weight:800; letter-spacing:.13em; font-size:15px }
.brand i { color:var(--accent); font-style:normal }
.brand small { font-size:9.5px; letter-spacing:.2em; color:var(--mut2); font-weight:600 }
#nav nav { display:flex; align-items:center; gap:26px; font-size:13.5px; color:var(--mut) }
#nav nav a { transition:color .2s } #nav nav a:hover { color:var(--ink) }
.btn {
  display:inline-flex; align-items:center; gap:8px; border-radius:11px; font-weight:650;
  padding:11px 20px; font-size:14px; border:1px solid transparent; cursor:pointer;
  transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, background .22s, border-color .22s;
}
.btn-p { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#FFFFFF; box-shadow:0 6px 22px rgba(192,68,192,.26) }
.btn-p:hover { transform:translateY(-2px); box-shadow:0 12px 34px rgba(192,68,192,.40) }
.btn-g { border-color:var(--line); color:var(--ink); background:rgba(255,255,255,.04) }
.btn-g:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px) }
@media (max-width:860px){ #nav nav { display:none } }
@media (max-width:520px){
  #nav { padding:0 16px } .brand small { display:none }
  .btn { padding:10px 15px; font-size:13px }
  h1 { font-size:clamp(30px,8.6vw,42px) }
  .hero-live { font-size:11.5px; padding:8px 13px }
  .vid-tag { display:none }
}
/* Sicherheitsnetz gegen horizontales Scrollen auf schmalen Geraeten */
html, body { max-width:100%; overflow-x:hidden }
.shot, .kb, .kb-f { max-width:100% }

/* ---------------- Hero mit echtem Plattform-Video ---------------- */
#hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden }
#hero video, #hero .kb {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; filter:saturate(.94) contrast(1.05);
}
#hero video { opacity:0; transition:opacity 1.2s ease }
#hero video.an { opacity:1 }
/* Ken-Burns-Sequenz aus echten Plattform-Ansichten */
.kb { overflow:hidden }
.kb-f {
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 2.2s ease-in-out; will-change:transform,opacity;
}
.kb-f.on { opacity:1; animation:kenburns 15s ease-out forwards }
@keyframes kenburns {
  from { transform:scale(1.02) translate3d(0,0,0) }
  to   { transform:scale(1.16) translate3d(-1.6%,-1.2%,0) }
}
@media (prefers-reduced-motion:reduce) { .kb-f.on { animation:none; transform:scale(1.04) } }
#hero::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(8,12,22,.95) 0%, rgba(8,12,22,.86) 36%, rgba(8,12,22,.42) 64%, rgba(8,12,22,.66) 100%),
    linear-gradient(to top, var(--bg) 3%, transparent 34%),
    linear-gradient(to bottom, rgba(8,12,22,.75) 0%, transparent 16%);
}
.hero-in { position:relative; z-index:2; width:100%; padding-top:66px }
.eyebrow {
  display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:700;
  letter-spacing:.19em; color:var(--accent); margin-bottom:22px; text-transform:uppercase;
}
.eyebrow::before { content:''; width:26px; height:1.5px; background:var(--accent) }
h1 {
  font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif;
  font-size:clamp(38px,6.4vw,80px); line-height:1.02; font-weight:800; letter-spacing:-.028em;
  max-width:15ch; margin-bottom:24px;
}
h1 .g { background:linear-gradient(105deg,var(--accent) 10%,var(--accent2) 90%); -webkit-background-clip:text; background-clip:text; color:transparent }
.lede { font-size:clamp(16px,1.55vw,19.5px); color:#C7D3E8; max-width:56ch; margin-bottom:34px; line-height:1.62 }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px }
.hero-live {
  display:inline-flex; align-items:center; gap:11px; font-size:12.5px; color:var(--mut);
  background:rgba(255,255,255,.045); border:1px solid var(--line); padding:9px 16px; border-radius:99px;
}
.dot { width:7px; height:7px; border-radius:50%; background:var(--gruen); box-shadow:0 0 0 0 rgba(62,213,152,.6); animation:puls 2.4s infinite }
@keyframes puls { 0%{box-shadow:0 0 0 0 rgba(62,213,152,.5)} 70%{box-shadow:0 0 0 11px rgba(62,213,152,0)} 100%{box-shadow:0 0 0 0 rgba(62,213,152,0)} }
.scroll-hint {
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:10.5px; letter-spacing:.17em; color:var(--mut2); text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-hint span { width:1px; height:34px; background:linear-gradient(var(--mut2),transparent); animation:sink 2.2s infinite }
@keyframes sink { 0%{opacity:0; transform:scaleY(.3)} 45%{opacity:1} 100%{opacity:0; transform:scaleY(1)} }
/* Hero-Legende: ohne sie sind die Punkte im Video bedeutungslos */
.hero-leg {
  position:absolute; right:26px; top:50%; transform:translateY(-50%); z-index:2;
  background:rgba(9,14,25,.82); border:1px solid var(--line); border-radius:13px;
  padding:16px 18px; backdrop-filter:blur(9px); width:296px;
  animation:legAuf 1.1s .8s cubic-bezier(.16,1,.3,1) both;
}
@keyframes legAuf { from { opacity:0 } to { opacity:1 } }
.hl-t { font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--mut2); font-weight:700; margin-bottom:11px }
.hl-r { display:flex; align-items:center; gap:9px; font-size:12.2px; color:#C2CEE4; margin:8px 0; line-height:1.35; white-space:nowrap }
.hl-r i { width:9px; height:9px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 2px rgba(0,0,0,.35) }
.hl-r i.ln { width:15px; height:3px; border-radius:2px }
.hl-r b { color:var(--ink) } .hl-m { color:var(--mut2); font-size:10.5px }
@media (max-width:1080px){ .hero-leg { display:none } }

.vid-tag {
  position:absolute; right:22px; bottom:22px; z-index:2; font-size:10.5px; color:var(--mut2);
  background:rgba(7,11,20,.6); border:1px solid var(--line); padding:5px 11px; border-radius:8px;
}

/* ---------------- Beweis-Band (Zahlen) ---------------- */
#zahlen { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg2); position:relative; z-index:3; scroll-margin-top:80px }
.zgrid { display:grid; grid-template-columns:repeat(6,1fr); gap:0 }
.z { padding:32px 18px; text-align:center; border-right:1px solid var(--line) }
.z:last-child { border-right:0 }
.z b { display:block; font-size:clamp(24px,2.9vw,38px); font-weight:800; color:var(--accent); letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.z span { font-size:11.5px; color:var(--mut); line-height:1.45; display:block; margin-top:5px }
@media (max-width:900px){ .zgrid { grid-template-columns:repeat(3,1fr) } .z:nth-child(3n){border-right:0} .z{border-bottom:1px solid var(--line)} }
@media (max-width:520px){ .zgrid { grid-template-columns:repeat(2,1fr) } .z:nth-child(3n){border-right:1px solid var(--line)} .z:nth-child(2n){border-right:0} }

/* ---------------- Sektionen ---------------- */
section { padding:clamp(70px,9vw,124px) 0; position:relative }
.kicker { font-size:11.5px; font-weight:700; letter-spacing:.19em; color:var(--accent); text-transform:uppercase; margin-bottom:15px }
h2 { font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif; font-size:clamp(28px,3.9vw,50px); line-height:1.1; font-weight:800; letter-spacing:-.025em; margin-bottom:16px }
h2 .g { color:var(--accent) }
.sub { font-size:clamp(15px,1.35vw,17.5px); color:var(--mut); max-width:62ch; line-height:1.62 }
h3 { font-size:19px; font-weight:700; margin-bottom:9px; letter-spacing:-.012em }

/* Screenshot-Showcase */
.shot {
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  background:var(--bg2); box-shadow:0 26px 70px rgba(0,0,0,.5);
  position:relative; transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;
}
.shot:hover { transform:translateY(-5px); box-shadow:0 34px 88px rgba(0,0,0,.62) }
.shot img { width:100% }
.shot-cap {
  position:absolute; left:0; right:0; bottom:0; padding:26px 22px 15px;
  background:linear-gradient(to top,rgba(7,11,20,.96),transparent);
  font-size:12.5px; color:#BECBE2;
}
.shot-cap b { color:var(--ink) }
.split { display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,5vw,66px); align-items:center }
.split.rev { grid-template-columns:.94fr 1.06fr }
@media (max-width:960px){ .split, .split.rev { grid-template-columns:1fr; gap:34px } .split.rev > *:first-child { order:2 } }

.liste { list-style:none; margin-top:22px; display:grid; gap:13px }
.liste li { display:flex; gap:12px; font-size:14.8px; color:#C2CEE4; line-height:1.55 }
.liste li::before { content:'✓'; color:var(--accent); font-weight:800; flex:0 0 auto; margin-top:1px }
.liste b { color:var(--ink) }

/* Karten-Raster */
.karten { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px }
@media (max-width:900px){ .karten { grid-template-columns:1fr } }
.karte {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px;
  transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, background .4s;
  overflow:hidden;            /* haelt den Glanz-Effekt (vanilla-tilt) im Rahmen */
}
.karte:hover { transform:translateY(-4px); border-color:rgba(192,68,192,.45); background:rgba(192,68,192,.05) }
.karte .ic { font-size:22px; margin-bottom:13px; display:block }
.karte p { font-size:13.8px; color:var(--mut); line-height:1.6 }
.karte .tag { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.11em; color:var(--accent); text-transform:uppercase; margin-bottom:9px }

/* Quellen-Chips */
.chips { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:26px }
.chip {
  font-size:12.5px; color:#B9C6DD; background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:99px; padding:8px 15px; transition:border-color .3s, color .3s;
}
.chip:hover { border-color:var(--accent); color:var(--accent) }
.chip.neu { border-color:rgba(192,68,192,.48); color:var(--accent) }
.chip.neu::after { content:' NEU'; font-size:9px; font-weight:800; letter-spacing:.09em; opacity:.85 }

/* Prozess */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:46px; counter-reset:s }
@media (max-width:860px){ .steps { grid-template-columns:repeat(2,1fr) } }
.step { position:relative; padding-top:52px }
.step::before {
  counter-increment:s; content:counter(s); position:absolute; top:0; left:0;
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#FFFFFF; font-weight:800; font-size:15px;
}
.step h3 { font-size:16.5px } .step p { font-size:13.4px; color:var(--mut); line-height:1.6 }

/* Vergleichs-/Beleg-Box */
.beleg {
  background:linear-gradient(135deg,rgba(192,68,192,.08),rgba(192,68,192,.03));
  border:1px solid rgba(192,68,192,.26); border-radius:var(--r); padding:28px 30px; margin-top:38px;
}
.beleg h3 { color:var(--accent) }
.beleg p { font-size:14.4px; color:#C7D3E8; line-height:1.66 }

/* Tabelle (Gefahren-Abdeckung) */
.tab { width:100%; border-collapse:collapse; margin-top:26px; font-size:13.6px }
.tab th { text-align:left; padding:11px 14px; background:rgba(255,255,255,.05); color:var(--mut); font-weight:650; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase }
.tab td { padding:12px 14px; border-top:1px solid var(--line); color:#C2CEE4 }
.tab td b { color:var(--ink) }
.ok { color:var(--gruen); font-weight:650 } .warn { color:var(--orange); font-weight:650 } .na { color:var(--mut2) }

/* CTA */
#cta { text-align:center; background:radial-gradient(ellipse at 50% 0%, rgba(192,68,192,.10), transparent 62%) }
#cta h2 { max-width:18ch; margin:0 auto 18px } #cta .sub { margin:0 auto 32px }

footer { border-top:1px solid var(--line); padding:36px 0; font-size:12.5px; color:var(--mut2) }
.frow { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap }
footer b { color:var(--mut) }