/* ═══════════════════════════════════════════════════════════
   schoscho.at – common.css
   Zentrale CSS-Grundlage für ALLE Cyberpunk-Seiten in /public
   (index, rechner, kalender, konverter, passwort, periodensystem,
    feedback, htpasswd, danke, 404)

   Diese Datei enthält ausschließlich Regeln, die auf allen Seiten
   gleich sind. Seitenspezifisches (Akzentfarben in :root, Layout,
   Komponenten) bleibt im <style>-Block der jeweiligen Seite.

   WICHTIG: Diese Datei muss VOR dem <style>-Block der Seite
   eingebunden werden, damit Seiten einzelne Regeln gezielt
   überschreiben können (z.B. overflow-x auf periodensystem.html).

   Jede Seite muss in ihrem :root mindestens definieren:
     --bg-void     Seitenhintergrund
     --text-main   Standard-Textfarbe
     --text-dim    gedämpfte Textfarbe (u.a. für .back-link, footer)
     --grid-color  Farbe des animierten Hintergrund-Gitters
   ═══════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────
   Einheitlicher Ausgangspunkt: kein Browser-Standardabstand,
   Box-Größen inklusive Rahmen/Innenabstand berechnet. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Basis-Typografie ───────────────────────────────────────
   18px Basis: alle rem-Werte der Seiten skalieren proportional.
   Schriftart: Share Tech Mono (lokal gehostet, siehe /fonts). */
html { font-size: 18px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Share Tech Mono', monospace;
  background: var(--bg-void);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  cursor: crosshair;
}

/* ── Hintergrund: animiertes Gitter ─────────────────────────
   Die Gitterfarbe kommt aus --grid-color der jeweiligen Seite,
   dadurch behält jede Seite ihre eigene Akzentfärbung. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: gridScroll 25s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes gridScroll {
  from { background-position: 0 0; }
  to   { background-position: 44px 44px; }
}

/* ── Hintergrund: Scan-Linien (CRT-Effekt) ──────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px,
    transparent 1px, transparent 3px
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Wiederkehrende Struktur-Elemente ───────────────────────── */
header { text-align: center; width: 100%; }

/* Partikel-Canvas (Seiten ohne Canvas ignorieren die Regel) */
#particleCanvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

/* ── Zurück-Link (oben auf den Tool-Seiten) ─────────────────
   Einheitliche Größe/Schrift; Breite und Hover-Akzentfarbe
   setzt jede Seite selbst. */
.back-link {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s;
}
.back-link::before { content: '← '; }

/* ── Footer ─────────────────────────────────────────────────
   Einheitliche Fußzeile auf allen Seiten (0.82rem wie der
   restliche Kleintext). Seiten mit Sonderstruktur (z.B.
   Trennlinie oben, absolute Position auf der 404-Seite)
   überschreiben nur diese Eigenschaften bei sich lokal. */
footer {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-dim);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-top: 10px;
}

/* Footer-Links: Hover-Akzentfarbe setzt jede Seite selbst. */
footer a { color: var(--text-dim); text-decoration: none; transition: color .2s; }