/* ==========================================================================
   blog.css — Ratgeber (Blog)
   Loaded only on /ratgeber/*, on top of base.css + leistung.css.

   Deliberately small: hero, section rhythm, cards, grids, buttons, chips,
   .prose and .crumbs all come from the shared component library. This file
   adds ONLY what the library has no equivalent for:
     · card with edge-to-edge media (the shared .card is padded all round)
     · article typography for TinyMCE output (h2/h3/lists/quotes/tables)
     · pagination row
     · chip links (shop.css styles a.chip-btn, but that sheet is not loaded here)
   Class-based only; the sole inline style anywhere is the --d reveal delay.
   ========================================================================== */

/* ---------- Hero ---------------------------------------------------------- */
/* One column: the Ratgeber hero has no media slot. */
.rg-hero-grid { grid-template-columns: minmax(0, 1fr); }
.rg-hero h1 { max-width: 24ch; }
.rg-hero .lead { max-width: 62ch; }

/* Post meta row under the H1 (date · reading time · author) */
.rg-postmeta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-6); font-size: var(--fs-sm); color: #A9AFBA;
}
.rg-postmeta-i { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 24px; }
.rg-postmeta-i .icon { font-size: 1.05rem; color: var(--c-red-on-dark); flex: none; }

/* ---------- Filter chips (links, not buttons) ----------------------------- */
a.chip-btn {
  text-decoration: none; color: var(--c-slate);
  display: inline-flex; align-items: center;
}
.chip-btn.is-on, .chip-btn[aria-current="page"] {
  background: var(--c-ink); border-color: var(--c-ink); color: #fff;
}
.rg-chips { margin-bottom: var(--sp-6); }
.rg-count {
  font-size: var(--fs-sm); color: var(--c-slate-2);
  margin-bottom: var(--sp-6);
}

/* ---------- Card ---------------------------------------------------------- */
/* .card brings the frame, hover lift and shadow; here it loses its padding so
   the image can bleed to the border radius, and gains the cover link. */
.rg-grid { align-items: stretch; }
.rg-card {
  position: relative; padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.rg-card-media {
  position: relative; aspect-ratio: 16 / 10; background: var(--c-bg-3);
  overflow: hidden; flex: none;
}
.rg-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-slow) var(--e-out);
}
.rg-card:hover .rg-card-media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .rg-card-media img, .rg-card:hover .rg-card-media img { transition: none; transform: none; }
}
/* Post without a featured image — brand tile instead of a broken frame. */
.rg-card-media--empty {
  display: grid; place-items: center; background: var(--grad-dark);
}
.rg-card-media--empty .icon {
  font-size: 2.4rem; color: var(--c-red-on-dark); opacity: .8;
}

.rg-card-body {
  padding: var(--sp-6); display: flex; flex-direction: column;
  gap: var(--sp-3); flex: 1 1 auto;
}
.rg-card-body h2,.rg-card-body h3 { margin: 0; font-size: var(--fs-d4); line-height: var(--lh-snug); }
.rg-card-body p { margin: 0; }

.rg-tag {
  align-self: flex-start; display: inline-block;
  padding: 5px 12px; border-radius: var(--r-full);
  background: var(--c-red-tint); color: var(--c-red-ink);
  font: 700 var(--fs-xs)/1.2 var(--font-b);
  letter-spacing: .04em; max-width: 100%; overflow-wrap: anywhere;
}
.rg-meta {
  margin-top: auto; padding-top: var(--sp-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--c-slate-2);
}
.rg-meta-sep { opacity: .6; }

/* Full-card link: one tab stop, no nested anchors, focus ring on the card. */
.rg-cover { position: absolute; inset: 0; z-index: 2; }
.rg-cover:focus-visible {
  outline: 3px solid var(--c-focus-light); outline-offset: -3px;
  border-radius: var(--r-2xl);
}
.rg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Empty state --------------------------------------------------- */
.rg-empty { max-width: 68ch; }
.rg-empty p + .rg-empty-cta { margin-top: var(--sp-5); }
.rg-empty-cta { margin-top: var(--sp-5); }

/* ---------- Pagination ---------------------------------------------------- */
.rg-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-2); margin-top: var(--sp-12);
}
.rg-pg {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-width: var(--tap); min-height: var(--tap); padding: 0 var(--sp-4);
  border: 1.5px solid var(--c-line-2); border-radius: var(--r-full);
  background: #fff; color: var(--c-slate); font-weight: 700; font-size: var(--fs-sm);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.rg-pg:hover { border-color: var(--c-ink); color: var(--c-ink); }
.rg-pg.is-on {
  background: var(--c-ink); border-color: var(--c-ink); color: #fff; cursor: default;
}
.rg-pg-arr .icon { font-size: 1.05rem; }
.rg-pg-gap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; min-height: var(--tap); color: var(--c-slate-2);
}
@media (max-width: 480px) {
  .rg-pg-arr span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rg-pg-arr { padding: 0; }
}

/* ---------- Article ------------------------------------------------------- */
.rg-article { max-width: 780px; margin: 0 auto; }
.rg-figure {
  margin: 0 0 var(--sp-10); border-radius: var(--r-2xl); overflow: hidden;
  background: var(--c-bg-3); box-shadow: var(--sh-2);
}
.rg-figure img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}

