@charset "UTF-8";
@import "/include/css/menu.css";
@import "/include/css/lightcase.css";
/*!
    * File: g:\mlt\include\scss\default.scss
    * Project: g:\mlt\include\scss
    * Created Date: Thursday February 22nd 2024 11:39:10
    * Author: P. Morgner, moroli-media, <scripts@moroli-media.com>
    * ©2024 P. Morgner
    *                                __  __
    *    __,__,__  ____  _________  / / /_/  ____  ____  __,__,__
    *   / _   _  ╲/ __ ╲/ ___/ __ ╲/ / / /  / ___╲/ __ ╲/ _   _  ╲
    *  / / / / / / /_/ / /  / /_/ / / / /__/ /__ / /_/ / / / / / /
    * /_/ /_/ /_/╲____/_/   ╲____/╲_//_//_/╲____/╲____/_/ /_/ /_/
    * Last Modified: Monday May 06th 2024 15:15:29
    * 
    * HISTORY:
    * Date      	By	Comments
    * ----------	---	----------------------------------------------
		* Last edit: 2025-05-16
    */
/* inter-300 - latin */
@font-face {
  font-display: swap;
  font-family: "Inter-300";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/inter-v13-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Inter-Reg";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/inter-v13-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap;
  font-family: "Inter-500";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/inter-v13-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap;
  font-family: "Inter-600";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/inter-v13-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Inter-700";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/inter-v13-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800 - latin */
@font-face {
  font-display: swap;
  font-family: "Inter-800";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/inter-v13-latin-800.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900 - latin */
@font-face {
  font-display: swap;
  font-family: "Inter-900";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/inter-v13-latin-900.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
.bg-blau {
  background-color: #014998;
}
.bg-blauH {
  background-color: #80a4cb;
}
.bg-gelb {
  background-color: #ffed00;
}
.bg-grauSH {
  background-color: #f4f4f4;
}
.bg-grauH {
  background-color: #e3e3e3;
}
.bg-grauM {
  background-color: #c6c6c6;
}
#dev {
  color: #fff;
  font-family: Inter-600;
  display: none;
  position: fixed;
  left: 1px;
  top: 1px;
  z-index: 2147483647;
  background-color: #fff;
  padding: 4px;
  border-radius: 4px;
  border: solid 1px #fff;
  padding: 4px 0.5em;
}
.gelb {
  color: #ffed00;
}
.bgBlau {
  background-color: #014998;
  color: #fff;
}
.bgGelb {
  background-color: #ffed00;
}
.bgGrauSH {
  background-color: #f4f4f4;
}
.bgGrauH {
  background-color: #e3e3e3;
}
.bgGrauM {
  background-color: #c6c6c6;
}
.uc {
  text-transform: uppercase;
}
/* original: .5 */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: 160px;
}
@media screen and (max-width: 1190px) {
  html {
    scroll-padding-top: 80px;
  }
}
html, body {
  font-size: 16px;
  -moz-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-image: linear-gradient(to top, white 80%, #eeeeee 100%);
}
@media screen and (max-width: 574px) {
  html, body {
    font-size: 14px;
  }
}
h2, h3 {
  font-family: Inter-700;
}
.h2, .h3 {
  font-size: 2em !important;
}
.h2 {
  line-height: 1.35;
}
.al_center {
  text-align: center;
}
p.question, div.question, h3.question {
  font-family: Inter-700;
  cursor: pointer;
  font-size: 16px;
}
p.answer, div.answer, h3.answer {
  display: none;
  margin-bottom: 20px;
}
content p, content ul {
  line-height: 2;
}
content ul {
  padding-left: 1em;
}
content p.bildunterschrift {
  display: block;
  text-align: right;
  font-size: 0.875em;
  line-height: 1.35;
  margin: 0;
}
a {
  font-family: "Inter-500";
  text-decoration: underline;
  color: #014998;
}
a.buttonLink {
  text-decoration: none !important;
}
a.buttonLink button {
  background-color: rgba(255, 237, 0, 0.5);
}
a.seeMore {
  font-family: "Inter-600";
}
a.seeMore:before {
  content: "» ";
}
p + a.seeMore {
  display: block;
  margin-top: -1em;
}
.hasMore + div {
  display: none;
}
.hasMore > a.more {
  display: flex;
  gap: 1em;
  float: right;
  line-height: 2;
}
.hasMore > a.more:after {
  content: url(/include/img/icons/doubleArrowDown.svg);
  margin-top: 0.2em;
}
body {
  font-family: Inter-Reg;
  color: #014998;
}
.row + .row:not(.specialColumns-2) {
  margin-top: 1.875em;
}
.hasArrowDown {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="54px" height="30px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round stroke-miterlimit:2;"><g transform="matrix(1,0,0,1,-396,-2962.55)"><path d="M396,2962.55L422.667,2992.37L449.334,2962.55L396,2962.55Z" style="fill:rgb(255,255,255);"/></g></svg>');
  background-repeat: no-repeat;
  background-position: center top;
  padding: 60px 40px 40px 40px;
}
.hasArrowOnImage {
  grid-template-columns: 52fr 48fr;
  margin-top: 20px;
}
.hasArrowOnImage:first-of-type {
  margin-top: 0;
}
@media screen and (max-width: 991px) {
  .hasArrowOnImage {
    grid-template-columns: 100%;
  }
}
.hasArrowOnImage > div {
  box-sizing: border-box;
}
.hasArrowOnImage > div:nth-child(odd) {
  overflow: hidden;
  position: relative;
}
.hasArrowOnImage > div:nth-child(odd) > img {
  display: block;
  max-width: initial;
}
.hasArrowOnImage > div:nth-child(odd):after {
  content: " ";
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  position: absolute;
}
@media screen and (min-width: 991px) {
  .hasArrowOnImage > div:nth-child(odd):after {
    background-image: url(/include/img/bgGrayArrowRight_negative_ver.svg);
    background-size: 30px 768px;
    width: 30px;
    height: 100%;
    right: -2px;
    top: 0;
  }
}
@media screen and (max-width: 991px) {
  .hasArrowOnImage > div:nth-child(odd):after {
    background-image: url(/include/img/bgGrayArrowRight_negative_hor.svg);
    background-size: 768px 30px;
    width: 100%;
    height: 30px;
    left: 0;
    bottom: -2px;
  }
}
.hasArrowOnImage > div:nth-child(even) {
  background-color: #e3e3e3;
  padding: 40px 40px 30px 16px;
}
@media screen and (max-width: 991px) {
  .hasArrowOnImage > div:nth-child(even) {
    padding: 0.5em 2em 2em 2em;
  }
}
.hasArrowOnImage + .accFullText {
  display: none;
  background-color: #e3e3e3;
  margin-bottom: 20px;
  padding: 16px 50px 16px 2em;
}
@media (max-width: 767px) {
  .hasArrowOnImage + .accFullText {
    padding: 0.5em 2em 2em 2em;
  }
}
.hasGrayBorderBottom .row {
  margin-right: calc(0.75 * var(--bs-gutter-x) * -1) !important;
  margin-left: calc(0.75 * var(--bs-gutter-x) * -1) !important;
}
.hasGrayBorderBottom .row:after {
  content: " ";
  display: block;
  height: 1.9px;
  background-color: #c6c6c6;
  width: calc(100% - 34px);
  margin-left: 17px;
  margin-top: 40px;
}
.hasGrayBorderBottom .row > * {
  padding-right: calc(var(--bs-gutter-x) * 0.75) !important;
  padding-left: calc(var(--bs-gutter-x) * 0.75) !important;
}
.hasGrayBorderBottom .row img {
  display: block;
  width: 100%;
  max-width: initial;
  margin-top: 10px;
}
.hasGrayBorderBottom .row h3 {
  margin-top: 8px;
}
.hasGrayBorderBottom .row p + a.buttonLink {
  margin-top: 2.5em;
  display: block;
}
.hasGrayBackgroundCols > .row > div > div {
  background-color: #e3e3e3;
  padding: 1em;
  height: 100%;
  padding: 4em 2em;
}
@media screen and (max-width: 767px) {
  .hasGrayBackgroundCols > .row > div > div {
    height: initial;
    border-bottom: solid calc(var(--bs-gutter-x) * 0.35 * 2) #fff;
  }
}
.movedUpGray {
  padding-top: 160px;
  margin-top: -170px;
  margin-bottom: 70px;
  padding-bottom: 1px;
}
@media screen and (max-width: 991px) {
  .movedUpGray {
    margin-top: -120px;
  }
}
.movedUpGray .d-flex {
  gap: calc(var(--bs-gutter-x) * 0.35 * 2);
}
@media screen and (max-width: 575px) {
  .movedUpGray .d-flex {
    display: block !important;
  }
  .movedUpGray .d-flex button {
    float: right;
  }
  .movedUpGray .d-flex button:after {
    content: " ";
    display: table;
    clear: right;
  }
}
.anyQuestions {
  grid-template-columns: 52fr 48fr;
}
.anyQuestions > div {
  display: flex;
  justify-content: space-between;
  grid-column: 2 / 4;
}
@media screen and (max-width: 991px) {
  .anyQuestions > div {
    grid-column: 1 / 4;
  }
}
@media screen and (max-width: 575px) {
  .anyQuestions > div {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.lang {
  background-color: #014998;
}
@media screen and (max-width: 1199px) {
  .lang {
    display: none;
  }
}
.lang > .container {
  margin-bottom: 0;
}
.lang > .container > .row > .col-12 {
  display: flex;
  justify-content: end;
  align-items: center !important;
  height: 42px;
}
.lang > .container > .row > .col-12 img {
  height: 20px;
  width: 33px;
}
.lang > .container > .row > .col-12 ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}
.lang > .container > .row > .col-12 ul li, .lang > .container > .row > .col-12 ul li.aractive {
  border-right: solid 1px #fff;
  border-color: #80a4cb;
  padding-left: 7.6px;
  padding-right: 7.6px;
}
.lang > .container > .row > .col-12 ul li.active, .lang > .container > .row > .col-12 ul li.aractive.active {
  color: #fff;
}
.lang > .container > .row > .col-12 ul li:last-child, .lang > .container > .row > .col-12 ul li.aractive:last-child {
  border: 0;
  padding-right: 14px;
}
.lang > .container > .row > .col-12 ul li:last-child.aractive, .lang > .container > .row > .col-12 ul li.aractive:last-child.aractive {
  border-right: solid 1px #fff;
  border-color: #80a4cb;
  padding-left: 7.6px;
  padding-right: 7.6px;
}
.lang > .container > .row > .col-12 ul li:last-child.aractive.active, .lang > .container > .row > .col-12 ul li.aractive:last-child.aractive.active {
  color: #fff;
}
.lang > .container > .row > .col-12 ul li a, .lang > .container > .row > .col-12 ul li.aractive a {
  color: #80a4cb;
  text-decoration: none;
  font-family: Inter-500;
}
.lang > .container > .row > .col-12 ul li a.active, .lang > .container > .row > .col-12 ul li a:hover, .lang > .container > .row > .col-12 ul li.aractive a.active, .lang > .container > .row > .col-12 ul li.aractive a:hover {
  color: #fff;
}
.faq .hasBorderBottom {
  border-bottom: solid 1px #c6c6c6;
  margin-bottom: 20px;
}
#intro {
  max-width: 1600px;
  margin: auto;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 574px) {
  #intro {
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
  }
}
@media screen and (min-width: 574px) {
  #intro {
    height: calc(80vw * (764 / 1503));
  }
}
@media screen and (min-width: 2001px) {
  #intro {
    max-height: 720px;
  }
}
#intro img.IntroImg {
  width: 100%;
  height: calc(80vw * (764 / 1503));
  max-height: 720px;
  object-fit: cover;
}
@media screen and (max-width: 1199px) {
  #intro img.IntroImg {
    min-height: 500px;
  }
}
#intro .single.blue {
  position: absolute;
  background-color: rgba(1, 73, 152, 0.75);
  padding: 70px;
  max-width: 900px !important;
}
#intro .single.blue.w_2_1 {
  max-width: 1290px !important;
  padding-right: 0;
}
@media screen and (max-width: 991px) {
  #intro .single.blue {
    padding: 20px 15px;
  }
  #intro .single.blue .d-flex:first {
    display: block !important;
  }
  #intro .single.blue .d-flex:first a {
    display: block;
  }
  #intro .single.blue .d-flex:first a:last-child {
    margin-top: 1em;
  }
}
@media screen and (max-width: 574px) {
  #intro .single.blue h1 {
    font-size: 2em;
  }
}
#intro .single.blue a {
  color: #fff;
  text-decoration: underline;
}
#intro .d-flex.single.blue {
  max-width: 1298px;
  padding: 0;
}
#intro button {
  background-color: rgba(255, 255, 255, 0.5);
  border: solid 1px #fff;
}
#intro hr {
  height: 2px;
  border: 0;
  background-color: #ffed00;
  margin: 1.5em auto;
}
#intro > div h1, #intro > div .h1, #intro > div h2, #intro > div .h2, #intro > div p {
  color: #fff;
  font-family: Inter-Reg;
  text-transform: none;
}
#intro > div h1 > span, #intro > div .h1 > span, #intro > div h2 > span, #intro > div .h2 > span, #intro > div p > span {
  color: #ffed00;
}
#intro > div h1, #intro > div .h1 {
  text-transform: uppercase;
  font-size: 3rem;
  font-family: Inter-500;
  margin-right: 15px;
}
@media screen and (max-width: 1199px) {
  #intro > div.w_2_1 {
    width: 100%;
    max-width: 100%;
  }
}
#intro > div.w_2_1 > div {
  box-sizing: border-box;
}
#intro > div.w_2_1 > div:first-child {
  background-color: rgba(1, 73, 152, 0.8);
  padding: 70px;
  width: 66.6666%;
}
#intro > div.w_2_1 > div:last-child {
  padding: 50px 40px;
  width: 33.3333%;
  background-color: rgba(255, 237, 0, 0.95);
  font-family: Inter-500;
  max-width: calc(392px + 40px);
}
#intro > div.w_2_1 > div:last-child > p {
  color: #014998;
}
#intro > div.single.blue {
  position: absolute;
  background-color: rgba(1, 73, 152, 0.55);
  padding: 70px;
  /* @entfernt: 2024-06-10
                max-width: calc(1238px / 3 * 2); 
                // zwei Drittel der Gesamtbreite der Startseite
                @media screen and (max-width: $lg) {
                    padding: 20px 15px;
                    .d-flex:first {
                        display: block !important;
                        a {
                            display: block;
                            &:last-child {
                                margin-top: 1em;
                            }
                        }
                    }
                }
                @media screen and (max-width: $xs) {
                    h1 {
                        font-size: 2em;
                    }
                }
                */
}
@media screen and (max-width: 767px) {
  #intro > div.single.blue .d-flex img {
    height: 4em;
  }
}
@media screen and (max-width: 574px) {
  #intro > div.single.blue .d-flex img {
    height: em;
  }
}
@media screen and (max-width: 400px) {
  #intro > div.single.blue .d-flex img {
    display: none;
  }
}
#intro > div.single.blue a {
  color: #fff;
  text-decoration: underline;
}
img.IntroImg {
  width: 100%;
  height: calc(80vw * (764 / 1503));
  max-height: 720px;
  object-fit: cover;
}
@media screen and (max-width: 1199px) {
  img.IntroImg {
    min-height: 500px;
  }
}
#placeHolderTxt > #mvTxt {
  display: block !important;
  margin-top: 4em;
  padding: 0 64px 0 32px;
}
#placeHolderTxt .buttonLink {
  display: block;
  margin-top: 1em;
}
.productTeaser > .row {
  display: flex;
  flex-wrap: wrap;
}
.productTeaser > .row [class^="col-"] {
  margin-bottom: 32px;
}
.productTeaser > .row [class^="col-"] > div {
  border-right: solid 1px #c6c6c6;
  border-bottom: solid 1px #c6c6c6;
  padding: 0 16px 64px 32px;
  height: 100%;
}
.productTeaser > .row a {
  text-decoration: none !important;
}
.productTeaser > .row a:hover {
  text-decoration: underline !important;
}
.productTeaser > .row h2 {
  text-transform: uppercase;
  display: grid;
  grid-template-columns: auto 90px;
  justify-content: space-between;
  align-items: end;
  column-gap: 1em;
  max-width: calc(100% - 44px);
}
@media screen and (max-width: 574px) {
  .productTeaser > .row h2 {
    max-width: none;
  }
}
.productTeaser > .row h2:after {
  content: " ";
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 90px;
  width: 90px;
}
@media screen and (max-width: 574px) {
  .productTeaser > .row h2:after {
    height: 60px;
    width: 60px;
  }
}
.productTeaser > .row h2.perforating:after {
  background-image: url("/include/img/icons/perforieren.svg");
}
.productTeaser > .row h2.scribing:after {
  background-image: url("/include/img/icons/ritzen.svg");
}
.productTeaser > .row h2.marking:after {
  background-image: url("/include/img/icons/mark.svg");
}
.productTeaser > .row h2.cutting:after {
  background-image: url("/include/img/icons/cut.svg");
}
.productTeaser > .row h2.custom:after {
  background-image: url("/include/img/icons/custom.svg");
}
.productTeaser > .row h2.calendar:after {
  background-image: url("/include/img/icons/calendar.svg");
}
.overlap {
  padding-top: 160px;
  padding-bottom: 120px;
  margin-top: -170px;
  margin-bottom: -110px;
}
.overlap .hasPadding {
  padding: 0 32px;
}
.hasYellowBoxes {
  overflow-x: hidden;
}
.hasYellowBoxes > .container {
  margin-top: 60px;
}
.hasYellowBoxes .grayFlex {
  padding: 3.5em 0 2em;
  margin: 5em 0 4em;
  position: relative;
}
.hasYellowBoxes .grayFlex:before {
  content: " ";
  height: 100%;
  position: absolute;
  z-index: -1;
  width: 100vw;
  background: #e3e3e3;
  top: 0;
}
@media screen and (min-width: 1399px) {
  .hasYellowBoxes .grayFlex:before {
    left: calc((100vw - 1399px + 96px) / 2 * -1);
  }
}
@media screen and (max-width: 1399px) {
  .hasYellowBoxes .grayFlex:before {
    left: calc((100vw - 1199px + 86px) / 2 * -1);
  }
}
@media screen and (max-width: 1199px) {
  .hasYellowBoxes .grayFlex:before {
    left: calc((100vw - 991px + 60px) / 2 * -1);
  }
}
@media screen and (max-width: 991px) {
  .hasYellowBoxes .grayFlex:before {
    left: calc((100vw - 767px + 70px) / 2 * -1);
  }
}
@media screen and (max-width: 767px) {
  .hasYellowBoxes .grayFlex:before {
    left: calc((100vw - 575px + 70px) / 2 * -1);
  }
}
@media screen and (max-width: 575px) {
  .hasYellowBoxes .grayFlex:before {
    left: calc(3vw * -1);
  }
}
.hasYellowBoxes .grayFlex > div + div {
  margin-top: 60px;
}
.hasYellowBoxes .grayFlex .buttonLink {
  text-align: right;
  display: block;
  margin-top: 2.5em;
  margin-bottom: 2em;
}
.hasYellowBoxes .grayFlex .buttonLink > button {
  background-color: rgba(255, 255, 255, 0.5);
  border: solid 2px #fff;
  display: inline-flex;
}
.hasYellowBoxes .bgGelbArrowCut {
  background-image: url(/include/img/bgGelb_arrowCut.svg);
  background-repeat: no-repeat;
  background-position: left center;
  padding: 40px 50px 20px;
}
.hasYellowBoxes .bgGelbArrowCut + .bgGelbArrowCut {
  margin-top: 20px;
}
.textbild.bgGelbArrowCut {
  background-image: url(/include/img/bgGelb_arrowCut.svg);
  background-repeat: no-repeat;
  background-position: left center;
  padding: 40px 50px 20px !important;
}
content > [class^="container"]:first-of-type {
  margin-top: 68px;
}
@media screen and (min-width: 575px) {
  content > [class^="container"]:first-of-type {
    margin-top: 140px !important;
    margin-bottom: 100px !important;
  }
}
@media screen and (max-width: 574px) {
  content > [class^="container"]:first-of-type {
    margin-top: 40px !important;
  }
  content > [class^="container"]:first-of-type .h1 {
    font-size: 2.5em;
  }
}
.container.bgGrauSH {
  padding-top: 10px;
  padding-bottom: 10px;
}
.container.bgGrauSH > .row {
  margin: 20px 6px;
}
.container.bgGrauSH > .row > [class^="col-"]:nth-child(even) {
  display: flex;
  border-bottom: solid 1px #c6c6c6;
  align-items: end;
  padding-bottom: 1em;
}
hr.mt-md-95 {
  margin-top: 2em;
  margin-bottom: 2.5em;
}
@media screen and (min-width: width) {
  hr.mt-md-95 {
    margin-top: 9.5em;
    margin-bottom: 0;
  }
}
footer .bgGelb button {
  background-color: rgba(255, 255, 255, 0.5);
  border: solid 1px #fff;
}
footer .bgGelb .row {
  padding-top: 2.6em;
  padding-bottom: 2.6em;
}
footer .container {
  margin-bottom: 0;
}
footer .bgBlau {
  padding-top: 60px;
  padding-bottom: 30px;
}
footer hr {
  max-width: 626px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3.5em;
}
footer .gelb a {
  color: #ffed00;
  text-decoration: none;
  font-family: Inter-Reg;
}
footer .gelb a:hover {
  text-decoration: underline;
}
footer ul {
  padding: 0;
  margin: 3em auto 2em;
  display: flex;
  list-style: none;
  justify-content: center;
  column-gap: 2.5em;
}
@media screen and (max-width: 767px) {
  footer ul {
    grid-template-columns: repeat(3, 1fr);
    margin: 2em auto;
    display: grid;
    column-gap: 0.5em;
    row-gap: 1em;
  }
}
@media screen and (max-width: 574px) {
  footer ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
footer ul li a {
  color: #fff;
  font-family: Inter-500;
  text-decoration: none;
}
footer .last {
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0;
}
.specialColumns-2.diffHeight > div > div > div, .specialColumns-3.diffHeight > div > div > div {
  height: fit-content !important;
}
.specialColumns-2 > div > div, .specialColumns-3 > div > div {
  position: relative;
}
@media screen and (max-width: 991px) {
  .specialColumns-2 > div > div, .specialColumns-3 > div > div {
    margin-bottom: 20px;
  }
}
.specialColumns-2 > div {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  grid-auto-rows: min-content;
}
@media screen and (max-width: 991px) {
  .specialColumns-2 > div {
    display: block !important;
  }
}
.specialColumns-2 > div > div > div {
  padding: 60px 40px 40px 40px;
}
.specialColumns-2 > div > div > div img {
  position: absolute;
  right: 40px;
  top: 40px;
}
.specialColumns-3 > div {
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  grid-auto-rows: min-content;
}
@media screen and (max-width: 991px) {
  .specialColumns-3 > div {
    display: block !important;
  }
}
.specialColumns-3 > div > div > div {
  height: 100%;
  padding: 165px 40px 40px 40px;
}
.specialColumns-3 > div > div > div img {
  position: absolute;
  right: 40px;
  top: 40px;
}
@media screen and (max-width: 991px) {
  .changeRange > div {
    display: flex !important;
    flex-flow: wrap;
  }
}
@media screen and (max-width: 991px) {
  .changeRange > div > div.hasArrowDown {
    margin-bottom: 0;
  }
  .changeRange > div > div:nth-child(1) {
    order: 1;
  }
  .changeRange > div > div:nth-child(2) {
    order: 3;
  }
  .changeRange > div > div:nth-child(3) {
    order: 2;
  }
  .changeRange > div > div:nth-child(4) {
    order: 4;
  }
}
.hasArrowDown, .hasDotsOnTop {
  padding: 60px 40px 40px 40px;
}
.hirnriss {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 991px) {
  .hirnriss {
    display: block !important;
  }
}
.hirnriss > div {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-left: solid 2px #c6c6c6;
}
.hirnriss > div:nth-child(1) {
  border-left: 0;
}
@media screen and (max-width: 991px) {
  .hirnriss > div {
    border-left: 0;
  }
}
.hirnriss > div > div {
  padding: 8em 1.875em 3.75em;
  position: relative;
  background-image: url("/include/img/icons/line.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: calc(100% - 16px) 2px;
}
@media screen and (max-width: 1399px) {
  .hirnriss > div > div {
    padding-top: 5em;
  }
}
.hirnriss > div > div > img {
  position: absolute;
  top: 2.5em;
  right: 1.875em;
}
@media screen and (max-width: 1399px) {
  .hirnriss > div > div > img {
    top: 1.5em;
    max-width: 80px;
    max-height: 80px;
  }
}
@media screen and (max-width: 1199px) {
  .hirnriss > div > div > img {
    top: 0.5em;
    max-width: initial;
    max-height: initial;
  }
}
@media screen and (min-width: 991px) {
  .hirnriss > div > div:last-child {
    background-image: none;
  }
}
@media screen and (max-width: 1199px) {
  .hirnriss h3 {
    max-width: calc(100% - 120px);
  }
  .hirnriss h3 > br {
    display: none;
  }
}
.hasGrayArea {
  position: relative;
}
.hasGrayArea + .container {
  margin-top: 90px;
}
.hasGrayArea:after {
  content: " ";
  height: 100%;
  position: absolute;
  z-index: -1;
  width: 100vw;
  top: 186px;
  background: #c6c6c6;
  height: calc(100% - 186px + 30px);
}
@media screen and (min-width: 1399px) {
  .hasGrayArea:after {
    left: calc((100vw - 1399px + 96px) / 2 * -1);
  }
}
@media screen and (max-width: 1399px) {
  .hasGrayArea:after {
    left: calc((100vw - 1199px + 86px) / 2 * -1);
  }
}
@media screen and (max-width: 1199px) {
  .hasGrayArea:after {
    left: calc((100vw - 991px + 60px) / 2 * -1);
  }
}
@media screen and (max-width: 991px) {
  .hasGrayArea:after {
    left: calc((100vw - 767px + 70px) / 2 * -1);
  }
}
@media screen and (max-width: 767px) {
  .hasGrayArea:after {
    left: calc((100vw - 575px + 70px) / 2 * -1);
  }
}
@media screen and (max-width: 575px) {
  .hasGrayArea:after {
    left: calc(3vw * -1);
  }
}
.grayFromTop {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8" standalone="no"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(5,0,0,5,0,-19987)"><rect x="0" y="3997.39" width="800" height="333.902" style="fill:rgb(198,198,198);"/></g></svg>');
  background-repeat: no-repeat;
  background-position: center 215px;
  padding-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .grayFromTop {
    padding-bottom: 0;
  }
}
.grayFromTop .d-flex button {
  margin-left: 2em;
}
@media screen and (max-width: 574px) {
  .grayFromTop .d-flex {
    display: block !important;
  }
  .grayFromTop .d-flex button {
    margin-left: 0;
  }
}
.hasDotsOnTop {
  background-image: url("/include/img/bgDots.svg");
  background-repeat: repeat-x;
  background-position: center top;
}
.container, .grayFromTop {
  margin-bottom: 60px;
}
.noWrap {
  white-space: nowrap;
}
content img {
  max-width: 100%;
  object-fit: cover;
}
content .imgFullWidth img {
  display: block;
  max-width: initial;
  width: 100%;
  margin-bottom: calc(0.35 * var(--bs-gutter-x) * 2);
}
content .fullSize img {
  max-width: fit-content;
  width: 100%;
  height: 100%;
}
content a {
  font-family: Inter-700;
}
content ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
content ul > li {
  text-indent: -1.95em;
  margin-left: 2.2em;
}
content ul > li:before {
  content: url(/include/img/icons/list-dot_blue.svg);
  position: relative;
  top: -0.05em;
  margin-right: 1.15em;
}
content ul > li.noDot {
  text-indent: -1.95em;
  margin-left: 2.2em;
  margin-top: 1.5em;
}
content ul > li.noDot:before {
  content: none;
}
hr {
  opacity: 1;
}
.d-flex.space-between {
  justify-content: space-between;
}
.d-flex > p + button {
  display: block;
  max-height: 3.25em;
}
button {
  display: flex;
  padding: 0.75em 2em;
  font-size: 1.05em;
  font-family: Inter-700;
  letter-spacing: 0.034em;
  text-transform: uppercase;
  color: #014998;
  border: 0;
}
button.fadeYellow {
  background-color: rgba(255, 237, 0, 0.5) !important;
  border: solid 1px rgba(255, 237, 0, 0.5) !important;
}
#slideIn {
  position: fixed;
  right: 0;
  top: 300px;
  text-align: end;
}
#slideIn > div {
  margin-bottom: 0.5em;
}
#slideIn > div > img {
  cursor: pointer;
  display: block;
}
#slideIn > div:nth-child(1) img, #slideIn > div:nth-child(4) img {
  max-width: 42px;
}
#slideIn > div:nth-child(2), #slideIn > div:nth-child(3) {
  display: flex;
  margin-left: calc(100% - 44px);
  transition: all 1s;
}
#slideIn > div:nth-child(2) a, #slideIn > div:nth-child(3) a {
  height: 44px;
  background-color: #014998;
  font-weight: 500;
  color: #fff;
  padding: 0 0.5em;
  display: flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}
