* {
    margin: 0;
	padding: 0;
	border: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #15756b;
    --secondary-color: #606060;
    --tertiary-color: #b7dfd9;
    --highlight-color: #4B5563;
    --focus-color: #15756b;
    --text-color: #000033;
    --page-background: #def0ee;
    --element-distance: 50px 0;
}

@font-face {
  font-family: 'fontello';
  src: url('fonts/fontello.eot?21801844');
  src: url('fonts/fontello.eot?21801844#iefix') format('embedded-opentype'),
       url('fonts/fontello.woff2?21801844') format('woff2'),
       url('fonts/fontello.woff?21801844') format('woff'),
       url('fonts/fontello.ttf?21801844') format('truetype'),
       url('fonts/fontello.svg?21801844#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-display: swap;
    font-family: 'latolight';
    src: url('fonts/lato-light-webfont.eot');
    src: url('fonts/lato-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-light-webfont.woff2') format('woff2'),
         url('fonts/lato-light-webfont.woff') format('woff'),
         url('fonts/lato-light-webfont.ttf') format('truetype'),
         url('fonts/lato-light-webfont.svg#latolight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: 'latoregular';
    src: url('fonts/lato-regular-webfont.eot');
    src: url('fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-regular-webfont.woff2') format('woff2'),
         url('fonts/lato-regular-webfont.woff') format('woff'),
         url('fonts/lato-regular-webfont.ttf') format('truetype'),
         url('fonts/lato-regular-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: 'latosemibold';
    src: url('fonts/lato-semibold-webfont.eot');
    src: url('fonts/lato-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-semibold-webfont.woff2') format('woff2'),
         url('fonts/lato-semibold-webfont.woff') format('woff'),
         url('fonts/lato-semibold-webfont.ttf') format('truetype'),
         url('fonts/lato-semibold-webfont.svg#latosemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: 'latobold';
    src: url('fonts/lato-bold-webfont.eot');
    src: url('fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-bold-webfont.woff2') format('woff2'),
         url('fonts/lato-bold-webfont.woff') format('woff'),
         url('fonts/lato-bold-webfont.ttf') format('truetype'),
         url('fonts/lato-bold-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: 'latoblack';
    src: url('fonts/lato-black-webfont.eot');
    src: url('fonts/lato-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-black-webfont.woff2') format('woff2'),
         url('fonts/lato-black-webfont.woff') format('woff'),
         url('fonts/lato-black-webfont.ttf') format('truetype'),
         url('fonts/lato-black-webfont.svg#latoblack') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}


.icon-mail:before { content: '\e800'; } /* '' */
.icon-user:before { content: '\e801'; } /* '' */
.icon-ok:before { content: '\e802'; } /* '' */
.icon-ok-circled:before { content: '\e803'; } /* '' */
.icon-ok-circled2:before { content: '\e804'; } /* '' */
.icon-cancel-circled:before { content: '\e805'; } /* '' */
.icon-cancel-circled2:before { content: '\e806'; } /* '' */
.icon-plus:before { content: '\e807'; } /* '' */
.icon-plus-circled:before { content: '\e808'; } /* '' */
.icon-minus:before { content: '\e809'; } /* '' */
.icon-minus-circled:before { content: '\e80a'; } /* '' */
.icon-help-circled:before { content: '\e80b'; } /* '' */
.icon-home:before { content: '\e80c'; } /* '' */
.icon-pin:before { content: '\e80d'; } /* '' */
.icon-eye:before { content: '\e80e'; } /* '' */
.icon-bookmark:before { content: '\e80f'; } /* '' */
.icon-flag:before { content: '\e810'; } /* '' */
.icon-download:before { content: '\e811'; } /* '' */
.icon-upload:before { content: '\e812'; } /* '' */
.icon-comment:before { content: '\e813'; } /* '' */
.icon-chat:before { content: '\e814'; } /* '' */
.icon-attention:before { content: '\e815'; } /* '' */
.icon-attention-circled:before { content: '\e816'; } /* '' */
.icon-location:before { content: '\e817'; } /* '' */
.icon-phone:before { content: '\e818'; } /* '' */
.icon-calendar:before { content: '\e819'; } /* '' */
.icon-clock:before { content: '\e81a'; } /* '' */
.icon-zoom-in:before { content: '\e81b'; } /* '' */
.icon-zoom-out:before { content: '\e81c'; } /* '' */
.icon-down-open:before { content: '\e81d'; } /* '' */
.icon-left-open:before { content: '\e81e'; } /* '' */
.icon-right-open:before { content: '\e81f'; } /* '' */
.icon-up-open:before { content: '\e820'; } /* '' */
.icon-down-big:before { content: '\e821'; } /* '' */
.icon-left-big:before { content: '\e822'; } /* '' */
.icon-right-big:before { content: '\e823'; } /* '' */
.icon-up-big:before { content: '\e824'; } /* '' */
.icon-right-dir:before { content: '\e825'; } /* '' */
.icon-left-dir:before { content: '\e826'; } /* '' */
.icon-up-dir:before { content: '\e827'; } /* '' */
.icon-down-dir:before { content: '\e828'; } /* '' */
.icon-up-circled2:before { content: '\e829'; } /* '' */
.icon-down-circled2:before { content: '\e82a'; } /* '' */
.icon-list-alt:before { content: '\e82b'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */
.icon-bookmark-empty:before { content: '\f097'; } /* '' */
.icon-phone-squared:before { content: '\f098'; } /* '' */
.icon-left-circled:before { content: '\f0a8'; } /* '' */
.icon-right-circled:before { content: '\f0a9'; } /* '' */
.icon-up-circled:before { content: '\f0aa'; } /* '' */
.icon-down-circled:before { content: '\f0ab'; } /* '' */
.icon-mail-alt:before { content: '\f0e0'; } /* '' */
.icon-comment-empty:before { content: '\f0e5'; } /* '' */
.icon-chat-empty:before { content: '\f0e6'; } /* '' */
.icon-paste:before { content: '\f0ea'; } /* '' */
.icon-user-md:before { content: '\f0f0'; } /* '' */
.icon-stethoscope:before { content: '\f0f1'; } /* '' */
.icon-ambulance:before { content: '\f0f9'; } /* '' */
.icon-medkit:before { content: '\f0fa'; } /* '' */
.icon-plus-squared:before { content: '\f0fe'; } /* '' */
.icon-angle-double-left:before { content: '\f100'; } /* '' */
.icon-angle-double-right:before { content: '\f101'; } /* '' */
.icon-angle-double-up:before { content: '\f102'; } /* '' */
.icon-angle-double-down:before { content: '\f103'; } /* '' */
.icon-angle-left:before { content: '\f104'; } /* '' */
.icon-angle-right:before { content: '\f105'; } /* '' */
.icon-angle-up:before { content: '\f106'; } /* '' */
.icon-angle-down:before { content: '\f107'; } /* '' */
.icon-desktop:before { content: '\f108'; } /* '' */
.icon-laptop:before { content: '\f109'; } /* '' */
.icon-tablet:before { content: '\f10a'; } /* '' */
.icon-mobile:before { content: '\f10b'; } /* '' */
.icon-flag-empty:before { content: '\f11d'; } /* '' */
.icon-help:before { content: '\f128'; } /* '' */
.icon-info:before { content: '\f129'; } /* '' */
.icon-attention-alt:before { content: '\f12a'; } /* '' */
.icon-calendar-empty:before { content: '\f133'; } /* '' */
.icon-angle-circled-left:before { content: '\f137'; } /* '' */
.icon-angle-circled-right:before { content: '\f138'; } /* '' */
.icon-angle-circled-up:before { content: '\f139'; } /* '' */
.icon-angle-circled-down:before { content: '\f13a'; } /* '' */
.icon-minus-squared:before { content: '\f146'; } /* '' */
.icon-minus-squared-alt:before { content: '\f147'; } /* '' */
.icon-ok-squared:before { content: '\f14a'; } /* '' */
.icon-link-ext-alt:before { content: '\f14c'; } /* '' */
.icon-down:before { content: '\f175'; } /* '' */
.icon-up:before { content: '\f176'; } /* '' */
.icon-left:before { content: '\f177'; } /* '' */
.icon-right:before { content: '\f178'; } /* '' */
.icon-right-circled2:before { content: '\f18e'; } /* '' */
.icon-left-circled2:before { content: '\f190'; } /* '' */
.icon-plus-squared-alt:before { content: '\f196'; } /* '' */
.icon-fax:before { content: '\f1ac'; } /* '' */
.icon-share:before { content: '\f1e0'; } /* '' */
.icon-share-squared:before { content: '\f1e1'; } /* '' */
.icon-television:before { content: '\f26c'; } /* '' */
.icon-calendar-plus-o:before { content: '\f271'; } /* '' */
.icon-calendar-minus-o:before { content: '\f272'; } /* '' */
.icon-calendar-times-o:before { content: '\f273'; } /* '' */
.icon-calendar-check-o:before { content: '\f274'; } /* '' */
.icon-universal-access:before { content: '\f29a'; } /* '' */
.icon-question-circle-o:before { content: '\f29c'; } /* '' */
.icon-address-book:before { content: '\f2b9'; } /* '' */
.icon-address-book-o:before { content: '\f2ba'; } /* '' */
.icon-address-card:before { content: '\f2bb'; } /* '' */
.icon-user-circle:before { content: '\f2bd'; } /* '' */
.icon-user-circle-o:before { content: '\f2be'; } /* '' */
.icon-user-o:before { content: '\f2c0'; } /* '' */
.icon-id-badge:before { content: '\f2c1'; } /* '' */
.icon-id-card:before { content: '\f2c2'; } /* '' */
.icon-id-card-o:before { content: '\f2c3'; } /* '' */
.icon-window-close:before { content: '\f2d3'; } /* '' */
.icon-window-close-o:before { content: '\f2d4'; } /* '' */


html, body {
    font-family: 'latolight', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    color: var(--text-color);
    overflow-x: hidden;
}

#wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#container {
    flex: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

p, .text {
    /*font-size: clamp(1em, 2vw, 1.25em);*/
    font-size: clamp(1em, 1vw, 1.25em);
    line-height: 1.5;
    margin-bottom: 32px;
}

p:last-child {
    margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
    font-weight: 500;
    margin-bottom: 16px;
    max-width: 1100px;
    font-family: 'latoregular';
}

h1 {
    font-size: /*clamp(1.75em, 3vw, 3em)*/ clamp(1.75em, 3vw, 2.75em);
}

h2 {
    font-size: clamp(1.25em, 3vw, 2.25em);
}

h3 {
    font-size: clamp(1.00em, 3vw, 1.5em);
}

h4 {
    font-size: clamp(0.75em, 3vw, 1.25em);
}

h5 {
    font-size: clamp(0.5em, 3vw, 1em);
    font-weight: 700;
}

h6 {
    font-size: 1em;
    font-weight: 700;
}

a:link,
a:visited {
    text-decoration: underline;
    color: var(--primary-color);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

a:focus-visible {
    color: var(--focus-color);
    border: 1px solid var(--focus-color);
}

a:active {
    color: var(--text-color);
}

/* Grundlegende Fokus-Outline für alle interaktiven Elemente */
:focus {
  outline: 2px solid #4d90fe; /* Blaue Outline */
  outline-offset: 2px; /* Abstand zwischen Element und Outline */
  box-shadow: 0 0 0 2px rgba(77, 144, 254, 0.5); /* Subtiler Schatten für bessere Sichtbarkeit */
}

/* Verbesserte Fokus-Styles für verschiedene Element-Typen */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 2px solid #4d90fe;
  outline-offset: 2px;
  transition: outline-color 0.2s ease-in-out;
}

/* Optional: Verhindern, dass die Outline bei Mausklicks erscheint, 
   aber sichtbar bleibt für Tastaturnavigation */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

:focus-visible {
  outline: 2px solid #4d90fe;
  outline-offset: 2px;
}


main ul, main ol {
    margin: 0 0 32px 16px;
    font-size: clamp(1em, 1vw, 1.25em);
}

main .rte ul,
main .rte ol {
    margin-top: -16px;
}

main .rte ul li, 
main .rte ol li {
    margin-bottom: 16px;
}

header a:link,
header a:visited {
    text-decoration: none;
}

header a.-tertiary:link,
header a.-tertiary:visited {
    margin: 0 !important;
}

header .inside, footer .inside,
main .mod_article {
    padding: 0 16px;
}

@media screen and (min-width: 500px) {
    header .inside, footer .inside,
    main .mod_article {
        padding: 0 32px;
    }
}

@media screen and (min-width: 768px) {
    header .inside, footer .inside,
    main .mod_article {
        padding: 0 5vw;
    }
}

@media screen and (min-width: 992px) {
    header .inside, footer .inside,
    main .mod_article {
        padding: 0 10vw;
    }
}

@media screen and (max-width: 1270px) {
    header .inside {
        padding: 0 16px;
    }
}

@media screen and (min-width: 1921px) {
    header .inside, footer .inside,
    main .mod_article {
        padding: 0 15vw;
    }
}

.invisible:not(:focus) {
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    float: left;
    z-index: -100;
}

[data-icon]::before {
    content: attr(data-icon);
    font-family: "fontello";
    font-size: 25px;
    font-style: normal;
}

a.button:link,
a.button:visited,
.more a {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 20px;
    margin: 32px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    text-decoration: none;
}

.button-container {
  display: flex;
  gap: 32px;
}

.button-container a.button:link,
.button-container a.button:visited {
    margin: 0;
}
 
a.button:hover,
.more a:hover {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: white;
}

a:focus-visible {
    border: 1px solid var(--focus-color);
}

a.button.-secondary:link,
a.button.-secondary:visited {
    border-color: white;
    color: white;
}

a.button.-secondary:hover {
    background-color: white;
    color: var(--text-color);
}

a.button.-tertiary:link,
a.button.-tertiary:visited {
    border-color: var(--highlight-color);
    background-color: var(--highlight-color);
    color: white;
}

a.button.-tertiary:hover {
    background-color: white;
    color: var(--text-color);
}

a.button:focus-visible,
a.button.-secondary:focus-visible {
    border-color: var(--focus-color);
}

a.button:active,
a.button.secondary:active {
    background-color: var(--focus-color);
} 

/*Header*/
header {
    box-shadow: 0 0 30px rgba(206,214,216,.7);
    padding: 16px 0;
    background-color: white;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    overflow: visible;
}

#header.shrink {
    padding: 8px 0;
    height: 85px;
}

#header.shrink #logo img{
    max-height: 60px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

header #header-topline {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 2em;
    position: relative; 
    height: 100%;
}

header #header-topline .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    width: 100%;
}

header #logo img {
    /*min-width: 150px;
    max-width: 310px;
    width: 100%;
    height: auto;*/
    max-height: 90px;
    min-height: 50px;
    width: auto;
}

@media screen and (max-width: 460px) {
    header .inside {
        flex-wrap: nowrap;
    }
    header #logo img {
        max-width: 250px;
        width: 100%;
    }
}

@media screen and (max-width: 1500px) {
    header .inside {
        gap: 8px;
    }

    header #logo img {
        max-height: 70px;
    }
}

