/*
Theme Name: lœwn
Author: loewn
Author URI: https://loewn.de/
Version: 1.0
*/

:root{
    --thewidth      : 1400px;
    --reelmargin    : 40px;
    --col_black1    : #2b2b2b;
    --col_black2    : rgba(0,0,0,0.7);
    --col_white1    : #fff;
    --col_white2    : rgba(255,255,255,0.7);
    --fontsize1     : 16px;     
    --fontsize2     : 32px;     
}


@font-face {
    font-family: 'meb';
    src: url('inc/font/metropolisextrabold/metropolis-extrabold.eot');
    src: url('inc/font/metropolisextrabold/metropolis-extrabold.eot?#iefix') format('embedded-opentype'),
         url('inc/font/metropolisextrabold/metropolis-extrabold.woff2') format('woff2'),
         url('inc/font/metropolisextrabold/metropolis-extrabold.woff') format('woff'),
         url('inc/font/metropolisextrabold/metropolis-extrabold.ttf') format('truetype'),
         url('inc/font/metropolisextrabold/metropolis-extrabold.svg#metropolisextra_bold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ml';
    src: url('inc/font/metropolislight/metropolis-light.eot');
    src: url('inc/font/metropolislight/metropolis-light.eot?#iefix') format('embedded-opentype'),
         url('inc/font/metropolislight/metropolis-light.woff2') format('woff2'),
         url('inc/font/metropolislight/metropolis-light.woff') format('woff'),
         url('inc/font/metropolislight/metropolis-light.ttf') format('truetype'),
         url('inc/font/metropolislight/metropolis-light.svg#metropolisextra_bold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html,
body{
    padding: 0;
    margin: 0;
    line-height: 1.4;
}

body{
    color: var(--col_black1);
    font-size: var(--fontsize1);
    background-color: var(--col_white1);
}

body.nomove{
    overflow: hidden;
    position: absolute;
}

body.dark{
    color: var(--col_white1);
    background-color: var(--col_black1);
}

#loewobg{
    position: fixed;
    width: 200vw;
    height: 200vw;
    top: -30vw;
    left: -50vw;
    z-index: 1;
    transform: translate3d(calc(var(--lwn_scroll)*-.1),calc(var(--lwn_scroll)*-.1),0)
}

#projectmouse{
    position: fixed;
    top: -70px;
    left: 0;
    z-index: 999;
    width: 50px;
    height: 50px;
    visibility: hidden;
    transform: translate3d(-50%, -50%, 0px);
    pointer-events: none;
}

#projectmouse.show{
    visibility: visible;
}

#projectmouse svg{
    width: 100%;
    height: 100%;
}

#projectmouse svg path{
    stroke: #ff5500;
    stroke-dasharray: 141.5;
    stroke-dashoffset: 0;
    transition: all 0.3s cubic-bezier(0.37, 0, 0.63, 1);
}    

#projectmouse.next svg path{
    stroke-dashoffset: 141.5;
}

/*
#projectmouse svg path.p2{
    stroke: #000;
    transform: translate3d(4px,2px,0);
}
*/

*{
    box-sizing: border-box;
    font-family: 'ml', system-ui, sans-serif;
    hyphens: auto;
}

.lwn{
    font-family: inherit;
    letter-spacing: -1.2px;
}

h2 .lwn{
    letter-spacing: -3px;
}

b, strong{
    font-weight: normal;
    font-family: 'meb', system-ui, sans-serif;
}

.thewidth{
    width: var(--thewidth);
    position: relative;
}

hr{
    width: 33%;
    height: 2px;
    border: 0;
    background-color: #eee;
    margin: 10px 0;
}

.dark hr{
    background-color: var(--col_white1);
}

a{
    color: #008bca;
    text-decoration: none;
}

a:hover{
    color: #004565;
}

main{
    position: relative;
    min-height: 100vh;
    background-color: var(--col_white2);
    counter-reset: section -1;
    z-index: 2;
    margin: 0 auto 50px auto;
    z-index: 10;
    background-color: #fff;
    padding: 80px calc((100vw - var(--thewidth)) / 2) 80px calc((100vw - var(--thewidth)) / 2);
    width: 100vw;
    z-index: 10;
}

