/* Selbst gehostete Schriftarten (keine externen Font-Dienste) */
@import url('fonts-selfhost.css');

:root{
  color-scheme:dark;
  --ink:#eef1f6;--muted:#aab3c2;--faint:#6b7585;
  --bg:#0a0d14;--panel:#141a26;--line:rgba(255,255,255,.12);--line-strong:rgba(255,255,255,.22);
  /* Kategorie-Farben wie auf der Startseite: Käse, Schinken, Kaffee, Gin, Whiskey */
  --c1:#ffa726;--c2:#f0463c;--c3:#2fb35a;--c4:#4c8dff;--c5:#9b59e0;
  --rainbow:linear-gradient(90deg,var(--c4),var(--c1),var(--c2),var(--c5),var(--c3));
  --display:"Bricolage Grotesque",sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ink);
  background:
    radial-gradient(circle at 6% 2%,rgba(76,141,255,.12),transparent 24rem),
    radial-gradient(circle at 96% 6%,rgba(155,89,224,.12),transparent 26rem),
    radial-gradient(circle at 70% 100%,rgba(47,179,90,.10),transparent 28rem),
    linear-gradient(180deg,#0d1119 0%,var(--bg) 50%);
  font:400 16px/1.65 var(--mono);-webkit-font-smoothing:antialiased}
.wrap{max-width:820px;margin:0 auto;padding:2rem 1.25rem 4rem}
header{border-bottom:3px solid transparent;border-image:var(--rainbow) 1;padding-bottom:1rem;margin-bottom:1.5rem}
header .brand{font-family:var(--display);font-weight:800;letter-spacing:.01em;font-size:1.1rem;
  background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent}
h1,h2,h3{font-family:var(--display);letter-spacing:-.015em}
h1{font-size:clamp(1.9rem,4.4vw,2.6rem);margin:.3rem 0 0;font-weight:800;line-height:1.08;
  background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:1.2rem;margin:1.8rem 0 .4rem;font-weight:700;color:var(--c1)}
h2:nth-of-type(5n+2){color:var(--c2)}
h2:nth-of-type(5n+3){color:var(--c3)}
h2:nth-of-type(5n+4){color:var(--c4)}
h2:nth-of-type(5n+5){color:var(--c5)}
p,li{margin:.4rem 0;color:var(--muted)}
ul{padding-left:1.2rem}
li::marker{color:var(--c1)}
strong{color:var(--ink)}
.meta{color:var(--faint);font-size:.9rem;font-family:var(--mono)}
.card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--c4);border-radius:12px;padding:1rem 1.2rem;margin:1rem 0;color:var(--muted)}
.card strong{color:var(--ink)}
a{color:var(--c4)}
a:hover{color:#fff}
code{font-family:var(--mono);background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px;color:var(--ink)}
footer{margin-top:3rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--faint);font-size:.9rem;font-family:var(--mono)}
footer a{color:var(--muted)}
footer a:hover{color:var(--c3)}