/* Planet Zed — Amber-Phosphor-Terminal
   Palette und Typografie sind in BRIEF.md festgelegt und nicht frei.
   Gesetz dieser Seite: Karmin gehört der linken Spur, Bernstein der rechten.
   Berühren dürfen sie sich nur in der Rinne. */

/* ---------- Schriften ----------
   Selbst gehostet, latin-Subset, woff2. Von Google Fonts geholt am 2026-09-13.
   Orbitron, Exo 2 und IBM Plex Mono stehen alle unter der SIL Open Font
   License 1.1. Kein Aufruf an fonts.googleapis.com oder fonts.gstatic.com —
   die Seite lädt von keinem fremden Host.
   Hinweis: U+2192 (→) liegt außerhalb des latin-Subsets und rendert aus dem
   Fallback-Stack; in Mono-Kontext fällt das nicht auf. */

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/exo2-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/exo2-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plexmono-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/orbitron-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/orbitron-800.woff2') format('woff2');
}

:root {
  --ground:    #12080A;
  --surface:   #1F0E12;
  --line:      #33191E;
  --karmin:    #9B1B30;
  --karmin-hi: #B52440;
  --amber:     #E8A33D;
  --amber-hi:  #FFD79A;
  --ink:       #F2E7E4;
  --ink-mute:  #BFA39F;
  --rinne-bg:  #0D0507;

  --f-display: "Orbitron", "Eurostile", "Arial Narrow", sans-serif;
  --f-body:    "Exo 2", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --rinne: 0.875rem;
  --pad:   clamp(1.25rem, 5vw, 3rem);
  --scan:  repeating-linear-gradient(to bottom, rgba(0,0,0,.26) 0 1px, transparent 1px 3px);
}

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

html {
  scrollbar-color: var(--line) var(--ground);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid var(--ground); }
::-webkit-scrollbar-thumb:hover { background: var(--karmin); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--karmin); color: var(--ink); }

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

a { color: var(--amber); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--amber-hi); }

h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--amber); color: var(--ground);
  font-family: var(--f-mono); font-size: .8125rem;
  padding: .75rem 1.25rem; text-decoration: none;
}
.skip:focus { left: 0; }
.skip:hover { color: var(--ground); }

/* ---------- Kopfband ---------- */

.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .7rem var(--pad);
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .1em;
}

.bar__mark { color: var(--amber); text-decoration: none; white-space: nowrap; }
.bar__mark::before { content: "> "; color: var(--ink-mute); }

.bar__nav { display: flex; gap: clamp(.9rem, 3vw, 1.75rem); }
.bar__nav a {
  color: var(--ink-mute);
  text-transform: uppercase;
  text-decoration: none;
}
.bar__nav a:hover { color: var(--amber); }

/* ---------- Hero ---------- */

.hero {
  padding: clamp(2.5rem, 9vh, 5rem) var(--pad) clamp(2rem, 6vh, 3.25rem);
}

.wordmark {
  position: relative;
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 11vw, 6rem);
  line-height: .95;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
}

.wordmark::before, .wordmark::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
.wordmark::before { color: var(--karmin); }
.wordmark::after  { color: var(--amber); }
.wordmark:hover::before { opacity: 1; animation: glitch-a .38s steps(2, end) 3; }
.wordmark:hover::after  { opacity: 1; animation: glitch-b .38s steps(2, end) 3; }

@keyframes glitch-a {
  0%   { transform: translate(-3px, 1px);  clip-path: inset(14% 0 62% 0); }
  50%  { transform: translate(3px, -1px);  clip-path: inset(58% 0 18% 0); }
  100% { transform: translate(-1px, 0);    clip-path: inset(34% 0 44% 0); }
}
@keyframes glitch-b {
  0%   { transform: translate(3px, -1px);  clip-path: inset(66% 0 12% 0); }
  50%  { transform: translate(-2px, 1px);  clip-path: inset(22% 0 54% 0); }
  100% { transform: translate(1px, 0);     clip-path: inset(46% 0 30% 0); }
}

