/* =============================================================
   BECKMANN — RANGE-PICKER CSS OVERRIDE
   Farbpalette aus CMS-Theme-Variablen
   ============================================================= */

/*
 * Das CMS definiert diese Variablen (zweite :root überschreibt erste):
 *
 *   --primary-color:  {{property:style.primary-btn}}   (z.B. #5F6F81)
 *   --hover-color:    {{property:style.primary-btn}}b9  (primary + 73% opacity)
 *   --footer-color:   {{property:style.footer-background}}
 *   --font-color:     #405062  (fest)
 *   --light-grey:     #dadada  (fest)
 *   --white:          #ffffff  (fest)
 *
 * Der Range-Picker nutzt ausschließlich diese Variablen —
 * Farbanpassungen erfolgen allein über die CMS-Einstellungen.
 */

/* ---- Abgeleitete Picker-Variablen (einmalig hier definiert) ---- */
:root {
    --drp-primary:      var(--primary-color);
    --drp-primary-bg:   var(--hover-color);
    --drp-font:         var(--font-color);
    --drp-border:       var(--light-grey);
    --drp-radius:       6px;
}

/* ---- Versteckter Input (nur DRP-Trigger, nicht sichtbar) ---- */
.drp-hidden-input {
    position:       absolute;
    opacity:        0;
    height:         0;
    width:          0;
    padding:        0;
    border:         none;
    pointer-events: none;
}

/* ---- Display-Bar ---- */
.drp-display-bar {
    display:         flex;
    align-items:     center;
    background:      var(--white);
    border:          1.5px solid var(--drp-border);
    border-radius:   var(--drp-radius);
    overflow:        hidden;
    cursor:          pointer;
    max-width:       560px;
    margin:          0 auto 20px;
    transition:      border-color 0.2s, box-shadow 0.2s;
}
.drp-display-bar:hover {
    border-color: var(--drp-primary);
    box-shadow:   0 2px 10px rgba(0,0,0,0.10);
}

.drp-field {
    flex:            1;
    padding:         14px 18px;
    display:         flex;
    flex-direction:  column;
    gap:             4px;
    transition:      background 0.15s;
}
.drp-field:hover,
.drp-field.active {
    background: var(--drp-primary-bg);
}
.drp-field--from {
    border-right: 1px solid var(--drp-border);
}

.drp-field__label {
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--drp-primary);
    font-weight:    600;
}
.drp-field__value {
    font-size:   17px;
    color:       var(--drp-font);
    font-weight: 500;
    min-height:  24px;
}

.drp-field__arrow {
    padding:     0 10px;
    color:       var(--drp-primary);
    font-size:   14px;
    flex-shrink: 0;
}

.drp-nights-badge {
    background:  var(--drp-primary);
    color:       var(--white);
    padding:     6px 14px;
    font-size:   13px;
    font-weight: 600;
    align-self:  stretch;
    display:     flex;
    align-items: center;
    gap:         5px;
    white-space: nowrap;
}

/* ---- Daterangepicker Popup ---- */
/*
 * z-index hoch genug damit der Picker über Footer und Sidebar liegt.
 * position bleibt absolute (Plugin-Standard) — fixed würde drp.move()
 * in eine Reflow-Rekursion treiben (→ Maximum call stack exceeded).
 * Die korrekte Viewport-Position wird per JS nach dem Öffnen gesetzt.
 */
.daterangepicker {
    border:        1px solid var(--drp-border) !important;
    border-radius: 8px !important;
    box-shadow:    0 8px 32px rgba(0,0,0,0.12) !important;
    font-family:   inherit !important;
    z-index:       99999 !important;
}

/* Monats-Header */
.daterangepicker .calendar-table thead th,
.daterangepicker th.month {
    color:       var(--drp-font) !important;
    font-weight: 600 !important;
    font-size:   13px !important;
}

/* Navigation-Pfeile */
.daterangepicker .prev span,
.daterangepicker .next span {
    border-color: var(--drp-primary) !important;
}
.daterangepicker th.prev:hover,
.daterangepicker th.next:hover {
    background: var(--drp-primary-bg) !important;
}

/* Tages-Zellen */
.daterangepicker td.available {
    border-radius: 0 !important;
}
.daterangepicker td.available:hover {
    background: var(--drp-primary-bg) !important;
    color:      var(--drp-font) !important;
}

/* Startdatum */
.daterangepicker td.start-date,
.daterangepicker td.start-date:hover {
    background:    var(--drp-primary) !important;
    color:         var(--white) !important;
    border-radius: var(--drp-radius) 0 0 var(--drp-radius) !important;
}

/* Enddatum */
.daterangepicker td.end-date,
.daterangepicker td.end-date:hover {
    background:    var(--drp-primary) !important;
    color:         var(--white) !important;
    border-radius: 0 var(--drp-radius) var(--drp-radius) 0 !important;
}

/* Wenn Start = End */
.daterangepicker td.start-date.end-date {
    border-radius: var(--drp-radius) !important;
}

/* In-Range */
.daterangepicker td.in-range {
    background: var(--drp-primary-bg) !important;
    color:      var(--drp-font) !important;
}

/* Heute */
.daterangepicker td.today {
    font-weight: 700;
    color:       var(--drp-primary) !important;
}
.daterangepicker td.today::after {
    content:       '';
    display:       block;
    width:         4px;
    height:        4px;
    background:    var(--drp-primary);
    border-radius: 50%;
    margin:        2px auto 0;
}

/* Deaktivierte Tage */
.daterangepicker td.off,
.daterangepicker td.disabled,
.daterangepicker td.is-not-active {
    opacity:        0.35 !important;
    pointer-events: none !important;
    background:     transparent !important;
}

/* Preis im Kalender (wenn enable_pricecal aktiv) */
.daterangepicker td .price {
    font-size:   10px;
    color:       var(--drp-primary);
    display:     block;
    line-height: 1.2;
    margin-top:  1px;
}

/* Zellgröße (mehr Höhe wenn Preise angezeigt werden) */
.daterangepicker td {
    min-height:  44px !important;
    height:      44px !important;
    line-height: 1.3 !important;
    padding:     4px 0 !important;
    font-size:   13px !important;
    position:    relative;
}

/* Trennlinie zwischen zwei Monaten */
.daterangepicker .drp-calendar.right {
    border-left: 1px solid var(--drp-border) !important;
}

/* Footer-Buttons (falls autoApply:false) */
.daterangepicker .drp-buttons .btn-primary {
    background:   var(--drp-primary) !important;
    border-color: var(--drp-primary) !important;
}
.daterangepicker .drp-buttons .btn-default {
    border-color: var(--drp-border) !important;
    color:        var(--drp-font) !important;
}

/* Mindestaufenthalt-Tooltip */
.daterangepicker td .tips {
    background:     var(--drp-primary);
    color:          var(--white);
    font-size:      11px;
    padding:        3px 7px;
    border-radius:  4px;
    white-space:    nowrap;
    position:       absolute;
    z-index:        10;
    bottom:         105%;
    left:           50%;
    transform:      translateX(-50%);
    pointer-events: none;
}

/* Mindestaufenthalt-Markierung (preRangeS) */
.daterangepicker td.preRangeS {
    background: repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 3px,
            var(--drp-primary-bg) 3px,
            var(--drp-primary-bg) 6px
    ) !important;
}

/* ---- Promo-Code Buttons (code-date / code-next) ---- */
/*
 * Im Original stehen diese Styles nur innerhalb des <cs:if code != ''> Blocks.
 * Hier dauerhaft definiert für zuverlässiges Rendering.
 */
