/* NTR — ein Raster, eine Familie, eine Haarlinie, ein Radius (0).
   Farbharmonie: komplementär Rot ↔ Cyan. Rot bleibt unter 10 % der Fläche. */

@font-face {
  font-family: "Switzer";
  src: url("/schrift/Switzer-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/schrift/Switzer-VariableItalic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --papier:  #f2f1ec;
  --papier2: #e9e8e2;
  --tinte:   #111110;
  --tinte-2: #5c5b56;
  --linie:   rgba(17, 17, 16, .14);
  --linie-2: rgba(17, 17, 16, .28);
  --rot:     #d9291c;
  --cyan:    #17a894;
  --platte:  #0c0c0b;

  --schritt: 8px;
  --rand: clamp(16px, 4vw, 40px);
  --breite: 1560px;
  --kopf-h: 62px;
  --zeit: 120ms;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: "Switzer", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-weight: 420;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 620; letter-spacing: -.022em; line-height: 1.08; }
p { margin: 0; }
img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
a:not(.knopf):not(.marke):hover { color: var(--rot); }

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

.label {
  display: inline-block;
  font-size: 11px;
  font-weight: 560;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-2);
}

.sprung {
  position: absolute; left: -9999px;
  background: var(--tinte); color: var(--papier); padding: 12px 18px; z-index: 99;
}
.sprung:focus { left: 0; top: 0; }

/* ------------------------------------------------------------- Kopfzeile -- */

.kopf {
  position: sticky; top: 0; z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  min-height: var(--kopf-h);
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}

.marke {
  display: flex; align-items: center;
  padding: 0 var(--rand);
  font-size: 13px; font-weight: 620; letter-spacing: .1em;
}
.marke::before {
  content: ""; width: 9px; height: 9px; margin-right: 10px;
  background: var(--rot); border-radius: 50%;
  transition: transform var(--zeit) ease;
}
.marke:hover::before { transform: scale(1.5); }

.kopf-nav { display: flex; }
.kopf-nav a {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 10px clamp(16px, 3vw, 34px);
  border-left: 1px solid var(--linie);
  font-size: 13px; font-weight: 500;
  white-space: nowrap;   /* CJK bricht sonst mitten im Wort: 도구 → 도/구 */
  transition: background var(--zeit) ease, color var(--zeit) ease;
}
.kopf-nav a:last-child { border-right: 1px solid var(--linie); }
/* Auch ohne Zahl behaelt die Zeile ihre Hoehe — sonst rutschen
   Playground und Patreon gegen Tools und Tutorials nach unten. */
.kopf-nav a b {
  display: block;
  min-height: 12px;
  font-size: 10px; font-weight: 500; line-height: 1.2;
  color: var(--tinte-2);
}
.kopf-nav a:hover { background: var(--tinte); color: var(--papier); }
.kopf-nav a:hover b { color: var(--papier); opacity: .6; }
.kopf-nav a[aria-current="page"] { background: var(--tinte); color: var(--papier); }
.kopf-nav a[aria-current="page"] b { color: var(--papier); opacity: .6; }

.kopf-aktion {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 var(--rand);
}

.sprachen { display: flex; gap: 2px; }
.sprachen a {
  padding: 5px 7px;
  font-size: 11px; font-weight: 560; letter-spacing: .10em;
  color: var(--tinte-2);
  transition: background var(--zeit) ease, color var(--zeit) ease;
}
.sprachen a:hover { color: var(--tinte); }
.sprachen a[aria-current="true"] {
  background: var(--tinte); color: var(--papier);
}

/* ----------------------------------------------------------------- Fläche -- */

main {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
}

section { padding-block: calc(var(--schritt) * 9); }
section + section { border-top: 1px solid var(--linie); }

/* ------------------------------------------------------------------ Motto -- */

.motto { padding-block: clamp(48px, 11vh, 132px) calc(var(--schritt) * 7); }
.motto h1 {
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  font-weight: 680;
  letter-spacing: -.036em;
  max-width: 16ch;
}
.motto-sub {
  margin-top: calc(var(--schritt) * 3);
  max-width: 46ch;
  color: var(--tinte-2);
  font-size: 1.0625rem;
}

/* ---------------------------------------------------------------- Platte --- */
/* Jedes Medium sitzt auf schwarzer Platte — die Letterbox der Videos. */

