/* ============================================================
   Sales Upgrade – booking card (.su-booking)
   Ported from the landing page: BOOKING WIDGET + ERSTGESPRAECH CARD
   blocks, the (hover:none) resets that touch them and the .btn rules the
   card needs. Palette + fonts are declared on .su-booking so the widget
   renders identically on the canvas and inside an Avada page.
   ============================================================ */

.su-booking{
  --ink:#0e0e15;
  --surface:#1e1f2e;
  --surface-2:#282a3c;
  --line:#343751;
  --paper:#f7f8fc;
  --white:#ffffff;
  --aqua:#8355f4;
  --aqua-soft:#7845ee;
  --purple:#8355f4;
  --lavender:#dab4ff;
  --lavender-soft:#f3e8ff;
  --blue:#639af9;
  --dim:#a7abc4;
  --dim-2:#8b91b0;
  --ink-dim:#5a5f78;
  --line-i:#6a7094;
  --disp:Mulish,"Segoe UI",Arial,sans-serif;
  --ui:Inter,"Segoe UI",Arial,sans-serif;
  font:400 17px/1.65 var(--ui);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* ---- resets so Avada/theme styles do not leak into the card ---- */
.su-booking,.su-booking *,.su-booking *::before,.su-booking *::after{box-sizing:border-box}
.su-booking p{margin:0;padding:0}
.su-booking h3{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0;padding:0;text-wrap:balance}
.su-booking fieldset{min-width:0;border:0;margin:0;padding:0}
.su-booking legend{padding:0}
.su-booking ul{margin:0;padding:0}
.su-booking a{color:var(--lavender)}
.su-booking button{font-family:inherit;text-transform:none;letter-spacing:normal;box-shadow:none;line-height:normal}
.su-booking input,.su-booking select,.su-booking textarea{font-family:inherit;margin:0;box-shadow:none;line-height:normal}
.su-booking :focus-visible{outline:2px solid var(--aqua);outline-offset:3px}
.su-booking .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.su-booking .lead{font-size:clamp(17px,1.9vw,20px);line-height:1.55;color:var(--dim);max-width:58ch;margin-top:18px}
.su-booking .bk-done .lead{margin-inline:auto}

/* honeypot (never visible, never focusable) */
.su-booking .su-hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}

/* Turnstile container */
.su-booking .su-turnstile{margin:22px 0 0;min-height:65px}
.su-booking .su-turnstile:empty{min-height:0;margin:0}

/* ============ BUTTONS (subset the card needs) ============ */
.su-booking .btn{
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none;
  font:600 15px var(--ui);letter-spacing:.005em;padding:14px 24px;border-radius:99px;
  /* Verlauf wie die Buttons auf liftcreative.de: 96 Grad, awb-color6 ->
     awb-color3 (Lavendel -> Markenviolett). Die Beschriftung steht dunkel
     darauf, wie dort auch – auf dem hellen Verlauf traegt weisse Schrift
     nicht. */
  background:linear-gradient(96deg,var(--lavender),var(--purple));color:var(--ink);
}
.su-booking .btn:hover{background:linear-gradient(96deg,var(--lavender-soft),#9068f6);color:var(--ink)}
.su-booking .btn.sm{padding:10px 18px;font-size:14px}
.su-booking .btn.ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px var(--line-i)}
.su-booking .btn.ghost:hover{background:rgba(255,255,255,.06);color:var(--white)}

/* ============ BOOKING WIDGET ============ */
/* the booking card needs the wider track: calendar + slots sit side by side */
.su-booking .booking{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:start}
.su-booking .booking>*{min-width:0}
@media (max-width:900px){.su-booking .booking{grid-template-columns:1fr}}

/* card + progress -- liftneue booking structure, page palette.
   aqua is the selected/primary state here, same as every other CTA on the page. */
.su-booking .bk-card{
  --c-acc:var(--aqua); --c-soft:rgba(131,85,244,.16); --c-field:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9)}
.su-booking .bk-progress{height:5px;background:rgba(255,255,255,.09);border-radius:99px;margin:22px clamp(20px,3vw,30px) 0}
.su-booking .bk-progress__meter{height:100%;background:var(--c-acc);border-radius:99px;
  transition:width .45s cubic-bezier(.22,.61,.36,1)}
.su-booking .bk-progress__meter span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.su-booking .bk-step{padding:clamp(22px,3vw,32px)}
.su-booking .bk-step[hidden]{display:none!important}
.su-booking .bk-steplabel{font:600 12.5px var(--ui);letter-spacing:.15em;text-transform:uppercase;color:var(--dim-2);margin:0 0 6px}
.su-booking .bk-title{font-size:clamp(23px,3vw,32px);color:var(--white);margin:0 0 22px;letter-spacing:-.025em}
/* the step heading gets programmatic focus – keep the keyboard outline (WCAG 2.4.7) */
.su-booking .bk-title:focus:not(:focus-visible){outline:none}

