*::-webkit-scrollbar {
    width: 8px;
    height: 100%;
}
*::-webkit-scrollbar:disabled {
    display: none;
}
*::-webkit-scrollbar-button{
    display: none
}
*::-webkit-scrollbar-thumb {
    border-radius: 4px;
    scrollbar-color: rgba(0,0,0,.2)
}
*::-webkit-scrollbar-track {
    background-color: transparent;
}
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent
}
:root {
    --light: #24303c;
    --light-rgb: 36,48,60;
    --dark: #f4fafd;
    --dark-rgb: 244,250,253;
    --yellow: #425466;
    --yellow-rgb: 66,84,102;
    --gray-light: #425466;
    --gray-light-rgb: 66,84,102;
    --gray-mid: #24303c;
    --gray-mid-rgb: 36,48,60;
    --base-color: var(--light);
    --base-color-rgb: var(--light-rgb);
    --text-color: var(--dark);
    --text-color-rgb: var(--dark-rgb);
    --highlight-color: var(--yellow);
    --highlight-color-rgb: var(--yellow-rgb);
    --gradient-color: var(--gray-light-rgb);
    --main-font: 'Rubik', 'Calibri', sans-serif;
    --shadow: 0 0 20px rgba(0,0,0,.6);
    --transition-time: 0;
    --padding: 22px;
    --border-radius: .5rem;
    --border-radius2: calc(1 * var(--border-radius));
    --max-width: 1800px;
    --flex-base: 220px;
    --font-size: 15px;
    --swiper-theme-color: var(--yellow) !important;
    --swiper-navigation-size: 1.5rem !important;
    --swiper-navigation-sides-offset: calc(.5 * var(--padding));

    --glowingblue:  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff;
}
html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
}
html {
    overflow-x: hidden;
    position: relative;
    min-height: 550px;
    font-size: var(--font-size);
    height: 100%;
}
body {
    font-family: var(--main-font);
    font-weight: 400;
    overflow: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: var(--text-color);
    min-width: 300px;
    background-color: var(--base-color);
    min-height: 100%;
    line-height: 1.3;
}
body, body * {
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
a {
    text-decoration: none;
    color: currentColor;
    opacity: 1;
}
p {
    margin: 0 0 .5rem;
}
p:last-of-type {
    margin-bottom: 0;
}
main a {
    display: inline-block;
    position: relative;
}
main a:not([class*="box"], [class*="button"]) {
    text-decoration: dashed underline rgb(0, 255, 0) 2px;
    text-decoration-skip-ink: none;
}

strong, b {
    font-weight: 700
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    margin: 1em 0 .5em;
    line-height: 1.3;
}
h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, 
.h1:first-child, .h2:first-child, .h3:first-child, .h4:first-child, .h5:first-child, .h6:first-child {
    margin-top: 0
}
h2:only-child, h3:only-child, h4:only-child, h5:only-child, h6:only-child, 
.h1:only-child, .h2:only-child, .h3:only-child, .h4:only-child, .h5:only-child, .h6:only-child {
    margin: 0;
}
h1, .h1 {
    font-size: 1.7rem;
    text-transform: uppercase;
}

h1, h1 + h2 {
    margin-top: 0
}
h1 {
    margin-bottom: 0
}
h1 > span, .h1 > span {
    font-weight: 400;
    display: block;
    font-size: .8em
}

h2, .h1 {
    color:var(--dark);
}

h2, .h2 {
    font-size: 1.25rem;
}
h3, .h3 {
    font-size: 1.15rem;
}

body img, body video {
    /* height: auto; */
    max-width: 100%;
}
body video {
    cursor: pointer
}
[class*="box"] > picture:only-child > img{
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.center {
    text-align: center;
    align-items: center;
    justify-content: center;
}

.glowingblue  /*DUNKLER SCHATTEN*/ {
    box-shadow: 0 0 40px #060b0d;
}

.glowingdark /*BLAUER SCHATTEN*/ {
    box-shadow: 0 0 15px #5387b9;
}

img.absolute {
    position: absolute;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}
img.absolute.full {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
    
}
img.absolute.full.sectimg {
    opacity: .1;
    z-index: 0;
    filter: blur(5px)
}
header img.absolute.full {
    object-position: center;
}
img.fixed {
    position: fixed
}
img.absolute.left {
    left: 0;
    right: auto;
}
img.absolute.right {
    left: auto;
    right: 0;
}
img.absolute.top {
    top: 0;
    bottom: auto;
}
img.absolute.bottom {
    top: auto;
    bottom: 0;
}
img.absolute.left.top {
    object-position: left top;
}
img.absolute.left.bottom {
    object-position: left bottom;
}
img.absolute.right.top {
    object-position: right top;
}
img.absolute.right.bottom {
    object-position: right bottom;
}
img.sideimg {
    display: block;
    margin: var(--padding) auto;
    max-width: 150px;
}
img.contimg {
    display: block;
    margin: 0 auto;
}
.largeimg img {
    display: block;
    height: 100%;
    object-fit: cover
}
img.round {
    border-radius: 100%
}
.nomargin {
    margin: 0 !important;
}
.table > * {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: .5em
}
.table.vstart > * {
    align-items: flex-start
}
.table.decorate > .trow {
    border-bottom: 2px solid var(--gray-light)
}
.gray-light .table.decorate > .trow {
    border-bottom-color: rgba(var(--gray-mid-rgb), .2)
}
.table.decorate > .trow:last-child {
    border-bottom: none;
}
.table.decorate {
    margin: 0 0 .5rem;
}
footer .table > * {
    max-width: 200px;
    margin: 0 auto
}
.table > * > * {
    flex: 4 1 150px;
    text-align: left
}
.table > * > .tc1 {
    flex: 1 1 100px;
    padding-right: .5em;
}
.table > * > .tc0 {
    flex: .25 1 30px;
    padding-right: .5em;
}
.sociallinks > * {
    font-size: 1.7em;
    padding-right: .5rem;
    margin-right: .5rem;
    cursor: pointer
}
.yellow {
    background-color: var(--yellow);
}
.light {
    background-color: var(--light);
}
.gray-light {
    background-color: var(--gray-light)
}
.gray-mid {
    background-color: var(--gray-mid)
}
.dark {
    background-color: var(--dark)
}
.yellow-font, .yellow-font * {
    color: var(--yellow);
}
.white-font, .white-font * {
    color: var(--dark);
}
.gray-light-font, .gray-light-font * {
    color: var(--gray-light)
}
.dark-font, .dark-font * {
    color: var(--dark)
}
.abs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.round-tl {
    border-top-left-radius: var(--border-radius2);
}
.round-tr {
    border-top-right-radius: var(--border-radius2);
}
.round-bl {
    border-bottom-left-radius: var(--border-radius2);
}
.round-br {
    border-bottom-right-radius: var(--border-radius2);
}
.round-l {
    border-top-left-radius: var(--border-radius2);
    border-bottom-left-radius: var(--border-radius2);
}
.round-r {
    border-top-right-radius: var(--border-radius2);
    border-bottom-right-radius: var(--border-radius2);
}
.round-t {
    border-top-left-radius: var(--border-radius2);
    border-top-right-radius: var(--border-radius2);
}
.round-b {
    border-bottom-left-radius: var(--border-radius2);
    border-bottom-right-radius: var(--border-radius2);
}
.round-all, .round-all:before, .round-all:after {
    border-radius: var(--border-radius2);
}
.round-none, .round-none:before, .round-none:after {
    border-radius: 0;
}

.ovh {
    overflow: hidden
}

/* FLEX */
.flex {
    display: flex;
    flex-flow: row wrap;
    width: auto;
    padding: var(--padding)
}
.pad {
    padding: var(--padding)
}
.flex.halfpad {
    padding: calc(.5 * var(--padding));
}
.flex.halfpad > [class*="box"] {
    padding: calc(.5 * var(--padding))
}
.flex.halfpadvertical {
    /*! padding-top: calc(.5 * var(--padding)); */
    /*! padding-bottom: calc(.5 * var(--padding)); */
}
.flex.halfpadvertical > [class*="box"] {
    padding-top: calc(.5 * var(--padding));
    padding-bottom: calc(.5 * var(--padding));
}
.content.flex.halfpad > [class*="box"] {
    padding: calc(1 * var(--padding)) calc(.5 * var(--padding))
}
.flex.nm {
    margin: calc(-1 * var(--padding));
}
.flex.nw {
    flex-flow: row nowrap;
}
.flex.unpad {
    margin-left: calc(-1 * var(--padding));
    margin-right: calc(-1 * var(--padding));
    max-width: calc(100% + 2 * var(--padding))
}
.halfpad > .flex.unpad {
    margin: 0 calc(-.5 * var(--padding));
    max-width: calc(100% + 1 * var(--padding))
}
.flex.wr {
    flex-flow: row wrap-reverse;
}
.flex.vcenter {
    align-items: center;
    align-content: center;
}
.flex.vstretch {
    align-items: stretch;
    align-content: stretch;
}
.flex.vstart, .table.vstart > trow {
    align-items: flex-start !important;
    align-content: flex-start !important;
}
.flex.vend {
    align-items: flex-end !important;
    align-content: flex-end !important;
}
.vcenter[class*="box"] {
    align-self: center;
}
.vend[class*="box"] {
    align-self: flex-end;
}
.vstart[class*="box"] {
    align-self: flex-start;
}
.box0 {flex: 1 1 max(calc(1 * var(--flex-base)), 12.5%);}
.box1 {flex: 1 1 max(calc(1 * var(--flex-base)), 25%);}
.box2 {flex: 2 1 max(calc(2 * var(--flex-base)), 50%);}
.box3 {flex: 3 1 max(calc(3 * var(--flex-base)), 75%);}
.boxfull {flex: 1 1 100%;}
.box0, .box1, .box2, .box3, .box-po, .boxfull {padding: var(--padding);min-width: 0;max-width: 100%;position: relative;order: 2;}
.box2.flex {
    /*--flex-base: 110px;*/
}

.box2.fpad.flex.vstretch a.button.block{
    margin-top:20px;
    bottom: 19px;
    position:absolute;
    width: 90%;
     box-shadow: 0 0 15px #5387b9;
}


.box3.flex {
    --flex-base: 165px;
} 
.flex.box1.fw, .flex.box2.fw, .flex.box3.fw {
    width: calc(100% + (2 * var(--padding)));
    max-width: calc(100% + (2 * var(--padding)));
}
.flex > .nopad[class*="box"], .nopad {
    padding: 0;
}
.flex > .nopadtop[class*="box"] {
    padding-top: 0 !important;
}
.flex > .nopadbottom[class*="box"] {
    padding-bottom: 0 !important;
}
.halfpadtop {
    padding-top: calc(.5* var(--padding)) !important;
}
.halfpadbottom {
    padding-bottom: calc(.5* var(--padding)) !important;
}
.flex > .flex[class*="box"]:not(.fpad) {
    padding: 0;
}
.flex > .flex.halfpad[class*="box"] {
    padding: calc(.5* var(--padding)) 0;
}
.flex > .flex.doublepad[class*="box"], .doublepad {
    padding: calc(2* var(--padding));
}
.flex > .padleft[class*="box"] {
    padding-left: calc(1.5 * var(--padding)) !important;
}
.flex > .divider {
    flex: 1 1 100%;
    padding: 0;
    margin: 0;
}
.flex > .hdivider {
    flex: 0 0 0%;
    padding: 0;
    margin: 0;
}
.flex > .hw + .hdivider {
    flex: 1 1 100%;
    padding: 0;
    margin: 0;
}
@media (max-width: 1220px){
.flex > .divider {
    display: none;
}    
}
img[classbox]:only-child, picture[class^="box"]:only-child, picture[class^="box"] > img {
    width: 100%;
    display: block;
    height: 100%;
}
/*.columns {
    column-width: calc(.75 * var(--flex-base));
    column-gap: var(--padding);
    column-count: 3;
}
.columns > div {
    break-inside: avoid
}*/
.columns {
    display: flex;
    flex-flow: row wrap;
}
.columns > div {
    flex: 1 1 max(var(--flex-base), 30%);
    margin-right: var(--padding);
    margin-bottom: .5rem
}
.flex.colflex {
    flex-direction: column;
}
.flex.colflex > [class*="box"] {
    flex-basis: 16rem;
    display: flex;
}
.flex.colflex > [class*="box"] > div > .box2 {
    display: flex;
    flex-flow: row wrap;
    justify-content: stretch;
}
.flex.colflex > [class*="box"] > div > .box2 > * {
    flex: 1 1 100%;
    align-self: flex-start;
    height: auto;
}
.flex.colflex > [class*="box"] > div > .box2 > .button {
    align-self: flex-end;
    margin-top: auto;
}

/* HEADER */
.header {
    position: relative;
}

.h1.white-font u {
    background-color: rgb(12, 193, 12);
    text-decoration: none;
    padding: 0.1em;
}

.index .header {
}

.headertop {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
}
.headertop * {
    color: var(--dark)
}
.headertop > div {
    padding: calc(.25 * var(--padding)) calc(1 * var(--padding));
    display: flex;
}  
.headertop > div > * {
    flex: 1 1 var(--flex-base)
} 
.headertop #topnav {
    position: fixed;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-time) ease-in-out;
    z-index: 1100;
    bottom: 0;
    text-align: center;
    left: 0;
    width: 100%;
    background-color: var(--light);
    padding: var(--padding);
}
.mopen .headertop #topnav {
    opacity: 1;
    pointer-events: all;
}
.headertop > div > .contact {
    text-align: left;
}
.headertop > div > .contact a {
    padding: calc(.25 * var(--padding));
}
.headertop > div > .contact > *:not(.nmr)  {
    margin-right: calc(.5 * var(--padding));
    display: inline-block;
}
.headertop > div > .contact > *:last-child {
    margin-right: 0
}
#loginstatebox:empty {
    display: none;
}
.headertop > div > nav li {
    margin-right: calc(.5 * var(--padding))
}
.langswitcher .active {
    font-weight: 700
}
header .logobar {
    background-color: var(--light);
    position: relative;
    padding: var(--padding)
}
header .logo {
    position: relative;
    display: block;
    opacity: 1;
    padding: 0;
    margin: 0 auto;
    width: 50%;
    height: calc(3rem + var(--padding));
    background-color: var(--light);
    max-width: 500px;
    min-width: 100px;
    /*! display: flex; */
    align-items: center;
    flex: 1 1 max(calc(1 * var(--flex-base)), 25%);
}
header .logo h1 {
    margin: 0;
}
header .logo img {
    width: 100%;
    height: auto;
    display: block
}
.header .headerbottom {
    margin-top: 0;
    overflow: hidden;
    position: relative;
}
.index .header .headerbottom {
    height: 100vh;
    min-height: 750px
}
.header .headerbottom .h1,
.header .headerbottom .headerbox {
    position: relative
}
.header .headerbottom .headerbox {
    background-color: rgba(var(--light-rgb), .8);
    backdrop-filter: blur(5px)
}

