/* EQC Kalender-Look - GEMEINSAME DATEI fuer Website (Snippet 90) und Kassen-Popup. Aenderungen am Kalender-Look NUR HIER. Ausgelagert aus Snippet 90, Chat 228. */
/* EQC Booqable NEUER Zeitraum-Waehler - Stand Chat 227 nach allen Zurufen von Clemens.
   Anker gehoeren zum NEUEN Waehler (use_new_period_picker = true). Fuer den alten Waehler
   gilt Snippet 89. Attributwerte absichtlich ohne Anfuehrungszeichen. */

/* 1. Unser Theme faerbt JEDEN button grau. Zellen freistellen. Hoehe auf ganze 50 (war 49.8438). */
html body .shop-period-picker button.day-cell{background-color:transparent !important;background-image:none !important;border:0 !important;border-radius:4px !important;box-shadow:none !important;transition:none !important;height:50px !important;}
/* 2. Grundform: Quadrat mit Radius statt Kreis */
html body .shop-period-picker .day-cell .day-circle{border-radius:4px !important;transition:none !important;}
/* 3. Vorschau waehrend der Auswahl (potential-*): blasse Markenfarbe */
html body .shop-period-picker .day-cell[class*=potential-period] .day-circle{background-color:#FFE0D1 !important;background-image:none !important;}
html body .shop-period-picker .day-cell[class*=potential-period] .date{color:#333e48 !important;}
/* 4. Zeitraum und seine Endpunkte: voll orange, Wochenenden eingeschlossen */
html body .shop-period-picker .day-cell.period .day-circle,html body .shop-period-picker .day-cell.selected-period .day-circle,html body .shop-period-picker .day-cell[class*=period-start] .day-circle,html body .shop-period-picker .day-cell[class*=period-end] .day-circle{background-color:#FE5000 !important;background-image:none !important;}
html body .shop-period-picker .day-cell.period .date,html body .shop-period-picker .day-cell.selected-period .date,html body .shop-period-picker .day-cell[class*=period-start] .date,html body .shop-period-picker .day-cell[class*=period-end] .date{color:#fff !important;}
/* 5. Ueberfahren freier Tage */
html body .shop-period-picker .day-cell:not(.disabled):not(.past):not([class*=period]):hover .day-circle{background-color:#FFE0D1 !important;}
/* 6. heutiger Tag */
html body .shop-period-picker .day-cell.today:not([class*=period]) .date{color:#FE5000 !important;font-weight:600 !important;}
/* 7. gesperrte und vergangene Tage: hellgraues Muster */
html body .shop-period-picker .day-cell.disabled .day-circle,html body .shop-period-picker .day-cell.past .day-circle{background-color:transparent !important;background-image:repeating-linear-gradient(315deg, #f4f4f4 0 3px, #e6e6e6 3px 6px) !important;}
/* 8. Verbindungsband des Zeitraums: halbrunde Kappen (99px) -> eckig mit Radius */
html body .shop-period-picker .day-cell::before{border-radius:4px !important;}
/* 9. Clear-Knopf in unserer Form, auf ganzen Pixeln (war 69.08x24.25), 6px hoeher */
/* eqc-loeschen-227: Breite war fest 70px, damals auf Clear zugeschnitten - deutsche Woerter sprengten das und drueckten das Zeichen auf 0 Breite. Jetzt waechst der Knopf mit. Auf deutschen Seiten ohne Zeichen, Text mittig. Zuruf Clemens 9.9.2026. */
html body .shop-period-picker .clear-all-btn{background-color:transparent !important;color:#333e48 !important;border:1px solid #dce0e0 !important;border-radius:4px !important;padding:3px 8px !important;transition:none !important;top:6px !important;width:auto !important;min-width:70px !important;height:24px !important;line-height:16px !important;justify-content:center !important;}
html body .shop-period-picker .clear-all-btn{gap:0 !important;}
html body .shop-period-picker .clear-all-btn svg{display:none !important;}
/* eqc-loeschen2-227: Fokusring am Loeschknopf auf 1px, sonst 2px wie bei den Feldern. Zuruf Clemens 9.9.2026. */
/* eqc-touch-227: am Telefon bleibt :focus nach dem Antippen haengen und :hover klebt. Deshalb Fokusring nur bei Tastaturbedienung und Hover nur auf Zeigegeraeten. Befund Clemens am iPhone 9.9.2026. */
html body .shop-period-picker .clear-all-btn:focus-visible{outline-width:1px !important;outline-offset:0 !important;}
@media (hover:hover) and (pointer:fine){html body .shop-period-picker .clear-all-btn:hover{border-color:#FE5000 !important;color:#FE5000 !important;}}
/* 10. Uhrzeiten: aus grauen Knoepfen werden Felder */
html body .shop-period-picker .time-option{background-color:#fff !important;color:#333e48 !important;border:1px solid #dce0e0 !important;border-radius:4px !important;transition:none !important;}
html body .shop-period-picker .time-option:hover{border-color:#FE5000 !important;background-color:#fff !important;}
/* 11. Kopfbereich mit den Datumsfeldern: unser Hellgrau, kein zusaetzlicher Rahmen unten */
html body .shop-period-picker .inputs-wrapper{background-color:#f7f7f7 !important;border-bottom:0 !important;}
/* 12. Kalenderfeld ohne Rahmen (Clemens: brauchen wir nicht mehr) */
html body .shop-period-picker .calendar-wrapper{border:0 !important;}
/* 13. Monats-Pfeile: quadratisch 32x32, vom Rahmeneck weg (war 34x42 hochkant) */
html body .shop-period-picker .calendar-nav{background-color:#fff !important;background-image:none !important;border:1px solid rgb(220,224,224) !important;border-radius:4px !important;box-shadow:none !important;transition:none !important;width:32px !important;height:32px !important;padding:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;}
html body .shop-period-picker .calendar-nav:hover{background-color:#FFE0D1 !important;border-color:#FE5000 !important;}
html body .shop-period-picker .calendar-nav svg{color:#333e48 !important;fill:none !important;stroke:currentColor !important;}
html body .shop-period-picker .calendar-nav-group.right{right:8px !important;}
html body .shop-period-picker .calendar-nav-group.left{left:8px !important;}
/* 14. Schaerfe: 1.2-Zeilenhoehe bei 14px erzeugt halbe Pixel (16.8 -> 16) */
html body .shop-period-picker .input-label,html body .shop-period-picker .input-label-row,html body .shop-period-picker .day-names{line-height:16px !important;}
/* 15. Schaerfe: Rasterzeilen waren 48.8438. Booqables explizite Vorlage aufheben, ganze Pixel setzen. */
html body .shop-period-picker .month-grid{grid-template-rows:none !important;grid-auto-rows:49px !important;grid-template-columns:repeat(7,50px) !important;}
/* 16. Schrift: der Waehler lief auf generic sans-serif mit gefaelschtem Gewicht 500.
   inherit holt den Schriftstapel der Seite, ohne ihn hier festzuschreiben. */
html body .rental-options-modal,html body .rental-options-modal *,html body .shop-period-picker,html body .shop-period-picker *{font-family:inherit !important;text-rendering:auto !important;}
/* 17. Unschaerfe im Kalender: Booqable setzt will-change transform auf den Monatsstreifen und
   auf das Uhrzeit-Feld. Das erzwingt eine eigene Compositor-Ebene mit Graustufen-Glaettung. */
html body .shop-period-picker .calendar-track{will-change:auto !important;}
html body .shop-period-picker .time-picker-panel{will-change:auto !important;}
/* 18. Fussleiste des Fensters: Apply und Cancel. Achtung: transition all schlaegt !important. */
html body .rental-options-modal-button{border-radius:4px !important;box-shadow:none !important;transition:none !important;background-image:none !important;}
html body .rental-options-modal-button:not(.is-secondary){background-color:#FE5000 !important;color:#fff !important;border:1px solid #FE5000 !important;}
html body .rental-options-modal-button:not(.is-secondary):hover{background-color:#E04800 !important;border-color:#E04800 !important;}
html body .rental-options-modal-button:not(.is-secondary):disabled{background-color:#FFB08C !important;border-color:#FFB08C !important;color:#fff !important;}
html body .rental-options-modal-button.is-secondary{background-color:#fff !important;color:#333e48 !important;border:1px solid rgb(220,224,224) !important;}
html body .rental-options-modal-button.is-secondary:hover{background-color:#FFE0D1 !important;border-color:#FE5000 !important;}
html body .rental-options-modal-close{background-color:transparent !important;background-image:none !important;border:0 !important;border-radius:4px !important;transition:none !important;}
html body .rental-options-modal-close:hover{background-color:#FFE0D1 !important;}
/* 19. Fokusrahmen war blau. Booqables CSS liegt in 3 fremden Stylesheets, die nicht lesbar sind,
   darum alle drei moeglichen Traeger ueberschreiben: Rahmen, Umriss, Schatten. */
html body .shop-period-picker input:focus,html body .shop-period-picker input:focus-visible,html body .shop-period-picker .input-field:focus-within input,html body .shop-period-picker .time-option:focus,html body .shop-period-picker .time-option:focus-visible,html body .shop-period-picker .clear-all-btn:focus-visible,html body .shop-period-picker .calendar-nav:focus,html body .shop-period-picker .calendar-nav:focus-visible,html body .shop-period-picker button.day-cell:focus-visible{outline:2px solid #FE5000 !important;outline-offset:0 !important;border-color:#FE5000 !important;box-shadow:none !important;}
/* 20. Das Blau kam von der Klasse focused: outline 2px color(srgb 0.352941 0.611765 0.886275 / 0.7) */
html body .shop-period-picker .focused,html body .shop-period-picker .time-option.focused,html body .shop-period-picker .input-field.focused,html body .shop-period-picker .input-field.focused input,html body .shop-period-picker [class*=focused]{outline-color:#FE5000 !important;border-color:#FE5000 !important;}
/* 21. heutiger Tag: Unterstrich weg, statt dessen oranger Rahmen am Feld */
html body .shop-period-picker .day-cell.today .date{text-decoration:none !important;}
html body .shop-period-picker .day-cell.today:not([class*=period]) .day-circle{border:1px solid #FE5000 !important;box-sizing:border-box !important;}
/* 22. Clear-Knopf am Telefon: Booqable blendet ihn unter 768px aus (display:none).
   Wieder einblenden und in die Titelzeile des Fensters setzen, rechts buendig mit den
   Eingabefeldern. position:fixed ist noetig, weil .rental-options-modal-body seinen
   Inhalt beschneidet (overflow hidden) und ein Knopf in der Titelzeile sonst weggeschnitten
   wird. Bei innerWidth 389 gemessen: rechte Kante x 373 (Abweichung 0,00px zu den Feldern),
   116px Abstand zum Titeltext, alle vier Ecken anklickbar. Band nur bis 575.98px, weil
   darueber die Modalbreite ungemessen ist. */
/* eqc-loeschband-227: Booqable versteckt den Loeschknopf unter 660px (Regel .inputs-wrapper .clear-all-btn display none im Band max-width 659px). Unsere Rueckholung galt nur unter 576px - dazwischen fehlte der Knopf. Band jetzt bis 659.98px, dort ist das Fenster ohnehin randlos. Befund Clemens 9.9.2026. */
/* eqc-loeschstreifen-227: Endstand nach langer Messreihe mit Clemens (9.9.2026). Booqable versteckt den Loeschknopf unter 660px und legt ihn selbst absolut in den grauen Feldblock. Statt ihn ans Fenster zu kleben (alte Fassung, fuehrte zu Ueberlappungen mit Titel und Uhrzeit) bleibt er jetzt IM Block und der obere Streifen wird so hoch, dass er dort frei schwebt.
   - bis 659.98px: Streifen 32px statt 16, Knopf absolut 14px unter der Blockkante = mittig zwischen Kante und Datumsfeld (Streifen 52px, Knopf 24px).
   - bis 500.98px: dort stellt Booqable die Beschriftung NEBEN das Feld, die Felder beginnen also direkt am Rand. Streifen deshalb 56px und Knopf 16px = wieder mittig.
   - bis 529.98px: die beiden Abschnitte start/end auf volle Breite zwingen, sonst schneidet Booqable die Jahreszahl ab (Befund Clemens). Damit ist bis 529px zweizeilig.
   Gemessene Grenzen: bei 511px passen vier Felder knapp in eine Zeile, bei 505 noch, bei 500 nicht mehr; Booqable schaltet Farbe und Polsterung bei 609px und per Container bei 600px. */
@media (max-width:659.98px){html body #eqc-bq-kopftext{padding-right:0 !important;}html body .shop-period-picker .inputs-wrapper{padding-top:32px !important;}html body .shop-period-picker .clear-all-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:0 !important;position:absolute !important;top:14px !important;right:16px !important;left:auto !important;bottom:auto !important;margin:0 !important;z-index:2 !important;}}
@media (max-width:529.98px){html body .shop-period-picker .inputs-wrapper-inner > .input-section{flex:1 1 100% !important;}}
@media (max-width:500.98px){html body .shop-period-picker .inputs-wrapper{padding-top:56px !important;}html body .shop-period-picker .clear-all-btn{top:16px !important;}}
/* 23. Wochenendtage INNERHALB des Zeitraums gehoeren zur Miete und sind orange.
   Booqable rechnet sie mit: sie tragen [disabled period selected-period]. Regel 7
   (graues Muster fuer gesperrte Tage) steht davor und wuerde sie uebermalen.
   Keine Durchstreichung: sie sehen aus wie jeder andere Miettag (Entscheidung Clemens,
   durchgestrichen koennte als "keine Miete an diesen Tagen" gelesen werden).
   Gesperrte Tage AUSSERHALB des Zeitraums behalten das Muster - gegengetestet an 61 Tagen. */
html body .shop-period-picker .day-cell.disabled.period .day-circle,html body .shop-period-picker .day-cell.disabled.selected-period .day-circle{background-color:#FE5000 !important;background-image:none !important;}
html body .shop-period-picker .day-cell.disabled.period .date,html body .shop-period-picker .day-cell.disabled.selected-period .date{color:#fff !important;}
/* 24. Wochenendtage im Zeitraum: volle Deckkraft und kein Strich.
   Booqable zeichnet gesperrte Zellen mit opacity 0.65, die Ziffer mit 0.5, und legt den
   Strich als eigenes Element ueber die Ziffer: .date::after, ein absolut gesetzter Balken
   (0,99px hoch, 14,4px breit, top 8px). Darum meldet jede Textdekoration "none".
   Innerhalb des Zeitraums soll der Tag wie jeder Miettag aussehen (Entscheidung Clemens). */
html body .shop-period-picker .day-cell.disabled.period,html body .shop-period-picker .day-cell.disabled.selected-period{opacity:1 !important;text-decoration:none !important;}
html body .shop-period-picker .day-cell.disabled.period .date,html body .shop-period-picker .day-cell.disabled.selected-period .date{opacity:1 !important;color:#fff !important;text-decoration:none !important;}
html body .shop-period-picker .day-cell.disabled.period .day-circle,html body .shop-period-picker .day-cell.disabled.selected-period .day-circle{opacity:1 !important;}
html body .shop-period-picker .day-cell.disabled.period .date::after,html body .shop-period-picker .day-cell.disabled.selected-period .date::after{display:none !important;content:none !important;}
/* 25. Fussleiste: Fussnote links, Apply ueber Cancel in einer eigenen Spalte (per Skript umgehaengt).
   Reines CSS genuegt nicht: die Knoepfe wuerden die Reihe mit der Fussnote teilen und dadurch
   34px auseinanderrutschen (gemessen). Abstand 6px = Abstand zwischen zwei Datumsfeldern. */
html body .rental-options-modal-footer{align-items:flex-start !important;}
html body #eqc-bq-knoepfe{display:flex !important;flex-direction:column !important;gap:6px !important;align-items:stretch !important;flex:0 0 auto !important;}
html body #eqc-bq-knoepfe .rental-options-modal-button{width:150px !important;min-width:150px !important;height:46px !important;flex:0 0 auto !important;margin:0 !important;}
html body #eqc-bq-fussnote{display:flex !important;gap:7px !important;align-items:flex-start !important;text-align:left !important;font-size:12px !important;line-height:1.45 !important;color:#333e48 !important;flex:0 1 auto !important;max-width:58% !important;margin-right:auto !important;padding-left:8px !important;}
html body #eqc-bq-fussnote .eqc-zeile2{margin-top:8px !important;}
html body #eqc-bq-fussnote a{color:#FE5000 !important;text-decoration:underline !important;}
/* eqc-q-marker-227: unser EQC-Q statt dem eingekreisten i. Grafik unveraendert aus Snippet 7 (Aufzaehlungs-Lupen), als Maske eingesetzt, damit sie unsere Farbe annimmt. Zuruf Clemens 9.9.2026. */
html body .eqc-kreis{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:17px !important;height:17px !important;min-width:17px !important;border:0 !important;border-radius:0 !important;background-color:#FE5000 !important;color:transparent !important;font-size:0 !important;flex:0 0 auto !important;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M135,58.9c8.3.2,16.4,1.3,24.3,3.9,3.9,1.3,7.6,2.9,11.2,4.7,1.7.8,3.3,1.8,4.8,2.8,1.7,1.1,3.6,2.2,5.2,3.4,1.8,1.4,3.6,2.7,5.3,4.2,1.6,1.4,3.1,2.9,4.6,4.4,3,2.8,5.4,6.2,7.8,9.5,4.6,6.4,8.4,13.8,10.5,21.4,2.2,7.7,3.5,15.6,3.3,23.7-.2,8.1-1.6,16-4.2,23.8-1.3,3.7-2.8,7.4-4.8,10.8-1.1,1.8-2.1,3.7-3.2,5.5-1.2,1.9-2.6,3.6-3.9,5.4-2.3,3.2-5.2,6-8.1,8.8-2.8,2.6-5.7,5.2-8.9,7.2-3.6,2.3-7.1,4.7-11,6.4-3.9,1.7-7.7,3.2-11.8,4.4-9.2,2.6-18.6,3.3-28.1,2.6-13.8-1-27.4-6.4-38.5-14.5-7.3-5.3-13.4-12-18.6-19.4-4.6-6.6-7.8-14.2-10.1-21.9-2.3-7.9-2.9-16.1-2.7-24.3,0-3.9.6-7.9,1.5-11.7,1.7-7.3,4.1-14.2,7.6-20.8,8.2-15,21.4-27.1,37.2-33.8,9.6-4.2,20.1-6.3,30.6-6.3,0,0-36,0,0,0ZM201,226.2c-17.1,12.3-37.5,19.7-58.6,21-15.2,1-30.5-1.1-44.8-6.1-15.6-5.5-29.9-14.4-41.7-26-11.8-11.6-21-25.7-26.7-41.1-6-16.1-8.1-33.5-6.2-50.6,1.8-16.7,7.4-32.8,16.3-47.1,8.7-13.9,20.5-25.9,34.3-34.8,14.1-9.1,30.2-15.1,46.8-17.2,15.1-1.9,30.6-.9,45.2,3.2,16.1,4.5,31.1,12.6,43.7,23.6,12.5,10.9,22.5,24.5,29.2,39.6,7.1,16.1,10.2,33.9,9.1,51.5-1.3,20.8-8.4,41-20.5,57.9-.4.6-.9.8-.5,1.2.3.3.6.6.9.9,1.1,1.1,2.3,2.3,3.5,3.4,3.8,3.8,7.6,7.5,11.3,11.3,7.6,7.5,25.4,25.2,32.9,32.7,2.6,2.6,6.2,5.6,4.8,9.7-1,2.8-3.3,4.9-5.3,6.9-2,2-4,4-6.1,6-1.6,1.6-3.1,3.2-4.8,4.6-1.6,1.4-3.4,2.7-5.6,2.9-1.9.2-3.7-.8-5.1-2-2-1.7-14-13.8-15.8-15.6-8.1-8-16.2-16.1-24.2-24.1-4-4-8-7.9-11.9-11.9-17.1,12.3,0,0,0,0Z' fill='%233c3c3b' fill-rule='evenodd'/%3E%3C/svg%3E") !important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M135,58.9c8.3.2,16.4,1.3,24.3,3.9,3.9,1.3,7.6,2.9,11.2,4.7,1.7.8,3.3,1.8,4.8,2.8,1.7,1.1,3.6,2.2,5.2,3.4,1.8,1.4,3.6,2.7,5.3,4.2,1.6,1.4,3.1,2.9,4.6,4.4,3,2.8,5.4,6.2,7.8,9.5,4.6,6.4,8.4,13.8,10.5,21.4,2.2,7.7,3.5,15.6,3.3,23.7-.2,8.1-1.6,16-4.2,23.8-1.3,3.7-2.8,7.4-4.8,10.8-1.1,1.8-2.1,3.7-3.2,5.5-1.2,1.9-2.6,3.6-3.9,5.4-2.3,3.2-5.2,6-8.1,8.8-2.8,2.6-5.7,5.2-8.9,7.2-3.6,2.3-7.1,4.7-11,6.4-3.9,1.7-7.7,3.2-11.8,4.4-9.2,2.6-18.6,3.3-28.1,2.6-13.8-1-27.4-6.4-38.5-14.5-7.3-5.3-13.4-12-18.6-19.4-4.6-6.6-7.8-14.2-10.1-21.9-2.3-7.9-2.9-16.1-2.7-24.3,0-3.9.6-7.9,1.5-11.7,1.7-7.3,4.1-14.2,7.6-20.8,8.2-15,21.4-27.1,37.2-33.8,9.6-4.2,20.1-6.3,30.6-6.3,0,0-36,0,0,0ZM201,226.2c-17.1,12.3-37.5,19.7-58.6,21-15.2,1-30.5-1.1-44.8-6.1-15.6-5.5-29.9-14.4-41.7-26-11.8-11.6-21-25.7-26.7-41.1-6-16.1-8.1-33.5-6.2-50.6,1.8-16.7,7.4-32.8,16.3-47.1,8.7-13.9,20.5-25.9,34.3-34.8,14.1-9.1,30.2-15.1,46.8-17.2,15.1-1.9,30.6-.9,45.2,3.2,16.1,4.5,31.1,12.6,43.7,23.6,12.5,10.9,22.5,24.5,29.2,39.6,7.1,16.1,10.2,33.9,9.1,51.5-1.3,20.8-8.4,41-20.5,57.9-.4.6-.9.8-.5,1.2.3.3.6.6.9.9,1.1,1.1,2.3,2.3,3.5,3.4,3.8,3.8,7.6,7.5,11.3,11.3,7.6,7.5,25.4,25.2,32.9,32.7,2.6,2.6,6.2,5.6,4.8,9.7-1,2.8-3.3,4.9-5.3,6.9-2,2-4,4-6.1,6-1.6,1.6-3.1,3.2-4.8,4.6-1.6,1.4-3.4,2.7-5.6,2.9-1.9.2-3.7-.8-5.1-2-2-1.7-14-13.8-15.8-15.6-8.1-8-16.2-16.1-24.2-24.1-4-4-8-7.9-11.9-11.9-17.1,12.3,0,0,0,0Z' fill='%233c3c3b' fill-rule='evenodd'/%3E%3C/svg%3E") !important;-webkit-mask-size:contain !important;mask-size:contain !important;-webkit-mask-repeat:no-repeat !important;mask-repeat:no-repeat !important;-webkit-mask-position:center !important;mask-position:center !important;}
html body #eqc-bq-hinweis .eqc-kreis{position:absolute !important;top:9px !important;right:10px !important;width:15px !important;height:15px !important;min-width:15px !important;background-color:#ffffff !important;}

/* 55) eqc-mobilfuss-227: Fussbereich am Telefon - Knoepfe in EINER Zeile, Cancel links, Apply rechts, Text darunter. Zuruf Clemens 9.9.2026. Band nur bis 575.98px, Desktop unberuehrt. */
@media (max-width:575.98px){
html body .rental-options-modal-footer{display:flex !important;flex-direction:column-reverse !important;align-items:stretch !important;}
html body #eqc-bq-knoepfe{display:flex !important;flex-direction:row-reverse !important;width:100% !important;gap:6px !important;align-items:stretch !important;}
html body #eqc-bq-knoepfe .rental-options-modal-button{flex:1 1 0 !important;width:auto !important;min-width:0 !important;height:46px !important;}
html body #eqc-bq-fussnote{max-width:100% !important;margin:12px 0 0 0 !important;padding-left:0 !important;}
}

/* 59) eqc-xkopf-227: Booqables Schliessen-X wandert in die Titelzeile und wird orange. Nur ab 576px - am Telefon bleibt es in der Ecke hinter dem Clear-Knopf, dort schliesst der Cancel-Knopf. Zuruf Clemens 9.9.2026. */
@media (min-width:660px){
html body .rental-options-modal-header{justify-content:space-between !important;gap:12px !important;}
html body .rental-options-modal-header .rental-options-modal-header-title{flex:1 1 auto !important;}
html body .rental-options-modal-header button.rental-options-modal-close{position:static !important;top:auto !important;right:auto !important;opacity:1 !important;color:#FE5000 !important;width:32px !important;height:32px !important;min-width:32px !important;flex:0 0 auto !important;margin:0 !important;padding:0 !important;}
html body .rental-options-modal-header button.rental-options-modal-close svg path{stroke:#FE5000 !important;stroke-width:2.4 !important;}
html body .rental-options-modal-header button.rental-options-modal-close:hover svg path{stroke:#333e48 !important;}
}

/* 65) eqc-mitte-227: Kalenderfenster senkrecht mittig statt oben angeklebt. Kein fester Wert - der Grauschleier zentriert, die Aussenabstaende gehen auf 0. Band ab 660px, weil Booqable darunter selbst auf randlos ueber den ganzen Schirm schaltet. Zuruf Clemens 9.9.2026. */
@media (min-width:660px){
html body .rental-options-backdrop{align-items:center !important;}
html body #rental-options-wizard{margin-top:0 !important;margin-bottom:0 !important;}
}

/* 68) eqc-untertitel-227: Zusatzzeile unter dem Titel. Groesse und Farbe wie die Fussnote. */
html body #eqc-bq-kopftext{display:flex !important;flex-direction:column !important;gap:3px !important;flex:1 1 auto !important;min-width:0 !important;}
html body #eqc-bq-untertitel{font-size:12px !important;line-height:1.45 !important;color:#333e48 !important;font-weight:400 !important;text-align:left !important;}
html body .rental-options-modal-header{align-items:center !important;}

/* 71) eqc-umbruch-227: fester Zeilenumbruch im Untertitel nach dem Wort Schritt. Nur ab 660px - darunter ist die Kopfzeile schmal und der Text bricht ohnehin selbst um. */
@media (max-width:659px){
html body #eqc-bq-untertitel br.eqc-um{display:none !important;}
}

/* eqc-feldweiss-227: Booqable faerbt die Datums- und Uhrzeitfelder unter 609px gefuellt grau (gemessen rgb(233,236,239)) und darueber weiss mit Rahmen; die Regel dazu liegt in Booqables eigener Stildatei und ist fuer uns nicht lesbar. Damit der Kalender in allen Breiten gleich aussieht, wird die breite Optik nach unten gezogen. Rahmenton ist derselbe wie am Loeschknopf, NACHGEBAUT, nicht aus Booqable ausgelesen. Befund Clemens 9.9.2026. */
@media (max-width:609px){html body .shop-period-picker .inputs-wrapper input{background-color:#ffffff !important;border:1px solid #dce0e0 !important;border-radius:4px !important;}}

/* eqc-touch2-227: Befund Clemens am iPhone (9.9.2026), zwei Punkte.
   (a) Nach eqc-touch-227 hatte der Loeschknopf am Telefon KEINE Rueckmeldung mehr, weil dort :hover und :focus abgeschaltet sind. Loesung :active - feuert beim Druck, endet beim Loslassen, klebt nicht. Zusaetzlich der graue Systemblitz per tap-highlight aus.
   (b) Safari zeichnet nach dem Antippen einer Tageszelle einen BLAUEN Ring; in Chrome nicht reproduzierbar (dort bleibt der dunkle Umriss). Unsere orange Regel griff nur bei :focus-visible, also Tastatur. Jetzt bekommt die Tageszelle auch bei blossem :focus unser Orange - Blau ist damit weg.
   WICHTIG: Eingabefelder und Uhrzeit-Auswahl bleiben unangetastet, dort ist der orange Ring bei :focus ausdruecklich gewuenscht (Zuruf Clemens vom selben Tag). Nur beim Loeschknopf wird der haengende Ring nach dem Tippen entfernt. */
html body .shop-period-picker .clear-all-btn{-webkit-tap-highlight-color:transparent !important;}
html body .shop-period-picker .clear-all-btn:active{border-color:#FE5000 !important;color:#FE5000 !important;background-color:#FFF3EE !important;}
html body .shop-period-picker .clear-all-btn:focus:not(:focus-visible){outline:none !important;box-shadow:none !important;}
html body .shop-period-picker button.day-cell:focus{outline:2px solid #FE5000 !important;outline-offset:0 !important;box-shadow:none !important;}

/* eqc-raster320-227: WCAG 1.4.10 Reflow bei 320px. Booqable setzt sieben FESTE 50px-Spalten, das Raster wird damit 350px breit und die Sonntagsspalte war um 37px abgeschnitten - ohne waagrechten Balken also unerreichbar (gemessen 52 Zellen ausserhalb des Fensters). Fix: sieben gleiche Spalten statt feste 50px, nur unter 360px. Ergebnis gemessen: Zelle 44x50 (Fingerziel-Richtwert 44 erreicht), 0 Zellen ausserhalb, keine Seitenbreite ueber 320. ACHTUNG: das Kalenderband laeuft bei 320px als SPALTE (flex-direction column), ein flex-basis am Monat wirkt dort auf die HOEHE - deshalb hier nur width, kein flex. Befund Clemens 9.9.2026. */
@media (max-width:359.98px){
html body .shop-period-picker .calendar-track{width:100% !important;}
html body .shop-period-picker .month{width:100% !important;max-width:100% !important;}
html body .shop-period-picker .month-grid,html body .shop-period-picker .day-names{grid-template-columns:repeat(7,1fr) !important;width:100% !important;}
html body .shop-period-picker .day-cell{width:auto !important;min-width:0 !important;}
html body .shop-period-picker .day-circle{width:100% !important;max-width:100% !important;}
}
/* eqc-zusatzfelder-227: Zusatzfelder im Kalender (Wunschtermin ausserhalb der Oeffnungszeiten,
   Anzahl der Drehtage) plus eigene Knopfzeile. Chat 227, 9.9.2026, Zurufe Clemens.
   Booqables Fussbereich wird ausgeblendet, seine zwei Knoepfe wandern in unsere Zeile.
   ACHTUNG Electro: Regeln muessen an der Kennung des Feldes haengen und !important tragen,
   sonst gewinnen Theme-Regeln (Radius 22px, volle Breite, Grund rgb(239,236,236)). */
#eqc-bq-untertitel{display:none !important;}
html body .rental-options-modal-footer{display:none !important;}
html body .rental-options-modal-header{padding:9px 12px 9px 16px !important;}
@media (min-width:768px){html body .shop-period-picker .month-grid{min-height:301px;}}
html body .shop-period-picker .eqc-bq-kopf{display:flex !important;align-items:center !important;width:100%;align-self:stretch;min-height:51px;padding:9px 16px;box-sizing:border-box;background:#fff;border-top:1px solid #dbdbdb;border-bottom:1px solid #dbdbdb;font-size:16px;font-weight:500;line-height:24px;color:#111;font-family:Inter,"Open Sans",Helvetica,Arial,sans-serif;}
html body .shop-period-picker #eqc-bq-fragekopf{margin-top:4px;justify-content:space-between !important;flex-wrap:nowrap !important;gap:16px;}
html body .shop-period-picker #eqc-bq-fragetext{flex:1 1 auto;min-width:0;}
html body .shop-period-picker .eqc-optional{flex:0 0 auto;align-self:center;font-size:12px !important;font-weight:400 !important;color:#6f6f6f !important;white-space:nowrap;}
html body .shop-period-picker #eqc-bq-frageband{width:100%;align-self:stretch;background:#f7f7f7;padding:16px;box-sizing:border-box;}
html body .shop-period-picker .eqc-nur-vorlesen{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;margin:-1px !important;padding:0 !important;border:0 !important;}
html body .shop-period-picker #eqc-bq-wunschfeld{display:block !important;width:100% !important;height:46px !important;padding:10px 12px !important;font-size:16px !important;font-weight:500 !important;font-family:Inter,"Open Sans",Helvetica,Arial,sans-serif !important;color:#111 !important;background:#fff !important;border:1px solid #dbdbdb !important;border-radius:4px !important;box-sizing:border-box !important;box-shadow:none !important;margin:0 !important;min-height:0 !important;}
/* eqc-abholwahl-229: Dropdown Abholung/Rueckgabe im Kalender, Stil wie #eqc-bq-wunschfeld + Pfeil wie Kasse */
html body .shop-period-picker #eqc-bq-abholwahl{display:block !important;width:100% !important;height:46px !important;padding:10px 36px 10px 12px !important;margin:0 0 8px 0 !important;font-size:16px !important;font-weight:500 !important;font-family:Inter,"Open Sans",Helvetica,Arial,sans-serif !important;color:#111 !important;border:1px solid #dbdbdb !important;border-radius:4px !important;box-sizing:border-box !important;box-shadow:none !important;min-height:0 !important;-webkit-appearance:none !important;appearance:none !important;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 6%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 fill=%27none%27 stroke=%27%23333e48%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat right 14px center/10px 6px !important;}
html body .shop-period-picker #eqc-bq-abholwahl:invalid{color:#9b9b9b !important;}
html body .shop-period-picker #eqc-bq-abholwahl:focus{outline:2px solid #FE5000 !important;outline-offset:0 !important;border-color:#dbdbdb !important;}
html body .shop-period-picker #eqc-bq-wunschfeld:focus{outline:2px solid #FE5000 !important;outline-offset:0 !important;border-color:#dbdbdb !important;}
html body .shop-period-picker #eqc-bq-qzeile{display:flex;align-items:center;gap:7px;width:100%;box-sizing:border-box;padding:12px 0 0 0;background:transparent;font-size:12px;line-height:1.45;color:rgb(51,62,72);font-family:Inter,"Open Sans",Helvetica,Arial,sans-serif;}
html body .shop-period-picker #eqc-bq-qzeile a{color:#FE5000;text-decoration:underline;}
#eqc-bq-fussnote .eqc-kreis{display:none !important;}
#eqc-bq-fussnote .eqc-zeile1-alt{display:none !important;}
html body .shop-period-picker #eqc-bq-drehkopf{min-height:51px !important;padding:6px 16px !important;justify-content:space-between !important;align-items:center !important;flex-wrap:wrap;gap:16px;border-bottom:0 !important;}
html body .shop-period-picker #eqc-bq-stepper{display:flex;align-items:center;gap:8px;}
html body .shop-period-picker .eqc-bq-stufe{width:38px !important;height:38px !important;padding:0;display:flex;align-items:center;justify-content:center;background:#fff !important;border:1px solid #dbdbdb !important;border-radius:4px;font-size:18px !important;font-weight:500;line-height:1;color:#FE5000 !important;cursor:pointer;transition:none !important;font-family:Inter,"Open Sans",Helvetica,Arial,sans-serif;}
html body .shop-period-picker .eqc-bq-stufe:hover:not(:disabled){background:#FE5000 !important;border-color:#FE5000 !important;color:#fff !important;}
html body .shop-period-picker .eqc-bq-stufe:focus-visible{outline:2px solid #FE5000;outline-offset:0;}
html body .shop-period-picker .eqc-bq-stufe:disabled{background:#fff !important;color:#f0c3ab !important;border-color:#e7e7e7 !important;cursor:default;}
html body .shop-period-picker #eqc-bq-drehfeld{width:64px !important;height:38px !important;padding:8px !important;font-size:16px !important;/* eqc-drehzoom-229: 16px statt 15px - iOS Safari zoomt beim Fokus in Felder unter 16px (Befund Clemens 11.9.2026) */font-weight:500 !important;color:#111 !important;background:#fff !important;border:1px solid #dbdbdb !important;border-radius:4px !important;box-shadow:none !important;margin:0 !important;min-height:0 !important;text-align:center !important;box-sizing:border-box !important;}
html body .shop-period-picker #eqc-bq-drehfeld:focus{outline:2px solid #FE5000 !important;outline-offset:0 !important;border-color:#dbdbdb !important;}
html body .shop-period-picker .calendar-today-btn{margin-left:10px !important;}
html body .shop-period-picker .calendar-today-btn:hover{background:#FE5000 !important;border-color:#FE5000 !important;color:#fff !important;transition:none !important;}
html body .shop-period-picker #eqc-bq-knopfzeile{display:flex;justify-content:flex-end;flex-wrap:nowrap !important;gap:12px;width:100%;align-self:stretch;box-sizing:border-box;padding:16px;background:#f7f7f7 !important;border-top:1px solid #dbdbdb !important;}
html body .shop-period-picker #eqc-bq-knopfzeile .rental-options-modal-button{flex:1 1 auto !important;width:auto !important;max-width:150px !important;min-width:0 !important;height:46px !important;margin:0 !important;padding-left:8px !important;padding-right:8px !important;}
/* eqc-mobilkalender-227: Telefon-Kalender darf nicht zusammengedrueckt werden.
   Belegt aus Booqables base-CSS: `.calendar-wrapper.stacked-months .calendar` hat
   `max-height:min(62vh,760px); overflow-y:auto` und ist auf dem Telefon der EINZIGE Roller;
   `#rental-options-wizard` steht auf `max-height:100%`. Mit unseren zwei Baendern plus
   Knopfzeile (rund 350px) bleibt fuer den Kalender nur ein Streifen.
   Darum: Mindesthoehe fuer den Kalender, das ganze Fenster rollt selbst, und pan-y,
   damit der Finger rollt statt in Booqables Tage-Auswahl zu haengen. */
@media (max-width:767.98px){
/* eqc-hoehefit-227 (10.9.2026, Befund Clemens): das Fenster war einen Hauch hoeher als der
   Bildschirm - daran lag der zweite Roller, der auf iOS die Rollbewegung an sich zieht (sichtbar
   als schwarzer Streifen oben oder unten). Statt einer festen Mindesthoehe fuer den Kalender
   nimmt er jetzt den RESTLICHEN Platz: Fenster auf Bildschirmhoehe begrenzt, Kette aus
   flex:1 1 auto plus min-height:0 bis zum Kalender. Damit gibt es nur noch EINEN Roller.
   Der Schleier darf weiter rollen - das greift nur, wenn der Wunschtermin-Block offen ist. */
/* eqc-randlos-227 (10.9.2026, Befund Clemens: Streifen oben UND unten):
   Die Streifen waren zweimal Rand. Booqables Schleier hat 16px Innenabstand (steht in seinem
   base-CSS), und ich hatte dem Fenster zusaetzlich 8px oben und unten gegeben, plus
   max-height 100dvh minus 16. Damit konnte das Fenster den Bildschirm nie fuellen - und weil es
   nicht exakt passte, blieb der zweite Roller. Auf dem Telefon ist das Fenster daher randlos und
   genau bildschirmhoch; die Ecken werden gerade, weil ein randloses Blatt keine Rundung braucht. */
/* eqc-nurkalender-227 (10.9.2026, Zuruf Clemens): der lange Balken gehoerte dem Bereich HINTER
   dem Fenster. Rollbar musste er sein, solange das Fenster hoeher war als der Bildschirm - seit
   eqc-randlos-227 ist es genau bildschirmhoch, und alles Wachsen uebernimmt der Kalender.
   Der aeussere Roller hat damit keine Aufgabe mehr und wird abgeschaltet; overscroll-behavior
   verhindert zusaetzlich, dass eine Rollbewegung im Kalender nach draussen weiterlaeuft.
   Grenze, die man kennen muss: bei offenem Wunschtermin-Block auf einem sehr kurzen Bildschirm
   wird der Kalender entsprechend flach - erreichbar bleibt alles, weil nur er rollt. */
html body .rental-options-backdrop{align-items:flex-start !important;padding:0 !important;overflow:hidden !important;overscroll-behavior:none !important;}
html body #rental-options-wizard{display:flex !important;flex-direction:column !important;width:100% !important;max-width:none !important;margin:0 !important;border-radius:0 !important;height:100vh !important;height:100dvh !important;max-height:100vh !important;max-height:100dvh !important;}
/* eqc-hoehefit2-227 (10.9.2026, Befund Clemens): zwei Nachbesserungen.
   1. Auf dem iPhone ist 100vh NICHT die sichtbare Hoehe (Safari rechnet die Adressleiste mit) -
      daher blieb ein schwarzer Rand. Die dvh-Einheit ist die dynamische, tatsaechlich sichtbare
      Hoehe; die vh-Zeile bleibt als Rueckfall fuer aeltere Browser darueber stehen.
   2. Alle festen Baender duerfen NICHT mitschrumpfen. Ohne flex:0 0 auto hat die Kette sie
      gestaucht: die zweizeilige Frage braucht 66px, das Band wurde auf seine Mindesthoehe 51
      gedrueckt - der Text klebte an der Linie. Nur der Kalender darf sich anpassen. */
html body #rental-options-wizard .rental-options-modal-header{flex:0 0 auto !important;}
html body .shop-period-picker .inputs-wrapper{flex:0 0 auto !important;}
html body .shop-period-picker #eqc-bq-fragekopf{flex:0 0 auto !important;}
html body .shop-period-picker #eqc-bq-frageband{flex:0 0 auto !important;}
html body .shop-period-picker #eqc-bq-drehkopf{flex:0 0 auto !important;}
html body .shop-period-picker #eqc-bq-knopfzeile{flex:0 0 auto !important;}
html body #rental-options-wizard .rental-options-modal{display:flex !important;flex-direction:column !important;min-height:0 !important;flex:1 1 auto !important;}
html body .shop-period-picker{flex:1 1 auto !important;min-height:0 !important;}
html body .shop-period-picker .calendar-overlay{flex:1 1 auto !important;min-height:0 !important;}
html body .shop-period-picker .calendar-wrapper{flex:1 1 auto !important;min-height:0 !important;}
html body .calendar-wrapper.stacked-months .calendar{flex:1 1 auto !important;min-height:0 !important;max-height:none !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain !important;}
}
/* eqc-heutknopf-227: unter 660px gibt es Booqables Monatsnavigation samt "Today" nicht
   (dort stehen die zwoelf Monate untereinander). Darum ein eigener Knopf links oben im grauen
   Feldblock, genau gespiegelt zum Loeschknopf rechts (top 14px, ab 501px abwaerts top 16px),
   Aussehen 1:1 wie `.clear-all-btn`. Zuruf Clemens 9.9.2026. */
html body .shop-period-picker #eqc-bq-heute{display:none;}
@media (max-width:659.98px){
html body .shop-period-picker #eqc-bq-heute{display:inline-flex !important;align-items:center !important;justify-content:center !important;position:absolute !important;top:14px !important;left:16px !important;right:auto !important;bottom:auto !important;margin:0 !important;z-index:2 !important;background-color:transparent !important;color:#333e48 !important;border:1px solid #dce0e0 !important;border-radius:4px !important;padding:3px 8px !important;font-size:13px !important;line-height:1.5 !important;font-family:Inter,"Open Sans",Helvetica,Arial,sans-serif !important;cursor:pointer !important;transition:none !important;-webkit-tap-highlight-color:transparent !important;}
html body .shop-period-picker #eqc-bq-heute:active{border-color:#FE5000 !important;color:#FE5000 !important;background-color:#FFF3EE !important;}
html body .shop-period-picker #eqc-bq-heute:focus-visible{outline:1px solid #FE5000 !important;outline-offset:0 !important;}
html body .shop-period-picker #eqc-bq-heute:focus:not(:focus-visible){outline:none !important;box-shadow:none !important;}
}
@media (hover:hover) and (pointer:fine){html body .shop-period-picker #eqc-bq-heute:hover{border-color:#FE5000 !important;color:#FE5000 !important;}}
@media (max-width:500.98px){html body .shop-period-picker #eqc-bq-heute{top:16px !important;}}
/* eqc-heutplatz-227: Der Heute-Knopf lag links auf der Beschriftung "Von" - rechts war der
   Streifen frei, links nicht (Befund Clemens 10.9.2026, Band 501-659px). Streifen deshalb von
   32px auf 46px, beide Knoepfe mittig darin auf top 11px. Unter 501px bleibt alles, wie es war:
   dort stellt Booqable die Beschriftung NEBEN das Feld, der Streifen ist links frei. */
@media (min-width:501px) and (max-width:659.98px){
html body .shop-period-picker .inputs-wrapper{padding-top:46px !important;}
html body .shop-period-picker .clear-all-btn{top:11px !important;}
html body .shop-period-picker #eqc-bq-heute{top:11px !important;}
}
/* eqc-klapp-227: Unter 660px klappt der Wunschtermin-Block zu. Nutzen ist doppelt: mehr Platz
   fuer den Kalender UND das Fenster bleibt kuerzer als der Bildschirm, damit es keinen zweiten
   Roller gibt (auf iOS besitzt die zuerst begonnene Rollbewegung die Rollkette bis zum Schwungende
   - deshalb liess sich der Kalender nach einem Rollen auf der Seite nicht mehr rollen).
   Aufklappen per Tipp auf die Frage; Pfeil rechts zeigt den Zustand. Idee Clemens 10.9.2026.
   Zusatz: "optional" und Pfeil stehen an der UNTERKANTE der Frage (Zuruf Clemens), nicht mittig. */
html body .shop-period-picker #eqc-bq-fragekopf{align-items:flex-end !important;}
html body .shop-period-picker #eqc-bq-fragekopf .eqc-optional{align-self:flex-end !important;}
html body .shop-period-picker #eqc-bq-fragekopf .eqc-optional{color:#FE5000 !important;}

@media (max-width:659.98px){
html body .shop-period-picker #eqc-bq-fragekopf{cursor:pointer;}
html body .shop-period-picker #eqc-bq-frageband{display:none !important;}
html body .shop-period-picker #eqc-bq-frageband.eqc-offen{display:block !important;}
}
/* eqc-drehzeile-227: Die Drehtage-Zeile wurde auf dem Telefon zweizeilig - "Anzahl deiner
   Drehtage" plus Waehler (156px) passt bei 375px nicht in eine Zeile. Unter 660px steht deshalb
   nur "Drehtage", und die Zeile darf nicht mehr umbrechen. Zuruf Clemens 10.9.2026.
   Ausserdem: Pfeil am Klappkopf von 11px auf 16px und dunkler (war kaum zu erkennen). */
html body .shop-period-picker #eqc-bq-drehkurz{display:none;}
@media (max-width:659.98px){
html body .shop-period-picker #eqc-bq-drehkopf{flex-wrap:nowrap !important;}
html body .shop-period-picker #eqc-bq-drehlang{display:none !important;}
html body .shop-period-picker #eqc-bq-drehkurz{display:inline !important;}
}
/* eqc-seitensperre-227 (10.9.2026, GEMESSEN am iPhone mit dem Messfenster):
   Der lange Balken war NICHT der Schleier und nicht das Fenster, sondern die Produktseite selbst.
   Messwerte: SEITE 4114/664 (Ueberschuss 3450), scrollY bis 3432, Schleier 664/664 mit
   overflow:hidden, Fenster genau 664. Also wird die Seite gesperrt, solange der Waehler offen ist.
   Rollposition wird gemerkt und beim Schliessen wiederhergestellt (iOS springt sonst nach oben). */
@media (max-width:767.98px){
html.eqc-modal-offen{overflow:hidden !important;height:100% !important;}
html.eqc-modal-offen body{position:fixed !important;left:0 !important;right:0 !important;width:100% !important;overflow:hidden !important;}
}