:root{
  --pine-900:#FBFCFE;--pine-800:#E0E7EC;--pine-700:#E3E9EF;
  --stone:#EDF1F4;--paper:#FBFCFE;--ink:#1B3A5E;--ink-soft:#4C6075;
  --accent:#2F70B4;--accent-deep:#1D4D86;
  --on-pine:#1B3A5E;--on-pine-mut:#4C6075;--line-pine:rgba(27,58,94,.13);--line-stone:rgba(27,58,94,.13);
  --display:'Newsreader',Georgia,serif;--body:'Hanken Grotesk',system-ui,sans-serif;--mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--stone);color:var(--ink);font-family:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent-deep)}
.wrap{max-width:780px;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,2rem)}
.topbar{background:var(--pine-900);color:var(--on-pine);border-bottom:1px solid var(--line-pine);position:sticky;top:0;z-index:10}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:1180px}
.brand{font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--on-pine);text-decoration:none}
.brand span{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-pine-mut);margin-left:.5rem}
.back{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--on-pine-mut);text-decoration:none}
.back:hover{color:var(--accent)}
main{padding-block:clamp(3rem,6vw,5rem)}
main h1{font-family:var(--display);font-weight:500;font-size:clamp(2rem,1.5rem + 2vw,3rem);line-height:1.05;margin:0 0 .5rem}
.sub{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 2.6rem}
main h2{font-family:var(--display);font-weight:500;font-size:1.45rem;margin:2.6rem 0 .7rem;line-height:1.15}
main h3{font-size:1.05rem;margin:1.7rem 0 .4rem;color:var(--ink)}
main p,main li{color:var(--ink-soft)}
main strong{color:var(--ink);font-weight:600}
main ul{padding-left:1.2rem}
main li{margin:.3rem 0}
.note{background:var(--paper);border-left:3px solid var(--accent);padding:1rem 1.2rem;border-radius:0 8px 8px 0;margin:1.6rem 0;font-size:.95rem}
.muster{background:var(--paper);border:1px solid var(--line-stone);border-radius:10px;padding:1.4rem 1.6rem;margin:1.4rem 0}
footer{background:var(--pine-800);color:var(--on-pine-mut);padding-block:2.6rem;font-size:.86rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;max-width:1180px}
footer a{color:var(--on-pine-mut);text-decoration:none}
footer a:hover{color:var(--on-pine)}
footer .fl{display:flex;flex-wrap:wrap;gap:1.2rem}