/* MOTULEX - STYLESHEET 
   Zentrales Design-File für das Eternia-Archiv 
*/

:root {
    --eternia-dark-green: #1b4332;  /* Sattes Waldgrün */
    --eternia-mid-green: #2d6a4f;   /* Mittleres Grün für Hover */
    --eternia-soft-green: #f8faf9;  /* Minimaler Grünstich für Hintergründe */
    --motu-gold: #d4af37;           /* Gold für Akzente */
    --eternia-light-green: #2ecc71; /* Hellgrün für den Avatar-Ring */
}

body { 
    background-color: #ffffff; 
    color: #212529; 
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* --- NAVIGATION & HEADER --- */
.navbar { 
    background-color: #ffffff !important; 
    position: relative;
    z-index: 1000;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 4px solid var(--eternia-dark-green) !important;
}

.navbar-brand img {
    max-height: 80px; 
    width: auto;
    transition: transform 0.3s ease;
}

/* --- PROFIL-SIEGEL (OVERLAP DESIGN) --- */

.profile-seal-container {
    position: relative;
    display: flex;
    align-items: center;
    height: 60px; /* Kontrolle über die Höhe im Header */
}

/* Der weiße Balken, der die grüne Linie exakt unter dem Avatar löscht */
.line-breaker {
    position: absolute;
    right: -10px;
    bottom: -14px; /* Präzise Justierung auf die grüne Linie der Navbar */
    width: 145px;
    height: 12px;
    background-color: #ffffff;
    z-index: 1005; /* Über der Navbar-Linie, unter dem Avatar */
}

/* Das kreisrunde Siegel-Bild */
.avatar-seal {
    width: 130px; 
    height: 130px;
    object-fit: cover;
    border: 6px solid #ffffff; 
    outline: 3px solid var(--eternia-light-green); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    border-radius: 50%;
    background-color: #ffffff;
    
    /* Positionierung: Klebt oben bündig und hängt nach unten über */
    position: absolute;
    right: 0;
    top: -10px; /* Leicht eingerückt von oben für besseren Look */
    z-index: 1010;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.avatar-seal:hover {
    transform: scale(1.05) translateY(5px);
}

/* Box für den Begrüßungstext links neben dem Avatar */
.user-info-box {
    text-align: right;
    margin-right: 145px; /* Platz für 130px Avatar + Puffer */
    line-height: 1.2;
}

.username-header {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--eternia-light-green);
    text-transform: uppercase;
    display: block;
}

.welcome-sub {
    font-size: 0.75rem;
    color: #7f8c8d;
    display: block;
}

/* --- WEITERE ELEMENTE --- */

.nav-link {
    color: var(--eternia-dark-green) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.95rem;
    margin: 0 15px;
}

.news-badge {
    background-color: var(--eternia-dark-green);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

.content-spacer {
    margin-top: 80px; /* Platz für den hängenden Avatar */
}

footer {
    background-color: var(--eternia-soft-green);
    padding: 40px 0;
}