/* Dropprinters Connector (/connector/) · v8 neu
   Sechs Akte: 1 Hero mit Stecker (klebend, Ebenen) · 2 Ohne/Mit (Häkchen) · 3 Fließband (Peak, klebend, seitlicher Weg)
   · 4 Sortiment in drei Tiefen + Demo · 5 Für wen + Integrationen · 6 Einstieg, Fragen, Stecker kehrt zurück.
   Standard ist die ruhige Fassung (ohne JS, reduced-motion): alles steht, Stecker geschlossen, Freisteller gestaffelt sichtbar.
   Lange klebende Strecken nur mit html.js und ohne reduced-motion. Bewegung nur über transform/opacity (js/sol-connector.js).
   Farben ausschließlich über Tokens v7; Rauchglas ([data-smoke], Inselliste tokens.css) nur für Geräte, Fenster und Chips. */

.cx-page{overflow-x:clip}
.cx-hero,.cx-sec,.cx-flow{position:relative;isolation:isolate;background:var(--bg-0)}
.cx-sec{padding-block:clamp(72px,10vw,140px)}
.cx-note{font-size:13px;line-height:1.45;color:var(--ink-2)}

/* Pastell-Fades (Tokens --fade-*, Deckkraft unter .9) */
.cx-fade{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.cx-fade i{position:absolute;display:block;border-radius:50%;filter:blur(64px);opacity:.72}
.cx-fade i:nth-child(1){left:-8%;top:30%;width:46vw;height:46vw;background:var(--fade-a)}
.cx-fade i:nth-child(2){right:-10%;top:20%;width:48vw;height:48vw;background:var(--fade-c)}
.cx-fade i:nth-child(3){left:32%;bottom:-24%;width:40vw;height:36vw;background:var(--fade-b);opacity:.6}

/* Rauchglas-Bausteine (Geräte/Chips): Insel-Tokens, Hintergrund hier */
.cx-win,.cx-chip,.cx-meter,.cx-mini,.cx-flyback{background:var(--smoke-bg);border:1px solid var(--smoke-border);box-shadow:var(--smoke-shadow);color:var(--ink-0);
  -webkit-backdrop-filter:blur(var(--smoke-blur)) saturate(140%);backdrop-filter:blur(var(--smoke-blur)) saturate(140%)}
.cx-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 11px;border-radius:var(--r-pill);font:600 13px/1 var(--font-display);white-space:nowrap}
.cx-chip__led{width:8px;height:8px;flex:none;border-radius:50%;background:var(--ink-2)}
.cx-chip.is-on .cx-chip__led,.cx-chip--ok .cx-chip__led{background:var(--accent)}

/* =====================================================================
   Akt 1 · Hero
   ===================================================================== */
