/*
 Theme Name:   Brandwerk
 Theme URI:    https://www.brandwerk-digital.com
 Description:  Brandwerk Child Theme
 Author:       Dominik Summer
 Author URI:   https://www.brandwerk-digital.com
 Template:     generatepress
 Version:      0.1
*/

/* ***************** Fonts ****************** */


/* ***************** Allgemeines ****************** */
html {
    scroll-behavior: auto;
}
html, body {
  overflow-x: hidden;
}
.hyphens-auto{
  -moz-hyphens: auto;
  hyphens: auto;
}
b, strong {
    font-weight: 500;
}
/*** Works on common browsers ***/
::selection {
    background-color: var(--color-primary-900);
}
::-moz-selection {
    background-color: var(--color-primary-900);
}
::-o-selection {
    background-color: var(--color-primary-900);
}
::-ms-selection {
    background-color: var(--color-primary-900);
}
::-webkit-selection {
    background-color: var(--color-primary-900);
}
.site-footer ::selection {
    background-color: var(--color-rot);
}
.site-footer ::-moz-selection {
    background-color: var(--color-rot);
}
/* Remove click areas on mobile */
input, select, textarea, button, a {  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; }


/* ***************** Site loader ****************** */
.site-loader {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-grey);
}
/* ***************** Header & Navigation ****************** */

#mobile-header{
  background-color: var(--base);
}

nav.main-navigation.is_stuck{
  background-color: var(--base);
}

.sub-menu{
  box-shadow: none !important;
}
#site-navigation {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0px;
    z-index: 999;
    transition: 0.5s;
    padding: 30px 0;
}
#site-navigation.scrolled {
    background-color: var(--color-white);
    box-shadow: 0 0 5px 0px #f0f0f0;
}
.slideout-navigation.do-overlay .inside-navigation {
    max-width: 100%!important;
    padding: 34px 40px !important;
    height: 100%;
    flex-wrap: nowrap;
}
.slideout-navigation .inside-navigation .main-nav {
    flex-grow: 1;
    margin: 0;
    display: flex;
    align-items: center;
}
.main-navigation {
  overflow-x: hidden !important;
}
.slideout-exit.inner-exit-btn {
    position: relative !important;
    font-size: 40px !important;
    font-weight: 300;
    border-radius: 15px;
    padding: 3px 26px;
    line-height: 100%;
    letter-spacing: -0.03em;
}
button.slideout-exit , .slideout-exit.inner-exit-btn:before {
    display: none !important;
}
html, body, a, button , :where(div).gb-accordion__toggle, #project-filter label{
  cursor: none !important;
}
.allora-cursor {
    position: fixed;
    pointer-events: none;
    display: inline-flex;
    width: 16px;
    height: 16px;
    background-color: var(--color-rot);
    border-radius: 30px;
    z-index: 9999999;
    transition: transform 0.5s;
    border: 1px solid var(--color-rot);
}
.allora-cursor.scaled {
    transform: scale(2);
}
.menu-bar-item.slideout-toggle a {
    font-weight: 300;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: -0.03em;
    border: 1px solid var(--color-soft-black);
    border-radius: 15px;
    padding: 2px 16px 4px 16px;
}
.menu-bar-item.slideout-toggle .gp-icon {
    display: none;
}
.menu-bar-item.slideout-toggle .off-canvas-toggle-label {
    padding: 0;
}
.site-logo-lottie {
    max-width: 301px;
}
.navigation-branding:has(.site-logo-lottie) .site-logo {
    display: none;
}
.allora-home a , .menu-item-projects a , .menu-item-faq a, .menu-item-contact a , .menu-item-studio a , .all-projects-btn a {
    position: relative;
}
.allora-home a:before , .menu-item-projects a:before , .menu-item-faq a::before, .menu-item-contact a::before , .menu-item-studio a::before , .all-projects-btn a:before {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    background-image: url('/wp-content/uploads/Directiontop-left.svg');
    z-index: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s;
    opacity: 0;
}

.all-projects-btn a:before {
    right: -40px;
    top: 110%;
    width: 30px;
    height: 30px;
}
.menu-item-contact a::before {
    background-image: url('/wp-content/uploads/Nav-Contact_Button.svg');
}
.menu-item-home a::before {
    background-image: url('/wp-content/uploads/Nav-Home_Button.svg');
}
.allora-home a:before {
    bottom: 80px;
    left: -45px;
}
.menu-item-studio a:hover:before {
    transform: rotate(90deg) translate(-20px, -20px);
    opacity: 1;
}
.menu-item-projects a:hover:before , .menu-item-faq a:hover:before , .all-projects-btn a:hover:before {
    transform: translate(-20px, -20px);
    opacity: 1;
}
.menu-item-contact a:hover:before , .allora-home a:hover:before{
    transform: scale(2);
    opacity: 1;
}
.menu-item-projects a:before{
    right: -30px;
    bottom: -60px;
}
 .menu-item-faq a:before {
    right: -30px;
    bottom: -40px;
}
.menu-item-studio a:before {
    transform: rotate(90deg);
    left: -30px;
    bottom: -40px;
}
.menu-item-contact a:before {
    right: 0;
    bottom: 0;
}
/* mobile */
.site-logo.mobile-header-logo{
  margin-left: 20px !important;
}

