/* Redesign „Konzept A" — KONTO / Login / Bookings (customer account templates). Owned by the konto subagent.
   Loads after redesign-a.css (which defines the --rd-* tokens).

   Scope: the customer account area rendered from app-root customer/*.php
   (login, create_account, my_account, my_bookings, my_reviews, my_wishlist,
   my_funds, password_forgotten, resend_activation, …). Those PHP files are
   OUTSIDE the editable theme, so everything here is a CSS-only restyle that
   targets the real class/id names those templates emit:
     - card wrapper ............ .center_box_content
     - page heading ............ h1/h2.center_box_heading
     - sub heading ............. h3.center_box_sub_heading > span
     - flash messages .......... .msg.notice / .msg.fail / .msg.success
     - login form .............. form.login-form  (+ .form_button, .form_checkbox)
     - register form ........... #frmRegistration (+ .mandatory_star)
     - edit account ............ #frmEditAccount  (+ .mgrid_text, .required)
     - account MicroGrid ....... .table-responsive.view-mode, .mgrid_*
     - my bookings ............. #divMyBookings, .mybookings_booking_container,
                                 .info.row, .mybookings_booking,
                                 .mybookings_booking_container_status,
                                 .mybookings_booking_actions
   Mirrors _redesign/konzept-a-buchung-konto.html (auth-card + konto dashboard).
   ========================================================================== */

/* ============================================================================
   1. ACCOUNT SHELL — give every customer page a soft page background + width
   ========================================================================== */

/* The account pages live in .rightcontent > .content-holder. Drop the soft
   tint behind the white card so the auth/konto surfaces read like the mockup. */
.rightcontent .center_box_content,
#divMyBookings{
  font-family:var(--rd-text);
}

/* Page title bar (breadcrumb heading the customer templates print first) */
.center_box_heading{
  font-family:var(--rd-display) !important;
  font-weight:800; color:var(--rd-navy);
  letter-spacing:-.02em; line-height:1.14;
  font-size:clamp(22px,2.6vw,28px);
  margin:4px 0 18px;
}
.center_box_heading table{ width:100%; }
.center_box_sub_heading{
  font-family:var(--rd-display) !important;
  font-weight:800; color:var(--rd-navy);
  font-size:18px; margin:22px 0 10px;
}
.center_box_sub_heading span{ font-family:var(--rd-display) !important; }

/* ---- Flash messages → Konzept-A pills ----------------------------------- */
.msg{
  border-radius:var(--rd-r-sm); padding:13px 16px; margin:0 0 18px;
  font-size:14.5px; border:1px solid var(--rd-line); line-height:1.5;
}
.msg p{ margin:0; }
.msg.notice{ background:var(--rd-green-50); border-color:var(--rd-green-100); color:var(--rd-navy); }
.msg.success{ background:var(--rd-green-50); border-color:var(--rd-green-100); color:var(--rd-green-700); }
.msg.fail{ background:#fff5e6; border-color:#ffe2b0; color:#a76a00; }

/* ============================================================================
   2. LOGIN  (index.php?customer=login)
   form.login-form is wrapped by .center_box_content. Turn that wrapper into a
   centered auth card and lay the legacy <table> out as a tidy vertical form.
   ========================================================================== */

/* The card: center it and give it the auth-card look from the mockup.
   NOTE: redesign-konto.js upgrades this wrapper to .rdk-auth-card (section 8)
   and wraps it in a centered .rdk-auth band. These legacy fallbacks therefore
   apply ONLY before the script runs / if it cannot run — hence :not(.rdk-auth-card). */
.rightcontent .center_box_content:has(.login-form):not(.rdk-auth-card),
.rightcontent .center_box_content:has(#frmRegistration):not(.rdk-auth-card){
  max-width:560px; margin:8px auto 40px;
  background:#fff; border:1px solid var(--rd-line);
  border-radius:var(--rd-r); padding:30px clamp(20px,3vw,34px);
  box-shadow:0 24px 60px -32px rgba(16,40,38,.30);
}
/* Login card is narrower (single column form) */
.rightcontent .center_box_content:has(.login-form):not(.rdk-auth-card){ max-width:440px; }

/* Intro text (_LOGINTEXT) above the form */
.center_box_content:has(.login-form) > br + form,
.login-form{ margin-top:8px; }

.login-form table{ width:100% !important; }
.login-form td{ padding:0 !important; vertical-align:middle; }

/* Stack each label/field row */
.login-form tr{ display:block; margin-bottom:14px; }
.login-form tr td:first-child{
  display:block; width:auto !important; margin-bottom:6px;
  font-family:var(--rd-display); font-weight:700;
  font-size:12.5px; color:var(--rd-navy); white-space:normal !important;
}
.login-form tr td:last-child{ display:block; width:auto !important; }

/* Inputs — full width, rounded, green focus ring */
.login-form input[type=text],
.login-form input[type=password]{
  width:100% !important; box-sizing:border-box;
  font-size:15px; border:1.5px solid var(--rd-line);
  border-radius:var(--rd-r-sm); padding:12px 14px; min-height:48px;
  background:#fff; color:var(--rd-ink);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.login-form input[type=text]:focus,
.login-form input[type=password]:focus{
  outline:0; border-color:var(--rd-green);
  box-shadow:0 0 0 3px var(--rd-green-50);
}

/* Remember-me checkbox row */
.login-form .form_checkbox,
.login-form input[type=checkbox]{ width:16px; height:16px; accent-color:var(--rd-green); vertical-align:middle; }
.login-form .chk_remember_me{ font-size:13.5px; color:var(--rd-muted); margin-left:6px; }

/* Primary submit + logout buttons (.form_button) → green full-width pill */
.form_button{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--rd-green) !important; color:#fff !important; border:0 !important;
  font-family:var(--rd-display); font-weight:700; font-size:15px;
  border-radius:999px; padding:13px 22px; min-height:48px;
  box-shadow:0 12px 26px -14px rgba(0,160,87,.7);
  transition:transform .12s ease, background .12s ease, filter .12s ease;
}
.form_button:hover{ background:var(--rd-green-700) !important; transform:translateY(-1px); }
.login-form .form_button{ width:100%; margin-bottom:14px; }

/* Helper links under the login button (create account / forgot / resend) */
.login-form td[valign=middle] a,
.login-form td[valign=top] a{
  display:inline-block; color:var(--rd-green-700); font-weight:600;
  font-size:13.5px; line-height:2;
}
.login-form td[valign=middle] a:hover,
.login-form td[valign=top] a:hover{ color:var(--rd-green); text-decoration:underline; }

/* Already-logged logout panel */
.pages_contents{ padding:4px 0; }

/* ============================================================================
   3. REGISTRATION  (index.php?customer=create_account)
   #frmRegistration is a 3-column <table> (label | * | field). Modernize type,
   inputs, section dividers — keep the table grid intact.
   ========================================================================== */

#frmRegistration{ margin-top:6px; }
#frmRegistration table{ width:100% !important; }
#frmRegistration td{ padding:5px 6px !important; vertical-align:middle; }

/* Section headers ( <b>…</b><hr> rows ) */
#frmRegistration td b{
  font-family:var(--rd-display); font-weight:800; color:var(--rd-navy);
  font-size:15px; display:inline-block; margin:14px 0 2px;
}
#frmRegistration hr{
  border:0; border-top:1px solid var(--rd-line);
  margin:4px 0 10px; height:0;
}

