/* ---------------------------------------------------------------------------
   Nebenseiten: Impressum, Datenschutz, 404.
   Bis 31.08.2026 liefen die drei Seiten in Arial mit eigenem Inline-CSS. Wer
   im Footer auf Impressum tippte, landete optisch auf einer fremden Website.
   Diese Datei zieht sie auf dieselben Schriften, Farben und Abstaende wie die
   Startseite. Die Tokens sind bewusst dupliziert, damit die Seiten ohne das
   grosse Stylesheet der Startseite auskommen.
--------------------------------------------------------------------------- */
:root{
  --bg:#0a0a09;
  --bg-soft:#111110;
  --ink:#f2f1ea;
  --ink-dim:#b9b8b0;
  --muted:#83827a;
  --line:rgba(242,241,234,.14);
  --line-strong:rgba(242,241,234,.28);
  --lime:#cbff35;
  --font-display:'Anton','Anton Fallback',Impact,sans-serif;
  --font-body:'Archivo','Archivo Fallback',Helvetica,sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --pad-x:clamp(1.25rem, 5.5vw, 5.25rem);
  --ease:cubic-bezier(.22,.61,.21,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:break-word;
}
::selection{background:var(--lime);color:var(--bg)}
a{color:inherit}
.wrap{width:min(58.75rem,100%);margin-inline:auto;padding-inline:var(--pad-x)}

/* ---------- Kopf ---------- */
.top{
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10;
  background:rgba(10,10,9,.92);backdrop-filter:blur(14px);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px}
.brand{display:block;text-decoration:none;padding-block:7px}
.brand strong{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:1.64rem;letter-spacing:.06em;text-transform:uppercase;line-height:1;
}
.brand span{
  display:block;font-family:var(--font-mono);font-size:.58rem;font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;color:var(--muted);margin-top:6px;
}
.top nav{display:flex;gap:clamp(14px,3vw,30px)}
.top nav a{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);text-decoration:none;
  padding-block:12px;transition:color .25s var(--ease);
}
.top nav a:hover,.top nav a:focus-visible{color:var(--lime)}

/* ---------- Inhalt ---------- */
main{padding-block:clamp(52px,8vw,96px) clamp(76px,10vw,130px)}
.kicker{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px;
  display:flex;align-items:center;gap:14px;
}
.kicker::after{content:"";flex:1;height:1px;background:var(--line)}
h1{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,5.2rem);line-height:.94;letter-spacing:.004em;
  overflow-wrap:normal;hyphens:manual;margin-bottom:clamp(26px,4vw,40px);
}
h2{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.2rem,2.4vw,1.6rem);letter-spacing:.01em;line-height:1.1;
  margin:clamp(40px,5vw,58px) 0 12px;
}
p,li{color:var(--ink-dim);font-weight:300}
p + p{margin-top:14px}
main a{
  color:var(--lime);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
}
main a:hover{color:var(--ink)}
strong{color:var(--ink);font-weight:600}

.notice{
  border-left:3px solid var(--lime);background:var(--bg-soft);
  padding:18px clamp(16px,2.5vw,26px);margin-bottom:clamp(30px,4vw,44px);
  font-size:.94rem;
}
.notice strong{display:block;margin-bottom:4px}
.placeholder{
  color:var(--lime);font-weight:500;
  font-family:var(--font-mono);font-size:.82em;letter-spacing:.06em;
}

/* ---------- 404 ---------- */
.err{min-height:62svh;display:flex;flex-direction:column;justify-content:center}
.err p{max-width:52ch}
.back{
  display:inline-flex;align-items:center;gap:10px;margin-top:32px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border:1px solid var(--line-strong);padding:15px 22px;
  transition:border-color .3s,color .3s,gap .3s var(--ease);
}
.back:hover{border-color:var(--lime);color:var(--lime);gap:16px}

/* ---------- Fuss ---------- */
.foot{border-top:1px solid var(--line);padding-block:26px 34px}
.foot .wrap{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;
  color:var(--muted);line-height:1.9;
}
.foot a{color:var(--muted);text-decoration:none;padding-block:6px}
.foot a:hover{color:var(--lime)}
.foot nav{display:flex;gap:20px}

:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}