.platte {
  position: relative;
  background: var(--platte);
  overflow: hidden;
}
.platte img { width: 100%; height: 100%; object-fit: cover; }
.platte-leer::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg, transparent 0 7px, rgba(255,255,255,.045) 7px 8px);
}
.platte-gross { margin-block: calc(var(--schritt) * 4); }

/* -------------------------------------------------------------- Held ------ */

.held { display: grid; grid-template-columns: 1.35fr 1fr; gap: calc(var(--schritt) * 5); align-items: center; }
.held-titel { font-size: clamp(1.8rem, 3.2vw, 3rem); margin-top: calc(var(--schritt) * 1.5); }
.held-claim { margin-top: calc(var(--schritt) * 2); color: var(--tinte-2); max-width: 42ch; }
.held-aktion { display: flex; flex-wrap: wrap; gap: 10px; margin-top: calc(var(--schritt) * 4); }

/* -------------------------------------------------------------- Knöpfe ---- */

.knopf {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 20px;
  font-size: 14px; font-weight: 560; letter-spacing: -.005em;
  border: 1px solid var(--tinte);
  transition: background var(--zeit) ease, color var(--zeit) ease,
              border-color var(--zeit) ease;
  cursor: pointer;
}
.knopf-kauf { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf-kauf:hover { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.knopf-still { background: transparent; color: var(--tinte); }
.knopf-still:hover { background: var(--tinte); color: var(--papier); }
.knopf-klein { padding: 9px 14px; font-size: 13px; }
.knopf-preis {
  padding-left: 12px; border-left: 1px solid rgba(255,255,255,.35);
  font-weight: 500;
}

/* ---------------------------------------------------------------- Rails ---- */

.rail-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: calc(var(--schritt) * 4);
}
.rail-kopf h2 { font-size: clamp(1.3rem, 2vw, 1.75rem); }
.weiter { font-size: 13px; font-weight: 560; }

.gitter { display: grid; gap: calc(var(--schritt) * 4) calc(var(--schritt) * 3); }
.gitter-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------------------------------------------------------------- Karten --- */

.karte { display: flex; flex-direction: column; }
.karte-medium { position: relative; display: block; }
.karte .platte { aspect-ratio: 16 / 9; }
.karte-medium img { transition: transform 260ms ease; }
.karte-medium:hover img { transform: scale(1.02); }

.karte-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: calc(var(--schritt) * 2);
  padding-bottom: 6px;
}
.karte-titel { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.012em; }
.preis { font-size: 14px; font-weight: 560; white-space: nowrap; }
.karte-claim { color: var(--tinte-2); font-size: 15px; line-height: 1.5; }
.karte-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: calc(var(--schritt) * 2);
}

.spielen {
  position: absolute; left: 14px; bottom: 14px;
  padding: 5px 10px;
  background: rgba(12,12,11,.72); color: #fff;
  font-size: 11px; font-weight: 560; letter-spacing: .12em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.frei {
  font-size: 11px; font-weight: 560; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan);
}

/* ------------------------------------------------------------ Filterleiste - */

.listenkopf { padding-block: clamp(40px, 8vh, 88px) calc(var(--schritt) * 4); }
.listenkopf h1 { font-size: clamp(2rem, 5vw, 3.75rem); letter-spacing: -.03em; }
.listenkopf p { margin-top: calc(var(--schritt) * 2); max-width: 52ch; color: var(--tinte-2); }

.filterleiste {
  position: sticky; top: var(--kopf-h); z-index: 30;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: calc(var(--schritt) * 3);
  padding-block: 14px;
  background: var(--papier);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.filterleiste + .gitter { padding-top: calc(var(--schritt) * 5); border-top: 0; }

.suchfeld { position: relative; flex: 0 1 280px; }
.suchfeld input {
  width: 100%;
  padding: 8px 34px 8px 0;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--linie-2);
  font: inherit; font-size: 15px; color: inherit;
}
.suchfeld input::placeholder { color: var(--tinte-2); }
.suchfeld input:focus { outline: 0; border-bottom-color: var(--cyan); }
.suchfeld kbd {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  padding: 2px 7px;
  border: 1px solid var(--linie-2);
  font-family: inherit; font-size: 11px; color: var(--tinte-2);
  pointer-events: none;
}
.suchfeld input:focus + kbd { opacity: 0; }

