/* ==========================================================================
   Rückrufe (public/rueckrufe.php) – seitenspezifisch. Gemeinsames in praesentation.css (.pr-)
   Präfix .rr-  ·  Werkzeug-Seite: kompakt, gut durchsuchbar, Rot nur für echte Gefahr
   ========================================================================== */

.rr-rot { color: var(--rf-gefahr); }

/* ── Kopf ────────────────────────────────────────────────────────────────── */
.rr-kopf { position: relative; padding: clamp(32px, 5vw, 64px) 0 clamp(32px, 4vw, 48px); isolation: isolate; }
.rr-kopf::before {
  content: ""; position: absolute; inset: -84px 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 420px at 90% 10%, color-mix(in oklab, var(--rf-gefahr) 10%, transparent), transparent 70%),
    radial-gradient(700px 420px at 5% 0%, color-mix(in oklab, var(--rf-akzent-hell) 14%, transparent), transparent 70%);
}
.rr-kopf__raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.rr-kopf__raster > * { min-width: 0; }
.rr-kopf h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; margin: 20px 0 18px; }
.rr-kopf .pr-lead { margin-bottom: 20px; }
.rr-live { display: inline-flex; align-items: center; gap: 7px; background: var(--rf-gefahr-weich) !important; color: var(--rf-gefahr) !important; }
.rr-live__punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pr-puls 2s infinite; box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
.rr-mehr { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; color: var(--rf-akzent); text-decoration: none; }
.rr-mehr svg { width: 16px; height: 16px; transition: transform .25s var(--rf-kurve); }
.rr-mehr:hover { color: var(--rf-akzent-stark); }
.rr-mehr:hover svg { transform: translateX(4px); }

