/* ==========================================================================
   1. GRUNDDESIGN & ALLGEMEINES (Mondnacht mit Sternenmeer)
   ========================================================================== */
body { 
    font-family: Arial, sans-serif; 
    background: linear-gradient(180deg, #010105 0%, #05081f 50%, #101435 100%) !important;
    background-attachment: fixed !important; 
    color: #ffffff !important; 
    padding: 20px; 
    max-width: 950px;
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
}

/* Der leuchtende Vollmond (Oben rechts) */
body::before {
    content: "";
    position: fixed;
    top: 40px;
    right: 80px;
    width: 70px;
    height: 70px;
    background: #fffdf0; 
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    box-shadow: 
        0 0 20px rgba(255, 253, 240, 0.8), 
        0 0 60px rgba(255, 253, 240, 0.4), 
        0 0 120px rgba(255, 253, 240, 0.2);
}

/* Das dichte Sternenmeer im Hintergrund (Jetzt MIT Funkel-Animation!) */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        radial-gradient(white, rgba(255,255,255,.3) 1.5px, transparent 30px),
        radial-gradient(white, rgba(255,255,255,.25) 1px, transparent 20px),
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
        radial-gradient(#ffaa00, rgba(255,170,0,.15) 1px, transparent 25px), 
        radial-gradient(white, rgba(255,255,255,.1) 1px, transparent 15px);
    background-size: 350px 350px, 200px 200px, 280px 280px, 400px 400px, 150px 150px;
    background-position: 0 0, 30px 40px, 110px 180px, 250px 100px, 70px 220px;
    z-index: -2;
    pointer-events: none;
    
    /* HIER WIRD DIE ANIMATION GESTARTET: */
    animation: funkeln 4s ease-in-out infinite alternate;
}

/* DIE EFFEKT-LOGIK: Lässt die Helligkeit der Sterne sanft pulsieren */
@keyframes funkeln {
    0% {
        opacity: 0.5; /* Sterne glimmen etwas schwächer */
    }
    50% {
        opacity: 0.9; /* Volles, klares Aufleuchten */
    }
    100% {
        opacity: 0.6; /* Sanftes Zurückdimmen */
    }
}

/* Haupt-Container für die Ausrichtung der Formulare auf dem Bildschirm */
.login-container {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Überschriften: Elegant, zentriert, leuchtend und jetzt GRÖSSER */
h1 {
    color: #ffaa00;
    text-align: center;
    white-space: nowrap;
    font-size: 32px; /* Von 24px auf 32px erhöht für eine deutlich größere Schrift */
    margin-top: 60px; /* Schiebt die Überschrift selbst etwas tiefer nach unten */
    margin-bottom: 40px; /* Behält den sauberen Abstand zu den Eingabefeldern bei */
    text-shadow: 0 0 15px rgba(255, 170, 0, 0.6); /* Verstärkt den Leuchteffekt passend zur Größe */
}


/* Links (z.B. "Hier registrieren") */
a {
    color: #ffaa00;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   2. ELEMENTE FÜR DIE REGISTRIERUNGSSEITE (Zwei-Spalten-Layout)
   ========================================================================== */

/* Großer, mittiger Jugendschutz-Balken über den Spalten */
.juschg-container-mittig {
    background-color: rgba(25, 6, 6, 0.8) !important; 
    border: 1px solid #ff3333 !important; 
    border-radius: 6px;
    padding: 15px 20px;
    max-width: 750px; 
    width: 100%;
    margin-bottom: 25px; /* Schiebt die zwei Spalten darunter ein Stück nach unten */
    box-sizing: border-box;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 15px rgba(255, 51, 51, 0.2); 
    text-align: center; 
}

.juschg-container-mittig h4 {
    color: #ff3333; 
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.juschg-container-mittig p {
    margin: 0;
    font-size: 13px;
    color: #dddddd;
    line-height: 1.5;
}

/* Der Spalten-Verteiler: Zwingt Anleitung nach links und Formular nach rechts */
.registration-wrapper {
    display: flex !important;
    flex-direction: row !important; 
    justify-content: center !important;
    align-items: flex-start !important; 
    gap: 40px !important; 
    max-width: 750px;
    width: 100%;
    margin-top: 0px !important; /* Kein zusätzlicher Versatz nötig */
    box-sizing: border-box;
}

/* Linke Spalte: Die Anleitungs-Box */
.info-box {
    background-color: rgba(0, 0, 0, 0.8) !important;
    border: 1px dashed #ffaa00 !important;
    border-radius: 6px;
    padding: 20px;
    max-width: 350px; 
    width: 100%;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    margin: 0 !important; 
    box-sizing: border-box;
}

.info-box h3 {
    color: #ffaa00;
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 16px;
    text-align: center;
    text-shadow: 0 0 5px rgba(255, 170, 0, 0.3);
}

.info-box ul {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #e0e0e0;
    line-height: 1.6;
}

.info-box li {
    margin-bottom: 8px;
}


/* ==========================================================================
   3. FORMULARE & EINGABEFELDER (Login & Registrierung)
   ========================================================================== */
.chat-form {
    display: flex;
    gap: 10px;
}

/* Rechte Spalte: Das Formular (Und spezifisch für das Login-Formular) */
.registration-wrapper form, 
.login-container form {
    margin: 0 !important;
    margin-top: 30px !important; /* HIER IST DER TRICK: Schiebt NUR die Eingabefelder beim Login 80px tiefer nach unten! */
    max-width: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Eingabefelder im edlen Mitternacht-Stil */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="date"], 
select { 
    padding: 10px; 
    border-radius: 4px; 
    border: 1px solid #444; 
    background: rgba(10, 10, 20, 0.85); 
    color: #fff; 
    box-sizing: border-box;
    margin-bottom: 8px;                 /* Gleichmäßiger Abstand zwischen den Feldern */
}

select, input[type="date"] {
    width: 100%;
}

/* Senden-Buttons (Radio-Orange) */
input[type="submit"] { 
    padding: 10px 20px; 
    background: #ffaa00; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    color: #000; 
    font-weight: bold; 
    transition: background 0.2s;
    box-shadow: 0 4px 10px rgba(255, 170, 0, 0.3);
    margin-top: 10px;
}

input[type="submit"]:hover {
    background: #e09600;
}


/* ==========================================================================
   4. CHATRAUM-ELEMENTE (Nach dem Login)
   ========================================================================== */

/* Das Chatfenster (Transparentes Glasdesign mit orangem Rahmen) */
.chat-box { 
    background-color: rgba(0, 0, 0, 0.8) !important; 
    padding: 15px; 
    border-radius: 6px; 
    height: 350px; 
    overflow-y: auto; 
    border: 2px solid #ffaa00 !important; 
    margin-bottom: 20px; 
    backdrop-filter: blur(6px); 
}

/* Nachrichten im Chatfenster (Linienfrei) */
.chat-message {
    padding: 6px 0;
    border-bottom: none !important; 
    font-size: 15px;
    line-height: 1.4;
}

/* Avatar-Hover-Vorschau bei Mauszeigerkontakt */
.user-name-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #ffaa00;
    font-weight: bold;
}

.user-avatar-hover {
    display: none;
    position: absolute;
    bottom: 25px; 
    left: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%; 
    border: 2px solid #ffaa00;
    background: #222;
    z-index: 100;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.8);
    object-fit: cover;
}

.user-name-wrapper:hover .user-avatar-hover {
    display: block;
}

/* Responsive Weiche: Schiebt auf Handys alles sauber untereinander */
@media (max-width: 650px) {
    .registration-wrapper {
        flex-direction: column !important;
        align-items: center !important;
    }
    h1 {
        white-space: normal;
    }
}

/* ==========================================================================
   5. SPEZIFISCHE ANPASSUNGEN FÜR DIE LOGIN-SEITE (NEU AUSGEGLIEDERT)
   ========================================================================== */

/* Der Begrüßungstext zwischen Überschrift und Feldern */
.login-zwischen-text {
    font-size: 25px;        /* Schriftgröße */
    color: #7DF9FF;
    text-align: center;
    max-width: 450px;
    width: 100%;
    margin-top: 10px;        /* Abstand nach oben zur großen Überschrift */
    margin-bottom: 40px;     /* Abstand nach unten zu den Eingabefeldern */
    line-height: 1.6;
    text-shadow: 0 0 5px #7DF9FF, 0 0 10px #7DF9FF, 0 0 20px #7DF9FF;
}

/* Das Login-Formular (Erzwingt die saubere Box unter dem Text) */
.chat-form-login {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    width: 100%;
    margin: 0 auto !important;
}

/* Abstand für den Registrierungslink ganz unten */
.register-link-p {
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
}

/* Der zweite Zusatztext darunter (Mit kleinem Abstand) */
.login-zusatz-text {
    font-size: 22px;         /* Minimal kleiner für eine schöne Hierarchie */
    color: #2fdde0;          /* Ein etwas sanfteres Grau */
    text-align: center;
    max-width: 450px;
    width: 100%;
    margin-top: 10px;         /* DER KLEINE ABSTAND: Nur 10px Platz zum oberen Text! */
    margin-bottom: 35px;      /* Abstand nach unten zu den Eingabefeldern */
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Wir passen den Abstand vom ersten Text leicht an, damit es perfekt harmoniert */
.login-zwischen-text {
    margin-bottom: 10px !important; /* Entfernt den großen Abstand, da nun der zweite Text folgt */
}