.slick-slider{position:relative;display:block;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0;}
.slick-list:focus{outline:none;}
.slick-list.dragging{cursor:pointer;cursor:hand;}
.slick-slider .slick-track,
.slick-slider .slick-list{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
.slick-track{position:relative;top:0;left:0;display:block;}
.slick-track:before,
.slick-track:after{display:table;content:'';}
.slick-track:after{clear:both;}
.slick-loading .slick-track{visibility:hidden;}
.slick-slide{display:none;float:left;height:100%;min-height:1px;}
[dir='rtl'] .slick-slide{float:right;}
.slick-slide img{display:block;}
.slick-slide.slick-loading img{display:none;}
.slick-slide.dragging img{pointer-events:none;}
.slick-initialized .slick-slide{display:block;}
.slick-loading .slick-slide{visibility:hidden;}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent;}
.slick-arrow.slick-hidden{display:none;}
.slick-dots{position:absolute;bottom:-20px;display:block;width:100%;padding:0;list-style:none;text-align:center;}
.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;background:#f0f0f0;margin:0 5px;padding:0;cursor:pointer;border-radius:50%}
.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:10px;padding:5px;cursor:pointer;color:#000;border:0;outline:none;background:transparent;}
.slick-dots li:hover,
.slick-dots li button:hover,
.slick-dots li button:focus{opacity:.5}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before{opacity:1;}
.slick-dots li.slick-active,.slick-dots li.slick-active button:before{opacity:1;color:black;background:#2165f6;}/* ─── AK86 Bubbles CSS ────────────────────────────────────────────────────── */

:root {
    --animation-bg:  #f00;
    --animation-bg1: #ff0;
}

/* Blur wird per JS gesetzt (body.blurry) */
body.blurry .bubbles {
    filter: blur(35px);
    transform: translate3d(0, 0, 0);
    will-change: filter;
}
.bubbles-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 25vw;
    height: 25vh;
    transform-origin: center center;
    transform: translate(-50%, -50%) scale(4);
    z-index: -1;
}
.bubbles {
    width: 100%;
    height: 100%;
    transform-origin: center center;
}

.bubble {
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    mix-blend-mode: lighten;
    will-change: transform;
}

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

.innerbubble {
    position: absolute;
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    will-change: transform;
}

.innerbubble-dark {
    position: absolute;
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-image: radial-gradient(var(--bgcolor), var(--bgcolor-0)) !important;
    will-change: transform;
}

