/* ========================= */
/* Container für die Karten */
/* ========================= */
.custom-post-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px; /* sehr kleiner Abstand */
    max-width: 1200px; /* Begrenzung wie im ursprünglichen Layout */
    margin: 0 auto; /* zentrieren */
}

/* ========================= */
/* Einzelne Karten */
/* ========================= */
.custom-post-card {
    flex: 1 1 calc(33.333% - 4px);
    max-width: calc(33.333% - 4px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-top: 3px solid blue;
    border-left: 3px solid blue;
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    overflow: hidden;
    margin-bottom: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-post-card:hover {
    transform: translateY(-2px);
    box-shadow: 4px 4px 6px rgba(0,0,0,0.25);
}

/* ========================= */
/* Bannerbild mit fester Höhe */
/* ========================= */
.custom-post-card img {
    width: 100% !important;
    height: 180px !important; /* PC: feste Höhe */
    object-fit: cover !important;
    display: block;
}

/* ========================= */
/* Titel */
/* ========================= */
.custom-post-card .post-title {
    font-size: 1.5rem; /* groß, nicht fett */
    font-weight: 400;
    margin: 10px;
}

/* ========================= */
/* Excerpt/Text */
/* ========================= */
.custom-post-card .post-excerpt {
    font-size: 1rem;
    margin: 0 10px 10px 10px;
    color: #555;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* ca. 30 Wörter */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

/* ========================= */
/* Datum */
/* ========================= */
.custom-post-card .post-date {
    font-size: 0.85rem;
    color: #999;
    margin: 0 10px 10px 10px;
}

/* ========================= */
/* Pagination */
/* ========================= */
.pagination {
    text-align: center;
    margin-top: 20px;
}

.pagination a {
    padding: 6px 10px;
    margin: 0 3px;
    background: #eee;
    color: #333;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.2s;
}

.pagination a:hover,
.pagination .current {
    background: #333;
    color: #fff;
}

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

/* Tablet: 2 Spalten, kleinere Bildhöhe */
@media (max-width: 900px) {
  .custom-post-card {
    flex: 1 1 calc(50% - 4px);
    max-width: calc(50% - 4px);
  }

  .custom-post-card img {
    height: 140px !important;
  }
}

/* Smartphone: 1 Spalte, noch kleinere Bildhöhe */
@media (max-width: 600px) {
  .custom-post-card {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .custom-post-card img {
    height: 100px !important;
  }
}