DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Der Notizblock -- und eine Pruefung, die zwoelf Kacheln nie angesehen hat

Browse Source 
Filipe: „fuer die modis, rechte und linke hand und dogfather eine
kachel hinzufuegst, sie soll: Notizen, heissen. ich will dass du das
auch wie ein notizblock erstellst. ich will dass es uebelst geil und
einzigartig ist."

=================================================================
TEIL 1: DIE FARBE -- UND WAS DABEI AUFFIEL
=================================================================

Fuer die neue Kachel braucht es einen Ton. Beim Suchen fiel auf, dass
tools/kachelton-entzerren.mjs zwoelf der 45 Farben fuer FREI hielt.

Sie sind es nicht. bereicheFuer() gibt fuer die fuenf Rollen des
Agenturhauses null zurueck -- das heisst „nimm die Liste aus dem
Browser", und die steht in workspace/assets/js/bereiche.js. Dort
stehen die Toene 1 bis 22 und 44: Dashboard, Zahlen, Team-Lage,
Scout-Pipeline. Kacheln, die jeden Tag jemand ansieht.

pruef-kachelfarben hatte denselben blinden Fleck. Sie meldete seit
Wochen „33 benutzte Toene" und war gruen. Was sie dadurch NICHT sah:

  * Der Farblauf von gestern Nacht hat zwoelf dieser Kacheln
    verschoben und drei davon unter die Buntheitsgrenze gedrueckt.
    Gruen geblieben.
  * Ton 7, 16 und 22 lagen SEIT JEHER unter der Grenze (0,112 / 0,116
    / 0,068). Nie gemeldet.

Das ist die Sorte gruener Haken, vor der die Hausregel warnt: Er sagt
nur, dass die Bedingung erfuellt war -- nicht, dass sie das Richtige
angesehen hat.

BEHOBEN, und zwar an der Wurzel: Die REGELN (Kontrast, Buntheit)
gelten jetzt fuer jeden Ton, der irgendwo an einer Kachel steht --
gelesen aus denselben fuenf Dateien, die auch pruef-kachel-universum
liest. Dazu die Namen der Kacheln, damit „Ton 1 traegt Dashboard"
ueberhaupt pruefbar ist.

