/* === /static/css/project.bdf8914f30ea.css === */
/* Project-specific CSS — Foundation kommt aus dem Webdesign-Stack via main.css */
/* Foundation Layer (kompiliertes SCSS aus pro_bahn_website/static/scss/).
Bleibt UNLAYERED: main.css deklariert intern bereits den vollstaendigen
@layer-Stack (legacy, settings, generic, base, layout, components,
utilities, overrides) — eine zusaetzliche Layer-Wrap-Schicht hier wuerde
diese Reihenfolge unterlaufen. */
/* === /static/css/main.29ca643ad640.css === */
@layer settings{:root{--clr-black: #070707;--clr-white: hsl(0deg 0% 100%);--clr-red-500: #da392b;--clr-blue-400: #2a72b8;--clr-blue-500: #2c2f6b;--clr-orange-500: #ff9933;--clr-grey-200: #eff4f5;--clr-grey-300: #f5f4f2;--clr-grey-400: #a6a6a6;--clr-grey-500: #5f5f5f;--clr-grey-600: hsl(43deg 14% 90%);--clr-grey-800: hsl(0deg 0% 95%);--ff-sans: "Inter", "Noto Sans", "Segoe UI", Roboto, Arial, sans-serif;--lh-none: 1;--lh-sm: 1.2;--lh-regular: 1.4;--lh-m: 1.5;--lh-l: 1.8;--fs-200: 0.75rem;--fs-300: 0.875rem;--fs-400: 0.875rem;--fs-500: 1rem;--fs-600: 1.125rem;--fs-650: 1.25rem;--fs-700: 1.375rem;--fs-800: 1.5rem;--fs-900: 1.625rem;--fs-1000: 2.125rem;--fs-1100: 2.65rem}@media(width > 48rem){:root{--fs-200: 0.75rem;--fs-300: 0.875rem;--fs-400: 1rem;--fs-500: 1.125rem;--fs-600: 1.25rem;--fs-650: 1.375rem;--fs-700: 1.5rem;--fs-800: 1.625rem;--fs-900: 2.125rem;--fs-1000: 2.65rem;--fs-1100: 2.875rem}}:root{--fs-hl-xxl-display-min: 2.375rem;--fs-hl-xxl-display-max: 5.625rem;--fs-hl-xxl-display-min-no-unit: 2.375;--fs-hl-xxl-display-max-no-unit: 5.625;--fs-hl-xxl-min: 2.375rem;--fs-hl-xxl-max: 5.625rem;--fs-hl-xxl-min-no-unit: 2.375;--fs-hl-xxl-max-no-unit: 5.625;--fs-hl-xl-min: 2.075rem;--fs-hl-xl-max: 3.5rem;--fs-hl-xl-min-no-unit: 2.075;--fs-hl-xl-max-no-unit: 3.5;--fs-hl-lg-min: 1.825rem;--fs-hl-lg-max: 2.15rem;--fs-hl-lg-min-no-unit: 1.825;--fs-hl-lg-max-no-unit: 2.15;--fs-regular-min: 1.125rem;--fs-regular-min-no-unit: 1.125;--fs-regular-max: 1.25rem;--fs-regular-max-no-unit: 1.25;--fw-200: 200;--fw-300: 300;--fw-400: 400;--fw-500: 500;--fw-600: 600;--fw-700: 700;--fw-800: 800;--fw-900: 900;--width-100: 26rem;--width-300: 40rem;--width-500: 82rem;--width-600: 100rem;--width-700: 125rem;--width-1000: 100%;--element-width-100: 160px;--element-width-200: 240px;--element-width-300: 320px;--element-width-400: 380px;--element-width-500: 416px;--element-width-700: 640px;--space-100: 0.2rem;--space-200: 0.25rem;--space-300: 0.5rem;--space-350: 0.6rem;--space-400: 0.75rem;--space-450: 0.8rem;--space-500: 1rem;--space-600: 1.25rem;--space-700: 1.5rem;--space-750: 1.75rem;--space-800: 2rem;--space-900: 3rem}@media(width > 48rem){:root{--space-100: 0.25rem;--space-200: 0.5rem;--space-300: 0.75rem;--space-350: 1rem;--space-400: 1.25rem;--space-450: 1.5rem;--space-500: 1.75rem;--space-600: 2.125rem;--space-700: 2.5rem;--space-750: 3rem;--space-800: 4.75rem;--space-900: 7rem}}:root{--space-100-em: 0.2em;--space-200-em: 0.25em;--space-300-em: 0.5em;--space-400-em: 0.75em;--space-500-em: 1em;--space-600-em: 1.25em;--space-700-em: 1.5em;--space-800-em: 1.75em;--space-900-em: 2em}@media(width > 48rem){:root{--space-100-em: 0.25em;--space-200-em: 0.5em;--space-300-em: 0.75em;--space-400-em: 1.25em;--space-500-em: 1.75em;--space-600-em: 2.125em;--space-700-em: 2.5em;--space-800-em: 3em;--space-900-em: 4.75em}}:root{--border-width-100: 1px;--border-width-200: 2px;--object-size-xs: 0.75rem;--object-size-sm: 1rem;--object-size-regular: 1.375rem;--object-size-md: 1.5rem;--object-size-lg: 2rem;--object-size-xl: 3rem;--object-size-xxl: 5rem;--object-radius-xs: 1px;--object-radius-sm: 2px;--object-radius-regular: 3px;--object-radius-md: 4px;--object-radius-lg: 5px;--object-radius-xl: 6px;--object-radius-xxl: 8px}}@layer settings{:root{--brand-color-primary: var(--clr-red-500);--brand-color-secondary: var(--clr-blue-500);--focus-color-default: var(--clr-blue-500);--focus-outline-width: 2px;--focus-outline-offset: 3px;--section-width-xs: var(--width-500);--section-width-sm: var(--width-600);--section-width-default: var(--width-700);--section-width-full: var(--width-1000);--section-padding-inline: var(--space-400);--section-padding-block: var(--space-800);--wrapper-padding-inline: var(--space-600);--wrapper-padding-block: var(--space-750);--elements-gap-inline: var(--space-750);--elements-gap-block: var(--space-800);--flow-spacing-block-sm: var(--space-200-em);--flow-spacing-block-default: var(--space-400-em);--flow-spacing-block-lg: var(--space-500-em);--flow-grid-spacing-block: var(--space-700);--card-padding-inline: var(--space-600);--card-padding-block: var(--space-750);--card-padding-inline-sm: var(--space-300);--card-padding-block-sm: var(--space-350);--equal-columns-gap-sm: var(--space-500);--equal-columns-gap-default: var(--space-750);--equal-columns-gap-lg: var(--space-800);--flex-group-gap-default: var(--space-750);--flex-group-gap-sm: var(--space-500);--flex-group-gap-xs: var(--space-200);--grid-auto-fit-column-size-min: var(--element-width-300);--grid-auto-fit-column-size-max: var(--element-width-400);--header-padding-block-default: var(--space-600);--header-background-color: var(--clr-grey-200);--logo-width-default: 380px;--navigation-gap-inline-default: var(--space-600);--navigation-gap-block-default: var(--space-300);--navigation-font-size-default: var(--fs-650);--navigation-font-weight-default: var(--fw-300);--navigation-line-height-item: var(--lh-m);--navigation-font-family-default: var(--ff-sans);--navigation-color-default: var(--clr-black);--navigation-color-default-hover: var(--clr-red-500);--navigation-color-active: var(--clr-red-500);--navigation-color-default-inverted: var(--clr-grey-600);--navigation-color-default-hover-inverted: var(--clr-red-500);--navigation-color-active-inverted: var(--clr-red-500);--button-background-primary: var(--clr-red-500);--button-background-secondary: var(--clr-blue-500);--button-background-reduced: var(--clr-grey-200);--button-background-accent: var(--clr-red-500);--button-background-primary-hover: var(--clr-white);--button-background-secondary-hover: var(--clr-white);--button-background-reduced-hover: var(--clr-white);--button-background-accent-hover: var(--clr-white);--button-color-primary: var(--clr-white);--button-color-secondary: var(--clr-white);--button-color-reduced: var(--clr-black);--button-color-accent: var(--clr-black);--button-color-primary-hover: var(--clr-black);--button-color-secondary-hover: var(--clr-black);--button-color-reduced-hover: var(--clr-black);--button-color-accent-hover: var(--clr-black);--button-padding-inline: var(--space-500);--button-padding-block: var(--space-350);--button-padding-inline-sm: var(--space-350);--button-padding-block-sm: var(--space-200);--link-color-default: var(--clr-black);--link-color-default-hover: var(--clr-red-500);--news-link-color-default: var(--clr-red-500);--news-link-color-default-hover: var(--clr-black);--text-color-default: var(--clr-black);--text-color-light: var(--clr-grey-500);--text-color-extra-light: var(--clr-white);--text-color-default-hover: var(--clr-red-500);--text-color-default-inverted: var(--clr-grey-600);--text-color-default-inverted-hover: var(--clr-red-500);--background-color-default: var(--clr-white);--background-color-light: var(--clr-grey-300);--background-color-extra-light: var(--clr-grey-200);--background-color-dark: var(--clr-blue-500);--form-field-background-color-default: var(--clr-grey-200);--form-field-background-color-default-active: var(--clr-white);--form-mandatory-color: var(--clr-red-500);--form-field-padding-inline: var(--space-400);--form-field-padding-block: var(--space-300);--table-header-background-color: var(--clr-grey-800);--table-header-color: var(--clr-black);--table-row-background-color: var(--clr-white);--table-row-odd-background-color: var(--clr-grey-300);--table-border-color: var(--clr-grey-600);--table-cell-padding-inline-sm: var(--space-200);--table-cell-padding-inline-default: var(--space-300);--table-cell-padding-block-sm: var(--space-100);--table-cell-padding-block-default: var(--space-200);--border-color-default: var(--clr-grey-500);--border-color-light: var(--clr-grey-600);--border-color-extra-light: var(--clr-white);--border-width-default: var(--border-width-100);--icon-size-sm: var(--object-size-sm);--icon-size-regular: var(--object-size-regular);--icon-size-lg: var(--object-size-lg);--icon-size-xl: var(--object-size-xl);--icon-padding-inline-regular: var(--space-200);--icon-padding-inline-lg: var(--space-300);--font-size-heading-sm: var(--fs-650);--font-size-heading-regular: var(--fs-800);--font-size-heading-lg-min: var(--fs-hl-lg-min);--font-size-heading-lg-max: var(--fs-hl-lg-max);--font-size-heading-lg-min-no-unit: var(--fs-hl-lg-min-no-unit);--font-size-heading-lg-max-no-unit: var(--fs-hl-lg-max-no-unit);--font-size-heading-xl-min: var(--fs-hl-xl-min);--font-size-heading-xl-max: var(--fs-hl-xl-max);--font-size-heading-xl-min-no-unit: var(--fs-hl-xl-min-no-unit);--font-size-heading-xl-max-no-unit: var(--fs-hl-xl-max-no-unit);--font-size-heading-xxl-min: var(--fs-hl-xxl-min);--font-size-heading-xxl-max: var(--fs-hl-xxl-max);--font-size-heading-xxl-min-no-unit: var(--fs-hl-xxl-min-no-unit);--font-size-heading-xxl-max-no-unit: var(--fs-hl-xxl-max-no-unit);--font-size-heading-xxl-display-min: var(--fs-hl-xxl-display-min);--font-size-heading-xxl-display-max: var(--fs-hl-xxl-display-max);--font-size-heading-xxl-display-min-no-unit: var(--fs-hl-xxl-display-min-no-unit);--font-size-heading-xxl-display-max-no-unit: var(--fs-hl-xxl-display-max-no-unit);--font-size-regular-min: var(--fs-regular-min);--font-size-regular-min-no-unit: var(--fs-regular-min-no-unit);--font-size-regular-max: var(--fs-regular-max);--font-size-regular-max-no-unit: var(--fs-regular-max-no-unit);--font-size-xs: var(--fs-400);--font-size-sm: var(--fs-500);--font-size-regular: var(--fs-650);--font-size-md: var(--fs-700);--font-size-lg: var(--fs-800);--font-weight-light: var(--fw-200);--font-weight-book: var(--fw-300);--font-weight-regular: var(--fw-400);--font-weight-medium: var(--fw-500);--font-weight-semi-bold: var(--fw-600);--font-weight-bold: var(--fw-700);--font-weight-heavy: var(--fw-900);--fluid-breakpoint-min: 26.25rem;--fluid-breakpoint-max: 90rem;--fluid-breakpoint-min-no-unit: 26.25;--fluid-breakpoint-max-no-unit: 90;--font-family-base: var(--ff-sans);--font-family-heading: var(--ff-sans);--line-height-body: var(--lh-regular);--line-height-heading: var(--lh-sm);--nav-breakpoint: 1440px;--nav-color: var(--clr-black);--nav-active-color: var(--clr-red-500);--nav-item-line-height: var(--lh-sm);--nav-font-size: var(--fs-650);--nav-font-weight: var(--fw-300);--nav-icon: url('data:image/svg+xml,');--nav-icon-background: transparent;--nav-mobile-background: var(--clr-blue-400);--nav-mobile-color: var(--clr-grey-300);--nav-mobile-active-background: var(--clr-grey-600);--nav-mobile-active-color: var(--clr-red-500);--nav-mobile-active-border-color: var(--clr-red-500);--nav-mobile-btn-clr: var(--clr-red-500);--nav-mobile-separator-color: var(--clr-grey-300);--nav-mobile-padding: 5rem 2rem 2rem;--nav-mobile-padding-close-btn: 2rem;--nav-mobile-font-size: var(--fs-650);--nav-mobile-backdrop-height: 80px;--nav-mobile-icon: url('data:image/svg+xml,');--nav-mobile-icon-light: url('data:image/svg+xml,');--nav-mobile-icon-line-height: 0.2rem;--nav-mobile-icon-line-space: -0.5rem;--nav-submenu-background: var(--clr-grey-200);--nav-burger-line-color: var(--clr-grey-300);--nav-burger-background-color: var(--clr-blue-400);--skip-background: var(--clr-grey-500);--skip-color: var(--clr-red-500);--skip-focus-border-color: var(--clr-red-500);--mega-background: var(--nav-submenu-background);--mega-border-color: var(--clr-grey-400);--mega-shadow: 0 8px 32px rgb(0 0 0 / 12%);--mega-padding: 2rem 0;--mega-gap: var(--navigation-gap-inline-default);--mega-heading-color: var(--clr-grey-400);--mega-heading-font-size: var(--fs-600);--mega-heading-font-weight: var(--fw-400);--mega-link-font-size: var(--fs-650);--mega-link-color-hover: var(--clr-red-500);--mega-arrow-color: var(--clr-black);--mega-arrow-color-hover: var(--clr-red-500);--winkel-probahn: 30deg;--map-state-background: var(--clr-orange-500);--map-state-background-hover: var(--clr-blue-500);--map-state-stroke: var(--clr-white);--map-dot-radius: var(--object-radius-regular);--map-dot-radius-pulse: var(--object-radius-md);--map-content-background: var(--clr-white);--map-handle-stroke: var(--clr-grey-400);--alert-background-default: var(--clr-grey-200);--alert-color-default: var(--text-color-default);--alert-accent-info: var(--clr-blue-400);--alert-accent-success: var(--clr-blue-400);--alert-accent-warning: var(--clr-red-500);--alert-accent-error: var(--clr-red-500);--modal-backdrop-background: rgb(0 0 0 / 50%);--modal-background-default: var(--background-color-default);--modal-color-default: var(--text-color-default);--modal-title-color-default: var(--brand-color-secondary);--modal-close-color-default: var(--text-color-light);--modal-close-color-hover: var(--text-color-default);--modal-close-target-size: 44px;--modal-shadow-default: 0 8px 32px rgb(0 0 0 / 15%)}}@layer generic{html{text-size-adjust:none}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}[role=list]{list-style:none;margin:0;padding:0}body{min-block-size:100vh;line-height:var(--line-height-body)}h1,h2,h3,h4,h5,h6,button,input,label{line-height:1.1}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where(p,li){text-wrap:pretty}img,picture,video,canvas,svg{max-inline-size:100%;block-size:auto;display:block}input,button,textarea,select{font:inherit}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}button{all:unset;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;line-height:inherit;text-align:inherit;text-decoration:none;box-shadow:none;border-radius:0;cursor:pointer}}@layer generic{@font-face{font-family:"Inter";src:url("fonts/inter-v20-latin-200.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url("fonts/inter-v20-latin-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url("fonts/inter-v20-latin-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url("fonts/inter-v20-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url("fonts/inter-v20-latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url("fonts/inter-v20-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url("fonts/inter-v20-latin-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:"Inter";src:url("fonts/inter-v20-latin-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}}@layer base{@media(prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}body{background-color:var(--background-color-default)}}@layer base{html{font-family:var(--font-family-base);line-height:var(--line-height-body)}body{font-size:var(--font-size-regular);font-weight:var(--font-weight-book);color:var(--text-color-default)}h1,h2,h3,h4,h5{font-family:var(--font-family-heading);line-height:var(--line-height-heading);color:var(--text-color-default);text-wrap:balance}@media(max-width: 48rem){h1,h2,h3,h4,h5{hyphens:auto}}h1{--min-font-size: var(--font-size-heading-xxl-min);--max-font-size: var(--font-size-heading-xxl-max);--min-font-size-no-unit: var(--font-size-heading-xxl-min-no-unit);--max-font-size-no-unit: var(--font-size-heading-xxl-max-no-unit);--slope: calc( (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) / (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) );--intercept: calc( var(--min-font-size) - (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) / (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) * var(--fluid-breakpoint-min) );font-size:clamp(var(--min-font-size),var(--intercept) + var(--slope)*100vw,var(--max-font-size));font-weight:var(--font-weight-bold);color:var(--brand-color-secondary);margin-block-end:var(--flow-spacing-block-sm)}h1.display{--min-font-size: var(--font-size-heading-xxl-display-min);--max-font-size: var(--font-size-heading-xxl-display-max);--min-font-size-no-unit: var(--font-size-heading-xxl-display-min-no-unit);--max-font-size-no-unit: var(--font-size-heading-xxl-display-max-no-unit);--slope: calc( (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) / (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) );--intercept: calc( var(--min-font-size) - (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) / (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) * var(--fluid-breakpoint-min) );font-size:clamp(var(--min-font-size),var(--intercept) + var(--slope)*100vw,var(--max-font-size));font-weight:var(--font-weight-heavy);margin-block-end:var(--flow-spacing-block-sm)}h2{--min-font-size: var(--font-size-heading-xl-min);--max-font-size: var(--font-size-heading-xl-max);--min-font-size-no-unit: var(--font-size-heading-xl-min-no-unit);--max-font-size-no-unit: var(--font-size-heading-xl-max-no-unit);--slope: calc( (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) / (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) );--intercept: calc( var(--min-font-size) - (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) / (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) * var(--fluid-breakpoint-min) );font-size:clamp(var(--min-font-size),var(--intercept) + var(--slope)*100vw,var(--max-font-size));font-weight:var(--font-weight-heavy);text-align:center;margin-inline:auto;color:var(--brand-color-secondary)}h3{--min-font-size: var(--font-size-heading-lg-min);--max-font-size: var(--font-size-heading-lg-max);--min-font-size-no-unit: var(--font-size-heading-lg-min-no-unit);--max-font-size-no-unit: var(--font-size-heading-lg-max-no-unit);--slope: calc( (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) / (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) );--intercept: calc( var(--min-font-size) - (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) / (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) * var(--fluid-breakpoint-min) );font-size:clamp(var(--min-font-size),var(--intercept) + var(--slope)*100vw,var(--max-font-size));font-weight:var(--font-weight-bold);color:var(--brand-color-secondary)}h4{font-size:var(--font-size-heading-regular);font-weight:var(--font-weight-semi-bold)}h5{font-size:var(--font-size-heading-sm);font-weight:var(--font-weight-medium)}.content-headline--left{text-align:left}.content-headline--center{text-align:center;margin-inline:auto}th,td,caption,p{--min-font-size: var(--font-size-regular-min);--max-font-size: var(--font-size-regular-max);--min-font-size-no-unit: var(--font-size-regular-min-no-unit);--max-font-size-no-unit: var(--font-size-regular-max-no-unit);--slope: calc( (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) / (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) );--intercept: calc( var(--min-font-size) - (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) / (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) * var(--fluid-breakpoint-min) );font-size:clamp(var(--min-font-size),var(--intercept) + var(--slope)*100vw,var(--max-font-size));color:var(--text-color-default)}strong,b{font-weight:var(--font-weight-medium)}a{color:var(--text-color-default);transition:color .3s ease}a:hover,a:focus-visible{color:var(--text-color-default-hover)}@media(prefers-reduced-motion: reduce){a{transition:none !important}}.wrapper--width-narrow :is(h2,h3,h4,h5,h6),.wrapper--width-medium :is(h2,h3,h4,h5,h6),.wrapper--width-standard :is(h2,h3,h4,h5,h6){max-width:85rem}.wrapper--width-narrow .content-text,.wrapper--width-medium .content-text,.wrapper--width-standard .content-text{max-width:75ch}.wrapper--width-narrow .content-text:has(.u-text-center),.wrapper--width-medium .content-text:has(.u-text-center),.wrapper--width-standard .content-text:has(.u-text-center){margin-inline:auto}.wrapper--width-narrow>*:not(:has(.equal-columns)) .content-text,.wrapper--width-medium>*:not(:has(.equal-columns)) .content-text,.wrapper--width-standard>*:not(:has(.equal-columns)) .content-text{max-width:65ch}.content-text>*+*{margin-block-start:var(--flow-spacing-block-default, 1.25em)}.content-text>h1+*{margin-block-start:var(--elements-gap-block)}}@layer base{.button{--button-background: var(--button-background-primary);--button-color: var(--button-color-primary);padding-inline:var(--button-padding-inline);padding-block:var(--button-padding-block);background-color:var(--button-background);color:var(--button-color);font-weight:var(--font-weight-medium);text-decoration:none;transition:color .3s ease,background-color .3s ease}.button.button--skew{display:block;width:fit-content;--skew-offset: calc((var(--button-padding-block) * 2 + 1lh) / 2 * tan(var(--winkel-probahn)));margin-inline-start:var(--skew-offset);transform:skewX(calc(-1 * var(--winkel-probahn)))}.button.button--skew .button__text{display:inline-block;transform:skewX(var(--winkel-probahn))}.button.button--primary{--button-background: var(--button-background-primary);--button-color: var(--button-color-primary)}.button.button--primary:hover{--button-color-hover: var(--button-color-primary-hover);--button-background-hover: var(--button-background-primary-hover)}.button.button--secondary{--button-background: var(--button-background-secondary);--button-color: var(--button-color-secondary)}.button.button--secondary:hover{--button-color-hover: var(--button-color-secondary-hover);--button-background-hover: var(--button-background-secondary-hover)}.button.button--accent{--button-background: var(--button-background-accent);--button-color: var(--button-color-accent)}.button.button--accent:hover{--button-color-hover: var(--button-color-accent-hover);--button-background-hover: var(--button-background-accent-hover)}.button.button--reduced{--button-background: var(--button-background-reduced);--button-color: var(--button-color-reduced)}.button.button--reduced:hover{--button-color-hover: var(--button-color-reduced-hover);--button-background-hover: var(--button-background-reduced-hover)}.button.button--only-text-icon{--button-background: transparent;--button-color: var(--navigation-color-default)}.button.button--only-text-icon:hover{--button-color-hover: var(--navigation-color-default-hover);--button-background-hover: transparent}.button:hover{background-color:var(--button-background-hover);color:var(--button-color-hover)}.button.button--center{margin-inline:auto}.button.button--center.button--skew{translate:var(--skew-offset) 0}@media(max-width: 75rem){.button.button--center.button--skew{translate:0}}button.is-disabled{cursor:not-allowed;opacity:.5}.content-download.button--center .button{margin-inline:auto}:where(button,.button){outline:none}:where(button,.button):focus-visible{outline:2px solid var(--focus-color-default);outline-offset:3px}@media(max-width: 26.25rem){.button{font-size:initial}}}@layer base{img{border-radius:var(--border-radius-default)}}@layer base{.svg-icon{--svg-icon-width: var(--icon-size-regular);--svg-icon-height: var(--icon-size-regular);display:inline-flex;inline-size:var(--svg-icon-width);block-size:var(--svg-icon-width)}.svg-icon--size-sm{--svg-icon-width: var(--icon-size-sm);--svg-icon-height: var(--icon-size-sm)}.svg-icon--size-lg{--svg-icon-width: var(--icon-size-lg);--svg-icon-height: var(--icon-size-lg)}.svg-icon--size-xl{--svg-icon-width: var(--icon-size-xl);--svg-icon-height: var(--icon-size-xl)}.svg-icon--size-font{--svg-icon-width: 1em;--svg-icon-height: 1em}}@layer base{.card{--flow-spacing-block: var(--flow-spacing-block-default);display:grid}.card:has(>:not(svg)~:not(svg)):not(:has(>.card__image))>*{padding-inline:0}.card:has(>:not(svg)~:not(svg)):not(:has(>.card__image))>*:last-child{padding-block-end:var(--card-padding-block)}.card:has(>:not(svg)~:not(svg)):not(:has(>.card__image))>*:first-child{padding-block-start:var(--card-padding-block)}.card:has(>:not(svg)~:not(svg)):not(:has(>.card__image))>:nth-child(n+2){margin-block-start:var(--flow-spacing-block)}.card:has(.card__image)>*:not(:first-child){padding-inline:var(--card-padding-inline)}.card:has(.card__image)>*:first-child{padding-block-start:0}.card:has(.card__image)>*:last-child{padding-block-end:var(--card-padding-block)}.card:has(.card__image)>*:nth-child(2){padding-block-start:var(--card-padding-block)}.card:has(.card__image)>:nth-child(n+2){margin-block-start:0}.card:has(.card__image)>:nth-child(n+3){margin-block-start:var(--flow-spacing-block)}.card--background,.card--border{border-radius:var(--border-radius-default);padding-inline:var(--card-padding-inline);padding-block:var(--card-padding-block)}.card--background{background-color:var(--background-color-light)}.card--border{border:var(--border-width-default) solid var(--border-color-default)}}@layer base{.link-list{--link-list-row-padding-block: 0.5rem;--link-list-row-padding-inline: 0;--link-list-row-min-block-size: 2.75rem;--link-list-row-gap: 0.5rem;list-style:none;margin:0;padding:0;display:grid;gap:0}.link-list__item{margin:0;padding:0}.link-list__row{display:flex;align-items:center;gap:var(--link-list-row-gap);padding-block:var(--link-list-row-padding-block);padding-inline:var(--link-list-row-padding-inline);min-block-size:var(--link-list-row-min-block-size)}}@layer layout{.wrapper{--wrapper-max-width: var(--section-width-default);--wrapper-padding: var(--wrapper-padding-inline);max-width:var(--wrapper-max-width);margin-inline:auto;padding-inline:var(--wrapper-padding)}.wrapper.wrapper--width-full{--wrapper-max-width: var(--section-width-full)}.wrapper.wrapper--width-standard{--wrapper-max-width: var(--section-width-default)}.wrapper.wrapper--width-medium{--wrapper-max-width: var(--section-width-sm)}.wrapper.wrapper--width-narrow{--wrapper-max-width: var(--section-width-xs)}section:not(.hero,.site-footer__inner,.site-footer__bottom) .content-block>*+*{margin-block-start:var(--elements-gap-block, 1.25rem)}section:not(.hero,.site-footer__inner,.site-footer__bottom) .content-block>.content-headline:not(h1)+*{margin-block-start:var(--flow-spacing-block-default)}section:not(.hero,.site-footer__inner,.site-footer__bottom) .content-block>:is(.content-text,.content-table)+:is(.content-text,.content-table){margin-block-start:var(--flow-spacing-block-default)}section:not(.hero,.site-footer__inner,.site-footer__bottom) .content-block>.ce_rsce_headline_subheadline:not(h1)+.content-collection:has(.ce_rsce_two_columns_text){margin-block-start:var(--flow-spacing-block-default)}section{padding-block:var(--section-padding-block);margin-block-end:.25em}section section{padding-block:0}.element--center{margin-inline:auto}}@layer layout{.flow>*+*{margin-block-start:var(--flow-spacing-block-default);hyphens:auto;overflow-wrap:break-word}.grid-flow{display:grid;gap:var(--flow-grid-spacing-block);align-content:start;justify-items:start}}@layer layout{.equal-columns{--equal-columns-gap-columns: var(--equal-columns-gap-default);--equal-columns-gap-rows: var(--equal-columns-gap-default);container-type:inline-size;container-name:equal-columns;display:grid;gap:var(--equal-columns-gap-rows) var(--equal-columns-gap-columns);align-items:var(--column-layout-alignment, start)}.equal-columns:has(.content-download){gap:var(--flow-grid-spacing-block) var(--equal-columns-gap-columns)}.equal-columns.equal-columns--gap-lg{--equal-columns-gap: var(--equal-columns-gap-lg)}.equal-columns.equal-columns--alignment-center{--column-layout-alignment: center}.equal-columns.equal-columns--alignment-bottom{--column-layout-alignment: end}.equal-columns.equal-columns--alignment-stretch{--column-layout-alignment: stretch}.equal-columns.equal-columns--only-content{--equal-columns-gap-rows: var(--flow-spacing-block-default)}.equal-columns h2,.equal-columns h3,.equal-columns h4,.equal-columns h5{text-align:left}@container article-wrapper (width > 46rem){.equal-columns{grid-template-columns:repeat(auto-fit, minmax(min(var(--grid-auto-fit-column-size-min, 250px), 100%), 1fr))}}.content-collection{container-type:inline-size;container-name:article-wrapper}.content-collection>:is(h2,h3,h4,h5,h6):first-child+*{margin-block-start:var(--flow-spacing-block-default)}@container article-wrapper (width > 46rem){.equal-columns--columns-4{grid-template-columns:repeat(2, 1fr)}.equal-columns--columns-4.equal-columns--columns-center{grid-template-columns:repeat(4, 1fr)}.equal-columns--columns-4.equal-columns--columns-center>*{grid-column:span 2}.equal-columns--columns-4.equal-columns--columns-center>*:nth-child(2n+1):nth-last-child(1){grid-column:2/span 2}}@container article-wrapper (width > 70rem){.equal-columns--columns-4{grid-template-columns:repeat(4, 1fr)}.equal-columns--columns-4.equal-columns--columns-center{grid-template-columns:repeat(8, 1fr)}.equal-columns--columns-4.equal-columns--columns-center>*{grid-column:span 2}.equal-columns--columns-4.equal-columns--columns-center>*:nth-child(2n+1):nth-last-child(1){grid-column:span 2}.equal-columns--columns-4.equal-columns--columns-center>*:nth-child(4n+1):nth-last-child(1){grid-column:4/span 2}.equal-columns--columns-4.equal-columns--columns-center>*:nth-child(4n+1):nth-last-child(2){grid-column:3/span 2}.equal-columns--columns-4.equal-columns--columns-center>*:nth-child(4n+2):nth-last-child(1){grid-column:5/span 2}.equal-columns--columns-4.equal-columns--columns-center>*:nth-child(4n+1):nth-last-child(3){grid-column:2/span 2}.equal-columns--columns-4.equal-columns--columns-center>*:nth-child(4n+2):nth-last-child(2){grid-column:4/span 2}.equal-columns--columns-4.equal-columns--columns-center>*:nth-child(4n+3):nth-last-child(1){grid-column:6/span 2}}@container article-wrapper (width > 46rem){.equal-columns--columns-3{grid-template-columns:repeat(2, 1fr)}.equal-columns--columns-3.equal-columns--columns-center{grid-template-columns:repeat(4, 1fr)}.equal-columns--columns-3.equal-columns--columns-center>*{grid-column:span 2}.equal-columns--columns-3.equal-columns--columns-center>*:nth-child(2n+1):nth-last-child(1){grid-column:2/span 2}}@container article-wrapper (width > 70rem){.equal-columns--columns-3{grid-template-columns:repeat(3, 1fr)}.equal-columns--columns-3.equal-columns--columns-center{grid-template-columns:repeat(6, 1fr)}.equal-columns--columns-3.equal-columns--columns-center>*{grid-column:span 2}.equal-columns--columns-3.equal-columns--columns-center>*:nth-child(2n+1):nth-last-child(1){grid-column:span 2}.equal-columns--columns-3.equal-columns--columns-center>*:nth-child(3n+1):nth-last-child(1){grid-column:3/span 2}.equal-columns--columns-3.equal-columns--columns-center>*:nth-child(3n+1):nth-last-child(2){grid-column:2/span 2}.equal-columns--columns-3.equal-columns--columns-center>*:nth-child(3n+2):nth-last-child(1){grid-column:4/span 2}}@container article-wrapper (width > 46rem){.equal-columns--columns-2{grid-template-columns:repeat(2, 1fr)}.equal-columns--columns-2.equal-columns--two-columns-left-wide{grid-template-columns:3fr 2fr}.equal-columns--columns-2.equal-columns--two-columns-right-wide{grid-template-columns:2fr 3fr}.equal-columns--columns-2.equal-columns--columns-center{grid-template-columns:repeat(4, 1fr)}.equal-columns--columns-2.equal-columns--columns-center>*{grid-column:span 2}.equal-columns--columns-2.equal-columns--columns-center>*:nth-child(2n+1):nth-last-child(1){grid-column:2/span 2}}@container article-wrapper (width > 46rem){.equal-columns--columns-6{grid-template-columns:repeat(4, 1fr)}.equal-columns--columns-6>*{grid-column:span 2}}@container article-wrapper (width > 70rem){.equal-columns--columns-6{grid-template-columns:repeat(6, 1fr)}.equal-columns--columns-6>*{grid-column:span 2}}}@layer layout{.flex-group{display:flex;gap:var(--flex-group-gap, var(--flex-group-gap-default));flex-wrap:wrap;align-items:var(--flex-group-alignment, center);justify-content:var(--flex-group-justification, flex-start)}.flex-group.flex-group--align-start{--flex-group-alignment: start}.flex-group.flex-group--align-center{--flex-group-alignment: center}.flex-group.flex-group--align-end{--flex-group-alignment: end}.flex-group.flex-group--justify-center{--flex-group-justification: center}.flex-group.flex-group--justify-space-between{--flex-group-justification: space-between}.flex-group.flex-group--justify-end{--flex-group-justification: flex-end}.flex-group.flex-group--justify-start{--flex-group-justification: flex-start}.flex-group.flex-group--gap-small{--flex-group-gap-default: var(--flex-group-gap-sm)}.flex-group.flex-group--gap-extra-small{--flex-group-gap-default: var(--flex-group-gap-xs)}}@layer layout{.background-color--light{background-color:var(--background-color-light)}.background-color--default{background-color:var(--background-color-default)}.background-color--extra-light{background-color:var(--background-color-extra-light)}.background-color--dark{--text-color-default: var( --text-color-default-inverted );--navigation-color-default: var( --navigation-color-default-inverted );--link-color-default: var( --text-color-default-inverted );--link-text-icon-icon-icon: var(--text-color-extra-light);background-color:var(--background-color-dark);color:var(--text-color-default)}.background-color--dark svg{fill:currentColor}}@layer components{.form-field{margin-bottom:var(--space-700);width:100%}.form-field:last-child{margin-bottom:0}.form-field__label{display:block;margin-bottom:var(--space-300);font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-accent-secondary);line-height:1.6}.form-field__label--required::after{content:"*"/"";margin-left:var(--space-200);color:var(--form-mandatory-color);font-weight:var(--font-weight-bold)}.form-field__required-note{margin-bottom:var(--space-500);font-family:var(--font-family);font-size:var(--font-size-small);color:var(--color-text-muted);line-height:1.5}:is(label,legend).visually-hidden+*{margin-block-start:0}.form-field__input,.form-field__textarea,.form-field__select,.form-field__date{display:block;width:100%;padding:clamp(10px,1vw,14px) clamp(16px,2.5vw,30px);font-family:var(--font-family);font-size:var(--font-size-sm);line-height:1.6;color:var(--color-text);background-color:var(--form-field-background-color-default);border:none;border-radius:var(--border-radius-md);transition:background-color .2s ease}.form-field__input::placeholder,.form-field__textarea::placeholder,.form-field__select::placeholder,.form-field__date::placeholder{font-weight:var(--font-weight-light);font-style:italic;color:var(--color-text-secondary);opacity:1}.form-field__input:hover,.form-field__textarea:hover,.form-field__select:hover,.form-field__date:hover{background-color:var(--form-field-background-color-default-active)}.form-field__input:focus,.form-field__textarea:focus,.form-field__select:focus,.form-field__date:focus{background-color:var(--form-field-background-color-default-active)}.form-field__input:focus-visible,.form-field__textarea:focus-visible,.form-field__select:focus-visible,.form-field__date:focus-visible{outline:var(--focus-outline-width) solid var(--color-focus);outline-offset:var(--focus-outline-offset);background-color:var(--form-field-background-color-default-active)}.form-field__input:disabled,.form-field__input[disabled],.form-field__textarea:disabled,.form-field__textarea[disabled],.form-field__select:disabled,.form-field__select[disabled],.form-field__date:disabled,.form-field__date[disabled]{background-color:#e5e7eb;color:var(--color-text-muted);cursor:not-allowed;opacity:.7}.form-field__input:read-only{background-color:#e5e7eb;cursor:default}.form-field__textarea{min-height:200px;resize:vertical}.form-field__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 d='M1 1l5 5 5-5' stroke='%232c2f6b' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right clamp(16px,2.5vw,30px) center;padding-right:clamp(48px,5vw,72px);cursor:pointer}.form-field__select:disabled,.form-field__select[disabled]{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 d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}.form-field__date::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(15%) sepia(20%) saturate(1000%) hue-rotate(180deg)}.form-field__checkbox-wrapper{display:flex;align-items:flex-start;gap:var(--space-300)}.form-field__checkbox{flex-shrink:0;width:24px;height:24px;margin-top:2px;appearance:none;background-color:var(--form-field-background-color-default);border:none;border-radius:2px;cursor:pointer;transition:background-color .2s ease;position:relative}.form-field__checkbox:checked{background-color:var(--color-accent-secondary)}.form-field__checkbox:checked::after{content:"";position:absolute;top:3px;left:8px;width:6px;height:12px;border:solid var(--color-background);border-width:0 2px 2px 0;transform:rotate(45deg)}.form-field__checkbox:focus{outline:none}.form-field__checkbox:focus-visible{outline:var(--focus-outline-width) solid var(--color-focus);outline-offset:var(--focus-outline-offset)}.form-field__checkbox:disabled,.form-field__checkbox[disabled]{background-color:#e5e7eb;cursor:not-allowed;opacity:.7}.form-field__checkbox:disabled:checked::after{border-color:var(--color-text-muted)}.form-field__checkbox-label{flex:1;font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);color:var(--color-text);line-height:1.6;cursor:pointer}.form-field__checkbox-label a{color:var(--color-accent);text-decoration:underline}.form-field__checkbox-label a:hover{text-decoration:none}.form-field__radio-wrapper{display:flex;align-items:flex-start;gap:var(--space-300)}.form-field__radio{flex-shrink:0;width:20px;height:20px;margin-top:2px;appearance:none;background-color:var(--form-field-background-color-default);border:2px solid var(--color-accent-secondary);border-radius:50%;cursor:pointer;transition:background-color .2s ease,border-color .2s ease;position:relative}.form-field__radio:checked::after{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;background-color:var(--color-accent-secondary);border-radius:50%;transform:translate(-50%, -50%)}.form-field__radio:focus{outline:none}.form-field__radio:focus-visible{outline:var(--focus-outline-width) solid var(--color-focus);outline-offset:var(--focus-outline-offset)}.form-field__radio:disabled,.form-field__radio[disabled]{background-color:#e5e7eb;border-color:var(--color-text-muted);cursor:not-allowed;opacity:.7}.form-field__radio-label{flex:1;font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);color:var(--color-text);line-height:1.6;cursor:pointer}.form-field__radio-group{display:flex;flex-direction:column;gap:var(--space-300);border:0;padding:0;margin:0}.form--legend-invisible legend{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.form-field__helper{display:block;margin-top:var(--space-300);font-family:var(--font-family);font-size:var(--font-size-small);font-weight:var(--font-weight-regular);color:var(--color-text-muted);line-height:1.5}.form-field__error{display:block;margin-top:var(--space-300);font-family:var(--font-family);font-size:var(--font-size-small);font-weight:var(--font-weight-regular);color:var(--color-error);line-height:1.5}.form-field--error .form-field__input,.form-field--error .form-field__textarea,.form-field--error .form-field__select,.form-field--error .form-field__date,.form-field--error .form-field__checkbox{outline:2px solid var(--color-error)}.form-field--error .form-field__radio{border-color:var(--color-error)}.form-field--error .form-field__label,.form-field--error .form-field__helper{color:var(--color-error)}.form-field__file-wrapper{position:relative;display:flex;flex-direction:column;gap:var(--space-300)}.form-field__file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.form-field__file:focus+.form-field__file-button{outline:var(--focus-outline-width) solid var(--color-focus);outline-offset:var(--focus-outline-offset)}.form-field__file-button{display:inline-flex;align-items:center;gap:var(--space-300);padding:var(--space-300) var(--space-500);font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-bold);color:var(--color-background);background-color:var(--color-accent-secondary);border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease}.form-field__file-button:hover{background-color:#142847}.form-field__file-button::before{content:"";display:inline-block;width:16px;height:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}.form-field__file-name{font-family:var(--font-family);font-size:var(--font-size-small);color:var(--color-text-muted)}.form-field__file-name--selected{color:var(--color-text)}.form-field__add,.form-field__remove{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;font-family:var(--font-family);font-size:var(--font-size-h4);font-weight:var(--font-weight-bold);line-height:1;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease,transform .1s ease}.form-field__add:active,.form-field__remove:active{transform:scale(0.95)}.form-field__add:focus,.form-field__remove:focus{outline:var(--focus-outline-width) solid var(--color-focus);outline-offset:var(--focus-outline-offset)}.form-field__add{color:var(--color-background);background-color:var(--color-accent)}.form-field__add:hover{background-color:#d55a3d}.form-field__remove{color:var(--color-background);background-color:var(--color-error)}.form-field__remove:hover{background-color:#b91c1c}.form-field__dynamic-row{display:flex;align-items:flex-start;gap:var(--space-300)}.form-field__dynamic-row .form-field{flex:1;margin-bottom:0}.form-field--inline{display:flex;flex-direction:row;align-items:center;gap:var(--space-500)}.form-field--inline .form-field__label{margin-bottom:0;white-space:nowrap}.form-field-group{display:flex;flex-wrap:wrap;gap:var(--space-500);margin-bottom:var(--space-700)}.form-field-group .form-field{flex:1;min-width:200px;margin-bottom:0}@media(max-width: 480px){.form-field__input,.form-field__textarea,.form-field__select,.form-field__date{padding:var(--space-300);font-size:16px}.form-field-group{flex-direction:column}.form-field-group .form-field{min-width:100%}.form-field--inline{flex-direction:column;align-items:flex-start}}}@layer components{.alert-region{margin-block:var(--space-500)}.alert-region>.alert+.alert{margin-block-start:var(--space-300)}.alert{--alert-accent: var(--alert-accent-info);--alert-background: var(--alert-background-default);--alert-color: var(--alert-color-default);--alert-radius: var(--object-radius-md);--alert-gap: var(--space-400);--alert-padding-block: var(--space-400);--alert-padding-inline: var(--space-500);display:flex;align-items:flex-start;gap:var(--alert-gap);padding:var(--alert-padding-block) var(--alert-padding-inline);border-inline-start:var(--border-width-200) solid var(--alert-accent);border-radius:var(--alert-radius);background-color:var(--alert-background);color:var(--alert-color);font-size:var(--font-size-regular);line-height:var(--line-height-body)}.alert__icon{flex-shrink:0;display:inline-flex;color:var(--alert-accent)}.alert__icon svg{inline-size:var(--icon-size-regular);block-size:var(--icon-size-regular)}.alert__body{flex:1 1 auto;min-inline-size:0}.alert--error{--alert-accent: var(--alert-accent-error)}.alert--warning{--alert-accent: var(--alert-accent-warning)}.alert--success{--alert-accent: var(--alert-accent-success)}.alert--info{--alert-accent: var(--alert-accent-info)}}@layer components{body.scroll-lock{overflow:hidden}.auth-modal__backdrop{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--space-500);background-color:var(--modal-backdrop-background);transition:opacity .2s ease}.auth-modal__dialog{--auth-modal-padding: var(--space-700);position:relative;inline-size:min(30rem,100%);max-block-size:100%;overflow-y:auto;padding:var(--auth-modal-padding);border-radius:var(--object-radius-xxl);background-color:var(--modal-background-default);color:var(--modal-color-default);box-shadow:var(--modal-shadow-default)}.auth-modal__close{position:absolute;inset-block-start:var(--space-300);inset-inline-end:var(--space-300);display:grid;place-items:center;inline-size:var(--modal-close-target-size);block-size:var(--modal-close-target-size);padding:0;border:none;background:none;color:var(--modal-close-color-default);font-size:var(--font-size-md);line-height:var(--lh-none);cursor:pointer;transition:color .15s ease}.auth-modal__close:hover{color:var(--modal-close-color-hover)}.auth-modal__close:focus-visible{outline:2px solid var(--focus-color-default);outline-offset:2px}.auth-modal__title{margin-block:0 var(--space-500);padding-inline-end:var(--modal-close-target-size);color:var(--modal-title-color-default);font-size:var(--font-size-heading-regular);font-weight:var(--font-weight-bold);line-height:var(--line-height-heading)}.auth-modal__sso-btn,.auth-modal__submit{--auth-modal-skew-allowance: calc( (var(--button-padding-block) * 2 + 3lh) / 2 * tan(var(--winkel-probahn)) );max-inline-size:calc(100% - 2*var(--auth-modal-skew-allowance));margin-inline:auto;margin-block-start:var(--space-500);text-align:center}.auth-modal__footer{margin-block:var(--space-500) 0;text-align:center;font-size:var(--font-size-sm)}@media(prefers-reduced-motion: reduce){.auth-modal__backdrop,.auth-modal__close{transition:none}}}@layer components{.auth-page{background-color:var(--color-background-alt);padding:var(--spacing-2xl) var(--spacing-md);min-height:60vh}.auth-page__inner{max-width:640px;margin-inline:auto}.auth-page--manage .auth-page__inner{max-width:720px}.auth-panel{background-color:var(--color-background);border-radius:var(--border-radius-card);padding:var(--spacing-2xl)}.auth-panel__title,.auth-panel>h1{font-size:var(--font-size-h3);font-weight:var(--font-weight-bold);color:var(--brand-color-secondary);margin:0 0 var(--spacing-lg);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-subheading)}.auth-panel>p{margin:0 0 var(--spacing-lg);line-height:1.6}.auth-panel>form{margin-top:var(--spacing-lg)}.auth-panel__body{margin-bottom:var(--spacing-lg)}.auth-panel__body:last-child{margin-bottom:0}.auth-panel__actions{list-style:none;padding:0;margin:var(--spacing-lg) 0 0;display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:center}.auth-panel__links{list-style:none;margin:var(--spacing-lg) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-sm)}.auth-panel__links a{color:var(--brand-color-secondary);text-decoration:underline}.auth-panel__links a:hover{text-decoration:none}@media(max-width: 767px){.auth-page{padding:var(--spacing-lg) var(--spacing-md)}.auth-panel{padding:var(--spacing-lg)}}}@layer components{.site-header{background-color:var(--header-background-color);padding-block:var(--header-padding-block-default)}.site-header__inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end}.site-header__logo-link{margin-inline-end:auto}.site-header__logo-image{width:var(--logo-width-default)}@media(width < 90rem){.site-header{background-color:var(--background-color-extra-light);border:none;padding-block:0}.site-header__inner{align-items:stretch;flex-wrap:nowrap;column-gap:var(--elements-gap-inline)}.site-header__logo-link{margin-block:var(--header-padding-block-default)}}.site-header:not(:has(+main .hero)){--overlay-hoehe: 72px;--offset: calc(tan(var(--winkel-probahn)) * var(--overlay-hoehe));position:relative;margin-bottom:var(--overlay-hoehe)}.site-header:not(:has(+main .hero))::after{content:"";position:absolute;left:0;bottom:calc(-1*var(--overlay-hoehe));width:560px;height:var(--overlay-hoehe);background:var(--background-color-extra-light);clip-path:polygon(0 0, 100% 0, calc(100% - var(--offset)) 100%, 0 100%);z-index:4}@media(max-width: 48rem){.site-header:not(:has(+main .hero)){margin-bottom:0}.site-header:not(:has(+main .hero))::after{display:none}}}@layer components{.site-header__top{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--navigation-gap-inline-default) var(--navigation-gap-block-default);padding-block:calc(var(--elements-gap-block)/6)}.site-header:has(.site-header__top){padding-block-start:0}@media(width < 75rem){.site-header__top{justify-content:center}.site-header>:first-child{background-color:var(--background-color-default)}}}@layer components{.headline-subheadline .headline-top,.headline-subheadline .headline-bottom{display:block;font-size:.5em;font-weight:var(--font-weight-book)}.headline-subheadline .headline-top{margin-bottom:.25em}.headline-subheadline .headline-bottom{margin-top:.25em}h1.headline-subheadline .headline-top,h1.headline-subheadline .headline-bottom{font-size:.3em}h3.headline-subheadline .headline-top,h3.headline-subheadline .headline-bottom{font-size:.6em}h4.headline-subheadline .headline-top,h4.headline-subheadline .headline-bottom{font-size:.7em}h5.headline-subheadline .headline-top,h5.headline-subheadline .headline-bottom{font-size:.8em}}@layer components{.skip-navigation{background:var(--button-background-primary);font-size:var(--font-size-regular);padding:1rem;position:absolute;top:1rem;left:1rem;color:var(--button-color-primary)}.skip-navigation:not(:focus){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;column-gap:var(--navigation-gap-inline-default)}.navigation strong,.navigation a{text-decoration:none;text-transform:uppercase;font-family:var(--navigation-font-family-default);font-size:var(--navigation-font-size-default);font-weight:var(--navigation-font-weight-default);line-height:var(--navigation-line-height-item);color:var(--link-text-icon-color, var(--navigation-color-default))}.navigation strong:hover,.navigation a:hover{color:var(--link-text-icon-color-hover, var(--navigation-color-default-hover))}.navigation strong.active,.navigation a.active{color:var(--link-text-icon-color-hover, var(--navigation-color-default-hover))}.navigation.mod_newscategories span{line-height:var(--navigation-line-height-item)}.navigation--centered ul{justify-content:center}main>.navigation:first-child{margin-block-start:var(--elements-gap-block)}@media(width < 48rem){.navigation ul{flex-direction:column;row-gap:var(--navigation-gap-block-default)}.navigation-footer ul{align-items:center}}body:not(.navigation-open,.nav-is-desktop) .navigation-main{opacity:0;pointer-events:none;visibility:hidden}body.navigation-open{overflow:hidden}body.navigation-open header .logo{position:relative;z-index:7}.nav-wrapper *{box-sizing:border-box}.btn-toggle-submenu{position:absolute;top:5px;right:0;width:44px;height:44px;background:var(--nav-icon-background);cursor:pointer;z-index:1}.btn-toggle-submenu::after{content:"";display:flex;justify-content:center;align-items:center;height:100%;background:var(--nav-mobile-icon-light) no-repeat center;transition:transform .3s cubic-bezier(0.2, 0.6, 0.3, 1.1)}.nav-burger{padding:0;border:none;background:rgba(0,0,0,0);line-height:1.5;display:flex;justify-content:flex-start;align-items:center;position:relative;z-index:7;height:100%;top:0;right:0;transition:top .3s ease,right .3s ease,transform .3s ease,opacity .3s ease}.nav-burger:not(.is-active){--overlay-hoehe: var(--nav-mobile-icon-block-height);--offset: calc(tan(var(--winkel-probahn)) * var(--overlay-hoehe));clip-path:polygon(var(--offset) 0%, 100% 0%, 100% 100%, 0% 100%);padding-inline-end:3rem;padding-inline-start:calc(3rem + var(--offset)/2);margin-inline-start:calc(-1*var(--offset)/2);background-color:var(--nav-burger-background-color)}.nav-burger .icon-line{top:50%;z-index:1;transform:translateY(-50%);transition:background-color .2s ease-in-out}.nav-burger .icon-line::before{top:var(--nav-mobile-icon-line-space)}.nav-burger .icon-line::after{bottom:var(--nav-mobile-icon-line-space)}.nav-burger .icon-line,.nav-burger .icon-line::before,.nav-burger .icon-line::after{position:absolute;left:50%;height:var(--nav-mobile-icon-line-height);width:100%;background:var(--nav-burger-line-color);transform:translateX(-50%)}.nav-burger .icon-line::before,.nav-burger .icon-line::after{z-index:6;transition:transform .2s ease-in-out,top .2s ease-in-out,bottom .2s ease-in-out;content:""}.nav-burger.is-active{height:auto;position:fixed;top:2rem;right:2rem;transform:scale(1.05);padding-inline-end:var(--nav-mobile-padding-close-btn)}.nav-burger.is-active .icon-line{background:rgba(0,0,0,0)}.nav-burger.is-active .icon-line::before{top:0;transform:translateX(-50%) rotate(45deg)}.nav-burger.is-active .icon-line::after{bottom:0;transform:translateX(-50%) rotate(-45deg)}.nav-burger:hover{cursor:pointer}.nav-burger__inner{position:relative;width:44px;height:30px}@media(max-width: 90rem){.nav-burger{margin-right:calc(-1*var(--wrapper-padding))}}.nav-burger:not(.is-active) .nav-burger__inner{--overlay-hoehe: calc( var(--nav-mobile-icon-line-space) * -2 + var(--nav-mobile-icon-line-height) * 3 );--offset: calc(tan(var(--winkel-probahn)) * var(--overlay-hoehe));clip-path:polygon(var(--offset) 0%, 100% 0%, 100% 100%, 0% 100%)}@media(max-width: 26.25rem){.nav-burger__inner{width:32px;height:22px}.nav-burger{--nav-mobile-icon-line-height: 0.15rem;--nav-mobile-icon-line-space: -0.375rem}.nav-burger:not(.is-active){padding-inline-end:1.5rem;padding-inline-start:calc(1.5rem + var(--offset)/2)}}.mega-panel{display:none}.mega-panel.is-open{display:block}body.nav-is-mobile .navigation-main{position:fixed;inset:0;overflow:hidden auto;z-index:6;padding:var(--nav-mobile-padding);background:var(--nav-mobile-background);color:var(--nav-mobile-color);line-height:1.5;font-size:var(--nav-mobile-font-size);transition:opacity .15s ease-in-out,visibility .1s}body.nav-is-mobile .navigation-main.is-active::before{display:block;content:"";position:fixed;inset:0 0 auto;height:var(--nav-mobile-backdrop-height);backdrop-filter:blur(1px);z-index:1}body.nav-is-mobile .navigation-main :is(a,strong){display:inline-block;color:var(--nav-mobile-color);text-decoration:unset;padding:12px 10px;width:calc(100% - 44px)}body.nav-is-mobile .navigation-main :is(a,strong):is(.active){--nav-mobile-color: var(--nav-mobile-active-color)}body.nav-is-mobile .navigation-main :is(a,strong) svg{display:none}body.nav-is-mobile .navigation-main .level-1>li>:is(a,strong){font-weight:var(--font-weight-medium)}body.nav-is-mobile .navigation-main .level-1>li:not(:last-child){border-bottom:1px solid var(--nav-mobile-separator-color)}body.nav-is-mobile .navigation-main .level-2>li :is(a,strong){padding-block:10px}body.nav-is-mobile .navigation-main .level-3>li{padding-inline-start:20px}body.nav-is-mobile .navigation-main .level-3>li :is(a,strong){padding-block:6px}body.nav-is-mobile .navigation-main .level-2 ul{display:none}body.nav-is-mobile .navigation-main ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}body.nav-is-mobile .navigation-main li{position:relative;padding:0}body.nav-is-mobile .navigation-main li>.btn-toggle-submenu::after{transform:rotateX(180deg) rotateZ(-90deg)}body.nav-is-mobile .navigation-main li.active{background:var(--nav-mobile-active-background);color:var(--nav-mobile-active-color)}body.nav-is-mobile .navigation-main li.nav-expanded>ul{display:flex}body.nav-is-mobile .navigation-main li.nav-expanded>.mega-panel{display:block}body.nav-is-mobile .navigation-main li.nav-expanded>.btn-toggle-submenu::after{transform:rotateX(0deg) rotateZ(-90deg)}body.nav-is-mobile .navigation-main .mega-panel.is-open{display:block}body.nav-is-mobile .navigation-main .mega-inner{padding:0 0 0 20px}body.nav-is-desktop .navigation-main :is(a,strong){text-decoration:none;color:var(--nav-color);font-size:var(--nav-font-size);font-weight:var(--nav-font-weight)}body.nav-is-desktop .navigation-main :is(a:hover,a:focus-visible,a.trail,strong){color:var(--nav-active-color)}body.nav-is-desktop .navigation-main ul{display:flex;flex-wrap:wrap;gap:1.5rem;list-style:none;padding:0;margin:0}body.nav-is-desktop .navigation-main ul li.submenu{position:relative}body.nav-is-desktop .navigation-main li.nav-expanded>ul{display:flex}body.nav-is-desktop .navigation-main .level-1{gap:0 var(--navigation-gap-inline-default);justify-content:flex-end;align-items:center}body.nav-is-desktop .navigation-main .level-1>li{padding:5px 0 0 0;position:relative;padding-bottom:var(--header-padding-block-default);top:var(--header-padding-block-default)}body.nav-is-desktop .navigation-main .level-1>li>.btn-toggle-submenu::after{transform:rotateX(180deg) rotateZ(-90deg)}body.nav-is-desktop .navigation-main .level-1>li.submenu{padding-right:20px}body.nav-is-desktop .navigation-main .level-1>li.nav-expanded>.btn-toggle-submenu::after{transform:rotateX(0deg) rotateZ(-90deg)}body.nav-is-desktop .navigation-main .level-2 .btn-toggle-submenu{display:none}body.nav-is-desktop .navigation-main .skip-link{visibility:visible;opacity:0;position:absolute;left:50%;transform:translateX(-50%);clip:revert;top:-100px;text-align:center;overflow:hidden;background:var(--skip-background);color:var(--skip-color);transition:top .15s ease-in-out;z-index:6;text-decoration:none}body.nav-is-desktop .navigation-main .skip-link:focus-visible{width:auto;height:auto;outline-offset:0;outline:2px solid var(--skip-focus-border-color);padding:6px 12px;top:0;opacity:1}body.nav-is-desktop .navigation-main .mega-panel{position:fixed;left:0;right:0;background:var(--mega-background);border-top:2px solid var(--mega-border-color);box-shadow:var(--mega-shadow);z-index:10;padding:var(--mega-padding);display:block;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(0);transition:opacity .2s ease,transform .2s ease,visibility .2s}body.nav-is-desktop .navigation-main .mega-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(var(--header-padding-block-default))}body.nav-is-desktop .navigation-main .mega-panel.is-open>.mega-inner{display:flex;flex-direction:row}body.nav-is-desktop .navigation-main .mega-inner{max-width:var(--layout-max-width, 1280px);margin-inline:auto;padding-inline:var(--layout-padding-inline, 1.5rem)}body.nav-is-desktop .navigation-main .level-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));grid-template-rows:auto auto;column-gap:var(--mega-gap);row-gap:.4rem;align-items:start;justify-content:center;width:100%}body.nav-is-desktop .navigation-main .level-2>li{grid-row:span 2;display:grid;grid-template-rows:subgrid;align-items:start}body.nav-is-desktop .navigation-main .level-2>li.submenu:has(.level-3 li:nth-child(4)){grid-column:span 2}body.nav-is-desktop .navigation-main .level-2>li:not(.submenu)>a{display:flex;align-items:center;gap:.4rem;padding:.2rem 0;line-height:var(--nav-item-line-height)}body.nav-is-desktop .navigation-main .level-2>li:not(.submenu)>a svg{flex-shrink:0;block-size:.6em;aspect-ratio:18/14;transition:transform .15s ease}body.nav-is-desktop .navigation-main .level-2>li:not(.submenu)>a:hover{color:var(--nav-active-color)}body.nav-is-desktop .navigation-main .level-2>li:not(.submenu)>a:hover svg{transform:translateX(3px)}body.nav-is-desktop .navigation-main .level-2:has(>li.submenu)>li>a,body.nav-is-desktop .navigation-main .level-2:has(>li.submenu)>li>strong{align-self:stretch;display:flex;align-items:center;gap:.4rem;font-size:var(--mega-heading-font-size);font-weight:var(--mega-heading-font-weight);letter-spacing:.1em;color:var(--mega-heading-color);padding:0 0 .5rem;border-bottom:1px solid rgba(0,0,0,.1);margin-bottom:.25rem;line-height:1.3}body.nav-is-desktop .navigation-main .level-2:has(>li.submenu)>li>a svg,body.nav-is-desktop .navigation-main .level-2:has(>li.submenu)>li>strong svg{flex-shrink:0;block-size:.6em;aspect-ratio:18/14;transition:transform .15s ease}body.nav-is-desktop .navigation-main .level-2:has(>li.submenu)>li>a:hover,body.nav-is-desktop .navigation-main .level-2:has(>li.submenu)>li>strong:hover{color:var(--mega-link-color-hover)}body.nav-is-desktop .navigation-main .level-2:has(>li.submenu)>li>a:hover svg,body.nav-is-desktop .navigation-main .level-2:has(>li.submenu)>li>strong:hover svg{color:var(--mega-arrow-color-hover);transform:translateX(3px)}body.nav-is-desktop .navigation-main .level-3{gap:0;flex-direction:column}body.nav-is-desktop .navigation-main .level-3:has(li:nth-child(4)){display:block;column-count:2;column-gap:var(--mega-gap)}body.nav-is-desktop .navigation-main .level-3 a{display:flex;align-items:center;gap:.4rem;padding:.25rem 0;line-height:var(--nav-item-line-height)}body.nav-is-desktop .navigation-main .level-3 a svg{flex-shrink:0;block-size:.6em;aspect-ratio:18/14;transition:transform .15s ease}body.nav-is-desktop .navigation-main .level-3 a:hover{color:var(--nav-active-color)}body.nav-is-desktop .navigation-main .level-3 a:hover svg{transform:translateX(3px)}body.nav-is-desktop .btn-toggle-submenu{width:24px;height:24px;padding:0;top:9px;right:-6px}body.nav-is-desktop .btn-toggle-submenu::after{background:var(--nav-icon) no-repeat center}body.nav-is-desktop .nav-burger{display:none}@media(forced-colors){.nav-burger .icon-line,.nav-burger .icon-line::before,.nav-burger .icon-line::after{height:0;border:1px rgba(0,0,0,0) solid}.nav-burger.is-active .icon-line{border:0 none}.nav-burger.is-active .icon-line::after{bottom:-1px}.nav-burger__inner{color:currentcolor}}}@layer components{.hero{padding-block-start:0;padding-block-end:0}.hero .wrapper--width-full{position:relative;display:grid;padding-inline:0}.hero{--overlay-hoehe: 72px;--offset: calc(tan(var(--winkel-probahn)) * var(--overlay-hoehe))}.hero .wrapper::before{content:"";position:absolute;top:0;left:0;width:560px;height:var(--overlay-hoehe);background:var(--background-color-extra-light);clip-path:polygon(0 0, 100% 0, calc(100% - var(--offset)) 100%, 0 100%);z-index:4}.hero .wrapper::after{content:"";position:absolute;bottom:0;right:0;width:600px;height:var(--overlay-hoehe);background:var(--background-color-default);clip-path:polygon(var(--offset) 0, 100% 0, 100% 100%, 0 100%);z-index:4}.hero p,.hero h1{color:var(--text-color-extra-light)}@media(max-width: 48rem){.hero .wrapper::before,.hero .wrapper::after{display:none}}.hero__media{grid-area:1/1;position:relative;z-index:0}.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to right, rgba(14, 14, 16, 0.6) 0%, rgba(65, 84, 195, 0) 100%)}.hero__inner{grid-area:1/1;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:var(--section-width-default);margin-inline:auto;padding-inline:var(--section-padding-inline);box-sizing:border-box}.hero .content-headline{max-width:70%}@media(max-width: 75rem){.hero .content-headline{max-width:100%}}}@layer components{.nav-search-icon.text-icon{padding-inline-start:3rem;margin-inline-start:3rem;border-left:1px solid var(--border-color-light)}.nav-search-icon.text-icon .svg_icon_search__path{fill:var(--navigation-color-default)}.nav-search-icon.text-icon:hover .svg_icon_search__path{fill:var(--navigation-color-default-hover)}@media(width < 75rem){.nav-search-icon.text-icon{margin-inline-start:0;border-left:none;padding-inline:3rem;display:flex;align-items:center;block-size:auto}}@media(width < 768px){.nav-search-icon.text-icon{display:none}}}@layer components{.back-to-top{position:fixed;inset-block-end:1rem;inset-inline-end:1rem;z-index:1000;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:2.5em;min-height:2.5em;text-decoration:none;font:inherit;background:var(--button-background-reduced, #eee);color:var(--button-color-reduced, #000);box-shadow:0 4px 16px rgba(0,0,0,.25);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s}.back-to-top[data-visible=true]{opacity:1;transform:none;pointer-events:auto}}@layer components{.a11y{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--navigation-gap-inline-default) var(--navigation-gap-block-default)}.button--a11y{--icon-with-text-gap: var(--icon-padding-inline-regular);padding-inline:var(--button-padding-inline-sm);padding-block:var(--button-padding-block-sm);color:var(--navigation-color-default);font-size:var(--font-size-xs);background:none;border:none}.button--a11y .text-icon__text{font-weight:var(--font-weight-light);text-transform:uppercase}.button--a11y .text-icon__icon{--icon-with-text-inline-size: var(--icon-size-regular);--icon-with-text-block-size: var(--icon-size-regular)}.button--a11y[aria-pressed=true]{color:var(--navigation-color-default-hover)}.button--a11y:not(.is-disabled):hover{color:var(--navigation-color-default-hover)}@media(width < 75rem){.a11y .text-icon__text{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.button--a11y{font-size:var(--font-size-sm)}}}@layer components{.text-icon{--icon-with-text-gap: var(--icon-padding-inline-regular, 0.5rem);display:inline-flex;align-items:center;gap:var(--icon-with-text-gap);min-height:1.5rem}.text-icon__icon{--icon-with-text-inline-size: 1em;--icon-with-text-block-size: 1em;inline-size:var(--icon-with-text-inline-size);block-size:var(--icon-with-text-block-size);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.text-icon__icon.svg-icon svg{width:100%;height:100%;fill:currentcolor}.text-icon__text{line-height:1;word-break:break-word}.text-icon--link{--link-text-icon-color: var(--link-color-default);--link-text-icon-color-hover: var(--link-color-default-hover);color:var(--link-text-icon-color);line-height:1;transition:color .3s ease}.text-icon--link .text-icon__icon{display:inline-grid;transition:transform .3s ease}.text-icon--link .text-icon__icon-bg{transition:fill .3s ease}.text-icon--link:hover,.text-icon--link:active{color:var(--link-text-icon-color-hover)}.text-icon--link:hover .text-icon__icon,.text-icon--link:active .text-icon__icon{transform:translateX(4px) translateY(0);transition:transform .3s ease}.text-icon--link-highlighted{text-transform:uppercase;border-block-end:solid 1px var(--link-color-default-hover);--link-text-icon-color: var(--link-color-default);--link-text-icon-color-hover: var(--link-color-default-hover)}.active .text-icon .text-icon__icon{transform:translateX(4px) translateY(0);transition:transform .3s ease}.active .text-icon .text-icon__icon-bg{fill:var(--link-text-icon-icon-background-hover)}strong.active .text-icon__text{color:var(--link-text-icon-color-hover)}@media(prefers-reduced-motion: reduce){.text-icon,.text-icon__icon,.text-icon__icon-bg,.text-icon__icon-arrow{transition:none !important}}.is-reduce-motion .text-icon,.is-reduce-motion .text-icon__icon,.is-reduce-motion .text-icon__icon-bg,.is-reduce-motion .text-icon__icon-arrow{transition:none !important}}@layer components{.site-footer h2{--min-font-size: var(--font-size-heading-lg-min);--max-font-size: var(--font-size-heading-lg-max);--min-font-size-no-unit: var( --font-size-heading-lg-min-no-unit );--max-font-size-no-unit: var( --font-size-heading-lg-max-no-unit );--slope: calc( // Überschreibt --slope aus _b-typography.scss (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) / (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) );--intercept: calc( // Überschreibt --intercept aus _b-typography.scss var(--min-font-size) - (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) / (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) * var(--fluid-breakpoint-min) );font-size:clamp(var(--min-font-size),var(--intercept) + var(--slope)*100vw,var(--max-font-size));font-weight:var(--font-weight-bold);margin-inline:0;color:inherit}.site-footer>section{margin-block-end:0}.site-footer__top{--footer-lines-heiht: 112px;position:relative;overflow:hidden;padding-block-end:calc(var(--footer-lines-heiht) + 50px)}.site-footer__top::after{content:"";position:absolute;inset-inline:0;bottom:0;height:var(--footer-lines-heiht);background-image:url("img/svg-footer-lines.svg");background-repeat:no-repeat;background-position:center bottom;background-size:cover;pointer-events:none;z-index:0}@media(width < 48rem){.site-footer__top::after{background-position:left bottom}}.site-footer__social svg{width:45px}.site-footer__bottom{padding-block:calc(var(--section-padding-block)/2)}@media(width < 75rem){.site-footer__bottom .flex-group{flex-direction:column;align-items:center}.site-footer__bottom p{text-align:center}}@media(width < 48rem){.site-footer__bottom .flex-group{align-items:start}.site-footer__bottom p{text-align:start}}.site-footer .equal-columns{grid-template-rows:auto 1fr}.site-footer .equal-columns>*{display:grid;grid-template-rows:subgrid;grid-row:span 2}.site-footer .equal-columns>.flow>*:nth-child(2){margin-block-start:calc(var(--flow-spacing-block-default) - var(--equal-columns-gap-rows))}}@layer components{.image--hover{position:relative;overflow:hidden;display:block;border-radius:var(--border-radius-default)}.image--hover img{display:block;transition:transform .6s ease}.image--hover::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:1}.image--hover::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' class='svg_icon_search__path' d='M15.4663 8.69959C15.4663 9.5882 15.2912 10.4681 14.9512 11.2891C14.6111 12.11 14.1127 12.856 13.4843 13.4843C12.856 14.1127 12.11 14.6111 11.2891 14.9512C10.4681 15.2912 9.5882 15.4663 8.69959 15.4663C7.81097 15.4663 6.93106 15.2912 6.11009 14.9512C5.28912 14.6111 4.54317 14.1127 3.91483 13.4843C3.28649 12.856 2.78806 12.11 2.448 11.2891C2.10794 10.4681 1.93292 9.5882 1.93292 8.69959C1.93292 6.90495 2.64583 5.18383 3.91483 3.91483C5.18383 2.64583 6.90495 1.93292 8.69959 1.93292C10.4942 1.93292 12.2153 2.64583 13.4843 3.91483C14.7533 5.18383 15.4663 6.90495 15.4663 8.69959ZM14.1303 15.4972C12.3931 16.8851 10.1903 17.5551 7.97446 17.3697C5.75861 17.1843 3.69787 16.1574 2.21545 14.5001C0.733044 12.8427 -0.0585044 10.6806 0.00337254 8.4579C0.0652495 6.23517 0.975855 4.12049 2.54817 2.54817C4.12049 0.975855 6.23517 0.0652495 8.4579 0.00337254C10.6806 -0.0585044 12.8427 0.733044 14.5001 2.21545C16.1574 3.69787 17.1843 5.75861 17.3697 7.97446C17.5551 10.1903 16.8851 12.3931 15.4972 14.1303L20.984 19.6152C21.0739 19.7051 21.1452 19.8118 21.1938 19.9292C21.2424 20.0466 21.2675 20.1725 21.2675 20.2996C21.2675 20.4267 21.2424 20.5526 21.1938 20.67C21.1452 20.7874 21.0739 20.8941 20.984 20.984C20.8941 21.0739 20.7874 21.1452 20.67 21.1938C20.5526 21.2424 20.4267 21.2675 20.2996 21.2675C20.1725 21.2675 20.0466 21.2424 19.9292 21.1938C19.8118 21.1452 19.7051 21.0739 19.6152 20.984L14.1303 15.4972Z' fill='%23f1f1f1'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:var(--icon-size-lg);opacity:0;transform:scale(0.8);transition:opacity .4s ease,transform .4s ease;pointer-events:none;z-index:2}.image--hover:hover::before{opacity:1}.image--hover:hover::after{opacity:1;transform:scale(1)}.image--hover:hover img{transform:scale(1.05)}@media(prefers-reduced-motion: reduce){.image--hover img,.image--hover::before,.image--hover::after{transition:none;transform:none}}.is-reduce-motion .image--hover img,.is-reduce-motion .image--hover::before,.is-reduce-motion .image--hover::after{transition:none;transform:none}}.top-bar-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--navigation-gap-inline-default) var(--navigation-gap-block-default)}.top-bar-links>a:last-of-type{padding-inline-end:0}.top-bar-links .text-icon{padding-inline:var(--button-padding-inline);padding-block:var(--button-padding-block);font-size:var(--font-size-sm)}.top-bar-links .text-icon .text-icon__text{font-weight:var(--font-weight-light)}@media(width < 75rem){.top-bar-links .text-icon .text-icon__text{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.top-bar-links .text-icon{font-size:var(--font-size-regular)}}@layer components{.badge{--badge-background: var(--button-background-reduced, #f5f5f5);--badge-color: var(--button-color-reduced, #111);--badge-radius: var(--border-radius-default, 12px);--badge-gap: var(--icon-padding-inline-lg, 0.5rem);--badge-padding-inline: var(--button-padding-inline, 1.25rem);--badge-padding-block: var(--button-padding-block, 1rem);--icon-with-text-gap: var( --badge-gap );padding-block:var(--badge-padding-block);padding-inline:var(--badge-padding-inline);border-radius:var(--badge-radius);background:var(--badge-background);color:var(--badge-color);font:inherit;line-height:1}.badge.badge--primary{--badge-background: var(--button-background-reduced);--badge-color: var(--button-color-reduced)}.badge.badge--accent{--badge-background: var(--button-background-accent);--badge-color: var(--button-color-accent)}.badge.badge--only-text-icon{--badge-background: transparent;--badge-color: var(--navigation-color-default)}.badge.badge--center{display:flex;width:fit-content;margin-inline:auto}@media(width < 26.25rem){.badge.badge--center{margin-inline:0}}}@layer components{.block-text-icon__card .block-text-icon__icon{margin-block-end:var(--flow-grid-spacing-block);display:inline-flex}.block-text-icon__card h3{font-size:var(--font-size-heading-regular);font-weight:var(--font-weight-semi-bold);color:initial}}@layer components{.block-text-icon-link__card .block-text-icon-link__icon{margin-block-end:var(--flow-grid-spacing-block);display:inline-flex}.block-text-icon-link__card .block-text-icon-link__icon-background{width:100%;display:inline-flex;justify-content:flex-end}.block-text-icon-link__card:hover .block-text-icon-link__icon-background,.block-text-icon-link__card:hover .content-headline{color:var(--text-color-default-hover)}a.block-text-icon-link__card{text-decoration:none}a.block-text-icon-link__card:hover{text-decoration:none;color:inherit}}@layer components{@media(width > 46rem){.newslist{grid-template-rows:auto auto auto}}@container article-wrapper (width > 46rem){.equal-columns--columns-6{grid-template-columns:repeat(4, 1fr)}.equal-columns--columns-6>.newslist__card:nth-child(-n+2){grid-column:span 4}}@container article-wrapper (width > 70rem){.equal-columns--columns-6{grid-template-columns:repeat(6, 1fr)}.equal-columns--columns-6>.newslist__card:nth-child(-n+2){grid-column:span 3}}.newslist__card{display:grid;grid-template-rows:subgrid;grid-row:span 3;background-color:var(--background-color-default)}a.newslist__link{text-decoration:none;color:var(--text-color-default)}.newslist__card>*:not(:first-child){padding-inline:var(--card-padding-inline, 1rem)}.newslist__card>*:nth-child(2){margin-block-start:calc(-1*var(--equal-columns-gap-rows));padding-block-start:var(--card-padding-block-sm, 1.5rem)}.newslist__card>*:last-child{padding-block-end:var(--card-padding-block, 1.5rem)}.newslist__card>:nth-child(n+3){margin-block-start:calc(var(--flow-grid-spacing-block) - var(--equal-columns-gap-rows))}.newslist__info .newslist__meta{margin:0;padding:0;list-style-type:none;display:flex;font-weight:var(--font-weight-light);font-size:var(--font-size-sm);color:var(--text-color-default);gap:.25em 2rem;flex-flow:wrap}.newslist__info .newslist__divider{padding-inline-end:.9rem}.newslist .text-icon--link{--link-text-icon-color: var(--news-link-color-default);--link-text-icon-color-hover: var(--news-link-color-default-hover);color:var(--news-link-color-default)}.layout_full{margin-block-end:var(--section-padding-block)}.layout_full .info{display:none}.mod_newsreader a{text-decoration:none}.wrapper--width-standard .content-block>*:not(.content-gallery){max-width:var(--section-width-sm);margin-inline:auto}@media(max-width: 26.25rem){.newslist__info .newslist__meta{display:block}.newslist__info .newslist__divider{display:none}}}@layer components{.germany-map__info-card{--arrow-width: 6rem}.germany-map__info-card.arrow-background{display:flex;align-items:stretch}.germany-map__info-card.arrow-background::after{content:"";flex-shrink:0;width:var(--arrow-width);background:var(--map-content-background);clip-path:polygon(0 0, 100% 50%, 0 100%)}.germany-map__info-card .arrow-background__body{background:var(--map-content-background);padding-inline:var(--card-padding-inline);padding-block:var(--card-padding-block);display:grid;align-items:center;min-width:75%}.germany-map__info-card .germany-map__content{grid-area:1/1;opacity:1;visibility:visible;transform:translateY(0);transition:opacity .35s ease,visibility .35s ease,transform .35s ease}.germany-map__info-card .germany-map__content.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(0.5rem)}@media(prefers-reduced-motion: reduce){.germany-map__info-card .germany-map__content{transition:opacity .2s ease,visibility .2s ease}.germany-map__info-card .germany-map__content.is-hidden{transform:none}}.germany-map__svg{max-inline-size:50rem}.germany-map__svg path{fill:var(--map-state-background);opacity:.75;stroke:var(--map-state-stroke);stroke-width:.6px;transition:fill .2s ease;cursor:pointer}.germany-map__svg path:hover,.germany-map__svg path[aria-expanded=true]{fill:var(--map-state-background-hover)}.germany-map__dot{r:var(--map-dot-radius, 3px);fill:#fff;pointer-events:none}.germany-map__dot-pulse{r:var(--map-dot-radius-pulse, 6px);fill:hsla(0,0%,100%,.5);pointer-events:none;transform-box:fill-box;transform-origin:center;animation:map-dot-pulse 2s ease-out infinite}@keyframes map-dot-pulse{0%{transform:scale(1);opacity:1}100%{transform:scale(2.5);opacity:0}}.germany-map__html-tooltip{position:absolute;z-index:100;transform:translateX(-50%);background:#fff;padding:.375rem .625rem;border-radius:4px;font-size:var(--font-size-xs);white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.15)}.germany-map__html-tooltip[hidden]{display:none}#state-sn:hover~.state-sn .germany-map__dot-pulse{animation-play-state:paused}#state-by:hover~.state-by .germany-map__dot-pulse{animation-play-state:paused}#state-rp:hover~.state-rp .germany-map__dot-pulse{animation-play-state:paused}#state-sl:hover~.state-sl .germany-map__dot-pulse{animation-play-state:paused}#state-sh:hover~.state-sh .germany-map__dot-pulse{animation-play-state:paused}#state-ni:hover~.state-ni .germany-map__dot-pulse{animation-play-state:paused}#state-nw:hover~.state-nw .germany-map__dot-pulse{animation-play-state:paused}#state-bw:hover~.state-bw .germany-map__dot-pulse{animation-play-state:paused}#state-bb:hover~.state-bb .germany-map__dot-pulse{animation-play-state:paused}#state-mv:hover~.state-mv .germany-map__dot-pulse{animation-play-state:paused}#state-hb:hover~.state-hb .germany-map__dot-pulse{animation-play-state:paused}#state-hh:hover~.state-hh .germany-map__dot-pulse{animation-play-state:paused}#state-he:hover~.state-he .germany-map__dot-pulse{animation-play-state:paused}#state-th:hover~.state-th .germany-map__dot-pulse{animation-play-state:paused}#state-st:hover~.state-st .germany-map__dot-pulse{animation-play-state:paused}#state-be:hover~.state-be .germany-map__dot-pulse{animation-play-state:paused}@container article-wrapper (width < 46rem){.germany-map__info-card{order:2}.germany-map__map{order:1}}.germany-map__bottom-sheet-handle{display:none}@container article-wrapper (width < 46rem){.germany-map__map{grid-column:1/-1;padding-block-end:3rem}.germany-map__info-card{position:fixed;inset-inline:0;bottom:0;z-index:200;flex-direction:column;border-radius:1rem 1rem 0 0;overflow:hidden;max-block-size:50dvh;box-shadow:0 -2px 16px rgba(0,0,0,.12);transform:translateY(100%);transition:transform .4s cubic-bezier(0.32, 0.72, 0, 1)}.germany-map__info-card.is-map-visible{transform:translateY(calc(100% - 3rem))}.germany-map__info-card.is-map-visible.is-expanded{transform:translateY(0)}.germany-map__info-card.arrow-background::after{display:none}.germany-map__bottom-sheet-handle{display:flex;justify-content:center;align-items:center;block-size:3rem;inline-size:100%;background:var(--map-content-background);border:none;padding:0;flex-shrink:0;cursor:grab;touch-action:pan-y}.germany-map__bottom-sheet-handle::before{content:"";display:block;inline-size:2.5rem;block-size:.25rem;border-radius:999px;background:var(--map-handle-stroke);opacity:.5}.germany-map__info-card .arrow-background__body{min-inline-size:0;overflow-y:auto;flex:1;min-block-size:0}}@media(prefers-reduced-motion: reduce){.germany-map__info-card{transition:none}}}@layer components{.media-overlay,.content-overlay{position:relative;container-type:inline-size}.media-overlay::after,.content-overlay::after{--overlay-width: clamp(60px, 42cqi, 576px);--overlay-hoehe: clamp( 30px, 4.25cqi, 48px );--overlay-offset: calc(tan(var(--winkel-probahn)) * var(--overlay-hoehe));content:"";position:absolute;bottom:-1px;right:0;width:var(--overlay-width);height:var(--overlay-hoehe);background:var(--background-color-default);clip-path:polygon(var(--overlay-offset) 0, 100% 0, 100% 100%, 0 100%);z-index:4}}@layer components{.featured .media-overlay::before,.featured .content-overlay::before{content:"";position:absolute;top:var(--card-padding-block);right:var(--card-padding-inline);width:clamp(20px,5cqi,50px);aspect-ratio:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 66 63' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M49.9053 62.6067C49.3053 62.6067 48.7053 62.4933 48.132 62.2667L32.6786 56.1533L17.2253 62.2667C15.6853 62.8733 13.9719 62.66 12.6319 61.6867C11.2919 60.7133 10.5586 59.1467 10.6586 57.5L11.6986 40.9133L1.10528 28.1067C0.0519482 26.8333 -0.274718 25.1333 0.238615 23.56C0.751949 21.9867 2.01195 20.8 3.61195 20.3933L19.7053 16.26L28.6119 2.22667C29.4986 0.833333 31.012 0 32.6653 0C34.3186 0 35.8386 0.833333 36.7186 2.22667L45.6253 16.2533L61.7186 20.3867C63.3186 20.8 64.5786 21.98 65.0919 23.5533C65.6053 25.1267 65.2786 26.8267 64.2253 28.1L53.632 40.9067L54.6719 57.4933C54.7786 59.1467 54.0386 60.7067 52.6986 61.68C51.8653 62.2867 50.8786 62.6 49.8786 62.6L49.9053 62.6067ZM5.75862 25.3467L15.9519 37.6733C16.7319 38.62 17.1186 39.8133 17.0453 41.0333L16.0386 56.9933L30.9053 51.1067C32.0453 50.6533 33.3053 50.6533 34.4453 51.1067L49.3119 56.9933L48.3053 41.0333C48.2319 39.8067 48.6186 38.6133 49.3986 37.6733L59.5919 25.3467L44.0986 21.3667C42.9119 21.06 41.8919 20.3267 41.2386 19.2867L32.6719 5.78667L24.0986 19.2867C23.4453 20.32 22.4253 21.06 21.2386 21.3667L5.75195 25.3467H5.75862Z' fill='%23FF9933'/%3E%3C/svg%3E%0A");background-position:center;background-size:contain;background-repeat:no-repeat;z-index:5;pointer-events:none}}@layer components{.data-list{margin:0 0 var(--spacing-lg);display:grid;grid-template-columns:minmax(150px, max-content) 1fr;gap:var(--space-400) var(--space-700)}.data-list__term{color:var(--color-accent-secondary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:1.6}.data-list__value{margin:0;color:var(--color-text);font-size:var(--font-size-sm);line-height:1.6;overflow-wrap:anywhere}@media(max-width: 480px){.data-list{grid-template-columns:1fr;gap:var(--space-200)}.data-list__value{margin-bottom:var(--space-400)}}}@layer utilities{.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}[hidden]{display:none}@media(prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}.is-reduce-motion *{animation:none !important;transition:none !important;scroll-behavior:auto !important}}@layer utilities{.u-text-narrow{max-width:65ch}.u-text-narrow--center{max-width:65ch;margin-inline:auto}.u-text-left{text-align:left}.u-text-center{text-align:center}.u-text-right{text-align:right}.u-text-justify{text-align:justify}.u-text-font-size{--min-font-size: var(--font-size-regular-min);--max-font-size: var(--font-size-regular-max);--min-font-size-no-unit: var(--font-size-regular-min-no-unit);--max-font-size-no-unit: var(--font-size-regular-max-no-unit);--slope: calc( (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) / (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) );--intercept: calc( var(--min-font-size) - (var(--max-font-size-no-unit) - var(--min-font-size-no-unit)) / (var(--fluid-breakpoint-max-no-unit) - var(--fluid-breakpoint-min-no-unit)) * var(--fluid-breakpoint-min) );font-size:clamp(var(--min-font-size),var(--intercept) + var(--slope)*100vw,var(--max-font-size))}}@layer overrides{.newslist__card .image--hover{aspect-ratio:2/1;width:100%}.newslist__card .image--hover picture{display:block;width:100%;height:100%}.newslist__card .image--hover img{width:100%;height:100%;object-fit:cover}.hero-carousel__image picture{display:block;width:100%;height:100%}.hero-carousel__image img{width:100%;height:100%;object-fit:cover}.site-header:has(+main .hero-carousel){margin-bottom:0}.site-header:has(+main .hero-carousel)::after{content:none}.block-text-icon-link__card{position:relative}.block-text-icon-link__link::after{content:"";position:absolute;inset:0;z-index:0}.block-text-icon-link__text a{position:relative;z-index:1}:root{--color-primary: var(--brand-color-primary);--color-text: var(--text-color-default);--color-text-secondary: var(--text-color-light);--color-text-muted: var(--text-color-light);--color-text-label: var(--text-color-default);--color-background: var(--background-color-default);--color-background-light: var(--background-color-light);--color-background-alt: var(--background-color-extra-light);--color-border-light: var(--border-color-light);--color-accent: var(--brand-color-primary);--color-accent-secondary: var(--brand-color-secondary);--color-focus: var(--focus-color-default);--color-error: var(--clr-red-500, #d32f2f);--color-azul: var(--clr-blue-400);--color-uranian-blue: #abd5f1;--color-success: #16a34a;--color-success-bg: #f0fdf4;--color-error-bg: #fef2f2;--font-family: var(--font-family-base);--font-size-body: var(--font-size-md, 1rem);--font-weight-semibold: var(--font-weight-semi-bold, 600);--font-weight-black: var(--font-weight-heavy, 900);--font-size-h1: clamp(2.25rem, 4.5vw, 3.5rem);--font-size-h2: clamp(1.75rem, 3.5vw, 2.625rem);--font-size-h3: clamp(1.375rem, 2.5vw, 1.875rem);--font-size-h4: clamp(1.125rem, 1.5vw, 1.25rem);--font-size-h5: 1.0625rem;--font-size-small: 0.875rem;--font-size-nav: 0.9375rem;--letter-spacing-heading: 0.6px;--letter-spacing-subheading: 0.6px;--line-height-tight: 1.15;--line-height-normal: 1.4;--line-height-relaxed: 1.75;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-section: 120px;--spacing-section-inner: 100px;--spacing-nav-gap: 40px;--spacing-paragraph-gap: 40px;--spacing-card-gap: clamp(24px, 3vw, 40px);--spacing-subheadline-gap: 25px;--border-radius-card: 0.5rem;--border-radius-md: 0.5rem;--container-max-width: var(--wrapper-max-width, 75rem)}}.top-bar-links>a:last-of-type:not(:last-child){padding-inline-end:var(--button-padding-inline)}.top-bar-links>:last-child{padding-inline-end:0}.germany-map__svg path.germany-map__state--internal{stroke-width:1.4px;stroke-dasharray:4 3}.germany-map__svg path.is-lv-hover,.germany-map__svg path.is-lv-active{fill:var(--map-state-background-hover)}.germany-map__svg .germany-map__inner-border path{fill:none;opacity:1;pointer-events:none}.germany-map__svg .germany-map__inner-border-erase{stroke:color-mix(in srgb, var(--map-state-background) 75%, var(--background-color-light) 25%);stroke-width:2.4px}.germany-map__svg .germany-map__inner-border-dash{stroke:var(--map-state-stroke);stroke-width:1.4px;stroke-dasharray:4 3}.germany-map__svg:has(#state-hh.is-lv-hover,#state-hh.is-lv-active) .germany-map__inner-border[data-pair=hh-sh] .germany-map__inner-border-erase,.germany-map__svg:has(#state-st.is-lv-hover,#state-st.is-lv-active) .germany-map__inner-border[data-pair=sn-st] .germany-map__inner-border-erase{stroke:color-mix(in srgb, var(--map-state-background-hover) 75%, var(--background-color-light) 25%)}@layer legacy, settings, generic, base, layout, components, utilities, overrides/*# sourceMappingURL=main.css.map */
/* Component imports — landen alle im `legacy`-Layer (niedrigste Prioritaet).
So gewinnen die Webdesign-Components aus main.css bei Selektor-Kollisionen,
ohne dass wir hier Spezifitaet hochschrauben muessten. Schrittweise Migration
einzelner Komponenten nach main.scss erfolgt separat. */
@layer legacy {
/* === /static/css/components/typography.e0ac25b722da.css === */
/* Typography Scale - Heading utility classes and body text helpers.
Bare `h1`-`h5` element selectors removed: heading typography now flows
from main.css (compiled from _b-typography.scss / _c-headline-subheadline.scss),
so the design's fluid clamp() sizes win sitewide. Utility classes
(.text-h1 etc.) remain for legacy usage in showcase pages. */
.text-h1 {
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: var(--line-height-tight);
margin: 0;
}
.text-h2 {
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: 1.2;
letter-spacing: var(--letter-spacing-heading);
margin: 0;
}
.text-h3 {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: 1.3;
margin: 0;
}
.text-h4 {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
line-height: 1.4;
letter-spacing: var(--letter-spacing-heading);
margin: 0;
}
.text-h5 {
font-size: var(--font-size-h5);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
line-height: 1.4;
margin: 0;
}
.text-h6 {
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: 1.5;
margin: 0;
}
/* Body text */
.text-body {
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
color: var(--color-text);
line-height: var(--line-height-relaxed);
}
/* Small text / caption */
.text-small {
font-size: var(--font-size-small);
font-weight: var(--font-weight-regular);
color: var(--color-text-muted);
line-height: 1.5;
}
}
/* buttons.css removed — sitewide button system now lives in main.css
(compiled from webdesign _b-buttons.scss). See spec
docs/superpowers/specs/2026-05-08-hero-content-typography-buttons-design.md. */
@layer legacy {
/* === /static/css/components/links.e98e58dcee17.css === */
/* Link Component
BEM naming: .link, .link--read-more, .link--download, .link--submenu, .link--quicklink
Various styled link variants with icons
*/
/* Base Link */
.link {
display: inline-flex;
align-items: center;
gap: var(--space-200);
color: var(--color-text);
text-decoration: none;
font-weight: var(--font-weight-regular);
transition: color 0.2s ease, text-decoration 0.2s ease;
}
.link:hover {
text-decoration: underline;
}
.link:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.link:focus:not(:focus-visible) {
outline: none;
}
.link:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
/* Read More Link (mehr lesen) - Coral with right arrow */
.link--read-more {
color: var(--color-accent);
font-weight: var(--font-weight-regular);
}
.link--read-more:hover {
color: #e85a42; /* Slightly darker coral */
}
.link--read-more::after {
content: "\2192"; /* Right arrow Unicode character */
display: inline-block;
margin-left: var(--space-200);
transition: transform 0.2s ease;
}
.link--read-more:hover::after {
transform: translateX(4px);
}
/* Download Link - Navy with download icon */
.link--download {
color: var(--color-accent-secondary);
}
.link--download:hover {
color: #222557; /* Slightly darker navy */
}
.link--download::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-right: var(--space-200);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
/* Submenu Link - Navy with right arrow before */
.link--submenu {
color: var(--color-primary);
}
.link--submenu:hover {
color: #222557; /* Slightly darker navy */
}
.link--submenu::before {
content: "\2192"; /* Right arrow Unicode character */
display: inline-block;
margin-right: var(--space-200);
transition: transform 0.2s ease;
}
.link--submenu:hover::before {
transform: translateX(4px);
}
/* Quicklink - Navy with configurable icon via CSS custom property */
.link--quicklink {
color: var(--color-primary);
--quicklink-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.link--quicklink:hover {
color: #222557; /* Slightly darker navy */
}
.link--quicklink::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-right: var(--space-200);
background-image: var(--quicklink-icon);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
/* Quicklink Icon Variants - use these to customize the icon */
.link--quicklink-user {
--quicklink-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.link--quicklink-grid {
--quicklink-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
}
.link--quicklink-news {
--quicklink-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M18 14h-8'/%3E%3Cpath d='M15 18h-5'/%3E%3Cpath d='M10 6h8v4h-8V6Z'/%3E%3C/svg%3E");
}
.link--quicklink-search {
--quicklink-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
/* External Link - with external link icon */
.link--external::after {
content: "";
display: inline-block;
width: 0.75em;
height: 0.75em;
margin-left: var(--space-200);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
/* Muted Link Variant */
.link--muted {
color: var(--color-text-muted);
}
.link--muted:hover {
color: var(--color-text);
}
/* Inverted Link (for dark backgrounds) */
.link--inverted {
color: var(--color-background);
}
.link--inverted:hover {
color: var(--color-background-alt);
}
.link--inverted::before {
filter: brightness(0) invert(1);
}
.link--inverted::after {
filter: brightness(0) invert(1);
}
}
/* forms.css removed — Formular-Komponente lebt jetzt in main.css
(kompiliert aus scss/50-components/_c-form-field.scss). Spec:
docs/superpowers/specs/2026-07-20-mitgliederbereich-styling-design.md */
@layer legacy {
/* === /static/css/components/header.cec600954843.css === */
/* Header Component
BEM naming: .header, .header__logo, .header__nav, .header__utility, .header__mobile-toggle
Two-row layout: utility bar on top, main navigation below
*/
.header {
position: sticky;
top: 0;
z-index: 100;
background-color: var(--color-background);
}
/* ========================================
Utility Bar (Top Row)
======================================== */
.header__utility-bar {
display: none;
background-color: var(--color-background-light);
border-bottom: 1px solid var(--color-background-light);
}
.header__utility-bar-container {
display: flex;
justify-content: flex-end;
padding-top: var(--spacing-xs);
padding-bottom: var(--spacing-xs);
}
.header__utility {
flex-shrink: 0;
}
.header__utility-list {
display: flex;
align-items: center;
gap: var(--spacing-nav-gap);
list-style: none;
margin: 0;
padding: 0;
}
.header__utility-item {
margin: 0;
}
.header__utility-link {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) 0;
color: var(--color-text);
text-decoration: none;
font-size: var(--font-size-body);
font-weight: var(--font-weight-light);
transition: color 0.2s ease;
}
.header__utility-link:hover {
color: var(--color-accent);
}
.header__utility-link:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.header__utility-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
}
/* ========================================
Main Navigation Bar (Bottom Row)
======================================== */
.header__main-bar {
position: relative;
background-color: var(--color-background-light);
border-bottom: 1px solid var(--color-background-light);
}
/* Header Notch ("Keil") - Angled wedge below header on all pages.
Matches webdesign _c-hero.scss top wedge: 560px wide, 72px tall,
30deg slant via tan(30deg) * 72px offset, extra-light token.
`margin-top: -1px` closes a 1-pixel sub-pixel gap that appears between
.site-header (height ends on a fractional pixel via padding-block tokens)
and the notch top. Without it the underlying content (orange hero on the
home page; white body elsewhere) shows through the gap as a faint strip. */
.header-notch {
width: 560px;
height: 72px;
margin-top: -1px;
background-color: var(--color-background-alt);
clip-path: polygon(0 0, 100% 0, calc(100% - tan(30deg) * 72px) 100%, 0 100%);
pointer-events: none;
position: relative;
z-index: 1;
display: none;
}
@media (min-width: 769px) {
.header-notch {
display: block;
}
/* On pages with a hero section, notch overlaps into the hero */
.home-page .header-notch,
.membership .header-notch,
.kummerkasten .header-notch,
.spenden .header-notch {
margin-bottom: -72px;
}
}
.header__container {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding-top: var(--spacing-sm);
padding-bottom: var(--spacing-sm);
gap: var(--spacing-md);
}
/* Logo */
.header__logo {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
}
.header__logo:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.header__logo-image {
height: 48px;
width: auto;
}
/* Main Navigation */
.header__nav {
display: none;
flex: 1;
min-width: 0;
justify-content: flex-end;
}
.header__nav-list {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 40px);
list-style: none;
margin: 0;
padding: 0;
}
.header__nav-item {
margin: 0;
}
.header__nav-link {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) 0;
color: var(--color-text);
text-decoration: none;
font-size: var(--font-size-h5);
font-weight: var(--font-weight-regular);
transition: color 0.2s ease;
white-space: nowrap;
}
.header__nav-link:hover {
color: var(--color-accent);
}
.header__nav-link:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
/* Dropdown indicator for nav items with submenus */
.header__nav-link--has-dropdown {
/* Layout handled by flex parent */
}
.header__nav-dropdown-icon {
flex-shrink: 0;
opacity: 0.7;
}
.header__nav-link:hover .header__nav-dropdown-icon {
opacity: 1;
}
/* ========================================
Mobile Menu Toggle (hamburger)
======================================== */
.header__mobile-toggle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: 44px;
height: 44px;
padding: var(--spacing-sm);
background: transparent;
border: none;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.header__mobile-toggle:hover {
background-color: var(--color-background-light);
}
.header__mobile-toggle:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.header__mobile-toggle-bar {
display: block;
width: 24px;
height: 2px;
background-color: var(--color-text);
border-radius: 1px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Mobile toggle active state (when menu is open) */
.header__mobile-toggle[aria-expanded="true"] .header__mobile-toggle-bar:nth-child(1) {
transform: rotate(45deg) translate(4px, 4px);
}
.header__mobile-toggle[aria-expanded="true"] .header__mobile-toggle-bar:nth-child(2) {
opacity: 0;
}
.header__mobile-toggle[aria-expanded="true"] .header__mobile-toggle-bar:nth-child(3) {
transform: rotate(-45deg) translate(4px, -4px);
}
/* ========================================
Responsive Breakpoints
======================================== */
/* Desktop breakpoint - show full two-row layout */
@media (min-width: 1024px) {
.header__utility-bar {
display: block;
}
.header__nav {
display: flex;
}
.header__mobile-toggle {
display: none;
}
.header__logo-image {
height: 80px;
}
}
/* ========================================
Search Bar
======================================== */
/* Search toggle button - styled as utility link */
.header__search-toggle {
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
}
/* Search container - slides down below utility bar */
.header__search-container {
background-color: var(--color-background);
border-bottom: 1px solid var(--color-background-light);
padding: var(--spacing-md) 0;
}
.header__search-form {
display: flex;
align-items: center;
gap: var(--spacing-sm);
max-width: 600px;
margin: 0 auto;
}
.header__search-input {
flex: 1;
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-body);
font-family: inherit;
color: var(--color-text);
background-color: var(--color-background-light);
border: 2px solid transparent;
border-radius: 4px;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.header__search-input::placeholder {
color: var(--color-text-muted);
}
.header__search-input:focus {
outline: none;
border-color: var(--color-focus);
background-color: var(--color-background);
}
.header__search-submit {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: var(--spacing-sm);
background-color: var(--color-accent);
border: none;
border-radius: 4px;
cursor: pointer;
color: var(--color-background);
transition: background-color 0.2s ease;
}
.header__search-submit:hover {
background-color: var(--color-primary);
}
.header__search-submit:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
/* Visually hidden helper class for accessible labels */
.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;
}
/* Mobile: full-width search on small screens */
@media (max-width: 767px) {
.header__search-form {
max-width: 100%;
}
}
/* Desktop: constrained width */
@media (min-width: 768px) {
.header__search-form {
max-width: 500px;
margin-left: auto;
margin-right: 0;
}
}
/* ========================================
Dropdown Mega Menu
======================================== */
.header__nav-item {
position: static;
}
.header__dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--color-background-light);
border-top: 1px solid var(--color-text-secondary);
z-index: 50;
}
.header__dropdown-inner {
display: flex;
gap: 20px;
padding-top: var(--spacing-subheadline-gap);
padding-bottom: var(--spacing-subheadline-gap);
}
.header__dropdown-column {
flex: 1;
}
.header__dropdown-column--wide {
flex: 2;
}
.header__dropdown-category {
font-size: var(--font-size-small);
font-weight: var(--font-weight-semibold);
color: var(--color-text-label);
border-bottom: 1px solid var(--color-text-label);
padding-bottom: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.header__dropdown-links {
list-style: none;
margin: 0;
padding: 0;
}
.header__dropdown-link {
display: flex;
align-items: baseline;
gap: var(--spacing-sm);
padding: 2px 0;
color: var(--color-text);
text-decoration: none;
font-size: var(--font-size-small);
}
.header__dropdown-link::before {
content: '\2192';
}
.header__dropdown-link:hover {
color: var(--color-accent);
}
.header__dropdown-link:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.header__dropdown-subcolumns {
display: flex;
gap: 20px;
}
.header__dropdown-subcolumns > * {
flex: 1;
}
.header__nav-dropdown-icon {
transition: transform 0.2s ease;
}
.header__nav-link[aria-expanded="true"] .header__nav-dropdown-icon {
transform: rotate(180deg);
}
/* ========================================
Mobile Menu Overlay
======================================== */
.header__mobile-menu {
position: fixed;
inset: 0;
z-index: 200;
background-color: var(--color-azul);
overflow-y: auto;
display: flex;
flex-direction: column;
padding: 20px;
}
/* Slide-in transitions (from right) */
.header__mobile-menu--enter {
transition: transform 0.3s ease, opacity 0.3s ease;
}
.header__mobile-menu--enter-start {
transform: translateX(100%);
opacity: 0;
}
.header__mobile-menu--enter-end {
transform: translateX(0);
opacity: 1;
}
.header__mobile-menu--leave {
transition: transform 0.2s ease, opacity 0.2s ease;
}
.header__mobile-menu--leave-start {
transform: translateX(0);
opacity: 1;
}
.header__mobile-menu--leave-end {
transform: translateX(100%);
opacity: 0;
}
/* Mobile menu header */
.header__mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
}
.header__mobile-menu-logo {
display: flex;
align-items: center;
text-decoration: none;
}
.header__mobile-menu-logo:focus {
outline: 2px solid var(--color-background);
outline-offset: 2px;
}
.header__mobile-menu-logo-image {
height: 37px;
width: auto;
}
.header__mobile-menu-close {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: transparent;
border: none;
color: var(--color-background);
cursor: pointer;
}
.header__mobile-menu-close:focus {
outline: 2px solid var(--color-background);
outline-offset: 2px;
}
/* Divider */
.header__mobile-menu-divider {
border: none;
border-top: 1px solid var(--color-background-alt);
margin: 10px 0 30px;
}
/* Mobile primary navigation */
.header__mobile-nav {
flex: 1;
}
.header__mobile-nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.header__mobile-nav-item {
margin: 0;
}
.header__mobile-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0;
background: transparent;
border: none;
color: var(--color-background-alt);
font-family: var(--font-family);
font-size: 20px;
font-weight: var(--font-weight-semibold);
line-height: 32px;
text-decoration: none;
cursor: pointer;
text-align: left;
}
.header__mobile-nav-link:focus {
outline: 2px solid var(--color-background);
outline-offset: 2px;
}
/* Toggle icon ("+" that rotates to "×") */
.header__mobile-nav-toggle-icon {
flex-shrink: 0;
font-size: 20px;
line-height: 1;
transition: transform 0.2s ease;
}
.header__mobile-nav-toggle-icon--open {
transform: rotate(45deg);
}
/* Submenu panel */
.header__mobile-submenu {
position: relative;
background-color: var(--color-uranian-blue);
padding: 10px 20px;
margin-top: 10px;
}
.header__mobile-submenu-arrow {
position: absolute;
top: -10px;
left: 16px;
width: 20px;
height: 20px;
background-color: var(--color-uranian-blue);
transform: rotate(45deg);
}
.header__mobile-submenu-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 5px;
position: relative;
z-index: 1;
}
.header__mobile-submenu-link {
display: block;
color: var(--color-text);
font-size: 16px;
font-weight: var(--font-weight-regular);
line-height: 32px;
text-decoration: none;
}
.header__mobile-submenu-link:hover {
text-decoration: underline;
}
.header__mobile-submenu-link:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
/* Secondary utility links */
.header__mobile-secondary {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 50px;
padding: 5px 0;
}
.header__mobile-secondary-link {
display: flex;
align-items: center;
gap: 10px;
color: var(--color-background-alt);
font-size: 20px;
font-weight: var(--font-weight-light);
line-height: 32px;
text-decoration: none;
}
.header__mobile-secondary-link:focus {
outline: 2px solid var(--color-background);
outline-offset: 2px;
}
.header__mobile-secondary-icon {
flex-shrink: 0;
width: 30px;
height: 30px;
}
/* Hide mobile menu on desktop */
@media (min-width: 1024px) {
.header__mobile-menu {
display: none !important;
}
}
}
/* footer.css removed — site footer now lives entirely in main.css (compiled from
webdesign _c-footer.scss): site-footer__top/__bottom, rail-line ::after overlay,
dark/inverted bottom bar via .background-color--dark (which now carries the
inverted foreground tokens itself; the former .content--color-light was removed). */
@layer legacy {
/* === /static/css/components/cards.b50690bd0c8b.css === */
/* Article Cards Component
BEM naming: .card--vertical, .card--text-only
Card variants for displaying article content. Bare .card and .card--border
are owned by the webdesign system (_b-cards.scss) — do NOT style them here,
or the styles will leak into webdesign-primitive cards (e.g. the Impact
section's transparent bordered cards).
*/
/* Base Card — legacy variants only */
.card--vertical,
.card--text-only {
background-color: var(--color-background);
border-radius: var(--border-radius-card);
overflow: hidden;
transition: box-shadow 0.2s ease;
}
.card--vertical:hover,
.card--text-only:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Card Image — figure.card__image als erstes Card-Kind (Webdesign-Spec _b-cards.scss).
Die figure ist der Spacing-Anker, das innere ![]()
traegt das visuelle Bild-Layout.
Spacing/Border-Radius/Background kommen aus dem Webdesign-Layer; hier nur die
article-card-spezifische Bildgeometrie. */
.card--vertical .card__image,
.card--text-only .card__image {
margin: 0;
overflow: hidden;
line-height: 0;
}
.card--vertical .card__image a,
.card--text-only .card__image a {
display: block;
}
.card--vertical .card__image img,
.card--text-only .card__image img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
/* Card Content Area — legacy variants only.
Webdesign cards (e.g. block-text-icon__card) use .card__content as a
structural wrapper without padding; padding lives on .card--border itself. */
.card--vertical .card__content,
.card--text-only .card__content {
padding: 28px;
}
/* Category Tag - Legacy, now integrated in metadata */
.card__tag {
display: inline-block;
padding: 0;
background-color: transparent;
color: var(--color-text-muted);
font-size: var(--font-size-small);
font-weight: var(--font-weight-regular);
text-transform: none;
letter-spacing: normal;
margin-bottom: var(--space-200);
}
/* Card Title */
.card__title {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
line-height: 1.3;
letter-spacing: var(--letter-spacing-subheading);
margin: 0 0 var(--space-300) 0;
}
.card__title a {
color: inherit;
text-decoration: none;
}
.card__title a:hover {
text-decoration: underline;
}
.card__title a:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.card__title a:focus:not(:focus-visible) {
outline: none;
}
.card__title a:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
/* Card Excerpt */
.card__excerpt {
font-size: var(--font-size-h5);
font-weight: var(--font-weight-regular);
color: var(--color-text);
line-height: 1.6;
margin: 0;
}
/* Line clamp variant for truncating excerpt */
.card__excerpt--truncate {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Card Metadata (date, category, location) */
.card__meta {
font-size: var(--font-size-small);
font-weight: var(--font-weight-regular);
color: var(--color-text-muted);
line-height: 1.5;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-500);
margin-bottom: var(--space-500);
}
/* Meta item with icon */
.card__meta-item {
display: inline-flex;
align-items: center;
gap: var(--space-200);
}
/* Meta icon styling */
.card__meta-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--color-text-muted);
}
/* Card Link Area */
.card__link {
margin-top: var(--space-500);
}
/* ==========================================================================
Vertical Card Variant — Bildgeometrie
Image full width on top with 16/9 aspect ratio
Display/Padding/Background sind in der oberen Section gebuendelt.
========================================================================== */
.card--vertical .card__image,
.card--vertical .card__image img {
width: 100%;
}
.card--vertical .card__image img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* ==========================================================================
Card Grid Layouts
========================================================================== */
.card-grid {
display: grid;
gap: var(--space-700);
}
/* Two column grid */
.card-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
/* Three column grid */
.card-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
/* Four column grid */
.card-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
/* Responsive grid adjustments */
@media (max-width: 1023px) {
.card-grid--4 {
grid-template-columns: repeat(2, 1fr);
}
.card-grid--3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.card-grid--4,
.card-grid--3,
.card-grid--2 {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Text-Only Card Variant — eliminiert padding im Content (kein Bild oben).
Display/Background/Border-Radius kommen aus der oberen Section.
========================================================================== */
.card--text-only .card__content {
padding: 0;
}
}
@layer legacy {
/* === /static/css/components/content-blocks.de5aae201803.css === */
/* Content Blocks Component
BEM naming: .info-box, .pricing-card, .quote-block, .icon-block
Components for displaying informational content in various layouts
*/
/* ===========================================================================
Info Box - Icon left, content right, light background
=========================================================================== */
.info-box {
display: flex;
align-items: flex-start;
gap: var(--space-500);
padding: var(--space-700);
background-color: var(--color-background-alt);
border-radius: 4px;
}
.info-box__icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
}
.info-box__icon svg,
.info-box__icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.info-box__content {
flex: 1;
min-width: 0;
}
.info-box__heading {
font-size: var(--font-size-h5);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin: 0 0 var(--space-200);
line-height: 1.4;
}
.info-box__text {
font-size: var(--font-size-body);
color: var(--color-text);
line-height: 1.6;
margin: 0;
}
/* Info Box Variants */
.info-box--accent {
border-left: 4px solid var(--color-accent);
}
.info-box--highlight {
background-color: var(--color-background);
border: 1px solid var(--color-background-alt);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* ===========================================================================
Pricing Card - Left-aligned layout with prominent price (Figma)
=========================================================================== */
.pricing-card {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
/* Nur inline padden: die Webdesign-.card-Basis gibt erstem/letztem Kind
bereits padding-block (48px) — zusammen mit eigenem Block-Padding
entstuende doppelter Leerraum. Figma zeigt ~48px ueber dem Titel. */
padding: 0 var(--space-700);
background-color: var(--color-background);
}
.pricing-card__header {
margin-bottom: var(--space-600);
}
.pricing-card__title {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-bold);
color: var(--color-text);
margin: 0;
}
.pricing-card__price-row {
display: flex;
align-items: baseline;
gap: var(--space-300);
margin: 0 0 var(--space-500);
}
.pricing-card__price {
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
color: var(--color-text);
line-height: 1;
}
.pricing-card__price--text {
font-size: var(--font-size-body);
line-height: 1.6;
}
.pricing-card__price-unit {
font-size: var(--font-size-small);
color: var(--color-text);
}
.pricing-card__description {
font-size: var(--font-size-small);
color: var(--color-text-secondary);
line-height: 1.6;
margin: 0 0 var(--space-600);
}
.pricing-card__features {
list-style: none;
padding: 0;
margin: 0 0 var(--space-700);
text-align: left;
}
.pricing-card__feature {
display: flex;
align-items: flex-start;
gap: var(--space-300);
padding: var(--space-300) 0;
font-size: var(--font-size-body);
color: var(--color-text);
}
.pricing-card__feature::before {
content: "\2713";
flex-shrink: 0;
color: var(--color-accent);
font-weight: var(--font-weight-bold);
}
.pricing-card__cta {
margin-top: auto;
}
/* Pricing Card Highlighted Variant */
.pricing-card--highlighted {
border: 2px solid var(--color-accent);
position: relative;
}
.pricing-card--highlighted::before {
content: attr(data-badge);
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
padding: var(--space-200) var(--space-500);
background-color: var(--color-accent);
color: var(--color-background);
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
border-radius: 4px;
}
/* ===========================================================================
Quote Block - Large italic text with navy left border
=========================================================================== */
.quote-block {
padding: var(--space-700);
padding-left: var(--space-800);
border-left: 4px solid var(--color-primary);
background-color: var(--color-background-alt);
margin: var(--space-700) 0;
}
.quote-block__text {
font-size: var(--font-size-h4);
font-style: italic;
color: var(--color-text);
line-height: 1.6;
margin: 0 0 var(--space-500);
}
.quote-block__attribution {
font-size: var(--font-size-body);
font-style: normal;
color: var(--color-text-muted);
margin: 0;
}
.quote-block__attribution::before {
content: "\2014\00a0";
}
/* Quote Block Variants */
.quote-block--large {
padding: var(--space-800);
padding-left: var(--space-900);
}
.quote-block--large .quote-block__text {
font-size: var(--font-size-h3);
}
.quote-block--accent {
border-left-color: var(--color-accent);
}
.quote-block--plain {
background-color: transparent;
}
/* ===========================================================================
Icon Block - Icon centered above heading and description (for feature grids)
=========================================================================== */
.icon-block {
text-align: center;
padding: var(--space-700);
}
.icon-block__icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin: 0 auto var(--space-500);
color: var(--color-accent);
}
.icon-block__icon svg,
.icon-block__icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.icon-block__heading {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin: 0 0 var(--space-300);
line-height: 1.4;
}
.icon-block__description {
font-size: var(--font-size-body);
color: var(--color-text);
line-height: 1.6;
margin: 0;
}
.icon-block__link {
margin-top: var(--space-500);
}
/* Icon Block Variants */
.icon-block--small {
padding: var(--space-500);
}
.icon-block--small .icon-block__icon {
width: 48px;
height: 48px;
margin-bottom: var(--space-300);
}
.icon-block--small .icon-block__heading {
font-size: var(--font-size-h5);
}
.icon-block--large {
padding: var(--space-800);
}
.icon-block--large .icon-block__icon {
width: 80px;
height: 80px;
margin-bottom: var(--space-700);
}
.icon-block--large .icon-block__heading {
font-size: var(--font-size-h3);
}
/* Icon Block with Background */
.icon-block--bg {
background-color: var(--color-background-alt);
border-radius: 4px;
}
/* Icon Block Grid Layout Helper */
.icon-block-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-700);
}
/* ===========================================================================
Responsive Adjustments
=========================================================================== */
@media (max-width: 767px) {
/* Info Box: maintain side-by-side on mobile, adjust sizing */
.info-box {
padding: var(--space-500);
}
.info-box__icon {
width: 32px;
height: 32px;
}
.info-box__heading {
font-size: var(--font-size-body);
}
/* Pricing Card */
.pricing-card {
padding: var(--space-700);
}
/* Quote Block */
.quote-block {
padding: var(--space-500);
padding-left: var(--space-700);
}
.quote-block--large .quote-block__text {
font-size: var(--font-size-h4);
}
/* Icon Block Grid: 2 columns on tablet, 1 column on small mobile */
.icon-block-grid {
grid-template-columns: repeat(2, 1fr);
}
.icon-block__icon {
width: 48px;
height: 48px;
}
}
@media (max-width: 479px) {
/* Icon Block Grid: single column on small mobile */
.icon-block-grid {
grid-template-columns: 1fr;
}
}
}
@layer legacy {
/* === /static/css/components/tables.4249ce3a16be.css === */
/* Table Styling Component
BEM naming: .table, .table--striped, .table--bordered, .table__wrapper
Responsive tables with zebra striping and bordered variants
*/
/* ==========================================================================
Table Wrapper
Enables horizontal scroll on mobile for wide tables
========================================================================== */
.table__wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ==========================================================================
Base Table
========================================================================== */
.table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: var(--font-size-body);
line-height: 1.5;
color: var(--color-text);
}
/* Table Header */
.table thead {
background-color: var(--color-background-alt);
}
.table th {
font-weight: var(--font-weight-bold);
color: var(--color-text);
padding: var(--space-500);
text-align: left;
vertical-align: middle;
white-space: nowrap;
}
/* Table Body Cells */
.table td {
padding: var(--space-500);
vertical-align: top;
border-bottom: 1px solid var(--color-background-alt);
}
/* Last row has no bottom border for cleaner look */
.table tbody tr:last-child td {
border-bottom: none;
}
/* Table Caption (if used) */
.table caption {
font-size: var(--font-size-small);
color: var(--color-text-muted);
padding: var(--space-300) 0;
text-align: left;
caption-side: bottom;
}
/* ==========================================================================
Zebra Stripe Variant
Alternating row colors for improved readability
========================================================================== */
.table--striped tbody tr:nth-child(even) {
background-color: var(--color-background-alt);
}
.table--striped tbody tr:nth-child(odd) {
background-color: var(--color-background);
}
/* Hover state for striped tables */
.table--striped tbody tr:hover {
background-color: rgba(26, 54, 93, 0.1);
}
/* ==========================================================================
Bordered Variant
Visible borders between all cells
========================================================================== */
.table--bordered {
border: 1px solid var(--color-text-muted);
}
.table--bordered th,
.table--bordered td {
border: 1px solid var(--color-text-muted);
}
/* Override default bottom border behavior for bordered tables */
.table--bordered tbody tr:last-child td {
border-bottom: 1px solid var(--color-text-muted);
}
/* Bordered tables have no header background - all rows equal */
.table--bordered thead {
background-color: transparent;
}
.table--bordered th {
background-color: transparent;
}
/* ==========================================================================
Combined Variants
Striped and bordered together
========================================================================== */
.table--striped.table--bordered tbody tr:nth-child(even) {
background-color: var(--color-background-alt);
}
.table--striped.table--bordered tbody tr:nth-child(odd) {
background-color: var(--color-background);
}
/* ==========================================================================
Compact Table Variant
Reduced padding for dense data
========================================================================== */
.table--compact th,
.table--compact td {
padding: var(--space-300);
}
/* ==========================================================================
Responsive Adjustments
========================================================================== */
@media (max-width: 767px) {
.table th,
.table td {
padding: var(--space-300);
font-size: var(--font-size-small);
}
.table--compact th,
.table--compact td {
padding: var(--space-200);
font-size: 0.8125rem;
}
}
/* ==========================================================================
Accessibility
Focus states for interactive tables
========================================================================== */
.table a:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.table a:focus:not(:focus-visible) {
outline: none;
}
.table a:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
}
@layer legacy {
/* === /static/css/components/accordion.75f4eab2ce2f.css === */
/* Accordion Component Styles
Collapsible sections with header and expandable content.
Uses Alpine.js for interactivity and ARIA for accessibility.
*/
/* Accordion Wrapper */
.accordion {
border: 1px solid var(--color-background-alt);
border-radius: 4px;
overflow: hidden;
}
/* Accordion Item */
.accordion__item {
border-bottom: 1px solid var(--color-background-alt);
}
.accordion__item:last-child {
border-bottom: none;
}
/* Accordion Header (clickable trigger) */
.accordion__header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 44px;
padding: var(--space-500);
background-color: var(--color-background);
border: none;
cursor: pointer;
text-align: left;
font-family: var(--font-family);
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
color: var(--color-text);
transition: background-color 0.2s ease;
}
.accordion__header:hover {
background-color: var(--color-background-alt);
}
.accordion__header:focus {
outline: 2px solid var(--color-focus);
outline-offset: -2px;
}
.accordion__header:focus:not(:focus-visible) {
outline: none;
}
.accordion__header:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: -2px;
}
/* Accordion Title */
.accordion__title {
flex: 1;
margin: 0;
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
color: var(--color-text);
}
/* Accordion Icon (plus/minus toggle) */
.accordion__icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-left: var(--space-500);
flex-shrink: 0;
transition: transform 0.3s ease;
}
.accordion__icon svg {
width: 20px;
height: 20px;
stroke: var(--color-text);
stroke-width: 2;
fill: none;
}
/* Rotate icon when expanded */
.accordion__header[aria-expanded="true"] .accordion__icon {
transform: rotate(45deg);
}
/* Accordion Content */
.accordion__content {
padding: 0 var(--space-500) var(--space-500);
color: var(--color-text);
line-height: 1.6;
}
.accordion__content p {
margin: 0 0 var(--space-500);
}
.accordion__content p:last-child {
margin-bottom: 0;
}
/* Content inner wrapper for proper spacing */
.accordion__inner {
padding-top: var(--space-300);
border-top: 1px solid var(--color-background-alt);
}
/* Variant: No border (for embedding in other components) */
.accordion--borderless {
border: none;
}
.accordion--borderless .accordion__item {
border-bottom: none;
}
.accordion--borderless .accordion__header {
background-color: transparent;
}
/* Variant: Highlighted (light gray background) */
.accordion--highlighted .accordion__item {
background-color: var(--color-background-alt);
}
.accordion--highlighted .accordion__header:hover {
background-color: #ebebeb;
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.accordion__header,
.accordion__icon {
transition: none;
}
}
}
@layer legacy {
/* === /static/css/components/hero-carousel.3e947ddce96b.css === */
/* Hero Carousel Component
BEM naming: .hero-carousel, .hero-carousel__slide, .hero-carousel__image, etc.
Full-width hero section with rotating slides for homepage
Uses Alpine.js for state management
Design: Text directly on image (no container), white italic heading, dual CTAs
*/
/* Carousel Wrapper - aspect-ratio mirrors webdesign hero source set
per breakpoint (see _c-hero + index.html in webdesign repo). Largest first;
smallest matching max-width wins via source order.
padding-block: 0 neutralizes the global `section` padding so the
aspect-ratio drives the border-box height (matches _c-hero.scss). */
.hero-carousel {
position: relative;
width: 100%;
aspect-ratio: 2560 / 1100; /* default: viewport > 1600px */
overflow: hidden;
padding-block: 0;
background-color: var(--color-primary);
}
@media (max-width: 1600px) {
.hero-carousel {
aspect-ratio: 1600 / 1100;
}
}
@media (max-width: 1240px) {
.hero-carousel {
aspect-ratio: 1240 / 1100;
}
}
@media (max-width: 980px) {
.hero-carousel {
aspect-ratio: 980 / 900;
}
}
@media (max-width: 768px) {
.hero-carousel {
aspect-ratio: 768 / 900;
}
}
@media (max-width: 480px) {
.hero-carousel {
aspect-ratio: 480 / 800;
}
}
@media (max-width: 320px) {
.hero-carousel {
aspect-ratio: 320 / 800;
}
}
/* Individual Slide */
.hero-carousel__slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}
.hero-carousel__slide--active {
opacity: 1;
visibility: visible;
}
/* Background Image */
.hero-carousel__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Image element (for srcset support).
object-position bias upward (30%) mirrors the webdesign's hand-cropped
per-breakpoint sources, which favor the upper region of the master image. */
.hero-carousel__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
}
/* Gradient Overlay - Stronger on left side for text readability per Figma Design */
.hero-carousel__overlay {
position: absolute;
top: 0;
left: 0;
width: 67%;
height: 100%;
background: linear-gradient(
to right,
rgba(14, 14, 16, 0.6) 0%,
rgba(65, 84, 195, 0) 100%
);
}
/* Content Container - mirrors webdesign's nested .hero__inner.grid-flow
structure: outer hero__inner (full-width, padding 20px) wraps an inner
hero__inner.grid-flow.content-element-group (additional 20px padding,
grid-flow gap). We collapse both layers into one container by doubling
the padding-inline (matches the design's effective 40px content offset
at 1280 viewport) and applying display: grid with the same gap token.
Children's natural margins (h1 margin-block-end: 0.5em) drive the rest. */
.hero-carousel__content {
position: absolute;
inset: 0;
z-index: 10;
display: grid;
align-content: center;
justify-items: start;
gap: var(--flow-grid-spacing-block, 2.5rem);
max-width: var(--section-width-default);
margin-inline: auto;
padding-inline: calc(var(--section-padding-inline) * 2);
box-sizing: border-box;
pointer-events: none;
}
.hero-carousel__content > * {
pointer-events: auto;
}
/* Heading - hero override on the .content-headline.headline-subheadline base.
Typography (size, weight, subheadline scaling) comes from main.css via
_c-headline-subheadline.scss; we only constrain width and override color
for the dark-image background. Margin-block-end stays at the base h1
value (0.5em) so the gap to CTAs matches the design. */
.hero-carousel__heading {
max-width: 70%;
color: var(--text-color-extra-light);
margin-inline: 0;
}
@media (max-width: 1200px) {
.hero-carousel__heading {
max-width: 100%;
}
}
/* CTA group - flex-group from main.css handles alignment, gap, wrap.
Hero hook only carries layout-tweak overrides if needed. */
.hero-carousel__cta {
margin: 0;
}
@media (max-width: 480px) {
.hero-carousel__cta {
flex-direction: column;
align-items: flex-start;
}
}
/* Navigation Dots Container - Right-aligned, positioned above corner accent */
.hero-carousel__dots {
position: absolute;
bottom: calc(72px + var(--spacing-md)); /* Above corner accent (72px height) */
right: var(--spacing-xl);
left: auto;
transform: none;
z-index: 20;
display: flex;
flex-direction: row;
gap: var(--spacing-sm);
padding: var(--spacing-sm);
}
@media (max-width: 768px) {
.hero-carousel__dots {
right: var(--spacing-lg);
bottom: calc(40px + var(--spacing-md)); /* Above corner accent (40px height) */
}
}
@media (max-width: 480px) {
.hero-carousel__dots {
right: auto;
left: 50%;
transform: translateX(-50%);
bottom: calc(32px + var(--spacing-md)); /* Above corner accent (32px height) */
}
}
/* Individual Dot */
.hero-carousel__dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--color-background);
opacity: 0.5;
border: none;
padding: 0;
cursor: pointer;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.hero-carousel__dot:hover {
opacity: 0.8;
transform: scale(1.1);
}
.hero-carousel__dot:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.hero-carousel__dot:focus:not(:focus-visible) {
outline: none;
}
.hero-carousel__dot:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.hero-carousel__dot--active,
.hero-carousel__dot[aria-current="true"] {
opacity: 1;
transform: scale(1.2);
}
/* Navigation Arrows - Hidden by default per Figma, shown on hover */
.hero-carousel__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
background-color: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
color: var(--color-primary);
opacity: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.hero-carousel:hover .hero-carousel__nav,
.hero-carousel:focus-within .hero-carousel__nav {
opacity: 1;
}
.hero-carousel__nav:hover {
background-color: var(--color-background);
transform: translateY(-50%) scale(1.05);
}
.hero-carousel__nav:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.hero-carousel__nav:focus:not(:focus-visible) {
outline: none;
}
.hero-carousel__nav:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.hero-carousel__nav:active {
transform: translateY(-50%) scale(0.95);
}
.hero-carousel__nav--prev {
left: var(--spacing-md);
}
.hero-carousel__nav--next {
right: var(--spacing-md);
}
/* Arrow Icons */
.hero-carousel__nav-icon {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Hide navigation on very small screens, rely on dots */
@media (max-width: 480px) {
.hero-carousel__nav {
display: none;
}
}
/* Live Region for Screen Reader Announcements */
.hero-carousel__live-region {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Slide Role Announcement */
.hero-carousel__slide[role="group"] {
/* Semantic styling for slides with role="group" */
}
/* Corner Accent (Notch) - Angled wedge at bottom right.
Matches webdesign _c-hero.scss bottom wedge: 600px wide, 72px tall,
30deg slant via tan(30deg) * 72px offset, default (white) token.
*/
.hero-carousel__corner-accent {
position: absolute;
bottom: 0;
right: -1px; /* Prevent subpixel gap */
width: 600px;
height: 72px;
background-color: var(--color-background);
clip-path: polygon(calc(tan(30deg) * 72px) 0, 100% 0, 100% 100%, 0 100%);
z-index: 15;
pointer-events: none;
display: none;
}
@media (min-width: 769px) {
.hero-carousel__corner-accent {
display: block;
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
.hero-carousel__slide {
transition: none;
}
.hero-carousel__dot {
transition: none;
}
.hero-carousel__nav {
transition: none;
}
.hero-carousel__nav:hover {
transform: translateY(-50%);
}
}
/* Focus-within for keyboard navigation indication */
.hero-carousel:focus-within {
/* Optional: Add subtle indication that carousel has focus */
}
/* Pause indicator (optional, shown when auto-advance is paused) */
.hero-carousel--paused .hero-carousel__dots::before {
content: "";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 16px;
/* Pause icon can be added here if desired */
}
/* Loading State */
.hero-carousel--loading .hero-carousel__slide {
opacity: 0;
}
.hero-carousel--loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 3px solid var(--color-background);
border-top-color: transparent;
border-radius: 50%;
animation: hero-carousel-spin 1s linear infinite;
}
@keyframes hero-carousel-spin {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-carousel--loading::after {
animation: none;
}
}
}
@layer legacy {
/* === /static/css/components/section-header.681f9fffed71.css === */
/* Section Header Component
BEM naming: .section-header
Reusable header for content sections with optional eyebrow text and description
*/
/* ===========================================================================
Base Section Header
=========================================================================== */
.section-header {
margin-bottom: var(--space-900);
}
.section-header__eyebrow {
display: block;
font-size: var(--font-size-body);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
letter-spacing: var(--letter-spacing-subheading);
margin-bottom: var(--space-300);
}
.section-header__heading {
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: 1.07;
letter-spacing: var(--letter-spacing-heading);
margin: 0 0 var(--space-500);
}
.section-header__description {
font-size: var(--font-size-h5);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
letter-spacing: var(--letter-spacing-subheading);
line-height: 1.6;
margin: 0;
max-width: 720px;
}
/* ===========================================================================
Alignment Variants
=========================================================================== */
/* Centered alignment (default for many sections) */
.section-header--center {
text-align: center;
}
.section-header--center .section-header__description {
margin-left: auto;
margin-right: auto;
}
/* Left alignment */
.section-header--left {
text-align: left;
}
/* ===========================================================================
Dark Variant (for use on navy backgrounds)
=========================================================================== */
.section-header--dark .section-header__eyebrow {
color: var(--color-accent);
}
.section-header--dark .section-header__heading {
color: var(--color-background);
}
.section-header--dark .section-header__description {
color: rgba(255, 255, 255, 0.8);
}
/* ===========================================================================
Size Variants
=========================================================================== */
/* Large variant for hero-like sections */
.section-header--large .section-header__heading {
font-size: var(--font-size-h1);
}
.section-header--large .section-header__description {
font-size: var(--font-size-h5);
}
/* Small variant for compact sections */
.section-header--small .section-header__heading {
font-size: var(--font-size-h3);
}
.section-header--small .section-header__description {
font-size: var(--font-size-body);
}
/* ===========================================================================
Responsive Adjustments
=========================================================================== */
@media (max-width: 767px) {
.section-header {
margin-bottom: var(--space-700);
}
}
}
@layer legacy {
/* === /static/css/components/feature-list.ab8e38cfda98.css === */
/* Feature List Component
BEM naming: .feature-list
List of features/benefits with checkmark or custom icons
*/
/* ===========================================================================
Base Feature List
=========================================================================== */
.feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-list__item {
display: flex;
align-items: flex-start;
gap: var(--space-300);
padding: var(--space-300) 0;
font-size: var(--font-size-body);
color: var(--color-text);
line-height: 1.5;
}
.feature-list__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 2px;
color: var(--color-accent);
}
.feature-list__icon svg {
width: 100%;
height: 100%;
}
/* Default checkmark icon using pseudo-element */
.feature-list__item::before {
content: "\2713";
flex-shrink: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
font-weight: var(--font-weight-bold);
margin-top: 2px;
}
/* When custom icon is provided, hide the pseudo-element */
.feature-list__item--custom-icon::before {
display: none;
}
.feature-list__text {
flex: 1;
min-width: 0;
}
/* ===========================================================================
Icon Variants
=========================================================================== */
/* Primary color icons */
.feature-list--icon-primary .feature-list__item::before,
.feature-list--icon-primary .feature-list__icon {
color: var(--color-primary);
}
/* Muted icons */
.feature-list--icon-muted .feature-list__item::before,
.feature-list--icon-muted .feature-list__icon {
color: var(--color-text-muted);
}
/* ===========================================================================
Layout Variants
=========================================================================== */
/* Compact variant with less padding */
.feature-list--compact .feature-list__item {
padding: var(--space-200) 0;
font-size: var(--font-size-nav);
}
.feature-list--compact .feature-list__icon,
.feature-list--compact .feature-list__item::before {
width: 16px;
height: 16px;
}
/* Large variant with more spacing */
.feature-list--large .feature-list__item {
padding: var(--space-500) 0;
font-size: var(--font-size-h5);
}
.feature-list--large .feature-list__icon,
.feature-list--large .feature-list__item::before {
width: 24px;
height: 24px;
}
/* Two-column layout */
.feature-list--columns {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-300) var(--space-800);
}
/* ===========================================================================
Dark Mode Support (for use on dark backgrounds)
=========================================================================== */
.feature-list--dark .feature-list__item {
color: var(--color-background);
}
.feature-list--dark .feature-list__item::before,
.feature-list--dark .feature-list__icon {
color: var(--color-accent);
}
/* ===========================================================================
Numbered List Variant
=========================================================================== */
.feature-list--numbered {
counter-reset: feature-counter;
}
.feature-list--numbered .feature-list__item::before {
counter-increment: feature-counter;
content: counter(feature-counter);
width: 28px;
height: 28px;
background-color: var(--color-accent);
color: var(--color-background);
border-radius: 50%;
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
}
.feature-list--numbered.feature-list--dark .feature-list__item::before {
background-color: var(--color-accent);
color: var(--color-background);
}
/* ===========================================================================
Responsive Adjustments
=========================================================================== */
@media (max-width: 767px) {
.feature-list--columns {
grid-template-columns: 1fr;
}
.feature-list--large .feature-list__item {
font-size: var(--font-size-body);
}
}
}
@layer legacy {
/* === /static/css/components/cta-section.2ed3a637320e.css === */
/* CTA Section Component
BEM naming: .cta-section
Full-width call-to-action banner with various background options
*/
/* ===========================================================================
Base CTA Section
=========================================================================== */
.cta-section {
padding: var(--space-900) var(--space-700);
background-color: var(--color-background-alt);
}
.cta-section__container {
max-width: var(--container-max-width);
margin: 0 auto;
}
.cta-section__content {
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.cta-section__heading {
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: 1.25;
margin: 0 0 var(--space-500);
}
.cta-section__description {
font-size: var(--font-size-h5);
font-weight: var(--font-weight-regular);
color: var(--color-text-secondary);
line-height: 1.6;
margin: 0 0 var(--space-700);
}
.cta-section__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-500);
justify-content: center;
}
/* ===========================================================================
Background Variants
=========================================================================== */
/* Accent (coral) background */
.cta-section--accent {
background-color: var(--color-accent);
}
.cta-section--accent .cta-section__heading,
.cta-section--accent .cta-section__description {
color: var(--color-background);
}
/* Navy (primary) background */
.cta-section--navy {
background-color: var(--color-primary);
}
.cta-section--navy .cta-section__heading,
.cta-section--navy .cta-section__description {
color: var(--color-background);
}
/* Gradient background */
.cta-section--gradient {
background: linear-gradient(135deg, var(--color-primary) 0%, #3d4085 100%);
}
.cta-section--gradient .cta-section__heading,
.cta-section--gradient .cta-section__description {
color: var(--color-background);
}
/* Light background (explicit) */
.cta-section--light {
background-color: var(--color-background-alt);
}
/* ===========================================================================
Layout Variants
=========================================================================== */
/* Side-by-side layout (text left, button right) */
.cta-section--inline .cta-section__content {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-800);
text-align: left;
max-width: none;
}
.cta-section--inline .cta-section__text {
flex: 1;
min-width: 0;
}
.cta-section--inline .cta-section__heading {
margin-bottom: var(--space-300);
}
.cta-section--inline .cta-section__description {
margin-bottom: 0;
}
.cta-section--inline .cta-section__actions {
flex-shrink: 0;
}
/* Compact variant with less padding */
.cta-section--compact {
padding: var(--space-800) var(--space-700);
}
/* Large variant with more padding */
.cta-section--large {
padding: var(--space-900) var(--space-700);
}
.cta-section--large .cta-section__heading {
font-size: var(--font-size-h1);
}
/* ===========================================================================
Responsive Adjustments
=========================================================================== */
@media (max-width: 767px) {
.cta-section {
padding: var(--space-800) var(--space-500);
}
/* Stack inline layout on mobile */
.cta-section--inline .cta-section__content {
flex-direction: column;
text-align: center;
}
.cta-section--inline .cta-section__description {
margin-bottom: var(--space-700);
}
.cta-section--large {
padding: var(--space-900) var(--space-500);
}
}
}
@layer legacy {
/* === /static/css/components/section-dark.172aba9da7ca.css === */
/* Dark Section Component
BEM naming: .section-dark
Section wrapper with navy background and automatic light text colors
*/
/* ===========================================================================
Base Dark Section
=========================================================================== */
.section-dark {
background-color: var(--color-primary);
color: var(--color-background);
padding: var(--space-900) var(--space-700);
}
.section-dark__container {
max-width: var(--container-max-width);
margin: 0 auto;
}
/* ===========================================================================
Text Color Overrides for Child Elements
=========================================================================== */
/* Headings */
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6,
.section-dark .text-h1,
.section-dark .text-h2,
.section-dark .text-h3,
.section-dark .text-h4,
.section-dark .text-h5,
.section-dark .text-h6 {
color: var(--color-background);
}
/* Body text */
.section-dark p,
.section-dark .text-body {
color: rgba(255, 255, 255, 0.9);
}
/* Muted text */
.section-dark .text-small,
.section-dark .text-muted {
color: rgba(255, 255, 255, 0.7);
}
/* Links */
.section-dark a:not(.btn) {
color: var(--color-background);
text-decoration: underline;
}
.section-dark a:not(.btn):hover {
color: var(--color-accent);
}
/* ===========================================================================
Component Overrides
=========================================================================== */
/* Section header */
.section-dark .section-header__eyebrow {
color: var(--color-accent);
}
.section-dark .section-header__heading {
color: var(--color-background);
}
.section-dark .section-header__description {
color: rgba(255, 255, 255, 0.8);
}
/* Icon block */
.section-dark .icon-block__heading {
color: var(--color-background);
}
.section-dark .icon-block__description {
color: rgba(255, 255, 255, 0.8);
}
.section-dark .icon-block__icon {
color: var(--color-accent);
}
/* Feature list - already handled by --dark modifier, but adding for consistency */
.section-dark .feature-list__item {
color: var(--color-background);
}
/* Info box */
.section-dark .info-box {
background-color: rgba(255, 255, 255, 0.1);
}
.section-dark .info-box__heading {
color: var(--color-background);
}
.section-dark .info-box__text {
color: rgba(255, 255, 255, 0.8);
}
/* ===========================================================================
Padding Variants
=========================================================================== */
/* Compact padding */
.section-dark--compact {
padding: var(--space-900) var(--space-700);
}
/* Large padding */
.section-dark--large {
padding: var(--space-900) var(--space-700);
}
/* No padding (for custom layouts) */
.section-dark--no-padding {
padding: 0;
}
/* ===========================================================================
Background Variants
=========================================================================== */
/* Gradient background */
.section-dark--gradient {
background: linear-gradient(135deg, var(--color-primary) 0%, #3d4085 100%);
}
/* Slightly lighter navy */
.section-dark--light {
background-color: #363980;
}
/* ===========================================================================
Responsive Adjustments
=========================================================================== */
@media (max-width: 767px) {
.section-dark {
padding: var(--space-900) var(--space-500);
}
.section-dark--compact {
padding: var(--space-800) var(--space-500);
}
.section-dark--large {
padding: var(--space-900) var(--space-500);
}
}
}
/* germany-map.css entfernt: altes Alpine-Karten-Design abgeloest durch _c-block-map.scss (Webdesign-Schwung) */
@layer legacy {
/* === /static/css/components/cms.e79244fcb0f2.css === */
/* CMS Components
BEM naming: .article-detail, .cms-gallery, .press-contacts, .press-contact-card
Styles for article detail pages and CMS-specific content blocks
*/
/* Image notch dimensions */
:root {
--notch-width: calc(33.333% + 1px);
--notch-height: 32px;
--notch-clip-offset: 21px;
}
/* ===========================================================================
Article Detail - Full-width article layout
=========================================================================== */
.article-detail {
padding-top: var(--space-900);
padding-bottom: var(--space-900);
}
.article-detail__header {
margin-bottom: var(--space-900);
text-align: center;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.article-detail__title {
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: 1.2;
margin: 0 0 var(--space-500);
}
.article-detail__meta {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-500);
color: var(--color-text-muted);
font-size: var(--font-size-body);
}
.article-detail__date {
font-style: normal;
}
.article-detail__author::before {
content: "\2022";
margin-right: var(--space-500);
}
.article-detail__body {
max-width: 900px;
margin-left: auto;
margin-right: auto;
font-size: var(--font-size-h5);
line-height: 1.8;
}
/* Two-column layout for rich text content on larger screens */
@media (min-width: 1024px) {
.article-detail__body .cms-richtext {
column-count: 2;
column-gap: var(--space-900);
}
.article-detail__body .cms-richtext p:first-child {
margin-top: 0;
}
}
.article-detail__footer {
margin-top: var(--space-900);
text-align: center;
}
/* ===========================================================================
CMS Gallery - 3-column grid with centering for 1-2 images
=========================================================================== */
.cms-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-700);
margin: var(--space-900) 0;
}
.cms-gallery__item {
flex: 0 1 calc(33.333% - var(--space-700));
max-width: 400px;
margin: 0;
}
/* When there are 3+ items, use full grid */
.cms-gallery[data-count="3"] .cms-gallery__item,
.cms-gallery[data-count="4"] .cms-gallery__item,
.cms-gallery[data-count="5"] .cms-gallery__item,
.cms-gallery[data-count="6"] .cms-gallery__item,
.cms-gallery[data-count="7"] .cms-gallery__item,
.cms-gallery[data-count="8"] .cms-gallery__item,
.cms-gallery[data-count="9"] .cms-gallery__item,
.cms-gallery[data-count="10"] .cms-gallery__item,
.cms-gallery[data-count="11"] .cms-gallery__item,
.cms-gallery[data-count="12"] .cms-gallery__item {
flex: 0 1 calc(33.333% - var(--space-700));
}
.cms-gallery__item img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
.cms-gallery__caption {
margin-top: var(--space-300);
font-size: var(--font-size-small);
color: var(--color-text-muted);
text-align: center;
}
/* Responsive: 2 columns on tablet */
@media (max-width: 1023px) and (min-width: 768px) {
.cms-gallery__item {
flex: 0 1 calc(50% - var(--space-500));
}
}
/* Responsive: single column on mobile */
@media (max-width: 767px) {
.cms-gallery {
flex-direction: column;
align-items: center;
}
.cms-gallery__item {
flex: 0 0 100%;
max-width: 100%;
}
}
/* ===========================================================================
CMS RichText Block - Wrapper for rich text content
=========================================================================== */
.cms-richtext {
margin: var(--space-700) 0;
}
.cms-richtext p {
margin: 0 0 var(--space-500);
}
.cms-richtext ul,
.cms-richtext ol {
margin: 0 0 var(--space-500);
padding-left: var(--space-800);
}
.cms-richtext li {
margin-bottom: var(--space-200);
}
.cms-richtext a {
color: var(--color-accent);
text-decoration: underline;
}
.cms-richtext a:hover {
color: var(--color-primary);
}
/* ===========================================================================
CMS Heading Block - Article subheadings
=========================================================================== */
.cms-heading {
margin: var(--space-900) 0 var(--space-700);
color: var(--color-primary);
font-weight: var(--font-weight-bold);
line-height: 1.3;
}
.cms-heading--h2 {
font-size: var(--font-size-h2);
}
.cms-heading--h3 {
font-size: var(--font-size-h3);
}
.cms-heading--h4 {
font-size: var(--font-size-h4);
}
/* Reset column layout for headings */
@media (min-width: 1024px) {
.article-detail__body .cms-heading {
column-span: all;
}
}
/* ===========================================================================
CMS Image Block - Single image with optional caption
=========================================================================== */
.cms-image {
margin: var(--space-900) 0;
}
.cms-image img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
.cms-image__caption {
margin-top: var(--space-300);
font-size: var(--font-size-small);
color: var(--color-text-muted);
text-align: center;
}
/* Reset column layout for images */
@media (min-width: 1024px) {
.article-detail__body .cms-image {
column-span: all;
}
.article-detail__body .cms-gallery {
column-span: all;
}
}
/* ===========================================================================
CMS Document Block - File download link
=========================================================================== */
.cms-document {
display: inline-flex;
align-items: center;
gap: var(--space-300);
padding: var(--space-500);
background-color: var(--color-background-alt);
border-radius: 4px;
margin: var(--space-700) 0;
text-decoration: none;
color: var(--color-text);
transition: background-color 0.2s ease;
}
.cms-document:hover {
background-color: var(--color-background);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cms-document__icon {
width: 24px;
height: 24px;
color: var(--color-primary);
}
.cms-document__title {
font-weight: var(--font-weight-bold);
color: var(--color-primary);
}
/* ===========================================================================
Press Contacts Section - Contact cards before footer
=========================================================================== */
.press-contacts {
background-color: var(--color-background-alt);
padding: var(--space-900) 0;
margin-top: var(--space-900);
}
.press-contacts__heading {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin: 0 0 var(--space-800);
text-align: center;
}
.press-contacts__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-800);
}
/* ===========================================================================
Press Contact Card - Individual contact display
=========================================================================== */
.press-contact-card {
display: flex;
align-items: flex-start;
gap: var(--space-500);
padding: var(--space-700);
background-color: var(--color-background);
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
max-width: 400px;
}
.press-contact-card__photo {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
}
.press-contact-card__info {
display: flex;
flex-direction: column;
gap: var(--space-200);
}
.press-contact-card__name {
font-size: var(--font-size-h5);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
}
.press-contact-card__function {
font-size: var(--font-size-small);
color: var(--color-text-muted);
}
.press-contact-card__email,
.press-contact-card__phone {
font-size: var(--font-size-small);
color: var(--color-accent);
text-decoration: none;
}
.press-contact-card__email:hover,
.press-contact-card__phone:hover {
text-decoration: underline;
}
/* Responsive: stack contact cards on mobile */
@media (max-width: 767px) {
.press-contacts__grid {
flex-direction: column;
align-items: center;
}
.press-contact-card {
width: 100%;
max-width: none;
}
}
/* ===========================================================================
Responsive Adjustments for Article Detail
=========================================================================== */
@media (max-width: 767px) {
.article-detail {
padding-top: var(--space-800);
padding-bottom: var(--space-900);
}
.article-detail__meta {
flex-direction: column;
gap: var(--space-200);
}
.article-detail__author::before {
display: none;
}
}
/* ===========================================================================
Article Filters - Filter dropdowns row (Figma: node 476:5162)
=========================================================================== */
.article-filters {
margin: var(--space-900) 0;
}
.article-filters .form-field {
margin-bottom: 0;
width: auto;
}
/* Visually hide labels — keep accessible for screen readers */
.article-filters .form-field__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Match Figma: rectangular, generous padding, secondary text color */
.article-filters .form-field__select {
border-radius: 0;
padding: 0.75rem 2.5rem 0.75rem 1.5rem;
background-position: right 1rem center;
color: var(--color-text-secondary);
}
.article-filters__row {
display: flex;
flex-wrap: wrap;
gap: var(--space-500);
justify-content: center;
align-items: stretch;
}
.article-filters__field {
flex: 0 1 auto;
min-width: 200px;
}
/* Reset button — Figma: outlined, Delft Blue border on light background */
.article-filters__reset {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border: 2px solid var(--color-primary);
background-color: var(--color-background-light);
color: var(--color-primary);
font-family: var(--font-family);
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
line-height: 1.5;
text-decoration: none;
box-sizing: border-box;
white-space: nowrap;
cursor: pointer;
flex: 0 0 auto;
}
.article-filters__reset:hover {
background-color: var(--color-primary);
color: white;
}
@media (max-width: 767px) {
.article-filters__row {
flex-direction: column;
}
.article-filters__field {
flex: 1 1 100%;
min-width: unset;
}
.article-filters__reset {
width: 100%;
justify-content: center;
}
}
/* ===========================================================================
Pagination - Page navigation controls
=========================================================================== */
.pagination {
margin-top: var(--space-900);
display: flex;
justify-content: center;
}
.pagination__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-200);
list-style: none;
margin: 0;
padding: 0;
}
.pagination__item {
margin: 0;
}
.pagination__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--space-300);
border: 1px solid var(--color-background-alt);
border-radius: 4px;
color: var(--color-text);
text-decoration: none;
font-size: var(--font-size-small);
transition: all 0.2s ease;
}
.pagination__link:hover {
background-color: var(--color-background-alt);
border-color: var(--color-primary);
color: var(--color-primary);
}
.pagination__link:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.pagination__link--current {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-background);
pointer-events: none;
}
.pagination__link--prev,
.pagination__link--next {
font-weight: var(--font-weight-bold);
}
/* Screen reader only class for pagination */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 767px) {
.pagination__link {
min-width: 36px;
height: 36px;
font-size: 0.8125rem;
}
}
}
@layer legacy {
/* === /static/css/components/auth-gate.577e8c1f1648.css === */
/* Auth Gate Components
BEM naming: .auth-gate-cta, .auth-gate-modal
Inline CTA box and modal for unauthenticated users.
*/
/* ==========================================================================
Auth Gate CTA — Inline box replacing form for anonymous users
========================================================================== */
.auth-gate-cta {
text-align: center;
padding: var(--space-900) var(--space-700);
background-color: var(--color-background-alt);
border-radius: var(--border-radius-card);
border: 1px solid var(--color-border-light);
max-width: 600px;
margin-inline: auto;
}
.auth-gate-cta__icon {
width: 48px;
height: 48px;
color: var(--color-primary);
margin-bottom: var(--space-500);
}
.auth-gate-cta__heading {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin: 0 0 var(--space-300);
line-height: var(--line-height-tight);
}
.auth-gate-cta__message {
color: var(--color-text-secondary);
margin: 0 0 var(--space-700);
line-height: var(--line-height-normal);
max-width: 45ch;
margin-inline: auto;
}
.auth-gate-cta__actions {
display: flex;
justify-content: center;
gap: var(--space-500);
flex-wrap: wrap;
}
/* ==========================================================================
Auth Gate Modal — Lightweight modal for pricing card CTAs
Reuses .auth-modal__close from scss/50-components/_c-auth-modal.scss for
the close button
========================================================================== */
.auth-gate-modal__backdrop {
position: fixed;
inset: 0;
z-index: 200;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease;
}
.auth-gate-modal__dialog {
position: relative;
z-index: 201;
max-width: 480px;
width: calc(100% - var(--space-800));
background-color: var(--color-background);
border-radius: var(--border-radius-card);
padding: var(--space-900);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
text-align: center;
}
.auth-gate-modal__heading {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin: 0 0 var(--space-300);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-subheading);
}
.auth-gate-modal__message {
color: var(--color-text-secondary);
margin: 0 0 var(--space-700);
line-height: var(--line-height-normal);
}
.auth-gate-modal__actions {
display: flex;
justify-content: center;
gap: var(--space-500);
flex-wrap: wrap;
}
/* ==========================================================================
Responsive — Stack buttons on mobile
========================================================================== */
@media (max-width: 480px) {
.auth-gate-cta__actions,
.auth-gate-modal__actions {
flex-direction: column;
align-items: stretch;
}
}
}
@layer legacy {
/* === /static/css/components/search.d41f54d867c6.css === */
/* Search page (cms.SearchPage). BEM naming, webdesign space tokens.
Section padding + container width come from .wrapper.content-block
(.wrapper--width-standard). Title spacing comes from .content-headline.
Only the form, result list, and pagination retain bespoke styles. */
.search__form {
display: flex;
gap: var(--space-300);
margin-bottom: var(--space-700);
}
.search__input {
flex: 1;
padding: var(--space-300) var(--space-500);
border: 2px solid var(--color-text-label);
border-radius: var(--border-radius-md);
font-family: var(--font-family);
font-size: var(--font-size-body);
color: var(--color-text);
background-color: var(--color-background);
}
.search__input:focus {
outline: 2px solid var(--color-focus);
border-color: var(--color-primary);
}
.search__submit {
padding-inline: var(--space-500);
padding-block: var(--space-300);
background: var(--color-primary);
color: var(--color-background);
border: 0;
border-radius: var(--border-radius-md);
cursor: pointer;
font-family: var(--font-family);
font-weight: var(--font-weight-semibold);
}
.search__submit:hover,
.search__submit:focus-visible {
background: var(--color-accent);
}
.search-results__count {
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-500);
}
.search-results__empty {
color: var(--color-text-secondary);
margin-block: var(--space-500);
}
.search-results__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--space-700);
}
.search-result__title {
margin: 0;
font-size: var(--font-size-h4);
}
.search-result__title a {
color: var(--color-text);
text-decoration: none;
}
.search-result__title a:hover,
.search-result__title a:focus-visible {
text-decoration: underline;
}
.search-result__breadcrumb {
color: var(--color-text-muted);
font-size: var(--font-size-small);
margin-block: var(--space-200) var(--space-200);
}
.search-result__snippet {
color: var(--color-text-secondary);
margin: 0;
}
.search-pagination {
margin-top: var(--space-700);
}
.search-pagination__list {
list-style: none;
display: flex;
gap: var(--space-300);
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.search-pagination__link {
display: inline-block;
padding: var(--space-200) var(--space-300);
border: 1px solid var(--color-text-label);
border-radius: var(--border-radius-md);
text-decoration: none;
color: var(--color-text);
}
.search-pagination__link:hover,
.search-pagination__link:focus-visible {
border-color: var(--color-primary);
}
.search-pagination__link--current {
background: var(--color-primary);
color: var(--color-background);
border-color: var(--color-primary);
}
}
/* Page-specific styles — ebenfalls im `legacy`-Layer. */
@layer legacy {
/* === /static/css/pages/home.789267660392.css === */
/* Homepage Styles
Page-specific styles for the PRO BAHN homepage.
Follows mobile-first responsive approach using design tokens.
Sections:
- News Grid (2+3 layout: 2 featured, 3 recent)
- Reduced motion support
(Mission, Impact, Topics, Newsletter sections are styled by webdesign
primitives compiled into main.css — see the placeholder comments below.)
*/
/* ===========================================================================
Homepage Container Scope
=========================================================================== */
.home-page {
/* Page-level scope for homepage-specific styles */
}
/* Mission Statement section is now styled by the webdesign primitives
(.wrapper--width-medium, .equal-columns--columns-2, .badge.text-icon, …)
defined in pro_bahn_website/static/scss/ and compiled into main.css. */
/* Impact ("Was Ihre Unterstützung bewirkt") is now styled by webdesign primitives
(.background-color--light, .wrapper--width-standard, .equal-columns--columns-3,
.block-text-icon__card.card.card--border, …) defined in
pro_bahn_website/static/scss/ and compiled into main.css. */
/* ===========================================================================
News Grid Section (2+3 Layout)
Top row: 2 featured cards (50% each)
Bottom row: 3 recent cards (33% each)
Responsive: 2-column then single column on smaller screens
=========================================================================== */
.news-section {
padding: var(--spacing-section) 0;
background-color: var(--color-background-light);
}
.news-grid {
display: flex;
flex-direction: column;
gap: var(--spacing-card-gap);
margin-bottom: var(--spacing-2xl);
}
/* Featured row - 2 larger cards */
.news-grid__featured {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-card-gap);
}
/* Recent row - 3 smaller cards */
.news-grid__recent {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-card-gap);
}
/* --- News card Figma overrides (scoped to news section) --- */
/* Enable container queries so meta can adapt to card width */
.news-grid__card {
container-type: inline-size;
}
/* Hide category tag when card is too narrow to fit all meta on one line */
@container (max-width: 400px) {
.card__meta-item--tag {
display: none;
}
}
/* Title: dark color, unified size across featured/recent */
.news-grid__card .card__title {
color: var(--color-text);
font-size: var(--font-size-h4);
}
/* Content area: match mock padding */
.news-grid__card .card__content {
padding: 24px;
}
/* Metadata row: compact gaps, muted color to fit all tags on one line */
.news-grid__card .card__meta {
gap: var(--spacing-md);
color: var(--color-text-label);
margin-bottom: 12px;
}
.news-grid__card .card__meta-icon {
color: var(--color-text-label);
}
/* Excerpt: body-size text to match mock */
.news-grid__card .card__excerpt {
font-size: var(--font-size-body);
line-height: 1.75;
}
/* Featured cards show more excerpt text */
.news-grid__card--featured .card__excerpt--truncate {
-webkit-line-clamp: 6;
}
/* Read-more link: larger size, more top spacing */
.news-grid__card .card__link {
margin-top: var(--spacing-paragraph-gap);
}
.news-grid__card .link--read-more {
font-size: var(--font-size-body);
}
/* Image: rounded corners, taller notch */
.news-grid__card .card__image-wrapper {
border-radius: var(--border-radius-card) var(--border-radius-card) 0 0;
}
.news-grid__card .card__image-wrapper::after {
height: 50px;
}
/* Featured star icon overlay */
.news-grid__card-wrapper {
position: relative;
}
.news-grid__featured-icon {
position: absolute;
top: 24px;
right: 24px;
width: 48px;
height: 48px;
color: var(--color-accent-secondary);
z-index: 1;
pointer-events: none;
}
.news-grid__empty {
font-size: var(--font-size-body);
color: var(--color-text-muted);
text-align: center;
padding: var(--spacing-xl);
}
.news-section__link {
text-align: center;
margin-top: var(--spacing-section-inner);
}
/* News grid - Tablet (2 columns) */
@media (min-width: 768px) {
.news-grid__featured {
grid-template-columns: repeat(2, 1fr);
}
.news-grid__recent {
grid-template-columns: repeat(2, 1fr);
}
}
/* News grid - Desktop (2+3 layout) */
@media (min-width: 1024px) {
.news-grid__recent {
grid-template-columns: repeat(3, 1fr);
}
}
/* Topics Cards section is now styled by webdesign primitives
(.wrapper--width-standard, .equal-columns--columns-3, .block-text-icon__card
.card.card--background, .content-headline.headline--center, …) defined in
pro_bahn_website/static/scss/ and compiled into main.css. */
/* Newsletter CTA section is now styled by webdesign primitives
(.background-color--extra-light, .wrapper--width-medium, .content-headline.headline--center,
.content-text.flow, .element-group--center.content-element-group with
checklist_badge, .button--skew.button--primary.button--center) defined in
pro_bahn_website/static/scss/ and compiled into main.css. */
/* ===========================================================================
Reduced Motion Support
=========================================================================== */
}
@layer legacy {
/* === /static/css/pages/topics.85e5bae2bf61.css === */
/* Topics Overview Page Styles
Page-specific overrides for the topics overview after the migration to the
webdesign primitives. Layout, padding, headings, grids and card visuals are
all provided by main.css (wrapper, content-block, equal-columns, content-
headline, content-text). Only the htmx search form keeps a small footprint
here because it is not a webdesign primitive.
*/
/* ===========================================================================
Search form — width cap and field spacing reset
=========================================================================== */
.topics-search__form {
max-width: 500px;
margin-inline: auto;
}
.topics-search__field {
margin-bottom: 0;
}
/* Topic detail — keep the featured image visually anchored under the heading */
.topic-page__image {
margin: var(--space-500) 0 0;
}
.topic-page__image img {
display: block;
width: 100%;
height: auto;
border-radius: var(--border-radius-card, 0);
}
}
@layer legacy {
/* === /static/css/pages/kummerkasten.9e1f9726a26c.css === */
/* Kummerkasten Public Page Styles
BEM naming: .kummerkasten, .kummerkasten__*
Figma Source: https://www.figma.com/design/FSny8QbxKhZTBFyiBeIR9B/Layout--Copy-?node-id=287-4325
Public complaint form page for PRO BAHN passenger advocacy
Hero layout provided by components/page-hero.css.
Section wrappers + info-card grid now use webdesign primitives (.wrapper.content-block,
.equal-columns, .block-text-icon__card) — this file only covers the bespoke form layout.
*/
/* ==========================================================================
User Banner
========================================================================== */
.kummerkasten__user-banner {
background-color: var(--color-background-light);
border-radius: var(--border-radius-md);
padding: var(--space-500) var(--space-700);
margin-bottom: var(--space-800);
}
.kummerkasten__user-banner-text {
font-size: var(--font-size-small);
color: var(--color-text-secondary);
margin: 0;
}
/* ==========================================================================
Form Container
========================================================================== */
.kummerkasten__form {
max-width: 100%;
}
/* ==========================================================================
Fieldsets — Section grouping with legends
========================================================================== */
.kummerkasten__fieldset {
border: none;
padding: 0;
margin: 0 0 var(--space-800);
}
.kummerkasten__fieldset-legend {
font-size: var(--font-size-md);
font-weight: var(--font-weight-bold);
color: var(--color-text);
margin-bottom: var(--space-300);
padding: 0;
}
.kummerkasten__fieldset-description {
font-size: var(--font-size-small);
font-style: italic;
line-height: var(--line-height-relaxed);
color: var(--color-text-secondary);
margin: 0 0 var(--space-500);
}
.kummerkasten__fieldset-description p {
margin: 0 0 var(--space-300);
}
.kummerkasten__fieldset-description p:last-child {
margin-bottom: 0;
}
/* ==========================================================================
Form Grids
========================================================================== */
.kummerkasten__form-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--space-800);
row-gap: var(--space-600);
margin-bottom: var(--space-600);
}
.kummerkasten__form-grid-3 .form-field {
margin-bottom: 0;
}
.kummerkasten__form-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: var(--space-800);
row-gap: var(--space-600);
margin-bottom: var(--space-600);
}
.kummerkasten__form-grid-2 .form-field {
margin-bottom: 0;
}
.kummerkasten__form-full {
max-width: 50%;
margin-bottom: var(--space-700);
}
.kummerkasten__form-spacer {
display: block;
}
/* ==========================================================================
Character Counter
========================================================================== */
.kummerkasten__char-counter {
display: block;
margin-top: var(--space-200);
font-family: var(--font-family);
font-size: var(--font-size-small);
color: var(--color-text-muted);
text-align: right;
}
.kummerkasten__char-counter--warning {
color: var(--color-accent);
}
.kummerkasten__char-counter--error {
color: var(--color-error);
}
/* ==========================================================================
Consent Section (Datenschutz)
========================================================================== */
.kummerkasten__consent {
margin-bottom: var(--space-500);
}
.kummerkasten__consent-label {
margin-bottom: var(--space-300);
}
/* ==========================================================================
Form Actions
========================================================================== */
.kummerkasten__form-actions {
display: flex;
justify-content: flex-start;
margin-top: var(--space-800);
}
/* ==========================================================================
Honeypot (visually hidden spam trap)
========================================================================== */
.kummerkasten__honeypot {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Form Errors (non-field errors)
========================================================================== */
.kummerkasten__form-errors {
padding: var(--space-500);
margin-bottom: var(--space-700);
background-color: var(--color-error-bg);
border: 1px solid var(--color-error);
border-radius: var(--border-radius-md);
}
.kummerkasten__form-errors__title {
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
color: var(--color-error);
margin: 0 0 var(--space-300);
}
.kummerkasten__form-errors__list {
list-style: none;
padding: 0;
margin: 0;
}
.kummerkasten__form-errors__list li {
font-size: var(--font-size-small);
color: var(--color-error);
line-height: 1.5;
padding: var(--space-200) 0;
}
/* ==========================================================================
Success Message
========================================================================== */
.kummerkasten__success {
text-align: center;
padding: var(--space-900) var(--space-700);
}
.kummerkasten__success-icon {
width: 80px;
height: 80px;
margin: 0 auto var(--space-700);
color: var(--color-success);
}
.kummerkasten__success-heading {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin: 0 0 var(--space-500);
}
.kummerkasten__success-text {
font-size: var(--font-size-h5);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
max-width: 600px;
margin: 0 auto;
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1023px) {
.kummerkasten__form-grid-3 {
grid-template-columns: repeat(2, 1fr);
}
/* Hide the empty spacer on 2-col grids */
.kummerkasten__form-spacer {
display: none;
}
}
@media (max-width: 767px) {
.kummerkasten__form-grid-3,
.kummerkasten__form-grid-2 {
grid-template-columns: 1fr;
}
.kummerkasten__fieldset {
margin-bottom: var(--space-900);
}
.kummerkasten__form-full {
max-width: 100%;
}
}
@media (min-width: 768px) {
.kummerkasten .page-hero__inner {
padding-inline: var(--space-700);
}
}
@media (min-width: 1024px) {
.kummerkasten .page-hero__inner {
padding-inline: var(--space-800);
}
}
}
@layer legacy {
/* === /static/css/pages/kummerkasten-admin.fda0605c75ba.css === */
/* Kummerkasten Admin Backend Styles
BEM naming: .kk-admin, .kk-admin__*
Internal ticket management interface for PRO BAHN staff
*/
/* ==========================================================================
Layout
========================================================================== */
.kk-admin {
max-width: 1200px;
margin: 0 auto;
padding: var(--spacing-lg);
font-family: var(--font-family);
}
.kk-admin__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-lg);
}
.kk-admin__title {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin: 0;
}
.kk-admin__back-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
font-size: var(--font-size-small);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
text-decoration: none;
}
.kk-admin__back-link:hover {
text-decoration: underline;
}
.kk-admin__back-link svg {
width: 16px;
height: 16px;
}
/* ==========================================================================
Stats Bar
========================================================================== */
.kk-admin__stats-bar {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
flex-wrap: wrap;
}
.kk-admin__stat {
flex: 1;
min-width: 140px;
padding: var(--spacing-md);
background-color: var(--color-background-alt);
border-radius: var(--border-radius-md);
text-align: center;
}
.kk-admin__stat-value {
display: block;
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: 1.2;
}
.kk-admin__stat-label {
display: block;
font-size: 0.8125rem;
color: var(--color-text-muted);
margin-top: var(--spacing-xs);
}
/* ==========================================================================
Filter Bar
========================================================================== */
.kk-admin__filter-bar {
display: flex;
gap: var(--spacing-md);
align-items: flex-end;
margin-bottom: var(--spacing-lg);
padding: var(--spacing-md);
background-color: var(--color-background-alt);
border-radius: var(--border-radius-md);
flex-wrap: wrap;
}
.kk-admin__filter-group {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
min-width: 160px;
}
.kk-admin__filter-label {
font-size: 0.8125rem;
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
}
.kk-admin__filter-select {
padding: var(--spacing-sm) var(--spacing-md);
padding-right: calc(var(--spacing-md) + 24px);
font-family: var(--font-family);
font-size: var(--font-size-small);
color: var(--color-text);
background-color: var(--color-background);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232c2f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--spacing-sm) center;
background-size: 16px 16px;
border: 1px solid #d1d5db;
border-radius: 4px;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.kk-admin__filter-select:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
border-color: var(--color-primary);
}
.kk-admin__filter-actions {
display: flex;
gap: var(--spacing-sm);
align-items: center;
}
.kk-admin__filter-reset {
font-size: var(--font-size-small);
color: var(--color-text-muted);
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
padding: var(--spacing-sm) var(--spacing-md);
}
.kk-admin__filter-reset:hover {
color: var(--color-text);
}
/* ==========================================================================
Ticket Table
========================================================================== */
.kk-admin__table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.kk-admin__table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-small);
line-height: 1.5;
}
.kk-admin__table thead {
background-color: var(--color-background-alt);
}
.kk-admin__table th {
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
padding: var(--spacing-sm) var(--spacing-md);
text-align: left;
white-space: nowrap;
border-bottom: 2px solid #e5e7eb;
}
.kk-admin__table td {
padding: var(--spacing-sm) var(--spacing-md);
vertical-align: middle;
border-bottom: 1px solid #f3f4f6;
}
.kk-admin__table tbody tr:hover {
background-color: var(--color-background-alt);
}
.kk-admin__table-link {
color: var(--color-primary);
text-decoration: none;
font-weight: var(--font-weight-semibold);
}
.kk-admin__table-link:hover {
text-decoration: underline;
}
.kk-admin__table-link:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.kk-admin__table-date {
white-space: nowrap;
color: var(--color-text-muted);
}
/* ==========================================================================
Status Badges
========================================================================== */
.kk-admin__status-badge {
display: inline-flex;
align-items: center;
padding: 2px var(--spacing-sm);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
border-radius: 100px;
white-space: nowrap;
line-height: 1.5;
}
.kk-admin__status-badge--offen {
background-color: #fff7ed;
color: #c2410c;
border: 1px solid #fed7aa;
}
.kk-admin__status-badge--in-arbeit {
background-color: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
}
.kk-admin__status-badge--beantwortet {
background-color: #f0fdf4;
color: #15803d;
border: 1px solid #bbf7d0;
}
.kk-admin__status-badge--geschlossen {
background-color: #f9fafb;
color: #6b7280;
border: 1px solid #e5e7eb;
}
.kk-admin__status-badge--weitergeleitet {
background-color: #faf5ff;
color: #7e22ce;
border: 1px solid #e9d5ff;
}
.kk-admin__status-badge--verworfen {
background-color: #f9fafb;
color: #6b7280;
border: 1px solid #e5e7eb;
}
/* ==========================================================================
Pagination
========================================================================== */
.kk-admin__pagination {
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
padding: var(--spacing-md) 0;
}
.kk-admin__pagination-link,
.kk-admin__pagination-current {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 var(--spacing-sm);
font-size: var(--font-size-small);
font-weight: var(--font-weight-semibold);
border-radius: 4px;
text-decoration: none;
}
.kk-admin__pagination-link {
color: var(--color-primary);
background-color: var(--color-background);
border: 1px solid #e5e7eb;
}
.kk-admin__pagination-link:hover {
background-color: var(--color-background-alt);
}
.kk-admin__pagination-link:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.kk-admin__pagination-current {
color: var(--color-background);
background-color: var(--color-primary);
}
.kk-admin__pagination-ellipsis {
color: var(--color-text-muted);
padding: 0 var(--spacing-xs);
}
/* ==========================================================================
Ticket Detail
========================================================================== */
.kk-admin__detail {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.kk-admin__detail-section {
padding: var(--spacing-lg);
background-color: var(--color-background);
border: 1px solid #e5e7eb;
border-radius: var(--border-radius-md);
}
.kk-admin__detail-section-title {
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin: 0 0 var(--spacing-md);
padding-bottom: var(--spacing-sm);
border-bottom: 1px solid #f3f4f6;
}
.kk-admin__detail-section-toggle-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.kk-admin__detail-section-toggle-icon--rotated {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.kk-admin__detail-section-toggle-icon {
transition: none;
}
}
.kk-admin__detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-sm) var(--spacing-lg);
}
.kk-admin__detail-label {
font-size: 0.8125rem;
font-weight: var(--font-weight-semibold);
color: var(--color-text-muted);
margin-bottom: 2px;
}
.kk-admin__detail-value {
font-size: var(--font-size-nav);
color: var(--color-text);
}
.kk-admin__detail-message {
font-size: var(--font-size-body);
line-height: var(--line-height-relaxed);
color: var(--color-text);
white-space: pre-wrap;
word-break: break-word;
}
/* ==========================================================================
Action Buttons
========================================================================== */
.kk-admin__actions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
}
.kk-admin__action-btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
font-family: var(--font-family);
font-size: var(--font-size-small);
font-weight: var(--font-weight-semibold);
border-radius: 4px;
border: none;
cursor: pointer;
text-decoration: none;
transition: background-color 0.2s ease;
}
.kk-admin__action-btn:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.kk-admin__action-btn svg {
width: 16px;
height: 16px;
}
.kk-admin__action-btn--primary {
background-color: var(--color-primary);
color: var(--color-background);
}
.kk-admin__action-btn--primary:hover {
background-color: #222557;
}
.kk-admin__action-btn--success {
background-color: #16a34a;
color: var(--color-background);
}
.kk-admin__action-btn--success:hover {
background-color: #15803d;
}
.kk-admin__action-btn--warning {
background-color: #f59e0b;
color: var(--color-text);
}
.kk-admin__action-btn--warning:hover {
background-color: #d97706;
}
.kk-admin__action-btn--danger {
background-color: var(--color-error);
color: var(--color-background);
}
.kk-admin__action-btn--danger:hover {
background-color: #b91c1c;
}
.kk-admin__action-btn--outline {
background-color: transparent;
color: var(--color-primary);
border: 1px solid #d1d5db;
}
.kk-admin__action-btn--outline:hover {
background-color: var(--color-background-alt);
}
/* ==========================================================================
Chronology / Timeline
========================================================================== */
.kk-admin__chronology {
position: relative;
padding-left: var(--spacing-lg);
}
.kk-admin__chronology::before {
content: "";
position: absolute;
left: 7px;
top: 0;
bottom: 0;
width: 2px;
background-color: #e5e7eb;
}
.kk-admin__chronology-item {
position: relative;
padding-bottom: var(--spacing-lg);
}
.kk-admin__chronology-item:last-child {
padding-bottom: 0;
}
.kk-admin__chronology-dot {
position: absolute;
left: calc(-1 * var(--spacing-lg) + 2px);
top: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--color-primary);
border: 2px solid var(--color-background);
}
.kk-admin__chronology-dot--response {
background-color: #16a34a;
}
.kk-admin__chronology-dot--forward {
background-color: #7e22ce;
}
.kk-admin__chronology-dot--note {
background-color: #6b7280;
}
.kk-admin__chronology-meta {
font-size: 0.8125rem;
color: var(--color-text-muted);
margin-bottom: var(--spacing-xs);
}
.kk-admin__chronology-text {
font-size: var(--font-size-nav);
line-height: var(--line-height-relaxed);
color: var(--color-text);
}
.kk-admin__chronology-type {
font-weight: var(--font-weight-semibold);
}
/* ==========================================================================
Duplicate Warning
========================================================================== */
.kk-admin__duplicate-warning {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
padding: var(--spacing-md);
background-color: #fff7ed;
border: 1px solid #fed7aa;
border-radius: var(--border-radius-md);
margin-bottom: var(--spacing-lg);
}
.kk-admin__duplicate-warning svg {
flex-shrink: 0;
width: 20px;
height: 20px;
color: #c2410c;
}
.kk-admin__duplicate-warning-text {
font-size: var(--font-size-small);
color: #9a3412;
line-height: 1.5;
}
.kk-admin__duplicate-warning-text a {
color: #c2410c;
font-weight: var(--font-weight-semibold);
}
/* Issue #190 — unknown-status recovery banner.
Shares the duplicate-warning palette and glyph treatment; adds a stronger
left-edge accent + a primary recovery action below the warning text. */
.kk-admin__unknown-status-warning {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
padding: var(--spacing-md);
background-color: #fff7ed;
border: 1px solid #fed7aa;
border-left: 4px solid #c2410c;
border-radius: var(--border-radius-md);
margin-bottom: var(--spacing-lg);
}
.kk-admin__unknown-status-warning svg {
flex-shrink: 0;
width: 20px;
height: 20px;
color: #c2410c;
}
.kk-admin__unknown-status-warning-body {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
flex: 1;
}
.kk-admin__unknown-status-warning-text {
font-size: var(--font-size-small);
font-weight: var(--font-weight-semibold);
color: #9a3412;
line-height: 1.5;
}
.kk-admin__unknown-status-warning-text code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background-color: #fed7aa;
padding: 0 0.25em;
border-radius: 0.25em;
}
.kk-admin__unknown-status-warning-form {
margin: 0;
}
/* Issue #190 — past status recoveries, surfaced inline on ticket detail. */
.kk-admin__status-audit-list {
margin-bottom: var(--spacing-lg);
padding: var(--spacing-md);
background-color: var(--background-color-light);
border-radius: var(--border-radius-md);
}
.kk-admin__status-audit-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-xs, 0.25rem);
}
.kk-admin__status-audit-item {
font-size: var(--font-size-small);
color: var(--color-text-muted);
}
.kk-admin__status-audit-item code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background-color: #fed7aa;
padding: 0 0.25em;
border-radius: 0.25em;
}
/* ==========================================================================
Response / Forward Forms
========================================================================== */
.kk-admin__form {
max-width: 700px;
}
.kk-admin__form-group {
margin-bottom: var(--spacing-lg);
}
.kk-admin__form-label {
display: block;
font-size: var(--font-size-small);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin-bottom: var(--spacing-sm);
}
.kk-admin__form-textarea {
display: block;
width: 100%;
min-height: 200px;
padding: var(--spacing-sm) var(--spacing-md);
font-family: var(--font-family);
font-size: var(--font-size-nav);
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-background);
border: 1px solid #d1d5db;
border-radius: 4px;
resize: vertical;
transition: border-color 0.2s ease;
}
.kk-admin__form-textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(44, 47, 107, 0.15);
}
.kk-admin__form-textarea:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.kk-admin__form-actions {
display: flex;
gap: var(--spacing-sm);
align-items: center;
}
/* ==========================================================================
Statistics
========================================================================== */
.kk-admin__stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
.kk-admin__stats-card {
padding: var(--spacing-lg);
background-color: var(--color-background);
border: 1px solid #e5e7eb;
border-radius: var(--border-radius-md);
}
.kk-admin__stats-card-title {
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin: 0 0 var(--spacing-md);
padding-bottom: var(--spacing-sm);
border-bottom: 1px solid #f3f4f6;
}
.kk-admin__chart-placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
background-color: var(--color-background-alt);
border-radius: 4px;
color: var(--color-text-muted);
font-size: var(--font-size-small);
}
/* ==========================================================================
Empty State
========================================================================== */
.kk-admin__empty {
text-align: center;
padding: var(--spacing-2xl) var(--spacing-lg);
color: var(--color-text-muted);
}
.kk-admin__empty-icon {
width: 48px;
height: 48px;
margin: 0 auto var(--spacing-md);
color: #d1d5db;
}
.kk-admin__empty-text {
font-size: var(--font-size-body);
margin: 0;
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 767px) {
.kk-admin {
padding: var(--spacing-md);
}
.kk-admin__stats-bar {
flex-direction: column;
}
.kk-admin__stat {
min-width: unset;
}
.kk-admin__filter-bar {
flex-direction: column;
align-items: stretch;
}
.kk-admin__filter-group {
min-width: unset;
}
.kk-admin__detail-grid {
grid-template-columns: 1fr;
}
.kk-admin__stats-grid {
grid-template-columns: 1fr;
}
.kk-admin__actions {
flex-direction: column;
}
.kk-admin__action-btn {
width: 100%;
justify-content: center;
}
.kk-admin__header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm);
}
}
@media (max-width: 479px) {
.kk-admin__table {
font-size: 0.8125rem;
}
.kk-admin__table th,
.kk-admin__table td {
padding: var(--spacing-xs) var(--spacing-sm);
}
}
/* Standardantworten-CRUD (Issue #167) */
.kk-admin__table-row--inactive {
opacity: 0.6;
}
.kk-admin__badge {
display: inline-block;
padding: 0.125rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}
.kk-admin__badge--active {
background: var(--color-success-bg, #e7f5ee);
color: var(--color-success, #1f6f3f);
}
.kk-admin__badge--inactive {
background: var(--background-color-light);
color: var(--color-text-muted, #6b7280);
}
/* Issue #208: audit log status badges. Foreground colors hardened to meet
* WCAG 2.1 AA 4.5:1 contrast on the small (12px) badge text:
* #166534 on #f0fdf4 -> ~7.6:1 (live, dark green, AAA)
* #374151 on #f5f4f2 -> ~9.6:1 (orphan, dark slate, AAA)
* --color-success (#16a34a) only hits ~3.15:1 on its own bg, so we use a
* darker shade for the badge while keeping the success-bg surface tint.
*/
.kk-admin__badge--live {
background: var(--color-success-bg);
color: #166534;
border: 1px solid var(--color-success);
}
.kk-admin__badge--orphan {
background: var(--color-background-alt);
color: #374151;
border: 1px solid #d1d5db;
}
.kk-admin__inline-link {
margin-left: var(--spacing-sm);
color: var(--color-azul);
text-decoration: underline;
}
.kk-admin__audit-detail-meta {
margin-bottom: var(--spacing-lg);
}
.kk-admin__filter-input {
padding: var(--spacing-sm) var(--spacing-md);
font-family: var(--font-family);
font-size: var(--font-size-small);
color: var(--color-text);
background-color: var(--color-background);
border: 1px solid #d1d5db;
border-radius: 4px;
}
.kk-admin__filter-input:focus {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
border-color: var(--color-primary);
}
.kk-admin__filter-form {
display: flex;
gap: var(--spacing-md);
align-items: end;
margin-bottom: var(--spacing-lg);
flex-wrap: wrap;
}
.kk-admin__preview-frame {
width: 100%;
min-height: 600px;
border: 1px solid var(--border-color-light);
border-radius: 0.25rem;
margin-bottom: var(--spacing-md);
}
.kk-admin__preview-meta {
background: var(--background-color-light);
padding: var(--spacing-md);
border-radius: 0.25rem;
margin-bottom: var(--spacing-md);
font-size: 0.875rem;
color: var(--color-text-muted, #6b7280);
}
/* ==========================================================================
Verwerfen (issue #165)
========================================================================== */
.kk-admin__discard {
display: inline-block;
margin-left: var(--spacing-sm);
}
.kk-admin__discard-summary {
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
user-select: none;
}
.kk-admin__discard-summary::-webkit-details-marker {
display: none;
}
.kk-admin__discard-summary::marker {
content: "";
}
.kk-admin__discard-form {
margin-top: var(--spacing-md);
padding: var(--spacing-md);
background-color: var(--background-color-extra-light);
border: 1px solid var(--border-color-light);
border-radius: var(--border-radius-md);
}
.kk-admin__discard-form .kk-admin__form-row {
margin-bottom: var(--spacing-sm);
display: flex;
flex-direction: column;
}
.kk-admin__discard-form .kk-admin__form-row label {
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-xs);
}
.kk-admin__discard-form .kk-admin__form-actions {
display: flex;
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
}
.kk-admin__field-error {
color: #b91c1c;
font-size: 0.8125rem;
margin-top: var(--spacing-xs);
}
}
@layer legacy {
/* === /static/css/pages/membership.bd937325c70d.css === */
/* Membership Page Styles
Page-scoped overrides only. Outer section wrappers, grids, and headings
come from the webdesign bundle (.wrapper.content-block, .equal-columns,
.content-collection, .content-headline). What remains here is form-
specific styling that the bundle does not cover and the benefits CTA
decoration block.
Figma Source: https://www.figma.com/design/FSny8QbxKhZTBFyiBeIR9B/Layout--Copy-?node-id=512-7306
Hero layout provided by components/page-hero.css
*/
/* ==========================================================================
Benefits Grid — two-column, left-aligned list of checkbox-icon benefits
========================================================================== */
.membership__benefits-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-750);
row-gap: var(--space-300);
max-width: 44rem;
margin-inline: auto;
margin-block-end: 0; /* UA-ul-Margin; block-start liefert die Owl-Regel des content-block */
padding: 0;
list-style: none;
}
.membership__benefit {
display: flex; /* .text-icon sets inline-flex; block-level as a grid item */
}
/* ==========================================================================
Benefits CTA — decorative icon + heading block at the end of the benefits section
========================================================================== */
.membership__benefits-cta {
display: flex;
align-items: center;
gap: var(--space-900);
width: fit-content;
margin-inline: auto;
}
.membership__benefits-cta-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
color: var(--color-text);
}
.membership__benefits-cta-text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.6;
}
.membership__benefits-cta-heading {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin: 0;
}
.membership__benefits-cta-description {
font-size: var(--font-size-h4);
color: var(--color-text);
margin: 0;
}
/* ==========================================================================
PDF Section — two pricing-width cards as a centered ~708px block
========================================================================== */
/* PDF-Sektion: Figma zeigt zwei Pricing-breite Karten als zentrierten
~708px-Block auf weißem Grund — equal-columns auf Lesebreite begrenzen. */
.membership__pdf-columns {
max-width: 44rem;
margin-inline: auto;
}
/* Kartentypografie an die bereits Figma-verifizierten Pricing-Karten
derselben Seite angleichen (.pricing-card__title/__description in
components/content-blocks.css). Keine margin-Properties — die
Owl-Regeln der Layout-Layer steuern den vertikalen Rhythmus. */
.membership__pdf-columns .card h3 {
font-size: var(--font-size-h4); /* wie .pricing-card__title */
}
.membership__pdf-columns .card p {
font-size: var(--font-size-small); /* wie .pricing-card__description */
color: var(--color-text-secondary);
line-height: 1.6;
}
.membership__pdf-columns .link--download {
font-size: var(--font-size-small);
}
/* ==========================================================================
Fieldsets — Section grouping with legends
========================================================================== */
.membership__fieldset {
border: none;
padding: 0;
margin: 0 0 var(--space-800);
}
.membership__fieldset-legend {
/* Webdesign --font-size-md (24px desktop): Figma-Legenden stehen eine
deutliche Stufe ueber den 18px-Feld-Labels. */
font-size: var(--font-size-md);
font-weight: var(--font-weight-bold);
color: var(--color-text);
margin-bottom: var(--space-300);
padding: 0;
}
.membership__fieldset-description {
font-size: var(--font-size-small);
font-style: italic;
line-height: var(--line-height-relaxed);
color: var(--color-text-secondary);
margin: 0 0 var(--space-500);
}
/* ==========================================================================
Form Grids (reusing kummerkasten pattern)
========================================================================== */
.membership__form-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--space-800);
row-gap: var(--space-600);
margin-bottom: var(--space-600);
}
.membership__form-grid-3 .form-field {
margin-bottom: 0;
}
.membership__form-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: var(--space-800);
row-gap: var(--space-600);
margin-bottom: var(--space-600);
}
.membership__form-grid-2 .form-field {
margin-bottom: 0;
}
.membership__form-grid-1 {
display: grid;
grid-template-columns: 1fr;
column-gap: var(--space-800);
row-gap: var(--space-600);
margin-bottom: var(--space-600);
}
.membership__form-full {
max-width: 66%;
margin-bottom: var(--space-700);
}
/* ==========================================================================
Family Members — Dynamic add/remove rows
========================================================================== */
.membership__family-row {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: clamp(16px, 3.2vw, 64px);
align-items: end;
margin-bottom: var(--space-700);
}
.membership__family-add,
.membership__family-remove {
display: inline-flex;
align-items: center;
gap: var(--space-500);
background: none;
border: none;
padding: 0;
font-size: var(--font-size-body);
color: var(--color-text);
cursor: pointer;
width: auto;
text-align: left;
}
.membership__family-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 2px;
color: var(--color-background);
font-size: var(--font-size-h4);
font-weight: var(--font-weight-bold);
line-height: 1;
}
.membership__family-add .membership__family-btn-icon {
background-color: var(--color-accent-secondary);
}
.membership__family-remove .membership__family-btn-icon {
background-color: var(--color-accent);
}
.membership__family-add:hover,
.membership__family-remove:hover {
text-decoration: underline;
}
.membership__family-add:focus-visible,
.membership__family-remove:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.membership__family-row .membership__family-remove {
align-self: center;
}
/* ==========================================================================
Consent Section (SEPA-Zustimmung, Informationsmaterial, Datenschutz)
========================================================================== */
.membership__consent {
margin-bottom: var(--space-500);
}
.membership__consent-label {
margin-bottom: var(--space-300);
}
/* ==========================================================================
Honeypot
========================================================================== */
.membership__honeypot {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Form Actions
========================================================================== */
.membership__form-actions {
display: flex;
justify-content: flex-start;
margin-top: var(--space-800);
}
/* ==========================================================================
Form Errors
========================================================================== */
.membership__form-errors {
padding: var(--space-500);
margin-bottom: var(--space-700);
background-color: var(--color-error-bg);
border: 1px solid var(--color-error);
border-radius: var(--border-radius-md);
}
.membership__form-error-title {
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
color: var(--color-error);
margin: 0 0 var(--space-300);
}
.membership__form-error-list {
list-style: none;
padding: 0;
margin: 0;
}
.membership__form-error-list li {
font-size: var(--font-size-small);
color: var(--color-error);
line-height: 1.5;
padding: var(--space-200) 0;
}
/* ==========================================================================
Success Message
========================================================================== */
.membership__success {
text-align: center;
padding: var(--space-900) var(--space-700);
}
.membership__success-icon {
width: 80px;
height: 80px;
margin: 0 auto var(--space-700);
color: var(--color-success);
}
.membership__success-heading {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin: 0 0 var(--space-500);
}
.membership__success-text {
font-size: var(--font-size-h5);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
max-width: 600px;
margin: 0 auto;
}
/* ==========================================================================
User Banner
========================================================================== */
.membership__user-banner {
background-color: var(--color-background-light);
border-radius: var(--border-radius-md);
padding: var(--space-500) var(--space-700);
margin-bottom: var(--space-800);
}
.membership__user-banner-text {
font-size: var(--font-size-small);
color: var(--color-text-secondary);
margin: 0;
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1023px) {
.membership__form-grid-3 {
grid-template-columns: repeat(2, 1fr);
}
.membership__family-row {
grid-template-columns: 1fr 1fr auto;
}
}
@media (max-width: 767px) {
.membership__form-grid-3,
.membership__form-grid-2 {
grid-template-columns: 1fr;
}
.membership__family-row {
grid-template-columns: 1fr;
gap: var(--space-500);
}
.membership__fieldset {
margin-bottom: var(--space-900);
}
.membership__form-full {
max-width: 100%;
}
.membership__benefits-cta {
flex-direction: column;
text-align: center;
gap: var(--space-500);
}
.membership__benefits-grid {
grid-template-columns: 1fr;
}
}
}
/* auth.css removed — Panel-Chrome lebt jetzt in main.css (kompiliert aus
scss/50-components/_c-auth-panel.scss). Spec:
docs/superpowers/specs/2026-07-20-mitgliederbereich-styling-design.md */
/* === /static/css/components/page-hero.f79dbb5f07e6.css === */
/* Page Hero Component
Shared hero layout for landing pages (spenden, membership, kummerkasten).
BEM naming: .page-hero, .page-hero__*
Title/subtitle color: per Figma (08_Mitglied_werden.png) both render
Delft-Blau, not the brand-flip red that --color-primary resolves to.
Use --color-accent-secondary (-> --brand-color-secondary) instead.
*/
/* ==========================================================================
Hero Section — Side-by-side: text left, image right
========================================================================== */
.page-hero {
padding-top: clamp(80px, 10vw, 180px);
padding-bottom: var(--space-800);
}
.page-hero__inner {
display: flex;
gap: clamp(40px, 5vw, 100px);
align-items: center;
max-width: var(--container-max-width);
margin-inline: auto;
padding-inline: var(--space-500);
}
.page-hero__content {
flex: 1;
min-width: 0;
}
.page-hero__title {
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-heading);
margin: 0 0 var(--space-500);
color: var(--color-accent-secondary);
}
.page-hero__subtitle {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
color: var(--color-accent-secondary);
margin: 0 0 var(--space-700);
letter-spacing: var(--letter-spacing-subheading);
}
.page-hero__description {
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-relaxed);
color: var(--color-text);
max-width: 720px;
margin: 0;
}
.page-hero__description p {
margin: 0 0 var(--space-500);
}
.page-hero__description p:last-child {
margin-bottom: 0;
}
.page-hero__image {
width: 40%;
flex-shrink: 0;
overflow: hidden;
}
.page-hero__img {
display: block;
width: 100%;
height: auto;
border-radius: var(--border-radius-card);
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 767px) {
.page-hero {
padding-top: var(--space-900);
padding-bottom: var(--space-900);
}
.page-hero__inner {
flex-direction: column;
}
.page-hero__image {
width: 80%;
margin-inline: auto;
}
}
/* === /static/css/pages/membership.bd937325c70d.css === */
/* Membership Page Styles
Page-scoped overrides only. Outer section wrappers, grids, and headings
come from the webdesign bundle (.wrapper.content-block, .equal-columns,
.content-collection, .content-headline). What remains here is form-
specific styling that the bundle does not cover and the benefits CTA
decoration block.
Figma Source: https://www.figma.com/design/FSny8QbxKhZTBFyiBeIR9B/Layout--Copy-?node-id=512-7306
Hero layout provided by components/page-hero.css
*/
/* ==========================================================================
Benefits Grid — two-column, left-aligned list of checkbox-icon benefits
========================================================================== */
.membership__benefits-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-750);
row-gap: var(--space-300);
max-width: 44rem;
margin-inline: auto;
margin-block-end: 0; /* UA-ul-Margin; block-start liefert die Owl-Regel des content-block */
padding: 0;
list-style: none;
}
.membership__benefit {
display: flex; /* .text-icon sets inline-flex; block-level as a grid item */
}
/* ==========================================================================
Benefits CTA — decorative icon + heading block at the end of the benefits section
========================================================================== */
.membership__benefits-cta {
display: flex;
align-items: center;
gap: var(--space-900);
width: fit-content;
margin-inline: auto;
}
.membership__benefits-cta-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
color: var(--color-text);
}
.membership__benefits-cta-text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.6;
}
.membership__benefits-cta-heading {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin: 0;
}
.membership__benefits-cta-description {
font-size: var(--font-size-h4);
color: var(--color-text);
margin: 0;
}
/* ==========================================================================
PDF Section — two pricing-width cards as a centered ~708px block
========================================================================== */
/* PDF-Sektion: Figma zeigt zwei Pricing-breite Karten als zentrierten
~708px-Block auf weißem Grund — equal-columns auf Lesebreite begrenzen. */
.membership__pdf-columns {
max-width: 44rem;
margin-inline: auto;
}
/* Kartentypografie an die bereits Figma-verifizierten Pricing-Karten
derselben Seite angleichen (.pricing-card__title/__description in
components/content-blocks.css). Keine margin-Properties — die
Owl-Regeln der Layout-Layer steuern den vertikalen Rhythmus. */
.membership__pdf-columns .card h3 {
font-size: var(--font-size-h4); /* wie .pricing-card__title */
}
.membership__pdf-columns .card p {
font-size: var(--font-size-small); /* wie .pricing-card__description */
color: var(--color-text-secondary);
line-height: 1.6;
}
.membership__pdf-columns .link--download {
font-size: var(--font-size-small);
}
/* ==========================================================================
Fieldsets — Section grouping with legends
========================================================================== */
.membership__fieldset {
border: none;
padding: 0;
margin: 0 0 var(--space-800);
}
.membership__fieldset-legend {
/* Webdesign --font-size-md (24px desktop): Figma-Legenden stehen eine
deutliche Stufe ueber den 18px-Feld-Labels. */
font-size: var(--font-size-md);
font-weight: var(--font-weight-bold);
color: var(--color-text);
margin-bottom: var(--space-300);
padding: 0;
}
.membership__fieldset-description {
font-size: var(--font-size-small);
font-style: italic;
line-height: var(--line-height-relaxed);
color: var(--color-text-secondary);
margin: 0 0 var(--space-500);
}
/* ==========================================================================
Form Grids (reusing kummerkasten pattern)
========================================================================== */
.membership__form-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--space-800);
row-gap: var(--space-600);
margin-bottom: var(--space-600);
}
.membership__form-grid-3 .form-field {
margin-bottom: 0;
}
.membership__form-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: var(--space-800);
row-gap: var(--space-600);
margin-bottom: var(--space-600);
}
.membership__form-grid-2 .form-field {
margin-bottom: 0;
}
.membership__form-grid-1 {
display: grid;
grid-template-columns: 1fr;
column-gap: var(--space-800);
row-gap: var(--space-600);
margin-bottom: var(--space-600);
}
.membership__form-full {
max-width: 66%;
margin-bottom: var(--space-700);
}
/* ==========================================================================
Family Members — Dynamic add/remove rows
========================================================================== */
.membership__family-row {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: clamp(16px, 3.2vw, 64px);
align-items: end;
margin-bottom: var(--space-700);
}
.membership__family-add,
.membership__family-remove {
display: inline-flex;
align-items: center;
gap: var(--space-500);
background: none;
border: none;
padding: 0;
font-size: var(--font-size-body);
color: var(--color-text);
cursor: pointer;
width: auto;
text-align: left;
}
.membership__family-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 2px;
color: var(--color-background);
font-size: var(--font-size-h4);
font-weight: var(--font-weight-bold);
line-height: 1;
}
.membership__family-add .membership__family-btn-icon {
background-color: var(--color-accent-secondary);
}
.membership__family-remove .membership__family-btn-icon {
background-color: var(--color-accent);
}
.membership__family-add:hover,
.membership__family-remove:hover {
text-decoration: underline;
}
.membership__family-add:focus-visible,
.membership__family-remove:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.membership__family-row .membership__family-remove {
align-self: center;
}
/* ==========================================================================
Consent Section (SEPA-Zustimmung, Informationsmaterial, Datenschutz)
========================================================================== */
.membership__consent {
margin-bottom: var(--space-500);
}
.membership__consent-label {
margin-bottom: var(--space-300);
}
/* ==========================================================================
Honeypot
========================================================================== */
.membership__honeypot {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Form Actions
========================================================================== */
.membership__form-actions {
display: flex;
justify-content: flex-start;
margin-top: var(--space-800);
}
/* ==========================================================================
Form Errors
========================================================================== */
.membership__form-errors {
padding: var(--space-500);
margin-bottom: var(--space-700);
background-color: var(--color-error-bg);
border: 1px solid var(--color-error);
border-radius: var(--border-radius-md);
}
.membership__form-error-title {
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
color: var(--color-error);
margin: 0 0 var(--space-300);
}
.membership__form-error-list {
list-style: none;
padding: 0;
margin: 0;
}
.membership__form-error-list li {
font-size: var(--font-size-small);
color: var(--color-error);
line-height: 1.5;
padding: var(--space-200) 0;
}
/* ==========================================================================
Success Message
========================================================================== */
.membership__success {
text-align: center;
padding: var(--space-900) var(--space-700);
}
.membership__success-icon {
width: 80px;
height: 80px;
margin: 0 auto var(--space-700);
color: var(--color-success);
}
.membership__success-heading {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin: 0 0 var(--space-500);
}
.membership__success-text {
font-size: var(--font-size-h5);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
max-width: 600px;
margin: 0 auto;
}
/* ==========================================================================
User Banner
========================================================================== */
.membership__user-banner {
background-color: var(--color-background-light);
border-radius: var(--border-radius-md);
padding: var(--space-500) var(--space-700);
margin-bottom: var(--space-800);
}
.membership__user-banner-text {
font-size: var(--font-size-small);
color: var(--color-text-secondary);
margin: 0;
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1023px) {
.membership__form-grid-3 {
grid-template-columns: repeat(2, 1fr);
}
.membership__family-row {
grid-template-columns: 1fr 1fr auto;
}
}
@media (max-width: 767px) {
.membership__form-grid-3,
.membership__form-grid-2 {
grid-template-columns: 1fr;
}
.membership__family-row {
grid-template-columns: 1fr;
gap: var(--space-500);
}
.membership__fieldset {
margin-bottom: var(--space-900);
}
.membership__form-full {
max-width: 100%;
}
.membership__benefits-cta {
flex-direction: column;
text-align: center;
gap: var(--space-500);
}
.membership__benefits-grid {
grid-template-columns: 1fr;
}
}