/* Blåkläder-Winterwelt (blaklaeder-showroom.php) — Raumsprache nach der Referenzsammlung (Blåkläder Workwear Center) und der
   Blåkläder Visual Identity 2019: Primär Dunkelblau #0d1523/#131e31 (Pantone 5395 C), Akzent Gelb #ffe000 NUR als Kante/Rahmen,
   nie als Fläche; Sekundär #aaaaaa/#f6f6f6; helles Birkensperrholz, Beton, schwarze Stahlrahmen mit Lochgitter.
   Saisonfarbe Winter-Cyan (VI S. 10) sparsam für Wetter und Thermometer. Präfix bs- (nie hw-: Kollision markenwelt/handwerk). */
.bs-raum{--bs-blau:#0d1523;--bs-blau-2:#131e31;--bs-blau-3:#1d2a42;--bs-gelb:#ffe000;--bs-grau:#aaaaaa;--bs-hell:#f6f6f6;--bs-holz:#e3cfa6;
    --bs-holz-dunkel:#c9ad7b;--bs-cyan:#1fb3e6;--bs-stahl:#090b10;
    position:relative;margin:0 0 24px;padding:0 0 34px;color:#fff;background:var(--bs-blau);
    background-image:radial-gradient(circle,rgba(255,255,255,.035) 1.2px,transparent 1.6px);background-size:14px 14px}

