/*
Theme Name: 2021-WBCE-LL-01
Description: Individuelles CMS-Theme
Version: 1.0
Author: Lutz Lerchenfeld
Layout by: ELLELL Design (c) 2021
*/

html {
top:0;
left:0;
scroll-behavior: smooth;
}

body {
margin:0px auto;
font-family: 'Open Sans', Arial, sans-serif;
font-style: normal;
font-size:15px; 
line-height: 180%;
color:#000;
top:0px;
background-color: #f9f9f9;
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y:scroll;
}

p { hyphens: auto; }

a {
color: #104a7c;
text-decoration: none;

}
a:link {
color: #104a7c;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: none;
}
/* Dieser Eintrag entfernt den gepunkteten Rahmen um Links beim anklicken. */
a:focus {outline: none;}

/* Funktion Weiterlesen */
#more {
display: none;
transition: all 1s ease;
}

strong {
font-family: 'montserrat', Arial, sans-serif; 
color: #515050;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}

.bildbreite-01{width: 100%;}
.bildbreite-02{width: 50%;}

.display-1{display: block;}
.display-2{display: none;}
.phone-diplay-none {display: block;} /* ?????????????? */

h1   { font-family: 'montserrat', Arial, sans-serif; font-size:28px; font-weight:400; text-align: left; line-height: 180%; color: #000;}
h2   { font-family: 'montserrat', Arial, sans-serif; font-size:28px; font-weight:400; text-align: left; line-height: 180%; color: #000;}
h3   { font-family: 'montserrat', Arial, sans-serif; font-size:24px; font-weight:400; text-align: left; line-height: 180%; color: #000;}
h4   { font-family: 'montserrat', Arial, sans-serif; font-size:18px; font-weight:400; text-align: left; line-height: 180%; color: #000;}
h5   { font-family: 'montserrat', Arial, sans-serif; font-size:16px; font-weight:400; text-align: left; line-height: 170%; color: #000;}
h6   { font-family: 'montserrat', Arial, sans-serif; font-size:14px; font-weight:400; text-align: left; line-height: 170%; color: #000;}

li {margin-left: -25px;}
hr {border: none; border-top: 1px dotted #000;}
td { vertical-align: top; }
tr { vertical-align: top; }

blockquote {
margin:20px auto;
background-color:#efeded;
color: #000;
width: auto;
padding: 30px 40px 30px 40px;
border-radius: 5px;
line-height: 170%;
min-height: 20px; 
}

.kontaktleiste-top {
position: absolute;
margin:0 auto 0px auto;
padding: 15px 10px 25px 12%;
width: 100%;
font-family: 'montserrat', Arial, sans-serif;
font-weight: 400;  
top: 0px;
letter-spacing: 1px;
/*text-transform: uppercase;*/
font-size: 16px;
line-height: 70%;
min-height: 20px; /* for IE6 */
background-color:rgba(38,126,176,0.5);
color: #fff;	
z-index: 10;
box-sizing: border-box;
}
.kontaktleiste-top a:link {color: #fff;}
.kontaktleiste-top a:hover {color: orange;}

.kontaktleiste-top h1 {
font-family: 'montserrat', Arial, sans-serif;
font-weight: 400;  
top: 0px;
color: #fff;
letter-spacing: 1px;
/*text-transform: uppercase;*/
font-size: 22px;
line-height: 100%;
}

.kontaktleiste-top h4 {
font-family: 'montserrat', Arial, sans-serif;
font-weight: 400;  
margin-top: -5px;
color: #fff;
letter-spacing: 1px;
/*text-transform: uppercase;*/
font-size: 18px;
line-height: 100%;
}

/* Menu */
div.sticky {
position: -webkit-sticky; /* Safari */
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
top: 0px;
}

.masterbox {
margin:0px auto;
width: 80%;
height: 100%; /* for IE6 */
z-index:4;
}

.jobs{
position: absolute;
font-family: 'open sans', Arial, sans-serif; 
font-weight:600;
font-size:12px;
font-weight:bold;
letter-spacing: 2px;
right: 0px;
color: #fff;
padding-top: 13px;
padding-right: 30px;
padding-bottom: 2px;
padding-left: 12px;
background-color: red;
text-align: center;
height: 40px;
width: 180px;
z-index: 30;
}
.jobs a{color:#fff;}
.jobs a:hover{color:yellow;}

#hauptfeld{
width: 100%;
color: #000;
margin:80px auto 0px auto;
padding:0px 0px 0px 0px;
top:0px;
box-sizing: border-box;
}

/* Logo */
#wrapper-a{
position: relative;
min-height: 30px;
width: 100%;
color: #000;
margin:0px auto 0px auto;
padding:0px 0px 0px 0px;
top:0px;
left: 0px;
box-sizing: border-box;
}

#wrapper-a p {padding: 0px 0px 0px 0px;}

#hero-bild-phone {display: none;}
#wrapper-a{display: block;}

/* Logo auf Mitte */
.flex { 
display: flex; 
position: relative;
justify-content: center; 
align-items: center;
width: 100%;
margin:0px auto;
}

#hero-bild {
width:100%;
min-height: 75px;
text-align: left;
margin:-20px auto 20px auto;
padding: 0px 0px 0px 0px;
background-color: #EFEDED;
text-align: center;
color: #fff;
top:0px;
left: 0px;
}
#hero-bild p {padding: 0px 0px 0px 0px;}

#hero-text{
position: absolute;
min-height: 30px;
padding: 40px 30px 10px 0px;
min-width: 10%;
color: #000;
top:100px;
left: 12%;
box-sizing: border-box;
}

#hero-text h1{
	font-family: 'montserrat', Arial, sans-serif;
	font-size: 34px;
	text-transform:uppercase;
	letter-spacing: 25px;
	color: #fff;
	line-height: 100%;
}

#hero-text h2{
	font-family: 'montserrat', Arial, sans-serif;
	font-size: 34px;
	text-transform:uppercase;
	letter-spacing: 25px;
	color: #fff;
	line-height: 100%;
}

.icon-slider{z-index:200;}

#headerbild-1 {
position: relative;
width:100%;
margin:-20px auto 0 auto;
min-height: 1px;
margin-bottom: 0px;
padding: 0px;
}

#hero-bild-phone {
background-color:#000000;
width:100%;
margin:0px auto;
height: auto;
padding: 0px;
min-height: 75px;
margin:-20px auto 10px auto;
padding: 0px 0px 0px 0px;
background-color: #EFEDED;
text-align: center;
color: #fff;
top:0px;
left: 0px;
}

#hero-bild-phone {display: none;}

#wrapper-b{
width:100%;
margin:0px auto;
}

/* 2-spaltig oben  66/33*/
#wrapper-02 {
width:100%;
margin:0px 0px 0px 0px;
padding: 0px;
}

