/* ═══════════════════════════════════════════════════════════════════
   Hauptseite — was nur www.dv-scripts.de braucht

   Auftakt mit Code und Wirkung, Faktenzeile, Voraussetzung, Versprechen,
   Können, Belege, Sammlung, Einbau, Support. Kopf, Knöpfe, Filter und
   Fuß kommen aus basis.css, Palette und Schrift aus tokens.css, die
   Bewegung der Schaubilder und des Codes aus animation.css.

   Bis zum 3. Oktober 2026 lag das auf vier Dateien verteilt, von denen
   jede die vorige überschrieb (basis → buehne → auftakt). Jetzt steht
   jede Regel genau einmal hier. Der Stand davor liegt in
   archiv/redesign-20261003/.

   Ein Abschnitt endet mit einer Linie über die volle Breite und beginnt
   mit seiner Überschrift linksbündig; ein Verweis weiter steht rechts
   daneben. Kasten haben Radius 12, eine Linie von 1px und keinen
   Schatten.
   ═══════════════════════════════════════════════════════════════════ */

.hero,.voraus,.versprechen,.koennen,.belege,.katalog,.einbau,.support{position:relative}
.versprechen,.koennen,.belege,.katalog,.einbau,.support{
  padding:var(--sec) 0;border-top:1px solid var(--line);
}

/* ── Auftakt ─────────────────────────────────────────────────────── */
.hero{overflow:hidden}
.hero-in{
  position:relative;z-index:2;
  padding-top:clamp(2.75rem,6vw,5rem);padding-bottom:clamp(2.5rem,5vw,3.75rem);
}
.hero-raster{
  display:grid;align-items:center;
  /* Die Bühne bekommt die größere Spalte: die längste Codezeile hat 67
     Zeichen, und abgeschnittener Code wäre auf einer Seite, die Code
     verkauft, der schlechteste Eindruck. */
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:var(--s-7);
}
/* Bei reduzierter Bewegung stehen alle drei Schnipsel untereinander;
   dann beginnt der Text oben statt neben der Mitte der langen Karte. */
.hero-raster:has(.stapel-ruhig){align-items:start}

.hero-text{container-type:inline-size}
/* Die Überschrift bleibt zweizeilig: „FiveM-Roleplay." ist 6,6 em breit und
   darf nie umbrechen (am Bindestrich sähe es falsch aus). Darum richtet
   sich die Schriftgröße nach der Breite der Textspalte, nicht nur nach dem
   Fenster. */
.hero h1{
  font-size:min(var(--t-hero), 14.6cqi);line-height:1;letter-spacing:-.028em;
}
/* Die zweite Zeile in der Akzentfarbe — flach, ohne Verlauf. */
.hero h1 em{display:block;font-style:normal;color:var(--accent);white-space:nowrap}
.hero .lede{
  margin-top:var(--s-5);max-width:44ch;
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);line-height:1.62;color:var(--ink-2);
}
.hero .lede strong{font-weight:600;color:var(--ink)}
.hero .lede code{font-size:.82em}
.hero-tasten{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
/* Mit .hero davor: dieselbe Klasse steht auch im Abschnitt „Support", und
   dort bleibt es bei der Zeile. Der dritte Knopf hat keinen Rand; bricht er
   in eine eigene Zeile um, steht sein Text bündig mit den Knöpfen darüber. */
.hero .hero-tasten .knopf-schlicht{padding-inline:0}

/* Die Einladung auf den Discord: ein Satz mit Verweis, keine eigene
   Schaltfläche — sie soll neben den Kaufknöpfen nicht konkurrieren. */
.hero-discord{margin-top:var(--s-5)}
.hero-discord a{
  display:inline-flex;align-items:center;gap:.6rem;color:var(--ink-2);
  font-size:var(--t-sm);line-height:1.3;
}
.hero-discord a:hover{text-decoration:none;color:var(--ink)}
.hero-discord b{
  color:var(--ink);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--line-ui);
}
.hero-discord a:hover b{text-decoration-color:currentColor}
.discord-mark{flex:none;color:var(--ink-3)}

/* Die Kulisse hinter dem Auftakt: zwei Spalten echten Lua-Codes, sehr leise,
   langsam nach oben laufend. Sie ist Zier und nichts sonst — aria-hidden im
   Markup, keine Zeigerereignisse. Zurückgenommen sind Taschenlampe, Schein
   und die Maske, die sie ausblendete. Dafür steht der Code nur noch hinter
   der Bühne rechts und läuft nie unter dem Text: was gelesen wird, steht
   auf glattem Grund. */