#langnav ul{
    position: absolute;
    top: 15px;
    right: 40px;
    list-style: none;
    font-size: 0;
}

#langnav ul li{
    display: inline-block;
    font-size: var(--fontsize1);
    margin-left: 5px;
}

#langnav ul li a{
    background-color: var(--col_black1);
    color: var(--col_white1);
    line-height: 1;
    padding: 5px 10px;
    text-decoration: none;
    opacity: .5;
}

#langnav ul li a:HOVER{
    opacity: .7;
}

#langnav ul li a.active{
    opacity: 1;
}

.dark main{
    background-color: var(--col_black2);
}
    
#contentbox{
}

.flex{
    display: flex;
    gap: 40px;
}

.flexchild{
    flex : 1;
    text-align: justify;
}

.flexchild3{
    flex : 3;
    text-align: justify;
}

h1,
h2,
h3{
    margin: 0;
    font-family: 'meb', system-ui, sans-serif;
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: normal;
    line-height: 1.1;
    text-align: left;
    hyphens: none;
}

h1{
    font-size: var(--fontsize1);
    font-family: 'ml', system-ui, sans-serif;
    margin-bottom: 10px;
}

h2 span,
h2 span a{
    font-family: inherit;
}

h2 div{
    font-size: 22px;
    opacity: .3;
}

h3{
    max-width: calc(100% - 85px);
}

h3 div{
    display: inline;
    font-family: 'ml', system-ui, sans-serif;
}

p{
    margin: 0;
    margin-bottom: 10px;
}

p sup{
    font-size: 10px;
}

.box{
    position: relative;
}



.count:AFTER{
    position: absolute;
    top: 55px;
    right: 0;
    font-size: 32px;
    color: #eee;
    content: counter(section, decimal-leading-zero);
    counter-increment: section;
    line-height: 1;
}

span.count:AFTER{
    visibility: hidden;
}

/*
.count2:AFTER{
    position: absolute;
    top: 50px;
    right: 0;
    font-size: 32px;
    color: #eee;
    content: counter(section, decimal-leading-zero)'.'counter(project, decimal-leading-zero);
    counter-increment: project;
    z-index: -1;
    line-height: 1;
}
*/

#projects{
    counter-reset: project;
}

.projekt_indicator{
    position: absolute;
    bottom: -8px;
    right: 0;
    z-index: 10;
    font-size: 0;
}

.projekt_indicator li{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 4px;
    background-color: #008bca;
    margin-left: 4px;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.3s;
}

.projekt_indicator li.active{
    background-color: #004565;
}


.swipe_indicator_box{
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: 32px;
    width: 70px;
    background-color: rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    z-index: 99;
}

.swiped .swipe_indicator_box{
    opacity: 0;
}


.swipe_indicator{
    position: absolute;
    width: 24px;
    height: 24px;
    top: 4px;
    left: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18.536 7.555c-1.188-.252-4.606-.904-5.536-1.088v-3.512c0-1.629-1.346-2.955-3-2.955s-3 1.326-3 2.955v7.457c-.554-.336-1.188-.621-1.838-.715-1.822-.262-3.162.94-3.162 2.498 0 .805.363 1.613 1.022 2.271 3.972 3.972 5.688 5.125 6.059 9.534h9.919v-1.748c0-5.154 3-6.031 3-10.029 0-2.448-1.061-4.157-3.464-4.668zm.357 8.022c-.821 1.483-1.838 3.319-1.891 6.423h-6.13c-.726-3.82-3.81-6.318-6.436-8.949-.688-.686-.393-1.37.442-1.373 1.263-.006 3.06 1.884 4.122 3.205v-11.928c0-.517.458-.955 1-.955s1 .438 1 .955v6.948c0 .315.256.571.572.571.314 0 .57-.256.57-.571v-.575c0-.534.49-.938 1.014-.833.398.079.686.428.686.833v1.273c0 .315.256.571.571.571s.571-.256.571-.571v-.83c0-.531.487-.932 1.008-.828.396.078.682.424.682.828v1.533c0 .315.256.571.571.571s.571-.256.571-.571v-.912c0-.523.545-.867 1.018-.646.645.305 1.166.932 1.166 2.477 0 1.355-.465 2.193-1.107 3.354z"/></svg>');
    animation-timing-function: ease-in-out;
    animation: swipe 3s;
    animation-iteration-count: infinite;
/*    animation-direction: reverse;*/
}