.alternative-block {
    position: absolute;
    width:    50%;
    left:     25%;
    z-index:  10;
}

.code-date,
.code-next {
    display:       block;
    padding:       12px 15px;
    color:         var(--white);
    float:         left;
    width:         100%;
    margin-bottom: 10px;
    text-align:    center;
    font-size:     15px;
    border:        none;
    border-right:  5px solid rgba(0,0,0,0.12);
    cursor:        pointer;
    transition:    opacity 0.25s ease, background 0.25s ease;
    border-radius: var(--drp-radius);
    box-sizing:    border-box;
}

/* Primäraktion "Weiter zur Buchung" — primary-color */
.code-date {
    background: var(--drp-primary);
}
.code-date:hover {
    opacity: 0.85;
}

/* Sekundäraktion "Abweichende An/Abreise" — etwas dunkler */
.code-next {
    background: var(--drp-font);
}
.code-next:hover {
    opacity: 0.8;
}

/* ---- Responsive: Mobile < 768px ---- */
@media (max-width: 767px) {
    /* Display-Bar bleibt einzeilig */
    .drp-display-bar {
        flex-direction: row !important;
        flex-wrap:      nowrap !important;
    }
    .drp-field--from {
        border-right:  none;
        border-bottom: none;
    }

    .alternative-block {
        position: relative;
        width:    100%;
        left:     0;
    }
}

/* ---- Footer / Sidebar Z-Index ---- */
/*
 * Der DRP landet per parentEl:'body' direkt im <body> und braucht
 * z-index:99999. Footer und Sidebar dürfen keinen höheren Z-Index haben
 * und dürfen keinen neuen Stacking Context aufbauen (kein transform,
 * filter oder will-change auf diesen Elementen).
 *
 * Falls der Footer im Theme einen eigenen Z-Index hat, hier überschreiben:
 */
footer,
.footer,
.tmpl-footer,
.soferu-footer,
[class*="footer"] {
    z-index: 100 !important;
    position: relative;
}

/* Sidebar ebenfalls unter dem Picker halten */
.sidebar,
.gn-menu-main,
[class*="sidebar"],
[class*="navigation"] {
    z-index: 1000 !important;
}

/* ---- Dropdown-Container ---- */
#drp-calendar-container {
    display:       none;
    position:      relative;
    z-index:       9999;
    background:    var(--white);
    border:        1.5px solid var(--primary-color);
    border-top:    none;
    border-radius: 0 0 var(--drp-radius) var(--drp-radius);
    overflow:      hidden;
    max-width:     560px;
    margin:        0 auto;
}
@media (max-width: 600px) {
    #drp-calendar-container {
        max-width: 100% !important;
        margin:    0 !important;
    }

    /* tr.down: global geregelt */
}

/* out-of-cal — alle sichtbar damit Layout nicht springt */
/* strictCalendar() blendet nur komplette Fremdmonats-Zeilen aus */
.daterangepicker table tbody td.out-of-cal {
    visibility:     visible !important;
    pointer-events: none !important;
    cursor:         default !important;
}
.daterangepicker table tbody td.out-of-cal p {
    height:       auto !important;
    opacity:      0.3 !important;
    border-color: #ddd !important;
    color:        #ccc !important;
}

/* Vergangene/nicht verfügbare Tage: nicht klickbar */
.daterangepicker td.disabled,
.daterangepicker td.off:not(.available) {
    pointer-events: none !important;
    cursor:         default !important;
}

/* Verfügbare Tage: immer volle Deckkraft */
.daterangepicker td.available {
    opacity:        1 !important;
    pointer-events: auto !important;
    visibility:     visible !important;
}

/* Kalender im Container füllt die Breite */
#drp-calendar-container .daterangepicker {
    position:   relative !important;
    top:        auto !important;
    left:       auto !important;
    display:    block !important; /* inline:true setzt dies automatisch */
    width:      100% !important;
    float:      none !important;
    box-shadow: none !important;
    border:     none !important;
    margin:     0 !important;
}

#drp-calendar-container .daterangepicker .drp-calendar {
    max-width: 50% !important;
}
@media (max-width: 600px) {
    #drp-calendar-container .daterangepicker .drp-calendar.left {
        max-width:   100% !important;
        width:       100% !important;
        float:       none !important;
        padding:     4px !important;
    }
    #drp-calendar-container .daterangepicker .drp-calendar.right {
        display: none !important;
    }
    /* Vorwärts-Pfeil im linken Kalender — beide Klassen-Varianten */
    #drp-calendar-container .calendar.left th.next,
    #drp-calendar-container .drp-calendar.left th.next,
    .daterangepicker .calendar.left th.next,
    .daterangepicker .drp-calendar.left th.next {
        display:    table-cell !important;
        visibility: visible !important;
    }
    /* Tabelle volle Breite */
    #drp-calendar-container .calendar-table table {
        width:        100% !important;
        min-width:    0 !important;
        table-layout: fixed !important;
    }
    #drp-calendar-container .calendar-table td,
    #drp-calendar-container .calendar-table th {
        padding:   3px 1px !important;
        font-size: 11px !important;
    }
    #drp-calendar-container td p {
        margin:  0 !important;
        padding: 1px 0 !important;
    }
    #drp-calendar-container td p i.price {
        display: none !important;
    }
}

/* Display-Bar zeigt offenen Zustand */
.drp-display-bar.drp-active {
    border-bottom-left-radius:  0;
    border-bottom-right-radius: 0;
    border-bottom-color:        transparent;
    border-color:               var(--primary-color);
}

/* Chevron dreht sich beim Öffnen */
.drp-toggle-icon {
    padding:     0 14px;
    color:       var(--primary-color);
    font-size:   13px;
    flex-shrink: 0;
    transition:  transform 0.2s;
}
.drp-active .drp-toggle-icon {
    transform: rotate(180deg);
}

/* Body-Scroll sperren nicht mehr nötig — kein Modal */

/* ---- Mobile: ein Monat ---- */
@media (max-width: 600px) {
    #drp-calendar-container .daterangepicker .drp-calendar.right {
        display: none !important;
    }
    #drp-calendar-container .daterangepicker .drp-calendar.left {
        max-width: 100% !important;
        width:     100% !important;
        float:     none !important;
    }
}

/* ---- Icon spiegeln (Abreise-Pfeil) ---- */
.drp-icon-flip {
    transform:   scaleX(-1);
    display:     inline-block;
}

/* ---- Footer / Sidebar Z-Index ---- */
footer,
.footer,
.tmpl-footer,
.soferu-footer,
[class*="footer"] {
    z-index: 100 !important;
    position: relative;
}

.sidebar,
.gn-menu-main,
[class*="sidebar"],
[class*="navigation"] {
    z-index: 1000 !important;
}


/* ================================================================
   ZWEI KALENDER NEBENEINANDER
   Echte DOM-Struktur: td > p > i + br + Zahl + br + i.price
   Basis-Style des Plugins: .daterangepicker { width: 278px }
   und td { width: 20px; min-width: 32px } — beides überschreiben.
   ================================================================ */

/* 1. Container: volle Breite */
#drp-calendar-container {
    max-width: 100% !important;
}

/* 2. Picker-Wrapper: 278px-Hardcode aufheben, flex für zwei Hälften */
#drp-calendar-container .daterangepicker {
    width:          100% !important;
    max-width:      100% !important;
    min-width:      0 !important;
    display:        flex !important;
    flex-direction: row !important;
    flex-wrap:      wrap !important;
    overflow:       visible !important;
    padding:        0 !important;
    box-sizing:     border-box !important;
}

