/****** VARIABLES ******/
@animation_base: 1.75s;
@animation_short: calc( @animation_base / 2 );
@animation_very_short: calc( @animation_short / 2 );
@animation_long: calc( @animation_base + @animation_short );



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

html, body {
}

html {
	
	&.ready {
		//background: #e6e6e6;
		//background: black;
		background: black;
		body {
			clip-path: none;
		}
	}
}

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: black;
	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 ******/

@font-face {
	font-family: 'BebasNeue';
	src:	url( 'fonts/BebasNeue.otf' ) format( 'opentype' );
}

@font-face {
	font-family: 'Raleway-Regular';
	src:	url( 'fonts/Raleway-Regular.ttf' ) format( 'truetype' );
}

.elementor-kit-5 {
	--e-global-typography-primary-font-family: "BebasNeue", Arial, sans-serif !important; //Primary
	--e-global-typography-secondary-font-family: "BebasNeue"; //Secondary
	--e-global-typography-text-font-family: "Raleway-Regular", Arial, sans-serif !important; //Text
	--e-global-typography-accent-font-family: "BebasNeue", Arial, sans-serif !important; //Accent
	--e-global-typography-ed140ad-font-family: "BebasNeue", Arial, sans-serif !important; //Big Headline
	--e-global-typography-5dd81ab-font-family: "BebasNeue", Arial, sans-serif !important; //Small Headline
	--e-global-typography-defe2ad-font-family: "Raleway-Regular", Arial, sans-serif !important; //Menu Link
}

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


/****** 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_5dd81ab() {
	font-family: var(--e-global-typography-5dd81ab-font-family ), Sans-serif;
    font-size: var(--e-global-typography-5dd81ab-font-size );
    font-weight: var(--e-global-typography-5dd81ab-font-weight );
    text-transform: var(--e-global-typography-5dd81ab-text-transform );
    font-style: var(--e-global-typography-5dd81ab-font-style );
    -webkit-text-decoration: var(--e-global-typography-5dd81ab-text-decoration );
            text-decoration: var(--e-global-typography-5dd81ab-text-decoration );
    letter-spacing: var(--e-global-typography-5dd81ab-letter-spacing );
    word-spacing: var(--e-global-typography-5dd81ab-word-spacing );
}



/****** INTRO ANIMATION ******/

#page {
	display: flex;
    flex-wrap: wrap;
	max-height: 100vh;
	overflow: hidden;

	#masthead {
		width: 100%;
		transition: width @animation_base;
		min-height: 100vh;
		overflow: hidden;
	}

	#content {
    	width: 0%;
		transition: width @animation_base, opacity 3s;
		opacity: 0;
	}

	#colophon {
    	width: 100%;
	}


	#logo_type {
		min-width: 650px;
		max-width: 650px;
		opacity: 1;
		transition: opacity @animation_short;
	}
	
	#logo_dackel {
		min-width: 650px;
		max-width: 650px;
		transition: top @animation_base, left @animation_base, transform @animation_base,  opacity @animation_short;
		opacity: 1;

		left: 50%;
		transform: translate(-50%, 0%);
	}


	/* &.move_dackel_ {
		max-height: none;

		
	
		#colophon {
			width: 100%;
		}

		#logo_dackel {
			top: -50vh;
    		transform: translateY(30%);
		}


		&.push_out {
			#masthead {
				width: 0%;
			}
	
			#content {
				width: 100%;
			}

			#logo_dackel {
				transition: none;
				top: 0%;
				left: 50%;
				transform: translate(-50%, -20%);
				position: fixed;
				//transform: translateY(6.25%) scale( 0.25 );
				filter: invert(0);
			}


			&.shrink_dackel {
				#logo_dackel {
					transition: top @animation_short, left @animation_short, transform @animation_short, min-width @animation_short, max-width @animation_short, filter @animation_short;
					left: 0%;
					//transform: scale( 0.25 );
					//transform: translate( -25px, -10px );
					transform: translate(0);
					transform: translate(-20%, -20%);
					min-width: 150px;
					max-width: 150px;
					//filter: invert(1);
				}
			}
		}
	}

	&.push_out_ {
		max-height: none;

		#masthead {
			width: 0%;
		}

		#content {
			width: 100%;
		}

		#logo_type {
			opacity: 0;
		}

		#logo_dackel {
			position: fixed;
			transition: top @animation_short, left @animation_short, transform @animation_short, min-width @animation_short, max-width @animation_short, filter @animation_short;
			top: -15%;
			left: 4%;
			img {
				transition: top @animation_short, left @animation_short, transform @animation_short, min-width @animation_short, max-width @animation_short, filter @animation_short;
				transform: scale(0.25)
			}
		}
	} */

	#logo_dackel_small {
		position: fixed;
		top: 100vh;
		opacity: 0;
		transition: top @animation_short,  opacity @animation_short;
		transition-delay: @animation_short;
	}

	&.push_out {
		max-height: none;

		#masthead {
			width: 0%;
		}

		#content {
			width: 100%;
			opacity: 1;
		}

		#logo_type {
			opacity: 0;
		}

		#logo_dackel {
			opacity: 0;
		}

		#logo_dackel_small {
			top: 20px;
			opacity: 1;
		}

		.cta {
			transform: translateX(-23.65px);
		}
	}
}

[data-elementor-device-mode="tablet"], [data-elementor-device-mode="mobile"] {
	#page {
		#logo_dackel_small {
			.elementor-widget-container {
				transform: none !important;
			}
		}
	}

	#colophon {
		.elementor-widget-html {
			text-align: center;
		}
	}
}

