/* ==========================================================================
   Regio-Journal – Design 2027
   Datei: assets/rj.css  (ersetzt das Customizer-"Zusätzliche CSS")
   Regeln: keine !important, Farben nur über Variablen, mobile first.
   Breakpoints: 768px (Tablet), 1000px (Desktop)
   ========================================================================== */

/* ---------- 1. Schrift (selbst gehostet, DSGVO) ------------------------- */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Design-Variablen ------------------------------------------
   Alle Farben kommen aus der Astra-Palette (Customizer > Globale Farben).
   Der Astra-Schalter (Color Switcher) tauscht die Palette, diese Variablen folgen automatisch.
   Zuordnung: 0 Marke · 2 Text · 4 Flaeche · 5 Hintergrund · 6 Linie · 7 gedaempft · 8 dunkles Marineblau.
   Die Werte nach dem Komma sind nur Notfall-Fallbacks (hell). */
:root {
  --rj-bg: var(--ast-global-color-5, #ffffff);
  --rj-text: var(--ast-global-color-2, #0f172a);
  --rj-muted: var(--ast-global-color-7, #64748b);
  --rj-line: var(--ast-global-color-6, #e5e9f0);
  --rj-slot: var(--ast-global-color-4, #f1f4f9);
  --rj-chip: color-mix(in srgb, var(--rj-line), var(--rj-muted) 15%);
  --rj-ph: color-mix(in srgb, var(--rj-slot), var(--rj-line) 50%);
  --rj-brand: #1a75bb; /* Flaechen mit weisser Schrift: bleibt in beiden Modi gleich */
  --rj-brand-text: var(--ast-global-color-0, #1a75bb);
  --rj-navy: var(--ast-global-color-8, #0a1f44);
  --rj-font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rj-gutter: 16px;
}

/* ---------- 4. Basis ----------------------------------------------------- */
/* Astra setzt den Seitenhintergrund auf .ast-page-builder-template / .ast-plain-container / .ast-separate-container
   (Farbe: Palette 4). Diese Selektoren hier sind absichtlich gleich stark und stehen spaeter -> unsere Farbe gewinnt. */
body,
body.ast-page-builder-template,
body.ast-plain-container,
body.ast-separate-container,
body.ast-page-builder-template .site-content,
body.ast-plain-container .site-content {
  background-color: var(--rj-bg);
  color: var(--rj-text);
  font-family: var(--rj-font);
}
button,
input,
select,
textarea {
  font-family: var(--rj-font);
}
h1, h2, h3, h4, h5, h6,
.entry-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--rj-font);
}
:focus-visible {
  outline: 2px solid var(--rj-brand-text);
  outline-offset: 2px;
}

.rj-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--rj-gutter);
  box-sizing: border-box;
}

/* Gemeinsame Bausteine (Startseite, Beitrag, Related) */
:is(.rj-front, .rj-art, .rj-arch) :is(figure, ul, ol, p, h1, h2, h3, h4) { margin: 0; }
:is(.rj-front, .rj-art, .rj-arch) ul.wp-block-post-template,
:is(.rj-front, .rj-art, .rj-arch) ul.rj-cards { padding: 0; list-style: none; }
:is(.rj-front, .rj-art, .rj-arch) a { color: inherit; text-decoration: none; }
/* Astra färbt und unterstreicht Links im Inhalt mit höherer Priorität; die dreifache Klasse hebt unsere darüber (ohne !important) */
:is(.rj-front, .rj-art, .rj-arch):is(.rj-front, .rj-art, .rj-arch):is(.rj-front, .rj-art, .rj-arch) a { color: inherit; text-decoration: none; }
:is(.rj-front, .rj-art, .rj-arch):is(.rj-front, .rj-art, .rj-arch):is(.rj-front, .rj-art, .rj-arch) :is(.rj-t, .rj-kicker) a:hover { text-decoration: underline; }
:is(.rj-front, .rj-art, .rj-arch):is(.rj-front, .rj-art, .rj-arch):is(.rj-front, .rj-art, .rj-arch) :is(.rj-sec-more) a { color: var(--rj-brand-text); }

:is(.rj-front, .rj-art, .rj-arch) .rj-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--rj-brand-text);
}
:is(.rj-front, .rj-art, .rj-arch) .rj-t {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--rj-text);
  overflow-wrap: break-word;
  hyphens: auto;
}
:is(.rj-front, .rj-art, .rj-arch) .rj-t--m { font-size: 16px; }
:is(.rj-front, .rj-art, .rj-arch) .rj-t--l { font-size: 21px; }
:is(.rj-front, .rj-art, .rj-arch) .rj-t--xxl {
  font-size: 29px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
}
:is(.rj-front, .rj-art, .rj-arch) .rj-date {
  font-size: 12px;
  color: var(--rj-muted);
}
:is(.rj-front, .rj-art, .rj-arch) .rj-teaser { display: none; }

