/*
Theme Name:   helloelementorchild
Description:  Test
Author:       GRUPPE DREI
Author URL:   https://www.gruppedrei.com
Template:     hello-elementor
Version:      1.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  helloelementorchild
*/

/* Schreibe hier Dein eigenes persönliches Stylesheet */
/*
1. Custom Animations 
2. Globals
3. Formulare
4. Header
5. Footer
6. Weitere Elemente
*/
/*** CUSTOM ANIMATIONS ***/
/* Elementor Animationen Anpassungen */
@media screen and (prefers-reduced-motion: no-preference) {
	@keyframes myFadeInUp {
		from {
			transform: translate3d(0,50px,0);
			opacity: 0;
		}
		to {
			transform: none;
			opacity: 1;
		}
	}
	.fadeInUp {
		animation-name: myFadeInUp !important;
	}

	@keyframes myFadeInLeft {
		from {
			transform: translate3d(-50px,0,0);
			opacity: 0;
		}
		to {
			transform: none;
			opacity: 1;
		}
	}
	.fadeInLeft {
		animation-name: myFadeInLeft !important;
	}

	@keyframes mySlideInUp {
		from {
			transform: translate3d(0,50px,0);
		}
		to {
			transform: none;
		}
	}
	.slideInUp {
		animation-name: mySlideInUp !important;
	}

	@keyframes mySlideInLeft {
		from {
			transform: translate3d(-20px,0,0);
		}
		to {
			transform: none;
		}
	}
	.slideInLeft {
		animation-name: mySlideInLeft !important;
	}
}
/* Elementor Animationen Anpassungen Ende */
	
/* Eigene Animationen */
/* Eigene Animationen Ende */
	html {
		scroll-behavior: smooth;
	  }
}

@media screen and (prefers-reduced-motion: reduce) {
	*, *:before, *:after{
		transition: none !important;
		animation-duration: 0 !important;
	}
}
/*** ANIMATIONS ENDE ***/

/*** GLOBALS ***/
.e-container, .e-con{
    --full-width-content-padding-amount: max(1%, calc(50% - var(--container-max-width) / 2));
	--full-viewwidth-content-padding-amount: max(1%, calc((50vw - var(--scrollbar-width) / 2) - var(--container-max-width) / 2));
	
	--spacer-250: clamp(100px, 13vw, 250px);
	--spacer-180: clamp(90px, 9.375vw, 180px);
	--spacer-160: clamp(80px, 8.33vw, 160px);
	--spacer-120: clamp(60px, 6.25vw, 120px);
	--spacer-100: clamp(50px, 5.2vw, 100px);
	--spacer-80: clamp(40px, 4.16vw, 80px);
	--spacer-60: clamp(30px, 3.125vw, 60px);
	--spacer-40: clamp(20px, 2.08vw, 40px);
	--spacer-30: clamp(15px, 1.5626vw, 30px);
	--spacer-20: clamp(10px, 1.04vw, 20px);
	--spacer-10: clamp(5px, 0.5vw, 10px);
	
	
	/* Fix for variable font weight */
	--e-global-typography-primary-font-weight: 600;
	--e-global-typography-5f22da2-font-weight: 700;
	--e-global-typography-9d69fc9-font-weight: 300;
}

@media (max-width: 1024px){
    .e-container, .e-con{
        --full-width-content-padding-amount: 4vw;
		--full-viewwidth-content-padding-amount: 4vw;
	}
}


@media (max-width: 767px){
    .e-container, .e-con{
        --full-width-content-padding-amount: 8vw;
		--full-viewwidth-content-padding-amount: 8vw;
	}
}


/* Content Breite eine Seite - Full width andere Seite */
.full-width-content-padding-left{
    padding-left: var(--full-width-content-padding-amount)
}
.full-width-content-padding-right{
    padding-right: var(--full-width-content-padding-amount)
}
.full-viewwidth-content-padding-left{
    padding-left: var(--full-viewwidth-content-padding-amount)
}
.full-viewwidth-content-padding-right{
    padding-right: var(--full-viewwidth-content-padding-amount)
}
/* Content Breite Ende */


/* Listen */
ul{
    padding-left: 1em;
}

.list-indent ul > li{
    text-indent: -1em;
    padding-left: 1em;
}

