.bg-blue {
  background-color: var(--color-primary)
}

.bg-darkblue {
  background-color: #005d89
}

.bg-nightblue {
  background-color: #022945
}

.bg-lightskyblue {
  background-color: #afdff9
}

.bg-skyblue {
  background-color: #78b7e5
}

.bg-orange {
  background-color: #ef7900
}

.bg-brown {
  background-color: #575757;
  background-color: #faf8f8;
  background-color: #fcf7f7
}

.text-blue {
  color: var(--color-primary)
}

.text-darkblue {
  color: #005d89
}

.text-nightblue {
  color: #022945
}

.text-lightskyblue {
  color: #afdff9
}

.text-skyblue {
  color: #78b7e5
}

.text-orange {
  color: #ef7900
}

.text-brown {
  color: #575757
}

.text-white {
  color: #faf8f8
}

.text-light {
  color: #fcf7f7
}

html {
  background-color: #022945
}

body {
  background-color: #fff;
  font-family: Gotham Narrow Book,Arial,Helvetica,Verdana,sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-size: 18px
}

::-moz-selection {
  background-color: #022945;
  color: #fff
}

::selection {
  background-color: #022945;
  color: #fff
}

@font-face {
  font-family: Gotham Narrow Book;
  src: url(../fonts/GothamNarrow-Book.woff) format("woff"),url(../fonts/GothamNarrow-Book.otf) format("otf"),url(../fonts/GothamNarrow-Book.ttf) format("truetype");
  font-display: swap
}

@font-face {
  font-family: Gotham Narrow Medium;
  src: url(../fonts/GothamNarrow-Medium.woff) format("woff"),url(../fonts/GothamNarrow-Medium.otf) format("otf"),url(../fonts/GothamNarrow-Medium.ttf) format("truetype");
  font-display: swap
}

@font-face {
  font-family: Gotham Narrow Bold;
  src: url(../fonts/GothamNarrow-Bold.woff) format("woff"),url(../fonts/GothamNarrow-Bold.otf) format("otf"),url(../fonts/GothamNarrow-Bold.ttf) format("truetype");
  font-display: swap
}

a, label, p, span, strong {
  font-size: 14px;
  color: #575757;
  margin-bottom: 0;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto
}

@media only screen and (min-width:36em) {
  a, label, p, span, strong {
    font-size: inherit;
  }
}

@media only screen and (min-width:62em) {
  a, label, p, span, strong {
    font-size: inherit;
  }
}

.text-link {
  text-decoration: underline
}

h1, h2, h3, h4, h5, h6 {
  font-family: Georgia,Times New Roman,Times,serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  color: var(--color-primary)
}

h1 {
  font-size: 20px
}

@media only screen and (min-width:36em) {
  h1 {
    font-size: 27px
  }
}

@media only screen and (min-width:62em) {
  h1 {
    font-size: 40px
  }
}

@media only screen and (min-width:93.75em) {
  h1 {
    font-size: 50px
  }
}

h2 {
  font-size: 18px
}

@media only screen and (min-width:36em) {
  h2 {
    font-size: 26px
  }
}

@media only screen and (min-width:62em) {
  h2 {
    font-size: 38px
  }
}

strong {
  font-family: Gotham Narrow Bold,Arial,Helvetica,Verdana,sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased
}

.btn {
  text-transform: uppercase;
  font-size: 14px;
  padding: 6px 24px
}

@media only screen and (min-width:36em) {
  .btn {
    font-size: 17px;
    padding: 8px 24px
  }
}

@media only screen and (min-width:62em) {
  .btn {
    padding: 10px 32px;
    font-size: 22px;
    border-radius: 20px
  }
}

@media only screen and (min-width:93.75em) {
  .btn {
    padding: 12px 48px
  }
}

