/* Bundesstaatenauswahl der Rubrikseiten (RUBRIK-FILTER-001): nur auf /rubrik/<id>/ eingebunden. Farben wie die
   angenommene Reisezielübersicht (REISEZIELE-DESIGN-001, Variante A): weiße Plättchen mit warmem Rand und sandbeiger
   Zahl, Aubergine #35263e, Gold #d2c485. Breite Ansicht: Plättchen; schmale Ansicht: natives Auswahlfeld. */
.rf {
  --rf-sand: #f5f0e5; --rf-gold: #d2c485; --rf-aubergine: #35263e; --rf-neben: #69616b;
  --rf-rand: #ddd5c7; --rf-hover: #f7f3e9; --rf-zahl: #625344;
  padding-top: var(--s6);
}
.rf[hidden], .rf-ohnejs[hidden], .raster > .karte[hidden] { display: none; }
.rf-ohnejs { margin: var(--s5) 0 0; max-width: var(--breite-text); }
.rf-titel { font-size: 1.3125rem; color: var(--rf-aubergine); margin: 0 0 var(--s4);
  border-top: 1px solid var(--farbe-linie); padding-top: var(--s4); }
.rf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.rf-knopf {
  display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; max-width: 100%;
  padding: var(--s2) var(--s4); margin: 0; background: var(--farbe-grund); color: var(--rf-aubergine);
  border: 1px solid var(--rf-rand); border-radius: 8px; box-shadow: 0 2px 5px rgba(53, 38, 62, 0.03);
  font: inherit; font-size: 1rem; line-height: 1.3; text-align: left; cursor: pointer;
  transition: background-color var(--uebergang), border-color var(--uebergang);
}
.rf-name { overflow-wrap: break-word; min-width: 0; }
.rf-zahl { flex-shrink: 0; padding: 2px 7px; border-radius: 5px; background: var(--rf-sand); color: var(--rf-zahl);
  font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rf-knopf:hover { background: var(--rf-hover); border-color: var(--rf-gold); }
.rf-knopf:hover .rf-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.rf-knopf:focus-visible { outline: 3px solid var(--rf-aubergine); outline-offset: 3px; }
/* Gewählt: dunkle Fläche, fette Schrift und Häkchen, also nicht allein über die Farbe erkennbar */
.rf-knopf[aria-pressed="true"] { background: var(--rf-aubergine); border-color: var(--rf-aubergine); color: #ffffff; font-weight: 600; }
.rf-knopf[aria-pressed="true"]::before { content: "\2713"; content: "\2713" / ""; font-weight: 600; }
.rf-knopf[aria-pressed="true"] .rf-zahl { background: #ffffff; color: var(--rf-aubergine); }
.rf-knopf[aria-pressed="true"]:hover .rf-name { text-decoration: none; }
.rf-weitere-titel { margin: var(--s4) 0 var(--s2); font-size: 0.8125rem; color: var(--rf-neben); }
.rf-schmal { display: none; }
.rf-auswahl {
  display: block; width: 100%; min-height: 48px; padding: var(--s2) var(--s3); margin: 0;
  background-color: var(--farbe-grund); color: var(--rf-aubergine); border: 1px solid var(--rf-rand); border-radius: 8px;
  font: inherit; font-size: 1rem; line-height: 1.3;
}
.rf-auswahl:focus-visible { outline: 3px solid var(--rf-aubergine); outline-offset: 3px; }
.rf-status { margin: var(--s4) 0 0; font-size: var(--gr-klein); color: var(--rf-neben); }
/* Karten rücken näher an Auswahl und Trefferzahl; ohne JavaScript (Auswahl verborgen) bleibt der übliche Abstand */
.rf:not([hidden]) + .abschnitt { padding-top: var(--s6); }
@media (max-width: 599px) {
  .rf-breit { display: none; }
  .rf-schmal { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .rf-knopf { transition: none; }
}