/* ==========================================================================
   GAETW Skin Engine
   Die ganze Seite laesst sich jederzeit in einen anderen Stil eintunken.
   Ein Skin ist nur ein Satz Variablen plus zwei Effekt-Schalter.
   Alles darunter liest ausschliesslich Variablen, nie feste Farben.
   ========================================================================== */

@font-face {
  font-family: 'PixelDisplay';
  src: url('/assets/fonts/press-start-2p.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'PixelTerm';
  src: url('/assets/fonts/vt323.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  --f-display: 'PixelDisplay', 'Courier New', ui-monospace, monospace;
  --f-term: 'PixelTerm', 'Courier New', ui-monospace, monospace;
  --f-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --u: 4px;                 /* Pixel-Einheit, alles rastert darauf */
  --maxw: 1180px;
  --readw: 47rem;

  --scanlines: 1;           /* 0 oder 1 */
  --glow: 1;                /* 0 oder 1 */
  --glow-px: 0px;
}

/* ---------- 1. DEMOSCENE (Default) ------------------------------------- */
:root, [data-skin='demoscene'] {
  --bg:        #08030f;
  --bg-deep:   #05010a;
  --surface:   #14082252;
  --surface-2: #1c0b2e;
  --fg:        #efe6ff;
  --fg-dim:    #a596c4;
  --accent:    #ff2e88;
  --accent-2:  #00f0ff;
  --accent-3:  #b4ff39;
  --border:    #ff2e8855;
  --border-hi: #00f0ff;
  --shadow:    #00f0ff;
  --scanlines: 1;
  --glow: 1;
  --glow-px: 6px;
  --skin-label: 'DEMOSCENE';
}

/* ---------- 2. C64 ------------------------------------------------------ */
[data-skin='c64'] {
  --bg:        #40318d;
  --bg-deep:   #352a75;
  --surface:   #4b3ba333;
  --surface-2: #4b3ba3;
  --fg:        #d3ccf5;
  --fg-dim:    #a79ee0;
  --accent:    #ffffff;
  --accent-2:  #8fe3a0;
  --accent-3:  #ffe37b;
  --border:    #7869c4;
  --border-hi: #ffffff;
  --shadow:    #7869c4;
  --scanlines: 0;
  --glow: 0;
  --glow-px: 0px;
  --skin-label: 'C64';
}

/* ---------- 3. GAME BOY -------------------------------------------------- */
[data-skin='gameboy'] {
  --bg:        #9bbc0f;
  --bg-deep:   #8bac0f;
  --surface:   #8bac0f66;
  --surface-2: #8bac0f;
  --fg:        #0f380f;
  --fg-dim:    #24541f;
  --accent:    #0f380f;
  --accent-2:  #306230;
  --accent-3:  #0f380f;
  --border:    #306230;
  --border-hi: #0f380f;
  --shadow:    #306230;
  --scanlines: 0;
  --glow: 0;
  --glow-px: 0px;
  --skin-label: 'GAME BOY';
}

/* ---------- 4. AMBER CRT ------------------------------------------------- */
[data-skin='amber'] {
  --bg:        #170d00;
  --bg-deep:   #0d0700;
  --surface:   #2a190033;
  --surface-2: #2a1900;
  --fg:        #ffc14d;
  --fg-dim:    #b8842a;
  --accent:    #ffb000;
  --accent-2:  #ffd980;
  --accent-3:  #ff8c1a;
  --border:    #6b4600;
  --border-hi: #ffb000;
  --shadow:    #ffb000;
  --scanlines: 1;
  --glow: 1;
  --glow-px: 5px;
  --skin-label: 'AMBER CRT';
}

/* ---------- 5. VAPORWAVE ------------------------------------------------- */
[data-skin='vapor'] {
  --bg:        #1b0538;
  --bg-deep:   #12022a;
  --surface:   #2d0a5c40;
  --surface-2: #2d0a5c;
  --fg:        #fdf2ff;
  --fg-dim:    #c2a7e0;
  --accent:    #ff71ce;
  --accent-2:  #01cdfe;
  --accent-3:  #05ffa1;
  --border:    #ff71ce4d;
  --border-hi: #01cdfe;
  --shadow:    #ff71ce;
  --scanlines: 0;
  --glow: 1;
  --glow-px: 8px;
  --skin-label: 'VAPORWAVE';
}

/* ---------- 6. PAPER (Lesemodus, hell) ----------------------------------- */
[data-skin='paper'] {
  --bg:        #f4f1ea;
  --bg-deep:   #e8e3d7;
  --surface:   #ffffff;
  --surface-2: #ffffff;
  --fg:        #16150f;
  --fg-dim:    #55524a;
  --accent:    #b3001b;
  --accent-2:  #0b5d8f;
  --accent-3:  #1f6b3a;
  --border:    #c9c2b2;
  --border-hi: #16150f;
  --shadow:    #c9c2b2;
  --scanlines: 0;
  --glow: 0;
  --glow-px: 0px;
  --skin-label: 'PAPER';
}

/* ========================================================================== */

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

html { background: var(--bg-deep); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .18s steps(3), color .18s steps(3);
}

/* Scanline- und Vignetten-Auflage. Nur Deko, nie klickbar. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: var(--scanlines);
  background: repeating-linear-gradient(
    to bottom,
    #0000 0px, #0000 2px,
    #00000059 2px, #00000059 4px
  );
  mix-blend-mode: multiply;
}

img, svg, canvas { max-width: 100%; height: auto; image-rendering: pixelated; }

a { color: var(--accent-2); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 3px solid var(--border-hi);
  outline-offset: 2px;
}

/* ---------- Typografie ---------------------------------------------------- */

h1, h2, h3, .display {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 calc(var(--u) * 4);
  text-shadow: calc(var(--glow) * 0px) 0 calc(var(--glow-px)) var(--shadow);
}
h1 { font-size: clamp(1.1rem, 4.4vw, 2.3rem); }
h2 { font-size: clamp(.95rem, 2.7vw, 1.4rem); color: var(--accent); }
h3 { font-size: clamp(.8rem, 2vw, 1rem); color: var(--accent-2); }

.term { font-family: var(--f-term); font-size: 1.35em; line-height: 1.25; letter-spacing: .02em; }
.num  { font-family: var(--f-term); font-variant-numeric: tabular-nums; }

p { margin: 0 0 1.15em; }
strong { color: var(--accent-3); font-weight: 700; }

.dim { color: var(--fg-dim); }
.hi  { color: var(--accent); }

/* ---------- Layout -------------------------------------------------------- */

.wrap { width: min(100% - calc(var(--u) * 8), var(--maxw)); margin-inline: auto; }
.read { width: min(100% - calc(var(--u) * 8), var(--readw)); margin-inline: auto; }
.section { padding: calc(var(--u) * 14) 0; }
.stack > * + * { margin-top: calc(var(--u) * 4); }

/* ---------- Rahmen im Pixel-Stil ----------------------------------------- */

.panel {
  background: var(--surface);
  border: 3px solid var(--border);
  padding: calc(var(--u) * 5);
  position: relative;
}
.panel--hi { border-color: var(--border-hi); }

/* Harter Schatten statt Weichzeichner: das ist der Pixel-Look */
.raised { box-shadow: calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 var(--shadow); }

/* Ecken-Marker, rein dekorativ */
.panel--corners::before,
.panel--corners::after {
  content: '';
  position: absolute;
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
  border: 3px solid var(--border-hi);
}
.panel--corners::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.panel--corners::after  { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }

/* ---------- Knoepfe ------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--f-display);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: calc(var(--u) * 3) calc(var(--u) * 5);
  background: var(--surface-2);
  color: var(--fg);
  border: 3px solid var(--border-hi);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--u) var(--u) 0 var(--shadow);
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.btn:hover { color: var(--bg); background: var(--accent); }
.btn:active { transform: translate(var(--u), var(--u)); box-shadow: 0 0 0 var(--shadow); }
.btn--ghost { background: #0000; }

/* ---------- Kachel-Raster ------------------------------------------------- */

.grid {
  display: grid;
  gap: calc(var(--u) * 4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.grid > * { min-width: 0; }   /* sonst sprengt langer Inhalt die Spalte */

/* ---------- Kennzahl-Kachel ---------------------------------------------- */

.stat { border: 3px solid var(--border); padding: calc(var(--u) * 4); background: var(--surface); }
.stat__k { font-family: var(--f-display); font-size: .58rem; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: calc(var(--u) * 2); }
.stat__v { font-family: var(--f-term); font-size: clamp(1.8rem, 5vw, 2.9rem); line-height: 1; color: var(--accent-3); display: block; font-variant-numeric: tabular-nums; }
.stat__u { font-family: var(--f-term); font-size: 1.1rem; color: var(--fg-dim); display: block; margin-top: calc(var(--u) * 1.5); }
.stat__src { font-size: .68rem; color: var(--fg-dim); display: block; margin-top: calc(var(--u) * 2); line-height: 1.35; }

/* ---------- Balken -------------------------------------------------------- */

.bar { height: calc(var(--u) * 5); background: var(--surface-2); border: 2px solid var(--border); position: relative; overflow: hidden; }
.bar__fill { height: 100%; background: var(--accent); }
.bar__fill--2 { background: var(--accent-2); }
.bar__fill--3 { background: var(--accent-3); }

/* ---------- Tabelle ------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; font-family: var(--f-term); font-size: 1.15rem; }
.table th, .table td { padding: calc(var(--u) * 2) calc(var(--u) * 3); border-bottom: 2px solid var(--border); text-align: left; }
.table th { font-family: var(--f-display); font-size: .58rem; text-transform: uppercase; color: var(--fg-dim); letter-spacing: .05em; }
.table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; }

/* ---------- Kopf und Fuss ------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 9000;
  background: var(--bg-deep);
  border-bottom: 3px solid var(--border);
  padding: calc(var(--u) * 2.5) 0;
}
.topbar__in { display: flex; align-items: center; gap: calc(var(--u) * 4); flex-wrap: wrap; }
.brand { font-family: var(--f-display); font-size: .74rem; color: var(--fg); text-decoration: none; letter-spacing: .02em; line-height: 1.5; }
.brand b { color: var(--accent); font-weight: 400; }
.nav { display: flex; gap: calc(var(--u) * 4); flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav a { font-family: var(--f-display); font-size: .6rem; text-transform: uppercase; color: var(--fg-dim); text-decoration: none; letter-spacing: .04em; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--accent-2); }

.foot { border-top: 3px solid var(--border); padding: calc(var(--u) * 10) 0; margin-top: calc(var(--u) * 14); font-size: .9rem; color: var(--fg-dim); }

/* ---------- Skin-Wechsler -------------------------------------------------- */

.skinbar { display: flex; gap: calc(var(--u) * 1.5); align-items: center; flex-wrap: wrap; }
.skinbar__b {
  width: calc(var(--u) * 6); height: calc(var(--u) * 6);
  border: 2px solid var(--border); cursor: pointer; padding: 0;
  font-size: 0; line-height: 0;
}
.skinbar__b[aria-pressed='true'] { border-color: var(--border-hi); box-shadow: inset 0 0 0 2px var(--bg); }
.sw-demoscene { background: linear-gradient(135deg, #ff2e88 50%, #00f0ff 50%); }
.sw-c64       { background: linear-gradient(135deg, #40318d 50%, #7869c4 50%); }
.sw-gameboy   { background: linear-gradient(135deg, #9bbc0f 50%, #0f380f 50%); }
.sw-amber     { background: linear-gradient(135deg, #170d00 50%, #ffb000 50%); }
.sw-vapor     { background: linear-gradient(135deg, #ff71ce 50%, #01cdfe 50%); }
.sw-paper     { background: linear-gradient(135deg, #f4f1ea 50%, #b3001b 50%); }

/* ---------- Fliesstext im Artikel ------------------------------------------ */

.prose { font-size: 1.06rem; line-height: 1.75; }
.prose h2 { margin-top: calc(var(--u) * 12); }
.prose h3 { margin-top: calc(var(--u) * 8); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.15em; }
.prose li { margin-bottom: .5em; }
.prose blockquote {
  margin: calc(var(--u) * 6) 0;
  padding: calc(var(--u) * 4) calc(var(--u) * 5);
  border-left: calc(var(--u) * 2) solid var(--accent);
  background: var(--surface);
  color: var(--fg);
}
.prose code { font-family: var(--f-term); font-size: 1.15em; background: var(--surface-2); padding: 0 .3em; }
.prose figure { margin: calc(var(--u) * 8) 0; }
.prose figcaption { font-size: .8rem; color: var(--fg-dim); margin-top: calc(var(--u) * 2); }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: calc(var(--u) * 6) 0; }
.prose th, .prose td { padding: calc(var(--u) * 2); border: 2px solid var(--border); text-align: left; }
.prose th { font-family: var(--f-display); font-size: .55rem; text-transform: uppercase; }

/* ---------- Kleinkram ------------------------------------------------------ */

.tag {
  display: inline-block; font-family: var(--f-display); font-size: .52rem;
  text-transform: uppercase; padding: calc(var(--u)) calc(var(--u) * 2);
  border: 2px solid var(--border); color: var(--fg-dim); letter-spacing: .04em;
}
.rule { height: 3px; background: var(--border); border: 0; margin: calc(var(--u) * 8) 0; }
.center { text-align: center; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}