/*
@font-face {
    font-family: "TT_Fors";
    font-style: normal;
    font-weight: 700;
    src: url('../font/TT_Fors/TT Fors Trial Black.ttf') format("truetype");
    font-display: swap;
}*/


* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    font-family:'TT_Fors', sans-serif;
    background: #fff;
    overflow-x:hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    overflow-x:hidden;
    /*animation: overflow  .5s forwards;
    animation-delay: 6s;*/
}

body.hidden {
    overflow:hidden;
}



h1 {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    font-size:6.5vw;
    font-weight:200;
}

sup {
    font-size: 1.5rem;
    font-weight: 500;
}

.scroll {
    padding:15rem 0;
    margin:0;
}

.white-bg {
    background:#fff;
}

.dark-bg {
    background:#002135;
}

.bg-light {
    background:#CBD3DE;
    color:#002135;
}

.bg-light-100 {
    background:#DFE8F1;
}

.bg-light p, .bg-light h2 {
    color:#002135 !important;
}

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

.loader {
    --uib-size: 100px;
    --uib-color: black;
    --uib-speed: 2s;
    height: var(--uib-size);
    width: var(--uib-size);
    position:absolute;
    transform:translate(-50%,-50%);
    top:50%;
    left:50%;
    z-index:99999999999;

}

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: #D64500;
    animation: pulse var(--uib-speed) linear infinite;
    transform: scale(0);
    opacity: 0;
    transition: background-color 0.3s ease;
}

.loader::after {
    animation-delay: calc(var(--uib-speed) / -2);
}

@keyframes pulse {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    z-index:999999;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: #005196;
}

.start {
    text-align:center;
    margin-bottom:20rem;
}

.start h2 {
    font-weight:100;
    width:max-content;
    margin:auto;
    color:#fff;
    font-size:2.75rem;
    position:relative;
}

#circle {
    position:fixed;
    bottom: -7vw;
    right: -8vw;
    width: 24vw;
    z-index:999999;
    transform:rotate(-10deg);
}

strong {
    font-weight:600;
}

.main {
    max-width:2750px;
    margin:auto;
    overflow:clip;
    position: relative;
}

.logo {
    width:145px;
    position:fixed;
    top:20px;
    left:35px;
    z-index:9999;
    animation: animate-down  1s forwards;
    animation-timing-function: ease-in-out;
    animation-delay:1s;
    opacity:0;
    cursor: pointer;
}

.menu {
    position: fixed;
    right:20px;
    top:20px;
    z-index:99999;
    background:#fff;
    width:45px;
    height:45px;
    border-radius:50%;
    cursor:pointer;
    animation: animate-down  1s forwards;
    animation-timing-function: ease-in-out;
    animation-delay:1s;
    opacity:0;
    color: #003054;
    /*mix-blend-mode: difference;*/
}

.menu span {
    position: absolute;
    top:50%;
    left:44%;
    transform: translate(-50%,-50%);
    display: block;
    width: 10px;
    height: 2px;
    border-radius: 10px;
    background: #222;
    transition: all .2s ease-in-out;
    color: #003054;
}

.menu span:before,
.menu span:after {
    position: absolute;
    background: #222;
    content: '';
    width: 15px;
    height: 2px;
    transition: all .2s ease-in-out;
    border-radius: 10px;
}


.menu span:before {
    top: -6px;
}


.menu span:after {
     top: 6px;
 }

.menu.active span {
    background: transparent;
}

.menu.active span:before {
    transform: rotate(45deg) translate(5px, 6px);
    top:-7px;
}

.menu.active span:after {
    transform: rotate(-45deg) translate(5px, -6px);
    top:8px;
}

.menu-box {
    position:fixed;
    top:0;
    right:0;
    z-index:9999;
    width:30%;
    min-width:200px;
    height:100%;
    background:#fff;
    padding:3rem;
    color:#002135;
    overflow:scroll;
    opacity:0;
    transition: transform 1s ease;
    transform: translateX(100%);
}

.menu-box.show {
    transform: translateX(0);
    opacity:1;
}

.menu-box.hide {
    transform: translateX(100%);
    opacity:1;
}

.menu-box h3 {
    font-weight:400;
    margin-bottom:2rem;
}

.menu-box li {
    padding:0.75rem 0;
}

.menu-box a {
    color:#002135;
    text-decoration: none;
    font-size:1.25rem;
    transition: ease all 0.5s;
}

.menu-box li {
    transition: ease all 0.5s;
}

.menu-box li:hover > span, .menu-box li:hover {
    padding-left:0.75rem;
}

.menu-box a span {
    font-size:1rem;
    color:#005196;
    font-weight:300;
    transition: ease all 0.5s;
}

.menu-box a.menu-subline {
    font-size:1rem;
    color:#005196;
    font-weight:300;
    transition: ease all 0.5s;
    width:100%;
    display: block;
}

.lang-menu {
    position: fixed;
    right:80px;
    top:20px;
    z-index:9999;
    background:#fff;
    width:45px;
    height:45px;
    border-radius:50%;
    cursor:pointer;
    animation: animate-down  1s forwards;
    animation-timing-function: ease-in-out;
    animation-delay:1s;
    opacity:0;
    color: #003054;
}

.lang-menu.active {
    background:#003054;
}

.lang-menu.active:after {
    filter: invert(88%) sepia(100%) saturate(1%) hue-rotate(232deg) brightness(108%) contrast(101%);
}

.lang-menu:after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:25px;
    height:25px;
    background:url("../images/lang-globe.svg") no-repeat;
    background-size:contain;
    transform: translate(-50%,-50%);
}

.lang-menu-wrapper {
    position: fixed;
    right:80px;
    top:60px;
    z-index:999;
    background:#fff;
    width:auto;
    height:auto;
    border-radius:5px;
    cursor:pointer;
    color: #003054;
    padding:0.5rem 1.5rem;
    opacity:0;
    transition: ease all 0.5s;

}

.lang-menu-wrapper ul li a {
    text-decoration: none;
    color:#003054;
    padding:0.25rem 0;
    display:block;
    transition: ease all 0.5s;
}

.lang-menu-wrapper ul li.active a {
    color:#005196;
    font-weight:600;
}

.lang-menu-wrapper ul li a:hover {
    color:#005196;
}

.full-overlay {
    background:#000;
    width:100vw;
    height:100vh;
    opacity:0;
    position:fixed;
    z-index:9999;
    transition: all 0.75s ease;
    transform: translateX(100%);
}

.full-overlay.show {
    transform: translateX(0%);
    opacity:0.5;
}

.full-overlay.hide {
    transform: translateX(100%);
    opacity:0;
}

ul li {
    list-style: none;
}

.year-set {
    position: fixed;
    right:20px;
    top:95px;
    z-index:99999;
    background:#fff;
    width:45px;
    height:auto;
    border-radius: 5px;
    text-align: center;
    font-size:1.25rem;
    line-height:1.2rem;
    padding:0.3rem 0;
    font-weight:300;
    opacity:0;
    transition: ease all 0.5s;
    color: #003054;
}

.year-set.active {
    opacity:1;
}

section {
    height:auto;
    position:relative;
    background:none;
    margin:10rem 0;
}

.margin-0 {
    margin:0;
}

.margin-5 {
    margin:5rem auto !important;
}

.margin-10 {
    margin:10rem auto !important;
}

.mb-0 {
    margin-bottom:0;
}

.mt-0 {
    margin-top:0 !important;
}

.pt-0 {
    padding-top:0 !important;
}

.pt-3 {
    padding-top:3rem !important;
}

.pt-5 {
    padding-top:5rem !important;
}

.pt-10 {
    padding-top:10rem !important;
}

.pt-15 {
    padding-top:15rem !important;
}

.pt-20 {
    padding-top:20rem !important;
}

.pb-0 {
    padding-bottom:0 !important;
}

.pb-5 {
    padding-bottom:5rem !important;
}

.pb-10 {
    padding-bottom:10rem !important;
}

.pb-15 {
    padding-bottom:15rem !important;
}

.pb-20 {
    padding-bottom:20rem !important;
}

.row {
    display:flex;
}

.row.align-items-center {
    align-items:center;
}

.row.align-items-center img {
    width:100%;
    display:block;
}

.col-text {
    padding:0 10rem;
}

.col-9 {
    width:75%;
    position:relative;
}

.col-8 {
    width:75%;
    position:relative;
}

.col-6 {
    width:50%;
    position:relative;
}

.col-3 {
    width:25%;
    position:relative;
}

.col-4 {
    width:33.33333%;
    position:relative;
}

.col-7 {
    width:58.3333333333%;
    position:relative;
}

.col-5 {
    width:41.66666666666%;
    position:relative;
}

.intro {
    padding:0 10%;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    opacity: 1;
    transform-style: preserve-3d;
}

.intro h2 {
    font-size:5rem;
    color:#fff;
    font-weight:800;
    margin-bottom:2rem;
    text-transform:uppercase;

}

.intro p {
    color:#fff;
    font-size:1.25rem;
}

.intro .teaser {
    margin-top:10rem;
    width:400px;
    font-size:0.9rem;
    line-height:1.35rem;
    color:#999;
}


.section-content {
    color:#fff;
    position:absolute;
    top:22.5vw;
    left:60vw;
    width:30vw;
    max-width:450px;
}

.section-content h3 {
    font-size:2rem;
    margin-bottom:1rem;
}

.section-content p {
    opacity:0.65;
    padding:0.5rem 0;
    line-height:1.5rem;
}

.section-1 {

}

.section-2 {
    margin:20rem 0;
}

.image-wrapper {
    width:55%;
    height:80%;
    padding-top:150px;
    overflow:hidden;
    z-index:5;
    position:relative;
}

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

h1 {
    top:140px;
    /*text-transform:uppercase;*/
}

.back {
    z-index:1;
}

.front {
    z-index:10;
    -webkit-text-stroke: 1px white;
    text-stroke: 1px white;
    color:transparent;
}

.number {
    font-size:24vw;
    font-weight:900;
    color:transparent;
    position:absolute;
    right:-20vw;
    top:10vw;
    transform:rotate(90deg);
    -webkit-text-stroke: 1px white;
    text-stroke: 1px white;
    opacity:0.1;
}

.section-3 {
    margin:25rem 0;
}

@keyframes fx-intro {
    0% {
        opacity:1;

    }
    50% {
        opacity:1;
        filter: blur(0px);
        transform:translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);

    }
    75% {
    }
    100% {
        opacity:0;
        filter: blur(5px);


    }
}

@keyframes fx-example2 {
    0% {
        left:45%;

    }
    50% {

    }
    100% {
        left:40%;
    }
}

@keyframes fx-image {
    0% {
        width:100%;
        height:100%;
    }
    100% {
        width:120%;
        height:120%;
    }
}

@keyframes fx-number {
    0% {
        top:50px;
    }
    100% {
        top:335px;
    }
}

.intro-images {
    width:100%;
    height:100%;
    object-fit:cover;
    position: absolute;
    top:0;
    background:#0d141f;
}

.counter-wrapper {
    animation: counter-wrapper  1.5s forwards;
    animation-timing-function: ease-in-out;
    animation-delay:6s;
    overflow:visible;
    height:100vh;
    width:100%;
    min-height:450px;
    max-height:1200px;
    margin:0;
    position:relative;
    top:0;
    left:0;
    background:#0d141f;
    z-index:999;
}

.blur-in {
    animation: blur-in 1.5s forwards;
    transform:translate(-50%,-50%);
    position:absolute;
    top:50%;
    left:50%;
    z-index:99;
    width:100%;
    text-align: center;
}

.visible {
    opacity: 1 !important;
}

