html { scroll-behavior: smooth; }

:root {
--dunkel: #7C0000; /*rot*/
--hell: #dbceb0;
scrollbar-width: thin;
scrollbar-color: var(--dunkel) var(--hell);
}

html,body,input,textarea,select,tr,td{font-family:Tahoma,Arial;color:#555555;font-size:1.1em;}
body{margin:0px;background-color: var(--hell);}

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(--dunkel);text-decoration:none;}
a:hover{text-decoration:none;}

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

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


/* h3{color: var(--dunkel);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(--dunkel);
  border:1px solid var(--hell);
  margin: 6px 0;
  z-index: 950;
}
#navi{z-index:1000;display:none;position:fixed;top:0px;left:0px;padding:10px;background-color:var(--hell);height:100%;overflow:hidden;width:230px;}
#navi::-webkit-scrollbar{display: none;}
#navi a{display:block;color:var(--dunkel);padding:10px;font-size:20px;}
#navi a:hover{text-decoration:underline;}
#navibutton{position:fixed;top:30px;left:30px;font-size:30px;cursor:pointer;font-weight:bold;color:#fff;z-index: 950;}
#navibutton_close{float:right;}

#logo{width:80%;max-width:800px;padding:10px;}

header{}

#content{padding:50px 10px 100px 10px;}
#footer
{
  background-color:var(--dunkel);
  color:white;
  padding:10px;
  display:flex;
  justify-content: space-between;
}
#footer a{color:white;text-decoration:underline;}

.text_mittig{width:950px;max-width:100%;margin:auto auto;}

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

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

.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;
  font-weight:bold;
	background-position: center center;
	background-repeat: no-repeat;
	background-size:cover;
  font-size:33px;

  color: white;
  text-shadow: -1px -1px 0 var(--dunkel), 1px -1px 0 var(--dunkel), -1px 1px 0 var(--dunkel), 1px 1px 0 var(--dunkel);
  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_div{max-width:100%;height:400px;overflow-y:scroll;overflow-x:auto;margin-bottom:40px;}
/* .artikel_table{max-width:400px;} */
.artikel_table th{background-color:var(--dunkel);color:white;position: sticky; top: 0px;z-index:0;}
.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;}

#anrufbutton
{
  position:fixed;bottom:10px;right:10px;font-size:20px;
  z-index:1000;
  display:inline-block;
  background-color:var(--dunkel);
  color:white;
  font-weight:bold;
  padding:10px;
  border-radius:10px;
}


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

@media(max-width: 800px)
{
  /* #anrufbutton_inner{display:none;} */
  .artikel_table_div{width:100%;float:none;margin:0px 0px 50px 0px;}

  #navibutton{top:15px;left:15px;}

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

  /* später: */
  .div50{float:none;width:90%;margin:0px 0px 10px 0px;}
  .galeriebild{width:100%;float:none;margin:0px 0px 10px 0px;}
}