/* base.css is loaded first; rules below intentionally override it
     for the rich nav and search-list-only spacing tokens.
     TODO(cms): split shared rich-nav/footer styling into nav-rich.css. */
  :root {
    --container-max: 1280px;
    /* --gutter owned by base.css (40 / 24 / 18) */
    --section-y: 72px;
    --block-gap: 40px;
    --stack-lg: 32px;
    --stack-md: 20px;
    --stack-sm: 12px;
    --radius-lg: 24px;
    --radius-md: 20px;
    --radius-sm: 12px;

    --ink: #000000;
    --brand: #F49B06;
    --accent: #F49B06;
    --muted: #5a6876;
    --muted-2: #6b7885;
    --line: #eaedf0;
    --line-2: #eef1f4;
    --surface: #f4f5f7;
    --surface-2: #f7f8fa;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    font-family: 'Manrope', system-ui, sans-serif;
    color: var(--ink);
    background: #ffffff;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; }

  .container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* Top chrome (utility strip, top nav, contact block, icon buttons, hamburger)
     is shared via base.css and intentionally NOT duplicated here. */

  /* ===== PAGE HEADER (compact listing header, not a cinematic hero) ===== */
  .listing-head {
    position: relative;
    background: #0b1722;
    color: #fff;
    overflow: hidden;
  }
  .listing-head .photo {
    position: absolute; inset: 0;
    background-image: url('/assets/hero.jpg');
    background-size: cover;
    background-position: center 40%;
    opacity: 0.55;
  }
  .listing-head .scrim {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(11,23,34,0.55) 0%, rgba(11,23,34,0.4) 55%, rgba(11,23,34,0.85) 100%),
      linear-gradient(90deg, rgba(11,23,34,0.55) 0%, rgba(11,23,34,0) 70%);
  }
  .listing-head .inner {
    position: relative; z-index: 2;
    padding-block: 64px 88px;
  }
  .crumbs {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 24px;
  }
  .crumbs a { color: rgba(255,255,255,0.85); }
  .crumbs a:hover { color: var(--brand); }
  .crumbs .sep { opacity: 0.45; }
  .crumbs .here { color: #fff; font-weight: 600; }
  .listing-head .eyebrow {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: 'Caveat', cursive; font-size: 24px;
    color: #ffe8c2; margin-bottom: 14px;
  }
  .listing-head .eyebrow::before {
    content: ""; width: 44px; height: 2px; background: #ffe8c2; border-radius: 2px;
  }
  .listing-head h1 {
    font-size: clamp(40px, 5.2vw, 64px);
    line-height: 0.98; letter-spacing: -0.02em;
    font-weight: 800; color: #fff; text-wrap: balance;
    max-width: 820px;
  }
  .listing-head h1 em {
    font-style: normal; font-family: 'Caveat', cursive;
    font-weight: 600; font-size: 0.75em; color: var(--brand);
    transform: translateY(0.05em) rotate(-1.5deg); display: inline-block;
  }
  .listing-head .lede {
    margin-top: 22px;
    max-width: 620px;
    font-size: 15px; line-height: 1.65;
    color: rgba(255,255,255,0.88);
    padding-left: 18px; border-left: 2px solid rgba(244,155,6,0.9);
  }

  .quick-stats {
    display: flex; gap: 40px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.18);
    max-width: 720px;
  }
  .quick-stats .qs {
    display: flex; flex-direction: column;
  }
  .quick-stats .n {
    font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
    color: #fff; line-height: 1;
  }
  .quick-stats .l {
    font-size: 12px; color: rgba(255,255,255,0.7);
    margin-top: 6px; letter-spacing: 0.04em; text-transform: uppercase;
  }
  .quick-stats .qs-default .n { color: rgba(255,255,255,0.78); font-weight: 700; }
  .quick-stats .qs-default .l { color: rgba(255,225,170,0.95); font-style: italic; text-transform: none; letter-spacing: 0; }

  /* ===== Category chip rail ===== */
  .cat-rail {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0; z-index: 10;
  }
  .cat-rail-inner {
    max-width: var(--container-max); margin: 0 auto;
    padding: 14px var(--gutter);
    display: flex; align-items: center; gap: 10px;
    overflow-x: auto;
  }
  .cat-rail-inner::-webkit-scrollbar { display: none; }
  .cat-chip {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 13.5px; font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  .cat-chip:hover { background: #f5f7f9; border-color: #d8dde3; }
  .cat-chip .count {
    color: var(--muted-2);
    font-weight: 500;
    font-size: 12.5px;
  }
  .cat-chip.active {
    background: var(--ink); color: #fff; border-color: var(--ink);
  }
  .cat-chip.active .count { color: rgba(255,255,255,0.65); }

  /* ===== Main layout: filter rail + listing ===== */
  .listing {
    padding: 44px 0 80px;
    background: #ffffff;
  }
  .listing-grid {
    display: grid;
    grid-template-columns: 268px 1fr;
    gap: 40px;
    align-items: start;
  }

  /* Filter rail */
  .filter-rail {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 6px 0;
  }
  .filter-block {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line-2);
  }
  .filter-block:last-child { border-bottom: none; }
  .filter-block h4 {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted-2);
    margin-bottom: 14px;
  }
  /* Locked filter: slider muted and non-interactive until live prices arrive. */
  .filter-block--locked .rs { opacity: 0.45; pointer-events: none; }
  .filter-block--locked .rs-input { cursor: not-allowed; }
  /* Deferred Merkmale: whole block greyed with a spinner until the async
     /api/offer-attributes fetch populates and unlocks it. */
  .filter-block--locked[data-attr-block] { opacity: 0.55; pointer-events: none; }
  .filter-attr-loading { display: flex; justify-content: center; padding: 14px 0; }
  .filter-attr-loading .search-loader__spinner { width: 18px; height: 18px; margin: 0; color: var(--brand); }
  .filter-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0;
    font-size: 13.5px; color: var(--ink);
    cursor: pointer;
  }
  .filter-row:hover .name { color: var(--brand); }
  .filter-row .cb {
    display: inline-flex; align-items: center; gap: 10px;
  }
  .filter-row input[type="checkbox"] {
    appearance: none;
    width: 16px; height: 16px;
    border: 1.5px solid #c4ccd4;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background .15s ease, border-color .15s ease;
  }
  .filter-row input[type="checkbox"]:checked {
    background: var(--brand);
    border-color: var(--brand);
  }
  .filter-row input[type="checkbox"]:checked::after {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 11px; background-repeat: no-repeat; background-position: center;
  }
  .filter-row .cnt {
    color: var(--muted-2); font-size: 12.5px; font-variant-numeric: tabular-nums;
  }
  /* Dual-handle range slider component (.rs).
     Two native <input type="range"> overlaid on a custom track, with pointer
     events restricted to the thumbs so both handles stay independently
     grabbable. Drives a fill via --rs-min-pct / --rs-max-pct. */
  .rs {
    display: flex; flex-direction: column; gap: 12px;
    padding: 2px 0 4px;
    --rs-thumb: 16px;
    --rs-track: 3px;
    --rs-min-pct: 0;
    --rs-max-pct: 1;
  }
  .rs-labels {
    display: flex; justify-content: space-between;
    font-size: 12.5px; color: var(--muted-2);
    font-variant-numeric: tabular-nums;
  }
  .rs-labels strong { color: var(--ink); font-weight: 700; }

  .rs-control {
    position: relative;
    height: var(--rs-thumb);
    margin: 0 calc(var(--rs-thumb) / 2);
  }
  .rs-track {
    position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    height: var(--rs-track);
    background: var(--line);
    border-radius: 999px;
    pointer-events: none;
  }
  .rs-fill {
    position: absolute; top: 0; bottom: 0;
    left:  calc(var(--rs-min-pct) * 100%);
    right: calc((1 - var(--rs-max-pct)) * 100%);
    background: var(--brand);
    border-radius: 999px;
  }

  .rs-input {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    left: calc(var(--rs-thumb) / -2);
    right: calc(var(--rs-thumb) / -2);
    width: calc(100% + var(--rs-thumb));
    height: var(--rs-thumb);
    -webkit-appearance: none; appearance: none;
    background: transparent;
    pointer-events: none;
    margin: 0; padding: 0;
    outline: none;
  }
  .rs-input::-webkit-slider-runnable-track { background: transparent; height: var(--rs-thumb); border: none; }
  .rs-input::-moz-range-track             { background: transparent; height: var(--rs-thumb); border: none; }

  .rs-input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: var(--rs-thumb); height: var(--rs-thumb);
    border-radius: 50%;
    background: var(--brand);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--brand), 0 1px 3px rgba(0,0,0,.18);
    cursor: grab;
    pointer-events: auto;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .rs-input::-moz-range-thumb {
    width: var(--rs-thumb); height: var(--rs-thumb);
    border-radius: 50%;
    background: var(--brand);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--brand), 0 1px 3px rgba(0,0,0,.18);
    cursor: grab;
    pointer-events: auto;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .rs-input:hover::-webkit-slider-thumb,
  .rs-input:focus-visible::-webkit-slider-thumb { transform: scale(1.08); }
  .rs-input:hover::-moz-range-thumb,
  .rs-input:focus-visible::-moz-range-thumb     { transform: scale(1.08); }
  .rs-input:active::-webkit-slider-thumb { cursor: grabbing; }
  .rs-input:active::-moz-range-thumb     { cursor: grabbing; }
  .rs-input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px rgba(244,155,6,.28);
  }
  .rs-input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px rgba(244,155,6,.28);
  }
  .filter-clear {
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background .15s ease;
  }
  .filter-clear:hover { background: #f5f7f9; }
  .filter-clear--inline { width: auto; display: inline-flex; align-items: center; gap: 6px; }

  /* Listing main */
  .listing-main { min-width: 0; }
  .listing-main--full { grid-column: 1 / -1; }
  .liked-empty {
    max-width: 560px;
    margin: 16px auto 0;
    padding: 56px 40px;
    text-align: center;
  }
  .liked-empty__icon {
    width: 56px; height: 56px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #fff;
    display: grid; place-items: center;
    color: var(--brand);
  }
  .liked-empty__icon svg { width: 24px; height: 24px; }
  .liked-empty h3 { font-size: 24px; line-height: 1.2; }
  .liked-empty p {
    max-width: 420px;
    margin: 10px auto 0;
    font-size: 14.5px; line-height: 1.5;
  }
  .liked-empty__cta { margin-top: 28px; }
  .liked-cta-btn {
    display: inline-block;
    padding: 13px 26px;
    background: var(--brand); color: #fff;
    border-radius: 999px;
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform .15s ease, background .15s ease;
  }
  .liked-cta-btn:hover { transform: translateY(-1px); background: #d98605; }
  /* ===== Listing toolbar ================================================
     Three things of three different weights, and the old row gave them all
     the same one: the result count in body text, then "Sortieren:" as a loose
     grey word beside a pill, then FAQ and "Neue Suche" reusing the filter
     rail's reset-button class — three near-identical outlines stacked above
     three more filter pills. Now: the count carries the number, the sort is a
     single self-labelled control, and the two side actions are quiet links. */
  .listing-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px 24px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line-2);
  }
  .listing-count {
    margin: 0;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 7px;
    font-size: 14px; color: var(--muted);
  }
  .listing-count strong {
    color: var(--ink); font-weight: 800;
    font-size: 19px; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .listing-count__of { color: var(--muted); }
  .listing-count__of[hidden] { display: none; }
  .listing-count__of strong { font-size: 14px; font-weight: 700; }
  .listing-count__unit { color: var(--ink); font-weight: 600; }
  /* The destination is context, not a second headline — a quiet chip keeps it
     from competing with the number it belongs to. */
  .listing-count__where {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface);
    font-size: 12.5px; font-weight: 600; color: var(--muted-2);
  }

  .toolbar-right {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 10px 18px;
  }

  /* One control, one border: icon and label sit inside the same pill as the
     value, so "Sortierung" reads as part of the field instead of floating
     beside it. */
  .sort {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 4px 0 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .sort:hover { border-color: #d3dae1; }
  .sort:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(244, 155, 6, 0.22);
  }
  .sort__ico { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted-2); }
  .sort__lbl {
    font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--muted-2);
    cursor: pointer; white-space: nowrap;
  }
  .sort select {
    appearance: none; -webkit-appearance: none;
    font-family: inherit; font-size: 13px; font-weight: 700;
    color: var(--ink);
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7885' stroke-width='2.2' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
    background-size: 13px;
    border: 0;
    border-radius: 999px;
    padding: 9px 30px 9px 2px;
    cursor: pointer;
    outline: none;
  }

  /* Secondary by construction: no box, no fill — the offers own the emphasis
     on this page now. */
  .toolbar-links { display: inline-flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; }
  .toolbar-link {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 0;
    border: 0; background: none;
    font: inherit; font-size: 13px; font-weight: 600;
    color: var(--muted);
    text-decoration: underline;
    text-decoration-color: rgba(90, 104, 118, 0.3);
    text-underline-offset: 4px;
    cursor: pointer;
    transition: color .15s ease, text-decoration-color .15s ease;
  }
  .toolbar-link svg { width: 15px; height: 15px; flex-shrink: 0; }
  .toolbar-link { text-decoration-thickness: 1px; }
  .toolbar-link:hover,
  .toolbar-link:focus-visible { color: var(--brand-deep); text-decoration-color: currentColor; }
  .toolbar-link:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: 0 0 0 3px rgba(244, 155, 6, 0.22);
  }
  /* Active filter pills */
  .active-pills {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .active-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12.5px; font-weight: 600;
    color: var(--ink);
  }
  .active-pill:has(button) { padding: 6px 6px 6px 14px; }
  .active-pill.active-pill-hint {
    background: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
    font-weight: 600;
  }
  .active-pill button {
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    display: grid; place-items: center;
  }
  .active-pill button svg { width: 10px; height: 10px; }

  /* Trip card grid (default) + list-view modifier */
  .trip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--stack-md);
  }
  .trip-grid.list-view {
    grid-template-columns: 1fr;
  }
  .trip-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
  }
  .trip-grid.list-view .trip-card { flex-direction: row; }
  /* Quiet lift: a tight contact shadow plus a wide, low-opacity ambient one.
     The single hard-edged drop this replaced read as a bounce on a grid of
     cards that are already competing for attention. */
  .trip-card:hover {
    border-color: #e2e6ea;
    transform: translateY(-1px);
    box-shadow:
      0 1px 2px rgba(16, 24, 40, 0.04),
      0 12px 28px -14px rgba(16, 24, 40, 0.16);
  }
  .trip-card--catalog:not([href]) { cursor: default; }
  .trip-card--catalog:not([href]):hover {
    border-color: var(--line-2);
    transform: none;
    box-shadow: none;
  }
  .trip-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  /* Two-image split: trip on the left, hotel on the right, exactly 50/50.
     Sits in the same absolute slot as .trip-img so badges/placeholders keep working. */
  .trip-img-split { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; }
  .trip-img-split > img { width:100%; height:100%; object-fit:cover; display:block; min-width:0; }
  .trip-img-split > img + img { border-left:1px solid rgba(255,255,255,.85); }
  .trip-ph  { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-family:'Caveat',cursive; font-size:32px; text-shadow:0 2px 8px rgba(0,0,0,.4); padding: 0 16px; text-align: center; }
  .trip-price-quote { font-weight:700; font-size:15px; color:#5a6876; }
  .trip-sub { font-size:13px; color:var(--muted); line-height:1.55; }
  .filter-rail.is-collapsed .filter-block:not(:last-child) { display:none; }
  .filter-rail-toggle { display:none; }
  @media (max-width: 1060px) {
    .filter-rail-toggle { display:flex; }
  }

  /* Long facet lists (Merkmale, Zielflughafen) — collapse to first 6 rows
     on small screens; the toggle button expands the rest. Desktop stays open. */
  .filter-rows { display: flex; flex-direction: column; }
  .filter-rows-toggle {
    display: none;
    align-items: center; gap: 8px;
    margin-top: 8px; padding: 8px 10px;
    background: transparent; border: 0;
    font: inherit; font-size: 13px; font-weight: 700;
    color: var(--brand); cursor: pointer;
    align-self: flex-start;
  }
  .filter-rows-toggle:hover { color: var(--brand-deep); }
  .filter-rows-toggle::after {
    content: "";
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .15s ease;
  }
  .filter-rows-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-1px, -1px);
  }
  .filter-rows-toggle__count {
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
  }
  .filter-rows-toggle[aria-expanded="true"] .filter-rows-toggle__count { display: none; }
  @media (max-width: 1060px) {
    /* Keep checked rows visible even when collapsed so the user always sees
       which filters are active. */
    .filter-rows[data-collapse-rows]:not([data-collapse-rows-static]):not([data-expanded]) .filter-row:nth-of-type(n+7):not(:has(input:checked)) {
      display: none;
    }
    .filter-rows-toggle { display: inline-flex; }
  }
  .empty-state { padding: 48px 32px; text-align:center; background:#f7f8fa; border-radius:24px; margin-bottom:32px; }
  .empty-state h3 { font-size:22px; font-weight:700; margin:0 0 8px; }
  .empty-state p  { color:#5a6876; margin:0; }
  .error-state { border:1px solid #e0a33a; background:#fff9ed; }
  .retry-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin-top:20px; padding:10px 18px; border-radius:999px; background:#172033; color:#fff; font-weight:700; text-decoration:none; }
  .retry-link:hover { background:#2a3957; color:#fff; }
  .trip-media {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: linear-gradient(160deg, #e6c89a 0%, #7a4f23 100%);
  }
  .trip-grid.list-view .trip-media {
    flex: 0 0 320px;
    aspect-ratio: auto;
  }
  .trip-media .ph {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: rgba(255,255,255,0.72);
    text-align: center;
    padding: 8px;
  }
  .trip-badges {
    position: absolute; left: 14px; top: 14px; right: 14px;
    z-index: 2;
    display: flex; justify-content: space-between; gap: 8px;
    pointer-events: none;
  }
  .trip-cat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(6px);
    font-size: 11.5px; font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.01em;
  }
  .trip-cat::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand);
  }
  .trip-fav {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: none; cursor: pointer;
    display: grid; place-items: center;
    color: var(--ink);
    pointer-events: auto;
    transition: color .15s ease, transform .15s ease;
  }
  .trip-fav:hover { color: var(--brand); }
  .trip-fav.on { color: var(--brand); }
  .trip-fav.on svg { fill: currentColor; }
  .trip-fav svg { width: 14px; height: 14px; transition: fill .15s ease; }

  .trip-combo {
    position: absolute;
    right: 14px; bottom: 14px;
    z-index: 2;
    display: flex; align-items: center;
    pointer-events: none;
  }
  .trip-combo-plus {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 6px 16px -6px rgba(0,0,0,0.45);
    position: relative;
    margin-right: -12px;
    z-index: 2;
    font-size: 0;
    flex: 0 0 auto;
  }
  .trip-combo-plus::before,
  .trip-combo-plus::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    background: var(--ink);
    border-radius: 1px;
  }
  .trip-combo-plus::before {
    width: 13px; height: 2.5px;
    transform: translate(-50%, -50%);
  }
  .trip-combo-plus::after {
    width: 2.5px; height: 13px;
    transform: translate(-50%, -50%);
  }
  .trip-combo-img {
    width: 116px; height: 84px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #fff;
    background: #f1f3f5;
    box-shadow: 0 8px 20px -8px rgba(0,0,0,0.5);
    display: block;
  }
  .trip-grid.list-view .trip-combo { right: 18px; bottom: 18px; }
  .trip-grid.list-view .trip-combo-img { width: 140px; height: 100px; }

  .trip-body {
    padding: 18px 20px 20px;
    flex: 1;
    display: flex; flex-direction: column;
    gap: 10px;
  }
  .trip-grid.list-view .trip-body { padding: 24px 26px 26px; }
  .trip-region {
    font-size: 12px; font-weight: 700;
    color: var(--brand);
    letter-spacing: 0.05em; text-transform: uppercase;
  }
  .trip-title {
    font-size: 18px; font-weight: 800;
    line-height: 1.2; letter-spacing: -0.01em;
    color: var(--ink);
    text-wrap: balance;
  }
  .trip-grid.list-view .trip-title { font-size: 22px; }
  .trip-desc {
    font-size: 13px; color: var(--muted);
    line-height: 1.55;
  }
  .trip-grid.list-view .trip-desc { max-width: 560px; }
  .trip-desc-plus { color: var(--brand); font-weight: 800; }

  /* ── "Was ist drin?" — the package, stated on the card ─────────────────
     The card used to name two objects and a price and leave the visitor to
     guess how long the tour ran, whether a flight was included and what the
     beach half even was. Each leg now says its own duration, so a trip can be
     judged for fit before opening it. Days are omitted rather than guessed
     when upstream does not supply them — see App\View\PackageLegs. */
  .trip-package {
    list-style: none;
    margin: 2px 0 0;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 9px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
  }
  .trip-package__leg {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13px; line-height: 1.4;
    color: var(--muted);
  }
  .trip-package__leg > span {
    min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
  }
  .trip-package__leg strong {
    font-weight: 700; font-size: 13.5px; color: var(--ink);
    letter-spacing: -0.005em;
  }
  .trip-package__what {
    color: var(--muted-2); font-size: 12.5px;
    overflow-wrap: anywhere;
  }
  .trip-package__ico {
    width: 16px; height: 16px; flex-shrink: 0;
    margin-top: 1px;
    color: var(--brand-deep, var(--brand));
  }

  .trip-meta {
    display: flex; flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted-2);
  }
  .trip-meta > span {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .trip-meta svg { width: 13px; height: 13px; color: var(--ink); opacity: 0.55; flex-shrink: 0; }

  .trip-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #eef1f4;
    min-height: 44px;
  }
  .destination-card .trip-foot { justify-content: flex-end; }
  .destination-card .trip-body { gap: 6px; }
  .destination-card .trip-title { font-size: 18px; }
  .trip-cta {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--brand); font-weight: 700; font-size: 13.5px;
    letter-spacing: 0.01em;
    transition: gap .15s ease;
  }
  .trip-card:hover .trip-cta { gap: 10px; }
  .trip-depart {
    font-size: 11.5px; color: var(--muted-2);
    line-height: 1.4;
  }
  .trip-depart strong { color: var(--ink); font-weight: 700; font-size: 12px; display: block; }
  .trip-depart .trip-hint { font-size: 11px; color: var(--muted-2); font-style: italic; }
  .trip-price {
    text-align: right; white-space: nowrap;
  }
  .trip-price .ab { font-size: 11px; color: var(--muted-2); letter-spacing: 0.04em; text-transform: uppercase; }
  .trip-price .amt {
    font-size: 22px; font-weight: 800; color: var(--ink);
    line-height: 1; letter-spacing: -0.01em;
    margin-top: 2px;
  }
  /* "Auf Anfrage" / "Nach Terminwahl" occupy the price slot but must not shout
     like a number — same slot, one size down, no tabular weight. */
  .trip-price .amt--hint { font-size: 15px; font-weight: 700; }
  .trip-price .pp { font-size: 11px; color: var(--muted-2); margin-top: 2px; }

  /* ── The card's one CTA ────────────────────────────────────────────────
     A <span>, not a button: the whole card is already the link, and a real
     button here would swallow the click and break select_item tracking. It is
     styled as the primary action because that is the role it plays. */
  .trip-cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    flex-shrink: 0;
    padding: 12px 14px 12px 20px;
    border-radius: 999px;
    background: var(--ink); color: #fff;
    font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em;
    line-height: 1;
    transition: background .15s ease, transform .15s ease;
  }
  .trip-cta-btn .arrow-chip {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--brand);
    display: grid; place-items: center;
    color: var(--on-brand, #fff);
    transition: transform .15s ease;
  }
  .trip-cta-btn .arrow-chip svg { width: 12px; height: 12px; }
  .trip-card:hover .trip-cta-btn { background: #1d2734; }
  .trip-card:hover .trip-cta-btn .arrow-chip { transform: translateX(2px); }
  .trip-card:focus-visible {
    outline: 3px solid rgba(244, 155, 6, 0.5);
    outline-offset: 2px;
  }

  /* No-price CTA — plain text in the price slot prompting the user to fill
   * the search form. No badge / no background — keeps the card calm. */
  .trip-price-cta {
    display: inline-block; cursor: pointer; text-align: right;
    font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4;
  }
  .trip-price-cta em {
    font-style: normal; color: var(--ink);
    text-decoration: underline; text-underline-offset: 2px;
  }
  .trip-price-cta:hover em, .trip-price-cta:focus-visible em { color: var(--brand); }
  .trip-price-cta:focus-visible { outline: none; }

  /* Embedded search form on /erlebnisreisen — the exact same component as the
   * /home hero, tabs included. We only trim the margins so it nestles into
   * the listing-head; background, shadow and states come from search-form.css. */
  .listing-search { margin: 22px 0 8px; }
  .listing-search .search { margin-top: 0; }

  /* ===== Mobile disclosure (.mcollapse) =================================
     A checkbox + sibling selector rather than <details> or a script: the
     collapse has to be in effect on the very first paint, and a <details>
     cannot be force-opened again from CSS on desktop across engines.
     Above the two-column breakpoint the control disappears entirely — off
     screen AND out of the tab order — and the body renders untouched. */
  .mcollapse__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .mcollapse__summary { display: none; }

  @media (max-width: 1060px) {
    .mcollapse__summary {
      display: flex; align-items: center; gap: 12px;
      width: 100%;
      min-height: 56px;
      padding: 11px 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: #fff;
      color: var(--ink);
      cursor: pointer;
      text-align: left;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .mcollapse__input:focus-visible + .mcollapse__summary {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(244, 155, 6, 0.28);
    }
    .mcollapse__ico { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand-deep, var(--brand)); }
    .mcollapse__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .mcollapse__title { font-size: 13.5px; font-weight: 800; letter-spacing: -0.005em; }
    .mcollapse__value {
      font-size: 12.5px; color: var(--muted-2);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mcollapse__chevron {
      flex-shrink: 0;
      width: 28px; height: 28px; border-radius: 50%;
      display: grid; place-items: center;
      background: var(--surface);
      transition: transform .2s ease;
    }
    .mcollapse__chevron svg { width: 14px; height: 14px; }
    .mcollapse__input:checked + .mcollapse__summary .mcollapse__chevron { transform: rotate(180deg); }
    .mcollapse__input:checked + .mcollapse__summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .mcollapse__input:not(:checked) ~ .mcollapse__body { display: none; }
    .mcollapse__input:checked ~ .mcollapse__body { margin-top: -1px; }

    /* The listing search sits on the dark hero, so its collapsed bar carries
       the same white card surface the open form has. */
    .mcollapse--search .mcollapse__summary { box-shadow: 0 12px 34px -18px rgba(0, 0, 0, 0.7); }

    .filter-rail { border: 0; padding: 0; background: transparent; }
    .filter-rail__summary { background: #fff; }
    .filter-rail__blocks {
      border: 1px solid var(--line);
      border-top: 0;
      border-radius: 0 0 var(--radius-sm) var(--radius-sm);
      background: #fff;
      padding: 2px 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .mcollapse__chevron { transition: none; }
  }

  /* Pulse highlight — triggered when CTA scrolls user to the form */
  @keyframes pulse-highlight {
    0%   { box-shadow: 0 0 0 0 rgba(217,119,6,0.55), 0 10px 30px -12px rgba(0,0,0,0.25); }
    40%  { box-shadow: 0 0 0 12px rgba(217,119,6,0.18), 0 10px 30px -12px rgba(0,0,0,0.25); }
    100% { box-shadow: 0 0 0 0 rgba(217,119,6,0.0), 0 10px 30px -12px rgba(0,0,0,0.25); }
  }
  .pulse-highlight { animation: pulse-highlight 1.6s ease-out 2; }

  .active-pill.active-pill-hint {
    cursor: pointer;
    background: linear-gradient(135deg, #fff7e6 0%, #ffe7c2 100%);
    border-color: #f0c674;
    color: var(--ink); font-weight: 700;
  }
  .active-pill.active-pill-hint:hover { background: linear-gradient(135deg, #ffe7c2 0%, #ffd28a 100%); }

  /* Pagination / load more */
  .load-more-wrap {
    display: flex; flex-direction: column; align-items: center;
    gap: 12px;
    margin-top: 48px;
  }
  .load-progress {
    font-size: 13px; color: var(--muted-2);
    font-variant-numeric: tabular-nums;
  }
  .load-progress strong { color: var(--ink); font-weight: 700; }
  .load-track {
    width: 220px; height: 2px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
  }
  .load-track .fill {
    height: 100%; background: var(--brand);
    transition: width .3s ease;
  }
  .load-more {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px 14px 28px;
    background: var(--ink); color: #fff;
    border: none; border-radius: 999px;
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease;
  }
  .load-more:hover { transform: translateY(-1px); }
  .load-more .chip {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--brand);
    display: grid; place-items: center;
  }
  .load-more .chip svg { width: 12px; height: 12px; }

  /* Empty state */
  .empty {
    padding: 60px 24px;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: var(--radius-md);
    color: var(--muted);
  }
  .empty h3 { color: var(--ink); font-size: 20px; margin-bottom: 8px; }

  /* ===== CTA band ===== */
  .cta-band {
    background: var(--surface);
    padding: 64px 0;
  }
  .cta-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
  }
  .cta-inner .mini {
    font-family: 'Caveat', cursive;
    font-size: 20px; color: var(--muted);
    margin-bottom: 6px;
  }
  .cta-inner h2 {
    font-size: 34px; font-weight: 800; letter-spacing: -0.02em;
    line-height: 1.15; max-width: 620px;
  }
  .cta-inner p {
    margin-top: 10px;
    color: var(--muted);
    font-size: 14px; line-height: 1.6;
    max-width: 560px;
  }
  .cta-actions { display: flex; gap: 12px; flex-shrink: 0; }
  .btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--brand); color: #fff;
    border: none; padding: 14px 26px;
    border-radius: 999px;
    font-weight: 700; font-size: 14px; cursor: pointer;
  }
  .btn-secondary {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; color: var(--ink);
    border: 1px solid var(--line);
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 700; font-size: 14px; cursor: pointer;
  }
  .btn-secondary:hover { background: #f5f7f9; }

  /* Footer: see base.css for the shared `.site-foot` styles. */

  @media (max-width: 1060px) {
    .listing-grid { grid-template-columns: 1fr; gap: 28px; }
    .trip-grid { grid-template-columns: repeat(2, 1fr); }
    .trip-grid.list-view .trip-media { flex-basis: 240px; }
  }
  @media (max-width: 820px) {
    .listing-head .inner { padding-block: 56px 72px; }
    .listing-head h1 { max-width: none; }
    .listing-head .lede { max-width: none; }
    /* On a result page both of these only restate the search — which the
       collapsed search bar right below them now says in one line. Dropping
       them buys back roughly a third of a phone screen before the offers. */
    .listing-head .lede--results,
    .quick-stats--results { display: none; }
    .quick-stats { gap: 24px 32px; flex-wrap: wrap; }
    .listing { padding: 32px 0 64px; }
    .listing-toolbar { gap: 12px 20px; }
    /* Left-aligned and wrapping — `space-between` used to fling the sort,
       FAQ and "Neue Suche" controls to opposite edges of the row. */
    .toolbar-right { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 10px 18px; }
    /* base.css lifts every <select> to 16px from here down as an iOS
       zoom guard, which leaves the sort dropdown towering over the links
       next to it. Keep the toolbar on one type size and grow the touch
       target through the height instead. */
    .sort select { font-size: 13px !important; }
    .sort { min-height: 44px; }
    .toolbar-link { min-height: 44px; }
    .cta-band { padding: 48px 0; }
    .cta-inner { grid-template-columns: 1fr; gap: 20px; }
    .cta-inner h2 { font-size: 28px; }
  }
  @media (max-width: 640px) {
    :root { --section-y: 48px; }
    .trip-grid { grid-template-columns: 1fr; gap: 14px; }
    .trip-grid.list-view .trip-card { flex-direction: column; }
    .trip-grid.list-view .trip-media { flex: none; aspect-ratio: 4/3; }
    .trip-grid.list-view .trip-body { padding: 18px 20px 20px; }
    .trip-grid.list-view .trip-title { font-size: 18px; }
    .listing-head .inner { padding-block: 40px 52px; }
    .listing-head .lede { padding-left: 14px; font-size: 14px; }
    .listing-head .eyebrow { font-size: 20px; }
    .quick-stats { gap: 18px 24px; margin-top: 24px; padding-top: 20px; }
    .quick-stats .n { font-size: 24px; }
    .cat-rail-inner { padding: 10px var(--gutter); }
    .cat-chip { min-height: 44px; padding: 8px 12px; font-size: 12.5px; }
    .listing-search { margin: 16px 0 4px; }
    .listing-toolbar {
      flex-direction: column; align-items: stretch;
      gap: 9px; padding-bottom: 13px; margin-bottom: 15px;
    }
    .listing-count strong { font-size: 18px; }
    /* Content-width, never stretched: two half-width outlines gave FAQ and
       "Neue Suche" the weight of primary buttons, and the right-hand one kept
       landing under the chat launcher. */
    .toolbar-right { width: 100%; flex-wrap: wrap; gap: 2px 18px; }
    .sort { align-self: flex-start; padding-left: 11px; }
    /* Kept for screen readers — the icon and the chevron say "sort" to
       everyone else, and the spelled-out label made the control run nearly the
       full width for no gain. */
    .sort__lbl {
      position: absolute; width: 1px; height: 1px;
      margin: -1px; padding: 0; overflow: hidden;
      clip-path: inset(50%); white-space: nowrap;
    }
    .toolbar-link__trail { display: none; }
    .filter-block { padding: 14px 18px; }
    .filter-row,
    .filter-rows-toggle,
    .filter-clear { min-height: 44px; }
    .active-pill { min-height: 44px; }
    .trip-fav { width: 44px; height: 44px; }
    /* Price and CTA stop competing for one row: the price keeps the top line,
       the CTA takes the full width below it as a proper thumb target. */
    .trip-foot { flex-wrap: wrap; gap: 12px 14px; }
    .trip-foot .trip-price { text-align: left; }
    .trip-cta-btn {
      flex: 1 1 100%;
      justify-content: center;
      min-height: 50px;
      padding: 12px 18px;
      font-size: 14.5px;
    }
    .trip-package { padding: 11px 12px; gap: 8px; }
    .trip-package__leg { font-size: 12.5px; }
    .trip-package__leg strong { font-size: 13px; }
    .liked-empty { padding: 40px 24px; }
    .liked-empty h3 { font-size: 20px; }
    .cta-band { padding: 36px 0; }
    .cta-inner h2 { font-size: 24px; line-height: 1.2; }
    .cta-inner p { font-size: 13.5px; }
    .cta-actions { flex-direction: column; width: 100%; }
    .cta-actions .btn-primary, .cta-actions .btn-secondary { justify-content: center; }
    .load-more { padding: 12px 22px 12px 24px; font-size: 13px; }
    .load-track { width: 180px; }
  }

  /* ── Rundreise & Baden: editorial copy + FAQ (curated landing only) ─── */
  .rb-seo {
    padding: 80px 0;
    background: #fff;
    border-top: 1px solid var(--line);
  }
  .rb-seo-inner { max-width: 1120px; margin: 0 auto; }
  .rb-seo-intro { max-width: 720px; margin-bottom: 44px; }
  .rb-kicker,
  .rb-benefits-label {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--brand-deep);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
  }
  .rb-seo h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.08;
  }
  .rb-seo h2 em { color: var(--brand); font-style: normal; }
  .rb-seo .rb-lede {
    max-width: 620px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
  }
  .rb-seo-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 64px;
    align-items: start;
  }
  .rb-seo h3 {
    margin: 32px 0 12px;
    color: var(--ink);
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.01em;
    line-height: 1.3;
  }
  .rb-seo-story h3:first-child { margin-top: 0; }
  .rb-seo p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
  }
  .rb-seo p strong,
  .rb-seo li strong { color: var(--ink); font-weight: 700; }
  .rb-benefits {
    padding: 28px;
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }
  .rb-benefits h3 { margin: 0 0 6px; font-size: 22px; }
  .rb-seo .rb-advantages { list-style: none; margin: 16px 0 0; padding: 0; }
  .rb-seo .rb-advantages li {
    position: relative;
    margin: 0;
    padding: 14px 0 14px 26px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.6;
  }
  .rb-seo .rb-advantages li::before {
    content: "\2713";
    position: absolute;
    top: 15px;
    left: 2px;
    color: var(--brand);
    font-weight: 800;
  }
  .rb-seo .faq-container {
    margin-top: 72px;
    padding-top: 56px;
    border-top: 1px solid var(--line);
  }
  .rb-seo--results { background: var(--surface-3); }
  .rb-seo.rb-seo--results .faq-container {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .rb-faq-head { max-width: 680px; }
  .rb-seo .rb-faq-head h2,
  .rb-seo .rb-faq-head h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
  }
  .rb-seo .rb-faq-head p { margin-top: 10px; }
  .rb-faq-list {
    display: grid;
    gap: 10px;
    margin-top: 24px;
  }
  .rb-seo .faq-item {
    overflow: hidden;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: var(--radius-sm);
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .rb-seo .faq-item[open] {
    border-color: #cfd5dc;
    box-shadow: 0 12px 30px -24px rgba(11, 23, 34, .45);
  }
  .rb-seo .faq-question {
    position: relative;
    display: block;
    padding: 18px 58px 18px 20px;
    color: var(--ink);
    cursor: pointer;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.5;
    list-style: none;
    transition: background-color .18s ease, color .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .rb-seo .faq-question::-webkit-details-marker { display: none; }
  .rb-seo .faq-question::marker { content: ""; }
  .rb-seo .faq-question::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 18px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid #d8dde3;
    border-radius: 50%;
    color: var(--muted);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  }
  @media (hover: hover) {
    .rb-seo .faq-item:hover {
      border-color: #c8ced6;
      box-shadow: 0 10px 26px -24px rgba(11, 23, 34, .5);
    }
    .rb-seo .faq-question:hover { background: var(--surface-3); }
    .rb-seo .faq-question:hover::after {
      border-color: var(--brand);
      color: var(--brand-deep);
    }
  }
  .rb-seo .faq-item[open] .faq-question { background: var(--surface-3); }
  .rb-seo .faq-item[open] .faq-question::after {
    content: "\2212";
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
  .rb-seo .faq-question:focus-visible {
    z-index: 1;
    outline: 2px solid var(--brand);
    outline-offset: -2px;
    border-radius: calc(var(--radius-sm) - 1px);
  }
  .rb-seo .faq-answer {
    max-width: 820px;
    padding: 2px 58px 22px 20px;
    background: #fff;
  }
  .rb-seo .faq-answer p,
  .rb-seo .faq-answer li { font-size: 14px; line-height: 1.7; }
  .rb-seo .faq-answer ul { margin: 8px 0 14px; padding-left: 20px; }
  .rb-seo .faq-answer li { margin-bottom: 5px; color: var(--muted); }
  .rb-seo .faq-answer p:last-child { margin-bottom: 0; }
  @media (max-width: 900px) {
    .rb-seo-copy { grid-template-columns: 1fr; gap: 36px; }
    .rb-benefits { max-width: 680px; }
  }
  @media (max-width: 640px) {
    .rb-seo { padding: 52px 0; }
    .rb-seo-intro { margin-bottom: 34px; }
    .rb-seo h2 { font-size: 30px; }
    .rb-seo h3 { font-size: 18px; }
    .rb-seo p { font-size: 14px; }
    .rb-benefits { padding: 22px 20px; border-radius: var(--radius-sm); }
    .rb-benefits h3 { font-size: 20px; }
    .rb-seo .faq-container { margin-top: 52px; padding-top: 40px; }
    .rb-seo .rb-faq-head h2,
    .rb-seo .rb-faq-head h3 { font-size: 23px; }
    .rb-faq-list { gap: 8px; }
    .rb-seo .faq-question { padding: 16px 52px 16px 16px; font-size: 14px; }
    .rb-seo .faq-question::after { right: 14px; }
    .rb-seo .faq-answer { padding: 2px 16px 18px; }
  }