/* Rechtsseiten: schlicht, lesbar, gleiche Schrift und Farben wie die App. */
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:300 500;font-display:swap;
  src:url(../fonts/hanken-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';font-style:normal;font-weight:300 500;font-display:swap;
  src:url(../fonts/hanken-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  --bg:#0e121c;
  --ink:#f2f4f8;
  --ink-dim:rgba(242,244,248,.68);
  --line:rgba(255,255,255,.14);
  --todo-bg:rgba(255,196,120,.12);
  --todo-line:rgba(255,196,120,.55);
}
html{background:var(--bg);color:var(--ink)}
body{margin:0;background:linear-gradient(180deg,#1b2a44 0,#0e121c 420px) no-repeat,var(--bg);
  font:400 16px/1.6 'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
main{max-width:680px;margin:0 auto;padding:40px 16px 64px}
.back{display:inline-block;margin-bottom:28px;color:var(--ink-dim);font-size:14px;text-decoration:none}
.back:hover{color:var(--ink)}
h1{margin:0 0 8px;font-size:28px;font-weight:400;letter-spacing:.005em}
h2{margin:32px 0 8px;font-size:18px;font-weight:500}
p,li{color:var(--ink-dim)}
a{color:var(--ink);text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}
.todo{margin:20px 0;padding:12px 16px;border-radius:12px;background:var(--todo-bg);border:1px dashed var(--todo-line);color:var(--ink)}
.todo strong{font-weight:500}
.ph{background:var(--todo-bg);border-radius:4px;padding:0 4px;color:var(--ink)}
footer{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;display:flex;flex-wrap:wrap;gap:4px 16px}
footer a{color:var(--ink-dim);text-decoration:none}
footer a:hover,footer a[aria-current]{color:var(--ink)}
