/*
Theme Name:   helloelementorchild
Description:  Test
Author:       GRUPPE DREI
Author URL:   http://127.0.0.1/dev01
Template:     hello-elementor
Version:      1.0
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;
	}

	/* Eigene Animationen*/
	.background-zoom{
		animation: myBackgroundZoom;
		animation-duration: 1s;
	}
	@keyframes myBackgroundZoom{
		from{
			background-size: 110%;
		}
		to{
			background-size: 100%;
		}
	}
}
/*** ANIMATIONS ENDE ***/

/*** GLOBALS ***/
@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
.e-container, .e-con{
	--container-max-width: max(1000px, calc((1700 / 1920) * 100vw));
    --full-width-content-padding-amount: max(1%, calc(50% - var(--container-max-width) / 2));
}
/*
.elementor-kit-5{
	--size-h1: 50;
	--size-h2: 40;
	--size-h3: 30;
	--fsmall: 0.9;
	--fbig: 1.1;
	
    --e-global-typography-8758819-font-size: clamp(calc(var(--size-h1) * var(--fsmall) / 16 * 1rem), calc((var(--size-h1) / (1920 / 100)) * 1vw), calc(var(--size-h1) * var(--fbig) / 16 * 1rem));
    --e-global-typography-795722c-font-size: clamp(calc(var(--size-h2) * var(--fsmall) / 16 * 1rem), calc((var(--size-h2) / (1920 / 100)) * 1vw), calc(var(--size-h2) * var(--fbig) / 16 * 1rem));
    --e-global-typography-9dbc1ec-font-size: clamp(calc(var(--size-h3) * var(--fsmall) / 16 * 1rem), calc((var(--size-h3) / (1920 / 100)) * 1vw), calc(var(--size-h3) * var(--fbig) / 16 * 1rem));
}

@media (max-width: 1024px){
    .e-container, .e-con{
        --full-width-content-padding-amount: 2%;
    }
	.elementor-kit-5{
		--size-h1: 45;
		--size-h2: 35;
		--size-h3: 25;
	}
}

@media (max-width: 768px){
    .e-container, .e-con{
        --full-width-content-padding-amount: 4%;
    }
	 .elementor-kit-5{
		--size-h1: 40;
		--size-h2: 30;
		--size-h3: 20;
	}
}
*/
/* 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)
}
/* Content Breite Ende */

