@charset "utf-8";
/*
====================================================================================================
Schriften
====================================================================================================
*/
/* MultipleSans W05 Light */
@font-face {
    font-family: 'MultipleSans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local(''),
    url('../fonts/eb099dfa-b36b-4a50-890c-96f94a0ba930.woff2') format('woff2');
}
/* MultipleSans W05 Light Italic */
@font-face {
    font-family: 'MultipleSans';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: local(''),
    url('../fonts/76165adc-3157-4010-9c7d-e678c854b102.woff2') format('woff2');
}
/* MultipleSans W05 Regular */
@font-face {
    font-family: 'MultipleSans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
    url('../fonts/5d9592e9-6f1c-4439-b1c3-41f86d326b4c.woff2') format('woff2');
}
/* MultipleSans W05 Regular Italic */
@font-face {
    font-family: 'MultipleSans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local(''),
    url('../fonts/4389a282-4081-4ba8-9bc6-ab3496ad75e2.woff2') format('woff2');
}
/* MultipleSans W05 SemiBold */
@font-face {
    font-family: 'MultipleSans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''),
    url('../fonts/32423773-cc03-4516-ac5d-70a6fb12cf74.woff2') format('woff2');
}
/* MultipleSans W05 SemiBold Italic */
@font-face {
    font-family: 'MultipleSans';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: local(''),
    url('../fonts/36edc447-1d33-43f1-9d1d-ee707b1a3415.woff2') format('woff2');
}
/* MultipleSans W05 Bold */
@font-face {
    font-family: 'MultipleSans';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: local(''),
    url('../fonts/34b3552b-37f3-4da6-be76-3473853d8428.woff2') format('woff2');
}
/* MultipleSans W05 Bold Italic */
@font-face {
    font-family: 'MultipleSans';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: local(''),
    url('../fonts/fcfb5e3d-7cb4-425a-b7b8-9a04bab3dcf5.woff2') format('woff2');
}

/*
====================================================================================================
Variablen
====================================================================================================
*/
/* .bg-* Container resetten die Farb-Zuordnungen,
damit sich die Farben bei Schachtelung von .bg-* Containern korrekt verhalten */
html, [class^="bg-"], [class*=" bg-"] {
    /* Farb-Zuordnung */
    --color-txt: var(--color-dark);
    --bgcolor-default: #fff;

    --color-headline: #000;
    --color-headline-lighter: var(--color-dark);

    --color-link: #000;
    --color-link-hover: var(--color-main);
    --color-social-link-hover: var(--color-link-hover);
    --color-link-cur: #000;

    --color-btn: #fff;
    --bgcolor-btn: var(--color-main);
    --color-btn-hover: var(--color-btn);
    --bgcolor-btn-hover: var(--color-main-dark);
    --color-btn-inact: var(--color-btn);
    --bgcolor-btn-inact: var(--color-mid);
    --color-btn-act: var(--color-main);
    --bgcolor-btn-act: #fff;

    --color-btn-outline: #000;
    --bgcolor-btn-outline-hover: var(--color-dark-trans);
    --bordercolor-btn-outline: currentColor;
    --color-btn-nobg: var(--color-main);
    --color-btn-nobg-hover: var(--color-main-dark);

    --color-input: #000;
    --bgcolor-input: var(--color-lightest);
    --color-label: var(--color-mid);
    --color-form-mandatory: var(--color-main);
    --color-icon: currentcolor;

    --color-limarker: #fff;
    --bgcolor-limarker: var(--color-main);

    --bordercolor-hotspot: var(--color-main);
}


html {
    /* Farben */
    --color-main: #0077c8; /* #0077c8 BIZLINK BLUE */
    --color-main-dark: hsl(204, 100%, 29%);
    --color-main-light: hsl(204, 100%, 49%);
    --color-main-lighter: hsl(204, 100%, 85%);
    --color-dark: #545859; /* BRAND GREY */
    --color-mid: #aeb1ba; /* GREY 4 */
    --color-light: #dfe0e4; /* GREY 2 */
    --color-lightest: #eeeff2; /* GREY 1 */
    --color-cyan: #94e3ed;

    --color-alert: hsl(0, 72%, 64%); /* #E55F5F */
    --color-alert-light: hsl(0, 72%, 95%);
    --color-warning: hsl(35, 100%, 59%); /* #FFA72F */;

    /* Social Farben */
    --color-social-facebook: #3b5998;
    --color-social-facebook-2: #4273c8; /* von Shariff */
    --color-social-twitter: #00acee;
    --color-social-twitter-2: #32bbf5; /* von Shariff */
    --color-social-instagram: violet;
    --color-social-instagram-2: violet;
    --color-social-youtube: #c4302b;
    --color-social-youtube-2: #c4302b;
    --color-social-xing: #126567;
    --color-social-xing-2: #126567;
    --color-social-linkedin: #0e76a8;
    --color-social-linkedin-2: #0e76a8;
    /* Social Farben zum Zuordnen zu color oder bg eines Social-Links/Buttons */
    --color-social: #000;
    --color-social-2: #000;

    /* transparente Farbversionen */
    --color-main-trans: hsla(204, 100%, 39%, 0.08);
    --color-dark-trans: rgba(84, 88, 89, 0.25);
    --color-white-trans: hsla(0, 0%, 100%, 0.5);
    --color-black-trans: hsla(0, 0%, 0%, 0.5);

    /* Farb-Zuordnung */
    --color-menu0-act: var(--color-main);
    --color-menu0-inact: var(--color-black-trans);

    /* Schriftgrößen etc. */
    --ffamily-arial: Arial, Helvetica, sans-serif;
    --ffamily-multiplesans: 'MultipleSans', Arial, Helvetica, sans-serif;
    --ffamily: var(--ffamily-multiplesans);

    --fsize: 1.6rem;
    --fsize-h1: 5rem;
    --fsize-h2: 4.5rem;
    --fsize-h3: 2.8rem;
    --fsize-h4: 2.4rem;
    --fsize-h5: 2rem;
    --fsize-h6: 1.6rem;
    --fsize-sm: 1.4rem;
    --fsize-btn: initial;
    --fsize-shariff: var(--fsize-sm);
    --fsize-menu0: var(--fsize);
    --fsize-menu0sub: var(--fsize);
    --fsize-breadcrumbs: var(--fsize-sm);
    --fsize-icon: 125%;

    --fweight-btn: bold;

    /* Größen / Abstände */
    --gap-sm: 1.25rem;
    --gap-sm-neg: calc(0px - var(--gap-sm));
    --gap-std: 2.5rem;
    --gap-std-neg: calc(0px - var(--gap-std));
    --gap-double: calc(var(--gap-std) + var(--gap-std));
    --gap-big: 7.5rem;
    --gap-xbig: 25rem;

    --vgap-txt: var(--gap-std);
    --vgap-h2: calc(var(--gap-std) * 1.5);
    --vgap-rowover: 6rem;
    --vgap-rowover-neg: calc(0px - var(--vgap-rowover));
    --vgap-rowover-neg-conditional: var(--vgap-rowover-neg);
    --hgap-windowtocontent: calc(var(--width-fullbreakout) / 2 - 50%);
    --hgap-windowtocontent-neg: calc(0px - var(--hgap-windowtocontent));
    --hgap-windowtocontentarea: calc((var(--width-fullbreakout) - var(--width-contentarea)) / 2);
    --hgap-rowindented: 11rem;
    --vgap-menu-to-logo: 1.5rem;
    --vgap-li-em: 1;
    --hgap-li-em: 1.2;
    --gap-icon: 0.2em;
    --gap-icon-l: var(--gap-icon);
    --gap-icon-r: var(--gap-icon);

    --width-fullbreakout: 100vw;
    --width-contentarea: min(134rem, 100%);
    --width-1: 8.3333%;
    --width-2: 16.6667%;
    --width-3: 25%;
    --width-4: 33.3333%;
    --width-6: 50%;
    --width-8: 66.6667%;
    --width-9: 75%;
    --width-max-column-em: 30;
    --height-icon-em: 1.2;

    --height-input: 5rem;
    --height-topslider: max(100vh, 35vw);
    --height-topslider-max: none;
    --height-topslider-min: 37rem;
    --height-map: 75vh;

    --height-content-row-toplinks: 3.4rem;
    --height-border-row-toplinks: 1px;
    --height-total-row-toplinks: calc(var(--height-content-row-toplinks) + var(--height-border-row-toplinks));
    --height-content-row-logo: 6.3rem;
    --height-border-row-logo: 1rem;
    --height-total-row-logo: calc(var(--height-content-row-logo) + var(--height-border-row-logo));
    --height-header: calc(var(--height-total-row-toplinks) + var(--height-total-row-logo));
    --height-visibleheader: var(--height-header);

    --width-slider-arrow: 5.5rem;
    --width-hotspot: clamp(4rem, 8vw, 9rem);

    /* Sonstige */
    --shadow-input: none;
    --border-input: 1px solid var(--color-light);
    --border-btn: 1px solid transparent;
    --bradius-input: 0.5rem;

    --p-a-menu0: 0.1rem 1rem;
    --p-a-menu0sub: 0.8rem var(--gap-std);

    --hovercolor-icon-teaser: var(--color-main);
    --gradient-cyan: linear-gradient(90deg, var(--color-main), var(--color-cyan) 100%);
    --gradient-txt: linear-gradient(90deg, #0041a8, var(--color-main) 100%);

    /* Mode bzgl. Responsive-Menü allgemein festlegen?
    --mode: mobile;
    --mode: desktop;
    */
}
[lang="ru"] {
    --p-a-menu0: 0.1rem 0.9rem;
}
@media (max-width: 1340px) {
    html {
        --hgap-rowindented: 0;
        --width-fullbreakout: 100%;
    }
}
@media (max-width: 1200px) {
    html {
        --fsize-h1: 3.6rem;
        --fsize-h2: 3rem;
        --fsize-h3: 2.6rem;

    }
    /* problematisch, wenn es Überlappungen zwischen #main und #footer oder #header gibt;
    ansonsten aber sinnvoll, da ohne ggf. horizontales Scrolling vorkommt
    (va. beobachtet bei seiteninternen Links) */
    #main {
        overflow: hidden;
    }
}
@media (max-width: 1000px) {
    html {
        --gap-big: var(--gap-double);
    }
}
@media (max-width: 950px) {
    html {
        --height-map: min(65vh, 110vw);
    }
}

@media (max-width: 500px) {
    html {
        --fsize-h1: 3.2rem;
        --fsize-h2: 2.8rem;
        --fsize-h3: 2.5rem;
    }
}

/* Für Link passende Social-Farbe zuordnen */
[href*="facebook."] {
    --color-social: var(--color-social-facebook);
    --color-social-2: var(--color-social-facebook-2);
}
[href*="twitter."] {
    --color-social: var(--color-social-twitter);
    --color-social-2: var(--color-social-twitter-2);
}
[href*="instagram."] {
    --color-social: var(--color-social-instagram);
    --color-social-2: var(--color-social-instagram-2);
}
[href*="youtube."] {
    --color-social: var(--color-social-youtube);
    --color-social-2: var(--color-social-youtube-2);
}
[href*="xing."] {
    --color-social: var(--color-social-xing);
    --color-social-2: var(--color-social-xing-2);
}
[href*="linkedin."] {
    --color-social: var(--color-social-linkedin);
    --color-social-2: var(--color-social-linkedin-2);
}


