/* ==========================================================================
   occasion-grid-5.css
   --------------------------------------------------------------------------
   styles.css definiert die Anlass-Karten als 4-Spalten-Grid. Seit Hinzufuegen
   des Anlasses "Scheidung" sind es 5 Karten — wir aendern auf 5 Spalten am
   Desktop, 3 Spalten am Tablet, 2 Spalten am Phone, 1 Spalte ganz schmal.
   styles.css bleibt unangetastet.
   ========================================================================== */

@media (min-width: 1100px) {
    .occasion-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
    }
}

@media (min-width: 760px) and (max-width: 1099px) {
    .occasion-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile (alle Phone-Groessen): 2 Karten pro Reihe — auch auf schmalen
   Bildschirmen, damit die Anlaesse-Sektion kompakt bleibt. */
@media (max-width: 759px) {
    .occasion-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Sehr schmale Phones: Padding der Karten leicht reduzieren, damit
   die 2-spaltige Anordnung auch bei 320-360 px nicht zu eng wird. */
@media (max-width: 460px) {
    .occasion-grid {
        gap: 10px;
    }
    .occasion-grid .occasion-card {
        padding: 18px 14px;
    }
    .occasion-grid .occasion-card h3 {
        font-size: 1.05rem;
    }
}

/* Kompakte, eher quadratische Karten (kein Beschreibungstext mehr).
   Weniger Vertikal-Padding, kleinere Abstaende. */
.occasion-grid .occasion-card {
    padding: 22px 18px;
}
.occasion-grid .occasion-card .occasion-number {
    margin-bottom: 12px;
    font-size: 0.78rem;
}
.occasion-grid .occasion-card .occasion-icon {
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
}
.occasion-grid .occasion-card h3 {
    font-size: 1.18rem;
    margin-bottom: 10px;
    line-height: 1.2;
}
.occasion-grid .occasion-card .occasion-link {
    font-size: 0.82rem;
    padding-top: 10px;
}