/* General Header Styles */
header {
    position: fixed; /* Header bleibt fixiert */
    top: -30px;
    left: 0;
    width: 100%; /* Volle Breite */
    z-index: 1000; /* Überlagert alle anderen Elemente */
    background-color: rgba(0, 0, 0, 0.9); /* Hintergrundfarbe */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Schatten für bessere Sichtbarkeit */
    padding: 15px 0;
    text-align: center;
    color: #fff; /* Schriftfarbe */
    box-sizing: border-box; /* Verhindert unerwartete Größenänderungen */
}

/* Hauptcontainer für Header-Inhalte */
.header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative; /* Sicherstellen, dass der Inhalt korrekt positioniert ist */
    background-color: rgba(0, 0, 0, 0.9); /* Dunkler Hintergrund */
}

/* Titelbereich des Headers */
header h1 {
    top: -40px;
    font-size: calc(1.2rem + .8vw); /* Dynamische Schriftgröße */
    color: #fff; /* Schriftfarbe */
    text-align: center;
}

header h2 {
    margin: 0;
    padding: 10px 0 5px 10px;
    font-size: calc(1.2rem + .8vw); /* Dynamische Schriftgröße */
    color: #fff; /* Schriftfarbe */
}

/* MR-Logo im Header - vereinfacht */
header .mr-title {
    position: absolute;
    left: 20px; /* Links orientiert */
    top: 50%; /* Vertikale Mitte */
    transform: translateY(-50%); /* Vertikale Ausrichtung */
    font-size: calc(1.5rem + 1vw); /* Dynamische Schriftgröße für Anpassung an Bildschirmauflösung */
    color: #FFF;
    font-weight: bold;
    z-index: 20; /* Sicherstellen, dass das Logo über anderen Elementen liegt */
}

header .mr-title a {
    color: #fff;
    text-decoration: none;
}

/* Navigation im Header */
header nav {
    margin-top: 0px; /* Abstand zum Titel */
}

header nav ul {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    display: flex;
    justify-content: center; /* Zentriert die Navigation horizontal */
    gap: 15px;
}

header nav ul li a {
    background-color: #2E86C1; /* Dunkleres Blau für die Buttons */
    text-decoration: none;
    padding: 5px 15px;
    border-radius: 5px; /* Abgerundete Ecken */
    transition: background-color 0.3s ease;
    font-size: calc(0.6rem + 0.3vw); /* Dynamische Schriftgröße */
    color: #fff;
}

header nav ul li a:hover {
    background-color: #5DADE2; /* Hellblau bei Hover */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Leichter Schimmer */
}

/* Abstand für den Hauptinhalt */
.main-container {
    margin-top: 80px; /* Platz für fixierten Header */
}

/* Spacer für Trennung */
header .spacer {
    margin: 0 10px;
    padding: 20px 10px 5px 10px;
    font-size: calc(0.8rem + 0.5vw); /* Dynamische Schriftgröße */
    letter-spacing: 10px; /* Buchstabenabstand */
    color: #fff; /* Schriftfarbe */
}