/**** ------------------------------------------------------ STYLE - © Code reseved by Nick ------------------------------------ ****/


/*****************************************************************************************************************************

This code is reseved by Nick Helfenbein (© Code von Nick)
If you copy this code I will take legal actions! (Please don't do it - respect the arts of others)
Thanks!

Dieser Code ist urheberrechtlich geschützt von Nick Helfenbein (© Code von Nick)
Wenn du dieses Code kopierst werde ich rechtliche Schritte einleiten (also tu es bitte nicht - respektiere die Werke anderer.)
Danke!

© Code von Nick, 2025

*****************************************************************************************************************************/


@import url('../css/styleguide.css');

/**** -------------------------------------------- Loading -------------------------- ****/

.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    /* display: none; */
    z-index: 1000;
}

/*[data-page-status="loading"] .loading-container {
    pointer-events: all;
}*/

.loading-screen {
    position: relative;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-black-100);
    pointer-events: none;
    z-index: 1001;
}

.loading-screen .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--size-title) * 3);
    opacity: 0;
    transform: translate(-50%, -50%);
}

.loading-screen .logo svg {
    width: calc(var(--size-title) * 3);
}

.loading-screen .corner-top {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--size-title) * 10);
    opacity: .5;
}

.loading-screen .corner-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(var(--size-title) * 4.5);
    opacity: .5;
}

.loading-screen .blaulicht-line {
    position: absolute;
    top: 50%;
    left: calc(50% - 5em);
    height: 3em;
    clip-path: inset(0 100%);
    transform: translateY(-3.5em) translateX(0);
}

.loading-screen .kanal-line {
    position: absolute;
    top: 50%;
    left: calc(50% - 5em);
    height: 3em;
    opacity: 0;
    transform: translateY(.5em) translateX(0);
}

.loading-screen .blaulicht-line svg,
.loading-screen .kanal-line svg {
    height: 100%;
}

.loading-screen .cross-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 2.75em;
    background: var(--color-white);
}

.home-animation {
    transform: scale(.75);
}


/**** -------------------------------------------- Navigation -------------------------- ****/

.navigation-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    pointer-events: none;
}

.navigation-wrapper .banner {
    position: relative;
    height: 2.25em;
    width: 100%;
    background: var(--color-black-80);
    transition: var(--animation-primary);
    pointer-events: all;
}

[data-scrolling-started="true"] .banner {
    opacity: 0;
}

.navigation-wrapper .banner .container {
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
}


.navigation-wrapper .navigation {
    position: relative;
    padding-block: var(--gap);
    background: rgba(var(--color-white-rgb), .75);
    backdrop-filter: blur(2em);
    -webkit-backdrop-filter: blur(2em);
    border-top: 1.5px solid var(--color-border);
    border-bottom: 1.5px solid var(--color-border);
    transition: var(--animation-primary);
    pointer-events: all;
}

[data-scrolling-started="true"] .navigation-wrapper .navigation {
    transform: translateY(-2.25em);
    border-top: 1.5px solid transparent;
}

.navigation-wrapper .navigation .row {
    justify-content: space-between;
    align-items: center;
}

.navigation-wrapper .navigation .flex-col.col-logo {
    width: calc(var(--size-title) * 2);
}

.navigation-wrapper .navigation .flex-col.col-logo svg path {
    transition: var(--animation-primary);
}


.navigation-wrapper .fixed-navigation {
    position: relative;
    padding-block: var(--section-padding);
    background: rgba(var(--color-white-rgb), .75);
    backdrop-filter: blur(2em);
    -webkit-backdrop-filter: blur(2em);
    border-bottom: 1.5px solid var(--color-border);
    overflow: hidden;
    transform: translateY(-120%);
    transform-origin: top center;
    transition: all var(--animation-primary);
    pointer-events: none;
    z-index: -1;
}

[data-navigation-status="active"] .navigation-wrapper .fixed-navigation {
    transform: translateY(0);
    pointer-events: all;
}

[data-navigation-status="active"][data-scrolling-started="true"] .navigation-wrapper .fixed-navigation {
    transform: translateY(-2.25em);
    pointer-events: all;
}