.code-regen{
  position:absolute;inset:0 0 0 46%;z-index:0;
  /* Absichtlich ungleiche Spaltenbreiten, Helligkeiten und Geschwindigkeiten:
     gleiche Spalten lesen sich als Raster, ungleiche ergeben Tiefe. */
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(1.5rem,3vw,3rem);padding-inline:clamp(1rem,2vw,2.5rem);
  overflow:hidden;pointer-events:none;user-select:none;color:var(--ink);
}
.regen-spalte{overflow:hidden}
.code-regen pre{
  margin:0;white-space:pre;
  /* Nicht unter 12px: die Kulisse besteht aus knapp 400 Zeilen, und
     Prüfwerkzeuge zählen sie als Seitentext mit. */
  font:400 12px/2.05 var(--mono);letter-spacing:.01em;opacity:.055;
}
.regen-spalte:nth-child(2) pre{opacity:.04;line-height:2.3}
.regen-spalte:nth-child(2){padding-top:2.1rem}
@media (max-width:1080px){
  /* Untereinander: der Code läuft hinter der Bühne, unter dem Text nicht. */
  .code-regen{inset:auto 0 0 0;height:62%}
}
@media (max-width:700px){
  .code-regen{grid-template-columns:minmax(0,1fr)}
  .regen-spalte:nth-child(2){display:none}
}

/* Die Bühne rechts: ein gerahmter Kasten, oben der Code, darunter, was er
   im Spiel bewirkt. Zwei Fenster in einem — sie gehören zusammen. */
.hero-buehne{
  min-width:0;container-type:inline-size;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;
}
.hero-code{margin:0;background:var(--sunken)}
.hero-code figcaption{
  display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.hero-code .datei,.wirkung .datei{font:500 var(--t-micro)/1.4 var(--mono);color:var(--ink-3)}
.lauf{width:7px;height:14px;border-radius:1px;background:var(--accent)}

/* Drei Schnipsel liegen übereinander in einer Rasterzelle. So gibt der
   längste die Höhe vor und nichts springt, wenn gewechselt wird. */
.code-stapel{display:grid;grid-template-columns:minmax(0,1fr)}
.schnipsel{
  /* min-width:0 ist Pflicht: Rasterelemente stehen von Haus aus auf
     min-width:auto und wachsen mit ihrem Inhalt — eine lange Codezeile
     schöbe sonst die ganze Seite auseinander, statt im Block zu
     scrollen. */
  grid-area:1/1;min-width:0;margin:0;padding:1.1rem 1.25rem 1.1rem 0;
  overflow-x:auto;counter-reset:z;transition:opacity .3s ease;
}
/* Die Schrift im Code folgt der Breite der Bühne, damit auch die längste
   Zeile (67 Zeichen, je 0,6 em) hineinpasst: Breite minus Zeilennummern
   und Ränder, geteilt durch 67 × 0,6. Nach unten bei 12px gedeckelt, nach
   oben bei 13px. */
.hero-buehne .schnipsel code{
  font-size:clamp(12px, calc((100cqi - 96px) / 40.2), 13px);line-height:1.75;color:var(--ink);
}
/* Zeilennummern aus einem Zähler — sie stehen nicht im Markup und
   verschieben sich deshalb nicht, wenn jemand eine Zeile einfügt. */
.zeile{display:block;position:relative;padding-left:3rem;counter-increment:z}
.zeile::before{
  content:counter(z);position:absolute;left:0;width:1.9rem;text-align:right;
  color:var(--ink-3);opacity:.6;font-variant-numeric:tabular-nums;user-select:none;
}
.schnipsel .c{color:var(--code-c);font-style:italic}
.schnipsel .s{color:var(--code-s)}
.schnipsel .k{color:var(--code-k);font-weight:500}
.schnipsel .n{color:var(--code-n)}
.schnipsel .g{color:var(--code-g);font-weight:500}
.schnipsel .b{color:var(--code-b)}

.hero-code-fuss{
  display:flex;align-items:center;gap:.55rem;
  padding:.7rem .9rem;background:var(--surface);border-top:1px solid var(--line);
  font-size:var(--t-xs);color:var(--ink-2);
}
.hero-code-fuss .ok{display:grid;place-items:center;flex:none;color:var(--c-smaragd)}
.hero-code-fuss b{color:var(--ink);font-family:var(--mono);font-size:.95em;font-weight:600}

/* Anhalten. Pflicht, sobald etwas länger als fünf Sekunden von selbst
   läuft — WCAG 2.2.2. */
.code-halt{
  display:grid;place-items:center;width:26px;height:26px;padding:0;margin-left:auto;cursor:pointer;
  background:transparent;border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--ink-3);transition:color .15s, border-color .15s;
}
.code-halt:hover{color:var(--ink);border-color:var(--line-ui)}
.code-halt svg{grid-area:1/1}
.code-halt .i-weiter{display:none}
.code-halt[aria-pressed="true"] .i-halt{display:none}
.code-halt[aria-pressed="true"] .i-weiter{display:block}

/* Bei reduzierter Bewegung wird nicht gewechselt — dann stehen alle drei
   untereinander, jeder mit seinem Dateinamen. */
.code-stapel.stapel-ruhig{display:block}
.code-stapel.stapel-ruhig .schnipsel{padding-top:.5rem}
.schnipsel-datei{
  display:block;padding:.8rem 1.25rem .2rem;font:500 var(--t-micro)/1.4 var(--mono);color:var(--ink-3);
}
.code-stapel.stapel-ruhig .schnipsel-datei:first-child{padding-top:.2rem}

