/* =====================================================
   URBANET – B2B Cases (Vorlage 14), Scope .cases,
   gemappt auf Palette/Schriften der Website.
   ===================================================== */
.cases{display:block;font-family:var(--font);background:var(--bg);color:var(--ice);font-size:17px;line-height:1;-webkit-font-smoothing:antialiased;overflow-x:clip;--font-display:'Arial Black','Helvetica Neue',Helvetica,sans-serif;--head:64px;padding-top:var(--head)}
.cases{
  --bg:#0a1a30;
  --bg-2:#0d2038;
  --panel:#112743;
  --panel-2:#153052;
  --line:rgba(120,190,245,.15);
  --line-2:rgba(120,190,245,.3);
  --ice:#E8F5FC;
  --mute:#94abc6;
  --faint:#62809f;
  --blue:#009EE5;
  --blue-soft:rgba(0,158,229,.14);
  --yellow:#EFFF00;
  --yellow-soft:rgba(239,255,0,.1);
  --font:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --r:12px;
  --max:1240px;
}
.cases *{box-sizing:border-box;margin:0;padding:0}
.cases ::selection{background:var(--yellow);color:var(--bg)}
.cases a{color:inherit}
.cases ul{list-style:none}
.cases .wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.cases :focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}
.cases h1, .cases h2, .cases h3{font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.98;font-stretch:78%}
.cases h1{font-size:clamp(48px,8.6vw,118px)}
.cases h2{font-size:clamp(34px,4.8vw,62px)}
.cases h3{font-size:clamp(20px,2vw,24px);line-height:1.1}
.cases h1 em, .cases h2 em, .cases h3 em{font-style:normal;color:var(--blue)}
.cases .num{font-stretch:68%;font-weight:800;letter-spacing:-.01em;line-height:.9}
.cases .lead{font-size:clamp(17px,1.8vw,20px);color:var(--mute);max-width:560px;margin-top:22px;line-height:1.55}
.cases .lead strong{color:var(--ice)}
.cases .marker{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;color:var(--blue);margin-bottom:22px}
.cases .marker::before{content:"";width:28px;height:2px;background:var(--blue)}
.cases .marker .n{color:var(--yellow);font-stretch:70%;font-size:16px}
.cases .nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.cases .lft{display:flex;align-items:center;gap:22px}
.cases .logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;letter-spacing:.02em;text-decoration:none;text-transform:uppercase}
.cases .logo svg{width:26px;height:26px}
.cases .back{display:none;align-items:center;gap:8px;font-size:14px;font-weight:700;text-decoration:none;
  color:var(--ice);border:1px solid var(--line-2);border-radius:999px;padding:8px 16px}
.cases .back:hover{border-color:var(--yellow)}
.cases .btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;text-decoration:none;
  padding:15px 30px;border-radius:999px;transition:transform .15s,background .15s}
.cases .btn.y{background:var(--yellow);color:var(--bg)}
.cases .btn.y:hover{transform:translateY(-2px)}
.cases .btn.o{border:1px solid var(--line-2);color:var(--ice)}
.cases .btn.o:hover{border-color:var(--blue)}
.cases .tags{display:flex;flex-wrap:wrap;gap:7px}
.cases .tags li{font-size:13px;font-weight:600;color:var(--mute);border:1px solid var(--line-2);padding:5px 12px;border-radius:6px}
.cases .pts{display:grid;gap:0;border-top:1px solid var(--line)}
.cases .pts li{position:relative;padding:15px 0 15px 26px;border-bottom:1px solid var(--line);color:var(--mute);font-size:16.5px;line-height:1.5}
.cases .pts li::before{content:"";position:absolute;left:0;top:23px;width:8px;height:8px;background:var(--yellow)}
.cases .pts li b{color:var(--ice);font-weight:700}
.cases .chips{display:flex;flex-wrap:wrap;gap:8px}
.cases .chips span{background:var(--blue-soft);color:var(--ice);font-weight:700;font-size:15px;padding:8px 15px;border-radius:999px}
.cases .derive{margin-top:30px;background:var(--yellow-soft);border:1px solid rgba(239,255,0,.35);border-radius:var(--r);padding:22px 26px}
.cases .derive .k{font-size:13px;font-weight:800;color:var(--yellow);margin-bottom:6px}
.cases .derive p{font-size:clamp(18px,2vw,22px);font-weight:700;line-height:1.35}
.cases .derive em{font-style:normal;color:var(--yellow)}
.cases .quote{border-left:3px solid var(--blue);padding:4px 0 4px 22px;margin:26px 0}
.cases .quote blockquote{font-size:clamp(19px,2.3vw,24px);font-weight:600;line-height:1.35}
.cases .quote figcaption{margin-top:8px;font-size:14px;color:var(--faint)}
.cases .media{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-height:280px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--faint);font-size:14px;font-weight:600;
  background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/32px 32px,var(--bg-2)}