@keyframes swipe {
  0%{
      transform: translate3d(46px,0,0) scale(1);
    }
    65%{
      transform: translate3d(0,0,0) scale(1);
    }
    70%{
      transform: translate3d(0,0,0) scale(1);
    }
    80%{
      transform: translate3d(0,0,0) scale(1.5);
    }
    90%{
      transform: translate3d(46px,0,0) scale(1.5);
    }
    100%{
      transform: translate3d(46px,0,0) scale(1);
    }
    
}


/*
#projekt_indicator li:AFTER{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.4);

}
*/

.subbox{
    position: relative;
    padding: 50px 0;
    border-top: 2px solid #eee;
}

.box.one{
    border-top: 2px solid #eee;
}

.box.one svg{
    width: 70px;
    height: auto;
}

#monodon svg{
    width: 38%;
    height: auto;
    margin-top: -18px;
    margin-left: -10px;
}

.box.one .subbox{
    border-top: 0;
}

.box.one .flexchild{
    min-width: fit-content;
}

.box .subbox:NTH-OF-TYPE(2){
    padding-top: 54px;
}

.video,
.image{
    display: block;
}

.slide{
    height: 100%;
    background-image: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><style> circle { fill: transparent; stroke: %23ff5500; stroke-width: 2.5px; stroke-dasharray: 149.22; stroke-dashoffset: 0; animation: clock-animation 8s linear infinite; transform-origin: center;} %23loewo_circle4{ animation: none; stroke: %23ccc; stroke-dasharray: 0; stroke-dashoffset: 0;} %23loewo_circle2{ animation: clock-animation 4s linear infinite; stroke: %23008bca; } %23loewo_circle3{ animation: clock-animation 16s linear infinite; stroke: %23004565; } @keyframes clock-animation { 0% { stroke-dashoffset: 149.22; transform: rotate(0deg); } 100% { stroke-dashoffset: 0; transform: rotate(360deg); }} </style><path d="M37.292,15.565l3.757,9.906l-6.814,6.258l-1.404,10.936l-7.847,-0.487l-7.846,0.487l-1.405,-10.936l-6.814,-6.258l3.758,-9.908l-2.46,-2.273l1.474,-3.81l2.392,2.386l10.939,1.875l10.865,-1.876l-0.001,-0.001l3.354,0.073l1.421,3.83l-3.369,-0.202Zm-3.865,13.921l5.039,-4.627l-3.989,-10.519l-9.454,1.632l-9.531,-1.633l-3.989,10.52l5.041,4.63l2.067,-3.302l1.858,1.164l-2.557,4.085l1.144,8.907l5.877,-0.365l0.102,-0l5.877,0.365l1.144,-8.909l-2.549,-4.1l1.862,-1.158l2.058,3.31Zm-11.308,-8.862l-1.192,1.877l-3.951,-1.816l0.813,-2.045l4.33,1.984Zm5.801,-0.046l4.316,-1.978l0.826,2.039l-3.951,1.816l-1.191,-1.877Zm1.579,15.182l-0.538,1.886l-1.191,-0l-2.815,-0.541l-2.552,0.541l-1.376,-0.001l-0.543,-1.884l2.181,0.002l1.19,-0.628l0.003,-3.194l-3.374,-3.107l4.476,0.606l4.539,-0.619l-3.442,3.117l-0.003,3.195l1.716,0.631l1.729,-0.004Zm5.736,0.854l0.416,-1.473l2.879,-0.848l-0.434,1.483l-2.861,0.838Zm0.822,-2.939l0.427,-1.48l2.876,-0.848l-0.426,1.474l-2.877,0.854Zm-1.236,4.317l2.866,-0.833l-0.41,1.451l-2.884,0.866l0.428,-1.484Zm-20.082,-1.378l-2.861,-0.838l-0.434,-1.483l2.879,0.848l0.416,1.473Zm-0.833,-2.939l-2.877,-0.854l-0.426,-1.474l2.876,0.848l0.427,1.48Zm1.226,4.317l0.428,1.484l-2.884,-0.866l-0.41,-1.451l2.866,0.833Z" style="fill:rgb(240,240,240);"/><circle id="loewo_circle4" cx="25" cy="25" r="23.75" stroke-linecap="square"/><circle id="loewo_circle3" cx="25" cy="25" r="23.75" stroke-linecap="square"/><circle id="loewo_circle2" cx="25" cy="25" r="23.75" stroke-linecap="square"/><circle cx="25" cy="25" r="23.75" stroke-linecap="square"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #000;
    background-size: 70px 70px;
}