.headerbox {
    display: flex;
    gap: 1rem;
}

.usp-item {
    padding: 0.8em;
}


.header .headerbottom .headerimage {
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}
.index .header .h1 {
    font-size: 1.5rem;
    line-height: 1.2;
}
.usps .usp-item,
.refs{
    padding-left: 1.8rem;
    position: relative
}
main .usps .usp-item {
    margin-bottom: .5rem
}
.usps .usp-item > i,
.refs > i {
    position: absolute;
    left: 0;
    color: var(--yellow);
    background-color: var(--dark);
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    text-shadow: none
}
.refs .reftext {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row wrap;
}
.refs .reftext p {
    margin: 0;
    padding-right: calc(1 * var(--padding));
    flex: 1 1 100%;
}
.refs .ri {
    padding: calc(.5 * var(--padding)) calc(.75 * var(--padding));
    padding-left: 0
} 

/* NAVI */
.mainnav {
    position: fixed;
    display: block;
    top: 0;
    left:0;
    width: 100%;
    z-index: 1099;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul:not(.footernav) li {
    display: inline-block
}
nav.mainnav > ul {
    opacity: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: fixed;
    display: flex;
    justify-content: flex-start;
    font-size: 1.3rem;
    align-items: flex-start;
    flex-flow: column;
    height: calc(100% - 2* var(--padding));
    width: 100%;
    top:0;
    left: 0;
    background-color: var(--light);
    pointer-events: none;
    transition: opacity var(--transition-time) ease-in-out;
    padding: calc(1.5 * var(--padding)) 0;
    padding-bottom: calc(2 * var(--padding));
    overflow: scroll;
}
.mopen nav.mainnav ul.navi {
    opacity: 1;
    pointer-events: all;
}
nav.mainnav ul.navi > li {
    width: calc(100% - 3.5 * var(--padding));
    border-top: 2px solid var(--yellow)
}
nav.mainnav ul.navi > li > a,
nav.mainnav ul.navi > li > span {
    font-weight: 700
}
nav.mainnav ul.subnavi {
    padding: 0;
    display: block;
}
nav.mainnav ul.subnavi > li{
    display: block;
    padding-left: calc(.5 * var(--padding));
}
nav.mainnav ul li {
    position: relative;
}
nav ul.footernav li {
    margin-bottom: .5rem
}
nav.mainnav ul li > * {
    padding: calc(.5 * var(--padding)) calc(1 * var(--padding));
    display: block;
    color: var(--dark);
    line-height: 1;
    cursor: pointer
}
nav.mainnav ul li.active > a,
nav.mainnav ul li.active > span {
    font-weight: 700
}
.navbutton {
    width: 1.8rem;
    height: 1.8rem;
    position: fixed;
    margin: 0;
    z-index: 200;
    cursor: pointer;
    top: .25rem;
    right: var(--padding);
}
#menubutton {
    position: absolute;
    width: 270%;
    height: 250%;
    top: -79%;
    left: -93%;
    right: -40%;
    transform: translate3d(0, 0, 0);
    pointer-events: none;
}
#menubutton path {
    fill: none;
    -webkit-transition: stroke-dashoffset var(--transition-time) cubic-bezier(.25, -.25, .75, 1.25), stroke-dasharray var(--transition-time) cubic-bezier(.25, -.25, .75, 1.25), stroke var(--transition-time) ease-in;
    -moz-transition: stroke-dashoffset var(--transition-time) cubic-bezier(.25, -.25, .75, 1.25), stroke-dasharray var(--transition-time) cubic-bezier(.25, -.25, .75, 1.25), stroke var(--transition-time) ease-in;
    -o-transition: stroke-dashoffset var(--transition-time) cubic-bezier(.25, -.25, .75, 1.25), stroke-dasharray var(--transition-time) cubic-bezier(.25, -.25, .75, 1.25), stroke var(--transition-time) ease-in;
    -ms-transition: stroke-dashoffset var(--transition-time) cubic-bezier(.25, -.25, .75, 1.25), stroke-dasharray var(--transition-time) cubic-bezier(.25, -.25, .75, 1.25), stroke var(--transition-time) ease-in;
    transition: stroke-dashoffset var(--transition-time) cubic-bezier(.25, -.25, .75, 1.25), stroke-dasharray var(--transition-time) cubic-bezier(.25, -.25, .75, 1.25), stroke var(--transition-time) ease-in;
    stroke-width: 40px;
    stroke-linecap: round;
    stroke: var(--dark);
    stroke-dashoffset: 0px;
}
#menubutton path#top,
#menubutton path#bottom {
    stroke-dasharray: 240px 950px;
}
#menubutton path#middle {
    stroke-dasharray: 240px 240px;
}
.mopen #menubutton path#top,
.mopen #menubutton path#bottom {
    stroke-dashoffset: -650px;
    stroke-dashoffset: -650px;
}
.mopen #menubutton path#middle {
    stroke-dashoffset: -115px;
    stroke-dasharray: 1px 220px;
}

