/* Gemeinsame Stile für alle Seiten */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f0f0f0; /* Hellgrauer Hintergrund in Graustufe */
    color: #333; /* Dunkelgrauer Text */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    text-align: right center;
    padding: 10px;
    position: relative; /* Position relativ für das Hintergrundbild */
}

#header-with-background {
    background-image: url('/dein-firmenlogo.png');
    background-size: contain; /* Hintergrundbild im Header enthalten, ohne zu strecken */
    background-position: left center; /* Bild links zentrieren */
    background-repeat: no-repeat; /* Hintergrundbild nicht wiederholen */
    color: #777; /* Grauer Text */
    padding: 30px 10px; /* Füge mehr Platz um den Text hinzu */
    height: 200px; /* Setze die Höhe des Headers auf 300px */
}

#logo-container {
    display: none; /* Verberge das eigentliche Bild */
}

#header-with-background img {
    max-width: 200px; /* Maximale Breite des Logos auf 200px begrenzen */
    height: auto;
}

h1 {
    margin: 0;
}

nav {
    text-align: center;
    margin-top: 10px;
}

/* Gleicher Stil für alle Buttons in der Navigation */
nav a,
nav .dropbtn {
    text-decoration: none;
    color: #fff; /* Weißer Text */
    display: inline-block;
    width: 150px; /* Feste Breite für alle Buttons */
    padding: 10px 0; /* Verringere die Höhe der Buttons */
    border-radius: 5px; /* Abgerundete Ecken */
    transition: background-color 0.3s; /* Fließender Übergang für Hervorhebung */
    background-color: #555; /* Dunkleres Grau für den Hintergrund */
    font-size: 16px; /* Gleiche Schriftgröße für alle Buttons */
}

nav a:hover,
nav .dropbtn:hover {
    background-color: #444; /* Hervorhebung bei Hover, noch dunkleres Grau */
}

/* Dropdown-Stile */
.dropdown {
    display: inline-block;
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #555; /* Dunkleres Grau wie bei den anderen Buttons */
    min-width: 150px; /* Feste Breite für alle Buttons im Dropdown */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px; /* Abgerundete Ecken im Dropdown */
}

.dropdown-content a {
    color: #fff;
    padding: 10px 0; /* Verringere die Höhe der Buttons im Dropdown */
    display: block;
    text-decoration: none;
}

.dropdown-content a:hover {
    background-color: #444; /* Hervorhebung bei Hover im Dropdown */
}

.dropdown:hover .dropdown-content {
    display: block;
}

section {
    margin: 20px 0;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
}

footer {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    background-color: #777; /* Dunkelgrauer Footer in Graustufe */
    color: white;
}

/* Media Query für kleinere Bildschirme (z.B. Mobilgeräte) */
@media (max-width: 767px) {
    header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    #header-with-background {
        padding: 20px 10px; /* Verringere den oberen und unteren Abstand */
    }

    #logo-container {
        display: block; /* Zeige das Firmenlogo in der mobilen Ansicht */
        text-align: center; /* Zentriere das Logo */
    }

    h1 {
        margin-top: 10px; /* Platzierung des Titels unter dem Logo */
    }

    nav {
        margin-top: 0; /* Verringere den oberen Abstand der Navigation */
    }

    /* Füge hier weitere Anpassungen für kleinere Bildschirme hinzu, falls nötig */
}