/*
====================================================================================================
Reset Style
====================================================================================================
- der Übersichtlichkeit halber entsprechend dem alten Meyer-Reset
*/
* {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    font-style: inherit;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-align: inherit;
    vertical-align: baseline;
    border: 0;
    background: transparent;
    scroll-behavior: smooth;
}
main {
    display: block;
}
:not(:focus-visible) {
    outline: none;
}


/*
====================================================================================================
Grundeinstellungen
====================================================================================================
1440px Viewport --> 1rem = 10px
*/
html {
    font-size: max(calc(8.1px + 0.15vw), calc(7px + 0.21vw));
    overflow-x: hidden;
    min-width: 320px;
    height: 100%;
    background: var(--bgcolor-default);
}
body {
    font: var(--fsize)/1.5 var(--ffamily);
    position: relative;
    display: flex;
    overflow-x: hidden;
    flex-direction: column;
    min-height: 100%;
    margin: 0 auto;
    text-align: left;
    color: var(--color-txt);
}
html, body {
    scroll-padding: calc(var(--height-header) + 1rem);
}

h4, .h4, p, table, dl, ul, ol, blockquote, form, legend {
    margin-bottom: var(--vgap-txt);
}
b, strong, h4, .h4, h5, h6, dt, th, caption, legend {
    font-weight: bold;
}
em, i, q, blockquote, h1, h2, .h1, .h2 {
    font-style: italic;
}
:is(h1, h2, .h1, .h2) :is(em, i), .h3, .h4 {
    font-style: normal;
}

ul {
    list-style: square outside;
}
ol {
    list-style: decimal outside;
    --hgap-li-em: 2;
}
li {
    position: relative;
    margin-bottom: calc(var(--vgap-li-em) * 1em);
    margin-left: calc(var(--hgap-li-em) * 1em);
    list-style: none;
}
li:before {
    position: absolute;
    top: 0.5em;
    left: calc(var(--hgap-li-em) * -1em);
    width: 0.5em;
    height: 0.5em;
    content: '';
    text-align: center;
    color: var(--color-limarker);
    border-radius: 50%;
    background: var(--bgcolor-limarker);
}
ol > li:before {
    line-height: 1.5;
    top: 0;
    width: 1.5em;
    height: 1.5em;
    content: counter(list-item);
}
li li {
    --bgcolor-limarker: var(--color-dark);
}

h1, .h1 {
    font-size: var(--fsize-h1);
}
h2, .h2 {
    font-size: var(--fsize-h2);
}
h3, .h3, .ce-headline > p, legend, h1 + :is(h2, .h2) {
    font-size: var(--fsize-h3);
}
h4, .h4 {
    font-size: var(--fsize-h4);
}
h5 {
    font-size: var(--fsize-h5);
}
h6 {
    font-size: var(--fsize-h6);
}

h1, h2, .h1, .h2 {
    line-height: 1.1;
}
h2, h3, .h2, .h3 {
    margin-bottom: var(--vgap-h2);
}
:is(h2, .h2) + :is(h3, .h3) {
    margin-top: calc(var(--vgap-h2) * -0.75);
}
h3, .h3, .ce-headline > p, legend, h4, .h4, h1 + :is(h2, .h2) {
    line-height: 1.2;
}

h2, .h2:not(h1) {
    font-weight: 300;
}
.h1, .h3 {
    font-weight: inherit;
}


.ce-headline > * {
    margin-bottom: 0;
}
.ce-headline > * + * {
    margin-top: var(--gap-std);
}
h1 + :is(h2, .h2, h3, .h3) {
    margin-top: -3.5rem;
}
.ce-headline > p {
    margin-bottom: -2.4rem;
}

.p {
    font-size: var(--fsize);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
    color: var(--color-headline);
}
:is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4) + :is(h2, h3, h4, h5, h6, .h2, .h3, .h4), .ce-headline > * + *, .date {
    color: var(--color-headline-lighter);
}

.txt-gradient {
    background: var(--gradient-txt);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Bilder und Medien */
object, embed, video, iframe, audio {
    display: block;
    max-width: 100%;
    margin: 0 auto var(--vgap-txt);
}
iframe {
    width: 100%;
}
video {
    background: #000;
}
img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}
figure a, figure img {
    display: block;
}
/* Spezialstile für ausgerichtete Bilder */
img.l, img.r, figure.l, figure.r, .image-left, .image-right {
    margin: 0.7rem 1.5rem;
}
p img.l, p img.r, .image-left, .image-right {
    max-width: 40%;
}

/* Links u. Text-button */
a:link, a:visited, .no-btn {
    color: var(--color-link);
}
a:hover, .no-btn:hover {
    color: var(--color-link-hover);
}

/* Seltener verwendete Elemente */
hr {
    clear: both;
    margin-bottom: var(--gap-std);
    padding-bottom: var(--gap-std);
    border-bottom: 1px dashed;
}

dt {
    float: left;
    clear: both;
    width: 19rem;
    max-width: calc(52% - 1rem);
    margin-right: 1rem;
}
dd {
    float: right;
    width: calc(100% - 20rem);
    min-width: 48%;
}

sup, sub {
    font-size: 0.8em;
    position: relative;
    bottom: 0.4em;
}
sub {
    top: 0.25em;
    bottom: auto;
}

/*
Tabellen
==================================================
- per Default "unsichtbare" Tabelle ohne Borders
*/
table {
    width: 100%;
    border-collapse: collapse;
}
td, th {
    padding: 0.3rem 1rem 0.3rem 0;
    vertical-align: top;
    border: 0;
}
table p {
    margin: 0;
}
table p:not(:last-child) {
    margin-bottom: 0.75rem;
}

/* Für Tabellen mit Linien unter jeder Zeile */
.daten tr * + td {
    vertical-align: bottom;
}
.daten td, .daten th {
    border-bottom: 1px solid;
}

.odd-even :is(th,td) {
    padding: 0.3rem 0.5rem;
}
.odd-even tr:nth-child(odd) {
    background: rgba(0,0,0,0.1);
}
/* Wrap, um breitere tables auf kleinen Screens horizontal zu scrollen */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
/* ckEditor setzt neuerdings standardmäßig figure um table und figcaption statt caption */
.table {
    display: flex;
    flex-direction: column;
}
.table > figcaption {
    order: -1;
}

/*
Formulare
==================================================
*/
form {
    clear: both;
}
fieldset {
    float: left;
    width: 100%;
}
fieldset:not(:last-of-type) {
    margin-bottom: var(--vgap-txt);
}

input, select, textarea {
    display: block;
    width: 100%;
    height: var(--height-input);
    padding: 0.2em 0.5em;
    color: var(--color-input);
    border: var(--border-input);
    border-radius: var(--bradius-input);
    background-color: var(--bgcolor-input);
    box-shadow: var(--shadow-input);
}
input {
    line-height: 1;
}
textarea {
    height: 10em;
    resize: vertical;
}
/* radio und checkbox */
input[type="checkbox"], input[type="radio"] {
    float: left;
    width: auto;
    height: auto;
    margin: 0.3em 0.5em 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
input[type="radio"] {
    border-radius: 50%;
}

label {
    font-size: var(--fsize-sm);
    display: block;
    margin: 0 0 0.5rem;
    color: var(--color-label);
}
label[for] {
    cursor: pointer;
}
:is([type="checkbox"], [type="radio"]) + label {
    --color-label: var(--color-txt);
}

/* Placeholder-Text heller */
::placeholder {
    opacity: 0.6;
}

/* Fix: Safari-Style entfernen (benötigt gesetzten border-radius); -webkit- scheint noch nötig für iOs */
input[type=submit], input[type=search] {
    -webkit-appearance: none;
    appearance: none;
}

.mandatory {
    color: var(--color-form-mandatory);
}
.powermail_form .ce-textmedia > .col {
    padding: 0;
}

/*
Formulare: Spezialregeln
==================================================
*/
form div {
    position: relative;
}
form > div, fieldset > div {
    float: left;
    clear: both;
    width: 100%;
}
form > div:not(:last-child), fieldset > div:not(:last-child) {
    margin-bottom: 2rem;
}
form p {
    float: left;
    width: 100%;
    margin-top: 0.5em;
}
form h2 + p, form h2 + div p, form p + div p {
    margin-top: 0;
}

.nolabel > h2, .nolabel > div > h2, .nolabel > h3, .nolabel > div > h3, .nolabel > legend, .nolabel > div > legend, .nolabel > label {
    display: none;
}

input + img {
    margin-top: 1rem;
}
/* Typo3: Powermail-Validierung */
.parsley-required {
    margin: 0;
}
.powermail_field_error {
    --border-input: 1px solid var(--color-alert);
    --bgcolor-input: var(--color-alert-light);
    --color-label: var(--color-alert);
}
.powermail_message_error {
    --color-txt: var(--color-alert);
    --bgcolor-limarker: var(--color-alert);
}

.powermail_fieldwrap_type_html {
    font-size: var(--fsize-sm);
}
.tx-powermail form > div:first-child {
    margin: 0;
}
/* Da wir keinen Empfänger einstellen, gibt es immer eine Fehlermeldung */
.tx-powermail .typo3-messages .alert-danger {
    display: none;
}

/* Einfache Newsletter-Formulare etc. */
.one-line.one-line {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    padding-inline: calc(var(--gap-std) - 2px) !important;
}
.one-line.p-h-sm:not(fieldset) {
    padding-inline: calc(var(--gap-sm) - 2px) !important;
}
.powermail_fieldwrap .one-line {
    align-items: center;
    padding-inline: 0 !important;
}
form .one-line > legend {
    display: none;
}
.one-line > div {
    flex: 1 1 0;
    width: auto;
    padding-inline: 2px !important;
}
.one-line > input {
    flex: 1 1 0;
    width: auto;
    margin-right: 2px;
    min-width: 2em;
}
form .one-line > .powermail_fieldwrap_type_submit, .one-line > .wrap-sm {
    flex: 0 0 auto;
    margin-bottom: 2rem;
}
.powermail_fieldwrap .one-line > div {
    margin-bottom: 0;
}
form .one-line [type=submit] {
    margin: 0;
}
form .one-line + fieldset {
    margin-top: calc(var(--gap-std-neg) - var(--gap-sm));
    margin-bottom: var(--gap-sm);
}
form .one-line + fieldset > div {
    margin-bottom: var(--gap-sm);
}
@media (max-width: 400px) {
    .powermail_fieldwrap_type_captcha .one-line {
        flex-wrap: wrap;
    }
    .powermail_fieldwrap_type_captcha .one-line :is(img, input) {
        margin: 0 !important;
        width: 100%;
    }
}
@media (max-width: 1300px) and (min-width: 951px) {
    .col-4 .powermail_fieldwrap_type_captcha .one-line {
        flex-wrap: wrap;
    }
    .col-4  .powermail_fieldwrap_type_captcha .one-line :is(img, input) {
        margin: 0 !important;
        width: 100%;
    }
}
@media (min-width: 951px), (max-width: 750px) and (min-width: 551px) {
    .col-3 .powermail_fieldwrap_type_captcha .one-line {
        flex-wrap: wrap;
    }
    .col-3 .powermail_fieldwrap_type_captcha .one-line :is(img, input) {
        margin: 0 !important;
        width: 100%;
    }
}

/* mandatory-Text näher an privacy-Text heranbringen */
@media (min-width: 951px) {
    .powermail_fieldwrap_type_html + .powermail_fieldwrap_type_captcha.col-6 + .powermail_fieldwrap_type_html {
        margin-top: -4rem;
        pointer-events: none;
    }
}

.box-nl form {
    margin-bottom: 0;
}

.box-nl h2 {
    font-size: var(--fsize);
    margin-bottom: var(--gap-sm);
    text-transform: uppercase;
}

@media (max-width: 950px) {
    .box-nl.box-nl {
        width: calc(100% - var(--gap-std) * 2);
        margin: 0 var(--gap-std);
    }
}

/* Spezial-Stile für NL-Box neben Teaser auf Startseiten */
@media (min-width: 951px) {
    :is([style*=background-image], .has-deco-topwave) > *:not(:first-child) > .box-nl:only-child {
        width: calc(100% - var(--gap-std) - var(--gap-sm));
        min-height: calc(100% - var(--gap-std));
        margin-right: var(--gap-std);
        margin-left: var(--gap-sm);
    }
    :is([style*=background-image], .has-deco-topwave) > *:not(:last-child) > .ce-menu-teaser:only-child {
        min-height: 100%;
        padding-right: 0 !important;
    }
}


/* Spezialstyling für del als Spamschutz:
im Typo3 geben wir E-Mail-Adressen aus Spamschutz-Gründen so aus:
name<del>@</del>domain.de */
del.schutz {
    text-decoration: none;
}


/*
====================================================================================================
Hauptbereiche
====================================================================================================
*/
#header {
    font-weight: bold;
    z-index: 100;
    height: var(--height-header);
}
#main {
    position: relative;
    padding-bottom: var(--vgap-rowover);
}
#footer {
    font-size: var(--fsize);
    clear: both;
    --fsize: var(--fsize-sm);
}


