/*
 Theme Name:   2023 child
 Description:  Child Theme
 Author:       
 Template:     twentytwentythree
 Version:      1.0
 Text Domain:  2023-child2
*/


/* ----------------------------------
   Viewport & Root Settings
---------------------------------- */

@viewport {
	width: device-width;
	zoom: 1;
}

:root {
	--base-font-size: 16px;
}


/* ----------------------------------
   Fonts
---------------------------------- */

@font-face {
	font-family: 'ssp_r';
	src: url('fonts/SourceSansPro-Regular.ttf');
	font-display: swap;
}

@font-face {
	font-family: 'ssp_b';
	src: url('fonts/SourceSansPro-Bold.ttf');
	font-display: swap;
}

@font-face {
	font-family: 'ssp_l';
	src: url('fonts/SourceSansPro-Light.ttf');
	font-display: swap;
}

@font-face {
	font-family: 'os';
	src: url('fonts/OpenSans-VariableFont_wdth,wght.ttf');
	font-display: swap;
}


/* ----------------------------------
   Dark Mode
---------------------------------- */

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #000000;
		--text-color: #ffffff;
	}
}


/* ----------------------------------
   Global Styles
---------------------------------- */

html {
	max-width: 100%;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	padding: 0 !important;
	font-family: var(--wp--preset--font-family--source-sans-3);
	overflow-x: hidden;
}

body > .wp-site-blocks {
	padding: 0;
}

a {
	color: white !important;
}

*:focus {
	outline: none;
}


/* ----------------------------------
   Header / Navigation
---------------------------------- */

header {
	position: fixed;
	width: 100vw;
	background-color: black;
	padding: 1em 0 0 1em;
	box-sizing: border-box;
	z-index: 100;
	max-width: 100vw; 
}

header > div {
	max-width: 1300px;
	margin: auto;
}

header img {
	position: absolute;
	top: 0;
	left: 0;
}

header nav {
	border-bottom: 1px solid white;
	position: relative;
}

nav a:hover {
	text-decoration: none;
}

nav ul {
	gap: 0 !important;
}

nav ul li {
	border-bottom: 3px solid rgba(192, 192, 192, 0);
	transition: all 1s ease;
}

nav ul li a {
	padding: 0.2em 1em;
}

nav ul li:hover,
nav > ul > li.current-menu-item {
	border-bottom: 3px solid rgb(192, 192, 192);
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: black;
	border: 1px solid white;
}


.cert figure, .cert figure img {max-width:150px !important;}

/* ----------------------------------
   Headings
---------------------------------- */

h1 {
	font-size: 2.5em;
	margin-bottom: 0;
	padding-bottom: 1em;
}

h2 {
	font-size: 2.1em;
	
  padding-bottom: 0.5em;
  padding-top: 0.5em;
	box-sizing: border-box;
}

h3 {
	font-size: 1.3em;
}

h4 {
	font-size: 1.5em;
}

h1 em,
h2 em {
	font-family: var(--wp--preset--font-family--playfair-display);
}


/* ----------------------------------
   Layout Utilities & Sections
---------------------------------- */

.mh80 {
	min-height: 60vh;
}

.wp-block-columns.bordered {
	display: flex;
	align-items: stretch !important;
}


/* Layout mit Rändern */
.bright, .bbottom, .bleft, .bbottom66, .btop {
	position: relative;
	background-color: #000000;
	padding-top: 5em;
	margin-top: 1px;
}

.bright > div {
	margin-block-start: 0rem !important;
}

.bright::after,
.bleft::after,
.bbottom::after,
.bbottom66::after {
	position: absolute;
	content: '';
	top: 0;
	z-index: -1;
	background-color: #ffffff;
}

.bright::after {
	width: calc(100% + 1px);
	right: -1px;
	height: 100%;
}

.bleft::after {
	width: calc(100% + 1px);
	left: -1px;
	height: 100%;
}

.bbottom::after {
	width: calc(100% + 1px);
	bottom: -1px;
	height: calc(100% + 1px);
}

.bbottom66::after {
	width: calc(80% + 1px);
	bottom: -1px;
	height: calc(100% + 1px);
}

.btop {
	border-top: 1px solid white;
}