/* Bilder: Seitenverhältnis über CSS, Breite/Höhe-Attribute verhindern Layout-Sprünge */
:is(.rj-front, .rj-art, .rj-arch) .wp-block-post-featured-image { margin: 0; }
:is(.rj-front, .rj-art, .rj-arch) .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background-color: var(--rj-ph);
}
.rj-img-hero img { aspect-ratio: 3 / 2; }
.rj-img-card img { aspect-ratio: 16 / 10; border-radius: 10px; }
.rj-img-row img { aspect-ratio: 3 / 2; border-radius: 8px; }

/* Startseite: falls Astra den schmalen Container oder den Seitentitel noch erzwingt (sauberer: Astra-Seiteneinstellung "Full Width / Stretched" + Titel aus) */
body.home .site-content > .ast-container { max-width: none; padding-inline: 0; display: block; }
body.home #primary { width: 100%; margin: 0; padding: 0; }
body.home .entry-header { display: none; }
body.home .entry-content > .alignfull { max-width: none; }

/* ---------- 5. Ort-Leiste ------------------------------------------------ */
.rj-ortbar { background: var(--rj-bg); border-bottom: 1px solid var(--rj-line); }
.rj-ortbar-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.rj-orte {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 12px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.rj-orte::-webkit-scrollbar { display: none; }
.rj-orte-label { display: none; }
.rj-ortbar-date { display: none; }
.rj-orte .rj-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  box-sizing: border-box;
  font-size: 14px;
  border: 1px solid var(--rj-chip);
  border-radius: 999px;
  color: var(--rj-text);
  text-decoration: none;
}
.rj-orte .rj-chip.is-active {
  background: var(--rj-brand);
  border-color: var(--rj-brand);
  color: #fff;
  font-weight: 700;
}
.rj-orte .rj-chip--all { display: none; }

/* ---------- 6. Startseite ------------------------------------------------ */
.rj-front { padding-bottom: 8px; }

.rj-hero { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 0; }
.rj-hero-main .wp-block-post-featured-image { margin-inline: calc(var(--rj-gutter) * -1); }
.rj-hero-main .rj-img-hero img { border-radius: 0; }
.rj-feature > li { display: flex; flex-direction: column; gap: 10px; }
.rj-feature > li > :not(.wp-block-post-featured-image) { padding-top: 0; }
.rj-hero-main .rj-kicker { font-size: 12px; padding-top: 6px; }
.rj-hero-main { padding-bottom: 20px; }
.rj-hero-side .rj-rows > li:nth-child(n + 4) { display: none; }

/* Zeilen: kleines Bild links, Text rechts */
.rj-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  padding-block: 16px;
  border-top: 1px solid var(--rj-line);
}
.rj-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rj-rows > li:last-child .rj-row { border-bottom: 1px solid var(--rj-line); }