.cases .media.wide{min-height:380px}
.cases .media::before, .cases .media::after{content:"";position:absolute;width:18px;height:18px;border-color:var(--yellow);border-style:solid}
.cases .media::before{top:14px;left:14px;border-width:2px 0 0 2px}
.cases .media::after{bottom:14px;right:14px;border-width:0 2px 2px 0}
.cases .media img, .cases .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cases .gal{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.cases .bar{height:10px;background:rgba(120,190,245,.12);border-radius:3px;overflow:hidden}
.cases .bar i{display:block;height:100%;width:0;background:var(--blue);border-radius:3px;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.cases .bar.y i{background:var(--yellow)}
.cases .on .bar i, .cases .bar.on i{width:var(--w)}
.cases .gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cases .gauges.side{grid-template-columns:auto 1fr;align-items:start}
.cases .gauge{background:var(--panel);border-radius:var(--r);padding:24px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cases .gauge .ring{position:relative;width:118px;height:118px}
.cases .gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.cases .gauge circle{fill:none;stroke-width:9}
.cases .gauge .trk{stroke:rgba(120,190,245,.14)}
.cases .gauge .val{stroke:var(--blue);stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.cases .gauge.hi .val{stroke:var(--yellow)}
.cases .gauge .ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px}
.cases .gauge p{font-size:15px;color:var(--mute);line-height:1.4}
.cases .gauge p b{color:var(--ice)}
.cases .hb{display:grid;gap:18px}
.cases .hb-row{display:grid;grid-template-columns:minmax(120px,190px) 1fr 100px;align-items:center;gap:18px}
.cases .hb-row span{font-size:15px;font-weight:600;color:var(--mute)}
.cases .hb-row b{font-size:30px;text-align:right}
.cases .hb-row.hi span{color:var(--ice)}
.cases .hb-row.hi b{color:var(--yellow)}
.cases .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cases .stat{background:var(--bg-2);padding:26px 24px}
.cases .stat b{display:block;font-size:clamp(46px,6vw,70px);color:var(--ice)}
.cases .stat span{display:block;margin-top:10px;font-size:14.5px;color:var(--mute)}
.cases .panel{background:var(--panel);border-radius:var(--r);padding:28px}
.cases .view{display:none}
.cases .view.active{display:block}
.cases section{padding:110px 0}
.cases .hero-b2b{min-height:calc(100vh - 72px);display:flex;flex-direction:column;justify-content:center;position:relative;padding:90px 0 110px}
.cases .hero-in{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;width:100%}
.cases .hero-b2b .tag{display:inline-block;border:1px solid var(--yellow);color:var(--yellow);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin-bottom:34px}
.cases .hero-b2b h1{font-size:clamp(50px,7.6vw,118px);line-height:.92}
.cases .hero-b2b .sub{margin-top:30px;max-width:560px;font-size:clamp(17px,1.9vw,20px);color:var(--mute);line-height:1.55}
.cases .scrollcue-b2b{position:absolute;bottom:34px;left:max(28px,calc((100% - var(--max))/2 + 28px));font-size:11px;letter-spacing:.2em;color:var(--faint);text-transform:uppercase;display:flex;align-items:center;gap:10px}
.cases .scrollcue-b2b .bar{width:34px;height:1px;background:var(--faint);position:relative;overflow:hidden;border-radius:0}
.cases .scrollcue-b2b .bar::after{content:"";position:absolute;inset:0;background:var(--yellow);animation:slide 2s infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.cases .matrix svg{width:100%;height:auto;display:block;overflow:visible}
.cases .matrix text{font-family:var(--font)}
.cases .matrix .dots{fill:rgba(120,190,245,.16)}
.cases .matrix .cross{stroke:var(--line-2);stroke-width:1.5;fill:none}
.cases .matrix .corner{stroke:var(--blue);stroke-width:2;fill:none;opacity:.7}
.cases .matrix .ql{fill:rgba(148,171,198,.38);font-size:24px;font-weight:800;text-transform:uppercase;font-stretch:72%;transition:fill .4s}
.cases .matrix .ql.on{fill:var(--ice)}
.cases .matrix .qu{stroke:var(--yellow);stroke-width:3;opacity:0;transition:opacity .4s}
.cases .matrix .qu.on{opacity:1}
.cases .matrix .axt{fill:var(--mute);font-size:12px;font-weight:700}
.cases .matrix .axn{fill:var(--blue);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.cases .matrix #spot{transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .5s}
.cases .matrix .mk{cursor:pointer}
.cases .matrix .mk .in{animation:mkIn .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.5s + var(--i)*.2s)}
.cases .matrix .mk polygon{fill:var(--bg);stroke:var(--blue);stroke-width:2.5;transition:fill .3s,stroke .3s}
.cases .matrix .mk .ring{fill:none;stroke:var(--yellow);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.cases .matrix .mk .c{fill:var(--ice);font-size:14px;font-weight:800;letter-spacing:.08em;text-anchor:middle;transition:fill .3s}
.cases .matrix .mk.on polygon{fill:var(--yellow);stroke:var(--yellow)}
.cases .matrix .mk.on .c{fill:var(--yellow)}
.cases .matrix .mk.on .ring{animation:ring 2.2s ease-out infinite}
.cases .matrix .mk:focus{outline:none}
.cases .matrix .mk:focus-visible .c{text-decoration:underline}
@keyframes mkIn{from{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}to{opacity:1;transform:none}}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
.cases .readout{margin-top:18px;border-top:1px solid var(--line-2);display:grid;grid-template-columns:auto 1fr auto;gap:6px 22px;align-items:end;padding-top:16px}
.cases .readout .k{font-size:12.5px;font-weight:700;color:var(--faint)}
.cases .readout .rc{font-size:30px;color:var(--yellow);grid-row:span 2;align-self:center}
.cases .readout .rv{font-size:15.5px;font-weight:600;color:var(--ice);min-height:1.4em}
.cases .readout .rv i{font-style:normal;color:var(--blue);padding:0 4px}
.cases .readout .go{grid-row:span 2;align-self:center;font-size:14px;font-weight:700;color:var(--ice);text-decoration:none;border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;white-space:nowrap}
.cases .readout .go:hover{border-color:var(--yellow)}
.cases .gtabs{display:flex;gap:6px;margin-top:16px}
.cases .gtabs button{font:inherit;font-size:13px;font-weight:800;letter-spacing:.08em;cursor:pointer;background:transparent;color:var(--mute);border:1px solid var(--line);border-radius:6px;padding:6px 12px}
.cases .gtabs button[aria-selected="true"]{color:var(--bg);background:var(--yellow);border-color:var(--yellow)}
.cases .do-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.cases .board svg{width:100%;height:auto;display:block;overflow:visible}
.cases .board text{font-family:var(--font);text-anchor:middle}
.cases .board .grid{fill:rgba(120,190,245,.12)}
.cases .board .trace{fill:none;stroke:var(--line-2);stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s ease-out;transition-delay:calc(var(--i)*.45s + .2s)}
.cases .board .trace.y{stroke:rgba(239,255,0,.55)}
.cases .board.on .trace{stroke-dashoffset:0}
.cases .board .spark{fill:none;stroke:var(--yellow);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:7 90;opacity:0;animation:spark2 2.4s linear infinite}
.cases .board.on .spark{opacity:1;transition:opacity .4s 2.4s}
@keyframes spark2{from{stroke-dashoffset:97}to{stroke-dashoffset:0}}
.cases .board .x2{fill:none;stroke:var(--yellow);stroke-width:1.6;stroke-dasharray:5 5;opacity:0;transition:opacity .6s 2.4s}
.cases .board.on .x2{opacity:1}
.cases .board .nd{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1.2);transition-delay:calc(var(--i)*.45s)}
.cases .board.on .nd{opacity:1;transform:none}
.cases .board .pins{stroke:var(--blue);stroke-width:3;stroke-linecap:round}
.cases .board .nd .o{fill:var(--bg);stroke:var(--yellow);stroke-width:2}
.cases .board .nd use{color:var(--yellow)}
.cases .board .core .o{fill:var(--blue);stroke:none}
.cases .board .core use{color:#fff}
.cases .board .lbl{fill:var(--ice);font-size:14px;font-weight:800;text-transform:uppercase;font-stretch:76%;letter-spacing:.02em}
.cases .board .core .lbl{fill:#fff;font-size:17px}
.cases .board .no{fill:var(--yellow);font-size:11.5px;font-weight:800;letter-spacing:.08em}
.cases .board .core .no{fill:rgba(255,255,255,.75)}
.cases .board .note{fill:var(--mute);font-size:11.5px;font-weight:700;text-anchor:start}
.cases .method{background:var(--bg-2);border-block:1px solid var(--line)}
.cases .pipe{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:64px}
.cases .pipe::before{content:"";position:absolute;top:22px;left:23px;right:calc(25% - 38px);height:2px;background:var(--line-2)}
.cases .pipe::after{content:"";position:absolute;top:22px;left:23px;right:calc(25% - 38px);height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform 2s cubic-bezier(.4,0,.2,1)}
.cases .pipe.on::after{transform:scaleX(1)}
.cases .stp{position:relative;z-index:1}
.cases .stp .dot{--oct:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%);
  position:relative;width:46px;height:46px;clip-path:var(--oct);background:var(--line-2);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-stretch:70%;font-size:17px;color:var(--mute);
  transition:background .4s,color .4s;transition-delay:calc(var(--i)*.5s)}
.cases .stp .dot::before{content:"";position:absolute;inset:2px;clip-path:var(--oct);background:var(--bg-2);transition:background .4s;transition-delay:inherit}
.cases .stp .dot span{position:relative}
.cases .pipe.on .stp .dot{background:var(--yellow);color:var(--bg)}
.cases .pipe.on .stp .dot::before{background:var(--yellow)}
.cases .stp h3{margin:22px 0 12px;font-size:22px}
.cases .stp p{font-size:15px;color:var(--mute);line-height:1.5}
.cases .stp .tags{margin-top:14px}
.cases .io{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;margin-top:90px}
.cases .phone svg{width:100%;max-width:400px;height:auto;display:block;margin:0 auto;overflow:visible}
.cases .phone .body{fill:var(--panel);stroke:var(--line-2);stroke-width:3}
.cases .phone .screen{fill:var(--bg)}
.cases .phone .grid{fill:rgba(120,190,245,.1)}
.cases .phone .island{fill:var(--bg-2);stroke:var(--line-2)}
.cases .phone .trace{fill:none;stroke:var(--line-2);stroke-width:2;stroke-linejoin:round}
.cases .phone .spark{fill:none;stroke:var(--yellow);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 60;opacity:0;animation:spark 2.2s linear infinite}
.cases .phone.on .spark{opacity:1;transition:opacity .4s 1.6s}
@keyframes spark{from{stroke-dashoffset:66}to{stroke-dashoffset:0}}
.cases .phone .chip{transform-box:fill-box;transform-origin:center;transform:scale(.4);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1.2) .3s,opacity .5s .3s}
.cases .phone.on .chip{transform:none;opacity:1}
.cases .phone .chip .o{fill:var(--blue)}
.cases .phone .chip .pins{stroke:var(--blue);stroke-width:3;stroke-linecap:round}
.cases .phone .chip .logo{fill:none;stroke:#fff;stroke-width:3}
.cases .phone .chip text{fill:#fff;font:800 20px var(--font);letter-spacing:.14em;text-anchor:middle;font-stretch:80%}
.cases .phone .ic{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;transition-delay:calc(.9s + var(--i)*.15s)}
.cases .phone.on .ic{opacity:1;transform:none}
.cases .phone .ic.cr polygon{fill:var(--bg);stroke:var(--yellow);stroke-width:2}
.cases .phone .ic.cr use{color:var(--yellow)}
.cases .phone .ic.dv rect{fill:var(--panel-2)}
.cases .phone .ic.dv use{color:var(--ice)}
.cases .phone .dock{fill:rgba(120,190,245,.1)}
.cases .ico{width:22px;height:22px;flex:none}
.cases .io-h{font-size:clamp(38px,4.6vw,60px)}
.cases .io-h span{color:var(--yellow)}
.cases .io-row{margin-top:22px;padding:22px 24px;border-radius:var(--r)}
.cases .io-row.u{background:var(--blue);color:#fff}
.cases .io-row.e{border:1px solid var(--line-2);background:var(--panel)}
.cases .io-row .k{font-size:13px;font-weight:700;opacity:.85}
.cases .io-row .t{font-size:28px;font-weight:800;text-transform:uppercase;font-stretch:76%;margin:4px 0 12px}
.cases .io-row ul{display:flex;flex-wrap:wrap;gap:8px 18px}
.cases .io-row li{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.cases .io-row.u .ico{color:var(--yellow)}
.cases .io-row.e .ico{color:var(--blue)}
.cases .io-note{margin-top:22px;font-size:15px;color:var(--mute);border-left:2px solid var(--yellow);padding-left:14px}
.cases .rr-eq{margin-top:56px;text-align:center;font-size:clamp(26px,3.6vw,44px)}
.cases .rr-eq span{color:var(--mute)}
.cases .rr-eq b{color:var(--yellow)}
.cases .phx{display:inline-block;background:var(--yellow-soft);border:1px dashed rgba(239,255,0,.55);color:var(--yellow);border-radius:5px;padding:0 8px;font-weight:700}
.cases .mx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.cases .mx-count{display:flex;align-items:flex-end;gap:18px}
.cases .mx-count b{font-size:clamp(90px,13vw,160px);color:var(--yellow)}
.cases .mx-count span{font-size:18px;color:var(--mute);padding-bottom:14px;max-width:160px;line-height:1.3}
.cases .filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.cases .filters button{font:inherit;font-size:14px;font-weight:700;cursor:pointer;border:1px solid var(--line-2);background:transparent;
  color:var(--mute);padding:9px 18px;border-radius:999px;transition:all .15s}
.cases .filters button:hover{color:var(--ice)}
.cases .filters button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.cases .mx{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.cases .card{display:flex;flex-direction:column;gap:16px;text-decoration:none;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:26px;transition:border-color .2s,background .2s,opacity .3s,transform .3s}
.cases .card:hover, .cases .card:focus-visible{border-color:var(--blue);background:var(--panel-2)}
.cases .card.dim{opacity:.22;transform:scale(.98)}
.cases .card .top{display:flex;justify-content:space-between;font-size:13px;font-weight:700}
.cases .card .code{color:var(--yellow);letter-spacing:.08em}
.cases .card .city{color:var(--faint)}
.cases .card h3{font-size:34px}
.cases .card .shift{font-size:15px;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cases .card .shift i{font-style:normal;color:var(--blue);font-weight:800}
.cases .card .shift strong{color:var(--ice)}
.cases .card .kpi{margin-top:auto;display:flex;align-items:flex-end;gap:12px}
.cases .card .kpi b{font-size:64px;white-space:nowrap}
.cases .card .kpi span{font-size:13.5px;color:var(--mute);line-height:1.3;padding-bottom:6px}
.cases .card .go{font-size:14px;font-weight:700;color:var(--blue)}
.cases .close-b2b{text-align:center;border-top:1px solid var(--line)}
.cases .close-b2b h2{font-size:clamp(44px,8vw,104px)}
.cases .close-b2b p{color:var(--mute);margin:22px auto 0;max-width:460px}
.cases .close-b2b .btn{margin-top:38px}
.cases .chero{padding:80px 0 0;background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/64px 64px;position:relative}
.cases .chero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,var(--bg) 92%);pointer-events:none}
.cases .chero .wrap{position:relative;z-index:1}
.cases .chero .id{display:flex;gap:14px;align-items:center;font-size:14px;font-weight:700;color:var(--mute)}
.cases .chero .id b{background:var(--yellow);color:var(--bg);padding:4px 10px;border-radius:5px;letter-spacing:.08em}
.cases .chero h1{margin-top:26px;font-size:clamp(46px,8vw,108px)}
.cases .chero .lead{max-width:620px}
.cases .facts{display:grid;grid-template-columns:1fr 1.4fr 2fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:48px}
.cases .fact{background:var(--bg-2);padding:18px 22px}
.cases .fact .t{font-size:13px;font-weight:700;color:var(--faint);margin-bottom:6px}
.cases .fact .v{font-weight:600;font-size:15.5px}
.cases .shiftband{display:grid;grid-template-columns:1fr 64px 1fr;margin-top:18px;align-items:stretch}
.cases .shiftband .from, .cases .shiftband .to{border-radius:var(--r);padding:22px 24px}
.cases .shiftband .from{border:1px dashed var(--line-2);color:var(--mute)}
.cases .shiftband .to{background:var(--blue);color:#fff}
.cases .shiftband .k{font-size:13px;font-weight:700;opacity:.8}
.cases .shiftband .v{font-size:clamp(22px,2.6vw,30px);font-weight:800;text-transform:uppercase;font-stretch:78%;line-height:1;margin-top:8px}
.cases .shiftband .arr{display:flex;align-items:center;justify-content:center;color:var(--yellow);font-size:30px;font-weight:800}
.cases .csec{padding:90px 0;border-top:1px solid var(--line)}
.cases .csec:first-of-type{border-top:0}
.cases .cgrid{display:grid;grid-template-columns:minmax(240px,.8fr) 1.6fr;gap:64px;align-items:start}
.cases .cgrid .l{position:sticky;top:110px}
.cases .cgrid > .r{min-width:0}
.cases .cgrid .l h2{font-size:clamp(30px,3.8vw,48px)}
.cases .cgrid .r > * + *{margin-top:26px}
.cases .compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cases .compare .col{border-radius:var(--r);padding:24px}
.cases .compare .col.a{border:1px dashed var(--line-2)}
.cases .compare .col.b{background:var(--blue-soft);border:1px solid var(--blue)}
.cases .compare .k{font-size:13px;font-weight:800;margin-bottom:12px;color:var(--faint)}
.cases .compare .b .k{color:var(--blue)}
.cases .compare li{padding:8px 0;border-top:1px solid var(--line);font-size:15.5px;color:var(--mute);line-height:1.45}
.cases .compare .b li{color:var(--ice)}
.cases .split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cases .split .s{border-radius:var(--r);padding:22px 24px}
.cases .split .s.u{background:var(--blue);color:#fff}
.cases .split .s.e{background:var(--panel);border:1px solid var(--line-2)}
.cases .split .k{font-size:13px;font-weight:700;opacity:.85}
.cases .split .t{font-size:24px;font-weight:800;text-transform:uppercase;font-stretch:76%;margin:6px 0 10px}
.cases .split p{font-size:15px;line-height:1.5;opacity:.9}
.cases .tgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cases .tool{background:var(--panel);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:14px}
.cases .tool h3{font-size:24px}
.cases .tool .what{font-size:15.5px;color:var(--mute);line-height:1.5}
.cases .tool .tags li{font-size:12.5px}
.cases .impact{padding:100px 0;background:var(--blue);color:#fff}
.cases .impact .marker{color:#fff}
.cases .impact .marker::before{background:var(--yellow)}
.cases .impact h2{max-width:900px}
.cases .impact h2 em{color:var(--yellow)}
.cases .impact .pts{border-color:rgba(255,255,255,.25);margin-top:34px;max-width:760px}
.cases .impact .pts li{color:#fff;border-color:rgba(255,255,255,.25)}
.cases .impact .pts li b{color:#fff}
.cases .impact .punch{margin-top:34px;font-size:clamp(20px,2.4vw,27px);font-weight:700;max-width:760px;line-height:1.35}
.cases .cnav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.cases .cnav a{background:var(--bg);padding:34px 28px;text-decoration:none;display:flex;flex-direction:column;gap:6px}
.cases .cnav a:hover{background:var(--bg-2)}
.cases .cnav a.nx{text-align:right;align-items:flex-end}
.cases .cnav .k{font-size:13px;font-weight:700;color:var(--blue)}
.cases .cnav .t{font-size:clamp(22px,2.8vw,34px);font-weight:800;text-transform:uppercase;font-stretch:76%}
.cases .flip{display:inline-grid;vertical-align:bottom}
.cases .flip > *{grid-area:1/1;text-decoration:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.cases .flip s{color:var(--mute);position:relative}
.cases .flip s::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:.09em;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .5s .4s}
.cases .flip b{color:var(--yellow);opacity:0;transform:translateY(55%)}
.cases .flip.on s::after{transform:scaleX(1)}
.cases .flip.on s{opacity:0;transform:translateY(-55%);transition-delay:1.1s}
.cases .flip.on b{opacity:1;transform:none;transition-delay:1.25s}
.cases .wordswap{white-space:nowrap;font-size:clamp(40px,6.4vw,88px);font-weight:800;text-transform:uppercase;font-stretch:72%;line-height:1}
.cases .rank li{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.cases .rank li:first-child{border-top:1px solid var(--line)}
.cases .rank .n{font-size:26px;color:var(--blue)}
.cases .rank .x{font-size:13px;font-weight:700;color:var(--yellow);border:1px solid rgba(239,255,0,.4);padding:3px 10px;border-radius:5px}
.cases .floors{display:grid;gap:8px}
.cases .floor{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center;opacity:0;transform:translateX(-16px);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.18s)}
.cases .floors.on .floor{opacity:1;transform:none}
.cases .floor .lv{font-size:14px;font-weight:700;color:var(--faint);text-align:right}
.cases .floor .box{border-radius:8px;padding:16px 20px;background:var(--panel);border:1px solid var(--line-2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.cases .floor .box b{font-size:17px}
.cases .floor .box span{font-size:14px;color:var(--mute)}
.cases .floor.hi .box{background:var(--yellow);border-color:var(--yellow);color:var(--bg)}
.cases .floor.hi .box span{color:rgba(10,26,48,.7)}
.cases .floor.bl .box{background:var(--blue);border-color:var(--blue);color:#fff}
.cases .floor.bl .box span{color:rgba(255,255,255,.8)}
.cases .gravity{position:relative;padding:0 56px}
.cases .gravity .pull{position:absolute;top:50%;font-size:26px;font-weight:800;color:var(--yellow);transform:translateY(-50%)}
.cases .gravity .pull.l{left:6px;animation:pullL 2.4s ease-in-out infinite}
.cases .gravity .pull.r{right:6px;animation:pullR 2.4s ease-in-out infinite}
@keyframes pullL{0%,100%{transform:translate(0,-50%);opacity:.3}50%{transform:translate(14px,-50%);opacity:1}}
@keyframes pullR{0%,100%{transform:translate(0,-50%);opacity:.3}50%{transform:translate(-14px,-50%);opacity:1}}
.cases .clusters{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cases .cl{border-radius:var(--r);padding:24px;background:var(--panel);border-top:4px solid var(--c,var(--blue));
  opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.15s)}
.cases .clusters.on .cl{opacity:1;transform:none}
.cases .cl .k{font-size:13px;font-weight:700;color:var(--mute)}
.cases .cl h3{font-size:28px;margin:6px 0 14px}
.cases .cl li{font-size:15px;color:var(--mute);padding:6px 0;border-top:1px solid var(--line)}
.cases .road{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.cases .road::before{content:"";position:absolute;top:13px;left:14px;right:14px;height:2px;background:var(--line-2)}
.cases .road::after{content:"";position:absolute;top:13px;left:14px;right:14px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 1.8s cubic-bezier(.4,0,.2,1)}
.cases .road.on::after{transform:scaleX(1)}
.cases .ph{position:relative;z-index:1}
.cases .ph .d{width:28px;height:28px;border-radius:50%;background:var(--bg);border:2px solid var(--line-2);transition:all .4s;transition-delay:calc(var(--i)*.6s)}
.cases .road.on .ph .d{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 6px var(--blue-soft)}
.cases .ph h3{font-size:22px;margin:16px 0 8px}
.cases .ph p{font-size:14.5px;color:var(--mute);line-height:1.45}
.cases .arch{display:grid;gap:12px}
.cases .arch .master{background:var(--blue);color:#fff;border-radius:var(--r);padding:24px}
.cases .arch .sub{margin-left:48px;position:relative;background:var(--panel);border:1px solid var(--yellow);border-radius:var(--r);padding:24px}
.cases .arch .sub::before{content:"";position:absolute;left:-34px;top:-12px;width:26px;height:50%;border-left:2px solid var(--line-2);border-bottom:2px solid var(--line-2);border-bottom-left-radius:8px}
.cases .arch .k{font-size:13px;font-weight:700;opacity:.8}
.cases .arch h3{font-size:28px;margin:6px 0 10px}
.cases .arch p{font-size:15px;line-height:1.5;opacity:.9}
.cases .arch .sub h3{color:var(--yellow)}
.cases .duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cases .duo > div{background:var(--panel);border-radius:var(--r);padding:20px}
.cases .duo .k{font-size:13px;font-weight:700;color:var(--mute);margin-bottom:10px}
.cases .timeline{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cases .timeline > div{border-radius:var(--r);padding:26px}
.cases .timeline .then{border:1px dashed var(--line-2)}
.cases .timeline .now{background:var(--panel)}
.cases .timeline .yr{font-size:60px;color:var(--mute)}
.cases .timeline .now .yr{color:var(--yellow)}
.cases .timeline p{font-size:15px;color:var(--mute);margin-top:10px;line-height:1.45}
.cases .chero-top{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:end}
.cases .chero-top h1{font-size:clamp(46px,6.4vw,96px)}
.cases .kv{position:relative;margin-top:0;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:var(--bg-2)}
.cases .kv img{width:100%;height:100%;object-fit:cover;display:block}
.cases .kv figcaption{position:absolute;left:16px;bottom:14px;font-size:12.5px;font-weight:700;color:#fff;background:rgba(10,26,48,.7);padding:6px 12px;border-radius:6px;backdrop-filter:blur(6px)}
.cases .zahlen{padding:70px 0;border-top:1px solid var(--line)}
.cases .zgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:6px}
.cases .z{background:var(--bg-2);padding:24px 26px}
.cases .z b{display:block;font-size:clamp(40px,4.6vw,58px);color:var(--ice)}
.cases .z b small{font-size:.5em;color:var(--mute);margin-left:4px}
.cases .z > span{display:block;margin-top:8px;font-size:14.5px;color:var(--mute)}
.cases .z.hi b{color:var(--yellow)}
.cases .photo{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.cases .photo img{width:100%;height:100%;object-fit:cover;display:block}
.cases .photo.wide{aspect-ratio:16/9}
.cases .photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 16px;background:linear-gradient(transparent,rgba(10,26,48,.92));font-size:14px;font-weight:600;color:var(--ice)}
.cases .tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cases .tile2{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.4;background:var(--bg-2)}
.cases .tile2 img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cases .tile2:hover img{transform:scale(1.04)}
.cases .tile2 .cap{position:absolute;inset:auto 0 0 0;padding:48px 18px 16px;background:linear-gradient(transparent,rgba(10,26,48,.94))}
.cases .tile2 .tg{display:inline-block;background:var(--yellow);color:var(--bg);font-size:12px;font-weight:800;padding:3px 9px;border-radius:5px}
.cases .tile2 .h{margin-top:8px;font-size:clamp(17px,1.8vw,21px);font-weight:800;text-transform:uppercase;font-stretch:76%;line-height:1.05;color:#fff}
.cases .imgpts{display:grid;grid-template-columns:.8fr 1fr;gap:18px;align-items:stretch}
.cases .imgpts .photo{min-height:260px}
.cases .venn{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.cases .venn img{width:100%;display:block;filter:saturate(.9) brightness(.62)}
.cases .venn svg{position:absolute;inset:0;width:100%;height:100%}
.cases .venn circle{fill:rgba(0,158,229,.1);stroke:#fff;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s ease-out,fill .6s;transition-delay:calc(var(--i)*.35s)}
.cases .venn.on circle{stroke-dashoffset:0}
.cases .venn text{font-family:var(--font);fill:#fff;font-size:44px;font-weight:800;text-transform:uppercase;font-stretch:76%;opacity:0;transition:opacity .6s;transition-delay:calc(1s + var(--i)*.3s);paint-order:stroke;stroke:rgba(10,26,48,.55);stroke-width:6px}
.cases .venn.on text{opacity:1}
.cases .venn figcaption{padding:12px 16px;font-size:14px;font-weight:700;color:var(--ice);background:var(--panel)}
.cases .venn .vwrap{position:relative}
.cases .strip-wrap{position:relative}
.cases .strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--blue) transparent}
.cases .strip figure{flex:0 0 min(86%,560px);scroll-snap-align:start}
.cases .strip img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block;border:1px solid var(--line)}
.cases .strip figcaption{margin-top:10px;display:flex;gap:10px;align-items:baseline;font-size:14.5px;font-weight:600}
.cases .strip figcaption b{flex:none;font-size:12px;font-weight:800;color:var(--bg);background:var(--blue);padding:3px 9px;border-radius:5px}
.cases .strip-nav{display:flex;gap:8px;justify-content:flex-end;margin-bottom:12px}
.cases .strip-nav button{font:inherit;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--ice);cursor:pointer;font-size:18px}
.cases .strip-nav button:hover{border-color:var(--yellow)}
.cases .photo.sq{aspect-ratio:1/0.86}
.cases .photo > img{height:auto}
.cases .photo.sq > img, .cases .photo.wide > img{height:100%}
.cases .impact-strip{margin-top:56px}
.cases .impact .strip figcaption b{background:var(--yellow);color:var(--bg)}
.cases .impact .strip img{border-color:rgba(255,255,255,.3)}
.cases .impact .strip-nav button{border-color:rgba(255,255,255,.5);color:#fff}
.cases .impact .strip{scrollbar-color:var(--yellow) transparent}
.cases .photo.cb{aspect-ratio:auto!important;background:var(--panel)}
.cases .photo.wide.cb > img{aspect-ratio:16/9;height:auto;object-fit:cover}
.cases .photo.cb figcaption{position:static;background:none;padding:10px 14px;font-size:13.5px}
.cases .echo svg{width:100%;height:auto;display:block;overflow:visible}
.cases .echo text{font-family:var(--font);text-anchor:middle}
.cases .echo .t1{fill:var(--ice);font-size:22px;font-weight:800;text-transform:uppercase;font-stretch:76%}
.cases .echo .t2{fill:var(--mute);font-size:13px;font-weight:600}
.cases .echo .dk{fill:var(--bg)}
.cases .echo .o1{fill:var(--panel);stroke:var(--blue);stroke-width:2}
.cases .echo .o2{fill:var(--blue)}
.cases .echo .o2 + .t1, .cases .echo .o2 ~ .t2{fill:#fff}
.cases .echo .o3{fill:var(--yellow)}
.cases .echo .ring{fill:none;stroke:var(--yellow);stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.cases .echo.on .ring{animation:echoR 2.8s ease-out infinite}
.cases .echo .r2{animation-delay:.9s!important}
.cases .echo .r3{animation-delay:1.8s!important}
@keyframes echoR{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.cases .echo .st{opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s;transition-delay:calc(var(--i)*.5s)}
.cases .echo.on .st{opacity:1;transform:none}
.cases .echo .ar{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .5s;transition-delay:calc(var(--i)*.5s - .1s)}
.cases .echo.on .ar{stroke-dashoffset:0}
.cases .mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cases .mosaic .photo{aspect-ratio:16/10}
.cases .mosaic .photo img{height:100%}
.cases .photo.cb > img[alt^="Moodboard"]{max-height:440px;object-fit:cover;width:100%}
.cases .films{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cases .film{background:var(--panel);border-radius:var(--r);overflow:hidden}
.cases .film video{width:100%;aspect-ratio:16/9;display:block;background:#000;object-fit:cover}
.cases .film figcaption{padding:12px 16px;display:flex;gap:10px;align-items:baseline;font-weight:600;font-size:14.5px}
.cases .film figcaption b{flex:none;font-size:12px;font-weight:800;color:var(--bg);background:var(--yellow);padding:3px 9px;border-radius:5px}
.cases @property --r{syntax:'<length>';inherits:true;initial-value:0px}
.cases .qhint{max-width:340px;font-size:15px;color:var(--mute);line-height:1.5}
.cases .qnav{position:relative;margin-top:44px;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:14px 16px}
.cases .ax-y{grid-row:1;display:flex;flex-direction:row;justify-content:space-between;align-items:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:700;color:var(--mute)}
.cases .ax-y b:first-child{order:3}
.cases .ax-y b:last-child{order:1}
.cases .ax-y em{order:2}
.cases .ax-y em, .cases .ax-x em{font-style:normal;color:var(--blue);letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:800}
.cases .ax-x{grid-column:2;display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--mute)}
.cases .qgrid{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0;min-height:800px;
  background:radial-gradient(circle,rgba(120,190,245,.16) 1.2px,transparent 1.3px) 0 0/22px 22px}
.cases .xh, .cases .xv{position:absolute;background:var(--line-2);pointer-events:none;z-index:3}
.cases .xh{left:0;right:0;top:50%;height:1.5px;transform:scaleX(0);transition:transform 1s cubic-bezier(.4,0,.2,1)}
.cases .xv{top:0;bottom:0;left:50%;width:1.5px;transform:scaleY(0);transition:transform 1s cubic-bezier(.4,0,.2,1) .15s}
.cases .qnav.on .xh{transform:scaleX(1)}
.cases .qnav.on .xv{transform:scaleY(1)}
.cases .xh::after{content:"";position:absolute;right:-2px;top:-5px;border-left:9px solid var(--line-2);border-top:6px solid transparent;border-bottom:6px solid transparent}
.cases .xv::after{content:"";position:absolute;top:-2px;left:-5px;border-bottom:9px solid var(--line-2);border-left:6px solid transparent;border-right:6px solid transparent}
.cases .qd{--r:0px;position:relative;display:block;overflow:hidden;text-decoration:none;color:inherit;padding:26px 30px;
  opacity:0;transform:scale(.97);transition:opacity .6s ease calc(.5s + var(--i)*.12s),transform .6s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--i)*.12s),filter .4s ease,--r .75s cubic-bezier(.6,0,.2,1)}
.cases .qnav.on .qd{opacity:1;transform:none}
.cases .qgrid:hover .qd:not(:hover):not(.open){filter:saturate(.6) brightness(.8)}
.cases .qf{position:relative;z-index:2;font-size:clamp(24px,2.6vw,34px);font-weight:800;text-transform:uppercase;font-stretch:72%;color:rgba(148,171,198,.4);transition:color .4s,opacity .25s}
.cases .qd.tr .qf, .cases .qd.br .qf{display:block;text-align:right}
.cases .qb{position:absolute;left:30px;bottom:26px;z-index:2;display:flex;flex-direction:column;gap:6px;transition:opacity .3s}
.cases .qd.tr .qb, .cases .qd.br .qb{left:auto;right:30px;text-align:right}
.cases .qn{font-size:clamp(22px,2.2vw,30px);font-weight:800;text-transform:uppercase;font-stretch:76%;color:var(--ice)}
.cases .qc{font-size:15px;font-weight:700;color:var(--blue)}
.cases .mkr{position:absolute;left:var(--mx);top:var(--my);z-index:4;width:0;height:0}
.cases .mkr .oc, .cases .mkr .rg{position:absolute;left:-34px;top:-34px;width:68px;height:68px;clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}
.cases .mkr .oc{display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-weight:800;font-size:15px;letter-spacing:.08em;
  transform:scale(0);transition:transform .7s cubic-bezier(.2,.8,.2,1.3),background .3s,color .3s;transition-delay:calc(.9s + var(--i)*.15s)}
.cases .qnav.on .mkr .oc{transform:scale(1)}
.cases .mkr .rg{background:var(--yellow);opacity:0}
.cases .qnav.on .mkr .rg{animation:mring 3s ease-out infinite;animation-delay:calc(2s + var(--i)*.7s)}
@keyframes mring{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.2)}}
.cases .qo{position:absolute;inset:0;z-index:1;display:block;
  clip-path:polygon(calc(var(--mx) - var(--r)*.414) calc(var(--my) - var(--r)),calc(var(--mx) + var(--r)*.414) calc(var(--my) - var(--r)),calc(var(--mx) + var(--r)) calc(var(--my) - var(--r)*.414),calc(var(--mx) + var(--r)) calc(var(--my) + var(--r)*.414),calc(var(--mx) + var(--r)*.414) calc(var(--my) + var(--r)),calc(var(--mx) - var(--r)*.414) calc(var(--my) + var(--r)),calc(var(--mx) - var(--r)) calc(var(--my) + var(--r)*.414),calc(var(--mx) - var(--r)) calc(var(--my) - var(--r)*.414));
  background:var(--panel)}
.cases .qo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.cases .qo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,26,48,.96) 0%,rgba(10,26,48,.86) 46%,rgba(10,26,48,.25) 100%)}
.cases .qd.tr .qo::after, .cases .qd.br .qo::after{background:linear-gradient(260deg,rgba(10,26,48,.97) 0%,rgba(10,26,48,.92) 55%,rgba(10,26,48,.35) 100%)}
.cases .qi{position:absolute;z-index:2;top:26px;bottom:26px;left:30px;width:min(62%,420px);display:flex;flex-direction:column;justify-content:center;gap:10px}
.cases .qd.tr .qi, .cases .qd.br .qi{left:auto;right:30px;align-items:flex-end;text-align:right}
.cases .qi > *{opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.cases .qt{font-size:13px;font-weight:700;color:var(--mute);display:flex;gap:10px;align-items:center}
.cases .qt em{font-style:normal;color:var(--blue);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;font-weight:800}
.cases .qt b{background:var(--yellow);color:var(--bg);padding:3px 9px;border-radius:5px;letter-spacing:.08em}
.cases .qh{font-size:clamp(26px,2.8vw,38px);font-weight:800;text-transform:uppercase;font-stretch:74%;line-height:.95;color:#fff}
.cases .qcl{font-size:clamp(17px,1.7vw,21px);font-weight:800;color:var(--yellow)}
.cases .qs{font-size:14.5px;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cases .qs i{font-style:normal;color:var(--blue);font-weight:800}
.cases .qs strong{color:var(--ice)}
.cases .qic{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:4px}
.cases .qd.tr .qic, .cases .qd.br .qic{justify-content:flex-end}
.cases .qic li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--ice)}
.cases .ob{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--yellow);
  background:var(--yellow);clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%);position:relative}
.cases .ob::before{content:"";position:absolute;inset:2px;background:var(--bg);clip-path:inherit}
.cases .ob svg{position:relative;width:18px;height:18px}
.cases .qgo{margin-top:6px;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;background:var(--yellow);color:var(--bg);font-weight:800;font-size:14px;padding:10px 18px;border-radius:999px}
.cases .qd.tr .qgo, .cases .qd.br .qgo{align-self:flex-end}
.cases .qgo i{font-style:normal;transition:transform .25s}
.cases .qd:hover, .cases .qd:focus-visible, .cases .qd.open{--r:1400px}
.cases .qd:hover .qo img, .cases .qd:focus-visible .qo img, .cases .qd.open .qo img{transform:scale(1)}
.cases .qd:hover .qi > *, .cases .qd:focus-visible .qi > *, .cases .qd.open .qi > *{opacity:1;transform:none}
.cases .qd:hover .qi > :nth-child(1), .cases .qd.open .qi > :nth-child(1), .cases .qd:focus-visible .qi > :nth-child(1){transition-delay:.25s}
.cases .qd:hover .qi > :nth-child(2), .cases .qd.open .qi > :nth-child(2), .cases .qd:focus-visible .qi > :nth-child(2){transition-delay:.31s}
.cases .qd:hover .qi > :nth-child(3), .cases .qd.open .qi > :nth-child(3), .cases .qd:focus-visible .qi > :nth-child(3){transition-delay:.37s}
.cases .qd:hover .qi > :nth-child(4), .cases .qd.open .qi > :nth-child(4), .cases .qd:focus-visible .qi > :nth-child(4){transition-delay:.43s}
.cases .qd:hover .qi > :nth-child(5), .cases .qd.open .qi > :nth-child(5), .cases .qd:focus-visible .qi > :nth-child(5){transition-delay:.49s}
.cases .qd:hover .qi > :nth-child(6), .cases .qd.open .qi > :nth-child(6), .cases .qd:focus-visible .qi > :nth-child(6){transition-delay:.55s}
.cases .qd:hover .qb, .cases .qd:focus-visible .qb, .cases .qd.open .qb, .cases .qd:hover .qf, .cases .qd:focus-visible .qf, .cases .qd.open .qf{opacity:0}
.cases .qd:hover .mkr .oc, .cases .qd:focus-visible .mkr .oc, .cases .qd.open .mkr .oc{background:var(--yellow);color:var(--bg)}
.cases .qd:hover .mkr, .cases .qd:focus-visible .mkr, .cases .qd.open .mkr{opacity:0;transition:opacity .3s .35s}
.cases .qd:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.cases .zsrc{margin-top:12px;font-size:12.5px;color:var(--faint)}
.cases .mxcap{margin-top:10px;font-size:13px;color:var(--faint);text-align:right}
.cases .matrix .mk:hover polygon{fill:var(--yellow);stroke:var(--yellow)}
.cases .keyfacts{display:grid;grid-template-columns:.8fr 1.2fr 1.6fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:44px}
.cases .kf{background:var(--bg-2);padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.cases .kf .t{font-size:12.5px;font-weight:700;color:var(--faint)}
.cases .kf-field{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;text-transform:uppercase;font-stretch:76%;color:var(--yellow)}
.cases .kf-oct{width:22px;height:22px;flex:none;background:var(--yellow);clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}
.cases .kf-shift{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:18px;font-weight:700}
.cases .kf-shift span{color:var(--mute)}
.cases .kf-shift i{font-style:normal;color:var(--blue);font-weight:800}
.cases .kf-shift strong{color:var(--ice)}
.cases .kf-ic{display:flex;flex-wrap:wrap;gap:10px 16px}
.cases .kf-ic li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700}
.cases .zgrid.z4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cases #cases .wrap{max-width:1440px}
.cases .qgrid{min-height:820px;height:min(94vh,980px)}
.cases .qd{padding:32px 38px;--px:0;--py:0}
.cases .qbg{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;z-index:0;opacity:.34;filter:grayscale(.35) brightness(.8);
  transform:translate(calc(var(--px)*-14px),calc(var(--py)*-14px)) scale(1.02);transition:opacity .5s,filter .5s,transform .25s ease-out;animation:kb 16s ease-in-out infinite alternate}
.cases .qd::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(10,26,48,.25),rgba(10,26,48,.7))}
.cases .qd.tr::before, .cases .qd.tl::before{background:linear-gradient(0deg,rgba(10,26,48,.25),rgba(10,26,48,.72))}
.cases .qd:hover .qbg{opacity:.6;filter:none}
@keyframes kb{from{scale:1}to{scale:1.07}}
.cases .qo img{transform:translate(calc(var(--px)*-18px),calc(var(--py)*-18px)) scale(1.1)!important;transition:transform .25s ease-out!important}
.cases .qo::after{background:linear-gradient(100deg,rgba(10,26,48,.96) 0%,rgba(10,26,48,.88) 52%,rgba(10,26,48,.08) 86%)!important}
.cases .qd.tr .qo::after, .cases .qd.br .qo::after{background:linear-gradient(260deg,rgba(10,26,48,.96) 0%,rgba(10,26,48,.88) 52%,rgba(10,26,48,.08) 86%)!important}
.cases .qf{font-size:clamp(28px,3vw,42px)}
.cases .qn{font-size:clamp(26px,2.6vw,38px)}
.cases .qc{font-size:17px}
.cases .mkr .oc, .cases .mkr .rg{left:-42px;top:-42px;width:84px;height:84px}
.cases .mkr .oc{font-size:18px}
.cases .qi{width:min(74%,640px);gap:9px;top:22px;bottom:22px}
.cases .qh{font-size:clamp(30px,2.9vw,46px)}
.cases .qcl{font-size:clamp(18px,1.6vw,23px)}
.cases .qone{font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.45;color:var(--ice);border-left:3px solid var(--yellow);padding-left:14px}
.cases .qd.tr .qone, .cases .qd.br .qone{border-left:0;border-right:3px solid var(--yellow);padding-left:0;padding-right:14px}
.cases .qs{font-size:15px}
.cases .qic li{font-size:14.5px}
.cases .qic .ob{width:40px;height:40px}
.cases .qic .ob svg{width:20px;height:20px}
.cases .qd:hover .qi > :nth-child(7), .cases .qd.open .qi > :nth-child(7), .cases .qd:focus-visible .qi > :nth-child(7){transition-delay:.61s}
.cases .qic li{transition:transform .4s cubic-bezier(.2,.8,.2,1.4)}
.cases .qd:hover .qic li:hover{transform:translateY(-3px)}
/* --- Responsive --- */
@media (max-width:980px){
.cases .hero-in, .cases .do-grid, .cases .cgrid, .cases .io{grid-template-columns:1fr}
.cases .hero-b2b{min-height:auto}
.cases .matrix{max-width:560px}
.cases .io{gap:36px}
.cases .cgrid{gap:28px}
.cases .cgrid .l{position:static}
.cases .mx{grid-template-columns:1fr 1fr}
.cases .readout{grid-template-columns:auto 1fr}
.cases .readout .go{grid-column:1/-1;grid-row:auto;justify-self:start}
.cases .pipe{grid-template-columns:1fr;row-gap:30px}
.cases .pipe::before, .cases .pipe::after{display:none}
.cases .stp:not(:last-child)::before, .cases .stp:not(:last-child)::after{content:"";position:absolute;left:22px;top:46px;bottom:-30px;width:2px;background:var(--line-2)}
.cases .stp:not(:last-child)::after{background:var(--yellow);transform:scaleY(0);transform-origin:top;transition:transform .5s;transition-delay:calc(var(--i)*.5s + .2s)}
.cases .pipe.on .stp::after{transform:scaleY(1)}
.cases .stp{display:grid;grid-template-columns:46px 1fr;column-gap:22px}
.cases .stp .dot{grid-row:span 3}
.cases .stp h3{margin:10px 0 8px}
.cases .facts{grid-template-columns:1fr}
.cases section{padding:80px 0}
.cases .csec{padding:64px 0}
}
@media (max-width:680px){
.cases .wrap{padding:0 20px}
.cases .mx, .cases .tools4, .cases .gauges, .cases .gauges.side, .cases .stats, .cases .compare, .cases .split, .cases .tgrid, .cases .clusters, .cases .road, .cases .duo, .cases .timeline, .cases .gal{grid-template-columns:1fr}
.cases .road::before, .cases .road::after{display:none}
.cases .shiftband{grid-template-columns:1fr}
.cases .shiftband .arr{transform:rotate(90deg);padding:6px 0}
.cases .hb-row{grid-template-columns:1fr 84px}
.cases .hb-row .bar{grid-column:1/-1;grid-row:2}
.cases .cnav{grid-template-columns:1fr}
.cases .cnav a.nx{text-align:left;align-items:flex-start}
.cases .arch .sub{margin-left:24px}
.cases .gravity{padding:0 34px}
.cases .scrollcue-b2b{display:none}
}
@media (prefers-reduced-motion:reduce){
.cases *, .cases *::before, .cases *::after{animation:none!important;transition:none!important}
.cases .board .nd, .cases .phone .chip, .cases .phone .ic, .cases .matrix .mk .in{opacity:1!important;transform:none!important}
.cases .board .trace{stroke-dashoffset:0!important}
.cases .board .x2{opacity:1!important}
}
@media (max-width:980px){
.cases .chero-top{grid-template-columns:1fr;gap:30px}
}
@media (max-width:680px){
.cases .zgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cases .z{padding:18px}
.cases .z b{font-size:30px}
.cases .tiles, .cases .imgpts{grid-template-columns:1fr}
.cases .venn text{font-size:40px}
}
@media (prefers-reduced-motion:reduce){
.cases .venn circle{stroke-dashoffset:0!important}
.cases .venn text{opacity:1!important}
}
@media (max-width:680px){
.cases .mosaic{grid-template-columns:1fr 1fr}
.cases .films{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.cases .echo .st{opacity:1!important;transform:none!important}
.cases .echo .ar{stroke-dashoffset:0!important}
}
@media (max-width:980px){
.cases .qnav{grid-template-columns:1fr}
.cases .ax-y, .cases .ax-x{display:none}
.cases .qgrid{grid-template-columns:1fr;grid-template-rows:none;min-height:0;gap:12px;background:none}
.cases .xh, .cases .xv{display:none}
.cases .qd{--r:1400px;min-height:360px;border-radius:12px;opacity:1;transform:none}
.cases .qd .qb, .cases .qd .mkr{display:none}
.cases .qd .qi > *{opacity:1;transform:none}
.cases .qd .qo img{transform:none}
.cases .qd .qi{width:auto;right:24px;left:24px}
.cases .qd.tr .qi, .cases .qd.br .qi{left:24px;right:24px;align-items:flex-start;text-align:left}
.cases .qd.tr .qic, .cases .qd.br .qic{justify-content:flex-start}
.cases .qd.tr .qgo, .cases .qd.br .qgo{align-self:flex-start}
.cases .qd .qf{display:none}
.cases .qd.tr .qo::after, .cases .qd.br .qo::after, .cases .qo::after{background:linear-gradient(0deg,rgba(10,26,48,.97) 25%,rgba(10,26,48,.6) 100%)}
}
@media (prefers-reduced-motion:reduce){
.cases .qd, .cases .mkr .oc, .cases .xh, .cases .xv{opacity:1!important;transform:none!important}
.cases .qo{transition:none}
}
@media (max-width:980px){
.cases .keyfacts{grid-template-columns:1fr}
}
@media (max-width:680px){
.cases .zgrid.z4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
.cases .qgrid{height:auto}
.cases .qd{min-height:460px}
.cases .qi{width:auto}
.cases .qbg{display:none}
}
@media (prefers-reduced-motion:reduce){
.cases .qbg{animation:none}
}
/* --- Display-Typo wie Website --- */
.cases .cgrid .l h2, .cases .chero h1, .cases .chero-top h1, .cases .close-b2b h2, .cases .hero-b2b h1, .cases .io-h, .cases .mx-count b, .cases .qf, .cases .qh, .cases .rr-eq, .cases .stat b, .cases .wordswap, .cases .z b, .cases h1, .cases h2{font-family:var(--font-display)}
/* --- Headlines nie mitten im Wort brechen (Arial Black ist breiter) --- */
.cases h1,.cases h2,.cases h3{overflow-wrap:normal}
/* --- Sprach-Spans --- */
.cases span.lng.lng.lng{display:none;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;margin:0;position:static;width:auto;height:auto;opacity:1;transform:none}
html[lang^="de"] .cases span.lng-de.lng-de.lng-de,
html:not([lang]) .cases span.lng-de.lng-de.lng-de{display:inline}
html[lang^="en"] .cases span.lng-en.lng-en.lng-en{display:inline}
html[lang^="it"] .cases span.lng-it.lng-it.lng-it{display:inline}
.cases svg text.lng{display:none}
html[lang^="de"] .cases svg text.lng-de,html:not([lang]) .cases svg text.lng-de{display:block}
html[lang^="en"] .cases svg text.lng-en{display:block}
html[lang^="it"] .cases svg text.lng-it{display:block}
/* --- Flex-Container, deren Inhalt komplett in einem Sprach-Span steckt:
       aktiver Span wird selbst zum Flex-Container mit geerbtem Layout --- */
.cases :is(.qt,.qs,.ax-x,.ax-y) > span.lng.lng.lng{flex:1 1 100%;gap:inherit;justify-content:inherit;align-items:inherit;flex-wrap:inherit}
html[lang^="de"] .cases :is(.qt,.qs,.ax-x,.ax-y) > span.lng-de.lng-de.lng-de,
html:not([lang]) .cases :is(.qt,.qs,.ax-x,.ax-y) > span.lng-de.lng-de.lng-de,
html[lang^="en"] .cases :is(.qt,.qs,.ax-x,.ax-y) > span.lng-en.lng-en.lng-en,
html[lang^="it"] .cases :is(.qt,.qs,.ax-x,.ax-y) > span.lng-it.lng-it.lng-it{display:inherit}
/* --- Hero-Balance: Arial Black ist deutlich breiter als der (72%% gestauchte)
       Vorlagen-Font. Headline kleiner + linke Spalte darf schrumpfen, damit
       die Matrix ihre halbe Breite behaelt. --- */
.cases .hero-b2b h1{font-size:clamp(40px,5vw,78px)}
@media (min-width:981px){
  .cases .hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .cases .hero-in .matrix{width:100%;justify-self:end}
}