.custom-list-marker ul{
	padding-left: 0.6em;
}
.custom-list-marker ul li{
    padding-left: 0.5em;
}
.custom-list-marker ul li::marker{
    content:'+';
}
/* Listen Ende */


/*P, Links + Hover Effekt*/
p:last-child{
    margin-bottom: 0;
}
p a, p a:hover, p a:focus, .list-hover-line a{
    color: inherit;
    position: relative;
    --lineColor: currentColor;
}
p a, .list-hover-line a span, .btn-line-blue{
    background: 
      linear-gradient(var(--lineColor, #00000033) 0 0) 
      0 100% /var(--d, 0) 2px 
    no-repeat;
    transition:0.3s !important;
}
p a:hover, p a:focus, .list-hover-line a:hover span, .list-hover-line a:focus span{
    --d: 100%;
}

div[class*="btn-line"] a > span, .list-line-blue a{
	 background: 
      linear-gradient(var(--lineColor, #00000033) 0 0) 
      0 100% /var(--d, 0) 6px 
    no-repeat;
    transition:0.3s;
	
}
div[class*="btn-line"].animation-start a > span, .list-line-blue.animation-start a{
	--d: 100%;
}
.btn-line-blue, .list-line-blue{
	--lineColor: var(--e-global-color-secondary);
}
.btn-line-green{
	--lineColor: var(--e-global-color-primary);
}

.list-line-blue a{
	width: auto !important;
}

.headline-underline span{
	background: 
      linear-gradient(var(--lineColor, var(--e-global-color-primary)) 0 0) 
      0 90% /var(--d, 0) 10px 
    no-repeat;
    transition:0.3s;
	--d: 100%;
}
.headline-underline.blue{
	--lineColor: var(--e-global-color-secondary);
}
.headline-underline.white{
	--lineColor: var(--e-global-color-05a3a82);
}

@media(max-width: 767px){
	
	div[class*="btn-line"] a > span, .list-line-blue a{
		 background: 
      linear-gradient(var(--lineColor, #00000033) 0 0) 
      0 100% /var(--d, 0) 4px 
    no-repeat;
	}
	.headline-underline span{
		background: 
		  linear-gradient(var(--lineColor, var(--e-global-color-primary)) 0 0) 
		  0 90% /var(--d, 0) 6px 
		no-repeat;
	}
	
	p a, .list-hover-line a span{
		--d: 100%;
	}
}
/* Ende */

/* Elementor Buttons */
.elementor-button-icon svg{
	width: 20px;
}
.btn-white a{
	color: var(--e-global-color-6b0f725) !important;
	border-color: var(--e-global-color-6b0f725) !important;
}
.btn-white a svg path{
	fill: var(--e-global-color-6b0f725) !important;
}

@media(max-width: 767px){
	.elementor-button-icon svg{
		width: 16px;
	}
}
/* Ende */


/* Remove little space under image*/
.img-block .elementor-widget-container{
    line-height: 0;
}
.img-block img{
    display: block;
}
/* */

.mt-auto{
	margin-top: auto;
}

.lineheight-reset{
	line-height: 0;
}

/* Show overflow on both sides/right side of carousel*/
.carousel-overflow :is(.swiper-container, .owl-carousel .owl-stage-outer){
	overflow: visible;
}
.carousel-overflow-right :is(.swiper-container, .owl-carousel .owl-stage-outer){
	overflow: visible;
    clip-path: inset(-100vw -100vw -100vw 0);
}

/* Remove absolute positioning on mobile*/
@media (max-width: 768px){
    .position-mobile{
        position: relative !important;
    }
}

.font-weight-300, .font-weight-300 *{
	font-weight: 300 !important;
}
.font-weight-400{
	font-weight: 400 !important;
}
.font-weight-700{
	font-weight: 700;
}
.uppercase{
	text-transform: uppercase;
}
/*** GLOBALS ENDE ***/


/*** FORMULARE ***/
.elementor-field-type-html a{
	color: inherit;
	background: 
      linear-gradient(currentColor 0 0) 
      0 100% /var(--d, 0) 2px 
    no-repeat;
    transition:0.3s !important;
}
.elementor-field-type-html a:is(:hover, :focus){
	--d: 100%;
}
/*** FORMULARE ENDE ***/



/*** NAVIGATION/HEADER/POPUP ***/
.sticky-header{
	width: 100% !important;
	transition: all 0.2s;
}
.sticky-header.nav-up{
	translate: 0 -100%;
	opacity: 0;
	transition: all 0.2s;
}
.sticky-header::before {
    content: "";
    background: var(--e-global-color-05a3a82);
    transform: skew(-30deg);
    position: absolute;
    left: -2000px;
    width: calc(2000px + clamp(75vw, 1500px, 100vw));
}

.sticky-header.elementor-sticky--effects::before{
	border-right: 1px solid #BCCF00;
	border-bottom: 1px solid #BCCF00;
}

#main-nav nav ul li a:not(:hover, .elementor-item-active)::after{
    opacity: 1;
    background-color: var(--e-global-color-primary);
}
#main-nav nav ul li a.elementor-item-active::after{
    background-color: var(--e-global-color-secondary);
}
#main-nav nav ul li:last-of-type.menu-item-type-custom a{
    gap: var(--spacer-10);
}
#main-nav nav ul li:last-of-type.menu-item-type-custom a::before{
    content: url(/wp-content/uploads/2023/10/login-icon.svg);
    position: static;
    opacity: 1;
    height: auto;
    background: none;
    align-self: flex-end;
    line-height: 1;
}
#main-nav nav ul li:last-of-type.menu-item-type-custom a::after{
    display: none;
}

@media(max-width: 1024px){
	.sticky-header::before {
		transform: none;
		left: 0;
		width: 100vw;
	}
    #main-nav nav{
        height: calc(100vh - var(--header-height) + var(--spacer-60));
		max-height: calc(100vh - var(--header-height) + var(--spacer-60));
    } 
    #main-nav nav ul{
        padding-top: var(--spacer-120);
        display: flex;
        flex-direction: column;
		justify-content: flex-end;
        align-items: flex-start;
        gap: var(--spacer-120);
		height: 100%;
		padding-bottom: var(--spacer-120);
    }
    #main-nav nav ul li a::after{
        content:"";
        width: calc(100% - var(--full-width-content-padding-amount) * 2);
        height: 2px;
        bottom: 0;
    }
	
}