/*
====================================================================================================
Responsive Gridsystem
====================================================================================================
- basiert lose auf Bootstrap
- .row für subere Trennung von Zeilen, .col(-*) für Spalten
- 12er-Grid: .col-4 ist (auf Desktop) 4 von 12 Spalten breit = 33%
- .row-12 legt die "Standard-Inhaltsspalte" fest
*/
.col, [class^="col-"], [class*=" col-"], .box {
    position: relative;
    float: left;
    clear: none;
    width: 100%;
    min-height: 1px;
    margin-inline: 0;
    padding: 0 var(--gap-std);
    list-style: none;
}
.col-1 {
    width: 50%;
}
/* Etwas größere Handys */
@media (min-width: 351px) {
    .col-1 {
        width: var(--width-3);
    }
    .col-2 {
        width: var(--width-6);
    }
}
/* Tablets */
@media (min-width: 551px) and (max-width: 950px) {
    .col-1 {
        width: var(--width-2);
    }
    .col-2 {
        width: var(--width-4);
    }
    .col-3, .col-4 {
        width: var(--width-6);
    }
    .col-3:first-child:nth-last-child(2), :first-child + .col-3:last-child,
    .col-4:first-child:nth-last-child(2):not(.std-sizing), :first-child + .col-4:last-child:not(.std-sizing),
    .col-4:last-child:not(.std-sizing):nth-child(3) {
        width: 100%;
    }
    .col-6 .col-2, .col-4 .col-2, .col-3 .col-2 {
        width: var(--width-2);
    }
    .col-6 .col-3, .col-4 .col-3, .col-3 .col-3 {
        width: var(--width-3);
    }
    .col-6 .col-4, .col-4 .col-4, .col-3 .col-4 {
        width: var(--width-4);
    }
    .col-9 .col-6, .col-8 .col-6, .col-6 .col-6, .col-4 .col-6, .col-3 .col-6 {
        width: var(--width-6);
    }
}
/* Endgröße (Desktops) */
@media (min-width: 951px) {
    .col-1 {
        width: var(--width-1);
    }
    .col-2 {
        width: var(--width-2);
    }
    .col-3 {
        width: var(--width-3);
    }
    .col-4 {
        width: var(--width-4);
    }
    .col-6 {
        width: var(--width-6);
    }
    .col-8 {
        width: var(--width-8);
    }
    .col-9 {
        width: var(--width-9);
    }
}

.row {
    display: block;
    clear: both;
    width: 100%;
    margin: 0 auto;
}
.row-12 {
    width: var(--width-contentarea);
}
.row-indented {
    padding-inline: var(--hgap-rowindented);
}
.row-indented.row-over {
    padding-inline: calc(var(--hgap-rowindented) + var(--hgap-windowtocontent));
}
/* Clearfix */
.row:not(.flex-grid):after, form:after, dl:after {
    line-height: 0;
    display: table;
    clear: both;
    content: '';
}

/*
Vollbreite Zeilen
==================================================
- zum Ausbrechen aus der Standard-Inhaltsspalte
- .row-over gibt der ganze Zeile einen Hintergrund, Inhalt bleibt bündig mit der Standard-Inhaltsspalte
- .row-fullscreen
*/
.row-over {
    width: var(--width-fullbreakout);
    margin: var(--vgap-rowover) var(--hgap-windowtocontent-neg);
    padding: var(--vgap-rowover) var(--hgap-windowtocontent);
    background: no-repeat 50% top;
    background-size: cover;
}
.row-fullscreen {
    width: var(--width-fullbreakout);
    margin-inline: var(--hgap-windowtocontent-neg);
}
.row[style*=background-image]:not(.row-over) {
    background: no-repeat 50%;
    background-size: contain;
}
.ce-headline, *:not(.ce-headline) > h1, .h1 {
    margin: 0;
    padding-top: var(--gap-std);
    padding-bottom: var(--vgap-rowover);
}

/*
Spezialinteraktionen: Abstände mit .row-over etc.
==================================================
*/
.row-over + .ce-headline, .ce-headline + .ce-headline, .ce-headline + div > .ce-headline:first-child,
.row-over > *:first-child {
    padding-top: 0;
}
.ce-headline + .row-over, #main > .row-over:first-child {
    margin-top: 0;
}
.row-over + .row-over, .row-over + .row > * > .row-over:first-child {
    margin-top: var(--vgap-rowover-neg);
}
#main > .row-over:last-child {
    margin-bottom: var(--vgap-rowover-neg);
}

/*
Dekoration: Wave
==================================================
*/

.has-deco-topwave {
    --height-wave: 7vw;
    --bgcolor-prev: #fff;
    position: relative;
    border-top: var(--height-wave) solid transparent;
}
.bg-maincolor + .has-deco-topwave {
    --bgcolor-prev: var(--color-main);
}
.bg-dark + .has-deco-topwave {
    --bgcolor-prev: var(--color-dark);
}
.bg-light + .has-deco-topwave {
    --bgcolor-prev: var(--color-light);
}
.bg-lightest + .has-deco-topwave {
    --bgcolor-prev: var(--color-lightest);
}
@media (max-width: 990px) {
    .has-deco-topwave {
        --height-wave: 10vw;
    }
}

.has-deco-topwave::before {
    content:'';
    background: var(--bgcolor-prev);
    height: var(--height-wave);
    width: 100%;
    position: absolute;
    left: 0;
    bottom: calc(100% + 1px);
    clip-path: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CclipPath id='clip' clipPathUnits='objectBoundingBox'%3E%3Cpath d='M0.001,0.035 V0.062 L0.015,0.095 C0.056,0.184,0.096,0.257,0.141,0.321 C0.218,0.434,0.29,0.498,0.369,0.526 C0.398,0.536,0.49,0.531,0.514,0.518 C0.562,0.49,0.609,0.447,0.639,0.406 C0.642,0.401,0.645,0.398,0.646,0.398 H0.648 V0.705 C0.648,0.993,0.648,1,0.649,1 C0.749,0.682,0.875,0.398,0.981,0.259 C0.989,0.247,0.997,0.236,0.998,0.234 L1,0.23 V0.119 V0.008 H0.501 H0.001 V0.035'/%3E%3C/clipPath%3E%3C/svg%3E#clip");
}

/*
Box: Grundklasse für Teaser etc.
==================================================
- entspricht quasi .card
*/
.box {
    margin-bottom: var(--gap-std);
}
.box-link a, a.box-link {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--color-txt);
}
.box-link a, .box > .inner {
    min-height: 100%;
}

/*
Flex-Unterstützung
==================================================
*/
.flex-grid {
    display: flex;
    flex-flow: row wrap;
}
.flex-grid > * {
    flex: 0 1 auto;
}
.flex-col.flex-col {
    display: flex;
    flex-direction: column;
}
.flex-grow {
    flex-grow: 1;
}
.flex-static {
    flex: 0 0 auto;
    width: auto;
}

/*
Hintergründe
==================================================
- oft mit .row-over
- setzen
*/
[class^="bg-"], [class*=" bg-"] {
    color: var(--color-txt);
}
.bg-dark, .bg-maincolor {
    --color-txt: #fff;
    --color-headline: #fff;
    --color-headline-lighter: #fff;
    --color-link: #fff;
    --color-link-hover: var(--color-light);
    --color-link-cur: --color-link;
}
.bg-maincolor {
    background-color: var(--color-main);
    --color-btn: var(--color-main);
    --bgcolor-btn: #fff;
    --bgcolor-btn-hover: var(--color-light);
    --color-limarker: var(--color-main);
    --bgcolor-limarker: #fff;
    --color-form-mandatory: var(--color-txt);
}
.bg-dark {
    background-color: var(--color-dark);
}
.bg-light {
    background-color: var(--color-light);
}
.bg-lightest {
    background-color: var(--color-lightest);
    --bgcolor-input: #fff;
    --color-label: var(--color-txt);
}
.bg-default {
    background-color: var(--bgcolor-default);
}
#footer .bg-dark {
    background-color: #000;
}

*:not(.bg-default):is([class^="bg-"], [class*=" bg-"]) {
    --bgcolor-default-distinct: var(--bgcolor-default);
}
html, .bg-default:not(.bg-distinct) {
    --bgcolor-default-distinct: var(--color-lightest);
}
.bg-default.bg-distinct {
    background-color: var(--bgcolor-default-distinct);
}

/*
Farben direkt zuordnen
==================================================
*/
.color-main {
    color: var(--color-main);
}
.color-txt {
    color: var(--color-txt);
}
.color-mid {
    color: var(--color-mid);
}
.color-headline-lighter {
    color: var(--color-headline-lighter);
}


/*
====================================================================================================
SVG-Icons
====================================================================================================
SVG-Code wird direkt ins HTML geschrieben. Siehe templates/private/_ts_setup/00_svg_icons.typoscript
*/
.svg-icon {
    display: inline-block;
    width: var(--h);
    height: var(--h);
    vertical-align: text-bottom;
    --h: calc(var(--height-icon-em) * 1em);
}
/* Für Icon-Liste */
#c155 .svg-icon {
    font-size: 6rem;
    background: #eee;
}
#c155 ~ #c155 .svg-icon {
    width: auto;
}

