@charset "utf-8";
* { margin:0;  padding:0; border: 0px none; }
html { height: 100% }
body {
	height: 100%;
	font-family: Roboto, "Roboto Condensed";
	font-weight:400;
	font-size:1em;
	color: #544d83;
	background-color:#FFFFFF;
}

.wrapper {
	max-width: 960px;	
	margin: 0 auto;
	padding: 0.5rem;

	display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 0.5rem;

}

.wrapper > * {
  grid-column: col-start / span 12;
}

.content p { margin-bottom: 1rem; }
.content h3 { margin-bottom: 1rem; color: #449bff; }

.card_img {
	display: grid;
	grid-template-columns: 1fr 2fr;
	column-gap: 0.5rem;
  row-gap: 0.5rem;			
}

.mail { background-color: #449bff; }

a {text-decoration:none; }
h2 {font-size:1.4em; margin:2% 0; color:#449bff;}

/* kontakt header */ 
.kontakt_header {
	padding:10px 20px; 
	margin-bottom:20px; 
	/*border:solid thick #2E92CE;*/  
	font-size:1.2em; 
	color:#ffffff; 
	font-weight:bold; 
	text-align:right;
}
.kontakt_header a { 
	display:inline-block; 
	padding:0 5px; 
	margin:8px 0; 
	background-color:#2E92CE; 
	color:#ffffff; 
	font-size:30px; 
	font-weight:900; 
	text-decoration:none;
}
/* kontakt form */ 
aside .kontakt_form {float:left; width: 96%; padding: 2%; color:#ffffff;}
article .kontakt_form {float:left; width: 96%; padding: 2%; color:#000000;}
.kontakt_table {width: 100%;}
.labels {font-size:0.8em;}
.felds {width:100%; padding:5px 0;}
.feldErr {color:#FA7777; font-size:0.8em;}

aside .kontakt_form input[type="text"] {	margin: 0px; /* zwischen zellen */	/*border: thin solid #544d83;*/	width: 100%;}
aside .kontakt_form textarea {	margin: 0px; /* zwischen zellen */	/*border: thin solid #544d83;*/	width: 100%;}

article .kontakt_form input[type="text"] {	margin: 0px; /* zwischen zellen */	border: thin solid #544d83;	width: 100%;}
article .kontakt_form textarea {	margin: 0px; /* zwischen zellen */	border: thin solid #544d83;	width: 100%;}

.kontakt_form input[type="radio"]{
	margin-right:20px;
	margin-bottom:10px;
}
.kontakt_form input[type="submit"]{
	margin:10px;
	border: none;
	color: #FFFFFF;
	padding: 4px 10px;
	background-color:#606060;
} /* end kontakt form */ 



/* === |-1-| ================= from 1px  ===================================== */

.topleiste {	height:auto; 	width:100%; }

h1{
	font-size: 2em;
	text-align: center;
	color: #FFFFFF;
	font-weight: 900;
	background-color: #8bc34a;
}

.motto { float:left; width: 100%; margin-bottom: 1rem; text-align: center; font-size: 1rem; font-weight: bold; color: #8bc34a;}
.call {text-align:center; font-weight:900; color:#606060; float:left; width:100%}
.call p {float:left; width:100%; font-size:20px;}
.tel {float:left; width:100%;  padding:4px 0; background-color:#8bc34a;}
.tel a {font-size:2em; color:#FFFFFF;}
.help { float:left; font-size:2rem; width:100%; margin-top:0;  height:auto;}

ul.services {
	float:left;
	width: 100%;
	list-style-type:disclosure-closed;
	list-style-position: inside;
	font-weight:bold; 
	color: #606060;
	background-color: #e6e6e6;
}
/* ⊙ ⊡ ★ ☆ ✶ • ○ ■ ◆ ◇ ◉ ● ▷  ⃣  ⚿ 🔑 🔐 ⚒ 👷 ⚙ */
/*
	ul.services li::before {
	content:"●"; 
	display: inline-block; 
	width: 2rem;
	margin-left: -1rem;
	color: #e949a9;	
	font-size:1.4em;
}
*/
.banner img.ban_img { 
	float:left; 
	max-width:100%;
}	
.banner img.off_on { 
	display: none;
}	

.banner img.wappen { 
	position: absolute;
	right: 20px;
	top: 76px;
	width: 50px;	
} 

.advt1, .advt2 {background-color: #FFFFFF;}

.mail img.advt_img { 
	float:left; 
	max-width:100%;
}	
.advt1 img.advt_img { 
	float:left; 
	max-width:100%;
}	
.advt2 img.advt_img { 
	float:left; 
	max-width:100%;
}	
.advt3 img.advt_img { 
	float:left; 
	max-width:100%;
}	


.separator { clear:both; height:10px;}

.footerbar {
    width: 100%;
    height: 30px;
    text-align: center;
    background-color: #8bc34a;
    color: #ffffff;
    font-size: 0.8em;
}
.footerbar ul.frow1 {
    display: inline-block;
    padding-left: 0px;
    margin-top: 6px;
}
.footerbar li.fnavi {
    display: inline-block;
}
.footerbar a {
    color: inherit;
}

/* === |-2-| ================= from 481px  ===================================== */


@media only screen and (min-width: 481px) {

.banner img.ban_img { 
	max-width:50%;
}	
.banner img.off_on { 
	display: block;
}	

ul.services {font-size:1.4em;}

}
	

/* === |-3-| ================= from 577px  ===================================== */

@media only screen and (min-width: 577px) {

.mail {
	grid-column: col-start 1 / span 6;
	grid-row: 4 / span 2;
}
.covid {
	grid-column: col-start 1 / span 6;
	grid-row: 4 / span 2;
}
.advt1 {
	grid-column: col-start 7 / span 6;
	grid-row: 4;
}
.advt2 {
	grid-column: col-start 7 / span 6;
	grid-row: 5;
}
.advt3 {
	grid-column: col-start 7 / span 6;
	grid-row: 6;
}

}


/* === |-3-| ================= from 761px  ===================================== */

@media only screen and (min-width: 761px) {
	
.content {
	grid-column: col-start 1 / span 8;
	grid-row: 3 / span 5;
}
.mail {
	grid-column: col-start 9 / span 4;
	grid-row: 3;
}
.covid {
	grid-column: col-start 9 / span 4;
	grid-row: 3;
}
.advt1 {
	grid-column: col-start 9 / span 4;
	grid-row: 4;
}
.advt2 {
	grid-column: col-start 9 / span 4;
	grid-row: 5;
}
.advt3 {
	grid-column: col-start 9 / span 4;
	grid-row: 6;
}


h1 { font-size:4em; }

.banner img.wappen { 
	right: 30;
	top: 72;
	width: 100px;	
} 

.motto { font-size: 2rem; }
	
ul.services { font-size:1.6em; }

} /* min-width: 1001 */