/* Cover mit linker Linie */
.cover_border-left {
	position: relative;
	background-color: #000000;
	padding-top: 5em;
}

.cover_border-left:after {
	position: absolute;
	border-left: 1px solid #ffffff;
	content: '';
	height: 200px;
	width: 1200px;
	top: 0;
	left: calc(50% - 600px);
	z-index: 0;
}

.cover_border-left .wp-block-cover {
	z-index: 10;
}


/* Cover mit rechter Linie */
.cover_border-right {
	position: relative;
	background-color: #000000;
	padding-top: 5em;
}

.cover_border-right:after {
	position: absolute;
	border-right: 1px solid #ffffff;
	content: '';
	height: 200px;
	width: 1200px;
	top: 0;
	right: calc(50% - 600px);
	z-index: 0;
}

.cover_border-right .wp-block-cover {
	z-index: 10;
}


/* ----------------------------------
   Produkte / Bilder
---------------------------------- */

.products > div {
	position: relative;
}

.products .wp-block-image {
	position: relative;
	display: block;
	border: 1px solid white;
	border-radius: 5px;
}

.products > div .wp-block-image::after {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	content: '';
	background-color: rgba(255, 255, 255, 0.0);
	z-index: 1;
	pointer-events: none;
	transition: all 1s ease;
}

.products > div:hover .wp-block-image::after {
	background-color: rgba(255, 255, 255, 0.1);
}

.products h3 a {
	color: white;
	text-decoration: none;
	font-size: 0.6em;
	text-align: center;
	font-weight: bold;
	position: relative;
	width: 100%;
	z-index: 2;
}


/* ----------------------------------
   Tabs (Ultimate Addons Blocks)
---------------------------------- */

.uagb-tabs__icon-position-left {
	text-decoration: none;
	padding: 1.5em;
}

.uagb-tabs__body-wrap {
	border: 0 !important;
	padding: 2em;
}

.uagb-block-8f6cd1f8 {
	padding-top: 3em;
}

.uagb-block-8f6cd1f8 .uagb-tabs__panel .uagb-tab {
	text-align: left;
}

/* Icons vor Tab-Links */
.uagb-tabs__panel li:nth-child(1) a::before {content: "\f085";}
.uagb-tabs__panel li:nth-child(2) a::before {content: "\f4c6";}
.uagb-tabs__panel li:nth-child(3) a::before {content: "\f53b";}
.uagb-tabs__panel li:nth-child(4) a::before {content: "\f545";}
.uagb-tabs__panel li:nth-child(5) a::before {content: "\f0d1";}
.uagb-tabs__panel li:nth-child(6) a::before {content: "\f807";}
.uagb-tabs__panel li:nth-child(7) a::before {content: "\f53b";}

.uagb-tabs__panel li a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 1em;
}


/* ----------------------------------
   Buttons / CTA
---------------------------------- */

.arrow_buttons {
	margin-top: 0;

}

.arrow_buttons a {
	color: white;
	text-decoration: none;
	background-color: #6B8E23;
}

.arrow_buttons a::before {
	content: '→';
	margin-right: 0.5em;
}

.arrow_buttons a:hover {
	color: white;
	text-decoration: none;
	background-color: #5A7A1F;
	transition: all 1s ease;
}


/* CTA-Streifen */
.cta, .cta_left, .cta_center {
	position: absolute;
	bottom: -10px;
	background-color: black;
	height: 30px;
	box-sizing: border-box;
	z-index: 10;
}

.cta { right: 3em; }
.cta_left { left: 3em; }
.cta_center { left: 40%; width: fit-content; }

.cta a, .cta_left a, .cta_center a {
	border: 1px solid rgba(192, 192, 192, 0.1);
	border-left-color: rgb(192, 192, 192);
	border-right-color: rgb(192, 192, 192);
	color: white;
	padding: 10px 1em;
	transition: all 1s ease;
	background-color:#6B8E23;
}

.cta a:hover, .cta_left a:hover {
	border-top: 1px solid rgb(192, 192, 192);
	border-bottom: 1px solid rgb(192, 192, 192);
	background-color: #5A7A1F;
	transition: all 1s ease;
}



.assets ul{
	position: relative;
	 list-style: none;
}

