@font-face{font-family:'Zodiak';src:url('fonts/zodiak-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Zodiak';src:url('fonts/zodiak-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Supreme';src:url('fonts/supreme-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Supreme';src:url('fonts/supreme-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Supreme';src:url('fonts/supreme-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{
  --paper:#0d0b0a;
  --paper-2:#151110;
  --creme:#f7f1e4;
  --ink:#efe6d4;
  --gold:#c08628;
  --gold-lt:#f0c879;
  --burg:#8e3330;
  --line:#2c2522;
  --display:'Zodiak',Georgia,serif;
  --sans:'Supreme','Segoe UI',system-ui,sans-serif;
}
/* Weite Farbraeume nur dort, wo der Browser sie kennt.
   Ohne diese Kapselung liefert var() in alten Browsern einen ungueltigen
   Wert -> Hintergrund und Schriftfarbe fallen auf ihre Initialwerte zurueck
   (weisse Seite, schwarze Schrift). */
@supports (color: oklch(0.5 0.1 60)){
:root{
  --paper:oklch(0.148 0.005 62.0);
  --paper-2:oklch(0.190 0.008 58.0);
  --creme:oklch(0.959 0.018 86.1);
  --ink:oklch(0.930 0.024 85.0);
  --gold:oklch(0.672 0.126 74.0);
  --gold-lt:oklch(0.851 0.108 83.3);
  --burg:oklch(0.452 0.126 25.5);
  --line:oklch(0.248 0.010 55.0);
}
}

*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.02rem;line-height:1.68;overflow-x:clip}
a{color:var(--gold-lt)}
:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px;border-radius:4px}
.draft{background:var(--burg);color:#f7f1e4;text-align:center;font-size:.8rem;padding:9px 16px}
header{border-bottom:1px solid var(--line);background:var(--paper)}
.nav{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 24px}
.brand{font-family:var(--display);font-weight:800;font-size:1.28rem;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.nav a.back{font-size:.92rem;font-weight:500;color:var(--ink)}
main{max-width:900px;margin:0 auto;padding:clamp(44px,7vw,84px) 24px 90px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3rem);line-height:1.05;letter-spacing:-.015em}
h2{font-family:var(--display);font-weight:700;font-size:1.35rem;margin:2.1em 0 .5em;line-height:1.2}
p+p{margin-top:.85em}
ul{margin:.6em 0 0 1.1em}
li{margin-bottom:.3em}
.hinweis{background:var(--paper-2);border:1.5px dashed var(--burg);border-radius:6px 20px 8px 20px;padding:22px 24px;margin:26px 0 8px}
.hinweis .tag{display:inline-block;font-family:var(--display);font-weight:800;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;background:var(--burg);color:var(--creme);padding:5px 12px;border-radius:999px;margin-bottom:10px}
.ph{background:rgba(184,122,30,.22);border-bottom:2px solid var(--gold);padding:1px 5px;border-radius:3px;font-weight:500}
footer{background:var(--ink);color:var(--paper);padding:34px 24px;font-size:.9rem}
footer .wrap{max-width:900px;margin:0 auto;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
footer a{color:var(--paper)}