/* Nur die Kalenderübersicht; Kategorie- und Produktstile bleiben unverändert. */
.kalender-uebersicht .kalender-kopfgrafik {
    background: var(--bs-light);
}
.kalender-uebersicht .kalender-kopfgrafik-modelle {
    display: flex;
    justify-content: center;
    gap: .75rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.kalender-uebersicht .kalender-kopfgrafik img {
    width: calc((100% - 1.5rem) / 3);
    max-width: 200px;
    height: auto;
    object-fit: contain;
}
.kalender-uebersicht .kalender-modell {
    display: block;
    color: inherit;
    text-decoration: none;
}
.kalender-uebersicht .kalender-modell img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.kalender-uebersicht h2 {
    margin: 1rem 0 .5rem;
    font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: break-word;
}
.kalender-uebersicht .kalender-modell:hover h2 {
    text-decoration: underline;
}
.kalender-uebersicht a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

.kalender-uebersicht .kalender-titel {
    margin-top: 1.75rem;
}
.kalender-uebersicht .kalender-modelle {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}
/* Auf Mobil natürliche Höhen; Angaben und Preis stehen mittig unter dem Bild. */
.kalender-uebersicht .kalender-information {
    padding-inline: .75rem;
    text-align: center;
    overflow-wrap: break-word;
}
.kalender-uebersicht .kalender-details {
    margin: 0;
    color: #818181;
    font-size: .95rem;
    line-height: 1.45;
}
.kalender-uebersicht .kalender-details > div + div {
    margin-top: .125rem;
}
.kalender-uebersicht .kalender-details dt,
.kalender-uebersicht .kalender-details dd {
    display: inline;
    margin: 0;
    font-weight: 400;
}
#inhalt.kalender-uebersicht .kalender-preis {
    margin: .875rem 0 0;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
}
/* Gemeinsame, inhaltsabhängige Zeilen für Bild, Titel, Details und Preis.
   Subgrid richtet jede Produktreihe aus, ohne feste Titel-/Texthöhen. */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 576px) {
        .kalender-uebersicht .kalender-modelle {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .kalender-uebersicht .kalender-modelle > figure {
            display: grid;
            grid-template-rows: subgrid;
            grid-column: span 2;
            grid-row: span 4;
            width: auto;
            min-width: 0;
        }
        .kalender-uebersicht .kalender-modell,
        .kalender-uebersicht .kalender-information {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 2;
            min-width: 0;
        }
        .kalender-uebersicht .kalender-modell {
            align-items: start;
        }
        .kalender-uebersicht .kalender-modelle > figure:last-child:nth-child(odd) {
            grid-column: 2 / span 2;
        }
    }
    @media (min-width: 768px) {
        .kalender-uebersicht .kalender-modelle {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }
        .kalender-uebersicht .kalender-modelle > figure:last-child:nth-child(odd) {
            grid-column: span 2;
        }
        .kalender-uebersicht .kalender-modelle > figure:nth-last-child(2):nth-child(3n + 1) {
            grid-column: 2 / span 2;
        }
        .kalender-uebersicht .kalender-modelle > figure:last-child:nth-child(3n + 2) {
            grid-column: 4 / span 2;
        }
        .kalender-uebersicht .kalender-modelle > figure:last-child:nth-child(3n + 1) {
            grid-column: 3 / span 2;
        }
    }
}