/* white / black content */
body,
.section {
    /*background-color: #cccccc; */
    background-color: white;
    color: black;
}
.card-text {
    color: black; 
}
.main-content a {
    color: black; 
}
/*
body:not(.home) .main-content a {
    color: black; 
}


body.home, 
body.home .section {
    background-color: var(--colors--fourth-color);
    color: white;
}
 
body.home .card-text {
    color: white;
}*/

.hero {
    background-color: black;
    color: white;
}
.hero a {
    color: white;
}
.hero a.subhead.slide {
    color: var(--colors--first-color);
    text-decoration: none;
}

.hero-headline {
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Webflow Layout Template */
.icon-plus {
    width: 13px;
    height: 13px;
    background-image: url('../Template/images/plus_1plus.webp');
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.icon-plus.black {
    background-image: url('../Template/images/plus_1plus_black.webp');
}
.icon-arrowdown {
    width: 11px; 
    height: 11px;
    background-image: url('../Template/images/arrows-2_1arrows-2.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.frame-type-text a.button-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.frame-type-text a.button-arrow {
    background-color: black;
    color: white !important;
    border-radius: 60px;
    padding: 13px 22px 13px 20px;
}
.frame-type-text a.button-arrow::before {
    content: "";
    width: 20px;
    height: 20px;

    background: url('../Template/images/arrows.png') center / contain no-repeat;
    flex-shrink: 0;
}

.frame-type-text a.button-arrow.blue-green {
    background: linear-gradient(
        to bottom right,
        var(--color-gradient1) 0%,
        var(--color-gradient2) 100%
    );    
}

.frame-type-text a.button-arrow.blue-green {
    background: linear-gradient(
        135deg,
        var(--color-gradient1) 0%,
        var(--color-gradient2) 100%
    );
    background-size: 150% 150%;
    background-position: 0% 0%;
    transition: background-position 0.4s ease;
}

.frame-type-text a.button-arrow.blue-green:hover {
    background-position: 40% 40%;
}


/* Navigation */
.navigation-logo {
    position: absolute;
    display: inline-block;
}
.navigation-logo img {
    position: absolute;
}
.navigation-logo img.logo-nav {
    display: none;
}

/*
.navigation-logo-link {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
}*/

.navbar {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.navbar .navbar-main {
    grid-area: 1 / 2 / 2 / 5;
    justify-self: start;
}
.navbar .navbar-end {
    grid-area: 1 / 5 / 2 / 6;
}

.gsap_split_word {
    margin-right: 5px;
}
.navigation-text-main._02 {
    margin-top: 1px;
}
ul.nav-menu-children {
    list-style: none;
    margin: 10px 0px 0px 0px;
    padding: 0;
}
ul.nav-menu-children a {
    text-decoration: none;
}
ul.nav-menu-children.level-2 {
    margin-bottom: 10px;
}

ul.nav-menu-children img {
    height: 15px;
}

.navigation-top {
    /*position: sticky;
    top: 0;
    z-index: 1000; 
    overflow: hidden;*/
    transition: height .35s ease;
}

/* Standard */
.navigation-top .nav-menu-children-desktop {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .3s ease, transform .3s ease;
    max-width: 250px;
}

/* eingeklappt */
.navigation-top.compact {
    height: 70px;           /* Höhe der ersten Ebene */
}

.navigation-top.compact .nav-menu-children-desktop {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* Hover oder Tastaturfokus zeigt die zweite Ebene.
   Höhe folgt dem Inhalt, damit die dritte Ebene Platz hat. */
.navigation-top.compact:hover,
.navigation-top.compact:has(.nav-menu-children-desktop :focus) {
    height: auto;
    min-height: 140px;
}

.navigation-top.compact:hover .nav-menu-children-desktop,
.navigation-top.compact:has(.nav-menu-children-desktop :focus) .nav-menu-children-desktop {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-menu-children-desktop li {
    max-width: 230px;
    margin-bottom: 4px;
    line-height: 1.0
}
.nav-menu-children-desktop .nav-menu-level-3 li {
    margin-bottom: 0px;
}
.nav-menu-children-desktop .nav-menu-level-3 .nav-menu-children {
    margin-top: 4px;
}

/* Dritte Ebene bleibt geöffnet, bis ein anderer Hauptmenüpunkt gehovered wird. */
.nav-menu-children-desktop .nav-menu-level-3 {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition:
        grid-template-rows 0.22s ease,
        opacity 0.18s ease,
        visibility 0s linear 0.22s;
}

.nav-menu-children-desktop > li.is-open > .nav-menu-level-3,
.nav-menu-children-desktop > li:focus-within > .nav-menu-level-3 {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition:
        grid-template-rows 0.22s ease,
        opacity 0.18s ease,
        visibility 0s linear;
}

.nav-menu-level-3 > ul.nav-menu-children {
    margin: 0;
    padding: 0px 0 2px 0.8rem;
    overflow: hidden;
    min-height: 0;
}

.nav-menu-level-3 li {
    opacity: 1;
}

.nav-menu-level-3 a {
    display: block;
    font-size: 0.875rem;
    line-height: 1.35;
    padding: 2px 0;
}



/* Breadcrumb */
.breadcrumb-container {
    background-color: black; 
    color: white;
    padding-left: 2%;
    padding-right: 2%;
}
.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;

    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item:not(:last-child)::after {
    content: "";
    display: inline-block;

    width: 9px;
    height: 9px;

    margin: 0 6px;

    background-image: url('../Template/images/arrows.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.breadcrumb-item a,
.breadcrumb-item span {
    text-decoration: none;
    color: white !important;
}

/* Webflow Content */
.section .section {
    padding-left: 0px; padding-right: 0px;
}

body:not(.home) .line-1, body:not(.home) .line-2 {
    background-color: black;
}

/* Home Content - gleich sichtbar ohne Preloader */
body:not(.home) .hero-content,
body:not(.home) .page-wrapper,
body:not(.home) .home-content,
body:not(.home) .navigation-top
{
    /* Styles für alle Seiten außer Home */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

body:not(.home) .navigation-top, body.home .navigation-top.navigation-scrolled {
    background-color:  rgba(0, 0, 0, 0.65);
    box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.5);
}
.navbar {
    padding-top: 25px;
    padding-bottom: 25px;
}

.navigation-content {
    padding-top: 100px;
    /*background: linear-gradient(
        to bottom right,
        var(--color-gradient1) 0%,
        var(--color-gradient2) 100%
    );*/
    background: none;
    height: 100%;
    
}

.navigation-content .scroll-content {
    overflow-x: hidden;
    overflow-y: auto;
}

.navigation-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom right,
        var(--color-gradient1),
        var(--color-gradient2)
    );
    opacity: 0.85;
    z-index: -1;
}

.menu-big-second {
    margin-top: 10px;
}


.hamburger-line {
    background: linear-gradient(
        to bottom right,
        var(--color-gradient1) 0%,
        var(--color-gradient2) 100%
    );
}

blockquote {
    border-left: 2px solid;
    border-image: linear-gradient(
        to bottom,
        var(--color-gradient1),
        var(--color-gradient2)
    ) 1;
}




.last-part {
    align-self: flex-start;
}

/* Home Intro zuerst sichtbar */
.intro {
    transform: translate3d(0px, 0px, 0px);
    color: white;
}
.intro .logo-loader-overflow {
    width: 100%;
    height: 100%;
}

/* Home Banner */
.hero-headline {
    /*text-transform: uppercase;*/
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hero-bg-wrapper {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;
}

.line-small-divider {
    backface-visibility: hidden;
}

.line-effect-divider.has-bg {
    background: black;
}

.hero.for-inner .h1 {
    white-space: nowrap;
}
.hero.for-inner .hero-content {
    padding-top: 220px;
}
.hero-headline h1 {
    line-height: 1.0;
}

body:not(.home) .hero.for-inner {
    max-height: 600px;
}
body:not(.home) .hero.for-inner .hero-content {
    padding-top: 20px; 
    padding-bottom: 20px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

body:not(.home) .hero.for-inner .hero-content .hero-headline {
    margin-bottom: 30px;
    font-size: 110px;
}

/* Works */
.work-card {
    /*overflow: visible;
    border: 1px solid red;
    height: fit-content;
    max-height: 100vh;
    margin-bottom: 100px;
    background: none;*/
}
.work-card .main-image {
    aspect-ratio: 16 / 10;
    height: auto;
    max-height: 100%;
}
/*
.work-card .text-info-bottom {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    z-index: 3;
}


.work-card .work-title {
    position: absolute;
    bottom: 80px;
    text-align: center;
    opacity: 0.7;
    width: 100%;
}*/


/* Projekt Details */
.case-details-title-left {
    grid-area: 1 / 1 / 2 / 3;
}
.case-details-arrow-right {
    grid-area: 1 / 6 / 2 / 7;
    justify-self: end;
}
.case-details-abstract, .case-details-abstract p {
    font-size: var(--font--h3);
}


/* Container */

.main-content > .section {
    overflow-x: hidden; 
}
.section .fullwidth {
    max-width: unset;
    /*margin-left: calc(-1 * (100vw - 100%) / 2);
    margin-right: calc(-1 * (100vw - 100%) / 2);*/
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: calc(2% + 20px); 
    padding-right: calc(2% + 20px);
}
.content-container-12.fullwidth > .container {
    
}
.content-container-12.has-background {
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertikal zentrieren */
    
    padding-top: 100px; 
    padding-bottom: 100px;
    
    margin-bottom: 50px;
    
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.background-green-blue {
    padding-top: 100px; 
    padding-bottom: 100px;
    background: linear-gradient(
        to bottom right,
        var(--color-gradient1) 0%,
        var(--color-gradient2) 100%
    );
    color: white; 
}
.background-black {
    padding-top: 100px; 
    padding-bottom: 100px;
    color: white;
    background: black;
}

.background-black .frame-type-text a.button-arrow {
    background-color: white;
    color: black !important;
}
.background-black .frame-type-text  a.button-arrow::before {
    background: url('../Template/images/arrows_black.png') center / contain no-repeat;
}
.main-content .background-black a {
    color: white !important;
}

.frame-container {
    margin-bottom: 80px;
}
.frame-container .frame-container {
    margin-bottom: 20px;
}

/* Typo3 Dyn. Content */
.frame .text-center {
    text-align: center;
}
.frame hr {
    margin-top: 20px; 
    margin-bottom: 20px;
}
p {
    opacity: 0.8;
}
.frame ul {
    list-style: none;
    padding-left: 0;
}

.frame ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    opacity: 0.8;
}
.frame ol {
    padding-left: 20px;
}
.frame ol li {
    margin-bottom: 10px;
    opacity: 0.8;
}
.frame ul li::before {
    content: '';
    position: absolute;
    left: 0;
    width: 28px;
    height: 18px;
    background: url(../Template/images/arrows.png) center / contain no-repeat;
    background: url(../Template/images/arrows_black.png) center / contain no-repeat;
    background: url(../Icons/pfeil_verlauf.png) center / contain no-repeat;
}
.frame ul ul {
    margin-top: 16px;
}
.frame .image {
    position: relative;
    transform: none;
    inset: unset; 
    
}

.frame .image-embed-item {
    width: 100%;
    height: auto;
    border-radius: 14px;
    margin-bottom: 16px;
}

.ce-center .ce-outer, .ce-column, .ce-center .ce-inner, .ce-gallery figure, .ce-gallery img {
    width: 100%;
    height: auto;
}

.frame-type-text > h2:first-child, 
.frame-type-text > h3:first-child {
    margin-top: 0px;
}

/* Animierte Liste */
ul.arrow-list li {
    font-size: var(--font--h4);
    letter-spacing: -.7px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 32px;
}
ul.arrow-list li::before {
    width: 30px;
    height: 20px;
    top: 4px;
}
.content-container-12.has-background ul.arrow-list li::before {
    width: 28px;
    background: url(../Template/images/arrows_black.png) center / contain no-repeat;
}

.content-container-12.background-green-blue .frame ul li::before {
    background: url(../Template/images/arrows.png) center / contain no-repeat;
}

/* Footer */
.section.footer {
    background: rgba(0, 0, 0, 0.9);
}
.section.footer .footer-logo {
    max-width: 200px;
}
.section.footer p {
    color: white;
}
.section.footer h2 {
    color: white;
    font-size: 2.6rem;
    font-size: 30px;
    font-weight: normal;
    opacity: .4;
}

.section.footer .divider-xxl {
    height: 90px;
}
.section.footer .big-text-btn {
    font-size: 20px;
}
.section.footer .small-vt-flex {
    margin-top: 8px;
}
.section.footer .max-w-right .button-big-line {
    margin-top: 8px;
    margin-bottom: 8px;
}
.section.footer .copywrith-dark {
    text-align: right;
}
.section.footer .max-left {
    height: 100%; 
    display: flex;
    flex-direction: column;
}
.section.footer .max-left .align-bottom {
    margin-top: auto;
}
.section.footer .copyright {
    height: 44px;
}
.meta-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-end;
}

.meta-nav a {
    text-decoration: none;
}
/*
.meta-nav a:not(:last-of-type)::after {
*/
.meta-nav a:not(:first-child)::before {
    content: "|";
    margin: 0 8px;
    opacity: .4;
    color: var(--colors--first-color);
}


/*
.main-content ul li {
    padding-left: 28px;
}
.main-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 14px;
    height: 2px;
    background: linear-gradient(90deg, #4db6ff, #0047ff);
    background: linear-gradient(
        to bottom right,
        var(--color-gradient1) 0%,
        var(--color-gradient2) 100%
    );
}*/


.visually-hidden {
    display: none;
}

.pt-elements-container.content-container-accordion {
    margin-bottom: 0px;
}
.pt-elements-container.content-container-accordion .toggle-header p {
    font-size: var(--font--h5);
    /*font-weight: var(--font-weight--600);*/
    margin-bottom: 0px;
}


.menu-subpages__item {
    margin-bottom: 16px;
}
.menu-subpages__image  img {
    border-radius: 14px;
}

.menu-subpages__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin-bottom: 16px;
}

.menu-subpages__image a {
    display: block;
    width: 100%;
    height: 100%;
}

.menu-subpages__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.ptprojects-collection-item, .ptprojects-work-image img {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.ptprojects-card-button {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: rgba(0, 0, 0, 0.5);
    /*clip-path: polygon(
        8% 0,
        100% 0,
        92% 100%,
        0 100%
    );*/
}


.ptprojects-work-image-block {
    overflow: hidden;
}

.ptprojects-work-image,
.ptprojects-work-image img {
    display: block;
    width: 100%;
    height: 100%;
}

.ptprojects-work-image img {
    object-fit: cover;
    transition: transform 0.6s ease;
 }

.ptprojects-card:hover .ptprojects-work-image img {
    transform: scale(1.08);
}


.ptprojects-category-wrapper {
    margin: 20px;
    /*max-width: var(--page-container--container-large);
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;*/
    position: relative;
}

.works-home-wrapper {
    margin: 20px;
}
.col-12 .works-home-wrapper {
    margin-left: 0px; 
    margin-right: 0px;
    
}

.case-details {
    grid-column-gap: 40px;
}
.case-details .case-sticky {
    justify-content: flex-start;
}


.social-image-facebook {
    filter: unset;
}
/* Cookie Banner 
.cookie-consent-container {
    margin: 0px;
    padding: 0px;
}
.cookie-consent-container .consent-modal {
    right: 0px;
    bottom: 0px;
}
.cookie-consent-container .buttons .btn--primary {
    background-color: var(--color-dark-primary-10);
    color: var(--color-white);
    border: 2px solid var(--color-dark-primary-10);
}*/
/* mindshape Cookie Consent – rechts unten */
#cookie-consent.cookie-consent-container {
    position: fixed !important;
    inset: auto 30px 30px auto !important;
    margin: 0 !important;
    transform: none !important;
    width: min(500px, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 60px);
    z-index: 99999;
}

#cookie-consent .consent-modal {
    width: 100%;
}
.cookie-consent-container::backdrop { 
    background-color: hsla(0deg, 0%, 0%, 20%);
}
.cookie-consent-container .buttons .btn--secondary, .cookie-consent-container .buttons .btn--secondary:hover {
    background-color: #efefef;
    border-color: #efefef;
    color: var(--color-gray-20);
}


/* Form */
.main-content form {
    background-color: #3333338c;
    border-radius: 8px;
    width: 100%;
    padding: 30px;
}

.main-content .form-element .form-label {
    display: none;
}
.main-content .form-element textarea {
    min-height: 140px;
}
.main-content .form-control {
    min-height: 60px;
    color: var(--colors--first-color);
    background-color: #444;
    border: 1px #ffffff1a;
    border-radius: 4px;
    margin-bottom: 0;
    padding: 18px 22px;
    transition: all .4s cubic-bezier(.25, .46, .45, .94);
    width: 100%;
} 

.main-content form .btn-primary {
    background-color: var(--colors--first-color);
    color: var(--colors--fourth-color);
    font-size: var(--font--work-title);
    font-weight: var(--font-weight--600);
    text-align: center;
    letter-spacing: -.6px;
    border-radius: 30px;
    padding: .95rem 1.4rem;
    text-decoration: none;
    transition: all .2s;
}
.main-content .form-check-label {
    font-weight: normal;
}
.main-content .form-check-wrapping-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.main-content .form-check-wrapping-label .form-check-input {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    background-color: #444;
    border-color: #444;
    cursor: pointer;
}

.main-content .form-check-wrapping-label .form-check-label {
    flex: 1;
    cursor: pointer;
}
.main-content .form-check-wrapping-label .form-check-input:checked {
    background-color: #444;
    border-color: #444;
}
.main-content .frame-type-form_formframework p {
    font-size: 28px;
}






@media (max-width: 1500px) {
    .main-content > .frame {
        padding-left: 20px;
        padding-right: 20px;
    }
    /* Projekt Header */
    .main-content > .frame > .hero {
        margin-left: -20px;
        margin-right: -20px;
    }
}
/* Desktop klein */
@media (max-width: 1199px) {
    body:not(.home) .hero.for-inner .hero-content .hero-headline {
        font-size: 80px;
    }
    
    .hero-content h1 {
        font-size: 6.5rem;
    }
    
    
}

/* Tablet */
@media (max-width: 991px) {
    /* Fixe Höhe für Nav-Bar / Burger Menü */
    .navigation-top {
        height: 70px !important;           /* Höhe der ersten Ebene */
        min-height: unset !important;
    }
    
}

/* Mobile */
@media (max-width: 767px) {
    body:not(.home) .hero.for-inner .hero-content .hero-headline {
        font-size: 76px;
    }
    
    .navigation-logo {
        max-width: 160px;
    }
    
    .hero-content h1 {
        font-size: 3rem;
    }
    
    .content-container-12.has-background {
        min-height: 250px;
    }
    
    .grid-work-page {
        grid-template-columns: 1fr;
    }
}

/* Mobile klein */
@media (max-width: 575px) {
    body:not(.home) .hero.for-inner .hero-content .hero-headline {
        font-size: 46px;
    }
    
    .navigation-content {
        padding-top: 60px;
    }
    
    .button-big-menu {
        font-size: 22px;
    }
}