/* Ratgeber · Liste, Kategorien, Spotlight, Artikel-Karten (Owner: wdf-section-builder, Auftrag P7-ratgeber-artikel) — nur Tokens, mobil zuerst.
   Karten-Teil (.rg-raster/.rg-karte) nutzt auch die Artikel-Vorlage („Mehr aus dem Ratgeber.“). Filter ohne JS: Radiogruppe + :has(). */
.rg-liste { position: relative; padding: 0 0 var(--space-section); }

/* ---------- Kategorien ---------- */
.rg-filter { display: flex; gap: var(--space-8); margin: 0 calc(-1 * var(--rand)) var(--space-32); padding: var(--space-4) var(--rand);
  overflow-x: auto; scrollbar-width: none; border: 0; min-width: 0; }
.rg-filter::-webkit-scrollbar { display: none; }
.rg-chip { position: relative; flex: none; }
.rg-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rg-chip span { display: inline-flex; align-items: center; min-height: var(--size-target); padding: 0 var(--space-18); border-radius: var(--radius-pill);
  box-shadow: var(--ring-hairline); color: var(--color-text-secondary);
  font: var(--font-weight-medium) var(--font-size-mono) / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.rg-chip input:checked + span { background: var(--color-accent-a10); box-shadow: var(--ring-badge); color: var(--color-accent-soft); }
.rg-chip input:focus-visible + span { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: var(--space-3); }
@media (hover: hover) { .rg-chip:hover input:not(:checked) + span { color: var(--color-text); box-shadow: var(--ring-accent); } }

/* Filter: Karten anderer Kategorien ausblenden (Spotlight inklusive) */
.rg-liste:has(input[value="ki"]:checked) :is(.rg-karte, .rg-spot):not([data-kat="ki"]),
.rg-liste:has(input[value="strategie"]:checked) :is(.rg-karte, .rg-spot):not([data-kat="strategie"]),
.rg-liste:has(input[value="seo"]:checked) :is(.rg-karte, .rg-spot):not([data-kat="seo"]),
.rg-liste:has(input[value="recht"]:checked) :is(.rg-karte, .rg-spot):not([data-kat="recht"]),
.rg-liste:has(input[value="tools"]:checked) :is(.rg-karte, .rg-spot):not([data-kat="tools"]) { display: none; }
.rg-liste:has(.rg-filter input:not([value="alle"]):checked) .rg-weitere .kapitel-kopf { display: none; }

/* ---------- Gemeinsame Teile ---------- */
.rg-kat { color: var(--color-accent-soft); font-size: var(--font-size-mono-sm); }
.rg-auszug { color: var(--color-text-secondary); font-size: var(--font-size-ui); line-height: var(--leading-text); text-wrap: pretty; }
.rg-meta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); color: var(--color-text-tertiary);
  font: var(--font-weight-regular) var(--font-size-caption) / var(--leading-snug) var(--font-mono); font-variant-numeric: tabular-nums; }
.rg-ki { position: absolute; left: var(--space-12); bottom: var(--space-12); padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill);
  background: rgba(var(--color-bg-rgb), .72); color: var(--color-text-secondary); font-size: var(--font-size-mono-2xs); }

/* ---------- Spotlight ---------- */
.rg-spot { display: grid; overflow: hidden; margin-bottom: var(--space-96); transition: box-shadow var(--dur-fast) var(--ease-out); }
.rg-spot-bild { position: relative; margin: 0; aspect-ratio: 1536 / 864; background: var(--color-scene-ground); }
.rg-spot-bild img { width: 100%; height: 100%; object-fit: cover; }
.rg-spot-text { display: grid; gap: var(--space-16); align-content: start; padding: var(--space-24); }
.rg-spot-text .eyebrow { margin-bottom: var(--space-4); }
.rg-spot-text .rg-kat { margin-bottom: calc(-1 * var(--space-8)); }
.rg-spot-titel { font: var(--font-weight-display) var(--font-size-h3) / var(--leading-h3) var(--font-display); letter-spacing: var(--tracking-h3); text-wrap: balance; }
.rg-spot-titel a, .rg-titel a { color: inherit; text-decoration: none; }
.rg-spot-titel a::after, .rg-titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.rg-spot-titel a:focus-visible, .rg-titel a:focus-visible { outline: none; }
.rg-spot:has(a:focus-visible), .rg-karte:has(a:focus-visible) { outline: var(--stroke-focus) solid var(--color-focus); outline-offset: var(--space-3); }
.rg-spot-weiter { margin-top: var(--space-8); }
/* „Weiterlesen“ ohne Unterstreichung; beim Überfahren wechselt der ganze Link die Farbe (Kunde 2026-11-13) */
.rg-spot .pfeil-link { border-bottom: 0; transition: color var(--dur-fast) var(--ease-out); }
/* Kein Rahmen beim Überfahren (Kunde 2026-11-13), nur Pfeil und Bild bewegen sich */
@media (hover: hover) {
  .rg-spot:hover .pfeil-link { color: var(--color-accent-soft); }
  .rg-spot:hover .pfeil-link svg { transform: translateX(3px); }
}

