/* GENERATED by tools/site/gen_workshop.py from tools/site/workshop_gfx/page.css and the graphics folders. */
/* workshop page: sections from the site's own parts (.pg-head, .pg-h1, .h3-serif, .ar-faq), graphics in grey cards (.gcard) */
.ws{padding-bottom:24px}
.ws .pg-head{padding:136px 0 72px}
.ws-red{color:#FF3F53}
.ws .spk-eye{display:block;margin-bottom:10px}
.ws .pg-head .spk-eye,.ws-know .spk-eye,.ws-close .spk-eye{display:flex;justify-content:center}
.ws-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.ws-pills span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:#F2F2F2;color:#3A3A3A;font-size:13px;font-weight:500}
.ws-h2{margin:0;font-size:44px;font-weight:500;line-height:1.1;letter-spacing:-.04em;color:#141414;text-wrap:balance}

/* text + grey graphic card */
.ws-split{display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:72px;align-items:center;max-width:1200px;margin:0 auto;padding:72px 0}
.ws-flip{grid-template-columns:600px minmax(0,1fr)}
.ws-txt p{margin:18px 0 0;max-width:470px;font-size:17px;line-height:1.6;color:#6F6F6F}
.ws-gcard{position:relative;width:600px;height:440px;border-radius:24px;background:#F2F2F2;overflow:hidden}
.ws-steps{list-style:none;margin:28px 0 0;padding:0;counter-reset:ws}
.ws-steps li{position:relative;padding:18px 0 18px 44px;border-top:1px solid #EBEBEB;counter-increment:ws}
.ws-steps li:last-child{border-bottom:1px solid #EBEBEB}
.ws-steps li::before{content:counter(ws,decimal-leading-zero);position:absolute;left:0;top:21px;font-family:'Geist Mono',Menlo,monospace;font-size:12px;color:#909090}
.ws-steps b{display:block;font-size:18px;font-weight:500;color:#141414}
.ws-steps p{margin:6px 0 0;max-width:460px;font-size:15px;line-height:1.55;color:#6F6F6F}

/* what is in it for you */
.ws-know{max-width:1200px;margin:0 auto;padding:112px 0 64px;text-align:center}
.ws-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px;text-align:left}
.ws-card{position:relative;padding:28px 26px 30px;border-radius:24px;background:#F2F2F2;opacity:1}
.ws-card-n{display:block;margin-bottom:44px;font-size:44px;font-weight:500;line-height:1;letter-spacing:-.04em;color:#FF3F53;font-variant-numeric:tabular-nums}
.ws-card::before{content:"";position:absolute;left:26px;top:86px;width:28px;height:2px;border-radius:2px;background:#FF3F53;opacity:.35}
@keyframes ws-card-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.ws-give.run .ws-card{animation:ws-card-in .9s cubic-bezier(.22,1,.36,1) both}
.ws-give.run .ws-card:nth-child(2){animation-delay:.08s}.ws-give.run .ws-card:nth-child(3){animation-delay:.16s}.ws-give.run .ws-card:nth-child(4){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){.ws-give.run .ws-card{animation:none}}
.ws-card b{display:block;font-size:19px;font-weight:500;line-height:1.25;letter-spacing:-.01em;color:#141414}
.ws-card p{margin:10px 0 0;font-size:15px;line-height:1.55;color:#6F6F6F}
.ws-know-end{max-width:760px;margin:48px auto 0;font-size:24px;font-weight:500;line-height:1.35;letter-spacing:-.02em;color:#141414;text-wrap:balance}
.ws-know-end span{color:#909090}

/* FAQ: the article FAQ style of the blog */
.ws-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:72px;max-width:1200px;margin:0 auto;padding:88px 0 112px}
.ws-faq-r .ar-faq:first-of-type{margin-top:0}
.ws-faq-r .ar-faq p{max-width:640px;line-height:1.6}

/* close */
.ws-close{max-width:1200px;margin:0 auto 96px;padding:96px 40px 104px;box-sizing:border-box;border-radius:24px;background:#F2F2F2;display:flex;flex-direction:column;align-items:center;text-align:center}
.ws-close-h{margin:0;font-size:56px;font-weight:500;line-height:1.08;letter-spacing:-.045em;color:#141414;text-wrap:balance}
.ws-pill{display:inline-block;width:82px;height:50px;overflow:hidden;border-radius:999px;vertical-align:-6px}
.ws-pill img{display:block;width:100%;height:100%;object-fit:cover}
.ws-close-p{margin:18px 0 30px;font-size:18px;line-height:1.5;color:#6F6F6F}
.ws-li{background:#141414}
.ws-li:hover{background:#000000}
.ws-li svg{flex:none}
.ws-origin{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px 0 0;font-size:15px;line-height:1.4;color:#6F6F6F}
.ws-flag{flex:none;width:18px;height:12px;border-radius:2px;background:linear-gradient(#C8102E 0 33.34%,#FFFFFF 33.34% 66.67%,#C8102E 66.67%);box-shadow:0 0 0 .5px rgba(20,20,20,.18)}

@media (max-width:1180px){
  .ws-split,.ws-flip{grid-template-columns:minmax(0,1fr);gap:40px;padding:56px 0}
  .ws-flip .ws-gcard{order:2}
  .ws-gcard{margin:0 auto;max-width:100%}
  .ws-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ws-faq{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:760px){
  .ws .pg-head{padding:112px 0 40px}.ws-h2{font-size:32px}
  .ws-gcard{width:100%;height:400px}
  .ws-know{padding:72px 0 40px}.ws-cards{grid-template-columns:minmax(0,1fr)}
  .ws-faq{padding:56px 0 72px}
  .ws-close{margin-bottom:64px;padding:64px 20px 72px}.ws-close-h{font-size:36px}.ws-pill{width:62px;height:38px;vertical-align:-5px}
  .ws-origin{flex-direction:column;gap:8px}
}

/* who it is (not) for */
.ws-fit{max-width:1200px;margin:0 auto;padding:64px 0 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:72px;align-items:start}
.ws-fit-head p{margin:18px 0 0;max-width:420px;font-size:17px;line-height:1.6;color:#6F6F6F}
.ws-fit-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.ws-fit-c{padding:28px 26px 26px;border-radius:24px;background:#F2F2F2}
.ws-fit-k{display:block;font-family:'Geist Mono',Menlo,monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#909090}
.ws-fit-c ul{list-style:none;margin:16px 0 0;padding:0}
.ws-fit-c li{position:relative;padding:12px 0 12px 18px;border-top:1px solid #E6E6E6;font-size:15.5px;line-height:1.45;color:#141414}
.ws-fit-c li:first-child{border-top:0}
.ws-fit-c li::before{content:"";position:absolute;left:0;top:20px;width:7px;height:7px;border-radius:50%;background:#B0B0B0}
.ws-fit-no li{color:#6F6F6F}
.ws-fit-no li::before{background:#FF3F53}
@media (max-width:1180px){.ws-fit{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:760px){.ws-fit{padding:40px 0 8px}.ws-fit-g{grid-template-columns:minmax(0,1fr)}}

/* fit widget section */
.ws-fitw{max-width:1200px;margin:0 auto;padding:72px 0 24px}

.ws-give{margin-top:44px;text-align:left}
.ws-js .ws-give:not(.run) .ws-card{opacity:0}

/* graphic wsa */
.wsa{position:absolute;inset:0;font-family:'Uncut Sans','Helvetica Neue',Arial,sans-serif;color:#141414;-webkit-font-smoothing:antialiased}
.wsa *{box-sizing:border-box}
.wsa-mono{font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:#909090;font-weight:400}

/* ---------- document ---------- */
.wsa-doc{position:absolute;left:36px;top:58px;width:392px;height:420px;background:#fff;border:1px solid #EBEBEB;border-radius:14px;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.04);overflow:hidden}
.wsa-doc-hd{display:flex;align-items:center;gap:9px;height:46px;padding:0 18px;border-bottom:1px solid #F4F4F4}
.wsa-doc-t{font-size:13px;font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsa-doc-bd{padding:18px 22px 0;transition:opacity .35s cubic-bezier(.22,1,.36,1)}
.wsa-h{font-size:14px;font-weight:500;margin:0 0 6px;color:#141414}
.wsa-p{margin:0 0 18px;font-size:13px;line-height:1.6;color:#6F6F6F;max-width:300px}
.wsa-w{color:#3A3A3A;min-height:42px;margin-bottom:26px}
.wsa-later{color:#C4C4C4;margin-bottom:34px}
.wsa-cur{display:inline-block;width:1.5px;height:16px;margin-left:1px;vertical-align:-3px;background:#FF3F53;border-radius:1px}
.wsa.is-idle .wsa-cur{animation:wsa-blink 1.1s steps(1,end) infinite}
.wsa.is-pulled .wsa-doc-bd{opacity:.42}
@keyframes wsa-blink{0%,55%{opacity:1}56%,100%{opacity:0}}

/* ---------- notification stack ---------- */
.wsa-stack{position:absolute;right:24px;top:22px;width:300px;height:170px}
.wsa-t{position:absolute;left:0;right:0;top:0;transform-origin:50% 100%;
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .6s cubic-bezier(.22,1,.36,1)}
.wsa-t[data-d="-1"]{opacity:0;visibility:hidden}
.wsa-t[data-d="0"]{transform:none}
.wsa-t[data-d="1"]{transform:translateY(64px) scale(.97)}
.wsa-t[data-d="2"]{transform:translateY(72px) scale(.92)}
.wsa-t[data-d="3"],.wsa-t[data-d="4"],.wsa-t[data-d="5"]{transform:translateY(76px) scale(.86);opacity:0}
.wsa-t:nth-child(1){z-index:1}.wsa-t:nth-child(2){z-index:2}.wsa-t:nth-child(3){z-index:3}
.wsa-t:nth-child(4){z-index:4}.wsa-t:nth-child(5){z-index:5}.wsa-t:nth-child(6){z-index:6}
.wsa-tc{transition:box-shadow .6s;display:flex;align-items:center;gap:11px;padding:10px 12px 10px 10px;background:#fff;border:1px solid #EBEBEB;border-radius:13px;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.04)}
.wsa-t.is-in .wsa-tc{animation:wsa-drop .62s cubic-bezier(.22,1,.36,1) both;animation-play-state:paused}
.run .wsa-t.is-in .wsa-tc{animation-play-state:running}
@keyframes wsa-drop{0%{opacity:0;transform:translateY(-22px) scale(.92)}60%{opacity:1;transform:translateY(3px) scale(1.01)}100%{opacity:1;transform:none}}
.wsa-src{flex:none;width:36px;height:36px;border-radius:9px;background:#F4F4F4;display:grid;place-items:center;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.05em;color:#3A3A3A}
.wsa-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wsa-tx b{font-weight:500;font-size:13px;color:#141414;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsa-tx i{font-style:normal;font-size:12px;color:#6F6F6F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsa-sub{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.wsa-tm{flex:none;font-size:10.5px}
.wsa-tc>*{transition:opacity .5s cubic-bezier(.22,1,.36,1)}
.wsa-t[data-d="2"] .wsa-tc>*,.wsa-t[data-d="3"] .wsa-tc>*{opacity:0}
.wsa-t[data-d="2"] .wsa-tc{box-shadow:0 2px 6px rgba(0,0,0,.04)}

/* ---------- counter ---------- */
.wsa-count{position:absolute;right:26px;bottom:24px;width:240px;padding:13px 16px 12px;background:#fff;border:1px solid #EBEBEB;border-radius:14px;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.04);z-index:10}
.wsa-count-hd{display:flex;justify-content:space-between;align-items:baseline}
.wsa-count-l{font-size:13px;color:#6F6F6F}
.wsa-ex{font-size:9.5px;color:#B0B0B0}
.wsa-count-row{display:flex;align-items:flex-end;justify-content:space-between;margin:4px 0 10px}
.wsa-range{font-size:10.5px;padding-bottom:6px}
.wsa-odo{color:#FF3F53;display:inline-block;height:38px;overflow:hidden;font-size:34px;line-height:38px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.wsa-col{display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.wsa-col span{height:38px}
/* timeline 09:00-09:30, one mark per interruption */
.wsa-tl{position:relative;height:14px;margin:0 0 11px}
.wsa-tl:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#DCDCDC}
.wsa-tl b{position:absolute;top:0;width:2px;height:14px;margin-left:-1px;border-radius:1px;background:#FF3F53;transform:scaleY(0);
  transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.wsa-tl b.on{transform:none}
.wsa-gap{position:absolute;left:48%;width:20%;top:0;bottom:0;border-radius:3px;background:#EBEBEB;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.wsa.is-done .wsa-gap{transform:none}
.wsa-count-ft{font-size:12px;color:#6F6F6F;padding-top:10px;border-top:1px solid #F4F4F4;display:flex;justify-content:space-between;align-items:center}
.wsa-count-ft .wsa-mono{color:#3A3A3A;font-size:11px}

/* ---------- mobile ---------- */
@media (max-width:560px){
  .wsa-doc{left:14px;top:96px;width:318px}
  .wsa-doc-bd{padding:16px 18px 0}
  .wsa-p{max-width:none;font-size:12.5px;margin-bottom:16px}
  .wsa-h{font-size:13.5px}
  .wsa-later{margin-bottom:22px}
  .wsa-later:last-child{display:none}
  .wsa-stack{right:12px;top:16px;width:300px}
  .wsa-t[data-d="1"]{transform:translateY(8px) scale(.95)}
  .wsa-t[data-d="1"] .wsa-tc>*{opacity:0}
  .wsa-t[data-d="2"]{transform:translateY(15px) scale(.9)}
  .wsa-t[data-d="3"],.wsa-t[data-d="4"],.wsa-t[data-d="5"]{transform:translateY(15px) scale(.9);opacity:0}
  .wsa-tc{padding:8px 11px 8px 8px;gap:10px}
  .wsa-src{width:32px;height:32px}
  .wsa-count{right:12px;bottom:14px;width:214px;padding:10px 13px 11px}
  .wsa-count-ft{display:none}
  .wsa-count-row{margin:0 0 6px}
  .wsa-odo{font-size:28px;height:32px;line-height:32px}
  .wsa-col span{height:32px}
  .wsa-range{padding-bottom:4px}
  .wsa-tl{margin:0;height:12px}
  .wsa-tl b{height:12px}
}

@media (prefers-reduced-motion:reduce){
  .wsa *,.wsa{transition:none!important;animation:none!important}
}
.wsa-count-ft .wsa-mono{opacity:0;transform:translateY(4px);transition:opacity .5s cubic-bezier(.22,1,.36,1) .25s,transform .5s cubic-bezier(.3,1.5,.5,1) .25s}
.wsa.is-done .wsa-count-ft .wsa-mono{opacity:1;transform:none}

/* real app logos in the notification source tile */
.wsa-src{background:#FFFFFF;box-shadow:inset 0 0 0 1px #EFEFEF}
.wsa-src img{display:block;width:22px;height:22px;object-fit:contain}
@media (max-width:560px){.wsa-src img{width:20px;height:20px}}

/* graphic wsb */
/* wsb — "So läuft die Stunde": Videocall hinten, Ablauf-Panel vorne */
.wsb{position:absolute;inset:0;font-family:'Uncut Sans','Helvetica Neue',Arial,sans-serif;color:#141414;-webkit-font-smoothing:antialiased}
.wsb *{box-sizing:border-box}
.wsb-mono{font-family:'Geist Mono',ui-monospace,monospace;font-size:10.5px;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#909090;font-weight:400}

/* ---------- back: video call window ---------- */
.wsb-call{position:absolute;left:34px;top:34px;width:396px;background:#fff;border:1px solid #EBEBEB;border-radius:14px;overflow:hidden;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.04)}
.wsb-call-hd{display:flex;align-items:center;gap:9px;height:46px;padding:0 18px;border-bottom:1px solid #F4F4F4}
.wsb-live{flex:none;width:7px;height:7px;border-radius:50%;background:#FF3F53;box-shadow:0 0 0 3px rgba(255,63,83,.14)}
.wsb-call-t{flex:1;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsb-clock{flex:none;font-size:11px;color:#6F6F6F;font-variant-numeric:tabular-nums}
.wsb-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}
.wsb-tile{position:relative;height:206px;border-radius:10px;background:#F4F4F4;display:flex;justify-content:center;padding-top:40px}
.wsb-av{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;font-size:20px;font-weight:500;letter-spacing:-.01em}
.wsb-av-m{background:#141414;color:#fff}
.wsb-av-d{background:#fff;color:#6F6F6F;box-shadow:inset 0 0 0 1px #E6E6E6;font-size:17px}
.wsb-name{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:6px;background:#fff;font-size:11.5px;line-height:1.2;color:#3A3A3A;box-shadow:0 1px 2px rgba(0,0,0,.05)}

/* ---------- front: the hour ---------- */
.wsb-panel{position:absolute;right:26px;bottom:26px;width:396px;padding:18px 20px 20px;background:#fff;border:1px solid #EBEBEB;border-radius:14px;z-index:2;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.04)}
.wsb-big{display:flex;align-items:baseline;gap:6px;margin-top:10px;line-height:1}
.wsb-n{font-size:46px;font-weight:400;letter-spacing:-.035em}
.wsb-u{font-size:20px;font-weight:400;color:#909090}

/* timeline: 25 / 25 / 10 */
.wsb-bar{position:relative;height:14px;margin-top:20px}
.wsb-track,.wsb-fill{position:absolute;inset:0;display:flex;gap:5px}
.wsb-track i,.wsb-fill i{display:block;height:100%;border-radius:7px}
.wsb-s1,.wsb-s2{flex:25 1 0}
.wsb-s3{flex:10 1 0}
.wsb-track i{background:#F2F2F2}
.wsb-fill .wsb-s1{background:#DCDCDC}
.wsb-fill .wsb-s2{background:#8FD4A6}
.wsb-fill .wsb-s3{background:#FF3F53}
.wsb-fill{clip-path:inset(-2px 100% -2px 0)}

/* playhead */
.wsb-headw{position:absolute;left:0;top:0;bottom:0;width:100%;pointer-events:none}
.wsb-knob{position:absolute;left:-11px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 4px 10px rgba(0,0,0,.16)}

/* labels sit right under their segment */
.wsb-labels{display:flex;gap:5px;margin-top:14px}
.wsb-l{display:flex;flex-direction:column;gap:6px;min-width:0}
.wsb-l1,.wsb-l2{flex:25 1 0}
.wsb-l3{flex:10 1 0;align-items:flex-end;text-align:right;white-space:nowrap}
.wsb-m{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;line-height:1;letter-spacing:.02em;color:#909090}
.wsb-l b{font-weight:500;font-size:14.5px;line-height:1.25;color:#141414;white-space:nowrap}
.wsb-l2 .wsb-m{color:#1A7F45}
.wsb-l3 .wsb-m{color:#E5223A}

/* ---------- motion: plays once after .run ---------- */
.wsb-call{animation:wsb-rise .9s cubic-bezier(.22,1,.36,1) 0s both}
.wsb-av,.wsb-live{animation:wsb-pop .5s cubic-bezier(.3,1.5,.5,1) both}
.wsb-av-m{animation-delay:.3s}
.wsb-av-d{animation-delay:.42s}
.wsb-live{animation-delay:.5s}
.wsb-name{animation:wsb-fade .5s cubic-bezier(.22,1,.36,1) .5s both}
.wsb-panel{animation:wsb-rise2 .95s cubic-bezier(.22,1,.36,1) .55s both}
/* 3s linear = 60 min; 25 min at +1.25s, 50 min at +2.5s */
.wsb-fill{animation:wsb-clip 3s linear 1.35s both}
.wsb-headw{animation:wsb-move 3s linear 1.35s both}
/* out uses forwards only: a backwards fill would pin scale(1) and swallow the pop */
.wsb-knob{animation:wsb-pop .45s cubic-bezier(.3,1.5,.5,1) 1.05s both,wsb-out .45s cubic-bezier(.22,1,.36,1) 4.4s forwards}
.wsb-l{opacity:.32}
.wsb-l1{animation:wsb-on .5s cubic-bezier(.22,1,.36,1) 1.35s both}
.wsb-l2{animation:wsb-on .5s cubic-bezier(.22,1,.36,1) 2.6s both}
.wsb-l3{animation:wsb-on .5s cubic-bezier(.22,1,.36,1) 3.85s both}

.wsb-call,.wsb-av,.wsb-live,.wsb-name,.wsb-panel,.wsb-fill,.wsb-headw,.wsb-knob,.wsb-l{animation-play-state:paused}
.run .wsb-call,.run .wsb-av,.run .wsb-live,.run .wsb-name,.run .wsb-panel,.run .wsb-fill,.run .wsb-headw,.run .wsb-knob,.run .wsb-l{animation-play-state:running}

@keyframes wsb-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* opaque early so the call window never shows through the front panel */
@keyframes wsb-rise2{0%{opacity:0;transform:translateY(26px) scale(.98)}28%{opacity:1}100%{opacity:1;transform:none}}
@keyframes wsb-clip{from{clip-path:inset(-2px 100% -2px 0)}to{clip-path:inset(-2px 0 -2px 0)}}
@keyframes wsb-move{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes wsb-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes wsb-out{from{transform:scale(1);opacity:1}to{transform:scale(.4);opacity:0}}
@keyframes wsb-on{from{opacity:.32;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes wsb-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- mobile ---------- */
@media (max-width:560px){
  .wsb-call{left:14px;top:16px;width:300px;height:420px}
  .wsb-call-hd{height:42px;padding:0 14px}
  .wsb-tiles{padding:10px;gap:6px}
  .wsb-tile{height:150px;padding-top:40px}
  .wsb-av{width:48px;height:48px;font-size:17px}
  .wsb-av-d{font-size:15px}
  .wsb-name{left:6px;top:6px;bottom:auto;font-size:11px;padding:3px 7px}
  .wsb-panel{right:12px;bottom:14px;width:316px;padding:15px 16px 17px}
  .wsb-n{font-size:40px}
  .wsb-u{font-size:18px}
  .wsb-bar{margin-top:16px;height:12px}
  .wsb-knob{width:20px;height:20px;margin-top:-10px;left:-10px}
  .wsb-l b{font-size:14px}
  .wsb-m{font-size:10.5px}
}

@media (prefers-reduced-motion:reduce){
  .wsb *{animation:none!important}
  .wsb-fill{clip-path:none}
  .wsb-knob{display:none}
  .wsb-l{opacity:1}
}

/* graphic wsc */
/* wsc — "Was sich lohnt. Und was nicht." Hours x rate per process, verdict, red total in front. Same layered panels as wsa. */
.wsc{position:absolute;inset:0;--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.3,1.5,.5,1);
  --mono:'Geist Mono',ui-monospace,monospace;--red:#FF3F53;
  --shadow:0 22px 44px -22px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.04);
  font-family:'Uncut Sans','Helvetica Neue',Arial,sans-serif;color:#141414;-webkit-font-smoothing:antialiased}
.wsc *{box-sizing:border-box}
.wsc-mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:#909090;font-weight:400}

/* ---------- main panel: three processes ---------- */
.wsc-doc{position:absolute;left:36px;top:54px;width:404px;height:420px;background:#fff;border:1px solid #EBEBEB;border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;
  opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.wsc.is-in .wsc-doc{opacity:1;transform:none}
.wsc-doc-hd{display:flex;align-items:center;height:46px;padding:0 20px;border-bottom:1px solid #F4F4F4}
.wsc-doc-t{font-size:13px;font-weight:500}
.wsc-row{padding:15px 20px 15px;border-bottom:1px solid #F4F4F4}
.wsc-row:last-child{border-bottom:0}
.wsc-l1{display:flex;align-items:center;justify-content:space-between;gap:12px;height:26px}
.wsc-name{font-size:14px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;transition:color .6s var(--ease)}
.wsc-l2{display:flex;align-items:baseline;gap:7px;margin-top:7px;font-family:var(--mono);font-size:12.5px;line-height:18px;color:#8A8A8A;
  font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .6s var(--ease)}
.wsc-h{color:#3A3A3A;transition:color .6s var(--ease)}
.wsc-x,.wsc-eq{opacity:0;transform:translateX(-6px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.wsc-eq{transition-delay:.08s}
.wsc-row.is-calc .wsc-x,.wsc-row.is-calc .wsc-eq{opacity:1;transform:none}
.wsc-l2 .wsc-odo{color:#141414;font-weight:500;transition:opacity .4s var(--ease),color .6s var(--ease)}

/* verdict pills */
.wsc-pill{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;line-height:1;padding:6px 11px;border-radius:999px;white-space:nowrap;
  transform-origin:right center;opacity:0;transform:scale(.6)}
.wsc-row.is-ok .wsc-pill{opacity:1;transform:none;animation:wsc-pop .5s var(--spring) both}
.wsc-yes{background:#E8F6EC;color:#1A7F45;padding-left:8px}
.wsc-pill svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wsc-no{background:#F2F2F2;color:#7A7A7A}
/* not worth it: the row steps back */
.wsc-row.is-dim .wsc-name{color:#B4B4B4}
.wsc-row.is-dim .wsc-l2,.wsc-row.is-dim .wsc-h,.wsc-row.is-dim .wsc-odo{color:#C4C4C4}

/* ---------- rate chip (front, top right) ---------- */
.wsc-rate{position:absolute;right:24px;top:24px;width:232px;z-index:2;display:flex;align-items:center;gap:11px;padding:10px 14px 10px 10px;
  background:#fff;border:1px solid #EBEBEB;border-radius:13px;box-shadow:var(--shadow);opacity:0}
.wsc.is-rate .wsc-rate{opacity:1;animation:wsc-drop .62s var(--ease) both}
.wsc-src{flex:none;width:36px;height:36px;border-radius:9px;background:#F4F4F4;display:grid;place-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:#3A3A3A}
.wsc-rate-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.wsc-rate-tx b{font-weight:500;font-size:13px}
.wsc-rate-tx i{font-style:normal;font-family:var(--mono);font-size:12px;color:#6F6F6F;font-variant-numeric:tabular-nums}

/* ---------- total (front, bottom right) ---------- */
.wsc-tot{position:absolute;right:26px;bottom:24px;width:276px;z-index:3;padding:13px 16px 12px;background:#fff;border:1px solid #EBEBEB;border-radius:14px;
  box-shadow:var(--shadow);opacity:0;transform:translateY(18px) scale(.97);transform-origin:50% 100%;
  transition:opacity .7s var(--ease),transform .9s var(--ease)}
.wsc.is-tot .wsc-tot{opacity:1;transform:none}
.wsc-tot-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.wsc-tot-l{font-size:13px;color:#6F6F6F;white-space:nowrap}
.wsc-ex{font-size:9.5px;color:#B0B0B0}
.wsc-tot-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:4px}
.wsc-sum{color:#909090;font-size:10.5px;padding-bottom:7px;white-space:nowrap;opacity:0;transition:opacity .6s var(--ease) .35s}
.wsc.is-tot .wsc-sum{opacity:1}

/* ---------- counting numbers (width fixed to the final value, left aligned: no gap after "=", nothing after them shifts) ---------- */
.wsc-odo{display:inline-block;text-align:left;white-space:nowrap;font-variant-numeric:tabular-nums;opacity:0}
.wsc-odo.is-roll{opacity:1}
.wsc-big{color:var(--red);font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:40px}

@keyframes wsc-pop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}
@keyframes wsc-drop{0%{opacity:0;transform:translateY(-22px) scale(.92)}60%{opacity:1;transform:translateY(3px) scale(1.01)}100%{opacity:1;transform:none}}

/* ---------- mobile ---------- */
@media (max-width:560px){
  .wsc-doc{left:14px;top:56px;width:316px}
  .wsc-doc-hd{height:42px;padding:0 16px}
  .wsc-row{padding:12px 16px 12px}
  .wsc-l1{height:24px}
  .wsc-name{font-size:13.5px}
  .wsc-pill{font-size:12px;padding:5px 9px}
  .wsc-yes{padding-left:7px}
  .wsc-l2{font-size:11.5px;gap:6px;margin-top:5px}
  .wsc-rate{right:12px;top:14px;width:206px;padding:8px 12px 8px 8px;gap:10px}
  .wsc-src{width:32px;height:32px}
  .wsc-tot{right:12px;bottom:14px;width:236px;padding:10px 13px 10px}
  .wsc-tot-l{font-size:12px}
  .wsc-big{font-size:28px;line-height:34px}
  .wsc-sum{font-size:9.5px;padding-bottom:6px}
}

@media (prefers-reduced-motion:reduce){
  .wsc,.wsc *{transition:none!important;animation:none!important}
}

/* widget wsf */
/* "Für wen der Workshop (nicht) ist": two cards side by side, Kresna-like (graphite card / Spark red card with soft radial light). Entrance once on .run */
.wsf{font-family:'Uncut Sans','Helvetica Neue',Arial,sans-serif;color:#141414;-webkit-font-smoothing:antialiased}
.wsf *{box-sizing:border-box}
.wsf-eye:empty::after{content:attr(data-eye);display:block;font-family:'Caveat',cursive;font-size:22px;color:#909090;margin-bottom:10px}
.wsf .spk-eye{display:block;margin-bottom:10px}
.wsf-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:end;margin-bottom:48px}
.wsf-h{margin:0;font-size:clamp(34px,3.4vw,48px);font-weight:500;line-height:1.1;letter-spacing:-.04em;text-wrap:balance}
.wsf-intro{margin:0 0 4px;max-width:470px;font-size:17px;line-height:1.55;color:#6F6F6F}
.wsf-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.wsf-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:400px;padding:34px 36px 32px;border-radius:24px;color:#FFFFFF}
.wsf-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 85% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 60%)}
.wsf-no{background:linear-gradient(160deg,#3A3A3A 0%,#1C1C1C 100%);box-shadow:0 22px 44px -22px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.04)}
.wsf-yes{background:linear-gradient(160deg,#FB4457 0%,#EF3449 52%,#D3263C 100%);box-shadow:0 22px 44px -22px rgba(170,20,40,.32),0 2px 6px rgba(0,0,0,.04)}
.wsf-yes .wsf-k{color:rgba(255,255,255,.88)}
.wsf-yes .wsf-l{background:rgba(120,0,16,.2)}
.wsf-yes .wsf-l li{color:rgba(255,255,255,.9)}
.wsf-k{position:relative;font-family:'Geist Mono',Menlo,monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.wsf-t{position:relative;margin:12px 0 0;font-size:44px;font-weight:500;line-height:1.05;letter-spacing:-.04em}
.wsf-t{min-height:46px}
.wsf-l{position:relative;list-style:none;margin:96px 0 0;padding:8px;border-radius:16px;background:rgba(0,0,0,.16)}
.wsf-no .wsf-l{background:rgba(255,255,255,.05)}
.wsf-l li{position:relative;padding:13px 14px 13px 38px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.86)}
.wsf-l li+li{border-top:1px solid rgba(255,255,255,.12)}
.wsf-l li b{font-weight:500;color:#FFFFFF}
.wsf-no .wsf-l li{color:rgba(255,255,255,.7)}
.wsf-x{position:absolute;left:13px;top:15.5px;width:16px;height:16px;overflow:visible}
.wsf-x path{fill:none;stroke:#FF6B7B;stroke-width:2;stroke-linecap:round}
.wsf-ck{position:absolute;left:13px;top:15.5px;width:16px;height:16px;overflow:visible}
.wsf-ck path{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:0}
.wsf-star{position:absolute;top:-70px;right:-70px;width:300px;height:300px;pointer-events:none;fill:#FFFFFF;opacity:.075}

/* entrance */
@keyframes wsf-rise{from{opacity:0;transform:translateY(28px) scale(.985)}to{opacity:1;transform:none}}
@keyframes wsf-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wsf-card{animation:wsf-rise 1s cubic-bezier(.22,1,.36,1) both}
.wsf-yes{animation-delay:.12s}
.wsf-l li{animation:wsf-in .6s cubic-bezier(.22,1,.36,1) both}
.wsf-no .wsf-l li:nth-child(1){animation-delay:.45s}.wsf-no .wsf-l li:nth-child(2){animation-delay:.55s}.wsf-no .wsf-l li:nth-child(3){animation-delay:.65s}
.wsf-yes .wsf-l li:nth-child(1){animation-delay:.6s}.wsf-yes .wsf-l li:nth-child(2){animation-delay:.7s}.wsf-yes .wsf-l li:nth-child(3){animation-delay:.8s}
@keyframes wsf-draw{from{stroke-dashoffset:16}to{stroke-dashoffset:0}}
@keyframes wsf-pop{from{transform:scale(.6)}to{transform:none}}
@keyframes wsf-star{from{opacity:0;transform:rotate(-20deg) scale(.9)}to{opacity:.075;transform:none}}
.wsf-ck{transform-origin:50% 60%;animation:wsf-pop .5s cubic-bezier(.3,1.5,.5,1) both}
.wsf-ck path{animation:wsf-draw .45s cubic-bezier(.22,1,.36,1) both}
.wsf-yes li:nth-child(1) .wsf-ck,.wsf-yes li:nth-child(1) .wsf-ck path{animation-delay:.85s}
.wsf-yes li:nth-child(2) .wsf-ck,.wsf-yes li:nth-child(2) .wsf-ck path{animation-delay:.97s}
.wsf-yes li:nth-child(3) .wsf-ck,.wsf-yes li:nth-child(3) .wsf-ck path{animation-delay:1.09s}
.wsf-star{animation:wsf-star 1.8s cubic-bezier(.22,1,.36,1) .3s both}
.wsf-card,.wsf-l li,.wsf-ck,.wsf-ck path,.wsf-star{animation-play-state:paused}
.run .wsf-card,.run .wsf-l li,.run .wsf-ck,.run .wsf-ck path,.run .wsf-star{animation-play-state:running}

@media (max-width:900px){.wsf-head{grid-template-columns:minmax(0,1fr);row-gap:16px;margin-bottom:32px}.wsf-cards{grid-template-columns:minmax(0,1fr)}.wsf-card{min-height:0;padding:26px 18px 18px}.wsf-k,.wsf-t{padding:0 6px}.wsf-t{font-size:36px;min-height:0}.wsf-l{margin-top:28px}.wsf-star{width:180px;height:180px;top:-48px;right:-48px}}
@media (prefers-reduced-motion:reduce){.wsf-card,.wsf-l li,.wsf-ck,.wsf-ck path,.wsf-star{animation:none}}

/* benefit cards wsg */