.dark .subbox{
    border-top: 2px solid var(--col_white1);
}

.subbox img{
    width: 100%;
    height: auto;
}

.center{
    margin: 0 auto;
}


#logo{
    height: 80px;
    width: auto;
}

#stay{
    position: relative;
    z-index: 100;
}

#logo_fixed{
    position: fixed;
    width: 72px;
    height: 56px;
    top: -10px;
    transform: translate3d(0,-102%,0);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    backdrop-filter: invert(100%) blur(5px);       
    mask-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 72 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><path d="M72,-0L72,56L0,56L0,-0L72,-0ZM36,49C38.16,49 40.255,48.577 42.228,47.742C43.176,47.341 44.091,46.845 44.946,46.267C45.793,45.695 46.59,45.038 47.314,44.314C48.038,43.59 48.695,42.793 49.267,41.946C49.845,41.091 50.341,40.176 50.742,39.228C51.577,37.255 52,35.16 52,33C52,30.84 51.577,28.745 50.742,26.772C50.341,25.824 49.845,24.909 49.267,24.054C48.695,23.207 48.038,22.41 47.314,21.686C46.59,20.962 45.793,20.305 44.946,19.733C44.091,19.155 43.176,18.659 42.228,18.258C40.255,17.423 38.16,17 36,17C33.84,17 31.745,17.423 29.772,18.258C28.824,18.659 27.909,19.155 27.054,19.733C26.207,20.305 25.41,20.962 24.686,21.686C23.962,22.41 23.305,23.207 22.733,24.054C22.155,24.909 21.659,25.824 21.258,26.772C20.423,28.745 20,30.84 20,33C20,35.16 20.423,37.255 21.258,39.228C21.659,40.176 22.155,41.091 22.733,41.946C23.305,42.793 23.962,43.59 24.686,44.314C25.41,45.038 26.207,45.695 27.054,46.267C27.909,46.845 28.824,47.341 29.772,47.742C31.745,48.577 33.84,49 36,49ZM36,18.411C37.97,18.411 39.88,18.797 41.678,19.557C42.543,19.923 43.376,20.375 44.156,20.902C44.929,21.424 45.656,22.024 46.316,22.684C46.976,23.344 47.576,24.071 48.098,24.844C48.625,25.624 49.077,26.457 49.443,27.322C50.203,29.12 50.589,31.03 50.589,33C50.589,34.97 50.203,36.88 49.443,38.678C49.077,39.543 48.625,40.376 48.098,41.156C47.576,41.929 46.976,42.656 46.316,43.316C45.656,43.976 44.929,44.576 44.156,45.098C43.376,45.625 42.543,46.077 41.678,46.443C39.88,47.203 37.97,47.589 36,47.589C34.03,47.589 32.12,47.203 30.322,46.443C29.457,46.077 28.624,45.625 27.844,45.098C27.071,44.576 26.344,43.976 25.684,43.316C25.024,42.656 24.424,41.929 23.902,41.156C23.375,40.376 22.923,39.543 22.557,38.678C21.797,36.88 21.411,34.97 21.411,33C21.411,31.03 21.797,29.12 22.557,27.322C22.923,26.457 23.375,25.624 23.902,24.844C24.424,24.071 25.024,23.344 25.684,22.684C26.344,22.024 27.071,21.424 27.844,20.902C28.624,20.375 29.457,19.923 30.322,19.557C32.12,18.797 34.03,18.411 36,18.411ZM43.864,26.963L46.02,27.092L45.111,24.641L42.964,24.595L36.011,25.796L29.01,24.596L27.479,23.069L26.536,25.507L28.11,26.961L25.705,33.303L30.066,37.308L30.965,44.307L35.987,43.995L41.008,44.307L41.907,37.308L46.268,33.303L43.864,26.963ZM41.39,35.873L40.073,33.754L38.881,34.495L40.513,37.119L39.781,42.821L36.019,42.587L35.954,42.587L32.193,42.821L31.461,37.12L33.097,34.506L31.908,33.761L30.585,35.874L27.358,32.911L29.912,26.178L36.012,27.223L42.062,26.179L44.615,32.911L41.39,35.873ZM34.148,30.198L31.377,28.928L30.857,30.237L33.385,31.398L34.148,30.198ZM37.871,30.162L38.634,31.363L41.162,30.201L40.634,28.896L37.871,30.162ZM38.881,39.887L37.775,39.89L36.676,39.486L36.678,37.441L38.881,35.447L35.976,35.842L33.111,35.455L35.271,37.443L35.269,39.487L34.507,39.889L33.111,39.888L33.459,41.094L34.34,41.094L35.973,40.748L37.775,41.094L38.537,41.094L38.881,39.887ZM42.545,40.426L44.376,39.889L44.654,38.94L42.811,39.483L42.545,40.426ZM29.428,40.426L29.162,39.483L27.32,38.94L27.597,39.889L29.428,40.426ZM28.894,38.555L28.621,37.608L26.78,37.065L27.053,38.009L28.894,38.555ZM42.285,41.307L42.011,42.257L43.857,41.703L44.119,40.774L42.285,41.307ZM29.688,41.307L27.854,40.774L28.116,41.703L29.962,42.257L29.688,41.307ZM43.079,38.555L44.92,38.009L45.193,37.065L43.352,37.608L43.079,38.555Z"/></svg>');
    mask-size: 100% 100%;
}
/*

#logo_fixed:BEFORE,
#logo_fixed:AFTER{
    content: '';
    position: absolute;
    left: 100%;
    top: 0;
    width: 2px;
    height: calc(100% + 2px);
}

#logo_fixed:BEFORE{
    left: 0;
    top: 100%;
    width: 100%;
    height: 2px;

}
*/

