/* Customers (visual rebuild 01.10.2026), scoped .cux on l2.css. Device: a relationship is a rhythm over time; rings for requests, replies and expectations. Black and white only. */
.cux .l2-f{--hv:60;--bg:#fff}.cux .l2-b{--bg:#000}.cux .cux-f1{--hv:64}.cux .cux-f3{--hv:64}.cux .cux-f4{--hv:64}.cux .cux-f5{--hv:66}.cux .cux-f6{--hv:62}.cux .cux-f8{--hv:60}.cux .cux-f9{--hv:62}.cux .cux-br{--hv:58}
.cux .cux-cv{position:absolute;inset:0}.cux .cux-cv svg{width:100%;height:100%;overflow:visible}
.cux .cux-lb{position:absolute;left:0;top:0;font:600 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;paint-order:stroke;-webkit-text-stroke:6px var(--bg);z-index:2}
.cux .cux-lb[data-l="b"]{white-space:normal;width:11em;line-height:1.3}.cux .cux-h{margin:0;font-size:calc(5.6*var(--u));font-weight:850;font-stretch:108%;letter-spacing:-.05em;line-height:.96}
.cux .cux-bq{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(20px,calc(3.2*var(--u)),46px);line-height:1.12}.cux .cux-bd{margin:calc(1.2*var(--u)) 0 0;font-size:clamp(16px,calc(1.9*var(--u)),26px);font-weight:300;line-height:1.3}.cux .cux-cap{margin:0;font:600 13px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase}
/* 1 */
.cux .cux-word{grid-column:1/-1;grid-row:1;margin:0 0 0 calc(-.4*var(--u));font-size:calc(14*var(--u));font-weight:850;font-stretch:108%;letter-spacing:-.055em;line-height:.9}
.cux .cux-f1 .cux-k{grid-column:1/8;grid-row:2;margin:calc(1.6*var(--u)) 0 0;font-size:calc(3.2*var(--u));font-weight:600;letter-spacing:-.03em;line-height:1.1}
.cux .cux-syn{grid-column:1/-1;grid-row:3;list-style:none;padding:0;margin:calc(2.6*var(--u)) 0 0;display:grid;grid-template-columns:repeat(7,1fr);column-gap:calc(1.4*var(--u))}.cux .cux-syn li{position:relative;text-align:center;padding-top:calc(15*var(--u))}.cux .cux-syn li .cux-cv{inset:0 0 auto 0;height:calc(14*var(--u))}
.cux .cux-syn i{font-style:normal;font-size:clamp(14px,calc(1.8*var(--u)),26px);font-weight:700;letter-spacing:-.02em}.cux .cux-syn li:nth-child(3n+1) i{font-weight:200}.cux .cux-syn li:nth-child(3n+2) i{font-weight:500}
.cux .cux-f1 .cux-bq{grid-column:1/-1;grid-row:4;margin-top:calc(2.4*var(--u))}
/* 2 */
.cux .cux-f2 .cux-h{grid-column:1/6;grid-row:1;align-self:end}.cux .cux-q2{grid-column:1/6;grid-row:2;margin-top:calc(2*var(--u));align-self:start}.cux .cux-fig{grid-column:6/-1;grid-row:1/3;position:relative;height:calc(42*var(--u))}
/* 3 */
.cux .cux-h3{grid-column:1/-1;grid-row:1;margin:0;font-weight:850;font-stretch:108%;letter-spacing:-.055em;line-height:.9}.cux .cux-h3 span{display:block;font-size:calc(8.2*var(--u))}.cux .cux-h3 span:last-child{text-align:right}.cux .cux-h3 em{display:block;text-align:center;font-family:var(--serif);font-weight:400;letter-spacing:-.01em;font-size:calc(3.6*var(--u));line-height:1.1;margin:calc(.2*var(--u)) 0}
.cux .cux-fig3{grid-column:1/-1;grid-row:2;position:relative;height:calc(18*var(--u));margin-top:calc(1*var(--u))}.cux .cux-c3a{grid-column:1/6;grid-row:3;margin:calc(1*var(--u)) 0 0;font-size:calc(2.4*var(--u));font-weight:600;letter-spacing:-.02em}.cux .cux-c3b{grid-column:7/-1;grid-row:3;margin:calc(1*var(--u)) 0 0;text-align:right;font-size:calc(2.4*var(--u));font-weight:600;letter-spacing:-.02em}
/* 4 */
.cux .cux-f4{grid-template-rows:calc(17*var(--u)) calc(5*var(--u)) calc(17*var(--u))}.cux .cux-t4a{grid-column:1/5;grid-row:1;align-self:start}.cux .cux-t4b{grid-column:1/5;grid-row:3;align-self:end}.cux .cux-t4a .cux-h,.cux .cux-t4b .cux-h{font-size:calc(4.6*var(--u))}
.cux .cux-lanes{grid-column:5/-1;grid-row:1/4;position:relative;margin:0}.cux .cux-mid{grid-column:5/-1;grid-row:2;align-self:center;text-align:center;margin:0;font-size:clamp(20px,calc(3.4*var(--u)),48px);line-height:1.1;z-index:2;background:#fff;justify-self:center;padding:0 calc(1*var(--u))}
/* 5 */
.cux .cux-f5 .cux-h{grid-column:1/6;grid-row:1;font-size:calc(4.6*var(--u))}.cux .cux-ln{grid-column:6/9;grid-row:1;align-self:end}.cux .cux-ln .cux-bd{font-size:clamp(16px,calc(2*var(--u)),28px)}.cux .cux-rt{grid-column:9/-1;grid-row:1;align-self:end}.cux .cux-b2{margin:0;font-size:calc(2.4*var(--u));font-weight:850;font-stretch:108%;letter-spacing:-.035em;line-height:1.05}
.cux .cux-rh{grid-column:1/-1;grid-row:2;position:relative;height:calc(20*var(--u));margin:calc(2*var(--u)) 0 0}.cux .cux-st{list-style:none;margin:0;padding:0}.cux .cux-st li{position:absolute;top:calc(100% + 1.2*var(--u));transform:translateX(-50%);text-align:center;font-size:clamp(13px,calc(1.45*var(--u)),20px);font-weight:600;line-height:1.2;white-space:nowrap}
.cux .cux-fin{grid-column:1/-1;grid-row:3;margin:calc(5.2*var(--u)) 0 0;text-align:right;font-size:clamp(16px,calc(1.9*var(--u)),26px);font-weight:300;line-height:1.3}.cux .cux-fin b{display:block;font-weight:850;font-size:1.3em}
/* 6 */
.cux .cux-f6{padding:0;column-gap:0;align-content:stretch}.cux .cux-s6l{grid-column:1/8;background:#fff;color:#000;padding:clamp(40px,calc(5*var(--u)),84px) calc(3*var(--u)) clamp(40px,calc(5*var(--u)),84px) var(--m)}.cux .cux-s6r{grid-column:8/-1;background:#000;color:#fff;padding:clamp(40px,calc(5*var(--u)),84px) var(--m) clamp(40px,calc(5*var(--u)),84px) calc(2*var(--u));display:flex;flex-direction:column;justify-content:center;gap:calc(4*var(--u))}
.cux .cux-s6l .cux-cap{margin-top:calc(2*var(--u))}.cux .cux-m{display:none}.cux .cux-rec{list-style:none;margin:calc(2*var(--u)) 0 0;padding:0;columns:2;column-gap:calc(2*var(--u))}.cux .cux-rec li{font-size:calc(2.6*var(--u));letter-spacing:-.04em;line-height:1.05;break-inside:avoid;font-stretch:108%}
.cux .cux-rec li:nth-child(1){font-weight:900}.cux .cux-rec li:nth-child(2){font-weight:800}.cux .cux-rec li:nth-child(3){font-weight:700}.cux .cux-rec li:nth-child(4){font-weight:600}.cux .cux-rec li:nth-child(5){font-weight:500}.cux .cux-rec li:nth-child(6){font-weight:400}.cux .cux-rec li:nth-child(7){font-weight:300}.cux .cux-rec li:nth-child(8){font-weight:200}.cux .cux-rec li:nth-child(9){font-weight:100}
.cux .cux-sl{position:relative;min-height:calc(14*var(--u));padding-left:calc(7*var(--u));display:grid;align-content:center}.cux .cux-sl .cux-cv{inset:0 auto 0 0;width:calc(7*var(--u))}.cux .cux-n{margin:0 0 calc(.4*var(--u));font-size:calc(2.6*var(--u));line-height:1}.cux .cux-sl h4{margin:0;font-size:calc(3*var(--u));font-weight:850;font-stretch:108%;letter-spacing:-.04em;line-height:1.02}.cux .cux-sl p:not(.cux-n){margin:calc(.8*var(--u)) 0 0;font-size:clamp(16px,calc(1.9*var(--u)),26px);font-weight:300;line-height:1.28}
/* 7 */
.cux .cux-f7 .cux-h{grid-column:1/7;grid-row:1;font-size:calc(5*var(--u))}.cux .cux-fig7{grid-column:5/-1;grid-row:1/3;position:relative;height:calc(40*var(--u))}.cux .cux-two{grid-column:1/7;grid-row:2;align-self:end;margin:0;font-size:calc(5.6*var(--u));font-weight:850;font-stretch:108%;letter-spacing:-.05em;line-height:1}.cux .cux-two i{display:block;font-style:normal;font-weight:200;color:#fff}
/* 8 */
.cux .cux-f8 .cux-h{grid-column:1/6;grid-row:1;font-size:calc(5.2*var(--u))}.cux .cux-fig8{grid-column:6/-1;grid-row:1;position:relative;height:calc(36*var(--u))}.cux .cux-opts{list-style:none;margin:0;padding:0;position:absolute;left:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between}.cux .cux-opts li{font-size:clamp(15px,calc(2*var(--u)),28px);font-weight:500;letter-spacing:-.02em;line-height:1.1;padding:calc(.4*var(--u)) 0}
.cux .cux-call{grid-column:1/6;grid-row:2;margin:calc(3*var(--u)) 0 0;font-size:calc(6.4*var(--u));font-weight:200;font-stretch:108%;letter-spacing:-.05em;line-height:.95}.cux .cux-call b{font-weight:900}
/* 9 */
.cux .cux-h9{grid-column:1/6;grid-row:1;margin:0;font-weight:850;font-stretch:108%;letter-spacing:-.05em;line-height:.95;font-size:calc(5.4*var(--u))}.cux .cux-h9 span{display:block;margin-bottom:calc(1.4*var(--u))}.cux .cux-h9 span:last-child{font-weight:200;margin-bottom:0}
.cux .cux-fig9{grid-column:6/-1;grid-row:1;position:relative;height:calc(30*var(--u))}.cux .cux-c9{grid-column:6/-1;grid-row:2;margin:calc(1*var(--u)) 0 0;font-size:calc(3*var(--u));font-weight:600;letter-spacing:-.03em}
/* bridge */
.cux .cux-br .cux-xh{grid-column:1/-1;grid-row:1}.cux .cux-opn{grid-column:1/10;grid-row:2;margin:calc(1.4*var(--u)) 0 0;font-size:calc(4.6*var(--u));font-weight:850;font-stretch:108%;letter-spacing:-.04em;line-height:1.04}.cux .cux-opn span{display:block;font-weight:200}.cux .cux-opn em{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.cux .cux-brg{grid-column:1/-1;grid-row:3;position:relative;height:calc(10*var(--u));margin-top:calc(3*var(--u))}
.cux .cux-nx{grid-column:1/-1;grid-row:4;margin-top:calc(2*var(--u));display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:calc(2*var(--u));border-top:1.5px solid #000;padding-top:calc(1.4*var(--u))}.cux .cux-nx .ad{grid-column:1/-1}.cux .cux-nx .n{font-size:calc(10*var(--u));font-weight:900;font-stretch:108%;letter-spacing:-.05em;line-height:1}.cux .cux-nx .q{grid-column:1;font-size:clamp(18px,calc(2.4*var(--u)),36px);line-height:1.15;margin-top:calc(.8*var(--u))}.cux .cux-nx .l2-plus{grid-column:2;grid-row:2/4}
@media (max-width:760px){
  .cux .cux-d{display:none}.cux .cux-m{display:inline}
  .cux .cux-word{font-size:clamp(46px,16vw,76px);margin-left:0}.cux .cux-f1 .cux-k{font-size:24px}.cux .cux-syn{display:grid;grid-template-columns:repeat(4,1fr);row-gap:8px}.cux .cux-syn li{padding-top:22vw}.cux .cux-syn li .cux-cv{height:21vw}.cux .cux-syn i{font-size:14px}
  .cux .cux-h,.cux .cux-f5 .cux-h,.cux .cux-t4a .cux-h,.cux .cux-t4b .cux-h,.cux .cux-f7 .cux-h,.cux .cux-f8 .cux-h,.cux .cux-opn{font-size:clamp(30px,9vw,42px)}.cux .cux-bq{font-size:22px}
  .cux .cux-fig{height:auto}.cux .cux-fig .cux-cv{position:relative;inset:auto;height:92vw}.cux .cux-fig .cux-lb[data-l="a"],.cux .cux-fig .cux-lb[data-l="b"]{position:static;display:block;margin-top:10px;width:auto;transform:none!important}.cux .cux-fig7,.cux .cux-fig8,.cux .cux-fig9{height:84vw}.cux .cux-fig3{height:50vw}.cux .cux-h3 span{font-size:clamp(40px,12vw,56px)}.cux .cux-h3 em{font-size:28px}.cux .cux-c3a,.cux .cux-c3b{text-align:left;font-size:20px}
  .cux .cux-f4{grid-template-rows:none}.cux .cux-lanes{height:90vw}.cux .cux-mid{background:none;padding:0;font-size:24px;justify-self:start;text-align:left}.cux .cux-rh{height:34vw;margin-bottom:210px}.cux .cux-st li{transform:none!important;left:0!important;position:relative;top:auto;display:block;text-align:left;white-space:normal;margin-top:6px;font-size:15px;margin-left:0}.cux .cux-st{position:absolute;top:calc(100% + 14px);left:0;right:0}
  .cux .cux-fin{text-align:left;margin-top:0;font-size:16px}.cux .cux-ln .cux-bd,.cux .cux-bd{font-size:17px}.cux .cux-f6{display:block}.cux .cux-s6l,.cux .cux-s6r{padding:38px var(--m)}.cux .cux-rec li{font-size:22px}.cux .cux-sl{min-height:44vw}.cux .cux-sl h4{font-size:24px}
  .cux .cux-two{font-size:clamp(36px,11vw,52px)}.cux .cux-opts{position:relative;height:auto;gap:6px}.cux .cux-fig8{height:auto}.cux .cux-fig8 .cux-cv{display:none}.cux .cux-call{font-size:clamp(44px,14vw,70px)}.cux .cux-h9{font-size:clamp(30px,9vw,44px)}.cux .cux-c9{font-size:22px}.cux .cux-nx .n{font-size:clamp(44px,15vw,70px)}.cux .cux-brg{height:26vw}
}
.cux .cux-sl p.cux-n{font-size:max(calc(2.6*var(--u)),15px)!important}
.cux .cux-syn .cux-cv svg{overflow:hidden}
/* v3 D.2-F04: NOW STOPPED stays readable (4.5:1 on white) */
.cux .cux-lb[data-l="ns"]{opacity:1!important;color:#595959;-webkit-text-stroke:0}
/* v3 D.2-F05: the closing line keeps clear of the figure labels on short screens */
@media (min-width:761px) and (max-height:640px){.cux .cux-fin{margin-top:7vh}}
/* v3 D.2-F05: the statement outranks its explanation */
.cux .cux-rt .cux-b2{font-size:clamp(21px,calc(3*var(--u)),36px)}
/* batch 2: the bridge to Partnerships keeps its size; the block runs into the page gutter so the name fits, the plus sits beside the code */
@media (max-width:760px){.cux .cux-nx .ad{grid-column:1}.cux .cux-nx .l2-plus{grid-column:2;grid-row:1;align-self:center;margin-right:8px}.cux .cux-nx{margin-right:calc(-1*(44px - 6.67vw))}.cux .cux-nx .n{grid-column:1/-1}.cux .cux-nx .q{grid-column:1/-1;max-width:calc(100% - (44px - 6.67vw))}}
/* batch 3: the link to Partnerships reads as a way out of the Customers story: open space under the closing drawing, the rule kept, a closing rule and padding group code, name, question and plus as one link area */
.cux .cux-brg{margin-bottom:calc(5*var(--u))}
.cux .cux-nx{border-bottom:1.5px solid #000;padding-bottom:calc(1.8*var(--u))}
@media (max-width:760px){.cux .cux-brg{margin-bottom:48px}.cux .cux-nx{padding-bottom:20px}}

/* 08.10.2026 Besucherfuehrung, Customers "What is really happening": the question and Lena's first sentence belong together on the left;
   "A missed request alone tells me very little." stands at the right directly above the rhythm line that shows it */
@media (min-width:761px){
  .cux .cux-f5{--hv:76}
  .cux .cux-f5 .cux-h{grid-column:1/7;grid-row:1}
  .cux .cux-f5 .cux-ln{grid-column:1/7;grid-row:2;align-self:start;margin-top:calc(1.6*var(--u))}
  .cux .cux-f5 .cux-ln .cux-bd{font-size:clamp(18px,calc(2.3*var(--u)),32px)}
  .cux .cux-f5 .cux-rt{grid-column:8/-1;grid-row:1/3;align-self:end}
  .cux .cux-f5 .cux-b2{font-size:calc(3*var(--u))}
  .cux .cux-f5 .cux-rt .cux-bd{margin-top:calc(1*var(--u));font-size:clamp(16px,calc(1.8*var(--u)),26px)}
  .cux .cux-f5 .cux-rh{grid-row:3;margin-top:calc(3*var(--u))}
  .cux .cux-f5 .cux-fin{grid-row:4}
}

/* phones: the history steps stand in a clear column below the picture, no overlap with the closing line; the contradiction list gets rows (Lena 09.10.2026) */
@media (max-width:760px){
  .cux .cux-rh{height:auto;margin-bottom:0;display:block}
  .cux .cux-rh .cux-cv{position:relative;inset:auto;width:100%;height:34vw}
  .cux .cux-st{position:relative!important;inset:auto!important;width:auto;margin-top:26px;border-left:1.5px solid currentColor;padding-left:20px}
  .cux .cux-st li{font-size:19px;font-weight:600;line-height:1.25;margin:0 0 20px;padding:0}
  .cux .cux-st li{opacity:1!important;transform:none!important}.cux .cux-st li:last-child{margin-bottom:0}
  .cux .cux-fin{margin-top:44px;opacity:1!important;transform:none!important}
  .cux .cux-s6l .cux-h{margin-bottom:30px}.cux .cux-s6l .cux-cap{margin-top:0}.cux .cux-s6l .cux-bd{margin:8px 0 34px}
  .cux .cux-rec{margin-top:0;columns:2;column-gap:20px}
  .cux .cux-rec li{padding:16px 0;border-top:1px solid rgba(0,0,0,.22);font-size:21px;line-height:1.1}
  .cux .cux-f6.l2-b .cux-rec li,.cux .cux-f6[class*="-b"] .cux-rec li{border-top-color:rgba(255,255,255,.3)}
}