.filter-gruppe { display: flex; align-items: center; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--linie-2);
  font: inherit; font-size: 13px; font-weight: 500; color: var(--tinte);
  cursor: pointer;
  transition: background var(--zeit) ease, color var(--zeit) ease,
              border-color var(--zeit) ease;
}
.chip:hover { border-color: var(--tinte); }
.chip[aria-pressed="true"] {
  background: var(--tinte); border-color: var(--tinte); color: var(--papier);
}
.zuruecksetzen {
  padding: 6px 0;
  background: none; border: 0; border-bottom: 1px solid var(--rot);
  font: inherit; font-size: 13px; font-weight: 560; color: var(--rot);
  cursor: pointer;
}
.treffer {
  margin-left: auto;
  font-size: 11px; font-weight: 560; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinte-2);
}

.karte[hidden] { display: none; }
.leer { padding-block: calc(var(--schritt) * 10); color: var(--tinte-2); }
.leer button {
  background: none; border: 0; border-bottom: 1px solid var(--rot);
  font: inherit; color: var(--rot); cursor: pointer; padding: 0;
}

/* ---------------------------------------------------------------- Detail --- */

.detail { padding-block: clamp(40px, 8vh, 88px) calc(var(--schritt) * 12); }
.detail-schmal { max-width: 68ch; }
.detail-kopf h1 {
  margin-top: calc(var(--schritt) * 1.5);
  font-size: clamp(2rem, 5vw, 3.75rem); letter-spacing: -.03em;
  max-width: 20ch;
}
.detail-claim { margin-top: calc(var(--schritt) * 2); max-width: 46ch; color: var(--tinte-2); font-size: 1.125rem; }
.detail-aktion { display: flex; flex-wrap: wrap; gap: 10px; margin-top: calc(var(--schritt) * 4); }

.detail-satz {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: calc(var(--schritt) * 6);
  padding-top: calc(var(--schritt) * 5);
  border-top: 1px solid var(--linie);
}

.prosa { max-width: 66ch; }
.prosa > * + * { margin-top: calc(var(--schritt) * 2.5); }
.prosa h2 { font-size: 1.35rem; margin-top: calc(var(--schritt) * 5); }
.prosa h3 { font-size: 1.0625rem; margin-top: calc(var(--schritt) * 4); }
.prosa ul, .prosa ol { margin: 0; padding-left: 1.2em; }
.prosa li + li { margin-top: 6px; }
.prosa a { border-bottom: 1px solid var(--linie-2); }
.prosa code {
  padding: 2px 5px; background: var(--papier2);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .875em;
}
.prosa pre {
  padding: 18px; background: var(--platte); color: #e8e7e1;
  overflow-x: auto;
}
.prosa pre code { background: none; padding: 0; color: inherit; }
.prosa blockquote {
  margin: 0; padding-left: 20px; border-left: 2px solid var(--linie-2);
  color: var(--tinte-2);
}
.prosa hr { border: 0; border-top: 1px solid var(--linie); }

.fakten { align-self: start; position: sticky; top: calc(var(--kopf-h) + 24px); }
.fakten dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.fakten dt { font-size: 11px; font-weight: 560; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }
.fakten dd { margin: 0; }
.fakten-hinweis { margin-top: calc(var(--schritt) * 3); font-size: 13px; color: var(--tinte-2); }

/* ---------------------------------------------------------------- Stufen --- */

.stufen { border-top: 1px solid var(--linie); }
.stufen h2 { margin-bottom: calc(var(--schritt) * 4); font-size: 1.35rem; }
.stufe { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--linie-2); }
.stufe-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.stufe-kopf h3 { font-size: 1.0625rem; }
.stufe p { margin-top: 10px; font-size: 15px; color: var(--tinte-2); }
.merkmale { margin: 16px 0 22px; padding: 0; list-style: none; font-size: 14px; }
.merkmale li { padding-left: 18px; text-indent: -18px; }
.merkmale li + li { margin-top: 7px; }
.merkmale li::before { content: "→ "; color: var(--tinte-2); }
.stufe .knopf { margin-top: auto; justify-content: center; }

/* ----------------------------------------------------------------- Video --- */

