/* kw-bundle-quellen: css/style.css, css/custom.css, css/sections.css */ .ws-block{display:contents} [data-kw-bg][style*="url("] > .beschriftung{display:none} [data-m-ueberlappung="klein"]{margin-top:-96px;position:relative;z-index:1} [data-m-ueberlappung="mittel"]{margin-top:-192px;position:relative;z-index:1} [data-m-ueberlappung="gross"]{margin-top:-288px;position:relative;z-index:1} [data-m-ueberlappung]{background:transparent !important} [data-m-ueberlappung] > section{background:transparent !important} @media(max-width:700px){[data-m-ueberlappung]{margin-top:0}} [data-m-breite="full-bleed"]{--container-max:none;--container-px:0px} [data-m-breite="full-bleed"] .container{width:100%} [data-m-hoehe="schmal"]{--m-heroh:60} [data-m-hoehe="mittel"]{--m-heroh:85} [data-m-hoehe="hoch"]{--m-heroh:100} [data-m-spalten="1"]{--m-spalten:1} [data-m-spalten="2"]{--m-spalten:2} [data-m-spalten="3"]{--m-spalten:3} [data-m-spalten="4"]{--m-spalten:4} [data-m-spalten="5"]{--m-spalten:5} [data-m-spalten="6"]{--m-spalten:6} [data-m-ausrichtung="links"]{--m-ausr-media:-1} [data-m-ausrichtung="rechts"]{--m-ausr-media:2} @media(max-width:960px){[data-m-ausrichtung]{--m-ausr-media:0}} [data-m-overlay="hell"],[data-m-overlay="dunkel"]{position:absolute;inset:0 auto auto 0;width:100%;z-index:20;--m-nav-bg:transparent} [data-m-overlay="hell"]{--m-nav-fg:var(--c-white)} [data-m-overlay="dunkel"]{--m-nav-fg:var(--t-primary)} html.dsjs [data-animate],html.dsjs .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--motion-slow,400ms) var(--ease-standard,cubic-bezier(.2,0,0,1)),transform var(--motion-slow,400ms) var(--ease-standard,cubic-bezier(.2,0,0,1))}html.dsjs [data-animate].visible,html.dsjs .reveal.visible{opacity:1;transform:none}html.dsjs [data-animate="stagger-children"]{opacity:1;transform:none;transition:none}html.dsjs [data-animate="stagger-children"]>*{opacity:0;transform:translateY(14px);transition:opacity var(--motion-slow,400ms) var(--ease-standard,cubic-bezier(.2,0,0,1)),transform var(--motion-slow,400ms) var(--ease-standard,cubic-bezier(.2,0,0,1));transition-delay:var(--stagger-delay,0ms)}html.dsjs [data-animate="stagger-children"].visible>*{opacity:1;transform:none} @font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/open-sans-400.woff2") format("woff2");} @font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/open-sans-600.woff2") format("woff2");} @font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/open-sans-700.woff2") format("woff2");} :root{ --c-primary:#1e76c2; --c-primary-mid:#144f81; --c-primary-dark:#0a2741; --c-secondary:#0a1642; --c-secondary-mid:#070f2c; --c-secondary-dark:#030716; --c-tertiary:#5c6e94; --c-tertiary-mid:#3d4963; --c-tertiary-dark:#1f2531; --c-neutral:#d1d2d5; --c-neutral-mid:#8b8c8e; --c-neutral-dark:#464647; --c-neutral-light:#f0f0f1; --c-white:#ffffff; --c-black:#000000; --t-primary:var(--c-secondary); --t-secondary:var(--c-tertiary-mid); --c-surface: var(--c-white); --c-surface-subtle: var(--c-neutral-light); --c-surface-muted: var(--c-neutral); --c-field: var(--c-white); --c-border: color-mix(in srgb, var(--t-primary) 12%, transparent); --c-fill: var(--c-tertiary); --t-muted: var(--c-neutral-dark); --t-tertiary: var(--c-primary-dark); --font: var(--font-body, "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif); --fs-display: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); --lh-heading:1.3 ; --lh-body: 1.6; --r-card:16px ; --r-sm:12px; --r-btn: 8px; --r-pill: 9999px; --bw: var(--bw-card, 2px); --space-inline: var(--sp-2, .5rem); --space-stack: var(--sp-4, 1rem); --space-stack-lg: var(--sp-5, 1.5rem); --space-card-pad: var(--sp-4, 1rem); --space-card-pad-lg: var(--sp-6, 2rem); --space-card-pad-xl: var(--sp-7, 3rem); --space-field-gap: var(--sp-4, 1rem); --space-head-gap: var(--sp-7, 3rem); --space-list-gap: var(--sp-2, .5rem); --space-card-gap: var(--sp-4, 1rem); --space-seg-gap: .25rem; --section-py: var(--sp-9, 6rem); --sp-xxs:var(--sp-3,.75rem); --sp-xs:var(--sp-5,1.5rem); --sp-sm:var(--sp-6,2rem); --sp-md:var(--sp-7,3rem); --sp-lg:var(--sp-8,4rem); --sp-xl:var(--sp-9,6rem); --sp-xxl:8rem; --mg-xxs:var(--sp-2,.5rem); --mg-xs:var(--sp-3,.75rem); --mg-sm:var(--sp-4,1rem); --mg-md:var(--sp-5,1.5rem); --mg-lg:var(--sp-6,2rem); --mg-xl:var(--sp-7,3rem); --mg-xxl:var(--sp-8,4rem); --gap-btn:var(--sp-4,1rem); --gap-main:2.5rem ; --gap-md:1.25rem ; --gap-sm:var(--sp-2,.5rem); --container-max:1248px; --container-px:24px; --grid-gutter:24px; --nav-h:72px; --space-text-pair: var(--sp-2, .5rem); --c-primary-container: color-mix(in srgb, var(--c-primary) 12%, var(--c-white)); --c-on-primary-container: var(--c-primary-dark); --c-secondary-container: color-mix(in srgb, var(--c-secondary) 10%, var(--c-white)); --c-on-secondary-container: var(--c-secondary-dark); --c-tertiary-container: color-mix(in srgb, var(--c-tertiary) 12%, var(--c-white)); --c-on-tertiary-container: var(--c-tertiary-dark); --c-outline: color-mix(in srgb, var(--t-primary) 24%, transparent); --c-outline-variant: var(--c-border); --c-inverse-surface: var(--c-secondary-dark); --c-inverse-on-surface: var(--c-white); --c-inverse-on-surface-2: color-mix(in srgb, var(--c-white) 78%, transparent); --fs-quote: clamp(1.375rem, 1.2rem + .75vw, 1.75rem); --fs-title-lg: 1.25rem; --fs-title: 1.125rem; --fs-title-sm: 1rem; --fs-body-sm: .875rem; --fs-label: 1rem; --fs-label-sm: .875rem; --lh-title: 1.35; --lh-label: 1.4; --sp-20: 1.25rem; --sp-40: 2.5rem; --sp-56: 3.5rem; --sp-80: 5rem; --shadow-lg: 0 16px 48px color-mix(in srgb, var(--c-secondary) 16%, transparent); --motion-fast: 150ms; --motion-base: 250ms; --motion-slow: 400ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-emphasized: cubic-bezier(.3, 0, 0, 1); } :root{ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --fs-h1:clamp(2rem, 1.63rem + 1.52vw, 3rem); --fs-h2:clamp(1.75rem, 1.56rem + .76vw, 2.25rem); --fs-h3:clamp(1.5rem, 1.41rem + .38vw, 1.75rem); --fs-h4:clamp(1.25rem, 1.16rem + .38vw, 1.5rem); --fs-h5:clamp(1.125rem, 1.08rem + .19vw, 1.25rem); --fs-h6:clamp(1rem, .95rem + .19vw, 1.125rem); --fs-body:1rem; --fw-regular:400; --fw-semibold:600; --fw-bold:700; --c-primary-light:color-mix(in srgb, var(--c-primary) 22%, var(--c-white)); --c-on-primary:var(--c-white); --c-on-secondary:var(--c-white); --c-on-tertiary:var(--c-white); --c-on-fill:var(--c-white); --c-success:#2f7d4f; --c-success-bg:color-mix(in srgb, #2f7d4f 12%, var(--c-white)); --c-error:#c0392b; --c-error-bg:color-mix(in srgb, #c0392b 12%, var(--c-white)); --shadow-sm:0 2px 8px color-mix(in srgb, var(--c-secondary) 8%, transparent); --shadow-md:0 8px 28px color-mix(in srgb, var(--c-secondary) 12%, transparent); } @media (max-width:1024px){ :root{ --section-py:var(--sp-8,4rem); } } @media (max-width: 767px){ :root{ --section-py:var(--sp-7,3rem); --grid-gutter:16px; --container-px:16px; } } :root{ --border-w: var(--bw); --t-neutral: var(--t-muted); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--font); font-size:1rem; font-weight:400; line-height:var(--lh-body); color:var(--t-secondary, #2c3b3d); background:var(--c-surface); -webkit-font-smoothing:antialiased; } a{text-decoration:none;color:inherit} ul,ol{list-style:none} img,svg{display:block;max-width:100%} button{font:inherit;cursor:pointer;border:none;background:none} input,textarea,select{font:inherit} .container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-px)} .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gutter);align-items:start} .col-span-1{grid-column:span 1}.col-span-2{grid-column:span 2}.col-span-3{grid-column:span 3} .col-span-4{grid-column:span 4}.col-span-5{grid-column:span 5}.col-span-6{grid-column:span 6} .col-span-7{grid-column:span 7}.col-span-8{grid-column:span 8}.col-span-9{grid-column:span 9} .col-span-10{grid-column:span 10}.col-span-11{grid-column:span 11}.col-span-12{grid-column:span 12} .col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.col-start-3{grid-column-start:3} .col-start-4{grid-column-start:4}.col-start-5{grid-column-start:5}.col-start-6{grid-column-start:6} .col-start-7{grid-column-start:7}.col-start-8{grid-column-start:8}.col-start-9{grid-column-start:9} .col-start-10{grid-column-start:10}.col-start-11{grid-column-start:11}.col-start-12{grid-column-start:12} [class*="col-start-"].col-span-1{grid-column-end:span 1}[class*="col-start-"].col-span-2{grid-column-end:span 2} [class*="col-start-"].col-span-3{grid-column-end:span 3}[class*="col-start-"].col-span-4{grid-column-end:span 4} [class*="col-start-"].col-span-5{grid-column-end:span 5}[class*="col-start-"].col-span-6{grid-column-end:span 6} [class*="col-start-"].col-span-7{grid-column-end:span 7}[class*="col-start-"].col-span-8{grid-column-end:span 8} [class*="col-start-"].col-span-9{grid-column-end:span 9}[class*="col-start-"].col-span-10{grid-column-end:span 10} [class*="col-start-"].col-span-11{grid-column-end:span 11}[class*="col-start-"].col-span-12{grid-column-end:span 12} @media (max-width:1024px){ .grid{grid-template-columns:repeat(8,1fr)} .col-span-9,.col-span-10,.col-span-11,.col-span-12{grid-column:span 8} [class*="col-start-"]{grid-column-start:auto} .col-t-1{grid-column:span 1}.col-t-2{grid-column:span 2}.col-t-3{grid-column:span 3}.col-t-4{grid-column:span 4} .col-t-5{grid-column:span 5}.col-t-6{grid-column:span 6}.col-t-7{grid-column:span 7}.col-t-8{grid-column:span 8} } @media (max-width:767px){ .grid{grid-template-columns:repeat(4,1fr)} .grid>*{grid-column:1 / -1} .col-m-1{grid-column:span 1}.col-m-2{grid-column:span 2}.col-m-3{grid-column:span 3}.col-m-4{grid-column:span 4} } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:var(--font-heading, var(--font)); font-weight:var(--fw-heading, 700); line-height:var(--lh-heading); letter-spacing:-.01em; color:var(--t-primary, #003c41); } h1,.h1{font-size:var(--fs-h1, clamp(2rem, 1.5rem + 2.2vw, 2.75rem));margin-bottom:var(--space-text-pair, .5rem)} h2,.h2{font-size:var(--fs-h2, clamp(1.6rem, 1.25rem + 1.7vw, 2.25rem));margin-bottom:var(--space-text-pair, .5rem)} h3,.h3{font-size:var(--fs-h3, clamp(1.35rem, 1.15rem + .9vw, 1.75rem));margin-bottom:var(--space-text-pair, .5rem)} h4,.h4{font-size:var(--fs-h4, 1.5rem);margin-bottom:var(--space-text-pair, .5rem)} h5,.h5{font-size:var(--fs-h5, 1.25rem);margin-bottom:var(--space-text-pair, .5rem)} h6,.h6{font-size:var(--fs-h6, 1.125rem);margin-bottom:var(--space-text-pair, .5rem)} p{font-size:var(--fs-body, 1rem);line-height:var(--lh-body);margin-bottom:var(--space-stack, 1rem);max-width:65ch} p:last-child{margin-bottom:0} .preheadline{font-size:var(--fs-label, 1rem);line-height:1.25;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-text-pair, .5rem);display:block;color:var(--c-primary)} .subheadline{font-size:var(--fs-title, 1.125rem);line-height:1.66;font-weight:400;margin-bottom:var(--space-stack, 1rem)} .text-white,.text-white h1,.text-white h2,.text-white h3,.text-white h4,.text-white h5,.text-white h6, .text-white p,.text-white .preheadline,.text-white .subheadline{color:var(--c-white)} .text-white-muted{color:color-mix(in srgb, var(--c-white) 78%, transparent)} .btn{ display:inline-flex;align-items:center;gap:var(--gap-btn); padding:.75rem 1.5rem;font-family:var(--font);font-size:var(--fs-label, 1rem);font-weight:600;line-height:1.4;text-transform:uppercase;letter-spacing:.05em; border-radius:var(--r-btn);border:var(--bw) solid transparent;cursor:pointer;white-space:normal;text-align:center;justify-content:center; transition:background .2s ease,border-color .2s ease,color .2s ease; } .btn:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px} .btn--primary{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-white)} .btn--primary:hover{background:var(--c-tertiary);border-color:var(--c-tertiary)} .btn--primary:active{background:var(--c-primary-dark);border-color:var(--c-tertiary-dark)} .btn--ghost{background:var(--c-white);border-color:var(--c-primary);color:var(--t-primary)} .btn--ghost:hover{background:var(--c-secondary);border-color:var(--c-tertiary);color:var(--c-on-secondary)} .btn--ghost:active{background:var(--c-neutral);border-color:var(--c-primary-dark)} .btn--back{background:var(--c-secondary);border-color:var(--c-neutral);color:var(--t-primary)} .btn--back:hover{background:var(--c-neutral);border-color:var(--c-neutral-dark)} .btn--kompakt{font-size:var(--fs-body-sm)} .cta-link{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--c-primary-dark);transition:color var(--motion-base)} .cta-link:hover{color:var(--c-primary)} .cta-link--light{color:var(--c-primary)} .cta-link--light:hover{color:var(--c-white)} .card{background:var(--c-white);border:var(--bw) solid var(--c-secondary);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column} .card__img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--c-secondary-dark)} .card__img-placeholder{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,var(--c-secondary-dark),var(--c-neutral-dark));display:flex;align-items:center;justify-content:center} .card__img-placeholder svg{opacity:.3} .card__body{padding:1.5rem;display:flex;flex-direction:column;flex:1;gap:var(--mg-xs)} .card__kicker{font-size:.875rem;font-weight:600;color:var(--c-primary-dark)} .card__title{color:var(--t-primary);margin-bottom:0} .card__text{color:var(--t-secondary);font-size:var(--fs-body, 1rem);flex:1} .field{margin-bottom:var(--space-field-gap)} .field label{display:block;font-size:var(--fs-label-sm, .875rem);color:var(--t-secondary);margin-bottom:var(--space-text-pair, .5rem);font-weight:600} .field input,.field textarea,.field select{ width:100%;border:1px solid var(--c-border);border-radius:var(--r-btn); padding:.8125rem .9375rem;background:var(--c-field);color:var(--t-primary); } .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-primary) 22%, transparent)} .u-sr-only,.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} .u-text-center{text-align:center} .u-img-cover{width:100%;height:100%;object-fit:cover} .img-bg-dark{background:linear-gradient(135deg,var(--c-secondary-dark) 0%,var(--c-neutral-dark) 100%)} @media (max-width:1024px){ } @media (max-width:767px){ } html.dsjs .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease} html.dsjs .reveal.visible{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){html.dsjs .reveal{opacity:1;transform:none;transition:none}} .embed{position:relative;overflow:hidden;aspect-ratio:16/9; border-radius:var(--r-card,1rem); background:var(--c-surface-subtle,var(--c-neutral-light,#f6f7f9))} .embed__gate{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center; gap:var(--space-stack,var(--sp-4,1rem)); padding:var(--space-card-pad-lg,var(--sp-6,2rem))} .embed__text{max-width:52ch;margin:0; color:var(--t-secondary,var(--c-tertiary-mid,currentColor)); font-size:var(--fs-body-sm,.875rem)} .embed>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} :root{ --c-primary: #023a51; --c-primary-mid: #023144; --c-primary-dark: #012736; --c-secondary: #121411; --c-secondary-mid: #0c0e0c; --c-secondary-dark: #060706; --c-tertiary: #10688e; --c-tertiary-mid: #0e5777; --c-tertiary-dark: #0b455f; --c-neutral: #efefef; --c-neutral-mid: #cccccc; --c-neutral-dark: #494949; --c-neutral-light: #fdfdfd; --c-white: #ffffff; --c-black: #000000; --c-on-primary: var(--c-white); --c-on-secondary: var(--c-white); --c-on-tertiary: var(--c-white); --c-on-fill: var(--c-white); --c-accent-1: #023a51; --c-accent-2: #023a51; --c-accent-3: #023a51; --c-accent-4: #023a51; --c-accent-5: #023a51; --t-primary: #060706; --t-secondary: #121411; --t-negativ: #ffffff; --t-positiv: #121411; --c-primary-container: #e1e7ea; --c-on-primary-container: var(--c-primary-dark); --c-secondary-container: #e7e8e7; --c-on-secondary-container: var(--c-secondary-dark); --c-tertiary-container: #e2edf1; --c-on-tertiary-container: var(--c-tertiary-dark); --c-inverse-surface: #060706; --c-inverse-on-surface: var(--c-white); --c-inverse-on-surface-2: color-mix(in srgb, var(--c-white) 78%, transparent); --font-heading: "Outfit", sans-serif; --font-body: "Outfit", sans-serif; --fw-heading: 700; --fw-body: 400; --fs-h1: 2.5rem; --fs-h2: 2rem; --fs-h3: 1.75rem; --fs-h4: 1.5rem; --fs-h5: 1.25rem; --fs-h6: 1.25rem; --r-card: 8px; --r-btn: 4px; --r-pill: 9999px; --bw-card: 2px; --bw-btn: 1px; --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; } @font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap; src:url("../outfit-latin-vf.woff2") format("woff2")} @font-face{font-family:"Outfit Custom";font-style:normal;font-weight:100 900;font-display:swap; src:url("../outfit-latin-vf.woff2") format("woff2")} :root{ --r-sm: calc(var(--r-card, 8px) * .75); } body .sec-294 .cobp__ph, body .sec-297 .modal__ph{ border-radius: var(--r-card, 8px); } body .sec-125 .imgacc__panel{ border-radius: var(--r-card, 8px); } @media (min-width: 1025px){ body .sec-125 .imgacc__panel{ border-radius: 0; } body .sec-125 .imgacc__panel:first-child{ border-radius: var(--r-card, 8px) 0 0 var(--r-card, 8px); } body .sec-125 .imgacc__panel:last-child{ border-radius: 0 var(--r-card, 8px) var(--r-card, 8px) 0; } } body .sec-125 .imgacc__panel.active .imgacc__content{ border-radius: var(--r-sm, 6px); } body .sec-145 .bfaq__list .accordion-item, body .sec-145 .bfaq__cta{ border-radius: var(--r-card, 8px); } body .sec-297 .flm__knopf:nth-child(1 of .flm__knopf){ border-start-start-radius: var(--r-card, 8px); } body .sec-297 .flm__knopf:nth-last-child(1 of .flm__knopf){ border-end-start-radius: var(--r-card, 8px); } body .sec-145 .bfaq__list .accordion-item{ /* 05.10.2026: war --bw-btn (1px). Das Akkordeon ist ein kartenartiger Container, kein Knopf — es gehoert damit zu --bw-card (2px), wie Karten und Formularfelder. Alle uebrigen --bw-btn-Stellen sind tatsaechlich Knoepfe, Unterstriche oder die Upload-Flaeche und bleiben unberuehrt. */ /* 05.10.2026: box-shadow entfernt. Das Weglassen allein genuegte NICHT — sections.css setzt fuer den geoeffneten Zustand noch einmal `box-shadow: var(--shadow-sm)`, und sections.css steht im Bundle NACH custom.css. Deshalb hier ausdruecklich `none` mit dem body-Praefix, das die noetige Spezifitaet bringt. Der Rahmen traegt die Abgrenzung allein. */ border: var(--bw-card, 2px) solid var(--c-border, rgba(0,0,0,.12)); box-shadow: none; } body .sec-145 .bfaq__list .accordion-item:has(details[open]){ border-color: var(--c-outline, rgba(0,0,0,.24)); box-shadow: none; } body .sec-297 .modal, body .sec-289 .modal{ position: fixed; inset: 0; } .cta-link{ border-bottom: var(--bw-btn, 1px) solid currentColor; padding-bottom: var(--sp-1, .25rem); align-self: flex-start; } body [data-sec="LAB-HERO-015"], body [data-sec="LAB-CRD-010"] .kart118{ --kart-spalten: 3; --kart-bildhoehe: calc( (min(var(--container-max, 1248px), 100vw) - 2 * var(--container-px, 24px) - (var(--kart-spalten) - 1) * var(--grid-gutter, 24px)) / var(--kart-spalten) * 9 / 16); --kart-ueberlappung: calc(var(--kart-bildhoehe) / 2); } @media (min-width: 1025px){ body [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="1"]{ --kart-spalten: 1; } body [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="2"]{ --kart-spalten: 2; } body [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="4"]{ --kart-spalten: 4; } body [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="5"]{ --kart-spalten: 5; } body [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="6"]{ --kart-spalten: 6; } body [data-sec="LAB-HERO-015"]:has(+ [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="1"]){ --kart-spalten: 1; } body [data-sec="LAB-HERO-015"]:has(+ [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="2"]){ --kart-spalten: 2; } body [data-sec="LAB-HERO-015"]:has(+ [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="4"]){ --kart-spalten: 4; } body [data-sec="LAB-HERO-015"]:has(+ [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="5"]){ --kart-spalten: 5; } body [data-sec="LAB-HERO-015"]:has(+ [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="6"]){ --kart-spalten: 6; } } @media (max-width: 1024px){ body [data-sec="LAB-HERO-015"], body [data-sec="LAB-CRD-010"] .kart118{ --kart-spalten: 2; } } @media (max-width: 767px){ body [data-sec="LAB-HERO-015"], body [data-sec="LAB-CRD-010"] .kart118{ --kart-spalten: 1; --kart-ueberlappung: min(calc(var(--kart-bildhoehe) / 2), var(--sp-9, 6rem)); } } body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118{ position: relative; z-index: 1; margin-top: calc(-1 * var(--kart-ueberlappung)); padding-top: 0; background: transparent; } body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118::before{ content: ''; position: absolute; z-index: -1; inset: var(--kart-ueberlappung) 0 0 0; background: var(--c-neutral-light); } body .sec-291 .nvg__logo{ display: block; block-size: 2.25rem; inline-size: auto; max-inline-size: 100%; } @media (max-width: 1199px){ body .sec-291 .nvg__logo{ block-size: 1.875rem; } } body .sec-292 .kst__embed{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2, .5rem); } body .sec-292 .kst__embed > iframe{ min-height: 155px; } body .sec-292 .kst__profil{ font-size: var(--fs-body-sm, .875rem); color: var(--c-primary-dark, #253746); } @media (max-width: 1024px){ body .sec-239 .grid > :nth-child(5){ order: 5; } body .sec-239 .grid > :nth-child(6){ order: 6; } body .sec-239 .grid > :nth-child(7){ order: 8; } body .sec-239 .grid > :nth-child(8){ order: 7; } } body .sec-281 .ep__contact{ gap: var(--sp-3, .75rem); } body .sec-281 .ep__contact a{ font-size: var(--fs-body, 1rem); gap: var(--sp-3, .75rem); } body .sec-281 .ep__ico{ inline-size: 1.375rem; block-size: 1.375rem; } body .sec-281 .ep__pfeil{ inline-size: 1rem; block-size: 1rem; } body .sec-283 .kf{ grid-column: 1 / -1; } @supports selector(::details-content){ body .sec-145 .bfaq__list{ interpolate-size: allow-keywords; } body .sec-145 .bfaq__list details::details-content{ block-size: 0; overflow: hidden; transition: block-size var(--motion-base, 250ms) var(--ease-standard, cubic-bezier(.2,0,0,1)), content-visibility var(--motion-base, 250ms) allow-discrete; } body .sec-145 .bfaq__list details[open]::details-content{ block-size: auto; } @media (prefers-reduced-motion: reduce){ body .sec-145 .bfaq__list details::details-content{ transition: none; } } } body .sec-145 .bfaq__list .accordion-item{ transition: box-shadow var(--motion-base, 250ms) var(--ease-standard, cubic-bezier(.2,0,0,1)), border-color var(--motion-base, 250ms) var(--ease-standard, cubic-bezier(.2,0,0,1)); } body .sec-295 .uspb__box, body .sec-293 .pctr__karte{ border-radius: var(--r-card, 8px); } body .sec-289 .mpk__haken, body .sec-294 .cobp__check{ inline-size: 22px; block-size: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c-primary, #253746) 12%, transparent); color: var(--c-primary-dark, #1b2731); } body .sec-289 .mpk__haken{ margin-top: 1px; } body .sec-289 .mpk__haken svg{ inline-size: 12px; block-size: 12px; } :root{ --t-negativ: var(--c-error, #c0392b); } body .sec-296 .hinw__box{ border-radius: var(--r-card, 8px); overflow: hidden; } .sec-180 .hero-e .hero-e__titel{ font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -1.5px; font-weight: 700; color: var(--c-white, #fff); margin: 0 0 var(--space-stack-lg, 1.5rem); text-wrap: balance; } .sec-286 .pcta__text h3{ margin-bottom: var(--space-stack, 1rem); } .sec-145 .accordion-content_spacer p{ font-size: inherit; line-height: inherit; } .sec-145 .accordion-content_spacer p:last-child{ margin-bottom: 0; } .sec-145 .accordion-content_spacer ul{ list-style: disc; padding-left: 1.25rem; margin: 0 0 var(--space-stack, 1rem); } .sec-145 .accordion-content_spacer ul:last-child{ margin-bottom: 0; } .sec-145 .accordion-content_spacer li + li{ margin-top: .35rem; } body .sec-297 .flm__fab{ display: none; } @media (max-width: 767px){ body .sec-297 .flm{ inset-block-start: auto; inset-block-end: calc(var(--sp-5, 1.5rem) + env(safe-area-inset-bottom, 0px)); inset-inline-end: var(--sp-4, 1rem); transform: none; align-items: flex-end; gap: var(--sp-3, .75rem); } body .sec-297 .flm__knopf{ display: flex; align-items: center; padding: var(--sp-3, .75rem) var(--sp-5, 1.5rem); border: 0; border-radius: var(--r-pill, 9999px); background: var(--c-secondary, #121411); color: var(--c-white, #fff); box-shadow: var(--shadow-md); transition: opacity var(--motion-base, 250ms) var(--ease-standard, cubic-bezier(.2,0,0,1)), transform var(--motion-base, 250ms) var(--ease-standard, cubic-bezier(.2,0,0,1)), visibility var(--motion-base, 250ms); } body .sec-297 .flm__knopf:nth-child(1 of .flm__knopf), body .sec-297 .flm__knopf:nth-last-child(1 of .flm__knopf){ border-radius: var(--r-pill, 9999px); } body .sec-297 .flm__knopf--voll{ background: var(--c-primary, #253746); } body .sec-297 .flm__knopf:hover{ background: var(--c-primary-dark, #1b2731); } body .sec-297 .flm__label{ writing-mode: horizontal-tb; transform: none; white-space: nowrap; } body .sec-297 .flm:not([data-offen="ja"]) .flm__knopf{ opacity: 0; visibility: hidden; transform: translateY(var(--sp-2, .5rem)); pointer-events: none; } body .sec-297 .flm__fab{ display: flex; align-items: center; justify-content: center; inline-size: 3.5rem; block-size: 3.5rem; padding: 0; border: 0; border-radius: var(--r-pill, 9999px); background: var(--c-primary, #253746); color: var(--c-white, #fff); box-shadow: var(--shadow-md); cursor: pointer; transition: background var(--motion-base, 250ms) var(--ease-standard, cubic-bezier(.2,0,0,1)); } body .sec-297 .flm__fab:hover{ background: var(--c-primary-dark, #1b2731); } body .sec-297 .flm__fab:focus-visible{ outline: 2px solid var(--c-primary, #253746); outline-offset: 3px; } body .sec-297 .flm__fab svg{ inline-size: 1.5rem; block-size: 1.5rem; display: block; } body .sec-297 .flm__fab-auf, body .sec-297 .flm__fab-zu{ display: flex; } body .sec-297 .flm__fab-zu{ display: none; } body .sec-297 .flm[data-offen="ja"] .flm__fab-auf{ display: none; } body .sec-297 .flm[data-offen="ja"] .flm__fab-zu{ display: flex; } } .sec-283 .kf__kopf{ margin-bottom: var(--space-head-gap, 3rem); } .sec-283 .kf__kopf h2{ margin-bottom: 0; } .sec-071 .lfp__liste{ list-style: disc; padding-left: 1.25rem; margin: 0 0 var(--space-stack, 1rem); max-width: 65ch; } .sec-071 .lfp__liste li + li{ margin-top: .35rem; } body .sec-285 .mkz__logo.mkz__logo--nativ{ inline-size: 8.125rem; block-size: 3.125rem; object-fit: contain; } body .sec-285 .marquee-group > a{ display: flex; align-items: center; flex-shrink: 0; } body .sec-288 .ftr__logo{ block-size: auto; max-block-size: 2.5rem; max-inline-size: 7.5rem; } .sec-295 .grid > .uspb__text:only-child{ grid-column: 1 / -1; } body .sec-281 .ep__media{ background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; background-color: var(--c-neutral-light, #f6f7f9); } body [data-sec="LAB-HERO-015"] .hero-e:has(> .hero-e__bg[style*="background-image"]), body [data-sec="LAB-HERO-015"] .hero-e:has(> .hero-e__bg > .kw-ki-leinwand){ background: linear-gradient(to top, color-mix(in srgb, var(--c-secondary-dark) 78%, transparent) 0%, color-mix(in srgb, var(--c-secondary-dark) 30%, transparent) 42%, color-mix(in srgb, var(--c-secondary-dark) 5%, transparent) 68%); } body .sec-291 .nvg{ --nav-h: 84px; --sec-markenblock: 19.5rem; } body .sec-290 .tpb{ --sec-markenblock: 19.5rem; } body .sec-291 .nvg{ --kopf-topbar: 2.75rem; } body .sec-291 .nvg__marke{ margin-block-start: calc(-1 * var(--kopf-topbar)); padding-inline-start: calc(50vw - 50% + var(--sp-5, 1.5rem)); padding-inline-end: var(--sp-5, 1.5rem); justify-content: flex-start; } body .sec-291 img.nvg__logo{ block-size: 61px; inline-size: auto; max-inline-size: 100%; } body .sec-290 .tpb, body .sec-291 .nvg{ --kopf-versatz: var(--sp-5, 1.5rem); } body .sec-290 .tpb__innen{ gap: var(--kopf-versatz); } body .sec-291 .nvg__innen{ gap: 0; } body .sec-291 .nvg__panel{ margin-inline-start: var(--kopf-versatz); } body .sec-291 .nvg__werkzeuge{ margin-inline-start: auto; } body .sec-291 .nvg__link{ font-size: var(--fs-body, 1rem); } body .sec-291 .nvg__item:has(> .nvg__sub) > .nvg__link::after{ content: ''; inline-size: .42em; block-size: .42em; margin-inline-start: .5em; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform var(--motion-fast, 150ms) var(--ease-standard, ease); } body .sec-291 .nvg__item:has(> .nvg__sub):hover > .nvg__link::after, body .sec-291 .nvg__item:has(> .nvg__sub):focus-within > .nvg__link::after{ transform: translateY(.1em) rotate(225deg); } body .sec-291 .nvg__gruppe{ display: flex; flex-direction: column; } body .sec-291 .nvg__enkel{ display: none; flex-direction: column; } body .sec-291 .nvg__sub{ --nav-stufe: var(--sp-4, 1rem); } body .sec-291 .nvg__sublink[data-nav-tiefe="3"]{ padding-inline-start: calc(var(--sp-4, 1rem) + var(--nav-stufe)); } body .sec-291 .nvg__gruppe:hover > .nvg__enkel, body .sec-291 .nvg__gruppe:focus-within > .nvg__enkel{ display: flex; } body .sec-291 .nvg__sublink[data-nav-gruppe="1"]{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3, .75rem); } body .sec-291 .nvg__sublink[data-nav-gruppe="1"]::after{ content: ''; inline-size: .42em; block-size: .42em; flex: 0 0 auto; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform var(--motion-fast, 150ms) var(--ease-standard, ease); } body .sec-291 .nvg__gruppe:hover > .nvg__sublink[data-nav-gruppe="1"]::after, body .sec-291 .nvg__gruppe:focus-within > .nvg__sublink[data-nav-gruppe="1"]::after{ transform: translateY(.1em) rotate(225deg); } body .sec-290{ position: sticky; top: 0; z-index: 500; } body .sec-291{ position: sticky; top: 2.75rem; z-index: 510; } @media (max-width: 1199px){ body .sec-291 .nvg{ --sec-markenblock: 14rem; } body .sec-290 .tpb{ --sec-markenblock: 14rem; } body .sec-291 .nvg__marke{ margin-block-start: calc(-1 * var(--kopf-topbar)); } body .sec-291 img.nvg__logo{ block-size: 46px; } body .sec-291 .nvg__panel{ margin-inline-start: 0; } body .sec-291 .nvg__enkel{ display: flex; } body .sec-291 .nvg__sublink[data-nav-gruppe="1"]::after{ display: none; } } @media (max-width: 767px){ body .sec-291 .nvg__marke{ margin-block-start: 0; } body .sec-291 img.nvg__logo{ block-size: 40px; } body .sec-290 .tpb{ position: static; } body .sec-291 .nvg{ top: 0; } } body .sec-288 .ftr__zuruf h2{ font-size: var(--fs-h2, 2rem); font-weight: var(--fw-semibold, 600); max-inline-size: 40rem; margin-inline: auto; text-wrap: balance; } body .sec-288 .ftr__spaltentitel{ font-size: var(--fs-body, 1rem); font-weight: var(--fw-semibold, 600); text-transform: none; letter-spacing: 0; } body .sec-288 .ftr__marke .ftr__spaltentitel{ display: block; max-inline-size: 12rem; } body .sec-288 .ftr__menue{ grid-template-columns: repeat(5, minmax(0, 1fr)); } body .sec-288 .ftr__menue > *{ grid-column: span 1; } body .sec-288 img.ftr__logo{ filter: brightness(0); transition: filter var(--motion-base, 250ms) var(--ease-standard, ease); } body .sec-288 img.ftr__logo:hover{ filter: none; } @media (prefers-reduced-motion: reduce){ body .sec-288 img.ftr__logo{ transition: none; } } @media (max-width: 1024px){ body .sec-288 .ftr__menue{ grid-template-columns: repeat(3, minmax(0, 1fr)); } body .sec-288 .ftr__zuruf h2{ max-inline-size: 32rem; } } @media (max-width: 767px){ body .sec-288 .ftr__menue{ grid-template-columns: minmax(0, 1fr); } body .sec-288 .ftr__marke .ftr__spaltentitel{ max-inline-size: none; } body .sec-288 .ftr__zuruf h2{ max-inline-size: none; } } body [data-sec="LAB-CRD-010"]:has(+ [data-sec="LAB-CRD-010"]) .kart118{ padding-block-end: 0; } body [data-sec="LAB-CRD-010"] + [data-sec="LAB-CRD-010"] .kart118{ padding-block-start: var(--grid-gutter, 24px); } @media (min-width: 1025px){ body .sec-286 .pcta__text{ grid-column: span 8; } body .sec-286 [class*="pcta__portrae"]{ grid-column: 9 / span 4; } body .sec-286 .pcta__bild{ aspect-ratio: 3 / 4; } } body .sec-286 .pcta__bild{ background-position: 50% 15% !important; } @supports selector(::details-content){ body .sec-145 .bfaq__list details::details-content{ transition: block-size var(--motion-slow, 400ms) var(--ease-emphasized, cubic-bezier(.3,0,0,1)), content-visibility var(--motion-slow, 400ms) allow-discrete; } } body .sec-281 .ep__media{ aspect-ratio: 1 / 1; margin: var(--sp-5, 1.5rem); inline-size: auto; position: relative; } body .sec-281 .ep__role{ display: none; } body .sec-281 .ep__spot{ position: absolute; left: var(--x); top: var(--y); inline-size: 14px; block-size: 14px; margin: -7px 0 0 -7px; border-radius: var(--r-pill, 9999px); background: var(--c-primary, #023a51); box-shadow: 0 0 0 3px var(--c-white, #fff), var(--shadow-sm); pointer-events: none; } @media (max-width: 767px){ body .sec-281 .ep__spot{ inline-size: 18px; block-size: 18px; margin: -9px 0 0 -9px; } } body .sec-287 .pkt__kopf{ margin-block-end: calc(var(--space-head-gap, 3rem) + var(--sec-ausbruch, 0rem) + var(--sp-6, 2rem)); max-inline-size: 46rem; } body .sec-287 .pkt__kopf h2{ margin-block-end: 0; } body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CB-007"] .hinw{ --hinw-ueberlappung: var(--sp-9, 6rem); position: relative; z-index: 1; margin-block-start: calc(-1 * var(--hinw-ueberlappung)); padding-block-start: 0; background: transparent; } body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CB-007"] .hinw::before{ content: ''; position: absolute; z-index: -1; inset: var(--hinw-ueberlappung) 0 0 0; background: var(--c-white, #fff); } @media (max-width: 1024px){ body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CB-007"] .hinw{ --hinw-ueberlappung: var(--sp-7, 3rem); } } body .sec-296 .hinwpop{ position: fixed; inset: 0; margin: auto; inline-size: min(44rem, calc(100vw - 2 * var(--container-px, 24px))); max-block-size: calc(100vh - 2 * var(--sp-7, 3rem)); padding: 0; border: 0; background: transparent; color: var(--t-primary, #253746); overflow: visible; } body .sec-296 .hinwpop::backdrop{ background: color-mix(in srgb, var(--c-secondary-dark, #030716) 62%, transparent); } body .sec-296 .hinwpop .hinw__box{ inline-size: 100%; } body .sec-296 .hinwpop .hinw__inhalt{ padding-inline-end: calc(2.5rem + var(--sp-5, 1.5rem) + var(--sp-3, .75rem)); } body .sec-296 .hinwpop__zu{ position: absolute; z-index: 1; inset-block-start: var(--sp-5, 1.5rem); inset-inline-end: var(--sp-5, 1.5rem); display: flex; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; border: var(--bw-btn, 1px) solid var(--c-primary, #253746); border-radius: var(--r-pill, 999px); background: var(--c-white, #fff); color: var(--c-primary, #253746); cursor: pointer; } body .sec-296 .hinwpop__zu:hover{ background: var(--c-primary, #253746); color: var(--c-white, #fff); } body .sec-296 .hinwpop__zu:focus-visible{ outline: 2px solid var(--c-primary, #253746); outline-offset: 2px; } body .sec-296 .hinwpop__zu svg{ inline-size: 1.125rem; block-size: 1.125rem; display: block; } @media (prefers-reduced-motion: no-preference){ body .sec-296 .hinwpop[open]{ opacity: 1; translate: 0 0; transition: opacity var(--motion-base, 250ms) var(--ease-standard, ease), translate var(--motion-base, 250ms) var(--ease-standard, ease); } @starting-style{ body .sec-296 .hinwpop[open]{ opacity: 0; translate: 0 var(--sp-5, 1.5rem); } } } @media (max-width: 767px){ body .sec-296 .hinwpop__zu{ inset-block-start: var(--sp-3, .75rem); inset-inline-end: var(--sp-3, .75rem); } body .sec-296 .hinwpop .hinw__inhalt{ padding-inline-end: var(--space-card-pad, 1rem); } } :root{ --kopf-klebend: 129px; } html{ scroll-padding-top: calc(var(--kopf-klebend) + var(--sp-5, 1.5rem)); } body .kwmail__meldung{ margin-block: var(--space-stack, 1rem) 0; padding: var(--sp-4, 1rem) var(--sp-5, 1.5rem); border: var(--bw-card, 1px) solid var(--c-border, rgba(0,0,0,.12)); border-radius: var(--r-card, 8px); font-size: var(--fs-body-sm, .875rem); line-height: var(--lh-body, 1.6); background: var(--c-surface-subtle, #f6f7f9); color: var(--t-primary, #253746); } body .kwmail__meldung[data-art="erfolg"]{ border-color: var(--t-positiv, #2f7d4f); background: color-mix(in srgb, var(--t-positiv, #2f7d4f) 8%, var(--c-white, #fff)); } body .kwmail__meldung[data-art="fehler"]{ border-color: var(--t-negativ, #c0392b); background: color-mix(in srgb, var(--t-negativ, #c0392b) 8%, var(--c-white, #fff)); } body .kwmail__meldung[data-art="laeuft"]{ color: var(--t-secondary, #5a636b); } body form button[type="submit"][aria-busy="true"], body button[type="submit"][aria-busy="true"]{ opacity: .65; cursor: progress; } body .sec-125 .cta-link{ color: var(--c-white, #fff); } body .sec-125 .cta-link:hover, body .sec-125 .cta-link:focus-visible{ color: var(--c-white, #fff); border-bottom-width: 2px; } body .sec-125 .cta-link:focus-visible{ outline: 2px solid var(--c-white, #fff); outline-offset: 3px; } body .sec-125 .imgacc__more p{ display: block; -webkit-line-clamp: none; overflow: visible; } body .sec-293 .pctr__karte .preheadline{ margin-block-start: var(--sp-4, 1rem); } body .sec-293 .pctr__karte .pctr__titel{ margin-block-start: 0; } body .cta-link svg{ inline-size: 1em; block-size: 1em; } @supports selector(::details-content){ body .sec-145 .bfaq__list details::details-content{ transition: block-size 560ms cubic-bezier(.22, .61, .36, 1), content-visibility 560ms allow-discrete; } } body .sec-145 .bfaq__list .accordion-item{ transition: box-shadow 560ms cubic-bezier(.22, .61, .36, 1), border-color 560ms cubic-bezier(.22, .61, .36, 1); } @media (prefers-reduced-motion: reduce){ body .sec-145 .bfaq__list details::details-content, body .sec-145 .bfaq__list .accordion-item{ transition: none; } } @media (min-width: 1025px) and (max-width: 1199px){ body [data-sec="LAB-CRD-010"] .kart118[data-m-spalten="4"] .kart118__grid{ grid-template-columns: 1fr 1fr; } } body .cta-link{ font-size: var(--fs-label, 1rem); text-transform: none; letter-spacing: normal; padding-inline-end: 0; } body .cta-link:not(:has(svg))::after{ content: ''; flex: 0 0 auto; inline-size: 1em; block-size: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat; } body .sec-125 .imgacc__more p{ margin-block-end: var(--sp-4, 1rem); } :root{ --hero-hoehe: min(calc(var(--m-heroh, 85) * 1vh - var(--nav-h)), 51.4375rem); } @media (max-width: 1024px){ :root{ --hero-hoehe: min(calc(var(--m-heroh, 85) * 1vh - var(--nav-h)), 40.625rem); } } @media (max-width: 767px){ :root{ --hero-hoehe: min(calc(var(--m-heroh, 85) * 1vh - var(--nav-h)), 33.75rem); } } body .sec-180 .hero-e{ min-height: var(--hero-hoehe); align-items: center; } body .sec-180 .hero-e .hero-e__inner{ padding-bottom: 0; } body .sec-180 .hero-e .hero-e__bg:is([style*="background-image"], :has(> .kw-ki-leinwand))::after{ content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--c-black, #000) 50%, transparent); } body .sec-180 .hero-e h1, body .sec-180 .hero-e .hero-e__titel{ font-weight: 600; line-height: 1.66; letter-spacing: normal; } @media (max-width: 767px){ body .sec-180 .hero-e h1, body .sec-180 .hero-e .hero-e__titel{ font-size: 2rem; } } body .sec-180 .hero-e .hero-e__body{ color: var(--c-white, #fff); } body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118{ --kart-ueberlappung: min( calc(var(--kart-bildhoehe) / 2), max(0px, calc((var(--hero-hoehe) - 22rem) / 2 - var(--sp-5, 1.5rem)))); } body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CB-007"] .hinw{ --hinw-ueberlappung: min( var(--sp-9, 6rem), max(0px, calc((var(--hero-hoehe) - 22rem) / 2 - var(--sp-5, 1.5rem)))); } @media (max-width: 1024px){ body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CB-007"] .hinw{ --hinw-ueberlappung: min( var(--sp-7, 3rem), max(0px, calc((var(--hero-hoehe) - 22rem) / 2 - var(--sp-5, 1.5rem)))); } } body .sec-294--quer .cobp__ph{ aspect-ratio: 16 / 9; } body .sec-294 .cobp__punkt{ font-size: var(--fs-body, 1rem); line-height: 1.65; color: var(--t-secondary, #5a636b); } body .sec-294 .cobp__text .cobp__intro + .cobp__intro{ margin-block-start: var(--space-stack, 1rem); } body .sec-294 .cobp__text--breit .cobp__intro{ max-inline-size: 65ch; } body .sec-294 .cobp__text .cobp__list + h2{ margin-block-start: var(--space-head-gap, 3rem); } body .sec-294 .cobp__grid--listen{ align-items: start; } @media (max-width: 1024px){ body .sec-294 .cobp__grid--listen > .cobp__text + .cobp__text{ margin-block-start: var(--space-head-gap, 3rem); } } body .sec-294 .cobp__list--kontakt{ gap: var(--space-stack, 1rem); } body .sec-294 .cobp__knopf--pfeil{ margin-block-start: var(--sp-5, 1.5rem); } body .sec-294 .cobp__list--kontakt a.cobp__punkt{ color: var(--t-secondary, #5a636b); text-decoration: none; border-bottom: var(--bw-btn, 1px) solid transparent; transition: color var(--motion-base, 250ms) var(--ease-standard, ease), border-color var(--motion-base, 250ms) var(--ease-standard, ease); } body .sec-294 .cobp__list--kontakt a.cobp__punkt:hover, body .sec-294 .cobp__list--kontakt a.cobp__punkt:focus-visible{ color: var(--c-primary-dark, #1b2731); border-bottom-color: currentColor; } @media (prefers-reduced-motion: reduce){ body .sec-294 .cobp__list--kontakt a.cobp__punkt{ transition: none; } } /* kw-rich v1 */ [data-kw] h3, [data-kw] h4, [data-kw] h5, [data-kw] h6{ display:block; margin:var(--sp-4, 1rem) 0 var(--sp-2, .5rem); font-size:1rem; font-weight:var(--fw-semibold, 600); line-height:1.35; color:var(--t-primary, inherit); letter-spacing:-.005em; } [data-kw] p{ margin:0 0 var(--sp-3, .75rem); } [data-kw] ul, [data-kw] ol{ display:block; margin:0 0 var(--sp-3, .75rem); padding-left:1.35em; } [data-kw] ul{ list-style:disc outside; } [data-kw] ol{ list-style:decimal outside; } [data-kw] li{ display:list-item; margin:0 0 var(--sp-2, .5rem); } [data-kw] li:last-child{ margin-bottom:0; } [data-kw] li::marker{ color:var(--c-primary, currentColor); } [data-kw] ul ul{ list-style:circle outside; margin:var(--sp-2, .5rem) 0 0; } .kw-h{ display:block; margin:var(--sp-4, 1rem) 0 var(--sp-2, .5rem); font-weight:var(--fw-semibold, 600); line-height:1.35; color:var(--t-primary, inherit); } .kw-p{ display:block; margin:0 0 var(--sp-3, .75rem); } .kw-list{ display:block; margin:0 0 var(--sp-3, .75rem); } .kw-li{ display:block; position:relative; padding-left:1.35em; margin:0 0 var(--sp-2, .5rem); } .kw-li::before{ content:"\2022"; position:absolute; left:.35em; top:0; color:var(--c-primary, currentColor); font-weight:700; line-height:inherit; } .kw-list-num{ counter-reset:kwli; } .kw-list-num > .kw-li{ padding-left:1.7em; counter-increment:kwli; } .kw-list-num > .kw-li::before{ content:counter(kwli) "."; left:0; font-weight:var(--fw-semibold, 600); font-variant-numeric:tabular-nums; } .kw-li:empty, .kw-p:empty, .kw-h:empty{ min-height:1.25em; } [data-kw] > *:first-child{ margin-top:0; } [data-kw] > *:last-child{ margin-bottom:0; } [data-kw] strong, [data-kw] b{ font-weight:var(--fw-semibold, 600); } body [data-kw] strong, body [data-kw] b{ font-weight: 700; } body .sec-288 a, body .sec-290 .tpb__weg{ display: inline-flex; align-items: center; min-block-size: 24px; } body input[type="checkbox"]{ inline-size: 24px; block-size: 24px; flex-shrink: 0; } body .sec-283 .kf__zustimmung input[type="checkbox"]{ inline-size: 24px; block-size: 24px; } body .sec-283 .kf__zustimmung a{ display: inline-flex; align-items: baseline; min-block-size: 24px; } body .field input, body .field textarea, body .field select{ border-width: var(--bw-card, 2px); border-color: var(--c-border); } body .sec-292 .kst__schranke{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-stack, 1rem); min-height: 10rem; padding: var(--space-card-pad, 1.5rem); text-align: center; background: var(--c-surface-subtle, #f6f7f9); border: var(--bw-card, 1px) solid var(--c-border, rgba(0,0,0,.12)); border-radius: var(--r-card, 8px); } body .sec-292 .kst__schranke-text{ margin: 0; max-inline-size: 52ch; font-size: var(--fs-body-sm, .875rem); line-height: 1.65; color: var(--t-secondary, #5a636b); } body .sec-292 .kst__schranke-fein{ margin: 0; font-size: var(--fs-label-sm, .875rem); color: var(--t-secondary, #5a636b); } body .sec-292 .kst__schranke-fein a{ color: var(--c-primary-dark, #1b2731); text-decoration: underline; display: inline-flex; align-items: baseline; min-block-size: 24px; } body .sec-292 .kst__embed[hidden]{ display: none; } body .sec-292 .fremd__fehler{ margin: 0; padding: var(--sp-5, 1.5rem); text-align: center; font-size: var(--fs-body-sm, .875rem); color: var(--t-negativ, #c0392b); } @media (max-width: 767px){ :root{ --fs-h1: 2rem; --fs-h2: 1.75rem; } } body h1, body h2, body h3, body .hero-e__titel, body .h2{ overflow-wrap: break-word; } body picture{ display: contents; } body picture > source{ display: none; } html.dsjs [data-animate="stagger-children"] > picture > img{ opacity: 0; transform: translateY(14px); transition: opacity var(--motion-slow,400ms) var(--ease-standard,cubic-bezier(.2,0,0,1)), transform var(--motion-slow,400ms) var(--ease-standard,cubic-bezier(.2,0,0,1)); transition-delay: var(--stagger-delay,0ms); } html.dsjs [data-animate="stagger-children"].visible > picture > img{ opacity: 1; transform: none; } /* kw-landmark v1 */ .kw-skip{position:absolute;left:-9999px;top:0;z-index:9999;padding:.75rem 1.25rem;background:#000;color:#fff;font:inherit;text-decoration:underline;border-radius:0 0 .25rem 0}.kw-skip:focus{left:0} /* kw-kontrast v1 */ .sec-013 .cta-band{ padding-block: var(--section-py); background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-tertiary-mid) 100%); position: relative; overflow: hidden; } .sec-013 .cta-band::before{ content: ''; position: absolute; right: -120px; top: -120px; width: 26.25rem; height: 420px; border-radius: 50%; background: color-mix(in srgb, var(--c-white) 7%, transparent); } .sec-013 .cta-band::after{ content: ''; position: absolute; right: 60px; bottom: -160px; width: 20rem; height: 320px; border-radius: 50%; background: color-mix(in srgb, var(--c-white) 5%, transparent); } .sec-013 .cta-band__inner{ position: relative; z-index: 1; text-align: center; max-width: 42.5rem; margin-inline: auto; } .sec-013 .cta-band__inner .preheadline{ color: color-mix(in srgb, var(--c-white) 75%, transparent); } .sec-013 .cta-band__inner h2{ color: var(--c-white); margin-bottom: var(--space-stack, 1rem); } .sec-013 .cta-band__inner > p:not(.cta-band__note){ color: color-mix(in srgb, var(--c-white) 85%, transparent); max-width: 32.5rem; margin: 0 auto var(--space-stack-lg, 1.5rem); } .sec-013 .cta-band__btns{ display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; } .sec-013 .cta-band__note{ margin: var(--sp-4) auto 0; font-size: var(--fs-label-sm); color: color-mix(in srgb, var(--c-white) 65%, transparent); } @media (max-width: 767px){ .sec-013 .cta-band__btns{ flex-direction: column; } .sec-013 .cta-band__btns .btn{ width: 100%; justify-content: center; white-space: nowrap; } } body .sec-285 .mkz__zahl{ border-top-width: 2px; } body .sec-288 .ftr__marke{ margin-bottom: 0; } body .sec-239 .uu1__tile--text{ background: var(--c-surface-muted); overflow: visible; } body .sec-239 .uu1__tile--text p{ font-size: var(--fs-body); } body .sec-303 .mf__einwilligung a{ color: var(--c-primary); text-decoration: underline; } body .sec-303 .mf__einwilligung a:hover{ color: var(--c-primary-dark); } body .sec-071 .lfp{ padding-top: 0; } body .sec-071 .lfp__body{ max-width: none; } body .sec-071 .lfp__body p{ max-width: none; } body .sec-293 .pctr__num{ color: var(--c-white); -webkit-text-stroke-width: 3px; paint-order: stroke fill; } body [data-sec="LAB-HERO-015"] + [data-sec="LAB-KO-017"] + [data-sec="LAB-CRD-010"] .kart118:has(.kart118__kopf){ margin-top: 0; padding-top: var(--section-py, 6rem); } /* ══════════════════════════════════════════════════════════════════════════════ C17 · PrivacyBee-Widget auf /datenschutzerklaerung/, 02.10.2026 ist ein unbekanntes Element und damit per Vorgabe inline. Inline hiesse: es sitzt in der Textzeile, bekommt keine eigene Breite und nimmt den Zeilenabstand des umgebenden Textes mit — es stuende weder in der Flucht noch haette es Luft nach oben. display:block macht daraus einen eigenen Kasten, der die Breite von .lfp__body uebernimmt; dieser Block laeuft seit dem 29.09.2026 ueber die volle Containerbreite, das Widget steht damit exakt auf derselben Kante wie Ueberschriften und Absaetze darueber. KEIN EIGENER ABSTAND NACH OBEN. Zuerst stand hier ein margin-block-start von --space-head-gap — gedacht als Trennung zum Text darueber. Dieser Text ist am selben Tag entfallen, das Widget ist jetzt der einzige Inhalt des Blocks, und der Abstand lag damit zusaetzlich auf dem Polster der Section. Nachgemessen: /impressum/ Section -> Inhalt 96 px /datenschutzerklaerung/ Section -> Inhalt 144 px Die 96 px sind der Hauswert, den --section-py liefert. Der Zuschlag ist raus, beide Rechtsseiten beginnen jetzt auf derselben Hoehe. Sollte spaeter wieder Text ueber das Widget kommen, braucht DER seinen Abstand nach unten, nicht das Widget einen nach oben. ══════════════════════════════════════════════════════════════════════════════ */ body .sec-071 privacybee-widget{ display: block; } /* ══════════════════════════════════════════════════════════════════════════════ C18 — Bild-Akkordeon (sec-125): Ersatzfarbe hinter dem Foto 05.10.2026, WAVE meldete auf 11 Seiten 6 bis 8 "Very low contrast". WAS LOS WAR: Die Panels tragen ihr Foto als background-image (inline gesetzt) und darueber einen dunklen Verlauf im ::after. Eine HINTERGRUNDFARBE haben sie nicht. Fuer das Auge reicht das, solange das Bild laedt — fuer die Rechnung nicht: Faellt das Bild weg, scheint der weisse Grund der .imgacc durch, und der weisse Titel samt "Zur Finanzierung" steht auf Weiss. Genau so misst es WAVE, und genau das verlangt WCAG 1.4.3 auch ("conformant fallback background color when background images are present"). WARUM DIESE FARBE: Es ist derselbe Griff, den die Hero-Section laengst macht — `.sec-301 .hero-e { background: var(--c-secondary-dark) }` liegt dort als deckende Flaeche hinter dem Foto, deshalb meldet WAVE auf den Hero-Seiten nichts. Hier fehlte er nur. #060706 ist der Ton, aus dem auch der Verlauf gemischt wird, also die ehrliche Ersatzfarbe und keine erfundene. SICHTBAR AENDERT SICH NICHTS: Das Foto deckt die Flaeche vollstaendig ab. Zu sehen ist die Farbe nur dort, wo vorher Weiss durchschien — beim Laden und wenn ein Bild fehlt. Dann steht der Text lesbar statt unsichtbar. ══════════════════════════════════════════════════════════════════════════════ */ body .sec-125 .imgacc__panel{ background-color: var(--c-secondary-dark); } /* ══════════════════════════════════════════════════════════════════════════════ C19 — Platzhalter-Rahmen weg, sobald ein Bild drin ist 05.10.2026. Patrick sah an der Bildkante „noch ein zweites Bild" durchscheinen und hat die Ursache in der Konsole eingekreist: diesen Rahmen. WOHER DER SCHEIN KAM: Die Grundregel gibt `.cobp__ph` und `.modal__ph` eine graue Fläche plus Rahmen — die Markierung eines LEEREN Bildfelds, damit im Editor zu sehen ist, wo ein Bild hingehört. Drei Dinge treffen dann zusammen: · --bw-card ist 2px (die 1px in der Regel sind nur der Ersatzwert), · --c-border ist zu 88 % durchsichtig (12 % von --t-primary), · background-clip wird nirgends gesetzt, es gilt also border-box. Damit läuft das Foto UNTER dem Rahmen weiter und scheint zu 88 % durch ihn hindurch: ein 2px breiter Ring, in dem dasselbe Bild leicht abgedunkelt noch einmal erscheint, an den Ecken durch --r-card zusätzlich versetzt. WARUM NUR MIT BILD: Alle 51 Platzhalter der Website (cobp__ph 23x in sec-294, modal__ph 28x in sec-297) tragen heute ein Bild — der Rahmen erfüllt nirgends seinen Zweck. Er wird trotzdem nicht ersatzlos gestrichen, sondern nur dort abgeschaltet, wo ein Bild gesetzt ist: Ein künftig leeres Feld soll im Editor weiterhin sichtbar sein. Denselben Griff macht die Hero-Section schon (`.hero-e__bg[style*="background-image"]`). ══════════════════════════════════════════════════════════════════════════════ */ body .sec-294 .cobp__ph[style*="background-image"], body .sec-297 .modal__ph[style*="background-image"]{ border: 0; } /* ══════════════════════════════════════════════════════════════════════════════ C20 — Aktiver Menuepunkt sichtbar machen 05.10.2026. AUSGANGSLAGE: `aria-current="page"` stand zwar in jeder Seite, aber nur EINMAL und an willkuerlicher Stelle — auf /impressum/ etwa auf „Kontakt" in der Rechtliches-Liste. Im CSS kam `aria-current` NULL mal vor, es gab also gar keinen sichtbaren Zustand. Beides ist jetzt geaendert: Die Marker sitzen auf jedem Verweis, dessen Ziel der aufgerufenen Adresse entspricht (Hauptmenue, Fusszeilen-Menues und Rechtliches), und hier bekommen sie ihr Aussehen. WARUM GENAU SO: Der Zustand uebernimmt, was die Menues beim Darueberfahren ohnehin tun — Hauptmenue `color: var(--c-primary)`, Unterpunkte die helle Flaeche, Fusszeile volles Weiss. So entsteht keine neue Formensprache. WARUM ZUSAETZLICH UNTERSTRICHEN: Farbe allein darf nicht das einzige Merkmal sein (WCAG 1.4.1). Wer Farben schlecht unterscheidet, saehe sonst keinen Unterschied zum Rest des Menues. Der Unterstrich ist das zweite, farbfreie Merkmal — dieselbe Loesung, die `.ftr__recht a:hover` schon benutzt. DAS LOGO BLEIBT AUSSEN VOR: Es verweist zwar auf „/", ist aber kein Menuepunkt; auf der Startseite wuerde es sonst als aktiver Eintrag erscheinen. ══════════════════════════════════════════════════════════════════════════════ */ body .sec-291 .nvg__link[aria-current]{ color: var(--c-primary, #023a51); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; } body .sec-291 .nvg__sublink[aria-current]{ background: var(--c-surface-subtle, #f0f0f1); color: var(--t-primary, #060706); text-decoration: underline; text-underline-offset: .25em; } body .sec-288 .ftr__links a[aria-current], body .sec-288 .ftr__recht a[aria-current]{ color: var(--c-white, #fff); text-decoration: underline; text-underline-offset: .3em; } /* ══════════════════════════════════════════════════════════════════════════════ C21 — „Nach oben"-Knopf gestalten 06.10.2026. AUSGANGSLAGE: script.js erzeugt den Knopf im Browser (`createElement`, Klasse `nach-oben`) und haengt ihn an `document.body`. Eine Gestaltung dafuer gab es NIE — `nach-oben` kam in keiner der drei CSS-Dateien vor. Der Knopf stand deshalb ungestylt im Textfluss unter der Fusszeile: 20x20 Pixel, durchsichtig, schwarzer Pfeil, ganz am linken Rand, `position: static`. So war er auf allen 29 Seiten zu sehen. Patrick hat ihn am 06.10.2026 gefunden. [hidden] IST PFLICHT, NICHT KOSMETIK: Das Skript blendet den Knopf ueber das `hidden`-Attribut ein und aus. Dessen Browser-Voreinstellung ist zwar `display: none`, aber mit der geringsten denkbaren Spezifitaet — jede eigene `display`-Regel schlaegt sie. Ohne die `[hidden]`-Zeile weiter unten klebte der Knopf dauerhaft im Bild, auch am Seitenanfang. WARUM UNTEN RECHTS: Unten links sitzt das Einwilligungsbanner von PrivacyBee. Rechts steht zwar der Schnellzugriff `.flm`, der klebt aber senkrecht mittig (`inset-block-start: 50%`) und reicht auch bei niedrigen Fenstern nicht bis an den unteren Rand. z-index 80: unter dem Schnellzugriff (90) und unter der Kopfleiste (500/510). Auf die Dialoge muss ich keine Ruecksicht nehmen — sie werden mit `showModal()` geoeffnet und liegen damit in der obersten Ebene, ueber allem, was ein z-index erreichen kann. 48x48: Die Mindestgroesse nach WCAG 2.2 waere 24x24. Der Knopf schwebt ueber wechselnden Inhalten und soll ohne Zielen zu treffen sein. SCHATTEN: Hier bewusst gesetzt, obwohl Patrick ihn bei Karten und Akkordeons entfernen liess. Der Unterschied ist derselbe wie beim Kontakt-Modal, das ihn behalten durfte: Dieses Element schwebt ueber fremdem Inhalt — ueber Fotos genauso wie ueber weissem Grund — und braucht die Abloesung. WEISS MIT DUNKLEM PFEIL, NICHT UMGEKEHRT — WICHTIG: Der erste Entwurf hatte `background: var(--c-primary)`. Gemessen am 06.10.2026 im Browser: der Knopf lag dann mit rgb(2, 58, 81) auf `.ftr__schluss` mit rgb(2, 58, 81) — Kontrast 1:1, er verschwand in der Fussleiste. Das ist kein Zufall, sondern die Regel: Das Skript zeigt ihn nur in den letzten 200 px der Seite, und dort liegt IMMER diese Leiste. Weiss auf der dunklen Leiste ergibt 12,2:1. Der 2px-Rand in `--c-primary` haelt ihn auch dann sichtbar, wenn er einmal ueber hellem Grund stehen sollte; `--bw-card` ist dieselbe Staerke, die Karten und Akkordeons tragen. ══════════════════════════════════════════════════════════════════════════════ */ body button.nach-oben{ position: fixed; inset-block-end: var(--sp-5, 1.5rem); inset-inline-end: var(--sp-5, 1.5rem); z-index: 80; display: grid; place-items: center; inline-size: 48px; block-size: 48px; padding: 0; border: var(--bw-card, 2px) solid var(--c-primary, #023a51); border-radius: var(--r-pill, 9999px); background: var(--c-white, #ffffff); color: var(--c-primary, #023a51); box-shadow: var(--shadow-md, 0 8px 28px rgba(6, 7, 6, .12)); cursor: pointer; transition: background-color .18s var(--ease-standard, ease-out); } body button.nach-oben[hidden]{ display: none; } body button.nach-oben svg{ display: block; inline-size: 24px; block-size: 24px; } body button.nach-oben:hover{ background: var(--c-neutral, #efefef); border-color: var(--c-primary-dark, #012736); color: var(--c-primary-dark, #012736); } body button.nach-oben:focus-visible{ outline: 3px solid var(--c-primary, #023a51); outline-offset: 3px; } @media (prefers-reduced-motion: reduce){ body button.nach-oben{ transition: none; } } /* Unter 768 px wird der Schnellzugriff `.flm` zu einem runden Knopf (`.flm__fab`, 3,5 rem) unten rechts — an genau der Stelle, an der auch dieser Knopf sitzt. Am 06.10.2026 im Browser nachgemessen: bei 375x812 lagen beide uebereinander, meiner bei [303,740,48,48], der Schnellzugriff bei [303,732,56,56]; zusaetzlich verdeckte meiner den Fusszeilen-Verweis „Datenschutzerklaerung". Deshalb rueckt er hier ueber den Schnellzugriff: dessen Abstand nach unten (--sp-5) plus seine Hoehe (3,5 rem) plus eine Luecke. `env(safe-area-inset-bottom)` uebernimmt die Rechnung von `.flm`, damit beide auf iPhones mit Hausbalken gleich weit vom Rand bleiben. Der Rechtsabstand ist so gewaehlt, dass die beiden Kreise auf einer Achse stehen: der Schnellzugriff sitzt bei --sp-4 und ist 56 breit, meiner ist 48 breit — die 4 px Unterschied gleichen die halbe Breitendifferenz aus. */ @media (max-width: 767px){ body button.nach-oben{ inset-block-end: calc(var(--sp-5, 1.5rem) + 3.5rem + var(--sp-3, .75rem) + env(safe-area-inset-bottom, 0px)); inset-inline-end: calc(var(--sp-4, 1rem) + .25rem); /* MUSS ueber `.flm` (z-index 90) liegen, sonst ist der Knopf auf dem Handy nicht zu druecken. Der Behaelter des Schnellzugriffs ist naemlich auch im zugeklappten Zustand 106x173 gross, `visibility: visible` und `pointer-events: auto` — er nimmt Klicks also auch dort entgegen, wo er nichts zeigt. Am 06.10.2026 gemessen: `elementFromPoint` lieferte in der Mitte des Nach-oben-Knopfs `div.flm`, nicht den Knopf. */ z-index: 95; } /* Klappt der Besucher den Schnellzugriff auf, belegt dessen Knopf „Kontakt" [257,682,102,46] und der Nach-oben-Knopf [307,672,48,48] dieselbe Stelle. Da der Nach-oben-Knopf jetzt obenauf liegt, verdeckte er die Auswahl — also tritt er zurueck, solange aufgeklappt ist. */ body:has(.flm[data-offen="ja"]) button.nach-oben{ display: none; } } /* ══════════════════════════════════════════════════════════════════════════════ C22 — Die beiden Schaltflaechen im Kontakt-Aufruf auf dem Handy voll breit 06.10.2026. AUSGANGSLAGE: `.pcta__aktionen` ist eine Flex-Zeile mit Umbruch (sections.css:457), die beiden `.btn` sind `inline-flex` und damit genau so breit wie ihre Beschriftung. Auf dem Handy ergab das eine Treppe: „UNVERBINDLICHE ANGEBOTSANFRAGE" lief fast ueber die ganze Breite, „ZU DEN ANSPRECHPARTNERN" blieb sichtbar kuerzer. GILT FUER 16 SEITEN. Auf /partner/ tragen dieselben beiden Schaltflaechen andere Beschriftungen („Mehr erfahren", „Jetzt Partner werden"); der Aufbau ist identisch, die Regel greift dort genauso. KEINE NEUE FORMENSPRACHE: Volle Breite auf dem Handy loest dieses Projekt schon an drei Stellen so — `.sec-288 .ftr__zuruf-knopf .btn`, `.sec-289 .modal .btn` und `.sec-297 .modal form .btn`. `flex-direction: column` statt nur `inline-size: 100%`: Mit Breite allein haetten die beiden zwar je eine Zeile belegt (dank `flex-wrap`), die Hauptachse bliebe aber waagerecht — `gap` wirkte dann als Spaltenabstand und der Zeilenabstand kaeme aus `row-gap`. In der Spalte ist `gap` eindeutig der Abstand zwischen den beiden. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px){ body .sec-286 .pcta__aktionen{ flex-direction: column; align-items: stretch; } body .sec-286 .pcta__aktionen .btn{ inline-size: 100%; } } /* ══════════════════════════════════════════════════════════════════════════════ C23 — Menueklappe rollbar machen 06.10.2026. Patrick: „Ich kann mobil das Menü nicht weiter nach unten scrollen, also Menüpunkte außerhalb des Viewport gar nicht sehen." URSACHE: `.nvg__panel` ist unter 1200 px `position: absolute` (sections.css: 953) und haengt mit `top: 100%` unter der Navigation. Es hatte weder eine Hoehenbegrenzung noch einen Rollbereich — `max-height: none`, `overflow-y: visible`. Der Inhalt ist 1013 px hoch; bei 375x812 ragte die Klappe damit **377 px aus dem Bild**. Und weil sie in der klebenden Kopfzeile haengt, wandert sie beim Rollen der Seite mit: Was unten heraussteht, ist auf keinem Weg erreichbar. Die letzten Menuepunkte waren schlicht nicht zu sehen. BETRIFFT NICHT NUR HANDYS: Die Grenze fuer das Burger-Menue liegt bei 1199 px. Gemessen ragte die Klappe bei 768x1024 um 118 px und bei 1024x768 um 374 px heraus. Deshalb steht die Regel in derselben Medienabfrage. DIE ZWEITE ABFRAGE UND DIE 47 PX: Der Abstand der Klappe zum oberen Fensterrand betraegt normalerweise 128 px (obere Leiste 44 + Navigation 85, vgl. `--kopf-klebend`). Unterhalb von rund 380 px Fensterbreite bricht die obere Leiste jedoch zweizeilig um und wird 91 statt 44 px hoch; die Klappe beginnt dann bei 175 px, solange die Seite noch nicht gerollt ist. 47 px ist genau diese Differenz (91 − 44), am 06.10.2026 ueber zehn Breiten gemessen. Die Grenze liegt bei 413 px und nicht bei 379 px, weil der Umbruch vom TEXT der oberen Leiste abhaengt, nicht von einer Medienabfrage — aendert sich dort die Telefonnummer oder die Adresse, wandert der Umbruchpunkt mit. Der Preis dieses Sicherheitsabstands: auf Geraeten unter 414 px bleibt bei gerollter Seite unten eine Luecke von 48 px. Das ist der richtige Tausch — eine Luecke sieht man, einen unerreichbaren Menuepunkt nicht. `overscroll-behavior: contain` haelt die Seite still, waehrend man im Menue rollt; `overflow-x: hidden` verhindert den waagerechten Balken, den ein `overflow-y: auto` bei sonst sichtbarem Ueberlauf sonst mitbringt. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1199px){ body .sec-291 .nvg__panel{ max-block-size: calc(100dvh - var(--kopf-klebend, 129px)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } } @media (max-width: 413px){ body .sec-291 .nvg__panel{ max-block-size: calc(100dvh - var(--kopf-klebend, 129px) - 47px); } } /* ══════════════════════════════════════════════════════════════════════════════ C24 — Partnerlogos mittig, Zuruf-Knopf auf volle Breite (Handy) 06.10.2026. ── 1. DIE LOGOS ────────────────────────────────────────────────────────── Unter 768 px hat das Raster vier Spalten, jedes Logo belegt zwei davon (`col-m-2`). Das Bild selbst ist aber auf `max-inline-size: 7.5rem` = 120 px gedeckelt (s. weiter oben in dieser Datei) und stand mit `object-position: left center` (sections.css:569) am linken Rand seiner Zelle. Gemessen bei 375 px: linkes Logo bei x=16, rechtes endete bei x=316 — also 16 px Abstand links, 59 px rechts. Genau diese Schieflage hat Patrick gesehen. `object-position` allein half NICHT: Es verschiebt die Zeichnung INNERHALB des Bildkastens, nicht den Kasten in seiner Rasterzelle. Erst `margin-inline: auto` rueckt den 120-px-Kasten in die Mitte seiner Zelle; `object-position: center` setzt die Zeichnung darin mittig. Beides zusammen ergibt gleiche Abstaende: gemessen 24/24 (320 px), 38/38 (375), 48/48 (414), 94/94 (600), 136/136 (767). ── 2. DER KNOPF ────────────────────────────────────────────────────────── Am Knopf lag es nicht — `.sec-288 .ftr__zuruf-knopf .btn` traegt schon `width: 100%` (sections.css:600). Zu schmal war sein BEHAELTER: 279 statt 343 px. Ursache: Der Textblock darueber traegt `col-span-10`, der Knopfbereich `col-span-6`. Auf dem Vier-Spalten-Raster des Handys legt der Browser dafuer SECHS IMPLIZITE Spalten mit 0 px Breite an — gemessene Spaltenliste: „49.75px 49.75px 49.75px 49.75px 0px 0px 0px 0px 0px 0px". Der Knopfbereich spannte dann vier echte Spalten plus zwei leere und kam auf 279 px. Deshalb reicht `grid-column: 1 / -1` am Knopf allein nicht: `-1` meint das Ende des EXPLIZITEN Rasters, also Spalte 5 — das waeren nur 247 px gewesen, noch schmaler. Erst wenn auch der Textblock auf `1 / -1` steht, entstehen die leeren Spalten gar nicht erst, und beide messen die vollen 343 px. Belegt bei 320/375/414/600/767: Knopf links 16, rechts 16, Breite = Container. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px){ body .sec-288 .ftr__logo{ margin-inline: auto; object-position: center center; } body .sec-288 .ftr__zuruf, body .sec-288 .ftr__zuruf-knopf{ grid-column: 1 / -1; } } /* ══════════════════════════════════════════════════════════════════════════════ C25 — Schaltflaechen im Kopfbereich auf dem Handy voll breit 06.10.2026. WEBSITE-WEIT GEPRUEFT, nicht nur die Startseite. Es gibt vier Faelle: 1. `sec-180` (LAB-HERO-015) auf 25 Seiten — Huelle `.hero-e__actions`, eine Flex-Zeile mit Umbruch (sections.css:195). 2. ACHTUNG: Die Seite /partner/ hat dort ZWEI Schaltflaechen („Angebot anfordern", „Jetzt Partner werden!"), alle anderen eine. Deshalb `flex-direction: column` — sonst stuenden die beiden nebeneinander und nur die erste waere voll breit. 3. `sec-301` auf der Seite /angebot/ — ein eigener Kopfbaustein, bei dem die Schaltflaeche OHNE Huelle direkt in der Rasterspalte steht. Sie braucht ihre eigene Regel; `display: flex` schaltet sie von `inline-flex` um, damit `inline-size: 100%` greift. 4. /impressum/ und /datenschutzerklaerung/ tragen `sec-071` (LAB-ART-003) ohne Schaltflaeche, 404.html hat gar keinen Kopfbaustein — dort ist nichts zu tun. Belegt bei 320, 375 und 767 px sowie auf /partner/, /angebot/ und /karriere/: Knopf links 16, rechts 16, Breite = Behaelter. Ab 768 px unveraendert. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px){ body .sec-180 .hero-e__actions{ flex-direction: column; align-items: stretch; } body .sec-180 .hero-e__actions .btn{ inline-size: 100%; } body .sec-301 .hero-e__innen .btn{ display: flex; inline-size: 100%; } } /* ══════════════════════════════════════════════════════════════════════════════ C26 — Kontaktformular auf dem Handy ueber die volle Breite 06.10.2026. NICHT die Felder waren schuld, sondern ihr Behaelter. Gemessen bei 393 px: die Felder fuellten ihren Kasten bereits vollstaendig (297 von 297 px), aber der Kasten `.kf` war nur 297 statt 361 px breit — also 64 px zu schmal, und die fehlende Breite lag komplett auf der rechten Seite. MECHANIK (dieselbe wie bei C24): Im aeusseren Raster traegt die Ueberschrift `.kf__kopf` die Klasse `col-span-8`, das Formular `.kf` ebenfalls. Auf dem Vier-Spalten-Raster des Handys legt der Browser dafuer VIER IMPLIZITE Spalten mit 0 px an — gemessene Spaltenliste „62.25px x4, 0px x4". Die Ueberschrift kam mit `1 / span 8` ueber alle acht und damit auf die vollen 361 px; das Formular stand auf `1 / -1`, und `-1` meint das Ende des EXPLIZITEN Rasters, also Spalte 5 — vier echte Spalten plus drei Luecken, zusammen 297 px. Deshalb stehen BEIDE Kinder auf `1 / -1`: dann entstehen die leeren Spalten gar nicht erst, und beide messen dieselben 361 px. Belegt bei 320, 393, 600 und 767 px — Behaelter, Ueberschrift und alle Eingabefelder exakt so breit wie der Innenraum des Containers. Ab 768 px unveraendert mehrspaltig. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px){ body .sec-283 .kf__kopf, body .sec-283 .kf{ grid-column: 1 / -1; } } .kw-skip{position:absolute;left:-9999px;top:0;z-index:99999;padding:var(--sp-3,12px) var(--sp-4,16px);background:var(--c-primary,#253746);color:var(--c-white,#fff);text-decoration:none;border-radius:0 0 var(--r-btn,4px) 0}.kw-skip:focus{left:0} .sec-071 .lfp{ position: relative; background: var(--c-neutral-light); padding-top: var(--section-py); } .sec-071 .lfp__bar{ position: sticky; top: 0; z-index: 90; background: var(--c-white); box-shadow: var(--shadow-sm); } .sec-071 .lfp__bar-inner{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); } .sec-071 .lfp__label{ font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-neutral-dark); } .sec-071 .lfp__pct{ font-size: var(--fs-label-sm); font-weight: 700; color: var(--c-primary); font-variant-numeric: tabular-nums; } .sec-071 .lfp__track{ height: 4px; background: var(--c-border); } .sec-071 .lfp__fill{ height: 100%; width: 100%; background: var(--c-primary); transform: scaleX(0); transform-origin: left center; will-change: transform; transition: transform var(--motion-fast) linear; } .sec-071 .lfp__inner{ padding-block: var(--section-py); } .sec-071 .lfp__body{ max-width: 49.1667rem; margin-inline: auto; } .sec-071 .lfp__body h2{ margin-bottom: var(--space-text-pair, .5rem); } .sec-071 .lfp__meta{ font-size: var(--fs-label-sm); color: var(--c-neutral-dark); margin-bottom: var(--sp-6); } .sec-071 .lfp__body h3{ font-size: var(--fs-h4); margin: var(--space-head-gap, 3rem) 0 var(--sp-3); } .sec-071 .lfp__body p{ font-size: 1rem; line-height: 1.8; color: var(--t-secondary); margin-bottom: var(--space-stack-lg, 1.5rem); } @media (prefers-reduced-motion: reduce) { .sec-071 .lfp__fill{ transition: none !important; } } .sec-071 .preheadline{ color: var(--c-primary-mid); } .sec-118.kart118{ padding-block: var(--section-py); background: var(--c-neutral-light); } .sec-118 .kart118__grid{ display: grid; grid-template-columns: repeat(var(--m-spalten, 3), 1fr); gap: var(--grid-gutter); } .sec-118 .card__body p{ margin-bottom: 0 } .sec-118 .card__kicker{ font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .sec-118 .card{ border-color: var(--c-border); } @media (max-width: 1024px) { .sec-118 .kart118__grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .sec-118 .kart118__grid{ grid-template-columns: 1fr; } } .sec-118 .preheadline{ color: var(--c-primary-mid); } .sec-118 .card__kicker{ color: var(--c-primary-mid); } .sec-125 .imgacc{ padding-block: var(--section-py); background: var(--c-white); } .sec-125 .imgacc__head{ display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-stack, 1rem) var(--sp-6); margin-bottom: var(--space-head-gap, 3rem); flex-wrap: wrap; } .sec-125 .imgacc__head h2{ margin-bottom: 0 } .sec-125 .imgacc__head p{ max-width: 26.25rem; color: var(--t-secondary); font-size: var(--fs-body, 1rem); } .sec-125 .imgacc__row{ display: flex; gap: var(--sp-4); height: 480px; } .sec-125 .imgacc__panel{ position: relative; flex: 1; border-radius: 16px; overflow: hidden; cursor: pointer; transition: flex-grow calc(var(--motion-slow) * 1.55) cubic-bezier(.16, 1, .3, 1); background-size: cover; background-position: center; } .sec-125 .imgacc__panel.active{ flex: 3; } .sec-125 .imgacc__panel::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--c-secondary-dark) 86%, transparent) 0%, color-mix(in srgb, var(--c-secondary-dark) 25%, transparent) 45%, transparent 70%); } .sec-125 .imgacc__content{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--sp-5) var(--sp-5); } .sec-125 .imgacc__title{ font-size: var(--fs-title-lg); font-weight: 700; color: var(--c-white); margin-top: 0; line-height: 1.3; margin-bottom: 0; white-space: nowrap; } .sec-125 .imgacc__more{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-slow) var(--ease-standard) 260ms; } .sec-125 .imgacc__more-inner{ overflow: hidden; } .sec-125 .imgacc__panel.active .imgacc__more{ grid-template-rows: 1fr; } .sec-125 .imgacc__more p{ font-size: var(--fs-body, 1rem); line-height: 1.65; color: color-mix(in srgb, var(--c-white) 85%, transparent); max-width: 44ch; padding-top: var(--sp-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; opacity: 0; transition: opacity var(--motion-slow) var(--ease-standard) 260ms; } .sec-125 .imgacc__panel.active .imgacc__more p{ opacity: 1; } .sec-125 .imgacc__panel.active .imgacc__content{ left: 1rem; right: auto; bottom: 1rem; width: fit-content; max-width: calc(100% - 2rem); padding: var(--space-card-pad); border-radius: 14px; background: color-mix(in srgb, var(--c-secondary-dark) 46%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .sec-125 .imgacc__panel.active .imgacc__content{ background: color-mix(in srgb, var(--c-secondary-dark) 84%, transparent); } } .sec-125 .imgacc__panel.active::after{ background: linear-gradient(to top, color-mix(in srgb, var(--c-secondary-dark) 42%, transparent) 0%, transparent 58%); } @media (prefers-reduced-motion: reduce){ .sec-125 .imgacc__panel, .sec-125 .imgacc__panel::after, .sec-125 .imgacc__more, .sec-125 .imgacc__more p{ transition: none; } } @media (min-width: 1025px) { .sec-125 .imgacc__row{ gap: 6px; } .sec-125 .imgacc__panel:not(.active){ flex: 0 1 104px; } .sec-125 .imgacc__panel.active{ flex: 12 1 104px; } .sec-125 .imgacc__panel{ border-radius: 0; } .sec-125 .imgacc__panel:first-child{ border-radius: 16px 0 0 16px; } .sec-125 .imgacc__panel:last-child{ border-radius: 0 16px 16px 0; } .sec-125 .imgacc__panel:not(.active) .imgacc__more{ display: none; } .sec-125 .imgacc__panel:not(.active) .imgacc__content{ padding-inline: 0; display: flex; justify-content: center; } .sec-125 .imgacc__panel:not(.active) .imgacc__title{ flex: 0 0 auto; } .sec-125 .imgacc__panel.active .imgacc__title{ white-space: normal; } .sec-125 .imgacc__panel:not(.active) .imgacc__title{ writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 0; font-size: var(--fs-body, 1rem); font-weight: var(--fw-semibold, 600); letter-spacing: .01em; max-height: calc(480px - 2 * var(--sp-5)); overflow: hidden; } } @media (max-width: 1024px) { .sec-125 .imgacc__row{ flex-direction: column; height: auto; } .sec-125 .imgacc__panel{ min-height: 144px; flex: none; transition: min-height var(--motion-slow) cubic-bezier(.4,0,.2,1); } .sec-125 .imgacc__panel.active{ flex: none; min-height: 320px; } .sec-125 .imgacc__title{ white-space: normal; } } .sec-145 .bfaq{ padding-block: var(--section-py); background: var(--c-neutral-light); } .sec-145 .bfaq__head{ text-align: center; max-width: 33.75rem; margin: 0 auto var(--space-head-gap, 3rem); } .sec-145 .bfaq__list{ max-width: 49.1667rem; margin-inline: auto; } .sec-145 .bfaq__list .accordion-item{ background: var(--c-white); border-radius: 12px; } .sec-145 .bfaq__list .accordion-item + .accordion-item{ margin-top: var(--sp-2); } .sec-145 .bfaq__list .accordion-item:has(details[open]){ box-shadow: var(--shadow-sm); } .sec-145 .bfaq__list .accordion-trigger{ padding: var(--sp-4) var(--sp-5); font-size: var(--fs-body-sm); font-weight: 600; } .sec-145 .bfaq__list .accordion-icon{ color: var(--c-primary); margin-left: auto; } .sec-145 .bfaq__list .accordion-content_spacer{ padding: 0 var(--sp-5) var(--sp-4); font-size: var(--fs-body, 1rem); line-height: var(--lh-body, 1.6); color: var(--t-secondary); } .sec-145 .bfaq__cta{ max-width: 49.1667rem; margin: var(--sp-6) auto 0; background: linear-gradient(150deg, var(--c-secondary-dark), var(--c-black)); border-radius: 14px; padding: var(--sp-5) var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; } .sec-145 .bfaq__cta-title{ font-size: 1rem; font-weight: 700; color: var(--c-white); } .sec-145 .bfaq__cta-sub{ font-size: var(--fs-body-sm); color: color-mix(in srgb, var(--c-white) 60%, transparent); margin-top: 3px; } @media (max-width: 767px) { .sec-145 .bfaq__cta{ flex-direction: column; align-items: flex-start; } } .sec-145 .accordion-trigger{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); cursor: pointer; list-style: none; } .sec-145 .accordion-trigger::-webkit-details-marker{ display: none; } .sec-145 .accordion-trigger::marker{ content: none; } .sec-145 .accordion-icon{ display: inline-flex; flex-shrink: 0; transition: transform var(--motion-base); } .sec-145 details[open] .accordion-icon{ transform: rotate(180deg); } .sec-145 .accordion-title{ font-size: var(--fs-title); line-height: 1.35; margin: 0; } .sec-145 .preheadline{ color: var(--c-primary-mid); } .sec-180 .hero-e{ position: relative; min-height:calc(var(--m-heroh, 85) * 1vh - var(--nav-h)); display: flex; align-items: flex-end; background: linear-gradient(to top, color-mix(in srgb, var(--c-secondary-dark) 78%, transparent) 0%, color-mix(in srgb, var(--c-secondary-dark) 30%, transparent) 42%, color-mix(in srgb, var(--c-secondary-dark) 5%, transparent) 68%), linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%) center / cover no-repeat; } .sec-180 .hero-e > .container{ width: 100%; } .sec-180 .hero-e__inner{ padding-bottom: clamp(var(--sp-7), 8vh, var(--sp-9)); color: var(--c-white); max-width: 51.25rem; } .sec-180 .hero-e h1{ font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -1.5px; font-weight: 700; color: var(--c-white); margin: 0 0 var(--space-stack-lg, 1.5rem); text-wrap: balance; } .sec-180 .hero-e__body{ color: color-mix(in srgb, var(--c-white) 85%, transparent); max-width: 52ch; margin: 0 0 var(--sp-6); } .sec-180 .hero-e__actions{ display: flex; gap: var(--sp-4); flex-wrap: wrap; } .sec-180 .hero-e .btn--ghost{ background: transparent; color:var(--c-white); border-color: color-mix(in srgb, var(--c-white) 60%, transparent); } .sec-180 .hero-e .btn--ghost:hover{ background: color-mix(in srgb, var(--c-white) 12%, transparent); border-color:var(--c-white); } .sec-180 .hero-e__bg{ position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; background-repeat: no-repeat; } .sec-180 .hero-e__bg[style*="background-image"]::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--c-secondary-dark) 70%, transparent) 0%, transparent 55%); } .sec-239 { padding-block:var(--section-py); } .sec-239 .uu1__head { margin-bottom: var(--space-head-gap, 3rem); } .sec-239 .uu1__head h2 { color:var(--t-primary); } .sec-239 .grid { gap: var(--grid-gutter); } .sec-239 .uu1__tile { border-radius:var(--r-card); overflow:hidden; aspect-ratio:1 / 1; } .sec-239 .uu1__tile--text { background:var(--c-neutral-light); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: clamp(var(--sp-4), 1.8vw, var(--sp-6)); gap: var(--sp-3); } .sec-239 .uu1__year { font-size:clamp(1.5rem, 2.4vw, 2.1rem); font-weight:700; color:var(--c-primary-dark); line-height:1; } .sec-239 .uu1__title { font-size:clamp(1.15rem, 1.8vw, 1.55rem); font-weight:700; color:var(--t-primary); line-height:1.15; } .sec-239 .uu1__tile--text p { margin:0; font-size: var(--fs-body-sm); line-height:1.55; color:var(--t-secondary); max-width:28ch; } .sec-239 .uu1__tile--img { position:relative; } .sec-239 .uu1__tile--img.is-a { background:linear-gradient(135deg, var(--c-primary-dark), var(--c-black)); } .sec-239 .uu1__tile--img.is-b { background:linear-gradient(135deg, var(--c-secondary-dark), var(--c-black)); } .sec-239 .uu1__tile--img.is-c { background:linear-gradient(135deg, var(--c-tertiary-dark), var(--c-black)); } .sec-239 .uu1__tile--img.is-d { background:linear-gradient(135deg, var(--c-neutral-dark), var(--c-black)); } .sec-239 .uu1__tile--img img { width:100%; height:100%; object-fit:cover; display:block; } .sec-239 .uu1__tile--img:has(img)::after { display:none; } @media (max-width:1024px) { .sec-239 .grid > :nth-child(1){ order:1; } .sec-239 .grid > :nth-child(2){ order:2; } .sec-239 .grid > :nth-child(3){ order:4; } .sec-239 .grid > :nth-child(4){ order:3; } .sec-239 .grid > :nth-child(5){ order:6; } .sec-239 .grid > :nth-child(6){ order:5; } .sec-239 .grid > :nth-child(7){ order:7; } .sec-239 .grid > :nth-child(8){ order:8; } .sec-239 .grid > :nth-child(9){ order:9; } .sec-239 .grid > :nth-child(10){ order:10; } .sec-239 .grid > :nth-child(11){ order:12; } .sec-239 .grid > :nth-child(12){ order:11; } .sec-239 .grid > :nth-child(13){ order:14; } .sec-239 .grid > :nth-child(14){ order:13; } .sec-239 .grid > :nth-child(15){ order:15; } .sec-239 .grid > :nth-child(16){ order:16; } .sec-239 .grid > :nth-child(17){ order:17; } .sec-239 .grid > :nth-child(18){ order:18; } .sec-239 .grid > :nth-child(19){ order:20; } .sec-239 .grid > :nth-child(20){ order:19; } .sec-239 .grid > :nth-child(21){ order:22; } .sec-239 .grid > :nth-child(22){ order:21; } .sec-239 .grid > :nth-child(23){ order:23; } .sec-239 .grid > :nth-child(24){ order:24; } .sec-239 .grid > :nth-child(25){ order:25; } .sec-239 .grid > :nth-child(26){ order:26; } .sec-239 .grid > :nth-child(27){ order:28; } .sec-239 .grid > :nth-child(28){ order:27; } } .sec-281 .ep{ padding-block: var(--section-py, 6rem); background: var(--c-surface, #fff); } .sec-281 .ep__head{ max-width: 36rem; margin-bottom: var(--space-head-gap, 3rem); } .sec-281 .ep__head h2{ margin-block: 0; text-wrap: balance; } .sec-281 .ep__grid{ display: grid; grid-template-columns: repeat(var(--m-spalten, 3), minmax(0, 1fr)); gap: var(--grid-gutter, 1.5rem); align-items: stretch; } .sec-281 .ep__card{ display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--c-white, #fff); border: var(--bw-card, 1px) solid var(--c-border, rgba(0, 0, 0, .12)); border-radius: var(--r-card, .5rem); transition: border-color var(--motion-base, .25s ease); } .sec-281 .ep__card:hover{ border-color: var(--c-primary, #253746); } .sec-281 .ep__body{ display: flex; flex-direction: column; flex: 1; padding: var(--space-card-pad, 1rem); gap: var(--space-card-gap, 1rem); } .sec-281 .ep__body > *{ margin-block: 0; } .sec-281 .ep__ident{ display: flex; flex-direction: column; gap: var(--space-text-pair, .5rem); } .sec-281 .ep__name{ font-size: var(--fs-title, 1.125rem); margin-block: 0; } .sec-281 .ep__role{ font-size: var(--fs-meta, .875rem); line-height: 1.5; color: var(--c-primary-dark, #253746); margin-block: 0; } .sec-281 .ep__contact{ list-style: none; margin-block: 0; padding-inline: 0; display: flex; flex-direction: column; gap: var(--space-list-gap, .5rem); } .sec-281 .ep__contact a{ display: inline-flex; align-items: center; gap: var(--space-inline, .5rem); font-size: var(--fs-body-sm, .875rem); line-height: 1.5; color: var(--t-secondary, #4a5a68); text-decoration: none; text-transform: none; transition: color var(--motion-base, .25s ease); } .sec-281 .ep__contact a:hover{ color: var(--c-primary-dark, #253746); } .sec-281 .ep__ico{ display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; flex: none; color: var(--c-primary, #253746); } .sec-281 .ep__ico svg{ width: 100%; height: 100% } .sec-281 .ep__pfeil{ display: inline-flex; align-items: center; justify-content: center; width: .8125rem; height: .8125rem; flex: none } .sec-281 .ep__pfeil svg{ width: 100%; height: 100% } .sec-281 .ep__cta{ margin-top: auto; padding-top: var(--space-stack-lg, 1.5rem); align-self: flex-start; } @media (max-width: 1024px) { .sec-281 .ep__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .sec-281 .ep__grid{ grid-template-columns: minmax(0, 1fr); } } .sec-283 .kf-sec{ padding-block:var(--section-py, 6rem); } .sec-283 .kf__felder{ display:flex; flex-direction:column; gap:var(--space-field-gap, 1rem); } .sec-283 .field{ margin-bottom:0; } .sec-283 .grid > .field{ margin-bottom:0; } .sec-283 .field > .kf__label{ display:block; margin-bottom:var(--space-text-pair, .5rem); font-size:var(--fs-label-sm, .875rem); font-weight:var(--fw-semibold, 600); color:var(--t-secondary, #4a5560); } .sec-283 .kf__pflicht{ color:var(--t-negativ, #b42318); } .sec-283 .kf__nachricht textarea{ resize:vertical; } .sec-283 .kf__anrede{ position:relative; } .sec-283 .kf__anrede select{ appearance:none; -webkit-appearance:none; padding-right:2.75rem; } .sec-283 .kf__anrede::after{ content:""; position:absolute; right:.9375rem; bottom:1.375rem; width:.5rem; height:.5rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transform-origin:center; color:var(--t-secondary, #4a5560); pointer-events:none; } .sec-283 .kf__pflicht-zeile{ margin-top:var(--space-stack, 1rem); font-size:var(--fs-body-sm, .875rem); color:var(--t-secondary, #4a5560); } .sec-283 .kf__zustimmung{ display:flex; align-items:flex-start; gap:var(--space-inline, .5rem); margin-top:var(--space-stack, 1rem); font-size:var(--fs-caption, .875rem); color:var(--t-secondary, #4a5560); cursor:pointer; } .sec-283 .kf__zustimmung input{ flex:0 0 auto; width:1.25rem; height:1.25rem; accent-color:var(--c-primary, #1e76c2); } .sec-283 .kf__zustimmung a{ color:var(--c-primary, #1e76c2); text-decoration:underline; } .sec-283 .kf__senden{ margin-top:var(--space-stack-lg, 1.5rem); } .sec-285 .mkz{ padding-block: var(--section-py); background: var(--c-surface, #fff); } .sec-285 .mkz__head{ margin-bottom: var(--sp-8, 4rem); } .sec-285 .mkz__band{ overflow: hidden; margin-block: var(--sp-8); -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .sec-285 .marquee-wrapper{ display: flex; width: max-content; animation: sec-285-lauf var(--marquee-duration, 52s) linear infinite; } .sec-285 .marquee-group{ display: flex; align-items: center; padding-inline: calc(var(--sp-7) / 2); flex-shrink: 0; } .sec-285 .marquee-group > * + *{ margin-inline-start: var(--sp-7); } @keyframes sec-285-lauf{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } .sec-285 .mkz__logo{ inline-size: 11rem; block-size: 5rem; flex-shrink: 0; object-fit: contain; } .sec-285 .mkz__logo:nth-child(3n+2){ inline-size: 8.5rem; } .sec-285 .mkz__logo:nth-child(3n+3){ inline-size: 12.5rem; } .sec-285 .mkz__zahlen{ row-gap: var(--sp-7); } .sec-285 .mkz__zahl{ border-top: 1px solid var(--c-border, rgba(0,0,0,.12)); padding-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--space-text-pair, .5rem); } .sec-285 .mkz__wert{ font-family: var(--font-heading, var(--font)); font-weight: var(--fw-heading, 700); font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--t-primary, #0a1642); } .sec-285 .mkz__label{ font-size: var(--fs-body, 1rem); font-weight: var(--fw-semibold, 600); line-height: var(--lh-body, 1.6); color: var(--t-secondary, #8b8c8e); } @media (max-width: 767px){ .sec-285 .mkz__logo, .sec-285 .mkz__logo:nth-child(3n+2), .sec-285 .mkz__logo:nth-child(3n+3){ inline-size: 8.5rem; block-size: 4rem; } .sec-285 .marquee-group > * + *{ margin-inline-start: var(--sp-6); } } .sec-286 .pcta{ --sec-ueberstand: var(--sp-8, 4rem); padding-bottom: var(--sec-ueberstand); background: var(--c-surface, #fff); } .sec-286 .pcta__band{ background: var(--c-inverse-surface, #030716); padding-block: var(--section-py); overflow: visible; } .sec-286 .pcta__text{ align-self: center; } .sec-286 .pcta__text p{ max-width: none; } .sec-286 .pcta__text h2{ margin-bottom: var(--space-stack, 1rem); } .sec-286 .pcta__aktionen{ display: flex; flex-wrap: wrap; gap: var(--gap-btn, 1rem); margin-top: var(--space-stack-lg, 1.5rem); } .sec-286 .pcta__portraet{ align-self: end; } .sec-286 .pcta__bild{ aspect-ratio: 4 / 5; border-radius: var(--r-card, 16px); background: var(--c-surface-muted, #d1d2d5); margin-bottom: calc(-1 * (var(--section-py, 6rem) + var(--sec-ueberstand))); } @media (max-width: 767px){ .sec-286 .pcta{ --sec-ueberstand: var(--sp-6, 2rem); } .sec-286 .pcta__bild{ margin-top: var(--sp-6); } } .sec-287 .pkt{ --sec-ausbruch: var(--sp-7, 3rem); --sec-ausbruch-seite: var(--sp-6, 2rem); padding-block: var(--section-py); background: var(--c-surface-subtle, #f0f0f1); overflow-x: clip; } .sec-287 .pkt__karte{ background: var(--c-surface, #fff); border: 1px solid var(--c-border, rgba(0,0,0,.12)); border-radius: var(--r-card, 16px); padding: var(--space-card-pad-xl, 3rem); margin-top: var(--sec-ausbruch); } .sec-287 .pkt__reihe{ align-items: stretch; } .sec-287 .pkt__bild{ height: calc(100% + var(--space-card-pad-xl, 3rem) + var(--sec-ausbruch)); border-radius: var(--r-sm, 12px); background: var(--c-surface-muted, #d1d2d5); margin-top: calc(-1 * (var(--space-card-pad-xl, 3rem) + var(--sec-ausbruch))); margin-inline-end: calc(-1 * (var(--space-card-pad-xl, 3rem) + var(--sec-ausbruch-seite))); } .sec-287 .pkt__text p{ max-width: 52ch; } .sec-287 .pkt__knopf{ margin-top: var(--space-stack-lg, 1.5rem); } .sec-287 .pkt__zwischen{ display: flex; align-items: center; gap: var(--sp-5, 1.5rem); margin-top: var(--sp-6, 2rem); margin-bottom: var(--sp-5, 1.5rem); } .sec-287 .pkt__zwischen h3{ margin: 0; flex-shrink: 0; } .sec-287 .pkt__zwischen::after{ content: ""; flex: 1; height: 1px; background: var(--c-border, rgba(0,0,0,.12)); } .sec-287 .pkt__liste{ list-style: none; margin: 0; padding: 0; row-gap: var(--space-list-gap, .5rem); } .sec-287 .pkt__punkt{ display: flex; align-items: center; gap: var(--space-inline, .5rem); padding-block: var(--sp-1, .25rem); font-size: var(--fs-body, 1rem); line-height: var(--lh-body, 1.6); color: var(--t-secondary, #8b8c8e); } .sec-287 .pkt__haken{ flex-shrink: 0; inline-size: 1.25rem; block-size: 1.25rem; color: var(--c-primary, #1e76c2); } .sec-287 .pkt__haken svg{ display: block; width: 100%; height: 100%; } @media (max-width: 1024px){ .sec-287 .pkt{ --sec-ausbruch: 0rem; --sec-ausbruch-seite: 0rem; } .sec-287 .pkt__karte{ padding: var(--space-card-pad-lg, 2rem); } .sec-287 .pkt__reihe{ align-items: start; } .sec-287 .pkt__medium{ order: -1; } .sec-287 .pkt__bild{ height: auto; aspect-ratio: 16 / 9; margin: 0 0 var(--sp-6, 2rem) 0; } .sec-287 .pkt__zwischen{ flex-wrap: wrap; } .sec-287 .pkt__zwischen h3{ flex-shrink: 1; min-width: 0; } } @media (max-width: 767px){ .sec-287 .pkt__bild{ aspect-ratio: 3 / 2; } .sec-287 .pkt__zwischen::after{ flex-basis: 100%; } } .sec-288 .ftr__logos{ --sec-anker: 3.25rem; padding-block: var(--sp-7, 3rem); background: var(--c-surface-subtle, #f0f0f1); } .sec-288 .ftr__logo{ block-size: 3.5rem; inline-size: 100%; object-fit: contain; object-position: left center; } .sec-288 .ftr__anker{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; inline-size: var(--sec-anker); block-size: var(--sec-anker); margin-inline: auto; margin-top: var(--sp-6, 2rem); margin-bottom: calc(-1 * (var(--sec-anker) / 2 + var(--sp-7, 3rem))); border-radius: var(--r-pill, 9999px); background: var(--c-surface, #fff); border: .5rem solid var(--c-inverse-surface, #030716); color: var(--c-inverse-surface, #030716); } .sec-288 .ftr__anker svg{ inline-size: 1.125rem; block-size: 1.125rem; display: block; } .sec-288 .ftr__dunkel{ background: var(--c-inverse-surface, #030716); padding-top: calc(var(--section-py) + var(--sp-5, 1.5rem)); } .sec-288 .ftr__zuruf{ text-align: center; } .sec-288 .ftr__zuruf .preheadline{ color: var(--c-white, #fff); opacity: .78; } .sec-288 .ftr__zuruf h2{ font-size: var(--fs-h1, clamp(2rem, 1.63rem + 1.52vw, 3rem)); margin-bottom: 0; text-wrap: balance; } .sec-288 .ftr__zuruf-knopf{ margin-top: var(--sp-7, 3rem); } .sec-288 .ftr__zuruf-knopf .btn{ width: 100%; } .sec-288 .ftr__menue{ margin-top: var(--sp-9, 6rem); } .sec-288 .ftr__marke{ margin-bottom: var(--space-stack-lg, 1.5rem); } .sec-288 .ftr__adresse{ font-style: normal; font-size: var(--fs-body, 1rem); line-height: var(--lh-body, 1.6); color: color-mix(in srgb, var(--c-white, #fff) 78%, transparent); } .sec-288 .ftr__spaltentitel{ font-size: var(--fs-label-sm, .875rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-white, #fff); margin-bottom: var(--sp-4, 1rem); } .sec-288 .ftr__links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-list-gap, .5rem); } .sec-288 .ftr__links a{ font-size: var(--fs-nav, var(--fs-body, 1rem)); line-height: var(--lh-body, 1.6); color: color-mix(in srgb, var(--c-white, #fff) 78%, transparent); text-decoration: none; transition: color var(--motion-fast, 150ms) var(--ease-standard, ease); } .sec-288 .ftr__links a:hover{ color: var(--c-white, #fff); } .sec-288 .ftr__links a:focus-visible{ outline: 2px solid var(--c-white, #fff); outline-offset: 2px; } .sec-288 .ftr__sozial{ display: flex; gap: var(--space-inline, .5rem); margin-top: var(--sp-6, 2rem); } .sec-288 .ftr__icon{ display: flex; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid color-mix(in srgb, var(--c-white, #fff) 24%, transparent); border-radius: var(--r-sm, 12px); color: var(--c-white, #fff); transition: background var(--motion-fast, 150ms) var(--ease-standard, ease); } .sec-288 .ftr__icon:hover{ background: color-mix(in srgb, var(--c-white, #fff) 12%, transparent); } .sec-288 .ftr__icon:focus-visible{ outline: 2px solid var(--c-white, #fff); outline-offset: 2px; } .sec-288 .ftr__icon svg{ inline-size: 1.125rem; block-size: 1.125rem; display: block; } .sec-288 .ftr__schluss{ margin-top: var(--sp-8, 4rem); background: var(--c-primary, #1e76c2); padding-block: var(--sp-4, 1rem); } .sec-288 .ftr__schluss-innen{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4, 1rem); font-size: var(--fs-caption, .875rem); color: var(--c-on-primary, #fff); } .sec-288 .ftr__recht{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-6, 2rem); } .sec-288 .ftr__recht a{ font-size: var(--fs-nav, var(--fs-body, 1rem)); color: inherit; text-decoration: none; } .sec-288 .ftr__recht a:hover{ color: var(--c-white, #fff); text-decoration: underline; } .sec-288 .ftr__recht a:focus-visible{ outline: 2px solid var(--c-white, #fff); outline-offset: 2px; } @media (max-width: 767px){ .sec-288 .ftr__logo{ block-size: 2.5rem; } .sec-288 .ftr__menue{ margin-top: var(--sp-8, 4rem); } .sec-288 .ftr__schluss-innen{ flex-direction: column; align-items: flex-start; } .sec-288 .ftr__recht{ gap: var(--sp-4, 1rem); } } .sec-289 .mpk{ padding-block: var(--section-py); background: var(--c-surface, #fff); } .sec-289 .mpk__head{ margin-bottom: var(--space-head-gap, 3rem); } .sec-289 .mpk__karte{ position: relative; } .sec-289 .mpk__bild{ display: block; width: 100%; height: auto; } .sec-289 .mpk__punkt{ position: absolute; inline-size: 1rem; block-size: 1rem; transform: translate(-50%, -50%); padding: 0; cursor: pointer; border: 2px solid var(--c-surface, #fff); border-radius: var(--r-pill, 9999px); background: var(--c-primary, #1e76c2); animation: sec-289-puls 2.4s var(--ease-standard, ease-out) infinite; } .sec-289 .mpk__punkt:nth-child(4n+2){ animation-delay: .6s; } .sec-289 .mpk__punkt:nth-child(4n+3){ animation-delay: 1.2s; } .sec-289 .mpk__punkt:nth-child(4n+4){ animation-delay: 1.8s; } .sec-289 .mpk__punkt:hover{ background: var(--c-primary-dark, #0a2741); } .sec-289 .mpk__punkt:focus-visible{ outline: 3px solid var(--c-primary, #1e76c2); outline-offset: 4px; } @keyframes sec-289-puls{ 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-primary, #1e76c2) 55%, transparent); } 70% { box-shadow: 0 0 0 .875rem color-mix(in srgb, var(--c-primary, #1e76c2) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-primary, #1e76c2) 0%, transparent); } } .sec-289 .mpk__text{ align-self: center; } .sec-289 .mpk__text p{ max-width: 58ch; } .sec-289 .mpk__liste{ list-style: none; margin: var(--space-stack-lg, 1.5rem) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-list-gap, .5rem); } .sec-289 .mpk__zeile{ display: flex; align-items: flex-start; gap: var(--space-inline, .5rem); padding-block: var(--sp-2, .5rem); font-size: var(--fs-body, 1rem); line-height: var(--lh-body, 1.6); color: var(--t-secondary, #8b8c8e); } .sec-289 .mpk__haken{ flex-shrink: 0; inline-size: 1.25rem; block-size: 1.25rem; margin-top: .2em; color: var(--c-primary, #1e76c2); } .sec-289 .mpk__haken svg{ display: block; width: 100%; height: 100%; } .sec-289 .mpk__knopf{ margin-top: var(--space-stack-lg, 1.5rem); } .sec-289 .modal{ position: relative; margin: auto; width: min(60rem, calc(100vw - 2 * var(--container-px, 24px))); max-height: calc(100vh - 2 * var(--sp-7, 3rem)); padding: 0; border: 0; border-radius: var(--r-card, 16px); background: var(--c-surface, #fff); color: var(--t-primary, #0a1642); overflow: auto; } .sec-289 .modal::backdrop{ background: color-mix(in srgb, var(--c-secondary-dark, #030716) 62%, transparent); } .sec-289 .modal__innen{ padding: var(--space-card-pad-xl, 3rem); } .sec-289 .modal__titel{ margin-bottom: var(--sp-6, 2rem); padding-inline-end: var(--sp-7, 3rem); } .sec-289 .modal-close{ position: absolute; inset-block-start: var(--sp-5, 1.5rem); inset-inline-end: var(--sp-5, 1.5rem); display: flex; align-items: center; justify-content: center; inline-size: 2.25rem; block-size: 2.25rem; border: 0; border-radius: var(--r-btn, 8px); background: transparent; color: var(--t-primary, #0a1642); cursor: pointer; } .sec-289 .modal-close:hover{ background: var(--c-surface-subtle, #f0f0f1); } .sec-289 .modal-close:focus-visible{ outline: 2px solid var(--c-primary, #1e76c2); outline-offset: 2px; } .sec-289 .modal-close svg{ inline-size: 1.25rem; block-size: 1.25rem; display: block; } .sec-289 .mpk__region{ display: none; } .sec-289 .mpk__region[data-aktiv="ja"]{ display: block; } .sec-289 .mpk__regionkarte{ border-radius: var(--r-sm, 12px); background: var(--c-inverse-surface, #030716); padding: var(--space-card-pad, 1rem); margin-bottom: var(--space-stack, 1rem); } .sec-289 .mpk__regionkarte img{ display: block; width: 100%; height: auto; } .sec-289 .mpk__regionname{ display: block; font-family: var(--font-heading, var(--font)); font-weight: var(--fw-heading, 700); font-size: var(--fs-h5, 1.25rem); margin-bottom: var(--space-stack, 1rem); } .sec-289 .mpk__weg{ display: flex; align-items: center; gap: var(--space-inline, .5rem); font-size: var(--fs-body, 1rem); color: var(--t-secondary, #8b8c8e); text-decoration: none; padding-block: var(--sp-2, .5rem); } .sec-289 .mpk__weg:hover{ color: var(--c-primary, #1e76c2); } .sec-289 .mpk__weg svg{ inline-size: 1rem; block-size: 1rem; flex-shrink: 0; color: var(--c-primary, #1e76c2); } .sec-289 .modal .field{ margin-bottom: 0; } .sec-289 .modal__formular{ row-gap: var(--space-field-gap, 1rem); } .sec-289 .modal .field label{ margin-bottom: var(--sp-1, .25rem); } .sec-289 .modal textarea{ min-height: 7rem; } .sec-289 .mpk__stern{ color: var(--c-primary, #1e76c2); } .sec-289 .mpk__selectbox{ position: relative; display: block; } .sec-289 .mpk__selectbox select{ appearance: none; -webkit-appearance: none; padding-inline-end: calc(.9375rem + 1.5rem); } .sec-289 .mpk__selectbox::after{ content: ""; position: absolute; pointer-events: none; inset-inline-end: .9375rem; top: 50%; translate: 0 -50%; inline-size: .75rem; block-size: .75rem; background: var(--t-secondary, #8b8c8e); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.8 4.2 6 8.4l4.2-4.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.8 4.2 6 8.4l4.2-4.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .sec-289 .mpk__pflicht{ font-size: var(--fs-body-sm, .875rem); color: var(--t-secondary, #8b8c8e); margin-bottom: var(--space-field-gap, 1rem); } .sec-289 .mpk__einwilligung{ display: flex; align-items: flex-start; gap: var(--space-inline, .5rem); margin-bottom: var(--space-field-gap, 1rem); } .sec-289 .mpk__einwilligung input{ margin-top: .3em; flex-shrink: 0; } .sec-289 .mpk__einwilligung label{ font-size: var(--fs-caption, .875rem); color: var(--t-secondary, #8b8c8e); } .sec-289 .mpk__einwilligung a{ color: var(--c-primary, #1e76c2); text-decoration: underline; } .sec-289 .mpk__einwilligung a:hover{ color: var(--c-primary-dark, #0a2741); } .sec-289 .modal .btn{ width: 100%; } @media (max-width: 767px){ .sec-289 .modal__innen{ padding: var(--space-card-pad-lg, 2rem); } .sec-289 .mpk__punkt{ inline-size: 1.25rem; block-size: 1.25rem; } } .sec-290 .tpb{ --sec-markenblock: 17rem; background: var(--c-inverse-surface, #030716); } .sec-290 .tpb__innen{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5, 1.5rem); min-height: 2.75rem; padding-block: var(--sp-2, .5rem); } .sec-290 .tpb__platz{ inline-size: var(--sec-markenblock); flex-shrink: 0; } .sec-290 .tpb__wege{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-6, 2rem); margin-inline-end: auto; } .sec-290 .tpb__weg{ display: inline-flex; align-items: center; gap: var(--space-inline, .5rem); font-size: var(--fs-body, 1rem); color: var(--c-white, #fff); text-decoration: none; transition: opacity var(--motion-fast, 150ms) var(--ease-standard, ease); } .sec-290 .tpb__weg:hover{ opacity: .75; } .sec-290 .tpb__weg:focus-visible{ outline: 2px solid var(--c-white, #fff); outline-offset: 3px; } .sec-290 .tpb__weg svg{ inline-size: 1rem; block-size: 1rem; display: block; flex-shrink: 0; } .sec-290 .tpb__sozial{ display: flex; align-items: center; gap: var(--sp-4, 1rem); } .sec-290 .tpb__sozial a{ color: var(--c-white, #fff); display: block; transition: opacity var(--motion-fast, 150ms) var(--ease-standard, ease); } .sec-290 .tpb__sozial a:hover{ opacity: .75; } .sec-290 .tpb__sozial a:focus-visible{ outline: 2px solid var(--c-white, #fff); outline-offset: 3px; } .sec-290 .tpb__sozial svg{ inline-size: 1.125rem; block-size: 1.125rem; display: block; } @media (max-width: 1024px){ .sec-290 .tpb{ --sec-markenblock: 12rem; } } @media (max-width: 767px){ .sec-290 .tpb__platz{ display: none; } .sec-290 .tpb__sozial{ display: none; } .sec-290 .tpb__wege{ gap: var(--sp-5, 1.5rem); margin-inline-end: 0; } .sec-290 .tpb__innen{ justify-content: center; } } .sec-291 .nvg{ --sec-markenblock: 17rem; position: sticky; top: 0; z-index: 50; background: var(--c-surface, #fff); border-bottom: 1px solid var(--c-border, rgba(0,0,0,.12)); } .sec-291 .nvg__innen{ display: flex; align-items: stretch; gap: var(--sp-6, 2rem); min-height: var(--nav-h, 72px); } .sec-291 .nvg__marke{ display: flex; align-items: center; flex-shrink: 0; text-decoration: none; background: var(--c-inverse-surface, #030716); margin-inline-start: calc(50% - 50vw); inline-size: calc(50vw - 50% + var(--sec-markenblock)); padding-inline-start: calc(50vw - 50% + var(--sp-6, 2rem)); padding-inline-end: var(--sp-6, 2rem); } .sec-291 .nvg__marke .nvg__wortmarke{ white-space: nowrap; } .sec-291 .nvg__wortmarke{ font-family: var(--font-heading, var(--font)); font-weight: var(--fw-heading, 700); font-size: var(--fs-title-lg, 1.25rem); letter-spacing: -.01em; color: var(--c-white, #fff); } .sec-291 .nvg__panel{ display: flex; align-items: center; gap: var(--sp-6, 2rem); margin-inline-start: auto; } .sec-291 .nvg__menue{ display: flex; align-items: center; gap: var(--sp-6, 2rem); list-style: none; margin: 0; padding: 0; } .sec-291 .nvg__item{ position: relative; } .sec-291 .nvg__link{ display: inline-flex; align-items: center; gap: var(--space-inline, .5rem); padding-block: var(--sp-3, .75rem); font-size: var(--fs-body-sm, .875rem); font-weight: 600; white-space: nowrap; color: var(--t-primary, #0a1642); text-decoration: none; transition: color var(--motion-fast, 150ms) var(--ease-standard, ease); } .sec-291 .nvg__link:hover{ color: var(--c-primary, #1e76c2); } .sec-291 .nvg__link:focus-visible{ outline: 2px solid var(--c-primary, #1e76c2); outline-offset: 4px; } .sec-291 .nvg__pfeil{ inline-size: .75rem; block-size: .75rem; transition: transform var(--motion-fast, 150ms) var(--ease-standard, ease); } .sec-291 .nvg__item:hover .nvg__pfeil, .sec-291 .nvg__item:focus-within .nvg__pfeil{ transform: rotate(180deg); } .sec-291 .nvg__sub{ position: absolute; top: 100%; inset-inline-start: 0; min-inline-size: 16rem; display: flex; flex-direction: column; padding: var(--space-card-pad, 1rem); background: var(--c-surface, #fff); border: 1px solid var(--c-border, rgba(0,0,0,.12)); border-radius: var(--r-card, 16px); box-shadow: var(--shadow-md, 0 8px 28px rgba(0,0,0,.12)); z-index: 2; opacity: 0; visibility: hidden; transform: translateY(.25rem); transition: opacity var(--motion-fast, 150ms) var(--ease-standard, ease), transform var(--motion-fast, 150ms) var(--ease-standard, ease), visibility var(--motion-fast, 150ms); } .sec-291 .nvg__item:hover > .nvg__sub, .sec-291 .nvg__item:focus-within > .nvg__sub{ opacity: 1; visibility: visible; transform: none; } .sec-291 .nvg__sublink{ padding: var(--sp-3, .75rem) var(--sp-4, 1rem); border-radius: var(--r-btn, 8px); font-size: var(--fs-nav, var(--fs-body, 1rem)); color: var(--t-secondary, #8b8c8e); text-decoration: none; transition: background var(--motion-fast, 150ms) var(--ease-standard, ease), color var(--motion-fast, 150ms) var(--ease-standard, ease); } .sec-291 .nvg__sublink:hover{ background: var(--c-surface-subtle, #f0f0f1); color: var(--t-primary, #0a1642); } .sec-291 .nvg__sublink:focus-visible{ outline: 2px solid var(--c-primary, #1e76c2); outline-offset: -2px; } .sec-291 .nvg__sublink[data-nav-gruppe="1"]{ color: var(--t-primary, #0a1642); font-weight: 700; } .sec-291 .nvg__sublink[data-nav-tiefe="3"]{ padding-inline-start: var(--sp-7, 3rem); } .sec-291 .nvg__werkzeuge{ display: flex; align-items: center; gap: var(--sp-3, .75rem); } .sec-291 .nvg__knopf{ display: flex; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid transparent; border-radius: var(--r-btn, 8px); background: transparent; color: var(--t-primary, #0a1642); cursor: pointer; transition: background var(--motion-fast, 150ms) var(--ease-standard, ease); } .sec-291 .nvg__knopf:hover{ background: var(--c-surface-subtle, #f0f0f1); } .sec-291 .nvg__knopf:focus-visible{ outline: 2px solid var(--c-primary, #1e76c2); outline-offset: 2px; } .sec-291 .nvg__knopf svg{ inline-size: 1.25rem; block-size: 1.25rem; display: block; } .sec-291 .nvg__suche{ display: none; border-top: 1px solid var(--c-border, rgba(0,0,0,.12)); padding-block: var(--sp-4, 1rem); } .sec-291 .nvg__suche[data-offen="ja"]{ display: block; } .sec-291 .nvg__suche .field{ margin-bottom: 0; } .sec-291 .nvg__burger{ display: none; } @media (max-width: 1199px){ .sec-291 .nvg__burger{ display: flex; margin-inline-start: auto; align-self: center; } .sec-291 .nvg__panel{ display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-card-pad, 1rem) var(--container-px, 24px) var(--sp-6, 2rem); background: var(--c-surface, #fff); border-bottom: 1px solid var(--c-border, rgba(0,0,0,.12)); box-shadow: var(--shadow-md, 0 8px 28px rgba(0,0,0,.12)); } .sec-291 .nvg__panel[data-offen="ja"]{ display: flex; } .sec-291 .nvg__menue{ flex-direction: column; align-items: stretch; gap: 0; } .sec-291 .nvg__link{ padding-block: var(--sp-4, 1rem); white-space: normal; } .sec-291 .nvg__sub{ position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 var(--sp-3, .75rem) var(--sp-5, 1.5rem); min-inline-size: 0; border-radius: 0; } .sec-291 .nvg__pfeil{ display: none; } .sec-291 .nvg__werkzeuge{ margin-top: var(--sp-4, 1rem); } .sec-291 .nvg{ position: relative; } .sec-291 .nvg{ --sec-markenblock: 12rem; } .sec-291 .nvg__marke{ padding-inline: var(--sp-5, 1.5rem); } } .sec-292 .kst{ padding-block: var(--section-py); background: var(--c-surface, #fff); } .sec-292 .kst__head{ margin-bottom: var(--space-head-gap, 3rem); } .sec-292 .kst__embed{ aspect-ratio: auto; min-height: 10rem; } .sec-292 .kst__embed > iframe{ position: static; width: 100%; min-height: 10rem; } .sec-292 .kst__warten{ display: flex; align-items: center; justify-content: center; min-height: 10rem; margin: 0; color: var(--t-secondary, #8b8c8e); font-size: var(--fs-body-sm, .875rem); } .sec-293 .pctr{ padding-block: var(--section-py); background: var(--c-white, #fff); } .sec-293 .pctr__head{ max-width: 60ch; margin-bottom: var(--space-head-gap, 3rem); } .sec-293 .pctr__head h2{ margin: 0; } .sec-293 .pctr{ --sec-stufe: 3.5rem; } .sec-293 .pctr__grid{ align-items: stretch; margin-block-end: calc(var(--sec-stufe) * 2); } .sec-293 .pctr__grid{ grid-auto-rows: 1fr; } .sec-293 .pctr__karte:nth-child(3n+2){ position: relative; inset-block-start: var(--sec-stufe); } .sec-293 .pctr__karte:nth-child(3n){ position: relative; inset-block-start: calc(var(--sec-stufe) * 2); } .sec-293 .pctr__karte{ display: flex; flex-direction: column; padding: var(--space-card-pad-lg, 2rem); border: var(--bw-card, 1px) solid var(--c-border, rgba(0,0,0,.12)); background: var(--c-white, #fff); transition: background var(--motion-base, 250ms) var(--ease-standard, ease), border-color var(--motion-base, 250ms) var(--ease-standard, ease); } .sec-293 .pctr__karte:hover{ background: var(--c-surface-subtle, #f6f7f9); border-color: color-mix(in srgb, var(--c-primary, #253746) 40%, transparent); } .sec-293 .pctr__num{ align-self: flex-end; font-family: var(--font-heading, inherit); font-size: clamp(3.25rem, 5.5vw, 5rem); font-weight: var(--fw-heading, 700); line-height: .85; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px var(--c-neutral, #a6adb4); transition: color var(--motion-base, 250ms) var(--ease-standard, ease), -webkit-text-stroke-color var(--motion-base, 250ms) var(--ease-standard, ease); } .sec-293 .pctr__karte:hover .pctr__num{ color: var(--c-primary, #253746); -webkit-text-stroke-color: var(--c-primary, #253746); } .sec-293 .pctr__titel{ margin: var(--space-stack-lg, 1.5rem) 0 var(--space-text-pair, .5rem); font-size: var(--fs-h4, 1.375rem); line-height: 1.2; } .sec-293 .pctr__text{ margin: 0; font-size: var(--fs-body, 1rem); line-height: 1.65; color: var(--t-secondary, #5a636b); } @media (max-width: 1024px){ .sec-293 .pctr__grid{ margin-block-end: 0; } .sec-293 .pctr__karte:nth-child(n){ inset-block-start: 0; } } .sec-294 .cobp{ padding-block: var(--section-py); background: var(--c-white, #fff); } .sec-294 .cobp__grid{ align-items: center; } .sec-294 .cobp__media{ order: var(--m-ausr-media, 0); } .sec-294 .cobp__ph{ width: 100%; aspect-ratio: 3/4; background: var(--c-surface-muted, #eceef0); border: var(--bw-card, 1px) solid var(--c-border, rgba(0,0,0,.12)); } .sec-294 .cobp__text h2{ margin: 0 0 var(--space-stack, 1rem); } .sec-294 .cobp__intro{ margin: 0; font-size: var(--fs-body, 1rem); line-height: 1.7; color: var(--t-secondary, #5a636b); } .sec-294 .cobp__list{ list-style: none; margin: var(--space-stack-lg, 1.5rem) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-stack-lg, 1.5rem); } .sec-294 .cobp__list li{ display: flex; align-items: flex-start; gap: var(--space-inline, .75rem); } .sec-294 .cobp__check{ width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; background: color-mix(in srgb, var(--c-primary, #253746) 12%, transparent); color: var(--c-primary-dark, #1b2731); display: flex; align-items: center; justify-content: center; } .sec-294 .cobp__itemtitel{ display: block; font-family: var(--font-heading, inherit); font-size: var(--fs-title, 1.125rem); font-weight: 700; line-height: 1.35; color: var(--t-primary, #253746); margin-bottom: var(--space-text-pair, .5rem); } .sec-294 .cobp__itemtext{ margin: 0; font-size: var(--fs-body, 1rem); line-height: 1.65; color: var(--t-secondary, #5a636b); } .sec-294 .cobp__knopf{ margin-top: var(--sp-7, 3rem); } .sec-294{ --m-ausrichtung-ist: links; } @media (max-width: 1024px){ .sec-294 .cobp__media{ order: -1; } .sec-294 .cobp__ph{ aspect-ratio: 16/10; } } @media (max-width: 767px){ .sec-294 .cobp__ph{ aspect-ratio: 3/2; } .sec-294 .cobp__knopf{ margin-top: var(--sp-6, 2rem); } } .sec-295 .uspb{ padding-block: var(--section-py); background: var(--c-surface-subtle, #f6f7f9); } .sec-295 .preheadline{ color: var(--c-primary-mid, #253746); } .sec-295 .uspb__text h2{ margin: 0 0 var(--space-stack, 1rem); } .sec-295 .uspb__text p{ margin: 0; font-size: var(--fs-body, 1rem); line-height: 1.7; color: var(--t-secondary, #5a636b); max-width: 65ch; } .sec-295 .uspb__text p + p{ margin-top: var(--space-stack, 1rem); } .sec-295 .uspb__list{ list-style: none; padding: 0; margin: var(--space-stack-lg, 1.5rem) 0; display: flex; flex-direction: column; gap: var(--space-stack, 1rem); } .sec-295 .uspb__list li{ display: flex; align-items: flex-start; gap: var(--space-inline, .75rem); font-size: var(--fs-body, 1rem); line-height: 1.65; color: var(--t-secondary, #5a636b); } .sec-295 .uspb__list strong{ color: var(--t-primary, #253746); font-weight: 700; } .sec-295 .uspb__check{ width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; background: color-mix(in srgb, var(--c-primary, #253746) 12%, transparent); color: var(--c-primary-dark, #1b2731); display: flex; align-items: center; justify-content: center; } .sec-295 .uspb__boxicon{ inline-size: 3rem; block-size: 3rem; flex-shrink: 0; color: var(--c-primary, #253746); } .sec-295 .uspb__boxicon svg{ display: block; width: 100%; height: 100%; } .sec-295 .uspb__boxen{ --sec-versatz: 5rem; align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6, 2rem); } .sec-295 .uspb__box{ inline-size: calc(100% - var(--sec-versatz)); background: var(--c-white, #fff); border: var(--bw-card, 1px) solid var(--c-border, rgba(0,0,0,.12)); padding: var(--space-card-pad, 1rem); display: flex; align-items: center; gap: var(--space-inline, .75rem); } .sec-295 .uspb__box:nth-child(2){ margin-inline-start: var(--sec-versatz); } .sec-295 .uspb__box:nth-child(3){ margin-inline-start: calc(var(--sec-versatz) * .375); } .sec-295 .uspb__boxtitel{ display: block; font-family: var(--font-heading, inherit); font-size: var(--fs-title, 1.125rem); font-weight: 700; line-height: 1.4; color: var(--t-primary, #253746); margin: 0 0 var(--space-text-pair, .5rem); } .sec-295 .uspb__boxtext{ margin: 0; font-size: var(--fs-body, 1rem); line-height: var(--lh-body, 1.6); color: var(--t-secondary, #5a636b); } @media (max-width: 1024px){ .sec-295 .uspb__boxen{ margin-top: var(--sp-7, 3rem); } .sec-295 .uspb__box{ inline-size: 100%; } .sec-295 .uspb__box:nth-child(n){ margin-inline-start: 0; } } @media (max-width: 767px){ .sec-295 .uspb__boxen{ gap: var(--sp-5, 1.5rem); } .sec-295 .uspb__box{ padding: var(--space-card-pad, 1rem); } } .sec-296 .hinw{ padding-block: var(--section-py); background: var(--c-white, #fff); } .sec-296 .hinw__box{ display: flex; align-items: stretch; background: var(--c-white, #fff); border: var(--bw-card, 1px) solid var(--c-border, rgba(0,0,0,.12)); } .sec-296 .hinw__signal{ flex: 0 0 auto; inline-size: clamp(5rem, 11vw, 9rem); min-block-size: clamp(5rem, 11vw, 9rem); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--t-negativ, #9b1c1c) 88%, #000); color: var(--c-white, #fff); } .sec-296 .hinw__signal svg{ block-size: clamp(2.5rem, 5.5vw, 4.5rem); inline-size: auto; display: block; } .sec-296 .hinw__inhalt{ flex: 1 1 auto; min-width: 0; padding: var(--space-card-pad-lg, 2rem); display: flex; flex-direction: column; justify-content: center; } .sec-296 .hinw__titel{ margin: 0 0 var(--space-text-pair, .5rem); font-size: var(--fs-h4, 1.375rem); line-height: 1.25; } .sec-296 .hinw__text{ margin: 0; font-size: var(--fs-body, 1rem); line-height: 1.65; color: var(--t-secondary, #5a636b); max-width: 65ch; } @media (max-width: 767px){ .sec-296 .hinw__box{ flex-direction: column; } .sec-296 .hinw__signal{ inline-size: 100%; block-size: 3.5rem; } .sec-296 .hinw__signal svg{ inline-size: auto; block-size: 55%; } .sec-296 .hinw__inhalt{ padding: var(--space-card-pad, 1rem); } } .sec-297 .flm{ position: fixed; inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; } .sec-297 .flm__knopf{ appearance: none; cursor: pointer; border: var(--bw-btn, 1px) solid var(--c-primary, #253746); padding: var(--sp-5, 1.5rem) var(--sp-3, .75rem); font-family: var(--font-heading, inherit); font-size: var(--fs-label-sm, .875rem); font-weight: 700; letter-spacing: .02em; background: var(--c-white, #fff); color: var(--t-primary, #253746); transition: background var(--motion-base, 250ms) var(--ease-standard, ease), color var(--motion-base, 250ms) var(--ease-standard, ease); } .sec-297 .flm__label{ writing-mode: vertical-rl; transform: rotate(180deg); display: block; } .sec-297 .flm__knopf + .flm__knopf{ border-block-start: 0; } .sec-297 .flm__knopf--voll{ background: var(--c-primary, #253746); color: var(--c-white, #fff); } .sec-297 .flm__knopf:hover{ background: var(--c-primary-dark, #1b2731); color: var(--c-white, #fff); } .sec-297 .flm__knopf:focus-visible{ outline: 2px solid var(--c-primary, #253746); outline-offset: 2px; } .sec-297 .modal{ position: relative; margin: auto; width: min(64rem, calc(100vw - 2 * var(--container-px, 24px))); max-height: calc(100vh - 2 * var(--sp-7, 3rem)); padding: 0; border: 0; border-radius: var(--r-card, 16px); background: var(--c-surface, #fff); color: var(--t-primary, #253746); overflow: auto; } .sec-297 .modal::backdrop{ background: color-mix(in srgb, var(--c-secondary-dark, #030716) 62%, transparent); } .sec-297 .modal__innen{ padding: var(--space-card-pad-xl, 3rem); } .sec-297 .modal-close{ position: absolute; inset-block-start: var(--sp-5, 1.5rem); inset-inline-end: var(--sp-5, 1.5rem); z-index: 1; display: flex; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; border: var(--bw-btn, 1px) solid var(--c-primary, #253746); border-radius: var(--r-pill, 999px); background: var(--c-white, #fff); color: var(--c-primary, #253746); cursor: pointer; } .sec-297 .modal-close:hover{ background: var(--c-primary, #253746); color: var(--c-white, #fff); } .sec-297 .modal-close:focus-visible{ outline: 2px solid var(--c-primary, #253746); outline-offset: 2px; } .sec-297 .modal-close svg{ inline-size: 1.125rem; block-size: 1.125rem; display: block; } .sec-297 .modal__grid{ align-items: stretch; } .sec-297 .modal__ph{ inline-size: 100%; block-size: 100%; min-block-size: 20rem; background: var(--c-surface-muted, #eceef0); border: var(--bw-card, 1px) solid var(--c-border, rgba(0,0,0,.12)); } .sec-297 .modal .preheadline, .sec-297 .modal__titel{ padding-inline-end: var(--sp-8, 4rem); } .sec-297 .modal__titel{ margin: 0 0 var(--space-stack, 1rem); } .sec-297 .modal__intro{ margin: 0; font-size: var(--fs-body, 1rem); line-height: 1.7; color: var(--t-secondary, #5a636b); } .sec-297 .modal__list{ list-style: none; margin: var(--space-stack-lg, 1.5rem) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-stack-lg, 1.5rem); } .sec-297 .modal__list li{ display: flex; align-items: flex-start; gap: var(--space-inline, .75rem); } .sec-297 .modal__check{ width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; background: color-mix(in srgb, var(--c-primary, #253746) 12%, transparent); color: var(--c-primary-dark, #1b2731); display: flex; align-items: center; justify-content: center; } .sec-297 .modal__itemtitel{ display: block; font-family: var(--font-heading, inherit); font-size: var(--fs-title, 1.125rem); font-weight: 700; line-height: 1.35; color: var(--t-primary, #253746); margin: 0 0 var(--space-text-pair, .5rem); } .sec-297 .modal__itemtext{ margin: 0; font-size: var(--fs-body, 1rem); line-height: 1.65; color: var(--t-secondary, #5a636b); } .sec-297 .modal__knopf{ margin-top: var(--sp-6, 2rem); } .sec-297 .fmm__ansicht{ display: none; } .sec-297 .fmm__ansicht[data-aktiv="ja"]{ display: block; } .sec-297 .fmm__ansicht[data-ansicht="karte"] .modal__grid{ align-items: center; } .sec-297 .fmm__karte{ position: relative; } .sec-297 .fmm__bild{ display: block; width: 100%; height: auto; } .sec-297 .fmm__punkt{ position: absolute; inline-size: 1rem; block-size: 1rem; transform: translate(-50%, -50%); padding: 0; cursor: pointer; border: 2px solid var(--c-surface, #fff); border-radius: var(--r-pill, 9999px); background: var(--c-primary, #253746); animation: sec-297-puls 2.4s var(--ease-standard, ease-out) infinite; } .sec-297 .fmm__punkt:nth-of-type(4n+2){ animation-delay: .6s; } .sec-297 .fmm__punkt:nth-of-type(4n+3){ animation-delay: 1.2s; } .sec-297 .fmm__punkt:nth-of-type(4n+4){ animation-delay: 1.8s; } .sec-297 .fmm__punkt:hover{ background: var(--c-primary-dark, #1b2731); } .sec-297 .fmm__punkt:focus-visible{ outline: 3px solid var(--c-primary, #253746); outline-offset: 4px; } @keyframes sec-297-puls{ 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-primary, #253746) 55%, transparent); } 70% { box-shadow: 0 0 0 .875rem color-mix(in srgb, var(--c-primary, #253746) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-primary, #253746) 0%, transparent); } } .sec-297 .fmm__zurueck{ appearance: none; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-inline, .5rem); margin-bottom: var(--space-stack-lg, 1.5rem); font-size: var(--fs-label-sm, .875rem); font-weight: 600; color: var(--c-primary, #253746); } .sec-297 .fmm__zurueck:hover{ color: var(--c-primary-dark, #1b2731); } .sec-297 .fmm__zurueck:focus-visible{ outline: 2px solid var(--c-primary, #253746); outline-offset: 2px; } .sec-297 .fmm__zurueck svg{ inline-size: 1rem; block-size: 1rem; flex-shrink: 0; } .sec-297 .fmm__region{ display: none; } .sec-297 .fmm__region[data-aktiv="ja"]{ display: block; } .sec-297 .fmm__regionkarte{ border-radius: var(--r-sm, 12px); background: var(--c-inverse-surface, #030716); padding: var(--space-card-pad, 1rem); margin-bottom: var(--space-stack, 1rem); } .sec-297 .fmm__regionkarte img{ display: block; width: 100%; height: auto; } .sec-297 .fmm__regionname{ display: block; font-family: var(--font-heading, inherit); font-weight: var(--fw-heading, 700); font-size: var(--fs-h5, 1.25rem); margin-bottom: var(--space-stack, 1rem); } .sec-297 .fmm__weg{ display: flex; align-items: center; gap: var(--space-inline, .5rem); font-size: var(--fs-body, 1rem); color: var(--t-secondary, #5a636b); text-decoration: none; padding-block: var(--sp-2, .5rem); } .sec-297 .fmm__weg:hover{ color: var(--c-primary, #253746); } .sec-297 .fmm__weg svg{ inline-size: 1rem; block-size: 1rem; flex-shrink: 0; color: var(--c-primary, #253746); } .sec-297 .modal .field{ margin-bottom: 0; } .sec-297 .modal__formular{ row-gap: var(--space-field-gap, 1rem); } .sec-297 .modal .field label{ margin-bottom: var(--sp-1, .25rem); } .sec-297 .modal textarea{ min-height: 7rem; } .sec-297 .fmm__stern{ color: var(--c-primary, #253746); } .sec-297 .fmm__selectbox{ position: relative; display: block; } .sec-297 .fmm__selectbox select{ appearance: none; -webkit-appearance: none; padding-inline-end: calc(.9375rem + 1.5rem); } .sec-297 .fmm__selectbox::after{ content: ""; position: absolute; pointer-events: none; inset-inline-end: .9375rem; top: 50%; translate: 0 -50%; inline-size: .75rem; block-size: .75rem; background: var(--t-secondary, #5a636b); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.8 4.2 6 8.4l4.2-4.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.8 4.2 6 8.4l4.2-4.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .sec-297 .fmm__pflicht{ font-size: var(--fs-body-sm, .875rem); color: var(--t-secondary, #5a636b); margin-bottom: var(--space-field-gap, 1rem); } .sec-297 .fmm__einwilligung{ display: flex; align-items: flex-start; gap: var(--space-inline, .5rem); margin-bottom: var(--space-field-gap, 1rem); } .sec-297 .fmm__einwilligung input{ margin-top: .3em; flex-shrink: 0; } .sec-297 .fmm__einwilligung label{ font-size: var(--fs-caption, .875rem); color: var(--t-secondary, #5a636b); } .sec-297 .fmm__einwilligung a{ color: var(--c-primary, #253746); text-decoration: underline; } .sec-297 .fmm__einwilligung a:hover{ color: var(--c-primary-dark, #1b2731); } .sec-297 .modal form .btn{ width: 100%; } @media (max-width: 1024px){ .sec-297 .modal__innen{ padding: var(--space-card-pad-lg, 2rem); } .sec-297 .modal__ph{ block-size: auto; min-block-size: 0; aspect-ratio: 16/10; } } @media (max-width: 767px){ .sec-297 .flm__knopf{ padding: var(--sp-4, 1rem) var(--sp-2, .5rem); font-size: var(--fs-body-sm, .875rem); } .sec-297 .modal{ margin: 0; inline-size: 100%; max-inline-size: 100%; block-size: 100dvh; max-block-size: 100dvh; border-radius: 0; } .sec-297 .modal__innen{ padding: var(--space-card-pad, 1rem); } .sec-297 .fmm__punkt{ inline-size: 1.25rem; block-size: 1.25rem; } } .sec-301 .hero-e{ position: relative; min-height: calc(var(--m-heroh, 72) * 1vh - var(--nav-h, 84px)); display: flex; align-items: flex-end; padding-block: var(--sp-8, 4rem) var(--sp-7, 3rem); overflow: hidden; background: var(--c-secondary-dark, #060706); } .sec-301 .hero-e__bg{ position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .sec-301 .hero-e__bg::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--c-secondary-dark, #060706) 78%, transparent) 0%, color-mix(in srgb, var(--c-secondary-dark, #060706) 18%, transparent) 62%); } .sec-301 .hero-e__innen{ position: relative; z-index: 1; } .sec-301 .hero-e__titel{ color: var(--c-white, #fff); margin-block: 0 var(--sp-4, 1rem); text-wrap: balance; } .sec-301 .hero-e__sub{ color: var(--c-inverse-on-surface-2, rgba(255,255,255,.78)); font-size: var(--fs-body-lg, 1.125rem); max-inline-size: 46rem; margin-block: 0 var(--sp-6, 2rem); } .sec-301 .hero-e .btn--ghost{ background: transparent; border-color: var(--c-white, #fff); color: var(--c-white, #fff); } .sec-301 .hero-e .btn--ghost:hover{ background: color-mix(in srgb, var(--c-white, #fff) 12%, transparent); border-color: var(--c-white, #fff); } .sec-302 .mk{ padding-block: var(--sp-8, 4rem); background: var(--c-surface, #fff); } .sec-302 .mk__kopf{ margin-block-end: var(--sp-7, 3rem); } .sec-302 .mk__vor{ color: var(--c-primary, #023a51); } .sec-302 .mk__titel{ color: var(--t-primary, #060706); margin-block: 0; text-wrap: balance; } .sec-302 .mk__karte{ display: flex; flex-direction: column; gap: var(--sp-3, .75rem); padding-block-start: var(--sp-4, 1rem); border-block-start: var(--bw-card, 2px) solid var(--c-primary, #023a51); } .sec-302 .mk__nr{ font-family: var(--font-heading, sans-serif); font-size: var(--fs-body-sm, .875rem); font-weight: 700; letter-spacing: .08em; color: var(--c-tertiary, #10688e); } .sec-302 .mk__kartentitel{ font-size: var(--fs-h5, 1.25rem); color: var(--t-primary, #060706); margin: 0; } .sec-302 .mk__text{ color: var(--t-secondary, #121411); margin: 0; } .sec-303 .mf{ padding-block: var(--sp-8, 4rem); background: var(--c-surface-subtle, #fdfdfd); } .sec-303 .mf__kopf{ margin-block-end: var(--sp-6, 2rem); } .sec-303 .mf__vor{ color: var(--c-primary, #023a51); } .sec-303 .mf__titel{ color: var(--t-primary, #060706); margin-block: 0; text-wrap: balance; } .sec-303 .mf__fortschritt{ margin-block-end: var(--sp-6, 2rem); } .sec-303 .mf__schritte{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2, .5rem); margin: 0; padding: 0; list-style: none; counter-reset: schritt; } .sec-303 .mf__schritt{ display: flex; flex-direction: column; gap: var(--sp-2, .5rem); padding-block-start: var(--sp-2, .5rem); border-block-start: 3px solid var(--c-neutral-mid, #ccc); font-size: var(--fs-body-sm, .875rem); color: var(--t-muted, #494949); } .sec-303 .mf__schritt[data-zustand="aktiv"]{ border-block-start-color: var(--c-primary, #023a51); color: var(--t-primary, #060706); font-weight: 600; } .sec-303 .mf__schritt[data-zustand="erledigt"]{ border-block-start-color: var(--c-tertiary, #10688e); } .sec-303 .mf__schrittnr{ font-family: var(--font-heading, sans-serif); font-weight: 700; font-size: var(--fs-body-sm, .875rem); letter-spacing: .06em; color: var(--c-tertiary, #10688e); } .sec-303 .mf__schritt[data-zustand="aktiv"] .mf__schrittnr{ color: var(--c-primary, #023a51); } .sec-303 .mf__karte{ background: var(--c-surface, #fff); border: var(--bw-card, 2px) solid var(--c-border, rgba(6,7,6,.12)); border-radius: var(--r-card, 8px); padding: var(--sp-6, 2rem); } @media (max-width: 767px){ .sec-303 .mf__karte{ padding: var(--sp-5, 1.5rem); } } .sec-303 .mf__stufe[hidden]{ display: none; } .sec-303 .mf__stufe{ border: 0; margin: 0; padding: 0; min-inline-size: 0; } .sec-303 .mf__legende{ display: block; padding: 0; font-family: var(--font-heading, sans-serif); font-size: var(--fs-h4, 1.5rem); font-weight: var(--fw-heading, 700); color: var(--t-primary, #060706); margin-block-end: var(--sp-2, .5rem); text-wrap: balance; } .sec-303 .mf__hilfe{ color: var(--t-secondary, #121411); margin-block: 0 var(--sp-5, 1.5rem); max-inline-size: 46rem; } .sec-303 .mf__frage{ margin-block-end: var(--sp-5, 1.5rem); } .sec-303 .mf__frage:last-of-type{ margin-block-end: 0; } .sec-303 .mf__fragetitel{ display: block; font-weight: 600; color: var(--t-primary, #060706); margin-block-end: var(--sp-3, .75rem); } .sec-303 .mf__stern{ color: var(--t-negativ, #c0392b); margin-inline-start: .15em; } .sec-303 .mf__optionen{ display: flex; flex-wrap: wrap; gap: var(--sp-3, .75rem); } .sec-303 .mf__option{ position: relative; } .sec-303 .mf__option input{ position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; } .sec-303 .mf__kachel{ display: block; padding: var(--sp-3, .75rem) var(--sp-5, 1.5rem); border: var(--bw-btn, 1px) solid var(--c-neutral-dark, #494949); border-radius: var(--r-btn, 4px); background: var(--c-white, #fff); color: var(--t-primary, #060706); font-weight: 600; cursor: pointer; transition: background var(--motion-base, 250ms) var(--ease-standard, ease), border-color var(--motion-base, 250ms) var(--ease-standard, ease), color var(--motion-base, 250ms) var(--ease-standard, ease); } .sec-303 .mf__option input:checked + .mf__kachel{ background: var(--c-primary, #023a51); border-color: var(--c-primary, #023a51); color: var(--c-on-primary, #fff); } .sec-303 .mf__option input:focus-visible + .mf__kachel{ outline: 3px solid var(--c-primary, #023a51); outline-offset: 3px; } .sec-303 .mf__option input:hover:not(:checked) + .mf__kachel{ border-color: var(--c-primary, #023a51); } .sec-303 .mf .field input, .sec-303 .mf .field select, .sec-303 .mf .field textarea{ border-color: var(--c-neutral-dark, #494949); } .sec-303 .mf .field label{ color: var(--t-primary, #060706); } .sec-303 .mf__selectbox{ position: relative; } .sec-303 .mf__selectbox select{ appearance: none; -webkit-appearance: none; padding-inline-end: calc(.9375rem + 1.25rem); } .sec-303 .mf__selectbox::after{ content: ''; position: absolute; inset-inline-end: .9375rem; inset-block-start: 50%; inline-size: .5rem; block-size: .5rem; margin-block-start: -.15rem; border-inline-end: 2px solid var(--t-primary, #060706); border-block-end: 2px solid var(--t-primary, #060706); transform: rotate(45deg); transform-origin: center; pointer-events: none; } .sec-303 .mf__ausschluss{ margin-block-start: var(--sp-3, .75rem); padding: var(--sp-4, 1rem); border: var(--bw-card, 2px) solid var(--t-negativ, #c0392b); border-radius: var(--r-card, 8px); background: color-mix(in srgb, var(--t-negativ, #c0392b) 7%, var(--c-white, #fff)); color: var(--t-primary, #060706); } .sec-303 .mf__ausschluss[hidden]{ display: none; } .sec-303 .mf__ausschluss p{ margin: 0; } .sec-303 .mf__ausschluss p + p{ margin-block-start: var(--sp-2, .5rem); } .sec-303 .mf__fehler{ display: block; margin-block-start: var(--sp-2, .5rem); font-size: var(--fs-body-sm, .875rem); font-weight: 600; color: var(--t-negativ, #c0392b); } .sec-303 .mf__fehler[hidden]{ display: none; } .sec-303 [aria-invalid="true"]{ border-color: var(--t-negativ, #c0392b) !important; } .sec-303 .mf__upload{ margin-block-end: var(--sp-5, 1.5rem); } .sec-303 .mf__ablage{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3, .75rem); padding: var(--sp-4, 1rem); border: var(--bw-btn, 1px) dashed var(--c-neutral-dark, #494949); border-radius: var(--r-card, 8px); background: var(--c-surface-subtle, #fdfdfd); } .sec-303 .mf__ablage input[type="file"]{ flex: 1 1 14rem; min-inline-size: 0; font-size: var(--fs-body-sm, .875rem); color: var(--t-secondary, #121411); } .sec-303 .mf__ablage input[type="file"]:focus-visible{ outline: 3px solid var(--c-primary, #023a51); outline-offset: 3px; } .sec-303 .mf__grenze{ font-size: var(--fs-body-sm, .875rem); color: var(--t-muted, #494949); } .sec-303 .mf__dateien{ margin: var(--sp-3, .75rem) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2, .5rem); } .sec-303 .mf__datei{ display: flex; gap: var(--sp-3, .75rem); align-items: baseline; font-size: var(--fs-body-sm, .875rem); color: var(--t-primary, #060706); } .sec-303 .mf__dateigroesse{ color: var(--t-muted, #494949); font-variant-numeric: tabular-nums; } .sec-303 .mf__einwilligung{ display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3, .75rem); align-items: start; margin-block: var(--sp-5, 1.5rem) 0; } .sec-303 .mf__einwilligung input{ inline-size: 1.25rem; block-size: 1.25rem; margin: .15rem 0 0; } .sec-303 .mf__einwilligung label{ font-size: var(--fs-caption, .875rem); color: var(--t-primary, #060706); } .sec-303 .mf__pflicht{ font-size: var(--fs-body-sm, .875rem); color: var(--t-muted, #494949); margin-block: var(--sp-4, 1rem) 0; } .sec-303 .mf__steuerung{ display: flex; flex-wrap: wrap; gap: var(--sp-3, .75rem); justify-content: space-between; align-items: center; margin-block-start: var(--sp-6, 2rem); padding-block-start: var(--sp-5, 1.5rem); border-block-start: 1px solid var(--c-border, rgba(6,7,6,.12)); } .sec-303 .mf__steuerung .btn[hidden]{ display: none; } .sec-303 .mf__zaehler{ font-size: var(--fs-body-sm, .875rem); color: var(--t-muted, #494949); font-variant-numeric: tabular-nums; } .sec-303 .btn[aria-disabled="true"]{ opacity: .5; cursor: not-allowed; } .sec-303 .mf__meldung{ margin-block-start: var(--sp-5, 1.5rem); padding: var(--sp-4, 1rem); border: var(--bw-card, 2px) solid var(--c-tertiary, #10688e); border-radius: var(--r-card, 8px); background: var(--c-tertiary-container, #e2edf1); color: var(--c-on-tertiary-container, #0b455f); } .sec-303 .mf__meldung[hidden]{ display: none; } .sec-303 .mf__meldung p{ margin: 0; } @media (max-width: 767px){ .sec-303 .mf__schritte{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3, .75rem); } .sec-303 .mf__steuerung{ flex-direction: column-reverse; align-items: stretch; } .sec-303 .mf__steuerung .btn{ inline-size: 100%; } .sec-303 .mf__zaehler{ text-align: center; } } .sec-404{ padding-block: clamp(var(--sp-8, 4rem), 12vh, var(--sp-9, 6rem)); background: var(--c-white, #fff); } .sec-404 .vier__innen{ max-inline-size: 46rem; } .sec-404 .vier__code{ display: block; font-family: var(--font-heading, inherit); font-weight: 700; font-size: clamp(3rem, 10vw, 5rem); line-height: 1; letter-spacing: -.03em; color: var(--c-primary, #023a51); margin-block-end: var(--sp-4, 1rem); } .sec-404 h1{ margin-block: 0 var(--space-stack, 1rem); } .sec-404 .vier__text{ font-size: var(--fs-body, 1rem); line-height: 1.7; color: var(--t-secondary, #5a636b); margin-block: 0 var(--sp-6, 2rem); max-inline-size: 60ch; } .sec-404 .vier__wege{ list-style: none; margin: 0 0 var(--sp-7, 3rem); padding: 0; display: grid; gap: var(--space-stack, 1rem); } .sec-404 .vier__wege a{ display: inline-flex; align-items: center; min-block-size: 24px; font-size: var(--fs-body, 1rem); color: var(--c-primary-dark, #1b2731); border-bottom: var(--bw-btn, 1px) solid currentColor; padding-bottom: var(--sp-1, .25rem); text-decoration: none; } @media (min-width: 768px){ .sec-404 .vier__wege{ grid-template-columns: 1fr 1fr; } } .sec-291 .nvg__werkzeuge{ align-self: center; } .sec-291 .kopf-suche-feld{ position: absolute; top: 100%; inset-inline-end: var(--container-px, 24px); z-index: 60; inline-size: min(20rem, calc(100vw - 2 * var(--container-px, 24px))); padding: var(--sp-4, 1rem); background: var(--c-surface, #fff); border: 1px solid var(--c-border, rgba(0,0,0,.12)); border-radius: var(--r-card, 12px); box-shadow: var(--shadow-md, 0 8px 28px rgba(0,0,0,.12)); } .sec-291 .kopf-suche-feld[hidden]{ display: none; } .sec-291 .kopf-suche-feld input{ inline-size: 100%; box-sizing: border-box; padding: var(--sp-3, .75rem) var(--sp-3, .75rem); font: inherit; font-size: var(--fs-body, 1rem); color: var(--t-primary, #0a1642); background: var(--c-surface, #fff); border: 1px solid var(--c-border, rgba(0,0,0,.12)); border-radius: var(--r-btn, 8px); } .sec-291 .kopf-suche-feld input:focus-visible{ outline: 2px solid var(--c-primary, #1e76c2); outline-offset: 1px; } .sec-291 .kopf-suche-feld ul{ list-style: none; margin: var(--sp-2, .5rem) 0 0; padding: 0; max-block-size: 16rem; overflow-y: auto; } .sec-291 .kopf-suche-feld li + li{ margin-block-start: 2px; } .sec-291 .kopf-suche-feld a{ display: block; padding: var(--sp-2, .5rem) var(--sp-3, .75rem); border-radius: var(--r-btn, 8px); color: var(--t-primary, #0a1642); text-decoration: none; font-size: var(--fs-body, 1rem); } .sec-291 .kopf-suche-feld a:hover, .sec-291 .kopf-suche-feld a.ist-aktiv{ background: var(--c-surface-subtle, #f0f0f1); color: var(--c-primary, #1e76c2); } .sec-291 .kopf-suche-feld .keine-treffer{ padding: var(--sp-2, .5rem) var(--sp-3, .75rem); color: var(--t-secondary, #4a5568); font-size: var(--fs-body, 1rem); } @media (max-width: 1199px){ .sec-291 .nvg__werkzeuge{ margin-inline-start: auto; margin-top: 0; order: 2; } .sec-291 .nvg__burger{ order: 3; margin-inline-start: var(--sp-2, .5rem); } } .sec-289 .mpk__legende, .sec-297 .fmm__legende{ list-style: none; margin: var(--sp-5, 1.5rem) 0 0; padding: 0; display: grid; gap: var(--sp-2, .5rem); font-size: var(--fs-body, 1rem); line-height: var(--lh-body, 1.6); color: var(--t-secondary, #5a636b); } .sec-289 .mpk__legende-region, .sec-297 .fmm__legende-region{ font-weight: var(--fw-semibold, 600); color: var(--t-primary, #0a1642); } .sec-289 .mpk__legende-region::after, .sec-297 .fmm__legende-region::after{ content: ":"; } .sec-180 .hero-e .hero-e__vorzeile{ color: var(--c-white, #fff); margin-block-end: var(--sp-3, .75rem); } .ftr__sozialtitel{ margin-block-start: var(--sp-5, 1.5rem); }