/**
 * Versandkostenauskunft auf der Produktseite (shipping-estimate.js).
 *
 * Eigene Datei statt eines Anhaengsels an configurator.css: das Feld
 * erscheint auf allen drei Konfiguratorseiten, die aber unterschiedliche
 * Stylesheets laden (configurator.css beim Traeger, plate-configurator.css
 * bei Blech und Ankerplatte).
 *
 * Farben als Literalwerte, nicht ueber die --stbk-Variablen: die sind auf
 * .stbk-configurator definiert, und dieser Kasten sitzt daneben.
 */

.stbk-ship-est {
	margin: 14px 0 18px;
	padding: 14px 16px;
	border: 1px solid #e2e0dc;
	border-radius: 10px;
	background: #f7f6f3;
}

.stbk-ship-est-head {
	font-size: 13px;
	font-weight: 700;
	color: #3e4a52;
	margin-bottom: 10px;
}

/* Kurzhinweis zur Frachtstufe, von form-bridge.js eingehaengt und nur bei
   Einzellaengen ueber 3.200 mm vorhanden (_updateFreightNote()). Bewusst leise
   gehalten -- kein Warnton, kein Rahmen, keine Eurozahl: der Kunde soll
   wissen, dass es eine Stufe gibt, und dann die PLZ eingeben. Ein auffaelliger
   Kasten an dieser Stelle verunsichert mehr, als er erklaert (Betreiber,
   16.09.2026). */
.stbk-ship-est-step {
	margin: -4px 0 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #6b7780;
}

.stbk-ship-est-step strong {
	color: #3e4a52;
}

.stbk-ship-est-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.stbk-ship-est-plz {
	width: 110px;
	/* 44 px: dieselbe Mindestgroesse fuer Tippziele wie beim Laengenregler
	   und beim Vollbildknopf -- ueber die Haelfte der Besucher kommt mit dem
	   Telefon. */
	min-height: 44px;
	padding: 8px 12px;
	border: 1.5px solid #d5d2cc;
	border-radius: 8px;
	font-size: 16px; /* unter 16px zoomt iOS beim Antippen in das Feld hinein */
	font-family: inherit;
	background: #fff;
}

.stbk-ship-est-plz:focus {
	outline: none;
	border-color: #e8622c;
}

.stbk-ship-est-go {
	min-height: 44px;
	padding: 8px 18px;
	border: none;
	border-radius: 8px;
	background: #e8622c;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.stbk-ship-est-go:hover:not(:disabled) {
	background: #d1521f;
}

.stbk-ship-est-go:disabled {
	opacity: 0.6;
	cursor: default;
}

.stbk-ship-est-out {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.5;
	color: #1e1e1e;
}

.stbk-ship-est-out.is-wartet {
	color: #6b7780;
}

.stbk-ship-est-out.is-fehler {
	color: #a63417;
}

.stbk-ship-est-out.is-treffer strong {
	font-size: 16px;
}

/* Der Mengenhinweis steht unter dem Preis, nicht daneben: er ist der Teil,
   der eine Fehlentscheidung verhindert ("457 EUR fuer ein Teil" liest sich
   sonst wie "457 EUR mal drei"). Eigene Zeile, damit er nicht uebersehen
   wird, aber leiser als der Preis. */
.stbk-ship-est-note {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	color: #6b7780;
}