.video { position: relative; }
.video-start {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer;
  color: #fff; font: inherit; font-size: 15px; font-weight: 560;
}
.video-start::before {
  content: ""; width: 62px; height: 62px; margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,.7); border-radius: 50%;
  background: rgba(12,12,11,.35);
  transition: background var(--zeit) ease, transform var(--zeit) ease;
}
.video-start:hover::before { background: var(--rot); border-color: var(--rot); transform: scale(1.06); }
.video-start span { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

.freie-datei { margin-top: calc(var(--schritt) * 4); padding-top: calc(var(--schritt) * 3); border-top: 1px solid var(--linie); }
.freie-datei p { margin: 8px 0 16px; font-size: 14px; color: var(--tinte-2); }

/* --------------------------------------------------------------- Patreon --- */

.patreon-block {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--schritt) * 5); flex-wrap: wrap;
}
.patreon-block h2 { margin-top: calc(var(--schritt) * 1.5); font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.patreon-block p { margin-top: calc(var(--schritt) * 2); max-width: 52ch; color: var(--tinte-2); }

/* ------------------------------------------------------------------ Fuß ---- */

.fuss {
  max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand) calc(var(--schritt) * 6);
  border-top: 1px solid var(--linie);
}
.fuss-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-block: 18px;
}
.fuss-zeile + .fuss-zeile { border-top: 1px solid var(--linie); }
.fuss nav { display: flex; gap: 22px; font-size: 13px; }

/* -------------------------------------------------------------- Schmaler --- */

@media (max-width: 1080px) {
  .gitter-3 { grid-template-columns: repeat(2, 1fr); }
  .held { grid-template-columns: 1fr; }
  .detail-satz { grid-template-columns: 1fr; }
  .fakten { position: static; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  /* Zwei Zeilen: Marke und Sprachen oben, Menue darunter über die Breite.
     Die Sprachwahl auszublenden waere die bequeme, aber falsche Loesung. */
  .kopf {
    grid-template-columns: 1fr auto;
    grid-template-areas: "marke sprachen" "nav nav";
  }
  .marke { grid-area: marke; padding: 0 16px; }
  .kopf-aktion { grid-area: sprachen; padding: 0 10px; }
  .kopf-nav { grid-area: nav; border-top: 1px solid var(--linie); }
  .kopf-nav a { flex: 1; padding: 8px 10px; align-items: center; }
  .kopf-nav a:first-child { border-left: 0; }
  .kopf-nav a:last-child { border-right: 0; }
  .gitter-3 { grid-template-columns: 1fr; }
  .filterleiste { gap: 14px; }
  .filter-gruppe { width: 100%; }
  .treffer { margin-left: 0; }
  .suchfeld { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .karte-medium:hover img { transform: none; }
}

@media print {
  .kopf, .filterleiste, .fuss, .knopf { display: none; }
}

/* --------------------------------------------------------------- CJK ------ */
/* Switzer trägt keine chinesischen Glyphen. Für lateinische Reste bleibt sie
   vorn, dahinter übernehmen die Systemschriften. Laufweiten, die für
   lateinische Versalien gesetzt sind, schaden CJK-Zeichen — zurück auf 0. */

html[lang="zh"] body {
  font-family: "Switzer", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
html[lang="ja"] body {
  font-family: "Switzer", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic", "Noto Sans JP", sans-serif;
}
html[lang="ko"] body {
  font-family: "Switzer", "Apple SD Gothic Neo", "Malgun Gothic",
               "Noto Sans KR", sans-serif;
}
html[lang="zh"] h1, html[lang="ja"] h1, html[lang="ko"] h1,
html[lang="zh"] h2, html[lang="ja"] h2, html[lang="ko"] h2,
html[lang="zh"] h3, html[lang="ja"] h3, html[lang="ko"] h3 { letter-spacing: 0; }
html[lang="zh"] .label, html[lang="ja"] .label,
html[lang="ko"] .label { letter-spacing: .04em; }
html[lang="ko"] body { word-break: keep-all; }

/* ------------------------------------------------------------- Gummilinien - */
/* Die waagerechten Haarlinien im Inhalt werden von gummi.js gezeichnet und
   verhalten sich wie Gummibänder. Das Gerüst — Kopfzeile und Filterleiste —
   bleibt fest. Ohne JavaScript greift nichts davon und die CSS-Linien stehen. */

.gummi-flaeche {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

html.gummi main > section + section,
html.gummi .detail-satz,
html.gummi .stufen,
html.gummi .freie-datei,
html.gummi .fuss,
html.gummi .fuss-zeile + .fuss-zeile {
  border-color: transparent;   /* Breite bleibt — kein Versatz im Layout */
}

@media print { .gummi-flaeche { display: none; } }

/* ------------------------------------------------------------ GLSL-Platte -- */
/* Liegt über dem Standbild. Erscheint erst, wenn das erste Bild steht —
   schlägt etwas fehl, bleibt das Standbild sichtbar und niemand merkt es. */

.shader-flaeche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 220ms ease;
}
.platte.shader-an .shader-flaeche { opacity: 1; }

/* ------------------------------------------------------------ Operator-Netz */
/* Eine laufende TOP-Kette, gezeichnet wie eine technische Skizze: keine
   Fläche, keine Kiste — nur Höhenlinien in Tinte auf dem Papier der Seite.
   netz.js misst die Knotenkästen aus dem DOM und zeichnet die Vorschau
   genau dorthin. Ohne WebGL bleibt die Kette als Navigation stehen. */

.motto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: calc(var(--schritt) * 6);
  align-items: center;
}

.netz {
  position: relative;
  aspect-ratio: 5 / 4;
  --luecke: 16px;
}

.netz-flaeche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 320ms ease;
}
.netz.netz-an .netz-flaeche { opacity: 1; }

.netz-knoten {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--luecke);
  margin: 0; padding: 0;
  list-style: none;
}

