/* ═══════════════════════════════════════════════════════════
   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-Button (oben auf den Tool-Seiten) ───────────────
   Als Glow-Button gestaltet (statt kleinem Textlink), damit die
   Navigation zur Hauptseite nicht übersehen wird. Die Akzentfarbe
   setzt jede Seite über --back-akzent in ihrem <style>-Block –
   so passt der Button farblich zu jeder Seite, das Aussehen
   bleibt aber überall identisch. Beim Überfahren füllt er sich
   mit der Akzentfarbe. */
.back-link {
  display: block;
  width: fit-content;          /* Button so breit wie sein Text */
  margin: 0 auto;              /* zentriert in Block-Containern */
  align-self: center;          /* zentriert in Flex-Containern */
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--back-akzent, var(--text-dim));
  border: 2px solid var(--back-akzent, var(--text-dim));
  border-radius: 8px;
  padding: 12px 30px;
  background: color-mix(in srgb, var(--back-akzent, var(--text-dim)) 8%, transparent);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--back-akzent, var(--text-dim)) 40%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--back-akzent, var(--text-dim)) 10%, transparent);
  transition: all 0.2s ease;
}
.back-link::before { content: '← '; }
.back-link:hover {
  background: var(--back-akzent, var(--text-dim));
  color: var(--bg-void, #06040f);
  box-shadow: 0 0 26px color-mix(in srgb, var(--back-akzent, var(--text-dim)) 70%, transparent);
}

/* ── 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; }