/* = = = = = = = = = = = = = = = = = datei format.css = = = = = = = = = = = = = = = = = = = = = = = = = */
/* Popupbox ----------------------------------------------------------------------------------------------*/

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
} 
.overlay:target {
  visibility: visible;
  opacity: 1;
} 

.popup {
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 45%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #8ac300;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

.button {
  background-color: #8ac300; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
}



/*Ende Popup ---------------------------------------------------------------------------------------------*/

.responsive_map {
    position: relative;
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
}

.responsive_map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ############################################################ */
/* allgemein */
/* ############################################################ */


*, *:before, *:after {

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}


.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}


.clearfix:after { clear:both; }
.clearfix { *zoom: 1; }

.section { clear: both;
margin: 0rem;
}



html, body {
font-family:'open_sanscondensed_light', georgia, tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
font-size:62.5%;
line-height:1.4;
font-weight:normal;
height:100%;color:#ffffff;

}

body {
font-size:1.7rem;
margin: 0 auto;
}


/* überschriften */
h1, h2 {

}

h1, h2, h3, h4, h5 {
font-family: 'PoiretOne Regular';
font-weight:normal;
}

h1 {
font-size:3.4rem;
line-height: 3.7rem;
margin-top: 0rem;
margin-bottom: 3.5rem;
letter-spacing:.0rem;
}


h2 {
font-size:2.5rem;
line-height: 2.8rem;
margin-top: 0rem;
margin-bottom: 3rem;
letter-spacing:.2rem;
}


h3 {
font-size:1.9rem;
line-height: 2.3rem;
margin-top: 1.5rem;
margin-bottom:1rem;
letter-spacing:0rem;
}

h4 {
font-size 0.6rem;
line-height: 1.8rem;
margin-top: 0rem;
margin-bottom: 3rem;
letter-spacing:.1rem;
color:#000000
}

h1:first-letter {color:8ac300;}
h2:first-letter {color:8ac300;}


/* === allgemeine links  === */
a {
background-color:transparent;/* hinweis: der wert muss transparent bleiben, wegen der anderen a:links === */
color:#8F8F8F;
text-decoration: underline;
}

a:hover  {color:#8ac300;
background-color:transparent;/* hinweis: der wert muss transparent bleiben, wegen der anderen a:links === */
text-decoration:none;
}

/* quelltext-erklärungen - wenn vorhanden */
pre {white-space:pre-wrap;font-size:1.5rem;padding:1rem 0.5rem 1rem 0.5rem;
margin-bottom:2rem;text-align:center;
border:solid .1rem #8ac300 ;
color:#AFAFAF;
}


/* ############################################################ */
/*  speziell*/
/* ############################################################ */


                                                
.container_haupt {
margin:0 auto;
width:100%;padding-top:0rem;
background: radial-gradient(black 15%, transparent 15%) 0 0,
radial-gradient(black 15%, transparent 15%) 6px 6px,
radial-gradient(rgba(255,255,255, 0.1) 15%, transparent 15%) 0 1px;
background-color: ffffff;
/*background-size: 12px 12px;*/
}

/* bilder -anpassen der grösse */
img {width: 100%;display:block;
margin:0 auto;
height: auto;
border:solid .2rem #8ac300;
}

.name {display:block;
font-family: 'PoiretOne Regular',georgia,tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
padding:0rem 0rem 0rem 0rem;
font-size:2.6rem;
line-height: 2.8rem;
letter-spacing:0.2rem;
text-align:center;
color:#ffffff;
text-transform:uppercase
}

.name span{
color:gold;
}

/* fonticons - abschalten der textunterstreichnung bei links  */
.logo a , .icons a, .fuss a  {text-decoration:none;
}

/* fonticons - es sind grössere icons (big), mittlere (medium) und kleiner icons (small) von uns definiert.
die icons im kopfbereich, fussbereich, in listen und gfls. in der navigation sind davon unberührt und diese habe ihre eigene definition   */

.icons.big .fa {
border-radius:36rem;
font-size:4.5rem;
height:9rem;
line-height:9rem;
width:9rem;
}

