/* Import */
@import "animate.css";
@import "artikel.css";
@import "boxen.css";
@import "footer.css";
@import "form.css";
@import "nav.css";
@import "slider.css";
@import "slider_referenzen.css";
@import "slider_zeitungsartikel.css";
@import "spalten.css";
@import "stellenanzeige.css";
@import "toggle.css";
@import "verwaltung.css";
@import "fonts.css";

/*
Nachtblau:	#001134;
Dunkelblau:	#102d69;
Hellblau:	#87A6C2;
Hellgrau:	#e3e6e9;
*/

:root {
	--nightblue: #001134;
	--darkblue: #102d69;
	--lightblue: #87A6C2;
	--lightgray: #e3e6e9;
}

html{margin: 0; padding: 0;}
body {position: relative; display: block; float: left; width: 100%; margin: 0; padding: 0; min-width: 320px; font-family: 'Montserrat', sans-serif; color: black; background-color: white; overflow-x: hidden;}
div.overflow_wrapper {overflow-x: hidden;}

::-webkit-scrollbar {background-color: var(--lightgray);}
::-webkit-scrollbar-thumb {background-color: var(--lightblue); border-radius: 10px; border: 2px solid white;}

/* Headlines (h1 -> slider.css */
h2 {color: black; font-size: 30px; font-weight: 400; text-align: center; line-height: 1.5; text-transform: uppercase;}
h3 {color: var(--darkblue); font-size: 25px; font-weight: 400; line-height: 1.2; text-transform: uppercase; letter-spacing: 1px; text-align: center;}
.content-impressum h3, .content-datenschutz h3 {text-align: left;}
h4 {padding: 10px 0; color: white; background-color: var(--darkblue); font-size: 18px; line-height: 1.75; letter-spacing: 1px; text-align: center;}

p, li {font-size: 18px; line-height: 1.75; letter-spacing: 1px;}
ul {padding-top: 10px; padding-bottom: 10px; background-color: var(--lightgray);}
a {color: var(--darkblue); text-decoration: none; font-weight: bold;}
a:hover {color: var(--lightblue);}
svg {fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;}

table {width: 100%; font-size: 18px; line-height: 1.75; letter-spacing: 1px;}
th {padding: 10px 0; color: white; background-color: var(--darkblue);}
td {width: 300px;}
/*
table, th, td {border-collapse: collapse;}
th, td {border: 1px dotted black; border-collapse: collapse;}
tr:nth-child(even) {background-color: #D6EEEE;}
*/

main, article, section, aside, footer, div {position: relative; display: block; float: left; width: 100%; height: auto;}
article {background-color: white;}

section {width: 80%; padding: 0 10%; margin: 30px 0;}
section img {width: 70%; margin: 0 15%;}
section img.text_width {width: 100%; margin: 0;}

div.fritsche_standort {width: 45%; height: 100px; padding: 15px 2.5% 5px 2.5%; font-size: 25px; line-height: 40px; background-color: var(--lightblue); color: var(--darkblue); text-align: center;}
span.fritsche_standort_form {font-size: 20px; color: white;}

/* QR-Code Startseite */
/*
div.fritsche_standort {width: 40%; height: 100px; font-size: 25px; line-height: 40px; background-color: var(--lightblue); color: var(--darkblue); text-align: center;}
div.fritsche_standort:nth-child(1), div.fritsche_standort:nth-child(3) {padding: 15px 2.5% 5px 2.5%;}
div.fritsche_standort:nth-child(2) {width: 10%; padding: 10px 0% 10px 0%; background-color: #CCDAE5; transition: background-color 0.3s ease, opacity 0.3s ease;}
div.fritsche_standort:nth-child(4) {display: none; background-color: #CCDAE5;}
div.fritsche_standort:nth-child(2):hover {background-color: white; opacity: 0.8;}
span.fritsche_standort_form {font-size: 20px; color: white;}
*/

div.maps {width: 100%;}
iframe {width: 100%; height: 400px;}

span.tel:nth-child(1) {display: block;}
span.tel:nth-child(2) {display: none;}

/* Media Queries */
@media only screen and (max-width: 1100px){
	div.fritsche_standort {font-size: 18px;}
	span.fritsche_standort_form {font-size: 14px;}
}

@media only screen and (max-width: 850px){
	section {width: 90%; padding: 0 5%; margin: 15px 0;}
	span.tel:nth-child(1) {display: none;}
	span.tel:nth-child(2) {display: block;}
}

@media only screen and (max-width: 750px){
	section img {width: 100%; margin: 0;}
	div.fritsche_standort {width: 90%; padding: 15px 5% 5px 5%;}
	span.trennung {display: inline;}
}

@media only screen and (max-width: 580px){
	span.trennung_boxen {display: inline;}
}

@media only screen and (max-width: 350px){
	h2 {font-size: 20px;}
	p, li {font-size: 15px;}
	div.fritsche_standort {font-size: 18px;}
	span.fritsche_standort_form {font-size: 14px;}
}

/* QR-Code Startseite Media Queries */
/*
@media only screen and (max-width: 1100px){
	div.fritsche_standort {width: 35%; font-size: 18px;}
	div.fritsche_standort:nth-child(2) {width: 20%; padding: 10px 0% 10px 0%; background-color: #CCDAE5;}
}

@media only screen and (max-width: 850px){
	div.fritsche_standort {width: 45%;}
	div.fritsche_standort:nth-child(1), div.fritsche_standort:nth-child(3) {padding: 15px 2.5% 5px 2.5%;}
	div.fritsche_standort:nth-child(2) {display: none;}
	div.fritsche_standort:nth-child(4) {display: block; width: 100%;}
}

@media only screen and (max-width: 750px){
	div.fritsche_standort {width: 90%;}
	div.fritsche_standort:nth-child(1), div.fritsche_standort:nth-child(3) {padding: 15px 5% 5px 5%;}
}

@media only screen and (max-width: 350px){
	div.fritsche_standort {font-size: 18px;}
	span.fritsche_standort_form {font-size: 14px;}
}
/*