/* ============================================================ Parade der Kulturen — Design Tokens Zwei Skins, ein System. Umschaltung via data-skin="admin" -> dark (Admin + Trainer, Werkzeug-Look) data-skin="schule" -> light (Schule, seriös + modern) Bewusst neutral: kein Anbieter-Branding in den Tokens. Der Anzeigename kommt aus js/config.js (PLATTFORM_NAME). REGEL: Views verwenden ausschliesslich diese Variablen. Keine Hex-Werte, keine rgba()-Literale, keine px-Groessen in den Seiten. ============================================================ */ /* ============================================================ Skin-unabhaengige Konstanten ============================================================ */ :root { /* --- Schrift-Familien ------------------------------------------ Zwei Familien mit klarer Aufgabenteilung: head Sora — geometrisch, etwas eigenwillig, gibt Überschriften Charakter, ohne laut zu werden. body Inter — neutral und exzellent lesbar in kleinen Graden. Fällt eine Webschrift aus, greift dieselbe System-Kette. */ --font-head: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace; /* --- Markenfarben der Projekt-Website ------------------------- Abgelesen an paradederkulturen.com: Navy traegt alles, Gold setzt die Akzente. Das helle Gold der Website (#C79A44) erreicht als Textfarbe nur 2,6:1 und ist deshalb ausschliesslich Flaeche; fuer Text liegt ein abgedunkelter Ton daneben (5,0:1 auf Weiss). */ --marke-navy: #0E3C82; --marke-navy-tief: #14213A; --gold: #C79A44; --gold-text: #8F681F; --gold-soft: rgba(199, 154, 68, 0.14); /* --- Typo-Skala --------------------------------------------- Fuenf Stufen, mehr gibt es nicht: display Seitentitel (h1) h2 Sektionstitel h3 Kartentitel body Fliesstext small Sekundaertext tiny Meta micro Eyebrow / Badge (immer uppercase + letter-spacing) Jede Abweichung davon ist ein Fehler, kein Feature. */ --fs-micro: 0.6875rem; /* 11px */ --fs-tiny: 0.8125rem; /* 13px */ --fs-small: 0.875rem; /* 14px */ --fs-body: 1rem; /* 16px */ --fs-lead: 1.0625rem; /* 17px — Untertitel unter h1 */ --fs-h3: 1.0625rem; /* 17px — Kartentitel */ --fs-h2: clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem); --fs-h1: clamp(1.75rem, 1.45rem + 1.4vw, 2.2rem); --fs-kpi: clamp(1.6rem, 1.35rem + 1.1vw, 2rem); --fs-kpi-lg: clamp(1.9rem, 1.5rem + 1.8vw, 2.5rem); /* Zeilenhoehen */ --lh-tight: 1.18; /* Headlines */ --lh-snug: 1.35; /* dichte Meta-Bloecke */ --lh-body: 1.6; /* Fliesstext */ /* Gewichte */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* Laufweite */ --ls-tight: -0.028em; /* grosse Headlines (Sora läuft breiter) */ --ls-snug: -0.016em; /* mittlere Headlines */ --ls-wide: 0.06em; /* Eyebrows / Badges (uppercase) */ /* --- Spacing-Skala: 4px-Raster, eine Reihe fuer alles --- */ --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.5rem; /* 24 */ --s-6: 2rem; /* 32 */ --s-7: 3rem; /* 48 */ --s-8: 4rem; /* 64 */ /* Semantische Abstaende — gleiche Beziehung = gleicher Wert. Diese vier steuern den Rhythmus JEDER Seite. */ --gap-field: var(--s-2); /* Label -> Feld */ --gap-stack: var(--s-4); /* Element -> Element in einer Gruppe */ --gap-card: var(--s-5); /* Innenabstand einer Karte */ --gap-section: var(--s-6); /* Sektion -> Sektion */ --gap-page: var(--s-7); /* Seitenkopf -> Inhalt */ /* --- Breiten --- */ --maxw: 1180px; --maxw-narrow: 780px; --maxw-content: 940px; /* Listenseiten: ruhiger als volle Breite */ --maxw-prose: 68ch; /* Lesbare Zeilenlaenge fuer Fliesstext */ /* --- Bedienelemente: mobile-first, Direktion bucht am Handy --- 44px ist die Untergrenze, nicht der Zielwert. */ --ctl-sm: 36px; /* nur Desktop; mobil auf --tap hochgezogen */ --ctl: 44px; --ctl-lg: 52px; --tap: 44px; --tap-lg: 52px; /* --- Bewegung --- */ --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 240ms cubic-bezier(0.16, 0.8, 0.3, 1); /* --- z-index-Leiter: eine Quelle, keine Zufallszahlen --- */ --z-sticky: 100; --z-stickybar: 400; --z-tour: 9000; --z-toast: 9500; --z-dev: 9800; } /* ============================================================ SKIN: admin / trainer — Dark, Werkzeug-Look Tiefenstaffelung: bg < surface < surface-2 < surface-3. Auf dark ersetzt eine Aufhellung den Schatten (Schatten sind auf dunklem Grund unsichtbar und wirken nur matschig). ============================================================ */ [data-skin="admin"] { --bg: #0B0E13; --surface: #131820; --surface-2: #1C222C; --surface-3: #272E3A; --surface-4: #333C4B; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.18); --border-accent: rgba(111, 176, 255, 0.55); --text: #F3F5F9; --text-2: #D3D9E3; --subtext: #A6AFBE; --accent: #6FB0FF; --accent-hover: #8CC0FF; --accent-dim: #4C8DFF; --accent-press: #3C79E0; --accent-text: #08111F; --accent-soft: rgba(111, 176, 255, 0.14); --accent-soft-strong: rgba(111, 176, 255, 0.28); /* Status — auf dunklem Grund aufgehellt, damit Text AA erreicht. */ --st-angefragt: #E0A93A; --st-dispatch: #6FB0FF; --st-bestaetigt: #4ED186; --st-eskaliert: #FF8A6B; --st-abgesagt: #9AA3B2; --st-storniert: #9AA3B2; --st-durchgefuehrt: #A48DFF; /* Status-Flaechen (fuer Badges, Notices, Pills) */ --soft-warn: rgba(224, 169, 58, 0.16); --soft-info: rgba(111, 176, 255, 0.16); --soft-ok: rgba(78, 209, 134, 0.16); --soft-err: rgba(255, 138, 107, 0.16); --soft-neutral: rgba(154, 163, 178, 0.16); --soft-violet: rgba(164, 141, 255, 0.18); --radius-sm: 5px; --radius: 7px; --radius-lg: 10px; --radius-xl: 12px; --radius-pill: 999px; /* Elevation = Aufhellung + harter, tiefer Schatten fuer Overlays. */ --shadow-xs: none; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.62); --shadow: var(--shadow-sm); /* Oberflaechen-Feinheiten ------------------------------------ Auf dunklem Grund traegt nicht der Schatten die Tiefe, sondern die Kante: eine 1px-Innenlinie in Weiss ~6 % hebt jede Flaeche sichtbar vom Hintergrund ab. Dazu ein kaum wahrnehmbarer Verlauf von oben, damit die Flaeche nicht tot wirkt. */ --card-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.06); --card-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0) 62%); --ring-hover: 0 0 0 1px rgba(111, 176, 255, 0.30); /* Hover-Aufhellung statt Anheben — Werkzeuge huepfen nicht. */ --lift-hover: none; --lift-press: none; --scrollbar-thumb: rgba(255, 255, 255, 0.16); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.28); --scrollbar-track: transparent; --backdrop: rgba(4, 6, 10, 0.66); --selection: rgba(111, 176, 255, 0.30); --head-weight: var(--fw-semi); --head-spacing: var(--ls-snug); color-scheme: dark; } /* ============================================================ WERKZEUG-ANSICHTEN IN HELL ([data-skin="admin"][data-theme="light"]) Dieselben Ansichten wie die dunkle Haut, nur umgedreht. Wichtig ist die Richtung der Tiefenstaffelung: auf dunklem Grund heisst "hoeher" heller, auf hellem Grund weisser. Die Seitenflaeche ist deshalb der dunkelste Ton, die Karte ist Weiss, und die Fuellungen darueber (Knopfflaechen, Hover, Einfassungen) werden schrittweise grauer. Genau diese Ordnung nutzt die Schul-Haut seit jeher; die Bausteine behalten dadurch ohne Ausnahme ihren Kontrast. Die Farbwelt ist dieselbe wie in der Schul-Haut (Navy der Projekt-Website), damit beide Haeute zusammengehoeren. ============================================================ */ [data-skin="admin"][data-theme="light"] { --bg: #EEF1F7; --surface: #FFFFFF; --surface-2: #F2F5FA; --surface-3: #E7ECF4; --surface-4: #D9E0EB; --border: #E3E8F0; --border-strong: #C6D0DE; --border-accent: rgba(14, 60, 130, 0.45); --text: #14213A; --text-2: #2E3C55; --subtext: #4A5568; --accent: #0E3C82; --accent-hover: #0B3169; --accent-dim: #0A2C5E; --accent-press: #081F45; --accent-text: #FFFFFF; --accent-soft: rgba(14, 60, 130, 0.07); --accent-soft-strong: rgba(14, 60, 130, 0.16); /* Status — auf hellem Grund abgedunkelt, damit Text AA erreicht. Massgeblich ist nicht die weisse Karte, sondern der unguenstigste Fall: die Statusfarbe steht auf ihrer eigenen Toenung ueber der tiefsten Fuellflaeche (--surface-3). Darauf gerechnet bleibt der schlechteste Wert bei 4,8:1. */ --st-angefragt: #795205; --st-dispatch: #19579B; --st-bestaetigt: #1A6B3C; --st-eskaliert: #9E2E19; --st-abgesagt: #545C67; --st-storniert: #545C67; --st-durchgefuehrt: #4B3A8B; --soft-warn: rgba(121, 82, 5, 0.10); --soft-info: rgba(25, 87, 155, 0.10); --soft-ok: rgba(26, 107, 60, 0.10); --soft-err: rgba(158, 46, 25, 0.09); --soft-neutral: rgba(84, 92, 103, 0.10); --soft-violet: rgba(75, 58, 139, 0.10); /* Radien bleiben knapp: ein Werkzeug, keine Broschuere. */ --radius-sm: 5px; --radius: 7px; --radius-lg: 10px; --radius-xl: 12px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px rgba(16, 24, 40, 0.05); --shadow-md: 0 2px 4px -1px rgba(16, 24, 40, 0.05), 0 10px 22px -6px rgba(16, 24, 40, 0.10); --shadow-lg: 0 8px 12px -6px rgba(16, 24, 40, 0.06), 0 28px 52px -12px rgba(16, 24, 40, 0.16); --shadow: var(--shadow-sm); /* Innenkante und Verlauf waren Mittel gegen die Dunkelheit. Auf hellem Grund traegt der Schatten die Tiefe, beides bleibt aus. */ --card-edge: 0 0 #0000; --card-grad: none; --ring-hover: 0 0 0 1px rgba(14, 60, 130, 0.16); /* Werkzeuge huepfen auch in Hell nicht. */ --lift-hover: none; --lift-press: none; --scrollbar-thumb: rgba(18, 24, 36, 0.20); --scrollbar-thumb-hover: rgba(18, 24, 36, 0.34); --scrollbar-track: transparent; --backdrop: rgba(16, 24, 40, 0.42); --selection: rgba(14, 60, 130, 0.18); --head-weight: var(--fw-semi); --head-spacing: var(--ls-snug); color-scheme: light; } /* ============================================================ SKIN: schule — hell, ruhig, serioes, viel Weissraum Elevation ueber weiche Schatten, groessere Radien, mehr Luft. ============================================================ */ [data-skin="schule"] { --bg: #F7F8FB; --surface: #FFFFFF; --surface-2: #F0F3F8; --surface-3: #E4E9F1; --surface-4: #D6DEE9; --border: #E5E9F1; --border-strong: #C7D1DE; --border-accent: rgba(14, 60, 130, 0.45); --text: #14213A; --text-2: #2E3C55; --subtext: #4A5568; --accent: #0E3C82; --accent-hover: #0B3169; --accent-dim: #0A2C5E; --accent-press: #081F45; --accent-text: #FFFFFF; --accent-soft: rgba(14, 60, 130, 0.07); --accent-soft-strong: rgba(14, 60, 130, 0.16); /* Status — auf hellem Grund abgedunkelt, damit Text AA erreicht. Massgeblich ist nicht die weisse Karte, sondern der unguenstigste Fall: die Statusfarbe steht auf ihrer eigenen Toenung ueber der tiefsten Fuellflaeche (--surface-3). Darauf gerechnet bleibt der schlechteste Wert bei 4,8:1. */ --st-angefragt: #795205; --st-dispatch: #19579B; --st-bestaetigt: #1A6B3C; --st-eskaliert: #9E2E19; --st-abgesagt: #545C67; --st-storniert: #545C67; --st-durchgefuehrt: #4B3A8B; --soft-warn: rgba(121, 82, 5, 0.10); --soft-info: rgba(25, 87, 155, 0.10); --soft-ok: rgba(26, 107, 60, 0.10); --soft-err: rgba(158, 46, 25, 0.09); --soft-neutral: rgba(84, 92, 103, 0.10); --soft-violet: rgba(75, 58, 139, 0.10); /* Die Website rundet deutlich weicher: Karten 14 bis 16px, Knoepfe als Pille. */ --radius-sm: 9px; --radius: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px rgba(16, 24, 40, 0.05); --shadow-md: 0 2px 4px -1px rgba(16, 24, 40, 0.05), 0 10px 22px -6px rgba(16, 24, 40, 0.10); --shadow-lg: 0 8px 12px -6px rgba(16, 24, 40, 0.06), 0 28px 52px -12px rgba(16, 24, 40, 0.16); --shadow: var(--shadow-sm); /* Auf hellem Grund macht der Schatten die Tiefe — Innenkante und Verlauf bleiben aus, sonst wirkt die Flaeche schmutzig. */ --card-edge: 0 0 #0000; --card-grad: none; --ring-hover: 0 0 0 1px rgba(14, 60, 130, 0.16); /* Auf hell darf eine Karte beim Hover leicht steigen. */ --lift-hover: translateY(-2px); --lift-press: translateY(0); --scrollbar-thumb: rgba(18, 24, 36, 0.20); --scrollbar-thumb-hover: rgba(18, 24, 36, 0.34); --scrollbar-track: transparent; --backdrop: rgba(16, 24, 40, 0.42); --selection: rgba(14, 60, 130, 0.18); --head-weight: var(--fw-semi); --head-spacing: var(--ls-tight); color-scheme: light; }