/* Burger Menu Icon größe und Position oben */
.gp-icon.icon-menu-bars svg{
  height: 22px;
  width: 22px;
  top: 5px; /* Ausgleich wenn größe reduziert wird */
}

/* wenn kein Text neben Burger Icon */
.mobile-menu{
  display: none;
}

#mobile-menu > ul.menu{
  padding-top: 20px;
}


ul.sub-menu.toggled-on{
  border-bottom: 0px !important;
}

/* Sticky nav height */
.sticky-enabled .main-navigation.is_stuck .navigation-branding img {
  height: 40px;
}

/* ***************** Blog ****************** */

body.single-post #page, .blog #page, .archive #page{
  padding:40px 20px;
}
@media screen and (min-width:769px){
  body.single-post #page, .blog #page, .archive #page{
    padding:40px 40px;
  }
}

/* Sidebar */
.sidebar .wp-block-categories-list{
  list-style: none;
  margin-left: 0;

}

/* ***************** Formulare ****************** */

/* remove focus box */
div.wpforms-container input[type=submit]:focus:after, 
div.wpforms-container button[type=submit]:focus:after, 
div.wwpforms-containerl .wpforms-page-button:focus:after, 
.wp-core-ui div.wwpforms-container input[type=submit]:focus:after, 
.wp-core-ui div.wpforms-container button[type=submit]:focus:after, 
.wp-core-ui div.wwpforms-container .wpforms-page-button:focus:after {
    content: none !important;
    border: none !important;
}

/* confirmation message */
.wpforms-confirmation-container-full{
  background-color: var(--color-white) !important;
  color: var(--color-black) !important;
  border-color: var(--color-primary-900) !important;
}

/* submit button hover */
div.wpforms-container-full button[type=submit]:hover{
  background: var(--color-secondary-900) !important;
  color: var(--color-white) !important;
}

.gb-accordion__item-open:has(.home-faq-title)>.gb-accordion__content , .gb-accordion__item-open:has(.faq-title)>.gb-accordion__content {
    max-height: var(--gb-acc-height , 300px);
}
.gb-accordion__item.gb-accordion__item-open:has(.home-faq-title)>.gb-accordion__toggle .gb-accordion__toggle-icon-open , .gb-accordion__item.gb-accordion__item-open:has(.faq-title)>.gb-accordion__toggle .gb-accordion__toggle-icon-open {
    display: block;
}
.gb-accordion__item.gb-accordion__item-open:has(.home-faq-title)>.gb-accordion__toggle .gb-accordion__toggle-icon-close , .gb-accordion__item.gb-accordion__item-open:has(.faq-title)>.gb-accordion__toggle .gb-accordion__toggle-icon-close {
    display: none;
}
.gb-accordion__item.gb-accordion__item-open:has(.home-faq-title)>.gb-accordion__toggle .gb-accordion__toggle-icon-open path:last-child , .gb-accordion__item.gb-accordion__item-open:has(.faq-title)>.gb-accordion__toggle .gb-accordion__toggle-icon-open path:last-child {
    transform: rotate(-90deg);
}
.gb-accordion__item:has(.home-faq-title) path , .gb-accordion__item:has(.faq-title) path {
    transition: 0.8s;
    transform-origin: center;
}