#slideIn > div:nth-child(2):hover, #slideIn > div:nth-child(3):hover {
  margin-left: 0;
}
#slideIn > div:last-child {
  margin-bottom: 0;
}
footer#bottom .bgGelb a {
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .col-md-6 + .col-md-6 {
    margin-top: 30px;
  }
}
.area500 {
  background-color: #c6c6c6;
  height: 520px;
  margin-top: -540px;
  margin-bottom: 60px;
}
@media screen and (max-width: 1399px) {
  .area500 {
    height: 580px;
    margin-top: -600px;
  }
}
@media screen and (max-width: 1199px) {
  .area500 {
    height: 620px;
    margin-top: -650px;
  }
}
@media screen and (max-width: 991px) {
  .area500 {
    height: 480px;
    margin-top: -500px;
  }
}
@media screen and (max-width: 575px) {
  .area500 {
    display: none;
  }
}
.videowrapper {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}
.videowrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 575px) {
  .videowrapper iframe {
    width: calc(100% - 20px);
    left: 10px;
  }
}
.hasGF .bg-grauH {
  padding: 140px 30px 30px;
  height: 100%;
  position: relative;
}
.hasGF .bg-grauH:after {
  position: absolute;
  top: 30px;
  right: 30px;
}
.hasGF .bg-grauH.icon {
  padding: 30px 30px 30px;
}
.hasGF .bg-grauH.icon div.ar {
  text-align: right;
  margin-bottom: -5px;
}
@media screen and (max-width: 767px) {
  .hasGF .row div div .d-grid .d-flex {
    display: block !important;
    position: relative;
  }
  .hasGF .row div div .d-grid .d-flex .bildunterschrift {
    position: absolute;
    bottom: -2em;
    right: 0;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 0.5em;
  }
}
/* Ergänzungen Michael*/
.ma-top60 {
  margin-top: 60px;
}
.row {
  margin-right: calc(0.35 * var(--bs-gutter-x) * -1);
  margin-left: calc(0.35 * var(--bs-gutter-x) * -1);
}
.row > * {
  padding-right: calc(var(--bs-gutter-x) *0.35);
  padding-left: calc(var(--bs-gutter-x) * 0.35);
}
.row.impressions > [class^="col-"] {
  margin-bottom: calc(var(--bs-gutter-x) * 0.35 * 2);
}
.row.impressions > [class^="col-"] img {
  max-width: initial !important;
  width: 100%;
  height: auto;
}
.mapContainer {
  position: relative;
  height: calc(100% * 0.491);
}
@media screen and (max-width: 767px) {
  .mapContainer {
    height: calc(100% * 0.333);
    margin-bottom: 60px;
  }
}
@media screen and (max-width: 420px) {
  .mapContainer {
    margin-bottom: 90px;
  }
}
#countrySvg path:hover {
  cursor: pointer;
}
#countryMap {
  position: absolute;
  left: 1em;
  bottom: 0;
}
#countryMap > li:hover {
  text-decoration: underline;
  cursor: pointer;
}
#countryMap > li.bold {
  font-weight: bold;
}
@media screen and (max-width: 991px) {
  #countryMap {
    background: rgba(255, 255, 255, 0.55);
  }
}
@media screen and (max-width: 767px) {
  #countryMap {
    display: flex;
    flex-wrap: wrap;
    bottom: -4em;
  }
  #countryMap > li {
    margin-right: 2em;
  }
  #countryMap > li:before {
    margin-right: 0.4em;
  }
}
@media screen and (max-width: 420px) {
  #countryMap {
    bottom: -8em;
  }
}
#Legend {
  visibility: hidden;
  max-width: 500px;
  min-width: 320px;
  height: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  position: absolute;
  z-index: 2147483647;
  transition: all 1s;
  transform-origin: -100% 50%;
  border-width: 2px;
  border-style: solid;
  border-color: #fff;
  box-sizing: border-box;
  padding: 1em;
}
@media screen and (max-width: 420px) {
  #Legend {
    max-width: initial;
    min-width: initial;
    width: 90%;
    margin-left: 5%;
  }
}
#Legend.show {
  visibility: visible;
  width: 100%;
  background-color: #fff;
  border-color: #014998;
  height: fit-content;
}
#Legend i.icon-close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  cursor: pointer;
}
#Legend i.icon-close:before {
  content: url(/include/img/icons/close.svg);
}
#Legend i.icon-close:hover:before {
  content: url(/include/img/icons/close_y.svg);
}
.tempBlue {
  fill: #80a4cb;
}
.floatingImgLeft > div > span {
  max-width: calc(50% - (var(--bs-gutter-x) * 0.75 * 2));
  margin-right: calc(var(--bs-gutter-x) * 0.75 * 2);
  margin-bottom: calc(var(--bs-gutter-x) * $spacing);
  float: left;
  display: block;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .floatingImgLeft > div > span {
    max-width: 100%;
    margin-right: 0;
    margin-bottom: calc((var(--bs-gutter-x) * 0.75 * 2));
    float: none;
  }
}
.floatingImgLeft > div > p:last-child::after {
  content: " ";
  white-space: pre;
  display: table;
  clear: left;
}
.linesBottomAndBetween {
  margin-top: 0 !important;
}
.linesBottomAndBetween > div > div > p {
  padding-left: calc(var(--bs-gutter-x) * $spacingWide);
}
.linesBottomAndBetween > div:nth-child(odd) {
  border-right: solid 1px #c6c6c6;
  padding-right: calc(var(--bs-gutter-x) * 0.75 * 2);
}
@media screen and (max-width: 767px) {
  .linesBottomAndBetween > div:nth-child(odd) {
    border-right: 0;
    padding-right: 0;
  }
}
.linesBottomAndBetween > div:nth-child(even) {
  padding-left: calc(var(--bs-gutter-x) * 0.75 * 2);
}
@media screen and (max-width: 767px) {
  .linesBottomAndBetween > div:nth-child(even) {
    padding-left: 0;
  }
}
@media screen and (max-width: 767px) {
  .linesBottomAndBetween > div:nth-child(2) {
    border-top: solid 1px #e3e3e3;
    margin-top: 0;
  }
}
.linesBottomAndBetween > div > div {
  padding-top: calc((var(--bs-gutter-x) * 0.75 * 2));
  padding-bottom: calc((var(--bs-gutter-x) * $spacing));
  border-bottom: solid 1px #c6c6c6;
}
.linesBottomAndBetween > div > div:last-child {
  border-bottom: 0;
}
.row.bg-grauSH.p-5 + .row.bg-grauSH.p-5 {
  margin-top: 0;
}
/* Ergänzungen Michael*/
.ma-top60 {
  margin-top: 60px;
}
.upc {
  text-transform: uppercase;
}
.mar-bu-15 {
  margin-bottom: 0;
}
.mar-bu-30 {
  margin-bottom: 30px;
}
table, tbody, tr, td {
  border: 1px solid #999;
}
.floatingImgLeft ul {
  overflow: auto;
}
[name="cForm"] [name="Tier"] {
  position: relative;
  left: -5000px;
}
[name="cForm"] .x_button {
  display: flex;
  justify-content: center;
  padding-top: 0.5em;
}
[name="cForm"] [name="button"] {
  display: flex;
  max-width: 160px;
  padding: 0.75em 2em;
  font-size: 1.05em;
  font-family: Inter-700;
  letter-spacing: 0.034em;
  text-transform: uppercase;
  color: #014998;
  background: rgba(128, 164, 203, 0.25);
  border: solid 2px #014998;
  border-radius: 0;
  margin-top: 1.5em;
  transition: all 0.3s;
}
[name="cForm"] [name="button"]:hover {
  background: #80a4cb;
  color: #fff;
}
.floatR {
  float: right;
}
.bgGrauH.boxImg img {
  position: relative !important;
  width: 100%;
  right: 0 !important;
  top: 0 !important;
  margin: -20px auto -20px auto;
}