/* Redesign „Konzept A" — DETAIL page (hotel_description.content.php). Owned by the detail subagent.
   Loads after redesign-a.css (which defines the --rd-* tokens + hero/gallery styles). */

/* ============================================================================
   KONZEPT-A DETAIL LAYOUT — 2-column body + sticky Anfrage sidebar
   The PHP now emits:  .rdA-dbody  >  .rdA-dmain (LEFT, #roominfo_section)
                                   +  aside.rdA-daside  >  .book (RIGHT, sticky)
   Each LEFT block is a `.dsection` card; visual order is set with flex `order`
   so the grouped 77-facility list sits right under the 14 icon row (Ausstattung),
   even though it lives later in the DOM.
   ============================================================================ */

/* hero stays full-width above the 2-col body */
.rdA-hero{ width:100%; float:none; padding:0; }
.rdA-hero-inner{ width:100%; }

/* 2-column grid: main content + 372px sticky rail (mirrors mockup .dbody) */
.rdA-dbody{
  display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:46px;
  width:100% !important; float:none !important;
  padding:30px 0 20px; align-items:start; clear:both;
}
.rdA-dmain{ min-width:0; display:flex; flex-direction:column; }
#roominfo_section.roominfo_section{
  width:100% !important; float:none !important; padding:0 !important;
  display:flex; flex-direction:column;
}
.rdA-daside{ min-width:0; }

/* visual order of the LEFT sections (DOM order differs — flex order fixes it) */
.rdA-welcome        { order:1; }
.rdA-amen-section   { order:2; }   /* Ausstattung — 14 icon row */
.rdA-faclist-section{ order:3; }   /* Ausstattung — komplette gruppierte Liste */
.rdA-rooms-section  { order:4; }   /* Stellplatz-Typen & Preise */
.rdA-reviews-section{ order:5; }   /* Bewertungen */
.rdA-policies-section{ order:6; }  /* Lage & Regeln */
.rdA-anfrage-section{ order:7; }   /* Platz anfragen */

/* generic Konzept-A section card spacing + headings (mockup .dsection) */
.rdA-dmain .dsection{
  padding:26px 0; border-bottom:1px solid var(--rd-line);
  background:none; box-shadow:none; border-radius:0; margin:0; overflow:visible;
}
.rdA-dmain .dsection:first-child,
.rdA-welcome{ padding-top:0; }
.rdA-anfrage-section{ border-bottom:0; }
.rdA-dmain .dsection > h2{
  font-family:var(--rd-display); font-weight:800;
  font-size:clamp(20px,2.6vw,24px); color:var(--rd-navy);
  letter-spacing:-.01em; line-height:1.15; margin:0 0 6px;
}
/* the legacy inner <h3> of each wrapped block is now redundant (the .dsection h2
   provides the heading) — hide the duplicates so the list/table reads cleanly */
.rdA-faclist-section #facilities_section > .hpadding20 > h3,
.rdA-rooms-section   #hotel-payment_section h3,
.rdA-rooms-section   #hotel-attributes_section h3{
  font-family:var(--rd-display); font-weight:800; color:var(--rd-navy);
  font-size:17px; margin:18px 0 10px;
}
.rdA-faclist-section #facilities_section > .hpadding20 > h3{ display:none; }
/* drop the bootstrap padding wrappers inside the now-flat dsection cards */
.rdA-dmain .hpadding20{ padding:0 !important; }
.rdA-dmain .line2{ display:none; }
.rdA-dmain .clearfix{ clear:both; }
/* the welcome intro description */
.rdA-welcome .summary.lead{
  color:var(--rd-muted); font-size:15.5px; line-height:1.65; margin-top:10px;
}
.rdA-welcome .summary.lead p{ margin:0 0 10px; }

/* highlight tiles (mockup .high / .high-item) */
.high{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.high-item{ display:flex; gap:12px; align-items:flex-start; }
.high-ic{
  width:40px; height:40px; border-radius:11px; flex:0 0 auto;
  background:var(--rd-green-50); color:var(--rd-green-700);
  display:flex; align-items:center; justify-content:center;
}
.high-item b{ display:block; font-family:var(--rd-display); font-size:14.5px; color:var(--rd-navy); line-height:1.25; }
.high-item span{ font-size:13px; color:var(--rd-muted); }

/* ===== RIGHT sticky booking sidebar (mockup .book) ===== */
.rdA-daside .book{
  position:sticky; top:90px;
  background:#fff; border:1px solid var(--rd-line); border-radius:var(--rd-r);
  box-shadow:0 18px 40px -22px rgba(0,160,87,.40); padding:20px;
}
.book-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--rd-display); font-weight:700; font-size:12px;
  border-radius:8px; padding:5px 11px; margin-bottom:12px;
  background:var(--rd-bg-soft); color:var(--rd-muted); border:1px solid var(--rd-line);
}
.book-price{ display:flex; align-items:baseline; gap:8px; }
.book-price .amt{ font-family:var(--rd-display); font-size:26px; font-weight:800; color:var(--rd-navy); }
.book-price small{ color:var(--rd-muted); font-size:14px; }
.book-rate{ font-size:13px; color:var(--rd-muted); margin:8px 0 15px; line-height:1.45; }
.book-rate b{ color:var(--rd-navy); }
.rdA-daside .book .btn,
.rdA-daside .book .btn-block{ width:100%; margin-top:4px; }
.book-note{
  text-align:center; font-size:12.5px; color:var(--rd-muted);
  margin-top:11px; display:flex; gap:6px; align-items:center; justify-content:center;
}
.book-sum{
  margin-top:15px; padding-top:15px; border-top:1px solid var(--rd-line);
  display:grid; gap:9px; font-size:13px;
}
.book-sum div{ display:flex; gap:9px; align-items:flex-start; color:var(--rd-ink); }
.book-sum .ti{ color:var(--rd-green); flex:0 0 auto; margin-top:2px; }

