/* ============================================================================
   GoCamping · Redesign „Konzept A – Frische Natur"  ·  LISTING / search page
   Owned by the listing subagent. Loads AFTER redesign-a.css (which defines the
   --rd-* tokens). Works together with js/redesign-listing.js, which restructures
   each live class-method card (.one-hotel > .itemlabel3 > .hotel-info-block …)
   into the Konzept-A `.rcard` shape from konzept-a-frische-natur.html:

       .one-hotel .hotel-info-block.rcard      = horizontal result card
          .card-img   > a.preview_img > img    = photo (fixed block, left)
          .rcard-body
             .hn_location_name.card-loc        = pin + Ort – Kanton
             .card-row > h3.rcard-title > a    = campsite name (link)
             p.rcard-desc                      = description
             .card-foot > a.custom_detail_button = green Details CTA

   content.php supplies the panel hooks:
       .rdA-filters / .rdA-filterpanel         = clean rounded filter sidebar
       .rdA-lhead  (.foundcampings + .rdA-sort)= results header + sort
       .paging / .paging_link                  = rounded page chips

   REAL DATA ONLY: the listing renders NO price, rating, badge or amenity chip,
   so none is styled or faked here — only name, location, description, Details.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Results column shell
   ------------------------------------------------------------------------- */
.rightcontent .content-holder{ background:transparent; }

/* Drop the legacy <hr> rules / spacer rows that the class method prints between
   cards (JS removes the wrappers too; this is the CSS belt-and-braces). */
.rightcontent .featurette-divider3,
.rightcontent .one-hotel + .offset-2{ display:none !important; }

/* The card stream → a vertical list grid (mockup .rlist). JS tags the parent of
   the first card with .rlist-host. */
.rightcontent .rlist-host{
  display:flex; flex-direction:column; gap:18px;
}
.rightcontent .rlist-host > .clearfix{ display:none; }      /* stray clearfixes between cards */

/* ---------------------------------------------------------------------------
   2. Result card  (.hotel-info-block.rcard)
   ------------------------------------------------------------------------- */
.rightcontent .one-hotel{ margin:0; list-style:none; }
.rightcontent .one-hotel > div{ position:relative; }
.rightcontent .itemlabel3{ position:relative; }

