Highlights nach vorn, kraeftige Chatfarben, alle Farben in einer Kachel

screen1 -- HIGHLIGHTS AUF ANSCHLAGBRETTS PLATZ
  Kein Tausch, sondern ein Aufruecken: Highlights nimmt die Stelle,
  alle anderen wandern eine weiter. Inhaltlich stimmt das auch --
  was die Leute selbst gemacht haben, steht vor dem, was ihnen
  angesagt wird.

screen2 -- DIE CHATFARBEN SIND GERECHNET, NICHT GEGRIFFEN
  Gemessen, was drinstand: Buntheit 0,002 bis 0,048, im Mittel 0,028
  -- auf dem Bildschirm zwoelf Grautoene. Das lag nicht an fehlendem
  Mut, sondern an der Fusszeile der Blase: Sie stand auf der leisen
  Hausschrift, und gegen die darf die Flaeche kaum Farbe haben.

  Deshalb ZUERST die Schrift (--blase-text/--blase-leise, eigene
  Farben der Blase), DANN die Flaeche. Andersherum waere es der
  Fehler vom selben Vormittag gewesen, als 27 von 31 Startkacheln
  unlesbar wurden.

  tools/chat-kacheln-rechnen.mjs liest beide Schriftfarben aus dem
  CSS und rechnet daraus die hellste Flaeche, die sie noch tragen.
  Ergebnis: Buntheit 0,072 bis 0,268, alle zwoelf auf DERSELBEN
  Leuchtdichte -- also exakt demselben Kontrast (7,02 bis 7,13:1).

  Zwei Anlaeufe waren falsch und stehen im Werkzeug begruendet:
    - hoechste Buntheit nehmen, dann Kontrast pruefen. Musste
      scheitern: gesaettigtes Gelb ist bei gleicher empfundener
      Helligkeit viel heller als Blau.
    - gleiche OKLab-Helligkeit statt gleicher Leuchtdichte. Das
      Versprechen der zwoelf lautet "ueberall gleich gut lesbar",
      und Lesbarkeit haengt an der Leuchtdichte, nicht am Eindruck.

  WER NICHTS EINSTELLT, BEKOMMT TROTZDEM EINE FARBE. Gemessen an der
  Live-Datenbank hatten vier von fuenfzehn eine gewaehlt -- der Chat
  war fuer alle anderen einfarbig. Jetzt vergibt der Server einen der
  elf bunten Toene aus der Personennummer, stabil. Schrittweite 4:
  elf ist prim, also laufen alle Toene durch, und vier Schritte sind
  131 Grad im Farbkreis -- aufeinanderfolgende Nummern landen so weit
  auseinander wie moeglich. Mit id % 11 sassen zwei Nachbarn im
  selben Gespraech magenta und rot nebeneinander.

  Niemand verliert seine Wahl: veilchen, ziegel und moos sind die
  drei gewaehlten und behalten ihren Farbbereich.

  Dazu: Blasen mit 22px runden Kanten (nur die Ecke zur Person bleibt
  spitz -- sie sagt, wer spricht), Lichtsaum oben innen, weicher
  Schatten. Der Name hell und fett mit Rollenpunkt davor; er stand
  auf leisem Grau mit 85 Prozent Deckung und war der schwaechste Text
  der Seite, ausgerechnet der, der sagt, wer spricht.

  ZWEI REGELBLOECKE FUER DIESELBE BLASE ZUSAMMENGELEGT. Der untere
  gewann und hat an einem Tag zweimal Schaden angerichtet: Er stellte
  die runden Kanten auf 16px zurueck (die Aenderung waere wirkungslos
  ausgeliefert worden), und er mischte 26 Prozent Akzentfarbe in die
  eigene Blase -- die hatte damit eine Farbe, die in CHAT_KACHELN
  nicht vorkommt und die die Kontrastpruefung nie angesehen hat.