/* ============================================================================
   (REMOVED) The teal camping.care «.cc» sidebar widget — gone entirely. Bookable
   places now use the SAME .book sidebar box + the same body "Zelt- & Standplätze"
   room list as Anfrage places; the only difference is the per-row "Buchen" CTA
   (the real native reserve form, restyled below) and the .book CTA "Jetzt buchen".
   ============================================================================ */

/* bookable .book box — green "Sofort buchbar" badge + green "Jetzt buchen" CTA */
.book-badge.book-badge--book{
  background:var(--rd-green-50); color:var(--rd-green-700); border-color:var(--rd-green-100,#cdeeda);
}

/* ===== responsive: collapse to single column, sidebar becomes static ===== */
@media(max-width:1080px){
  .rdA-dbody{ grid-template-columns:1fr; gap:0; }
  .rdA-daside{ margin-top:8px; }
  .rdA-daside .book{ position:static; }
}

/* --- 14 favorite-facility icons → carded grid (active=green, inactive=greyed) --- */
#hotel_fav_facilities{ display:grid !important; grid-template-columns:repeat(7,1fr); gap:12px; margin:8px 0 12px; }
#hotel_fav_facilities svg{ width:100% !important; height:auto !important; aspect-ratio:1/1; padding:14px; border:1px solid var(--rd-line); border-radius:14px; background:#fff; box-sizing:border-box; }
#hotel_fav_facilities svg.favorites_facilities_icons_active path{ fill:var(--rd-green) !important; }
#hotel_fav_facilities svg.favorites_facilities_icons_inactive{ opacity:.45; }
#hotel_fav_facilities svg.favorites_facilities_icons_inactive path{ fill:#bcc7cc !important; }
@media(max-width:760px){ #hotel_fav_facilities{ grid-template-columns:repeat(4,1fr); } }

/* ============================================================================
   KONZEPT-A DETAIL SECTIONS — legacy "*_section" blocks now sit FLAT inside the
   new `.dsection` cards (the .dsection supplies the card separation), so the old
   per-block card chrome (border / shadow / margin) is neutralised here. The inner
   table / fac_box / ul.facilities_ul / contact-table styling further down is kept.
   ========================================================================== */
#hotel-payment_section,
#hotel-attributes_section,
#facilities_section,
#hotel-policies_section,
#needassistancebox{
  background:none; border:0; border-radius:0; box-shadow:none;
  margin:0; overflow:visible;
}
/* the legacy .line2 separators between these blocks are redundant */
#roominfo_section .line2{ display:none; }
/* the bootstrap padding wrapper collapses — the .dsection owns the spacing */
#hotel-payment_section > .hpadding20,
#hotel-attributes_section > .hpadding20,
#facilities_section > .hpadding20,
#hotel-policies_section > .hpadding20,
#needassistancebox > .hpadding20{
  padding:0;
}
/* The contact section's native wrapper (#needassistancebox > .hpadding20) is a flex ROW
   (form | contact-info) that squishes the .aform to 0 width whenever it's NOT in the desktop
   rail (i.e. on mobile / main-flow) → "the contact form can't be shown". Force a block stack
   EVERYWHERE so the form fields are always full-width + visible. */
.rdA-anfrage-section #needassistancebox > .hpadding20{ display:block !important; }
.rdA-anfrage-section #anfrage_section{ width:auto !important; float:none !important; }
.rdA-anfrage-section .camping_contact_infos{ width:auto !important; float:none !important; margin-top:16px; }
/* redesign-mockup.css hides #anfrage .aform on mobile behind an .aform-trigger button — but
   the redesign re-skins the NATIVE form, which has no such trigger, so the form ended up fully
   hidden ("contact form can't be shown" on mobile). Always show it; hide the absent trigger. */
@media(max-width:760px){
  #anfrage .aform{ display:block !important; }
  #anfrage .aform-trigger{ display:none !important; }
}

/* ---------------------------------------------------------------------------
   TASK 2 — Hotel attributes ("Charakter"): table rows → Konzept-A fact grid
   Legacy: <table width=100%> of <tr><td><b>Label:</b></td><td>Value</td></tr>
   We turn the table into a responsive 2-col grid of fact rows.
   --------------------------------------------------------------------------- */
