:root {
    --brand-top:#1F69F0; --brand-bot:#17CCC4; --accent:#1668e6;
    --bg:#f2f2f7; --fg:#1c1c1e; --muted:#6b6b70;
    --card:#ffffff; --line:#e6e6ea; --chip:#eef0f5;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --accent:#5aa2ff; --bg:#000000; --fg:#ececf0; --muted:#9a9aa2;
      --card:#1c1c1e; --line:#2a2b30; --chip:#26262b;
    }
  }
  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  body { margin:0; background:var(--bg); color:var(--fg);
    font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
  .rounded { font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }

  /* Hero im App-Look (Splash-Verlauf) */
  .hero { background:linear-gradient(160deg,var(--brand-top),var(--brand-bot));
    color:#fff; text-align:center; padding:54px 20px 46px; }
  .hero img { width:104px; height:104px; border-radius:24px;
    box-shadow:0 10px 30px rgba(0,0,0,.28); }
  .hero h1 { margin:18px 0 4px; font-size:2rem; font-weight:800; letter-spacing:-.02em; }
  .hero .sub { margin:0; font-size:1.02rem; color:rgba(255,255,255,.9); }
  .hero .meta { margin:14px 0 0; font-size:.85rem; color:rgba(255,255,255,.8); }

  main { max-width:780px; margin:0 auto; padding:8px 16px 72px; }
  .lead { color:var(--muted); font-size:.98rem; margin:22px 4px 6px; }

  /* TOC als Pillen wie die Ordner-Chips */
  .toc { display:flex; flex-wrap:wrap; gap:8px; margin:14px 4px 4px; }
  .toc a { background:var(--chip); color:var(--fg); text-decoration:none;
    padding:8px 15px; border-radius:999px; font-size:.92rem; font-weight:600; }
  .toc a:hover { background:color-mix(in srgb,var(--accent) 18%,var(--chip)); }

  /* Sektionen als iOS-Karten */
  section { background:var(--card); border:1px solid var(--line);
    border-radius:18px; padding:20px 20px 8px; margin:16px 0; }
  h2 { font-size:1.35rem; margin:2px 0 8px; letter-spacing:-.01em; }
  h3 { font-size:1.03rem; margin:20px 0 4px; }
  p, li { color:var(--fg); }
  .muted { color:var(--muted); font-size:.9rem; }
  a { color:var(--accent); text-decoration:none; }
  a:hover { text-decoration:underline; }
  ul { padding-left:1.2em; }
  li { margin:3px 0; }
  .addr { white-space:pre-line; background:var(--chip); border:1px solid var(--line);
    border-radius:12px; padding:12px 16px; }
  .backtop { font-size:.85rem; margin-top:14px; }
  footer { text-align:center; color:var(--muted); font-size:.88rem; padding:8px 16px 40px; }