/*
====================================================================================================
Buttons
====================================================================================================
Allgemeine Klassen für Links, submits und spans, die wie Buttons aussehen sollen.
Einfach .btns an einen wrap vergeben, der mehrere Links enthält (z.B. pagebrowser),
oder .btn auf einen einzelnen Link, submit oder anderes Element.

.inact: Button ist inaktiv und kann nicht gedrückt werden (z.B. "Seite zurück" auf erster Seite im pagebrowser); alternativ einfach <span> statt <a>
.cur: Button ist momentan gedrückt (z.B. aktuelle Seite im pagebrowser)
*/
button {
    cursor: pointer;
    transition: 0.2s ease-out;
}
.btns {
    clear: both;
    overflow: hidden;
}
.btns li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}
.btn, .btns a, a.btn, .btns span, input[type="submit"], a .btn {
    font-size: var(--fsize-btn);
    font-weight: var(--fweight-btn);
    line-height: 1;
    display: inline-flex;
    float: left;
    align-items: center;
    justify-content: center;
    min-width: var(--height-input);
    min-height: var(--height-input);
    margin: 0 0.5em 1.5rem 0;
    padding: 0.5em 1.2em;
    cursor: pointer;
    transition: 0.2s ease-out;
    text-align: left;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-btn);
    border: var(--border-btn);
    border-radius: var(--bradius-input);
    background: var(--bgcolor-btn);
    gap: 0.75rem;
    --gap-icon-l: 0;
    --gap-icon-r: 0;
}

/* :hover, .inact, .cur */
.btns a:hover, .btn:hover, input[type="submit"]:hover, a:hover .btn {
    color: var(--color-btn-hover);
    background-color: var(--bgcolor-btn-hover);
}
.btns a.inact, .btns .inact a, .btns span {
    pointer-events: none;
    color: var(--color-btn-inact);
    background-color: var(--bgcolor-btn-inact);
}
.btns a.cur, .btns span.cur, .btns .cur a, .btns .cur span, .btns a.current {
    pointer-events: none;
    color: var(--color-btn-act);
    background-color: var(--bgcolor-btn-act);
}

/* Outline-Buttons */
html .btn-outline {
    border-color: var(--bordercolor-btn-outline);
    --bgcolor-btn: transparent;
    --color-btn: var(--color-btn-outline);
    --color-btn-hover: var(--color-btn) !important;
    --bgcolor-btn-hover: var(--bgcolor-btn-outline-hover) !important;
}
/* Buttons ohne Hintergrund oder Outline */
html .btn-nobg {
    min-width: 0;
    padding-inline: 0;
    /*min-height: 0;*/
    --color-btn: var(--color-btn-nobg);
    --color-btn-hover: var(--color-btn-nobg-hover) !important;
    --bgcolor-btn: transparent;
    --bgcolor-btn-hover: transparent !important;
}
html .btn-round {
    padding-inline: 1rem;
    border-radius: 2em;
}
html .btn-shadow {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* andersfarbige Buttons */
.btns-dark a, html .btn-dark {
    --color-btn: #fff;
    --bgcolor-btn: var(--color-dark);
    --color-btn-hover: #fff;
    --bgcolor-btn-hover: #000;
}
html .btn-white {
    box-shadow: 0 0.9rem 2rem #0000001f;
    --color-btn: var(--color-dark);
    --bgcolor-btn: #fff;
    --color-btn-hover: var(--color-btn);
    --bgcolor-btn-hover: var(--color-light);
}

/* Button-Spezialfälle */
p .btn {
    float: none;
}
p .btn:last-child {
    margin-right: 0;
}
td > .btn:only-child {
    margin: 0;
}
.btn.r {
    margin-right: 0;
    margin-left: 1rem;
}
input.btn, input[type="submit"] {
    clear: both;
    width: auto;
    box-shadow: none;
}


/*
Pagebrowser
==================================================
*/
.pagebrowser ul {
    margin: 0;
}
.pagebrowser li > span, .pagebrowser li > a {
    margin: 0 1px;
    padding-inline: 0.3em;
}
.pagebrowser li:first-child > * {
    margin-left: 0;
}
.pagebrowser li:last-child > * {
    margin-right: 0;
}
.pagebrowser .prev {
    margin-right: 1rem;
}
.pagebrowser .next {
    margin-left: 1rem;
}
.pagebrowser li:before {
    content: none;
}

/*
Shariff-artige Teilen-Buttons
==================================================
*/
a.lookalike-shariff {
    font-size: var(--fsize-shariff);
    justify-content: left;
    width: 11.4em;
    min-width: 6.4em;
    max-width: 30%;
    min-height: 2.5em;
    padding: 0 0.7em 0 0;
    text-align: left;
    gap: 0;
    --color-btn: #fff;
    --bgcolor-btn: var(--color-social);
    --bgcolor-btn-hover: var(--color-social-2);
}
.lookalike-shariff > span:first-child {
    float: left;
}
.lookalike-shariff > span:first-child:before {
    font-size: 1.57em;
    line-height: 1.6em;
    width: 1.6em;
    height: 1.6em;
    margin: 0;
}
.lookalike-shariff > .share_text {
    line-height: 2.5em;
    padding-left: 0.22em;
}

@media screen and (max-width: 500px) {
    .lookalike-shariff > .share_text {
        display: none;
    }
    .btn.lookalike-shariff {
        width: 2.5em;
        min-width: 2.5em;
    }
}

/*
Overlay für Text auf Bild
==================================================
*/
.overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--gap-sm) var(--gap-std);
    background: rgba(255, 255, 255, 0.85);
}

/*
====================================================================================================
Menüs allgemein
====================================================================================================
li.act = ist in Rootline (= aktueller Bereich)
li.cur = ist genau aktuelle Seite
*/
.menu, .menu ul, .menu-layer {
    display: flex;
    float: left;
    flex-wrap: wrap;
    margin: 0;
}
.menu li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    page-break-inside: avoid;
}
.menu li:before {
    content: none;
}
.menu a {
    text-decoration: none;
}
.cur > a {
    cursor: default;
}

/*
Hover-Menü (ähnlich Select)
==================================================
*/
.menu.hover-container {
    position: relative;
    z-index: 9;
    height: var(--h);
}
.menu.hover-container .wrap-menu {
    position: relative;
    overflow: hidden;
    max-height: 100%;
    transition: 0.3s;
    border-radius: var(--bradius-input);
}
.menu.hover-container:hover .wrap-menu, .menu.hover-container:focus-within .wrap-menu {
    max-height: calc(var(--entries) * var(--h));
    background-color: var(--color-light);
}
.menu.hover-container li {
    padding: 0.3rem;
}
.menu.hover-container .act {
    order: -1;
}


/*
Sprach-Menü
==================================================
*/
.menu-lang {
    margin-right: -0.3rem;
    margin-left: var(--gap-std);
    --h: 3rem;
    --entries: 8;
}
.menu.menu-lang .wrap-menu {
    border-radius: 5em;
}
.menu-lang svg {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: #fff;
}
.menu-lang a:hover svg {
    border: 1px solid #000;
}

/*
Sites-Menü
==================================================
*/
.menu.menu-sites {
    margin-top: var(--vgap-menu-to-logo);
    margin-right: auto;
    margin-left: 1rem;
    z-index: 9999;
    --h: 3rem;
    --entries: 8;
}
.menu.menu-sites li {
    padding-inline: 1rem;
}
html:lang(ru) .menu-sites {
    font-size: 0.9em;
    transform: translateY(0.1em);
}
/* Elocab-Logo */
.menu-sites svg {
    width: auto;
    --h: 1.1em;
    top: -0.26em;
    position: relative;
}

@media (max-width: 550px) {
    .logo {
        margin-right: auto;
        margin-bottom: 2rem;
    }
    .menu.menu.menu-sites {
        position: absolute;
        bottom: -0.5rem;
        left: 0.5rem;
    }
}

/* Alphabetische Reihenfolge durchsetzen - elocab ist ganz oben, .act aber noch darüber */
.menu-sites li:has(a[href*="//factory"]) {
    order: 1;
}
.menu-sites li:has(a[href*="//health"]) {
    order: 2;
}
.menu-sites li:has(a[href*="//marine"]) {
    order: 3;
}
.menu-sites li:has(a[href*="//mobility"]) {
    order: 4;
}
.menu-sites li:has(a[href*="//semiconductor"]) {
    order: 5;
}
.menu-sites li:has(a[href*="//silicone"]) {
    order: 6;
}
.menu-sites li:has(a[href*="//telecom"]) {
    order: 7;
}

/*
Breadcrumbs
==================================================
*/
.menu-breadcrumbs {
    font-size: var(--fsize-breadcrumbs);
    --color-link: var(--color-txt);
}
.menu-breadcrumbs svg {
    max-height: 0.6em;
    margin: auto 0.4rem;
}
.menu-breadcrumbs .cur {
    font-weight: bold;
    color: var(--color-link-cur);
}

/*
OnPage-Menü
==================================================
*/
.menu-onpage {
    height: 2.5rem;
    margin-bottom: var(--gap-double);
}
.menu-onpage .menu {
    z-index: 99;
    overflow: hidden;
    transition: 0.3s;
    transform: translateY(-50%);
    white-space: nowrap;
    border: 1px solid;
    border-radius: var(--bradius-input);
    background: #fff;
}
.jumbotron-slider + .menu-onpage .menu {
    transform: translateY(-50%);
}
.menu-onpage ul {
    overflow: auto;
    flex-wrap: nowrap;
}
.menu-onpage.off-stage.at-top .menu {
    position: fixed;
    top: calc(var(--height-header) - 6px);
    max-width: calc(var(--width-contentarea) - var(--gap-double));
    transform: translateY(0);
}
.row-over + .menu-onpage {
    top: var(--vgap-rowover-neg);
}
.ce-headline + .menu-onpage {
    margin-top: var(--gap-std);
}
.jumbotron-slider .menu-onpage,
:is(.jumbotron-slider, .jumbotron) ~ :is(.jumbotron-slider, .jumbotron) + .menu-onpage {
    display:none !important;
}


/*
Hauptmenü -- Allgemein (Standard)
==================================================
*/
.menu-0 {
    font-size: var(--fsize-menu0);
    --fsize-btn: 1em;
}
.menu-0 a, .menu-0 li > span {
    overflow: hidden;
    flex: 1 1 50%;
    width: 100%;
    padding: var(--p-a-menu0);
    text-overflow: ellipsis;
}
.menu-0 > li:hover > a, .menu-0 > li.act > a {
    color: var(--color-menu0-act);
}
.menu-0 li li a, .menu-0 li li span {
    font-weight: 300;
    padding: var(--p-a-menu0sub);
    --color-link-hover: var(--color-link);
}
.menu-0 li li a:not(.cur):hover {
    text-decoration: underline;
}
.menu-0 li li.cur > a {
    font-weight: bold;
}

.menu-0 li ul, .menu-0 .menu-layer {
    font-size: var(--fsize-menu0sub);
    display: block;
    overflow: hidden;
    order: 9;
    width: 100%;
}
.menu-0 .menu-layer > ul {
    order: initial;
}

.menu-0 li > span {
    color: var(--color-menu0-inact);
}
.menu-0 > li > span {
    color: var(--color-link);
}