/* radios */
.su-booking .bk-radios,.su-booking .bk-pref{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.su-booking .bk-pref{flex-direction:row;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.su-booking .bk-pref legend{font:600 13px var(--ui);color:var(--white);padding:0;margin-bottom:10px;float:left;width:100%}
.su-booking .bk-radios label{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;border:1.5px solid var(--line-i);
  border-radius:13px;padding:14px 17px;font:500 15px var(--ui);color:var(--dim);margin:0;text-transform:none}
.su-booking .bk-pref label{display:flex;align-items:center;justify-content:center;cursor:pointer;flex:1 1 140px;
  border:1.5px solid var(--line-i);border-radius:12px;padding:13px 16px;font:600 14.5px var(--ui);color:var(--dim);margin:0;position:relative;text-transform:none}
/* Der Abstand zum Text haengt am Icon, nicht am gap der Flexbox: weiter unten
   holt ".su-booking .bk-card label" die Labels auf display:block zurueck (gleiche
   Spezifitaet, spaetere Zeile), und im Markup steht zwischen </svg> und <span>
   kein Leerzeichen. Ein Rand wirkt so oder so – auch wenn ein fremdes Theme die
   Flexbox kippt. vertical-align richtet das Icon im Fliesstext aus. */
.su-booking .bk-pref label svg{width:17px;height:17px;flex:0 0 auto;color:var(--lavender);
  margin-right:9px;vertical-align:-3px}
.su-booking .bk-radios label:hover,.su-booking .bk-pref label:hover{border-color:var(--dim-2);color:var(--white)}
.su-booking .bk-radios input,.su-booking .bk-pref input{accent-color:var(--c-acc);width:18px;height:18px;flex:0 0 auto;margin:0}
/* The radio dot is hidden: the card itself is the control, and its selected
   state is carried by the border and fill below. The input stays in the DOM so
   the group keeps its semantics and arrow-key navigation. */
.su-booking .bk-radios input,.su-booking .bk-pref input{position:absolute;opacity:0;pointer-events:none}
/* the visible focus ring has to move to the label text, since the input is invisible */
.su-booking .bk-radios input:focus-visible+span,.su-booking .bk-pref input:focus-visible+span{
  outline:2px solid var(--lavender);outline-offset:3px;border-radius:5px}
.su-booking .bk-hint{font:400 13.5px/1.5 var(--ui);color:var(--dim-2);margin:16px 0 0}
.su-booking .bk-radios label:has(input:checked),.su-booking .bk-pref label:has(input:checked){
  border-color:var(--c-acc);background:var(--c-soft);color:var(--white)}
/* Schritt 1 erlaubt mehrere Antworten. Ohne sichtbares Kaestchen liest sich eine
   Karte wie eine Entweder-oder-Wahl, deshalb traegt jede Option ein eigenes
   Haekchenfeld. Gezeichnet wird es am <span>, weil der echte Input unsichtbar
   ist (er bleibt im DOM und damit bedienbar). */
.su-booking .bk-checks label span{display:flex;align-items:center;gap:13px}
.su-booking .bk-checks label span::before{content:"";width:21px;height:21px;flex:0 0 auto;
  border:1.5px solid var(--line-i);border-radius:6px;background:transparent;
  background-position:center;background-repeat:no-repeat;background-size:13px 13px}
.su-booking .bk-checks input:checked+span::before{border-color:var(--c-acc);background-color:var(--c-acc);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.4 3.4L13 5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:no-preference){
  .su-booking .bk-checks label span::before{transition:background-color .15s ease,border-color .15s ease}
}
.su-booking .bk-pref label:has(input:focus-visible){outline:2px solid var(--aqua);outline-offset:3px}

/* meeting type */
.su-booking .bk-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:24px}
.su-booking .bk-chip{display:inline-flex;align-items:center;font:600 13px var(--ui);color:var(--dim);
  background:rgba(255,255,255,.06);border:0;border-radius:99px;padding:10px 17px}
.su-booking .bk-mtype{display:inline-flex;border:1.5px solid var(--line-i);border-radius:99px;padding:4px;gap:3px;flex-wrap:wrap}
.su-booking .bk-mtype button{border:0;background:none;font:600 13.5px var(--ui);padding:9px 17px;border-radius:99px;
  cursor:pointer;color:var(--dim-2);margin:0}
.su-booking .bk-mtype button:hover{color:var(--white);background:none}
.su-booking .bk-mtype button.on{background:var(--c-acc);color:#fff;box-shadow:0 0 0 2px rgba(131,85,244,.4)}

/* calendar */
.su-booking .bk-schedule{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}
.su-booking .cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.su-booking .cal__month{font:700 17px var(--disp);color:var(--white)}
.su-booking .cal__nav{display:flex;gap:7px}
.su-booking .cal__nav button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line-i);background:transparent;
  cursor:pointer;font-size:16px;color:var(--dim-2);line-height:1;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center}