/* CONTENT */
.contactbutton {
    display: block;
    text-align: center;
    width: 5rem;
    padding: calc(.5 * var(--padding)) 0;
    color: var(--yellow);
    cursor: pointer;
    right: 0;
    bottom: 0;
    z-index: 110;
    position: fixed;
    transition: right var(--transition-time) ease-in-out;
    box-shadow: 0 0 15px #5387b9;
}
.formvisible .contactbutton {
    right: -300px;
}
.contactbutton i {
    font-size: 3rem;
}
.contactbutton p {
    display: none;
}
main {
    min-height: 50vh
}
main ol {
    padding-left: 1em;
    padding-right: 1em;
}
article {
    padding: calc(2 * var(--padding)) 0
}
header {
    position: relative;
    --gradient-color: var(--yellow-rgb);
}
header .headerbottom h1 {
    text-shadow: 0 0 7px rgb(var(--gradient-color)), 0 0 25px rgb(var(--gradient-color))
}
main header, .gradient .headerbottom {
    padding: calc(1 * var(--padding)) 0;
}
.gradient {
    position: relative;
    margin-bottom: var(--padding)
}
article.gradient {
    margin-bottom: calc(4 * var(--padding));
    padding-top: calc(4 * var(--padding));
    padding-bottom: calc(1 * var(--padding));
}
article.gradient.nmb {
    margin-bottom: 0
}
.gradient:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(to right, rgba(var(--gradient-color),1) 0%,rgba(var(--gradient-color),1) 40%,rgba(var(--gradient-color),0) 80%,rgba(var(--gradient-color),0) 100%);
    z-index: 0;
}
.gradient.invert:before {
    background: linear-gradient(to left, rgba(var(--gradient-color),1) 0%,rgba(var(--gradient-color),1) 40%,rgba(var(--gradient-color),0) 80%,rgba(var(--gradient-color),0) 100%);
}
.gradient .sectionimage {
    padding-left: 25%;
    z-index: -1
}
article.gradient .sectionimage {
    height: calc(6 * var(--padding));
}