.wrapper-66-links {
float: left; 
width: 66.6%; 
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
color: #000;
min-height: 10px;
padding: 0px 40px 20px 0px;
}

.wrapper-33-rechts {
float: left; 
width: 33.3%; 
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
color: #000;
min-height: 10px;
padding: 0px 0px 20px 40px;
}
/* Ende2-spaltig oben  66/33*/

/* 2-spaltig 50/50 */
.wrapper-01-fullsize {
width: 100%;
padding: 0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color:#fff;}

.wrapper-01 {
width: 80%;
margin:0px auto;
padding: 0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.wrapper-01-links {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 80px 60px 50px 0px;
float: left; 
width: 50%; 
margin-right: 0;
}

.wrapper-01-rechts{
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 80px 0px 50px 60px;
float: left; 
width: 50%; 
margin-left: 0;
}
/* 2-spaltig 50/50 */

/* 3-spaltig 33/33/33 */
.wrapper-02-links {
top: 50px;
position: relative;
padding: 0px 40px 20px 0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
width: 33.3%;
margin: 0;
}

.wrapper-02-mitte {
top: 50px;
position: relative;
width: 33.3%; 
padding: 0px 20px 20px 20px; 
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
}
.wrapper-02-rechts {
top: 50px;
width: 33.3%; 
padding: 0px 0px 20px 40px; 
margin: 0;
position: relative;
padding: 0px 0px 20px 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
}
/* Ende 3-spaltig 33/33/33 */

.wrapper-04-einspaltig{
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 10px 0px 20px 0px;
color: #000;
margin:0px auto;
min-height: 10px;
width: 100%;
}

/* FOOTER */
#wrapper-05 {
position: relative;
width:100%;
min-height: 350px;
margin:100px auto 0px auto;
background-color: #edeaea;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

#footer {
width:80%;
position: relative;
min-height: 160px;
font-size:13px; 
line-height: 150%;
margin:0px auto 0px auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 30px 0px 80px 0px;
color: #000;
background-color: #edeaea;
}

a #footer, .footer-mitte {
color: #000;  
letter-spacing: 2px;
font-family: 'montserrat', Arial, sans-serif; 
font-weight: 500;
text-transform: uppercase;
}

a:hover #footer, .footer-mitte {
color:#104a7c; 
letter-spacing: 2px;
font-family: 'montserrat', Arial, sans-serif; 
font-weight: 500;
text-transform: uppercase;
}

.footer-links {
position: relative;
min-height: 20px;
width: 33%; 
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 30px 40px 20px 0px;
float: left;
background-color: #edeaea;
}