#header-topline #hotline {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 16px;
    /*margin-bottom: 32px;*/
}

#header-topline a.phone {
    border: 1px solid var(--text-color);
    color: var(--text-color);
    border-radius: 3px;
    padding: 8px 16px;
    display: inline-block;
}

#header-topline a.phone:hover {
    background-color: var(--text-color);
    color: white;
}

#header-topline .btn-list {
    display: flex;
    gap: 16px;
    list-style-type: none;
}

#header-topline .btn-list li a {
    border: 1px solid var(--primary-color);
    background-color: var(--primary-color);
    border-radius: 3px;
    color: white;
    padding: 8px 16px;
    display: inline-block;
}

#header-topline .btn-list li a:hover {
    background-color: var(--text-color);
    border-color: var(--text-color);
}

header .nav-toggle__box {
    display: block;
}

@media screen and (max-width: 959px) {
    header #header-items #hotline,
    header #header-items .mod_navigation {
        display: none;
    }

    header #header-items.active {
        position: absolute;
        top: 0;
        background-color: var(--tertiary-color);
        border-radius: 8px;
        border: 1px solid var(--text-color);
        width: 100%;
        overflow: hidden;
    }

    header #header-items.active .header-buttons {
        display: flex;
        justify-content: space-between;
        margin: 16px;
        gap: 16px;
    }

    #header-items .header-buttons {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        margin: 16px;
    }

    header #header-items.active .header-buttons #hotline {
        display: flex !important;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 16px;
    }

    header #header-items.active .mod_navigation {
        display: block;
    }
}