#hotel-attributes_section table{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 18px;
  width:100% !important; border-collapse:collapse;
}
#hotel-attributes_section table tr{
  display:flex; align-items:flex-start; gap:8px;
  background:var(--rd-bg-soft); border:1px solid var(--rd-line);
  border-radius:var(--rd-r-sm); padding:12px 14px;
}
/* hide the duplicated mobile-only stacked label/value rows on desktop card view
   (Bootstrap visible-xs/visible-sm rows are the phone duplicates of the
   visible-md/visible-lg desktop rows). Re-show on mobile in the media query. */
#hotel-attributes_section table tr.visible-xs,
#hotel-attributes_section table tr.visible-sm{ display:none; }
#hotel-attributes_section table td{
  padding:0; border:0; font-size:14px; color:var(--rd-ink); line-height:1.35;
}
#hotel-attributes_section table td:first-child{
  flex:0 0 auto; width:auto !important; color:var(--rd-muted);
}
#hotel-attributes_section table td:last-child{
  margin-left:auto; text-align:right; font-weight:700; color:var(--rd-navy);
  font-family:var(--rd-display);
}
#hotel-attributes_section table td b{ color:var(--rd-muted); font-weight:600; }

/* ---------------------------------------------------------------------------
   TASK 3 — Person prices + payment: season price table → Konzept-A table
   Legacy: plain <table width=100%> with .pricetable / .pricetable_date_season
   rows. We give it a green header row, zebra rows, right-aligned numbers, and
   tidy the payment icon row.
   --------------------------------------------------------------------------- */
#hotel-payment_section table{
  width:100% !important; border-collapse:separate; border-spacing:0;
  border:1px solid var(--rd-line); border-radius:var(--rd-r-sm); overflow:hidden;
  font-size:14.5px;
}
#hotel-payment_section table td{
  padding:11px 14px; border-bottom:1px solid var(--rd-line);
  color:var(--rd-ink); vertical-align:middle;
}
/* season header (Vor-/Hauptsaison) → green header row */
#hotel-payment_section tr.pricetable_date_season:first-child td{
  background:var(--rd-green); color:#fff; font-family:var(--rd-display);
  font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:12.5px;
}
#hotel-payment_section tr.pricetable_date_season:first-child td b{ color:#fff; }
/* opening-hours sub-row */
#hotel-payment_section tr.pricetable_date_season:not(:first-child) td{
  background:var(--rd-green-50); color:var(--rd-navy);
}
#hotel-payment_section tr.pricetable_date_season:not(:first-child) td b{ color:var(--rd-navy); }
/* zebra body rows */
#hotel-payment_section tr.odd td{ background:#fafdfb; }
#hotel-payment_section tr.pricetable:hover td{ background:var(--rd-green-50); }
/* label cell vs number cells */
#hotel-payment_section tr.pricetable td:first-child,
#hotel-payment_section tr.odd td:first-child{ color:var(--rd-muted); }
#hotel-payment_section tr.pricetable td:first-child b,
#hotel-payment_section tr.odd td:first-child b{ color:var(--rd-navy); font-weight:600; }
#hotel-payment_section tr.pricetable td:not(:first-child),
#hotel-payment_section tr.odd td:not(:first-child){
  text-align:right; font-family:var(--rd-display); font-weight:700; color:var(--rd-navy);
}
/* payment-method row: icons in a tidy wrapped row */
#hotel-payment_section tr td[colspan="2"]{ text-align:right; }
#hotel-payment_section tr td[colspan="2"] img{
  height:30px !important; width:auto; vertical-align:middle;
  margin:2px 0 2px 8px !important; padding:4px 6px;
  border:1px solid var(--rd-line); border-radius:8px; background:#fff;
}
#hotel-payment_section table tr:last-child td{ border-bottom:0; }

/* ---------------------------------------------------------------------------
   TASK 1 — Grouped "77 facilities" list: fac_box categories → Konzept-A
   categorized list. Legacy per category:
     <div class="fac_box"><h4>[svg.facilities_icons] TITLE</h4>
        <ul class="facilities_ul"><li>[svg.listicon] Name</li>…</ul></div>
   Layout: each category = green uppercase heading; the <li>s a 2-col grid with
   green ✓ bullets (mirrors .amen-cat / .amen-cat li::before in the mockup).
   --------------------------------------------------------------------------- */
.fac_box{ padding:16px 0; border-top:1px solid var(--rd-line); }
.fac_box:first-of-type{ border-top:0; padding-top:4px; }
.fac_box h4{
  display:flex; align-items:center; gap:9px;
  font-family:var(--rd-display); font-weight:700; font-size:13.5px;
  text-transform:uppercase; letter-spacing:.03em; color:var(--rd-green-700);
  margin:0 0 11px;
}
/* the legacy category SVG icon → small green-tinted square chip */
.fac_box h4 svg.facilities_icons{
  width:30px; height:30px; flex:0 0 auto; padding:5px; box-sizing:border-box;
  background:var(--rd-green-50); border-radius:8px;
}
.fac_box h4 svg.facilities_icons path{ fill:var(--rd-green-700) !important; }
ul.facilities_ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:6px 22px;
}
ul.facilities_ul li{
  position:relative; padding:4px 0 4px 24px;
  font-size:13.5px; line-height:1.35; color:var(--rd-ink);
}
/* hide the empty legacy list icon, draw a green ✓ instead */
ul.facilities_ul li svg.listicon{ display:none; }
ul.facilities_ul li::before{
  content:"✓"; position:absolute; left:0; top:3px;
  color:var(--rd-green); font-weight:800; font-family:var(--rd-display);
}

