/* Container für die Kacheln */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px; /* Abstand zwischen den Kacheln */
    width: 100%; /* Container immer vollbreit */
    margin-top: 20px; /* Abstand nach oben */
}

@media (max-width: 400px) {
    .grid-container {
        grid-template-columns: 1fr; /* Boxen nehmen 100% Breite ein */
    }
}

/* Kacheln */
.box {
    background-color: #002337;
    color: white;
    padding: 20px;
    border-radius: 4px; /* Etwas stärker abgerundete Ecken für einen modernen Look */
    text-align: left; /* Text linksbündig ausrichten */
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex; /* Flexbox verwenden, um Bild und Text zu positionieren */
    align-items: flex-start; /* Bild und Text oben ausrichten */
    gap: 20px; /* Abstand zwischen Bild und Text */
}

/* Hover-Effekt für Kacheln */
.box:hover {
    transform: translateY(5px); /* Leicht nach unten verschoben */
    box-shadow: initial;
}

/* Bild in der Kachel */
.box img {
    width: 50px; /* Bildbreite */
    flex-shrink: 0; /* Verhindert, dass das Bild verkleinert wird */
}

/* Text innerhalb der Kachel */
.box .text {
    flex: 1; /* Text füllt den restlichen Platz */
}