/*
 Theme Name:   wsb 2025
 Description:  wsb 2025 Theme
 Author:       WSB Werbeagentur
 Author URI:   https://wsb-werbeagentur.de/
 Template:     hello-elementor
 Version:      1.0
 Text Domain:  wsb-2025
*/


/*----------- Variablen -----------*/
:root {
	--kachel-background-color: #fff;
	--kachel-font-color: #2C3E4A;
}
	
/* Buttons Darkmode + Kontakt */
#darkToggle {
	position: fixed;
  	top: 9rem;
  	right: 0;
  	z-index: 9;
}
#contact {
	position: fixed;
  	top: 5rem;
  	right: 0;
  	z-index: 9;	
}
/* Button/Links unterstreichen */
.elementor-widget-button a:hover {
	text-decoration: underline !important;
}
/*----------- Kontaktformular -----------*/
.gform-footer {
	justify-content: end !important;
}
#gform_submit_button_4 {
	color: #F30;
	background: #fff;
	border: none;
	box-shadow: none;
	font-size: 1.5rem;
	font-weight: 500;
	&::after {
		content: "->";
	}
}
#gform_wrapper_4 {
    display: flex !important;
}
#gform_fields_3 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr) .5fr repeat(2, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px; 
}
#field_3_4 {
	grid-area: 1 / 1 / 2 / 3;
}
#field_3_5 {
	grid-area: 2 / 1 / 3 / 3;
}
#field_3_10 {
	grid-area: 3 / 1 / 4 / 2; 
	border: none;
}
#field_3_11 {
	grid-area: 3 / 2 / 4 / 3;
	border: none;
	margin-left: 4rem;
}
#field_3_3 {
	grid-area: 4 / 1 / 6 / 2;
}
#field_3_8 {
	grid-area: 4 / 2 / 5 / 3;
}
#field_3_12 {
	grid-area: 5 / 2 / 6 / 3;
}
h3 {
	font-size: 1.5rem !important;
	color: var( --e-global-color-text ) !important;
	font-weight: 700 !important;
}
#field_3_8, #field_3_12 {
	margin-left: 2rem;
	padding-left: 2rem;
	border-left: 1px solid #000;
}
.gfield_label {
	color: var( --e-global-color-text ) !important;
}
input[type=text], input[type=email] {
	border: none !important;
	border-bottom: 1px solid #D4D4D4 !important;
	box-shadow: none !important;
	background: #F8F9FA !important;
}
button {
	background: var( --e-global-color-6ccd37e ) !important;
	color: var( --e-global-color-accent ) !important; 
	box-shadow: none !important;
	font-size: 32px !important;
	img {
		padding: 4px !important;
		width: 90% !important;
		height: 90% !important;
	}
}
textarea, select {
	background: #F8F9FA !important;
}

@media (max-width: 767px) {
	#field_3_4 {
		grid-area: 1 / 1 / 2 / 3;
	}
	#field_3_5 {
		grid-area: 2 / 1 / 3 / 3;
	}
	#field_3_10 {
		grid-area: 3 / 1 / 4 / 3; 
		border: none;
	}
	#field_3_3 {
		grid-area: 4 / 1 / 6 / 3;
	}
	#field_3_11 {
		grid-area: 7 / 1 / 8 / 3;
		margin-top: 2rem;
		margin-left: 0;
	}
	#field_3_8 {
		grid-area: 9 / 1 / 10 / 3;
	}
	#field_3_12 {
		grid-area: 11 / 1 / 12 / 3;
	}
	#field_3_8, #field_3_12 {
		margin-left: 0;
		padding-left: 0;
		border-left: none;
	}
	#gform_submit_button_3 {
		margin-bottom: 1rem; 
	}
}
/*----------- Videokacheln -----------*/
.videos .e-con-inner {
	grid-template-rows: auto !important;
	position: relative;
}
		.kachel-wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 18rem;
			border-radius: 8px;
			background: var( --kachel-background-color );
			transition: background-color 0.5s cubic-bezier(.4,0,.2,1);
			box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
			-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
			overflow: hidden; 
		}
		.kachel-background-sqr {
			position: absolute;
			width: 200px;
			height: 125px;
			border: 1px solid var( --kachel-font-color );
			transition: border-color 0.5s cubic-bezier(.4,0,.2,1)
		}
		.kachel-text {
			display: flex;
			align-items: center;
			background: var( --kachel-background-color );
			position: relative;
			right: 50px;
			transition: transform 0.5s cubic-bezier(.4,0,.2,1), background-color 0.5s cubic-bezier(.4,0,.2,1);
			@media ( width <= 470px ) {
				right: 15px;
				h2 {
					font-size: 36px;
				}
			}
			h2 {
				color: var( --kachel-font-color );
				margin: 0;
				padding: 0;
				font-size: 45px;
				font-weight: 800;
				transition: color 0.5s cubic-bezier(.4,0,.2,1);
			}
			svg {
				font-size: 24px;
				color: var( --e-global-color-accent );
				margin-left: 10px;
				transition: margin-left 0.5s cubic-bezier(.4,0,.2,1), transform 0.5s cubic-bezier(.4,0,.2,1), color 0.5s cubic-bezier(.4,0,.2,1);;
			}		
		}
		@media (hover: hover) {
			.kachel-wrapper:hover {
				background-color: var( --e-global-color-accent );
				cursor: pointer;
				.kachel-background-sqr {
					border-color: #fff;
				}
				.kachel-text {
					transform: translateX(-40px);
					background-color: var( --e-global-color-accent );
					@media ( width <= 540px ) {
						transform: translateX(-10px);
					}
				}
				h2 {
					color: #fff;
				}
				svg {
					margin-left: 30px;
					transform: scale(2);
					color: #fff;
					@media ( width <= 470px ) {
						transform: scale(1.25);
					}
				}
			}
		}
