/* Ratgeber – Übersicht (rh-) und Beitrags-Ergänzungen (rg-).
   Ein System statt Korrekturschichten: Die Übersicht nutzt eigene Klassen, damit
   die alten guide-editorial-/guide-journeys-Regeln aus editorial-system.css und
   guide-journal.css nicht mehr greifen.
   27.10.2026 (Runde 2): Übersicht in der Sprache des Startseiten-Heros (home-hero.css):
   dunkler Grund #001424, Foto läuft ins Dunkle aus, Inter 800 mit blauer zweiter Zeile,
   Welle als Übergang, Pfeilkreise. Magenta nur für Aktionen, keine farbigen Kartenränder. */
:root {
  --rh-ink: #16344b;
  --rh-muted: #536574;
  --rh-paper: #f4f6f8;
  --rh-line: #d8e0e7;
  --rh-blue: #215d85;
  --rh-magenta: #a61657;
  --rh-hero: #102b40;
  --rh-night: #001424;
  --rh-bright: #0aa0ff;
  --rh-action: #0176e4;
  --rh-accent: #0395fa;
  --rh-schema: #eef3f8;
  --rh-radius: 20px;
  --rh-soft: 0 1px 2px rgba(16, 43, 64, .04), 0 14px 34px rgba(16, 43, 64, .06);
  --rh-lift: 0 22px 48px rgba(16, 43, 64, .14);
}