.visible-image {
    opacity: 1 !important;
    transform:scale(1) !important;
}

.counter {
    counter-reset: ms var(--number);
    animation: count 3s steps(100) forwards;
    animation-delay:1s;
    text-align: center;
    color:#fff;

}
.counter::after {
    content: counter(ms);
    font-size: 5rem;
}

#yearCounter {
    font-size: 20rem;
    font-weight:200;
    /*color:#cbd3de;*/
    color:#fff;
    /*animation: blur-out 0.5s forwards;
    animation-delay: 4s;
    opacity:1;*/
}

.years {
    font-size: 5rem;
    color:#fff;
    position:absolute;
    width:100%;
    top:0;
    left:0;
    animation: blur-in 0.5s forwards;
    animation-delay: 4s;
    opacity:0;
}

.transition-text h1 {
    font-size:4rem;
    text-align:center;
    top:0;
    width:100%;
    font-weight:300;
}

.transition-text h1 strong {
    font-weight:500;
}

@property --number {
    inherits: false;
    syntax: '<integer>';
    initial-value: 1924;
}

.counter-wrapper img {
    opacity:0;
    /*transform:scale(1.1);
    transition:ease 0.5s ;*/
}

.overlay {
    background:#002033;
    opacity:0.7;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.overlay-bottom {
    background: rgb(13,20,31);
    background: linear-gradient(180deg, rgba(0,32,51,0) 0%, rgba(0,32,51,1) 100%);
    opacity:0;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:30%;
    animation: animate-down  1s forwards;
    animation-timing-function: ease-in-out;
    animation-delay:6s;
}

.bg-white {
    background: #D5DBE4;
    opacity:0;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    animation: animate-down  1s forwards;
    animation-timing-function: ease-in-out;
    /*animation-delay:9s;*/
}

.headline h1 {
    font-size: 5vw;
    /*font-family:'Old Standard TT';*/
    font-family:'TT_Fors';
    font-weight:200;
    line-height:5vw;
    color:#002135;
    position:absolute;
    top:45%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align: left;
    opacity:0;
    animation: blur-in 1s forwards;
    animation-delay: 1.25s;
}

.headline h1 strong {
    font-weight:500;
}

.headline h1 span {
    color:#004C96;
}

.blurry-box {
    /*backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    height: 40%;
    transform: translate(-50%, -50%);
    border: 1px solid #666;
    border-radius: 20px;
    animation: blur-in 1s forwards;
    animation-delay: 5.25s;
    opacity:0;*/
}

/*.headline h1 span {
    width: 220px;
    display: inline-block;
    top: -70px;
    left: 5px;
    position: relative;
}

.headline h1 span .inner {
    position:absolute;
    top:0;
    left:0;
}

.headline h1 span .first {
    font-family: 'Leckerli One';
    opacity:0;
}

.headline h1 span .second {
    font-family: 'Style Script';
    opacity:0;
}

.headline h1 span .third {
    font-family: 'Work Sans';
    opacity:0;
}

.headline h1 span .fourth {
    font-family: 'Playfair Display';
    opacity:0;
}*/

.progress-line {
    width:2px;
    height:100px;
    background: #002033;
    margin:auto;
    position: absolute;
    bottom:2em;
    left:50%;
    transform: translate(-50,0);
    overflow:hidden;
}

.progress-inner {
    width:100%;
    height:100%;
    background:#D5DBE4;
}

.progress-loop {
    width:100%;
    top:-25px;
    height:25px;
    background:#004C96;
    animation: progress-loop 3s infinite;
    /*animation-delay:13s;*/
    position:absolute;
}

.subline {
    color:#fff;
    font-size:1rem;
    margin-top:-2rem;
    opacity:0;
    animation: animate-down  .5s forwards;
    animation-timing-function: ease-in-out;
    animation-delay:4.25s;
}

.intro-subline {
    color:#fff;
    font-size:2rem;
    font-weight:400;
}

.text {
    text-align: center;
    font-size: 3rem;
    font-weight: 300;
    color:#fff;
}

.text * {
    opacity: 0.25;
    transition: 0.25s ease
}

.start .reveal{
    font-size: 2.75rem;
    font-weight:300;
    animation: slide-up 1ms linear forwards;
    animation-timeline: view(block 70% 0%);
    clip-path: inset(0 100% 0 0);
    position: relative;
}

.counter-wrapper .floating-images {
    position:absolute;
    object-fit: cover;
    opacity:0;
    overflow:hidden;
}

.counter-wrapper .floating-images img {
    opacity: 1;
    width:100%;
    height:100%;
    object-fit: contain;
}

.floating-image-1 {
    width: 100%;
    bottom: -5px;
    left: -2%;
    animation: blur-in 1s forwards;
    animation-delay:2s;
}

.counter-wrapper .floating-image-1 img {
    width:50%;
}

.floating-image-2 {
    top: -8%;
    width: 50%;
    left: 40%;
    height: 41%;
    animation: blur-in 1s forwards;
    animation-delay:2.5s;
}

.floating-image-3 {
    top: 75%;
    right: 20%;
    height: 55%;
    animation: blur-in 1s forwards;
    animation-delay:2.75s;
}

.counter-wrapper .floating-image-3 img {
    width:auto;
}

.floating-image-4 {
    top: -16%;
    right: -25%;
    height: 100%;
    width: 70%;
    animation: blur-in 1s forwards;
    animation-delay:3s;
    mix-blend-mode: darken;
}


@keyframes slide-up{
    100%{
        clip-path: inset(0 0% 0 0);
    }
}

.road-line-wrapper {
    position:absolute;
    transform: scale(1.5);
    top:125vh;
}

#road-line {
    width:100vw;
    height:auto;
}


@keyframes count {
    0% {
        --number: 1924;
        transform: scale(1);
    }
    100% {
        --number: 2024;
        transform: scale(1.25);
    }
}

@keyframes counter-wrapper {
    0% {
        top:0;

    }
    100% {
        /*top:-200vh;*/
    }
}

@keyframes blur-in {
    0% {
        filter: blur(10px);
        opacity:0;
    }
    100% {
        filter: blur(0px);
        opacity:1;
    }
}

@keyframes blur-in-back {
    0% {
        filter: blur(15px);
        opacity:0;
    }
    100% {
        filter: blur(5px);
        opacity:0.75;
    }
}

@keyframes blur-out {
    0% {
        filter: blur(0px);
        opacity:1;
    }
    100% {
        filter: blur(10px);
        opacity:0;
    }
}

@keyframes image-fade {
    0% {
        transform:scale(1.25);
    }

    50% {
        transform:scale(1);
    }
    100% {
    }
}

@keyframes image-fade-fix {
    0% {
        opacity:0;
        transform:scale(1.1);
    }

    50% {
        opacity:1;
        transform:scale(1);
    }
    100% {
        opacity:1;
    }
}

@keyframes animate-down {
    0% {
        opacity:0;
        margin-top:-2rem;
    }
    100% {
        opacity:1;
        margin-top:1rem;
    }
}

@keyframes progress {
    0% {
        height:0;
    }
    100% {
        height:100%;
    }
}

@keyframes progress-loop {
    0% {
        top:-25px;
    }
    100% {
        top:100px;
    }
}

@keyframes overflow {
    0% {
        overflow-y:hidden;
    }
    100% {
        overflow-y:scroll;
    }
}

#circle path {
    stroke: #004C96;
    stroke-opacity: 1;
    stroke-width: 0.85;

}

#Layer_2 path {
    stroke: #CBD3DE;
    stroke-opacity: 1;
    stroke-width: 25;
}

#Layer_2 path:nth-of-type(1) {
    stroke-dasharray: 1697.88, 1697.88;
    stroke-dashoffset: 1697.88;
    animation: offset 2s ease-in-out forwards;
    animation-delay: 2.25s;
}

/*rcle path:nth-of-type(1) {
    stroke-dasharray: 1697.88, 1697.88;
    stroke-dashoffset: 1697.88;
    animation: offset 4s ease-in-out forwards;
    animation-delay: 2.25s;
}

#circle path:nth-of-type(2) {
    stroke-dasharray: 1697.88, 1697.88;
    stroke-dashoffset: 1697.88;
    animation: offset 4s ease-in-out forwards;
    animation-delay: 1s;
}*/

#duo-font {
    fill-opacity: 0;
}

#duo-font path {
    stroke: #004C96;
    stroke-opacity: 1;
    stroke-width: 0.85;
}

#duo-font path {
    stroke-dasharray: 1697.88, 1697.88;
    stroke-dashoffset: 1697.88;
    animation: offset 2s ease-in-out forwards;
}

@keyframes offset {
    10% {

    }
    100% {
        stroke-opacity: 1;
        stroke-dashoffset: 1;
    }
}

.begin .container {
    padding:0 15px;
}

.begin {
    text-align:left;
    margin-top:-5rem;
    background: #EFEFF0;
}

.begin.mid {
    margin-top:0;
    padding:5rem 0;
}

.begin .intro-sub {
    color:#CBD3DE;
    font-size:50px;
    width:100%;
    display:inline-block;
    font-weight:400;
    padding-left:400px;
}

.begin .intro-date {
    color:#CBD3DE;
    font-size:90px;
    width:100%;
    display:inline-block;
    padding-left:400px;
    margin-top:-1vw;
}

.begin .intro-year {
    color:#fff;
    font-size:500px;
    width:100%;
    display:inline-block;
    font-weight:100;
    padding-left:550px;
    margin-top:-8rem;
    margin-left:-8rem;
}

.begin .intro-year strong {
    font-weight:400;
}

.begin .portrait-wrapper {
    margin-left: 10vw;
    margin-top:-30rem;
    display:flex;
}

.begin .portrait {
    max-width:600px;
    text-align: center;
    position:relative;
    height: 100%;
}


.begin .portrait img {
    width:100%;
}

.begin .portrait span {
    font-weight:400;
    margin-top:-65px;
    display:block;
    color: #003054;
}


.begin .portrait-text {
    max-width:700px;
    margin-top:30%;
    padding-left:5rem;
    padding-right:5rem;
}

button {
    font-family:'TT_Fors', sans-serif;
}

.begin .portrait .exkurs {
    right:10%;
    top:56%;
}

.exkurs:after {
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    max-width:15px;
    max-height:15px;
    width:1vw;
    height:1vw;
    background:url('../images/arrow.svg') no-repeat;
    background-size:contain;
    transition:ease all 0.5s;
}

.exkurs {
    background:#D64500;
    border-radius:50%;
    max-width:45px;
    max-height:45px;
    width:3vw;
    height:3vw;
    position:absolute;
    -webkit-box-shadow: 0px 0px 25px 0px rgba(214,69,0,0.5);
    box-shadow: 0px 0px 25px 0px rgba(214,69,0,0.5);
    transition:ease all 0.5s;
    cursor: pointer;
    border:1px solid #D64500;
    z-index:9;
}

.exkurs:hover {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(214,69,0,0.75);
    box-shadow: 0px 0px 0px 0px rgba(214,69,0,0.75);
    /*background:none;*/

}

.exkurs:hover:after {
    /*max-width:12px;
    max-height:12px;*/
}

.exkurs-overlay {
    max-width:100%;
    max-height:100%;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    border-radius:0;
    background:none;
    border:none;
}

.exkurs-overlay:after {
    display:none;
}

.exkurs-kinder-heinrich {
    top:0;
    right:1%;
    width: 36%;
    height: 39%;
}

.exkurs-kinder-johannes {
    bottom:0;
    right:1%;
    width: 36%;
    height: 39%;
}

.exkurs-sigrid {
    bottom: 0;
    right: 0;
    width: 21%;
    height: 40%;
}

