/* =====================================================================
   Dropprinters Shop (v1) · seitenspezifisch
   Gerät: Konfigurator (.sol-config), der beim Scrollen ein Produkt entstehen lässt.
   Abschnitte: Sortiment-Bento, Lieferzeit mit Kalenderstreifen, Zielgruppen-Motive,
   Mini-Motive der Verweis-Kacheln. Gemeinsame Bausteine: styles/solutions.css.
   ===================================================================== */

/* ---------- Gerät: Konfigurator ------------------------------------- */
.sol-dps-device{width:min(100%,660px)}
.sol-config{padding:7px;border-radius:var(--r-xl)}
.sol-config__core{position:relative;border-radius:calc(var(--r-xl) - 7px);overflow:hidden;color:var(--ink-0);color-scheme:dark;
  background:linear-gradient(180deg,rgba(14,14,22,.92),rgba(9,9,14,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.06)}
.sol-config__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:7px 10px 7px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);font:500 13px/1 var(--font-body);color:var(--ink-1)}
.sol-config__crumbs{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap}
.sol-config__crumbs b{font-weight:600;color:var(--ink-0)}
.sol-config__crumbs i{font-style:normal;color:var(--ink-2)}
.sol-config__tools{display:flex;align-items:center;gap:8px}
.sol-config__resume{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-pill);
  font:600 12.5px/1 var(--font-body);color:var(--ink-0);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  transition:background-color 200ms ease,transform 160ms var(--ease-out)}
.sol-config__resume::after{content:"";position:absolute;inset:-6px -2px}
.sol-config__resume:active{transform:scale(.97)}
.sol-config__resume[hidden]{display:none}
@media (hover:hover) and (pointer:fine){.sol-config__resume:hover{background:rgba(255,255,255,.14)}}
.sol-config__body{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.sol-config__stage{position:relative;min-height:clamp(320px,46svh,420px);overflow:hidden;display:grid;place-items:center;perspective:1000px;
  border-right:1px solid rgba(255,255,255,.06);
  background:radial-gradient(70% 55% at 50% 38%,rgba(124,58,237,.22),transparent 70%),
    radial-gradient(60% 50% at 40% 80%,rgba(6,182,212,.14),transparent 70%),linear-gradient(180deg,#0f0f17,#08080c)}
.sol-config__stage::after{content:"";position:absolute;left:15%;right:15%;bottom:13%;height:26px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);filter:blur(6px);pointer-events:none}
.sol-config__panel{display:flex;flex-direction:column;gap:13px;padding:16px 18px 18px;min-width:0}
.sol-config__groups{display:flex;flex-direction:column;gap:13px}

/* Optionsgruppe + Segment-Steuerung mit gleitendem Glas-Daumen */
.sol-opt{margin:0;padding:0;border:0;min-width:0;transition:opacity 420ms var(--ease-out)}
.sol-opt legend{padding:0;margin-bottom:7px;font:500 12px/1 var(--font-body);color:var(--ink-2);transition:color 420ms var(--ease-out)}
.sol-seg{position:relative;display:flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.07);transition:box-shadow 420ms var(--ease-out)}
.sol-seg__opt{position:relative;z-index:1;flex:1 1 auto;display:flex;cursor:pointer}
.sol-seg__opt input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.sol-seg__opt > span{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 10px;border-radius:var(--r-pill);
  white-space:nowrap;font:500 13px/1 var(--font-body);color:var(--ink-1);transition:color .3s var(--ease-glass),background-color .3s var(--ease-glass)}
.sol-seg__opt input:checked + span{color:var(--ink-dark-0);background:var(--light-1)}
.sol-seg__opt input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.sol-seg.is-ready .sol-seg__opt input:checked + span{background:transparent}
.sol-seg__thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:0;width:0;border-radius:var(--r-pill);opacity:0;
  background:linear-gradient(180deg,#fff 0%,#ececf1 100%);box-shadow:0 6px 16px rgba(0,0,0,.40),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(10,10,12,.10);
  transition:transform .3s var(--ease-out),width .3s var(--ease-out),opacity .2s linear}
.sol-seg.is-ready .sol-seg__thumb{opacity:1}
@media (hover:hover) and (pointer:fine){.sol-seg__opt:hover input:not(:checked) + span{color:var(--ink-0)}}
@media (pointer:coarse){.sol-seg__opt > span{height:44px}}
.sol-swatch{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}

.sol-price{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 14px;margin-top:auto;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.07);transition:opacity 420ms var(--ease-out)}
.sol-price__label{display:block;font:500 12px/1 var(--font-body);color:var(--ink-2)}
.sol-price__value{display:block;margin-top:7px;font:700 30px/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink-0);
  transform-origin:left bottom}
