/* ============================================================ 01-TOKENS.CSS EIH Design System Angepasst an die Farben der Originalseite ============================================================ */ :root { /* ======================================================== FARBEN – Original EIH ======================================================== */ --cd-color-primary: #85c917; --cd-color-primary-soft: #6da912; --cd-color-primary-tint: rgba(133, 201, 23, 0.10); --cd-color-accent: #bd3488; --cd-color-accent-soft: #98256a; --cd-color-dark: #292929; --cd-color-text: #292929; --cd-color-text-muted: #5f675b; --cd-color-white: #ffffff; --cd-color-black: #171717; --cd-color-bg: #f5f5f5; --cd-color-surface: #efefef; --cd-color-surface-muted: #ededed; --cd-color-border: rgba(41, 41, 41, 0.10); --cd-color-link: #bd3488; --cd-color-link-hover: #98256a; --cd-color-text-on-primary: #ffffff; --cd-color-text-on-accent: #ffffff; --cd-color-error: #b91c1c; --cd-color-success: #6da912; --cd-color-info: #bd3488; --cd-color-info-bg: #ffd7e4; /* Textauswahl */ --cd-color-selection: #ffadc6; --cd-color-selection-text: #292929; /* Sections */ --cd-color-section-light-bg: #f5f5f5; --cd-color-section-light-text: #292929; --cd-color-section-tint-bg: #c6e1a7; --cd-color-section-tint-text: #292929; --cd-color-section-muted-bg: #efefef; --cd-color-section-muted-text: #292929; --cd-color-section-accent-bg: #bd3488; --cd-color-section-accent-text: #ffffff; --cd-color-section-dark-bg: #171717; --cd-color-section-dark-text: #ffffff; /* Header */ --cd-color-header-bg: #f5f5f5; --cd-color-header-border: rgba(23, 23, 23, 0.05); --cd-color-header-title: #292929; /* Menu */ --cd-color-menu: #292929; --cd-color-menu-hover: #6da912; --cd-color-menu-active: #6da912; /* Footer */ --cd-color-footer-bg: #171717; --cd-color-footer-text: #ffffff; --cd-color-footer-text-muted: rgba(255, 255, 255, 0.78); --cd-color-footer-link: rgba(255, 255, 255, 0.86); --cd-color-footer-link-hover: #85c917; /* ======================================================== SCHRIFTEN ======================================================== */ --cd-font-body: "Open Sauce", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --cd-font-heading: "Open Sauce", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --cd-font-display: "Akzidenz-Grotesk", "Arial Narrow", Arial, sans-serif; /* ======================================================== FONT WEIGHTS ======================================================== */ --cd-fw-medium: 500; --cd-fw-semibold: 600; --cd-fw-bold: 700; --cd-fw-black: 900; /* ======================================================== FONT SIZES ======================================================== */ --cd-fs-xs: 0.75rem; --cd-fs-small: 0.875rem; --cd-fs-body: 1rem; --cd-fs-h6: 1.125rem; --cd-fs-h5: 1.35rem; --cd-fs-h4: 1.6rem; --cd-fs-h3: 2rem; --cd-fs-h2: 2.8rem; --cd-fs-h1: clamp(3rem, 6vw, 5.5rem); /* ======================================================== ZEILENHÖHEN ======================================================== */ --cd-lh-tight: 1.08; --cd-lh-normal: 1.45; --cd-lh-relaxed: 1.75; /* ======================================================== LETTER SPACING ======================================================== */ --cd-letter-spacing-tight: -0.025em; --cd-letter-spacing-normal: 0; --cd-letter-spacing-wide: 0.08em; /* ======================================================== ABSTÄNDE ======================================================== */ --cd-space-2xs: 0.35rem; --cd-space-xs: 0.6rem; --cd-space-sm: 1rem; --cd-space-md: 1.5rem; --cd-space-lg: 2.5rem; --cd-space-xl: 4rem; --cd-space-2xl: 6rem; --cd-space-3xl: 8rem; /* ======================================================== CONTAINER ======================================================== */ --cd-container-max: 1200px; --cd-container-narrow: 820px; --cd-container-padding: clamp(1,25rem, 4vw, 2.5rem); /* ======================================================== RADII ======================================================== */ --cd-radius-sm: 0.35rem; --cd-radius-md: 0.65rem; --cd-radius-lg: 1rem; --cd-radius-pill: 999px; /* ======================================================== BORDER ======================================================== */ --cd-border-default: 1px solid var(--cd-color-border); /* ======================================================== SCHATTEN ======================================================== */ --cd-shadow-xs: 0 1px 3px rgba(23, 23, 23, 0.06); --cd-shadow-sm: 0 6px 18px rgba(23, 23, 23, 0.08); --cd-shadow-md: 0 14px 36px rgba(23, 23, 23, 0.12); --cd-shadow-lg: 0 24px 64px rgba(23, 23, 23, 0.16); /* ======================================================== TRANSITIONS ======================================================== */ --cd-transition-fast: 150ms ease; --cd-transition-base: 180ms ease; /* ======================================================== BUTTON TOKENS ======================================================== */ --cd-button-bg: var(--cd-color-primary); --cd-button-bg-hover: var(--cd-color-primary-soft); --cd-button-text: var(--cd-color-text-on-primary); --cd-button-text-hover: var(--cd-color-text-on-primary); --cd-button-border: 1.5px solid var(--cd-color-primary); --cd-button-radius: var(--cd-radius-pill); --cd-button-shadow: none; --cd-button-shadow-hover: none; /* ======================================================== FOCUS ======================================================== */ --cd-focus-ring: 0 0 0 3px rgba(133, 201, 23, 0.28); /* ======================================================== CARDS ======================================================== */ --cd-card-bg: var(--cd-color-surface); --cd-card-border: 1px solid var(--cd-color-border); --cd-card-radius: var(--cd-radius-md); --cd-card-shadow: none; --cd-card-shadow-hover: var(--cd-shadow-sm); --cd-card-title-color: var(--cd-color-dark); --cd-card-text-color: var(--cd-color-text); --cd-card-accent: var(--cd-color-primary); /* ======================================================== HEADER ======================================================== */ --eih-header-height: 100px; /* ======================================================== KOMPATIBILITÄT MIT DEM BESTEHENDEN CD-SYSTEM ======================================================== Diese drei Aliase existieren im EWLY-Referenz-Theme und können von gemeinsam genutzten Magazin-Komponenten erwartet werden. Sie verändern keine bestehenden Styles von selbst. ======================================================== */ --cd-color-cream: var(--cd-color-section-tint-bg); --cd-font-family: var(--cd-font-body); --cd-transition-slow: 400ms ease; }