/* Persönlicher Status */
.rr-status { padding: 28px; border-radius: 28px; border: 1px solid var(--rf-rand); background: var(--rf-flaeche); box-shadow: var(--rf-schatten-md); }
.rr-status > i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; margin-bottom: 18px; }
.rr-status > i svg { width: 25px; height: 25px; }
.rr-status h2 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 8px; font-weight: 800; }
.rr-status p { margin: 0 0 20px; color: var(--rf-text-2); font-size: 15px; line-height: 1.55; }
.rr-status small { display: block; color: var(--rf-text-3); font-size: 12.5px; }
.rr-status .pr-knopf { min-height: 48px; font-size: 15px; padding: 0 20px; }
.rr-status--gast > i { background: var(--rf-akzent-weich); color: var(--rf-akzent); }
.rr-status--sicher { border-color: color-mix(in oklab, var(--rf-erfolg) 30%, var(--rf-rand)); background: color-mix(in oklab, var(--rf-erfolg) 6%, var(--rf-flaeche)); }
.rr-status--sicher > i { background: var(--rf-erfolg-weich); color: var(--rf-erfolg); }
.rr-status--sicher p { margin-bottom: 12px; }
.rr-status--alarm { background: #2a0d0d; border-color: #7f1d1d; color: #fde8e8; box-shadow: 0 30px 60px -30px rgba(185,28,28,.6); }
.rr-status--alarm > i { background: #ef4444; color: #fff; animation: rr-alarm 2.4s ease-in-out infinite; }
.rr-status--alarm h2 { color: #fff; }
.rr-status--alarm p { color: #f5c2c2; }
.rr-knopf-rot { background: #ef4444; color: #fff; }
.rr-knopf-rot:hover { background: #dc2626; color: #fff; }
.rr-knopf-rot svg { width: 18px; height: 18px; }
@keyframes rr-alarm { 50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); } }

.rr-fehler { display: flex; gap: 18px; align-items: flex-start; padding: 26px; margin-bottom: 40px; border-radius: 24px; background: var(--rf-warnung-weich); border: 1px solid color-mix(in oklab, var(--rf-warnung) 30%, transparent); }
.rr-fehler > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--rf-warnung); color: #fff; flex: none; }
.rr-fehler svg { width: 22px; height: 22px; }
.rr-fehler h2 { font-size: 19px; margin: 0 0 6px; }
.rr-fehler p { margin: 0; color: var(--rf-text-2); }

/* ── Abschnitte + Werkzeuge ──────────────────────────────────────────────── */
.rr-abschnitt { padding-bottom: clamp(40px, 6vw, 72px); }
.rr-abschnitt__titel { display: flex; align-items: center; gap: 12px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.025em; font-weight: 800; margin: 0 0 22px; }
.rr-abschnitt__titel svg { width: 26px; height: 26px; }
.rr-anzahl { font: 700 14px/1 var(--rf-schrift-text); color: var(--rf-text-2); background: var(--rf-flaeche-2); padding: 6px 10px; border-radius: 999px; letter-spacing: 0; }
.rr-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 16px; }
.rr-werkzeuge .rr-abschnitt__titel { margin: 0; }
.rr-suche { position: relative; flex: 0 1 380px; }
.rr-suche svg { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--rf-text-3); pointer-events: none; }
.rr-suche input { width: 100%; min-height: 48px; padding: 0 16px 0 46px; border-radius: 14px; border: 1px solid var(--rf-rand-stark); background: var(--rf-flaeche); color: var(--rf-text); font: 500 15px/1 var(--rf-schrift-text); transition: border-color .2s, box-shadow .2s; }
.rr-suche input:focus { outline: none; border-color: var(--rf-akzent); box-shadow: var(--rf-fokus); }
.rr-chips { display: flex; gap: 8px; margin-bottom: 26px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-mask: linear-gradient(90deg, #000 92%, transparent); mask: linear-gradient(90deg, #000 92%, transparent); }
.rr-chips::-webkit-scrollbar { display: none; }
.rr-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--rf-rand); background: var(--rf-flaeche); color: var(--rf-text-2); font: 600 14px/1 var(--rf-schrift-text); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.rr-chip em { font-style: normal; font-size: 12px; color: var(--rf-text-3); }
.rr-chip:hover { border-color: var(--rf-rand-stark); color: var(--rf-text); }
.rr-chip[aria-pressed="true"] { background: var(--rf-text); border-color: var(--rf-text); color: var(--rf-hg); }
.rr-chip[aria-pressed="true"] em { color: inherit; opacity: .65; }

/* ── Karten ──────────────────────────────────────────────────────────────── */
.rr-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.rr-karte { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: var(--rf-flaeche); border: 1px solid var(--rf-rand); overflow: hidden; transition: transform .3s var(--rf-kurve), box-shadow .3s var(--rf-kurve), border-color .3s; }
.rr-karte[hidden] { display: none; }
.rr-karte:hover { transform: translateY(-3px); box-shadow: var(--rf-schatten-lg); border-color: var(--rf-rand-stark); }
.rr-karte__bild { position: relative; height: 170px; background: #fff; display: grid; place-items: center; border-bottom: 1px solid var(--rf-rand); }
[data-theme="dark"] .rr-karte__bild { background: #f4f4f2; }
.rr-karte__bild { overflow: hidden; }
.rr-karte__bild img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 14px; max-width: none; }
.rr-karte__ersatz { position: absolute; inset: 0; display: grid; place-items: center; color: #c9cfcb; }
.rr-karte__ersatz svg { width: 40px; height: 40px; }
.rr-karte__inhalt { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 16px; }
.rr-karte__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 12.5px; color: var(--rf-text-3); }
.rr-kat { font-weight: 700; color: var(--rf-text-2); background: var(--rf-flaeche-2); padding: 4px 9px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-karte h3 { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 10px; font-weight: 750; overflow-wrap: anywhere; }
.rr-grund { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 9px 11px; border-radius: 12px; background: var(--rf-gefahr-weich); color: color-mix(in oklab, var(--rf-gefahr), var(--rf-text) 25%); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.rr-grund svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.rr-fakten { display: grid; gap: 6px; margin: 0 0 14px; font-size: 13.5px; }
.rr-fakten div { display: flex; gap: 10px; justify-content: space-between; }
.rr-fakten dt { display: inline-flex; align-items: center; gap: 7px; color: var(--rf-text-3); flex: none; }
.rr-fakten dt svg { width: 15px; height: 15px; }
.rr-fakten dd { margin: 0; color: var(--rf-text); font-weight: 550; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-karte__fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rf-rand); }
.rr-details { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; font-size: 14.5px; color: var(--rf-akzent); text-decoration: none; }
.rr-details:hover { color: var(--rf-akzent-stark); }
.rr-details svg { width: 15px; height: 15px; }
.rr-teilen { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--rf-rand); background: transparent; color: var(--rf-text-2); cursor: pointer; transition: background .2s, color .2s; }
.rr-teilen:hover { background: var(--rf-flaeche-2); color: var(--rf-text); }
.rr-teilen svg { width: 16px; height: 16px; }
.rr-teilen.ist-kopiert { background: var(--rf-erfolg-weich); color: var(--rf-erfolg); border-color: transparent; }

/* Treffer im eigenen Vorrat */
.rr-karte--treffer { border: 2px solid #ef4444; box-shadow: 0 20px 40px -24px rgba(239,68,68,.6); }
.rr-karte__treffer { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: #ef4444; color: #fff; font-size: 14px; }
.rr-karte__treffer svg { width: 18px; height: 18px; flex: none; }
.rr-karte--treffer .rr-details { color: var(--rf-gefahr); }

.rr-leer { text-align: center; padding: 48px 0; color: var(--rf-text-3); }
.rr-quelle { font-size: 13px; color: var(--rf-text-3); text-align: center; max-width: 70ch; margin: 0 auto; }

@media (max-width: 900px) {
  .rr-kopf__raster { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .rr-suche { flex-basis: 100%; }
  .rr-status { padding: 22px; }
  .rr-karte__bild { height: 150px; }
}