/* Händlerportal · Mengenvorschläge, Empfehlungen, Live-Showroom. Ladereihenfolge: templates/b2b_portal/_styles.html */
/* v40 */
.rq{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.rq .sq{width:70px}
.sq.ovr input{border-color:var(--accent);background:color-mix(in srgb,var(--tint) 60%,var(--surface))}
.sugg{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.sugg b{color:var(--fg)}
.rqbar{width:54px;height:6px;border-radius:999px;background:var(--line);overflow:hidden;display:inline-block}
.rqbar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.ovrtag{font-size:11px;font-weight:600;color:var(--accent);border:1px solid currentColor;border-radius:999px;padding:0 8px}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:12.5px}
.bedupd{margin-left:auto}
.twbar{flex-wrap:wrap}
.addonrow{display:grid;grid-template-columns:auto 52px 1fr auto;gap:14px;align-items:center;padding:12px 16px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--surface);cursor:pointer;position:relative}
.addonrow.on{border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--tint) 50%,var(--surface))}
.addonrow .box{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line-strong);display:grid;place-items:center;color:transparent}
.addonrow.on .box{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.addonrow .box svg{width:14px;height:14px}
.addonrow .th{width:52px;height:52px;border-radius:8px;overflow:hidden}
.addonrow .th img{width:100%;height:100%}
.addonrow .nm{display:grid}.addonrow small{color:var(--muted);font-size:12.5px}
.addonrow .pe small{display:block;font-size:11px;color:var(--muted)}
.addtobar{background:var(--tint);border-bottom:1px solid var(--tint-strong)}
.addtobar .ab-in{max-width:1180px;margin:0 auto;padding:8px var(--gutter);display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.addtobar .ab-in>span{display:flex;gap:8px;align-items:center;margin-right:auto}
.addtobar svg{width:17px;height:17px}
.addtobar .btn{padding:5px 12px;font-size:13px}

/* v41: Empfehlungen, Live-Showroom */
.recos{display:grid;gap:22px;margin:22px 0 8px}
.reco .rh{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;margin-bottom:10px}
.reco h2{font-size:17px}
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:640px){.rgrid{grid-template-columns:1fr}}
.rcard{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.rth{width:56px;height:56px;border:0;padding:0;border-radius:8px;background:#F3F2EF;overflow:hidden;cursor:pointer}
.rth img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.rnm{display:grid;min-width:0}.rnm b{font-size:14px}.rnm small{color:var(--muted);font-size:12.5px}
.rev{font-size:12px;color:var(--accent);font-weight:500}
.rbuy{display:grid;gap:6px;justify-items:end}.rbuy .num{font-size:13px}
.rbuy .btn{padding:5px 12px}
.srpage{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:grid;gap:14px;margin-top:8px}
.srpage h2 small{font-weight:400;color:var(--muted);font-size:13px;margin-left:6px}
.srcard{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.srcard>div{display:grid;gap:2px;flex:1;min-width:200px}
.srcard .ic{width:40px;height:40px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;flex:none}
.srcard .ic svg{width:19px;height:19px}
.srwait{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.srwait i{width:8px;height:8px;border-radius:50%;background:var(--sun);animation:srpulse 1.6s infinite}
@keyframes srpulse{50%{opacity:.3}}
.srdays,.srslots{display:flex;flex-wrap:wrap;gap:8px}
.srdays .chip{display:grid;justify-items:center;gap:0;padding:7px 12px;border-radius:12px;min-width:64px}
.srdays .chip small{font-size:11px;color:var(--muted)}
.srslots .chip{min-width:66px}
.srdays .chip[aria-pressed="true"],.srslots .chip[aria-pressed="true"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.srdays .chip[aria-pressed="true"] small{color:inherit}
.srslots .chip:disabled{opacity:.35;cursor:default;text-decoration:line-through}
.cn .srt{display:flex;align-items:center;gap:5px;color:var(--primary)!important}
.cn .srt svg{width:13px;height:13px}
.srbook{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:color-mix(in srgb,var(--on-primary) 10%,transparent);border-radius:12px;padding:10px 12px}
.srbook .ic{width:32px;height:32px;border-radius:50%;background:var(--on-primary);color:var(--primary);display:grid;place-items:center;flex:none}
.srbook .ic svg{width:17px;height:17px}
.srbook>div{display:grid;flex:1;min-width:140px}.srbook .note{color:inherit;opacity:.85}
.srbook .btn{background:var(--on-primary);color:var(--primary);border-color:var(--on-primary)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.live i{width:8px;height:8px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 0 rgba(229,72,77,.6);animation:srp 1.6s infinite}
@keyframes srp{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}70%{box-shadow:0 0 0 8px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
@media (prefers-reduced-motion:reduce){.live i{animation:none}}
.ab-live{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:600;margin-left:auto}
.ab-live i{width:8px;height:8px;border-radius:50%;background:#E5484D}
.adminbar .btn.ab-sr{margin-left:auto}
.adminbar .ab-sr+.btn.ghost,.adminbar .ab-live+.btn.ghost{margin-left:0}
.adminbar .btn svg{width:15px;height:15px}
.srdock{position:fixed;right:16px;bottom:96px;z-index:60;width:320px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;box-shadow:0 10px 32px rgba(0,0,0,.18);overflow:hidden}
.srh{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 14px;background:var(--primary);color:var(--on-primary)}
.srh .srwho{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srh .ib{color:inherit;width:28px;height:28px}
.srbody{padding:12px;display:grid;gap:10px}
.srdock.min .srbody{display:none}
.srdock.min{width:auto}
.srv{display:grid;grid-template-columns:2fr 1fr;gap:6px}
.srtile{position:relative;aspect-ratio:4/3;border-radius:10px;background:#1E2B22;color:#FAF9F7;display:grid;place-items:center;align-content:center;gap:4px;overflow:hidden}
.srtile.me{background:#2C3A30}
.srtile .av{width:46px;height:46px;border-radius:50%;background:#2F7045;display:grid;place-items:center;font-weight:600;font-size:15px}
.srtile.me .av{width:30px;height:30px;font-size:11px}
.srtile small{font-size:11px;opacity:.85;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srtile .dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:#8A8F88}
.srtile.on .dot{background:#3CCB7F}
.srs{font-size:13px}
.src{display:flex;gap:6px;flex-wrap:wrap}
.src .btn{padding:6px 10px;font-size:12.5px}
.src .btn svg{width:15px;height:15px}
.srnote{font-size:11.5px;color:var(--muted)}
.srinvite{position:fixed;left:50%;transform:translateX(-50%);top:14px;z-index:70;display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:10px 14px;box-shadow:0 10px 32px rgba(0,0,0,.18)}
.srinvite>div{display:grid}
@media (max-width:560px){.srdock{bottom:88px;right:8px;left:8px;width:auto;max-width:none}.srv{grid-template-columns:1fr 1fr}.srtile{aspect-ratio:16/10}}