/* ═══════════════════════════════════════════════════════════════════════
   TASK-159 — keyword-landing.css
   SSR keyword landing page (resalekeywords.php) additions ON TOP of the
   live search-assets/style.css?v=109, which the page links unchanged.
   Every rule below exists because style.css v109 has no equivalent; reuse
   of existing classes (.product-grid, .product-card, .chip, .card-*, token
   vars) is preferred everywhere. Design tokens: style.css :root (OKLCH).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. SSR card wrapper ──────────────────────────────────────────────
   Why: cards are real followed <a> links on the SSR page (SEO parity),
   while resalesuche2 navigates via JS on <article role="button">.
   Fix-cycle 1 D10: the grid item is now <div class="rsk-card-wrap">
   holding the anchor PLUS a sibling bookmark button (.card-actions is
   absolutely positioned against the wrap — style.css v109 already ships
   .card-actions/.card-action-btn; the button must NOT be a descendant of
   the anchor, so it cannot trigger card navigation). */
.rsk-card-wrap {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rsk-card-wrap .card-link-wrap {
  display: block;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}
.rsk-card-wrap .product-card {
  height: 100%;
  box-sizing: border-box;
}
.card-link-wrap:hover .product-card {
  /* mirror the .product-card:hover affordance for keyboard/anchor focus */
  box-shadow: var(--shadow-hover);
}
.card-link-wrap:focus-visible {
  outline: 2px solid var(--clr-blue);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
/* Bookmark button: keep the rs2 look on a real <button> sibling. */
.rsk-card-wrap .card-actions { position: absolute; }  /* ancestor = .rsk-card-wrap */

/* ── 2. Certified-badge popup on hover ────────────────────────────────
   Why: style.css only opens .certified-popup via the JS-toggled .open
   class (app.js onclick). The SSR page ships no JS, so expose the same
   popup on hover/focus instead. Visual result identical to .open. */
.card-link-wrap .certified-badge:hover .certified-popup,
.card-link-wrap .certified-badge:focus .certified-popup {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── 3. Teaser card (SEO intro text, plan D10) ────────────────────────
   Why: the keyword page opens with a server-rendered teaser paragraph
   block under the H1. No equivalent exists in style.css (resalesuche2
   renders no copy at all). Clamped to 4 lines on desktop so cards stay
   above the fold; HIDDEN on mobile per plan D10 (crawlers still read the
   full text in HTML — display:none content remains indexable). */
.teaser-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding) var(--space-5);
  margin-bottom: var(--space-5);
  color: var(--clr-text-2);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.teaser-card p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 900px) {
  /* plan D10: teaser is desktop-only; mobile goes straight to results */
  .teaser-card { display: none; }
}

/* ── 4. Related-keyword chips row ─────────────────────────────────────
   Why: internal-link block of neighbouring keyword landing pages. The
   chip LOOK is reused 1:1 from style.css .chip (L1211); these rules only
   (a) lay the chips out as a wrapping row and (b) undo anchor defaults,
   because v109 chips are <button>s, not links. */
.related-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-5) 0;
}
.related-keywords .related-keywords-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--clr-text-2);
  margin-right: var(--space-1);
}
.related-keywords a.chip {
  text-decoration: none;
  display: inline-block;
  line-height: 1.4;
}

/* ── 5. Hersteller block <details> expander ───────────────────────────
   Why: the manufacturer link list (legacy herstellerlist block) collapses
   behind a native, JS-free <details>. style.css has no <details> styling
   at all. Summary row echoes the sidebar filter-group title look. */
.mfr-details {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin: var(--space-5) 0;
}
.mfr-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  color: var(--clr-text);
}
.mfr-details summary::-webkit-details-marker { display: none; }
.mfr-details summary::after {
  /* pure-CSS chevron, rotates when open (no Lucide/JS needed) */
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--clr-muted);
  border-bottom: 2px solid var(--clr-muted);
  transform: rotate(45deg);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.mfr-details[open] summary::after { transform: rotate(-135deg); }
.mfr-details .mfr-list {
  /* fix-cycle 1 D4: rows use the same checkbox-row kit as the visible list */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 var(--space-5) var(--space-4);
  margin: 0;
  list-style: none;
}