/* Abschnitte */
.rj-sec { padding-top: 12px; padding-bottom: 32px; }
.rj-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
}
.rj-front .rj-sec-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--rj-text);
}
.rj-front .rj-sec-title::before {
  content: "";
  flex: none;
  width: 5px;
  height: 20px;
  border-radius: 3px;
  background: var(--rj-brand);
}
.rj-front .rj-sec-more { font-size: 14px; font-weight: 700; color: var(--rj-brand-text); }
.rj-ort .rj-rows > li:nth-child(n + 5) { display: none; }

/* Karten: Handy = erste groß, Rest als Zeilen */
.rj-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.rj-cards > li { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-bottom: 20px; }
.rj-cards > li:first-child .rj-t { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.rj-cards > li:not(:first-child) {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 4px;
  align-content: start;
  padding-block: 16px;
  border-top: 1px solid var(--rj-line);
}
.rj-cards > li:not(:first-child) .wp-block-post-featured-image { grid-column: 1; grid-row: 1 / span 3; }
.rj-cards > li:not(:first-child) > :not(.wp-block-post-featured-image) { grid-column: 2; }
.rj-cards > li:not(:first-child) .rj-img-card img { aspect-ratio: 3 / 2; border-radius: 8px; }
.rj-cards > li:not(:first-child) .rj-t { font-size: 16px; }
.rj-saarland .rj-cards > li:nth-child(n + 6) { display: none; }

/* Werbung: nur sichtbar (und beschriftet), wenn wirklich etwas drin ist */
.rj-ad:not(:has(:is(div, ins, iframe, img, a))) { display: none; }
.rj-ad { padding-block: 16px 24px; }
.rj-ad:has(:is(div, ins, iframe, img, a)) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rj-ad:has(:is(div, ins, iframe, img, a))::before {
  content: "Anzeige";
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rj-muted);
}
.rj-ad img, .rj-ad iframe { max-width: 100%; height: auto; }

/* ---------- 7. Beitragsseite ---------------------------------------------- */
.rj-art-head {
  max-width: 880px;
  margin-inline: auto;
  padding: 16px var(--rj-gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}
.rj-art .rank-math-breadcrumb,
.rj-art .rank-math-breadcrumb p { font-size: 13px; color: var(--rj-muted); line-height: 1.4; }
.rj-art .rank-math-breadcrumb a { color: var(--rj-muted); }
.rj-art .rank-math-breadcrumb .separator { padding-inline: 4px; }
.rj-art .rj-art-head .rj-kicker { font-size: 12px; }
.rj-art .rj-art-title {
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--rj-text);
}
.rj-art .rj-post-subtitle { font-size: 18px; line-height: 1.4; color: var(--rj-muted); }
.rj-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--rj-muted); }
.rj-meta-author { font-weight: 700; color: var(--rj-text); }
.rj-meta-date::before { content: "·"; margin-right: 12px; }

.rj-art-media { max-width: 1040px; margin: 16px auto 0; }
.rj-art .rj-img-article img { aspect-ratio: 3 / 2; border-radius: 0; }
.rj-art .featured-image-caption {
  padding: 8px var(--rj-gutter) 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--rj-muted);
}

.rj-art-body {
  max-width: 720px;
  margin-inline: auto;
  padding: 20px var(--rj-gutter) 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}
.rj-art-body > * { margin: 0; }
.rj-art .rj-post-excerpt { font-size: 19px; line-height: 1.5; font-weight: 700; }
.rj-art .rj-share .shariff { margin: 0; }
.rj-art .rj-share-title { font-size: 17px; font-weight: 700; }
.rj-share--bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block: 18px;
  border-block: 1px solid var(--rj-line);
}