/* ---------------------------------------------------------------------------
   TASK 4 — Anfrage / contact form ("Platz anfragen"): legacy
   <form id="contact"><table class="contact_form_table"> of label/input rows.
   We restyle the table into rounded inputs/selects with a green full-width
   submit. Form id + every field name/id + datepicker hooks + sendContact()
   are untouched (CSS-only).
   --------------------------------------------------------------------------- */
#needassistancebox{ }
#needassistancebox > .hpadding20{ display:flex; flex-wrap:wrap; gap:30px 40px; align-items:flex-start; }
#anfrage_section{
  flex:1 1 420px; width:auto !important; float:none !important;
  padding:0 !important; min-width:0;
}
.contact_form_table{ width:100%; border-collapse:collapse; }
/* each row = a labelled field block; the two <td>s stack (label over input) */
.contact_form_table tr{ display:block; margin-bottom:14px; }
.contact_form_table td{
  display:block; padding:0; border:0; vertical-align:top;
}
.contact_form_table td:first-child{ margin-bottom:6px; }
.contact_form_table label{
  font-family:var(--rd-display); font-size:12.5px; font-weight:700; color:var(--rd-navy);
}
.contact_form_table input[type=text],
.contact_form_table input[type=email],
.contact_form_table input:not([type=button]):not([type=submit]),
.contact_form_table select,
.contact_form_table textarea{
  width:100%; box-sizing:border-box; font-family:var(--rd-text);
  font-size:15px; color:var(--rd-ink); background:#fff;
  border:1.5px solid var(--rd-line) !important; border-radius:10px !important;
  padding:11px 13px; min-height:46px; -webkit-appearance:none; appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.contact_form_table select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236b7b82' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; padding-right:34px;
}
.contact_form_table textarea{ min-height:104px; resize:vertical; line-height:1.5; }
.contact_form_table input:focus,
.contact_form_table select:focus,
.contact_form_table textarea:focus{
  outline:0; border-color:var(--rd-green) !important; box-shadow:0 0 0 3px var(--rd-green-50);
}
/* full-width green submit */
.contact_form_table .button-availability.formsendbuttonclick,
.contact_form_table input[type=button].formsendbuttonclick{
  float:none !important; width:100% !important; cursor:pointer;
  background:var(--rd-green) !important; color:#fff !important;
  border:0 !important; border-radius:999px !important;
  font-family:var(--rd-display); font-weight:700; font-size:15.5px;
  padding:14px 24px; min-height:50px; letter-spacing:.01em;
  transition:background .15s ease, transform .12s ease;
}
.contact_form_table .button-availability.formsendbuttonclick:hover,
.contact_form_table input[type=button].formsendbuttonclick:hover{
  background:var(--rd-green-700) !important; transform:translateY(-1px);
}
#form-required{ color:var(--rd-muted); }
/* contact details column → Konzept-A info card */
.camping_contact_infos{
  flex:1 1 300px; width:auto !important; float:none !important;
  padding:18px 20px !important; min-width:0;
  background:var(--rd-bg-soft); border:1px solid var(--rd-line); border-radius:var(--rd-r);
}
.camping_contact_infos h3{ margin-top:0; }
.camping_contact_infos a{ color:var(--rd-green); }
.camping_contact_infos a:hover{ color:var(--rd-green-700); }

/* (Legacy .detailsright sidebar — newsletter / Yescapa / reservation-form-side —
   was DELETED from the markup, so its old styling rules were removed too.) */

/* ---------------------------------------------------------------------------
   Responsive — collapse the multi-column section grids on narrow screens
   --------------------------------------------------------------------------- */
@media(max-width:760px){
  #hotel-attributes_section table,
  ul.facilities_ul{ grid-template-columns:1fr; }
  /* keep using the complete desktop rows even on mobile (they hold every
     attribute), so the data never duplicates inside the single card */
  #hotel-attributes_section table tr.visible-md,
  #hotel-attributes_section table tr.visible-lg{ display:flex !important; }
  #hotel-payment_section > .hpadding20,
  #hotel-attributes_section > .hpadding20,
  #facilities_section > .hpadding20,
  #needassistancebox > .hpadding20{ padding:18px 16px; }
  #needassistancebox > .hpadding20{ flex-direction:column; gap:24px; }
}

