/* ==========================================================
   SEORCH – Ergebnis-Darstellung der Backend-Fragmente für
   Ranking Check, Suchvolumen und Keyword Tool (#result .res).
   Ergänzt pages.css (Legacy-Kompatibilität) und tools.css.
   Wird von tools-api.js / tools-volume.js / tools-ranking.js befüllt.
   ========================================================== */

#result .res { display: grid; gap: 20px; min-width: 0; }
#result .res > * { margin: 0; min-width: 0; }
#result .res h1 { margin: 8px 0 0; overflow-wrap: anywhere; }
#result .res h1:focus { outline: none; }

/* Lade- und Fehlerzustand */
#result > .loader { gap: 10px; text-align: center; }
.res-wait { font-size: 14px; color: var(--muted); font-weight: 500; }
.res-error { border-style: solid; border-color: color-mix(in srgb, var(--c1) 35%, transparent); background: color-mix(in srgb, var(--c1) 7%, var(--glass-2)); }
.res-error span:last-child { max-width: 46em; }

/* Teaser (Keyword Monitor) aus dem Backend – im Stil der Abschlussbox der Startseite (.final__card) */
.res-teaser {
  position: relative; overflow: hidden; display: grid; gap: 10px; padding: clamp(24px, 4vw, 44px); border-radius: 14px;
  background: var(--text); color: var(--bg);
}
.res-teaser::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, var(--c1), var(--gray), var(--c2), var(--c2), var(--c5), var(--c1)); filter: blur(80px); opacity: .45; animation: rot 14s linear infinite; pointer-events: none; }
.res-teaser > * { position: relative; }
.res-teaser strong { font-size: clamp(22px, 3vw, 32px); line-height: 1.1; letter-spacing: -.03em; }
.res-teaser p { margin: 0; color: color-mix(in srgb, var(--bg) 80%, transparent); font-size: 15px; max-width: 70ch; }
#result .res-teaser a:not(.cta) { color: var(--bg); text-decoration-color: var(--c1); }
.res-teaser .cta { justify-self: start; margin-top: 10px; height: auto; min-height: 46px; padding: 10px 20px; white-space: normal; text-align: center; }

/* Export- und Navigationsleiste (ul.subnav aus dem Backend) */
#result ul.res-actions { width: 100%; max-width: none; gap: 6px; }
#result ul.res-actions li[hidden] { display: none; }
#result ul.res-actions a { color: var(--text-2); text-decoration: none; overflow-wrap: normal; }
#result ul.res-actions a:hover { color: var(--text); }
#result ul.res-actions a:focus-visible { outline: 3px solid var(--c2); outline-offset: 2px; }
#result ul.res-actions .res-dl::before {
  content: ""; width: 16px; height: 16px; flex: none;
  background: currentColor; -webkit-mask: var(--dl-ico) center / contain no-repeat; mask: var(--dl-ico) center / contain no-repeat;
  --dl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
}
#result ul.res-actions li:first-child { margin-right: auto; }
#result ul.res-actions a[aria-busy="true"] { opacity: .65; cursor: progress; }
#result ul.res-actions a.is-error { color: var(--c1); }

/* Boxen / Abschnitte */
#result .grid_1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
#result .res .box > h3 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.01em; }
#result .res .box > .table-wrap { margin: 0; }
#result .res p.res-none { margin: 0; display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 500; }
#result .res p.res-none::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gray); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gray) 18%, transparent); }
#result .res p.aioverview { margin: 0 0 16px; color: var(--text-2); line-height: 1.6; overflow-wrap: anywhere; }
/* KI-Übersicht gegliedert (tools-ranking.js): Einleitung, Zwischenüberschriften, Begriffsliste, Hinweise */
#result .res .rk-ai { margin: 0 0 18px; padding: 18px 20px; border-radius: var(--r); background: color-mix(in srgb, var(--c3) 5%, var(--glass-2)); border: 1px solid color-mix(in srgb, var(--c3) 18%, var(--stroke)); font-size: 14.5px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
#result .res .rk-ai > * { margin: 0; }
#result .res .rk-ai > * + * { margin-top: 10px; }
#result .res .rk-ai__lead { font-size: 16px; line-height: 1.5; color: var(--text); font-weight: 500; }
#result .res .rk-ai__h { margin-top: 16px !important; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#result .res .rk-ai__list { list-style: none; padding: 0; display: grid; gap: 6px; }
#result .res .rk-ai__list li { position: relative; padding-left: 16px; }
#result .res .rk-ai__list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--c3); }
#result .res .rk-ai__list b { color: var(--text); font-weight: 650; }
#result .res .rk-ai__note { font-size: 13px; color: var(--muted); font-style: italic; }
/* Rank-Spalte nur so breit wie nötig */
#result .res .res-table .rk-col-rank { width: 1%; white-space: nowrap; text-align: right; }

