/* Product demonstrations are scoped to the existing Sonnenschutz selector. */
.shade-selector .shade-panel{max-width:none;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(26px,3.3vw,52px);padding:32px;align-items:center;animation:none}
.shade-copy{min-width:0;padding:8px 0 8px 12px}
.shade-copy>.eyebrow{color:var(--blue);font-size:10px;margin-bottom:18px}
.shade-selector .shade-copy h3{font-size:clamp(27px,2.4vw,37px);line-height:1.12}
.shade-selector .shade-copy>p:not(.eyebrow){font-size:14px}
.shade-selector .shade-copy .button{width:auto;font-size:13px}
.shade-demo{min-width:0;width:100%;margin:0;background:#f3f5f5;--shade-light:1;--shade-bottom:100%;--shade-extend:100%;color:#071b35}
.shade-demo-stage{position:relative;aspect-ratio:3/2;overflow:hidden;background:#e5e6e2;isolation:isolate}
.shade-demo-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.shade-demo-room{opacity:var(--shade-light)}
.shade-demo[data-scene=licht] .shade-demo-room{clip-path:polygon(evenodd,0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,23.8% 10.7%,76.2% 10.7%,76.2% 61.1%,23.8% 61.1%,23.8% 10.7%)}
.shade-demo[data-scene=licht] .shade-demo-product{clip-path:polygon(23.8% 10.7%,76.2% 10.7%,76.2% var(--shade-bottom,61.1%),23.8% var(--shade-bottom,61.1%))}
.shade-demo[data-scene=dunkel] .shade-demo-room{clip-path:polygon(evenodd,0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,26.45% 16.1%,73.9% 16.1%,73.9% 53.85%,26.45% 53.85%,26.45% 16.1%)}
.shade-demo[data-scene=dunkel] .shade-demo-product{clip-path:polygon(26.45% 16.1%,73.9% 16.1%,73.9% var(--shade-bottom,53.85%),26.45% var(--shade-bottom,53.85%))}
.shade-demo[data-scene=terrasse] .shade-demo-room{clip-path:polygon(evenodd,0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,7% 2%,69% 3%,94% 31%,55% 28%,7% 2%)}
.shade-demo[data-scene=terrasse] .shade-demo-product{clip-path:polygon(7% 2%,var(--shade-awning-x,69%) var(--shade-awning-y,3%),var(--shade-front-x,94%) var(--shade-front-y,31%),55% 28%)}
.shade-demo-tag{position:absolute;top:14px;left:14px;background:#ffffffed;padding:8px 11px;font-size:10px;line-height:1.2;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:#071b35;box-shadow:0 2px 15px #071b3510}
.shade-demo-caption{padding:17px 19px 15px}
.shade-demo-caption-head{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:36px}
.shade-selector .shade-demo .shade-demo-status{color:#071b35;font-size:13px;line-height:1.35;font-weight:550;margin:0;max-width:none}
.shade-demo-play{border:1px solid #c6d1d9;border-radius:0;padding:7px 10px;background:#fff;color:#071b35;font-size:11px;min-height:36px;white-space:nowrap;display:none;gap:7px;align-items:center;cursor:pointer}
.shade-demo.is-ready .shade-demo-play{display:inline-flex}
.shade-demo-play:hover{background:#071b35;color:#fff}
.shade-demo-play:disabled{opacity:.5;cursor:wait}
.shade-demo-controls{display:none;align-items:center;gap:12px;margin-top:11px}
.shade-demo.is-ready .shade-demo-controls{display:flex}
.shade-demo-endpoint{border:0;background:none;color:#536778;font-size:11px;padding:0;min-height:36px;cursor:pointer;white-space:nowrap}
.shade-demo-endpoint[aria-pressed=true]{color:#075a94;font-weight:600}
.shade-demo-range{--fill:100%;width:100%;min-width:30px;height:36px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;touch-action:pan-y;padding:0;border:0}
.shade-demo-range::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,#075a94 var(--fill),#ccd6dc var(--fill))}
.shade-demo-range::-moz-range-track{height:3px;background:#ccd6dc}
.shade-demo-range::-moz-range-progress{height:3px;background:#075a94}
.shade-demo-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:19px;height:19px;margin-top:-8px;border-radius:50%;background:#075a94;border:4px solid white;box-shadow:0 0 0 1px #075a94}
.shade-demo-range::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#075a94;border:4px solid white;box-shadow:0 0 0 1px #075a94}
.shade-selector .shade-demo .shade-demo-note{margin:7px 0 0;color:#637381;font-size:9px;line-height:1.5;max-width:none}
.shade-demo-error{display:none}
.shade-demo.has-error .shade-demo-error{display:block;color:#071b35;font-size:12px;padding:16px;position:absolute;bottom:0;left:0;right:0;background:#ffffffed}
.shade-demo.has-error .shade-demo-controls,.shade-demo.has-error .shade-demo-play{display:none}
@supports not (clip-path:polygon(evenodd,0% 0%,100% 0%,100% 100%)){.shade-demo .shade-demo-room{clip-path:none!important}.shade-demo .shade-demo-product{display:none}}
@media(min-width:951px){.shade-selector .shade-panel{min-height:420px}}
@media(max-width:950px){.shade-selector .shade-panel{padding:27px;gap:30px;grid-template-columns:1fr}.shade-copy{padding:0}.shade-selector .shade-copy h3{font-size:32px}.shade-demo{max-width:650px}.shade-selector .shade-copy>p:not(.eyebrow){max-width:650px}}
@media(max-width:650px){.shade-selector .shade-panel{padding:23px 18px 18px;gap:26px}.shade-selector .shade-copy h3{font-size:28px}.shade-selector .shade-copy>.button{width:100%;font-size:12px}.shade-demo-caption{padding:12px 12px 11px}.shade-demo-caption-head{gap:8px}.shade-selector .shade-demo .shade-demo-status{font-size:11px;max-width:155px}.shade-demo-play{font-size:10px;padding:7px 8px;min-height:40px}.shade-demo-endpoint{font-size:10px;min-height:44px}.shade-demo-controls{gap:9px;margin-top:5px}.shade-demo-range{height:44px}.shade-demo-tag{top:10px;left:10px;font-size:9px;padding:7px 9px}.shade-selector .shade-demo .shade-demo-note{font-size:8px;margin-top:3px}}
@media(prefers-reduced-motion:reduce){.shade-demo *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media print{.shade-demo-controls,.shade-demo-play{display:none!important}.shade-selector .shade-panel{display:block;break-inside:avoid}.shade-demo{max-width:480px;margin-top:20px}}