html, body {
  width: 100%;
  overflow-x: hidden;
}
body {
  font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 28px;
  letter-spacing: 0px;
  color: #131F24;
  background-color: #F4F4F4;
}

hr.brand {
  border: 0px;
  border-top: 2px solid #008c98;
}

a,
a:link,
a:hover,
a:visited { color: inherit; }

a.noStyle,
a.noStyle:link,
a.noStyle:hover,
a.noStyle:visited { text-decoration: none; }

/* FONT STYLES 
======================================================== */

h1, h2, h3, h4, h5 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.2px;	
  color: #131F24;
}

h1, h2 { font-size: 32px; line-height: 34px; font-weight: 800; text-transform: uppercase;}
h3 { font-size: 24px; line-height: 28px; font-weight: 700; color: #00AFD7; text-transform: uppercase;}
h4 { font-size: 21px; line-height: 24px; font-weight: 700; }
h5 { font-size: 19px; line-height: 11px; font-weight: 700; }

h1 small, h2 small, h3 small { font-family: 'Special Elite', sans-serif; font-weight: 400; color: #A92E62; display: block; letter-spacing: 0px;  text-transform: none;}
h4 small, h5 small { font-weight: 300; display: block; letter-spacing: 0px; }
h1 small, h2 small { font-size: 24px; line-height: 28px; padding-bottom: 8px; font-weight: 300;}
h3 small { font-size: 21px; line-height: 24px;  }
h4 small { font-size: 19px; line-height: 21px;  }
h5 small { font-size: 17px; line-height: 19px; }





.pointbadge {
  font-size: 18px; 
  padding: 8px 24px; 
  width: auto;
  display: inline; float: right; 
  font-weight: 600;
  border-radius: 32px;
}

span.pointbadge {
  font-size: 14px; 
  padding: 2px 8px; 
  border-radius: 6px;

}


p {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 28px;
  letter-spacing: 0px;
  color: #3B404A;
}

p small {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
}


.labelText { font-size: 12px; line-height: 16px; font-weight: 300;}

.striked {
  text-decoration: line-through;
}

.editModalOpener,
.pointer { cursor: pointer; }

/* COLORS STYLES 
======================================================== */

.bgBrand { background-color: #00AFD7; }
.bgBrandDark { background-color: #3F888F; }
.bgBrandLight { background-color: #A4D7EB; }
.bgBrandSuperLight { background-color: #E2F1F8; }

.bgBrandInverted { background-color: #A92E62; } /* Die haben wir zusammengeführt - waren zu ähnlich ... wer macht sowas? */
.bgDark { background-color: #131F24; }
.bgDarkLighter { background-color: #1A3944; }
.bgGrey { background-color: #4B4D46; }
.bgLightGrey { background-color: #F4F4F4; }
.bgWhite { background-color: #FFFFFF; }

.cBrand { color: #00AFD7 !important; }
.cBrandDark { color: #3F888F;}
.cBrandLight { color: #A4D7EB;}
.cBrandSuperLight { color: #E2F1F8A4D7EB;}

.cBrandInverted { color: #A92E62 !important; } /* Die haben wir zusammengeführt - waren zu ähnlich ... wer macht sowas? */
.cDark { color: #131F24; }
.cDarkLighter { color: #1A3944; }
.cGrey { color: #4B4D46; }
.cLightGrey { color: #F4F4F4; }
.cWhite { color: #FFFFFF; }


.shadowLight { box-shadow: 0px 2px 12px 4px rgba(0,0,0,0.05); }
.shadow { box-shadow: 0px 2px 12px 4px rgba(0,0,0,0.25); }




/* GAP STYLES 
======================================================== */

.ugp4 { margin-top: 4px; }
.ugp8 { margin-top: 8px; }
.ugp16 { margin-top: 16px; }
.ugp24 { margin-top: 24px; }
.ugp32 { margin-top: 32px; }
.ugp40 { margin-top: 40px; }
.ugp48 { margin-top: 48px; }
.ugp56 { margin-top: 56px; }
.ugp64 { margin-top: 64px; }
.ugp80 { margin-top: 80px; }
.ugp88 { margin-top: 88px; }
.ugp96 { margin-top: 96px; }
.ugp128 { margin-top: 128px; }
.ugp256 { margin-top: 256px; }

.bgp0{ margin-bottom: 0px; }
.bgp12 { margin-bottom: 12px; }
.bgp16 { margin-bottom: 16px; }
.bgp32 { margin-bottom: 32px; }
.bgp40{ margin-bottom: 40px; }
.bgp48{ margin-bottom: 48px; }
.bgp56{ margin-bottom: 56px; }
.bgp80{ margin-bottom: 80px; }
.bgp120{ margin-bottom: 120px; }


.inGap8 { padding: 8px; }
.inGap12 { padding: 12px; }
.inGap16 { padding: 16px; }
.inGap24 { padding: 24px; }

.leftGap4 { margin-left: 4px;}
.leftGap8 { margin-left: 8px;}

/* BUTTONS
==================================== */
.btnRounded {
  border-radius: 50px !important;
}

.btn,
.btn a,
.btn a:link,
.btn a:visited,
.btn a:hover {
  padding: 12px 24px;
  line-height: 21px;
  padding-bottom: 14px;
  border-radius: 50px !important;
  text-decoration: none;
  color: inherit;
  font-size: 18px;
  font-weight: 400;
}

.btnSmall,
.btnSmall a,
.btnSmall a:link,
.btnSmall a:visited,
.btnSmall a:hover,
a.btnSmall,
a.btnSmall:link,
a.btnSmall:visited,
a.btnSmall:hover {
  padding: 6px 16px !important; 
  line-height: 26px;
  padding-bottom: 8px;
  font-size: 16px;
  font-weight: 400;
}

.btnXS,
.btnXS a,
.btnXS a:link,
.btnXS a:visited,
.btnXS a:hover {
  padding: 6px 10px;
  line-height: 16px;
  padding-bottom: 6px;
  font-size: 14px;
  font-weight: 400;
}




.btnBrand,
.btnBrand a,
.btnBrand a:link,
.btnBrand a:visited,
.btnBrand a:hover {
  border: 1px solid #00AFD7;
  color: #FFFFFF;
  background-color: #00AFD7;
}


.btnWhite,
.btnWhite a,
.btnWhite a:link,
.btnWhite a:visited,
.btnWhite a:hover {
  border: 1px solid #FFFFFF;
  color: #00AFD7;
  background-color: #FFFFFF;
}


.btnBrandInverted,
.btnBrandInverted a,
.btnBrandInverted a:link,
.btnBrandInverted a:visited,
.btnBrandInverted a:hover {
  border: 1px solid #A92E62;
  color: #FFFFFF;
  background-color: #A92E62;
}


.btnBrandInvertedGhost,
 a.btnBrandInvertedGhost,
 a.btnBrandInvertedGhost:link,
 a.btnBrandInvertedGhost:hover,
 a.btnBrandInvertedGhost:visited,
.btnBrandInvertedGhost a,
.btnBrandInvertedGhost a:link,
.btnBrandInvertedGhost a:visited,
.btnBrandInvertedGhost a:hover {
  border: 1px solid #A92E62;
  color: #A92E62;
  background-color: transparent;
}

.btnBrandGhost,
.btnBrandGhost a,
.btnBrandGhost a:link,
.btnBrandGhost a:visited,
.btnBrandGhost a:hover {
  border: 1px solid #00AFD7;
  color: #00AFD7;
  background-color: transparent;
}


.btnBrandGhost a:hover {
  border: 1px solid #00AFD7;
  color: #00AFD7;
  background-color: transparent;
}

.btnDarkGhost,
.btnDarkGhost a,
.btnDarkGhost a:link,
.btnDarkGhost a:visited,
.btnDarkGhost a:hover {
  border: 1px solid #131F24;
  color: #131F24;
  background-color: transparent;
}

/* HEADER / NAVIGATION
======================================================== */

.site-header-shell {
  position: relative;
  z-index: 20;
  padding-top: 0;
}

.site-header-top {
  position: relative;
  z-index: 3;
}

.site-header-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 20px 0;
  min-width: 0;
}

.site-brand {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  max-width: 640px;
  padding-top: 0px;
  padding-bottom: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

#pageLogo {
  display: block;
  width: auto;
  max-width: 210px;
  height: auto;
}

.site-brand-title {
  font-size: 18px;
  line-height: 22px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #131F24;
}

.site-brand-claim {
  font-size: 16px;
  line-height: 22px;
  color: #1A3944;
}

.site-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.site-navigation-wrap {
  position: relative;
  z-index: 3;
  color: #131F24;
}

.site-navigation-shape {
  position: relative;
  z-index: 3;
}

.site-navigation-wrap > .container {
  position: relative;
  z-index: 3;
}

.site-navigation-bar {
  position: relative;
  overflow: visible;
  border-radius: 0;
  padding: 16px 24px 24px;
  background-color: #FFFFFF;
}

.site-navigation-curve {
  position: relative;
  z-index: 1;
  margin-top: -1px;
  color: #FFFFFF;
}

.site-navigation-curve svg {
  display: block;
  width: 100%;
  height: 46px;
  filter: drop-shadow(0px 8px 5px rgba(0, 0, 0, 0.12));
}
.sg-menu-toggle {
  margin-top: 12px;
  margin-right: -24px;
}


.sg-offcanvas-list {
  margin-left: 24px;
  margin-right: 24px;
}

.site-header-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  height: 680px;
  overflow: hidden;
  pointer-events: none;
}

.site-header-image img {
  display: block;
  width: 100%;
  height: 680px;
  object-fit: cover;
  object-position: center center;
}

.site-header-image-wave {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: auto !important;
  object-fit: contain;
  object-position: bottom center;
  margin-bottom: -80px;
  transform: translateX(-50%) scaleX(1.02);
  transform-origin: center bottom;
}

.site-navigation-inner {
  position: relative;
  z-index: 2;
}

.site-main-content {
  position: relative;
  z-index: 10;
  margin-top: 540px;
  background-color: #F4F4F4;
}

.site-main-content.shortHead {
  margin-top: 96px;
}

.blog-item-imagesmall figure,
.blog-item-imagesmall a,
.blog-item-imagesmall img,
.blog-item-image figure,
.blog-item-image a,
.blog-item-image img {
  display: block;
  width: 100%;
}

.blog-item-imagesmall figcaption,
.blog-item-image figcaption {
  display: none;
}

.blog-item-image-stack {
  position: relative;
}

.blog-item-imagesmallfigure,
.blog-item-imagesmall a,
.blog-item-image figure,
.blog-item-image a {
  overflow: hidden;
}

.blog-item-image figure img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center center;
}

.blog-item-imagesmall figure img {
  width: 100%;
  height: 144px !important;
  object-fit: cover;
  object-position: center center;
}

.blog-item-image-border {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
}

.article-intro-image-stack {
  position: relative;
}

.articleImage {
  display: block;
  margin-top: 32px;
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center center;
}

.article-intro-image-border {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.article-intro-image-border-top {
   position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  transform: scaleY(-1);
  width: 100%;
  height: auto;
  pointer-events: none;
}


.site-navigation .mod-menu,
.site-navigation-wrap .mod-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-navigation .mod-menu > li > a,
.site-navigation .mod-menu > li > button,
.site-navigation-wrap .mod-menu > li > a,
.site-navigation-wrap .mod-menu > li > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #131F24;
}

.site-navigation .mod-menu > li.current > a,
.site-navigation .mod-menu > li.active > a,
.site-navigation-wrap .mod-menu > li.current > a,
.site-navigation-wrap .mod-menu > li.active > a {
  color: #3F888F;
}

.mod-breadcrumbs {
  padding-left: 0px;
  margin-left: -16px;
}

.footer-top-image {
	width: 100%;
	height: 180px; /* gewünschte sichtbare Höhe */
	object-fit: cover;
	object-position: right center;
	display: block;
  transform: scaleX(1.02);

}


ul.footermenu {
  margin: 0px; padding: 0px;
  list-style: none;
  padding-bottom: 56px;
  margin-top: 56px;
}

ul.footermenu li { font-size: 100%; }

ul.footermenu li a,
ul.footermenu li a:link,
ul.footermenu li a:hover,
ul.footermenu li a:visited { 
  display: block;
  width: 100%;
  color: #FFFFFF;
  text-decoration: none;
  margin-top: 16px;
  font-weight: 300;
}


@media (max-width: 991.98px) {
  .site-header-top-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    gap: 12px;
  }

  .site-header-actions {
    justify-content: flex-end;
    flex: 0 0 auto;
  }

  .site-brand {
    max-width: calc(100% - 64px);
    padding-top: 8px;
    padding-bottom: 8px;
  }

  #pageLogo {
    max-width: 180px;
  }

  .site-navigation-bar {
    padding: 14px 16px 16px;
    border-radius: 0;
  }

  .site-navigation-curve svg {
    height: 38px;
  }

  .site-header-image {
    height: 720px;
  }

  .site-header-image img {
    height: 720px;
  }

  .site-main-content {
    margin-top: 720px;
  }
}

@media (max-width: 575.98px) {

  h1, h2 { font-size: 25px; line-height: 29px; }
  h3 { font-size: 21px; line-height: 24px; }
  h4 { font-size: 19px; line-height: 21px; }
  h5 { font-size: 17px; line-height: 19px; }

  h1 small, h2 small { font-size: 21px; line-height: 24px; }
  h3 small { font-size: 19px; line-height: 24px;  }
  h4 small { font-size: 14px; line-height: 18px;  }
  h5 small { font-size: 14px; line-height: 18px; }


  body, p {
    font-size: 17px;
    line-height: 21px;
    letter-spacing: 1.1px;
   }

  .site-header-shell {
    padding-top: 0;
  }

  .site-header-top-inner {
    gap: 12px;
  }

  .site-brand {
    max-width: calc(100% - 60px);
  }

  .site-brand-title {
    font-size: 16px;
    line-height: 20px;
  }

  .site-brand-claim {
    font-size: 14px;
    line-height: 20px;
  }

  .site-navigation-curve svg {
    height: 32px;
  }

  .site-header-image {
    height: 540px;
  }

  .site-header-image img {
    height: 540px;
  }

  .site-header-image-wave {
  margin-bottom: -2px;
}


  .site-main-content {
    margin-top: 460px;
  }
 
  .site-main-content.shortHead {
   margin-top: 88px;
  } 

  .articleImage {
    height: 240px;
  }

  .footer-top-image {
		  height: 120px; 
  }

}