/* ========================================================================= tokens.css — Die EINZIGE Quelle fuer Design-Entscheidungen. ------------------------------------------------------------------------- REGEL: Kein anderes Stylesheet enthaelt einen Hexwert, eine rgba()-Angabe, einen Schattenwert, einen Radius oder eine Dauer. Alles wird hier genau einmal definiert und ueberall nur noch referenziert. ========================================================================= */ :root { /* --- Palette (Coolors-Vorgabe) --------------------------------------- */ --palette-indigo: #141B41; /* Space Indigo — 16,9:1 auf Weiss */ --palette-ozean: #306BAC; /* Ocean Deep — 5,6:1 auf Weiss */ --palette-kornblume: #6F9CEB; /* Cornflower Blue — NIE Text */ --palette-eisblau: #98B9F2; /* Baby Blue Ice — NIE Text */ --palette-perlblau: #918EF4; /* Soft Periwinkle — NIE Text */ --palette-weiss: #FFFFFF; /* --- Rollen (hier wird gedreht, nicht an der Palette) ----------------- */ --grund: var(--palette-weiss); --grund-gedaempft: color-mix(in srgb, var(--palette-eisblau) 14%, var(--palette-weiss)); --text: var(--palette-indigo); /* Gedaempfter Text. 68 % waren zu hell: auf dem hellen Bildgrund der Hero kam die Unterzeile auf 4,50:1 — exakt auf der AA-Schwelle, ohne jeden Spielraum. 78 % liefern dort 6,3:1. */ --text-leise: color-mix(in srgb, var(--palette-indigo) 78%, var(--palette-weiss)); --akzent: var(--palette-ozean); --akzent-hell: var(--palette-kornblume); --akzent-tief: color-mix(in srgb, var(--palette-ozean) 82%, var(--palette-indigo)); --linie: color-mix(in srgb, var(--palette-indigo) 14%, transparent); --linie-stark: color-mix(in srgb, var(--palette-indigo) 28%, transparent); /* Der Schleier der Kopfzeile beim Scrollen — Reys Befund vom 25.08.: "nicht genug Blur und zu viel Transparenz, da ueberlappt dann Logo und Titel unschoen." GEMESSEN, nicht geschaetzt: Der Titel traegt #283a3b. Hinter 82 Prozent Weiss blieben davon 18 Prozent stehen, hinter 98 Prozent noch rund vier von 255 Helligkeitsstufen — schwach, aber genau an der Stelle, an der die Wortmarke steht, und dort faellt es auf. Deshalb ganz dicht. WAS DAS KOSTET, damit es niemand fuer ein Versehen haelt: Die Kopfzeile ist im gescrollten Zustand nicht mehr durchscheinend. Sobald spaeter Bilder darunter durchlaufen, ist zu entscheiden, ob sie das bleiben soll — dann waere ein Rest Transparenz plus die Unschaerfe die schoenere Loesung, und ein Hauch von dem, was darunter liegt, der Preis dafuer. Das ist Reys Entscheidung, nicht meine. Die Unschaerfe bleibt stehen: Sie kostet nichts und traegt den Uebergang, waehrend der Schleier aufzieht. */ --schleier: var(--palette-weiss); --schleier-blick: blur(24px) saturate(1.8); --fokus: var(--palette-ozean); /* Rollen fuer dunkle Flaechen (Pillen in Navigation und Wortmarke). Auf Indigo tragen die hellen Blautoene sehr wohl als Schrift — die Regel "nie Text" gilt fuer helle Untergruende. Gemessen: Weiss auf Indigo 16,6:1, Kornblume auf Indigo 5,5:1. */ --pille: var(--palette-indigo); --auf-pille: var(--palette-weiss); --auf-pille-akzent: var(--palette-kornblume); /* HINWEIS zur Vorgeschichte: Solange der Titel ueber der ganzfigurigen Aufnahme stand, musste er Ozean tragen — Indigo fiel auf der dunklen Hose auf 1,1:1. Im Zweiteiler steht er auf der leeren, hellen linken Bildhaelfte, dort traegt Indigo mit Abstand am besten. Deshalb gibt es hier keine Sonderfarbe mehr, der Titel nimmt --text. */ /* --- Typografie ------------------------------------------------------- */ /* Archivo, variabel, selbst gehostet — siehe css/schrift.css. Der System-Stack bleibt als Ersatz dahinter, falls die Datei fehlt. */ --schrift-familie: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --gewicht-normal: 400; --gewicht-mittel: 500; --gewicht-fett: 700; --gewicht-schwer: 800; /* Fliessende Groessen — Basis 1920x1080, nach unten und oben tragfaehig */ --schrift-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem); --schrift-s: clamp(0.875rem, 0.84rem + 0.18vw, 1rem); --schrift-m: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem); --schrift-l: clamp(1.125rem, 1rem + 0.6vw, 1.625rem); --schrift-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.75rem); /* Zwischen l und xl. Gebraucht, seit die Highlights zu dritt in einer Reihe stehen: In einer 514 px breiten Spalte bleiben nach Polsterung und Bildmarke rund 290 px fuer den Titel, und "Prozessautomatisierung" misst bei 44 px allein schon 490. */ --schrift-karte: clamp(1.0625rem, 0.85rem + 0.75vw, 1.5rem); --schrift-xxl: clamp(2rem, 1.4rem + 2.8vw, 4.5rem); /* Der Seitentitel im Portfolio. Zwischen xl und xxl. */ --schrift-seitentitel: clamp(1.75rem, 1.25rem + 2.1vw, 3.5rem); /* Hero-Titel. Die Groesse haengt an der laengsten Zeile des Dreiklangs ("Projekte voranbringen.", gemessen 604 px), die in der 700 px breiten Textspalte in EINER Zeile bleiben muss — bricht eine der drei um, ist der Rhythmus hin. 96 px Luft, also auch bei einer breiter laufenden Schrift noch tragfaehig. */ --schrift-hero: clamp(1.5rem, 0.35rem + 2.9vw, 3.5rem); --zeile-eng: 1.05; --zeile-knapp: 1.25; --zeile-fliess: 1.6; --sperrung-eng: -0.03em; --sperrung-null: 0; --sperrung-weit: 0.12em; /* --- Raum (8er-Raster) ------------------------------------------------ */ --raum-1: 0.25rem; --raum-2: 0.5rem; --raum-3: 0.75rem; --raum-4: 1rem; --raum-5: 1.5rem; --raum-6: 2rem; --raum-7: 3rem; --raum-8: 4rem; --raum-9: 6rem; --raum-10: 8rem; /* --- Layout ----------------------------------------------------------- */ --breite-max: 1720px; /* Deckel fuer Raster/Formulare */ --breite-text: 70ch; /* Deckel NUR fuer Fliesstext (Lesbarkeit) */ --rand-seitlich: clamp(1.25rem, 3.5vw, 4rem); --kopf-hoehe-frei: clamp(3.75rem, 4.6vw, 5.5rem); /* ueber der Buehne */ --kopf-hoehe-kompakt: clamp(3rem, 3.2vw, 3.75rem); /* als Topbar */ /* --- Radien ----------------------------------------------------------- */ --radius-s: 4px; --radius-m: 8px; --radius-l: 16px; --radius-voll: 999px; /* Polsterung der Nav-Pillen in em: sie schrumpft mit der Schriftgroesse, die Pille bleibt dadurch in jeder Groesse gleich proportioniert. */ --pille-polsterung: 0.55em 1.1em; --pille-polsterung-eng: 0.55em 0.6em; /* schmale Viewports */ /* --- Rahmen ----------------------------------------------------------- */ --rand-fein: 1px solid var(--linie); --rand-stark: 2px solid var(--linie-stark); /* --- Schaltflaechen ----------------------------------------------- ACHTUNG: Dieser Abschnitt verwendet auf Reys Ansage die ORIGINAL- FARBEN der Vorlage, nicht die Palette. Sie stehen deshalb hier als eigene Gruppe und sind bewusst als fremd gekennzeichnet — sonst wirkt es spaeter wie ein Versehen. Bekannter Einwand, bewusst in Kauf genommen: die Haarlinie ist Schwarz bei 8 %, auf Weiss also rund 1,2:1. WCAG 1.4.11 verlangt 3:1 fuer die Umrandung eines Bedienelements. Der Knopf gibt sich zusaetzlich ueber die getoente Flaeche, die vier Eckpunkte und den Schatten zu erkennen; die Linie allein traegt es nicht. Kleinster Eingriff, falls das doch stoert: --vorlage-linie auf einen dunkleren Wert setzen, sonst aendert sich nichts. */ --vorlage-cyan: #b5faff; /* Pastellcyan — Flaeche der Knoepfe */ /* Gruen-tuerkis, dunkler: der Ton, den das Glas im Ergebnis annimmt. Der Gruenstich stammt aus dem Glanz der Vorlage — darin steckt #ebf8e1, ein blasses Gruen, das im hard-light-Modus mitmischt. Farbton 173 Grad, also klar gruenseitig gegenueber dem reinen Cyan (184 Grad), und mit 36 Prozent Helligkeit deutlich dunkler. */ --vorlage-tuerkis: #2f8a80; /* Die Tinte der Randnotizen. Zurueckgenommen, weil eine Notiz eine Nebenbemerkung ist — steht sie so kraeftig da wie ein Titel, wird aus dem Zuruf eine Ansage. 78 % ist die Grenze, ab der sie auf dem hellen Grund noch sicher lesbar bleibt. */ --notiz-tinte: color-mix(in srgb, var(--vorlage-tuerkis) 78%, transparent); /* DER PFEIL IST BLASSER ALS DAS WORT. Reys Befund vom 25.08.: "Die Pfeile duerfen etwas weniger hell sein. Sie ziehen etwas viel Fokus." Der Grund liegt in der Flaeche, nicht in der Farbe: Ein Pfeil ist eine gefuellte Form von mehreren hundert Quadrateinheiten, ein Wort besteht aus duennen Strichen. Bei gleichem Ton wiegt der Pfeil deshalb schwerer, obwohl er das Beiwerk ist — er soll zeigen, nicht sprechen. */ --notiz-pfeil: color-mix(in srgb, var(--vorlage-tuerkis) 40%, transparent); /* Dieselbe Familie, dunkler: der einzige Ton, auf dem Weiss die 4,5:1 fuer normale Schrift schafft. In Farbwelt.md die "Bindung". */ --vorlage-bindung: #2a7a70; --vorlage-flaeche: color-mix(in srgb, var(--vorlage-cyan) 19%, transparent); --vorlage-text: #283a3b; /* dunkles Petrol */ --vorlage-text-tief: #16292a; /* dieselbe Aetzung, tiefer */ --vorlage-linie: #00000015; /* Schwarz, 8 % */ --vorlage-wurf: #00000055; /* Schwarz, 33 % — der Schattenwurf */ --vorlage-wurf-nav: #00000033; /* Schwarz, 20 % — Wurf der Kopfzeile */ --vorlage-saum: #ffffff55; /* Weiss, 33 % — der Lichtsaum */ --vorlage-saum-hell: #ffffff94; /* Weiss, 58 % — Kante blitzt auf */ --schrift-knopf: 1.0625rem; /* 17 px, aus der Vorlage */ --sperrung-knopf: 0.05em; --rahmen-linie: 1px solid var(--vorlage-linie); /* Knopf und Nav liegen auf dem Seitengrund - siehe die Glasregel unten. */ --rahmen-flaeche: var(--glas-auf-grund); /* Beim Hover nimmt die Scheibe mehr Licht auf. */ --rahmen-flaeche-hover: var(--glas-auf-grund-hover); --knopf-text: var(--vorlage-text); /* Auf Reys Ansage traegt auch der Hero-Titel das Petrol der Vorlage, nicht mehr Indigo. Steht hier als eigene Rolle, damit sichtbar bleibt, dass zwei verschiedene Bereiche dieselbe Fremdfarbe benutzen — und man sie an EINER Stelle wieder loesen kann. */ --hero-titel: var(--vorlage-text); /* Die drei Schlusspunkte der Headline. Auf Reys Ansage das Cyan der Vorlage — siehe Messwert unten in der Uebergabe. */ --hero-punkt: var(--vorlage-tuerkis); /* Der Trennpunkt zwischen den Wegen der Navigation. Derselbe Ton wie der Punkt hinter der Wortmarke — die Kopfzeile bekommt damit EIN Zeichen, das sie zusammenhaelt, statt einer Flaeche, die sie einrahmt. */ --nav-trenner: var(--vorlage-tuerkis); /* Beim Hover DUNKLER, nicht heller: die Aetzung liest sich tiefer, wenn Licht auf die Scheibe faellt. */ --knopf-text-hover: var(--vorlage-text-tief); /* Innerer Lichtsaum an der Oberkante — macht aus der getoenten Flaeche eine Glasscheibe. */ --rahmen-innenglanz: inset 0 1px 4px 1px var(--vorlage-saum); --rahmen-innenglanz-hover: inset 0 1px 5px 1px var(--vorlage-saum-hell); /* Diagonaler Glanz ueber der Flaeche. */ --glanz: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #fff 20%); --glanz-deckkraft: 0.1; /* drop-shadow statt box-shadow, weil der Schatten die Eckpunkte mitnehmen muss — die ragen ueber den Rahmen hinaus. Vier Lagen, Versaetze und Unschaerfen exakt wie in der Vorlage (6/2, 14/4, 32/8, 64/16). Der Reiz liegt im Stapel: die Versaetze wachsen stark, die Unschaerfe bleibt im Verhaeltnis dazu klein. Zusaetzlich verstaerken sich die Lagen gegenseitig, weil jedes weitere drop-shadow den Schatten des VORIGEN Ergebnisses mitwirft. */ --knopf-abheben: drop-shadow(0 6px 2px var(--vorlage-wurf)) drop-shadow(0 14px 4px var(--vorlage-wurf)) drop-shadow(0 32px 8px var(--vorlage-wurf)) drop-shadow(0 64px 16px var(--vorlage-wurf)); /* DIE FLACHE STUFE — und sie hat bis zum 26.08. GEFEHLT. css/portfolio.css setzt seit dem 25.08. `filter: var(--knopf-abheben-flach)` am Knopf in der Karte und beschreibt im Kommentar daneben "zwei kurze Lagen". Definiert war der Token nie. Eine Eigenschaft mit einer unbekannten Variablen faellt auf ihren Ausgangswert zurueck — der Knopf lief also mit `filter: none`, ganz ohne Wurf. Nachgemessen am 26.08., aufgefallen ist es bei Reys Befund zum Kontaktknopf ("extrem krasser Schlagschatten ... steht in keinem Verhaeltnis zu den anderen"). Zwei Lagen statt vier, und bei 20 statt 33 Prozent Schwarz: Ein Knopf IN einer Flaeche liegt auf dieser Flaeche, er schwebt nicht vor einer Wand. Die Flaeche wirft ihren Schatten ja schon selbst. */ --knopf-abheben-flach: drop-shadow(0 1px 1px var(--vorlage-wurf-nav)) drop-shadow(0 4px 4px var(--vorlage-wurf-nav)); /* DER KNOPF IN DER KARTE — gemessen, nicht gewaehlt. Reys Befund vom 25.08.: "Optisch sind die Buttons nicht gleich, auf der Startseite sind sie viel gruener, im Portfolio ziemlich blau." Nachgemessen am gerenderten Bild: Startseite rgb(179 198 199) Farbton 183 Grad Portfolio rgb(207 226 232) Farbton 194 Grad Der Knopf ist auf beiden Seiten derselbe Baustein. Was ihn unterscheidet, liegt DAHINTER: In der Hero steht er auf einem mitteldunklen, leicht gruenlichen Foto, im Portfolio auf hellem, kuehlem Grund. Eine Toenung von 19 Prozent nimmt an, worauf sie liegt — das ist keine Abweichung, das ist die Eigenschaft von Glas. Damit beide gleich aussehen, braucht der Knopf im Portfolio einen eigenen, GEDECKTEN Grund: den gemessenen Wert der Startseite. Er ist dort dann kein Glas mehr im strengen Sinn, sieht aber genauso aus. ZU BEDENKEN, wenn spaeter das Hero-Video kommt: Der Knopf auf der Startseite aendert sich dann mit dem Motiv, dieser hier nicht. Dann ist der Wert neu zu messen — oder beide bekommen einen gedeckten Grund. */ --knopf-flaeche-karte: #b3c6c7; --knopf-flaeche-karte-hover: color-mix(in srgb, #b3c6c7 82%, var(--palette-weiss)); /* --- Die Karte im Portfolio --------------------------------------------- Reys Ansage vom 25.08.: "Karten bekommen weissen/unser cyan gradient Hintergrund und schatten. Modern und schick." Der Verlauf laeuft von Weiss oben links nach Cyan unten rechts — dieselbe Diagonale, in der auch der Glanz ueber den Glasscheiben liegt, damit die Karte sich nicht gegen die Bildsprache stellt. GEDECKT, nicht durchsichtig: Beide Enden sind mit Weiss gemischt statt mit Transparenz. Damit ist die Karte kein Glas mehr — genau das war das Ziel, seit klar ist, dass zu viel davon auf der Seite war —, und sie sieht auf jedem Untergrund gleich aus. Der Schatten ist bewusst ein anderer als der der Glasschilder: drei Lagen, weit gestreut, sehr schwach. Ein Glasschild haengt vor einer Wand und wirft deshalb hart; eine Karte liegt auf der Seite. */ /* SILBER STATT FARBE — Reys Ansage vom 25.08.: "Ich will mal ohne farbe sehen." Der Verlauf traegt jetzt Indigo bei 3 bis 9 Prozent. Das ist keine Farbe mehr, sondern eine Helligkeit: von Weiss oben links nach #EAEBEF unten rechts. Indigo und nicht reines Schwarz, weil ein neutrales Grau neben dem leicht kuehlen Seitenhintergrund warm aussaehe — die beiden sollen aus derselben Familie kommen. Der Seitenverlauf nutzt denselben Ton. Damit traegt Farbe auf dieser Seite nur noch, was bedient wird: Navigation, Reiterleiste, Knopf. Alles andere ist Silber und Schrift. */ --karte-verlauf: linear-gradient(150deg, var(--palette-weiss) 0%, color-mix(in srgb, var(--palette-indigo) 3%, var(--palette-weiss)) 55%, color-mix(in srgb, var(--palette-indigo) 9%, var(--palette-weiss)) 100%); --karte-verlauf-hover: linear-gradient(150deg, var(--palette-weiss) 0%, color-mix(in srgb, var(--palette-indigo) 5%, var(--palette-weiss)) 50%, color-mix(in srgb, var(--palette-indigo) 14%, var(--palette-weiss)) 100%); --karte-schatten: 0 1px 2px #0000000f, 0 10px 20px -8px #00000014, 0 28px 48px -24px #0000001f; --karte-schatten-hover: 0 1px 2px #00000014, 0 14px 26px -8px #0000001f, 0 36px 60px -24px #00000029; /* Ein kleiner Hub beim Hover. Er ist bewusst winzig: Die Karte soll antworten, nicht springen. */ --karte-hub: -2px; /* --- Navigation -------------------------------------------------------- Dieselbe Scheibe wie die Schaltflaechen, aber OHNE Abstandshalter und mit flacherem Wurf: eine Kopfzeile schwebt nicht so hoch wie ein Knopf, sonst wirkt sie abgeloest statt angebracht. Der aktive Punkt bekommt eine VOLLFLAECHE, keine zweite Pille — er fuellt seinen Abschnitt der Scheibe ganz aus. Petrol traegt Weiss mit 11,9:1. Tuerkis waere die buntere Wahl, kaeme mit Weiss aber nur auf 4,2:1 und damit unter die Schwelle fuer normale Schrift. Flacher heisst: halbe Versaetze, aber GERINGERE Deckkraft — 20 % statt 33 %. Zwei Irrwege liegen dahinter, beide lehrreich: Erst waren es zwei diffuse Lagen bei 15 %. Damit war nicht der Schatten flacher, sondern sein Charakter weg: der Reiz liegt im gestaffelten Wurf mit kleiner Unschaerfe. Dann vier Lagen bei denselben 33 % wie am Knopf — und der Schatten wirkte STAERKER als dort. Bei halbierten Versaetzen liegen die vier Lagen enger uebereinander, dieselbe Deckkraft ergibt also eine dichtere Flaeche. Deshalb muss mit dem Abstand auch die Deckkraft sinken. Etwas weichere Unschaerfen tun ihr Uebriges. */ --nav-abheben: drop-shadow(0 3px 2px var(--vorlage-wurf-nav)) drop-shadow(0 7px 4px var(--vorlage-wurf-nav)) drop-shadow(0 16px 8px var(--vorlage-wurf-nav)) drop-shadow(0 32px 14px var(--vorlage-wurf-nav)); /* Dezente Toenung, kein Block. Tuerkis bei 22 Prozent — es DUNKELT leicht ab, statt aufzuhellen. Das ist der Grund fuer Tuerkis statt Cyan an dieser Stelle: Cyan ist so hell wie die Scheibe selbst, eine Aufhellung waere bei jeder Deckkraft unsichtbar (gemessen 1,03:1). Bewusste Grenze: als HOVER traegt das, weil man die Aenderung geschehen sieht. Als DAUERHAFTE Markierung des aktiven Wegs traegt es nicht — dort vergleicht man mit den Nachbarn, und dafuer ist der Unterschied zu klein. Siehe Uebergabe.md. */ --nav-aktiv-flaeche: color-mix(in srgb, var(--vorlage-bindung) 22%, transparent); --nav-aktiv-text: var(--palette-weiss); /* Das Minus der Wortmarke. Reines Cyan kaeme auf dem hellen Grund auf 1,2:1 und waere unsichtbar — deshalb derselbe gruen-tuerkise Ton wie die Punkte der Headline. */ --marke-schrift: var(--vorlage-text); --marke-strich: var(--vorlage-tuerkis); /* --- Aufhellung der Textseite ---------------------------------------- Nur noetig, wenn das Medium links nicht ruhig ist. Beim aktuellen Platzhalter liegen dort Fenster, Schreibtisch, Stuhl und eine Pflanze — unter dem Intro fiel der Kontrast auf 1,2:1. Anders als beim ersten Platzhalter gibt es hier KEINE Mittelgrau- Falle: die Schrift ist mit Petrol und #484d6b sehr dunkel, jede Aufhellung macht es also eindeutig besser. Beim ersten Motiv trug der Titel Ozean, und eine halbe Aufhellung hob den Grund auf genau dessen Helligkeit. Der Verlauf endet vor der Figur, damit sie unangetastet bleibt. Ist das Video links ruhig, kann er ersatzlos entfallen. */ --textseite-aufhellung: linear-gradient(to right, color-mix(in srgb, var(--palette-weiss) 84%, transparent) 0%, color-mix(in srgb, var(--palette-weiss) 78%, transparent) 34%, color-mix(in srgb, var(--palette-weiss) 46%, transparent) 52%, color-mix(in srgb, var(--palette-weiss) 12%, transparent) 66%, transparent 76%); /* --- Bewegung --------------------------------------------------------- */ --dauer-flink: 140ms; --dauer-mittel: 280ms; --dauer-ruhig: 600ms; /* Auftrittsdauern. 900 ms waren zu lang: bei der Kurve --kurve-aus sind nach der Haelfte der Zeit schon 97 Prozent des Weges zurueck- gelegt, der Rest ist unsichtbares Nachkriechen — genau das fuehlt sich weich an. Jetzt wird dort abgeschnitten, wo die Bewegung ohnehin vorbei ist. */ /* Langsam und weitgehend gleichzeitig. Dafuer NICHT --kurve-aus: die legt 97 Prozent des Weges in der ersten Haelfte zurueck, was bei langer Dauer als Nachkriechen auffaellt. --kurve-weich verteilt die Bewegung gleichmaessiger — das traegt eine ruhige Geste. */ --dauer-medium: 1000ms; /* die Ueberblendung aus Weiss */ --dauer-auftritt: 700ms; /* alle Bedienelemente */ --dauer-aus: 0.01ms; /* Abschaltwert fuer Bewegungsreduktion */ /* Die Karten im Portfolio. --dauer-karte ist der Auftritt einer einzelnen Karte, --versatz-karte der Abstand zur naechsten. Bei zwoelf Karten und 45 ms sind das 495 ms bis zur letzten — lange genug, dass man die Staffel als Welle liest, kurz genug, dass niemand auf sie wartet. */ --dauer-karte: 420ms; --versatz-karte: 45ms; /* Der Abgang ist kuerzer als der Auftritt: Verschwinden darf nicht warten lassen, Erscheinen soll man sehen. */ --dauer-abgang: 170ms; /* Zeitversatz, wenn mehrere Elemente nacheinander auftreten. In der Hero sind das fuenf: die drei Zeilen des Dreiklangs, dann das Intro, dann die Schaltflaechen. Die drei Zeilen liegen enger beieinander als der Sprung zum Intro — so liest sich der Auftritt als Rhythmus und nicht als gleichfoermiges Abzaehlen. */ /* Die Versaetze liegen dicht beieinander: der Auftritt soll als EINE Bewegung lesen, nicht als Abfolge. Die Headline zerfaellt deshalb auch nicht mehr in drei Einsaetze — sie kommt als Block. */ --versatz-medium: 0ms; --versatz-kopf: 200ms; --versatz-titel: 240ms; --versatz-intro: 300ms; --versatz-wege: 340ms; /* Der Weg der Bedienelemente. Sie tragen die Bewegung jetzt ALLEIN — das Medium bekommt keinen Weg mehr, weil jeder Versuch, es zu bewegen, entweder Bildrand kostete oder einen weissen Streifen zeigte (Begruendung bei .hero__medium in hero.css). Deshalb 24 px statt 12: bei 700 ms Dauer und einer gleichmaessigen Kurve war die Haelfte davon nicht mehr als Bewegung wahrnehmbar. Solange sie die einzige ist, muss sie deutlicher sein. */ --weg-bedienelement: -0.75rem; /* Das Medium steigt wieder von unten. Die Skalierung ist dabei KEIN Effekt, sondern die Deckung fuer den Weg: das Bild fuellt die Buehne exakt aus, jede Verschiebung legt sonst eine Kante frei. Der Zusammenhang zum Drehen: 1 Prozent Skalierung deckt 5,4 px ab. Bei 4 Prozent sind das 21,6 px gegen 16,2 px Weg — 5 px Reserve. Mit genau 3 Prozent waere die Deckung exakt null gewesen: die Werte haetten sich punktgenau aufgehoben, und bei anderer Bildschirmhoehe stuende dort ein Haarstrich Weiss. Die 10 Prozent von zuvor waren die Deckung fuer 43 px Weg — und in dieser Groesse als Zoom erkennbar. Beides gilt nur WAEHREND der Bewegung. Am Ende steht die Skalierung auf 1, der Bildausschnitt ist also unangetastet. */ --weg-medium: 1.5%; --medium-uebergroesse: 1.04; --kurve-weich: cubic-bezier(0.4, 0, 0.2, 1); --kurve-aus: cubic-bezier(0.16, 1, 0.3, 1); --kurve-an: cubic-bezier(0.7, 0, 0.84, 0); /* --- Hintergrund der Seite --------------------------------------------- Zwei Lagen, beide bewusst an der Wahrnehmungsschwelle: VERLAUF Licht faellt von rechts oben ein — dieselbe Richtung, aus der auch der Lichtsaum an jeder Scheibe kommt. Unten links ein Hauch Tuerkis als Gegengewicht, sonst kippt die Seite optisch nach rechts. Dazwischen bleibt Weiss, damit Fliesstext seinen ruhigen Grund behaelt. RASTER Feine Linien im 64er-Abstand. Das ist die Verglasung selbst: Buerogaeser sitzen in einem Raster, und genau davon handelt die ganze Bildsprache. Bewusst KEIN fertiges Musterbild — das waere eine Datei mehr, die geladen werden muss, und bei jeder Bildschirmdichte anders scharf. DREI ANLAEUFE AM 25.08., und der dritte hat die Lehre: 1. Cyan bei 38 Prozent, Linie bei 5 — "zu dezent". 2. Cyan bei 62 Prozent plus Grundtoenung — "zu stark/gleicher Farbton wie der Rest". 3. Verlauf NEUTRAL, Raster bleibt. Der zweite Anlauf ist nicht an der Staerke gescheitert, sondern am Ton. Ein cyaner Verlauf hinter cyanen Scheiben laesst beide verschwimmen: Die Karte hoert dort auf, wo der Hintergrund anfaengt, und beide sagen dasselbe. Das Glas ist aber die Auszeichnung der Seite — es kann nur auszeichnen, wenn der Grund es nicht auch tut. Deshalb traegt der Verlauf jetzt Indigo bei 2 bis 12 Prozent: eine SCHATTIERUNG, keine Farbe. Hell oben rechts, wo das Licht herkommt, nach unten links leicht abgeschattet. Die Farbe im Hintergrund liefert allein das Raster — und das sind Haarlinien, keine Flaeche, die konkurrieren koennte. Kontrast nachgerechnet: 12 Prozent Indigo auf Weiss ergibt #E8E9EE. Der gedaempfte Text kommt darauf auf 7,6:1, Schwelle ist 4,5. */ --grund-verlauf: radial-gradient(135% 115% at 86% -12%, color-mix(in srgb, var(--palette-indigo) 2%, transparent) 0%, color-mix(in srgb, var(--palette-indigo) 6%, transparent) 52%, color-mix(in srgb, var(--palette-indigo) 12%, transparent) 100%); --muster-linie: color-mix(in srgb, var(--vorlage-tuerkis) 9%, transparent); --muster-weite: 64px; --muster-raster: repeating-linear-gradient(to right, var(--muster-linie) 0 1px, transparent 1px var(--muster-weite)), repeating-linear-gradient(to bottom, var(--muster-linie) 0 1px, transparent 1px var(--muster-weite)); /* DAS RASTER LIEGT NUR IM SEITENKOPF — Reys Ansage vom 25.08.: "Lass unser Gitternetz nur ueber den Seitenanfang bis zu den Filtern laufen. Dort dann gradient zu transparenz weiss. Damit die Karten ohne Gitter liegen." Zwei Dinge machen das aus: Es ist NICHT MEHR MITGEHEFTET (position: absolute statt fixed, siehe base.css). Vorher stand es fest im Bildschirm und lag damit bei jeder Scrollposition hinter allem. Jetzt gehoert es zum Seitenanfang und scrollt mit ihm weg. Und es laeuft senkrecht aus statt aus einer Ecke: voll bis rund 260 px — das traegt Kopfzeile, Titel und Reiterleiste —, dann bis 480 px auf null. Die Filterzeile liegt im Ausklang, die Karten darunter auf freiem Grund. */ /* HALBE SEITE, nicht 30rem. Reys Ansage vom 25.08.: "Unser Background Raster darf fuer meinen Begriff jetzt sogar etwas weiter gehen. Haelfte der Seite." Prozent und nicht rem, und das ist der Punkt: body::after ist absolut gesetzt, die Prozentangabe rechnet also gegen die Hoehe der Seite. Ein fester Wert waere auf einer langen Seite ein schmaler Streifen oben und auf einer kurzen fast alles — "halbe Seite" heisst halbe Seite. */ --muster-hoehe: 50%; --muster-blende: linear-gradient(to bottom, #000 0 54%, transparent 100%); /* --- Ebenen ----------------------------------------------------------- */ --ebene-kopf: 10; --ebene-oben: 50; /* --- Formularfelder (26.08., fuer die Kontaktseite) -------------------- Ein Eingabefeld ist auf dieser Seite keine Box mit Rahmen, sondern eine hellere Scheibe im Glas: dieselbe Bildsprache wie die Schaltflaechen, nur ruhiger, weil ein Formular kein Knopf ist. Deshalb Weiss mit Deckkraft statt einer eigenen Farbe — es nimmt an, was hinter ihm liegt, und bleibt Teil der Flaeche. KEIN ROT UND KEIN GRUEN fuer Erfolg und Fehler. Die Palette hat beides nicht, und eine Signalfarbe zu erfinden waere eine Gestaltungs- entscheidung, die Rey gehoert (CLAUDE.md). Die Rueckmeldung unterscheidet sich stattdessen durch WORTLAUT und durch die Kante links: Gelungen traegt das Tuerkis der Marke, misslungen die kraeftige neutrale Linie. Wer lieber Rot moechte, sagt es — dann kommt genau ein Token dazu. */ --feld-flaeche: color-mix(in srgb, var(--palette-weiss) 72%, transparent); --feld-flaeche-fokus: color-mix(in srgb, var(--palette-weiss) 92%, transparent); /* Regel 3 des Formstandards: an Silber gilt --rand-fein. --linie-stark ist fuer Trennlinien IN Listen, nicht fuer Raender. */ --feld-linie: var(--rand-fein); --feld-linie-fokus: 1px solid var(--vorlage-bindung); --feld-hinweis: color-mix(in srgb, var(--palette-indigo) 46%, var(--palette-weiss)); --feld-polsterung: 0.7rem 0.9rem; --melde-gut: var(--vorlage-bindung); --melde-neutral: var(--linie-stark); /* --- Kein Gestaltungswert, sondern eine Rechengroesze ----------------- Eine SVG-Maske liest Helligkeit: Weiss heiszt "voll sichtbar", Schwarz "gar nicht". Der Wert steht hier nicht, weil er eine Farbe waere, sondern damit die Pruefregel oben ("kein Farbwert auszerhalb dieser Datei") leer bleibt und niemand ihn fuer eine Palette-Entscheidung haelt. Wer ihn aendert, macht die Notizpfeile unsichtbar. */ --maske-voll: #fff; /* ======================================================================= GLAS: DER TON HAENGT AM UNTERGRUND — UND DAS STAND HIER SCHON (26.08.) ----------------------------------------------------------------------- REYS BEFUND, ZUM ZWEITEN MAL. Am 25.08.: "Optisch sind die Buttons nicht gleich, auf der Startseite sind sie viel gruener, im Portfolio ziemlich blau." Am 26.08., ueber die Nachweis-Schilder: "Jetzt haben wir aber wieder das extreme baby blau als Glass und nicht unser gruenes Glass." DASSELBE PHAENOMEN, DIESELBE URSACHE — und beim ersten Mal war es bereits geloest: --knopf-flaeche-karte weiter oben, mit Messwerten und Begruendung. Ich habe es beim zweiten Mal nicht nachgeschlagen, sondern die Farbe neu hergeleitet und dabei an einem Tuerkis-Anteil gedreht. Reys Frage dazu war die richtige: "Warum misst du denn staendig? Du hast dem Button in Portfolio doch klare Werte zugewiesen." DIE REGEL, damit es kein drittes Mal gibt: Glas nimmt an, was HINTER ihm liegt. Eine Toenung von 19 Prozent auf einem mitteldunklen Foto ist gruen, dieselbe Toenung auf einem weiszen Blatt ist hellblau. Das ist kein Fehler, das ist die Eigenschaft von Glas. Liegt eine Scheibe auf hellem Grund und soll trotzdem aussehen wie die auf der Startseite, bekommt sie einen GEDECKTEN Grund mit dem dort gemessenen Wert. Sie ist dann kein Glas mehr im strengen Sinn und sieht genauso aus. Deshalb zeigen die beiden Token unten auf das, was es schon gibt. Ein zweiter Wert fuer dieselbe Frage waere genau die Verdopplung, gegen die tokens.css als einzige Quelle gebaut ist. auf dem Seitengrund oder auf dem Hero-Foto --glas-auf-grund auf weiszer oder heller Flaeche --glas-auf-weiss Die fertige Rezeptur — Linie, Flaeche, Saum, Glanz, Hover — steht als Klasse .glas in komponenten.css. */ --glas-auf-grund: var(--vorlage-flaeche); --glas-auf-grund-hover: color-mix(in srgb, var(--vorlage-cyan) 32%, transparent); --glas-auf-weiss: var(--knopf-flaeche-karte); --glas-auf-weiss-hover: var(--knopf-flaeche-karte-hover); /* ======================================================================= DER FORMSTANDARD (26.08.) — Radius, Schatten, Linie, Schrift ----------------------------------------------------------------------- ANLASS: Reys Befund, und er hat ihn belegt bekommen. "Das ist was Form, Gestaltung, Schatten, Farben und co angeht - alles nicht einheitlich. [...] echt kein sauberes Designen und 'an Konzept halten'." Dazu: "Ach wie die Schrift darauf abliegt. 20 Varianten." NACHGEMESSEN ueber alle vier Seiten: Radien 0, 8, 16 und 999 px, nicht nach Rolle vergeben Rahmenlinien drei Farben fuer dieselbe Aufgabe Schatten vier Familien Schrift auf Bedienelementen NEUN Kombinationen Textfarbe zwei (Petrol ueberall, Indigo im Formular) Ab hier gilt: Wer ein neues Bauteil baut, WAEHLT aus diesen Stufen. Er erfindet keine. Fuenf Regeln, jede beantwortet genau eine Frage. 1. RADIUS SAGT, WIE GROSZ DAS DING IST — nicht, wie es gefaellt. --radius-m (8px) was man einzeln anfasst: Knopf, Eingabefeld --radius-l (16px) was etwas enthaelt: Karte, Blatt, Dialog --radius-voll nur echte Pillen: Segmentleisten, Filter AUSNAHME, und nur diese: Ein Element, das an der Kante seines Behaelters klebt, erbt dessen Rundung AN DIESER KANTE. Ein Schild am Fusz einer Karte ist unten rund wie die Karte und oben eckig. 2. SCHATTEN SAGT, WIE HOCH ETWAS UEBER DEM GRUND LIEGT. Drei Stufen, und ein Bauteil bekommt GENAU EINE: liegt auf nur der Lichtsaum innen (--rahmen-innenglanz) hebt sich ab --karte-schatten schwebt --knopf-abheben (auf Foto) / -flach (auf Papier) Nie zwei gleichzeitig. Karte plus Knopffilter war der Fehler, der am 25.08. den dunklen Fleck unter dem Kartenknopf erzeugt hat. MECHANISCH GELOEST, NICHT ALS MERKREGEL (26.08.): Die flache Stufe ist die VOREINSTELLUNG jeder Schaltflaeche, der hohe Wurf die Ausnahme fuer die Hero. Anders herum war es vorher, und genau daran ist es zweimal gescheitert — der Kontaktknopf trug den Hero-Wurf, weil ihn niemand ausdruecklich abbestellt hatte. Was der Normalfall ist, gehoert in die Voreinstellung; sonst ist jede Stelle, an der man es vergisst, ein Fehler. 3. LINIE: zwei Materialien, zwei Linien, keine dritte. --rahmen-linie an Glas --rand-fein an Silber (Karten, Blaetter, Felder) --linie-stark ist fuer Trennlinien IN Listen, nicht fuer Raender. 4. FARBE DES GLASES nach Untergrund — siehe die Glasregel darueber. 5. SCHRIFT: FUENF Rollen, nicht neun — und nicht drei, wie hier zuerst stand. Die Zahl war zu huebsch, um zu stimmen: Ein Kartentitel ist keine Bedienschrift, und eine Feldbeschriftung ist kein Etikett. Nachgezaehlt sind es fuenf, plus eine begruendete Abweichung. Bedienschrift 17px / 500 / +0.05em Knopf, Reiter, Schild — alles aus Glas Etikett 12px / 500 / +0.12em / Versalien Vorzeile ueber Karte oder Gruppe Chip --schrift-xs / 400 Filterpille und Schlagwort in der Karte Titel --schrift-* / 800 / --sperrung-eng Ueberschriften Feldbeschriftung --schrift-s / 500 / --sperrung-eng Label ueber einem Eingabefeld ABWEICHUNG, ENTSCHIEDEN UND KEIN VERSEHEN: Die Navigation traegt 19 px und Kleinschreibung. Reys Ansage vom 25.08. — die Wortmarke ist klein, und eine Navigation in Versalien daneben behauptet eine Foermlichkeit, die die Marke nicht hat. Auf Glas UND auf Silber traegt Text --knopf-text. Eine Farbe. WAS NICHT VEREINHEITLICHT WIRD, weil es entschieden ist: Die Filter- pillen sind Pillen OHNE Glas (25.08.). Glas bedeutet nur etwas, solange es selten ist — drei Flaechen auf der Seite. Wer sie angleicht, macht genau das kaputt, was der Standard schuetzen soll. */ --schrift-etikett: 0.75rem; --sperrung-etikett: 0.12em; } /* ========================================================================= ZWEITER BLOCK — die Werte fuer Zugangsschutz, Werdegang und Privatleben ------------------------------------------------------------------------- Ein zweiter :root-Block in DERSELBEN Datei, kein zweites Stilblatt. Die Regel lautet "eine Quelle", nicht "ein Block" — und angehaengt statt eingestreut, damit die abgenommenen Abschnitte darueber unangetastet bleiben. ========================================================================= */ :root { /* --- Zugangsschutz ----------------------------------------------------- Die Unschaerfe muss Schrift UNLESBAR machen, nicht nur weich. Gemessen an der kleinsten Schrift der Seite (Chip, 14 px): ab rund 14 px Radius zerfaellt sie, 22 px lassen auch Ueberschriften nur noch als Balken stehen. Weniger waere ein Effekt, kein Schutz. ZUM MITLESEN, WEIL ES SONST FALSCH VERSTANDEN WIRD: Das hier ist ein SICHTSCHUTZ im Browser, keine Serversperre. Die Begruendung steht in css/zugang.css. */ --zugang-unschaerfe: blur(22px); /* Der Schleier hinter dem Dialog. Dieselbe Rezeptur wie die Kopfzeile beim Scrollen — Weiss plus Unschaerfe —, nur durchsichtiger: Die Kopfzeile muss decken, dieser hier soll zeigen, dass die Seite noch da ist und nur verschlossen. */ --zugang-schleier: color-mix(in srgb, var(--palette-weiss) 58%, transparent); --zugang-schleier-blick: blur(10px) saturate(1.4); /* Das Blatt selbst. Gedeckelt auf Lesbarkeit, nicht auf eine runde Zahl: Ein Passwortfeld ueber die halbe Bildschirmbreite sieht aus wie ein Suchschlitz. */ --zugang-blatt-breite: 30rem; /* --- Werdegang: der Zeitstrahl ----------------------------------------- Der Strahl ist eine gezeichnete Linie, KEINE Rasterlinie. Das ist eine Entscheidung und kein Versaeumnis: Das Hintergrundraster haengt am Fensterrand, der Inhalt an einer zentrierten, gedeckelten Huelle. Beide treffen sich nur bei genau einer Fensterbreite — bei jeder anderen laeuft der Strahl neben einer Rasterlinie her, und knapp daneben sieht schlechter aus als deutlich daneben. Deshalb traegt er das Tuerkis der Marke und doppelte Staerke: Er gehoert sichtbar zum Vordergrund. */ --strahl-breite: 2px; --strahl-ruhe: var(--linie); --strahl-gezogen: color-mix(in srgb, var(--vorlage-tuerkis) 62%, transparent); /* Der Knoten an jeder Station. Der Ring ist weiss und deckt den Strahl darunter ab — sonst laeuft die Linie sichtbar durch den Punkt. */ --knoten-groesse: 13px; --knoten-ring: 4px; --knoten-fuellung: var(--vorlage-tuerkis); /* Die Nebenstation (BITMARCK lief WAEHREND der Umschulung) sitzt an einem Abzweig. Hohl statt gefuellt: eine Station zweiter Ordnung, kein zweiter Hauptweg. */ --knoten-fuellung-zweig: var(--palette-weiss); /* Die Metaspalte links in der Karte: Zeitraum, Firma, Ort. 22rem, weil "Ziller GmbH & Co. KG" bei --schrift-m rund 19rem misst und einzeilig bleiben soll. */ --station-spalte: 22rem; /* Der Abstand des Strahls zur linken Kante der Huelle. Er traegt die Knoten und muss deshalb links von der Karte Platz lassen. */ --strahl-links: 2.75rem; --strahl-links-schmal: 1rem; /* Das Raster im Werdegang. Es blendet oben AUS DEM VIDEO auf und unten INS VIDEO aus — anders als auf den Unterseiten, wo es am Seitenanfang voll steht und nur nach unten auslaeuft. Ein Bereich zwischen zwei Filmen hat zwei Kanten, nicht eine. */ --werdegang-blende: linear-gradient(to bottom, transparent 0%, #000 14%, #000 74%, transparent 100%); /* --- Privatleben ------------------------------------------------------- Das Gegenstueck zur Hero, spiegelverkehrt: dort Text links und Figur rechts, hier Film links und Text rechts. Der Wert ist die Breite der TEXTSPALTE und heisst deshalb nach ihr, nicht nach der Figur. */ --privat-rechts: 42%; /* Aufhellung der Textseite, gespiegelt zu --textseite-aufhellung. Sie endet vor der linken Bildhaelfte, damit der Filmfokus unangetastet bleibt. Nach dem Einsetzen der echten Clips neu messen — das steht so auch am Hero-Token. */ --privat-aufhellung: linear-gradient(to left, color-mix(in srgb, var(--palette-weiss) 58%, transparent) 0%, color-mix(in srgb, var(--palette-weiss) 48%, transparent) 34%, color-mix(in srgb, var(--palette-weiss) 22%, transparent) 56%, transparent 72%); /* Wie lange ein Kapitel steht, bevor der Film weiterzieht. 8 s: Die laengste Kapitelzeile misst rund 130 Zeichen, und bei ruhigem Lesen sind das gut 6 s — dazu ein Rest, damit man nicht gehetzt wird. */ --privat-kapitel-dauer: 8000ms; --privat-ueberblendung: 900ms; /* DIE DREI PLATZHALTER-FLAECHEN — bis Reys Clips da sind. Bewusst KEIN Foto: Die vorhandenen Platzhalter zeigen ein Buero, und ein Bueromotiv im Bereich "privat" wuerde genau die Beurteilung verfaelschen, um die es hier geht. Bewusst auch kein flaches Grau: Der Text rechts steht spaeter auf Bewegtbild, sein Kontrast muss gegen einen mitteldunklen Grund pruefbar sein. Die drei Toene sind die drei Motive, so weit man sie ohne Bild andeuten kann: warm und dicht (Katze), hell und ruhig (Kaffee), gruen und tief (Wald). Sie kommen aus der Palette und aus dem Tuerkis der Marke — es ist keine vierte Farbwelt. NACHGEBESSERT NACH DEM ERSTEN BLICK IM BROWSER (26.08.). Die erste Fassung war ueberall gleich hell und sah aus wie eine graue Wand: Man konnte daran weder erkennen, wo der Filmfokus liegt, noch ob die Schrift rechts spaeter traegt. JETZT KODIEREN DIE FLAECHEN DIE ANFORDERUNG AN DEN FILM: dicht und farbig LINKS, wo das Motiv liegt, hell und ruhig RECHTS, wo der Text steht. Genau das verlangt Medienkonzept.md von den Clips. Der Platzhalter behauptet damit nichts ueber das Motiv und sagt trotzdem das Richtige ueber die Komposition — und wenn ein Clip die Bedingung verletzt, faellt es sofort auf, weil die Seite vorher anders aussah. */ --privat-platz-1: radial-gradient(88% 135% at 26% 54%, color-mix(in srgb, var(--vorlage-tuerkis) 82%, var(--palette-indigo)) 0%, color-mix(in srgb, var(--vorlage-tuerkis) 52%, var(--palette-weiss)) 40%, color-mix(in srgb, var(--palette-eisblau) 34%, var(--palette-weiss)) 72%, color-mix(in srgb, var(--palette-eisblau) 8%, var(--palette-weiss)) 100%); --privat-platz-2: radial-gradient(88% 135% at 24% 42%, color-mix(in srgb, var(--palette-ozean) 78%, var(--palette-indigo)) 0%, color-mix(in srgb, var(--palette-kornblume) 62%, var(--palette-weiss)) 42%, color-mix(in srgb, var(--palette-perlblau) 22%, var(--palette-weiss)) 74%, var(--palette-weiss) 100%); --privat-platz-3: radial-gradient(88% 135% at 22% 58%, color-mix(in srgb, var(--palette-indigo) 62%, var(--vorlage-bindung)) 0%, color-mix(in srgb, var(--vorlage-bindung) 58%, var(--palette-weiss)) 40%, color-mix(in srgb, var(--vorlage-tuerkis) 22%, var(--palette-weiss)) 72%, color-mix(in srgb, var(--vorlage-tuerkis) 5%, var(--palette-weiss)) 100%); /* Der Fortschrittsstrich am aktiven Kapitel. Er laeuft von RECHTS nach links, weil der ganze Block rechtsbuendig steht — ein Strich, der gegen die Leserichtung des Blocks laeuft, sieht falsch herum aus. */ --kapitel-strich: var(--linie); --kapitel-strich-gelaufen: var(--vorlage-tuerkis); }