/*************************************************
	Global
**************************************************/

html {
  height: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  margin: 0 auto;
  padding: 0;
  font-size: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
  background: #122733;
  background: url("bg2.jpg") no-repeat fixed center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*
body::before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.8);
}
*/

.ui-loader {
  display: none;
}

#header {
  grid-area: header;
}

#container {
  grid-area: content;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

#wrapper {
  display: flex;
  flex-direction: column;
  /*justify-content: center;
  align-items: center;*/
  /*
  grid-gap: 0px;
  grid-template-areas: "header" "sidebar" "content" "footer";
  align-items: start;
  */
}

input {
  margin: 0;
}

a:link,
a:visited {
  text-decoration: none;
  /*color: #4f84c4;*/
  color: #dac292;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

a:active {
  text-decoration: none;
}

a:link:hover {
  text-decoration: none;
  color: #92a8d1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

button {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

button:hover {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

b {
  color: #777;
}

.content {
  margin: 0 auto;
  padding: 0;
  max-width: 60em;
  /*border: 4px solid #fff;*/
}

#content {
  width: 50%;
  font-family: "Roboto Slab", arial, sans-serif;
  margin: -10px auto 30px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

#content dt {
  border-radius: 6px;
  padding: 10px 0px;
}

#content dt span {
  color: #fff;
  padding: 10px 40px;
  font-size: 1.0em;
  cursor: pointer;
  background-color: #0d1d26;
}


#content dd {
  display: none;
  padding: 25px;
  margin: 0 auto;
  color: #fff;
  background-color: #0d1d26;
  text-align: center;
  line-height: 180%;
  /*opacity: 0.70;*/
}


/*************************************************
	Header
**************************************************/

#header {
  /*background-color: #2e779a;*/
  /*color: #fff;*/
  height: 240px;
  margin-bottom: 10px;
  background-color: #122733;
  /*background: #122733;*/
  transition: all 0.4s ease-in-out;
}

#header .content {
  /*border: 1px solid #fff;*/
}

.scull {
  position: absolute;
  top: -20px;
  text-align: center;
  width: 100%;
  color: #4d4d4d;
  opacity: 0.4;
  margin: 0 auto;
  padding: 0;
  /*border: 1px solid #fff;*/
  font-size: 15em;
  z-index: 2;
  text-shadow: -1px -1px 1px #111, 2px 2px 1px #070e13;
  overflow: hidden;
}

h1 {
  font: bold 5.6em "EB Garamond", Georgia, Times, serif;
  text-align: center;
  /*border-bottom: 8px solid #ffff66;*/
  position: relative;
  padding: 0;
  color: red;
  text-shadow: 0 4px 3px rgba(0, 0, 0, 0.8), 0 8px 13px rgba(0, 0, 0, 0.6), 0 18px 23px rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  margin: 30px -0.25em 0px 0;
  z-index: 8;
}



h3 {
  /*margin-bottom: 15px;*/
  color: #fff;
  font-family: "EB Garamond", Georgia, Times, serif;
  letter-spacing: 0.07em;
  position: relative;
  /*background-color: #fff;*/
  /*padding: 20px 40px;*/
  /*box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;*/
  /*background-color: white;*/
  font-size: 15pt;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  /*background-color: #e7e5e4;*/
  z-index: 8;
}



/*************************************************
	Inhaltsbereich
**************************************************/

#anzahl {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  font-family: "Roboto Slab";
  font-size: 1.2em;
  margin: 0 auto;
  /*border: 1px solid #fff;*/
  padding: 30px 10px 0;
  width: 80%;
  text-align: center;
}

.dynamische_anzahl {
  display: block;
}

.filter_inhalt {
  text-align: center;
  margin: 0 0 10px;
  height: 50px;
}

.container-startseite {
  width: 95%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  /*display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: minmax(300px, auto);
  grid-gap: 4px;*/
  justify-content: center;
  margin: 0 auto;
  z-index: 20;
}

.container-startseite .box {
  flex: 1 0 250px;
  /*background-color: #363945;*/
  color: #fff;
  border-radius: 0;
  padding: 6px;
  /*border-radius: 4px;*/
  font: bold 1.5em "EB Garamond", Georgia, Times, serif;
  text-transform: uppercase;
  text-align: center;
  /*display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;*/
  transition: 0.2s all;
  line-height: 1.6em;
  overflow: hidden;
  /*box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 -3px 3px 0 rgba(0, 0, 0, 0.2);*/
}

input {
  padding: 6px;
}

input[type=number] {
  width: 80px;
}

.eingabe {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  background-color: #eee;
  color: #000;
  font: normal 1.0em/160% "Roboto Slab", Georgia, Times, serif;
  margin: 0 auto 50px auto;
}


.item1 {
  grid-column: 1 / -1;
}

.item1 {
  border: none;
  outline: none;
  overflow: hidden;
  position: relative;
}

.item1 span {
  position: relative;
  z-index: 10;
}

#container-startseite div span {
  color: #fa7a35;
  font-size: 120%;
}

.item5 {
  position: relative;
}

.stats {
  width: 100%;
  background-color: #122733;
  color: #fff;
  margin-top: 50px;
  padding: 30px 40px;
  font: normal 1.4em "Roboto Slab", Georgia, Times, serif;
  text-align: center;
  border: 4px solid #ff0000;
}

