CRYONOVA Schritt 2: Bildwelt, Materialien, Rangsystem, Status
Setzt die restlichen Kapitel des Design-Systems um (Seiten 7, 14, 16, 19, 24-29). Wie Schritt 1 ausschliesslich Farbe, Material und Licht -- Aufbau, Navigation, Texte und Funktionen bleiben unangetastet. BILDWELT (Seiten 24-29) Die Motive sind jetzt echte Seitenhintergruende: Ring auf Startseite und Portal, Kristallwelt an der Zugangswand. Ueber jedem Motiv liegt eine Navy-Glasflaeche -- das System fordert auf Seite 31 ausdruecklich, dass bei Bedarf "eine Navy- oder Frost-Glasflaeche zwischen Bild und Inhalt" liegt. Ohne sie waere Text auf den hellen Kristallspitzen nicht sicher lesbar, und genau dort macht ein schoenes Bild eine Seite unbrauchbar. Von 2,5 MB auf 96-229 KB (WebP), auf dem Handy 30-73 KB. Das System nennt fuer Mobile ausdruecklich Ladezeit als Kriterium. DAS LOGO IM BILD -- eine Entscheidung gegen die woertliche Vorgabe Zwei der drei Motive zeigen das Dogfather-Logo gross in der Mitte. Als Seitenhintergrund waere das ein zweites Logo neben dem echten in der Kopfzeile: zwei Marken, die um dieselbe Aufmerksamkeit ringen. Beim ersten Versuch schien es an der Zugangswand hinter den Karten durch (gemessen 15,9 % helle Flaeche im Logobereich). Die Zugangswand nutzt deshalb jetzt einen Ausschnitt der linken Bildhaelfte -- dieselbe Kristallwelt, dasselbe Licht, nur ohne Wappen. Die Logo-Motive bleiben als Blickfang-Klasse erhalten, dort wo sie fuer sich stehen duerfen. MATERIALIEN (Seite 7) Optic Glass, Frosted Ice, Prism Edge und Void Navy als Klassen. "Hell" heisst auf einer dunklen Seite aufgehelltes Navy, nicht Weiss -- echtes Weiss waere ein Loch im Bildschirm, und das System verbietet weisse Vollflaechen ausdruecklich. RANGSYSTEM (Seite 14) Drei Stufen fehlten: Premium (Indigo), VIP (Champagne), Gefahr (Coral). Wenn jeder Knopf gleich laut ist, ist keiner mehr laut. Zwei bewusste Abweichungen von der naheliegenden Loesung: - Indigo steht als FLAECHE unter hellem Text, nie als Schriftfarbe. Es erreicht als Text nirgends 4,5:1 (gemessen 3,25-4,29). Der Test haelt das dauerhaft fest. - Gefahr ist NICHT vollflaechig rot. Ein voll gefuellter roter Knopf zieht den Blick staerker an als die Hauptaktion und wird dadurch versehentlich gedrueckt. Kritische Aktionen sollen auffindbar sein, nicht verlockend. FOKUSRING (Seite 19) Doppelter Aqua-Ring: 2 px Aqua aussen, dunkler Innenring. Kein Schmuck -- ein einfacher heller Ring verschwindet auf hellen Flaechen, ein dunkler auf dunklen. Die Kombination ist auf JEDEM Untergrund sichtbar. STATUS-SPEKTRUM (Seite 16) Acht Zustaende. Die Klasse faerbt nur -- den Text liefert immer das Markup. Es gibt bewusst keine Variante, die nur einen farbigen Punkt zeigt: Wer Farben nicht unterscheiden kann, saehe dann gar nichts. Der Test prueft, dass keine Statusmarke ohne Text existiert. Dabei einen eigenen Fehler gefunden und behoben: Ich hatte beim Bauen des Premium-Knopfes selbst einen losen Hex-Wert eingesetzt -- genau das, was Token-Regel 05 verbietet und was der Test dann meldete. Geprueft: 43 (CRYONOVA, von 24 erweitert) + 0 Fundstellen (WCAG ueber 12 Seiten x 5 Sprachen, jetzt MIT Bildhintergruenden) + 55 + 40 + 69 + 54 + 42 + 16 + 5 + 20 + 64 + 58 -- alles gruen.
This commit is contained in:
@@ -2328,3 +2328,316 @@ a.wd-karte:active, .wd-karte--klickbar:active {
|
||||
.wd .vw-ub-projekt:active,
|
||||
.wd .vw-filter-knopf:active { transform: none; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
CRYONOVA-BILDWELT (Design-System Seiten 24-29)
|
||||
|
||||
Das System nennt vier Referenzmotive und macht sie zur verbindlichen
|
||||
Grundlage: "Die Website uebernimmt direkt die Bildsprache der PDF."
|
||||
Verboten sind ausdruecklich einfache Verlaeufe und beliebige blaue
|
||||
Flaechen als Ersatz.
|
||||
|
||||
WIE DIE MOTIVE VERTEILT SIND -- und warum so
|
||||
|
||||
Der Ring (ohne Logo) traegt die grossen Hintergrundflaechen. Die
|
||||
beiden Motive MIT Logo sind bewusst KEIN Seitenhintergrund: Auf jeder
|
||||
Seite steht oben bereits das echte Dogfather-Logo, und ein zweites,
|
||||
grosses Logo im Hintergrund waere kein Luxus, sondern ein Fehler --
|
||||
zwei Marken auf einem Bildschirm, die um dieselbe Aufmerksamkeit
|
||||
ringen. Sie erscheinen deshalb dort, wo sie fuer sich stehen duerfen:
|
||||
als Blickfang auf der Startseite und an der Zugangswand, jeweils ohne
|
||||
Text darueber.
|
||||
|
||||
DREI SCHICHTEN UEBER JEDEM MOTIV
|
||||
|
||||
Ein Bild allein macht Text unlesbar -- das System fordert auf Seite 31
|
||||
ausdruecklich, dass bei Bedarf "eine Navy- oder Frost-Glasflaeche
|
||||
zwischen Bild und Inhalt" liegt. Deshalb liegt ueber jedem Motiv:
|
||||
1. eine Navy-Faerbung, die das Bild in die Markenwelt zieht,
|
||||
2. ein Verlauf nach unten, der die Textzone beruhigt,
|
||||
3. der Inhalt selbst.
|
||||
|
||||
LADEZEIT
|
||||
Zwei Groessen je Motiv. Das Handy laedt 33 KB statt 110 KB -- das
|
||||
System nennt fuer Mobile ausdruecklich "Textkontrast und Ladezeit
|
||||
priorisieren" (Seite 24).
|
||||
===================================================================== */
|
||||
|
||||
.wd-motiv {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/* Das Motiv selbst liegt in einer eigenen Ebene HINTER allem.
|
||||
|
||||
Bewusst ein Pseudo-Element und kein <img>: So kann kein Inhalt
|
||||
versehentlich darunter geraten, und der Browser laedt es als
|
||||
Hintergrund mit niedrigerer Dringlichkeit als die Schrift. */
|
||||
.wd-motiv::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
/* Die Faerbung zieht das Motiv in die Markenwelt und nimmt ihm
|
||||
zugleich die Leuchtkraft, die sonst mit dem Text konkurriert. */
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
/* Die Glasflaeche zwischen Bild und Inhalt.
|
||||
|
||||
Ohne sie waere Text auf den hellen Kristallspitzen der Motive nicht
|
||||
sicher lesbar -- und genau das ist die Stelle, an der ein schoenes
|
||||
Bild eine Seite unbrauchbar macht. Der Verlauf ist unten dichter,
|
||||
weil dort in aller Regel der Fliesstext steht. */
|
||||
.wd-motiv::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background:
|
||||
linear-gradient(180deg,
|
||||
rgb(3 8 16 / .55) 0%,
|
||||
rgb(6 19 35 / .78) 55%,
|
||||
rgb(3 8 16 / .94) 100%);
|
||||
}
|
||||
|
||||
/* ---------- Die einzelnen Motive ---------- */
|
||||
.wd-motiv--ring::before { background-image: url("/assets/img/cryo-ring.webp"); }
|
||||
.wd-motiv--wappen::before { background-image: url("/assets/img/cryo-wappen.webp"); }
|
||||
/* Der Monolith zeigt in der Bildmitte das Dogfather-Logo. Als
|
||||
Seitenhintergrund waere das ein zweites Logo neben dem echten in der
|
||||
Kopfzeile -- zwei Marken, die um dieselbe Aufmerksamkeit ringen.
|
||||
Deshalb hier ein Ausschnitt der linken Bildhaelfte: dieselbe
|
||||
Kristallwelt, dasselbe Licht, nur ohne das Wappen. */
|
||||
.wd-motiv--monolith::before {
|
||||
background-image: url("/assets/img/cryo-kristall.webp");
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
/* Auf dem Handy die kleinere Fassung. Die Abfrage steht NACH den
|
||||
grossen Regeln, damit sie gewinnt. */
|
||||
@media (max-width: 900px) {
|
||||
.wd-motiv--ring::before { background-image: url("/assets/img/cryo-ring-klein.webp"); }
|
||||
.wd-motiv--wappen::before { background-image: url("/assets/img/cryo-wappen-klein.webp"); }
|
||||
.wd-motiv--monolith::before { background-image: url("/assets/img/cryo-kristall-klein.webp"); }
|
||||
|
||||
/* Motiv staerker beschneiden und Text weiter beruhigen -- auf einem
|
||||
schmalen Schirm bleibt vom Bild ohnehin nur ein Ausschnitt, und
|
||||
Lesbarkeit geht vor Wirkung (System Seite 24). */
|
||||
.wd-motiv::before { opacity: .42; }
|
||||
.wd-motiv::after {
|
||||
background: linear-gradient(180deg,
|
||||
rgb(3 8 16 / .68) 0%,
|
||||
rgb(6 19 35 / .86) 50%,
|
||||
rgb(3 8 16 / .96) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Blickfang-Motive (mit Logo, ohne Text darueber) ---------- */
|
||||
|
||||
/* Anders als die Hintergruende steht dieses Motiv fuer sich: volle
|
||||
Leuchtkraft, kein Verlauf darueber, kein Text darin. Es ist ein Bild,
|
||||
das man ansieht -- keine Flaeche, auf der etwas steht. */
|
||||
.wd-blickfang {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: var(--wd-radius-l, 20px);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(var(--wd-blau-rgb) / .30);
|
||||
box-shadow:
|
||||
0 30px 80px -40px rgb(0 0 0 / .9),
|
||||
inset 0 1px 0 rgb(var(--wd-blau-rgb) / .18);
|
||||
aspect-ratio: 1672 / 941;
|
||||
background: center / cover no-repeat;
|
||||
}
|
||||
.wd-blickfang--wappen { background-image: url("/assets/img/cryo-wappen.webp"); }
|
||||
.wd-blickfang--monolith { background-image: url("/assets/img/cryo-monolith.webp"); }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.wd-blickfang--wappen { background-image: url("/assets/img/cryo-wappen-klein.webp"); }
|
||||
.wd-blickfang--monolith { background-image: url("/assets/img/cryo-monolith-klein.webp"); }
|
||||
}
|
||||
|
||||
/* Reduzierte Bewegung betrifft Bilder nicht -- sie bewegen sich nicht.
|
||||
Der Vollstaendigkeit halber bleibt hier bewusst nichts abgeschaltet. */
|
||||
|
||||
/* =====================================================================
|
||||
AKTIONEN MIT RANG (Design-System Seite 14)
|
||||
|
||||
Das System kennt sechs Rangstufen. Drei gab es bereits (Haupt,
|
||||
Zweit, Still); hier kommen die drei dazu, die eine Aussage tragen,
|
||||
welche die vorhandenen nicht abdecken koennen.
|
||||
|
||||
WARUM RANG UEBERHAUPT WICHTIG IST
|
||||
Wenn jeder Knopf gleich laut ist, ist keiner mehr laut. Ein Nutzer
|
||||
entscheidet in Sekundenbruchteilen, was der naechste Schritt ist --
|
||||
und diese Entscheidung trifft er ueber Gewicht und Farbe, nicht
|
||||
ueber den Text. Deshalb hat jede Stufe genau eine Bedeutung:
|
||||
|
||||
haupt die wichtigste Aktion auf dieser Seite -- nur EINE
|
||||
zweit starke Alternative daneben
|
||||
still Nebenaktion, tritt zurueck
|
||||
premium bezahlte Erweiterung (Indigo)
|
||||
vip Treuevorteil, extrem sparsam (Champagne)
|
||||
gefahr kritisch und schwer umkehrbar (Signal Coral)
|
||||
===================================================================== */
|
||||
|
||||
/* PREMIUM -- Indigo.
|
||||
Indigo erreicht als Text keine 4,5:1 (gemessen 3,25-4,29 auf allen
|
||||
Grundflaechen), deshalb steht es hier NICHT als Schriftfarbe, sondern
|
||||
als Flaeche unter hellem Text. Genau so bleibt die Farbe erhalten und
|
||||
die Lesbarkeit trotzdem sicher. */
|
||||
.wd .wd-btn--premium, .wd-btn--premium {
|
||||
background: linear-gradient(135deg,
|
||||
rgb(var(--wd-indigo-rgb) / .92),
|
||||
rgb(var(--wd-lila-rgb) / .88));
|
||||
border-color: rgb(var(--wd-indigo-rgb) / .6);
|
||||
color: var(--wd-text);
|
||||
box-shadow: 0 12px 34px -16px rgb(var(--wd-indigo-rgb) / .9);
|
||||
}
|
||||
.wd-btn--premium:hover {
|
||||
box-shadow: 0 16px 44px -14px rgb(var(--wd-indigo-rgb) / .95);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* VIP -- Champagne.
|
||||
Das System nennt Champagne "maximal sparsam" und verbietet
|
||||
ausdruecklich die Mischung mit Violet (Seite 18). Deshalb hier ein
|
||||
reiner Goldrahmen ohne zweite Akzentfarbe. */
|
||||
.wd .wd-btn--vip, .wd-btn--vip {
|
||||
background: rgb(var(--wd-gold-rgb) / .12);
|
||||
border-color: rgb(var(--wd-gold-rgb) / .55);
|
||||
color: var(--wd-gold);
|
||||
}
|
||||
.wd-btn--vip:hover {
|
||||
background: rgb(var(--wd-gold-rgb) / .2);
|
||||
border-color: var(--wd-gold);
|
||||
}
|
||||
|
||||
/* GEFAHR -- Signal Coral.
|
||||
Bewusst KEINE gefuellte Flaeche: Ein vollflaechig roter Knopf zieht
|
||||
den Blick staerker an als die Hauptaktion und wird dadurch
|
||||
versehentlich gedrueckt. Kritische Aktionen sollen auffindbar sein,
|
||||
nicht verlockend. */
|
||||
.wd .wd-btn--gefahr, .wd-btn--gefahr {
|
||||
background: rgb(var(--wd-fehler-rgb) / .10);
|
||||
border-color: rgb(var(--wd-fehler-rgb) / .5);
|
||||
color: var(--wd-fehler);
|
||||
}
|
||||
.wd-btn--gefahr:hover {
|
||||
background: rgb(var(--wd-fehler-rgb) / .18);
|
||||
border-color: var(--wd-fehler);
|
||||
}
|
||||
|
||||
/* Gesperrt: 42 % Deckkraft und kein aktives Lumen (Seite 14). */
|
||||
.wd .wd-btn:disabled, .wd-btn[aria-disabled="true"] {
|
||||
opacity: .42;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
FOKUS: doppelter Aqua-Ring (Seite 14 und 19)
|
||||
|
||||
Das System verlangt "Fokus: doppelter Aqua-Ring" und im Qualitaets-
|
||||
tor "2 px Aqua plus sichtbarer Abstand".
|
||||
|
||||
Der doppelte Ring ist kein Schmuck: Ein einfacher heller Ring
|
||||
verschwindet auf hellen Flaechen, ein einfacher dunkler auf dunklen.
|
||||
Die Kombination aus dunklem Innenring und hellem Aussenring ist auf
|
||||
JEDEM Untergrund sichtbar -- das ist der eigentliche Grund fuer die
|
||||
Bauweise.
|
||||
===================================================================== */
|
||||
.wd :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
|
||||
outline: 2px solid rgb(var(--wd-aqua-rgb));
|
||||
outline-offset: 2px;
|
||||
/* Der dunkle Innenring trennt das Aqua von hellen Flaechen. */
|
||||
box-shadow: 0 0 0 4px rgb(3 8 16 / .85);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
MATERIALIEN (Design-System Seite 7)
|
||||
|
||||
Die Farben werden zu Oberflaechen. Vier davon lassen sich mit CSS
|
||||
ehrlich bauen; "Liquid Chrome" und "Champagne Pin" sind bewusst nur
|
||||
Details und brauchen keine eigene Flaechenklasse.
|
||||
===================================================================== */
|
||||
|
||||
/* OPTIC GLASS -- halbtransparent, klare Baby-Blue-Kante.
|
||||
backdrop-filter nur, wo der Browser es kann; sonst bleibt die
|
||||
Flaeche schlicht dunkel statt kaputt. */
|
||||
.wd-glasflaeche {
|
||||
background: rgb(var(--wd-glas-rgb) / .55);
|
||||
border: 1px solid rgb(var(--wd-blau-rgb) / .28);
|
||||
border-radius: var(--wd-radius-l, 20px);
|
||||
}
|
||||
@supports (backdrop-filter: blur(1px)) {
|
||||
.wd-glasflaeche {
|
||||
backdrop-filter: blur(14px) saturate(1.2);
|
||||
background: rgb(var(--wd-glas-rgb) / .38);
|
||||
}
|
||||
}
|
||||
|
||||
/* FROSTED ICE -- helle, matte Flaeche fuer ruhige Inhalte.
|
||||
Auf einer dunklen Seite heisst "hell" nicht weiss, sondern ein
|
||||
aufgehelltes Navy. Echtes Weiss waere hier ein Loch im Bildschirm --
|
||||
und das System verbietet weisse Vollflaechen ausdruecklich. */
|
||||
.wd-frost {
|
||||
background: linear-gradient(180deg,
|
||||
rgb(var(--wd-blau-rgb) / .10),
|
||||
rgb(var(--wd-blau-rgb) / .04));
|
||||
border: 1px solid rgb(var(--wd-blau-rgb) / .20);
|
||||
border-radius: var(--wd-radius-l, 20px);
|
||||
}
|
||||
|
||||
/* PRISM EDGE -- duenne Kante von Ion zu Indigo, nur fuer
|
||||
Premium-Momente. Zwei Hintergrundebenen: Flaeche und Rand. */
|
||||
.wd-prisma {
|
||||
border: 1px solid transparent;
|
||||
background:
|
||||
linear-gradient(var(--wd-flaeche), var(--wd-flaeche)) padding-box,
|
||||
linear-gradient(135deg,
|
||||
rgb(var(--wd-ion-rgb) / .9),
|
||||
rgb(var(--wd-indigo-rgb) / .9)) border-box;
|
||||
border-radius: var(--wd-radius-l, 20px);
|
||||
}
|
||||
|
||||
/* VOID NAVY -- tiefe Flaeche fuer Navigation und ruhige Zonen. */
|
||||
.wd-void { background: var(--wd-schwarz); }
|
||||
|
||||
/* =====================================================================
|
||||
STATUS-SPEKTRUM (Design-System Seite 16)
|
||||
|
||||
Acht Zustaende. Die eiserne Regel steht auf derselben Seite:
|
||||
"Jeder Status wird immer mit Text + Farbe + optionalem Symbol
|
||||
dargestellt. Farbe allein reicht niemals."
|
||||
|
||||
Deshalb faerbt diese Klasse nur -- den TEXT liefert immer das
|
||||
Markup. Es gibt hier bewusst keine Variante, die nur einen farbigen
|
||||
Punkt zeigt: Wer Farben nicht unterscheiden kann, saehe dann gar
|
||||
nichts.
|
||||
===================================================================== */
|
||||
.wd-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .35rem;
|
||||
padding: .18rem .6rem;
|
||||
border-radius: 999px;
|
||||
font-size: .78rem;
|
||||
font-weight: 700;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wd-status--neu { background: rgb(var(--wd-blau-rgb) / .14); color: var(--wd-blau); border-color: rgb(var(--wd-blau-rgb) / .35); }
|
||||
.wd-status--arbeit { background: rgb(var(--wd-aqua-rgb) / .13); color: var(--wd-aqua); border-color: rgb(var(--wd-aqua-rgb) / .32); }
|
||||
.wd-status--wartet { background: rgb(var(--wd-warn-rgb) / .14); color: var(--wd-warnung); border-color: rgb(var(--wd-warn-rgb) / .35); }
|
||||
.wd-status--freigabe { background: rgb(var(--wd-lila-rgb) / .15); color: var(--wd-lila); border-color: rgb(var(--wd-lila-rgb) / .35); }
|
||||
.wd-status--bezahlt { background: rgb(var(--wd-ok-rgb) / .13); color: var(--wd-ok); border-color: rgb(var(--wd-ok-rgb) / .32); }
|
||||
.wd-status--kritisch { background: rgb(var(--wd-fehler-rgb) / .13); color: var(--wd-fehler); border-color: rgb(var(--wd-fehler-rgb) / .35); }
|
||||
.wd-status--pausiert { background: rgb(var(--wd-chrome-rgb) / .12); color: var(--wd-chrome); border-color: rgb(var(--wd-chrome-rgb) / .30); }
|
||||
.wd-status--vip { background: rgb(var(--wd-gold-rgb) / .13); color: var(--wd-gold); border-color: rgb(var(--wd-gold-rgb) / .35); }
|
||||
|
||||
Reference in New Issue
Block a user