/* „Im Spiel" */
.wirkung{margin:0;border-top:1px solid var(--line);background:var(--surface)}
.wirkung figcaption{padding:.5rem .9rem;border-bottom:1px solid var(--line)}
/* Alle Szenen liegen in einer Rasterzelle übereinander — die Höhe bleibt,
   egal welche gerade gezeigt wird. */
.szenen{display:grid;min-height:158px}
.szene{
  grid-area:1/1;position:relative;overflow:hidden;
  padding:1rem 1.15rem;display:flex;flex-direction:column;justify-content:center;
}
/* Ohne JavaScript steht nur die erste da; mit JavaScript entscheidet
   main.js über .aktiv. */
.szene:not(.szene-0){visibility:hidden}
.js .szene{visibility:hidden;opacity:0;transition:opacity .35s ease}
.js .szene.aktiv{visibility:visible;opacity:1}

/* — Szene 0: was bereitsteht — */
.szene-kopf{font:500 var(--t-xs)/1 var(--sans);color:var(--ink-3);margin-bottom:.85rem}
.szene-kopf code{color:var(--ink-2);font-size:1em;background:none;padding:0}
.bausteine{display:flex;flex-wrap:wrap;gap:.45rem}
.bausteine li{
  padding:.3rem .55rem;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:transparent;
  font:400 .75rem/1 var(--mono);color:var(--ink-3);
  transition:color .3s, border-color .3s;
}
.bausteine code{font:inherit;background:none;padding:0;color:inherit}
/* Ohne JavaScript stehen alle sofort in Farbe da. Mit JavaScript leuchten
   sie nacheinander auf, sobald der Code fertig geschrieben ist (.spielt). */
.szene-0 .bausteine li{color:var(--ink);border-color:var(--accent)}
.js .szene-0 .bausteine li{color:var(--ink-3);border-color:var(--line-2)}
.js .szene-0.spielt .bausteine li{animation:baustein .5s ease both}
@keyframes baustein{to{color:var(--ink);border-color:var(--accent)}}
.js .szene-0.spielt .bausteine li:nth-child(1){animation-delay:.05s}
.js .szene-0.spielt .bausteine li:nth-child(2){animation-delay:.17s}
.js .szene-0.spielt .bausteine li:nth-child(3){animation-delay:.29s}
.js .szene-0.spielt .bausteine li:nth-child(4){animation-delay:.41s}
.js .szene-0.spielt .bausteine li:nth-child(5){animation-delay:.53s}
.js .szene-0.spielt .bausteine li:nth-child(6){animation-delay:.65s}
.js .szene-0.spielt .bausteine li:nth-child(7){animation-delay:.77s}
.js .szene-0.spielt .bausteine li:nth-child(8){animation-delay:.89s}

/* — Szene 1: ein Punkt in der Welt — */
.szene-1{padding:0}
.welt{
  position:relative;flex:1;min-height:158px;
  /* Bodenraster: Linien statt Bild — nichts zu laden, und es bleibt scharf. */
  background:
    repeating-linear-gradient(to right, color-mix(in oklab, var(--ink) 5%, transparent) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(to bottom, color-mix(in oklab, var(--ink) 5%, transparent) 0 1px, transparent 1px 26px),
    var(--sunken);
}
.ring{
  position:absolute;left:62%;top:60%;width:92px;height:34px;
  margin:-17px 0 0 -46px;border-radius:50%;
  border:2px solid color-mix(in oklab, var(--accent) 45%, transparent);
}
.figur{
  position:absolute;left:62%;top:60%;width:11px;height:11px;margin:-6px 0 0 -6px;
  border-radius:50%;background:var(--ink);transform:translateX(-190px);
}
.textui{
  position:absolute;left:50%;bottom:.85rem;translate:-50% 0;
  display:flex;align-items:center;gap:.55rem;white-space:nowrap;
  padding:.4rem .75rem .4rem .45rem;border-radius:var(--r);
  background:var(--bg);border:1px solid var(--line-2);
  font:500 var(--t-xs)/1 var(--sans);color:var(--ink);
  opacity:0;transform:translateY(6px);
}
.textui kbd{
  display:grid;place-items:center;width:22px;height:22px;border-radius:var(--r-sm);
  background:var(--accent);color:var(--on-accent);font:600 .75rem/1 var(--mono);
}
/* Ohne JavaScript und bei reduzierter Bewegung steht der Endzustand: die
   Figur im Kreis, der Hinweis sichtbar. */
.szene-1 .figur{transform:none}
.szene-1 .textui{opacity:1;transform:none}
.szene-1 .ring{border-color:var(--accent)}
.js .szene-1 .figur{transform:translateX(-190px)}
.js .szene-1 .textui{opacity:0;transform:translateY(6px)}
.js .szene-1 .ring{border-color:color-mix(in oklab, var(--accent) 45%, transparent)}
/* Hinein, stehen, wieder hinaus: onEnter, nearby, onExit. */
.js .szene-1.spielt .figur{animation:figur-weg 3.7s cubic-bezier(.45,.05,.3,1) both}
.js .szene-1.spielt .textui{animation:textui 3.7s ease both}
.js .szene-1.spielt .ring{animation:ring 3.7s ease both}
@keyframes figur-weg{
  0%      {transform:translateX(-190px)}
  30%,62% {transform:translateX(0)}
  100%    {transform:translateX(190px)}
}
@keyframes textui{
  0%,28%  {opacity:0;transform:translateY(6px)}
  36%,60% {opacity:1;transform:none}
  68%,100%{opacity:0;transform:translateY(6px)}
}
@keyframes ring{
  0%,26%  {border-color:color-mix(in oklab, var(--accent) 45%, transparent)}
  34%,62% {border-color:var(--accent)}
  72%,100%{border-color:color-mix(in oklab, var(--accent) 45%, transparent)}
}

/* — Szene 2: Bezahlt — */
.szene-2{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}
.toast{
  display:flex;align-items:stretch;gap:.7rem;flex:none;
  width:min(100%,250px);padding:.65rem .85rem .65rem 0;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line-2);overflow:hidden;
}
.toast-kante{width:3px;flex:none;background:var(--c-smaragd)}
.toast-t{display:grid;gap:.2rem;font:400 var(--t-xs)/1.3 var(--sans);color:var(--ink-2)}
.toast-t b{font-weight:600;color:var(--ink)}
/* Im Markup steht die Meldung zuerst. Sichtbar kommt links, was der Code
   getan hat, und rechts, was der Spieler davon sieht. */