.hero__zeit {
  margin-top: 1.15rem;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: clamp(.95rem, 3vw, 1.35rem);
  letter-spacing: .2em;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  text-shadow: 0 0 14px rgba(232, 163, 61, .38);
}

/* Der Cursor blinkt, weil ein Phosphor-Terminal einen Cursor hat. */
.hero__zeit::after {
  content: "";
  display: inline-block;
  width: .58em;
  height: 1.02em;
  margin-left: .45em;
  vertical-align: -.14em;
  background: var(--amber);
  box-shadow: 0 0 12px rgba(232, 163, 61, .45);
  animation: blink 1.06s steps(1, end) infinite;
}
@keyframes blink { 0%, 68% { opacity: 1; } 68.01%, 100% { opacity: 0; } }

.hero__claim {
  margin-top: 1.1rem;
  max-width: 44ch;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--ink-mute);
}

/* ---------- Zwei Spuren und die Rinne ---------- */

.split {
  display: grid;
  grid-template-columns: var(--rinne) minmax(0, 1fr);
  border-top: 1px solid var(--line);
}

.rinne {
  grid-column: 1; grid-row: 1 / span 2;
  position: relative;
  background: var(--rinne-bg);
  /* Gestapelt grenzt die Rinne nacheinander an beide Spuren, deshalb tragen
     dort die Spuren selbst die Farbkante. Nebeneinander trägt sie die Rinne. */
  border-left: 1px solid var(--line);
  border-right: 0;
}

.rinne canvas {
  position: absolute; top: 0; left: 0;
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
}

.spur { padding: clamp(1.75rem, 5vw, 3rem) var(--pad) clamp(2.5rem, 7vw, 4rem); }
.spur--sende    { grid-column: 2; grid-row: 1; border-left: 1px solid var(--karmin-hi); }
.spur--maschine {
  grid-column: 2; grid-row: 2;
  background: var(--surface);
  border-left: 1px solid var(--amber);
}

.spur__kopf {
  position: relative;
  display: block;
  width: fit-content;
  margin-bottom: 1.75rem;
  padding: .6rem 1.1rem;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.8vw, 1.7rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
}
.spur__kopf::before, .spur__kopf::after {
  content: "";
  position: absolute;
  width: .7rem; height: .7rem;
}
.spur__kopf::before { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.spur__kopf::after { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }

.spur--sende .spur__kopf::before,
.spur--sende .spur__kopf::after { border-color: var(--karmin); }
.spur--maschine .spur__kopf::before,
.spur--maschine .spur__kopf::after { border-color: var(--amber); }

/* ---------- Abschnittslabels ---------- */

.cmd {
  margin: 2.75rem 0 .9rem;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: .8125rem;
  letter-spacing: .07em;
  color: var(--amber);
  text-shadow: 0 0 9px rgba(232, 163, 61, .24);
}
.cmd::before { content: "> "; color: var(--ink-mute); }

/* Das Farbgesetz: Bernstein gehört der rechten Spur. Links tragen Labels und
   Links den Ink-Ton, Karmin bleibt dort Fläche — als Textfarbe ist es mit
   2,4:1 durchgefallen und deshalb nirgends erlaubt. */
.spur--sende .cmd,
.spur--sende .svc b,
.spur--sende a { color: var(--ink); }
/* Kein Bernstein-Leuchten links, auch nicht als geerbter Schein. */
.spur--sende .cmd,
.spur--sende .svc b { text-shadow: none; }
/* Ohne Bernstein braucht der Link links eine eigene Ruhe-Affordanz.
   Karmin trägt sie als Linie, nicht als Textfarbe. */
.spur--sende .svc b,
.spur--sende .more a {
  text-decoration: underline;
  text-decoration-color: var(--karmin-hi);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
.spur--sende a:hover,
.spur--sende .svc:hover b {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--karmin-hi);
  text-decoration-thickness: 2px;
}
.spur--sende .btn,
.spur--sende .btn:hover { text-decoration: none; }

/* ---------- Hauptaktion ---------- */

.btn {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 1.15rem 1.75rem;
  background: var(--karmin);
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(.85rem, 2.4vw, 1rem);
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .18s cubic-bezier(.2,.7,.3,1);
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--scan);
  pointer-events: none;
}
.btn:hover { background: var(--karmin-hi); color: var(--ink); }