.rj-art .rj-prose { font-size: 18px; line-height: 1.65; }
.rj-art .rj-prose > * { max-width: none; }
.rj-art .rj-prose p { margin: 0 0 1.1em; }
.rj-art .rj-prose a { color: var(--rj-brand-text); text-decoration: underline; text-underline-offset: 2px; }
.rj-art .rj-prose :is(h2, h3) { font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin: 1.6em 0 0.5em; }
.rj-art .rj-prose h2 { font-size: 24px; }
.rj-art .rj-prose h3 { font-size: 20px; }
.rj-art .rj-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.rj-art .rj-prose .wp-block-quote {
  margin: 1.4em 0;
  padding: 0;
  border: 0;
  background: none;
}
.rj-art .rj-prose .wp-block-quote::before { content: none; }
.rj-art .rj-prose .wp-block-quote p {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rj-brand-text);
}
.rj-art .rj-prose .wp-block-quote cite { display: block; margin-top: 8px; font-size: 14px; font-style: normal; color: var(--rj-muted); }
.rj-art .rj-quelle { font-size: 14px; color: var(--rj-muted); }
.rj-art .rj-quelle strong { font-weight: 700; }

/* Bildquellen (Plugin Image Source Control, Shortcode [isc_list] in der Beitragsvorlage) */
.rj-art .rj-bildquellen { font-size: 13px; line-height: 1.5; color: var(--rj-muted); }
.rj-art .rj-bildquellen :is(p, ul) { margin: 0; }
.rj-art .rj-bildquellen ul { padding-left: 1.2em; }
.rj-art .rj-bildquellen :is(strong, .isc_image_list_title) { font-weight: 700; color: var(--rj-text); }
.rj-art.rj-art .rj-bildquellen a { color: var(--rj-brand-text); text-decoration: underline; }

.rj-art .rj-tags a {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--rj-chip);
  border-radius: 999px;
}
.rj-art .rj-tags .wp-block-post-terms__separator { display: none; }

/* Weitere Beiträge (Shortcode [rj_related], gleiche Karten-Klassen) */
.rj-art .rj-related {
  max-width: 1200px;
  margin-inline: auto;
  padding: 36px var(--rj-gutter) 0;
  box-sizing: border-box;
}
.rj-art .rj-related .rj-sec-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rj-text);
}
.rj-art .rj-related .rj-sec-title::before {
  content: "";
  width: 5px;
  height: 20px;
  border-radius: 3px;
  background: var(--rj-brand);
}
.rj-art .rj-related .rj-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 14px;
}
.rj-art .rj-related .rj-cards > li,
.rj-art .rj-related .rj-cards > li:not(:first-child) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
}
.rj-art .rj-related .rj-cards > li .wp-block-post-featured-image { grid-column: auto; grid-row: auto; }
.rj-art .rj-related .rj-cards > li > :not(.wp-block-post-featured-image) { grid-column: auto; }
.rj-art .rj-related .rj-cards .rj-img-card img { aspect-ratio: 16 / 10; border-radius: 8px; }
.rj-art .rj-related .rj-cards .rj-t,
.rj-art .rj-related .rj-cards > li:first-child .rj-t { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }

/* Kommentare */
.rj-art-comments { max-width: 720px; margin-inline: auto; padding: 36px var(--rj-gutter) 44px; box-sizing: border-box; }
.rj-art .rj-comments .rj-sec-title,
.rj-art .rj-comments .wp-block-comments-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; }
.rj-comment { display: flex; gap: 12px; padding-block: 16px; border-bottom: 1px solid var(--rj-line); }
.rj-comment-body { min-width: 0; font-size: 15px; }
.rj-comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  width: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  height: 52px;
  font-size: 16px;
  color: var(--rj-text);
  background: var(--rj-bg);
  border: 1px solid var(--rj-chip);
  border-radius: 10px;
}
.rj-comment-form textarea { height: auto; min-height: 120px; padding: 14px 16px; }
.rj-comment-form :is(input[type="submit"], button[type="submit"]) {
  height: 52px;
  padding: 0 28px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--rj-brand);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