.footer-mitte {
position: relative;
width: 33%; 
margin: 0;
min-height: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 30px 20px 20px 20px;
float: left;
padding-bottom: 0px;
background-color: #edeaea;
}

.footer-rechts {
position: relative;
width: 33%; 
margin: 0;
min-height: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 30px 0px 20px 40px;
float: left;
background-color: #edeaea;
}

/* Button To Top */
.up{
position: fixed;
display:block;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 40px;
width: 40px;
background-repeat: no-repeat;
bottom: 20px;
right: 0px;
z-index: 30;
}

.headerbild-1 {display: block;}
.headerbild-2 {display: none;}
.smartphone {display: none;}
.news {display: block; z-index: 20;}
.clear {clear:left;}


/* STUFF FOR MEDIUM DEVICES ###################################################### */
/* STUFF FOR MEDIUM DEVICES ###################################################### */
/* STUFF FOR MEDIUM DEVICES ###################################################### */

@media screen and (min-width:1000px) and (max-width:1200px){
	
.bildbreite-01{width: 50%;}
.bildbreite-02{width: 30%;}

.kontaktleiste-top {
position: absolute;
margin:0 auto 0px auto;
padding: 30px 10px 30px 12%;
width: 100%;
font-family: 'montserrat', Arial, sans-serif;
font-weight: 400;  
top: 0px;
letter-spacing: 1px;
font-size: 16px;
line-height: 70%;
min-height: 20px; /* for IE6 */
background-color:rgba(38,126,176,0.5);
color: #fff;	
z-index: 10;
box-sizing: border-box;
}	
	
#hero-text{
position: absolute;
min-height: 30px;
padding: 30px 30px 10px 0px;
min-width: 10%;
color: #000;
top:60px;
left: 12%;
z-index:12;
box-sizing: border-box;
}
	
.masterbox, #wrapper-01, #wrapper-66-links, #wrapper-33-rechts, #wrapper-02, #wrapper-03, #wrapper-05, #footer {width: 100%;}

#loader {display: block;}

.display-1{display: block;}
.display-2{display: none;}

/* Menu */
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0px;
}

#hero-bild-phone {display: none;}
#wrapper-a{display: block;}

#wrapper-01-fullsize {width: 100%; padding: 0px;}
#hauptfeld {width: 100%; padding: 0px 10px 0px 10px; margin:50px auto 0px auto;}

.wrapper-01 {float: left; width: 100%; margin-right: 0; padding: 0px 20px 0px 20px;}
.wrapper-01-links {float: left; width: 100%; margin-right: 0; padding: 60px 0px 0px 0px;}
.wrapper-01-rechts {float: left; width: 100%; margin-left: 0; padding: 60px 0px 0px 0px;}

.wrapper-66-links {float: left; width: 100%; margin-right: 0; padding: 0px 20px 0px 20px;}
.wrapper-33-rechts {float: left; width: 100%; margin-left: 0; padding: 0px 20px 0px 20px;}

.wrapper-02{float: left; width: 100%; margin: 0; padding: 0px 20px 0px 20px;}
.wrapper-02-links{float: left; width: 100%; margin: 0; padding: 0px 20px 0px 20px;}
.wrapper-02-mitte {float: left; width: 100%; margin: 0; padding: 0px 20px 0px 20px;}
.wrapper-02-rechts {float: left; width: 100%; margin: 0; padding: 0px 20px 0px 20px;}

/* Footer */
#wrapper-05 {
position: relative;
width:100%;
min-height: 50px;
margin:0px auto 0px auto;
}

#footer {
width:100%;
position: relative;
min-height: 280px;
font-size:13px; 
line-height: 150%;
margin:0px auto 0px auto;
}

.footer-links {
position: relative;
background-color: #edeaea;
min-height: 20px;
padding: 10px 20px 20px 20px;
}

.footer-mitte {
position: relative;
background-color: #edeaea;
min-height: 20px;
padding: 10px 20px 20px 20px;
}

.footer-rechts {
position: relative;
background-color: #edeaea;
min-height: 20px;
padding: 10px 20px 20px 20px;
}
/* Ende Footer */

.smartphone {display: block;}
#up {display: block;}
		
}	

/* STUFF FOR SMALL DEVICES ###################################################### */
/* STUFF FOR SMALL DEVICES ###################################################### */
/* STUFF FOR SMALL DEVICES ###################################################### */

