/* ============== Basis: responsives Grid auf der Startseite ============== */
body.home .site-main,
body.blog .site-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Karten-Stil für einzelne Beiträge */
body.home .hentry,
body.blog .hentry {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  height: 100%;
}
body.home .hentry:hover,
body.blog .hentry:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Featured Image mit festem Seitenverhältnis + schöner Zoom-Hover */
body.home .hentry .post-thumbnail,
body.blog .hentry .post-thumbnail {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
body.home .hentry .post-thumbnail img,
body.blog .hentry .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
body.home .hentry:hover .post-thumbnail img,
body.blog .hentry:hover .post-thumbnail img {
  transform: scale(1.04);
}

/* Innenabstände */
body.home .hentry .entry-header,
body.home .hentry .entry-content,
body.blog .hentry .entry-header,
body.blog .hentry .entry-content {
  padding: 16px 18px;
}

/* Post-Titel: immer komplett anzeigen, ohne Abbruch */
body.home .hentry .entry-title,
body.blog .hentry .entry-title {
  font-size: clamp(1.15rem, 0.8rem + 1.2vw, 1.5rem);
  line-height: 1.3;
  margin: 0 0 10px;
  display: block;       /* kein flexbox clamp */
  overflow: visible;    /* kein Abschneiden */
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  text-overflow: unset;
  white-space: normal;  /* normaler Zeilenumbruch */
}

/* Metadaten dezenter */
body.home .hentry .entry-meta,
body.blog .hentry .entry-meta {
  font-size: .85rem;
  opacity: .75;
  margin-bottom: 6px;
}

/* Excerpt auf 3 Zeilen kappen – sauberer Kartenschnitt */
body.home .hentry .entry-summary,
body.blog .hentry .entry-summary,
body.home .hentry .entry-content p,
body.blog .hentry .entry-content p {
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* bei Bedarf auf 2 oder 4 ändern */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Weiterlesen" / more-link als Button */
body.home .hentry .more-link,
body.blog .hentry .more-link,
body.home .hentry .read-more a,
body.blog .hentry .read-more a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: #111;          /* passt zu vielen Dyad-2-Farbpaletten */
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: filter .15s ease, transform .15s ease;
}
body.home .hentry .more-link:hover,
body.blog .hentry .more-link:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Pagination aufräumen */
.pagination .nav-links,
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 28px 0 8px;
}
.nav-links a, .nav-links span {
  padding: 10px 14px;
  border-radius: 10px;
  background: #f3f3f3;
  text-decoration: none;
}
.nav-links .current {
  background: #111;
  color: #fff;
}

/* Header-Navigation: bessere Touch-Ziele auf Mobil */
@media (max-width: 720px) {
  .site-header .main-navigation a {
    padding: 12px 10px;
  }
}

/* Mobile Feinschliff für Kartenabstände & Grid-Gap */
@media (max-width: 600px) {
  body.home .site-main,
  body.blog .site-main {
    gap: 18px;
  }
  body.home .hentry .entry-header,
  body.home .hentry .entry-content,
  body.blog .hentry .entry-header,
  body.blog .hentry .entry-content {
    padding: 14px 16px;
  }
}

/* Fokus-Styles: Tastatur/Barrierefreiheit */
a:focus-visible, button:focus-visible {
  outline: 3px solid #3b82f6; /* gut sichtbarer Fokus */
  outline-offset: 2px;
  border-radius: 6px;
}

/* Weniger Animationen für Nutzer mit Bewegungs-Einschränkungen */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Optional: leichtes Dark-Mode-Tuning, wenn Gerät dunkel nutzt */
@media (prefers-color-scheme: dark) {
  body.home .hentry,
  body.blog .hentry {
    background: #111;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
  }
  body.home .hentry .entry-title a,
  body.blog .hentry .entry-title a { color: #fff; }
  body.home .hentry .entry-summary,
  body.blog .hentry .entry-summary { color: #eaeaea; }
  .nav-links a, .nav-links span { background: #1b1b1b; color: #ddd; }
  .nav-links .current { background: #fff; color: #111; }
}
/* Mehr Luft zwischen Featured Image und Content */
body.home .hentry .post-thumbnail,
body.blog .hentry .post-thumbnail {
  margin-bottom: 18px;   /* Abstand nach unten */
}

/* Falls innerhalb des Artikels das erste Bild direkt am Header klebt */
.single .hentry .entry-content img:first-of-type {
  margin-top: 20px;      /* Abstand nach oben */
  display: block;
}
/* Abstand oben auf der Startseite verringern */
.home .site-content {
  margin-top: -200000 !important;
  padding-top: 0 !important;
}

/* Header-Bereich oben etwas kompakter machen */
.home .site-header {
  margin-bottom: 10px !important;
  padding-bottom: 0 !important;
}

/* Falls Dyad 2 ein großes Bild oben zeigt */
.home .featured-content {
  margin-bottom: 10px !important;
}
/* Fix: Dyad 2 zeigt auf Desktop nicht alle Vorschaubilder */
.home .post-thumbnail,
.blog .post-thumbnail {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Falls Bilder unsichtbar reserviert, aber leer sind */
.home .post-thumbnail img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Layout-Zeilen korrigieren */
.home .posts .hentry,
.blog .posts .hentry {
  float: none !important;
  display: inline-block !important;
  vertical-align: top;
}
/* --- Einheitliche Beitragskacheln auf der Startseite --- */
.home .post-thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 250px; /* Höhe der Bilder – kannst du anpassen */
  border-radius: 10px; /* abgerundete Ecken */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- Hover-Effekt: leichtes Zoomen & Schatten --- */
.home .post-thumbnail:hover img {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

/* --- Beitragstitel und Text zentrieren und absetzen --- */
.home .entry-title {
  text-align: center;
  font-size: 20px;
  margin-top: 10px;
}

.home .entry-summary {
  text-align: center;
  color: #555;
  font-size: 15px;
}

/* --- Einheitliche Abstände zwischen Beiträgen --- */
.home .posts .hentry {
  margin-bottom: 30px;
}
/* --- Display Posts Styling für DyAT2 Theme --- */

.display-posts-listing {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.display-posts-listing .listing-item {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

.display-posts-listing .listing-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.display-posts-listing .listing-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-bottom: 1px solid #eee;
}

.display-posts-listing .title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1rem;
  color: #222;
  display: block;
  line-height: 1.3;
}

.display-posts-listing .excerpt {
  font-size: 0.95rem;
  color: #555;
  margin: 0 1rem 1rem;
  line-height: 1.5;
}

.display-posts-listing a {
  text-decoration: none;
}

.display-posts-listing .date {
  font-size: 0.8rem;
  color: #999;
  margin: 0 1rem 1rem;
  display: block;
}
@media (max-width: 768px) {
  article.post {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .entry-content {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 768px) {
  .entry-title,
  .entry-title a {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    line-height: 1.3;
  }

  .entry-summary,
  .entry-content {
    font-size: 1rem;
  }
}
font-weight: 800 !important;