/**
 * Strahlmittel-Kalkulator – Frontend-Styles.
 *
 * Alle Regeln sind unter .stbk-app gekapselt, damit sie nichts am übrigen
 * Avada-Theme verändern und umgekehrt möglichst wenig vom Theme geerbt wird.
 * Farben stammen aus der Avada-Palette der Website (Akzent #45a59f).
 */

.stbk-app {
	--stbk-accent: #45a59f;
	--stbk-accent-dark: #35837e;
	--stbk-accent-soft: #e8f4f3;
	--stbk-ink: #212326;
	--stbk-ink-soft: #5b6166;
	--stbk-line: #dfe3e6;
	--stbk-bg: #ffffff;
	--stbk-bg-soft: #f5f7f8;
	--stbk-warn: #8a6d1f;
	--stbk-warn-bg: #fdf6e3;
	--stbk-warn-line: #ecdcae;

	box-sizing: border-box;
	color: var(--stbk-ink);
	font-size: 16px;
	line-height: 1.55;
	/* Volle Breite des Inhaltsbereichs. Was schmal bleiben muss, damit es lesbar
	   bleibt, wird weiter unten einzeln begrenzt – Fließtext und die
	   Kostenaufstellung, nicht aber Kacheln und Karten. */
	max-width: 100%;
}

/* Die Klasse steht bewusst dreimal im Selektor. Das ändert nichts daran, welche
   Elemente getroffen werden, hebt aber die Spezifität so weit an, dass auch
   Themes mit langen Selektorketten die Schrift im Kalkulator nicht mehr
   überschreiben. */
.stbk-app.stbk-app.stbk-app *,
.stbk-app.stbk-app.stbk-app *::before,
.stbk-app.stbk-app.stbk-app *::after {
	box-sizing: border-box;
	/*
	 * Alles erbt die Fließtextschrift der Seite. Avada formatiert sonst
	 * Überschriften und Tabellenköpfe mit der Schmuckschrift des Themes – bei
	 * sandstrahltechnik-bayern.de ist das Changa One –, was bei den vielen
	 * kleinen Beschriftungen eines Rechners unleserlich wird. Die Hierarchie
	 * entsteht hier über Größe und Gewicht, nicht über einen Schriftwechsel.
	 *
	 * Mit Nachdruck, weil Themes ihre Schriften über sehr spezifische Selektoren
	 * setzen und sonst gewinnen. Gefahrlos, weil der Kalkulator selbst an keiner
	 * Stelle eine eigene Schriftart vorgibt.
	 */
	font-family: inherit !important;
}

/* ---------- Pfad ---------- */
.stbk-path {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	font-size: 13px;
	margin-bottom: 20px;
}
.stbk-path:empty {
	margin-bottom: 0;
}
.stbk-crumb {
	background: var(--stbk-accent-soft);
	color: var(--stbk-accent-dark);
	padding: 4px 10px;
	border-radius: 99px;
	font-weight: 500;
}
.stbk-crumb--auto {
	background: var(--stbk-bg-soft);
	color: var(--stbk-ink-soft);
	font-weight: 400;
}
.stbk-sep {
	color: #b6bcc1;
}
.stbk-app .stbk-reset {
	margin-left: auto;
	background: none;
	border: none;
	color: var(--stbk-ink-soft);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	box-shadow: none;
}