.toTopBtn {
  display: none;
  position: fixed;
  bottom: 40px;
  right: 5px;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  background-color: #afdff9;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

@media only screen and (min-width:36em) {
  .toTopBtn {
    height: 39px;
    width: 39px;
    right: 20px
  }
}

@media only screen and (min-width:48em) {
  .toTopBtn {
    right: 25px
  }
}

@media only screen and (min-width:93.75em) {
  .toTopBtn {
    height: 45px;
    width: 45px;
    right: 40px
  }
}

.navbar {
  height: 63px;
  z-index: 10
}

@media only screen and (min-width:62em) {
  .navbar {
    height: 88px
  }
}

.navbar .navbar-toggler {
  border: none
}

.navbar .navbar-nav .nav-link {
  text-transform: uppercase;
  padding-right: .75rem;
  padding-left: .75rem;
  font-size: 16px;
  color: #faf8f8
}

@media only screen and (min-width:62em) {
  .navbar .navbar-nav .nav-link {
    font-size: 20px
  }
}

.navbar .navbar-nav .nav-link.active, .navbar .navbar-nav .nav-link:active, .navbar .navbar-nav .nav-link:focus, .navbar .navbar-nav .nav-link:hover {
  color: #faf8f8
}

.navbar .navbar-collapse {
  padding: 16px;
  background-color: #022945
}

.hero {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  height: 250px; /* 250px auf Handy in Portrait-Modus */
  /*
   * gleiche Breite wie der Textköper darunter
   */
  max-width: 1360px;
  background-size: contain;
  background-position: center 65px; /* KAM-144 von "70% 90%" zu "center 65px" geändert */
  overflow: hidden;
  margin-left: auto; /* KAM-144 neu */
  margin-right: auto; /* KAM-144 neu */
}

  .hero, .hero .bubble {
    background-repeat: no-repeat
  }

    .hero .bubble {
      position: absolute;
      top: 100px;
      width: 100%;
      height: 100%;
      background-size: 420%;
      background-position: 55% top;
      background-image: url(../images/bubble_mobile.svg)
    }

@media only screen and (min-width:36em) {
  .hero .bubble {
    background-image: url(../images/bubble_tablet.svg);
    background-size: 220%;
    background-position: 100% 0
  }
}

@media only screen and (min-width:48em) {
  .hero .bubble {
    top: 150px;
    background-size: 120%;
    background-position: 250% top
  }
}

@media only screen and (min-width:62em) {
  .hero .bubble {
    background-image: url(../images/bubble.svg);
    top: 15px;
    background-size: 140%;
    background-position: 190% top
  }
}

@media only screen and (min-width:75em) {
  .hero .bubble {
    background-size: 120%;
    background-position: 340% top
  }
}

.hero .content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 25px
}

@media only screen and (min-width:36em) {
  .hero .content {
    padding: 35px
  }
}

@media only screen and (min-width:62em) {
  .hero .content {
    padding: 40px
  }
}

@media only screen and (min-width:93.75em) {
  .hero .content {
    padding: 50px
  }
}

.hero .content .badge {
  position: absolute;
  top: -120px;
  left: 50px;
  border-radius: 50%;
  width: 125px;
  height: 125px;
  background-color: #ef7900;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transform: rotate(-13deg);
  -ms-transform: rotate(-13deg);
  transform: rotate(-13deg);
  font-size: 12px;
  line-height: 14px
}

  .hero .content .badge .number {
    font-size: 30px;
    line-height: 30px;
    margin-top: 4px
  }

  .hero .content .badge .number, .hero .content .badge strong {
    font-family: Gotham Narrow Bold,Arial,Helvetica,Verdana,sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased
  }

  .hero .content .badge strong {
    color: #fff
  }

@media only screen and (min-width:36em) {
  .hero .content .badge {
    top: -150px;
    left: 50px;
    width: 155px;
    height: 155px;
    font-size: 16px;
    line-height: 18px
  }

    .hero .content .badge .number {
      font-size: 35px;
      line-height: 35px
    }
}

