/*
 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: 16px;
	}


	@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:#262222;
		--base-font-size: 18px;
		

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


	

body {				
font-family: 'ssp_r';	
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;
}







.usernav {
	background-color: #534e4e;
	color:white;
}

.usernav a {
	color:white;
	text-decoration: none;
	font-size: calc(var(--base-font-size)-0.1em);
}

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

header {box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; padding-bottom: 1em; position: relative; z-index: 999;}
header nav  ul > li  > a { font-size:1.4em; padding:1em 1.5em; text-decoration: none !important;}
header nav div > ul > li:last-child a { background-color: #c30017; border-radius: 5px; color: white !important; margin-left: 1em; padding: 1em 3em;}
header nav ul > li {position: relative;}
header nav div > ul > li:hover::after {position: absolute; content: ''; left: 10%; width: 80%; height: 10px; top: -35px; background-color: #c30017;}
header nav ul > li:last-child:hover::after {display: none;}
header nav {right: -5px; position: relative;}
#modal-1-content > ul > li > ul > li:hover{background-color: #c30017; transition: all 1s ease;}
#modal-1-content > ul > li > ul > li:hover a {color: white;}

.wp-block-navigation__submenu-container, .wp-block-navigation__submenu-container li {border-radius: 5px; overflow: hidden;}



h1 {color: #262222; font-size: 36px;}
h2 {color: #c30017; font-size: 26px;}
h3 {color: #262222; font-size: 22px; font-weight: bold;}
h4 {color: #c30017; font-size: 22px; font-weight: lighter;}



.hero {position: relative;}

.hero::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 75%;
	background-color: #bebbba;
	top: 0;
	left: 0;
	z-index: -1;
}

.hero img {
	border: 1px solid white; 
	border-radius: 3px; 
	overflow: hidden;
	height: 350px;
}

 .hero p a {
	color: white;
	text-transform: uppercase;
	font-size: 26px;
	margin-top: -3em;
	text-decoration: none;
	display: block;
}


.white h1 {margin-top: 0; color: #c30017; font-size: 26px; }
.white h2 {font-weight: bold; color: #262222; font-size: 36px}

.wp-block-buttons .wp-block-button .wp-block-button__link{
	border-radius: 5px;
	color: white;
	background-color:#c30017;
	text-transform: uppercase;
	padding: 15px 40px;
}

.wp-block-button__link:last-child:hover{
	color: white;
	background-color: #8f0011;
	transition: all 1s ease;
}


.grey-box {
	background-color: #eceaea;
	padding: 2em;
}

.grey-box h3{font-weight: bold;}
.grey-box p{font-weight: bold;}


/* Liste */

.checklist {padding:0;}
.checklist li { list-style: none; margin-bottom: 0.5em; position: relative; display: block; padding-left:3em; }

.checklist li::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	
	z-index:0;
	width:2em;
	text-align: center;
	content: '\f00c';
	color: #c30017;
	position: absolute;
	top:0;
	left:10px;
  }

  


  .bordered-headline {
	position: relative;
	top:-150px;
	background-color: #c30017;
	border-radius:5px;
	padding:1em 10em;
	z-index: 2;
	width: fit-content;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}
	
	.bordered-headline h2 {
		margin-bottom: 0;
		color:white;
	}
	
	
	.bordered-headline p {
	margin: 0;
	color:white;
	width: 100%;
	}

	.bordered-headline .wp-block-buttons .wp-block-button .wp-block-button__link{
		margin-top: -1em;
		background-color: #c30017;
	}

.bild {
	border: 1px solid white; 
	border-radius: 3px; 
}

.grey-light {
	background-color: #eceaea;
}

