/* Farben, Grundtypografie, gemeinsame Bausteine.
   Alles Seitenweite steht hier, Abschnitte bringen ihr eigenes Blatt mit. */

:root{
  --weiss:#ffffff;
  --tinte:#0a0a0a;
  --grau:#6a6a6a;
  --leise:#a8a8a8;
  --linie:#e2e2e2;

  /* Akzent. Auf Weiss nur als Fläche mit dunkler Schrift darauf verwenden —
     als Textfarbe auf Weiss reicht der Kontrast nicht. */
  --saeure:#d4ff3f;

  --dunkel-linie:#23232e;
  --dunkel-text:#9a9aa8;
  --dunkel-zeichen:#33333f;

  --rand-seite:clamp(18px,5vw,64px);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--weiss);
  color:var(--tinte);
  font-family:Archivo,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--saeure);color:var(--tinte)}

section{padding:0 var(--rand-seite)}

/* Kopfleiste. Difference-Blendmodus, damit sie auf hellem wie dunklem
   Untergrund lesbar bleibt, ohne umgeschaltet zu werden. */
.rand{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;justify-content:space-between;
  padding:22px var(--rand-seite);
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  mix-blend-mode:difference;color:#fff;
}

/* Kleines Etikett in Akzentfarbe */
.marke{
  display:inline-block;margin:0 0 clamp(20px,4vh,42px);
  background:var(--saeure);color:var(--tinte);
  padding:5px 12px 6px;
  font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
}