/* --------------------------------------------------------------------------- Baden-Württemberg design tokens. The --bw-color-background-* values below are taken verbatim from the live klimalaend.de token layer (Liferay "landes-cd-theme"), so this site and KLIMA.LÄND resolve to identical colour values. The --bw-font-* and --bw-space-* tokens are OURS, not part of the state's published token set. They are named in the same style for consistency but should not be presented to the client as official BW tokens. --------------------------------------------------------------------------- */ :root { /* --- Colour: surfaces (verbatim from klimalaend.de) ------------------ */ --bw-color-background-primary: #FFFFFF; --bw-color-background-elevated: #FFFFFF; --bw-color-background-subtle: #F4F3F1; --bw-color-background-muted: #E4E1DC; --bw-color-background-disabled: #E4E1DC; --bw-color-background-neutral: #CBC6BD; --bw-color-background-emphasis: #2A2623; --bw-color-background-accent: #FFFC00; /* --- Colour: status (verbatim from klimalaend.de) -------------------- */ --bw-color-background-info: #D0F6FD; --bw-color-background-success: #DEFCA1; --bw-color-background-warning: #FFD9C3; --bw-color-background-on-warning: #FFB793; /* --- Colour: foreground + border (OFFICIAL semantic tokens) ----------- */ /* Names and values below are the state's own, from the "Semantic Tokens" table on design.landbw.de. Palette names: Grey 95, Grey 5, White, Yellow, Violet 80. Use these names in new code. Measured WCAG contrast (BITV 2.0 requires AA for public-sector sites): #2A2623 on #FFFC00 ... 13.70:1 AAA #2A2623 on #FFFFFF ... 15.00:1 AAA #FFFFFF on #2A2623 ... 15.00:1 AAA #2A2623 on #F4F3F1 ... 13.53:1 AAA Permitted CD combinations only: black on white, black on yellow, white on black. */ --bw-color-foreground-primary: #2A2623; /* Grey 95 */ --bw-color-border-focus: #6E0BCC; /* Violet 80 */ /* Ours, derived — not published by the state. */ --bw-color-text-on-accent: #2A2623; --bw-color-text-on-emphasis: #FFFFFF; /* Deprecated alias, kept so existing rules keep working. Prefer --bw-color-foreground-primary. */ --bw-color-text-default: var(--bw-color-foreground-primary); /* NOTE: the CD permits only black on white/yellow and white on black ("keine gelbe Schrift auf Gelb/Schwarz"). A grey body colour is NOT part of the corporate design — do not introduce one. Kept out deliberately. */ /* --- Typography (ours) ----------------------------------------------- */ /* design.landbw.de names Arial as THE substitute when BaWue is unavailable ("Arial substituiert"), so Arial leads both fallback stacks — not Georgia or a system-ui stack. */ --bw-font-serif: "BaWueSerif", Arial, Helvetica, sans-serif; --bw-font-sans: "BaWueSansWeb", Arial, Helvetica, sans-serif; /* Foundry weights: Sans Regular is 500, not 400. */ --bw-font-weight-regular: 500; --bw-font-weight-semibold: 600; --bw-font-weight-bold: 700; --bw-font-weight-serif-regular: 400; --bw-font-weight-serif-bold: 700; /* --- Icons (ours) ------------------------------------------------------ */ /* North-east arrow: the Landesportal marker's path from the header. The viewBox is cropped close to the arrow, leaving 1 unit of space all round: cropped flush, its top edge was cut off at fractional pixel sizes. Used as a CSS mask so it takes currentColor. */ --bw-icon-external: url('data:image/svg+xml;utf8,'); /* Right-pointing arrow for the "Weiterlesen" link style, same stroke weight as the external-link icon. Also used as a mask, so it takes currentColor. */ --bw-icon-arrow-right: url('data:image/svg+xml;utf8,'); /* --- Layout (ours) ---------------------------------------------------- */ /* Height of the sticky header: yellow brand bar 88px + white nav bar 64px. Anchor targets offset themselves by this so a jumped-to section is not hidden underneath it. Keep in sync with the two containers' Min Height settings in Elementor — the heights live there, not here. */ --bw-header-height: 152px; /* Mobile: the yellow bar is 44px there (Min Height, mobile), nav bar 64px. */ /* Scroll offset for anchor jumps. The jump target is Elementor's menu-anchor
, which sits INSIDE the section, below its 50px top padding — not at the section's visual top edge. So the offset is the header height PLUS that padding; with only the header height the section's top would slide under the header, and with more, a strip of the PREVIOUS section stays visible between the header and the target (the earlier 238px left 36px of exactly that). 152 header + 50 section padding = 202px, so the section's coloured edge meets the header's bottom edge. If the sections' top padding changes in Elementor, change the 50px here. */ --bw-anchor-offset: calc(var(--bw-header-height) + 50px); /* --- Motion (ours) ------------------------------------------------------ */ /* design.landbw.de's own button uses `duration-300`. 150ms is deliberately swifter: at 300ms a hover on a dense nav feels laggy, and the CD's flat, high-contrast style reads better with a quick state change than a fade. */ --bw-transition-hover: 0.15s ease-in-out; /* --- Spacing (ours) --------------------------------------------------- */ --bw-space-2xs: 0.25rem; --bw-space-xs: 0.5rem; --bw-space-sm: 1rem; --bw-space-md: 1.5rem; --bw-space-lg: 2.5rem; --bw-space-xl: 4rem; --bw-space-2xl: 6rem; /* Side gutter below desktop (applied in cd.css, "Side gutter"). */ --bw-gutter-tablet: 24px; --bw-gutter-mobile: 16px; } @media (max-width: 767px) { :root { --bw-header-height: 108px; } }