:root {
    --bg: #fbfaf8;
    --bg-raised: #ffffff;
    --bg-sunken: #f2efea;
    --ink: #1c1a17;
    --ink-soft: #56514a;
    --ink-faint: #837d74;
    --rule: #e2ddd5;
    --accent: #017cc9;        /* brand blue: surfaces, buttons, focus rings */
    --accent-text: #0169a8;   /* same hue, darkened for small text on light bg */
    --accent-ink: #ffffff;
    --code-bg: #1e1c1a;
    --code-ink: #e9e4dc;
    --code-comment: #9a9186;
    --code-accent: #8cc4f2;
    --measure: 68ch;
    --radius: 10px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #161513;
      --bg-raised: #201e1c;
      --bg-sunken: #262320;
      --ink: #f0ece5;
      --ink-soft: #b6afa5;
      --ink-faint: #8b847a;
      --rule: #34302c;
      --accent: #5cb8f2;
      --accent-text: #5cb8f2;
      --accent-ink: #0a2233;
      --code-bg: #0f0e0d;
      --code-ink: #e9e4dc;
    }
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 17px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "kern", "liga";
  }

  .wrap { width: min(100% - 2.5rem, 66rem); margin-inline: auto; }

  a { color: var(--accent-text); text-underline-offset: 2px; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

  .skip {
    position: absolute; left: -9999px;
    background: var(--accent); color: var(--accent-ink);
    padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0; z-index: 10;
  }
  .skip:focus { left: 0; top: 0; }

  header.site {
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
    position: sticky; top: 0; z-index: 5;
    backdrop-filter: saturate(1.4) blur(6px);
  }
  header.site .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .85rem 0; flex-wrap: wrap;
  }
  .brand { font-weight: 650; letter-spacing: -.01em; text-decoration: none; color: var(--ink); }
  .brand span { color: var(--ink-faint); font-weight: 450; }
  nav.site { display: flex; gap: 1.35rem; font-size: .94rem; }
  nav.site a { color: var(--ink-soft); text-decoration: none; }
  nav.site a:hover { color: var(--accent-text); }

  .hero { padding: clamp(3rem, 9vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); }
  .eyebrow {
    font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 600; margin: 0 0 1rem;
  }
  h1 {
    font-size: clamp(2.3rem, 6.5vw, 3.75rem); line-height: 1.05;
    letter-spacing: -.028em; margin: 0 0 1.1rem; font-weight: 680;
  }
  .lede { font-size: clamp(1.1rem, 2.4vw, 1.32rem); color: var(--ink-soft); max-width: var(--measure); margin: 0 0 2rem; }
  .lede strong { color: var(--ink); font-weight: 600; }

  .actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
  .btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.25rem; border-radius: var(--radius);
    font-weight: 580; font-size: .97rem; text-decoration: none;
    border: 1px solid transparent; transition: transform .12s ease;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--accent); color: var(--accent-ink); }
  .btn-secondary { border-color: var(--rule); color: var(--ink); background: var(--bg-raised); }
  .btn-secondary:hover { border-color: var(--accent); color: var(--accent-text); }

  section { padding: clamp(2.5rem, 6vw, 4.25rem) 0; border-top: 1px solid var(--rule); }
  h2 {
    font-size: clamp(1.5rem, 3.2vw, 2rem); letter-spacing: -.02em;
    margin: 0 0 .65rem; font-weight: 660;
  }
  .section-lede { color: var(--ink-soft); max-width: var(--measure); margin: 0 0 2rem; }

  .flow { display: grid; gap: 1rem; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 2rem; }
  @media (max-width: 46rem) { .flow { grid-template-columns: 1fr; } .flow .arrow { transform: rotate(90deg); justify-self: start; } }
  .flow-card { background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
  .flow-card h3 { margin: 0 0 .5rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); font-weight: 640; }
  .flow-card ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .95rem; }
  .flow-card li { margin: .2rem 0; }
  .flow-card code { color: var(--ink); }
  .arrow { color: var(--ink-faint); font-size: 1.6rem; }

  .grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
  .card { background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.35rem; }
  .card h3 { margin: 0 0 .5rem; font-size: 1.04rem; letter-spacing: -.01em; font-weight: 620; }
  .card p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

  code, pre, kbd { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
  :not(pre) > code { background: var(--bg-sunken); padding: .12em .38em; border-radius: 4px; font-size: .88em; }

  .codeblock { position: relative; }
  .codeblock pre {
    background: var(--code-bg); color: var(--code-ink);
    padding: 1.35rem 1.4rem; border-radius: var(--radius);
    overflow-x: auto; font-size: .875rem; line-height: 1.7; margin: 0;
    border: 1px solid var(--rule);
  }
  .codeblock .c { color: var(--code-comment); }
  .codeblock .k { color: var(--code-accent); }
  .copy {
    position: absolute; top: .65rem; right: .65rem;
    background: rgba(255,255,255,.09); color: var(--code-ink);
    border: 1px solid rgba(255,255,255,.16); border-radius: 6px;
    padding: .3rem .6rem; font-size: .78rem; cursor: pointer;
    font-family: inherit;
  }
  .copy:hover { background: rgba(255,255,255,.16); }

  .note {
    border-left: 3px solid var(--accent); background: var(--bg-sunken);
    padding: 1rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--ink-soft); max-width: var(--measure); margin-top: 1.75rem;
  }
  .note strong { color: var(--ink); }

  footer.site { border-top: 1px solid var(--rule); padding: 2.75rem 0 3.5rem; color: var(--ink-faint); font-size: .89rem; }
  footer.site .cols { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: 2rem; }
  footer.site h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 0 0 .6rem; font-weight: 640; }
  footer.site ul { list-style: none; margin: 0; padding: 0; }
  footer.site li { margin: .3rem 0; }
  footer.site a { color: var(--ink-soft); text-decoration: none; }
  footer.site a:hover { color: var(--accent-text); text-decoration: underline; }
  .legal { border-top: 1px solid var(--rule); padding-top: 1.5rem; max-width: var(--measure); }
  .legal p { margin: .5rem 0; }
  /* --- legal pages (impressum, datenschutz) --- */
  .doc { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 7vw, 4.5rem); }
  .doc .wrap { max-width: 46rem; }
  .doc h1 { font-size: clamp(1.9rem, 4.5vw, 2.5rem); margin-bottom: 1.75rem; }
  .doc h2 { font-size: 1.18rem; margin: 2.25rem 0 .6rem; }
  .doc h3 { font-size: 1rem; margin: 1.5rem 0 .4rem; font-weight: 620; }
  .doc p, .doc li { color: var(--ink-soft); }
  .doc address { font-style: normal; color: var(--ink); line-height: 1.8; }
  .doc dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: .75rem 0 0; }
  .doc dt { color: var(--ink-faint); }
  .doc dd { margin: 0; color: var(--ink); }
  @media (max-width: 32rem) { .doc dl { grid-template-columns: 1fr; gap: 0 0; } .doc dd { margin-bottom: .6rem; } }
  .doc ul { padding-left: 1.2rem; }
  .doc li { margin: .3rem 0; }
  .back { display: inline-block; margin-bottom: 1.5rem; font-size: .93rem; }
  .updated { font-size: .87rem; color: var(--ink-faint); margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }

  .flush { margin-bottom: 0; }