/* Startseite „Was die App kann" — dieselbe Datei im Sende-Prüfer und im
   Auslieferungsprüfer. Farben setzt jede Seite über --grund und --akzent. */
:root{--grund:#0b1a26;--flaeche:#12263a;--text:#e8f1f7;--leise:#a9bccb;--akzent:#35c3c1;--warn:#f2b544;--rot:#ef6f6f;--linie:rgb(255 255 255/.12);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--text);font:17px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--akzent)}
.w{max-width:1040px;margin:0 auto;padding:0 18px}
.kopf{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--grund) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.kopf .w{display:flex;align-items:center;gap:12px;min-height:56px}
.kopf b{font-size:1.05rem;flex:1;min-width:0;display:flex;align-items:center;gap:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kopf b img{width:32px;height:32px;border-radius:8px}
.knopf{white-space:nowrap;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;background:var(--akzent);color:#061018;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:1rem}
.knopf.leise{background:transparent;color:var(--text);border:1px solid var(--linie)}
.held{padding:56px 0 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.held h1{font-size:clamp(2rem,5.2vw,3.3rem);line-height:1.1;margin:0 0 16px}
.held h1 em{font-style:normal;color:var(--akzent)}
.held p.sub{font-size:1.15rem;color:var(--leise);margin:0 0 24px}
.held .bild{border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgb(0 0 0/.45)}
.reihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.haken{display:flex;gap:8px;align-items:center;color:var(--leise);font-size:.95rem;margin-top:14px}
.haken input{width:20px;height:20px;accent-color:var(--akzent)}
section{scroll-margin-top:64px;padding:44px 0;border-top:1px solid var(--linie)}
section h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:0 0 8px;line-height:1.2}
section>.w>p.vor{color:var(--leise);margin:0 0 26px;max-width:70ch}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:18px;padding:20px}
.karte h3{margin:0 0 6px;font-size:1.1rem}
.karte p{margin:0;color:var(--leise)}
.karte .sym{font-size:1.7rem;display:block;margin-bottom:6px}
.zeige{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin:26px 0}
.zeige:nth-child(even) .bild{order:2}
.zeige .bild{border-radius:14px;overflow:hidden;border:1px solid var(--linie);background:var(--flaeche)}
.zeige h3{margin:0 0 8px;font-size:1.25rem}
.zeige p{margin:0;color:var(--leise)}
.tun{display:grid;gap:14px}
.tun details{background:var(--flaeche);border:1px solid var(--linie);border-left:4px solid var(--warn);border-radius:14px;padding:4px 18px}
.tun details.rot{border-left-color:var(--rot)}
.tun summary{cursor:pointer;font-weight:700;padding:12px 0;list-style-position:outside}
.tun ol{margin:0 0 14px;padding-left:22px}
.tun li{margin:6px 0}
.tun .heisst{color:var(--leise);margin:0 0 8px}
.grenzen li{margin:8px 0;color:var(--leise)}
.grenzen b{color:var(--text)}
.schwester{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;background:var(--flaeche);border:1px solid var(--linie);border-radius:20px;padding:22px}
.schwester img{width:120px;height:120px;border-radius:24px}
.schluss{text-align:center;padding:56px 0}
.schluss h2{margin-bottom:18px}
.schluss .reihe{justify-content:center}
.fuss{border-top:1px solid var(--linie);padding:22px 0 40px;color:var(--leise);font-size:.92rem}
.fuss a{color:var(--leise)}
@media (max-width:760px){
  .held{grid-template-columns:1fr;padding-top:30px;gap:24px}
  .held .bild{max-width:340px}
  .zeige{grid-template-columns:1fr;gap:12px}
  .zeige:nth-child(even) .bild{order:0}
  .schwester{grid-template-columns:1fr}
  .schwester img{width:88px;height:88px}
  .kopf .knopf{padding:0 14px}
  .kopf .w{gap:8px}
  .kopf b{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[hidden]{display:none!important}