@media screen and (min-width: 960px) {
    header .nav-toggle__box {
        display: none;
    }

    header #header-items .header-buttons {
        margin-bottom: 32px;
    }

    header .mod_navigation ul li:hover ul {
        border: 1px solid var(--text-color);
        border-radius: 8px;
        box-shadow: 0 0 30px rgba(206,214,216,.7)
    }
}

header .nav-toggle {
    cursor: pointer;
}

/* Basis-Styling für den Burger-Button */
.nav-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30px;
  min-height: 60px; /* Höhe für Platz des Menü-Texts */
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
}

/* Container für die drei Streifen */
.nav-toggle:before {
  content: "";
  display: block;
  position: relative;
  width: 100%;
  height: 24px; /* Höhe des Burger-Containers */
}

/* Die drei Streifen */
.nav-toggle span:not(.menu) {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
  transform-origin: center;
}

/* Positionierung der Streifen */
.nav-toggle span:nth-child(1) {
  top: 8px;
}

.nav-toggle span:nth-child(2) {
  top: 18px;
}

.nav-toggle span:nth-child(3) {
  top: 28px;
}

/* Der Menü-Text */
.nav-toggle .menu {
  margin-top: 26px; /* Passt den Abstand zum Text an */
  font-size: 14px;
  color: #333;
  transition: opacity 0.3s ease;
}

