/* Allgemeine Stile für den Body */
body {
    font-family: Verdana, sans-serif;
    color: #333333; /* Dunkles Grau für die gesamte Schriftfarbe */
    background-color: #e0f7ff;
    margin: 0;
    display: flex;
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: flex-start; /* Startet die vertikale Ausrichtung vom oberen Rand */
    height: 100vh;
    padding-top: 50px; /* Etwas Abstand oben */
}

/* Hauptcontainer */
#main {
    width: 80%; /* Der Inhalt wird auf 80% der Bildschirmbreite skaliert */
    max-width: 1200px; /* Maximale Breite von 1200px */
    display: flex;
    flex-direction: column; /* Vertikale Anordnung */
    align-items: center; /* Zentriert den Inhalt innerhalb von #main */
}

/* Bannerbereich */
#banner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

#banner img {
    width: 250px;
    height: 150px;
    margin-right: 20px;
    border: 1px dashed mediumblue;
}

/* Menü */
#menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
    position: absolute;
    left: 50%; 
    transform: translateX(-50%); /* Zentriert das Menü horizontal */
}

#menu a {
    text-decoration: none;
    color: darkblue;
    padding: 10px 0;
}

/* Inhaltsbereich */
#content {
    display: flex;
    flex-direction: column; /* Vertikale Anordnung der Inhalte */
    align-items: center; /* Zentriert den Inhalt innerhalb von #content */
    width: 100%;
    justify-content: flex-start; /* Zentriert den Inhalt vertikal im #content */
    height: 100%; /* Nimmt die volle Höhe des Containers ein */
}

/* Aktionen-Bereich */
#aktion {
    display: flex;
    flex-direction: column; /* Vertikale Anordnung der Aktionen */
    align-items: center; /* Zentriert den Inhalt innerhalb von #aktion */
    width: 100%;
}

#aktion img {
    display: block; /* Entfernt unnötige Leerbereiche */
    margin: 10px auto; /* Zentriert das Bild horizontal */
    max-width: 100%; /* Bild passt sich der Containerbreite an */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
    border: 2px solid mediumblue; /* Optionaler Rahmen */
    border-radius: 8px; /* Leicht abgerundete Ecken */
}

/* Produktinfo */
#produkt-info {
    text-align: center; /* Zentriert den Text */
    margin-top: 10px; /* Abstand zwischen Bild und Produktinformationen */
    padding: 10px; /* Innenabstand für bessere Lesbarkeit */
    background-color: #f0faff; /* Leichtes Hintergrund-Highlight */
    border: 1px solid #d0e7f7; /* Dünner Rahmen */
    border-radius: 8px; /* Abgerundete Ecken */
    width: 100%;
    max-width: 600px; /* Maximale Breite für das Produktinfo */
}

#produkt-info h3 {
    margin: 0 0 5px; /* Abstand nach unten, kein Abstand nach oben */
    color: darkblue; /* Dunkelblau für Überschriften */
    font-size: 1.2em; /* Leicht größerer Text */
}

#produkt-info p {
    margin: 5px 0; /* Vertikaler Abstand zwischen den Absätzen */
    font-size: 1em;
    color: #333; /* Dunkelgrau für Produktinfos */
}

/* Produktname als Link */
.produkt-name {
    color: darkblue; /* Linkfarbe */
    text-decoration: none; /* Keine Unterstreichung */
    font-weight: bold; /* Fett für Hervorhebung */
    font-size: 1.2em; /* Etwas größere Schrift */
}

.produkt-name:hover {
    text-decoration: underline; /* Unterstreichung beim Hover */
    color: mediumblue; /* Farbänderung beim Hover */
}

/* Neuigkeiten-Bereich (Jetzt identisch mit Aktionen-Bereich) */
#news {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert den Inhalt innerhalb von #news */
    width: 100%;
    margin-top: 30px;
}

#news img {
    display: block; /* Entfernt unnötige Leerbereiche */
    margin: 10px auto; /* Zentriert das Bild horizontal */
    max-width: 100%;
    height: auto;
    border: 2px solid mediumblue;
    border-radius: 8px;
}

/* Footer-Bereich */
#bottom {
    text-align: center;
    margin-top: 50px;
}

#kontakt {
    margin-top: 0;
    color: darkblue; /* Dunkelblau für Kontaktüberschrift */
}

/* Kontaktliste */
#kontakt-list {
    list-style-type: none; /* Keine Aufzählungszeichen */
    padding: 0;
    margin: 0;
}

#kontakt-list li {
    font-size: 1.1em;
    margin: 10px 0;
    color: #333; /* Dunkelgrau für die Kontaktinformationen */
}

#kontakt-list a {
    color: darkblue;
    text-decoration: none;
}

#kontakt-list a:hover {
    text-decoration: underline;
}