.exkurs-ralf {
    top: 0;
    right: 0;
    width: 24%;
    height: 40%;
}

.exkurs-patrick {
    bottom: 0;
    right: 0;
    width: 41%;
    height: 100%;
}

.exkurs-bubble-patrick {
    top: -15%;
    right: 10%;
}

.side-exkurs-wrapper {
    position:fixed;
    width:65%;
    max-width:1000px;
    right:0;
    top:0;
    z-index:99999;
    background:#fff;
    text-align:left;
    height: 100%;
    opacity:0;
    transition: transform 1s ease;
    transform: translateX(100%);
}

.side-exkurs-wrapper.show {
    transform: translateX(0);
    opacity:1;
}

.side-exkurs-wrapper.hide {
    transform: translateX(100%);
    opacity:1;
}

.side-exkurs-wrapper h2, .content-section .side-exkurs-wrapper h2  {
    margin-top:3rem;
    font-size: 42px;
    color: #003054 !important;
    line-height: 2.75rem;
    text-align:left !important;
    padding:0 !important;

}

.side-exkurs-wrapper p, .content-section .side-exkurs-wrapper p {
    font-size:1rem;
    font-weight:300;
    margin-bottom:2rem;
    color: #002135 !important;
}

.exkurs-inner {
    overflow:scroll;
    height: 100%;
    padding:5% 10%;
}

.exkurs-inner h3 {
    color:#003054;
}

.side-exkurs-wrapper .exkurs-close {
    position:fixed;
    right:30px;
    top:30px;
    width:30px;
    height:30px;
    background:url('../images/arrow-right.svg') no-repeat;
    background-size:contain;
    cursor: pointer;
    border:none;
}

.bildunterschrift {
    font-size:0.85rem;
    color:#999;
    font-weight:300;
    margin-top:0.75rem;
}

.exkurs-muehle {
    top:30%;
    left:36%;
}

.exkurs-auftragsbuecher {
    top:30%;
    left:36%;
}

.exkurs-uebernahme {
    top:15%
}

.exkurs-uebernahme-enkel {
    top:-25px;
    right:0;
}

.exkurs-next-generation {
    margin-left:5%;
}

.newspaper-wrapper {
    position:relative;
    padding-top:15vw;
}

.newspaper-wrapper p {
    max-width:500px;
    width:30vw;
}

.newspaper-wrapper .newspaper {
    position:absolute;
    right:-23vw;
    top:0;
    z-index:5;
}

.newspaper-wrapper .newspaper img {
    max-width:1400px;
    width:85vw;
    object-fit: contain;
}

.newspaper-wrapper .newspaper .exkurs {
    left:5%;
    top:56%;
}

.line-wrapper {
    position:relative;
    height:5rem;
    transition: ease all 1.5s;
    left: 20%;

}

.line-wrapper.shifted {
    left:0;
}

.line-wrapper.shifted .this-year {
    font-size: 4rem;
}

.line-wrapper strong {
    font-weight:500 !important;
}

.line-overlay {
    position: absolute;
    height:200%;
    width:45%;
    top:100%;
    transform:translate(0,-50%);
}

.line-overlay-left {
    left:0;
    background: rgb(239,239,240);
    background: linear-gradient(90deg, rgba(239,239,240,1) 0%, rgba(239,239,240,0) 100%);
}

.bg-dark .line-overlay-left {
    left:0;
    background: rgb(0,33,53);
    background: linear-gradient(90deg, rgba(0,33,53,1) 0%, rgba(0,33,53,0) 100%);
}

.line-white-bg .line-overlay-left {
    left:0;
    background: rgb(0,33,53);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.line-overlay-right {
    background: rgb(239,239,240);
    right:0;
    background: linear-gradient(90deg, rgba(239,239,240,0) 0%, rgba(239,239,240,1) 100%);
}

.bg-dark .line-overlay-right {
    right:0;
    background: rgb(0,33,53);
    background: linear-gradient(90deg, rgba(0,33,53,0) 0%, rgba(0,33,53,1) 100%);
}

.line-white-bg .line-overlay-right {
    right:0;
    background: rgb(0,33,53);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

.timeline {
    width:150%;
    height:40px;
    position:absolute;
    bottom:-21px;
    left:50%;
    transform: translate(-50%,0);
    background:url('../images/timeline.svg') no-repeat;
    background-position: bottom;
}

.this-year {
    position:absolute;
    top:0;
    left:50%;
    font-size:2rem;
    color:#005196;
    transform: translate(-50%,-50%);
    font-weight:200;
    transition: ease all 1.5s;
    z-index:5;
}

.bg-dark .this-year {
    color:#CBD3DE;
}

.this-year:after {
    content:'';
    width:2px;
    height:4rem;
    background:#005196;
    position:absolute;
    left:50%;
    bottom:-67px;
    transform: translate(-50%,0);
}

.bg-dark .this-year:after {
    background:#CBD3DE;
}

.line-year {
    top:30%;
    position:absolute;
    font-size:1.5rem;
    color:#005196;
    font-weight:200;
    transform: translate(-50%,-50%);
}

.bg-dark .line-year {
    color:#CBD3DE;
}

.line-year:after {
    /*content:'';
    width:2px;
    height:2.5rem;
    background:#005196;
    position:absolute;
    left:50%;
    bottom:-44px;
    transform: translate(-50%,0);*/
}

.bg-dark .line-year:after {
    background:#CBD3DE;
}

.line-year span {

}

.prev-year {
    left:19.5%;
    transition: ease all 1.5s;
    font-size:3rem;
}

.shifted .prev-year {
    font-size:1.5rem;
}

.next-year {
    right:18.75%;
}

.image-full {
    margin-top:15rem;
    position:relative;
}

.image-full img {
    width:100%;
}

.blue-box {
    position:absolute;
    bottom:10rem;
    left:3rem;
    background:#005196;
    color: #CBD3DE;
    padding:0 1rem 3rem 3rem;
    max-width:650px;
    z-index:99;
}

.box-top .blue-box{
    bottom:unset;
    top:-5rem;
}

.content-section .blue-box p {
    color:#CBD3DE;
    font-size:1.1rem;
    padding-right:2rem;
}

.content-section .blue-box .year {
    font-size:15.625rem;
    color:#173F79;
    font-weight:100;
    line-height: 14rem;
    width: 100%;
    display: block;
    text-align: right;
}

.content-section .blue-box .year strong {
    font-weight:400;
}

.content-section.bg-dark {
    background:#002135;
    padding-top:10rem;
}

.bg-dark {
    background:#002135;
}

.content-section.bg-dark h2, .content-section .bg-dark h2 {
    color: #CBD3DE;
}

.content-section.bg-dark p, .content-section .bg-dark p{
    color:#CBD3DE;
}

.years-50 {
    position: relative;
}

.years-50 .year, .years-40 .year, .years-60 .year, .years-20 .year {
    color:#005196;
    opacity: 0.2;
    font-weight:100;
    position: absolute;
    top:-10%;
    margin-left:-10rem;
}

.year-background {
    font-size:800px;
}

.years-50 .year {
    top:10%;
}

.years-50 .year.white, .years-20 .year.white {
    color:#CBD3DE;
    opacity:0.2;
    top:-10%;
}

.years-20 .year.white {
    /*top:-150%;*/
    top:-100%;
}

.years-50 .free-image {
    max-width: 600px;
    width:100%;
}

.produkte-50 h2 {
    margin-top:5rem;
    padding-right:2rem;
    padding-left:10%;
}

.produkte-50 p {
    max-width:600px;
    padding-left:10%;
}

.years-50 .year strong, .years-40 .year strong {
    font-weight:400;
}

.years-50 .content-text {
    max-width:500px;
    margin-left:35%;
    position: relative;
}

.years-40 .content-text {
    max-width:750px;
    margin-left:15%;
    position: relative;
}

.years-40 .images {
    position:relative;
    width:100%;
}

.year-1958 .thanks-headline, .year-1958 .subheader{
    text-align:center;
    width:100%;
}

.year-1958 .thanks-wrapper {
    padding:15rem 0;
}

.year-1958 .subheader {
    font-size:1.5rem;
    margin-bottom:1rem;
    opacity:0.75;
    font-weight:300;
}

.year-1958 .thanks-headline {
    font-size:5.8rem;
    line-height:6.25rem;
}

.years-50 .year-1958 .year.white {
    top: -25%;
}

.exkurs-heinrich {
    top: 70%;
    left: 20%;
    color:#fff;
    border-radius:50px;
    padding:0.5vw 1vw;
    font-size:1vw;
    width:max-content;
    height:max-content;
    max-width:100%;
    max-height:100%;
}

.exkurs-heinrich:after {
    display:none;
}

.exkurs-johannes {
    top: 54%;
    left: 63%;
    color:#fff;
    border-radius:50px;
    padding:0.5vw 1vw;
    font-size:1vw;
    width:max-content;
    height:max-content;
    max-width:100%;
    max-height:100%;
}

.exkurs-johannes:after {
    display:none;
}

.exkurs-img-sigrid {
    top: 72%;
    left: 20%;
    color:#fff;
    border-radius:50px;
    padding:0.5vw 1vw;
    font-size:1vw;
    width:max-content;
    height:max-content;
    max-width:100%;
    max-height:100%;
}

.exkurs-img-sigrid:after {
    display:none;
}

.exkurs-img-ralf {
    top: 65%;
    right: 5%;
    color:#fff;
    border-radius:50px;
    padding:0.5vw 1vw;
    font-size:1vw;
    width:max-content;
    height:max-content;
    max-width:100%;
    max-height:100%;
}

.exkurs-img-ralf:after {
    display:none;
}

.exkurs-img-heinrich {
    top: 65%;
    right: 37%;
    color:#fff;
    border-radius:50px;
    padding:0.5vw 1vw;
    font-size:1vw;
    width:max-content;
    height:max-content;
    max-width:100%;
    max-height:100%;
}

.exkurs-img-heinrich:after {
    display:none;
}

.exkurs-img-klaudine {
    bottom: 22%;
    right: 10%;
    color:#fff;
    border-radius:50px;
    padding:0.5vw 1vw;
    font-size:1vw;
    width:max-content;
    height:max-content;
    max-width:100%;
    max-height:100%;
}

.exkurs-img-klaudine:after {
    display:none;
}

.exkurs-img-patrick {
    bottom: 15%;
    right: 30%;
    color:#fff;
    border-radius:50px;
    padding:0.5vw 1vw;
    font-size:1vw;
    width:max-content;
    height:max-content;
    max-width:100%;
    max-height:100%;
}

.exkurs-img-patrick:after {
    display:none;
}

/*.years-40 .images:before {
    content:'Heinrich Jacob';
    position: absolute;
    top: 70%;
    left: 20%;
    background:#D64500;
    color:#fff;
    border-radius:50px;
    padding:0.25vw 1vw;
    font-size:1vw;
}

.years-40 .images:after {
    content:'Johannes Jacob';
    position: absolute;
    top: 54%;
    left: 63%;
    background:#D64500;
    color:#fff;
    border-radius:50px;
    padding:0.25vw 1vw;
    font-size:1vw;
}
 */

.years-40 .images img {
    width:100%;
    display:block;
}

.years-50 p, .years-40 p {
    margin-bottom:8rem;
}

.silver-box {
    background:#CBD3DE;
    position: relative;
    overflow:hidden;
}

.silver-box.bg-dark {
    background:#002135;
}

.silver-box .year {
    color:#FFFFFF;
    opacity:0.25;
    font-size:550px;
    top:50%;
    right:0;
    transform:translate(0,-50%);
    font-weight: 100;
    position: absolute;
}

.silver-box.bg-dark .year {
    color:#005196;
    opacity: 0.2;
}

.content-section.bg-dark .silver-box p, .silver-box p, .silver-box h2 {
    padding:10%;
    max-width:1000px;
    color:#002135;
    position: relative;
    margin-bottom:0;
}

.quote-wrapper {
    background:#fff;
    margin:20rem 0 15rem 0;
}

.quote-wrapper .container {
    padding:0 15px;
}

.quote-bg-light {
    background:#CBD3DE;
    margin:0;
    padding:10rem 0 5rem 0;
}

.quote-wrapper .container {
    display:flex;
    align-items: center;
}

.quote-content-wrapper {
    position:relative;
    max-width:1550px;
}

.quote-content-wrapper .subheader {
    color:#004C96;
    font-weight:300;
    margin-bottom:2rem;
    position: relative;
}

.quote-content-wrapper .quote {
    font-size:3.125rem;
    line-height:3.5rem;
    padding-right:7.5rem;
    color:#003054;
    position:relative;
}

.quote-content-wrapper:before {
    content:'';
    position:absolute;
    top:-100px;
    left:-100px;
    width:220px;
    height:200px;
    background:url('../images/quote.svg') no-repeat;
    background-size:contain;
}

.quote-bg-light .quote-content-wrapper:before {
    background:url('../images/quote-white.svg') no-repeat;
    background-size:contain;
}

.quote-content-wrapper .quote strong {
    font-weight:500;
}

.quote-content-wrapper .quote-desc {
    margin-top:2rem;
}

.quote-content-wrapper .quote-desc span {
    width:100%;
    display:block;
}

.quote-content-wrapper .quote-desc .name {
    font-size:1.25rem;
    color: #003054;
}

.quote-content-wrapper .quote-desc .position {
    color:#004C96;
    font-size:1.1rem;
}

.quote-image-wrapper {
    width:1400px;
}

.quote-image-wrapper img {
    /*width:100%;*/
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    width:375px;
}

#before-after-slider {
    width:100%;
    position:relative;
    overflow:hidden;
}

#before-after-slider img {
    height:100%;
    object-fit: cover;
}