.cx-hero__sticky{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:100svh;overflow:clip;padding-top:clamp(92px,12vh,124px)}
.cx-hero__copy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px clamp(28px,4vw,64px);align-items:end}
.cx-kicker{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.cx-kicker .int-plate{width:30px;height:30px}
.cx-hero__title{font-size:clamp(40px,4.5vw,68px);line-height:1;letter-spacing:-.035em}
.cx-line{display:block;white-space:nowrap}
.cx-dim{color:var(--ink-2)}
.cx-hero__aside{display:grid;gap:20px;justify-items:start;max-width:46ch;padding-bottom:6px}
.cx-hero__aside .lead{color:var(--ink-1)}
.cx-ctas{display:flex;flex-wrap:wrap;gap:10px}

.cx-hero__stage{position:relative;min-height:340px}
.cx-win{position:absolute;top:16%;width:min(27%,380px);display:grid;gap:10px;padding:12px 14px 14px;border-radius:var(--r-lg);font-size:13px;line-height:1.3;z-index:1}
.cx-win--shop{left:max(3%,calc(50% - 640px))}
.cx-win--dp{right:max(3%,calc(50% - 640px))}
.cx-win__bar{display:flex;align-items:center;gap:8px;min-width:0}
.cx-win__bar b{font:600 13.5px/1.2 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-win__bar .sol-icon{width:16px;height:16px;flex:none;color:var(--ink-1)}
.cx-tag{margin-left:auto;padding:4px 8px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;color:var(--ink-1);background:var(--chip-bg)}
.cx-mono{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:7px;background:var(--chip-bg)}
.cx-mono svg{width:14px;height:12px;fill:currentColor}
.cx-win__body{display:grid;gap:6px}
.cx-win__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:var(--chip-bg);border:1px solid var(--line-soft)}
.cx-win__row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-win__row em{font-style:normal;font-weight:600;color:var(--ink-1);font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-win__row .sol-icon{width:15px;height:15px;color:var(--ink-1)}
.cx-win__row em.cx-state{color:var(--accent)}
.cx-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.cx-win__bars{display:grid;gap:5px;padding:4px 2px 0}
.cx-win__bars i{display:block;height:5px;border-radius:3px;background:var(--line-strong)}
.cx-win__bars i:nth-child(1){width:82%}.cx-win__bars i:nth-child(2){width:64%}.cx-win__bars i:nth-child(3){width:40%}

/* Lichtlinie zwischen den Fenstern */
.cx-beam{position:absolute;left:30%;right:30%;top:44%;height:2px;margin-top:-1px;z-index:2;border-radius:2px;transform-origin:50% 50%;
  background:linear-gradient(90deg,transparent,var(--accent) 18%,var(--accent) 82%,transparent)}
.cx-beam::after{content:"";position:absolute;inset:-5px 0;border-radius:6px;background:inherit;filter:blur(6px);opacity:.55}

/* Stecker: zwei Hälften gleicher Höhe; Stifte von A (rechte 18 %) stecken in der Buchse von B */
.cx-plug{--ph:clamp(104px,17vh,172px);position:absolute;z-index:3;left:calc(50% - var(--ph) * 1.014);top:calc(44% - var(--ph) / 2);width:calc(var(--ph) * 2.03);height:var(--ph)}
.cx-plug img{position:absolute;top:0;height:100%;width:auto;max-width:none;filter:drop-shadow(0 18px 22px rgba(48,32,110,.24))}
.cx-plug__a{left:0;width:calc(var(--ph) * 1.25)!important;z-index:1}
.cx-plug__b{left:var(--ph);width:calc(var(--ph) * 1.028)!important;z-index:2}
.cx-plug__flash{position:absolute;z-index:3;left:calc(var(--ph) - 36px);top:calc(50% - 36px);width:72px;height:72px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 18%,color-mix(in srgb,var(--accent) 60%,transparent) 34%,transparent 68%);opacity:.35}
.cx-hero__stage>.cx-chip{position:absolute;z-index:4;left:0;right:0;margin-inline:auto;width:max-content;top:calc(44% + clamp(104px,17vh,172px) / 2 + 16px)}

/* Vordergrund-Produkte (weiß: weicher Schatten vor Pastell) */
.cx-fg{position:absolute;z-index:5;height:auto;filter:drop-shadow(0 26px 30px rgba(48,32,110,.26)) drop-shadow(0 2px 6px rgba(48,32,110,.12))}
.cx-fg--shirt{left:max(20%,calc(50% - 470px));bottom:-6%;width:clamp(140px,14vw,220px)}
.cx-fg--mug{right:max(20%,calc(50% - 460px));bottom:4%;width:clamp(120px,11vw,176px)}

@media (prefers-reduced-motion:no-preference){
  html.js .cx-hero{height:250svh}
  html.js .cx-hero__sticky{position:sticky;top:0;height:100svh;min-height:0}
}
/* Ruhige Fassung (ohne JS, reduced-motion): Stecker steht als ein Teil (con-plug-closed), die Hälften und der Blitz entfallen;
   eine Rauchglas-Hülse mit LED (::after) umfasst die Naht des Bilds (bei 49 % der Bildbreite = x ph, leicht schräg).
   Bild nur in diesen Regeln, damit die bewegte Fassung es weder lädt noch anders misst. */
.cx-plug::before,.cx-plug::after{content:"";position:absolute;display:none;pointer-events:none}
.cx-plug::before{inset:-5% 0;z-index:2;filter:drop-shadow(0 18px 22px rgba(48,32,110,.24))}
.cx-plug::after{z-index:3;left:calc(var(--ph) * .74);top:-7%;bottom:-7%;width:calc(var(--ph) * .52);border-radius:calc(var(--ph) * .12);transform:rotate(-3deg);
  background:radial-gradient(circle at 50% 50%,var(--accent) 0 3px,color-mix(in srgb,var(--accent) 45%,transparent) 5px,transparent 12px),
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 45%),var(--smoke-bg-strong);
  border:1px solid var(--smoke-border);box-shadow:0 12px 26px rgba(20,16,50,.28),inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html:not(.js) .cx-plug::before{display:block;background:url(/assets/stage/connector/con-plug-closed-560.webp) 50% 50%/contain no-repeat}
html:not(.js) .cx-plug::after{display:block}
html:not(.js) .cx-plug img,html:not(.js) .cx-plug__flash{display:none}
@media (prefers-reduced-motion:reduce){
  .cx-plug::before{display:block;background:url(/assets/stage/connector/con-plug-closed-560.webp) 50% 50%/contain no-repeat}
  .cx-plug::after{display:block}
  .cx-plug img,.cx-plug__flash{display:none}
}

/* =====================================================================
   Akt 2 · Ohne/Mit
   ===================================================================== */
.cx-head{display:grid;gap:16px;max-width:780px;margin-bottom:clamp(32px,4vw,56px)}
.cx-head h2{font-size:clamp(32px,4.4vw,60px);line-height:1.02}
.cx-head .lead{max-width:56ch;color:var(--ink-1)}
.cx-head--split{max-width:none;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end;gap:20px clamp(28px,5vw,72px)}
.cx-head--right{margin-left:auto;text-align:right;justify-items:end}
.cx-head--center{margin-inline:auto;text-align:center;justify-items:center}

.cx-pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px clamp(18px,2.4vw,32px);margin:0 0 clamp(28px,3.4vw,48px);padding:0;list-style:none}
.cx-pains li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:15px;line-height:1.5;color:var(--ink-1)}
.cx-pains .sol-icon{width:24px;height:24px;margin-top:2px;color:var(--ink-0)}
.cx-pains b{display:block;margin-bottom:2px;font:600 16px/1.3 var(--font-display);color:var(--ink-0)}

