@charset "UTF-8";
html, body {
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: white;
  background-image: url(/assets/images/bg.svg);
  background-size: cover;
  background-repeat: repeat-y;
}

video {
  background-color: black;
}

.spacer-half {
  height: 0.25rem;
}

.spacer-1 {
  height: 0.5rem;
}

.spacer-2 {
  height: 1rem;
}

.spacer-3 {
  height: 1.5rem;
}

.spacer-5 {
  height: 2rem;
}

@media (min-width: 950px) {
  .spacer-half {
    height: 0.5rem;
  }
  .spacer-1 {
    height: 1rem;
  }
  .spacer-2 {
    height: 2rem;
  }
  .spacer-3 {
    height: 3rem;
  }
  .spacer-5 {
    height: 5rem;
  }
}
.hilfe h3 {
  margin-bottom: 1.5rem;
}

@media (min-width: 950px) {
  .hilfe h3 {
    margin-bottom: 3rem;
  }
}
.customer-partners a {
  text-align: center;
}

@media (min-width: 950px) {
  .customer-partners a {
    width: 33%;
  }
}
.customer-partner {
  height: 32px;
  width: auto;
  margin: 0.5em 1.5em;
}

@media (min-width: 950px) {
  .customer-partner {
    height: 48px;
    width: auto;
    margin: 1em 3em;
  }
  .customer-partner.smaller {
    height: 32px;
  }
}
.text-center {
  text-align: center;
}

.mode-icon {
  width: 96px;
  margin-right: 2em;
}

[data-lightbox] img {
  width: 100%;
}

.portrait {
  width: 128px;
  height: 128px;
  border-radius: 128px;
  filter: grayscale(1);
  margin-top: 3em;
  margin-left: 2em;
}

h1 {
  text-align: center;
}

.invert-colors {
  filter: invert(1);
}

.rating {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.rating .text {
  font-style: italic;
}

@media (min-width: 950px) {
  .rightborderlight {
    border-right: 2px solid #ccc;
  }
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/regular.woff2) format("woff2");
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/semibold.woff2) format("woff2");
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/bold.woff2) format("woff2");
}
h1, h2, h3, h4, h5, h6, p, a, label, input, textarea, li, em, span, small, strong, summary, details {
  color: #000000;
  font-family: "Source Sans Pro", sans-serif;
  line-height: 1.5em;
  overflow-wrap: break-word;
  hyphens: auto;
  white-space: normal;
}

input, textarea {
  color: #000000;
  font-size: 1.2rem;
}

li {
  color: #000000;
  font-size: 1.2rem;
  margin-left: 2em;
  line-height: 1.7em;
}

h1 {
  font-size: 2rem;
}

h1.larger {
  font-size: 2rem;
  text-align: left;
}

h2.larger {
  font-size: 2rem;
}

h3 {
  font-size: 1.2rem;
  padding-bottom: 0.6rem;
  padding-right: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 0.24rem solid #EFEFEF;
  font-weight: 700;
}

h4 {
  font-size: 1.2rem;
}

.quote {
  background-color: rgb(190.3846153846, 247.6153846154, 237.4615384615);
  padding: 3rem;
  font-style: italic;
  font-size: 1.5rem;
  margin: 1rem 0;
}

.author {
  margin-top: 0.5rem;
  text-align: right;
  font-size: 1.2rem;
}

details {
  width: 100%;
  border-bottom: 1px solid #EFEFEF;
}

summary {
  font-size: 1.2rem;
  padding: 1rem;
  cursor: pointer;
}

details p {
  margin-left: 2.5rem;
}

@media only screen and (min-width: 950px) {
  h1 {
    font-size: 3rem;
  }
  h3 {
    font-size: 1.5rem;
    padding-bottom: 0.75rem;
    padding-right: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 0.3rem solid #EFEFEF;
  }
}
p {
  font-size: 1.2rem;
}

p + p {
  margin-top: 1.2rem;
}

p + h3, ul + h3, img + h3 {
  margin-top: 2rem;
}

p > a {
  text-decoration: none;
  border-bottom: 1px solid #000000;
}
p > a:hover {
  border-bottom: 1px dashed #000000;
}
p > a[target=_blank]::before {
  content: "↗ ";
}

.text-center {
  text-align: center;
}