/* Kopf: Winterwald-Dunkelblau, Versal-Headline, schräger Block im Logowinkel 10,39° */
.bs-kopf{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 30px;align-items:start;
    padding:clamp(30px,4vw,64px) clamp(16px,3vw,44px) 26px;
    background:radial-gradient(70% 120% at 100% 0%,rgba(31,179,230,.28),rgba(31,179,230,0) 60%),linear-gradient(160deg,var(--bs-blau) 0%,var(--bs-blau-2) 55%,#22324f 100%)}
.bs-kopf::after{content:"";position:absolute;right:-6%;bottom:-40px;width:46%;height:120px;background:var(--bs-blau-3);transform:skewX(-10.39deg);z-index:-1;opacity:.7}
.bs-kopf > :not(canvas){position:relative;z-index:1}
.wetter-leinwand{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.bs-overline{display:block;margin-bottom:10px;font-family:var(--font-label);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--bs-grau)}
.bs-titel{margin:0;font-size:clamp(40px,5.8vw,88px);line-height:.94;font-weight:900;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.bs-titel em{font-style:normal;color:#fff;box-shadow:inset 0 -.14em 0 var(--bs-gelb)}
.bs-satz{max-width:660px;margin:16px 0 0;font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:rgba(255,255,255,.9)}
.bs-kopf-logo{display:block;width:clamp(140px,16vw,230px)}
.bs-kopf-logo img{display:block;width:100%}

/* Wetterkarte */
.bs-wetterkarte{grid-column:1/-1;scroll-margin-top:calc(var(--kopf, 90px) + 16px);display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.bs-wetterkarte a{position:relative;flex:1 1 170px;display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:58px;padding:12px 14px 12px 50px;
    text-decoration:none;color:#fff;background:rgba(9,11,16,.6);border-top:3px solid var(--zk,var(--bs-grau));backdrop-filter:blur(6px);transition:transform .2s ease,background .2s ease}
.bs-wetterkarte a:hover,.bs-wetterkarte a:focus-visible{transform:translateY(-3px);background:rgba(9,11,16,.85);outline:none}
.bs-wetterkarte i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-style:normal;font-size:22px;line-height:1}
.bs-wetterkarte b{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.bs-wetterkarte span{font-size:12px;color:rgba(255,255,255,.75)}
.bs-wetterkarte a.bs-zone--fokus{--zk:var(--bs-gelb);box-shadow:inset 0 0 0 1px rgba(255,224,0,.55)}
.bs-wetterkarte a.bs-zone--fokus i{color:var(--bs-gelb)}
.bs-zone--frost{--zk:#9FC3E8}.bs-zone--eiszeit{--zk:var(--bs-cyan)}.bs-zone--nacht{--zk:var(--bs-gelb)}.bs-zone--theke{--zk:#fff}

/* Wand: Kopf mit Versal-Titel und gelber Kante links (wie die Kopfblende im Laden) */
.bs-wand{position:relative;margin:34px 16px 0;padding:22px 18px 18px;scroll-margin-top:calc(var(--kopf, 90px) + 16px);background:rgba(9,11,16,.35);border-top:3px solid var(--bs-gelb)}
.bs-wand-kopf{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.bs-wand-kopf h2{margin:0;font-size:26px;line-height:1.1;font-weight:900;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.bs-wand-kopf span{font-size:14px;color:var(--bs-grau)}
/* Looks an der Puppe: Farbpunkte unter dem Wandtext, nichts liegt über dem Bild */
.bs-looks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px}
.bs-wand-kopf .bs-looks-titel{margin-right:2px;font-family:var(--font-label);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bs-grau)}
.bs-look{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;font:inherit;font-size:12px;color:#fff;cursor:pointer;
    background:var(--bs-stahl);border:0;border-radius:999px;box-shadow:inset 0 0 0 1px #2e3a52;transition:box-shadow .2s ease}
.bs-look i{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.bs-wand-kopf .bs-look span{font-size:12px;color:inherit}
.bs-look:hover,.bs-look:focus-visible{box-shadow:inset 0 0 0 1px var(--bs-grau);outline:none}
.bs-look[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--bs-gelb)}
.bs-szene > img.bs-look-neu{opacity:0;transition:opacity .45s ease;pointer-events:none}
.bs-szene > img.bs-look-neu.ist-da{opacity:1}
.bs-wand--fokus{border-top-width:6px}
.bs-wand--zone-eiszeit{box-shadow:inset 0 0 0 1px rgba(31,179,230,.2),inset 0 0 70px rgba(31,179,230,.12)}
.bs-hoch{margin-left:auto;align-self:center;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;white-space:nowrap;text-decoration:none;
    font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--bs-grau);border:1px solid #2e3a52}
.bs-hoch:hover,.bs-hoch:focus-visible{color:#fff;border-color:var(--bs-gelb);outline:none}
.bs-schild{margin-left:auto;align-self:center;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;white-space:nowrap;text-decoration:none;
    font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--bs-stahl);box-shadow:inset 0 0 0 1px #2e3a52}
.bs-schild span{font-size:20px;line-height:1;color:var(--bs-gelb);transition:transform .2s ease}
.bs-schild:hover,.bs-schild:focus-visible{box-shadow:inset 0 0 0 2px var(--bs-gelb);outline:none}
.bs-schild:hover span{transform:translateX(4px)}
.bs-schild ~ .bs-hoch{margin-left:0}

/* Szene mit Klickflächen */
.bs-szene{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bs-stahl);container-type:inline-size;box-shadow:0 18px 30px -12px rgba(0,0,0,.85)}
.bs-szene > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bs-szene .ki-label{z-index:3}
.bs-grab{position:absolute;z-index:2;display:block;border-radius:4px;text-decoration:none;transition:box-shadow .18s ease,background-color .18s ease}
.bs-grab:hover,.bs-grab:focus-visible{background:rgba(255,255,255,.06);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 5px var(--bs-gelb);outline:none}
.bs-szene--rahmen .bs-grab{box-shadow:0 0 0 3px #00E0FF}
.bs-grab-schild{position:absolute;left:50%;top:100%;transform:translate(-50%,6px);display:flex;flex-direction:column;align-items:flex-start;gap:1px;
    width:max-content;max-width:calc(100% + 40px);min-width:110px;padding:clamp(4px,.5cqw,7px) clamp(6px,.7cqw,10px);
    background:var(--bs-stahl);border-left:3px solid var(--bs-gelb);color:#fff;box-shadow:0 8px 16px rgba(0,0,0,.5);text-align:left;opacity:0;pointer-events:none;
    transition:opacity .18s ease,transform .18s ease}
.bs-grab--innen .bs-grab-schild{top:auto;bottom:4%;transform:translate(-50%,0)}
.bs-grab:hover .bs-grab-schild,.bs-grab:focus-visible .bs-grab-schild{opacity:1}
.bs-grab-schild strong{font-size:clamp(10px,1cqw,13px);font-weight:700}
.bs-grab-schild > span{font-size:clamp(9px,.85cqw,11px);color:var(--bs-grau)}
.bs-grab-schild b{margin-top:2px;font-size:clamp(12px,1.2cqw,16px);font-weight:700}
@media(hover:none){.bs-grab .bs-grab-schild{display:none}}
/* Logo (Original-SVG) und Kopfblenden-Schrift im Bild; mit Skript perspektivisch (data-quad) */
.bs-saeule{position:absolute;z-index:1;pointer-events:none;filter:drop-shadow(.6px 0 .6px rgba(0,0,0,.55))}
.bs-saeule span{position:absolute;overflow:hidden;filter:brightness(var(--h)) saturate(.92)}
.bs-saeule i{position:absolute;top:0;bottom:0;background:linear-gradient(rgba(255,255,255,.05),rgba(0,0,0,0) 35%,rgba(0,0,0,.22)),url(logos/blaklaeder-saeule.svg?v=20261024) 0 0/100% 100% no-repeat}
.bs-saeule span::after{content:"";position:absolute;inset:0;background:#fff;opacity:var(--g);mix-blend-mode:screen}
.bs-fenster{position:absolute;z-index:1;display:block;cursor:pointer;border-radius:2px;transition:background-color .2s ease,box-shadow .2s ease}
.bs-fenster span{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);padding:8px 12px;white-space:nowrap;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(9,11,16,.82);border-left:3px solid var(--bs-gelb);opacity:0;transition:opacity .2s ease}
.bs-fenster span b{color:var(--bs-gelb)}
.bs-fenster:hover,.bs-fenster:focus-visible{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(255,224,0,.55);outline:none}
.bs-fenster:hover span,.bs-fenster:focus-visible span{opacity:1}
@media(hover:none){.bs-fenster span{opacity:.92}}
.bs-blende{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;white-space:nowrap;
    font-weight:800;font-size:1.25cqw;letter-spacing:.14em;color:#1b2333;opacity:.88}
.bs-blende.bs-quad--perspektive{font-size:46px;letter-spacing:.16em}

/* Paar-Leiste: Jacke + Hose zusammen nach EN 342 */
.bs-paar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:14px 0 0;padding:10px 14px;background:var(--bs-blau-2);border-left:4px solid var(--bs-gelb)}
.bs-paar-norm{flex:none;display:grid;place-items:center;width:62px;height:54px;font-weight:900;font-size:13px;letter-spacing:.04em;color:var(--bs-blau);background:#fff;
    clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.bs-paar-text{flex:1 1 300px;font-size:15px;line-height:1.4}
.bs-paar-text strong{text-transform:uppercase;letter-spacing:.03em}
.bs-paar a{font-weight:700;font-size:14px;color:var(--bs-gelb);text-decoration:none;white-space:nowrap}
.bs-paar a:hover,.bs-paar a:focus-visible{text-decoration:underline}

/* Karten unter der Szene */
.bs-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0 0;padding:0;list-style:none}
.bs-liste a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:#fff;background:var(--bs-stahl);border-top:3px solid var(--bs-blau-3);transition:transform .15s ease,border-color .15s ease}
.bs-liste a:hover,.bs-liste a:focus-visible{transform:translateY(-2px);border-top-color:var(--bs-gelb);outline:none}
.bs-liste-bild{position:relative;display:block;aspect-ratio:1;background:var(--bs-hell)}
.bs-liste-bild img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.bs-liste-text{display:grid;gap:1px;padding:7px 9px 9px}
.bs-liste-text strong{font-size:13px;line-height:1.25}
.bs-liste-text em{font-style:normal;font-size:11px;color:var(--bs-grau)}
.bs-liste-text b{margin-top:3px;font-size:15px}

/* Klima-Plakette + Normzeile */
.bs-klima{display:grid;justify-items:start;gap:2px;margin-top:4px}
.bs-klima-grad{display:inline-block;padding:2px 7px;font-style:normal;font-size:11px;font-weight:800;white-space:nowrap;color:var(--bs-blau);background:#BFD6F0}
.bs-klima-grad--eis{background:#8FDCFF}
.bs-klima small{font-size:10.5px;line-height:1.3;color:var(--bs-grau)}
.bs-grab-schild .bs-klima small{max-width:200px;white-space:normal}

/* Wetterband je Zone */
.bs-wetter{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 30px;align-items:end;
    margin:56px 0 0;padding:clamp(34px,4.4vw,70px) clamp(18px,3vw,44px) clamp(26px,3vw,40px);min-height:220px;scroll-margin-top:calc(var(--kopf, 90px) + 8px)}
.bs-wetter > :not(canvas){position:relative;z-index:1}
.bs-wetter::after{content:"";position:absolute;left:-4%;bottom:0;width:38%;height:14px;background:var(--bs-gelb);transform:skewX(-10.39deg);z-index:1}
.bs-wetter-zone{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-label);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.bs-wetter-zone b{display:grid;place-items:center;width:34px;height:34px;font-size:15px;letter-spacing:0;color:var(--bs-blau);background:var(--bs-gelb)}
.bs-wetter h2{margin:10px 0 10px;font-size:clamp(30px,4vw,60px);line-height:1;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;color:#fff}
.bs-wetter p{max-width:660px;margin:0;font-size:17px;line-height:1.5;color:rgba(255,255,255,.9)}
.bs-wetter-grad{display:grid;justify-items:end;text-align:right}
.bs-wetter-grad b{font-size:clamp(28px,3.6vw,54px);line-height:1;font-weight:200;color:#fff;white-space:nowrap}
.bs-wetter-grad span{margin-top:6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.bs-wetter--frost{background:radial-gradient(70% 120% at 90% 110%,rgba(200,225,255,.35),rgba(200,225,255,0) 60%),linear-gradient(115deg,var(--bs-blau) 0%,#1f3459 50%,#5d7fae 100%)}
.bs-wetter--eiszeit{background:radial-gradient(60% 110% at 85% 0%,rgba(255,255,255,.45),rgba(255,255,255,0) 60%),linear-gradient(115deg,#04101d 0%,#0b3558 45%,var(--bs-cyan) 100%)}
.bs-wetter--nacht{background:radial-gradient(40% 80% at 80% 100%,rgba(255,224,0,.16),rgba(255,224,0,0) 70%),linear-gradient(115deg,#000 0%,#0a0f18 55%,var(--bs-blau-2) 100%)}
.bs-wetter--nacht h2{color:var(--bs-gelb)}

/* „Draußen ansehen“: Showroom gleitet hinaus, der Film herein */
.bs-wechsel{position:relative;overflow:hidden}
.bs-wechsel-spur{display:flex;align-items:flex-start;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.bs-wechsel-spur > *{flex:0 0 100%;min-width:0}
.bs-wechsel--draussen .bs-wechsel-spur{transform:translateX(-100%)}
.bs-draussen{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.bs-draussen video,.bs-draussen > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bs-draussen-text{position:absolute;left:16px;bottom:16px;z-index:2;max-width:min(560px,70%);margin:0;padding:10px 14px;font-size:15px;line-height:1.4;font-weight:600;color:#fff;background:rgba(9,11,16,.8);border-left:4px solid var(--bs-gelb)}
.bs-draussen .ki-label{z-index:3}
.bs-zurueck{position:absolute;left:16px;top:16px;z-index:2;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;
    font:inherit;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(9,11,16,.8);border:0;border-left:4px solid var(--bs-gelb)}
.bs-zurueck span{font-size:20px;line-height:1;color:var(--bs-gelb)}

/* Theke: Sperrholz mit gelber Kante, dunkle Front mit Claim */
.bs-theke-zone{position:relative;margin:40px 16px 0;scroll-margin-top:calc(var(--kopf, 90px) + 16px)}
.bs-theke{display:grid;grid-template-columns:minmax(60px,140px) minmax(0,1fr);min-height:240px;box-shadow:0 18px 26px -10px rgba(0,0,0,.8)}
.bs-theke-holz{background:linear-gradient(90deg,var(--bs-holz-dunkel),var(--bs-holz) 30%,#efe0bf 60%,var(--bs-holz));border-right:4px solid var(--bs-gelb)}
.bs-theke-front{display:flex;gap:30px;align-items:center;padding:26px 30px;background:linear-gradient(180deg,var(--bs-blau-2),var(--bs-blau))}
.bs-claim{flex:none;margin:0;font-size:clamp(30px,3.8vw,52px);line-height:.98;font-weight:900;color:#fff}
.bs-theke-text h2{margin:0 0 6px;font-size:22px;font-weight:900;text-transform:uppercase;color:#fff}
.bs-theke-text p{margin:0;font-size:15px;line-height:24px;color:rgba(255,255,255,.88)}
.bs-theke-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px!important}
.bs-knopf{display:inline-block;padding:10px 16px;font-weight:700;font-size:14px;text-decoration:none;color:var(--bs-blau);background:var(--bs-gelb)}
.bs-knopf:hover,.bs-knopf:focus-visible{background:#fff;outline:none}
.bs-knopf--hell{color:#fff;background:transparent;box-shadow:inset 0 0 0 2px #fff}
.bs-knopf--hell:hover,.bs-knopf--hell:focus-visible{color:var(--bs-blau);background:#fff}

/* Thermometer am rechten Rand */
.bs-thermo{position:fixed;right:18px;top:50%;z-index:40;display:grid;justify-items:center;gap:6px;width:78px;padding:12px 8px 10px;transform:translateY(-50%);
    background:rgba(13,21,35,.88);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 24px rgba(0,0,0,.45);backdrop-filter:blur(6px);color:#fff;pointer-events:none}
.bs-thermo[hidden]{display:none}
.bs-thermo-roehre{position:relative;width:14px;height:150px;border-radius:7px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.bs-thermo-roehre::after{content:"";position:absolute;left:50%;bottom:-11px;width:24px;height:24px;border-radius:50%;transform:translateX(-50%);background:var(--thermo,#9FC3E8);box-shadow:0 0 12px var(--thermo,#9FC3E8)}
.bs-thermo-saeule{position:absolute;left:3px;right:3px;bottom:0;height:43%;border-radius:4px;background:var(--thermo,#9FC3E8);transition:height .8s cubic-bezier(.3,.7,.3,1),background .8s ease}
.bs-thermo[data-kalt="eis"]{--thermo:var(--bs-cyan)}
.bs-thermo-wert{margin-top:12px;font-size:22px;font-weight:800;line-height:1}
.bs-thermo-zone{font-size:9.5px;line-height:1.25;overflow-wrap:anywhere;hyphens:auto;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:rgba(255,255,255,.75)}
@media(max-width:1199px){.bs-thermo{display:none}}
.bs-fuss{margin:0 0 24px;font-size:13px;line-height:1.5;color:var(--text-muted)}

@media(max-width:900px){
    .bs-kopf{grid-template-columns:1fr;padding:22px 16px 18px}
    .bs-kopf-logo{width:120px;grid-row:1}
    .bs-wetterkarte a{flex-basis:calc(50% - 5px)}
    .bs-wand{margin:28px 0 0;padding:18px 10px 12px}
    .bs-wand-kopf{flex-wrap:wrap}
    .bs-hoch,.bs-schild{margin:8px 0 0;align-self:flex-start}
    .bs-wetter{grid-template-columns:1fr;min-height:0}
    .bs-wetter-grad{justify-items:start;text-align:left}
    .bs-theke{grid-template-columns:36px minmax(0,1fr)}
    .bs-theke-front{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 16px}
    .bs-theke-zone{margin:30px 0 0}
}
/* Handy: Text unter Film/Bild statt darüber — bei 16:9 in Handybreite verdeckte die Box den Großteil (Lars 24.10.2026) */
@media(max-width:700px){
    .bs-draussen{aspect-ratio:auto;padding-top:56.25%;background:#0d1523}
    .bs-draussen video,.bs-draussen > img{bottom:auto;height:auto;aspect-ratio:16/9}
    .bs-draussen-text{position:relative;left:auto;bottom:auto;max-width:none;padding:12px 14px;font-size:14px;border-left:0;border-top:3px solid var(--bs-gelb)}
    .bs-zurueck{position:relative;left:auto;top:auto;margin:0 14px 14px;gap:8px;padding:8px 12px;font-size:12px}
    .bs-zurueck span{font-size:13px}
    .bs-draussen .ki-label{top:8px;bottom:auto;right:auto;left:8px}   /* rechts oben steht der Einkaufswagen */
    /* Außenansicht ist hier höher als 16:9 (Text unter dem Film) — im Showroom-Zustand bleibt die Wand 16:9, sonst schnitt
       die gestreckte Szene die Puppe rechts ab */
    .bs-wechsel:not(.bs-wechsel--draussen){aspect-ratio:16/9}
}
/* „Look in den Warenkorb“ oben rechts (Showroom und draußen): Glas-Schild wie „Zurück in den Showroom“, Wagen im gelben Feld */
.bs-wagen{position:absolute;top:14px;right:14px;z-index:4;display:inline-flex;align-items:stretch;padding:0;overflow:hidden;cursor:pointer;
    font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(9,11,16,.78);
    border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 26px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    transition:transform .2s ease,background .2s ease,color .2s ease}
.bs-wagen-sym{display:grid;place-items:center;width:44px;background:var(--bs-gelb);color:var(--bs-blau)}
.bs-wagen-sym svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.bs-wagen-text{padding:12px 16px 12px 14px;white-space:nowrap}
.bs-wagen:hover,.bs-wagen:focus-visible{transform:translateY(-2px);background:var(--bs-gelb);color:var(--bs-blau);outline:none}
.bs-wagen:hover .bs-wagen-sym svg,.bs-wagen:focus-visible .bs-wagen-sym svg{transform:translateX(3px)}
.bs-wagen:focus-visible{box-shadow:0 0 0 3px #fff,0 10px 26px rgba(0,0,0,.45)}
.bs-wagen::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-20deg);opacity:0}
.bs-wagen.gepackt::after{animation:bs-glanz .9s ease}
@keyframes bs-glanz{0%{left:-40%;opacity:1}100%{left:130%;opacity:1}}
.bs-wagen-layer{width:min(680px,calc(100% - 32px));max-height:calc(100% - 32px);padding:0;color:#fff;background:#0d1523;border:0;border-top:3px solid #ffe000;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.bs-wagen-layer::backdrop{background:rgba(5,8,14,.7)}
.bs-wagen-kopf{display:flex;justify-content:space-between;gap:16px;padding:18px 20px 10px}
.bs-wagen-kopf h2{margin:0;font-size:20px;color:#fff}
.bs-wagen-look{margin:4px 0 0;font-size:13px;color:#aaaaaa}
.bs-wagen-zu{flex:none;width:36px;height:36px;font-size:24px;line-height:1;color:#fff;background:none;border:1px solid rgba(255,255,255,.25);cursor:pointer}
.bs-wagen-looks{--bs-stahl:#090b10;--bs-gelb:#ffe000;--bs-grau:#aaaaaa;display:flex;flex-wrap:wrap;gap:6px 8px;padding:0 20px 12px}  /* Layer liegt außerhalb .bs-raum */
.bs-wagen-looks .bs-look span{font-size:12px}
.bs-wagen-liste{margin:0;padding:0 20px;list-style:none}
.bs-wagen-liste li{display:grid;grid-template-columns:auto 56px 1fr 96px 64px 86px;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.1)}
.bs-wagen-liste li.bs-wagen-laedt,.bs-wagen-liste li.bs-wagen-fehlt{display:block;color:#aaaaaa}
.bs-wagen-liste img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:4px;cursor:zoom-in;transition:box-shadow .2s ease}
.bs-wagen-liste img:hover{box-shadow:0 0 0 2px #ffe000}
.bs-wagen-lupe{position:fixed;z-index:10;aspect-ratio:4/5;padding:10px;background:#fff;border-top:3px solid #ffe000;box-shadow:0 24px 50px rgba(0,0,0,.55);
    pointer-events:none;opacity:0;transform:scale(.94);transition:opacity .18s ease,transform .18s ease}
.bs-wagen-lupe.offen{opacity:1;transform:none}
.bs-wagen-lupe img{display:block;width:100%;height:100%;object-fit:contain}
.bs-wagen-name strong{display:block;font-size:14px}
.bs-wagen-name span{font-size:12px;color:#aaaaaa}
.bs-wagen-liste select,.bs-wagen-liste input[type=number]{width:100%;padding:7px 8px;font:inherit;font-size:14px;color:#fff;background:#131e31;border:1px solid rgba(255,255,255,.25)}
.bs-wagen-mit input{width:18px;height:18px;accent-color:#ffe000}
.bs-wagen-preis{text-align:right;font-size:13px;font-weight:600}
.bs-wagen-status{margin:0;font-size:14px;font-weight:600;color:#ffe000;text-align:right}
.bs-wagen-status:empty{display:none}
.bs-wagen-status.warnung{padding:9px 12px;color:#0d1523;background:#ffe000;border-left:4px solid #fff;animation:bs-hinweis .35s ease}
@keyframes bs-hinweis{0%,100%{transform:none}30%{transform:translateX(-5px)}65%{transform:translateX(4px)}}
.bs-wagen-liste select.fehlt{border-color:#ffe000;box-shadow:0 0 0 2px #ffe000}
.bs-wagen-fuss{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:16px 20px 18px}
.bs-wagen-summe{margin-right:auto;font-weight:700}
.bs-wagen-zum{color:#fff;font-weight:600}
.bs-wagen-los{padding:11px 18px;font:inherit;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#0d1523;background:#ffe000;border:0;cursor:pointer}
.bs-wagen-los:disabled{opacity:.5;cursor:wait}
@media(max-width:640px){
    .bs-wagen{top:8px;right:8px;font-size:11px;letter-spacing:.05em}
    .bs-wagen-sym{width:32px}.bs-wagen-sym svg{width:17px;height:17px}
    .bs-wagen-text{padding:8px 10px}
    .bs-wagen-liste li{grid-template-columns:auto 48px 1fr 80px;grid-template-areas:"mit bild name name" "mit bild groesse menge" ". . preis preis"}
    .bs-wagen-liste li .bs-wagen-mit{grid-area:mit}.bs-wagen-liste li img{grid-area:bild;width:48px;height:48px}
    .bs-wagen-liste li .bs-wagen-name{grid-area:name}.bs-wagen-liste li select{grid-area:groesse}
    .bs-wagen-liste li input[type=number]{grid-area:menge}.bs-wagen-liste li .bs-wagen-preis{grid-area:preis}
    .bs-wagen-fuss{flex-wrap:wrap}
    .bs-wagen-status{flex:1 1 100%;order:-1;text-align:left}
}
@media(prefers-reduced-motion:reduce){.bs-wagen-lupe,.bs-wagen,.bs-wagen.gepackt::after,.bs-wagen-status.warnung,.bs-szene > img.bs-look-neu,.bs-grab,.bs-grab-schild,.bs-liste a,.bs-wetterkarte a,.bs-wechsel-spur,.bs-thermo-saeule{transition:none}}