/* Tabellen */
#result .res .table-wrap { background: var(--glass-2); }
/* Kopfzeile fixiert: Tabellenbereich höchstens bildschirmhoch und scrollt selbst (sonst greift sticky nicht,
   weil der Rahmen für die vielen Monatsspalten seitlich scrollt) */
#result .res .table-wrap:has(> .res-table) { max-height: calc(100dvh - 130px); overflow: auto; overscroll-behavior: contain; }
#result .res .res-table thead th { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--bg-2) 60%, var(--bg)); box-shadow: inset 0 -1px 0 var(--stroke); }
#result .res .table-wrap:focus-visible { outline: 3px solid var(--c2); outline-offset: 2px; }
#result .res .res-table { font-size: 13.5px; }
/* kompakt wie die Tabellen im SEO Check: einheitliche Spaltenköpfe, niedrige Zeilen */
#result .res .res-table th { padding: 8px 12px; white-space: nowrap; background: color-mix(in srgb, var(--bg-2) 60%, transparent); font: 700 10.5px var(--mono); letter-spacing: .06em; vertical-align: bottom; }
#result .res .res-table td { padding: 7px 12px; border-bottom: 1px solid var(--stroke); }
#result .res .res-table tr:last-child td { border-bottom: 0; }
#result .res .res-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--font); font-size: 13.5px; } /* Zahlen in der Textschrift wie die Rank-Spalte, gleich breite Ziffern */
#result .res .sv-table .sv-hide { display: none; } /* nur Ansicht – CSV/Excel/Drive enthalten die Spalten weiter */
#result .res .res-table th.num { text-align: right; }
#result .res .res-table td a { overflow-wrap: anywhere; }
#result .res .res-table tr.is-hit td { background: color-mix(in srgb, var(--c4) 12%, transparent); }
#result .res .res-table tr.is-hit td:first-child { box-shadow: inset 4px 0 0 var(--c4); font-weight: 700; }
#result .res .res-table td.is-peak { background: color-mix(in srgb, var(--c4) 14%, transparent); color: color-mix(in srgb, var(--c4) 70%, var(--text)); font-weight: 700; }

/* Suchvolumen-Tabellen: Keyword-Spalte bleibt beim horizontalen Scrollen stehen */
#result .res .sv-table th:first-child, #result .res .sv-table td:first-child {
  position: sticky; left: 0; z-index: 1; min-width: 120px; white-space: nowrap; /* Keywords einzeilig; Handy: Umbruch nur an Leerzeichen (unten) */
  background: color-mix(in srgb, #fff 94%, var(--bg)); box-shadow: inset -1px 0 0 var(--stroke); /* deckend, sonst scheinen gescrollte Zahlen durch */
}
#result .res .sv-table th:first-child { background: color-mix(in srgb, var(--bg-2) 60%, var(--bg)); z-index: 3; box-shadow: inset -1px 0 0 var(--stroke), inset 0 -1px 0 var(--stroke); } /* Ecke oben links über beiden */
#result .res .sv-table tbody tr:hover td:first-child { background: color-mix(in srgb, var(--c2) 5%, #fff); }
#result .res .sv-table td:first-child { font-weight: 600; font-family: var(--font); font-size: 13.5px; text-align: left; }
#result .res p.sv-found { color: var(--text-2); }
#result .res p.sv-legend { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.sv-legend__peak { width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--c4) 30%, transparent); border: 1px solid var(--c4); }

@media (max-width: 680px) {
  #result .res .box { padding: 16px; }
  #result ul.res-actions { width: 100%; }
  #result ul.res-actions li { flex: 1 1 auto; }
  #result ul.res-actions li:first-child { flex-basis: 100%; margin-right: 0; }
  #result ul.res-actions a { width: 100%; justify-content: center; }
  .res-teaser { padding: 16px; }
  .res-teaser .cta { justify-self: stretch; }
  #result .res .sv-table th:first-child, #result .res .sv-table td:first-child { min-width: 120px; max-width: 160px; white-space: normal; overflow-wrap: break-word; }
  #result .res .table-wrap:has(> .res-table) { max-height: calc(100dvh - 100px); }
}