/* Friseur und Kosmetik (zfk): Studio Mara · Haar & Kosmetik, Altrosa #9C5B6B. {n} = n Einheiten der Kartenbreite.
   HERO und B2 = was die Kundin sieht (hell, Buchungsseite nach talqio buchen.css), B1 und B3 = Dashboard (dunkel, Kalender nach talqio konto.css .wk/.ev) */
.zfk-hero,.zfk-b2{--k:#9C5B6B;--kh:#874B5A;--kt:#F7EFF1}
.zfk-hero svg,.zfk-b1 svg,.zfk-b2 svg,.zfk-b3 svg{display:block;flex:none}

/* ---------- HERO: iPhone, 390 × 844 Einheiten, oben 58 frei (Statusleiste), unten 30 (Home-Balken) ---------- */
.zfk-hero{display:flex;flex-direction:column;padding-top:calc(58 * var(--e));background:#FFFFFF;font-size:calc(15 * var(--e));line-height:1.45;color:#2B2A28}
.zfk-kopf{flex:none;display:flex;align-items:center;justify-content:space-between;height:calc(56 * var(--e));padding:0 calc(20 * var(--e));border-bottom:1px solid rgba(11,11,12,.08)}
.zfk-logo{display:flex;flex-direction:column;gap:calc(4 * var(--e))}
.zfk-logo b{font:600 calc(15 * var(--e))/1 var(--display);font-stretch:120%;letter-spacing:.2em;color:#0B0B0C}
.zfk-logo small{font-size:calc(9.5 * var(--e));font-weight:600;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--k)}
.zfk-menu{display:grid;place-content:center;gap:calc(5 * var(--e));width:calc(40 * var(--e));height:calc(40 * var(--e));border-radius:50%;box-shadow:inset 0 0 0 1px rgba(11,11,12,.12)}
.zfk-menu i{display:block;width:calc(16 * var(--e));height:calc(1.8 * var(--e));border-radius:2px;background:#0B0B0C}
/* Schritte oben: Leistung, Mitarbeiterin, Uhrzeit */
.zfk-step{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(6 * var(--e));padding:calc(16 * var(--e)) calc(20 * var(--e)) calc(2 * var(--e))}
.zfk-st{display:flex;flex-direction:column;gap:calc(8 * var(--e));font-size:calc(12.5 * var(--e));font-weight:600;line-height:1.2;color:#8F8D87;white-space:nowrap;transition:color .3s ease}
.zfk-st i{display:block;height:calc(4 * var(--e));border-radius:999px;background:rgba(11,11,12,.08);transition:background .35s ease}
.zfk-st.da{color:#5F5D58}
.zfk-st.da i,.zfk-st.jetzt i{background:var(--k)}
.zfk-st.jetzt{color:var(--k)}
/* Drei Schritte nebeneinander, der Zug schiebt weiter */
.zfk-fenster{position:relative;flex:1;min-height:0;overflow:hidden}
.zfk-zug{display:flex;width:300%;height:100%;transition:transform .55s var(--ease)}
.zfk-zug[data-s="2"]{transform:translateX(-33.3333%)}
.zfk-zug[data-s="3"]{transform:translateX(-66.6667%)}
.zfk-sz{flex:none;width:33.3333%;padding:calc(20 * var(--e)) calc(20 * var(--e)) 0}
.zfk-h{font:650 calc(25 * var(--e))/1.15 var(--display);letter-spacing:-.02em;color:#0B0B0C}
.zfk-u{margin-top:calc(6 * var(--e));font-size:calc(14 * var(--e));line-height:1.45;color:#5F5D58}
.zfk-u b{font-weight:600;color:var(--k)}
.zfk-gr{margin:calc(20 * var(--e)) 0 calc(9 * var(--e));font-size:calc(11.5 * var(--e));font-weight:600;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:#8F8D87}
.zfk-opts{display:grid;gap:calc(8 * var(--e))}
.zfk-eins{margin-top:calc(20 * var(--e))}
.zfk-opt{display:flex;align-items:center;gap:calc(13 * var(--e));min-height:calc(62 * var(--e));padding:calc(10 * var(--e)) calc(16 * var(--e));border-radius:calc(14 * var(--e));background:#F7F6F4;box-shadow:inset 0 0 0 1px rgba(11,11,12,.1);transition:box-shadow .15s ease,background .15s ease}
.zfk-opt>i{position:relative;flex:none;width:calc(22 * var(--e));height:calc(22 * var(--e));border-radius:calc(6 * var(--e));box-shadow:inset 0 0 0 1.5px rgba(11,11,12,.22);transition:background .15s ease}
.zfk-eins .zfk-opt>i{border-radius:50%}
.zfk-opt>span{flex:1;min-width:0}
.zfk-opt b{display:block;font-size:calc(16 * var(--e));font-weight:600;line-height:1.3;color:#0B0B0C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zfk-opt small{display:block;margin-top:calc(2 * var(--e));font-size:calc(13.5 * var(--e));line-height:1.35;color:#6F6D68;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zfk-opt em{flex:none;font-style:normal;font-size:calc(12.5 * var(--e));font-weight:600;color:#6F6D68;white-space:nowrap}
.zfk-opt.on{background:var(--kt);box-shadow:inset 0 0 0 1.5px var(--k)}
.zfk-opt.on>i{background:var(--k);box-shadow:none}
.zfk-opt.on>i::after{content:"";position:absolute;left:calc(8 * var(--e));top:calc(4.5 * var(--e));width:calc(5 * var(--e));height:calc(10 * var(--e));border:solid #fff;border-width:0 calc(2 * var(--e)) calc(2 * var(--e)) 0;transform:rotate(45deg)}
.zfk-eins .zfk-opt.on>i::after{left:calc(7 * var(--e));top:calc(7 * var(--e));width:calc(8 * var(--e));height:calc(8 * var(--e));border:0;border-radius:50%;background:#fff;transform:none}
.zfk-tage{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(6 * var(--e));margin-top:calc(20 * var(--e))}
.zfk-tg{display:flex;flex-direction:column;align-items:center;gap:calc(5 * var(--e));padding:calc(10 * var(--e)) 0 calc(11 * var(--e));border-radius:calc(12 * var(--e));box-shadow:inset 0 0 0 1px rgba(11,11,12,.12)}
.zfk-tg small{font-size:calc(11.5 * var(--e));font-weight:600;line-height:1;letter-spacing:.04em;color:#8F8D87}
.zfk-tg b{font:650 calc(18 * var(--e))/1 var(--display);color:#0B0B0C;font-variant-numeric:tabular-nums}
.zfk-tg.aus{box-shadow:none;background:#F7F6F4}
.zfk-tg.aus b{color:#B4B2AC}
.zfk-tg.on{background:var(--k);box-shadow:none}
.zfk-tg.on small{color:rgba(255,255,255,.78)}
.zfk-tg.on b{color:#fff}
.zfk-dt{margin:calc(22 * var(--e)) 0 0;font-size:calc(14.5 * var(--e));font-weight:600;color:#0B0B0C}
.zfk-dt+.zfk-gr{margin-top:calc(14 * var(--e))}
.zfk-zeiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8 * var(--e))}
.zfk-zeiten span{display:grid;place-items:center;height:calc(48 * var(--e));border-radius:calc(12 * var(--e));font-size:calc(15.5 * var(--e));font-weight:600;color:#0B0B0C;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px rgba(11,11,12,.14);transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.zfk-zeiten .on{background:var(--k);color:#fff;box-shadow:none}
/* Leiste unten: was gewählt ist und der Knopf */
.zfk-fuss{flex:none;display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--e));padding:calc(14 * var(--e)) calc(20 * var(--e)) calc(44 * var(--e));border-top:1px solid rgba(11,11,12,.08);background:#fff}
.zfk-fz{min-width:0}
.zfk-fz small{display:block;font-size:calc(12.5 * var(--e));line-height:1.3;color:#6F6D68;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zfk-fz b{display:block;margin-top:calc(3 * var(--e));font:650 calc(17 * var(--e))/1.2 var(--display);letter-spacing:-.01em;color:#0B0B0C;white-space:nowrap;transition:color .4s ease}
.zfk-fz b.neu{color:var(--k);transition:none}
.zfk-go{flex:none;display:inline-flex;align-items:center;height:calc(50 * var(--e));padding:0 calc(22 * var(--e));border-radius:999px;background:var(--k);color:#fff;font-size:calc(15.5 * var(--e));font-weight:600;transition:opacity .25s ease,transform .14s ease,background .2s ease}
.zfk-go.aus{opacity:.35}
.zfk-go.druck{transform:scale(.94);background:var(--kh)}
/* Bestätigung */
.zfk-fertig{position:absolute;left:0;right:0;top:calc(114 * var(--e));bottom:0;z-index:3;padding:calc(34 * var(--e)) calc(20 * var(--e)) 0;background:#fff;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.zfk-fertig.zeig{opacity:1;visibility:visible;transition:opacity .35s ease}
.zfk-ok{display:grid;place-items:center;width:calc(56 * var(--e));height:calc(56 * var(--e));margin-bottom:calc(18 * var(--e));border-radius:50%;background:var(--k);transform:scale(.5);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.zfk-ok svg{width:calc(26 * var(--e));height:calc(26 * var(--e));fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.zfk-fertig .zfk-h{font-size:calc(28 * var(--e))}
.zfk-p{margin-top:calc(8 * var(--e));font-size:calc(15 * var(--e));line-height:1.5;color:#5F5D58}
.zfk-rows{margin-top:calc(22 * var(--e));border-radius:calc(16 * var(--e));box-shadow:inset 0 0 0 1px rgba(11,11,12,.08);overflow:hidden}
.zfk-rows div{display:grid;grid-template-columns:calc(64 * var(--e)) minmax(0,1fr);gap:calc(10 * var(--e));padding:calc(12 * var(--e)) calc(16 * var(--e));border-top:1px solid rgba(11,11,12,.08);font-size:calc(14.5 * var(--e));line-height:1.4}
.zfk-rows div:first-child{border-top:0}
.zfk-rows span{color:#5F5D58}
.zfk-rows b{font-weight:600;color:#0B0B0C}
.zfk-akt{display:grid;gap:calc(10 * var(--e));margin-top:calc(22 * var(--e))}
.zfk-b{display:flex;align-items:center;justify-content:center;height:calc(50 * var(--e));border-radius:999px;background:var(--k);color:#fff;font-size:calc(15.5 * var(--e));font-weight:600}
.zfk-b.g{background:transparent;color:#0B0B0C;box-shadow:inset 0 0 0 1px rgba(11,11,12,.14)}
.zfk-fertig>*:not(.zfk-ok){opacity:0;transform:translateY(calc(8 * var(--e)));transition:opacity .4s ease,transform .55s var(--ease)}
.zfk-fertig.zeig .zfk-ok{transform:none}
.zfk-fertig.zeig>*:not(.zfk-ok){opacity:1;transform:none}
.zfk-fertig.zeig>*:nth-child(2){transition-delay:.1s}.zfk-fertig.zeig>*:nth-child(3){transition-delay:.2s}.zfk-fertig.zeig>*:nth-child(4){transition-delay:.3s}.zfk-fertig.zeig>*:nth-child(5){transition-delay:.42s}
/* Finger statt Mauszeiger */
.zfk-finger{width:calc(38 * var(--e));height:calc(38 * var(--e));margin:calc(-19 * var(--e)) 0 0 calc(-19 * var(--e));transition:transform .5s cubic-bezier(.45,.05,.25,1),opacity .3s ease}
.zfk-finger i{display:block;width:100%;height:100%;border-radius:50%;background:rgba(11,11,12,.2);box-shadow:inset 0 0 0 calc(1.5 * var(--e)) rgba(255,255,255,.6),0 calc(6 * var(--e)) calc(16 * var(--e)) rgba(11,11,12,.22);transition:transform .16s ease,background .16s ease}
.zfk-finger.tipp i{transform:scale(.78);background:rgba(11,11,12,.34)}

/* ---------- B1: Salon-Kalender, Tagesansicht mit einer Spalte pro Mitarbeiterin (talqio .wk, .ev) ---------- */
.fn-app.zfk-b1{--e:calc(100cqw / 640);--std:calc(54 * var(--e));display:flex;flex-direction:column;padding:calc(16 * var(--e)) calc(16 * var(--e)) 0;background:#0B0B0C;color:#D6D4CE}
.zfk-bar{flex:none;display:flex;align-items:center;gap:calc(6 * var(--e));margin-bottom:calc(12 * var(--e))}
.zfk-hb{display:inline-flex;align-items:center;height:calc(28 * var(--e));padding:0 calc(12 * var(--e));border-radius:999px;background:#1C1C1F;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);font-size:calc(10.5 * var(--e));font-weight:500;color:#F4F3F0}
.zfk-pf{display:grid;place-items:center;width:calc(24 * var(--e));height:calc(28 * var(--e));color:#A9A7A1}
.zfk-pf svg{width:calc(13 * var(--e));height:calc(13 * var(--e));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zfk-titel{flex:1;min-width:0;margin-left:calc(4 * var(--e));font:600 calc(15 * var(--e))/1.2 var(--display);letter-spacing:-.01em;color:#F4F3F0;white-space:nowrap}
.zfk-kurz{display:none}
.zfk-pills{margin-right:calc(2 * var(--e))}
.zfk-pills span{height:calc(24 * var(--e));font-size:calc(10 * var(--e))}
.zfk-plus{height:calc(28 * var(--e));padding:0 calc(12 * var(--e));font-size:calc(10.5 * var(--e))}
.zfk-plus svg{width:calc(11 * var(--e));height:calc(11 * var(--e));stroke:currentColor}
.zfk-kal{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#141416;border:1px solid rgba(244,243,240,.09);border-bottom:0;border-radius:calc(12 * var(--e)) calc(12 * var(--e)) 0 0;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - calc(44 * var(--e))),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - calc(44 * var(--e))),transparent)}
.zfk-kk,.zfk-kb{display:grid;grid-template-columns:calc(46 * var(--e)) repeat(3,minmax(0,1fr))}
.zfk-kk{flex:none;border-bottom:1px solid rgba(244,243,240,.09)}
.zfk-wer{display:flex;align-items:baseline;justify-content:center;gap:calc(6 * var(--e));padding:calc(10 * var(--e)) calc(6 * var(--e)) calc(9 * var(--e));min-width:0;white-space:nowrap}
.zfk-wer b{font:600 calc(12.5 * var(--e))/1.2 var(--display);color:#F4F3F0;transition:color .3s ease}
.zfk-wer small{font-size:calc(9.5 * var(--e));color:#6F6D68}
.zfk-wer i{font-style:normal;font-variant-numeric:tabular-nums}
.zfk-b1 .zfk-wer.hl b{color:#FF6A2A}
.zfk-kb{flex:1;padding-top:calc(9 * var(--e))}
.zfk-zt{position:relative}
.zfk-zt span{position:absolute;right:calc(9 * var(--e));top:calc(var(--a) * var(--std) / 60);transform:translateY(-50%);font-size:calc(9.5 * var(--e));font-weight:500;color:#6F6D68;font-variant-numeric:tabular-nums}
.zfk-sp{position:relative;border-left:1px solid rgba(244,243,240,.09);background-image:repeating-linear-gradient(to bottom,rgba(244,243,240,.09) 0 1px,transparent 1px var(--std));transition:background-color .4s ease}
.zfk-b1 .zfk-sp.hl{background-color:rgba(255,72,0,.045)}
.zfk-ev{position:absolute;left:calc(3 * var(--e));right:calc(3 * var(--e));top:calc(var(--a) * var(--std) / 60 + calc(1.5 * var(--e)));height:calc(var(--d) * var(--std) / 60 - calc(3 * var(--e)));padding:calc(5 * var(--e)) calc(7 * var(--e)) calc(5 * var(--e)) calc(9 * var(--e));border-radius:calc(8 * var(--e));overflow:hidden;
  background:color-mix(in srgb,#FF4800 24%,#141416);box-shadow:inset calc(3 * var(--e)) 0 0 #FF4800}
.zfk-ev b{display:block;font-size:calc(10.5 * var(--e));font-weight:600;line-height:1.3;color:#F4F3F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zfk-ev b em{font-style:normal;font-weight:500;color:#FF6A2A;font-variant-numeric:tabular-nums}
.zfk-ev>span{display:block;margin-top:calc(1 * var(--e));font-size:calc(9.5 * var(--e));line-height:1.3;color:rgba(244,243,240,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zfk-ev.eng{display:flex;align-items:center;padding-top:0;padding-bottom:0}
.zfk-aus{position:absolute;left:calc(3 * var(--e));right:calc(3 * var(--e));top:calc(var(--a) * var(--std) / 60 + calc(1.5 * var(--e)));height:calc(var(--d) * var(--std) / 60 - calc(3 * var(--e)));border-radius:calc(8 * var(--e));
  background:repeating-linear-gradient(135deg,rgba(244,243,240,.07) 0 calc(6 * var(--e)),rgba(244,243,240,.025) calc(6 * var(--e)) calc(12 * var(--e)));box-shadow:inset 0 0 0 1px rgba(244,243,240,.09)}
.zfk-aus span{display:block;padding:calc(5 * var(--e)) calc(8 * var(--e));font-size:calc(9.5 * var(--e));font-weight:600;color:#6F6D68}
.zfk-geist{position:absolute;left:calc(3 * var(--e));right:calc(3 * var(--e));top:calc(var(--a) * var(--std) / 60 + calc(1.5 * var(--e)));height:calc(var(--d) * var(--std) / 60 - calc(3 * var(--e)));border-radius:calc(8 * var(--e));
  box-shadow:inset 0 0 0 1.5px rgba(255,106,42,.85);background:rgba(255,72,0,.06);opacity:0;transition:opacity .3s ease}
.zfk-geist.zeig{opacity:1}
.zfk-neu{clip-path:inset(0 0 100% 0 round calc(8 * var(--e)));transition:clip-path .9s var(--ease),box-shadow 1.2s ease}
.zfk-neu.da{clip-path:inset(0 0 0 0 round calc(8 * var(--e)))}
.zfk-neu.frisch{box-shadow:inset calc(3 * var(--e)) 0 0 #FF4800,0 0 0 1.5px rgba(255,106,42,.8),0 0 calc(22 * var(--e)) rgba(255,72,0,.35);transition:clip-path .9s var(--ease),box-shadow .3s ease}
.zfk-ntag{position:absolute;top:calc(5 * var(--e));right:calc(6 * var(--e));font-style:normal;background:rgba(11,11,12,.25)}
.zfk-neu.frisch{background:color-mix(in srgb,#FF4800 34%,#141416)}
.zfk-b1 .d-toast{right:calc(22 * var(--e));bottom:calc(18 * var(--e))}

/* ---------- B2: Erinnerungs-Mail, darüber die Buchungsseite mit allem schon gewählt ---------- */
.fn-app.zfk-b2{--e:calc(100cqw / 440);background:#EDEBE7;color:#2B2A28}
.zfk-mail{position:absolute;left:calc(20 * var(--e));right:calc(20 * var(--e));top:calc(20 * var(--e));padding:calc(16 * var(--e)) calc(18 * var(--e)) calc(18 * var(--e));border-radius:calc(14 * var(--e));background:#FFFFFF;box-shadow:0 0 0 1px rgba(11,11,12,.07),0 calc(2 * var(--e)) calc(6 * var(--e)) rgba(11,11,12,.04)}
.zfk-mk{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(10 * var(--e));padding-bottom:calc(11 * var(--e));border-bottom:1px solid rgba(11,11,12,.08)}
.zfk-mk b{display:block;font-size:calc(11.5 * var(--e));font-weight:600;line-height:1.3;color:#0B0B0C}
.zfk-mk small{display:block;font-size:calc(9.5 * var(--e));line-height:1.35;color:#8F8D87}
.zfk-mk>span{font-size:calc(9.5 * var(--e));color:#8F8D87;font-variant-numeric:tabular-nums}
.zfk-mb{margin-top:calc(12 * var(--e));font:650 calc(17 * var(--e))/1.2 var(--display);letter-spacing:-.015em;color:#0B0B0C}
.zfk-mt{margin-top:calc(6 * var(--e));font-size:calc(10.5 * var(--e));line-height:1.5;color:#5F5D58}
.zfk-mx{display:flex;align-items:baseline;justify-content:space-between;gap:calc(10 * var(--e));margin-top:calc(12 * var(--e));padding:calc(10 * var(--e)) calc(12 * var(--e));border-radius:calc(10 * var(--e));background:#F7F6F4;box-shadow:inset 0 0 0 1px rgba(11,11,12,.08)}
.zfk-mx b{font-size:calc(11 * var(--e));font-weight:600;color:#0B0B0C}
.zfk-mx small{font-size:calc(10 * var(--e));color:#6F6D68;white-space:nowrap}
.zfk-mknopf{display:inline-flex;align-items:center;height:calc(30 * var(--e));margin-top:calc(12 * var(--e));padding:0 calc(16 * var(--e));border-radius:999px;background:var(--k);color:#fff;font-size:calc(10.5 * var(--e));font-weight:600;transition:transform .14s ease,background .2s ease}
.zfk-mknopf.druck{transform:scale(.94);background:var(--kh)}
.zfk-seite{position:absolute;left:calc(34 * var(--e));right:calc(34 * var(--e));top:calc(106 * var(--e));bottom:calc(-12 * var(--e));z-index:2;border-radius:calc(14 * var(--e));background:#FFFFFF;overflow:hidden;
  box-shadow:0 0 0 1px rgba(11,11,12,.08),0 calc(-4 * var(--e)) calc(16 * var(--e)) rgba(11,11,12,.06),0 calc(24 * var(--e)) calc(48 * var(--e)) rgba(11,11,12,.22);transform:translateY(110%);transition:transform .65s var(--ease)}
.zfk-seite.da{transform:none}
.zfk-adr{display:flex;justify-content:center;padding:calc(7 * var(--e)) calc(12 * var(--e));background:#F7F6F4;border-bottom:1px solid rgba(11,11,12,.07)}
.zfk-adr span{padding:calc(3 * var(--e)) calc(12 * var(--e));border-radius:999px;background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(11,11,12,.08);font-size:calc(9 * var(--e));font-weight:500;color:#5F5D58}
.zfk-si{padding:calc(14 * var(--e)) calc(16 * var(--e)) calc(16 * var(--e))}
.zfk-sh{font:650 calc(16 * var(--e))/1.2 var(--display);letter-spacing:-.015em;color:#0B0B0C}
.zfk-chips{display:flex;flex-wrap:wrap;gap:calc(6 * var(--e));margin-top:calc(10 * var(--e))}
.zfk-chips span{display:inline-flex;align-items:center;gap:calc(5 * var(--e));height:calc(24 * var(--e));padding:0 calc(10 * var(--e)) 0 calc(8 * var(--e));border-radius:999px;background:var(--kt);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k) 45%,transparent);font-size:calc(10 * var(--e));font-weight:600;color:#0B0B0C;white-space:nowrap}
.zfk-chips svg,.zfk-sgo svg{width:calc(11 * var(--e));height:calc(11 * var(--e));fill:none;stroke:var(--k);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.zfk-sl{margin:calc(14 * var(--e)) 0 calc(8 * var(--e));font-size:calc(10.5 * var(--e));color:#5F5D58}
.zfk-sl b{font-weight:600;color:#0B0B0C}
.zfk-sz2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(6 * var(--e))}
.zfk-sz2 span{display:grid;place-items:center;height:calc(32 * var(--e));border-radius:calc(9 * var(--e));font-size:calc(11 * var(--e));font-weight:600;color:#0B0B0C;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px rgba(11,11,12,.14);transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.zfk-sz2 .on{background:var(--k);color:#fff;box-shadow:none}
.zfk-sgo{position:relative;display:grid;margin-top:calc(12 * var(--e));height:calc(34 * var(--e));border-radius:999px;background:var(--k);color:#fff;overflow:hidden;transition:opacity .25s ease,transform .14s ease,background .3s ease}
.zfk-sgo b{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--e));font-size:calc(11 * var(--e));font-weight:600;transition:opacity .3s ease,transform .4s var(--ease)}
.zfk-sgo svg{stroke:#fff}
.zfk-sgo-b{opacity:0;transform:translateY(calc(10 * var(--e)))}
.zfk-sgo.aus{opacity:.35}
.zfk-sgo.druck{transform:scale(.96)}
.zfk-sgo.ok{background:var(--kh)}
.zfk-sgo.ok .zfk-sgo-a{opacity:0;transform:translateY(calc(-10 * var(--e)))}
.zfk-sgo.ok .zfk-sgo-b{opacity:1;transform:none}
.zfk-b2 .d-cur.gast span{background:#9C5B6B}

/* ---------- B3: Absage, Warteliste bekommt Bescheid, Lücke ist zu ---------- */
/* Die Karte ist selbst ein Container (Größe), damit quer und quadratisch getrennt aufgebaut werden, egal bei welcher Breite */
.fn-app.zfk-b3{container-type:size;background:#0B0B0C;color:#D6D4CE}
.zfk-b3i{--e:calc(100cqw / 640);position:absolute;inset:0;font-size:calc(11 * var(--e))}
.zfk-tg-box{position:absolute;left:calc(18 * var(--e));top:calc(18 * var(--e));width:calc(54% - calc(24 * var(--e)));bottom:calc(-12 * var(--e));overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - calc(60 * var(--e))),transparent calc(100% - calc(8 * var(--e))));mask-image:linear-gradient(180deg,#000 calc(100% - calc(60 * var(--e))),transparent calc(100% - calc(8 * var(--e))))}
.zfk-wl,.zfk-log{position:absolute;left:calc(54% + calc(6 * var(--e)));right:calc(18 * var(--e));top:calc(18 * var(--e))}
.zfk-log{top:calc(248 * var(--e))}
.zfk-log .zfk-bk{padding-bottom:calc(6 * var(--e))}
.zfk-lg{display:flex;align-items:center;gap:calc(8 * var(--e));padding:calc(5 * var(--e)) calc(14 * var(--e));font-size:calc(9.5 * var(--e));line-height:1.35;color:#D6D4CE;transition:opacity .4s ease}
.zfk-lg:last-child{padding-bottom:calc(11 * var(--e))}
.zfk-lg i{flex:none;width:calc(6 * var(--e));height:calc(6 * var(--e));border-radius:50%;background:#3A3A3F}
.zfk-lg p{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zfk-lg span{flex:none;font-size:calc(9 * var(--e));color:#6F6D68;font-variant-numeric:tabular-nums}
.zfk-lg-neu i{background:#FF4800}
.zfk-lg-neu p{color:#F4F3F0;font-weight:500}
.zfk-lg.weg{opacity:0}
.zfk-bk{display:flex;flex-direction:column;gap:calc(3 * var(--e));padding:calc(12 * var(--e)) calc(14 * var(--e)) calc(11 * var(--e))}
.zfk-bk b{font:600 calc(13.5 * var(--e))/1.2 var(--display);letter-spacing:-.01em;color:#F4F3F0}
.zfk-bk small{font-size:calc(9.5 * var(--e));line-height:1.35;color:#A9A7A1}
.zfk-r,.zfk-w{display:flex;align-items:center;gap:calc(10 * var(--e));min-height:calc(50 * var(--e));padding:calc(7 * var(--e)) calc(14 * var(--e));border-top:1px solid rgba(244,243,240,.09)}
.zfk-r time{flex:none;width:calc(34 * var(--e));font-size:calc(10.5 * var(--e));font-weight:600;color:#A9A7A1;font-variant-numeric:tabular-nums}
.zfk-rm{flex:1;min-width:0}
.zfk-rm b{display:block;font-size:calc(10.5 * var(--e));font-weight:500;line-height:1.35;color:#F4F3F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zfk-rm span{display:block;margin-top:calc(1 * var(--e));font-size:calc(9 * var(--e));line-height:1.4;color:#A9A7A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Die Zeile um 14 Uhr: Carina → frei → Sophie */
.zfk-lu{position:relative;transition:background .4s ease}
.zfk-lv{position:absolute;left:calc(50 * var(--e));right:calc(8 * var(--e));top:calc(5 * var(--e));bottom:calc(5 * var(--e));display:flex;align-items:center;gap:calc(8 * var(--e));padding:0 calc(8 * var(--e));border-radius:calc(8 * var(--e));opacity:0;transition:opacity .22s ease}
.zfk-lu time{position:relative;z-index:1}
.zfk-lu[data-st=alt] .zfk-lv-alt,.zfk-lu[data-st=frei] .zfk-lv-frei,.zfk-lu[data-st=neu] .zfk-lv-neu{opacity:1;transition:opacity .4s ease .2s,box-shadow .6s ease}
.zfk-lv-alt em{flex:none;font-style:normal;font-size:calc(9 * var(--e));font-weight:600;color:#6F6D68}
.zfk-lu.weg .zfk-lv-alt .zfk-rm{opacity:.45}
.zfk-lu.weg .zfk-lv-alt b{text-decoration:line-through;text-decoration-color:rgba(244,243,240,.5)}
.zfk-lv-alt em{opacity:0;transition:opacity .3s ease}
.zfk-lu.weg .zfk-lv-alt em{opacity:1}
.zfk-lv-frei{box-shadow:inset 0 0 0 1.5px rgba(255,106,42,.75);background:repeating-linear-gradient(135deg,rgba(255,72,0,.1) 0 calc(6 * var(--e)),rgba(255,72,0,.03) calc(6 * var(--e)) calc(12 * var(--e)))}
.zfk-lv-frei b{color:#FF6A2A;font-weight:600}
.zfk-lv-neu{background:color-mix(in srgb,#FF4800 24%,#141416);box-shadow:inset calc(3 * var(--e)) 0 0 #FF4800}
.zfk-lv-neu .zfk-rm span{color:rgba(244,243,240,.72)}
.zfk-lu.frisch .zfk-lv-neu{box-shadow:inset calc(3 * var(--e)) 0 0 #FF4800,0 0 0 1.5px rgba(255,106,42,.8),0 0 calc(18 * var(--e)) rgba(255,72,0,.35)}
.zfk-lv .d-tag{flex:none}
/* Warteliste */
.zfk-w{gap:calc(8 * var(--e));min-height:calc(54 * var(--e));transition:background .4s ease}
.zfk-ws{flex:none;display:grid;justify-items:end}
.zfk-ws>*{grid-area:1/1;opacity:0;transform:translateY(calc(4 * var(--e)));transition:opacity .35s ease,transform .45s var(--ease)}
.zfk-ws-a{font-size:calc(9 * var(--e));color:#6F6D68;white-space:nowrap}
.zfk-ws-b{display:inline-flex;align-items:center;gap:calc(4 * var(--e));font-size:calc(9 * var(--e));font-weight:600;color:#F4F3F0;white-space:nowrap}
.zfk-ws-b svg{width:calc(11 * var(--e));height:calc(11 * var(--e));fill:none;stroke:#FF6A2A;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.zfk-ws-c{white-space:nowrap}
span.zfk-ws-c:not(.d-tag){font-size:calc(9 * var(--e));color:#A9A7A1}
.zfk-w[data-st=a] .zfk-ws-a,.zfk-w[data-st=b] .zfk-ws-b,.zfk-w[data-st=c] .zfk-ws-c{opacity:1;transform:none}
.zfk-w.hl{background:rgba(255,72,0,.06)}
/* Mail an die Kundin, ploppt kurz vor der Liste auf */
.zfk-note{position:absolute;right:calc(46 * var(--e));top:calc(252 * var(--e));z-index:3;width:calc(262 * var(--e));padding:calc(12 * var(--e)) calc(14 * var(--e)) calc(14 * var(--e));border-radius:calc(12 * var(--e));background:#FFFFFF;color:#2B2A28;
  box-shadow:0 0 0 1px rgba(11,11,12,.1),0 calc(20 * var(--e)) calc(44 * var(--e)) rgba(0,0,0,.55);opacity:0;transform:translateY(calc(12 * var(--e))) scale(.97);transition:opacity .35s ease,transform .55s var(--ease)}
.zfk-note.zeig{opacity:1;transform:none}
.zfk-nk{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8 * var(--e))}
.zfk-nk b{font-size:calc(10 * var(--e));font-weight:600;color:#0B0B0C}
.zfk-nk span{font-size:calc(9 * var(--e));color:#8F8D87}
.zfk-nb{margin-top:calc(7 * var(--e));font:650 calc(13.5 * var(--e))/1.25 var(--display);letter-spacing:-.01em;color:#0B0B0C}
.zfk-nt{margin-top:calc(4 * var(--e));font-size:calc(9.5 * var(--e));line-height:1.45;color:#5F5D58}
.zfk-nknopf{display:inline-flex;align-items:center;height:calc(26 * var(--e));margin-top:calc(10 * var(--e));padding:0 calc(13 * var(--e));border-radius:999px;background:#9C5B6B;color:#fff;font-size:calc(10 * var(--e));font-weight:600;transition:transform .14s ease}
.zfk-nknopf.druck{transform:scale(.93)}
.zfk-b3 .d-cur.gast span{background:#9C5B6B}
.zfk-b3 .d-toast{left:calc(30 * var(--e));right:auto;bottom:calc(20 * var(--e))}

/* ---------- Handy (Kachel ca. 295 × 295 px) ---------- */
@container (max-width:420px){
  .fn-app.zfk-b1{--e:calc(100cqw / 340);--std:calc(52 * var(--e));padding:calc(13 * var(--e)) calc(12 * var(--e)) 0}
  .zfk-hb,.zfk-pf,.zfk-plus,.zfk-lang{display:none}
  .zfk-kurz{display:inline}
  .zfk-titel{margin-left:calc(2 * var(--e));font-size:calc(14 * var(--e))}
  .zfk-bar{margin-bottom:calc(10 * var(--e))}
  .zfk-kk,.zfk-kb{grid-template-columns:calc(34 * var(--e)) repeat(3,minmax(0,1fr))}
  .zfk-wer{flex-direction:column;align-items:center;gap:calc(2 * var(--e));padding:calc(8 * var(--e)) calc(4 * var(--e)) calc(7 * var(--e))}
  .zfk-wer b{font-size:calc(12 * var(--e))}
  .zfk-wer small{font-size:calc(9 * var(--e))}
  .zfk-zt span{right:calc(6 * var(--e));font-size:calc(9 * var(--e))}
  .zfk-ev{padding:calc(4 * var(--e)) calc(5 * var(--e)) calc(4 * var(--e)) calc(8 * var(--e))}
  .zfk-ev b{font-size:calc(10 * var(--e))}
  .zfk-ev>span{font-size:calc(9 * var(--e))}
  .zfk-b1 .d-toast{left:calc(12 * var(--e));right:calc(12 * var(--e));bottom:calc(12 * var(--e))}
  .zfk-ev:not(.eng) b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .zfk-ev:not(.eng) b em{display:none}
  .zfk-ev[style*="--d:45"]>span{display:none}
  .zfk-ntag{top:auto;bottom:calc(5 * var(--e));right:auto;left:calc(8 * var(--e))}

  .fn-app.zfk-b2{--e:calc(100cqw / 340)}
  .zfk-mail{left:calc(14 * var(--e));right:calc(14 * var(--e));top:calc(14 * var(--e));padding:calc(13 * var(--e)) calc(14 * var(--e)) calc(14 * var(--e))}
  .zfk-mt{display:none}
  .zfk-seite{left:calc(26 * var(--e));right:calc(26 * var(--e));top:calc(98 * var(--e))}
  .zfk-si{padding:calc(12 * var(--e)) calc(13 * var(--e)) calc(14 * var(--e))}
  .zfk-sz2{gap:calc(5 * var(--e))}
  .zfk-sz2 span{height:calc(30 * var(--e));font-size:calc(10.5 * var(--e))}

}
@container (min-width:421px) and (max-width:600px){.fn-app.zfk-b1{--e:calc(100cqw / 560)}}
@container (min-width:620px){
  .fn-app.zfk-b2{--e:calc(100cqw / 620)}
  .zfk-mail{left:calc(110 * var(--e));right:calc(110 * var(--e))}
  .zfk-seite{left:calc(124 * var(--e));right:calc(124 * var(--e))}
}
/* B3 schmal und quer (z. B. 1024 px Fenster): Verlauf weg */
@container (max-width:600px){.zfk-b3i{--e:calc(100cqw / 560)} .zfk-log{display:none}}
/* B3 quadratisch (Handy, kleines Tablet): Tagesliste oben, Warteliste darunter */
@container (max-aspect-ratio:5/4){
  .zfk-b3i{--e:calc(100cqw / 340)}
  .zfk-tg-box{left:calc(12 * var(--e));right:calc(12 * var(--e));top:calc(12 * var(--e));width:auto;bottom:auto;-webkit-mask-image:none;mask-image:none}
  .zfk-r-a,.zfk-r-d,.zfk-w3,.zfk-log{display:none}
  .zfk-wl{left:calc(12 * var(--e));right:calc(12 * var(--e));top:calc(184 * var(--e))}
  .zfk-wl .zfk-bk small,.zfk-tg-box .zfk-bk small{display:none}
  .zfk-bk{padding:calc(10 * var(--e)) calc(12 * var(--e)) calc(9 * var(--e))}
  .zfk-r,.zfk-w{min-height:calc(44 * var(--e));padding:calc(5 * var(--e)) calc(12 * var(--e))}
  .zfk-lv{left:calc(48 * var(--e))}
  .zfk-note{right:calc(14 * var(--e));left:calc(14 * var(--e));top:auto;bottom:calc(14 * var(--e));width:auto}
  .zfk-b3 .d-toast{left:calc(12 * var(--e));right:calc(12 * var(--e));bottom:calc(12 * var(--e))}
}
@container (max-aspect-ratio:5/4) and (min-width:421px){.zfk-b3i{--e:calc(100cqw / 380)}}
@media (prefers-reduced-motion:reduce){.zfk-zug,.zfk-fertig,.zfk-fertig>*,.zfk-ok,.zfk-neu,.zfk-seite,.zfk-note,.zfk-lv,.zfk-ws>*{transition:none!important}}