/*
 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:#242424;
		--base-font-size: 18px;
		

   }
	
	html {
		max-width: 100vw;
		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;
}


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


/* Header */

.usernav {
	padding:10px;
	background-color: #2E4F6E;
}

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



.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 {
	width: 100%;
	top:0;
	z-index:999;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	overflow: visible;
	border-bottom: #2E4F6E solid 2px;
}


nav a {
	font-size: calc(var(--base-font-size) + 0.4em);
	color: #2E4F6E !important;
	font-family: 'os';
}

nav {
	color: #2E4F6E !important;
}
nav ul li a {position: relative;}
nav ul li a::after {width:0%; bottom:0px; height:2px; background-color: white; left:50%; position: absolute; content:''; transition: all 1s ease;}
nav ul li a:hover {text-decoration: none;}
nav ul li a:hover::after {width:100%; bottom:0px; height:2px; background-color: #2E4F6E; left:0; position: absolute; content:'';}

nav a:last-child {
	margin-right: 2em;
}

.logo p {
	color: #2E4F6E;
	font-size: calc(var(--base-font-size) + 0.6em);
	font-family: 'os';
	font-weight: bold;
}

.logo p:nth-child(1) {
	margin-bottom: -1em;
}


/* Startseite */


h2 {color: #2E4F6E; font-size: calc(var(--base-font-size) + 1em) !important; font-weight: bold;}
h3 {color: #4285c4; font-size: calc(var(--base-font-size) + 0.5em) !important;}


.hero h1{
	color: #2E4F6E;
	font-size: calc(var(--base-font-size) + 2em) !important;
}

.hero p{
	color: #2E4F6E;
	font-size: calc(var(--base-font-size) + 0.5em) !important;
}

.wp-block-button__link  {
	color: white;
	background-color: #2E4F6E;
	border-radius: 5px;


}

a.wp-block-button__link:hover{
	color: white;
	background-color:#4285c4;
	transition: all 1s ease;
}


.whitebox {
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	height: 200px;
	width: auto;
	background-color: #ffffff;
}

.whitebox h2 {color: #2E4F6E; font-size: calc(var(--base-font-size) + 0.5em) !important; font-weight: bold;}

.whitebox a {text-decoration: none; color: #2E4F6E;}


.boxen {
	top: -4em;
	z-index:2;
}

li {
	margin-bottom: 1em;
}

.checklist li {
	list-style: none;
	display: block;
	position: relative;

}

.checklist li::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c";
	color: #4285c4;
	position: absolute;
	left: -35px;
}

.screwlist li {
	list-style: none;
	display: block;
	position: relative;

}

.screwlist li::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f7d9";
	color: #4285c4;
	position: absolute;
	left: -35px;
}

.grey1 {
	background: #E6E6E6;
background: linear-gradient(170deg, rgba(230, 230, 230, 1) 0%, rgba(255, 255, 255, 1) 64%);
}

.grey2 {
background: #E6E6E6;
background: linear-gradient(357deg, rgba(230, 230, 230, 0.95) 0%, rgba(255, 255, 255, 0.95) 64%);
color: #000000;
}

.grey2 h2 {color: #2E4F6E;}
.grey2 h3 {color: #4285c4;}


table tr td:first-child {
  width: 70%;
}

table tr td:nth-child(2) {
  width: 30%;
}





.blue-block {
	position: relative;
	color: #ffffff;
	max-width: 100vw;
	box-sizing: border-box;
}

.blue-block::after {
	position: absolute;
	width: 100vw;
	max-width: 100vw;
	height: 70%;
	top:15%;
	background-color: #4285c4;
	z-index: -1;

	content: '';
	left: 0;
	box-sizing: border-box;
}

.blue-block .tel {font-size: calc(var(--base-font-size) + 0.4em) !important;}
.blue-block .mail {font-size: calc(var(--base-font-size) + 0.4em) !important;}

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

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

.white-headline {color: #ffffff;}


.wp-block-column {box-sizing: border-box !important;}

.blue-block > div {max-width: 1200px;}


/* Footer */

footer {
	background-color: #2E4F6E;
	color: #ffffff;
	top: 0;
	margin-top: 0 !important;

}

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

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

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

footer h3 {
		font-size: calc(var(--base-font-size) + 0.2em);
		color: #ffffff !important;
		margin-bottom:0;
}

footer p {padding:0.5em 0em; margin:0 !important;}
footer .wp-block-group {margin:0;}
footer .legal {font-size: 12px !important;}
footer h3 {position: relative;}
footer h3::after {height:1px; width:70%; left:15%; background-color: white; position: absolute; content:''; bottom:-5px;}


@media screen AND (max-width: 1400px) {
.wp-block-navigation__container {gap:0;}
body {font-size:16px;}

}



@media screen AND (max-width: 1400px) {
nav ul li a.wp-block-navigation-item__content {font-size: 22px; margin:0 0.5em;}
nav ul {margin-right: 2em !important}
.blue-block .mail, .blue-block .tel { font-size: calc(var(--base-font-size) + 0.2em) !important;}
h2 {
  color: #2E4F6E;
  font-size: calc(var(--base-font-size) + 0.6em) !important;
  font-weight: bold;
}


.whitebox h2 {
  color: #2E4F6E;
  font-size: calc(var(--base-font-size) + 0.3em) !important;
  font-weight: bold;
}

.wp-block-cover__background {background: linear-gradient(90deg,rgba(255,255,255, 0.85) 50%,rgba(255,255,255, 0.85) 100%) !important}

}



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

header img {width:100px !important;}
.logo p {font-size: calc(var(--base-font-size) + 0.2em);}
.wp-block-cover__background {background: linear-gradient(90deg,rgba(255,255,255, 0.85) 50%,rgba(255,255,255, 0.85) 100%) !important}
.wp-block-table.is-style-stripes td {font-size:12px;}

.whitebox {padding:10px !important;}

.whitebox h2 {
  color: #2E4F6E;
  font-size: calc(var(--base-font-size) + 0.1em) !important;
  font-weight: bold;
}

.whitebox p {
font-size: 14px;
margin-top:5px !important;
margin-bottom: 5px !important;
}

}

@media screen AND (max-width: 932px) {
	header img {width:130px !important;}
.usernav {font-size: 14px !important;}
header > div > div {justify-content: center !important;}
header > div > div:nth-child(2){margin-top:1em !important}
.blue-block .adress_group { font-size: calc(var(--base-font-size) + 0.2em) !important; width:50%; min-width: fit-content; margin: 1em auto; text-align: left;}
.blue-block > div {display: block !important; padding: 1em; text-align: center;}
.blue-block > div > div {padding: 1em !important;}
.blue-block::after {height:100%; top:0;}



}

@media screen AND (max-width: 781px) {
.cf_wrapper { max-width: 90%;}
.wp-block-column.whitebox {flex-basis: 50% !important; max-width: 50%; margin: auto;}
}





@media screen AND (max-width: 600px) {
.usernav {display: flex !important; flex-direction: column; gap:5px !important}
.wp-block-cover__inner-container h1{text-align: center !important;}
.wp-block-cover__inner-container p  {text-align: center !important; font-size:18px !important}
.wp-block-cover__inner-container .wp-block-buttons  {justify-content: center; }
 .blue-block .mail, .blue-block .tel { font-size: 16px !important;}
 .footer_adress {flex-direction: column; gap:5px !important;}



 
.wp-block-column.whitebox {flex-basis: 80% !important; max-width: 80%; margin: auto;}

.whitebox h2 {
  color: #2E4F6E;
  font-size: calc(var(--base-font-size) + 0.1em) !important;
  font-weight: bold;
}

.whitebox p {
font-size: 14px;
margin-top:5px !important;
margin-bottom: 5px !important;
}



}



@media screen AND (max-width: 450px) {
	.cf_wrapper { max-width: 98% !important;}
header img {width:90px !important;}
.wp-block-cover {padding:10px !important; box-sizing: border-box;}
.footer_adress {font-size: 14px !important;}

.wp-block-columns {padding: 10px !important}
.blue-block .mail, .blue-block .tel { font-size: 14px !important;}
}



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

.usernav {display: none !important;}
 .footer_adress {flex-direction: column; gap:5px !important; font-size: 12px !important;}
 .blue-block .mail, .blue-block .tel {font-size: 12px !important;}
}