/* Allgemeine Stile für die gesamte Website */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header-Stile */
header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 20px; /* Mehr Luft zwischen Logo und Text */

    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optionaler Schatten */
}

    header h1 {
        margin: 0;
        font-size: 1.8em;
    }

    header img {
        height: 40px; /* Logo-Größe */
    }

/* Container-Stil für den Inhalt */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    width: 100%;
    margin: 20px auto;
    padding-top: 20px; /* Platz unter dem Sticky-Header */
}

/* Fußbereich-Stile */
footer {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    margin-top: auto;
}

    footer p {
        margin: 0;
        font-size: 0.8em;
    }

    footer a {
        color: #fff;
        text-decoration: none;
    }

/* Allgemeine Stile für .tile */
.tile {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 700px;
    margin-bottom: 20px;
}

    .tile p {
        color: #444;
        line-height: 1.6;
        margin-bottom: 10px;
    }

        .tile p:last-child {
            margin-bottom: 0;
        }

/* -------------------------------------------------- */
/* Spezifische Stile für die Index-Seite */
body.index-page {
    background-color: #f0f0f0; /* Heller Hintergrund für die Index-Seite */
}

.index-page .tile {
    text-align: center; /* Text wird zentriert */
    background-color: #fff;
}

.index-page h2 {
    color: #333;
}

.index-page p {
    color: #666;
    line-height: 1.6;
}

/* -------------------------------------------------- */
/* Spezifische Stile für die Impressum-Seite */
body.impressum-page {
    background-color: #f0f0f0; /* Hintergrundfarbe bleibt gleich */
}

.impressum-page .tile {
    text-align: left; /* Text wird links ausgerichtet */
    background-color: #fff; /* Weißer Hintergrund für Tile */
}

.impressum-page h2 {
    color: #333;
    margin-bottom: 20px;
}

.impressum-page p {
    color: #444;
    line-height: 1.6;
}

/* Optional: Weitere spezifische Stile können hier hinzugefügt werden */

/* Button-Stile */
.login-button {
    margin-top: 20px; /* Abstand für Login-Buttons */
}