/* ---------- Schritte ---------- */
.stbk-step {
	margin-bottom: 24px;
}
.stbk-app .stbk-step-label {
	/*
	 * Bewusst die Fließtextschrift statt der Überschriftenschrift des Themes:
	 * Das hier ist ein kleines Label in Versalien, keine Überschrift. Setzt das
	 * Theme für Überschriften eine schmale Schmuckschrift ein – bei
	 * sandstrahltechnik-bayern.de ist das Changa One –, wird es sonst in 12 px
	 * mit Sperrung unleserlich.
	 */
	font-family: inherit;
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--stbk-ink-soft);
	margin: 0 0 10px;
	font-weight: 600;
	line-height: 1.4;
}
.stbk-opts {
	display: grid;
	gap: 9px;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.stbk-app .stbk-opt {
	background: var(--stbk-bg);
	border: 1.5px solid var(--stbk-line);
	border-radius: 8px;
	padding: 13px 15px;
	text-align: left;
	font: inherit;
	cursor: pointer;
	color: var(--stbk-ink);
	transition: border-color 0.12s, background 0.12s;
	box-shadow: none;
	text-transform: none;
	line-height: 1.4;
	height: auto;
	width: 100%;
}
.stbk-app .stbk-opt:hover,
.stbk-app .stbk-opt:focus-visible {
	border-color: var(--stbk-accent);
	background: var(--stbk-accent-soft);
	color: var(--stbk-ink);
}

/* ---------- Flächeneingabe ---------- */
.stbk-area {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.stbk-app .stbk-area-input {
	width: 150px;
	font: inherit;
	font-size: 19px;
	padding: 11px 13px;
	border: 1.5px solid var(--stbk-line);
	border-radius: 8px;
	background: var(--stbk-bg);
	color: var(--stbk-ink);
	height: auto;
	margin: 0;
}
.stbk-app .stbk-area-input:focus {
	outline: none;
	border-color: var(--stbk-accent);
}
.stbk-unit {
	font-size: 19px;
	color: var(--stbk-ink-soft);
}
.stbk-app .stbk-area-hint {
	font-size: 13px;
	color: var(--stbk-ink-soft);
	margin: 8px 0 0;
}
.stbk-app .stbk-error {
	color: #a8324a;
	font-size: 13.5px;
	margin: 8px 0 0;
}
.stbk-app .stbk-error[hidden] {
	display: none;
}

/* ---------- Ergebnis ---------- */
.stbk-result:not(:empty) {
	border-top: 2px solid var(--stbk-line);
	margin-top: 28px;
	padding-top: 24px;
}
.stbk-headline {
	background: var(--stbk-accent-soft);
	border-left: 4px solid var(--stbk-accent);
	border-radius: 0 8px 8px 0;
	padding: 16px 18px;
	margin-bottom: 20px;
}
.stbk-headline-label {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stbk-accent-dark);
	font-weight: 600;
}
.stbk-headline-value {
	font-size: 23px;
	font-weight: 600;
	margin-top: 2px;
	line-height: 1.25;
}
.stbk-headline-sub {
	font-size: 13.5px;
	color: var(--stbk-ink-soft);
	margin-top: 3px;
}

.stbk-grid {
	display: grid;
	gap: 1px;
	background: var(--stbk-line);
	border: 1px solid var(--stbk-line);
	border-radius: 8px;
	overflow: hidden;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.stbk-cell {
	background: var(--stbk-bg);
	padding: 14px 16px;
}
.stbk-cell-label {
	font-size: 12px;
	color: var(--stbk-ink-soft);
	letter-spacing: 0.03em;
}
.stbk-cell-value {
	font-size: 21px;
	font-weight: 600;
	margin-top: 2px;
	line-height: 1.2;
}
.stbk-cell-value small {
	font-size: 13px;
	font-weight: 400;
	color: var(--stbk-ink-soft);
}

.stbk-block {
	/* Rund 70 Zeichen je Zeile. Darüber hinaus wird Fließtext mühsam zu lesen,
	   weil das Auge den Zeilenanfang nicht mehr sicher findet. */
	max-width: 68ch;
	margin-top: 18px;
	padding: 15px 17px;
	border-radius: 8px;
	font-size: 14.5px;
	background: var(--stbk-bg-soft);
	border: 1px solid var(--stbk-line);
}
.stbk-block strong {
	display: block;
	margin-bottom: 4px;
	color: var(--stbk-ink);
}
.stbk-block--sport {
	background: var(--stbk-warn-bg);
	border-color: var(--stbk-warn-line);
	color: var(--stbk-warn);
}
.stbk-block--sport strong {
	color: var(--stbk-warn);
}
.stbk-block--notice {
	font-size: 13.5px;
	color: var(--stbk-ink-soft);
}

/* ---------- Handlungsaufforderung ---------- */
.stbk-cta {
	margin-top: 26px;
	display: flex;
	gap: 11px;
	flex-wrap: wrap;
}
.stbk-app .stbk-btn {
	font: inherit;
	font-weight: 600;
	padding: 13px 24px;
	border-radius: 8px;
	border: 1.5px solid var(--stbk-accent);
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	line-height: 1.4;
}
.stbk-app .stbk-btn--primary {
	background: var(--stbk-accent);
	color: #fff;
}
.stbk-app .stbk-btn--primary:hover {
	background: var(--stbk-accent-dark);
	border-color: var(--stbk-accent-dark);
	color: #fff;
}
.stbk-app .stbk-btn--ghost {
	background: transparent;
	color: var(--stbk-accent-dark);
}
.stbk-app .stbk-btn--ghost:hover {
	background: var(--stbk-accent-soft);
}

/* ---------- Beratung ---------- */
.stbk-escape {
	margin-top: 22px;
	font-size: 13.5px;
	color: var(--stbk-ink-soft);
}
.stbk-app .stbk-escape-btn {
	background: none;
	border: none;
	color: var(--stbk-accent-dark);
	font: inherit;
	font-size: 13.5px;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	box-shadow: none;
}
.stbk-advice-box {
	background: var(--stbk-warn-bg);
	border: 1px solid var(--stbk-warn-line);
	border-radius: 8px;
	padding: 18px 20px;
	margin-top: 18px;
}
.stbk-app .stbk-advice-box h3 {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.35;
}
.stbk-app .stbk-advice-box p {
	margin: 0 0 12px;
	font-size: 14.5px;
}
.stbk-app .stbk-tel {
	font-weight: 600;
	color: var(--stbk-ink);
	text-decoration: none;
	font-size: 17px;
}

/* ---------- Fachansicht ---------- */
.stbk-tech {
	margin-top: 20px;
	border: 1px dashed #b6bcc1;
	border-radius: 8px;
	padding: 14px 16px;
	background: #fafbfb;
	font-size: 13px;
}
.stbk-app .stbk-tech h4 {
	font-family: inherit; /* Siehe Begründung bei .stbk-step-label. */
	margin: 0 0 8px;
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--stbk-ink-soft);
}
.stbk-app .stbk-tech table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	border: none;
	background: none;
}
.stbk-app .stbk-tech td {
	padding: 3px 0;
	vertical-align: top;
	border: none;
	background: none;
	font-size: 13px;
}
.stbk-app .stbk-tech td:first-child {
	color: var(--stbk-ink-soft);
	width: 44%;
	padding-right: 12px;
}
.stbk-app .stbk-tech td:last-child {
	font-variant-numeric: tabular-nums;
}

