/* VENDORED aus hornse/ci-css v1.9.0 – dort ändern, hierher kopieren! */ /* ============================================================ ci-tokens.css – Design-Tokens der FRG-Projektreihe Stufe 1 von 2. Enthält ausschließlich Werte, keine Regeln. Diese Datei ist die einzige Stelle, an der Farben, Radien, Abstände und Schriftgrößen festgelegt werden. Wer eine Farbe ändern will, ändert sie hier – und zwar im Repo hornse/ci-css, nicht in der vendored Kopie eines Projekts. Einbindung: siehe EINBINDUNG.md NAMEN, DIE NICHT ZU ERRATEN SIND. Ein geratener Tokenname richtet mehr an als ein geratener Klassenname: var() ohne Ersatzwert ist invalid at computed-value time – nicht der Wert fällt aus, sondern die GANZE Deklaration. Ein erfundener Radiusname hat so sieben Tage lang Ecken eckig gemacht, ohne dass etwas gemeldet hat. Deshalb stehen die Radien hier beim Namen, bevor jemand einen erfindet: --ci-radius-klein kleine Kacheln und Inline-Marken, Elemente von etwa einer Zeilenhöhe --ci-radius Knöpfe, Felder --ci-radius-gross Karten --ci-radius-pille was ganz rund sein soll Die Werte stehen unten bei den Tokens, nicht hier – eine zweite Stelle veraltet. Copyright (C) 2026 Sebastian Horn, Friedrich-Rückert-Gymnasium SPDX-License-Identifier: GPL-3.0-or-later ============================================================ */ :root { /* ---- Neutrale Palette ---------------------------------- Eine einzige Graustufenreihe für alle Projekte. Die Werte sind leicht ins Blaue gezogen, damit sie neben den Akzentfarben nicht schmutzig wirken. */ --ci-grau-50: #f4f6f9; --ci-grau-100: #e8ecf1; --ci-grau-200: #d9e0e8; --ci-grau-300: #bcc6d2; --ci-grau-500: #697687; /* AA gegen Weiß: 4.62 */ --ci-grau-600: #5b6773; --ci-grau-800: #333e4a; --ci-grau-900: #1c2733; /* ---- Flächen ------------------------------------------- */ --ci-grund: var(--ci-grau-50); /* Seitenhintergrund */ --ci-flaeche: #ffffff; /* Karten, Formulare */ --ci-flaeche-2: var(--ci-grau-100); /* eingelassene Bereiche */ /* ---- Text ---------------------------------------------- */ --ci-text: var(--ci-grau-900); --ci-text-blass: var(--ci-grau-600); /* Hilfstexte, Beschriftungen */ --ci-text-schwach: var(--ci-grau-500); /* Platzhalter, Metadaten */ /* Auch der schwächste Textton erreicht gegen Weiß den WCAG-Kontrast AA (4.5). Ein Platzhalter, den man nicht lesen kann, ist kein gestalterisches Detail, sondern ein Fehler. tests/pruefe.sh rechnet das bei jedem Lauf nach. */ /* ---- Linien -------------------------------------------- */ --ci-linie: var(--ci-grau-200); --ci-linie-stark: var(--ci-grau-300); /* ---- Akzent ------------------------------------------- Vorgabe ist das Blau des Schullogos. Jedes Projekt setzt seine eigene Farbe über das Attribut data-projekt am -Element (siehe unten) oder überschreibt die vier Variablen direkt. Die vier gehören zusammen: --ci-akzent Knopfflächen, aktive Zustände --ci-akzent-hover dieselbe Farbe, etwas heller --ci-akzent-flaeche sehr helle Tönung als Hintergrund --ci-akzent-text lesbare Schrift AUF der Tönung Wer eine neue Farbe einträgt, muss alle vier setzen. */ --ci-akzent: #1d4e89; --ci-akzent-hover: #2c6cb8; --ci-akzent-flaeche: #e6f1fb; --ci-akzent-text: #0c447c; /* ---- Projektpalette ------------------------------------- Derselbe Textton wie --ci-akzent-text je Projektblock, aber hier die EINE Quelle: am :root und damit unabhängig von data-projekt verfügbar. Gebraucht von Übersichtsseiten, die mehrere Projekte gleichzeitig zeigen — dort kann data-projekt nicht greifen, weil es nur einen Wert je Dokument gibt. Die [data-projekt="…"]-Blöcke weiter unten referenzieren diese Werte über var() statt sie zu wiederholen. Damit kann --ci-akzent-text eines Blocks nicht mehr von hier abweichen — es gibt nur noch eine Stelle, an der der Wert steht. */ --ci-farbe-sprechtag: #0c447c; --ci-farbe-fachkonferenzen: #1f4034; --ci-farbe-projektstunden: #2b5009; --ci-farbe-schulprozesse: #3c3489; --ci-farbe-signage: #712b13; --ci-farbe-lernzeiten: #09474e; --ci-farbe-kurse: #54244b; /* ---- Rückmeldungen ------------------------------------- */ --ci-erfolg: #1e7d3e; --ci-erfolg-flaeche: #f1f8f3; --ci-erfolg-text: #145c2c; --ci-warnung: #8a6a12; --ci-warnung-flaeche: #fdf8ec; --ci-warnung-text: #6b5310; --ci-fehler: #a8322d; --ci-fehler-flaeche: #fbf1f0; --ci-fehler-text: #7d2622; /* ---- Breiten ------------------------------------------- Der Inhaltsbereich bekommt eine Obergrenze, aber eine großzügige. 60rem stammen aus dem Fließtextsatz und sind für ein Bedienwerkzeug zu knapp; ohne jede Grenze würde ein Titelfeld auf einem breiten Bildschirm 1800px breit, und der Weg vom Label zum Feldende wäre länger, als das Auge folgen mag. Die eigentliche Lösung gegen verschenkten Platz ist nicht die breitere Zeile, sondern die zweite Spalte - siehe .ci-raster. */ --ci-inhalt-breite: 76rem; /* 1216px */ /* Fließtextbreite. Das sind die 60rem, die der Absatz darüber nennt und für ein Bedienwerkzeug verwirft - für eine Hilfe-, Impressums- oder Datenschutzseite gilt der Einwand nicht: Sie IST Fließtext. Der Wert ist von dort übernommen und nicht neu hergeleitet; es gibt ihn nur noch nicht als Klasse. Siehe .ci-inhalt-innen--lesen in ci-shell.css. */ --ci-lese-breite: 60rem; /* 960px */ /* Für eine Seite, die aus genau EINEM Formular besteht: Anmeldung, Passwortwechsel, Bestätigungsdialog. Dort steht sonst eine Karte in voller Inhaltsbreite um ein Formular von --ci-feld-breite - dreimal so breit wie ihr Inhalt. Der Wert ist nicht frei gewählt: Eine .ci-karte trägt 1.25rem Polsterung je Seite und 1px Rahmen. 34rem + 2 * 1.25rem = 36.5rem ist das Mindestmaß, damit das Feld seine eigene Grenze überhaupt erreicht; 38rem lassen etwas Luft. Das Gegenargument gegen breite Zeilen - "die Lösung ist die zweite Spalte" - greift hier nicht, weil es bei einer Anmeldung keine zweite Spalte gibt. */ --ci-formular-breite: 38rem; /* 608px */ /* Obergrenze für Eingabefelder. Sie gilt AUCH in breiten Ansichten: Die Grenze wandert damit vom Container auf das Bedienelement. */ --ci-feld-breite: 34rem; /* 544px */ /* Kleinste sinnvolle Kartenbreite im Raster. Darunter bricht der Inhalt einer Bildschirmkarte um. */ --ci-raster-min: 22rem; /* 352px */ /* ZWEITE Größe, nicht eine andere: 22rem sind für eine Bildschirmkarte richtig und bleiben unverändert. Auf einem Telefon ergeben sie aber immer eine Spalte, auch dort, wo zwei schmale Kacheln nebeneinander gehören. 9.5rem ist die größte halbe rem, bei der zwei Spalten auf ein Telefon von 360px passen: .ci-inhalt polstert unter 48rem mit 1rem je Seite, bleiben 328px; 2 * 152px + 16px Spalt = 320px. Bei 10rem wären es 336px und damit wieder eine Spalte. Siehe .ci-raster--schmal in ci-komponenten.css. */ --ci-raster-min-schmal: 9.5rem; /* 152px */ /* ---- Form ---------------------------------------------- */ /* 4px, nicht 6: --ci-radius (8px) sitzt an Knöpfen von --ci-beruehrung-min (44px) - knapp 0,18 der Höhe. Dasselbe Verhältnis an einem Element von etwa einer Zeilenhöhe (1rem ergibt rund 19px Inhaltshöhe) sind 3,5px. 4px ist die nächste ganze Stufe und zugleich die Hälfte der Basis. 6px wäre nur ein Viertel kleiner und an einer 19px hohen Marke von 8px nicht zu unterscheiden - ein Token, dessen Wirkung man nicht sieht, wird wieder geraten. */ --ci-radius-klein: 4px; /* kleine Kacheln, Inline-Marken */ --ci-radius: 8px; /* Knöpfe, Felder */ --ci-radius-gross: 10px; /* Karten */ --ci-radius-pille: 999px; /* Marken */ /* Kleinstes Ziel für einen Finger. Gilt NUR unter @media (pointer: coarse) - siehe .ci-knopf in ci-komponenten.css. Als Token, damit ein Projekt das Maß für eigene Bedienelemente übernehmen kann, statt 44px abzuschreiben: genau das ist in lernzeiten passiert. */ --ci-beruehrung-min: 44px; /* ---- Abstände ----------------------------------------- Vier Stufen genügen. Mehr Auswahl führt nur dazu, dass in jedem Projekt eine andere gewählt wird. */ --ci-abstand-xs: .35rem; --ci-abstand-s: .6rem; --ci-abstand-m: 1rem; --ci-abstand-l: 1.5rem; --ci-abstand-xl: 2.5rem; /* ---- Schrift ------------------------------------------ Systemschriften, bewusst ohne Webfont: Auf einem Schul-iPad im WLAN der Turnhalle ist eine nicht geladene Schrift ärgerlicher als eine, die überall etwas anders aussieht. Nebenbei erspart es eine Verbindung zu Google Fonts und damit eine datenschutzrechtliche Frage. */ --ci-schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ci-schrift-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --ci-groesse-klein: .85rem; --ci-groesse-normal: 1rem; --ci-groesse-gross: 1.1rem; --ci-groesse-titel: 1.4rem; --ci-zeilenhoehe: 1.55; /* ---- Wirkung ------------------------------------------- */ --ci-schatten: 0 1px 2px rgba(28, 39, 51, .08), 0 4px 12px rgba(28, 39, 51, .05); /* Fuer Elemente, die beim Ueberfahren aufsteigen: Kacheln, anklickbare Karten. Deutlicher als --ci-schatten, sonst waere der Unterschied nicht wahrnehmbar. */ --ci-schatten-gross: 0 4px 12px rgba(28, 39, 51, .12), 0 1px 3px rgba(28, 39, 51, .08); /* Der Fokusring ist kein Schmuck, sondern die einzige Orientierung für alle, die per Tastatur bedienen. Er ist deshalb absichtlich deutlich sichtbar. */ --ci-fokus: 0 0 0 3px var(--ci-akzent-flaeche), 0 0 0 5px var(--ci-akzent); --ci-zeit: .15s; } /* ============================================================ Akzentfarben je Projekt Einbinden mit . Die Farben sind so gewählt, dass Weiß auf der Akzentfläche und --ci-akzent-text auf --ci-akzent-flaeche jeweils den WCAG-Kontrast AA erreichen. ============================================================ */ /* Aus sprechtag übernommen (dort --blau). */ [data-projekt="sprechtag"] { --ci-akzent: #1d4e89; --ci-akzent-hover: #2c6cb8; --ci-akzent-flaeche: #e6f1fb; --ci-akzent-text: var(--ci-farbe-sprechtag); } /* Aus fachkonferenzen übernommen (dort --tafel). */ [data-projekt="fachkonferenzen"] { --ci-akzent: #2e5b4c; --ci-akzent-hover: #3d7665; --ci-akzent-flaeche: #e6f2ee; --ci-akzent-text: var(--ci-farbe-fachkonferenzen); } /* Projektstunden führte bis August 2026 #2d5a3d – ein Grün, das dem Tafelgrün von fachkonferenzen (#2e5b4c) so nahe kommt, dass beide Anwendungen aus dem Gedächtnis nicht auseinanderzuhalten waren. Damit wäre der Zweck der Akzentfarbe verfehlt: beim Tabwechsel erkennen, wo man ist. Der Ton ist deshalb kräftiger und gelbstichiger gewählt – nah genug am Gewohnten, deutlich genug daneben. */ [data-projekt="projektstunden"] { --ci-akzent: #3b6d11; --ci-akzent-hover: #498218; --ci-akzent-flaeche: #eef5e4; --ci-akzent-text: var(--ci-farbe-projektstunden); } /* ACHTUNG: Für schulprozesse lag mir kein Farbwert aus dem Repo vor. Der Wert ist nach dem Screenshot geschätzt und gehört beim ersten Einbinden geprüft. */ [data-projekt="schulprozesse"] { --ci-akzent: #534ab7; --ci-akzent-hover: #6a61cc; --ci-akzent-flaeche: #eeedfe; --ci-akzent-text: var(--ci-farbe-schulprozesse); } [data-projekt="signage"] { --ci-akzent: #993c1d; --ci-akzent-hover: #b8532f; --ci-akzent-flaeche: #faece7; --ci-akzent-text: var(--ci-farbe-signage); } /* Petrol. Die größte Lücke im Farbkreis liegt zwischen dem Tafelgrün von fachkonferenzen (160°) und dem Blau von sprechtag (213°); dieser Ton sitzt mittig darin und hat zu beiden 26° Abstand — mehr ist bei fünf belegten Tönen nicht zu holen. Bordeaux wäre rechnerisch weiter entfernt gewesen, läge aber im selben roten Bereich wie signage: „welches Rot war das nochmal" ist genau die Verwechslung, die die Akzentfarbe verhindern soll. */ [data-projekt="lernzeiten"] { --ci-akzent: #0b5c65; --ci-akzent-hover: #0e737e; --ci-akzent-flaeche: #edf9fa; --ci-akzent-text: var(--ci-farbe-lernzeiten); } /* Aubergine. Zwischen Indigo (245°) und Ziegelrot von signage (15°) liegt die größte verbliebene Lücke im Farbkreis, 130° breit. Mittig darin sind es 63° Abstand zu beiden Nachbarn – mehr als doppelt so viel wie Petrol hatte, und bei sieben Projekten der letzte wirklich freie Platz. */ [data-projekt="kurse"] { --ci-akzent: #6b2d5f; --ci-akzent-hover: #8a3a7a; --ci-akzent-flaeche: #f9edf6; --ci-akzent-text: var(--ci-farbe-kurse); } /* ============================================================ Bewegung nur, wenn erwünscht ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --ci-zeit: 0s; } }