/* Atlas Production — die Basis, die JEDE Seite lädt.
   Hier steht, was Startseite, Rechtsseiten und Fehlerseite gemeinsam haben:
   Schrift, Farbtoken, Rücksetzung, CRT-Schicht, Fokus, Fußzeile.
   Vorher stand das doppelt in styles.css und pages.css und lief langsam
   auseinander — eine Farbe geändert, die andere Datei vergessen. */

@font-face {
  font-family: "Press Start 2P";
  src: url("fonts/press-start-2p.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg:        #05070c;   /* arcade black, cool */
  --ink:       #e9f2f4;
  --ink-dim:   #8aa0a8;   /* tinted from the ice hue, never flat gray */
  --ice:       #bfe9ff;   /* rim-light blue from the video */
  --cyan:      #46f0d8;   /* water tone of the pixel world */
  --amber:     #ffc63a;   /* eye / START signal */

  /* Aufhellungen der Signalfarben — vorher als rohe Hex-Werte über beide
     Dateien verstreut. Wer Amber ändert, ändert jetzt auch sein Hover. */
  --amber-hell: #ffe08a;
  --cyan-hell:  #8ff7e6;

  /* Leuchten und Linien als Ableitung, nicht als handgeschriebenes rgba.
     color-mix wird von jedem Browser verstanden, der auch :has() kann. */
  --glanz-amber: color-mix(in srgb, var(--amber) 55%, transparent);
  --glanz-cyan:  color-mix(in srgb, var(--cyan) 55%, transparent);
  --glanz-ice:   color-mix(in srgb, var(--ice) 30%, transparent);
  --linie:       color-mix(in srgb, var(--ink-dim) 16%, transparent);

  --display:   "Press Start 2P", "Courier New", ui-monospace, monospace;
  --mono:      "Courier New", ui-monospace, monospace;

  /* Die CRT-Schicht: einmal definiert, dreimal benutzt (global, Fahrt, Glas). */
  --streifen: repeating-linear-gradient(0deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 3px);
  --vignette: radial-gradient(130% 100% at 50% 40%, transparent 64%, rgba(0,0,0,0.5) 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* the browser's own scrollbar is part of the page: dark, not stock white */
  scrollbar-color: #1c2836 var(--bg);
}
::-webkit-scrollbar { width: 12px; background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: #1c2836;
  border: 3px solid var(--bg);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: #2a3a4e; }

body {
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  /* Aki: nothing on the page is selectable or copyable */
  -webkit-user-select: none;
  user-select: none;
}

::selection { background: var(--cyan); color: #04120f; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* fixed CRT scanlines + vignette above everything */
.scanlines {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: var(--streifen), var(--vignette);
  mix-blend-mode: multiply;
}

/* ============ FOOTER (auf allen Seiten gleich) ============ */

.legal {
  /* stays under the CRT overlay like every other reading surface —
     lifted footers lose their scanlines and look pasted-on */
  position: relative;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  align-items: center;
  padding: 12px clamp(24px, 5vw, 56px);
  font-family: var(--mono);
  font-size: 0.78rem; letter-spacing: 0.02em;
  color: var(--ink-dim);
  border-top: 1px solid var(--linie);
  background: var(--bg);
}
.legal nav { position: relative; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.legal a {
  color: var(--ink-dim);
  text-decoration: none;
  /* 44px Trefferfläche: die Textzeile allein war rund 18px hoch und damit
     auf dem Handy kaum zu treffen. Der Kasten wächst, die Optik nicht. */
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 8px;
  transition: color 160ms ease;
}
.legal a:hover { color: var(--cyan); }
.legal a[href^="mailto"] { color: var(--amber); }
.legal a[href^="mailto"]:hover {
  color: var(--amber-hell);
  text-shadow: 0 0 12px var(--glanz-amber);
}
.legal a.l-imprint { color: var(--cyan); }
.legal a.l-imprint:hover {
  color: var(--cyan-hell);
  text-shadow: 0 0 12px var(--glanz-cyan);
}
.legal a[aria-current] { color: var(--ink); pointer-events: none; }

/* Die kopierte Adresse, über der Zeile geparkt, damit die Links nicht springen. */
.legal__note {
  position: absolute;
  right: 8px; bottom: calc(100% - 4px);
  white-space: nowrap;
  color: var(--amber);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.legal nav.noted .legal__note { opacity: 1; }