/* Grundlegende Resets und Schriftarten */
:root {
    /* Farbpalette */
    --primary-color: #7375f7; /* Helles Blau-Violett (Logo, Titel) */
    --primary-hover-color: #4d4dff; /* Etwas dunkler für Hover */
    --secondary-color: #4d4dff; /* Sattes Blau-Violett (Button) */
    --secondary-hover-color: #3c3ccc; /* Dunkler für Button Hover */
    --bg-dark: #0d111b; /* Sehr dunkler Hintergrund (Canvas) */
    --bg-medium: #161b22; /* Mittlerer Hintergrund (Header, Footer) */
    --bg-light: #1f2a3c; /* Hellerer Hintergrund (Mobile Menü) */
    --text-light: #aab2c1; /* Helle Schriftfarbe */
    --text-medium: #7f8ea3; /* Gedämpftes Blaugrau (Labels) */
    --text-white: #ffffff; /* Weiß für Buttons */
    --input-bg: #2d3442; /* Hintergrund für Eingabefelder */
    --border-color: #0074ff; /* Neonblau Rahmen */
    --focus-border-color: #7280ff; /* Lila bei Fokus */
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-neon: rgba(0, 116, 255, 0.4);
    --shadow-button: rgba(77, 77, 255, 0.4);

    /* Schriftgrößen (Basis für rem) */
    font-size: 16px; /* Standardbasis für rem */
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Verhindert Scrollbalken durch den Canvas */
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Inter als erste Wahl */
    color: var(--text-light); /* Helle Schriftfarbe für dunklen Hintergrund */
    display: flex; /* Für das Flexbox-Layout des Headers */
    flex-direction: column; /* Damit Header, Main, Footer untereinander sind */
    -webkit-font-smoothing: antialiased; /* Für glattere Schrift auf Webkit-Browsern */
    -moz-osx-font-smoothing: grayscale; /* Für glattere Schrift auf Firefox */
}

/* Canvas für den Hintergrund */
#backgroundCanvas {
    position: fixed; /* Fixiert den Canvas im Hintergrund */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Sorgt dafür, dass es hinter dem Inhalt liegt */
    background-color: var(--bg-dark); /* Sehr dunkles Blau/Schwarz */
}

/* Header-Styling */
header {
    background-color: var(--bg-medium); /* Etwas heller als der Body, für den Header */
    padding: 0.5rem 1.875rem; /* 8px 30px - Vertikales Padding weiter reduziert */
    box-shadow: 0 0.125rem 0.3125rem var(--shadow-light); /* 0 2px 5px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* Über dem Canvas */
    z-index: 100; /* Erhöhter z-index für den Header */
}

header .logo {
    font-size: 1.5rem; /* 24px */
    font-weight: bold;
    color: var(--primary-color); /* Anpassung an neue Farbpalette */
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex; /* Für die Ausrichtung des Logos */
    align-items: center;
    cursor: pointer; /* Zeigt an, dass das Logo anklickbar ist */
    z-index: 101; /* Sicherstellen, dass das Logo immer oben ist */
}

header .logo:hover {
    color: var(--primary-hover-color);
}

.header-logo {
    height: 2.0rem; /* 32px - Höhe des Logos weiter reduziert */
    width: auto;
    margin-right: 0.625rem; /* 10px Abstand zum Text */
}

/* Hamburger-Menü-Toggle (für Mobilgeräte) */
.menu-toggle {
    display: none; /* Standardmäßig ausgeblendet für Desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 1.875rem; /* 30px */
    height: 1.5625rem; /* 25px */
    cursor: pointer;
    z-index: 102; /* Sehr hoher z-index, um sicherzustellen, dass es sichtbar ist */
    position: relative; /* Wichtig für z-index */
}

.menu-toggle .bar {
    width: 100%;
    height: 0.1875rem; /* 3px */
    background-color: var(--text-light);
    border-radius: 0.3125rem; /* 5px */
    transition: all 0.3s ease;
}

/* Animation für das Hamburger-Symbol beim Öffnen */
.menu-toggle.active .bar:nth-child(2) {
    opacity: 0; /* Mittlerer Balken verschwindet */
}

.menu-toggle.active .bar:nth-child(1) {
    transform: translateY(0.6875rem) rotate(45deg); /* 11px */
}

.menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-0.6875rem) rotate(-45deg); /* 11px */
}

/* Navigation-Styling */
nav {
    display: flex; /* Standardmäßig flex für Desktop */
    transition: all 0.3s ease;
    z-index: 99; /* Standard z-index für Navigation auf Desktop */
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    margin-left: 1.5625rem; /* 25px */
}

nav ul li a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
    padding: 0.5rem 0; /* Für einen größeren Klickbereich */
    display: block; /* Wichtig für Padding */
}

nav ul li a:hover {
    color: var(--primary-color); /* Hover-Effekt wie die Logo-Farbe */
}

/* Media Queries für responsive Navigation */
@media (max-width: 48rem) { /* 768px */
    .menu-toggle {
        display: flex; /* Hamburger-Menü auf kleinen Bildschirmen anzeigen */
    }

    nav {
        position: absolute;
        top: 100%; /* Unter dem Header */
        left: 0;
        width: 100%;
        background-color: var(--bg-light); /* Hintergrundfarbe für mobiles Menü */
        flex-direction: column;
        align-items: center;
        padding: 1.25rem 0; /* 20px */
        box-shadow: 0 0.3125rem 0.625rem var(--shadow-medium); /* 0 5px 10px */
        display: none; /* Standardmäßig ausgeblendet */
        z-index: 98; /* Niedrigerer z-index als menu-toggle, aber höher als main */
    }

    nav.active {
        display: flex; /* Menü anzeigen, wenn aktiv */
    }

    nav ul {
        flex-direction: column;
        width: 100%;
    }

    nav ul li {
        margin: 0.625rem 0; /* 10px */
        width: 100%;
        text-align: center;
    }

    nav ul li a {
        padding: 0.625rem 0; /* 10px */
        display: block; /* Links füllen die ganze Breite */
        color: var(--text-light); /* Leicht heller für mobile Links */
    }
}

/* Hauptinhaltsbereich für Zentrierung */
main {
    flex-grow: 1; /* Nimmt den restlichen vertikalen Raum ein */
    display: flex; /* Aktiviert Flexbox */
    justify-content: center; /* Zentriert horizontal */
    align-items: center; /* Zentriert vertikal */
    padding: 1.25rem; /* 20px */
    box-sizing: border-box; /* Stellt sicher, dass Padding in der Breite enthalten ist */
    position: relative; /* Über dem Canvas */
    z-index: 1; /* Standard z-index für den Hauptinhalt */
}

/* Login-Formular-Box */
.login-form {
    background: rgba(19, 26, 42, 0.7); /* Dunkelblau-grau mit Transparenz (konstanter Wert für Lesbarkeit) */
    backdrop-filter: blur(0.3125rem); /* 5px */
    border-radius: 0.625rem; /* 10px */
    padding: 2.5rem; /* 40px */
    box-shadow: 0 0 1.25rem var(--shadow-neon); /* 0 0 20px */
    text-align: center;
    max-width: 25rem; /* 400px */
    width: 90%; /* Nimmt 90% der Breite bis max-width */
    margin: auto; /* Zentriert das Formular innerhalb des Flex-Containers */
    max-height: 85vh; /* Begrenzt die Höhe des Formulars auf 85% der Viewport-Höhe (von 90vh reduziert) */
    overflow-y: auto; /* Ermöglicht Scrollen, wenn der Inhalt die Höhe überschreitet */
    position: relative; /* Für z-index */
    z-index: 5; /* Stellen Sie sicher, dass das Formular über dem Hintergrund liegt */
}

.login-form h1 {
    color: var(--primary-color); /* Helles, leuchtendes Blau-Violett */
    margin-bottom: 1.875rem; /* 30px */
    font-size: 1.9rem;
    letter-spacing: 0.125rem; /* 2px */
    text-transform: uppercase;
}

.input-group {
    margin-bottom: 1.25rem; /* 20px */
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem; /* 8px */
    font-size: 0.9em;
    color: var(--text-medium); /* Gedämpftes Blaugrau für Labels */
}