.cx-diff__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.cx-plate{position:relative;display:grid;align-content:start;gap:22px;padding:clamp(22px,2.6vw,34px);border-radius:var(--r-xl)}
.cx-plate__head{display:grid;gap:6px}
.cx-plate__head h3{font-size:clamp(21px,1.9vw,26px)}
.cx-plate__head p{font-size:15px;color:var(--ink-1)}
.cx-plate.cx-plate--auto{
  background:radial-gradient(70% 60% at 100% 0%,color-mix(in srgb,var(--fade-b) 72%,transparent),transparent 72%),
    radial-gradient(60% 60% at 0% 100%,color-mix(in srgb,var(--fade-e) 70%,transparent),transparent 70%),var(--glass-bg-strong);
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent),var(--glass-shadow)}
.cx-plate--auto .cx-plate__head{padding-right:118px}
.cx-meter{position:absolute;top:clamp(22px,2.6vw,34px);right:clamp(22px,2.6vw,34px);display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px;border-radius:var(--r-pill);font:600 13px/1 var(--font-display);white-space:nowrap}
.cx-meter__bar{display:block;width:44px;height:4px;border-radius:2px;background:var(--line-strong);overflow:hidden}
.cx-meter__bar i{display:block;height:100%;background:var(--accent);transform-origin:0 50%}
.cx-tasks{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.cx-task{display:grid;grid-template-columns:40px minmax(0,1fr) 32px;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:var(--glass-light-bg);border:1px solid var(--line-soft)}
.cx-task__mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--chip-bg)}
.cx-task__mark .sol-icon{width:20px;height:20px}
.cx-task__txt b{display:block;font:600 16px/1.25 var(--font-display)}
.cx-task__txt small{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.cx-task__state{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--ink-2);border:1px dashed var(--line-strong)}
.cx-task__state .sol-icon{position:relative;z-index:1;width:16px;height:16px}
.cx-plate--auto .cx-task__state::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--solid);transform:scale(0);transition:transform 420ms var(--ease-out)}
.cx-plate--auto .cx-task__state .sol-icon{opacity:0;transform:scale(.4);transition:opacity 260ms var(--ease-out),transform 420ms var(--ease-out)}
.cx-plate--auto .cx-task.is-done .cx-task__state{color:var(--on-solid);border-color:transparent}
.cx-plate--auto .cx-task.is-done .cx-task__state::before{transform:scale(1)}
.cx-plate--auto .cx-task.is-done .cx-task__state .sol-icon{opacity:1;transform:none}

