/* ============================================================
   RATGEBER-KOMPONENTEN (Blogbeitraege)
   Praefix: rg-

   Gestaltungshaltung: redaktionell, nicht Karten-Layout.
   Struktur entsteht ueber Haarlinien und Typografie, nicht ueber
   gefuellte Kacheln - das entspricht dem in clarus.css notierten
   Prinzip "Definition durch Linien, nicht durch Flaechenkontrast".

   Schriftpaarung (bewusst zwei Familien, eine Superfamilie):
   - IBM Plex Serif  -> Ueberschriften, Einstieg, Kennzahlen, Kernaussagen
   - IBM Plex Sans   -> Lesetext, Listen, Tabellendaten (--f-base des Themes)
   Geladen ueber den @import in clarus.css.

   Radien absichtlich abgestuft statt ueberall gleich:
   2px fuer Daten-Flaechen, 4px fuer Hinweise, 8px fuer Bild und CTA.

   Clarus ist dark-only, daher keine Light-Variante.
   Mobile-first, fluide Groessen ueber clamp().
   ============================================================ */

/* ============================================================
   TYPOGRAFISCHE MODULARSKALA

   Eine Skala, ein Ankerbereich - vorher hatte jede Komponente ihren
   eigenen clamp()-Bereich, wodurch manche Elemente bei 720px Viewport
   schon ausgewachsen waren und andere erst bei 1090px. Das liess die
   Proportionen bei mittleren Breiten zufaellig wirken.

   Basis:            1rem = 15px (html-font-size aus clarus.css)
   Ankerbereich:     380px (Minimum) bis 1280px (Maximum)
   Verhaeltnis:      1,20 bei 380px, 1,28 bei 1280px
                     (engere Skala auf Mobil, weitere auf Desktop)

   Herleitung je Stufe:
     min   = 1rem * ratio^n bei ratio 1,20
     max   = 1rem * ratio^n bei ratio 1,28
     slope = (max_px - min_px) / (1280 - 380) * 100  => vw-Anteil
     intercept = min_px - slope_px * 380             => rem-Anteil

   Zuordnung, absichtlich monoton absteigend:
     6  h1                          37,3 -> 51,5px
     5  h2                          31,1 -> 40,3px
     4  Kennzahlen, Schrittziffer   25,9 -> 31,5px
     3  Einstieg, CTA-Titel         21,6 -> 24,6px
     2  h3, Kernaussage             18,0 -> 19,2px
     1  Fliesstext (Theme, 15px)

   Die Schrittziffer stand vorher auf 43,5px und damit ueber ihrer
   eigenen h2 (34,5px) - jetzt liegt sie bewusst darunter.
   ============================================================ */

:root {
  --rg-fs-2: clamp(1.2rem, 1.166rem + 0.133vw, 1.28rem);
  --rg-fs-3: clamp(1.44rem, 1.356rem + 0.33vw, 1.638rem);
  --rg-fs-4: clamp(1.728rem, 1.572rem + 0.615vw, 2.097rem);
  --rg-fs-5: clamp(2.074rem, 1.816rem + 1.017vw, 2.684rem);
  --rg-fs-6: clamp(2.488rem, 2.088rem + 1.58vw, 3.436rem);
}

.rg {
  --rg-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --rg-gap: clamp(2rem, 5vw, 3.25rem);
  --rg-r-sharp: 2px;
  --rg-r: 4px;
  --rg-r-soft: 8px;
  --rg-measure: 66ch;
  --rg-rule: 1px solid var(--c-line2);

  /* RGB-Komponenten der Ember-Akzente, damit Transparenzstufen nicht
     als hartkodierte rgba()-Literale wiederholt werden muessen. */
  --rg-heat-rgb: 255, 90, 31;
  --rg-heat2-rgb: 255, 138, 61;

  /* Mikro-Schriftgroessen als benannte Stufen statt verstreuter Werte. */
  --rg-fs-label: .7rem;
  --rg-fs-caption: .86rem;
  --rg-fs-small: .92rem;

  /* Ember-Atmosphaere, an zwei Stellen gebraucht - einmal definiert. */
  --rg-glow-bg: radial-gradient(135% 175% at 0% 0%, rgba(var(--rg-heat-rgb), .09), transparent 59%);
}

