/* Händlerportal · Sets und Set-Konfigurator. Ladereihenfolge: templates/b2b_portal/_styles.html */
/* Sets */
.setcfg{display:grid;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;margin:18px 0 26px}
.setcfg .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:10px}
.setcfg > *{min-width:0}
.setitem{display:grid;gap:6px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--bg)}
.setitem label.cb{display:flex;gap:8px;align-items:center;font-weight:500;font-size:14px;cursor:pointer}
.setitem select{width:100%;border:1px solid var(--line-strong);border-radius:6px;padding:6px 8px;background:var(--surface);font-size:13.5px}
.setitem .p{font-size:12px;color:var(--muted)}
.setgrid .mx th.rowh{min-width:140px}
.setitem.lead{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.setitem .leadtag{color:var(--accent);font-weight:500}
.setitem .hint{font-size:11.5px;line-height:1.35}
.stephead{display:flex;gap:14px;align-items:flex-start}
.stephead h2{margin:0}
.stephead .note{margin-top:3px}
.stepno{flex:none;width:30px;height:30px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:600;font-size:14px;margin-top:1px}
.stepno.ghost{background:var(--tint-strong);color:var(--fg)}
.setcfg .parts{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
.part{display:grid;grid-template-columns:auto 56px minmax(140px,1fr) minmax(0,1.6fr) 96px;align-items:center;gap:14px;padding:10px 16px;border-top:1px solid var(--line);transition:background .15s,opacity .15s}
.part:first-child{border-top:0}
.part:not(.on){background:var(--surface)}
.part:not(.on) .nm b{color:var(--fg)}
.part .addpart{padding:7px 12px;font-size:13px}
.part:not(.on) .ctl{display:flex}
.part.lead{background:var(--tint)}
.part .tog,.tower .tog{position:relative;display:grid;place-items:center;cursor:pointer}
.part .tog input,.tower .tog input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.part .tog .box,.tower .tog .box{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line-strong);display:grid;place-items:center;color:transparent;background:var(--surface)}
.part .tog input:checked + .box,.tower .tog input:checked + .box{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.part .tog input:focus-visible + .box,.tower .tog input:focus-visible + .box{box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 35%,transparent)}
.part .tog .box svg,.tower .tog .box svg{width:15px;height:15px}
.part .th{width:56px;height:56px;border-radius:8px;background:#F2F2F2;overflow:hidden;display:block}
.part .th img{width:100%;height:100%;object-fit:contain;display:block;transform:scale(1.15)}
.part .nm{display:grid;line-height:1.3;min-width:0}
.part .nm b{font-weight:600;font-size:15px}
.part .nm small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.part .ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0}
.part .pill{font-size:12.5px;color:var(--muted);background:var(--tint);border-radius:999px;padding:4px 10px}
.part .pill.lead{background:var(--primary);color:var(--on-primary)}
.part .szl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.part select{border:1px solid var(--line-strong);border-radius:7px;padding:5px 8px;background:var(--surface);color:var(--fg);font-size:13.5px}
.part .why{flex-basis:100%;font-size:11.5px;color:var(--muted)}
.hoverhint{}
@media (hover:none){.hoverhint{display:none}}
.picsw{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}
@media (max-width:560px){.picsw{margin-left:0}}
.seg.pcol{margin-bottom:8px}.seg.pcol button{display:inline-flex;gap:6px;align-items:center}.seg.pcol .dot{width:12px;height:12px}
.perq{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:5px 10px;font-size:13px;cursor:pointer;color:var(--fg)}
.seg button+button{border-left:1px solid var(--line-strong)}
.seg button[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}
.part .pr{text-align:right;font-weight:600;white-space:nowrap;display:grid;line-height:1.2}
.part .pr small{font-weight:400;color:var(--muted);font-size:11px}
.setcfg .setfoot{position:static;margin-top:14px;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:12px 16px;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.setfoot .sum1{font-size:13px}
.setfoot .sum2{margin-top:3px;font-size:15px}
.setfoot .miss{font-size:12px;color:var(--st-r);margin-top:3px}
.setfoot .btn:disabled{opacity:.45;cursor:not-allowed}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .part .th{background:#C2C2C2}:root:not([data-theme="light"]) .part .th img{filter:brightness(.8)}}
:root[data-theme="dark"] .part .th{background:#C2C2C2}:root[data-theme="dark"] .part .th img{filter:brightness(.8)}
@media (max-width:760px){.part{grid-template-columns:auto 48px minmax(0,1fr) auto;gap:8px 12px;padding:10px 12px}.part .nm b{overflow-wrap:anywhere}.part select{max-width:100%;min-width:0}.part .szl{flex-wrap:wrap}.part .th{width:48px;height:48px}.part .ctl{grid-column:3/5;grid-row:2}.part .pr{grid-column:4;grid-row:1}.setcfg .setfoot{position:static;box-shadow:none}}
.szgrps{display:grid;gap:10px;width:100%}
.szgrp{display:grid;grid-template-columns:84px 1fr;align-items:end;gap:10px}
.szgrp .gl{font-size:13px;font-weight:600;padding-bottom:9px}
@media (max-width:560px){.szgrp{grid-template-columns:1fr;gap:4px}.szgrp .gl{padding-bottom:0}}
.cathead{align-items:flex-start}
.catacts{display:flex;gap:8px;flex-wrap:wrap;padding-top:6px}
.setbtn{padding:9px 14px;font-size:14px}
.setbtn svg{width:18px;height:18px}
.setbtn .cnt{background:rgba(255,255,255,.22);border-radius:999px;font-size:11.5px;padding:1px 7px;margin-left:2px}
.catsub{margin:-8px 0 6px}
.packs{display:grid;gap:10px;margin:0 0 22px}
.twbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.plist.tower .twrow{grid-template-columns:auto 44px 56px 1fr auto auto;align-items:center}
.plist.tower .twrow.off{opacity:.45}
.twsz{font-weight:600;font-size:15px;text-align:center}
.twsel{display:flex;gap:8px;flex-wrap:wrap}
#poref{border:1px solid var(--line-strong);border-radius:7px;padding:6px 9px;background:var(--surface);color:var(--fg);font:inherit;font-size:13.5px}
.twsel select{border:1px solid var(--line-strong);border-radius:6px;padding:5px 8px;background:var(--surface);color:var(--fg);font:inherit;font-size:13.5px}
.plist.tower .tog{margin-right:2px}
@media (max-width:640px){.plist.tower .twrow{grid-template-columns:auto 34px 1fr auto;row-gap:8px}.plist.tower .twrow .th{display:none}.plist.tower .twsel{grid-column:3/-1}.plist.tower .pe{grid-column:3}}
.packbanner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;text-align:left;background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px 12px 12px;cursor:pointer;color:var(--fg)}
.packbanner:hover{border-color:var(--line-strong)}
.pbimgs{display:flex}
.pbimgs span{width:64px;height:64px;border-radius:8px;background:#F2F2F2;overflow:hidden;border:2px solid var(--tint);margin-left:-14px}
.pbimgs span:first-child{margin-left:0}
.pbimgs img{width:100%;height:100%;object-fit:contain;transform:scale(1.2)}
.pbtxt{display:grid;gap:2px}
.pbtxt b{font-size:16px}
.packbanner .tbtn{white-space:nowrap}
@media (max-width:620px){.packbanner{grid-template-columns:1fr}.pbimgs span{width:52px;height:52px}}
.pack{display:grid;gap:26px}
.pgroup{display:grid;gap:12px}
.pgroup h2 small{font-weight:400;margin-left:8px}
.plist{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.prow{display:grid;grid-template-columns:56px 1fr auto 70px 90px;align-items:center;gap:14px;padding:8px 16px 8px 10px;border-top:1px solid var(--line)}
.prow:first-child{border-top:0}
.prow .th{width:56px;height:56px;border-radius:8px;background:#F2F2F2;overflow:hidden}
.prow .th img{width:100%;height:100%;object-fit:contain;transform:scale(1.15)}
.prow .nm{display:grid;line-height:1.3}
.prow .nm small{color:var(--muted);font-size:12.5px}
.prow .st{position:static;width:8px;height:8px}
.pq input{width:56px;height:36px;text-align:center;border:1px solid var(--line-strong);border-radius:7px;background:var(--bg);color:var(--fg);font-size:14px}
.pq.has input{background:var(--tint-strong);border-color:var(--accent);font-weight:600}
.prow .pe{text-align:right;display:grid;line-height:1.2;font-weight:600}
.prow .pe small{font-weight:400;color:var(--muted);font-size:11px}
.pgrid td.cell input{width:54px}
.packfoot{position:sticky;bottom:84px;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:12px 16px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.packfoot .sum2{font-size:15px}.packfoot .sum1{font-size:13px;margin-top:3px}
.packfoot .pacts{display:flex;gap:8px;flex-wrap:wrap}
#packinfo{flex:1 1 360px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .prow .th,:root:not([data-theme="light"]) .pbimgs span{background:#C2C2C2}:root:not([data-theme="light"]) .prow .th img,:root:not([data-theme="light"]) .pbimgs img{filter:brightness(.8)}}
:root[data-theme="dark"] .prow .th,:root[data-theme="dark"] .pbimgs span{background:#C2C2C2}
@media (max-width:760px){.packfoot{position:static}.prow{grid-template-columns:48px 1fr auto 60px;gap:10px}.prow .th{width:48px;height:48px}.prow .pe{grid-column:2/5;text-align:left;display:block}}