.gradient > .wrapper {
    position: relative;
    z-index: 1;
    text-shadow: 0 0 7px rgb(var(--gradient-color)), 0 0 25px rgb(var(--gradient-color))
}
.gradient .noshadow * {
    text-shadow: none
}
.wrapper {
    position: relative;
    max-width: var(--max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.smallwrapper {
    max-width: calc(.50 * var(--max-width)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#breadcrumbs {
    display: none
}
.content {
    flex: 1 1 auto;
    position: relative;
}
main ul {
    padding: 0;
    margin: 0 0 .5em;
    list-style: none
}
main ul li {
    position: relative;
    padding-left: 1.4em;
    margin-bottom: .5em
}
main ul li:before {
    position: absolute;
    font-family:'Font Awesome 6 Free';
    left: 0;
    content: "\f0c9";
}
main .arrowlist ul li:before {
    content:"\f061";
}
main .checklist ul li:before {
    content:"\f00c";
}
main .pluslist ul li:before {
    content:"\2b";
}


.box1.flex.fpad.vstretch p {
    padding-bottom: 1.2em;
}
/*
main ul li:before {
    content: '';
    top: .3em;
    background-color: currentColor;
    width: .9em;
    height: .75em;
    clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%, 0 40%, 100% 40%, 100% 60%, 0 60%, 0 80%, 100% 80%, 100% 100%, 0 100%);
}
main .arrowlist ul li:before {
    content:"\f061";
    top: unset;
    background-color: unset;
    width: unset;
    height: unset;
    clip-path: unset;
}
main .checklist ul li:before {
    content:"\f00c";
    top: unset;
    background-color: unset;
    width: unset;
    height: unset;
    clip-path: unset;
}
main .pluslist ul li:before {
    content:"\2b";
    top: unset;
    background-color: unset;
    width: unset;
    height: unset;
    clip-path: unset;
}
*/

.certificates .box1 {
    padding: calc(.5 * var(--padding)) var(--padding);
    flex: 1 1 max(calc(.5 * var(--flex-base)), 25%);
}
.certificates .box1 a {
    height: 100%;
    object-fit: contain
}
.certificates .box1 img {
    height: 100%;
    object-fit: contain
    border-radius: var(--border-radius);
}

.maplink, .maplink img {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    object-fit: cover;
}
.address {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: calc(.5 * var(--padding)); 
    pointer-events: none;
}
.address > div {
    max-width: 300px; 
    pointer-events: all
}
.address > div > p {
    position: relative;
    padding-left: 1.4em;
    margin: 1em 0
}
.address > div > p > i {
    position: absolute;
    left: 0;
    top: .2em
}
.swiper.timeline {
    --swiper-pagination-bullet-inactive-color: var(--gray-mid);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-top: calc(100% - 1.1rem);
    --swiper-navigation-sides-offset: 0
}
.swiper.timeline .swiper-wrapper {
    z-index: 11;
    margin: 0 0 var(--padding);
}
.swiper.timeline .swiper-button-prev,
.swiper.timeline .swiper-button-next {
    z-index: 10001
}
.swiper.timeline .swiper-slide > .timeline-item  {
    margin-bottom: 1rem
}
.swiper.timeline .swiper-slide > .timeline-item .imgbox {
    background-color: var(--light);
    padding: calc(.5 * var(--padding));
    position: relative;
}
.swiper.timeline .swiper-slide > .timeline-item .imgbox:before {
    content: '';
    background-color: var(--yellow);
    position: absolute;
    bottom: 0;
    top: 0;
    height: 1.75rem;
    width: 1.1rem;
    left: -.1rem;
    margin: auto;
    clip-path: polygon(0 0,100% 50%, 0 100%);
}
.swiper.timeline .swiper-slide > .timeline-item img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: contain;
}
.swiper.timeline .swiper-pagination-bullets {
    position: relative;
}
.swiper.timeline .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    overflow: visible;
    z-index: ;
}
.swiper.timeline .swiper-pagination-bullets:before {
    content: '';
    position: absolute;
    display: block;
    height: .1rem;
    background-color: var(--yellow);
    left: -100%;
    right: -100%;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
.swiper.timeline .swiper-pagination-bullets .swiper-pagination-bullet {
    position: relative;
    margin: 0 calc(.5 * var(--padding));
    width: .7rem;
    height: .7rem;
    transition: background var(--transition-time) ease-in-out
}
.swiper.timeline .swiper-pagination-bullets .swiper-pagination-bullet:before {
    content: '';
    background-color: var(--yellow);
    position: absolute;
    bottom: 300%;
    height: 15rem;
    left: -7.5rem;
    right: -7.5rem;
    opacity: 0;
    transform: scale(0);
    transform-origin: center top;
    transition: opacity var(--transition-time) ease-in-out, transform 1s ease-in-out .25s;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.swiper.timeline .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
    opacity: 1;
    transform: scale(1);
}
.swiper.timeline .swiper-pagination-bullets .swiper-pagination-bullet > span {
    position: absolute;
    font-size: .7rem;
    bottom: 100%;
    left: -1000%;
    right: -1000%;
    pointer-events: none;
    transform: scale(1);
    transform-origin: bottom center;
    transition: transform var(--transition-time) ease-in-out
}
.swiper.timeline .swiper-pagination-bullets .swiper-pagination-bullet:hover > span,
.swiper.timeline .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active > span {
    transform: scale(1.3);
}
.mediaimg {
    border-color: var(--light);
    border-style: solid;
    border-top-width: calc(.5 * var(--padding));
    border-bottom-width: calc(.5 * var(--padding));
    border-left-width: calc(.5 * var(--padding));
    border-right-width: calc(.5 * var(--padding));
}

/* FORM */
button {
    border: none;
}
button:not(.nobutton), .button {
    font-size: 1rem;
    padding: .2em 2em;
    margin: calc(.25 * var(--padding)) 0;
    line-height: 1.2;
    min-height: 3.41em;
    background-color: var(--light);
    font-family: inherit;
    border-radius: var(--border-radius);
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    color: var(--dark);
    font-weight: 700;
    transition: opacity var(--transition-time) ease-in-out;
    text-shadow: none
}
button.nobutton {
    border: none;
    background: transparent;
    font-family: inherit;
    padding: inherit;
}
button.inline, .button.inline {
    display: inline-flex;
    min-width: 20em;
}
.boxfull.minheight{
    min-height: 2000px;
}
button.bright, .button.bright {
    background-color: var(--yellow)
}
.gray-light.flex.vstretch.nopad.round-all.ovh.glowingblue {
    min-height: 11em;
}
.button:only-child {
    margin-bottom: 0
}
.dz-button {
    margin: calc(.25 * var(--padding)) auto;
}
button:not(.nobutton):hover, .button:hover {
    opacity: 65%;
}
.yellow button:not(.nobutton), .yellow .button {
    background-color: var(--dark);
    color: var(--light);
}

[class*="box"] > .button:only-child {
    margin: 0
}
.expandbox {
    cursor: pointer;
}
.expandbox h3 {
    position: relative
}
.expandbox .exphint {
    position: absolute;
    right: 0;
    font-size: 1rem
}
.expandbox.expanded .exphint .exp,
.expandbox:not(.expanded) .exphint .coll {
    display: none
}
.expandbox:not(.expanded) + div {
    max-height: 20rem;
    overflow: hidden;
    position: relative
}
.expandbox:not(.expanded) + div:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8rem;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(var(--light-rgb),0) 0%,rgba(var(--light-rgb),1) 100%);
}

