html {
    scroll-behavior: auto !important
}

body, html {
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;
}

#smooth-wrapper, #smooth-content {
}

section[data-speed] {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    position: relative;
}

:root {
    --padding: 2rem;


    --maincolor: #BA1424;
    --seccolor: #50BBB8;
    --static-white: #fff;
    --static-black: rgb(49, 49, 48);
    --static-maincolor: #BA1424;
    --static-seccolor: #50BBB8;

    --menuwidth: calc(var(--padding) * 4);
    --menutop: var(--padding);
    --headerpadding: calc(calc(var(--menuwidth) * 1.25) + calc(calc(var(--menuwidth) / 2) + calc(var(--padding) * 1.5)) + var(--padding) + calc(var(--menuwidth) / 2));
    --headerpaddingHover: calc(calc(var(--menuwidth) * 1.5) + calc(calc(var(--menuwidth) / 2) + calc(var(--padding) * 1.5)) + var(--padding) + calc(var(--menuwidth) / 2));
calc(var(--padding) * 3)

}

@media (min-width: 768px) {
    :root {
        --padding: 2rem;
    }
}

@media (min-width: 992px) {
    :root {
        --padding: 2.5rem;
        --menuwidth: calc(var(--padding) * 3);
        --menutop: calc(var(--padding) * 1.25);
    }
}

@media (min-width: 1200px) {
    :root {
        --padding: 3rem;
        --menuwidth: calc(var(--padding) * 2.5);
    }
}

@media (min-width: 1600px) {
    :root {
        --padding: 4rem;
    }
}

body, html {
    margin: 0;
    height: 100%;
    font-family: sans-serif;
    font-size: 10px;
}

body {
    --blurvalue: 4px;
    --blur: blur(var(--blurvalue));
    --grayscale: grayscale(1);
    --grayscale-43: grayscale(.43);
    --grayscale-14: grayscale(.14);
    --bgcolor: rgb(49, 49, 48);
    --bgcolor-86: rgba(49, 49, 48, .86);
    --bgcolor-65: rgba(49, 49, 48, .65);
    --bgcolor-43: rgba(49, 49, 48, .43);
    --bgcolor-14: rgba(49, 49, 48, .14);
    --bgcolor-0: rgba(49, 49, 48, 0);
    --bggridoverlay: rgba(49, 49, 48, .43);
    --bggridcolor: rgba(49, 49, 48, .05);
    --gridcolor: var(--static-white);
    --textcolor: var(--static-white);
    --gridcolor-86: rgba(255, 255, 255, .86);
    --gridcolor-65: rgba(255, 255, 255, .65);
    --gridcolor-43: rgba(255, 255, 255, .43);
    --gridcolor-14: rgba(255, 255, 255, .14);
    --gridcolor-0: rgba(255, 255, 255, 0);

    --mainshadow: 0 0 20px rgba(0, 0, 0, .43);
    --textshadow: 0 0 14px var(--bgcolor-43);

    --innerpadding: var(--padding);

}

body.isSafari {
    --blurvalue: 2px;
}

body.positiv,
body.lightmode {
    --bgcolor: var(--static-white);
    --bgcolor-86: rgba(255, 255, 255, .86);
    --bgcolor-65: rgba(255, 255, 255, .65);
    --bgcolor-43: rgba(255, 255, 255, .43);
    --bgcolor-14: rgba(255, 255, 255, .14);
    --bgcolor-0: rgba(255, 255, 255, 0);
    --bggridoverlay: rgba(255, 255, 255, .43);
    --bggridcolor: rgba(255, 255, 255, .05);;
    --gridcolor: rgb(49, 49, 48);
    --textcolor: rgb(49, 49, 48);
    /*--textcolor: rgb(0, 0, 0);*/
    --gridcolor-86: rgba(49, 49, 48, .86);
    --gridcolor-65: rgba(49, 49, 48, .65);
    --gridcolor-43: rgba(49, 49, 48, .43);
    --gridcolor-14: rgba(49, 49, 48, .14);
    background-color: var(--bgcolor);
    background-image: url(../images/bg-dark.svg);

}

body {
    z-index: 1;
    /*
    background: linear-gradient(-90deg, var(--bggridcolor) 1px, transparent 1px),
    linear-gradient(-90deg, var(--bggridcolor) 1px, transparent 1px),
    linear-gradient(transparent 1px, transparent 1px),
    linear-gradient(transparent 3px, var(--bgcolor) 3px, var(--bgcolor) 41px, transparent 41px),
    linear-gradient(-90deg, var(--gridcolor-14) 1px, transparent 1px),
    linear-gradient(-90deg, transparent 3px, var(--bgcolor) 3px, var(--bgcolor) 41px, transparent 41px),
    linear-gradient(var(--gridcolor-14) 1px, transparent 1px),
    transparent;
    background-size: 4px 4px,
    4px 4px,
    43px 43px,
    43px 43px,
    43px 43px,
    43px 43px,
    43px 43px,
    43px 43px;*/
    background-size: 44px 44px;
    background-attachment: fixed;
    background-color: var(--bgcolor);
    background-image: url(../images/bg-white.svg);
    color: var(--textcolor);
    font-family: "pragmatica", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: var(--mainfont);
}


.sectionheader {
    will-change: opacity;
}

.sectioninner + .sectioninner {
    margin-top: calc(var(--padding) * 3);
}

/*
#smooth-wrapper {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    transform: translate3d(0,0,0);
    transform: translateZ(0);
}*/

body {
    --mainfontFactor: 1;
    --mainfont: calc(1.2rem * var(--mainfontFactor));
}

html.increasetext body {
    --mainfont: calc(1.2rem * 2);
}

@media (min-width: 768px) {
    body {
        --mainfont: calc(1.5rem * var(--mainfontFactor));
    }
}

@media (min-width: 992px) {
    body {
        --mainfont: calc(1.6rem * var(--mainfontFactor));
    }
}

@media (min-width: 1400px) {
    body {
        --mainfont: calc(1.8rem * var(--mainfontFactor));
    }
}

@media (min-width: 1600px) {
    body {
        --mainfont: calc(2rem * var(--mainfontFactor));
    }
}

