/* DJ Anubis – djanubis.pages.dev – gemeinsames Stylesheet */
:root{
  --bg:#0b0b10; --panel:#15151d; --panel-2:#1c1c26; --line:#2a2a36;
  --ink:#ececf1; --muted:#a3a3b5; --accent:#d34580; --accent-2:#8d2a56;
}
*{ box-sizing:border-box }
html{ color-scheme:dark }
body{ margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a{ color:var(--accent) } a:hover{ text-decoration:none }
img{ max-width:100%; display:block }
h1,h2,h3{ text-wrap:balance; line-height:1.15 }
code{ font-size:.95em; color:#f0c0d6 }
.muted{ color:var(--muted) }
.lead{ color:var(--muted); font-size:1.1rem }

/* --- Dokumentseiten (Tool, Datenschutz) --- */
.doc{ max-width:720px; margin:0 auto; padding:48px 20px 64px }
.doc h1{ font-size:2rem; margin:0 0 .25em }
.doc h2{ font-size:1.05rem; margin:2em 0 .5em; color:var(--accent); text-transform:uppercase; letter-spacing:.06em }
.doc ul{ padding-left:1.2em } .doc li{ margin:.35em 0 }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px 22px; margin-top:24px }
footer{ margin-top:48px; padding-top:16px; border-top:1px solid var(--line); font-size:.9rem; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:8px 20px }

/* --- Künstlerseite --- */
.artist{ max-width:960px; margin:0 auto; padding:56px 20px 64px }
.hero{ text-align:center; padding-bottom:36px; border-bottom:1px solid var(--line) }
.hero .kicker{ color:var(--accent); text-transform:uppercase; letter-spacing:.18em; font-size:.85rem; margin:0 0 .6em }
.hero h1{ font-size:clamp(2.6rem,8vw,4.5rem); margin:0; letter-spacing:.04em; text-shadow:2px 2px 0 var(--accent-2) }
.hero p{ max-width:560px; margin:1em auto 0; color:var(--muted); font-size:1.05rem }
section{ margin-top:48px }
section > h2{ font-size:1rem; color:var(--accent); text-transform:uppercase; letter-spacing:.12em; margin:0 0 18px }
.releases{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px }
.release{ background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  display:grid; grid-template-columns:140px 1fr }
.release img{ width:140px; height:140px; object-fit:cover }
.release .body{ padding:16px 18px; display:flex; flex-direction:column; gap:6px }
.release h3{ margin:0; font-size:1.15rem }
.release .date{ color:var(--muted); font-size:.9rem }
.release .body a{ margin-top:auto; font-weight:600 }
.badge{ display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  background:var(--accent); color:#fff; padding:2px 8px; border-radius:999px; width:max-content }
.links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px }
.btn{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  color:var(--ink); text-decoration:none; font-weight:600 }
.btn small{ color:var(--muted); font-weight:400 }
.btn::after{ content:"→"; color:var(--accent) }
.btn:hover{ border-color:var(--accent); background:var(--panel-2) }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.artist footer{ justify-content:center }
@media (max-width:480px){
  .release{ grid-template-columns:1fr }
  .release img{ width:100%; height:auto; aspect-ratio:1 }
}
@media (prefers-reduced-motion:no-preference){ .btn{ transition:border-color .15s,background .15s } }