@media screen and (min-width:80px) and (max-width:1000px){
	
body {
margin:0px auto;
font-size:0.9375rem;
line-height: 150%;
color:#000;
top:0px;
background-color: #f9f9f9;
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y:scroll;
}

.bildbreite-01{width: 100%;}

h1   { font-family: 'montserrat', Arial, sans-serif; font-size:22px; font-weight:400; text-align: left; line-height: 120%; color: #000;}
h2   { font-family: 'montserrat', Arial, sans-serif; font-size:22px; font-weight:400; text-align: left; line-height: 120%; color: #000;}
h3   { font-family: 'montserrat', Arial, sans-serif; font-size:20px; font-weight:400; text-align: left; line-height: 120%; color: #000;}
h4   { font-family: 'montserrat', Arial, sans-serif; font-size:18px; font-weight:400; text-align: left; line-height: 120%; color: #000;}
h5   { font-family: 'montserrat', Arial, sans-serif; font-size:16px; font-weight:400; text-align: left; line-height: 120%; color: #000;}
h6   { font-family: 'montserrat', Arial, sans-serif; font-size:14px; font-weight:400; text-align: left; line-height: 170%; color: #000;}
	
.masterbox, .wrapper-01-fullsize, #wrapper-01, #wrapper-66-links, #wrapper-33-rechts, #wrapper-02, #wrapper-03, #wrapper-05
{width: 100%; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; box-sizing: border-box;} 

#news, .jobs, a.trigger, .panel {display: none;}

#hero-bild-phone {display: block; text-align: center;}
#wrapper-a{display: none;}



.display-1{display: none;}
.display-2{display: block; box-sizing: border-box;}
.icon-slider-box {display: none;}

/* Menu */
div.sticky {
position: -webkit-sticky; /* Safari */
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
top: 0px;
}

blockquote {
margin:20px auto;
background-color:#efeded;
color: #000;
width: auto;
padding: 20px 20px 10px 20px;
border-radius: 5px;
line-height: 170%;
min-height: 20px; 
box-sizing: border-box;
}

#wrapper-01-fullsize {width: 100%; padding: 0px;}
#hauptfeld {width: 100%; padding: 0px 10px 0px 10px; margin:50px auto 0px auto;}
#wrapper-04-einspaltig {width: 100%; box-sizing: border-box; padding: 0px 20px 0px 20px; margin:0px auto 0px auto;}

.wrapper-01 {float: left; width: 100%; margin-right: 0; padding: 0px 20px 0px 20px;}

.wrapper-01-links {float: left; width: 100%; margin-right: 0; padding: 0px 20px 0px 20px;}

.wrapper-01-links {float: left; width: 100%; margin-right: 0; padding: 60px 0px 0px 0px;}
.wrapper-01-rechts {float: left; width: 100%; margin-left: 0; padding: 60px 0px 0px 0px;}

.wrapper-66-links {float: left; width: 100%; margin-right: 0; padding: 0px 20px 0px 20px;}
.wrapper-33-rechts {float: left; width: 100%; margin-left: 0; padding: 0px 20px 0px 20px;}

.wrapper-02-links{float: left; width: 100%; margin: 0; padding: 0px 20px 0px 20px;}
.wrapper-02-mitte {float: left; width: 100%; margin: 0; padding: 0px 20px 0px 20px;}
.wrapper-02-rechts {float: left; width: 100%; margin: 0; padding: 0px 20px 100px 20px;}

.footer-links {float: left; width: 100%; margin: 0; background-color: #edeaea; padding: 20px 20px 20px 20px;}
.footer-mitte {float: left; width: 100%; margin: 0; background-color: #cacaca; padding: 20px 20px 20px 20px;}
.footer-rechts {float: left; width: 100%; margin: 0; background-color: #edeaea; padding: 20px 20px 20px 20px;}

.kontaktleiste-top {
position: absolute;
margin:0 auto 0px auto;
padding: 20px 20px 30px 20px;
width: 100%;
font-family: 'open sans', Arial, sans-serif; 
top: 0px;
letter-spacing: 1px;
/*text-transform: uppercase;*/
font-size: 13px;
line-height: 120%;
min-height: 20px; /* for IE6 */
background-color:rgba(38,126,176,0.5);
color: #fff;	
z-index: 10;
box-sizing: border-box;
}

/* Footer */
#wrapper-05 {
position: relative;
width:100%;
min-height: 350px;
margin:0px auto 0px auto;
}

#footer {
width:100%;
position: relative;
min-height: 100px;
font-size:0.875rem; 
line-height: 150%;
margin:0px auto 0px auto;
}

.footer-links {
position: relative;
min-height: 20px;
padding: 10px 20px 20px 20px;
}

.footer-mitte {
position: relative;
min-height: 20px;
padding: 10px 20px 20px 20px;
}

.footer-rechts {
position: relative;
min-height: 20px;
padding: 10px 20px 20px 20px;
}
/* Ende Footer */

#up{display: block;}


}