:root{
  --paper:#f4f1ea; --ink:#1a1916; --ink-soft:#57534a; --rule:#d6d0c4;
  --accent:#8a3324;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#14130f; --ink:#ece7db; --ink-soft:#9b968a; --rule:#33302a; --accent:#d4703f; }
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,sans-serif;
  font-size:16px; line-height:1.65;
  min-height:100dvh; display:flex; align-items:center;
  padding:clamp(24px,6vw,80px);
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
main{width:100%; max-width:52rem; margin-inline:auto}
.rule{height:1px; background:var(--rule); border:0}
.mark{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}
h1{
  font-family:"Instrument Serif",Georgia,serif; font-weight:400;
  font-size:clamp(2.8rem,9vw,5.5rem); line-height:.98; letter-spacing:-.015em;
  margin:.5rem 0 1.25rem;
}
h1 em{font-style:italic; color:var(--accent)}
.lede{font-size:clamp(1.05rem,2.2vw,1.2rem); max-width:36rem; color:var(--ink-soft)}
.grid{
  display:grid; gap:clamp(1.5rem,4vw,3rem); margin-top:clamp(2rem,5vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
h2{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:.6rem;
}
p+p{margin-top:.7rem}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px}
a:hover{background:var(--accent); color:var(--paper); border-color:transparent}
footer{margin-top:clamp(2.5rem,6vw,4rem); display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; align-items:baseline}
.fade{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.fade:nth-child(2){animation-delay:.06s}
.fade:nth-child(3){animation-delay:.12s}
.fade:nth-child(4){animation-delay:.18s}
.fade:nth-child(5){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none}}
/* --- Leseseite (privacy) --- */
body.doc{align-items:flex-start}
.doc main{max-width:44rem}
.doc h1{font-size:clamp(2.1rem,6vw,3.4rem); margin:.4rem 0 1rem}
.doc h2{margin:2.4rem 0 .5rem}
.doc h2:first-of-type{margin-top:1.8rem}
.doc p, .doc li{color:var(--ink)}
.doc ul{margin:.5rem 0 0 1.1rem}
.doc li{margin-top:.35rem}
.doc li code, .doc p code{font-family:"IBM Plex Mono",monospace; font-size:.85em; color:var(--ink-soft)}
.doc .lede{margin-bottom:1.5rem}
.back{display:inline-block; margin-bottom:2rem}
.updated{margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--rule)}
.doc ul+p{margin-top:1rem}