dogfather-universe/server/pruef-css-klassen.mjs

/* STEHT DAS CSS AUCH AUF DER SEITE, DIE ES BENUTZT?

   ENTSTANDEN AUS EINEM ECHTEN FEHLER (05.09.2026).

   Die Teilnehmerwahl im Kalender benutzte `.wahl__knopf` und
   `.wahl__rolle`. Beide sind sauber definiert -- in dateien.css. Und
   kalender.html bindet dateien.css nicht ein.

   Ohne `display:inline-flex` und `gap` stehen zwei <span> eben direkt
   nebeneinander. Auf Filipes Bildschirm stand deshalb:

       DogfatherDogFather   VanVanDogFather   CigdemManager

   Vierzig Prüfungen zur Teilnehmerwahl waren grün. Sie prüften, dass
   die richtigen Personen ankommen, dass Fremde weggefiltert werden,
   dass die Sichtbarkeit stimmt -- alles richtig, und alles am Problem
   vorbei. KEINE hat gefragt, ob das Ergebnis auch aussieht wie
   gedacht. Das ist die dritte Sorte Fehler aus der Projektnotiz: nicht
   der übersprungene Test, nicht der grüne, der das Falsche prüft,
   sondern die Frage, die niemand gestellt hat.

   WAS HIER GEMESSEN WIRD

   Für jede Workspace-Seite:
     1. Welche Stylesheets bindet sie ein? (rekursiv über @import)
     2. Welche Klassen vergibt sie -- im HTML *und* in ihrem eigenen
        JavaScript (className, classList.add, setAttribute('class')).
     3. Ist jede davon in einem der eingebundenen Stylesheets definiert?

   WAS BEWUSST NICHT GEMESSEN WIRD

   Klassen, die es nur zum Anfassen gibt (`js-`), reine Datenanker und
   Klassen aus gemeinsamen Bausteinen, die jede Seite lädt. Und die
   Gegenrichtung ("CSS ohne Benutzer") gehört nicht hierher: Ungenutztes
   CSS ist Ballast, kein Fehler.

   DRITTER AUSGANG: Findet die Prüfung keine Seiten oder keine Klassen,
   ist das kein "bestanden" -- dann hat sie nichts gemessen und sagt es.

   GEGENPROBE am Ende: Eine erfundene Klasse muss auffallen, und eine
   echte darf es nicht. */