/* Philosophie Seite */
.page-id-221 .sticky-header:not(.elementor-sticky--effects), .page-id-221 .sticky-header::before{
	background: var(--e-global-color-primary);
	border: none;
}
.page-id-221 .sticky-header:has(.elementor-menu-toggle.elementor-active)::before{
	border: none;
	background: var(--e-global-color-05a3a82); 
}

@media(min-width: 1025px){
	.page-id-221 #main-nav nav ul li a:not(:hover, .elementor-item-active)::after{
		background-color: var(--e-global-color-05a3a82); /* white */	
	}
	.page-id-221 #main-nav nav ul li:last-of-type.menu-item-type-custom a::before{
		filter: brightness(0) invert(1);	
	}
}

/*** NAVIGATION/HEADER/POPUP ENDE ***/


/*** FOOTER ***/
.footer-corner::before{
    content: "";
    height: 200%;
    width: 100vw;
    background: var(--e-global-color-primary);
    position: absolute;
    left: 0;
    right: unset;
    top: 0;
    z-index: -1;
    rotate: 30deg;
    transform-origin: top left;
}
@media(max-width: 767px){
    .footer-corner::before{
       background: white;
       left: unset;
       right: 90%;
       z-index: 0;
       transform-origin: top right;
    }
}
/*** FOOTER ENDE ***/


/*** WEITERE ELEMENTE ***/
/*#breadcrumbs > span > span:not(.breadcrumb_last){
	display: inline-flex;
	align-items: center;
}
#breadcrumbs > span > span:not(.breadcrumb_last)::after{
	content: "";
	background: url('') no-repeat center/contain;
	display: inline-block;
	width: 6px;
	height: 8px;
	margin: 0 20px;
}*/
.custom-accordion details:not([open], :hover) summary{
    opacity: 0.8;
}
.home .custom-accordion summary{
    font-weight: 300;
}

.hover-box{
    min-height: 400px;
}
.hover-box .elementor-widget-container{
    display: flex;
    align-items: flex-end;
}
.hover-box:hover{
    background-color: var(--e-global-color-text);
}
.hover-box:hover .elementor-heading-title{
    color: white !important;
}

@media(max-width: 1024px){
    .hover-box{
        min-height: 250px;
    }
}
@media(max-width: 767px){
    .hover-box{
        min-height: 150px;
    }
}