/* ---------- Titel der Beitragsseite ----------
   Kommt aus dem Template, nicht aus dem Inhalt - deshalb ausserhalb
   von .rg adressiert, aber auf die Blog-Detailseite begrenzt. */

.blog-details h1 {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 600;
  font-size: var(--rg-fs-6);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* ---------- Grundrhythmus ---------- */

.rg > * + * { margin-top: 1.15em; }
.rg p, .rg li { max-width: var(--rg-measure); }
.rg strong { font-weight: 600; }

.rg h2 {
  font-family: var(--rg-display);
  font-weight: 600;
  font-size: var(--rg-fs-5);
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin-top: var(--rg-gap);
  margin-bottom: .85rem;
  padding-top: clamp(1.1rem, 2.6vw, 1.7rem);
  border-top: var(--rg-rule);
}

.rg h3 {
  font-family: var(--rg-display);
  font-weight: 600;
  font-size: var(--rg-fs-2);
  line-height: 1.38;
  margin-top: 1.9rem;
  margin-bottom: .45rem;
  text-wrap: balance;
}

/* ---------- Links im Beitrag ----------
   Vorher: --c-ink-soft ohne Unterstreichung, dadurch dunkler als der
   Fliesstext (Kontrast zueinander 1,31:1) und als Link nicht erkennbar. */

.rg a:not(.rg-cta-btn) {
  color: var(--heat-ink) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--rg-heat2-rgb), .38);
  text-underline-offset: .19em;
  transition: color .18s ease, text-decoration-color .18s ease;
}

.rg a:not(.rg-cta-btn):hover,
.rg a:not(.rg-cta-btn):focus-visible {
  color: color-mix(in srgb, var(--heat-ink) 78%, white) !important;
  text-decoration-color: var(--heat2);
}

.rg a:focus-visible {
  outline: 2px solid var(--heat2);
  outline-offset: 2px;
  border-radius: var(--rg-r-sharp);
}

/* ---------- Kopfzeile mit Metadaten ---------- */

.rg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.5rem;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-mut);
  padding-bottom: 1rem;
  border-bottom: var(--rg-rule);
}

/* ---------- Bild neben Text ----------
   Bilder bewusst nicht auf Spaltenbreite: die Motive sind in der Quelle
   weich, bei rund 310px Anzeigebreite faellt das nicht auf. */

.rg-split {
  display: grid;
  gap: clamp(1.1rem, 2.8vw, 2.1rem);
  grid-template-columns: 1fr;
  align-items: start;
  margin: var(--rg-gap) 0;
}

@media (min-width: 820px) {
  .rg-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .rg-split--media-left { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .rg-split--media-left .rg-split-media { order: -1; }
}

.rg-split-text > * + * { margin-top: .9rem; }
.rg-split-text p,
.rg-split-text li { max-width: none; }
/* ---------- Bild mit Bildunterschrift ----------
   REIHENFOLGE IST HIER RELEVANT: Die Basisregel muss VOR den Modifiern
   stehen. Stand .rg-figure spaeter in der Datei, hat ihr margin-Shorthand
   den linken Aussenabstand von .rg-figure--right ueberschrieben (gleiche
   Spezifitaet, spaeter gewinnt) - der Text lief dann ohne Rinnstein
   direkt am Bild an, und der obere Aussenabstand druckte das Bild rund
   40px unter die erste Textzeile.

   Bewusst KEINE Karte: kein Rahmen, keine Flaeche, kein grosser Radius.
   Ein Foto soll in der Textspalte liegen, nicht darauf. Die Unterschrift
   haengt als eigene Zeile unter dem Bild, getrennt durch eine Haarlinie -
   dasselbe Muster wie .rg-toc und .rg-sources. */

.rg-figure {
  margin: var(--rg-gap) 0;
  max-width: var(--rg-measure);
}

.rg-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--rg-r-sharp);
}

