/* Startseite: Hero, animierte Demo, Vertrauen, Funktionskarten, Zähler */
.hero{padding-bottom:8px}
.hero .knoepfe{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* Demo */
.demo{margin:56px auto 0;max-width:760px}
.fenster{background:linear-gradient(180deg,#1d1e20,#161719);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow),0 0 80px rgba(31,243,205,.08);overflow:hidden;text-align:left}
.titel{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.titel i{width:11px;height:11px;border-radius:50%;background:var(--surface-2)}
.titel span{margin-left:10px;color:var(--text-3);font:500 13px var(--mono)}
.koerper{height:230px;padding:22px 24px;font:500 15px/1.7 var(--mono);color:var(--text);overflow:hidden}
.cursor{display:inline-block;width:8px;height:1.1em;margin-left:2px;vertical-align:text-bottom;background:var(--accent);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.tasten{display:flex;gap:8px;justify-content:center;align-items:center;min-height:52px;margin-top:18px;color:var(--text-3);font-size:14px}
.taste{padding:5px 12px;border:1px solid var(--border);border-bottom-width:3px;border-radius:8px;background:var(--surface);color:var(--text);font:500 14px var(--mono);transition:all .15s}
.taste.druck{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);transform:translateY(2px);border-bottom-width:1px;box-shadow:0 0 20px rgba(31,243,205,.3)}
.punkte{display:flex;gap:8px;justify-content:center;margin-top:6px}
.punkte button{border:1px solid var(--border);background:var(--surface);color:var(--text-2);border-radius:999px;padding:6px 14px;font:500 13px var(--font);cursor:pointer;transition:all .2s}
.punkte button[aria-pressed=true]{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.hinweis{margin-top:10px;color:var(--text-3);font-size:13px}

/* Demo: Szenen */
.datei{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--text-2)}
.datei.aktiv{background:var(--surface-2);color:var(--text)}
.datei.neu{background:var(--accent-soft);color:var(--text);outline:1px solid var(--accent);animation:rein .5s ease both}
.datei .dat{color:var(--accent)}
.ablauf{display:grid;gap:8px}
.schritt{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;color:var(--text-2);transition:all .3s}
.schritt b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--border);font-size:12px;color:var(--text-3)}
.schritt.lauf{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}
.schritt.fertig{color:var(--text)}
.schritt.fertig b{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* Raster mit Karten und Mauslicht */
.kopf{max-width:640px;margin-bottom:32px}.kopf h2{margin-top:8px}.kopf p{margin-top:12px}
.raster{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.raster.zwei{grid-template-columns:repeat(2,1fr)}
.funktion{position:relative;overflow:hidden;transition:transform .25s,border-color .25s}
.funktion::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--px,50%) var(--py,50%),rgba(31,243,205,.16),transparent 70%)}
.funktion:hover{transform:translateY(-4px);border-color:rgba(31,243,205,.45)}
.funktion:hover::before{opacity:1}
.funktion h3{font-size:1.1rem;font-weight:600;margin:14px 0 6px}
.funktion p{color:var(--text-2);font-size:15px;line-height:1.55}
.funktion a{color:var(--accent)}
.sym{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.sym svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center}
.zahl{font:500 clamp(2.6rem,6vw,4rem)/1 var(--mono);color:var(--accent);text-shadow:0 0 40px rgba(31,243,205,.35)}
.zahlen p{color:var(--text-2);margin-top:8px;font-size:15px}

.abschluss{text-align:center;padding:56px 24px;background:radial-gradient(600px 260px at 50% 0,rgba(31,243,205,.14),transparent 70%),linear-gradient(180deg,var(--surface),#16171a)}
.abschluss p{margin:12px auto 26px}

@media(max-width:860px){.raster,.raster.zwei,.zahlen{grid-template-columns:1fr}.koerper{height:260px}}