.folgen{display:grid;gap:.5rem;order:-1}
.folgen li{
  display:grid;grid-template-columns:3.7em auto;align-items:baseline;
  font:400 var(--t-xs)/1.3 var(--sans);color:var(--ink-2);
}
.folgen .minus,.folgen .plus{font:600 .75rem/1 var(--mono)}
.folgen .minus{color:var(--c-koralle)}
.folgen .plus{color:var(--c-smaragd)}
.js .szene-2 .toast{opacity:0;transform:translateX(24px)}
.js .szene-2 .folgen li{opacity:0;transform:translateX(-8px)}
.js .szene-2.spielt .toast{animation:toast .55s cubic-bezier(.22,.61,.36,1) .55s both}
.js .szene-2.spielt .folgen li{animation:folge .4s ease both}
.js .szene-2.spielt .folgen li:nth-child(1){animation-delay:.15s}
.js .szene-2.spielt .folgen li:nth-child(2){animation-delay:.3s}
@keyframes toast{to{opacity:1;transform:none}}
@keyframes folge{to{opacity:1;transform:none}}

/* Faktenzeile unter dem Auftakt: vier Aussagen ohne Zahl. Was eine Zahl
   belegen soll, steht an der Stelle selbst, an der man es nachschlägt. */
.fakten-band{position:relative;z-index:2;border-top:1px solid var(--line);background:var(--bg)}
.fakten{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2) var(--s-7);
  padding:var(--s-4) 0;font-size:var(--t-sm);color:var(--ink-2);
}
.fakten b{
  color:var(--ink);font-weight:500;margin-left:.35rem;
  border-bottom:1px solid var(--line-ui);
}
.fakten a{color:inherit}
.fakten a:hover{text-decoration:none}
.fakten a:hover b{border-bottom-color:var(--accent-ink)}

/* ── dv_core: die eine Voraussetzung ──────────────────────────────
   Ein Kasten unter dem Auftakt: links der Satz mit dem Weg zu dv_core im
   Shop, rechts das Schaubild (Bewegung steht in animation.css). Auf dem
   Telefon steht der Text oben — er ist die Aussage, das Bild die Zier. */