/* ---------- 8. Newsletter-Band + Footer ---------------------------------- */
/* Newsletter-Band ist ausgeblendet, solange es kein Newsletter-Tool gibt. Zum Einblenden die Zeile display:none entfernen. */
.rj-nl { display: none; background: var(--rj-brand); color: #fff; }
.rj-nl-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 40px; }
.rj-nl :is(h2, p) { margin: 0; }
.rj-nl .rj-nl-title { font-size: 30px; line-height: 1.08; font-weight: 800; letter-spacing: -0.025em; color: #fff; }
.rj-nl .rj-nl-lead { margin-top: 14px; font-size: 16px; line-height: 1.45; }
.rj-nl-form label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.rj-nl-form :is(input[type="email"], input[type="text"]) {
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  padding: 0 18px;
  font-size: 16px;
  color: #0f172a;
  background: #fff;
  border: 0;
  border-radius: 999px;
}
.rj-nl-form :is(button, input[type="submit"]) {
  height: 52px;
  margin-top: 8px;
  width: 100%;
  padding: 0 28px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #0a1f44;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.rj-footer { background: var(--rj-navy); color: #b9c6dd; }
.rj-footer .rj-container { padding-block: 36px 28px; }
.rj-footer :is(p, h2) { margin: 0; }
.rj-footer a { color: inherit; text-decoration: none; }
.rj-footer a:hover { text-decoration: underline; }
.rj-footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; font-size: 15px; }
.rj-fcol--brand { grid-column: 1 / -1; }
.rj-fcol { display: flex; flex-direction: column; gap: 10px; }
.rj-footer .rj-logo { font-size: 28px; letter-spacing: -0.03em; color: #fff; }
.rj-footer .rj-logo b { font-weight: 800; }
.rj-footer .rj-ftext { line-height: 1.5; max-width: 380px; }
.rj-footer .rj-fhead { color: #fff; font-weight: 700; }
.rj-footer-legal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14px;
}
.rj-footer .rj-flegal { display: flex; gap: 20px; }

/* ---------- Archiv (Rubrik, Schlagwort, Autor) ---------------------------- */
/* Astra setzt Archivseiten oft in einen schmalen Container; die Rubrik-Vorlage bricht daraus auf volle Breite aus. */
.rj-arch {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-bottom: 40px;
}
body:has(.rj-arch) { overflow-x: clip; }
.rj-arch .rj-arch-head { padding-block: 28px 20px; }
.rj-arch .rj-arch-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rj-text);
}
.rj-arch .rj-arch-kicker::before {
  content: "";
  flex: none;
  width: 5px;
  height: 20px;
  border-radius: 3px;
  background: var(--rj-brand);
}
.rj-arch .rj-arch-title {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--rj-text);
  text-align: left;
}
.rj-arch .rj-arch-desc { margin: 12px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.5; color: var(--rj-muted); }
.rj-arch .rj-arch-desc:empty { display: none; }
.rj-arch .rj-arch-query { padding-top: 8px; }
.rj-arch ul.rj-rows { margin: 0; padding: 0; list-style: none; }
.rj-arch .rj-rows > li:last-child .rj-row { border-bottom: 1px solid var(--rj-line); }
.rj-arch .rj-arch-empty { padding-block: 24px; color: var(--rj-muted); }