.sol-price__value.is-bump{animation:sol-dps-bump 420ms var(--ease-out)}
@keyframes sol-dps-bump{40%{transform:scale(1.05)}100%{transform:none}}
.sol-price__meta{display:block;margin-top:7px;font:500 12px/1.2 var(--font-body);color:var(--ink-1);white-space:nowrap}
.sol-add{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;flex:none;margin-left:auto;border:0;border-radius:var(--r-pill);cursor:pointer;
  font:600 14px/1 var(--font-body);color:var(--ink-dark-0);background:var(--light-1);
  box-shadow:0 8px 22px rgba(0,0,0,.35),inset 0 -1px 0 rgba(10,10,12,.12);transition:transform .16s var(--ease-out),background-color .3s var(--ease-glass)}
.sol-add:active{transform:scale(.97)}
.sol-add:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sol-add.is-done{background:var(--accent)}

/* Schritt-Fokus: aktive Gruppen hell, übrige gedämpft (setzt sol-dp-shop.js) */
.sol-config.has-focus :is(.sol-opt,.sol-price):not(.is-focus){opacity:.38}
.sol-config.has-focus .sol-opt.is-focus legend{color:var(--accent-ink)}
.sol-config.has-focus .sol-opt.is-focus .sol-seg{box-shadow:inset 0 1px 2px rgba(0,0,0,.45),inset 0 0 0 1px rgba(34,211,238,.5),0 0 0 4px rgba(34,211,238,.08)}

/* Produkt-Vorschau */
.sol-prod{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);
  transition:opacity .45s var(--ease-out),transform .55s var(--ease-out),visibility 0s linear .45s}
.sol-prod.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sol-config.is-cart .sol-prod.is-active{transform:translateY(-14px) scale(.92)}

/* Flyer: Papierstapel */
.sol-stack{--s:.82;--n:2;position:relative;width:150px;height:212px;transform:rotateX(14deg) rotateZ(-6deg) scale(var(--s));
  transform-style:preserve-3d;transition:transform .55s var(--ease-out)}
.sol-sheet{position:absolute;inset:0;border-radius:4px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08),0 18px 34px rgba(0,0,0,.45)}
.sol-sheet--back{background:#f3f3f6;transform:translate(calc(var(--i) * 5px),calc(var(--i) * 5px));
  opacity:clamp(0,calc(var(--n) - var(--i) + 1),1);transition:opacity .35s var(--ease-out)}
.sol-sheet--front{overflow:hidden;display:flex;flex-direction:column}
.sol-sheet__art{position:relative;flex:0 0 60%;padding:12px 12px 0;
  background:radial-gradient(80% 70% at 22% 18%,var(--aurora-b),transparent 62%),radial-gradient(70% 70% at 85% 75%,var(--aurora-c),transparent 60%),var(--aurora-a);
  transition:filter .45s var(--ease-out)}