.innerbubble-dark2 {
    position: absolute;
    left: 50%;
    bottom: calc(0px - 15%);
    height: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-image: radial-gradient(#000, #000) !important;
}

.bubble1,
.innerbubble1 {
    background-image: radial-gradient(var(--animation-bg), #000);
}

.bubble2,
.innerbubble2 {
    background-image: radial-gradient(var(--animation-bg-1), #000) !important;
}.asseticon,
.serviceicon {
    width: 200px;
    aspect-ratio: 1;
    position: relative;
}

.asseticon svg { fill: var(--textcolor)}

.serviceicon i {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    font-size: 100px;
}

.serviceicon i.red {
    color: var(--static-maincolor);
    margin: -4px 0 0 -4px;
    filter: var(--blur);
}

.serviceicon i.blue {
    color: var(--static-seccolor);
    margin: 4px 0 0 4px;
    filter: var(--blur);
}


/** SERVICES **/
.svkholder {
    margin-bottom: 15px;
    position: relative;
}

.svk {
    width: 100%;
    position: relative;
    aspect-ratio: 16/9;
    box-shadow: 0 0 43px rgba(0, 0, 0, 0);
}

@media (min-width: 576px) {
    .svk {
        aspect-ratio: 4/3;
    }
}
@media (min-width: 768px) {
    .svk {
        aspect-ratio: 1;
    }
}

div:has(>.svkholder) {
    z-index: 1;
}

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

.servicegroup {
    padding-top: calc(var(--padding) * 3);
    padding-bottom: calc(var(--padding) * 3);
}


.svk:after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--gridcolor);
    transition: all ease .5s;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.svk:hover:after {
    clip-path: polygon(86% 0, 86% 0, 24% 100%, 24% 100%);
}

.svkouter {
    position: absolute;
    inset: 0;
    transform: translateZ(0);
    transition: filter ease 1s;
    backdrop-filter:  calc(var(--blurvalue) * 3);
}


.svkouter .svkouterbackdrop {
    position: absolute;
    inset: 0;
    transition: background-color ease 1s, inset ease 1s;
    z-index: 1;
    /*clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);*/
    clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
}

.svkholder:hover .svkouter .svkouterbackdrop {
    background-color: var(--static-seccolor) !important;
    /* animation-play-state: running;*/
    inset: -14%;
    transform: translateZ(-40px);
}


.svkinner h3 {
    font-weight: 700;
    font-size: 2rem;
    hyphens: auto;
    hyphenate-character: '';
    text-align: left;
    letter-spacing: -.05em;
    font-family: "pragmatica-extended", sans-serif;
}

@media (min-width: 567px) {
    .svkinner h3 {
        font-size: 4rem;
    }
}

@media (min-width: 768px) {
    .svkinner h3 {
        font-size: 4rem;
    }
}

@media (min-width: 992px) {
    .svkinner h3 {
        font-size: 4.5rem;
    }
}

@media (min-width: 1200px) {
    .svkinner h3 {
        font-size: 3.5rem;
    }
}

@media (min-width: 1400px) {
    .svkinner h3 {
        font-size: 4rem;
    }
}

@media (min-width: 1600px) {
    .svkinner h3 {
        font-size: 4.5rem;
    }
}


.svkinner {
    position: absolute;
    inset: calc(var(--padding) / 2);
    transition: all ease .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;;
    transform-style: preserve-3d;;
    -moz-transform: perspective(500px);
    -webkit-perspective: 500px;
    perspective: 500px;
    transition: all ease 3s;
    padding: calc(var(--padding));
}

.svkinner .svkinnerborder {
    content: '';
    position: absolute;
    inset: calc(var(--padding));
    border: 2px solid var(--gridcolor);
    clip-path: polygon(86% 0, 86% 0, 24% 100%, 24% 100%);
    transition: all ease .5s;
}


.svkinner > .row,
.svkinner > .row div {
    transform-style: preserve-3d;
}

.svkinner:before {
    content: '';
    position: absolute;
    inset: 0px;
    top: 100%;
    transition: all ease .3s;
    background-color: var(--gridcolor-0);
}

.svkinner i {
    position: absolute;
    left: var(--padding);
    top: var(--padding);
    transform: translateZ(0px);
    font-size: 4.3rem;
    text-align: center;
    line-height: 1;
    transform-origin: top left;
}

@media (min-width: 768px) {
    .svkinner i {
        font-size: 8.6rem;
    }
}

.svkinner i.main {
    color: var(--gridcolor);
}

.svkinner i.red {
    color: var(--static-maincolor);
    margin: -4px 0 0 -4px;
    filter: var(--blur)
}

.svkinner i.blue {
    color: var(--static-seccolor);
    margin: 4px 0 0 4px;
    filter: var(--blur)

}

.svkholder .svkinner,
.svkholder .svkinner i,
.svkholder .svkinner h3 {
    transition: all ease .3s;
}

.svkholder:hover .svkinner,
.svkholder:hover .svkinner h3,
.svkholder:hover .svkinner p {
    text-shadow: var(--textshadow);
    color: var(--bgcolor);
}

.svkholder:hover .svkinner .svkinnerborder {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    border-color: var(--bgcolor);
    transform: translateZ(60px) scale(1);
}

.svkholder:hover .svkinner i {
    transform: translateZ(60px) translateX(30px) translateY(30px);
}

.svkholder:hover .svkinnercontentholder {
    transform: translateZ(80px);
    scale: 83%;
}

.svkholder:hover .svkinner:before {
    background-color: var(--gridcolor-14);
    top: 0px;
}


.svkinnercontentholder {
    position: absolute;
    inset: var(--padding);
    transition: top ease .3s;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;;
    transform-style: preserve-3d;;
    -moz-transform: perspective(500px);
    -webkit-perspective: 500px;
    perspective: 500px;
    display: flex;
    flex-direction: column;
    transform: translateZ(20px);
    z-index: 10;
    overflow: hidden;
    padding: 15px;
    transition: all ease .5s;

}

.svkinnercontentholder h3 {
    /*transform: translateY(calc(100% * -1 - 30px))*/
    margin-top: auto;
    transition: all ease 1s;
}

.svkholder:hover .svkinnercontentholder h3 {
    /*transform: translateY(calc(100% * -1 - 30px))*/
}

.svkinnercontentholder p {
    max-height: 0;
    display: block;
    transition: all ease 1s !important;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-right: 30px;
    margin-right: -32px;
    text-align: justify;
    -webkit-mask-image: linear-gradient(to bottom, var(--bgcolor) 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--bgcolor) 80%, transparent 100%);
    font-size: 14px;

}

.svkholder:hover .svkinnercontentholder p {
    max-height: 500px;
}.teamimage {
    background-size: contain;
    background-position: bottom left;
    background-repeat: no-repeat;
    position: relative;
    z-index: 3;
    -webkit-mask-image: linear-gradient(to bottom, var(--bgcolor) 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--bgcolor) 90%, transparent 100%);
    width: 100%;
    aspect-ratio: 1;
}

