@charset "UTF-8";

/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Zoom';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/Zoom-Pro-Wide-Regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Zoom';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/Zoom-Pro-Wide-Bold.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'ZoomNormal';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/Zoom-Pro-Normal-Regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'ZoomNormal';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/Zoom-Pro-Normal-Bold.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



body{
--black:#000000;
--orange:#E6AF0D;
--blue:#28628F;
--white:#ffffff;
--borderwidth:0.25em;
--cwidth:calc(100vw - 3em);
--cwidths:calc(100vw - 3em);
--cwidthmax:100vw;
--fonts:0.903vw;
--bradius:0.5em;
--h1:4.8em;
--h2:3.75em;
--fontb:6.4em;
--small:0.75em;
}







@media(orientation:portrait){
  body{
    --fonts:2.47vw;
  --cwidth:calc(100% - 1.4em);
--cwidths:calc(100% - 1.4em);
}
}

/* Global */

body, html{
font-family: "Zoom", sans-serif;
font-weight: 400;
font-style: normal;
width:100vw;
letter-spacing:0.12em;
text-transform: uppercase;
padding:0;margin:0;left:0;top:0;position:relative;font-size:var(--fonts);line-height:1.5em;font-weight:400;background-color:var(--white);color: var(--black);white-space-collapsing:discard;min-height:100vh}

a, a:link, a:hover, a:active, a:visited{text-decoration:none;transition:color .2s ease-in-out;color:var(--dark)}

h1, h2, h3, h4, h5, h6{
 
margin-inline-start: 0px;
margin-block-end: 0rem;
margin-block-start: 0rem;
}

p{
margin-inline-start: 0px;
margin-block-end: 1rem;
margin-block-start: 1rem;
}

h1{font-size:var(--h1);line-height:1.15em;font-weight:600;color:var(--grey);margin-block-end:0.6em;text-transform:uppercase}
h2{font-size:var(--h2);line-height:1.15em;font-weight:600;color:var(--black);margin-block-end:0.8em;text-transform:uppercase}
h3{font-size:1.7em;line-height:1.15em;font-weight:600;}
img{max-width:100%}
input{border-radius:2em;background-color:var(--white);border:1px solid var(--black);padding:0.4em;font-family:"museo-sans", sans-serif;font-size:0.7em}
input::placeholder{color:var(--grey)}
::selection{
  color:var(--white);
  background-color:var(--red);
}


.mobile-only{display:none}

.container{width:100vw;height:100vh;min-height:calc(var(--cwidths) * 0.6);display:block;position:relative;text-align:center;}
.container-inner{width:var(--cwidth);text-align:left;position:relative;display:inline-block;height:100%}


.head{top:1.5em;left:0;position:absolute;}
.head-contact{top:1.5em;right:0;position:absolute;z-index:3}

.text{position:absolute;left:9em;top:10.3em;z-index:3;line-height: 2.38em;z-index:5}

