/* Gesamtes Layout */
html, body {
    height: 100%; /* HTML und Body auf die volle Höhe des Viewports setzen */
    margin: 0; /* Standardabstände entfernen */
    display: flex;
    flex-direction: column; /* Layout in Spalten aufteilen */
    background-image: url('../../images/bright-squares.png'); /* Bild als Hintergrund */
    background-repeat: repeat; /* Bild wiederholen */
    background-size: auto; /* Originalgröße des Bildes beibehalten */
}

/* Hauptinhalt */
.content {
    flex: 1; /* Nimmt den verfügbaren Platz ein */
    padding: 20px; /* Innenabstand */
    margin-top: 82px; /* Platz für die Kopfzeile (Höhe der Kopfzeile) */
    margin-bottom: 62px; /* Platz für die Fußzeile (Höhe der Fußzeile) */
    margin-left: 120px; /* Platz für das Menüband */
    overflow: auto; /* Scrollen aktivieren, falls der Inhalt zu groß ist */
}

/* Anpassung für mobile Endgeräte */
@media (max-width: 768px) {
    .content {
        margin-left: 0px; /* Weniger Platz für kleinere Bildschirme */
    }
}

/* Layout für die Dropdown-Container */
.dropdown-container {
    display: flex;
    gap: 20px; /* Abstand zwischen den Dropdowns */
    margin-bottom: 20px; /* Abstand unter den Dropdowns */
    flex-wrap: wrap; /* Zeilenumbruch, falls der Platz nicht ausreicht */
}

/* Container für die Tabelle */
#tabellen-container {
    width: 100%; /* Tabelle soll die gesamte Breite einnehmen */
    margin-top: 20px; /* Abstand über der Tabelle */
}

/* Abwechselnde Zeilenfarben in Tabellen */
tr:nth-child(odd) {
    background-color: #fffacd; /* Hellgelb */
}

tr:nth-child(even) {
    background-color: #ffd700; /* Dunkelgelb */
}

/* Kopfzeile */
.header {
    position: fixed; /* Fixiert die Kopfzeile */
    top: 0; /* Am oberen Rand */
    left: 0; /* Am linken Rand */
    width: 100%; /* Über die gesamte Breite */
    height: 80px; /* Höhe der Kopfzeile */
    background-color: #ffff00; /* Gelber Hintergrund */
    border-bottom: 2px solid #ff0000; /* Untere Linie */
    z-index: 2000; /* Sicherstellen, dass die Kopfzeile über anderen Elementen liegt */
    display: flex;
    justify-content: space-between; /* Platz zwischen den Logos */
    align-items: center; /* Vertikale Ausrichtung */
}

.header img {
    width: 3vw; /* 3% der Bildschirmbreite */
    height: auto; /* Höhe proportional zur Breite */
}

/* Anpassung für mobile Endgeräte */
@media (max-width: 768px) {
    .header img {
        width: 50px; /* Feste Breite für mobile Geräte */
        height: auto; /* Höhe proportional zur Breite */
    }
}

.header-title {
    font-size: 1.5rem; /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
    text-align: center; /* Zentrierter Text */
    flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
    margin: 0; /* Kein zusätzlicher Abstand */
    color: #ff0000; /* Textfarbe */
}

/* Menü-Bürger-Bild */
.header-menu-buerger {
    width: 40px; /* Breite des Menü-Bürger-Bildes */
    height: auto; /* Höhe proportional zur Breite */
    margin-right: 10px; /* Abstand zum Logo rechts */
    cursor: pointer; /* Zeigt an, dass das Bild klickbar ist */
}

.logo-left {
    margin-right: auto; /* Linksbündig */
}

.logo-right {
    margin-left: auto; /* Rechtsbündig */
}

/* Standardmäßig: Desktop-Logo anzeigen, Menü-Bürger-Icon ausblenden */
.logo-right .menu-buerger {
    display: none;
}

.logo-right .logo-desktop {
    display: block;
}

/* Mobile Ansicht: Menü-Bürger-Icon anzeigen, Desktop-Logo ausblenden */
@media (max-width: 768px) {
    .logo-right .menu-buerger {
        display: block;
    }

    .logo-right .logo-desktop {
        display: none;
    }
}


/* Footer */
.footer {
    position: fixed; /* Fixiert die Fußzeile */
    bottom: 0; /* Am unteren Rand */
    left: 0; /* Am linken Rand */
    width: 100%; /* Über die gesamte Breite */
    height: 60px; /* Höhe der Fußzeile */
    background-color: #ffff00; /* Gelber Hintergrund */
    border-top: 2px solid #ff0000; /* Obere Linie */
    z-index: 2000; /* Sicherstellen, dass die Fußzeile über anderen Elementen liegt */
    text-align: center; /* Zentriert den Text */
    font-size: 0.9rem; /* Schriftgröße */
    color: #333; /* Textfarbe */
}

.footer a {
    color: #007bff; /* Linkfarbe */
    text-decoration: none; /* Entfernt die Unterstreichung */
}

.footer a:hover {
    text-decoration: underline; /* Unterstreichung beim Hover */
}