[data-elementor-device-mode="mobile"] {
	#page {
		/* display: flex;
		flex-wrap: wrap;
		max-height: 100vh;
		overflow: hidden;
	
		#masthead {
			width: 100%;
			transition: width @animation_base;
			min-height: 100vh;
			overflow: hidden;
		}
	
		#content {
			width: 0%;
			transition: width @animation_base, opacity 3s;
			opacity: 0;
		}
	
		#colophon {
			width: 100%;
		} */
	
	
		#logo_type {
			min-width: 350px;
			max-width: calc( 100vw - 40px );
			opacity: 1;
			transition: opacity @animation_short;
		}
		
		#logo_dackel {
			min-width: 350px;
			max-width: calc( 100vw - 40px );
			transition: top @animation_base, left @animation_base, transform @animation_base,  opacity @animation_short;
			opacity: 1;
			left: 50%;
			transform: translate(-50%, 0%);
		}
	
		#logo_dackel_small {
			position: fixed;
			top: 100vh;
			opacity: 0;
			transition: top @animation_short,  opacity @animation_short;
			transition-delay: @animation_short;
		}
	
		&.push_out {
			max-height: none;
	
			#masthead {
				width: 0%;
			}
	
			#content {
				width: 100%;
				opacity: 1;
			}
	
			#logo_type {
				opacity: 0;
			}
	
			#logo_dackel {
				opacity: 0;
			}
	
			#logo_dackel_small {
				top: 0px;
				opacity: 1;
			}
	
			.cta {
				transform: translateX(0);
				left: 0;
				bottom: 0;
				top: unset;

				&>.elementor-widget-container {
					--e-transform-rotateZ: 0deg !important;

					.elementor-button-link {
						width: 100%;
					}
				}
			}
		}
	}
}


/****** SMOOTH SCROLLING ******/

#luxy_wrapper {
	width: 100%;
}


/****** CTA BUTTON ******/

.cta {
	transform: translateX(54.65px);
	transition: transform @animation_short;

	pointer-events: none;

	a {
		pointer-events: all;
	}
}


/****** FORMS ******/

.elementor-mark-required .elementor-field-label:after {
	color: currentColor;
	padding-left: 0;
	//margin-left: -12px;
}


/****** FOOTER ******/

[data-elementor-device-mode="tablet"], [data-elementor-device-mode="mobile"] {
	#footer_logo {
		text-align: center !important;

		img {
			max-width: 300px !important;
		}

		margin-bottom: 60px;
	}
}


/****** DATENSCHUTZ ******/

#datenschutz {
	h2, h3, h4, h5 {
		color: var( --e-global-color-primary );
	}

	h2 {
		font-family: var(--e-global-typography-secondary-font-family ), Sans-serif;
		font-size: 40px;
		font-weight: var(--e-global-typography-secondary-font-weight );
		line-height: var(--e-global-typography-secondary-line-height );
		letter-spacing: var(--e-global-typography-secondary-letter-spacing );
		margin-top: 60px;
	}

	h3 {
		font-family: var(--e-global-typography-secondary-font-family ), Sans-serif;
		font-size: 30px;
		font-weight: var(--e-global-typography-secondary-font-weight );
		line-height: var(--e-global-typography-secondary-line-height );
		letter-spacing: var(--e-global-typography-secondary-letter-spacing );
		margin-top: 60px;
	}

	h4, h5 {
		font-family: var(--e-global-typography-secondary-font-family ), Sans-serif;
		font-weight: var(--e-global-typography-secondary-font-weight );
		line-height: var(--e-global-typography-secondary-line-height );
		letter-spacing: var(--e-global-typography-secondary-letter-spacing );
	}

	h4 {
		margin-top: 50px;
	}

	h5 {
		margin-top: 30px;
		margin-bottom: 0px;
	}

	ul {
		margin-bottom: .9rem;
	}
}


/****** MODAL ******/

dialog.offcanvas-modal {
    position: fixed;
	overflow: visible;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    z-index: 9999;

	.modal-panel {
		position: relative;
		background: black;
		width: 100vw;
		height: 100vh;
		transform: translateX(100vw);
		transition: transform 0.3s ease-in-out;
		overflow-y: auto;
	}
	
	.modal-panel.active {
		transform: translateX(0vw);
	}
	
	.modal-content {
		padding: 2rem;
	}
	
	.close-button {
		position: sticky;
		z-index: 9999;
		top: 1rem;
		left: calc(100vw - 70px - 1rem);
		cursor: pointer;
		border-radius: 50%;
		width: 70px;
		height: 70px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var( --e-global-color-primary );
		border: none;
		color: black;
		.mixin_typography_secondary() !important;
		font-size: 30px !important;
		text-transform: uppercase !important;
		line-height: 0 !important;
	}
}

.offcanvas-modal::backdrop {
    background: black;
}



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

.wpcf7-form {
	label {
		.mixin_typography_text();
		color: white;
		display: block;
	}

	input:not([type="checkbox"]), textarea:not([type="checkbox"]) {
		border-radius: 5px;
		width: 100%;
		margin-block: 5px 30px;
	}

	[type="checkbox"], [type="checkbox"]+span {
		display: inline-block;
		margin-block: 10px 30px;
	}

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

	[type=button], [type=submit], button {
		.mixin_typography_accent();
	}

	.wpcf7-list-item {
		margin-left: 40px;

		&.first {
			margin-left: 0;
		}
	}

	.wpcf7-not-valid-tip {
		color: var( --e-global-color-primary );
		display: block;
		margin-top: -20px;
		margin-bottom: 20px;
	}

	.wpcf7-response-output {
		.mixin_typography_text();
		color: white;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}


/****** FOOTER ******/

#colophon {
	.modal_trigger {
		display: block;
		color: white;
		.mixin_typography_5dd81ab();
		line-height: 1.2em;

		&:hover {
			color: var( --e-global-color-primary );
		}
	}
}