.loadme{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#stay.show #logo_fixed{
    transform: translate3d(0,0,0);
}

/*
#logo_fixed svg{
    position: absolute;
    height: 24px;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}
*/

#logo_fixed:HOVER img{
    height: 30px;
}

video{
    width: 100%;
    height: auto;
    display: block;
}

#contacttable{
    width: 100%;
}

#contacttable tr td:NTH-CHILD(2){
    text-align: right;
}

.kunden{
    display: grid;
    grid-row-gap: 50px;
    grid-column-gap: 100px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
    margin: 50px 0;
}

.kunde{
    position: relative;
    width: 100%;
    height: 90px;
    padding: 0 40px;
}

.kunde:HOVER{
    padding: 0;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kunde svg{
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(1);
}

.kunde:HOVER svg{
    filter: grayscale(0);
}

.reelbutton{
    color: inherit;
    text-decoration: none;
    opacity: .4;
}

.reelbutton:HOVER{
    opacity: 1;
}

.reelbutton.active{
    font-family: 'meb';
    opacity: 1;
}

.reellink.active{
    font-family: 'meb';
    color: #008bca!important;
}

#reels_box{
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    aspect-ratio: 2.352 / 1;
}

.reels{
    aspect-ratio: 2.352 / 1;
}

.reelsul{
    margin: 0;
    padding: 0;
    white-space: nowrap;
    font-size: 0;
	transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
    display: flex;
}

.par{
    position: absolute;
    height: 100%;
	transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

#reel_mute_box{
    position: absolute;
    width: 42px;
    height: 42px;
    bottom: 50px;
    left: 0;
    background-color: #eee;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.455 0l-3.234 3.984-7.221 4.016v2.288l3.836-2.136-5.844 7.198v-7.35h-4.992v10h2.842l-3.842 4.731 1.545 1.269 18.455-22.731-1.545-1.269zm-14.455 16h-1v-6h1v6zm13-8.642v15.642l-8.749-4.865 1.277-1.573 5.472 3.039v-9.779l2-2.464z"/></svg>');
    background-position: center center;
    background-repeat: no-repeat;
}

