/* 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: 15px !important;
    padding-bottom: 15px !important;
    border-bottom: 4px solid var(--eternia-dark-green) !important;
}

.navbar-brand img {
    max-height: 80px; 
    width: auto;
    transition: transform 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.05);
}

.nav-link {
    color: var(--eternia-dark-green) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.95rem;
    margin: 0 15px;
}

.nav-link:hover {
    color: var(--eternia-mid-green) !important;
    text-decoration: underline;
}

/* --- PROFIL-SIEGEL (OVERLAP DESIGN) --- */

/* Der Container innerhalb der Navbar-Collapse */
.profile-seal-container {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

/* Weißer Balken, der die grüne Linie der Navbar unter dem Avatar löscht */
.line-breaker {
    position: absolute;
    right: -15px;
    bottom: -19px; /* Positioniert ihn exakt auf der grünen Linie */
    width: 150px;
    height: 8px; /* Etwas dicker als die Linie selbst */
    background-color: #ffffff;
    z-index: 1005;
}

/* Das kreisrunde Siegel-Bild */
.avatar-seal {
    width: 120px; 
    height: 120px;
    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 und hängt über */
    position: absolute;
    right: -5px;
    top: -45px; /* Schiebt ihn nach oben Richtung Browserrand */
    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 */
.user-info-box {
    text-align: right;
    margin-right: 135px; /* Platz für den 120px Avatar + kleiner 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;
}

/* --- ALLGEMEINE ELEMENTE --- */

.news-badge {
    background-color: var(--eternia-dark-green);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}

.card { 
    background-color: var(--eternia-soft-green); 
    border: 2px solid #eee; 
    border-radius: 0px; 
    transition: all 0.3s ease;
}

.card:hover {
    border-color: var(--eternia-dark-green);
    box-shadow: 0 15px 30px rgba(27, 67, 50, 0.1);
}

.card-title {
    color: var(--eternia-dark-green);
    font-weight: 800;
    text-transform: uppercase;
}

.btn-primary { 
    background-color: var(--eternia-dark-green); 
    border: none; 
    border-radius: 0;
    padding: 10px 20px;
    font-weight: bold;
}

.btn-primary:hover { 
    background-color: var(--eternia-mid-green); 
}

.btn-outline-success {
    color: var(--eternia-dark-green);
    border-color: var(--eternia-dark-green);
    border-radius: 0;
}

.btn-outline-success:hover {
    background-color: var(--eternia-dark-green);
    color: #ffffff;
}

footer {
    background-color: var(--eternia-soft-green);
    padding: 40px 0;
}

/* Abstandshalter für den Content unter dem Header */
.content-spacer {
    margin-top: 60px;
}