/* Animation für den oberen Streifen */
.nav-toggle.active span:nth-child(1) {
  top: 18px; /* Mittelpunkt für die Rotation */
  transform: rotate(45deg);
}

/* Animation für den mittleren Streifen */
.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

/* Animation für den unteren Streifen */
.nav-toggle.active span:nth-child(3) {
  top: 18px; /* Mittelpunkt für die Rotation */
  transform: rotate(-45deg);
}

/* Optional: Änderung des Menü-Texts */
.nav-toggle.active .menu {
  opacity: 0; /* Menü-Text ausblenden, wenn aktiv */
}

header .mod_navigation {
    display: none;
}

@media screen and (min-width: 961px) {
    header .mod_navigation {
        display: block;
    }
}
@media screen and (min-width: 961px) {
    header .mod_navigation ul {
        list-style: none;
        margin-bottom: 0;
        margin-top: 0;
        padding-left: 0;
    
        display: flex;
    }

    header .mod_navigation ul ul {
        position: absolute;
        left: 0;
        top: 100%;
        flex-direction: column;

        transform-origin: top center;
        transform: scale(1, 0);
        transition: transform 0.2s;
    }

    header .mod_navigation ul li {
        padding: 8px 16px;
        position: relative;
    }
}

@media screen and (max-width: 1290px) and (min-width: 961px) {
    header .mod_navigation ul li {
        padding: 0 12px;
    }
}

