:root {
  --grund:#05070f; --flaeche:#0b1020; --karte:#101830; --rand:rgba(148,180,255,.12);
  --schrift:#eef2ff; --neben:#a8b3d6; --grau:#7d88ad;
  --cyan:#4fd8ff; --violett:#8b5cf6; --gruen:#3ddc97;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
  background:var(--grund); color:var(--schrift); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ── Hintergrund: neuronales Netz (Canvas) + wandernde Farbnebel */
#netz { position:fixed; inset:0; width:100%; height:100%; z-index:-2;
  pointer-events:none; }
body::before, body::after { content:""; position:fixed; z-index:-1;
  width:44rem; height:44rem; border-radius:50%; filter:blur(90px);
  pointer-events:none; opacity:.55; }
body::before { background:radial-gradient(circle, rgba(139,92,246,.16), transparent 65%);
  top:-14rem; right:-10rem; animation:nebel1 26s ease-in-out infinite alternate; }
body::after { background:radial-gradient(circle, rgba(79,216,255,.12), transparent 65%);
  bottom:-16rem; left:-12rem; animation:nebel2 32s ease-in-out infinite alternate; }
@keyframes nebel1 { from { transform:translate(0,0) scale(1); }
  to { transform:translate(-9rem,7rem) scale(1.15); } }
@keyframes nebel2 { from { transform:translate(0,0) scale(1.1); }
  to { transform:translate(8rem,-6rem) scale(.95); } }
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation:none; }
}

/* ── Navigation */
nav { position:fixed; inset:0 0 auto 0; z-index:10;
  background:rgba(5,7,15,.75); backdrop-filter:saturate(1.6) blur(18px);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06); }
nav .zeile { max-width:66rem; margin:0 auto; padding:.8rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.wortmarke { font-weight:800; font-size:1.15rem; letter-spacing:.14em;
  color:var(--schrift); text-decoration:none; }
.wortmarke b {
  background:linear-gradient(120deg,var(--cyan),var(--violett));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
nav .punkte { display:flex; gap:1.6rem; align-items:center; }
nav .punkte a { color:var(--neben); text-decoration:none; font-size:.92rem; }
nav .punkte a:hover { color:var(--schrift); }
nav a.cta { background:linear-gradient(120deg,var(--cyan),var(--violett));
  color:#04101c; font-weight:700; padding:.42rem 1.1rem; border-radius:1.4rem;
  text-decoration:none; font-size:.9rem; }
@media (max-width:44rem){ nav .punkte a:not(.cta){ display:none; } }

/* ── Held */
.held { position:relative; text-align:center; padding:9.5rem 1.5rem 6rem;
  background:
    radial-gradient(46rem 30rem at 78% -8%, rgba(139,92,246,.20), transparent 60%),
    radial-gradient(40rem 28rem at 12% 4%, rgba(79,216,255,.14), transparent 60%); }
.vorzeile { display:inline-block; font-size:.85rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cyan);
  border:1px solid rgba(79,216,255,.35); border-radius:2rem;
  padding:.3rem 1rem; margin-bottom:1.4rem; }
h1 { font-size:clamp(2.4rem,6.5vw,4.2rem); font-weight:800; letter-spacing:-.025em;
  line-height:1.08; max-width:46rem; margin:0 auto 1.2rem; }
h1 .farbig { background:linear-gradient(120deg,var(--cyan),var(--violett));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.held p { font-size:1.15rem; color:var(--neben); max-width:36rem; margin:0 auto 2rem; }
.knoepfe { display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; align-items:center; }
a.haupt { background:linear-gradient(120deg,var(--cyan),var(--violett));
  color:#04101c; font-weight:700; font-size:1.02rem; padding:.85rem 1.9rem;
  border-radius:2rem; text-decoration:none; transition:filter .15s ease; }
a.haupt:hover { filter:brightness(1.12); }
a.zweit { color:var(--cyan); text-decoration:none; font-size:1.02rem; }
a.zweit:hover { text-decoration:underline; }

/* ── Sektionen */
section { padding:5.5rem 1.5rem; }
section.getönt { background:rgba(11,16,32,.62); }
.mitte { max-width:66rem; margin:0 auto; }
.kopf { text-align:center; max-width:44rem; margin:0 auto 3rem; }
h2 { font-size:clamp(1.8rem,4.5vw,2.6rem); font-weight:800; letter-spacing:-.02em;
  margin-bottom:.8rem; }
.kopf p { color:var(--neben); font-size:1.08rem; }

/* ── Karten */
.gitter { display:grid; grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr)); gap:1.1rem; }
.karte { background:var(--karte); border:1px solid var(--rand);
  border-radius:1.4rem; padding:1.9rem 1.7rem; }
.karte svg { width:2rem; height:2rem; margin-bottom:.9rem; }
.karte h3 { font-size:1.12rem; font-weight:700; margin-bottom:.45rem; }
.karte p { font-size:.95rem; color:var(--neben); }

