:root {
  --nacht:#0b0614; --tinte:#140a22; --kachel:#1c1029; --rand:rgba(255,255,255,.08);
  --gold:#ffd54d; --amber:#ff9a3d; --schrift:#f5f0fb; --neben:#b7a6d6; --grau:#8b7ab0;
  --blau:#4fc3ff; --magenta:#ff4fd8; --gruen:#6dff6d;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,sans-serif;
  background:var(--nacht); color:var(--schrift);
  line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ── Navigation (Frosted Glass) */
nav {
  position:fixed; top:0; left:0; right:0; z-index:10;
  background:rgba(11,6,20,.72); backdrop-filter:saturate(1.8) blur(20px);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
nav .zeile { max-width:61rem; margin:0 auto; padding:.65rem 1.4rem;
  display:flex; align-items:center; justify-content:space-between; }
nav .marke { display:flex; align-items:center; gap:.5rem; font-weight:600;
  font-size:1rem; color:var(--schrift); text-decoration:none; }
nav .marke svg { width:1.15rem; height:1.15rem; }
nav a.mini {
  font-size:.8rem; background:var(--gold); color:#140a22; font-weight:600;
  padding:.32rem 1rem; border-radius:1rem; text-decoration:none;
}
nav a.mini:hover { background:#ffe27d; }

/* ── Held */
.held { padding:7.5rem 1.4rem 3rem; text-align:center; }
.vorzeile { font-size:1.05rem; font-weight:600; color:var(--amber);
  letter-spacing:.01em; margin-bottom:.6rem; }
h1 {
  font-size:clamp(3rem,9vw,5.5rem); font-weight:700; letter-spacing:-.03em;
  line-height:1.04; margin-bottom:1rem;
  background:linear-gradient(135deg,var(--gold) 20%,var(--amber) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.held .satz { font-size:clamp(1.25rem,3vw,1.7rem); font-weight:500;
  color:var(--schrift); letter-spacing:-.01em; }
.held .neben { font-size:1.05rem; color:var(--neben); margin-top:.5rem; }
.links { margin-top:1.6rem; display:flex; gap:1.8rem; justify-content:center;
  align-items:center; flex-wrap:wrap; }
a.laden {
  background:var(--gold); color:#140a22; font-weight:600; font-size:1.05rem;
  padding:.75rem 1.6rem; border-radius:2rem; text-decoration:none;
  transition:background .15s ease;
}
a.laden:hover { background:#ffe27d; }
a.pfeil { color:var(--blau); font-size:1.05rem; text-decoration:none; }
a.pfeil:hover { text-decoration:underline; }
.klein { display:block; margin-top:1rem; font-size:.85rem; color:var(--grau); }

/* ── Telefon */
.buehne { display:flex; justify-content:center; padding:2.5rem 1.4rem 5rem; }
.telefon {
  width:min(19rem,74vw); aspect-ratio:444/962; border-radius:3rem; padding:.6rem;
  background:linear-gradient(160deg,#2c2140,#0f0a1a);
  box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 40px 90px rgba(0,0,0,.7),
             0 0 90px rgba(255,154,61,.12);
}
.telefon video { width:100%; height:100%; object-fit:cover; border-radius:2.45rem; display:block; }

/* ── Aussagen-Sektionen */
section { padding:5.5rem 1.4rem; }
section.dunkler { background:var(--tinte); }
.mitte { max-width:52rem; margin:0 auto; text-align:center; }
h2 {
  font-size:clamp(2rem,5.5vw,3.2rem); font-weight:700; letter-spacing:-.02em;
  line-height:1.1; margin-bottom:1.1rem;
}
h2 .goldig {
  background:linear-gradient(135deg,var(--gold),var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mitte p { font-size:1.15rem; color:var(--neben); max-width:38rem; margin:0 auto; }

/* ── Kacheln */
.gitter { max-width:61rem; margin:3rem auto 0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1.1rem; }
.kachel {
  background:var(--kachel); border:1px solid var(--rand); border-radius:1.75rem;
  padding:2.2rem 1.9rem; text-align:left;
}
.kachel svg { width:2.1rem; height:2.1rem; margin-bottom:1rem; }
.kachel h3 { font-size:1.2rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.4rem; }
.kachel p { font-size:.98rem; color:var(--neben); }

/* ── Screenshots */
.schau { display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; margin-top:3rem; }
.schau img {
  width:min(16.5rem,78vw); border-radius:2rem;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 30px 60px rgba(0,0,0,.6);
}

/* ── Abschluss */
.finale { text-align:center; padding:6rem 1.4rem; }
.finale h2 { margin-bottom:1.6rem; }

/* ── Fusszeile */
footer {
  border-top:1px solid rgba(255,255,255,.07); padding:2rem 1.4rem 2.6rem;
  text-align:center; font-size:.8rem; color:var(--grau);
}
footer a { color:var(--neben); text-decoration:none; margin:0 .65rem; }
footer a:hover { color:var(--gold); }
footer .zeile2 { margin-top:.7rem; }

/* App-Icon im Held: Apple-Squircle-Anmutung */
.appicon {
  width:7.2rem; height:7.2rem; border-radius:22.5%; display:block; margin:0 auto 1.4rem;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 18px 40px rgba(0,0,0,.55), 0 0 60px rgba(255,154,61,.22);
}
nav .marke img { width:1.35rem; height:1.35rem; border-radius:22.5%; }

/* ── Scroll-Reveal */
[data-reveal] { opacity:0; transform:translateY(42px) scale(.97);
  transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
[data-reveal="tief"] { transform:translateY(72px) scale(.94); }
[data-reveal].sichtbar { opacity:1; transform:none; }
.gitter .kachel:nth-child(2) { transition-delay:.08s; }
.gitter .kachel:nth-child(3) { transition-delay:.16s; }
.gitter .kachel:nth-child(4) { transition-delay:.24s; }