/* cybee v3 · css/de-pictures.css (Task 44, owner ruling 19 Oct 2026: every picture speaks German on German pages). Linked on /de/ and /de-ch/ pages only
   (tools/i18n/l10n.py fix_page). The product captures are English pixels, so on German pages tools/i18n/de_pictures.py swaps each <picture data-de-swap>
   for an HTML redraw of the same screen (menu bar card, first run window): tier 2 in assets/product/README.md, same layout, German words. The redraw scales
   with its box like the capture did: every length is calc(N * --u), N the design pixel (340 wide card, 640 wide window), --u the box width / design width.
   Weights 400 and 500 only (the capture's semibold is drawn at 500). Generated from a px source; edit with care. */
.cy-demb .demb{--u:calc(100cqw / 340)}
.cy-defr .defr{--u:calc(100cqw / 640)}
.cy-de{display:block;container-type:inline-size;position:relative;overflow:hidden;box-sizing:border-box}
.cy-de *{box-sizing:border-box}
.cy-de :is(span,div,p,h3,b,small,i,code){margin:0}
.cy-demb{width:calc(340*var(--u));max-width:100%;background:#F5F5F7;border-radius:14px;box-shadow:0 1px calc(2*var(--u)) rgba(0,0,0,.08),0 calc(12*var(--u)) calc(32*var(--u)) rgba(0,0,0,.12);--w:340}
.demb{font:500 calc(13*var(--u))/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--s-ink);-webkit-font-smoothing:antialiased;padding:calc(15*var(--u)) calc(14*var(--u)) calc(14*var(--u));display:grid;gap:calc(12*var(--u));hyphens:auto}
.demb__head{display:grid;grid-template-columns:calc(21*var(--u)) 1fr;gap:calc(4*var(--u)) calc(11*var(--u));align-items:start;padding-bottom:calc(13*var(--u));border-bottom:1px solid var(--s-line)}
.demb__hex{width:calc(21*var(--u));height:calc(19*var(--u));margin-top:1px;background:var(--s-accent-ink);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.demb__hex.ring{background:var(--s-accent-ink);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,12% 50%,31% 84%,69% 84%,88% 50%,69% 16%,31% 16%,12% 50%,0 50%)}
.demb__hex.you{background:var(--ember)}
.demb__verdict{font-size:calc(15*var(--u));font-weight:500;letter-spacing:-.01em;color:var(--s-ink)}
.demb__meta{grid-column:2;font-size:calc(13*var(--u));font-weight:400;color:var(--s-ink-3);margin-top:calc(-2*var(--u))}
.demb__box{background:var(--s-key);border-radius:10px;padding:calc(12*var(--u));display:grid;gap:calc(8*var(--u))}
.demb__bt{display:flex;align-items:center;gap:calc(9*var(--u));font-weight:500;color:var(--s-ink)}
.demb__rule{width:calc(12*var(--u));height:calc(3*var(--u));flex:none;background:var(--ember)}
.demb__body{font-weight:400;color:var(--s-ink-3);line-height:1.45}
.demb__note{font-size:calc(11.5*var(--u));font-weight:400;color:var(--s-ink-2);line-height:1.4}
.demb__btn{height:calc(28*var(--u));border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff}
.demb__label{font-size:calc(12*var(--u));font-weight:400;color:var(--s-ink-3);margin-bottom:calc(-4*var(--u))}
.demb__checks{display:grid;grid-template-columns:1fr 1fr;gap:calc(7*var(--u)) calc(12*var(--u))}
.demb__check{display:flex;align-items:center;gap:calc(8*var(--u));font-weight:400;color:var(--s-ink-3)}
.demb__check svg{flex:none;width:calc(12*var(--u));height:calc(12*var(--u));color:var(--s-accent-ink)}
.demb__check--you{color:var(--s-ink-ember);font-weight:500}
.demb__mini{flex:none;width:calc(13*var(--u));height:calc(13*var(--u));border-radius:999px;background:var(--ember);color:#fff;position:relative}
.demb__mini::before{content:"";position:absolute;left:50%;top:calc(2.5*var(--u));width:calc(1.6*var(--u));height:calc(5*var(--u));margin-left:calc(-.8*var(--u));background:#fff}
.demb__mini::after{content:"";position:absolute;left:50%;top:calc(8.5*var(--u));width:calc(1.6*var(--u));height:calc(1.6*var(--u));margin-left:calc(-.8*var(--u));background:#fff}
.demb__dash{display:inline-block;width:calc(7*var(--u));height:calc(1.5*var(--u));background:var(--s-ink-3);vertical-align:calc(3*var(--u))}
.demb__meters{display:grid;grid-template-columns:1fr 1fr 1fr 1.25fr;gap:calc(10*var(--u))}
.demb__m{display:grid;gap:calc(2*var(--u));align-content:start;font-size:calc(12*var(--u));font-weight:400;color:var(--s-ink-3)}
.demb__m b{font-size:calc(14*var(--u));font-weight:500;color:var(--s-ink);white-space:nowrap}
.demb__m small{font-size:calc(11*var(--u));font-weight:400;color:var(--s-ink-3)}
.demb__track{display:block;height:calc(3*var(--u));margin-top:calc(4*var(--u));background:color-mix(in srgb,var(--s-ink) 7.5%,transparent)}
.demb__track i{display:block;height:100%;background:color-mix(in srgb,var(--s-ink) 34%,transparent)}
.demb__bar{display:block;height:calc(6*var(--u));border-radius:999px;background:color-mix(in srgb,var(--s-ink) 7%,transparent)}
.demb__read{font-weight:400;color:var(--s-ink-3);margin-top:calc(-2*var(--u))}
.demb__scan{width:calc(156*var(--u));height:calc(28*var(--u));border-radius:6px;background:color-mix(in srgb,var(--s-ink) 6%,transparent);display:flex;align-items:center;justify-content:center;gap:calc(7*var(--u));color:var(--s-ink)}
.demb__scan svg{width:calc(13*var(--u));height:calc(13*var(--u))}
.demb__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:calc(2*var(--u)) calc(10*var(--u));font-weight:400;color:var(--s-ink-3)}
.demb__see{color:var(--s-accent-ink)}

.cy-defr{width:100%;background:#fff;aspect-ratio:640/473;--w:640}
.cy-defr--text{aspect-ratio:640/184}
.defr{position:absolute;inset:0;font-family:var(--font-body);color:var(--s-ink);-webkit-font-smoothing:antialiased;text-align:center;hyphens:auto}
.cy-de .defr__field{position:absolute;left:calc(169.5*var(--u));top:calc(42*var(--u));display:grid;grid-template-columns:repeat(19,calc(13*var(--u)));grid-auto-rows:calc(13*var(--u));gap:calc(3*var(--u))}
.cy-de .defr__field i{border:1px solid var(--s-accent-line);background:var(--s-tint-signal)}
.cy-de .defr__field i[style]{border-color:color-mix(in srgb,var(--s-line-2) var(--t),var(--s-accent-line));background:color-mix(in srgb,#fff var(--t),var(--s-tint-signal))}
.cy-de .defr__field i.d{border:1px dashed var(--s-fade);background:transparent}
.cy-de .defr__field i.g{visibility:hidden}
.cy-de .defr__tile{position:absolute;left:calc(288*var(--u));top:calc(64*var(--u));width:calc(64*var(--u));height:calc(64*var(--u));border-radius:14px;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 0 0 1px var(--s-line),0 calc(2*var(--u)) calc(6*var(--u)) rgba(0,0,0,.06)}
.cy-de .defr__tile .cybee-emblem{--cy-emblem-height:calc(29*var(--u));--wordmark:#2757C9}
.cy-de .defr__txt{position:absolute;left:0;right:0;top:calc(191*var(--u));display:flex;flex-direction:column;align-items:center}
.cy-defr--text .defr__txt{top:calc(13*var(--u))}
.cy-de .defr__h{font:500 calc(43*var(--u))/calc(45*var(--u)) var(--font-display);letter-spacing:-.035em;color:var(--s-ink)}
.cy-de .defr__b{font-size:calc(15.5*var(--u));line-height:calc(28*var(--u));color:var(--s-ink-2);max-width:calc(540*var(--u));hyphens:manual;text-wrap:balance;margin-top:calc(20*var(--u))!important}
.cy-de .defr__facts{display:flex;gap:calc(22*var(--u));justify-content:center;margin-top:calc(16*var(--u))!important;font-size:calc(14*var(--u));line-height:calc(20*var(--u));color:var(--s-ink-2)}
.cy-de .defr__facts span{display:inline-flex;align-items:center;gap:calc(9*var(--u));white-space:nowrap}
.cy-de .defr__facts i{width:calc(6*var(--u));height:calc(6*var(--u));background:var(--blue);flex:none}
.cy-de .defr__facts--sky span{color:var(--s-ink-sky)}
.cy-de .defr__facts--sky i{background:var(--sky)}
.cy-de .defr__foot{position:absolute;left:calc(30*var(--u));right:calc(30*var(--u));bottom:calc(20*var(--u));height:calc(32*var(--u));display:flex;align-items:center;justify-content:space-between}
.cy-de .defr__steps{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:calc(8*var(--u))}
.cy-de .defr__steps i{width:calc(6*var(--u));height:calc(6*var(--u));border:1px solid var(--s-fade)}
.cy-de .defr__steps i.now{background:var(--blue);border-color:var(--blue)}
.cy-de .defr__steps i.done{background:var(--s-fade);border-color:var(--s-fade)}
.cy-de .defr__btn{height:calc(32*var(--u));padding:0 calc(18*var(--u));border-radius:10px;display:inline-flex;align-items:center;font-size:calc(15*var(--u));font-weight:500;white-space:nowrap}
.cy-de .defr__btn.pri{background:var(--blue);color:#fff}
.cy-de .defr__btn.sec{background:color-mix(in srgb,var(--s-ink) 6%,transparent);color:var(--s-ink)}
.cy-de .defr__split{display:flex;gap:calc(2*var(--u))}
.cy-de .defr__split .chev{width:calc(40*var(--u));padding:0;justify-content:center}
.cy-de .defr__ask{position:absolute;left:calc(99*var(--u));top:calc(21*var(--u));width:calc(443*var(--u));height:calc(70*var(--u))}
.cy-de .defr__ask .defr__tile{left:1px;top:0}
.cy-de .defr__line{position:absolute;left:calc(64*var(--u));top:calc(32*var(--u));width:calc(80*var(--u));height:1px;background:var(--s-line-2)}
.cy-de .defr__lbl{position:absolute;left:calc(144*var(--u));top:calc(-18*var(--u));font:400 calc(12*var(--u)) var(--font-mono);letter-spacing:.04em;color:var(--s-ink-3)}
.cy-de .defr__comp{position:absolute;left:calc(144*var(--u));top:0;width:calc(300*var(--u));height:calc(56*var(--u));border-radius:14px;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--sky) 50%,transparent),0 0 calc(14*var(--u)) color-mix(in srgb,var(--sky) 35%,transparent);background:#fff;display:flex;align-items:center;padding:0 calc(12*var(--u)) 0 calc(16*var(--u));justify-content:space-between}
.cy-de .defr__comp code{font:400 calc(17*var(--u)) var(--font-mono);color:var(--s-ink);letter-spacing:.06em}
.cy-de .defr__comp code::after{content:"";display:inline-block;width:1.5px;height:calc(19*var(--u));background:var(--s-ink);margin-left:calc(8*var(--u));vertical-align:calc(-3*var(--u))}
.cy-de .defr__send{width:calc(28*var(--u));height:calc(28*var(--u));border-radius:999px;background:var(--s-ink);color:#fff;display:flex;align-items:center;justify-content:center}
.cy-de .defr__txt--ask{top:calc(110*var(--u))}
.cy-de .defr__txt--ask .defr__facts{margin-top:0!important}
.cy-de .defr__txt--ask .defr__h{margin-top:calc(12*var(--u))!important}
.cy-de .defr__txt--ask .defr__b{margin-top:calc(10*var(--u))!important}
.cy-de .defr__txt--conn{top:calc(109*var(--u))}
.cy-de .defr__txt--conn .defr__b{margin-top:calc(10*var(--u))!important}
.cy-de .defr__link{font-size:calc(14*var(--u));font-weight:500;line-height:calc(20*var(--u));color:var(--s-accent-ink);margin-top:calc(12*var(--u))}
.cy-de .defr__note{width:calc(470*var(--u));margin-top:calc(22*var(--u));padding:calc(14*var(--u)) calc(18*var(--u));border-radius:14px;box-shadow:0 0 0 1px var(--s-line);display:flex;align-items:center;justify-content:space-between;text-align:left}
.cy-de .defr__note b{display:block;font-size:calc(14*var(--u));font-weight:500;color:var(--s-ink)}
.cy-de .defr__note span{font-size:calc(13*var(--u));color:var(--s-ink-3)}
.cy-de .defr__switch{display:block;flex:none;width:calc(38*var(--u));height:calc(22*var(--u));border-radius:999px;background:color-mix(in srgb,var(--s-ink) 10%,transparent);position:relative}
.cy-de .defr__switch::after{content:"";position:absolute;left:calc(2*var(--u));top:calc(2*var(--u));width:calc(18*var(--u));height:calc(18*var(--u));border-radius:999px;background:#fff;box-shadow:0 1px calc(2*var(--u)) rgba(0,0,0,.25)}

/* the places that held the picture */
.cy-stage__card .cy-demb{width:340px;max-width:100%}
[data-cy-switch] .cy-stage__card>.cy-demb{grid-area:c}
@media (max-width:899px){.cy-stage__card .cy-demb{justify-self:center}}
@media (max-width:599px){.cy-stage__card .cy-demb{width:min(340px,100%);min-width:289px}}
.cy-stage--firstrun .cy-frwin .cy-defr{display:block;width:100%;border-radius:0;box-shadow:none}
.cyh-pic--card .cy-demb{width:289px;max-width:100%;box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 20px rgba(0,0,0,.1)}
.hx-screen--fr .cy-defr{display:block;width:100%;border-radius:0}
.pg-emp-foot__crop .cy-demb--foot{width:100%;height:100%;border-radius:0;box-shadow:none}
.cy-demb--foot .demb{height:100%;display:flex;align-items:center;padding:0 calc(14*var(--u))}
.cy-demb--foot .demb__foot{width:100%;flex-wrap:nowrap}