.rightcontent .rcard{
  display:grid;
  grid-template-columns:280px 1fr;
  align-items:stretch;
  background:#fff;
  border:1px solid var(--rd-line);
  /* mockup uses --r:18px for .rcard; the global skin token --rd-r is 16px, so
     pin the radius here to match konzept-a-frische-natur.html exactly. */
  border-radius:18px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rightcontent .one-hotel:hover .rcard{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(16,40,38,.08),0 2px 6px rgba(16,40,38,.04);
  border-color:transparent;
}
/* ribboned “best” campsites get a subtle green frame */
.rightcontent .one-hotel.best-hotel .rcard{
  border-color:var(--rd-green-100);
  box-shadow:0 10px 28px -18px rgba(0,160,87,.45);
}

/* The mobile whole-card overlay link covers the card (kept from live markup) */
.rightcontent .itemlabel3 > .link-overlay{
  position:absolute; inset:0; z-index:4;
  font-size:0; color:transparent; text-indent:-9999px;
}

/* ---- Media (left) ------------------------------------------------------- */
.rightcontent .rcard .card-img{
  position:relative; overflow:hidden;
  min-height:210px; height:100%;
  background:linear-gradient(135deg,#0a7d57,#04323f);   /* branded placeholder */
}
.rightcontent .rcard .card-img::after{
  content:"\1F3D5";                                       /* 🏕 fallback glyph */
  position:absolute; inset:0; margin:auto;
  display:flex; align-items:center; justify-content:center;
  font-size:34px; opacity:.4; filter:grayscale(1) brightness(2.4);
  pointer-events:none; z-index:0;
}
.rightcontent .rcard .card-img a.preview_img{
  display:block; width:100%; height:100%;
  position:relative; z-index:1;
}
.rightcontent .rcard .card-img img.image{
  width:100% !important; height:100% !important;
  object-fit:cover;
  border-radius:0 !important;
  display:block;
  transition:transform .45s ease;
}
.rightcontent .one-hotel:hover .rcard .card-img img.image{ transform:scale(1.05); }

/* ---- Ribbon badge (.custom_bestseller, if present) ---------------------- */
.rightcontent .custom_bestseller{
  position:absolute; top:12px; left:12px; z-index:3;
  background:var(--rd-green); color:#fff;
  font-family:var(--rd-display); font-weight:700; font-size:11.5px;
  letter-spacing:.01em; line-height:1;
  padding:6px 11px; border-radius:999px;
  box-shadow:0 4px 12px -4px rgba(0,50,68,.5);
  text-transform:none;
}

/* ---- Content (right) ---------------------------------------------------- */
.rightcontent .rcard .rcard-body{
  padding:16px 18px;
  display:flex; flex-direction:column; gap:8px;
  min-width:0;
}

/* Location line + pin (.hn_location_name → .card-loc) */
.rightcontent .rcard .card-loc{
  display:flex; align-items:center; gap:6px;
  font-family:var(--rd-text); font-weight:500;
  font-size:12.5px; color:var(--rd-muted);
  line-height:1.3; margin:0; padding:0;
}
.rightcontent .rcard .card-loc::before{
  content:""; flex:0 0 auto;
  width:14px; height:14px;
  background-color:var(--rd-green);
  -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* Name row (.card-row > h3.rcard-title) */
.rightcontent .rcard .card-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  margin:0;
}
.rightcontent .rcard .rcard-title{
  margin:0; padding:0;
  font-family:var(--rd-display) !important; font-weight:800;
  font-size:18px; line-height:1.18; letter-spacing:-.01em;
}
.rightcontent .rcard .rcard-title a{
  font-family:var(--rd-display) !important; font-weight:800;
  font-size:18px; line-height:1.18;
  color:var(--rd-navy) !important; text-decoration:none;
}
.rightcontent .one-hotel:hover .rcard .rcard-title a{ color:var(--rd-green-700) !important; }

/* Description (.rcard-desc) — real hotel short description, clamped to ~2 lines */
.rightcontent .rcard .rcard-desc{
  margin:0; padding:0;
  font-family:var(--rd-text); font-size:13.5px; line-height:1.5;
  color:var(--rd-muted);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis;
}
.rightcontent .rcard .rcard-desc p{ margin:0; display:inline; }

/* ---- Footer + CTA (.card-foot > a.custom_detail_button) -----------------
   Mockup `.rcard-body .card-foot{border-top:0;padding-top:6px}` — the horizontal
   result card has NO divider above the footer (unlike the home grid .card). */
.rightcontent .rcard .card-foot{
  margin-top:auto; padding-top:6px;
  border-top:0;
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
}
.rightcontent .rcard a.custom_detail_button{
  /* position:relative for z-index, but RESET the native top/offset — the legacy
     .custom_detail_button/.mt1 carries top:103px which (with position:relative) shoved
     the button ~103px down, out of the card (clipped) on the vertical mobile layout. */
  position:relative; top:auto !important; bottom:auto; left:auto; right:auto;
  margin-top:0 !important;
  z-index:5;                                    /* above the mobile card overlay link */
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--rd-green); color:#fff !important;
  font-family:var(--rd-display); font-weight:700; font-size:14px;
  letter-spacing:.01em; line-height:1;
  padding:10px 18px; min-height:40px;
  border:0; border-radius:999px;
  text-decoration:none !important;
  box-shadow:0 6px 16px -6px rgba(0,160,87,.55);
  transition:background .15s ease, transform .12s ease;
}
.rightcontent .rcard a.custom_detail_button::after{ content:"\2192"; font-weight:700; }
.rightcontent .rcard a.custom_detail_button:hover{
  background:var(--rd-green-700); color:#fff !important; transform:translateY(-1px);
}

/* ---------------------------------------------------------------------------
   3. Results header + sort  (.rdA-lhead → .topsortbyfilter + .rdA-sort)
   ------------------------------------------------------------------------- */
.rightcontent .rdA-lhead{ margin:0 0 18px; }
.rightcontent .rdA-lhead .topsortbyfilter{
  display:flex; align-items:center; gap:14px; flex-wrap:nowrap;
  background:#fff;
  border:1px solid var(--rd-line);
  border-radius:var(--rd-r);
  padding:13px 18px;
  margin:0;
  box-shadow:0 6px 18px -14px rgba(16,40,38,.25);
}
/* base custom.css sets .foundcampings{position:absolute} and floats .right /
   select right — neutralise so the flex bar lays out on one row. */
.rightcontent .rdA-lhead .foundcampings{
  position:static !important; float:none !important;
  font-family:var(--rd-display); font-weight:800;
  font-size:17px; color:var(--rd-navy);
  margin:0 auto 0 0 !important;                   /* push sort control to the right */
  white-space:nowrap;
}
.rightcontent .rdA-lhead .rdA-sort{
  display:flex; align-items:center; gap:9px;
  flex:0 0 auto; margin-left:auto;
}
.rightcontent .rdA-lhead .rdA-sort .right{
  float:none !important; position:static !important;
  margin:0 !important;
  font-family:var(--rd-text); font-weight:600; font-size:13px;
  color:var(--rd-muted); white-space:nowrap;
}
.rightcontent .rdA-sort select.custom_sort_by,
.rightcontent .rdA-sort select.sort-by{
  float:none !important; position:static !important;
  width:auto !important;
  font-family:var(--rd-text); font-weight:600; font-size:13.5px;
  color:var(--rd-navy);
  background:var(--rd-bg-soft);
  border:1px solid var(--rd-line) !important;
  border-radius:999px !important;
  padding:9px 34px 9px 15px;
  cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300A057'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:16px;
}
.rightcontent .rdA-sort select.custom_sort_by:focus,
.rightcontent .rdA-sort select.sort-by:focus{
  border-color:var(--rd-green) !important;
  box-shadow:0 0 0 3px var(--rd-green-50);
  background-color:#fff;
  outline:none;
}

/* "Filtern nach" toggle (mobile) → tidy pill */
.rightcontent .toggle-customextrasearch.collapsebtn{
  font-family:var(--rd-display); font-weight:700; font-size:13.5px;
  color:var(--rd-navy);
  background:#fff; border:1px solid var(--rd-line);
  border-radius:999px; padding:9px 16px;
}

/* ---------------------------------------------------------------------------
   4. Filter sidebar  (.rdA-filters / .rdA-filterpanel)
   ------------------------------------------------------------------------- */
.rdA-filters{ padding-right:0; }
.rdA-filterpanel{ display:flex; flex-direction:column; gap:14px; }

.rdA-filters .left_box_container{
  background:#fff;
  border:1px solid var(--rd-line);
  border-radius:var(--rd-r);
  padding:4px 16px 14px;
  margin:0;
  box-shadow:0 8px 22px -16px rgba(16,40,38,.30);
}
.rdA-filters .side_box_heading,
.rdA-filters h3.collapsebtn{
  font-family:var(--rd-display) !important; font-weight:800;
  font-size:15px; color:var(--rd-navy);
  padding:14px 0 11px; margin:0;
  border-bottom:1px solid var(--rd-line);
  cursor:pointer; position:relative;
}
.rdA-filters .side_box_content{ padding-top:13px; }

/* Filter form fields */
.rdA-filters label{
  font-family:var(--rd-text); font-weight:600; font-size:12.5px;
  color:var(--rd-navy); display:block; margin:0 0 4px;
}
.rdA-filters .form-control,
.rdA-filters input[type=text], .rdA-filters input[type=textbox],
.rdA-filters input[type=email], .rdA-filters input[type=number], .rdA-filters select{
  border-radius:var(--rd-r-sm) !important;
  border:1px solid var(--rd-line) !important;
  background:var(--rd-bg-soft);
  font-family:var(--rd-text); font-size:13.5px;
  padding:10px 12px; width:100%;
}
.rdA-filters .form-control:focus,
.rdA-filters input:focus, .rdA-filters select:focus{
  border-color:var(--rd-green) !important;
  box-shadow:0 0 0 3px var(--rd-green-50);
  background:#fff; outline:none;
}
.rdA-filters .customsearchform table{ width:100%; }
.rdA-filters .customsearchform td{ padding:4px 0; }

/* Search / submit button inside the sidebar → full-width green pill */
.rdA-filters .reservation-form .btn,
.rdA-filters button[type=submit],
.rdA-filters input[type=submit]{
  background:var(--rd-green) !important; color:#fff !important;
  font-family:var(--rd-display); font-weight:700;
  border:0 !important; border-radius:999px !important;
  padding:12px 18px; width:100%;
  box-shadow:0 6px 16px -6px rgba(0,160,87,.55);
}
.rdA-filters .reservation-form .btn:hover,
.rdA-filters button[type=submit]:hover{ background:var(--rd-green-700) !important; }

/* Collapse arrow */
.rdA-filters .collapsearrow{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:18px; height:18px;
  background-color:var(--rd-muted);
  -webkit-mask:no-repeat center/14px; mask:no-repeat center/14px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* Facility / amenity checkbox filters → tidy rows, green ticks */
.rdA-filters .checkbox{
  font-family:var(--rd-text); font-size:13px; color:var(--rd-ink);
  padding:3px 0;
}
.rdA-filters .checkbox input[type=checkbox]{ accent-color:var(--rd-green); }

/* The active facility filter chips become green pills (mockup .fbtn.on) */
.rdA-filters .customsearch_facilities .active,
.rdA-filters .facility-active{
  background:var(--rd-green-50); border-color:var(--rd-green); color:var(--rd-green-700);
}

/* ---------------------------------------------------------------------------
   5. Pagination  (.paging / .paging_link → rounded page chips)
   ------------------------------------------------------------------------- */
.rightcontent .paging{
  display:flex; justify-content:center; flex-wrap:wrap; gap:6px;
  margin:30px 0 8px;
}
.rightcontent a.paging_link{
  min-width:44px; height:44px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--rd-display); font-weight:700; font-size:14px;
  color:var(--rd-navy); text-decoration:none;
  background:#fff; border:1px solid var(--rd-line); border-radius:11px;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.rightcontent a.paging_link:hover{
  border-color:var(--rd-green); color:var(--rd-green-700);
}
/* current page marker is <b>[n]</b> */
.rightcontent a.paging_link b{ display:inline-flex; font-weight:700; color:inherit; }
.rightcontent a.paging_link:has(b){
  background:var(--rd-navy); border-color:var(--rd-navy); color:#fff;
}

/* ---------------------------------------------------------------------------
   6. Responsive
   ------------------------------------------------------------------------- */
@media (max-width:991px){
  .rdA-filters{ padding-right:15px; }
}
@media (max-width:767px){
  .rightcontent .rcard{ grid-template-columns:1fr; }
  .rightcontent .rcard .card-img{ min-height:200px; height:200px; }
  /* The card stream is a flex COLUMN; on mobile the cards become tall (image + full body
     stacked) and the flex layout was shrinking each card (→ overflow:hidden clipped the body,
     so only the photo showed). Switch to block stacking so every card keeps its full height
     and shows name/location/rating/price/Details like the mockup. */
  .rightcontent .rlist-host{ display:block; }
  .rightcontent .rlist-host > .one-hotel{ margin:0 0 18px; }
  .rightcontent .rcard,
  .rightcontent .one-hotel,
  .rightcontent .itemlabel3{ height:auto !important; min-height:0; }
  .rightcontent .rdA-lhead .topsortbyfilter{ padding:12px 14px; }
  .rightcontent .foundcampings{ font-size:15.5px; }
}

/* ---------------------------------------------------------------------------
   6b. Mobile (<=480px, incl. 375px): full-width cards, map below, comfortable
       left/right padding so content never touches the viewport edge. Bootstrap
       .container only gives ~15px here; the .lhero-in / .fbar-in / .lcount /
       .lbody chrome (which uses *-in wrappers, not the mockup .wrap) needs its
       own inset so the band, chips, cards and map all keep a clean gutter.
   ------------------------------------------------------------------------- */
@media (max-width:480px){
  /* horizontal gutter for the redesign chrome blocks */
  .rightcontent .rdA-lhero .lhero-in,
  .rightcontent .rdA-fbar .fbar-in,
  .rightcontent .lpage-chrome .lcount{
    padding-left:16px; padding-right:16px;
  }
  /* cards + map sit edge-to-edge inside the gutter, full width, stacked */
  .rightcontent .lbody.lgrid{ gap:16px; padding-left:0; padding-right:0; }
  .rightcontent .rcard{ grid-template-columns:1fr; }
  .rightcontent .rcard .card-img{ min-height:180px; height:180px; }
  .rightcontent .rcard .rcard-body{ padding:14px 16px; }
  /* results header (found count + sort) stacks so the sort pill stays reachable */
  .rightcontent .rdA-lhead .topsortbyfilter{ flex-wrap:wrap; gap:10px; padding:12px 14px; }
  .rightcontent .rdA-lhead .rdA-sort{ margin-left:0; }
  .rightcontent .rdA-lhead .foundcampings{ flex:1 1 100%; }
  /* the real map below the list keeps the same gutter, not touching the edges */
  .rightcontent .maprail.rdA-maprail{ height:320px; }
  #rda-map{ height:320px; min-height:320px; }
}

/* ===========================================================================
   7. ADD-ONS for the real listing build (map rail + price/rating/badge on the
      JS-built .rcard). The mockup base CSS (redesign-mockup.css) styles .rcard,
      .rating, .price, .map-canvas, .pin etc.; here we ONLY fill the gaps the
      base lacks for the LIVE markup + the real Leaflet map and its price pins.
   ========================================================================= */

/* ---- 7a. card image: badge + favourite heart (JS adds these) -------------- */
.rightcontent .rcard .card-img .badge{
  position:absolute; top:12px; left:12px; z-index:3;
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--rd-display,'Roboto',sans-serif); font-weight:700;
  font-size:11.5px; line-height:1; letter-spacing:.01em;
  padding:6px 11px; border-radius:999px;
  background:#fff; color:var(--rd-navy,#0b2e30);
  box-shadow:0 4px 12px -4px rgba(0,50,68,.45);
}
.rightcontent .rcard .card-img .badge svg{ width:13px; height:13px; }
.rightcontent .rcard .card-img .badge--anfrage{ background:#fff; color:var(--rd-navy,#0b2e30); }
.rightcontent .rcard .card-img .badge--buchbar{ background:var(--rd-green,#00A057); color:#fff; }
.rightcontent .rcard .card-img .card-fav{
  position:absolute; top:10px; right:10px; z-index:5;
  width:34px; height:34px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.92); color:#9aa4a2; cursor:pointer;
  box-shadow:0 3px 10px -3px rgba(0,40,40,.4);
  transition:color .15s ease, transform .12s ease;
}
.rightcontent .rcard .card-img .card-fav:hover{ transform:scale(1.06); color:#e0566a; }
.rightcontent .rcard .card-img .card-fav.on{ color:#e0566a; }

/* ---- 7b. name row: rating chip + reviews line (filled live) --------------- */
.rightcontent .rcard .card-row{ align-items:flex-start; }
.rightcontent .rcard .card-row .rating{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--rd-text,'Roboto',sans-serif); font-weight:700; font-size:13px;
  color:var(--rd-navy,#0b2e30);
  background:var(--rd-green-50,#e8f7ef);
  padding:4px 9px; border-radius:9px; white-space:nowrap;
}
.rightcontent .rcard .card-row .rating svg,
.rightcontent .rcard .card-row .rating .star{ color:#FFCE3C; width:13px; height:13px; }
.rightcontent .rcard .rcard-body .revs{
  margin:-2px 0 0;
  font-family:var(--rd-text,'Roboto',sans-serif); font-size:12px; color:var(--rd-muted,#5f6b69);
}

/* ---- 7c. footer: price block (left) + Details (right) --------------------- */
.rightcontent .rcard .card-foot{ justify-content:space-between; }
.rightcontent .rcard .card-foot .price{ display:flex; flex-direction:column; line-height:1.1; }
.rightcontent .rcard .card-foot .price .from{
  font-size:11px; font-weight:500; color:var(--rd-faint,#8a9794);
}
.rightcontent .rcard .card-foot .price .amt{
  font-family:var(--rd-display,'Roboto',sans-serif); font-weight:800; font-size:20px;
  color:var(--rd-navy,#0b2e30);
}
.rightcontent .rcard .card-foot .price .amt small{
  font-size:12.5px; font-weight:500; color:var(--rd-muted,#5f6b69);
}

/* ---- 7d. the two-column grid + sticky map rail --------------------------- */
.rightcontent .lbody.lgrid{
  display:grid; grid-template-columns:1fr 380px; gap:24px;
  align-items:start;
}
.rightcontent .rdA-results{ min-width:0; }
.rightcontent .maprail.rdA-maprail{
  position:sticky; top:90px;
  height:calc(100vh - 120px); min-height:520px;
  margin:0; padding:0;
  border:1px solid var(--rd-line,#e3eae7); border-radius:var(--rd-r,14px);
  overflow:hidden;
  box-shadow:0 8px 22px -16px rgba(16,40,38,.30);
}

/* ---- 7e. the real Leaflet map fills the rail ----------------------------- */
#rda-map{
  width:100%; height:100%; min-height:500px;
  border-radius:var(--rd-r,14px);
  overflow:hidden;
  background:#dbeae2;   /* soft tile placeholder while map loads */
}
/* keep Leaflet panes/controls visible inside the rounded, clipped rail */
.rightcontent .maprail.rdA-maprail .leaflet-container{ background:#dbeae2; font:inherit; }
.rightcontent .maprail.rdA-maprail .map-badge{ z-index:600; }   /* above leaflet panes */

/* ---- 7f. price pins (Leaflet divIcon .mappin) ---------------------------- */
/* Leaflet's .leaflet-div-icon default = white box + grey border → reset it,
   then style our own green price pill. */
.leaflet-div-icon.mappin,
.mappin{ background:transparent !important; border:0 !important; }
/* mockup .pin b — WHITE price pill, navy text, white pointer tail */
.mappin b{
  display:inline-flex; align-items:center; gap:4px;
  background:#fff; color:var(--rd-navy,#003244);
  font-family:var(--rd-display,'Roboto',sans-serif); font-weight:800; font-size:13px;
  line-height:1; white-space:nowrap;
  padding:6px 11px; border-radius:999px;
  border:1.5px solid #fff;
  box-shadow:0 6px 18px rgba(16,40,38,.20);
  transform:translate(-50%,-100%);
  position:relative;
}
.mappin b::after{
  content:""; position:absolute; left:50%; top:100%;
  transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#fff;
}
/* bookable place → green pill (mockup .pin.book) */
.mappin--book b{ background:var(--rd-green,#00A057); color:#fff; }
.mappin--book b::after{ border-top-color:var(--rd-green,#00A057); }
/* a pin with no price → small round white dot with green ring */
.mappin--nolabel b{ padding:0; width:13px; height:13px; border-radius:50%; background:#fff; border:2px solid var(--rd-green,#00A057); }
.mappin--nolabel b::after{ display:none; }

/* map popup → on-brand */
.leaflet-popup-content .rda-pop strong{
  display:block; font-family:var(--rd-display,'Roboto',sans-serif);
  font-weight:800; font-size:14px; color:var(--rd-navy,#0b2e30); margin-bottom:3px;
}
.leaflet-popup-content .rda-pop .rda-pop-price{
  font-size:12.5px; color:var(--rd-muted,#5f6b69); margin-bottom:6px;
}
.leaflet-popup-content .rda-pop .rda-pop-link{
  display:inline-block; color:#fff !important; background:#00A057;
  font-family:var(--rd-display,'Roboto',sans-serif); font-weight:700; font-size:12.5px;
  padding:6px 12px; border-radius:999px; text-decoration:none !important;
}
.leaflet-popup-content .rda-pop .rda-pop-link:hover{ background:#00713e; }

/* ---- 7g. responsive: stack to one column, map becomes a normal block -----
   The mockup base (redesign-mockup.css) collapses .lbody to 1 column and hides
   .maprail at <=1080px. Match that SAME breakpoint here so there is no empty
   380px gap between 901-1080px, and re-show the REAL Leaflet map as a full-width
   block below the cards (so mobile/tablet users still get the map). */
@media (max-width:1080px){
  .rightcontent .lbody.lgrid{ grid-template-columns:1fr; }
  .rightcontent .maprail.rdA-maprail{
    display:block !important;
    /* position:relative (not static) so the absolutely-positioned .map-badge
       ("Karte · N Plätze") anchors to the map here, not the page top (where it
       was overlapping the breadcrumb). */
    position:relative; height:360px; min-height:0;
    margin-top:8px;
  }
  #rda-map{ min-height:360px; height:360px; }
}

/* ---- 8. GREEN-THEME CLUSTERS (Leaflet.markercluster defaults are green/
   yellow/orange and clash with Konzept A; force the green palette). --------- */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large{ background:rgba(0,160,87,.20) !important; }
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div{
  background:#00A057 !important; color:#fff !important;
  font-family:var(--rd-display, system-ui) !important; font-weight:800 !important;
  box-shadow:0 4px 12px -4px rgba(0,50,68,.5);
}
.marker-cluster span{ line-height:30px; }

/* ---- 9. AJAX FILTER LOADING STATE (results dim + spinner while fetching) --- */
.rdA-results.rda-loading{ position:relative; opacity:.45; pointer-events:none; transition:opacity .15s ease; min-height:240px; }
.rdA-results.rda-loading::after{
  content:""; position:absolute; left:50%; top:60px; width:36px; height:36px; margin-left:-18px;
  border:3px solid rgba(0,160,87,.25); border-top-color:#00A057; border-radius:50%;
  animation:rda-spin .7s linear infinite; z-index:5;
}
@keyframes rda-spin{ to{ transform:rotate(360deg); } }
/* chip waiting for its AJAX round-trip */
.fbtn.is-loading{ opacity:.7; }

/* ---- 10. SORT control inside the filter bar (mockup .fbar-right .sel) -------
   The real sort <select> now lives in .fbar-right next to the Karte button. */
.rdA-sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.rightcontent .fbar-right .rdA-sort{ flex:0 0 auto; margin:0; }
.rightcontent .fbar-right .rdA-sort select{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--rd-line,#e7eef0); background-color:#fff; color:var(--rd-navy,#003244);
  font-family:var(--rd-display,'Roboto',sans-serif); font-weight:700; font-size:13px; line-height:1;
  border-radius:999px; padding:9px 32px 9px 15px; min-height:40px; cursor:pointer; max-width:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7b82' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.rightcontent .fbar-right .rdA-sort select:hover{ border-color:var(--rd-green,#00A057); }
/* mockup hides the sort on mobile — only the Karte button stays in .fbar-right */
@media(max-width:760px){ .rightcontent .fbar-right .rdA-sort{ display:none; } }