header .mod_navigation ul li:hover ul {
    transform: scale(1, 1);
}

header .mod_navigation ul ul {
    background-color: white;
    border-top: 1px solid var(--text-color);
}

header .mod_navigation ul ul li a {
    display: block;
    text-decoration: none;
    color: #ddd;
    white-space: nowrap;
}

.mod_navigation a:link,
.mod_navigation a:visited,
.mod_customnav a:link,
.mod_customnav a:visited,
.mod_sitemap a:link,
.mod_sitemap a:visited {
    color: var(--primary-color);
}

.mod_navigation a:hover,
.mod_customnav a:hover,
.mod_sitemap a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.mod_navigation a:focus,
.mod_customnav a:focus,
.mod_sitemap a:focus {
    color: var(--focus-color);
}

.mod_navigation a:active,
.mod_customnav a:active,
.mod_sitemap a:active {
    color: var(--text-color);
}

/*----------*/

header .mod_navigation .submenu-toggle {
  background-color: white;
  font-size: 18px;
  color: var(--primary-color);
}

@media screen and (max-width: 960px) {
    header .mod_navigation {
        width:100%;
        background-color: white;
        border-radius: 3px;
        position: relative;
        top: 0;
        left: 0;
    }

    header .mod_navigation .submenu-toggle {
        position: absolute;
        right: 0;
        top: 1px;
        display: block;
        padding: 1em;
        background: white;
        height: 55px;
        width: 55px;
        cursor: pointer;
        color: var(--text-color);
        border-left: 1px solid var(--text-color);
    }

    header .mod_navigation [class^="icon-"]::before, header .mod_navigation [class*=" icon-"]::before {
        margin-left: 0;
    }

    .shrink .mod_navigation {
        top: 78px;
    }
    
    header .mod_navigation li {
        width:100%;
        position:relative;
        list-style-type: none;
    }

    header .mod_navigation a,
    header .mod_navigation strong {
        display:block;
        height:100%;
        width:100%;
        padding: 15px 24px;
        text-decoration:none;
        color:var(--text-color);
        background:var(--page-background);
        border-top: 1px solid var(--text-color);
    }

    .mod_navigation a:link, 
    .mod_navigation a:visited, 
    .mod_customnav a:link, 
    .mod_customnav a:visited, 
    .mod_sitemap a:link, 
    .mod_sitemap a:visited {
        color: var(--text-color);
    }

    header .mod_navigation .level_2 a, 
    header .mod_navigation .level_2 strong {
        padding-left: 48px;
        background-color: white;
    }

    header .mod_navigation li:first-child > * {
        border-top: 0;
    }
    
    header .mod_navigation a:hover {
        background:rgba(0,0,0,0.4);
    }
    
    header .mod_navigation {
        display:none;
    }
    
    .sub-menu {
        display:none;
    }
    
    .sub-menu li:last-of-type {
        padding-bottom:0;
    }
    
    .sub-menu a {
        background:white;
    }
    
    .sub-menu .sub-menu a {
        background:rgba(0,0,0,0.6);
    }
    
    /* toggles */
    
    .nav-toggle {
        background:transparent;
        display:block;
        position:relative;
        right:0;
        top:0;
        width: 100%;
        color:var(--text-color);
        cursor:pointer;
    }
    
    .toggle-sub-menu {
        display:none;
    }
    
    .toggle-sub-menu {
        position:absolute;
        right:0;
        top:1px; /* Höhe des borders */
        display:block;
        padding:1em;
        background: white;
        height: 61px;
        width: 61px;
        cursor:pointer;
    }
    
    .toggle-sub-menu.active {
        background: white}
        
    .toggle-sub-menu:hover,
    .toggle-sub-menu.active:hover  {
        background-color: var(--primary-color);
    }
    
    
}
/*----------*/