.teamitem {
    width: 100%;
    max-height: 100svh;
}

.teamitem .teamleft {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    max-height: 100%;
}

.teamitem .teamright {
    width: 86%;
    max-width: 86%;
    margin-left: 14%;}
.teamitem .teamright .align-self-center {
    padding: var(--padding);

}

@media (max-width: 991px) {
    .teamitem {
        margin-bottom: 10svh;
        margin-left: 0;
    }

    .teamitem h3 {
        hyphens: auto;
        hyphenate-character: '';
    }

    .teamitem .teamleft {
        margin-bottom: -25%;
    }

    .teamitem .teamright {
        height: auto;
    }
}

@media (max-width: 767px) {
    .teamitem .teamright {
        margin-left: 0;
    }
}
.teamitem .teamright >.row  { position: relative}
.teamitem .teamright >.row:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: var(--bgcolor-43); */
    transform: translate(-35%, 15%);
    z-index: -1;
    border-radius: 50%;
    /* aspect-ratio: 1; */
    background: radial-gradient(circle, var(--bgcolor-65) 0%, transparent 70%);

}

@media (min-width: 992px) {
    .teamitem {
        min-width: 100svw
    }

    .teamimage {
        height: 100svH;
    }

    .teamitem .teamleft {
        width: 86%;
        max-width: 86%;
        max-height: 100%;
    }

    .teamitem .teamright {
        width: 76%;
        max-width: 76%;
        margin-left: -62%;
        /* align-content: end; */

    }
}

@media (min-width: 1400px) {
    #team {
        height: 100vH;
        width: fit-content;
        display: flex;
        flex-wrap: nowrap;
        padding: 0;
    }

    .teamitem .teamright {
        width: 50%;
        max-width: 50%;
        margin-left: -10%;
    }

    .teamitem .teamleft {
        width: 60%;
        max-width: 60%;
        aspect-ratio: 1;
        max-height: 100%;
    }


    @media (orientation: landscape) {
        .teamitem .container {
            width: 100vW;
            max-width: 1920px;
        }
    }

    .teamimage {
        background-position: bottom right;
        height: 100vH;
        width: auto;
        aspect-ratio: unset;
    }

}


.teamslideshow {
    box-shadow: var(--mainshadow);
    aspect-ratio: 16/9;
    background: var(--gridcolor-14);
    width: 86%;
    max-width: 50vW;
    position: absolute;
    left: 43%;
    top: 25%;
    z-index: 1;
    overflow: hidden;
    display: none
}

@media (orientation: portrait) {
    .teamslideshow {
        max-width: 86vW;
        left: 33%;
    }

    @media (max-width: 767px) {
        .teamslideshow {
            left: 15%;
        }
    }
}

.teamslidesh
.teamitem:hover .teamslideshow, .teamitem:has(*:hover) .teamslideshow {
    display: block;
}

@media (pointer: coarse) {
    .teamitem .teamslideshow {
        display: block
    }
}

@media (hover: none) {
    .teamitem .teamslideshow {
        display: block
    }
}

.teamleft, .teamright {
    position: relative;
    flex: 0 0 auto;
}

.teamright {
    z-index: 3;
    text-shadow: var(--textshadow);
    padding-bottom: var(--padding);
    width: 40%;
    margin-left: -20%;
}

