/* Grundstil */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f7fa; /* Hell moderner Hintergrund */
    color: #333;
}

/* Header */
header {
    background-color: #2c3e50; /* Dunkler Header */
    color: white;
    padding: 10px;
    text-align: center;
}

/* Hauptinhalt */
main {
    padding: 20px;
	
}

.button-list {
    display: flex;
    flex-direction: column;
    gap: 9px; /* Gleichmäßiger Abstand zwischen den Buttons */
    justify-content: center;
    max-width: 290px;
    margin: 0 auto;
}

.button {
    display: inline-block;
    padding: 5px 5px;
    background: linear-gradient(135deg, #3498db, #1D2259);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
	font-size: 0.8rem;
    transition: background 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: center;
}

.button:hover {
    background: linear-gradient(135deg, #1D2259, #3498db);
    transform: translateY(-2px);
}

/* Footer */
footer {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    text-align: center;
	font-weight: bold;
	font-size: 0.8rem;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-link {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.footer-link:hover {
    text-decoration: underline;
}

/* Standard-Styles (für größere Bildschirme) */
header {
  font-size: 12px; /* Größere Schrift auf Desktops */
  
}


/* Media Query für kleine Bildschirme (z.B. Smartphones) */
@media only screen and (max-width: 767px) {
  header {
    font-size: 10px; /* Kleinere Schrift für Mobilgeräte */
  }
  .button-list {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Gleichmäßiger Abstand zwischen den Buttons */
    justify-content: center;
    max-width: 290px;
    margin: 0 auto;
}
}


/* Media Query Landscape für kleine Bildschirme (z.B. Smartphones) */
@media (orientation: landscape,max-width: 767px) {
  header {
    font-size: 10px; /* Kleinere Schrift für Mobilgeräte */
	padding: 2px;
  }
  .button-list {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Gleichmäßiger Abstand zwischen den Buttons */
    justify-content: center;
    max-width: 290px;
    margin: 0 auto;
}
}



/* Oder noch spezifischer für sehr kleine Geräte */
@media only screen and (max-width: 480px) {
  header {
    font-size: 8px; /* Noch kleinere Schrift */
  }
}