/* 3. Jede Kalender-Hälfte: genau 50% */
#drp-calendar-container .calendar.left,
#drp-calendar-container .calendar.right,
#drp-calendar-container .drp-calendar.left,
#drp-calendar-container .drp-calendar.right {
    flex:       0 0 50% !important;
    width:      50% !important;
    max-width:  50% !important;
    min-width:  0 !important;
    float:      none !important;
    display:    block !important;
    box-sizing: border-box !important;
    padding:    12px !important;
}

/* Trennlinie */
#drp-calendar-container .calendar.right,
#drp-calendar-container .drp-calendar.right {
    border-left: 1px solid var(--light-grey) !important;
}

/* 4. Input-Felder ausblenden */
#drp-calendar-container .daterangepicker_input {
    display: none !important;
}

/* 5. Tabelle: volle Breite, festes Layout */
#drp-calendar-container .calendar-table {
    width:    100% !important;
    display:  block !important;
    overflow: visible !important;
}

#drp-calendar-container .calendar-table table {
    width:           100% !important;
    min-width:       0 !important;
    table-layout:    fixed !important;
    border-collapse: separate !important;
    border-spacing:  2px !important;
    display:         table !important;
    box-sizing:      border-box !important;
}

/* 6. Zellen: min-width:32px und width:20px aufheben,
      feste Höhe gegen Layout-Shift beim Klick */
#drp-calendar-container .calendar-table td,
#drp-calendar-container .calendar-table th {
    width:          auto !important;
    min-width:      0 !important;
    max-width:      none !important;
    height:         62px !important;
    min-height:     62px !important;
    max-height:     62px !important;
    padding:        3px !important;
    box-sizing:     border-box !important;
    text-align:     center !important;
    vertical-align: middle !important;
    overflow:       hidden !important;
    white-space:    normal !important;
}

/* Wochentag-Header schmaler */
#drp-calendar-container .calendar-table th {
    height:     28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    font-size:  11px !important;
    opacity:    0.7;
}

/* 7. Inhalt der Kachel: p > i(Wochentag) + Zahl + i.price */
#drp-calendar-container .calendar-table td p {
    margin:      0 !important;
    padding:     0 !important;
    line-height: 1.3 !important;
    font-size:   13px !important;
    /* Verhindert dass p die Zelle aufdrückt */
    overflow:    hidden !important;
    max-height:  56px !important;
}

#drp-calendar-container .calendar-table td p i:first-child {
    font-size:   9px !important;
    display:     block !important;
    line-height: 1.2 !important;
    opacity:     0.7;
}

#drp-calendar-container .calendar-table td p i.price {
    font-size:   9px !important;
    display:     block !important;
    line-height: 1.2 !important;
    color:       var(--primary-color) !important;
}

/* 8. Ranges (Apply/Cancel) ausblenden — autoApply:true */
#drp-calendar-container .ranges {
    flex:    0 0 100% !important;
    display: none !important;
}

/* ---- Mobile < 680px: ein Monat ---- */
@media (max-width: 680px) {
    #drp-calendar-container .calendar.right,
    #drp-calendar-container .drp-calendar.right {
        display: none !important;
    }
    #drp-calendar-container .calendar.left,
    #drp-calendar-container .drp-calendar.left {
        flex:      0 0 100% !important;
        width:     100% !important;
        max-width: 100% !important;
    }
}


/* ================================================================
   PART-2X — Arrangement-Block
   Saubere Klassen direkt im Template, kein Bootstrap-Override nötig.
   ================================================================ */

#part-2x.disabled { display: none !important; }

#part-2x {
    display:       none;
    border-top:    2px solid var(--primary-color) !important;
    border-radius: 0 0 10px 10px !important;
    padding:       28px !important;
    box-sizing:    border-box !important;
    margin-top:    0 !important;
}

/* Titel */
.arr-section-title {
    font-size:     20px !important;
    font-weight:   500 !important;
    color:         var(--primary-color) !important;
    text-align:    center;
    margin-bottom: 20px !important;
}

/* USP-Leiste */
#drp-usp-bar {
    display:         flex;
    justify-content: space-around;
    gap:             12px;
    padding:         18px 0;
    margin-bottom:   24px;
    border-bottom:   1.5px solid var(--light-grey);
    flex-wrap:       wrap;
}
.drp-usp {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    font-size:      13px;
    color:          var(--font-color);
    text-align:     center;
    flex:           1;
    min-width:      100px;
}
.drp-usp i { font-size: 22px; color: var(--primary-color); }

/* Karten-Grid */
.arr-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   14px;
    align-items:           start;
}

/* Basis-Karte */
.arr-card {
    position:       relative;
    display:        flex;
    flex-direction: column;
    min-height:     140px;
    border:         1.5px solid var(--light-grey);
    border-radius:  12px;
    overflow:       hidden;
    cursor:         pointer;
    background:     var(--white);
    transition:     border-color 0.2s, box-shadow 0.2s;
}
.arr-card:hover {
    border-color: var(--primary-color);
    box-shadow:   0 2px 14px rgba(0,110,182,0.1);
}
.arr-card.active {
    border-color: var(--primary-color);
    box-shadow:   0 0 0 2.5px var(--primary-color);
}

/* Hintergrundbild */
.arr-card__bg {
    position:            absolute;
    inset:               0;
    background-size:     cover;
    background-position: center;
    opacity:             0.12;
    transition:          opacity 0.2s;
}
.arr-card:hover .arr-card__bg,
.arr-card.active .arr-card__bg { opacity: 0.22; }

/* Radio-Indikator oben rechts */
.arr-card__radio {
    position:   absolute;
    top:        12px;
    right:      12px;
    z-index:    2;
    font-size:  18px;
    color:      var(--light-grey);
    transition: color 0.2s;
    line-height: 1;
}
/* arr-card überschreibt .item-box Styles */
#part-2x .arr-card.item-box {
    background:   var(--white) !important;
    color:        var(--font-color) !important;
    border-left:  1.5px solid var(--light-grey) !important;
    border-right: 1.5px solid var(--light-grey) !important;
    border-bottom: 1.5px solid var(--light-grey) !important;
}

/* Radio-Indikator: Font Awesome Icons komplett ausblenden */
.arr-card__radio { display: none !important; }

/* is-activeated global */
.is-activeated { overflow: visible !important; }


/* Info-Button unten rechts */
.arr-card__info {
    position:         absolute;
    bottom:           10px;
    right:            10px;
    z-index:          2;
    width:            22px;
    height:           22px;
    border-radius:    50%;
    background:       var(--primary-color);
    color:            var(--white);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        11px;
    cursor:           pointer;
    opacity:          0.7;
    transition:       opacity 0.15s;
}
.arr-card__info:hover { opacity: 1; }

/* Karten-Inhalt */
.arr-card__body {
    position:       relative;
    z-index:        1;
    padding:        14px 42px 14px 14px;
    display:        flex;
    flex-direction: column;
    gap:            4px;
    flex:           1;
}

/* Empfohlen-Badge — nur beim ersten Arrangement sichtbar */
.arr-card__badge {
    display:        none;
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.04em;
    padding:        2px 8px;
    border-radius:  4px;
    background:     var(--primary-color);
    color:          var(--white);
    align-self:     flex-start;
    margin-bottom:  2px;
}
/* Erstes .arr-card.arrangements zeigt Badge */
.arr-card.arrangements:first-of-type .arr-badge-first { display: inline-block; }