/*HERO*/
#hero img {
    width: 100%;
    height: auto;
}

/*MAIN*/
main {
    padding-top: 80px;
}

main .mod_article {
    margin-inline: auto;
}

main .mod_article div {
  margin-bottom: 80px;
}

main .mod_article div div {
    margin-bottom: 0;
}

main .content-headline,
main .content-text,
main .content-image,
main .content-download,
main .content-downloads {
  margin-inline: auto;
  max-width: 900px;
}

main img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

main img:not(.ce_rsce_teaser *) {
    border: 1px solid var(--text-color);
    border-radius: 1em;
}

.content-downloads ul {
    list-style-type: none;
    margin-left: 0;
}

.content-downloads ul li {
    margin-bottom: 16px;
}

/*BUTTON*/
main .btn {
    background-color: var(--page-background);
    padding: 1em 1.5em;
    width: fit-content;
    border-radius: 12px;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    text-decoration: none;
}

main .btn:hover {
    background-color: var(--text-color);
    color: white;
}

/*MEDIA ELEMENTS*/
@media screen and (min-width: 650px) {
    .media--right {
        display: grid;
        grid-template-areas:
        "header header"
        "text image";
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .media--right h1 {
        grid-area: header;
    }

    .media--right figure {
        grid-area: image;
    }

    .media--right .rte {
        grid-area: text;
    }
}

.media figure {
    margin-bottom: 32px;
}

/*TEASER*/

/*Grid-Container*/
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 32px;
}