.rg-figure figcaption {
  margin-top: .55rem;
  padding-top: .5rem;
  border-top: 1px solid var(--c-line);
  font-family: var(--rg-display);
  font-style: italic;
  font-size: var(--rg-fs-caption);
  line-height: 1.4;
  color: var(--c-mut);
}

/* Bild in der zweispaltigen Einleitung */
.rg-split-media { margin: 0; }
.rg-split-media .rg-figure { margin: 0; max-width: none; }

/* Umflossenes Bild rechts: Ist der begleitende Absatz kuerzer als das
   Bild, laeuft der Text daneben UND darunter weiter - ein Raster wuerde
   hier ein Loch unter der Textspalte lassen.
   Das Bild steht im Quelltext VOR seinem Absatz.

   margin-top kompensiert die halbe Zeilendurchschusshoehe des ersten
   Absatzes (line-height 1.62 bei 1em Schrift => rund .31em oben),
   damit die Bildoberkante auf der Versalhoehe der ersten Zeile sitzt. */

.rg-figure--right {
  float: right;
  width: min(40%, 19rem);
  max-width: none;
  margin: .31em 0 1.2rem clamp(1.2rem, 3vw, 2.1rem);
}

/* Ueberschriften und Flaechenelemente brechen den Umfluss ab. */
.rg h2,
.rg h3,
.rg-table,
.rg-note,
.rg-warn,
.rg-assume,
.rg-cta,
.rg-figures,
.rg-toc,
.rg-sources,
.rg-takeaway { clear: both; }

@media (max-width: 700px) {
  .rg-figure--right {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-top: var(--rg-gap);
  }
}

/* ---------- Einstieg ---------- */

.rg-lead {
  font-family: var(--rg-display);
  font-weight: 400;
  font-size: var(--rg-fs-3);
  line-height: 1.42;
  letter-spacing: -.005em;
  color: var(--c-ink);
  max-width: 40ch;
}

.rg-lead strong { font-weight: 600; }

/* ---------- Kennzahlen als Datenband ----------
   Ein durchgehendes Band mit Trennlinien statt drei gleicher Kacheln:
   liest sich als Faktenleiste, nicht als Karten-Raster. */

.rg-figures {
  display: grid;
  grid-template-columns: 1fr;
  margin: var(--rg-gap) 0;
  border-top: 2px solid var(--heat);
  border-bottom: var(--rg-rule);
  background: var(--rg-glow-bg);
}

@media (min-width: 640px) {
  .rg-figures { grid-template-columns: repeat(3, 1fr); }
  .rg-fig + .rg-fig { border-left: var(--rg-rule); }
}

.rg-fig {
  padding: clamp(1rem, 2.4vw, 1.45rem) clamp(.9rem, 2.2vw, 1.35rem);
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

@media (max-width: 639px) {
  .rg-fig + .rg-fig { border-top: var(--rg-rule); }
}

.rg-fig-value {
  font-family: var(--rg-display);
  font-weight: 500;
  font-size: var(--rg-fs-4);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--heat-ink);
  font-variant-numeric: tabular-nums lining-nums;
}

.rg-fig-label {
  font-size: .88rem;
  line-height: 1.4;
  color: var(--c-ink);
}

.rg-fig-src {
  margin-top: auto;
  padding-top: .3rem;
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-faint);
}

/* ---------- Schrittziffer ----------
   Inhaltlich begruendet: der Ratgeber ist eine echte Sequenz. */

.rg-step {
  display: flex;
  align-items: baseline;
  gap: clamp(.7rem, 1.8vw, 1.15rem);
}