/* Videos */
.vid-website,
.vid-content,
.vid-campaign,
.vid-branding {
    position: absolute;
    top: 50% ;
    left: calc(50% - 0px);
    transform: translate(-50%, -50%) !important;
    background: var( --e-global-color-6ccd37e);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 9999;
    transition: opacity .4s cubic-bezier(.4,0,.2,1), visibility .4s linear .4s;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
	/* hier ansetzen für weißen Rand bei Videos
	 * Elementor wieder auf Standard setzen: Vdeo->Breite->auto
	 * */
	max-width: 1140px !important;
	@media ( width > 1420px ) {
		left: 50%;		
	}
	@media ( width <= 767px ) {
		position: fixed;
		top: 50%;
		left: 50%;		
	}
}

.vid-website.show,
.vid-content.show,
.vid-campaign.show,
.vid-branding.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 1.5s cubic-bezier(.4,0,.2,1), visibility 1.5s;
}

.vid-website video,
.vid-content video,
.vid-campaign video,
.vid-branding video {
    width: 100%;
    max-width: 1140px;   /* Passe an deine Website-Breite an */
    height: auto;
    max-height: 100vh;
    display: block;
    margin: 0;
    box-sizing: border-box;
}
/*Scrollen verhindern*/
.noscroll {
	overflow: hidden;
}
/*----------- Test video neu -----------*/
@media screen and (prefers-reduced-motion: no-preference) {
	.vid1, .vid3 {
		position: relative;
		transform: translateX(-120vw); /* nach links außerhalb */
	}
	.vid2, .vid4 {
		position: relative;
		transform: translateX(120vw);  /* nach rechts außerhalb */
	}
}
/*----------- Videokacheln Ende -----------*/

/*----------- Blog -----------*/

.beitrag-content {
	h2, h3 {
		font-size: 2rem;
		margin-top: 3rem;
		margin-bottom: 1rem;
		
	}
	h4 {
		color: #ff3300;
		font-size: 1.125rem;
		font-weight: 800;
		margin-top: 3rem;
		margin-bottom: 1rem;
	}
	a {
		color: #FF3300;
		text-decoration: underline;
		:hover {
			color: #FF3300;
		}
		:visited {
			color: #FF3300;
		}
	}
	p {
		margin: 0;
	}
	ul, ol {
		margin: 2rem 0;
	}
	figure.is-type-video {
		margin: 4rem 0;
	}
	figure.wp-block-pullquote{
		background: #fff;
		font-size: 1.125rem;
		padding: 2rem;
		margin: 3rem 0;
		border-radius: 8px;
		text-align: left;
	}
}

/*----------- Footer-----------*/
footer p a {
	color: var( --e-global-color-accent );
	text-decoration: underline !important;
	&:hover {
		color: var( --e-global-color-accent );
	}
}

/*----------- Darkmode-----------*/
.kundenlogo-dark {
	display: none;
}
body.dark {
	--e-global-color-secondary: #fff;
	--e-global-color-text: #fff;
	--e-global-color-7230ff2: #2C3E4A;
	--e-global-color-6ccd37e: #2C3E4A;
	--kachel-background-color: #33505F;
	--kachel-font-color: #fff;
	#contact a {
		background-color: #FF3300;
	}
	#darkToggle a {
		background-color: #FF3300;
	}
	.kundenlogo-light {
		display: none;
	}
	figure.wp-block-pullquote {
		background: #000;
	}
	.kundenlogo-dark {
		display: flex;
	}
	#heroVideo {
		filter: brightness(1.125);
	}
}

html.dark body,
body.dark {
    background: #2C3E4A !important;
    color: #fff;
}


/*----------- Accessibility -----------*/
*:focus:not(:focus-visible) {
    outline: none
}

*:focus-visible {
    outline: 3px dashed var( --e-global-color-accent ) ;
    outline-offset: 2px;
} 

/*----------- Galerie mobile -----------*/
.impressionen .swiper-slide-image.swiper-lazy.swiper-lazy-loaded {
	height: 12rem;
	object-fit: cover;
}
/*Logoteppich*/ 
.elementor-image-gallery img {
	object-fit: cover;
}

/*Borlabs*/
.brlbs-cmpnt-container {
	button {
			background: #2563eb !important;
		color: #fff !important; 
		box-shadow: inherit !important;
		font-size: inherit !important;
		width: inherit !important;
	}
}