/* Grundlegende Einstellungen und Vorgaben */
body {
    background-color: #981914; 
    font-family: 'Times New Roman', Times, serif; 
    margin: 0;
    padding: 0;
    color: white; 
    text-align: center;
}

/* Container für zentrale Elemente */
.container {
    max-width: 1000px;
    margin: 0 auto; 
    padding: 20px;
}

/* Header/Hero-Sektion */
.hero-section {
    padding: 40px 20px;
}

/* NEU: Flex-Container für Logo und Adresse */
.logo-area {
    display: flex; /* Aktiviert Flexbox */
    justify-content: center; /* Zentriert die Gruppe horizontal */
    align-items: center; /* Zentriert die Elemente vertikal */
    gap: 40px; /* Abstand zwischen Logo und Adresse */
    margin-bottom: 40px;
}

/* Logo-Styling */
.logo {
    display: block; 
    max-width: 200px; /* Etwas kleiner gemacht, um Platz für die Adresse zu schaffen */
    height: auto; 
    /* margin wurde entfernt, da Flexbox die Position steuert */
}

/* Adresse-Styling */
.adresse {
    font-size: 1.2em;
    line-height: 1.5;
    text-align: left; /* Text linksbündig innerhalb der Adresse-Box */
    margin: 0; /* Entfernt Standard-Margin */
}


/* Responsivität für kleinere Bildschirme (Mobile First) */
@media (max-width: 700px) {
    
    .logo-area {
        flex-direction: column; /* Stapelt Logo und Adresse auf Mobilgeräten untereinander */
        gap: 15px; /* Kleinerer Abstand beim Stapeln */
    }
    
    .logo {
        max-width: 150px; 
    }
    
    .adresse {
        font-size: 1em;
        text-align: center; /* Adresse wieder zentriert auf Mobilgeräten */
    }
}

/* Styling für den Hauptinhalt */
main {
    padding: 20px;
}

h1 {
    font-size: 2.5em;
    margin-top: 0;
}