/*
 * Card-Grid (no10/card-grid)
 * Wird nur auf Seiten geladen, auf denen das Element vorkommt (f:asset.css in templates/frontend.html).
 */

.no10-card-grid {
    max-width: 1170px;
    margin:auto;
    margin-bottom: 2rem;
    padding: 0 2rem;
}

.no10-card-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.no10-card-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.no10-card-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Tablet: 3 Spalten -> 2, 4 Spalten -> 3 */
@media (max-width: 992px) {
    .no10-card-grid--cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .no10-card-grid--cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Kleines Tablet: 4 Spalten -> 2 (3 Spalten sind hier schon 2) */
@media (max-width: 768px) {
    .no10-card-grid--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Smartphone: alles einspaltig */
@media (max-width: 575px) {
    .no10-card-grid--cols-2,
    .no10-card-grid--cols-3,
    .no10-card-grid--cols-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.no10-card-grid__heading {
}

.no10-card-grid__header {
}

.no10-card-grid__subheader {
}

.no10-card-grid__items {
    display:grid;
    text-align: center;
    gap: 1rem;
}

/* Hintergrundfarbe der Karten, Auswahl "Hintergrundfarbe" am Content-Element */
.no10-card-grid--bg-green {
    --card-bg: #3daa62;
}

.no10-card-grid--bg-dark-green {
    --card-bg: #099541;
}

.no10-card-grid--bg-blue {
    --card-bg: #2c67a6;
}

.no10-card-grid--bg-dark {
    --card-bg: #2b2b2b;
}

.no10-card-grid__item {
    background-color: var(--card-bg, #3daa62);
    color: white;
    font-size: 24px;
    padding: .5rem 1.5rem;
    border-radius: 4px;
}

.no10-card-grid__item-image {
}

.no10-card-grid__item-logo {
}

.no10-card-grid__item-text {
}

.no10-card-grid__item-link {
    color: white;
    display:flex;
    height:100%;
    justify-content: space-between;
    align-items: center;
}

.no10-card-grid__item-link p{
   max-width: 80%;
    padding: unset;
}
/*
 * Karten mit Bild: Bild als Hintergrund der Kachel, Inhalt (Text, Link) darüber
 */
.no10-card-grid__item--has-image {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Inhalt unten in der Kachel */
    min-height: 250px;         /* Höhe der Kachel */
}

.no10-card-grid__item--has-image .no10-card-grid__item-image {
    position: absolute;
    inset: 0;
    margin: 0;
}

.no10-card-grid__item--has-image .no10-card-grid__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Abdunklung nach unten, damit der Text auf hellen Bildern lesbar bleibt */
.no10-card-grid__item--has-image .no10-card-grid__item-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 60%);
}

/* Alles außer dem Bild liegt über dem Bild */
.no10-card-grid__item--has-image > :not(.no10-card-grid__item-image) {
    position: relative;
    z-index: 1;
}

.no10-card-grid__item--has-image .no10-card-grid__item-link {
    height: auto;
}