/* hide the legacy "Jetzt entdecken" bestseller ribbon that lands as a grid cell in the gallery (not in the mockup) */
.gal .custom_bestseller,.gal .rdA-ribbon{ display:none !important; }
/* photos beyond the first 5 are rendered (so the lightbox can show ALL "Alle X Fotos") but kept out
   of the visible mosaic / mobile scroller — the lightbox reads their <a href> regardless. */
.gal .gal-extra{ display:none !important; }

/* detail meta line (rating + location) mixed-case like the mockup (legacy forced uppercase) */
.dmeta,.dmeta *{ text-transform:none !important; }

/* ===== "Zelt- & Standplätze" room/pitch list (real DB room types, Konzept A) =====
   photo + name + short-desc + price + CTA. Photo & title open the room overlay
   (Mehr Infos). CTA = "Auf Anfrage" (#anfrage) OR the real native "Buchen" form. */
.rdA-roomlist{ margin-top:16px; display:flex; flex-direction:column; }
.rdA-room{
  display:grid; grid-template-columns:220px 1fr auto; gap:20px; align-items:center;
  padding:16px 0; border-top:1px solid var(--rd-line,#e6ece9);
}
.rdA-room:first-child{ border-top:0; }
.rdA-room-img{ width:220px; height:140px; border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg,#0a7d57,#04323f); flex:0 0 auto; position:relative; }
.rdA-room-img[role="button"]{ cursor:zoom-in; }
.rdA-room-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.rdA-room-img[role="button"]:hover img{ transform:scale(1.05); }
.rdA-room-img--empty img{ display:none; }
.rdA-room-img--empty[role="button"]{ cursor:pointer; } /* placeholder still opens the info overlay */
.rdA-room-info h3{ font-family:var(--rd-display,system-ui); font-weight:800; font-size:18px;
  color:var(--rd-green-700,#00713e); margin:0 0 4px; }
.rdA-room-title{ cursor:pointer; }
.rdA-room-title:hover{ color:var(--rd-green,#00a057); text-decoration:underline; }
.rdA-room-short{ color:var(--rd-muted,#5d7177); font-size:14.5px; margin:0; }
/* "Mehr Infos" -> overlay (replaces the old inline <details>) */
.rdA-room-more-btn{ margin-top:8px; cursor:pointer; background:none; border:0; padding:0;
  color:var(--rd-green-700,#00713e); font-family:var(--rd-display,inherit); font-weight:600; font-size:13.5px;
  display:inline-flex; align-items:center; gap:5px; }
.rdA-room-more-btn:hover{ color:var(--rd-green,#00a057); }
.rdA-room-more-btn svg{ transition:transform .15s ease; }
.rdA-room-more-btn:hover svg{ transform:translateX(3px); }
.rdA-room-data{ display:none; }
.rdA-room-act{ text-align:right; min-width:170px; }
.rdA-room-price{ font-family:var(--rd-display,system-ui); font-weight:800; font-size:18px;
  color:var(--rd-navy,#003244); white-space:nowrap; }
.rdA-room-price small{ font-size:12.5px; font-weight:500; color:var(--rd-muted,#5d7177); }
.rdA-room-btn{ margin-top:12px; min-height:44px; padding:11px 22px; text-decoration:none; }

/* native reserve form embedded per bookable room row -> restyle to Konzept-A "Buchen".
   IMPORTANT: the native reserve <select> + submit button live INSIDE .room-wrapper, so we
   must NOT hide .room-wrapper (that buried the whole form). We hide only the media/description
   noise and the qty-select wrapper, then reset the bootstrap row/col chrome to a clean block,
   leaving a single full-width green "Buchen" button — matching the "Auf Anfrage" simplicity. */
.rdA-room-bookform{ margin-top:12px; }
.rdA-room-bookform .images-info,
.rdA-room-bookform .modal,
.rdA-room-bookform .summary,
.rdA-room-bookform .mobile-button-expand,
.rdA-room-bookform .images,
.rdA-room-bookform .info,
.rdA-room-bookform .longdescription,
.rdA-room-bookform .price_details,
.rdA-room-bookform .roomtitle,
.rdA-room-bookform .available-rooms,
.rdA-room-bookform .check-availability,
.rdA-room-bookform .lightbox-slider,
.rdA-room-bookform .av_rooms_details{ display:none !important; }   /* hide qty select -> clean single Buchen */
/* neutralise the bootstrap row/col negative margins so the action sits flush full-width */
.rdA-room-bookform .room-wrapper,
.rdA-room-bookform .room-wrapper.row,
.rdA-room-bookform .eachroomdiv,
.rdA-room-bookform .toplayerwithfloats{ display:block !important; float:none !important; margin:0 !important; width:100% !important; }
.rdA-room-bookform .booking_btn_details,
.rdA-room-bookform .action{ display:block !important; float:none !important; width:100% !important;
  padding:0 !important; margin:0 !important;
  /* the native .booking_btn_details is position:absolute → the green "Jetzt buchen"
     button floated UP over the price. Force it back into normal flow (below the price). */
  position:static !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; }
/* the available_rooms select stays in the DOM (submits its default "N-PRICE" value) but hidden */
.rdA-room-bookform .available_rooms_ddl,
.rdA-room-bookform select.available_rooms_ddl{ display:none !important; }
/* the reserve submit -> green Konzept-A "Buchen" button (same shape as "Auf Anfrage") */
.rdA-room-bookform .form_button_middle,
.rdA-room-bookform input[type="submit"],
.rdA-room-bookform button[type="submit"],
.rdA-room-bookform input[type="button"].form_button_middle{
  width:100% !important; cursor:pointer; -webkit-appearance:none; appearance:none;
  background:var(--rd-green,#00a057) !important; color:#fff !important; border:0 !important;
  font-family:var(--rd-display,inherit); font-weight:700; font-size:15px; border-radius:999px !important;
  padding:12px 22px !important; min-height:44px; box-shadow:none !important; line-height:1.1; text-align:center;
  transition:background .15s ease, transform .12s ease; }
.rdA-room-bookform .form_button_middle:hover,
.rdA-room-bookform input[type="submit"]:hover,
.rdA-room-bookform button[type="submit"]:hover{ background:var(--rd-green-700,#00713e) !important; transform:translateY(-1px); }
.rdA-room-bookform .form_button_middle.red{ background:#c0392b !important; }
.rdA-room-bookform .clearfix{ clear:both; }

@media(max-width:720px){
  .rdA-room{ grid-template-columns:1fr; }
  .rdA-room-img{ width:100%; height:170px; }
  .rdA-room-act{ text-align:left; min-width:0; }
  .rdA-room-btn{ margin-top:0; }
  .rdA-room-bookform{ margin-top:10px; }
}

/* ============================================================================
   GALLERY LIGHTBOX + ROOM "MEHR INFOS" OVERLAY (shared shell) — redesign-detail.js
   ============================================================================ */
html.rdA-lb-lock{ overflow:hidden; }
.rdA-lb{
  position:fixed; inset:0; z-index:99999; display:none;
  background:rgba(6,18,14,.92); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; padding:24px;
}
.rdA-lb.open{ display:flex; animation:rdA-lb-fade .18s ease; }
@keyframes rdA-lb-fade{ from{ opacity:0; } to{ opacity:1; } }
.rdA-lb-stage{
  max-width:1100px; max-height:88vh; width:100%; display:flex;
  align-items:center; justify-content:center;
}
.rdA-lb-img{
  max-width:100%; max-height:88vh; width:auto; height:auto; display:block;
  border-radius:12px; box-shadow:0 24px 70px -20px rgba(0,0,0,.7); object-fit:contain;
}
/* close + nav buttons */
.rdA-lb-close,.rdA-lb-nav{
  position:absolute; z-index:2; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  -webkit-appearance:none; appearance:none; transition:background .15s ease, transform .12s ease;
}
.rdA-lb-close{ top:18px; right:18px; width:46px; height:46px; }
.rdA-lb-nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; }
.rdA-lb-prev{ left:18px; }
.rdA-lb-next{ right:18px; }
.rdA-lb-close:hover,.rdA-lb-nav:hover{ background:rgba(255,255,255,.26); }
.rdA-lb-nav:hover{ transform:translateY(-50%) scale(1.05); }
.rdA-lb-cap{
  position:absolute; bottom:20px; left:0; right:0; text-align:center;
  color:#fff; font-family:var(--rd-display,system-ui); font-weight:700; font-size:14px;
  letter-spacing:.03em; text-shadow:0 1px 4px rgba(0,0,0,.6);
}
/* room (info) mode — image + title + full long description */
.rdA-lb-info{
  background:#fff; border-radius:16px; max-width:760px; width:100%; max-height:88vh;
  overflow:auto; box-shadow:0 24px 70px -20px rgba(0,0,0,.7); text-align:left;
}
.rdA-lb-info-img{ width:100%; max-height:340px; overflow:hidden; background:#0a322d; }
.rdA-lb-info-img img{ width:100%; height:100%; max-height:340px; object-fit:cover; display:block; }
.rdA-lb-info-body{ padding:24px 28px 28px; }
.rdA-lb-info-body h3{ font-family:var(--rd-display,system-ui); font-weight:800; font-size:24px;
  color:var(--rd-navy,#003244); margin:0 0 12px; line-height:1.2; }
.rdA-lb-info-long{ color:var(--rd-ink,#14282f); font-size:15px; line-height:1.65; }
.rdA-lb-info-long p{ margin:0 0 10px; }

@media(max-width:760px){
  .rdA-lb{ padding:0; }
  .rdA-lb-img{ border-radius:0; max-height:100vh; }
  .rdA-lb-stage{ max-height:100vh; }
  .rdA-lb-close{ top:12px; right:12px; width:42px; height:42px; }
  .rdA-lb-nav{ width:44px; height:44px; }
  .rdA-lb-prev{ left:8px; }
  .rdA-lb-next{ right:8px; }
  .rdA-lb-info{ border-radius:0; max-height:100vh; }
  .rdA-lb-info-body{ padding:20px 18px 26px; }
  .rdA-lb-info-body h3{ font-size:20px; }
}

/* ===== mobile: the "Ähnliche Plätze" related .grid kept 2+ columns (~180px cards)
   on phones and pushed past the viewport (~22px overflow). Collapse to one column. ===== */
@media(max-width:600px){
  .dpage .grid{ grid-template-columns:1fr !important; }
}

/* ===== Taxen table (2 seasons: Nebensaison + Hauptsaison) — like the original ===== */
.rdA-taxen{ table-layout:fixed; }
.rdA-taxen th, .rdA-taxen td,
.rdA-taxen th.num, .rdA-taxen td.num{ text-align:left !important; vertical-align:middle; }
.rdA-taxen thead th{ font-weight:700; color:var(--rd-muted,#5d7177); }
.rdA-taxen th:first-child, .rdA-taxen td:first-child{ width:34%; font-weight:600; color:var(--rd-navy,#003244); font-family:var(--rd-text,inherit); }
.rdA-taxen tbody td{ color:var(--rd-ink,#14282f); font-weight:500; }
.rdA-taxen tbody tr:nth-child(odd){ background:var(--rd-bg-soft,#f4f8f5); }
.rdA-taxen td, .rdA-taxen th{ padding:13px 14px; }
.rdA-taxen img{ display:inline-block; }
@media(max-width:720px){ .rdA-taxen th:first-child, .rdA-taxen td:first-child{ width:40%; } .rdA-taxen td, .rdA-taxen th{ padding:11px 8px; font-size:13.5px; } }

/* ===== (46) Öffnungszeiten + Zusatzkosten free-text notes below the Taxen table ===== */
.rdA-taxen-notes{ margin-top:14px; font-size:14px; line-height:1.6; color:var(--rd-ink,#14282f); }
.rdA-taxen-notes strong, .rdA-taxen-notes b{ font-weight:700; color:var(--rd-navy,#003244); }
.rdA-taxen-notes p{ margin:0 0 8px; }
.rdA-taxen-notes p:last-child{ margin-bottom:0; }

/* ===== (47) "Platz anfragen" form in the RIGHT rail on desktop (moved by redesign-detail.js) =====
   The form is re-parented into aside.rdA-daside; collapse the .aform 6-col grid to a single
   column so it reads in the ~340px rail, and strip the left-column section chrome. */
@media(min-width:1081px){
  body.rdA-anfrage-in-rail .rdA-dbody{ align-items:start; }
  /* With the form moved BELOW the booking box in the same rail, a sticky .book would
     stick and the form scrolls UNDER it (content-overlaps-form bug). Make it static so
     .book + form scroll together as one column. */
  body.rdA-anfrage-in-rail .rdA-daside .book{ position:static !important; }
  .rdA-daside .rdA-anfrage-section{ order:0; margin:18px 0 0; padding:0; border:0; }
  .rdA-daside .rdA-anfrage-section > #needassistancebox{ background:none; border:0; box-shadow:none; margin:0; padding:0; }
  .rdA-daside #needassistancebox > .hpadding20{ display:block; padding:0; }
  .rdA-daside #anfrage_section{ width:auto !important; float:none !important; padding:0; margin:0 0 16px; }
  .rdA-daside .rdA-anfrage-section h2{ font-size:20px; }
  .rdA-daside .aform-grid{ grid-template-columns:1fr !important; gap:12px; }
  .rdA-daside .aform-grid .ff{ grid-column:auto !important; }
  .rdA-daside .aform-foot{ gap:10px; }
  .rdA-daside .aform-foot .button-availability,
  .rdA-daside .aform .formsendbuttonclick,
  .rdA-daside .aform [type="submit"]{ width:100%; }
  .rdA-daside .camping_contact_infos{ width:auto !important; float:none !important; margin:0;
    background:var(--rd-bg-soft,#f4f8f5); border:1px solid var(--rd-line,#e7eef0);
    border-radius:var(--rd-r-sm,12px); padding:16px 18px; font-size:13.5px; }
  .rdA-daside .camping_contact_infos h3{ margin-top:0; font-size:16px; }
}

/* ============================================================================
   Detail container width = top-nav (.wrap = 1200px) so the outer edges line up.
   The shared mockup sets .dwrap to 1140 → indented vs the header; widen all three
   .dwrap blocks (hero · body · related) to 1200. `.dpage .dwrap` wins on specificity.
   ============================================================================ */
/* the legacy uHB page wrappers (.container = 1170 + .offset-0 left-margin) cap the
   content AND shift it right; on the detail page neutralise them to full width so the
   centered .dwrap (max-width 1200, margin:0 auto) lines its edges up with the header .wrap. */
body.rdA-detail .container.offset-0,
body.rdA-detail .container.pagecontainer{ max-width:none; width:100%; margin-left:0; margin-right:0; padding-left:0; padding-right:0; }
/* the legacy .container.pagecontainer carries a 70px TOP margin (meant to clear the OLD absolute
   header). The redesign detail header is now solid + sticky (in-flow, ~74px), so that margin
   stacked on top → a big empty band between the nav and the breadcrumb/title. Trim it to a small,
   clean gap so the content sits just below the header (request 2026-07-01). */
body.rdA-detail .container.pagecontainer{ margin-top:16px !important; }
.dpage .dwrap{ max-width:1200px; }
/* "Ähnliche Plätze" is a .sec.dwrap, so on DESKTOP it kept .dwrap's clamp(20–44px) side padding
   and its grid sat ~44px indented vs the edge-aligned title/body (.dtop/.dbody override to 0).
   Drop the side padding on desktop only → related cards line up at the same width as the rest.
   Mobile (≤760px) already matches: there the shared `.wrap,.dwrap{padding:0 16px}` gives BOTH the
   body content and this section the same 16px gutter, so leave it untouched below 760px. */
@media(min-width:761px){
  body.rdA-detail .dpage section.sec.dwrap{ padding-left:0; padding-right:0; }
}
/* Mobile (≤760px): `.sec{padding:42px 0}` (loaded after the mobile `.dwrap{padding:0 16px}`) zeroed the
   related section's side padding, so its cards touched the screen edge while the body content kept a 16px
   gutter. Match `.dbody`'s 16px so both line up on mobile too. */
@media(max-width:760px){
  body.rdA-detail .dpage section.sec.dwrap{ padding-left:16px; padding-right:16px; }
}

/* ============================================================================
   "Ähnliche Plätze" cards = SAME layout as the listing page cards
   (.card-media 20/19 + heart · navy title · muted Ort · bold "CHF n / Nacht").
   Flat, borderless, no hover; the whole card is the link.
   ============================================================================ */
.rda-related{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 24px; margin-top:6px; }
.rda-lcard{ display:flex; flex-direction:column; color:var(--rd-navy,#0d2a26); text-decoration:none; cursor:pointer; }
.rda-lcard:hover{ text-decoration:none; }
.rda-lcard-media{ position:relative; aspect-ratio:20/19; border-radius:var(--rd-r,16px); overflow:hidden; background:var(--rd-bg-soft,#eef3f0); }
.rda-lcard-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.rda-lcard-fav{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.9); color:var(--rd-navy,#0d2a26);
  box-shadow:0 1px 4px rgba(0,0,0,.18); }
.rda-lcard-fav.on{ color:#e23744; }
.rda-lcard-fav.on svg{ fill:#e23744; }
.rda-lcard-body{ padding:12px 2px 0; display:flex; flex-direction:column; }
.rda-lcard-title{ font-family:var(--rd-display,inherit); font-weight:700; font-size:15.5px; color:var(--rd-navy,#0d2a26); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rda-lcard-row1{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.rda-lcard-rate{ font-size:13px; font-weight:600; color:var(--rd-navy,#0d2a26); white-space:nowrap; flex:0 0 auto; }
.rda-lcard-rate .revs{ color:var(--rd-muted,#6a7b76); font-weight:400; }
.rda-lcard-meta{ color:var(--rd-muted,#6a7b76); font-size:13.5px; margin-top:3px; line-height:1.4; }
.rda-lcard-amen{ display:flex; align-items:center; gap:9px; margin-top:6px; height:17px; overflow:hidden; color:var(--rd-muted,#6a7b76); }
.rda-lcard-amen svg{ width:15px; height:15px; flex:0 0 auto; }
.rda-lcard-price{ margin-top:8px; font-size:15px; color:var(--rd-navy,#0d2a26); }
.rda-lcard-price b{ font-family:var(--rd-display,inherit); font-weight:800; font-size:16px; }
.rda-lcard-price .unit{ color:var(--rd-muted,#6a7b76); font-weight:400; font-size:13.5px; }
.rda-lcard-price .ask{ color:var(--rd-muted,#6a7b76); font-weight:600; font-size:14px; }
@media(max-width:860px){ .rda-related{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px){ .rda-related{ grid-template-columns:1fr; } }

/* ============================================================================
   /camping/ SEO HUB (page/region.php) renders .camping-hub inside the redesign
   3-col .grid AND the legacy 1170 container → it gets squished to ~375px and shifts
   left. Un-squish (.grid → block) + neutralise the wrappers + center the hub to the
   nav width. Scoped via :has(.camping-hub) so it ONLY affects the hub (this sheet is
   global). This sheet loads after redesign-mockup.css, so it wins on equal specificity.
   ============================================================================ */
.container.offset-0:has(.camping-hub),
.container.pagecontainer:has(.camping-hub),
.rightcontent:has(.camping-hub){ max-width:none; width:100%; float:none; margin-left:0; margin-right:0; padding-left:0; padding-right:0; }
.grid.rdA-grid:has(.camping-hub){ display:block; max-width:none; padding:0; }
/* higher specificity than the hub's own .camping-hub rule so margin:auto actually centers it */
.grid.rdA-grid:has(.camping-hub) > .camping-hub{ max-width:1200px; width:auto; margin-left:auto; margin-right:auto; padding-left:clamp(20px,3.5vw,44px); padding-right:clamp(20px,3.5vw,44px); box-sizing:border-box; }