.btn__sub {
  margin-top: .6rem;
  font-family: var(--f-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
}

/* ---------- Sendeplan ---------- */

.plan {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-mono);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.plan th, .plan td {
  padding: .6rem .8rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}
.plan th {
  width: 3.5rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.plan td { color: var(--ink-mute); }
.plan__t { white-space: nowrap; }

.plan tr.on th, .plan tr.on td {
  position: relative;
  background-color: var(--karmin);
  background-image: var(--scan);
  border-bottom-color: transparent;
  color: var(--ink);
  font-weight: 600;
}

.note {
  margin-top: 1rem;
  max-width: 52ch;
  font-size: .9rem;
  color: var(--ink-mute);
}

/* ---------- Listen und Dienste ---------- */

.games li {
  padding: .65rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 1.05rem;
}

.svc {
  display: block;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.svc b {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .02em;
  color: var(--amber);
  text-shadow: 0 0 9px rgba(232, 163, 61, .24);
  transition: color .15s cubic-bezier(.2,.7,.3,1);
}
.svc span {
  display: block;
  margin-top: .3rem;
  max-width: 58ch;
  font-size: .95rem;
  color: var(--ink-mute);
}
.svc:hover b { color: var(--amber-hi); text-decoration: underline; }

.lead {
  max-width: 54ch;
  font-size: 1.05rem;
  color: var(--ink);
}

.prose { max-width: 58ch; color: var(--ink-mute); }

.more {
  margin-top: 1.1rem;
  font-family: var(--f-mono);
  font-size: .8125rem;
  letter-spacing: .06em;
}
.more a { text-decoration: none; }
.more a::after { content: " →"; }
.more a:hover { text-decoration: underline; }

/* ---------- Socials ---------- */

.socials {
  padding: clamp(2rem, 6vw, 3.5rem) var(--pad);
  border-top: 1px solid var(--line);
}
/* Bleibt eine Kommandozeile, sitzt aber eine Stufe über den Labels in den
   Spuren — die Socials sind eine Sektion, kein Abschnitt innerhalb einer. */
.cmd--lg {
  margin-top: 0;
  margin-bottom: 1.4rem;
  font-size: 1.1rem;
}

.socials__list {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  background: var(--line);
  border: 1px solid var(--line);
}
.socials__list a {
  display: block;
  height: 100%;
  padding: 1rem 1.1rem;
  background: var(--ground);
  text-decoration: none;
  color: var(--ink);
}
.socials__list b {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.socials__list span {
  display: block;
  margin-top: .3rem;
  font-family: var(--f-mono);
  font-size: .8rem;
  color: var(--ink-mute);
  overflow-wrap: anywhere;
}
.socials__list a:hover { background: var(--surface); }
.socials__list a:hover span { color: var(--amber); }

/* ---------- Footer ---------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  padding: 1.5rem var(--pad) 2.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--ink-mute);
}
.foot a { color: var(--ink-mute); text-decoration: none; }
.foot a:hover { color: var(--amber); text-decoration: underline; }
.foot__c { flex-basis: 100%; }

/* ---------- Unterseiten ----------
   Textseiten erben die Welt, nicht die Zwei-Spuren-Struktur: die gehört zum
   Doppeljob der Startseite. Hier führt eine Lesespalte, und das laute Element
   der Seite ist keins. */

.page { padding: clamp(2.25rem, 7vh, 4rem) var(--pad) clamp(3rem, 8vh, 5rem); }

.page__titel {
  position: relative;
  display: block;
  width: fit-content;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding: .7rem 1.2rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 5.5vw, 3rem);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
}
.page__titel::before, .page__titel::after {
  content: "";
  position: absolute;
  width: .9rem; height: .9rem;
  border-color: var(--amber);
}
.page__titel::before { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.page__titel::after { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }

.cta { margin-bottom: .6rem; }
.cta .btn { display: block; }

.page__lead {
  max-width: 56ch;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  font-size: 1.05rem;
  color: var(--ink);
}

.doc { max-width: 66ch; overflow-wrap: break-word; }
/* Technische Bezeichner (OAuth-Scopes, URLs) brechen an jeder Stelle,
   sonst schieben sie auf dem Handy die ganze Seite auf. */
.doc .scope {
  font-family: var(--f-mono);
  font-size: .85em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.doc > * + * { margin-top: 1rem; }
.doc h2 {
  margin-top: 2.75rem;
  margin-bottom: .9rem;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: .8125rem;
  letter-spacing: .07em;
  color: var(--amber);
  text-shadow: 0 0 9px rgba(232, 163, 61, .24);
}
.doc h2::before { content: "> "; color: var(--ink-mute); }
.doc p, .doc li { color: var(--ink-mute); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul { margin-top: .6rem; }
.doc li { position: relative; padding-left: 1.4rem; margin-top: .45rem; }
.doc li::before {
  content: "–";
  position: absolute; left: .25rem;
  font-family: var(--f-mono);
  color: var(--amber);
}
.doc dl { margin-top: .6rem; }
.doc dt {
  margin-top: 1rem;
  font-family: var(--f-mono);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--ink);
}
.doc dd { margin: .2rem 0 0; color: var(--ink-mute); }

/* Was noch fehlt, muss man sehen. Diese Seite darf so nicht live gehen. */
.todo {
  background: var(--karmin);
  background-image: var(--scan);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: .85em;
  padding: .1em .5em;
}

/* ---------- Spec-Tabellen ---------- */

.rigs { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }

.rig__kopf {
  margin-bottom: .9rem;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: .8125rem;
  letter-spacing: .07em;
  color: var(--amber);
  text-shadow: 0 0 9px rgba(232, 163, 61, .24);
}
.rig__kopf::before { content: "> "; color: var(--ink-mute); }

.spec {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-mono);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.spec th, .spec td {
  padding: .55rem .8rem;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--line);
}
.spec th {
  width: 7rem;
  font-weight: 400;
  color: var(--ink-mute);
}
.spec td { color: var(--ink); }

.rig__note {
  margin-top: .9rem;
  max-width: 52ch;
  font-size: .9rem;
  color: var(--ink-mute);
}

/* ---------- Zwei Spuren ab 900px ---------- */

@media (min-width: 56.25rem) {
  :root { --rinne: 4.5rem; }

  .split { grid-template-columns: minmax(0, 1fr) var(--rinne) minmax(0, 1fr); }
  .rinne {
    grid-column: 2; grid-row: 1;
    border-left: 1px solid var(--karmin-hi);
    border-right: 1px solid var(--amber);
  }
  .spur--sende    { grid-column: 1; grid-row: 1; border-left: 0; }
  .spur--maschine { grid-column: 3; grid-row: 1; border-left: 0; }

  .btn { display: inline-block; }
  .foot__c { flex-basis: auto; margin-right: auto; }
  .rigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec th { width: 9.5rem; }
  .cta .btn { display: inline-block; }

  /* Der Hero über die volle Breite: Wortmarke links, Sendezeit rechts unten. */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .wordmark    { grid-column: 1; grid-row: 1; }
  .hero__claim { grid-column: 1; grid-row: 2; }
  .hero__zeit  {
    grid-column: 2; grid-row: 1 / span 2;
    align-self: end;
    margin-top: 0;
    text-align: right;
    font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  }
}

/* ---------- Bewegung abschalten ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .wordmark:hover::before,
  .wordmark:hover::after { opacity: 0; animation: none; }
  /* Der Cursor bleibt stehen, statt in einem zufälligen Zustand einzufrieren. */
  .hero__zeit::after { animation: none; opacity: 1; }
}