.voraus{padding:var(--sec) 0 0}
.voraus-kasten{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  grid-template-areas:"text bild";
  gap:clamp(1.5rem,4vw,3.25rem);
  padding:clamp(1.5rem,3.5vw,2.5rem);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.voraus-text{grid-area:text}
.voraus-bild{
  grid-area:bild;aspect-ratio:320/148;
  border:1px solid var(--line);border-radius:var(--r);background:var(--sunken);overflow:hidden;
}
.voraus h2{max-width:22ch}
.voraus h2 code{
  font:600 .92em var(--mono);letter-spacing:-.02em;background:none;padding:0;color:var(--accent-ink);
}
.voraus .abschnitt-p{max-width:60ch;margin-top:var(--s-3)}
.voraus-tasten{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.voraus-fuss{margin-top:var(--s-4);max-width:60ch}
.voraus-fuss code{font-size:.92em}

/* ── Versprechen ─────────────────────────────────────────────────
   Keine Reihe gleicher Karten: drei Zeilen, jede mit ihrer Aussage links
   und einem erklärenden Bild rechts. Alle drei stehen gleich herum — ein
   Wechsel von links nach rechts wäre Schmuck. */
.versprechen-liste>li{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  column-gap:clamp(2rem,6vw,5rem);row-gap:var(--s-2);
  padding:clamp(1.5rem,3vw,2.25rem) 0;border-top:1px solid var(--line);
}
.versprechen-liste>li:first-child{border-top:0;padding-top:0}
.versprechen-liste>li:last-child{padding-bottom:0}
.versprechen-liste .bild{grid-column:2;grid-row:1/3}
.versprechen-liste h3{grid-column:1;align-self:end;font-size:var(--t-h2);font-stretch:var(--h-stretch);font-weight:var(--h-gewicht);letter-spacing:var(--h-spur);line-height:1.1}
.versprechen-liste p{grid-column:1;align-self:start;max-width:46ch;color:var(--ink-2);line-height:1.65}
.versprechen-liste code{font-size:.9em}
/* Die Kategorien als Liste, wo die Sammlung keine Zeichnung braucht. */
.bild.bild-liste{aspect-ratio:auto;padding:var(--s-3) var(--s-5)}
.register{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-6)}
.register li{border-bottom:1px solid var(--line)}
.register a{
  display:flex;align-items:center;gap:.65rem;padding:.55rem 0;color:var(--ink);font-size:var(--t-sm);
}
.register a:hover{text-decoration:none;color:var(--accent-ink)}
.register a::before{
  content:"";flex:none;width:.5625rem;height:.5625rem;border-radius:2px;background:var(--gc);
}
.register .reg-n{display:none}
.register .reg-t{flex:1}
.register .reg-z{font:500 var(--t-xs)/1 var(--mono);color:var(--ink-3)}

/* Die Schaubilder: sie erklären, was der Absatz daneben behauptet. */
.bild{
  position:relative;aspect-ratio:300/128;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;
}
.dia{width:100%;height:100%;display:block}
.dia rect{fill:var(--sunken);stroke:var(--line-2);stroke-width:1}
.dia text{
  font:600 11px/1 var(--mono);fill:var(--ink-3);text-anchor:middle;dominant-baseline:middle;
}
.dia text.klein-t{font-size:9.5px}
.dia-linien path{stroke:var(--line-2);stroke-width:1.2;fill:none}
.dia-kern rect{fill:var(--accent);stroke:var(--accent)}
.dia-kern text{fill:var(--on-accent)}

/* ── Sehen, was die Scripts können ─────────────────────────────────
   Links die Auswahl, rechts die Aufnahme. Der Abschnitt trägt die
   Hauptlast der Seite: hier entscheidet sich, ob jemand versteht, was er
   kauft. */
.koennen-kopf{margin-bottom:var(--s-6);max-width:62ch}
.koennen-raster{
  display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);align-items:start;
}
.koennen-wahl{display:flex;flex-direction:column;gap:.35rem}
.wahl{
  position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  padding:.8rem .95rem .8rem 2.1rem;border-radius:var(--r);
  background:transparent;border:1px solid transparent;
  transition:background-color .15s, border-color .15s;
}
/* Die Marke der Kategorie statt einer Farbkante. */
.wahl::before{
  content:"";position:absolute;left:.95rem;top:1.15rem;
  width:.5625rem;height:.5625rem;border-radius:2px;background:var(--gc);
}
.wahl:hover{background:var(--surface);border-color:var(--line)}
.wahl-name{display:block;font:600 .875rem/1.3 var(--mono);letter-spacing:-.015em;color:var(--ink-2)}
.wahl-kurz{display:block;margin-top:.25rem;font-size:var(--t-xs);line-height:1.45;color:var(--ink-3)}
.wahl.is-on{background:var(--surface);border-color:var(--line-2)}
.wahl.is-on .wahl-name{color:var(--ink)}
.wahl.is-on .wahl-kurz{color:var(--ink-2)}

.tafel[hidden]{display:none}
.medien{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--sunken);
}
.medien video,.medien img{width:100%;height:100%;object-fit:cover;display:block}
/* Solange keine Aufnahme vorliegt, sagt der Platz, was hierher gehört und
   wie die Datei heißen soll. Kein graues Rechteck, das man für einen
   Fehler halten kann. */
.medien-platz{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;padding:var(--s-5);text-align:center;background:var(--sunken);
}
.medien-marke{
  padding:.25rem .6rem;border-radius:var(--r-sm);
  /* --gc-ink ist die helle Fassung der Kategoriefarbe; weiße Schrift darauf
     läge bei 2:1. --bg ist der Gegenpol und trägt. */
  background:var(--gc-ink);color:var(--bg);font:600 var(--t-micro)/1 var(--mono);
}
.medien-text{font-size:var(--t-sm);color:var(--ink-2)}
.medien-text b{color:var(--ink);font-family:var(--mono);font-weight:600;font-size:.95em}
.medien-datei{
  font:400 var(--t-micro)/1.5 var(--mono);color:var(--ink-3);
  padding:.3rem .55rem;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);
}
.tafel-text{margin-top:var(--s-4);max-width:70ch;font-size:var(--t-sm);line-height:1.7;color:var(--ink-2)}
/* Der Wechsel zwischen den Tafeln: kurz, damit klar ist, dass etwas
   anderes dasteht. */
