/* ============================================================
   News pages — only what is specific to WordPress markup or to the single article.
   The shared listing styles (page-intro, filter, pager container, number circles)
   now live in design.css; this file maps the few places where WP's markup differs
   from the mockup (dropdown options are links, pagination is paginate_links) and adds
   the single-article layout.
   ============================================================ */

/* The page-intro spacing moved to design.css: every listing needs it, not only News. */

/* The card hover zoom now lives in design.css, so the start page gets it too. */

/* Themen dropdown: WP renders the options as links (<li><a>), so the padding and hover
   sit on the <a>. Cancel the <li> padding that design.css sets for the mockup's plain
   <li> options, otherwise it would double up. */
/* Scoped away from the Ort filter for the same reason as `.prose` in kitas.css: the editor loads
 * every section stylesheet at once, so this reset reached the facility list's dropdown, which on
 * its own page has no news.css and keeps the padding design.css gives it (measured: 9.6px 17.6px
 * on /einrichtungen/ against 0 in the canvas). The news dropdowns carry no modifier and keep it. */
.nselect:not(.nselect--ort) .nselect__list li{margin:0; padding:0}
.nselect__list a{display:block; padding:.6rem 1.1rem; color:var(--ink); font-size:1rem; text-decoration:none}
.nselect__list a:hover,.nselect__list a[aria-current="page"]{background:var(--ink); color:#fff}

/* Pager: WP's paginate_links emits .page-numbers / .prev / .next instead of the
   mockup's hand-written <a class="arrow">. The .pager container and its top spacing
   come from design.css; these map the WP-specific classes onto the same look. */
.pager .page-numbers{width:38px; height:38px; border:1px solid var(--border); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink); font-weight:700;
  font-size:.9rem; text-decoration:none}
.pager .page-numbers.current{background:var(--red); border-color:var(--red); color:#fff}
.pager .page-numbers.dots{border:0; width:auto; height:auto}
.pager a.prev,.pager a.next{width:auto; height:auto; border:0; border-radius:0; padding:0; line-height:0}
.pager a.prev svg,.pager a.next svg{display:block; width:19px; height:32px}
.pager a.prev{color:var(--ink); margin-right:.5rem}
.pager a.next{color:var(--red); margin-left:.5rem}

/* ============================================================
   News single (Darstellung einer News) — ported from the mockup.
   ============================================================ */

/* The article title (current page) is underlined and the last breadcrumb separator
   is a slash, unlike the pipes between the other crumbs (XD). */
.breadcrumb .crumb-current{text-decoration:underline}

/* Article column = ~66% of the content width, left-aligned. */
.article{max-width:720px}
.article h1{font-size:var(--fs-h1); line-height:1.09; margin:.5rem 0 1.3rem}
.article__date{color:var(--ink); font-weight:700; font-size:.85rem; margin-bottom:1.3rem}  /* XD: bold, black */
.article__img{margin:0 0 .5rem}
/* The article photo keeps its own proportions (it is not cropped to a ratio like the
   cards), so the height has to follow the width instead of the height attribute. */
.article__img img{width:100%; height:auto; display:block}
.article__cap{color:var(--ink); font-size:.78rem; margin-bottom:1.7rem}  /* XD: same black as body */
.article p{color:var(--ink2); line-height:1.55; margin:0 0 1.2rem}  /* XD: compact leading */
.article p strong{color:var(--ink); font-weight:700}

/* Related news + back navigation. The heading reuses the shared .section-h. */
.related{padding-top:45px}
.back{margin-top:2rem}
.back .btn{min-width:155px; padding-top:.62rem; padding-bottom:.62rem}  /* same pill as "Alle News" */
@media(max-width:560px){ .back{margin-top:3.2rem} }