.arr-card__title {
    font-size:   15px;
    font-weight: 500;
    color:       var(--font-color);
    margin:      0;
}
.arr-card__duration {
    font-size: 12px;
    color:     var(--font-color);
    opacity:   0.6;
    margin:    0;
}
.arr-card__price {
    font-size:   15px;
    font-weight: 500;
    color:       var(--primary-color);
    margin-top:  auto;
    padding-top: 6px;
}

/* "Nur Zimmer buchen" — dezenter */
.arr-card--free {
    min-height:   90px !important;
    border-style: dashed;
    opacity:      0.75;
}
.arr-card--free:hover { opacity: 1; }
.arr-card--free .arr-card__title {
    font-size: 14px;
    opacity:   0.85;
}
.arr-card--free .arr-card__sub {
    font-size: 12px;
    color:     var(--font-color);
    opacity:   0.55;
}

/* part-3 initial versteckt */

/* ---- Mobile ---- */
@media (max-width: 600px) {
    #part-2x  { padding: 16px !important; }
    .arr-grid { grid-template-columns: 1fr 1fr; }
    #drp-usp-bar { gap: 8px; }
}

/* ================================================================
   MIN-HEIGHT ENTFERNEN + WEITER-BUTTONS AUSBLENDEN
   Natürliche Höhe statt Viewport-füllende Steps.
   ================================================================ */

/* min-height überschreiben — wird per inline-style gesetzt */
.or-box[style*="min-height"] {
    min-height: 0 !important;
}
.or-box {
    min-height: 0 !important;
}

/* Weiter-Buttons ausblenden — außer "Weiter ohne Extras" */
.scroll-btn,
.fixed-chev,
.container-scroll-step {
    display: none !important;
}

/* part-5 — das System steuert Sichtbarkeit selbst.
   hide4ever wird in reservation.js beim showExtras entfernt. */
#part-5.disabled,
#part-5.inactive {
    display: none !important;
}
/* hide4ever nur ausblenden wenn AUCH inactive/disabled —
   nicht allein, da es beim Extras-Anzeigen entfernt werden soll */
#part-5.hide4ever:not(.inactive-override) {
    display: none !important;
}

/* "Weiter ohne Extras" bleibt sichtbar und scrollt weiter */
#part-5 .no-extras {
    display:       flex !important;
    align-items:   center;
    gap:           6px;
    font-size:     13px;
    color:         var(--primary-color);
    cursor:        pointer;
    padding:       10px 0;
    opacity:       0.75;
    transition:    opacity 0.15s;
    border:        none;
    background:    none;
}
#part-5 .no-extras:hover { opacity: 1; }

/* Steps mit mehr Abstand damit der Übergang beim Scrollen klar ist */
.or-box {
    padding-bottom: 40px;
    margin-bottom:  8px;
}

/* Trennlinie zwischen Steps */
.or-box + .or-box {
    border-top: 1px solid var(--light-grey);
    padding-top: 32px;
}

/* ================================================================
   EXTRAS (part-5) — nur anzeigen wenn vorhanden
   Das System setzt .disabled + display:none wenn keine Extras.
   Wir stellen sicher dass es bei vorhandenen Extras korrekt
   sichtbar ist und gut aussieht.
   ================================================================ */

/* part-5 sichtbar wenn nicht disabled/inactive */
#part-5:not(.disabled):not(.inactive):not(.hide4ever) {
    display: block !important;
}

/* Überschrift */
#part-5 .or-box-title h5 {
    color: var(--font-color);
}

/* "Weiter ohne Extras" Link — als dezenten Button stylen */
#part-5 .no-extras {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    font-size:     13px;
    color:         var(--primary-color);
    cursor:        pointer;
    padding:       6px 0;
    margin-bottom: 12px;
    opacity:       0.75;
    transition:    opacity 0.15s;
}
#part-5 .no-extras:hover { opacity: 1; }
#part-5 .no-extras .glyphicon { font-size: 11px; }

/* Extra-Karten */
#part-5 .extra {
    border:        1px solid var(--light-grey);
    border-radius: 10px;
    padding:       14px;
    margin-bottom: 10px;
    transition:    border-color 0.2s;
}
#part-5 .extra.active {
    border-color: var(--primary-color);
}

/* Auto-Scroll zu part-6 nach Extras */


/* ================================================================
   WARENKORB-OVERLAY
   ================================================================ */

/* part-6 unsichtbar im Hintergrund */
#part-6 {
    display:    none !important;
    height:     0 !important;
    overflow:   hidden !important;
    padding:    0 !important;
    margin:     0 !important;
}

/* Wrapper */
#drp-cart {
    display: none;
    position: fixed;
    bottom:   28px;
    right:    24px;
    z-index:  9000;
}

/* Schwebendes Icon */
#drp-cart-btn {
    width:         56px;
    height:        56px;
    border-radius: 50%;
    background:    var(--primary-color);
    color:         var(--white);
    border:        none;
    font-size:     22px;
    cursor:        pointer;
    box-shadow:    0 4px 16px rgba(0,0,0,0.18);
    display:       flex;
    align-items:   center;
    justify-content: center;
    position:      relative;
    transition:    transform 0.15s, box-shadow 0.15s;
    margin-left:   auto;
}
#drp-cart-btn:hover {
    transform:  translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}

/* Badge mit Artikelanzahl */
.drp-cart-badge {
    position:      absolute;
    top:           -4px;
    right:         -4px;
    width:         20px;
    height:        20px;
    border-radius: 50%;
    background:    #e53935;
    color:         var(--white);
    font-size:     11px;
    font-weight:   700;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border:        2px solid var(--white);
}

/* Puls-Animation wenn Warenkorb aktualisiert wird */
@keyframes cartPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.drp-cart-pulse { animation: cartPulse 0.5s ease; }

/* Overlay-Panel */
#drp-cart-overlay {
    position:      absolute;
    bottom:        66px;
    right:         0;
    width:         340px;
    background:    var(--white);
    border-radius: 12px;
    box-shadow:    0 8px 32px rgba(0,0,0,0.16);
    border:        1px solid var(--light-grey);
    overflow:      hidden;
}

/* Header */
.dco-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 16px 12px;
    background:      var(--primary-color);
    color:           var(--white);
}
.dco-title {
    font-size:   15px;
    font-weight: 500;
    display:     flex;
    align-items: center;
    gap:         8px;
}
.dco-close {
    background:  transparent;
    border:      none;
    color:       var(--white);
    font-size:   18px;
    cursor:      pointer;
    padding:     2px 6px;
    border-radius: 4px;
    opacity:     0.8;
    transition:  opacity 0.15s;
    line-height: 1;
}
.dco-close:hover { opacity: 1; }

/* Body */
.dco-body {
    padding: 14px 16px;
}

/* Positionen */
.dco-positions { margin-bottom: 12px; }

.dco-empty {
    font-size: 13px;
    color:     var(--font-color);
    opacity:   0.5;
    margin:    0;
    text-align: center;
    padding:   8px 0;
}

.dco-pos {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             12px;
    padding:         7px 0;
    border-bottom:   0.5px solid var(--light-grey);
}
.dco-pos:last-child { border-bottom: none; }

.dco-pos-name {
    font-size:  13px;
    color:      var(--font-color);
    flex:       1;
    line-height: 1.4;
}
.dco-pos-name br { display: block; }
.dco-pos-price {
    font-size:   13px;
    font-weight: 500;
    color:       var(--font-color);
    white-space: nowrap;
}

/* Trennlinie */
.dco-divider {
    height:     1px;
    background: var(--light-grey);
    margin:     10px 0;
}