DIE PALETTE WURDE NEU GERECHNET, mit dem dritten Verfahren an einem
Tag -- die ersten zwei stehen als Fehler im Kopf des Werkzeugs:

  1. Alle 45 neu verteilt. Lief ueber zwei ausdrueckliche Wuensche
     hinweg (#ff1a1a, #a8d8ff).
  2. Nur die Kollisionen, aber immer nur EINEN der beiden bewegt.
     Ergebnis: Ton 1 sprang vom Tuerkis ins Altrosa, 0,197 weit.
  3. BEIDE duerfen sich bewegen, und zwar beide nur ein bisschen.
     Zwei Toene, die 0,02 auseinanderstehen und 0,09 brauchen, teilen
     sich das -- jeder rueckt 0,045, und beide bleiben, was sie waren.

  kleinster Abstand   0,0154  ->  0,0905
  zu blass                 4  ->  0
  sichtbar veraendert           7 Kacheln (ueber 0,05)
  kaum zu sehen                28 (13 zwischen 0,02 und 0,05, 15 darunter)

EINE AUSNAHME MIT ZAHL, keine mit Achselzucken: Ton 1 (Dashboard)
bleibt acht Tausendstel unter der Buntheitsgrenze. Gemessen ueber ALLE
16,7 Millionen sRGB-Farben ist die naechste, die alle Regeln haelt,
#7a75c8 -- ein Blauviolett, 0,113 entfernt. Tuerkis erreicht in sRGB
schlicht keine hoehere Buntheit, und das schmale Band teilen sich
schon sieben Toene. Eine Kachel, die ihre Farbfamilie behaelt, ist die
bessere Antwort auf „richtig geil und speziell" als eine, die acht
Tausendstel bunter ist und niemand wiedererkennt. blassBis sagt jetzt
bei jeder Ausnahme, WIE WEIT sie reicht -- vorher hiess blassErlaubt
schlicht „hier wird weggesehen".

DIE NEUE FARBE IST GRUEN UND WOLLTE BERNSTEIN SEIN. Gesucht war die
Farbe von Papier. Gemessen gibt es sie nicht mehr: Der beste Bernstein
im ganzen Farbraum haelt 0,0799 Abstand -- unter der Hausgrenze. Und
Platz schaffen hilft nicht: Setzt man ihn fest, muss ein warmer Ton
das Band verlassen (Ton 45 waere 0,212 weit ins Magenta gewandert).
Die groesste wirklich freie Luecke liegt im Gruen, bei 0,0917. Ein
linierter Block in Gruen ist Papier, seit es Papier gibt.

=================================================================
TEIL 2: DER BLOCK
=================================================================

DREI ENTSCHEIDUNGEN, AUS DENEN DER REST FOLGT:

1. ES GIBT KEINEN SPEICHERN-KNOPF. Nirgends. Wer einen Block
   aufschlaegt und lostippt, drueckt hinterher nicht auf „sichern";
   er klappt ihn zu. Gesichert wird 800 ms nach dem letzten
   Tastendruck. Geht das nicht, bleibt der Text im Browser liegen und
   wird nachgereicht -- und der Fuss sagt ehrlich „noch nicht
   gesichert", statt einen Verlust zu melden, den man gerade nicht
   verhindern kann.

2. DAS BLATT IST EIN SCHREIBFELD MIT EINER DECKSCHICHT. Das Feld
   traegt Text und Cursor und ist unsichtbar; darueber zeichnet eine
   zweite Schicht denselben Text noch einmal -- mit Kaestchen,
   Ueberschriften, Strichen und Links.

   DARAUS FOLGT EINE EISERNE REGEL, und sie steht dreimal im Code:
   KEINE Auszeichnung darf die BREITE eines Zeichens aendern. Kein
   Fettdruck, keine andere Groesse, keine Sperrung. Erlaubt sind nur
   Farbe, Flaeche, Rahmen und Durchstreichen. Ein einziges
   font-weight: 700 verschoebe den Umbruch, und ab der zweiten Zeile
   stuende der sichtbare Text neben dem Cursor.

   pruef-notizen misst das am echten Umbruch: eine Probe mit allen
   Auszeichnungen und einer Zeile, die umbrechen MUSS. Sind beide
   Schichten verschieden hoch, sitzt der Umbruch woanders. Mit
   Gegenprobe -- Fettdruck auf der Deckschicht bricht die Deckung um
   genau eine Zeile (30 px), und die Zeile wird rot.

3. DIE TASTATUR FUEHRT DIE LISTE FORT, NICHT EINE LEISTE. Ein
   Spiegelstrich und Enter macht den naechsten Punkt, ein leeres
   Kaestchen und Enter das naechste Kaestchen -- und ein GESETZTER
   Haken wird dabei nicht mitgenommen, die naechste Aufgabe ist ja
   noch nicht erledigt. Zweimal Enter beendet die Liste. Ein Klick
   aufs Kaestchen hakt ab. Es gibt keine Werkzeugleiste, weil man beim
   Schreiben nie den Stift wechselt.

UND: NIEMAND SIEHT DIE NOTIZEN EINES ANDEREN. Auch DogFather nicht.
Es gibt in workspace-notizen.js keinen siehtAlles()-Zweig, keinen
Umschalter, keine fremde Liste -- jede Abfrage hat person_id = ? fest
eingebaut. Die Kachel steht deshalb in „Fuer dich" und nicht in
„Taeglich": Die Gruppe sagt die wichtigste Eigenschaft, bevor man sie
anfasst.

NUR AUF DER TEAM-ADRESSE. Auf der Agenturadresse ist die Seite ein
404 -- auch fuer DogFather. Das ist dieselbe Trennung wie bei Chat,
Kalender und Aufgaben, und sie steht an zwei Stellen: in
GEHOERT_ZU_ADRESSE (die Datei) und in der Schnittstelle (die Daten).
Die Seite ist nur HTML; die Daten sind die Sache.

Dazu: sechs Papierfarben, Anheften, Suche mit Hervorhebung im Text,
Papierkorb mit dreissig Tagen und einem Eintrag in der
Aufbewahrungsliste (ohne den waere die Frist ein Satz in einem
Kommentar -- genau das ist dem Support am 24.09. passiert).

=================================================================
EIN FUND BEIM BAUEN, DER ALLEN GEHOERT
=================================================================

DELETE /workspace/api/notizen/:id gab es schon -- in
workspace-aufgaben.js, fuer die Notizen AN einer Aufgabe. Weil jener
Router frueher eingehaengt ist, hat er jeden Loeschversuch des Blocks
abgefangen und mit 404 beantwortet.

Von aussen sah das aus wie ein Fehler im neuen Modul: Anlegen ging,
Aendern ging, Loeschen nicht. Man sucht dann im eigenen Code, und dort
ist nichts. Express meldet so etwas nicht -- es nimmt die erste Route,
die passt, und schweigt ueber die zweite.

Der Block liegt jetzt unter /workspace/api/notizblock. Und
pruef-notizen geht seitdem den Routenbaum von express durch und meldet
jedes Paar aus Methode und Pfad, das zweimal vergeben ist. Gemessen:
307 Wege, keine Dublette. Die Pruefung gilt fuers ganze Haus, auch
wenn sie in dieser Datei steht -- hier ist sie gefunden worden.

Nebenbei berichtigt: pruef-crew-adresse verlangte von jedem Eintrag
der Haustafel HTTP 200 mit Inhalt. Das stimmte, solange dort nur
oeffentliche Dateien standen. notizen.html ist die erste Seite hinter
der Anmeldung -- sie antwortet mit 302, und das ist richtig. Gefragt
wird jetzt, was die Tafel wirklich meint: GIBT es das hier.

GEMESSEN, alles nach den Aenderungen:

  pruef-notizen             76 Punkte, 0 Fehler (neu)
  pruef-kachelfarben        31 Punkte, 0 Fehler (vorher 26)
  pruef-kachel-universum    13 Punkte, 0 Fehler
  pruef-crew-adresse       157 Punkte, 0 Fehler
  pruef-buehne             230 Punkte, 0 Fehler -- notizen.html neu in
                           der Liste, schlechtester Kontrast 6,73:1,
                           also 50 % ueber der Grenze
  pruef-rechtetafel, -haus-seiten, -struktur, -css-klassen,
  -jeder-hat-eine-seite, -workspace-seiten, -kachelraster,
  -rueckmeldung            alle 0 Fehler

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-26 12:42:59 +02:00
co-authored by Claude Opus 5
parent 69ba533cee
commit 150555bc33
62 changed files with 4503 additions and 978 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/start.css
+216 -138
View File
@@ -888,10 +888,10 @@ body.start > main { position: relative; z-index: 1; }
Unterschied), und jede Farbe haelt 4,5:1 gegen den dunklen Grund --
sie traegt auch Text. Wer sie neu rechnet: Das Werkzeug bricht ab,
wenn das Ergebnis schlechter waere als der alte Stand. */
[data-ton="1"] { --ton: #aa6c90; } /* Dashboard */
[data-ton="2"] { --ton: #d050a4; } /* Zahlen */
[data-ton="1"] { --ton: #0093b1; } /* Dashboard */
[data-ton="2"] { --ton: #e76c9f; } /* Zahlen */
[data-ton="3"] { --ton: #18b803; } /* LIVE */
[data-ton="4"] { --ton: #c16302; } /* Chat */
[data-ton="4"] { --ton: #b46f1e; } /* Chat */
/* TON 5 IST VON HAND GESETZT (09.09.2026, screen4).
Filipe: "ich will dass die kategorie eine farbe bekommt die extrem
@@ -925,22 +925,22 @@ body.start > main { position: relative; z-index: 1; }
gewünscht ("alle kacheln auf der ganzen website sollen sein wie auf
der startseite"). Was sie heraushebt, ist die Farbe, nicht eine
Sonderform. */
[data-ton="5"] { --ton: #fe04d8; } /* Schutz & Regeln -- Wunsch: extrem auffällig */
[data-ton="6"] { --ton: #b699fe; } /* Community */
[data-ton="7"] { --ton: #098f71; } /* Reports */
[data-ton="8"] { --ton: #ab68ff; } /* Kalender */
[data-ton="9"] { --ton: #ceae6e; } /* Bibliothek */
[data-ton="10"] { --ton: #fe667e; } /* Steckbrief */
[data-ton="11"] { --ton: #da8a06; } /* Personen */
[data-ton="12"] { --ton: #7eca8c; } /* Content */
[data-ton="5"] { --ton: #fc33fc; } /* Schutz & Regeln -- Wunsch: extrem auffällig */
[data-ton="6"] { --ton: #c6a5ff; } /* Community */
[data-ton="7"] { --ton: #009369; } /* Reports */
[data-ton="8"] { --ton: #ab60ff; } /* Kalender */
[data-ton="9"] { --ton: #e703c6; } /* Bibliothek */
[data-ton="10"] { --ton: #ff7269; } /* Steckbrief */
[data-ton="11"] { --ton: #db8a0c; } /* Personen */
[data-ton="12"] { --ton: #0fd88a; } /* Content */
[data-ton="13"] { --ton: #12b37e; } /* Aufgaben */
[data-ton="14"] { --ton: #ffbd4a; } /* Technik */
[data-ton="15"] { --ton: #9ce6bc; } /* Calls */
[data-ton="16"] { --ton: #28aeba; } /* Start-Check */
[data-ton="14"] { --ton: #ffb742; } /* Technik */
[data-ton="15"] { --ton: #00d5fc; } /* Calls */
[data-ton="16"] { --ton: #00b1d5; } /* Start-Check */
[data-ton="17"] { --ton: #cace02; } /* Agentur */
[data-ton="18"] { --ton: #9a86ca; } /* Automationen */
[data-ton="19"] { --ton: #08eb9f; } /* Dateien */
[data-ton="20"] { --ton: #d48a92; } /* Creator-Profile */
[data-ton="18"] { --ton: #a28aff; } /* Automationen */
[data-ton="19"] { --ton: #00f9a8; } /* Dateien */
[data-ton="20"] { --ton: #ba7bc3; } /* Creator-Profile */
/* TON 21 IST VON HAND GESETZT (09.09.2026, screen6).
Filipe: "die farbe von dieser kategorie soll knall rot sein."
@@ -958,7 +958,7 @@ body.start > main { position: relative; z-index: 1; }
Kontrast auf dem dunklen Grund: 5,01:1 (noetig 4,5). Von sechs
geprueften Rottoenen hat dieser den groessten Abstand UND genug
Kontrast -- deshalb dieser und nicht der erstbeste. */
[data-ton="21"] { --ton: #d6525e; } /* Scout-Pipeline -- Wunsch: knallrot */
[data-ton="21"] { --ton: #db4b66; } /* Scout-Pipeline -- Wunsch: knallrot */
/* TON 22 -- TEAM-LAGE (09.09.2026).
@@ -975,13 +975,13 @@ body.start > main { position: relative; z-index: 1; }
Warm und hell ist kein Zufall: Diese eine Kachel gehoert der
Leitung. Zwischen den kuehlen Toenen der Arbeitsbereiche faellt ein
warmer auf, ohne lauter zu sein. */
[data-ton="22"] { --ton: #fee0b2; } /* Team-Lage */
[data-ton="22"] { --ton: #ffde7b; } /* Team-Lage */
/* Ton 23 (10.09.2026, Ideen-Board). NICHT nach Gefuehl gewaehlt: Die
22 vorhandenen Toene sind dicht besetzt, deshalb wurde der Abstand zu
allen ausgerechnet. #5f8a9f hat mit 127 den zweitgroessten -- der
groesste war ein Graubraun, und eine graue Kachel zwischen bunten
sieht abgeschaltet aus. Gedeckt statt grell, wie alles hier. */
[data-ton="23"] { --ton: #08b5fc; } /* Ideen-Board */
[data-ton="23"] { --ton: #75b7ff; } /* Ideen-Board */
/* Ton 24 (10.09.2026, Eingang). Wieder gerechnet statt gewaehlt, und bei
23 belegten Toenen wird es eng: Der Abstand im CIELAB-Raum zum
@@ -994,7 +994,7 @@ body.start > main { position: relative; z-index: 1; }
schlechtesten zu fokussieren. Kraeftiges Gruen kam auf 39,5, hat aber
L* 81 und wuerde leuchten. Dieser Ton hat eine Leuchtdichte von 0,109
-- dunkel genug, um neben den anderen ruhig zu bleiben. */
[data-ton="24"] { --ton: #d21afd; } /* Eingang */
[data-ton="24"] { --ton: #cf1bfc; } /* Eingang */
/* TON 25 -- Rueckmeldung (10.09.2026).
@@ -1032,8 +1032,8 @@ body.start > main { position: relative; z-index: 1; }
Wenn eine achtundzwanzigste Kachel kommt, ist das der Zeitpunkt, an
dem die Kacheln Gruppenfarben brauchen statt Einzelfarben -- nicht
der, an dem man den naechsten Ton dazwischenquetscht. */
[data-ton="26"] { --ton: #07fff1; } /* Eure Aufgaben (bis 19.09. "Entwicklung") */
[data-ton="27"] { --ton: #e871ff; } /* Talente */
[data-ton="26"] { --ton: #0cfff0; } /* Eure Aufgaben (bis 19.09. "Entwicklung") */
[data-ton="27"] { --ton: #e472ff; } /* Talente */
/* =====================================================================
DIE SIEBEN TOENE DES TREFFS (11.09.2026)
@@ -1059,12 +1059,12 @@ body.start > main { position: relative; z-index: 1; }
Hand gewaehlte Farbfamilie im selben Blau bei 12,6. Die Rechnung war
also nicht Genauigkeitsspielerei, sondern der Unterschied zwischen
unterscheidbar und nicht. */
[data-ton="28"] { --ton: #069511; } /* Regeln & Hilfe */
[data-ton="29"] { --ton: #f10778; } /* Highlights */
[data-ton="30"] { --ton: #a7ff98; } /* Wunschliste */
[data-ton="31"] { --ton: #0ed1d0; } /* Was ansteht */
[data-ton="32"] { --ton: #0687bc; } /* Mitmachen */
[data-ton="33"] { --ton: #f4acff; } /* Anschlagbrett */
[data-ton="28"] { --ton: #03960f; } /* Regeln & Hilfe */
[data-ton="29"] { --ton: #f60684; } /* Highlights */
[data-ton="30"] { --ton: #abff96; } /* Wunschliste */
[data-ton="31"] { --ton: #2dc9ba; } /* Was ansteht */
[data-ton="32"] { --ton: #577ecc; } /* Mitmachen */
[data-ton="33"] { --ton: #ffabff; } /* Anschlagbrett */
[data-ton="34"] { --ton: #a2af10; } /* Der Treff */
/* DER 35. TON (11.09.2026) — für „Wer sieht was".
@@ -1091,7 +1091,7 @@ body.start > main { position: relative; z-index: 1; }
mit einer anderen geteilt. Zwei Dinge in einer Farbe heißt, dass die
Farbe nichts mehr sagt — und pruef-start-ansicht zählt genau das
nach ("34 Farben auf 35 Kacheln" war ihre Meldung). */
[data-ton="35"] { --ton: #fe8ebe; } /* Wer sieht was */
[data-ton="35"] { --ton: #ff90c0; } /* Wer sieht was */
/* Der 36., nach derselben Rechnung: #7c2771, Abstand 29,7 zu den beiden
nächsten (#8e5b77 „Highlights", #2f2f7f „Wer sieht was"). Auch das
liegt über dem schwächsten Paar der vorhandenen Töne (24,9). */
@@ -1131,11 +1131,11 @@ body.start > main { position: relative; z-index: 1; }
sind. Mehr ist im lesbaren Bereich nicht zu holen; wer den naechsten
hinzufuegt, sollte das wissen und notfalls einen alten verschieben,
statt die Schwelle stillschweigend zu senken. */
[data-ton="39"] { --ton: #ff57ba; } /* Vertraulich melden */
[data-ton="40"] { --ton: #ff9d82; } /* Entwicklung (die Auswertung) */
[data-ton="41"] { --ton: #6c8efe; } /* Treff-Chat */
[data-ton="39"] { --ton: #ff51c9; } /* Vertraulich melden */
[data-ton="40"] { --ton: #ff9f7b; } /* Entwicklung (die Auswertung) */
[data-ton="41"] { --ton: #5499ff; } /* Treff-Chat */
[data-ton="42"] { --ton: #918a01; } /* Material (Platzhalter, wird gerechnet) */
[data-ton="43"] { --ton: #027afb; } /* Calls & Protokolle (gerechnet 22.09.2026) */
[data-ton="43"] { --ton: #007bff; } /* Calls & Protokolle (gerechnet 22.09.2026) */
/* GEWUENSCHT UND NACHGEMESSEN (25.09.2026)
Filipe zum Bildschirmfoto der Support-Seite: „ich will dass du bitte
@@ -1178,7 +1178,8 @@ body.start > main { position: relative; z-index: 1; }
(vorher hielt es eine zu blasse Farbe, weil ihr Abstand gut war).
Wer diesen Ton spaeter aufhellen will, muss den Abstand neu rechnen
-- nicht nach Gefuehl nachbessern. */
[data-ton="45"] { --ton: #fe660e; } /* Unterstützen (gerechnet 24.09.2026) */
[data-ton="45"] { --ton: #e76006; } /* Unterstützen (gerechnet 24.09.2026) */
[data-ton="46"] { --ton: #9cde90; } /* Notizen */
/* WARUM ES KEINEN TON 46 GIBT (25.09.2026)
Die Tuer ins andere Haus trug bis heute Ton 40 -- dieselbe Nummer
@@ -8533,8 +8534,8 @@ body.start .k-leiste .feldschild::after {
/* ---- ANFANG GERECHNET: kachel-regenbogen.mjs ---- */
/* ERZEUGT VON tools/kachel-regenbogen.mjs — NICHT VON HAND ÄNDERN.
99 Punkte in drei Größen, jede Größe einmal alle
33 benutzten Kacheltöne. Die Liste ist aus den
102 Punkte in drei Größen, jede Größe einmal alle
34 benutzten Kacheltöne. Die Liste ist aus den
Kachellisten abgeleitet; wer eine Kachel hinzufügt, lässt das
Werkzeug erneut laufen. pruef-kachelfarben zählt nach, ob beides
noch zusammenpasst. */
@@ -8562,113 +8563,116 @@ body.start .k-leiste .feldschild::after {
/* 3. DIE GROSSEN PUNKTE, jeder mit Hof — das ist der Unterschied
zwischen einem Licht und einem gestanzten Kreis. Dieselbe
Bauart wie die „nahen Sterne" auf jeder anderen Kachel. */
radial-gradient(4.82px 4.82px at 21.3px 22.8px, color-mix(in srgb, #07fff1 88%, #ffffff), color-mix(in srgb, #07fff1 88%, #ffffff) 34%, color-mix(in srgb, #07fff1 55%, transparent) 52%, transparent 100%),
radial-gradient(5.48px 5.48px at 50.6px 7.0px, color-mix(in srgb, #fe8ebe 88%, #ffffff), color-mix(in srgb, #fe8ebe 88%, #ffffff) 34%, color-mix(in srgb, #fe8ebe 55%, transparent) 52%, transparent 100%),
radial-gradient(6.57px 6.57px at 81.2px 6.7px, color-mix(in srgb, #72d512 88%, #ffffff), color-mix(in srgb, #72d512 88%, #ffffff) 34%, color-mix(in srgb, #72d512 55%, transparent) 52%, transparent 100%),
radial-gradient(4.71px 4.71px at 110.3px 23.0px, color-mix(in srgb, #6c8efe 88%, #ffffff), color-mix(in srgb, #6c8efe 88%, #ffffff) 34%, color-mix(in srgb, #6c8efe 55%, transparent) 52%, transparent 100%),
radial-gradient(4.88px 4.88px at 154.3px 8.0px, color-mix(in srgb, #c16302 88%, #ffffff), color-mix(in srgb, #c16302 88%, #ffffff) 34%, color-mix(in srgb, #c16302 55%, transparent) 52%, transparent 100%),
radial-gradient(4.83px 4.83px at 185.7px 11.5px, color-mix(in srgb, #12b37e 88%, #ffffff), color-mix(in srgb, #12b37e 88%, #ffffff) 34%, color-mix(in srgb, #12b37e 55%, transparent) 52%, transparent 100%),
radial-gradient(4.33px 4.33px at 16.5px 42.0px, color-mix(in srgb, #ff57ba 88%, #ffffff), color-mix(in srgb, #ff57ba 88%, #ffffff) 34%, color-mix(in srgb, #ff57ba 55%, transparent) 52%, transparent 100%),
radial-gradient(5.17px 5.17px at 49.7px 52.7px, color-mix(in srgb, #a2af10 88%, #ffffff), color-mix(in srgb, #a2af10 88%, #ffffff) 34%, color-mix(in srgb, #a2af10 55%, transparent) 52%, transparent 100%),
radial-gradient(4.63px 4.63px at 82.5px 47.6px, color-mix(in srgb, #027afb 88%, #ffffff), color-mix(in srgb, #027afb 88%, #ffffff) 34%, color-mix(in srgb, #027afb 55%, transparent) 52%, transparent 100%),
radial-gradient(4.55px 4.55px at 105.1px 54.1px, color-mix(in srgb, #fe660e 88%, #ffffff), color-mix(in srgb, #fe660e 88%, #ffffff) 34%, color-mix(in srgb, #fe660e 55%, transparent) 52%, transparent 100%),
radial-gradient(6.07px 6.07px at 149.6px 56.3px, color-mix(in srgb, #08eb9f 88%, #ffffff), color-mix(in srgb, #08eb9f 88%, #ffffff) 34%, color-mix(in srgb, #08eb9f 55%, transparent) 52%, transparent 100%),
radial-gradient(4.34px 4.34px at 182.8px 53.3px, color-mix(in srgb, #f4acff 88%, #ffffff), color-mix(in srgb, #f4acff 88%, #ffffff) 34%, color-mix(in srgb, #f4acff 55%, transparent) 52%, transparent 100%),
radial-gradient(5.58px 5.58px at 14.4px 89.8px, color-mix(in srgb, #cace02 88%, #ffffff), color-mix(in srgb, #cace02 88%, #ffffff) 34%, color-mix(in srgb, #cace02 55%, transparent) 52%, transparent 100%),
radial-gradient(4.55px 4.55px at 56.4px 81.9px, color-mix(in srgb, #a8d8ff 88%, #ffffff), color-mix(in srgb, #a8d8ff 88%, #ffffff) 34%, color-mix(in srgb, #a8d8ff 55%, transparent) 52%, transparent 100%),
radial-gradient(5.65px 5.65px at 78.8px 88.9px, color-mix(in srgb, #ff9d82 88%, #ffffff), color-mix(in srgb, #ff9d82 88%, #ffffff) 34%, color-mix(in srgb, #ff9d82 55%, transparent) 52%, transparent 100%),
radial-gradient(4.85px 4.85px at 113.3px 78.4px, color-mix(in srgb, #069511 88%, #ffffff), color-mix(in srgb, #069511 88%, #ffffff) 34%, color-mix(in srgb, #069511 55%, transparent) 52%, transparent 100%),
radial-gradient(4.40px 4.40px at 142.4px 90.0px, color-mix(in srgb, #e871ff 88%, #ffffff), color-mix(in srgb, #e871ff 88%, #ffffff) 34%, color-mix(in srgb, #e871ff 55%, transparent) 52%, transparent 100%),
radial-gradient(4.65px 4.65px at 190.5px 85.8px, color-mix(in srgb, #eeef08 88%, #ffffff), color-mix(in srgb, #eeef08 88%, #ffffff) 34%, color-mix(in srgb, #eeef08 55%, transparent) 52%, transparent 100%),
radial-gradient(6.19px 6.19px at 20.7px 123.9px, color-mix(in srgb, #08b5fc 88%, #ffffff), color-mix(in srgb, #08b5fc 88%, #ffffff) 34%, color-mix(in srgb, #08b5fc 55%, transparent) 52%, transparent 100%),
radial-gradient(5.44px 5.44px at 56.7px 116.6px, color-mix(in srgb, #ff1a1a 88%, #ffffff), color-mix(in srgb, #ff1a1a 88%, #ffffff) 34%, color-mix(in srgb, #ff1a1a 55%, transparent) 52%, transparent 100%),
radial-gradient(6.28px 6.28px at 89.2px 122.9px, color-mix(in srgb, #18b803 88%, #ffffff), color-mix(in srgb, #18b803 88%, #ffffff) 34%, color-mix(in srgb, #18b803 55%, transparent) 52%, transparent 100%),
radial-gradient(4.52px 4.52px at 105.6px 108.9px, color-mix(in srgb, #d21afd 88%, #ffffff), color-mix(in srgb, #d21afd 88%, #ffffff) 34%, color-mix(in srgb, #d21afd 55%, transparent) 52%, transparent 100%),
radial-gradient(4.31px 4.31px at 150.4px 108.8px, color-mix(in srgb, #918a01 88%, #ffffff), color-mix(in srgb, #918a01 88%, #ffffff) 34%, color-mix(in srgb, #918a01 55%, transparent) 52%, transparent 100%),
radial-gradient(5.83px 5.83px at 189.4px 117.4px, color-mix(in srgb, #0687bc 88%, #ffffff), color-mix(in srgb, #0687bc 88%, #ffffff) 34%, color-mix(in srgb, #0687bc 55%, transparent) 52%, transparent 100%),
radial-gradient(4.38px 4.38px at 10.9px 139.1px, color-mix(in srgb, #fe667e 88%, #ffffff), color-mix(in srgb, #fe667e 88%, #ffffff) 34%, color-mix(in srgb, #fe667e 55%, transparent) 52%, transparent 100%),
radial-gradient(6.29px 6.29px at 54.7px 155.9px, color-mix(in srgb, #a7ff98 88%, #ffffff), color-mix(in srgb, #a7ff98 88%, #ffffff) 34%, color-mix(in srgb, #a7ff98 55%, transparent) 52%, transparent 100%),
radial-gradient(6.12px 6.12px at 75.1px 154.0px, color-mix(in srgb, #ab68ff 88%, #ffffff), color-mix(in srgb, #ab68ff 88%, #ffffff) 34%, color-mix(in srgb, #ab68ff 55%, transparent) 52%, transparent 100%),
radial-gradient(6.08px 6.08px at 123.3px 154.7px, color-mix(in srgb, #ffbd4a 88%, #ffffff), color-mix(in srgb, #ffbd4a 88%, #ffffff) 34%, color-mix(in srgb, #ffbd4a 55%, transparent) 52%, transparent 100%),
radial-gradient(5.81px 5.81px at 141.2px 142.7px, color-mix(in srgb, #0ed1d0 88%, #ffffff), color-mix(in srgb, #0ed1d0 88%, #ffffff) 34%, color-mix(in srgb, #0ed1d0 55%, transparent) 52%, transparent 100%),
radial-gradient(4.42px 4.42px at 177.4px 144.5px, color-mix(in srgb, #f10778 88%, #ffffff), color-mix(in srgb, #f10778 88%, #ffffff) 34%, color-mix(in srgb, #f10778 55%, transparent) 52%, transparent 100%),
radial-gradient(5.16px 5.16px at 17.7px 183.1px, color-mix(in srgb, #61ff09 88%, #ffffff), color-mix(in srgb, #61ff09 88%, #ffffff) 34%, color-mix(in srgb, #61ff09 55%, transparent) 52%, transparent 100%),
radial-gradient(4.80px 4.80px at 46.6px 182.2px, color-mix(in srgb, #b699fe 88%, #ffffff), color-mix(in srgb, #b699fe 88%, #ffffff) 34%, color-mix(in srgb, #b699fe 55%, transparent) 52%, transparent 100%),
radial-gradient(5.00px 5.00px at 80.1px 179.7px, color-mix(in srgb, #da8a06 88%, #ffffff), color-mix(in srgb, #da8a06 88%, #ffffff) 34%, color-mix(in srgb, #da8a06 55%, transparent) 52%, transparent 100%),
radial-gradient(4.82px 4.82px at 21.3px 22.8px, color-mix(in srgb, #2dc9ba 88%, #ffffff), color-mix(in srgb, #2dc9ba 88%, #ffffff) 34%, color-mix(in srgb, #2dc9ba 55%, transparent) 52%, transparent 100%),
radial-gradient(5.48px 5.48px at 50.6px 7.0px, color-mix(in srgb, #ffabff 88%, #ffffff), color-mix(in srgb, #ffabff 88%, #ffffff) 34%, color-mix(in srgb, #ffabff 55%, transparent) 52%, transparent 100%),
radial-gradient(6.57px 6.57px at 81.2px 6.7px, color-mix(in srgb, #918a01 88%, #ffffff), color-mix(in srgb, #918a01 88%, #ffffff) 34%, color-mix(in srgb, #918a01 55%, transparent) 52%, transparent 100%),
radial-gradient(4.71px 4.71px at 110.3px 23.0px, color-mix(in srgb, #12b37e 88%, #ffffff), color-mix(in srgb, #12b37e 88%, #ffffff) 34%, color-mix(in srgb, #12b37e 55%, transparent) 52%, transparent 100%),
radial-gradient(4.88px 4.88px at 154.3px 8.0px, color-mix(in srgb, #e472ff 88%, #ffffff), color-mix(in srgb, #e472ff 88%, #ffffff) 34%, color-mix(in srgb, #e472ff 55%, transparent) 52%, transparent 100%),
radial-gradient(4.83px 4.83px at 185.7px 11.5px, color-mix(in srgb, #ffb742 88%, #ffffff), color-mix(in srgb, #ffb742 88%, #ffffff) 34%, color-mix(in srgb, #ffb742 55%, transparent) 52%, transparent 100%),
radial-gradient(4.33px 4.33px at 16.5px 42.0px, color-mix(in srgb, #00f9a8 88%, #ffffff), color-mix(in srgb, #00f9a8 88%, #ffffff) 34%, color-mix(in srgb, #00f9a8 55%, transparent) 52%, transparent 100%),
radial-gradient(5.17px 5.17px at 49.7px 52.7px, color-mix(in srgb, #cf1bfc 88%, #ffffff), color-mix(in srgb, #cf1bfc 88%, #ffffff) 34%, color-mix(in srgb, #cf1bfc 55%, transparent) 52%, transparent 100%),
radial-gradient(4.63px 4.63px at 82.5px 47.6px, color-mix(in srgb, #db8a0c 88%, #ffffff), color-mix(in srgb, #db8a0c 88%, #ffffff) 34%, color-mix(in srgb, #db8a0c 55%, transparent) 52%, transparent 100%),
radial-gradient(4.55px 4.55px at 105.1px 54.1px, color-mix(in srgb, #03960f 88%, #ffffff), color-mix(in srgb, #03960f 88%, #ffffff) 34%, color-mix(in srgb, #03960f 55%, transparent) 52%, transparent 100%),
radial-gradient(6.07px 6.07px at 149.6px 56.3px, color-mix(in srgb, #ab60ff 88%, #ffffff), color-mix(in srgb, #ab60ff 88%, #ffffff) 34%, color-mix(in srgb, #ab60ff 55%, transparent) 52%, transparent 100%),
radial-gradient(4.34px 4.34px at 182.8px 53.3px, color-mix(in srgb, #b46f1e 88%, #ffffff), color-mix(in srgb, #b46f1e 88%, #ffffff) 34%, color-mix(in srgb, #b46f1e 55%, transparent) 52%, transparent 100%),
radial-gradient(5.58px 5.58px at 14.4px 89.8px, color-mix(in srgb, #18b803 88%, #ffffff), color-mix(in srgb, #18b803 88%, #ffffff) 34%, color-mix(in srgb, #18b803 55%, transparent) 52%, transparent 100%),
radial-gradient(4.55px 4.55px at 56.4px 81.9px, color-mix(in srgb, #c6a5ff 88%, #ffffff), color-mix(in srgb, #c6a5ff 88%, #ffffff) 34%, color-mix(in srgb, #c6a5ff 55%, transparent) 52%, transparent 100%),
radial-gradient(5.65px 5.65px at 78.8px 88.9px, color-mix(in srgb, #e76006 88%, #ffffff), color-mix(in srgb, #e76006 88%, #ffffff) 34%, color-mix(in srgb, #e76006 55%, transparent) 52%, transparent 100%),
radial-gradient(4.85px 4.85px at 113.3px 78.4px, color-mix(in srgb, #9cde90 88%, #ffffff), color-mix(in srgb, #9cde90 88%, #ffffff) 34%, color-mix(in srgb, #9cde90 55%, transparent) 52%, transparent 100%),
radial-gradient(4.40px 4.40px at 142.4px 90.0px, color-mix(in srgb, #577ecc 88%, #ffffff), color-mix(in srgb, #577ecc 88%, #ffffff) 34%, color-mix(in srgb, #577ecc 55%, transparent) 52%, transparent 100%),
radial-gradient(4.65px 4.65px at 190.5px 85.8px, color-mix(in srgb, #ff9f7b 88%, #ffffff), color-mix(in srgb, #ff9f7b 88%, #ffffff) 34%, color-mix(in srgb, #ff9f7b 55%, transparent) 52%, transparent 100%),
radial-gradient(6.19px 6.19px at 20.7px 123.9px, color-mix(in srgb, #abff96 88%, #ffffff), color-mix(in srgb, #abff96 88%, #ffffff) 34%, color-mix(in srgb, #abff96 55%, transparent) 52%, transparent 100%),
radial-gradient(5.44px 5.44px at 56.7px 116.6px, color-mix(in srgb, #5499ff 88%, #ffffff), color-mix(in srgb, #5499ff 88%, #ffffff) 34%, color-mix(in srgb, #5499ff 55%, transparent) 52%, transparent 100%),
radial-gradient(6.28px 6.28px at 89.2px 122.9px, color-mix(in srgb, #ff1a1a 88%, #ffffff), color-mix(in srgb, #ff1a1a 88%, #ffffff) 34%, color-mix(in srgb, #ff1a1a 55%, transparent) 52%, transparent 100%),
radial-gradient(4.52px 4.52px at 105.6px 108.9px, color-mix(in srgb, #61ff09 88%, #ffffff), color-mix(in srgb, #61ff09 88%, #ffffff) 34%, color-mix(in srgb, #61ff09 55%, transparent) 52%, transparent 100%),
radial-gradient(4.31px 4.31px at 150.4px 108.8px, color-mix(in srgb, #007bff 88%, #ffffff), color-mix(in srgb, #007bff 88%, #ffffff) 34%, color-mix(in srgb, #007bff 55%, transparent) 52%, transparent 100%),
radial-gradient(5.83px 5.83px at 189.4px 117.4px, color-mix(in srgb, #ff7269 88%, #ffffff), color-mix(in srgb, #ff7269 88%, #ffffff) 34%, color-mix(in srgb, #ff7269 55%, transparent) 52%, transparent 100%),
radial-gradient(4.38px 4.38px at 10.9px 139.1px, color-mix(in srgb, #72d512 88%, #ffffff), color-mix(in srgb, #72d512 88%, #ffffff) 34%, color-mix(in srgb, #72d512 55%, transparent) 52%, transparent 100%),
radial-gradient(6.29px 6.29px at 54.7px 155.9px, color-mix(in srgb, #75b7ff 88%, #ffffff), color-mix(in srgb, #75b7ff 88%, #ffffff) 34%, color-mix(in srgb, #75b7ff 55%, transparent) 52%, transparent 100%),
radial-gradient(6.12px 6.12px at 75.1px 154.0px, color-mix(in srgb, #f60684 88%, #ffffff), color-mix(in srgb, #f60684 88%, #ffffff) 34%, color-mix(in srgb, #f60684 55%, transparent) 52%, transparent 100%),
radial-gradient(6.08px 6.08px at 123.3px 154.7px, color-mix(in srgb, #a2af10 88%, #ffffff), color-mix(in srgb, #a2af10 88%, #ffffff) 34%, color-mix(in srgb, #a2af10 55%, transparent) 52%, transparent 100%),
radial-gradient(5.81px 5.81px at 141.2px 142.7px, color-mix(in srgb, #a8d8ff 88%, #ffffff), color-mix(in srgb, #a8d8ff 88%, #ffffff) 34%, color-mix(in srgb, #a8d8ff 55%, transparent) 52%, transparent 100%),
radial-gradient(4.42px 4.42px at 177.4px 144.5px, color-mix(in srgb, #ff90c0 88%, #ffffff), color-mix(in srgb, #ff90c0 88%, #ffffff) 34%, color-mix(in srgb, #ff90c0 55%, transparent) 52%, transparent 100%),
radial-gradient(5.16px 5.16px at 17.7px 183.1px, color-mix(in srgb, #cace02 88%, #ffffff), color-mix(in srgb, #cace02 88%, #ffffff) 34%, color-mix(in srgb, #cace02 55%, transparent) 52%, transparent 100%),
radial-gradient(4.80px 4.80px at 46.6px 182.2px, color-mix(in srgb, #0cfff0 88%, #ffffff), color-mix(in srgb, #0cfff0 88%, #ffffff) 34%, color-mix(in srgb, #0cfff0 55%, transparent) 52%, transparent 100%),
radial-gradient(5.00px 5.00px at 80.1px 179.7px, color-mix(in srgb, #ff51c9 88%, #ffffff), color-mix(in srgb, #ff51c9 88%, #ffffff) 34%, color-mix(in srgb, #ff51c9 55%, transparent) 52%, transparent 100%),
radial-gradient(6.47px 6.47px at 116.3px 173.0px, color-mix(in srgb, #eeef08 88%, #ffffff), color-mix(in srgb, #eeef08 88%, #ffffff) 34%, color-mix(in srgb, #eeef08 55%, transparent) 52%, transparent 100%),
/* 4. DIE MITTLEREN — die Masse des Feldes. */
radial-gradient(3.21px 3.21px at 5.1px 5.6px, color-mix(in srgb, #07fff1 82%, #ffffff), color-mix(in srgb, #07fff1 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.60px 3.60px at 30.9px 16.4px, color-mix(in srgb, #ab68ff 82%, #ffffff), color-mix(in srgb, #ab68ff 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.00px 3.00px at 52.4px 11.5px, color-mix(in srgb, #ff1a1a 82%, #ffffff), color-mix(in srgb, #ff1a1a 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.86px 2.86px at 82.4px 14.9px, color-mix(in srgb, #cace02 82%, #ffffff), color-mix(in srgb, #cace02 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.96px 2.96px at 98.8px 9.3px, color-mix(in srgb, #12b37e 82%, #ffffff), color-mix(in srgb, #12b37e 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.65px 2.65px at 121.0px 14.2px, color-mix(in srgb, #b699fe 82%, #ffffff), color-mix(in srgb, #b699fe 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.49px 2.49px at 11.8px 26.8px, color-mix(in srgb, #fe667e 82%, #ffffff), color-mix(in srgb, #fe667e 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.92px 2.92px at 33.8px 37.3px, color-mix(in srgb, #eeef08 82%, #ffffff), color-mix(in srgb, #eeef08 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.47px 2.47px at 55.5px 38.6px, color-mix(in srgb, #08eb9f 82%, #ffffff), color-mix(in srgb, #08eb9f 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.55px 2.55px at 74.8px 28.0px, color-mix(in srgb, #6c8efe 82%, #ffffff), color-mix(in srgb, #6c8efe 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.43px 2.43px at 103.9px 38.4px, color-mix(in srgb, #f10778 82%, #ffffff), color-mix(in srgb, #f10778 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.62px 2.62px at 124.3px 27.3px, color-mix(in srgb, #918a01 82%, #ffffff), color-mix(in srgb, #918a01 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.61px 2.61px at 6.8px 55.0px, color-mix(in srgb, #069511 82%, #ffffff), color-mix(in srgb, #069511 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.19px 3.19px at 36.1px 60.1px, color-mix(in srgb, #027afb 82%, #ffffff), color-mix(in srgb, #027afb 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.63px 3.63px at 56.8px 55.5px, color-mix(in srgb, #fe8ebe 82%, #ffffff), color-mix(in srgb, #fe8ebe 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.62px 2.62px at 82.6px 57.2px, color-mix(in srgb, #ffbd4a 82%, #ffffff), color-mix(in srgb, #ffbd4a 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.89px 2.89px at 97.7px 59.0px, color-mix(in srgb, #18b803 82%, #ffffff), color-mix(in srgb, #18b803 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.29px 3.29px at 125.8px 57.6px, color-mix(in srgb, #a8d8ff 82%, #ffffff), color-mix(in srgb, #a8d8ff 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.52px 2.52px at 10.9px 83.0px, color-mix(in srgb, #ff57ba 82%, #ffffff), color-mix(in srgb, #ff57ba 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.37px 2.37px at 33.1px 72.6px, color-mix(in srgb, #da8a06 82%, #ffffff), color-mix(in srgb, #da8a06 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.21px 3.21px at 54.6px 78.8px, color-mix(in srgb, #a7ff98 82%, #ffffff), color-mix(in srgb, #a7ff98 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.43px 3.43px at 71.0px 71.9px, color-mix(in srgb, #08b5fc 82%, #ffffff), color-mix(in srgb, #08b5fc 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.16px 3.16px at 92.6px 70.6px, color-mix(in srgb, #f4acff 82%, #ffffff), color-mix(in srgb, #f4acff 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.22px 3.22px at 118.9px 78.1px, color-mix(in srgb, #c16302 82%, #ffffff), color-mix(in srgb, #c16302 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.50px 2.50px at 16.0px 101.8px, color-mix(in srgb, #61ff09 82%, #ffffff), color-mix(in srgb, #61ff09 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.80px 2.80px at 33.8px 102.3px, color-mix(in srgb, #0687bc 82%, #ffffff), color-mix(in srgb, #0687bc 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.52px 2.52px at 49.8px 93.9px, color-mix(in srgb, #e871ff 82%, #ffffff), color-mix(in srgb, #e871ff 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.87px 2.87px at 77.0px 95.8px, color-mix(in srgb, #fe660e 82%, #ffffff), color-mix(in srgb, #fe660e 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.37px 2.37px at 101.9px 95.3px, color-mix(in srgb, #72d512 82%, #ffffff), color-mix(in srgb, #72d512 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.42px 3.42px at 113.5px 91.8px, color-mix(in srgb, #0ed1d0 82%, #ffffff), color-mix(in srgb, #0ed1d0 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.22px 3.22px at 12.7px 116.5px, color-mix(in srgb, #d21afd 82%, #ffffff), color-mix(in srgb, #d21afd 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.35px 2.35px at 26.5px 120.2px, color-mix(in srgb, #ff9d82 82%, #ffffff), color-mix(in srgb, #ff9d82 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.34px 3.34px at 53.1px 119.0px, color-mix(in srgb, #a2af10 82%, #ffffff), color-mix(in srgb, #a2af10 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.21px 3.21px at 5.1px 5.6px, color-mix(in srgb, #2dc9ba 82%, #ffffff), color-mix(in srgb, #2dc9ba 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.60px 3.60px at 30.9px 16.4px, color-mix(in srgb, #cf1bfc 82%, #ffffff), color-mix(in srgb, #cf1bfc 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.00px 3.00px at 52.4px 11.5px, color-mix(in srgb, #e76006 82%, #ffffff), color-mix(in srgb, #e76006 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.86px 2.86px at 82.4px 14.9px, color-mix(in srgb, #61ff09 82%, #ffffff), color-mix(in srgb, #61ff09 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.96px 2.96px at 98.8px 9.3px, color-mix(in srgb, #a8d8ff 82%, #ffffff), color-mix(in srgb, #a8d8ff 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.65px 2.65px at 121.0px 14.2px, color-mix(in srgb, #ffabff 82%, #ffffff), color-mix(in srgb, #ffabff 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.49px 2.49px at 11.8px 26.8px, color-mix(in srgb, #db8a0c 82%, #ffffff), color-mix(in srgb, #db8a0c 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.92px 2.92px at 33.8px 37.3px, color-mix(in srgb, #9cde90 82%, #ffffff), color-mix(in srgb, #9cde90 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.47px 2.47px at 55.5px 38.6px, color-mix(in srgb, #007bff 82%, #ffffff), color-mix(in srgb, #007bff 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.55px 2.55px at 74.8px 28.0px, color-mix(in srgb, #ff90c0 82%, #ffffff), color-mix(in srgb, #ff90c0 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.43px 2.43px at 103.9px 38.4px, color-mix(in srgb, #918a01 82%, #ffffff), color-mix(in srgb, #918a01 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.62px 2.62px at 124.3px 27.3px, color-mix(in srgb, #03960f 82%, #ffffff), color-mix(in srgb, #03960f 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.61px 2.61px at 6.8px 55.0px, color-mix(in srgb, #577ecc 82%, #ffffff), color-mix(in srgb, #577ecc 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.19px 3.19px at 36.1px 60.1px, color-mix(in srgb, #ff7269 82%, #ffffff), color-mix(in srgb, #ff7269 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.63px 3.63px at 56.8px 55.5px, color-mix(in srgb, #cace02 82%, #ffffff), color-mix(in srgb, #cace02 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.62px 2.62px at 82.6px 57.2px, color-mix(in srgb, #12b37e 82%, #ffffff), color-mix(in srgb, #12b37e 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.89px 2.89px at 97.7px 59.0px, color-mix(in srgb, #ab60ff 82%, #ffffff), color-mix(in srgb, #ab60ff 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.29px 3.29px at 125.8px 57.6px, color-mix(in srgb, #ff9f7b 82%, #ffffff), color-mix(in srgb, #ff9f7b 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.52px 2.52px at 10.9px 83.0px, color-mix(in srgb, #72d512 82%, #ffffff), color-mix(in srgb, #72d512 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.37px 2.37px at 33.1px 72.6px, color-mix(in srgb, #0cfff0 82%, #ffffff), color-mix(in srgb, #0cfff0 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.21px 3.21px at 54.6px 78.8px, color-mix(in srgb, #e472ff 82%, #ffffff), color-mix(in srgb, #e472ff 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.43px 3.43px at 71.0px 71.9px, color-mix(in srgb, #b46f1e 82%, #ffffff), color-mix(in srgb, #b46f1e 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.16px 3.16px at 92.6px 70.6px, color-mix(in srgb, #abff96 82%, #ffffff), color-mix(in srgb, #abff96 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.22px 3.22px at 118.9px 78.1px, color-mix(in srgb, #75b7ff 82%, #ffffff), color-mix(in srgb, #75b7ff 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.50px 2.50px at 16.0px 101.8px, color-mix(in srgb, #ff51c9 82%, #ffffff), color-mix(in srgb, #ff51c9 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.80px 2.80px at 33.8px 102.3px, color-mix(in srgb, #ffb742 82%, #ffffff), color-mix(in srgb, #ffb742 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.52px 2.52px at 49.8px 93.9px, color-mix(in srgb, #18b803 82%, #ffffff), color-mix(in srgb, #18b803 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.87px 2.87px at 77.0px 95.8px, color-mix(in srgb, #5499ff 82%, #ffffff), color-mix(in srgb, #5499ff 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.37px 2.37px at 101.9px 95.3px, color-mix(in srgb, #f60684 82%, #ffffff), color-mix(in srgb, #f60684 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.42px 3.42px at 113.5px 91.8px, color-mix(in srgb, #eeef08 82%, #ffffff), color-mix(in srgb, #eeef08 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.22px 3.22px at 12.7px 116.5px, color-mix(in srgb, #00f9a8 82%, #ffffff), color-mix(in srgb, #00f9a8 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.35px 2.35px at 26.5px 120.2px, color-mix(in srgb, #c6a5ff 82%, #ffffff), color-mix(in srgb, #c6a5ff 82%, #ffffff) 34%, transparent 100%),
radial-gradient(3.34px 3.34px at 53.1px 119.0px, color-mix(in srgb, #ff1a1a 82%, #ffffff), color-mix(in srgb, #ff1a1a 82%, #ffffff) 34%, transparent 100%),
radial-gradient(2.84px 2.84px at 72.3px 120.1px, color-mix(in srgb, #a2af10 82%, #ffffff), color-mix(in srgb, #a2af10 82%, #ffffff) 34%, transparent 100%),
/* 5. DER FEINE STAUB. Er füllt die Lücken: Ein Feld aus nur
großen Punkten sieht aus wie aufgeklebt. */
radial-gradient(1.70px 1.70px at 6.2px 11.0px, color-mix(in srgb, #07fff1 74%, #ffffff), color-mix(in srgb, #07fff1 74%, #ffffff) 34%, transparent 100%),
radial-gradient(2.00px 2.00px at 19.0px 4.4px, color-mix(in srgb, #b699fe 74%, #ffffff), color-mix(in srgb, #b699fe 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.88px 1.88px at 38.0px 4.6px, color-mix(in srgb, #f10778 74%, #ffffff), color-mix(in srgb, #f10778 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.78px 1.78px at 49.4px 2.8px, color-mix(in srgb, #ffbd4a 74%, #ffffff), color-mix(in srgb, #ffbd4a 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.68px 1.68px at 65.7px 3.2px, color-mix(in srgb, #a7ff98 74%, #ffffff), color-mix(in srgb, #a7ff98 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.75px 1.75px at 77.7px 7.7px, color-mix(in srgb, #0687bc 74%, #ffffff), color-mix(in srgb, #0687bc 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.44px 1.44px at 3.7px 23.9px, color-mix(in srgb, #d21afd 74%, #ffffff), color-mix(in srgb, #d21afd 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.64px 1.64px at 23.7px 21.2px, color-mix(in srgb, #ff1a1a 74%, #ffffff), color-mix(in srgb, #ff1a1a 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.53px 1.53px at 30.8px 17.1px, color-mix(in srgb, #eeef08 74%, #ffffff), color-mix(in srgb, #eeef08 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.69px 1.69px at 46.6px 21.7px, color-mix(in srgb, #069511 74%, #ffffff), color-mix(in srgb, #069511 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.70px 1.70px at 6.2px 11.0px, color-mix(in srgb, #2dc9ba 74%, #ffffff), color-mix(in srgb, #2dc9ba 74%, #ffffff) 34%, transparent 100%),
radial-gradient(2.00px 2.00px at 19.0px 4.4px, color-mix(in srgb, #c6a5ff 74%, #ffffff), color-mix(in srgb, #c6a5ff 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.88px 1.88px at 38.0px 4.6px, color-mix(in srgb, #f60684 74%, #ffffff), color-mix(in srgb, #f60684 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.78px 1.78px at 49.4px 2.8px, color-mix(in srgb, #ffb742 74%, #ffffff), color-mix(in srgb, #ffb742 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.68px 1.68px at 65.7px 3.2px, color-mix(in srgb, #abff96 74%, #ffffff), color-mix(in srgb, #abff96 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.75px 1.75px at 77.7px 7.7px, color-mix(in srgb, #0cfff0 74%, #ffffff), color-mix(in srgb, #0cfff0 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.44px 1.44px at 3.7px 23.9px, color-mix(in srgb, #ab60ff 74%, #ffffff), color-mix(in srgb, #ab60ff 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.64px 1.64px at 23.7px 21.2px, color-mix(in srgb, #ff7269 74%, #ffffff), color-mix(in srgb, #ff7269 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.53px 1.53px at 30.8px 17.1px, color-mix(in srgb, #918a01 74%, #ffffff), color-mix(in srgb, #918a01 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.69px 1.69px at 46.6px 21.7px, color-mix(in srgb, #9cde90 74%, #ffffff), color-mix(in srgb, #9cde90 74%, #ffffff) 34%, transparent 100%),
radial-gradient(2.03px 2.03px at 64.3px 18.5px, color-mix(in srgb, #a8d8ff 74%, #ffffff), color-mix(in srgb, #a8d8ff 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.36px 1.36px at 77.2px 20.7px, color-mix(in srgb, #f4acff 74%, #ffffff), color-mix(in srgb, #f4acff 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.40px 1.40px at 3.8px 31.4px, color-mix(in srgb, #fe660e 74%, #ffffff), color-mix(in srgb, #fe660e 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.36px 1.36px at 17.0px 32.1px, color-mix(in srgb, #a2af10 74%, #ffffff), color-mix(in srgb, #a2af10 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.84px 1.84px at 32.1px 35.9px, color-mix(in srgb, #12b37e 74%, #ffffff), color-mix(in srgb, #12b37e 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.63px 1.63px at 48.3px 34.6px, color-mix(in srgb, #6c8efe 74%, #ffffff), color-mix(in srgb, #6c8efe 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.47px 1.47px at 61.7px 38.8px, color-mix(in srgb, #fe8ebe 74%, #ffffff), color-mix(in srgb, #fe8ebe 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.59px 1.59px at 73.2px 36.6px, color-mix(in srgb, #da8a06 74%, #ffffff), color-mix(in srgb, #da8a06 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.34px 1.34px at 2.9px 51.3px, color-mix(in srgb, #61ff09 74%, #ffffff), color-mix(in srgb, #61ff09 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.78px 1.78px at 17.6px 52.6px, color-mix(in srgb, #0ed1d0 74%, #ffffff), color-mix(in srgb, #0ed1d0 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.72px 1.72px at 35.6px 46.1px, color-mix(in srgb, #ab68ff 74%, #ffffff), color-mix(in srgb, #ab68ff 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.87px 1.87px at 50.9px 49.3px, color-mix(in srgb, #fe667e 74%, #ffffff), color-mix(in srgb, #fe667e 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.44px 1.44px at 59.6px 52.2px, color-mix(in srgb, #918a01 74%, #ffffff), color-mix(in srgb, #918a01 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.77px 1.77px at 73.3px 49.9px, color-mix(in srgb, #18b803 74%, #ffffff), color-mix(in srgb, #18b803 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.76px 1.76px at 3.5px 65.0px, color-mix(in srgb, #08b5fc 74%, #ffffff), color-mix(in srgb, #08b5fc 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.72px 1.72px at 25.0px 58.0px, color-mix(in srgb, #e871ff 74%, #ffffff), color-mix(in srgb, #e871ff 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.77px 1.77px at 30.9px 65.9px, color-mix(in srgb, #ff9d82 74%, #ffffff), color-mix(in srgb, #ff9d82 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.87px 1.87px at 51.0px 65.4px, color-mix(in srgb, #cace02 74%, #ffffff), color-mix(in srgb, #cace02 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.38px 1.38px at 61.3px 65.1px, color-mix(in srgb, #08eb9f 74%, #ffffff), color-mix(in srgb, #08eb9f 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.79px 1.79px at 78.3px 63.7px, color-mix(in srgb, #027afb 74%, #ffffff), color-mix(in srgb, #027afb 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.34px 1.34px at 9.8px 74.9px, color-mix(in srgb, #ff57ba 74%, #ffffff), color-mix(in srgb, #ff57ba 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.54px 1.54px at 20.7px 75.9px, color-mix(in srgb, #c16302 74%, #ffffff), color-mix(in srgb, #c16302 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.61px 1.61px at 31.6px 74.4px, color-mix(in srgb, #72d512 74%, #ffffff), color-mix(in srgb, #72d512 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.36px 1.36px at 77.2px 20.7px, color-mix(in srgb, #cf1bfc 74%, #ffffff), color-mix(in srgb, #cf1bfc 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.40px 1.40px at 3.8px 31.4px, color-mix(in srgb, #ff1a1a 74%, #ffffff), color-mix(in srgb, #ff1a1a 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.36px 1.36px at 17.0px 32.1px, color-mix(in srgb, #eeef08 74%, #ffffff), color-mix(in srgb, #eeef08 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.84px 1.84px at 32.1px 35.9px, color-mix(in srgb, #18b803 74%, #ffffff), color-mix(in srgb, #18b803 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.63px 1.63px at 48.3px 34.6px, color-mix(in srgb, #75b7ff 74%, #ffffff), color-mix(in srgb, #75b7ff 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.47px 1.47px at 61.7px 38.8px, color-mix(in srgb, #e472ff 74%, #ffffff), color-mix(in srgb, #e472ff 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.59px 1.59px at 73.2px 36.6px, color-mix(in srgb, #ff9f7b 74%, #ffffff), color-mix(in srgb, #ff9f7b 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.34px 1.34px at 2.9px 51.3px, color-mix(in srgb, #cace02 74%, #ffffff), color-mix(in srgb, #cace02 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.78px 1.78px at 17.6px 52.6px, color-mix(in srgb, #03960f 74%, #ffffff), color-mix(in srgb, #03960f 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.72px 1.72px at 35.6px 46.1px, color-mix(in srgb, #007bff 74%, #ffffff), color-mix(in srgb, #007bff 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.87px 1.87px at 50.9px 49.3px, color-mix(in srgb, #ffabff 74%, #ffffff), color-mix(in srgb, #ffabff 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.44px 1.44px at 59.6px 52.2px, color-mix(in srgb, #e76006 74%, #ffffff), color-mix(in srgb, #e76006 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.77px 1.77px at 73.3px 49.9px, color-mix(in srgb, #a2af10 74%, #ffffff), color-mix(in srgb, #a2af10 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.76px 1.76px at 3.5px 65.0px, color-mix(in srgb, #00f9a8 74%, #ffffff), color-mix(in srgb, #00f9a8 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.72px 1.72px at 25.0px 58.0px, color-mix(in srgb, #5499ff 74%, #ffffff), color-mix(in srgb, #5499ff 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.77px 1.77px at 30.9px 65.9px, color-mix(in srgb, #ff51c9 74%, #ffffff), color-mix(in srgb, #ff51c9 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.87px 1.87px at 51.0px 65.4px, color-mix(in srgb, #b46f1e 74%, #ffffff), color-mix(in srgb, #b46f1e 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.38px 1.38px at 61.3px 65.1px, color-mix(in srgb, #72d512 74%, #ffffff), color-mix(in srgb, #72d512 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.79px 1.79px at 78.3px 63.7px, color-mix(in srgb, #12b37e 74%, #ffffff), color-mix(in srgb, #12b37e 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.34px 1.34px at 9.8px 74.9px, color-mix(in srgb, #577ecc 74%, #ffffff), color-mix(in srgb, #577ecc 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.54px 1.54px at 20.7px 75.9px, color-mix(in srgb, #ff90c0 74%, #ffffff), color-mix(in srgb, #ff90c0 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.61px 1.61px at 31.6px 74.4px, color-mix(in srgb, #db8a0c 74%, #ffffff), color-mix(in srgb, #db8a0c 74%, #ffffff) 34%, transparent 100%),
radial-gradient(1.97px 1.97px at 47.5px 78.3px, color-mix(in srgb, #61ff09 74%, #ffffff), color-mix(in srgb, #61ff09 74%, #ffffff) 34%, transparent 100%),
/* 6. EIN SCHRÄGER SCHLEIER quer über das Feld. Er bindet die
99 Punkte zu einer Fläche zusammen — ohne ihn
102 Punkte zu einer Fläche zusammen — ohne ihn
schweben sie einzeln. Sehr blass; er soll Richtung geben,
nicht auffallen. */
linear-gradient(104deg,
@@ -8682,11 +8686,11 @@ body.start .k-leiste .feldschild::after {
linear-gradient(180deg, #0b1020 0%, #070b14 100%);
background-size:
100% 100%, 100% 100%,
197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px,
197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 197px 197px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 131px 131px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px, 83px 83px,
100% 100%, 100% 100%;
background-repeat:
no-repeat, no-repeat,
repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat,
repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat,
no-repeat, no-repeat;
/* Die Kante trägt den Kachelton mit — sonst wäre ausgerechnet die
farbigste Kachel der Wand einfarbig umrandet. */
@@ -9078,3 +9082,77 @@ body[data-ton] .kopfleiste__rechts > *:hover {
.kopf-mehr { border: 1px solid CanvasText; }
.kopf-mehr__fach { border: 1px solid CanvasText; background: Canvas; }
}
/* =====================================================================
DIE NOTIZKACHEL IST EIN BLOCK (26.09.2026)
=====================================================================
Filipe: „ich will dass du das auch wie ein notizblock erstellst.
ich will dass es übelst geil und einzigartig ist."
Dieselbe Bauart wie `silber` bei den Aufgaben und `regenbogen` bei
Willkommen: ein MERKMAL am Element (`data-papier="ja"`), keine
Farbe. Die Farbwerkzeuge rechnen weiter mit `data-ton="46"`, und
wer diese Stilvorlage nicht bekommt (alter Zwischenspeicher,
Kontrastmodus), sieht die Kachel in ihrem Grün — erkennbar, nur
ohne Papier.
VIER EBENEN, von oben nach unten:
1. DIE PERFORATION. Eine Reihe dunkler Halbkreise dicht unter der
Oberkante — die Löcher, an denen man das Blatt abreißt. Sie
sitzen in einem hellen Streifen (dem Leimrand), sonst
schwebten sie im Nichts.
2. DIE LINIATUR. Waagerechte Linien im Ton der Kachel, sehr
schwach. Ihr Abstand ist 26 px und damit GRÖSSER als die
Zeilenhöhe des Kacheltextes: Läge eine Linie genau unter der
Schrift, sähe es aus wie eine Unterstreichung.
3. DER RANDSTRICH. Eine senkrechte Linie bei 14 % Breite, wie der
Rand auf Schulpapier. Er ist das Detail, an dem man „Papier"
erkennt, ohne es zu benennen.
4. DER GRUNDVERLAUF. Oben eine Spur heller — so liegt Licht auf
einem Block, der leicht gewölbt auf dem Tisch liegt.
WARUM DAS PAPIER DUNKEL IST. Ein cremeweißer Block auf einer
dunklen Wand wäre eine Lampe: Bei 95 % Leuchtdichte blendet die
Kachel, und die Hausregel heißt augenschonend. Das Papiergefühl
trägt hier die STRUKTUR (Löcher, Linien, Rand), nicht die
Helligkeit — genau wie eine schwarze Kladde immer noch als
Notizbuch zu erkennen ist.
===================================================================== */
.kachel[data-papier="ja"] {
background-image:
/* 1. Die Perforation: dunkle Löcher im hellen Leimrand. */
radial-gradient(circle at 50% 0,
color-mix(in srgb, #05070d 88%, transparent) 0 2.6px,
transparent 2.9px),
linear-gradient(color-mix(in srgb, var(--ton) 22%, transparent) 0 9px,
transparent 9px),
/* 2. Die Liniatur. */
repeating-linear-gradient(to bottom,
transparent 0 25px,
color-mix(in srgb, var(--ton) 13%, transparent) 25px 26px),
/* 3. Der Randstrich. */
linear-gradient(to right,
transparent 0 14%,
color-mix(in srgb, var(--ton) 26%, transparent) 14%,
transparent calc(14% + 1px)),
/* 4. Der Grundverlauf. */
linear-gradient(to bottom,
color-mix(in srgb, var(--ton) 13%, transparent),
color-mix(in srgb, var(--ton) 5%, transparent) 62%,
transparent);
background-size: 18px 9px, 100% 9px, 100% 100%, 100% 100%, 100% 100%;
background-position: 0 3px, 0 0, 0 0, 0 0, 0 0;
background-repeat: repeat-x, no-repeat, repeat, no-repeat, no-repeat;
}
/* Beim Anfassen wird die Liniatur eine Spur deutlicher — als würde man
das Blatt zum Licht drehen. Kein Blinken, keine Bewegung. */
@media (prefers-reduced-motion: no-preference) {
.kachel[data-papier="ja"] { transition: filter .2s ease; }
}
/* Im Kontrastmodus trägt allein die Kante. Ein Verlauf würde dort zu
einer grauen Fläche — dieselbe Entscheidung wie bei Silber. */
@media (forced-colors: active) {
.kachel[data-papier="ja"] { background-image: none; }
}