.grey-light h4 {color: #c30017; font-size: 22px; font-weight: lighter; margin-top: 0;}


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

.grey-light a{
	color: #262222;
	text-decoration: none;
}


.blank h3 {margin-top: 0;color: #c30017; font-size: 26px;}
.blank h2 {font-weight: bold; color: #262222; font-size: 36px;}


.red-box {
	background-color: #8f0011;
	padding: 2em;
	color: white;
}

.red-box h4{font-weight: bold; color: white !important; font-size: 22px;}
.red-box p{font-weight: bold;}
.red-box .checklist li { list-style: none; margin-bottom: 0.5em; position: relative; display: block; padding-left:3em; }

.red-box .checklist li::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	
	z-index:0;
	width:2em;
	text-align: center;
	content: '\f00c';
	color: white;
	position: absolute;
	top:0;
	left:10px;
  }

.grey-dark {
	background-color: #bebbba;
	border-top: #c30017 solid 8px;
	
}

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

.grey-gradient a{
	color: #262222;
	text-decoration: none;
}

.grey-gradient {

background: linear-gradient(135deg,  rgb(255, 255, 255) 0%,rgb(192, 192, 192) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border-top: #c30017 solid 8px;
color: black;
}

/*Treppen*/

.hero-treppen {position: relative; }

.hero-treppen::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 80%;
	background: rgb(190,187,186);
	background: linear-gradient(180deg, rgba(190,187,186,1) 0%, rgba(219,215,215,1) 30%, rgba(255,255,255,1) 100%); 
	top: 0;
	left: 0;
	z-index: -1;
}

.hero-treppen img {
	border: 1px solid white; 
	border-radius: 3px; 
	overflow: hidden;
	height: 350px;
	z-index: 1
}


.hero-treppen div p a {text-decoration: none; color: #c30017;}
.treppen div p a {text-decoration: none; color: #c30017;}
.treppen div, .hero-treppen div {position: relative; overflow-y: hidden;}
.treppen div  p, .hero-treppen div  p
	 {
		color: #c30017;
		text-transform: uppercase;
		font-size: 26px;
		bottom: 0;
		background-color: rgba(255,255,255,0.8);
		position: absolute;
		z-index: 1;
		padding:0.8em;
		width:100%;
		text-align: center;
		box-sizing: border-box;
		transition: all 1s ease;
		display: block;
	}


	.treppen div:hover > p , .hero-treppen div:hover > p {bottom: 3em;}


.treppen img {
	border: 1px solid #bebbba; 
	border-radius: 3px; 
	overflow: hidden;
	height: 350px;
	z-index: 1
}

/*
.treppen {position: relative; }

.treppen::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background: rgb(190,187,186);
	background: linear-gradient(0deg, rgba(190,187,186,1) 0%, rgba(219,215,215,1) 30%, rgba(255,255,255,1) 100%); 
	top: 0;
	left: 0;
	z-index: -1;
}


*/



.covertext h1 {
	color: black;
}

.covertext h2 {
	font-size: 24px;
	margin:0;
	color: #c30017;
}

.covertext {
	background-color: rgba(255,255,255,0.8);
	padding: 2em 5em;
	border-radius:5px;
	width: fit-content;

}

.redline {border-top: #c30017 solid 8px;}




footer {
	border-top: 1px solid #c30017;
	margin-Top: 0;
}



@media screen AND (max-width: 1400px) {
header nav ul > li > a {padding:1em; font-size:1.2rem;}


}



@media screen AND (max-width: 1200px) {
header nav ul > li > a {padding:1em; font-size:1.1rem;}
}


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


	.bordered-headline {padding:1em 2em;}


	
		#modal-1::after {
		background-image: url('https://test.seo-lausitz.de/koesler-treppen.de/wp-content/uploads/2025/04/GlasgelaenderR2-1.jpg');
		background-size: cover;
		background-position: center;
		width:100%;
		height:100%;
		content:'';
		z-index:-1;
		position: absolute;
		left:0;
		top:0;
		opacity:0.6;
		filter:brightness(0.3)
		

	}

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


	#modal-1-content a {
		color:white;
		font-size:1.4em !important;
	}

#modal-1-content ul li {align-items: center;}
#modal-1-content > ul > li > a {font-weight: bold; font-size:2em !important;}
header nav div > ul > li:last-child a {background-color: transparent; margin-left: 0;}
#modal-1-content > ul > li > ul {padding-top: 0;}
	

	


	#modal-1-content ul {align-items: center;}
	.wp-container-core-group-is-layout-10 {align-items: center;}



    .wp-block-navigation__container {
        display: none; /* Desktop-Menü ausblenden */
    }
    
     .wp-block-navigation__responsive-container-open {
		padding:1em;
        display: block !important; /* Mobiles Menü einblenden */
		transform: scale(2);
		
		

    }

}


@media screen AND (max-width: 900px) {
	.wp-block-image img {width:100%;}
.hero {padding:10px;}
.hero > div {gap:2px;}
.hero img {
  border: 0px solid white;
  border-radius: 3px;
  overflow: hidden;
  height: 350px;
}


.hero > .wp-block-columns > .wp-block-column {width:48%; flex-basis: 48% !important;}


}



@media screen AND (max-width: 780px) {
	footer p {text-align: center;}
	footer div {justify-content: center !important;}
	.pic_r {flex-direction: column-reverse;}
	.leaflet-map {min-height:300px;}


  .hero img {
    border: 0px solid white;
    border-radius: 3px;
    overflow: hidden;
    height: auto;
    width: 100%;
  }

	


	.row {display: block !important;}
.row div {width: 100% !important;}
.ds {display: block !important;}
.ds * {text-align: center;}
.cf_wrapper {width: fit-content !important;}
  
}




@media screen AND (max-width: 450px) {
	.covertext {padding: 2em 3em;}
	.wp-block-buttons .wp-block-button .wp-block-button__link {
  padding: 15px 20px;
}
	.usernav {font-size: 0.8em; justify-content: center;}

	.hero > .wp-block-columns > .wp-block-column {width:90%; flex-basis: 90% !important;}
	.hero img {
  border: 1px solid white;
  border-radius: 3px;
  overflow: hidden;
  
  width: 100%;
}
}