@charset "utf-8";

/* Unumstößliche Basis für responsive Breitenberechnungen */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Neutraler, mittelgrauer Hintergrund zur optimalen Bildkontrolle */
/* =======================================================
   Das universelle Master-Raster (4-Spalten-Schablone)
   ======================================================= */
.master-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    /* Lotrechtes 4-Spalten-Bett */
    gap: 1.875rem;

    /* 30px Gitterabstand horizontal und vertikal */
    width: 100%;
    align-items: stretch;

    /* Dehnt alle Spaltenboxen auf absolute Gleichheit aus */
    margin-bottom: 2rem;
}

/* =======================================================
   NEU: DIE SONDERKLASSE (Das unzerstörbare Zwei-Etagen-Grid)
   ======================================================= */
@media (min-width: 900px) {
    .master-grid.master-grid-etagen {
        /* Erstellt zwei feste Zeilenbetten im selben Block: 
           Zeile 1 (1fr) für Bilder, Zeile 2 (auto) für Texte. */
        grid-template-rows: 1fr auto;
    }
}

/* =======================================================
   Spalten-Steuerung & Unzerstörbarer Bild-Schutz
   ======================================================= */
.grid-item {
    display: flex;
    flex-direction: column;

    /* Bild oben, Text direkt darunter */
    justify-content: flex-start;
    align-items: stretch;

    /* Dehnt die Textbox auf die volle Spaltenbreite aus */
    width: 100%;
}

/* Zwingt das gesamte Paket im Desktop-Modus starr in Zeile 1 der Etagen-Schablone */
@media (min-width: 900px) {
    .master-grid.master-grid-etagen .grid-item {
        grid-row: 1;
    }
}

/* Füllt das Höhenbett voll aus und zwingt alle Formate zum planen Abschluss */
.book-box {
    width: 100%;
    flex-grow: 1;
    display: flex;
    align-items: stretch;

    /* Zwingt alle Box-Inhalte auf exakt dieselbe Zeilenhöhe */
    justify-content: center;
    overflow: hidden;
}

/* Drückt die Scans in der Etagen-Schablone exakt an die Unterkante */
@media (min-width: 900px) {
    .master-grid.master-grid-etagen .book-box {
        align-items: flex-end;
    }
}

.book-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;

    /* Gleicht feinste Randsprünge aus und hält die Kanten plan */
    display: block;
}

/* -------------------------------------------------------
   Spalten-Steuerung für Sonderbreiten (Desktop ab 900px)
   ------------------------------------------------------- */
@media (min-width: 900px) {
    .double-width {
        grid-column: span 2;
    }

    /* NEU: Erstreckt die Text-Box auf dem Desktop über exakt 3 Spalten */
    .triple-width {
        grid-column: span 3;
    }

    /* NEU: Erstreckt die Header-Box auf dem Desktop über alle 4 Spalten */
    .full-width {
        grid-column: span 4;
    }
    
    /* Gitterzuweisungen für flache Matrix-Strukturen */
    .col-1 { grid-column-start: 1; }
    .col-2 { grid-column-start: 2; }
    .col-3 { grid-column-start: 3; }
    .col-4 { grid-column-start: 4; }
}

/* -------------------------------------------------------
   Bildunterschriften & Textboxen (Unzertrennlich unter dem Bild)
   ------------------------------------------------------- */
.caption {
    width: 100%;
    text-align: center;
    padding-top: 0.75rem;

    /* 12px Abstand direkt unter dem bündigen Bild */
    padding-bottom: 0.5rem;
}

/* Zwingt die Bildbeschriftungen auf dem Desktop in Zeile 2 der Etagen-Schablone */
@media (min-width: 900px) {
    .master-grid.master-grid-etagen .caption,
    .master-grid.master-grid-etagen .direct-grid-caption {
        grid-row: 2;
        align-self: start; /* Garantiert parallelen Textstart oben */
    }
}

/* NEU: Linksbuendiger Text-Stil speziell für längeren redaktionellen Inhalt */
.direct-grid-caption {
    width: 100%;
    text-align: left;
}

/* NEU: Verhindert das Quetschen/Stauchen von Bildern in der Text-Etage (Zeile 2) */
.master-grid-etagen .bild-im-text {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    display: block;
    object-fit: contain !important;
}

/* =======================================================
   RESPONSIVE ANPASSUNG: Perfekter Mobil-Modus
   ======================================================= */
@media (max-width: 899px) {
    .master-grid {
        grid-template-columns: 1fr;

        /* Schaltet vollautomatisch in eine Spalte um */
        gap: 2.5rem;
    }

    /* Setzt die Desktop-Spalten-Streckung mobil sauber zurück */
    .double-width {
        grid-column: 1 / -1 !important;
    }

    /* NEU: Setzt die 3-Spalten-Streckung mobil sauber auf die volle Breite zurück */
    .triple-width {
        grid-column: 1 / -1 !important;
    }

    /* NEU: Setzt die 4-Spalten-Streckung mobil sauber auf die volle Breite zurück */
    .full-width {
        grid-column: 1 / -1 !important;
    }

    /* Hebt alle Etagen-Zwänge mobil komplett auf */
    .master-grid.master-grid-etagen .grid-item,
    .master-grid.master-grid-etagen .caption,
    .master-grid.master-grid-etagen .direct-grid-caption {
        grid-row: auto !important;
    }
    
    /* MOBIL-SORTIERER: Zwingt die flachen Elemente, auf dem Smartphone 
       paarweise (Bild + Text direkt zusammen) nacheinander zu fließen. */
    .master-grid-etagen .book-box.col-1 { order: 1; }
    .master-grid-etagen .direct-grid-caption.col-1 { order: 2; margin-bottom: 1.5rem; }
    
    .master-grid-etagen .book-box.col-2 { order: 3; }
    .master-grid-etagen .direct-grid-caption.col-2 { order: 4; margin-bottom: 1.5rem; }
    
    .master-grid-etagen .book-box.col-3 { order: 5; }
    .master-grid-etagen .direct-grid-caption.col-3 { order: 6; margin-bottom: 1.5rem; }
    
    .master-grid-etagen .book-box.col-4 { order: 7; }
    .master-grid-etagen .caption.col-4 { order: 8; }
}