@media only screen and (min-width:62em) {
  .hero .content .badge {
    top: -165px;
    left: 130px
  }
}

@media only screen and (min-width:93.75em) {
  .hero .content .badge {
    top: -140px;
    left: 480px;
    width: 180px;
    height: 180px;
    font-size: 18px;
    line-height: 20px
  }

    .hero .content .badge .number {
      font-size: 38px;
      line-height: 38px
    }
}

.hero .content .content-action {
  text-align: center
}

@media only screen and (min-width:36em) {
  .hero .content .content-action {
    text-align: left
  }
}

@media only screen and (min-width:36em) { /* Handy im Landscape-Modus */
  .hero {}
}

@media only screen and (min-width:48em) { /* Tablet Portrait */
  .hero {
    height: 496px;
  }
}

@media only screen and (min-width:1440px) {
    .hero {
      background-position-x: left;
    }
  }

.card-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  background-color: #fff;
  border: none;
  padding: 25px;
  height: 100%
}

@media only screen and (min-width:48em) {
  .card-icon {
    padding: 40px 120px
  }
}

@media only screen and (min-width:62em) {
  .card-icon {
    padding: 50px
  }
}

@media only screen and (min-width:93.75em) {
  .card-icon {
    padding: 50px 120px
  }
}

.card-icon img {
  height: 52px;
  width: auto
}

@media only screen and (min-width:36em) {
  .card-icon img {
    height: 68px
  }
}

.card-image {
  border: none;
  width: 100%;
  height: 254px
}

@media only screen and (min-width:48em) {
  .card-image {
    height: 270px
  }
}

@media only screen and (min-width:62em) {
  .card-image {
    height: 100%;
    min-height: 383px
  }
}

@media only screen and (min-width:93.75em) {
  .card-image {
    height: 100%;
    min-height: 420px
  }
}

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

video {
  border: 1px solid #707070;
  cursor: pointer
}

form .form-control {
  background-color: #faf8f8;
  border-color: #fcf7f7;
  border-radius: 8px;
  height: 30px;
  padding: 8px 12px;
  font-size: 14px
}

form .form-control[type="file"] {
  height: 42px;
}

form .form-control[type="file"]::file-selector-button {
  color: currentColor;
}

@media only screen and (min-width:36em) {
  form .form-control {
    height: 45px;
    padding: 12px;
    border-radius: 15px;
    font-size: 17px
  }

  form .form-control[type="file"] {
    height: 55px;
  }

}

@media only screen and (min-width:62em) {
  form .form-control {
    height: 38px
  }
}

form label {
  color: #fcf7f7
}

.wave {
  position: relative
}

  .wave:after {
    content: "";
    display: block;
    background-image: url(../images/footer_wave_mobile.svg);
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    width: 807px;
    height: 120px;
    -webkit-transform: translate(-6%,32px);
    -ms-transform: translate(-6%,32px);
    transform: translate(-6%,32px)
  }

@media only screen and (min-width:36em) {
  .wave:after {
    background-image: url(../images/footer_wave_tablet.svg);
    width: 1012px;
    -webkit-transform: translate(-4.5%,40px);
    -ms-transform: translate(-4.5%,40px);
    transform: translate(-4.5%,40px)
  }
}

@media only screen and (min-width:48em) {
  .wave:after {
    background-image: url(../images/footer_wave_desktop.svg);
    width: 120%;
    -webkit-transform: translate(-5%,78px);
    -ms-transform: translate(-5%,78px);
    transform: translate(-5%,78px)
  }
}

@media only screen and (min-width:75em) {
  .wave:after {
    width: 2190px;
    height: 194px
  }
}

@media only screen and (min-width:93.75em) {
  .wave:after {
    -webkit-transform: translate(-3%,95px);
    -ms-transform: translate(-3%,95px);
    transform: translate(-3%,95px)
  }
}

@media only screen and (min-width:121em) {
  .wave:after {
    display: none
  }
}