/* POPUPS */
dialog {
  border:none;
  outline:none
}
.modal {
  position:fixed;
  z-index:2;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  max-width:800px;
  max-height:95vh;
  margin:auto;
  display:block;
  /*! background-color:var(--light); */
  opacity:0;
  box-shadow:0 0 100vh 100vh rgba(var(--blue-rgb),.7);
  pointer-events:none;
  z-index:2100;
  border-radius:var(--border-radius);
  transition:opacity var(--transition-time) ease-in-out
}
.mac .modal {
  height:85vh
}
.searchoverlay {
  max-width:calc(100% - 2 * var(--padding))
}
.modal[open] {
  opacity:1;
  pointer-events:all
}
.searchoverlay[open] {
  height:auto
}
input.tntsearch-field {
    border: 2px solid var(--yellow)
}
.tntsearch-clear {
    position: absolute;
    bottom: calc(.75rem + var(--padding));
    right: calc(.75rem + var(--padding));
}
.sharebuttons, #form-result {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 600px;
    height: 100%;
    max-block-size: 800px;
    margin: auto;
    display: flex !important;
    justify-content: center;
    align-items: center;
    background-color: var(--light);
    opacity: 0;
    box-shadow: 0 0 100vh 100vh rgba(var(--yellow-rgb),.7);
    pointer-events: none;
    z-index: 2100;
    transition: opacity var(--transition-time) ease-in-out;
}
.sharebuttons.showbuttons, #form-result.shownotice {
    opacity: 1;
    pointer-events: all;
}
.sharebuttons .shbox, #form-result div.notices, #form-result p {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--padding);
    background-color: transparent;
}
#form-result p span {
    display: block;
    margin-bottom: .5em
}
.closeshare, #sc-close, #closeform, .pu-close, .closesearch {
    position: absolute;
    z-index: 3000;
    cursor: pointer;
    top: calc(.5 * var(--padding));
    right: calc(.5 * var(--padding));
    height: 2rem;
    width: 2rem;
    font-size: 2rem;
    margin: 0;
    text-align: center;
    line-height: 1;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none; 
}
.sharebuttons {
    text-align: center;
}
.sharebuttons .shariff ul {
    justify-content: center;
    margin-top: 1rem
}
.sharebuttons .shariff .orientation-horizontal li, .sharebuttons .shariff .orientation-horizontal li  a {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}
.sharebuttons .tosoc {
    font-size: .7rem;
    line-height: 1.2em;
}

