/* ######################### */
/* Globale Variablen (Markenfarben) */
/* ######################### */
:root {
    --brand-red: #e60028;
    --brand-blue: #05235F;
    --bg-dark: #313537;
    --text-light: #ffffff;
    --font-main: 'Open Sans', 'Helvetica Neue', Verdana, sans-serif;
}

/* ######################### */
/* Base & Reset */
/* ######################### */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--font-main);
    scroll-behavior: smooth;
    width: 100%;
    height: 100%;
    -webkit-font-smoothing: antialiased; /* Macht die Schrift auf Screens etwas weicher/edler */
}

body {
    background-color: #f4f6f9; /* Helles Standard-Theme, falls gewünscht */
    transition: background-color 0.3s ease; /* Weicher Übergang in den Dark Mode */
}

/* ######################### */
/* Dark Mode */
/* ######################### */
.dark-mode-body {
    background-color: var(--bg-dark);
}

/* ######################### */
/* Header (Modernisiert mit Flexbox) */
/* ######################### */
.header {
    display: flex;
    align-items: center;
    justify-content: center; /* Zentriert Logo und Text horizontal */
    gap: 1.5rem; /* Sorgt für perfekten Abstand zwischen Logo und Text */
    background-color: var(--brand-red);
    height: 70px; /* Minimal höher für einen modernen Look */
    padding: 0 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* Subtiler Schatten für Tiefe */
    position: relative;
    z-index: 100;
}

.header img {
    display: block;
    width: auto;
    max-height: 40px; /* Verhindert, dass das Logo den Header sprengt */
    object-fit: contain;
}

/* Du hast die Klasse noch .azubiportal genannt, ich hab .header-title als Alias ergänzt */
.header-title,
.azubiportal {
    color: var(--text-light);
    font-size: 1.25rem; /* Entspricht 20px */
    font-weight: 600;
    letter-spacing: 0.5px; /* Minimal gesperrt wirkt technischer/cleaner */
    text-transform: uppercase; /* App-Titel sehen in Caps oft moderner aus */
    margin: 0; /* Alte negative Margins restlos entfernt */
}

/* ######################### */
/* Strich unterm Header */
/* ######################### */
/* Anstatt eines leeren Divs mit Rahmen, nutzen wir einen sauberen Farb-Balken */
.headerstrich {
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--brand-blue);
    border: none;
    margin: 0;
    box-shadow: 0 2px 4px rgba(5, 35, 95, 0.2); /* Nimmt die Blaufarbe als leichten Glow mit auf */
}