*{font-family:arial;}
body{margin:0px;}
div{box-sizing:border-box;}
#content{margin:auto auto;width:100%;}

.pad{padding:20px;}
.pad_inner{display:block;margin:auto auto;width:100%;max-width:900px;}

#head,#head_mobile{position:fixed;z-index:1000;top:0px;width:100%;padding:5px;color:white;
  text-shadow:
  -1px -1px 0 #000,
   0   -1px 0 #000,
   1px -1px 0 #000,
   1px  0   0 #000,
   1px  1px 0 #000,
   0    1px 0 #000,
  -1px  1px 0 #000,
  -1px  0   0 #000;
}
#head_mobile *{font-size:25px;}
#head_mobile{display:none;}
#navi{display:flex;justify-content:space-around;align-items:center;flex-flow: row wrap;}

a{font-weight:bold;text-decoration:none;color:#1948FF;}

#navi a,#navi_mobile a,#navibutton{font-weight:normal;font-size:25px;user-select:none;color:white;cursor:pointer;}
#navi_mobile a{margin:5 0 5 0;}
#navibutton{display:none;}
#navi_mobile{display:none;}

.button_gross{font-size:20px;line-height:50px;background-color:red;color:white;padding:10px;margin-bottom:10px;cursor:pointer;}

.ueberschriften{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
  width:600px;
}
#Home{height:0px;border:0px solid red;} /* das is der Platzhalter für den Header, war 32px! */

video{z-index:1;}

/* TEASER (4 Stück, versch. Farben) */
/* .teaser_wrapper{display:flex;justify-content:space-around;align-items:center;flex-flow: row wrap;} */
.teaser{float:left;margin:0 25 25 0;}
.teaser_bild_outer{display:block;height:200px;width:200px;overflow:hidden;}
.teaser_bild{width:100%;height:100%;object-fit: cover;cursor:pointer;}
.teaser_text{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  color:white;padding:5px;font-size:12px;height:50px;}

/* ZÄHLER */
#zaehler{
  padding:10px;
  display: flex;
  justify-content: space-around;
  align-items: top;
  text-align:center;
}
.zaehler_item{color:white;}
.zaehler_item .zahl{font-size:30px;}
.zaehler_item img{width:50px;}

.bloecke{
  padding:10px;
  display: flex;
  justify-content: space-around;
  align-items: top;
  text-align:left;
}

/* VIDEOS */
.video{background-color:#f8ab04;float:left;margin:0 20 20 0;padding:10px;width:250px;align-items:center;text-align:center;}
.video_outer
{
  margin:auto auto;
  width:200px;height:200px;margin-bottom:10px;border-radius:50%;
  overflow: hidden;
  -webkit-transform: translateZ(0);
}
.video video{
  height:200px;
}
.video_ueb{color:#1948FF;font-size:20px;display:block;height:50px;font-weight:bold;text-shadow: 3px 3px 4px #777;}
.video_text{color:black;font-weight:bold;font-size:15px;display:block;width:100%;height:160px;text-align:center;}

.modelle_wrapper{display:block;height:410px;width:100%;overflow-x: hidden;overflow-y: hidden;white-space: nowrap;}
.modelle_bild{height:400px;float:none;cursor:pointer;margin-right:5px;}

input[type=text],input[type=number],textarea{width:100%;padding:10px;border-radius:5px;border:1px solid #1948FF;}

div.hinweis,div.fehler{background-color:#B9FFB9;font-weight:bold;display:block;text-align:left;padding:12px;border:2px solid #00ff00;border-radius:7px;margin-bottom:10px;}
div.fehler{background-color:#FEC6C6;border:2px solid #ff0000;}

/* .width50{width:40%;float:left;margin-right:10px;} */
#warp_oben_links{height:600px;float:left;}
#warp_oben_rechts{height:600px;float:right;}

input[name=firma]{display:none;}

@media(max-width: 800px)
{
  #head{display:none;}
  #navi{display:none;}

  #head_mobile{display:block;}
  #navi_mobile{top:70px;}
  #navi_mobile a{display:block;}
  #navibutton{display:block;}

  .teaser{margin:0 10 10 0;}
  .teaser_bild_outer{display:block;height:165px;width:165px;overflow:hidden;}

  .bloecke{display:block;}

  /* .width50{width:50%;margin-right:0px;float:none;} */

  #warp_oben_links,#warp_oben_rechts{width:100%;height:auto;display:block;float:none;}

}