.rg-step::before {
  content: attr(data-step);
  flex: none;
  font-family: var(--rg-display);
  font-weight: 400;
  font-size: var(--rg-fs-4);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--heat);
  font-variant-numeric: lining-nums;
}

/* ---------- Inhaltsverzeichnis ----------
   Bewusst ohne Flaeche: nur zwei Haarlinien, damit es als Register
   wirkt und nicht als Karte. */

.rg-toc {
  margin: var(--rg-gap) 0;
  padding: clamp(1rem, 2.4vw, 1.35rem) 0;
  border-top: var(--rg-rule);
  border-bottom: var(--rg-rule);
}

.rg-toc-title {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-mut);
  margin-bottom: .85rem;
}

.rg-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem 2.5rem;
  counter-reset: rgtoc;
}

@media (min-width: 700px) {
  .rg-toc ol { grid-template-columns: 1fr 1fr; }
}

.rg-toc li {
  counter-increment: rgtoc;
  max-width: none;
  display: flex;
  gap: .7rem;
  font-size: .95rem;
  line-height: 1.35;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--c-line);
}

.rg-toc li::before {
  content: counter(rgtoc, decimal-leading-zero);
  flex: none;
  font-family: var(--rg-display);
  font-size: .92rem;
  color: var(--c-faint);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Kernaussage als Pull-Quote ----------
   Leichter als die Hinweisboxen, damit die Hierarchie
   Warnung > Hinweis > Kernaussage sichtbar bleibt. */

.rg p.rg-takeaway,
.rg-takeaway {
  display: block;
  margin-top: 1.6rem;
  padding: 0 0 0 clamp(1.1rem, 2.6vw, 1.6rem);
  border-left: 2px solid var(--heat);
  background: none;
  border-radius: 0;
  font-family: var(--rg-display);
  font-weight: 400;
  font-size: var(--rg-fs-2);
  line-height: 1.5;
  /* Eine Stufe unter dem Fliesstextkontrast: Die Kernaussage bleibt
     gross genug zum Ueberfliegen, aber die getoente Warnbox bleibt das
     lauteste Element - Sicherheitshinweise muessen die Rangfolge fuehren. */
  color: var(--c-ink-soft);
  max-width: 52ch;
}

.rg-takeaway b {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--f-base);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-mut);
}

/* ---------- Pruefliste ---------- */

.rg-check {
  list-style: none;
  padding-left: 0;
}

.rg-check li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: .55rem;
}

.rg-check li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .52em;
  width: .58rem;
  height: .58rem;
  border: 1.5px solid var(--heat);
  border-radius: var(--rg-r-sharp);
}

/* ---------- Hinweisboxen ---------- */

.rg-note,
.rg-warn,
.rg-assume {
  margin: 1.5rem 0;
  padding: clamp(1rem, 2.4vw, 1.35rem);
  border: var(--rg-rule);
  border-left: 2px solid var(--c-line2);
  border-radius: 0 var(--rg-r) var(--rg-r) 0;
  background: var(--c-surf);
}

.rg-note > * + *,
.rg-warn > * + *,
.rg-assume > * + * { margin-top: .6rem; }

.rg-note ul,
.rg-warn ul { margin-top: .6rem; }

.rg-note-title {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-mut);
}

.rg-note { border-left-color: var(--heat2); }
.rg-note .rg-note-title { color: var(--heat-ink); }

/* Warnung deutlicher abgesetzt als der Hinweis: breiterer Balken und
   kraeftigerer Tint. Vorher unterschieden sich beide fast nur durch
   zwei benachbarte Orangetoene und waren auf Dunkel kaum trennbar. */
.rg-warn {
  border-left-width: 3px;
  border-left-color: var(--c-warning);
  background: linear-gradient(90deg, rgba(224, 101, 74, .16), rgba(224, 101, 74, .04) 42%, var(--c-surf) 100%);
}
.rg-warn .rg-note-title { color: color-mix(in srgb, var(--c-warning) 55%, white); }