#after-image {
    display:block
}

#before-image {
    position:absolute;
    height:100%;
    width:50%;
    top:0;
    left:0;
    overflow:hidden;
    z-index:2;
}

#resizer {
    position:absolute;
    display:flex;
    align-items:center;
    z-index:5;
    top:0;
    left:50%;
    height:100%;
    width:4px;
    background:white;
    /*Stop vertical scrolling on touch*/
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

#resizer:after {
    background:#fff;
    font-family: "Font Awesome 5 Free";
    content:'\f337';
    font-weight:900;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    position:absolute;
    margin: 0 0 0 -22px;
    width:40px;
    height:40px;
    border-radius:50%;
    border:3px solid white;
    cursor:grab;

}

.container {
    max-width:1600px;
    margin:auto;
    padding:0 5%;
}

.container-xl {
    max-width:2000px;
    margin:auto;
    padding:0 5%;
}

.d-flex {
    display:flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.aCenter {
    align-items: center;
}

.container-m {
    max-width:1400px;
}

.container-s {
    max-width:1200px;
}

.content-section h1 {
    font-weight:400;
    font-size:5rem;
    color:#003054;
    line-height:5rem;
    margin-bottom:2rem;
    position: relative;
    top:unset;
    transform: unset;
    left:unset;
}

.content-section h2 {
    font-weight:400;
    font-size:3.5rem;
    color:#003054;
    line-height:4.25rem;
    margin-bottom:2rem;
}

.content-section h3 {
    font-weight:400;
    font-size:1.625rem;
    margin-bottom:1rem;
}

.content-section p {
    font-weight:400;
    font-size:1.313rem;
    line-height:1.285em;
    color:#003054;
}

.free-image {
    width:55%;
    margin-top:-5%;
    object-fit: contain;
}

.free-image-text {
    max-width:525px;
    width:50%;
    padding-left:5rem;
    padding-top:10rem;

}

.reveal-text {
    visibility: hidden;
}

.line {
    position: relative;
    overflow: hidden;
    display: flex;
}

img-comparison-slider {
    visibility: hidden;
    cursor: grab;
}

img-comparison-slider [slot='second'] {
    display: none;
}

img-comparison-slider.rendered {
    visibility: inherit;
}

img-comparison-slider.rendered [slot='second'] {
    display: unset;
}

img-comparison-slider.rendered {
    width:100%;
    outline:none;
    display:block;
}

.before figcaption,
.after figcaption {
    background:#003054;
    border-radius: 50px;
    color: #CBD3DE;
    padding: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 100%;
}

.before figcaption {
    left: 12px;
}

.after figcaption {
    right: 12px;
}

.slider-with-animated-handle:active .custom-animated-handle {
    opacity: 0;
}

.custom-animated-handle {
    transition: transform 0.2s;
}

.slider-with-animated-handle:hover .custom-animated-handle {
    transform: scale(1.2);
}

.slider-with-animated-handle .custom-animated-handle {
    width:40px;
    height:40px;
    border-radius:50%;
    position: relative;
    background-image:url('../images/handle-icon.svg');
    background-size: contain;
    transition: ease all 0.5s;
}

.img-fluid {
    width:100%;
    display:block;
}

.img-50 {
    width:50%;
    float:left;
    margin-bottom:2rem;
}

.gallery {
    width:50%;
    padding:0.5rem;
}

.splide {
    margin:2rem 0;
}

.splide__slide img {
    width:200px;
    margin-right:10px;
    border-radius:10px;
}

.splide__progress__bar {
    background:#D64500;
    position:absolute;
    top:0;
    z-index:99;
}

.glightbox .imgwrap:after {
    content:'+';
    position:absolute;
    font-size:3rem;
    color:#003054;
    width:30px;
    height:50px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    opacity:0;
    transition: ease all 0.5s;
}

.glightbox .imgwrap {
    position:relative;
}

.glightbox img {
    transition: ease all 0.5s;
}

.glightbox:hover img {
    transform:scale(0.9);
    opacity:0.75;
}

.glightbox:hover .imgwrap:after {
    opacity:1;
}

.big-img-slider {
    background:#002135;
    margin:0;
}

.big-img-slider .splide__slide img {
    width:100%;
    height:100vh;
    object-fit: cover;
    border-radius:0;
    margin:auto;
    opacity:0.6;
    max-height:1080px;
}

.big-img-slider .slider-title {
    position:absolute;
    color:#fff;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    font-size:4vw;
    width:80%;
    text-align:center;
}

.slider-small-title .slider-title {
    position:absolute;
    color:#fff;
    top:unset;
    left:unset;
    right:5%;
    bottom:10%;
    width:max-content;
    text-align:left;
    transform:unset;
}

.slider-small-title .slider-title p {
    color:#CBD3DE;
    font-size:1.5rem;
    text-align:right;
}

.slider-small-title .slider-title h2 {
    color:#CBD3DE;
    text-align:right;
    font-size:17rem;
    line-height:15rem;
    font-weight:100;
}

.slider-small-title .slider-title h2 strong {
    font-weight:500;
}

#image-carousel-3, #image-carousel-3 .splide__slide img {
    height:100%;
    max-height:100%;
    opacity:1;
}

.exkurs-patente {
}

.exkurs-patente-inner img {
    width:75%;
    max-width:350px;
    margin-top:1rem;
    border:1px solid #ddd;
    margin-bottom:0.75rem;
}

.big-scroll-wrapper {
    min-height:1000px;
    height:150vh;
    margin-top:0;
    margin-bottom:0;
    background:rgba(0, 33, 53,0);
    max-height:2100px;
    z-index:10;
}

.big-scroll-inner-wrapper {
    position: sticky;
    top:-10rem;
}

.big-scroll-image {
    width:165%;
    display:block;
    padding-top:5rem;
    margin-left: 50%;
    transform: translateX(-50%);
    position: relative;
}

.big-scroll-title {
    position:absolute;
    left:50%;
    top:40%;
    transform:translate(-50%,-50%);
    font-size:4vw;
    color:#003054;
    text-align:center;
}

.big-scroll-content {
    padding-bottom:10rem;
}

.big-scroll-content p {
    color:#CBD3DE;
    font-size:1.5rem;
    text-align:center;
    padding:15% 25%;
    opacity:0;
}

.big-scroll-content h2 {
    color:#fff;
    text-align:center;
    font-size:2.4rem;
    font-weight:400;
    line-height:42px;
    padding:0 15%;
    width:100%;
}

.big-scroll-content h2 span {
    color:#CBD3DE;
}

.big-scroll-content .product-left {
    position: absolute;
    left: -500px;
    top: -15%;
    width: 20vw;
    height:auto;
    object-fit: contain;
    opacity:0;
    max-width:650px;
    max-height:650px;
    z-index:20;
}

.big-scroll-content .product-right {
    position: absolute;
    right: -500px;
    top: -15%;
    width: 20vw;
    height:auto;
    object-fit: contain;
    opacity:0;
    max-width:650px;
    max-height:650px;
    z-index:20;
}

.bg-wrapper {
    height:185vh;
    position: relative;
}

.big-full-image-scroll-bg-wrapper {
    position:sticky;
    top:0;
}

.big-full-image-scroll-object {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 50vw;
    height: 45vw;
    object-fit: contain;
    opacity: 0;
}

.big-full-image-scroll-text {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    font-size:3vw;
    width:80%;
    color:#fff;
    text-align: center;
    opacity:0;
    margin-top: 2rem;
}

.img-fixed-morph-60 {
    position:absolute;
    width:50vh;
    object-fit:contain;
    transform:translate(-50%,-50%);
    top:50%;
    left:50%;
    opacity:0;
}

.morph-img-01 {
    margin-top:100px;
}

.morph-headline {
    opacity:0;
    margin-top:50px;
}

.horizontal-wrapper h2 {
    font-weight: 400;
    font-size:3vw;
    max-width:750px;
}

.horizontal-wrapper h3 {
    font-weight: 400;
    font-size:30px;
}

.sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    max-height:1000px;
    overflow-x: hidden;
}

.horizontal {
    position: absolute;
    height: 100%;
    will-change: transform;
}

.cards {
    position: relative;
    height: 100%;
    padding: 0 0 0 2.5rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.sample-card {
    position: relative;
    height: 550px;
    width: 400px;
    margin-right: 10px;
    flex-shrink: 0;
}

.sample-card:first-child {
    margin-left:8rem;
}

.sample-card img {
    width:100%;
    display:block;
    height:100%;
    object-fit: contain;
}

.children-wrapper .children-bg {
    position:absolute;
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
    opacity:0.1;
}

.children-content {
    padding:10rem 5rem 15rem 5rem;
}

.karte-content {
    position:absolute;
    top:50%;
    left:5%;
    transform: translate(0,-50%);
    width:400px;
}

.map-wrapper {
    position:relative;
    display:block;
}

.map-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
}

.marker {
    position:absolute;
    top:50%;
    right:50%;
    font-size:0.9rem;
    color:#8F9BA3;
    background:#D64500;
    width:20px;
    height:20px;
    border-radius: 50%;
}

.marker span {
    position:absolute;
    left:25px;
}

.marker.marker-algerien {
    top: 53.8%;
    right: 48.8%;
}

.marker.marker-spanien {
    top: 45.6%;
    right: 52.1%;
}

.marker.marker-spanien span {
    right:25px;
    left:unset;
}

.marker.marker-griechenland {
    top: 46.7%;
    right: 39.4%;
}

.marker.marker-italien {
    top: 44.5%;
    right: 43.7%;
}

