/* Agenturen (zag): Hanke Recruiting, Indigo #4B3FD9. HERO + B2 + vorne in B3 = Kundenseite hell (Talqio buchen.css in den Hanke-Farben),
   B1 + hinten in B3 = Dashboard dunkel (Talqio konto.css: Kontakte mit Team-Pool „Zum Übernehmen“, Kalender). {n} = n Einheiten der Kartenbreite */

.zag-hero,.zag-b2,.zag-ang{--k:#4B3FD9}
.zag-hero svg,.zag-b1 svg,.zag-b2 svg,.zag-b3 svg{display:block;flex:none}
.zag-hero svg,.zag-b2 .zag-b2-l svg,.zag-b2 .zag-b2-r svg,.zag-ang svg,.zag-abs svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Zeichen der Demo-Firma: Indigo-Quadrat mit H, Schriftzug */
.zag-wort{display:flex;align-items:center;gap:calc(8 * var(--e));white-space:nowrap}
.zag-wort>i{display:grid;place-items:center;width:calc(30 * var(--e));height:calc(30 * var(--e));border-radius:calc(8 * var(--e));background:var(--k)}
.zag-wort>i svg{width:calc(17 * var(--e));height:calc(17 * var(--e));fill:none!important;stroke:#fff!important;stroke-width:2.6!important}
.zag-wort b{font:700 calc(17 * var(--e))/1 var(--display);letter-spacing:-.025em;color:#0B0B0C}
.zag-wort small{margin-left:calc(-3 * var(--e));font-size:calc(17 * var(--e));font-weight:400;line-height:1;letter-spacing:-.02em;color:#6B6880}

/* ---------- HERO: Anfrage einer Firma am Handy (390 × 844, oben 58 frei, unten 30 frei) ---------- */
.zag-hero{padding-top:calc(56 * var(--e));background:#FFFFFF;color:#2B2A28}
.zag-nav{display:flex;align-items:center;justify-content:space-between;height:calc(54 * var(--e));padding:0 calc(20 * var(--e));border-bottom:1px solid rgba(11,11,12,.08)}
.zag-nav-r{display:flex;align-items:center;gap:calc(14 * var(--e))}
.zag-nav-l{font-size:calc(14 * var(--e));font-weight:500;color:#5F5D58}
.zag-rund{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:calc(4 * var(--e));width:calc(38 * var(--e));height:calc(38 * var(--e));border-radius:50%;box-shadow:inset 0 0 0 1px rgba(11,11,12,.14)}
.zag-rund i{display:block;width:calc(15 * var(--e));height:calc(1.8 * var(--e));border-radius:2px;background:#0B0B0C}
.zag-seite{padding:calc(20 * var(--e)) calc(20 * var(--e)) 0}
.zag-h{font:650 calc(25 * var(--e))/1.15 var(--display);letter-spacing:-.02em;color:#0B0B0C}
.zag-sub{margin-top:calc(6 * var(--e));font-size:calc(14.5 * var(--e));line-height:1.45;color:#5F5D58}
.zag-f{margin-top:calc(20 * var(--e))}
.zag-lbl{margin-bottom:calc(9 * var(--e));font-size:calc(14.5 * var(--e));font-weight:600;line-height:1.3;color:#0B0B0C}
.zag-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(8 * var(--e))}
.zag-chip{display:flex;align-items:center;gap:calc(9 * var(--e));height:calc(46 * var(--e));padding:0 calc(11 * var(--e));border-radius:calc(12 * var(--e));background:#F4F3F0;box-shadow:inset 0 0 0 1px rgba(11,11,12,.14);
  font-size:calc(14 * var(--e));font-weight:500;color:#0B0B0C;white-space:nowrap;transition:box-shadow .15s,background .15s}
.zag-chip::before{content:"";flex:none;width:calc(18 * var(--e));height:calc(18 * var(--e));border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(11,11,12,.18);transition:background .15s,box-shadow .15s}
.zag-hero .zag-chip.on{background:color-mix(in srgb,var(--k) 8%,#F4F3F0);box-shadow:inset 0 0 0 1.5px var(--k)}
.zag-hero .zag-chip.on::before{background:var(--k) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/62% no-repeat;box-shadow:none}
.zag-out{display:flex;align-items:baseline;gap:calc(6 * var(--e));margin:calc(-2 * var(--e)) 0 calc(8 * var(--e));font:700 calc(30 * var(--e))/1 var(--display);letter-spacing:-.025em;color:#0B0B0C;font-variant-numeric:tabular-nums}
.zag-out b{font-weight:inherit}
.zag-out small{margin-left:calc(2 * var(--e));font:500 calc(14 * var(--e))/1 var(--body);letter-spacing:0;color:#8F8D87}
.zag-sl{position:relative;height:calc(28 * var(--e))}
.zag-sl::before,.zag-sl-f{content:"";position:absolute;left:0;top:50%;height:calc(6 * var(--e));margin-top:calc(-3 * var(--e));border-radius:999px}
.zag-sl::before{right:0;background:rgba(11,11,12,.12)}
.zag-sl-f{display:block;width:var(--p);background:var(--k);transition:width .9s var(--ease)}
.zag-sl-k{position:absolute;top:50%;left:var(--p);width:calc(26 * var(--e));height:calc(26 * var(--e));margin:calc(-13 * var(--e)) 0 0 calc(-13 * var(--e));border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 calc(4 * var(--e)) calc(12 * var(--e)) rgba(0,0,0,.22);transition:left .9s var(--ease)}
.zag-ends{display:flex;justify-content:space-between;margin-top:calc(4 * var(--e));font-size:calc(12.5 * var(--e));color:#8F8D87}
.zag-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(4 * var(--e));padding:calc(4 * var(--e));border-radius:calc(14 * var(--e));background:#F4F3F0;box-shadow:inset 0 0 0 1px rgba(11,11,12,.1)}
.zag-seg span{display:grid;place-items:center;height:calc(40 * var(--e));border-radius:calc(10 * var(--e));font-size:calc(14 * var(--e));font-weight:500;color:#45433F;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.zag-hero .zag-seg .on{background:#fff;color:#0B0B0C;font-weight:600;box-shadow:0 0 0 1.5px var(--k),0 calc(2 * var(--e)) calc(6 * var(--e)) rgba(11,11,12,.08)}
.zag-ta{min-height:calc(74 * var(--e));padding:calc(12 * var(--e)) calc(14 * var(--e));border-radius:calc(12 * var(--e));background:#F4F3F0;box-shadow:inset 0 0 0 1px rgba(11,11,12,.14);font-size:calc(16 * var(--e));line-height:1.45;color:#0B0B0C;transition:box-shadow .2s ease}
.zag-hero .zag-ta.fokus{box-shadow:inset 0 0 0 1.5px var(--k),0 0 0 calc(3 * var(--e)) color-mix(in srgb,var(--k) 20%,transparent)}
.zag-hero .zag-ta.leer .zag-ta-t{color:#8F8D87}
.zag-caret{display:inline-block;width:1.5px;height:1.15em;margin-left:1px;vertical-align:-.2em;background:var(--k);opacity:0}
.zag-hero .zag-ta.fokus .zag-caret{opacity:1}
.zag-b{display:grid;height:calc(52 * var(--e));margin-top:calc(22 * var(--e));border-radius:999px;background:var(--k);color:#fff;font-size:calc(16 * var(--e));font-weight:600;transition:transform .14s ease,background .2s ease}
.zag-b>span{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--e));transition:opacity .25s ease}
.zag-b svg{width:calc(17 * var(--e));height:calc(17 * var(--e));stroke-width:2.6}
.zag-b-ok{opacity:0}
.zag-hero .zag-b.druck{transform:scale(.97);background:color-mix(in srgb,var(--k) 84%,#000)}
.zag-hero .zag-b.weg .zag-b-t{opacity:0}
.zag-hero .zag-b.weg .zag-b-ok{opacity:1}
.zag-finger i{display:block;width:calc(34 * var(--e));height:calc(34 * var(--e));margin:calc(-17 * var(--e)) 0 0 calc(-17 * var(--e));border-radius:50%;background:rgba(40,40,46,.26);
  box-shadow:0 0 0 calc(1.5 * var(--e)) rgba(255,255,255,.85),0 calc(3 * var(--e)) calc(10 * var(--e)) rgba(0,0,0,.18);transition:transform .16s ease,background .16s ease}
.zag-finger.tipp i{transform:scale(.8);background:rgba(40,40,46,.42)}

/* ---------- B1: Team-Pool im Dashboard, Verteilung nach Jahresgehalt ---------- */
.zag-b1{--e:calc(100cqw / 640);display:flex;flex-direction:column;padding:calc(18 * var(--e)) calc(20 * var(--e)) 0;background:#0B0B0C;color:#D6D4CE}
.zag-b1 .d-head{flex:none;margin-bottom:calc(12 * var(--e))}
.zag-b1 .fn-pills span{height:calc(21 * var(--e));font-size:calc(9.5 * var(--e))}
.zag-regeln{flex:none;display:flex;flex-wrap:wrap;gap:calc(6 * var(--e));margin-bottom:calc(12 * var(--e))}
.zag-regel{display:inline-flex;align-items:center;gap:calc(6 * var(--e));height:calc(24 * var(--e));padding:0 calc(9 * var(--e));border-radius:calc(7 * var(--e));background:#141416;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);font-size:calc(9.5 * var(--e));font-weight:600;color:#F4F3F0;white-space:nowrap}
.zag-regel u{text-decoration:none;font-weight:400;color:#A9A7A1}
.zag-regel i{width:calc(6 * var(--e));height:calc(6 * var(--e));border-radius:50%;flex:none}
.zag-regel i.v{background:#5B8DEF}
.zag-regel i.a{background:#6F6D68}
.zag-regel i.e{background:#E5B84B}
.zag-liste{flex:1;min-height:0;overflow:hidden;border-radius:calc(10 * var(--e)) calc(10 * var(--e)) 0 0;background:#141416;border:1px solid rgba(244,243,240,.09);border-bottom:0;
  -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)}
.zag-kopf,.zag-z{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) calc(80 * var(--e)) calc(128 * var(--e));align-items:center;gap:calc(12 * var(--e));padding:0 calc(12 * var(--e))}
.zag-kopf{height:calc(26 * var(--e));font-size:calc(8.5 * var(--e));font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6F6D68;border-bottom:1px solid rgba(244,243,240,.09)}
.zag-z{min-height:calc(44 * var(--e));padding-top:calc(6 * var(--e));padding-bottom:calc(6 * var(--e));border-bottom:1px solid rgba(244,243,240,.09);transition:background 1.4s ease}
.zag-b1 .zag-z.frisch{background:rgba(255,72,0,.08);transition:background .3s ease}
.zag-name,.zag-pr{min-width:0}
.zag-name b,.zag-pr 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}
.zag-pr b{font-weight:500}
.zag-name .zag-stm{display:none}
.zag-jhr{font-style:normal}
.zag-name span,.zag-pr 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}
.zag-bud{font-size:calc(10.5 * var(--e));font-weight:600;color:#F4F3F0;font-variant-numeric:tabular-nums;white-space:nowrap}
.zag-klein .zag-bud{color:#A9A7A1}
.zag-st{display:grid;justify-items:start;align-items:center;min-width:0}
.zag-st>*{grid-area:1/1;transition:opacity .3s ease,transform .45s var(--ease)}
.zag-ueb{display:inline-flex;align-items:center;height:calc(23 * var(--e));padding:0 calc(10 * var(--e));border-radius:999px;background:#FF4800;color:#fff;font-size:calc(9.5 * var(--e));font-weight:600;white-space:nowrap;transition:transform .14s ease,background .2s,opacity .3s ease}
.zag-b1 .zag-ueb.druck{transform:scale(.92);background:#FF6A2A}
.zag-wer,.zag-abs{display:inline-flex;align-items:center;gap:calc(6 * var(--e));font-size:calc(10 * var(--e));color:#A9A7A1;white-space:nowrap}
.zag-gross .zag-wer{color:#F4F3F0;font-weight:500}
.zag-abs svg{width:calc(12 * var(--e));height:calc(12 * var(--e));stroke-width:1.8}
.zag-pool{font-style:normal;font-size:calc(10 * var(--e));font-weight:600;color:#FF6A2A;white-space:nowrap}
.zag-b1 .zag-gross.ueb .zag-ueb,.zag-b1 .zag-gross:not(.ueb) .zag-wer,.zag-b1 .zag-klein.abs .zag-pool,.zag-b1 .zag-klein:not(.abs) .zag-abs{opacity:0;transform:translateX(calc(-4 * var(--e)));pointer-events:none}
.zag-b1 .d-tip{white-space:nowrap}
.zag-b1 .d-toast{right:calc(20 * var(--e));bottom:calc(20 * var(--e))}

/* ---------- B2: Unterlagen direkt in der Anfrage (Kundenseite hell, Schritt der Anfrage) ---------- */
.zag-b2{--e:calc(100cqw / 440);display:flex;flex-direction:column;padding:calc(22 * var(--e)) calc(24 * var(--e)) calc(20 * var(--e));background:#FFFFFF;color:#2B2A28}
.zag-bar{display:block;height:calc(4 * var(--e));border-radius:999px;background:rgba(11,11,12,.04);box-shadow:inset 0 0 0 1px rgba(11,11,12,.08);overflow:hidden}
.zag-bar i{display:block;width:80%;height:100%;border-radius:inherit;background:var(--k)}
.zag-n{margin:calc(7 * var(--e)) 0 calc(10 * var(--e));font-size:calc(9.5 * var(--e));font-weight:600;color:#8F8D87}
.zag-b2-h{font:650 calc(18 * var(--e))/1.2 var(--display);letter-spacing:-.02em;color:#0B0B0C}
.zag-b2-sub{margin-top:calc(4 * var(--e));font-size:calc(11 * var(--e));line-height:1.45;color:#5F5D58}
.zag-drop{display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--e));height:calc(54 * var(--e));margin-top:calc(12 * var(--e));border-radius:calc(12 * var(--e));border:1.5px dashed rgba(11,11,12,.2);background:#F7F6F3;
  font-size:calc(11 * var(--e));color:#5F5D58;text-align:center;transition:border-color .2s,background .2s,transform .25s var(--ease)}
.zag-drop svg{width:calc(18 * var(--e));height:calc(18 * var(--e));color:var(--k)}
.zag-drop b{font-weight:600;color:#0B0B0C}
.zag-drop u{color:var(--k);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.zag-b2 .zag-drop.drag{border-color:var(--k);background:color-mix(in srgb,var(--k) 7%,#fff);transform:scale(1.015)}
.zag-files{display:grid;margin-top:calc(10 * var(--e))}
.zag-file{display:grid;grid-template-columns:calc(28 * var(--e)) minmax(0,1fr) calc(20 * var(--e));align-items:center;gap:calc(10 * var(--e));height:calc(37 * var(--e));margin-bottom:calc(5 * var(--e));padding:0 calc(10 * var(--e)) 0 calc(6 * var(--e));border-radius:calc(10 * var(--e));box-shadow:inset 0 0 0 1px rgba(11,11,12,.1)}
.zag-typ{display:grid;place-items:center;height:calc(26 * var(--e));border-radius:calc(6 * var(--e));font-size:calc(7.5 * var(--e));font-weight:700;letter-spacing:.04em;color:#fff}
.zag-typ[data-t=pdf],.zag-stapel i[data-t=pdf]{background:#D4483F}
.zag-typ[data-t=docx],.zag-stapel i[data-t=docx]{background:#2F6BD8}
.zag-fm{position:relative;min-width:0}
.zag-fm b{display:block;font-size:calc(11 * var(--e));font-weight:600;line-height:1.3;color:#0B0B0C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zag-fm>span{display:block;font-size:calc(9.5 * var(--e));line-height:1.3;color:#8F8D87;transition:opacity .25s}
.zag-fm em{font-style:normal}
.zag-pg{position:absolute;left:0;right:0;bottom:calc(1 * var(--e));height:calc(4 * var(--e));border-radius:999px;background:rgba(11,11,12,.08);overflow:hidden;transition:opacity .25s ease}
.zag-pg u{display:block;width:0;height:100%;border-radius:inherit;background:var(--k)}
.zag-file.laedt .zag-pg u{width:100%;transition:width var(--d,1s) cubic-bezier(.4,.1,.3,1)}
.zag-file:not(.fertig) .zag-fm>span{opacity:0}
.zag-file.fertig .zag-pg{opacity:0}
.zag-fok{display:grid;place-items:center;width:calc(20 * var(--e));height:calc(20 * var(--e));border-radius:50%;background:#1F8A55;color:#fff;opacity:0;transform:scale(.5);transition:opacity .25s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}
.zag-fok svg{width:calc(11 * var(--e));height:calc(11 * var(--e));stroke-width:3}
.zag-file.fertig .zag-fok{opacity:1;transform:none}
.zag-weiter{display:inline-flex;align-items:center;gap:calc(4 * var(--e));height:calc(28 * var(--e));margin-top:calc(6 * var(--e));padding:0 calc(14 * var(--e));border-radius:999px;background:var(--k);font-size:calc(10.5 * var(--e));font-weight:600;color:#fff}
.zag-weiter svg{width:calc(10 * var(--e));height:calc(10 * var(--e));stroke-width:2.4}
.zag-b2 .d-cur.gast span{background:#4B3FD9}
.zag-stapel{position:absolute;left:calc(10 * var(--e));top:calc(12 * var(--e));display:block;width:calc(40 * var(--e));height:calc(44 * var(--e));opacity:0;transform:scale(.7);transform-origin:0 0;transition:opacity .25s ease,transform .35s var(--ease)}
.zag-stapel i{position:absolute;display:grid;place-items:center;width:calc(30 * var(--e));height:calc(38 * var(--e));border-radius:calc(5 * var(--e));font-style:normal;font-size:calc(7 * var(--e));font-weight:700;letter-spacing:.04em;color:#fff;box-shadow:0 calc(4 * var(--e)) calc(12 * var(--e)) rgba(0,0,0,.25),0 0 0 1.5px #fff}
.zag-stapel i:nth-child(1){left:calc(10 * var(--e));top:calc(0 * var(--e));transform:rotate(9deg)}
.zag-stapel i:nth-child(2){left:calc(5 * var(--e));top:calc(2 * var(--e));transform:rotate(3deg)}
.zag-stapel i:nth-child(3){left:0;top:calc(4 * var(--e));transform:rotate(-4deg)}
.zag-stapel b{position:absolute;left:calc(26 * var(--e));top:calc(-6 * var(--e));display:grid;place-items:center;min-width:calc(16 * var(--e));height:calc(16 * var(--e));padding:0 calc(4 * var(--e));border-radius:999px;background:#0B0B0C;font-size:calc(9 * var(--e));font-weight:700;color:#fff}
.zag-b2 .d-cur.traegt .zag-stapel{opacity:1;transform:none}
.zag-b2 .d-cur.traegt span{opacity:0}

/* ---------- B3: Kick-off direkt nach der Zusage (vorn das Angebot hell, hinten der Kalender dunkel) ---------- */
.zag-b3{--e:calc(100cqw / 640);background:#0B0B0C}
.zag-kal{position:absolute;left:calc(-18 * var(--e));top:calc(28 * var(--e));width:calc(404 * var(--e));bottom:calc(-24 * var(--e));padding:calc(18 * var(--e)) calc(18 * var(--e)) calc(18 * var(--e)) calc(36 * var(--e));border-radius:calc(14 * var(--e));background:#0B0B0C;
  box-shadow:inset 0 0 0 1px rgba(244,243,240,.11),inset 0 1px 0 rgba(244,243,240,.12),0 0 calc(80 * var(--e)) calc(-20 * var(--e)) rgba(255,72,0,.16)}
.zag-kal-k{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(10 * var(--e));margin-bottom:calc(12 * var(--e))}
.zag-kal-k b{display:block;font:600 calc(15 * var(--e))/1.15 var(--display);letter-spacing:-.015em;color:#F4F3F0}
.zag-kal-k div span{display:block;margin-top:calc(4 * var(--e));font-size:calc(9.5 * var(--e));color:#A9A7A1}
.zag-kal .fn-pills span{height:calc(20 * var(--e));padding:0 calc(8 * var(--e));font-size:calc(9 * var(--e))}
.zag-woche{position:relative;display:grid;grid-template-columns:calc(34 * var(--e)) repeat(5,minmax(0,1fr));grid-template-rows:calc(28 * var(--e)) repeat(6,calc(42 * var(--e)));border-radius:calc(10 * var(--e));background:#141416;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);overflow:hidden;
  background-image:linear-gradient(90deg,rgba(244,243,240,.07) 1px,transparent 1px);background-size:calc((100% - calc(34 * var(--e))) / 5) 100%;background-position:calc(34 * var(--e)) 0}
.zag-wt{grid-row:1;display:flex;align-items:center;justify-content:center;gap:calc(4 * var(--e));font-size:calc(8.5 * var(--e));font-weight:600;color:#A9A7A1;border-bottom:1px solid rgba(244,243,240,.09)}
.zag-wt b{font-weight:600;color:#F4F3F0}
.zag-uhr{grid-column:1/-1;padding:calc(4 * var(--e)) 0 0 calc(6 * var(--e));border-top:1px solid rgba(244,243,240,.06);font-size:calc(8 * var(--e));color:#6F6D68;font-variant-numeric:tabular-nums}
.zag-woche>.zag-uhr:nth-child(6){border-top:0}
.zag-ev{position:relative;z-index:1;margin:calc(3 * var(--e)) calc(3 * var(--e));padding:calc(4 * var(--e)) calc(5 * var(--e)) calc(4 * var(--e)) calc(7 * var(--e));border-radius:calc(5 * var(--e));background:rgba(255,72,0,.1);box-shadow:inset calc(2 * var(--e)) 0 0 rgba(255,106,42,.55);
  font-size:calc(8 * var(--e));line-height:1.3;color:#A9A7A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zag-ev b{display:block;font-size:calc(8.5 * var(--e));font-weight:600;color:#F4F3F0;overflow:hidden;text-overflow:ellipsis}
.zag-ev-neu{background:rgba(255,72,0,.24);box-shadow:inset calc(2 * var(--e)) 0 0 #FF6A2A;color:#FFC9B0;transition:opacity .4s ease,transform .6s cubic-bezier(.3,1.4,.5,1),box-shadow .6s ease}
.zag-b3 .zag-ev-neu:not(.da){opacity:0;transform:translateY(calc(-8 * var(--e))) scale(.96)}
.zag-b3 .zag-ev-neu.hell{box-shadow:inset calc(2 * var(--e)) 0 0 #FF6A2A,0 0 0 calc(2 * var(--e)) rgba(255,106,42,.45),0 0 calc(18 * var(--e)) rgba(255,72,0,.5)}
.zag-kal .d-toast{right:calc(60 * var(--e));bottom:calc(40 * var(--e))}
.zag-ang{position:absolute;left:calc(336 * var(--e));top:calc(44 * var(--e));z-index:2;width:calc(284 * var(--e));padding:calc(18 * var(--e));border-radius:calc(16 * var(--e));background:#FFFFFF;color:#2B2A28;
  box-shadow:0 0 0 1px rgba(11,11,12,.08),0 calc(30 * var(--e)) calc(70 * var(--e)) calc(-18 * var(--e)) rgba(0,0,0,.85),0 calc(8 * var(--e)) calc(24 * var(--e)) rgba(0,0,0,.35)}
.zag-ang-k{display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--e))}
.zag-wort-s>i{width:calc(24 * var(--e));height:calc(24 * var(--e));border-radius:calc(7 * var(--e))}
.zag-wort-s>i svg{width:calc(14 * var(--e));height:calc(14 * var(--e))}
.zag-wort-s b,.zag-wort-s small{font-size:calc(14 * var(--e))}
.zag-status{display:grid;font-size:calc(9.5 * var(--e));font-weight:600;line-height:1}
.zag-status>span{grid-area:1/1;justify-self:end;display:inline-flex;align-items:center;gap:calc(4 * var(--e));height:calc(22 * var(--e));padding:0 calc(9 * var(--e));border-radius:999px;white-space:nowrap;transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.5,.5,1)}
.zag-status .o{background:#F4F3F0;color:#5F5D58;box-shadow:inset 0 0 0 1px rgba(11,11,12,.1)}
.zag-status .j{background:#E3F2E9;color:#155C38}
.zag-status .j svg{width:calc(11 * var(--e));height:calc(11 * var(--e));stroke-width:3}
.zag-status.an .o,.zag-status:not(.an) .j{opacity:0}
.zag-status:not(.an) .j{transform:scale(.8)}
.zag-ang-n{margin-top:calc(16 * var(--e));font-size:calc(10 * var(--e));color:#8F8D87}
.zag-ang-h{margin-top:calc(3 * var(--e));font:650 calc(18 * var(--e))/1.2 var(--display);letter-spacing:-.02em;color:#0B0B0C}
.zag-ang-p{margin-top:calc(4 * var(--e));font-size:calc(11 * var(--e));color:#5F5D58}
.zag-ang-p b{font-weight:600;color:#0B0B0C}
.zag-annehmen>div>*{margin-top:calc(14 * var(--e))}
.zag-ang-b{display:grid;place-items:center;height:calc(36 * var(--e));border-radius:999px;background:var(--k);font-size:calc(11.5 * var(--e));font-weight:600;color:#fff;transition:transform .14s ease,background .2s}
.zag-ang-b.druck{transform:scale(.96);background:color-mix(in srgb,var(--k) 84%,#000)}
.zag-ko-in{margin-top:calc(14 * var(--e));padding-top:calc(14 * var(--e));border-top:1px solid rgba(11,11,12,.08)}
.zag-ko-h{font-size:calc(12 * var(--e));font-weight:600;color:#0B0B0C}
.zag-ko-sub{margin-top:calc(2 * var(--e));font-size:calc(10 * var(--e));color:#8F8D87}
.zag-tage{display:grid;gap:calc(6 * var(--e));margin-top:calc(10 * var(--e))}
.zag-tage>div{display:grid;grid-template-columns:calc(66 * var(--e)) repeat(2,minmax(0,1fr));align-items:center;gap:calc(6 * var(--e))}
.zag-tag{font-size:calc(10 * var(--e));font-weight:600;color:#0B0B0C;white-space:nowrap}
.zag-slot{display:grid;place-items:center;height:calc(30 * var(--e));border-radius:calc(9 * var(--e));box-shadow:inset 0 0 0 1px rgba(11,11,12,.14);font-size:calc(11 * var(--e));font-weight:600;color:#0B0B0C;font-variant-numeric:tabular-nums;transition:background .15s,color .15s,box-shadow .15s}
.zag-ang .zag-slot.on{background:var(--k);color:#fff;box-shadow:none}
.zag-ko-fuss{display:grid;margin-top:calc(12 * var(--e))}
.zag-ko-fuss>*{grid-area:1/1;transition:opacity .3s ease,transform .45s var(--ease)}
.zag-ko-b{display:grid;place-items:center;height:calc(34 * var(--e));border-radius:999px;background:var(--k);font-size:calc(11 * var(--e));font-weight:600;color:#fff}
.zag-ko-b.druck{transform:scale(.96);background:color-mix(in srgb,var(--k) 84%,#000)}
.zag-ko-ok{display:flex;align-items:center;gap:calc(8 * var(--e));min-height:calc(34 * var(--e));padding:0 calc(11 * var(--e));border-radius:calc(10 * var(--e));background:#E8F4EC;font-size:calc(10.5 * var(--e));line-height:1.35;color:#1B4D33}
.zag-ko-ok b{font-weight:600}
.zag-ko-ok svg{width:calc(14 * var(--e));height:calc(14 * var(--e));color:#1F8A55;stroke-width:2.6}
.zag-ko-fuss.fertig .zag-ko-b,.zag-ko-fuss:not(.fertig) .zag-ko-ok{opacity:0}
.zag-ko-fuss:not(.fertig) .zag-ko-ok{transform:translateY(calc(4 * var(--e)))}
.zag-b3 .d-cur.gast span{background:#4B3FD9}

/* ---------- Tablet: Kacheln volle Breite im Format 16:10 ---------- */
@container (min-width:600px){
  .zag-b2{--e:calc(100cqw / 640);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(32 * var(--e));align-items:center;padding:calc(36 * var(--e)) calc(40 * var(--e))}
  .zag-b2-h{font-size:calc(21 * var(--e))}
  .zag-b2-sub{font-size:calc(12 * var(--e))}
  .zag-drop{flex-direction:column;height:calc(150 * var(--e));font-size:calc(12 * var(--e))}
  .zag-drop svg{width:calc(22 * var(--e));height:calc(22 * var(--e))}
  .zag-files{margin-top:0}
}
/* ---------- Handy: quadratische Kacheln, ca. 295 px ---------- */
@container (max-width:480px){
  .zag-b1{--e:calc(100cqw / 360);padding:calc(16 * var(--e)) calc(16 * var(--e)) 0}
  .zag-b1 .d-sub{display:none}
  .zag-b1 .d-h1{font-size:calc(17 * var(--e))}
  .zag-regel-e{display:none}
  .zag-regeln{gap:calc(5 * var(--e))}
  .zag-regel{height:calc(24 * var(--e));padding:0 calc(8 * var(--e));font-size:calc(9.5 * var(--e))}
  .zag-kopf,.zag-z{grid-template-columns:minmax(0,1fr) calc(54 * var(--e)) calc(102 * var(--e));gap:calc(7 * var(--e));padding:0 calc(10 * var(--e))}
  .zag-kopf span:nth-child(2),.zag-pr,.zag-jhr,.zag-name .zag-ort{display:none}
  .zag-name .zag-stm{display:block}
  .zag-z{min-height:calc(48 * var(--e))}
  .zag-name b{font-size:calc(11.5 * var(--e))}
  .zag-name span{font-size:calc(10 * var(--e))}
  .zag-bud{font-size:calc(11 * var(--e))}
  .zag-wer,.zag-abs{font-size:calc(10.5 * var(--e))}
  .zag-ueb{height:calc(25 * var(--e));font-size:calc(10.5 * var(--e))}
  .zag-b1 .d-tip{font-size:calc(10.5 * var(--e))}
  .zag-b1 .d-toast{left:calc(16 * var(--e));right:calc(16 * var(--e))}

  .zag-b3{--e:calc(100cqw / 360)}
  .zag-ang{left:calc(14 * var(--e));top:calc(14 * var(--e));width:calc(332 * var(--e));padding:calc(15 * var(--e))}
  .zag-ko-sub{display:none}
  .zag-ang-n{margin-top:calc(12 * var(--e));font-size:calc(10.5 * var(--e))}
  .zag-ang-h{margin-top:calc(2 * var(--e));font-size:calc(17 * var(--e))}
  .zag-ang-p{font-size:calc(11.5 * var(--e))}
  .zag-tage>div:nth-child(2){display:none}
  .zag-tage>div{grid-template-columns:calc(78 * var(--e)) repeat(2,minmax(0,1fr))}
  .zag-tag{font-size:calc(11 * var(--e))}
  .zag-slot{font-size:calc(12 * var(--e));height:calc(32 * var(--e))}
  .zag-ko-h{font-size:calc(12.5 * var(--e))}
  .zag-ko-ok{font-size:calc(11 * var(--e))}
  .zag-kal{left:calc(40 * var(--e));top:calc(254 * var(--e));width:auto;right:calc(-16 * var(--e));padding:calc(30 * var(--e)) calc(16 * var(--e)) calc(16 * var(--e)) calc(16 * var(--e))}
  .zag-kal-k{display:none}
  .zag-woche{grid-template-columns:calc(34 * var(--e)) repeat(3,minmax(0,1fr));grid-template-rows:calc(26 * var(--e)) 0 repeat(5,calc(38 * var(--e)));background-size:calc((100% - calc(34 * var(--e))) / 3) 100%}
  .zag-woche>.zag-uhr:nth-child(6){display:none}
  .zag-woche>.zag-uhr:nth-child(7){border-top:0}
  .zag-wt:nth-of-type(n+4),.zag-woche .zag-ev[style*="grid-column:5"],.zag-woche .zag-ev[style*="grid-column:6"]{display:none}
  .zag-ev{font-size:calc(9 * var(--e))}
  .zag-ev b{font-size:calc(9.5 * var(--e))}
  .zag-kal .d-toast{display:none}
}
@container (max-width:360px){
  .zag-b2{--e:calc(100cqw / 360);padding:calc(16 * var(--e)) calc(18 * var(--e)) calc(14 * var(--e))}
  .zag-b2-sub{display:none}
  .zag-n{margin:calc(6 * var(--e)) 0 calc(8 * var(--e));font-size:calc(10 * var(--e))}
  .zag-b2-h{font-size:calc(17 * var(--e))}
  .zag-drop{height:calc(50 * var(--e));margin-top:calc(10 * var(--e));font-size:calc(11 * var(--e))}
  .zag-file{height:calc(36 * var(--e));margin-bottom:calc(5 * var(--e))}
  .zag-fm b{font-size:calc(11.5 * var(--e))}
  .zag-fm>span{font-size:calc(10 * var(--e))}
  .zag-weiter{margin-top:calc(4 * var(--e))}
}
@media (prefers-reduced-motion:reduce){.zag-hero *,.zag-b1 *,.zag-b2 *,.zag-b3 *{transition:none!important}}