body {
  padding-top: 5rem;
}

.header {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

h1 {
  font-size: 3.5rem; /* Größer für bessere Lesbarkeit */
  margin-bottom: 10px;
  font-weight: bold; /* Schrift fett */
}

p {
  font-size: 2rem; /* Größer für bessere Lesbarkeit */
  font-weight: bold; /* Schrift fett */
}

.table-container {
  max-height: 80vh; /* Maximale Höhe des Containers */
  overflow-y: auto; /* Scrollbalken nur für die Tabelle */
}

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

th, td {
  border: 1px solid #E0E0E0; /* Leichtes Grau für bessere Sichtbarkeit */
  padding: 15px; /* Mehr Abstand für bessere Lesbarkeit */
  text-align: left;
  font-size: 1.2rem; /* Größer für bessere Lesbarkeit */
  font-weight: bold; /* Schrift fett */
}

.green-row > td {
  background-color: #4CAF50; /* Angepasste Farbe für bessere Sichtbarkeit */
  color: white;
}

.red-row > td {
  background-color: #F44336;
  color: white;
}

.orange-row > td {
  background-color: #FF9800;
  color: black;
}

.blink {
  background-color: #4CAF50;
  color: white;
  animation: blink-animation 1.5s steps(5, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

.logo {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* Medienabfrage für mobile Geräte */
@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem; /* Verkleinert für mobile Geräte */
  }

  p {
    font-size: 1.8rem;
  }

  th, td {
    padding: 10px; /* Weniger Abstand für mobile Geräte */
    font-size: 1.5rem; /* Verkleinert für mobile Geräte */
  }

  .logo {
    width: 50px; /* Kleinere Logo-Größe für mobile */
  }
}