/* =========================================================
   kachel — VillaQ Edition
   Farbpalette angelehnt an das VillaQ-Sitepackage:
   dunkles Villa-Grün, warmes Gold, Creme/Beige
========================================================= */

.kachel-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;

    background: #faf7f1;

    border-radius: var(--radius-image);

    /* feine, immer sichtbare Goldkontur statt "unsichtbarer" Standardkante */
    border: 1px solid rgba(181, 141, 74, 0.18);

    /* deutlich sichtbarer Schatten hinter der Kachel;
       kein overflow:hidden mehr hier, sonst wird der Schatten abgeschnitten */
    box-shadow:
        0 18px 40px rgba(31, 41, 33, 0.14),
        0 4px 12px rgba(31, 41, 33, 0.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

    height: 100%;
    box-sizing: border-box;
}

.kachel-image {
    flex: 0 0 auto;
    position: relative;
}

/* dünner goldener Trennstrich zwischen Bild und Text,
   typisches Villa-Detail statt hartem Kartenschnitt */
.kachel-image::after {
    content: "";
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 0;
    height: 1px;
    background: #b58d4a;
    opacity: .35;
}

.kachel-body {
    /* wichtig: 1 1 auto statt 1 0 auto, damit der Body bei kurzem
       Text nicht auf seine min-content-Höhe zurückfällt, sondern
       den verfügbaren Platz der (per Grid/Flex gestreckten) Kachel
       ausfüllt */
    flex: 1 1 auto;
    min-height: 0;
}

a.kachel-item:hover {
    transform: translateY(-6px);
    border-color: #b58d4a;

    box-shadow:
        0 22px 44px rgba(31, 41, 33, 0.12),
        0 6px 16px rgba(31, 41, 33, 0.06);
}

/* Bild
   Seitenverhältnis statt fester Höhe: so bleibt das Bild unabhängig
   von der Spaltenbreite (4-spaltig auf der Startseite, 3-spaltig bei
   "Aktuelle Projekte", 1-spaltig beim Profilbild) im selben Crop-
   Verhältnis, statt bei breiteren Spalten stärker beschnitten zu werden. */
.kachel-image {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-image) var(--radius-image) 0 0;
}

.kachel-image--square {
    aspect-ratio: 1 / 1;
}

.kachel-image--169 {
    aspect-ratio: 16 / 9;
}

.kachel-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease, filter .5s ease;
    transform: scale(1.01); /* überdeckt Rundungslücken */
}

/* stärkerer Zoom + leichte Abdunklung beim Hover für mehr "Tiefe" */
a.kachel-item:hover .kachel-image img {
    transform: scale(1.07);
    filter: brightness(0.94);
}

/* Bildausrichtung (Backend-Auswahlfeld imagePosition) */
.kachel-image--center img { object-position: center; }
.kachel-image--top img    { object-position: top; }
.kachel-image--bottom img { object-position: bottom; }
.kachel-image--left img   { object-position: left; }
.kachel-image--right img  { object-position: right; }

/* Body */
.kachel-body {
    padding: 34px;
}

/* Kicker-Linie über dem Titel – kleines Signature-Element,
   ganz ohne zusätzliches Backend-Feld */
.kachel-item .kachel-title::before {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    background: #b58d4a;
    margin-bottom: 12px;
}

.kachel-item .kachel-title {
    margin: 0 0 14px;

    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: .01em;
    color: #24382b;
}

.kachel-item p {
    margin: 0;

    color: #5c5647;

    font-size: 16px;
    line-height: 1.6;
}

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

@media (max-width: 720px) {

    .kachel-body {
        padding: 26px;
    }

    .kachel-image::after {
        left: 26px;
        right: 26px;
    }

    .kachel-item .kachel-title {
        font-size: 20px;
    }

    .kachel-item p {
        font-size: 15px;
    }

}


/* =========================================================
   wenn Containeritems: Spalten-Grid --> dann gleiche Höhe
========================================================= */

.frame-type-container.c-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;   /* macht alle Spalten gleich hoch */
}

.frame-type-container.c-columns > .col {
    display: flex;          /* Inhalt (z.B. Kachel) kann sich strecken */
}

.frame-type-container.c-columns > .col > * {
    width: 100%;            /* Kachel füllt die ganze Spalte aus */
}