.marker.marker-italien span {
    right:25px;
    left:unset;
}

.marker.marker-frankreich {
    top: 37.9%;
    right: 48.2%;
}

.marker.marker-frankreich span {
    right:25px;
    left:unset;
}

.marker.marker-england {
    top: 32.6%;
    right: 50.85%;
}

.marker.marker-england span {
    right:25px;
    left:unset;
}

.marker.marker-oestereich {
    top: 39.7%;
    right: 43.9%;
}

.marker.marker-luxemburg {
    top: 36.9%;
    right: 45.7%;
}

.marker.marker-daenemark {
    top: 28.6%;
    right: 45.9%;
}

.marker.marker-schweden {
    top: 22.2%;
    right: 43.9%;
}

.marker.marker-finnland {
    top: 17.2%;
    right: 39.4%;
}

.marker.marker-norwegen {
    top: 15.1%;
    right: 44.5%;
}

.marker.marker-norwegen span {
    right:25px;
    left:unset;
}

.marker.marker-niederlande {
    top: 32.9%;
    right: 47.75%;
}

.marker.marker-niederlande span {
    top:-0.8rem;
}

.marker.marker-belgien {
    top: 35.3%;
    right: 47%;
}

.marker.marker-belgien span {
    top:-0.7rem;
}

.marker.marker-schweiz {
    top: 39.7%;
    right: 45.9%;
}

.marker.marker-schweiz span {
    right:25px;
    left:unset;
    top:0.5rem;
}

.mitarbeiter-silo-wrapper {
    background:#CBD3DE;
    margin-bottom:10rem;
    padding-bottom:45rem;
}

.mitarbeiterzahlen {
    width:90%;
    margin-left:5%;
}

.silo-bg {
    position:absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 115%;
}

.silo {
    position:absolute;
    top: 6%;
    left: 41%;
    width: 35%;
    transition: ease all 0.5s;
    animation: silo  5s infinite;
    animation-timing-function: ease-in-out;
    margin-top:7rem;
}

.silo-content {
    position:absolute;
    bottom:0;
    left:5%;
    width:400px;
}

.years-1960 {
    background:#E5E9ED;
    height:calc(60vw + 50px);
    position:relative;
    max-height:1550px;
}

.years-1960 .number1960 {
    position:absolute;
    width:80%;
    bottom:0;
    left:-5%;
}

.years-1960 .freisteller1960 {
    position:absolute;
    width:35%;
    bottom:-1.5rem;
    right:-2%;
}

.years-1960 .content1960 {
    position:absolute;
    top:8%;
    width:35%;
    left:35%;
}

.exkurs-1960 {
    top: 36%;
    left: 20.75%;
}

.poll-wrapper {
    background:#002135;
}

.quiz-bg {
    position: absolute;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    object-fit: cover;
}

.poll-inner {
    padding:15rem 20% 0 20%;
}

.poll-buttons-wrapper {
    padding:0 5rem 15rem 5rem;
}

.poll-inner .poll-subline {
    color:#D64500;
    font-size:1.5rem;
    margin-bottom:1rem;
    display:block;
    position: relative;
}

.poll-inner h2 {
    color:#fff;
    position: relative;
}

.poll-btn {
    background:#CBD3DE;
    color:#002135;
    font-size:1.5rem;
    padding:0.5rem 3.5rem;
    border-radius:5px;
    border:none;
    outline:none;
    box-shadow:none;
    font-weight:400;
    font-family: 'TT_Fors';
    transition: ease all 0.5s;
    cursor: pointer;
    margin:2rem;
}

.poll-btn:hover {
    background:#D64500;
    color:#fff;
}

.poll-bg-1960 {
    background:url('../images/JACOB_Industriebericht_1963_komp.jpg') no-repeat;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0.1;
    background-size:cover;
}

.poll-buttons-wrapper .bildunterschrift {
    color:#fff;
    position:relative;
    width:50%;
    margin:auto;
}

.bu-blechkollege {
    display:none;
}

.check-button-wrapper {
    position:relative;
    width:100%;
    margin-top:6.5rem;
    margin-right:5rem;
    margin-left:5rem;
}

.button-false .button {
    right:unset;
    left:0;
}

.button-false-01 .button {
    right:unset;
    left:-50%;
}

.button-true .button {
    transition: ease all 0.5s;
}

.button-true.active .button {
    background:#D64500 !important;
}

.button-true.active .button-text {
    color:#fff !important;
}

.button {
    background:#CBD3DE;
    text-align: center;
    /*position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;*/
    margin: 0 auto;
    cursor: pointer;
    border-radius: 4px;
    height:50px;
    width:100%;
    max-width:450px;
}

.button:hover {
    background:#D64500 !important;
}

.button:hover .button-text {
    color:#fff;
}

.button-text {
    color: #002135;
    position: relative;
    top: 50%;
    transform: translateY(-52%);
    left: 0;
    right: 0;
    font-size:1.5rem;
    font-weight:400;
}

.answer-wrapper {
    position:absolute;
    bottom:7.5rem;
    color:#fff;
    left:50%;
    transform: translate(-50%,0);
    width:100%;
    display:block;
    opacity:0;
    transition: ease all 0.5s;
    text-align: center;
}

.answer-wrapper.quiz-02 {
    bottom:unset;
    margin-top:5rem;
}

.answer-right {
    z-index:99;
}

.exkurs-humor {
   position: relative;
}

.answer {
    display:none;
    transition: ease all 0.5s;
    font-size:1.5rem;
}

.answer-wrapper #loader-1 {
    width:auto;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.exkurs-humor {
    z-index:99;
}

.exkurs-boom {
    top: 0;
    right: 0;
}

.blechkollege {
    position: relative;
    width: 50%;
    margin: auto;
    margin-top: 10rem;
    display:none;

}

.spannring80-wrapper {
    overflow:hidden;
    min-height:1000px;
    max-height:1500px;
    height:100vh;
}

.spannring80-wrapper .row {
    height:100%;
}

.spannring80-wrapper .spannring80-img img {
    height: 100%;
    object-fit: cover;
}

.spannring80-text {
    position: absolute;
    width: 95%;
    right: 0%;
    top: 65%;
    transform:scale(0.85);
}

.spannring80 {
    position: absolute;
    width:140%;
    top:5%;
    right:-30%;
}

.img-enkel {
    padding-left:15%;
}

.map-wo-wrapper {
    width:35%;
    margin:auto;
    position:relative;
}

.map-wo-wrapper h1 {
    position:absolute;
    top:5%;
    left:50%;
    width:max-content;
    transform: translate(-50%,0);
    z-index:9;
    font-size:4.5rem;
}

.map-west {
    width:100%;
    position: relative;
    left:-30%;
    opacity:0.5;
}

.map-ost {
    width:100%;
    position:absolute;
    top:0;
    right:-20%;
    opacity:0.5;
}

.map-number {
    font-weight:100;
    font-size:30rem;
    position: absolute;
    left:50%;
    top:55%;
    transform: translate(-50%,-50%);
    z-index:99;
    color:#dee8f2;
    margin-top:15rem;
    opacity:0;
}

.map-number span {
    color:#005196;
}

.international-wrapper .container {
    padding:0 15px;
}

.int-small .container {
    padding:0 5%;
}

.content-section.international-wrapper {
    padding:15rem 0 17.5rem 0;
    overflow:hidden;
}

.content-section.international-wrapper.int-small {
    padding:5rem 0 8rem 0;
}

.exkurs-toechterunternehmen {
    right: 2%;
    top: 8%;
}

.int-small h1 {
    color:#fff;
    font-size:4rem;
}

.int-small .col-7 img {
    width:90%;
    margin:auto;

}

.international-wrapper .container {
    position: relative;
}

.international-wrapper:before {
    content:'';
    position:absolute;
    bottom:-300px;
    right:-5%;
    width:50%;
    height:1000px;
    background:url('../images/int-bg-icon.svg') no-repeat;
    background-size:contain;
}

.int-extra {
    position: absolute;
    top: 0;
    left: 1%;
    width: 98%;
}

.int-mobil {
    display:none;
}

.facts-90-wrapper .image-wrapper-90 {
    position:relative;
    width:100%;
    top:0;
    height:100%;
}

.facts-90-wrapper .ausschnitt {
    position:absolute;
    bottom:-25%;
    right:5%;
    width:45%;
    transform:rotate(-5deg);
    -webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
    opacity:0;
}

.facts-90-wrapper p {
    padding:2.5rem 25%;
}

.counter-90-wrapper {
    max-width:1200px;
    padding-top:5rem;
    margin:auto;
    align-items: baseline;
}

.counter-90-wrapper h2 {
    margin-bottom: 1rem;
    font-size:3rem;
    color:#005196;
}

.counter-90-wrapper p {
    padding:0;
}

.wild-90-wrapper {
    position:relative;
    text-align:center;
}

.logo-90 {
    position: absolute;
    width: 60%;
    height: 40%;
    top: 0;
    lefT: -4%;
    object-fit: contain;

}

.el-90-01 {
    position: absolute;
    width: 6%;
    height: 8%;
    top: 70%;
    lefT: 6%;
    object-fit: contain;
}

.el-90-02 {
    position: absolute;
    width: 6%;
    height: 8%;
    top: 40%;
    right: 35%;
    object-fit: contain;
}

.el-90-03 {
    position: absolute;
    width: 10%;
    height: 8%;
    top: 40%;
    right: 6%;
    object-fit: contain;
}

.el-90-04 {
    position: absolute;
    width: 11%;
    top: 25%;
    right: 14%;
    height: 13%;
    object-fit: contain;
}

.tv-rahmen-wrapper {
    width:65%;
    margin:auto;
    margin-top:-15%;
    position: relative;
    border-radius: 20px;
}

.tv-rahmen-wrapper .tv-rahmen-cover {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

#video {
    border-radius: 20px;
    width:65%;
    margin:auto;
    margin-top:-15%;
}

video[poster]{
    height:100%;
    width:100%;
    object-fit: cover;
}

.play-button {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:50%;
    cursor: pointer;
    transition:ease all 0.5s;
}

.play-button:hover {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both infinite;
    width:55%;
}

.sprachrohr {
    width:60%;
    margin-left:-10%;
    position:relative;
    padding-bottom:5rem;
}

.sprachrohr-lines {
    position:absolute;
    top:25%;
    left:-5%;
    width:45%;
}

.sprachrohr-text {
    position:absolute;
    top:12%;
    right:15%;
    width:45%;
}

.sprachrohr-content {
    position:absolute;
    bottom:12%;
    right:6%;
    width:40%;
}

.image-switch {
    position: relative;
}

.image-ralf {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#triggerImageSwitch {
    top:300px;
    position: absolute;
}

.loading-wrapper {
    position:relative;
}

.loading-wrapper .year.white {
    color:#fff;
    font-size:600px;

}

#updateLoading {
    transition:ease all 2s;
    opacity:1;
}

#updateLoading.hide {
    opacity:0;
}

.loading {
    position: absolute;
    bottom:-5rem;
    font-size:1.75rem;
    left:50%;
    transform: translate(-50%,0);
    color:#005196;
    z-index:9;
}

.loading:after {
    content: ' .';
    animation: dots 1s steps(5, end) infinite;}