/* ── Produkt */
.produkt { display:flex; gap:2.5rem; align-items:center; justify-content:center;
  flex-wrap:wrap; }
.produkt img.icon { width:8.5rem; height:8.5rem; border-radius:22.5%;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 20px 44px rgba(0,0,0,.55); }
.produkt video.handy { width:11rem; max-width:38vw; border-radius:1.6rem;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 24px 54px rgba(0,0,0,.6);
  opacity:0; transform:translateX(46px) scale(.94);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.produkt video.handy.sichtbar { opacity:1; transform:none; }
.produkt .text { max-width:26rem; }
.produkt .text h3 { font-size:1.5rem; font-weight:800; margin-bottom:.5rem; }
.produkt .text p { color:var(--neben); margin-bottom:1.1rem; }
.badge { display:inline-block; font-size:.78rem; font-weight:700;
  color:var(--gruen); border:1px solid rgba(61,220,151,.4);
  padding:.18rem .7rem; border-radius:1rem; margin-bottom:.7rem; }
.hinweis { text-align:center; color:var(--grau); margin-top:2.4rem; font-size:.95rem; }

/* ── Technik-Stack */
.stackgitter { display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.1rem; }
.stackgitter .karte h3 { margin-bottom:.8rem; }
.chips { display:flex; flex-wrap:wrap; gap:.45rem; }
.chip { font-size:.82rem; color:var(--neben); border:1px solid var(--rand);
  background:rgba(148,180,255,.06); border-radius:1.2rem; padding:.28rem .75rem;
  white-space:nowrap; }

/* ── Projektkarten (projekte.html) */
.projektkarte { max-width:44rem; margin:0 auto; padding:2.2rem 2rem; }
.projektkarte h3 { font-size:1.35rem; font-weight:800; margin:.55rem 0 .6rem; }
.projektkarte p { color:var(--neben); margin-bottom:1.1rem; }
.projektkarte p b { color:var(--schrift); }
.skizze { display:block; width:100%; height:auto; margin:.5rem 0 1.2rem;
  background:rgba(5,7,15,.45); border:1px solid var(--rand);
  border-radius:1rem; padding:1rem; box-sizing:border-box; }

/* ── Prinzipien */
.prinzip { display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 0;
  border-bottom:1px solid rgba(255,255,255,.06); }
.prinzip:last-child { border-bottom:none; }
.prinzip .nr { font-weight:800; font-size:1.1rem; min-width:2.4rem;
  background:linear-gradient(120deg,var(--cyan),var(--violett));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.prinzip h3 { font-size:1.05rem; margin-bottom:.2rem; }
.prinzip p { color:var(--neben); font-size:.95rem; }
.schmal { max-width:44rem; margin:0 auto; }

/* ── Kontakt */
.kontakt { text-align:center; }
.kontakt p { color:var(--neben); max-width:34rem; margin:0 auto 1.8rem; }

/* ── Fusszeile */
footer { border-top:1px solid rgba(255,255,255,.07);
  padding:2rem 1.5rem 2.6rem; text-align:center; font-size:.82rem; color:var(--grau); }
footer a { color:var(--neben); text-decoration:none; margin:0 .6rem; }
footer a:hover { color:var(--cyan); }
footer .zeile2 { margin-top:.6rem; }
footer .version { margin-top:.35rem; font-size:.74rem; color:rgba(125,136,173,.7); }

/* ── KI-Verbrauch (Statistik-Sektion, Zahlen zählen beim Scrollen hoch) */
.statgross { display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1.1rem; margin-bottom:1.1rem; }
.statklein { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1.1rem; }
.statbox { background:var(--karte); border:1px solid var(--rand);
  border-radius:1.4rem; padding:2rem 1.6rem; text-align:center; }
.statbox.haupt1 { padding:2.6rem 1.6rem;
  background:linear-gradient(160deg, rgba(79,216,255,.09), rgba(139,92,246,.09)), var(--karte); }
.statwert { display:block; font-size:clamp(2rem,4.5vw,3rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg,var(--cyan),var(--violett));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.statwert.klein { font-size:clamp(1.3rem,2.6vw,1.7rem); }
.statname { display:block; margin-top:.55rem; color:var(--neben); font-size:.92rem; }
.statname em { display:block; font-style:normal; color:var(--grau); font-size:.82rem; margin-top:.15rem; }

/* ── Scroll-Reveal */
[data-reveal] { opacity:0; transform:translateY(38px);
  transition:opacity .75s cubic-bezier(.2,.6,.2,1), transform .75s cubic-bezier(.2,.6,.2,1); }
[data-reveal].sichtbar { opacity:1; transform:none; }
.gitter .karte:nth-child(2) { transition-delay:.07s; }
.gitter .karte:nth-child(3) { transition-delay:.14s; }
.gitter .karte:nth-child(4) { transition-delay:.21s; }