.teamitem .teamslideshow .carousel {
    position: absolute;
    inset: 0;
    overflow: hidden
}

.teamitem .carousel-item {
    transition: .001s !important
}

.teamitem .carousel-item {
    background-size: cover;
    background-position: center center;
}

.teamitem .carousel .carousel-inner,
.teamitem .carousel .carousel-inner .carousel-item {
    width: 100%;
    height: 100%;
}
/*
.pagewrapper {
    opacity: 0
}*/
@media (pointer: fine) {
    .cursor-box {
        height: 20px;
        width: 20px;
        border: 2px solid #333;
        opacity: 1;

        z-index: 9999;
        pointer-events: none;

        position: fixed;
        top: 0;
        left: 0;

        transform-style: preserve-3d;
    }

    .cursor-border {
        position: fixed;
        /*clip-path: polygon(0px 0px, 100px 0px, 100px 100px, 0px 100px);*/
        /*background-color: green;*/
        /*border: 2px solid yellow;*/
        pointer-events: none;
    }

    .cursor-follower {
        height: 10px;
        width: 10px;
        background-color: #46eadb;
        border: 2px solid rgba(185, 21, 36, 0);
        opacity: 1;
        mix-blend-mode: difference;

        z-index: 9998;
        pointer-events: none;

        position: fixed;
        top: 0;
        left: 0;
    }

}

@media (pointer: coarse) {
    .cursor-follower,
    .cursor-border, .cursor-box {
        display: none
    }
}

@media (hover: none) {
    .cursor-follower,
    .cursor-border, .cursor-box {
        display: none
    }
}
.openAccessibility {
    position: absolute;
    bottom: 100%;
    right: 0;
    z-index: 999998;
    padding: calc(var(--padding) / 6) calc(var(--padding) / 3);
    border: 2px solid var(--gridcolor);
    background-color: var(--gridcolor);
    box-shadow: var(--mainshadow);
}

.openAccessibility i {
    font-size: 14px;
}

.openAccessibility i.fa-user {
    font-size: 20px;
    color: var(--bgcolor)
}

.openAccessibility i.fa-cog {
    transform-origin: center center;
    animation-name: rotateGear;
    position: absolute;
    animation-play-state: paused;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 2s;
    top: 50%;
    left: 50%;
    rotate: 0deg;
    color: var(--static-seccolor)
}

.openAccessibility:hover i.fa-cog {
    animation-play-state: running;
}

@keyframes rotateGear {
    0% {
        rotate: 0deg
    }
    100% {
        rotate: 360deg
    }
}

.accessibilitymenu {
    position: fixed;
    z-index: 999997;
    padding: var(--padding);
    background-color: var(--gridcolor);
    box-shadow: var(--mainshadow);
    height: 50vh;
    left: var(--padding);
    right: var(--padding);
    bottom:-50vH;
    will-change: bottom;
    transition: bottom ease .3s;

}

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

.accessibilitymenu h4,
.accessibilitymenu h5,
.accessibilitymenu h6,
.accessibilitymenu p,
.accessibilitymenu {
    color: var(--bgcolor)
}

.accessibilitymenu.active {
    bottom:0;
}
.accessibilitymenu a.active {
    font-weight: 900;
}


html.marklinks a {
    text-decoration: underline !important;
    background-color: rgba(255, 255, 0, .14);
}

html.greyscale .colorboxarea,
html.greyscale img, html.greyscale .hasbgimage {
    filter: grayscale(1)
}

html.greyscale body.darkmode {
    --maincolor: #999 !important;
    --seccolor: #ccc !important;
    --static-maincolor: #999 !important;
    --static-seccolor: #ccc !important;
    --static-black: #000 !important;
    --static-black: #000 !important;
    --bgcolor: rgb(0, 0, 0);
    --bgcolor-86: rgba(0, 0, 0, .86);
    --bgcolor-65: rgba(0, 0, 0, .65);
    --bgcolor-43: rgba(0, 0, 0, .43);
    --bgcolor-14: rgba(0, 0, 0, .14);
    --bgcolor-0: rgba(0, 0, 0, 0);
}