/* ---------- Übersicht: Typografie ---------- */
.rh-hub { font-family: Inter, system-ui, sans-serif; }
.rh-hub h2 { margin: 14px 0 0; color: var(--rh-ink); font: 800 clamp(2.1rem, 3.7vw, 3.35rem)/1.02 Inter, system-ui, sans-serif; letter-spacing: -.045em; }
.rh-hub h2 em { font-style: normal; color: var(--rh-accent); }
.rh-hub h3 { font-family: Inter, system-ui, sans-serif; letter-spacing: -.02em; }
/* guide-journal.css setzt Barlow 600 mit !important – die Übersicht folgt dem Startseiten-Hero (Inter). */
.rh-hub.guide-journal :is(h1, h2) { font-family: Inter, system-ui, sans-serif !important; font-weight: 800 !important; }
.rh-hub.guide-journal h3 { font-family: Inter, system-ui, sans-serif !important; font-weight: 700 !important; }
.rh-hub .guide-kicker { display: inline-flex; align-items: center; gap: 12px; color: #4f6684; font: 600 .82rem/1.3 Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.rh-hub .guide-kicker::before { content: ""; width: 30px; height: 3px; border-radius: 2px; background: #009ef3; }
.rh-head p { color: var(--rh-muted); font-size: 1.04rem; line-height: 1.65; }
.rh-head--center { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.rh-head--center p { margin: 18px auto 0; max-width: 560px; }
.rh-head--split { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.rh-head--split p { display: grid; justify-items: end; gap: 2px; margin: 0; text-align: right; }
.rh-head--split p strong { color: var(--rh-ink); font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.rh-head--split p span { font-size: .88rem; }

/* ---------- Hero ---------- */
.rh-hero { --rh-wave-h: clamp(54px, 7.9vw, 140px);
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(620px, calc(100vh - 111px), 780px);
  padding: clamp(48px, 7vh, 84px) 0 calc(clamp(48px, 6vh, 72px) + var(--rh-wave-h) * .8);
  background: var(--rh-night); color: #fff; }
.rh-hero__media { position: absolute; inset: 0 0 0 auto; z-index: -1; width: min(64%, 1180px); }
.rh-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }
.rh-hero__media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, var(--rh-night) 0%, rgba(0, 20, 36, .9) 12%, rgba(0, 20, 36, .45) 32%, rgba(0, 20, 36, .08) 52%, rgba(0, 20, 36, 0) 64%),
  linear-gradient(0deg, rgba(0, 20, 36, .55) 0%, rgba(0, 20, 36, 0) 30%); }
.rh-hero__inner { position: relative; }
.rh-hero__inner > * { max-width: 680px; }
.rh-crumbs { display: flex; align-items: center; gap: 10px; margin: 0 0 30px; font-size: .84rem; }
.rh-crumbs a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.rh-crumbs a:hover, .rh-crumbs a:focus-visible { color: #fff; text-decoration: underline; }
.rh-crumbs span { color: rgba(255, 255, 255, .45); }
.rh-crumbs [aria-current] { color: #fff; font-weight: 600; }
.rh-hero__kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 22px; color: rgba(255, 255, 255, .92); font: 600 .86rem/1.3 Inter, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.rh-hero__kicker span { width: 34px; height: 3px; border-radius: 2px; background: #009ef3; }
.rh-hero__kicker b { font-weight: 600; color: rgba(255, 255, 255, .7); }
.rh-hero h1 { margin: 0; color: #fff; font: 800 clamp(2.9rem, 5.7vw, 5.3rem)/.98 Inter, system-ui, sans-serif; letter-spacing: -.055em; }
.rh-hero h1 em { font-style: normal; color: var(--rh-bright); background: linear-gradient(180deg, #19aaff 0%, #0a86e6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rh-hero__lead { margin: 26px 0 0; color: rgba(255, 255, 255, .86); font-size: clamp(1.04rem, 1.3vw, 1.2rem); line-height: 1.55; }
.rh-hero__inner > .rh-hero__lead { max-width: 560px; }
.rh-hero__lead strong { color: #fff; font-weight: 700; }

/* Suche: gleiche Kontur wie die Hero-Aktionen der Startseite (24/10-Ecken), Pfeilkreis rechts */
.rh-search { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 36px; padding: 10px 10px 10px 22px; border-radius: 24px 10px 24px 10px; background: #f8fbff; color: var(--rh-ink); box-shadow: 0 18px 40px rgba(0, 8, 18, .32); transition: box-shadow .25s ease, background-color .25s ease; }
.rh-hero__inner > .rh-search { max-width: 620px; }
.rh-search:focus-within { background: #fff; box-shadow: 0 18px 40px rgba(0, 8, 18, .32), 0 0 0 4px rgba(10, 160, 255, .45); }
.rh-search__icon { display: grid; place-items: center; color: var(--rh-action); }
.rh-search__icon svg { width: 22px; height: 22px; }
.rh-search__field { flex: 1; min-width: 0; }
.rh-search__field label { display: block; margin: 0 0 2px; color: #466382; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rh-search__field input { width: 100%; padding: 0; border: 0; background: transparent; color: var(--rh-ink); font: 500 1.08rem/1.4 Inter, sans-serif; outline: none; box-shadow: none; }
.rh-search__field input::placeholder { color: #8a9aa8; }
.rh-search__field input::-webkit-search-cancel-button { display: none; }
.rh-search__clear, .rh-search__go { display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.rh-search__clear[hidden] { display: none; }
.rh-search__clear { width: 36px; height: 36px; background: var(--rh-paper); color: var(--rh-ink); }
.rh-search__clear:hover { background: var(--rh-line); }
.rh-search__clear svg { width: 16px; height: 16px; }
.rh-search__go { width: 52px; height: 52px; background: var(--rh-action); color: #fff; }
.rh-search__go:hover, .rh-search__go:focus-visible { background: #0866c9; }
.rh-search__go svg { width: 22px; height: 22px; transition: transform .2s ease; }
.rh-search__go:hover svg { transform: translateY(3px); }
.rh-search__status { margin: 12px 0 0 4px; color: rgba(255, 255, 255, .66); font-size: .84rem; }
.rh-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; }
.rh-terms span { margin-right: 6px; color: rgba(255, 255, 255, .6); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rh-terms button { padding: 8px 15px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); color: #fff; font: 600 .88rem/1.2 Inter, sans-serif; cursor: pointer; backdrop-filter: blur(6px); transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.rh-terms button:hover, .rh-terms button:focus-visible { background: #fff; color: var(--rh-ink); transform: translateY(-1px); }
.rh-hero__credit { position: absolute; right: 18px; bottom: calc(var(--rh-wave-h) * .42 + 8px); z-index: 2; color: rgba(255, 255, 255, .55); font-size: .72rem; letter-spacing: .04em; }
.rh-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; display: block; width: 100%; height: var(--rh-wave-h); pointer-events: none; }
.rh-hero__wave-fill { fill: var(--rh-paper); }

/* ---------- Einstiege ---------- */
.rh-start { padding: 36px 0 104px; background: var(--rh-paper); }
.rh-start__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.rh-path { display: flex; flex-direction: column; min-height: 100%; padding: 32px 30px 26px; border-radius: var(--rh-radius); background: #fff; color: var(--rh-ink); text-decoration: none; box-shadow: var(--rh-soft); transition: transform .25s ease, box-shadow .25s ease; }
.rh-path:hover, .rh-path:focus-visible { transform: translateY(-5px); box-shadow: var(--rh-lift); color: var(--rh-ink); }
.rh-path__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 28px; border-radius: 50%; background: #eaf4ff; color: var(--rh-action); box-shadow: inset 0 0 0 1px rgba(1, 118, 228, .16); transition: background-color .25s ease, color .25s ease; }
.rh-path__icon svg { width: 24px; height: 24px; }
.rh-path:hover .rh-path__icon { background: var(--rh-action); color: #fff; }
.rh-path small { color: #4f6684; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rh-path h3 { margin: 10px 0 12px; color: var(--rh-ink); font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.rh-path p { margin: 0 0 28px; color: var(--rh-muted); font-size: .97rem; line-height: 1.6; }
.rh-path b { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid #e6ebf0; color: var(--rh-ink); font-size: .95rem; }
.rh-path b span { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rh-action); color: var(--rh-action); transition: background-color .25s ease, color .25s ease; }
.rh-path b svg { width: 18px; height: 18px; transition: transform .25s ease; }
.rh-path:hover b span { background: var(--rh-action); color: #fff; }
.rh-path:hover b svg { transform: translateX(3px); }

/* ---------- Schwerpunkt Klima: Bild links bis zum Rand, Titel rechts ---------- */
.rh-focus { position: relative; isolation: isolate; overflow: hidden; padding: clamp(88px, 10vw, 128px) 0; background: radial-gradient(circle at 100% 0%, rgba(1, 118, 228, .28), transparent 46%), var(--rh-night); color: #fff; }
.rh-focus__media { position: absolute; inset: 0 auto 0 0; z-index: -1; width: 54%; margin: 0; }
.rh-focus__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.rh-focus__media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(270deg, var(--rh-night) 0%, rgba(0, 20, 36, .88) 10%, rgba(0, 20, 36, .35) 34%, rgba(0, 20, 36, 0) 58%),
  linear-gradient(0deg, rgba(0, 20, 36, .5) 0%, rgba(0, 20, 36, 0) 28%); }
.rh-focus__media figcaption { position: absolute; left: 18px; bottom: 14px; z-index: 1; color: rgba(255, 255, 255, .6); font-size: .72rem; letter-spacing: .04em; }
.rh-focus__content { width: min(600px, 50%); margin-left: auto; }
.rh-focus .guide-kicker { color: rgba(255, 255, 255, .86); }
.rh-focus h2 { color: #fff; font-size: clamp(2.3rem, 4.2vw, 3.7rem); }
.rh-focus h2 em { color: var(--rh-bright); background: linear-gradient(180deg, #19aaff 0%, #0a86e6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rh-focus__content > p { margin: 22px 0 30px; color: rgba(255, 255, 255, .78); font-size: 1.04rem; line-height: 1.7; }
.rh-focus__list { margin: 0 0 34px; padding: 0; list-style: none; }
.rh-focus__list li + li { border-top: 1px solid rgba(255, 255, 255, .13); }
.rh-focus__list a { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 19px 4px; color: #fff; text-decoration: none; transition: padding .25s ease; }
.rh-focus__list a:hover, .rh-focus__list a:focus-visible { padding-left: 14px; color: #fff; }
.rh-focus__list strong { display: block; font-size: 1.1rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.rh-focus__list small { display: -webkit-box; overflow: hidden; margin-top: 5px; color: rgba(255, 255, 255, .62); font-size: .9rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.rh-focus__list svg { flex: 0 0 auto; width: 42px; height: 42px; padding: 11px; border-radius: 50%; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background-color .25s ease, color .25s ease; }
.rh-focus__list a:hover svg { background: var(--rh-action); box-shadow: none; }
.rh-focus__cta { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 10px; background: var(--rh-magenta); color: #fff; font-weight: 700; text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
.rh-focus__cta:hover, .rh-focus__cta:focus-visible { transform: translateY(-2px); background: #8f124a; color: #fff; }
.rh-focus__cta svg { width: 17px; height: 17px; }

/* ---------- Bibliothek ---------- */
.rh-library { padding: 104px 0 96px; background: #fff; }
.rh-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 36px; }
.rh-filter button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px 10px 17px; border: 0; border-radius: 999px; background: var(--rh-paper); color: var(--rh-ink); font: 600 .9rem/1.2 Inter, sans-serif; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.rh-filter button:hover { background: #e7edf2; }
.rh-filter small { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: #fff; color: var(--rh-muted); font-size: .74rem; font-weight: 700; text-align: center; }
.rh-filter button.is-active { background: var(--rh-ink); color: #fff; }
.rh-filter button.is-active small { background: rgba(255, 255, 255, .16); color: #fff; }

.rh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; }
.rh-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--rh-radius); background: var(--rh-paper); transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.rh-card[hidden] { display: none; }
.rh-card:hover, .rh-card:focus-within { transform: translateY(-5px); background: #fff; box-shadow: var(--rh-lift); }
.rh-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e7eef3; }
.rh-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.rh-card:hover .rh-card__media img { transform: scale(1.04); }
.rh-card.is-schema .rh-card__media, .rh-card.is-schema .rh-card__media img { background: var(--rh-schema); object-fit: contain; }
.rh-card__body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px; }
.rh-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; color: var(--rh-muted); font-size: .76rem; }
.rh-card__meta span:first-child { padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--rh-action); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; transition: background-color .25s ease; }
.rh-card:hover .rh-card__meta span:first-child { background: #eaf4ff; }
.rh-card h3 { margin: 14px 0 10px; font-size: 1.28rem; font-weight: 800; line-height: 1.2; }
.rh-card h3 a { color: var(--rh-ink); text-decoration: none; }
.rh-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* ganze Karte klickbar */
.rh-card h3 a:focus-visible { outline: none; }
.rh-card:has(h3 a:focus-visible) { outline: 3px solid var(--rh-action); outline-offset: 3px; }
.rh-card__text { display: -webkit-box; overflow: hidden; margin: 0 0 22px; color: var(--rh-muted); font-size: .95rem; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.rh-card__more { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; color: var(--rh-ink); font-size: .9rem; font-weight: 700; }
.rh-card__more svg { flex: none; width: 38px; height: 38px; padding: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rh-action); color: var(--rh-action); transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.rh-card:hover .rh-card__more svg { background: var(--rh-action); color: #fff; transform: rotate(45deg); }

/* Aufmacher: dunkle Fläche als Gegenpol zur hellen Bibliothek */
.rh-card--lead { display: grid; grid-column: span 2; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--rh-hero); }
.rh-card--lead:hover, .rh-card--lead:focus-within { background: #0c2335; }
.rh-card--lead .rh-card__media { aspect-ratio: auto; min-height: 380px; }
.rh-card--lead .rh-card__body { justify-content: center; padding: 40px 42px; }
.rh-card--lead .rh-card__meta { color: rgba(255, 255, 255, .7); }
.rh-card--lead .rh-card__meta span:first-child, .rh-card--lead:hover .rh-card__meta span:first-child { background: rgba(255, 255, 255, .1); color: #8fd0ff; }
.rh-card--lead h3 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.06; letter-spacing: -.04em; }
.rh-card--lead h3 a { color: #fff; }
.rh-card--lead .rh-card__text { -webkit-line-clamp: 5; color: rgba(255, 255, 255, .76); font-size: 1rem; }
.rh-card--lead .rh-card__more { justify-content: flex-start; gap: 14px; margin-top: 6px; color: #fff; }
.rh-card--lead .rh-card__more svg { background: var(--rh-action); box-shadow: none; color: #fff; }

/* Letzte Karte allein in der Zeile: als breite Abschlusskarte statt Lücke. */
@media (min-width: 1000px) {
  .rh-card--tail { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr); }
  .rh-card--tail .rh-card__media { aspect-ratio: auto; min-height: 240px; }
  .rh-card--tail .rh-card__body { justify-content: center; padding: 32px 44px; }
  .rh-card--tail h3 { font-size: 1.7rem; }
  .rh-card--tail .rh-card__more { justify-content: flex-start; gap: 14px; }
}
@media (min-width: 701px) and (max-width: 999px) {
  .rh-card--tail { grid-column: 1 / -1; }
}

.rh-empty { padding: 48px 24px; border-radius: var(--rh-radius); background: var(--rh-paper); text-align: center; }
.rh-empty svg { width: 32px; height: 32px; color: var(--rh-action); }
.rh-empty h3 { margin: 14px 0 8px; color: var(--rh-ink); }
.rh-empty p { margin: 0 auto 18px; max-width: 460px; color: var(--rh-muted); }
.rh-empty a { color: var(--rh-blue); font-weight: 700; }

/* ---------- Abschluss ---------- */
.rh-next { padding: 0 0 110px; background: #fff; }
.rh-next__panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); align-items: center; gap: 48px; padding: clamp(40px, 5.5vw, 76px); border-radius: 28px; background: radial-gradient(circle at 100% 100%, rgba(1, 118, 228, .34), transparent 50%), radial-gradient(circle at 0% 0%, rgba(33, 93, 133, .45), transparent 45%), var(--rh-night); color: #fff; }
.rh-next .guide-kicker { color: rgba(255, 255, 255, .86); }
.rh-next h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 3.1rem); }
.rh-next h2 em { color: var(--rh-bright); }
.rh-next p { max-width: 520px; margin: 20px 0 0; color: rgba(255, 255, 255, .78); font-size: 1.04rem; line-height: 1.65; }
.rh-next__actions { display: grid; gap: 22px; justify-items: start; }
.rh-next__cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px 24px; border-radius: 12px; background: var(--rh-magenta); color: #fff; font-size: 1.05rem; font-weight: 700; text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
.rh-next__cta:hover, .rh-next__cta:focus-visible { transform: translateY(-2px); background: #8f124a; color: #fff; }
.rh-next__cta svg { width: 18px; height: 18px; }
.rh-next__phone { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; }
.rh-next__phone > svg { flex: none; width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.rh-next__phone strong { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.rh-next__phone small { display: block; margin-top: 4px; color: rgba(255, 255, 255, .66); font-size: .84rem; }
.rh-next__phone:hover { color: #fff; }
.rh-next__phone:hover strong { text-decoration: underline; }

/* ---------- Tablet ---------- */
@media (max-width: 999px) {
  .rh-hero__media { width: 78%; }
  .rh-hero__media::after { background: linear-gradient(90deg, var(--rh-night) 0%, rgba(0, 20, 36, .9) 24%, rgba(0, 20, 36, .5) 52%, rgba(0, 20, 36, .15) 80%), linear-gradient(0deg, rgba(0, 20, 36, .75) 0%, transparent 40%); }
  .rh-start__grid { grid-template-columns: 1fr; gap: 12px; }
  .rh-path { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 18px; align-items: center; padding: 20px 20px 20px 22px; }
  .rh-path__icon { grid-row: 1 / 4; width: 52px; height: 52px; margin: 0; }
  .rh-path small { grid-column: 2; }
  .rh-path h3 { grid-column: 2; margin: 4px 0; font-size: 1.18rem; }
  .rh-path p { grid-column: 2; margin: 0; font-size: .92rem; }
  .rh-path b { grid-column: 3; grid-row: 1 / 4; margin: 0; padding: 0; border: 0; font-size: 0; }
  .rh-focus { padding: 0 0 72px; background: var(--rh-night); }
  .rh-focus__media { position: relative; inset: auto; z-index: 0; width: 100%; height: clamp(240px, 46vw, 380px); }
  .rh-focus__media::after { background: linear-gradient(0deg, var(--rh-night) 0%, rgba(0, 20, 36, .4) 40%, rgba(0, 20, 36, 0) 70%); }
  .rh-focus__media figcaption { left: auto; right: 16px; bottom: auto; top: 14px; }
  .rh-focus__content { position: relative; width: auto; margin: -36px 0 0; }
  .rh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-next__panel { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Handy: eigene Gewichtung ---------- */
@media (max-width: 767.98px) {
  .rh-hero { --rh-wave-h: 46px; display: block; min-height: 0; padding: 0 0 70px; }
  .rh-hero__media { position: relative; inset: auto; width: 100%; height: 250px; }
  .rh-hero__media img { object-position: 62% 30%; }
  .rh-hero__media::after { background: linear-gradient(0deg, var(--rh-night) 0%, rgba(0, 20, 36, .5) 34%, rgba(0, 20, 36, 0) 64%); }
  .rh-hero__inner { margin-top: -54px; }
  .rh-crumbs { margin-bottom: 18px; font-size: .8rem; }
  .rh-hero__kicker { gap: 4px 8px; margin-bottom: 14px; font-size: .72rem; }
  .rh-hero__kicker span { width: 24px; }
  .rh-hero h1 { font-size: clamp(2.35rem, 11.4vw, 3.3rem); letter-spacing: -.05em; }
  .rh-hero__lead { margin-top: 16px; font-size: 1rem; }
  .rh-hero__lead strong { display: block; }
  .rh-search { margin-top: 26px; padding: 8px 8px 8px 16px; gap: 10px; }
  .rh-search__field input { font-size: 1rem; }
  .rh-search__go { width: 46px; height: 46px; }
  .rh-terms { flex-wrap: nowrap; margin: 20px -16px 0; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
  .rh-terms::-webkit-scrollbar { display: none; }
  .rh-terms > * { flex: 0 0 auto; }
  .rh-hero__credit { top: 12px; bottom: auto; right: 14px; }
  .rh-hub h2 { font-size: clamp(1.95rem, 8.6vw, 2.5rem); }
  .rh-start { padding: 28px 0 60px; }
  .rh-path { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 14px; padding: 16px 16px 16px 18px; }
  .rh-path__icon { grid-row: 1 / 3; width: 44px; height: 44px; }
  .rh-path__icon svg { width: 20px; height: 20px; }
  .rh-path small { font-size: .68rem; }
  .rh-path h3 { margin: 2px 0 0; font-size: 1.06rem; line-height: 1.25; }
  .rh-path p { display: none; }
  .rh-path b { grid-row: 1 / 3; }
  .rh-path b span { width: 36px; height: 36px; }
  .rh-head--center { margin-bottom: 26px; }
  .rh-focus h2 { font-size: clamp(2.1rem, 9.6vw, 2.7rem); }
  .rh-focus__content > p { margin: 16px 0 18px; }
  .rh-focus__list { margin-bottom: 26px; }
  .rh-focus__list a { padding: 16px 0; }
  .rh-focus__list small { display: none; }
  .rh-focus__list strong { font-size: 1.02rem; }
  .rh-focus__list svg { width: 38px; height: 38px; padding: 10px; }
  .rh-focus__cta { width: 100%; justify-content: center; }
  .rh-library { padding: 60px 0 56px; }
  .rh-head--split { display: block; }
  .rh-head--split p { justify-items: start; margin-top: 12px; text-align: left; }
  .rh-head--split p strong { font-size: 1.2rem; }
  .rh-filter { flex-wrap: nowrap; margin: 22px -16px 22px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
  .rh-filter::-webkit-scrollbar { display: none; }
  .rh-filter button { flex: 0 0 auto; }
  .rh-grid { grid-template-columns: 1fr; gap: 12px; }
  .rh-card--lead { display: flex; grid-column: auto; }
  .rh-card--lead .rh-card__media { aspect-ratio: 16 / 10; min-height: 0; }
  .rh-card--lead .rh-card__body { padding: 22px 22px 24px; }
  .rh-card--lead h3 { font-size: 1.7rem; }
  .rh-card:not(.rh-card--lead), .rh-card.rh-card--tail { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-column: auto; }
  .rh-card:not(.rh-card--lead) .rh-card__media { aspect-ratio: auto; height: 100%; min-height: 112px; }
  .rh-card:not(.rh-card--lead) .rh-card__body { padding: 14px 16px; }
  .rh-card:not(.rh-card--lead) h3 { margin: 8px 0 0; font-size: 1.02rem; line-height: 1.28; letter-spacing: -.01em; }
  .rh-card:not(.rh-card--lead) .rh-card__text, .rh-card:not(.rh-card--lead) .rh-card__more { display: none; }
  .rh-card:not(.rh-card--lead) .rh-card__meta { font-size: .68rem; }
  .rh-card:not(.rh-card--lead) .rh-card__meta span:first-child { padding: 3px 8px; }
  .rh-card:hover, .rh-card:focus-within { transform: none; }
  .rh-next { padding-bottom: 64px; }
  .rh-next__panel { padding: 34px 24px; border-radius: 22px; }
  .rh-next__phone strong { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-path, .rh-card, .rh-card__media img, .rh-focus__list a, .rh-focus__cta, .rh-next__cta, .rh-terms button, .rh-card__more svg, .rh-path b svg { transition: none; }
  .rh-path:hover, .rh-card:hover, .rh-focus__cta:hover, .rh-next__cta:hover, .rh-terms button:hover { transform: none; }
  .rh-card:hover .rh-card__media img, .rh-card:hover .rh-card__more svg { transform: none; }
}

/* ---------- Beitrags-Ergänzungen ---------- */
/* Keine farbigen Kartenränder: Kurzantwort und Rechenbeispiel als ruhige Flächen. */
.rg-article .article-answer { border: 0; border-radius: var(--rh-radius); grid-template-rows: auto 1fr; align-items: start; }
.rg-article .article-answer > span, .rg-article .article-answer h2 { align-self: start; }
.rg-article .article-answer > div { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.rg-article .article-answer > div > p:first-child { margin: 0; color: var(--rh-ink); font-size: 1.08rem; line-height: 1.75; }
.rg-article .journal-calculation { border: 0; border-radius: 12px; }
.rg-keyfacts__label { margin: 22px 0 8px !important; color: var(--rh-blue) !important; font-size: .74rem !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rg-keyfacts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rg-keyfacts li { position: relative; padding-left: 22px; color: var(--rh-ink); font-size: .98rem; line-height: 1.6; }
.rg-keyfacts li::before { content: ""; position: absolute; top: .62em; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--rh-blue); }

.rg-article .article-hero figure.is-schema img { object-fit: contain; background: var(--rh-schema); }
.rg-article .article-related-grid a.is-schema img { object-fit: contain; background: var(--rh-schema); }

.rg-figure { margin: 28px 0 30px; }
.rg-figure img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--rh-schema); }
.rg-figure figcaption { margin-top: 10px; color: var(--rh-muted); font-size: .84rem; }

.rg-note { margin: 26px 0; padding: 24px 26px; border-radius: 12px; background: var(--rh-hero); color: #fff; }
.rg-note strong { display: block; margin-bottom: 8px; font-size: 1.08rem; }
.guide-journal .article-body .rg-note p { margin: 0; color: rgba(255, 255, 255, .82); }

.guide-journal .article-section ol.rg-steps { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: rg-step; }
.guide-journal .article-section ol.rg-steps li { display: block; position: relative; padding: 16px 0 16px 56px; border-bottom: 1px solid var(--rh-line); counter-increment: rg-step; }
.guide-journal .article-section ol.rg-steps li:last-child { border-bottom: 0; }
.guide-journal .article-section ol.rg-steps li::before { content: counter(rg-step); position: absolute; top: 14px; left: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--rh-hero); color: #fff; font-size: .95rem; font-weight: 700; }
.rg-article .journal-table-wrap td, .rg-article .journal-table-wrap th { vertical-align: top; }

@media (max-width: 700px) {
  .rg-article .article-answer > div { grid-column: auto; grid-row: auto; margin-top: 16px; }
  .rg-note { padding: 20px; }
  .guide-journal .article-section ol.rg-steps li { padding-left: 50px; }
}