.columns-2 .grid-container, .cols--2 {
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 768px) {
    .columns-2 .grid-container, .cols--2,
    .grid-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-auto-rows: 1fr;grid-auto-rows: auto;
    }
}



/*ce_rcse_teaser*/
.ce_rsce_teaser .teaser-item {
    position: relative;
    border: 1px solid var(--highlight-color);
    overflow: hidden;
    border-radius: 1em;
    padding: 32px;
    display: flex;
	flex-direction: column;
}

.ce_rsce_teaser .teaser-item a {
    margin-top: auto;
}

.ce_rsce_teaser .teaser-item figure {
    text-align: center;
}

.ce_rsce_teaser img {
    max-width: max-content;
    width: 100%;
    height: auto;
}

.columns-2.ce_rsce_teaser .teaser-item {
    background-color: var(--tertiary-color);
}

.columns-2.ce_rsce_teaser .btn {
    background-color: white;
}

.columns-2.ce_rsce_teaser .btn:hover {
    background-color: var(--text-color);
    color: white;
}

/*ce_rsce_team*/
.ce_rsce_team {
    max-width: 900px;
    margin-inline: auto;
}


/*Formular*/
.ce_form {
    max-width: 900px;
    margin-inline: auto;
}

.ce_form .widget {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.ce_form label,
.ce_form legend {
    font-weight: 500;
}

.ce_form .widget-checkbox label {
    font-weight: 400;
}

.ce_form input,
.ce_form textarea {
    border: 1px solid var(--highlight-color);
    padding: 8px;
    border-radius: 3px;
    font-size: inherit;
}

.ce_form input.text {
    margin-bottom: 0;
}

.ce_form .submit {
    background-color: var(--page-background);
    padding: 1em 1.5em;
    width: fit-content;
    border-radius: 12px;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    text-decoration: none;
    font-size: inherit;
    cursor: pointer;
}

.ce_form .submit:hover {
    background-color: var(--text-color);
    color: white;
}

.ce_form .submit:focus {
    background-color: var(--focus-color);
}

.ce_form .submit:active {
    background-color: var(--primary-color);
    text-decoration: underline;
}

/*Youtube*/
.content-youtube {
  margin-inline: auto;
  max-width: 900px;
  width: 100%;
}

.content-youtube iframe {
  max-width: 900px;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  margin-inline: auto;
}

/*FOOTER*/
footer {
    background-color: var(--page-background);
    padding: 1em 0;
}

#footer-top {
    border-bottom: 1px solid var(--text-color);
    margin-bottom: 2em;
    padding-bottom: 1em;
}

#footer-top ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    list-style-type: none;
}

footer a:link,
footer a:visited {
    color: var(--text-color) !important;
    text-decoration: none;
}
@media screen and (min-width: 1220px) {
    #footer-bottom {
        display: flex;
        justify-content: space-between;
        gap: 3em;
    }
}

footer .logos-wrapper .logos {
    display: flex;
    flex-direction: column;
}

footer .logos-wrapper img {
    max-width: 150px;
}

footer .mod_navigation {
    width: 100%;
    margin-bottom: 64px;
}

footer .mod_navigation ul {
    list-style-type: none;
}

@media screen and (min-width: 450px) {
    footer .mod_navigation ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1em;
    }
}

@media screen and (min-width: 650px) and (max-width: 1074px) {
    footer .mod_navigation ul {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (min-width: 1075px) {
    footer .mod_navigation ul {
        display: flex;
        justify-content: space-between;
        gap: 1em;
    }
}

footer .mod_navigation ul a {
    font-family: 'latosemibold';
}

footer .mod_navigation ul ul {
    display: flex;
    flex-direction: column;
    margin: 1em 0;
}

footer .mod_navigation ul ul a {
    font-family: 'latolight';
}