/*
Hauptmenü -- Modus bestimmen
==================================================
das Menu-js-Script prüft, ob --mode = desktop oder = mobile ist. (ohne Anführungszeichen!)
Falls ja, richtet es sich danach und prüft nicht mehr, ob das Desktop-Menü passen würde.

html-Klassen setzen:
- "mode-desktop mode-mobile": in beiden festen Bereichen wird das jeweilige Menü direkt richtig angezeigt, im Neutralbereich initial kein Menü
- "mode-desktop": im Mobilbereich wird initial kein Menü angezeigt, ansonsten initial Desktop (kann im Neutralbereich aber noch wechseln)
- "mode-mobile": im Desktopbereich wird initial kein Menü angezeigt, ansonsten initial Mobil (kann im Neutralbereich aber noch wechseln)
- weder noch: initial wird gar kein Menü angezeigt (daher nicht zu empfehlen)

Konfigurations-Beispiele:
1) Ausgewogener Modus:
--> "mode-desktop mode-mobile"; Fest-Bereiche so legen, dass sie sicher passen. Vorsicht vor allem bei der Desktop-Festbreite.
2) Modus per CSS fest vorgeben (kein Neutralbereich):
--> "mode-desktop mode-mobile"; Festbreiten nur 1px auseinanderlegen, sowie Mindest- bzw. Höchstbreite auf den jew. Fest-Wert setzen.
3) Alter Modus (initial immer Desktop, per JS ggf. Wechsel zu Mobil)
--> "mode-desktop"; --mode gar nicht setzen; Festbreiten etc. so niedrig/hoch setzen, dass sie alle immer gelten.
4) Rein Mobil (immer Mobil, kein Wechsel zu Desktop)
--> "mode-mobile"; --mode: mobile; Mobil-Festbreite so hoch setzen, dass sie immer gilt.

Initial kein Menü anzeigen?
Bei den Modi 1 u. 3 die Bereiche wo initial nichts angezeigt wird zu eliminieren ist mit CSS möglich, aber zu aufwändig.
Zur Not ginge es aber mit JS, indem in der head.js basierend auf --mode und Screenbreite eine Klasse gesetzt wird (Minimaler Performance-Nachteil).
Initial nichts zu zeigen ist aber besser als ein Wechsel, daher sollte es reichen, bei ausgewogenem Modus den Neutralbereich möglichst eng zu setzen.
*/
html {
    --display-mobile: none;
    --display-desktop: none;
    --display-desktop-flex: var(--display-desktop);
}

.menu-0,
.responsive-menu-btn,
.menu-0 li > .btn,
.show-if-mode-mobile,
.mainmenu-open .show-if-mode-mobile-menu-open {
    display: var(--display-mobile);
}
.show-if-mode-desktop {
    display: var(--display-desktop);
}
.mode-desktop .menu-0 {
    display: var(--display-desktop-flex);
}

/*
Hauptmenü -- Desktop (Standard)
==================================================
*/
@media (min-width: 1600px) /* [Menu: Desktop-Fest] */ {
    html {
        --mode: desktop;
    }
    .mode-desktop {
        --display-desktop: block;
        --display-desktop-flex: flex;
    }
}

@media (min-width: 600px) /* [Menu: Desktop-Mindestbreite] */ {
    .mode-desktop:not(.mode-mobile) {
        --display-desktop: block;
        --display-desktop-flex: flex;
    }
    .mode-desktop .menu-0 {
        margin-top: var(--vgap-menu-to-logo);
    }
    .mode-desktop .menu-0 .level-1 {
        font-weight: normal;
        position: fixed;
        z-index: 1000;
        top: var(--height-visibleheader);
        left: 0;
        display: flex;
        overflow: auto;
        width: 100%;
        max-height: calc(100% - var(--height-visibleheader));
        padding: var(--gap-double) var(--hgap-windowtocontentarea);
        transition: 0.3s;
        transform-origin: 0 0;
        background: #fff;
        border-bottom: 1px solid var(--color-txt);
    }
    .mode-desktop .menu-0 .level-1 > ul {
        flex: 1 1 50%;
    }
    .mode-desktop .menu-0 li:first-child .level-1 > ul {
        display: flex;
    }
    .mode-desktop .menu-0 > .has-submenu:hover:after {
        position: absolute;
        top: 100%;
        right: -3rem;
        left: -3rem;
        height: 4rem;
        content: '';
    }
    .mode-desktop .menu-0 > li:not(:hover):not(:focus-within) > .menu-layer {
        transform: scaleY(0.95);
        pointer-events: none;
        opacity: 0;
    }
    .mode-desktop .menu-0 li:first-child .level-1 > ul > li {
        flex: 1 0 20rem;
        flex-direction: column;
    }
    .mode-desktop .menu-0 li:first-child .level-1 > ul > li + li {
        border-left: 1px solid var(--color-link);
    }
    .mode-desktop .menu-0 .level-1 > ul > li > a, .mode-desktop .menu-0 .level-1 > ul > li > span {
        flex: none;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .mode-desktop .menu-0 li + li .level-1 > ul {
        column-width: 28rem;
        column-rule: 1px solid #fff;
        column-gap: 0;
    }
    .mode-desktop .menu-0 li + li .level-1 > ul:last-child {
        column-count: 4;
    }
    .mode-desktop .menu-0 li + li .level-1 > ul > li {
        margin-bottom: var(--gap-sm);
    }
    .mode-desktop .menu-0 li + li li ul {
        padding-left: var(--gap-std);
    }

}


/*
Hauptmenü -- Mobile (Standard)
==================================================
*/
@media (max-width: 599px) /* [Menu: Mobil-Fest] */ {
    html {
        --mode: mobile;
    }
    .mode-mobile {
        --display-mobile: block;
    }
}

@media (max-width: 1599px) /* [Menu: Mobile-Höchstbreite] */ {
    .mode-mobile {
        --color-menu0-inact: var(--color-dark);
    }
    .mode-mobile:not(.mode-desktop) {
        --display-mobile: block;
    }

    .mode-mobile .menu-0 {
        position: fixed;
        top: var(--height-visibleheader);
        left: 0;
        overflow: hidden;
        background: #fff;
        --p-a-menu0: 1rem 1rem;
        --p-a-menu0sub: var(--p-a-menu0);
    }
    .mode-mobile .menu-0, .mode-mobile .menu-0 ul, .mode-mobile .menu-0 .menu-layer {
        flex-flow: column nowrap;
        width: 100%;
        max-height: 0;
        transition: 0.4s;
    }
    .mode-mobile .menu-layer > ul {
        max-height: none;
    }
    .mode-mobile .menu-0 li {
        border-top: 1px solid #fff;
        background: rgba(0, 0, 0, 0.06);
    }
    .mode-mobile .menu-0 li li {
        margin: 0 1.5rem;
    }
    .mode-mobile .menu-0 > li:last-child {
        padding-bottom: 0.5rem;
    }
    .mode-mobile .menu-0 li.is-open {
        padding-bottom: 1rem;
    }
    .mode-mobile .menu-0 a:hover {
        background: rgba(0, 0, 0, 0.06);
    }
    .mode-mobile li.is-open > ul, .mode-mobile li.is-open > .menu-layer, .mode-mobile .menu-0.is-open {
        overflow-y: auto;
        max-height: calc(100% - var(--height-visibleheader));
    }
    .mode-mobile .responsive-menu-btn, .mode-mobile .menu-0 {
        order: 9;
    }
}

/*
Burger-Button / Submenü-Buttons
==================================================
*/
.responsive-menu-btn {
    width: 3.5rem;
    min-width: 0;
    margin: 1rem 0 0 2rem;
    transition: 0.5s;
    color: var(--color-main);
    --width-menubtn-last-bar: 50%;
}

.menu-0 li > .btn {
    min-height: 0;
    margin: 0;
    padding: 0 1.5rem;
}
.menu-0 .btn svg {
    transition: 0.2s;
}
.menu-0 .is-open > .btn svg {
    transform: rotate(180deg);
}

.responsive-menu-btn:hover {
    color: var(--color-txt);
    --width-menubtn-last-bar: 25%;
}
.responsive-menu-btn .icn {
    position: relative;
    display: block;
}
.responsive-menu-btn .icn:before, .responsive-menu-btn .icn:after {
    display: block;
    height: 5px;
    content: "";
    border: solid;
    border-width: 2px 0;
}
.responsive-menu-btn .icn:after {
    float: right;
    width: var(--width-menubtn-last-bar);
    transition: width 0.5s;
    border-top: 0;
}

/*
Hauptmenü Special Content
==================================================
*/
.menu-0 .special {
    flex: 0 0 25%;
}
.menu-0 .special .box {
    width: 100%;
}
.menu-0 .special:empty {
    display: none;
}

/*
Header-Suche
==================================================
*/
.search-header {
    height: 2.4rem;
    margin-top: 1.2rem;
    --color-btn-nobg: var(--color-link);
    --color-btn-nobg-hover: var(--color-menu0-act);
}
.search-header .btn {
    font-size: 1.2em;
    min-width: 0;
    min-height: 2.4rem;
    margin: var(--gap-sm-neg) var(--gap-sm-neg) 0 0;
}
.search-header .wrap-search-input {
    position: absolute;
    top: 100%;
    right: 0;
    width: 30rem;
    padding: 0.4rem;
    transition: 0.3s;
    transform-origin: 0 0;
    border-radius: var(--bradius-input);
    background: var(--color-cyan);
}
.search-header:not(:hover):not(:focus-within) .wrap-search-input {
    transform: scaleY(0);
    pointer-events: none;
    opacity: 0;
}

.wrap-floating-btns {
    position: fixed;
    bottom: 4rem;
    right: var(--gap-sm);
    z-index: 99;
    --height-icon-em: 1.5;
}
.wrap-floating-btns span {
    transform: translateY(0.03em);
}
@media (max-width: 950px) {
    .wrap-floating-btns {
        bottom: var(--gap-sm);
    }
}
/* Entfernen, falls in USA/Kanada doch sowohl Chatbot als auch Kontaktbutton angezeigt werden sollen */
.has-plugin-zendesk .wrap-floating-btns {
    display: none;
}

/*
====================================================================================================
HEADER, FOOTER, ASIDE: spezifische Module / Anpassungen
====================================================================================================
*/
.wrap-toplinks {
    transition: 0.3s;
    border-bottom: var(--height-border-row-toplinks) solid #000;
}
.wrap-toplinks .flex-grid {
    flex-wrap: nowrap;
    justify-content: flex-end;
    height: var(--height-content-row-toplinks);
}
.menu-toplinks {
    overflow: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.menu-toplinks a {
    padding: var(--p-a-menu0);
}

#header .pos-fixed {
    position: fixed;
}
#header .pos-fixed:after {
    content: '';
    height: var(--height-border-row-logo);
    display: block;
    background: var(--gradient-cyan);
}
.responsive-menu-area {
    height: var(--height-content-row-logo);
}


.logo img {
    display: block;
    width: auto;
    height: 2.8rem;
}

#footer .row-over {
    margin-block: 0;
    padding-bottom: 0;
    --color-link: var(--color-txt);
}
#footer :is(h2,h3,h4,h5,h6,.h2,.h3,.h4) {
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
#footer h4 {
    font-size: var(--fsize);
}
#footer a {
    text-decoration: none;
}
#footer .ce-menu {
    --hgap-li-em: 0;
    --vgap-li-em: 0.2;
}
#footer .ce-menu li:before {
    content: none;
}
#footer .row + .row .ce-menu ul {
    display: flex;
    flex-wrap: wrap;
    margin: var(--gap-sm) 0;
    gap: 3rem;
}
@media (min-width: 951px) {
    #footer .row + .row > .col-3:last-child .ce-menu {
        justify-content: flex-end;
    }
}

#footer .ce-teaser .img-icon {
    margin: -1rem 0 -2rem;
    --height-icon-em: 2.3;
}