.navigation-wrapper .fixed-navigation .row {
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

/* Theme: Dark */

[data-theme-nav="dark"] .navigation-wrapper .navigation {
    background: rgba(var(--color-black-100-rgb), .75);
}

[data-theme-nav="dark"] .navigation-wrapper .navigation .flex-col.col-logo svg path {
    fill: var(--color-white);
}

@media screen and (max-width: 940px) {
    .navigation-wrapper .navigation .flex-col ul {
        display: none;
    }

    .link-menu {
        display: block;
    }
}


[data-theme-nav="dark"] .navigation-wrapper .fixed-navigation {
    background: rgba(var(--color-black-100-rgb), .75);
}

[data-theme-nav="dark"] .navigation-wrapper .fixed-navigation .flex-col.col-logo svg path {
    fill: var(--color-white);
}

/* Theme: Dark */

[data-theme-nav="dark"] .navigation-wrapper .link-wrap {
    color: var(--color-white);
}

[data-theme-nav="dark"] .navigation-wrapper .link-wrap path {
    fill: var(--color-white);
}


/**** -------------------------------------------- Footer -------------------------- ****/

.section-footer {
    padding-bottom: 0;
    overflow: hidden;
    overscroll-behavior-y: none;
}

.section-footer.shift-footer-top {
    margin-top: calc(var(--section-padding) * -2);
    z-index: 1;
}

.section-footer .marquee-spacer {
    position: relative;
    display: block;
    padding-block: var(--section-padding);
}

.section-footer.shift-footer-top .marquee-spacer::before {
    content: "";
    position: absolute;
    bottom: calc(calc(var(--vh) * 41) * -1);
    left: 0;
    width: 100%;
    height: calc(var(--vh) * 50);
    background: var(--color-white);
    transform: skewY(var(--default-rotate));
    transform-origin: bottom left;
    z-index: -1;
}

.section-footer .marquee-spacer .marquee {
    width: calc(100% + 10em);
    transform: translateX(-5em) rotate(var(--default-rotate));
    background: var(--color-white);
}

.section-footer .marquee-spacer .marquee .marquee-content {
    padding-block: var(--gap);
    padding-bottom: calc(var(--gap) * 6);
}

.section-footer .footer-wrap {
    padding-bottom: calc(var(--size-title) * 2);
    z-index: 2;
}

.section-footer .footer-wrap .corner-left {
    position: absolute;
    left: 0;
    bottom: 0;
    width: auto;
    height: calc(var(--size-title) * 4);
    pointer-events: none;
}

.section-footer .footer-wrap .photographer {
    position: absolute;
    right: calc(var(--gap) * -2);
    bottom: 0;
    width: auto;
    height: calc(var(--size-title) * 4);
    pointer-events: none;
}

.section-footer .footer-wrap .corner-left svg {
    height: calc(var(--size-title) * 4);
}

.section-footer .footer-wrap .photographer svg {
    height: calc(var(--size-title) * 4);
}

.section-footer .footer-wrap .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section-footer .footer-wrap .container h5 {
    margin-bottom: 1em;
}

.section-footer .footer-wrap .container .codexblau-logo {
    width: calc(var(--size-title) * 4);
    margin-bottom: var(--gap);
    transition: var(--animation-primary);
}

.section-footer .footer-wrap .container .codexblau-logo:hover {
    opacity: .666;
}

.section-footer .footer-wrap .container .links-wrap {
    justify-content: center;
    gap: var(--gap);
}

.section-footer .footer-wrap .container .link-wrapper {
    display: flex;
    gap: var(--gap);
    align-items: center;
}

.section-footer .footer-wrap .container .link-wrapper .spacer {
    font-weight: 400;
    opacity: .2;
}


@media screen and (max-width: 1024px) {

    .section-footer .footer-wrap {
        padding-bottom: calc(var(--size-title) * 4.25);
        margin-bottom: calc(var(--gap) * -1);
    }

    .section-footer .footer-wrap .photographer {
        bottom: 0;
    }

    .section-footer .footer-wrap .corner-left {
        bottom: calc(var(--gap) * -2.5);
    }
}


/**** -------------------------------------------- HOME - Header -------------------------- ****/

.section-home-header {
    position: relative;
    height: calc(var(--vh) * 90);
    margin-bottom: var(--section-padding);
}

.section-home-header .background-video {
    height: 100%;
    overflow: hidden;
}

.section-home-header .background-video::before {
    content: "";
    position: absolute;
    bottom: calc(calc(var(--vh) * 49) * -1);
    left: 0;
    width: 100%;
    height: calc(var(--vh) * 50);
    background: var(--color-white);
    transform: skewY(var(--default-rotate));
    transform-origin: bottom left;
    z-index: 10;
}

.section-home-header .background-video picture.overlay {
    height: calc(100% - 1px);
}

.section-home-header .container {
    position: relative;
    height: 100%;
    z-index: 100;
}

.section-home-header .container .text-badge {
    position: absolute;
    top: calc(var(--vh) * 70);
    left: var(--gap);
    width: 100%;
    padding-right: var(--gap);
    transform: rotate(var(--default-rotate));
}

.section-home-header .container .text-badge .badge-line h1 {
    display: inline;
    background: var(--color-white);
    color: var(--color-black-80);
    padding: .25em .5em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    margin-block: .25em;
    line-height: 1.875em;
    font-size: calc(var(--size-h2-fluid));
    hyphens: auto;
    word-break: normal;
}


.section-home-header .container .text-badge .badge-line[data-bg-color="dark"] h1 {
    background: var(--color-black-80);
    color: var(--color-white);
}

.section-home-header .container .text-badge .badge-line[data-bg-color="black"] h1 {
    background: var(--color-black-100);
    color: var(--color-white);
}

.section-home-header .container .text-badge .badge-line[data-bg-color="blue"] h1 {
    background: var(--color-primary);
    color: var(--color-white);
}


.section-home-header .triangles-style {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    max-width: calc(var(--size-title) * 5);
    transform: translateY(calc(var(--section-padding) * -1.75));
    z-index: 99;
}

@media screen and (max-width: 940px) {

    .section-home-header .container .text-badge .badge-line h1 {
        font-size: calc(var(--size-h3-fluid));
    }
}


/**** -------------------------------------------- HOME - Intro -------------------------- ****/

.section-home-about {
    padding-top: calc(var(--section-padding) * .5);
}

.section-home-about .col-title {
    text-align: center;
    margin-bottom: calc(var(--gap) * 2);
}

.section-home-about .col-spacer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: calc(var(--gap) * 2);
}

