/* Coaches und Berater (zco): Branchen-Extras von Kessler Coaching (Petrol #17857D). Hell = was Daniel sieht (Talqio-Buchungsseite, buchen.css), dunkel = Talqio-Call (call.css) und Dashboard (konto.css). {n} = n Einheiten der Kartenbreite */

/* Kessler-Logo wie auf ihrer Seite: zwei Ringe, kessler fett, coaching leise */
.zco-marke{display:inline-flex;align-items:center;gap:calc(6 * var(--e));font:400 calc(16 * var(--e))/1 var(--display);letter-spacing:-.02em;color:#132523;white-space:nowrap}
.zco-marke svg{display:block;width:calc(21 * var(--e));height:calc(19 * var(--e));flex:none}
.zco-marke b{font-weight:700}
.zco-marke span{color:#5A6663}
/* Text, der im Ablauf wechselt: beide Fassungen liegen übereinander */
.zco-wx{display:inline-grid;vertical-align:bottom}
.zco-wx>span,.zco-pk-t>span{grid-area:1/1;transition:opacity .35s ease}
/* Phase „Kunde“ wie .ko-phase (gewonnen = grüner Punkt) */
.zco-phase{display:inline-flex;align-items:center;gap:calc(5 * var(--e));height:calc(20 * var(--e));padding:0 calc(8 * var(--e));border-radius:999px;background:#1C1C1F;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);
  font-size:calc(9.5 * var(--e));font-weight:500;line-height:1;color:#F4F3F0;white-space:nowrap;flex:none}
.zco-phase::before{content:"";width:calc(5.5 * var(--e));height:calc(5.5 * var(--e));border-radius:50%;background:#3DD68C;flex:none}

/* ---------- HERO: Daniels Handy, Buchungsseite für die nächste Sitzung (390 × 844, oben Statusleiste, unten Home-Balken frei) ---------- */
.zco-hero{background:#F4F3F0;color:#2B2A28}
.zco-blatt{position:absolute;left:calc(12 * var(--e));right:calc(12 * var(--e));top:calc(62 * var(--e));border-radius:calc(22 * var(--e));background:#fff;box-shadow:0 0 0 1px rgba(11,11,12,.08),0 calc(30 * var(--e)) calc(60 * var(--e)) calc(-34 * var(--e)) rgba(11,11,12,.3)}
.zco-info{padding:calc(20 * var(--e)) calc(20 * var(--e)) calc(18 * var(--e));border-bottom:1px solid rgba(11,11,12,.08)}
.zco-host{margin-top:calc(17 * var(--e));font-size:calc(14.5 * var(--e));line-height:1.4;color:#5F5D58}
.zco-h{margin-top:calc(5 * var(--e));font:650 calc(27 * var(--e))/1.1 var(--display);letter-spacing:-.025em;color:#0B0B0C;text-wrap:balance}
.zco-paket{margin-top:calc(16 * var(--e));padding:calc(13 * var(--e)) calc(15 * var(--e)) calc(13 * var(--e));border-radius:calc(14 * var(--e));background:rgba(11,11,12,.035);box-shadow:inset 0 0 0 1px rgba(11,11,12,.08)}
.zco-pk-k{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8 * var(--e))}
.zco-pk-k b{font-size:calc(15 * var(--e));font-weight:600;color:#0B0B0C}
.zco-pk-k span{font-size:calc(13.5 * var(--e));color:#5F5D58;font-variant-numeric:tabular-nums;white-space:nowrap}
.zco-seg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(5 * var(--e));margin-top:calc(11 * var(--e))}
.zco-seg i{height:calc(8 * var(--e));border-radius:999px;background:rgba(11,11,12,.08);transition:background .45s ease,box-shadow .45s ease}
.zco-seg i.v{background:#17857D}
.zco-seg i.g{background:color-mix(in srgb,#17857D 28%,#fff);box-shadow:inset 0 0 0 calc(1.5 * var(--e)) #17857D}
.zco-pk-t{display:grid;margin-top:calc(10 * var(--e));font-size:calc(13.5 * var(--e));line-height:1.35;color:#5F5D58}
.zco-pk-t .zco-a{opacity:0}
.zco-hero:not(.gebucht) .zco-pk-t .zco-a{opacity:1}
.zco-hero:not(.gebucht) .zco-pk-t .zco-b{opacity:0}
.zco-pk-t .zco-b{color:#17857D;font-weight:600}
.zco-fakt{display:flex;align-items:center;gap:calc(8 * var(--e));margin-top:calc(14 * var(--e));font-size:calc(14 * var(--e));line-height:1.3;color:#2B2A28;white-space:nowrap}
.zco-fakt svg{display:block;width:calc(17 * var(--e));height:calc(17 * var(--e));color:#5F5D58;flex:none}
.zco-fakt .zco-dot{margin:0 calc(3 * var(--e));color:#B5B3AD}
.zco-haupt{display:grid;padding:calc(18 * var(--e)) calc(20 * var(--e)) calc(20 * var(--e))}
.zco-wahl,.zco-done{grid-area:1/1;min-width:0;transition:opacity .4s ease,transform .6s var(--ease)}
.zco-hero.gebucht .zco-wahl{opacity:0;transform:translateX(calc(-20 * var(--e)))}
.zco-done{opacity:0;transform:translateX(calc(20 * var(--e)))}
.zco-hero.gebucht .zco-done{opacity:1;transform:none;transition-delay:.12s}
.zco-wk{display:flex;align-items:center;justify-content:space-between}
.zco-wk b{font-size:calc(15.5 * var(--e));font-weight:600;color:#0B0B0C}
.zco-nav{display:flex;gap:calc(6 * var(--e))}
.zco-nav i{display:grid;place-items:center;width:calc(32 * var(--e));height:calc(32 * var(--e));border-radius:calc(10 * var(--e));background:rgba(11,11,12,.04);box-shadow:inset 0 0 0 1px rgba(11,11,12,.08)}
.zco-nav svg{display:block;width:calc(14 * var(--e));height:calc(14 * var(--e));fill:none;stroke:#0B0B0C;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zco-tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:calc(5 * var(--e));margin-top:calc(12 * var(--e))}
.zco-tage span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(3 * var(--e));height:calc(60 * var(--e));border-radius:calc(12 * var(--e));font-size:calc(17 * var(--e));font-weight:500;line-height:1;color:#A9A7A1;font-variant-numeric:tabular-nums;transition:background .15s ease,color .15s ease}
.zco-tage small{font-size:calc(10.5 * var(--e));font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#A9A7A1;transition:color .15s ease}
.zco-tage .frei{background:color-mix(in srgb,#17857D 12%,transparent);color:#0B0B0C;font-weight:650}
.zco-tage .frei small{color:#5F5D58}
.zco-tage .on{background:#17857D;color:#fff}
.zco-tage .on small{color:rgba(255,255,255,.82)}
.zco-tag{display:grid;margin-top:calc(18 * var(--e));font-size:calc(14.5 * var(--e));font-weight:600;color:#0B0B0C}
.zco-tag .zco-a{opacity:0;color:#5F5D58;font-weight:500}
.zco-hero.leer .zco-tag .zco-a{opacity:1}
.zco-hero.leer .zco-tag .zco-b{opacity:0}
.zco-zeiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8 * var(--e));margin-top:calc(10 * var(--e));transition:opacity .3s ease,transform .5s var(--ease)}
.zco-zeiten span{display:grid;place-items:center;height:calc(46 * var(--e));border-radius:calc(12 * var(--e));font-size:calc(16 * 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}
.zco-zeiten .on{background:#17857D;color:#fff;box-shadow:none}
.zco-hero.leer .zco-zeiten{opacity:0}
.zco-hero.leer .zco-zeiten{transform:translateY(calc(8 * var(--e)))}
.zco-btn{display:flex;align-items:center;justify-content:center;height:calc(52 * var(--e));margin-top:calc(20 * var(--e));border-radius:999px;background:#17857D;color:#fff;font-size:calc(16 * var(--e));font-weight:600;transition:opacity .25s ease,transform .14s ease,filter .2s ease}
.zco-hero.zu .zco-buchen{opacity:.4}
.zco-btn.druck{transform:scale(.96);filter:brightness(1.1)}
.zco-btn.g{height:calc(48 * var(--e));margin-top:calc(18 * var(--e));background:transparent;color:#0B0B0C;box-shadow:inset 0 0 0 1px rgba(11,11,12,.14)}
.zco-klein{margin-top:calc(12 * var(--e));font-size:calc(12.5 * var(--e));line-height:1.45;color:#8F8D87;text-align:center}
.zco-ok{display:grid;place-items:center;width:calc(52 * var(--e));height:calc(52 * var(--e));border-radius:50%;background:#17857D;opacity:0;transform:scale(.5);transition:opacity .3s ease,transform .55s cubic-bezier(.3,1.6,.5,1)}
.zco-ok svg{display:block;width:calc(25 * var(--e));height:calc(25 * var(--e));fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.zco-hero.gebucht .zco-ok{opacity:1;transform:none;transition-delay:.25s}
.zco-dh{margin-top:calc(14 * var(--e));font:650 calc(27 * var(--e))/1.15 var(--display);letter-spacing:-.025em;color:#0B0B0C}
.zco-dp{margin-top:calc(6 * var(--e));font-size:calc(14.5 * var(--e));line-height:1.55;color:#5F5D58;text-wrap:pretty}
.zco-rows{margin-top:calc(16 * var(--e));border-radius:calc(14 * var(--e));box-shadow:inset 0 0 0 1px rgba(11,11,12,.08);overflow:hidden}
.zco-rows div{display:grid;grid-template-columns:calc(58 * var(--e)) minmax(0,1fr);gap:calc(10 * var(--e));padding:calc(12 * var(--e)) calc(14 * var(--e));font-size:calc(14.5 * var(--e));line-height:1.35;border-top:1px solid rgba(11,11,12,.08)}
.zco-rows div:first-child{border-top:0}
.zco-rows span{color:#5F5D58}
.zco-rows b{font-weight:600;color:#0B0B0C}
.zco-tq{position:absolute;left:0;right:0;bottom:calc(44 * var(--e));font-size:calc(12.5 * var(--e));line-height:1;color:#8F8D87;text-align:center}
.zco-tq b{font:600 calc(13.5 * var(--e))/1 var(--display);letter-spacing:-.01em;color:#0B0B0C}
.zco-tq em{font-style:normal;color:#17857D}
/* Finger statt Mauszeiger: runder, halbdurchsichtiger Punkt, drückt sich beim Tippen kurz ein */
.zco-fing::before{content:"";position:absolute;left:calc(-17 * var(--e));top:calc(-17 * var(--e));width:calc(34 * var(--e));height:calc(34 * var(--e));border-radius:50%;background:rgba(40,40,44,.26);
  box-shadow:0 0 0 calc(1.5 * var(--e)) rgba(255,255,255,.85),0 calc(4 * var(--e)) calc(14 * var(--e)) rgba(11,11,12,.22);transition:transform .18s ease,background .18s ease}
.zco-fing.tipp::before{transform:scale(.8);background:rgba(40,40,44,.42)}

/* ---------- B1: Talqio-Call (dunkel, Akzent Petrol), rechts die Leiste „Nächster Termin“ (Basis 640) ---------- */
.zco-b1{--e:calc(100cqw / 640);--k:#17857D;display:flex;flex-direction:column;padding:calc(12 * var(--e)) calc(14 * var(--e)) calc(10 * var(--e));background:#0B0B0C;color:#D6D4CE}
.zco-ctop{flex:none;display:flex;align-items:center;gap:calc(12 * var(--e));height:calc(28 * var(--e));padding:0 calc(4 * var(--e)) 0 calc(6 * var(--e));margin-bottom:calc(8 * var(--e))}
.zco-cm,.zco-ct{font:600 calc(12.5 * var(--e))/1.2 var(--display);letter-spacing:-.01em;color:#F4F3F0;white-space:nowrap}
.zco-ct{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.zco-cz{display:inline-flex;align-items:center;height:calc(22 * var(--e));padding:0 calc(10 * var(--e));border-radius:999px;background:rgba(244,243,240,.06);box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);
  font-size:calc(9.5 * var(--e));font-weight:500;color:#A9A7A1;font-variant-numeric:tabular-nums;flex:none}
.zco-raum{position:relative;flex:1;min-height:0}
.zco-buehne{position:absolute;left:0;top:0;bottom:0;right:0;transition:right .6s var(--ease)}
.zco-b1.offen .zco-buehne{right:calc(222 * var(--e))}
.zco-kachel{position:absolute;border-radius:calc(11 * var(--e));overflow:hidden;background:#141416;box-shadow:0 0 0 1px rgba(244,243,240,.09)}
.zco-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#141416}
.zco-gast{inset:0}
.zco-gast .zco-vid{object-position:50% 32%}
.zco-ich{right:calc(10 * var(--e));bottom:calc(10 * var(--e));z-index:2;width:calc(118 * var(--e));aspect-ratio:3/2;box-shadow:0 0 0 1px rgba(244,243,240,.18),0 calc(12 * var(--e)) calc(26 * var(--e)) rgba(0,0,0,.55)}
.zco-ich .zco-vid{transform:scaleX(-1);object-position:42% 30%}
.zco-cn{position:absolute;left:calc(7 * var(--e));bottom:calc(7 * var(--e));display:flex;align-items:center;height:calc(19 * var(--e));max-width:calc(100% - calc(14 * var(--e)));padding:0 calc(8 * var(--e));border-radius:999px;background:rgba(11,11,12,.66);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:calc(9 * var(--e));font-weight:500;color:#F4F3F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zco-ich .zco-cn{left:calc(5 * var(--e));bottom:calc(5 * var(--e));height:calc(16 * var(--e));font-size:calc(8 * var(--e))}
.zco-panel{position:absolute;top:0;right:0;bottom:0;width:calc(214 * var(--e));overflow:hidden;display:flex;flex-direction:column;padding:calc(12 * var(--e)) calc(12 * var(--e)) calc(11 * var(--e));border-radius:calc(14 * var(--e));
  background:linear-gradient(180deg,#161618,#0D0D0F);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(244,243,240,.09);opacity:0;transform:translateX(calc(30 * var(--e)));transition:opacity .35s ease,transform .6s var(--ease)}
.zco-b1.offen .zco-panel{opacity:1;transform:none}
.zco-ph{display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--e))}
.zco-ph b{font:600 calc(13 * var(--e))/1.2 var(--display);letter-spacing:-.01em;color:#F4F3F0}
.zco-x{display:grid;place-items:center;width:calc(20 * var(--e));height:calc(20 * var(--e));color:#A9A7A1}
.zco-x svg{display:block;width:calc(12 * var(--e));height:calc(12 * var(--e))}
.zco-pz{margin-top:calc(8 * var(--e));padding-bottom:calc(9 * var(--e));border-bottom:1px solid rgba(244,243,240,.09)}
.zco-pz b{display:block;font-size:calc(10.5 * var(--e));font-weight:600;line-height:1.3;color:#F4F3F0}
.zco-pz span{display:block;margin-top:calc(1 * var(--e));font-size:calc(9.5 * var(--e));line-height:1.35;color:#A9A7A1}
.zco-pw{display:flex;align-items:center;justify-content:space-between;margin-top:calc(9 * var(--e))}
.zco-pw b{font-size:calc(10 * var(--e));font-weight:600;color:#F4F3F0}
.zco-pnav{display:flex;gap:calc(3 * var(--e))}
.zco-pnav i{display:grid;place-items:center;width:calc(18 * var(--e));height:calc(18 * var(--e));border-radius:calc(5 * var(--e));background:rgba(244,243,240,.05);box-shadow:inset 0 0 0 1px rgba(244,243,240,.09)}
.zco-pnav i:first-child{opacity:.45}
.zco-pnav svg{display:block;width:calc(9 * var(--e));height:calc(9 * var(--e));fill:none;stroke:#F4F3F0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zco-ptage{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(4 * var(--e));margin-top:calc(7 * var(--e))}
.zco-ptage span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2 * var(--e));height:calc(36 * var(--e));border-radius:calc(8 * var(--e));font-size:calc(11.5 * var(--e));font-weight:500;line-height:1;color:#6F6D68;font-variant-numeric:tabular-nums;transition:background .15s ease,color .15s ease}
.zco-ptage small{font-size:calc(7.5 * var(--e));font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6F6D68}
.zco-ptage .frei{background:color-mix(in srgb,var(--k) 22%,#141416);color:#F4F3F0;font-weight:600}
.zco-ptage .frei small{color:#A9A7A1}
.zco-ptage .on{background:var(--k);color:#fff}
.zco-ptage .on small{color:rgba(255,255,255,.8)}
.zco-pzeiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(4 * var(--e));margin-top:calc(8 * var(--e));transition:opacity .3s ease,transform .5s var(--ease)}
.zco-pzeiten span{display:grid;place-items:center;height:calc(25 * var(--e));border-radius:calc(7 * var(--e));font-size:calc(10 * var(--e));font-weight:600;color:#F4F3F0;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px rgba(244,243,240,.16);transition:background .15s ease,box-shadow .15s ease}
.zco-pzeiten .on{background:var(--k);box-shadow:none}
.zco-b1.leer .zco-pzeiten{opacity:0;transform:translateY(calc(5 * var(--e)))}
.zco-pfuss{display:grid;margin-top:auto;padding-top:calc(9 * var(--e))}
.zco-pbtn,.zco-pok{grid-area:1/1;transition:opacity .3s ease,transform .14s ease}
.zco-pbtn{display:flex;align-items:center;justify-content:center;height:calc(29 * var(--e));border-radius:999px;background:var(--k);color:#fff;font-size:calc(10 * var(--e));font-weight:600}
.zco-b1.zu .zco-pbtn{opacity:.4}
.zco-pbtn.druck{transform:scale(.94)}
.zco-pok{display:flex;align-items:center;gap:calc(7 * var(--e));padding:0 calc(9 * var(--e));border-radius:calc(9 * var(--e));background:color-mix(in srgb,var(--k) 18%,#141416);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k) 55%,transparent);opacity:0}
.zco-pok svg{display:block;width:calc(12 * var(--e));height:calc(12 * var(--e));color:#5CC8BD;flex:none}
.zco-pok span{min-width:0;font-size:calc(9 * var(--e));line-height:1.25;color:#D6D4CE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zco-pok b{display:block;font-size:calc(9.5 * var(--e));font-weight:600;color:#F4F3F0}
.zco-b1.drin .zco-pbtn{opacity:0}
.zco-b1.drin .zco-pok{opacity:1}
.zco-cleiste{flex:none;display:flex;justify-content:center;margin-top:calc(8 * var(--e))}
.zco-cl{display:flex;align-items:center;gap:calc(5 * var(--e));padding:calc(4 * var(--e));border-radius:999px;background:linear-gradient(180deg,rgba(38,38,42,.78),rgba(24,24,27,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.08),0 calc(16 * var(--e)) calc(32 * var(--e)) calc(-16 * var(--e)) rgba(0,0,0,.8)}
.zco-ctl{position:relative;display:grid;place-items:center;width:calc(28 * var(--e));height:calc(28 * var(--e));border-radius:50%;background:rgba(244,243,240,.06);color:#F4F3F0;transition:background .2s ease,transform .14s ease}
.zco-ctl svg{display:block;width:calc(12.5 * var(--e));height:calc(12.5 * var(--e))}
.zco-ctl.an{background:var(--k);color:#fff}
.zco-ctl.druck{transform:scale(.9)}
.zco-csep{width:1px;height:calc(16 * var(--e));margin:0 calc(2 * var(--e));background:rgba(244,243,240,.09)}
.zco-craus{display:flex;align-items:center;gap:calc(5 * var(--e));height:calc(28 * var(--e));padding:0 calc(11 * var(--e));border-radius:999px;background:rgba(244,243,240,.06);font-size:calc(9.5 * var(--e));font-weight:600;color:#F4F3F0}
.zco-craus svg{display:block;width:calc(11.5 * var(--e));height:calc(11.5 * var(--e))}
.zco-b1 .d-toast{left:calc(10 * var(--e));top:calc(10 * var(--e));right:auto;bottom:auto;max-width:calc(100% - calc(20 * var(--e)));transform:translateY(calc(-8 * var(--e)))}
.zco-b1 .d-toast.zeig{transform:none}
.zco-b1 .d-toast svg{flex:none;color:#5CC8BD}
.zco-b1 .d-toast em{font-style:normal}
.zco-phint{display:none;margin-top:calc(9 * var(--e));font-size:calc(9 * var(--e));line-height:1.45;color:#6F6D68}
.zco-b1 .d-toast span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zco-b1 .d-toast b{color:#5CC8BD}

/* ---------- B2: Kontakt im Dashboard mit Paket, das von selbst mitzählt (Basis 440, Tablet 640) ---------- */
.zco-b2{--e:calc(100cqw / 440);display:flex;flex-direction:column;padding:calc(18 * var(--e)) calc(18 * var(--e)) 0;background:#0B0B0C;color:#D6D4CE}
.zco-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(10 * var(--e))}
.zco-kopf>div{min-width:0}
.zco-kh{display:block;font:600 calc(17 * var(--e))/1.15 var(--display);letter-spacing:-.015em;color:#F4F3F0}
.zco-kl{display:block;margin-top:calc(4 * var(--e));font-size:calc(10 * var(--e));line-height:1.4;color:#A9A7A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zco-kopf .zco-phase{margin-top:calc(1 * var(--e))}
.zco-pbox{margin-top:calc(13 * var(--e));padding:calc(12 * var(--e)) calc(13 * var(--e)) calc(13 * var(--e));border-radius:calc(11 * var(--e));background:#141416;border:1px solid rgba(244,243,240,.09)}
.zco-pb1{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8 * var(--e))}
.zco-pb1 b{min-width:0;font-size:calc(10.5 * var(--e));font-weight:600;color:#F4F3F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zco-pb1 span{font-size:calc(9 * var(--e));color:#A9A7A1;white-space:nowrap}
.zco-pgross{display:flex;align-items:baseline;gap:calc(6 * var(--e));margin-top:calc(9 * var(--e))}
.zco-pgross>b{font:650 calc(25 * var(--e))/1 var(--display);letter-spacing:-.025em;color:#F4F3F0;font-variant-numeric:tabular-nums}
.zco-pse{font-size:calc(11 * var(--e));font-weight:500;color:#D6D4CE}
.zco-pgen{margin-left:auto;font-size:calc(9.5 * var(--e));color:#A9A7A1;white-space:nowrap;font-variant-numeric:tabular-nums}
.zco-b2 .zco-a{opacity:0}
.zco-b2:not(.gezaehlt) .zco-pgross .zco-a,.zco-b2:not(.gezaehlt) .zco-t3 .zco-ts .zco-a,.zco-b2:not(.beendet) .zco-dauer .zco-a{opacity:1}
.zco-b2:not(.gezaehlt) .zco-pgross .zco-b,.zco-b2:not(.gezaehlt) .zco-t3 .zco-ts .zco-b,.zco-b2:not(.beendet) .zco-dauer .zco-b{opacity:0}
.zco-b2.gezaehlt .zco-pgross>b{animation:zco-glimm 1.6s ease}
@keyframes zco-glimm{0%{color:#FF6A2A}100%{color:#F4F3F0}}
.zco-pseg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(5 * var(--e));margin-top:calc(11 * var(--e))}
.zco-pseg i{position:relative;height:calc(9 * var(--e));border-radius:calc(4 * var(--e));background:#1C1C1F;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);overflow:hidden}
.zco-pseg i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#FF4800;transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--ease)}
.zco-pseg i.v::after{transform:none}
.zco-b2:not(.gezaehlt) .zco-s3::after{transform:scaleX(0)}
.zco-pseg i.g{box-shadow:inset 0 0 0 1px rgba(255,72,0,.55)}
.zco-ptit{margin:calc(15 * var(--e)) 0 calc(7 * var(--e));font-size:calc(8.5 * var(--e));font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:#F4F3F0}
.zco-b2r{flex:1;min-height:0;display:flex;flex-direction:column}
.zco-tl{flex:1;min-height:0;overflow:hidden;border:1px solid rgba(244,243,240,.09);border-bottom:0;border-radius:calc(10 * var(--e)) calc(10 * var(--e)) 0 0;background:#141416;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - calc(40 * var(--e))),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - calc(40 * var(--e))),transparent)}
.zco-tz{display:grid;grid-template-columns:calc(20 * var(--e)) minmax(0,1fr) auto;align-items:center;gap:calc(9 * var(--e));min-height:calc(38 * var(--e));padding:calc(5 * var(--e)) calc(11 * var(--e));border-top:1px solid rgba(244,243,240,.09);transition:background 1.2s ease}
.zco-tz:first-child{border-top:0}
.zco-tn{position:relative;display:grid;place-items:center;width:calc(20 * var(--e));height:calc(20 * var(--e));border-radius:50%;background:#1C1C1F;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);color:#A9A7A1}
.zco-tn em{font-style:normal;font-size:calc(9 * var(--e));font-weight:600;font-variant-numeric:tabular-nums;transition:opacity .3s ease}
.zco-tn svg{position:absolute;width:calc(11 * var(--e));height:calc(11 * var(--e));fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s ease}
.zco-tz.ok .zco-tn,.zco-b2.gezaehlt .zco-t3 .zco-tn{background:#FF4800;box-shadow:none}
.zco-tz.ok .zco-tn svg,.zco-b2.gezaehlt .zco-t3 .zco-tn svg{opacity:1}
.zco-b2.gezaehlt .zco-t3 .zco-tn em{opacity:0}
.zco-tn{transition:background .35s ease,box-shadow .35s ease}
.zco-tw{min-width:0}
.zco-tw>b{display:block;font-size:calc(10.5 * var(--e));font-weight:500;line-height:1.3;color:#F4F3F0}
.zco-tw>span{display:block;margin-top:calc(1 * var(--e));font-size:calc(9 * var(--e));line-height:1.35;color:#A9A7A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zco-ts{font-size:calc(9 * var(--e));color:#A9A7A1;white-space:nowrap;text-align:right}
.zco-ts .d-tag{display:inline-block}
.zco-t3 .zco-ts .zco-a{display:inline-flex;align-items:center;gap:calc(5 * var(--e));color:#F4F3F0;font-weight:500}
.zco-t3 .zco-ts i{width:calc(6 * var(--e));height:calc(6 * var(--e));border-radius:50%;background:#FF4800;box-shadow:0 0 0 calc(3 * var(--e)) rgba(255,72,0,.18)}
.zco-b2:not(.beendet) .zco-t3{background:rgba(255,72,0,.06)}
.zco-b2.frisch .zco-t3{background:rgba(255,72,0,.1);transition:background .3s ease}
.zco-b2 .d-toast{left:calc(14 * var(--e));right:calc(14 * var(--e));bottom:calc(14 * var(--e));justify-content:flex-start}

/* ---------- B3: Aufgabenseite für Daniel (hell, Kessler) und Miriams Ansicht (dunkel), übereinander (Basis 640) ---------- */
.zco-b3{--e:calc(100cqw / 640);--k:#17857D;background:#0B0B0C}
.zco-l3{position:absolute;left:calc(26 * var(--e));top:calc(26 * var(--e));bottom:calc(-24 * var(--e));width:calc(372 * var(--e));padding:calc(20 * var(--e)) calc(22 * var(--e)) 0;border-radius:calc(16 * var(--e)) calc(16 * var(--e)) 0 0;background:#fff;color:#2B2A28;
  box-shadow:0 0 0 1px rgba(11,11,12,.08),0 calc(30 * var(--e)) calc(60 * var(--e)) calc(-30 * var(--e)) rgba(0,0,0,.7)}
.zco-l3k{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--e));padding-bottom:calc(14 * var(--e));border-bottom:1px solid rgba(11,11,12,.08)}
.zco-l3 .zco-marke{font-size:calc(12.5 * var(--e));gap:calc(5 * var(--e))}
.zco-l3 .zco-marke svg{width:calc(16 * var(--e));height:calc(15 * var(--e))}
.zco-l3f{font-size:calc(10 * var(--e));color:#8F8D87;white-space:nowrap}
.zco-l3h{max-width:calc(300 * var(--e));margin-top:calc(16 * var(--e));font:650 calc(19 * var(--e))/1.15 var(--display);letter-spacing:-.02em;color:#0B0B0C;text-wrap:balance}
.zco-l3l{margin-top:calc(5 * var(--e));font-size:calc(10.5 * var(--e));line-height:1.45;color:#5F5D58}
.zco-auf{display:grid;gap:calc(7 * var(--e));margin:calc(14 * var(--e)) 0 0;padding:0;list-style:none}
.zco-a3{display:grid;grid-template-columns:calc(18 * var(--e)) minmax(0,1fr);gap:calc(11 * var(--e));align-items:start;padding:calc(10 * var(--e)) calc(12 * var(--e)) calc(10 * var(--e)) calc(11 * var(--e));border-radius:calc(11 * var(--e));background:#F4F3F0;box-shadow:inset 0 0 0 1px rgba(11,11,12,.1);transition:background .2s ease,box-shadow .2s ease}
.zco-cb{display:grid;place-items:center;width:calc(18 * var(--e));height:calc(18 * var(--e));margin-top:calc(1 * var(--e));border-radius:calc(6 * var(--e));background:#fff;box-shadow:inset 0 0 0 1.5px rgba(11,11,12,.2);transition:background .15s ease,box-shadow .15s ease}
.zco-cb svg{display:block;width:calc(12 * var(--e));height:calc(12 * var(--e));fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s ease}
.zco-a3 b{display:block;font-size:calc(11.5 * var(--e));font-weight:600;line-height:1.3;color:#0B0B0C;text-decoration:line-through;text-decoration-color:transparent;transition:color .25s ease,text-decoration-color .25s ease}
.zco-a3 small{display:block;margin-top:calc(2 * var(--e));font-size:calc(10 * var(--e));line-height:1.4;color:#5F5D58}
.zco-a3.on{background:color-mix(in srgb,var(--k) 7%,#F4F3F0);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k) 35%,transparent)}
.zco-a3.on .zco-cb{background:var(--k);box-shadow:none}
.zco-a3.on .zco-cb svg{opacity:1}
.zco-a3.on b{color:#5F5D58;text-decoration-color:rgba(11,11,12,.45)}
.zco-l3s{margin-top:calc(14 * var(--e));font-size:calc(10 * var(--e));line-height:1.45;color:#5F5D58}
.zco-l3s b{font-weight:600;color:var(--k)}
.zco-d3{position:absolute;right:calc(24 * var(--e));top:calc(62 * var(--e));width:calc(234 * var(--e));padding:calc(14 * var(--e)) calc(14 * var(--e)) calc(12 * var(--e));border-radius:calc(14 * var(--e));background:#141416;border:1px solid rgba(244,243,240,.12);color:#D6D4CE;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 calc(30 * var(--e)) calc(60 * var(--e)) calc(-18 * var(--e)) rgba(0,0,0,.9),0 calc(6 * var(--e)) calc(18 * var(--e)) rgba(0,0,0,.35)}
.zco-d3k{display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--e))}
.zco-d3k b{min-width:0;font:600 calc(13.5 * var(--e))/1.2 var(--display);letter-spacing:-.01em;color:#F4F3F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zco-d3s{display:block;margin-top:calc(10 * var(--e));font-size:calc(8.5 * var(--e));font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:#A9A7A1}
.zco-d3z{display:flex;align-items:baseline;gap:calc(6 * var(--e));margin-top:calc(7 * var(--e))}
.zco-d3z b{font:650 calc(22 * var(--e))/1 var(--display);letter-spacing:-.02em;color:#F4F3F0;font-variant-numeric:tabular-nums}
.zco-d3z>span{font-size:calc(10.5 * var(--e));color:#D6D4CE}
.zco-d3bar{display:block;height:calc(6 * var(--e));margin-top:calc(9 * var(--e));border-radius:999px;background:#1C1C1F;overflow:hidden}
.zco-d3bar i{display:block;width:var(--w,0%);height:100%;border-radius:inherit;background:#FF4800;transition:width .7s var(--ease)}
.zco-d3l{display:grid;margin-top:calc(10 * var(--e));border-top:1px solid rgba(244,243,240,.09)}
.zco-d3r{display:grid;grid-template-columns:calc(16 * var(--e)) minmax(0,1fr);gap:calc(8 * var(--e));align-items:start;padding:calc(8 * var(--e)) calc(4 * var(--e)) calc(8 * var(--e)) 0;border-bottom:1px solid rgba(244,243,240,.09);transition:background 1.2s ease}
.zco-d3r i{display:grid;place-items:center;width:calc(16 * var(--e));height:calc(16 * var(--e));margin-top:calc(1 * var(--e));border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(244,243,240,.2);transition:background .3s ease,box-shadow .3s ease}
.zco-d3r svg{display:block;width:calc(10 * var(--e));height:calc(10 * var(--e));fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s ease}
.zco-d3r span{min-width:0;font-size:calc(10 * var(--e));line-height:1.35;color:#F4F3F0}
.zco-d3r small{display:block;margin-top:calc(1 * var(--e));font-size:calc(8.5 * var(--e));color:#6F6D68}
.zco-d3r.on i{background:#FF4800;box-shadow:none}
.zco-d3r.on svg{opacity:1}
.zco-d3r.on small{color:#A9A7A1}
.zco-d3r.frisch{background:rgba(255,72,0,.1);transition:background .3s ease}
.zco-d3n{display:flex;align-items:center;gap:calc(6 * var(--e));margin-top:calc(10 * var(--e));font-size:calc(9.5 * var(--e));color:#A9A7A1;white-space:nowrap}
.zco-d3n svg{display:block;width:calc(12 * var(--e));height:calc(12 * var(--e));color:#FF6A2A;flex:none}

/* ---------- Tablet: Paket-Karte wird breit (Basis 640, 16:10), zwei Spalten ---------- */
@container (min-width:600px){
  .zco-b2{--e:calc(100cqw / 640);padding:calc(22 * var(--e)) calc(24 * var(--e)) 0}
  .zco-b2 .d-toast{left:auto;right:calc(20 * var(--e));bottom:calc(18 * var(--e))}
}
@media (min-width:641px) and (max-width:1000px){.zco-phint{display:block}.zco-pfuss{margin-top:0;padding-top:calc(10 * var(--e))}}

/* ---------- Handy: Kacheln quadratisch (Basis 340), Unwichtiges weg ---------- */
@container (max-width:480px){
  .zco-b1{--e:calc(100cqw / 340);padding:calc(11 * var(--e)) calc(11 * var(--e)) calc(9 * var(--e))}
  .zco-cm,.zco-chm,.zco-csep,.zco-craus span,.zco-ich,.zco-ptage .zco-pmi,.zco-pzeiten .zco-pmehr,.zco-pnav,.zco-pz span{display:none}
  .zco-ct{font-size:calc(11.5 * var(--e))}
  .zco-cz{height:calc(20 * var(--e));font-size:calc(9 * var(--e))}
  .zco-ctop{height:calc(24 * var(--e));margin-bottom:calc(7 * var(--e))}
  .zco-b1.offen .zco-buehne{right:calc(186 * var(--e))}
  .zco-panel{width:calc(180 * var(--e));padding:calc(10 * var(--e)) calc(10 * var(--e)) calc(9 * var(--e))}
  .zco-ph b{font-size:calc(12 * var(--e))}
  .zco-pz{margin-top:calc(6 * var(--e));padding-bottom:calc(7 * var(--e))}
  .zco-pz b{font-size:calc(10 * var(--e))}
  .zco-ptage{grid-template-columns:repeat(4,minmax(0,1fr))}
  .zco-ptage span{height:calc(38 * var(--e));font-size:calc(12 * var(--e))}
  .zco-ptage small{font-size:calc(8.5 * var(--e))}
  .zco-pzeiten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zco-pzeiten span{height:calc(27 * var(--e));font-size:calc(10.5 * var(--e))}
  .zco-pbtn{height:calc(29 * var(--e));font-size:calc(10.5 * var(--e))}
  .zco-pok{padding:calc(5 * var(--e)) calc(8 * var(--e))}
  .zco-pok span{font-size:calc(9.5 * var(--e));white-space:normal}
  .zco-pok b{font-size:calc(10 * var(--e))}
  .zco-cn{font-size:calc(9.5 * var(--e));height:calc(20 * var(--e))}
  .zco-ctl{width:calc(29 * var(--e));height:calc(29 * var(--e))}
  .zco-craus{padding:0 calc(9 * var(--e))}
  .zco-b1 .d-toast{top:auto;bottom:calc(34 * var(--e));left:calc(7 * var(--e));right:calc(7 * var(--e));max-width:none;font-size:calc(10 * var(--e));padding:calc(7 * var(--e)) calc(9 * var(--e));transform:translateY(calc(8 * var(--e)))}
  .zco-b1 .d-toast span{white-space:normal}
  .zco-b1 .d-toast em{display:none}

  .zco-b2{--e:calc(100cqw / 340);padding:calc(15 * var(--e)) calc(15 * var(--e)) 0}
  .zco-kl{font-size:calc(9.5 * var(--e))}
  .zco-pb1 span{display:none}
  .zco-pbox{margin-top:calc(11 * var(--e));padding:calc(11 * var(--e)) calc(12 * var(--e)) calc(12 * var(--e))}
  .zco-pgross>b{font-size:calc(24 * var(--e))}
  .zco-pgen{font-size:calc(9.5 * var(--e))}
  .zco-ptit{margin-top:calc(12 * var(--e))}
  .zco-tz{min-height:calc(36 * var(--e))}
  .zco-tw>b{font-size:calc(10.5 * var(--e))}
  .zco-tw>span{font-size:calc(9.5 * var(--e))}
  .zco-ts{font-size:calc(9.5 * var(--e))}
  .zco-b2 .d-toast{left:calc(12 * var(--e));right:calc(12 * var(--e));bottom:calc(12 * var(--e));font-size:calc(10 * var(--e))}

  .zco-b3{--e:calc(100cqw / 340)}
  .zco-l3{left:calc(14 * var(--e));top:calc(14 * var(--e));width:auto;right:calc(14 * var(--e));padding:calc(15 * var(--e)) calc(15 * var(--e)) 0}
  .zco-l3k{padding-bottom:calc(10 * var(--e))}
  .zco-l3f,.zco-l3l,.zco-a3 small,.zco-l3s,.zco-d3l,.zco-d3s,.zco-d3k .zco-phase{display:none}
  .zco-l3h{max-width:none;margin-top:calc(10 * var(--e));font-size:calc(16 * var(--e))}
  .zco-auf{gap:calc(5 * var(--e));margin-top:calc(10 * var(--e))}
  .zco-a3{grid-template-columns:calc(17 * var(--e)) minmax(0,1fr);gap:calc(9 * var(--e));align-items:center;padding:calc(9 * var(--e)) calc(10 * var(--e))}
  .zco-cb{width:calc(17 * var(--e));height:calc(17 * var(--e));margin-top:0}
  .zco-a3 b{font-size:calc(11 * var(--e))}
  .zco-d3{top:auto;right:calc(10 * var(--e));bottom:calc(10 * var(--e));width:calc(196 * var(--e));padding:calc(10 * var(--e)) calc(12 * var(--e)) calc(10 * var(--e))}
  .zco-d3k b{font-size:calc(12 * var(--e))}
  .zco-d3z{margin-top:calc(5 * var(--e))}
  .zco-d3z b{font-size:calc(20 * var(--e))}
  .zco-d3bar{margin-top:calc(7 * var(--e))}
  .zco-d3n{margin-top:calc(8 * var(--e));font-size:calc(9.5 * var(--e))}
}
@media (prefers-reduced-motion:reduce){.zco-hero *,.zco-b1 *,.zco-b2 *,.zco-b3 *{transition:none!important;animation:none!important}}