/* FOOTER */
footer {
    text-align: center;  
    width: 100%;
    position: relative;
    padding: var(--padding)
}
footer * {
    margin: 0;
}
#bttb {
    display: none
}
footer p {
    position: relative;
    margin-bottom: .5rem
}

footer .img {
    size: 200%;
}

/* SMARTPHONE */
@media only screen 
    and (min-width: 375px) 
    and (max-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 3), 
    only screen 
    and (min-width: 375px) 
    and (max-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2),
    (max-width: 667px)
{ 
.desktoponly {
    display: none !important;
}
.refs img {
    max-width: 130px;
}
.box0 {flex: 1 1 max(calc(2 * var(--flex-base)), 12.5%);}    
nav.mainnav ul li i.fa-chevron-down:before {
    display: none;
}
.headertop > .wrapper > .contact > a span {
    display: none
}
nav ul.footernav li {
  margin-bottom: 1.5rem;
}
}
.usp-item p {
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height: 1.2
}

/* TABLET */
@media only screen 
    and (min-width : 768px) 
    and (max-width : 1194px) 
    and (-webkit-min-device-pixel-ratio: 1),
    only screen 
    and (min-width : 768px) 
    and (max-width : 1194px) 
    and (-webkit-min-device-pixel-ratio: 2),
    (min-width: 768px) and (max-width: 1194px){

:root {
    --padding: 25px;
    --flex-base: 280px;
    --font-size: 17px;
}
.desktoponly {
    display: none !important;
}
.box2.flex {
    --flex-base: 190px;
} 
.box3.flex {
    --flex-base: 210px;
} 
.box0 {flex: 1 1 max(calc(1.2 * var(--flex-base)), 12.5%);}        
/* FONT */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 1em 0 .5em;
    line-height: 1.3;
}
h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, 
.h1:first-child, .h2:first-child, .h3:first-child, .h4:first-child, .h5:first-child, .h6:first-child {
    margin: 0 0 .5em;
}
h2:only-child, h3:only-child, h4:only-child, h5:only-child, h6:only-child, 
.h1:only-child, .h2:only-child, .h3:only-child, .h4:only-child, .h5:only-child, .h6:only-child {
    margin: 0;
}
h1, .h1 {
    font-size: 2.2rem;
}
h1 {
    margin: 0
}
h2, .h2 {
    font-size: 1.65rem;
}
h3, .h3 {
    font-size: 1.45rem
}  
.index .header .h1 {
    font-size: 1.8rem;
    line-height: 1.2;
} 
.columns {
    column-width: var(--flex-base);
    column-gap: var(--padding);
    column-count: 3;
}
.box2 {flex: 2 1 max(calc(1.5 * var(--flex-base)), 50%);}
/* HEADER */
.headertop a.logo {
    padding: calc(1 * var(--padding));
    margin: calc(2*var(--padding)) auto calc(1*var(--padding));
    width: 50%;
}

