/* ============================================================================
   varianten.css — Größen-Chips & Varianten-Kacheln  [05.10.2026, HP]
   Gemeinsam für marke-profil, laden-brandpool und die Handelsbeziehungen.
   Regeln mit doppelter Klasse (0,2,0), weil der Reset in seiten-hb.css
   (`.sp-seite *{margin:0;padding:0}`) einfache Klassenregeln überstimmt.
   ============================================================================ */
.vg-chips.vg-chips{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0}
.vg-chip.vg-chip{font:600 11.5px/1 Poppins,system-ui,sans-serif;min-width:30px;padding:5px 7px;border-radius:6px;
  border:1px solid var(--border,#E4E4E9);background:#fff;color:#14142B;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:3px}
.vg-chip.vg-chip:hover{border-color:var(--accent,#4EAF44);color:var(--accent-dk,#2F6B2A)}
.vg-chip.vg-an{background:var(--accent,#4EAF44);border-color:var(--accent,#4EAF44);color:#fff}
.vg-chip.vg-aus{border-style:dashed;color:#9a9aa6;text-decoration:line-through}
.vg-chip.vg-doppelt{border-color:#f2c46b;background:#fff8e6}
.vg-chip.vg-doppelt i{color:#c88a00;font-size:10px}
.vg-chip.vg-weg{background:#F4F4F6;color:#9a9aa6;border-color:transparent}
.pc .vg-zahl.vg-zahl,.prod-thumb .vg-zahl.vg-zahl{position:absolute;right:8px;bottom:8px;z-index:3;background:rgba(20,20,43,.78);color:#fff;
  font:600 11px/1 Poppins,sans-serif;padding:5px 8px;border-radius:999px}
.vg-hinweis.vg-hinweis{font-size:11.5px;color:var(--muted,#5E5E6A);display:inline-flex;align-items:center;gap:4px}
.vg-sammel.vg-sammel{font-size:11.5px;color:#5B3FA8;background:#F1EEF9;border-radius:6px;padding:3px 7px;align-self:flex-start;display:inline-flex;align-items:center;gap:4px}
.vg-leiste.vg-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:10px 12px;margin:0 0 12px;border-radius:10px;background:var(--bg,#F7F7F9);border:1px solid var(--border,#E4E4E9)}
.vg-leiste .vg-leiste-l{font-size:12px;font-weight:700;margin-right:4px}
.vg-leiste .vg-leiste-t{flex-basis:100%;font-size:11.5px;color:var(--muted,#5E5E6A);margin-top:4px}

/* ---- Angebot: Menge je Größe (laden-brandpool, Composer) ---------------- */
.vg-mengen.vg-mengen{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin-top:8px;width:100%}
.vg-menge.vg-menge{display:flex;flex-direction:column;align-items:stretch;border:1px solid var(--border,#E4E4E9);border-radius:8px;overflow:hidden;background:#fff}
.vg-menge .vg-menge-g{font:700 11.5px/1 Poppins,sans-serif;padding:5px 0;text-align:center;background:var(--bg,#F7F7F9);border:0;cursor:pointer;color:#14142B;display:flex;align-items:center;justify-content:center;gap:4px}
.vg-menge .vg-menge-g input{margin:0;accent-color:var(--accent,#4EAF44)}
.vg-menge input.vg-menge-n{border:0;width:100%;text-align:center;font:600 13px Poppins,sans-serif;padding:6px 2px;-moz-appearance:textfield;background:#fff}
.vg-menge input.vg-menge-n::-webkit-inner-spin-button{display:none}
.vg-menge.vg-menge-aus{opacity:.45}
.vg-menge.vg-menge-aus input.vg-menge-n{visibility:hidden}
/* [05.10.2026, Review vor Go-live] Markenprofil: Provision je Größe unter der UVP. */
.vg-summe.vg-summe{font-size:12px;color:var(--muted,#5E5E6A);margin-top:6px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vg-summe b{color:#14142B}
.vg-verteil.vg-verteil{font:600 12px Poppins,sans-serif;border:1px solid var(--border,#E4E4E9);background:#fff;border-radius:999px;padding:4px 10px;cursor:pointer}
.vg-verteil.vg-verteil:hover{border-color:var(--accent,#4EAF44)}

/* ---- Handelsbeziehung: Größenzeile unter einer Varianten-Gruppe ---------- */
.vg-hb.vg-hb{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.vg-hb .vg-hb-g{font:600 11.5px/1 Poppins,sans-serif;padding:5px 7px;border-radius:6px;background:var(--bg,#F7F7F9);border:1px solid var(--border,#E4E4E9)}
.vg-hb .vg-hb-g b{font-weight:800;margin-left:3px}
.hb-prow.hb-vg{cursor:pointer}
.hb-vg-kinder.hb-vg-kinder{margin-left:22px;border-left:2px dashed var(--border,#E4E4E9)}
.vg-hb-tab.vg-hb-tab{border-collapse:collapse;margin-top:6px;font:12px Poppins,sans-serif}
.vg-hb-tab th{font-weight:600;color:var(--muted,#5E5E6A);text-align:left;padding:3px 8px 3px 0}
.vg-hb-tab td{text-align:center;padding:3px 8px;border:1px solid var(--border,#E4E4E9);min-width:34px}
.vg-sam-raster.vg-sam-raster{padding:4px 24px 16px}
.sam-z.vg-sam{border-bottom:0}

/* Paket-Maske „Gegenvorschlag für alle" [Feedback 17] */
.vg-sam-block.vg-sam-block{border-bottom:1px solid var(--border,#E4E4E9)}
.vg-sam-prov.vg-sam-prov{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font:600 13px Poppins,sans-serif;color:var(--muted,#5E5E6A)}
.vg-sam-prov input{width:58px;text-align:center;font:600 14px Poppins,sans-serif;border:1px solid var(--border,#E4E4E9);border-radius:8px;padding:7px 4px;color:#14142B}

/* ---- Farbe × Größe [22.10.2026, HP · Board 371] ---------------------------- */
.vg-punkt{display:inline-block;width:9px;height:9px;border-radius:50%;border:1px solid rgba(0,0,0,.18);margin-right:5px;vertical-align:-1px;flex:0 0 auto}
.vg-chip .vg-gr-n{font-weight:800;margin-left:5px}
.vg-chip.vg-gr-0:not(.vg-an){opacity:.5}          /* Farben ohne Stückzahl leicht grau (HP 22.10.) */
.vg-chip.vg-gr-0:not(.vg-an):hover{opacity:1}
.vg-gr-lbl{display:block;width:100%;margin:10px 0 5px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#aab0b8}
.vg-gr-lbl b{color:#14142B;letter-spacing:.02em}
.vg-gr-vt{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.vg-gr-vt .vg-gr-ok{font:600 12px Poppins,sans-serif;border:0;background:var(--accent,#4EAF44);color:#fff;border-radius:999px;padding:5px 12px;cursor:pointer}
.vg-gr-vt .vg-gr-weg{font:600 12px Poppins,sans-serif;border:0;background:none;color:var(--muted,#5E5E6A);cursor:pointer;padding:5px 4px}
.vg-gr-spanne{font-size:12px;color:var(--muted,#5E5E6A)}
.vg-menge .vg-menge-g small{font-weight:600;color:var(--muted,#5E5E6A);margin-left:2px}   /* Aufpreis je Größe [22.10.2026] */
.vg-hb-aufpreis{font-size:11.5px;color:var(--muted,#5E5E6A);margin-top:3px}

/* Board 371 · HB-Raster */
/* [22.10.2026, HP] Stück je Größe in beiden Handelsbeziehungen: Farben als Zeilen, Größen als Spalten
   (`groessenTabelle()` in hb-varianten.js). Baut auf `.vg-hb-tab` oben auf. */
.vg-hb-tab.vg-hb-raster{margin:8px 0 2px}
.vg-hb-raster tr.vg-hb-kopf td{border:0;color:var(--muted,#5E5E6A);font-weight:600}
.vg-hb-raster td.vg-hb-l{text-align:left;white-space:nowrap;padding-right:10px;border:0;font-weight:600}
.vg-hb-raster .vg-hb-leer{color:#c2c7ce}
/* Ab vier Farben eingeklappt [22.10.2026, HP-Feedback] — gewählte Chips bleiben sichtbar */
.vg-chips.vg-chips-zu > .vg-chip:nth-child(n+4):not(.vg-mehr):not(.vg-an){display:none}
.vg-chip.vg-mehr{border-style:dashed;color:var(--muted,#5E5E6A)}