.hero-text-lottie {
    position: relative;
    max-width: 80%;
    margin: 0 auto;
    height: 140px;
}
.hero-text-lottie lottie-player {
    position: absolute;
    width: 135%;
    height: auto;
    top: -220%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1318px;
}
.projects-grid:hover .gb-loop-item:hover {
    transform: scale(1.03);
}
.projects-grid .gb-loop-item {
    transition: 0.5s;
}
.slideout-navigation.main-navigation:not(.is-open):not(.slideout-transition) {
    display: block !important;
}
.slideout-navigation.main-navigation {
    transition: 0.5s !important;
    opacity: 1 !important;
    top: -118% !important;
}
.slideout-navigation.main-navigation.is-open {
    top: 0px !important;
    animation: jump 1s ease;
    animation-delay: 0.3s;
}
.rotate-img {
    animation: slowRotate 20s linear infinite;
    bottom: 10px;
    height: 220px;
    max-width: 100%;
    object-fit: contain;
    position: fixed;
    right: -110px;
    width: 220px;
    z-index: 99;
    border-radius: 100%;
    transition: right 0.5s;
    overflow: hidden;
}
.rotate-img:hover {
    right: 5px;
}
.logo-slider img {
    height: 180px !important;
    margin: 0 20px;
    width: 250px !important;
}
.lottie-pasta , .lottie-pasta-faq{
    position: relative;
    height: 220px;
}
.lottie-pasta lottie-player , .lottie-pasta-faq lottie-player {
    position: absolute;
    top: -20%;
    left: 0;
    height: 140%;
    width: max-content;
	min-width: 1200px;
}
.lottie-pasta lottie-player {
	min-width: 3200px;
}
.Farfalle-Scroll {
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 100%;
    max-width: 300px;
    bottom: -150px;
}
.projekt-box-item-holder {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    display: flex;
    padding-top: 56.6%;
}
.projekt-box-item-holder img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.projekt-box-item-holder video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: 0.3s;
}
.projekt-box-item-holder:hover video , .projekt-box-item-holder.playing video {
    opacity: 1;
}
.hero-popping-images img {
position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    will-change: transform, opacity;
    max-height: 350px;
    object-fit: contain;
}
.project-posts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
}
#project-filter {
    margin: 80px -40px 80px 0;
    display: flex;
    gap: 8px;
    overflow: auto;
    flex-wrap: nowrap;
    padding-right: 40px;
}
#project-filter label {
    border: 1px solid var(--color-soft-black);
    color: var(--color-soft-black);
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 6px 8px;
    border-radius: 10px;
    transition: 0.3s;
    min-width: max-content;
    position: relative;
}
#project-filter label input {
    position: absolute;
    opacity: 0;
    left: 0;
}
#project-filter label:has(:checked) , #project-filter label:hover {
    background-color: var(--color-primary-900);
}
.wiggle-btn .gb-text {
    position: relative;
}
.wiggle-btn:hover {
  animation: wiggle 2s linear infinite;
}
.studio-hero-lottie {
    position: absolute;
    top: 50%;
    left: -120px;
    transform: translateY(-50%);
    width: 100%;
    max-width: 260px;
}
.studio-box-lottie {
    max-width: 220px;
    margin: 0 auto;
}
.footer-lottie {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    max-width: 180px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
/* .parallax-content {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
} */
 .parallax-wrap {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}
#show-reel-popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
}
.popup-holder-inner {
    padding-top: 56.6%;
    position: relative;
    width: 100%;
}

.popup-holder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 100%;
  margin: 0 auto;
}
#popup-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
}
button.close-show-reel {
    position: absolute;
    top: -40px;
    right: -30px;
    z-index: 99;
    color: #fff;
    padding: 0;
}
.projekt-box-item .pre-heading {
    padding-bottom: 0;
    margin-bottom: 0;
}
ul.wp-block-list {
    margin: 12px 0 12px 16px;
}
@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}
@keyframes jump {
  from {
   margin-top: 40px;
  }
  to {
    margin-top: 0px;
  }
}
@keyframes slowRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
body.single-projekt {
    background-color: var(--color-grey);
}
.quote-lottie {
    max-width: 220px;
    margin: 0 auto;
    transform: translateY(-130px);
}
.projekte-nav .post-navigation-link-next a , .projekte-nav .post-navigation-link-previous a {
    font-size: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='58' height='66' viewBox='0 0 58 66' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.54 11.94C30.54 21.78 37.26 27.54 46.62 31.74V34.14C37.26 38.4 30.54 44.28 30.54 53.94H26.52C26.52 43.8 32.22 37.32 40.26 35.16V34.86H3.3V31.02H40.26V30.78C32.22 28.56 26.52 22.2 26.52 11.94H30.54Z' fill='%23333333'/%3E%3C/svg%3E%0A");
    width: 50px;
    height: 50px;
    display: flex;
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain
}
.projekte-nav .post-navigation-link-previous a {
    transform: rotate(180deg);
}
.project-type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.single-projekt .inside-article a {
    text-decoration: underline;
}
.gb-accordion__item-open .faq-title {
    padding-bottom: 20px;
}
.slideout-exit:hover , .slideout-toggle:hover {
    transform: scale(1.05);
}
.slideout-toggle , .slideout-exit{
    transition: 0.5s;
}
@media (min-width:1025px) {
  .social-btn:hover .gb-shape {
    transform: translateX(8px);
}
.social-btn .gb-shape {
    transition: 0.3s;
}
.footer-btn:hover .footer-lottie {
  opacity: 1;
}
}
@media (min-width:1025px) and (max-width:1260px) {
  .hero-title {
    font-size: 118px !important;
}
.hero-text-lottie lottie-player {
    top: -180%;
    max-width: 1020px;
}
}
@media (min-width:768px) and (max-width:1024px) {
#site-navigation .navigation-branding {
    margin-left: 40px;
}
}