footer {
  position: relative
}

  footer .footer-logo {
    width: 135px;
    height: auto
  }

@media only screen and (min-width:36em) {
  footer .footer-logo {
    width: 177px
  }
}

@media only screen and (min-width:62em) {
  footer .footer-logo {
    width: 198px
  }
}

footer .footer-siegel-1 {
  height: 85px;
  width: auto
}

@media only screen and (min-width:36em) {
  footer .footer-siegel-1 {
    padding-right: 12px
  }
}

@media only screen and (min-width:62em) {
  footer .footer-siegel-1 {
    height: 116px;
    padding-right: 0
  }
}

footer .footer-siegel-2 {
  height: 76px;
  width: auto
}

@media only screen and (min-width:62em) {
  footer .footer-siegel-2 {
    height: 106px
  }
}

footer ul.asterisks {
  padding: 0;
  margin: 0
}

  footer ul.asterisks li {
    position: relative;
    list-style: none;
    padding-left: 20px;
    font-size: 12px;
    color: #575757;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto
  }

@media only screen and (min-width:36em) {
  footer ul.asterisks li {
    font-size: 14px
  }
}

footer ul.asterisks li:before {
  position: absolute;
  left: 0
}

footer ul.asterisks li:first-child:before {
  content: "*"
}

footer ul.asterisks li:nth-child(2):before {
  content: "**"
}

footer ul.asterisks li:nth-child(3):before {
  content: "***"
}

.box {
  position: relative;
  overflow: hidden
}

  .box .btn-link {
    position: absolute;
    right: 0;
    bottom: 8px;
    padding-right: 32px
  }

@media only screen and (min-width:62em) {
  .box .btn-link {
    right: 62px;
    bottom: 32px
  }
}

@media only screen and (min-width:93.75em) {
  .box .btn-link {
    right: 94px;
    font-size: 15px;
    line-height: 24px
  }
}

.box-watermark-icon svg {
  position: absolute;
  top: 5%;
  right: 0;
  width: 146px;
  height: 146px;
  max-height: 224px;
  -webkit-transform: translateX(30%);
  -ms-transform: translateX(30%);
  transform: translateX(30%)
}

@media only screen and (min-width:48em) {
  .box-watermark-icon svg {
    right: auto;
    left: 24px;
    width: 136px;
    height: 136px;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
  }
}

@media only screen and (min-width:62em) {
  .box-watermark-icon svg {
    left: 24px
  }
}

@media only screen and (min-width:93.75em) {
  .box-watermark-icon svg {
    left: 32px;
    width: 180px;
    height: 180px
  }
}

.box-watermark-icon--right svg {
  top: 0;
  position: absolute;
  top: 5%;
  right: 0;
  width: auto;
  height: 90%;
  max-height: 224px;
  -webkit-transform: translateX(30%);
  -ms-transform: translateX(30%);
  transform: translateX(30%);
  vertical-align: top;
  left: auto
}

@media only screen and (min-width:48em) {
  .box-watermark-icon--right svg {
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%)
  }
}

.box--blue {
  padding: 16px 4% 8px;
  min-height: 168px;
  background-color: #ecf8fe
}

@media only screen and (min-width:48em) {
  .box--blue {
    padding-top: 24px;
    padding-left: 184px;
    min-height: 152px
  }
}

@media only screen and (min-width:62em) {
  .box--blue {
    padding-top: 32px
  }
}

@media only screen and (min-width:93.75em) {
  .box--blue {
    padding-left: 272px;
    min-height: 208px
  }
}

.box--contact {
  position: relative;
  height: 100%;
  overflow: hidden;
  z-index: 10;
  margin: 0 auto;
  max-width: 1440px
}

  .box--contact:before {
    display: block;
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    background: #fff;
    z-index: 0
  }

  .box--contact .content {
    background-color: #fff;
    position: relative;
    width: 100%
  }

  .box--contact .content__inner {
    padding: 24px 20px 24px 0;
    width: 100%;
    background: #fff
  }