screen3 -- ALLE FARBEN DES HAUSES IN EINER KACHEL
  tools/kachel-regenbogen.mjs leitet die 31 benutzten Toene ab
  (bereicheFuer/zusatzBereicheFuer ueber alle Rollen und beide
  Haeuser) und schreibt daraus einen Streifenverlauf mit harten
  Kanten -- "nicht gemischt" war die eigentliche Ansage. Ein Verlauf
  ergaebe Zwischentoene, die es im Haus nicht gibt.

  Gegen einen deckenden Grund gemischt, nicht gegen --flaeche: Die
  ist halbdurchsichtig, und durch 31 schmale Baender schien das
  Buehnenbild -- sie verloren genau das, wofuer sie da sind.

  Der Lesesaum ist staerker als auf den anderen Kacheln, und zwar
  gemessen: Mit deren Werten kam der Text auf 4,45:1, fuenf
  Hundertstel unter der Grenze. Gefunden hat das pruef-kachelfarben,
  nicht der Blick -- 4,45 gegen 4,50 sieht man nicht.

pruef-buehne -- DIE ZAHL GEHOERT IN DIE BEDINGUNG
  Die Abtastung wurde nachsichtiger (fremde Flaechen zaehlen nicht
  mehr als Untergrund eines Textes). Das war richtig und hat einen
  Fehlalarm beseitigt, der seit Tagen kam. Eine Lockerung kann aber
  zu weit gehen, deshalb muss jetzt jeder gefundene Text in genau
  einem von drei Toepfen landen: gemessen, ohne freien Untergrund,
  oder aussortiert. Geht die Rechnung nicht auf, ist unterwegs etwas
  still verschwunden.

  Erster Anlauf war "mindestens 5 Stellen" -- und wurde auf
  uebersicht.html sofort rot, weil die Seite nur vier Texte hat.
  Eine feste Schwelle ist eine Rechnung von gestern; diese war keine
  fuenf Minuten alt.

