/* * WP Rentalo Lite - Modul-Design Refactor Phase 1 * * Zentrale Ebene für Rahmen-/Schatten-Design und Felder-Design. * Gilt für Step1-Shortcodes, Step2-Änderungsleiste/Listen, Step3 und Step4. */ /* ------------------------------------------------------------ * 1. Design-Scope und Flächen * ------------------------------------------------------------ */ .rentalo-module-design-scope .rentalo-ui-step1-module, .rentalo-module-design-scope .rentalo-step2-topbar.rentalo-ui-step2-topbar, .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar, .rentalo-module-design-scope .rentalo-ui-step2-item-card, .rentalo-module-design-scope .rentalo-ui-step3-card, .rentalo-module-design-scope .rentalo-ui-step3-sidecard, .rentalo-module-design-scope .rentalo-ui-step4-card, .rentalo-module-design-scope .rentalo-ui-step4-sidecard, .rentalo-module-design-scope .rentalo-step4-section, .rentalo-module-design-scope .rentalo-step4-summary-card{ background:var(--rentalo-card-section-bg,#fff); border-style:solid; border-color:var(--rentalo-border,#d6e0ec); border-radius:var(--rentalo-radius,16px); } /* Zusätzliche Card-Body-Helfer folgen derselben Hintergrundfarbe. * .rentalo-section-body und .rentalo-side-card-body werden bereits zentral in frontend.css definiert. */ .rentalo-module-design-scope .rentalo-card-body{ background:var(--rentalo-card-section-bg,#fff); } .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-ui-step1-module, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-step2-topbar.rentalo-ui-step2-topbar, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-ui-step2-result-toolbar, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-ui-step2-item-card, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-section-card, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-side-card, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-ui-step3-card, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-ui-step3-sidecard, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-ui-step4-card, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-ui-step4-sidecard, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-step4-section, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-step4-summary-card{ border-width:0; box-shadow:0 8px 24px rgba(15,23,42,.12); } .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-ui-step1-module, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-step2-topbar.rentalo-ui-step2-topbar, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-ui-step2-result-toolbar, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-ui-step2-item-card, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-section-card, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-side-card, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-ui-step3-card, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-ui-step3-sidecard, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-ui-step4-card, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-ui-step4-sidecard, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-step4-section, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-step4-summary-card{ border-width:var(--rentalo-card-border-width,1px); box-shadow:none; } /* Choice-/Option-Zeilen bleiben eigene Unterelemente, folgen aber der Rahmenlogik dezent. */ .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-ui-step3-choice-row, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-choice-row, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-option-switch-card, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-step4-option-summary-row, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-step3-payment-box, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-step4-payment-box{ box-shadow:none; border-color:rgba(172,172,172,.35); } .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-ui-step3-choice-row, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-choice-row, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-option-switch-card, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-step4-option-summary-row, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-step3-payment-box, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-step4-payment-box{ box-shadow:none; border-color:var(--rentalo-border,#d6e0ec); } /* ------------------------------------------------------------ * 2. Step2 Änderungsleiste Desktop * ------------------------------------------------------------ */ @media (min-width:768px){ .rentalo-module-design-scope .rentalo-step2-topbar.rentalo-ui-step2-topbar{ width:100%; max-width:none; margin-left:auto; margin-right:auto; padding:18px; border-radius:8px; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout{ display:grid; grid-template-columns:minmax(120px,1.05fr) minmax(120px,1.05fr) minmax(125px,.9fr) minmax(68px,.48fr) minmax(125px,.9fr) minmax(68px,.48fr) minmax(115px,.82fr) minmax(64px,.45fr) minmax(54px,.38fr); gap:10px; align-items:end; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-actions{ grid-column:auto; align-self:end; justify-self:stretch; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-btn{ width:100%; min-width:0; height:40px; min-height:40px; max-height:40px; padding-left:0; padding-right:0; border-radius:var(--rentalo-button-radius,var(--rentalo-radius-sm,10px)); } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-btn .rentalo-ui-step2-btn-text{ display:none; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-btn .rentalo-ui-step2-btn-icon{ display:inline-flex; line-height:1; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-opening-hours-wrap{ grid-column:1 / -1; padding-top:6px; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-opening-hours-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; } } /* ------------------------------------------------------------ * 3. Felder: gemeinsame Basis * ------------------------------------------------------------ */ .rentalo-module-design-scope .rentalo-ui-step1-module .rentalo-ui-control, .rentalo-module-design-scope .rentalo-ui-step1-module .rentalo-ui-select, .rentalo-module-design-scope .rentalo-ui-step1-module .rentalo-ui-input, .rentalo-module-design-scope .rentalo-ui-step1-module .rentalo-ui-picker-toggle, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-control, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-select, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-input, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-picker-toggle, .rentalo-module-design-scope.rentalo-ui-step3-shell .rentalo-form-control, .rentalo-module-design-scope.rentalo-ui-step3-shell .rentalo-form-input, .rentalo-module-design-scope.rentalo-ui-step3-shell .rentalo-form-select, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-form-control, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-form-input, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-form-select, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]), .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-frontend-field select, .rentalo-module-design-scope .rentalo-step4-payment-grid select{ height:var(--rentalo-field-height,40px); min-height:var(--rentalo-field-height,40px); max-height:var(--rentalo-field-height,40px); color:var(--rentalo-field-text,var(--rentalo-text,#1a2932)); font-size:var(--rentalo-font-size,15px); box-shadow:none; } /* Textareas haben eigenes Höhenverhalten. */ .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-frontend-field textarea, .rentalo-module-design-scope.rentalo-ui-step4-shell textarea.rentalo-form-control, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-form-textarea{ min-height:96px; color:var(--rentalo-field-text,var(--rentalo-text,#1a2932)); font-size:var(--rentalo-font-size,15px); box-shadow:none; } /* Step3 Options-Mengenfeld bleibt kompakt, bekommt aber die gewählte Feldoptik. */ .rentalo-module-design-scope.rentalo-ui-step3-shell .rentalo-option-quantity-select{ height:var(--rentalo-option-select-height,30px); min-height:var(--rentalo-option-select-height,30px); max-height:var(--rentalo-option-select-height,30px); line-height:var(--rentalo-option-select-height,30px); } /* ------------------------------------------------------------ * 4. Felder-Design: Boxen * ------------------------------------------------------------ */ .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step1-module .rentalo-ui-control, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step1-module .rentalo-ui-select, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step1-module .rentalo-ui-input, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step1-module .rentalo-ui-picker-toggle, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-step2-topbar .rentalo-ui-control, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-step2-topbar .rentalo-ui-select, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-step2-topbar .rentalo-ui-input, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-step2-topbar .rentalo-ui-step2-picker-toggle, .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step3-shell .rentalo-form-control, .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step3-shell .rentalo-form-input, .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step3-shell .rentalo-form-select, .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step4-shell .rentalo-form-control, .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step4-shell .rentalo-form-input, .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step4-shell .rentalo-form-select, .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step4-shell .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]), .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step4-shell .rentalo-frontend-field select, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-step4-payment-grid select{ border:1px solid var(--rentalo-border,#d6e0ec); border-radius:var(--rentalo-input-radius,12px); background:var(--rentalo-input-bg,#fff); padding:0 12px; } .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step4-shell .rentalo-frontend-field textarea, .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step4-shell textarea.rentalo-form-control, .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step4-shell .rentalo-form-textarea{ border:1px solid var(--rentalo-border,#d6e0ec); border-radius:var(--rentalo-input-radius,12px); background:var(--rentalo-input-bg,#fff); padding:10px 12px; } .rentalo-module-design-scope.rentalo-field-style-box select{ -webkit-appearance:auto; -moz-appearance:auto; appearance:auto; background-image:initial; padding-right:12px; } /* ------------------------------------------------------------ * 5. Felder-Design: Linien * ------------------------------------------------------------ */ .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step1-module .rentalo-ui-control, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step1-module .rentalo-ui-select, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step1-module .rentalo-ui-input, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step1-module .rentalo-ui-picker-toggle, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step2-topbar .rentalo-ui-control, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step2-topbar .rentalo-ui-select, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step2-topbar .rentalo-ui-input, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step2-topbar .rentalo-ui-step2-picker-toggle, .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step3-shell .rentalo-form-control, .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step3-shell .rentalo-form-input, .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step3-shell .rentalo-form-select, .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step4-shell .rentalo-form-control, .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step4-shell .rentalo-form-input, .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step4-shell .rentalo-form-select, .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step4-shell .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]), .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step4-shell .rentalo-frontend-field select, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step4-payment-grid select{ border:0; border-bottom:1px solid var(--rentalo-border,#8f98a3); border-radius:0; background:transparent; padding:0; } .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step4-shell .rentalo-frontend-field textarea, .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step4-shell textarea.rentalo-form-control, .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step4-shell .rentalo-form-textarea{ border:0; border-bottom:1px solid var(--rentalo-border,#8f98a3); border-radius:0; background:transparent; padding:8px 0; } .rentalo-module-design-scope.rentalo-field-style-line select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:none; padding-right:0; } .rentalo-module-design-scope.rentalo-field-style-line select::-ms-expand{ display:none; } /* Eigene Datum-/Uhrzeit-Picker-Pfeile nur im Linienmodus ausblenden. */ /* ------------------------------------------------------------ * 6. Kleine Modultexte * ------------------------------------------------------------ */ .rentalo-module-design-scope .rentalo-ui-step1-module .rentalo-ui-opening-hours-link, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-opening-hours-link{ height:auto; min-height:0; padding:0; border:0; background:transparent; color:var(--rentalo-primary,#006699); text-decoration:underline; font-size:13px; font-weight:700; } .rentalo-module-design-scope .rentalo-ui-step1-module .rentalo-ui-rental-duration, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-rental-duration{ color:var(--rentalo-title,#1a2932); font-size:13px; font-weight:700; } /* ------------------------------------------------------------ * 7. Shortcode-Struktur bleibt getrennt * ------------------------------------------------------------ */ .rentalo-module-design-scope.rentalo-shortcode-hero .rentalo-ui-step1-module{ max-width:min(490px,var(--rentalo-form-max-width,1240px)); } .rentalo-module-design-scope.rentalo-shortcode-compact .rentalo-ui-step1-module{ max-width:var(--rentalo-form-max-width,820px); } .rentalo-module-design-scope.rentalo-shortcode-inline .rentalo-ui-step1-module{ max-width:100%; } /* ------------------------------------------------------------ * 8. Mobile * ------------------------------------------------------------ */ @media (max-width:900px){ .rentalo-module-design-scope .rentalo-step2-topbar.rentalo-ui-step2-topbar{ border-radius:12px; padding:14px; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-actions, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-opening-hours-wrap{ grid-column:1 / -1; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-btn .rentalo-ui-step2-btn-text{ display:inline; } } @media (max-width:560px){ .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout{ grid-template-columns:1fr; } .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-frontend-field textarea, .rentalo-module-design-scope.rentalo-ui-step4-shell textarea.rentalo-form-control, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-form-textarea{ min-height:88px; } } /* ------------------------------------------------------------ * 9. Phase 2: alle Feld-Pfeile/Dreiecke entfernen * ------------------------------------------------------------ */ /* Select-Dreiecke generell entfernen – unabhängig von Boxen/Linien. */ .rentalo-module-design-scope select, .rentalo-module-design-scope .rentalo-ui-step1-module select, .rentalo-module-design-scope .rentalo-step2-topbar select, .rentalo-module-design-scope.rentalo-ui-step3-shell select, .rentalo-module-design-scope.rentalo-ui-step4-shell select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:none; padding-right:0; } .rentalo-module-design-scope.rentalo-field-style-box select, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step1-module select, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-step2-topbar select, .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step3-shell select, .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step4-shell select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:none; padding-right:12px; } .rentalo-module-design-scope.rentalo-field-style-line select, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step1-module select, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step2-topbar select, .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step3-shell select, .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step4-shell select{ padding-right:0; } .rentalo-module-design-scope select::-ms-expand{ display:none; } /* Datum-/Uhrzeit-/Picker-Pfeile generell entfernen. */ .rentalo-module-design-scope .rentalo-ui-picker-toggle::after, .rentalo-module-design-scope .rentalo-ui-step2-picker-toggle::after, .rentalo-module-design-scope .rentalo-date-display::after, .rentalo-module-design-scope .rentalo-time-display::after, .rentalo-module-design-scope .rentalo-date-field::after, .rentalo-module-design-scope .rentalo-time-field::after{ display:none; content:none; } .rentalo-module-design-scope .rentalo-ui-picker-toggle svg, .rentalo-module-design-scope .rentalo-ui-step2-picker-toggle svg, .rentalo-module-design-scope .rentalo-ui-picker-toggle .dashicons, .rentalo-module-design-scope .rentalo-ui-step2-picker-toggle .dashicons{ display:none; } .rentalo-module-design-scope .rentalo-ui-picker-value, .rentalo-module-design-scope .rentalo-ui-step2-picker-value{ display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ------------------------------------------------------------ * 10. Phase 2: Mobile-Modulkorrekturen * ------------------------------------------------------------ */ @media (max-width:767px){ .rentalo-module-design-scope .rentalo-ui-step1-module, .rentalo-module-design-scope .rentalo-step2-topbar.rentalo-ui-step2-topbar{ width:100%; max-width:100%; margin-left:auto; margin-right:auto; padding:14px; border-radius:12px; box-sizing:border-box; } .rentalo-module-design-scope.rentalo-shortcode-hero .rentalo-ui-step1-module, .rentalo-module-design-scope.rentalo-shortcode-compact .rentalo-ui-step1-module, .rentalo-module-design-scope.rentalo-shortcode-inline .rentalo-ui-step1-module{ max-width:100%; } .rentalo-module-design-scope .rentalo-ui-label, .rentalo-module-design-scope .rentalo-frontend-field > label, .rentalo-module-design-scope .rentalo-step4-payment-grid .rentalo-frontend-field label{ line-height:1.2; } .rentalo-module-design-scope .rentalo-ui-step1-module .rentalo-ui-control, .rentalo-module-design-scope .rentalo-ui-step1-module .rentalo-ui-select, .rentalo-module-design-scope .rentalo-ui-step1-module .rentalo-ui-input, .rentalo-module-design-scope .rentalo-ui-step1-module .rentalo-ui-picker-toggle, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-control, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-select, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-input, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-picker-toggle, .rentalo-module-design-scope.rentalo-ui-step3-shell .rentalo-form-control, .rentalo-module-design-scope.rentalo-ui-step3-shell .rentalo-form-input, .rentalo-module-design-scope.rentalo-ui-step3-shell .rentalo-form-select, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-form-control, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-form-input, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-form-select, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]), .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-frontend-field select, .rentalo-module-design-scope .rentalo-step4-payment-grid select{ width:100%; min-width:0; box-sizing:border-box; } .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step1-module .rentalo-ui-control, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step1-module .rentalo-ui-select, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step1-module .rentalo-ui-input, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step1-module .rentalo-ui-picker-toggle, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step2-topbar .rentalo-ui-control, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step2-topbar .rentalo-ui-select, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step2-topbar .rentalo-ui-input, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step2-topbar .rentalo-ui-step2-picker-toggle{ height:38px; min-height:38px; max-height:38px; } .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step1-module .rentalo-ui-control, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step1-module .rentalo-ui-select, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step1-module .rentalo-ui-input, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step1-module .rentalo-ui-picker-toggle, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-step2-topbar .rentalo-ui-control, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-step2-topbar .rentalo-ui-select, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-step2-topbar .rentalo-ui-input, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-step2-topbar .rentalo-ui-step2-picker-toggle{ height:40px; min-height:40px; max-height:40px; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout{ grid-template-columns:1fr 1fr; gap:12px; align-items:end; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--pickup-location, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--return-location, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-actions, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--opening-hours-link, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-notices{ grid-column:1 / -1; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--start-date{ grid-column:1; grid-row:auto; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--start-time{ grid-column:2; grid-row:auto; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--end-date{ grid-column:1; grid-row:auto; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--end-time{ grid-column:2; grid-row:auto; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--category{ grid-column:1; grid-row:auto; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--planned-km{ grid-column:2; grid-row:auto; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-btn{ width:100%; min-width:0; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-btn .rentalo-ui-step2-btn-text{ display:inline; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-btn .rentalo-ui-step2-btn-icon{ display:none; } .rentalo-module-design-scope .rentalo-ui-step1-module .rentalo-ui-opening-hours-link, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-opening-hours-link{ min-height:36px; padding:0 12px; border:1px solid var(--rentalo-border,#d6e0ec); border-radius:10px; background:#f8fbff; text-decoration:none; display:flex; align-items:center; justify-content:center; text-align:center; } .rentalo-module-design-scope .rentalo-ui-step1-module .rentalo-ui-rental-duration, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-rental-duration{ text-align:right; justify-self:end; width:100%; } .rentalo-module-design-scope.rentalo-ui-step3-shell .rentalo-side-card, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-section-card, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-side-card, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-ui-step4-card, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-ui-step4-sidecard{ border-radius:12px; } } @media (max-width:480px){ .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout{ grid-template-columns:1fr 1fr; gap:10px; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--pickup-location, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--return-location, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--category, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout--no-km .rentalo-ui-step2-row--category, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-actions, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--opening-hours-link, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-notices{ grid-column:1 / -1; } .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step2-topbar .rentalo-ui-step2-row--start-date, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step2-topbar .rentalo-ui-step2-row--end-date{ grid-column:1; } .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step2-topbar .rentalo-ui-step2-row--start-time, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step2-topbar .rentalo-ui-step2-row--end-time{ grid-column:2; } } /* ------------------------------------------------------------ * 11. Phase 3: Step2 Toolbar, Selectbreiten und Picker-Popups * ------------------------------------------------------------ */ /* Untere Pagination-/Per-Page-Zeile als echte Fläche wie die obere Toolbar. */ .rentalo-module-design-scope .rentalo-ui-step2-pagination-bottom{ margin:18px 0 0; padding:10px 12px; border-style:solid; border-color:var(--rentalo-border,#d6e0ec); border-radius:var(--rentalo-radius,16px); background:var(--rentalo-card-bg,#fff); box-sizing:border-box; } .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-ui-step2-pagination-bottom{ border-width:0; box-shadow:0 8px 24px rgba(15,23,42,.12); } .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-ui-step2-pagination-bottom{ border-width:var(--rentalo-card-border-width,1px); box-shadow:none; } /* Artikel-pro-Seite und Seitenwechsel nicht zu schmal. */ .rentalo-module-design-scope .rentalo-ui-step2-per-page-form, .rentalo-module-design-scope .rentalo-ui-step2-pagination-form{ display:flex; align-items:center; gap:8px; min-width:0; } .rentalo-module-design-scope .rentalo-ui-step2-per-page-form label, .rentalo-module-design-scope .rentalo-ui-step2-pagination-form label{ white-space:nowrap; } .rentalo-module-design-scope .rentalo-ui-step2-per-page-form select, .rentalo-module-design-scope .rentalo-ui-step2-pagination-form select{ min-width:72px; width:72px; height:38px; min-height:38px; max-height:38px; text-align:center; text-align-last:center; box-sizing:border-box; } /* Filterpanel-Selects ebenfalls Rentalo-Feldoptik statt Browseroptik. */ .rentalo-module-design-scope .rentalo-ui-step2-filter-panel select{ width:100%; height:var(--rentalo-field-height,40px); min-height:var(--rentalo-field-height,40px); max-height:var(--rentalo-field-height,40px); color:var(--rentalo-field-text,var(--rentalo-text,#1a2932)); font-size:var(--rentalo-font-size,15px); box-shadow:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:none; } .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step2-filter-panel select{ border:1px solid var(--rentalo-border,#d6e0ec); border-radius:var(--rentalo-input-radius,12px); background:var(--rentalo-input-bg,#fff); padding:0 12px; } .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step2-filter-panel select{ border:0; border-bottom:1px solid var(--rentalo-border,#8f98a3); border-radius:0; background:transparent; padding:0; } /* Datum-/Uhrzeit-Popups breiter und lesbarer, damit Uhrzeiten nicht abgeschnitten wirken. */ .rentalo-module-design-scope .rentalo-ui-picker-panel, .rentalo-module-design-scope .rentalo-ui-step2-picker-panel, .rentalo-module-design-scope .rentalo-ui-time-panel, .rentalo-module-design-scope .rentalo-ui-step2-time-panel{ min-width:112px; width:max-content; max-width:min(280px, calc(100vw - 32px)); box-sizing:border-box; } .rentalo-module-design-scope .rentalo-ui-time-option, .rentalo-module-design-scope .rentalo-ui-step2-time-option, .rentalo-module-design-scope .rentalo-time-option{ min-width:72px; width:100%; justify-content:center; text-align:center; box-sizing:border-box; white-space:nowrap; } /* Datumspicker optisch neutraler an Rentalo angleichen. */ .rentalo-module-design-scope .rentalo-ui-calendar, .rentalo-module-design-scope .rentalo-ui-step2-calendar{ border:1px solid var(--rentalo-border,#d6e0ec); border-radius:12px; background:var(--rentalo-card-bg,#fff); box-shadow:0 8px 24px rgba(15,23,42,.12); } /* Standortfelder: wenn zwei Standorte in einer Zeile stehen, exakt 50/50. */ @media (max-width:767px){ .rentalo-module-design-scope .rentalo-ui-locations-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--rentalo-field-gap,10px); width:100%; } .rentalo-module-design-scope .rentalo-ui-locations-row > .rentalo-ui-row--pickup-location, .rentalo-module-design-scope .rentalo-ui-locations-row > .rentalo-ui-row--return-location{ min-width:0; width:100%; } .rentalo-module-design-scope .rentalo-ui-step1-layout--same-location .rentalo-ui-locations-row, .rentalo-module-design-scope .rentalo-ui-step1-layout--no-locations .rentalo-ui-locations-row{ grid-template-columns:minmax(0,1fr); } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout--different-location .rentalo-ui-step2-row--pickup-location{ grid-column:1; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout--different-location .rentalo-ui-step2-row--return-location{ grid-column:2; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout--same-location .rentalo-ui-step2-row--pickup-location{ grid-column:1 / -1; } .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar, .rentalo-module-design-scope .rentalo-ui-step2-pagination-bottom{ width:100%; margin-left:auto; margin-right:auto; border-radius:12px; } .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar{ display:grid; grid-template-columns:1fr; align-items:stretch; gap:10px; } .rentalo-module-design-scope .rentalo-ui-step2-per-page-form select, .rentalo-module-design-scope .rentalo-ui-step2-pagination-form select{ min-width:78px; width:78px; } } @media (max-width:480px){ .rentalo-module-design-scope .rentalo-ui-locations-row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout--different-location .rentalo-ui-step2-row--pickup-location, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout--different-location .rentalo-ui-step2-row--return-location{ grid-column:auto; } } /* ------------------------------------------------------------ * 12. Phase 3 sichtbar: Portal-Picker, mobile Wrapper und Toolbars * ------------------------------------------------------------ */ /* Portal-Picker liegen oft direkt unter , daher ohne Modul-Scope stylen. */ .rentalo-ui-picker-panel, .rentalo-ui-picker-panel--portal, .rentalo-ui-step2-picker-panel, .rentalo-ui-step2-picker-panel--portal, .rentalo-ui-date-panel, .rentalo-ui-date-panel--portal, .rentalo-ui-time-panel, .rentalo-ui-time-panel--portal, .rentalo-ui-step2-time-panel, .rentalo-ui-step2-time-panel--portal{ min-width:132px; width:max-content; max-width:min(320px, calc(100vw - 32px)); box-sizing:border-box; border:1px solid var(--rentalo-border,#d6e0ec); border-radius:12px; background:var(--rentalo-card-bg,#fff); box-shadow:0 10px 28px rgba(15,23,42,.16); overflow:auto; } .rentalo-ui-time-options, .rentalo-ui-step2-time-options, .rentalo-time-options{ min-width:50px; } .rentalo-ui-time-option, .rentalo-ui-step2-time-option, .rentalo-time-option{ min-width:82px; width:100%; padding-left:10px; padding-right:10px; justify-content:center; text-align:center; white-space:nowrap; box-sizing:border-box; } .rentalo-ui-calendar, .rentalo-ui-step2-calendar{ min-width:220px; border-radius:12px; background:var(--rentalo-card-bg,#fff); } /* Native Selects: geschlossene Felder sichtbar im Rentalo-Stil. Die geöffnete OS-Liste selbst bleibt browserabhängig. */ .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar select, .rentalo-module-design-scope .rentalo-ui-step2-pagination-bottom select, .rentalo-module-design-scope .rentalo-ui-step2-filter-panel select, .rentalo-module-design-scope .rentalo-ui-step1-module select, .rentalo-module-design-scope .rentalo-step2-topbar select, .rentalo-module-design-scope.rentalo-ui-step3-shell select, .rentalo-module-design-scope.rentalo-ui-step4-shell select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:none; color:var(--rentalo-field-text,var(--rentalo-text,#1a2932)); font-size:var(--rentalo-font-size,15px); box-shadow:none; box-sizing:border-box; } .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step2-result-toolbar select, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step2-pagination-bottom select, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step2-filter-panel select, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step1-module select, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-step2-topbar select, .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step3-shell select, .rentalo-module-design-scope.rentalo-field-style-box.rentalo-ui-step4-shell select{ height:var(--rentalo-field-height,40px); min-height:var(--rentalo-field-height,40px); max-height:var(--rentalo-field-height,40px); border:1px solid var(--rentalo-border,#d6e0ec); border-radius:var(--rentalo-input-radius,12px); background:var(--rentalo-input-bg,#fff); padding:0 12px; } .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step2-result-toolbar select, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step2-pagination-bottom select, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step2-filter-panel select, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step1-module select, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-step2-topbar select, .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step3-shell select, .rentalo-module-design-scope.rentalo-field-style-line.rentalo-ui-step4-shell select{ height:var(--rentalo-field-height,40px); min-height:var(--rentalo-field-height,40px); max-height:var(--rentalo-field-height,40px); border:0; border-bottom:1px solid var(--rentalo-border,#8f98a3); border-radius:0; background:transparent; padding:0; } /* Obere und untere Step2-Leiste technisch gleich behandeln. */ .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar, .rentalo-module-design-scope .rentalo-ui-step2-pagination-bottom{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; margin:18px 0 0; padding:10px 12px; border-style:solid; border-color:var(--rentalo-border,#d6e0ec); border-radius:var(--rentalo-radius,16px); background:var(--rentalo-card-bg,#fff); box-sizing:border-box; } .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-ui-step2-result-toolbar, .rentalo-module-design-scope.rentalo-frame-style-shadow .rentalo-ui-step2-pagination-bottom{ border-width:0; box-shadow:0 8px 24px rgba(15,23,42,.12); } .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-ui-step2-result-toolbar, .rentalo-module-design-scope.rentalo-frame-style-border .rentalo-ui-step2-pagination-bottom{ border-width:var(--rentalo-card-border-width,1px); box-shadow:none; } .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar-left, .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar-center, .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar-right, .rentalo-module-design-scope .rentalo-ui-step2-pagination-bottom-center, .rentalo-module-design-scope .rentalo-ui-step2-pagination-bottom-right{ min-width:0; display:flex; align-items:center; } .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar-left{ justify-content:flex-start; } .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar-center, .rentalo-module-design-scope .rentalo-ui-step2-pagination-bottom-center{ justify-content:center; } .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar-right, .rentalo-module-design-scope .rentalo-ui-step2-pagination-bottom-right{ justify-content:flex-end; } .rentalo-module-design-scope .rentalo-ui-step2-per-page-form select, .rentalo-module-design-scope .rentalo-ui-step2-pagination-form select{ min-width:82px; width:82px; text-align:center; text-align-last:center; } /* Mobile Wrapperbreiten: alte 360px-Begrenzungen sichtbar überschreiben. */ @media (max-width:767px){ .rentalo-step1-hero.rentalo-module-design-scope, .rentalo-module-design-scope.rentalo-ui-step2, .rentalo-module-design-scope.rentalo-ui-step3-shell, .rentalo-module-design-scope.rentalo-ui-step4-shell{ width:100%; max-width:100%; box-sizing:border-box; } .rentalo-module-design-scope .rentalo-frontend-shell, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-frontend-shell, .rentalo-module-design-scope.rentalo-ui-step3-shell .rentalo-frontend-shell, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-frontend-shell{ width:100%; max-width:100%; padding-left:12px; padding-right:12px; box-sizing:border-box; } .rentalo-step1-hero.rentalo-module-design-scope .rentalo-ui-step1-module, .rentalo-module-design-scope .rentalo-step2-topbar.rentalo-ui-step2-topbar, .rentalo-module-design-scope .rentalo-booking-details-sheet .rentalo-ui-step2-topbar{ width:100%; max-width:100%; margin-left:auto; margin-right:auto; box-sizing:border-box; } .rentalo-module-design-scope .rentalo-booking-details-sheet__dialog{ width:calc(100vw - 24px); max-width:520px; box-sizing:border-box; } /* Step1 Standortfelder 50/50 nur bei echter Zwei-Standort-Auswahl. */ .rentalo-step1-hero.rentalo-module-design-scope .rentalo-ui-step1-layout--has-locations:not(.rentalo-ui-step1-layout--same-location) .rentalo-ui-locations-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--rentalo-field-gap,10px); width:100%; } .rentalo-step1-hero.rentalo-module-design-scope .rentalo-ui-step1-layout--has-locations:not(.rentalo-ui-step1-layout--same-location) .rentalo-ui-row--pickup-location, .rentalo-step1-hero.rentalo-module-design-scope .rentalo-ui-step1-layout--has-locations:not(.rentalo-ui-step1-layout--same-location) .rentalo-ui-row--return-location{ min-width:0; width:100%; grid-column:auto; } .rentalo-step1-hero.rentalo-module-design-scope .rentalo-ui-step1-layout--same-location .rentalo-ui-locations-row{ grid-template-columns:minmax(0,1fr); } /* Step2 Standortfelder 50/50 im Bearbeitungsmodul. */ .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:end; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout--different-location .rentalo-ui-step2-row--pickup-location{ grid-column:1; grid-row:1; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout--different-location .rentalo-ui-step2-row--return-location{ grid-column:2; grid-row:1; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout--same-location .rentalo-ui-step2-row--pickup-location{ grid-column:1 / -1; grid-row:1; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout--same-location .rentalo-ui-step2-row--return-location{ display:none; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout--no-locations .rentalo-ui-step2-row--pickup-location, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout--no-locations .rentalo-ui-step2-row--return-location{ display:none; } .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--start-date{grid-column:1;grid-row:2;} .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--start-time{grid-column:2;grid-row:2;} .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--end-date{grid-column:1;grid-row:3;} .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--end-time{grid-column:2;grid-row:3;} .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--category{grid-column:1;grid-row:4;} .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--planned-km{grid-column:2;grid-row:4;} .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-pickers-layout--no-km .rentalo-ui-step2-row--category{grid-column:1 / -1;} .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-actions{grid-column:1 / -1;grid-row:6;} .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-row--opening-hours-link{grid-column:1 / -1;grid-row:5;} .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-notices{grid-column:1 / -1;} .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar, .rentalo-module-design-scope .rentalo-ui-step2-pagination-bottom{ grid-template-columns:1fr; width:100%; border-radius:12px; } .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar-left, .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar-center, .rentalo-module-design-scope .rentalo-ui-step2-result-toolbar-right, .rentalo-module-design-scope .rentalo-ui-step2-pagination-bottom-center, .rentalo-module-design-scope .rentalo-ui-step2-pagination-bottom-right{ width:100%; justify-content:center; } .rentalo-module-design-scope .rentalo-ui-step2-per-page-form, .rentalo-module-design-scope .rentalo-ui-step2-pagination-form{ width:100%; justify-content:space-between; } .rentalo-module-design-scope .rentalo-ui-step2-per-page-form select, .rentalo-module-design-scope .rentalo-ui-step2-pagination-form select{ min-width:86px; width:86px; } } @media (max-width:420px){ .rentalo-module-design-scope .rentalo-frontend-shell, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-frontend-shell, .rentalo-module-design-scope.rentalo-ui-step3-shell .rentalo-frontend-shell, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-frontend-shell{ padding-left:10px; padding-right:10px; } } /* ------------------------------------------------------------ * 13. Phase 4: Rentalo Custom Selects statt Browser-Dropdowns * ------------------------------------------------------------ */ .rentalo-module-design-scope select.rentalo-native-select-enhanced{ position:absolute; width:1px; height:1px; min-width:1px; min-height:1px; max-width:1px; max-height:1px; opacity:0; pointer-events:none; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); } .rentalo-module-design-scope .rentalo-custom-select{ position:relative; width:100%; min-width:0; box-sizing:border-box; } .rentalo-module-design-scope .rentalo-custom-select__button{ width:100%; height:var(--rentalo-field-height,40px); min-height:var(--rentalo-field-height,40px); max-height:var(--rentalo-field-height,40px); color:var(--rentalo-field-text,var(--rentalo-text,#1a2932)); font-size:var(--rentalo-font-size,15px); font-family:inherit; text-align:left; box-shadow:none; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; justify-content:flex-start; } .rentalo-module-design-scope.rentalo-field-style-box .rentalo-custom-select__button{ border:1px solid var(--rentalo-border,#d6e0ec); border-radius:var(--rentalo-input-radius,12px); background:var(--rentalo-input-bg,#fff); padding:0 12px; } .rentalo-module-design-scope.rentalo-field-style-line .rentalo-custom-select__button{ border:0; border-bottom:1px solid var(--rentalo-border,#8f98a3); border-radius:0; background:transparent; padding:0; } .rentalo-module-design-scope .rentalo-custom-select__value{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rentalo-module-design-scope .rentalo-custom-select__list{ position:absolute; z-index:10050; top:calc(100% + 4px); left:0; width:max-content; min-width:100%; max-width:min(320px, calc(100vw - 32px)); max-height:260px; overflow:auto; border:1px solid var(--rentalo-border,#d6e0ec); border-radius:12px; background:var(--rentalo-card-bg,#fff); box-shadow:0 10px 28px rgba(15,23,42,.16); padding:4px; display:none; box-sizing:border-box; } .rentalo-module-design-scope .rentalo-custom-select.is-open .rentalo-custom-select__list{ display:block; } .rentalo-module-design-scope .rentalo-custom-select__option{ width:100%; min-width:50px; min-height:32px; border:0; border-radius:8px; background:transparent; color:var(--rentalo-text,#1a2932); font-size:14px; font-family:inherit; text-align:left; padding:6px 9px; cursor:pointer; display:block; box-sizing:border-box; white-space:nowrap; } .rentalo-module-design-scope .rentalo-custom-select__option.is-disabled{ opacity:.45; cursor:not-allowed; } /* Kleine Selects in Toolbars nicht mehr zu eng. */ .rentalo-module-design-scope .rentalo-ui-step2-per-page-form .rentalo-custom-select, .rentalo-module-design-scope .rentalo-ui-step2-pagination-form .rentalo-custom-select{ width:86px; min-width:86px; } .rentalo-module-design-scope .rentalo-ui-step2-per-page-form .rentalo-custom-select__button, .rentalo-module-design-scope .rentalo-ui-step2-pagination-form .rentalo-custom-select__button{ justify-content:center; text-align:center; } .rentalo-module-design-scope .rentalo-ui-step2-per-page-form .rentalo-custom-select__value, .rentalo-module-design-scope .rentalo-ui-step2-pagination-form .rentalo-custom-select__value{ width:100%; text-align:center; } .rentalo-module-design-scope .rentalo-ui-step2-per-page-form .rentalo-custom-select__list, .rentalo-module-design-scope .rentalo-ui-step2-pagination-form .rentalo-custom-select__list{ min-width:86px; } @media (max-width:767px){ .rentalo-module-design-scope .rentalo-custom-select__list{ max-width:calc(100vw - 40px); } } /* ------------------------------------------------------------ * 15. Phase 6: Custom-Select-Optionsliste an Uhrzeitliste angleichen * ------------------------------------------------------------ */ /* Liste wie Uhrzeitliste: weißer Container, dezente Rundung, scrollbar, einzelne Options-Pills. */ .rentalo-module-design-scope .rentalo-custom-select__list{ padding:6px; border:1px solid var(--rentalo-border,#d6e0ec); border-radius:12px; background:var(--rentalo-card-bg,#fff); box-shadow:0 10px 28px rgba(15,23,42,.16); display:none; flex-direction:column; gap:6px; } .rentalo-module-design-scope .rentalo-custom-select.is-open .rentalo-custom-select__list{ display:flex; } /* Einzelne Optionen wie Uhrzeitbuttons. */ .rentalo-module-design-scope .rentalo-custom-select__option{ min-height:34px; height:auto; line-height:1.25; border:1px solid var(--rentalo-border,#d6e0ec); border-radius:8px; background:var(--rentalo-input-bg,#fff); color:var(--rentalo-option-text-color,#273b48); font-size:14px; font-family:inherit; font-weight:400; text-align:left; padding:7px 10px; cursor:pointer; display:flex; align-items:center; justify-content:flex-start; box-sizing:border-box; white-space:nowrap; transition:background-color .12s ease,color .12s ease,border-color .12s ease; } /* Hover und Auswahl getrennt über Admin-Farben. */ .rentalo-module-design-scope .rentalo-custom-select__option:hover, .rentalo-module-design-scope .rentalo-custom-select__option:focus{ border-color:var(--rentalo-option-hover-bg,#C20000); background:var(--rentalo-option-hover-bg,#C20000); color:var(--rentalo-option-hover-text-color,#273b48); } .rentalo-module-design-scope .rentalo-custom-select__option.is-selected{ border-color:var(--rentalo-option-selected-bg,#C20000); background:var(--rentalo-option-selected-bg,#C20000); color:var(--rentalo-option-active-text-color,#273b48); } /* Wenn ausgewählter Wert zusätzlich gehovert wird, bleibt Hover steuerbar. */ .rentalo-module-design-scope .rentalo-custom-select__option.is-selected:hover, .rentalo-module-design-scope .rentalo-custom-select__option.is-selected:focus{ border-color:var(--rentalo-option-hover-bg,#C20000); background:var(--rentalo-option-hover-bg,#C20000); color:var(--rentalo-option-active-text-color,#273b48); } /* Kompakte Toolbar-Selects behalten genug Breite, aber Optionen wirken wie Uhrzeitbuttons. */ .rentalo-module-design-scope .rentalo-ui-step2-per-page-form .rentalo-custom-select__list, .rentalo-module-design-scope .rentalo-ui-step2-pagination-form .rentalo-custom-select__list{ min-width:50px; } .rentalo-module-design-scope .rentalo-ui-step2-per-page-form .rentalo-custom-select__option, .rentalo-module-design-scope .rentalo-ui-step2-pagination-form .rentalo-custom-select__option{ justify-content:center; text-align:center; } /* 2.15.205 - Einheitliche Uhrzeit-Optionsfarben wie Custom-Selects. */ .rentalo-ui-picker-panel .rentalo-ui-time-option, .rentalo-ui-picker-panel--portal .rentalo-ui-time-option, .rentalo-ui-step2-picker-panel .rentalo-ui-time-option, .rentalo-ui-step2-picker-panel--portal .rentalo-ui-time-option, .rentalo-ui-step1-module .rentalo-ui-time-option, .rentalo-ui-step2-picker-module .rentalo-ui-time-option, .rentalo-time-option{ border-color:var(--rentalo-option-border-color,#d6e0ec); color:var(--rentalo-option-text-color,#273b48); } .rentalo-ui-picker-panel .rentalo-ui-time-option:hover, .rentalo-ui-picker-panel .rentalo-ui-time-option:focus, .rentalo-ui-picker-panel--portal .rentalo-ui-time-option:hover, .rentalo-ui-picker-panel--portal .rentalo-ui-time-option:focus, .rentalo-ui-step2-picker-panel .rentalo-ui-time-option:hover, .rentalo-ui-step2-picker-panel .rentalo-ui-time-option:focus, .rentalo-ui-step2-picker-panel--portal .rentalo-ui-time-option:hover, .rentalo-ui-step2-picker-panel--portal .rentalo-ui-time-option:focus, .rentalo-ui-step1-module .rentalo-ui-time-option:hover, .rentalo-ui-step1-module .rentalo-ui-time-option:focus, .rentalo-ui-step2-picker-module .rentalo-ui-time-option:hover, .rentalo-ui-step2-picker-module .rentalo-ui-time-option:focus, .rentalo-time-option:hover, .rentalo-time-option:focus{ border-color:var(--rentalo-option-hover-bg,#C20000); background:var(--rentalo-option-hover-bg,#C20000); color:var(--rentalo-option-hover-text-color,#273b48); } .rentalo-ui-picker-panel .rentalo-ui-time-option.is-selected, .rentalo-ui-picker-panel .rentalo-ui-time-option.is-active, .rentalo-ui-picker-panel .rentalo-ui-time-option[aria-selected="true"], .rentalo-ui-picker-panel--portal .rentalo-ui-time-option.is-selected, .rentalo-ui-picker-panel--portal .rentalo-ui-time-option.is-active, .rentalo-ui-picker-panel--portal .rentalo-ui-time-option[aria-selected="true"], .rentalo-ui-step2-picker-panel .rentalo-ui-time-option.is-selected, .rentalo-ui-step2-picker-panel .rentalo-ui-time-option.is-active, .rentalo-ui-step2-picker-panel .rentalo-ui-time-option[aria-selected="true"], .rentalo-ui-step2-picker-panel--portal .rentalo-ui-time-option.is-selected, .rentalo-ui-step2-picker-panel--portal .rentalo-ui-time-option.is-active, .rentalo-ui-step2-picker-panel--portal .rentalo-ui-time-option[aria-selected="true"], .rentalo-ui-step1-module .rentalo-ui-time-option.is-selected, .rentalo-ui-step1-module .rentalo-ui-time-option.is-active, .rentalo-ui-step1-module .rentalo-ui-time-option[aria-selected="true"], .rentalo-ui-step2-picker-module .rentalo-ui-time-option.is-selected, .rentalo-ui-step2-picker-module .rentalo-ui-time-option.is-active, .rentalo-ui-step2-picker-module .rentalo-ui-time-option[aria-selected="true"], .rentalo-time-option.is-selected, .rentalo-time-option.is-active, .rentalo-time-option[aria-selected="true"]{ border-color:var(--rentalo-option-selected-bg,#C20000); background:var(--rentalo-option-selected-bg,#C20000); color:var(--rentalo-option-active-text-color,#273b48); } /* ------------------------------------------------------------ * 17. Phase 8: Select-Texte wieder normale Schriftstärke * ------------------------------------------------------------ */ .rentalo-module-design-scope .rentalo-custom-select__button, .rentalo-module-design-scope .rentalo-custom-select__value, .rentalo-module-design-scope .rentalo-custom-select__option, .rentalo-module-design-scope .rentalo-custom-select__option.is-selected{ font-weight:400; } /* 2.15.208 - Step2 Per-Page Custom-Select kompakt halten, auch nach Modul-Design-Layer. */ .rentalo-module-design-scope .rentalo-ui-step2-per-page-form select, .rentalo-module-design-scope .rentalo-ui-step2-per-page-form .rentalo-custom-select, .rentalo-module-design-scope .rentalo-ui-step2-per-page-form .rentalo-custom-select__button{ width:42px; min-width:42px; max-width:42px; } .rentalo-module-design-scope .rentalo-ui-step2-per-page-form .rentalo-custom-select__button{ padding-left:6px; padding-right:6px; justify-content:center; } .rentalo-module-design-scope .rentalo-ui-step2-per-page-form .rentalo-custom-select__value{ text-align:center; } /* 2.15.210 - Step2 Grid-Cards sichtbare Feature-/Linienkorrektur nach Modul-Design-Layer. */ .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list{ width:100%; box-sizing:border-box; margin:12px 0 0; padding:12px 16px; border-top:1px solid var(--rentalo-border,#d6e0ec); border-bottom:1px solid var(--rentalo-border,#d6e0ec); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,68px); flex:0 0 162px; height:162px; max-height:162px; overflow:hidden; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature{ min-height:68px; max-height:68px; padding:0 7px; overflow:hidden; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-content, .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-side{ padding-left:16px; padding-right:16px; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-side{ border-top:0; margin-top:auto; } /* 2.15.211 - Step2 Grid-Mockup final nach Modul-Design-Layer. Nur Strukturbreiten/Höhen, Admin-Farben und Bildsettings bleiben erhalten. */ @media (min-width:768px){ .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-content, .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list, .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-side{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-content{ padding:16px 18px 0; align-items:stretch; text-align:left; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,76px); height:176px; min-height:176px; max-height:176px; flex:0 0 176px; margin:16px 0 0; padding:12px 18px; border-top:1px solid var(--rentalo-border,#d6e0ec); border-bottom:1px solid var(--rentalo-border,#d6e0ec); overflow:hidden; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature{ height:76px; min-height:76px; max-height:76px; padding:0 8px; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature:nth-child(n/**/+4){ padding-top:10px; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-side{ margin-top:auto; padding:18px; min-height:92px; border-top:0; display:flex; align-items:center; justify-content:space-between; } } /* 2.15.212 - Step2 Grid final: Footer-Zeile und festes Feature-Raster nach Modul-Design-Layer. */ @media (min-width:768px){ .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-side{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; min-height:84px; padding-top:14px; padding-bottom:14px; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-item-card .rentalo-submit-button{ width:auto; min-width:128px; padding-left:16px; padding-right:16px; white-space:nowrap; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,68px); height:160px; min-height:160px; max-height:160px; flex-basis:160px; padding:12px 18px; overflow:hidden; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list::before, .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list::after{ content:""; position:absolute; pointer-events:none; z-index:1; background:var(--rentalo-border,#d6e0ec); } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list::before{ left:18px; right:18px; top:calc(12px + 68px); height:1px; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list::after{ top:12px; bottom:12px; left:18px; right:18px; background: linear-gradient(to right, transparent calc(33.333% - .5px), var(--rentalo-border,#d6e0ec) calc(33.333% - .5px), var(--rentalo-border,#d6e0ec) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), var(--rentalo-border,#d6e0ec) calc(66.666% - .5px), var(--rentalo-border,#d6e0ec) calc(66.666% + .5px), transparent calc(66.666% + .5px) ); } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature{ position:relative; z-index:2; border-right:0; border-top:0; height:68px; min-height:68px; max-height:68px; row-gap:1px; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature.is-placeholder{ visibility:visible; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature.is-placeholder > *{ visibility:hidden; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature svg{ width:18px; height:18px; max-width:18px; max-height:18px; margin:0 0 1px; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-copy{ gap:0; line-height:1.08; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list--no-icons .rentalo-ui-step2-feature svg{ display:none; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list--no-icons .rentalo-ui-step2-feature{ align-content:center; padding-top:0; } } /* 2.15.213 - assets/css/rentalo-ui-module-design.css - Step2 Grid: sichtbare Tic-Tac-Toe-Linien und bessere Icon-Abstände. */ @media (min-width:768px){ .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,72px); height:168px; min-height:168px; max-height:168px; flex-basis:168px; padding:12px 18px; overflow:hidden; border-top:1px solid var(--rentalo-border,#d6e0ec); border-bottom:1px solid var(--rentalo-border,#d6e0ec); background: linear-gradient(var(--rentalo-border,#d6e0ec),var(--rentalo-border,#d6e0ec)) calc(18px + (100% - 36px) / 3) 12px / 1px calc(100% - 24px) no-repeat, linear-gradient(var(--rentalo-border,#d6e0ec),var(--rentalo-border,#d6e0ec)) calc(18px + (100% - 36px) * 2 / 3) 12px / 1px calc(100% - 24px) no-repeat, linear-gradient(var(--rentalo-border,#d6e0ec),var(--rentalo-border,#d6e0ec)) 18px calc(12px + 72px) / calc(100% - 36px) 1px no-repeat; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list::before, .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list::after{ content:none; display:none; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature{ position:relative; z-index:1; border:0; height:72px; min-height:72px; max-height:72px; padding:1px 8px 0; display:grid; grid-template-columns:1fr; justify-items:center; align-content:start; row-gap:3px; overflow:hidden; text-align:center; background:transparent; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature:nth-child(n/**/+4){ padding-top:10px; border:0; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature svg{ width:20px; height:20px; max-width:20px; max-height:20px; margin:0 0 3px; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-copy{ gap:2px; line-height:1.15; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-copy strong{ line-height:15px; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-copy small{ line-height:14px; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature.is-placeholder{ visibility:visible; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature.is-placeholder > *{ visibility:hidden; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list--no-icons .rentalo-ui-step2-feature svg{ display:none; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list--no-icons .rentalo-ui-step2-feature{ align-content:center; padding-top:0; row-gap:3px; } .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list--no-icons .rentalo-ui-step2-feature:nth-child(n/**/+4){ padding-top:0; } } /* 2.15.214 - Step2 getrennte Beschreibung und Step3 Mengenfeld nach Modul-Design-Layer. */ @media (min-width:768px){ .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-group-meta.rentalo-ui-step2-info{ height:22px; min-height:22px; max-height:22px; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-group-meta.rentalo-ui-step2-info p{ display:block; height:22px; min-height:22px; max-height:22px; line-height:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-group-meta.rentalo-ui-step2-description{ height:44px; min-height:44px; max-height:44px; } .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-group-meta.rentalo-ui-step2-description p{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:44px; min-height:44px; max-height:44px; line-height:22px; overflow:hidden; text-overflow:ellipsis; } } /* 2.15.516 - Canonical Step 3 grids when optional icons are disabled. */ .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-tariff-icon, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-insurance-icon, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-option-icon{ display:none; } @media (min-width:901px){ .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-tariff-row, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-insurance-row{ grid-template-columns:30px minmax(0,1fr) 124px; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-option-row{ grid-template-columns:30px minmax(0,1fr) 54px 124px; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-tariff-row .rentalo-step3-control, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-insurance-row .rentalo-step3-control, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-option-row .rentalo-step3-option-check{ grid-column:1; justify-self:start; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-tariff-row .rentalo-step3-content, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-insurance-row .rentalo-step3-content, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-option-row .rentalo-step3-content{ grid-column:2; min-width:0; width:100%; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-tariff-row .rentalo-step3-price, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-insurance-row .rentalo-step3-price{ grid-column:3; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-option-row .rentalo-step3-option-quantity{ grid-column:3; width:54px; min-width:54px; max-width:54px; padding-left:6px; padding-right:6px; justify-self:center; border-left:1px solid var(--rentalo-border,#d8e0ea); } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-option-row .rentalo-step3-price{ grid-column:4; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-price{ width:124px; min-width:124px; max-width:124px; justify-self:end; text-align:right; overflow:hidden; } .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-price strong, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-price small{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } } /* 2.15.218 - assets/css/rentalo-ui-module-design.css - Step3 mobil: Tarifbeschreibung volle Breite und nur 10px Rand. */ @media (max-width:767px){ /* Gesamtmodul mobil nicht doppelt einrücken. */ .rentalo-step1-hero.rentalo-module-design-scope, .rentalo-module-design-scope.rentalo-ui-step2, .rentalo-module-design-scope.rentalo-ui-step3-shell, .rentalo-module-design-scope.rentalo-ui-step4-shell{ width:100%; max-width:100%; box-sizing:border-box; padding-left:0; padding-right:0; } .rentalo-ui-step3-shell.rentalo-module-design-scope{ margin-left:0; margin-right:0; } /* Tarifbeschreibung mobil wie Versicherung: unter Radio/Icon/Titel volle Breite. */ .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-tariff-content, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-content{ display:contents; } .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-tariff-content > strong, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-content > strong{ grid-column:3; grid-row:1; } .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-tariff-content > span, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-content > span, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-tariff-content > small, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-content > small, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-tariff-content > p, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-content > p{ grid-column:1 / -1; grid-row:auto; width:100%; max-width:100%; margin:0; padding:0; text-align:left; } .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-tariff-content > span:first-of-type, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-content > span:first-of-type, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-tariff-content > p:first-of-type, .rentalo-ui-step3-shell .rentalo-step3-tariff-row .rentalo-step3-content > p:first-of-type{ grid-row:2; } /* Wenn Step3-Icons deaktiviert sind, Titel in Spalte 2 statt nicht vorhandener Icon-Spalte. */ .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-tariff-row .rentalo-step3-tariff-content > strong, .rentalo-ui-step3-shell.rentalo-step3-icons-disabled .rentalo-step3-tariff-row .rentalo-step3-content > strong{ grid-column:2; } } /* 2.15.219 - assets/css/rentalo-ui-module-design.css - Mobile Breiten, Step2 Toolbar, Step3 Controls und Texte. */ /* Step3: Checkboxen/Radios optisch angleichen und Versicherungs-Radio größer. */ .rentalo-ui-step3-shell .rentalo-step3-control, .rentalo-ui-step3-shell .rentalo-step3-option-check{ display:flex; align-items:center; justify-content:center; } .rentalo-ui-step3-shell .rentalo-step3-control input[type="radio"], .rentalo-ui-step3-shell .rentalo-step3-control input[type="checkbox"], .rentalo-ui-step3-shell .rentalo-step3-option-check .rentalo-option-checkbox-input, .rentalo-ui-step3-shell .rentalo-step3-option-check input[type="checkbox"]{ width:17px; min-width:17px; max-width:17px; height:17px; min-height:17px; max-height:17px; margin:0; padding:0; box-sizing:border-box; accent-color:var(--rentalo-primary,#006699); } .rentalo-ui-step3-shell .rentalo-step3-insurance-radio input[type="radio"], .rentalo-ui-step3-shell .rentalo-step3-insurance-radio input[type="checkbox"]{ width:18px; min-width:18px; max-width:18px; height:18px; min-height:18px; max-height:18px; } /* Step2: Desktop-Beschriftung aktualisiert, mobile Kurzbeschriftung vorbereitet. */ .rentalo-ui-step2-per-page-label-short{ display:none; } .rentalo-ui-step2-per-page-label-full{ display:inline; } /* Step2: Infotext und Objektbeschreibung mobil besser lesbar. */ @media (max-width:767px){ .rentalo-ui-step2 .rentalo-ui-step2-meta, .rentalo-ui-step2 .rentalo-ui-step2-info, .rentalo-ui-step2 .rentalo-ui-step2-description, .rentalo-ui-step2 .rentalo-ui-step2-meta p, .rentalo-ui-step2 .rentalo-ui-step2-info p, .rentalo-ui-step2 .rentalo-ui-step2-description p{ font-size:14px; line-height:1.35; } } /* Step1/2/3/4 mobil: einheitlich maximal ca. 10px Rand, keine doppelte Einrückung. */ @media (max-width:767px){ .rentalo-step1-hero.rentalo-module-design-scope, .rentalo-step1-inline-shell.rentalo-module-design-scope, .rentalo-step1-compact-shell.rentalo-module-design-scope, .rentalo-module-design-scope.rentalo-ui-step2, .rentalo-module-design-scope.rentalo-ui-step3-shell, .rentalo-module-design-scope.rentalo-ui-step4-shell{ width:100%; max-width:100%; box-sizing:border-box; padding-left:0; padding-right:0; margin-left:0; margin-right:0; } .rentalo-step1-hero.rentalo-module-design-scope .rentalo-ui-step1-module, .rentalo-step1-inline-shell.rentalo-module-design-scope .rentalo-ui-step1-module, .rentalo-step1-compact-shell.rentalo-module-design-scope .rentalo-ui-step1-module, .rentalo-step1-hero.rentalo-module-design-scope .rentalo-layout-real, .rentalo-step1-inline-shell.rentalo-module-design-scope .rentalo-layout-real, .rentalo-step1-compact-shell.rentalo-module-design-scope .rentalo-layout-real{ width:100%; max-width:100%; box-sizing:border-box; } .rentalo-module-design-scope .rentalo-frontend-shell, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-frontend-shell, .rentalo-module-design-scope.rentalo-ui-step3-shell .rentalo-frontend-shell, .rentalo-module-design-scope.rentalo-ui-step4-shell .rentalo-frontend-shell{ width:100%; max-width:100%; padding-left:10px; padding-right:10px; box-sizing:border-box; } } /* Step2 mobile Toolbar: links Filter + Ansichten, rechts Anzahl. */ @media (max-width:767px){ .rentalo-ui-step2-result-toolbar{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:10px; row-gap:0; } .rentalo-ui-step2-result-toolbar-left{ grid-column:1; display:flex; align-items:center; justify-content:flex-start; gap:0; min-width:0; } .rentalo-ui-step2-filter-button{ flex:0 0 auto; margin-right:10px; } .rentalo-ui-step2-result-layout{ display:flex; align-items:center; gap:6px; flex:0 0 auto; } .rentalo-ui-step2-result-toolbar-center{ display:none; } .rentalo-ui-step2-result-toolbar-right{ grid-column:2; justify-self:end; display:flex; align-items:center; justify-content:flex-end; min-width:0; } .rentalo-ui-step2-layout-button{ width:34px; min-width:34px; max-width:34px; height:34px; min-height:34px; max-height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; } .rentalo-ui-step2-layout-button svg{ width:18px; height:18px; } .rentalo-ui-step2-layout-text{ display:none; } .rentalo-ui-step2-per-page-label-full{ display:none; } .rentalo-ui-step2-per-page-label-short{ display:inline; } .rentalo-ui-step2-per-page-form{ display:flex; align-items:center; justify-content:flex-end; gap:8px; white-space:nowrap; } .rentalo-ui-step2-per-page-form label{ margin:0; white-space:nowrap; } .rentalo-ui-step2-per-page-form select, .rentalo-ui-step2-per-page-form .rentalo-custom-select, .rentalo-ui-step2-per-page-form .rentalo-custom-select__button{ width:42px; min-width:42px; max-width:42px; } .rentalo-ui-step2-pagination-bottom{ display:grid; grid-template-columns:1fr; row-gap:8px; } .rentalo-ui-step2-pagination-bottom-center{ grid-column:1; justify-self:center; } .rentalo-ui-step2-pagination-bottom-right{ grid-column:1; justify-self:end; display:flex; justify-content:flex-end; width:100%; } .rentalo-ui-step2-pagination-bottom-right .rentalo-ui-step2-per-page-form{ justify-content:flex-end; margin-left:auto; } } /* 2.15.220 - assets/css/rentalo-ui-module-design.css - Step2 mobile Toolbar: exakt eine Zeile / zwei Spalten; Card-Texte 14px. */ @media (max-width:767px){ .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-result-toolbar, .rentalo-ui-step2.rentalo-ui-step2--layout-grid .rentalo-ui-step2-result-toolbar, .rentalo-ui-step2 .rentalo-ui-step2-result-toolbar{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"left right"; align-items:center; column-gap:10px; row-gap:0; padding:10px 12px; min-height:54px; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-result-toolbar-left, .rentalo-ui-step2 .rentalo-ui-step2-result-toolbar-left{ grid-area:left; grid-column:auto; display:flex; align-items:center; justify-content:flex-start; gap:0; min-width:0; width:auto; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-result-toolbar-center, .rentalo-ui-step2 .rentalo-ui-step2-result-toolbar-center{ display:none; width:0; min-width:0; height:0; overflow:hidden; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-result-toolbar-right, .rentalo-ui-step2 .rentalo-ui-step2-result-toolbar-right{ grid-area:right; grid-column:auto; display:flex; align-items:center; justify-content:flex-end; justify-self:end; min-width:0; width:auto; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-filter-button, .rentalo-ui-step2 .rentalo-ui-step2-filter-button{ flex:0 0 auto; margin:0 10px 0 0; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-result-layout, .rentalo-ui-step2 .rentalo-ui-step2-result-layout{ display:flex; align-items:center; justify-content:flex-start; gap:6px; flex:0 0 auto; width:auto; min-width:0; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-layout-button, .rentalo-ui-step2 .rentalo-ui-step2-layout-button{ width:34px; min-width:34px; max-width:34px; height:34px; min-height:34px; max-height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; flex:0 0 34px; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-layout-text, .rentalo-ui-step2 .rentalo-ui-step2-layout-text{ display:none; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-per-page-form, .rentalo-ui-step2 .rentalo-ui-step2-per-page-form{ display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:8px; width:auto; min-width:0; white-space:nowrap; margin:0; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-per-page-form label, .rentalo-ui-step2 .rentalo-ui-step2-per-page-form label{ margin:0; font-size:14px; line-height:1.2; white-space:nowrap; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-per-page-label-full, .rentalo-ui-step2 .rentalo-ui-step2-per-page-label-full{ display:none; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-per-page-label-short, .rentalo-ui-step2 .rentalo-ui-step2-per-page-label-short{ display:inline; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-per-page-form select, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-per-page-form .rentalo-custom-select, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-per-page-form .rentalo-custom-select__button, .rentalo-ui-step2 .rentalo-ui-step2-per-page-form select, .rentalo-ui-step2 .rentalo-ui-step2-per-page-form .rentalo-custom-select, .rentalo-ui-step2 .rentalo-ui-step2-per-page-form .rentalo-custom-select__button{ width:42px; min-width:42px; max-width:42px; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-pagination-bottom, .rentalo-ui-step2 .rentalo-ui-step2-pagination-bottom{ display:grid; grid-template-columns:1fr; row-gap:8px; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-pagination-bottom-right, .rentalo-ui-step2 .rentalo-ui-step2-pagination-bottom-right{ grid-column:1; justify-self:end; display:flex; justify-content:flex-end; width:100%; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-meta, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-info, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-description, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-meta p, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-info p, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-description p, .rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-meta, .rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-info, .rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-description, .rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-meta p, .rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-info p, .rentalo-ui-step2 .rentalo-ui-step2-item-card .rentalo-group-meta.rentalo-ui-step2-description p{ font-size:14px; line-height:1.35; } } /* 2.15.222 - assets/css/rentalo-ui-module-design.css - To-do Batch: Dropdown-Schriftfarben, Step2-Feature-Gap, Details-Klassen, Step4 Dropdown-Freiraum. */ /* Step2 Feature-Liste: seitliches Gap reduzieren. */ .rentalo-ui-step2 .rentalo-ui-step2-feature-list, .rentalo-frontend-wrap.rentalo-ui-step2.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list, .rentalo-module-design-scope.rentalo-ui-step2--layout-grid.rentalo-ui-step2--card-image-top .rentalo-ui-step2-feature-list{ gap:12px 5px; } /* Step3/Step4 Details-Box nutzt Step2-Klassen; alte Detailregeln nicht mehr dominieren lassen. */ .rentalo-ui-step3-shell .rentalo-vehicle-intro-block.rentalo-ui-step2-content, .rentalo-ui-step4-shell .rentalo-vehicle-intro-block.rentalo-ui-step2-content{ display:flex; flex-direction:column; gap:0; } .rentalo-ui-step3-shell .rentalo-vehicle-intro-block .rentalo-ui-step2-title, .rentalo-ui-step4-shell .rentalo-vehicle-intro-block .rentalo-ui-step2-title{ margin:0; } .rentalo-ui-step3-shell .rentalo-vehicle-intro-block .rentalo-ui-step2-meta, .rentalo-ui-step4-shell .rentalo-vehicle-intro-block .rentalo-ui-step2-meta, .rentalo-ui-step3-shell .rentalo-vehicle-intro-block .rentalo-ui-step2-info, .rentalo-ui-step4-shell .rentalo-vehicle-intro-block .rentalo-ui-step2-info, .rentalo-ui-step3-shell .rentalo-vehicle-intro-block .rentalo-ui-step2-description, .rentalo-ui-step4-shell .rentalo-vehicle-intro-block .rentalo-ui-step2-description{ width:100%; } /* Step4 Zahlung/Kaution: Custom-Select darf aus der Box heraus sichtbar sein. */ .rentalo-ui-step4-shell .rentalo-step4-payment-card, .rentalo-ui-step4-shell .rentalo-step4-payment-body, .rentalo-ui-step4-shell .rentalo-step4-payment-grid, .rentalo-ui-step4-shell .rentalo-step4-payment-field{ overflow:visible; } .rentalo-ui-step4-shell .rentalo-step4-payment-field .rentalo-custom-select{ position:relative; z-index:10070; } .rentalo-ui-step4-shell .rentalo-step4-payment-field .rentalo-custom-select.is-open{ z-index:10090; } .rentalo-ui-step4-shell .rentalo-step4-payment-field .rentalo-custom-select__list{ z-index:10100; max-height:280px; } /* 2.15.223 - assets/css/rentalo-ui-module-design.css - Step4 Zahlungsdropdown als Portal-Liste und Details wirklich wie Step2. */ /* Portal-Liste für Step4 Zahlung/Kaution: aus allen Parent-Containern herauslösen. */ .rentalo-custom-select[data-rentalo-select-portal="1"] .rentalo-custom-select__list{ position:fixed; z-index:2147483000; display:none; } .rentalo-custom-select[data-rentalo-select-portal="1"].is-open .rentalo-custom-select__list{ display:flex; } /* Alte Details-Styles in Step3/Step4 gezielt neutralisieren, damit Step2-Klassen sichtbar greifen. */ .rentalo-frontend-wrap .rentalo-step3-vehicle-body .rentalo-vehicle-intro-block.rentalo-ui-step2-content h3.rentalo-ui-step2-title, .rentalo-frontend-wrap .rentalo-step4-vehicle-body .rentalo-vehicle-intro-block.rentalo-ui-step2-content h3.rentalo-ui-step2-title{ font-size:var(--rentalo-heading-size); color:var(--rentalo-title); line-height:1.2; font-weight:700; margin:0 0 4px; } .rentalo-frontend-wrap .rentalo-step3-vehicle-body .rentalo-vehicle-intro-block.rentalo-ui-step2-content .rentalo-item-group.rentalo-ui-step2-group.rentalo-vehicle-meta-line, .rentalo-frontend-wrap .rentalo-step4-vehicle-body .rentalo-vehicle-intro-block.rentalo-ui-step2-content .rentalo-item-group.rentalo-ui-step2-group.rentalo-vehicle-meta-line{ margin:0 0 4px; padding:0; color:inherit; font-size:inherit; line-height:inherit; font-weight:inherit; border:0; } .rentalo-frontend-wrap .rentalo-step3-vehicle-body .rentalo-vehicle-intro-block.rentalo-ui-step2-content .rentalo-ui-step2-examples.rentalo-vehicle-example-line, .rentalo-frontend-wrap .rentalo-step4-vehicle-body .rentalo-vehicle-intro-block.rentalo-ui-step2-content .rentalo-ui-step2-examples.rentalo-vehicle-example-line{ margin:0 0 4px; padding:0; color:inherit; font-size:inherit; line-height:inherit; font-weight:inherit; border:0; } .rentalo-frontend-wrap .rentalo-step3-vehicle-body .rentalo-vehicle-intro-block.rentalo-ui-step2-content .rentalo-group-meta.rentalo-ui-step2-meta.rentalo-ui-step2-info, .rentalo-frontend-wrap .rentalo-step4-vehicle-body .rentalo-vehicle-intro-block.rentalo-ui-step2-content .rentalo-group-meta.rentalo-ui-step2-meta.rentalo-ui-step2-info, .rentalo-frontend-wrap .rentalo-step3-vehicle-body .rentalo-vehicle-intro-block.rentalo-ui-step2-content .rentalo-group-meta.rentalo-ui-step2-meta.rentalo-ui-step2-description, .rentalo-frontend-wrap .rentalo-step4-vehicle-body .rentalo-vehicle-intro-block.rentalo-ui-step2-content .rentalo-group-meta.rentalo-ui-step2-meta.rentalo-ui-step2-description{ margin:0; padding:0; border:0; background:transparent; color:inherit; font-size:inherit; line-height:inherit; font-weight:inherit; } .rentalo-frontend-wrap .rentalo-step3-vehicle-body .rentalo-vehicle-intro-block.rentalo-ui-step2-content .rentalo-group-meta.rentalo-ui-step2-meta.rentalo-ui-step2-info p, .rentalo-frontend-wrap .rentalo-step4-vehicle-body .rentalo-vehicle-intro-block.rentalo-ui-step2-content .rentalo-group-meta.rentalo-ui-step2-meta.rentalo-ui-step2-info p, .rentalo-frontend-wrap .rentalo-step3-vehicle-body .rentalo-vehicle-intro-block.rentalo-ui-step2-content .rentalo-group-meta.rentalo-ui-step2-meta.rentalo-ui-step2-description p, .rentalo-frontend-wrap .rentalo-step4-vehicle-body .rentalo-vehicle-intro-block.rentalo-ui-step2-content .rentalo-group-meta.rentalo-ui-step2-meta.rentalo-ui-step2-description p{ margin:0; padding:0; color:inherit; font-size:inherit; line-height:inherit; font-weight:inherit; } /* In Details nicht ausblenden, wenn Step2-Klassen technisch leer/gefüllt steuern. */ .rentalo-ui-step3-shell .rentalo-vehicle-intro-block .is-empty, .rentalo-ui-step4-shell .rentalo-vehicle-intro-block .is-empty{ display:none; } /* 2.15.224 - assets/css/rentalo-ui-module-design.css - Details-Box: echten Step2-Kontext für Objektinfos nutzen. */ .rentalo-ui-step3-shell .rentalo-vehicle-intro-block.rentalo-ui-step2.rentalo-ui-step2-item-card, .rentalo-ui-step4-shell .rentalo-vehicle-intro-block.rentalo-ui-step2.rentalo-ui-step2-item-card{ display:block; padding:0; margin:0; border:0; background:transparent; box-shadow:none; border-radius:0; } .rentalo-ui-step3-shell .rentalo-vehicle-intro-block.rentalo-ui-step2.rentalo-ui-step2-item-card .rentalo-ui-step2-content, .rentalo-ui-step4-shell .rentalo-vehicle-intro-block.rentalo-ui-step2.rentalo-ui-step2-item-card .rentalo-ui-step2-content{ display:block; padding:0; margin:0; min-width:0; } .rentalo-ui-step3-shell .rentalo-vehicle-intro-block.rentalo-ui-step2 .rentalo-ui-step2-title, .rentalo-ui-step4-shell .rentalo-vehicle-intro-block.rentalo-ui-step2 .rentalo-ui-step2-title{ margin-top:0; } .rentalo-ui-step3-shell .rentalo-vehicle-intro-block.rentalo-ui-step2 .is-empty, .rentalo-ui-step4-shell .rentalo-vehicle-intro-block.rentalo-ui-step2 .is-empty{ display:none; } /* 2.15.617 - Shared object-info rules 2.15.225-2.15.228 live canonically in frontend.css. */ /* 2.15.229 - assets/css/rentalo-ui-module-design.css - Dezentes aktives Feldfeedback mit Design-Settings. */ .rentalo-frontend-wrap{ } .rentalo-frontend-wrap input[type="text"], .rentalo-frontend-wrap input[type="email"], .rentalo-frontend-wrap input[type="tel"], .rentalo-frontend-wrap input[type="number"], .rentalo-frontend-wrap input[type="search"], .rentalo-frontend-wrap input[type="date"], .rentalo-frontend-wrap input[type="time"], .rentalo-frontend-wrap select, .rentalo-frontend-wrap textarea, .rentalo-frontend-wrap .rentalo-custom-select__button, .rentalo-frontend-wrap .rentalo-ui-date-field, .rentalo-frontend-wrap .rentalo-ui-time-field{ transition:border-color .16s ease, border-bottom-color .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease; } /* 2.15.230 - assets/css/rentalo-ui-module-design.css - Step4 Personenfelder: aktiven Fokus sichtbar machen. */ .rentalo-ui-step4-shell .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]), .rentalo-ui-step4-shell .rentalo-frontend-field select, .rentalo-ui-step4-shell .rentalo-frontend-field textarea, .rentalo-ui-step4-shell .rentalo-form-input, .rentalo-ui-step4-shell .rentalo-form-control, .rentalo-ui-step4-shell .rentalo-form-select, .rentalo-ui-step4-shell .rentalo-form-textarea, .rentalo-ui-step4-shell .rentalo-step4-driver-card input:not([type="checkbox"]):not([type="radio"]), .rentalo-ui-step4-shell .rentalo-step4-driver-card select, .rentalo-ui-step4-shell .rentalo-step4-driver-card textarea{ transition:border-color .16s ease, border-bottom-color .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease; } .rentalo-ui-step4-shell .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]):focus, .rentalo-ui-step4-shell .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]):focus-visible, .rentalo-ui-step4-shell .rentalo-frontend-field select:focus, .rentalo-ui-step4-shell .rentalo-frontend-field select:focus-visible, .rentalo-ui-step4-shell .rentalo-frontend-field textarea:focus, .rentalo-ui-step4-shell .rentalo-frontend-field textarea:focus-visible, .rentalo-ui-step4-shell .rentalo-form-input:focus, .rentalo-ui-step4-shell .rentalo-form-input:focus-visible, .rentalo-ui-step4-shell .rentalo-form-control:focus, .rentalo-ui-step4-shell .rentalo-form-control:focus-visible, .rentalo-ui-step4-shell .rentalo-form-select:focus, .rentalo-ui-step4-shell .rentalo-form-select:focus-visible, .rentalo-ui-step4-shell .rentalo-form-textarea:focus, .rentalo-ui-step4-shell .rentalo-form-textarea:focus-visible, .rentalo-ui-step4-shell .rentalo-step4-driver-card input:not([type="checkbox"]):not([type="radio"]):focus, .rentalo-ui-step4-shell .rentalo-step4-driver-card input:not([type="checkbox"]):not([type="radio"]):focus-visible, .rentalo-ui-step4-shell .rentalo-step4-driver-card select:focus, .rentalo-ui-step4-shell .rentalo-step4-driver-card select:focus-visible, .rentalo-ui-step4-shell .rentalo-step4-driver-card textarea:focus, .rentalo-ui-step4-shell .rentalo-step4-driver-card textarea:focus-visible{ outline:none; border-color:var(--rentalo-field-focus-border,var(--rentalo-primary,#006699)); border-bottom-color:var(--rentalo-field-focus-border,var(--rentalo-primary,#006699)); background-color:var(--rentalo-field-focus-bg,var(--rentalo-input-bg,#ffffff)); box-shadow:none; } /* Step4 Linien-Design: Fokus als aktive Linie statt Box-Ring. */ .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]):focus, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]):focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-frontend-field select:focus, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-frontend-field select:focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-frontend-field textarea:focus, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-frontend-field textarea:focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-form-input:focus, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-form-input:focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-form-control:focus, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-form-control:focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-form-select:focus, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-form-select:focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-form-textarea:focus, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-form-textarea:focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-step4-driver-card input:not([type="checkbox"]):not([type="radio"]):focus, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-step4-driver-card input:not([type="checkbox"]):not([type="radio"]):focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-step4-driver-card select:focus, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-step4-driver-card select:focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-step4-driver-card textarea:focus, .rentalo-ui-step4-shell.rentalo-field-style-line .rentalo-step4-driver-card textarea:focus-visible{ box-shadow:none; background-color:var(--rentalo-field-focus-bg,transparent); } /* Step4 Boxen-Design: Fokus als dezenter Außenring. */ .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]):focus, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]):focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-frontend-field select:focus, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-frontend-field select:focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-frontend-field textarea:focus, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-frontend-field textarea:focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-form-input:focus, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-form-input:focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-form-control:focus, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-form-control:focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-form-select:focus, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-form-select:focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-form-textarea:focus, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-form-textarea:focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-step4-driver-card input:not([type="checkbox"]):not([type="radio"]):focus, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-step4-driver-card input:not([type="checkbox"]):not([type="radio"]):focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-step4-driver-card select:focus, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-step4-driver-card select:focus-visible, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-step4-driver-card textarea:focus, .rentalo-ui-step4-shell.rentalo-field-style-box .rentalo-step4-driver-card textarea:focus-visible{ box-shadow:none; } /* Native Date/Time und Custom-Selects in Step4-Zahlungs-/Personenbereichen ebenfalls sichtbar. */ .rentalo-ui-step4-shell .rentalo-custom-select.is-open .rentalo-custom-select__button, .rentalo-ui-step4-shell .rentalo-custom-select__button:focus, .rentalo-ui-step4-shell .rentalo-custom-select__button:focus-visible{ border-color:var(--rentalo-field-focus-border,var(--rentalo-primary,#006699)); border-bottom-color:var(--rentalo-field-focus-border,var(--rentalo-primary,#006699)); background-color:var(--rentalo-field-focus-bg,var(--rentalo-input-bg,#ffffff)); box-shadow:none; } /* 2.15.418 - Einheitliche Select-Darstellung in Step 1 bis Step 4. */ .rentalo-module-design-scope .rentalo-custom-select__button{ position:relative; padding-right:36px; transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease; } .rentalo-module-design-scope .rentalo-custom-select__button::after{ content:""; position:absolute; right:13px; top:50%; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-68%) rotate(45deg); transform-origin:center; opacity:.72; pointer-events:none; transition:transform .15s ease,opacity .15s ease; } .rentalo-module-design-scope.rentalo-field-style-line .rentalo-custom-select__button{ padding-right:30px; } .rentalo-module-design-scope.rentalo-field-style-line .rentalo-custom-select__button::after{ right:5px; } .rentalo-module-design-scope .rentalo-custom-select.is-open .rentalo-custom-select__button::after{ transform:translateY(-28%) rotate(225deg); opacity:1; } .rentalo-module-design-scope .rentalo-custom-select.is-open .rentalo-custom-select__button, .rentalo-module-design-scope .rentalo-custom-select__button:focus, .rentalo-module-design-scope .rentalo-custom-select__button:focus-visible{ border-color:var(--rentalo-primary,#006699); box-shadow:0 0 0 3px color-mix(in srgb,var(--rentalo-primary,#006699) 18%,transparent); outline:0; } .rentalo-module-design-scope.rentalo-field-style-line .rentalo-custom-select.is-open .rentalo-custom-select__button, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-custom-select__button:focus, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-custom-select__button:focus-visible{ box-shadow:0 2px 0 0 var(--rentalo-primary,#006699); } .rentalo-module-design-scope .rentalo-custom-select.is-disabled .rentalo-custom-select__button, .rentalo-module-design-scope .rentalo-custom-select__button:disabled{ opacity:.58; cursor:not-allowed; background-color:var(--rentalo-disabled-bg,#f2f4f7); } /* Native Fallback: falls JavaScript noch nicht geladen ist, bleibt die Optik identisch. */ .rentalo-module-design-scope select:not(.rentalo-native-select-enhanced){ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 16px) calc(50% - 2px),calc(100% - 11px) calc(50% - 2px); background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px; } .rentalo-module-design-scope.rentalo-field-style-line select:not(.rentalo-native-select-enhanced){ background-position:calc(100% - 9px) calc(50% - 2px),calc(100% - 4px) calc(50% - 2px); padding-right:26px; } /* 2.15.421 - Active field colors for date, time and usage inputs. */ .rentalo-module-design-scope .rentalo-ui-field:focus-within > .rentalo-ui-control, .rentalo-module-design-scope .rentalo-ui-field:focus-within .rentalo-ui-picker-toggle, .rentalo-module-design-scope .rentalo-ui-field:focus-within .rentalo-ui-step2-picker-toggle, .rentalo-module-design-scope .rentalo-ui-input[type="number"]:focus, .rentalo-module-design-scope .rentalo-ui-input[type="number"]:focus-visible, .rentalo-module-design-scope .rentalo-ui-picker-toggle:focus, .rentalo-module-design-scope .rentalo-ui-picker-toggle:focus-visible, .rentalo-module-design-scope .rentalo-ui-picker-toggle[aria-expanded="true"], .rentalo-module-design-scope .rentalo-ui-step2-picker-toggle:focus, .rentalo-module-design-scope .rentalo-ui-step2-picker-toggle:focus-visible, .rentalo-module-design-scope .rentalo-ui-step2-picker-toggle[aria-expanded="true"]{ outline:0; border-color:var(--rentalo-field-focus-border,var(--rentalo-primary,#006699)); border-bottom-color:var(--rentalo-field-focus-border,var(--rentalo-primary,#006699)); background-color:var(--rentalo-field-focus-bg,var(--rentalo-input-bg,#fff)); box-shadow:none; } .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-field:focus-within > .rentalo-ui-control, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-field:focus-within .rentalo-ui-picker-toggle, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-field:focus-within .rentalo-ui-step2-picker-toggle, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-input[type="number"]:focus, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-input[type="number"]:focus-visible, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-picker-toggle:focus, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-picker-toggle:focus-visible, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-picker-toggle[aria-expanded="true"], .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step2-picker-toggle:focus, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step2-picker-toggle:focus-visible, .rentalo-module-design-scope.rentalo-field-style-line .rentalo-ui-step2-picker-toggle[aria-expanded="true"]{ border-top-color:transparent; border-right-color:transparent; border-left-color:transparent; border-bottom:2px solid var(--rentalo-field-focus-border,var(--rentalo-primary,#006699)); box-shadow:none; } .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-field:focus-within > .rentalo-ui-control, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-field:focus-within .rentalo-ui-picker-toggle, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-field:focus-within .rentalo-ui-step2-picker-toggle, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-input[type="number"]:focus, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-input[type="number"]:focus-visible, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-picker-toggle:focus, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-picker-toggle:focus-visible, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-picker-toggle[aria-expanded="true"], .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step2-picker-toggle:focus, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step2-picker-toggle:focus-visible, .rentalo-module-design-scope.rentalo-field-style-box .rentalo-ui-step2-picker-toggle[aria-expanded="true"]{ border-style:solid; border-width:1px; border-color:var(--rentalo-field-focus-border,var(--rentalo-primary,#006699)); box-shadow:none; } /* 2.15.423 - Exact active borders and no focus border on Step 4 section containers. */ .rentalo-ui-step1-module.rentalo-field-style-box .rentalo-form-field--date:focus-within, .rentalo-ui-step1-module.rentalo-field-style-box .rentalo-form-field--time:focus-within{ outline:0; border-color:transparent; background:transparent; box-shadow:none; } .rentalo-ui-step1-module.rentalo-field-style-box .rentalo-form-field--date .rentalo-ui-picker-toggle:focus, .rentalo-ui-step1-module.rentalo-field-style-box .rentalo-form-field--date .rentalo-ui-picker-toggle:focus-visible, .rentalo-ui-step1-module.rentalo-field-style-box .rentalo-form-field--date .rentalo-ui-picker-toggle[aria-expanded="true"], .rentalo-ui-step1-module.rentalo-field-style-box .rentalo-form-field--time .rentalo-ui-picker-toggle:focus, .rentalo-ui-step1-module.rentalo-field-style-box .rentalo-form-field--time .rentalo-ui-picker-toggle:focus-visible, .rentalo-ui-step1-module.rentalo-field-style-box .rentalo-form-field--time .rentalo-ui-picker-toggle[aria-expanded="true"]{ outline:0; border:1px solid var(--rentalo-field-focus-border,var(--rentalo-primary,#006699)); box-shadow:none; } .rentalo-ui-step4-shell .rentalo-step4-conditional-section:focus-within, .rentalo-ui-step4-shell .rentalo-step4-billing-section:focus-within, .rentalo-ui-step4-shell .rentalo-step4-drivers-section:focus-within, .rentalo-ui-step4-shell .rentalo-step4-driver-card:focus-within{ outline:0; border-color:var(--rentalo-border,#d6e0ec); box-shadow:none; } /* 2.15.424 - Unified field geometry and select arrows disabled. */ .rentalo-module-design-scope .rentalo-custom-select__button::after{content:none;display:none;} .rentalo-module-design-scope select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;padding-right:12px;} .rentalo-module-design-scope .rentalo-custom-select__button{padding-right:12px;} /* 2.15.425 - One shared field geometry for every booking step and shortcode. */ .rentalo-module-design-scope .rentalo-ui-field:focus-within, .rentalo-module-design-scope .rentalo-frontend-field:focus-within{ outline:0; box-shadow:none; } /* Line mode: every real input control uses exactly one 1px baseline. */ .rentalo-module-design-scope.rentalo-field-style-line :is( .rentalo-ui-control, .rentalo-custom-select__button, .rentalo-form-input, .rentalo-form-control, .rentalo-form-select, .rentalo-form-textarea, .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .rentalo-frontend-field select, .rentalo-frontend-field textarea, .rentalo-step4-driver-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .rentalo-step4-driver-card select, .rentalo-step4-driver-card textarea ){ border:0; border-bottom:1px solid var(--rentalo-border,#d6e0ec); border-radius:0; outline:0; box-shadow:none; } .rentalo-module-design-scope.rentalo-field-style-line :is( .rentalo-ui-control:focus, .rentalo-ui-control:focus-visible, .rentalo-ui-picker-toggle[aria-expanded="true"], .rentalo-ui-step2-picker-toggle[aria-expanded="true"], .rentalo-custom-select.is-open .rentalo-custom-select__button, .rentalo-custom-select__button:focus, .rentalo-custom-select__button:focus-visible, .rentalo-form-input:focus, .rentalo-form-input:focus-visible, .rentalo-form-control:focus, .rentalo-form-control:focus-visible, .rentalo-form-select:focus, .rentalo-form-select:focus-visible, .rentalo-form-textarea:focus, .rentalo-form-textarea:focus-visible, .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus, .rentalo-frontend-field select:focus, .rentalo-frontend-field textarea:focus, .rentalo-step4-driver-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus, .rentalo-step4-driver-card select:focus, .rentalo-step4-driver-card textarea:focus ){ border:0; border-bottom:2px solid var(--rentalo-field-focus-border,var(--rentalo-primary,#006699)); border-radius:0; outline:0; box-shadow:none; background-color:var(--rentalo-field-focus-bg,var(--rentalo-input-bg,#fff)); } /* Box mode: every real input control uses the same 1px frame. */ .rentalo-module-design-scope.rentalo-field-style-box :is( .rentalo-ui-control, .rentalo-custom-select__button, .rentalo-form-input, .rentalo-form-control, .rentalo-form-select, .rentalo-form-textarea, .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .rentalo-frontend-field select, .rentalo-frontend-field textarea, .rentalo-step4-driver-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .rentalo-step4-driver-card select, .rentalo-step4-driver-card textarea ){ border:1px solid var(--rentalo-border,#d6e0ec); border-radius:var(--rentalo-input-radius,10px); outline:0; box-shadow:none; } .rentalo-module-design-scope.rentalo-field-style-box :is( .rentalo-ui-control:focus, .rentalo-ui-control:focus-visible, .rentalo-ui-picker-toggle[aria-expanded="true"], .rentalo-ui-step2-picker-toggle[aria-expanded="true"], .rentalo-custom-select.is-open .rentalo-custom-select__button, .rentalo-custom-select__button:focus, .rentalo-custom-select__button:focus-visible, .rentalo-form-input:focus, .rentalo-form-input:focus-visible, .rentalo-form-control:focus, .rentalo-form-control:focus-visible, .rentalo-form-select:focus, .rentalo-form-select:focus-visible, .rentalo-form-textarea:focus, .rentalo-form-textarea:focus-visible, .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus, .rentalo-frontend-field select:focus, .rentalo-frontend-field textarea:focus, .rentalo-step4-driver-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus, .rentalo-step4-driver-card select:focus, .rentalo-step4-driver-card textarea:focus ){ border:1px solid var(--rentalo-field-focus-border,var(--rentalo-primary,#006699)); outline:0; box-shadow:none; background-color:var(--rentalo-field-focus-bg,var(--rentalo-input-bg,#fff)); } /* Section containers are structural cards, never input controls. */ .rentalo-ui-step4-shell :is( .rentalo-step4-conditional-section, .rentalo-step4-billing-section, .rentalo-step4-drivers-section, .rentalo-step4-driver-card ):focus-within{ outline:0; box-shadow:none; border-color:var(--rentalo-border,#d6e0ec); } /* 2.15.427 - Stable field geometry: focus must not move select/input text. */ .rentalo-module-design-scope :is( .rentalo-ui-control, .rentalo-custom-select__button, .rentalo-form-input, .rentalo-form-control, .rentalo-form-select, .rentalo-form-textarea, .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .rentalo-frontend-field select, .rentalo-frontend-field textarea, .rentalo-step4-driver-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .rentalo-step4-driver-card select, .rentalo-step4-driver-card textarea ){ box-sizing:border-box; } /* Reserve the full 2px baseline at all times. The normal state draws only a 1px inset line, so focus can switch to 2px without changing field height. */ .rentalo-module-design-scope.rentalo-field-style-line :is( .rentalo-ui-control, .rentalo-custom-select__button, .rentalo-form-input, .rentalo-form-control, .rentalo-form-select, .rentalo-form-textarea, .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .rentalo-frontend-field select, .rentalo-frontend-field textarea, .rentalo-step4-driver-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .rentalo-step4-driver-card select, .rentalo-step4-driver-card textarea ){ border-bottom:2px solid transparent; box-shadow:inset 0 -1px 0 var(--rentalo-border,#d6e0ec); } .rentalo-module-design-scope.rentalo-field-style-line :is( .rentalo-ui-control:focus, .rentalo-ui-control:focus-visible, .rentalo-ui-picker-toggle[aria-expanded="true"], .rentalo-ui-step2-picker-toggle[aria-expanded="true"], .rentalo-custom-select.is-open .rentalo-custom-select__button, .rentalo-custom-select__button:focus, .rentalo-custom-select__button:focus-visible, .rentalo-form-input:focus, .rentalo-form-input:focus-visible, .rentalo-form-control:focus, .rentalo-form-control:focus-visible, .rentalo-form-select:focus, .rentalo-form-select:focus-visible, .rentalo-form-textarea:focus, .rentalo-form-textarea:focus-visible, .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus, .rentalo-frontend-field select:focus, .rentalo-frontend-field textarea:focus, .rentalo-step4-driver-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus, .rentalo-step4-driver-card select:focus, .rentalo-step4-driver-card textarea:focus ){ border-bottom:2px solid var(--rentalo-field-focus-border,var(--rentalo-primary,#006699)); box-shadow:none; } /* 2.15.490 - Results-Compact übernimmt ohne Sonderraster exakt das vier-spaltige Layout von [rentalo_booking_compact]. */ /* 2.15.526 - Removed the weaker duplicate 2.15.491 Compact/Inline geometry block. * Special Compact states remain in the canonical high-specificity block below. */ /* 2.15.492 - Canonical shared desktop geometry for Compact/Inline shortcode pairs. * This selector intentionally outranks the general Step-1/Step-2 grid rules while * keeping one shared geometry source for each layout family. */ @media (min-width:768px){ .rentalo-module-design-scope .rentalo-booking-layout-host--compact .rentalo-ui-step2-topbar, .rentalo-module-design-scope.rentalo-booking-layout-host--compact .rentalo-ui-step2-topbar, .rentalo-module-design-scope .rentalo-step1-compact-shell .rentalo-ui-step1-module{ width:100%; max-width:var(--rentalo-form-max-width,820px); margin-left:auto; margin-right:auto; } .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1.12fr) minmax(0,.78fr) minmax(0,1.18fr); gap:var(--rentalo-field-gap,12px); align-items:end; } .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact .rentalo-ui-locations-row{display:contents;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact .rentalo-ui-row--pickup-location{grid-column:1;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact .rentalo-ui-row--start-date{grid-column:2;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact .rentalo-ui-row--start-time{grid-column:3;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact .rentalo-ui-row--category{grid-column:4;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact .rentalo-ui-row--return-location{grid-column:1;grid-row:2;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact .rentalo-ui-row--end-date{grid-column:2;grid-row:2;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact .rentalo-ui-row--end-time{grid-column:3;grid-row:2;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact .rentalo-ui-row--planned-km{grid-column:4;grid-row:2;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact .rentalo-ui-row--opening-hours-link{grid-column:1 / 4;grid-row:3;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact .rentalo-ui-actions{grid-column:4;grid-row:3;align-self:end;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact .rentalo-ui-notices{grid-column:1 / -1;grid-row:4;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--no-km .rentalo-ui-actions, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--no-km .rentalo-ui-actions{grid-column:4;grid-row:2;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--no-km .rentalo-ui-row--opening-hours-link, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--no-km .rentalo-ui-row--opening-hours-link{grid-column:1 / -1;grid-row:3;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--same-location .rentalo-ui-row--return-location, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--same-location .rentalo-ui-row--return-location{display:none;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--same-location .rentalo-ui-row--pickup-location{grid-column:1 / 3;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--same-location .rentalo-ui-row--end-date, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--same-location .rentalo-ui-row--end-date{grid-column:1;grid-row:2;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--same-location .rentalo-ui-row--end-time, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--same-location .rentalo-ui-row--end-time{grid-column:2;grid-row:2;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--same-location .rentalo-ui-row--planned-km, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--same-location .rentalo-ui-row--planned-km{grid-column:3;grid-row:2;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--same-location .rentalo-ui-actions, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--same-location .rentalo-ui-actions{grid-column:4;grid-row:3;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--same-location .rentalo-ui-row--opening-hours-link, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--same-location .rentalo-ui-row--opening-hours-link{grid-column:1 / 4;grid-row:3;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--no-locations .rentalo-ui-row--start-date, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--no-locations .rentalo-ui-row--start-date{grid-column:1;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--no-locations .rentalo-ui-row--start-time, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--no-locations .rentalo-ui-row--start-time{grid-column:2;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--no-locations .rentalo-ui-row--category, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--no-locations .rentalo-ui-row--category{grid-column:3 / 5;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--no-locations .rentalo-ui-row--end-date, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--no-locations .rentalo-ui-row--end-date{grid-column:1;grid-row:2;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--no-locations .rentalo-ui-row--end-time, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--no-locations .rentalo-ui-row--end-time{grid-column:2;grid-row:2;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--no-locations .rentalo-ui-row--planned-km, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--no-locations .rentalo-ui-row--planned-km{grid-column:3;grid-row:2;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--no-locations .rentalo-ui-actions, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--no-locations .rentalo-ui-actions{grid-column:4;grid-row:3;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step1-layout--no-locations .rentalo-ui-row--opening-hours-link, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--compact.rentalo-ui-step2-pickers-layout--no-locations .rentalo-ui-row--opening-hours-link{grid-column:1 / 4;grid-row:3;} .rentalo-booking-layout-host--compact :is(.rentalo-ui-btn,.rentalo-ui-step2-btn){width:100%;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1.08fr) minmax(0,1.3fr) minmax(0,.58fr) minmax(0,1.3fr) minmax(0,.58fr) minmax(0,1.5fr) minmax(0,.5fr) minmax(48px,48px); gap:10px 12px; align-items:end; } .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline .rentalo-ui-locations-row{display:contents;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline .rentalo-ui-row--pickup-location{grid-column:1;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline .rentalo-ui-row--return-location{grid-column:2;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline .rentalo-ui-row--start-date{grid-column:3;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline .rentalo-ui-row--start-time{grid-column:4;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline .rentalo-ui-row--end-date{grid-column:5;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline .rentalo-ui-row--end-time{grid-column:6;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline .rentalo-ui-row--category{grid-column:7;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline .rentalo-ui-row--planned-km{grid-column:8;grid-row:1;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline .rentalo-ui-actions{grid-column:9;grid-row:1;align-self:end;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline .rentalo-ui-row--opening-hours-link{grid-column:1 / 4;grid-row:2;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline .rentalo-ui-notices{grid-column:1 / -1;grid-row:3;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline.rentalo-ui-step1-layout--same-location .rentalo-ui-row--pickup-location, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline.rentalo-ui-step2-pickers-layout--same-location .rentalo-ui-row--pickup-location{grid-column:1 / 3;} .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline.rentalo-ui-step1-layout--same-location .rentalo-ui-row--return-location, .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline.rentalo-ui-step2-pickers-layout--same-location .rentalo-ui-row--return-location{display:none;} } /* 2.15.493 - Results shortcodes render the same desktop form component as their base shortcode. */ @media (min-width:768px){ .rentalo-booking-layout-host--compact, .rentalo-booking-layout-host--inline, .rentalo-booking-layout-host--compact > .rentalo-frontend-shell, .rentalo-booking-layout-host--inline > .rentalo-frontend-shell{ width:100%; max-width:none; margin-left:auto; margin-right:auto; } .rentalo-booking-layout-host--compact .rentalo-step2-topbar, .rentalo-booking-layout-host--inline .rentalo-step2-topbar{ width:100%; max-width:none; font:inherit; } .rentalo-booking-layout-host--compact .rentalo-ui-step2-result-toolbar, .rentalo-booking-layout-host--compact .rentalo-ui-step2-list, .rentalo-booking-layout-host--inline .rentalo-ui-step2-result-toolbar, .rentalo-booking-layout-host--inline .rentalo-ui-step2-list{ width:100%; max-width:none; } .rentalo-booking-layout-host--compact .rentalo-ui-label, .rentalo-booking-layout-host--inline .rentalo-ui-label{ font-family:inherit; font-size:var(--rentalo-label-size,12px); font-weight:var(--rentalo-label-weight,600); line-height:1.25; } .rentalo-booking-layout-host--compact .rentalo-ui-control, .rentalo-booking-layout-host--inline .rentalo-ui-control{ font-family:inherit; font-weight:400; } .rentalo-booking-layout-host--compact .rentalo-ui-step2-btn, .rentalo-booking-layout-host--inline .rentalo-ui-step2-btn{ width:100%; min-width:0; } } /* 2.15.494 - Results shells without desktop side padding; shared inline width redistribution. */ @media (min-width:768px){ .rentalo-booking-layout-host--compact > .rentalo-frontend-shell, .rentalo-booking-layout-host--inline > .rentalo-frontend-shell{ padding-left:0; padding-right:0; } .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline{ grid-template-columns: minmax(0,1.08fr) minmax(0,1.08fr) minmax(0,1.3fr) minmax(0,.58fr) minmax(0,1.3fr) minmax(0,.58fr) 164px 75px 68px; } } /* 2.15.495 - Compact field spacing, number controls and desktop inline redistribution. */ .rentalo-booking-layout{ padding-bottom:0; } /* Use the available field width for values instead of browser number steppers. */ .rentalo-module-design-scope input[type="number"]{ -moz-appearance:textfield; appearance:textfield; } .rentalo-module-design-scope input[type="number"]::-webkit-inner-spin-button, .rentalo-module-design-scope input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; } /* Uniform horizontal value padding for inputs, picker toggles and custom selects. */ .rentalo-module-design-scope :is( .rentalo-ui-control, .rentalo-ui-input, .rentalo-ui-picker-toggle, .rentalo-ui-step2-picker-toggle, .rentalo-custom-select__button, .rentalo-form-input, .rentalo-form-control, .rentalo-form-select, .rentalo-frontend-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .rentalo-frontend-field select ){ padding-left:10px; padding-right:10px; } @media (min-width:768px){ /* Shared desktop geometry for both Inline shortcode pairs. */ .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline{ grid-template-columns: minmax(0,1fr) minmax(0,1fr) 140px 71px 140px 71px 144px 63px 88px; } } /* 2.15.496 - Final shared Inline redistribution: km -12px, each time -15px, each date +21px. */ /* 2.15.498 - Step2 width and configured update-button presentation. */ @media (min-width:768px){ .rentalo-module-design-scope .rentalo-step2-topbar.rentalo-ui-step2-topbar{ width:100%; max-width:none; } .rentalo-module-design-scope .rentalo-step2-topbar.rentalo-step2-update-text-desktop .rentalo-ui-step2-pickers-layout{ grid-template-columns:minmax(120px,1.05fr) minmax(120px,1.05fr) minmax(125px,.9fr) minmax(68px,.48fr) minmax(125px,.9fr) minmax(68px,.48fr) minmax(115px,.82fr) minmax(64px,.45fr) minmax(110px,.72fr); } .rentalo-module-design-scope .rentalo-step2-topbar.rentalo-step2-update-text-desktop .rentalo-ui-step2-btn{ width:100%; min-width:110px; padding-left:14px; padding-right:14px; font-size:var(--rentalo-button-font-size,15px); } .rentalo-module-design-scope .rentalo-step2-topbar.rentalo-step2-update-text-desktop .rentalo-ui-step2-btn .rentalo-ui-step2-btn-text{ display:inline; } .rentalo-module-design-scope .rentalo-step2-topbar.rentalo-step2-update-text-desktop .rentalo-ui-step2-btn .rentalo-ui-step2-btn-icon{ display:none; } } /* 2.15.499 - Step 2 action fills its assigned grid column. */ .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-actions, .rentalo-module-design-scope .rentalo-step2-topbar .rentalo-ui-step2-btn{ width:100%; } /* 2.15.504 - Mobile Mietobjektliste Design 1: verbindliches AVK-Kartenlayout. */ @media (max-width:767px){ .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-item-card{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,13fr); grid-template-rows:auto auto auto; column-gap:12px; row-gap:0; align-items:start; width:100%; padding:10px; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media{ grid-column:1; grid-row:1; width:100%; min-width:0; margin:0; align-self:start; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media .rentalo-ui-step2-image-button, .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media .rentalo-vehicle-image-button, .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media .rentalo-group-image-placeholder, .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-media img{ display:block; width:100%; height:auto; min-height:92px; max-height:none; aspect-ratio:4 / 3; margin:0; object-fit:cover; border-radius:10px; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-content{ display:block; grid-column:2; grid-row:1; min-width:0; margin:0; align-self:start; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-object-info-block{ display:block; min-width:0; margin:0; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-object-info-block > *{ margin-top:0; margin-bottom:4px; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-feature-list{ grid-column:1 / -1; grid-row:2; width:100%; margin:10px 0 0; padding:10px 0 0; border-top:1px solid var(--rentalo-border,#d6e0ec); border-bottom:0; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-feature-list.is-empty{ display:none; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-side{ grid-column:1 / -1; grid-row:3; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-width:0; margin:10px 0 0; padding:10px 0 0; border-top:1px solid var(--rentalo-border,#d6e0ec); } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-price{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; margin:0; text-align:left; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-side form{ justify-self:end; width:auto; margin:0; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-side .rentalo-submit-button{ width:auto; min-width:0; margin:0; white-space:nowrap; } } /* 2.15.505 - Mobile Design 1: Tarif- und Infotext vollbreit; Merkmale robust sichtbar. */ @media (max-width:767px){ .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-item-card{ grid-template-rows:auto auto auto auto auto; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-content, .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-object-info-block--split-listing{ display:contents; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-object-primary-info{ grid-column:2; grid-row:1; min-width:0; align-self:start; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-object-primary-info > *{ margin-top:0; margin-bottom:4px; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-object-tariff-hint{ grid-column:1 / -1; grid-row:2; width:100%; margin:8px 0 0; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-object-info{ grid-column:1 / -1; grid-row:3; width:100%; margin:4px 0 0; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-object-description{ grid-column:1 / -1; grid-row:4; width:100%; margin:4px 0 0; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-object-tariff-hint.is-empty, .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-object-info.is-empty, .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-object-description.is-empty{ display:none; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-feature-list{ grid-row:5; } .rentalo-module-design-scope.rentalo-ui-step2.rentalo-ui-step2--mobile-list-compact .rentalo-ui-step2-side{ grid-row:6; } } /* Merkmals-Icons auf Desktop und Mobile eindeutig rendern. */ .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-feature-list:not(.is-empty){ display:grid; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-feature:not(.is-placeholder){ display:flex; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-feature svg{ display:block; flex:0 0 auto; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-feature svg circle, .rentalo-module-design-scope.rentalo-ui-step2 .rentalo-ui-step2-feature svg rect{ fill:none; } /* 2.15.514 - Shared inline duration alignment, compact-results text action, shell gap and active dropdown text color. */ .rentalo-module-design-scope .rentalo-frontend-shell{ gap:5px; } @media (min-width:768px){ /* Both Inline shortcode forms use the complete second row. */ .rentalo-module-design-scope :is(.rentalo-ui-step1-layout,.rentalo-ui-step2-pickers-layout).rentalo-booking-layout--inline .rentalo-ui-row--opening-hours-link{ grid-column:1 / -1; grid-row:2; width:100%; } .rentalo-booking-layout-host--inline .rentalo-ui-opening-hours-bar, .rentalo-step1-inline-shell .rentalo-ui-opening-hours-bar{ display:grid; grid-template-columns:minmax(0,1fr) max-content; align-items:center; width:100%; } .rentalo-booking-layout-host--inline .rentalo-ui-opening-hours-link, .rentalo-step1-inline-shell .rentalo-ui-opening-hours-link{ justify-self:start; } .rentalo-booking-layout-host--inline .rentalo-ui-rental-duration, .rentalo-step1-inline-shell .rentalo-ui-rental-duration{ justify-self:end; text-align:right; margin-left:auto; } /* Results Compact always uses the stored Step-2 text instead of the refresh icon. */ .rentalo-shortcode-results-compact .rentalo-step2-topbar .rentalo-ui-step2-btn{ min-width:0; width:100%; padding-left:12px; padding-right:12px; } .rentalo-shortcode-results-compact .rentalo-step2-topbar .rentalo-ui-step2-btn .rentalo-ui-step2-btn-text{ display:inline; } .rentalo-shortcode-results-compact .rentalo-step2-topbar .rentalo-ui-step2-btn .rentalo-ui-step2-btn-icon{ display:none; } } /* 2.15.515 - Dropdown state colors use dedicated variables; obsolete duplicate overrides removed. */