@charset "UTF-8";
* {
  font-family:
    -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "fira sans", "droid sans", "Open Sans",
    "Helvetica Neue", sans-serif;
}
:root {
  --grid-rows: 10;
  --grid-columns: 5;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  background-color: #ededed;
  font-size: 16px;
}
body {
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: center;
}

/* CSS Login-Box */
.login {
   max-width: 360px;
   background-color: #ffffff;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   padding: 20px;
   border-radius: 8px;
   margin: 20px auto;
}
.login h1 {
   text-align: center;
   padding-bottom: 20px;
   border-bottom: 1px solid #dee0e4;
}
.login form {
   padding-top: 20px;
}
.eingabeblock {
   display:flex;
}
.login form label {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 50px;
   height: 50px;
   background-color: #008cba;
}
.login form input[type="password"], .login form input[type="text"] {
   width: 100%;
   height: 50px;
   border: 1px solid #dee4df;
   margin-bottom: 20px;
   padding: 0 15px;
   font-size: 1rem;
}
.login form input[type="submit"] {
   width: 100%;
   padding: 10px;
   margin-bottom: 20px;
   background-color: #008cba;
   border: 0;
   cursor: pointer;
   font-weight: bold;
   color: #ffffff;
   transition: background-color 0.2s;
   border-radius: 4px;
   box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
   font-size: 1rem;
}
.login form input[type="submit"]:hover {
 background-color: #00b0eb;
 transition: background-color 0.2s;
}


/* CSS Loginmenu */
.loginmenu {
  width: 100%;
  height: 25px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  background-color: #333;
  color: #eee;
  overflow: hidden;
  position: fixed;
}
.loginmenu svg {
  margin-right: 5px;
}
.loginmenu a {
  margin-right: 20px;
}
.loginmenu path {
  fill: #eee;
}
/* Contentbereich */
.contentbox {
  margin: 35px 10px 10px 10px;
  width: 100%;
}
.w-breit {
  max-width: 1200px;
}
.w-ipad {
  max-width: 820px;
}
/*Logocontainer */
.logocontainer,
.flex-container-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logocontainer img {
  width: 100%;
  max-width: 200px;
}
.logocontainer h2 {
  text-align: center;
}
/* Inhaltskarte */
.card {
  background-color: #fff;
  padding: 10px 5px;
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 4px;
}
/* Überschriften */
h1,
h1 a {
  margin: 0 0 10px 0;
  color: #ee7f00;
  font-weight: 600;
  font-size: 1.75rem;
}
h2,
h2 a {
  margin: 0 0 5px 0;
  color: #ee7f00;
  font-weight: 600;
  font-size: 1.25rem;
}
h3,
h3 a {
  margin: 0 0 5px 0;
  color: #ee7f00;
  font-weight: 600;
  font-size: 1.17rem;
}
.hervorhebung {
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 0.5em;
}
/* Buttons */
.btn400 {
  width: 100%;
  max-width: 400px;
}
.btn140 {
  width: 140px;
  padding: 5px !important;
}
.btn70 {
  width: 100%;
  max-width: 70px;
}
.btnx {
  width: 100%;
}
.button,
.buttongrid a {
  padding: 10px;
}
.button {
  margin: 5px;
}
.button,
.buttongrid a {
  text-align: center;
  color: white;
  font-weight: 600;
  border-radius: 4px;
  transition-duration: 0.2s;
  box-shadow:
    0 3px 3px 0 rgba(0, 0, 0, 0.2),
    0 3px 3px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}
.button:hover,
.button:active,
.buttongrid a:active,
.buttongrid a:hover {
  opacity: 0.7;
}
.buttongrid {
  display: grid;
  margin-bottom: 20px;
  grid-template-columns: repeat(auto-fill, minmax(3.6em, 1fr));
  gap: 8px;
}

.flex-container-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-bottom: 0.5em;
}
.aktiv {
  border: 2px solid #333;
  color: #333;
  background-color: #e8f0fe;
}
a {
  text-decoration: none;
  color: inherit;
}
.grid-container-column {
  display: grid;
  justify-content: center;
  grid-auto-flow: row;
  grid-gap: 3px;
  grid-template-columns: 1fr;
}
.grid-item,
.grid-item-header {
  color: white;
  text-align: center;
}
.grid-item-header {
  background-color: #7c7c7c;
  font-weight: bold;
  padding: 5px 0;
  font-size: 1.1rem;
}
.grid-item {
  padding: 10px 0;
  font-size: 0.9rem;
  display: block;
}
.grid-item-info-bar {
  grid-column: 1 / -1;
}
.form-group {
  margin: 0px auto 8px auto;
  width: 100%;
  max-width: 320px;
}
.form-label {
  font-weight: 600;
  font-size: 0.75rem;
}
.form-control {
  padding: 10px 12px;
  font-size: 1.1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 2px;
  width: 100%;
  background-color: #e8f0fe;
}
/* Tabelle für Kalender, zwei Spalten */
.tgrid {
  display: grid;
  grid-template-columns: auto auto;
}
.tgrid-item,
.tgrid-item-header {
  border-bottom: 1px solid black;
  padding: 5px 7px;
}
.tgrid-item-header {
  background-color: #e67e00;
  font-weight: bold;
}
.tgrid-item {
  font-size: 0.9rem;
  display: block;
}
.tgrid > .r1 {
  background-color: #f8f9f9;
}
.blau {
  background-color: #008cba;
}
.orange {
  background-color: #e67e00;
}
.grau {
  background-color: #7c7c7c;
}
.gruen {
  background-color: #58ad55;
}
.hellgruen {
  background-color: #04b900;
}
.rot {
  background-color: #f85423;
}
.dunkelbrombeer {
  background-color: #930062;
}
.brombeer {
  background-color: #bc007e;
}
.dunkelrot {
  background-color: #d10000;
}
.tuerkis {
  background-color: #21c6c1;
}
.unsichtbar,
.unsichtbar-wenn-schmal {
  display: none;
}
.warnung {
  background-color: #ff0000;
  padding: 5px;
  text-align: center;
  border-radius: 4px;
  border: 2px solid black;
  box-shadow:
    0 3px 3px 0 rgba(0, 0, 0, 0.2),
    0 3px 3px 0 rgba(0, 0, 0, 0.19);
}
.neu {
  background-color: rgb(255, 230, 0);
  padding: 5px;
  text-align: justify;
  border-radius: 4px;
  border: 2px solid black;
  hyphens: auto;
}
/* min-width schlägt max-width schlägt width */
@media (min-width: 770px) {
  .links-wenn-breit {
    align-items: start;
  }
}
@media (min-width: 300px) {
  .grid-container-column {
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    grid-auto-flow: column;
  }
  /* Zeilen für die Buchungs-Grids */
  .grid-rows {
    grid-template-rows: repeat(var(--grid-rows), auto);
  }
  .unsichtbar-wenn-breit {
    display: none;
  }
  .unsichtbar-wenn-schmal {
    display: flex;
  }
}