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

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


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


	@font-face {
		font-family: 'ssp_r';
		src: url('fonts/SourceSansPro-Regular.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}
	
	
	
	@font-face {
		font-family: 'ssp_b';
		src: url('fonts/SourceSansPro-Bold.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}
	
	
	@font-face {
		font-family: 'ssp_l';
		src: url('fonts/SourceSansPro-Light.ttf');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	
	}


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


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



	
	:root {
		
		--bg-color: #ffffff;
		--text-color:#242424;
		--base-font-size: 17px;
		

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


	

body {				
font-family: 'os';	
background: var(--bg-color);;
color:var(--text-color);
font-size: var(--base-font-size);
padding: 0 !important;
max-width: 100vw;
overflow-x: hidden;
}


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


:root :where(.wp-block-post-content a:where(:not(.wp-element-button))) {
  color: black; }

/* Usernav */

.usernav {
	padding:5px 2em;
	
background-color: rgba(255,255,255,0.9);
	font-size: 0.9em;
	display: none !important;
	
}

.usernav a {
	color:black;
	text-decoration: none;
}

.usernav .tel:before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f095";
	color: #F6BF0D;
	margin-right:1em;
}

.usernav .mail:before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0e0";
	color: #F6BF0D;
	margin-right:1em;
}

/* Navigation und Header */

nav {
	background-color: rgba(0,0,0,0.7);
	
	border-radius:10px;

}

#modal-1 {
	background-color: transparent !important;
}


nav a {
	font-size: calc(var(--base-font-size) + 0.1em);
	padding:8px 17px;
	
	color:rgb(224, 224, 224) !important;
	
	text-transform: uppercase;
	
  	border-radius: 2px;
  	transition: color 0.3s ease;
  	text-decoration: none;
	box-sizing: border-box;
	

}

nav a::after {
	height:70%;
	top:15%;
	width:1px;
	background-color: rgba(255, 255, 255, 0.3);
	content:'';
	position: absolute;
	right:-0.8em;
	
}

nav ul li svg {filter: brightness(100);}
nav ul li:last-child a::after, nav ul li:nth-last-child(2) a::after {display: none;}
#modal-1-content > ul > li:last-child a {background-color: #F6BF0D; color: #000000 !important; border-bottom-right-radius:10px; border-top-right-radius:10px; margin-left: -0.5em;}

nav > ul > li:last-child a:hover {background-color:#f7ce4a;}

nav a:hover {
  text-decoration: none;
  color:white !important;
}


#modal-1-content > ul > li > ul {
	background-color: rgba(0,0,0,0.9);
}

header {
	/* background-color: rgba(255, 255, 255, 0.7); */
	background-color: transparent !important;
	position: fixed;
	top: 0;
  	left: 0;
  	width: 100%;
  	z-index: 10;
	/* border-bottom: #F6BF0D solid 2px; */
	/* background: linear-gradient(180deg,rgb(0,0,0) 0%,rgba(0,0,0,0.6) 50%,rgba(255,255,255,0) 95%,rgba(255,255,255,0) 100%); */
}

.logo {
	position: absolute;
	top: -2em;
	left: 3em;
	max-width: 150px;
	background-color: rgba(255, 255, 255, 1);
	padding: 50px 1em 2em 1em;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	transition: all 1s ease;
	width: 200px; left:3em;
	
	/*
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	*/
}


/* Cover */

.hero .wp-block-cover__inner-container h1{color: #FFF !important;  font-size: 2.5em !important;}

.hero .cover-subheadline {
	color: #F6BF0D;
	
	font-size: 1.3em;
	margin-bottom: -1em;
}

.hero .wp-block-cover__inner-container {color: #FFF !important; background-color: #00000069; border-radius: 0; position: relative; z-index:1;}
.hero .wp-block-cover__inner-container::after {position: absolute; left:0; top:0; transform: rotate(-2deg); background-color: #00000069; border-radius: 0; content:''; width:100%; height:100%; z-index:-1; border:1px solid #F6BF0D}

.hero .wp-block-button__link  {
	color: black;
	background-color:#F6BF0D;
	border:#F6BF0D solid 2px;
	border-radius: 5px;
	font-weight: bold;

}

.hero .wp-block-button__link:hover{
	color: black;
	border:#F6BF0D solid 2px;
	background-color: rgba(255, 255, 255, 0.8);
	transition: all 1s ease;
	font-weight: bold;}



h2 {font-size: 2.5em; color: #494949; position: relative; width: fit-content;}
h2::after {height:2px; background-color: #F6BF0D; width:130%; left:-15%; position: absolute; bottom:-2px; content:'';}
h3 {font-size: 1.5em; color: #494949;}

.subheadline {color: #4F7A2C; margin-top:5px; font-size: 1.1em;}


.grey-tint {
	background-color: #EEEEEE;
}


.small-cover p {
	color:white;
	font-size: 1.7em;
	padding: 1em;
}


.small-cover .wp-block-cover__inner-container {color: #FFF !important; background-color: #00000069; border-radius: 0; position: relative; z-index:1; width:50%;}
.small-cover .wp-block-cover__inner-container::after {position: absolute; left:0; top:0; transform: rotate(-1.5deg); background-color: #00000069; border-radius: 0; content:''; width:100%; height:100%; z-index:-1; border:1px solid #F6BF0D}



.arrow-right {list-style: none; padding: 0;}
.arrow-right li {
	border: solid 1px #F6BF0D;
	margin: 1em;
	padding: 1em;
	background-color: rgba(246, 191, 13, 0.2);
}




/* yellow-gradient */

.yellow_gradient {
	box-shadow: rgba(14, 30, 37, 0.06) 0px 2px 4px 0px, rgba(14, 30, 37, 0.2) 0px 2px 16px 0px;
	background: linear-gradient(135deg,rgba(255,191,0,0.8) 0%,rgba(255,255,0,0.8) 100%);
	background: #ffd54d;
	position: relative;
	z-index:1;
}

.yellow_gradient h2 {width: auto;}

.yellow_gradient .subheadline {font-size: 0.9em; margin-top:20px;}
.yellow_gradient h2::after {
	background-color: rgb(105, 105, 105); width:70%; left:unset; right:0; height:1px; bottom:-10px;}


.yellow_gradient::after {
	position: absolute;
	content: '';
	width:100%;
	height:100%;
	right:0;
	bottom: 0;
	background-image: url('https://pflastergestaltung-eibau.de/wp-content/uploads/2025/12/pattern_trans.png');
	background-size: cover;
	opacity: 0.07;
	z-index:-1;
}


.yellow_gradient img {
	background-color: white;
	padding:5px;
}


/* yellow */


.yellow {
  display: flex;
  align-items: stretch;
  background-color: #F6BF0D;
}

.yellow > div {width: 100vw; }
.yellow > div  > div {position: relative; align-self: auto !important; }
.yellow > div  > div:nth-child(1) {overflow-y: hidden;}
.yellow > div  > div:nth-child(2) {max-width: 600px; padding-right:2em;}
.yellow > div > div .wp-block-cover {position: absolute; left:0; top:0; width:100%; height:100%; align-self:unset !important}



.yellow .wp-block-button a {
	background-color: #f6f6f6;
	color:black !important;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}



.yellow h2 {font-size:2em;}
.yellow h3 {font-size:1.5em; color:black;}
.yellow a {text-decoration: none; color: #242424;}

.lkw {font-size: 1.5em; color: #494949;}

/*Button */

.wp-block-button__link  {
	color: black;
	background-color:#F6BF0D;
	border:#F6BF0D solid 2px;
	border-radius: 5px;
	font-weight: bold;

}

.wp-block-button__link:hover{
	color: black;
	border:#F6BF0D solid 2px;
	background-color: rgba(255, 255, 255, 0.8);
	transition: all 1s ease;
	font-weight: bold;}


/* Cover-Links Startseite */

.link-pflaster {
	position: relative;
}

.link-pflaster .wp-block-cover__inner-container {position: unset;}

.link-pflaster a{
	position: absolute;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #EEEEEE;
	left:0;
	bottom:0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1em;
	box-sizing: border-box;
	transition: all 1s ease;
}

.link-pflaster a:hover{
background-color: rgba(246, 191, 13, 0.3);
}

.anruf {font-size: 1.1em; color: #494949; position: relative; width: fit-content;}


.partner_img img {max-width: 120px;}




/* Unterseiten */

.grey-box {
	background-color: rgba(244, 243, 236, 0.9);
	padding: 1.5em;
	border-bottom-left-radius: 10px;
  	border-bottom-right-radius: 10px;
	margin-top: -6em;
}


.grey-box ul {position: relative; list-style: none;}
.grey-box ul li {padding-left:0.5em; line-height: 2em;}

.grey-box li::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f101";
	color: #F6BF0D;
    position: absolute;
    list-style: none;
    left:15px;
}

.arrow-list ul {position: relative; list-style: none;}
.arrow-list ul li {padding-left:0.5em; line-height: 2em;}

.arrow-list li::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f101";
	color: #F6BF0D;
    position: absolute;
    list-style: none;
    left:15px;
}

.yellow-box {
	background-color: #F6BF0D;
	width: 50%;
	padding: 0.3em;
}


.border-box {
	border-bottom: #F6BF0D 3px solid;
}


.tel:before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f095";
	color: #F6BF0D;
	margin-right:1em;
}

.mail:before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0e0";
	color: #F6BF0D;
	margin-right:1em;
}

.mail a{text-decoration: none; color: #000000;}

.fax:before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1ac";
	color: #F6BF0D;
	margin-right:1em;
}

.pdf {position: relative;}
.pdf a{text-decoration: none; }
.pdf a::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1c1";
	color: #F6BF0D;
    position: absolute;
	left: -1.5em;
	font-size: 1.3em;
}






	/* Footer */

footer {
	background-color: #242424;
	color: #ffffff;
	border-top: #F6BF0D solid 2px;
	padding: 2em;
}

footer .mail {margin-top: 0;}

footer .tel:before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f095";
	color: #F6BF0D;
	margin-right:1em;
}

footer .mail:before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0e0";
	color: #F6BF0D;
	margin-right:1em;
}

footer h2 {
	font-size: 1.5em;
	color: #F6BF0D;
}

footer a{
	text-decoration: none;
	color: #ffffff !important;
}

footer ul {position: relative; list-style: none;}
footer ul li {padding-left:0.5em;}

footer li::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f061";
	color: #F6BF0D;
    position: absolute;
    list-style: none;
    left:15px;
}








/* STICKY unten rechts */

.sticky-contact-btn {
  position: fixed;
  bottom: 10px;
  right: 20px;
  background-color: #F6BF0D;
  color: #2c2c2c;
  border: none;
  border-radius: 50px;
  font-size: 1em;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 999;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
width: 72px;
height: 72px;
  transition: all 0.6s ease;
  padding:1em;
  box-sizing: border-box;
}

.sticky-contact-btn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  width: 1.5em;
   font-size: 2em;
  transition: margin 0.6s ease;
}

.sticky-contact-btn .label {
  opacity: 0;
  margin-left: 10px;
  transform: translateX(-10px);
  transition: all 0.6s ease;
  font-size: 18px;
}

/* Hover-Effekt */
.sticky-contact-btn:hover {
  width:230px;
  justify-content: flex-start;
  padding-right: 18px;
}

.sticky-contact-btn:hover .label {
  opacity: 1;
  transform: translateX(0);
  margin-left: 5px;
}

.sticky-contact-btn:hover .icon {
  margin-left: 10px;
}


@media screen AND (max-width: 1640px) {

.sticky-contact-btn {bottom:26%;}

}


@media screen AND (max-width: 1360px) {

.sticky-contact-btn {bottom:40px; right:10px;}
}







@media screen AND (max-width: 800px) {

.yellow > .splitpic {position: relative; justify-content: flex-end;}
.yellow> .splitpic > div:nth-child(1) {position: absolute; width:100%; height:100%; left:0; top:0;}
.yellow > .splitpic > div:nth-child(2) {background-color: #F6BF0D; flex-basis: 100% !important; padding: 4em 2em;}
}


@media screen AND (max-width: 780px) {

}

@media screen AND (max-width: 600px) {

}

/* SLIDER */

@media screen AND (max-width: 1100px) {
.wp-block-la-slider, .la-slider .slide {height: 500px !important}
.wp-block-la-slider .wp-block-la-slide {padding:10px !important;}
.wp-block-la-slider .dots .la-dot {height:10px; width:10px;}
}


@media screen AND (max-width: 700px) {
.wp-block-la-slider, .la-slider .slide {height: 400px !important}
.wp-block-la-slider .wp-block-la-slide {padding:10px !important;}
.wp-block-la-slider .dots .la-dot {height:10px; width:10px;}
}



@media screen AND (max-width: 500px) {
.wp-block-la-slider, .la-slider .slide {height: 300px !important}
.wp-block-la-slider .wp-block-la-slide {padding:10px !important;}
.wp-block-la-slider .dots .la-dot {height:10px; width:10px;}
.la-arrow svg {height: 25px; width: 25px;}
}




@media screen AND (max-width: 400px) {
.wp-block-la-slider, .la-slider .slide {height: 250px !important}
.wp-block-la-slider .wp-block-la-slide {padding:10px !important;}
.wp-block-la-slider .dots .la-dot {height:10px; width:10px;}
}



@media screen AND (max-width: 300px) {
.wp-block-la-slider, .la-slider .slide {height: 200px !important}
.wp-block-la-slider .wp-block-la-slide {padding:10px !important;}
.wp-block-la-slider .dots .la-dot {height:10px; width:10px;}
}


/* SLIDER END */









/* Mobile-Menü bereits ab 900px */
@media (max-width: 1100px) {
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container {
    display: block !important;
  }

  
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open {
    display: block !important;
  }

  /* Optional: Desktop-Menü ausblenden */
  .wp-block-navigation__container {
    flex-direction: column;
  }


	#modal-1::after {
		background-image: url('https://pflastergestaltung-eibau.de/wp-content/uploads/2025/12/eingangsbereich-natursteinpflaster.jpg');
		background-size: cover;
		background-position: center;
		width:100%;
		height:100%;
		content:'';
		z-index:-1;
		position: absolute;
		left:0;
		top:0;
		opacity:1;
		filter:brightness(0.2)
		

	}

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


	.wp-block-navigation__responsive-container-close svg {fill: white;}


#modal-1-content ul {justify-content: center !important; align-items: center;}
	#modal-1-content li {text-align: center; align-items: center !important; justify-content: center;}
	#modal-1-content a {color:#F6BF0D; !important; font-size: calc(var(--base-font-size) + 0.5em);}
#modal-1-content a::after {display: none;}
#modal-1-content > ul > li:last-child a {
  background-color: #F6BF0D;
  color: #000000 !important;
  
  border-radius: 10px !important;
  margin-left: -0em;
  padding:10px;
}


	.wp-block-navigation__responsive-container-open {padding:1em; background-color:#F6BF0D; ; border-radius:10px;}

}





@media (max-width: 1350px) {
nav a { font-size: 16px; padding:5px 10px;}
header > div > div {padding:10px !important;}
}


@media (max-width: 1350px) {#modal-1-content > ul {gap:10px;}}




@media (max-width: 750px) {

.sticky-contact-btn {
  position: fixed;
  bottom: 10px;
  right: 20px;
  background-color: #F6BF0D;
  color: #2c2c2c;
  border: none;
  border-radius: 50px;
  font-size: 1em;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 999;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  width: 4em;
  height: 4em;
  transition: all 0.6s ease;
  padding: 1em;
  box-sizing: border-box;
  text-align: center;
}


	main * {text-align: center !important;}
	.yellow_gradient h2::after {left:15%; right:15%;}
	.wp-block-buttons.is-content-justification-right, .wp-block-buttons {justify-content: center;}
	.wp-block-cover {padding:1em !important}
	.logo {width:100px;}
		
	
	
	footer p {width: fit-content;}
	footer .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {flex-basis: 70% !important; width: fit-content; flex-grow: 0;}
	footer .wp-block-columns:not(.is-not-stacked-on-mobile) {justify-content: center;}
	footer ul, footer ul li, footer p {width: fit-content; white-space: nowrap;}

}



@media (max-width: 675px) {
.hero .wp-block-cover__inner-container h1 {
  color: #FFF !important;
  font-size: 1.8em !important;
}

.hero .cover-subheadline {font-size: 1.1em;}
h2 {font-size: 1.8em !important;}
}


@media (max-width: 500px) {
	.logo {width:100px !important; left:0 !important; border-bottom-right-radius: 5px;}
	.logo {padding: 40px 10px 20px 10px !important}
	header > div > div {margin-top: 0px !important;}
	.link-pflaster {min-height: 250px !important;}
	footer ul, footer ul li, footer p {width: fit-content; white-space: nowrap;}


	footer {font-size: 0.9em;}

}


@media (max-width: 400px) {
main > .entry-content > .wp-block-cover {padding: 0 !important;}
h1 {font-size: 1.2em;}

body {font-size: 0.9em;}

}