Anleitung, Etappe 1: die Einweisung fuer Creator steht

Erste von sieben Etappen aus dem geprueften Bauplan
(`02 Projekte/Anleitung-Kachel – Bauplan.md`). Ein Creator oeffnet die
neue Kachel und sieht seine vollstaendige Einweisung: drei Saetze „In
60 Sekunden", fuenf Erste Schritte, achtzehn Karten in drei Stufen,
„Das kannst du liegen lassen", sein Rhythmus und vier Fragen.

WAS NICHT IN DER DATENBANK STEHT -- und das ist der Kern.

Eine Karte zeigt Name, Symbol, Farbe und Adresse ihrer echten Kachel.
Nichts davon ist gespeichert. Es steht in bereiche.js, genau einmal,
und wird ueber einen abgeleiteten Schluessel verbunden
(`bereich.html?b=live` -> `bereich:live`). Haette ich den Namen
danebengeschrieben, erklaerte die Anleitung nach der ersten Umbenennung
eine Kachel, die es so nicht mehr gibt -- und niemandem fiele es auf.
Gespeichert ist nur, was der Bauplan NEU bringt: die Stufe und die drei
Saetze Wozu / Was du hier tust / Merke.

Der Schluessel muss abgeleitet sein, weil zwei Faelle sonst
zusammenfallen: `bereich.html` ist FUENF Kacheln, und `profil.html`
heisst beim Creator „Mein Profil" und beim Manager „Creator-Profile".

DIE WICHTIGSTE PRUEFUNG STEHT NICHT IM BAUPLAN.

pruef-anleitung.mjs fragt in BEIDE Richtungen: Hat jede Kachel, die
diese Rolle sieht, genau eine Karte -- und zeigt jede Karte auf eine
Kachel, die es wirklich gibt? Beides kann lautlos kaputtgehen, und der
Bauplan sah dafuer nur einen Hinweis in der Pflege-Ansicht vor. Der
hilft nur, wenn jemand hinsieht.

Dafuer wird bereiche.js in der Pruefung AUSGEFUEHRT (node:vm mit einem
winzigen Browser-Ersatz), nicht mit einem Muster durchsucht. Ein Muster
waere eine ungenaue Nachbildung und wuerde bei der ersten ungewohnten
Schreibweise „alles in Ordnung" melden.

DREI BEFUNDE BEIM BAUEN, ALLE GEMESSEN STATT GEAHNT:

1. Ton 48. Das Hauswerkzeug schlug #b0ec0a vor -- Abstand 0,0815 zur
   Kachel „Agentur", die ein Creator direkt daneben sieht, und 13,28:1
   Kontrast. Der Grund: Es rechnet gegen alle 47 Toene, aber die Haelfte
   gehoert zum anderen Haus und erscheint nie auf demselben Bildschirm.
   Gegen die 24 Toene DIESES Hauses gerechnet: #ff7eed, Abstand 0,1168
   (43 % mehr) bei sanfteren 8,46:1. Die Herleitung steht in start.css,
   samt Warnung, dass ein erneuter Werkzeuglauf es verschlechtern wuerde.

2. Die Erste-Schritte-Verweise waren 20 px hoch. Gemessen bei 412 px --
   die halbe Hausgroesse fuer einen Daumen, auf der Seite, die fuer
   Leute gebaut ist, die zum ersten Mal hier sind und auf dem Handy
   sitzen. Jetzt ist die ganze Zeile das Ziel, 44 px.

3. Die Textbloecke standen ohne Flaeche auf der Seite. Auf dem ersten
   Bild lief „Fast alles andere fuellt deine Betreuung fuer dich" quer
   ueber das helle Wasserzeichen des Hintergrundbildes. Deshalb hat im
   Haus jeder Textträger `--flaeche`: Ein Kontrast, der vom
   Bildausschnitt abhaengt, ist keiner.

NEBENBEI ZWEI LUECKEN GESCHLOSSEN: `manager-ziele.html` und
`anleitung.html` fehlten in der Seitenliste von pruef-rollen. Ganz
ungeprueft waren sie nicht -- der Kachel-Durchgang oeffnet jede Kachel
--, aber er prueft nur, WO man landet. Konsolenfehler, 4xx-Antworten,
tote Verweise und Ueberstehen liefen fuer beide nie. Dieselbe Sorte
stiller Luecke wie am 28.08.2026 bei RunOne.