@keyframes dots {
    0%, 20% {
        color: rgba(0,81,150,0);
        text-shadow:
                .25em 0 0 rgba(0,81,150,0),
                .5em 0 0 rgba(0,81,150,0);}
    40% {
        color: #005196;
        text-shadow:
                .25em 0 0 rgba(0,81,150,0),
                .5em 0 0 rgba(0,81,150,0);}
    60% {
        text-shadow:
                .25em 0 0 #005196,
                .5em 0 0 rgba(0,81,150,0);}
    80%, 100% {
        text-shadow:
                .25em 0 0 #005196,
                .5em 0 0 #005196;}}


.loading-img {
    max-width:900px;
    margin:10rem auto 15rem auto;
    position: relative;

}

.loading-img-wrapper {
    position:relative;
    max-width:900px;
    margin:10rem auto 15rem auto;
    overflow:hidden;
}

.loading-img-wrapper .loading-img {
    max-width:900px;
    object-fit: contain;
    margin:0;
}

.loading-img-wrapper .loading-img.loading-img-inner {
    animation: loading ease 10s infinite;
    opacity:0.7;
}

.loading-ani {
    background: rgb(0,33,53);
    background: linear-gradient(90deg, rgba(0,33,53,0) 0%, rgba(0,159,255,1) 150%);
    width:100px;
    height:62%;
    position:absolute;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    transform: translate(-50%,-50%);
    left:50%;
    top:50%;
    animation: loading ease 10s infinite;
    opacity: 0;
    border-right:1px solid #3fa7ff;
}

.loading-ani:after {
    content:'';
    width:3px;
    height:95%;
    background:#fff;
    position:absolute;
    right:2px;
    top:50%;
    transform: translate(0,-50%);
    border-radius: 10px;
    filter: blur(4px);
    mix-blend-mode: lighten;


}

@keyframes loading {
    0% {
        margin-left: -55%;
        opacity: 0;
    }

    75% {
        margin-left:35%;
        opacity:1;
    }

    100% {
        margin-left:35%;
        opacity:0;
    }
}


.loading-img-wrapper .loading-text {
    position: absolute;
    font-size:4.5rem;
    color:#fff;
    left:50%;
    transform: translate(-50%,-50%);
    font-weight:300;
    top:50%;
    width:max-content;
}

.loading-content-wrapper p {
    padding-right:15%;
}

.loading-content-wrapper img {
    padding:0 5%;
    margin:auto;
}

@keyframes shake {
    10%,
    90% {
        margin-left:5px;
    }
    20%,
    80% {
        margin-left:0;
    }
    30%,
    50%,
    70% {
        margin-right:5px;
    }
    40%,
    60% {
        margin-right:0;
    }
}

.quick-connect-product {
    position:absolute;
    top: -80%;
    width: 50%;
    right:0;
    z-index:9;
    max-width:1100px;
}

.quick-connect-logo {
    position:absolute;
    right:-200px;
    bottom:0;
    width:200px;
}

.quick-connect-text p {
    padding-right:15%;
}

.duo-wrapper {
    padding:5rem 0;
}

.duo-wrapper-big {
    padding:10rem 0;
}

.duo-wrapper .row.align-items-center img {
    width:70%;
    margin:auto;
}

.duo-wrapper .col-6 {
    position: relative;
}

.duo-headline-wrapper p {
    display:none;
}

.duo-headline {
    position:relative;
    width:max-content;
    margin:auto;
}

.duo-headline span {
    position: relative;
}


.duo-headline:before {
    content:'';
    position:absolute;
    right: -7%;
    top:50%;
    transform: translate(0,-50%);
    background:url('../images/mission.svg') no-repeat;
    width: 15rem;
    height: 15rem;
    background-size:contain;
}

.duo-bg {
    background:url('../images/duo-bg.jpg') no-repeat;
    background-size:cover;
    background-position: 85%;
    padding:15rem 0 10rem 0;
}

.duo-bg p {
    color:#fff;
}

.scribble-wrapper {
    width:50%;
    position: relative;
    height:350px;
    margin-left:18%;
    margin-top:5%;
}

.scribble-wrapper img {
    width:100%;
    position: absolute;
    top:0;
}


.exkurs-duo {
    right: 23%;
    top: 10%;
}

.img-circle {
    border-radius: 50%;
}

.logo-switch-wrapper {
    width:50%;
    margin:auto;
    position: relative;
    z-index:9;
}

.spirit-text-wrapper {
    padding:0 5%;
    text-align:center;
    margin-top:10rem;
    position: relative;
}

.spirit-text-wrapper h1 {
    font-size:9rem;
    line-height:10rem;
    font-weight:400;
}

.spirit-text-wrapper p {
    padding:0 25%;
    margin-top:10rem;
    position: relative;
}

.spirit-text-bg {
    position:absolute;
    font-size:25rem;
    line-height:25rem;
    left:50%;
    transform: translate(-50%,0);
    color:#ccd4de;
    font-weight:100;
    top:-35%;
    opacity:0.3;
}

.spirit-subline {
    color:#D64500;
    font-size:1.75rem;
    position: relative;
    margin-bottom: 2.5rem;
}

.transform-office-wrapper {
    position: absolute;
    left: 5%;
    width: 200px;
    text-align: center;
    margin-top:5%;
}

.transform-office-wrapper h3 {
    line-height: 1.75rem;
    position: relative;
    z-index:5;
}

.transform-office-wrapper p {
    font-weight:200;
    font-size:1.35rem;
    line-height: 1.5rem;
}

.slideshow-container {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    position: relative;
}

.slideshow-container img {
    width: 100%;
    height: auto;
    display: none;
    height: 200px;
    object-fit: contain;
}

.slideshow-container img.active {
    display: block;
}

.exkurs-transform-office {
    top: -2rem;
    right: -4rem;
}

.bubble-img {
    width:30%;
    height:auto;
    object-fit: contain;
    position:absolute;
    bottom:-4.5%;
    right:5%;
}

.nd-front {
    position: absolute;
    bottom: 0;
    z-index:9;

}

.nd-headline {
    position:absolute;
    top:-5%;
    width:100%;
    text-align: center;
    display:flex;
    align-items: center;
}

.nd-headline h1 {
    font-size:6vw;
    line-height:5.5vw;
    font-weight:400;
}

.nd-headline span {
    color:#fff;
    font-size:30vw;
    font-weight: 100;
}

@keyframes silo {
    0% {
        top:5%;
        left:41%;
    }
    50% {
        top:8%;
        left:40.5%;
    }
    100% {
        top:5%;
        left:41%;
    }
}

.section.four.section_to-pin {
    height: 100vh;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}
.section.four.section_to-pin .section_pin {
    height: 100vh;

    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.section.four.section_to-pin .section_pin .content_wrapper {
    min-width: 200px;
    width:50vw;
    max-width:550px;
    padding: 0vw 6vw 0vw 6vw;
}
.section.four.section_to-pin .section_pin .image_wrapper {
    height: 550px;
    width: 400px;
    margin-right:30px;
    position: relative;
    opacity: 1;
}
.section.four.section_to-pin .section_pin .image_wrapper:last-child {
    margin-right:250px;
}
.section.four.section_to-pin .section_pin .image_wrapper .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

footer {
    padding:2rem 0;
    font-weight:300;
    font-size:0.9rem;
}

footer .align-items-center img.img-fluid {
    width:100px;
    margin-bottom:5px;
}

footer ul li {
    list-style:none;
    float:right;
    padding-left:1rem;
}

footer ul li a {
    color:#003054;
    font-weight:300;
    text-decoration: none;
    transition: ease all 0.5s;
}

footer ul li a:hover {
    color:#D64500;
}

@media (min-width: 1900px) {
    .mitarbeiter-silo-wrapper {
        padding-bottom:50rem;
    }

    .poll-inner {
        padding: 15rem 10% 0 10%;
    }

    .logo {
        width: 175px;
    }

    .menu {
        width: 65px;
        height: 65px;
    }
    .menu-box h3 {
        font-size:1.75rem;
    }
    .menu-box li {
        padding:1rem 0;
    }
    .menu-box a {
        font-size:1.5rem;
    }
    .menu-box a span {
        font-size:1.25rem;
    }
    .menu span {
        width: 20px;
        height: 3px;
    }
    .menu span::before {
        top:-8px;
    }
    .menu span::after {
        top:8px;
    }
    .menu span::before, .menu span::after {
        width:25px;
        height:3px;
    }
    .year-set {
        top: 120px;
        width: 65px;
        font-size: 2rem;
        line-height: 2.1rem;
    }

    .lang-menu {
        width: 65px;
        height: 65px;
        right: 100px;
    }

    .lang-menu::after {
        width: 35px;
        height: 35px;
    }

    .lang-menu-wrapper {
        margin-top:24px;
        right:100px;
    }

    .spannring80 {
        width: 130%;
        top: 2%;
        right: -15%;
    }

    .spannring80-text {
        width: 85%;
        right: 10%;
        top: 70%;
    }

    .map-wo-wrapper {
        width:50%;
    }

    .quote-bg-light {
        padding: 15rem 0 12.5rem 0;
    }
}


@media (min-width: 2250px) {

    .transition-text h1 {
        font-size:6rem;
    }

    header {
        position:sticky;
        top:0;
        z-index:99999;
    }
    .logo {
        width: 250px;
        position:absolute;
        left:40px;
    }

    .menu {
        width: 85px;
        height: 85px;
        position:absolute;
        right:40px;
    }
    .menu-box h3 {
        font-size:2rem;
    }
    .menu-box a {
        font-size:1.75rem;
    }
    .menu-box a span {
        font-size:1.5rem;
    }
    .year-set {
        top: 145px;
        width: 85px;
        font-size: 2.5rem;
        line-height: 2.4rem;
        position:absolute;
        right:40px;
    }

    .lang-menu {
        width: 85px;
        height: 85px;
        right:145px;
        position:absolute;
    }

    .lang-menu::after {
        width: 40px;
        height: 40px;
    }

    .lang-menu-wrapper {
        margin-top:50px;
        right:145px;
        position:absolute;
    }

    .container {
        max-width:2000px;
    }

    .container-s {
        max-width:1200px;
    }

    .headline h1 {
        font-size:130px;
        line-height:130px;
    }

    .floating-image-4 {
        right:-26%;
    }

    #circle {
        max-width:650px;
        bottom: -170px;
        right: -220px;
    }

    .content-section h2 {
        font-size:4.75rem;
        line-height: 5.75rem;
    }

    .content-section h3 {
        font-size: 35px;
    }
    .content-section p {
        font-size:28px;
        line-height:36px;
    }

    .content-section .blue-box p {
        font-size:24px;
    }

    .begin .intro-sub {
        padding-left:300px;
    }

    .begin .intro-date {
        padding-left:300px;
        margin-top:0;
    }

    .begin .portrait-wrapper {
        margin-left:50px;
    }

    .begin .portrait {
        max-width:800px;
    }

    .begin .portrait-text {
        max-width: 800px;
        padding-right: 2rem;
    }

    .begin .intro-year {
        font-size: 650px;
        padding-left: 450px;
    }

    .newspaper-wrapper p {
        max-width: 600px;
    }

    .newspaper-wrapper .newspaper img {
        max-width:1500px;
    }

    .newspaper-wrapper .newspaper {
        top:100px;
    }

    .side-exkurs-wrapper p, .content-section .side-exkurs-wrapper p {
        font-size: 1.25rem;
        line-height: 2rem;
    }

    .side-exkurs-wrapper h2, .content-section .side-exkurs-wrapper h2 {
        font-size: 3rem;
        line-height: 4.5rem;
    }

    .free-image-text {
        max-width: 685px;
    }

    .year-background {
        font-size:1000px;
    }

    .image-full img {
        max-height: 1200px;
        object-fit: cover;
        object-position: top;
    }

    .years-40 .content-text {
        max-width:1000px;
    }

    .years-50 .content-text {
        max-width: 650px;
    }

    .produkte-50 p {
        max-width: 750px;
    }

    .big-scroll-title {
        font-size:100px;
    }

    .sample-card {
        height: 950px;
        width: 650px;
    }

    .sample-card:last-child {
        margin-right:50rem;
    }

    .sticky {
        max-height:100%;
    }

    .horizontal-wrapper h3 {
        font-size:45px;
    }

    .karte-content {
        width:650px;
    }

    .mitarbeiter-silo-wrapper {
        padding-bottom:65rem;
    }
    .silo-bg {
        top:65%;
    }
    .silo-content {
        width:650px;
    }

    .silo {
        margin-top: -5rem;
    }

    .poll-inner {
        padding: 15rem 10% 0 10%;
    }

    .facts-90-wrapper p {
        padding: 2.5rem 15%;
    }

    .facts-90-wrapper .counter-90-wrapper p {
        padding:0;
    }

    .blue-box {
        max-width:1000px;
    }

    .map-wo-wrapper {
        width:50%;
    }

    .spannring80-wrapper {
        height:115vh;
    }

    .spannring80-text {
        width: 95%;
        right: 0%;
        top: 70%;
    }

    .boom-wrapper .col-text {
        padding-right:0;
    }

    .button {
        height: 75px;
    }

    .button-text {
        font-size:2.25rem;
    }

    .spirit-text-wrapper p {
        padding:0 15%;
    }

    .map-wo-wrapper h1 {
        font-size:7rem;
    }

    .counter-90-wrapper {
        max-width:1600px;
    }

    .before figcaption, .after figcaption {
        font-size:1.75rem;
        padding:20px 30px;
    }

    .transform-office-wrapper {
        width:300px;
    }

}

@media (min-width: 2500px) {
    .exkurs-1960 {
        top: 30.5%;
        left: 21%;
    }
}

@media (min-width: 3000px) {
    .newspaper-wrapper .newspaper img {
        max-width:1800px;
    }
}

@media (min-width: 3500px) {
    .newspaper-wrapper .newspaper img {
        max-width:2200px;
    }
}

@media (max-width: 1600px) {
    .floating-image-3 {
        right:0;
    }
    .mitarbeiter-silo-wrapper {
        padding-bottom:35rem;
    }

    .silo {
        margin-top:8rem;
        margin-left:1rem;
    }
}

@media (max-width:1400px) {
    html {
        font-size:14px;
    }
    .begin .intro-sub {
        padding-left:150px;
    }
    .begin .intro-date {
        padding-left:150px;
    }
    .begin .intro-year {
        padding-left:250px;
        font-size: 450px;
    }
    .begin .portrait-wrapper {
        margin-left:0;
    }
    .newspaper-wrapper .newspaper img {
        width:87vw;
    }
    .image-full {
        margin-top:15vw
    }
    .col-text {
        padding:7rem;
    }
    .quote-wrapper {
        margin: 10rem 0 7.5rem 0;
    }
    .quote-bg-light {
        margin:0;
    }
    .quote-content-wrapper {
        margin-left:60px;
    }
    .quote-content-wrapper:before {
        top: -40px;
        left: -60px;
        width: 160px;
    }
    .quote-content-wrapper .quote {
        padding-right: 3.5rem;
    }
    .year-background {
        font-size:600px;
    }
    .silver-box .year {
        font-size:34vw;
    }
    .silo-content {
        bottom:-3rem;
    }
    .silo {
        margin-top:8rem;
        margin-left:1rem;
    }
}

@media (max-width: 1200px) {
    .headline h1 {
        font-size:5.5vw;
        line-height:5.5vw;
    }
    #circle {
        bottom: -8vw;
        width: 28vw;
    }
    .floating-image-1 {
        left:0;
    }
    .floating-image-3 {
        height: 50%;
    }
    .floating-image-4 {
        right: -20%;
    }
    .blue-box {
        padding:0 1rem 2rem 2rem;
        max-width: 450px;
    }
    .big-img-slider .splide__slide img {
        max-height:650px;
    }
    .silo {
        margin-top:10rem;
        margin-left:1rem;
    }

    .sprachrohr-content {
        bottom:5%;
    }

    .silo-content {
        bottom:-6rem;
    }

    .map-wrapper {
        margin-left: -40rem;
        left: 190px;
    }
    .karte-content {
        width:30%;
        top: 80%;
        left: 30%;
        padding-left:15px;
    }

    .spannring80-wrapper {
        max-height:unset;
    }

    .spannring80-wrapper .row {
        display:block;
    }

    .spannring80-wrapper .col-6 {
        width:100%;
    }

    .spannring80-wrapper {
        height:auto;
    }

    .spannring80-text {
        position: relative;
        margin: 5rem 0;
    }

    .spannring80 {
        position: relative;
        right:-25%;
        top:unset;
        width:100%;
        margin-bottom:2rem;
    }

    .spannring80-wrapper .spannring80-img img {
        object-fit: cover;
        height: 500px;
        object-position: bottom;
    }

    .check-button-wrapper {
        margin-right:1rem;
        margin-left:1rem;
    }

    .map-number {
        font-size:20rem;
    }

    .years-30 .col-text {
        padding:3rem;
    }

    .years-1960 .content1960 {
        width:40%;
    }

    .counter-wrapper .floating-image-1 img {
        width:60%;
    }

    .spirit-text-wrapper p {
        padding: 0 20%;
        margin-bottom:5rem;
    }

}

@media (max-width: 1024px) {
    html {
        font-size:12px;
    }
    .counter-wrapper {
        height:80vh;
    }
    .begin .intro-sub {
        font-size: 35px;
    }

    .begin .intro-date {
        font-size: 65px;
    }

    .begin .intro-year {
        font-size:350px;
        margin-top: -6rem;
    }

    .begin .portrait-wrapper {
        margin-top:-20rem;
    }

    .begin .portrait-text {
        padding-left:3rem;
    }

    .image-full {
        margin-top: 6vw;
    }

    .year-background {
        font-size:400px;
    }

    .years-50 .year, .years-40 .year, .years-60 .year {
        top:15%;
    }

    .silver-box .year {
        top:50%;
    }

    .years-50 .year.white, .years-50 .year-1958 .year.white {
        top:0;
    }

    .years-50 .content-text {
        margin-left:15%;
    }

    .marker {
        width:15px;
        height:15px;
    }

    .spirit-text-wrapper h1 {
        font-size:7rem;
        line-height:8rem;
    }

    .spirit-text-wrapper p {
        padding:0 15%;
        margin-top:5rem;
        margin-bottom:3.5rem;
    }

    .this-year:after {
        bottom:-55px;
    }

    .silo-content {
        bottom:-6rem;
    }


}

@media (max-width: 991px) {
    .newspaper-wrapper p {
        width:40vw;
    }
    .newspaper-wrapper .newspaper {
        right: -35vw;
    }
    .menu-box {
        width:50%;
    }
    .col-text {
        padding:0 2rem;
    }
    .sample-card {
        height: 350px;
        width: 250px;
    }
    .sample-card:first-child {
        margin-left:0;
    }
    .silo {
        margin-top:15rem;
        margin-left:0;
    }

    .years-1960 {
        height: calc(80vw + 50px);
    }

    .years-1960 .content1960 {
        width: 75%;
        left: 15%;
    }

    .years-1960 .freisteller1960 {
        width: 40%;
    }

    .exkurs-1960 {
        top: 54%;
    }

    .image-full.box-top {
        margin-top:40vw;
    }

    .box-top .blue-box {
        top:-20rem;
    }

    .map-wo-wrapper {
        width: 60%;
    }

    .map-number {
        font-size:20rem;
    }

    .sprachrohr {
        padding-bottom:20rem;
    }

    .slider-small-title .slider-title h2 {
        font-size:14rem;
    }

    .check-button-wrapper {
        margin-right: 2.5rem;
        margin-left: 2.5rem;
    }

    .spirit-text-wrapper p {
        margin-bottom:10rem;
    }

    .transform-office-wrapper {
        margin-top:-5%;
    }

    .bubble-img {
        width:30%;
    }

    .content-section.international-wrapper {
        padding: 5rem 5% 5rem 5%;
    }

    .int-desktop {
        display:none;
    }

    .int-mobil {
        display:block;
    }

    .exkurs-toechterunternehmen {
        right:unset;
        left: 28%;
    }

    .international-wrapper::before {
        display:none;
    }

}

@media (max-width: 900px) {
    .duo-bg .duo-content {
        display:none;
    }

    .scribble-wrapper {
        width:60%;
        margin-left:10%;
        height:250px;
    }

    .duo-headline {
        margin:0;
    }

    .duo-headline-wrapper p {
        display: block;
        position: relative;
    }


}

@media (max-width: 768px) {
    .content-section h1 {
        font-size: 3.75rem;
        line-height: 4rem;
    }
    .content-section h2 {
        font-size: 2.5rem;
        line-height: 3.25rem;
    }
    .counter-wrapper {
        height:60vh;
    }
    .floating-image-1 {
        width:110%;
    }
    .floating-image-4 {
        right:-15%;
    }
    .begin .intro-sub {
        font-size: 25px;
        padding-left: 75px;
    }

    .begin .intro-date {
        font-size: 45px;
        padding-left: 75px;
    }

    .begin .intro-year {
        padding-left: 150px;
        font-size: 250px;
        margin-top: -4rem;
    }
    .begin .portrait-wrapper {
        margin-top:-10rem;
    }
    .begin .portrait-text {
        margin-top:20%;
        padding-left:0;
    }

    .menu-box, .side-exkurs-wrapper {
        width:100%;
    }
    .quote-wrapper .container {
        display:block;
    }
    .quote-image-wrapper {
        width:50%;
        margin-left:60px;
        margin-top:20px;
    }

    .quote-image-wrapper img {
        width:100%;
    }
    .blue-box {
        bottom:-7rem;
    }
    .big-img-slider .splide__slide img {
        max-height:400px;
    }
    .splide__slide img {
        width:150px;
    }

    .big-scroll-inner-wrapper {
        top:-8rem;
    }

    .big-scroll-title {
        top:42.5%;
    }

    .big-scroll-content p {
        padding: 15% 10%;
    }

    .big-scroll-content h2 {
        padding:0 5%;
    }

    .pt-10 .line-overlay {
        top: 250px;
    }
    .marker {
        width:13px;
        height:13px;
    }

    .silo {
        margin-top:20rem;
        margin-left:0;
    }


    .facts-90-wrapper p {
        padding: 2.5rem 5%;
    }

    .row {
        display: block;
    }

    .col-4, .col-8, .col-5, .col-7, .col-6 {
        width:100%;
    }

    .sprachrohr-content {
        right: 5%;
        width:42%;
    }

    .slider-small-title .slider-title h2 {
        font-size:10rem;
        line-height: 10rem;
    }

    .spirit-text-wrapper h1 {
        font-size:5rem;
        line-height:6rem;
    }

    .loading-content-wrapper p {
        padding-right:0;
        padding-bottom:5rem;
    }

    .duo-wrapper .row p {
        padding-bottom:5rem;
    }

    .duo-wrapper .side-exkurs-wrapper p {
        padding-bottom:0;
    }

    .years-20 .col-3 {
        width:50%;
    }

    .years-20 .year.white {
        top:-100%;
    }

    .quick-connect-logo {
        right:-130px;
        width:130px;
    }

    .quick-connect-product {
        width:40%;
    }

    #triggerImageSwitch {
        top:75px;
    }

    .boom-wrapper img {
        margin-bottom:2.5rem;
    }

    .boom-wrapper .exkurs-inner img {
        margin-bottom:0;
    }

    .check-button-wrapper {
        margin-right: 0;
        margin-left: 0;
        margin-top:3rem;
    }

    .children-content {
        padding:3rem;
    }

    .children-wrapper .col-6 {
        padding-bottom:3rem;
    }

    .duo-headline {
        width:100%;
        margin-top:5rem;
        text-align:left;
    }

}