.netz-knoten a { display: block; color: var(--tinte-2); }
.netz-knoten a:hover { color: var(--tinte); }

.netz-bild {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  outline: 1px solid var(--linie);
  transition: outline-color var(--zeit) ease;
}
.netz-knoten li[aria-current="true"] .netz-bild { outline-color: var(--cyan); }

/* Der Draht zwischen zwei Operatoren, samt Eingang. */
.netz-knoten li + li .netz-bild::before {
  content: "";
  position: absolute;
  right: 100%; top: 50%;
  width: var(--luecke);
  border-top: 1px solid var(--linie-2);
}
.netz-knoten li + li .netz-bild::after {
  content: "";
  position: absolute;
  left: -2px; top: 50%;
  width: 4px; height: 4px;
  transform: translateY(-50%);
  background: var(--cyan);
}

.netz-name {
  display: block;
  margin-top: 8px;
  font-size: 12px; font-weight: 560; letter-spacing: -.005em;
  color: var(--tinte);
}
.netz-art {
  display: block;
  font-size: 10px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-2);
}

@media (max-width: 1080px) {
  .motto { grid-template-columns: 1fr; }
  .netz { aspect-ratio: 16 / 11; }
}
@media (max-width: 560px) {
  .netz-knoten { gap: 10px; }
  .netz-art { display: none; }
}

/* ------------------------------------------------------------- Stöbern ---- */

.themen { margin-top: calc(var(--schritt) * 3); }
.marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.marke-thema {
  padding: 5px 10px;
  border: 1px solid var(--linie-2);
  font-size: 12px; font-weight: 500;
  transition: background var(--zeit) ease, color var(--zeit) ease,
              border-color var(--zeit) ease;
}
.marke-thema:hover {
  background: var(--tinte); border-color: var(--tinte); color: var(--papier);
}

.weiterlesen {
  margin-top: calc(var(--schritt) * 8);
  padding-top: calc(var(--schritt) * 5);
  border-top: 1px solid var(--linie);
}

/* --------------------------------------------------- Fortschritt ---------- */
/* Ein Kanal je Information: gesehen ist ein Haken, nicht Haken plus Grauschleier.
   Die Bilder werden nicht abgedunkelt — es sind Tims Arbeiten, keine Haken. */

.karte.ist-gesehen .karte-fuss .label::before {
  content: "✓ ";
  color: var(--cyan);
}
.karte.ist-geholt .frei { color: var(--tinte-2); }
.karte.ist-geholt .frei::before { content: "✓ "; }

.chip-stand {
  margin-left: 7px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  opacity: .55;
}

.fortschritt {
  margin-top: calc(var(--schritt) * 2);
  font-size: 11px; font-weight: 560; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinte-2);
}
.vergessen {
  margin-left: 14px; padding: 0;
  background: none; border: 0; border-bottom: 1px solid var(--rot);
  font: inherit; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rot); cursor: pointer;
}

