/* ==========================================================================
   Referenzseiten – moderne Optik (28.10.2026)
   --------------------------------------------------------------------------
   Wird NUR auf den beiden Referenzseiten geladen (index.php, Route-Datei
   verlegung-granitpflaster-referenzen-…-1.php / -2.php). Einblenden und
   Hover der Fotos kommen aus galerie-effekte.css (gemeinsam mit der
   Startseite). Hier nur, was die Referenzseiten zusätzlich brauchen.
   ========================================================================== */

/* Überschriften in Montserrat – passend zur Startseite. Größen bleiben wie
   bisher (Bootstrap-Klassen h3/h4/h5/h6 im HTML). */
.content-area .referenz-fotos h1,
.content-area .referenz-fotos h2,
.content-area .referenz-fotos h3,
.content-area .referenz-fotos h4 {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #2b2b2b;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

/* Fotos größer: 3 pro Reihe ab Laptop-Breite (≥ 992 px), 2 pro Reihe auf
   Tablet und Handy (Kundenwunsch 28.10.2026, vorher bis zu 6 kleine). Auf dem
   Tablet bleibt neben der Seitenleiste zu wenig Platz für 3 (nur ca. 95 px je
   Foto). Überschreibt nur hier die Bootstrap-Spalten (col-xl-2 col-lg-3
   col-md-4 col-6) – das HTML bleibt unverändert. */
.content-area .referenz-fotos .thumbnail-gallery > [class*="col-"] {
    flex: 0 0 auto;
    width: 50%;
}

@media (min-width: 992px) {
    .content-area .referenz-fotos .thumbnail-gallery {
        --bs-gutter-x: 1.25rem;
        --bs-gutter-y: 1.25rem;
    }

    .content-area .referenz-fotos .thumbnail-gallery > [class*="col-"] {
        width: 33.333333%;
    }

    /* Bildbeschreibung beim Überfahren etwas größer – die Fotos sind jetzt breiter */
    .content-area .referenz-fotos .thumbnail-gallery a.ed-schatten-bilder::after {
        font-size: 13px;
        padding: 0 0.75rem;
        bottom: 0.6rem;
    }
}

/* products.css setzt .thumbnail-gallery img auf feste 120 px Höhe (!important) –
   bei breiten Kacheln würde daraus ein flacher Streifen. Hier stattdessen
   Seitenverhältnis 4:3 (Format der Referenzfotos), auf allen Geräten. */
.content-area .referenz-fotos .thumbnail-gallery img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
}