/* Gesamtsumme */
.dco-total-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    margin-bottom:   14px;
}
.dco-total-label {
    font-size:  13px;
    color:      var(--font-color);
    opacity:    0.6;
}
.dco-total-price {
    font-size:   20px;
    font-weight: 500;
    color:       var(--primary-color);
}

/* Gutschein */
.dco-coupon {
    display: flex;
    gap:     6px;
}
.dco-coupon-input {
    flex:      1 !important;
    font-size: 13px !important;
    padding:   7px 10px !important;
}
.dco-coupon-btn {
    background:    var(--primary-color);
    color:         var(--white);
    border:        none;
    border-radius: 6px;
    padding:       7px 12px;
    font-size:     13px;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.2s;
}
.dco-coupon-btn:hover { opacity: 0.85; }
.dco-coupon-btn--success { background: #27a060 !important; }

/* Footer */
.dco-footer {
    padding:    0 16px 14px;
}
.dco-cta {
    width:         100%;
    background:    var(--primary-color);
    color:         var(--white);
    border:        none;
    border-radius: 8px;
    padding:       12px;
    font-size:     15px;
    font-weight:   500;
    cursor:        pointer;
    transition:    opacity 0.15s;
}
.dco-cta:hover { opacity: 0.85; }

/* Mobile: Overlay links ausrichten */
@media (max-width: 400px) {
    #drp-cart-overlay {
        right:  auto;
        left:   0;
        width:  calc(100vw - 48px);
    }
    #drp-cart {
        right: 12px;
        bottom: 16px;
    }
}

/* ================================================================
   PART-7 — Formular UX
   ================================================================ */

/* Rechnungsadresse Toggle */
.p7-address-toggle {
    margin:      16px 0 8px;
}
.p7-address-check {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   13px;
    color:       var(--font-color);
    cursor:      pointer;
    user-select: none;
}
.p7-address-check input[type="checkbox"] {
    width:  16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
}
.p7-address {
    margin-top: 12px;
}

/* "Weitere Angaben" Toggle */
.p7-extras-toggle {
    margin: 12px 0 4px;
}
.p7-extras-link {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    font-size:   13px;
    color:       var(--primary-color);
    cursor:      pointer;
    opacity:     0.8;
    transition:  opacity 0.15s;
}
.p7-extras-link:hover { opacity: 1; }
.p7-extras { margin-top: 10px; }

/* PLZ + Ort nebeneinander */
#p7-address > div[style*="flex"] label {
    display: block;
}

/* "Ich bin auch Gast 1" */
.p7-guest-self {
    display:       flex;
    align-items:   center;
    gap:           8px;
    font-size:     13px;
    color:         var(--font-color);
    cursor:        pointer;
    margin:        8px 0 14px;
    user-select:   none;
}
.p7-guest-self input[type="checkbox"] {
    width:        16px;
    height:       16px;
    accent-color: var(--primary-color);
    cursor:       pointer;
}

/* Synced Gast-Block: ausgegraut wenn Besteller = Gast 1 */
.p7-guest-synced .guest:first-child input[name="guest_first_name"],
.p7-guest-synced .guest:first-child input[name="guest_name"],
.p7-guest-synced .guest:first-child select[name="guest_salutation"] {
    opacity:    0.6;
    background: var(--color-background-secondary, #f5f5f5);
}

/* Gäste-Titel */
.guest-title {
    font-size:     15px;
    font-weight:   500;
    color:         var(--font-color);
    margin:        16px 0 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--light-grey);
}

/* ================================================================
   PART-7 — Layout-Fixes
   ================================================================ */

/* Zweispalten-Layout: linke Spalte zuerst, rechte darunter auf Mobile */
#part-7 .persons-form.col-md-6 {
    padding-top: 0 !important;
}

/* Rechnungsadresse: Toggle-Zeile korrekt positionieren */
.p7-address-toggle {
    margin:    24px 0 0 !important;
    padding:   14px 0 0;
    border-top: 1px solid var(--light-grey);
}
.p7-address-check {
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
}

/* Adresse initial versteckt — Inline-Style wird durch JS gesetzt,
   aber als Fallback */
#p7-address {
    margin-top: 14px;
}

/* "Ich bin auch Gast 1" — rechts in der Guest-Zeile, nicht außerhalb */
.p7-guest-self {
    display:       inline-flex !important;
    margin:        0 0 14px 0 !important;
    padding:       8px 12px;
    background:    color-mix(in srgb, var(--primary-color) 8%, transparent);
    border-radius: 8px;
    font-size:     13px;
    font-weight:   500;
    color:         var(--primary-color) !important;
    border:        1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
}

/* guest-title und Checkbox in einer Zeile */
.col-md-12.guest_info .guest-title {
    display:     inline-block;
    margin-right: 16px;
    border-bottom: none;
    padding-bottom: 0;
}
.col-md-12.guest_info {
    border-top:  1px solid var(--light-grey);
    padding-top: 16px;
    margin-top:  8px;
    width:       100% !important;
    float:       none !important;
    clear:       both !important;
}

@media (max-width: 768px) {
    .col-md-12.guest_info {
        display: block !important;
        width:   100% !important;
    }
    #part-7 .row {
        display: block !important;
    }
    #part-7 .col-md-6,
    #part-7 .col-sm-6 {
        width: 100% !important;
        float: none !important;
    }
}
.col-md-12.guest_info > .guest-title,
.col-md-12.guest_info > .p7-guest-self {
    vertical-align: middle;
}

/* Privat/Firma Buttons schöner */
.radio-personal-bussines {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
}
.radio-personal-bussines .btn {
    border-radius: 0 !important;
    padding: 7px 20px !important;
    font-size: 14px !important;
}
.radio-personal-bussines .btn:first-child {
    border-radius: 8px 0 0 8px !important;
}
.radio-personal-bussines .btn:last-child {
    border-radius: 0 8px 8px 0 !important;
    margin-left: 0 !important;
}

/* Labels konsistent */
#part-7 label {
    font-size:     13px !important;
    font-weight:   500 !important;
    color:         var(--font-color) !important;
    margin-bottom: 4px !important;
    display:       block;
}
#part-7 label.required-l {
    color: var(--primary-color) !important;
}

/* Felder etwas mehr Luft nach unten */
#part-7 .form-control {
    margin-bottom: 14px !important;
}
#part-7 select.form-control {
    margin-bottom: 14px !important;
}

/* Notice (*Pflichtangabe) */
#part-7 .notice {
    font-size:  12px;
    color:      var(--font-color);
    opacity:    0.6;
    margin-top: 4px;
    clear:      both;
    padding:    0 15px;
}

/* Länderliste optgroup Trennlinie */
#part-7 select[name="cms_country_id"] optgroup[label="──────────"] {
    font-size: 10px;
    color: var(--light-grey);
}

/* Gast-Header: Titel und Checkbox nebeneinander */
.p7-guest-header {
    display:     flex;
    align-items: center;
    gap:         16px;
    flex-wrap:   wrap;
    padding:     16px 0 12px;
    border-top:  1px solid var(--light-grey);
    margin-top:  8px;
}
.p7-guest-header .guest-title {
    border-bottom: none !important;
    padding:       0 !important;
    margin:        0 !important;
}
/* guest_info border-top nur über p7-guest-header */
.col-md-12.guest_info {
    border-top:  none !important;
    padding-top: 0 !important;
    margin-top:  8px !important;
}

/* ================================================================
   LAW-TOPICS — AGB / Datenschutz / Buchen-Button
   ================================================================ */

.law-topics {
    margin-top:    24px;
    padding-top:   20px;
    border-top:    1.5px solid var(--light-grey);
}