.note {
  background-color: rgb(180, 140, 0);
  padding: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.warning {
  background-color: rgb(255, 101, 101);
  padding: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.self-start {
  align-self: flex-start;
}

section.wide {
  width: 100%;
}

section.wide-90 {
  width: 100%;
  padding: 1.5em;
  box-sizing: border-box;
}

section.narrow {
  width: 100%;
  padding: 1.5em;
  box-sizing: border-box;
}
section.narrow.center {
  text-align: left;
}
section.narrow * {
  max-width: 100%;
}

@media only screen and (min-width: 950px) {
  section.narrow {
    width: 55rem;
    padding: 0;
  }
  section.narrow.center {
    text-align: center;
  }
  section.wide-90 {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  }
}
.doc {
  display: flex;
  width: 100%;
}
.doc .img-half {
  width: 50%;
}
.doc .img-75 {
  width: 75%;
}
.doc section > img {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.doc .grid {
  margin-top: 1rem;
}
.doc .grid .row {
  align-items: center;
}
.doc .grid p, .doc .grid ul {
  margin-right: 1rem;
}
.doc .grid + h3 {
  margin-top: 1rem;
}

.sidebar {
  position: sticky;
  align-self: flex-start;
  top: 0;
  background-color: rgba(239, 239, 239, 0.15);
  padding: 2rem;
  margin-right: 2rem;
  height: 100vh;
  overflow-y: auto;
}
.sidebar h4 {
  margin-top: 1rem;
}

video {
  width: 100%;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  background: #EFEFEF;
  background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 22%, rgba(239, 239, 239, 0) 78%, rgba(239, 239, 239, 0.1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 22%, rgba(239, 239, 239, 0) 78%, rgba(239, 239, 239, 0.1) 100%);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 22%, rgba(239, 239, 239, 0) 78%, rgba(239, 239, 239, 0.1) 100%);
}
.panel.reverse {
  flex-direction: column-reverse;
}
.panel .image {
  width: 90vw;
  height: 90vw;
  background-size: cover;
  background-position: center center;
}
.panel .text {
  display: flex;
  justify-content: center;
  align-items: center;
}
.panel .text .inner {
  width: 90%;
  margin-top: 1.5rem;
}
.panel .text .inner .btn {
  margin-top: 1.5rem;
}

@media only screen and (min-width: 600px) {
  .panel .image {
    height: 40vw;
  }
}
@media only screen and (min-width: 950px) {
  .panel {
    flex-direction: row;
    padding-top: 0;
    padding-bottom: 0;
  }
  .panel.reverse {
    flex-direction: row;
  }
  .panel .image {
    width: 35vw;
  }
  .panel .text {
    width: 65vw;
  }
  .panel .text .inner {
    margin-top: 0;
  }
}
@media only screen and (min-width: 1200px) {
  .panel .image {
    height: 35vw;
  }
  .panel .text {
    height: 35vw;
  }
}
.grid {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.grid .row {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.grid .row.center {
  justify-content: center;
}
.grid .row.reverse {
  flex-direction: column-reverse;
}
.grid .row.vert-center {
  align-items: center;
}
.grid .row.wrap {
  flex-wrap: wrap;
}
.grid .row.around {
  justify-content: space-around;
}
.grid .row.padded {
  margin-top: 2rem;
}
.grid .row.mobile-sbs {
  flex-direction: row;
}
.grid .row .column {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.grid .row .column.vid {
  justify-content: space-between;
}
.grid .row .column.padded {
  padding: 1.5em;
}
.grid .row .column.padded + .padded {
  padding: 0 1.5em 1.5em 1.5em;
}
.grid .row .column .padded {
  padding: 1.5em;
}
.grid .row .column .padded + .padded {
  padding: 0 1.5em 1.5em 1.5em;
}
.grid .row .column.padright {
  padding-right: 1.2rem;
}
.grid .bg {
  background-color: rgba(239, 239, 239, 0.15);
}

section.narrow .grid .row .column.padded {
  padding: 0;
}

section.narrow .grid .row .column.padded + .column.padded {
  padding-top: 1.5em;
}

@media only screen and (min-width: 950px) {
  .grid {
    /* row or vertical elements */
    /* column or horizontal elements */
  }
  .grid .row {
    flex-direction: row;
  }
  .grid .row.reverse {
    flex-direction: row;
  }
  .grid .row .column.w1-3 {
    flex: 1;
  }
  .grid .row .column.w2-3 {
    flex: 2;
  }
  .grid .row .column.w1-4 {
    flex: 1;
  }
  .grid .row .column.w3-4 {
    flex: 3;
  }
  .grid .row .column.w40 {
    width: 40%;
  }
  .grid .row .column.w60 {
    width: 60%;
  }
  .grid .row .column.padded {
    padding: 3em;
  }
  .grid .row .column.padded + .padded {
    padding: 3em;
  }
  .grid .row .column .padded {
    padding: 3em;
  }
  .grid .row .column .padded + .padded {
    padding: 3em;
  }
  .grid .row.padded .column:not(:last-child) {
    padding-right: 1rem;
  }
  .grid .row.padded .column:not(:first-child) {
    padding-left: 1rem;
  }
  .grid .row.bg, .grid .column section.bg:not(:last-child) {
    margin-bottom: 3px;
  }
  .grid .column.bg, .grid .row section.bg:not(:last-child) {
    margin-right: 3px;
  }
  section.narrow .grid .row .column.padded {
    padding: 0;
  }
  section.narrow .grid .row .column.padded + .column.padded {
    padding-top: 0;
  }
}
.wrap {
  flex-wrap: wrap;
}

form .row {
  display: flex;
}
form .field {
  width: 100%;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
}
form .field.quarter {
  display: none;
}
form .field label {
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
form .field.small {
  width: unset;
  justify-content: center;
}
form .field input {
  height: 2.75em;
  padding: 0 1em;
}
form .field input[type=checkbox] {
  width: 2em;
  height: 2em;
}
form .field textarea {
  padding: 1em 1em;
}

@media (min-width: 950px) {
  form .field {
    padding-right: 3rem;
  }
  form .field.half {
    width: 50%;
  }
  form .field.quarter {
    display: none;
  }
}
section.narrow .flyer .grid {
  flex-direction: column;
}
section.narrow .flyer .grid > .row {
  padding: 2rem;
  box-sizing: border-box;
  align-items: center;
}
section.narrow .flyer .grid > .row.fade-right {
  background: linear-gradient(90deg, rgba(239, 239, 239, 0.4) 0%, rgba(239, 239, 239, 0.1) 30%, rgba(239, 239, 239, 0) 100%);
}
section.narrow .flyer .grid > .row.fade-left {
  background: linear-gradient(90deg, rgba(239, 239, 239, 0) 0%, rgba(239, 239, 239, 0.1) 70%, rgba(239, 239, 239, 0.4) 100%);
}
section.narrow .flyer .grid .center {
  align-items: center;
  justify-content: center;
}
section.narrow .flyer .icon-small {
  width: 1.5rem;
  margin: 0.5rem;
}
section.narrow .flyer .icon-large {
  width: 4rem;
}
section.narrow .flyer .hc {
  display: flex;
  justify-content: center;
}
section.narrow .flyer .vc {
  display: flex;
  align-items: center;
}
section.narrow .flyer .hr {
  display: flex;
  justify-content: flex-end;
}

@media (min-width: 950px) {
  section.narrow .flyer .grid > .row {
    padding: 0;
    height: 12rem;
  }
  section.narrow .flyer .grid > .row > .column {
    width: 50%;
  }
  section.narrow .flyer .grid > .row > .column .text-right {
    text-align: right;
  }
  section.narrow .flyer .grid > .row > .column .text-left {
    text-align: left;
  }
}
footer {
  background-color: #f4f1e8;
}
footer.grid .row .column.padded {
  padding: 1.5em;
}
footer.grid .row .column.padded + .padded {
  padding: 1.5em;
}
footer.grid .column:first-child {
  flex: 2;
}

@media (min-width: 950px) {
  footer.grid .column:first-child {
    flex: 1;
  }
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
}
header.active {
  height: 100vh;
  overflow-y: scroll;
  background-color: #EFEFEF;
  z-index: 10;
}
header.active nav {
  display: flex;
}
header.active nav .btn + .btn {
  margin-left: 0;
}
header.active .burger {
  display: none;
}
header.active .cross {
  display: block;
}
header .burger, header .cross {
  vertical-align: top;
  cursor: pointer;
  position: fixed;
  top: 1rem;
  right: 1rem;
}
header .burger {
  font-size: 2rem;
  line-height: 2rem;
}
header .cross {
  font-size: 3.5rem;
  line-height: 2rem;
  display: none;
}
header nav {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  display: none;
}
header nav.center {
  justify-content: center;
}
header nav.right {
  justify-content: flex-end;
}
header nav.active {
  display: block;
}
header nav img {
  height: 3.6rem;
}
header nav .row {
  display: flex;
  flex-direction: column;
  align-items: center;
}
header nav .row .btn {
  width: 100%;
  margin-top: 1rem;
}
header nav a {
  padding: 0.25rem;
  font-size: 1.2rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
header nav a.active {
  font-weight: 600;
  border-bottom: 3px solid #000000;
}
header nav a:hover {
  border-bottom: 2px solid #000000;
}
header nav a:hover.plain {
  border-bottom: 2px solid transparent;
}

@media (min-width: 1200px) {
  header {
    background-color: unset;
    position: unset;
    top: unset;
    left: unset;
    width: 90%;
    margin-left: 5%;
  }
  header .burger, header .cross {
    display: none;
  }
  header nav {
    display: flex;
    flex-direction: row;
    height: 6rem;
    flex-wrap: nowrap;
  }
  header nav a {
    padding: 0.5rem;
    margin-top: 0;
  }
  header nav .row {
    flex-direction: row;
  }
  header nav .row .btn {
    width: unset;
    margin-top: 0;
  }
}
.btn {
  padding: 1rem 2rem;
  display: inline-block;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
  text-transform: uppercase;
  text-decoration: none;
}
.btn.lesspad {
  padding: 0.5rem 1rem;
}
.btn.cta {
  border: 2px solid #18D2B1;
  background: rgba(24, 210, 177, 0.8);
}
.btn.cta:hover {
  background: rgba(57, 216.4285714286, 188.1428571429, 0.82);
}
.btn small {
  color: #333333;
}
.btn.outline {
  color: #18D2B1;
  background-color: transparent;
  border: 2px solid #EFEFEF;
}
.btn.outline:hover {
  background-color: rgba(239, 239, 239, 0.2);
}

@media only screen and (min-width: 950px) {
  .btn + .btn {
    margin-left: 1rem;
  }
}
.buttongroup {
  justify-content: center;
  margin-bottom: 2rem;
}
.buttongroup .back {
  background-color: rgba(239, 239, 239, 0.6);
  border-radius: 0.5rem;
}
.buttongroup .groupbutton {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  color: black;
}
.buttongroup .groupbutton.active {
  border-radius: 0.5rem;
  background-color: rgb(63.75, 63.75, 63.75);
  color: #EFEFEF;
}

.open-video {
  align-self: center;
  font-size: 2rem;
  line-height: 2rem;
  border: none;
  color: white;
  cursor: pointer;
  width: 70%;
  margin-left: 15%;
  margin-bottom: 1rem;
  margin-top: 1rem;
  position: relative;
}
.open-video .play-button {
  position: absolute;
  width: 50px;
  height: 50px;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  font-size: 50px;
  line-height: 50px;
}
.open-video:hover {
  background-color: rgba(239, 239, 239, 0.4);
}

.vid {
  margin: 0.5rem 0.5rem !important;
  padding: 2rem;
}

.grid .column.vid {
  display: block;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(239, 239, 239, 0.8);
}
.popup .player {
  position: fixed;
  width: 70vw;
  top: 5vh;
  left: 15vw;
}

.player video {
  width: 100%;
  height: auto;
}
.player .controls {
  display: flex;
  align-content: center;
  padding: 0 1rem 0 0;
  background-color: rgba(0, 0, 0, 0.2);
}
.player .controls .play-pause-button {
  cursor: pointer;
  height: 3rem;
  padding: 0.5rem 1rem;
  line-height: 2rem;
  font-size: 2rem;
  border: none;
  background-color: transparent;
  color: black;
  margin-right: 0.5rem;
}
.player .controls .play-pause-button.ispause {
  font-size: 1.3rem;
}
.player .controls .play-pause-button:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.player .controls .progress-bar {
  width: 100%;
}
.player .controls .current-time, .player .controls .total-time {
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
}
.player .controls .current-time {
  margin-right: 1rem;
}
.player .controls .total-time {
  margin-left: 1rem;
}

/*# sourceMappingURL=styles.css.map */