/* Farbschema der Lernwelt „Meisterprüfung Teil III“: Entwurf V2 „dunkler Kopf“ in SkillSprinters-Farben (Jens-Entscheidung 19.10.2026, Tisch-Vorlagen 98 bis 103; Entwurf ~/aevo-lernwelt/entwurf/v2.html). Vorgaben: CI-Farben Orange #F08C14, Blau #3CB4C8, Dunkel #2D2D2D, „nicht zu grell“ (Jens 09.10.2026); der Sepia- und Cremeton (Salbei, Holz, Gold, Bricolage) entfällt; Logo unverändert und gut sichtbar. Hausregel interne Apps (15.10.2026): Orange nur mit dunkler Schrift, CI-Blau statt Indigo. Aufbau: Der :root-Block überschreibt nur Variablen aus basis.css. Danach folgen vier Regeln für den dunklen Kopf, weil die Engine dem Kopf keine eigene Fläche gibt und der Kopf sich über Variablen allein nicht färben lässt (Begründung je Regel unten). Neue Variablen gibt es nur für diese vier Regeln (--kopf-…). Abweichungen vom CI und warum: - CI-Blau als Text ist #18718F statt #1A7A9D: #1A7A9D erreicht auf den hellen Tönungen (Orange hell, Grün hell, Blau hell) nur 4,33 bis 4,43 zu 1, #18718F überall mindestens 4,93. - Grün #157A3B und Rot #B91C1C statt CI-Success #16A34A und CI-Error #DC2626: die CI-Werte erreichen als Schrift auf Weiß bzw. auf Rot hell keine 4,5 zu 1 (3,3 bzw. 4,23). - Schrift: Plus Jakarta Sans (Überschriften, 600/700/800) und DM Sans (Text, 400/500/700) bringt die Engine seit 20.10.2026 selbst gehostet mit (static/fonts/schriften.css, latin und latin-ext, SIL Open Font License); die CSP erlaubt nur Schriften der eigenen Herkunft (font-src 'self'). Kontrast (WCAG 2.x, berechnet mit /tmp/claude-1000/farbschema-v2/kontrast_tabelle.py aus den Werten dieser Datei und basis.css; Ziel 4,5 für Text, 3 für große Schrift, Grafik und Bedienelemente): Fließtext Schrift auf Seite #2D2D2D auf #FAFBFC 13,29 Ziel 4,5 Fließtext Schrift auf Karte #2D2D2D auf #FFFFFF 13,77 Ziel 4,5 Fließtext Nebentext auf Seite #505050 auf #FAFBFC 7,78 Ziel 4,5 Fließtext Nebentext auf Karte #505050 auf #FFFFFF 8,06 Ziel 4,5 Fließtext Nebentext auf Etagenschild #505050 auf #F3F4F6 7,33 Ziel 4,5 Fließtext Schrift auf Spickzettel/Zusatz #2D2D2D auf #FAFBFC 13,29 Ziel 4,5 Knöpfe Hauptknopf weiß auf Blau #fff auf #18718F 5,53 Ziel 4,5 Knöpfe Knopf Orange mit dunkler Schrift #2D2D2D auf #F08C14 5,55 Ziel 4,5 Knöpfe Zweitknopf dunkel auf Weiß #2D2D2D auf #FFFFFF 13,77 Ziel 4,5 Knöpfe aktiver Reiter, Levelnummer weiß auf Dunkel #FFFFFF auf #2D2D2D 13,77 Ziel 4,5 Knöpfe Spickknopf weiß auf Keller #FFFFFF auf #383838 11,73 Ziel 4,5 Knöpfe Rahmen der Bedienelemente auf Seite #2D2D2D auf #FAFBFC 13,29 Ziel 3 Kopf Titel weiß auf Dunkel #FFFFFF auf #2D2D2D 13,77 Ziel 4,5 Kopf Untertitel auf Dunkel #C9CDD1 auf #2D2D2D 8,62 Ziel 4,5 Kopf Bindestrich Orange auf Dunkel (groß) #F08C14 auf #2D2D2D 5,55 Ziel 3 Kopf Rang und XP in der Stand-Anzeige #505050 auf #FFFFFF 8,06 Ziel 4,5 Kopf Weiße Logo-Plakette gegen Dunkel #fff auf #2D2D2D 13,77 Ziel 3 Hinweise Etikett/Punkte Blau auf Karte #18718F auf #FFFFFF 5,53 Ziel 4,5 Hinweise Etikett Blau auf Seite #18718F auf #FAFBFC 5,34 Ziel 4,5 Hinweise Dachbeschriftung weiß auf Blau #FFFFFF auf #18718F 5,53 Ziel 4,5 Hinweise Schrift auf Orange hell #2D2D2D auf #FEF3E2 12,55 Ziel 4,5 Hinweise Schrift auf Blau hell (Rückmeldung) #2D2D2D auf #E6F6F9 12,40 Ziel 4,5 Hinweise Levelstand-Marke Blau auf Orange hell #18718F auf #FEF3E2 5,04 Ziel 4,5 Hinweise Sim-Marke Blau auf Grün hell #18718F auf #E8F5EC 4,93 Ziel 4,5 Fehler Rot auf Karte #B91C1C auf #FFFFFF 6,47 Ziel 4,5 Fehler Rot auf Seite #B91C1C auf #FAFBFC 6,24 Ziel 4,5 Fehler Marke „falsch“ Rot auf Rot hell #B91C1C auf #FDECEC 5,66 Ziel 4,5 Fehler Schrift auf Rot hell #2D2D2D auf #FDECEC 12,06 Ziel 4,5 Fehler Praxis-Uhr weiß auf Rot #fff auf #B91C1C 6,47 Ziel 4,5 Erfolg Grün auf Karte #157A3B auf #FFFFFF 5,41 Ziel 4,5 Erfolg Marke „richtig“ Grün auf Grün hell #157A3B auf #E8F5EC 4,82 Ziel 4,5 Erfolg +XP Grün auf Blau hell #157A3B auf #E6F6F9 4,88 Ziel 4,5 Erfolg Schrift auf Grün hell #2D2D2D auf #E8F5EC 12,27 Ziel 4,5 Keller Schild weiß auf Kellerwand #FFFFFF auf #2D2D2D 13,77 Ziel 4,5 Keller Schild klein auf Kellerwand #C9CDD1 auf #2D2D2D 8,62 Ziel 4,5 Sonstiges inaktive Zeile im Admin #6B6B6B auf #FFFFFF 5,33 Ziel 4,5 Grafik Stern voll auf Karte #D97008 auf #FFFFFF 3,35 Ziel 3 Grafik Stern leer auf Karte #7A7A7A auf #FFFFFF 4,29 Ziel 3 Grafik Rand offener Abzeichen #8C9198 auf #FFFFFF 3,17 Ziel 3 Grafik Canvas: Schild „Prüfungsausschuss“ #18718F auf #FFFFFF 5,53 Ziel 4,5 Grafik Canvas: Schild „IHK“ #2f4f7a auf #fff 8,33 Ziel 4,5 Grafik Canvas: Schild „NEU“ (Orange dunkel) #D97008 auf #FEF3E2 3,05 Ziel 3 Grafik XP-Füllung gegen Spur (Balken mit Rahmen) #F08C14 auf #F3F4F6 2,25 Ziel 3 UNTER ZIEL Fokus Fokusrahmen Orange auf Seite #F08C14 auf #FAFBFC 2,39 Ziel 3 UNTER ZIEL Fokus Fokusrahmen Orange auf Karte #F08C14 auf #FFFFFF 2,48 Ziel 3 UNTER ZIEL Fokus Fokusrahmen Orange im Kopf #F08C14 auf #2D2D2D 5,55 Ziel 3 Unter Ziel ist nur Orange als Grafik: #F08C14 erreicht auf hellem Grund höchstens 2,48 zu 1. Das alte Engine-Schema lag darunter (Fokusrahmen 1,94 bis 2,25, XP-Füllung 1,88). Seit 20.10.2026 hat die Engine die Variable --fokus: hier CI-Blau dunkel #18718F (5,34 auf der Seite, 5,53 auf Karten, 4,98 bis 5,04 auf den Tönungen), im dunklen Kopf Orange (5,55). Die XP-Zahl steht als Text neben dem Balken. */ :root { /* Grundfarben der Oberfläche */ --himmel: #FAFBFC; /* Seitengrund, CI Background */ --wand: #FFFFFF; /* Karten, Räume, Stand-Anzeige im Kopf */ --boden: #F3F4F6; /* Etagenschilder, Spur der Balken, CI Gray-100 */ --tinte: #2D2D2D; /* Schrift, Rahmen, Schatten, CI Dark */ --tinte2: #505050; /* Nebentext, CI Gray-700 */ --holz: #18718F; /* Dachband der Häuser, Etiketten, Punkte: CI-Blau als Text */ --holz-hell: #FEF3E2; /* Fehlerkiste */ --wald: #18718F; /* Hauptknopf mit weißer Schrift, Rückmeldung, Häkchen, Video- und Unterlagensymbol */ --wald-hell: #E6F6F9; /* CI Blau hell: Rückmeldung, Grund der Raumbilder */ --gold: #F08C14; /* CI Orange: Fortschritt, Knopf „Los geht’s“, Boss, immer mit dunkler Schrift */ --gold-hell: #FEF3E2; /* CI Orange hell: gewählte Antwort, Hinweise, Abzeichen */ --rot: #B91C1C; --rot-hell: #FDECEC; --gruen: #157A3B; --gruen-hell: #E8F5EC; --keller: #383838; /* Grundlagen-Keller als dunkles Band wie der Kopf */ --keller-wand: #2D2D2D; /* Neutrale Töne der Oberfläche */ --zettel: #FAFBFC; --strich: #D1D5DB; /* CI Gray-300 */ --grau-hell: #C9CDD1; /* Schrift auf dunklem Grund (Kellerschild) */ --tinte-aus: #6B6B6B; --holz-fuge: #18718F; /* gleich --holz: Dach als ruhiges Band ohne Holzfugen */ --stern-leer: #7A7A7A; /* CI Gray-500 */ --stern-voll: #D97008; /* CI Orange dunkel */ --abzeichen-rand: #8C9198; --schleier: rgba(45, 45, 45, .55); --schleier-sheet: rgba(45, 45, 45, .45); --sheet-schatten: rgba(45, 45, 45, .12); --vid-schleier: rgba(24, 24, 24, .75); --fokus: #18718F; /* Fokusrahmen in CI-Blau dunkel: 5,53 zu 1 auf der Seite (Orange #F08C14 kommt höchstens auf 2,48) */ --browserleiste: #2D2D2D; /* Browserleiste am Handy wie der dunkle Kopf */ /* Schriften: CI-Schriften, seit 20.10.2026 selbst gehostet in der Engine (static/fonts/schriften.css) */ --f-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --f-text: "DM Sans", "Segoe UI", system-ui, sans-serif; /* Raumhintergründe: die vier CI-Tönungen aus V2 (Blau hell, Orange hell, Grün hell, Grau) im Wechsel */ --raum-bg-archiv: #F3F4F6; --raum-bg-halle: #FEF3E2; --raum-bg-vertrieb: #E6F6F9; --raum-bg-chef: #E6F6F9; --raum-bg-lager: #F3F4F6; --raum-bg-laden: #FEF3E2; --raum-bg-besprechung: #E8F5EC; --raum-bg-kanzlei: #F3F4F6; --raum-bg-markt: #FEF3E2; --raum-bg-lehrwerkstatt: #E8F5EC; --raum-bg-schule: #FEF3E2; --raum-bg-kammer: #F3F4F6; --raum-bg-pruefung: #F3F4F6; --raum-bg-praxis: #E6F6F9; /* Requisiten: Werte aus der Zeichnung in v2.html; Holzmöbel bleiben, ruhiger */ --raum-linie: #2D2D2D; --raum-bodenschatten: rgba(45, 45, 45, .07); --raum-holz: #B98552; /* eigener Wert, weil --holz jetzt Blau ist */ --raum-holz-fuge: #8F6A43; --raum-rot: #D97008; /* Markise, Schild „NEU“, Kurve: Orange dunkel wie in V2 */ --raum-gruen: #18718F; /* Dreieck im Fenster, Tafelstrich, Schild „Prüfungsausschuss“ */ --raum-gold: #F08C14; --raum-blau: #3CB4C8; /* CI Blau */ --raum-oliv: #8A9290; --raum-pflanze: #3F7A52; --raum-metall: #8A9290; --raum-saegeblatt: #D1D5DB; --raum-werkzeugwand: #E8DDC8; --raum-hobelbank: #C99A62; --raum-werkstueck: #E3C08A; /* Figuren: nur der Schatten, ohne Braunstich */ --figur-schatten: rgba(45, 45, 45, .16); /* Neu, nur für die vier Kopfregeln unten */ --kopf-grund: #2D2D2D; /* CI Dark */ --kopf-kante: #F08C14; /* orange Unterkante wie in den anderen internen Apps */ --kopf-text: #FFFFFF; --kopf-text2: #C9CDD1; /* Untertitel auf Dunkel, Wert aus V2 */ } /* ---------- Dunkler Kopf (V2) ---------- 1. Fläche: .kopf liegt in .wrap (höchstens 1080 px breit). Das Band soll über die volle Fensterbreite und bis an den oberen Rand reichen, ohne seitliches Scrollen und ohne die Abstände der Engine (padding-block je Breite) zu überschreiben. border-image mit outset malt außerhalb des Kastens, ohne Platz zu belegen und ohne Überlauf (zählt als Tintenüberlauf, löst kein Scrollen aus). Unten 4 px orange Kante, darunter Abstand zum Inhalt. */ .kopf { border-image-source: linear-gradient(to top, var(--kopf-kante) 0 4px, var(--kopf-grund) 4px); border-image-slice: 0 fill; border-image-outset: 100vmax 100vmax 0; margin-bottom: 18px; } /* 2. Titel und Untertitel hell, Bindestrich im Namen orange: nur die Variablen innerhalb der Marke umsetzen, damit die helle Stand-Anzeige (HUD) im Kopf ihre dunkle Schrift behält. */ .kopf .marke { color: var(--kopf-text); --tinte2: var(--kopf-text2); --holz: var(--gold); } /* 3. Links im Kopf (Adminbereich, Impressum, Datenschutz: „zur Lernwelt“) hätten sonst Browserblau auf Dunkel. */ .kopf .marke a { color: var(--kopf-text); } /* Fokusrahmen auf dem dunklen Kopf in Orange (5,55 zu 1), CI-Blau käme dort nur auf 2,49 */ .kopf .marke :focus-visible { outline-color: var(--kopf-kante); } /* 4. Logo: Die Farbfassung hat einen dunkelgrauen Schriftzug und verschwindet auf #2D2D2D (Brand-Doku). Statt die Datei zu tauschen oder zu filtern, liegt sie unverändert auf einer weißen Plakette. Bringt das Produkt später die helle Fassung als eigenes static/logo.png mit, muss diese Regel weg (sonst Weiß auf Weiß). */ .kopf .logo { padding: 6px 10px; background: var(--weiss); border-radius: 10px; }