.index .header .headerbottom {
    height: 80vh;
}
.usps .usp-item,
.refs{
    padding-left: 2.43rem;
    position: relative
}
.usps .usp-item > i,
.refs > i {
    position: absolute;
    left: 0;
    color: var(--yellow);
    background-color: var(--dark);
    width: 1.64rem;
    height: 1.64rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%
}
.usp-item p {
    -webkit-hyphens: unset;
    hyphens: unset;
    line-height: unset
}
.refs .reftext {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row wrap;
}
.refs .reftext p {
    margin: 0;
    flex: unset;
    padding-right: calc(1 * var(--padding))
}
.refs img {
    width: auto;
    max-height: 75px;
    max-width: 205px;
    padding: calc(.5 * var(--padding)) calc(1 * var(--padding)) calc(.5 * var(--padding)) 0
}
/* NAVI */
nav.mainnav ul li {
    padding: calc(.125*var(--padding)) calc(.5*var(--padding))
}
nav.mainnav ul li i.fa-chevron-down:before {
    display: none;
}
/* CONTENT */
.teaser .fw img {
    max-height: 200px;
}
img.sideimg {
    max-width: 600
}
#breadcrumbs {
    display: block;
    font-size: .8rem;
    padding: 0 calc(1 * var(--padding));
}
}

/* DESKTOP */
@media only screen and (min-width: 1195px){
:root {
    --padding: 30px;
    --flex-base: 180px;
    --font-size: 17px;
}
.box2.flex {
    --flex-base: 90px;
} 
.box3.flex {
    --flex-base: 135px;
} 
.mobileonly {
    display: none !important;
}
/* FONT */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.3;
}
h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 1em 0 .5em;
}
h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, 
.h1:first-child, .h2:first-child, .h3:first-child, .h4:first-child, .h5:first-child, .h6:first-child {
    margin-top: 0
}
h2:only-child, h3:only-child, h4:only-child, h5:only-child, h6:only-child, 
.h1:only-child, .h2:only-child, .h3:only-child, .h4:only-child, .h5:only-child, .h6:only-child {
    margin: 0;
}
h1, .h1 {
    font-size: 2.72rem;
}
h2, .h2 {
    font-size: 1.72rem;
}
h1 + h2 {
    margin: -1rem 0 2rem
}
h3, .h3 {
    font-size: 1.647rem
}  
h4, .h4 {
    font-size: 1.294rem
}   
h5, .h5 {
    font-size: 1.176rem;
    margin-bottom: .2em;
} 
.columns {
    column-width: var(--flex-base);
}
.box0 {flex: .5 1 max(calc(.7 * var(--flex-base)), 12.5%);}