/* ── 6. Approved L3 error hero + directory (reference/err-inline.css) ── */
.err-page{max-width:1200px;margin:0 auto;padding:24px 20px 48px}
.err-hero{background:var(--clr-primary-light);border:1px solid var(--clr-border);border-radius:var(--radius-lg);padding:32px 24px;text-align:center;margin-top:8px}
.err-eyebrow{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:var(--weight-semi);color:var(--clr-muted);margin:0 0 4px}
.err-eyebrow .code{color:var(--clr-red);font-weight:var(--weight-bold)}
.err-h1{font-size:2.074rem;font-weight:var(--weight-bold);color:var(--clr-text);margin:0;line-height:1.15;text-wrap:balance}
.err-h1 .kw-word{color:var(--clr-primary)}
.err-sub{margin:6px auto 0;max-width:760px}
.err-sub .l1{display:block;font-size:var(--text-lg);line-height:1.4;color:var(--clr-text)}
.err-sub .count{color:var(--clr-red);font-weight:var(--weight-bold);font-size:inherit}
.err-sub .l2{display:block;font-size:var(--text-sm);color:var(--clr-text-2);margin-top:2px}
.err-search{display:flex;gap:8px;max-width:640px;margin:20px auto 0}
.err-search input{flex:1;min-width:0;font:inherit;padding:12px 16px;border:1px solid var(--clr-border);border-radius:var(--radius-md);background:var(--clr-surface);color:var(--clr-text)}
.err-search input:focus{outline:2px solid var(--clr-primary);outline-offset:1px}
.err-search button{font:inherit;font-weight:var(--weight-semi);border:none;border-radius:var(--radius-md);padding:12px 22px;cursor:pointer;background:var(--clr-primary);color:#fff}
.err-search button:hover{background:var(--clr-primary-dark)}
.err-sec-h{font-size:var(--text-lg);font-weight:var(--weight-semi);color:var(--clr-text);margin:32px 0 0}
.err-sec-sub{font-size:var(--text-sm);color:var(--clr-muted);margin:2px 0 0}
.err-grid{margin-top:16px}
.err-grid .card-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.err-cta-card{border:1.5px dashed var(--clr-border);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;color:var(--clr-text-2);text-decoration:none;font-size:var(--text-sm)}
.err-cta-card:hover{border-color:var(--clr-primary);color:var(--clr-primary)}
.err-cta-card .big{font-size:var(--text-lg);font-weight:var(--weight-semi);color:var(--clr-text)}
.err-dir{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px;margin-top:24px}
.err-dir h3{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--clr-muted);margin:0 0 12px;font-weight:var(--weight-semi)}
.err-dir-cats{columns:2;column-gap:24px;font-size:var(--text-sm)}
.err-dir-cats a{display:flex;justify-content:space-between;gap:12px;padding:6px 4px;text-decoration:none;color:var(--clr-text-2);border-bottom:1px solid var(--clr-border);break-inside:avoid}
.err-dir-cats a:hover{color:var(--clr-primary)}
.err-dir-cats .n{color:var(--clr-muted);font-variant-numeric:tabular-nums}
.err-chips{display:flex;flex-wrap:wrap;gap:8px}
.err-chips .chip-link{font-size:var(--text-sm);border:1px solid var(--clr-border);background:var(--clr-surface);border-radius:var(--radius-full);padding:5px 14px;text-decoration:none;color:var(--clr-text-2)}
.err-chips .chip-link:hover{border-color:var(--clr-primary);color:var(--clr-primary)}
@media (max-width:900px){.err-dir{grid-template-columns:1fr}.err-dir-cats{columns:1}}
@media (max-width:760px){.err-h1{font-size:var(--text-xl)}}
/* err-page is nested inside the keyword results column, unlike its standalone
   reference page. Preserve the reference vertical rhythm without a second
   horizontal gutter. */
.rsk-page .rsk-fallback-error-page{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.rsk-page .err-dir aside{min-width:0}

/* ── 7. 'Mehr Ergebnisse' CTA ─────────────────────────────────────────
   Why: SSR pages paginate/deep-link instead of infinite scroll; the CTA
   is a real link. Sized like the primary .btn-contact (style.css L1807/
   1821) but block-centered and usable outside a card footer. */
.rsk-more-cta {
  display: inline-block;
  background: var(--clr-blue);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), transform var(--transition);
}
.rsk-more-cta:hover {
  background: var(--clr-blue-dark);
  transform: translateY(-1px);
}
.rsk-more-cta-row {
  text-align: center;
  margin: var(--space-6) 0 var(--space-10);
}

