/* Rechtsseiten: Himmel der App im Hintergrund, Text auf dunklem Glas, gleiche Schrift 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:#4f7fbf;                       /* Himmelblau, falls das Bild fehlt */
  --ink:#f2f4f8;
  --ink-dim:rgba(242,244,248,.74);
  --line:rgba(255,255,255,.14);
  --glass:rgba(12,16,26,.66);
  --glass-line:rgba(255,255,255,.16);
  --todo-bg:rgba(255,196,120,.14);
  --todo-line:rgba(255,196,120,.6);
}
html{background:var(--bg);color:var(--ink)}
body{margin:0;min-height:100vh;background:transparent;
  font:400 16px/1.6 'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}

/* Hintergrund: der Himmel der App (fest, scrollt nicht mit). Als eigene Ebene statt
   background-attachment:fixed, weil das auf iOS nicht zuverlässig funktioniert.
   Darunter ein Verlauf als Rückfall, darüber ein leichter Schleier für ruhigen Kontrast. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(18,32,64,.28) 0%,rgba(18,32,64,.08) 45%,rgba(14,18,28,.30) 100%),
    url(../img/og-image.jpg) 62% 30% / cover no-repeat,
    radial-gradient(ellipse 60% 40% at 66% 30%,rgba(255,252,240,.55),transparent 70%),
    linear-gradient(180deg,#3f73b8 0%,#7fa8da 55%,#c9dbef 100%);
}

/* Inhalt auf dunklem Glas, wie das Menü der App */
main{
  max-width:680px;box-sizing:border-box;margin:48px auto 56px;padding:32px 36px 28px;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:22px;
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 10px 40px rgba(10,20,40,.18);
}
@media (max-width:720px){
  main{margin:16px;padding:24px 20px 20px;border-radius:18px}
}
.back{display:inline-block;margin-bottom:24px;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:40px;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)}