.section-home-about .col-spacer svg {
    width: calc(var(--size-title) * 2.5);
}

.section-home-about .col-text {
    text-align: center;
    margin-bottom: var(--gap);
}

.section-home-about .col-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(var(--gap) * 2);
}


/**** -------------------------------------------- GENERAL - Images -------------------------- ****/

.section-images .row {
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
}

.section-images .flex-col {
    width: calc(calc(100% / 3) - calc(var(--gap) / 2));
    max-width: calc(var(--size-title) * 3);
    transition: var(--animation-primary);
}

.section-images .flex-col:hover {
    filter: brightness(80%);
}


.section-images .row-first {
    margin-bottom: var(--section-padding);
}

.section-images .row-first .flex-col:nth-child(2) {
    margin-top: var(--section-padding);
}


.section-images .row-last .flex-col:nth-child(1),
.section-images .row-last .flex-col:nth-child(3) {
    margin-top: calc(var(--section-padding) * -1);
}


/**** -------------------------------------------- HOME - Social Media -------------------------- ****/

.section-home-social-media .container-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: calc(var(--section-padding) * .75);
}

.section-home-social-media .container.row {
    gap: var(--gap);
}

.section-home-social-media .container.row .flex-col {
    position: relative;
    width: calc((100% / 3) - calc(var(--gap) * .5));
    display: flex;
    gap: var(--gap);
}

.section-home-social-media .container.row .flex-col.col-links {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.section-home-social-media .container.row .flex-col img {
    width: 100%;
    object-fit: contain;
    object-position: center center;
}


/**** -------------------------------------------- HOME - Partners -------------------------- ****/

.section-home-partners .container-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: calc(var(--section-padding) * .75);
}



/**** -------------------------------------------- HOME - Partners -------------------------- ****/

.section-home-references {
    padding-top: calc(1em + var(--section-padding));
    z-index: -1;
}

.section-home-references .container-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: calc(var(--section-padding) * .75);
}

.section-home-references .row {
    gap: var(--gap);
    align-items: center;
    flex-direction: column;
}

.section-home-references .row .flex-col.col-references {
    position: relative;
    overflow: hidden;
}

.section-home-references .row .flex-col.col-references::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5em;
    height: 100%;
    background: linear-gradient(to right, rgba(var(--color-white-rgb), 1), rgba(var(--color-white-rgb), 0), transparent 100%);
    z-index: 10;
}

