/* Blaupunkt 2026 — screen-size selector. Standalone CSS-compatible SCSS. */
.bp-screen-sizes, .bp-screen-sizes *, .bp-screen-sizes *::before, .bp-screen-sizes *::after {box-sizing:border-box}
.bp-screen-sizes {background:#f6f9fa;color:#102b3d;padding:clamp(52px,6vw,96px) 0}
.bp-screen-sizes__container {width:min(calc(100% - 48px),1320px);margin-inline:auto}
.bp-screen-sizes__heading {text-align:center;margin:0 auto clamp(26px,4vw,50px)}
.bp-screen-sizes__heading h2 {font-size:clamp(28px,3.3vw,45px);line-height:1.2;color:#122a38;font-weight:750;letter-spacing:-.035em;margin:0}
.bp-screen-sizes__heading p {font-size:clamp(15px,1.4vw,18px);color:#577081;margin:12px 0 0}
.bp-screen-sizes__rule {display:block;width:64px;height:5px;background:#ffbc26;border-radius:9px;margin:18px auto 0}
.bp-screen-sizes__grid {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.6vw,22px)}
.bp-screen-sizes__item {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;min-width:0;min-height:172px;padding:20px 10px 15px;background:#fff;border:1px solid #dfe9ec;border-radius:12px;color:#143449!important;text-decoration:none!important;transition:box-shadow .2s,transform .2s}
a.bp-screen-sizes__item:hover {box-shadow:0 10px 26px #072b3c1c;transform:translateY(-3px)}
a.bp-screen-sizes__item:focus-visible {outline:3px solid #00a2d5;outline-offset:3px}
.bp-screen-sizes__media {display:flex;align-items:center;justify-content:center;width:100%;height:84px;flex:none}
.bp-screen-sizes__media img {width:100%;max-width:145px;height:84px;object-fit:contain}
.bp-screen-sizes__tv {display:block;position:relative;width:min(100%,136px);height:69px;border:6px solid #172b39;border-bottom-width:9px;border-radius:5px;background:linear-gradient(145deg,#032943 5%,#007ca3 53%,#48d3d8);box-shadow:inset 1px 0 14px #071d38b3,0 2px 4px #0002;transform:perspective(300px) rotateY(-5deg)}
.bp-screen-sizes__tv::after {content:'';position:absolute;inset:10px 16px;transform:rotate(-21deg);border-radius:90%;background:#bdf8fa75;filter:blur(12px)}
.bp-screen-sizes__stand {position:absolute;bottom:-17px;left:calc(50% - 13px);width:26px;height:8px;border-bottom:3px solid #182b39;border-radius:1px}
.bp-screen-sizes__stand::after {content:'';position:absolute;bottom:-6px;left:-9px;width:45px;border-bottom:4px solid #172b39}
.bp-screen-sizes__label {font-size:clamp(19px,2vw,28px);line-height:1.2;font-weight:750;white-space:nowrap;color:#0a2338}
.bp-screen-sizes__arrow {position:absolute;right:13px;top:13px;font-size:18px;color:#1687a1}
@media (max-width:1070px){.bp-screen-sizes__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:680px){
 .bp-screen-sizes {padding:52px 0 58px}
 .bp-screen-sizes__container {width:100%;padding:0 0 0 16px}
 .bp-screen-sizes__heading {padding:0 16px 0 0;margin-bottom:30px}
 .bp-screen-sizes__grid {display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 16px 20px 0}
 .bp-screen-sizes__grid::-webkit-scrollbar{display:none}
 .bp-screen-sizes__item {flex:0 0 min(42vw,190px);min-height:154px;scroll-snap-align:start;padding:17px 7px 12px}
 .bp-screen-sizes__tv {height:65px}
 .bp-screen-sizes__label {font-size:23px}
}
@media (max-width:350px){.bp-screen-sizes__item{flex-basis:45vw}}
@media (prefers-reduced-motion:reduce){.bp-screen-sizes__item{transition:none}.bp-screen-sizes__grid{scroll-behavior:auto}}