ENTSCHEIDUNGEN VON FILIPE (06.10.2026):
  Pflege durch DogFather UND Spicy (nicht nur DogFather wie im Bauplan)
  -- dieselbe Regel wie bei den Manager-Zielen am 02.10.
  Vorerst nur das Agenturhaus, die Daten aber haus-bewusst angelegt.

DogFather bekommt keine Kachel (er braucht keine Einweisung), darf die
Seite aber oeffnen: Ueber den vorhandenen Sicht-Umschalter sieht er
jede Fassung. Eine zweite Rollenauswahl auf der Seite waere dieselbe
Funktion an einer Stelle, an der sie niemand sucht.

Gemessen
  pruef-anleitung     47 Pruefungen, 0 Fehler (neu)
  pruef-rollen       401 Pruefungen, 0 Fehler (vorher 384)
  pruef-rechtetafel   19 Pruefungen, 0 Fehler
  pruef-css-klassen   alles in Ordnung, jetzt 40 Seiten, 42 Stellen
                      unter 11,5 px (unveraendert)
  mess-anleitung      kein Querschieben bei 412 und 1440 px, keine
                      Konsolenfehler, alle 18 Karten mit Kachelfarbe

Sicherung vor dem Ausliefern:
  ~/sicherungen/workspace-vor-anleitung-20261006-1325.db (integrity ok)

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/css/anleitung.css