.rg-assume {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--c-line2);
  border-radius: 0;
  padding: .2rem 0 .2rem clamp(1rem, 2.4vw, 1.4rem);
  font-size: .89rem;
  line-height: 1.55;
  color: var(--c-mut);
}

/* ---------- Tabellen ----------
   Kopfzeile ohne Fuellung, dafuer Ember-Linie darunter: wirkt wie eine
   Datentabelle im Fachbeitrag, nicht wie ein UI-Widget. */

.rg-table {
  margin: 1.6rem 0;
  overflow-x: auto;
  border-top: 2px solid var(--heat);
  border-bottom: var(--rg-rule);
  border-radius: var(--rg-r-sharp);
  -webkit-overflow-scrolling: touch;
}

.rg-table table {
  width: 100%;
  min-width: 34rem;
  margin: 0;
  border-collapse: collapse;
  font-size: .92rem;
}

.rg-table thead th {
  text-align: left;
  padding: .8rem .95rem;
  background: transparent;
  border-bottom: var(--rg-rule);
  color: var(--c-mut);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rg-table td {
  padding: .85rem .95rem;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
  line-height: 1.45;
  color: var(--c-ink);
}

.rg-table tbody tr:last-child td { border-bottom: 0; }
.rg-table td:first-child { color: var(--c-ink); font-weight: 500; }

/* !important ist hier nachweislich noetig: clarus.css setzt
   `table td, table th { color: var(--c-ink) !important }` als
   elementbasierte Regel. Ohne !important wird die gedaempfte
   Zahlenfarbe still ueberschrieben - gemessen bestaetigt. */
.rg-table .rg-num {
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  color: var(--c-ink-soft) !important;
}

/* ---------- Eignungs-Chips ---------- */

.rg-chip {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .22em .6em;
  border-radius: var(--rg-r-sharp);
  border: 1px solid currentColor;
  white-space: nowrap;
}

.rg-chip--yes { color: var(--c-success); }
.rg-chip--maybe { color: var(--heat-ink); }
.rg-chip--no { color: var(--c-danger); }

/* ---------- Handlungsaufforderung ---------- */

.rg-cta {
  margin: var(--rg-gap) 0;
  padding: clamp(1.3rem, 3.2vw, 2rem);
  border: 1px solid rgba(var(--rg-heat-rgb), .34);
  border-radius: var(--rg-r-soft);
  background: var(--rg-glow-bg), var(--c-surf);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: flex-start;
}

.rg-cta-title {
  font-family: var(--rg-display);
  font-weight: 600;
  font-size: var(--rg-fs-3);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--c-ink);
  max-width: 34ch;
}

/* :not() ist hier notwendig: .rg-cta p (Klasse + Element) hat hoehere
   Spezifitaet als .rg-cta-title und wuerde dessen Skalenstufe
   ueberschreiben - der Titel rutschte dadurch auf 14,3px, also unter
   Fliesstextgroesse. */
.rg-cta p:not(.rg-cta-title) {
  margin: 0;
  font-size: var(--rg-fs-small);
  line-height: 1.5;
  color: var(--c-ink-soft);
  max-width: 52ch;
}

.rg-cta-btn {
  display: inline-block;
  margin-top: .2rem;
  padding: .68rem 1.4rem;
  border-radius: var(--rg-r);
  background: var(--heat);
  color: var(--c-on-primary) !important;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none !important;
  border: 1px solid var(--heat);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.rg-cta-btn:hover,
.rg-cta-btn:focus-visible {
  background: var(--heat2);
  border-color: var(--heat2);
  box-shadow: var(--glow-sm);
  transform: translateY(-1px);
}

/* ---------- Quellen ---------- */

.rg-sources {
  margin-top: var(--rg-gap);
  padding-top: 1.3rem;
  border-top: 2px solid var(--c-line2);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--c-mut);
}

.rg-sources .rg-note-title { margin-bottom: .8rem; }
.rg-sources ul { padding-left: 1.15rem; }
.rg-sources li { max-width: none; margin-bottom: .5rem; }

