/* Richtung: Bits Werkbank bei Nacht – Nachtblau mit Raster, Mint wie Bits Gehäuse,
   Gelb wie seine Antenne. „paper“ = Grundfläche, „ink“ = Schrift (dunkles Thema).
   Bewusst nur Systemschriften: kein Google-Fonts-Abruf (DSGVO), schnell geladen. */
:root {
  --color-paper: #0f1424;
  --color-ink: #eef6f4;
  --color-ink-soft: #a9bccb;
  --color-grid: #1b2340;
  --color-signal: #2fd3a8;
  --color-antenna: #ffd166;
  --color-focus: #6ff3ff;

  --font-display: "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --text-hero: clamp(3.5rem, 1.5rem + 9vw, 8.5rem);
  --space-section: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);

  --duration-fast: 150ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--text-base) / 1.55 var(--font-display);
  color: var(--color-ink);
  background-color: var(--color-paper);
  background-image:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  padding: 0 clamp(1rem, 5vw, 4rem);
}

a { color: var(--color-signal); }

.masthead,
main,
.colophon { max-width: 46rem; margin-inline: auto; }

.masthead { padding-block: var(--space-section) 2rem; }

.stamp {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.2rem 0.6rem;
  border: 1.5px solid var(--color-ink);
  font: 0.75rem / 1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

h1 {
  margin: 0;
  font-size: var(--text-hero);
  line-height: 0.85;
  letter-spacing: -0.045em;
  font-weight: 800;
}

.mark { color: var(--color-signal); }

.stamp { color: var(--color-antenna); border-color: var(--color-antenna); }

.lede {
  max-width: 30rem;
  margin: 1.5rem 0;
  font-size: 1.2em;
  color: var(--color-ink-soft);
}

.channels { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.channels a {
  padding: 0.55rem 1.1rem;
  background: var(--color-ink);
  color: var(--color-paper);
  font: 600 0.85rem / 1 var(--font-mono);
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--color-signal);
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo);
}

.channels a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--color-signal); }
.channels a:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--color-signal); }

.disclosure {
  margin: 0 0 var(--space-section);
  padding: 0.9rem 1.1rem;
  background: var(--color-signal);
  color: var(--color-paper);
  font-size: 0.9rem;
  border-left: 6px solid var(--color-antenna);
}

.bench { margin-bottom: var(--space-section); }

h2 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

.num { font: 0.8rem var(--font-mono); color: var(--color-ink-soft); }

ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--color-ink); }

li {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr;
  gap: 0.25rem 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--color-ink-soft);
  background: var(--color-paper);
}

li a {
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out-expo);
  justify-self: start;
}

li a:hover { transform: translateX(4px); text-decoration: underline 3px var(--color-signal); text-underline-offset: 4px; }
li span { color: var(--color-ink-soft); }

a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.fineprint,
.colophon { font: 0.75rem / 1.5 var(--font-mono); color: var(--color-ink-soft); }

.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding-block: 2rem 3rem;
  border-top: 2px solid var(--color-ink);
}

.colophon a { color: var(--color-ink); }

@media (max-width: 30rem) {
  li { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}