/* Field labels (first column) */
#frmRegistration td[align]{ color:var(--rd-navy); font-weight:600; font-size:13.5px; }
.mandatory_star{ color:var(--rd-green); font-weight:700; }

/* Inputs + selects — rounded, green focus */
#frmRegistration input[type=text],
#frmRegistration input[type=password],
#frmRegistration select{
  font-size:14.5px; border:1.5px solid var(--rd-line) !important;
  border-radius:var(--rd-r-sm) !important; padding:10px 12px; min-height:44px;
  background:#fff; color:var(--rd-ink); max-width:340px; width:100%;
  box-sizing:border-box;
  transition:border-color .14s ease, box-shadow .14s ease;
}
#frmRegistration input[type=text]:focus,
#frmRegistration input[type=password]:focus,
#frmRegistration select:focus{
  outline:0; border-color:var(--rd-green);
  box-shadow:0 0 0 3px var(--rd-green-50);
}

/* Consent checkboxes */
#frmRegistration input[type=checkbox]{ width:16px; height:16px; accent-color:var(--rd-green); }

/* Submit (already styled via .form_button) — center & give breathing room */
#frmRegistration td[align=center] .form_button{ min-width:220px; }

/* Footnotes */
#frmRegistration p{ color:var(--rd-muted); font-size:13px; }

/* Terms & conditions modal overlay */
#light{
  border-radius:var(--rd-r) !important; border:1px solid var(--rd-line) !important;
  box-shadow:0 30px 80px -30px rgba(16,40,38,.5) !important; overflow:hidden;
}
#light .white_header{ background:var(--rd-green-50); border-bottom:1px solid var(--rd-green-100); }
#light .white_header a{ color:var(--rd-green-700); font-weight:600; }
#light .white_content{ font-family:var(--rd-text); color:var(--rd-ink); }
#fade.black_overlay{ background:rgba(8,24,20,.5) !important; }

/* ============================================================================
   4. EDIT MY ACCOUNT  (index.php?customer=my_account)
   #frmEditAccount (password change) + the DrawEditMode_account MicroGrid form.
   ========================================================================== */

#frmEditAccount table,
.view-mode table.mgrid_table{ width:100% !important; }
#frmEditAccount td{ padding:6px 4px !important; color:var(--rd-navy); font-size:14px; }
.required{ color:var(--rd-green); font-weight:700; }

/* All MicroGrid + account text inputs/selects → rounded green-focus controls */
.mgrid_text,
.mgrid_textarea,
.mgrid_select,
#frmEditAccount input[type=text],
#frmEditAccount input[type=password]{
  font-size:14.5px; border:1.5px solid var(--rd-line) !important;
  border-radius:var(--rd-r-sm) !important; padding:10px 12px !important;
  min-height:44px; background:#fff !important; color:var(--rd-ink) !important;
  box-sizing:border-box;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.mgrid_text:focus,
.mgrid_textarea:focus,
.mgrid_select:focus,
#frmEditAccount input:focus{
  outline:0; border-color:var(--rd-green) !important;
  box-shadow:0 0 0 3px var(--rd-green-50) !important;
}
.mgrid_textarea{ min-height:96px; }

/* MicroGrid edit/view table → soft card rows instead of hard borders */
.view-mode table.mgrid_table{
  border-collapse:separate; border-spacing:0;
  border:1px solid var(--rd-line); border-radius:var(--rd-r); overflow:hidden;
  box-shadow:0 14px 36px -24px rgba(16,40,38,.25);
}
.view-mode table.mgrid_table td,
.view-mode table.mgrid_table th{ border-color:var(--rd-line) !important; }
.mgrid_label{ font-family:var(--rd-display); font-weight:700; color:var(--rd-navy); }

/* MicroGrid buttons (Save / Reset / Cancel / Back) */
.mgrid_button{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  font-family:var(--rd-display); font-weight:700; font-size:14px;
  border-radius:999px !important; padding:11px 20px; min-height:44px;
  background:var(--rd-green) !important; color:#fff !important; border:0 !important;
  box-shadow:0 12px 26px -16px rgba(0,160,87,.7);
  transition:transform .12s ease, background .12s ease;
}
.mgrid_button:hover{ background:var(--rd-green-700) !important; transform:translateY(-1px); }
/* Secondary (reset/cancel/back) buttons read as outline */
.mgrid_button_reset,
.mgrid_button_cancel,
.mgrid_button_back{
  background:#fff !important; color:var(--rd-navy) !important;
  border:1.5px solid var(--rd-line) !important; box-shadow:none;
}
.mgrid_button_reset:hover,
.mgrid_button_cancel:hover,
.mgrid_button_back:hover{ border-color:var(--rd-green) !important; background:#fff !important; }

/* ============================================================================
   5. MY BOOKINGS  (index.php?customer=my_bookings)
   #divMyBookings > .table-responsive.view-mode > form#frmMicroGrid_…
   Each booking = .mybookings_booking_container with .info.row of
   .col-sm-6.mybookings_booking fields + an .actions.row of action links.
   Render each as a Konzept-A card with a status pill.
   ========================================================================== */

#divMyBookings{ margin-top:6px; }
#divMyBookings .view-mode > form{ margin:0; }

/* One booking = one rounded white card */
.mybookings_booking_container{
  background:#fff; border:1px solid var(--rd-line);
  border-radius:var(--rd-r); padding:16px 18px; margin:0 0 14px;
  box-shadow:0 14px 36px -26px rgba(16,40,38,.30);
}
.mybookings_booking_container .info.row{ margin:0; }

/* Each field cell */
.mybookings_booking{
  padding:6px 10px; font-size:14px; color:var(--rd-ink); line-height:1.5;
}
.mybookings_booking label{
  display:block; font-family:var(--rd-display); font-weight:700;
  font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--rd-green-700); margin-bottom:2px;
}
.mybookings_booking a{ color:var(--rd-green-700); font-weight:600; }
.mybookings_booking a:hover{ color:var(--rd-green); }

/* Hotel/booking title cell — slightly larger */
.mybookings_booking_container_hotel_name a,
.mybookings_booking_container_hotel a,
.mybookings_booking_container_room_type{
  font-family:var(--rd-display); font-weight:800; color:var(--rd-navy) !important;
  font-size:15.5px;
}

/* ---- Status → pill -------------------------------------------------------- */
/* The status cell prints a status label/value; render it as a pill.
   Default = green „confirmed" look; the pending/request modifiers below
   re-tint it amber when the grid marks the booking as pending/canceled. */
.mybookings_booking_container_status{ display:flex; align-items:center; }
.mybookings_booking_container_status label{
  margin:0 8px 0 0; align-self:center;
}
.mybookings_booking_container_status > *:not(label){
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--rd-display); font-weight:700; font-size:11.5px;
  padding:5px 12px; border-radius:999px;
  background:var(--rd-green-50); color:var(--rd-green-700);
  border:1px solid var(--rd-green-100);
}
/* If the status text is a bare node (no wrapper), tint the cell itself */
.mybookings_booking_container_status{
  font-family:var(--rd-display); font-weight:700; font-size:13.5px;
  color:var(--rd-green-700);
}