Gemessen: pruef-kachelfarben 22/0 (war 18, neu: die Willkommenskachel
traegt wirklich alle benutzten Farben, in beide Richtungen geprueft),
pruef-buehne 192/0, pruef-chatkachel 32/0, pruef-chat-optik 45/0,
pruef-chat 48/0, pruef-erwaehnung 69/0, pruef-start-ansicht 153/0,
pruef-treff 80/0, pruef-willkommen 67/0, pruef-treffchat 110/0,
pruef-css-klassen 30/0.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-09-22 12:57:56 +02:00
co-authored by Claude Opus 5
parent e12392a289
commit 80dee4d0c8
50 changed files with 1869 additions and 639 deletions
+119 -53
View File
@@ -319,7 +319,36 @@
letter-spacing: .07em; text-transform: uppercase;
}
/* =====================================================================
DIE SCHRIFT DER BLASE GEHOERT DER BLASE (22.09.2026)
Filipe: „die schrift vom chat soll dan auch angepasst werden und die
namen so dass man sie gut erkennt."
WARUM DAS HIER STEHT UND NICHT BEI DEN FARBEN DER SEITE:
Die Blase ist die einzige Flaeche im Haus, deren Farbe der NUTZER
waehlt. Alles andere steht auf der Hausflaeche. Die Schrift der
Seite (--text-leise, #94a5bb) ist fuer diese Hausflaeche gerechnet
-- und sie war es, die die zwoelf Kacheln so dunkel gehalten hat:
Gegen ein leises Grau darf die Flaeche kaum Farbe haben, sonst
verschwindet die Fusszeile.
Also andersherum: erst die Schrift hell genug, dann darf die Flaeche
kraeftig werden. Beides haengt zusammen und wird deshalb ZUSAMMEN
gerechnet -- tools/chat-kacheln-rechnen.mjs liest genau diese beiden
Werte hier und rechnet daraus aus, wie stark die zwoelf Toene
ueberhaupt sein duerfen. Wer sie hier aendert, aendert dort das
Ergebnis; eine zweite Liste gibt es nicht. */
/* ---- ANFANG GERECHNET: chat-kacheln-rechnen.mjs ---- */
/* ERZEUGT VON tools/chat-kacheln-rechnen.mjs -- NICHT VON HAND AENDERN.
Der Ton, den eine Blase traegt, solange niemand etwas eingestellt
hat. Derselbe Wert wie der Eintrag Standard in CHAT_KACHELN. */
.chat-nachricht { --kachel-standard: #4f545c; }
/* ---- ENDE GERECHNET ---- */
.chat-nachricht {
--blase-text: #f3f7fc;
--blase-leise: #c4d2e2;
display: grid;
grid-template-columns: 30px 1fr;
gap: 9px;
@@ -354,9 +383,21 @@
.chat-nachricht__blase {
grid-column: 2;
padding: 10px 13px 7px;
border: 1px solid var(--rand);
border-radius: 14px 14px 14px 4px;
padding: 11px 15px 8px;
border: 1px solid rgba(255, 255, 255, .13);
/* RUNDER (22.09.2026). Filipe: „die chat bubble wo die text drin
sind sollen auch viel geiler aussehen, mit runden kanten."
22 px statt 14; nur die Ecke zur Person bleibt spitz -- sie ist
es, die sagt, WER spricht. Ohne sie waeren es Pillen ohne
Richtung. */
border-radius: 22px 22px 22px 6px;
/* Ein Lichtsaum oben innen und ein weicher Schatten aussen. KEIN
Verlauf in der Flaeche: Text auf einem Farbverlauf liest sich
unruhig, und diese Flaeche ist zum Lesen da. Der Saum ist 1 px
und beruehrt die Schrift nicht. */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .16),
0 2px 10px rgba(0, 0, 0, .28);
/* DECKEND, NICHT DURCHSCHEINEND (20.09.2026).
Hier stand `rgba(255,255,255,.045)` -- praktisch durchsichtig. Das
@@ -369,40 +410,72 @@
Account seine eigene Kachel (siehe weiter unten). Der Rueckfall
ist die Hausfarbe -- wer nichts einstellt, bekommt das, was vorher
auch da war, nur deckend. */
background: var(--kachel, #131a25);
background: var(--kachel, var(--kachel-standard));
min-width: 0;
}
.chat-nachricht[data-folge="ja"] .chat-nachricht__blase { border-radius: 14px 14px 14px 8px; }
.chat-nachricht[data-folge="ja"] .chat-nachricht__blase { border-radius: 22px 22px 22px 10px; }
/* Die eigenen: gedecktes Blau, Ecke rechts. Kein Verlauf in der Fläche
-- Text auf einem Farbverlauf liest sich unruhig. */
.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase {
grid-column: 1;
border-radius: 14px 14px 4px 14px;
border-radius: 22px 22px 6px 22px;
/* Auch die eigene deckt jetzt. `color-mix` auf `transparent` liesse
das Foto durch -- gemischt wird deshalb auf die Hausflaeche. */
background: var(--kachel,
color-mix(in srgb, var(--akzent) 16%, #131a25));
/* DIESELBE FLAECHE WIE BEI ALLEN ANDEREN (22.09.2026).
Hier waren 16 % Akzentfarbe beigemischt. Damit hatte die eigene
Blase eine Farbe, die in CHAT_KACHELN nicht vorkommt -- und die
die Kontrastpruefung deshalb nie angesehen hat. Ausgerechnet die
eigene Blase, die man am haeufigsten liest, lag ausserhalb jeder
Messung. Woran man sie erkennt, steht unveraendert daneben: die
Seite, die spitze Ecke, der Rand und der Schein im Akzent. */
background: var(--kachel, var(--kachel-standard));
border-color: color-mix(in srgb, var(--akzent) 30%, transparent);
}
.chat-nachricht[data-selbst="ja"][data-folge="ja"] .chat-nachricht__blase {
border-radius: 14px 14px 8px 14px;
border-radius: 22px 22px 10px 22px;
}
/* DER NAME MUSS MAN ERKENNEN (22.09.2026).
Er stand auf var(--text-leise) mit 85 % Deckung -- also einem leisen
Grau, das zusaetzlich durchscheint. Auf einer kraeftigen Kachel war
das der schwaechste Text der ganzen Seite, ausgerechnet der, der
sagt, wer spricht. Jetzt hell, fett und minimal gesperrt; die Farbe
der Rolle sitzt daneben im Kreis und im Punkt davor, nicht in der
Schrift -- eine Rollenfarbe als Schriftfarbe waere bei zwoelf
waehlbaren Flaechen nicht mehr zu garantieren. */
.chat-nachricht__von {
margin: 0 0 3px;
font-size: .74rem; font-weight: 700;
color: color-mix(in srgb, var(--text-leise) 85%, transparent);
margin: 0 0 4px;
display: flex; align-items: center; gap: 6px;
font-size: .78rem; font-weight: 800;
letter-spacing: .015em;
color: var(--blase-text);
}
.chat-nachricht__von::before {
content: ""; flex: none;
width: 6px; height: 6px; border-radius: 50%;
background: var(--rollenfarbe, rgba(255, 255, 255, .55));
}
/* Dieselbe Zuordnung wie beim Kreis mit den Anfangsbuchstaben. Sie
steht zweimal, weil zwei verschiedene Eigenschaften gesetzt werden
(--r dort, --rollenfarbe hier); die FARBEN kommen beide aus
denselben Hausvariablen, es gibt also keinen zweiten Wert, der
auseinanderlaufen koennte. */
.chat-nachricht__von[data-rolle="admin"] { --rollenfarbe: var(--dogi-haupt); }
.chat-nachricht__von[data-rolle="manager"] { --rollenfarbe: var(--manager-haupt); }
.chat-nachricht__von[data-rolle="scout"] { --rollenfarbe: var(--scout-haupt); }
.chat-nachricht__von[data-rolle="creator"] { --rollenfarbe: var(--creator-haupt); }
.chat-nachricht__text {
margin: 0;
font-size: .92rem; color: var(--text);
/* Etwas groesser als vorher (.92) -- der Chat ist die Seite, auf der
am laengsten gelesen wird, und die Blase hat jetzt den Platz. */
font-size: .95rem; color: var(--blase-text);
/* pre-wrap: Zeilenumbrüche aus der Eingabe bleiben erhalten, ohne
dass dafür HTML erzeugt werden müsste (das wäre der Weg, über den
jemand Auszeichnung einschleust). */
white-space: pre-wrap;
overflow-wrap: anywhere; /* eine lange Adresse sprengt nichts */
line-height: 1.5;
line-height: 1.55;
}
.chat-nachricht__weg { color: var(--text-still); font-style: italic; }
.chat-nachricht[data-weg="ja"] .chat-nachricht__blase {
@@ -446,8 +519,10 @@
.chat-nachricht__fuss {
display: flex; align-items: center; flex-wrap: wrap;
column-gap: 9px; row-gap: 2px;
margin-top: 4px;
color: var(--text-leise);
margin-top: 5px;
/* War var(--text-leise) (#94a5bb). Diese eine Farbe war die Bremse
fuer alle zwoelf Kachelfarben -- siehe der Block oben. */
color: var(--blase-leise);
}
.chat-nachricht__zeit {
font-size: .75rem; color: inherit;
@@ -721,45 +796,36 @@
}
/* ---------- Die Nachrichten ------------------------------------------ */
.chat-nachricht__blase {
border-radius: 16px 16px 16px 5px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .06),
0 2px 6px -3px rgba(0, 0, 0, .55);
}
/* Die erste Blase einer Folge bekommt oben eine eckige Ecke -- dort
fängt der Gedanke an. Die folgenden sind rundum weich. */
.chat-nachricht[data-folge="ja"] .chat-nachricht__blase {
border-top-left-radius: 8px;
}
/* HIER STAND DIE ZWEITE FASSUNG DERSELBEN BLASE — sie ist am
22.09.2026 weggefallen und in die erste (weiter oben) gewandert.
---------------------------------------------------------------------
Der Kommentar, der hier stand, hat den Zustand selbst beschrieben:
„Dass es zwei Stellen gibt, ist gewachsen (Grundform oben,
Feinschliff hier). Sie zusammenzulegen wäre ein größerer Umbau an
einer Datei, die heute schon viel abbekommen hat."
Am 22.09. hat genau das zweimal an einem Tag Schaden angerichtet:
1. Die runden Kanten, die Filipe ausdrücklich verlangt hat, wurden
oben auf 22 px gesetzt — und hier unten sofort wieder auf 16
zurückgestellt. Die Änderung wäre wirkungslos ausgeliefert worden,
und sie sähe im Quelltext richtig aus.
2. Die eigene Blase bekam ihre Farbe hier als VERLAUF mit 26 % bzw.
12 % Akzentfarbe hineingemischt. Damit hatte sie eine Farbe, die
in CHAT_KACHELN gar nicht vorkommt — und die die Kontrastprüfung
deshalb nie angesehen hat. Ausgerechnet die eigene Blase, die man
am häufigsten liest, lag außerhalb jeder Messung. Seit die zwölf
Töne kräftig sind, hätte die Beimischung sie zusätzlich aufgehellt
und das Versprechen „bei jedem derselbe Kontrast" gebrochen.
Der Akzent sitzt jetzt im Rand und im Schatten der eigenen Blase, wo
er sichtbar ist, ohne unter der Schrift zu liegen. Die Fläche selbst
ist bei allen dieselbe Rechnung. */
.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase {
border-radius: 16px 16px 5px 16px;
/* DIESE REGEL IST DIE ZWEITE FÜR DIESELBE KACHEL (20.09.2026).
Weiter oben steht schon eine -- und genau daran wäre die eigene
Kachel beinahe transparent geblieben: Dort wurde `--kachel`
eingebaut, hier gewinnt der Verlauf, und der kannte die Farbe
nicht. Gemessen am Bildschirm: rgba(0,0,0,0), also nichts.
Dass es zwei Stellen gibt, ist gewachsen (Grundform oben,
Feinschliff hier). Sie zusammenzulegen wäre ein größerer Umbau an
einer Datei, die heute schon viel abbekommen hat -- deshalb
stattdessen: BEIDE kennen `--kachel`, und diese Zeile hier sagt
es dazu.
.95 ist zu .99 geworden: Seit das Bühnenbild durchscheint, sind
fünf Prozent Foto in der Schriftfläche sichtbar -- und zwar
wandernd, weil das Bild fest steht und die Kachel scrollt. */
background: linear-gradient(160deg,
color-mix(in srgb, var(--akzent) 26%, var(--kachel, rgba(17, 24, 37, .99))),
color-mix(in srgb, var(--akzent) 12%, var(--kachel, rgba(12, 17, 27, .99))));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .10),
0 2px 8px -3px color-mix(in srgb, var(--akzent) 45%, transparent);
}
.chat-nachricht[data-selbst="ja"][data-folge="ja"] .chat-nachricht__blase {
border-top-right-radius: 8px;
border-top-left-radius: 16px;
inset 0 1px 0 rgba(255, 255, 255, .18),
0 2px 10px -2px color-mix(in srgb, var(--akzent) 45%, transparent);
}
/* Der Tagestrenner: eine Linie mit dem Datum darin statt eines Wortes
+106
View File
@@ -8358,3 +8358,109 @@ body.start .k-leiste .feldschild::after {
margin: 0 0 12px; max-width: 74ch;
font-size: .85rem; line-height: 1.6; color: var(--text-still);
}
/* ---- ANFANG GERECHNET: kachel-regenbogen.mjs ---- */
/* ERZEUGT VON tools/kachel-regenbogen.mjs — NICHT VON HAND ÄNDERN.
31 Streifen, einer je benutztem Kachelton, sortiert nach
Farbwinkel. Die Liste ist aus den Kachellisten abgeleitet; wer eine
Kachel hinzufügt, lässt das Werkzeug erneut laufen. Die Prüfung
pruef-willkommen zählt nach, ob beides noch zusammenpasst. */
.kachel[data-regenbogen="ja"] {
background-image:
/* 1. DER LESESAUM — er liegt ZUERST, also obenauf, und ist der
Grund, warum diese Kachel bunt sein darf, ohne dass die
Schrift leidet.
STAERKER ALS AUF DEN ANDEREN KACHELN, und zwar gemessen:
Mit den Werten der normalen Kachel (.90/.70/.24) kam der
Text hier auf 4,45:1 -- fuenf Hundertstel unter der Grenze.
Kein Wunder: Dort liegt EIN dunkler Ton unter der Schrift,
hier liegen deckende Farbbaender. Ein heller Untergrund
braucht einen dunkleren Saum, sonst ist die Kachel schoen
und der Text weg. Gefunden hat das pruef-kachelfarben, nicht
der Blick -- 4,45 gegen 4,50 sieht man nicht. */
linear-gradient(to top,
rgba(4, 6, 14, .95) 0%, rgba(4, 6, 14, .82) 26%,
rgba(4, 6, 14, .32) 48%, transparent 66%),
/* 2. DIE VIGNETTE — aussen dunkler als innen. Ohne sie wäre die
Kachel eine Fläche, mit ihr ein Ausschnitt. */
radial-gradient(120% 120% at 50% 45%, transparent 44%, rgba(3, 5, 12, .42) 100%),
/* 3. EIN SCHRÄGER GLANZ quer über die Streifen. Er bindet die
31 Bänder zu einer Fläche zusammen — ohne ihn sieht es
aus wie ein Farbmuster, mit ihm wie ein Gegenstand. */
linear-gradient(104deg,
rgba(255, 255, 255, .10) 0%,
rgba(255, 255, 255, .02) 34%,
rgba(0, 0, 0, .10) 68%,
rgba(0, 0, 0, .26) 100%),
/* 4. DIE FARBEN DES HAUSES, harte Kanten, kein Verlauf dazwischen.
Jede Farbe bleibt sie selbst — genau das war die Ansage. */
linear-gradient(100deg,
color-mix(in srgb, #07fff1 72%, #070b14) 0.000%,
color-mix(in srgb, #07fff1 72%, #070b14) 3.226%,
color-mix(in srgb, #0ed1d0 72%, #070b14) 3.226%,
color-mix(in srgb, #0ed1d0 72%, #070b14) 6.452%,
color-mix(in srgb, #0687bc 72%, #070b14) 6.452%,
color-mix(in srgb, #0687bc 72%, #070b14) 9.677%,
color-mix(in srgb, #08b5fc 72%, #070b14) 9.677%,
color-mix(in srgb, #08b5fc 72%, #070b14) 12.903%,
color-mix(in srgb, #6d8cfe 72%, #070b14) 12.903%,
color-mix(in srgb, #6d8cfe 72%, #070b14) 16.129%,
color-mix(in srgb, #b699fe 72%, #070b14) 16.129%,
color-mix(in srgb, #b699fe 72%, #070b14) 19.355%,
color-mix(in srgb, #ab68ff 72%, #070b14) 19.355%,
color-mix(in srgb, #ab68ff 72%, #070b14) 22.581%,
color-mix(in srgb, #d21afd 72%, #070b14) 22.581%,
color-mix(in srgb, #d21afd 72%, #070b14) 25.806%,
color-mix(in srgb, #e871ff 72%, #070b14) 25.806%,
color-mix(in srgb, #e871ff 72%, #070b14) 29.032%,
color-mix(in srgb, #f4acff 72%, #070b14) 29.032%,
color-mix(in srgb, #f4acff 72%, #070b14) 32.258%,
color-mix(in srgb, #e701c1 72%, #070b14) 32.258%,
color-mix(in srgb, #e701c1 72%, #070b14) 35.484%,
color-mix(in srgb, #ff57ba 72%, #070b14) 35.484%,
color-mix(in srgb, #ff57ba 72%, #070b14) 38.710%,
color-mix(in srgb, #fe8ebe 72%, #070b14) 38.710%,
color-mix(in srgb, #fe8ebe 72%, #070b14) 41.935%,
color-mix(in srgb, #f10778 72%, #070b14) 41.935%,
color-mix(in srgb, #f10778 72%, #070b14) 45.161%,
color-mix(in srgb, #ff6877 72%, #070b14) 45.161%,
color-mix(in srgb, #ff6877 72%, #070b14) 48.387%,
color-mix(in srgb, #ff1a1a 72%, #070b14) 48.387%,
color-mix(in srgb, #ff1a1a 72%, #070b14) 51.613%,
color-mix(in srgb, #ff9d82 72%, #070b14) 51.613%,
color-mix(in srgb, #ff9d82 72%, #070b14) 54.839%,
color-mix(in srgb, #c16302 72%, #070b14) 54.839%,
color-mix(in srgb, #c16302 72%, #070b14) 58.065%,
color-mix(in srgb, #db8908 72%, #070b14) 58.065%,
color-mix(in srgb, #db8908 72%, #070b14) 61.290%,
color-mix(in srgb, #ffbd4a 72%, #070b14) 61.290%,
color-mix(in srgb, #ffbd4a 72%, #070b14) 64.516%,
color-mix(in srgb, #918a01 72%, #070b14) 64.516%,
color-mix(in srgb, #918a01 72%, #070b14) 67.742%,
color-mix(in srgb, #eeef08 72%, #070b14) 67.742%,
color-mix(in srgb, #eeef08 72%, #070b14) 70.968%,
color-mix(in srgb, #cace02 72%, #070b14) 70.968%,
color-mix(in srgb, #cace02 72%, #070b14) 74.194%,
color-mix(in srgb, #a2af10 72%, #070b14) 74.194%,
color-mix(in srgb, #a2af10 72%, #070b14) 77.419%,
color-mix(in srgb, #72d512 72%, #070b14) 77.419%,
color-mix(in srgb, #72d512 72%, #070b14) 80.645%,
color-mix(in srgb, #61ff09 72%, #070b14) 80.645%,
color-mix(in srgb, #61ff09 72%, #070b14) 83.871%,
color-mix(in srgb, #a7ff98 72%, #070b14) 83.871%,
color-mix(in srgb, #a7ff98 72%, #070b14) 87.097%,
color-mix(in srgb, #18b803 72%, #070b14) 87.097%,
color-mix(in srgb, #18b803 72%, #070b14) 90.323%,
color-mix(in srgb, #069511 72%, #070b14) 90.323%,
color-mix(in srgb, #069511 72%, #070b14) 93.548%,
color-mix(in srgb, #08eb9f 72%, #070b14) 93.548%,
color-mix(in srgb, #08eb9f 72%, #070b14) 96.774%,
color-mix(in srgb, #12b37e 72%, #070b14) 96.774%,
color-mix(in srgb, #12b37e 72%, #070b14) 100.000%);
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
/* Die Kante links trägt alle Farben mit, in derselben Reihenfolge —
sonst wäre ausgerechnet der farbigste Streifen der Kachel einfarbig. */
border-color: color-mix(in srgb, var(--ton) 38%, transparent);
}
/* ---- ENDE GERECHNET ---- */