.tafel{animation:tafel-rein .3s cubic-bezier(.22,.61,.36,1) both}
@keyframes tafel-rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .koennen-raster{grid-template-columns:minmax(0,1fr)}
  /* Aus der Liste wird eine Leiste, die quer läuft. */
  .koennen-wahl{flex-direction:row;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory}
  .wahl{flex:0 0 auto;width:auto;min-width:13.5rem;scroll-snap-align:start}
}

/* ── Was drinsteckt ──────────────────────────────────────────────
   Vier Behauptungen, jede mit ihrem Beleg daneben. Links die Aussage in
   zwei Sätzen, rechts ein Auszug aus den Ressourcen oder dem Handbuch,
   den build/belege.py schreibt. Der Auszug ist eine Tabelle aus
   Verweisen: jede Zeile führt an die Stelle im Handbuch, an der sie
   steht. Auf dem Telefon steht die Aussage oben, der Beleg darunter. */
.belege-liste{margin-top:var(--s-6)}
.beleg{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:var(--s-5) clamp(2rem,5vw,4.5rem);
  padding:clamp(1.75rem,3.5vw,2.75rem) 0;border-top:1px solid var(--line);
}
.beleg:last-child{padding-bottom:0}
.beleg-text h3{font-size:clamp(1.25rem,1.05rem + .8vw,1.5rem);text-wrap:balance}
.beleg-text p{margin-top:var(--s-3);max-width:46ch;font-size:var(--t-sm);line-height:1.65;color:var(--ink-2)}

/* Der Auszug. Die Farbe des Namens in einer Zeile ist die Kategorie des
   Scripts, aus dem sie stammt — dieselbe wie in der Sammlung darunter. */
.auszug{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.auszug-kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  padding:.55rem var(--s-4);background:var(--sunken);border-bottom:1px solid var(--line);
  font:500 var(--t-micro)/1.4 var(--mono);color:var(--ink-3);
}
.auszug-kopf .az-quelle{font-size:inherit}
.auszug code{font:500 var(--t-xs)/1.5 var(--mono);background:none;padding:0}
.auszug-zeilen li+li{border-top:1px solid var(--line)}
.auszug-zeile{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem 1rem;
  padding:.7rem var(--s-4);color:var(--ink);font-size:var(--t-xs);line-height:1.5;
  transition:background-color .15s;
}
.auszug-zeile:hover{text-decoration:none;background:var(--surface-2)}
.auszug-zeile:focus-visible{outline-offset:-2px}
.az-quelle{font:500 var(--t-xs)/1.5 var(--mono);color:var(--gc-ink)}
.az-still{color:var(--ink-3)}
.az-wort{display:inline-block;margin-right:.9em;color:var(--ink)}
.az-wirkung{flex-basis:100%;color:var(--ink-2)}
.az-datei{margin-left:auto;font:500 var(--t-micro)/1.5 var(--mono);color:var(--ink-3)}
.auszug-zeile:hover .az-datei{color:var(--ink-2)}
/* Bei Tabellen und Befehlen steht die Herkunft rechts, damit der Name der
   Tabelle und der Aufruf vorn stehen. Im Quelltext kommt sie zuerst — für
   Vorleseprogramme heißt es dort „dv_garage: /garagerelease". */
.auszug-tabellen .az-quelle,
.auszug-befehle .az-quelle{order:2;margin-left:auto;font-size:var(--t-micro)}
.auszug-tabellen .az-inhalt{order:1;flex:1 1 auto;min-width:0}
.auszug-befehle .az-code{order:1}
.auszug-befehle .az-wirkung{order:3}
/* Die Gliederung einer Handbuchseite: links, was geschrieben wurde, rechts,
   was aus dem Quelltext kommt — in Schreibmaschinenschrift, weil es
   gelesen und nicht geschrieben ist. */
.auszug-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.auszug-spalte{padding:var(--s-3) var(--s-4) var(--s-4)}
.auszug-gelesen{border-left:1px solid var(--line);background:var(--sunken)}
.auszug-titel{margin-bottom:var(--s-2);font:500 var(--t-micro)/1.4 var(--mono);color:var(--ink-3)}
.auszug-spalte a{
  display:block;margin-inline:-.5rem;padding:.32rem .5rem;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:var(--t-xs);line-height:1.4;
}
.auszug-spalte a:hover{color:var(--ink);text-decoration:none;background:var(--surface-2)}
.auszug-gelesen a{font-family:var(--mono)}
@media (max-width:860px){
  .beleg{grid-template-columns:minmax(0,1fr)}
  .beleg-text p{max-width:58ch}
}
@media (max-width:520px){
  .auszug-spalten{grid-template-columns:minmax(0,1fr)}
  .auszug-gelesen{border-left:0;border-top:1px solid var(--line)}
}

/* ── Die Sammlung ────────────────────────────────────────────────
   Je Kategorie ein Kasten: Kopf mit Marke, Name und Beschreibung, darunter
   eine Zeile je Ressource. Zugeklappt stehen Name, Kurztext und Fassung
   in einer Zeile, aufgeklappt die Angaben und der Weg in den Shop. Alles
   steht im Markup — ohne JavaScript liegt es offen da statt zu fehlen. */