/*
====================================================================================================
MAIN: Module / Inhalte
====================================================================================================
*/
/*
Jumbotron
==================================================
*/
.jumbotron {
    overflow: hidden;
    background: url(../images/wavepattern.webp) 50% 0 no-repeat;
}
.jumbotron .caption {
    display: none;
}
.jumbotron .wrap-txt {
    margin-block: auto;
}
.jumbotron .ce-headline + .wrap-txt {
    margin-top: 0;
}
.jumbotron h1 {
    padding-top: 0;
}
.jumbotron p {
    max-width: 85rem;
    margin-inline: auto;
    font-size: 1.8rem;
}
.jumbotron p:has(.btn) {
    font-size: var(--fsize);
}
.jumbotron .wrap-img a {
    display: flex;
}

.jumbotron-slider {
    background: none !important;
}
.jumbotron-slider .jumbotron {
    --hgap-windowtocontent: calc(50vw - (var(--width-contentarea) / 2));
    margin-top: 0;
}
.jumbotron-slider .splide__pagination {
    display: flex;
    margin-top: var(--gap-std-neg);
    margin-bottom: var(--gap-std);
    padding-bottom: var(--gap-std);
}
.jumbotron-slider .splide__arrow {
    margin: 0 0;
    bottom: calc( (min(100vw, 134rem) - 5rem) / 4.8 + 10rem );
}
.jumbotron-slider:not(:hover) .splide__arrow {
    transform: translate(-130%, 50%);
    opacity: 0;
    pointer-events: none;
}
.jumbotron-slider:not(:hover) .splide__arrow--next {
    transform: translate(130%, 50%);
}


/*
Text & Media
==================================================
*/
@media (min-width: 551px) and (max-width: 950px) {
    .col-3:first-child:nth-last-child(2) > .ce-textmedia .wrap-media.col,
    :first-child + .col-3:last-child > .ce-textmedia .wrap-media.col,
    .col-4:first-child:nth-last-child(2):not(.std-sizing) > .ce-textmedia .wrap-media.col,
    :first-child + .col-4:last-child:not(.std-sizing) > .ce-textmedia .wrap-media.col,
    .col-4:last-child:not(.std-sizing):nth-child(3) > .ce-textmedia .wrap-media.col {
        width: var(--width-6);
    }
}

/*
Teaser
==================================================
*/
.img-icon {
    width: auto;
    --height-icon-em: 4.3;
}
.ce-teaser-icon-txt-v .img-icon {
    color: #000;
    --gap-icon-l: 0;
}
.box-link .action-icon, .box-link .img-icon {
    transition: 0.5s;
    --gap-icon-r: 0;
}
.box-link a:hover .svg-icon {
    color: var(--hovercolor-icon-teaser);
}

.box-link .tags {
    color: var(--color-dark);
}
.box-link .info {
    display: block;
}
.box-link .btns {
    --fsize-btn: var(--fsize-sm);
}

.border-if-hover {
    transition: 0.5s;
    border: 1px solid;
}
.border-if-hover:not(:hover) {
    border-color: transparent;
}

.zoom-img-if-hover img {
    transition: 0.5s;
}
.zoom-img-if-hover:hover img {
    transform: scale(1.1);
}

/*
Bilder/Medien-Blöcke
==================================================
- .wrap-all-media geht um mehrere zusammengehörige Medien (z.B. Medien-Block eines Artikels)
- .wrap-media und spezifisch .wrap-img etc. gehören um jedes einzelne Medium inkl. Caption
- letzteres ggf. auch für einzelne Medien in Teasern etc.
*/
.wrap-all-media.l {
    padding-left: 0;
}
.wrap-all-media.r {
    padding-right: 0;
}
@media (max-width: 950px) {
    .wrap-all-media.col-6 {
        padding-inline: 0;
    }
}
@media (max-width: 550px) {
    .wrap-all-media.col-3 {
        padding-inline: 0;
    }
}

.wrap-media video, .wrap-video video,
.wrap-media audio, .wrap-audio audio,
.wrap-all-media img, .wrap-img img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.wrap-img, .wrap-video, .wrap-media {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--vgap-txt);
}

.wrap-img a, .wrap-media a {
    display: block;
}

figure.image figcaption, .caption {
    font-size: 0.8em;
    clear: both;
    margin: 0;
    padding-top: 0.75rem;
}

.box-bordered {
    min-height: 100%;
    border: 1px solid var(--color-light);
}

/*
FST-Konfigurator
==================================================
*/
.wrap-fst-sticky {
    min-height: calc(var(--gap-std) + var(--height-pockets) + var(--gap-sm));
    --borderw-pockets: 5px;
    --height-pockets: 8rem;
}
.fst-sticky {
    transition: 0.3s;
}
[data-fst-step='1'] .wrap-fst-sticky.at-top:not(.intersecting-100) > .fst-sticky {
    position: fixed;
    z-index: 99;
    top: 0;
    max-width: var(--width-contentarea);
    transform: translateY(calc(var(--height-header) - var(--gap-sm)));
}

.fst-config {
    margin-top: var(--gap-sm-neg);
}
.fst-config label {
    overflow: hidden;
    white-space: nowrap;
}

.fst-illustration.fst-illustration {
    overflow: auto;
    flex-wrap: nowrap;
}
.fst-pocket .fst-comp {
     pointer-events: none;
}
[data-fst-step='1'] .fst-pocket .fst-comp {
    pointer-events: all;
}
.fst-pocket {
    position: relative;
    width: 17rem;
    min-width: 17rem;
    height: var(--height-pockets);
    border: var(--borderw-pockets) solid;
    border-radius: 50%;
}
.fst-pocket .wrap-zones {
    flex-wrap: nowrap;
    width: 100%;
    border-radius: 50%;
}
.dragging .fst-pocket .wrap-zones {
    overflow: hidden;
}
.fst-pocket + .fst-pocket {
    margin-left: 0.5rem;
}
.fst-pocket:before, .fst-pocket:after {
    position: absolute;
    top: calc(50% - var(--borderw-pockets) / 2);
    right: 100%;
    display: block;
    width: calc(0.5rem + var(--borderw-pockets) + 1px);
    content: '';
    border-top: inherit;
}
.fst-pocket:after {
    right: auto;
    left: 100%;
}
.fst-pocket .drop-zone {
    position: relative;
    width: 100%;
    transition: width 0.1s 0.2s;
}
.drop-zone:not(.valid-target):not(.occupied) {
    width: 0 !important;
}
.dragging .drop-zone.valid-target {
    background: var(--color-main-lighter);
}
.drop-zone.valid-target.is-dragtarget {
    background: var(--color-main);
}
.fst-pocket img {
    width: 5rem;
    min-width: 5.8rem;
    display: block;
    transition: 0.3s;
}

.drop-zone.occupied:after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="hsl(0, 72%, 50%)" width="100%" height="100%"><path d="M1 22a1 1 0 0 1-.7-.3 1 1 0 0 1 0-1.4l20-20a1 1 0 0 1 1.4 0 1 1 0 0 1 0 1.4l-20 20a1 1 0 0 1-.7.3ZM7.75 8.75a1 1 0 0 1-.71-.3L.29 1.71A1 1 0 0 1 .3.29a1 1 0 0 1 1.42 0l6.74 6.75a1 1 0 0 1-.7 1.7Z"/><path d="M21 22a1 1 0 0 1-.7-.3l-9.26-9.25a1 1 0 0 1 0-1.41 1 1 0 0 1 1.41 0l9.26 9.25A1 1 0 0 1 21 22Z"/></svg>');
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    color: #000;
    width: 2rem;
    height: 2rem;
}
[data-fst-step='1'] .fst-configurator:not(.dragging) .drop-zone.occupied:hover img {
    opacity: 0.6;
    filter: grayscale(0.8);
}
[data-fst-step='1'] .fst-configurator:not(.dragging) .drop-zone.occupied:hover:after {
    opacity: 1;
}

.fst-configurator .wrap-media {
    overflow: visible;
}
.drop-zone .comp-description {
    display:none;
}
.drop-zone .comp-info, .tooltip {
    position: absolute;
    bottom: calc(100% + 1rem);
    left: 50%;
    background: white;
    border: 1px solid;
    pointer-events: none;
    transition: 0.3s;
    opacity: 0;
    transform: translate(-50%, 1rem);
    min-width: 115%;
    padding: 0 3px;
}
.comp-description {
    padding: 1px 0.5rem;
}
.fst-configurator:not(.dragging) .drop-zone:hover .comp-info, .fst-configurator:not(.dragging) .fst-comp:hover .comp-description/*, .fst-pocket:hover .tooltip*/ {
    opacity: 1;
    transform: translate(-50%, 0);
    z-index: 999;
}
.drop-zone .comp-info {
    bottom: calc(100% + 2px);
    white-space: nowrap;
    font-size: var(--fsize-sm);
}
.fst-pocket:first-child .comp-info {
    left: 80%;
}
* + .fst-pocket:last-child .comp-info, * + .last-visible-pocket .comp-info {
    left: 20%;
}
.drop-zone .comp-info br {
    display: none;
}

.fst-comp {
    position: relative;
}
.wrap-comp {
    max-width: 50%;
}
.fst-comp img {
    cursor: grab;
}
.wrap-comp .hide-if {
    display: none;
}

.is-dragging img {
    transform: scale(0.8);
}

.fst-config, .fst-txt-info, .fst-configurator .wrap-all-media {
    display: var(--fst-display-config);
}
.fst-configsummary {
    display: var(--fst-display-configsummary);
}
.fst-configurator + .tx-powermail {
    display: var(--fst-display-form);
    margin-top: var(--gap-std);
}
.fst-configurator + .tx-powermail .powermail_fieldwrap_type_submit button, .fst-configurator + .tx-powermail [data-powermail-form-ajax] {
    display: none;
}
body {
    --fst-display-config: none;
    --fst-display-configsummary: block;
    --fst-display-btn-send: none;
}
[data-fst-step='1'] {
    --fst-display-config: block;
    --fst-display-configsummary: none;
    --fst-display-form: none;
}
[data-fst-step='3'], [data-fst-step='4'] {
    --fst-display-btn-send: block;
    --fst-display-btn-next: none;
}
[data-fst-step='4'] .fst-navi {
    display: none;
}

.fst-navi {
    --gap-li-fst-navi: var(--gap-double);
}
.fst-navi .r {
    margin-left: auto;
}
.fst-navi .no-list {
    flex-wrap: wrap;
    --divisor-step-line: 1;
    --left-step-line: calc(var(--gap-li-fst-navi) / -2);
}
.fst-navi ol li {
    margin-right: var(--gap-li-fst-navi);
}
.fst-navi button {
    white-space: nowrap;
    --bgcolor-number: #000;
}
.fst-navi button .label-next {
    display: var(--fst-display-btn-next);
}
.fst-navi button .label-send {
    display: var(--fst-display-btn-send);
}
.fst-navi li:not(.inact):not(.cur) button span {
    text-decoration: underline;
}
.fst-navi .cur button {
    cursor: default;
    color: var(--color-main);
    --bgcolor-number: var(--color-main);
}
.fst-navi .inact button, .fst-navi .btn.inact {
    cursor: not-allowed;
    opacity: 0.3;
    --color-btn-hover: var(--color-btn);
    --bgcolor-btn-hover: var(--bgcolor-btn) !important;
}
.fst-navi li button:before {
    position: absolute;
    border-bottom: 3px solid currentColor;
    width: calc((100% + var(--gap-li-fst-navi)) / var(--divisor-step-line));
    left: var(--left-step-line);
    top: calc(1em + 2px);
    content: '';
}
.fst-navi li:first-child {
    --left-step-line: 50%;
}
.fst-navi li:first-child, .fst-navi li:last-child  {
    --divisor-step-line: 2;
}
.fst-navi-num {
    width: 2em;
    line-height: 2em;
    text-align: center;
    background: var(--bgcolor-number);
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    margin-left: 50%;
    transform: translateX(-50%);
    border: 4px solid #fff;
    box-sizing: content-box;
}
@media (max-width: 600px) {
    .fst-navi li {
        width: 100%;
    }
    .fst-navi li button:before {
        display: none;
    }
    .fst-navi-num {
        display: inline-block;
        margin: 0;
        transform: translateX(-4px);
    }
}