/* =====================================================================
   So funktioniert es (v9): vier helle Milchglas-Karten im cx-plate-Muster.
   Breit vier Spalten, mittel zwei, schmal eine. Keine Bilder, kein Rauchglas.
   ===================================================================== */
.cx-how{background:var(--bg-1)}
.cx-fade--how i:nth-child(1){left:-10%;top:16%;width:40vw;height:40vw;background:var(--fade-b);opacity:.5}
.cx-fade--how i:nth-child(2){right:-8%;top:auto;bottom:-14%;width:42vw;height:38vw;background:var(--fade-e);opacity:.5}
.cx-how .cx-head{gap:14px}
.cx-how__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin:0;padding:0;list-style:none}
.cx-how__card{gap:12px;padding:clamp(22px,2.2vw,30px)}
.cx-how__icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;border-radius:var(--r-pill);background:var(--chip-bg);border:1px solid var(--line-soft)}
.cx-how__icon .sol-icon{width:22px;height:22px}
.cx-how__card h3{font-size:clamp(20px,1.6vw,24px)}
.cx-how__card p{font-size:15px;line-height:1.5;color:var(--ink-1)}
.cx-how__foot{max-width:64ch;margin-top:clamp(28px,3.4vw,48px)}
@media (max-width:1100px){.cx-how__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cx-how__grid{grid-template-columns:minmax(0,1fr)}}

/* =====================================================================
   Akt 3 · Der Abgleich (Peak). Ruhige Fassung: fünf Spalten, darunter Text.
   ===================================================================== */
.cx-flow{background:var(--bg-1);padding-block:clamp(72px,10vw,140px)}
.cx-flow__sticky{position:relative}
.cx-fade--flow i:nth-child(1){left:-12%;top:auto;bottom:-20%;background:var(--fade-e)}
.cx-fade--flow i:nth-child(2){right:-14%;top:-10%;background:var(--fade-d);opacity:.55}
.cx-flow__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(28px,5vw,72px);align-items:end}
.cx-flow__head h2{font-size:clamp(32px,4.2vw,58px);line-height:1.02}
.cx-flow__head .lead{max-width:52ch;color:var(--ink-1)}
.cx-flow__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:clamp(24px,3vw,36px) auto 0;padding:0 var(--gutter);list-style:none}
.cx-flow__chips .cx-chip{opacity:.7;transition:opacity 260ms var(--ease-out)}
.cx-flow__chips .cx-chip.is-on{opacity:1}
.cx-flow__view{position:relative}
.cx-flow__track{--vis-h:230px;position:relative;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.cx-flow__list{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:clamp(28px,3vw,40px) 0 0;padding:0;list-style:none}
.cx-flow__belt{position:absolute;z-index:0;left:var(--gutter);right:var(--gutter);top:calc(clamp(28px,3vw,40px) + var(--vis-h) + 14px);height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--fade-b),var(--accent) 30%,var(--fade-c) 60%,var(--fade-a))}
.cx-st{display:grid;grid-template-rows:var(--vis-h) auto;gap:34px;align-content:start;min-width:0}
.cx-st__vis{position:relative;display:grid;place-items:end center;min-width:0}
.cx-st__txt{display:grid;gap:8px}
.cx-st__txt h3{font-size:clamp(18px,1.5vw,22px)}
.cx-st__txt p{font-size:15px;line-height:1.5;color:var(--ink-1)}
.cx-mini{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 10px;max-width:100%;padding:11px 14px;border-radius:16px;font-size:12.5px;line-height:1.3}
.cx-mini .sol-icon{grid-row:span 2;width:20px;height:20px;color:var(--ink-1)}
.cx-mini b{font:600 13.5px/1.2 var(--font-display)}
.cx-mini em{font-style:normal;color:var(--ink-1)}
.cx-mini em.cx-ok{color:var(--accent)}
.cx-mini--card .sol-thumb{grid-row:span 2;width:46px;border-radius:10px}
.cx-mini--ship em{color:var(--accent)}

