/* style.css (Update) */

:root {
    --text-color: #FAFAFA; 
    --background-color: #000000; 
    --accent-color: #E63B8E; /* Das Magenta des Dushi-Logos */
    --font-stack: 'Roboto Mono', monospace; 
}

body, html {
    height: 100%;
    margin: 0;
    font-family: var(--font-stack);
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none; 
}

#birkenbihl-motto {
    text-align: center;
    /* Reduziert den oberen Rand, um das Motto ganz nach oben zu schieben */
    margin-top: 5px; 
    margin-bottom: 40px; /* Abstand zum Haupt-Statement ist wichtig */
    
    font-size: 0.9em; 
    font-weight: 300; 
    font-style: italic; 
    opacity: 0.7; 
    line-height: 1.4;
    padding: 0 10px; 
}

/* WICHTIG: Flex-Anpassung für den Container */
.lockscreen-container {
    width: 100%;
    max-width: 500px; 
    height: 100vh; 
    display: flex;
    flex-direction: column;
    /* Reduziert das Padding, um Platz zu sparen */
    padding: 10px; 
    box-sizing: border-box;
}

/* 1. Obere Info-Leiste */
.top-info {
    display: flex;
    justify-content: space-between;
    font-weight: 300; 
    font-size: 1.2em;
    margin-bottom: auto; 
    opacity: 0.8; 
}

/* Anpassung der Hauptschrift, falls sie auf kleinen Geräten zu groß war */
.main-statement {
    /* Diese Zeile bleibt, um den Container selbst mittig zu halten, 
       aber wir ändern die Textausrichtung im nächsten Schritt */
    text-align: left; /* NEU: Text linksbündig */
    line-height: 0.9; 
    margin-bottom: 20px; 
    
    /* WICHTIG: Begrenzt die Breite des Containers, damit der Text linksbündig bleibt
       und nicht über den Bildschirmrand hinausragt, aber noch in der Mitte sitzt.
       Die 500px des lockscreen-container sind hier als Anhaltspunkt hilfreich. */
    max-width: 450px; 
    width: 90%; 
    
    /* ZENTRIERT den Block (das Text-Feld) auf dem Bildschirm */
    align-self: center; /* WICHTIG in einem Flex-Container (lockscreen-container) */
    
    /* Zusätzliche Anpassung, um die Zentrierung zu gewährleisten: */
    margin-left: auto;
    margin-right: auto;
}

.main-statement h1 {
    font-size: 6em; 
    font-weight: 100; 
    margin: 0;
    padding: 0;
    /* text-align: left; ist nun durch das Parent-Element gesetzt. */
}

/* MEDIA QUERY: Stellt sicher, dass die Schrift auf sehr kleinen Handys skaliert */
@media (max-width: 400px) {
    .main-statement h1 {
        font-size: 4.5em; /* Kleiner auf sehr schmalen Bildschirmen */
    }
}

/* NEU: Vitalwerte-Leiste */
.vital-signs-bar {
    display: flex;
    justify-content: center;
    gap: 30px; 
    margin: 30px 0 20px 0; 
    font-weight: 300;
    font-size: 1.1em;
}

.vital-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.9;
}

.vital-item .emoji {
    font-size: 1.5em; 
    margin-bottom: 5px;
}

.vital-item .label {
    font-size: 0.8em; 
    opacity: 0.7;
    /* Der Vibe: Sehr dünne Schrift, nur essenzielle Infos */
}

/* 3. Logo-Bereich (wurde neu positioniert) */
.logo-area {
    text-align: center;
    margin-top: auto; /* Schiebt das Logo in den unteren Bereich */
    padding-bottom: 20px;
}

.dushi-logo {
    width: 80px; 
    height: 80px;
    /* Filter, um die Magenta-Farbe zu treffen, falls das Bild ein Schwarz-Weiß-SVG ist. 
       Wenn Sie das farbige PNG/JPEG verwenden, kann diese Zeile entfallen: */
    filter: invert(1) brightness(2) saturate(2) hue-rotate(-60deg) saturate(2); 
}


/* 4. Untere Info-Leiste */
.bottom-info {
    display: flex;
    justify-content: center; 
    gap: 15px; 
    font-weight: 300;
    font-size: 1em;
    opacity: 0.6; 
    padding-bottom: 20px;
}

.moon-icon {
    font-size: 1.2em;
}

/* style.css (Ergänzung für die Vitalwerte) */

#vital-signs-container {
    text-align: center; /* Zentriert die Emojis */
    margin-top: 15px; 
    margin-bottom: 20px; /* Abstand zum Haupt-Statement */
    font-size: 1.8em; /* Emojis sollen prominent sein */
    opacity: 0.9;
}

.vital-sign {
    /* Optional: Fügt etwas Platz zwischen den Emojis hinzu */
    margin: 0 5px; 
}

.date-stamp {
    font-size: 0.5em; /* Macht das Datum klein */
    opacity: 0.5;
    font-style: italic;
    margin-left: 10px;
}