* {
    /* Sorgt dafür, dass width und height machen, was man erwartet */
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    background-color: red;
    font-family: "Archivo Variable", sans-serif;
    font-size: 16px;
    color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Mindestens so hoch wie der Bildschirm */
    margin: 0;
    h1,
    h2 {
        font-size: clamp(1rem, 0.4886rem + 2.2727vw, 2.25rem);
    }
}
.stickyheader {
    position: fixed;
    color: white;
    top: 0;
    font-size: clamp(1rem, 0.4886rem + 2.2727vw, 2.25rem);
    width: 100%;
    background: transparent;
    z-index: 1000; /*z index überlagert alles*/

    .mainmenu {
        display: flex;
        justify-content: space-between;
        padding: 1rem;
        align-items: flex-start;
        list-style: none;
        a:hover {
            text-decoration: underline;
        }
        a {
            text-decoration: none;
            color: inherit;
        }

        ul {
            list-style: none;
            margin: 0; /* NEU: Entfernt den Standard-Abstand des Browsers nach oben/unten */
            padding: 0; /* NEU: Entfernt standardmäßige Einrückungen */
        }
    }
    .brand-wrapper {
        display: flex;
        flex-direction: column; /* Stapelt Home und Termin untereinander */
        align-items: flex-start; /* Richtet beide exakt linksbündig aus */
    }
    .termin-text {
        margin: 5px 0 0 0; /* Ein kleiner Abstand nach oben zum Home-Link */
        padding: 0;
    }
}
/* Sorgt dafür, dass Bilder niemals breiter als ihr Container werden */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Verhindert unschöne Abstände unter dem Bild */
}

main {
    display: grid;
    margin-left: 1rem;
    margin-right: 1rem;
    img {
        min-height: 100vh;
    }
    p {
        font-size: clamp(1rem, 0.4886rem + 2.2727vw, 2.25rem);
    }

    .groß {
        font-size: clamp(3.125rem, -0.7102rem + 17.0455vw, 12.5rem);
        margin-top: 20%;
        margin-bottom: 0;
    }
    .data {
        display: grid;
        min-height: 100vh;
        justify-content: start; /* Horizontal: linksbündig */
        align-content: center;
    }
}
main.termine {
    margin-bottom: 100vh;
}
main.data2 {
    padding-top: 10%;
    p,
    h2 {
        font-size: clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);
    }
    h2 {
        font-weight: normal;
    }
}

footer ul {
    color: white;
    margin-bottom: 0.5rem;
    padding: 0.5rem; /* Entfernt Standard-Einrückung der Liste */
    list-style: none; /* Entfernt die Aufzählungspunkte */

    /* NEU: Aktiviert Flexbox, um die Elemente nebeneinander zu legen */
    display: flex;
    justify-content: space-between; /* Verteilt die 3 Elemente gleichmäßig (links, mitte, rechts) */
    align-items: center; /* Zentriert sie vertikal */
    gap: 1rem; /* Sicherheitsabstand, falls der Bildschirm kleiner wird */

    a {
        text-decoration: none;
        color: white;
    }
}
@media (max-width: 480px) {
    body {
        margin-top: 10%;
    }
}