/* Staff Eins Personalkosten-Vergleichsrechner
 * Styleguide neu-personal.staffeins.de (Stand 21.08.2026):
 * vier Farben, Archivo, Radius 10 (Karten) / 8 (Felder), keine Schatten.
 * Alle Regeln sind auf .se-rechner begrenzt.
 */

.se-rechner {
	--se-accent: #E74B11;
	--se-primary: #212232;
	--se-text: #000000;
	--se-weiss: #FFFFFF;
	--se-line: rgba(33, 34, 50, 0.15);
	--se-line-dark: rgba(255, 255, 255, 0.20);

	/* Design „hell“ (Standard): Eingaben auf Weiß, Ergebniskarte dunkel */
	--se-fg: var(--se-text);
	--se-feldrand: var(--se-line);
	--se-karte-bg: var(--se-primary);
	--se-karte-fg: var(--se-weiss);
	--se-karte-line: var(--se-line-dark);
	--se-tab-bg: var(--se-weiss);

	font-family: Archivo, Arial, Helvetica, sans-serif;
	color: var(--se-fg);
	font-size: 16px;
	line-height: 1.6;
	width: 100%;
	box-sizing: border-box;
}

/* Design „dunkel“: für den Einbau in eine dunkle Karte/Sektion */
.se-rechner--dunkel {
	--se-fg: var(--se-weiss);
	--se-feldrand: var(--se-line-dark);
	--se-karte-bg: transparent;
	--se-karte-fg: var(--se-weiss);
	--se-karte-line: var(--se-line-dark);
	--se-tab-bg: transparent;
}

/* Ergebniskarte auf dunklem Grund: nur Rahmen, keine Fläche (Styleguide 7.3) */
.se-rechner--dunkel .se-rechner__karte {
	border: 1px solid var(--se-line-dark);
}

.se-rechner *,
.se-rechner *::before,
.se-rechner *::after {
	box-sizing: border-box;
}

/* Theme-/Elementor-Schriften für Überschriften, Absätze usw. neutralisieren */
.se-rechner * {
	font-family: inherit;
}

.se-rechner [hidden] {
	display: none !important;
}

/* ---------- Tabs ---------- */
.se-rechner__tabs {
	display: flex;
	gap: 8px;
	margin: 0 0 32px;
	flex-wrap: wrap;
}

.se-rechner .se-rechner__tab {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 20px;
	border: 1px solid var(--se-feldrand);
	border-radius: 10px;
	background: var(--se-tab-bg);
	color: var(--se-fg);
	font: 800 15px/1 Archivo, Arial, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}

.se-rechner .se-rechner__tab:hover {
	border-color: var(--se-fg);
	background: var(--se-tab-bg);
	color: var(--se-fg);
}

.se-rechner .se-rechner__tab[aria-selected="true"] {
	background: var(--se-accent);
	border-color: var(--se-accent);
	color: var(--se-text);
}

.se-rechner__tabnr {
	font-size: 13px;
	letter-spacing: 1px;
}

.se-rechner .se-rechner__tab:focus-visible,
.se-rechner .se-rechner__btn:focus-visible,
.se-rechner summary:focus-visible,
.se-rechner input:focus-visible,
.se-rechner select:focus-visible,
.se-rechner .se-rechner__zuruecksetzen:focus-visible {
	outline: 2px solid var(--se-accent);
	outline-offset: 2px;
}

/* ---------- Raster ---------- */
.se-rechner__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/* ---------- Eingaben ---------- */
.se-rechner__eingaben {
	margin: 0;
}

.se-rechner__gruppe {
	border: 0;
	margin: 0 0 28px;
	padding: 0;
	min-width: 0;
}

.se-rechner__gruppe legend {
	display: block;
	width: 100%;
	padding: 0 0 10px;
	margin: 0 0 16px;
	border-bottom: 1px solid var(--se-feldrand);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--se-accent);
}

.se-rechner__gruppenhinweis {
	margin: -6px 0 16px;
	font-size: 13px;
	line-height: 1.55;
}

.se-rechner__feld {
	margin: 0 0 18px;
}

.se-rechner__feldkopf {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}

.se-rechner__feld label {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	color: var(--se-fg);
}

