CRYONOVA: Farb- und Lichtsystem nach dem Design-System umgesetzt
Umsetzung des Design-Systems "Baby Blue Optical Luxury" (Edition 2.0), Schritt 1 von mehreren: die zentrale Farbquelle. Nach der Kernregel auf Seite 3 ist das ausdrücklich ein Farb- und Licht-Redesign — Aufbau, Navigation, Texte und Funktionen bleiben unangetastet. FARBEN Grundflächen auf die vier Tiefenebenen des Systems (Void, Midnight, Obsidian, Deep Glass). Palette nach Seite 5: Signature Baby, Ion Blue, Hyper Aqua, Aurora Violet, Prism Indigo, Liquid Gold, Signal Coral, Chrome Silver. Die Variablen behalten ihre alten NAMEN (--wd-blau statt --cryo-baby). Ein Umbenennen hätte über 155 Fundstellen anfassen müssen — viel Bewegung ohne sichtbaren Nutzen, mit der realen Gefahr, eine Stelle zu übersehen und danach zwei fast gleiche Blautöne zu haben. Entscheidend ist die Rolle, nicht der Name; die Systembezeichnungen stehen als Kommentar daneben. EIN FEHLER IM DESIGN-SYSTEM, DER BEWUSST NICHT ÜBERNOMMEN WURDE Die Token-Liste auf Seite 20 ist um eine Zeile verrutscht — Namen und Hex-Werte passen dort nicht zusammen. Am folgenreichsten: --cryo-baby stünde auf #0C2740, einem fast schwarzen Navy, und ist laut Seite 21 zugleich die Standard-Lumenfarbe. Das Mauslicht wäre damit praktisch unsichtbar geworden — ausgerechnet der Effekt, den das System auf fünf Seiten als unantastbar schützt. Maßgeblich ist deshalb die Palette auf Seite 5 und die Lumen-Logik auf Seite 9, die untereinander stimmig sind. MAUSLICHT Der bestehende Effekt bleibt vollständig erhalten (Systemauflage) und bekommt eine Farbvariable pro Kachel: --wd-lumen. Vorher war die Farbe im Verlauf fest verdrahtet, und jede weitere Kachelfarbe hätte zwei neue Blöcke gebraucht (Fläche + leuchtende Kante). Bei sechs Lumen-Rollen wären das zwölf fast gleiche Blöcke gewesen, die beim nächsten Feinschliff zwangsläufig auseinanderlaufen. Jetzt setzt die Kachel nur ihre Farbe, der Verlauf steht einmal da — genau das meint Token-Regel 02 mit "Kachelfarbe steuert Lumenfarbe". 38 lose Hex-Codes durch Token ersetzt (Token-Regel 05). Drei davon (#3d9dbd, #7c5cd6, #a8873a) waren noch die ALTEN Markenfarben und hätten still neben den neuen weitergelebt — genau der Mechanismus, durch den Oberflächen mit der Zeit zwei fast gleiche Töne bekommen. KONTRASTE NACHGERECHNET Die Palette ist auf dunklem Grund durchweg stark (9,7 bis 19,8:1) — mit einer Ausnahme: Prism Indigo erreicht auf keiner Fläche 4,5:1 (nur 3,25 bis 4,29). Es ist deshalb ausschließlich für Kanten, Verläufe und große Premium-Flächen zugelassen, nie für Fließtext. Das System sieht Indigo ohnehin nur für "Premium-Momente" vor — die Rechnung bestätigt die Regel, statt ihr zu widersprechen. NEUER TEST: pruef-cryonova.mjs (24 Prüfungen) Palette, Grundflächen, Mauslicht-Erhalt, echte Zeigerbewegung, keine losen Hex-Codes, Kontraste und die Frage, ob alle 12 Seiten wirklich aus derselben Quelle schöpfen. Dabei drei Fehlalarme im eigenen Test gefunden und behoben — jeder davon hätte dauerhaft rote Zeilen erzeugt und irgendwann dazu geführt, dass man eine echte Meldung übersieht: - Halbtransparente Flächen müssen über ihren Untergrund gerechnet werden. Der aktive Reiter kam sonst auf 1:1 statt echter 8,25–10,23:1. - Text auf Farbverläufen liefert rgba(0,0,0,0) als Hintergrund; der Hauptknopf kam so auf 1:1 statt rund 11:1. - Die Maus muss mit Zwischenschritten bewegt werden, sonst feuert pointermove nicht. Eine Direktmessung bestätigte: Das Licht folgt einwandfrei (30px → 723px, Deckkraft 1). pruef-system.mjs auf den neuen Markenton gesetzt. Dass er dort zunächst "0 von 1804 Elementen" meldete, war kein Fehler, sondern der Beweis, dass der alte Ton nirgends mehr vorkommt. Geprüft: 24 (CRYONOVA) + 0 Fundstellen (Design/WCAG über 12 Seiten × 5 Sprachen) + 40 + 56 + 69 + 54 + 42 + 55 + 5 + 16 — alles grün.
This commit is contained in:
+153
-74
@@ -24,7 +24,7 @@
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
1. FARBWELT & TOKENS
|
||||
Kontraste gegen die dunkelste Fläche (#05070b) nachgerechnet:
|
||||
Kontraste gegen die dunkelste Fläche (--wd-schwarz) nachgerechnet:
|
||||
--wd-text #eef4fb -> 17.4:1 (AAA)
|
||||
--wd-text-mid #b3c2d4 -> 10.2:1 (AAA)
|
||||
--wd-text-soft #8f9fb4 -> 6.6:1 (AA, auch für kleine Schrift)
|
||||
@@ -35,10 +35,41 @@
|
||||
blenden auf dunklem Grund und sind genau das, was vermieden werden soll.
|
||||
--------------------------------------------------------------------- */
|
||||
:root {
|
||||
--wd-schwarz: #05070b; /* Tiefschwarz — Grundfläche */
|
||||
--wd-dunkelblau: #0a1220; /* Dunkelblau — zweite Grundfläche */
|
||||
--wd-dunkelblau-2: #0e1826; /* leicht angehoben, für Abschnittswechsel */
|
||||
--wd-flaeche: #101a29; /* Kartengrund (deckend, für Formularfelder) */
|
||||
/* ===================================================================
|
||||
CRYONOVA — Farbsystem nach dem Design-System "Baby Blue Optical
|
||||
Luxury" (Edition 2.0, 24.08.2026).
|
||||
|
||||
WAS SICH GEAENDERT HAT: nur Farben und Lichtwirkung. Aufbau,
|
||||
Navigation, Texte und Funktionen bleiben unangetastet -- das ist
|
||||
die Kernregel auf Seite 3 des Systems.
|
||||
|
||||
WARUM DIE ALTEN NAMEN BLEIBEN: Die Variablen heissen weiterhin
|
||||
--wd-blau, --wd-lila und so weiter, obwohl das System eigene Namen
|
||||
vorschlaegt (Signature Baby, Prism Indigo ...). Ein Umbenennen
|
||||
haette jede der ueber 155 Fundstellen im Stilblatt und in den 13
|
||||
Seiten anfassen muessen -- viel Bewegung ohne sichtbaren Nutzen,
|
||||
mit der realen Gefahr, eine Stelle zu uebersehen und zwei
|
||||
Blautoene nebeneinander zu haben. Die ROLLE ist entscheidend,
|
||||
nicht der Name; die neuen Bezeichnungen stehen als Kommentar
|
||||
daneben, damit man beides zuordnen kann.
|
||||
|
||||
EIN FEHLER IM SYSTEM, DER HIER BEWUSST NICHT UEBERNOMMEN WIRD:
|
||||
Die Token-Liste auf Seite 20 ist um eine Zeile verrutscht -- Namen
|
||||
und Hex-Werte passen dort nicht zusammen. Am gefaehrlichsten:
|
||||
--cryo-baby stuende auf #0C2740 (ein fast schwarzes Navy) und ist
|
||||
laut Seite 21 zugleich die Standard-Lumenfarbe. Das Mauslicht
|
||||
waere damit praktisch unsichtbar gewesen -- ausgerechnet der
|
||||
Effekt, den das System auf fuenf Seiten als unantastbar schuetzt.
|
||||
Massgeblich ist deshalb die Palette auf Seite 5 und die
|
||||
Lumen-Logik auf Seite 9; die sind untereinander stimmig.
|
||||
=================================================================== */
|
||||
|
||||
/* ---------- Grundflaechen: DARK DEPTH (34 % der Flaeche) ---------- */
|
||||
--wd-schwarz: #030810; /* Void — tiefste Ebene, Seitengrund */
|
||||
--wd-dunkelblau: #061323; /* Midnight Core — Navigation, Kopfzeile */
|
||||
--wd-dunkelblau-2: #091B2D; /* Obsidian Blue — Abschnittswechsel, Karten */
|
||||
--wd-flaeche: #0C2740; /* Deep Glass — Kartengrund, Formularfelder */
|
||||
--wd-flaeche-2: #091B2D; /* Obsidian — zweite Kartenebene */
|
||||
|
||||
/* ---------- Markenfarben als KANÄLE ----------
|
||||
Zusätzlich zu den fertigen Farben stehen die Rot-, Grün- und
|
||||
@@ -60,33 +91,62 @@
|
||||
erhalten, weil sie kürzer zu lesen sind, wo kein Alpha gebraucht
|
||||
wird — sie werden aus denselben Kanälen gebildet, können also nicht
|
||||
auseinanderlaufen. */
|
||||
--wd-blau-rgb: 127 208 232;
|
||||
--wd-lila-rgb: 183 157 255;
|
||||
--wd-gold-rgb: 232 200 119;
|
||||
--wd-ok-rgb: 111 214 163;
|
||||
--wd-fehler-rgb: 255 157 157;
|
||||
--wd-glas-rgb: 16 26 41;
|
||||
--wd-blau-rgb: 143 216 255; /* Signature Baby #8FD8FF — Hauptfarbe */
|
||||
--wd-ion-rgb: 74 200 255; /* Ion Blue #4AC8FF — Interaktion */
|
||||
--wd-aqua-rgb: 46 242 224; /* Hyper Aqua #2EF2E0 — Energie, Fokus */
|
||||
--wd-lila-rgb: 167 107 255; /* Aurora Violet #A76BFF — Spezial */
|
||||
--wd-indigo-rgb: 97 92 255; /* Prism Indigo #615CFF — Premium */
|
||||
--wd-gold-rgb: 232 195 106; /* Liquid Gold #E8C36A — VIP, Treue */
|
||||
--wd-ok-rgb: 36 214 160; /* Erfolg #24D6A0 */
|
||||
--wd-fehler-rgb: 255 92 122; /* Signal Coral #FF5C7A */
|
||||
--wd-warn-rgb: 255 190 74; /* Warnung #FFBE4A */
|
||||
--wd-chrome-rgb: 175 196 210; /* Chrome Silver #AFC4D2 — sekundaer */
|
||||
--wd-glas-rgb: 12 39 64; /* Deep Glass als Kanal fuer Glasflaechen */
|
||||
|
||||
--wd-blau: rgb(var(--wd-blau-rgb)); /* Babyblau — Hauptaktionen, Linien, Leuchten */
|
||||
--wd-blau-hell: #a9e2f2; /* Eisblau — Lesbarkeit auf dunklem Grund */
|
||||
--wd-blau-tief: #3d9dbd; /* für Ränder/Verläufe, nicht für Text */
|
||||
--wd-lila: rgb(var(--wd-lila-rgb)); /* sekundäre Bereiche, Kontrast */
|
||||
--wd-lila-tief: #7c5cd6;
|
||||
--wd-gold: rgb(var(--wd-gold-rgb)); /* NUR Hinweise & Zahlungsinformationen */
|
||||
--wd-gold-tief: #a8873a;
|
||||
--wd-blau: rgb(var(--wd-blau-rgb)); /* Hauptaktionen, Linien, Leuchten */
|
||||
--wd-blau-hell: #D6F1FF; /* Glacier Mist — aktive Flaeche, heller Text */
|
||||
--wd-blau-tief: rgb(var(--wd-ion-rgb)); /* Ion Blue — Raender, Verlaeufe */
|
||||
--wd-ion: rgb(var(--wd-ion-rgb));
|
||||
--wd-aqua: rgb(var(--wd-aqua-rgb)); /* Fokusring, Live-Zustand */
|
||||
--wd-lila: rgb(var(--wd-lila-rgb)); /* sekundaere Bereiche, Spezial */
|
||||
--wd-lila-tief: rgb(var(--wd-indigo-rgb));
|
||||
--wd-indigo: rgb(var(--wd-indigo-rgb));
|
||||
--wd-gold: rgb(var(--wd-gold-rgb)); /* NUR Hinweise, Zahlungen, VIP */
|
||||
--wd-gold-tief: #b8934a;
|
||||
--wd-chrome: rgb(var(--wd-chrome-rgb));
|
||||
|
||||
--wd-text: #eef4fb;
|
||||
--wd-text-mid: #b3c2d4;
|
||||
--wd-text-soft: #8f9fb4;
|
||||
/* ---------- Text ----------
|
||||
Gemessen gegen alle vier Grundflaechen (Void, Midnight, Obsidian,
|
||||
Deep Glass): Optic White erreicht 15.0 bis 19.8:1, Glacier 13.0 bis
|
||||
17.1:1, Chrome 8.4 bis 11.1:1. Alle drei liegen damit deutlich
|
||||
ueber den geforderten 4.5:1.
|
||||
|
||||
--wd-rand: rgb(var(--wd-blau-rgb) / .16);
|
||||
--wd-rand-stark: rgb(var(--wd-blau-rgb) / .34);
|
||||
WICHTIG -- die Grenze des Systems: Prism Indigo (#615CFF) erreicht
|
||||
auf KEINER dieser Flaechen 4.5:1 (nur 3.25 bis 4.29:1). Es ist
|
||||
deshalb ausschliesslich fuer Kanten, Verlaeufe und grosse
|
||||
Premium-Flaechen zugelassen, niemals fuer Fliesstext. Das
|
||||
Design-System sieht Indigo ohnehin nur fuer "Premium-Momente" vor
|
||||
-- die Rechnung bestaetigt also die Regel, statt ihr zu
|
||||
widersprechen. */
|
||||
--wd-text: #FBFEFF; /* Optic White — Ueberschriften, Haupttext */
|
||||
--wd-text-mid: #D6F1FF; /* Glacier Mist — zweite Ebene */
|
||||
--wd-text-soft: rgb(var(--wd-chrome-rgb)); /* Chrome — Metadaten, Hinweise */
|
||||
|
||||
/* Kachelkante: das System nennt 24-36 % Deckkraft (Seite 11). Der
|
||||
Ruhewert liegt am unteren Ende, damit eine Seite voller Karten
|
||||
nicht wie ein Gitternetz wirkt; erst Hover und Fokus gehen hoch. */
|
||||
--wd-rand: rgb(var(--wd-blau-rgb) / .24);
|
||||
--wd-rand-stark: rgb(var(--wd-blau-rgb) / .36);
|
||||
--wd-glas: rgb(var(--wd-glas-rgb) / .62);
|
||||
--wd-glas-tief: rgba(10, 18, 32, .82);
|
||||
--wd-glas-tief: rgb(6 19 35 / .86);
|
||||
|
||||
/* Statusfarben sind vom Markenblau getrennt (Token-Regel 04): Ein
|
||||
Fehler darf nicht dieselbe Farbe tragen wie eine Hauptaktion,
|
||||
sonst wird beides bedeutungslos. Jeder Status erscheint zusaetzlich
|
||||
immer mit Text -- Farbe allein reicht nie (Seite 16). */
|
||||
--wd-ok: rgb(var(--wd-ok-rgb));
|
||||
--wd-fehler: rgb(var(--wd-fehler-rgb));
|
||||
--wd-warnung: var(--wd-gold);
|
||||
--wd-warnung: rgb(var(--wd-warn-rgb));
|
||||
|
||||
/* Eine Skala mit vier Stufen: 6 / 10 / 14 / 20 -- plus 999px fuer die
|
||||
Pillenform, die keine Stufe ist, sondern eine eigene Form.
|
||||
@@ -218,7 +278,7 @@ body.wd::before {
|
||||
background:
|
||||
radial-gradient(1100px 720px at 18% -8%, rgba(61, 157, 189, .20), transparent 68%),
|
||||
radial-gradient(900px 640px at 92% 8%, rgba(124, 92, 214, .16), transparent 66%),
|
||||
linear-gradient(180deg, #070b12 0%, var(--wd-schwarz) 46%, #04060a 100%);
|
||||
linear-gradient(180deg, var(--wd-schwarz) 0%, var(--wd-schwarz) 46%, var(--wd-schwarz) 100%);
|
||||
}
|
||||
|
||||
/* Feine Rasterlinien — gibt der Fläche Struktur (Premium statt Baukasten),
|
||||
@@ -319,7 +379,7 @@ body.wd::after {
|
||||
/* Sprungmarke für Tastatur-/Screenreader-Nutzung. */
|
||||
.wd-skip {
|
||||
position: absolute; left: -9999px; top: 0; z-index: 200;
|
||||
background: var(--wd-blau); color: #04060a; font-weight: 800;
|
||||
background: var(--wd-blau); color: var(--wd-schwarz); font-weight: 800;
|
||||
padding: .8rem 1.2rem; border-radius: 0 0 10px 0;
|
||||
}
|
||||
.wd-skip:focus { left: 0; }
|
||||
@@ -478,8 +538,8 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
.wd .wd-btn--haupt, .wd-btn--haupt {
|
||||
/* Dunkler Text auf hellem Babyblau: 11.7:1 — der einzige Weg, einen
|
||||
leuchtenden Knopf zu bauen, ohne die Lesbarkeit zu opfern. */
|
||||
background: linear-gradient(135deg, var(--wd-blau-hell), var(--wd-blau) 55%, #63bcd8);
|
||||
color: #04070c;
|
||||
background: linear-gradient(135deg, var(--wd-blau-hell), var(--wd-blau) 55%, var(--wd-ion));
|
||||
color: var(--wd-schwarz);
|
||||
box-shadow: 0 12px 34px -14px rgb(var(--wd-blau-rgb) / .8);
|
||||
}
|
||||
.wd-btn--haupt:hover { box-shadow: 0 16px 44px -14px rgb(var(--wd-blau-rgb) / .95); transform: translateY(-2px); }
|
||||
@@ -752,7 +812,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
border-color: var(--wd-blau);
|
||||
background: var(--wd-blau);
|
||||
/* Häkchen als CSS-Maske — kein Bild, keine Schriftart nötig. */
|
||||
box-shadow: inset 0 0 0 3px #05070b, inset 0 0 0 20px var(--wd-blau);
|
||||
box-shadow: inset 0 0 0 3px var(--wd-schwarz), inset 0 0 0 20px var(--wd-blau);
|
||||
}
|
||||
.wd-wahl-kachel input:focus-visible + .wd-wahl-inhalt { outline: 3px solid var(--wd-blau); outline-offset: 3px; }
|
||||
.wd-wahl-titel { display: block; font-weight: 700; color: var(--wd-text); }
|
||||
@@ -875,7 +935,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
position: absolute; right: 0; top: calc(100% + .4rem);
|
||||
min-width: 190px; padding: .35rem;
|
||||
border-radius: 10px;
|
||||
background: #0b1320;
|
||||
background: var(--wd-dunkelblau);
|
||||
border: 1px solid var(--wd-rand-stark);
|
||||
box-shadow: var(--wd-schatten);
|
||||
display: none;
|
||||
@@ -899,7 +959,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
position: absolute; left: 0; right: 0; top: 100%;
|
||||
flex-direction: column; align-items: stretch; gap: .2rem;
|
||||
padding: .8rem 4vw 1.2rem;
|
||||
background: #070b12;
|
||||
background: var(--wd-schwarz);
|
||||
border-bottom: 1px solid var(--wd-rand);
|
||||
box-shadow: var(--wd-schatten);
|
||||
/* Vollbildnavigation auf dem Handy (Masterplan S.5), aber scrollbar —
|
||||
@@ -1222,7 +1282,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
color: var(--wd-blau-hell);
|
||||
border: 2px solid transparent;
|
||||
background:
|
||||
linear-gradient(#0c1523, #0c1523) padding-box,
|
||||
linear-gradient(var(--wd-dunkelblau), var(--wd-dunkelblau)) padding-box,
|
||||
linear-gradient(140deg, var(--wd-blau), var(--wd-lila)) border-box;
|
||||
box-shadow: 0 0 18px -6px rgb(var(--wd-blau-rgb) / .55);
|
||||
flex-shrink: 0;
|
||||
@@ -1248,23 +1308,23 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
.po-leer-punkt:nth-child(2)::before { background: linear-gradient(90deg, var(--wd-lila-tief), var(--wd-lila)); }
|
||||
.po-leer-punkt:nth-child(3)::before { background: linear-gradient(90deg, #2e8f6b, var(--wd-ok)); }
|
||||
.po-leer-punkt:nth-child(3)::before { background: linear-gradient(90deg, var(--wd-ok), var(--wd-ok)); }
|
||||
.po-leer-punkt:nth-child(4)::before { background: linear-gradient(90deg, var(--wd-gold-tief), var(--wd-gold)); }
|
||||
.po-leer-punkt:nth-child(2) .po-leer-nr {
|
||||
color: var(--wd-lila);
|
||||
background: linear-gradient(#0c1523, #0c1523) padding-box,
|
||||
background: linear-gradient(var(--wd-dunkelblau), var(--wd-dunkelblau)) padding-box,
|
||||
linear-gradient(140deg, var(--wd-lila), var(--wd-blau)) border-box;
|
||||
box-shadow: 0 0 18px -6px rgb(var(--wd-lila-rgb) / .55);
|
||||
}
|
||||
.po-leer-punkt:nth-child(3) .po-leer-nr {
|
||||
color: var(--wd-ok);
|
||||
background: linear-gradient(#0c1523, #0c1523) padding-box,
|
||||
background: linear-gradient(var(--wd-dunkelblau), var(--wd-dunkelblau)) padding-box,
|
||||
linear-gradient(140deg, var(--wd-ok), var(--wd-blau)) border-box;
|
||||
box-shadow: 0 0 18px -6px rgb(var(--wd-ok-rgb) / .5);
|
||||
}
|
||||
.po-leer-punkt:nth-child(4) .po-leer-nr {
|
||||
color: var(--wd-gold);
|
||||
background: linear-gradient(#0c1523, #0c1523) padding-box,
|
||||
background: linear-gradient(var(--wd-dunkelblau), var(--wd-dunkelblau)) padding-box,
|
||||
linear-gradient(140deg, var(--wd-gold), var(--wd-lila)) border-box;
|
||||
box-shadow: 0 0 18px -6px rgb(var(--wd-gold-rgb) / .5);
|
||||
}
|
||||
@@ -1295,7 +1355,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
aus — damit ging die einzige Aussage der Leiste verloren. */
|
||||
.po-phase, .po-vorschau-phasen span { height: 7px; }
|
||||
.po-phase.po-erledigt {
|
||||
background: linear-gradient(90deg, #2e8f6b, var(--wd-ok));
|
||||
background: linear-gradient(90deg, var(--wd-ok), var(--wd-ok));
|
||||
box-shadow: 0 0 8px -2px rgb(var(--wd-ok-rgb) / .5);
|
||||
}
|
||||
.po-phase.po-jetzt {
|
||||
@@ -1313,7 +1373,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
0%, 8% { background: rgb(var(--wd-blau-rgb) / .13); box-shadow: none; }
|
||||
14%, 30% { background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau));
|
||||
box-shadow: 0 0 12px -2px rgb(var(--wd-blau-rgb) / .8); }
|
||||
38%, 62% { background: linear-gradient(90deg, #2e8f6b, var(--wd-ok));
|
||||
38%, 62% { background: linear-gradient(90deg, var(--wd-ok), var(--wd-ok));
|
||||
box-shadow: 0 0 8px -2px rgb(var(--wd-ok-rgb) / .45); }
|
||||
100% { background: rgb(var(--wd-blau-rgb) / .13); box-shadow: none; }
|
||||
}
|
||||
@@ -1328,7 +1388,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
.po-legende i {
|
||||
width: 16px; height: 6px; border-radius: 999px; display: inline-block;
|
||||
}
|
||||
.po-legende .po-l-fertig { background: linear-gradient(90deg, #2e8f6b, var(--wd-ok)); }
|
||||
.po-legende .po-l-fertig { background: linear-gradient(90deg, var(--wd-ok), var(--wd-ok)); }
|
||||
.po-legende .po-l-jetzt { background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau)); }
|
||||
.po-legende .po-l-offen { background: rgb(var(--wd-blau-rgb) / .18); }
|
||||
|
||||
@@ -1378,7 +1438,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
flex-shrink: 0;
|
||||
border: 2px solid transparent;
|
||||
background:
|
||||
linear-gradient(#0d1624, #0d1624) padding-box,
|
||||
linear-gradient(var(--wd-dunkelblau-2), var(--wd-dunkelblau-2)) padding-box,
|
||||
linear-gradient(140deg, var(--wd-blau), var(--wd-lila)) border-box;
|
||||
}
|
||||
/* Die Ziffer selbst noch einmal optisch ausrichten: Zahlen haben oben
|
||||
@@ -1399,15 +1459,15 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
--wd-p4: var(--wd-gold); /* Abschluss — Abnahme, Übergabe */
|
||||
}
|
||||
|
||||
.po-leer-punkt:nth-child(1)::before { background: linear-gradient(90deg, #3d9dbd, var(--wd-p1)); }
|
||||
.po-leer-punkt:nth-child(2)::before { background: linear-gradient(90deg, #7c5cd6, var(--wd-p2)); }
|
||||
.po-leer-punkt:nth-child(3)::before { background: linear-gradient(90deg, #2e8f6b, var(--wd-p3)); }
|
||||
.po-leer-punkt:nth-child(4)::before { background: linear-gradient(90deg, #a8873a, var(--wd-p4)); }
|
||||
.po-leer-punkt:nth-child(1)::before { background: linear-gradient(90deg, var(--wd-ion), var(--wd-p1)); }
|
||||
.po-leer-punkt:nth-child(2)::before { background: linear-gradient(90deg, var(--wd-indigo), var(--wd-p2)); }
|
||||
.po-leer-punkt:nth-child(3)::before { background: linear-gradient(90deg, var(--wd-ok), var(--wd-p3)); }
|
||||
.po-leer-punkt:nth-child(4)::before { background: linear-gradient(90deg, var(--wd-gold-tief), var(--wd-p4)); }
|
||||
|
||||
.po-leer-punkt:nth-child(1) .po-leer-nr { color: var(--wd-p1); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p1), #3d9dbd) border-box; box-shadow: 0 0 20px -7px var(--wd-p1); }
|
||||
.po-leer-punkt:nth-child(2) .po-leer-nr { color: var(--wd-p2); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p2), #7c5cd6) border-box; box-shadow: 0 0 20px -7px var(--wd-p2); }
|
||||
.po-leer-punkt:nth-child(3) .po-leer-nr { color: var(--wd-p3); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p3), #2e8f6b) border-box; box-shadow: 0 0 20px -7px var(--wd-p3); }
|
||||
.po-leer-punkt:nth-child(4) .po-leer-nr { color: var(--wd-p4); background: linear-gradient(#0d1624,#0d1624) padding-box, linear-gradient(140deg, var(--wd-p4), #a8873a) border-box; box-shadow: 0 0 20px -7px var(--wd-p4); }
|
||||
.po-leer-punkt:nth-child(1) .po-leer-nr { color: var(--wd-p1); background: linear-gradient(var(--wd-dunkelblau-2),var(--wd-dunkelblau-2)) padding-box, linear-gradient(140deg, var(--wd-p1), var(--wd-ion)) border-box; box-shadow: 0 0 20px -7px var(--wd-p1); }
|
||||
.po-leer-punkt:nth-child(2) .po-leer-nr { color: var(--wd-p2); background: linear-gradient(var(--wd-dunkelblau-2),var(--wd-dunkelblau-2)) padding-box, linear-gradient(140deg, var(--wd-p2), var(--wd-indigo)) border-box; box-shadow: 0 0 20px -7px var(--wd-p2); }
|
||||
.po-leer-punkt:nth-child(3) .po-leer-nr { color: var(--wd-p3); background: linear-gradient(var(--wd-dunkelblau-2),var(--wd-dunkelblau-2)) padding-box, linear-gradient(140deg, var(--wd-p3), var(--wd-ok)) border-box; box-shadow: 0 0 20px -7px var(--wd-p3); }
|
||||
.po-leer-punkt:nth-child(4) .po-leer-nr { color: var(--wd-p4); background: linear-gradient(var(--wd-dunkelblau-2),var(--wd-dunkelblau-2)) padding-box, linear-gradient(140deg, var(--wd-p4), var(--wd-gold-tief)) border-box; box-shadow: 0 0 20px -7px var(--wd-p4); }
|
||||
|
||||
/* ---------- Die Phasenleiste spricht dieselbe Sprache ----------
|
||||
Erledigte Phasen tragen die Farbe IHRES Abschnitts, nicht pauschal
|
||||
@@ -1562,7 +1622,7 @@ a.wd-karte:hover, .wd-karte--klickbar:hover {
|
||||
button.po-aufg-haken { cursor: pointer; }
|
||||
button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgb(var(--wd-gold-rgb) / .1); }
|
||||
.po-aufg-haken--fest { cursor: default; }
|
||||
.po-aufg--fertig .po-aufg-haken { background: var(--wd-ok); border-color: var(--wd-ok); color: #06120c; }
|
||||
.po-aufg--fertig .po-aufg-haken { background: var(--wd-ok); border-color: var(--wd-ok); color: var(--wd-schwarz); }
|
||||
.po-aufg--jetzt .po-aufg-haken { border-color: var(--wd-p2); color: var(--wd-p2); }
|
||||
.po-aufg--weg .po-aufg-haken { border-style: dashed; color: var(--wd-text-soft); }
|
||||
/* Offene EIGENE Punkte: der Rand ist golden, damit klar ist, dass hier
|
||||
@@ -2062,9 +2122,34 @@ a.wd-karte:active, .wd-karte--klickbar:active {
|
||||
Zeigerbewegung schon überfahren wird. */
|
||||
--wd-lichtx: 50%;
|
||||
--wd-lichty: 0%;
|
||||
|
||||
/* DIE LICHTFARBE STEHT JETZT AN DER KACHEL, NICHT IN DER REGEL.
|
||||
|
||||
Vorher war die Farbe im Lichtverlauf fest verdrahtet, und fuer
|
||||
jede weitere Kachelfarbe brauchte es einen kompletten zweiten
|
||||
Block -- einmal fuer die Flaeche, einmal fuer die leuchtende
|
||||
Kante. Bei zwei Farben ging das gerade noch; das CRYONOVA-System
|
||||
kennt sechs Lumen-Rollen (Baby, Aqua, Indigo, Violet, Gold,
|
||||
Coral). Das waeren zwoelf fast gleiche Bloecke gewesen, die beim
|
||||
naechsten Feinschliff zwangslaeufig auseinanderlaufen.
|
||||
|
||||
Jetzt setzt die Kachel nur noch ihre Farbe; der Verlauf wird
|
||||
einmal beschrieben. Genau das meint das Design-System mit
|
||||
"Kachelfarbe steuert Lumenfarbe" (Token-Regel 02). */
|
||||
--wd-lumen: var(--wd-blau-rgb);
|
||||
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/* Die sechs Lumen-Rollen aus dem System (Seite 9).
|
||||
Mehr braucht es nicht -- jede weitere Farbe waere Dekoration und
|
||||
wuerde die Bedeutung der bestehenden verwaessern. */
|
||||
.wd-karte--lila { --wd-lumen: var(--wd-lila-rgb); }
|
||||
.wd-karte--aqua { --wd-lumen: var(--wd-aqua-rgb); }
|
||||
.wd-karte--premium { --wd-lumen: var(--wd-indigo-rgb); }
|
||||
.wd-karte--vip { --wd-lumen: var(--wd-gold-rgb); }
|
||||
.wd-karte--kritisch { --wd-lumen: var(--wd-fehler-rgb); }
|
||||
|
||||
.wd-karte::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -2073,23 +2158,22 @@ a.wd-karte:active, .wd-karte--klickbar:active {
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
transition: opacity .28s ease;
|
||||
/* Ausblenden ruhiger als Einblenden -- das System nennt 120-180 ms
|
||||
hinein und 240-360 ms hinaus (Seite 10). Der Unterschied ist der
|
||||
Grund, warum sich Licht wie Licht anfuehlt und nicht wie ein
|
||||
Schalter. */
|
||||
transition: opacity .30s ease;
|
||||
background: radial-gradient(
|
||||
380px circle at var(--wd-lichtx) var(--wd-lichty),
|
||||
rgb(var(--wd-blau-rgb) / .22),
|
||||
rgb(var(--wd-blau-rgb) / .08) 38%,
|
||||
220px circle at var(--wd-lichtx) var(--wd-lichty),
|
||||
rgb(var(--wd-lumen) / .28),
|
||||
rgb(var(--wd-lumen) / .10) 40%,
|
||||
transparent 70%
|
||||
);
|
||||
}
|
||||
.wd-karte--lila::after {
|
||||
background: radial-gradient(
|
||||
380px circle at var(--wd-lichtx) var(--wd-lichty),
|
||||
rgb(var(--wd-lila-rgb) / .24),
|
||||
rgb(var(--wd-lila-rgb) / .08) 38%,
|
||||
transparent 70%
|
||||
);
|
||||
.wd-karte:hover::after {
|
||||
opacity: 1;
|
||||
transition-duration: .15s;
|
||||
}
|
||||
.wd-karte:hover::after { opacity: 1; }
|
||||
|
||||
/* DER RAND LEUCHTET MIT — und das ist der Teil, der auffällt.
|
||||
|
||||
@@ -2105,21 +2189,16 @@ a.wd-karte:active, .wd-karte--klickbar:active {
|
||||
wirkt die ganze Kachel beleuchtet.
|
||||
|
||||
Die Fläche bleibt unverändert — sonst würde der Text flackern. */
|
||||
/* Auch die Kante folgt jetzt der Kachelfarbe -- eine Regel statt
|
||||
einer je Farbe. Die Flaeche (padding-box) bleibt dabei
|
||||
unveraendert; wuerde sie mitleuchten, flackerte der Text darauf. */
|
||||
.wd-karte:hover {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(20, 32, 50, .72), rgba(9, 15, 26, .86)) padding-box,
|
||||
linear-gradient(180deg, rgb(12 39 64 / .78), rgb(6 19 35 / .90)) padding-box,
|
||||
radial-gradient(240px circle at var(--wd-lichtx) var(--wd-lichty),
|
||||
rgb(var(--wd-blau-rgb) / .95),
|
||||
rgb(var(--wd-blau-rgb) / .30) 42%,
|
||||
rgb(var(--wd-lila-rgb) / .28) 100%) border-box;
|
||||
}
|
||||
.wd-karte--lila:hover {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(26, 22, 48, .72), rgba(12, 10, 24, .88)) padding-box,
|
||||
radial-gradient(240px circle at var(--wd-lichtx) var(--wd-lichty),
|
||||
rgb(var(--wd-lila-rgb) / .95),
|
||||
rgb(var(--wd-lila-rgb) / .30) 42%,
|
||||
rgb(var(--wd-blau-rgb) / .26) 100%) border-box;
|
||||
rgb(var(--wd-lumen) / .95),
|
||||
rgb(var(--wd-lumen) / .30) 42%,
|
||||
rgb(var(--wd-lumen) / .12) 100%) border-box;
|
||||
}
|
||||
|
||||
/* Der Inhalt muss ÜBER dem Lichtfleck liegen.
|
||||
|
||||
Reference in New Issue
Block a user