/* SARAVUE v10 · Buchen (buchen/index.html + assets/booking.js)
   App-Fluss wie Variante 4: Flow-Kopf Zurück · Schritt · Abbrechen, Fortschritt in Ambrosia, eine Aufgabe pro Schritt,
   Liste statt Karten, unten Summe links und genau eine Aktion rechts (Desktop: Panel rechts).
   Baut auf base.css (.opts .ex .chip .slots .cart .bar .sheet …). Keine gestrichelten Linien, keine Texturen. */

.bkflow .app-main>*+*{margin-top:var(--ma-4)}
.bkflow .app-main>.steps{margin-top:var(--ma-2);margin-bottom:0}
.bkflow .app-main>h1{margin-top:var(--ma-4);font-size:clamp(2rem,1.7rem + 1.2vw,2.5rem)}
.bkflow .pane{display:grid;gap:var(--ma-4)}
.bkflow .pane>*{min-width:0}

/* ---------- Flow-Kopf (in #app gerendert): mobil klebt er oben und ersetzt den App-Kopf ---------- */
#app>.flowhead{margin:calc(var(--ma-4) * -1) calc(var(--gutter) * -1) 0;padding-inline:calc(var(--gutter) - 6px);view-transition-name:sv-flowhead;box-shadow:0 1px 0 transparent;transition:box-shadow var(--dur-2) var(--ease)}
#app>.flowhead.scrolled{box-shadow:0 1px 0 var(--hair)}
.flowhead .back{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flowhead .iconbtn{color:var(--rauch)}
::view-transition-group(sv-flowhead),::view-transition-group(sv-bar){animation:none}
.bkflow .bar{view-transition-name:sv-bar}
@media (min-width:1024px){
  #app>.flowhead{position:static;margin:0 0 var(--ma-2);padding:0;height:auto;min-height:var(--tap);background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  #app>.flowhead{display:flex;justify-content:space-between;align-items:center}
  #app>.flowhead .step-l{display:none}
  .bkflow .app-main{padding-top:var(--ma-5)}
}

/* ---------- Fortschritt ---------- */
.bkflow .steps{gap:6px}
.bkflow .steps .segs>*{cursor:default}

/* ---------- Hinweise oben ---------- */
.refnote{min-height:var(--tap);gap:8px}
.refnote .ic{width:18px;height:18px;color:var(--moos)}
.refnote span{color:var(--tusche)}
.preset{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.preset .textlink{min-height:var(--tap)}

/* ---------- Schritt 1: Leistung (Liste, gewählt = Ambrosia über die volle Breite) ---------- */
.bkflow .opt .pr .alt{display:block;text-align:right;font:400 14px/1.3 var(--f-sans);color:var(--rauch);margin-top:3px}
.bkflow .opt[aria-checked="true"] .pr .alt{color:var(--tusche)}
.bkflow .opt .mt .tag{color:var(--wald)}

/* ---------- Schritt 2: Extras & Angaben ---------- */
.bk-card{display:grid;gap:4px}
.bk-h{font:600 var(--fs-t3)/1.3 var(--f-sans);letter-spacing:-.005em}
.xs{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--hair)}
.bk-card>.bk-h+.xs{border-top:0}
.xs-h{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:var(--tap)}
.xs-h .textlink{min-height:var(--tap)}
.xs .shades{gap:8px}
.xs .shades .chip{min-width:88px}
.xs .ex{padding:12px 0}
.xs .ex:first-of-type{border-top:0}
.xs .radios .radio{background:var(--papier-3)}
.xs-h .label{font-weight:600;color:var(--tusche);font-size:15px}
.xs .radio small{font-size:var(--fs-micro)}
.bk-sec{display:grid;gap:var(--ma-3)}
.bk-sec>.bk-h{margin-top:var(--ma-3)}
.bk-sec .hint small{display:block;margin-top:2px}
.q .seg>button{min-height:var(--tap);min-width:72px}
.none-btn{min-height:var(--tap)}

/* ---------- Schritt 3: Termin ---------- */
#t-days,#t-load{display:grid;gap:0}
#t-days .slots-l,#t-load .slots-l{margin-top:0}
.chip.day.more{gap:5px}

.t-day{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-top:var(--ma-2)}
.t-pick{padding:var(--ma-4);border-radius:var(--r-2);background:var(--papier-2);text-align:center}
.bkflow .cal .g button{min-height:44px}
.bkflow .state h2{font:600 var(--fs-t3)/1.3 var(--f-sans)}
.bkflow .sk-flex{margin-bottom:var(--ma-2)}

/* ---------- Schritt 4: Kasse ---------- */
.cart .host{padding:4px 0 16px;border-bottom:1px solid var(--hair);align-items:start}
.cart .host .who{gap:2px}
.cart .host .note{color:var(--rauch);font-size:15px;line-height:1.4}
.cart .curline{padding-inline:0}
.cart .ln .ed{min-height:var(--tap);min-width:var(--tap)}
.cart .ln .v+.ed{grid-column:2;justify-self:end;margin-top:-6px}
.cart .ln .k+.ed{grid-column:2;grid-row:1;align-self:center;justify-self:end}
.cart .ln.quiet .s{line-height:1.5}
.bk-login{padding:0}
.bkflow .model .top2{align-items:start}
.bkflow .policy span{color:var(--rauch)}

/* ---------- Sticky-CTA: Summe links („Noch nichts gewählt“ solange leer), eine Aktion rechts ---------- */
.bar .bar-t{min-width:0}
.bar .in{width:100%}
.bar p{margin:0}
.bar .l1{color:var(--tusche)}
/* Kasse: Summe oben, der verbindliche Knopf „Zahlungspflichtig buchen“ volle Breite darunter (auch bei 320 px einzeilig) */
.bar.stack .in{grid-template-columns:minmax(0,1fr);row-gap:10px}
.bar.stack .bar-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bar.stack .btn{width:100%}
.bar.stack .lbl-l{display:inline}.bar.stack .lbl-s{display:none}

/* ---------- Desktop-Panel (≥ 1024 px): Auswahl + Summe + Hauptaktion rechts ---------- */
.bk-aside{align-content:start;gap:var(--ma-4)}
@media (min-width:1024px){.bk-aside{display:grid}}
.bk-sum{display:grid;gap:var(--ma-3)}
.bk-sum .host b{font:600 17px/1.3 var(--f-sans)}
.bk-lines{display:grid;border-top:1px solid var(--hair)}
.bk-lines .ln{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:15px}
.bk-lines .ln .v{font:600 15px/1.35 var(--f-sans);white-space:nowrap}
.bk-lines .ln.minus .v{color:var(--moos)}
.bk-lines .ln.when .k{color:var(--rauch)}
@media (min-width:1024px){
  body.bkflow.has-aside .bar{margin-top:0;padding-top:var(--ma-3);box-shadow:inset 0 1px 0 var(--hair)}
  body.bkflow.has-aside .bar .l1{white-space:normal}
  body.bkflow.has-aside .bar.stack .bar-t{display:grid}
  body.bkflow.has-aside .bar .tot .alt{text-align:left}
  body.bkflow.has-aside .bar.stack .in{grid-template-columns:1fr}
  body.bkflow.has-aside .bar.stack .tot{grid-column:1;grid-row:auto}
  body.bkflow.has-aside .bar.stack .btn{grid-row:auto}
}

/* ---------- Sheet „Code oder Guthaben“ ---------- */
#sh-code .refin{padding:0}
#sh-code .refin input{min-height:var(--field-h)}
#sh-code .refmsg{padding:6px 0 0;min-height:0}
#sh-code .group .row{padding-inline:0}

/* ---------- Erfolg ---------- */
.bkflow .success{gap:var(--ma-4);padding-bottom:var(--ma-4)}
.bkflow .success .label{margin-top:var(--ma-2)}
.success .ok-hint ul{margin:0;padding-left:18px;display:grid;gap:4px}
.success .ok-box{margin-top:var(--ma-2)}
.success .ok-sec .label{font-weight:600;color:var(--tusche);font-size:16px}
.success .ok-sec{display:grid;gap:10px;width:100%;text-align:left}
.success .acts .btn .ic{width:19px;height:19px}
.success .cal-links{display:grid;gap:8px;text-align:left}
.success .cal-links .cl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.success .acct-hint .btn{margin-top:4px}
.success>.textlink{min-height:var(--tap);display:inline-flex;align-items:center}
.ok-box .av-s{background:var(--papier-3);color:var(--tusche)}

/* v11 F2: Warteliste (Textlink unter der Tagesleiste, Sheet #sh-waitlist aus assets/waitlist.js) · v11 F1: WhatsApp-Frage auf der Erfolgsseite */
.wl-link{margin:4px 0 0}
.bkflow .state .textlink{justify-self:center}
.wl-sheet .sheet-body{display:grid;gap:18px}
.wl-sheet fieldset.wl-grp{border:0;margin:0;padding:0;min-width:0}
.wl-sheet .wl-grp{display:grid;gap:8px}
.wl-sheet .wl-l{font:500 14px/1.3 var(--f-sans);color:var(--tusche);padding:0;margin:0}
.wl-sheet .wl-for{margin:0}
.wl-sheet .wl-dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.wl-sheet .wl-days{display:flex;flex-wrap:wrap;gap:8px}
.wl-sheet .check.wl-day{grid-template-columns:20px auto;padding:10px 12px;gap:8px;min-width:0}
.wl-sheet .msg{display:flex;gap:6px;align-items:flex-start;font-size:var(--fs-micro);color:var(--rost);margin:0}
.wl-sheet .msg[hidden],.wl-sheet .hint[hidden]{display:none}
.wl-sheet .wl-grp.bad .seg,.wl-sheet .wl-grp.bad .wl-days{box-shadow:inset 3px 0 0 var(--rost);padding-left:6px}
.wl-sheet .wl-ok{gap:6px}
.wl-sheet .seg>button,.wl-sheet .seg>label{flex:1 1 0;min-width:0;padding:6px 8px;white-space:normal;text-align:center;line-height:1.2}
.success .wa-q{margin:0;text-align:left}
/* v11 F2 Ende */

/* v13 A · Buchungsfluss: „Wie letztes Mal“, Stammkundinnen-Check, Gesundheit einmal, Allergietest-Termin, Model-Zeiten (assets/booking.js) */
.last-card{display:grid;gap:6px;padding:16px 18px;border-radius:16px;background:var(--gruen);color:var(--tusche)}
.last-card .bk-h{font-size:15px;color:var(--wald)}
.last-card .last-t{font:600 var(--fs-t3)/1.3 var(--f-sans);margin:0}
.last-card .note{color:var(--tusche);margin:0}
.last-card .group{margin:6px 0 2px;border-radius:12px;background:var(--papier-3);overflow:hidden}
.last-card .group .row{padding-inline:14px}
.last-card .btn{justify-self:start;min-height:var(--tap)}
.ret-check{padding:14px 16px;border-radius:14px;background:var(--papier-2)}
.ret-check .inline-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:0}
.ret-check .inline-field input{min-height:var(--field-h);min-width:0}
.ret-check .note{margin:0}
#ret-check .btn{justify-self:start;margin-top:6px;min-height:var(--tap)}
.pt-only{margin:0}
.pt-only .textlink{min-height:var(--tap);text-align:left}
.last-add{display:flex;flex-wrap:wrap;gap:0 8px;align-items:center;padding:6px 0 0;margin:0}
.last-add .textlink{min-height:var(--tap)}
.prof .row{padding-inline:0}
.prof .row .textlink{min-height:var(--tap);min-width:var(--tap)}
.bk-sec .textlink[data-logout]{min-height:var(--tap)}
.hsnap{padding:14px 16px;border-radius:14px;background:var(--gruen);color:var(--tusche)}
.hsnap p{margin:0}
.hsnap .note{color:var(--tusche);margin-top:4px}
.hbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px}
.hbtns .btn{min-height:48px}
.qhead .textlink{min-height:var(--tap)}
.check.hkeep span{font-size:15px}
.carry{margin:0}
.mt-seg{display:grid;gap:6px}
.mt-seg .seg>button{white-space:normal;line-height:1.2;min-height:var(--tap)}
.mt-seg .note{margin:0}
.pt-sec{gap:var(--ma-2)}
.pt-sec>.bk-h,.pt-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0}
.pt-sec>.bk-h .note{font-weight:400;font-size:15px}
.pt-main{margin-top:var(--ma-3)}
.pt-strip{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;padding:10px 14px;border-radius:12px;background:var(--gruen);font-weight:500}
.pt-strip span{display:inline-flex;align-items:center;gap:8px}
.pt-strip .ic{width:18px;height:18px;color:var(--wald)}
.pt-strip .textlink{min-height:var(--tap)}
#m-card>.btn{justify-self:start;min-height:var(--tap)}
/* /v13 A */
/* v15 (X1, L1 #9): Klartext-Titel, Markenname klein darunter */
.opt .nm-b{display:block;margin-top:2px;font:400 13.5px/1.3 var(--f-sans);color:var(--rauch)}
.opt[aria-checked="true"] .nm-b{color:var(--tusche)}