.se-rechner__zahl {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	border: 1px solid var(--se-feldrand);
	border-radius: 8px;
	padding: 0 12px 0 0;
	background: transparent;
}

.se-rechner__zahl:focus-within {
	border-color: var(--se-accent);
}

.se-rechner .se-rechner__zahl input[type="number"] {
	width: 88px;
	margin: 0;
	padding: 10px 6px 10px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--se-fg);
	font: 800 17px/1.2 Archivo, Arial, sans-serif;
	text-align: right;
	box-shadow: none;
	-moz-appearance: textfield;
}

.se-rechner .se-rechner__zahl input[type="number"]::-webkit-outer-spin-button,
.se-rechner .se-rechner__zahl input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.se-rechner .se-rechner__zahl input[type="number"]:focus {
	outline: none;
}

.se-rechner__einheit {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.se-rechner .se-rechner__regler {
	display: block;
	width: 100%;
	margin: 4px 0 0;
	padding: 0;
	accent-color: var(--se-accent);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.se-rechner__hilfe {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.55;
}

.se-rechner__feld--auswahl label {
	display: block;
	margin-bottom: 6px;
}

.se-rechner .se-rechner__feld--auswahl select {
	width: 100%;
	margin: 0;
	padding: 12px 40px 12px 14px;
	border: 1px solid var(--se-feldrand);
	border-radius: 8px;
	background-color: transparent;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	color: var(--se-fg);
	font: 700 15px/1.3 Archivo, Arial, sans-serif;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
}

.se-rechner--dunkel .se-rechner__feld--auswahl select option {
	color: var(--se-text);
}

.se-rechner .se-rechner__zuruecksetzen {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--se-fg);
	font: 700 13px/1.4 Archivo, Arial, sans-serif;
	text-decoration: underline;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.se-rechner .se-rechner__zuruecksetzen:hover {
	background: none;
	color: var(--se-fg);
	text-decoration: none;
}

/* ---------- Ergebniskarte ---------- */
.se-rechner__ergebnis {
	position: sticky;
	top: 100px;
}

.se-rechner__karte {
	background: var(--se-karte-bg);
	color: var(--se-karte-fg);
	border-radius: 10px;
	padding: 36px;
}

.se-rechner__eyebrow {
	margin: 0 0 20px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--se-accent);
}

.se-rechner__posten {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 12px;
	margin: 0 0 18px;
}

.se-rechner__postenlabel {
	font-size: 15px;
	font-weight: 700;
}

.se-rechner__postenwert {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.3px;
	text-align: right;
	white-space: nowrap;
}

.se-rechner__balken {
	grid-column: 1 / -1;
	display: block;
	height: 10px;
	border-radius: 5px;
	border: 1px solid var(--se-karte-line);
	overflow: hidden;
}

.se-rechner__balkenfuellung {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 5px;
	background: var(--se-karte-fg);
	transition: width .25s ease;
}

.se-rechner__balkenfuellung--se {
	background: var(--se-accent);
}

.se-rechner__trenner {
	height: 1px;
	background: var(--se-karte-line);
	margin: 24px 0 20px;
}

.se-rechner__kpilabel {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.se-rechner__kpi {
	margin: 0 0 8px;
	font-size: 52px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -2.2px;
	color: var(--se-accent);
}

.se-rechner--teurer .se-rechner__kpi {
	color: var(--se-karte-fg);
}

.se-rechner__kpimeta {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

.se-rechner__tipp {
	margin: 20px 0 0;
	padding: 4px 0 4px 16px;
	border-left: 3px solid var(--se-accent);
	font-size: 13px;
	line-height: 1.55;
}

/* ---------- Rechenweg ---------- */
.se-rechner__weg {
	margin: 40px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--se-feldrand);
}

.se-rechner__wegtitel {
	margin: 0 0 20px;
	font-size: 23px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.4px;
}

.se-rechner__wegtitel span {
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
}

.se-rechner__wegspalten {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.se-rechner__wegblock h4 {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--se-accent);
}

.se-rechner__schritt {
	border-bottom: 1px solid var(--se-feldrand);
}

.se-rechner__schritt summary,
.se-rechner__schritt--summe {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 10px 0;
	font-size: 15px;
	line-height: 1.4;
}

.se-rechner__schritt summary {
	cursor: pointer;
	list-style: none;
}

.se-rechner__schritt summary::-webkit-details-marker {
	display: none;
}

.se-rechner__schrittlabel {
	position: relative;
	padding-left: 18px;
}

.se-rechner__schritt summary .se-rechner__schrittlabel::before {
	content: "+";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 800;
	color: var(--se-accent);
}

.se-rechner__schritt[open] summary .se-rechner__schrittlabel::before {
	content: "−";
}

.se-rechner__schrittwert {
	font-weight: 700;
	white-space: nowrap;
}

.se-rechner__formel {
	margin: 0 0 12px 18px;
	font-size: 13px;
	line-height: 1.55;
}

.se-rechner__schritt--summe {
	border-top: 2px solid var(--se-fg);
	border-bottom: 0;
	font-weight: 800;
}

.se-rechner__schritt--summe .se-rechner__schrittlabel {
	padding-left: 0;
}

.se-rechner__schritt--summe .se-rechner__schrittwert {
	font-weight: 800;
}

/* ---------- Abschluss ---------- */
.se-rechner__abschluss {
	margin: 40px 0 0;
}

.se-rechner__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.se-rechner .se-rechner__btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 15px 26px;
	border-radius: 10px;
	border: 1px solid transparent;
	font: 800 15px/1 Archivo, Arial, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}

.se-rechner .se-rechner__btn--primaer {
	background: var(--se-accent);
	border-color: var(--se-accent);
	color: var(--se-text);
}

.se-rechner .se-rechner__btn--primaer:hover {
	background: var(--se-primary);
	border-color: var(--se-primary);
	color: var(--se-weiss);
}

.se-rechner--dunkel .se-rechner__btn--outline:hover {
	background: transparent;
	border-color: var(--se-weiss);
	color: var(--se-weiss);
}

.se-rechner--dunkel .se-rechner__btn--primaer:hover {
	background: var(--se-weiss);
	border-color: var(--se-weiss);
	color: var(--se-text);
}

.se-rechner .se-rechner__btn--outline {
	background: transparent;
	border-color: var(--se-feldrand);
	color: var(--se-fg);
}

.se-rechner .se-rechner__btn--outline:hover {
	background: rgba(33, 34, 50, 0.08);
	border-color: var(--se-fg);
	color: var(--se-fg);
}

.se-rechner .se-rechner__btn.is-laedt {
	opacity: .6;
	cursor: progress;
}

.se-rechner__status {
	margin: 12px 0 0;
	font-size: 13px;
	min-height: 1.4em;
}

.se-rechner__status--fehler {
	font-weight: 700;
}

.se-rechner__datenschutz,
.se-rechner__adminhinweis {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.55;
	max-width: 760px;
}

.se-rechner__adminhinweis {
	padding: 8px 12px;
	border: 1px dashed var(--se-accent);
	border-radius: 8px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.se-rechner__raster {
		gap: 24px;
	}
	.se-rechner__karte {
		padding: 28px;
	}
	.se-rechner__kpi {
		font-size: 44px;
	}
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
	.se-rechner {
		font-size: 15px;
	}
	.se-rechner__tabs {
		margin-bottom: 24px;
	}
	.se-rechner .se-rechner__tab {
		flex: 1 1 100%;
		justify-content: flex-start;
	}
	.se-rechner__raster,
	.se-rechner__wegspalten {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	/* Ergebnis zuerst, damit man die Wirkung der Regler sieht */
	.se-rechner__ergebnis {
		position: static;
		order: -1;
	}
	.se-rechner__karte {
		padding: 24px;
	}
	.se-rechner__kpi {
		font-size: 34px;
		letter-spacing: -1.2px;
	}
	.se-rechner__wegtitel {
		font-size: 20px;
	}
	.se-rechner__wegtitel span {
		display: block;
		margin-top: 6px;
	}
	.se-rechner .se-rechner__btn {
		width: 100%;
		justify-content: center;
	}
}

/* =====================================================================
 * Kompakt-Rechner [staffeins_rechner_kompakt]
 * ===================================================================== */
.se-rechner--kompakt {
	max-width: 100%;
	container-type: inline-size;
}

.se-kompakt__felder,
.se-kompakt__modi {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}

.se-kompakt__felder {
	margin: 0 0 16px;
}

.se-kompakt__modi {
	margin: 0 0 32px;
}

.se-kompakt__feld {
	display: block;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--se-feldrand);
	border-radius: 8px;
	cursor: text;
}

.se-kompakt__feld:focus-within {
	border-color: var(--se-accent);
}

.se-kompakt__label,
.se-kompakt__kpilabel {
	display: block;
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--se-fg);
}

