/* =====================================================
   Container für Kacheln
   ===================================================== */

.container-kacheln {
    width: 100%;
}

.container-kacheln-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/*
 * Jedes Grid-Item streckt sich auf die volle Höhe der Zeile (Standard).
 * Das .linkkachel darin füllt diese Höhe vollständig aus.
 */
.container-kacheln-item {
    display: flex;
    flex-direction: column;
}

.container-kacheln-item .linkkachel {
    flex: 1 0 auto;
}


/* =====================================================
   Linkkachel
   ===================================================== */

.linkkachel {
    height: 100%;
}

/*
 * .linkkachel-inner ist entweder ein <a> oder ein <div>.
 * Flex-Column sorgt dafür, dass Bildbereich wächst
 * und der rote Titelbalken immer am unteren Rand sitzt.
 */
.linkkachel-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    overflow: hidden;
}

/* Bildbereich wächst und füllt den verfügbaren Platz */
.linkkachel-image {
    overflow: hidden;
    position: relative;
}

.linkkachel-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Roter Titelbalken – schrumpft nicht, nimmt nur seinen Inhalt */
.linkkachel-caption {
    flex: 1;
    background-color: var(--color-red, #e4032e);
    padding: 18px 23px;
    min-height: 52px;
}

.linkkachel-title {
    display: block;
    color: #fff;
    font-family: 'Roboto Condensed';
    font-style: italic;
    font-weight: 900;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

/* Hover-Effekt */
a.linkkachel-inner:hover .linkkachel-caption,
a.linkkachel-inner:focus .linkkachel-caption {
    background-color: #b8021f;
}

a.linkkachel-inner:hover .linkkachel-img,
a.linkkachel-inner:focus .linkkachel-img {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}

.linkkachel-image {
    transition: none;
}

a.linkkachel-inner .linkkachel-img {
    transition: transform 0.3s ease;
}


/* =====================================================
   Responsive
   ===================================================== */

@media (max-width: 768px) {
    .container-kacheln-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .container-kacheln-wrapper {
        grid-template-columns: 1fr;
    }
}