.fst-pocket:hover > .tooltip {
    /*opacity: 1;*/
}


/*
Format beibehalten
==================================================
- va. für video-iFrames, z.B. Youtube
- 56.25% entspricht 16:9
*/
.keep-ratio {
    position: relative;
    padding-top: 56.25%;
}
.ratio-3-1 {
    padding-top: 33.33%;
}
.keep-ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

/*
Slider: Splide
==================================================
*/
.splide {
    visibility: visible;
}
.splide__list {
    display: flex !important;
    width: 100%;
}
.splide__track {
    min-width: 100%;
}

.splide__arrow {
    position: absolute;
    z-index: 9;
    bottom: calc(50% + var(--vgap-txt) / 2);
    left: 0;
    width: var(--width-slider-arrow);
    height: var(--width-slider-arrow);
    margin: 0 calc(var(--hgap-windowtocontent-neg) / 2);
    transform: translateY(50%);
}
.col .splide__arrow, [class^="col-"] .splide__arrow, [class*=" col-"] .splide__arrow {
    margin: 0;
}
.splide__arrow--next {
    right: 0;
    left: auto;
}
.splide__arrow--prev svg {
    transform: scaleX(-1);
}
.splide__arrow svg {
    width: 1.8rem;
    fill: currentColor;
}
.gap-sm .splide__arrow--prev {
    left: var(--gap-sm-neg);
}
.gap-sm .splide__arrow--next {
    right: var(--gap-sm-neg);
}
.splide__pagination li:before {
    content: none;
}
.splide__pagination button {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    border-radius: 50%;
    background-color: var(--color-light);
    background-clip: content-box;
}
.splide__pagination button.is-active {
    background-color: var(--color-main);
}

.splide__pagination,
.splide__arrow[disabled],
.all-slides-visible .splide__arrows,
.all-slides-visible .splide__slide--clone,
.all-slides-visible .splide__pagination,
.splide__pagination li:only-child {
    display: none;
}
.all-slides-visible .splide__list {
    transform: none !important;
}

/*
Slider-Content
==================================================
*/
.top-slider .wrap-media > *:not(a), .top-slider .wrap-media > a > * {
    height: var(--height-topslider);
    min-height: var(--height-topslider-min);
    max-height: var(--height-topslider-max);
}

/*
News
==================================================
*/
h1 > .info {
    display: block;
}
.news-single .ce-headline p {
    margin-bottom: 0;
}
.news-single h1 time {
    margin-right: var(--gap-sm);
}
.news-single time ~ .news-category {
    padding-left: var(--gap-sm);
    border-left: 1px solid var(--color-light);
}
.news-single .teaser-text {
    font-weight: bold;
}
.news-related + .news-related {
    padding-top: var(--gap-std);
    border-top: 1px solid var(--color-light);
}
.news-related {
    --height-icon-em: 1;
}
.news-related-wrap .ce-textmedia .wrap-txt {
    padding: 0;
}

.news-single .splide__arrow {
    transform: translateY(15%);
}

.wrap-media .btn-download {
    position: absolute;
    --height-icon-em: 2;
}

.copy-news-text.no-btn span {
    text-decoration: underline;
}
.copy-news-text .svg-icon {
    height:calc(var(--h) + 2px);
    margin-right: 0.5em;
    color: var(--color-main);
}
.copy-news-text.act .icn-inact, .copy-news-text:not(.act) .icn-act {
    display: none;
}

.list-downloads {
    --hgap-li-em: 1.5;
}
.list-downloads li:before {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='svg-icon ' aria-hidden='true' viewBox='0 0 18.67 20.45' fill='%230077c8'%3E%3Cpath d='M10.33 1v13.58a1 1 0 0 1-1 1 1 1 0 0 1-1-1V1a1 1 0 0 1 1-1 1 1 0 0 1 1 1Z'%3E%3C/path%3E%3Cpath d='M15.53 9.38a1 1 0 0 1-.3.71l-5.19 5.2a1 1 0 0 1-.7.29 1 1 0 0 1-.71-.3l-5.2-5.19a1 1 0 0 1 0-1.41 1 1 0 0 1 1.42 0l4.48 4.48 4.49-4.48a1 1 0 0 1 1.7.7Zm2.14 11.07H1a1 1 0 0 1-1-1 1 1 0 0 1 1-1h16.67a1 1 0 0 1 1 1 1 1 0 0 1-1 1Z'%3E%3C/path%3E%3C/svg%3E");
    top:0.25em;
    border-radius: 0;
    background: 0;
    width: 1em;
}

/*
Adressen
==================================================
*/
:lang(en) .box-address.country-64,
:lang(de) .box-address.country-40,
:lang(fr) .box-address.country-41,
:lang(es) .box-address.country-61,
:lang(ru) .box-address.country-58,
:lang(zh) .box-address.country-47,
:lang(ja) .box-address.country-52,
:lang(ko) .box-address.country-84 {
    order: -1;
}
/* USA vor GB */
:lang(en) .box-address.country-65 {
    order: -2;
}
:lang(en) .box-address.country-uk,
:lang(de) .box-address.country-germany,
:lang(fr) .box-address.country-france,
:lang(es) .box-address.country-spain,
:lang(ru) .box-address.country-russia,
:lang(zh) .box-address.country-china,
:lang(ja) .box-address.country-japan,
:lang(ko) .box-address.country-southkorea {
    order: -3;
}
:lang(en) .box-address.country-usa {
    order: -4;
}

/*
Events
==================================================
*/
.absolute-icon {
    position: absolute;
    left: 0;
}
.nav-event-month .btn-round {
    font-size: 2rem;
}
.table-calendar {
    border-collapse: separate;
    border-spacing: 0.4rem;
}
.event-calendar__day {
    width: 14.3%;
    min-width: 4rem;
}
.has-events {
    min-width: 14rem;
}
.event-calendar__day-other-month {
    opacity: 0.3;
}
.event-calendar__day > div {
    padding: 0.1rem 0.5rem;
    min-height: 3em;
}

/*
Publikationen
==================================================
*/
.menu.menu-doc-lang {
    height: var(--h);
    --entries: 3;
    --h: 2.5em;
}
.menu.menu-doc-lang .btn-nobg {
    min-height: calc(var(--h) - 0.6rem);
    text-transform: none;
    --height-icon-em: 0.8;
    gap: 0.4rem;
}
.menu.menu-doc-lang .btn-nobg svg {
    color: #000;
}
.publications img {
    width: auto;
    height: 222px;
    margin: 0;
    border: 1px solid #000;
    background: #fff;
}
/*.publications .d-block {
    font-size: var(--fsize-sm);
}*/
.publications .cat-after {
    margin-top: 2px;
}

@media (max-width: 950px) {
    .col-4.wrap-filter {
        width: 100%;
        margin-bottom: 2rem;
    }
    .wrap-filter.invisible {
        display: none;
    }
}

/*
2Spalter für Überschrift links + Button(s) rechts
==================================================
*/
.colsizes-big-sm {
    flex-wrap: nowrap;
}
.colsizes-big-sm .flex-grow {
    flex: 1 1 0;
    width: auto;
}
.colsizes-big-sm .flex-static {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 16rem;
    margin-bottom: var(--vgap-h2);
}
.colsizes-big-sm .flex-static *:last-child {
    margin-bottom: 0;
}
.colsizes-big-sm + * .splide__arrows {
    position: absolute;
    top: calc((var(--width-slider-arrow) * -0.5) - var(--vgap-h2));
    right: 0;
    width: 12rem;
    margin-right: var(--gap-sm);
    margin-bottom: var(--vgap-h2);
}

/*
Texthöhe begrenzen und scrollbar machen
==================================================
Container werden per JS erzeugt (et.limitTextHeight)
*/
.wrap-limit-height {
    position: relative;
    margin-top: -2rem;
}
.limit-height {
    overflow: auto;
    max-height: 60vh;
    padding-top: 2rem;
}
.wrap-limit-height:before, .wrap-limit-height:after, .has-overflow-gradients:before, .has-overflow-gradients:after {
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%;
    height: 3rem;
    content: '';
    pointer-events: none;
    background-image: linear-gradient(var(--direction-gradient), #fff, rgba(255, 255, 255, 0));
    --direction-gradient: to bottom;
}
.wrap-limit-height:before {
    top: -1px;
}
.wrap-limit-height:after {
    bottom: -2px;
    --direction-gradient: to top;
}

.overflow-h:before, .overflow-h:after {
    top: 0;
    left: auto;
    width: 3rem;
    height: 100%;
}
.overflow-h:before {
    left: 0;
    --direction-gradient: to right;
}
.overflow-h:after {
    right: 0;
    --direction-gradient: to left;
}

.wrap-height-expandable .btn-expand {
    display: none;
}
@media (max-width: 950px) {
    .collapsed > .height-expandable {
        overflow: hidden;
        max-height: 5em;
        transition: 0s;
    }
    .height-expandable {
        max-height: 5000vh;
        transition: 5s;
    }
    .collapsed > .btn-expand {
        display: inline-flex;
    }
}

/*
Input + Submit in einer Zeile
==================================================
- z.B. für kleine Such-Felder im Header oä.
*/
.form-submit-over-input {
    position: relative;
}
.form-submit-over-input input:not([type=submit]) {
    padding-right: 6rem;
}
.form-submit-over-input *[type=submit] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    margin: 0;
}


/*
Akkordeon
==================================================
- siehe eigenes Script in basic.js
*/
.btn.accordion-label, .accordion-label > .btn {
    float: none;
    justify-content: space-between;
    width: 100%;
    margin-right: 0;
    text-align: left;
}
.accordion-label svg {
    transition: 0.3s;
    flex-shrink: 0;
}
.act .accordion-label svg {
    transform: rotate(180deg);
}


