/*  CSS-Stile für die Index-Webseite  */
/*body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 8;
    background-color: #fff;  Hintergrundfarbe für den gesamten Körper 
}*/
body {
    max-width: 45em;
    font-family: Arial, sans-serif;
    margin: -1em auto;
    padding: 8em;
    background-color: #ece3d7; /* Hintergrundfarbe beibehalten */
    color: black;
}

header, footer {
    background-color: #000000;
    color: #fff;
    padding: 1rem;
    text-align: center;
    display: flex; /* Flexbox für vertikale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    height: 3rem; /* Höhe des Headers in rem */
}

header h1 {
        margin: 0 auto; /* Zentrierte Ausrichtung des Textes im Header */
    }

footer {
    /*position: fixed;*/
    bottom: 0;
    max-width: 100%;
    height: 1rem; /* Höhe des Footers in rem */
}

 footer p {
        margin: 0 auto; /* Zentrierte Ausrichtung des Textes im Footer */
    } 
    /* Das "p" in der Zeile footer p steht für "Paragraph" und bezieht sich auf alle <p>-Elemente, die sich innerhalb des Footers befinden. */

.container {
    max-width: 60rem; /* Maximalbreite des Containers, also Block 1, 2, und 3 zusammen, in rem */
    margin: 1rem auto 1rem; /* Abstand oben und unten für den Container */
    padding: 1.5rem ; /* Padding des Containers in rem */
    display: flex;
    justify-content: space-between;
    background-color: #fff; /* Hintergrundfarbe für den Container */
}
.block {
    padding: 1.5rem;
    margin-bottom: 2rem; /* Abstand zwischen den Blöcken */
    color: #333;
    text-align: center; /* Überschriften zentriert */
}
.block-1, .block-3 {
    flex: 1;
    background-color: #e0e0e0; /* Farbe für Block 1 und Block 3 */
}
.block-2 {
    flex: 4; /* Block 2 ist 4x so breit wie  Block 1 und Block 3 */
    background-color: #f0f0f0; /* Farbe für Block 2 */
}
.list-item {
    margin-bottom: 0.8rem; /* Abstand zwischen den Listeneinträgen */
}
.list-item a {
    text-decoration: none; /* Link-Unterstreichung entfernen */
    color: #333; /* Farbe für den Link */
    display: block; /* Den Link als Blockelement anzeigen, um den gesamten Listenpunkt anklickbar zu machen */
    padding: 0.5rem 0; /* Etwas Abstand oben und unten für den Link */
}
.list-item a:hover {
    background-color: #f0f0f0; /* Hintergrundfarbe ändern, wenn der Link hoverd wird */
}


/* Media Query für kleine Bildschirme wie Smartphones */
@media screen and (max-width: 480px) {
    body {
        background-color: tan;
        color: white;
        padding: 1%;
    }

    header, footer {
        padding: 2%; /* Anpassung des Paddings für Header und Footer */
    }

    .container {
        margin: 5% auto 2%; /* Anpassung des Margins für den Container */
        padding: 0 2%; /* Anpassung des Paddings für den Container */
    }

    .block {
        padding: 2%; /* Anpassung des Paddings für die Blöcke */
        margin-bottom: 2%; /* Anpassung des Abstands zwischen den Blöcken */
    }

    .list-item a {
        padding: 1% 0; /* Anpassung des Paddings für die Listenpunkte */
    }
}