/* ==========================================================
   SEORCH – Ranking Check (Ergebnis-Kopf) und
   Lokale Rankings (Ortsliste). Benötigt tools.css + tools-results.css
   ========================================================== */

/* ---------- Ergebnis-Kopf Ranking Check ---------- */
#result .res .rk-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* Treffer-Banner über die volle Breite: Platz-Feld, Klartext, Abzeichen */
.rk-rank { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 24px); padding: 16px 20px; border-radius: var(--r-lg); border: 1px solid var(--stroke); }
.rk-rank__pos { flex: none; display: grid; place-content: center; justify-items: center; width: clamp(76px, 9vw, 96px); aspect-ratio: 1; border-radius: 16px; color: #fff; }
.rk-rank__pos span { font: 700 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.rk-rank__pos b { font-size: clamp(34px, 4.4vw, 48px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.rk-rank__txt { min-width: 0; }
.rk-rank__t { margin: 0; font-size: clamp(18px, 2.2vw, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--text); }
.rk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.rk-chip { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: color-mix(in srgb, var(--c4) 14%, transparent); color: color-mix(in srgb, var(--c4) 70%, var(--text)); }
.rk-chip--ai { background: color-mix(in srgb, var(--c3) 12%, transparent); color: color-mix(in srgb, var(--c3) 80%, var(--text)); }
.rk-rank.is-hit { background: color-mix(in srgb, var(--c4) 8%, var(--glass-2)); border-color: color-mix(in srgb, var(--c4) 35%, transparent); }
.rk-rank.is-hit .rk-rank__pos { background: linear-gradient(145deg, color-mix(in srgb, var(--c4) 80%, #fff), var(--c4)); box-shadow: 0 10px 24px -12px var(--c4); }
.rk-rank.is-miss { background: color-mix(in srgb, var(--c1) 6%, var(--glass-2)); border-color: color-mix(in srgb, var(--c1) 30%, transparent); }
.rk-rank.is-miss .rk-rank__pos { background: color-mix(in srgb, var(--c1) 14%, var(--glass-2)); color: var(--c1); }
.rk-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rk-facts > div { min-width: 0; padding: 12px 14px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--stroke); }
.rk-facts dt { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rk-facts dd { margin: 4px 0 0; font-weight: 700; overflow-wrap: anywhere; }
#result .res b.rk-kw { font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--c1) 12%, transparent); border-radius: 3px; padding: 0 2px; }

/* ---------- Lokale Rankings: Ortsliste ---------- */
.tool-live .st { width: 22px; height: 22px; font-size: 12px; vertical-align: -5px; margin-right: 6px; }
.tool-live.is-loading::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px; border-radius: 50%; border: 2px solid var(--stroke-2); border-top-color: var(--c3); animation: rot .8s linear infinite; }
.tool-live.is-empty { border-style: solid; border-color: color-mix(in srgb, var(--c3) 45%, transparent); }
.tool-live.is-error { border-style: solid; border-color: color-mix(in srgb, var(--c1) 45%, transparent); background: color-mix(in srgb, var(--c1) 8%, var(--glass-2)); }
.tool-live.lr-out { text-align: left; padding: 16px; border-color: var(--stroke); background: var(--glass-2); }
.lr-head { margin: 0 0 12px; display: flex; align-items: flex-start; gap: 4px; font-weight: 500; }
.lr-head .st { margin-top: 1px; }
.lr-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; max-height: 460px; overflow-y: auto; overscroll-behavior: contain; }
.lr-list a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--stroke); background: var(--bg); text-decoration: none; color: var(--text); transition: border-color .2s, transform .3s var(--spring); }
.lr-list a:hover { border-color: var(--text); transform: translateY(-2px); }
.lr-list a:focus-visible { outline: 3px solid var(--c2); outline-offset: 2px; }
.lr-list a > svg:first-child { width: 18px; height: 18px; color: var(--c1); }
.lr-list span { display: grid; min-width: 0; flex: 1; }
.lr-list b { overflow-wrap: anywhere; }
.lr-list small { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.lr-list .lr-go { width: 16px; height: 16px; color: var(--muted); }
.lr-more { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

@media (max-width: 680px) {
  .lr-list { grid-template-columns: minmax(0, 1fr); max-height: 380px; }
}