/* ============================================================ 01-TOKENS.CSS Design-Tokens — KI/IT CLUB ------------------------------------------------------------ Diese Datei enthält alle zentralen Design-Werte als CSS Custom Properties. Alle weiteren CSS-Module greifen ausschließlich auf diese Variablen zu. Dadurch lassen sich Farben, Abstände, Schriftgrößen und weitere Design-Werte zentral anpassen. Struktur, Reihenfolge und Variablennamen sind identisch mit der ecp-Vorlage. Geändert sind ausschließlich die WERTE. Club-spezifische Ergänzungen stehen im Block ganz unten. ============================================================ */ :root { /* ========================================================== FARBEN ========================================================== */ /* Primäre Markenfarbe — beim Club das Neon-Grün, nicht das ecp-Lime */ --cd-color-primary: #D7D350; /* Dunklere Variante für Hover-Zustände */ --cd-color-primary-soft: #C0BC3C; /* Transparente Variante für dezente Hintergründe */ --cd-color-primary-tint: rgba(215, 211, 80, 0.10); /* Haupt-Hintergrundfarbe der Website */ --cd-color-bg: #101D28; /* Hintergrundfarbe für Cards und hervorgehobene Flächen */ --cd-color-surface: #274057; /* Standardfarbe für Überschriften und Haupttexte */ --cd-color-text: #FAFAFA; /* Gedämpfte Textfarbe für Auszüge, Autor und Datum */ --cd-color-text-muted: #DDDDDD; /* Textfarbe auf Elementen mit Primärfarbe */ --cd-color-text-on-primary: #101D28; /* Dezente Rahmen und Trennlinien */ --cd-color-border: rgba(255, 255, 255, 0.12); /* ========================================================== TYPOGRAFIE ========================================================== */ /* Schriftfamilien */ --cd-font-family: "Montserrat", Arial, sans-serif; --cd-font-heading: "Bebas Neue", "Montserrat", Arial, sans-serif; --cd-font-body: "Montserrat", Arial, sans-serif; --cd-font-accent: "Bebas Neue", "Montserrat", Arial, sans-serif; /* Schriftgewichte */ --cd-fw-regular: 400; --cd-fw-medium: 500; --cd-fw-semibold: 600; --cd-fw-bold: 700; /* Überschriftengrößen */ --cd-fs-h1: 3.5rem; /* 56px */ --cd-fs-h2: 2.375rem; /* 38px */ --cd-fs-h3: 1.75rem; /* 28px */ --cd-fs-h4: 1.375rem; /* 22px */ --cd-fs-h5: 1.125rem; /* 18px */ --cd-fs-h6: 1rem; /* 16px */ /* Allgemeine Textgrößen */ --cd-fs-body: 1rem; /* 16px */ --cd-fs-small: 0.875rem; /* 14px */ /* Direkt im Magazin-CSS verwendete Größen */ --cd-fs-xs: 0.8125rem; /* 13px — Datum, kleine Metadaten, Eyebrow */ --cd-fs-sm: 0.875rem; /* 14px — Weiterlesen und Autor */ --cd-fs-md: 1rem; /* 16px — Auszug und Fließtext */ /* Zeilenhöhen */ --cd-lh-tight: 1; --cd-lh-normal: 1.5; --cd-lh-relaxed: 1.7; /* ========================================================== ABSTÄNDE ========================================================== */ --cd-space-2xs: 4px; --cd-space-xs: 8px; --cd-space-sm: 12px; --cd-space-md: 30px; --cd-space-lg: 20px; --cd-space-xl: 24px; /* Wird im Magazin-Grid als Abstand zwischen den Cards verwendet */ --cd-space-2xl: 20px; --cd-space-3xl: 64px; /* ========================================================== BORDER-RADIUS ========================================================== */ --cd-radius-sm: 8px; --cd-radius-md: 12px; --cd-radius-lg: 16px; --cd-radius-pill: 999px; /* ========================================================== SCHATTEN ---------------------------------------------------------- Auf dunklem Grund arbeitet der Club mit Haarlinien statt Schatten. Für helle Flächen sind die Werte hier gesetzt — kühl getönt, nie neutrales Schwarz. ========================================================== */ --cd-shadow-sm: 0 4px 14px rgba(16, 29, 40, 0.10); --cd-shadow-md: 0 12px 30px rgba(16, 29, 40, 0.22); --cd-shadow-lg: 0 20px 45px rgba(16, 29, 40, 0.32); /* ========================================================== TRANSITIONEN ---------------------------------------------------------- Keine Skalierung, kein Bounce — nur Fades und Farbwechsel. ========================================================== */ --cd-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --cd-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --cd-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* ========================================================== LAYOUT ========================================================== */ --cd-container-max: 1200px; --cd-container-padding: var(--cd-space-md); /* Kategorie-Badges */ --cd-color-category-bg: #274057; --cd-color-category-text: #FAFAFA; --cd-color-category-border: rgba(255, 255, 255, 0.14); --cd-color-category-hover-bg: rgba(39, 64, 87, 0.45); --cd-color-category-hover-border: rgba(255, 255, 255, 0.22); /* ========================================================== CLUB-SPEZIFISCHE ERGÄNZUNGEN ---------------------------------------------------------- NEUE Variablen, die es in der ecp-Vorlage nicht gibt. Der Club braucht sie, weil er zwei Markenfarben führt (Blau trägt, Neon akzentuiert) und weil Überschriften auf dunklem Grund immer neon sind. Bitte gegenprüfen und ggf. in die gemeinsame Vorlage aufnehmen — dann können beide Projekte sie nutzen. ========================================================== */ /* --- Sekundäre Markenfarbe: Klub-Blau -------------------- */ /* Kernfarbe des Clubs. Trägt Flächen, den zweiten Button, Überschriften auf hellem Grund und den Footer. */ --cd-color-secondary: #34536F; --cd-color-secondary-soft: #274057; /* Hover */ --cd-color-secondary-strong: #1B2E3F; /* Active */ --cd-color-secondary-tint: rgba(52, 83, 111, 0.10); --cd-color-text-on-secondary: #FFFFFF; /* Blau-Rampe für Flächen und Tiefe */ --cd-color-secondary-100: #DDE7EF; --cd-color-secondary-200: #B9CDDC; --cd-color-secondary-300: #8FB0C8; --cd-color-secondary-500: #4A6D8C; --cd-color-secondary-600: #3F5F7C; --cd-color-secondary-700: #34536F; --cd-color-secondary-800: #274057; --cd-color-secondary-900: #1B2E3F; --cd-color-secondary-950: #101D28; /* --- Primär-Zustände ------------------------------------- */ /* Die Vorlage kennt nur -soft (Hover). Der Club braucht zusätzlich einen Active-Wert. */ --cd-color-primary-strong: #A29E2C; /* Active */ /* --- Überschriften -------------------------------------- */ /* Harte Regel: Überschriften auf dunklem Grund sind neon, niemals weiß. Auf hellem Grund sind sie Klub-Blau. */ --cd-color-heading-on-dark: var(--cd-color-primary); --cd-color-heading-on-light: var(--cd-color-secondary); /* --- Helle Flächen -------------------------------------- */ /* Der Club wechselt Sections hell ↔ dunkel; die Vorlage ist durchgehend dunkel. Neutrale sind bewusst blau getönt. */ --cd-color-bg-light: #FFFFFF; --cd-color-bg-light-alt: #F4F7F9; --cd-color-surface-light: #FFFFFF; --cd-color-text-on-light: #141A1F; --cd-color-text-on-light-muted: #63737F; --cd-color-border-light: #E4EAEF; /* --- Dunkle Sections als Gradient ------------------------ */ /* Nie eine flache dunkle Füllung. Standard ist Blau, das geerbte Plum ist die Abwechslung (max. 1× pro Seite). */ --cd-gradient-dark: linear-gradient(180deg, #34536F 0%, #101D28 100%); --cd-gradient-dark-alt: linear-gradient(180deg, #2B1821 0%, #030303 100%); /* --- Mitgliedsstufen ------------------------------------ */ /* Neon ist für Power reserviert — die empfohlene Stufe. */ --cd-color-tier-smart: var(--cd-color-secondary-300); --cd-color-tier-power: var(--cd-color-primary); --cd-color-tier-premium: var(--cd-color-secondary); /* --- Fokus & Scrim -------------------------------------- */ --cd-focus-ring: 0 0 0 3px rgba(215, 211, 80, 0.55); --cd-color-scrim: rgba(16, 29, 40, 0.55); /* --- Elternmarke ecp ------------------------------------ */ /* NUR im Endorsement-Logo ("ein Produkt von ecp"). Nie als Klub-Akzent verwenden. */ --cd-color-parent-brand: #D7DE50; /* --- Laufweiten ----------------------------------------- */ /* Bebas Neue braucht projektweit einheitliches Tracking. */ --cd-ls-heading: 0.01em; --cd-ls-label: 0.06em; /* Buttons, Chips, Navigation */ --cd-ls-eyebrow: 0.14em; /* Kicker über Überschriften */ }