.sound #reel_mute_box{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 0v24l-11-6v-2.278l9 4.909v-17.262l-9 4.91v-2.279l11-6zm-13 6v12h-7v-12h7zm-2 2h-3v8h3v-8z"/></svg>');
}


.vid_controlls{
    position: absolute;
    bottom: 45px;
    width: 100%;
  }

#reels_progress_box{
    width: calc(100% - 140px);
    height: 2px;
    background-color: rgba(0,0,0,0.1);
}

#reels_progress{
    height: 2px;
    background-color: #2b2b2b;
    width: 0;
}

.vid_controlls ul{
    position: absolute;
    right: 0;
    top: 0;
    font-size: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.vid_controlls ul li{    
    display: inline-block;
    width: 30px;
    height: 22px;
    background-color: rgba(0,0,0,0.1);
    margin-left: 5px;
}

.input{
    background-color: transparent;
    border: 1px solid var(--col_black1);
    padding: 10px 20px;
    width: 100%;
    margin-bottom: 10px;
    color: var(--col_black1);
}

.input:FOCUS{
    background-color: var(--col_black2);
    outline: none;
    color: #fff;
}

.tnp-submit,
.button{
    border: 1px solid var(--col_black1)!important;
    padding: 7px 20px!important;
    background-color: var(--col_black2)!important;
    color: #fff!important;
    cursor: pointer!important;
    text-decoration: none!important;
    font-size: inherit!important;
}

.tnp-submit:HOVER,
.button:HOVER{
    background-color: #fff!important;
    color: #2b2b2b!important;
}

.projekt_link{
    position: absolute;
    bottom: 50px;
    right: 0;
}

.projekt_kunde{
    text-align: left;
    line-height: 1;
}

.edit_box{
    position: absolute;
    bottom: 10px;
    right: 0;
}

.projekt_tags{
    text-align: left;
    color: #ccc;
}

.projek_tags span{
    color: var(--col_black2);
    hyphens: none;
    white-space: nowrap;
}


.slider_box{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.slider.shake {
    animation-timing-function: ease-in-out;
    animation: horizontal-shaking 0.3s;
    animation-iteration-count: 1;
}

.shake{
    animation-timing-function: ease-in-out;
    animation: horizontal-shaking 0.3s;
    animation-iteration-count: 1;
}

@keyframes horizontal-shaking {
 0% { transform: translateX(0) }
 25% { transform: translateX(10px) }
 50% { transform: translateX(-10px) }
 75% { transform: translateX(10px) }
 100% { transform: translateX(0) }
}

.wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1;
    display: flex;
    height: 100%;
}



.slide {
  width: auto;
  height: 100%;
    aspect-ratio: 16 / 9;

}

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


.control {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 20;
    opacity: 0;
    left: 0;
}

.control.nomouse{
    cursor: none;
}

.next {
    left: auto;
    right: 0;
}

.tnp{
    margin: 0!important;
    max-width: none!important;
}

#login,
.tnp form{
    display: flex;
}

button:disabled,
button[disabled],
input:disabled,
input[disabled]{
    opacity: 0.2;
}

#login{
    gap: 10px;
}

#login.fail{
    animation: horizontal-shaking 0.25s 2;
}

@keyframes horizontal-shaking {
    0% { transform: translateX(0) }
    25% { transform: translateX(5px) }
    50% { transform: translateX(-5px) }
    75% { transform: translateX(5px) }
    100% { transform: translateX(0) }
}

.tnp form .tnp-field{
    position: relative;
    flex: 1;
    font-size: inherit!important;
}

.tnp form .tnp-field-email{
    max-width: none;
    padding-right: 10px!important;
}


#login input,
.tnp form .tnp-field-email input{
    padding: 7px 15px;
    border: 1px solid var(--col_black1);
    background: transparent;
    font-size: inherit!important;
    width: 100%;
}

#login .login_pw_box,
#login input{
    position: relative;
    flex: 1;
}

.tnp-field-email .loader,
.login_pw_box .loader{
    position: absolute;
    top: 6px;
    right: 7px;
    display: none;
}

.tnp-field-email .loader{
    right: 17px;
}

#login input:FOCUS,
.tnp form .tnp-field-email input:FOCUS{
    border-color: #008bca;
    outline: none;
}

#login .button,
.tnp form .tnp-field-button{
    flex-grow: 0;
}