.rg-checked {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--c-faint);
  max-width: none;
}

/* ---------- Hinweis auf aktiven Kategoriefilter ----------
   Steht in der Bloguebersicht, also AUSSERHALB von .rg - nutzt deshalb
   ausschliesslich Theme-Tokens, nicht die .rg-lokalen Variablen. */

.rg-filterhint {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .8rem;
  margin: 0 0 1.5rem;
  padding: .7rem .95rem;
  border: 1px solid var(--c-line2);
  border-left: 2px solid var(--heat);
  border-radius: 0 4px 4px 0;
  background: var(--c-surf);
  font-size: .9rem;
}

.rg-filterhint-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-mut);
}

.rg-filterhint-value {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--c-ink);
}

.rg-filterhint-reset {
  margin-left: auto;
  color: var(--heat-ink) !important;
  text-decoration: underline;
  text-decoration-color: rgba(255, 138, 61, .45);
  text-underline-offset: .18em;
  white-space: nowrap;
}

.rg-filterhint-reset:hover,
.rg-filterhint-reset:focus-visible { text-decoration-color: var(--heat2); }

@media (max-width: 560px) {
  .rg-filterhint-reset { margin-left: 0; }
}

/* ---------- Bewegung sparsam ---------- */

@media (prefers-reduced-motion: reduce) {
  .rg a,
  .rg-cta-btn { transition: none; }
  .rg-cta-btn:hover,
  .rg-cta-btn:focus-visible { transform: none; }
}

/* ---- Split-Bilder: schraeger Anschnitt statt hartem Quadrat ----
   Wunsch 15.08.2026: Bild soll nicht als Kasten neben dem Text stehen,
   sondern angeschraegt und zur Textseite hin transparent auslaufen.
   Maske liegt auf dem <img> selbst - die Bildunterschrift bleibt frei. */