.logo{left:31.5em;top:calc(50% - 13.5em);width:44.7em;height:27em;overflow:hidden;position:absolute}
.logo-1-container{width:100%;position:absolute;height:100%;transition:width 2s ease-in-out;left:0;overflow:hidden;z-index:2;transition-delay:1s}
.logo-1-container-inner{height:100%;width:44.7em;background-color:#ffffff}
.logo-1-container-inner img{width:100%;height:100%;object-fit:contain}
.logo-2-container{width:100%;position:absolute;height:100%;transition:width 2s ease-in-out;left:0;overflow:hidden;transition-delay:1s}
.logo-2-container-inner{height:100%;width:44.7em;background-color:#ffffff}
.logo-2-container-inner img{width:100%;height:100%;object-fit:contain}

.logo-3-container{width:0%;position:absolute;height:100%;transition:width 2s ease-in-out;left:0;overflow:hidden;z-index:3;transition-delay:1s}
.logo-3-container-inner{height:100%;width:44.7em;background-color:#ffffff}
.logo-3-container-inner img{width:100%;height:100%;object-fit:contain}

.image-container{z-index:3}
.image-container-1{top:5.6em;width:25.4em;left:63.85em;height:17.53em;position:absolute;}
.image-container-2{bottom:10em;width:25.4em;left:0;height:17.53em;position:absolute;}
.image-container-3{bottom:13em;width:16.3em;right:10em;height:22.3em;position:absolute;}
.image-container img{width:100%;height:100%;object-fit: cover;opacity:0;transition:opacity 2s ease;position:absolute;}
.image-container img.cur{opacity:1}

.footer-neu{bottom:1.5em;left:0;position:absolute}
.footer-adresse{bottom:1.5em;right:0;position:absolute}


.impressum{position:relative;letter-spacing:0;display:inline-block;text-transform:none;margin-top:5em;padding-bottom:5em}
h2{font-weight:700;text-transform:uppercase;letter-spacing:0.12em;font-size:var(--fonts);line-height:1.5em}
h3{text-transform:uppercase;letter-spacing:0.12em;font-weight:400;font-size:var(--fonts);line-height:1.5em}

.row-1{display:inline-block;width:24%;margin-right:8%;vertical-align:text-top;position:relative}
.row-2{display:inline-block;width:23%;margin-right:3%;vertical-align:text-top;position:relative}
.row-3{display:inline-block;width:25%;margin-right:3%;vertical-align:text-top;position:relative}
.footer-link{text-align:center;bottom:1.5em;width:20%;left:40%;position:absolute}
.imprint .container{display:inline-block;height:unset}

/* jobs */

.jobs-text{position:relative;margin-left:18.2%;width:55.555%;display:inline-block;margin-top:1.5em;}

.jobs-text-pre{text-transform:none;letter-spacing:0.03em;margin-bottom:8em;font-family:"ZoomNormal";font-size:1.438em;line-height:1.3em;}

.jobs-text h3{font-size:2.3em;line-height:1.2em;font-weight:700}
.jobs-text h4{font-size:1.438em;line-height:1.3em;font-weight:400;margin-bottom:2em}



.jobs-text ul, .job-text-single b{text-transform:none;letter-spacing:0.03em;font-family:"ZoomNormal";font-size:1.438em;line-height:1.3em;text-transform:none;}
.job-text-single{margin-bottom:12em;display:inline-block}
.job-text-single b{font-weight:700}

.job-text-single ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0em;
    margin-block-end: 1.5em;
    padding-inline-start: 1.8em;
    unicode-bidi: isolate;
}


.job-text-single ul {
    list-style: none;
    padding-left: 0;
}

.job-text-single ul li {
    position: relative;
    padding-left: 1.5em;

}

.job-text-single ul li::before {
    content: "●"; /* dicker Punkt */
    position: absolute;
    left: 0.4em;
    top: 0.4em;
    font-size: 0.8em; /* Größe des Punkts */
    line-height: 1;
}

.button.button-apply, .button.button-snake{width:16em;border-radius:2em;border:solid #000 0.1em;padding:1.3em 0;line-height:1em;font-size:1.615em;color:#fff;background-color:#000;margin-left:calc(50% - 8.1em);text-align:center;margin-top:2.5em;transition:all .3s ease}
.button.button-apply:hover, .button.button-snake:hover{color:#000;background-color:#fff}

.button.button-snake {
    position: absolute;
    top: 0;
    left: 0;
    animation: snakeMove 30s linear infinite;
    width:8em;
    z-index:99;
    margin-left:0;
    margin-top:0;
}

@keyframes snakeMove {
    0% {
        top: 15%;
        left: 0;          /* Start links oben */
    }
    25% {
        top: 15%;
        left: 65%;          /* Oben Mitte */
     
    }
    39% {
        top: 58%;           /* Nach unten */
        left: 65%;
     
    }
    46% {
        top: 58%;
        left: calc(100% - 15.5em); /* Nach rechts (150px Randabstand) */
    }
    50% {
        top: 68%;           /* Fast nach oben */
        left: calc(100% - 15.5em);
    }
    77% {
        top: 68%;
        left: 6%;         /* Ganz nach links */
    }

     88% {
        top: 35%;
        left: 6%;         /* Ganz nach links */
    }

      92% {
        top: 35%;
        left: 0%;         /* Ganz nach links */
    }
    100% {
        top: 15%;
        left: 0;         /* Zurück zur Startposition */
    }
}

.jobs-text-after{display:inline-block;margin-top:-2rem;margin-bottom:14rem;font-size:9.3em;line-height:0.9em;font-weight:700;}

@media(orientation:portrait){
  html{width:100vw;max-width:100vw}
  .container{height:unset}
.head {
    top: 1.5em;
    left: 0;
    position: relative;
    float: left;
    display: inline-block;
}

.head-contact {
    top: 1.5em;
    right: 0;
 
    display: inline-block;
}

.text {
    position: relative;
    left: 0;
    top: 3em;
    z-index: 3;
    width: 100%;
    display:inline-block;
    margin-top:3em;
    line-height:2.38em;
}


    .image-container-1 {
        top: 0;
        margin-top: 5em;
        width: 47%;
        left: 53%;
        height: 12.15em;
        position: relative;
        display: inline-block;
    }

.logo {
    left: 15%;
    top: 0;
    width: 70%;
    height: 16.23em;
    overflow: hidden;
    position: relative;
}



   .image-container-2 {
        top: 0;
        margin-top: 0em;
        width: 47%;
        left: 0;
        height: 12.15em;
        position: relative;
        display: inline-block;
    }


.image-container-3 {
    top: 0;
    margin-top:-6em;
        width: 30%;
        left: 65%;
    height: 16.15em;
    position: relative;
}

.footer-neu{position:relative;margin-top:5em;display: inline-block;float:left;}
.footer-adresse {
    bottom: 1.4em;
    right: 0;
    position: absolute;
    float: right;
    text-align: right;
}

.logo-2-container-inner, .logo-1-container-inner, .logo-3-container-inner{width:27.5em}


.row-1, .row-2, .row-3{width:100%;margin-bottom:1em;margin-right:0}
.imprint .container{display:inline-block}



.jobs-text-after{font-size:5em;    margin-bottom: 8rem;}

.jobs-text {
    position: relative;
    margin-left: 0;
    display: inline-block;
    margin-top: 5em;
    width: 100%;
}

.jobs-text h3 {
    font-size: 2em;
    line-height: 1.2em;
    font-weight: 700;

}


@keyframes snakeMove {
    0% {
        top: 10%;
        left: 0;          /* Start links oben */
    }
    11% {
        top: 10%;
        left: 60%;          /* Oben Mitte */
     
    }

     20% {
        top: 29%;
        left: 60%;          /* Oben Mitte */
     
    }


      29% {
        top: 29%;
        left: 6%;          /* Oben Mitte */
     
    }


       43% {
        top: 65%;
        left: 6%;          /* Oben Mitte */
     
    }


        55% {
        top: 65%;
        left: 64%;          /* Oben Mitte */
     
    }

       62% {
        top: 76%;
        left: 64%;          /* Oben Mitte */
     
    }



       72% {
        top: 76%;
        left: 0%;          /* Oben Mitte */
     
    }

     100% {
        top: 10%;
        left: 0;          /* Start links oben */
    }
    
}


}