/* Die Serie als Weg: am Ende steht das nächste Stück, keine Sackgasse. */
.serienweg {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-top: calc(var(--schritt) * 8);
  padding: calc(var(--schritt) * 3) 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  transition: padding-left var(--zeit) ease;
}
.serienweg:hover { padding-left: 10px; }
.serienweg-titel {
  flex: 1 1 auto;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -.02em;
}
.serienweg-nr {
  font-size: 11px; font-weight: 560; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinte-2);
}
.serienweg .label { flex: 0 0 auto; }

/* ---------------------------------------------------------- Spielplatz ---- */
/* Code links, Ergebnis rechts — auf breiten Schirmen nebeneinander, sonst
   das Bild zuerst. Das Feld ist eine Textarea, kein nachgebauter Editor:
   Auswahl, Rückgängig und Tastatur des Systems bleiben, wie sie sind. */

.spielplatz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--schritt) * 4);
  padding-block: calc(var(--schritt) * 4) calc(var(--schritt) * 12);
}

.sp-bild { order: 2; align-self: start; position: sticky; top: calc(var(--kopf-h) + 24px); }
.sp-code { order: 1; }

.sp-bild .platte { aspect-ratio: 16 / 10; }
.sp-flaeche { display: block; width: 100%; height: 100%; }

.sp-leiste {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding-top: calc(var(--schritt) * 2);
}
.sp-vorlage {
  padding: 9px 12px;
  background: transparent;
  border: 1px solid var(--linie-2);
  font: inherit; font-size: 13px; color: var(--tinte);
}
.sp-stand {
  flex: 1 1 100%;
  padding-top: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--tinte-2);
}
.sp-kaputt .sp-stand { color: var(--rot); }

.sp-hilfe {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 16px;
  margin: calc(var(--schritt) * 3) 0 0;
  padding-top: calc(var(--schritt) * 2);
  border-top: 1px solid var(--linie);
  font-size: 13px;
}
.sp-hilfe dt {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; color: var(--tinte);
}
.sp-hilfe dd { margin: 0; color: var(--tinte-2); }

.sp-code {
  display: flex;
  min-height: 520px;
  border: 1px solid var(--linie-2);
  background: var(--papier2);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px; line-height: 1.55;
}
.sp-nummern {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  padding: 14px 10px 14px 14px;
  overflow: hidden;
  border-right: 1px solid var(--linie);
  color: var(--tinte-2);
  text-align: right;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.sp-text {
  flex: 1 1 auto;
  padding: 14px;
  background: transparent;
  border: 0;
  resize: none;
  font: inherit;
  color: var(--tinte);
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}
.sp-text:focus { outline: 0; }
.sp-code:focus-within { border-color: var(--cyan); }

@media (max-width: 900px) {
  .spielplatz { grid-template-columns: 1fr; }
  .sp-bild { order: 1; position: static; }
  .sp-code { order: 2; min-height: 380px; }
}

/* Spielplatz für Anfänger: Nachschlagewerk neben dem Bild, Hinweis zum Fehler */

.sp-anfang { margin-top: calc(var(--schritt) * 2); }

.sp-referenz {
  margin-top: calc(var(--schritt) * 3);
  padding-top: calc(var(--schritt) * 2);
  border-top: 1px solid var(--linie);
  font-size: 13px;
}
.sp-referenz details + details { border-top: 1px solid var(--linie); }
.sp-referenz summary {
  padding: 7px 0;
  font-size: 11px; font-weight: 560; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinte-2);
  cursor: pointer;
}
.sp-referenz summary:hover { color: var(--tinte); }
.sp-referenz ul { margin: 0 0 10px; padding: 0; list-style: none; }
.sp-referenz li { padding: 2px 0; color: var(--tinte-2); }
.sp-referenz code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; color: var(--tinte);
}
.sp-quelle { margin-top: 10px; font-size: 12px; color: var(--tinte-2); }
.sp-quelle a { border-bottom: 1px solid var(--linie-2); }

.sp-hinweis { display: block; margin-top: 3px; color: var(--tinte-2); }
.knopf[disabled] { opacity: .4; cursor: default; }
.knopf[disabled]:hover { background: transparent; color: var(--tinte); }

/* ------------------------------------------------------------- Fokus ------ */
/* Der Besucher sagt einmal, weswegen er hier ist; die Seite ordnet sich
   danach. Dieselben Chips wie im Filter — ein System, keine zweite Sprache. */

.fokus {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: calc(var(--schritt) * 4);
}