/* ==========================================================================
   Rückruf-Statistik und Monatsarchiv (rueckrufe-statistik.php, rueckrufe-archiv.php) – Präfix .rs-
   Baut auf dem Artikel-Raster der Einzelmeldung auf (seiten/rueckruf.css, .rd-).
   ========================================================================== */

/* Kennzahlen */
.rs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 8px; }
.rs-kpis > div { padding: 16px 18px; border-radius: var(--rf-radius-lg); background: var(--rf-flaeche); border: 1px solid var(--rf-rand); }
.rs-kpis b { display: block; font-family: var(--rf-schrift-titel); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.rs-kpis span { display: block; margin-top: 4px; font-size: var(--rf-text-sm); color: var(--rf-text-2); line-height: 1.4; }
.rs-kpis small { color: var(--rf-text-3); }

/* Balken */
.rs-balken { display: block; height: 10px; border-radius: 999px; background: var(--rf-flaeche-2, color-mix(in oklab, var(--rf-text) 6%, transparent)); overflow: hidden; }
.rs-balken i { display: block; height: 100%; border-radius: inherit; background: var(--rf-akzent); }

.rs-balkenliste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; max-width: 72ch; }
.rs-balkenliste li { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.rs-balkenliste__name { font-weight: 600; overflow-wrap: anywhere; }
.rs-balkenliste__name a { color: var(--rf-text); }
.rs-balkenliste__name a:hover { color: var(--rf-akzent); }
.rs-balkenliste__zahl { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.rs-balkenliste__zahl small { margin-left: 4px; font-weight: 500; color: var(--rf-text-3); }
.rs-balkenliste--gefahr .rs-balken i { background: var(--rf-gefahr); }

/* Verlauf: Säulen je Monat */
.rs-verlauf { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 220px; }
.rs-verlauf a { height: 100%; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 6px; text-decoration: none; color: var(--rf-text-2); }
.rs-verlauf__zahl { font-size: var(--rf-text-sm); font-weight: 700; color: var(--rf-text); font-variant-numeric: tabular-nums; }
.rs-verlauf a > .rs-verlauf__saeule { align-self: end; width: 100%; max-width: 44px; border-radius: 8px 8px 3px 3px; background: var(--rf-akzent); transition: filter .15s; }
.rs-verlauf a > .rs-verlauf__saeule.ist-laufend { background: color-mix(in oklab, var(--rf-akzent) 45%, transparent); }
.rs-verlauf a:hover .rs-verlauf__saeule { filter: brightness(1.1); }
.rs-verlauf__monat { font-size: 12px; }
.rs-notiz { margin: 8px 0 0; font-size: var(--rf-text-sm); color: var(--rf-text-3); }

/* Monatsarchiv */
.rs-jahr { display: flex; align-items: baseline; gap: 12px; }
.rs-jahr span { font-family: var(--rf-schrift-text); font-size: var(--rf-text-sm); font-weight: 500; color: var(--rf-text-3); }
.rs-monate { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; max-width: 72ch; }
.rs-monate a { display: grid; grid-template-columns: 7em minmax(0, 1fr) 3em; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 12px; color: var(--rf-text); text-decoration: none; }
.rs-monate a:hover { background: var(--rf-flaeche); }
.rs-monate__name { font-weight: 600; }
.rs-monate__zahl { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.rs-blaettern { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 28px 0 0; flex-wrap: wrap; }
.rs-blaettern a { font-weight: 600; }

@media (max-width: 560px) {
  .rs-balkenliste li { grid-template-columns: minmax(0, 1fr) auto; }
  .rs-balkenliste li .rs-balken { grid-column: 1 / -1; grid-row: 2; }
  .rs-verlauf { gap: 3px; height: 180px; }
  .rs-verlauf__zahl { font-size: 11px; }
  .rs-verlauf__monat { font-size: 10px; }
}

/* Widget einbinden (rueckrufe-einbinden.php) */
.rs-einbinden { max-width: 1040px; }
.rs-konfig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; align-items: start; margin: 8px 0 12px; }
.rs-konfig__optionen { display: grid; gap: 14px; padding: 20px; border-radius: var(--rf-radius-lg); background: var(--rf-flaeche); border: 1px solid var(--rf-rand); }
.rs-konfig__optionen label { display: grid; gap: 6px; font-size: var(--rf-text-sm); font-weight: 600; color: var(--rf-text-2); }
.rs-konfig__optionen select, .rs-konfig__optionen textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rf-rand); background: var(--rf-hg); color: var(--rf-text); font: inherit; font-size: 15px; }
.rs-konfig__optionen textarea { font: 500 12.5px/1.5 ui-monospace, monospace; resize: vertical; }
.rs-konfig__optionen .pr-knopf { justify-self: start; }
.rs-konfig__vorschau { display: grid; gap: 8px; }
.rs-konfig__vorschau iframe { width: 100%; height: 552px; border: 0; border-radius: 14px; background: transparent; }
@media (max-width: 860px) { .rs-konfig { grid-template-columns: minmax(0, 1fr); } }

/* Rückruf-Alarm (rueckrufe-alarm.php) */
.rs-alarm { max-width: 760px; }
.rs-alarm__form { max-width: 560px; margin: 8px 0 12px; }
.rs-alarm__form input[type=email] { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--rf-rand); background: var(--rf-hg); color: var(--rf-text); font: inherit; font-size: 16px; }
.rs-alarm__takt { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.rs-alarm__takt legend { padding: 0; margin-bottom: 6px; font-size: var(--rf-text-sm); font-weight: 600; color: var(--rf-text-2); }
.rs-alarm__takt label, .rs-alarm__zustimmung { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 500 !important; color: var(--rf-text) !important; line-height: 1.45; }
.rs-alarm__takt input, .rs-alarm__zustimmung input { margin-top: 3px; accent-color: var(--rf-akzent); flex: none; }
.rs-alarm__falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rs-alarm__fehler { margin: 0; color: var(--rf-gefahr); font-weight: 600; }