/* Einzelne Zeile */
.law-item {
    margin-bottom: 12px;
}

.law-label {
    display:     flex !important;
    align-items: flex-start !important;
    gap:         10px !important;
    cursor:      pointer;
    font-weight: 400 !important;
    color:       var(--font-color) !important;
    font-size:   14px !important;
    line-height: 1.5 !important;
    margin:      0 !important;
}

/* Checkbox */
.law-cb {
    flex-shrink:  0;
    width:        18px !important;
    height:       18px !important;
    margin-top:   2px;
    accent-color: var(--primary-color);
    cursor:       pointer;
}

/* Text */
.law-text {
    flex: 1;
}

/* Inline-Link zu Modal */
.law-link {
    color:           var(--primary-color) !important;
    text-decoration: underline !important;
    cursor:          pointer !important;
    font-weight:     500 !important;
}
.law-link:hover { opacity: 0.75; }

/* Pflicht-Hinweis */
.law-hint {
    font-size:  12px;
    color:      var(--font-color);
    opacity:    0.5;
    margin:     4px 0 20px;
}
.law-required-mark {
    color:       var(--primary-color);
    font-weight: 700;
}

/* Submit-Bereich */
.law-submit {
    text-align: center;
    margin-top: 8px;
}

/* Buchen-Button — initial gedimmt bis alle CBs angekreuzt */
.law-booknow {
    display:       inline-flex !important;
    align-items:   center;
    gap:           10px;
    padding:       14px 36px !important;
    font-size:     16px !important;
    font-weight:   500 !important;
    border-radius: 10px !important;
    opacity:       0.45;
    pointer-events: none;
    transition:    opacity 0.25s, box-shadow 0.2s;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.law-booknow.law-booknow--ready {
    opacity:        1;
    pointer-events: auto;
    box-shadow:     0 4px 16px rgba(0,110,182,0.25);
}
.law-booknow.law-booknow--ready:hover {
    box-shadow: 0 6px 22px rgba(0,110,182,0.35);
    transform:  translateY(-1px);
}

/* Sicherheits-Hinweis unter Button */
.law-secure {
    font-size:  12px;
    color:      var(--font-color);
    opacity:    0.5;
    margin-top: 10px;
    display:    flex;
    align-items: center;
    justify-content: center;
    gap:        6px;
}
.law-secure i { color: #27a060; opacity: 1; }

/* law-link als eigene Zeile — Block-Element nach dem Text */
.law-text {
    display: block;
}
.law-link {
    display:     block !important;
    font-size:   12px !important;
    font-weight: 400 !important;
    opacity:     0.75;
    margin-top:  3px;
}
.law-link:hover { opacity: 1; }
.law-link i { font-size: 10px; }

/* ================================================================
   LAW-TOPICS — System-Style Overrides
   Textelement ist <div> statt <span> — input + span greift nicht.
   ================================================================ */

/* .law-text ist ein div — kein System-Override nötig */
.law-text {
    display: block;
    flex:    1;
}

/* Checkbox korrekt darstellen */
.law-cb {
    flex-shrink:  0 !important;
    width:        18px !important;
    height:       18px !important;
    min-width:    18px !important;
    margin:       2px 0 0 !important;
    float:        none !important;
    position:     relative !important;
    display:      inline-block !important;
    accent-color: var(--primary-color);
}

/* ================================================================
   LAW-TOPICS — Eine Checkbox, Links separat
   ================================================================ */

/* Link-Leiste unter der Checkbox */
.law-links {
    display:   flex;
    gap:       16px;
    flex-wrap: wrap;
    margin:    10px 0 0 28px; /* 28px = Checkbox-Breite + Gap */
}

.law-links .law-link {
    display:     inline-flex !important;
    align-items: center;
    gap:         5px;
    font-size:   12px !important;
    color:       var(--primary-color) !important;
    opacity:     0.7;
    cursor:      pointer;
    text-decoration: none !important;
    transition:  opacity 0.15s;
    white-space: nowrap;
}
.law-links .law-link:hover { opacity: 1; }
.law-links .law-link i { font-size: 11px; }
/* ================================================================
   FORTSCHRITTSBALKEN AUSBLENDEN
   ================================================================ */
div.gui.steps {
    display: none !important;
}

/* ================================================================
   PART-3 — ZIMMERAUSWAHL
   ================================================================ */

/* Sortierung */
#part-3 .sorter {
    display:         flex;
    justify-content: flex-end;
    margin-bottom:   16px;
}
#part-3 .sorter select {
    width:     auto !important;
    font-size: 13px !important;
    padding:   6px 10px !important;
}

/* Grid */
#part-3 .select-room {
    display:               grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap:                   16px !important;
    border:                none !important;
    padding:               0 !important;
}
#part-3 .room-boxes { margin-bottom: 0 !important; }

/* Karte */
#part-3 .room-inner {
    border:         1.5px solid var(--light-grey);
    border-radius:  12px;
    overflow:       hidden;
    background:     var(--white);
    transition:     border-color 0.2s, box-shadow 0.2s;
    position:       relative;
    display:        flex;
    flex-direction: column;
}
#part-3 .room-inner:hover {
    border-color: var(--primary-color);
    box-shadow:   0 2px 16px rgba(0,0,0,0.08);
}
#part-3 .room-boxes.active .room-inner {
    border-color: var(--primary-color);
    box-shadow:   0 0 0 2.5px var(--primary-color);
}

/* Bild */
#part-3 .room-image-slider {
    height:     180px;
    flex-shrink: 0;
    overflow:   hidden;
    background: var(--light-grey);
    position:   relative;
}
#part-3 .room-image-slider .carousel,
#part-3 .room-image-slider .carousel-inner,
#part-3 .room-image-slider .carousel-inner .item { height: 100% !important; }
#part-3 .room-image-slider img {
    width:      100% !important;
    height:     180px !important;
    object-fit: cover !important;
}

/* is-activeated: komplett ausblenden — kein Dreieck, kein Kreis */
#part-3 .is-activeated,
#part-3 .is-activeated::before,
#part-3 .is-activeated::after,
.active .is-activeated::before,
.active .is-activeated::after {
    display: none !important;
}

/* Aktive Karte: nur Border-Highlight */
#part-3 .room-boxes.active .room-inner {
    border-color: var(--primary-color) !important;
    box-shadow:   0 0 0 2.5px var(--primary-color) !important;
}

/* Empfohlen-Badge */
#part-3 .room-boxes:first-child .room-image-slider::after {
    content:        'Empfohlen';
    position:       absolute;
    top:            10px;
    left:           10px;
    background:     var(--primary-color);
    color:          var(--white);
    font-size:      11px;
    font-weight:    600;
    padding:        3px 10px;
    border-radius:  4px;
    z-index:        2;
    letter-spacing: 0.04em;
}

/* Karten-Body */
#part-3 .list-group-item {
    padding:        14px 16px 16px !important;
    border:         none !important;
    background:     transparent !important;
    display:        flex;
    flex-direction: column;
    flex:           1;
}

/* Header: Titel + Info-Button */
.room-card-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             8px;
    margin-bottom:   8px;
}
.room-card-header .title {
    font-size:   16px !important;
    font-weight: 500 !important;
    color:       var(--font-color) !important;
    flex:        1;
}
#part-3 .room-info-btn {
    width:           22px;
    height:          22px;
    border-radius:   50%;
    background:      var(--primary-color);
    color:           var(--white) !important;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       10px;
    cursor:          pointer;
    flex-shrink:     0;
    opacity:         0.65;
    transition:      opacity 0.15s;
}
#part-3 .room-info-btn:hover { opacity: 1; }