/* Listen */
.list-indent ul > li{
    text-indent: -1em;
    padding-left: 1em;
}
ul{
    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{
    color: inherit;
    position: relative;
    --lineColor: var(--e-global-color-f7af70b)
}
p a, .list-hover-line a span, .list-hover-line-green a span{
    background: 
      linear-gradient(var(--lineColor, #ffffff33) 0 0) 
      0 100% /var(--d, 0) 2px 
    no-repeat;
    transition:0.3s;
}
.list-hover-line-green{
    --lineColor: var(--e-global-color-f7af70b);
}
p a:hover, .list-hover-line a:hover span, .list-hover-line-green a:hover span{
    --d: 100%;
}
/* Ende */

/*Hover Effekt für Elementor Buttons */
/*.elementor-widget-button .elementor-button-wrapper a{
    transition: padding 0.2s;
}
.elementor-widget-button .elementor-button-wrapper a:hover{
    padding: 12px 30px 12px 40px;
    transition: padding 0.2s;
}
/* Ende */

.img-block .elementor-widget-container{
    line-height: 0;
}
.img-block img{
    display: block;
}

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

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

.carousel-overflow :is(.swiper-container, .owl-carousel .owl-stage-outer){
	overflow: visible;
    clip-path: inset(-100vw -100vw -100vw 0);
}

@media (max-width: 768px){
    .position-mobile{
        position: relative !important;
    }
}
/*** GLOBALS ENDE ***/


/*** FORMULARE ***/
/* Custom Variables für einfacheres Bearbeiten */
.wpcf7{
    --form-label-text-color: var(--e-global-color-text);
    --form-label-font-family: var(--e-global-typography-2da4099-font-family);
    --form-label-font-size: var(--e-global-typography-2da4099-font-size);
    --form-label-font-weight: var(--e-global-typography-2da4099-font-weight);
	--form-input-text-color: var(--e-global-color-text);
    --form-input-background-color: transparent;
    --form-input-border: 1px solid var(--e-global-color-3e523e1);
    --form-input-border-radius: 0px;
	--form-input-font-family: var(--e-global-typography-2da4099-font-family);
    --form-input-font-size: var(--e-global-typography-2da4099-font-size);
    --form-input-font-weight: var(--e-global-typography-2da4099-font-weight);
    --form-submit-background-color: transparent;
    --form-submit-text-color: var(--e-global-color-f7af70b);
    --form-submit-border: 1px solid;
    --form-submit-border-radius: 30px;
	--form-checkbox-size: 15px;
}
.form-white .wpcf7{
    --form-label-text-color: var(--e-global-color-6b0f725);
    --form-input-border: 1px solid #ffffff33;
    --form-submit-text-color: var(--e-global-color-6b0f725);
}

/* Formulare */
.wpcf7 .row{
    display: flex;
    justify-content: space-between;
}
.wpcf7 .row .column{
    flex-basis: 49%;
}
.wpcf7 div, .wpcf7 label, .wpcf7 .notice, .wpcf7 .info, .wpcf7 h3{
    font-family: var(--form-label-font-family);
	font-weight: var(--form-label-font-weight);
    color: var(--form-label-text-color );
}
.wpcf7 label{
    font-size: var(--form-label-font-size);
     width: 100%;
}
.wpcf7 label:not(.wpcf7-acceptance *, .uploads *, .wpcf7-radio *){
     position: absolute;
     left: -9999px;
     height: 0;
     width: 0;
}
.wpcf7 :is(input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea){
    border-radius: var(--form-input-border-radius);
    background: var(--form-input-background-color);
    margin: 1% 0;
    border: var(--form-input-border);
    padding: 25px 20px;
    font-family: var(--form-input-font-family);
    font-size: var(--form-input-font-size);
    font-weight: var(--form-input-font-weight);
    color: var(--form-input-text-color);
}
.wpcf7 ::placeholder{
     color: var(--form-label-text-color);
}
.wpcf7 .wpcf7-acceptance .wpcf7-list-item{
    width: 100%;
    margin-left: 0;
}
.wpcf7 .wpcf7-acceptance label{
    display: flex;
    align-items: center;
    width: 100%;
}
.wpcf7 .wpcf7-acceptance label a{
    color: inherit;
}
.wpcf7 .wpcf7-acceptance label a:hover{
    text-decoration: underline;
}
.wpcf7 input[type="checkbox"]{
    width: var(--form-checkbox-size);
    height: var(--form-checkbox-size);
    margin: 0 2% 0 0;
    padding: 0;
    appearance: none;
}
.wpcf7 input[type="checkbox"]::before{
    content: "";
    width: 100%;
    height: 100%;
    margin-right: 2%;
    display:block;
    background: var(--form-input-background-color);
	border: 1px solid var(--e-global-color-3e523e1);
}
.wpcf7 input[type="checkbox"]:checked::before{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAAoklEQVRoge3XQQrCMBBA0X8Ji97/IC7cta7swuPoIgRKFTFRmAn8t2/5E0LSgiRJkvRHE3AFLtEhPSZgBR7AEtzS7ADcKPF34Bib08b4KMZHMT6K8VHC48/ATLnqW20/D9bOd/xs7gxIEQ+vW+DU8Uz4nm8ZIl189c0QaeOrT0Okj6/eDTFMfLU/YVKcNq22qz7Myu9NlP/XhYFWXpIkSQk8ASIVUgG0/j0XAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.form-white .wpcf7 input[type="checkbox"]:checked::before{
    filter: brightness(0) invert(1);
}
.wpcf7 .notice{
    font-size: 80%;
    display: inline-block;
    padding: 0 0 1em 0;
}
.wpcf7 .wpcf7-submit{
    margin-top: 0.5em;
    border: var(--form-submit-border);
    border-radius: var(--form-submit-border-radius);
    background: var(--form-submit-background-color);
    color: var(--form-submit-text-color);
}
.wpcf7 .uploads {
    margin-top: 3%;
    display: flex;
}
.wpcf7 .uploads input[type="file"]{
    visibility: hidden;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
}
.wpcf7 .uploads label{
    cursor: pointer;
    font-size: var(--form-input-font-size);
	font-weight: var(--form-input-font-weight);
    display: flex;
    align-items: center;
    flex-basis: 55%;
}
.wpcf7 .uploads label.fileuploaded{
    
}
.wpcf7 .uploads label::before{
    content: url(/wp-content/uploads/2021/09/icon-upload.svg);
    margin-right: 1em;
}


.wpcf7 form.sent .wpcf7-response-output {
    color: #46b450;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    color: #ffb900;
}


@media (max-width: 767px){
    .wpcf7 .row{
        flex-wrap: wrap;
    }
    .wpcf7 .row .column{
        flex-basis: 100%;
    }
    .wpcf7 input[type="checkbox"]{
        min-width: 25px;
        width: 25px;
        height: 25px;
        margin-right: 5%;
    }
    .wpcf7 :is(input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea){
		padding: 18px 10px;
	}
    .wpcf7 .uploads {
        margin-top: 10%;
        flex-direction: column;
    }
    
    .wpcf7 .notice{
        padding: 5% 0;    
    }
}
/*** FORMULARE ENDE ***/


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

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


/*** FOOTER ***/

/*** FOOTER ENDE ***/


/*** WEITERE ELEMENTE ***/

/*** WEITERE ELEMENTE ENDE ***/