.stats strong {
  color: yellow;
}

#container {
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  padding: 20px 0 50px;
  width: 90%;
  /*border: 1px solid #454140;*/
}

table {
  width: 95%;
  color: #fff;
  padding: 0;
  border-collapse: collapse;
  empty-cells: hide;
  border: 4px solid #ff0000;
  table-layout: fixed;
  background-color: #333;
  margin: 0px auto 40px auto;
  font: normal 1.2em "Roboto Slab", Georgia, Times, serif;
  overflow: hidden;
  box-sizing: border-box;
}

th {
  padding: 10px 5px 10px 5px;
  color: yellow;
  vertical-align: bottom;
}

td {
  border-bottom: 1px solid #c4c4c4;
  padding: 8px 5px 8px 5px;
  vertical-align: top;
  text-align: center;
  transition: 0.3s;
}

.tode {
  background-color: #222;
}

.insgesamt {
  background-color: #555;
}

tbody td:nth-child(2) {
  background-color: #555;
}

/*
tbody tr:nth-child(even) {
  background-color: #444;
}
*/

tbody tr:hover td {
  background-color: #000;
  color: red;
  transition: 0.3s;
}


/*************************************************
	-->	Circle
**************************************************/

.circle {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  line-height: 1.0;
}

.circle canvas {
  vertical-align: top;
  border-radius: 50%;
  background-color: #000;
  /*box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);*/
  /*border: 1px solid #fff;*/
}

.circle1 canvas {
  background: #000 url("joerg2.jpg") no-repeat center;
  background-size: cover;
}

.circle strong {
  position: absolute;
  width: 100%;
  text-align: center;
  font: bold 2.2em "EB Garamond", Georgia, Times, serif !important;
}

.circle1 strong {
  font-size: 5em !important;
  color: #000 !important;
}

.circle span {
  display: block;
  color: yellow !important;
  /*text-shadow: 0 4px 3px rgba(0, 0, 0, 0.3), 0 8px 13px rgba(0, 0, 0, 0.6), 0 18px 23px rgba(0, 0, 0, 0.2);*/
}


/*************************************************
	-->	Chart
**************************************************/

#wrapper-chart {
  margin: 50px auto;
  box-sizing: border-box;
  position: relative;
  width: 95%;
  height: 400px;
  background-color: #333;
  border: 4px solid #ff0000;
}

#myChart {

}


/*************************************************
	Footer
**************************************************/
/*
https://mychcode.com/css/display-footer-always-bottom-page-css-solution/
*/

#footer {
  font: normal 100%/150% "Roboto Slab", arial, sans-serif;
  background-color: #333;
  color: #fff;
  border-top: 6px solid #454140;

  text-align: center;
  position: relative;
}

#footer .content {
  background-color: #404040;
  font-size: 95%;
  border-radius: 5px;
  line-height: 1.8em;
  margin: 60px auto;
  padding: 20px 10px;
  max-width: 58%;
  display: flex;
  flex-flow: column;
  align-self: center;
  justify-content: center;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 -3px 3px 0 rgba(0, 0, 0, 0.2);
}
/*************************************************
	Media Queries
**************************************************/
/* Bildschirme mit maximal x Breite */
@media screen and (max-width: 1200px) and (min-width: 600px) {
  .item1:after {
    -webkit-transform: translateX(-89%) translateY(-30%) rotate(45deg);
    transform: translateX(-89%) translateY(-30%) rotate(45deg);
  }

  .item1:hover:after {
    -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
    transform: translateX(-9%) translateY(-25%) rotate(45deg);
  }
}

@media screen and (max-width: 768px) {

  body {
    background: #21485e;
  }

  #header {
    height: 240px;
    margin-bottom: 10px;
  }

  #header .content h1 {
    font-size: 3em;
    text-shadow: none;
  }

  #header h1 {
    font-size: 8em;
  }

  #header h3 {
    font-size: 120%;
  }

  .scull {
    display: none;
  }

  table {
    width: 100%;
    font-size: 0.90em;
  }


  #container:hover .box {
    filter: none;
    opacity: 1;
    transform: none;
    box-shadow: none;
  }

  #container:hover .box:hover {
    filter: none;
    opacity: 1;
    transform: none;
    box-shadow: none;
  }

  .item1:after {
    -webkit-transform: none;
    transform: none;
  }

  .item1:hover:after {
    -webkit-transform: none;
    transform: none;
  }


  #container {
    width: 100%;
  }

  .content {
    /*padding: 0 1em;*/
  }

  #container .box {
    width: 40%;
    height: 140px;
    /*color: white;*/
    font-size: 110%;
  }
  /*
  #container .box {
    width: 20%;
    padding: 1.0%;
    padding-bottom: calc(1.0% + 5px);
  }
*/
  #container.list .box {
    width: 100%;
    padding: 1.0% 1.0% calc(1.0% + 5px);
  }

  #footer {
    -webkit-order: 3;
    order: 3;
    /*display: flex;*/
  }

  #footer .content {
    max-width: 80%;
    /*height: 30%;*/
  }
}
/* Bildschirme mit min x Breite */
@media screen and (max-width: 1400px) and (min-width: 770px) {

  #header {
    margin-bottom: 10px;
  }

  #container {
  }


}