.sol-sheet__art b{display:block;font-family:var(--font-accent);font-style:italic;font-weight:800;font-size:30px;line-height:.86;letter-spacing:.01em;text-transform:uppercase;color:#fff}
.sol-sheet__copy{flex:1;padding:10px 12px;display:grid;align-content:start;gap:6px;background:#fff;transition:background-color .45s var(--ease-out)}
.sol-sheet__copy i{display:block;height:5px;border-radius:3px;background:rgba(10,10,12,.16)}
.sol-sheet__copy i:nth-child(1){width:78%;background:rgba(10,10,12,.55);height:6px}
.sol-sheet__copy i:nth-child(2){width:92%}
.sol-sheet__copy i:nth-child(3){width:64%}
.sol-gloss{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 46%,rgba(255,255,255,.12) 54%,transparent 66%);
  background-size:250% 100%;background-position:120% 0;transition:opacity .4s var(--ease-out)}
[data-material="glaenzend"] .sol-gloss,[data-material="softtouch"] .sol-gloss{opacity:.55}
.sol-gloss.is-sweep{animation:sol-sweep 1s var(--ease-out)}
@keyframes sol-sweep{from{background-position:120% 0}to{background-position:-30% 0}}
[data-material="recycling"] .sol-sheet__copy{background:#ECEAE4}
[data-material="recycling"] .sol-sheet__art{filter:saturate(.55) brightness(.95)}

/* Visitenkarten */
.sol-cards{position:relative;width:230px;height:170px;transform:rotateX(16deg) rotateZ(-4deg)}
.sol-bc{position:absolute;left:50%;top:50%;width:var(--bc-w,180px);height:var(--bc-h,116px);margin:calc(var(--bc-h,116px) / -2) 0 0 calc(var(--bc-w,180px) / -2);
  border-radius:6px;overflow:hidden;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 18px 36px rgba(0,0,0,.5);
  transition:width .45s var(--ease-out),height .45s var(--ease-out),margin .45s var(--ease-out),background-color .45s var(--ease-out)}
.sol-bc--back{background:#F4F4F6;transform:translate(-26px,-20px) rotate(-9deg)}
.sol-bc--front{background:#121216;color:#fff;transform:translate(14px,12px)}
[data-material="softtouch"] .sol-bc--front{background:#1c1b22}
.sol-bc__mark{width:26px;height:14px;background:linear-gradient(90deg,var(--aurora-c),var(--aurora-b));transform:skewX(-22deg);border-radius:2px}
.sol-bc__name{font:600 12px/1.25 var(--font-display);letter-spacing:-.01em}
.sol-bc__name small{display:block;font:500 10px/1.3 var(--font-body);color:rgba(255,255,255,.6);letter-spacing:0}

/* T-Shirt */
.sol-tee{position:relative;width:220px;height:230px}
.sol-tee svg{position:absolute;width:190px;height:auto;left:15px;top:6px;overflow:visible;filter:drop-shadow(0 18px 26px rgba(0,0,0,.5))}
.sol-tee .sol-tee__back{width:120px;left:auto;right:-14px;top:-6px;opacity:0;transform:translateX(-30px) scale(.92);
  transition:opacity .45s var(--ease-out),transform .55s var(--ease-out)}
[data-print="beidseitig"] .sol-tee__back{opacity:.9;transform:none}
.sol-tee__body{fill:var(--tee,#1E2B4F);stroke:var(--tee,#1E2B4F);stroke-width:8;stroke-linejoin:round;transition:fill .45s var(--ease-out),stroke .45s var(--ease-out)}
.sol-tee__shade{fill:url(#sol-tee-shade);pointer-events:none}
.sol-tee__rim{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2;stroke-linejoin:round}
[data-color="weiss"] .sol-tee__rim{stroke:rgba(10,10,12,.10)}
.sol-tee__line{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5}
[data-color="weiss"] .sol-tee__line{stroke:rgba(10,10,12,.12)}

/* Lieferzeit-Band und Warenkorb in der Vorschau */
.sol-dps-ship{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 9px;
  border-radius:var(--r-pill);font:600 12px/1 var(--font-body);color:var(--ink-0);white-space:nowrap;
  background:rgba(10,10,14,.66);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 24px -12px rgba(0,0,0,.7)}
.sol-dps-ship .sol-icon{width:16px;height:16px;color:var(--accent-ink)}
.sol-dps-cart{position:absolute;left:50%;bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 6px;
  border-radius:var(--r-pill);font:600 13px/1 var(--font-body);color:var(--ink-dark-0);white-space:nowrap;background:var(--light-1);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.7);opacity:0;transform:translate3d(-50%,12px,0) scale(.96);
  transition:opacity 420ms var(--ease-out),transform 600ms var(--ease-out)}
.sol-dps-cart__icon{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink-dark-0);color:var(--ink-on-smoke-0)}
.sol-dps-cart__icon .sol-icon{width:14px;height:14px}
.sol-config.is-cart .sol-dps-cart{opacity:1;transform:translate3d(-50%,0,0)}
html:not(.js) .sol-dps-cart{display:none}

.sol-dps-float{right:-18px;top:-64px}
/* Schritt-Leiste (v7 Variante B wie /connector/): Rauchglas-Pille aus solutions.css; Ziffern weiß auf dichterem Kreis,
   erledigte Schritte auf dunklem Petrol (gemessen vorher 5,3:1, Ziel 7:1). Der aktive Schritt kommt unverändert aus solutions.css. */
.sol-dps .sol-stepbar__num{color:var(--ink-0);background:rgba(48,48,58,.55)}
.sol-dps .sol-stepbar__btn.is-done:not([aria-current="step"]) .sol-stepbar__num{background:rgba(8,52,64,.72)}
.sol-dps .sol-intro__title{font-size:clamp(40px,4.1vw,56px)}

/* Auswahl-Chips in den Kapiteln: nur mit JS (sie steuern das Gerät) */
html:not(.sol-ready) .sol-dps .sol-picks{display:none}
.sol-pick--cta{color:var(--on-solid);background:var(--solid);border-color:var(--solid)}
@media (hover:hover) and (pointer:fine){.sol-pick--cta:hover{color:var(--on-solid);background:var(--solid-hover);border-color:var(--solid-hover)}}

/* ---------- 3 · Sortiment-Bento ------------------------------------- */
.sol-dps-bento{grid-auto-rows:minmax(270px,auto)}
.sol-dps-bento > :nth-child(1){grid-column:span 4;grid-row:span 2}
.sol-dps-bento > :nth-child(2),.sol-dps-bento > :nth-child(3){grid-column:span 2}
.sol-dps-bento > :nth-child(4),.sol-dps-bento > :nth-child(5){grid-column:span 3}
.sol-dps-tile{justify-content:flex-start}
/* breite Kacheln: Motiv rechts, Text unten links */
.sol-dps-bento > :nth-child(4),.sol-dps-bento > :nth-child(5){min-height:240px;padding-right:clamp(190px,17vw,250px)}
.sol-dps-bento > :nth-child(4) .sol-dps-rollup,.sol-dps-bento > :nth-child(5) .sol-dps-box{position:absolute;right:clamp(28px,3.4vw,52px);top:50%;margin:0;transform:translateY(-50%)}
.sol-dps-tile::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:.8;
  background:radial-gradient(circle 320px at var(--mx,70%) var(--my,0%),rgba(255,255,255,.5),transparent 60%)}
/* v8: Akzentkacheln (--dark, --blue) sind hell und tragen das Mauslicht wie die übrigen Kacheln */
.sol-dps-tile__icon{width:28px;height:28px;flex:none;margin-top:auto;color:var(--ink-dark-1)}
.sol-tile--dark .sol-dps-tile__icon{color:var(--ink-1)}
.sol-dps-tile__copy{display:grid;gap:10px;margin-top:auto}
.sol-dps-tile--print .sol-dps-tile__copy{margin-top:0}
.sol-dps-tile--print p{max-width:34ch}
.sol-dps-range__note{margin-top:18px}

.sol-dps-print{position:relative;flex:1;min-height:300px;display:grid;place-items:center;perspective:1000px}
.sol-dps-print__stack{--s:1.24;transform:rotateX(16deg) rotateZ(-8deg) scale(var(--s)) translateX(-38px)}
.sol-dps-print__cards{position:absolute;right:6%;bottom:8%;width:230px;height:170px;transform:rotate(7deg)}
.sol-dps-print__cards .sol-bc--back{transform:translate(-18px,-30px) rotate(-11deg)}

.sol-dps-duo{display:flex;gap:12px;margin-bottom:22px}
.sol-dps-duo .sol-thumb{width:min(46%,128px);box-shadow:0 18px 34px -22px rgba(16,24,48,.5)}
.sol-dps-duo .sol-thumb:nth-child(2){transform:translateY(16px) rotate(4deg)}
.sol-dps-duo--glass .sol-thumb{background:radial-gradient(90% 80% at 50% 28%,rgba(255,255,255,.9),rgba(255,255,255,.55) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 40px -22px rgba(48,32,110,.42)}
.sol-dps-duo--glass .sol-thumb:nth-child(1){transform:rotate(-6deg)}

.sol-dps-rollup{display:grid;justify-items:center;width:max-content;margin-bottom:20px}
.sol-dps-rollup__banner{display:flex;flex-direction:column;gap:7px;width:84px;height:154px;padding:12px 10px;border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,var(--aurora-a) 0 46%,var(--light-1) 46%);box-shadow:0 22px 40px -22px rgba(16,24,48,.6),inset 0 0 0 1px rgba(10,10,12,.06)}
.sol-dps-rollup__banner b{font-family:var(--font-accent);font-style:italic;font-weight:800;font-size:20px;line-height:1;text-transform:uppercase;color:#fff;margin-bottom:34px}
.sol-dps-rollup__banner i{display:block;height:5px;border-radius:3px;background:rgba(10,10,12,.18)}
.sol-dps-rollup__banner i + i{width:70%}
.sol-dps-rollup__foot{width:104px;height:9px;margin-top:-1px;border-radius:5px;background:var(--ink-dark-0)}

.sol-dps-box{position:relative;display:grid;width:150px;margin-bottom:24px;filter:drop-shadow(0 18px 24px rgba(16,24,48,.22))}
.sol-dps-box__lid{height:22px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#F7F7FA,#DCDCE3);box-shadow:inset 0 0 0 1px rgba(10,10,12,.07)}
.sol-dps-box__body{display:grid;place-items:center;height:92px;margin:0 6px;border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#E3E3EA,var(--light-2) 60%,#DADAE1);box-shadow:inset 0 0 0 1px rgba(10,10,12,.06)}
.sol-dps-box__body svg{width:44px;height:35px;fill:var(--ink-dark-2)}

/* ---------- 4 · Lieferzeit ------------------------------------------ */
.sol-dps-ship-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.sol-dps-ship-head{margin-bottom:0}
.sol-dps-shipbox{--label-w:clamp(124px,13vw,176px);border-radius:32px}
.sol-dps-shipbox .sol-ship__rows{gap:6px}
.sol-dps-shipbox .sol-ship__scale{margin-left:calc(var(--label-w) + 12px);margin-right:12px}
.sol-dps-shipbox .sol-ship__row{width:100%;padding:10px 12px;text-align:left;border:1px solid transparent;cursor:pointer;
  transition:background-color 300ms var(--ease-glass),border-color 300ms var(--ease-glass),transform 160ms var(--ease-out)}
.sol-dps-shipbox .sol-ship__row:active{transform:scale(.99)}
.sol-dps-shipbox .sol-ship__row[aria-pressed="true"]{background:var(--hover);border-color:rgba(37,99,235,.45)}
@media (hover:hover) and (pointer:fine){.sol-dps-shipbox .sol-ship__row:not([aria-pressed="true"]):hover{background:var(--hover)}}
.sol-dps-cal{display:grid;gap:14px;padding-top:18px;border-top:1px solid var(--line)}
.sol-dps-cal__days{display:grid;grid-template-columns:1.3fr repeat(7,minmax(0,1fr));gap:6px;padding:0;margin:0;list-style:none}
.sol-dps-cal__day{display:grid;place-items:center;align-content:center;gap:3px;min-height:62px;padding:6px 2px;border-radius:14px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);color:var(--ink-1);
  transition:background-color 360ms var(--ease-glass),border-color 360ms var(--ease-glass),color 360ms var(--ease-glass)}
.sol-dps-cal__day b{font-family:var(--font-accent);font-style:italic;font-weight:800;font-size:22px;line-height:1}
.sol-dps-cal__day small{font-size:12px;line-height:1;color:var(--ink-2);opacity:1}
.sol-dps-cal__day.is-order{background:var(--solid);color:var(--on-solid);border-color:var(--solid)}
.sol-dps-cal__day.is-wait{background:repeating-linear-gradient(-45deg,rgba(10,10,12,.06) 0 5px,rgba(10,10,12,.02) 5px 10px),rgba(255,255,255,.7)}
.sol-dps-cal__day.is-window{color:#fff;border-color:transparent;
  background:linear-gradient(160deg,#1D4ED8,#2563EB);box-shadow:0 10px 26px -14px rgba(37,99,235,.55)}
.sol-dps-cal__day:is(.is-order,.is-window) small{color:inherit}
.sol-dps-cal__text{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:16.5px;letter-spacing:-.01em;color:var(--ink-0)}
.sol-dps-cal__text .sol-icon{width:22px;height:22px;color:var(--accent-3)}

/* ---------- 5 · Zielgruppen-Motive ---------------------------------- */
.sol-dps-who__item{min-height:440px}
.sol-dps-who__viz{display:flex;justify-content:flex-end;align-items:flex-start;gap:12px;min-height:118px;margin-bottom:6px}
.sol-dps-who__viz .sol-bc{position:relative;left:auto;top:auto;margin:0;transform:rotate(-6deg)}
.sol-dps-who__viz .sol-thumb{width:96px}
.sol-dps-who__viz .sol-thumb + .sol-thumb{transform:translateY(14px) rotate(5deg)}
.sol-dps-who__item .sol-bc{box-shadow:0 18px 36px -14px rgba(48,32,110,.35)}
.sol-who__item--dark .sol-dps-who__viz .sol-thumb{background:radial-gradient(90% 80% at 50% 28%,rgba(255,255,255,.95),rgba(233,233,238,.7) 70%)}

/* ---------- 7 · Mini-Motive der Verweis-Kacheln ---------------------- */
.sol-dps-mini-shop{display:grid;width:min(100%,320px);border-radius:16px;overflow:hidden;background:var(--light-1);transform:rotate(-2deg);
  box-shadow:0 26px 44px -26px rgba(48,32,110,.32),0 0 0 1px var(--glass-light-border)}   /* helle Akzentkarte (v8): Pastell-Schatten wie Nachbarkarten, äußerer Ring (Insel mappt --glass-light-border nicht um) */
.sol-dps-mini-shop__bar{display:flex;gap:5px;padding:8px 10px;background:var(--light-2)}
.sol-dps-mini-shop__bar i{width:7px;height:7px;border-radius:50%;background:rgba(10,10,12,.2)}
.sol-dps-mini-shop__banner{height:44px;margin:8px 8px 0;border-radius:10px;background:linear-gradient(118deg,#0B2545,#1D4477);
  box-shadow:inset -40px 0 0 -20px rgba(212,160,23,.55)}
.sol-dps-mini-shop__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px}
.sol-dps-mini-shop__grid .sol-thumb{border-radius:10px}
.sol-dps-mini-order{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;width:min(100%,380px);padding:10px 14px 10px 10px;
  border-radius:20px;color:var(--ink-0);background:var(--bg-1);box-shadow:0 30px 50px -28px rgba(16,24,48,.7),inset 0 1px 0 rgba(255,255,255,.1);transform:rotate(1.5deg)}
.sol-dps-mini-order .sol-thumb{border-radius:12px}
.sol-dps-mini-order__what{display:grid;gap:3px;min-width:0}
.sol-dps-mini-order__what b{font:600 14px/1.25 var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sol-dps-mini-order__what small{font-size:12px;color:var(--ink-2)}
.sol-dps-mini-order__state{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-pill);font:600 12px/1 var(--font-body);
  color:var(--accent-ink);background:rgba(34,211,238,.10);box-shadow:inset 0 0 0 1px rgba(34,211,238,.32);white-space:nowrap}

/* ---------- Responsive ---------------------------------------------- */
@media (max-width:1100px){
  .sol-seg__opt > span{padding:0 7px;font-size:12.5px}
}
@media (max-width:960px){
  /* Mobil: Vorschau und Preis kleben, die Optionen stehen als Chips in den Kapiteln */
  .sol-dps-device{width:100%}
  .sol-config__body{grid-template-columns:minmax(0,1fr)}
  .sol-config__stage{min-height:0;height:176px;border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .sol-config__stage::after{bottom:8%}
  .sol-prod{scale:.62}
  .sol-config__panel{padding:10px 14px 12px}
  .sol-config__panel .sol-opt,.sol-config__groups{display:none}
  .sol-price{margin-top:0;padding-top:0;border-top:0;align-items:center;flex-wrap:nowrap}
  .sol-price__value{margin-top:5px;font-size:24px}
  .sol-price__meta{margin-top:5px}
  .sol-dps-ship{left:10px;top:10px}
  .sol-dps-cart{bottom:10px}
  .sol-dps-float{right:8px;top:54px;padding:5px 12px 5px 5px;gap:8px}
  .sol-dps-float .sol-float__icon{width:28px;height:28px}
  .sol-dps-float .sol-float__icon svg{width:16px;height:16px}
  .sol-dps-float .sol-float__txt b{font-size:12.5px}
  .sol-dps .sol-stepbar__note{display:none}
  .sol-dps .sol-intro__title{font-size:clamp(36px,9vw,56px)}
  .sol-config.has-focus .sol-price:not(.is-focus){opacity:1}
  .sol-dps-device[data-step="5"] .sol-dps-ship.is-on{opacity:0}
  html:not(.js) .sol-dps-float{display:none}
  .sol-dps-bento > :nth-child(1){grid-column:1 / -1;grid-row:auto}
  .sol-dps-bento > :nth-child(n+2){grid-column:span 1}
  .sol-dps-bento > :nth-child(4),.sol-dps-bento > :nth-child(5){padding-right:clamp(22px,2.4vw,32px)}
  .sol-dps-bento > :nth-child(4) .sol-dps-rollup,.sol-dps-bento > :nth-child(5) .sol-dps-box{position:static;transform:none;margin-bottom:22px}
  .sol-dps-ship-grid{grid-template-columns:minmax(0,1fr)}
  .sol-dps-who__item{min-height:0}
}
@media (max-width:600px){
  .sol-dps-tile--print{min-height:0}
  .sol-dps-print{min-height:250px}
  .sol-dps-print__stack{--s:1;transform:rotateX(16deg) rotateZ(-8deg) scale(var(--s)) translateX(-46px)}
  .sol-dps-print__cards{right:-4%;bottom:2%;scale:.8}
  .sol-dps-shipbox{--label-w:96px;padding:20px 14px}
  .sol-dps-shipbox .sol-ship__row{padding:8px 6px}
  .sol-dps-shipbox .sol-ship__scale{margin-left:calc(var(--label-w) + 6px);margin-right:6px}
  .sol-dps-cal__days{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
  .sol-dps-cal__day{min-height:50px;border-radius:10px}
  .sol-dps-cal__day small{display:none}
  .sol-dps-cal__day b{font-size:18px}
  .sol-dps-cal__day.is-order b{font-size:12px;font-family:var(--font-body);font-style:normal;font-weight:700}
  .sol-dps-cal__text{font-size:15px}
  .sol-dps-mini-order{grid-template-columns:48px minmax(0,1fr);row-gap:8px}
  .sol-dps-mini-order__state{grid-column:2;justify-self:start}
}
@media (max-width:380px){
  .sol-price__meta{white-space:normal}
  .sol-add{padding:0 12px}
}

/* ---------- Reduzierte Bewegung -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .sol-prod,.sol-stack,.sol-bc,.sol-tee svg,.sol-seg__thumb{transition:none !important}
  .sol-gloss.is-sweep,.sol-price__value.is-bump{animation:none}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .sol-config__core{background:rgba(14,14,22,.96)}
}

/* ---------- Kontrast und helle Flächen (D2) --------------------------- */
/* Werbeartikel-Kachel (.sol-tile--blue): seit v8 Pastell-Fade aus solutions.css, Schrift dunkel; der frühere Dunkelblau-Verlauf entfällt */
/* Lieferzeit-Box (v7): helles Milchglas aus .glass--strong (Token), Glanzkante und Lichtfleck wie überall */
.sol-dps-ship-sec .sol-note{color:var(--ink-2)}
@media (prefers-reduced-transparency:reduce){.sol-dps-shipbox.glass--strong{background:var(--light-1)}}
/* Ablauf auf hellem Grund: zwischen zwei hellen Abschnitten als abgesetzte Fläche (--light-2) mit Haarlinien */
.sol-dps-after.light{background:var(--light-2);box-shadow:inset 0 1px 0 rgba(10,10,12,.06),inset 0 -1px 0 rgba(10,10,12,.06)}

/* ---------- Glas-Bühne (v5, body.pt-page) ----------
   stage-core.css macht nur section.stage durchsichtig; die Story-Hülle ist ein div.stage.sol-scrolly. Hintergrund und eigene Aurora
   fallen weg, das Licht kommt von der festen Bühne. Keine neue Hülle, kein overflow/contain: das Gerät in .sol-stagecol klebt weiter. */
.pt-page .sol-scrolly{background:transparent;box-shadow:none}
.pt-page .sol-scrolly>.aurora{display:none}
/* Streifen hinter dem klebenden Gerät (solutions.css: deckend in --bg-0, damit Kapitelkarten nicht durchscheinen). Auf der durchsichtigen
   Hülle helles Mattglas (v7): die Pastell-Bühne bleibt sichtbar, Karten darunter verschwimmen. */
.pt-page .sol-scrolly .sol-stagecol::before{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%)}
/* ohne JS steht der Streifen schon im Hero: Oberkante weich statt harter Linie über den Fades (mit JS klebt er oben unter der Navigation) */
html:not(.sol-ready) .pt-page .sol-scrolly .sol-stagecol::before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 72px);mask-image:linear-gradient(180deg,transparent 0,#000 72px)}
.pt-page .sol-scrolly .sol-stagecol::after{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
@media (prefers-reduced-transparency:reduce){.pt-page .sol-scrolly .sol-stagecol::before,.pt-page .sol-scrolly .sol-stagecol::after{background:var(--bg-0);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- v6 · Beliebte Produkte, Ihre Vorteile, Kennzahlen ----------
   Helle Blätter wie die Bereichs-Kacheln darüber: weiße Kachel, feine Linie, Icon-Platte, Lichtfleck (data-light, core.js).
   Staffel der Produkte setzt sol-dp-shop.js nach Lage im Raster; ohne JS und bei reduzierter Bewegung steht alles im Endzustand. */
.sol-dps-sub{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2.3vw,32px);line-height:1.1;letter-spacing:-.025em;color:var(--ink-dark-0)}

/* Beliebte Produkte: 5 × 2 (neun Produkte + „und mehr“), 2 Spalten unter 1000 px */
.sol-dps-pop{margin-top:clamp(56px,7vw,96px)}
.sol-dps-pop .sol-dps-sub{margin-bottom:clamp(20px,2.4vw,28px)}
.sol-dps-pop__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.sol-dps-pop__item{display:flex;min-width:0}
.sol-dps-pop__card{position:relative;isolation:isolate;overflow:hidden;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-width:0;
  min-height:162px;padding:18px 18px 20px;border-radius:var(--r-lg);background:var(--light-1);border:1px solid rgba(10,10,12,.06);
  box-shadow:inset 0 1px 0 #fff,0 18px 40px -30px rgba(16,24,48,.38);
  transition:translate 260ms var(--ease-out),box-shadow 260ms var(--ease-out),border-color 260ms ease}
/* Lichtfleck folgt dem Zeiger (--mx/--my aus core.js), kühl getönt wie das Bühnenlicht */
.sol-dps-pop__card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:.7;transition:opacity 260ms ease;
  background:radial-gradient(circle 190px at var(--mx,24%) var(--my,0%),rgba(34,211,238,.11),rgba(124,58,237,.04) 55%,transparent 75%)}
.sol-dps-pop__plate{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:var(--r-md);color:var(--ink-dark-0);
  background:linear-gradient(180deg,var(--light-0),var(--light-2));
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(10,10,12,.06),0 10px 20px -12px rgba(16,24,48,.4);
  transition:box-shadow 260ms var(--ease-out)}
.sol-dps-pop__icon{display:block;width:32px;height:32px}
.sol-dps-pop__name{font:600 17px/1.25 var(--font-display);letter-spacing:-.012em;color:var(--ink-dark-0);overflow-wrap:anywhere}
/* „und mehr“: dunkles Schlussstück mit aufgefächerten Glasplatten */
.sol-dps-pop__card--more{justify-content:space-between;background:var(--bg-1);border-color:transparent;color:var(--ink-0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 22px 44px -26px rgba(16,24,48,.55)}
.sol-dps-pop__card--more::before{content:"";position:absolute;z-index:-1;inset:-46% -18% 26% 18%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(37,99,235,.5),rgba(34,211,238,.14) 55%,transparent)}
.sol-dps-pop__card--more::after{display:none}
.sol-dps-pop__fan{position:relative;display:block;width:96px;height:54px}
.sol-dps-pop__fan i{position:absolute;top:0;width:54px;height:54px;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.1),0 10px 22px -10px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sol-dps-pop__fan i:nth-child(1){left:0;transform:rotate(-8deg)}
.sol-dps-pop__fan i:nth-child(2){left:20px;transform:rotate(-1deg)}
.sol-dps-pop__fan i:nth-child(3){left:40px;transform:rotate(7deg);background:linear-gradient(160deg,rgba(34,211,238,.38),rgba(37,99,235,.22))}
.sol-dps-pop__more{font-family:var(--font-accent);font-style:italic;font-weight:800;font-size:clamp(28px,2.3vw,34px);line-height:1.05;
  letter-spacing:.01em;text-transform:uppercase;padding-bottom:2px}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .sol-dps-pop__card:hover{translate:0 -4px;border-color:rgba(10,10,12,.1);box-shadow:inset 0 1px 0 #fff,0 30px 52px -30px rgba(16,24,48,.5)}
  .sol-dps-pop__card:hover::after{opacity:1}
  .sol-dps-pop__card:hover .sol-dps-pop__plate{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(34,211,238,.4),0 12px 26px -12px rgba(34,211,238,.55)}
  .sol-dps-pop__card--more:hover{border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 52px -28px rgba(16,24,48,.65)}
}
/* Einblenden: Kachel per data-reveal (base.css), Icon setzt sich kurz danach in die Platte */
@media (prefers-reduced-motion:no-preference){
  .js .sol-dps-pop__item[data-reveal] :is(.sol-dps-pop__icon,.sol-dps-pop__fan i){scale:.8;transition:scale 900ms var(--ease-out) calc(var(--rd,0ms) + 140ms)}
  .js .sol-dps-pop__item[data-reveal].is-in :is(.sol-dps-pop__icon,.sol-dps-pop__fan i){scale:1}
}

/* Ihre Vorteile: ein Blatt, vier Felder mit Haarlinien (Linien = 1 px Spalt auf getöntem Grund) */
.sol-dps-perks{margin-top:clamp(56px,7vw,96px)}
.sol-dps-perks .sol-dps-sub{margin-bottom:clamp(20px,2.4vw,28px)}
.sol-dps-perks__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;overflow:hidden;
  border-radius:var(--r-xl);background:rgba(10,10,12,.07);border:1px solid rgba(10,10,12,.06);box-shadow:0 24px 50px -32px rgba(16,24,48,.3)}
.sol-dps-perks__item{display:grid;align-content:start;gap:22px;padding:clamp(22px,2.4vw,32px);background:var(--light-1)}
.sol-dps-perks__title{font:600 17.5px/1.35 var(--font-display);letter-spacing:-.012em;color:var(--ink-dark-0);max-width:20ch;text-wrap:balance}
@media (prefers-reduced-motion:no-preference){
  .js .sol-dps-perks__list[data-reveal] .sol-dps-perks__item{opacity:0;transform:translate3d(0,14px,0);
    transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:calc(var(--rd,0ms) + 160ms + var(--i,0) * 70ms)}
  .js .sol-dps-perks__list[data-reveal].is-in .sol-dps-perks__item{opacity:1;transform:none}
}

/* Kennzahlen (.stat-band aus tiles.css): nur Abstand im Sortiment */
.sol-dps-range .sol-head:has(+ .stat-band){margin-bottom:clamp(28px,3.4vw,44px)}
.sol-dps-range .stat-band{margin-bottom:clamp(44px,6vw,80px)}

@media (max-width:999px){
  .sol-dps-pop__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sol-dps-pop__card{flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;min-height:0;padding:12px 18px 12px 12px}
  .sol-dps-pop__card--more{justify-content:space-between}
  .sol-dps-pop__fan{width:86px;height:46px}
  .sol-dps-pop__fan i{width:46px;height:46px}
  .sol-dps-perks__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  .sol-dps-pop__grid{gap:10px}
  .sol-dps-pop__card{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:18px;min-height:124px;padding:14px 14px 16px}
  .sol-dps-pop__plate{width:46px;height:46px;border-radius:12px}
  .sol-dps-pop__icon{width:26px;height:26px}
  .sol-dps-pop__name{font-size:15.5px}
  .sol-dps-pop__more{font-size:26px}
  .sol-dps-perks__list{grid-template-columns:minmax(0,1fr)}
  .sol-dps-perks__item{grid-template-columns:48px minmax(0,1fr);align-items:center;gap:16px;padding:16px 18px}
  .sol-dps-perks__title{max-width:none;font-size:16.5px}
}
@media (prefers-reduced-transparency:reduce){.sol-dps-pop__fan i{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg-2)}}