/* ============================================================ 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; /* --- 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; } /* ============================================================ SKIN: schule — hell, ruhig, serioes, viel Weissraum Elevation ueber weiche Schatten, groessere Radien, mehr Luft. ============================================================ */ [data-skin="schule"] { --bg: #F4F6FA; --surface: #FFFFFF; --surface-2: #F1F4F9; --surface-3: #E6EBF2; --surface-4: #D8E0EA; --border: #E3E8F0; --border-strong: #C8D2DF; --border-accent: rgba(33, 89, 199, 0.45); --text: #121824; --text-2: #2F3846; --subtext: #5A6472; --accent: #2159C7; --accent-hover: #1B4CAF; --accent-dim: #17408F; --accent-press: #123472; --accent-text: #FFFFFF; --accent-soft: rgba(33, 89, 199, 0.07); --accent-soft-strong: rgba(33, 89, 199, 0.16); /* Status — auf hellem Grund abgedunkelt, damit Text AA erreicht. */ --st-angefragt: #8A5D06; --st-dispatch: #1C63B0; --st-bestaetigt: #1D7A44; --st-eskaliert: #B3341C; --st-abgesagt: #5F6875; --st-storniert: #5F6875; --st-durchgefuehrt: #55429E; --soft-warn: rgba(138, 93, 6, 0.10); --soft-info: rgba(28, 99, 176, 0.10); --soft-ok: rgba(29, 122, 68, 0.10); --soft-err: rgba(179, 52, 28, 0.09); --soft-neutral: rgba(95, 104, 117, 0.10); --soft-violet: rgba(85, 66, 158, 0.10); --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; --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(33, 89, 199, 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(33, 89, 199, 0.18); --head-weight: var(--fw-semi); --head-spacing: var(--ls-tight); color-scheme: light; }