.section-home-references .row .flex-col.col-references::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 5em;
    height: 100%;
    background: linear-gradient(to left, rgba(var(--color-white-rgb), 1) 20%, transparent 100%, transparent 100%);
    z-index: 10;
}

.section-home-references[data-theme-section="dark"] .row .flex-col.col-references::before {
    background: linear-gradient(to right, rgba(var(--color-black-100-rgb), 1), rgba(var(--color-black-100-rgb), 0), transparent 100%);
}

.section-home-references[data-theme-section="dark"] .row .flex-col.col-references::after {
    background: linear-gradient(to left, rgba(var(--color-black-100-rgb), 1) 20%, transparent 100%, transparent 100%);
}

.section-home-references .row .flex-col.col-partners .marquee-group {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--gap);
}

.section-home-references .row .flex-col.col-references .marquee-group .marquee-scroll {
    flex-shrink: 0;
}


/**** -------------------------------------------- ABOUT - Spacing -------------------------- ****/

.section-about-vision .container {
    text-align: center;
}


/**** -------------------------------------------- GENERAL - Spacing -------------------------- ****/

.section-spacing .container.small .col-spacer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-spacing .container.small .col-spacer svg {
    width: calc(var(--size-title) * 3.5);
}


/**** -------------------------------------------- GENERAL - Header -------------------------- ****/

.section-header {
    padding-top: calc(var(--section-padding) * 2);
}

.section-header .container {
    text-align: center;
    text-transform: uppercase;
}


/**** -------------------------------------------- TEAM - Cards -------------------------- ****/

.section-team-members .team-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.section-team-members .team-cards-row .team-card-wrap {
    position: relative;
    aspect-ratio: 3/4;
}

.section-team-members .team-cards-row .team-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 1em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    padding: var(--gap);
}

.section-team-members .team-cards-row .team-card a.overlay {
    z-index: 100;
}

.section-team-members .team-cards-row .team-card .team-card-avatar {
    z-index: 1;
}

.section-team-members .team-cards-row .team-card .team-card-avatar img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
}

.section-team-members .team-cards-row .team-card .video-hover {
    z-index: 2;
}

.section-team-members .team-cards-row .team-card .team-card-gradient {
    background: rgba(var(--color-black-100-rgb), .2);
    z-index: 3;
}

.section-team-members .team-cards-row .team-card h4,
.section-team-members .team-cards-row .team-card p {
    position: relative;
    z-index: 10;
    text-align: center;
    color: var(--color-white);
}

.section-team-members .team-cards-row .team-card p {
    opacity: .666;
}

@media screen and (max-width: 1000px) {

    .section-team-members .team-cards-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 720px) {

    .section-team-members .team-cards-row {
        grid-template-columns: repeat(1, 1fr);
    }
}


/**** -------------------------------------------- CONTACT - Form -------------------------- ****/

.section-contact-form .container {
    gap: calc(var(--gap) * 2);
}

.section-contact-form .container .col-info {
    width: calc(40% - var(--gap));
    background: var(--color-black-05);
    padding: var(--gap);
    border-radius: var(--gap);
}

.section-contact-form .container .col-info p {
    margin-bottom: 1em;
}

.section-contact-form .container .col-form {
    width: calc(60% - var(--gap));
}

@media screen and (max-width: 960px) {

    .section-contact-form .container {
        flex-direction: column;
    }

    .section-contact-form .container .col-info {
        width: 100%;
    }

    .section-contact-form .container .col-form {
        width: 100%;
    }
}


/**** -------------------------------------------- CTA - Sectiom -------------------------- ****/

.section-cta {
    background: var(--color-black-05);
    z-index: -1;
}

.section-cta.dopple-padding-bottom {
    padding-bottom: calc(var(--section-padding) * 2);
}

.section-cta .container {
    position: relative;
}

.section-cta[data-background-color="secondary"] {
    background: var(--color-secondary-light-bg);
}

.section-cta .logo-overlay {
    position: absolute;
    bottom: calc(var(--section-padding) * .8);
    left: calc(var(--gap) * -1);
    opacity: .3;
    filter: grayscale(1);
    width: calc(100% + calc(var(--gap) * 2));
    transform: rotate(var(--default-rotate));
}

.section-cta .p-para {
    width: 100%;
    max-width: calc(var(--size-main-fluid) * 25);
    margin-top: 1em;
    margin-bottom: 2em;
}

.section-cta .btn {
    width: max-content;
}