/*
	kederschiene_kuerzen.css || 09.2026

	Zusaetzliches Stylesheet fuer die Box "Laenge individuell kuerzen"
	(Optionset kuerzen_laenge_kederschiene, Artikelseite).
	ambiente.css wird nicht angefasst; jede Regel hier ist auf
	.optionsetKederschienen eingegrenzt und wirkt nur in dieser einen Box.

	GRUNDGEDANKE
	Die Box nimmt die Breite ihrer Spalte an und steht damit buendig unter der
	Groessenauswahl darueber. ambiente.css ist an dieser Stelle durchgehend auf
	feste Pixelbreiten gebaut; die folgenden davon liegen im Weg und werden hier
	aufgehoben:

		#laengeanpassenDiv           250px, unter 2214px Fensterbreite 305px
		.boxSelect                   237px und min-width 237px, nochmals unter 1550px
		div.selectBox span.selected  198px   <- das gelbe Feld selbst
		.selectOptions               237px, min-width 220px
		.laengeanpassenDivWarning    237px
		input[type=number]            45px

	Absichtlich fest bleiben .buttonDown (30px), .selectArrow (42px) und
	#acceptLeangth (25px) - das sind Symbolflaechen.

	Zwei Fallstricke, die hier schon einmal Zeit gekostet haben:
	- .boxSelect ist durchsichtig. Das sichtbare Gelb kommt von span.selected.
	  Eine Messung an .boxSelect sieht darum richtig aus, waehrend die Kopfzeile
	  sichtbar zu kurz ist.
	- Fuer die Feldbreite genuegt ".kuerzenZeile input[type=number]" nicht:
	  ambiente.css hat mit "div.selectBox .selectOptions input[type=number]"
	  dieselbe Zahl an Klassen, aber einen Elementnamen mehr und gewinnt.
	  Deshalb steht span.selectOption mit im Selektor.
*/


/* ---------------------------------------------------------------- Breite  */

.optionsetKederschienen #laengeanpassenDiv {
	width: 100%;
	position: relative;		/* Bezugsrahmen fuer die absolut liegenden Warnungen */
}

.optionsetKederschienen .boxSelect,
.optionsetKederschienen .selectOptions,
.optionsetKederschienen .laengeanpassenDivWarning {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}


/* ------------------------------------------------------------- Kopfzeile  */
/* Das gelbe Feld fuellt die Zeile bis zum Scherensymbol aus, sonst bleibt
   rechts ein weisser Rest und die Kopfzeile wirkt kuerzer als die Box.      */

.optionsetKederschienen .boxSelect span.selected {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}


/* ---------------------------------------------------------- Eingabezeile  */
/* Beschriftung, Feld, Einheit, Umrechnung und Aufpreis stehen linksbuendig
   beieinander. Bei breiten Spalten bleibt rechts Platz frei - so gewollt:
   ein an den rechten Rand geschobener Aufpreis reisst bei 537px Spaltenbreite
   rund 200px Leerraum mitten in die Zeile. Wird die Spalte zu schmal, bricht
   die Zeile um, statt aus der Box zu laufen.                                */

.optionsetKederschienen .acceptpos {
	flex-direction: column;
	align-items: stretch;
}

.optionsetKederschienen .kuerzenZeile {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
}

.optionsetKederschienen .kuerzenZeile span.selectOption {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	width: auto;
	flex: 0 1 auto;
	min-width: 0;
	height: auto;			/* ambiente.css setzt feste 42px, sonst laeuft  */
	min-height: 42px;		/* eine umgebrochene Zeile aus der Box heraus   */
	line-height: normal;
	text-align: left;
}


/* ----------------------------------------------------------- Einzelteile  */

.optionsetKederschienen .kuerzenZeile span.selectOption input[type="number"] {
	width: 62px;			/* vier Ziffern; 45px aus ambiente.css sind zu knapp */
}

.optionsetKederschienen .laengeUmrechnung {
	color: #5f5e5a;
	white-space: nowrap;
}

.optionsetKederschienen .kuerzenZeile #acceptLeangth {
	flex: none;
	margin-left: 6px;
}