/* ======================================
    "Grundeinstellungen"
    ===================================== */

@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("../fonts/ABCMonumentGrotesk-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/*:root ist das oberste Element der Seite*/
:root {
  --page-padding: 16px;
  --font-base: "ABC Monument Grotesk", Arial, Helvetica, sans-serif;

  /* Typografisches Raster */
  --font-small: 24px;
  --line-small: 28px;

  --font-large: 40px;
  --line-large: 56px;

  --font-running-text: 20px;
  --line-running-text: 28px;

  --title-gap: 25px;
  --baseline-offset: 5px; /* damit Namensliste auf selber Grundlinie anfängt wie Projekttitel */
}

/* auf dem Destop werden die mobil anordnen ausgeschalten */
.mobil-version {
  display: none;
}

h1{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28.8px;
  color: rgb(150, 150, 150);
  margin-top: 22px;
  font-weight: normal;
}

/* Tabellen einstellungen display version */
#timetable-container {
  position: fixed;
  bottom: 0;
  left: 2%;
  right: 2%;
  background: white;
  padding-bottom: 12px;
  display: flex; /* nebeneinander anordnen*/
  align-items: flex-start;  /* oben ausrichten statt unten */
}

#timetable-content {
  overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: 500px;
}

#timetable-content.eingeklappt {
  max-height: 0;
}

table {
  font-size: var(--font-running-text);
  line-height: var(--line-running-text);
  border-collapse: collapse;
  width: 90%;
  margin: 0 auto;
}

td, th {
  border-bottom: 1px solid rgb(150, 150, 150);
  padding: 3px;
}

.buttom_timetable{
  border: none;
  font-size: var(--font-running-text);
  line-height: var(--line-running-text);
  background-color: white;
}


#timetable-container button {
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;    /* verhindert Zeilenumbruch im Button */
}


/* Animation der Tabelle */
#timetable-content {
  flex:1;
  overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: 500px;
}

#timetable-content.eingeklappt{
  max-height: 1;
}