/* ═══════════════════════════════════════════════════════════════════════
   §8+ — TASK-159 Part 2 (render) additions. Each block documents why
   style.css v109 has no equivalent. Added 2026-07-09 with the page render.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 8. Category bar — fix-cycle 2 rs2-clone (report 14 §3.4) ─────────
   Everything visual comes from style.css v109 unchanged (.category-bar
   599 · .category-bar-wrap 604 · .category-bar-inner 614 · .cat-item 622
   · .cat-dropdown 662/682 · .cat-dropdown-backdrop 709 (z-89, tokens
   --z-backdrop/--z-catbar per codex#12) · .cat-dropdown-grid 722 ·
   .cat-dropdown-item 729 · .category-more-wrap 763 · .cat-more-btn 771 ·
   .cat-more-dropdown 788/809 · ≤900px hide 838 · body.resizing 1912).
   These rules only cover the SSR deltas: anchors instead of buttons, the
   .rsk-cat-wrap positioning parent, the JS open-state twin, the no-JS
   fallback and keyboard access. The old D3 <details> "Mehr Kategorien"
   blocks (.rsk-catbar-more[*] / .rsk-more-group[*]) are DELETED — replaced by
   the rs2-shaped #categoryMoreWrap. */
/* anchors must compute to the shell's bar colors (report 11 §1, keep) */
/* .rsk-catbar a.cat-item + :hover REMOVED 2026-08-11 - every declaration was already
   supplied by the shared base: a{text-decoration:none} style.css:130,
   .cat-item{color;white-space} style.css:622, .cat-item:hover{color:#fff} :642.
   NOTE: until the malformed comment above was repaired on the same day, the FIRST
   of these two rules never applied at all - a premature comment-close sequence in
   that comment made the parser discard forward through this block, so it was
   silently absorbing a parse error. Removing it WITHOUT repairing the comment
   moves the damage onto .rsk-cat-wrap (measured: display flex->block, position
   relative->static, height 42px->20.8px on all 7 viewports).
   .rsk-catbar is retained below solely to scope the .rsk-cat-zero rules. */
.rsk-cat-wrap { position: relative; height: 100%; flex: 0 0 auto; display: flex; }

/* JS-driven open state — the .rsk-cat-wrap twin of style.css:688 */
.rsk-cat-wrap.cat-item-open > .cat-dropdown {
  display: block; opacity: 1; transform: translateY(0); pointer-events: auto; }
/* (More open state = style.css:809 .category-more-wrap.cat-item-open, no twin needed) */

/* NO-JS FALLBACK: instant CSS hover-open, disabled once keyword-landing.js
   stamps .js on #categoryBar; "Mehr" always visible as the access path for
   the clipped items (overflow:hidden never breaks layout). */
#categoryBar:not(.js) .rsk-cat-wrap:hover > .cat-dropdown {
  display: block; opacity: 1; transform: translateY(0); pointer-events: auto; }
#categoryBar:not(.js) .category-more-wrap:hover .cat-more-dropdown {
  visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Keyboard access (better than rs2, invisible to mouse/touch). OWN rules —
   :has() in a selector list would invalidate the whole rule on old engines.
   :focus-visible (not :focus-within) so a mouse click can't flash the panel
   open during navigation. */
.rsk-cat-wrap:has(a:focus-visible) > .cat-dropdown {
  display: block; opacity: 1; transform: translateY(0); pointer-events: auto; }
.category-more-wrap:has(:focus-visible) .cat-more-dropdown {
  visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }

/* zero-count categories still render, greyed (D3, keep) */
.rsk-catbar .rsk-cat-zero a.cat-item { color: rgba(255, 255, 255, .45); }
.rsk-catbar .rsk-cat-zero a.cat-item:hover { color: rgba(255, 255, 255, .7); }

/* ── 9. Sidebar link-facets — fix-cycle 1 D4: resalesuche2 checkbox-row
   kit (report 11 §2). Each row is still ONE nofollow <a> (navigating =
   "checking"); an empty .checkmark box (style.css v109 L1059: 18×18px,
   2px var border, radius 4 — rendered unchecked, this page has no
   active-filter state) sits before the label; rows 14px var(--clr-text-2),
   single-line ellipsis, muted "(n)" counts right-aligned, 10px gap. */