@media (max-width: 600px) {

    #yearCounter {
        font-size:10rem;
    }

    .transition-text h1 {
        font-size: 2rem;
        padding:0 15px;
    }

    .begin .intro-sub,.begin .intro-date {
        padding-left:25px;
    }
    .begin .intro-year {
        padding-left:90px;
        font-size:200px;
    }
    .begin .portrait-wrapper {
        display: block;
    }
    .begin .portrait {
        width:85%;
    }
    .begin .portrait-text {
        margin-top: 10%;
        width:95%;
        padding-right:0;
        padding-left:25px;
    }
    .newspaper-wrapper {
        padding-bottom: 50vw;
        padding-left:25px;
        width:95%;
    }
    .newspaper-wrapper p {
        width:80vw;
    }
    .newspaper-wrapper .newspaper {
        top: 275px;
    }
    .newspaper-wrapper .newspaper img {
        width: 100vw;
    }
    .blue-box {
        width:90%;
        left:5%;
    }
    .content-section .blue-box .year {
        font-size:10rem;
    }
    .image-full img {
        width:150%;
        margin-left:-25%;
    }
    .row {
        display:block;
    }

    .col-6 {
        width:100%;
    }

    .col-text {
        padding:4rem;
    }

    .free-image-text {
        width:100%;
        padding:0 7.5%;
        padding-top: 3rem;
    }

    .free-image {
        width:75%;
        margin-top:-10%;
    }
    .big-scroll-content p {
        font-size:16px;
        padding: 15% 10%;
    }
    .big-scroll-content h2 {
        font-size: 1.5rem;
        line-height: 1.75rem;
        padding: 0 5%;
    }
    .big-scroll-content .exkurs-inner h2 {
        line-height:2.75rem;
    }
    .timeline {
        width: 250%;
        height: 130px;
    }
    .next-year {
        right: 9.75%;
    }

    .tv-rahmen-wrapper video {
        border-radius:5px;
    }

    .line-overlay {
        height: 200px;
        top: 60px;
    }
    .line-wrapper.shifted .this-year {
        font-size: 2.75rem;
    }

    .line-wrapper.shifted .this-year::after {
        height: 5rem;
        bottom: -72px;
    }

    .exkurs {
        width: 6vw;
        height: 6vw;
    }
    .exkurs:after {
        width: 2vw;
        height: 2vw;
    }
    .exkurs-heinrich, .exkurs-johannes, .exkurs-img-heinrich, .exkurs-img-ralf, .exkurs-img-sigrid, .exkurs-img-patrick, .exkurs-img-klaudine {
        width:max-content;
        height: max-content;
        font-size:0.65rem;
        padding: 0.35rem 0.5rem;
    }

    .exkurs-kinder-heinrich {
        top:0;
        right:1%;
        width: 36%;
        height: 35%;
    }

    .exkurs-kinder-johannes {
        bottom:20%;
        right:1%;
        width: 36%;
        height: 35%;
    }

    .exkurs-sigrid {
        width: 24%;
        height: 40%;
    }

    .exkurs-ralf {
        width: 28%;
        height: 40%;
    }

    .exkurs-patrick {
        width: 41%;
        height: 100%;
    }

    .years-40 .content-text, .years-50 .content-text {
        padding-right:7.5%;
        margin-left:7.5%;
    }

    .produkte-50 p, .produkte-50 h2 {
        padding:0 7.5%;
    }
    .silo-bg {
        width: 165%;
        top: 60%;
        left: 45%;
    }

    .mitarbeiter-silo-wrapper {
        margin-top:-10rem;
    }

    .silo {
        margin-top:10rem;
    }

    .facts-90-wrapper .ausschnitt {
        width: 60%;
    }

    .counter-90-wrapper .col-4 {
        width:100%;
        margin-bottom:4rem;
    }

    .map-number {
        font-size:16rem;
    }

    .content-section .map-wo-wrapper h1 {
        font-size: 3rem;
        line-height: 3rem;
        text-align: center;
        width:100%;
    }

    .img-enkel {
        padding:0;
        margin-top:5rem;
    }

    .sprachrohr {
        padding-bottom:20rem;
    }

    .sprachrohr-content {
        width:85%;
    }

    .sprachrohr-text {
        top: 17%;
        right: 4%;
        width: 55%;
    }

    .spirit-text-wrapper p {
        padding:0 15px;
        margin-bottom:15rem;
    }

    .transform-office-wrapper {
        margin-top:-15%;
    }

    .bubble-img {
        width:45%;
        bottom: -9.5%;
    }

    .nd-headline {
        top:10%;
    }

    .loading-img-wrapper .loading-text {
        font-size: 7.5vw;
    }

    .years-1960 {
        height: calc(100vw + 50px);
    }

    .years-1960 .content1960 {
        width: 75%;
        left: 15%;
    }

    .years-1960 .freisteller1960 {
        width: 40%;
    }

    .exkurs-1960 {
        top: 63%;
        left: 18.75%;
    }

    .duo-headline::before {
        width: 10rem;
        height: 10rem;
    }

    .slider-small-title .slider-title {
        position: relative;
        color: #fff;
        top: unset;
        left: unset;
        right:0;
        bottom: 16%;
        width: 90%;
        padding-left: 5%;
        text-align: right;
        transform: unset;
    }

    .spirit-wrapper {
        margin-bottom:10rem;
    }


}