.se-kompakt__eingabe {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.se-rechner .se-kompakt__eingabe input {
	flex: 0 1 auto;
	width: 5ch; /* wird per JS an die Wertlänge angepasst */
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--se-fg);
	font: 800 20px/1.2 Archivo, Arial, sans-serif;
	letter-spacing: -0.3px;
}

.se-rechner .se-kompakt__eingabe input:focus {
	outline: none;
}

.se-kompakt__einheit {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 800;
	color: var(--se-fg);
}

.se-rechner .se-kompakt__modus {
	appearance: none;
	display: block;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 14px;
	border: 1px solid var(--se-feldrand);
	border-radius: 8px;
	background: transparent;
	color: var(--se-fg);
	font: 700 14px/1.3 Archivo, Arial, sans-serif;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.se-rechner .se-kompakt__modus:hover {
	background: transparent;
	border-color: var(--se-fg);
	color: var(--se-fg);
}

.se-rechner .se-kompakt__modus[aria-checked="true"] {
	background: var(--se-accent);
	border-color: var(--se-accent);
	color: var(--se-text);
}

.se-rechner .se-kompakt__modus:focus-visible {
	outline: 2px solid var(--se-accent);
	outline-offset: 2px;
}

.se-kompakt__ergebnis {
	margin: 0 0 28px;
}

.se-kompakt__kpilabel {
	margin-bottom: 10px;
}

.se-kompakt__kpi {
	margin: 0 0 12px;
	font-size: 52px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -2.2px;
	color: var(--se-accent);
	white-space: nowrap;
}

.se-rechner--teurer .se-kompakt__kpi {
	color: var(--se-fg);
}

.se-kompakt__meta {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--se-fg);
}