/* TinyMCE output. .prose supplies paragraph colour/rhythm; everything the
   editor can additionally emit is styled here. */
.rg-prose { max-width: 100%; }
.rg-prose > :first-child { margin-top: 0; }
.rg-prose h2 {
  font-family: var(--font-d); font-weight: 800; font-size: var(--fs-d3);
  line-height: var(--lh-head); color: var(--c-ink);
  margin: var(--sp-12) 0 var(--sp-4);
}
.rg-prose h3 {
  font-family: var(--font-d); font-weight: 700; font-size: var(--fs-d4);
  line-height: var(--lh-snug); color: var(--c-ink);
  margin: var(--sp-8) 0 var(--sp-3);
}
.rg-prose h4 {
  font-family: var(--font-b); font-weight: 700; font-size: var(--fs-card);
  color: var(--c-ink); margin: var(--sp-6) 0 var(--sp-2);
}
.rg-prose ul, .rg-prose ol {
  margin: var(--sp-4) 0; padding-left: var(--sp-6);
  display: grid; gap: var(--sp-2);
  color: var(--c-slate); font-size: var(--fs-card); line-height: var(--lh-relaxed);
}
.rg-prose ul { list-style: none; padding-left: 0; }
.rg-prose ul > li { position: relative; padding-left: var(--sp-6); }
.rg-prose ul > li::before {
  content: ""; position: absolute; left: 4px; top: .68em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-red);
}
.rg-prose ol { list-style: decimal; }
.rg-prose ol > li { padding-left: var(--sp-2); }
.rg-prose li > ul, .rg-prose li > ol { margin: var(--sp-2) 0 0; }
.rg-prose blockquote {
  margin: var(--sp-8) 0; padding: var(--sp-6) var(--sp-8);
  border-left: 3px solid var(--c-red); border-radius: var(--r-md);
  background: var(--c-bg-alt);
  font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--c-ink);
}
.rg-prose blockquote p { color: inherit; font-size: inherit; }
.rg-prose a {
  color: var(--c-red-ink); font-weight: 600;
  border-bottom: 1.5px solid var(--c-red-ring);
  transition: border-color var(--t-fast);
}
.rg-prose a:hover { border-bottom-color: var(--c-red); }
.rg-prose strong { color: var(--c-ink); font-weight: 700; }
.rg-prose hr {
  margin: var(--sp-10) 0; border: 0; border-top: 1px solid var(--c-line);
}
.rg-prose img {
  max-width: 100%; height: auto; display: block;
  margin: var(--sp-8) 0; border-radius: var(--r-xl);
}
.rg-prose figure { margin: var(--sp-8) 0; }
.rg-prose figure img { margin: 0; }
.rg-prose figcaption {
  margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-slate-2);
}
.rg-prose code {
  font-size: .92em; padding: 2px 6px; border-radius: 6px;
  background: var(--c-bg-3); color: var(--c-ink);
}
.rg-prose pre {
  margin: var(--sp-6) 0; padding: var(--sp-5); overflow-x: auto;
  background: var(--c-ink); color: #E6E9F0; border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: 1.6;
}
.rg-prose pre code { background: none; color: inherit; padding: 0; }

/* Tables get their own scroll container (mg_post_body_html wraps them), so a
   wide comparison table can never widen the document. */
.rg-tablewrap {
  margin: var(--sp-8) 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.rg-tablewrap table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.rg-tablewrap th, .rg-tablewrap td {
  padding: var(--sp-3) var(--sp-4); text-align: left;
  border-bottom: 1px solid var(--c-line); vertical-align: top;
}
.rg-tablewrap th { font-weight: 700; color: var(--c-ink); background: var(--c-bg-alt); white-space: nowrap; }
.rg-tablewrap td { color: var(--c-slate); }
.rg-tablewrap tr:last-child td { border-bottom: 0; }

/* ---------- Article footer ------------------------------------------------ */
.rg-postfoot {
  margin-top: var(--sp-12); padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-4);
}
.rg-updated { font-size: var(--fs-xs); color: var(--c-slate-2); margin: 0; }

/* ---------- Teaser section ------------------------------------------------ */
.rg-teaser-cta { margin-top: var(--sp-10); display: flex; justify-content: center; }
.s-dark .rg-teaser .rg-card, .rg-teaser.s-dark .rg-card { background: #fff; }

/* ---------- Small screens ------------------------------------------------- */
/* German compounds ("Winterreifen-Pflicht", "Bremsflüssigkeitswechsel") must
   be allowed to break rather than push the layout sideways. */
@media (max-width: 719px) {
  .rg-hero h1, .rg-prose h2, .rg-prose h3, .rg-prose h4,
  .rg-card-body h2,.rg-card-body h3, .rg-teaser .sh h2 { overflow-wrap: anywhere; }
  .rg-card-body { padding: var(--sp-5); }
  .rg-figure { border-radius: var(--r-xl); margin-bottom: var(--sp-8); }
  .rg-prose blockquote { padding: var(--sp-5); }
  .rg-postfoot { flex-direction: column; align-items: flex-start; }
}