/* * WP Rentalo Lite - Step 1 * * Zentrale Step-1-Struktur für Hero-, Inline-, Compact- und Direktshortcodes. * Gemeinsame Feld-, Button- und Card-Optik wird nicht hier dupliziert. */ .rentalo-ui-step1-module{ width:100%; max-width:100%; min-width:0; margin:20px 0 0; padding:16px; border:1px solid #d6e0ec; border-radius:16px; background:#fff; box-sizing:border-box; box-shadow:0 14px 34px rgba(20,43,74,.10); } .rentalo-ui-step1-module .rentalo-ui-row{ min-width:0; margin:0; box-sizing:border-box; } .rentalo-ui-step1-module .rentalo-ui-locations-row{ min-width:0; box-sizing:border-box; } .rentalo-ui-step1-module .rentalo-ui-time-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:220px;overflow:auto;} /* 2.15.205 - Einheitliche Uhrzeit-Optionsfarben wie Custom-Selects. */ /* Step1 Desktop/Layout - Feldoptik kommt aus common-fields */ .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-module{ max-width:490px; } .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-layout-real{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:10px 12px; align-items:end; } .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-locations-row{ grid-column:1 / -1; grid-row:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; } .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--same-location .rentalo-ui-locations-row, .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--no-locations .rentalo-ui-locations-row{ grid-template-columns:minmax(0,1fr); } .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--start-date{grid-column:1;grid-row:2;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--start-time{grid-column:2;grid-row:2;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--category{grid-column:3;grid-row:2;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--end-date{grid-column:1;grid-row:3;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--end-time{grid-column:2;grid-row:3;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--planned-km{grid-column:3;grid-row:3;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--opening-hours-link{grid-column:1;grid-row:4;align-self:center;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-actions{grid-column:3;grid-row:4;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-notices{grid-column:1 / -1;grid-row:5;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--no-km .rentalo-ui-actions{grid-column:3;grid-row:3;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--no-km .rentalo-ui-row--opening-hours-link{grid-column:1 / 3;grid-row:4;} .rentalo-ui-step1-module .rentalo-ui-opening-hours-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;min-width:0;} .rentalo-ui-step1-module .rentalo-ui-opening-hours-link{height:auto;min-height:0;padding:0;border:0;background:transparent;color:var(--rentalo-primary,#006699);font-size:13px;font-weight:700;line-height:1.2;text-decoration:underline;box-shadow:none;white-space:nowrap;} .rentalo-ui-step1-module .rentalo-ui-btn{width:100%;height:40px;min-height:40px;display:flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:var(--rentalo-button-bg,#c20000);color:#fff;font-size:16px;font-weight:700;line-height:1;cursor:pointer;} .rentalo-ui-step1-module .rentalo-ui-notices:empty{display:none;} .rentalo-ui-step1-module .rentalo-ui-notices{font-size:13px;line-height:1.35;} .rentalo-step1-inline-shell .rentalo-layout-real{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)) auto; gap:10px 12px; align-items:end; } .rentalo-step1-inline-shell .rentalo-ui-locations-row{display:contents;} .rentalo-step1-inline-shell .rentalo-ui-row--pickup-location{grid-column:1;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-row--return-location{grid-column:2;grid-row:1;} /* Gleiche Filiale: Das verbleibende Standortfeld nutzt auch die freie Rückgabe-Spalte. */ .rentalo-step1-inline-shell .rentalo-ui-step1-layout--same-location .rentalo-ui-row--pickup-location{grid-column:1 / 3;} .rentalo-step1-inline-shell .rentalo-ui-step1-layout--same-location .rentalo-ui-row--return-location{display:none;} .rentalo-step1-inline-shell .rentalo-ui-row--start-date{grid-column:3;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-row--start-time{grid-column:4;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-row--end-date{grid-column:5;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-row--end-time{grid-column:6;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-row--category{grid-column:7;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-row--planned-km{grid-column:8;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-actions{grid-column:9;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-row--opening-hours-link{grid-column:1 / 4;grid-row:2;} .rentalo-step1-inline-shell .rentalo-ui-notices{grid-column:1 / -1;grid-row:3;} /* 2.14.13 - Mietobjekt-Direktformular: Kategorie-/Objektauswahl entfällt, Layout rückt sauber nach. */ .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--object-direct .rentalo-ui-row--start-date{grid-column:1;grid-row:2;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--object-direct .rentalo-ui-row--start-time{grid-column:2;grid-row:2;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--object-direct .rentalo-ui-row--planned-km{grid-column:3;grid-row:2;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--object-direct .rentalo-ui-row--end-date{grid-column:1;grid-row:3;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--object-direct .rentalo-ui-row--end-time{grid-column:2;grid-row:3;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--object-direct .rentalo-ui-actions{grid-column:3;grid-row:3;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--object-direct .rentalo-ui-row--opening-hours-link{grid-column:1 / 3;grid-row:4;} .rentalo-step1-inline-shell .rentalo-ui-step1-layout--object-direct{grid-template-columns:repeat(7,minmax(0,1fr)) auto;} .rentalo-step1-inline-shell .rentalo-ui-step1-layout--object-direct .rentalo-ui-row--pickup-location{grid-column:1;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-step1-layout--object-direct .rentalo-ui-row--return-location{grid-column:2;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-step1-layout--object-direct .rentalo-ui-row--start-date{grid-column:3;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-step1-layout--object-direct .rentalo-ui-row--start-time{grid-column:4;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-step1-layout--object-direct .rentalo-ui-row--end-date{grid-column:5;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-step1-layout--object-direct .rentalo-ui-row--end-time{grid-column:6;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-step1-layout--object-direct .rentalo-ui-row--planned-km{grid-column:7;grid-row:1;} .rentalo-step1-inline-shell .rentalo-ui-step1-layout--object-direct .rentalo-ui-actions{grid-column:8;grid-row:1;} /* 2.14.23 - Mietdauer im Hero rechtsbündig am Zeilenende ausrichten. */ .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--opening-hours-link{ grid-column:1 / 3; } .rentalo-ui-step1-module .rentalo-ui-opening-hours-bar{ grid-template-columns:minmax(0,1fr) max-content; } .rentalo-ui-step1-module .rentalo-ui-rental-duration{ justify-self:end; text-align:right; } /* 2.14.35 - Design-Tab: Feldabstände und Formularbreite aus zentralen Variablen. */ .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-module{ max-width:min(490px,var(--rentalo-form-max-width,1240px)); } .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-layout-real, .rentalo-step1-inline-shell .rentalo-layout-real{ gap:var(--rentalo-field-gap,12px); } .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-locations-row, .rentalo-ui-step1-module .rentalo-ui-opening-hours-bar{ gap:var(--rentalo-field-gap,12px); } .rentalo-ui-step1-module .rentalo-ui-btn{ height:var(--rentalo-field-height,40px); min-height:var(--rentalo-field-height,40px); border-radius:var(--rentalo-button-radius,var(--rentalo-radius-sm,10px)); background:var(--rentalo-button-bg,#c20000); color:var(--rentalo-button-text,#fff); font-size:var(--rentalo-button-font-size,16px); font-weight:var(--rentalo-button-weight,700); } .rentalo-ui-step1-module .rentalo-ui-btn:hover, .rentalo-ui-step1-module .rentalo-ui-btn:focus{ background:var(--rentalo-button-hover,#9e0000); color:var(--rentalo-button-hover-text,#fff); } /* 2.14.56 - Step1: Datumsfelder breiter, Uhrzeitfelder schmaler; mobile Öffnungszeiten als heller Button. */ @media (min-width:768px){ .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-layout-real{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr) minmax(0,1fr); } .rentalo-step1-inline-shell .rentalo-layout-real{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.08fr) minmax(0,.92fr) minmax(0,1.08fr) minmax(0,.92fr) minmax(0,1fr) minmax(0,1fr) auto; } .rentalo-step1-inline-shell .rentalo-ui-step1-layout--object-direct{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.08fr) minmax(0,.92fr) minmax(0,1.08fr) minmax(0,.92fr) minmax(0,1fr) auto; } } @media (max-width:767px){ .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-layout-real, .rentalo-step1-inline-shell .rentalo-layout-real{ grid-template-columns:minmax(0,calc((100% - var(--rentalo-field-gap,10px))/2 + 20px)) minmax(0,calc((100% - var(--rentalo-field-gap,10px))/2 - 20px)); } .rentalo-ui-step1-module .rentalo-ui-rental-duration{ justify-self:end; text-align:right; width:100%; } .rentalo-ui-step1-module .rentalo-ui-opening-hours-link{ min-height:36px; padding:0 12px; border:1px solid var(--rentalo-border,#d6e0ec); border-radius:10px; background:#f8fbff; color:var(--rentalo-primary,#006699); text-decoration:none; box-shadow:0 1px 0 rgba(20,45,73,.03); } } /* 2.14.97 - Eigener Shortcode [rentalo_booking_compact] als kompakte Box-Variante. */ .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-module{ max-width:820px; margin-left:auto; margin-right:auto; } /* 2.15.42 - [rentalo_booking_compact] Desktop: Standorte neben Datum, Button ersetzt deaktiviertes km-Feld. */ @media (min-width:768px){ .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-module{ max-width:var(--rentalo-form-max-width,820px); } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode{ 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-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode .rentalo-ui-locations-row{ display:contents; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode .rentalo-ui-row--pickup-location{ grid-column:1; grid-row:1; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode .rentalo-ui-row--start-date{ grid-column:2; grid-row:1; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode .rentalo-ui-row--start-time{ grid-column:3; grid-row:1; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode .rentalo-ui-row--category{ grid-column:4; grid-row:1; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode .rentalo-ui-row--return-location{ grid-column:1; grid-row:2; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode .rentalo-ui-row--end-date{ grid-column:2; grid-row:2; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode .rentalo-ui-row--end-time{ grid-column:3; grid-row:2; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode .rentalo-ui-row--planned-km{ grid-column:4; grid-row:2; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode .rentalo-ui-row--opening-hours-link{ grid-column:1 / 4; grid-row:3; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode .rentalo-ui-actions{ grid-column:4; grid-row:3; align-self:end; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode .rentalo-ui-notices{ grid-column:1 / -1; grid-row:4; } /* Kilometerlogik deaktiviert: Button nutzt das freie km-Feld in Zeile 2. */ .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--no-km .rentalo-ui-actions{ grid-column:4; grid-row:2; align-self:end; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--no-km .rentalo-ui-row--opening-hours-link{ grid-column:1 / -1; grid-row:3; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--no-km .rentalo-ui-notices{ grid-row:4; } /* Gleiche Filiale: ein Standortfeld oben links, Zeile 2 beginnt mit Rückgabe. */ .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--same-location .rentalo-ui-row--pickup-location{ grid-column:1; grid-row:1; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--same-location .rentalo-ui-row--return-location{ display:none; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--same-location .rentalo-ui-row--end-date{ grid-column:1; grid-row:2; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--same-location .rentalo-ui-row--end-time{ grid-column:2; grid-row:2; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--same-location .rentalo-ui-row--planned-km{ grid-column:3; grid-row:2; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--same-location .rentalo-ui-actions{ grid-column:4; grid-row:2; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--same-location:not(.rentalo-ui-step1-layout--no-km) .rentalo-ui-actions{ grid-column:4; grid-row:3; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--same-location .rentalo-ui-row--opening-hours-link{ grid-column:1 / 4; grid-row:3; } /* Standortauswahl deaktiviert: Felder rücken ohne leere Standortspalte nach. */ .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--no-locations .rentalo-ui-row--start-date{ grid-column:1; grid-row:1; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--no-locations .rentalo-ui-row--start-time{ grid-column:2; grid-row:1; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--no-locations .rentalo-ui-row--category{ grid-column:3 / 5; grid-row:1; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--no-locations .rentalo-ui-row--end-date{ grid-column:1; grid-row:2; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--no-locations .rentalo-ui-row--end-time{ grid-column:2; grid-row:2; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--no-locations .rentalo-ui-row--planned-km{ grid-column:3; grid-row:2; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--no-locations .rentalo-ui-actions{ grid-column:4; grid-row:2; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--no-locations:not(.rentalo-ui-step1-layout--no-km) .rentalo-ui-actions{ grid-column:4; grid-row:3; } .rentalo-step1-compact-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--compact-shortcode.rentalo-ui-step1-layout--no-locations .rentalo-ui-row--opening-hours-link{ grid-column:1 / 4; grid-row:3; } } /* 2.15.55 - Desktop: Öffnungszeiten links, Mietdauer rechts halten. */ @media (min-width:768px){ .rentalo-ui-step1-module .rentalo-ui-opening-hours-bar{ display:grid; grid-template-columns:minmax(0,1fr) max-content; align-items:center; width:100%; } .rentalo-ui-step1-module .rentalo-ui-opening-hours-link{justify-self:start;} .rentalo-ui-step1-module .rentalo-ui-rental-duration{justify-self:end;text-align:right;} } /* 2.15.56 - Step1 Submit-Loading mittig halten. */ .rentalo-ui-step1-shell .rentalo-ui-btn.is-loading{ display:inline-flex; align-items:center; justify-content:center; text-align:center; } .rentalo-ui-step1-shell .rentalo-button-loading-inner{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; line-height:1; font-weight:inherit; } /* 2.15.59 - Inline-Shortcode: Öffnungszeiten links und Mietdauer rechts über die ganze Zeile ausrichten. */ @media (min-width:768px){ .rentalo-step1-inline-shell .rentalo-ui-row--opening-hours-link{ grid-column:1 / -1; grid-row:2; } .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-step1-inline-shell .rentalo-ui-opening-hours-link{ justify-self:start; } .rentalo-step1-inline-shell .rentalo-ui-rental-duration{ justify-self:end; text-align:right; } } /* 2.15.152 - Step1 nutzt zentrale Frontend-Breite. */ .rentalo-frontend-wrap > .rentalo-ui-step1-shell{ width:100%; max-width:var(--rentalo-frontend-max-width,1180px); margin-left:auto; margin-right:auto; padding-left:var(--rentalo-frontend-padding-desktop,24px); padding-right:var(--rentalo-frontend-padding-desktop,24px); box-sizing:border-box; } @media (max-width:1024px){ .rentalo-frontend-wrap > .rentalo-ui-step1-shell{ padding-left:var(--rentalo-frontend-padding-tablet,20px); padding-right:var(--rentalo-frontend-padding-tablet,20px); } } @media (max-width:767px){ .rentalo-frontend-wrap > .rentalo-ui-step1-shell{ padding-left:var(--rentalo-frontend-padding-mobile,16px); padding-right:var(--rentalo-frontend-padding-mobile,16px); } } /* 2.15.487 - Desktop-only shortcode field width redistribution. */ @media (min-width:768px){ /* Hero: time column 60px narrower; the released space is shared by date and category/km. */ .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell):not(.rentalo-step1-compact-shell) .rentalo-layout-real{ grid-template-columns:minmax(0,1.28fr) minmax(0,.52fr) minmax(0,1.2fr); } /* Inline: category/date wider, usage/time narrower. */ .rentalo-step1-inline-shell .rentalo-layout-real{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.28fr) minmax(0,.72fr) minmax(0,1.28fr) minmax(0,.72fr) minmax(0,1.2fr) minmax(0,.8fr) auto; } .rentalo-step1-inline-shell .rentalo-ui-step1-layout--object-direct{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.28fr) minmax(0,.72fr) minmax(0,1.28fr) minmax(0,.72fr) minmax(0,.8fr) auto; } } /* Step1 Mobile/Layout - Feldoptik kommt aus common-fields */ @media (max-width:767px){ .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-module, .rentalo-step1-inline-shell .rentalo-ui-step1-module{ max-width:360px; width:calc(100% - 28px); margin:20px auto 0; padding:12px; border-radius:16px; } .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-layout-real, .rentalo-step1-inline-shell .rentalo-layout-real{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 10px; align-items:end; } .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-locations-row, .rentalo-step1-inline-shell .rentalo-ui-locations-row{ grid-column:1 / -1; grid-row:1; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; } .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--start-date, .rentalo-step1-inline-shell .rentalo-ui-row--start-date{grid-column:1;grid-row:2;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--start-time, .rentalo-step1-inline-shell .rentalo-ui-row--start-time{grid-column:2;grid-row:2;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--end-date, .rentalo-step1-inline-shell .rentalo-ui-row--end-date{grid-column:1;grid-row:3;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--end-time, .rentalo-step1-inline-shell .rentalo-ui-row--end-time{grid-column:2;grid-row:3;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--category, .rentalo-step1-inline-shell .rentalo-ui-row--category{grid-column:1;grid-row:4;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--planned-km, .rentalo-step1-inline-shell .rentalo-ui-row--planned-km{grid-column:2;grid-row:4;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-row--opening-hours-link, .rentalo-step1-inline-shell .rentalo-ui-row--opening-hours-link{grid-column:1 / -1;grid-row:6;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-actions, .rentalo-step1-inline-shell .rentalo-ui-actions{grid-column:1 / -1;grid-row:8;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-notices, .rentalo-step1-inline-shell .rentalo-ui-notices{grid-column:1 / -1;grid-row:7;} .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-ui-step1-layout--no-km .rentalo-ui-row--category, .rentalo-step1-inline-shell .rentalo-ui-step1-layout--no-km .rentalo-ui-row--category{grid-column:1 / -1;} .rentalo-ui-step1-module .rentalo-ui-opening-hours-bar{display:grid;grid-template-columns:1fr;gap:10px;} .rentalo-ui-step1-module .rentalo-ui-rental-duration{grid-row:1;text-align:left;} .rentalo-ui-step1-module .rentalo-ui-opening-hours-link{width:100%;height:36px;border:1px solid #d6e0ec;border-radius:10px;background:#f8fbff;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center;} .rentalo-ui-step1-module .rentalo-ui-btn{width:100%;} } /* 2.14.35 - Design-Tab: mobile Step1-Abstände aus zentraler Variable. */ @media (max-width:767px){ .rentalo-ui-step1-shell:not(.rentalo-step1-inline-shell) .rentalo-layout-real, .rentalo-ui-step1-module .rentalo-ui-opening-hours-bar{ gap:var(--rentalo-field-gap,10px); } } /* 2.14.57 - Step1 mobile: Datum +20px, Uhrzeit -20px. */ @media (max-width:767px){ } /* 2.16.93 - Inline und Compact bleiben klar getrennt. */ .rentalo-step1-inline-shell{ max-width:100%; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; } /* Inline bleibt eine horizontale Ein-Zeilen-Variante. */ .rentalo-step1-inline-shell .rentalo-ui-step1-module{ width:max-content; min-width:980px; max-width:none; } .rentalo-step1-inline-shell .rentalo-layout-real{ min-width:980px; max-width:none; } /* Compact entspricht optisch und geometrisch dem Formular von [rentalo_booking_results_compact], jedoch ohne Step-Navigation und Ergebnisliste. In zu schmalen Parent-Containern bleibt das Layout erhalten und wird horizontal scrollbar. */ .rentalo-step1-compact-shell{ width:100%; max-width:100%; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; } .rentalo-step1-compact-shell .rentalo-ui-step1-module{ width:100%; min-width:820px; max-width:var(--rentalo-form-max-width,820px); margin-left:auto; margin-right:auto; } .rentalo-step1-compact-shell .rentalo-ui-step1-layout--compact-shortcode{ min-width:0; } @media (max-width:767px){ .rentalo-step1-compact-shell{ overflow-x:visible; } .rentalo-step1-compact-shell .rentalo-ui-step1-module{ min-width:0; max-width:360px; } } /* 2.16.94 - Compact shortcode: restore the visible results-compact form geometry. * The outer shell must not become a narrow scroll viewport. It may overflow a * narrow editor/theme column so the full compact form remains visible. */ @media (min-width:768px){ .rentalo-module-design-scope.rentalo-shortcode-compact.rentalo-step1-compact-shell{ width:min(var(--rentalo-form-max-width,820px),calc(100vw - 32px)); min-width:min(var(--rentalo-form-max-width,820px),calc(100vw - 32px)); max-width:none; overflow:visible; box-sizing:border-box; } .rentalo-module-design-scope.rentalo-shortcode-compact.rentalo-step1-compact-shell .rentalo-ui-step1-module{ width:100%; min-width:0; max-width:none; margin:0; box-sizing:border-box; } .rentalo-module-design-scope.rentalo-shortcode-compact.rentalo-step1-compact-shell .rentalo-ui-step1-layout--compact-shortcode{ width:100%; min-width:0; max-width:none; 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; } } /* 2.16.95 - Isolate every standalone booking shortcode from surrounding * WordPress/theme layout contexts.
elements are visual separators only. */ .rentalo-shortcode-root{ display:flow-root; clear:both; float:none; position:relative; box-sizing:border-box; isolation:isolate; } .rentalo-shortcode-root::after{ content:""; display:table; clear:both; } .rentalo-shortcode-root--step1, .rentalo-shortcode-root--results{ margin-inline:auto; } /* 2.16.97 - Align standalone inline and both direct-results shortcodes with * the available desktop width used by the compact shortcode. Layout families * remain distinct; only their outer usable width is synchronized. */ @media (min-width:768px){ .rentalo-module-design-scope.rentalo-shortcode-inline.rentalo-step1-inline-shell, .rentalo-module-design-scope.rentalo-booking-layout-host--inline, .rentalo-module-design-scope.rentalo-booking-layout-host--compact{ width:min(var(--rentalo-form-max-width,1180px),calc(100vw - 32px)); max-width:min(var(--rentalo-form-max-width,1180px),calc(100vw - 32px)); margin-left:auto; margin-right:auto; box-sizing:border-box; } .rentalo-module-design-scope.rentalo-shortcode-inline.rentalo-step1-inline-shell .rentalo-ui-step1-module, .rentalo-module-design-scope.rentalo-shortcode-inline.rentalo-step1-inline-shell .rentalo-layout-real, .rentalo-module-design-scope.rentalo-booking-layout-host--inline > .rentalo-frontend-shell, .rentalo-module-design-scope.rentalo-booking-layout-host--compact > .rentalo-frontend-shell, .rentalo-module-design-scope.rentalo-booking-layout-host--inline .rentalo-step2-topbar, .rentalo-module-design-scope.rentalo-booking-layout-host--compact .rentalo-step2-topbar, .rentalo-module-design-scope.rentalo-booking-layout-host--inline .rentalo-ui-step2-result-toolbar, .rentalo-module-design-scope.rentalo-booking-layout-host--compact .rentalo-ui-step2-result-toolbar, .rentalo-module-design-scope.rentalo-booking-layout-host--inline .rentalo-ui-step2-list, .rentalo-module-design-scope.rentalo-booking-layout-host--compact .rentalo-ui-step2-list{ width:100%; max-width:none; box-sizing:border-box; } .rentalo-module-design-scope.rentalo-shortcode-inline.rentalo-step1-inline-shell .rentalo-ui-step1-module, .rentalo-module-design-scope.rentalo-shortcode-inline.rentalo-step1-inline-shell .rentalo-layout-real{ min-width:0; } } /* 2.16.98 - One canonical outer width for inline, compact and both results * variants. Previous rules widened different inner elements, which left the * visible modules at different widths. This block targets the actual roots * and all first-level visual shells. */ @media (min-width:768px){ :is( .rentalo-shortcode-root--step1.rentalo-shortcode-inline, .rentalo-shortcode-root--step1.rentalo-shortcode-compact, .rentalo-shortcode-root--results.rentalo-booking-layout-host--inline, .rentalo-shortcode-root--results.rentalo-booking-layout-host--compact ){ width:100% !important; max-width:var(--rentalo-frontend-max-width,1180px) !important; min-width:0 !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; box-sizing:border-box !important; overflow:visible !important; } :is( .rentalo-shortcode-root--step1.rentalo-shortcode-inline, .rentalo-shortcode-root--step1.rentalo-shortcode-compact ) > .rentalo-ui-step1-module, :is( .rentalo-shortcode-root--results.rentalo-booking-layout-host--inline, .rentalo-shortcode-root--results.rentalo-booking-layout-host--compact ) > .rentalo-frontend-shell{ width:100% !important; max-width:none !important; min-width:0 !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important; } .rentalo-shortcode-root--step1.rentalo-shortcode-inline .rentalo-layout-real, .rentalo-shortcode-root--step1.rentalo-shortcode-compact .rentalo-layout-real, .rentalo-shortcode-root--results.rentalo-booking-layout-host--inline :is( .rentalo-step-progress, .rentalo-step2-topbar, .rentalo-ui-step2-result-toolbar, .rentalo-ui-step2-list ), .rentalo-shortcode-root--results.rentalo-booking-layout-host--compact :is( .rentalo-step-progress, .rentalo-step2-topbar, .rentalo-ui-step2-result-toolbar, .rentalo-ui-step2-list ){ width:100% !important; max-width:none !important; min-width:0 !important; box-sizing:border-box !important; } }