/* Menüpunkt «Ratgeber» mit Panel (Schritt 31, 21.10.2026). Ergänzt rp-menue.css (Kopfzeile, Vollbild-Menü).
   Panel deckend weiss, kein Glas (G18), keine beweglichen Knöpfe (G19). Farben: Titel #151314, Text #1d1d1f,
   leise #4d464a (9.17:1), Blau #194963, Fläche #f5f6f8. Designplan: plan/designplan_ratgeber_news.md. */

/* Textzeile ab 1180 px (acht Punkte); darunter Burger und Vollbild-Menü */
@media (max-width: 1179px) {
  .rp-kopf-nav { display: none; }
  .rp-burger { display: block; }
}
@media (min-width: 1180px) {
  .rp-kopf-nav { gap: clamp(24px, calc(24px + (100vw - 1180px) * .023), 30px); }
}
.rp-kopf-innen { position: relative; }

/* Knopf wie die Menüpunkte der Kopfzeile (16 px, 500, Weiss .82; hell: #1d1d1f .72) */
.rp-rgm { display: flex; flex: none; align-items: center; }
/* Punkte nie umbrechen (vorher brach «Unsere Immobilien» zwischen 1025 und 1100 px auf zwei Zeilen) */
@media (min-width: 1180px) { .rp-kopf-nav > a, .rp-rgm-knopf { white-space: nowrap; } }
/* .rp-kopf davor: .rpg-body button { font: inherit } (0,1,1) der Ratgeber-Seiten setzte sonst 18 px und 1.6 */
.rp-kopf .rp-rgm-knopf {
  position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; cursor: pointer;
  color: rgba(255, 255, 255, .82); font: inherit; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -.01em;
  transition: color .3s var(--rp-ease-soft);
}
.rp-rgm-knopf > span { position: relative; }
.rp-rgm-knopf > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .3s var(--rp-ease-soft); }
.rp-rgm-knopf:hover, .rp-rgm-knopf[aria-expanded="true"], .rp-rgm.ist-aktiv .rp-rgm-knopf { color: #fff; }
.rp-rgm-knopf:hover > span::after, .rp-rgm-knopf[aria-expanded="true"] > span::after,
.rp-rgm.ist-aktiv .rp-rgm-knopf > span::after { transform: scaleX(1); transform-origin: 0 50%; }
.rp-rgm.ist-aktiv .rp-rgm-knopf { font-weight: 600; }
.rp-rgm-winkel { flex: none; margin-top: 1px; }
.rp-rgm-knopf[aria-expanded="true"] .rp-rgm-winkel { transform: rotate(180deg); }
.rp-rgm-knopf:focus-visible { outline: 2px solid currentColor; outline-offset: 8px; border-radius: 2px; }
.rp-kopf.ist-dunkel:not(.menue-offen) .rp-rgm-knopf,
.rp-kopf.gescrollt:not(.menue-offen) .rp-rgm-knopf { color: rgba(29, 29, 31, .72); }
.rp-kopf.ist-dunkel:not(.menue-offen) .rp-rgm-knopf:hover,
.rp-kopf.ist-dunkel:not(.menue-offen) .rp-rgm-knopf[aria-expanded="true"],
.rp-kopf.ist-dunkel:not(.menue-offen) .rp-rgm.ist-aktiv .rp-rgm-knopf,
.rp-kopf.gescrollt:not(.menue-offen) .rp-rgm-knopf:hover,
.rp-kopf.gescrollt:not(.menue-offen) .rp-rgm-knopf[aria-expanded="true"],
.rp-kopf.gescrollt:not(.menue-offen) .rp-rgm.ist-aktiv .rp-rgm-knopf { color: #1d1d1f; }
.rp-kopf.ist-dunkel:not(.menue-offen) .rp-rgm-knopf:focus-visible,
.rp-kopf.gescrollt:not(.menue-offen) .rp-rgm-knopf:focus-visible { outline-color: #194963; }

/* Panel unter der Kopfzeile, rechtsbündig mit dem Inhalt (Rand 24 px wie .rp-kopf-innen) */
.rp-rgm-panel {
  position: absolute; top: calc(100% + 18px); right: 24px; z-index: 5;
  width: 860px; max-width: calc(100% - 48px);   /* 100 % = .rp-kopf-innen (position: relative), kein 100vw */ border-radius: 14px; background: #fff; color: #1d1d1f; text-align: left;
  box-shadow: 0 1px 2px rgba(16, 52, 74, .08), 0 32px 64px -24px rgba(16, 52, 74, .38);
}
.rp-rgm-panel[hidden] { display: none; }
/* Die Regeln der Kopfzeile (.rp-kopf-nav a: Farbe, Grösse, Hover-Strich, je nach Zustand bis Spezifität 0,5,1)
   treffen auch Links im Panel. Darum hängen alle Panel-Regeln an der ID (1,0,1) und setzen die Grundwerte neu. */
#rp-rgm-panel a { font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: 0; }
#rp-rgm-panel a::after { content: none; }
.rp-rgm-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }   /* Brücke für die Maus */
/* Kompakt (Nicolas 24.10.2026: «übelst übersichtlich»): Titel und Erklärung je eine Zeile, drei Reihen, Karte gleich hoch */
.rp-rgm-innen { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 8px; padding: 10px; }
.rp-rgm-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 2px; margin: 0; padding: 0;
  list-style: none; }
.rp-rgm-liste li { margin: 0; }
#rp-rgm-panel .rp-rgm-liste a { display: grid; gap: 2px; min-height: 44px; padding: 12px 14px; border-radius: 10px; color: #1d1d1f; text-decoration: none; }
.rp-rgm-titel { color: #151314; font-size: 16px; font-weight: 600; line-height: 1.3; }
.rp-rgm-text { color: #4d464a; font-size: 16px; line-height: 1.35; }
#rp-rgm-panel .rp-rgm-liste a[aria-current="page"] { background: #f5f6f8; }
#rp-rgm-panel .rp-rgm-liste a[aria-current="page"] .rp-rgm-titel { color: #194963; }
#rp-rgm-panel .rp-rgm-liste a:focus-visible { outline: 2px solid #194963; outline-offset: -2px; }
@media (hover: hover) {
  #rp-rgm-panel .rp-rgm-liste a:hover { background: #f5f6f8; }
  #rp-rgm-panel .rp-rgm-liste a:hover .rp-rgm-titel { color: #194963; }
}

/* Karte rechts: neuste Ausgabe der Immobilien-News (sonst Rechner) */
.rp-rgm-karte { display: flex; flex-direction: column; padding: 18px 20px 20px; border-radius: 10px; background: #194963; color: #fff; }
.rp-rgm-karte p { margin: 0; }
.rp-rgm-karte-vorzeile { font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; }
.rp-rgm-karte-datum { margin: 6px 0 16px !important; font-size: 16px; line-height: 1.35; }
.rp-rgm-karte-titel { margin: 8px 0 0 !important; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
#rp-rgm-panel .rp-rgm-karte-titel a { font: inherit; letter-spacing: inherit; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: .2em; }
#rp-rgm-panel .rp-rgm-karte-titel a:focus-visible, #rp-rgm-panel .rp-rgm-karte-knopf:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
#rp-rgm-panel .rp-rgm-karte-knopf { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; min-height: 46px;
  padding: 12px 18px; white-space: nowrap; border: 1px solid #fff; border-radius: 48px; background: #fff; color: #151314; font-size: 16px; font-weight: 500;
  line-height: 1.2; text-decoration: none; }
#rp-rgm-panel .rp-rgm-karte-knopf:focus-visible { border-radius: 48px; }
@media (hover: hover) {
  #rp-rgm-panel .rp-rgm-karte-titel a:hover { text-decoration-color: #fff; }
  #rp-rgm-panel .rp-rgm-karte-knopf:hover { background: transparent; color: #fff; }
}

@media (prefers-reduced-motion: no-preference) {
  .rp-rgm-panel:not([hidden]) { animation: rp-rgm-auf .2s cubic-bezier(.22, 1, .36, 1); }
  .rp-rgm-winkel { transition: transform .3s var(--rp-ease-soft, cubic-bezier(.4, 0, .2, 1)); }
  #rp-rgm-panel .rp-rgm-liste a, #rp-rgm-panel .rp-rgm-karte-knopf { transition: background-color .2s var(--rp-ease-soft, cubic-bezier(.4, 0, .2, 1)),
    color .2s var(--rp-ease-soft, cubic-bezier(.4, 0, .2, 1)); }
}
@keyframes rp-rgm-auf { from { opacity: 0; translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) {
  .rp-rgm-knopf, .rp-rgm-knopf > span::after { transition: none; }
}
@media (forced-colors: active) {
  .rp-rgm-panel { border: 1px solid CanvasText; }
  .rp-rgm-karte { border: 1px solid CanvasText; }
}
@media print { .rp-rgm-panel { display: none !important; } }