:root{
  --ink:#1d2420; --paper:#f5f3ee; --surface:#ffffff; --surface-2:#eeebe3;
  --line:#ddd8cc; --muted:#7a8177; --accent:#2b6e5c; --accent-ink:#ffffff; --accent-soft:#dcece5;
  --warn:#a1753a; --warn-soft:#f3ebd8; --shadow: 0 1px 2px rgba(29,36,32,.06), 0 8px 24px -12px rgba(29,36,32,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e7e9e2; --paper:#171a16; --surface:#1f231e; --surface-2:#242821;
    --line:#343a2f; --muted:#a2a99b; --accent:#7fbfa8; --accent-ink:#0d1710; --accent-soft:#203028;
    --warn:#e0c36b; --warn-soft:#362c15; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ink:#e7e9e2; --paper:#171a16; --surface:#1f231e; --surface-2:#242821;
  --line:#343a2f; --muted:#a2a99b; --accent:#7fbfa8; --accent-ink:#0d1710; --accent-soft:#203028;
  --warn:#e0c36b; --warn-soft:#362c15; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
code, .mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; }
p{ margin:0; }
a{ color:inherit; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 24px; }

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.site-nav .wrap{ height:60px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.wordmark{ display:flex; align-items:center; gap:8px; text-decoration:none; flex:none; }
.wordmark svg{ width:20px; height:20px; flex:none; color:var(--accent); }
.wordmark span{ font-weight:700; font-size:1rem; letter-spacing:-.01em; }
.wordmark .dom{ color:var(--muted); font-weight:500; }
.nav-links{ display:flex; align-items:center; gap:24px; font-size:.85rem; font-weight:500; }
.nav-links a{ color:var(--muted); text-decoration:none; }
.nav-links a:hover{ color:var(--ink); }
@media (max-width:760px){ .nav-links{ display:none; } }

/* ---------- Seiten-Kopf ---------- */
.page-hd{ padding:44px 0 36px; border-bottom:1px solid var(--line); }
.breadcrumb{ font-size:.8rem; color:var(--muted); margin-bottom:14px; }
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb-sep{ margin:0 8px; }
.page-hd h1{ font-size:1.9rem; font-weight:700; margin:0 0 10px; letter-spacing:-.01em; }
.page-hd .lead{ font-size:.94rem; color:var(--muted); max-width:62ch; }

/* ---------- Inhalt ---------- */
.prose{ max-width:740px; margin:0 auto; padding:48px 24px 80px; line-height:1.65; }
.prose h2{ font-size:1.25rem; font-weight:700; margin:34px 0 12px; letter-spacing:-.01em; }
.prose h2:first-of-type{ margin-top:0; }
.prose h3{ font-size:1.05rem; font-weight:600; margin:24px 0 8px; }
.prose h4{ font-size:1.02rem; font-weight:700; margin:26px 0 10px; letter-spacing:-.005em; }
.prose h4:first-of-type{ margin-top:0; }
.prose p{ margin:0 0 14px; color:var(--ink); }
.prose ul, .prose ol{ margin:0 0 14px; padding-left:22px; }
.prose li{ margin-bottom:6px; }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.prose strong{ font-weight:600; }
.prose em{ color:var(--muted); }
.prose table{ width:100%; border-collapse:collapse; font-size:.86rem; margin:0 0 18px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.prose table th{ text-align:left; padding:9px 12px; background:var(--surface-2); font-weight:600; border-bottom:1px solid var(--line); }
.prose table td{ padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.prose table tr:last-child td{ border-bottom:none; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); padding:36px 0; }
.foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.foot-links{ display:flex; gap:20px; font-size:.84rem; }
.foot-links a{ color:var(--muted); text-decoration:none; }
.foot-links a:hover{ color:var(--ink); }
.foot-copy{ font-size:.8rem; color:var(--muted); }