/*
 * Zweite Möglichkeit: eine neutrale serifenlose Schrift statt der Schrift der
 * Website. Sinnvoll, wenn die Seitenschrift für die vielen Zahlen und kleinen
 * Beschriftungen eines Rechners zu unruhig wirkt. Die Klasse setzt der
 * Shortcode; die Kinder erben über die Regel weiter oben.
 */
.stbk-app--sans.stbk-app--sans.stbk-app--sans {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, sans-serif !important;
}

/* Überschriften und Tabellenköpfe: das Theme setzt hier teils Sperrung und
   Versalien, die in den kleinen Größen des Rechners stören. */
.stbk-app h3,
.stbk-app h4,
.stbk-app th {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 600;
}
.stbk-app .stbk-step-label {
	/* Ausnahme: das bewusst gesperrte Versal-Label über den Auswahlfeldern. */
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 400;
}

/* ---------- Mietsystem-Auswahl ---------- */
.stbk-sysblock {
	margin-top: 24px;
}
.stbk-app .stbk-sysblock h4 {
	font-size: 16px;
	margin: 0 0 4px;
	color: var(--stbk-ink);
}
.stbk-sys-intro {
	font-size: 14px;
	color: var(--stbk-ink-soft);
	margin: 0 0 14px;
}
.stbk-sys-grid {
	display: grid;
	gap: 10px;
	/* Feste zwei Spalten statt auto-fit: vier Karten sollen als zwei mal zwei
	   stehen, nicht als drei plus eine einzelne in der zweiten Reihe. */
	grid-template-columns: 1fr;
}
@media (min-width: 560px) {
	.stbk-sys-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.stbk-app .stbk-sys {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;
	background: var(--stbk-bg);
	border: 1.5px solid var(--stbk-line);
	border-radius: 8px;
	padding: 12px 14px;
	cursor: pointer;
	font: inherit;
	color: var(--stbk-ink);
	height: auto;
	line-height: 1.45;
	transition: border-color 0.15s, background 0.15s;
}
.stbk-app .stbk-sys:hover,
.stbk-app .stbk-sys:focus-visible {
	border-color: var(--stbk-accent);
	background: var(--stbk-accent-soft);
}
.stbk-app .stbk-sys--on {
	border-color: var(--stbk-accent);
	background: var(--stbk-accent-soft);
	box-shadow: inset 0 0 0 1px var(--stbk-accent);
}
.stbk-sys-name {
	font-weight: 600;
	font-size: 15px;
}
.stbk-sys-duese {
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--stbk-ink-soft);
	font-family: inherit;
}
.stbk-sys-text {
	font-size: 13px;
	color: var(--stbk-ink-soft);
}
.stbk-sys-preis {
	margin-top: auto;
	padding-top: 8px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.stbk-app .stbk-sys-preis small {
	display: block;
	font-weight: 400;
	font-size: 12px;
	color: var(--stbk-ink-soft);
}
.stbk-sys-warn {
	margin: 12px 0 0;
	padding: 10px 14px;
	background: var(--stbk-warn-bg);
	border: 1px solid var(--stbk-warn-line);
	border-radius: 8px;
	color: var(--stbk-warn);
	font-size: 13px;
}

/* ---------- Kostenorientierung ---------- */
.stbk-kosten {
	margin-top: 20px;
	padding: 16px 18px;
	background: var(--stbk-bg-soft);
	border: 1px solid var(--stbk-line);
	border-radius: 8px;
}
.stbk-app .stbk-kosten h4 {
	font-size: 16px;
	margin: 0 0 10px;
}
.stbk-app .stbk-kosten table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	background: none;
	border: none;
}
.stbk-app .stbk-kosten th,
.stbk-app .stbk-kosten td {
	border: none;
	background: none;
	padding: 7px 0;
	vertical-align: top;
	border-bottom: 1px solid var(--stbk-line);
}
.stbk-app .stbk-kosten th {
	text-align: left;
	font-weight: 500;
	font-size: 14px;
}
.stbk-app .stbk-kosten th small {
	display: block;
	font-weight: 400;
	font-size: 12px;
	color: var(--stbk-ink-soft);
	font-family: inherit;
}
.stbk-app .stbk-kosten td {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	padding-left: 12px;
}
.stbk-app .stbk-kosten-summe th,
.stbk-app .stbk-kosten-summe td {
	font-weight: 700;
	font-size: 16px;
	padding-top: 10px;
}
.stbk-app .stbk-kosten-anzahlung th,
.stbk-app .stbk-kosten-anzahlung td {
	border-bottom: none;
	color: var(--stbk-accent-dark);
}
.stbk-kosten-sport {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--stbk-accent-dark);
}
.stbk-kosten-fuss {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--stbk-ink-soft);
}