html.greyscale body.lightmode {
    --maincolor: #999 !important;
    --seccolor: #ccc !important;
    --static-maincolor: #999 !important;
    --static-seccolor: #ccc !important;
    --static-black: #000 !important;
    --static-black: #000 !important;
    --bgcolor: rgb(255, 255, 255);
    --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-255: rgba(255, 255, 255, 0);
}

html.greyscale code {
    color: #999 !important;
}

html.greyscale code span {
    color: #ccc;
}

html.greyscale .bubbles {
    filter: grayscale(1) blur(35px)
}

html.marklinks.greyscale a {
    background-color: rgba(155, 155, 155, .5);
}


html.reducedmotion .tilt,
html.reducedmotion *:has(> .tilt) {
    perspective: 0 !important
}

html.reducedmotion .tilt {
    transform: none !Important
}

html.negativecontrast body {
    --maincolor: yellow !important;
    --seccolor: yellow !important;
    --static-white: #fff !important;
    --static-maincolor: #000 !important;
    --static-seccolor: #fff !important;
    --static-black: #000 !important;
    --bgcolor: #000 !important;
    --gridcolor: #fff !important;
    --bggridcolor: var(--bgcolor);
    --textcolor: yellow !important;
    --bgcolor-86: var(--bgcolor);
    --bgcolor-65: var(--bgcolor);
    --bgcolor-43: var(--bgcolor);
    --bgcolor-14: transparent !important;
    --bgcolor-0: transparent !important;
    --gridcolor-86: var(--gridcolor);
    --gridcolor-65: var(--gridcolor);
    --gridcolor-43: var(--gridcolor);
    --gridcolor-14: var(--gridcolor);
    background-image: none !important;
}

html.negativecontrast body .bubbles {
    display: none !important
}

html.negativecontrast body .hasbgimage,
html.negativecontrast body img {
    filter: contrast(1.5)
}

html.highcontrast .largehead,
html.negativecontrast .largehead {
    display: none
}

html.highcontrast .biglogo svg *,
html.highcontrast .ak86logo svg * {
    fill: black !important
}

html.negativecontrast .biglogo svg *,
html.negativecontrast .ak86logo svg * {
    fill: white !important
}

html.highcontrast #ak86back {
    mix-blend-mode: unset !important
}

html.highcontrast body {
    --maincolor: lime !important;
    --seccolor: lime !important;
    --static-white: #000 !important;
    --static-maincolor: #fff !important;
    --static-seccolor: #000 !important;
    --static-black: #fff !important;
    --bgcolor: #fff !important;
    --gridcolor: #000 !important;
    --bggridcolor: var(--bgcolor);
    --textcolor: lime !important;
    --bgcolor-86: var(--bgcolor);
    --bgcolor-65: var(--bgcolor);
    --bgcolor-43: var(--bgcolor);
    --bgcolor-14: transparent !important;
    --bgcolor-0: transparent !important;
    --gridcolor-86: var(--gridcolor);
    --gridcolor-65: var(--gridcolor);
    --gridcolor-43: var(--gridcolor);
    --gridcolor-14: var(--gridcolor);
    background-image: none !important;

}

html.highcontrast body .bubbles {
    display: none !important
}

html.highcontrast body .hasbgimage,
html.highcontrast body img {
    filter: contrast(1.5)
}

html.highcontrast .themetoggle,
html.negativecontrast .themetoggle {
    display: none
}

html.increasetext body {
    --mainfontFactor: 1.5;
}

html.decreasetext body {
    --mainfontFactor: 0.75;
}

.keyblock {
    border: 1px solid var(--bgcolor);
    position: relative;
    float: left;
    border-radius: 3px;
    width: 43px;
    aspect-ratio: 1;
}

.keyblock:after {
    content: '';
    position: absolute;
    inset: 4%;
    border-radius: 4px;
    border: 1px solid var(--bgcolor);
    opacity: .43;
}

.keyblock .letter {
    position: absolute;
    left: 12%;
    top: 8%;
    color: var(--bgcolor);
    font-size: 12px;
}

.accessibilitylink {
    padding: 10px 15px;
    border: 1px solid var(--bgcolor);
    color: var(--bgcolor);
    text-decoration: none;
    float: left;
    white-space: nowrap;
    margin-bottom: 14px;
}

@media (pointer: coarse) {
    .keyboardaccess {
        display: none
    }
}

@media (hover: none) {
    .keyboardaccess {
        display: none
    }
}