/* Allgemeine Stile fuer den gesamten Body */
body {
    font-family: Arial, sans-serif; /* Schriftart */
    margin: 0; /* Entfernt Standardabstand */
    padding: 0; /* Entfernt Standardinnenabstand */
    background-image: url('Hintergrund4.png'); /* Hintergrundbild */
    background-size: cover; /* Bild deckt gesamten Hintergrund ab */
    background-position: center; /* Bild wird zentriert */
    background-color: #121212; /* Dunkler Hintergrundfarbe fuer Darkmode */
    color: #E0E0E0; /* Heller Text fuer besseren Kontrast */
    height: 100vh; /* Hoehe des gesamten Viewports */
    display: flex; /* Flexbox Layout */
    flex-direction: column; /* Flexbox Spaltenrichtung */
    justify-content: center; /* Zentriert vertikal */
    align-items: flex-start; /* Zentriert horizontal auf der linken Seite */
    padding-left: 20px; /* Ein wenig Abstand von der linken Seite */
}

/* Stile fuer den Header */
header {
    text-align: center; /* Zentriert den Text */
    background: rgba(0, 0, 0, 0.8); /* Noch dunklerer, halbdurchsichtiger Hintergrund */
    padding: 20px; /* Innenabstand */
    width: 100%; /* Breite 100% */
    position: fixed; /* Header bleibt oben */
    top: 0; /* Positioniert den Header am oberen Rand */
    left: 0; /* Positioniert den Header am linken Rand */
}

.header-content {
    max-width: 1200px; /* Maximale Breite des Header-Inhalts */
    margin: 0 auto; /* Zentriert den Header-Inhalt */
}

.header-content h1 {
    font-size: 3rem; /* Schriftgröße für Überschrift */
    margin: 0; /* Entfernt Standardabstand */
    color: #FFFFFF; /* Weißer Text für Überschrift */
}

.header-content p {
    font-size: 1.5rem; /* Schriftgröße für Absatz */
    margin: 0; /* Entfernt Standardabstand */
    color: #B0B0B0; /* Hellgrauer Text für Untertitel */
}

/* Stile für den Hauptinhalt und die Buttons */
.button-container {
    display: flex; /* Flexbox für horizontale Ausrichtung */
    flex-direction: column; /* Buttons untereinander anordnen */
    gap: 20px; /* Abstand zwischen den Buttons */
    margin-top: 150px; /* Abstand nach oben */
    align-items: flex-start; /* Buttons linksbündig ausrichten */
}

.button-container button {
    padding: 15px 60px; /* Reduzierter Innenabstand der Buttons */
    font-size: 1.5rem; /* Schriftgröße der Buttons */
    color: #121212; /* Dunkler Text für besseren Kontrast auf hellem Button-Hintergrund */
    background-color: #E0E0E0; /* Heller Hintergrund für die Buttons */
    border: none; /* Kein Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Hand-Cursor bei Hover */
    transition: background-color 0.3s; /* Übergangseffekt */
    width: 700px; /* Feste Breite der Buttons */
    box-sizing: border-box; /* Padding und Border in die Breiten- und Höhenangabe einbeziehen */
}

.button-container button:hover {
    background-color: #B0B0B0; /* Dunklerer Hintergrund bei Hover */
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-content h1 {
        font-size: 2rem; /* Kleinere Schriftgröße auf Tablets und kleineren Bildschirmen */
    }
    .header-content p {
        font-size: 1rem; /* Kleinere Schriftgröße für Absatz */
    }
    .button-container button {
        font-size: 1rem; /* Kleinere Schriftgröße für Buttons */
        padding: 10px 40px; /* Kleinere Innenabstände für Buttons */
        width: 100%; /* Breite der Buttons auf 100% des Containers setzen */
        max-width: 700px; /* Maximale Breite der Buttons festlegen */
    }
}

@media (max-width: 480px) {
    .header-content h1 {
        font-size: 1.5rem; /* Noch kleinere Schriftgröße auf Smartphones */
    }
    .header-content p {
        font-size: 0.8rem; /* Noch kleinere Schriftgröße für Absatz */
    }
    .button-container button {
        font-size: 0.8rem; /* Noch kleinere Schriftgröße für Buttons */
        padding: 8px 30px; /* Noch kleinere Innenabstände für Buttons */
        width: 100%; /* Breite der Buttons auf 100% des Containers setzen */
        max-width: 700px; /* Maximale Breite der Buttons festlegen */
    }
}