.assets ul li {
	padding: 1em;
}

.assets ul li::before {
	position: absolute;
	content:'';
	font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 2em;
	color: #b5d160;
	margin-left:-2em;
}

.assets li:nth-child(1)::before {content: "\f164"}
.assets li:nth-child(2)::before {content: "\f132"}
.assets li:nth-child(3)::before {content: "\f004"}
.assets li:nth-child(4)::before {content: "\f7d9"}

.assets strong {font-size: 1.2em;}








/* ----------------------------------
   WooCommerce
---------------------------------- */

.quantity, .single_add_to_cart_button,
.wc-tabs {
	display: none !important;
}

.wapf-swatch--image {
	padding: 10px;
}

.wapf-swatch--image.wapf-checked {
	border-color: white !important;
}

.wapf-swatch-label {
	font-size: 0.8em;
}

.wapf-field-container {
	margin-bottom: 2em;
	padding: 1em;
	border-bottom: 1px solid rgb(150, 150, 150);
}

.groessen {
	display: flex;
}

.groessen > div {
	flex-basis: 50%;
}

.groessen > div input,
.rahmenfarbe > div input {
	background-color: black;
	color: white;
	border: 0;
	padding: 10px;
	border-bottom: 1px solid white;
}

.groessen > div input[type=number] {
	-moz-appearance: textfield;
}

.groessen > div input[type=number]::-webkit-inner-spin-button,
.groessen > div input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.groessen > div input[type=number]:focus {
	border: 2px solid white;
}

.groessen .wapf-field-container,
.wapf-field-container:last-child {
	border-bottom: 0;
}

.woocommerce-Tabs-panel {
	font-size: 1em;
}

.wp-block-woocommerce-product-image-gallery {
	position: sticky !important;
	top: 1em !important;
}

.wp-block-column {
	position: relative !important;
}

.product {
	margin-top: 0;
}

.product h1 {
	padding-top: 2em;
}

.woocommerce-page main {
	max-width: 1200px;
}


/* ----------------------------------
   Popups
---------------------------------- */

.popup-container {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9999;
}

.popup-content {
	position: absolute;
	top: 60%; left: 50%;
	transform: translate(-50%, -50%);
	background: black;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	width: 90%;
	max-width: 800px;
}

.close-popup {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 24px;
	cursor: pointer;
}

#open-inquiry-popup {
	margin: auto;
	border: 1px solid white;
	width: fit-content;
	padding: 0.5em 1em;
	border-radius: 5px;
}


/* ----------------------------------
   Footer
---------------------------------- */

footer {
	width: 100%;
	max-width: 1300px;
	padding: 1em;
	box-sizing: border-box;
	margin: auto;
}

footer a {
	text-decoration: none;
}


/* ----------------------------------
   Social Bar
---------------------------------- */

#social_bar {
	position: fixed;
	top: 25%;
	right: -60px !important;
	width: 50px;
	padding: 0.5em 0;
	border-radius: 20px 0 0 20px;
	background-color: rgb(30, 30, 30);
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	z-index: 999;
	transition: all 1s ease;
}

#social_bar div {
	padding: 0.7em;
	font-size: 1.5em;
	text-align: center;
}

#social_bar div a {
	color: white;
}


/* ----------------------------------
   Media Queries (optional: leer)
---------------------------------- */

@media screen and (max-width: 890px) {
	.wp-block-columns  {
		flex-wrap: wrap !important;
	  }

	  .entry-content > .wp-block-group:first-child {padding-top:6em;} 


	  .wp-block-columns  > div {
		flex-basis: 100% !important;
	  }


	  footer .wp-block-columns > div {
		flex-basis: unset !important; /* oder ein anderer gewünschter Wert */
	}

	  .products > div {flex-basis: 45% !important;}

	 h1, h2, h3, p {text-align: center; max-width: 95% !important; width: 95%; margin-left: auto !important;}
	 .arrow_buttons {margin: 2em auto 1em auto !important; width: fit-content; }
	 .entry-content .wp-block-columns:first-child {flex-direction: column-reverse;}
	 .wp-block-image img {width: 100%; max-height: 400px;  object-fit: cover;}

	 .wp-block-column {padding-top: 2em !important;}

	 .uagb-tabs__wrap.uagb-tabs__vstyle6-tablet ul.uagb-tabs__panel {min-width: fit-content;}
	 .woocommerce .wp-block-woocommerce-product-image-gallery {max-width: 90%; margin: auto;}
	 .woocommerce .wp-block-woocommerce-product-image-gallery img {width: 100%; max-height: 400px; object-fit: cover;}
	 .product h1 {padding: 0.5em;}


	 .wp-block-post .wp-block-columns {flex-direction: column !important;}
}






