/* ============================================================
   SPELLR — Stil
   ------------------------------------------------------------
   Hausmuster wie die anderen Werkzeuge: fast schwarzer Grund,
   Clash Display fuer Titel, JetBrains Mono fuer Technisches,
   eine Akzentfarbe.

   ZU DEN ZWEI BLAUS: #0B1BEC ist der gemessene Ton aus dem
   App-Icon. Gegen den Seitengrund kommt er nur auf 2,27:1 und
   ist damit als Textfarbe unbrauchbar (WCAG verlangt 4,5:1).
   Deshalb traegt er nur Flaechen und Leuchten, waehrend
   #6E7BFF (5,65:1, nachgemessen) Text und Rahmen macht. Wer
   das zusammenlegen will, prueft vorher den Kontrast.
   ============================================================ */
:root{
  --bg:#08080d;
  --surface:rgba(16,16,24,0.92);
  --glass:rgba(110,123,255,0.06);
  --border:rgba(110,123,255,0.14);
  --border-h:rgba(110,123,255,0.38);
  --accent:#6E7BFF;        /* Text, Rahmen — 5,65:1 */
  --accent-deep:#0B1BEC;   /* nur Flaeche und Leuchten — Icon-Ton */
  --warn:#FBBF24;
  --text:#F1F5F9;
  --text-d:#CBD5E1;
  --text-m:#94A3B8;
  --text-f:#8792A5;
  --clash:'Clash Display',sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --radius:10px;
}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  line-height:1.6;min-height:100vh;overflow-x:hidden}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#0b0b12;
  padding:12px 16px;border-radius:0 0 var(--radius) 0;font-family:var(--mono);font-size:13px;z-index:50}
.skip-link:focus{left:0}

.wrap{max-width:760px;margin:0 auto;padding:16px 20px 56px}

/* ── Kopf ── */
.hdr{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.hdr-back{background:none;border:1px solid var(--border);border-radius:8px;color:var(--text-m);
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:18px;flex-shrink:0;transition:border-color .2s,color .2s}
.hdr-back:hover{border-color:var(--border-h);color:var(--text)}
.hdr-titles{flex:1;min-width:0}
.hdr-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-f)}
.lang-toggle{display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;flex-shrink:0}
.lang-btn{background:none;border:none;color:var(--text-m);font-family:var(--mono);font-size:11px;
  padding:7px 11px;cursor:pointer;transition:background .2s,color .2s}
.lang-btn.active{background:var(--glass);color:var(--accent)}

/* ── Kopfbereich ── */
.hero{text-align:center;padding:8px 0 40px;position:relative}
.hero::before{content:'';position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(11,27,236,.20) 0%,transparent 68%)}
.hero-icon{position:relative;width:160px;height:160px;display:block;margin:0 auto 18px}
.hero-name{position:relative;font-family:var(--clash);font-size:clamp(38px,9vw,58px);
  font-weight:700;letter-spacing:.03em;margin:0}
.hero-claim{position:relative;font-family:var(--clash);font-size:clamp(17px,3.4vw,21px);
  font-weight:500;color:var(--accent);margin:6px 0 0}
.hero-lede{position:relative;max-width:56ch;margin:16px auto 0;color:var(--text-d);font-size:15px}

/* ── Download ── */
/* [hidden] ist im Browser-Stylesheet nur display:none — jede Autoren-Regel mit
   eigenem display schlaegt das. .dl-btn hat display:inline-flex, also blieb der
   Knopf beim Zustand 'none' als leere blaue Flaeche stehen. Gefunden im
   Screenshot, nicht im DOM: element.hidden war die ganze Zeit korrekt true. */
[hidden]{display:none!important}
.dl{position:relative;margin-top:30px}
.dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 30px;border-radius:12px;
  background:var(--accent-deep);color:#fff;text-decoration:none;
  font-family:var(--mono);font-size:14px;letter-spacing:.05em;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 34px rgba(11,27,236,.42);
  transition:transform .15s,box-shadow .2s}
.dl-btn:hover{transform:translateY(-1px);box-shadow:0 0 46px rgba(11,27,236,.6)}
.dl-btn:active{transform:translateY(0)}
.dl-state{font-family:var(--mono);font-size:11px;color:var(--text-f);
  margin:14px auto 0;max-width:52ch}
.dl-state--warn{color:var(--warn)}
.dl-req{font-family:var(--mono);font-size:10.5px;color:var(--text-f);margin:8px 0 0;opacity:.85}

/* ── Abschnitte ── */
main > section + section{margin-top:44px;padding-top:36px;border-top:1px solid var(--border)}
h2{font-family:var(--clash);font-size:19px;font-weight:600;margin:0 0 18px;letter-spacing:.01em}

.steps-list{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:14px}
.steps-list li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:14px;
  align-items:baseline}
.steps-list li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);
  font-size:11px;color:var(--accent);padding-top:2px}
/* Beide Textteile gehoeren in Spalte 2. Ohne die Angabe landet .step-v in
   Zeile 2, Spalte 1 — also in den 34 Pixeln der Ziffer — und bricht dort
   wortweise um. Im Screenshot sofort sichtbar, im DOM nicht. */
.step-k{grid-column:2;font-family:var(--clash);font-size:15px;font-weight:600}
.step-v{grid-column:2;color:var(--text-m);font-size:14px;margin-top:2px}

.feat-list,.keys-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.feat-list li,.keys-list li{position:relative;padding-left:20px;color:var(--text-d);font-size:14.5px}
.feat-list li::before,.keys-list li::before{content:'';position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--accent)}
.keys{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;margin-top:44px}
.keys h2{margin-top:0}
.keys p{color:var(--text-m);font-size:14.5px;margin:0 0 16px}
.keys-list{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

.ios p{color:var(--text-m);font-size:14.5px;margin:0}

.ftr{margin-top:44px;padding-top:20px;border-top:1px solid var(--border);
  font-size:11.5px;color:var(--text-f);line-height:1.7}

/* ── Klein ── */
@media (max-width:600px){
  .wrap{padding:14px 18px 44px}
  .hero{padding-bottom:32px}
  .hero-icon{width:124px;height:124px}
  .hero::before{width:250px;height:250px}
  .dl-btn{width:100%;padding:0 20px}
  .keys{padding:20px 18px}
  .keys-list{grid-template-columns:1fr}
}
@media (hover:none) and (pointer:coarse){
  .lang-btn,.hdr-back{min-height:44px}
  .lang-btn{min-width:44px}
  .hdr-back{width:44px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .dl-btn:hover{transform:none}
}