:root {
  --primary-color: #004f9f;
  /* Standard-Farbe */
  --secondary-color: #fff;
  /* Standard-Farbe */
  --tertiary-color: #000;
  /* Standard-Farbe */
}

.dark-mode {
  --primary-color: #004f9f;
  /* Dark Mode-Farbe */
  --secondary-color: #000;
  /* Dark Mode-Farbe */
  --tertiary-color: #fff;
  /* Standard-Farbe */
}

.event-box {
  padding: 20px;
  border: 2px solid var(--secondary-color);
  border-radius: 5px;
  color: var(--secondary-color);
  font-size: 20px;
}

.event-details {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--secondary-color);
}

.event-info {
  flex-basis: 50%;
}

.only-show-next .event-details{
    display: none;
}
.only-show-next .event-details:first-child{
    display:flex;
}
.next {
    display: none;
}
.only-show-next .next{
    display: block;
}
.only-show-next .all {
    display: none;
}
.toggle-events::before {
  content: 'Weniger '
}
.only-show-next .toggle-events::before {
  content: 'Mehr '
}

@media (max-width: 767px) {
  .event-box {
    width: auto;
    position: static;
    margin-bottom: 10px;
  }
  
  .event-info {
    flex-basis: 100%;
  }
}
.toggle-events {
    position: absolute;
    right: 10%;
    padding: 10px 25px;
    font-size: 14px;
    background-color: #004f9f;
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
  }