/* Design tokens — design-system.md §2.2. Paste-ready, do not hand-tune values here. */ :root { /* --------------------------------------------------------------- BRAND — light surfaces --------------------------------------------------------------- */ --brand: #FF8040; /* FILL ONLY on light. --ink on it = 6.97:1 */ --brand-ink: #A63C00; /* links/accents on light. on white 6.43:1, on --brand-tint 6.07:1, on --paper 6.02:1 */ --brand-strong: #8C4A1E; /* hover/active for --brand-ink. white 6.75:1 */ --brand-fill-alt: #FFA980; /* decorative fill on light (1.87:1 — never text). On --deep it becomes real text: 8.87:1 */ --brand-tint: #FFF7F2; /* calm section tint. --ink 16.44:1 */ --brand-wash: #FFF0E8; /* stronger tint for the Steckbrief. --ink 15.65:1, --brand-ink 5.78:1 */ /* --------------------------------------------------------------- DEEP — the new dark register (Vogesen sky) --------------------------------------------------------------- */ --deep: #12202B; /* CTA band, footer, photo mat, signature band */ --deep-raised: #223644; /* cards/rows on --deep (1.33:1 separation) */ --on-deep: #FFFFFF; /* 16.57:1 on --deep, 12.51:1 on --deep-raised */ --on-deep-muted: #B9C4CD; /* secondary text on deep. 9.34:1 */ --on-deep-accent: #FF8040; /* = --brand. 6.64:1 on --deep, 5.01:1 on raised */ --rule-on-deep: rgb(255 255 255 / 0.16); /* --------------------------------------------------------------- NEUTRALS --------------------------------------------------------------- */ --surface: #FFFFFF; /* default page ground */ --paper: #FAF7F4; /* warm alternating band. --ink 16.31:1 */ --cool-tint: #EDF1F4; /* cool band / photo mat / info callout. --ink 15.32:1, --ink-muted 7.80:1, --brand-ink 5.66:1 */ --ink: #1A1A1A; /* body. 17.40:1 on white */ --ink-muted: #4A4A4A; /* captions, meta. 8.86:1 on white */ --ink-subtle: #5C5C5C; /* smallest legal print. 6.69:1 on white */ --rule: #E6E6E6; /* hairlines, decorative separation */ --rule-strong: #C9C9C9; /* table rules, card borders */ --rule-ui: #8E8E8E; /* form field borders — 3.28:1, meets 1.4.11 */ /* --------------------------------------------------------------- STATE (Termine page: availability) --------------------------------------------------------------- */ --state-ok: #1F6B3A; /* "freie Plätze". white 6.52:1, tint 6.16:1 */ --state-ok-fill: #E4F0E7; /* --ink 14.85:1 */ --state-full: #8A1F1F; /* "ausgebucht". white 9.14:1 */ --state-full-fill: #F6E4E4; /* --ink 14.20:1 */ /* --------------------------------------------------------------- FOCUS — never removed, only replaced --------------------------------------------------------------- */ --focus: #A63C00; /* on light. 6.43:1 vs white — well over 3:1 */ --focus-inverse: #FFD9C4; /* on --deep. 12.61:1 / 9.51:1 on raised */ --focus-width: 3px; --focus-offset: 2px; /* --------------------------------------------------------------- TYPE — system stack, no webfont (see §3) --------------------------------------------------------------- */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* fluid 320px → 1440px */ --fs-3xs: clamp(0.75rem, 0.732rem + 0.56vw, 0.8125rem); --fs-2xs: clamp(0.8125rem, 0.795rem + 0.56vw, 0.875rem); --fs-xs: clamp(0.875rem, 0.857rem + 0.56vw, 0.9375rem); --fs-sm: clamp(0.9375rem, 0.920rem + 0.56vw, 1rem); --fs-base: clamp(1rem, 0.982rem + 0.56vw, 1.0625rem); --fs-md: clamp(1.125rem, 1.089rem + 1.12vw, 1.25rem); --fs-lg: clamp(1.25rem, 1.179rem + 2.23vw, 1.5rem); --fs-xl: clamp(1.4375rem, 1.313rem + 3.91vw, 1.875rem); --fs-2xl: clamp(1.625rem, 1.446rem + 5.58vw, 2.25rem); --fs-3xl: clamp(1.875rem, 1.625rem + 7.81vw, 2.75rem); --fs-4xl: clamp(2.125rem, 1.732rem + 12.28vw, 3.5rem); --lh-tight: 1.08; /* --fs-4xl only */ --lh-heading: 1.18; --lh-snug: 1.35; /* lede, card titles, tables */ --lh-body: 1.6; --lh-loose: 1.72; /* AGB / Datenschutz */ --ls-display: -0.02em; /* echoes the logo wordmark */ --ls-tight: -0.01em; --ls-normal: 0; --ls-caps: 0.12em; /* the "GLEITSCHIRMSCHULE" voice */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* --------------------------------------------------------------- SPACE — 4px base. v1's scale kept 1:1, extended upward. --------------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 1rem; /* 16 */ --space-4: 1.5rem; /* 24 */ --space-5: 2rem; /* 32 */ --space-6: 3rem; /* 48 */ --space-7: 4rem; /* 64 */ --space-8: 6rem; /* 96 */ --space-9: 8rem; /* 128 */ /* vertical rhythm between page sections */ --section-y: clamp(3rem, 1.6rem + 7vw, 6rem); --section-y-tight: clamp(2rem, 1.3rem + 3.5vw, 3.5rem); --flow: var(--space-4); /* default stack gap, see §3.6 */ /* --------------------------------------------------------------- RADII — deliberately reduced from v1. Photos are square. --------------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; --radius-photo: 0; /* photographs are prints, not app tiles */ /* --------------------------------------------------------------- BORDERS --------------------------------------------------------------- */ --border-hair: 1px solid var(--rule); --border-strong: 1px solid var(--rule-strong); --border-field: 1px solid var(--rule-ui); --border-accent: 4px; /* width of the brand rule on Steckbrief/Callout */ /* --------------------------------------------------------------- SHADOWS — slate-tinted, used in exactly four places (§7) --------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgb(18 32 43 / 0.06), 0 1px 1px rgb(18 32 43 / 0.04); --shadow-md: 0 4px 12px rgb(18 32 43 / 0.10), 0 1px 3px rgb(18 32 43 / 0.06); --shadow-lg: 0 12px 32px rgb(18 32 43 / 0.16), 0 2px 6px rgb(18 32 43 / 0.08); --photo-frame: inset 0 0 0 1px rgb(18 32 43 / 0.10); /* on every photo */ /* --------------------------------------------------------------- LAYOUT --------------------------------------------------------------- */ --container: 72rem; /* 1152px — outer max */ --container-wide: 80rem; /* 1280px — full-bleed band inner max */ --container-narrow: 46rem; /* 736px — legal/FAQ single column */ --measure: 64ch; /* prose. Down from v1's 68ch — see §3.5 */ --measure-lede: 52ch; --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); --photo-max: 980px; /* HARD CAP — the widest source we own */ --tap: 44px; /* minimum tap target, both axes */ --ar-band: 5 / 2; /* 2.5:1 hero band — sources are 1.85–3.02:1 */ --ar-wide: 16 / 9; /* video, card media */ --ar-photo: 3 / 2; /* team, course-card thumbs — matches 300×200 */ --ar-square: 1 / 1; --ar-doc: 3 / 4; /* certificate mat (contain, never crop) */ /* --------------------------------------------------------------- MOTION (§7) --------------------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 180ms; --ease: cubic-bezier(0.2, 0, 0.1, 1); color-scheme: light; } /* Breakpoints — design-system.md §2.3. Mobile-first, min-width, rem-based. Custom properties do not work in media queries: write these literally everywhere a media query is needed and keep this comment the single source of truth. --bp-sm 30rem 480px — two-up card grids, larger type steps kick in --bp-md 45rem 720px — nav flips to horizontal; the primary breakpoint --bp-lg 60rem 960px — split heroes, sidebars, 3-up grids --bp-xl 75rem 1200px — container reaches max, gutters stop growing */