:root {
  --free-col: #39d64e50;
  --occ-grh: #c73c2a50;
  --occ-klh: #d1cf5150;
  --occ-jgd: #4066e250;
  --occ-trf: #921fc050;
}

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

.kalender,
.demo {
  width: 70vw;
  max-width: 700px;
  margin: 0 auto 10vh;
}

select {
  padding: 5px 15px;
  background: none;
  border: 2px solid #aaa;
  margin: 0 auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table:not(.demo) td {
  border: 1px solid black;
  padding: 25px;
  text-align: center;
}

table tr:nth-child(1) td {
  border: none;
  padding: 10px 25px;
}

table td.invalid {
  /* color: #aaa; */
  opacity: 0.3125;
}

table tr:not(:nth-child(1)) td,
.demo tr:nth-child(1) td {
  --grhalle: var(--free-col);
  --klhalle: var(--free-col);
  --jgdraum: var(--free-col);
  --treff: var(--free-col);
  background: linear-gradient(to bottom right,
      var(--grhalle) 25%,
      var(--klhalle) 25%,
      var(--klhalle) 50%,
      var(--jgdraum) 50%,
      var(--jgdraum) 75%,
      var(--treff) 75%);
}

table tr td.grhalle {
  --grhalle: var(--occ-grh) !important;
}

table tr td.klhalle {
  --klhalle: var(--occ-klh) !important;
}

table tr td.jgdraum {
  --jgdraum: var(--occ-jgd) !important;
}

table tr td.treff {
  --treff: var(--occ-trf) !important;
}

.demo {
  border-collapse: separate;
}

.demo td {
  border: none;
  padding: 5px;
}

.demo tr:nth-child(1) td {
  width: 50px;
  height: 50px;
}

.demo tr:nth-child(2) td {
  text-align: center;
  background: none !important;
}

@media screen and (max-width: 696px) {
  .kalender {
    width: 97vw;
    max-width: unset;
  }
}

@media screen and (max-width: 500px) {
  .kalender td {
    padding: 10px;
    font-size: 70%;
  }
}

@media screen and (max-width: 450px) {
  .kalender td {
    padding: 10px 0;
    max-width: 0;
  }
}

@media screen and (max-width: 358px) {
  .kalender td {
    padding: 15px;
    font-size: 100%;
  }

  .kalender {
    overflow-x: scroll;
    padding: 20px 0;
  }
}