/* Seitenzahlen */
.rj-arch .rj-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  font-size: 15px;
  font-weight: 700;
}
.rj-arch .rj-pager :is(.page-numbers, .wp-block-query-pagination-next, .wp-block-query-pagination-previous) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid var(--rj-line);
  border-radius: 8px;
  color: var(--rj-text);
  text-decoration: none;
}
.rj-arch .rj-pager .page-numbers.current { background: var(--rj-brand); border-color: var(--rj-brand); color: #fff; }
.rj-arch .rj-pager .page-numbers.dots { border-color: transparent; }
.rj-arch .rj-pager a:hover { border-color: var(--rj-brand-text); color: var(--rj-brand-text); }

/* ---------- 9. Tablet ab 768px ------------------------------------------- */
@media (min-width: 768px) {
  .rj-arch .rj-arch-head { padding-block: 48px 28px; }
  .rj-arch .rj-arch-title { font-size: 48px; }
  :root { --rj-gutter: 24px; }

  .rj-ortbar { background: var(--rj-navy); border-bottom: 0; }
  .rj-orte { gap: 8px; padding-block: 0; min-height: 44px; }
  .rj-orte-label { display: inline; margin-right: 4px; font-size: 13px; color: #b9c6dd; }
  .rj-ortbar-date { display: inline; font-size: 13px; color: #b9c6dd; white-space: nowrap; }
  .rj-orte .rj-chip {
    min-height: 0;
    padding: 5px 12px;
    font-size: 13px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: transparent;
  }
  .rj-orte .rj-chip.is-active { background: var(--rj-brand); }
  .rj-orte .rj-chip--all { display: inline-flex; padding-inline: 8px; font-weight: 700; background: none; }

  .rj-hero { padding-top: 40px; }
  .rj-hero-main .wp-block-post-featured-image { margin-inline: 0; }
  .rj-img-hero img { aspect-ratio: 16 / 10; border-radius: 12px; }
  .rj-hero-main .rj-img-hero img { border-radius: 12px; }
  .rj-feature > li { gap: 14px; }
  :is(.rj-front, .rj-art, .rj-arch) .rj-kicker { font-size: 12px; }
  .rj-hero-main .rj-kicker { font-size: 13px; padding-top: 0; }
  :is(.rj-front, .rj-art, .rj-arch) .rj-t--m { font-size: 19px; }
  :is(.rj-front, .rj-art, .rj-arch) .rj-t--xxl { font-size: 42px; line-height: 1.08; }
  :is(.rj-front, .rj-art, .rj-arch) .rj-date { font-size: 13px; }
  :is(.rj-front, .rj-art, .rj-arch) .rj-teaser { display: block; }
  .rj-teaser p { font-size: 18px; line-height: 1.45; color: var(--rj-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rj-hero-side .rj-rows > li:nth-child(n + 4) { display: list-item; }

  .rj-row { grid-template-columns: 148px minmax(0, 1fr); gap: 18px; padding-block: 18px; border-top: 0; border-bottom: 1px solid var(--rj-line); }
  .rj-row-body { gap: 6px; }
  .rj-hero-side .rj-rows > li:first-child .rj-row { padding-top: 0; }
  .rj-rows > li:last-child .rj-row { border-bottom: 1px solid var(--rj-line); }
  .rj-rows--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .rj-ort .rj-rows > li:nth-child(n + 5) { display: list-item; }

  .rj-sec { padding-top: 8px; padding-bottom: 56px; }
  .rj-sec-head { padding-bottom: 20px; }
  .rj-front .rj-sec-title { font-size: 15px; }
  .rj-front .rj-sec-title::before { height: 22px; }

  .rj-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .rj-cards > li { gap: 10px; padding-bottom: 0; }
  .rj-cards > li:first-child .rj-t,
  .rj-cards .rj-t { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
  .rj-cards > li:not(:first-child) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    border-top: 0;
  }
  .rj-cards > li:not(:first-child) .wp-block-post-featured-image { grid-column: auto; grid-row: auto; }
  .rj-cards > li:not(:first-child) > :not(.wp-block-post-featured-image) { grid-column: auto; }
  .rj-cards > li:not(:first-child) .rj-img-card img { aspect-ratio: 16 / 10; border-radius: 10px; }
  .rj-cards > li:not(:first-child) .rj-t { font-size: 21px; }
  .rj-saarland .rj-cards > li:nth-child(n + 6) { display: flex; }

  .rj-ad { padding-block: 24px 40px; }

  .rj-art-head { padding-top: 32px; gap: 16px; }
  .rj-art .rank-math-breadcrumb, .rj-art .rank-math-breadcrumb p { font-size: 14px; }
  .rj-art .rj-art-title { font-size: 46px; line-height: 1.08; letter-spacing: -0.03em; }
  .rj-art .rj-post-subtitle { font-size: 22px; }
  .rj-meta { font-size: 14px; }
  .rj-art-media { margin-top: 28px; padding-inline: var(--rj-gutter); box-sizing: border-box; }
  .rj-art .rj-img-article img { aspect-ratio: 16 / 9; border-radius: 12px; }
  .rj-art .featured-image-caption { padding-inline: 0; font-size: 14px; padding-top: 10px; }
  .rj-art-body { padding-top: 28px; gap: 24px; }
  .rj-art .rj-post-excerpt { font-size: 21px; line-height: 1.55; }
  .rj-art .rj-prose { font-size: 19px; line-height: 1.7; }
  .rj-art .rj-prose h2 { font-size: 28px; }
  .rj-art .rj-prose h3 { font-size: 22px; }
  .rj-art .rj-prose .wp-block-quote p { font-size: 30px; }
  .rj-art .rj-quelle { font-size: 15px; }
  .rj-share--bottom { flex-direction: row; align-items: center; justify-content: space-between; padding-block: 20px; }
  .rj-art .rj-related { padding-top: 56px; }
  .rj-art .rj-related .rj-cards { gap: 24px; }
  .rj-art .rj-related .rj-cards .rj-t,
  .rj-art .rj-related .rj-cards > li:first-child .rj-t { font-size: 18px; }
  .rj-art-comments { padding-block: 56px 72px; }

  .rj-nl-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; padding-block: 72px; }
  .rj-nl .rj-nl-title { font-size: 44px; line-height: 1.05; }
  .rj-nl .rj-nl-lead { font-size: 18px; }
  .rj-nl-form form { display: flex; flex-wrap: wrap; gap: 0 10px; }
  .rj-nl-form label { width: 100%; }
  .rj-nl-form :is(input[type="email"], input[type="text"]) { flex: 1; width: auto; min-width: 0; }
  .rj-nl-form :is(button, input[type="submit"]) { width: auto; margin-top: 0; }

  .rj-footer .rj-container { padding-block: 56px 32px; }
  .rj-footer-cols { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
  .rj-fcol--brand { grid-column: auto; }
  .rj-footer .rj-logo { font-size: 30px; }
  .rj-footer-legal { flex-direction: row; justify-content: space-between; margin-top: 40px; padding-top: 24px; }
}

/* ---------- 10. Desktop ab 1000px ---------------------------------------- */
@media (min-width: 1000px) {
  .rj-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; padding-bottom: 24px; }
  .rj-hero-main { padding-bottom: 0; }
  .rj-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Sport: links Zeilen, rechts große Karte */
  .rj-cards--sport { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
  .rj-cards--sport > li:first-child { grid-column: 2; grid-row: 1 / span 4; }
  .rj-cards--sport > li:first-child .rj-t { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
  .rj-cards--sport > li:not(:first-child) {
    display: grid;
    grid-column: 1;
    grid-template-columns: 148px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 6px;
    align-content: start;
    padding-block: 18px;
    border-bottom: 1px solid var(--rj-line);
  }
  .rj-cards--sport > li:not(:first-child) .wp-block-post-featured-image { grid-column: 1; grid-row: 1 / span 3; }
  .rj-cards--sport > li:not(:first-child) > :not(.wp-block-post-featured-image) { grid-column: 2; }
  .rj-cards--sport > li:not(:first-child) .rj-img-card img { aspect-ratio: 3 / 2; border-radius: 8px; }
  .rj-cards--sport > li:not(:first-child) .rj-t { font-size: 19px; }

  .rj-art .rj-related .rj-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}