.rsk-facet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rsk-facet-list li { margin: 0; }
.rsk-facet-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .875rem;
  color: var(--clr-text-2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  transition: color var(--transition);
}
.rsk-facet-list a:hover { color: var(--clr-text); }
.rsk-facet-list a:hover .checkmark { border-color: var(--clr-blue); }
.rsk-facet-list .rsk-facet-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rsk-facet-list .rsk-facet-count {
  margin-left: auto;
  font-size: .8rem;
  color: var(--clr-muted);
  font-weight: 400;
  flex-shrink: 0;
}
.rsk-mfr-heading { color: inherit; text-decoration: none; }
.rsk-mfr-heading:hover { color: var(--clr-blue); }
.rsk-detail-cta { display: block; text-align: center; }

/* ── 10. Breadcrumb (since fix-cycle 1: Verzeichnis variant only — the
   keyword pages use the mockup .kw-breadcrumb, §11) ───────────────────
   Why: legacy used Bootstrap .breadcrumb; v109 has no breadcrumb component. */
.rsk-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0;
  font-size: var(--text-xs);
  color: var(--clr-muted);
}
.rsk-breadcrumb li + li::before { content: '›'; margin-right: var(--space-1); color: var(--clr-muted); }
.rsk-breadcrumb a { color: var(--clr-blue); text-decoration: none; }
.rsk-breadcrumb a:hover { text-decoration: underline; }

/* ── 11. Heading block — fix-cycle 1: OWNER-ADOPTED a-klassik mockup
   (2026-07-10 override; mockups/a-klassik/index.html kw-* rules, ported
   verbatim except .kw-sub bumped to 15px per the owner). The old
   .rsk-page-head/.rsk-h1/.rsk-site-total rules stay ONLY for the
   Hersteller-Verzeichnis variant, which keeps its legacy heading pair. */
.kw-breadcrumb { font-size: var(--text-sm); color: var(--clr-muted); margin: 0 0 var(--space-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kw-breadcrumb a { color: var(--clr-muted); text-decoration: none; }
.kw-breadcrumb a:hover { color: var(--clr-primary); text-decoration: underline; }
/* Type hierarchy (owner 2026-07-10 eve): three distinct steps on the site's
   1.2 modular scale — H1 2.074rem (one step above --text-2xl) > line 1
   --text-lg > line 2 --text-sm muted. One accent (red count), one bold weight
   per line, consistent 1.2-ratio steps. */
.kw-h1 { font-size: 2.074rem; font-weight: var(--weight-bold); color: var(--clr-text); margin: 0; line-height: 1.15; text-wrap: balance; }
.kw-h1 .kw-word { color: var(--clr-primary); }
.kw-sub { margin: 6px 0 0; }
.kw-sub .kw-line1 { display: block; font-size: var(--text-lg); line-height: 1.4; color: var(--clr-text); }
.kw-sub .kw-count { color: var(--clr-red); font-weight: var(--weight-bold); }
.kw-sub .kw-line2 { display: block; font-size: var(--text-sm); line-height: 1.5; color: var(--clr-text-2); margin-top: 2px; }
/* Original-Marktplatz banner (2026-07-14, owner post@resale.de) — sits between
   the results-toolbar and the result cards. This is the compliant replacement
   for the retired "1. Gebrauchtmaschinen-Marktplatz seit 1996" leadership claim
   (unsubstantiated Spitzenstellungsbehauptung, §5/§5a UWG). Do NOT reintroduce
   that wording anywhere. */
.rsk-original-banner { display: flex; align-items: center; gap: 8px; margin: var(--space-3) 0; padding: 9px 14px; border: 1px solid var(--clr-border); border-left: 3px solid var(--clr-primary); border-radius: var(--radius-md); background: var(--clr-surface); }
.rsk-original-banner .rsk-original-text { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--clr-text); letter-spacing: .01em; }
/* Flag fallback for non-ISO junk codes (rsk_flag_class): neutral globe, never a blank gap */
.rsk-page .fi-unknown { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
/* Header Merkliste badge (rs2 parity): .bookmark-badge/.pop come from style.css */
#rskMerkliste { position: relative; }
.results-header.kw-static { position: static; }
/* Verzeichnis-variant heading (unchanged legacy pair) */
.rsk-page-head { text-align: center; margin: var(--space-2) 0 var(--space-4); }
.rsk-h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-1); font-weight: var(--weight-semi); }
.rsk-site-total { font-size: var(--text-base); color: var(--clr-muted); font-weight: 400; margin: 0; }
.rsk-count-red { color: var(--clr-red); font-weight: var(--weight-semi); }

