* {
    /* Stellt sicher, dass Padding und Border in der Breite enthalten sind */
    box-sizing: border-box; 
}

:root {
    /* Farbvariablen */
    --dark-bg: #1e1e1e;       /* Dunkler Hintergrund */
    --dark-surface: #25252691;  /* Etwas hellere Flächen (Karten, Sidelist) */
    --text-color: #e2e2e2;    /* Helle Textfarbe */
    --accent-color: #005dc7;  /* Helles, stylisches Blau */
    --accent-hover: #0056b3;  /* Dunkleres Blau beim Hover */
    --border-color: #383838;  /* Dunkle Rahmenlinien */
}

/* Allgemeine Stile */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    /* WICHTIG: Verhindert horizontale Scrollbalken (und den "Fleck") */
    overflow-x: hidden; 
}

/* MAINMENU (Titelleiste oben) */
#mainmenu {
    background-color: var(--dark-surface);
    color: var(--text-color);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    /* WICHTIG: Stellt sicher, dass alle Header-Kinder zentriert sind */
    align-items: center; 
    min-height: 40px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    position: sticky;
    top: 0;
    z-index: 1000;
}

#logo_9ps {
    /* WICHTIG: Setzt die Höhe auf die volle Höhe des Elternelements (.logo) */
    height: 100%; 
    width: auto; /* Behält das Seitenverhältnis bei */
    
    /* Korrektur für Bilder, die die Höhe des Headers sprengen wollen */
    max-height: 40px; /* Oder passen Sie diesen Wert an die gewünschte Header-Höhe an */
    
    margin-right: 10px; 
    vertical-align: middle;
}

.logo {
    margin: 0; /* WICHTIG: Entfernt Standard-H1-Margin, der die Höhe stört */
    color: var(--accent-color);
    font-size: 1.5em;
    
    /* WICHTIG: Flex und volle Höhe, um das Bild zu kontrollieren */
    display: flex;
    align-items: center; /* Zentriert Bild und Text zueinander */
    height: 100%; 
}

a {
    color: var(--text-color);
    text-decoration: none;
    margin-left: 20px;
    padding: 5px 10px;
    transition: color 0.3s, background-color 0.3s;
    border-radius: 4px;
}

a:hover {
    color: var(--accent-color);
    background-color: rgba(0, 123, 255, 0.1); /* Leichter blauer Hintergrund-Hover */
}

/* --- Einheitlicher Button-Stil (Übernehmen Sie den vorhandenen Stil) --- */
.accent-btn {
    background-color: var(--accent-color);
    color: var(--text-color);
    border: none;
    padding: 10px 20px; /* Einheitliches Padding */
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.1s;
}

.accent-btn:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px); /* Leichter Schwebe-Effekt */
}

/* Optional: Sekundärer Button-Stil */
.secondary-btn {
    background-color: var(--dark-surface);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    /* Nutzt das gleiche Padding wie accent-btn */
    padding: 10px 20px; 
    border-radius: 4px;
    cursor: pointer;
    font-weight: normal;
    transition: background-color 0.3s;
}
.secondary-btn:hover {
    background-color: var(--border-color);
}

.burger-menu {
    display: none; /* Auf Desktops versteckt */
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5em;
    cursor: pointer;
    margin-left: 15px;
}

/* Mobiles Menü (Anfangs versteckt) */
.mobile-nav {
    /* WICHTIG: Sollte Flex sein, damit die Kinder richtig angeordnet werden */
    display: flex; 
    flex-direction: column;
    
    background-color: var(--dark-surface);
    position: fixed; 
    top: 60px; /* Unterhalb des Headers (ca. 60px Höhe) */
    width: 100%;
    z-index: 999;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    
    /* Standardmäßig verstecken (z.B. durch Verschieben außerhalb des Bildschirms) */
    /* Da wir es mit .open anzeigen wollen, verwenden wir transform/opacity oder height: 0, 
       aber die einfachste Lösung ist die sofortige Anzeige mit display. */

    /* WICHTIG: Setze die Höhe auf 0 und die Sichtbarkeit auf 'hidden' oder verwende display: none */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out; /* Fügt eine Animation hinzu */
}

.mobile-nav.open {
    /* WICHTIG: Max-Höhe setzen, damit es eingeblendet wird */
    max-height: 500px; /* Eine Höhe, die garantiert den gesamten Menüinhalt zeigt */
    /* display: flex; /* Dies ist nicht mehr unbedingt notwendig, da es oben bereits auf 'flex' gesetzt wurde */
}

.mobile-nav a {
    color: var(--text-color);
    padding: 10px 20px;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
}

.mobile-nav a:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

/* Haupt-Layout */
#layout-container {
    display: flex;
    min-height: calc(100vh - 60px); /* Höhe des Viewports minus Header-Höhe */
}

/* SIDELIST (Links) */
#sidelist {
    width: 250px;
    background-color: var(--dark-surface);
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    border-right: 1px solid var(--border-color);
    flex-shrink: 0; 
    
    /* WICHTIG: Flexbox für vertikale Ausrichtung */
    display: flex;
    flex-direction: column;
}

#sidelist h3 {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
    margin-top: 0;
}

#sidelist ul {
    list-style: none;
    padding: 0;
}

#sidelist li {
    margin-bottom: 10px;
    font-size: 0.9em;
}