#infographic svg{
    width: 46.875vw;
    height: auto;
}

@media (prefers-reduced-motion: no-preference) {
	#infographic g{
		opacity: 0;
	}
	#infographic g#punkt-2{
		animation-delay: 0.25s;
	}
	#infographic g#punkt-3{
		animation-delay: 0.5s;
	}
	#infographic g#punkt-4{
		animation-delay: 0.75s;
	}
	#infographic g#punkt-5{
		animation-delay: 1s;
	}
	#infographic g#punkt-6{
		animation-delay: 1.25s;
	}
	#infographic g#punkt-7{
		animation-delay: 1.5s;
	}
	#infographic g#punkt-8{
		animation-delay: 1.75s;
	}
	
	#infographic.animation-start g{
		animation: groupAni 0.5s forwards;
	}
	
	@keyframes groupAni {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
}

@media(max-width: 1024px){
	#infographic svg{
		width: 80vw;
	}
}

.client-box .elementor-image-box-description{
    font-weight: 300;
}
.client-box .elementor-image-box-img{
    line-height: 0;
}
.client-box .elementor-image-box-content{
    position: relative;
    padding-bottom: var(--spacer-60);
     margin-bottom: var(--spacer-20);
}
.client-box .elementor-image-box-content::after{
    content: "";
    background-color: var(--e-global-color-primary);
    width: 150px;
    height: 7px;
    position: absolute;
    bottom: 0;
    left: -50px;
    
}

.client-box.unternehmer .elementor-image-box-img{
    width: 55% !important;
}
.client-box.unternehmer .elementor-image-box-content{
    width: 45% !important;
}
.client-box.erben .elementor-image-box-img{
    width: 60% !important;
}
.client-box.erben .elementor-image-box-content{
    width: 40% !important;
}
.client-box.erben .elementor-image-box-content::after{
    left: unset;
    right: -50px;
}
.client-box.privatpersonen{
    margin-left: calc(var(--full-viewwidth-content-padding-amount) + (var(--container-max-width) / 12));   
}
.client-box.privatpersonen .elementor-image-box-img{
    width: 66% !important;
}
.client-box.privatpersonen .elementor-image-box-content{
    width: 34% !important;
}
@media(max-width: 1024px){
    .client-box.privatpersonen{
        margin-left: 0;
    }
}
@media(max-width: 767px){
    .client-box .elementor-image-box-wrapper :is(.elementor-image-box-content, .elementor-image-box-img){
        width: 100% !important;
    }
    .client-box .elementor-image-box-content::after{
        left: 0 !important;
    }
}


/*.principle-box{
    min-height: 700px;
}*/
.principle-box .elementor-icon-box-wrapper{
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    /*justify-content: space-between;*/
}
.principle-box .elementor-icon-box-wrapper .elementor-icon-box-icon{
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.principle-box.animation-start .elementor-icon-box-wrapper .elementor-icon-box-icon svg{
	animation: rotate 0.4s forwards;
}
.principle-box .elementor-icon-box-wrapper .elementor-icon-box-content{
    flex-grow: 0;
}
.principle-box .elementor-icon-box-wrapper .elementor-icon-box-content .elementor-icon-box-title span{
    display: inline-flex;
    flex-direction: column;
}
.principle-box .elementor-icon-box-wrapper .elementor-icon-box-content .elementor-icon-box-title span::after{
    content: "";
    height: 7px;
    width: 100%;
    background: var(--e-global-color-primary);
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes rotate {
		0% {
			rotate: 0;
		}
		100% {
			rotate: 45deg;
		}
	}
}

@media (prefers-reduced-motion: no-preference) {
	.list-animation li{
		opacity: 0;
	}
	.list-animation.animation-start li{
		animation: listFadeIn 0.5s forwards;
		animation-delay: var(--animationDelay);
	}

	@keyframes listFadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
}

.quote .elementor-blockquote{
    display: flex;
    flex-direction: column;
    gap: var(--spacer-30);
}
.quote .elementor-blockquote::before{
    content: "";
    background: url(/wp-content/uploads/2025/04/quote.svg) no-repeat center/contain;
    width: 70px;
    height: 55px;
}

@media(max-width: 767px){
    .quote .elementor-blockquote::before{
        width: 50px;
        height: 40px;
    }
}

/*** WEITERE ELEMENTE ENDE ***/