@@ -0,0 +1,474 @@
+/* =====================================================================
+   anleitung.css — die Einweisung je Rolle (06.10.2026)
+   =====================================================================
+
+   VIER REGELN, DIE HIER ÜBERALL GELTEN:
+
+   1. KEINE EIGENEN FARBEN. Jede Karte trägt den Ton ihrer echten
+      Kachel (`data-ton`, gesetzt von anleitung.js). Eine eigene
+      Farbwelt hier wäre eine zweite Wahrheit über dieselben Kacheln --
+      und man würde die Anleitung nicht mehr mit der Startseite
+      zusammenlesen können.
+
+   2. DIE STUFE IST EIN WORT. Sie steht an jeder Karte als Text, nicht
+      nur als Farbe. Ein Mensch, der Farben schlecht unterscheidet,
+      läse die Seite sonst ohne ihre einzige Ordnung.
+
+   3. MOBILE FIRST ALS REGEL, NICHT ALS ZAHL. Das Kartengitter bricht
+      über `auto-fill` um, nicht über eine Schwelle in Pixeln. Eine
+      feste Zahl ist eine Rechnung von gestern und wird beim nächsten
+      zusätzlichen Element still falsch.
+
+   4. NICHTS UNTER 11,5 PIXELN. Hausregel seit dem 01.09.2026,
+      nachgemessen von pruef-css-klassen. Kleinster Wert hier: .78rem.
+   ===================================================================== */
+
+.an-seite {
+  /* Der Abstand zwischen den großen Blöcken -- einmal gesetzt, überall
+     benutzt. Drei verschiedene Abstände sind der Grund, warum eine
+     Seite „unruhig" aussieht, ohne dass man sagen kann, woran es liegt. */
+  --an-luft: 26px;
+}
+
+/* =====================================================================
+   OHNE EIGENE FASSUNG (DogFather)
+   ===================================================================== */
+.an-ohne {
+  margin: 18px 0 0;
+  padding: 16px 18px;
+  border: 1px solid var(--rand);
+  border-radius: var(--radius-klein, 12px);
+  background: var(--flaeche);
+  color: var(--text-still);
+  font-size: .95rem;
+  line-height: 1.6;
+  max-width: 62ch;
+}
+
+/* =====================================================================
+   BLÖCKE
+   =====================================================================
+
+   JEDER TEXTBLOCK BEKOMMT EINE FLÄCHE (06.10.2026, nach dem ersten Bild).
+
+   Der erste Entwurf setzte „In 60 Sekunden", „Erste Schritte",
+   „Nicht deins" und „Dein Rhythmus" ohne Hintergrund auf die Seite.
+   Auf dem Bild bei 412 px lief der Satz „Fast alles andere füllt deine
+   Betreuung für dich" quer über das helle Wasserzeichen des
+   Hintergrundbildes und war dort kaum zu lesen.
+
+   Das ist kein Schönheitsfehler, sondern der Grund, warum im Haus
+   JEDER Textträger `--flaeche` hat (`rgba(9,13,22,.89)`, also fast
+   deckend): Die Startseite hat ein Foto im Hintergrund, und wie hell
+   es an einer bestimmten Stelle ist, weiß niemand vorher. Ein
+   Kontrast, der vom Bildausschnitt abhängt, ist kein Kontrast.
+
+   Die Fase (`--fase`) statt eines Radius: dieselbe Form wie `.mz-kopf`
+   und die übrigen großen Träger im Haus. */
+.an-block {
+  margin-top: var(--an-luft);
+  padding: 16px 18px;
+  border: 1px solid var(--rand);
+  background: var(--flaeche);
+  clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
+}
+
+.an-block__titel {
+  margin: 0 0 10px;
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: .01em;
+  color: var(--text);
+}
+
+.an-leit {
+  margin: 0 0 12px;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--text);
+  max-width: 68ch;
+}
+
+.an-saetze { margin: 0; padding: 0; list-style: none; }
+
+.an-saetze__zeile {
+  position: relative;
+  padding-left: 20px;
+  margin-bottom: 7px;
+  font-size: .95rem;
+  line-height: 1.55;
+  color: var(--text-leise);
+  max-width: 68ch;
+}
+/* Ein Punkt statt eines Aufzählungszeichens: Die drei Sätze sind keine
+   Liste von Dingen, sondern drei Aussagen. Der Punkt gliedert, ohne zu
+   zählen. */
+.an-saetze__zeile::before {
+  content: "";
+  position: absolute;
+  left: 4px; top: .62em;
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--akzent);
+  opacity: .75;
+}
+
+/* =====================================================================
+   ERSTE SCHRITTE
+   ===================================================================== */
+.an-schritte {
+  margin: 0;
+  padding: 0 0 0 1.35em;
+  display: grid;
+  gap: 9px;
+}
+
+.an-schritt { max-width: 68ch; }
+
+/* DIE GANZE ZEILE IST DAS ZIEL, nicht nur das Stichwort.
+   Gemessen am 06.10.2026: Der Verweis war 20 px hoch -- die halbe
+   Hausgröße für etwas, das ein Daumen treffen soll. 44 px ist die
+   Zahl, die im Haus für Berührziele gilt, und sie steht hier als
+   Mindesthöhe und nicht als feste: Zwei Zeilen Text dürfen wachsen. */
+.an-schritt__rumpf {
+  display: block;
+  min-height: 44px;
+  padding: 8px 10px;
+  margin-left: -10px;
+  border-radius: var(--radius-klein, 12px);
+  font-size: .95rem;
+  line-height: 1.55;
+  color: var(--text-leise);
+  text-decoration: none;
+  transition: background var(--tempo, .18s);
+}
+a.an-schritt__rumpf:hover {
+  background: color-mix(in srgb, var(--akzent) 10%, transparent);
+}
+a.an-schritt__rumpf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+
+.an-schritt__name {
+  font-weight: 700;
+  color: var(--text);
+  margin-right: .4em;
+}
+a.an-schritt__rumpf .an-schritt__name { color: var(--akzent); }
+a.an-schritt__rumpf:hover .an-schritt__name { text-decoration: underline; }
+
+/* =====================================================================
+   DER STUFEN-FILTER
+   ===================================================================== */
+.an-filter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: var(--an-luft);
+}
+
+.an-filter__knopf {
+  font: inherit;
+  font-size: .85rem;
+  font-weight: 650;
+  /* 40 Pixel hoch: Die Hausgröße für etwas, das ein Daumen trifft. */
+  min-height: 40px;
+  padding: 0 15px;
+  border-radius: 999px;
+  border: 1px solid var(--rand);
+  /* NICHT durchsichtig: Der Filter steht zwischen zwei Flaechen und
+     damit direkt auf dem Hintergrundbild. Ein durchsichtiger Knopf ist
+     genau so gut lesbar, wie der Bildausschnitt es zulaesst -- und das
+     weiss niemand vorher. */
+  background: var(--flaeche);
+  color: var(--text-still);
+  cursor: pointer;
+  transition: background var(--tempo, .18s), color var(--tempo, .18s),
+              border-color var(--tempo, .18s);
+}
+.an-filter__knopf:hover { border-color: var(--rand-hell, var(--rand)); color: var(--text); }
+.an-filter__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+
+/* DER GEWÄHLTE ZUSTAND HÄNGT AN `aria-pressed`, NICHT AN EINER KLASSE.
+   Damit ist er für Vorleseprogramme und fürs Auge dieselbe Tatsache --
+   eine Klasse daneben wäre die, die beim nächsten Umbau vergessen
+   wird, und dann sagt der Knopf etwas anderes, als er aussieht. */
+.an-filter__knopf[aria-pressed="true"] {
+  /* Auf die FLAECHE gemischt und nicht auf `transparent`: Sonst waere
+     ausgerechnet der gewaehlte Knopf der durchsichtigste von allen. */
+  background: color-mix(in srgb, var(--akzent) 22%, var(--flaeche));
+  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
+  color: var(--text);
+}
+
+/* =====================================================================
+   EIN STUFENBLOCK
+   ===================================================================== */
+.an-stufe { margin-top: var(--an-luft); }
+
+.an-stufe__falte {
+  border: 1px solid var(--rand);
+  border-radius: var(--radius-klein, 12px);
+  background: var(--flaeche);
+  overflow: hidden;
+}
+
+.an-stufe__griff {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+.an-stufe__griff::-webkit-details-marker { display: none; }
+.an-stufe__griff:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
+
+/* Das Dreieck selbst gebaut, weil das eingebaute je nach Browser
+   woanders sitzt und sich nicht färben lässt. */
+.an-stufe__griff::before {
+  content: "";
+  flex: none;
+  width: 8px; height: 8px;
+  border-right: 2px solid var(--text-still);
+  border-bottom: 2px solid var(--text-still);
+  transform: rotate(-45deg);
+  transition: transform var(--tempo, .18s);
+}
+.an-stufe__falte[open] > .an-stufe__griff::before { transform: rotate(45deg); }
+
+.an-stufe__titel {
+  flex: 1 1 auto;
+  font-size: 1.02rem;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.an-stufe__zahl {
+  flex: none;
+  min-width: 26px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--text-still) 16%, transparent);
+  color: var(--text-still);
+  font-size: .8rem;
+  font-weight: 700;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.an-stufe__unter {
+  margin: 0;
+  padding: 0 16px 4px;
+  font-size: .85rem;
+  color: var(--text-still);
+}
+
+/* DAS GITTER MISST, STATT ZU RECHNEN. `auto-fill` mit einer
+   Mindestbreite bricht genau dann um, wenn der Platz nicht reicht --
+   auf einem 320er Telefon einspaltig, auf einem breiten Bildschirm
+   dreispaltig, ohne eine einzige Schwelle in Pixeln. */
+.an-stufe__gitter {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
+  gap: 12px;
+  padding: 12px 16px 16px;
+}
+
+/* =====================================================================
+   EINE KARTE
+   ===================================================================== */
+.an-karte {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+  border: 1px solid var(--rand);
+  border-radius: var(--radius-klein, 12px);
+  background: var(--flaeche);
+  /* Der Ton der echten Kachel, als schmaler Streifen links. Nicht als
+     Fläche: Achtzehn volle Farbflächen untereinander sind ein
+     Jahrmarkt, und augenschonend ist etwas anderes. */
+  border-left: 3px solid var(--ton, var(--rand));
+}
+
+.an-karte__kopf { display: flex; align-items: center; gap: 10px; }
+
+.an-karte__zeichen {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 38px; height: 38px;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--ton, var(--akzent)) 14%, transparent);
+}
+.an-karte__svg { width: 24px; height: 24px; }
+
+.an-karte__namen {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 8px;
+  min-width: 0;
+}
+
+.an-karte__name {
+  margin: 0;
+  font-size: .98rem;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.an-karte__stufe {
+  font-size: .78rem;
+  font-weight: 700;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+  color: var(--ton, var(--text-still));
+}
+
+.an-karte__zeilen { margin: 0; display: grid; gap: 2px; }
+
+.an-karte__schild {
+  font-size: .78rem;
+  font-weight: 700;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+  color: var(--text-still);
+}
+.an-karte__text {
+  margin: 0 0 6px;
+  font-size: .9rem;
+  line-height: 1.5;
+  color: var(--text-leise);
+}
+.an-karte__text:last-child { margin-bottom: 0; }
+
+.an-karte__weg {
+  align-self: flex-start;
+  margin-top: auto;
+  /* 40 Pixel: dieselbe Daumenhöhe wie der Filter. */
+  min-height: 40px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 14px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
+  color: var(--ton, var(--akzent));
+  font-size: .85rem;
+  font-weight: 650;
+  text-decoration: none;
+  transition: background var(--tempo, .18s);
+}
+.an-karte__weg:hover { background: color-mix(in srgb, var(--ton, var(--akzent)) 14%, transparent); }
+.an-karte__weg:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+
+/* =====================================================================
+   NICHT DEINS
+   ===================================================================== */
+.an-nicht { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
+
+.an-nicht__zeile {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px 8px;
+  padding: 10px 14px;
+  border: 1px dashed var(--rand);
+  border-radius: var(--radius-klein, 12px);
+  font-size: .92rem;
+  line-height: 1.5;
+}
+/* Gestrichelt und nicht durchgestrichen: Durchgestrichener Text ist
+   schlecht lesbar, und „nicht deins" heißt nicht „erledigt". */
+.an-nicht__was { font-weight: 650; color: var(--text-still); }
+.an-nicht__wer { color: var(--text-leise); }
+
+/* =====================================================================
+   RHYTHMUS
+   ===================================================================== */
+.an-takt {
+  margin: 0;
+  display: grid;
+  /* Erste Spalte so breit wie ihr längster Eintrag, nicht breiter --
+     „Vor und nach dem LIVE" soll nicht umbrechen, und „Täglich" soll
+     keine halbe Zeile Leerraum erzeugen. */
+  grid-template-columns: max-content 1fr;
+  gap: 6px 16px;
+  align-items: baseline;
+}
+.an-takt__wann {
+  font-size: .85rem;
+  font-weight: 700;
+  color: var(--text);
+}
+.an-takt__was {
+  margin: 0;
+  font-size: .92rem;
+  line-height: 1.5;
+  color: var(--text-leise);
+}
+/* Auf schmalen Geräten untereinander: Zwei Spalten mit „Vor und nach
+   dem LIVE" links lassen rechts vier Wörter übrig. Die Regel misst
+   nicht, deshalb hier doch eine Schwelle -- und sie steht direkt an
+   dem, was sie betrifft. */
+@media (max-width: 460px) {
+  .an-takt { grid-template-columns: 1fr; gap: 2px; }
+  .an-takt__was { margin-bottom: 8px; }
+}
+
+/* =====================================================================
+   FRAGEN
+   ===================================================================== */
+.an-fragen { display: grid; gap: 8px; }
+
+.an-frage {
+  border: 1px solid var(--rand);
+  border-radius: var(--radius-klein, 12px);
+  background: var(--flaeche);
+  overflow: hidden;
+}
+.an-frage__frage {
+  padding: 12px 14px;
+  cursor: pointer;
+  list-style: none;
+  font-size: .94rem;
+  font-weight: 650;
+  color: var(--text);
+}
+.an-frage__frage::-webkit-details-marker { display: none; }
+.an-frage__frage:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
+.an-frage__antwort {
+  margin: 0;
+  padding: 0 14px 13px;
+  font-size: .92rem;
+  line-height: 1.6;
+  color: var(--text-leise);
+  max-width: 68ch;
+}
+
+/* =====================================================================
+   HILFE
+   ===================================================================== */
+.an-hilfe {
+  margin: var(--an-luft) 0 0;
+  /* Dieselbe Flaeche wie die Bloecke darueber, aus demselben Grund --
+     nur leiser: kein Titel, kleinere Schrift. Ein Schlusssatz soll
+     lesbar sein, ohne sich wie ein weiterer Abschnitt aufzufuehren. */
+  padding: 14px 18px;
+  border: 1px solid var(--rand);
+  background: var(--flaeche);
+  clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
+  font-size: .9rem;
+  line-height: 1.6;
+  color: var(--text-still);
+}
+.an-hilfe a { color: var(--akzent); }
+
+/* =====================================================================
+   WENIGER BEWEGUNG, WENN JEMAND DAS SO EINGESTELLT HAT
+   ===================================================================== */
+@media (prefers-reduced-motion: reduce) {
+  .an-filter__knopf,
+  .an-schritt__rumpf,
+  .an-stufe__griff::before,
+  .an-karte__weg { transition: none; }
+}

workspace/assets/css/start.css

@@ -1198,6 +1198,52 @@ body.start > main { position: relative; z-index: 1; }
    maximiert DANN den Abstand. Wer den 48. hinzufuegt, sollte wissen,
    dass es eng wird, und notfalls einen alten verschieben. */
 [data-ton="47"] { --ton: #7368ff; }   /* Manager-Ziele (gerechnet 02.10.2026) */
+/* ======================================================================
+   TON 48 -- UND WARUM ER NICHT VOM HAUSWERKZEUG STAMMT (06.10.2026)
+
+   Der Kommentar bei Ton 47 sagt: "Wer den 48. hinzufuegt, sollte wissen,
+   dass es eng wird, und notfalls einen alten verschieben." Genau das ist
+   eingetreten, und die Loesung war eine dritte.
+
+   `node tools/kachel-farbe-einzeln.mjs 48` schlug #b0ec0a vor:
+     Abstand zum naechsten Ton ueberhaupt   0,0793
+     davon zur naechsten AGENTUR-Kachel     0,0815  (Ton 17, "Agentur")
+     Kontrast 13,28:1, Buntheit 0,220
+
+   Beides war unbefriedigend. 0,0815 waere der engste Abstand im Haus
+   gewesen, und der Nachbar waere ausgerechnet eine Kachel, die ein
+   Creator direkt daneben sieht -- zwei Gelbgruen nebeneinander. Dazu
+   13,28:1 auf dunklem Grund: Von 47 Toenen sind nur zwei heller.
+
+   WAS DAS WERKZEUG NICHT WEISS: Es rechnet gegen ALLE 47 Toene. Die
+   Haelfte davon gehoert aber zum anderen Haus (Team Dogi) und erscheint
+   nie auf demselben Bildschirm. Es optimiert damit gegen Nachbarn, die
+   es gar nicht gibt, und verschenkt dabei den Platz, der zwischen den
+   Kacheln liegt, die man WIRKLICH zusammen sieht.
+
+   Nachgerechnet gegen die 24 Toene des Agenturhauses, mit einer
+   Obergrenze beim Kontrast (11:1, damit nichts blendet) und der
+   Buntheits-Untergrenze, die im Haus tatsaechlich vorkommt (0,125 --
+   darunter liegt nur Ton 44):
+
+     #ff7eed
+     Abstand zur naechsten AGENTUR-Kachel   0,1168  (Ton 6)  -- 43 % mehr
+     Abstand zur naechsten Crew-Kachel      0,0656
+     Kontrast  8,46:1   (Hausmedian 6,95)
+     Buntheit  0,202
+
+   Der Abstand zum anderen Haus ist kleiner, und das ist der bewusste
+   Tausch: Dort sitzt niemand, der beide zugleich sieht. Innerhalb des
+   Agenturhauses ist dieser Ton weiter von allem entfernt als jedes Paar,
+   das heute schon im Haus steht (engstes Paar: 0,0899).
+
+   ACHTUNG BEIM NAECHSTEN MAL: `kachel-farbe-einzeln.mjs 48 --schreiben`
+   wuerde diesen Wert durch #b0ec0a ERSETZEN. Das Werkzeug kennt die
+   Haeuser nicht. Wer es laufen laesst, macht den Ton schlechter, ohne
+   es zu merken -- entweder das Werkzeug haus-bewusst nachruesten oder
+   Ton 48 auslassen.
+   ====================================================================== */
+[data-ton="48"] { --ton: #ff7eed; }   /* Anleitung (gerechnet 06.10.2026, siehe oben) */
 /* WARUM ES KEINEN TON 46 GIBT (25.09.2026)
 
    Die Tuer ins andere Haus trug bis heute Ton 40 -- dieselbe Nummer