/* ---------- Raster der Artikel-Karten ---------- */
.rg-weitere { display: grid; gap: var(--space-32); }
.rg-raster { display: grid; gap: var(--space-16); }
.rg-karte { position: relative; border-radius: var(--radius-lg); background: var(--gradient-card-module); box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-fast) var(--ease-out); }
.rg-karte { overflow: hidden; }
/* Vorschaubild (Kunde 2026-11-11): randlos oben in der Karte, live das Beitragsbild aus der Datenbank */
.rg-karte-bild { position: relative; margin: calc(-1 * var(--space-24)) calc(-1 * var(--space-24)) var(--space-4); aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-scene-ground); }
.rg-karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.rg-karte article { display: flex; flex-direction: column; gap: var(--space-12); height: 100%; padding: var(--space-24); }
.rg-titel { font: var(--font-weight-display) var(--font-size-body-lg) / var(--leading-title) var(--font-display); letter-spacing: var(--tracking-title); text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.rg-karte .rg-auszug { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.rg-karte .rg-meta { margin-top: auto; padding-top: var(--space-8); }
.rg-weiter { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--color-text); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); transition: color var(--dur-fast) var(--ease-out); }
.rg-weiter svg { width: var(--space-16); height: var(--space-16); color: var(--color-accent); transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .rg-karte:hover .rg-weiter { color: var(--color-accent-soft); }
  .rg-karte:hover .rg-weiter svg { transform: translateX(3px); }
  .rg-karte:hover .rg-karte-bild img { transform: scale(1.03); }
}

@media (min-width: 768px) {
  .rg-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); }
  .rg-spot-text { padding: var(--space-32); }
  .rg-filter { flex-wrap: wrap; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; overflow: visible; }
}
@media (min-width: 1024px) {
  .rg-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rg-spot { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .rg-spot-bild { aspect-ratio: auto; min-height: 100%; }
  .rg-spot-text { align-content: center; padding: var(--space-48); }
  .rg-spot-titel { font-size: var(--font-size-station); line-height: var(--leading-station); letter-spacing: var(--tracking-station); }
  .rg-karte article { padding: var(--space-32) var(--space-24) var(--space-24); }
  .rg-karte-bild { margin-top: calc(-1 * var(--space-32)); }
}

/* ---------- Artikel-Vorlage: „Mehr aus dem Ratgeber.“ ---------- */
.ra-mehr { position: relative; padding: var(--space-section) 0 var(--space-section-end); }
.ra-mehr-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-16) var(--space-32); margin-bottom: var(--space-32); }
.ra-mehr-kopf h2 { max-width: 20ch; }

/* Lauf 4 (K-UI-01): Leerzustand des Filters (ui.js), nur sichtbar, wenn eine Kategorie keine Beiträge hat */
.rg-leer { margin-top: var(--space-24); color: var(--color-text-secondary); font-size: var(--font-size-body); line-height: var(--leading-body); }
.rg-leer[hidden] { display: none; }

/* SEO-Parität (Lauf 5, Q6): Kategorie als echter Link im Chip, Optik unverändert; Bedienung bleibt die Radiogruppe (ui.js fängt den Klick ab) */
.rg-chip a { color: inherit; text-decoration: none; padding: var(--space-6); margin: 0 calc(-1 * var(--space-6)); }   /* Messfläche ≥ 24 px (A07), Layout gleich: Innenabstand durch Außenabstand ausgeglichen */