body {
    font-family: Verdana, sans-serif;
    color: #333333; /* Dunkles Grau für die gesamte Schriftfarbe */
    background-color: #f3f8fb;
    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 */
}
#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 */
}
#banner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    background-color: #d3e8f2;
    color: #333333; /* Setzt die Schriftfarbe im Banner auf dunkelgrau */
    font-size: 1.5em; /* Vergrößert die Schriftgröße im Banner */
}
#banner img {
    width: 250px;
    height: 150px;
    margin-right: 20px;
    border: 1px dashed #343444;
}
#menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 60px;
    position: absolute;
    left: 50%; 
    transform: translateX(-50%); /* Zentriert das Menü horizontal */
}
#menu a {
    text-decoration: none;
    color: #333333;
    padding: 10px 0;
}
#aktion {
    display: flex;
    flex-direction: column; /* Vertikale Anordnung der Aktionen */
    align-items: center; /* Zentriert den Inhalt innerhalb von #aktion */
    width: 100%;
}
#aktion h2 {
    font-family: Playfair Display;
    font-size: 35px
}

#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 #333333; /* Optionaler Rahmen */
    border-radius: 8px; /* Leicht abgerundete Ecken */
}
#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: #d3e8f2; /* 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,  
#produkt-info p {  
    margin: 5px 0; /* Einheitlicher vertikaler Abstand */  
    font-size: 1em; /* Standardgröße für den Text */  
    color: #333; /* Dunkelgrau für den Text */  
}  
.produkt-name {
    color: #333333; /* 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 */
}
#info {
    text-align: center; /* Zentriert den Text */
    margin-top: 10px; /* Abstand zwischen Bild und Produktinformationen */
    padding: 10px; /* Innenabstand für bessere Lesbarkeit */
    background-color: #d3e8f2; /* 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 */
}
#info h3,  
#info p {  
    margin: 5px 0; /* Einheitlicher vertikaler Abstand */  
    font-size: 1em; /* Standardgröße für den Text */  
    color: #333; /* Dunkelgrau für den Text */  
}  
#news {
    display: flex;
    flex-direction: column; /* Vertikale Anordnung der Aktionen */
    align-items: center; /* Zentriert den Inhalt innerhalb von #aktion */
    width: 100%;
}
#news h2 {
    font-family: Playfair Display;
    font-size: 35px
}
#news 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 #333333; /* Optionaler Rahmen */
    border-radius: 8px; /* Leicht abgerundete Ecken */
}
#bottom {
    text-align: left;
}
#bottom h3 {
    text-align-last: center;
    margin-top: 20px;
}
#kontakt {
    margin-top: 0;
    color: #333333; /* Dunkelblau für Kontaktüberschrift */
}
#kontakt-list li {
    font-size: 1.1em;
    margin: 10px 0;
    color: #333; /* Dunkelgrau für die Kontaktinformationen */
    font-family: Times New Roman
}

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

#kontakt-list a:hover {
    text-decoration: underline;
}
#linie {
    border: none; /* Entfernt den Standardrahmen */
    border-top: 3px solid #333333; /* Erzeugt eine dicke Linie */
    width: 100%;
    margin-top: 50px;
}