.katalog-kopf{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s-5) var(--s-6);margin-bottom:var(--s-6);
}
.katalog-kopf>div:first-child{flex:1 1 32rem}
.katalog-kopf .suche{flex:0 1 22rem}
/* Die mitlaufende Filterleiste soll nicht zwei, drei Zeilen hoch stehen
   bleiben und ein Viertel des Fensters verdecken: auf schmalen Fenstern eine
   Zeile, die zur Seite läuft (die Chips bleiben mit der Tastatur erreichbar). */
@media (max-width:1100px){
  .katalog .filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}
  .katalog .filter .chip{flex:none}
}
.katalog .grp{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;
}
.katalog .grp-head{padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line)}
.katalog .grid{display:flex;flex-direction:column}
.cell[hidden]{display:none}
.cell+.cell{border-top:1px solid var(--line)}

.eintrag-zeile{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  padding-right:var(--s-5);transition:background-color .15s;
}
.eintrag-zeile:hover{background:var(--surface-2)}
.eintrag-h{margin:0;font:inherit}
.eintrag-schalter{
  display:grid;grid-template-columns:15rem minmax(0,1fr) auto auto;
  align-items:baseline;gap:var(--s-4);width:100%;
  padding:.85rem 0 .85rem var(--s-5);border:0;background:transparent;text-align:left;cursor:pointer;
  border-radius:0;
}
.eintrag-name{font:600 .9375rem/1.35 var(--mono);letter-spacing:-.015em;color:var(--gc-ink)}
.eintrag-kurz{font-size:var(--t-xs);line-height:1.5;color:var(--ink-2)}
.eintrag-ver{
  font:400 var(--t-micro)/1.4 var(--mono);color:var(--ink-3);
  padding:.05rem .4rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
}
.eintrag-pfeil{
  display:grid;place-items:center;width:20px;height:20px;color:var(--ink-3);
  transition:transform .24s, color .16s;
}
.eintrag-zeile:hover .eintrag-pfeil{color:var(--ink)}
.eintrag-schalter[aria-expanded="true"] .eintrag-pfeil{transform:rotate(180deg);color:var(--ink)}
.eintrag-schalter[aria-expanded="true"] .eintrag-kurz{color:var(--ink-3)}
/* Der Weg ins Handbuch steht in der Zeile selbst, nicht erst im
   aufgeklappten Eintrag: das Handbuch ist ein Verkaufsargument. */
.eintrag-hb{
  display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
  font:500 var(--t-xs)/1.2 var(--sans);color:var(--accent-ink);padding:.4rem 0 .4rem .5rem;
}
.eintrag-hb:hover{text-decoration:underline;text-underline-offset:3px}

/* Aufklappen ohne gemessene Höhen: 0fr auf 1fr lässt sich animieren, und
   visibility nimmt das Verborgene aus Tastaturweg und Vorlesereihenfolge —
   anders als ein bloßes overflow:hidden.

   Das Zuklappen hängt an `.js`: ohne JavaScript gäbe es niemanden, der
   wieder aufklappt, und die halbe Sammlung wäre unerreichbar. Dann liegt
   sie eben offen da. */
.eintrag-mehr{display:grid;grid-template-rows:1fr;background:var(--sunken)}
.js .eintrag-mehr{
  grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .3s ease, visibility 0s .3s;
}
.js .eintrag-mehr.auf{
  grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .3s ease, visibility 0s;
}
/* Ohne JavaScript ist der Schalter kein Schalter. */
html:not(.js) .eintrag-pfeil{display:none}
html:not(.js) .eintrag-schalter{cursor:default}
.eintrag-mehr>div{overflow:hidden;min-height:0}
.eintrag-mehr-in{
  padding:var(--s-4) var(--s-5) var(--s-5) calc(var(--s-5) + 15rem + var(--s-4));
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4);
  border-top:1px solid var(--line);
}
.eintrag-text{font-size:var(--t-sm);line-height:1.65;color:var(--ink-2);max-width:68ch}
.eintrag-fakten{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--s-3) var(--s-5);width:100%;
}
.eintrag-fakten dt{margin-bottom:.3rem;font:500 var(--t-micro)/1.2 var(--sans);color:var(--ink-3)}
.eintrag-fakten dd{margin:0;font-size:var(--t-xs);line-height:1.7;color:var(--ink)}
.eintrag-fakten code{margin:0 .15rem .15rem 0}
.eintrag-wege{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}

/* Schon unter 1000px trägt die Zeile ihre feste Namensspalte nicht mehr: der
   Kurztext bliebe sonst ein schmaler Streifen von vier, fünf Zeilen. */
