/* Desktop-Design */
body {
    font-family: Arial, sans-serif; /* Schriftart Arial bzw. sans-serif */
    font-size: 16px; /* Standard-Schriftgröße */
    background-color: #f4f4f4; /* Helles Grau als Hintergrundfarbe */
    color: #333; /* Dunkelgraue Schriftfarbe */
}

header, hr {
    border: none; /* Keine Rahmenlinien um die Auswahlleiste */
    margin: 0; /* Kein Abstand um die Elemente herum */
}

/* Tabellen */
table {
    width: 100%; /* Tabellenbreite umfasst die gesamte Breite der Seite */
    border-collapse: collapse; /* Rahmenlinien der Zellen verschmelzen zu einer Linie */
}

th, td {
    padding: 8px; /* Innenabstand in den Zellen */
    text-align: left; /* Text linksbündig ausrichten */
    border: 1px solid #ccc; /* Graue Rahmenlinien um die Zellen */
}

/* Buttons und Links */
button, a {
    cursor: pointer; /* Mauszeiger wird zum Zeiger, wenn über Buttons oder Links gefahren wird */
    text-decoration: none; /* Keine Unterstreichung von Links */
}

/* =====================
   Mobile Design
===================== */
@media (max-width: 768px) { /* Für Bildschirme mit einer Breite von maximal 768px (z.B. Smartphones) */
    body {
        font-size: 16px; /* Etwas kleinere Schriftgröße für mobile Geräte */
    }

    table, th, td {
        font-size: 14px; /* Noch kleinere Schriftgröße für Tabellen auf mobilen Geräten */
    }

    /* Header auf Mobil kleiner */
    div[style*="display:flex"] {
        flex-direction: column; /* Header-Elemente untereinander anordnen */
        align-items: flex-start; /* Elemente am Anfang der Zeile ausrichten */
    }

    div[style*="display:flex"] img { /* Logo im Header anpassen */
        margin-bottom: 5px; /* Abstand unter dem Logo */
    }
}