/* ---------- Anfrageformular ---------- */
.stbk-form-start {
	margin-top: 22px;
}
.stbk-form-start-hint {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--stbk-ink-soft);
}
.stbk-form {
	margin-top: 22px;
	padding: 18px 20px;
	border: 1.5px solid var(--stbk-accent);
	border-radius: 8px;
	background: var(--stbk-bg);
}
.stbk-app .stbk-form h4 {
	font-size: 16px;
	margin: 0 0 4px;
}
.stbk-form-intro {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--stbk-ink-soft);
}
.stbk-form--ok {
	background: var(--stbk-accent-soft);
	border-color: var(--stbk-accent);
}
.stbk-app .stbk-form--ok p {
	margin: 0;
	font-weight: 500;
	color: var(--stbk-accent-dark);
}
.stbk-form-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}
@media (min-width: 560px) {
	.stbk-form-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.stbk-feld {
	display: block;
	margin-bottom: 12px;
}
.stbk-form-grid .stbk-feld {
	margin-bottom: 0;
}
.stbk-feld span {
	display: block;
	font-size: 13px;
	color: var(--stbk-ink-soft);
	margin-bottom: 4px;
	font-family: inherit;
}
.stbk-app .stbk-feld input,
.stbk-app .stbk-feld textarea {
	width: 100%;
	border: 1.5px solid var(--stbk-line);
	border-radius: 6px;
	padding: 9px 11px;
	font: inherit;
	font-size: 15px;
	color: var(--stbk-ink);
	background: var(--stbk-bg);
	line-height: 1.4;
}
.stbk-app .stbk-feld input:focus,
.stbk-app .stbk-feld textarea:focus {
	border-color: var(--stbk-accent);
	outline: none;
}
.stbk-check {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: 4px 0 14px;
	font-size: 13px;
	color: var(--stbk-ink-soft);
	cursor: pointer;
}
.stbk-app .stbk-check input {
	margin: 3px 0 0;
	flex: 0 0 auto;
	width: auto;
}
/* Honigtopf gegen automatische Eintragungen – für Menschen unsichtbar,
   aber nicht per display:none, damit Bots es weiterhin ausfüllen. */
.stbk-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.stbk-form-fehler {
	margin: 0 0 12px;
	padding: 10px 13px;
	border-radius: 6px;
	background: var(--stbk-warn-bg);
	border: 1px solid var(--stbk-warn-line);
	color: var(--stbk-warn);
	font-size: 13px;
}
.stbk-form-aktion {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.stbk-app .stbk-form-send[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* ---------- Überschrift aus dem Shortcode ---------- */
.stbk-app .stbk-titel {
	font-size: 25px;
	line-height: 1.25;
	margin: 0 0 6px;
	color: var(--stbk-ink);
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
}
.stbk-app .stbk-lede {
	margin: 0 0 24px;
	color: var(--stbk-ink-soft);
	font-size: 15px;
}
@media (max-width: 560px) {
	.stbk-app .stbk-titel {
		font-size: 21px;
	}
}

/* ---------- Breite Bildschirme ---------- */
/*
 * Ab hier steht deutlich mehr Platz zur Verfügung als die rund 760 px, für die
 * das Grundlayout gedacht ist. Genutzt wird er dort, wo mehr Spalten die
 * Übersicht verbessern – bei Auswahlkacheln, Ergebniswerten und Mietsystemen.
 * Alles, was gelesen statt überflogen wird, bleibt schmal.
 */
@media (min-width: 900px) {
	.stbk-sys-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.stbk-form-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	/* Alle Optionen eines Schrittes stehen in einer Reihe. Die Kacheln teilen
	   sich die Breite gleichmäßig: sechs Kategorien werden je knapp 200 px
	   breit, zwei Untergründe entsprechend breiter – was den langen
	   Bezeichnungen wie „Holz allgemein – glatte / normale Flächen" zugutekommt.
	   Eine Obergrenze je Kachel wäre hier falsch, sie würde bei sechs Optionen
	   wieder einen Umbruch erzwingen. */
	.stbk-opts {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
	.stbk-area {
		max-width: 760px;
	}
	.stbk-sys-intro,
	.stbk-form-intro,
	.stbk-area-hint,
	.stbk-form-start-hint,
	.stbk-kosten-fuss,
	.stbk-kosten-sport,
	.stbk-sys-warn {
		max-width: 68ch;
	}
	/* Label und Betrag sollen zusammen gelesen werden können und nicht an den
	   gegenüberliegenden Rändern eines sehr breiten Kastens stehen. */
	.stbk-kosten table {
		max-width: 760px;
	}
	.stbk-form .stbk-feld textarea {
		max-width: 760px;
	}
	.stbk-escape,
	.stbk-advice-box {
		max-width: 68ch;
	}
}