@media (max-width: 480px) {
    html {
        font-size: 11px;
    }

    .year-set {
        padding: 0.75rem 0;
        right: 140px;
        top: 32px;
    }

    .logo {
        width:120px;
        left:20px;
    }

    .menu-box li {
        padding:1rem 0;
    }

    .menu-box h3 {
        font-size:1.5rem;
    }

    .menu-box a {
        font-size:1.75rem;
    }

    .menu-box a span {
        font-size: 1.25rem;
    }

    .content-section h1 {
        font-size:4rem;
        line-height: 4rem;
    }

    .headline h1 {
        top: 32%;
        left: 35%;
        font-size: 6.5vw;
        line-height: 6.5vw;
    }

    #circle {
        bottom: -12vw;
        width: 38vw;
        right: -12vw;
    }

    .floating-image-1 {
        width: 550px;
    }

    .floating-image-4 {
        top: -20%;
        right: -20%;
        width: 380px;
    }

    .floating-image-3 {
        height: 30%;
        right:-5%;
        top:85%;
    }

    .begin .intro-year {
        padding-left: 90px;
        font-size: 150px;
    }

    .begin .image-full {
        margin-bottom:6rem;
    }

    .begin .portrait span {
        margin-top: -30px;
    }

    .begin .portrait-text {
        margin-top: 20%;
    }

    .exkurs-next-generation {
        margin-left:0;
    }

    .splide__slide img {
        width: 100px;
    }

    .year-background {
        font-size: 20rem;
    }

    .years-40.pt-15 {
        padding-top:0rem !important;;
    }

    .years-40 .year {
        top:15%;
    }

    .silver-box .year {
        top:50%;
    }

    .years-50 .year.white {
        top:15%;
    }

    .years-50 .year, .years-60 .year {
        top:35%;
    }

    .years-50 .year-1958 .year.white {
        top:40%;
    }

    .year-1958 .thanks-wrapper {
        padding: 10rem 0;
    }

    .year-1958 .thanks-headline {
        font-size: 3.8rem;
        line-height: 4.25rem;
    }

    .quote-wrapper {
        margin: 7.5rem 0 -5rem 0;

    }

    .quote-bg-light {
        margin: 0;
    }

    .quote-content-wrapper {
        margin-left: 55px;
    }

    .quote-content-wrapper::before {
        width: 120px;
    }

    .quote-content-wrapper .subheader {
        font-size: 1.25rem;
    }

    .quote-content-wrapper .quote {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .quote-image-wrapper {
        margin:auto;
        margin-top:5rem;
    }

    .big-scroll-title {
        top:45%;
    }

    .karte-content {
        left: 31.5%;
        width:35%;
    }

    .karte-content h1 {
        font-size:2.5rem;
        line-height: 2rem;
    }

    .marker {
        width:10px;
        height:10px;
    }
    .silo-bg {
        width: 775px;
        top: 60%;
        left: -230px;
        transform: translate(0, -50%);
    }
    .silo {
        width: 200px;
        margin-left: -17%;
        margin-top: 7.5rem;
    }

    .silo-content {
        width:95%;
        bottom:-5%;
        padding-right:15px;
    }

    .years-1960 {
        height: calc(120vw + 50px);
    }

    .exkurs-1960 {
        top: 68.5%;
        left: 18.75%;
    }

    .sprachrohr {
        padding-bottom: 30rem;
    }

    .sprachrohr-lines {
        top:20%;
    }

    .sprachrohr-text {
        top:14%;
    }

    .map-wo-wrapper {
        width:90%;
    }

    .children-wrapper .children-bg {
        object-position: top left;
    }

    .image-full.box-top {
        margin-top:45rem;
    }

    .box-top .blue-box {
        top:-30rem;
    }

    .slider-small-title .slider-title h2 {
        font-size:7.5rem;
        line-height: 7.5rem;
    }

    .content-section.international-wrapper {
        padding: 5rem 0 5rem 0;
    }

    .spirit-text-wrapper h1 {
        font-size:3.5rem;
        line-height:4rem;
    }

    .spirit-text-bg {
        font-size: 20rem;
        line-height: 20rem;
    }

    .nd-headline {
        top:15%;
        left: -15%;
    }

    .nd-headline h1 {
        font-size:2.5rem;
        line-height: 2.5rem;
        font-weight:400;
    }

    .facts-90-wrapper p {
        padding:0;
    }

    .quick-connect-product {
        top: 115%;
        right: -5%;
        width: 50%;
    }

    .quick-connect-logo {
        right:unset;
        bottom:-100px;
    }

    .quick-connect-text p {
        padding-right:0;
    }

    .counter-90-wrapper .col-4 {
        margin-bottom:2rem;
    }

    .years-20 .col-3 {
        width:75%;
    }

    .poll-inner {
        padding: 15rem 15px 1rem 15px;
    }

    .poll-inner h2 {
        font-size:1.85rem;
    }

    .spirit-text-wrapper {
        margin-top: 5rem;
    }

    .spirit-text-wrapper p {
        padding:0;
    }

    .side-exkurs-wrapper h2, .content-section .side-exkurs-wrapper h2 {
        font-size:2rem;
    }

    .answer-wrapper {
        bottom:4rem;
    }

    .spannring80-wrapper .spannring80-img img {
        display:none;
    }

    .spannring80-wrapper {
        min-height:auto;
    }

    .blechkollege {
        width:100%;
        margin-top:15rem;
    }

    .poll-buttons-wrapper .bildunterschrift {
        width:100%;
    }

    .exkurs-inner {
        padding:5%;
    }

    .content-section .side-exkurs-wrapper p {
        font-size:1.15rem;
    }

    .duo-headline {
        margin-top:5rem;
    }

    .bubble-img {
        width: 57%;
        bottom: -11.5%;
    }

    #triggerPaper {
        top: -250px;
        position: absolute;
    }

    .scribble-wrapper {
        width:75%;
        margin-top: 28%;
        height: 200px;
    }

    footer {
        text-align:center;
    }

    footer img {
        margin:auto;
        padding-bottom:2rem;
    }

    footer ul{
        margin-top:2rem;
    }

    footer ul li {
        float:unset;
        padding:0.5rem 0;
    }

}