.su-booking .cal__nav button:hover:not([disabled]){border-color:var(--lavender);color:var(--lavender);background:transparent}
.su-booking .cal__nav button[disabled]{opacity:.4;cursor:default}
.su-booking .cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;transition:opacity .2s}
.su-booking .cal__grid.is-loading{opacity:.45;pointer-events:none}
.su-booking .cal__dow{font:600 12px var(--ui);color:var(--dim-2);text-align:center;padding:8px 0 4px}
.su-booking .cal__day{aspect-ratio:1;border:0;background:none;border-radius:50%;font:500 14.5px var(--ui);
  cursor:pointer;color:var(--dim-2);position:relative;min-height:36px;padding:0;margin:0;width:100%}
.su-booking .cal__day:hover:not([disabled]){background:var(--c-soft);color:var(--white)}
.su-booking .cal__day[disabled]{color:#616780;cursor:default}
.su-booking .cal__day.free{font-weight:700;color:var(--white)}
.su-booking .cal__day.free::after{content:"";position:absolute;bottom:5px;left:50%;translate:-50% 0;width:4px;height:4px;
  border-radius:50%;background:var(--c-acc)}
.su-booking .cal__day.on{background:var(--c-acc);color:#fff}
.su-booking .cal__day.on::after{background:#fff}
.su-booking .slots__label{font:700 14.5px var(--disp);color:var(--white);margin:0 0 12px}
.su-booking .slots{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-height:272px;overflow:auto}
.su-booking .slots[hidden]{display:none}
.su-booking .slot{border:1.5px solid var(--line-i);border-radius:10px;padding:11px 8px;background:transparent;cursor:pointer;
  font:600 14.5px var(--ui);color:var(--dim);text-align:center;margin:0}
.su-booking .slot:hover{border-color:var(--c-acc);color:var(--white);background:transparent}
.su-booking .slot.on{background:var(--c-acc);border-color:var(--c-acc);color:#fff}
.su-booking .slots__empty{color:var(--dim-2);font:400 14.5px/1.55 var(--ui);margin:0}
.su-booking .slots__empty[hidden]{display:none}
.su-booking .bk-tz{font:400 13px var(--ui);color:var(--dim-2);margin:16px 0 0}

/* step 3 fields */
.su-booking .bk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:16px}
.su-booking .bk-card .f{margin:0 0 16px}
.su-booking .bk-card label{display:block;font:600 13.5px var(--ui);letter-spacing:0;text-transform:none;
  color:var(--white);margin:0 0 7px}
.su-booking .bk-card label em{font-style:normal;color:var(--dim-2);font-weight:500}
.su-booking .bk-card input[type=text],.su-booking .bk-card input[type=email],.su-booking .bk-card input[type=tel],.su-booking .bk-card textarea{
  width:100%;background:var(--c-field);border:1.5px solid var(--line-i);border-radius:11px;color:var(--white);
  font:400 16px var(--ui);padding:14px 16px;height:auto;min-height:0}
.su-booking .bk-card select{width:100%;background:var(--c-field);border:1.5px solid var(--line-i);border-radius:11px;
  color:var(--white);font:400 16px var(--ui);padding:14px 40px 14px 16px;appearance:none;-webkit-appearance:none;height:auto;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238b91b0' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px}
.su-booking .bk-card select option{color:var(--white);background:var(--ink)}
.su-booking .bk-card textarea{resize:vertical;min-height:104px}
.su-booking .bk-card input::placeholder,.su-booking .bk-card textarea::placeholder{color:#73799c;opacity:1}
.su-booking .bk-card input:focus,.su-booking .bk-card select:focus,.su-booking .bk-card textarea:focus{outline:none;border-color:var(--c-acc);box-shadow:none}
.su-booking .bk-card input:user-invalid,.su-booking .bk-card select:user-invalid{border-color:#e08a8a}
.su-booking .bk-accept{display:flex!important;align-items:flex-start;gap:11px;margin:22px 0 0;
  font:400 13.5px/1.55 var(--ui)!important;color:var(--dim)!important;text-transform:none!important}
.su-booking .bk-accept a{color:var(--lavender);text-underline-offset:2px}
.su-booking .bk-accept input{width:18px;height:18px;margin-top:1px;flex:0 0 auto;accent-color:var(--c-acc)}
.su-booking .bk-summary{background:var(--c-soft);border:1.5px solid var(--c-acc);border-radius:12px;
  padding:13px 16px;font:600 14.5px/1.5 var(--ui);color:var(--white);margin:0 0 22px}
.su-booking .bk-summary:empty{display:none}
.su-booking .bk-err{font:500 13.5px var(--ui);color:#ffa3a3;margin:16px 0 0}
.su-booking .bk-err[hidden]{display:none}
.su-booking .bk-retry{display:inline-block;margin-left:2px;padding:0;border:0;background:none;cursor:pointer;
  font:600 13.5px var(--ui);color:var(--lavender);text-decoration:underline}
.su-booking .bk-retry:hover{color:var(--white)}
.su-booking .bk-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:30px;flex-wrap:wrap}
.su-booking .bk-nav .btn{padding:16px 38px;font:700 15.5px var(--ui);border-radius:99px;min-width:170px;justify-content:center}
.su-booking .bk-nav .btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.su-booking .bk-nav .btn.is-sending{opacity:.7;cursor:progress}
.su-booking .bk-back{background:none;border:0;cursor:pointer;color:var(--dim-2);font:500 14.5px var(--ui);padding:12px 4px;margin:0}
.su-booking .bk-back:hover{color:var(--white);background:none}
.su-booking .bk-done{text-align:center}
.su-booking .bk-done:focus:not(:focus-visible){outline:none}
.su-booking .bk-tick{width:56px;height:56px;margin:6px auto 18px;border-radius:50%;background:var(--c-soft);
  color:var(--lavender);font-size:27px;display:grid;place-items:center}

@media (max-width:760px){
  .su-booking .bk-schedule{grid-template-columns:1fr;gap:22px}
  .su-booking .slots{max-height:200px;grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
  .su-booking .bk-nav .btn{flex:1;min-width:0}
}

/* ============ ERSTGESPRAECH CARD ============ */
.su-booking .expect{background:var(--surface);border:1px solid rgba(218,180,255,.3);border-radius:14px;padding:24px}
.su-booking .expect ul{list-style:none;margin:0;padding:0}
.su-booking .expect li{position:relative;padding:0 0 15px 32px;margin-bottom:15px;border-bottom:1px solid var(--line);list-style:none}
.su-booking .expect li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.su-booking .expect li::before{content:"\2713";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  background:rgba(131,85,244,.14);color:var(--lavender);font:600 11px var(--ui);display:grid;place-items:center}
.su-booking .expect b{display:block;font:700 15.5px var(--disp);color:var(--white);margin-bottom:4px}
.su-booking .expect span{display:block;font:400 14px/1.55 var(--ui);color:var(--dim)}

/* ============ TIPPZIELE AM TELEFON ============
   Gemessen bei 320-414px: Kalendertage und Gespraechsart lagen bei 36px bzw.
   34px. Mit dem Finger trifft man das nur mit Glueck, also waechst hier alles
   Antippbare auf 44px. Der Kalender bekommt den Platz aus schmalerem
   Innenabstand und kleineren Luecken. */
@media (pointer:coarse),(max-width:760px){
  .su-booking .bk-mtype button{padding:12px 18px;min-height:44px}
  .su-booking .cal__nav button{width:44px;height:44px}
  .su-booking .slot{padding:13px 8px;min-height:44px}
  .su-booking .bk-accept input[type=checkbox]{width:22px;height:22px}
  .su-booking .bk-nav .btn{min-height:48px}
  /* liegt im Fehlersatz des Kalenders und war nur 16px hoch */
  .su-booking .bk-retry{min-height:44px;display:inline-flex;align-items:center;padding:0 4px}
}
@media (max-width:420px){
  .su-booking .bk-step{padding:20px 15px}
  .su-booking .cal__grid{gap:3px}
  /* schmaler als 44px waere das Quadrat hier ohnehin – also hoch statt rund */
  .su-booking .cal__day{aspect-ratio:auto;min-height:44px;border-radius:12px}
}

/* touch devices keep :hover applied after a tap - cards would stay "selected" */
@media (hover:none){
  .su-booking .btn:hover{transform:none}
  .su-booking .slot:hover,.su-booking .cal__day:hover:not([disabled]){border-color:var(--line-i);background:none;color:var(--dim)}
  .su-booking .cal__day.on:hover{background:var(--c-acc);color:#fff}
  .su-booking .slot.on:hover{background:var(--c-acc);border-color:var(--c-acc);color:#fff}
  .su-booking .bk-mtype button:hover{background:transparent;color:var(--dim-2)}
  .su-booking .bk-mtype button.on:hover{background:var(--c-acc);color:#fff}
  .su-booking .bk-radios label:hover,.su-booking .bk-pref label:hover{border-color:var(--line-i)}
}

@media (prefers-reduced-motion:reduce){
  .su-booking .bk-progress__meter,.su-booking .cal__grid{transition:none}
}