@font-face {font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext-400.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("../fonts/ibm-plex-sans-cyrillic-400.woff2") format("woff2"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;} @font-face {font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("../fonts/ibm-plex-sans-cyrillic-ext-400.woff2") format("woff2"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} @font-face {font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("../fonts/ibm-plex-sans-greek-400.woff2") format("woff2"); unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;}
:root {--c-red: 215 0 43; --c-red-light: 232 52 90; --c-red-dark: 176 0 35; --c-red-200: 255 90 114; --c-rose: 200 205 208; --c-blush: 225 228 230; --c-blush-soft: 235 237 238; --c-wash: 245 244 241; --c-ember: 215 0 43; --c-ember-dark: 176 0 35; --c-navy: 25 27 29; --c-navy-light: 45 49 53; --c-navy-dark: 17 19 21; --c-ink: 35 38 42; --c-shadow: 25 27 29; --c-shadow-deep: 10 11 12; --c-black: 0 0 0; --c-white: 255 255 255; --c-gray-50: 247 247 248; --c-gray-100: 240 240 241; --c-gray-200: 228 228 231; --c-gray-300: 215 218 220; --c-gray-400: 161 161 170; --c-gray-500: 113 113 122; --c-gray-600: 82 82 91; --c-gray-700: 63 63 70; --c-gray-800: 39 39 42; --c-gray-900: 24 24 27; --c-personal: 165 180 252; --c-personal-ink: 199 210 254; --c-scrim: 20 22 24; --c-scrim-soft: 38 42 46; --c-surface: 245 244 241; --c-slate-200: 223 225 226; --c-slate-400: 104 111 117; --c-slate-800: 25 27 29; --c-line: 217 221 222; --c-line-hover: 197 202 203; --c-text-light: 130 135 139; --c-success: 16 185 129; --c-success-light:52 211 153; --c-warning: 245 158 11; --c-error: 239 68 68; --c-info: 59 130 246; --c-success-border: 110 231 183; --c-success-bg: 209 250 229; --c-success-dark: 6 95 70; --c-warning-bg: 255 251 235; --c-warning-dark: 180 83 9; --c-error-strong: 220 38 38; --c-error-light: 248 113 113; --c-error-border: 252 165 165; --c-error-bg: 254 226 226; --c-error-bg-soft: 254 242 242; --c-error-dark: 153 27 27; --color-primary: rgb(var(--c-navy)); --color-primary-light: rgb(var(--c-navy-light)); --color-primary-dark: rgb(var(--c-navy-dark)); --color-heading: var(--color-primary); --color-accent: rgb(var(--c-red)); --color-accent-light: rgb(var(--c-red-light)); --color-accent-dark: rgb(var(--c-red-dark)); --color-accent-text: var(--color-accent); --color-accent-bg: rgb(var(--c-red) / 0.06); --color-accent-bg-hover:rgb(var(--c-red) / 0.10); --color-primary-bg: rgb(var(--c-navy) / 0.05); --color-ember: rgb(var(--c-ember)); --color-ember-dark: rgb(var(--c-ember-dark)); --color-gray-50: rgb(var(--c-gray-50)); --color-gray-100: rgb(var(--c-gray-100)); --color-gray-200: rgb(var(--c-gray-200)); --color-gray-300: rgb(var(--c-gray-300)); --color-gray-400: rgb(var(--c-gray-400)); --color-gray-500: rgb(var(--c-gray-500)); --color-gray-600: rgb(var(--c-gray-600)); --color-gray-700: rgb(var(--c-gray-700)); --color-gray-800: rgb(var(--c-gray-800)); --color-gray-900: rgb(var(--c-gray-900)); --color-bg: rgb(var(--c-white)); --color-bg-alt: rgb(var(--c-surface)); --color-bg-dark: var(--color-primary); --color-text: rgb(var(--c-ink)); --color-text-muted: rgb(var(--c-slate-400)); --color-text-light: rgb(var(--c-text-light)); --color-text-inverse: rgb(var(--c-white)); --color-border: rgb(var(--c-line)); --color-border-dark: var(--color-gray-700); --color-success: rgb(var(--c-success)); --color-success-light: rgb(var(--c-success-light)); --color-success-border: rgb(var(--c-success-border)); --color-success-bg: rgb(var(--c-success-bg)); --color-success-dark: rgb(var(--c-success-dark)); --color-warning: rgb(var(--c-warning)); --color-warning-bg: rgb(var(--c-warning-bg)); --color-warning-dark: rgb(var(--c-warning-dark)); --color-error: rgb(var(--c-error)); --color-error-strong: rgb(var(--c-error-strong)); --color-error-border: rgb(var(--c-error-border)); --color-error-bg: rgb(var(--c-error-bg)); --color-error-bg-soft: rgb(var(--c-error-bg-soft)); --color-error-dark: rgb(var(--c-error-dark)); --color-info: rgb(var(--c-info)); --font-base: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-display: var(--font-base); --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.5rem; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed:1.625; --leading-loose: 2; --tracking-tighter: -0.08em; --tracking-tight: -0.02em; --tracking-snug: 0.025em; --tracking-wide: 0.05em; --tracking-wider: 0.09em; --tracking-widest: 0.12em; --font-weight-light: 400; --font-weight-normal: 400; --font-weight-medium: 600; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold:700; --font-weight-black: 700; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --radius-sm: 5px; --radius-md: 7px; --radius-lg: 9px; --radius-xl: 8px; --radius-2xl: 11px; --radius-full: 9999px; --blur-xs: 2px; --blur-sm: 4px; --blur-md: 8px; --blur-lg: 12px; --blur-xl: 24px; --shadow-sm: 0 1px 2px rgb(var(--c-shadow) / 0.05), 0 1px 1px rgb(var(--c-shadow) / 0.04); --shadow-md: 0 4px 12px rgb(var(--c-shadow) / 0.07); --shadow-lg: 0 12px 28px rgb(var(--c-shadow) / 0.09); --shadow-xl: 0 20px 44px rgb(var(--c-shadow) / 0.11); --shadow-2xl: 0 24px 50px -14px rgb(var(--c-shadow) / 0.18); --glow-speed: 220ms; --glow-ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --glow-red-core: rgb(var(--c-shadow) / 0.12); --glow-red-mid: rgb(var(--c-shadow) / 0.10); --glow-rose: rgb(var(--c-shadow) / 0.08); --glow-blush: rgb(var(--c-shadow) / 0.06); --glow-wash: rgb(var(--c-white) / 0); --glow-brand: 0 12px 28px -10px rgb(var(--c-shadow) / 0.16); --glow-brand-soft: 0 8px 20px -10px rgb(var(--c-shadow) / 0.12); --glow-layer-card: none; --glow-layer-opacity: 0; --glow-focus-ring: 0 0 0 3px rgb(var(--c-red) / 0.30); --glow-focus-ring-strong: 0 0 0 3px rgb(var(--c-red) / 0.45); --glow: 0 0 0 1px rgb(var(--c-red-light) / 0.50), 0 6px 16px rgb(var(--c-black) / 0.20), 0 16px 40px rgb(var(--c-red-light) / 0.38); --card-glow-shadow: 0 0 0 0 transparent; --card-glow-shadow-soft: 0 0 0 0 transparent; --card-surface: var(--color-bg); --card-border: var(--color-border); --card-border-hover: rgb(var(--c-line-hover)); --card-shadow: var(--shadow-sm); --card-shadow-hover: 0 8px 22px rgb(var(--c-shadow) / 0.10); --card-shadow-hover-soft: 0 6px 16px rgb(var(--c-shadow) / 0.08); --card-shadow-hover-dark: 0 10px 26px rgb(var(--c-shadow) / 0.22); --card-border-hover-dark: rgb(var(--c-red) / 0.40); --card-lift: translate3d(0, -4px, 0); --card-hover-transform: var(--card-lift); --card-img-zoom: 1.05; --card-img-zoom-speed: 450ms; --card-img-zoom-ease: var(--glow-ease); --button-radius: var(--radius-md); --button-gap: var(--space-2); --button-group-gap: var(--space-4); --button-group-gap-compact: var(--space-3); --button-border-width: 2px; --button-min-height: 2.75rem; --button-min-height-sm: 2.25rem; --button-min-height-lg: 3.25rem; --button-padding-y: var(--space-3); --button-padding-x: var(--space-6); --button-padding-y-sm: var(--space-2); --button-padding-x-sm: var(--space-4); --button-padding-y-lg: var(--space-4); --button-padding-x-lg: var(--space-8); --button-mobile-max: 22rem; --button-primary-bg: rgb(var(--c-red)); --button-shadow: 0 1px 2px rgb(var(--c-shadow) / 0.10); --button-shadow-hover: 0 7px 18px rgb(var(--c-shadow) / 0.15), 0 7px 24px -5px rgb(var(--c-red) / 0.42); --button-shadow-hover-soft: 0 5px 14px rgb(var(--c-shadow) / 0.12), 0 5px 18px -5px rgb(var(--c-red) / 0.32); --button-shadow-dark-hover: 0 8px 20px rgb(var(--c-shadow) / 0.24), 0 7px 24px -5px rgb(var(--c-red) / 0.48); --button-focus-shadow: var(--glow-focus-ring-strong); --button-hover-transform: translate3d(0, -1px, 0); --field-bg: var(--color-bg); --field-border: var(--color-border); --field-radius: var(--radius-md); --field-shadow: 0 1px 2px rgb(var(--c-shadow) / 0.04); --field-hover-bg: rgb(var(--c-white)); --field-hover-border: rgb(var(--c-line-hover)); --field-hover-shadow: 0 4px 12px rgb(var(--c-shadow) / 0.08); --field-error-shadow: 0 0 0 3px rgb(var(--c-error) / 0.14); --checkbox-hover-shadow: 0 4px 12px rgb(var(--c-shadow) / 0.08); --checkbox-control-hover-shadow: 0 0 0 3px rgb(var(--c-red) / 0.14), 0 4px 10px rgb(var(--c-shadow) / 0.08); --upload-hover-shadow: 0 4px 12px rgb(var(--c-shadow) / 0.08); --sticky-card-shadow: 0 10px 26px rgb(var(--c-shadow) / 0.16); --sticky-card-shadow-hover: var(--glow); --menu-surface: rgb(var(--c-navy) / 0.98); --menu-radius: var(--radius-md); --menu-border: rgb(var(--c-white) / 0.10); --menu-shadow: 0 16px 40px -14px rgb(var(--c-shadow-deep) / 0.60), 0 2px 8px rgb(var(--c-shadow-deep) / 0.40); --menu-item-radius: var(--radius-sm); --menu-item-color: rgb(var(--c-white) / 0.78); --menu-item-hover-bg: rgb(var(--c-white) / 0.08); --menu-item-hover-color: rgb(var(--c-white)); --menu-item-active-bg: rgb(var(--c-white) / 0.07); --menu-trigger-radius: var(--radius-md); --menu-trigger-bg: rgb(var(--c-white) / 0.05); --menu-trigger-border: rgb(var(--c-white) / 0.12); --menu-trigger-hover-bg: rgb(var(--c-white) / 0.10); --menu-trigger-hover-border: rgb(var(--c-white) / 0.22); --menu-trigger-open-bg: rgb(var(--c-white) / 0.12); --menu-trigger-open-border: rgb(var(--c-white) / 0.26); --menu-flag-radius: 2px; --menu-flag-ring: 0 0 0 1px rgb(var(--c-black) / 0.20); --badge-radius: var(--radius-sm); --gallery-filter-bar-radius: var(--radius-lg); --gallery-filter-btn-radius: var(--radius-sm); --gallery-filter-count-radius: var(--radius-sm); --gallery-filter-count-bg: rgb(var(--c-black) / 0.10); --gallery-filter-count-active-bg: rgb(var(--c-black) / 0.28); --gallery-filter-count-active-color: var(--color-text-inverse); --consent-chrome-bg: #ffffff; --consent-chrome-ink: #3c4043; --consent-chrome-icon: #5f6368; --consent-chrome-divider: #dadce0; --consent-logo-bg: #f1f3f4; --consent-link: #1a73e8; --consent-link-hover: #174ea6; --consent-shadow: 32 33 36; --consent-preview-filter: none; --map-embed-h-desktop: clamp(360px, 50vw, 630px); --reachmap-portrait-ratio: 636 / 993; --gallery-tile-radius: 14px; --gallery-label-bg: rgb(var(--c-white) / 0.94); --gallery-label-text: var(--color-text); --gallery-label-blur: var(--blur-md); --gallery-label-shadow: 0 -6px 18px rgb(var(--c-black) / 0.14); --lightbox-max-w: 1380px; --lightbox-aspect-w: 3; --lightbox-aspect-h: 2; --lightbox-aspect: var(--lightbox-aspect-w) / var(--lightbox-aspect-h); --lightbox-stage-h: min(84vh, calc(96vh - 12.5rem), calc((97vw - 3rem) * var(--lightbox-aspect-h) / var(--lightbox-aspect-w)), calc(var(--lightbox-max-w) * var(--lightbox-aspect-h) / var(--lightbox-aspect-w))); --lightbox-panel-pad: clamp(0.75rem, 2vw, 1.15rem); --lightbox-frame-pad: clamp(0.75rem, 1.5vw, 1rem); --lightbox-frame-radius: 22px; --lightbox-img-radius: var(--gallery-tile-radius); --lightbox-frame-border: rgb(var(--c-white) / 0.18); --lightbox-frame-shadow: 0 40px 80px rgb(var(--c-black) / 0.55), 0 0 0 1px rgb(var(--c-white) / 0.08), 0 0 46px rgb(var(--c-red-light) / 0.16); --vshow-thumb-radius: var(--radius-lg); --vshow-thumb-shadow: var(--shadow-xl); --vshow-thumb-shadow-hover: 0 26px 56px -18px rgb(var(--c-shadow) / 0.34), 0 0 40px -12px rgb(var(--c-red-light) / 0.30); --vshow-cursor-bg: rgb(var(--c-white)); --vshow-cursor-text: rgb(var(--c-white)); --vshow-cursor-radius: var(--radius-full); --vshow-badge-bg: rgb(var(--c-white) / 0.92); --vshow-badge-text: var(--color-text); --vpop-backdrop: rgb(var(--c-scrim) / 0.86); --vpop-backdrop-blur: var(--blur-lg); --vpop-stage-radius: var(--radius-lg); --vpop-stage-shadow: 0 40px 90px rgb(var(--c-black) / 0.60), 0 0 0 1px rgb(var(--c-white) / 0.08); --vpop-open-duration: 0.9s; --vpop-open-ease: linear(0, 0.228 10%, 0.537 20%, 0.751 30%, 0.874 40%, 0.939 50%, 0.971 60%, 0.987 70%, 0.994 80%, 0.997 90%, 1); --badge-pill-radius: var(--badge-radius); --badge-pill-padding-y: 0.4rem; --badge-pill-padding-x: 0.85rem; --badge-pill-gap: 0.4rem; --badge-pill-font-size: var(--text-sm); --on-dark-text: rgb(var(--c-white)); --on-dark-text-high: rgb(var(--c-white) / 0.92); --on-dark-text-soft: rgb(var(--c-white) / 0.82); --on-dark-text-muted: rgb(var(--c-white) / 0.72); --on-dark-text-subtle: rgb(var(--c-white) / 0.62); --on-dark-text-faint: rgb(var(--c-white) / 0.45); --on-dark-text-quiet: rgb(var(--c-white) / 0.25); --on-dark-surface-faint: rgb(var(--c-white) / 0.04); --on-dark-surface-soft: rgb(var(--c-white) / 0.06); --on-dark-surface: rgb(var(--c-white) / 0.08); --on-dark-surface-strong: rgb(var(--c-white) / 0.10); --on-dark-surface-glass: rgb(var(--c-white) / 0.12); --on-dark-surface-solid: rgb(var(--c-white) / 0.20); --on-dark-border-faint: rgb(var(--c-white) / 0.08); --on-dark-border-soft: rgb(var(--c-white) / 0.10); --on-dark-border: rgb(var(--c-white) / 0.12); --on-dark-border-strong: rgb(var(--c-white) / 0.20); --on-dark-border-glass: rgb(var(--c-white) / 0.36); --on-dark-border-heavy: rgb(var(--c-white) / 0.45); --on-dark-border-bright: rgb(var(--c-white) / 0.60); --scrim-overlay-soft: rgb(var(--c-black) / 0.28); --scrim-overlay: rgb(var(--c-black) / 0.45); --scrim-overlay-strong: rgb(var(--c-black) / 0.60); --scrim-control: rgb(var(--c-black) / 0.42); --scrim-control-hover: rgb(var(--c-black) / 0.65); --scrim-media-chip: rgb(var(--c-scrim) / 0.50); --scrim-media-chip-strong: rgb(var(--c-scrim) / 0.55); --media-bottom-scrim: linear-gradient(to top, rgb(var(--c-black) / 0.85) 0%, var(--scrim-overlay-strong) 50%, transparent 100%); --glass-on-dark-bg: var(--on-dark-surface-solid); --glass-on-dark-border: var(--on-dark-border-glass); --glass-on-dark-sheen: linear-gradient(130deg, rgb(var(--c-white) / 0.28), rgb(var(--c-white) / 0) 42%); --media-image-scrim: linear-gradient(180deg, rgb(var(--c-scrim) / 0.03) 14%, rgb(var(--c-scrim) / 0.72) 66%, rgb(var(--c-scrim) / 0.95) 100%), radial-gradient(circle at 82% 12%, rgb(var(--c-red-light) / 0.30), transparent 42%); --media-hero-scrim: linear-gradient(to right, rgb(var(--c-navy-dark) / 0.85) 0%, rgb(var(--c-navy) / 0.5) 100%); --media-hero-scrim-light: linear-gradient(to right, rgb(var(--c-navy-dark) / 0.7) 0%, rgb(var(--c-navy) / 0.3) 100%); --media-hero-overlay: linear-gradient(135deg, rgb(var(--c-navy-dark) / 0.85) 0%, rgb(var(--c-navy) / 0.6) 60%, rgb(var(--c-navy) / 0.3) 100%); --gradient-text-accent: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent-light) 100%); --gradient-text-primary: linear-gradient(135deg, var(--color-text), var(--color-primary)); --media-dim: none; --carousel-showcase-bg: radial-gradient(circle at 12% 8%, rgb(var(--c-red) / 0.24), transparent 34%), radial-gradient(circle at 92% 0%, rgb(var(--c-white) / 0.12), transparent 26%), radial-gradient(circle at 64% 82%, rgb(var(--c-scrim-soft) / 0.55), transparent 48%), linear-gradient(145deg, rgb(var(--c-scrim)) 0%, rgb(var(--c-scrim-soft)) 54%, rgb(var(--c-scrim)) 100%); --carousel-card-radius: clamp(16px, 2vw, var(--radius-2xl)); --carousel-card-radius-mobile: 22px; --carousel-card-border: rgb(var(--c-white) / 0.20); --carousel-card-border-mobile: rgb(var(--c-white) / 0.30); --carousel-card-border-hover: rgb(var(--c-red-light) / 0.38); --carousel-card-border-active-mobile: rgb(var(--c-red-light) / 0.34); --carousel-card-shadow: 0 24px 54px rgb(var(--c-shadow-deep) / 0.52), inset 0 1px 0 rgb(var(--c-white) / 0.20), 0 0 0 1px rgb(var(--c-white) / 0.06); --carousel-card-shadow-hover: 0 24px 54px rgb(var(--c-shadow-deep) / 0.58), var(--glow); --carousel-card-shadow-active: 0 28px 68px rgb(var(--c-shadow-deep) / 0.66), inset 0 1px 0 rgb(var(--c-white) / 0.20), var(--glow); --carousel-card-shadow-mobile: 0 18px 38px rgb(var(--c-shadow-deep) / 0.48), inset 0 1px 0 rgb(var(--c-white) / 0.18), 0 0 0 1px rgb(var(--c-white) / 0.08); --carousel-card-shadow-active-mobile: 0 18px 38px rgb(var(--c-shadow-deep) / 0.52), inset 0 1px 0 rgb(var(--c-white) / 0.18), 0 0 0 1px rgb(var(--c-red-light) / 0.30), 0 0 16px rgb(var(--c-red-light) / 0.24), 0 0 28px rgb(var(--c-red-light) / 0.12); --carousel-slide-transition: transform 620ms cubic-bezier(.2, .78, .2, 1), opacity 620ms cubic-bezier(.2, .78, .2, 1); --carousel-card-transition: border-color 280ms var(--ease-standard), box-shadow 280ms var(--ease-standard); --carousel-enhanced-padding: 56px 0 26px; --carousel-mobile-padding: var(--space-7) 0 var(--space-8); --carousel-mobile-tight-padding: 30px 0 36px; --carousel-ctrl-bar-radius: var(--radius-full); --carousel-ctrl-bar-padding: 0.42rem; --carousel-ctrl-gap: 0.6rem; --carousel-ctrl-btn-size: 2.6rem; --carousel-ctrl-btn-radius: var(--radius-full); --carousel-ctrl-counter-min: 4.2rem; --carousel-ctrl-bar-bg: rgb(var(--c-scrim) / 0.94); --carousel-ctrl-bar-border: rgb(var(--c-white) / 0.10); --carousel-ctrl-bar-border-hover: rgb(var(--c-red-light) / 0.30); --carousel-ctrl-btn-hover-bg: rgb(var(--c-white) / 0.12); --carousel-ctrl-bar-shadow: inset 0 1px 0 rgb(var(--c-white) / 0.16), 0 14px 32px rgb(var(--c-black) / 0.34), 0 0 0 1px rgb(var(--c-white) / 0.06), 0 0 18px rgb(var(--c-red-light) / 0.13); --carousel-ctrl-bar-shadow-hover: inset 0 1px 0 rgb(var(--c-white) / 0.16), 0 12px 28px rgb(var(--c-black) / 0.30), 0 0 0 1px rgb(var(--c-red-light) / 0.16), 0 0 24px rgb(var(--c-red-light) / 0.26); --transition-fast: 150ms var(--ease-standard); --transition-base: 300ms var(--ease-standard); --transition-slow: 600ms var(--ease-standard); --transition-slower: 600ms var(--ease-standard); --container-max: 1280px; --container-wide: 1400px; --grid-track-fluid: minmax(0, 1fr); --measure: 680px; --measure-text: 72ch; --nav-height: 64px; --ls-banner-height: 55px; --ls-banner-h: 0px; --header-offset: calc(var(--ls-banner-h) + var(--nav-height)); --section-py: var(--space-20); --rail-py: var(--space-3); --rail-max: 940px; --rail-node: 30px; --rail-line: 2px; --rail-h: 56px; --rail-z: calc(var(--z-nav) - 1); --hero-min-height: 640px; --hero-video-fade: 1.2s; --hero-poster-position: center 30%; --hero-carousel-fade: 0.9s; --hero-carousel-interval: 6s; --hero-scrim: linear-gradient(to top right, rgb(var(--c-shadow-deep) / 0.82) 0%, rgb(var(--c-shadow-deep) / 0.55) 45%, rgb(var(--c-shadow-deep) / 0.22) 100%); --hero-text-shadow: 0 2px 10px rgb(var(--c-shadow-deep) / 0.55), 0 1px 2px rgb(var(--c-shadow-deep) / 0.65); --hero-media-backdrop: linear-gradient(180deg, rgb(var(--c-shadow-deep) / 0.94) 0%, rgb(var(--c-shadow-deep) / 0.80) 42%, rgb(var(--c-shadow-deep) / 0.94) 100%); --hero-band-height: clamp(440px, 62vh, 680px); --page-hero-h: 50vh; --hero-solo-band: 56.25vw; --hero-solo-band-portrait: 75vw; --hero-control-size: 44px; --nav-bg: rgb(var(--c-navy) / 0.92); --nav-bg-scrolled: rgb(var(--c-navy) / 0.97); --nav-blur: var(--blur-lg); --nav-border: rgb(var(--c-white) / 0.08); --nav-border-scrolled: rgb(var(--c-white) / 0.10); --nav-shadow-scrolled: var(--shadow-lg); --z-base: 0; --z-overlay: 10; --z-nav: 100; --z-dropdown: 150; --z-modal: 200; --z-toast: 300;} .dark-section {--color-bg: var(--color-primary); --color-text: var(--color-text-inverse); --color-text-muted:var(--color-gray-300); --color-border: var(--color-border-dark); --color-accent-text: rgb(var(--c-red-200)); --color-heading: var(--color-text-inverse);} .karriere-banner, .usp-strip {--color-accent-text: rgb(var(--c-red-200)); --color-heading: var(--color-text-inverse); --color-text: var(--on-dark-text); --color-text-muted: var(--on-dark-text-muted);} [data-theme="classic-navy"] {--c-navy: 26 39 68; --c-navy-light: 36 53 96; --c-navy-dark: 15 26 46; --c-scrim: 8 15 28; --c-scrim-soft: 15 32 66; --c-shadow: 15 23 42; --c-slate-800: 30 41 59;} :root.has-ls-banner {--ls-banner-h: var(--ls-banner-height);} :root {color-scheme: light;} :root[data-theme="dark"] {color-scheme: dark; --color-bg: rgb(var(--c-navy-dark)); --color-bg-alt: rgb(var(--c-navy)); --color-bg-dark: rgb(var(--c-black)); --color-text: rgb(var(--c-white) / 0.92); --color-text-muted: rgb(var(--c-white) / 0.62); --color-text-light: rgb(var(--c-white) / 0.45); --color-accent-text: rgb(var(--c-red-200)); --color-heading: rgb(var(--c-white)); --color-border: rgb(var(--c-white) / 0.12); --color-border-dark: rgb(var(--c-white) / 0.22); --color-gray-50: rgb(var(--c-navy-dark)); --color-gray-100: rgb(var(--c-scrim)); --color-gray-200: rgb(var(--c-scrim-soft)); --color-gray-300: rgb(var(--c-gray-600)); --color-gray-400: rgb(var(--c-gray-500)); --color-gray-500: rgb(var(--c-gray-400)); --color-gray-600: rgb(var(--c-gray-300)); --color-gray-700: rgb(var(--c-gray-200)); --color-gray-800: rgb(var(--c-gray-100)); --color-gray-900: rgb(var(--c-gray-50)); --color-success-bg: rgb(var(--c-success) / 0.15); --color-success-dark: rgb(var(--c-success-light)); --color-warning-bg: rgb(var(--c-warning) / 0.15); --color-warning-dark: rgb(var(--c-warning)); --color-error-bg: rgb(var(--c-error) / 0.15); --color-error-bg-soft: rgb(var(--c-error) / 0.08); --color-error-dark: rgb(var(--c-error-light)); --color-accent-bg: rgb(var(--c-red) / 0.14); --color-accent-bg-hover: rgb(var(--c-red) / 0.20); --color-primary-bg: rgb(var(--c-white) / 0.05); --field-hover-bg: rgb(var(--c-scrim-soft)); --field-border: rgb(var(--c-white) / 0.30); --field-hover-border: rgb(var(--c-white) / 0.45); --media-dim: brightness(0.92) contrast(1.02); --gallery-label-bg: rgb(var(--c-navy) / 0.94); --vshow-badge-text: rgb(var(--c-ink)); --consent-chrome-bg: #303134; --consent-chrome-ink: #e8eaed; --consent-chrome-icon: #9aa0a6; --consent-chrome-divider: #5f6368; --consent-logo-bg: #3c4043; --consent-link: #8ab4f8; --consent-link-hover: #aecbfa; --consent-preview-filter: brightness(0.60) saturate(0.9) contrast(1.05); --c-shadow: 0 0 0;} :root[data-theme="dark"] .dark-section {--color-bg: rgb(var(--c-scrim-soft)); --color-text: rgb(var(--c-white) / 0.92); --color-text-muted: rgb(var(--c-white) / 0.62); --color-border: rgb(var(--c-white) / 0.14);}
.btn {position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--button-gap); min-height: var(--button-min-height); max-width: 100%; padding: var(--button-padding-y) var(--button-padding-x); border: var(--button-border-width) solid transparent; border-radius: var(--button-radius); background-clip: padding-box; box-shadow: var(--button-shadow); color: var(--color-text); cursor: pointer; font-family: var(--font-base); font-size: var(--text-base); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); text-align: center; text-decoration: none; white-space: normal; transition: transform var(--glow-speed) var(--glow-ease), box-shadow var(--glow-speed) var(--glow-ease), background var(--glow-speed) var(--glow-ease), border-color var(--glow-speed) var(--glow-ease), color var(--glow-speed) var(--glow-ease);} .btn > i {flex-shrink: 0;} .btn:is(:hover, :focus-visible) {transform: var(--button-hover-transform); box-shadow: var(--button-shadow-hover-soft);} .btn:focus-visible {outline: none; box-shadow: var(--button-focus-shadow);} .btn:active {transform: var(--button-hover-transform);} .btn:is(:disabled, [aria-disabled="true"], .is-disabled) {cursor: not-allowed; opacity: 0.62; transform: none; box-shadow: none; pointer-events: none;} .btn-primary {background: var(--button-primary-bg); color: var(--color-text-inverse); border-color: var(--color-accent);} .btn-primary:is(:hover, :focus-visible) {box-shadow: var(--button-shadow-hover);} .btn-primary:focus-visible {box-shadow: var(--button-shadow-hover), var(--glow-focus-ring-strong);} .btn-secondary {background: var(--color-bg); color: var(--color-accent-text); border-color: var(--color-accent); box-shadow: none;} .btn-secondary:is(:hover, :focus-visible) {background: var(--color-accent); color: var(--color-text-inverse); box-shadow: var(--button-shadow-hover-soft);} .btn-secondary:focus-visible {box-shadow: var(--button-shadow-hover-soft), var(--glow-focus-ring-strong);} :is(.dark-section, .karriere-banner) .btn-secondary {background: transparent; color: var(--color-text-inverse); border-color: var(--color-accent-light);} :is(.dark-section, .karriere-banner) .btn-secondary:is(:hover, :focus-visible) {background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-inverse); box-shadow: var(--button-shadow-dark-hover);} :is(.dark-section, .karriere-banner) .btn-secondary:focus-visible {box-shadow: var(--button-shadow-dark-hover), var(--glow-focus-ring-strong);} .btn-ghost {background: var(--on-dark-surface-glass); color: var(--color-text-inverse); border-color: var(--on-dark-border-glass); backdrop-filter: blur(var(--blur-md)); box-shadow: none;} .btn-ghost:is(:hover, :focus-visible) {background: var(--on-dark-surface-solid); box-shadow: var(--button-shadow-dark-hover);} .btn-ghost:focus-visible {box-shadow: var(--button-shadow-dark-hover), var(--glow-focus-ring-strong);} .btn--outline, .btn-outline {background: var(--color-bg); color: var(--color-heading); border-color: var(--color-border); box-shadow: var(--button-shadow);} .btn--outline:is(:hover, :focus-visible), .btn-outline:is(:hover, :focus-visible) {color: var(--color-accent-text); border-color: var(--color-accent); box-shadow: var(--button-shadow-hover);} .btn--outline:focus-visible, .btn-outline:focus-visible {box-shadow: var(--button-shadow-hover), var(--glow-focus-ring-strong);} .btn-lg {min-height: var(--button-min-height-lg); padding: var(--button-padding-y-lg) var(--button-padding-x-lg); font-size: var(--text-lg);} .btn-sm {min-height: var(--button-min-height-sm); padding: var(--button-padding-y-sm) var(--button-padding-x-sm); font-size: var(--text-sm);} .service-card > .service-card-link {margin-top: auto;} .service-card-link, .job-card-link {display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); text-decoration: none; transition: gap var(--transition-fast);} .service-card-link {color: var(--color-accent-text);} .job-card-link {color: var(--color-accent-text); margin-top: var(--space-5);} .dark-section .service-card-link {color: var(--color-accent-text);} .service-card-link:hover, .job-card-link:hover, .card-reveal-cta:focus-visible {gap: var(--space-3);} .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within) a.service-card-link {gap: var(--space-3);} .card-reveal-cta, .story-card-cta, .jobs-carousel .card-reveal-cta {--card-reveal-peek: 1em; white-space: nowrap;} .story-card-cta, .jobs-carousel .card-reveal-cta {--card-reveal-peek: 1.05em; display: inline-flex; align-items: center; gap: 0; max-width: 100%; font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--color-accent-text); text-shadow: none;} .card-reveal-wrap, .story-card-cta .card-reveal-wrap, .jobs-carousel .card-reveal-cta .card-reveal-wrap {display: inline-block; max-width: 100%; overflow: hidden; vertical-align: top;} .card-reveal-track, .story-card-cta .card-reveal-track, .jobs-carousel .card-reveal-cta .card-reveal-track {display: inline-flex; align-items: center; gap: var(--space-2); transform: translateX(0); transition: transform 520ms var(--glow-ease); will-change: transform;} .story-card-cta .card-reveal-track, .jobs-carousel .card-reveal-cta .card-reveal-track {gap: 0.55rem; transform: translateX(calc(-100% + var(--card-reveal-peek)));} .card-reveal-inner {display: block;} .card-reveal-arrow, .story-card-cta .card-reveal-arrow, .jobs-carousel .card-reveal-cta .card-reveal-arrow {flex: 0 0 var(--card-reveal-peek); width: var(--card-reveal-peek); line-height: 1;} .card-reveal-cta > * {position: relative; z-index: 4;} @media (hover: hover) and (pointer: fine) {.card-reveal-cta .card-reveal-track {transform: translateX(calc(-100% + var(--card-reveal-peek)));} :is(.service-card, .job-card, .section-media--card, .mpk-recruit--card, .machinery-teaser__card):is(:hover, :focus-within) .card-reveal-track, .card-reveal-cta:is(:hover, :focus-visible) .card-reveal-track, .story-card:hover .story-card-cta .card-reveal-track, .story-card:focus-visible .story-card-cta .card-reveal-track, .jobs-carousel .job-card:hover .card-reveal-cta .card-reveal-track, .jobs-carousel .job-card:focus-visible .card-reveal-cta .card-reveal-track {transform: translateX(0);}} @media (hover: none), (pointer: coarse) {.story-card-cta .card-reveal-track, .jobs-carousel .card-reveal-cta .card-reveal-track {transform: none; transition: none; will-change: auto;}} :where(.section-cta, .cta-row, .two-col-actions, .mpk-recruit__actions, .proc-final__actions, .karriere-actions, .hero-actions, .page-hero-cta, .kontakt-hero-cta, .faq-cta, .bm-cc-actions, .consent-embed-overlay-actions) {display: flex; flex-wrap: wrap; align-items: center; gap: var(--button-group-gap);} .section-cta {justify-content: center; margin-top: var(--space-12); text-align: center;} .cta-section .section-title {max-width: 24ch; margin-inline: auto;} .cta-trust {font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-4);} .cta-row {justify-content: center; margin-top: var(--space-8);} .two-col-actions {justify-content: flex-start; margin-top: var(--space-8);} .mpk-recruit__actions {justify-content: flex-start; margin-top: var(--space-8);} .proc-final__actions {justify-content: center; margin-top: var(--space-8);} .karriere-actions {justify-content: flex-start;} .hero-actions, .page-hero-cta, .kontakt-hero-cta {justify-content: flex-start;} .hero-lead .hero-actions {margin-top: var(--space-1);} .page-hero-cta {margin-top: var(--space-6);} .kontakt-hero-cta, .faq-cta, .bm-cc-actions {gap: var(--button-group-gap-compact);} .faq-cta {margin: var(--space-8) 0 0;} .faq-cta .btn {min-height: var(--button-min-height-lg);} .cta-stack {display: flex; flex-direction: column; align-items: flex-start; gap: var(--button-group-gap-compact); flex-shrink: 0;} .contact-cta {align-self: flex-start;} .form-submit {width: 100%; justify-content: center; margin-top: var(--space-2);} .consent-embed-overlay-actions {flex-direction: column; justify-content: center; width: 100%; margin-top: var(--space-1); gap: var(--space-2);} .consent-embed-overlay-actions .btn {width: 100%;} .bm-cc-actions {flex-shrink: 0;} .bm-cc-actions--detail {margin-top: var(--space-3);} .bm-cc-banner .btn--outline {box-shadow: none; border-color: var(--color-heading);} .bm-cc-banner .btn--outline:is(:hover, :focus-visible) {box-shadow: var(--button-shadow-hover-soft);} .bm-ls-switch.btn {min-height: var(--button-min-height-sm); padding: var(--button-padding-y-sm) var(--button-padding-x-sm); font-size: var(--text-sm);} @media (max-width: 767px) {:where(.section-cta, .cta-row, .two-col-actions, .mpk-recruit__actions, .proc-final__actions, .karriere-actions, .hero-actions, .page-hero-cta, .kontakt-hero-cta, .faq-cta, .bm-cc-actions) {flex-direction: column; align-items: center; justify-content: center; width: 100%;} :where(.section-cta, .cta-row, .two-col-actions, .mpk-recruit__actions, .proc-final__actions, .karriere-actions, .hero-actions, .page-hero-cta, .kontakt-hero-cta, .faq-cta, .bm-cc-actions) > .btn {width: min(100%, var(--button-mobile-max));} :is(.section-cta, .cta-row, .two-col-actions, .mpk-recruit__actions, .proc-final__actions, .karriere-actions, .hero-actions, .page-hero-cta, .kontakt-hero-cta, .faq-cta, .bm-cc-actions).u-justify-start {justify-content: center;} .cta-stack, .karriere-banner .cta-stack {width: 100%; align-items: center;} .cta-stack .btn {width: min(100%, var(--button-mobile-max));} .contact-cta {align-self: center;}} @media (max-width: 767px) {.story-card-cta, .jobs-carousel .card-reveal-cta {font-size: var(--text-sm);}} @media (prefers-reduced-motion: reduce) {.btn, .card-reveal-track, .story-card-cta .card-reveal-track, .jobs-carousel .card-reveal-cta .card-reveal-track {transition: none !important;} .card-reveal-track {transform: none;} .btn:is(:hover, :focus-within) {transform: none;}}
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;} html {scroll-behavior: smooth; scroll-padding-top: var(--header-offset); -webkit-text-size-adjust: 100%;} html.lenis, html.lenis body {height: auto;} .lenis.lenis-smooth {scroll-behavior: auto !important;} .lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior: contain;} .lenis.lenis-stopped {overflow: hidden;} body {font-family: var(--font-base); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background: var(--color-bg); overflow-x: hidden; padding-top: var(--header-offset); -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 8 4 4;} img, video {max-width: 100%; height: auto; display: block;} a {color: inherit;} button {cursor: pointer; border: none; background: transparent; font: inherit;} ul, ol {list-style: none;} address {font-style: normal;} abbr[title] {text-decoration: underline dotted; text-decoration-thickness: from-font; text-decoration-color: var(--color-accent-text); text-underline-offset: 0.18em; cursor: help;} h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, figcaption, blockquote, summary, label, .section-label, .section-title, .page-hero-title, [class*="-title"], [class*="-heading"], [class*="-label"] {overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 8 4 4;} :lang(zh), :lang(zh) * {-webkit-hyphens: none; hyphens: none;} [class*="-title"], [class*="-heading"], p, li, dd, figcaption, blockquote {text-wrap: pretty;} h1, h2, h3, .section-title, .page-hero-title, .hero-title, .service-card-title {text-wrap: balance;} .visually-hidden {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;} :focus-visible {outline: 3px solid var(--color-accent-text); outline-offset: 3px; border-radius: var(--radius-sm);} .section-container {max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6);} @media (min-width: 768px) {.section-container {padding: 0 var(--space-8);}} @media (min-width: 1280px) {.section-container {padding: 0 var(--space-12);}} .section-media {display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center;} @media (min-width: 768px) {.section-media {grid-template-columns: var(--grid-track-fluid) var(--grid-track-fluid); gap: var(--space-16);}} .section-media--spec {grid-template-columns: minmax(0, 1fr); gap: var(--space-10);} .section-media--spec > * {min-width: 0;} @media (min-width: 1024px) {.section-media--spec {grid-template-columns: var(--grid-track-fluid) var(--grid-track-fluid); gap: var(--space-16);}} .section-media__figure {margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 6px 32px rgb(var(--c-shadow) / 0.18); order: 1;} @media (min-width: 768px) {.section-media__figure {order: unset;}} .section-media__picture {display: block; width: 100%;} .section-media__img {width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover;} .section-media__img[data-orientation="portrait"] {aspect-ratio: auto; object-fit: contain; max-height: 78vh; width: auto; max-width: 100%; margin-inline: auto;} .section-media__figure:has(.section-media__img[data-orientation="portrait"]), .section-media__picture:has(.section-media__img[data-orientation="portrait"]) {width: fit-content; margin-inline: auto;} .dark-section .section-media__figure {box-shadow: 0 6px 32px rgb(var(--c-shadow) / 0.45);} .section-media--card, .mpk-recruit--card, .machinery-teaser__card {background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm);} @media (min-width: 768px) {.section-media--card, .mpk-recruit--card, .machinery-teaser__card {padding: var(--space-12);}} .machinery-teaser__card .two-col-image {overflow: hidden; border-radius: var(--radius-xl);} @media (max-width: 560px) {.machinery-teaser__card .mpk-envelope {grid-template-columns: 1fr;}} .section-media--card .section-media__figure {order: -1;} @media (min-width: 768px) {.section-media--card .section-media__figure {order: 0;}} @media (hover: hover) {.section-media--card:is(:hover, :focus-within), .mpk-recruit--card:is(:hover, :focus-within), .machinery-teaser__card:is(:hover, :focus-within) {border-color: var(--card-border-hover);}} .dark-section .section-media--card, .dark-section .mpk-recruit--card, .dark-section .machinery-teaser__card {background-color: var(--glass-on-dark-bg); border-color: var(--glass-on-dark-border);} @media (hover: hover) {.dark-section .section-media--card:is(:hover, :focus-within), .dark-section .mpk-recruit--card:is(:hover, :focus-within), .dark-section .machinery-teaser__card:is(:hover, :focus-within) {border-color: var(--card-border-hover-dark);}} .section-media__cta {margin-top: var(--space-6);} .mpk-recruit {display: grid; gap: var(--space-10); align-items: center;} @media (min-width: 860px) {.mpk-recruit {grid-template-columns: 1.05fr 0.95fr;}} .mpk-recruit__media {position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl);} .mpk-recruit__media img {display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;} @media (max-width: 860px) {.mpk-recruit__media {order: -1;}} .section {padding: var(--section-py) 0; background: var(--color-bg);} .dark-section {background: var(--color-bg-dark); color: var(--color-text-inverse);} .section-header {text-align: center; margin-bottom: var(--space-16);} .section-header.text-left {text-align: left;} .section-label {display: inline-block; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent-text); margin-bottom: var(--space-3);} .dark-section .section-label, .karriere-banner .section-label {color: var(--color-accent-text);} .section-title {font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); color: var(--color-text); margin-bottom: var(--space-4);} .dark-section .section-title, .karriere-banner .section-title {color: var(--color-text-inverse);} @media (min-width: 768px) {.section-title {font-size: var(--text-4xl);}} @media (min-width: 1024px) {.section-title {font-size: var(--text-5xl);}} .section-subtitle {font-size: var(--text-lg); color: var(--color-text-muted); max-width: 640px; margin: 0 auto; line-height: var(--leading-relaxed);} .dark-section .section-subtitle {color: var(--color-text-muted);} .section-subhead {font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); color: var(--color-text); margin: var(--space-8) 0 var(--space-3);} .dark-section .section-subhead {color: var(--color-text-inverse);} .section-text {font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-4);} .dark-section .section-text {color: var(--color-text-muted);} .text-center {text-align: center;} .two-col {display: grid; gap: var(--space-12); align-items: center;} @media (min-width: 768px) {.two-col {grid-template-columns: var(--grid-track-fluid) var(--grid-track-fluid); gap: var(--space-16);} .two-col-reverse {direction: rtl;} .two-col-reverse > * {direction: ltr;}} .section-img {width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); object-fit: cover; aspect-ratio: 4/3;} .image-badge {position: absolute; bottom: -var(--space-4); right: -var(--space-4); background: var(--color-accent); color: var(--color-text-inverse); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); text-align: center; box-shadow: var(--shadow-lg);} .two-col-image {position: relative;} .image-badge-number {display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--font-weight-black); line-height: 1;} .image-badge-label {font-size: var(--text-xs); opacity: 0.85;} .check-list {margin: var(--space-6) 0; display: flex; flex-direction: column; gap: var(--space-3);} .check-list li {display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-base); line-height: var(--leading-normal);} .check-list__text {flex: 1 1 auto; min-width: 0;} .check-list li > .bm-icon {flex-shrink: 0; color: var(--color-accent-text); font-size: 1.3em; margin-top: 0.05em;} .dark-section .check-list li {color: var(--color-text-muted);} .section-head--center {text-align: center;} .section-head--center > .section-text, .section-head--center > .section-subtitle {margin-left: auto; margin-right: auto; max-width: 62ch;} .breadcrumb {display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4);} .breadcrumb a {color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast);} .breadcrumb a:hover {color: var(--color-text);} .breadcrumb span:last-child {color: var(--color-text);} :is(.page-hero, .dark-section) .breadcrumb, :is(.page-hero, .dark-section) .breadcrumb a {color: var(--on-dark-text-muted);} :is(.page-hero, .dark-section) .breadcrumb a:hover, :is(.page-hero, .dark-section) .breadcrumb span:last-child {color: var(--on-dark-text);} .navbar {position: fixed; top: var(--ls-banner-h); left: 0; right: 0; height: var(--nav-height); background: var(--nav-bg); -webkit-backdrop-filter: blur(var(--nav-blur)); backdrop-filter: blur(var(--nav-blur)); border-bottom: 1px solid var(--nav-border); transition: top var(--transition-base), background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); z-index: var(--z-nav);} .navbar.scrolled {background: var(--nav-bg-scrolled); border-bottom-color: var(--nav-border-scrolled); box-shadow: var(--nav-shadow-scrolled);} .nav-container {max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); height: 100%; display: flex; align-items: center; gap: var(--space-6);} .nav-logo {flex-shrink: 0;} .logo-img {height: 40px; width: auto;} @media (max-width: 1023px) {.nav-container {padding: 0 var(--space-4); gap: var(--space-2);} .nav-logo {flex-shrink: 1; min-width: 0;} .logo-img {height: 34px; max-width: 100%; object-fit: contain;} .theme-toggle, .nav-toggle {flex-shrink: 0;} .lang-current .lang-flag ~ .lang-flag {display: none;}} @media (max-width: 380px) {.nav-container {padding: 0 var(--space-3); gap: var(--space-1);}} .nav-links {display: none; align-items: center; gap: var(--space-1); margin-left: auto;} @media (min-width: 1024px) {.nav-links {display: flex;}} .nav-link {display: block; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--on-dark-text-soft); text-decoration: none; border-radius: 0; position: relative; transition: color var(--transition-fast);} .nav-link::after {content: ""; position: absolute; bottom: 6px; left: var(--space-3); right: var(--space-3); height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--ease-standard); border-radius: 2px;} .nav-link:is(:hover, :focus-visible) {color: var(--color-accent-text);} .nav-link:is(:hover, :focus-visible)::after {transform: scaleX(1); transform-origin: left;} .nav-link.active {color: var(--on-dark-text);} .nav-link.active::after {transform: scaleX(1); background: var(--color-accent-light);} .nav-item.has-mega {display: flex; align-items: center; position: relative;} .nav-item.has-mega > .nav-link {padding-right: var(--space-1);} .nav-item.has-mega > .nav-link::after {right: 0;} .mega-caret {display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: calc(-1 * var(--space-1)); padding: 0; color: var(--on-dark-text-subtle); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);} .mega-caret:hover, .mega-caret:focus-visible {color: var(--color-accent-text); background: var(--on-dark-surface-soft); outline: none;} .mega-caret__icon {font-size: 26px; transition: transform var(--transition-base);} .has-mega.is-open .mega-caret__icon {transform: rotate(-90deg);} .has-mega.is-open > .nav-link {color: var(--color-accent-text);} .mega-panel {opacity: 0; visibility: hidden; pointer-events: none;} @media (min-width: 1024px) {.mega-panel {position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px); z-index: var(--z-dropdown); width: min(860px, calc(100vw - 2rem)); padding: var(--space-3); max-height: calc(100dvh - var(--header-offset) - var(--space-6)); overflow-y: auto; overscroll-behavior: contain; background: var(--menu-surface); -webkit-backdrop-filter: blur(var(--blur-lg)); backdrop-filter: blur(var(--blur-lg)); border: 1px solid var(--menu-border); border-radius: var(--menu-radius); box-shadow: var(--menu-shadow); transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard), visibility 0s linear 180ms;} .mega-panel:not(.mega-panel--flat) .mega-grid {display: block; column-count: 4; column-gap: var(--space-5);} .mega-panel:not(.mega-panel--flat) .mega-col {break-inside: avoid; margin-bottom: var(--space-3);} .mega-panel--flat {width: min(320px, calc(100vw - 2rem));} .has-mega.is-open > .mega-panel {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard), visibility 0s;}} .mega-grid {display: grid; grid-template-columns: repeat(3, var(--grid-track-fluid)); gap: var(--space-3) var(--space-5);} .mega-panel--flat .mega-grid {grid-template-columns: 1fr; gap: 0;} .mega-col__title {display: flex; align-items: baseline; gap: 7px; margin: 0 0 var(--space-1); padding-bottom: var(--space-1); font-size: var(--text-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-text); border-bottom: 1px solid var(--on-dark-border-faint);} .mega-col__icon {font-size: 1.9em; stroke-width: 1.2; align-self: center; opacity: 0.65; transition: opacity var(--transition-fast), color var(--transition-fast);} .mega-col:hover .mega-col__icon, .mega-panel--flat .mega-col:hover .mega-col__icon {opacity: 1; color: var(--color-accent-text);} .mega-link__icon {font-size: 1.7em; stroke-width: 1.2; margin-right: 9px; opacity: 0.55; color: var(--menu-item-color); transition: opacity var(--transition-fast), color var(--transition-fast);} .mega-link:hover .mega-link__icon, .mega-link.is-current .mega-link__icon {opacity: 1; color: var(--color-accent-text);} .mega-num {flex-shrink: 0; font-family: var(--font-mono); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--color-accent-text);} .mega-num--sm {min-width: 1.6em; margin-right: 6px; font-size: var(--text-xs); color: var(--color-accent-text);} .mega-list {display: flex; flex-direction: column; gap: 1px;} .mega-link {display: flex; align-items: center; padding: 5px 10px; border-radius: var(--menu-item-radius); font-size: var(--text-sm); font-weight: var(--font-weight-medium); line-height: var(--leading-tight); color: var(--menu-item-color); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), padding-left var(--transition-fast);} .mega-link:hover, .mega-link:focus-visible {color: var(--menu-item-hover-color); background: var(--menu-item-hover-bg); padding-left: 13px; outline: none;} .mega-link.is-current {position: relative; color: var(--on-dark-text); background: var(--menu-item-active-bg); font-weight: var(--font-weight-semibold);} .mega-link.is-current::before {content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 58%; transform: translateY(-50%); border-radius: 0 3px 3px 0; background: var(--color-accent-light); box-shadow: 0 0 8px var(--color-accent-light);} .mega-foot {display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--color-accent-text); text-decoration: none; border-top: 1px solid var(--on-dark-border-faint); width: 100%; transition: gap var(--transition-fast);} .mega-foot svg {transition: transform var(--transition-fast);} .mega-foot:hover svg, .mega-foot:focus-visible svg {transform: translateX(3px);} .mega-foot:focus-visible {outline: none; color: var(--on-dark-text);} @media (prefers-reduced-motion: reduce) {.mega-panel, .mega-caret__icon, .mega-link, .mega-foot, .mega-foot svg {transition: none;}} .lang-switch {display: flex; align-items: center; margin-left: var(--space-3);} .lang-dd {position: relative;} .theme-toggle {display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; margin-left: var(--space-3); border-radius: var(--menu-trigger-radius); color: var(--on-dark-text-soft); background: var(--menu-trigger-bg); border: 1px solid var(--menu-trigger-border); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);} .theme-toggle:hover, .theme-toggle:focus-visible {color: var(--on-dark-text); background: var(--menu-trigger-hover-bg);} .theme-toggle:focus-visible {outline: 2px solid var(--color-accent-text); outline-offset: 2px;} .theme-toggle .theme-toggle__i {display: block; width: 1.15rem; height: 1.15rem;} .theme-toggle .theme-toggle__moon {display: none;} :root[data-theme="dark"] .theme-toggle .theme-toggle__sun {display: none;} :root[data-theme="dark"] .theme-toggle .theme-toggle__moon {display: block;} :root[data-theme="dark"] :is(img:not([src$=".svg"]), video):not(.no-media-dim) {filter: var(--media-dim);} .lang-flag {display: block; width: 20px; height: 15px; object-fit: cover; border-radius: var(--menu-flag-radius); flex-shrink: 0; box-shadow: var(--menu-flag-ring);} .lang-current {display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 10px; border-radius: var(--menu-trigger-radius); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide); color: var(--on-dark-text-soft); background: var(--menu-trigger-bg); border: 1px solid var(--menu-trigger-border); cursor: pointer; user-select: none; list-style: none; white-space: nowrap; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);} .lang-current::-webkit-details-marker {display: none;} .lang-current::marker {content: "";} .lang-current:hover, .lang-current:focus-visible {color: var(--on-dark-text); background: var(--menu-trigger-hover-bg); border-color: var(--menu-trigger-hover-border); outline: none;} .lang-dd[open] .lang-current {color: var(--color-text-inverse); background: var(--menu-trigger-open-bg); border-color: var(--menu-trigger-open-border);} .lang-caret {font-size: 22px; transition: transform var(--transition-fast); opacity: 0.7; flex-shrink: 0;} .lang-dd[open] .lang-caret {transform: rotate(-90deg);} .lang-menu {position: absolute; top: calc(100% + 10px); right: 0; z-index: var(--z-dropdown); display: grid; grid-template-columns: var(--grid-track-fluid) var(--grid-track-fluid); grid-auto-rows: max-content; gap: 2px; width: min(420px, calc(100vw - 1.5rem)); max-height: min(80vh, 620px); max-height: min(80dvh, 620px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: var(--menu-surface); -webkit-backdrop-filter: blur(var(--blur-lg)); backdrop-filter: blur(var(--blur-lg)); border: 1px solid var(--menu-border); border-radius: var(--menu-radius); box-shadow: var(--menu-shadow); animation: lang-menu-in 160ms ease;} @keyframes lang-menu-in {from {opacity: 0; transform: translateY(-6px);} to {opacity: 1; transform: translateY(0);}} @media (prefers-reduced-motion: reduce) {.lang-menu {animation: none;} .lang-caret {transition: none;}} .lang-option {display: flex; align-items: center; gap: 10px; padding: 9px var(--space-3); border-radius: var(--menu-item-radius); font-size: var(--text-sm); font-weight: var(--font-weight-medium); text-decoration: none; color: var(--menu-item-color); transition: background var(--transition-fast), color var(--transition-fast);} a.lang-option:hover, a.lang-option:focus-visible {color: var(--menu-item-hover-color); background: var(--menu-item-hover-bg); outline: none;} .lang-option-flags {display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;} .lang-option-name {flex: 1 1 auto; white-space: nowrap;} .lang-option--active {color: var(--color-text-inverse); background: var(--menu-item-active-bg); font-weight: var(--font-weight-semibold); cursor: default;} .lang-check {color: var(--color-accent-text); flex-shrink: 0;} @media (max-width: 1023px) {.lang-switch {margin-left: auto;} .theme-toggle {width: 40px; height: 40px; margin-left: var(--space-1);} .lang-current {min-height: 40px;} .lang-menu {position: fixed; top: calc(var(--header-offset) + 8px); left: var(--space-3); right: var(--space-3); width: auto; padding: var(--space-2); grid-template-columns: var(--grid-track-fluid) var(--grid-track-fluid); max-height: min(80dvh, calc(100dvh - var(--header-offset) - 1.5rem));} .lang-option {min-height: 44px; padding: var(--space-2) var(--space-3);} .lang-menu .lang-flag {width: 24px; height: 18px;}} @media (max-width: 480px) {.lang-current-label {display: none;} .lang-current {padding: 6px 8px; gap: 6px;} .lang-option {padding: var(--space-2) var(--space-2); gap: var(--space-2);}} @media (max-width: 340px) {.lang-menu {grid-template-columns: 1fr;}} .nav-toggle {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; margin-left: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); flex-shrink: 0; transition: background var(--transition-fast);} .nav-toggle:hover {background: var(--on-dark-surface);} @media (min-width: 1024px) {.nav-toggle {display: none;}} .toggle-bar {display: block; width: 22px; height: 2px; background: var(--on-dark-text); border-radius: 2px; transform-origin: center; transition: transform 0.42s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.28s ease, width 0.28s ease;} .toggle-bar:nth-child(1) {transition-delay: 0s;} .toggle-bar:nth-child(2) {transition-delay: 0.06s;} .toggle-bar:nth-child(3) {transition-delay: 0.12s;} .nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(1) {transform: translateY(8px) rotate(45deg); transition-delay: 0.06s;} .nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(2) {opacity: 0; width: 0; transition-delay: 0s;} .nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(3) {transform: translateY(-8px) rotate(-45deg); transition-delay: 0.12s;} .nav-backdrop {display: none; position: fixed; inset: 0; background: var(--scrim-overlay-strong); backdrop-filter: blur(var(--blur-sm)); -webkit-backdrop-filter: blur(var(--blur-sm)); z-index: calc(var(--z-nav) - 2); opacity: 0; transition: opacity 0.3s ease; pointer-events: none;} .nav-backdrop.is-active {display: block; opacity: 1; pointer-events: auto;} @media (max-width: 1023px) {.nav-links {display: flex !important; flex-direction: column; align-items: flex-start; position: fixed; top: var(--header-offset); left: 0; right: 0; z-index: calc(var(--z-nav) - 1); padding: var(--space-6) var(--space-6) var(--space-8); gap: var(--space-2); margin-left: 0; max-height: calc(100vh - var(--header-offset)); max-height: calc(100dvh - var(--header-offset)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: rgb(var(--c-scrim) / 0.98); backdrop-filter: blur(var(--blur-xl)); -webkit-backdrop-filter: blur(var(--blur-xl)); box-shadow: 0 10px 40px rgb(var(--c-black) / 0.3); visibility: hidden; opacity: 0; transform: translateY(-20px) scale(0.96); transform-origin: top center; pointer-events: none; transition: visibility 0s linear 0.35s, opacity 0.35s var(--ease-standard), transform 0.35s var(--ease-standard);} .nav-links.is-open {visibility: visible; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; transition: visibility 0s linear 0s, opacity 0.35s var(--ease-standard), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);} .nav-links li {opacity: 0; transform: translateX(-32px); transition: opacity 0.32s ease, transform 0.32s var(--ease-standard); transition-delay: 0s;} .nav-links.is-open li {opacity: 1; transform: translateX(0);} .nav-links.is-open li:nth-child(1) {transition-delay: 0.06s;} .nav-links.is-open li:nth-child(2) {transition-delay: 0.10s;} .nav-links.is-open li:nth-child(3) {transition-delay: 0.14s;} .nav-links.is-open li:nth-child(4) {transition-delay: 0.18s;} .nav-links.is-open li:nth-child(5) {transition-delay: 0.22s;} .nav-links.is-open li:nth-child(6) {transition-delay: 0.26s;} .nav-links .nav-link {font-size: clamp(1.25rem, 5vw, 1.75rem); font-weight: var(--font-weight-bold); padding: var(--space-3) var(--space-2); color: var(--on-dark-text-high); border-bottom: 1px solid var(--on-dark-border-faint); width: 100%; border-radius: 0; letter-spacing: var(--tracking-tight); position: relative; transition: color 0.25s ease, border-color 0.25s ease, padding-left 0.25s var(--ease-standard);} .nav-links .nav-link::after {display: none;} .nav-links .nav-link:is(:hover, :focus-visible) {color: var(--color-accent-text); background: transparent; border-bottom-color: var(--color-accent-light); padding-left: var(--space-3);} .nav-links .nav-link.active {color: var(--color-accent-text); border-bottom-color: var(--color-accent-light); border-bottom-width: 2px; padding-left: var(--space-3);} .nav-links .nav-link.active::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background: var(--color-accent-light); border-radius: 50%; box-shadow: 0 0 8px var(--color-accent-light);}} body.nav-open {overflow: hidden;} @media (max-width: 1023px) {.nav-item.has-mega {flex-wrap: wrap; width: 100%; border-bottom: 1px solid var(--on-dark-border-faint);} .nav-item.has-mega > .nav-link {flex: 1 1 auto; width: auto; border-bottom: 0;} .nav-item.has-mega .mega-caret {width: 52px; height: 52px; margin: 0; color: var(--on-dark-text-muted); flex-shrink: 0;} .mega-panel {position: static; transform: none; width: 100%; flex-basis: 100%; overflow: hidden; max-height: 0; opacity: 1; visibility: hidden; pointer-events: none; transition: max-height 0.34s var(--ease-standard), visibility 0s linear 0.34s;} .has-mega.is-open > .mega-panel {max-height: 1600px; visibility: visible; pointer-events: auto; transition: max-height 0.40s var(--ease-standard), visibility 0s linear 0s;} .mega-grid {grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-1) 0 var(--space-3) var(--space-4);} .mega-col__title {margin-bottom: var(--space-1); border-bottom: 0; padding-bottom: 0;} .mega-link {font-size: var(--text-sm); padding: 6px 10px;} .mega-foot {margin: 0 0 var(--space-4) var(--space-4); padding-top: var(--space-2); border-top: 0; width: auto;} @media (prefers-reduced-motion: reduce) {.mega-panel {transition: visibility 0s;}}} .hero {position: relative; height: calc(100svh - var(--header-offset)); min-height: var(--hero-min-height); display: flex; align-items: center; overflow: hidden;} .hero-bg {position: absolute; inset: 0; overflow: hidden; z-index: 0;} .bm-hero-poster {position: absolute; inset: 0; display: block; z-index: 0;} .bm-hero-poster img, .bm-hero-poster-img {width: 100%; height: 100%; object-fit: cover; object-position: var(--img-focus, center);} .bm-hero-video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; opacity: 0; transition: opacity var(--hero-video-fade) ease; will-change: opacity;} .bm-hero-video.is-playing {opacity: 1;} .hero-bg, .page-hero-bg--video {background: var(--hero-media-backdrop);} .hero-poster img {object-position: var(--hero-poster-position);} .bm-hero-pause {position: absolute; bottom: var(--space-4); right: var(--space-4); z-index: 4; width: var(--hero-control-size); height: var(--hero-control-size); display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background: var(--scrim-overlay); color: var(--on-dark-text); cursor: pointer; -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); transition: background 0.2s ease, opacity 0.2s ease;} .bm-hero-pause:hover {background: var(--scrim-control-hover);} .bm-hero-pause:focus-visible {outline: 2px solid var(--on-dark-text); outline-offset: 2px;} .bm-hero-pause__icon {width: 22px; height: 22px; fill: currentColor;} .bm-hero-pause .bm-hero-pause__pause {display: none;} .bm-hero-pause .bm-hero-pause__play {display: block;} .bm-hero-pause[data-state="playing"] .bm-hero-pause__pause {display: block;} .bm-hero-pause[data-state="playing"] .bm-hero-pause__play {display: none;} @media (prefers-reduced-motion: reduce) {.bm-hero-pause {opacity: 0.85;}} .bm-hero-pause--follow {left: 0; top: 0; right: auto; bottom: auto; transform: translate3d(calc(var(--bm-pause-x, 0px) - 50%), calc(var(--bm-pause-y, 0px) - 50%), 0); pointer-events: none; opacity: 0; z-index: var(--z-overlay); transition: opacity 0.15s ease; will-change: transform;} .bm-hero-pause--follow.is-visible {opacity: 1;} .bm-hero-pause--follow:focus-visible:not(.is-visible) {left: auto; top: auto; right: var(--space-4); bottom: var(--space-4); transform: none; opacity: 1;} .hero-title, .hero-subtitle, .page-hero-title, .page-hero-subtitle {text-shadow: var(--hero-text-shadow);} .hero .hero-overlay, .page-hero--video .page-hero-overlay {background: var(--hero-scrim);} @media (max-width: 767px) {.bm-hero-video--mobile-off {display: none !important;}} @media (prefers-reduced-data: reduce) {.bm-hero-video--mobile-off {display: none !important;}} @media (prefers-reduced-motion: reduce) {.bm-hero-video {display: none !important;}} .hero-slider {position: absolute; inset: 0;} .hero-slide {position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease;} .hero-slide.active {opacity: 1;} .hero-overlay {position: absolute; inset: 0; background: var(--media-hero-overlay); z-index: 1;} .hero-content {position: relative; z-index: 2; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); width: 100%;} @media (min-width: 768px) {.hero-content {padding: 0 var(--space-8);}} @media (min-width: 1280px) {.hero-content {padding: 0 var(--space-12);}} .hero-badge {display: inline-flex; align-items: center; gap: var(--space-2); background: var(--on-dark-surface-glass); backdrop-filter: blur(var(--blur-md)); border: 1px solid var(--on-dark-border-strong); border-radius: var(--badge-radius); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--on-dark-text-high); margin-bottom: var(--space-6);} .badge-dot {width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); animation: pulse 2s infinite;} @keyframes pulse {0%, 100% {opacity: 1; transform: scale(1);} 50% {opacity: 0.7; transform: scale(1.3);}} .hero-title {font-family: var(--font-display); font-size: clamp(var(--text-4xl), 7vw, var(--text-7xl)); font-weight: var(--font-weight-black); line-height: var(--leading-tight); color: var(--on-dark-text); margin-bottom: var(--space-6); letter-spacing: var(--tracking-tight);} .text-highlight {color: var(--color-accent-text); position: relative;} .hero-subtitle {font-size: clamp(var(--text-base), 2vw, var(--text-xl)); color: var(--on-dark-text-soft); line-height: var(--leading-relaxed); max-width: 640px; margin-bottom: var(--space-8);} .hero-stats {display: flex; gap: var(--space-8); margin-bottom: var(--space-10); flex-wrap: wrap;} .hero-stat {display: flex; flex-direction: column; gap: var(--space-1);} .stat-value {font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--font-weight-black); color: var(--on-dark-text); line-height: 1;} .stat-label {font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--on-dark-text-subtle);} .hero-lead {position: relative; z-index: 3; width: 100%; max-width: var(--container-max); margin: 0 auto; padding: var(--space-10) var(--space-6) 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6);} .hero-lead .hero-badge {margin-bottom: 0;} .hero-lead .hero-title {margin-bottom: 0;} .hero-trust .hero-subtitle {margin-bottom: var(--space-8);} .hero-trust .hero-stats {margin-bottom: 0;} @media (min-width: 768px) {.hero-lead {padding-left: var(--space-8); padding-right: var(--space-8);}} @media (min-width: 1280px) {.hero-lead {padding-left: var(--space-12); padding-right: var(--space-12);}} @media (min-width: 1025px) {.hero-bg::after {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72%; background: linear-gradient(to top, rgb(var(--c-shadow-deep) / 0.82) 0%, rgb(var(--c-shadow-deep) / 0.42) 36%, rgb(var(--c-shadow-deep) / 0) 72%); pointer-events: none; z-index: 2;} .hero-lead {position: absolute; top: 0; left: 0; right: 0; height: var(--hero-band-height); justify-content: flex-end; padding-top: var(--space-12); padding-bottom: var(--space-12); pointer-events: none;} .hero-lead > * {pointer-events: auto;}} .hero-dots {position: absolute; bottom: var(--space-8); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-2); z-index: 3;} .hero-dot {width: 8px; height: 8px; border-radius: 50%; background: var(--on-dark-text-faint); transition: all var(--transition-base);} .hero-dot.active {background: var(--color-accent); width: 24px; border-radius: 4px;} .scroll-to-top {position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: calc(var(--z-toast) - 1); display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; min-width: 3.5rem; min-height: 3.5rem; padding: 0 !important; font-size: 0; line-height: 1; box-sizing: border-box; margin: 0; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; color: var(--color-accent-text);} .scroll-to-top .scroll-to-top__icon {display: block; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; overflow: visible;} .scroll-to-top--visible {opacity: 1; visibility: visible; transform: translateY(0);} @media (max-width: 768px) {.scroll-to-top {right: 1rem; bottom: 4.5rem;}} .services-grid {display: grid; gap: var(--space-6); grid-template-columns: 1fr;} @media (min-width: 640px) {.services-grid {grid-template-columns: repeat(2, var(--grid-track-fluid));}} @media (min-width: 1024px) {.services-grid {grid-template-columns: repeat(4, var(--grid-track-fluid));}} .service-card {display: flex; flex-direction: column; min-width: 0; background-color: var(--color-bg); background-image: linear-gradient(90deg, var(--color-accent), var(--color-accent-light)); background-repeat: no-repeat; background-position: top left; background-size: 0% 2px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); transition: transform var(--transition-base), box-shadow var(--glow-speed) var(--glow-ease), border-color var(--glow-speed) var(--glow-ease), background-size var(--glow-speed) var(--glow-ease), background-color var(--glow-speed) var(--glow-ease); box-shadow: var(--shadow-sm);} .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within) {border-color: var(--card-border-hover); background-size: 100% 2px;} .services-grid {counter-reset: svc-card;} .service-card {counter-increment: svc-card;} .service-card-title::before {content: counter(svc-card, decimal-leading-zero); display: block; font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-widest); color: var(--color-border); margin-bottom: var(--space-1); transition: color var(--glow-speed) var(--glow-ease);} .service-card:is(:hover, :focus-within) .service-card-title::before {color: var(--color-accent-text);} .service-card-icon {position: relative; width: 56px; height: 56px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light)); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--text-2xl); color: var(--color-text-inverse); margin-bottom: var(--space-5); box-shadow: 0 6px 18px rgb(var(--c-red) / 0.22); transition: transform var(--glow-speed) var(--glow-ease), box-shadow var(--glow-speed) var(--glow-ease);} .service-card:is(:hover, :focus-within) .service-card-icon {transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 26px rgb(var(--c-red) / 0.30);} .service-card-title {font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: var(--space-3); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;} .service-card-text {font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-6); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;} .machinery-grid {display: grid; gap: var(--space-8); grid-template-columns: 1fr;} @media (min-width: 768px) {.machinery-grid {grid-template-columns: repeat(2, var(--grid-track-fluid));}} @media (min-width: 1024px) {.machinery-grid {grid-template-columns: repeat(3, var(--grid-track-fluid));}} .machinery-card {background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); transition: all var(--transition-base);} .machinery-card-img img {width: 100%; aspect-ratio: 3/2; object-fit: cover;} .machinery-card-body {padding: var(--space-6);} .machinery-card-body h3 {font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-3);} .machinery-card-body p {font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); line-height: var(--leading-relaxed);} .spec-list {list-style: none; font-size: var(--text-sm); color: var(--color-text-muted); display: flex; flex-direction: column; gap: var(--space-1);} .spec-list li {display: flex; gap: var(--space-2);} .spec-list strong {color: var(--color-text); min-width: 160px; flex-shrink: 0;} .jobs-list {display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-12);} .job-card {position: relative; isolation: isolate; background: var(--on-dark-surface-soft); border: 1px solid var(--on-dark-border-soft); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-8); transition: all var(--transition-base);} .job-card {cursor: pointer;} .job-card:is(:hover, :focus-within) {background: var(--on-dark-surface);} .job-card-header {display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-3); flex-wrap: wrap;} .job-title {font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--on-dark-text); margin-bottom: var(--space-2);} .job-meta {display: flex; gap: var(--space-4); flex-wrap: wrap;} .job-meta span {font-size: var(--text-sm); color: var(--color-gray-400); display: flex; align-items: center; gap: var(--space-2);} .job-desc {font-size: var(--text-sm); color: var(--color-gray-400); line-height: var(--leading-relaxed);} .jobs-open-application {margin-top: var(--space-10); background: rgb(var(--c-ember) / 0.15); border: 1px solid rgb(var(--c-ember) / 0.3); border-radius: var(--radius-xl); padding: var(--space-8); text-align: center;} @media (min-width: 768px) {.jobs-open-application {margin-top: var(--space-14);}} .jobs-open-application h3 {color: var(--color-text-inverse); font-size: var(--text-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2);} .jobs-open-application p {color: var(--color-text-muted); margin-bottom: var(--space-6);} .jobs-openlist {margin-top: var(--space-8);} .jobs-evergreen {margin-top: var(--space-10); text-align: center;} .jobs-evergreen-title {color: var(--color-text-inverse); font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2);} .jobs-evergreen-lead {color: var(--color-text-muted); margin-bottom: var(--space-5);} .jobs-evergreen-list {list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center;} .jobs-evergreen-list a {display: inline-block; padding: var(--space-2) var(--space-4); border: 1px solid rgb(var(--c-ember) / 0.3); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--text-sm); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;} .jobs-evergreen-list a:hover, .jobs-evergreen-list a:focus-visible {color: var(--color-text-inverse); border-color: rgb(var(--c-ember) / 0.6); background: rgb(var(--c-ember) / 0.12);} .job-card--with-image {padding: 0; overflow: hidden;} .job-card-img {overflow: hidden;} .job-card-img picture, .job-card-img img {width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;} .job-card-body {padding: var(--space-6) var(--space-8);} .job-card-type {display: inline-block; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-accent-text); margin-bottom: var(--space-2);} .job-detail-meta {display: flex; flex-direction: column; gap: var(--space-3);} .job-meta-item {display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted);} .job-meta-item i {color: var(--color-accent-text); width: 1.1em;} .form-readonly {background: var(--color-gray-800); cursor: default; user-select: none; color: var(--color-gray-200);} .check-list--cols {columns: 2; column-gap: var(--space-10);} @media (max-width: 640px) {.check-list--cols {columns: 1;}} .job-location-box {display: flex; align-items: flex-start; gap: var(--space-3); background: var(--color-gray-100); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--text-sm);} .job-location-box i {color: var(--color-accent-text); margin-top: 0.15em; flex-shrink: 0;} .job-location-box strong {color: var(--color-text);} .compensation-note {display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); font-style: italic; margin-top: var(--space-3); line-height: var(--leading-normal);} .compensation-note i {color: var(--color-text-light); flex-shrink: 0; margin-top: 0.18em;} .conversion-box {padding: var(--space-10) 0;} .conversion-box-inner {display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; padding: var(--space-7) var(--space-8); background: radial-gradient(130% 150% at 0% 0%, rgb(var(--c-ember) / 0.06), transparent 55%), var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg);} .conversion-box-icon {flex-shrink: 0; width: var(--space-16); height: var(--space-16); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light)); color: var(--color-text-inverse); font-size: var(--text-2xl);} .conversion-box-text {flex: 1; min-width: 240px; color: var(--color-text-muted); font-size: var(--text-base); line-height: var(--leading-relaxed);} .conversion-box-text strong {color: var(--color-text); display: block; margin-bottom: var(--space-2); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-weight-bold);} .conversion-box .btn {flex-shrink: 0;} @media (max-width: 640px) {.conversion-box-inner {flex-direction: column; align-items: flex-start; padding: var(--space-6);}} .status-tag {display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide); line-height: 1; padding: 0.34rem 0.62rem; border-radius: var(--badge-radius); border: 1px solid transparent; white-space: nowrap;} .status-tag__dot {width: 0.48rem; height: 0.48rem; border-radius: 50%; background: currentColor; flex-shrink: 0;} .status-tag--open {color: var(--color-success-dark); background: var(--color-success-bg); border-color: var(--color-success-border);} .status-tag--open .status-tag__dot {background: var(--color-success); --pulse-ring: rgb(var(--c-success) / 0.5); box-shadow: 0 0 0 0 var(--pulse-ring); animation: badge-pulse 2.4s ease-out infinite;} .status-tag--closed {color: var(--color-gray-600); background: var(--color-bg-alt); border-color: var(--color-border);} @media (prefers-reduced-motion: reduce) {.status-tag--open .status-tag__dot {animation: none;}} .status-tag--overlay {position: absolute; top: var(--space-3); left: var(--space-3); z-index: 3; background: var(--color-bg); border-color: var(--color-border); box-shadow: 0 0 0 1px rgb(var(--c-white) / 0.65), var(--shadow-md); backdrop-filter: blur(var(--blur-sm));} .status-tag--overlay.status-tag--open {color: var(--color-success-dark);} .status-tag--overlay.status-tag--closed {color: var(--color-gray-600);} .service-card-img {position: relative;} .job-apply-bar {position: fixed; top: var(--header-offset); left: 0; right: 0; z-index: var(--z-overlay); background: var(--color-bg); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md); transform: translateY(-115%); transition: transform var(--transition-base);} .job-apply-bar.is-visible {transform: translateY(0);} .job-apply-bar__inner {max-width: var(--container-max); margin: 0 auto; padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-4);} .job-apply-bar__label {display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1;} .job-apply-bar__title {font-weight: var(--font-weight-semibold); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .job-apply-bar__cta {flex-shrink: 0;} .job-apply-bar__pdf {flex-shrink: 0;} .job-apply-bar__close {flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; background: transparent; color: var(--color-text-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: var(--radius-sm);} .job-apply-bar__close:hover {color: var(--color-text); background: var(--color-bg-alt);} @media (max-width: 640px) {.job-apply-bar__inner {padding: var(--space-2) var(--space-3); gap: var(--space-2);} .job-apply-bar__title {display: none;} .job-apply-bar__pdf-label {display: none;}} .machinery-highlights {display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-6) 0;} .mh-item {display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-gray-300);} .karriere-banner {background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); border-radius: var(--radius-2xl); padding: var(--space-12) var(--space-12); display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); flex-wrap: wrap; border: 1px solid var(--color-border-dark);} .karriere-text .section-title {margin-bottom: var(--space-4);} .karriere-text p {color: var(--color-text-muted); max-width: 480px;} .contact-grid {display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: start;} .contact-info {display: flex; flex-direction: column; gap: var(--space-6);} @media (min-width: 768px) {.contact-info {flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10);} .contact-info > .contact-cta {margin-left: auto;}} .contact-info-item {display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--text-base); color: var(--color-text-muted);} .contact-info-item a {color: var(--color-accent-text); text-decoration: none;} .contact-info-item a:hover {text-decoration: underline;} .map-placeholder {background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-12); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; min-height: 320px; justify-content: center;} .map-placeholder p {color: var(--color-text-muted);} .contact-layout {display: grid; gap: clamp(2.5rem, 3vw, 4rem);} .contact-top-grid {display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: start;} @media (min-width: 1024px) {.contact-top-grid {grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);}} .contact-sidebar {display: grid; gap: var(--space-6); align-self: flex-start; position: sticky; top: calc(var(--header-offset) + var(--space-8));} .contact-sidebar-panel, .contact-quick-panel, .contact-form-wrap, .contact-map-section, .contact-person-card {border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg); box-shadow: 0 24px 48px rgb(var(--c-shadow) / 0.06);} .contact-sidebar-panel {padding: var(--space-8); background: radial-gradient(circle at top right, rgb(var(--c-ember) / 0.12), transparent 30%), linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));} .contact-sidebar-title {font-family: var(--font-display); font-size: clamp(var(--text-xl), 2vw, var(--text-2xl)); font-weight: var(--font-weight-bold); margin-bottom: var(--space-3);} .contact-sidebar-text, .contact-form-lead, .contact-section-text {color: var(--color-text-muted); max-width: 62ch; font-size: var(--text-base); line-height: 1.7;} .contact-form-intro {display: grid; gap: var(--space-3); max-width: 60ch; margin-bottom: var(--space-8);} .contact-eyebrow {display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.78rem; font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent-text);} .contact-eyebrow::before {content: ""; width: 2.25rem; height: 1px; background: currentColor; opacity: 0.45;} .contact-info-block {display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted);} .contact-info-block strong {display: block; color: var(--color-text); margin-bottom: 0.2rem;} .contact-info-block .fas {color: var(--color-accent-text); font-size: var(--text-lg); flex-shrink: 0; margin-top: 2px; width: 20px;} .contact-info-block a {color: var(--color-accent-text); text-decoration: none;} .contact-info-block + .contact-info-block {margin-top: var(--space-5);} .contact-quick-panel {padding: var(--space-7); border-top: 3px solid var(--color-accent);} .contact-quick-panel-title {font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-weight-bold); margin-bottom: var(--space-5); color: var(--color-text);} .contact-quick-list {display: grid; gap: var(--space-4);} .contact-quick-item {display: grid; gap: 0.35rem; padding-top: var(--space-4); border-top: 1px solid var(--color-border);} .contact-quick-item:first-child {padding-top: 0; border-top: 0;} .contact-quick-item strong {color: var(--color-text); font-size: var(--text-sm);} .contact-quick-item span {color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.65;} .contact-team-section, .contact-map-section {display: grid; gap: var(--space-8);} .contact-map-section {padding: var(--space-8); background: linear-gradient(180deg, var(--color-bg-alt), var(--color-bg)), radial-gradient(circle at top left, rgb(var(--c-info) / 0.06), transparent 30%);} .contact-section-heading {display: grid; gap: var(--space-3);} .contact-section-heading--map {max-width: 72ch;} .contact-section-title {font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: var(--font-weight-bold); line-height: 1.1;} .contact-person-grid {display: grid; gap: var(--space-4); grid-template-columns: 1fr;} @media (min-width: 560px) {.contact-person-grid {gap: var(--space-5); grid-template-columns: repeat(2, var(--grid-track-fluid));}} @media (min-width: 760px) {.contact-person-grid {gap: var(--space-6); grid-template-columns: repeat(3, var(--grid-track-fluid));}} @media (min-width: 1100px) {.contact-person-grid {grid-template-columns: repeat(4, var(--grid-track-fluid));}} .contact-person-card {background: var(--card-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; text-align: center; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);} .contact-person-card:has(a[href]:is(:hover, :focus-visible)) {box-shadow: var(--card-shadow-hover-soft); border-color: color-mix(in srgb, var(--color-accent) 26%, var(--color-border));} .contact-person-card__photo {width: 100%; height: 200px; overflow: hidden;} .contact-person-card__photo picture {display: block; width: 100%; height: 100%;} .contact-person-card__photo img {width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s ease; display: block;} .contact-person-card:has(a[href]:is(:hover, :focus-visible)) .contact-person-card__photo img {transform: none;} .contact-person-card__photo--trigger {position: relative; cursor: zoom-in;} .contact-person-card__photo--trigger:focus-visible {outline: 2px solid var(--color-accent-text); outline-offset: 2px;} .contact-person-card__photo--trigger:hover img, .contact-person-card__photo--trigger:focus-visible img {transform: scale(1.05);} .contact-person-card__photo--trigger .contact-person-card__monogram {transition: transform 0.4s ease;} .contact-person-card__photo--trigger:hover .contact-person-card__monogram, .contact-person-card__photo--trigger:focus-visible .contact-person-card__monogram {transform: scale(1.06);} .contact-person-card__zoom {--media-zoom-size: 1.9rem; --media-zoom-icon-size: 0.95rem;} .contact-person-card__hint {position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; padding: 0.42rem; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide); color: var(--on-dark-text); background: var(--scrim-media-chip-strong); backdrop-filter: blur(var(--blur-sm)); pointer-events: none; opacity: 0; transform: translateY(101%); transition: opacity var(--transition-fast), transform var(--transition-fast);} .contact-person-card__hint-icon {width: 0.95rem; height: 0.95rem; flex-shrink: 0;} .contact-person-card__photo--trigger:hover .contact-person-card__hint, .contact-person-card__photo--trigger:focus-visible .contact-person-card__hint {opacity: 1; transform: translateY(0);} @media (hover: none) {.contact-person-card__hint {display: none;}} .contact-person-card__info {padding: 1.1rem var(--space-4) var(--space-5);} .contact-person-card__name {font-family: var(--font-display); font-size: 0.95rem; font-weight: var(--font-weight-semibold); color: var(--color-text); margin-bottom: 0.2rem; line-height: 1.3;} .contact-person-card__role {display: block; font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: var(--space-3); line-height: 1.4;} .contact-person-card__teaser {display: flex; align-items: flex-start; justify-content: center; gap: 0.5em; margin: 0 0 var(--space-4); font-size: var(--text-xs); line-height: 1.45; color: var(--color-text-muted);} .contact-person-card__teaser > span {text-align: left; max-width: 30ch;} .contact-person-card__teaser-icon {width: 0.9rem; height: 0.9rem; flex-shrink: 0; margin-top: 0.12em; color: var(--color-success);} .contact-person-card__phone {display: inline-flex; align-items: center; gap: var(--badge-pill-gap); font-size: var(--badge-pill-font-size); font-weight: var(--font-weight-semibold); color: var(--color-accent-text); padding: var(--badge-pill-padding-y) var(--badge-pill-padding-x); background: rgb(var(--c-ember) / 0.07); border-radius: var(--badge-pill-radius); text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast);} .contact-person-card__phone:hover {background: var(--color-accent); color: var(--color-text-inverse);} .contact-person-card__phone .fas {font-size: 0.72rem; flex-shrink: 0;} .contact-dept + .contact-dept {margin-top: var(--space-8);} .contact-dept__title {font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--color-text); letter-spacing: var(--tracking-snug); margin-bottom: var(--space-5); padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 0.6rem;} .contact-dept__title::before {content: ""; width: 3px; height: 1.05em; border-radius: var(--radius-full); background: var(--color-accent); flex-shrink: 0;} .contact-person-card__photo--monogram {display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 30% 20%, rgb(var(--c-ember) / 0.14), transparent 60%), var(--color-bg-alt);} .contact-person-card__monogram {font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-snug); line-height: 1; color: var(--color-accent-text); width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--card-surface); border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border)); box-shadow: 0 2px 10px rgb(var(--c-ember) / 0.08);} .contact-person-card__links {display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem;} .contact-person-card__email {display: inline-flex; align-items: center; gap: var(--badge-pill-gap); max-width: 100%; font-size: var(--badge-pill-font-size); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); padding: var(--badge-pill-padding-y) var(--badge-pill-padding-x); background: rgb(var(--c-black) / 0.05); border-radius: var(--badge-pill-radius); text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast);} .contact-person-card__email:hover {background: var(--color-accent); color: var(--color-text-inverse);} .contact-person-card__email .fas {font-size: 0.72rem; flex-shrink: 0;} .contact-person-card__email .js-cmail-label {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} @media (max-width: 559px) {.contact-person-card {display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-4); text-align: left; padding: var(--space-4);} .contact-person-card__photo {width: 84px; height: 84px; border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgb(var(--c-black) / 0.06);} .contact-person-card__zoom {--media-zoom-size: 1.25rem; --media-zoom-icon-size: 0.7rem; --media-zoom-inset: var(--space-1);} .contact-person-card__photo--monogram {border-radius: var(--radius-lg);} .contact-person-card__monogram {width: 100%; height: 100%; border-radius: var(--radius-lg); font-size: var(--text-2xl); box-shadow: none;} .contact-person-card__info {min-width: 0; padding: 0;} .contact-person-card__name {font-size: var(--text-base); margin-bottom: 0.15rem;} .contact-person-card__role {margin-bottom: var(--space-3);} .contact-person-card__links {flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2);} .contact-person-card__phone {flex: 1 1 auto; min-height: 40px; justify-content: center; font-size: var(--text-sm);} .contact-person-card__email {flex: 0 0 auto; width: 44px; min-height: 40px; padding-inline: 0; justify-content: center; background: var(--color-bg); border: 1px solid color-mix(in srgb, var(--color-accent) 24%, var(--color-border)); color: var(--color-accent-text);} .contact-person-card__phone .fas {font-size: 0.85rem;} .contact-person-card__email .fas {font-size: 0.95rem;} .contact-person-card__email .js-cmail-label {display: none;}} @media (max-width: 430px) {.contact-person-card__links {flex-direction: column; align-items: stretch;} .contact-person-card__phone, .contact-person-card__email {width: 100%;}} .consent-embed {display: grid; gap: var(--space-4);} .consent-embed-frame[hidden], .consent-embed-placeholder[hidden] {display: none !important;} .consent-embed-frame {border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-bg-alt); min-height: 400px;} .consent-embed-frame iframe {width: 100%; min-height: 400px; border: 0; display: block;} .consent-embed-placeholder {position: relative; background: transparent; border: 0; border-radius: var(--radius-lg); padding: 0; display: flex; flex-direction: column; cursor: default; overflow: hidden; box-shadow: 0 1px 4px rgb(var(--c-black) / 0.18), 0 3px 12px rgb(var(--c-black) / 0.10);} .consent-embed-preview {position: relative; display: block; min-height: 400px; flex: 1; overflow: hidden; border-radius: 0; background-image: url("/assets/images/map-preview.svg"); filter: var(--consent-preview-filter); background-size: cover; background-position: center; border: 0;} .consent-embed-search {left: 0.75rem; right: 3.55rem; top: 0.75rem; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0.6rem 0.85rem; border-radius: var(--radius-2xl); background: var(--consent-chrome-bg); color: var(--consent-chrome-ink); font-size: 13px; font-weight: var(--font-weight-normal); box-shadow: 0 1px 3px rgb(var(--c-black) / 0.22), 0 1px 6px rgb(var(--consent-shadow) / 0.16); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1;} .consent-embed-search .fas {color: var(--consent-chrome-icon); font-size: 0.78rem; flex-shrink: 0;} .consent-embed-zoom {top: 0.75rem; right: 0.75rem; display: flex; flex-direction: column; align-items: center; width: 2.35rem; overflow: hidden; border-radius: 2px; background: var(--consent-chrome-bg); box-shadow: 0 1px 3px rgb(var(--c-black) / 0.22); z-index: 1;} .consent-embed-zoom span {width: 100%; min-height: 2.1rem; display: flex; align-items: center; justify-content: center; color: var(--consent-chrome-icon); font-size: 1.1rem; font-weight: var(--font-weight-normal);} .consent-embed-zoom span:nth-child(2) {min-height: 1px; background: var(--consent-chrome-divider);} .consent-embed-overlay {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: transparent; border-radius: inherit; z-index: 2;} .consent-embed-overlay-card {display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 300px; gap: 0.65rem; background: var(--consent-chrome-bg); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-7); box-shadow: 0 8px 32px rgb(var(--c-black) / 0.22), 0 2px 8px rgb(var(--c-black) / 0.12);} .consent-embed-overlay-logo {display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--consent-logo-bg); border-radius: 50%; flex-shrink: 0;} .consent-embed-overlay-title {font-size: 0.92rem; font-weight: var(--font-weight-bold); color: var(--consent-chrome-ink); line-height: 1.3;} .consent-embed-overlay-desc {font-size: var(--text-xs); color: var(--consent-chrome-icon); line-height: 1.55; margin: 0;} .consent-embed-settings {border: 0; padding: 0; background: transparent; color: var(--consent-link); font-size: var(--text-xs); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap;} .consent-embed-settings:hover, .consent-embed-settings:focus-visible {color: var(--consent-link-hover); text-decoration: underline;} @media (max-width: 640px) {.consent-embed-preview {min-height: 300px;} .consent-embed-search {right: 3.4rem; font-size: var(--text-xs); min-height: 38px; padding: 0.55rem var(--space-3);} .consent-embed-zoom {width: 2.15rem;} .consent-embed-overlay {padding: var(--space-4);} .consent-embed-overlay-card {padding: 1.1rem var(--space-5); max-width: 260px;}} .reachmap-package {display: grid; gap: var(--space-3);} .reachmap-cap {display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-2); line-height: 1.3;} .reachmap-cap-role {font-weight: var(--font-weight-bold); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text);} .reachmap-cap-sub {font-size: var(--text-sm); color: var(--color-text-muted);} .reachmap-cap--interactive {margin-top: var(--space-1);} .reachmap-figure {margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-bg-alt);} .reachmap-img {display: block; width: 100%; aspect-ratio: 1040 / 340; background-image: var(--rm-desktop, none); background-size: cover; background-position: center; background-repeat: no-repeat;} :root[data-theme="dark"] .reachmap-img {background-image: var(--rm-desktop-dark, none);} @media (max-width: 640px) {.reachmap-img {aspect-ratio: var(--reachmap-portrait-ratio); background-image: var(--rm-mobile, none);} :root[data-theme="dark"] .reachmap-img {background-image: var(--rm-mobile-dark, none);}} .reachmap-package .consent-embed {gap: 0;} .reachmap-package .consent-embed-preview {display: none;} .reachmap-package .consent-embed-placeholder {box-shadow: none; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-alt); min-height: 0;} .reachmap-package .consent-embed-overlay {position: static; padding: var(--space-5);} .reachmap-package .consent-embed-frame {min-height: var(--map-embed-h-desktop);} .reachmap-package .consent-embed-frame iframe {min-height: var(--map-embed-h-desktop);} .contact-cta__map .contact-map:has(.reachmap-package) {height: auto; overflow: visible;} .contact-cta__map .reachmap-package, .contact-cta__map .reachmap-package .consent-embed, .contact-cta__map .reachmap-package .consent-embed-placeholder, .contact-cta__map .reachmap-package .consent-embed-frame {height: auto; min-height: 0;} .contact-cta__map .reachmap-package .consent-embed-frame, .contact-cta__map .reachmap-package .consent-embed-frame iframe {min-height: min(var(--map-embed-h-desktop), 480px);} @media (min-width: 880px) {.contact-cta__map .reachmap-img {aspect-ratio: var(--reachmap-portrait-ratio); background-image: var(--rm-mobile, none);} :root[data-theme="dark"] .contact-cta__map .reachmap-img {background-image: var(--rm-mobile-dark, none);}} .contact-form-wrap {padding: var(--space-8); position: relative; isolation: isolate; overflow: visible; background-clip: padding-box; background: radial-gradient(80% 70% at 100% 0%, rgb(var(--c-wash) / 0.92), transparent 52%), radial-gradient(62% 58% at 0% 0%, rgb(var(--c-red) / 0.07), transparent 48%), linear-gradient(180deg, var(--color-bg), var(--color-bg-alt));} .contact-form-wrap > * {position: relative; z-index: 1;} .contact-form-title {font-family: var(--font-display); font-size: clamp(var(--text-2xl), 2.6vw, 2.7rem); font-weight: var(--font-weight-bold);} .contact-map {overflow: hidden; border-radius: var(--radius-lg);} .contact-map .consent-embed-frame, .contact-map .consent-embed-placeholder {border-radius: var(--radius-lg);} .contact-map-section .consent-embed-frame, .contact-map-section .consent-embed-placeholder {border-radius: calc(var(--radius-xl) - 4px);} .form-row {display: grid; gap: var(--space-4); grid-template-columns: 1fr;} @media (min-width: 640px) {.form-row {grid-template-columns: var(--grid-track-fluid) var(--grid-track-fluid);}} .form-group {display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4);} .form-label {font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--color-text);} .required {color: var(--color-accent-text);} .form-input {padding: var(--space-3) var(--space-4); border: 1.5px solid var(--field-border); border-radius: var(--field-radius); font-size: var(--text-base); font-family: var(--font-base); color: var(--color-text); background: var(--field-bg); box-shadow: var(--field-shadow); transition: border-color var(--glow-speed) var(--glow-ease), box-shadow var(--glow-speed) var(--glow-ease), background var(--glow-speed) var(--glow-ease); width: 100%;} .form-input:not(.form-readonly):hover {border-color: var(--field-hover-border); background: var(--field-hover-bg); box-shadow: var(--field-hover-shadow);} .form-input:not(.form-readonly):is(:focus, :focus-visible) {border-color: rgb(var(--c-red-light) / 0.55); background: var(--field-hover-bg); box-shadow: var(--glow); outline: none;} .form-input.input-error {border-color: var(--color-error); box-shadow: var(--field-error-shadow);} .form-select {appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;} .form-textarea {resize: vertical; min-height: 160px;} .form-error {font-size: var(--text-xs); color: var(--color-error); min-height: 1.2em;} .form-checkbox {flex-direction: row; align-items: flex-start; gap: var(--space-3); padding: 0.35rem 0.45rem; border-radius: var(--radius-md); transition: transform var(--glow-speed) ease, box-shadow var(--glow-speed) ease, background-color var(--glow-speed) ease;} .form-checkbox input[type="checkbox"] {width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--color-accent); transition: transform var(--glow-speed) ease, box-shadow var(--glow-speed) ease, filter var(--glow-speed) ease;} .form-checkbox:is(:hover, :focus-within) {transform: translateY(-1px); background: var(--color-bg); box-shadow: var(--checkbox-hover-shadow);} .form-checkbox:is(:hover, :focus-within) input[type="checkbox"] {transform: scale(1.06); box-shadow: var(--checkbox-control-hover-shadow);} .form-label-inline {font-size: var(--text-sm); color: var(--color-text-muted);} .form-label-inline a {color: var(--color-accent-text);} .form-honeypot {display: none !important;} @media (max-width: 1023px) {.contact-sidebar {position: static; top: auto;}} @media (max-width: 640px) {.contact-form-wrap, .contact-sidebar-panel, .contact-quick-panel, .contact-map-section {padding: var(--space-6);}} .page-hero {position: relative; min-height: 50vh; display: flex; align-items: flex-end; padding-bottom: var(--space-16); overflow: hidden; background-color: var(--color-primary-dark);} .page-hero-short {min-height: 35vh;} .page-hero--adaptive {min-height: var(--page-hero-h, 50vh);} .page-hero-bg {position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); transition: transform 8s ease;} .page-hero:hover .page-hero-bg {transform: scale(1);} .page-hero-bg--video, .page-hero--video:hover .page-hero-bg--video {transform: none;} .page-hero-video {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;} .page-hero-bg picture {display: block; width: 100%; height: 100%;} .page-hero-bg picture img {width: 100%; height: 100%; object-fit: cover; object-position: var(--img-focus, center); display: block;} .page-hero-overlay {position: absolute; inset: 0; background: var(--media-hero-scrim); transition: opacity 0.8s ease;} .page-hero-overlay-light {background: var(--media-hero-scrim-light);} .page-hero--carousel.is-video-slide .page-hero-overlay {opacity: 0.4;} .page-hero-content {position: relative; z-index: 2; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); width: 100%;} @media (min-width: 768px) {.page-hero-content {padding: 0 var(--space-8);}} .page-hero-title {font-family: var(--font-display); font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl)); font-weight: var(--font-weight-black); color: var(--on-dark-text); line-height: var(--leading-tight); margin-bottom: var(--space-4); letter-spacing: var(--tracking-tight);} .page-hero-subtitle {font-size: var(--text-lg); color: var(--on-dark-text-muted); max-width: 600px;} .kontakt-hero-trust {display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-5);} .kontakt-hero-trust .hero-badge {margin-bottom: 0;} .hero, .page-hero--video {display: flex; flex-direction: column; align-items: stretch; height: auto; min-height: 0; background: var(--color-primary-dark);} .hero-bg, .page-hero-bg--video {position: relative; inset: auto; width: 100%; height: auto; transform: none;} .hero-bg .bm-hero-poster, .page-hero-bg--video .bm-hero-poster, .page-hero-bg--video picture {position: relative; inset: auto; height: auto;} .hero-bg .bm-hero-poster img, .hero-bg .bm-hero-poster-img, .page-hero-bg--video .bm-hero-poster img, .page-hero-bg--video .bm-hero-poster-img, .page-hero-bg--video picture img {display: block; height: auto; object-fit: cover; object-position: var(--img-focus, center);} .hero-bg .bm-hero-video, .page-hero-bg--video .bm-hero-video {object-fit: cover; object-position: center;} .hero .hero-overlay, .page-hero--video .page-hero-overlay {display: none;} .hero .hero-content, .page-hero--video .page-hero-content {padding-top: var(--space-10); padding-bottom: var(--space-12);} @media (min-width: 1025px) {.hero-bg, .page-hero-bg--video {height: var(--hero-band-height); background: var(--hero-media-backdrop);} .hero-bg .bm-hero-poster, .page-hero-bg--video .bm-hero-poster, .page-hero-bg--video picture {position: absolute; inset: 0; height: 100%;} .hero-bg .bm-hero-poster img, .hero-bg .bm-hero-poster-img, .page-hero-bg--video .bm-hero-poster img, .page-hero-bg--video .bm-hero-poster-img, .page-hero-bg--video picture img {height: 100%;} .bm-hero-poster.bm-hero-media--portrait img, .bm-hero-poster.bm-hero-media--portrait .bm-hero-poster-img, .bm-hero-video.bm-hero-media--portrait {object-fit: contain;} .hero .hero-content, .page-hero--video .page-hero-content {padding-top: var(--space-14); padding-bottom: var(--space-16);}} .page-hero-bg--carousel, .page-hero--carousel:hover .page-hero-bg--carousel {transform: none;} .bm-hero-slides {position: absolute; inset: 0;} .bm-hero-slide {position: absolute; inset: 0; opacity: 0; transition: opacity var(--hero-carousel-fade) ease; will-change: opacity;} .bm-hero-slide.is-active {opacity: 1;} .bm-hero-slide picture {display: block; width: 100%; height: 100%;} .bm-hero-slide picture img {width: 100%; height: 100%; object-fit: cover; object-position: var(--img-focus, center); display: block;} .bm-hero-slide .bm-hero-cv {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity var(--hero-video-fade) ease;} .bm-hero-slide .bm-hero-cv.is-playing {opacity: 1;} .bm-hero-slide--portrait {background: var(--hero-media-backdrop);} .bm-hero-slide--portrait > picture img, .bm-hero-slide--portrait .bm-hero-cv {object-fit: contain;} @media (min-width: 1025px) {.page-hero--carousel.page-hero--portrait-video {min-height: var(--hero-band-height);}} .page-hero--carousel .bm-hero-dots, .page-hero--carousel .bm-hero-carousel-pause, .page-hero--carousel .bm-hero-nav {display: none;} .page-hero--carousel.is-enhanced .bm-hero-dots {display: inline-flex;} .page-hero--carousel.is-enhanced .bm-hero-carousel-pause {display: inline-flex; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, background 0.2s ease;} .page-hero--carousel.is-enhanced.is-video-slide .bm-hero-carousel-pause {opacity: 1; visibility: visible;} .bm-hero-dots {position: absolute; left: 50%; bottom: var(--space-5); transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); background: var(--scrim-overlay-soft); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm));} .bm-hero-dot {position: relative; width: 10px; height: 10px; padding: 0; border: none; border-radius: var(--radius-full); background: var(--on-dark-text-faint); cursor: pointer; overflow: hidden; transition: width 0.3s ease, background 0.25s ease;} .bm-hero-dot:hover {background: var(--on-dark-text-high);} .bm-hero-dot:focus-visible {outline: 2px solid var(--on-dark-text); outline-offset: 2px;} .bm-hero-dot.is-active {width: 30px; background: var(--on-dark-border-glass);} .bm-hero-dot__fill {position: absolute; inset: 0; width: 100%; transform-origin: left center; transform: scaleX(0); background: var(--on-dark-text); border-radius: inherit;} .page-hero--carousel.is-enhanced:not(.is-paused) .bm-hero-dot.is-active .bm-hero-dot__fill {animation: bm-hero-dot-fill var(--hero-carousel-interval) linear forwards;} .page-hero--carousel.is-paused .bm-hero-dot.is-active .bm-hero-dot__fill {animation-play-state: paused;} @keyframes bm-hero-dot-fill {from {transform: scaleX(0);} to {transform: scaleX(1);}} .bm-hero-nav {position: absolute; left: 0; top: 0; z-index: var(--z-overlay); width: 66px; height: 66px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--radius-full); background: var(--scrim-control); color: var(--on-dark-text); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); transform: translate3d(calc(var(--bm-nav-x, 0px) - 50%), calc(var(--bm-nav-y, 0px) - 50%), 0); pointer-events: none; opacity: 0; transition: opacity 0.18s ease, background 0.2s ease; will-change: transform;} .page-hero--carousel.is-enhanced .bm-hero-nav {display: inline-flex;} .bm-hero-nav.is-visible {opacity: 1;} .bm-hero-nav__icon {position: absolute; width: 30px; height: 30px; opacity: 0; transition: opacity 0.15s ease;} .bm-hero-nav.is-prev .bm-hero-nav__prev {opacity: 1;} .bm-hero-nav.is-next .bm-hero-nav__next {opacity: 1;} @media (prefers-reduced-motion: reduce) {.bm-hero-slide {transition: none;} .bm-hero-dot__fill {animation: none !important; transform: scaleX(0);}} @media (hover: none), (pointer: coarse) {.bm-hero-nav {display: none !important;} .bm-hero-dot {width: 12px; height: 12px;} .bm-hero-dot.is-active {width: 34px;}} @media (max-width: 767px) {.page-hero--msolo {flex-direction: column; align-items: stretch; height: auto; min-height: 0; padding-bottom: 0; background: var(--color-primary-dark);} .page-hero--msolo .page-hero-bg {position: relative; inset: auto; width: 100%; height: var(--hero-solo-band); transform: none; background: var(--hero-media-backdrop);} .page-hero--msolo:hover .page-hero-bg {transform: none;} .page-hero--msolo .page-hero-bg picture, .page-hero--msolo .page-hero-bg picture img {height: 100%;} .page-hero--msolo .page-hero-overlay {display: none;} .page-hero--msolo .page-hero-content {padding-top: var(--space-7); padding-bottom: var(--space-10);} .page-hero--msolo .bm-hero-dots {top: calc(var(--hero-solo-band) - var(--space-10)); bottom: auto;} .page-hero--msolo .bm-hero-carousel-pause {top: calc(var(--hero-solo-band) - var(--hero-control-size) - var(--space-4)); bottom: auto;} .page-hero--msolo.page-hero--portrait-video .page-hero-bg {height: var(--hero-solo-band-portrait);} .page-hero--msolo.page-hero--portrait-video .bm-hero-dots {top: calc(var(--hero-solo-band-portrait) - var(--space-10));} .page-hero--msolo.page-hero--portrait-video .bm-hero-carousel-pause {top: calc(var(--hero-solo-band-portrait) - var(--hero-control-size) - var(--space-4));} .page-hero .breadcrumb {margin-bottom: var(--space-3);} .page-hero .breadcrumb > * {display: none;} .page-hero .breadcrumb a:last-of-type {display: inline-flex; align-items: center; gap: var(--space-1); color: var(--on-dark-text);} .page-hero .breadcrumb a:last-of-type::before {content: "‹"; font-size: 1.2em; line-height: 1;}} .legal-container {max-width: 800px !important;} .legal-page h1 {font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--font-weight-black); margin-bottom: var(--space-2);} .legal-updated {font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-10);} .legal-page h2 {font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--font-weight-bold); margin-top: var(--space-10); margin-bottom: var(--space-4); color: var(--color-heading);} .legal-page h3 {font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin-top: var(--space-6); margin-bottom: var(--space-3);} .legal-page p {color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-4);} .legal-page ul {padding-left: var(--space-6); list-style: disc; color: var(--color-text-muted);} .legal-page ul li {margin-bottom: var(--space-2); line-height: var(--leading-relaxed);} .legal-page address {color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--space-6);} .legal-page a {color: var(--color-accent-text); text-decoration: none;} .legal-page a:hover {text-decoration: underline;} .legal-download-box {display: flex; align-items: center; gap: var(--space-4); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin: var(--space-8) 0; flex-wrap: wrap;} .legal-download-box > i {font-size: 2rem; color: var(--color-accent-text); flex-shrink: 0;} .legal-download-box > div {flex: 1 1 14rem; min-width: 0;} .legal-download-box > div strong {display: block; margin-bottom: var(--space-1);} .legal-download-box > div p {margin: 0; font-size: var(--text-sm);} .legal-notice-box {display: flex; gap: var(--space-3); align-items: flex-start; background: var(--color-warning-bg); border-left: 4px solid var(--color-warning); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin: var(--space-6) 0;} .legal-notice-box > i {color: var(--color-warning); margin-top: 2px; flex-shrink: 0;} .legal-notice-box p {margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);} .legal-translation-notice {background: var(--color-bg-alt); border-left: 4px solid var(--color-accent-text); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin: var(--space-6) 0;} .legal-translation-notice p {margin: 0 0 var(--space-2); font-size: var(--text-sm);} .legal-translation-notice a {font-weight: var(--font-weight-semibold);} .site-footer {background: var(--color-primary-dark); color: var(--color-text-inverse);} .footer-container {max-width: var(--container-max); margin: 0 auto; padding: var(--space-16) var(--space-6); display: grid; grid-template-columns: 1fr; gap: var(--space-10);} .footer-container > * {min-width: 0;} @media (min-width: 640px) {.footer-container {grid-template-columns: var(--grid-track-fluid) var(--grid-track-fluid);}} @media (min-width: 1024px) {.footer-container {grid-template-columns: 2fr 1fr 1fr 1fr;}} .footer-logo {height: 36px; width: auto; margin-bottom: var(--space-4);} .footer-tagline {font-size: var(--text-sm); color: var(--on-dark-text-muted); margin-bottom: var(--space-5);} .footer-address {font-size: var(--text-sm); color: var(--on-dark-text-muted); line-height: 1.7; margin-bottom: var(--space-5);} .footer-contact-links {display: flex; flex-direction: column; gap: var(--space-2);} .footer-contact-link {display: inline-flex; align-items: center; align-self: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--on-dark-text-muted); text-decoration: none; position: relative; padding-bottom: 2px; transition: color var(--transition-fast);} .footer-contact-link::after {content: ""; position: absolute; bottom: 0; left: calc(16px + var(--space-2)); right: 0; height: 1.5px; background: var(--color-accent-light); transform: scaleX(0); transform-origin: left; transition: transform 0.28s cubic-bezier(.25,.46,.45,.94);} .footer-contact-link:is(:hover, :focus-visible) {color: var(--color-accent-text);} .footer-contact-link:is(:hover, :focus-visible)::after {transform: scaleX(1);} .footer-social {display: flex; gap: var(--space-3); margin-top: var(--space-5);} .footer-social-link {display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); background: var(--on-dark-surface); color: var(--on-dark-text-muted); font-size: var(--text-base); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);} .footer-social-link:hover {background: var(--color-accent); color: var(--on-dark-text); transform: translateY(-2px);} .footer-contact-link .fas {color: var(--color-accent-text); width: 16px;} .footer-origin {display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); padding: var(--space-2) var(--space-4); border: 1px solid var(--on-dark-border); border-radius: var(--radius-full); background: var(--on-dark-surface-faint); font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--on-dark-text-soft);} .footer-section-title {font-size: var(--text-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--on-dark-text-muted); margin-bottom: var(--space-4);} .footer-links {display: flex; flex-direction: column; gap: var(--space-2);} .footer-link {font-size: var(--text-sm); color: var(--on-dark-text-muted); text-decoration: none; display: inline-block; overflow-wrap: break-word; background-image: linear-gradient(var(--color-accent-light), var(--color-accent-light)); background-repeat: no-repeat; background-position: 0% 100%; background-size: 0% 1.5px; padding-bottom: 2px; transition: color var(--transition-fast), background-size 0.28s cubic-bezier(.25,.46,.45,.94);} .footer-link:is(:hover, :focus-visible) {color: var(--color-accent-text); background-size: 100% 1.5px;} .footer-bottom {border-top: 1px solid var(--color-gray-800);} .footer-bottom-inner {max-width: var(--container-max); margin: 0 auto; padding: var(--space-5) var(--space-6); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap;} .footer-copy {font-size: var(--text-sm); color: var(--on-dark-text-subtle); overflow-wrap: break-word;} .footer-legal-links {display: flex; flex-wrap: wrap; gap: var(--space-6); min-width: 0;} .footer-legal-links a {font-size: var(--text-sm); color: var(--on-dark-text-subtle); text-decoration: none; display: inline-block; background-image: linear-gradient(var(--color-accent-light), var(--color-accent-light)); background-repeat: no-repeat; background-position: 0% 100%; background-size: 0% 1px; padding-bottom: 1px; transition: color var(--transition-fast), background-size 0.28s cubic-bezier(.25,.46,.45,.94);} .footer-legal-links a:is(:hover, :focus-visible) {color: var(--color-accent-text); background-size: 100% 1px;} .bm-cc-banner {position: fixed; left: 0; right: 0; bottom: 0; width: 100%; background: var(--color-bg); border-top: 1px solid var(--color-border); box-shadow: 0 -6px 24px rgb(var(--c-black) / 0.12); z-index: var(--z-toast); font-family: var(--font-base); font-size: var(--text-sm); line-height: var(--leading-relaxed);} .bm-cc-inner {max-width: var(--container-max); margin: 0 auto; padding: var(--space-4) var(--space-6); display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;} .bm-cc-text-block {flex: 1; min-width: 240px;} .bm-cc-title {font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-weight-bold); color: var(--color-text); margin: 0 0 var(--space-2);} .bm-cc-copy {margin: 0; color: var(--color-text-muted); font-size: var(--text-sm);} .bm-cc-link {color: var(--color-accent-text); text-decoration: underline;} .bm-cc-more-btn {display: inline-block; margin-top: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); text-decoration: underline; background: transparent; border: 0; padding: 0; cursor: pointer; transition: color var(--transition-fast);} .bm-cc-more-btn:hover {color: var(--color-text);} .bm-cc-details {margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border);} .bm-cc-toggle {display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0;} .bm-cc-toggle input[type="checkbox"] {width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--color-accent); cursor: pointer;} .bm-cc-service-label {font-weight: var(--font-weight-semibold); color: var(--color-text); font-size: var(--text-sm); cursor: pointer;} .bm-cc-service-desc {margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-text-muted);} @media (max-width: 640px) {.bm-cc-banner {left: 50%; right: auto; bottom: 12px; transform: translateX(-50%); width: min(92vw, 360px); border-radius: var(--radius-xl); border-top: none; box-shadow: 0 10px 30px rgb(var(--c-black) / 0.18);} .bm-cc-inner {padding: var(--space-4) var(--space-5); flex-direction: column; align-items: flex-start; gap: var(--space-3);}} .js [data-animate] {opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease;} .js [data-animate="fade-right"] {transform: translateX(-30px);} .js [data-animate="fade-left"] {transform: translateX(30px);} .js [data-animate="fade-up"] {transform: translateY(30px);} [data-animate].is-visible {opacity: 1; transform: none;} @media (prefers-reduced-motion: reduce) {.js [data-animate] {opacity: 1; transform: none; transition: none;}} @media (forced-colors: active) {a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible, .form-file-trigger:focus-visible {outline: 2px solid Highlight !important; outline-offset: 2px;}} @media (max-width: 640px) {.hero-stats {gap: var(--space-6);} .stat-value {font-size: var(--text-2xl);} .section {padding: var(--space-16) 0;} .scroll-to-top {right: 1rem; bottom: 1rem;} .karriere-banner {padding: var(--space-8);} .footer-bottom-inner {flex-direction: column; align-items: stretch; text-align: center;} .footer-legal-links {justify-content: center;}} ::selection {background: rgb(var(--c-red) / 0.85); color: var(--color-text-inverse);} ::placeholder {color: var(--color-text-muted); opacity: 1;} :-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus {-webkit-text-fill-color: var(--color-text); caret-color: var(--color-text); transition: background-color 100000s ease-in-out 0s;} @media print {.navbar, .bm-cc-banner, .hero-dots, .scroll-to-top {display: none !important;} .hero {height: auto; min-height: 0;} .hero-content {padding-top: 0;} :root[data-theme="dark"] {color-scheme: light; --color-bg: rgb(var(--c-white)); --color-bg-alt: rgb(var(--c-white)); --color-text: rgb(var(--c-ink)); --color-text-muted: rgb(var(--c-gray-600)); --color-heading: rgb(var(--c-navy)); --color-border: rgb(var(--c-gray-300));}} .form-banner {padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); margin-bottom: var(--space-6); font-size: var(--text-sm); line-height: var(--leading-normal);} .form-banner a {color: inherit; font-weight: var(--font-weight-semibold);} .form-banner-success {background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: var(--color-success-dark);} .form-banner-error {background: var(--color-error-bg); border: 1px solid var(--color-error-border); color: var(--color-error-dark);} .form-label-hint {font-weight: var(--font-weight-normal); color: var(--color-text-muted); font-size: var(--text-xs);} .form-upload-zone {border: 2px dashed var(--field-border); border-radius: var(--field-radius); padding: var(--space-8) var(--space-6); text-align: center; cursor: pointer; transition: border-color var(--glow-speed) var(--glow-ease), background var(--glow-speed) var(--glow-ease), box-shadow var(--glow-speed) var(--glow-ease), transform var(--glow-speed) var(--glow-ease); background: var(--color-bg-alt); box-shadow: var(--field-shadow); position: relative; outline: none;} .form-upload-zone:hover {border-color: var(--field-hover-border); background: var(--field-hover-bg); box-shadow: var(--upload-hover-shadow); transform: translate3d(0, -1px, 0);} .form-upload-zone.is-dragover {border-color: var(--field-hover-border); background: var(--field-hover-bg); box-shadow: var(--upload-hover-shadow); transform: translate3d(0, -1px, 0);} .form-upload-zone:focus-visible {outline: none; border-color: var(--field-hover-border); box-shadow: var(--field-hover-shadow);} .form-upload-zone input[type="file"] {position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;} .form-upload-inner {pointer-events: none;} .form-upload-icon {font-size: 2rem; color: var(--color-accent-text); margin-bottom: var(--space-2);} .form-upload-label {font-size: var(--text-sm); color: var(--color-text-muted); margin: 0;} .form-upload-label strong {color: var(--color-accent-text);} .form-upload-hint {font-size: var(--text-xs); color: var(--color-text-light); margin: var(--space-1) 0 0;} .form-file-list {margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2);} .form-file-item {display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm);} .form-file-icon {color: var(--color-accent-text); flex-shrink: 0; width: 18px; text-align: center;} .form-file-name {flex: 1; color: var(--color-text); font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .form-file-size {color: var(--color-text-muted); font-size: var(--text-xs); flex-shrink: 0;} .form-file-remove {flex-shrink: 0; color: var(--color-text-muted); background: transparent; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 2px 5px; border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast);} .form-file-remove:hover {color: var(--color-error-strong); background: var(--color-error-bg);} .form-file-item.form-file-error {border-color: var(--color-error-border); background: var(--color-error-bg-soft);} .form-file-item.form-file-error .form-file-icon {color: var(--color-error-strong);} .bm-toast-container {position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: var(--z-toast); display: flex; flex-direction: column-reverse; gap: var(--space-3); pointer-events: none;} .bm-toast {position: relative; min-width: 300px; max-width: 420px; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); display: flex; align-items: flex-start; gap: var(--space-3); pointer-events: all; overflow: hidden; transform: translateX(120%); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); font-size: var(--text-sm); line-height: var(--leading-relaxed); background: var(--color-bg); border-left: 4px solid var(--color-accent);} .bm-toast.is-visible {transform: translateX(0);} .bm-toast--success {border-left-color: var(--color-success);} .bm-toast--error {border-left-color: var(--color-error);} .bm-toast--warning {border-left-color: var(--color-warning);} .bm-toast-icon {font-size: var(--text-xl); flex-shrink: 0; line-height: 1.2;} .bm-toast--success .bm-toast-icon {color: var(--color-success);} .bm-toast--error .bm-toast-icon {color: var(--color-error);} .bm-toast--warning .bm-toast-icon {color: var(--color-warning);} .bm-toast-body {flex: 1; min-width: 0;} .bm-toast-title {font-weight: var(--font-weight-semibold); color: var(--color-text); margin-bottom: 2px;} .bm-toast-msg {color: var(--color-text-muted);} .bm-toast-msg a {color: var(--color-accent-text);} .bm-toast-close {flex-shrink: 0; background: transparent; border: none; cursor: pointer; color: var(--color-text-muted); font-size: var(--text-xl); line-height: 1; padding: 0; margin-top: -2px; transition: color var(--transition-fast);} .bm-toast-close:hover {color: var(--color-text);} .bm-toast-progress {position: absolute; bottom: 0; left: 0; height: 3px; background: currentColor; opacity: 0.25; animation: bm-progress linear forwards;} .bm-toast--success .bm-toast-progress {color: var(--color-success);} .bm-toast--error .bm-toast-progress {color: var(--color-error);} .bm-toast--warning .bm-toast-progress {color: var(--color-warning);} @keyframes bm-progress {from {width: 100%;} to {width: 0%;}} @media (max-width: 640px) {.bm-toast-container {left: var(--space-4); right: var(--space-4); bottom: var(--space-4);} .bm-toast {min-width: 0; max-width: 100%;}} .numbers-section {position: relative; padding: clamp(6rem, 10vw, 10rem) 0; background: radial-gradient(circle at 10% 50%, rgb(var(--c-red) / 0.05), transparent 45%), radial-gradient(circle at 90% 50%, rgb(var(--c-info) / 0.04), transparent 45%), linear-gradient(180deg, var(--color-bg), var(--color-bg-alt)); overflow: hidden; contain: layout style;} .numbers-section::before {content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 0%, rgb(var(--c-red) / 0.015) 30%, transparent 60%, rgb(var(--c-info) / 0.015) 90%); opacity: 1; animation: gradientShift 20s ease-in-out infinite;} @keyframes gradientShift {0%, 100% {opacity: 1;} 50% {opacity: 0.85;}} .numbers-bar {--cols: 5; --nb-gap: var(--space-5); position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--nb-gap); padding: var(--space-6); border-radius: 32px; background: linear-gradient(135deg, var(--color-accent-bg), var(--color-primary-bg)); box-shadow: 0 24px 80px rgb(var(--c-shadow) / 0.08), 0 10px 32px rgb(var(--c-shadow) / 0.05), inset 0 1px 0 rgb(var(--c-white) / 0.6);} .numbers-bar[data-count="1"] {--cols: 1;} .numbers-bar[data-count="2"] {--cols: 2;} .numbers-bar[data-count="3"] {--cols: 3;} .numbers-bar[data-count="4"] {--cols: 4;} .numbers-bar[data-count="6"] {--cols: 3;} .numbers-bar[data-count="7"] {--cols: 4;} .numbers-bar[data-count="8"] {--cols: 4;} .number-item {position: relative; flex: 1 1 calc((100% - (var(--cols) - 1) * var(--nb-gap)) / var(--cols)); max-width: calc((100% - (var(--cols) - 1) * var(--nb-gap)) / var(--cols)); min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 240px; padding: var(--space-8) var(--space-4); background: linear-gradient(135deg, var(--color-bg), var(--color-bg-alt)); border: 1px solid var(--on-dark-border-bright); border-radius: 28px; overflow: hidden; transition: opacity 750ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 750ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 350ms ease, box-shadow 350ms ease, border-color 350ms ease; will-change: opacity, transform; contain: layout style paint;} .js .number-item:not(.is-counted) {opacity: 0; transform: translate3d(0, 32px, 0) scale(0.94);} @media (prefers-reduced-motion: reduce) {.js .number-item:not(.is-counted) {opacity: 1; transform: none;}} .reveal-fallback [data-animate]:not(.is-visible), .reveal-fallback .number-item:not(.is-counted) {opacity: 1; transform: none; transition: none;} .number-item::before {content: ""; position: absolute; inset: 0; border-radius: 28px; padding: 1.5px; background: linear-gradient(135deg, rgb(var(--c-red) / 0.12), rgb(var(--c-info) / 0.08), rgb(var(--c-red) / 0.06)); -webkit-mask: linear-gradient(rgb(var(--c-white)) 0 0) content-box, linear-gradient(rgb(var(--c-white)) 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 350ms ease; pointer-events: none;} .number-item:hover::before {opacity: 1;} .number-item::after {content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 50%; height: 3px; background: linear-gradient(90deg, transparent, var(--color-accent) 50%, transparent); opacity: 0; transition: opacity 400ms ease, width 400ms ease; pointer-events: none;} .number-item:hover::after {opacity: 1; width: 90%;} .number-item:hover {background: linear-gradient(135deg, var(--color-bg), var(--color-bg-alt)); border-color: rgb(var(--c-red) / 0.2); box-shadow: 0 32px 96px rgb(var(--c-red) / 0.15), 0 12px 40px rgb(var(--c-shadow) / 0.1), inset 0 1px 0 rgb(var(--c-white) / 0.95); transform: translate3d(0, -6px, 0) scale(1.02);} .number-icon {display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: var(--space-7); color: var(--color-text-inverse); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light)); border-radius: 50%; box-shadow: 0 12px 32px rgb(var(--c-red) / 0.3), 0 6px 16px rgb(var(--c-red) / 0.2), inset 0 2px 0 rgb(var(--c-white) / 0.25); transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 350ms ease, filter 350ms ease;} .number-item:hover .number-icon {transform: scale(1.15) rotate(-8deg); box-shadow: 0 16px 48px rgb(var(--c-red) / 0.4), 0 8px 24px rgb(var(--c-red) / 0.25), inset 0 2px 0 rgb(var(--c-white) / 0.3); filter: brightness(1.08);} .number-icon .bm-icon {width: 2.25rem; height: 2.25rem; filter: drop-shadow(0 2px 6px rgb(var(--c-black) / 0.2));} .number-figure {display: block; font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3.8rem); font-weight: var(--font-weight-extrabold); line-height: 1.05; letter-spacing: var(--tracking-tighter); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; -webkit-hyphens: none; hyphens: none; max-width: 100%; min-height: 1.1em; margin-bottom: var(--space-3); transition: transform 350ms ease;} .number-item:hover .number-figure {transform: scale(1.06);} .number-label {display: block; color: var(--color-text-muted); font-size: clamp(0.85rem, 1vw, 1.05rem); font-weight: var(--font-weight-semibold); line-height: var(--leading-normal); letter-spacing: var(--tracking-snug); text-align: center; max-width: 160px; transition: color 350ms ease;} .number-item:hover .number-label {color: var(--color-accent-text);} .number-item:nth-child(1) {transition-delay: 0ms;} .number-item:nth-child(2) {transition-delay: 100ms;} .number-item:nth-child(3) {transition-delay: 200ms;} .number-item:nth-child(4) {transition-delay: 300ms;} .number-item:nth-child(5) {transition-delay: 400ms;} .number-item:nth-child(6) {transition-delay: 500ms;} @media (max-width: 1280px) {.numbers-bar {--nb-gap: var(--space-4); padding: var(--space-5);} .numbers-bar[data-count] {--cols: 4;} .numbers-bar[data-count="1"] {--cols: 1;} .numbers-bar[data-count="2"] {--cols: 2;} .numbers-bar[data-count="3"] {--cols: 3;} .numbers-bar[data-count="5"] {--cols: 3;} .numbers-bar[data-count="6"] {--cols: 3;} .number-item {min-height: 220px; padding: var(--space-8) var(--space-7);} .number-icon {width: 64px; height: 64px; margin-bottom: var(--space-6);} .number-icon .bm-icon {width: 2rem; height: 2rem;}} @media (max-width: 768px) {.numbers-section {padding: clamp(4.5rem, 8vw, 7rem) 0;} .numbers-bar {--nb-gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-2xl);} .numbers-bar[data-count] {--cols: 2;} .numbers-bar[data-count="1"] {--cols: 1;} .number-item {min-height: 200px; padding: var(--space-7) var(--space-6); border-radius: var(--radius-lg);} .number-item::before {border-radius: var(--radius-lg);} .number-icon {width: 56px; height: 56px; margin-bottom: var(--space-5);} .number-icon .bm-icon {width: 1.75rem; height: 1.75rem;} .number-figure {font-size: clamp(2.2rem, 4.5vw, 5rem); margin-bottom: var(--space-2);} .number-label {font-size: clamp(0.8rem, 0.9vw, 0.95rem);}} @media (max-width: 480px) {.numbers-section {padding: clamp(3.5rem, 6vw, 5rem) 0;} .numbers-bar {--nb-gap: var(--space-3); padding: var(--space-3);} .numbers-bar[data-count] {--cols: 1;} .number-item {min-height: 180px; padding: var(--space-6) var(--space-5); border-radius: 18px;} .number-item::before {border-radius: 18px;} .number-icon {width: 48px; height: 48px; margin-bottom: var(--space-4);} .number-icon .bm-icon {width: 1.5rem; height: 1.5rem;} .number-figure {font-size: clamp(2rem, 4vw, 4rem);} .number-label {font-size: 0.8rem; max-width: 140px;}} .section-subline {max-width: 680px; margin: var(--space-4) auto 0; font-size: var(--text-lg); color: var(--color-text-muted); line-height: var(--leading-relaxed); text-align: center;} .branchen-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); margin-top: var(--space-10);} .branchen-card {background: var(--on-dark-surface-faint); border: 1px solid var(--on-dark-border-faint); border-radius: var(--radius-lg); padding: var(--space-6); transition: background var(--transition-base), border-color var(--transition-base);} .branchen-card:has(a[href]):is(:hover, :focus-within) {background: var(--on-dark-surface); border-color: var(--color-accent);} .branchen-icon {font-size: 1.75rem; color: var(--color-accent-text); margin-bottom: var(--space-3); display: block;} .branchen-card h3 {font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--on-dark-text); margin-bottom: var(--space-2);} .branchen-card p {font-size: var(--text-sm); color: var(--color-gray-400); line-height: var(--leading-relaxed); margin: 0;} .faq-cards, .bs-faq-cards, .faq-section {--faq-bg: var(--color-bg); --faq-border: var(--color-border); --faq-text: var(--color-text); --faq-muted: var(--color-text-muted); --faq-accent: var(--color-accent); --faq-radius: var(--radius-lg); --faq-base-shadow: var(--card-shadow); --faq-hover-shadow: var(--card-shadow-hover-soft); --faq-open-border: color-mix(in srgb, var(--faq-accent) 14%, var(--faq-border)); --faq-glow-opacity: 0.82; --faq-motion-duration: 320ms; --faq-motion-ease: cubic-bezier(0.16, 1, 0.3, 1); max-width: 900px; margin: var(--space-10) auto 0; min-width: 0;} .dark-section :is(.faq-cards, .bs-faq-cards, .faq-section), :is(.faq-cards, .bs-faq-cards, .faq-section).is-dark {--faq-bg: var(--on-dark-surface-soft); --faq-border: var(--on-dark-border); --faq-text: var(--on-dark-text); --faq-muted: var(--on-dark-text-muted); --faq-base-shadow: none; --faq-hover-shadow: var(--card-shadow-hover-dark);} .faq-cards > h2, .faq-cards > h3, .bs-faq-cards > h2, .bs-faq-cards > h3, .faq-section > h2, .faq-section > h3 {margin: 0 0 var(--space-5); color: var(--faq-text); font-family: var(--font-display); font-size: clamp(var(--text-2xl), 2.4vw, var(--text-4xl)); line-height: var(--leading-tight);} :is(.faq-cards, .bs-faq-cards, .faq-section) details {position: relative; isolation: isolate; overflow: hidden; min-width: 0; max-width: 100%; margin: 0 0 var(--space-3); color: var(--faq-text); background: var(--faq-bg); border: 1px solid var(--faq-border); border-radius: var(--faq-radius); box-shadow: var(--faq-base-shadow); background-clip: padding-box; transition: border-color var(--glow-speed) var(--glow-ease), box-shadow var(--glow-speed) var(--glow-ease);} :is(.faq-cards, .bs-faq-cards, .faq-section) details::before {content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: var(--glow-layer-card); transition: opacity var(--glow-speed) var(--glow-ease);} :is(.faq-cards, .bs-faq-cards, .faq-section) details > * {position: relative; z-index: 1;} :is(.faq-cards, .bs-faq-cards, .faq-section) details[open] {border-color: var(--faq-open-border);} @media (hover: hover) {:is(.faq-cards, .bs-faq-cards, .faq-section) details:hover {z-index: 2; border-color: color-mix(in srgb, var(--faq-accent) 24%, var(--faq-border)); box-shadow: var(--faq-hover-shadow);} :is(.faq-cards, .bs-faq-cards, .faq-section) details:hover::before {opacity: var(--faq-glow-opacity);}} :is(.faq-cards, .bs-faq-cards, .faq-section) summary {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); min-width: 0; margin: 0; padding: var(--space-5) var(--space-6); color: var(--faq-text); font-size: var(--text-lg); font-weight: var(--font-weight-semibold); line-height: var(--leading-snug); list-style: none; cursor: pointer; overflow-wrap: anywhere;} :is(.faq-cards, .bs-faq-cards, .faq-section) summary::-webkit-details-marker {display: none;} :is(.faq-cards, .bs-faq-cards, .faq-section) summary::marker {content: "";} :is(.faq-cards, .bs-faq-cards, .faq-section) summary::before {content: none;} :is(.faq-cards, .bs-faq-cards, .faq-section) summary::after {content: ""; width: 10px; height: 10px; border-right: 2px solid var(--faq-accent); border-bottom: 2px solid var(--faq-accent); transform: rotate(45deg); transition: transform var(--glow-speed) var(--glow-ease), opacity var(--glow-speed) var(--glow-ease); opacity: 0.9;} :is(.faq-cards, .bs-faq-cards, .faq-section) details[open] summary::after {transform: rotate(225deg);} :is(.faq-cards, .bs-faq-cards, .faq-section) summary:focus-visible {outline: 2px solid color-mix(in srgb, var(--faq-accent) 42%, transparent); outline-offset: -3px; border-radius: calc(var(--faq-radius) - 2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--faq-accent) 18%, transparent);} :is(.faq-cards, .bs-faq-cards, .faq-section) .faq-body {box-sizing: border-box; display: block; padding: 0 var(--space-6) var(--space-5); color: var(--faq-muted); font-size: var(--text-base); line-height: var(--leading-relaxed); overflow-wrap: anywhere; transform: translate3d(0, 0, 0);} :is(.faq-cards, .bs-faq-cards, .faq-section) details[data-faq-animating] {z-index: 3;} :is(.faq-cards, .bs-faq-cards, .faq-section) details[data-faq-animating]::before {opacity: 0; transition-duration: 120ms;} :is(.faq-cards, .bs-faq-cards, .faq-section) details[data-faq-animating] .faq-body {overflow: hidden; transition: height var(--faq-motion-duration) var(--faq-motion-ease), opacity var(--glow-speed) ease, transform var(--faq-motion-duration) var(--faq-motion-ease); will-change: height, opacity, transform;} @supports (interpolate-size: allow-keywords) and selector(details::details-content) {:root {interpolate-size: allow-keywords;} :is(.faq-cards, .bs-faq-cards, .faq-section) details::details-content {block-size: 0; overflow: hidden; opacity: 0; transform: translate3d(0, -4px, 0); transition: block-size var(--faq-motion-duration) var(--faq-motion-ease), opacity var(--glow-speed) ease, transform var(--faq-motion-duration) var(--faq-motion-ease);} :is(.faq-cards, .bs-faq-cards, .faq-section) details[open]::details-content {block-size: auto; opacity: 1; transform: translate3d(0, 0, 0);}} :is(.faq-cards, .bs-faq-cards, .faq-section) .faq-body > *:first-child {margin-top: 0;} :is(.faq-cards, .bs-faq-cards, .faq-section) .faq-body > *:last-child {margin-bottom: 0;} :is(.faq-cards, .bs-faq-cards, .faq-section) .faq-body p {margin: 0 0 var(--space-3);} :is(.faq-cards, .bs-faq-cards, .faq-section) .faq-body ul, :is(.faq-cards, .bs-faq-cards, .faq-section) .faq-body ol {margin: var(--space-2) 0 var(--space-3) var(--space-5); padding: 0; line-height: var(--leading-relaxed);} :is(.faq-cards, .bs-faq-cards, .faq-section) .faq-body a {color: var(--color-accent-text); font-weight: var(--font-weight-semibold);} @media (max-width: 640px) {.faq-cards, .bs-faq-cards, .faq-section {margin-top: var(--space-8);} :is(.faq-cards, .bs-faq-cards, .faq-section) summary {padding: var(--space-4) var(--space-5); font-size: var(--text-base);} :is(.faq-cards, .bs-faq-cards, .faq-section) .faq-body {padding: 0 var(--space-5) var(--space-4);}} @media (prefers-reduced-motion: reduce) {:is(.faq-cards, .bs-faq-cards, .faq-section) details, :is(.faq-cards, .bs-faq-cards, .faq-section) details::before, :is(.faq-cards, .bs-faq-cards, .faq-section) summary::after, :is(.faq-cards, .bs-faq-cards, .faq-section) .faq-body {transition-duration: 1ms;} @supports selector(details::details-content) {:is(.faq-cards, .bs-faq-cards, .faq-section) details::details-content {transition-duration: 1ms;}} :is(.faq-cards, .bs-faq-cards, .faq-section) details:hover {transform: none;}} .faq-item {border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); background: var(--color-bg); box-shadow: var(--card-shadow);} .video-showcase__header {text-align: center; max-width: 720px; margin: 0 auto var(--space-12);} .video-showcase__container {max-width: 960px; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 32px 80px rgb(var(--c-black) / 0.5); background: rgb(var(--c-black)); aspect-ratio: 16 / 9;} .video-showcase__video, .video-showcase__container picture, .video-showcase__container picture img {width: 100%; height: 100%; object-fit: cover; display: block;} @media (max-width: 640px) {.video-showcase__container {border-radius: var(--radius-lg);}} @media (prefers-reduced-motion: reduce) {.video-showcase__video {animation: none !important;}} @media (min-width: 640px) {.services-grid--2col {grid-template-columns: repeat(2, var(--grid-track-fluid));}} @media (min-width: 1024px) {.services-grid--3col {grid-template-columns: repeat(3, var(--grid-track-fluid));}} @media (min-width: 1024px) {.services-grid--3col:has(> :nth-child(2):last-child) {grid-template-columns: repeat(2, var(--grid-track-fluid)); max-width: 60rem; margin-inline: auto;}} .card-fold {margin-top: var(--space-8);} .card-fold__toggle {display: flex; width: fit-content; margin-inline: auto; list-style: none;} .card-fold__toggle::-webkit-details-marker {display: none;} .card-fold__toggle::marker {content: "";} .card-fold__count {font-variant-numeric: tabular-nums; opacity: 0.7;} .card-fold__label--less {display: none;} .card-fold[open] .card-fold__label--more {display: none;} .card-fold[open] .card-fold__label--less {display: inline;} .card-fold__grid {margin-top: var(--space-8); counter-reset: none;} .service-card {display: flex; flex-direction: column; position: relative; overflow: visible; isolation: isolate; background-clip: padding-box; cursor: default;} .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)) {cursor: pointer;} .service-card-text {flex: 1;} .service-card-img {margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-6); overflow: hidden; border-radius: var(--radius-xl) var(--radius-xl) 0 0;} .service-card-img picture, .service-card-img img {width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;} a.service-card-link[href]::after, .card-stretched-link[href]::after {content: ""; position: absolute; inset: 0; z-index: 3;} .service-card-spec {font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: var(--color-accent-text); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin: var(--space-3) 0 var(--space-4);} .service-card-bullets {list-style: none; padding: 0; margin: 0 0 var(--space-4);} .service-card-bullets li {font-size: var(--text-sm); color: var(--color-text-muted); padding-left: var(--space-5); position: relative; margin-bottom: var(--space-2); line-height: var(--leading-snug);} .service-card-bullets li::before {content: "—"; position: absolute; left: 0; color: var(--color-accent-text); font-weight: var(--font-weight-bold);} .dark-section .service-card {background: var(--on-dark-surface-soft); border-color: var(--on-dark-border-soft); box-shadow: none;} .dark-section .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within) {background: var(--on-dark-surface-strong); border-color: var(--color-accent);} .dark-section .service-card-title {color: var(--on-dark-text);} .dark-section .service-card-text {color: var(--color-text-muted);} .dark-section .service-card-bullets li {color: var(--color-text-muted);} .dark-section .service-card-spec {color: var(--color-accent-text);} .rohr-decision-strip {display: flex; align-items: center; gap: var(--space-6); background: var(--on-dark-surface-soft); border: 1px solid var(--on-dark-border); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-10);} .rohr-decision-strip__item {flex: 1; display: flex; flex-direction: column; gap: var(--space-2);} .rohr-decision-strip__range {font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--font-weight-bold); color: var(--color-accent-text); line-height: 1;} .rohr-decision-strip__label {font-size: var(--text-sm); color: var(--color-gray-400); line-height: var(--leading-relaxed);} .rohr-decision-strip__method {font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--on-dark-text); margin-top: var(--space-1);} .rohr-decision-strip__divider {display: flex; align-items: center; justify-content: center; color: var(--on-dark-text-quiet); font-size: var(--text-2xl); flex-shrink: 0;} @media (max-width: 640px) {.rohr-decision-strip {flex-direction: column; padding: var(--space-6); gap: var(--space-5);} .rohr-decision-strip__divider {transform: rotate(90deg);}} .proc-stage .rohr-decision-strip {background: var(--color-bg-alt); border-color: var(--color-border);} .proc-stage .rohr-decision-strip__label {color: var(--color-text-muted);} .proc-stage .rohr-decision-strip__method {color: var(--color-text);} .proc-stage .rohr-decision-strip__divider {color: var(--color-text-light);} a.rohr-decision-strip__method {display: inline-flex; align-items: center; text-decoration: none; transition: color var(--transition-fast);} a.rohr-decision-strip__method span {transition: transform var(--transition-fast);} a.rohr-decision-strip__method:hover span, a.rohr-decision-strip__method:focus-visible span {transform: translateX(3px);} a.rohr-decision-strip__method:hover, a.rohr-decision-strip__method:focus-visible {text-decoration: underline; text-underline-offset: 3px; outline: none;} .proc-stage a.rohr-decision-strip__method {color: var(--color-accent-text);} .proc-stage a.rohr-decision-strip__method:hover, .proc-stage a.rohr-decision-strip__method:focus-visible {color: var(--color-accent-text);} .hero-image-wrapper {width: 100%;} .hero-image-wrapper__img {width: 100%; height: auto; display: block;} .process-list {display: flex; flex-direction: column; gap: 1.5rem; margin: 1.5rem 0;} .process-list__item {display: grid; grid-template-columns: 1fr; gap: 0.25rem;} @media (min-width: 640px) {.process-list__item {grid-template-columns: minmax(0, 220px) var(--grid-track-fluid); gap: 1rem; align-items: baseline;}} .process-list__label {font-weight: var(--font-weight-semibold); color: var(--color-heading); min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;} .process-list__label a {color: var(--color-accent-text); text-decoration: none;} .process-list__label a:hover {text-decoration: underline;} .process-list__text {color: var(--color-text); margin: 0;} .dark-section .process-list__label {color: var(--color-heading);} .dark-section .process-list__text {color: var(--color-text-muted);} .why-list {display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0;} .why-list__item {display: grid; grid-template-columns: 1fr; gap: 0.25rem;} @media (min-width: 640px) {.why-list__item {grid-template-columns: minmax(0, 180px) var(--grid-track-fluid); gap: 1rem; align-items: baseline;}} .why-list__key {font-weight: var(--font-weight-semibold); color: var(--color-heading); min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;} .why-list__text {color: var(--color-text); margin: 0;} .dark-section .why-list__key {color: var(--color-heading);} .dark-section .why-list__text {color: var(--color-text-muted);} .section-link-wrap {margin-top: 1.5rem;} .section-link {color: var(--color-accent-text); font-weight: var(--font-weight-medium); text-decoration: none;} .section-link:hover {text-decoration: underline;} .dark-section .section-link {color: var(--color-accent-text);} .timeline-section {position: relative; padding: clamp(5rem, 8vw, 8rem) 0; background: radial-gradient(circle at 20% 50%, rgb(var(--c-info) / 0.04), transparent 45%), radial-gradient(circle at 80% 50%, rgb(var(--c-red) / 0.03), transparent 45%), linear-gradient(180deg, var(--color-bg-alt), var(--color-bg)); overflow: visible; contain: layout style;} .timeline {position: relative; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-8) 0; margin-top: var(--space-12);} .timeline::before {content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgb(var(--c-red) / 0.3), rgb(var(--c-red) / 0.15), rgb(var(--c-red) / 0.3)); transform: translateX(-50%); transform-origin: top center; animation: timelineGrow 1.2s ease-out forwards;} @keyframes timelineGrow {from {height: 0;} to {height: 100%;}} .timeline-item {position: relative; display: flex;} .timeline-item:nth-child(odd) {flex-direction: row;} .timeline-item:nth-child(even) {flex-direction: row-reverse;} .timeline-dot {position: absolute; left: 50%; top: 32px; transform: translateX(-50%); z-index: 10; width: 20px; height: 20px; background: var(--color-bg); border: 3px solid var(--color-accent); border-radius: 50%; box-shadow: 0 0 0 4px rgb(var(--c-red) / 0.1), 0 4px 12px rgb(var(--c-red) / 0.2); transition: all 350ms cubic-bezier(0.34, 1.56, 0.64, 1);} .timeline-item.active .timeline-dot, .timeline-item:hover .timeline-dot {width: 28px; height: 28px; top: 28px; background: var(--color-accent); box-shadow: 0 0 0 6px rgb(var(--c-red) / 0.15), 0 8px 24px rgb(var(--c-red) / 0.35);} .timeline-dot::after {content: ""; position: absolute; inset: 50%; width: 8px; height: 8px; background: var(--color-bg); border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 350ms ease;} .timeline-item.active .timeline-dot::after, .timeline-item:hover .timeline-dot::after {opacity: 1;} .timeline-content {width: 48%; padding: 0 var(--space-8);} .timeline-year {font-family: var(--font-display); font-size: clamp(0.95rem, 1.2vw, 1.25rem); font-weight: var(--font-weight-bold); color: var(--color-accent-text); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-3);} .timeline-card {position: relative; padding: var(--space-8); background: linear-gradient(135deg, var(--color-bg), var(--color-bg-alt)); border: 1px solid var(--on-dark-border-bright); border-radius: var(--radius-2xl); box-shadow: 0 16px 48px rgb(var(--c-shadow) / 0.06), 0 6px 24px rgb(var(--c-shadow) / 0.04), inset 0 1px 0 rgb(var(--c-white) / 0.8); transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; contain: layout style paint;} .timeline-card::before {content: ""; position: absolute; inset: 0; border-radius: var(--radius-2xl); padding: 1px; background: linear-gradient(135deg, rgb(var(--c-red) / 0.1), rgb(var(--c-info) / 0.08), rgb(var(--c-red) / 0.06)); -webkit-mask: linear-gradient(rgb(var(--c-white)) 0 0) content-box, linear-gradient(rgb(var(--c-white)) 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 350ms ease; pointer-events: none;} .timeline-item:hover .timeline-card::before {opacity: 1;} .timeline-item:hover .timeline-card {background: linear-gradient(135deg, var(--color-bg), var(--color-bg-alt)); border-color: rgb(var(--c-red) / 0.15); box-shadow: 0 24px 64px rgb(var(--c-red) / 0.12), 0 8px 32px rgb(var(--c-shadow) / 0.08), inset 0 1px 0 rgb(var(--c-white) / 0.9); transform: translate3d(0, -4px, 0);} .timeline-icon {display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--space-4); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light)); border-radius: 50%; box-shadow: 0 8px 20px rgb(var(--c-red) / 0.25), inset 0 2px 0 rgb(var(--c-white) / 0.2); transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 350ms ease;} .timeline-item:hover .timeline-icon {transform: scale(1.12) rotate(-6deg); box-shadow: 0 12px 32px rgb(var(--c-red) / 0.35), inset 0 2px 0 rgb(var(--c-white) / 0.3);} .timeline-icon i {color: var(--color-text-inverse); font-size: var(--text-2xl); filter: drop-shadow(0 2px 4px rgb(var(--c-black) / 0.15));} .timeline-card h3 {font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: 0.6rem; transition: color 350ms ease;} .timeline-item:hover .timeline-card h3 {color: var(--color-accent-text);} .timeline-card p {font-size: 0.95rem; color: var(--color-text-light); line-height: 1.65; margin: 0; transition: color 350ms ease;} .timeline-item:hover .timeline-card p {color: var(--color-text);} @media (max-width: 1024px) {.timeline {gap: var(--space-10);} .timeline::before {left: 16px;} .timeline-item {flex-direction: row !important;} .timeline-dot {left: 16px;} .timeline-content {width: calc(100% - 60px); padding: 0 var(--space-8) 0 var(--space-12);} .timeline-year {font-size: 1.05rem;} .timeline-card {padding: var(--space-7);}} @media (max-width: 680px) {.timeline-section {padding: clamp(3.5rem, 6vw, 6rem) 0;} .timeline {gap: var(--space-8); padding: var(--space-4) 0; margin-top: var(--space-8);} .timeline::before {left: 12px;} .timeline-dot {left: 12px; width: 16px; height: 16px; border-width: 2.5px; top: 26px;} .timeline-item.active .timeline-dot, .timeline-item:hover .timeline-dot {width: 24px; height: 24px; top: 22px;} .timeline-content {width: calc(100% - 50px); padding: 0 var(--space-6) 0 var(--space-10);} .timeline-year {font-size: 0.95rem;} .timeline-card {padding: var(--space-6); border-radius: 16px;} .timeline-card::before {border-radius: 16px;} .timeline-icon {width: 40px; height: 40px; margin-bottom: var(--space-3);} .timeline-icon i {font-size: 1.2rem;} .timeline-card h3 {font-size: 1.1rem;} .timeline-card p {font-size: 0.9rem;}} @media (max-width: 420px) {.timeline::before {left: 10px;} .timeline-dot {left: 10px;} .timeline-content {width: calc(100% - 40px); padding: 0 var(--space-5) 0 2.25rem;} .timeline-card {padding: var(--space-5);}} .tl-card {position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-2xl); background: linear-gradient(135deg, var(--color-bg), var(--color-bg-alt)); border: 1px solid var(--color-border); box-shadow: 0 16px 48px rgb(var(--c-shadow) / 0.07), 0 4px 14px rgb(var(--c-shadow) / 0.04); transition: transform var(--card-img-zoom-speed) var(--glow-ease), box-shadow var(--card-img-zoom-speed) var(--glow-ease), border-color var(--card-img-zoom-speed) var(--glow-ease); contain: layout style;} .tl-card-media {position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: rgb(var(--c-shadow) / 0.06);} .tl-card-img {position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: translateZ(0); transition: transform var(--card-img-zoom-speed) var(--card-img-zoom-ease);} .tl-card-media--portrait .tl-card-img {object-position: center 22%;} .tl-card-media::after {content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--c-shadow-deep) / 0.62) 0%, rgb(var(--c-shadow-deep) / 0.18) 26%, transparent 52%); pointer-events: none;} .tl-card-year {position: absolute; left: var(--space-5); bottom: var(--space-4); z-index: 2; font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: var(--font-weight-bold); line-height: 1; letter-spacing: var(--tracking-wide); color: var(--color-text-inverse); text-shadow: 0 2px 14px rgb(var(--c-shadow-deep) / 0.55);} .tl-card-year::before {content: ""; display: block; width: 34px; height: 3px; margin-bottom: 0.55rem; border-radius: 3px; background: var(--color-accent); box-shadow: 0 0 14px rgb(var(--c-red) / 0.6);} .tl-card-tag {position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; display: inline-flex; align-items: center; gap: 0.45em; max-width: calc(100% - 2 * var(--space-4)); padding: 0.4rem 0.7rem; font-size: 0.74rem; font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide); color: var(--color-text-inverse); background: rgb(var(--c-shadow-deep) / 0.5); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(140%); backdrop-filter: blur(var(--blur-md)) saturate(140%); border: 1px solid var(--on-dark-border-strong); border-radius: var(--badge-radius);} .tl-card-tag i {flex: none; color: var(--color-accent-text); font-size: 0.85em;} .tl-card-body {padding: var(--space-6) var(--space-6) var(--space-7);} .tl-card-title {display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.55rem; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--color-text); transition: color var(--glow-speed) var(--glow-ease);} .tl-card-ico {display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--color-text-inverse); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light)); box-shadow: 0 8px 18px rgb(var(--c-red) / 0.28), inset 0 2px 0 rgb(var(--c-white) / 0.22); transition: transform var(--card-img-zoom-speed) var(--glow-ease);} .tl-card-ico i {font-size: 1.05rem; filter: drop-shadow(0 2px 4px rgb(var(--c-black) / 0.18));} .tl-card-text {margin: 0; font-size: 0.97rem; line-height: 1.65; color: var(--color-text-light);} .tl-card-text strong {color: var(--color-text); font-weight: var(--font-weight-semibold);} .tl-card--compact {background: linear-gradient(135deg, rgb(var(--c-red) / 0.05), var(--color-bg-alt)), var(--color-bg); border-color: rgb(var(--c-red) / 0.12);} .tl-card--compact .tl-card-body {padding: var(--space-7) var(--space-6);} .tl-card-year--inline {position: static; display: inline-block; margin-bottom: 0.55rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--color-accent-text); text-shadow: none;} .tl-card-year--inline::before {display: none;} .tl-card--active {border-color: rgb(var(--c-red) / 0.35); box-shadow: 0 20px 54px rgb(var(--c-red) / 0.14), 0 6px 18px rgb(var(--c-shadow) / 0.06);} .tl-card--active .tl-card-tag {background: rgb(var(--c-red) / 0.85); border-color: var(--on-dark-border-strong);} .tl-card--active .tl-card-tag i {color: var(--color-text-inverse);} @media (hover: hover) {.tl-card:hover {transform: var(--card-lift); border-color: rgb(var(--c-red) / 0.22); box-shadow: 0 28px 70px rgb(var(--c-shadow) / 0.13), 0 10px 28px rgb(var(--c-red) / 0.10);} .tl-card:hover .tl-card-img {transform: translateZ(0) scale(var(--card-img-zoom));} .tl-card:hover .tl-card-title {color: var(--color-accent-text);} .tl-card:hover .tl-card-ico {transform: scale(1.08) rotate(-6deg);}} @media (prefers-reduced-motion: reduce) {.tl-card, .tl-card-img, .tl-card-ico, .tl-card-title {transition: none;} .tl-card:hover, .tl-card:hover .tl-card-img, .tl-card:hover .tl-card-ico {transform: none;}} @media (max-width: 680px) {.tl-card-body {padding: var(--space-5) var(--space-5) var(--space-6);} .tl-card--compact .tl-card-body {padding: var(--space-6) var(--space-5);} .tl-card-title {gap: 0.6rem; font-size: 1.12rem;} .tl-card-ico {width: 36px; height: 36px;} .tl-card-ico i {font-size: 0.95rem;} .tl-card-text {font-size: 0.92rem;} .tl-card-year {left: var(--space-4); bottom: var(--space-3);} .tl-card-tag {font-size: 0.7rem; padding: 0.34rem 0.6rem;}} .bm-ls-banner {position: fixed; left: 0; right: 0; top: 0; width: 100%; min-height: var(--ls-banner-height); background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: 0 6px 24px rgb(var(--c-black) / 0.12); z-index: var(--z-toast); font-family: var(--font-base); font-size: var(--text-sm); line-height: var(--leading-snug);} .bm-ls-inner {max-width: var(--container-max); margin: 0 auto; padding: var(--space-2) var(--space-6); display: flex; align-items: center; gap: var(--space-3); flex-wrap: nowrap;} .bm-ls-globe {flex-shrink: 0; color: var(--color-heading);} .bm-ls-text {flex: 1 1 auto; min-width: 0; margin: 0; color: var(--color-text); font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .bm-ls-actions {display: flex; gap: var(--space-2); align-items: center; flex-shrink: 0;} .bm-ls-more {display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-border); color: var(--color-text); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);} .bm-ls-more:hover, .bm-ls-more:focus-visible {background: var(--color-bg-alt); border-color: var(--color-heading); color: var(--color-heading); outline: none;} .bm-ls-more svg {flex-shrink: 0;} .bm-ls-more__caret {opacity: 0.7;} .bm-ls-close {background: transparent; border: 0; font-size: var(--text-2xl); line-height: 1; color: var(--color-text-muted); cursor: pointer; padding: 0 var(--space-1); flex-shrink: 0;} .bm-ls-close:hover {color: var(--color-text);} @media (max-width: 640px) {.bm-ls-inner {padding: var(--space-2) var(--space-3); gap: var(--space-2);} .bm-ls-text {white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--text-xs);} .bm-ls-more__caret {display: none;}} @media (max-width: 480px) {.bm-ls-inner .bm-ls-globe {display: none;}} .table-responsive {position: relative; min-width: 0; margin-top: var(--space-6);} .table-responsive__scroll {overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;} .table-responsive__scroll::-webkit-scrollbar {height: 8px;} .table-responsive__scroll::-webkit-scrollbar-track {background: transparent;} .table-responsive__scroll::-webkit-scrollbar-thumb {background: var(--color-border); border-radius: var(--radius-full);} .table-responsive::before, .table-responsive::after {content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 2.75rem; pointer-events: none; opacity: 0; transition: opacity var(--glow-speed) var(--glow-ease);} .table-responsive::before {left: 0; background: linear-gradient(to right, rgb(var(--c-shadow) / 0.16), transparent);} .table-responsive::after {right: 0; background: linear-gradient(to left, rgb(var(--c-shadow) / 0.16), transparent);} .table-responsive.is-scrollable:not(.at-start)::before {opacity: 1;} .table-responsive.is-scrollable:not(.at-end)::after {opacity: 1;} @media (prefers-reduced-motion: reduce) {.table-responsive::before, .table-responsive::after {transition: none;}} .spec-table {width: 100%; min-width: 34rem; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); font-size: var(--text-sm); color: var(--color-text);} .spec-table thead th {background: var(--color-bg-alt); color: var(--color-heading); font-weight: var(--font-weight-bold); text-align: left; white-space: nowrap;} .spec-table th, .spec-table td {padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); vertical-align: middle; text-align: left;} .spec-table tbody th[scope="row"] {font-weight: var(--font-weight-semibold); color: var(--color-text);} .spec-table tbody tr:nth-child(even) td, .spec-table tbody tr:nth-child(even) th[scope="row"] {background: var(--color-bg-alt);} .spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td {border-bottom: 0;} .spec-table th:last-child, .spec-table td:last-child {border-right: 0;} .dark-section .spec-table thead th {background: var(--on-dark-surface-soft); color: var(--on-dark-text);} .dark-section .spec-table tbody th[scope="row"] {color: var(--on-dark-text);} .dark-section .spec-table tbody tr:nth-child(even) td, .dark-section .spec-table tbody tr:nth-child(even) th[scope="row"] {background: var(--on-dark-surface-faint);} @media (max-width: 640px) {.spec-table {font-size: var(--text-xs);} .spec-table th, .spec-table td {padding: var(--space-2) var(--space-3);}}
.u-text-gradient, .rubric__title, .number-figure {background: var(--text-gradient, var(--gradient-text-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;} .number-figure {--text-gradient: var(--gradient-text-primary);} :is(.service-card, .machinery-card, .job-card, .branchen-card, .contact-sidebar-panel, .contact-quick-panel, .contact-form-wrap, .contact-map-section, .contact-person-card, .application-form-wrap, .legal-download-box) {transition: transform var(--transition-base), box-shadow var(--glow-speed) var(--glow-ease), border-color var(--glow-speed) var(--glow-ease), background-color var(--glow-speed) var(--glow-ease);} .u-glow, .service-card, .branchen-card {position: relative; isolation: isolate;} .u-glow::after, .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled))::after, .branchen-card:has(a[href])::after {content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--glow); opacity: 0; transition: opacity var(--glow-speed) var(--glow-ease); pointer-events: none;} .u-glow:is(:hover, :focus-within)::after, .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within)::after, .branchen-card:has(a[href]):is(:hover, :focus-within)::after {opacity: 1;} .u-glow:is(:hover, :focus-within), .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within), .branchen-card:has(a[href]):is(:hover, :focus-within) {z-index: 1;} @media (prefers-reduced-motion: reduce) {.u-glow::after, .service-card::after, .branchen-card::after {transition: none;}} .service-card-img img, .job-card-media img, .machinery-card-img img, .story-card-img {transition: transform var(--card-img-zoom-speed) var(--card-img-zoom-ease);} .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within) .service-card-img img, .job-card:is(:hover, :focus-within) .job-card-media img, .machinery-card:has(a[href]):is(:hover, :focus-within) .machinery-card-img img, .story-card:is(:hover, :focus-visible) .story-card-img {transform: translateZ(0) scale(var(--card-img-zoom));} @media (prefers-reduced-motion: reduce) {.service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within) .service-card-img img, .job-card:is(:hover, :focus-within) .job-card-media img, .machinery-card:has(a[href]):is(:hover, :focus-within) .machinery-card-img img, .story-card:is(:hover, :focus-visible) .story-card-img {transform: none;}} .u-card {position: relative; isolation: isolate;} .u-card::after {content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--glow); opacity: 0; transition: opacity var(--glow-speed) var(--glow-ease); pointer-events: none;} .u-card [data-card-img] {transition: transform var(--card-img-zoom-speed) var(--card-img-zoom-ease);} .u-card:is(:hover, :focus-within)::after {opacity: 1;} .u-card:is(:hover, :focus-within) {z-index: 1;} .u-card:is(:hover, :focus-within) [data-card-img] {transform: translateZ(0) scale(var(--card-img-zoom));} .u-card:focus-within {transform: var(--card-lift);} @media (hover: hover) {.u-card:hover {transform: var(--card-lift);}} @media (prefers-reduced-motion: reduce) {.u-card::after {transition: none;} .u-card:is(:hover, :focus-within), .u-card:is(:hover, :focus-within) [data-card-img] {transform: none;}} :is(.job-card, .machinery-card:has(a[href]), .branchen-card:has(a[href])):focus-within {transform: var(--card-lift);} .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):focus-within {transform: var(--card-lift);} @media (hover: hover) {.service-card:has(a.service-card-link[href]:not(.service-card-link--disabled))::before {content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: var(--glow-layer-card); transition: opacity var(--glow-speed) var(--glow-ease);} .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)) > :not(a.service-card-link):not(.card-stretched-link) {position: relative; z-index: 1;} .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within)::before {opacity: var(--glow-layer-opacity);} :is(.job-card, .machinery-card:has(a[href]), .branchen-card:has(a[href])):is(:hover, :focus-within) {transform: var(--card-lift);} .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within) {transform: var(--card-lift); border-color: var(--card-border-hover);} :is(.job-card, .contact-person-card, .legal-download-box, .contact-sidebar-panel, .contact-quick-panel, .contact-map-section):has(a[href]:is(:hover, :focus-visible)) {border-color: color-mix(in srgb, var(--color-accent) 26%, var(--color-border)); box-shadow: var(--card-shadow-hover-soft), var(--glow-focus-ring);} .job-card:is(:hover, :focus-within) {border-color: var(--card-border-hover-dark); box-shadow: var(--card-shadow-hover-dark), var(--glow);} .machinery-card:has(a[href]):is(:hover, :focus-within) {box-shadow: var(--card-shadow-hover), var(--glow);} .dark-section .service-card:has(a.service-card-link[href]:not(.service-card-link--disabled)):is(:hover, :focus-within) {border-color: var(--card-border-hover-dark);}} @media (prefers-reduced-motion: reduce) {:is(.service-card, .machinery-card, .job-card, .branchen-card, .contact-sidebar-panel, .contact-quick-panel, .contact-form-wrap, .contact-map-section, .contact-person-card, .legal-download-box, .application-form-wrap, .form-input, .form-checkbox, .form-upload-zone) {transition-duration: 1ms;} :is(.service-card, .machinery-card, .job-card, .branchen-card, .contact-person-card, .legal-download-box, .form-checkbox, .form-upload-zone):is(:hover, :focus-within) {transform: none;}}
.gallery-showcase {background: var(--carousel-showcase-bg);} .gallery-showcase-head {text-align: left; margin-bottom: var(--space-8);} .gallery-showcase-head .section-subtitle {margin: 0; max-width: 820px;} .gallery-showcase-link {display: inline-flex; margin-top: var(--space-5); font-weight: var(--font-weight-semibold); color: var(--color-accent-text); text-decoration: none; border-bottom: 1px solid rgb(var(--c-red-light) / 0.60); padding-bottom: 2px; transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);} .gallery-showcase-link:hover, .gallery-showcase-link:focus-visible {color: var(--color-text-inverse); border-color: var(--on-dark-text-muted); transform: translateY(-1px);} .gallery-showcase-stage {display: block;} :is(.story-carousel, .jobs-carousel) {position: relative; --carousel-slide-width: min(90vw, 980px); --carousel-track-min-height: min(58vw, 560px); --carousel-mobile-track-min-height: min(116vw, 560px); --carousel-copy-padding: clamp(1rem, 2vw, 1.6rem); --carousel-mobile-copy-padding: var(--carousel-copy-padding);} .jobs-carousel {--carousel-slide-width: min(88vw, 980px); --carousel-mobile-track-min-height: min(126vw, 620px); --carousel-mobile-copy-padding: clamp(0.9rem, 4vw, 1.15rem);} :is(.story-viewport, .jobs-viewport) {position: relative; overflow: hidden; padding: var(--space-5) 0;} @media (min-width: 768px) {:is(.story-carousel, .jobs-carousel) {--carousel-slide-width: min(74vw, 1020px);} :is(.story-viewport, .jobs-viewport) {padding: var(--space-8) 0;}} @media (min-width: 1200px) {:is(.story-carousel, .jobs-carousel) {--carousel-slide-width: min(66vw, 1040px);}} :is(.story-track, .jobs-track) {position: relative; width: 100%; min-height: var(--carousel-track-min-height); margin: 0; padding: 0; list-style: none;} :is(.story-slide, .jobs-slide) {position: absolute; top: 0; left: 50%; width: var(--carousel-slide-width); transform-origin: center center; transition: var(--carousel-slide-transition); backface-visibility: hidden; contain: layout style; isolation: isolate;} :is(.story-card, .jobs-carousel .job-card) {position: relative; z-index: 1; display: block; overflow: hidden; padding: 0; background: transparent; border-radius: var(--carousel-card-radius); text-decoration: none; border: 1px solid var(--carousel-card-border); box-shadow: var(--carousel-card-shadow); transition: var(--carousel-card-transition); isolation: isolate;} :is(.story-card, .jobs-carousel .job-card)::before {content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--glass-on-dark-sheen); pointer-events: none; z-index: 3; opacity: 0.7;} :is(.story-card, .jobs-carousel .job-card):is(:hover, :focus-visible), .jobs-carousel .job-card:is(:hover, :focus-within) {transform: none; background: transparent; border-color: var(--carousel-card-border-hover); box-shadow: var(--carousel-card-shadow-hover);} .story-carousel.is-enhanced .story-slide.is-active .story-card:is(:hover, :focus-visible), .jobs-carousel.is-enhanced .jobs-slide.is-active .job-card:is(:hover, :focus-within) {box-shadow: var(--carousel-card-shadow-active);} :is(.story-card-media, .jobs-carousel .job-card-media) {position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: rgb(var(--c-scrim)); line-height: 0;} .jobs-carousel .job-card-picture {position: absolute; inset: 0; display: block; width: 100%; height: 100%;} :is(.story-card-media picture, .story-card-media img, .jobs-carousel .job-card-picture > img, .jobs-carousel .job-card-img) {display: block; width: 100%; height: 100%; min-width: 100%; min-height: 100%; object-fit: cover; object-position: center center;} :is(.story-card-img, .jobs-carousel .job-card-img) {transform-origin: center center;} :is(.story-card-overlay, .jobs-carousel .job-card-overlay) {position: absolute; inset: 0; background: var(--media-image-scrim); z-index: 1;} :is(.story-card-copy, .jobs-carousel .job-card-copy) {position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; color: var(--color-text-inverse); padding: var(--carousel-copy-padding);} :is(.story-card-copy h3, .jobs-carousel .job-title) {font-family: var(--font-display); font-size: clamp(1.15rem, 2.1vw, 1.9rem); line-height: var(--leading-tight); margin: var(--space-2) 0 var(--space-3); max-width: 36ch; color: var(--color-text-inverse);} :is(.story-card-badge, .jobs-carousel .job-card-type) {display: inline-block; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; border-radius: var(--badge-radius); padding: 0.36rem 0.72rem; background: var(--glass-on-dark-bg); border: 1px solid var(--glass-on-dark-border); color: var(--color-text-inverse);} .jobs-carousel .job-meta {display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3);} .jobs-carousel .job-meta span {font-size: var(--text-sm); color: var(--on-dark-text-soft); display: flex; align-items: center; gap: var(--space-2);} .jobs-carousel .job-desc {font-size: var(--text-sm); color: var(--on-dark-text-soft); margin-bottom: var(--space-4); line-height: var(--leading-relaxed);} :is(.story-controls, .jobs-controls) {margin-top: var(--space-3); position: relative; z-index: 5; margin-left: auto; margin-right: auto; width: fit-content; display: flex; align-items: center; justify-content: center; gap: var(--carousel-ctrl-gap); padding: var(--carousel-ctrl-bar-padding); border-radius: var(--carousel-ctrl-bar-radius); background: var(--carousel-ctrl-bar-bg); border: 1px solid var(--carousel-ctrl-bar-border); box-shadow: var(--carousel-ctrl-bar-shadow); transition: box-shadow 0.35s var(--glow-ease), border-color 0.35s var(--glow-ease);} :is(.story-controls, .jobs-controls):hover, :is(.story-controls, .jobs-controls):focus-within {border-color: var(--carousel-ctrl-bar-border-hover); box-shadow: var(--carousel-ctrl-bar-shadow-hover);} :is(.story-control-btn, .jobs-control-btn) {width: var(--carousel-ctrl-btn-size); height: var(--carousel-ctrl-btn-size); border-radius: var(--carousel-ctrl-btn-radius); border: 0; color: var(--on-dark-text-soft); display: inline-flex; align-items: center; justify-content: center; background: transparent; transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);} :is(.story-control-btn, .jobs-control-btn) svg {width: 1rem; height: 1rem;} :is(.story-control-btn, .jobs-control-btn):hover, :is(.story-control-btn, .jobs-control-btn):focus-visible {background: var(--carousel-ctrl-btn-hover-bg); color: var(--on-dark-text);} :is(.story-control-btn, .jobs-control-btn)[aria-disabled="true"] {opacity: 0.32; cursor: default;} :is(.story-control-btn, .jobs-control-btn)[aria-disabled="true"]:hover, :is(.story-control-btn, .jobs-control-btn)[aria-disabled="true"]:focus-visible {background: transparent; color: var(--on-dark-text-soft);} :is(.story-counter, .jobs-counter) {margin: 0; min-width: var(--carousel-ctrl-counter-min); padding: 0 0.45rem; text-align: center; color: var(--on-dark-text-high); font-weight: var(--font-weight-medium); font-size: var(--text-sm); font-variant-numeric: tabular-nums;} :is(.story-counter, .jobs-counter) span:nth-child(2) {margin: 0 0.18em; color: var(--on-dark-text-faint);} :is(.story-carousel.is-enhanced .story-viewport, .jobs-carousel.is-enhanced .jobs-viewport) {overflow-x: clip; overflow-y: visible; padding: var(--carousel-enhanced-padding);} :is(.story-carousel.is-enhanced .story-track, .jobs-carousel.is-enhanced .jobs-track) {transition: none;} :is(.story-carousel.is-enhanced .story-slide, .jobs-carousel.is-enhanced .jobs-slide) {opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.84); pointer-events: none; will-change: auto;} :is(.story-carousel.is-enhanced .story-slide.is-hidden, .jobs-carousel.is-enhanced .jobs-slide.is-hidden) {opacity: 0; transform: translate3d(-50%, 0, 0) scale(0.82); pointer-events: none; will-change: auto;} :is(.story-carousel.is-enhanced .story-slide, .jobs-carousel.is-enhanced .jobs-slide):is(.is-active, .is-prev, .is-next) {will-change: transform, opacity;} :is(.story-carousel.is-enhanced .story-slide, .jobs-carousel.is-enhanced .jobs-slide):is(.is-prev, .is-next) {opacity: 0.52; pointer-events: auto;} :is(.story-carousel.is-enhanced .story-slide.is-prev, .jobs-carousel.is-enhanced .jobs-slide.is-prev) {transform: translate3d(calc(-50% - 44%), 14px, 0) scale(0.92);} :is(.story-carousel.is-enhanced .story-slide.is-next, .jobs-carousel.is-enhanced .jobs-slide.is-next) {transform: translate3d(calc(-50% + 44%), 14px, 0) scale(0.92);} :is(.story-carousel.is-enhanced .story-slide, .jobs-carousel.is-enhanced .jobs-slide):is(.is-far-prev, .is-far-next) {opacity: 0.20; pointer-events: none;} :is(.story-carousel.is-enhanced .story-slide.is-far-prev, .jobs-carousel.is-enhanced .jobs-slide.is-far-prev) {transform: translate3d(calc(-50% - 80%), 22px, 0) scale(0.84);} :is(.story-carousel.is-enhanced .story-slide.is-far-next, .jobs-carousel.is-enhanced .jobs-slide.is-far-next) {transform: translate3d(calc(-50% + 80%), 22px, 0) scale(0.84);} :is(.story-carousel.is-enhanced .story-slide.is-active, .jobs-carousel.is-enhanced .jobs-slide.is-active) {opacity: 1; transform: translate3d(-50%, 0, 0) scale(1.02); z-index: 3; pointer-events: auto;} @media (max-width: 767px) {:is(.story-track, .jobs-track) {min-height: var(--carousel-mobile-track-min-height);} :is(.story-slide, .jobs-slide) {width: min(82vw, 380px);} :is(.story-card, .jobs-carousel .job-card) {border-radius: var(--carousel-card-radius-mobile); border-color: var(--carousel-card-border-mobile); box-shadow: var(--carousel-card-shadow-mobile);} :is(.story-card-media, .jobs-carousel .job-card-media) {aspect-ratio: 4 / 5; border-radius: inherit;} :is(.story-carousel.is-enhanced .story-slide, .jobs-carousel.is-enhanced .jobs-slide) {transition-duration: 420ms;} :is(.story-carousel.is-enhanced .story-slide.is-prev, .jobs-carousel.is-enhanced .jobs-slide.is-prev) {transform: translate3d(calc(-50% - 26%), 6px, 0) scale(0.9); opacity: 0.28;} :is(.story-carousel.is-enhanced .story-slide.is-next, .jobs-carousel.is-enhanced .jobs-slide.is-next) {transform: translate3d(calc(-50% + 26%), 6px, 0) scale(0.9); opacity: 0.28;} :is(.story-carousel.is-enhanced .story-slide, .jobs-carousel.is-enhanced .jobs-slide):is(.is-far-prev, .is-far-next) {opacity: 0;} :is(.story-carousel.is-enhanced .story-viewport, .jobs-carousel.is-enhanced .jobs-viewport) {padding: var(--carousel-mobile-tight-padding);} :is(.story-controls, .jobs-controls) {width: fit-content; max-width: 100%; justify-content: center; --carousel-ctrl-gap: 0.4rem; --carousel-ctrl-bar-padding: 0.35rem; --carousel-ctrl-counter-min: 3.4rem;} :is(.story-card-copy h3, .jobs-carousel .job-title) {font-size: clamp(1.05rem, 5vw, 1.32rem); display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} .jobs-carousel .job-card-copy {padding: var(--carousel-mobile-copy-padding);} .jobs-carousel .job-card-type {max-width: 100%; padding: 0.28rem 0.58rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .jobs-carousel .job-meta {gap: var(--space-2); margin-bottom: var(--space-2);} .jobs-carousel .job-meta span:last-child {display: none;} .jobs-carousel .job-desc {display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-bottom: var(--space-3);} :is(.story-carousel.is-enhanced .story-slide.is-active .story-card, .jobs-carousel.is-enhanced .jobs-slide.is-active .job-card) {border-color: var(--carousel-card-border-active-mobile); box-shadow: var(--carousel-card-shadow-active-mobile);}} @media (hover: none), (pointer: coarse) {:is(.story-card, .jobs-carousel .job-card) {box-shadow: var(--carousel-card-shadow-mobile);} .story-card:hover .story-card-img, .story-card:focus-visible .story-card-img, .jobs-carousel .job-card:hover .job-card-media img, .jobs-carousel .job-card:focus-visible .job-card-media img {transform: none;}} @media (prefers-reduced-motion: reduce) {:is(.story-slide, .jobs-slide, .story-card, .jobs-carousel .job-card, .story-card-img, .jobs-carousel .job-card-media img, .story-control-btn, .jobs-control-btn, .story-carousel.is-enhanced .story-track, .jobs-carousel.is-enhanced .jobs-track) {transition: none !important;}} .open-badge {display: inline-flex; align-items: center; gap: var(--space-3); margin: var(--space-5) auto 0; padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4); border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); border-radius: var(--badge-radius); background: color-mix(in srgb, var(--color-text) 8%, transparent); line-height: 1; font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm));} .open-badge-dot {width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-success); --pulse-ring: rgb(var(--c-success) / 0.5); box-shadow: 0 0 0 0 var(--pulse-ring); animation: badge-pulse 2.4s ease-out infinite;} .open-badge-num {font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: var(--color-accent-text);} .open-badge-label {font-size: var(--text-sm); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-snug); color: var(--color-text-muted);} .open-badge--none {background: transparent; border-color: transparent; padding-left: var(--space-5);} @keyframes badge-pulse {0% {box-shadow: 0 0 0 0 var(--pulse-ring);} 70% {box-shadow: 0 0 0 0.6rem transparent;} 100% {box-shadow: 0 0 0 0 transparent;}} @media (prefers-reduced-motion: reduce) {.open-badge-dot {animation: none;}}
.usp-strip {background: var(--color-bg-dark); padding: var(--space-12) 0;} .usp-grid {display: grid; grid-template-columns: 1fr; gap: var(--space-6);} .usp-grid--spaced {margin-top: var(--space-8);} @media (min-width: 640px) {.usp-grid {grid-template-columns: repeat(2, var(--grid-track-fluid));}} @media (min-width: 1024px) {.usp-grid {grid-template-columns: repeat(3, var(--grid-track-fluid));}} @media (min-width: 1024px) {.usp-grid--4col {grid-template-columns: repeat(4, var(--grid-track-fluid));}} .usp-item, .usp-card {display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--on-dark-border-faint); background: var(--on-dark-surface-faint); transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);} .usp-item:hover, .usp-card:hover {background: var(--on-dark-surface); border-color: var(--on-dark-border); transform: translateY(-2px);} .usp-card {display: block;} .usp-card h3 {font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--color-text-inverse); margin-bottom: var(--space-2);} .usp-card p {margin-bottom: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed);} .usp-icon {flex-shrink: 0; width: var(--space-14); height: var(--space-14); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--on-dark-surface-soft); border: 1px solid var(--on-dark-border-soft); color: var(--color-accent-text); font-size: var(--space-7); line-height: 1; transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base);} .usp-item:hover .usp-icon {color: var(--color-text-inverse); border-color: var(--color-accent); background: var(--color-accent);} .usp-title {display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--color-text-inverse); margin-bottom: var(--space-1);} .usp-text {font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-relaxed);} .usp-grid--light .usp-item {background: var(--color-bg-alt); border-color: var(--color-border);} .usp-grid--light .usp-item:hover {background: var(--color-bg-alt); border-color: var(--color-accent);} .usp-grid--light .usp-icon {background: var(--color-accent-bg); border-color: var(--color-accent-bg-hover); color: var(--color-accent-text);} .usp-grid--light .usp-item:hover .usp-icon {background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-inverse);} .usp-grid--light .usp-title {color: var(--color-text);} .usp-grid--light .usp-text {color: var(--color-text-muted);} :root:not([data-theme="dark"]) .dark-section .usp-grid--light {--color-text: rgb(var(--c-ink)); --color-text-muted: rgb(var(--c-slate-400)); --color-border: rgb(var(--c-slate-200));}
.portfolio-showcase {position: relative; display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center; padding-top: 4vh; padding-right: 0; padding-bottom: 40vh; padding-left: 0; background: var(--color-bg);} .showcase-scroll-hint {position: absolute; top: 15%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); z-index: 1; opacity: 0.3; pointer-events: none;} .showcase-hint-text {font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-weight: var(--font-weight-semibold); text-align: center; max-width: 14ch; line-height: 1.3; color: var(--color-text);} .showcase-hint-line {width: 1px; height: 3rem; background: linear-gradient(to bottom, transparent 0%, var(--color-text) 50%, transparent 100%); animation: scrollPulse 2s ease-in-out infinite;} @keyframes scrollPulse {0%, 100% {opacity: 0.3;} 50% {opacity: 0.6;}} .sticky-card {position: sticky; top: 0; display: flex; align-items: center; justify-content: center; width: 100%; pointer-events: none;} .portfolio-showcase:not(.is-scrolling) .sticky-card:has(a[href]:focus-visible) {z-index: 5;} .portfolio-showcase:not(.is-scrolling) .sticky-card:has(a[href]:focus-visible) .sticky-card-content {box-shadow: var(--sticky-card-shadow-hover);} @media (hover: hover) and (pointer: fine) {.portfolio-showcase:not(.is-scrolling) .sticky-card:has(a[href]):hover {z-index: 5;} .portfolio-showcase:not(.is-scrolling) .sticky-card:has(a[href]):hover .sticky-card-content {box-shadow: var(--sticky-card-shadow-hover);}} .sticky-card-content {position: relative; top: calc(-0.5vh + 50px); width: 500px; height: 300px; max-width: min(500px, 88vw); border-radius: 2rem; overflow: hidden; pointer-events: auto; background: var(--color-bg-dark); box-shadow: var(--sticky-card-shadow); transform-origin: top center; transition: box-shadow var(--glow-speed) var(--glow-ease); will-change: transform;} .sticky-card-img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--card-img-zoom-speed) var(--card-img-zoom-ease);} .portfolio-showcase:not(.is-scrolling) .sticky-card:has(a[href]:focus-visible) .sticky-card-img {transform: scale(var(--card-img-zoom));} @media (hover: hover) and (pointer: fine) {.portfolio-showcase:not(.is-scrolling) .sticky-card:has(a[href]):hover .sticky-card-img {transform: scale(var(--card-img-zoom));}} .sticky-card-claim {white-space: nowrap;} .sticky-card-overlay {position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-6); background: var(--media-bottom-scrim); color: var(--on-dark-text); display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none;} .sticky-card-badge {display: inline-block; width: fit-content; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); padding: var(--space-1) var(--space-3); background: var(--on-dark-surface-solid); backdrop-filter: blur(var(--blur-md)); border-radius: var(--radius-sm); color: var(--on-dark-text);} .sticky-card-title {font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-weight-bold); line-height: 1.2; margin: 0; color: var(--on-dark-text);} .sticky-card-spec {margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-snug); line-height: 1.3; color: var(--on-dark-text-soft);} .sticky-card-sub {margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); line-height: 1.3; color: var(--on-dark-text-muted, var(--on-dark-text-soft)); opacity: 0.85;} @media (min-width: 768px) {.sticky-card-content {width: 500px; height: 300px; max-width: min(500px, 88vw);} .sticky-card-title {font-size: var(--text-2xl);}} .capability-parallax {--capability-gap: 2vw; --capability-surface: var(--color-gray-100); --capability-ink: var(--color-text); position: relative; overflow: hidden; background: var(--capability-surface); color: var(--capability-ink);} .capability-parallax__screen {position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: var(--space-24) 0;} .capability-parallax__screen--outro {min-height: 100svh; align-items: start; padding-top: var(--space-24);} .capability-parallax__hint {position: absolute; left: 50%; top: 10%; z-index: 2; transform: translateX(-50%); display: grid; justify-items: center; gap: var(--space-6); text-align: center; color: var(--color-text-light); pointer-events: none;} .capability-parallax__hint span {position: relative; max-width: 12ch; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); line-height: 1.2; letter-spacing: var(--tracking-widest); text-transform: uppercase;} .capability-parallax__hint span::after {content: ""; position: absolute; left: 50%; top: calc(100% + var(--space-5)); width: 1px; height: 4rem; background: linear-gradient(180deg, transparent, var(--color-text-muted));} .capability-parallax__hint--up span::after {background: linear-gradient(180deg, var(--color-text-muted), transparent);} .capability-parallax__statement, .capability-parallax__outro {position: relative; z-index: 1; display: grid; justify-items: center; text-align: center;} .capability-parallax__statement {padding-top: var(--space-16);} .capability-parallax__statement h2 {max-width: 12ch; margin: 0; color: var(--color-text); font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--font-weight-bold); line-height: 0.98;} .capability-parallax__statement p, .capability-parallax__outro p {max-width: 720px; margin: var(--space-6) auto 0; color: var(--color-text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed);} .capability-parallax__proofline {display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-8); margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-border);} .capability-parallax__proofline li {display: grid; justify-items: center; gap: var(--space-1);} .capability-parallax__proofline strong {display: block; color: var(--color-accent-text); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1;} .capability-parallax__proofline span {color: var(--color-gray-600); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); line-height: 1.2; letter-spacing: var(--tracking-wider); text-transform: uppercase;} .capability-parallax__links {display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-8);} .capability-parallax__links a {color: var(--color-text); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); text-decoration: none; border-bottom: 1px solid rgb(var(--c-red) / 0.55); padding-bottom: 0.18rem; transition: color var(--transition-fast), border-color var(--transition-fast);} .capability-parallax__links a:hover, .capability-parallax__links a:focus-visible {color: var(--color-accent-text); border-color: currentColor;} .capability-parallax__stage {--px-pad-desktop: 2vw; --px-gap-desktop: 2vw; --px-cols-desktop: 4; --px-pad-tablet: 2.5vw; --px-gap-tablet: 2.5vw; --px-cols-tablet: 4; --px-pad-mobile: 3vw; --px-gap-mobile: 3vw; --px-cols-mobile: 2; --px-amplitude: 0.55; --px-vh-cap: 88vh; --px-pad: var(--px-pad-desktop); --px-gap: var(--px-gap-desktop); --parallax-h: min(var(--pxh-desktop, 52vw), var(--px-vh-cap)); --parallax-mask: linear-gradient(180deg, rgb(var(--c-black) / 0) 0%, rgb(var(--c-black)) 5%, rgb(var(--c-black)) 97.5%, rgb(var(--c-black) / 0) 100%); position: relative; box-sizing: border-box; height: var(--parallax-h); min-height: 0; overflow: hidden; background: var(--color-bg); padding: var(--px-pad); display: flex; gap: var(--px-gap); align-items: start; -webkit-mask-image: var(--parallax-mask); mask-image: var(--parallax-mask);} .capability-parallax__column {position: relative; flex: 1 1 0%; min-width: 0; height: auto; min-height: 100%; display: flex; flex-direction: column; gap: var(--px-gap); will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden;} .capability-parallax__column > .capability-parallax__item:last-child {flex-grow: 1;} .capability-parallax__item {position: relative; width: 100%; height: auto; aspect-ratio: var(--parallax-item-ratio, 4 / 5); overflow: hidden; border-radius: var(--radius-md); background: var(--color-gray-100);} .capability-parallax__picture {display: block; position: absolute; inset: 0; width: 100%; height: 100%;} .capability-parallax__img {display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none;} @media (min-width: 768px) {.capability-parallax__statement h2 {font-size: var(--text-7xl);}} @media (min-width: 1280px) {.capability-parallax__statement h2 {font-size: 5.75rem;}} @media (max-width: 720px) {.capability-parallax {--capability-gap: 3vw;} .capability-parallax__screen {min-height: 100svh; padding: var(--space-20) 0;} .capability-parallax__screen--outro {min-height: 100svh;} .capability-parallax__statement h2 {max-width: 11ch; font-size: var(--text-4xl); line-height: 1.02;} .capability-parallax__statement p, .capability-parallax__outro p {font-size: var(--text-base);} .capability-parallax__proofline {gap: var(--space-4) var(--space-6);} .capability-parallax__stage {--px-pad: var(--px-pad-mobile); --px-gap: var(--px-gap-mobile); --parallax-h: min(var(--pxh-mobile, 88vw), var(--px-vh-cap));} .capability-parallax__column:nth-child(n/**/+3) {display: none;}} @media (min-width: 721px) and (max-width: 1180px) {.capability-parallax__stage {--px-pad: var(--px-pad-tablet); --px-gap: var(--px-gap-tablet); --parallax-h: min(var(--pxh-tablet, 46vw), var(--px-vh-cap));}} @media (prefers-reduced-motion: reduce) {.capability-parallax__screen {min-height: auto;} .capability-parallax__hint {display: none;} .capability-parallax__stage {height: auto; min-height: 0; overflow: visible; -webkit-mask-image: none; mask-image: none;} .capability-parallax__column {min-width: 0; height: auto; transform: none !important;} .capability-parallax__item {flex-basis: auto; height: auto;}} @media (min-width: 1024px) {.sticky-card-content {width: 500px; height: 300px; border-radius: 2.5rem;} .sticky-card-overlay {padding: var(--space-8);}} @media (prefers-reduced-motion: reduce) {.sticky-card-content {transition: none;} .portfolio-showcase {padding: var(--section-py) 0;} .sticky-card {position: relative; height: auto; padding: var(--space-4) 0;} .sticky-card-content {transform: none !important;} .showcase-scroll-hint {display: none;}} .proc-intro {max-width: 760px; margin: 0 auto; text-align: center;} .proc-intro__lead {margin: var(--space-5) auto 0; max-width: 660px; color: var(--color-text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed);} .proc-proofbar {display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5) var(--space-12); max-width: 820px; margin: var(--space-10) auto 0; padding: var(--space-8) 0 0; border-top: 1px solid var(--color-border); list-style: none;} .proc-proofbar li {display: grid; justify-items: center; gap: var(--space-1);} .proc-proofbar strong {font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; color: var(--color-accent-text);} .proc-proofbar span {font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-muted);} .proc-index {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-12) auto 0;} .proc-index__step {display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); text-decoration: none; transition: var(--transition-fast);} .proc-index__step:hover, .proc-index__step:focus-visible {border-color: var(--color-accent); box-shadow: var(--card-shadow-hover-soft); transform: var(--card-hover-transform);} .proc-index__num {font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--color-accent-text);} .proc-index__name {font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--color-text);} .proc-index__arrow {display: inline-flex; align-items: center; color: var(--color-text-light); font-size: var(--text-xs);} .proc-index__step--special {border-style: dashed; background: transparent;} .proc-index__step--special i {color: var(--color-accent-text); font-size: var(--text-xs);} @media (max-width: 720px) {.proc-index__arrow {display: none;}} .section--rail {position: sticky; top: var(--header-offset); z-index: var(--rail-z); padding: var(--rail-py) 0; border-bottom: 1px solid var(--color-border); transition: box-shadow var(--transition-base);} .section--rail.is-stuck {box-shadow: var(--shadow-md);} html:has(.section--rail) {scroll-padding-top: calc(var(--header-offset) + var(--rail-h));} .proc-index--rail {--rail-progress: 0; position: relative; margin: 0 auto; gap: 0; flex-wrap: nowrap; justify-content: space-between; width: max-content; min-width: min(var(--rail-max), 100%); max-width: 100%; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;} .proc-index--rail::-webkit-scrollbar {display: none;} .proc-index--rail:has(.proc-index__step:nth-child(5)) {--rail-max: 100%;} .proc-index--rail:has(.proc-index__step:nth-child(7)) {--rail-node: 26px;} .proc-index--rail:has(.proc-index__step:nth-child(7)) .proc-index__step {gap: var(--space-2); padding: 0 var(--space-2);} .proc-index--rail:has(.proc-index__step:nth-child(7)) .proc-index__name {font-size: var(--text-xs);} .proc-index--rail::before, .proc-index--rail::after {content: ""; position: absolute; top: 50%; left: 0; height: var(--rail-line); margin-top: calc(var(--rail-line) / -2); border-radius: var(--radius-full); z-index: 0;} .proc-index--rail::before {right: 0; background: var(--color-border);} .proc-index--rail::after {width: calc(var(--rail-progress) * 100%); background: var(--color-accent);} .proc-index--rail .proc-index__step {position: relative; z-index: 1; flex: 0 0 auto; scroll-snap-align: center; gap: var(--space-3); padding: 0 var(--space-4); border: 0; border-radius: 0; background: var(--color-bg);} .proc-index--rail .proc-index__step:hover, .proc-index--rail .proc-index__step:focus-visible {box-shadow: none; transform: none;} .proc-index--rail .proc-index__num {display: inline-grid; place-items: center; width: var(--rail-node); height: var(--rail-node); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-bg); color: var(--color-text-muted); transition: var(--transition-fast);} .proc-index--rail .proc-index__name {font-size: var(--text-sm); color: var(--color-text-muted); transition: var(--transition-fast); white-space: nowrap;} .proc-index--rail .proc-index__step[aria-current] .proc-index__num {border-color: var(--color-accent); background: var(--color-accent); color: var(--color-text-inverse);} .proc-index--rail .proc-index__step[aria-current] .proc-index__name {color: var(--color-text); font-weight: var(--font-weight-bold);} @media (hover: hover) and (pointer: fine) {.proc-index--rail .proc-index__step:hover .proc-index__num {border-color: var(--color-accent); color: var(--color-accent-text);} .proc-index--rail .proc-index__step:hover .proc-index__name {color: var(--color-text);} .proc-index--rail .proc-index__step[aria-current]:hover .proc-index__num {color: var(--color-text-inverse);}} .proc-index--rail .proc-index__step:focus-visible .proc-index__num {border-color: var(--color-accent);} .proc-index--rail.is-scrollable {justify-content: flex-start; gap: var(--space-2);} .proc-index--rail.is-scrollable::before, .proc-index--rail.is-scrollable::after {display: none;} @media (max-width: 767px) {.proc-index--rail .proc-index__step {padding: 0 var(--space-2);}} @media (prefers-reduced-motion: reduce) {.section--rail {transition: none;}} .proc-band-kicker {margin: 0; padding: var(--space-12) var(--space-4) var(--space-6); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase;} .proc-stage--muted {background: var(--color-bg-alt);} .proc-stage__head {display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-5) var(--space-8); width: 100%; max-width: 900px;} .proc-stage__head > :not(.proc-stage__num) {min-width: 0;} .proc-stage__num {font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: var(--font-weight-extrabold); line-height: 0.85; letter-spacing: var(--tracking-tight); color: var(--color-accent-text);} .proc-stage__num i {font-size: 0.6em;} .proc-stage__text {margin-top: var(--space-3); max-width: 660px; color: var(--color-text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed);} .proc-stage__spec {margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-snug); color: var(--color-text);} .dark-section .proc-stage__text {color: var(--color-text-muted);} .dark-section .proc-stage__spec {color: var(--color-accent-text);} @media (max-width: 600px) {.proc-stage__head {grid-template-columns: 1fr; gap: var(--space-2);} .proc-stage__num {font-size: clamp(2.5rem, 16vw, 3.75rem);}} .proc-stage__num--icon {font-size: clamp(2.25rem, 5vw, 3.25rem);} .proc-substage {padding-top: var(--space-8); border-top: 1px dashed var(--color-border);} .proc-substage__head {max-width: 720px;} .proc-substage__title {margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); color: var(--color-text);} .proc-substage__text {margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-base); line-height: var(--leading-relaxed);} .proc-chain {display: grid; grid-template-columns: repeat(3, var(--grid-track-fluid)); gap: var(--space-4); margin-top: var(--space-8);} .proc-chain__item {border-radius: var(--radius-xl); overflow: hidden; background: var(--on-dark-surface-soft); border: 1px solid rgba(148, 163, 184, 0.36); box-shadow: 0 10px 24px rgb(var(--c-black) / 0.18); display: flex; flex-direction: column;} .proc-chain__media {position: relative; flex-shrink: 0;} .proc-chain__img {width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;} .proc-chain__num {position: absolute; top: var(--space-3); left: var(--space-3); font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.25rem); font-weight: var(--font-weight-extrabold); line-height: 1; letter-spacing: var(--tracking-tight); color: var(--color-accent-text); background: rgba(10, 14, 23, 0.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 0.18em 0.42em; border-radius: var(--radius-md);} .proc-chain__body {padding: var(--space-4); flex: 1;} .proc-chain__title {margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--color-text-inverse);} .proc-chain__text {margin: 0; font-size: var(--text-sm); color: var(--on-dark-text-soft); line-height: var(--leading-relaxed);} .proc-chain__text a {color: var(--color-accent-text);} .proc-chain__text a:hover {text-decoration: underline;} @media (max-width: 860px) {.proc-chain {grid-template-columns: 1fr;}}
.decision-grid {margin-top: var(--space-6); display: grid; grid-template-columns: repeat(3, var(--grid-track-fluid)); gap: var(--space-4);} .decision-card {background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5);} .decision-card h3 {margin: 0 0 var(--space-2); font-size: var(--text-lg);} .decision-card p {margin: 0;} .comparison-table {width: 100%; min-width: 40rem; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--color-border);} .comparison-table thead th {background: var(--color-bg-alt); font-weight: var(--font-weight-bold); text-align: left;} .comparison-table th, .comparison-table td {padding: var(--space-3); border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); vertical-align: middle; text-align: left;} .comparison-table tr:last-child td {border-bottom: 0;} .comparison-table th:last-child, .comparison-table td:last-child {border-right: 0;} .comparison-table .highlight-col {background: var(--color-accent-bg);} .comparison-table thead .highlight-col {background: var(--color-accent-bg-hover);} .comparison-badge {display: inline-block; margin-top: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-text-inverse); font-size: var(--text-xs); font-weight: var(--font-weight-semibold);} .dark-section .decision-card {background: var(--glass-on-dark-bg); border-color: var(--glass-on-dark-border);} .dark-section .comparison-table thead th {background: var(--on-dark-surface-soft); color: var(--on-dark-text);} .dark-section .comparison-table .highlight-col {background: var(--color-accent-bg-hover);} .dark-section .comparison-table thead .highlight-col {background: var(--color-accent-bg-hover);} @media (max-width: 780px) {.decision-grid {grid-template-columns: 1fr;} .comparison-table {font-size: var(--text-sm);} .comparison-table th, .comparison-table td {padding: var(--space-2);}} .spec-media {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); align-content: start; margin: 0;} .section-media__figure.spec-media {box-shadow: none; overflow: visible; border-radius: 0; align-self: start;} .spec-media__shot {position: relative; display: block; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-alt); cursor: zoom-in; transition: border-color var(--glow-speed) var(--glow-ease), box-shadow var(--glow-speed) var(--glow-ease);} .spec-media__shot--main {grid-column: 1 / -1; aspect-ratio: 3 / 2;} .spec-media__shot--thumb {aspect-ratio: 4 / 3;} .spec-media__shot:is(:hover, :focus-visible) {border-color: var(--color-accent); box-shadow: var(--card-shadow-hover), var(--glow); outline: none;} .spec-media__shot picture {display: block; width: 100%; height: 100%;} .spec-media__img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.32s ease, filter 0.32s ease;} .spec-media__shot:is(:hover, :focus-visible) .spec-media__img {transform: scale(1.05); filter: brightness(0.9);} .spec-media__zoom {--media-zoom-size: 2rem; --media-zoom-icon-size: 1rem;} .spec-media__shot--thumb .spec-media__zoom {--media-zoom-size: 1.4rem; --media-zoom-icon-size: 0.75rem; --media-zoom-inset: var(--space-1);} @media (max-width: 767px) {.spec-media {gap: var(--space-2);}} .cap-match {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-10);} .cap-match__card {position: relative; display: grid; align-content: start; gap: var(--space-3); padding: var(--space-8) var(--space-6); background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition-base);} .cap-match__card::before {content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base);} .cap-match__card:hover {border-color: var(--color-accent); box-shadow: var(--card-shadow-hover-soft); transform: var(--card-hover-transform);} .cap-match__card:hover::before {transform: scaleX(1);} .cap-match__need {display: flex; align-items: center; gap: var(--space-3); margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); color: var(--color-text);} .cap-match__icon {display: inline-flex; flex: 0 0 auto; color: var(--color-accent-text);} .cap-match__icon svg {width: 1.5rem; height: 1.5rem;} .cap-match__detail {margin: 0; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-muted);} .cap-match__match {display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); padding-top: var(--space-4); border-top: 1px solid var(--color-border);} .cap-match__machine {font-weight: var(--font-weight-semibold); color: var(--color-text);} .cap-match__eg {margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);} .cap-match__forms {display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-6); padding: var(--space-5) var(--space-6); background: var(--color-accent-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg);} .cap-match__forms-label {font-family: var(--font-display); font-weight: var(--font-weight-bold); color: var(--color-text);} .cap-match__forms-list {display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none;} .cap-match__form {padding: var(--space-1) var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--color-text);} @media (max-width: 780px) {.cap-match {grid-template-columns: 1fr; gap: var(--space-4);} .cap-match__card {padding: var(--space-6) var(--space-5);}}
.contact-cta__panel {background: radial-gradient(70% 70% at 100% 0%, rgb(var(--c-wash) / 0.88), transparent 55%), radial-gradient(58% 58% at 0% 8%, rgb(var(--c-red) / 0.06), transparent 48%), linear-gradient(180deg, var(--color-bg), var(--color-bg-alt)); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: 0 12px 44px rgb(var(--c-shadow) / 0.08); display: grid; gap: var(--space-8); align-items: stretch;} @media (min-width: 768px) {.contact-cta__panel {padding: var(--space-10);}} @media (min-width: 880px) {.contact-cta--map .contact-cta__panel {grid-template-columns: minmax(0, 1fr) clamp(20rem, 34vw, 26rem); gap: var(--space-10);}} .contact-cta__text {min-width: 0; display: flex; flex-direction: column; align-items: flex-start;} .contact-cta__text .section-subtitle {margin-bottom: var(--space-7);} .contact-cta__actions {display: flex; flex-wrap: wrap; gap: var(--space-3);} .contact-cta__people {width: 100%; margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--color-border); display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr);} @media (min-width: 880px) {.contact-cta--map .contact-cta__actions {margin-top: auto;} .contact-cta--map .contact-cta__people {margin-top: auto; padding-top: var(--space-7);} .contact-cta--map .contact-cta__people {grid-template-columns: minmax(0, 1fr); gap: var(--space-5);} .contact-cta--map .contact-cta__people .contact-person-card {grid-template-columns: minmax(11rem, 13rem) minmax(0, 1fr); align-items: stretch; gap: 0; padding: 0;} .contact-cta--map .contact-cta__people .contact-person-card__photo {width: 100%; height: 100%; min-height: 12rem; border-radius: 0;} .contact-cta--map .contact-cta__people .contact-person-card__zoom {--media-zoom-size: 1.9rem; --media-zoom-icon-size: 0.95rem; --media-zoom-inset: var(--space-2);} .contact-cta--map .contact-cta__people .contact-person-card__info {align-self: center; padding: var(--space-5) var(--space-6);} .contact-cta--map .contact-cta__people .contact-person-card__name {font-size: var(--text-lg);} .contact-cta--map .contact-cta__people .contact-person-card__teaser {margin: var(--space-2) 0 0;}} .contact-cta__people-label {grid-column: 1 / -1; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted);} .contact-cta__people .contact-person-card {margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); text-align: left; padding: var(--space-4);} .contact-cta__people .contact-person-card__photo {width: 4.5rem; height: 4.5rem; border-radius: var(--radius-lg); overflow: hidden;} @media (min-width: 720px) {.contact-cta__people .contact-person-card__photo {width: 6rem; height: 6rem;}} .contact-cta__people .contact-person-card__photo--monogram {border-radius: var(--radius-lg);} .contact-cta__people .contact-person-card__monogram {width: 100%; height: 100%; border-radius: var(--radius-lg); font-size: var(--text-2xl); box-shadow: none;} .contact-cta__people .contact-person-card__hint {display: none;} .contact-cta__people .contact-person-card__zoom {--media-zoom-size: 1.5rem; --media-zoom-icon-size: 0.8rem; --media-zoom-inset: var(--space-1);} @media (hover: none) {.contact-cta__people .contact-person-card__zoom {--media-zoom-size: 1.25rem; --media-zoom-icon-size: 0.7rem;}} .contact-cta__people .contact-person-card__info {min-width: 0; padding: 0;} .contact-cta__people .contact-person-card__name {font-size: var(--text-base); margin-bottom: 0.15rem;} .contact-cta__people .contact-person-card__role {margin-bottom: var(--space-2);} .contact-cta__people .contact-person-card__teaser {margin: var(--space-1) 0 var(--space-2); font-size: var(--text-sm);} .contact-cta__people .contact-person-card__links {flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2);} .contact-cta__people .contact-person-card__phone {font-size: var(--text-sm); white-space: nowrap; font-variant-numeric: tabular-nums;} .contact-cta__people .contact-person-card__email {flex: 0 0 auto; width: 2.4rem; min-height: 2.4rem; padding-inline: 0; justify-content: center; background: var(--color-bg); border: 1px solid color-mix(in srgb, var(--color-accent) 24%, var(--color-border)); color: var(--color-accent-text);} .contact-cta__people .contact-person-card__email .js-cmail-label {display: none;} @media (min-width: 720px) {.contact-cta__people .contact-person-card__info {display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-items: center; column-gap: var(--space-5);} .contact-cta__people .contact-person-card__name {grid-column: 1; margin: 0;} .contact-cta__people .contact-person-card__role {grid-column: 1; margin: 0;} .contact-cta__people .contact-person-card__teaser {grid-column: 1; margin: var(--space-1) 0 0;} .contact-cta__people .contact-person-card__links {grid-column: 2; grid-row: 1 / span 3; flex-wrap: nowrap; justify-content: flex-end;}} .dark-section .contact-cta__people {border-top-color: var(--glass-on-dark-border);} .contact-cta__map {min-width: 0; display: grid; gap: var(--space-3); align-content: start;} .contact-cta__address {margin: 0; display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); line-height: 1.4; color: var(--color-text-muted);} .contact-cta__address > .bm-icon {flex-shrink: 0; color: var(--color-accent-text); margin-top: 0.1em;} .contact-cta__address strong {color: var(--color-text); font-weight: var(--font-weight-semibold);} .contact-cta--flat .contact-cta__panel {max-width: 640px; margin-inline: auto;} .contact-cta--flat .contact-cta__text {align-items: center; text-align: center;} .contact-cta--flat .contact-cta__actions {justify-content: center;} .contact-cta--flat .contact-cta__people {text-align: left;} .dark-section .contact-cta__panel {background: var(--glass-on-dark-bg); border-color: var(--glass-on-dark-border);} .contact-card {display: grid; gap: var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6);} @media (min-width: 768px) {.contact-card {padding: var(--space-8); gap: var(--space-4);}} .contact-card__row {display: flex; align-items: flex-start; gap: var(--space-4);} .contact-card__badge {flex-shrink: 0; width: var(--space-12); height: var(--space-12); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--color-accent-bg); border: 1px solid var(--color-accent-bg-hover); color: var(--color-accent-text); font-size: var(--text-lg); line-height: 1; transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base);} .contact-card__row:hover .contact-card__badge {background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-inverse);} .contact-card__body {display: flex; flex-direction: column; gap: var(--space-1); min-width: 0;} .contact-card__label {font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted);} .contact-card__value {font-size: var(--text-base); color: var(--color-text); line-height: var(--leading-snug);} a.contact-card__value {text-decoration: none; transition: color var(--transition-base);} a.contact-card__value:hover {color: var(--color-accent-text);} .contact-card__value strong {font-weight: var(--font-weight-semibold);} .contact-card__cta {margin-top: var(--space-2); justify-self: start;} @media (min-width: 640px) {.contact-card--wide {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-8);} .contact-card--wide .contact-card__cta {grid-column: 1 / -1;}} .contact-card--flat {background: none; border: 0; border-radius: 0; padding: 0;} .dark-section .contact-card {background: var(--glass-on-dark-bg); border-color: var(--glass-on-dark-border);} .dark-section .contact-card__value {color: var(--color-text-inverse);}
.bm-icon {display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex: none; fill: currentColor; line-height: 0; --icon-accent: currentColor;} .bm-icon--stroke {fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;} .bm-icon--stroke .bm-icon__accent {stroke: var(--icon-accent);} .bm-icon--stroke .bm-icon__filled {fill: currentColor; stroke: none;} .bm-icon--stroke .bm-icon__filled.bm-icon__accent {fill: var(--icon-accent);} .bm-icon--spark {--icon-accent: var(--color-accent);} .bm-icon--xs {width: 0.75rem; height: 0.75rem;} .bm-icon--sm {width: 1rem; height: 1rem;} .bm-icon--md {width: 1.5rem; height: 1.5rem;} .bm-icon--lg {width: 2rem; height: 2rem;} .bm-icon--xl {width: 3rem; height: 3rem;} .bm-icon--accent {color: var(--color-accent-text);} .bm-icon--muted {color: var(--color-text-muted, currentColor); opacity: 0.7;} .bm-icon--dir-left {transform: rotate(180deg);} .bm-icon--dir-up {transform: rotate(-90deg);} .bm-icon--dir-down {transform: rotate(90deg);} @media (prefers-reduced-motion: no-preference) {.bm-icon--spin {animation: bm-icon-spin 1s linear infinite;}} @keyframes bm-icon-spin {to {transform: rotate(360deg);}}