.se-rechner .se-kompakt__btn {
	font-size: 15px;
}

/* Größen richten sich nach der Breite der Karte, nicht des Bildschirms */
@container (max-width: 480px) {
	.se-rechner .se-kompakt__btn {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
	.se-kompakt__kpi {
		font-size: 40px;
		letter-spacing: -1.4px;
	}
	.se-kompakt__modi {
		margin-bottom: 24px;
	}
}

@container (max-width: 240px) {
	.se-kompakt__felder,
	.se-kompakt__modi {
		grid-template-columns: minmax(0, 1fr);
	}
	.se-kompakt__kpi {
		font-size: 34px;
		white-space: normal;
	}
	.se-rechner .se-kompakt__btn {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* ---------- Ja/Nein-Frage (Mengenrabatt) ---------- */
.se-rechner .se-rechner__janein {
	border: 0;
	padding: 0;
	min-width: 0;
}

.se-rechner .se-rechner__frage {
	display: block;
	width: 100%;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--se-fg);
}

.se-rechner__janeinwahl {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px;
}

.se-rechner__janeinwahl input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.se-rechner .se-rechner__janeinwahl label {
	display: block;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--se-feldrand);
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: var(--se-fg);
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.se-rechner .se-rechner__janeinwahl label:hover {
	border-color: var(--se-fg);
}

.se-rechner .se-rechner__janeinwahl input:checked + label {
	background: var(--se-accent);
	border-color: var(--se-accent);
	color: var(--se-text);
}

.se-rechner .se-rechner__janeinwahl input:focus-visible + label {
	outline: 2px solid var(--se-accent);
	outline-offset: 2px;
}

/* Jahresersparnis hervorheben */
.se-rechner__kpimeta strong {
	font-weight: 800;
	color: inherit;
	white-space: nowrap;
}