/* ===========================================================================
   blog.css — Benker WP-Theme
   HANDGESCHRIEBEN. Eigene Datei, damit eine Neuextraktion von components.css
   diese Regeln nicht ueberschreibt (siehe Kopf von components.css).

   Deckt ab:
   - Blog-Detailseite (single.php, Figma 376:4880): zentrierte Artikelspalte
     und den Abschnitt "Weitere Beitraege".
   - Pagination der Aktuelles-Uebersicht (page-aktuelles.php).
   Die Blog-KARTEN selbst (.blog__*) kommen aus components.css und werden hier
   nur wiederverwendet.
   =========================================================================== */

/* Artikel: zentrierte Spalte, 888px wie im Figma (376:4883). */
.beitrag {
  padding-top: var(--space-7);
}

.beitrag__body {
  max-width: 888px;
  margin-inline: auto;
}

/* Abstand zwischen den Bloecken des Fliesstexts. */
.beitrag__body > * + * {
  margin-top: var(--space-5);
}

.beitrag__body p,
.beitrag__body li {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: 1.55;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.beitrag__body h2,
.beitrag__body h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-top: var(--space-7);
}

.beitrag__body h2 {
  font-size: var(--fs-heading-m);
  line-height: var(--lh-heading-m);
}

.beitrag__body h3 {
  font-size: var(--fs-heading-xs);
  line-height: var(--lh-heading-xs);
}

.beitrag__body ul,
.beitrag__body ol {
  padding-left: 1.25em;
}

.beitrag__body img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-image);
}

.beitrag__body a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* "Weitere Beitraege" (Figma 376:4897): Ueberschrift + 3er-Kartenraster. */
.weitere {
  padding-top: var(--space-8);
}

.weitere__title {
  margin-bottom: var(--space-5);
}

/* ---------------------------------------------------------------------------
   Pagination der Aktuelles-Uebersicht (page-aktuelles.php).
   paginate_links( 'type' => 'list' ) gibt <ul class="page-numbers"> aus.
   --------------------------------------------------------------------------- */
.blog__pagination {
  margin-top: var(--space-6);
  display: flex;
  justify-content: center;
}

.blog__pagination ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog__pagination li {
  margin: 0;
}

.blog__pagination li .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--color-line, #e5e8ee);
  font-family: var(--font-body);
  font-size: var(--fs-body-m, 15px);
  line-height: 1;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.blog__pagination li a.page-numbers:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.blog__pagination li .page-numbers.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.blog__pagination li .page-numbers.dots {
  border-color: transparent;
  min-width: auto;
  padding: 0 4px;
}

.blog__pagination li .page-numbers.prev,
.blog__pagination li .page-numbers.next {
  font-weight: var(--fw-medium);
}

/* ---------------------------------------------------------------------------
   Platzhalter fuer Beitraege ohne Beitragsbild (siehe benker_blog_image).
   Das Element traegt zusaetzlich .blog__card-img bzw. .blog__featured-img und
   damit deren Flaeche (aspect-ratio) und Rundung; hier nur der Markenverlauf und
   das zentrierte, weiss gefaerbte Logo.
   --------------------------------------------------------------------------- */
.blog__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-accent) 0%, #063f70 100%);
}

.blog__noimg-logo {
  width: 46%;
  max-width: 190px;
  height: auto;
  opacity: 0.92;
  filter: brightness(0) invert(1);
}