* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    background-color: #000; /* schwarzer Hintergrund */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* Styling für den Header-Bereich */
header {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0px;  /* Header wird 60px weiter nach oben verschoben */
    margin-bottom: 20px;
}

/* Styling für das Header-Bild */
.header-image {
    display: block;
    width: 30%;          /* Bild nimmt 30% der Breite ein */
    max-width: 800px;
}

/* Container für die Buttons, als Grid mit 2 Spalten */
.button-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Zwei gleich breite Spalten */
    gap: 10px 90px; /* Abstand zwischen den Buttons */
    width: 90%;
    max-width: 800px;
}

/* Styling der Buttons */
/* Styling der Links als Buttons */
.btn {
    display: inline-block; /* Ermöglicht die Einstellung von Breite und Höhe */
    width: 100%; /* Buttons füllen die gesamte Breite der Zelle */
    padding: 15px 30px;
    background-color: #000; /* schwarzer Hintergrund */
    color: #fff; /* weiße Schrift */
    border: 2px solid #fff; /* weiße Umrandung */
    text-align: center; /* Zentriert den Text */
    text-decoration: none; /* Entfernt die Unterstreichung */
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 0.3s;
    margin: 5px 0; /* Vertikale Abstände zwischen den Buttons */
}


/* Hover-Effekt für die Buttons */
.btn:hover {
    background-color: #333;
}