.login-form input[type="email"],
.login-form input[type="password"] {
    width: calc(100% - 1.25rem); /* Breite anpassen für Padding (20px) */
    padding: 0.75rem 0.625rem; /* 12px 10px */
    border: 0.0625rem solid var(--border-color); /* 1px Neonblau als Rahmen */
    border-radius: 0.3125rem; /* 5px */
    background: var(--input-bg); /* Eingabefeld-Hintergrund */
    color: var(--text-light); /* Helle Textfarbe */
    font-size: 1em;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus {
    border-color: var(--focus-border-color); /* Helles Lila beim Fokus */
    box-shadow: 0 0 0.5rem rgba(114, 128, 255, 0.6); /* Leuchteffekt beim Fokus */
}

.login-button {
    background: var(--secondary-color); /* Sattes Blau-Violett */
    color: var(--text-white);
    padding: 0.875rem 1.5625rem; /* 14px 25px */
    border: none;
    border-radius: 0.3125rem; /* 5px */
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 1.25rem; /* 20px */
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.0625rem; /* 1px */
    outline: none; /* Entfernt den Standardfokus-Rahmen */
}

.login-button:focus-visible { /* Besser für Zugänglichkeit */
    outline: 0.125rem solid var(--focus-border-color); /* 2px sichtbarer Fokusrahmen */
    outline-offset: 0.1875rem; /* 3px Abstand vom Button */
}

.login-button:hover {
    background: var(--secondary-hover-color); /* Etwas dunkler beim Hover */
    transform: translateY(-0.125rem); /* Leichter Hoch-Effekt (2px) */
    box-shadow: 0 0.3125rem 0.9375rem var(--shadow-button); /* 0 5px 15px */
}

.register-text {
    margin-top: 1.5625rem; /* 25px */
    font-size: 0.9em;
    color: var(--text-medium);
}

.register-link {
    color: var(--focus-border-color); /* Linkfarbe */
    text-decoration: none;
    transition: color 0.3s ease;
}

.register-link:hover {
    color: var(--primary-hover-color); /* Hover-Linkfarbe */
    text-decoration: underline;
}

/* Footer-Styling */
footer {
    background-color: var(--bg-medium);
    padding: 0.9375rem 1.875rem; /* 15px 30px */
    text-align: center;
    margin-top: auto; /* Sorgt dafür, dass der Footer am unteren Rand bleibt */
    color: var(--text-light); /* Leicht heller für Footer-Text */
    font-size: 0.9em;
    position: relative; /* Über dem Canvas */
    z-index: 1;
}

/* NEU: CSS für das Info-Pop-up (Modal) */
.modal-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Leicht dunkler für mehr Kontrast */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Klicks gehen durch, wenn unsichtbar */
}

.modal-overlay.active {
    opacity: 1; /* Sichtbar machen */
    pointer-events: auto; /* Klicks fangen, wenn sichtbar */
}

.modal-content {
    background: rgba(19, 26, 42, 0.95); /* Dunkles Blau-Grau mit weniger Transparenz für Inhalt */
    backdrop-filter: blur(0.5rem); /* 8px */
    border-radius: 0.75rem; /* 12px */
    padding: 1.875rem; /* 30px */
    box-shadow: 0 0 1.875rem rgba(0, 116, 255, 0.6); /* 30px Blauer Leuchteffekt */
    text-align: center;
    max-width: 28.125rem; /* 450px */
    width: 90%;
    position: relative;
    transform: translateY(-1.25rem); /* Startposition leicht nach oben verschoben (20px) */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Opacity für weiches Erscheinen */
    color: var(--text-light);
    max-height: 85vh; /* Begrenzt die Höhe des Modals auf 85% der Viewport-Höhe (von 90vh reduziert) */
    overflow-y: auto; /* Ermöglicht Scrollen, wenn der Inhalt die Höhe überschreitet */
}

.modal-overlay.active .modal-content {
    transform: translateY(0); /* Animation nach unten beim Erscheinen */
    opacity: 1; /* Sicherstellen, dass der Inhalt auch sichtbar wird */
}

.close-button {
    position: absolute;
    top: 0.9375rem; /* 15px */
    right: 1.25rem; /* 20px */
    color: var(--text-medium);
    font-size: 1.75rem; /* 28px */
    cursor: pointer;
    transition: color 0.2s ease;
    outline: none; /* Entfernt den Standardfokus-Rahmen */
}