/* Paket-Station: ruhig nebeneinander, bewegt gestapelt */
.cx-pack img{position:absolute;height:auto;max-width:none;filter:drop-shadow(0 18px 22px rgba(48,32,110,.22))}
.cx-pack__open{left:-4%;bottom:6%;width:62%}
.cx-pack__closed{right:-6%;bottom:0;width:64%}
.cx-pack__label{right:4%;bottom:44%;width:30%;transform:rotate(-8deg);filter:drop-shadow(0 8px 12px rgba(48,32,110,.28))}
.cx-pack__bar{left:6%;top:4%;width:80%;opacity:.9}
.cx-capsule{position:absolute;z-index:2;left:calc(50% - 40px);top:calc(clamp(28px,3vw,40px) + 6px);width:80px;height:auto;filter:drop-shadow(0 16px 20px rgba(48,32,110,.26))}
.cx-flyback{position:absolute;z-index:3;display:none;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-pill);font:600 12px/1 var(--font-display);white-space:nowrap}
.cx-flow__note{margin-top:28px;text-align:center}

/* Bewegte Fassung breit: Band klebt, Spur fährt seitlich */
@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  html.js .cx-flow{height:440svh;padding:0}
  html.js .cx-flow__sticky{position:sticky;top:0;height:100svh;overflow:clip;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;padding-top:clamp(84px,10.5vh,116px);padding-bottom:16px}
  html.js .cx-flow__head h2{font-size:clamp(30px,3.6vw,52px)}
  html.js .cx-flow__chips{margin-top:clamp(14px,2vh,24px)}
  html.js .cx-flow__view{min-height:0}
  html.js .cx-flow__track{--vis-h:min(34svh,330px);width:max-content;max-width:none;margin:0;padding:0 6vw 0 8vw}
  html.js .cx-flow__list{display:flex;gap:0;margin-top:clamp(12px,2vh,24px)}
  html.js .cx-st{flex:none;width:44vw;padding:0 3vw;gap:30px}
  html.js .cx-st__txt{max-width:40ch}
  html.js .cx-flow__belt{left:0;right:0;top:calc(clamp(12px,2vh,24px) + var(--vis-h) + 10px)}
  html.js .cx-mini{transform-origin:50% 100%;font-size:13.5px;padding:14px 18px}
  html.js .cx-pack{width:min(24vw,340px);justify-self:center}
  html.js .cx-pack__open,html.js .cx-pack__closed{left:6%;right:auto;bottom:0;width:88%}
  html.js .cx-pack__label{left:auto;right:6%;bottom:38%;width:34%;transform:none}
  html.js .cx-pack__bar{left:-6%;top:auto;bottom:62%;width:112%}
  html.js .cx-capsule{left:calc(8vw + 22vw - 4.5vw);top:calc(clamp(12px,2vh,24px) + var(--vis-h) - 16svh + 4px);width:9vw;max-width:none}
  html.js .cx-flyback{display:inline-flex;left:calc(8vw + 3 * 44vw + 22vw);top:calc(clamp(12px,2vh,24px) + var(--vis-h) * .2)}
  html.js .cx-flow__note{margin-top:8px}
}

/* =====================================================================
   Akt 4 · Sortiment in drei Tiefen + Demo
   ===================================================================== */
.cx-range{padding-top:0}
.cx-gallery{position:relative;display:grid;place-items:center;min-height:clamp(640px,118svh,1080px);overflow:clip;padding-block:clamp(80px,10vw,140px)}
.cx-fade--gallery i:nth-child(1){left:10%;top:18%;width:34vw;height:34vw;background:var(--fade-d);opacity:.5}
.cx-fade--gallery i:nth-child(2){right:4%;top:40%;width:36vw;height:36vw;background:var(--fade-b);opacity:.55}
.cx-fade--gallery i:nth-child(3){left:36%;bottom:-10%;background:var(--fade-e);opacity:.5}
.cx-gallery__copy{position:relative;z-index:2;display:grid;gap:18px;justify-items:center;max-width:680px;text-align:center}
.cx-gallery__copy h2{font-size:clamp(32px,4.4vw,60px);line-height:1.02}
.cx-gallery__copy .lead{color:var(--ink-1)}
.cx-g{position:absolute;height:auto;max-width:none;filter:drop-shadow(0 26px 30px rgba(48,32,110,.22)) drop-shadow(0 2px 6px rgba(48,32,110,.1))}
.cx-g--hoodie{z-index:0;left:5%;top:7%;width:clamp(110px,11vw,180px)}
.cx-g--cap{z-index:0;right:7%;top:9%;width:clamp(110px,10.5vw,176px)}
.cx-g--tube{z-index:1;left:3%;bottom:14%;width:clamp(170px,19vw,300px)}
.cx-g--case{z-index:1;right:14%;bottom:8%;width:clamp(60px,6.4vw,104px)}
.cx-g--shirt{z-index:3;left:9%;bottom:-2%;width:clamp(140px,14vw,230px)}
.cx-g--mug{z-index:3;right:4%;top:40%;width:clamp(120px,11vw,184px)}