@media screen and (max-width: 800px) {
	
	.haken2 li {margin-left:1em !important; margin-bottom:1em;}
	
	/* Mobile Anpassungen */

	.wp-block-navigation__container {
        display: none; /* Desktop-Menü ausblenden */
    }
    
     .wp-block-navigation__responsive-container-open {
		
        display: block !important; /* Mobiles Menü einblenden */
		
		

    }


	.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: 10px;
		right: 20px;
		
			}
		
			.wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg {
				width:50px;
				height: 40px;
				fill: white;
		
			}
		
		
			.wp-block-navigation {
				width: 100%;
			}
		

			#modal-1 {max-width: 100vw;
				box-sizing: border-box;}



				#modal-1 {padding: 0 !important; max-width: 100vw;}
	#modal-1::after {
		background-image: url('https://loft-tueren.net/wp-content/uploads/2025/03/2418-3345-max-1480x2048.jpg');
		background-size: cover;
		background-position: center;
		width:100%;
		height:100%;
		content:'';
		z-index:-2;
		position: absolute;
		left:0;
		top:0;
		opacity:1;
		filter: grayscale(1) brightness(0.4);

	}

	#modal-1-content {width:100%;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex-direction: column;
	}

	nav ul li a {font-size: 2em !important; color:white !important;}
	nav ul li ul li a {font-size: 1.5em !important; color:white !important;}
	nav ul li ul {padding-top: 1em !important;}

	


	#modal-1-content ul {align-items: center;}

	#modal-1-content ul li {align-items: center; margin-bottom: 1.5em;}

}



@media (max-width: 781px) {


	.wp-block-columns.products {
		display: flex; flex-wrap: auto !important;
	}

	.wp-block-columns.products  > .wp-block-column {
		flex-basis: 50% !important;
		width: 46%;
		max-width: 46%;
	}

	footer  .wp-block-columns > div:nth-child(1) {display: none;}
	footer  .wp-block-columns > div:nth-child(2) {display: none;}
	footer  .wp-block-columns {flex-wrap: nowrap !important;}
  }



@media (max-width: 781px) {
.process li{margin-left:auto !important; width:90% !important;

	}
}
	
  @media screen and (max-width: 475px) {

.row {display: block !important;}
.row div, .row label {width: 100% !important; margin:auto !important;}
  }

@media screen and (max-width: 475px) {


	#inquiry-popup { overflow-y: scroll;}


	.wp-block-columns.products  > .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
		max-width: 100%;
	}


h1 {font-size: 2em; padding-bottom: 0.2em;}
h2 {font-size: 1.5em; padding-bottom: 0.2em;}

}













/* Hero-Bild animieren */
.lp_cover .wp-block-cover__image-background {
	width:120%;
	left:-20%;
	animation: slideImage 90s linear infinite;
}



@keyframes slideImage {
	0% {
	  left: -20%;
	}
	50% {
	  left: 0;
	}
	100% {
	  left: -20%;
	}
  }





/* Schritte */
.slide { margin: auto !important; min-width:100%; padding:0 !important;}
.slide .slide-content{padding:2rem 5rem;background-color:rgba(255,255,255,0.2); box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px; width: 60%; margin: auto !important;}
.slide img {max-height:400px; object-fit:cover;}
.slider-wrapper .btn {
position: absolute;
  top: 45%;
  left: 10px;
  transform: translateY(-50%);
  background: #6B8E23;
  border: none;
  padding: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  aspect-ratio: 1 / 1;
  font-weight: bold;
}



.slider-wrapper .btn.prev {left:0; right:unset;}
.slider-wrapper .btn.next {right:0; left:unset}