.close-button:focus-visible {
    outline: 0.125rem solid var(--focus-border-color);
    outline-offset: 0.1875rem;
}

.close-button:hover {
    color: var(--primary-color);
}

#modalTitle {
    color: var(--primary-color); /* Titel-Blau */
    font-size: 2em;
    margin-bottom: 0.9375rem; /* 15px */
}

#modalMessage {
    font-size: 1.1em;
    line-height: 1.5;
    margin-bottom: 1.5625rem; /* 25px */
}

#modalOkButton {
    background: var(--secondary-color);
    color: var(--text-white);
    padding: 0.75rem 1.875rem; /* 12px 30px */
    border: none;
    border-radius: 0.375rem; /* 6px */
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background 0.3s ease, transform 0.2s ease;
    outline: none; /* Entfernt den Standardfokus-Rahmen */
}

#modalOkButton:focus-visible {
    outline: 0.125rem solid var(--focus-border-color);
    outline-offset: 0.1875rem;
}

#modalOkButton:hover {
    background: var(--secondary-hover-color);
    transform: translateY(-0.125rem); /* 2px */
}

/* Responsive Anpassungen für das Modal */
@media (max-width: 30rem) { /* 480px */
    .modal-content {
        padding: 1.25rem; /* 20px */
    }
    #modalTitle {
        font-size: 1.8em;
    }
    #modalMessage {
        font-size: 1em;
    }
    #modalOkButton {
        padding: 0.625rem 1.25rem; /* 10px 20px */
    }
}

/* Responsive Anpassungen für das Login-Formular */
@media (max-width: 48rem) { /* 768px */
    .login-form {
        padding: 1.875rem; /* 30px */
        margin: 0.625rem auto; /* 10px */
        width: 95%; /* Etwas breiter auf Tablets */
    }

    .login-form h1 {
        font-size: 2em;
    }

    .login-button {
        padding: 0.75rem 1.25rem; /* 12px 20px */
    }
}

@media (max-width: 30rem) { /* 480px */
    .login-form {
        padding: 1.25rem; /* 20px */
        border-radius: 0.3125rem; /* 5px */
        margin: 0.625rem auto; /* 10px */
        width: 95%; /* Stellt sicher, dass es auf kleinen Bildschirmen passt */
    }

    .login-form h1 {
        font-size: 1.8em;
    }

    .input-group label,
    .register-text {
        font-size: 0.85em;
    }
}

/* --- NEUE STYLES FÜR WARTUNGSARBEITEN-CONTAINER --- */
.wartungsarbeiten-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Nimmt die volle Höhe des Viewports ein */
    width: 100vw; /* Nimmt die volle Breite des Viewports ein */
    position: fixed; /* Fixiert den Container über allem */
    top: 0;
    left: 0;
    z-index: 900; /* Unter dem Modal, aber über dem Hauptinhalt */
    background-color: rgba(0, 0, 0, 0.7); /* Leichter dunkler Hintergrund */
}

.maintenance-message {
    background: rgba(19, 26, 42, 0.9); /* Ähnlicher Hintergrund wie Login/Modal */
    backdrop-filter: blur(0.3125rem); /* 5px Weichzeichnung */
    border-radius: 0.625rem; /* 10px */
    padding: 2.5rem; /* 40px */
    box-shadow: 0 0 1.25rem var(--shadow-neon); /* Blauer Leuchteffekt */
    text-align: center;
    max-width: 30rem; /* 480px */
    width: 90%;
    color: var(--text-light);
}

.maintenance-message h1 {
    color: var(--primary-color); /* Titel-Farbe */
    font-size: 2.2em;
    margin-bottom: 1.5rem; /* 24px */
    letter-spacing: 0.125rem; /* 2px */
    text-transform: uppercase;
}

.maintenance-message p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 1rem; /* 16px */
}

.maintenance-message p:last-child {
    margin-bottom: 0; /* Kein Margin unter dem letzten Absatz */
}

/* Responsive Anpassungen für die Wartungsmeldung */
@media (max-width: 30rem) { /* 480px */
    .maintenance-message {
        padding: 1.5rem; /* 24px */
    }
    .maintenance-message h1 {
        font-size: 1.8em;
    }
    .maintenance-message p {
        font-size: 1em;
    }
}