.cx-range__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px clamp(20px,2.6vw,36px);align-items:start}
.cx-range__intro{margin-bottom:16px;font-size:16px;line-height:1.5;color:var(--ink-1)}
.cx-feats{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.cx-feat{display:grid;grid-template-columns:26px minmax(0,1fr);gap:4px 14px;padding:18px 20px;border-radius:var(--r-lg)}
.cx-feat .sol-icon{grid-row:span 2;width:22px;height:22px;margin-top:2px}
.cx-feat h3{font-size:17px;line-height:1.25}
.cx-feat p{font-size:14.5px;line-height:1.5;color:var(--ink-1)}

/* Demo „Artikel übernehmen“ (Rauchglas-Gerät .sol-win, aus v6 übernommen, Farben über Insel-Tokens) */
.sol-con__card{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto auto;row-gap:4px;min-width:0;min-height:0;padding:8px;border-radius:14px;
  background:var(--chip-bg);border:1px solid var(--line)}
.sol-con__card .sol-thumb{aspect-ratio:auto;width:100%;height:100%;min-height:0;border-radius:10px;container-type:size}
.sol-con__card .sol-thumb .sol-art{height:min(92cqh,92cqw)}
.sol-con__name{font:600 13px/1.2 var(--font-display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sol-con__plus{width:22px;height:22px;color:var(--ink-2);transition:opacity 240ms var(--ease-out)}
.sol-thumb .sol-art{position:relative;display:block;height:90%;aspect-ratio:1}
.sol-thumb .sol-art svg{width:100%;height:100%}
.sol-thumb--shirt{--p-shirt:#26496F}
.sol-thumb--hoodie{--p-hoodie:#3F5E54}
.sol-thumb--note{--p-note:#233042;--p-note-band:#22D3EE}
.sol-con__print{position:absolute;left:50%;top:35%;width:15%;aspect-ratio:1;transform:translateX(-50%);background:var(--on-solid);opacity:.94;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.sol-con__tick{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px 0 5px;border-radius:var(--r-pill);font:600 12px/1 var(--font-body);color:var(--accent);
  background:var(--chip-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.sol-con__tick .sol-icon{width:13px;height:13px}
.sol-con-take{max-width:1080px;margin-inline:auto}
.sol-con-take .sol-win__core{color:var(--ink-0)}
.sol-con-take .sol-win__bar{min-height:52px;padding:6px 22px}
.sol-con-take .sol-win__title{gap:10px}
.sol-con-take .sol-win__title .sol-icon{color:var(--ink-1)}
.sol-con-take__reset{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;margin-right:-6px;border-radius:var(--r-pill);font:600 14px/1 var(--font-display);color:var(--ink-1);transition:color 200ms ease,background-color 200ms ease}
@media (hover:hover){.sol-con-take__reset:hover{color:var(--ink-0);background:var(--hover)}}
.sol-con-take__split{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);padding:22px 8px 8px}
.sol-con-take__side{display:grid;align-content:start;gap:14px;padding:0 14px;min-width:0}
.sol-con-take__head{display:flex;align-items:center;gap:12px}
.sol-con-take__head span:last-child{display:grid;gap:2px}
.sol-con-take__head b{font:600 16px/1.2 var(--font-display);letter-spacing:-.01em}
.sol-con-take__head small{font-size:13px;color:var(--ink-2)}
.sol-con-take__list{display:grid;gap:10px;padding:0;margin:0;list-style:none}
.sol-con-take__art{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px;border-radius:18px;background:var(--chip-bg);border:1px solid var(--line-soft)}
.sol-con-take__art .sol-thumb{width:60px;border-radius:12px}
.sol-con-take__name{display:grid;gap:3px;min-width:0}
.sol-con-take__name b{font:600 15px/1.2 var(--font-display);letter-spacing:-.01em}
.sol-con-take__name small{font-size:13px;color:var(--ink-2)}
.sol-con-take__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:var(--r-pill);font:600 14px/1 var(--font-display);white-space:nowrap;
  color:var(--on-solid);background:var(--solid);transition:transform 160ms var(--ease-out),opacity 200ms ease}
.sol-con-take__btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.sol-con-take__btn:not([aria-disabled="true"]):hover{opacity:.86}}
.sol-con-take__btn[aria-disabled="true"]{cursor:default;color:var(--accent);background:var(--chip-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.sol-con-take__mid{display:grid;place-items:center;position:relative}
.sol-con-take__mid::before{content:"";position:absolute;top:8px;bottom:8px;left:50%;width:1px;background:var(--line)}
.sol-con-take__mid span{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink-0);background:var(--chip-bg);border:1px solid var(--line)}
.sol-con-take__slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sol-con-take__slot{position:relative;display:grid;place-items:center;aspect-ratio:1 / 1.12;min-width:0;border-radius:16px;border:1px dashed var(--line-strong)}
.sol-con-take__slot.is-filled{border-color:transparent}
.sol-con-take__slot.is-filled .sol-con__plus{opacity:0}
.sol-con-take__slot .sol-con__card{position:absolute;inset:0;animation:sol-con-in 420ms var(--ease-out) both}
@keyframes sol-con-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.sol-con-take__slot .sol-con__tick{justify-self:start}
.sol-con-take__statusrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sol-con-take__status{min-height:1.5em;font-size:14px;line-height:1.5;color:var(--ink-1)}
.sol-con-take__foot{padding:6px 22px 18px;text-align:right}
.sol-con-take__fly{position:absolute;left:0;top:0;z-index:5;pointer-events:none;transform-origin:0 0}
.sol-con-take__fly .sol-con__card{width:100%;height:100%;background:var(--smoke-bg-strong);border-color:var(--line-strong)}

/* =====================================================================
   Akt 5 · Für wen + Integrationen
   ===================================================================== */
.cx-who{background:var(--bg-1)}
.cx-int__foot{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(28px,3vw,44px)}

/* =====================================================================
   Akt 6 · Einstieg, Fragen
   ===================================================================== */
.cx-start__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:28px clamp(28px,5vw,72px);align-items:start}
.cx-start .cx-head{margin-bottom:0}
.cx-return{display:block;width:clamp(170px,20vw,300px);height:auto;margin-top:clamp(18px,3vw,40px);filter:drop-shadow(0 22px 26px rgba(48,32,110,.24))}
.cx-start__plate{padding:clamp(22px,3vw,40px);border-radius:var(--r-xl)}
.cx-start__note{margin-top:18px}
.cx-faq{background:var(--bg-1)}
.cx-faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:20px clamp(28px,5vw,72px);align-items:start}

/* =====================================================================
   Schmal
   ===================================================================== */
@media (max-width:960px){
  .cx-range__grid,.cx-start__grid{grid-template-columns:minmax(0,1fr)}
  .sol-con-take__split{grid-template-columns:minmax(0,1fr);padding-top:16px}
  .sol-con-take__mid{height:56px}
  .sol-con-take__mid::before{top:50%;bottom:auto;left:8px;right:8px;width:auto;height:1px}
  .sol-con-take__mid span svg{transform:rotate(90deg)}
  .sol-con-take__foot{text-align:left}
}
@media (max-width:820px){
  .cx-hero__sticky{padding-top:clamp(84px,11vh,104px)}
  .cx-hero__copy{grid-template-columns:minmax(0,1fr);gap:14px}
  .cx-kicker{margin-bottom:12px}
  .cx-hero__title{font-size:clamp(34px,10vw,52px)}
  .cx-line{white-space:normal}
  .cx-hero__aside{gap:14px}
  .cx-hero__aside .lead{font-size:16px;line-height:1.45}
  .cx-ctas .btn{min-height:44px}
  .cx-hero__stage{min-height:300px}
  .cx-win{width:56%;padding:10px 11px 11px;font-size:12px}
  .cx-win--shop{left:3%;top:4%}
  .cx-win--dp{right:3%;top:auto;bottom:6%}
  .cx-win__row:nth-child(2),.cx-win__bars{display:none}
  .cx-beam{left:8%;right:8%;top:50%}
  .cx-plug{--ph:clamp(76px,11svh,104px);top:calc(50% - var(--ph) / 2)}
  .cx-hero__stage>.cx-chip{top:auto;bottom:calc(6% + 92px);left:auto;right:auto;margin-inline:0;left:4%}
  .cx-fg--shirt{left:auto;right:4%;bottom:auto;top:2%;width:clamp(84px,24vw,120px)}
  .cx-fg--mug{right:auto;left:5%;bottom:2%;width:clamp(78px,21vw,110px)}

  .cx-head--split,.cx-flow__head,.cx-faq__grid{grid-template-columns:minmax(0,1fr)}
  .cx-head--right{margin-left:0;text-align:left;justify-items:start}
  .cx-pains,.cx-diff__grid{grid-template-columns:minmax(0,1fr)}
  .cx-plate--auto .cx-plate__head{padding-right:0;padding-top:44px}

  .cx-flow__chips{display:none}
  .cx-flow__track{--vis-h:auto}
  .cx-flow__list{grid-template-columns:minmax(0,1fr);gap:48px;padding-left:46px}
  .cx-flow__belt{left:calc(var(--gutter) + 15px);right:auto;top:clamp(28px,3vw,40px);bottom:0;width:3px;height:auto;background:linear-gradient(180deg,var(--fade-b),var(--accent) 30%,var(--fade-c) 60%,var(--fade-a))}
  .cx-st{grid-template-rows:auto auto;gap:16px}
  .cx-st__vis{place-items:start;min-height:64px}
  .cx-st--make .cx-st__vis{height:min(72vw,300px)}
  .cx-pack{width:100%}
  .cx-pack__open{left:0;bottom:8%;width:56%}
  .cx-pack__closed{right:0;bottom:0;width:58%}
  .cx-pack__label{right:6%;bottom:46%;width:26%}
  .cx-pack__bar{left:4%;top:0;width:70%}
  .cx-capsule{left:calc(var(--gutter) - 12px);top:clamp(28px,3vw,40px);width:58px}
  .cx-flyback{display:none}

  .cx-gallery{min-height:clamp(560px,104svh,860px);padding-block:96px}
  .cx-g--hoodie{left:3%;top:3%;width:clamp(84px,24vw,120px)}
  .cx-g--cap{right:4%;top:6%;width:clamp(84px,22vw,116px)}
  .cx-g--tube{left:-6%;bottom:9%;width:clamp(150px,44vw,210px)}
  .cx-g--case{right:30%;bottom:3%;width:clamp(44px,12vw,62px)}
  .cx-g--shirt{left:auto;right:-3%;bottom:13%;width:clamp(100px,30vw,150px)}
  .cx-g--mug{right:auto;left:30%;top:auto;bottom:-1%;width:clamp(80px,22vw,110px)}
  .cx-gallery__copy{padding-block:clamp(110px,26vw,170px)}
  .cx-return{width:min(62vw,260px)}
}
/* Schmal bewegt: Paket-Station als hoher Fallschacht, Kartons starten oben und sinken beim Scrollen (js flowNarrow) */
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
  html.js .cx-st--make .cx-st__vis{height:min(128vw,500px)}
  html.js .cx-pack__open{top:0;bottom:auto;left:0;width:52%}
  html.js .cx-pack__closed{top:4%;bottom:auto;right:0;width:54%}
  html.js .cx-pack__label{top:2%;bottom:auto;right:10%;width:24%}
  html.js .cx-pack__bar{top:0;left:4%;width:70%}
}
@media (max-width:600px){
  .sol-con-take__side{padding-inline:8px}
  .sol-con-take__art{grid-template-columns:auto minmax(0,1fr);gap:10px 12px}
  .sol-con-take__btn{grid-column:1 / -1;width:100%}
  .sol-con-take__slots{gap:8px}
  .sol-con-take__slot{aspect-ratio:1 / 1.25}
  .sol-con-take .sol-con__name{font-size:12px}
  .sol-con-take .sol-con__card{padding:6px}
  .sol-con-take .sol-win__bar{padding-inline:16px}
}

/* Fallback ohne backdrop-filter: hell bzw. deckend über Tokens */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cx-win,.cx-chip,.cx-meter,.cx-mini,.cx-flyback{background:var(--smoke-bg-strong)}
}