body
{
  display:flex;
  flex-direction:column;
  padding:0;
}

#title
{
  padding-top:5px;
  font-weight:bold;
}

#menu
{
  display:none;
}

#conditions-link
{
  float:right;
}

#conditions
{
  display:block;
}

#close
{
  display:none; /* Wir blenden den Schließen-Button von "Rechtliches" hier aus und mit .js-only-block wieder ein. */
}

div[id^='scrollbox-']
{
  overflow-x:auto;
   /* font-size:0; remove gap after child div */
  flex:1;
  position:relative;
  display:flex;
}

div[id^='points-']
{
  display:flex;
  align-items:flex-end;
  height:100%;
  box-sizing:border-box;
  gap:5px;
  padding:5px;
}

a[id^='button-']
{
  border:1px solid white;
  color:white;
  font-size:17px;
  padding:1px 2px;
}

a[id^='button-']:hover
{
  text-decoration:none;
}

a[id^='button-'].button-selected
{
  background-color:white;
  color:#004071;
}

.point
{
  background-image:linear-gradient(to top, orange, orange); /* wird von JavaScript überschrieben werden */
  position:relative; /* Damit es als Anker für die Child-Items gilt. */
  text-align:center;
  font-size:15px;
  border:1px solid white;
  flex-shrink:0;
  width:42px;
  display:flex;
  flex-direction:column;
}

.point-value
{
  padding-bottom:1px;
}

.point-date
{
  background-color:rgba(255, 255, 255, 0.5);
  color:black;
}

/* Hier muss ein Leerzeichen zwischen den Klassen sein, da es sich um Kindelemente haltet. */
.point-today .point-date, .point-today .point-value
{
  font-weight:bold;
}

@media (min-width:545px)
{
  #data-select
  {
    display:none;
  }
  #menu
  {
    display:inline-block;
  }
}