import { readFileSync, readdirSync, existsSync } from "node:fs";
import { join, dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";

const HIER = dirname(fileURLToPath(import.meta.url));
const WURZEL = resolve(HIER, "..");
const WS = join(WURZEL, "workspace");

let fehler = 0;
const ok = (b, t) => { console.log((b ? "  ok   " : "  FEHL ") + t); if (!b) fehler++; };

/* ---------- Welche Stylesheets bindet eine Seite ein? -------------------- */

/** Liest ein Stylesheet und folgt seinen @import-Zeilen. */
function cssMitImporten(pfad, gesehen = new Set()) {
  const echt = resolve(pfad);
  if (gesehen.has(echt) || !existsSync(echt)) return "";
  gesehen.add(echt);
  const text = readFileSync(echt, "utf8");
  let alles = text;
  for (const m of text.matchAll(/@import\s+(?:url\()?["']([^"')]+)["']\)?/g)) {
    alles += "\n" + cssMitImporten(join(dirname(echt), m[1].split("?")[0]), gesehen);
  }
  return alles;
}

/** Alle Klassennamen, die ein CSS-Text definiert. */
function definierteKlassen(css) {
  const raus = new Set();
  /* Erst Kommentare weg: In diesem Haus stehen lange Erklärungen im
     CSS, und dort kommen Klassennamen als Fließtext vor ("wie
     .wahl__knopf in dateien.css"). Die zählen nicht als Definition --
     sonst würde ausgerechnet der Kommentar, der den Fehler beschreibt,
     ihn verdecken. */
  const ohne = css.replace(/\/\*[\s\S]*?\*\//g, " ");
  for (const m of ohne.matchAll(/\.(-?[A-Za-z_][\w-]*)/g)) raus.add(m[1]);
  return raus;
}

/* ---------- Welche Klassen vergibt eine Seite? --------------------------- */

/** Klassen aus dem HTML. */
function klassenAusHtml(html) {
  const raus = new Set();
  const ohneKommentar = html.replace(/<!--[\s\S]*?-->/g, " ");
  for (const m of ohneKommentar.matchAll(/\bclass\s*=\s*["']([^"']+)["']/g)) {
    for (const k of m[1].split(/\s+/)) if (k) raus.add(k);
  }
  return raus;
}

/** Klassen aus JavaScript. Nur die Formen, die dieses Haus benutzt --
 *  ein vollständiger Parser wäre hier Aufwand ohne Ertrag. */
function klassenAusJs(js) {
  const raus = new Set();
  const ohne = js.replace(/\/\*[\s\S]*?\*\//g, " ");
  const muster = [
    /\.className\s*=\s*['"]([^'"]+)['"]/g,
    /setAttribute\(\s*['"]class['"]\s*,\s*['"]([^'"]+)['"]/g,
    /class\s*=\s*\\?["']([^"'\\]+)/g,          // in Template-Literalen
  ];
  for (const m of muster) {
    for (const t of ohne.matchAll(m)) {
      for (const stueck of t[1].split(/['",\s]+/)) {
        const k = stueck.trim();
        /* Nur echte Klassennamen -- keine Variablen, keine Ausdrücke. */
        if (k && /^-?[A-Za-z_][\w-]*$/.test(k)) raus.add(k);
      }
    }
  }

  /* classList.add() BRAUCHT eine eigene Behandlung.
     Der erste Entwurf nahm den ganzen Klammerinhalt und zerlegte ihn
     an Anführungszeichen und Kommas. Bei

         classList.add(i === 0 ? 'marke__haupt' : 'marke__leise')

     fiel dabei `i` als angebliche Klasse heraus -- und die Prüfung
     meldete auf sechzehn Seiten eine fehlende Klasse `.i`, die es nie
     gab. Eine Warnung, die falsch ist, ist schlimmer als keine: Sie
     kostet Zeit und wird beim nächsten Mal überlesen.
     Deshalb werden hier NUR die Zeichenketten gelesen, nie der
     Ausdruck drumherum. */
  for (const t of ohne.matchAll(/classList\.(?:add|remove|toggle)\(([^)]*)\)/g)) {
    for (const s of t[1].matchAll(/['"]([^'"]+)['"]/g)) {
      for (const k of s[1].trim().split(/\s+/)) {
        if (k && /^-?[A-Za-z_][\w-]*$/.test(k)) raus.add(k);
      }
    }
  }
  return raus;
}

/** Welche eigenen Skripte bindet die Seite ein? */
function skripteVon(html) {
  const raus = [];
  for (const m of html.matchAll(/<script[^>]+src\s*=\s*["']([^"']+)["']/g)) {
    const p = m[1].split("?")[0];
    if (/^https?:/.test(p)) continue;                 // fremde Skripte nicht
    raus.push(join(WS, p.replace(/^\//, "").replace(/^workspace\//, "")));
  }
  return raus;
}

function stylesheetsVon(html) {
  const raus = [];
  for (const m of html.matchAll(/<link[^>]+rel\s*=\s*["']stylesheet["'][^>]*>/g)) {
    const h = /href\s*=\s*["']([^"']+)["']/.exec(m[0]);
    if (!h || /^https?:/.test(h[1])) continue;
    raus.push(join(WS, h[1].split("?")[0].replace(/^\//, "").replace(/^workspace\//, "")));
  }
  return raus;
}

/* Klassen, die absichtlich kein CSS haben. Jede Ausnahme braucht einen
   Grund -- eine Liste ohne Begründung wächst, bis sie alles enthält. */
const OHNE_CSS = new Set([
  "leise",        // Grundstil, steht in gate.css als Elementregel
]);
const OHNE_CSS_PRAEFIX = ["js-", "u-"];   // reine Anfasser, nie gestaltet

/* =======================================================================
   Die Messung
   ======================================================================= */
console.log("\n=== Ist jede benutzte Klasse auf ihrer Seite auch definiert? ===");

const seiten = readdirSync(WS).filter((n) => n.endsWith(".html"));
/* DIE ANZAHL GEHOERT IN DIE BEDINGUNG, nicht nur in den Meldetext.
   Findet die Prüfung keine Seiten, hat sie nichts gemessen -- und
   "0 von 0 Klassen fehlen" wäre grün und wertlos. */
ok(seiten.length >= 10, `${seiten.length} Workspace-Seiten gefunden`);

/* ALLES CSS DES HAUSES -- für die entscheidende Unterscheidung.

   Eine Klasse ohne CSS ist zweierlei, und nur eines davon ist ein
   Fehler:

     (a) NIRGENDS gestaltet. Ein reiner Struktur-Anker wie
         `.k-wdh__ende`, der nur ein <div> benennt. Kein Fehler --
         sonst müsste man jedem Container Deko andichten.

     (b) Gestaltet, aber in einer Datei, die DIESE SEITE NICHT LÄDT.
         Das ist der Fehler von heute: Jemand hat es gestaltet, es
         sieht im Editor richtig aus, und auf der Seite kommt nichts
         an. Niemandem fällt es auf, weil das CSS ja existiert.

   Nur (b) schlägt an. */
const ALLE_CSS = definierteKlassen(
  readdirSync(join(WS, "assets/css")).filter((n) => n.endsWith(".css"))
    .map((n) => readFileSync(join(WS, "assets/css", n), "utf8")).join("\n"));

let geprueft = 0;
const luecken = [];      // (b) -- gestaltet, aber nicht hier
const ungestaltet = [];  // (a) -- nur zur Ansicht

for (const seite of seiten) {
  const html = readFileSync(join(WS, seite), "utf8");

  /* DIE SEITE KANN IHRE STILE AUCH SELBST TRAGEN (ergaenzt 19.09.2026).

     Bis heute las diese Pruefung nur die verlinkten .css-Dateien. Ein
     <style>-Block in der Seite war fuer sie unsichtbar -- und damit
     galt alles, was dort gestaltet ist, als "gestaltet, aber nicht auf
     ihrer Seite".

     Das traf genau EINE Seite, und zwar eine, die es mit Absicht so
     macht: anruf-probe.html haelt ihre Stile in der Seite, damit sie
     auch dann noch etwas anzeigt, wenn genau das schiefgeht, was sie
     untersucht (eine Stilvorlage aus dem Zwischenspeicher). Die
     Pruefung meldete diese Entscheidung als Fehler -- drei Eintraege
     lang, bei jedem Lauf.

     Eine Warnung, die immer kommt, ist keine Warnung mehr: Man
     gewoehnt sich an die drei roten Zeilen und uebersieht ab da auch
     die vierte, die echt ist. Deshalb sieht die Pruefung jetzt hin,
     statt die Seite auszunehmen -- eine Ausnahmeliste waere die
     naechste Stelle, die veraltet. */
  const inline = [...html.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/g)]
    .map((m) => m[1]).join("\n");
  const css = stylesheetsVon(html).map((p) => cssMitImporten(p)).join("\n")
    + "\n" + inline;
  const definiert = definierteKlassen(css);

  const benutzt = klassenAusHtml(html);
  for (const skript of skripteVon(html)) {
    if (!existsSync(skript)) continue;
    for (const k of klassenAusJs(readFileSync(skript, "utf8"))) benutzt.add(k);
  }

  for (const k of benutzt) {
    if (OHNE_CSS.has(k)) continue;
    if (OHNE_CSS_PRAEFIX.some((p) => k.startsWith(p))) continue;
    geprueft++;
    if (definiert.has(k)) continue;
    if (ALLE_CSS.has(k)) luecken.push(`${seite}: .${k}`);
    else ungestaltet.push(`${seite}: .${k}`);
  }
}

/* Auch hier die Anzahl in die Bedingung: Wären alle Muster kaputt und
   fänden nichts, stünde sonst "0 Lücken" da -- grün, ohne je eine
   Klasse angesehen zu haben. */
ok(geprueft > 200, `${geprueft} Klassenverwendungen geprüft`);

/* NACH KLASSE GRUPPIERT, nicht nach Seite. Eine fehlende Klasse auf
   sechzehn Seiten ist EIN Fehler, nicht sechzehn -- und wer sechzehn
   fast gleiche Zeilen liest, überliest die siebzehnte, die etwas
   anderes sagt. */
const nachKlasse = new Map();
for (const eintrag of luecken) {
  const [seite, klasse] = eintrag.split(": .");
  if (!nachKlasse.has(klasse)) nachKlasse.set(klasse, []);
  nachKlasse.get(klasse).push(seite);
}
const bericht = [...nachKlasse.entries()]
  .sort((a, b) => b[1].length - a[1].length)
  .map(([k, s]) => `.${k} — fehlt auf ${s.length} Seite${s.length === 1 ? "" : "n"}`
    + ` (${s.slice(0, 3).join(", ")}${s.length > 3 ? " …" : ""})`);

ok(luecken.length === 0 && geprueft > 200,
  luecken.length
    ? `${nachKlasse.size} Klasse${nachKlasse.size === 1 ? "" : "n"} sind gestaltet, aber nicht auf ihrer Seite:`
      + `\n         ${bericht.join("\n         ")}`
    : `jede gestaltete Klasse kommt auch auf ihrer Seite an`);

/* Kein Fehler, nur zur Kenntnis: Klassen, die es nirgends gibt. Meist
   Struktur-Anker; gelegentlich aber ein Tippfehler, der hier auffällt,
   bevor jemand sich wundert, warum nichts passiert. */
const nurAnker = new Set(ungestaltet.map((e) => e.split(": .")[1]));
console.log(`  --     ${nurAnker.size} Klassen sind nirgends gestaltet `
  + `(Struktur-Anker, kein Fehler): ${[...nurAnker].slice(0, 8).join(", ")}`
  + (nurAnker.size > 8 ? " …" : ""));

/* =======================================================================
   Schriftgrößen: nichts unter 11,5 Pixeln
   =======================================================================

   ZUM ZWEITEN MAL AM SELBEN TAG (06.09.2026). Erst hatten die
   Art-Plaketten des Tagesblicks 10,56 px, dann -- nach der Korrektur --
   die neue "JETZT"-Marke 10,88. Beide Male gemeldet von pruef-handy
   und pruef-grosscheck, beide Male erst nach einem Browserlauf von
   mehreren Minuten.

   Die Regel steht seit dem 01.09.2026 im Haus: Unter 11,5 px liest auf
   einem Handy niemand mehr, und was dort niemand liest, ist auf dem
   Rechner nur Zierde. Sie wurde bisher nur AM BILD geprüft. Hier wird
   sie an der Quelle geprüft -- in Sekunden statt in Minuten, und
   bevor überhaupt jemand einen Browser startet.

   WARUM BEIDE PRÜFUNGEN BLEIBEN: Diese hier findet den Wert im
   Stylesheet. Sie kann nicht wissen, ob eine Regel am Ende überhaupt
   greift oder von einer späteren überschrieben wird -- das sieht nur
   der Browser. Die eine ist schnell und ungenau, die andere langsam
   und genau. Zusammen fangen sie beides ab.

   GERECHNET WIRD MIT 16 px Grundgröße: 0,72 rem = 11,52 px ist gerade
   noch erlaubt, 0,71 rem = 11,36 px nicht mehr. */
console.log("\n=== Ist irgendeine Schrift zu klein? ===");
{
  const GRENZE_PX = 11.5;
  const GRUND_PX = 16;

  let gemessen = 0;
  const zuKlein = [];

  for (const datei of readdirSync(join(WS, "assets/css")).filter((n) => n.endsWith(".css"))) {
    const text = readFileSync(join(WS, "assets/css", datei), "utf8")
      .replace(/\/\*[\s\S]*?\*\//g, " ");     // Kommentare weg

    for (const treffer of text.matchAll(/font-size:\s*([\d.]+)(rem|em|px)/g)) {
      const wert = Number(treffer[1]);
      const einheit = treffer[2];
      /* `em` hängt von der Umgebung ab und lässt sich hier nicht
         ausrechnen -- solche Stellen werden nicht gezählt, statt sie zu
         raten. Sie sind selten und die Browserprüfung sieht sie. */
      if (einheit === "em") continue;
      const px = einheit === "px" ? wert : wert * GRUND_PX;
      gemessen++;
      if (px < GRENZE_PX) {
        const zeile = text.slice(0, treffer.index).split("\n").length;
        zuKlein.push(`${datei}:${zeile} → ${treffer[1]}${einheit} = ${px.toFixed(2)} px`);
      }
    }
  }

  /* DIE ANZAHL GEHÖRT IN DIE BEDINGUNG: Fände das Muster gar nichts,
     stünde sonst "0 zu kleine" da -- grün, ohne je eine Größe
     angesehen zu haben. */
  ok(gemessen > 150, `${gemessen} Schriftgrößen im Stylesheet geprüft`);

  /* EINE GRUNDLINIE, KEIN WUNSCHWERT -- dasselbe Vorgehen wie beim
     Layout-Sprung in pruef-tempo-workspace.

     Im Bestand stehen 43 solche Stellen. Sie alle zu ändern wäre ein
     Eingriff ins Aussehen von dreizehn Stylesheets, kein Fehlerfix --
     und die Browserprüfung (pruef-handy) beanstandet davon nur die,
     die auf einem Handy WIRKLICH sichtbar sind. Viele greifen dort
     gar nicht oder werden überschrieben.

     Eine Prüfung, die vom ersten Tag an rot ist, wird weggeklickt --
     und mit ihr die echte Warnung. Sie hält deshalb den heutigen Stand
     fest und schlägt an, sobald es MEHR werden. Genau das hätte heute
     zweimal gegriffen: erst bei den Art-Plaketten (10,56 px), dann bei
     der Jetzt-Marke (10,88) -- beide Male hätte es Minuten statt eines
     Browserlaufs gekostet.

     Wird der Bestand irgendwann aufgeräumt, gehört die Zahl gesenkt.
     Sie steht hier als Zahl und nicht als Liste, damit niemand eine
     neue Stelle in eine Ausnahmeliste einträgt und sie damit
     stillschweigend erlaubt. */
  /* 43 -> 42 am 14.09.2026: Die Marke auf schmalen Bildschirmen stand
     auf .68rem = 10,88 px (gate.css, Zugangswand von Team Dogi) und ist
     jetzt .72rem. Die Grundlinie wird MITGEZOGEN -- sonst duerfte der
     Fortschritt lautlos wieder verlorengehen, und eine Grundlinie, die
     nur nach oben nachgibt, ist keine. */
  /* DIE MELDUNG HAT AUF DIE FALSCHEN DATEIEN GEZEIGT (06.10.2026).

     Hier stand frueher „Neu hinzugekommen ist vermutlich eine davon"
     und dann `zuKlein.slice(-6)`. Diese Liste ist aber nach
     DATEINAMEN sortiert, nicht nach Alter -- die letzten sechs sind
     schlicht die am Ende des Alphabets. Bei zwei neuen Stellen in
     `bereich.css` und `chat.css` zeigte die Meldung auf
     `uebersicht.css` und `wissen.css`, die seit Wochen unveraendert
     dastanden. Ich habe daraufhin eine Stunde an der falschen Stelle
     gesucht.

     Ein Hinweis, der mit „vermutlich" auf Unschuldige zeigt, ist
     schlechter als gar keiner: Ohne ihn haette ich gleich gesucht.
     Sie sagt jetzt, was sie WEISS (wie viele, in welcher Datei), und
     nennt den Weg zu dem, was sie nicht wissen kann. Der Weg ist
     nachgemessen und hat die beiden Stellen in zwei Minuten
     gefunden. */
  const GRUNDLINIE = 42;
  const jeDatei = {};
  for (const z of zuKlein) {
    const n = z.split(":")[0];
    jeDatei[n] = (jeDatei[n] || 0) + 1;
  }
  const verteilung = Object.entries(jeDatei)
    .sort((a, b) => b[1] - a[1])
    .map(([n, z]) => `${n} ${z}`)
    .join(" · ");
  ok(zuKlein.length <= GRUNDLINIE && gemessen > 150,
    zuKlein.length > GRUNDLINIE
      ? `${zuKlein.length} Stellen unter ${GRENZE_PX} px — das sind `
        + `${zuKlein.length - GRUNDLINIE} MEHR als die Grundlinie ${GRUNDLINIE}.`
        + `\n         Verteilung: ${verteilung}`
        + "\n         WELCHE neu ist, steht hier nicht -- die Liste ist nach"
        + " Dateinamen sortiert, nicht nach Alter."
        + "\n         So findet man sie (nachgemessen, dauert zwei Minuten):"
        + " dasselbe Zaehlen ueber `git archive <commit> workspace/assets/css`"
        + "\n         fuer die letzten Commits laufen lassen und den Sprung"
        + " von 42 auf 43 suchen."
      : `${zuKlein.length} Stellen unter ${GRENZE_PX} px `
        + `(Grundlinie ${GRUNDLINIE}, nicht mehr geworden)`);

  if (zuKlein.length && zuKlein.length <= GRUNDLINIE) {
    console.log(`  --     davon im Bestand: ${zuKlein.slice(0, 3).join(" · ")} …`
      + ` — sichtbar sind sie laut pruef-handy nicht, sonst stünden sie dort`);
  }

  /* GEGENPROBE: Erkennt die Rechnung beide Einheiten -- und lässt sie
     einen erlaubten Wert in Ruhe? Ohne das wäre "0 Treffer" wertlos. */
  const probe = ".a { font-size: .68rem; } .b { font-size: 10px; } .c { font-size: .95rem; }";
  const gefunden = [...probe.matchAll(/font-size:\s*([\d.]+)(rem|em|px)/g)]
    .map(([, w, e]) => (e === "px" ? Number(w) : Number(w) * GRUND_PX))
    .filter((px) => px < GRENZE_PX);
  ok(gefunden.length === 2,
    `Gegenprobe: von drei Größen werden die zwei zu kleinen erkannt `
    + `(${gefunden.map((p) => p.toFixed(2)).join(", ")} px), die dritte nicht`);
}

/* =======================================================================
   GEGENPROBE — die Messung muss beides können
   ======================================================================= */
console.log("\n=== Gegenprobe ===");
{
  /* 1. Der echte Fehler von heute, nachgestellt: eine Seite, die eine
        Klasse benutzt, deren CSS in einem nicht eingebundenen
        Stylesheet steht. */
  const definiert = definierteKlassen(".k-dabei__knopf { color: red; }");
  ok(definiert.has("k-dabei__knopf"), "eine definierte Klasse wird erkannt");
  ok(!definiert.has("gibt-es-nicht"), "eine erfundene Klasse wird NICHT erkannt");

  /* 2. Klassen aus JavaScript werden wirklich mitgelesen -- sonst wäre
        genau der heutige Fall unsichtbar geblieben, denn die Wahl wird
        komplett aus JS gebaut und steht in keinem HTML. */
  const ausJs = klassenAusJs("b.className = 'k-dabei__knopf';\nx.classList.add('offen');");
  ok(ausJs.has("k-dabei__knopf") && ausJs.has("offen"),
    "Klassen aus className und classList.add werden gefunden");

  /* 3. Ein Klassenname, der nur im KOMMENTAR steht, gilt nicht als
        definiert. Sonst hätte ausgerechnet die Erklärung dieses Fehlers
        ihn zugedeckt. */
  const nurKommentar = definierteKlassen("/* wie .wahl__knopf in dateien.css */\n.echt { color: red; }");
  ok(!nurKommentar.has("wahl__knopf") && nurKommentar.has("echt"),
    "ein Klassenname aus einem Kommentar zählt nicht als Definition");

  /* 4. Und der Beweis am echten Bestand: Die Wahl im Kalender muss
        JETZT gedeckt sein -- vor der Reparatur wäre genau das rot. */
  const kal = readFileSync(join(WS, "kalender.html"), "utf8");
  const kalCss = definierteKlassen(stylesheetsVon(kal).map((p) => cssMitImporten(p)).join("\n"));
  const noetig = ["k-dabei", "k-dabei__knopf", "k-dabei__zeichen", "k-dabei__name",
    "k-dabei__titel", "k-dabei__liste", "k-dabei__gruppe", "k-dabei__haken", "k-dabei__punkt"];
  const fehlend = noetig.filter((k) => !kalCss.has(k));
  ok(fehlend.length === 0 && noetig.length === 9,
    fehlend.length ? `im Kalender fehlt CSS für: ${fehlend.join(", ")}`
      : `alle ${noetig.length} Klassen der Teilnehmerwahl sind in kalender.css definiert`);

  /* 5. Und die alten Klassen sind wirklich weg -- nicht nur die neuen
        da. Ein halber Umbau hinterlässt beides. */
  const kalJs = readFileSync(join(WS, "assets/js/kalender.js"), "utf8");
  ok(!/wahl__knopf|wahl__rolle|wahl__name/.test(kalJs.replace(/\/\*[\s\S]*?\*\//g, " ")),
    "die alten .wahl__*-Klassen stehen nicht mehr im Kalender-Skript");

  /* 6. DIE WICHTIGSTE GEGENPROBE: Unterscheidet die Prüfung die beiden
        Fälle wirklich? Der ganze Wert hängt daran -- ohne sie könnte
        die Bedingung "ALLE_CSS.has(k)" verdreht sein, und die Prüfung
        wäre grün, während sie den echten Fehler durchwinkt.

        Nachgestellt wird der Fall von heute an einem Miniaturbeispiel:
        Zwei Klassen, beide ohne CSS auf ihrer Seite -- eine davon
        woanders gestaltet, die andere nirgends. */
  const seitenCss = definierteKlassen(".nur-hier { color: red; }");
  const hausCss = definierteKlassen(".nur-hier { color: red; } .woanders { color: blue; }");

  const fallB = !seitenCss.has("woanders") && hausCss.has("woanders");
  ok(fallB, fallB
    ? "gestaltet, aber nicht auf dieser Seite → wird als Fehler erkannt"
    : "MISSLUNGEN — der eigentliche Fehlerfall würde durchgehen");

  const fallA = !seitenCss.has("blosser-anker") && !hausCss.has("blosser-anker");
  ok(fallA, fallA
    ? "nirgends gestaltet → gilt als Struktur-Anker, kein Fehler"
    : "MISSLUNGEN — Struktur-Anker würden fälschlich anschlagen");

  /* 7. Und der Fehlalarm, den es schon gab, darf nicht zurückkommen:
        `classList.add(i === 0 ? 'a' : 'b')` hatte `i` als Klasse
        gemeldet -- auf sechzehn Seiten. */
  const ausAusdruck = klassenAusJs("x.classList.add(i === 0 ? 'marke__haupt' : 'marke__leise');");
  ok(!ausAusdruck.has("i") && ausAusdruck.has("marke__haupt") && ausAusdruck.has("marke__leise"),
    "aus classList.add(bedingung ? 'a' : 'b') werden beide Klassen gelesen, aber nicht die Variable");
}

/* =======================================================================
   WER kopf.js LAEDT, MUSS AUCH wahl.js LADEN

   Gefunden am 07.09.2026 beim Durchsehen der Seiten, die bis dahin nur
   GEPRUEFT und nie ANGESEHEN worden waren -- chat.html und
   uebersicht.html luden kopf.js ohne wahl.js.

   Der Umschalter "Meine Sicht" ist auf allen anderen Seiten ein selbst
   gebautes Bedienelement (`.wahl2`), hinter dem ein unsichtbares
   Systemfeld fuer Vorleseprogramme liegt. Ohne wahl.js faellt kopf.js
   auf dieses Systemfeld zurueck: 92 x 19 Pixel, grauer Kasten, weisse
   Schrift, Systemschriftgroesse -- gemessen, nicht geschaetzt. Auf den
   anderen Seiten misst dasselbe Feld 2 x 2 Pixel bei Deckkraft null,
   weil es dort nur noch der Zugaenglichkeit dient.

   KAPUTT WAR NICHTS. Der Umschalter funktionierte auf beiden Seiten --
   er sah nur aus wie aus einem anderen Programm. Genau diese Sorte
   Fehler findet keine Pruefung, die auf Fehlermeldungen achtet, und
   auch keine, die Klassennamen zaehlt: Die Klasse `.sicht__feld` ist
   NIRGENDS gestaltet und gilt deshalb zu Recht als Struktur-Anker.

   Deshalb hier eine Pruefung auf die ABHAENGIGKEIT statt auf die Optik:
   Wer das eine laedt, muss das andere laden -- und zwar vorher. */
console.log("\n=== Wer kopf.js laedt, laedt auch wahl.js");
{
  const seitenMitKopf = [];
  for (const seite of readdirSync(WS).filter((f) => f.endsWith(".html"))) {
    const html = readFileSync(join(WS, seite), "utf8");
    const skripte = [...html.matchAll(/<script[^>]+src="assets\/js\/([a-z0-9-]+)\.js/g)]
      .map((m) => m[1]);
    if (!skripte.includes("kopf")) continue;
    seitenMitKopf.push({ seite, skripte });
  }
  ok(seitenMitKopf.length >= 10,
    `${seitenMitKopf.length} Seiten laden kopf.js`);

  const ohneWahl = seitenMitKopf.filter((s) => !s.skripte.includes("wahl")).map((s) => s.seite);
  ok(ohneWahl.length === 0, ohneWahl.length
    ? `ohne wahl.js: ${ohneWahl.join(", ")}`
    : "alle davon laden auch wahl.js");

  /* UND ZWAR VORHER. kopf.js fragt beim Aufbau nach dem fertigen
     Bedienelement; kommt wahl.js danach, ist es zu spaet. */
  const zuSpaet = seitenMitKopf
    .filter((s) => s.skripte.indexOf("wahl") > s.skripte.indexOf("kopf"))
    .map((s) => s.seite);
  ok(zuSpaet.length === 0, zuSpaet.length
    ? `wahl.js steht zu spaet auf: ${zuSpaet.join(", ")}`
    : "und immer VOR kopf.js");
}

/* =======================================================================
   KEIN SKRIPT BAUT SICH SEINE EIGENE ROLLENLISTE

   Am 07.09.2026 hat Filipe gemeldet, dass „Creator-Profile" bei Spicy
   Media abbricht. Die Ursache war nicht diese Seite: In NEUN Skripten
   stand `const LEITUNG = new Set(['admin', 'manager'])`, und in keinem
   davon `spicy`. profil.js nahm deshalb den Creator-Zweig und lud das
   eigene Profil -- ein Spicy-Zugang ist kein Creator, also 404.

   Acht der neun sind nicht kaputtgegangen. Sie haben sich still falsch
   verhalten, und das ist der Grund für diese Prüfung: Die Liste steht
   jetzt EINMAL in bereiche.js, und wer sich wieder eine eigene baut,
   bekommt hier einen Fehler statt in vier Wochen eine Fehlermeldung
   bei einer Rolle, an die niemand gedacht hat.
   ======================================================================= */
console.log("\n=== Rollenlisten: eine Quelle, nicht neun");
{
  const jsOrdner = join(WS, "assets/js");
  const dateien = readdirSync(jsOrdner).filter((n) => n.endsWith(".js"));
  ok(dateien.length >= 15, `${dateien.length} Workspace-Skripte durchgesehen`);

  /* Gesucht wird eine Rollenliste, die 'admin' enthält und in einer
     Zuweisung steht -- also `new Set([...])` oder `= [...]`. Der
     Kommentar in bereiche.js, der den alten Fehler ZITIERT, darf nicht
     mitzählen: Sonst verdeckt ausgerechnet die Erklärung den Befund. */
  const eigenbau = [];
  for (const n of dateien) {
    const roh = readFileSync(join(jsOrdner, n), "utf8");
    const text = roh.replace(/\/\*[\s\S]*?\*\//g, " ").replace(/\/\/[^\n]*/g, " ");
    for (const m of text.matchAll(/(?:new Set\(\s*)?\[\s*((?:'[a-z]+'\s*,\s*)*'[a-z]+')\s*\]/g)) {
      const rollen = m[1].split(",").map((x) => x.trim().replace(/'/g, ""));
      if (!rollen.includes("admin") || rollen.length < 2) continue;
      /* bereiche.js DARF: dort steht die eine Quelle. Und die Listen an
         den Kacheln selbst sind etwas anderes -- sie sagen, wer eine
         KACHEL sieht, nicht wer zur Leitung gehört. Erkennbar daran,
         dass sie hinter `rollen:` stehen. */
      if (n === "bereiche.js") continue;
      const davor = text.slice(Math.max(0, m.index - 40), m.index);
      if (/rollen\s*:\s*$/.test(davor)) continue;
      eigenbau.push(`${n}: [${rollen.join(", ")}]`);
    }
  }
  /* UND DIESELBE SUCHE FUER ROLLEN-OBJEKTE (07.09.2026).

     Die Liste oben findet Felder und Mengen. Die Namen der Rollen
     stehen aber als OBJEKT da (`{ admin: 'DogFather', ... }`), und
     genau in dieser Form ist der Fehler ein zweites Mal aufgetreten:
     fuenf Skripte, keines mit 'spicy'. Im Chat stand ueber Cigdems
     Namen woertlich "UNDEFINED".

     Ein Muster, das nur eine Schreibweise kennt, findet auch nur eine.
     Deshalb hier die zweite. */
  for (const n of dateien) {
    if (n === "bereiche.js" || n === "gate.js") continue;   // Quelle bzw. Anmeldeseite
    const roh = readFileSync(join(jsOrdner, n), "utf8");
    const text = roh.replace(/\/\*[\s\S]*?\*\//g, " ").replace(/\/\/[^\n]*/g, " ");
    for (const m of text.matchAll(/\{[^{}]*\badmin\s*:\s*['"][^'"]+['"][^{}]*\}/g)) {
      if (!/\bspicy\s*:/.test(m[0])) eigenbau.push(`${n}: ${m[0].slice(0, 44)}…`);
    }
  }

  ok(eigenbau.length === 0, eigenbau.length
    ? `eigene Rollenliste gefunden: ${eigenbau.slice(0, 4).join(" · ")}`
    : "kein Skript baut sich eine eigene Rollenliste oder ein eigenes Rollen-Objekt");

  /* GEGENPROBE fuer die Objektform -- sie muss so eines auch finden. */
  const objProbe = "const X = { admin: 'DogFather', manager: 'Manager' };";
  ok([...objProbe.matchAll(/\{[^{}]*\badmin\s*:\s*['"][^'"]+['"][^{}]*\}/g)]
    .some((m) => !/\bspicy\s*:/.test(m[0])),
    "und ein Rollen-Objekt ohne 'spicy' wird auch wirklich gefunden");

  /* GEGENPROBE: Der Sucher muss so eine Liste auch WIRKLICH finden --
     sonst wäre die Zeile darüber grün, weil das Muster nie greift. */
  const probe = "  const LEITUNG = new Set(['admin', 'manager']);";
  const trifft = [...probe.matchAll(/(?:new Set\(\s*)?\[\s*((?:'[a-z]+'\s*,\s*)*'[a-z]+')\s*\]/g)]
    .some((m) => m[1].includes("admin"));
  ok(trifft, "und der Sucher erkennt so eine Liste auch wirklich");

  /* Und die eine Quelle muss die Rolle enthalten, um die es ging. */
  const quelle = readFileSync(join(jsOrdner, "bereiche.js"), "utf8");
  ok(/LEITUNG\s*=\s*new Set\(\[[^\]]*'spicy'[^\]]*'admin'[^\]]*'manager'[^\]]*\]\)/.test(quelle),
    "bereiche.js führt Spicy Media, DogFather und Manager als Leitung");
}

/* =======================================================================
   DIE ACHT KOPIEN DER MODULLISTE MÜSSEN GLEICH SEIN

   module.css beschreibt die Form aller Module -- Silhouette,
   Kantenlicht, Raster, Umrandung beim Tabben, Handy, Kontrastmodus.
   Dieselbe Klassenliste steht dafür achtmal in der Datei (im
   Kontrastmodus dreimal); CSS kennt keine Variable für Selektoren.

   WARUM DIE ZAHL VON SIEBEN AUF ACHT GESTIEGEN IST (08.10.2026):
   Nicht, weil eine Kopie dazugekommen wäre. Die achte stand seit dem
   07.09.2026 da -- die Umrandung beim Tabben (`:focus-visible`) --,
   nur ohne Marke. Sie wurde deshalb als Einzige nie verglichen, und
   das ausgerechnet bei der Regel, die niemand sieht, solange er die
   Maus benutzt. Aufgefallen ist es beim Eintragen von
   `.foyer-reihe`: acht Vorkommen der Liste, sieben Marken. Eine
   steigende Zahl ist hier also kein Mehraufwand, sondern eine
   geschlossene Lücke.

   EINE ZAHL, DIE SICH ÄNDERT, WIRD ERKLÄRT -- auch wenn sie steigt.
   Die Hausregel kennt nur den Fall der FALLENDEN Prüfzahl; der Grund
   dahinter gilt aber in beide Richtungen: Wer eine Zahl anpasst,
   ohne zu sagen warum, hat die Prüfung an das Ergebnis angepasst.

   Das ist die verwundbare Stelle: Wer eine Karte hinzufügt und nur
   sieben der acht Stellen pflegt, bekommt eine Karte MIT Schräge und
   OHNE Kantenlicht -- und niemandem fällt es auf, weil nichts kaputt
   geht. Genau diese Sorte stiller Abweichung fängt hier eine Prüfung
   ab, statt sich auf Sorgfalt zu verlassen.
   ======================================================================= */
console.log("\n=== module.css: die Modulliste steht achtmal — und überall gleich");
{
  const pfad = join(WURZEL, "workspace/assets/css/module.css");
  const text = readFileSync(pfad, "utf8");

  /* Jede Kopie ist mit `/* MODULLISTE *​/` markiert; gelesen wird die
     Klammer des `:is(...)` direkt danach. */
  const listen = [];
  const marke = /\/\* MODULLISTE \*\/\s*:is\(([^)]*)\)/g;
  for (let t; (t = marke.exec(text)) !== null; ) {
    listen.push(t[1].split(",").map((s) => s.trim()).filter(Boolean));
  }

  /* Die Anzahl gehört in die BEDINGUNG, nicht nur in den Meldetext:
     Fände die Prüfung keine einzige Liste, wäre "alle gleich" sonst
     trivial erfüllt -- grün, ohne etwas angesehen zu haben. */
  ok(listen.length === 8, `acht markierte Kopien gefunden (${listen.length})`);

  const erste = listen[0] || [];
  ok(erste.length >= 30, `die Liste umfasst ${erste.length} Klassen`);

  const abweichung = listen.findIndex(
    (l) => l.length !== erste.length || l.some((k, i) => k !== erste[i]));
  ok(abweichung === -1, abweichung === -1
    ? "alle acht Kopien sind Zeichen für Zeichen gleich"
    : `Kopie ${abweichung + 1} weicht ab (${listen[abweichung].length} statt ${erste.length} Klassen)`);

  /* GEGENPROBE: Der Vergleich muss auch NEIN sagen können. Ohne sie
     bewiese die Zeile darüber nur, dass irgendetwas verglichen wurde. */
  const geprobt = [erste, erste.slice(0, -1)];
  const findetEs = geprobt.findIndex(
    (l) => l.length !== erste.length || l.some((k, i) => k !== erste[i]));
  ok(findetEs === 1, "eine künstlich verkürzte Kopie wird erkannt");

  /* Und die Datei muss auf jeder Seite ZULETZT stehen -- sonst
     überschreiben die Seitendateien die Form wieder, so wie es bis zum
     07.09.2026 auf vier Seiten der Fall war.

     SEIT DEM 10.09.2026 STEHT EINE DAHINTER: haus.css.

     Sie entscheidet, ob die Seite das Haus der Agentur oder das von
     Team Dogi traegt -- auf der Modi-Adresse biegt der Server genau
     diesen Dateinamen um. Sie enthaelt ausschliesslich Variablen
     (`:root`), und bei Variablen entscheidet allein die Reihenfolge:
     Steht sie VOR module.css, gewinnt das Agenturhaus, und zwar
     lautlos -- die Seite sieht dann einfach normal aus.

     Geprueft wird deshalb ab jetzt das PAAR, nicht eine einzelne
     Datei: module.css an vorletzter, haus.css an letzter Stelle.
     Nur "haus.css ist zuletzt" zu pruefen waere zu wenig -- dann
     koennte module.css irgendwo davor stehen und die Seitendateien
     wieder ueberschreiben, also genau der Fehler von damals. */
  let zuletzt = 0, gesamt = 0;
  const schief = [];
  for (const seite of readdirSync(join(WURZEL, "workspace")).filter((f) => f.endsWith(".html"))) {
    if (seite === "index.html" || seite === "crew-index.html") continue;   // Waende laden module.css nicht
    const html = readFileSync(join(WURZEL, "workspace", seite), "utf8");
    const bl = [...html.matchAll(/<link[^>]+rel="stylesheet"[^>]*>/g)].map((m) => m[0]);
    if (!bl.some((z) => z.includes("css/module.css"))) continue;
    gesamt++;
    if (bl.length >= 2
        && bl[bl.length - 1].includes("css/haus.css")
        && bl[bl.length - 2].includes("css/module.css")) zuletzt++;
    else schief.push(seite);
  }
  ok(gesamt >= 15 && zuletzt === gesamt,
    `module.css und dahinter haus.css auf allen ${gesamt} Seiten (${zuletzt})`
    + (schief.length ? ` -- schief: ${schief.join(", ")}` : ""));

  /* GEGENPROBE: Erkennt die Reihenfolge-Pruefung eine falsche
     Reihenfolge ueberhaupt? Zwei erfundene Listen, eine richtig, eine
     vertauscht. Ohne sie waere die Zeile darueber gruen, sobald der
     Selektor nichts mehr findet. */
  const probeGut = ['<link href="css/module.css">', '<link href="css/haus.css">'];
  const probeSchlecht = ['<link href="css/haus.css">', '<link href="css/module.css">'];
  const richtig = (l) => l.length >= 2 && l[l.length - 1].includes("css/haus.css")
    && l[l.length - 2].includes("css/module.css");
  ok(richtig(probeGut) && !richtig(probeSchlecht),
    "und eine vertauschte Reihenfolge wird als falsch erkannt");

  /* DIE ZWEITE WAND LAEDT IHR HAUS DIREKT.
     crew-index.html steht nur auf der Modi-Adresse und darf
     crew-haus.css beim Namen nennen -- sie MUSS es sogar: Eine
     Zugangswand, die sich erst nach dem Umbiegen faerbt, waere die
     eine Seite, auf der man das Umfaerben sieht. */
  const wand = readFileSync(join(WURZEL, "workspace", "crew-index.html"), "utf8");
  const wandBl = [...wand.matchAll(/<link[^>]+rel="stylesheet"[^>]*>/g)].map((m) => m[0]);
  ok(wandBl.length >= 2 && wandBl[wandBl.length - 1].includes("css/crew-haus.css"),
    `die zweite Wand laedt ihr Haus zuletzt (${wandBl.length} Stilvorlagen)`);
}

/* =========================================================================
   IST DAS CSS UEBERHAUPT HEIL? (22.09.2026)
   =========================================================================

   ENTSTANDEN AUS EINEM ECHTEN FEHLER, der zwei Wochen live stand.

   In start.css fehlten an einer Stelle die zwei Zeichen, die einen
   Kommentar schliessen:

       ...
          der Inhalt darin angeordnet ist.
          =====================================================
       <- hier gehoerte `*` `/` hin
       .kacheln {

   CSS-Kommentare schachteln NICHT. Der Block lief deshalb weiter bis
   zum naechsten Abschluss -- und der stand mitten in `.kacheln`.
   Verschluckt wurde damit die oeffnende Klammer. Die Fehlerbehebung
   des Browsers hat danach auch noch die FOLGENDE Regel mitgenommen,
   weil sie deren Rumpf als Block einer ungueltigen Auswahl las.

   Gemessen in Chromium, beide Fassungen nacheinander: 738 statt 740
   Regeln. Sichtbar war es als Kachelreihe mit drei Spalten zu 413 px
   statt fuenf zu 243 px.

   WARUM ES NIEMANDEM AUFFIEL: Eine aeltere `.kacheln`-Regel weiter
   oben sprang ein. Die Seite sah nicht kaputt aus -- nur anders als
   gemeint. Das ist die gefaehrlichste Sorte: Es gibt nichts zu melden,
   keinen Fehler in der Konsole, keinen roten Haken. Nur eine Seite,
   die etwas anderes zeigt als das, was im Quelltext steht.

   WAS HIER GEMESSEN WIRD -- und warum gerade das:

   Auf oberster Ebene einer Stilvorlage darf nur dreierlei stehen: eine
   Auswahl mit ihrem Block, eine At-Regel, und Leerraum. Steht dort
   eine ANGABE (`gap: 12px;`) oder eine schliessende Klammer ohne ihre
   oeffnende, dann ist etwas verschluckt worden -- fast immer ein
   Kommentar ohne Abschluss.

   Das ist strenger als blosses Klammernzaehlen: Eine Klammernprobe ist
   gruen, solange gleich viele auf- wie zugehen, auch wenn ein
   Kommentar mittendrin einen ganzen Block gefressen hat.

   Kommentare und Zeichenketten werden dabei genauso ueberlesen, wie
   der Browser sie ueberliest -- sonst schlaegt die Pruefung bei jedem
   `/* ... } ... *' + '/` an, und eine Warnung, die immer kommt, ist
   keine mehr.
   ========================================================================= */
console.log("\n=== Ist das CSS ueberhaupt heil? ===");

/** Alle Formfehler einer Stilvorlage. Leeres Feld = in Ordnung. */
function formfehler(text) {
  const funde = [];
  const zeileVon = (stelle) => text.slice(0, stelle).split("\n").length;
  let i = 0, tiefe = 0, puffer = "", pufferAb = 0;

  while (i < text.length) {
    const c = text[i];

    if (c === "/" && text[i + 1] === "*") {
      const auf = i;
      i += 2;
      while (i < text.length && !(text[i] === "*" && text[i + 1] === "/")) i++;
      if (i >= text.length) {
        funde.push({ zeile: zeileVon(auf), was: "ein Kommentar wird nie geschlossen" });
        break;
      }
      i += 2;
      continue;
    }
    if (c === '"' || c === "'") {
      const q = c; i++;
      while (i < text.length && text[i] !== q) { if (text[i] === "\\") i++; i++; }
      i++; continue;
    }

    if (tiefe === 0) {
      if (c === "{") { tiefe = 1; puffer = ""; pufferAb = i + 1; i++; continue; }
      if (c === ";") {
        /* `@import url(...);` und Geschwister duerfen auf oberster
           Ebene mit einem Strichpunkt enden. Alles andere nicht. */
        if (!puffer.trim().startsWith("@")) {
          funde.push({
            zeile: zeileVon(pufferAb),
            was: "eine Angabe steht ausserhalb jeder Regel",
            beleg: puffer.trim().slice(0, 70).replace(/\s+/g, " "),
          });
        }
        puffer = ""; pufferAb = i + 1; i++; continue;
      }
      if (c === "}") {
        funde.push({ zeile: zeileVon(i), was: "eine schliessende Klammer ohne oeffnende" });
        puffer = ""; pufferAb = i + 1; i++; continue;
      }
      puffer += c; i++; continue;
    }

    if (c === "{") tiefe++;
    else if (c === "}") tiefe--;
    if (tiefe === 0) { puffer = ""; pufferAb = i + 1; }
    i++;
  }

  if (tiefe !== 0) {
    funde.push({ zeile: "Ende", was: `${tiefe} Regel(n) werden nie geschlossen` });
  }
  return funde;
}

{
  const css = readdirSync(join(WS, "assets", "css")).filter((n) => n.endsWith(".css"));
  /* DRITTER AUSGANG: Ohne Dateien misst die Pruefung nichts, und "0
     Fehler" waere dann ein gruener Haken fuer gar nichts. */
  ok(css.length > 20, `${css.length} Stilvorlagen gefunden`);

  const kaputt = [];
  for (const name of css) {
    const funde = formfehler(readFileSync(join(WS, "assets", "css", name), "utf8"));
    for (const f of funde) {
      kaputt.push(`${name}:${f.zeile} — ${f.was}` + (f.beleg ? `  ("${f.beleg}")` : ""));
    }
  }
  ok(kaputt.length === 0 && css.length > 20,
    kaputt.length
      ? `${kaputt.length} Stelle(n), an denen CSS still verloren geht:\n         `
        + kaputt.join("\n         ")
      : `keine Stilvorlage verliert still eine Regel (${css.length} geprueft)`);

  /* GEGENPROBEN: Die Pruefung muss beides koennen -- anschlagen und
     schweigen. Der vorletzte Fall ist der echte von start.css,
     Zeichen fuer Zeichen nachgebaut. */
  const proben = [
    ["gesundes CSS", ".a{b:c} /* } *" + "/ .d[e=';']{f:g}", false],
    ["@import mit Strichpunkt", "@import url(x.css); .a{b:c}", false],
    ["Kommentar ohne Abschluss", ".a{b:c} /* geht nie zu", true],
    ["Angabe ausserhalb jeder Regel", "gap: 12px; .a{b:c}", true],
    ["schliessende Klammer zu viel", ".a{b:c}}", true],
    ["Regel ohne Abschluss", ".a{b:c", true],
    ["der Fall aus start.css", "/* Titel\n   ====\n\n.kacheln {\n  /* innen *" + "/\n"
      + "  gap: 12px;\n}\n\n.kachel { color: red; }", true],
  ];
  const daneben = proben.filter(([, text, soll]) => (formfehler(text).length > 0) !== soll);
  ok(daneben.length === 0 && proben.length === 7,
    daneben.length
      ? `Gegenprobe daneben bei: ${daneben.map((p) => p[0]).join(", ")}`
      : `Gegenprobe: alle ${proben.length} Faelle richtig eingeordnet `
        + `(darunter der echte aus start.css)`);
}

/* ==== JEDE KLAMMER HAT IHR GEGENSTUECK ==============================

   Am 28.09.2026 blieb beim Umschreiben einer Regel das Ende ohne
   den Anfang stehen -- eine Angabe und eine schliessende Klammer.
   Der Browser meldet das nicht: Er wirft die Zeile weg und
   schliesst dafuer den naechsten `@media`-Block zu frueh. Alles
   danach galt damit auf JEDER Breite. Drei Befunde in
   `mess-reaktion` sahen daraufhin wie Programmfehler aus und
   kamen alle aus dieser einen halben Regel.

   Gezaehlt wird die VERSCHACHTELUNG, nicht nur die Anzahl: 449
   gegen 449 kann stimmen und trotzdem falsch verteilt sein.
   Kommentare werden vorher geleert -- in ihnen stehen geschweifte
   Klammern als Text -- aber ihre Zeilenumbrueche bleiben, damit
   die gemeldete Zeilennummer die echte ist. */
{
  const ordner = join(HIER, "..", "workspace", "assets", "css");
  const dateien = readdirSync(ordner).filter((n) => n.endsWith(".css"));
  const zaehle = (roh) => {
    const text = roh.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, " "));
    let tiefe = 0, zeile = 1;
    const zuviel = [];
    for (const c of text) {
      if (c === "\n") zeile += 1;
      else if (c === "{") tiefe += 1;
      else if (c === "}") { tiefe -= 1; if (tiefe < 0) { zuviel.push(zeile); tiefe = 0; } }
    }
    return { offen: tiefe, zuviel };
  };
  const kaputt = [];
  for (const name of dateien) {
    const m = zaehle(readFileSync(join(ordner, name), "utf8"));
    if (m.offen !== 0) kaputt.push(`${name}: ${m.offen} Klammer(n) nie geschlossen`);
    if (m.zuviel.length) {
      kaputt.push(`${name}: schliessende Klammer ohne Anfang in Zeile ${m.zuviel.join(", ")}`);
    }
  }
  ok(dateien.length > 5 && kaputt.length === 0,
    kaputt.length ? kaputt.join(" | ")
      : `alle ${dateien.length} Stilvorlagen sind sauber verschachtelt`);

  /* GEGENPROBE IN BEIDE RICHTUNGEN. Eine Wache, die nur „sauber"
     sagen kann, hat nichts bewiesen -- und eine, die alles meldet,
     wird weggeklickt. */
  const faellt = (t) => { const m = zaehle(t); return m.offen !== 0 || m.zuviel.length > 0; };
  const proben = [
    ["die halbe Regel vom 28.09.", ".a { color: red; }\n  background: blue; }\n", true],
    ["ein offener @media", "@media (x) {\n  .a { color: red; }\n", true],
    ["eine Klammer im Kommentar", "/* } */\n.a { color: red; }\n", false],
    ["sauberes CSS", "@media (x) {\n  .a { color: red; }\n}\n", false],
  ];
  const daneben = proben.filter(([, t, soll]) => faellt(t) !== soll).map((p) => p[0]);
  ok(daneben.length === 0,
    daneben.length ? `Gegenprobe daneben bei: ${daneben.join(", ")}`
      : `Gegenprobe: alle ${proben.length} Faelle richtig eingeordnet`);
}

/* ==== ZWEI GRUNDREGELN, EIN NAME, ZWEI BAUARTEN =====================

   Gebaut am 28.09.2026 fuer `reaktion.css`, wo `.stufen` zweimal
   stand: einmal fuer die Stufenleiter der Spenden (`display: grid`),
   600 Zeilen spaeter fuer die Chat-Leiste (`display: flex`). Die
   spaetere gewinnt -- und die Stufenleiter stellte ihre drei Stufen
   nebeneinander, 572 Pixel in einer 327 Pixel schmalen Spalte, mit
   waagerechter Rollleiste. Auf dem Bildschirmfoto sah das aus wie
   ein Platzproblem.

   AB JETZT FUER ALLE STILVORLAGEN. Eine Wache, die nur eine Datei
   ansieht, findet genau die Fehler dieser einen Datei -- und der
   zweite Fund lag in gate.css.

   GEZAEHLT WIRD NUR, WAS SICH WIDERSPRECHEN KANN:
     - Die Auswahl muss GENAU die Klasse sein. `.saal .pult { … }`
       ist dieselbe Klasse in einem Zusammenhang, kein zweites
       Bauteil.
     - Regeln in einer Medienabfrage zaehlen nicht -- sie sind per
       Definition Varianten fuer eine andere Umgebung.
     - `display: none` zaehlt nicht. „Erst versteckt, dann gezeigt"
       ist das haeufigste Paar im Haus; wer es meldet, baut eine
       Warnung, die immer kommt. */
{
  const ordner = join(HIER, "..", "workspace", "assets", "css");
  const ohneMedien = (t) => t.replace(
    /@media[^{]*\{(?:[^{}]|\{[^{}]*\})*\}/g,
    (m) => m.replace(new RegExp("[^" + String.fromCharCode(10) + "]", "g"), " "));
  const positiv = (w) => w && w !== "none" && !/^none\b/.test(w);
  /* LOOKBEHIND STATT VERBRAUCHEN: Mit `(^|[};])` frisst der erste
     Treffer die Klammer, die der naechste als Anfang braeuchte --
     `.a { … } .a { … }` liefert dann nur EINEN Treffer, und genau
     der Fall, um den es geht, faellt durch. */
  const grundregeln = (roh) => {
    const raus = {};
    const text = ohneMedien(roh.replace(/\/\*[\s\S]*?\*\//g,
      (m) => m.replace(new RegExp("[^" + String.fromCharCode(10) + "]", "g"), " ")));
    for (const m of text.matchAll(
      /(?:^|(?<=[};]))\s*(\.(-?[a-zA-Z_][a-zA-Z0-9_-]*))\s*\{([^{}]*)\}/g)) {
      const w = (m[3].match(/(?:^|[\s;])display\s*:\s*([^;]+)/) || [, ""])[1].trim();
      if (!positiv(w)) continue;
      (raus[m[2]] ||= []).push(w);
    }
    return raus;
  };
  const streitIn = (roh) => Object.entries(grundregeln(roh))
    .filter(([, was]) => new Set(was).size > 1)
    .map(([name, was]) => `${name} (${[...new Set(was)].join(" vs. ")})`);

  const dateien = readdirSync(ordner).filter((n) => n.endsWith(".css"));
  const funde = [];
  let geprueft = 0;
  for (const name of dateien) {
    const roh = readFileSync(join(ordner, name), "utf8");
    geprueft += Object.keys(grundregeln(roh)).length;
    for (const z of streitIn(roh)) funde.push(`${name}: ${z}`);
  }
  ok(geprueft > 100 && funde.length === 0,
    funde.length ? `Namensstreit: ${funde.join(" | ")}`
      : `${geprueft} Grundregeln in ${dateien.length} Stilvorlagen -- `
        + "keine Klasse zweimal verschieden gebaut");

  /* GEGENPROBEN IN BEIDE RICHTUNGEN. */
  const faelle = [
    ["der Fall vom 28.09. (zwei Grundregeln, anderes display)",
      ".stufen { display: grid; } .stufen { display: flex; }", true],
    ["verstecken und zeigen",
      ".probe { display: none; } .probe { display: grid; }", false],
    ["dieselbe Klasse in einem Zusammenhang",
      ".pult { display: grid; } .saal .pult { display: flex; }", false],
    ["eine Variante in einer Medienabfrage",
      ".paar { display: grid; } @media (pointer: coarse) { .paar { display: flex; } }", false],
    ["zweimal dasselbe display",
      ".gleich { display: grid; } .gleich { display: grid; }", false],
    ["eine Klasse im Kommentar",
      "/* .a { display: flex; } */ .a { display: grid; }", false],
  ];
  const daneben = faelle
    .filter(([, text, soll]) => (streitIn(text).length > 0) !== soll)
    .map(([name]) => name);
  ok(daneben.length === 0,
    daneben.length ? `Gegenprobe daneben bei: ${daneben.join(", ")}`
      : `Gegenprobe: alle ${faelle.length} Faelle richtig eingeordnet`);
}

console.log(`\n${fehler === 0 ? "ALLES IN ORDNUNG" : `${fehler} FEHLER`}`);
process.exit(fehler ? 1 : 0);