.contactbutton {
    position: absolute;
    right: 0;
    bottom: auto;
    background-color: var(--light);
    color: var(--dark);
    top: calc(47% - 1.5rem - 1 * var(--padding));
}
.csticked .contactbutton {
    position: fixed;
    top: 100px
}
.contactbutton p {
    display: block;
    margin: .2em 0 0 !important;
}
/* HEADER */
.headertop #topnav {
    position: relative;
    opacity: 1;
    pointer-events: all;
    bottom: 0;
    text-align: left;
    background-color: transparent;
    padding: 0
}
.headertop > div > .contact {
    text-align: right;
}  
.headerbuttons .social > * {
    margin: 0 calc(.25 * var(--padding));
}
.headertop > div > .contact a, .headertop > div > .contact span#loginstatebox {
    padding: 0;
}
header .logobar {
    background-color: var(--light);
    position: relative;
    display: flex;
    flex-flow: column;
    padding: var(--padding) var(--padding);
}
.index .header .headerbottom {
    --flex-base: 370px;
    height: 68vh;
    min-height: 650px;
    padding-bottom: var(--padding)
}
.index .header .h1 {
    font-size: 3.37rem;
    line-height: 1.2;
    padding: calc(.5 * var(--padding)) 0 calc(1.5 * var(--padding));
    text-shadow: 0 0 var(--padding) rgba(var(--dark-rgb), .6)
}
.index .header p {
    margin: 0 0 .2rem
}
.usps .usp-item,
.refs{
    padding-left: 2.43rem;
}
.usps .usp-item > i,
.refs > i {
    width: 1.64rem;
    height: 1.64rem;
}
.usp-item p {
    -webkit-hyphens: unset;
    hyphens: unset;
    line-height: unset
}
.refs > i {
    top: 0;
    bottom: 0;
    margin: auto
}
.refs .reftext {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row wrap;
}
.refs .reftext p {
    margin: 0;
    flex: unset;
    padding-right: calc(1 * var(--padding))
}
.refs {
    margin-top: .75rem
}
.certificates:not(.wide) {
    max-width: 360px !important;
}
.certificates:not(.wide) .box1 {
    padding: calc(.25 * var(--padding)) var(--padding);
    flex: 1 1 max(calc(.75 * var(--flex-base)), 50%);
}
.certificates.wide .box1 {
    padding: calc(.25 * var(--padding)) var(--padding);
    flex: 1 1 max(calc(.25 * var(--flex-base)), 15%);
}
/* NAVI */
.mainnav {
    position: relative;
    padding: 0;
    margin-right: calc(-1 * var(--padding));
    background-color: var(--light);
    flex: 5 1 max(calc(3 * var(--flex-base)), 75%);
}
nav.mainnav ul.navi > li > *:not(ul) {
    padding: calc(.5 * var(--padding));
}
nav.mainnav ul li i {
    transform: scaleY(1);
    transition: transform var(--transition-time) ease-in-out
}
nav.mainnav ul li.subopen i {
    transform: scaleY(-1)
}
nav.mainnav ul.navi > li > a,
nav.mainnav ul.navi > li > span {
    font-weight: 400
}
nav.mainnav ul.navi > li {
    width: auto;
    border-top: none
}
.sticked .mainnav {
    position: fixed;
    top: calc(-2 * var(--padding) - 1.5rem);
    box-shadow: 0 0 .3rem rgba(var(--dark-rgb),.5)
}
.sticked.scolledup .mainnav {
    top: 0;
    transition: top var(--transition-time) ease-in-out
}
nav.mainnav > ul.navi {
    position: relative;
    flex-flow: row;
    justify-content: center;
    opacity: 1;
    pointer-events: all;
    height: auto;
    font-size: 1.176rem;
    margin: 0 calc(-.5 * var(--padding));
    transition: none;
    background-color: transparent;
    padding: 0;
    overflow: unset;
}
.sticked nav.mainnav > ul.navi > li {
    padding: 0;
}
nav.mainnav > ul.navi > li.home {
    display: none
}
.navbutton, nav.mainnav ul.subnavi .cm  {
    display: none;
}   
nav.mainnav ul.subnavi {
    position: absolute;
    top: 100%;
    left: calc(-2 * var(--padding));
    right: calc(-2 * var(--padding));
    background-color: var(--yellow);
    font-size: 1rem;
    display: block;
    height: auto;
    width: auto;
    margin: auto;
    max-width: 300px;
    padding: calc(.15 * var(--padding)) 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-time) ease-in-out
}  
nav.mainnav ul.subnavi.sopen {
    opacity: 1;
    pointer-events: all
} 
nav.mainnav ul.subnavi > li {
    display: flex;
    align-items: flex-start;
    height: 100%;
    padding: 0
} 
nav.mainnav ul.subnavi > li > * {
    padding: calc(.25 * var(--padding)) calc(.5 * var(--padding));
    line-height: 1.3;
} 
/* CONTENT */
#breadcrumbs {
    display: block;
    font-size: .8rem;
    padding: 0 calc(1 * var(--padding));
}
.teaser .fw img {
    max-height: 200px;
}   
img.sideimg {
    max-width: 500px;
}
article.gradient .sectionimage {
    height: 100%;
}
article.gradient {
    padding-top: calc(6 * var(--padding));
}
#bttb {
    position: fixed;
    bottom: calc(.5 * var(--padding));
    right: calc(.5 * var(--padding));
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
    color: var(--light);
    background-color: var(--dark);
    border-radius: 100%;
    z-index:10;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow);
    transition: opacity var(--transition-time) ease-in-out;
}
.sticked #bttb {
    opacity: .7;
    box-shadow: var(--shadow);

}    
.sticked #bttb:hover {
    opacity: 1
}    
} 

.empty {
    min-height: 0 !important;
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
    margin-bottom: 0 !important;
}


@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/rubik-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/rubik.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body.loaded {
    opacity: 1;
    --transition-time: .5s
}