@media (min-width: 1921px) {
    body {
        --mainfont: calc(2.2rem * var(--mainfontFactor));
    }
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html, body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.sectionheader,
.sectioninner {
    --innerpadding: var(--padding)
}

.sectioninner + .sectioninner {
    margin-top: calc(var(--padding) * 3);
}

@media (min-width: 768px) {
    .sectionheader,
    .sectioninner {
        --innerpadding: calc(var(--padding) * 4)
    }
}

.sectionheader,
.sectioninner {
    padding-left: var(--innerpadding) !important;
    padding-right: var(--innerpadding) !important;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

/*
.sectioninner > .container,
.sectioninner > .container-fluid {
    margin-left: -15px;
    margin-right: -15px;
}*/

.sectioninner > .container-fluid {
    max-width: calc(100% + 30px);
}

b, strong {
    font-weight: 900
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--textcolor);
    text-transform: uppercase;
    line-height: .86;
    font-family: "pragmatica-extended", sans-serif;
    font-weight: 900;
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-character: '';
    hyphenate-character: '';
    font-display: swap;
}

p {
    color: var(--textcolor);
    font-family: "pragmatica", sans-serif;
    font-weight: 100;
}

h1, .h1 {
    /*letter-spacing: -1rem;*/
    font-weight: 900;
    font-style: normal;
    font-family: "pragmatica-extended", sans-serif;
    text-transform: uppercase;
    --fontCalc: 1.86rem;
    --fontSize: 4.8rem;
    font-size: calc(var(--fontSize) * var(--mainfontFactor));
}

.h1.largehead {
    hyphens: auto;
    hyphenate-character: '';
    max-width: 86%;
    color: var(--gridcolor-14);
    line-height: 1;
    position: absolute;
    left: calc(var(--innerpadding) / 2);
    left: var(--innerpadding);
    top: 0;
    pointer-events: none !important
}

.sectioncontent {
    padding-top: 5vH;
    will-change: opacity;
    position: relative;
}

div:has(>.largehead) {
    position: relative;
}

p {
    color: var(--textcolor);
    font-family: "pragmatica", sans-serif;
    font-weight: 100;
}

h1, .h1 {
    /*letter-spacing: -1rem;*/
    font-weight: 900;
    font-style: normal;
    font-family: "pragmatica-extended", sans-serif;
    text-transform: uppercase;
    --fontCalc: 1.86rem;
    --fontSize: 5.1rem;
    font-size: calc(var(--fontSize) * var(--mainfontFactor));
    line-height: .86

}

.h1.largehead {
    hyphens: auto;
    hyphenate-character: '';
    max-width: 86%;
    color: var(--gridcolor-14);
    line-height: 1;
    position: absolute;
    left: calc(var(--innerpadding) / 2);
    left: var(--innerpadding);
    top: 0;
}

.sectioncontent {
    padding-top: 5vH
}

div:has(>.largehead) {
    position: relative;
}

@media (min-width: 567px) {
    h1, .h1 {
        font-size: 7rem;
        font-size: calc(var(--fontCalc) + var(--fontSize) * var(--mainfontFactor));

    }
}

@media (min-width: 768px) {
    h1, .h1 {
        font-size: 9rem;
        font-size: calc(var(--fontCalc) * 2 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 992px) {
    h1, .h1 {
        font-size: 11rem;
        font-size: calc(var(--fontCalc) * 3 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1200px) {
    h1, .h1 {
        font-size: 13rem;
        font-size: calc(var(--fontCalc) * 4 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1400px) {
    h1, .h1 {
        font-size: 15rem;
        font-size: calc(var(--fontCalc) * 5 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1600px) {
    h1, .h1 {
        font-size: 17rem;
        font-size: calc(var(--fontCalc) * 6 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1921px) {
    h1, .h1 {
        font-size: 19rem;
        font-size: calc(var(--fontCalc) * 7 + var(--fontSize) * var(--mainfontFactor));
    }
}

h2, .h2 {
    --fontCalc: 1.5rem;
    --fontSize: 4.209rem;
    font-size: calc(var(--fontSize) * var(--mainfontFactor));
    /*letter-spacing: -1rem;*/
    font-weight: 900;
    font-style: normal;
    font-family: "pragmatica-extended", sans-serif;
    line-height: .86


}

@media (min-width: 567px) {
    h2, .h2 {
        font-size: calc(var(--fontCalc) + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 768px) {
    h2, .h2 {
        font-size: calc(var(--fontCalc) * 2 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 992px) {
    h2, .h2 {
        font-size: calc(var(--fontCalc) * 3 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1200px) {
    h2, .h2 {
        font-size: calc(var(--fontCalc) * 4 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1400px) {
    h2, .h2 {
        font-size: calc(var(--fontCalc) * 5 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1600px) {
    h2, .h2 {
        font-size: calc(var(--fontCalc) * 6 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1921px) {
    h2, .h2 {
        font-size: calc(var(--fontCalc) * 7 + var(--fontSize) * var(--mainfontFactor));
    }
}
.innertypefield,

h3, .h3 {
    --fontCalc: 1rem;
    --fontSize: 2.157rem;
    font-size: calc(var(--fontSize) * var(--mainfontFactor));
    /*letter-spacing: -1rem;*/
    font-weight: 900;
    font-style: normal;
    font-family: "pragmatica-extended", sans-serif;
    line-height: .86
}

@media (min-width: 567px) {
    .innertypefield,

    h3, .h3 {
        font-size: calc(var(--fontCalc) * 1 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 768px) {
    .innertypefield,
    h3, .h3 {
        font-size: calc(var(--fontCalc) * 1.75 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 992px) {
    .innertypefield,
    h3, .h3 {
        font-size: calc(var(--fontCalc) * 2.5 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1200px) {
    .innertypefield,
    h3, .h3 {
        font-size: 7.157rem;
        font-size: calc(var(--fontCalc) * 3.25 + var(--fontSize) * var(--mainfontFactor));

    }
}

@media (min-width: 1400px) {
    .innertypefield,
    h3, .h3 {
        font-size: 8.157rem;
        font-size: calc(var(--fontCalc) * 4 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1600px) {
    .innertypefield,
    h3, .h3 {
        font-size: 9.157rem;
        font-size: calc(var(--fontCalc) * 4.75 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1921px) {
    .innertypefield,
    h3, .h3 {
        font-size: 10.157rem;
        font-size: calc(var(--fontCalc) * 5.5 + var(--fontSize) * var(--mainfontFactor));
    }
}

.innertypefield { line-height: 2}

h4, .h4 {
    --fontCalc: .5rem;
    --fontSize: 1.953rem;
    --fontSize: 2.369rem;
    font-size: calc(var(--fontSize) * var(--mainfontFactor));
}

@media (min-width: 567px) {
    h4, .h4 {
        font-size: calc(var(--fontCalc) * 1 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 768px) {
    h4, .h4 {
        font-size: calc(var(--fontCalc) * 1.5 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 992px) {
    h4, .h4 {
        font-size: calc(var(--fontCalc) * 2 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1200px) {
    h4, .h4 {
        font-size: 7.157rem;
        font-size: calc(var(--fontCalc) * 2.5 + var(--fontSize) * var(--mainfontFactor));

    }
}

@media (min-width: 1400px) {
    h4, .h4 {
        font-size: 8.157rem;
        font-size: calc(var(--fontCalc) * 3 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1600px) {
    h4, .h4 {
        font-size: 9.157rem;
        font-size: calc(var(--fontCalc) * 3.5 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1921px) {
    h4, .h4 {
        font-size: 10.157rem;
        font-size: calc(var(--fontCalc) * 4 + var(--fontSize) * var(--mainfontFactor));
    }
}

.kachel h4 {
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
}

.kachel h4,
h5, .h5, .bigbtntext {
    --fontCalc: .3rem;
    --fontSize: 1.2563rem;
    --fontSize: 1.777rem;
    font-size: calc(var(--fontSize) * var(--mainfontFactor));
}

@media (min-width: 567px) {
    .kachel h4,
    h5, .h5, .bigbtntext {
        font-size: calc(var(--fontCalc) * 1 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 768px) {
    .kachel h4,
    h5, .h5, .bigbtntext {
        font-size: calc(var(--fontCalc) * 1.5 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 992px) {
    .kachel h4,
    h5, .h5, .bigbtntext {
        font-size: calc(var(--fontCalc) * 2 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1200px) {
    .kachel h4,
    h5, .h5, .bigbtntext {
        font-size: 7.157rem;
        font-size: calc(var(--fontCalc) * 2.5 + var(--fontSize) * var(--mainfontFactor));

    }
}

@media (min-width: 1400px) {
    .kachel h4,
    h5, .h5, .bigbtntext {
        font-size: 8.157rem;
        font-size: calc(var(--fontCalc) * 3 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1600px) {
    .kachel h4,
    h5, .h5, .bigbtntext {
        font-size: 9.157rem;
        font-size: calc(var(--fontCalc) * 3.5 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1921px) {
    .kachel h4,
    h5, .h5, .bigbtntext {
        font-size: 10.157rem;
        font-size: calc(var(--fontCalc) * 4 + var(--fontSize) * var(--mainfontFactor));
    }
}

h6, .h6 {
    --fontCalc: .15rem;
    --fontSize: 1.15rem;
    --fontSize: 1.333rem;
    font-size: calc(var(--fontSize) * var(--mainfontFactor));
}

@media (min-width: 567px) {
    h6, .h6 {
        font-size: calc(var(--fontCalc) * 1 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 768px) {
    h6, .h6 {
        font-size: calc(var(--fontCalc) * 1.5 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 992px) {
    h6, .h6 {
        font-size: calc(var(--fontCalc) * 2 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1200px) {
    h6, .h6 {
        font-size: 7.157rem;
        font-size: calc(var(--fontCalc) * 2.5 + var(--fontSize) * var(--mainfontFactor));

    }
}

@media (min-width: 1400px) {
    h6, .h6 {
        font-size: 8.157rem;
        font-size: calc(var(--fontCalc) * 3 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1600px) {
    h6, .h6 {
        font-size: 9.157rem;
        font-size: calc(var(--fontCalc) * 3.5 + var(--fontSize) * var(--mainfontFactor));
    }
}

@media (min-width: 1921px) {
    h6, .h6 {
        font-size: 10.157rem;
        font-size: calc(var(--fontCalc) * 4 + var(--fontSize) * var(--mainfontFactor));
    }
}


section {
    padding: var(--padding) 0;
    position: relative;
}



@media (orientation: landscape) {
    section:not(.vc_section) + section {
        margin-top: 14vH
    }
}

@media (orientation: portrait) {
    section + section {
        margin-top: 7vH
    }
}
section#title + section,
section.maincontent {
    margin-top: 0 !important;
}

.sticky-element {
    /*position: sticky;*/
    display: flex;
    inset: 0;
    width: 100%;
    height: 100vH;
    overflow: hidden
}

.track {
    position: relative;
    height: 100%;
}

.track-flex {
    display: flex;
    height: 100%;
    margin-right: -100vw;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.hero {
    width: 100vW;
    height: 100vH;
    display: flex;
    font-size: 50vH;
    flex: 0 0 auto;
    background: beige;
    align-content: center;
    align-items: center;
    text-align: left;
}


img {
    max-width: 100%;
    height: auto;
}

.headline {
    filter: blur(50px);
    opacity: 0;
    transform: translate3d(0, 0, 0);

}

.images1 {
    width: 32%;
    flex: 0 0 32%;
    max-width: 32%
}

.imagesa .anaglyph {
    transform-origin: top right
}

.imagesb .anaglyph {
    transform-origin: top center
}

.imagesc .anaglyph {
    transform-origin: top left
}

.progress {
    position: fixed;
    left: 0;
    top: 0;
    background: var(--maincolor);
    height: 4px;
    z-index: 100;
    mix-blend-mode: difference;
}

body.admin-bar .progress {
    top: 32px !Important
}

/*
footer.footer {
    min-height: 100vH;
}*/

#square1 {
    position: fixed;
    inset: -20vh -20vw;
    mix-blend-mode: darken
}

#square2 {
    position: fixed;
    inset: -20vh -20vw;
}


.text {
    padding: var(--padding);
    /*position: sticky;*/
    top: 86px;
}

.text span.line-content {
    background: linear-gradient(
            to right,
            var(--textcolor) 50%,
            rgba(0, 0, 0, 0) 50%
    );
    background-size: 200% 100%;
    background-position-x: 100%;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    opacity: 0;
    scale: .43;
    display: inline-block;
    transform-origin: left;
    filter: var(--blur);
    transform: translate3d(0, 0, 0);
    transform-origin: center;
    /*   margin-bottom: -250px; */
    /*   outline: 6px dotted teal; */
}

header {
    min-height: 86svH;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.ak86logo {
    position: fixed;
    left: calc(var(--padding) - 1px);
    top: var(--padding);
    width: calc(var(--padding) * 2);
    z-index: 9999999;
    max-width: 86px;
    max-width: calc(var(--padding) * 2);
    max-height: 86px;
    max-height: calc(var(--padding) * 2);
    overflow: clip;
    aspect-ratio: 1;
}

#ak86back {
    mix-blend-mode: difference;
}

body.lightmode #ak86back {
    mix-blend-mode: luminosity
}

.ak86logo svg .color * {
    fill: var(--static-maincolor)
}

.ak86logo svg .plain * {
    fill: var(--textcolor)
}

@media (min-width: 1680px) {
    .container-xxl {
        max-width: 1600px;
    }
}


body.navaffix .innerheader {
    border-radius: 100px !important;
    padding: 15px 45px;
}


body.navaffix .elementor-location-header > div.elementor-element {
    padding-left: 2vW;
    padding-right: 2vW;
    top: 2vW !important
}

/*
section {
    padding: var(--padding);
    background-color: rgba(0, 0, 0, .86);
    border-radius: 40px;
    margin: 100px 2vw;
    padding: 8vW !important;
}*/

/** SECRET **/
.secret {
    display: flex;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: transform ease .3s;
    transform-origin: center center;
    transform: translateY(-100%) rotate(360deg) scale(0);
}

body.secretcode .secret {
    transform: translateY(0) rotate(0) scale(1);
    opacity: 1;
}

body.secretcode #smooth-wrapper {
    transform-origin: top center;
    scale: .43 !important;
    filter: var(--blur);
    overflow: visible;
    transform: translate3d(0, 0, 0);
}


.sectionheader {
    margin-bottom: var(--padding);
    /*position: sticky;*/
    top: -1px;
    z-index: 66;
    will-change: transform;
    display: flex;
    align-items: end;
    max-width: unset;
    padding-left: calc(var(--padding) - 1px) !important;
    padding-right: var(--padding) !important;
    padding-top: calc(var(--menutop) * 3.5 + 1px);
    opacity: 0;
    transform: translateY(-33%);
}

@media (min-width: 768px) {
    .sectionheader {
        padding-left: calc(var(--padding) / 2) !important;
        padding-right: calc(var(--padding) / 2) !important;
    }
}


.sectionheader .container-fluid {
    position: relative;
    height: calc(var(--menuwidth) / 2)
}

.sectionheader .container-fluid:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    backdrop-filter: var(--blur);
    transform: translate3d(0, 0, 0);

    transition: all ease .3s;
    will-change: transform;
    background: var(--bgcolor-43);
    background: linear-gradient(90deg, var(--bgcolor-43) 0%, var(--bgcolor-0) 100%);

}

.sectionheader .container-fluid:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
    height: 1px;
    width: 0;
    background: linear-gradient(90deg, var(--gridcolor) 0%, var(--gridcolor-0) 100%);
    transition: all ease .3s;
    will-change: transform;
}

.sectionheader.isSticky .container-fluid:after {
    opacity: 1;
    top: 0;
}

.sectionheader.isSticky .container-fluid:before {
    opacity: 1;
    width: 100%;
}

.sectionheader.isSticky .sectionnavcol {
    width: auto;
}

@media (min-width: 768px) {
    .sectionheader {
        padding-top: calc(var(--menutop) + 1px);
        padding-left: var(--innerpadding) !important;
        padding-right: var(--headerpadding) !important;
    }

    body:has(.contactbtn:hover) .sectionheader {
        padding-right: var(--headerpaddingHover) !important
    }
}


#sectionnav {
    display: flex;
}

.sectionnavigator {
    opacity: .33;
    position: relative;
    transition: all ease .5s;
    will-change: transform;
    padding: 0 2px;
}

.sectionnavigator:hover {
    opacity: .66;
    padding: 0 4px;
}

.sectionnavigator.active {
    opacity: 1;
}

.snnumber {
    aspect-ratio: 1;
    display: inline-block;
    line-height: 1;
    font-size: 8px;
}

.sntext {
    display: none !important;
    max-width: 0;
    overflow: hidden;
    display: inline-block;
    line-height: 1;
    transition: max-width ease .3s;
    will-change: transform;
    font-size: 8px;
}

.navtitle {
    line-height: 1;
    font-size: 8px;
}

.sectionnavigator:hover .sntext {
    max-width: 1000px
}


#activesection {
    transition: all ease .3s
}

#activesection:has(+#nextsection.showing) {
    opacity: .43
}

#nextsection {
    display: none
}


.sectionheader h4 {
    font-size: 1.3rem;
}


@media (min-width: 992px) {
    #nextsection {
        opacity: 0;
        transition: opacity ease .3s;
        will-change: transform;
    }

    #nextsection.showing {
        opacity: 1;
    }

    .snnumber {
        font-size: 12px;
    }

    .navtitle,
    .sntext {
        font-size: 12px;
    }

    .sectionheader h4,
    .sectionheader h4 #activesection {
        font-size: 1.8rem;
    }
}

.sectioncontent {
    position: relative
}

.sectioncontent:has(+ .sectioncontent) {
    margin-bottom: var(--padding);
}

.row.hasgap {
    row-gap: var(--padding)
}

.small-gap {
    margin-bottom: calc(var(--padding) / 2) !important
}

.gap {
    margin-bottom: var(--padding) !important
}

.big-gap {
    margin-bottom: calc(var(--padding) * 2) !important
}

.huge-gap {
    margin-bottom: calc(var(--padding) * 3) !important
}

.subsection .sectionheader {
    opacity: .43
}

.sectioncounter * {
    line-height: 1
}

.sectioncounter, .sectiontotal {
    font-size: 16px;
    font-weight: 900
}

.sectiontotal {
    opacity: .43
}

.sectionheader h2 {
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0;
    height: 32px;
}

.expertiseitem {
    margin: calc(var(--padding) * 4) auto
}

.expertiseitem h3 {
    font-size: 6rem;
    font-weight: 900
}

.btn {
    color: var(--static-white);
    border-radius: 0;
    font-size: 1.6rem;
    font-weight: 800;
    padding: 10px 20px;
    position: relative;
    z-index: 2;
    border: 0;
    transition: padding ease .5s;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0);
    will-change: transform;
}

.btn:has(.ghost) {
    padding: 0;
}

.ghost {
    padding: 10px 20px;
    background-color: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0);
    color: var(--static-white);
    position: relative;
    z-index: 3;
    font-weight: bold;
}

.hovering {
    --hoverColor: var(--gridcolor);
}

.hovering:after {
    content: "";
    position: absolute;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    top: calc(2px / -1);
    left: calc(2px / -1);
    background: linear-gradient(to right, var(--hoverColor) 0%, var(--hoverColor) 100%), linear-gradient(to top, var(--hoverColor) 50%, transparent 50%), linear-gradient(to top, var(--hoverColor) 50%, transparent 50%), linear-gradient(to right, var(--hoverColor) 0%, var(--hoverColor) 100%), linear-gradient(to left, var(--hoverColor) 0%, var(--hoverColor) 100%);
    background-size: 100% 1px, 1px 200%, 1px 200%, 0% 1px, 0% 1px;
    background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
    background-repeat: no-repeat, no-repeat;
    transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
    transform: scaleX(0) rotate(0deg);
    transition-delay: 0.6s, 0.3s, 0s;


}

.displayitem:hover .hovering:after,
body.contactin .contactbtn.header.hovering:after,
body.navIn .menutoggle.hovering:after,
.menutoggle:hover:after,
.hovering:hover:after {
    /*
    clip-path: polygon(0 0, 0 100%, 100% 100%);*/
    background-size: 200% 1px, 1px 400%, 1px 400%, 55% 1px, 55% 1px;
    background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    transform: scaleX(1) rotate(0deg);
    transition-delay: 0s, 0.3s, 0.6s;
}

/*
.btn:before {
    content: '';
    position: absolute;
    inset: 0;
    border-right: 1px solid var(--gridcolor);
    border-top: 1px solid var(--gridcolor);
    clip-path: polygon(0 0, 100% 100%, 0% 0);

    transition: all ease .5s;
    mix-blend-mode: difference;
    transition-delay: .1s;

    z-index: -1;
}

.btn:hover:before {
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}*/


.btn-default span {
    /*  filter: blur(0);
      transform: translate3d(0, 0, 0);*/
    position: absolute;
    inset: 0;
    z-index: -1;
    /*  transition: all ease 1s;*/
}

.btn-block {
    width: 100%;
}

.btn-default span span.btninner {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transform-origin: center center;
    will-change: transform;
    clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
    transition: background-color ease .3s, inset ease .3s;

}

.btninner {
    pointer-events: none
}

.btninner:before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--static-maincolor);
    will-change: top;
    transition: top ease .3s
}

.btn-default.startliveprev .btninner:before {
    background-color: var(--seccolor) !important;
}

.btn-default.startliveprev:hover span span.btninner {
    background-color: var(--maincolor) !important;

}

.btn:hover .btninner:before {
    top: 65%;
}

.btn:hover {
    padding-left: calc(var(--padding) * 1) !important;
    padding-right: calc(var(--padding) * 1) !important;
    text-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.btn-trans {
    border-color: var(--gridcolor);
    background-color: transparent;
    color: var(--gridcolor);
    padding: calc(var(--padding) / 2) var(--padding)
}

.btn-default:hover span span.btninner {
    inset: -20px -30px;
    background-color: var(--static-seccolor) !important;
    /*animation-play-state: running;*/
}

.bigbtn {
    padding: var(--padding);
    position: relative;
    perspective: 500px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 30;
    --hoverColor: var(--gridcolor) !important;
    width: max-content;
}

.bigbtninner {
    position: absolute;
    inset: -7%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    perspective: 500px;
}

.bigbtninnerinner {
    position: absolute;
    inset: 7%;
    z-index: -1;
    clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%);
    background-color: var(--maincolor);
    background-color: var(--seccolor);
}

.bigbtninnerinner2 {
    position: absolute;
    inset: 14%;
    z-index: -1;
    clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%);
    background-color: var(--seccolor);
    background-color: var(--maincolor);
}

.bigbtntext {
    position: relative;
    z-index: 2;
    will-change: transform;
    color: var(--static-white);
    text-transform: uppercase;
    line-height: .86;
    font-family: "pragmatica-extended", sans-serif;
    font-weight: 900;
    hyphens: none;
    hyphenate-character: '';
    width: min-content;
    word-break: keep-all;
    aspect-ratio: 2 / 1;
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    justify-content: center;
    text-shadow: 0 0 14px var(--bgcolor-14);
    transition: transform ease .3s
}

.bigbtntext span {
    font-size: 12px;
    opacity: 0;
    transform: translateY(-50%);
}

.bigbtn:hover .bigbtntext span {
    transform: translateY(0);
    opacity: 1;
}

.bigbtn:hover .bigbtntext {
    transform: translateZ(80px) scale(.86) !important;
    --textshadow: 0 0 14px var(--bgcolor-43);
}

.bigbtninner1,
.bigbtninner2 {
    position: absolute;
    inset: 0;
    /*filter: blur(40px);*/
    transform: translate3d(0, 0, 0);
    transition: transform ease .3s
}

.bigbtninner1 {
    right: 33%;
}

.bigbtninner2 {
    left: 33%;
}

.bigbtn:hover .bigbtninner1 {
    filter: blur(4px);
    inset: 0;
    transform: translate3d(0, 0, 0) translateZ(40px);

}

.bigbtn:hover .bigbtninner2 {
    transform: translate3d(0, 0, 0) translateX(4%) translateZ(24px);
    filter: blur(14px);
    inset: 0;
}


.bigbtnoverlay {
    position: absolute;
    inset: 0;
}

.menutoggle {
    position: fixed;
    top: var(--menutop);
    right: var(--padding);
    width: calc(var(--menuwidth) / 2);
    height: calc(var(--menuwidth) / 2);
    background-color: var(--static-maincolor);
    z-index: 999999;
    cursor: pointer;
    /*mix-blend-mode: hard-light;
    backdrop-filter: brightness(0.5) blur(4px);*/
}

.menutoggle.hovering:after {
    top: calc(2px / -2);
    left: calc(2px / -2);
}

.menutoggle .menuicon {
    position: absolute;
    inset: 0 0 2px;
    transform-origin: center center;
    transition: all ease .3s;
    transform: rotate(0deg)
}

.menui {
    --menubar: calc(calc(var(--menuwidth) / 2) * .75);
    transition: all ease 0.3s;
    position: absolute;
    width: var(--menubar);
    left: calc(50% - var(--menubar) / 2);
    height: 2px;
    background: var(--static-white);
    border-radius: 0;
    transform-origin: center;
}

/*
body.lightmode .menui {
    background: var(--bgcolor);
}
*/
body.lightmode.navIn .menui {
    background: var(--gridcolor);
}


.top-menu {
    top: 30%;
}

.mid-menu {
    top: 50%;
    width: calc(var(--menubar) * .6)
}

.bottom-menu {
    top: 70%;
}

.mid-menu:after {
    content: '';
    position: absolute;
    left: calc(100% + 4px);
    height: 2px;
    width: calc(var(--menubar) * .4 - 4px);
    background-color: var(--static-seccolor);
    transition: width ease .3s;
}

.menutoggle:hover .mid-menu {
    width: calc(var(--menubar) * .4)
}

.menutoggle:hover .mid-menu:after {
    width: calc(var(--menubar) * .6 - 4px);
}


body.navIn .top-menu {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: calc(50%)
}

body.navIn .mid-menu {
    opacity: 0;
}

body.navIn .bottom-menu {
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
    top: calc(50%)
}

body.navIn .menutoggle:hover .menuicon {
    transform: rotate(90deg)
}

body.navIn .ak86logo {
    mix-blend-mode: unset;
}

@media (min-width: 992px) {
    body.navIn .ak86logo .plain * {
        animation-name: changeLogoColor;
        animation-duration: .1s;
        animation-delay: .55s;
        animation-fill-mode: forwards;
    }
}

@keyframes changeLogoColor {
    to {
        fill: var(--bgcolor);
    }
}

body.navaffix .menutoggle:before {
    z-index: -1;
    top: 0;

}


body.navIn .menutoggle {
    background-color: transparent;
}

.boxmenu {
    --boxmenupadding: calc(var(--padding) + 7.5px);
    --menubg: rgba(0, 0, 0, .86);
    position: fixed;
    left: 100svW;
    min-width: 100svW;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 0 7px;
    z-index: 99999;
    overflow: hidden;
    font-size: 86%;
    color: var(--static-white);
    transition: left ease .60s;
    transition-delay: .45s;
}

/*
body.lightmode .boxmenu {
    --menubg: rgba(255, 255, 255, .86);
}
*/
.menuholder {
    position: absolute;
    inset: var(--boxmenupadding);
    overflow: auto;
    font-weight: 900;
}

.legalmenu {
    position: absolute;
    right: calc(var(--padding) * 3);
    bottom: 0;
    background-color: var(--static-maincolor);
}

.legalmenu ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.legalmenu ul li {
    float: left;
}

.legalmenu ul li a {
    font-size: 14px !important;
    padding: 7px 14px !important;
    color: var(--static-white);
    text-decoration: none;
    line-height: 14px;
    display: block;
}

.legalmenu ul li a:hover {
    color: var(--gridcolor-86)
}


.boxmenu .simplebar-content {
    height: 100%;
}

.boxmenu ul.nav {
    display: block
}

.boxmenu ul.nav li {
    display: inline-block;
    position: relative;
    float: right;
    clear: both;
    z-index: 1;
}

.boxmenu ul.nav li:hover {
    z-index: 2
}

.boxmenu ul.nav li a {
    color: var(--textcolor);
    display: inline-block;
    position: relative;
    z-index: 2;
    padding: 0 .14em;
    font-size: 4rem;
    text-decoration: none;
}

boxmenu ul.nav li:hover a {
    text-shadow: var(--textshadow);
}

@media (min-width: 1400px) {
    .boxmenu ul.nav li a {
        font-size: 6rem
    }
}

.boxmenu ul.nav li:after {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    height: 100%;
    top: 0;
    transition: transform ease .3s, background-color ease .3s;
    background-color: var(--static-seccolor);
    z-index: -1;
    transform-origin: center;
    transform: translateY(0%);
    transition: opacity ease 1s, transform ease .3s, background-color ease .3s, filter ease .3s;
    filter: blur(calc(var(--blurvalue) * 6));
    transform: translate3d(0, 0, 0);
    opacity: 0;
}

body.isSafari .boxmenu ul.nav li:after {
    left: 0;
    right: 0;
}

.boxmenu ul.nav li:hover:after {
    background-color: var(--static-seccolor) !important;
    transform: translateY(0%);
    opacity: 1;
}

body.single-projekt .boxmenu ul.nav li.projekte:after,
.boxmenu ul.nav li.current-menu-item:after {
    background-color: var(--static-maincolor);
    transform: translateY(0%);
    opacity: 1;
}

.boxmenu .newsitem {
    border-bottom: 1px dashed rgba(229, 229, 230, .43);
    padding: calc(var(--padding) / 2);
    margin-bottom: 14px;
    display: block;
    text-decoration: none;
}

.boxmenu .newsitem:hover {
    background-color: var(--gridcolor-14)
}

.boxmenu .newsitem,
.boxmenu .newsitem h5,
.boxmenu .newsitem p {
    color: var(--static-white) !important;
    text-decoration: none;
}


body.navIn {
    overflow: hidden
}

body.navIn .boxmenu {
    left: 0;
    transition-delay: 0s;
}

#menuRight {
    transition: transform ease .15s, opacity ease .15s;
    opacity: 0;
    transition-delay: .6s;
    transform: translateX(100%);
    background-color: var(--bgcolor-86);
    backdrop-filter: calc(var(--blurvalue) * 2);
    -webkit-backdrop-filter: calc(var(--blurvalue) * 2);
    transform: translate3d(0, 0, 0);
}

body.navIn #menuRight {
    opacity: 1;
    transition-delay: .15s;
    transform: translateX(0)
}

#menuLeftNews {
    transition: transform ease .15s, opacity ease .15s;
    opacity: 0;
    transition-delay: .30s;
    transform: translate3d(0, 0, 0) translateX(100%);
    backdrop-filter: calc(var(--blurvalue) * 2);
    -webkit-backdrop-filter: calc(var(--blurvalue) * 2);
    background-color: var(--static-maincolor);
}

#menuLeftNews h3 {
    color: var(--static-white)
}

body.navIn #menuLeftNews {
    opacity: 1;
    transition-delay: .30s;
    transform: translateX(0);
}

#menuLeftLogo {
    transition: transform ease .15s, opacity ease .15s;
    opacity: 0;
    transition-delay: .15s;
    transform: translate3d(0, 0, 0) translateX(100%);
    backdrop-filter: calc(var(--blurvalue) * 2);
    -webkit-backdrop-filter: calc(var(--blurvalue) * 2);
    background-color: var(--gridcolor-86);
}

body.navIn #menuLeftLogo {
    opacity: 1;
    transition-delay: .45s;
    transform: translateX(0)
}

#menuLeftBottomRow {
    --webkit-backdrop-filter: blur(calc(var(--blurvalue) * 2));
    backdrop-filter: blur(calc(var(--blurvalue) * 2));
}

#menuLeftClaim {
    transition: transform ease .15s, opacity ease .15s;
    opacity: 0;
    transition-delay: .15s;
    transform: translate3d(0, 0, 0) translateY(-100%);
    --webkit-backdrop-filter: calc(var(--blurvalue) * 2);

    backdrop-filter: calc(var(--blurvalue) * 2);
    background-color: var(--gridcolor-65);
    color: var(--bgcolor)
}

body.navIn #menuLeftClaim {
    opacity: 1;
    transition-delay: .45s;
    transform: translateY(0)
}

#menuLeftContact {
    transition: transform ease .15s, opacity ease .15s;
    opacity: 0;
    transition-delay: .0s;
    transform: translateY(-100%)
}

#menuRight .simplebar-scrollbar:before,
#menuLeftContact .simplebar-scrollbar:before {
    background-color: rgba(188, 58, 39, .95);
}

body.navIn #menuLeftContact {
    opacity: 1;
    transition-delay: .60s;
    transform: translateY(0)
}


span.url {
    padding: 4px;
    background-color: transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    transition: transform ease 3s;

}

span.url i {
    animation: heartbeat 3s infinite;
}

#menuLeftClaim:hover span.kreativ {
    transform: translate(-50%, -50%) rotateY(540deg)
}

#menuLeftClaim:hover span.url {
    transform: translate(-50%, -50%) rotateY(0deg)
}

@media (max-width: 767px) {
    #menuLeftTopRow {
        height: 100% !important
    }

    #menuLeftLogo, #menuLeftNews {
        height: 50%;
    }

}

@media (max-width: 575px) {
    #menuRight {
        transition-delay: 0s !important;
    }
}


@keyframes heartbeat {
    0% {
        transform: scale(1.25);
    }
    10% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.25);
    }
    30% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.25);
    }
    50% {
        transform: scale(1.25);
    }
}

.contactbtn {
    text-align: center;
    /*background-color: var(--static-seccolor);*/
    color: var(--static-white) !important;
    text-decoration: none;
}

.contactbtn.header {
    position: fixed;
    top: var(--menutop);
    right: calc(calc(var(--menuwidth) / 2) + var(--padding) + 8px);
    z-index: 999999;
    line-height: calc(var(--menuwidth) / 2);
    padding: 0 !important;
    width: calc(var(--menuwidth) * 1.25);
    transition: width ease .3s, padding ease .3s
}


.contactbtn.header:hover {
    width: calc(var(--menuwidth) * 1.5);
}


/*.contactbtn.header:hover {
    background-color: var(--static-maincolor);
}*/

.startcontact .btn-default {
    font-size: 86%
}

.startcontact i {
    color: var(--static-maincolor);
}

#contact {
    position: fixed;
    top: 0;
    bottom: 0;
    left: auto;
    right: 100%;
    width: 100svW;
    background-color: var(--bgcolor);
    /*backdrop-filter: blur(10px);*/
    z-index: 999999;
    color: var(--static-white);
    /*transform: translateX(-150%);
    transition: transform ease .25s; */
    transition: right ease .25s;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .14);
    will-change: right, transform;
    overflow: clip
}

.closeContact {
    position: absolute;
    top: var(--menutop);
    right: var(--padding);
    color: var(--textcolor);
    z-index: 10;
    cursor: pointer;
}

.closeContact:hover {
    opacity: .43
}

#contact .container {
    position: relative
}

body.contactin #contact {
    right: 0;
}

@media (min-width: 768px) {
    #contact {
        width: 50svw
    }

    body.contactin #contact {
        right: 50svW;
    }
}

.form-container .slide {
    color: #222;
}


body.contactin {
    overflow: hidden
}

body.contactin .wrapper {
    transform: translateX(50vW)
}

body.navIn.contactin #menuLeftClaim {
    opacity: 0;
    transform: translateY(-100%);
    transition-delay: .15s;
}

body.navIn.contactin #menuLeftContact {
    opacity: 0;
    transform: translateY(-100%);
    transition-delay: .0s;
}

body.navIn.contactin #menuLeftNews {
    opacity: 0;
    transition-delay: .30s;
    transform: translateX(100%);
}


#menuLeftNews h5,
#menuLeftNews h6 {
    color: var(--static-white)
}

.boxmenuscroller {
    position: absolute;
    inset: 0;
    padding: var(--boxmenupadding);
    overflow: auto;
    scrollbar-width: none;
}

body.navIn.contactin #menuLeftLogo {
    opacity: 0;
    transition-delay: .15s;
    transform: translateX(100%);

}

body.contactin .boxmenu {
    transition-delay: 0s;
}

#contact h3, #contact h4 {
    color: rgba(255, 255, 255, .14)
}


*:has(> .tilt) {
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;;
    transform-style: preserve-3d;;
    -moz-transform: perspective(1000px);
    -webkit-perspective: 1000px;
    perspective: 1000px;
    z-index: 1;
    isolation: isolate;
}

div:has(> .tilt:hover) {
    z-index: 2;
}

.tilt,
.tilt * {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform: rotateX(0) rotateY(0);
    will-change: transform;
}


progress {
    position: fixed;
    bottom: 0;
    left: 0;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border: none;
    background: transparent;
    z-index: 200;
}

progress::-webkit-progress-bar {
    background: transparent;
}

progress::-webkit-progress-value {
    background: linear-gradient(
            to left,
            var(--maincolor),
            var(--seccolor)
    );
    background-attachment: fixed;
}

progress::-moz-progress-bar {
    background: linear-gradient(
            to left,
            var(--maincolor),
            var(--seccolor)
    );
    background-attachment: fixed;
}


.themetoggle {
    display: inline-block;
    overflow: hidden;
    position: fixed;
    aspect-ratio: 1;
    z-index: 10000;
    width: calc(var(--menuwidth) / 2);
    right: calc(calc(var(--menuwidth) / 2) + var(--padding) + 16px + calc(var(--menuwidth) * 1.25));
    top: var(--menutop);
    backdrop-filter: var(--blur);
    transform: translate3d(0, 0, 0);
    transition: background-color ease .3s, right ease .3s;
    color: var(--textcolor);
    cursor: pointer;
}

body .themetoggle i {
    transition: all ease .3s;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    line-height: 40px;
}

body:has(.contactbtn.header:hover) .themetoggle {
    right: calc(calc(var(--menuwidth) / 2) + var(--padding) + 16px + calc(var(--menuwidth) * 1.5));
}

body.darkmode .themetoggle .fa-moon {
    transform: translateX(-50%) translateY(-50%)
}

body.darkmode .themetoggle .fa-sun {
    transform: translateX(-50%) translateY(50%)
}

body.darkmode .themetoggle:hover .fa-moon {
    transform: translateX(-50%) translateY(50%)
}

body.darkmode .themetoggle:hover .fa-sun {
    transform: translateX(-50%) translateY(-50%)
}

body.lightmode .themetoggle .fa-moon {
    transform: translateX(-50%) translateY(50%)
}

body.lightmode .themetoggle .fa-sun {
    transform: translateX(-50%) translateY(-50%)
}

body.lightmode .themetoggle:hover .fa-moon {
    transform: translateX(-50%) translateY(-50%)
}

body.lightmode .themetoggle:hover .fa-sun {
    transform: translateX(-50%) translateY(50%)
}

.horizontal {
    padding: 0;
    box-sizing: border-box;
}

.horizontal__container {
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.horizontal__list {
    display: flex;
}

@media (max-width: 991px) {
    .horizontal__list {
        flex-wrap: wrap;
    }
}

.horizontal__item {
    box-sizing: border-box;
}

@media (max-width: 1199px) {
    .horizontal__item {
        margin-left: 0;
    }
}

.horizontal__item:first-of-type {
    margin-left: 0;
}

.pagewrapper {
    overflow: clip;
    will-change: opacity;
}

/**A SSETS **/
.assetitem {
    /*border: 1px solid var(--textcolor); */
    aspect-ratio: 16 / 9;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: opacity;
    position: relative;
}


.assetitem svg {
    height: 86%;
    width: 86%;
}

.assetitem svg * {
    fill: var(--gridcolor) !important
}


/** KUNDEN **/

.logoitem {
    /*border: 1px solid var(--textcolor); */
    aspect-ratio: 16 / 9;
    backdrop-filter: var(--blur);
    transform: translate3d(0, 0, 0);
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: opacity;
}

.logoitem svg {
    height: 86%;
    width: 86%;
}

.logoitem svg * {
    fill: var(--gridcolor) !important
}

@media (hover: none) {
    .projektslideshow {
        display: block;
    }
}

@media (pointer: coarse) {
    .projektslideshow {
        display: block !important;
    }
}

.pin-spacer {
    pointer-events: none
}

.pin-spacer > * {
    pointer-events: all !important
}

#smooth-wrapper {
    overflow: clip !important
}

.avatar {
    width: 100%;
    background-color: var(--gridcolor-14);
    aspect-ratio: 1;
    background-size: cover;
    background-position: top center;
    backdrop-filter: var(--blur);
}

.legal {
    border-top: 1px solid var(--gridcolor);
    margin-bottom: 15px;
    font-size: 14px;
    padding-top: calc(var(--padding) / 3);
    padding-bottom: 0;
    line-height: 30px;
}

.legal ul {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.legal ul li {
    float: left;
}

.legal ul li {
    padding-left: 30px;
}

.legal ul li a {
    text-decoration: none;
    color: var(--textcolor)
}

.legal ul li a:hover {
    opacity: .86;
}

.text-animation h3 {
    color: var(--textcolor);
    text-align: left;
    padding: 250px 0;
}

.text-animation-element {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
}

.text-animation-element > div {
    opacity: 0
}

.text-animation-element-placeholder .text-animation-element {
    top: 0;
}

#project-overview {
    /*mix-blend-mode: multiply;*/
    position: relative;
    z-index: 1;
}

#project-overview .sectioncontent {
    /*filter: grayscale(.86);*/
}

@media (orientation: landscape) {
    .frontslideshow {
        aspect-ratio: 16/9;
    }

    #project-overview {
        margin-top: -21svH
    }
}

@media (orientation: portrait) {
    .frontslideshow {
        aspect-ratio: 3/4;
    }

    #project-overview {
        margin-top: -31svH
    }
}

.frontslideshow {
    --clip-offset: 4rem;
    clip-path: polygon(
            calc(0% + var(--clip-offset)) 0,
            calc(100% - var(--clip-offset)) 0,
            calc(100% - var(--clip-offset)) 100%,
            calc(0% + var(--clip-offset)) 100%);
}

@media (min-width: 768px) {
    .frontslideshow {
        --clip-offset: 2rem;
    }
}

@media (min-width: 992px) {
    .frontslideshow {
        --clip-offset: 5rem;
    }
}

@media (min-width: 1200px) {
    .frontslideshow {
        --clip-offset: 6rem;
    }
}

@media (min-width: 1600px) {
    .frontslideshow {
        --clip-offset: 8rem;
    }
}

.biglogo svg {
}

.biglogo .Ebene_2 {
    position: absolute;
    inset: 0;
}

.biglogo .Ebene_2 .cls-2, .biglogo .Ebene_2 .cls-1 {
    fill: transparent;
    stroke: #fff;
    z-index: 10;
}

.biglogo .cls-1 {
    fill: var(--static-maincolor);
}

.biglogo .cls-2 {
    fill: var(--gridcolor);
}

footer .sectioninner > .container-fluid {
    padding-top: 14vH;
    padding-bottom: 2vH;
    min-height: 100svH;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*max-height: 1080px;*/
}

.serviceitemsmall,
.biglogo *,
.staggercol,
.contactrow .btn {
    will-change: opacity;
}

.kachel {
    background-color: var(--gridcolor-14);
    backdrop-filter: var(--blur);
    padding: var(--padding);
    height: 100%;
}

.kachel p {
    text-align: justify;
}


.kachel p:last-child {
    margin-bottom: 0;
}

.vc_row.vc_row-o-equal-height > .vc_column_container:has(.kachel) {
    margin-bottom: 35px
}

.vc_row.vc_row-o-equal-height > .vc_column_container > .vc_column-inner:has(.kachel) {
    flex-direction: row;
    align-items: stretch;
}

.vc_row.vc_row-o-equal-height > .vc_column_container > .vc_column-inner .wpb_content_element:has(.kachel) {
    margin-bottom: 0;
}


.accordion-item {
    background-color: var(--gridcolor-14);
    border: 0;
    margin-bottom: calc(var(--padding) / 2);
}

.accordion-header {
    padding: var(--padding);
    background-color: var(--gridcolor-14);
    cursor: pointer;
    transition: padding ease .3s;
    position: relative;
}

.accordion-header:has(.accIcon) {
    padding-right: calc(var(--padding) * 3)
}

.accordion-header .accIcon {
    position: absolute;
    top: calc(50% - var(--padding) / 2);
    right: var(--padding);
    width: var(--padding);
    aspect-ratio: 1;
    transform-origin: center center;
    transition: transform ease .3s;
    transform: scale(.43)
}
.accordion-header:hover .accIcon {
    transform: scale(.86)
}

.accordion-header[aria-expanded="true"] .accIcon {
    transform: scale(1) rotate(45deg);
}

.accordion-header .accIcon:before {
    content:'';
    position: absolute;
    width: 100%;
    top: calc(50% - 1px);
    left:0;
    height: 2px;
    background-color: var(--gridcolor);
}
.accordion-header .accIcon:after {
    content:'';
    position: absolute;
    height: 100%;
    top:0;
    left: calc(50% - 1px);
    width: 2px;
    background-color: var(--gridcolor);
}

.accordion-header[aria-expanded="true"] {
    background-color: var(--maincolor);
    color: var(--static-white);
}

@media (pointer: fine) {
    .accordion-header:hover {
        padding-left: calc(var(--padding) * 2)
    }

}

.accordion-header:hover {
    background-color: var(--seccolor);
    color: var(--static-white);
}


.accordion-body {
    padding: var(--padding);
}

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

.quote {
    position: relative
}

.quote:before {
    content: '"';
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -33%);
    z-index: 5;
    color: var(--gridcolor-14);
    font-family: "pragmatica-extended", sans-serif;
    font-weight: 900;
    font-size: 1000%;
}

.quote em p {
    text-transform: initial;
    font-weight: 900;
    color: var(--textcolor);
    margin-bottom: 0;
    -webkit-hyphens: none !important;
    hyphens: none !important;
}

.quote p.h4,
.quote p.h5,
.quote p.h6 {
    transform: translateY(-50%);
    color: var(--seccolor);
    opacity: .43;
    text-transform: initial;

}

.testimonial-slick .slick-list {
    padding: 0 !important
}

.claim {
    opacity: 0;
}

body.isSafari .safariHolder {
    top: 25%;
    left: 0 !Important;
    padding: 4% 7%;
    z-index: 9999;
    position: sticky;
    width: 100%;
}

.smallbubblebutton,
.bigbubblebutton {
    position: relative;
    aspect-ratio: 1;
    width: max-content;
    padding: calc(var(--padding) * 2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    text-decoration: none;
    max-width: 86vw;
    transform: rotate(0);
    transition: transform ease .3s
}

.smallbubblebutton { max-width: 43px; width: 43px; padding: 0;}

.smallbubblebutton:before,
.bigbubblebutton:before {
    content: '';
    position: absolute;
    /*inset: calc(var(--padding) * 2.5);*/
    inset: 22%;
    border-radius: 50%;
    border: 2px dashed var(--gridcolor);
    mix-blend-mode: difference;
    -webkit-animation: rotating 14s linear infinite;
    -moz-animation: rotating 14s linear infinite;
    -ms-animation: rotating 14s linear infinite;
    -o-animation: rotating 14s linear infinite;
    animation: rotating 14s linear infinite;
    z-index: -1;
    transition: inset ease .3s;
}
.smallbubblebutton:after,
.bigbubblebutton:after {
    content: '';
    position: absolute;
    /*inset: calc(var(--padding) * 2);*/
    inset: 20%;
    background-color: var(--seccolor);
    box-shadow: 0 0 30px var(--seccolor);
    border-radius: 50%;
    filter: blur(40px);
    transition: background-color ease .3s;
    z-index: -2;
}

.smallbubblebutton:after {
    filter: blur(10px);
    inset:0;
}
.smallbubblebutton:before {
     inset:2%;
 }

section#title .quicklink.bigbubblebutton {
    top: -35%; right:calc(var(--padding) * -2);
    position: absolute;
}
.displayitemcontainer .quicklink.bigbubblebutton {
    top: calc(var(--padding) * -1.75); right:calc(var(--padding) * -1.75);
    position: absolute;
}
@media(min-width: 992px){
    .displayitemcontainer .quicklink.bigbubblebutton {
        top: 40%; right:2%
    }
    section#title .quicklink.bigbubblebutton {
        top: 0%; right: 2%;
    }
}

@-webkit-keyframes rotating /* Safari and Chrome */
{
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.smallbubblebutton p,
.bigbubblebutton p {
    hyphens: none !important;
    hyphenate-character: '';
    width: min-content;
    word-break: keep-all;
    margin-bottom: 0;
    transition: transform ease .3s;
    transform: scale(1.1);
    will-change: transform;
    color: var(--static-white)

}

.smallbubblebutton p { font-size:14px;}

.smallbubblebutton:hover:after,
.bigbubblebutton:hover:after {
    background-color: var(--maincolor);
    border: 40px solid var(--maincolor);
}

.smallbubblebutton:hover:after {
    border:0
}


.bigbubblebutton:hover:before {
    /*inset: calc(var(--padding) * 3);*/
    animation-direction: reverse;
    inset: 25%;
}

.smallbubblebutton:hover:before {
    animation-direction: reverse;
    inset: 7%;
}

.bigbubblebutton:hover p {
    transform: scale(1.2)
}

.stickyholder {
    position: absolute;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

.stickyholder * {
    pointer-events: initial
}

.bigbubblebutton.luminate,
.stickyholder.luminate {
    mix-blend-mode: luminosity
}


.typebutton {
    line-height: 60px !important;
    height: 60px;
    font-family: 'pragmatica-extended';
    font-weight: 700;
    font-size: 80%;
    aspect-ratio: unset !important;
    width: max-content;
    min-width: 100%;
    color: var(--textcolor);
    display: block;
    text-align: right;
    padding: 0 calc(var(--padding) / 2);
    max-height: 60px !important;
    border-right: 1px solid var(--gridcolor);
    margin-bottom: 0;
    cursor: pointer;
}

.typebutton:hover {
    background-color: var(--bgcolor-86);
}

.typebutton.active {
    background-color: var(--gridcolor);
    color: var(--bgcolor)
}
.flag {
     /*position: absolute;
     left: 50%;
     white-space: nowrap;
     font-size: 14px;
     padding: 4px;*/
     background-color: var(--bgcolor);
     color: var(--textcolor);
     border-bottom: 1px solid var(--gridcolor);
     backdrop-filter: blur(4px);
     z-index: 1000000;
    text-align: left !important
 }

.tooltip.flag { padding:0; margin:0;}
.flag .tooltip-arrow { display: none}
.flag .tooltip-inner { background-color: transparent !important; text-align: left; color: var(--textcolor);}