.tnp-field label{
    display: none!important;
}


footer{
    position: fixed;
    width: 100%;
    height: 42px;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color: #2b2b2b;
    color: #fff;
}


footer ul{
    position: absolute;
    right: 0;
    top: 9px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0;
}

footer ul li{
    display: inline-block;
    margin-left: 9px;
}

footer ul li a svg{
    display: block;
}

footer ul li a svg path{
    fill: #ccc;
}

footer ul li a:HOVER svg path{
    fill: #fff;
}

#byetag{
    margin-top: 11px;
    display: inline-block;
}


#svgs svg{
    width: 0;
    height: 0;
}

#loads{
    width: 0;
    height: 0;
    overflow: hidden;
}

.wp-block-list{
    list-style: square;
    padding-left: 25px;
}


.loader {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #008bca #008bca transparent transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent transparent #ff5500 #ff5500;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}
.loader::before {
  width: 10px;
  height: 10px;
  border-color: #004565 #004565 transparent transparent;
  animation: rotation 1.5s linear infinite;
}
    
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
    


@media only screen and (max-width: 1550px) {
    :root{
        --thewidth      : calc(100% - 200px);
    }
    .kunde{
        padding: 0 20px;
    }
}


@media only screen and (max-width: 1280px) {
    .kunde{
        padding: 0 10px;
    }
}
@media only screen and (max-width: 1180px) {
    .kunden{
        grid-row-gap: 40px;
        grid-column-gap: 70px;
    }
}

@media only screen and (max-width: 1024px) {
    :root{
        --thewidth      : calc(100% - 100px);
    }
    
    .flex{
        gap: 30px;
    }
    
    .kunden{
        grid-row-gap: 30px;
        grid-column-gap: 70px;
    }
    
    .kunde{
        padding: 0 0;
    }
    
}


@media only screen and (max-width: 900px) {
    
    .flex{
        display: block;
        border-bottom: 2px solid #eee;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    
    .subbox{
        border: 0;
        padding: 10px 0;
    }
    
    .box .subbox:nth-of-type(2){
        padding-top: 10px;
    }
    
    h2{
        margin-bottom: 0;
    }
    
    .count::after {
        top: 4px;
    }
    
    .count2::after {
        top: 4px;
    }
    
    .kunden{
        grid-row-gap: 10px;
        grid-column-gap: 50px;
    }
    
    .flex.one .subbox:NTH-CHILD(2){
        display: flex;
    }
    
}

@media only screen and (max-width: 640px) {
    
    :root{
        --thewidth      : calc(100% - 60px);
    }
    
    .flex.one .subbox:NTH-CHILD(2){
        display: block;
    }
    
}

@media only screen and (max-width: 640px) {
    
    :root{
        --thewidth      : calc(100% - 40px);
        --fontsize1     : 14px;
    }
    
    .box{
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .box.one{
        border-top: 0;
    }
    
    main{
        padding: 20px 10px;
    }
    
    #reels_box,
    .slider_box{
        width: calc(100% + 40px);
        margin-left: -20px;
    }
    
    #reel_mute_box{
        left: auto;
        right: 0;
        bottom: auto;
        top: 10px;
    }
    
    .slider_box .control{
        display: none;
    }
    
    .flexchild,
    .flexchild3{
        text-align: left;
    }
    
    .kunde{
        padding: 0;
    }
    
    .kunden{
        grid-template-columns: 1fr 1fr 1fr;
        grid-row-gap: 20px;
        grid-column-gap: 40px;
    }
    
    .kunde_peeragora{
        display: none;
    }
    
    .kunde{
        height: 50px;
    }
    
    h2,
    h3,
    .count:after,
    .count2:after{
        font-size: 24px;
    }
    
    h2 div{
        font-size: 18px;
    }
    
    .count:after,
    .count2:after{
        top: 10px;
        z-index: -1;
    }
        
    #logo_fixed{
        left: 0;
    }
}

@media screen and (orientation: portrait) {
    #projects .slider_box,
    #projects .slider,
    #projects .slide{
        aspect-ratio: 9 / 14;
    }
    
    .oner .subbox .flexchild:NTH-CHILD(1){
        margin-bottom: 20px;
    }
}