/* ── 12. Results toolbar — fix-cycle 2 (report 15 W2b): the fix-cycle-1
   deviation media queries are DELETED; the page now clones rs2's chip
   relocation (style.css L1299-1302 hides the toolbar chips ≤1440px and
   L2696-2712 shows the sidebar duplicate instead; ≤900px the sidebar goes
   off-canvas behind #mobileFilterBtn). Chips are links on this page,
   buttons on rs2 — undo anchor defaults in both locations. */
.rsk-toolbar .attr-chip,
.sidebar-attr-chips .attr-chip { text-decoration: none; }
/* D8: compact outline Gesuch button, right-aligned after .results-controls */
.rsk-gesuch-compact {
  display: inline-block;
  border: 1px solid #3D8500;         /* legacy CTA green, L2138 */
  color: #3D8500;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.rsk-gesuch-compact:hover { background: #3D8500; color: #fff; }

/* ── 13. Gesuch-senden bottom row (legacy L3416-3421; results pages only —
   L3 uses the err-grid's err-cta-card). The legacy TOP row was removed (D8). */
.rsk-gesuch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-5) 0;
  font-size: var(--text-sm);
  color: var(--clr-text-2);
  text-align: center;
}
.rsk-gesuch-btn {
  display: inline-block;
  background: #3D8500;             /* legacy button color, L2138 */
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.rsk-gesuch-btn:hover { filter: brightness(1.08); }

/* ── 14. (removed, fix-cycle 1 D9) TOP-Länder block dropped by owner
   decision; its .rsk-laender* rules were deleted as dead CSS. ────────── */

/* ── 15. Full-text article (#Kategorietext payload) ───────────────────
   Why: keywordsDEtexte full_text ships its own Bootstrap-era markup
   (<article class="container">, <table class="table">) — neutralize it so
   the copy reads cleanly inside the v109 shell. */
.rsk-fulltext { margin: var(--space-6) 0; font-size: var(--text-sm); line-height: 1.65; color: var(--clr-text-2); }
.rsk-fulltext table { width: 100%; border-collapse: collapse; }
.rsk-fulltext td { padding: 0; }
.rsk-fulltext h2 { font-size: var(--text-lg); color: var(--clr-text); margin: var(--space-4) 0 var(--space-2); }
.rsk-fulltext ul { padding-left: 1.2em; }

/* ── 16. Single-column layout (zero state L3 + Verzeichnis variant) ───
   Why: those legacy pages have no sidebar; .page-main is a 2-col grid. */
.page-main.rsk-single { grid-template-columns: 1fr; }

/* ── 17. Hersteller-Verzeichnis variant blocks (legacy L1503-1656) ────
   Why: legacy Bootstrap headings/buttons; only layout + tokens here. */
.rsk-verz-cross { text-align: center; margin: var(--space-5) 0; }
.rsk-verz-find { font-size: var(--text-lg); font-weight: 400; color: var(--clr-muted); margin: 0 0 var(--space-2); }
.rsk-verz-link { font-size: var(--text-lg); margin: 0; }
.rsk-verz-link a { color: var(--clr-blue); text-decoration: none; }
.rsk-verz-link a:hover { text-decoration: underline; }
.rsk-verz-heading { font-size: var(--text-base); font-weight: var(--weight-semi); margin: var(--space-4) 0 var(--space-2); text-align: center; }
.rsk-verz-catlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2px var(--space-4);
  font-size: var(--text-sm);
}
.rsk-verz-catlist a { display: block; padding: 3px 2px; color: var(--clr-blue); text-decoration: none; white-space: normal; overflow: visible; }
.rsk-verz-catlist a:hover { text-decoration: underline; }
.rsk-abc-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); }
.rsk-abc-row a.chip { text-decoration: none; min-width: 34px; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════
   §18+ — TASK-159 fix-cycle 2 additions (2026-07-10). New rules are scoped
   under the .rsk-page body class (codex#11) except where the selector must
   match a :not(.js)/#id state that lives outside body scope. No new z-index
   values — catbar layers reuse style.css tokens (backdrop 89 / bar 90 /
   dropdown per .cat-dropdown), the modal ships its own in style.css
   (codex#12).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 18. W1 list view on SSR wrappers ─────────────────────────────────
   style.css L1488 hides .card-actions-grid in list view expecting an
   in-body .card-actions-list twin the SSR card doesn't render — keep the
   sibling bookmark visible instead, pinned to the row's top-right. */
.rsk-page .product-grid.list-view .rsk-card-wrap > .card-actions.card-actions-grid {
  display: flex !important;      /* out-specifies style.css L1488 */
  top: 10px;
  right: 10px;
}

/* ── 19. W3 inquiry button — REAL sibling button positioned over the
   card's footer-CTA slot (never inside the anchor; bookmark precedent).
   Visuals come from style.css .btn-contact/.btn-request-price L1807-1826. */
.rsk-page .rsk-card-wrap .rsk-inquiry-btn {
  position: absolute;
  right: var(--space-4, 14px);
  bottom: var(--space-4, 14px);
  z-index: 2;                     /* above the anchor, below dropdown layers */
}
.rsk-page .rsk-card-wrap .footer-cta { min-height: 34px; }  /* reserved slot,
                                       matches .btn-contact min-height L1819 */
.rsk-page .product-grid.list-view .rsk-card-wrap .rsk-inquiry-btn { right: 16px; bottom: 12px; }

/* ── 20. Glitch fixes (report 16) ─────────────────────────────────────
   G-7: the teaser 'mehr dazu' anchor must look like a link (style.css L130
   resets a{color:inherit}); G-8: anchor jumps land under the 64px sticky
   header without scroll-margin. */
.rsk-page .teaser-card .show-more-text { color: var(--clr-blue); }
.rsk-page .teaser-card .show-more-text:hover { text-decoration: underline; }
.rsk-page #Kategorietext,
.rsk-page .rsk-fulltext [id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ── 21. codex#20: the shared footer's placeholder link rows (M1…M28
   'Meistgesuchte Maschinen' + the manufacturers A-Z twin — same
   .footer-keywords block class, both placeholder anchor text today) are
   hidden PAGE-LOCALLY until TASK-166 populates them. footer.php itself is
   untouched; rs2/resale.info keep rendering them. */
.rsk-page .site-footer .footer-keywords { display: none; }

/* ── 21b. W2(d) width probe results (2026-07-10, Playwright vs local
   style.css): chips(655px) + gap(8) + controls(414) exceeded the toolbar
   box (1064px) by a CONSTANT 13px at every viewport >1440 — the box is
   capped by the 1440 layout, so the spec's optional chip-hide-breakpoint
   extension cannot help; instead the page-added Gesuch button + the
   controls gap are trimmed by ~16px. At 390px the controls row
   (Gesuch+select, 336px) exceeded its 310px box — the wrap fallback
   catches that (and any residual font-metric drift): when everything
   fits, a wrapping flex row renders EXACTLY like the nowrap one. */
.rsk-page .rsk-toolbar { flex-wrap: wrap; row-gap: 6px; }
.rsk-page .rsk-toolbar .results-controls { gap: 6px; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; flex-shrink: 1; min-width: 0; max-width: 100%; }
.rsk-page .rsk-gesuch-compact { padding: 6px 8px; }

/* ── 22. Degradation contract (consolidation D): JS-only controls stay
   hidden until keyword-landing.js stamps .rsk-js on <body>. Without JS the
   page keeps: SSR links, catbar fallback (§8), sort select (inline
   handler), forms. Hidden: view toggle, bookmark buttons, inquiry buttons,
   header hamburger + filter toggle (their drawers need JS). */
.rsk-page:not(.rsk-js) .view-toggle,
.rsk-page:not(.rsk-js) .rsk-card-wrap .card-actions,
.rsk-page:not(.rsk-js) .rsk-inquiry-btn,
.rsk-page:not(.rsk-js) .hamburger-btn,
.rsk-page:not(.rsk-js) .mobile-filter-toggle { display: none !important; }

/* ── 23. F-03 long keyword wrapping (audit 2026-07-16) ────────────────
   German hyphenation preserves normal short headings; break-word is the
   conservative fallback for unhyphenatable hostile/compound tokens. The
   min-width reset lets the flex breadcrumb and H1 block actually shrink on
   390px-class viewports without changing any type scale. */
.rsk-page .results-header,
.rsk-page .results-header .results-meta { min-width: 0; }
.rsk-page .kw-h1,
.rsk-page .kw-line1,
.rsk-page .kw-breadcrumb [aria-current="page"],
.rsk-page .err-h1,
.rsk-page .err-h1 .kw-word,
.rsk-page .rsk-zero-section-head p {
  hyphens: auto;
  overflow-wrap: break-word;
}
.rsk-page .kw-breadcrumb [aria-current="page"] { min-width: 0; }

/* ── 24. TASK-213 L3 recovery content (audit 2026-07-16) ──────────────
   The card grid reuses the shell's product-grid/card styles. Non-auction
   card inquiry buttons are hidden only in this L3 strip: L3 deliberately has
   no inquiry modal, while bookmarks and the followed card links still work. */
.rsk-zero-similar { margin: var(--space-8) 0; }
.rsk-zero-section-head { margin-bottom: var(--space-4); }
.rsk-zero-section-head h2,
.rsk-zero-categories h2 {
  margin: 0;
  color: var(--clr-text);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}
.rsk-zero-section-head p {
  margin: var(--space-1) 0 0;
  color: var(--clr-text-2);
  font-size: var(--text-sm);
}
.rsk-zero-similar .product-grid { margin-top: var(--space-4); }
.rsk-zero-similar .rsk-inquiry-btn { display: none !important; }

/* ── 25. Inquiry modal vs consent banner stacking — SUPERSEDED 2026-08-11 ──
   The page-scoped override that lived here (.inquiry-overlay { z-index: 100000 })
   has been REMOVED. The fix now lives in the shared search-assets/style.css:3206
   (.inquiry-overlay: 100001) with .gallery-lightbox: 100000 in lightbox.css, so it
   applies to every page on both domains instead of this one.

   Do NOT re-add a page override here. This file loads AFTER style.css, so a local
   value silently LOWERS the shared one — which is exactly what happened on
   2026-08-11, when keyword pages ran at 100000 while every other page ran at 100001.

   The original 2026-07-24 rationale (elementFromPoint returns the banner <p>, so
   first-visit mobile taps on the modal's submit button were swallowed) is preserved
   in the comment at search-assets/style.css:3206 and in git history. */

/* ── 26. W2 hybrid fallback compositions (staged, no rollout admission) ─
   These classes style only the server-rendered A/C module. They extend the
   current v5 sheet and deliberately do not alter Inter, shell, or CWV rules. */
.rsk-page .rsk-relaxed-preview,
.rsk-page .rsk-relaxed-strip,
.rsk-page .rsk-zero-directory-first {
  margin: var(--space-8) 0;
  padding: var(--space-5);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.rsk-page .rsk-relaxed-preview-head { max-width: 78rem; }
.rsk-page .rsk-relaxed-kicker {
  margin: 0 0 var(--space-1);
  color: var(--clr-text-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.rsk-page .rsk-relaxed-copy {
  max-width: 58rem;
  margin: var(--space-2) 0 0;
  color: var(--clr-text-2);
  line-height: 1.55;
}
.rsk-page .rsk-relaxed-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.rsk-page .rsk-relaxed-term {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: .3rem .7rem;
  color: var(--clr-text-2);
  background: var(--clr-surface-2, #f8fafc);
  border: 1px solid var(--clr-border);
  border-radius: 999px;
  font-size: var(--text-sm);
}
.rsk-page .rsk-relaxed-original { color: var(--clr-muted); }
.rsk-page .rsk-relaxed-target {
  color: var(--clr-blue);
  background: #eef6ff;
  border-color: #b8d5f1;
  font-weight: var(--weight-bold);
}
.rsk-page .rsk-relaxed-arrow { color: var(--clr-text-2); font-size: 1.15rem; }
.rsk-page .rsk-relaxed-removed { margin: var(--space-2) 0 0; color: var(--clr-text-2); }
.rsk-page .rsk-card-grid { margin-top: var(--space-5); }
.rsk-page .rsk-card-strip {
  display: grid;
  grid-auto-columns: minmax(230px, 300px);
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: var(--space-4);
  max-width: 100%;
  margin-top: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 0 var(--space-2);
  scroll-snap-type: x proximity;
}
.rsk-page .rsk-card-strip .rsk-card-wrap { min-width: 0; scroll-snap-align: start; }
.rsk-page .rsk-relaxed-strip h3 { margin: 0; color: var(--clr-text); font-size: var(--text-xl); }
.rsk-page .rsk-relaxed-seealso { margin: var(--space-4) 0 0; }
.rsk-page .rsk-relaxed-seealso a {
  color: var(--clr-blue);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.rsk-page .rsk-relaxed-seealso a:hover,
.rsk-page .rsk-relaxed-seealso a:focus-visible { text-decoration: underline; }
.rsk-page .rsk-why-btn {
  min-height: 2.75rem;
  margin-top: var(--space-3);
  padding: .45rem .8rem;
  color: var(--clr-blue);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-weight: var(--weight-semi);
}
.rsk-page .rsk-why-btn:hover,
.rsk-page .rsk-why-btn:focus-visible { background: #eef6ff; }
.rsk-page #rskWhy {
  max-width: 58rem;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--clr-text-2);
  background: var(--clr-surface-2, #f8fafc);
  border-left: 3px solid var(--clr-blue);
}
.rsk-page #rskWhy ul { margin: 0; padding-left: 1.25rem; }
.rsk-page #rskWhy li + li { margin-top: var(--space-1); }
.rsk-page .rsk-zero-directory-first { border-left: 4px solid var(--clr-blue); }
.rsk-page .rsk-zero-directory-first h2 a { color: var(--clr-blue); text-decoration: none; }
.rsk-page .rsk-zero-directory-first h2 a:hover,
.rsk-page .rsk-zero-directory-first h2 a:focus-visible { text-decoration: underline; }
@media (max-width: 900px) {
  .rsk-page .rsk-relaxed-preview,
  .rsk-page .rsk-relaxed-strip,
  .rsk-page .rsk-zero-directory-first { padding: var(--space-4); }
  .rsk-page .rsk-card-strip { grid-auto-columns: minmax(220px, 78vw); }
}
@media (max-width: 480px) {
  .rsk-page .rsk-relaxed-term { min-height: 2.75rem; }
  .rsk-page .rsk-why-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
 * W2 DEPLOY-ORDER COMPAT BLOCK — added 2026-08-04 (gate table §3a, G-8)
 *
 * These rules are DEAD once includes/keyword-render.php is deployed: the
 * new renderer emits none of these classes (it replaced the zero banner and
 * the category tiles with the err-hero / zero-directory design, and dropped
 * rsk_render_zero_category_tiles()).
 *
 * They are retained ONLY so this stylesheet is a strict superset of the
 * live one, which removes the steps 4-5 ordering window: the CSS can then
 * land at any point without leaving zero-state pages unstyled while the
 * old renderer is still serving. Verbatim from the live file
 * (md5 1e6e33fcf2c55785c2f015c40f98bd37).
 *
 * SAFE TO DELETE once W2 is signed off and no rollback to the old
 * renderer is contemplated. ~1 KB.
 * ═══════════════════════════════════════════════════════════════════ */
.rsk-zero-banner {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-5);
  margin: var(--space-6) auto;
  max-width: 720px;
  text-align: center;
}
.rsk-zero-banner .rsk-zero-title {
  color: var(--clr-red);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  margin: 0;
}
.rsk-zero-banner .rsk-zero-title .rsk-zero-keyword {
  color: var(--clr-muted);
}
.rsk-zero-banner .rsk-zero-sub {
  color: var(--clr-text-2);
  font-size: var(--text-sm);
  margin: var(--space-3) 0 0;
}
.rsk-zero-categories { display: block; margin: var(--space-8) 0;
}
.rsk-zero-categories h2 { margin-bottom: var(--space-4);
}
.rsk-zero-category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.rsk-zero-category-tile {
  align-items: center;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--clr-text);
  display: flex;
  flex: 1 1 220px;
  gap: var(--space-2);
  justify-content: space-between;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition), color var(--transition);
}
.rsk-zero-category-tile:hover {
  border-color: var(--clr-blue);
  box-shadow: var(--shadow-card);
  color: var(--clr-blue);
}
.rsk-zero-category-label { min-width: 0; overflow-wrap: break-word;
}
.rsk-zero-category-count {
  color: var(--clr-muted);
  flex-shrink: 0;
  font-size: var(--text-sm);
}