/*
Hotspots
==================================================
- siehe eigenes Script in basic.js
*/
.wrap-hotspots {
    --pos-x: 0;
    --pos-y: 0;
}
.hotspot-btn {
    position: absolute;
    transform: translate(-50%, -50%);
    left:var(--pos-x);
    top:var(--pos-y);
}
.hotspot-btn-dot {
    width: var(--width-hotspot);
    height: var(--width-hotspot);
    border-radius: 50%;
    border:calc(var(--width-hotspot) * 0.2) solid var(--bordercolor-hotspot);
    background: #fff;
    text-align: center;
    --height-icon-em: 1;
}
.hotspot .hotspot-btn-label {
    --fsize-btn: 1.4rem;
    --height-input: 4rem;
    font-style: italic;
    padding: 0.2rem 1.4rem;
}
/* Label bis hierher mit Schrift darstellen */
@media (min-width:451px) {
    .hotspot .hotspot-btn-label {
        border-radius: 0;
        clip-path: polygon(0.6rem 0%, 100% 0%, calc(100% - 0.6rem) 100%, 0% 100%);
    }
    .hotspot-btn-label svg {
        display: none;
    }
}
/* Label verschlanken */
@media (max-width:600px) {
    .hotspot .hotspot-btn-label {
        --fsize-btn: 1.2rem;
        --height-input: 3rem;
        padding: 0.2rem 0.7rem;
        font-weight: 100;
    }
}
/* Label nicht mehr gut lesbar, daher als einfachen Punkt darstellen, wie .hotspot-btn-dot */
@media (max-width:450px) {
    .hotspot .hotspot-btn-label {
        width: var(--width-hotspot);
        height: var(--width-hotspot);
        border-radius: 50%;
        border:calc(var(--width-hotspot) * 0.2) solid var(--bordercolor-hotspot);
        --color-btn: var(--color-link);
        --color-btn-hover: var(--color-link-hover);
        background: #fff;
        text-align: center;
        --height-icon-em: 1;
    }
    .hotspot-btn-label span {
        display: none;
    }
}
.hotspot-btn svg {
    --h: calc(var(--width-hotspot) * 0.37);
    position: relative;
}
.hotspot.has-arrow .hotspot-btn-dot:before {
    content: '';
    background: inherit;
    width: calc(var(--width-hotspot) * 0.26);
    height: calc(var(--width-hotspot) * 0.26);
    position: absolute;
    top:50%;
    left:50%;
    transform-origin: 0 0;
    transform: rotate(calc(var(--deg-arrow) - 135deg)) skew(11deg, 11deg) ;
}
.wrap-hotspots > .col > .col > .ce-textmedia .wrap-media {
    padding: 0;
    margin: 0;
}
.hotspot .popup {
    max-width: 134rem;
}


/*
Gated Downloads
==================================================
- siehe eigenes Script in mod_hbh_gateddownloads
*/
.popup .powermail_fieldwrap_00n7q000007ewzn {
    display: none;
}
#popup-register-for-dl .popup {
    max-width: 100rem;
}
.popup:has(div.powermail_create) .ce-textmedia {
    display: none;
}


/*
Parallax
==================================================
- siehe eigenes Script in basic.js
*/
.parallax-container {
    overflow: hidden;
    --parallax-fr: 0;
    --parallax-fr2: 0;
}


/*
Google-Map / Openstreetmap
==================================================
*/
.map {
    position: relative;
    z-index: 0;
    overflow: hidden;
    height: var(--height-map);
}

.wrap-address-map-list {
    position: relative;
    overflow: hidden;
}
.wrap-address-map-list .wrap-region {
    display: none;
}
@media (min-width: 951px) {
    .address-list {
        position: absolute;
        top: 0;
        right: calc((var(--width-fullbreakout) - var(--width-contentarea)) / 2);
        height: var(--height-map);
        box-shadow: 0 0 3rem rgba(0, 0, 0, 0.5);
    }
}
.address-list .limit-height {
    max-height: 100%;
}
.box-address {
    transition: 0.3s;
    border: solid var(--color-light);
    border-width: 1px 0;
}
.box-address.act {
    z-index: 1;
    border-color: var(--color-main);
    background: var(--color-main-trans);
}
.box-address h4 {
    margin-bottom: 0.5rem;
}
.box-address + .box-address {
    margin-top: -1px;
}

/*
Suche
==================================================
*/
.result-list-item .hit {
    font-weight: bold;
    font-style: italic;
}

/*
Cookiebanner
==================================================
*/
.et-cookie tr td {
    vertical-align: top;
}
.et-cookie-blocker a {
    display: inline;
    --color-link: #fff;
}

iframe[data-src*=youtube] {
    background: #ccc no-repeat 50% 2rem;
    background-image: url(../images/logo-youtube-text.svg);
    background-size: 90% 40%;
    background-position: 50% -10%;
}

/*
Marine Hafenwelt iFrame
==================================================
*/
iframe.marine-hafenwelt {
    height: min(100vw, 80vh);
}


/*
Footer-Logos bei Slicione
==================================================
*/
#footer .ce-textmedia .wrap-img {
    width: 50%;
    padding: 0 var(--gap-sm);
}

/*
====================================================================================================
Utility-Klassen
====================================================================================================
*/
.d-block {
    display: block;
}

body .no-list, .no-list > li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.no-list li:before {
    content: none;
}
body .negate-grid-padding {
    margin-inline: var(--gap-std-neg);
    padding: 0;
}

html .absolute {
    position: absolute;
}

.round, .round-img img {
    border-radius: 50%;
}

.clickable {
    pointer-events: all !important;
}

.txt-uppercase {
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Bei .bg-* vermeiden, dass das Element selbst den bg bekommt,
damit ihn z.B. stattdessen ein ::before bekommt
und sich trotzdem alle Inhalte entsprechend der Bg-Farbe verhalten */
body .bg-none {
    background: 0;
}

/*Zwei mögliche Lösungen, um das Überschneiden von Listen-Punkten mit links daneben floatenden Elementen zu verhindern: */
/*ul, ol { display:table; border-collapse:collapse; }*/
/*li.listenpunkt-fix, .listenpunkt-fix li {list-style-position:inside;}*/

/*
Ausblenden
==================================================
*/
body .hidden {
    display: none !important;
}
body .invisible {
    visibility: hidden !important;
    opacity: 0;
    order: 9;
}
body .visually-hidden {
    position: absolute;
    top: auto;
    left: -200vw;
    overflow: hidden;
    width: 1px;
    height: 1px;
}
/* doch anzeigen, falls im Focus - z.B. für Accessibilty-Inhalts-Link ganz oben */
body .visually-hidden:focus {
    z-index: 2000;
    top: 0;
    left: 0.5rem;
    width: auto;
    height: auto;
}

.hide-if-last:last-child {
    display: none;
}

/*
Ausrichtung links / rechts / unten
==================================================
*/
body .l, .image-left {
    right: auto;
    left: 0;
    float: left;
    margin-left: 0;
}
body .r, .image-right {
    right: 0;
    left: auto;
    float: right;
    margin-right: 0;
}
body .b {
    top: auto;
    bottom: 0;
    margin-bottom: 0;
}

.align-items-left {
    align-items: flex-start;
}

/* object-fit Bilder etc. nicht zentriert ausrichten */
.focus-left {
    object-position: left;
}
.focus-top {
    object-position: top;
}
.focus-right {
    object-position: right;
}
.focus-bottom {
    object-position: bottom;
}
.focus-left.focus-top {
    object-position: left top;
}
.focus-left.focus-bottom {
    object-position: left bottom;
}
.focus-right.focus-top {
    object-position: right top;
}
.focus-right.focus-bottom {
    object-position: right bottom;
}


/*
Zentrierung
==================================================
*/
body .center-self {
    float: none;
    margin-inline: auto;
}
.flex-center {
    display: flex !important;
    align-items: center;
    flex-flow: row wrap;
    justify-content: center;
}
.flex-center-v {
    display: flex !important;
    align-items: center;
}
.flex-center-h {
    display: flex !important;
    flex-flow: row wrap;
    justify-content: center;
}

/*
Text-Ausrichtung
==================================================
- ggf. mit Text-Editor-Klassen abstimmen
*/
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}
.text-justify {
    text-align: justify;
}

/*
Text-Fette
==================================================
*/
.fw-normal {
    font-weight: normal;
}
.fw-light {
    font-weight: 300;
}

/*
Abstände
==================================================
*/
.p-0, .p-h-0, .p-l-0 {
    padding-left: 0 !important;
}
.p-0, .p-h-0, .p-r-0 {
    padding-right: 0 !important;
}
.p-0, .p-v-0, .p-t-0 {
    padding-top: 0 !important;
}
.p-0, .p-v-0, .p-b-0 {
    padding-bottom: 0 !important;
}

.p-sm, .p-h-sm, .p-l-sm {
    padding-left: var(--gap-sm) !important;
}
.p-sm, .p-h-sm, .p-r-sm {
    padding-right: var(--gap-sm) !important;
}
.p-sm, .p-v-sm, .p-t-sm {
    padding-top: var(--gap-sm) !important;
}
.p-sm, .p-v-sm, .p-b-sm {
    padding-bottom: var(--gap-sm) !important;
}

.p-std, .p-h-std, .p-l-std {
    padding-left: var(--gap-std) !important;
}
.p-std, .p-h-std, .p-r-std {
    padding-right: var(--gap-std) !important;
}
.p-std, .p-v-std, .p-t-std {
    padding-top: var(--gap-std) !important;
}
.p-std, .p-v-std, .p-b-std {
    padding-bottom: var(--gap-std) !important;
}

.p-big, .p-h-big, .p-l-big {
    padding-left: var(--gap-big) !important;
}
.p-big, .p-h-big, .p-r-big {
    padding-right: var(--gap-big) !important;
}
.p-big, .p-v-big, .p-t-big {
    padding-top: var(--gap-big) !important;
}
.p-big, .p-v-big, .p-b-big {
    padding-bottom: var(--gap-big) !important;
}

.p-t-xbig {
    padding-top: var(--gap-xbig) !important;
}
.p-b-xbig {
    padding-bottom: var(--gap-xbig) !important;
}

.m-0, .m-h-0, .m-l-0 {
    margin-left: 0 !important;
}
.m-0, .m-h-0, .m-r-0 {
    margin-right: 0 !important;
}
.m-0, .m-v-0, .m-t-0 {
    margin-top: 0 !important;
}
.m-0, .m-v-0, .m-b-0 {
    margin-bottom: 0 !important;
}

.m-sm, .m-h-sm, .m-l-sm {
    margin-left: var(--gap-sm) !important;
}
.m-sm, .m-h-sm, .m-r-sm {
    margin-right: var(--gap-sm) !important;
}
.m-sm, .m-v-sm, .m-t-sm {
    margin-top: var(--gap-sm) !important;
}
.m-sm, .m-v-sm, .m-b-sm {
    margin-bottom: var(--gap-sm) !important;
}

.m-std, .m-h-std, .m-l-std {
    margin-left: var(--gap-std) !important;
}
.m-std, .m-h-std, .m-r-std {
    margin-right: var(--gap-std) !important;
}
.m-std, .m-v-std, .m-t-std {
    margin-top: var(--gap-std) !important;
}
.m-std, .m-v-std, .m-b-std {
    margin-bottom: var(--gap-std) !important;
}

.m-big, .m-h-big, .m-l-big {
    margin-left: var(--gap-big) !important;
}
.m-big, .m-h-big, .m-r-big {
    margin-right: var(--gap-big) !important;
}
.m-big, .m-v-big, .m-t-big {
    margin-top: var(--gap-big) !important;
}
.m-big, .m-v-big, .m-b-big {
    margin-bottom: var(--gap-big) !important;
}

.m-auto, .m-h-auto, .m-l-auto {
    margin-left: auto !important;
}
.m-auto, .m-h-auto, .m-r-auto {
    margin-right: auto !important;
}
.m-auto, .m-v-auto, .m-t-auto {
    margin-top: auto !important;
}
.m-auto, .m-v-auto, .m-b-auto {
    margin-bottom: auto !important;
}

body .m-h-sm-neg {
    width: auto;
    margin-right: var(--gap-sm-neg);
    margin-left: var(--gap-sm-neg);
}

/*
Scrollbar ausblenden (trotz Scrollbarkeit)
==================================================
*/
.no-scrollbar {
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar::scrollbar {
    display: none;
}