@media (max-width:1024px) {
  .allora-cursor {
    display: none;
  }
.hero-text-lottie lottie-player {
    max-width: 500px;
    top: inherit;
    bottom: -60%;
}
    .hero-text-lottie {
        height: 280px;
    }
video#popup-video {
    width: 100%;
    height: auto;
}
.popup-holder {
  display: flex;
  align-items: center;
}
.slideout-exit.inner-exit-btn {
    padding: 0;
    border: none;
}

.slideout-exit.inner-exit-btn .gb-shape {
    display: flex;
}
.menu-toggle span.gp-icon {
    opacity: 0;
}
.menu-toggle {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_463_2866)'%3E%3Cpath d='M14.76 29.576L15.732 17.84L10.656 28.424C9.72 30.44 7.092 28.892 8.352 27.092L15.012 17.408L5.328 24.068C3.528 25.328 1.98 22.7 3.996 21.764L14.58 16.724L2.88 17.624C0.684 17.84 0.684 14.78 2.916 14.96L14.616 15.932L3.996 10.82C1.98 9.92 3.528 7.256 5.364 8.516L14.976 15.212L8.316 5.492C7.056 3.728 9.756 2.18 10.692 4.16L15.732 14.852L14.76 3.044C14.58 0.883999 17.676 0.883999 17.46 3.044L16.524 14.816L21.6 4.196C22.536 2.18 25.164 3.728 23.904 5.528L17.208 15.248L26.928 8.552C28.728 7.292 30.276 9.92 28.26 10.856L17.64 15.896L29.376 14.996C31.572 14.78 31.572 17.84 29.34 17.66L17.604 16.688L28.26 21.8C30.276 22.7 28.728 25.364 26.892 24.104L17.244 17.408L23.904 27.128C25.2 28.892 22.5 30.44 21.564 28.46L16.524 17.768L17.46 29.576C17.676 31.736 14.58 31.736 14.76 29.576Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_463_2866'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 32px;
    max-width: 32px;
    margin-right: 40px;
}
.lottie-pasta , lottie-pasta-faq{
    height: 170px;
}
.Farfalle-Scroll {
    max-width: 150px;
    bottom: -75px;
}
.studio-hero-lottie {
    left: 50%;
    top: calc(100% - 100px);
    transform: translateX(-50%);
    max-width: 150px;
}
.home-faq-btns , #project-filter{
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.home-faq-btns::-webkit-scrollbar , #project-filter::-webkit-scrollbar {
  display: none;
}
}

@media (max-width:767px) {
  .quote-lottie {
    max-width: 150px;
    transform: translateY(-80px);
}
  .projekte-nav .post-navigation-link-next a , .projekte-nav .post-navigation-link-previous a {
    width:35px;
}
	.lottie-pasta lottie-player , .lottie-pasta-faq lottie-player {
    width: auto;
}
  #site-navigation .navigation-branding {
    margin-left: 20px;
}
  .rotate-img {
    width: 120px;
    height: 120px;
    right: -60px;
}
.rotate-img .safe-svg-inside {
    width: 100% !important;
    height: 100% !important;
}
.site-logo-lottie {
    max-width: 220px;
}
.slideout-navigation.do-overlay .inside-navigation {
    padding: 50px 20px !important;
}
.menu-toggle {
    margin-right: 20px;
}
.logo-slider img {
    width: 180px !important;
    margin: 0;
    height: 140px !important;
}
.slideout-navigation.main-navigation .main-nav ul li a {
    padding: 0;
}
#project-filter {
    margin: 80px -20px 40px -20px;
    padding-left: 20px;
}
#project-filter label {
    font-size: 14px;
}
    .project-posts {
    grid-template-columns: 100%;
}
.allora-home a:before, .menu-item-projects a:before, .menu-item-faq a::before, .menu-item-contact a::before, .menu-item-studio a::before {
    width: 40px;
}
.allora-home a:before {
    height: 40px;
    bottom: 68px;
    left: -35px;
}
.menu-item-contact a:before {
    width: 40px;
    height: 50px;
}
.studio-box-lottie {
  max-width: 150px;
}
.lottie-pasta-faq {
    height: 85px;
}
.gb-accordion__content .deko-h3 {
    font-size: 16px;
}
    .hero-text-lottie lottie-player {
    top: initial;
    bottom: -55%;
    max-width: 450px;
}
}
@media (max-width:480px) {
.lottie-pasta-faq {
    height: 55px;
}
    .hero-text-lottie lottie-player {
    max-width: 380px;
    bottom: -44%;
}
}
@media (max-width:410px) {
.hero-text-lottie lottie-player {
    max-width: 340px;
    bottom: -35%;
}
}
@media (max-width:380px) {
.hero-text-lottie lottie-player {
    max-width: 300px;
}
}