/* Badge-Zeile (für zukünftige Badges wie qm, Belegung etc.) */
#part-3 .room-badges {
    display:     flex;
    flex-wrap:   wrap;
    gap:         5px;
    margin-bottom: 10px;
}
#part-3 .room-badge {
    font-size:     11px;
    color:         var(--font-color);
    opacity:       0.65;
    background:    color-mix(in srgb, var(--font-color) 8%, transparent);
    border-radius: 4px;
    padding:       2px 8px;
    white-space:   nowrap;
}

/* mobile-price ausblenden — Preis steht in der Preisliste */
#part-3 .mobile-price { display: none !important; }

/* ── Personenauswahl: schlanke Inline-Zeile ── */
#part-3 .title-room-persons { display: none !important; }

#part-3 .persons {
    display:   block !important;
    margin:    0 0 10px !important;
    padding:   0 !important;
    overflow:  hidden;
}

/* ── Personenauswahl Variante B: tabellarisch in umrandetem Block ── */

/* Spalten: beide untereinander im Block, kein Float mehr */
#part-3 .persons > .col-md-6 {
    display:    block !important;
    width:      100% !important;
    float:      none !important;
    padding:    0 !important;
}

/* Wrapper-Block um beide Spalten */
#part-3 .persons > .col-md-6.ad {
    border:        1px solid var(--light-grey) !important;
    border-radius: 6px 6px 0 0 !important;
    border-bottom: none !important;
}
#part-3 .persons > .col-md-6.ch {
    border:        1px solid var(--light-grey) !important;
    border-radius: 0 0 6px 6px !important;
    margin-bottom: 10px !important;
}

/* Label + Stepper nebeneinander in einer Zeile */
#part-3 .persons > .col-md-6 {
    display:     flex !important;
    align-items: center !important;
}

/* Label */
.spinner-label {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   12px;
    color:       var(--font-color);
    opacity:     0.6;
    white-space: nowrap;
    flex-shrink: 0;
    width:       85px;
    padding:     0 10px;
    border-right: 1px solid var(--light-grey);
    height:      34px;
}

/* Stepper nimmt restlichen Platz — lessp (−) per order ans Ende */
#part-3 .spinners {
    display:     flex !important;
    align-items: center !important;
    flex:        1 !important;
    background:  transparent !important;
    border:      none !important;
    padding:     0 !important;
    margin:      0 !important;
    height:      34px !important;
}
#part-3 .spinners .icon { display: none !important; }

/* Label | − 1 + */
#part-3 .spinners .lessp { order: 1 !important; }
#part-3 .spinners input  { order: 2 !important; }
#part-3 .spinners .addp  { order: 3 !important; }

/* +/− Buttons */
#part-3 .spinners .btn {
    width:           34px !important;
    min-width:       34px !important;
    height:          34px !important;
    padding:         0 !important;
    border-radius:   0 !important;
    border:          none !important;
    background:      color-mix(in srgb, var(--light-grey) 30%, transparent) !important;
    color:           var(--font-color) !important;
    font-size:       18px !important;
    font-weight:     300 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink:     0 !important;
    box-shadow:      none !important;
    transition:      background 0.15s, color 0.15s !important;
}
#part-3 .spinners .btn:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent) !important;
    color:      var(--primary-color) !important;
}

/* Zahl */
#part-3 .spinners input {
    flex:        1 !important;
    width:       0 !important;
    text-align:  center !important;
    border:      none !important;
    background:  transparent !important;
    font-size:   14px !important;
    font-weight: 500 !important;
    padding:     0 !important;
    box-shadow:  none !important;
    height:      34px !important;
    color:       var(--font-color) !important;
}

/* Preisliste — clearfix + volle Breite */
#part-3 .persons .price-lists-container {
    clear:       both !important;
    width:       100% !important;
    float:       none !important;
    margin-top:  10px !important;
    padding-top: 10px !important;
    border-top:  1px solid var(--light-grey) !important;
}
#part-3 .check_pricle_object {
    font-size:     11px;
    color:         var(--font-color);
    opacity:       0.55;
    margin-bottom: 6px;
}
/* Preisliste: Tarifname + Preis auf einer Linie, Content darunter klein */
#part-3 .check_price_list {
    margin-bottom: 6px !important;
    background:    color-mix(in srgb, var(--light-grey) 20%, transparent);
    border-radius: 6px;
    padding:       8px 10px !important;
}
#part-3 .check_price_list span { display: none !important; }

/* Titel + Preis nebeneinander */
#part-3 .check_price_list .price-list-title {
    font-size:   13px;
    font-weight: 500;
    color:       var(--font-color);
    display:     inline;
}
#part-3 .check_price_list .item-price {
    float:    right;
    display:  inline;
}
#part-3 .check_price_list .item-price-val {
    font-size:   17px !important;
    font-weight: 600 !important;
    color:       var(--primary-color) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

/* Content (Bulletpoints) immer sichtbar, klein, grau, unter dem Titel */
#part-3 .check_price_list .price-list-content {
    display:    block !important;
    clear:      both;
    margin-top: 5px;
}
#part-3 .check_price_list .price-list-content ul {
    margin:     0 !important;
    padding:    0 0 0 20px !important;
    list-style: circle !important;
}
#part-3 .check_price_list .price-list-content li {
    font-size:   11px !important;
    color:       var(--font-color) !important;
    opacity:     0.6 !important;
    line-height: 1.5 !important;
}


/* Weiteres Zimmer */
#part-3 .add_room_select {
    font-size:  12px;
    color:      var(--primary-color);
    text-align: center;
    padding:    8px 0 4px;
    cursor:     pointer;
    opacity:    0.65;
    transition: opacity 0.15s;
}
#part-3 .add_room_select:hover { opacity: 1; }

/* Auswählen-Button */
#part-3 .selection .instant_select {
    display:       block !important;
    width:         100% !important;
    text-align:    center !important;
    padding:       10px !important;
    border-radius: 8px !important;
    font-size:     14px !important;
    font-weight:   500 !important;
    margin-top:    auto !important;
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
    #part-3 .select-room { grid-template-columns: 1fr !important; }
}

/* ================================================================
   STICKY PRICE BAR
   Fixiert am unteren Bildschirmrand — zeigt Gesamtpreis sobald
   ein Zimmer gewählt wurde. Wird per JS ein/ausgeblendet.
   ================================================================ */

#drp-price-bar {
    position:        fixed;
    bottom:          24px;
    left:            50%;
    transform:       translateX(-50%);
    z-index:         999;
    background:      var(--white);
    border:          1.5px solid var(--light-grey);
    border-radius:   12px;
    box-shadow:      0 4px 20px rgba(0,0,0,0.12);
    padding:         10px 16px;
    display:         none;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    width:           auto;
    max-width:       500px;
    min-width:       280px;
}
#drp-price-bar.visible {
    display: flex;
}

/* Linke Seite: Zimmer + Nächte */
#drp-price-bar .dpb-meta {
    display:    flex;
    flex-direction: column;
    gap:        2px;
    flex:       1;
    min-width:  0;
}
#drp-price-bar .dpb-meta__room {
    font-size:   13px;
    font-weight: 500;
    color:       var(--font-color);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}
#drp-price-bar .dpb-meta__detail {
    font-size: 11px;
    color:     var(--font-color);
    opacity:   0.55;
}

/* Trennlinie */
#drp-price-bar .dpb-divider {
    width:      1px;
    height:     36px;
    background: var(--light-grey);
    flex-shrink: 0;
}