.icons.medium .fa {
border-radius:36rem;
font-size:3.4rem;
height:6.8rem;
line-height:6.8rem;
width:6.8rem;
}

.icons.small .fa {
border-radius:36rem;
font-size:2.3rem;
height:4.6rem;
line-height:4.6rem;
width:4.6rem;
}

.icons.vers1 .fa {
color:gold;
background: radial-gradient(black 15%, transparent 15%) 0 0,
radial-gradient(black 15%, transparent 15%) 6px 6px,
radial-gradient(rgba(255,255,255, 0.1) 15%, transparent 15%) 0 1px;
background-size: 12px 12px;
background-color: #8ac300;
text-shadow:0rem 0rem 0.1rem #000;
box-shadow:inset 0rem 0rem 0.6rem #000 ,0rem 0rem 0.3rem black;
}

.icons.vers2 .fa {
color:white;
background: radial-gradient(black 15%, transparent 15%) 0 0,
radial-gradient(black 15%, transparent 15%) 6px 6px,
radial-gradient(rgba(255,255,255, 0.1) 15%, transparent 15%) 0 1px;
background-size: 12px 12px;
background-color: #8ac300;
text-shadow:0rem 0rem 0.1rem #000;
box-shadow:inset 0rem 0rem 0.6rem #000 ,0rem 0rem 0.3rem black;
}


.icons.vers3 .fa {background:orange;/* IE9 */
background:linear-gradient(to right bottom, gold,orange, gold );
color:gold;
text-shadow:0rem 0rem 0.1rem #000;
box-shadow:inset 0rem 0rem 0.6rem #000 ,0rem 0rem 0.3rem black;border-spacing: 8px;
}

