/****** REMOVE AT GO LIVE!! ******/

/* #site-header {
	display: none !important;
}


.home #content {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


.home #masthead {
	display: none !important;
} */



/****** VARIABLES ******/

@color_primary: var( --e-global-color-primary ); //#000000
@color_main_green: var( --e-global-color-a41ac1c ); //#B7D9BF
@color_white: var( --e-global-color-334a60c ); //#ffffff
@color_light_green: var( --e-global-color-e146272 ); //#CFE6D1
@color_dark_green: var( --e-global-color-cfe9c87 ); //#93AE9E
@color_light_blue: var( --e-global-color-c1f7689 ); //#7C95AA
@color_dark_blue: var( --e-global-color-3f30806 ); //#26445D
@color_yellow: var( --e-global-color-2f15b5a );//#F8F1CB
@transition-speed: 0.3s;


/****** SHOW ELEMENTOR CONTAINERS ******/

.elementor-editor-active {
	[data-element_type="container"] {
    	outline: thin solid rgba(255,255,255,0.25);
	}
}



/****** HTML, BODY ******/

body {
	overflow-x: hidden !important;
	-webkit-text-size-adjust: none;
}

* {
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

/* .ready, .pace-done {
	background: white;
	overflow-y: auto;

	[data-elementor-type="header"],
	[data-elementor-type="archive"],
	[data-elementor-type="product"],
	[data-elementor-type="single-page"],
	[data-elementor-type="footer"],
	[data-elementor-type="error-404"],
	[data-elementor-type="search-results"],
	#content {
		opacity: 1;
	}
} */


/****** TYPOGRAPHY ******/

h1, h2, h3, h4, h5, p {
	cursor: text;
}

h1, h2, h3, h4, h5 {
	&.elementor-heading-title {
		margin-bottom: 10px;
	}
}

.elementor-kit-9 .elementor {
	& p, .elementor-widget-text-editor {
		a, strong a {
			text-decoration: underline !important;
			color: inherit !important;
			text-decoration-thickness: 1.5px !important;
			text-underline-offset: 3px !important;
			&:link, &:focus, &:active, &:hover {
				text-decoration: underline !important;
				color: inherit !important;
				text-decoration-thickness: 1.5px !important;
				text-underline-offset: 3px !important;
			}
		}

		ul, ol {
			li {
				margin-bottom: 10px;
			}
		}
	}
}


/****** MIXINS ******/

.mixin_typography_primary() {
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-size: var(--e-global-typography-primary-font-size);
	font-weight: var(--e-global-typography-primary-font-weight);
	text-transform: var(--e-global-typography-primary-text-transform);
	font-style: var(--e-global-typography-primary-font-style);
	-webkit-text-decoration: var(--e-global-typography-primary-text-decoration);
	text-decoration: var(--e-global-typography-primary-text-decoration);
	letter-spacing: var(--e-global-typography-primary-letter-spacing);
	word-spacing: var(--e-global-typography-primary-word-spacing);
}

.mixin_typography_secondary() {
	font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
	font-size: var(--e-global-typography-secondary-font-size);
	font-weight: var(--e-global-typography-secondary-font-weight);
	text-transform: var(--e-global-typography-secondary-text-transform);
	font-style: var(--e-global-typography-secondary-font-style);
	-webkit-text-decoration: var(--e-global-typography-secondary-text-decoration);
	text-decoration: var(--e-global-typography-secondary-text-decoration);
	letter-spacing: var(--e-global-typography-secondary-letter-spacing);
	word-spacing: var(--e-global-typography-secondary-word-spacing);
}

.mixin_typography_text() {
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	text-transform: var(--e-global-typography-text-text-transform);
	font-style: var(--e-global-typography-text-font-style);
	-webkit-text-decoration: var(--e-global-typography-text-text-decoration);
	text-decoration: var(--e-global-typography-text-text-decoration);
	letter-spacing: var(--e-global-typography-text-letter-spacing);
	word-spacing: var(--e-global-typography-text-word-spacing);
}

.mixin_typography_accent() {
	font-family: var(--e-global-typography-accent-font-family), Sans-serif;
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	text-transform: var(--e-global-typography-accent-text-transform);
	font-style: var(--e-global-typography-accent-font-style);
	-webkit-text-decoration: var(--e-global-typography-accent-text-decoration);
	text-decoration: var(--e-global-typography-accent-text-decoration);
	letter-spacing: var(--e-global-typography-accent-letter-spacing);
	word-spacing: var(--e-global-typography-accent-word-spacing);
}

.mixin_typography_primary_xl() {
	font-family: var(--e-global-typography-621dbe1-font-family), Sans-serif;
	font-size: var(--e-global-typography-621dbe1-font-size);
	font-weight: var(--e-global-typography-621dbe1-font-weight);
	text-transform: var(--e-global-typography-621dbe1-text-transform);
	font-style: var(--e-global-typography-621dbe1-font-style);
	-webkit-text-decoration: var(--e-global-typography-621dbe1-text-decoration);
	text-decoration: var(--e-global-typography-621dbe1-text-decoration);
	letter-spacing: var(--e-global-typography-621dbe1-letter-spacing);
	word-spacing: var(--e-global-typography-621dbe1-word-spacing);
}

.mixin_typography_claim() {
	font-family: var(--e-global-typography-786bdcf-font-family), Sans-serif;
	font-size: var(--e-global-typography-786bdcf-font-size);
	font-weight: var(--e-global-typography-786bdcf-font-weight);
	text-transform: var(--e-global-typography-786bdcf-text-transform);
	font-style: var(--e-global-typography-786bdcf-font-style);
	-webkit-text-decoration: var(--e-global-typography-786bdcf-text-decoration);
	text-decoration: var(--e-global-typography-786bdcf-text-decoration);
	letter-spacing: var(--e-global-typography-786bdcf-letter-spacing);
	word-spacing: var(--e-global-typography-786bdcf-word-spacing);
}

.elementor-kit-9 {
	--e-global-typography-text-letter-spacing: 0.5px;
	--e-global-typography-primary-letter-spacing: 0.5px;
	--e-global-typography-secondary-letter-spacing: 0.5px;
	--e-global-typography-accent-letter-spacing: 0.5px;
	--e-global-typography-621dbe1-letter-spacing: 0.5px;
	--e-global-typography-786bdcf-letter-spacing: 0.5px;
}


/****** COOKIE BANNER ******/

.cmplz-cookiebanner {
	.cmplz-buttons {
		.cmplz-btn {
			border-radius: 5em !important;
		}
	}
}


/****** COOKIE RICHTLINIE ******/

.cookie-richtlinie-eu {
	h1 {
		.mixin_typography_primary_xl() !important;
	}

	h2 {
		.mixin_typography_primary() !important;
	}

	h3 {
		.mixin_typography_secondary() !important;
	}

	h4, h5 {
		.mixin_typography_accent() !important;
	}

	p, ul, li {
		.mixin_typography_text() !important;
	}
}


/****** CF7 ******/

.wpcf7-form {
	max-width: 750px;

	* {
		.mixin_typography_text();
		a {
			text-decoration: underline !important;

			&:hover,
			&:focus {
				color: black;
			}
		}
	}

	label {
		.wpcf7-list-item {
			margin: 0;
		}
	}

	&[aria-label="Kontaktformular"] {

		// Flex-Container für Vorname und Nachname
		.flex-fields {
			/* display: flex;
			gap: 20px; */

			.wpcf7-not-valid-tip {
				display: block;
				margin-top: -20px;
				margin-bottom: 20px;
			}

			.wpcf7-form-control-wrap {
				/* display: contents; */

				input[type="text"] {
					/* flex: 1; */
					margin-bottom: 20px;
					border-radius: 500px;
				}
			}


		}

		// Standard-Formularstile
		input[type="email"],
		input[type="tel"] {
			margin-bottom: 20px;
			border-radius: 500px;
		}

		textarea {
			border-radius: 20px;
		}

		// Labels (visuell versteckt)
		.visually-hidden {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}

		// Checkboxes
		fieldset {
			margin-bottom: 20px;
			margin-bottom: 20px;
			padding: 15px;
			border: thin solid #666;
			border-radius: 20px;
			background: white;

			legend {
				margin-bottom: 8px;
				padding: 0 10px;
				color: black;
				border-radius: 10px;
			}

			.checkbox-label {
				display: inline-flex;
				align-items: center;
				gap: 5px;
				margin-right: 10px;

				input[type="checkbox"] {
					margin-right: 5px;
				}
			}
		}

		// DSGVO Checkbox
		.acceptance-label {
			display: block;
			margin: 15px 0;

			input[type="checkbox"] {
				margin-right: 5px;
			}
		}

		// Sende-Button
		.wpcf7-submit {
			transition: background-color 0.3s;
			border-radius: 500px;
			border: none;
			background-color: @color_dark_blue;
			color: white;
			.mixin_typography_accent();

			&:hover,
			&:focus {
				background-color: @color_light_blue;
			}
		}

		// Erfolg- und Fehlermeldungen
		.wpcf7-response-output {
			margin-top: 10px;
			padding: 10px;
			border-radius: 4px;

			&[aria-hidden="false"] {
				&.wpcf7-mail-sent-ok {
					background-color: #dff0d8;
					color: #3c763d;
					border: 1px solid #d6e9c6;
				}

				&.wpcf7-mail-sent-ng {
					background-color: #f2dede;
					color: #a94442;
					border: 1px solid #ebccd1;
				}
			}
		}
	}
}


/****** MAIN MENU ******/

body:not([data-elementor-device-mode='tablet'], [data-elementor-device-mode='mobile']) {
	.elementor-widget-navigation-menu .hfe-nav-menu-layout:not(.hfe-pointer__framed) .menu-item.parent a.hfe-menu-item:before, .elementor-widget-navigation-menu .hfe-nav-menu-layout:not(.hfe-pointer__framed) .menu-item.parent a.hfe-menu-item:after {
		background-color: @color_light_blue;
	}

	.elementor.elementor .e-con>.elementor-widget-navigation-menu {
		/* min-width: calc( 100% - 345px );
		max-width: 100%; */

		@calc_padding: calc(100vw / 128.125 );

		.hfe-nav-menu {
			//justify-content: space-between;
			flex-direction: row;
			flex-wrap: nowrap;

			&>.menu-item {
				padding: 0 @calc_padding;
				//padding: 0 20px;

				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;

				/* &:first-of-type {
					padding: 0 @calc_padding 0 0;
				}

				&:last-of-type {
					padding: 0 0 0 @calc_padding;
				} */

				.hfe-has-submenu-container {
					a {
						.sub-arrow {
							margin-left: 5px; //clamp this!
						}
					}
				}
			}
		}
	}
	
}


/****** MOBILE MENU ******/

body[data-elementor-device-mode='tablet'], body[data-elementor-device-mode='mobile'] {
	.offcanvas_menu_container {
		.offcanvas-menu {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 100%;
			width: 100%;
			//height: 100%;
			background: @color_light_blue;
			transition: all @transition-speed ease;
			z-index: 9998; // Unter dem Button
			overflow-y: auto;
			padding: 20px;

			&.active {
				left: 0;
				-webkit-animation: fadeIn @transition-speed ease;
				        animation: fadeIn @transition-speed ease;
			}

			.hfe-menu-toggle {
				display: none;
			}

			.sub-menu {
				visibility: visible !important;
				opacity: 1 !important;
				height: auto !important;
				position: relative !important;

				.menu-item {
					border: none !important;
				}
			}
		}

		.offcanvas-toggle, 
		.offcanvas-close {
			border: none;
			cursor: pointer;
			z-index: 10000; // Über dem Off-Canvas-Menü
			width: auto;
			height: auto;
			display: inline-block;
			background: @color_light_green;
			padding: 10px 20px 10px 40px;
			border-radius: 0 0 0 50px;

			svg {
				width: 40px;
				height: 40px;
				display: block;
				overflow: visible;

				line {
					fill: none;
					stroke: black;
					stroke-linecap: round;
					stroke-width: 3px;
					vector-effect: non-scaling-stroke;
					transition: all @transition-speed ease;
				}
			}
		}

		.offcanvas-close {
			background: @color_dark_blue;
			position: absolute;
			right: 0;
			top: 0;

			svg {
				line {
					stroke: white;
				}
			}
		}

		@-webkit-keyframes fadeIn {
			from { opacity: 0; }
			to { opacity: 1; }
		}

		@keyframes fadeIn {
			from { opacity: 0; }
			to { opacity: 1; }
		}
	}
}


/****** SVGs ******/

.julia_static_illustration {
	width: 100%;
	height: auto;
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}


/****** WEGGEFÄHRTEN LOGOS ******/

#weggefaehrten {
	img {
		-webkit-filter: grayscale(100%) brightness(85%) contrast(100%);
		        filter: grayscale(100%) brightness(85%) contrast(100%);
		transition: all @transition-speed;

		&:hover {
			-webkit-filter: none;
			        filter: none;
			opacity: 1;
		}
	}
}


/****** LANDING PAGES ******/

.julia_static_illustration {
	width: 100%;
	height: auto;
	overflow: hidden;

	path {
		stroke: white;
		fill: none;
		stroke-width: 4px;
		vector-effect: non-scaling-stroke;
	}
}


/****** SCROLL TOP ******/

#scrollToTop {
	width: 45px;
	height: 45px;
	font-size: 26px;
	background: @color_dark_blue;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: -200px;
	right: 50px;
	border-radius: 300px;
	transition: bottom @transition-speed, background-color @transition-speed;
	z-index: 10;

	&:hover {
		background: @color_light_blue;
	}
}

body[data-elementor-device-mode='mobile'] {
	#scrollToTop {
		right: 30px;
	}
}