.rg-split-media .rg-figure{position:relative;}
.rg-split-media .rg-figure::before{ /* dezenter Glut-Schein hinter dem Bild */
  content:"";position:absolute;inset:8% -4% 18% 6%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 55% at 60% 42%,rgba(255,90,31,.20),transparent 70%);
  filter:blur(14px);
}
.rg-split-media img{
  position:relative;z-index:1;border-radius:14px;
  clip-path:polygon(11% 0,100% 0,100% 100%,0 100%);
  -webkit-mask-image:linear-gradient(102deg,transparent 0,rgba(0,0,0,.5) 9%,#000 32%);
          mask-image:linear-gradient(102deg,transparent 0,rgba(0,0,0,.5) 9%,#000 32%);
}
/* Bild links, Text rechts: gespiegelt */
.rg-split--media-left .rg-split-media img{
  clip-path:polygon(0 0,89% 0,100% 100%,0 100%);
  -webkit-mask-image:linear-gradient(-102deg,transparent 0,rgba(0,0,0,.5) 9%,#000 32%);
          mask-image:linear-gradient(-102deg,transparent 0,rgba(0,0,0,.5) 9%,#000 32%);
}
/* Umflossene Einzelbilder (rg-figure--right) bekommen denselben Anschnitt */
.rg-figure--right img{
  clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);
  -webkit-mask-image:linear-gradient(102deg,transparent 0,rgba(0,0,0,.55) 8%,#000 28%);
          mask-image:linear-gradient(102deg,transparent 0,rgba(0,0,0,.55) 8%,#000 28%);
}
@media(max-width:767px){ /* einspaltig: voller Anschnitt wirkt unruhig -> abmildern */
  .rg-split-media img,.rg-figure--right img{
    clip-path:none;
    -webkit-mask-image:linear-gradient(180deg,#000 82%,rgba(0,0,0,.6));
            mask-image:linear-gradient(180deg,#000 82%,rgba(0,0,0,.6));
  }
}

/* ============================================================
   RATGEBER-DESIGN 2 (15.08.2026): mehr Flaeche, Tiefe, Kacheln.
   Das bisherige Prinzip "Definition durch Linien" bleibt im
   Fliesstext - Kacheln bekommen nur die Bausteine, die als
   eigenstaendige Elemente gelesen werden: Kennzahlen, Inhalts-
   verzeichnis, Kernaussagen und die Beitrags-Vorschauen im Hub.
   ============================================================ */

/* ---- 1) HUB: Beitrags-Vorschauen als Karten --------------- */
.blog-overview-preview-item { display: flex; margin-bottom: 1.6rem; }
.newsbox.blog-preview {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  background: var(--c-bg-soft); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.newsbox.blog-preview:hover {
  transform: translateY(-3px); border-color: rgba(255, 90, 31, .45);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .75), 0 0 26px -14px rgba(255, 90, 31, .5);
}
.newsbox.blog-preview .newsbox-header { margin: 0; }
.newsbox.blog-preview .newsbox-image {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-fill);
}
.newsbox.blog-preview .newsbox-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s var(--ease);
}
.newsbox.blog-preview:hover .newsbox-image img { transform: scale(1.05); }
.newsbox.blog-preview .newsbox-image::after { /* Verlauf nach unten: Titel bekommt Ruhe */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(12, 14, 19, .55));
}
.newsbox.blog-preview .newsbox-body {
  display: flex; flex-direction: column; gap: .55rem; flex: 1 1 auto;
  padding: clamp(.95rem, 2vw, 1.25rem);
}
.newsbox.blog-preview .newsbox-headline {
  font-family: var(--rg-display); font-weight: 600; font-size: 1.12rem;
  line-height: 1.25; letter-spacing: -.01em; color: var(--c-ink) !important;
  text-decoration: none !important; order: -1; /* Titel vor die Autorenzeile */
}
.newsbox.blog-preview:hover .newsbox-headline { color: var(--heat-ink) !important; }
.newsbox.blog-preview .row { margin: 0; font-size: .78rem; color: var(--c-mut); }
.newsbox.blog-preview .newsbox-footer {
  margin-top: auto; padding: 0 clamp(.95rem, 2vw, 1.25rem) clamp(.95rem, 2vw, 1.25rem);
  color: var(--heat-ink); font-size: .86rem; font-weight: var(--fw-medium);
}
.newsbox.blog-preview .newsbox-footer .fas { transition: transform .2s var(--ease); }
.newsbox.blog-preview:hover .newsbox-footer .fas { transform: translateX(4px); }

/* ---- 2) KENNZAHLEN als einzelne Kacheln ------------------- */
.rg-figures {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .9rem; border: 0 !important; background: transparent !important;
}
.rg-fig {
  background: var(--c-bg-soft); border: 1px solid var(--c-line);
  border-top: 2px solid var(--heat); border-radius: var(--r);
  box-shadow: 0 0 24px -18px rgba(255, 90, 31, .8);
}
.rg-fig + .rg-fig { border-top: 2px solid var(--heat) !important; }

/* ---- 3) INHALTSVERZEICHNIS als Kachel-Grid ---------------- */
.rg-toc {
  background: var(--c-bg-soft); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: clamp(1rem, 2.4vw, 1.4rem);
}
.rg-toc ol {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .35rem .9rem; margin: 0; padding: 0; list-style: none; counter-reset: rgtoc;
}
.rg-toc li { counter-increment: rgtoc; margin: 0; }
.rg-toc li a {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .5rem .6rem; border-radius: 8px; text-decoration: none !important;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.rg-toc li a::before {
  content: counter(rgtoc); flex: 0 0 auto;
  font-family: var(--rg-display); font-size: .78rem; font-weight: 600;
  color: var(--heat); min-width: 1.2em; text-align: right;
}
.rg-toc li a:hover { background: var(--c-fill); color: var(--heat-ink) !important; }

/* ---- 4) KERNAUSSAGEN als Karte ---------------------------- */
.rg p.rg-takeaway {
  background: linear-gradient(100deg, rgba(255, 90, 31, .10), transparent 62%);
  border: 1px solid rgba(255, 90, 31, .28); border-left: 3px solid var(--heat);
  border-radius: var(--r); padding: clamp(.85rem, 2vw, 1.15rem) clamp(1rem, 2.2vw, 1.35rem);
}

/* ---- 5) ABSCHNITTE: Glut-Akzent an der h2 ----------------- */
.rg h2 { position: relative; }
.rg h2::after {
  content: ""; display: block; width: 2.6rem; height: 3px; margin-top: .55rem;
  border-radius: 2px; background: linear-gradient(90deg, var(--heat), rgba(255, 90, 31, 0));
}
.rg h2.rg-step::after { display: none; } /* Schrittziffern haben eigene Optik */

/* ---- 6) BEITRAGS-KOPF: Titel mit Glut-Akzent, Autorzeile ruhig ----
   Der Kopf kommt aus NOVA (h1 + .author-meta) und stand bisher ohne
   jede Auszeichnung ueber dem Text. */
.blog-details > h1 {
  font-family: var(--rg-display); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.1; text-wrap: balance;
  max-width: 30ch; margin-bottom: .85rem;
}
.blog-details > h1::after {
  content: ""; display: block; width: 3.4rem; height: 3px; margin-top: .9rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--heat), rgba(255, 90, 31, 0));
}
.blog-details .author-meta {
  padding-bottom: 1rem; border-bottom: var(--rg-rule);
  font-size: .84rem; color: var(--c-mut);
}
/* Die rg-meta-Zeile im Beitrag (Lesezeit / Pruefdatum / Autor) als Chips */
.rg-meta { gap: .45rem !important; flex-wrap: wrap; }
.rg-meta > span {
  background: var(--c-fill); border: 1px solid var(--c-line);
  border-radius: var(--r-pill); padding: .22rem .7rem;
  font-size: .76rem; color: var(--c-ink-soft);
}

/* ---- 7) HUB-INTRO als ruhige Karte ------------------------ */
.rg-hubintro {
  background: var(--c-bg-soft); border: 1px solid var(--c-line);
  border-left: 3px solid var(--heat); border-radius: var(--r);
  padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.6rem);
  margin-bottom: 1.6rem;
}
.rg-hubintro p { margin: 0; max-width: 78ch; line-height: 1.65; }

/* ---- Fix 15.08.2026: Bild fuellte die Kachel nicht ganz ----
   <picture> ist ein Inline-Element und schrumpft auf die natuerliche
   Bildbreite des gewaehlten srcset-Kandidaten - dadurch bezog sich das
   width:100% am <img> auf picture statt auf die Kachel und rechts blieb
   ein Streifen Hintergrund stehen. Darum picture selbst zum Block machen
   und die Bild-Groesse gegen NOVAs .img-fluid durchsetzen. */
.newsbox.blog-preview .newsbox-image,
.newsbox.blog-preview .preview-image { display: block; width: 100%; }
.newsbox.blog-preview .newsbox-image picture {
  display: block; width: 100%; height: 100%;
}
.newsbox.blog-preview .newsbox-image img,
.newsbox.blog-preview .newsbox-image img.img-fluid {
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover; display: block;
}

/* ---- Paket 1, 17.08.2026: Umbruch der grossen Serif-Ueberschriften ----
   Absicherung unabhaengig von der Ladeordnung: Die Ratgeber-H1 startet bei
   37 px, H2 bei 31 px. Deutsche Komposita sind dort unumbrechbar und es gibt
   keinen kappenden Vorfahren - ohne diese Regel entsteht bei 320-375 px eine
   echte horizontale Seiten-Scrollbar. */
.rg h1, .rg h2, .rg h3, .rg h4,
.blog-details > h1, .rg-cta-title, .rg-toc-title {
  overflow-wrap: break-word;
  hyphens: auto;
}