/* =======================================================
   Ausrüstungs-Seite Styles
   ======================================================= */

/* =======================
   MAIN WRAPPER
   =======================
   - Kümmert sich nur um Abstand und maximale Breite
   - KEIN Layout (kein Grid mehr!)
   - Verhindert Konflikte mit anderen CSS-Dateien
*/
main {
    padding: 40px;
    max-width: 1200px;
    margin: auto;
}

/* =======================
   GRID CONTAINER (NEU!)
   =======================
   - Dieser Container steuert das Layout der Items
   - Wichtig: Nur hier wird das Grid definiert
*/
.equipment-grid {
    display: grid;

    /* Desktop:
       - 4 gleich breite Spalten
       - passt perfekt für große Bildschirme
    */
    grid-template-columns: repeat(4, 1fr);

    gap: 20px; /* Abstand zwischen den Karten */
}

/* =======================
   EINZELNE ITEMS
   ======================= */
.equipment-item {
    background-color: var(--card-bg); 
    box-shadow: var(--card-shadow);   
    border-radius: 12px;
    overflow: hidden;

    /* kleine Hover-Animation */
    transition: transform 0.2s;
}

/* Hover Effekt (nur Desktop relevant) */
.equipment-item:hover {
    transform: translateY(-5px);
}

/* =======================
   BILD IM ITEM
   =======================
   - füllt die gesamte Breite der Karte
   - bleibt proportional
*/
.equipment-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* =======================
   TEXT / BESCHREIBUNG
   ======================= */
.equipment-item .caption {
    color: var(--text-color);
    padding: 15px;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* =======================================================
   RESPONSIVE ANPASSUNGEN
   ======================================================= */

/* =======================
   TABLET (bis 900px)
   =======================
   - statt 4 → nur noch 2 Spalten
   - bessere Lesbarkeit
*/
@media (max-width: 900px) {
    .equipment-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    main {
        padding: 30px; /* etwas weniger Rand */
    }
}

/* =======================
   SMARTPHONE (bis 600px)
   =======================
   - nur noch 1 Spalte
   - verhindert gequetschte Inhalte
*/
@media (max-width: 600px) {
    .equipment-grid {
        grid-template-columns: 1fr; /* alles untereinander */
    }

    main {
        padding: 20px;
    }
}

/* =======================
   SEHR KLEINE GERÄTE
   ======================= */
@media (max-width: 400px) {
    main {
        padding: 15px;
    }

    .equipment-item .caption {
        font-size: 0.9rem; /* Text leicht kleiner */
    }
}