/* ══════════════════════════════════════ Booking-Widget-Einbettung v2 — lädt NACH site.css auf allen Seiten mit Widget (Start, Preise, Stadt-Landingpages, Flughafen-Routen). Benötigt: tailwind.min.css + booking-widget.min.js + booking-payment-cleanup.js +
Generiert aus site/ — nicht im Webroot editieren. ══════════════════════════════════════ */ /* Keyframes, die das Widget-Bundle referenziert — nicht entfernen */ @keyframes slideInFromTop{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}} @keyframes bk-blur-pulse{0%,to{opacity:.65}50%{opacity:.92}} @keyframes bk-input-attention{0%,to{box-shadow:0 0 #14172200}50%{box-shadow:0 0 0 3px #1417221a}} @keyframes pulse-dot{0%,to{box-shadow:0 0 0 3px #4ade8040}50%{box-shadow:0 0 0 6px #4ade801a}} /* Platz reservieren, bis React mountet → kein Layout-Sprung (CLS) */ #booking-root:empty{min-height:clamp(380px,92vw,460px);border-radius:14px;background:var(--sage);border:1px solid var(--line)} @media (min-width:860px){#booking-root:empty{min-height:340px}} /* ── Widget-Layout-Overrides (Widget-Logik unverändert) ── Container-Query statt Viewport-Media-Query: die Karte kann bei 7fr/5fr-Hero auf Desktop schmaler sein als der Viewport, sonst quetscht die feste 300px-Spalte die Formular-Spalte auf einen Streifen zusammen. */ #booking-root{width:100%} #booking-root .bk-booking-grid{display:grid;grid-template-columns:1fr;overflow:visible} #booking-root .bk-form-col{min-width:0;padding:16px 18px 20px 20px;border-top-left-radius:14px;border-top-right-radius:14px} #booking-root .bk-calc-col{min-width:0;padding:16px 20px 20px;border-top:1px solid var(--line);overflow:visible;border-bottom-left-radius:14px;border-bottom-right-radius:14px} @container booking-card (min-width: 560px){ #booking-root .bk-booking-grid{grid-template-columns:minmax(0,1fr) 300px} #booking-root .bk-form-col{padding:20px 28px 24px 24px;border-radius:14px 0 0 14px} #booking-root .bk-calc-col{border-top:none;border-left:1px solid var(--line);padding:20px 20px 24px 28px;min-width:0;border-radius:0 14px 14px 0} } /* Breite Hero-Bühne: Formular bekommt Luft, Preis-Spalte wird lesbarer */ @container booking-card (min-width: 860px){ #booking-root .bk-booking-grid{grid-template-columns:minmax(0,1fr) 360px} #booking-root .bk-form-col{padding:26px 36px 30px 32px} #booking-root .bk-calc-col{padding:26px 32px 30px 32px} } /* ── Lesbarkeit & Erkennbarkeit ───────────────────────── Problem vorher: Karte weiß auf weiß, Rahmen/Feldkanten hauchdünn und hellgrau, Meta-Text bis 8px. Lösung: Karte wird getönter Rahmen um ein weißes Formular (klare Objektgrenze), Kanten und Typo bekommen tragfähigen Kontrast. */ /* Der Rahmen war pine-deep auf pine-deep — gegen die helle Seite trug ihn nur der Schatten, gegen dunkle Sektionen verschwand er ganz. Jetzt: aufgehellte Rahmenkante plus schmale Lichtkante oben, damit die Karte an jeder Kante als Objekt endet. */ .booking-card{ background:var(--pine-deep); border:1px solid color-mix(in srgb, var(--paper-on-deep) 22%, var(--pine-deep)); box-shadow: inset 0 1px 0 rgba(248,246,240,.14), 0 28px 64px -30px rgba(6,46,36,.6), 0 2px 0 rgba(6,46,36,.08); } .booking-card .booking-eyebrow{ display:flex;align-items:center;gap:9px;color:var(--paper-on-deep); margin:2px 0 12px;letter-spacing:.08em; } .booking-card .booking-eyebrow::before{ content:"";width:8px;height:8px;border-radius:50%;background:#4ade80;flex:0 0 auto; box-shadow:0 0 0 3px rgba(74,222,128,.25); } #booking-root .bk-form-col{background:var(--surface)} /* Zahlungsleiste sitzt auf dem dunklen Rahmen */ .booking-card .pay-strip{margin-top:12px} /* …aber nicht mehr auf der Bestätigungsseite: dort ist die Zahlung durch, die Anbieter-Logos lenken nur noch ab. Browser ohne :has() zeigen sie weiter — das ist der harmlose Ausgang. */ .booking-card:has(#booking-root .bk-step4) .pay-strip{display:none} .booking-card .pay-strip span{color:rgba(248,246,240,.82)} .booking-card .pay-strip img{opacity:1;background:#fff;border-radius:4px;padding:2px 3px} .booking-card noscript p{color:var(--paper-on-deep)} .booking-card noscript a{color:#8ee7b4} /* Eingabefelder: sichtbare Kanten statt Hauchlinien. `body`-Präfix nötig: das Widget-Bundle injiziert zur Laufzeit eigene !important-Regeln mit `#booking-root input[type="…"]` — die stehen später im Dokument, wir müssen sie über die Spezifität schlagen. */ html body #booking-root input,html body #booking-root input[type],html body #booking-root textarea, html body #booking-root select,html body #booking-root .bk-country-btn{ border-width:1.5px!important;border-color:#7d968b!important;background-color:#fff!important;color:var(--ink)!important; } html body #booking-root input::placeholder,html body #booking-root textarea::placeholder{color:#55665f!important;opacity:1} html body #booking-root input[type]:hover,html body #booking-root .bk-country-btn:hover{border-color:#5f7d70!important} html body #booking-root input[type]:focus,html body #booking-root textarea:focus,html body #booking-root select:focus,html body #booking-root .bk-country-btn:focus{ border-color:var(--pine)!important;box-shadow:0 0 0 3px rgba(11,61,49,.22)!important;outline:none!important; } /* Verbindungsschiene Abholung → Ziel */ #booking-root .bk-addr-rail{background-image:linear-gradient(#7d968b 0%,#7d968b 50%,transparent 50%)!important;width:2px!important} /* Trennkante zwischen Formular- und Preisspalte */ #booking-root .bk-calc-col{border-color:#93a99e!important} /* Preisspalte (dunkel): Mikro-Typo auf lesbare Größen, Text aufhellen */ #booking-root .bk-calc-col .text-\[9px\]{font-size:11px!important;letter-spacing:.08em} #booking-root .bk-calc-col .text-\[8px\]{font-size:11px!important} #booking-root .bk-calc-col .text-\[11px\]{font-size:12.5px!important} #booking-root .bk-calc-col .text-\[9px\],#booking-root .bk-calc-col .text-\[8px\],#booking-root .bk-calc-col .text-\[11px\]{color:#d7e3dc!important} /* Deaktivierter Haupt-CTA blieb bei opacity-30 unlesbar — als „noch nicht bereit" erkennbar halten */ #booking-root .bk-order-btn:disabled{opacity:.62!important} #booking-root .liquid-seg{position:relative;overflow:hidden;isolation:isolate} #booking-root .liquid-seg-distort{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} #booking-root .liquid-thumb{z-index:1;background:var(--pine-deep);box-shadow:0 2px 8px rgba(15,53,45,.3)} #booking-root .liquid-btn{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 1px 2px rgba(15,53,45,.25);transition:box-shadow .2s,transform .15s,filter .2s} #booking-root .liquid-btn>*{position:relative;z-index:1} #booking-root .liquid-btn:hover{box-shadow:0 8px 22px rgba(15,53,45,.3)} #booking-root .bk-order-btn.is-ready{animation:slideInFromTop .6s ease-out both;animation-delay:.05s} @media (prefers-reduced-motion: reduce){ #booking-root .liquid-thumb{transition:none!important} #booking-root .bk-order-btn.is-ready,#booking-root .space-y-1[style*=slideInFromTop]{animation:none!important;opacity:1!important;transform:none!important} } /* Mobil: kompakte Widget-Dichte */ @media (max-width:767px){ /* .bk-progress bleibt sichtbar: die Schrittangabe ist auf dem kleinen Schirm der einzige Hinweis darauf, wie weit die Buchung noch geht. */ #booking-root .bk-label,#booking-root .bk-logo,#booking-root .bk-title{display:none} #booking-root .bk-header{margin-bottom:8px;min-height:0;padding:0} #booking-root .bk-order-btn:not(.is-ready)+.bk-cta-note{display:none} #booking-root .bk-phone-row{gap:6px!important;min-width:0;width:100%} #booking-root .bk-country-wrap{flex:0 1 112px;min-width:96px;max-width:118px} #booking-root .bk-country-btn{width:100%;min-width:0!important;height:50px;padding-left:10px!important;padding-right:8px!important} #booking-root .bk-phone-input{flex:1 1 0;min-width:0;width:0;padding-left:12px!important;padding-right:10px!important} #booking-root .bk-country-menu{width:min(260px,calc(100vw - 48px))!important} #booking-root .bk-vehicle-capacity:not(.is-ready){display:none!important} #booking-root .bk-order-btn:not(.is-ready){display:none} #booking-root .bk-div-after-status{display:none!important} #booking-root .bk-form-col{padding:12px 16px 14px!important;border-radius:14px 14px 0 0} #booking-root .bk-calc-col{padding:12px 16px 14px!important;border-radius:0 0 14px 14px} #booking-root .bk-calc-col .mb-4{margin-bottom:.5rem!important} #booking-root .bk-calc-col .mb-3{margin-bottom:.4rem!important} #booking-root .bk-calc-col .mb-2\.5{margin-bottom:.35rem!important} #booking-root .bk-calc-col div:has(>img[alt="Toyota Corolla"]),#booking-root .bk-calc-col p:has(+div>img[alt="Toyota Corolla"]){display:none!important} } @media (max-width:360px){ #booking-root .bk-country-wrap{flex-basis:100px;min-width:90px} #booking-root .bk-country-btn{padding-left:8px!important;padding-right:6px!important} #booking-root .bk-phone-input{padding-left:10px!important;padding-right:8px!important} }