/* Action links row (Details / Invoice / Cancel) */
.actions.row{ margin:8px 0 0; padding-top:10px; border-top:1px solid var(--rd-line); }
.mybookings_booking_actions{ font-size:13.5px; }
.mybookings_booking_actions a,
.mybookings_booking_actions label{ font-weight:600; }
.mybookings_booking_actions a{ color:var(--rd-green-700); }
.mybookings_booking_actions a:hover{ color:var(--rd-green); text-decoration:underline; }
.mybookings_booking_container_link_cust_order_cancel a{ color:#c0492f; }
.mybookings_booking_container_link_cust_order_cancel a:hover{ color:#a13b25; }

/* Booking action icon images kept crisp (override global img rounding) */
#divMyBookings img{ border-radius:0; }

/* MicroGrid pager / sort controls inside bookings */
#divMyBookings .mgrid_select{ max-width:220px; display:inline-block; }

/* ============================================================================
   6. SHARED — links, secondary pages (forgot pw, resend activation, reviews,
   wishlist, funds). They all reuse .center_box_content + .form_button + .msg,
   which are handled above; this just tidies generic forms inside the card.
   ========================================================================== */
.center_box_content form input[type=text]:focus,
.center_box_content form input[type=email]:focus,
.center_box_content form input[type=password]:focus{
  outline:0; border-color:var(--rd-green);
  box-shadow:0 0 0 3px var(--rd-green-50);
}
.center_box_content a{ color:var(--rd-green-700); }
.center_box_content a:hover{ color:var(--rd-green); }

/* ============================================================================
   7. RESPONSIVE
   ========================================================================== */
@media(max-width:760px){
  .rightcontent .center_box_content:has(.login-form),
  .rightcontent .center_box_content:has(#frmRegistration){
    padding:22px 16px; margin:6px auto 28px;
  }
  #frmRegistration input[type=text],
  #frmRegistration input[type=password],
  #frmRegistration select{ max-width:none; }
  .mybookings_booking{ padding:5px 8px; }
}

/* ============================================================================
   8. KONZEPT-A STRUCTURE — styles for the DOM that js/redesign-konto.js builds
   client-side (the customer/*.php templates are not editable, so the script
   reshapes them into these .rdk-* nodes). Mirrors the auth-card + konto
   dashboard in _redesign/konzept-a-buchung-konto.html.
   ========================================================================== */

/* Hidden legacy prose the script keeps in the DOM but no longer shows. */
.rdk-was-intro{ display:none !important; }

/* ---- 8.1 AUTH SHELL + CARD (login & register) --------------------------- */
/* The legacy page title ("Camper Login" / "Konto erstellen") is printed by
   draw_title_bar as a sibling <h1.center_box_heading> just before the card.
   The mockup folds the title INTO the card ("Willkommen zurück"), so hide the
   stray heading on the auth pages (only where the JS built the .rdk-auth band). */
.content-holder:has(.rdk-auth) > .center_box_heading,
.rightcontent:has(.rdk-auth) .center_box_heading{ display:none !important; }

.rdk-auth{
  display:flex; align-items:flex-start; justify-content:center;
  padding:34px 16px 56px;
}
.rdk-auth-card{
  width:100%; max-width:430px; box-sizing:border-box;
  background:#fff; border:1px solid var(--rd-line,#e7eef0);
  border-radius:26px; padding:30px;
  box-shadow:0 30px 70px -34px rgba(16,40,38,.34);
}
.rdk-auth-card--register{ max-width:640px; }

/* The auth, dashboard AND booking-flow pages reuse the listing template, whose
   `.grid.rdA-grid` is a 2-column (cards | map) grid — it squeezes the single content
   column into a ~285-375px track, so the auth card never reaches its 430/640px (sits
   left-aligned) and the booking step content (.center_box_content) ends up far narrower
   than the full-width booking summary above it. There is no map on any of these pages:
   collapse the grid to a plain block so the content spans the full container width
   (auth band then flex-centers its card; booking steps line up with the summary). */
.grid.rdA-grid:has(.rdk-auth),
.grid.rdA-grid.rdk-konto,
body.rdk-booking .grid.rdA-grid{ display:block; }

.rdk-auth-card form,
form.login-form.rdk-auth-card,
#frmRegistration.rdk-auth-card{ margin:0; }

/* Header: logo + tabs + heading + subtext */
.rdk-auth-head{ margin-bottom:4px; }
.rdk-auth-logo{ display:flex; justify-content:center; margin-bottom:18px; }
.rdk-logo{ height:30px; width:auto; display:block; }

.rdk-tabs{
  display:flex; gap:0; background:var(--rd-bg-soft,#f4f8f6);
  border:1px solid var(--rd-line,#e7eef0); border-radius:999px;
  padding:4px; margin-bottom:22px;
}
.rdk-tab{
  flex:1; text-align:center; text-decoration:none;
  font-family:var(--rd-display); font-weight:700; font-size:14px;
  color:var(--rd-muted,#6b7b82); padding:9px 10px; border-radius:999px;
  transition:background .14s ease, color .14s ease;
}
.rdk-tab:hover{ color:var(--rd-navy,#15262f); }
.rdk-tab.on{
  background:#fff; color:var(--rd-green-700,#008a4c);
  box-shadow:0 2px 8px -2px rgba(16,40,38,.18);
}
.rdk-auth-title{
  font-family:var(--rd-display) !important; font-weight:800;
  font-size:23px; line-height:1.15; text-align:center;
  color:var(--rd-navy,#15262f); margin:0 0 4px; letter-spacing:-.01em;
}
.rdk-auth-sub{
  text-align:center; color:var(--rd-muted,#6b7b82);
  font-size:14px; line-height:1.5; margin:0 0 20px;
}

/* Card body — single column stacked form */
.rdk-auth-body{ display:block; }

/* Fields */
.rdk-field{ margin-bottom:14px; }
.rdk-label{
  display:block; font-family:var(--rd-display); font-weight:700;
  font-size:12.5px; color:var(--rd-navy,#15262f); margin-bottom:6px;
}
.rdk-req{ color:var(--rd-green,#00A057); font-weight:800; }
.rdk-input{
  width:100% !important; box-sizing:border-box; display:block;
  font-family:var(--rd-text); font-size:15px;
  border:1.5px solid var(--rd-line,#e7eef0) !important; border-radius:12px !important;
  padding:12px 14px !important; min-height:48px; background:#fff; color:var(--rd-ink,#243239);
  max-width:none !important;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.rdk-input:focus{
  outline:0; border-color:var(--rd-green,#00A057) !important;
  box-shadow:0 0 0 3px var(--rd-green-50,#eaf7f0);
}
/* required-field validation error (e.g. empty PLZ on Konto erstellen) */
.rdk-input.rdk-invalid{ border-color:#d23b3b !important; box-shadow:0 0 0 3px rgba(210,59,59,.15); }
select.rdk-input{ appearance:none; -webkit-appearance: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 14px center; padding-right:34px !important;
}

/* Remember-me / forgot row */
.rdk-arow{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; font-size:13.5px; margin:2px 0 18px;
}
.rdk-remember{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--rd-ink,#243239); font-weight:500; cursor:pointer;
}
.rdk-remember input[type=checkbox]{
  width:16px; height:16px; accent-color:var(--rd-green,#00A057);
}
.rdk-arow-link, a.rdk-arow-link{
  color:var(--rd-green-700,#008a4c) !important; font-weight:600;
  text-decoration:none; white-space:nowrap;
}
.rdk-arow-link:hover{ color:var(--rd-green,#00A057) !important; text-decoration:underline; }

/* Submit — full-width green pill */
.rdk-submit{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  width:100%; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--rd-display); font-weight:700; font-size:15px;
  background:var(--rd-green,#00A057) !important; color:#fff !important; border:0 !important;
  border-radius:999px !important; padding:14px 22px !important; min-height:50px;
  margin:2px 0 4px;
  box-shadow:0 14px 30px -14px rgba(0,160,87,.75);
  transition:transform .12s ease, background .12s ease;
}
.rdk-submit:hover{ background:var(--rd-green-700,#008a4c) !important; transform:translateY(-1px); }

/* Helper links under submit */
.rdk-auth-links{
  display:flex; flex-direction:column; gap:4px; align-items:center;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--rd-line,#e7eef0);
}
.rdk-auth-link, a.rdk-auth-link{
  color:var(--rd-green-700,#008a4c) !important; font-weight:600;
  font-size:13.5px; text-decoration:none;
}
.rdk-auth-link:hover{ color:var(--rd-green,#00A057) !important; text-decoration:underline; }

/* ---- 8.2 REGISTER specifics --------------------------------------------- */
.rdk-reg-body .rdk-section-title{
  font-family:var(--rd-display); font-weight:800; color:var(--rd-navy,#15262f);
  font-size:15px; margin:18px 0 10px; padding-bottom:8px;
  border-bottom:1px solid var(--rd-line,#e7eef0);
}
.rdk-reg-body .rdk-section-title:first-child{ margin-top:4px; }
/* Two-column field grid inside each section (collapses on mobile). */
.rdk-fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.rdk-fgrid:empty{ display:none; }
.rdk-field--full{ grid-column:1 / -1; margin-top:4px; }
/* Consent / newsletter inline rows */
.rdk-consent{
  display:flex; align-items:flex-start; gap:9px;
  font-size:13.5px; line-height:1.45; color:var(--rd-ink,#243239);
  font-weight:500; cursor:pointer; margin:4px 0;
}
.rdk-consent input[type=checkbox]{
  width:16px; height:16px; margin-top:2px; flex:0 0 auto;
  accent-color:var(--rd-green,#00A057);
}
.rdk-consent-text a{ color:var(--rd-green-700,#008a4c); font-weight:600; }

/* ---- 8.3 KONTO DASHBOARD (my_account) ----------------------------------- */
.rdk-konto{ max-width:1040px; margin:8px auto 48px; }
.rdk-kgrid{
  display:grid; grid-template-columns:240px 1fr; gap:26px; align-items:start;
  margin-top:6px;
}
.rdk-kmenu{
  background:#fff; border:1px solid var(--rd-line,#e7eef0);
  border-radius:var(--rd-r,16px); padding:8px;
  box-shadow:0 12px 30px -22px rgba(16,40,38,.28);
  position:sticky; top:90px;
}
.rdk-kmenu-link{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:11px; text-decoration:none;
  font-family:var(--rd-text); font-weight:600; font-size:14.5px;
  color:var(--rd-ink,#243239); transition:background .12s ease, color .12s ease;
}
.rdk-kmenu-link:hover{ background:var(--rd-bg-soft,#f4f8f6); }
.rdk-kmenu-link.on{ background:var(--rd-green-50,#eaf7f0); color:var(--rd-green-700,#008a4c); }
.rdk-kmenu-link.danger{ color:#c0492f; }
.rdk-kmenu-link.danger:hover{ background:#fdecec; }

.rdk-kcontent{ min-width:0; }
.rdk-ksec{
  background:#fff; border:1px solid var(--rd-line,#e7eef0);
  border-radius:var(--rd-r,16px); padding:22px; margin-bottom:18px;
  box-shadow:0 12px 30px -22px rgba(16,40,38,.26);
}
.rdk-ksec-title{
  font-family:var(--rd-display) !important; font-weight:800;
  font-size:19px; color:var(--rd-navy,#15262f); margin:0 0 14px;
}

/* ---- 8.4 BOOKING ROWS (my_bookings) ------------------------------------- */
.rdk-brow{
  display:grid; grid-template-columns:1fr auto; gap:14px 16px;
  align-items:center;
  background:#fff; border:1px solid var(--rd-line,#e7eef0);
  border-radius:var(--rd-r-sm,12px); padding:14px 16px; margin:0 0 12px;
  box-shadow:0 12px 30px -24px rgba(16,40,38,.28);
}
/* hide the now-empty legacy info row that we emptied into rdk-brow-* */
.rdk-brow > .info.row{ display:none; }
.rdk-brow-body{ min-width:0; }
.rdk-brow-title, .rdk-brow-title a{
  font-family:var(--rd-display); font-weight:800; font-size:15.5px;
  color:var(--rd-navy,#15262f) !important; text-decoration:none; line-height:1.25;
}
.rdk-brow-title a:hover{ color:var(--rd-green-700,#008a4c) !important; }
.rdk-brow-meta{ margin-top:4px; display:flex; flex-direction:column; gap:1px; }
.rdk-brow-line{
  font-family:var(--rd-text); font-size:12.5px; color:var(--rd-muted,#6b7b82);
  line-height:1.45;
}
.rdk-brow-line a{ color:var(--rd-green-700,#008a4c); font-weight:600; }

.rdk-brow-act{
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  text-align:right; white-space:nowrap;
}
/* Status pill (host cell painted as a pill) */
.rdk-status-host{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--rd-display); font-weight:700; font-size:11.5px;
  padding:4px 11px; border-radius:999px;
  background:var(--rd-green-50,#eaf7f0); color:var(--rd-green-700,#008a4c);
  border:1px solid var(--rd-green-100,#cdeeda);
}
/* hide the "Status:" field label inside the pill — the pill value speaks for itself */
.rdk-status-host > label,
.rdk-status-host label:first-child{ display:none; }
/* Amber "pending/request" tint when the grid marks it pending/canceled */
.rdk-status-host.mybookings_booking_container_status_pending,
.rdk-status-host.mybookings_booking_container_status_request,
.rdk-status-host:has(.mybookings_booking_container_status_pending){
  background:#fff5e6; color:#a76a00; border-color:#ffe2b0;
}
.rdk-brow-actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.rdk-brow-actions a{
  font-family:var(--rd-display); font-weight:700; font-size:13px;
  color:var(--rd-green-700,#008a4c); text-decoration:none;
  border:1px solid var(--rd-line,#e7eef0); border-radius:999px;
  padding:8px 14px; min-height:38px; display:inline-flex; align-items:center;
  transition:border-color .12s ease, color .12s ease;
}
.rdk-brow-actions a:hover{ border-color:var(--rd-green,#00A057); color:var(--rd-green,#00A057); }
.rdk-brow-actions .mybookings_booking_container_link_cust_order_cancel a,
.rdk-brow-actions a[href*="cancel"]{ color:#c0492f; }

/* ---- 8.4b Booking DETAIL / RECHNUNG view (Details/Rechnung opened) ------
   When Details or Rechnung is opened, my_bookings renders the genuine native
   detail table (Buchungsdetails / Rechnung). redesign-konto.js moves it into the
   konto shell with class .rdk-native-detail; restyle it to match Konzept-A. */
.rdk-back-link{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 16px;
  font-family:var(--rd-display); font-weight:700; font-size:14px;
  color:var(--rd-green-700,#008a4c); text-decoration:none;
}
.rdk-back-link:hover{ color:var(--rd-green,#00A057); }
.rdk-native-detail{ display:block; }
.rdk-native-detail table{
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--rd-line,#e7eef0); border-radius:14px; overflow:hidden;
}
.rdk-native-detail th, .rdk-native-detail td{
  padding:11px 16px; font-size:14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--rd-line,#eef3f4);
}
.rdk-native-detail tr:last-child td, .rdk-native-detail tr:last-child th{ border-bottom:0; }
/* hide the native table's grey title bar — the Konzept-A section heading above
   already states "Buchungsdetails"/"Rechnung", so it would otherwise show twice */
.rdk-native-detail table tr:first-child td[colspan]{ display:none; }
.rdk-native-detail th, .rdk-native-detail td:first-child{
  font-weight:700; color:var(--rd-ink,#1a2b22);
}
.rdk-native-detail h1, .rdk-native-detail h2, .rdk-native-detail h3,
.rdk-native-detail .center_box_heading{
  font-family:var(--rd-display); font-size:20px; font-weight:800;
  margin:0 0 14px; color:var(--rd-ink,#1a2b22);
}
.rdk-native-detail a img[src*="printer"]{ vertical-align:middle; }

/* ---- 8.5 RESPONSIVE (Konzept-A nodes) ----------------------------------- */
@media(max-width:900px){
  .rdk-kgrid{ grid-template-columns:1fr; gap:16px; }
  .rdk-kmenu{ position:static; display:flex; flex-wrap:wrap; gap:4px; }
  .rdk-kmenu-link{ flex:1 1 auto; justify-content:center; }
}
@media(max-width:640px){
  .rdk-auth{ padding:20px 12px 40px; }
  .rdk-auth-card, .rdk-auth-card--register{ max-width:none; padding:22px 18px; }
  .rdk-fgrid{ grid-template-columns:1fr; }
  .rdk-brow{ grid-template-columns:1fr; }
  .rdk-brow-act{ align-items:flex-start; text-align:left; }
  .rdk-brow-actions{ justify-content:flex-start; }
}

/* ============================================================================
   8.6 KONTO DASHBOARD — verbatim port of the mockup (.khead/.kstats/.kgrid/
   .kmenu/.ksec/.brow/.wlist/.wcard), scoped under .rdk-konto and built by
   js/redesign-konto.js > transformAccount(). Mirrors
   _redesign/konzept-a-buchung-konto.html  data-view="konto".
   All values are REAL (read from the live edit form + fetched bookings/
   wishlist); empty sources render .rdk-empty, never invented rows.
   ========================================================================== */
.rdk-konto{ max-width:1100px; margin:8px auto 56px; padding:0 20px; box-sizing:border-box; }

/* drop the legacy breadcrumb title bar the customer template prints first */
.rdk-konto > .center_box_heading{ display:none !important; }

/* ---- KHEAD: avatar + greeting ------------------------------------------- */
.rdk-konto .khead{ display:flex; align-items:center; gap:16px; margin:6px 0 22px; }
.rdk-konto .khead .av{
  width:60px; height:60px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg,var(--rd-green,#00A057),var(--rd-navy,#15262f));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--rd-display); font-weight:800; font-size:22px;
}
.rdk-konto .khead h1{
  font-family:var(--rd-display) !important; font-weight:800;
  font-size:24px; line-height:1.1; color:var(--rd-navy,#15262f); margin:0;
}
.rdk-konto .khead .sub{ color:var(--rd-muted,#6b7b82); font-size:14px; margin-top:3px; }

/* ---- KGRID: sidebar + body --------------------------------------------- */
.rdk-konto .kgrid{
  display:grid; grid-template-columns:240px 1fr; gap:26px; align-items:start;
}
.rdk-konto .kbody{ min-width:0; }

/* ---- KMENU sidebar ------------------------------------------------------ */
.rdk-konto .kmenu{
  background:#fff; border:1px solid var(--rd-line,#e7eef0);
  border-radius:var(--rd-r,16px); padding:8px;
  box-shadow:0 12px 30px -22px rgba(16,40,38,.28);
  position:sticky; top:90px;
}
.rdk-konto .kmenu a{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:11px; text-decoration:none;
  font-family:var(--rd-text); font-weight:600; font-size:14.5px;
  color:var(--rd-ink,#243239); transition:background .12s ease, color .12s ease;
}
.rdk-konto .kmenu a:hover{ background:var(--rd-bg-soft,#f4f8f6); }
.rdk-konto .kmenu a.on{ background:var(--rd-green-50,#eaf7f0); color:var(--rd-green-700,#008a4c); }
.rdk-konto .kmenu a.danger{ color:#c0492f; }
.rdk-konto .kmenu a.danger:hover{ background:#fdecec; }
.rdk-konto .kmenu .i{ width:18px; height:18px; flex:0 0 auto; fill:currentColor; }

/* ---- KSTATS: 3 real stat cards ----------------------------------------- */
.rdk-konto .kstats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px;
}
.rdk-konto .kstat{
  background:#fff; border:1px solid var(--rd-line,#e7eef0);
  border-radius:var(--rd-r,16px); padding:18px;
  box-shadow:0 12px 30px -24px rgba(16,40,38,.24);
}
.rdk-konto .kstat .n{
  font-family:var(--rd-display); font-weight:800; font-size:26px;
  color:var(--rd-navy,#15262f); line-height:1;
}
.rdk-konto .kstat .l{ font-size:13px; color:var(--rd-muted,#6b7b82); margin-top:4px; }

/* ---- KSEC: white content cards ----------------------------------------- */
.rdk-konto .ksec{
  background:#fff; border:1px solid var(--rd-line,#e7eef0);
  border-radius:var(--rd-r,16px); padding:22px; margin-bottom:18px;
  box-shadow:0 12px 30px -22px rgba(16,40,38,.22);
}
.rdk-konto .ksec h2{
  font-family:var(--rd-display) !important; font-weight:800;
  font-size:19px; color:var(--rd-navy,#15262f); margin:0 0 4px;
}
.rdk-konto .rdk-sec-sub{ font-size:14px; color:var(--rd-muted,#6b7b82); margin:0 0 6px; }
.rdk-konto .rdk-loading{ color:var(--rd-muted,#6b7b82); font-size:14px; padding:10px 2px; }

/* ---- BROW: booking rows ------------------------------------------------- */
.rdk-konto .brow{
  display:grid; grid-template-columns:90px 1fr auto; gap:14px;
  align-items:center; border:1px solid var(--rd-line,#e7eef0);
  border-radius:var(--rd-r-sm,12px); padding:12px; margin-top:12px;
}
.rdk-konto .brow .ph{
  width:90px; height:68px; border-radius:10px; overflow:hidden; background:#0a7d57;
  flex:0 0 auto;
}
.rdk-konto .brow .ph img{ width:100%; height:100%; object-fit:cover; }
.rdk-konto .brow b{
  font-family:var(--rd-display); font-size:15.5px; color:var(--rd-navy,#15262f);
  display:block;
}
.rdk-konto .brow small{ color:var(--rd-muted,#6b7b82); font-size:12.5px; display:block; margin-top:2px; }
.rdk-konto .brow .act{
  text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end;
}

/* status pill */
.rdk-konto .status{
  font-family:var(--rd-display); font-weight:700; font-size:11.5px;
  padding:4px 10px; border-radius:999px; display:inline-flex; gap:5px;
  align-items:center; white-space:nowrap;
}
.rdk-konto .status .i{ width:12px; height:12px; fill:currentColor; }
.rdk-konto .status.ok{ background:var(--rd-green-50,#eaf7f0); color:var(--rd-green-700,#008a4c); }
.rdk-konto .status.pend{ background:#fff5e6; color:#a76a00; }
.rdk-konto .status.cancel{ background:#fdecec; color:#c0492f; }

/* small outline button used by .brow .act + empty-state CTA */
.rdk-konto .btn.btn-outline,
.rdk-konto .rdk-brow-btn,
.rdk-konto .rdk-empty-cta{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--rd-display); font-weight:700; font-size:13px;
  color:var(--rd-green-700,#008a4c); text-decoration:none;
  background:#fff; border:1.5px solid var(--rd-line,#e7eef0);
  border-radius:999px; padding:8px 14px; min-height:38px;
  transition:border-color .12s ease, color .12s ease;
}
.rdk-konto .btn.btn-outline:hover,
.rdk-konto .rdk-brow-btn:hover,
.rdk-konto .rdk-empty-cta:hover{ border-color:var(--rd-green,#00A057); color:var(--rd-green,#00A057); }

/* the row's real actions (Details / Rechnung / Stornieren) sit in a wrap so
   they flow side-by-side on desktop and wrap on narrow rows */
.rdk-konto .brow .act .rdk-brow-actions{
  display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap;
}
/* Stornieren = destructive → coral, matching the original cancel link tint */
.rdk-konto .rdk-brow-btn--danger{ color:#c0492f; }
.rdk-konto .rdk-brow-btn--danger:hover{ border-color:#c0492f; color:#c0492f; }

/* ---- WLIST: wishlist cards --------------------------------------------- */
.rdk-konto .wlist{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px;
}
.rdk-konto .wcard{
  border:1px solid var(--rd-line,#e7eef0); border-radius:var(--rd-r-sm,12px);
  overflow:hidden; background:#fff; display:block; text-decoration:none;
}
.rdk-konto .wcard .ph{ height:120px; background:#0a7d57; position:relative; }
.rdk-konto .wcard .ph img{ width:100%; height:100%; object-fit:cover; }
.rdk-konto .wcard .hb{
  position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center; color:#e8604c;
}
.rdk-konto .wcard .hb .i{ width:16px; height:16px; fill:currentColor; }
/* heart doubles as the genuine "remove from wishlist" control */
a.rdk-konto .wcard .hb--remove, .rdk-konto .wcard a.hb--remove{
  cursor:pointer; transition:background-color .12s ease, color .12s ease, transform .12s ease;
}
.rdk-konto .wcard a.hb--remove:hover{ background:#e8604c; color:#fff; transform:scale(1.08); }
.rdk-konto .wcard .b{ display:block; padding:12px; text-decoration:none; }
.rdk-konto .wcard .b b{ font-family:var(--rd-display); font-size:14.5px; color:var(--rd-navy,#15262f); }
.rdk-konto .wcard:hover .b b{ color:var(--rd-green-700,#008a4c); }

/* ---- EMPTY STATE (real, never invented rows) --------------------------- */
.rdk-konto .rdk-empty{
  border:1px dashed var(--rd-line,#e7eef0); border-radius:var(--rd-r-sm,12px);
  padding:24px 18px; text-align:center; margin-top:12px;
  background:var(--rd-bg-soft,#f7faf9);
}
.rdk-konto .rdk-empty p{ color:var(--rd-muted,#6b7b82); font-size:14px; margin:0 0 12px; }

/* ---- PERSÖNLICHE DATEN: the real edit form inside its .ksec ------------- */
/* The DrawEditMode_account MicroGrid table sits inside #rdk-sec-data; section
   4 already restyles its inputs/buttons. Tidy the table chrome here. */
.rdk-konto #rdk-sec-data .table-responsive{ overflow:visible; }
.rdk-konto #rdk-sec-data table.mgrid_table{
  width:100% !important; border:0 !important; box-shadow:none !important;
}
.rdk-konto #rdk-sec-data table.mgrid_table td{ border:0 !important; padding:7px 4px !important; }
.rdk-konto #rdk-sec-data label{
  font-family:var(--rd-display); font-weight:700; font-size:13px;
  color:var(--rd-navy-soft,var(--rd-navy,#15262f));
}
.rdk-konto #rdk-sec-data .mgrid_text,
.rdk-konto #rdk-sec-data .mgrid_select{ width:100% !important; max-width:340px; }
/* password change form heading + spacing inside the data card */
.rdk-konto #rdk-sec-data hr{ border:0; border-top:1px solid var(--rd-line,#e7eef0); margin:18px 0; }

/* ---- RESPONSIVE (dashboard) — Goal 13 ----------------------------------- */
/* tablet: stack the sidebar above the body; the menu becomes a horizontal
   scroller so all items stay reachable on one swipe-able row. */
@media(max-width:900px){
  .rdk-konto{ padding:0 18px; }
  .rdk-konto .kgrid{ grid-template-columns:1fr; gap:16px; }
  .rdk-konto .kmenu{
    position:static; display:flex; overflow-x:auto; gap:4px; padding:6px;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  }
  .rdk-konto .kmenu a{ white-space:nowrap; flex:0 0 auto; }
}
/* phone (~375px): comfortable side padding, stat cards 2-up, single-column
   wishlist, and booking rows stack their photo/body with the status + actions
   dropping to a full-width footer row. */
@media(max-width:640px){
  .rdk-konto{ padding:0 14px; }
  .rdk-konto .khead{ gap:12px; }
  .rdk-konto .ksec{ padding:18px 16px; }
  .rdk-konto .kstats{ grid-template-columns:1fr 1fr; gap:10px; }
  .rdk-konto .kstat{ padding:14px; }
  .rdk-konto .wlist{ grid-template-columns:1fr; }
  .rdk-konto .brow{ grid-template-columns:70px 1fr; }
  .rdk-konto .brow .act{
    grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center;
    justify-content:space-between; text-align:left; gap:8px;
  }
  .rdk-konto .brow .act .rdk-brow-actions{ justify-content:flex-start; }
  /* keep the real edit-form fields from overflowing the narrow card */
  .rdk-konto #rdk-sec-data .mgrid_text,
  .rdk-konto #rdk-sec-data .mgrid_select{ max-width:none; }
}
/* very small phones: stat cards single-column so numbers never clip */
@media(max-width:380px){
  .rdk-konto{ padding:0 12px; }
  .rdk-konto .kstats{ grid-template-columns:1fr; }
  .rdk-konto .brow{ grid-template-columns:1fr; }
  .rdk-konto .brow .ph{ display:none; }
}

/* ============================================================================
   9. BOOKING FLOW  (real uHotelBooking reservation pages)
   -------------------------------------------------------------------------
   These pages are rendered by the shared include/ classes (NOT editable), so
   this is a CSS-only restyle of the genuine markup, matched to the Konzept-A
   mockup (_redesign/konzept-a-buchung-konto.html · Buchung view):
     · stepper            → table.reservation_tabs / td.reservation_tab[_active]
     · page shell         → .center_box_content on the booking pages
     · cart / summary     → table.reservation_cart, .carteachroom(title),
                            .cartleftfield/.cartrightfield, .firststeptotalprice,
                            .totalroomprice, .reservation_next_step
     · date / payment     → .from_date/.to_date, select.payment_type,
                            .apply-change-date, .discount_coupon
     · empty-cart state   → .msg.notice with the "back to results" link
   Real flow (verified on :8075):
     detail → POST page=check_availability (room results) → page=booking (cart +
     stepper) → page=booking_details (guest/billing) → payment → page=booking_return
     (confirmation). The engine is active, but most gocamping placements have no
     bookable rooms configured (directory model → Anfrage path), so a populated
     cart only appears for places that DO expose online booking.
   Tokens here are the GLOBAL mockup tokens (--green/--navy/--line/…) from
   css/redesign-mockup.css, to mirror the mockup exactly.
   ========================================================================== */

/* ---- 9.1 Page shell: give booking pages the soft mockup canvas ---------- */
/* The booking content lives in .rightcontent > .content-holder >
   .center_box_content, same as the account pages. Constrain width + add air so
   the stepper + cards read like the mockup .bpage. We scope to pages that carry
   the reservation stepper so account/listing pages are unaffected. */
.content-holder:has(.reservation_tabs) .center_box_content,
.content-holder:has(.reservation_cart) .center_box_content{
  max-width:1040px; margin:8px auto 48px; font-family:var(--font);
}

/* ---- 9.2 Stepper — Konzept-A .steps row --------------------------------- */
/* uHotelBooking prints 3 visible steps (Buchungsdetails · Buchung · Zahlung);
   the mockup shows 4 (Verfügbarkeit → Unterkunft & Angaben → Bezahlen →
   Bestätigung). We map the real 3 onto the same visual language: a rounded
   white bar of pill-numbered steps with connectors. (The "Verfügbarkeit" step
   is the preceding check_availability screen, already passed.) */
table.reservation_tabs{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-sm); margin:0 auto 22px; table-layout:fixed;
  overflow:hidden;
}
table.reservation_tabs tr{ display:flex; align-items:stretch; }
table.reservation_tabs td.reservation_tab,
table.reservation_tabs td.reservation_tab_active{
  position:relative; flex:1 1 0; text-align:center;
  padding:15px 10px 15px 44px; border:0;
  font-family:var(--display); font-weight:700; font-size:14px;
  color:var(--faint); white-space:normal; vertical-align:middle;
  display:flex; align-items:center; justify-content:flex-start; gap:0;
}
/* numbered bullet before each step label */
table.reservation_tabs td.reservation_tab::before,
table.reservation_tabs td.reservation_tab_active::before{
  counter-increment:rdk-step;
  content:counter(rdk-step);
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background:var(--bg-soft); border:1.5px solid var(--line);
  color:var(--muted); font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
table.reservation_tabs tr{ counter-reset:rdk-step; }
/* connector line between steps */
table.reservation_tabs td + td::after{
  content:""; position:absolute; left:-2px; top:50%; width:14px; height:2px;
  background:var(--line); transform:translateY(-50%);
}
/* active step → navy bullet + dark label */
table.reservation_tabs td.reservation_tab_active{ color:var(--navy-soft); }
table.reservation_tabs td.reservation_tab_active::before{
  background:var(--navy); border-color:var(--navy); color:#fff;
}
/* a step that links back (already completed) → green "done" bullet */
table.reservation_tabs td.reservation_tab:has(a){ color:var(--ink); }
table.reservation_tabs td.reservation_tab:has(a)::before{
  background:var(--green); border-color:var(--green); color:#fff;
}
table.reservation_tabs td a{ color:inherit !important; text-decoration:none; }
table.reservation_tabs td a:hover{ color:var(--green-700) !important; }

/* ---- 9.3 Cart / price summary → Konzept-A card -------------------------- */
table.reservation_cart{
  width:100% !important; border-collapse:separate; border-spacing:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-sm); overflow:hidden; margin:0 0 18px;
}
table.reservation_cart thead th,
table.reservation_cart .header td,
table.reservation_cart tr.header td{
  background:var(--bg-soft); color:var(--navy-soft);
  font-family:var(--display); font-weight:800; font-size:13.5px;
  text-align:left; padding:13px 16px; border-bottom:1px solid var(--line);
}
table.reservation_cart td{
  padding:11px 16px; font-size:14px; color:var(--ink);
  border-bottom:1px solid var(--line-2); vertical-align:middle;
}
/* per-room block title */
.carteachroomtitle, td.carteachroomtitle{
  font-family:var(--display) !important; font-weight:800;
  color:var(--navy-soft) !important; font-size:15px;
}
.carteachroom{ background:#fff; }
/* left = label, right = value/price */
.cartleftfield, td.cartleftfield{ color:var(--muted); font-weight:500; }
.cartrightfield, td.cartrightfield{
  color:var(--navy-soft); font-weight:600; text-align:right; white-space:nowrap;
}
.cartlabel{ color:var(--muted); font-size:12.5px; }
/* room subtotal + grand total */
.roomtotalprice, .totalroomprice, td.totalroomprice{
  font-family:var(--display); font-weight:800; color:var(--navy-soft);
}
.firststeptotalcost{ color:var(--navy-soft); font-family:var(--display); font-weight:700; }
.firststeptotalprice, td.firststeptotalprice{
  font-family:var(--display) !important; font-weight:800 !important;
  font-size:22px !important; color:var(--navy-soft) !important;
}
.tr-footer td{ background:#fff; border-top:2px solid var(--line); }
/* remove-room (x) control */
.destroyeachroomcart{
  color:var(--coral) !important; font-weight:700; cursor:pointer;
  text-decoration:none;
}
.destroyeachroomcart:hover{ color:#e0492b !important; }

/* shopping-cart wrapper from ShowReservationInfo */
.shoppingcartdiv, .shoppingcartinner{ border:0; background:transparent; }
.reservation_cart.responsive-table{ margin-top:6px; }

/* ---- 9.4 Date change + coupon + payment controls inside the cart -------- */
.cartfields input[type=text],
.cartfields select,
input.from_date, input.to_date,
select.payment_type, select.from_date, select.to_date,
input.discount_coupon, .discount_coupon input[type=text]{
  font-family:var(--font); font-size:14.5px;
  border:1.5px solid var(--line) !important; border-radius:10px !important;
  padding:10px 12px !important; min-height:44px; background:#fff;
  color:var(--ink); box-sizing:border-box;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.cartfields input[type=text]:focus,
.cartfields select:focus,
input.from_date:focus, input.to_date:focus,
select.payment_type:focus,
input.discount_coupon:focus, .discount_coupon input[type=text]:focus{
  outline:0; border-color:var(--green) !important;
  box-shadow:0 0 0 3px var(--green-50) !important;
}
.apply-change-date{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--green-700) !important; font-family:var(--display);
  font-weight:700; font-size:12.5px; text-decoration:none;
}
.apply-change-date:hover{ color:var(--green) !important; text-decoration:underline; }
/* the discount-coupon "apply"/"remove" small buttons */
.discount_coupon .form_button,
.cartfields .form_button{
  min-height:44px; padding:11px 18px; font-size:14px;
}

/* payment-method block + help text */
.payment-details, .payment-type, .payment-details.payment-type{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:14px 16px; margin-top:6px;
}
.help{ color:var(--muted); font-size:12.5px; }

/* ---- 9.5 Booked-rooms summary table (hotel-info-booked__*) -------------- */
.hotel-info-booked__th-rooms, .hotel-info-booked__th-room-name,
.hotel-info-booked__th-nights, .hotel-info-booked__th-dates{
  background:var(--bg-soft); color:var(--navy-soft);
  font-family:var(--display); font-weight:700; font-size:12.5px;
  padding:11px 14px; border-bottom:1px solid var(--line);
}
.hotel-info-booked__room-name, .hotel-info-booked__td-rooms,
.hotel-info-booked__dates{ color:var(--ink); font-size:14px; }
.hotel-info-booked__room-name{ font-family:var(--display); font-weight:700; color:var(--navy-soft); }
.div-room-prices, .extras-table{ margin-top:8px; }

/* ---- 9.6 Primary "next step" / book buttons → green Konzept-A CTA -------- */
/* Most booking buttons already carry .form_button (→ green pill from §2). The
   forward-step control + the .btn-primary variant get the larger CTA look. */
.reservation_next_step,
.reservation_next_step .form_button,
.form_button.btn-primary{
  font-family:var(--display); font-weight:700;
}
.reservation_next_step{ margin-top:10px; display:flex; justify-content:flex-end; }
.reservation_next_step .form_button,
.form_button.btn-primary{
  background:var(--green) !important; color:#fff !important;
  border-radius:999px !important; min-height:50px; padding:14px 28px !important;
  font-size:15.5px; box-shadow:0 14px 30px -14px rgba(0,160,87,.7);
}
.reservation_next_step .form_button:hover,
.form_button.btn-primary:hover{ background:var(--green-600) !important; }

/* ---- 9.7 Empty-cart state ("Ihr Warenkorb ist leer") -------------------- */
/* Already a .msg.notice (styled in §1). Make the back-to-results link a button
   so the empty step still feels intentional & on-brand. */
.content-holder:has(.reservation_tabs) .msg.notice{
  text-align:center; padding:26px 22px;
}
.content-holder:has(.reservation_tabs) .msg.notice a{
  color:var(--green-700); font-weight:700;
}
.content-holder:has(.reservation_tabs) .msg.notice a:hover{ color:var(--green); }

/* ---- 9.7b Sticky price-summary sidebar (.booking-info) ------------------ */
/* uHotelBooking renders a real left summary column (.col-md-3.booking-info)
   on the booking pages with .left_box_container blocks (Buchungsdetails +
   Zwischensumme/Total). Turn each block into the Konzept-A .summary card and
   make it sticky like the mockup's price box. */
.booking-info{ }
.booking-info .left_box_container{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh); padding:18px; margin:0 0 16px;
}
.booking-info .side_box_heading,
.booking-info h3.side_box_heading{
  font-family:var(--display) !important; font-weight:800;
  font-size:16px; color:var(--navy-soft); margin:0 0 12px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.booking-info .side_box_content{ font-size:13.5px; color:var(--ink); }
.booking-info .side_box_content p{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 0 6px; }
.booking-info .side_box_content b{
  font-family:var(--display); font-weight:800; font-size:22px; color:var(--navy-soft);
}
.booking-info .alert-info{
  background:var(--green-50); border:1px solid var(--green-100);
  color:var(--green-700); border-radius:var(--r-sm); padding:9px 12px;
  font-size:12.5px; margin-top:10px;
}
.booking-info .line-hor{ display:none; }
/* keep the summary in view while scrolling the long booking form */
@media(min-width:993px){
  .booking-info{ position:sticky; top:calc(var(--hdr-h) + 16px); align-self:flex-start; }
}

/* ---- 9.8 Booking confirmation (booking_return) -------------------------- */
.content-holder:has(.reservation_tabs) .msg.success,
.center_box_content .msg.success{
  text-align:center;
}

/* ---- 9.9 TEST MODE alert pill ------------------------------------------- */
.center_box_content .msg.notice:has(+ .reservation_cart),
.test_mode_alert{ font-weight:600; }

/* ---- 9.10 RESPONSIVE (booking flow) ------------------------------------- */
@media(max-width:760px){
  table.reservation_tabs td.reservation_tab,
  table.reservation_tabs td.reservation_tab_active{
    font-size:11.5px; padding:12px 6px 12px 36px;
  }
  table.reservation_tabs td.reservation_tab::before,
  table.reservation_tabs td.reservation_tab_active::before{
    left:8px; width:22px; height:22px; font-size:11px;
  }
  table.reservation_cart td{ padding:10px 12px; font-size:13.5px; }
  .firststeptotalprice, td.firststeptotalprice{ font-size:19px !important; }
  .reservation_next_step{ justify-content:stretch; }
  .reservation_next_step .form_button,
  .form_button.btn-primary{ width:100%; }
}

/* ---- 9.11 BOOKING PAGE LAYOUT (body.rdk-booking, set by redesign-konto.js) ------
   ROOT PROBLEM: on the native checkout (page=booking*) the Bootstrap wrappers (.container,
   .container.pagecontainer) collapse to 0px width in the redesign, so the whole grid below
   collapses; the floated cols then OVERLAP. We fix it at the root: give the container a
   real VIEWPORT-based width (immune to the 0-width body), then force every grid descendant
   into plain block flow (no float / no offset / no abs) so the cards STACK in one compact
   centered column instead of piling on top of each other. */
body.rdk-booking .container,
body.rdk-booking .container.pagecontainer{
  width:min(900px, calc(100vw - 40px)) !important; max-width:none !important;
  margin:0 auto !important; padding:0 !important; float:none !important; left:auto !important;
}
body.rdk-booking .rightcontent,
body.rdk-booking .content-holder,
body.rdk-booking .center_box_content,
body.rdk-booking .left_box_container,
body.rdk-booking .col-md-3.booking-info,
body.rdk-booking [class*="col-md-"],
body.rdk-booking [class*="offset-"]{
  width:100% !important; max-width:100% !important;
  float:none !important; clear:both !important; position:static !important;
  margin-left:0 !important; margin-right:0 !important; left:auto !important; right:auto !important;
  box-sizing:border-box;
}
/* compact vertical rhythm + tidy summary cards */
body.rdk-booking .content-holder{ padding:10px 0 28px !important; }
body.rdk-booking .left_box_container{ margin:0 0 10px !important; }
body.rdk-booking .side_box_content{ background:#fff; border:1px solid var(--rd-line,#e6ece9); border-radius:12px; padding:12px 16px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
body.rdk-booking .side_box_content + .side_box_content{ margin-top:8px; }
/* compact each summary row: native markup is <p><strong>Label</strong><br>Value</p> (2 lines
   each = very tall). Collapse to a single line — label left, value right — to cut scrolling. */
body.rdk-booking .side_box_content p{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin:0 0 3px !important; line-height:1.35; }
body.rdk-booking .side_box_content p br{ display:none !important; }
body.rdk-booking .side_box_content p strong{ color:var(--rd-navy,#003244); font-weight:600; white-space:nowrap; }
body.rdk-booking .side_box_content h4{ margin:0 0 7px !important; font-weight:700; font-size:16px; }
/* hide the empty leading "Buchungsdetails" placeholder card (no content) to save space */
body.rdk-booking .left_box_container:first-of-type:has(> .side_box_content:only-child:empty){ display:none !important; }

/* "Weiter zur Buchung" CTA — in-flow at the end of the booking column (full width of the
   viewport-based container), so it sits above the footer, not below it. */
.rdk-cart-proceed-wrap{ margin:14px 0 4px; }
.rdk-cart-proceed{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:var(--rd-green,#00a057); color:#fff !important; text-decoration:none;
  font-family:var(--rd-display,system-ui); font-weight:700; font-size:16px;
  border-radius:999px; padding:15px 26px; min-height:54px; box-sizing:border-box;
  box-shadow:0 12px 30px -12px rgba(0,160,87,.55); transition:background .15s ease, transform .12s ease;
}
.rdk-cart-proceed:hover{ background:var(--rd-green-700,#00713e); transform:translateY(-1px); }
.rdk-cart-proceed svg{ flex:0 0 auto; }