.box--bordered {
  position: relative;
  padding: 60px 25px 25px;
  min-height: 245px;
  background-color: #fff;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
  box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
  overflow: hidden
}

.box--badge {
  border-top: 3px solid var(--color-primary)
}

  .box--badge .badge {
    position: absolute;
    top: 0;
    left: 25px;
    padding: 5px 15px;
    background-color: var(--color-primary);
    border-radius: 0 0 4px 4px;
    color: #fff;
    font-size: .9375rem;
    text-transform: uppercase;
    z-index: 2;
    font-style: italic
  }

.box--media__backup {
  padding: 16px 16px 24px 0
}

@media only screen and (min-width:48em) {
  .box--media__backup {
    padding: 24px 24px 24px 0
  }
}

@media only screen and (min-width:62em) {
  .box--media__backup {
    padding: 32px 0
  }

    .box--media__backup:after {
      display: block;
      clear: both;
      content: ""
    }
}

.box--media__backup .content-wrapper {
  position: relative;
  padding-left: 20px
}

  .box--media__backup .content-wrapper h2 {
    font-size: 20px;
    line-height: 24px;
    margin: 0 0 16px
  }

@media only screen and (min-width:48em) {
  .box--media__backup .content-wrapper {
    padding-left: 24px
  }
}

@media only screen and (min-width:62em) {
  .box--media__backup .content-wrapper {
    position: static;
    float: right;
    padding: 0 62px 0 0;
    width: 340px
  }
}

@media only screen and (min-width:93.75em) {
  .box--media__backup .content-wrapper {
    float: right;
    padding-right: 94px;
    width: 532px
  }

    .box--media__backup .content-wrapper h2 {
      font-size: 32px;
      line-height: 44px
    }
}

.box--media__backup .media-wrapper {
  display: inline-block;
  margin-top: 8px;
  overflow: hidden;
  padding-right: 50px
}

  .box--media__backup .media-wrapper img {
    width: 100%
  }

@media only screen and (min-width:62em) {
  .box--media__backup .media-wrapper {
    float: left;
    margin-top: 0;
    max-width: 400px
  }
}

@media only screen and (min-width:75em) {
  .box--media__backup .media-wrapper {
    float: left;
    margin-top: 0;
    max-width: 500px
  }
}

.box--media {
  padding: 0
}

  .box--media .box__contentWrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-bottom: 30px
  }

@media only screen and (min-width:48em) {
  .box--media .box__contentWrapper {
    padding: 35px 0
  }
}

@media only screen and (min-width:62em) {
  .box--media .box__contentWrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
  }
}

.box--media .box__media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  position: relative
}

@media only screen and (min-width:62em) {
  .box--media .box__media {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }
}

.box--media .box__media .image__wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative
}

  .box--media .box__media .image__wrapper img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover
  }

  .box--media .box__media .image__wrapper .btn__playButton {
    z-index: 999
  }

.box--media .box__media .image__caption {
  position: absolute;
  left: 30px;
  height: 50%;
  bottom: 0;
  width: calc(50% - 30px);
  padding-right: 35px
}

  .box--media .box__media .image__caption span {
    color: #fff;
    background-color: #005d89;
    padding: 0 10px;
    white-space: break-spaces
  }

.box--media .box__media .image__caption--right {
  right: 0;
  left: auto;
  padding-left: 20px;
  padding-right: 0
}

  .box--media .box__media .image__caption--right span {
    text-align: right
  }

.box--media .box__textWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  padding: 15px
}

@media only screen and (min-width:48em) {
  .box--media .box__textWrapper {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%
  }
}

@media only screen and (min-width:62em) {
  .box--media .box__textWrapper {
    padding: 0 45px
  }
}

.box--media .box__textWrapper .link {
  position: relative
}

  .box--media .box__textWrapper .link .btn-link {
    padding-left: 0;
    right: auto;
    bottom: auto
  }