/* Rechte Seite: Preis */
#drp-price-bar .dpb-price {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            2px;
    flex-shrink:    0;
}
#drp-price-bar .dpb-price__label {
    font-size: 11px;
    color:     var(--font-color);
    opacity:   0.55;
}
#drp-price-bar .dpb-price__total {
    font-size:   20px;
    font-weight: 500;
    color:       var(--primary-color);
    white-space: nowrap;
}

/* Warenkorb-Button */
#drp-price-bar .dpb-cart {
    background:    var(--primary-color);
    color:         var(--white);
    border:        none;
    border-radius: 8px;
    padding:       10px 16px;
    font-size:     13px;
    font-weight:   500;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    gap:           6px;
    flex-shrink:   0;
    transition:    opacity 0.15s;
}
#drp-price-bar .dpb-cart:hover { opacity: 0.85; }

/* Mobile: Preis und Button in einer Zeile, Meta darüber */
@media (max-width: 600px) {
    #drp-price-bar {
        flex-wrap: wrap;
        padding:   10px 14px;
    }
    #drp-price-bar .dpb-divider { display: none; }
    #drp-price-bar .dpb-meta    { width: 100%; }
}

/* ================================================================
   PART-5X — Wünsche & Ankunftszeit
   ================================================================ */

/* Label-Stil konsistent mit part-7 */
.p5x-label {
    display:       block;
    font-size:     13px;
    color:         var(--font-color);
    opacity:       0.65;
    margin-bottom: 8px;
    font-weight:   500;
}
.p5x-label i {
    margin-right: 5px;
    color:        var(--primary-color);
}

/* Schnellauswahl-Buttons */
.p5x-wish-buttons {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}
.p5x-wish-buttons .p5x-wish-btn.btn-outline-primary {
    font-size:     13px !important;
    padding:       6px 14px !important;
    border-radius: 99px !important;
    border:        1.5px solid var(--primary-color) !important;
    border-bottom: 1.5px solid var(--primary-color) !important;
    color:         var(--primary-color) !important;
    background:    transparent !important;
    transition:    background 0.15s, color 0.15s !important;
}
.p5x-wish-buttons .p5x-wish-btn.btn-outline-primary:hover,
.p5x-wish-buttons .p5x-wish-btn.btn-outline-primary.active {
    background:    var(--primary-color) !important;
    color:         var(--white) !important;
    border-color:  var(--primary-color) !important;
}
.p5x-wish-btn.active {
    background: var(--primary-color) !important;
    color:      var(--white) !important;
}

/* Textarea */
.p5x-textarea {
    height:        60px !important;
    resize:        vertical;
    font-size:     13px !important;
    border-radius: 8px !important;
    border-color:  var(--light-grey) !important;
    min-height:    60px !important;
}
.p5x-textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow:   0 0 0 2px color-mix(in srgb, var(--primary-color) 15%, transparent) !important;
    outline:      none !important;
}

/* Ankunftszeit */
.p5x-arrival {
    max-width: 320px;
}
.p5x-select {
    border-radius: 8px !important;
    font-size:     14px !important;
}

/* Freebie-Hinweis */
.p5x-freebie {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-top:  20px;
    padding:     12px 16px;
    background:  color-mix(in srgb, var(--primary-color) 6%, transparent);
    border-radius: 8px;
    font-size:   13px;
    color:       var(--font-color);
}
.p5x-freebie i {
    color:      var(--primary-color);
    font-size:  16px;
    flex-shrink: 0;
}

/* Weiter-Button */
.p5x-weiter {
    margin-top:  24px;
    padding-top: 16px;
    border-top:  1px solid var(--light-grey);
    text-align:  right;
}
.p5x-next {
    display:     inline-flex !important;
    align-items: center !important;
    gap:         8px !important;
    padding:     10px 24px !important;
    font-size:   14px !important;
    border-radius: 8px !important;
}

/* ================================================================
   MOBILE FIXES (max-width: 768px)
   ================================================================ */
@media (max-width: 768px) {

    /* Display-Bar Mobile: in @media 767px oben geregelt */

    /* Kalender Mobile: in drp-calendar CSS oben geregelt */

    /* ── Arrangement-Grid: eine Spalte ── */
    .arr-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Zimmer-Grid: eine Spalte ── */
    #part-3 .select-room {
        grid-template-columns: 1fr !important;
    }

    /* ── Sticky Price Bar ── */
    #drp-price-bar {
        bottom:    10px !important;
        left:      10px !important;
        right:     10px !important;
        transform: none !important;
        max-width: none !important;
        padding:   8px 12px !important;
    }
    #drp-price-bar .dpb-meta__room {
        font-size: 12px !important;
    }
    #drp-price-bar .dpb-price__total {
        font-size: 16px !important;
    }
    #drp-price-bar .dpb-cart {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    /* ── part-7 Formular: volle Breite ── */
    #part-7 .col-md-6 {
        width: 100% !important;
    }

    /* ── part-5x ── */
    .p5x-arrival-row {
        max-width: 100% !important;
    }

    /* ── USP-Bar: zwei Spalten ── */
    #drp-usp-bar {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
}

/* ================================================================
   KALENDER: Leerer linker Monat ausblenden + kein Sprung
   ================================================================ */

/* Beide Kalender-Hälften: feste Mindesthöhe damit kein Sprung */
#drp-calendar-container .calendar.left,
#drp-calendar-container .calendar.right,
#drp-calendar-container .drp-calendar.left,
#drp-calendar-container .drp-calendar.right,
.daterangepicker .calendar.left,
.daterangepicker .calendar.right,
.daterangepicker .drp-calendar.left,
.daterangepicker .drp-calendar.right {
    vertical-align: top !important;
}

/* Tbody: normales table-row-group */
.daterangepicker .calendar-table tbody {
    display: table-row-group;
}

/* Leerer linker Monat: ausblenden, rechter bekommt volle Breite */
.daterangepicker.drp-left-empty .calendar.left,
.daterangepicker.drp-left-empty .drp-calendar.left {
    display: none !important;
}
.daterangepicker.drp-left-empty .calendar.right,
.daterangepicker.drp-left-empty .drp-calendar.right {
    width:     100% !important;
    max-width: 100% !important;
    float:     none !important;
    flex:      none !important;
}

/* ================================================================
   PART-7 — Kompakteres Formular
   ================================================================ */

/* Felder kompakter */
#part-7 .form-control {
    height:      36px !important;
    padding:     6px 10px !important;
    font-size:   14px !important;
}
#part-7 select.form-control {
    height:      36px !important;
    padding-top: 4px !important;
}
#part-7 .form-group {
    margin-bottom: 10px !important;
}
#part-7 label {
    font-size:    12px !important;
    margin-bottom: 3px !important;
    display:      block;
}

/* ================================================================
   PART-7 — Privat/Firma Segmented Control
   ================================================================ */
.p7-segment {
    display:       inline-flex;
    background:    var(--light-grey);
    border-radius: 10px;
    padding:       3px;
    gap:           2px;
    margin-bottom: 16px;
}
.p7-segment__btn {
    padding:       7px 20px;
    font-size:     14px;
    font-weight:   400;
    border:        none;
    border-radius: 8px;
    background:    transparent;
    color:         var(--font-color);
    cursor:        pointer;
    transition:    background 0.15s, color 0.15s;
    line-height:   1;
}
.p7-segment__btn.active {
    background: var(--white);
    color:      var(--primary-color);
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.p7-segment__btn:hover:not(.active) {
    background: rgba(255,255,255,0.5);
}