:root {
    color-scheme: light; /* Lieber Arno, mir ist aufgefallen, dass meine Website im Dark Mode auf dem Handy farblich nicht optimal aussieht. Ich habe den Befehl recherchiert, in der Hoffnung, dass er das Problem löst. */
}
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #660000;
}
header {
    background-color: #E8D8D9;
    color: #660000;
    padding: 1rem 0;
    text-align: center;
}
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
nav a {
    text-decoration: none;
    display: inline-block;
    padding: 8pt;
    background-color: #ffffff;
    color: #660000;
    border-radius: 8pt;
    cursor: pointer;
    white-space: nowrap;
}
nav a:hover {
    background-color: #660000;
    font-weight: bold;
    color: #ffffff;
}
main {
    padding: 2rem;
}
footer {
    background-color: #660000;
    color: #ffffff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}

.angebote-grid, .team-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.angebote-grid article, .team-grid article {
    background-color: #ffffff;
    border: 5px solid #E8D8D9;
    padding: 1rem;
    width: 250px;
    text-align: center;
}

.angebote-grid article a, .team-grid article a {
    color: #660000;
    text-decoration: none;
}

.angebote-grid article a:hover, .team-grid article a:hover {
    color: #660000;
    text-decoration: none;
    background-color: #E8D8D9;
}
.angebote-grid img, .team-grid img, .artikel-img {
    max-width: 100%;
    height: auto;
}

table {
    width: 50%;
    margin: 1rem auto;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #660000;
    padding: 0.5rem;
    text-align: left;
}

th {
    background-color: #ffffff;
}

section img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
    background: none;
}
.textbox {  
    background-color: #E8D8D9;
    max-width: 800px;
    margin: 1rem auto;
    padding: 1rem;
    border-radius: 12px;
}

.textbox p {
    margin-bottom: 1rem;
}
.artikel-detail .artikel-img {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto;
}