html { scroll-behavior: smooth; }

:root {
--main-bg-color: #7C0000;/* rot */
--main-bg-color: #A6B4BC; /*rot*/
--main-bg-color: #2B2A29; /*rot*/
}

html,body,input,textarea,select,tr,td{font-family:"Roboto",Tahoma,Arial;font-weight:600;color:#555555;font-size:1.1em;}
body{margin:0px;background-color:#ffffff; /*#ECE6DE*/}

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;}

div{box-sizing:border-box;}
a{color:var(--main-bg-color);text-decoration:none;}
a:hover{text-decoration:none;}

.button{cursor:pointer;border:0px;display:inline-block;background-color:var(--main-bg-color);color:white;font-weight:bold;padding:10px;margin:10px 10px 10px 0px;}

h1,h2{padding-top: 40px;margin-top: -40px;} /* Damit sie nicht oben kleben beim Hinscrollen!*/
h1{color: var(--main-bg-color);line-height:1em;}
h2{color: var(--main-bg-color);line-height:1em;}


/* h3{color: var(--main-bg-color);font-size:16px;margin:20px 0px 5px 0px;} */

/* alignments: */
.clear,.c{clear:both }
.l{float:left;}
.r{float:right;}
.tr{text-align:right;}
.tl{text-align:left;}

#verdunklung{display:none;position:fixed;top:0px;left:0px;height:100%;z-index:900;width:100%;background-color:#000000;opacity:0.5;}

#navibutton div{
  width: 35px;
  height: 5px;
  background-color:var(--main-bg-color);
  border:1px solid white;
  margin: 6px 0;
}
#navi{z-index:1000;display:none;position:fixed;top:0px;left:0px;padding:10px;background-color:#ffffff;height:100%;overflow-y:scroll;width:230px;}
#navi::-webkit-scrollbar{display: none;}
#navi a{display:block;color:var(--main-bg-color);padding:10px;font-size:20px;}
#navi a:hover{text-decoration:underline;}
#navibutton{position:fixed;top:30px;right:30px;font-size:30px;cursor:pointer;font-weight:bold;color:#fff;}
#navibutton_close{float:right;}

#logo{width:500px;max-width:50%;padding:20px;}

header{}

#content{padding:0px 0px 10px 10px;max-width:99%;overflow-x:hidden;}
#footer
{
  background-color:var(--main-bg-color);
  color:white;
  padding:10px;
  display:flex;
  justify-content: space-between;
}
#footer a{color:white;text-decoration:underline;}

.kachel{float:left;width:23%;margin:0px 20px 20px 0px;cursor:pointer;
  display:flex;
  align-items:center;
  text-align:center;
  justify-content:center;
  height:200px;
  color: var(--main-bg-color);
  /* text-shadow: #fff 3px 0 3px; */
  /* -webkit-text-stroke: 1px #fff; */
  text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
  font-weight:bold;
	background-position: center center;
	background-repeat: no-repeat;
	background-size:cover;
  font-size:33px;

  background-color: rgba(255,255,255,0.3);
  background-blend-mode: lighten;
}
.kachel:hover{background-color: rgba(255,255,255,0.6)}

/* .align_bild{width:300px;margin:0px 10px 10px 10px;}
.align_bild.links{float:left;margin-left:0px;}
.align_bild.rechts{float:right;margin-right:0px;} */

/* .historie_bild{width:100%;max-width:510px;} */

.zweier{float:left;width:40%;margin-right:20px;}

input[type=text],textarea{width:70%;}

#flussdiagramm{width:800px;max-width:100%;margin:30px 0px 30px 0px;}

#artikel_table th{background-color:#bbb;}
#artikel_table tr{font-size:0.9em;}
#artikel_table tr:nth-of-type(even){background-color:#ddd;}
#artikel_table tr:hover{background-color:#bbb;}

/* später: */
.newsbild{max-width:100%;margin-bottom:10px;}
.galeriebild{width:48%;float:left;margin:0px 10px 10px 0px;cursor:pointer;}
.div50{display:flex;float:left;align-items:center;justify-content:center;font-size:20px;color:#165900;height:100px;width:40%;padding:20px;margin:0px 30px 30px 0px;border:3px solid #FFCB03;}

.artikel{display:inline-block;width:150px;margin:0px 20px 20px 0px;font-size:16px;align-items: center;text-align:center;cursor:pointer;}
.artikel img{border:0px solid black;margin-bottom:2px;}

/* .download{border:1px solid #2B2A29;padding:5px;line-height:25px;margin:0px 10px 10px 0px;} */
.download{padding:8px;margin:0px 0px 10px 0px;display:inline-block;background-color:black;color:#fff;white-space: nowrap;}
.flaschen_bild{border:2px solid black;float:right;width:200px;margin:0px 10px 10px 0px;}
.ambiente_bild{float:right;width:50%;margin:0px 0px 10px 10px;}
/* .produktslider{overflow-x:scroll;white-space:nowrap;width:100%;} */

.bg_scrollbar
{
  overflow:hidden;
  display:block;
  /* height:90vh; */
  width: calc(100% + 20px);
  margin:0px -10px 50px -10px;
  box-sizing: border-box;
  padding:0px;
  color: white;

  /* Scrollbarer Hintergrund */
  background-position: center center;
  background-repeat: no-repeat;
  background-size:cover;
  background-attachment:fixed;
}

@media(max-width: 1300px)
{
  .kachel{width:48%;}
}

@media(max-width: 800px)
{
  #footer{display:block;}
  /* #navi{z-index:1000;display:none;position:fixed;top:0px;left:0px;background-color:#ffffff;height:100%;overflow-y:scroll;width:250px;} */
  .kachel{float:none;width:100%;margin:0px 0px 10px 0px;}
  .align_bild{float:none;width:100%;margin:10px 0px 10px 0px;}
  .zweier{float:none;width:100%;margin-right:0px;margin-bottom:40px;}

  .bg_scrollbar{
    /* height:auto; */
    background-size:contain;
    /* background-attachment:scroll; */

    /* border:1px solid green; */
  }
  #erstes_scrollbares
  {
    background-attachment:scroll;
  }
  /* später: */
  .div50{float:none;width:90%;margin:0px 0px 10px 0px;}
  .galeriebild{width:100%;float:none;margin:0px 0px 10px 0px;}
}