/* ------------------------------ */
/* ----- Typography / Colors ---- */
/* ------------------------------ */

@font-face {
  font-family: 'Urbane';
  font-weight: 300;
  font-style: normal;
  src:  url("https://use.typekit.net/af/254f88/00000000000000007735c0a7/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),
        url("https://use.typekit.net/af/254f88/00000000000000007735c0a7/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff");
  font-display: swap;
}


@font-face {
  font-family: 'Urbane';
  font-weight: 500;
  font-style: normal;
  src:  url("https://use.typekit.net/af/decad5/00000000000000007735c0a9/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),
        url("https://use.typekit.net/af/decad5/00000000000000007735c0a9/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff");
  font-display: swap;
}


@font-face {
  font-family: 'Urbane';
  font-weight: 600;
  font-style: normal;
  src:  url("https://use.typekit.net/af/6b9548/00000000000000007735c09d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),
        url("https://use.typekit.net/af/6b9548/00000000000000007735c09d/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff");
  font-display: swap;
}


/* ------------------------------ */
/* ---------- Variables --------- */
/* ------------------------------ */

:root {
  /* Brand Fonts */
  --brand-font: 'Urbane';

  /* Brand Colors*/
  --brand-black: #000000;
  --brand-color: #03325B;
  --brand-cta: #0099DB;
  --brand-grey: rgba(0,0,0,.075);
  --brand-light: rgba(255,255,255,.075);
  --brand-white: #ffffff;
  
  /* Font Styling */
  --font-size-5: 75px;
  --font-size-4: 55px;
  --font-size-3: 45px;
  --font-size-2-5: 35px;
  --font-size-2: 18px;
  --font-size-1: 15px;
  --font-size-standard: 22px;
  --line-height-3: 1.15;
  --line-height-2: 1.25;
  --line-height-1: 1.55;

  /* Hover & Transition */
  --opacity: .7;
  --transition-delay: .15s;
  --transition-4: 1s;
  --transition-3: .75s;
  --transition-2: .5s;
  --transition-1: .25s;

  /* Spacing */
  --spacing-11: 200px;
  --spacing-10: 120px;
  --spacing-9: 100px;
  --spacing-8: 90px;
  --spacing-7: 74px;
  --spacing-6: 50px;
  --spacing-5: 40px;
  --spacing-4: 30px;
  --spacing-3: 20px;
  --spacing-2: 10px;
  --spacing-1: 7px;

  /* Layout */
  --height-header: 149px;
  --width-content-big: 1270px;
  --width-content-normal: 840px;
  --width-content-small: 700px;
}


/* ------------------------------ */
/* ----------- General ---------- */
/* ------------------------------ */

::-moz-selection, .section--color .section__teaser_below--white ::-moz-selection {
  background: var(--brand-color);
  color: var(--brand-white);
}

::selection, .section--color .section__teaser_below--white ::selection {
  background: var(--brand-color);
  color: var(--brand-white);
}

::-moz-selection, .section--color .section__teaser_below--white ::-moz-selection {
  background: var(--brand-color);
  color: var(--brand-white);
}

.section--color ::-moz-selection, .section__teaser_below--blue ::-moz-selection, .section__contact ::-moz-selection, .site_cover__box__container ::-moz-selection {
  background: var(--brand-white);
  color: var(--brand-color);
}

.section--color ::selection, .section__teaser_below--blue ::selection, .section__contact ::selection, .site_cover__box__container ::selection {
  background: var(--brand-white);
  color: var(--brand-color);
}

.section--color ::-moz-selection, .section__teaser_below--blue ::-moz-selection, .section__contact ::-moz-selection, .site_cover__box__container ::-moz-selection {
  background: var(--brand-white);
  color: var(--brand-color);
}

html {
  font-size: 20px;
}

body {
  font-family: var(--brand-font);
  font-size: var(--font-size-standard);
  font-weight: 300;
  line-height: var(--line-height-1);
  color: var(--brand-black);
  background-color: var(--brand-white);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  font-weight: 500;
  line-height: var(--line-height-2);
}

h1 b, h1 strong, h2 b, h2 strong, h3 b, h3 strong {
  font-style: italic;
}

h2:first-child, h3:first-child, h4:first-child, .section > .section__title:first-child h2, .section > .section__title:first-child h3, .section > .section__title:first-child h4 {
  margin-top: 0;
}

h1 {
  font-size: var(--font-size-4);
  margin-top: 0;
}

h1, h2, h3 {
  margin-bottom: var(--spacing-5);
}

h2, h3, .section__title h2, .section__title h3, .section__text + .section__text h2:first-child, .section__text + .section__text h3:first-child {
  margin-top: var(--spacing-7);
}

.section__text h1:last-child, .section__text h2:last-child, .section__text h3:last-child, .section__text h4:last-child {
  margin-bottom: 0;
}

h2, .typography--h2, h3, .typography--h3 {
  font-size: var(--font-size-3);
  font-weight: 500;
}

h4, .typography--h4 {
  font-size: var(--font-size-standard);
  line-height: var(--line-height-1);
  font-weight: 600;
}

h4, .section__title h4, .section__text + .section__text h4:first-child {
  margin-top: var(--spacing-7);
}

.typography--copy {
  font-size: var(--font-size-standard);
}

.typography--small {
  font-size: var(--font-size-2);
}

a {
  color: var(--brand-black);
  text-decoration: none;
}

a.full {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  text-indent: -30000px;
  z-index: 10;
  text-decoration: none;
  text-align: left;
}

a.full > span {
  position: absolute;
  height: 1px;
  width: 1px;
  clip: rect(1px,1px,1px,1px);
  border: 0;
  overflow: hidden;
}

a.full::before, a.full::after {
  display: none;
}

section p a:not(.full), section li a:not(.full), label a {
  text-decoration: underline;
  position: relative;
  -webkit-transition: var(--transition-1);
  -o-transition: var(--transition-1);
  transition: var(--transition-1);
}

.no-touchevents p a:not(.full):hover, .no-touchevents li a:not(.full):hover, .no-touchevents label a:hover {
  opacity: var(--opacity);
}

p, main ul, main ol, address {
  margin: 0 0 var(--spacing-4);
}

.typography--small p, main .typography--small ul, main .typography--small ol, .typography--small address {
  margin-bottom: var(--spacing-3);
}

main li + li {
  margin-top: calc(var(--spacing-3) - 4px);
}

main .typography--small li + li {
  margin-top: var(--spacing-2);
}

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

b, strong {
  font-weight: bold;
}

main p + ul {
  margin-top: var(--spacing-3);
}

main .typography--small p + ul {
  margin-top: var(--spacing-1);
}

main ul li {
  position: relative;
  padding-left: 18px;
}

main ul li::before {
  content: "";
  position: absolute;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: var(--brand-black);
  border-radius: 50%;
}

main .section--color ul li::before {
  background-color: var(--brand-white);
}

main ol {
  list-style: none;
  padding-left: 0;
  counter-reset: my-counter;
}

main ol li {
  position: relative;
  counter-increment: my-counter;
  padding-left: 24px;
}

main ol li::before {
  position: absolute;
  left: 0;
  content: counter(my-counter) ".";
}

main .typography--small ul li {
  padding-left: 16px;
}

main .typography--small ul li::before {
  top: 11px;
  width: 5px;
  height: 5px;
}

main .typography--small ol li {
  padding-left: 22px;
}

strong, b {
  font-weight: 600;
  font-style: italic;
}

address strong, address b {
  font-style: normal;
}

span[class$="--hide-text"], span.hide-text {
  position: absolute;
  height: 1px;
  width: 1px;
  clip: rect(1px,1px,1px,1px);
  border: 0;
  overflow: hidden;
}

h1, h2, h3, h4, main p, main ul, main ol, main a, main span {
  max-width: var(--width-content-normal);
}

.section--fullwidth h1, .section--fullwidth h2, .section--fullwidth h3, .section--fullwidth h4, main .section--fullwidth p, main .section--fullwidth ul, main .section--fullwidth a, main .section--fullwidth span {
  max-width: 100%;
}

.section--color {
  background-color: var(--brand-color);
}

.section--color, .section--color a {
  color: var(--brand-white);
}


/* Visually hidden */
a.visually-hidden:not(.skip-link):focus-visible, a.visually-hidden:not(.skip-link):focus {
  position: static !important;
  display: block;
  overflow: visible;
  clip: auto;
  height: auto;
  width: auto;
  margin: var(--spacing-0) 0;
  text-decoration: underline;
}

a.skip-link:focus-visible, a.skip-link:focus {
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
  z-index: 10000;
  font-size: var(--font-size-1);
  font-weight: 500;
  color: var(--brand-black);
  padding: 5px 12px;
  outline: 2px solid !important;
}


/* Focus visible */
a:focus-visible, button:focus-visible {
  outline: 2px solid !important;
  -webkit-transition: unset !important;
  -o-transition: unset !important;
  transition: unset !important;
}


/* Focus visible form */
input:focus-visible, textarea:focus-visible, select:focus-visible, .select2-container--focus span.select2-selection__rendered {
  outline: 2px solid !important;
  -webkit-transition: unset !important;
  -o-transition: unset !important;
  transition: unset !important;
}



/* ------------------------------ */
/* ----------- Layout ----------- */
/* ------------------------------ */

.section {
  position: relative;
}

.section:not(.section--color) {
  margin-top: calc(var(--spacing-11) / 2);
  padding-top: calc(var(--spacing-11) / 2);
}

.section:first-child, .section.section--color:first-child, .section.section--color + .section.section--color {
  margin-top: 0;
}

.section:last-child:not(.section--color) > div:last-child {
  padding-bottom: var(--spacing-11);
}

.section.section--color:last-child > div:last-child {
  padding-bottom: calc(var(--spacing-11) + var(--spacing-1));
}

.section.section--small-gap {
  margin-top: calc(var(--spacing-10) / 2);
  padding-top: calc(var(--spacing-10) / 2);
}


/* Color */
.section.section--color {
  margin-top: var(--spacing-11);
  padding-top: var(--spacing-10);
  padding-bottom: calc(var(--spacing-10) + var(--spacing-2));
}

.section.section--color:last-child {
  padding-bottom: 0;
}

.section.section--color .section__teaser_below--white:last-child {
  margin-bottom: calc(-1 * (var(--spacing-10) + var(--spacing-2)));
}

.section.section--color:last-child .section__teaser_below--white:last-child {
  margin-bottom: 0;
}

.inside {
  margin-right: auto;
  margin-left: auto;
  max-width: calc(1920px + var(--spacing-6) * 2);
}

.inside--big {
  max-width: calc(2020px + var(--spacing-11) + var(--spacing-6) * 2);
}

.section > div, .section__row > .row > div > div {
  margin-top: calc(var(--spacing-11) / 4);
  padding-top: calc(var(--spacing-11) / 4);
}

.section > div:first-child, .section__row > .row > div > div:first-child {
  margin-top: 0;
  padding-top: 0;
}

.section__row > .row > div > div:last-child {
  padding-bottom: 0;
}

.align--center {
  margin-right: auto;
  margin-left: auto;
}

.width--small {
  max-width: var(--width-content-small);
}

.width--normal {
  max-width: var(--width-content-normal);
}

.width--big {
  max-width: var(--width-content-big);
}


/* ------------------------------ */
/* ------------ Media ----------- */
/* ------------------------------ */

/* Images */
.picture_container {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
}

.picture_container--cover img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.picture_container--cover, .picture_container--cover picture {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 413.98px) {

  .picture_container:not(.picture_container--cover) img {
    width: 100%;
  }

}


/* LazyLoad */
img[data-lazy-src] {
  opacity: 0;
}

img.lazyloaded {
  -webkit-transition: opacity .5s linear 0.25s;
  -moz-transition: opacity .5s linear 0.25s;
  transition: opacity .5s linear 0.25s;
  opacity: 1;
}


/* Videos */
.video_container {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
}

.video_container--embed {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.video_container--embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video_container--cover iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.video_container--cover video {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Video thumbs */
.video_container--cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}


/* iFrames */
.iframe_container {
  position: relative;
  overflow: hidden;
}

.iframe_container iframe {
  max-width: 100%;
}



/* Datenschutz */
.page-id-21 h2, .page-id-21 h3, .page-id-23 h2, .page-id-23 h3,
.page-id-540 h2, .page-id-540 h3, .page-id-541 h2, .page-id-541 h3 {
  font-size: var(--font-size-2-5);
}

.page-id-21 h2, .page-id-21 h3,
.page-id-540 h2, .page-id-540 h3 {
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-1);
}

.page-id-21 h2:first-child, .page-id-21 h3:first-child,
.page-id-540 h2:first-child, .page-id-540 h3:first-child {
  margin-top: 0;
}

.page-id-21 address,
.page-id-540 address {
  margin-bottom: var(--spacing-3);
}

.page-id-21 .section > .section__text + .section__address,
.page-id-540 .section > .section__text + .section__address {
  padding-top: 0;
  margin-top: var(--spacing-1);
}

.page-id-23 .section > .section__text + .section__address,
.page-id-541 .section > .section__text + .section__address {
  padding-top: var(--spacing-3);
}

.page-id-23 .section > .section__text + .section__address, .page-id-21 .section > .section__address + .section__address, .page-id-23 .section > .section__address + .section__address,
.page-id-541 .section > .section__text + .section__address, .page-id-540 .section > .section__address + .section__address, .page-id-541 .section > .section__address + .section__address {
  margin-top: 0;
}



/* ------------------------------ */
/* ------------ Title ----------- */
/* ------------------------------ */

.section__title {
  padding-top: 0 !important;
}

.section__title + div {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.section__title + .section__title {
  padding-top: var(--spacing-5) !important;
}



/* ------------------------------ */
/* ------------ Icon ------------ */
/* ------------------------------ */

.section:not(.section--color) .icon:not(.icon--white), .cookie_box .icon {
  fill: var(--brand-black);
  stroke: var(--brand-black);
}

.icon.icon--white, .section--color .icon:not(.icon--white) {
  fill: var(--brand-white);
  stroke: var(--brand-white);
}

.icon--arrow {
  width: 47px;
  height: 9px;
  stroke-width: .35;
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 992px) {

  /* Position */
  .picture_container--left:not(.picture_container--top):not(.picture_container--bottom) img {
    -o-object-position: left center;
      object-position: left center;
  }

  .picture_container--left.picture_container--top img {
    -o-object-position: left top;
    object-position: left top;
  }

  .picture_container--left.picture_container--bottom img {
    -o-object-position: left bottom;
    object-position: left bottom;
  }

  .picture_container--right:not(.picture_container--top):not(.picture_container--bottom) img {
    -o-object-position: right center;
      object-position: right center;
  }

  .picture_container--right.picture_container--top img {
    -o-object-position: right top;
    object-position: right top;
  }

  .picture_container--right.picture_container--bottom img {
    -o-object-position: right bottom;
    object-position: right bottom;
  }

}


@media all and (min-width: 1400px) {

  .inside:not(.inside--small) {
    padding-right: var(--spacing-6);
    padding-left: var(--spacing-6);
  }

}


@media all and (min-width: 1600px) {

  main ul li::before {
    top: 14px
  }

}


@media all and (min-width: 1900px) {

  .inside--small {
    padding-right: calc(var(--spacing-6) + var(--spacing-11));
    padding-left: calc(var(--spacing-6) + var(--spacing-11));
  }

}


@media all and (max-width: 1899.98px) and (min-width: 1600px) {

  :root {
    --spacing-11: 180px;
  }

  .inside--small {
    padding-right: calc(var(--spacing-6) + var(--spacing-10));
    padding-left: calc(var(--spacing-6) + var(--spacing-10));
  }

}


@media all and (max-width: 1599.98px) and (min-width: 1400px) {

  :root {
    --font-size-5: 68px;
    --font-size-4: 48px;
    --font-size-3: 40px;
    --font-size-2-5: 32px;
    --font-size-standard: 21px;

    --spacing-11: 160px;
    --spacing-10: 100px;
    --spacing-9: 90px;
    --spacing-8: 80px;
    --spacing-7: 60px;
    --spacing-6: 46px;
    --spacing-5: 38px;

    --height-header: 124px;
  }

  .inside--small {
    padding-right: calc(var(--spacing-6) + var(--spacing-8));
    padding-left: calc(var(--spacing-6) + var(--spacing-8));
  }

  h2, h3 {
    margin-bottom: var(--spacing-4);
  }

  main ul li::before {
    top: 12px
  }

}


@media all and (max-width: 1399.98px) and (min-width: 1240px) {

  .inside:not(.inside--small), .inside--small {
    padding-right: var(--spacing-7);
    padding-left: var(--spacing-7);
  }

  main ul li::before {
    top: 12px
  }

}


@media all and (max-width: 1399.98px) and (min-width: 992px) {

  :root {
    --font-size-5: 64px;
    --font-size-4: 44px;
    --font-size-3: 38px;
    --font-size-2-5: 30px;
    --font-size-2: 17px;
    --font-size-standard: 20px;

    --spacing-11: 140px;
    --spacing-10: 90px;
    --spacing-9: 80px;
    --spacing-8: 70px;
    --spacing-7: 50px;
    --spacing-6: 40px;
    --spacing-5: 30px;
    --spacing-4: 26px;

    --height-header: 106px;
  }

  h2, h3 {
    margin-bottom: var(--spacing-4);
  }

  main .typography--small ul li::before {
    top: 10px;
  }

}


@media all and (max-width: 1239.98px) and (min-width: 992px) {  

  :root {
    --spacing-11: 120px;
  }

  .inside:not(.inside--small), .inside--small {
    padding-right: var(--spacing-6);
    padding-left: var(--spacing-6);
  }

  main ul li::before {
    top: 11px
  }

  .section.section--color:first-child {
    padding-top: var(--spacing-9);
  }

}


@media all and (max-width: 991.98px) {

  .inside:not(.inside--small), .inside--small {
    padding-right: var(--spacing-5);
    padding-left: var(--spacing-5);
  }

  header.header--cover + main .section:first-child {
    padding-top: var(--spacing-7);
  }

  .section.section--small-gap {
    margin-top: calc(var(--spacing-9) / 2);
    padding-top: calc(var(--spacing-9) / 2);
  }

}


@media all and (max-width: 991.98px) and (min-width: 768px) {

  :root {
    /* Font Styling */
    --font-size-5: 60px;
    --font-size-4: 45px;
    --font-size-3: 35px;
    --font-size-2-5: 30px;
    --font-size-2: 17px;
    --font-size-1: 15px;
    --font-size-standard: 20px;


    /* Spacing */
    --spacing-11: 90px;
    --spacing-10: 90px;
    --spacing-9: 80px;
    --spacing-8: 70px;
    --spacing-7: 60px;
    --spacing-6: 40px;
    --spacing-5: 30px;
    --spacing-4: 20px;
    --spacing-3: 15px;

    /* Layout */
    --height-header: 105px;
  }

  main ul li::before {
    top: 11px
  }  

}


@media all and (max-width: 819.98px) {

  .width--small {
    max-width: var(--width-content-normal);
  }

}


@media all and (max-width: 767.98px) {

  :root {
    /* Font Styling */
    --font-size-5: 45px;
    --font-size-4: 40px;
    --font-size-3: 25px;
    --font-size-2-5: 25px;
    --font-size-2: 16px;
    --font-size-1: 14px;
    --font-size-standard: 18px;


    /* Spacing */
    --spacing-11: 70px;
    --spacing-10: 80px;
    --spacing-9: 60px;
    --spacing-8: 50px;
    --spacing-7: 40px;
    --spacing-6: 30px;
    --spacing-5: 25px;
    --spacing-4: 20px;
    --spacing-3: 15px;

    /* Layout */
    --height-header: 100px;
  }

  h1 br, h2 br, h3 br {
    display: none;
  }

  h2, h3 {
    margin-bottom: var(--spacing-4);
  }

  main ul li {
    padding-left: 17px;
  }

  main li + li {
    margin-top: var(--spacing-3);
  }

  main ul li::before {
    top: 11px;
    width: 5px;
    height: 5px;
  }

  main .typography--small ul li {
    padding-left: 13px;
  }

  main .typography--small ul li::before {
    top: 10px;
    width: 4px;
    height: 4px;
  }

}


@media all and (max-width: 374.98px) {


  :root {
    /* Font Styling */
    --font-size-5: 42px;
    --font-size-4: 38px;
  }


}