.icons.vers4 .fa {background:#8ac300;/* IE9 */
background:linear-gradient(to right bottom, #8ac300,royalblue, #8ac300 );
color:lightskyblue;
text-shadow:0rem 0rem 0.1rem #000;
box-shadow:inset 0rem 0rem 0.1rem black ,0rem 0rem 0.3rem black;
}

.icons.vers5 .fa {background:silver;/* IE9 */
background:linear-gradient(to right bottom, white,silver, white );
color:white;
text-shadow:0rem 0rem 0.1rem #000;
box-shadow:0rem 0rem 0.1rem black;
}

/* liste mit eigenem aufzählungszeichen als font-icon */

.liste1  {
padding-left:4rem;
}

.liste1 li {position:relative;
list-style-type: none;
padding-left:4rem;
}

.liste1 li:before {
position:absolute;
font-family:'FontAwesome';
top:0;
left:14px;
content:"\f091";
color:#2F74AA;
}

.liste1 li:hover:before{
color:#fff;
}


/* liste2  zweite liste mit eigenem aufzählungszeichen als font-icon */

.liste2  {
padding-left:4rem;
}

.liste2 li {position:relative;
list-style-type: none;
padding-left:4rem;
}

.liste2 li:before {
position:absolute;
font-family:'FontAwesome';
top:0;
left:14px;
content:"\f0d1";
color:ffffff;
}

.liste2 li:hover:before{
color:8ac300;
}

/* liste3  - mit standard-aufzählungszeichen square */

.liste3  {
padding-left:3rem;
}

.liste3 li {
list-style-type: square;
padding-left:0rem;
}

/* horizontale linie */
hr {margin-top:0.5rem;
margin-bottom:0.3rem;
background:transparent;
width:100%;
border:none; /* IE */
height:0.1rem;  /* IE */
}

.erstes-wort {font-style:normal;
font-family: 'PoiretOne Regular';
}

/* float */
.col {width: 100%;
margin: 0 auto;
float:left;
}

/* grid system - mobile-first = startet mit der handy-version, deshalb alle spalten mit 100%, diese stehen somit untereinander*/
/* wird gfls im nachstehenden code überschrieben bzw. auf jeden fall für höhere auflösungen werden dann die prozentwerte geändert per MEDIA QUERIES, damit die spalten bei mehr platz nebeneinander stehen */
.span_1_of_1 {width:100%;}
.span_1_of_2 {width:100%;}
.span_1_of_3 {width:100%;}
.span_1_of_4 {width:100%;}
.span_1_of_4b {width:50%;} /* mögliche alternative zu .span_1_of_4 */
.span_1_of_6 {width:100%;}







/* ############################################################ */
/* bereich logo */
/* ############################################################ */

.logo-main {position:relative;
/*background:linear-gradient(to top ,rgba(0,0,0,.5)  ,transparent  );*/
margin:0 auto;
color:#313131;
padding:0rem;
}



.logo {
margin: 0rem auto;
padding:0rem;
position:relative;
background:url(../images/logo.png);
background-repeat:no-repeat;
background-position:50% 50%;
background-size:contain;
}


.logobox-1 {width:50%;min-height:20rem;
display:block;
text-align:left;
padding:1rem;
/*background:linear-gradient(-15deg ,gold 50% ,transparent 50%  );    */
}


.logobox-2 {width:50%;
min-height:20rem;
display:block;
text-align:right;
padding:1rem 1rem 1rem 1rem;
/*background:linear-gradient(15deg, gold 50% ,transparent 50%  );*/
}

.logobox-3 {position:absolute;
margin-left:-15rem;
width:30rem;
bottom:0;
left:50%;
text-align:center;
}

.logobox-3-a {
width:100%;
min-height:33.33%;
background:rgba(0,0,0,.3);
padding:1.5rem 0 1.5rem 0;
}

.logobox-3-b  {width:100%;
background:rgba(0,0,0, .5);
padding:1.5rem 0 1.5rem 0;
}

.logobox-3-c {width:100%;
background:#8ac300 ;
padding:1.5rem 0 1.5rem 0;
}


/*  die icons im logobereich */
.logobox-3-b .fa {
font-size:1.5rem;
height:3rem;
line-height:3rem;
width:3rem;
background:white ;
color:black;
border-radius:36rem;
}

.logobox-3-b  a:hover .fa  {
color:#2f74aa;
background:#fff;
text-shadow:none;
}


.logobox-3-c .fa {
font-size:1.5rem;
height:3rem;
line-height:3rem;
width:3rem;
background:#000;
color: white;
border-radius:36rem;
}

.logobox-3-c  a:hover .fa  {
color:orange;
background:#fff;
text-shadow:none;
}


/* ############################################################ */
/* bereich nav */
/* ############################################################ */


.nav-main {
background:rgba(0,0,0,.5) ;
margin:0 auto;
color:#313131;
position:sticky;

top:0;
}

.nav {width:100%;
margin:0 auto;
line-height:3.5rem;

}


/* ############################################################ */
/* bereich inhalt */
/* ############################################################ */

.inhalt-main {
padding:0;
margin:0;
background:#2F2F2F;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* inhalt */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


.inhalt {width:100%;
margin: 0 auto;
padding:2rem;
}

.inhaltbox-a {display:block;
background-image:url(images/t1.jpg);
background-repeat:no-repeat;
background-position:50% 0%;
background-size:cover;
width:100%;
text-align:left;
padding:5rem 2rem 6rem 1rem;
min-height:50rem;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* bilder */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.bilder {
padding:0rem;
font-size:1.4rem;

}

.bilder .span_1_of_1 {width:100%;}
.bilder .span_1_of_2 {width:100%;}
.bilder .span_1_of_3 {width:100%;}
.bilder .span_1_of_4 {width:100%;}
.bilder .span_1_of_6 {width:100%;}


.bilder .box {
text-align:right;
padding:1rem;
}

.bilder img {
border:solid .2rem #518dbb    
}

.bilder .erstes-wort {display:block;
text-align:right;
color:#8ac300;
font-size:1.6rem;
}

.bildbox-innen {
background:black;
overflow:hidden;
position:relative;
text-align:right;
width:100%;
padding:0rem;
}

.bilder .text {display:block;
overflow:visible;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* icons */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.icons {
padding:0rem;
font-size:1.4rem;
}

.icons.medium .span_1_of_4 {width:50%;}
.icons.small .span_1_of_6 {width:33%;}

.icons .box {
text-align:center;
padding:1rem;
}

.icons.medium .box {
margin:1rem;
background-color: #8ac300;/* IE9 */
background:linear-gradient(to top,#8ac300,#D7EFFD,#8ac300)}



.icons .erstes-wort {
color:gold;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* abteilung */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.abteilung {
padding:0rem;
font-size:1.4rem;
}

.abteilung .span_1_of_4 {width:100%;}


.abteilung .box {
text-align:center;
padding:1rem;
}

.abteilung  img {
border:solid .1rem #8ac300;
width:100%;
height:auto;
}

.abteilung  img:hover { filter: sepia(0.8) saturate(6.7);
}

.abteilung .erstes-wort {text-align:center;
color:white;
}

/* horizontale linie */
.abteilung hr{width:100%;
border-bottom: solid 0.1rem gold;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* kleines fahrzeug */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.wrapper-car {overflow:hidden;


}


.car {position:relative;
transform:scaleX(-1);
color:#8ac300;
top: 0;
left: 0%;
font-size:3rem;
height: 3rem;
width: 4rem;z-index:99999
}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* team */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.team {border:solid .2rem #8ac300;   
padding:2rem;
font-size:1.4rem;text-align:center;
background:linear-gradient(135deg, #8ac300 5%,transparent 5%,transparent 95%, #8ac300 95%);
}

.team .span_1_of_3 {width:33%;}

.team .box {
text-align:center;
padding:2rem;
}

.team  img { width:70%; filter: grayscale(100%) brightness(150%);
height:auto;
border:solid .2rem #8ac300;
border-radius:36rem;

}

.team  img:hover { filter: none;
}

.team .erstes-wort {display:block;text-align:center;
color:8ac300;
font-size:2rem;
}


/* ############################################################ */
/* bereich fuss */
/* ############################################################ */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* fuss*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* === fuss === */


.fuss-main {margin:0 auto;
text-align:center;
text-shadow:none;
padding:0rem;
font-family:'PoiretOne Regular';
}

.fuss {
width:100%;
display:block;
margin: 0rem auto;
padding:0rem;
}

.fuss .span_1_of_2 {width:100%;}

.fussbox-1 {position:relative;
min-height:14rem;
padding:1rem;
/*background:linear-gradient(to right top ,#2f74aa 50% ,#2f74aa 50%  );     */
}

.fussbox-1 b {color:orange;font-weight:normal;
}

.fussbox-2 {position:relative;
min-height:6rem;
color:gold;
/*background:linear-gradient(to left bottom ,#2f74aa 50% ,#2f74aa 50%  );*/
}

.fussbox-1-a {color:gold;padding:.5rem;
position:absolute;
right:1rem;
top:1rem;
}

.fussbox-1-a {text-transform:uppercase}

.fussbox-2-a {padding:.5rem;
position:absolute;
left:1rem;
top:1rem;
}


/*  die icons im fussbereich */


.fuss .fa {
font-size:1.6rem;
height:3rem;
line-height:3rem;
width:3rem;
background: white;
color:orange;
border-radius:36rem;
}

.fuss  a:hover .fa  {
color:white;
background:gold;
text-shadow:none;
}


/*===== fussmenu 2  =====  */


.fussmenu2 ,
.fussmenu2  ul,
.fussmenu2  li {
list-style: none;
margin: 0;
padding: 0;
border: 0;
text-transform:none;
}

.fussmenu2  {width:100%;margin:0 auto;padding-top:.4rem;}

.fussmenu2 ul {}

.fussmenu2 li { display:block;
width:100%;
line-height:2rem;
margin-left:0rem;
padding-left:7rem;
}

.fussmenu2 a {font-size:1.4rem;
width : 100%;
text-align:left;
color:#D0E0EE;
text-decoration:none;
padding:0rem;
letter-spacing:.1rem;
}

.fussmenu2 a:hover {
color:#fff;
text-shadow:none;
background:transparent;
text-decoration: underline;
}



/* ############################################################ */
/* M E D I A   Q U E R I E S */
/* ############################################################ */

/* ==================================== ab 360 pixel ================================== */
@media (min-width: 360px) {


.icons.big .span_1_of_4 {width:50%;}
}


/* ==================================== ab 480 pixel ================================== */
@media (min-width: 480px) {

.team .span_1_of_4 {width:50%;}

.bilder img  {width:100%;height:65vh;}
.abteilung img  {width:70%;height:auto;}


}


/* ==================================== ab 600 pixel ================================== */
@media (min-width: 600px) {

.container_haupt {padding-top:2rem;}

.logo ,.nav, .inhalt , .fuss  {
width:95vw;
}

.inhaltbox-a {
padding:5rem 3rem 6rem 3rem;
}

.bilder .text {
overflow:auto;height:12rem;
}

.bilder .span_1_of_2 {width: 50%; }
.bilder .span_1_of_3 {width:100%; }
.bilder .span_1_of_4 {width: 50%; }
.bilder .span_1_of_6 {width: 50%; }
.abteilung .span_1_of_4 {width:50%;}
.fuss .span_1_of_2 {width:50%;}

.bilder img  {width:100%;height:auto;}
.abteilung img  {width:100%;height:auto;}
.team img  {width:70%;height:auto}


.icons.big .span_1_of_4 {width:25%;}
.icons.medium .span_1_of_4 {width:25%;}
.icons.small .span_1_of_6 {width:16%;}


.fussbox-1 {min-height:20rem;
background:linear-gradient(to right top ,transparent 50% ,#2f74aa 50%  );
}

.fussbox-2 {min-height:20rem;
background:linear-gradient(to left top ,transparent 50% ,#2f74aa 50%  );
}


}


/* ==================================== ab 640 pixel ================================== */
@media (min-width: 640px) {

html {
font-size:68%;
}


}


/* ==================================== ab 768 pixel ================================== */
@media (min-width: 768px) {

html {font-size:70%;}

.logo ,.nav, .inhalt , .fuss  {
width:92vw;
}

.bilder .span_1_of_2 {width: 50%; }
.bilder .span_1_of_3 {width:50%;}
.bilder .span_1_of_4 {width: 50%; }
.bilder .span_1_of_6 {width: 50%; }

.bilder .text {
overflow:auto;height:10rem;
}


}


/* ==================================== ab 800 pixel ================================== */
@media (min-width: 800px) {

html {font-size:78%;}

}


/* ===================================== ab 1024 pixel ================================= */

@media (min-width: 1024px) {

html {
font-size:80%;}

.logo ,.nav, .inhalt , .fuss  {
width:90vw;
}

.bilder .text {
overflow:auto;height:12rem;
}

.bilder .span_1_of_3 {width:33.33%; }
.bilder .span_1_of_4 {width:25%;}
.bilder .span_1_of_6 {width: 33%;}
.abteilung .span_1_of_4 {width:25%;}
.team .span_1_of_4 {width:25%;}

.team img  {width:100%;}


}


/* ===================================== ab 1100 pixel ================================= */

@media (min-width: 1100px) {

.logo , .nav, .inhalt , .fuss  {
width:80vw;
}


}


/* ===================================== ab 1200 pixel ================================= */

@media (min-width: 1200px) {

html {
font-size:72%;}

.logo ,.nav, .inhalt , .fuss   {
width:75vw;
}


}


/* ===================================== ab 1300 pixel ================================= */

@media (min-width: 1300px) {

.logo ,.nav, .inhalt , .fuss   {
width:70vw;
}


}

/* ===================================== ab 1400 pixel ================================= */

@media (min-width: 1400px) {

html {
font-size:80%;
}

.logo , .nav,.inhalt , .fuss   {
width:65vw;
}


}


/* +  +  +  +  + +  +  +  +  +  C O D E ENDE  +  +  +  +  +  +  +  +  +  + */
form { max-width:auto; margin:50px auto; }

.feedback-input {
  color:white;
  font-weight:500;
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid #fff;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #8ac300; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 100%;
  background:#c3c5bd;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:Black;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
[type="submit"]:hover { background:#8ac300; }