/* --- Sidelist Footer Styling --- */
.sidelist-footer {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.sidelist-footer a {
    display: block; /* Nimmt die volle Breite ein */
}

/* --- Sidelist Inhalt, der den gesamten Platz einnehmen soll --- */
.sidelist-content-grow {
    flex-grow: 1; 
    /* Fügt etwas Platz am Ende hinzu, bevor der Footer kommt */
    padding-bottom: 20px; 
}

.info-box {
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(0, 123, 255, 0.1); /* Hellblauer Hintergrund */
    border-left: 3px solid var(--accent-color);
    border-radius: 4px;
}

/* MAIN (Hauptinhalt) */
#main {
    flex-grow: 1; /* Nimmt den restlichen Platz ein */
    padding: 30px;
    /* Wichtig: Positionierung, damit Kinder-Elemente relativ dazu positioniert werden können */
    position: relative;
    min-height: 100vh;
    width: 100%;
    
    /* Hintergrundbild-Einstellungen (wie gehabt) */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    
    /* Transition für das sanfte Laden lassen wir drin, falls das Bild nachgeladen wird */
    transition: background-image 2s ease-out; 
    
    /* Sicherstellen, dass der Inhalt über dem Overlay liegt */
    z-index: 10;
}

/* Pseudo-Element für das dunkle Overlay */
#main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 🔑 Dunkel-Effekt: rgba(0, 0, 0, 0.4) erzeugt eine schwarze Schicht mit 40% Deckkraft */
    /* Du kannst den Wert 0.4 zwischen 0.1 (sehr hell) und 0.9 (sehr dunkel) anpassen */
    background-color: rgba(0, 0, 0, 0.95); 
    
    /* Wichtig: Das Overlay muss unter dem Inhalt (H1, P etc.) liegen */
    z-index: 1; /* Höher als das Bild (optional, falls Bild-Hintergrund in #main gesetzt) */
    pointer-events: none;
}

#main > * {
    /* Alle direkten Kindelemente im #main müssen über dem Overlay liegen. */
    position: relative; 
    z-index: 2; /* Höher als das Overlay (1) */
}

/* Den Inhalt nach vorne holen, damit er lesbar bleibt */
#main h1, 
#main p {
    position: relative;
    z-index: 3; /* Höher als das Overlay */
    color: white; /* Textfarbe auf hell ändern, falls nötig */
}

#main h2 {
    color: var(--accent-color);
    margin-top: 0;
    z-index: 3;
}

#main h3 {
    color: var(--accent-color);
    margin-top: 0;
    z-index: 3;
}

.card {
    background-color: var(--dark-surface);
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.card h3 {
    color: var(--accent-color);
}

/* --- Generische Formularfelder --- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    background-color: var(--dark-bg); /* Dunkler als die Surface */
    color: var(--text-color);
    border-radius: 4px;
    box-sizing: border-box; 
    transition: border-color 0.3s;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    /* Blauer Akzent beim Fokus */
    border-color: var(--accent-color);
    outline: none; /* Entfernt den Standard-Browser-Fokusring */
}

/* Anpassung der Labels */
label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: 500;
}

/* --- Einheitlicher Tabellen-Stil --- */
.data-table {
    width: 100%;
    border-collapse: collapse; /* Entfernt Zwischenräume zwischen Zellen */
    margin-top: 20px;
}

.data-table th, 
.data-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th {
    /* Header-Reihen mit blauem Akzent-Hintergrund */
    background-color: var(--accent-hover); 
    color: var(--text-color);
    font-weight: bold;
}

.data-table tr:nth-child(even) {
    /* Jede zweite Zeile etwas dunkler für bessere Lesbarkeit */
    background-color: rgba(0, 0, 0, 0.1); 
}

.data-table tr:hover {
    /* Blauer Akzent beim Hover über einer Zeile */
    background-color: rgba(0, 123, 255, 0.2); 
}

/* --- Dropdown-Container --- */
.user-dropdown {
    position: relative;
    display: inline-block;
}

/* Das Menü selbst */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0; /* Rechtsbündig unter dem Button */
    background-color: var(--dark-surface);
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 1001; /* Über dem Header-Schatten */
    border-radius: 4px;
    padding: 10px;
    border: 1px solid var(--accent-color);
}

.dropdown-content.show {
    display: block;
}

/* Stil für Links/Inputs im Dropdown */
.dropdown-content a {
    color: var(--text-color);
    padding: 8px 10px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid var(--border-color);
}

.dropdown-content a:hover {
    background-color: rgba(0, 123, 255, 0.1);
}

#login-form-dropdown label {
    font-size: 0.9em;
    margin-top: 10px;
}

/* Responsive Design für Mobilgeräte */
@media (max-width: 768px) {
    /* 1. Desktop-Elemente verstecken */
    .desktop-nav {
        display: none; 
    }

    /* 2. Burger-Menü anzeigen */
    .burger-menu {
        display: block; 
        /* WICHTIG: Entfernt standardmäßigen Button-Margin */
        margin: 0;
    }

    /* 3. Header anpassen (falls nötig, um die Höhe zu fixieren) */
    #mainmenu {
        /* WICHTIG: Muss vorhanden sein, um Kinder vertikal zu zentrieren */
        display: flex;
        align-items: center; /* Zentriert .header-left und .header-right vertikal */
    }

    /* 4. Header-Rechte Seite anpassen */
.header-right {
    display: flex;
    align-items: center;
    gap: 10px; /* Fügt Abstand zwischen Login und Burger-Menü hinzu */
}
    
    /* 5. Haupt-Layout anpassen */
    #layout-container {
        flex-direction: column;
    }

    #sidelist {
        width: 100%;
        box-shadow: none;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
}