/* Grundlegende Styles & Resets */
body {
    padding: 0;
    margin: 0;
    /* Eine dezentere Hintergrundfarbe, z.B. ein dunkles Grau/Blau */
    background-color: #2c3e50; /* Beispiel: Dunkles Schiefergrau */
    /* Eine moderne, gut lesbare Standardschriftart */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #ecf0f1; /* Heller Text für guten Kontrast zum dunklen Hintergrund */
    line-height: 1.6;
}

/* Wrapper für die Zentrierung auf der Seite */
#wrapper {
    /* Maximale Breite, damit es auf großen Bildschirmen nicht zu breit wird */
    max-width: 900px;
    /* Zentriert den Wrapper horizontal */
    margin: 50px auto;
    /* Padding innerhalb des Wrappers */
    padding: 20px;
}

/* Innerer Wrapper - wird zum Flex-Container */
#innerWrapper {
    display: flex; /* Aktiviert Flexbox */
    flex-wrap: wrap; /* Erlaubt den Boxen, in die nächste Zeile zu rutschen */
    /* Abstand zwischen den Boxen */
    gap: 20px;
    /* Verteilt den Leerraum zwischen den Boxen (optional, je nach gewünschtem Look) */
    /* justify-content: space-between; */ /* Sorgt für gleichmäßige Verteilung, kann letzte Zeile seltsam aussehen lassen */
    justify-content: center; /* Zentriert die Boxen, wenn Platz übrig ist */
}

/* Gemeinsame Styles für alle Link-Boxen */
.link-box {
    /* Basisbreite für jede Box. calc() zieht den halben Gap ab für zwei Spalten */
    flex-basis: calc(50% - 10px - 20px); /* 50% - halber Gap - Padding/Border */
    flex-grow: 1; /* Erlaubt Boxen zu wachsen, falls Platz ist */
    min-height: 120px; /* Mindesthöhe für die Boxen */
    /* Hintergrundfarbe der Boxen - heller als Body */
    background-color: #34495e; /* Beispiel: Etwas helleres Grau/Blau */
    /* Rahmen */
    border: 1px solid #4e6d8c; /* Dezenter Rahmen */
    /* Abgerundete Ecken */
    border-radius: 8px;
    /* Schatten für einen leichten Schwebe-Effekt */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Innenabstand */
    padding: 15px;

    /* Flexbox für die Zentrierung des Inhalts (des Links) in der Box */
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;   /* Vertikal zentrieren */
    text-align: center;    /* Text zentrieren (falls der Link mal umbricht) */

    /* Übergang für Hover-Effekte */
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Hover-Effekt: Wenn man mit der Maus über die Box fährt */
.link-box:hover {
    /* Hintergrund leicht aufhellen */
    background-color: #4e6d8c;
    /* Box leicht anheben */
    transform: translateY(-5px);
    /* Schatten verstärken */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* Styling für die Links innerhalb der Boxen */
.link-box a {
    /* Textfarbe - passt zum hellen Text auf dunklem Box-Hintergrund */
    color: #ecf0f1;
    /* Keine Unterstreichung */
    text-decoration: none;
    font-size: 18px; /* Etwas größere Schrift */
    font-weight: bold; /* Fettgedruckt für bessere Lesbarkeit */
    /* Stellt sicher, dass der Link den Klickbereich der Box ausfüllt (optional) */
    display: block; /* Nimmt die volle Breite/Höhe des Flex-Items ein */
    width: 100%;
    height: 100%;
    /* Erneut Flexbox, um sicherzustellen, dass der Text im a-Tag zentriert ist, falls display:block verwendet wird */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Optional: Style für besuchte Links (wenn gewünscht) */
/* .link-box a:visited {
    color: #bdc3c7; /* Beispiel: Etwas ausgegrauter */
/* } */

/* Optional: Style für den :focus-Zustand (wichtig für Tastaturnavigation) */
.link-box a:focus {
    outline: 2px solid #3498db; /* Blauer Umriss beim Fokussieren */
    outline-offset: 2px;
}

/* Responsivität: Auf kleineren Bildschirmen (z.B. Handys) die Boxen untereinander anordnen */
@media (max-width: 768px) {
    #wrapper {
        margin: 20px auto;
        padding: 10px;
    }

    #innerWrapper {
        gap: 15px; /* Etwas weniger Abstand */
    }

    .link-box {
        /* Jede Box nimmt die volle Breite ein (- voller Gap, falls vorhanden) */
        flex-basis: 100%;
        min-height: 100px; /* Höhe kann auf kleineren Screens geringer sein */
        padding: 10px;
    }

    .link-box a {
        font-size: 16px; /* Kleinere Schrift auf Mobilgeräten */
    }
}

/* Entferne die spezifischen .eins und .zwei Styles, da Flexbox die Anordnung übernimmt */
/* .eins, .zwei {...} sind nicht mehr nötig für das Layout */

/* Optional: Falls du doch unterschiedliche Hintergrundfarben für .eins und .zwei willst */
/*
.link-box.eins { background-color: #3a536b; }
.link-box.zwei { background-color: #3f5a74; }
.link-box.eins:hover { background-color: #4e6d8c; }
.link-box.zwei:hover { background-color: #537595; }
*/

/* Placeholder-Box, falls benötigt (siehe HTML Kommentar) */
.link-box.placeholder {
    background-color: transparent;
    border: none;
    box-shadow: none;
    pointer-events: none; /* Macht die Box nicht klickbar */
}