.mehr-erfahren-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 220px;
    height: 60px;
    background-color: transpaarent; /* Farbton anpassen */
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
    padding: 0 20px;
}

.mehr-erfahren-button .text {
    flex: 1;
}

.mehr-erfahren-button .icon {
    width: 36px;
    height: 36px;
    background-image: url('http://typo3.p693473.webspaceconfig.de/fileadmin/bilder/mehr.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 gleichmäßige Spalten */
    /* Rows auf auto belassen, damit die Höhe der quadratischen Elemente die Reihenhöhe bestimmt */
    grid-template-rows: auto;
    gap: 10px; /* Abstand zwischen den Grid-Elementen auf 10px gesetzt */
    max-width: 1200px;
    margin: 0 auto;
}

.grid-item {
    background-color: #ffffff;
    padding: 10px; /* Padding auf 10px für alle Boxen */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Inhalt standardmäßig oben ausrichten */
    align-items: flex-start; /* Inhalt standardmäßig links ausrichten */
    box-sizing: border-box;

    /* Alle Grid-Items standardmäßig quadratisch machen */
    aspect-ratio: 1 / 1;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Spezifische Anpassungen für Textfelder */
.grid-item h2 {
    margin: 10px; /* Etwas weniger Abstand nach unten für h2 */
    font-size: 1.1em; /* Ggf. die Schriftgröße anpassen, damit sie in das Quadrat passt */
    line-height: 1.2;
}
.grid-item p {
    margin: 10px;
    padding-bottom: 24px;
    font-size: 0.8em; /* Kleinere Schriftgröße für den Fließtext */
    line-height: 1.3;
}

/* --- Layout für die obere Reihe (item-1 bis item-4) --- */
.item-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    padding: 0; /* Bilder haben kein Padding */
    overflow: hidden;
}

.item-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    background-color: #0d2a57;
    color: #ffffff;
}

.item-3 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    padding: 0;
    overflow: hidden;
}

.item-4 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    background-color: #0d2a57;
    color: #ffffff;
}

/* --- Layout für den Mittelteil (item-5 bis item-9) --- */
/* Das große Bild auf der linken Seite des Mittelteils (item-5) */
.item-5 {
    grid-column: 1 / 3; /* Spanne 2 Spalten im Hauptgrid */
    grid-row: 2 / span 2; /* Spanne 2 Reihen (von Reihe 2 bis zum Start von Reihe 4) */
    padding: 0;
    overflow: hidden;
    aspect-ratio: auto; /* Dieses Element soll sich an den Inhalt anpassen, da es gespannt wird */
}

/* EHB-Sektion (Bild und Text - oben rechts im Mittelteil) */
.item-6 { /* EHB Bild (klein, oben links in diesem 2x2 Block) */
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    padding: 0;
    overflow: hidden;
    /* aspect-ratio: 1 / 1; kommt vom .grid-item Standard */
}

.item-7 { /* EHB Text (rechts neben item-6) */
    grid-column: 4 / 5;
    grid-row: 2 / 3;
    background-color: #0d2a57;
    color: #ffffff;
    /* aspect-ratio: 1 / 1; kommt vom .grid-item Standard */
}

/* Kettenförderer-Sektion (Bild und Text - unten rechts im Mittelteil) */
.item-8 { /* Kettenförderer Bild (klein, unten links in diesem 2x2 Block) */
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    padding: 0;
    overflow: hidden;
    /* aspect-ratio: 1 / 1; kommt vom .grid-item Standard */
}

.item-9 { /* Kettenförderer Text (rechts neben item-8) */
    grid-column: 4 / 5;
    grid-row: 3 / 4;
    background-color: #0d2a57;
    color: #ffffff;
    /* aspect-ratio: 1 / 1; kommt vom .grid-item Standard */
}

/* --- Layout für die untere Reihe (item-10 bis item-13) --- */
/* Diese Elemente beginnen in der 4. Reihe, da der Mittelteil bis zur 3. Reihe geht */
.item-10 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    padding: 0;
    overflow: hidden;
}

.item-11 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    background-color: #0d2a57;
    color: #ffffff;
}

.item-12 {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
    padding: 0;
    overflow: hidden;
}

.item-13 {
    grid-column: 4 / 5;
    grid-row: 4 / 5;
    background-color: #0d2a57;
    color: #ffffff;
}


/* Responsive Anpassungen */
@media (max-width: 900px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Tablets */
        grid-template-rows: auto;
        gap: 10px; /* Abstände auch hier 10px */
    }

    .grid-item {
        grid-column: auto !important;
        grid-row: auto !important;
        aspect-ratio: 1 / 1 !important; /* Quadratisches Verhältnis beibehalten */
    }

    .item-5 {
        grid-column: 1 / 3 !important; /* Das große Bild spannt zwei Spalten */
        aspect-ratio: auto !important; /* Es soll sich an die Höhe anpassen, da es 2 Spalten spannt */
    }

    /* Die 2x2-Blöcke rechts bleiben in 2 Spalten nebeneinander */
    .item-6 { grid-column: 1 / 2 !important; }
    .item-7 { grid-column: 2 / 3 !important; }
    .item-8 { grid-column: 1 / 2 !important; }
    .item-9 { grid-column: 2 / 3 !important; }
}

@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr; /* Eine Spalte auf Mobilgeräten */
        grid-template-rows: auto;
        gap: 10px; /* Abstände auch hier 10px */
    }

    .grid-item {
        grid-column: 1 / 2 !important; /* Alle Elemente spannen die volle Breite */
        grid-row: auto !important;
        aspect-ratio: 1 / 1 !important; /* Quadratisch auf Mobilgeräten */
    }

    .item-5 {
        aspect-ratio: auto !important; /* Soll sich an die Höhe anpassen */
    }
}