@media (max-width:1000px){
  .eintrag-zeile{grid-template-columns:minmax(0,1fr);padding-right:0}
  .eintrag-schalter{
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"name ver pfeil" "kurz kurz kurz";
    column-gap:var(--s-3);row-gap:.3rem;padding:.8rem var(--s-4) .3rem;
  }
  .eintrag-name{grid-area:name}
  .eintrag-ver{grid-area:ver}
  .eintrag-pfeil{grid-area:pfeil;align-self:center}
  .eintrag-kurz{grid-area:kurz}
  .eintrag-hb{padding:.2rem var(--s-4) .8rem}
  /* Der Einzug richtete sich an der Namensspalte aus, die es hier nicht
     mehr gibt. */
  .eintrag-mehr-in{padding-left:var(--s-4);padding-right:var(--s-4)}
  .eintrag-fakten{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .katalog .grp-head{padding:var(--s-4)}
}

/* ── Einbau ──────────────────────────────────────────────────────── */
.einbau .abschnitt-h{margin-bottom:var(--s-6)}
.schritte{
  /* Die mittlere Karte trägt die server.cfg und braucht mehr Breite — und drei
     gleiche Spalten wären ohnehin das Raster, das jede Vorlage hat. */
  counter-reset:s;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,1fr);
  gap:var(--s-4);align-items:start;
}
/* Eine Schrittkarte: Titel und Text, die Nummer groß und blass in der Ecke. */
.schritte li{
  counter-increment:s;position:relative;
  padding:var(--s-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.schritte li::before{
  content:counter(s);position:absolute;top:.6rem;right:1.1rem;
  font:700 2rem/1 var(--sans);font-stretch:90%;color:var(--line-2);
}
.schritte h3{font-size:var(--t-h3);margin-bottom:.4rem;padding-right:2rem}
.schritte p{font-size:var(--t-sm);line-height:1.62;color:var(--ink-2)}
.cfg{
  margin:var(--s-4) 0 0;background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.cfg figcaption{
  padding:.5rem .8rem;border-bottom:1px solid var(--line);
  font:500 var(--t-micro)/1.3 var(--mono);color:var(--ink-3);
}
.cfg pre{margin:0;padding:.8rem .9rem;overflow-x:auto}
.cfg code{font-size:.75rem;line-height:1.7;color:var(--ink)}
.cfg .c{color:var(--code-c);font-style:italic}
.cfg .k{color:var(--code-k);font-weight:500}

.einbau-kasten{
  margin-top:var(--s-4);padding:var(--s-5);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s-3) var(--s-7);align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.einbau-kasten h3{font-size:var(--t-h3)}
.einbau-kasten p{font-size:var(--t-sm);line-height:1.6;color:var(--ink-2)}
.einbau-kasten .klein{grid-column:1/-1}
.dateiliste{display:flex;flex-direction:column;grid-column:2;grid-row:1/3}
.dateiliste li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;
  padding:.55rem 0;border-bottom:1px solid var(--line);
}
.dateiliste li:first-child{padding-top:0}
.dateiliste li:last-child{border-bottom:0;padding-bottom:0}
.dateiliste code{font-size:var(--t-xs);font-weight:500;background:none;padding:0}
.dateiliste span{font-size:var(--t-xs);color:var(--ink-3)}
@media (max-width:1000px){
  .schritte{grid-template-columns:minmax(0,1fr)}
  .einbau-kasten{grid-template-columns:minmax(0,1fr)}
  .dateiliste{grid-column:1;grid-row:auto}
}

/* ── Support ─────────────────────────────────────────────────────── */
.support-in{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.support .hero-tasten{margin-top:var(--s-5)}
.support-fakten{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.support-fakten>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding:.85rem 1.1rem;
}
.support-fakten>div+div{border-top:1px solid var(--line)}
.support-fakten dt{font:500 var(--t-xs)/1.3 var(--sans);color:var(--ink-3)}
.support-fakten dd{margin:0;font-size:var(--t-sm);color:var(--ink);text-align:right}

/* ── Umbrüche ────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .hero-raster{grid-template-columns:minmax(0,1fr)}
  .hero-buehne{max-width:680px}
  .support-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .voraus-kasten{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "bild"}
  .voraus-bild{max-width:420px}
  .versprechen-liste>li{grid-template-columns:minmax(0,1fr)}
  .versprechen-liste .bild{grid-column:1;grid-row:auto;order:3;margin-top:var(--s-3)}
  .versprechen-liste h3,.versprechen-liste p{grid-column:1}
  .katalog-kopf{align-items:flex-start}
}
@media (max-width:560px){
  .hero-tasten .knopf{flex:1 1 100%}
  .voraus-tasten .knopf{flex:1 1 100%}
  .szenen{min-height:176px}
  /* Auf dem Telefon untereinander statt nebeneinander. */
  .szene-2{flex-direction:column;align-items:stretch;justify-content:center}
  .toast{width:100%}
  .register{grid-template-columns:minmax(0,1fr)}
  .fakten{gap:var(--s-2) var(--s-5);justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .js .szene-0 .bausteine li{color:var(--ink);border-color:var(--accent)}
  .js .szene-1 .figur{transform:none}
  .js .szene-1 .textui{opacity:1;transform:none}
  .js .szene-2 .toast,.js .szene-2 .folgen li{opacity:1;transform:none}
}

.voraus-bild:has(.dia-basis){aspect-ratio:320/190}