/* Gemeinsame Bauteile der Websites von Kerstens Kamine und 369 Vision Werk.
   Diese Datei liegt in website/ und website-369/ BYTEGLEICH: Änderungen immer in beiden Ordnern einspielen.
   Sie enthält keine Firmenfarben. Farben, Rundung und Schrift kommen aus den Variablen der jeweiligen
   site.css (--rand, --grau, --text …); abweichende Maße setzt eine Website mit --bt-…-Variablen in ihrem :root.
   Im <head> steht sie VOR site.css: Die Website darf ein Bauteil in ihrer site.css gezielt überschreiben. */

/* ── Mengenwähler ──
   <div class="bt-menge"><button>−</button><span>1</span><button>+</button></div>
   statt <span> auch <input type="number">. Größer: zusätzlich .bt-menge-gross.
   Stellgrößen (Standard): --bt-menge-hoehe (44px), --bt-menge-knopf (44px), --bt-menge-zeichen (18px),
   --bt-menge-zeile (Zeilenhöhe der Zeichen, geerbt), --bt-menge-zahl (28px), --bt-menge-grund (durchsichtig),
   --bt-menge-innen (0 = Knöpfe innen gerade, 999px = rund) */
.bt-menge { display: inline-flex; align-items: center; height: var(--bt-menge-hoehe, 44px); border: 1px solid var(--rand); border-radius: 999px; background: var(--bt-menge-grund, transparent); }
.bt-menge > button { width: var(--bt-menge-knopf, 44px); height: 100%; border: 0; background: none; font-size: var(--bt-menge-zeichen, 18px); line-height: var(--bt-menge-zeile, inherit); cursor: pointer; color: var(--text); }
.bt-menge > button:first-child { border-radius: 999px var(--bt-menge-innen, 0) var(--bt-menge-innen, 0) 999px; }
.bt-menge > button:last-child { border-radius: var(--bt-menge-innen, 0) 999px 999px var(--bt-menge-innen, 0); }
.bt-menge > button:hover { background: var(--grau); }
.bt-menge > span { min-width: var(--bt-menge-zahl, 28px); text-align: center; font-weight: 600; }
.bt-menge > input { width: var(--bt-menge-zahl, 28px); border: 0; text-align: center; font: inherit; font-weight: 600; -moz-appearance: textfield; background: transparent; }
.bt-menge > input::-webkit-outer-spin-button, .bt-menge > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bt-menge-gross { --bt-menge-hoehe: 52px; }