/* =========================================================================== * Ski-Gilde Jülich — Design-Tokens * Einzige Quelle für Farbe, Größe, Abstand und Radius. * * GESTALTUNGSRICHTUNG „VEREINSBLATT" (Entscheidung 03.09.2026). * Ersetzt „Kante & Firn" aus Konzept Kapitel 3/4. Die Farbwerte und ihre * geprüften Kontraste aus 4.1/4.2 bleiben unverändert gültig — geändert sind * Schrift, Größenverhältnisse und die Frage, welche Fläche wo liegt: * * · eine Schriftfamilie (Barlow) statt zwei, keine Breitenachse * · Fließtext 21 px statt 19 px — Zielgruppe B (Konzept 2.2) * · Kopfzeile blue-700 statt blue-900, deutlich leichter * · kein Signalorange, kein geneigter Kantenstrich * · keine ganzflächig dunkle Sektion; Akzentflächen bleiben hell * · Karten mit 2 px Rahmen statt Haarlinie, symmetrisch statt versetzt * * Die Vorgängerrichtung liegt im Git unter Commit 45db6ea. * * REGEL (Konzept 0.4): In Templates stehen keine hartkodierten Farben, Größen * oder Fonts. Alles läuft über die --sg-*-Variablen hier. * * Alle Farbwerte sind in Konzept 4.2 nach WCAG 2.1 geprüft. Die Ratios stehen * als Kommentar an den Stellen, an denen sie beim Bauen gebraucht werden. * ======================================================================== */ :root { /* --- Blau, Primärachse (4.1) ------------------------------------------ */ --sg-blue-950: #041B2E; /* Footer, tiefste Ebene */ --sg-blue-900: #06263F; /* Dunkle Sektion „Nachtabfahrt", Header bei Scroll */ --sg-blue-800: #0A3559; /* Dunkle Flächen zweiter Ordnung, Overlays */ --sg-blue-700: #0E4573; /* PRIMARY — Buttons, Links, aktive Zustände */ --sg-blue-600: #12598F; /* Primary Hover, Icon-Flächen */ --sg-blue-500: #1A72B4; /* Interaktiv/Fokus auf hellem Grund */ --sg-blue-400: #3D93D1; /* Fokus-Ring auf dunklem Grund */ --sg-blue-300: #7BB8E4; /* Sekundärtext auf dunklem Grund */ --sg-blue-200: #B4D7F0; /* Zurückhaltender Text auf dunklem Grund */ --sg-blue-100: #DCEBF8; /* Badges, markierte Zellen */ --sg-blue-50: #EFF6FC; /* Sanfte Flächen, Zebrastreifen */ /* --- Signal, Akzentachse (4.1) ---------------------------------------- * * BINDEND (4.2, Ausnahmeregel 1): signal-500 und signal-400 NIEMALS als * Hintergrund unter weißem Text. Der Akzent-Button ist immer signal-600. * BINDEND (4.2, Ausnahmeregel 2): bedeutungstragende Signal-Elemente * wechseln mit dem Untergrund — hell: signal-600, dunkel: signal-400. * Dafür gibt es --sg-kante-farbe weiter unten. */ --sg-signal-700: #8F3406; /* Signaltext auf Weiß, kleine Größen (7.89:1) */ --sg-signal-600: #B44008; /* Akzent-Buttonfläche mit weißer Schrift (5.71:1) */ --sg-signal-500: #E0530A; /* Kante, Marker, Grafikflächen — nie unter Text */ --sg-signal-400: #F27A22; /* Akzent auf dunklem Grund */ --sg-signal-300: #F8C089; /* Akzenttext auf dunklem Grund (9.50:1 auf blue-900) */ --sg-signal-100: #FBEADA; /* Badge-Hintergrund */ /* --- Neutral & Fläche (4.1) ------------------------------------------- */ --sg-snow: #FAFCFD; /* Standard-Seitenhintergrund */ --sg-firn: #E4EEF5; /* Zweite helle Sektionsfläche */ --sg-white: #FFFFFF; /* Karten, Formularfelder */ --sg-ink: #0D1620; /* Fließtext, Überschriften */ --sg-slate-700: #33414F; /* Kräftiger Sekundärtext */ --sg-slate-600: #4A5A6B; /* Sekundärtext, Meta */ --sg-slate-500: #5A6978; /* Zurückgenommen — AA auf allen drei Flächen */ --sg-border: #D3DFE9; /* Dekorative Trennlinien */ --sg-border-strong: #6B8194; /* Rahmen interaktiver Elemente, WCAG 1.4.11 */ --sg-border-dark: #1F456B; /* Trennlinien in dunklen Sektionen */ /* --- Status (4.1) ------------------------------------------------------ */ --sg-success: #0F7A4F; /* 5.36:1 auf Weiß */ --sg-warning: #A8620A; /* 4.75:1 */ --sg-error: #B02A20; /* 6.54:1 */ /* --- Sektionskontext --------------------------------------------------- * Jede Sektion setzt diese um. Komponenten lesen NUR sie und funktionieren * dadurch auf jeder Fläche ohne Sonderregel. */ --sg-flaeche: var(--sg-snow); --sg-text: var(--sg-ink); --sg-text-leise: var(--sg-slate-500); --sg-text-kraeftig: var(--sg-slate-700); --sg-linie: var(--sg-border); --sg-link: var(--sg-blue-700); --sg-fokus: var(--sg-blue-500); --sg-karte: var(--sg-white); /* In dieser Richtung ohne geneigten Strich. Der Token bleibt, weil Aufzählungszeichen und Zeitleiste ihn weiterhin lesen. */ --sg-kante-farbe: var(--sg-blue-700); /* --- Schrift ----------------------------------------------------------- * EINE Familie: Barlow, selbst gehostet, vier Schnitte (11.4, 0.4). * Barlow ist schmallaufend und nüchtern — es trägt lange deutsche * Komposita in schmalen Spalten besser als eine breite Grotesk und wirkt * bei 21 px ruhig statt plakativ. * Der Editorial-Token bleibt bestehen, zeigt aber auf dieselbe Familie: * Berichte unterscheiden sich künftig über Größe und Zeilenlänge, nicht * über einen Schriftwechsel. */ --sg-font-ui: "Barlow", "Barlow Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --sg-font-editorial: var(--sg-font-ui); /* Größenskala, fluid. Der HTML-Root bleibt bei 16px — nie überschreiben, das bricht den Nutzer-Zoom. Die Display-Größen sind gegenüber „Kante & Firn" rund ein Drittel kleiner, der Fließtext dafür zwei Punkt größer: die Seite gewinnt an Ruhe und an Lesbarkeit zugleich. */ --sg-fs-display-xl: clamp(2rem, 1.4rem + 2.4vw, 3rem); /* max 48px */ --sg-fs-display-l: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); /* max 40px */ --sg-fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); /* max 32px */ --sg-fs-h3: clamp(1.1875rem, 1.05rem + .6vw, 1.4375rem); --sg-fs-body-l: 1.4375rem; /* 23px */ --sg-fs-body: 1.3125rem; /* 21px — Basis, Zielgruppe B */ --sg-fs-editorial: 1.3125rem; /* 21px, gleiche Familie */ --sg-fs-quote: clamp(1.3125rem, 1rem + 1.2vw, 1.75rem); --sg-fs-meta: 0.9375rem; /* 15px — kein Text darunter */ --sg-lh-display-xl: 1.12; --sg-lh-display-l: 1.16; --sg-lh-h2: 1.2; --sg-lh-h3: 1.3; --sg-lh-body: 1.6; --sg-lh-editorial: 1.7; --sg-lh-quote: 1.4; --sg-ls-display-xl: -0.015em; --sg-ls-display-l: -0.012em; --sg-ls-h2: -0.008em; --sg-ls-h3: 0; --sg-ls-meta: 0.08em; /* --- Abstände (4.4). Basis 4px, keine Zwischenwerte. ------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px; --sp-9: 64px; --sp-10: 80px; --sp-11: 96px; --sp-12: 128px; --sp-13: 160px; --sp-14: 200px; --sg-sektion-y: clamp(64px, 9vw, 160px); /* Sektions-Innenabstand */ --sg-rand: clamp(20px, 5vw, 64px); /* Seitenrand */ /* --- Inhaltsbreiten (4.4) --------------------------------------------- */ --w-text: 68ch; --w-content: 1180px; --w-wide: 1440px; /* --- Radien, Rahmen, Schatten (4.5) ------------------------------------ * Das Radius-System endet bei 4px. radius-full ist AUSSCHLIESSLICH für * Vorstandsporträts. Es gibt keinen Karten-Schatten — Tiefe entsteht * über Flächenkontrast, nicht über Weichzeichner. */ --radius-0: 0; --radius-sm: 0; --radius-md: 0; /* Vereinsblatt: durchgehend rechtwinklig */ --radius-full: 999px; /* AUSSCHLIESSLICH: Avatare im Vorstand */ --border-hair: 1px solid var(--sg-linie); --border-strong: 2px solid var(--sg-border-strong); --border-karte: 2px solid var(--sg-blue-700); /* Karten setzen sich über den Rahmen ab */ --kante-h: 3px; --kante-skew: 0deg; /* kein geneigtes Element mehr */ --kante-b: 0px; --shadow-overlay: 0 12px 40px -8px rgb(4 27 46 / .28); /* nur Overlays */ /* --- Bewegung (3.6) ---------------------------------------------------- */ --ease-aus: cubic-bezier(.16, 1, .3, 1); --t-schnell: 150ms; --t-normal: 200ms; --t-ruhig: 500ms; --t-linie: 1200ms; /* --- Sonstiges --------------------------------------------------------- */ --sg-header-h: 84px; } /* --------------------------------------------------------------------------- * Akzentsektion. Früher die ganzflächig dunkle „Nachtabfahrt" (Konzept 3.5) — * in dieser Richtung eine ruhige helle Fläche mit kräftigem Rahmen oben und * unten. Der Klassenname bleibt `--akzent`; Komponenten brauchen weiterhin * keine Sonderregel, weil nur der Kontext umgesetzt wird. * ------------------------------------------------------------------------ */ .sg-sektion--akzent { --sg-flaeche: var(--sg-blue-50); --sg-text: var(--sg-ink); --sg-text-leise: var(--sg-slate-600); --sg-text-kraeftig: var(--sg-slate-700); --sg-linie: #C6D6E6; --sg-karte: var(--sg-white); border-block: 2px solid var(--sg-blue-700); } /* Der Footer bleibt dunkel — er schließt die Seite ab und trägt keinen Fließtext, den Zielgruppe B lesen muss. */ .sg-footer { --sg-flaeche: var(--sg-blue-950); --sg-text: var(--sg-white); --sg-text-leise: var(--sg-blue-200); /* 10.26:1 */ --sg-text-kraeftig: var(--sg-blue-300); /* 7.24:1 */ --sg-linie: var(--sg-border-dark); --sg-link: var(--sg-white); --sg-fokus: var(--sg-blue-400); /* 5.24:1 */ --sg-karte: var(--sg-blue-800); --sg-kante-farbe: var(--sg-blue-300); } /* Zweite helle Sektionsfläche (Rhythmus 3.5). */ .sg-sektion--firn { --sg-flaeche: var(--sg-firn); --sg-karte: var(--sg-white); } .sg-sektion--snow { --sg-flaeche: var(--sg-snow); } .sg-sektion--weiss { --sg-flaeche: var(--sg-white); --sg-karte: var(--sg-firn); } /* Signal-Sektion (6.1 Block 7): der EINZIGE Ort auf der Startseite, an dem die Signalfarbe als Fläche auftritt. signal-100 ist warm und hell genug, dass ink darauf 15.9:1 erreicht. */ .sg-sektion--signal { --sg-flaeche: var(--sg-signal-100); --sg-karte: var(--sg-white); --sg-linie: #EBD3BC; } /* --------------------------------------------------------------------------- * Bewegung aus (3.6 — Pflicht). * Alle transform-Bewegungen weg, es bleibt ein Deckkraft-Übergang. * ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --t-schnell: 150ms; --t-normal: 150ms; --t-ruhig: 150ms; --t-linie: 0ms; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-property: opacity, color, background-color, border-color !important; transition-duration: 150ms !important; scroll-behavior: auto !important; } }