/* Stellt sicher, dass die Seite immer die volle Höhe hat */
html, body {
    height: 100%;
    margin: 0;
    font-family: sans-serif;
}

/* Definiert das Hintergrundbild */
body {
    background-image: url('bg.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; /* Sorgt dafür, dass der Hintergrund beim Scrollen nicht mitbewegt wird */
}

.logo {
    max-width: 200px; /* Du kannst die maximale Breite des Logos hier anpassen */
    height: auto;
    border-radius: 4px; /* NEU: Fügt abgerundete Ecken hinzu */
}

/* --- Stile für Desktop --- */
@media (min-width: 769px) {
    .header {
        /* Positioniert das Logo links oben mit Abstand */
        padding: 30px;
    }
}

/* --- Stile für Mobilgeräte --- */
@media (max-width: 768px) {
    .header {
        /* Zentriert das Logo oben */
        display: flex;
        justify-content: center;
        padding: 20px;
    }
}