/*
 * Savings Calculator - Mobile First (CLAUDE.md Regel 0).
 *
 * Baut auf dem bestehenden sv-Designsystem der globalen Klasse .sv-seite auf:
 * dessen Tokens (--sv-s/m/l, --sv-radius, --sv-f-*), dessen Panel-Konvention
 * (.sv-panel), dessen Zahlenrolle (.sv-zahl) und dessen Button (.sv-btn) werden
 * benutzt, nicht nachgebaut. Hier steht nur, was der Rechner zusaetzlich braucht.
 *
 * Akzent der Bedienelemente ist das Lila der Marke (--ix-akzent-2 / #7A2AA0).
 */

.orcomai-sc {
	/* Rueckfallwerte nur fuer den Fall, dass das Element ausserhalb von .sv-seite steht. */
	--sc-lila: var(--sv-akzent-2, var(--ix-akzent-2, #7a2aa0));
	--sc-spur: var(--sv-f-rand, var(--ix-rand, #e3e6ee));
	--sc-titel: var(--sv-f-titel, var(--ix-ueberschrift, #1b1a2e));
	--sc-text: var(--sv-f-text, var(--ix-text, #4a5264));
	--sc-leise: var(--sv-f-leise, var(--ix-text-leise, #7a8195));
	--sc-flaeche: var(--ix-flaeche-grau, #f4f5f7);
	--sc-luft: 1rem;

	/* rund 18 % schmaler als die Inhaltsbreite der Section */
	max-width: 112rem;
	margin-inline: auto;
	padding: clamp(1.6rem, 1.2rem + 0.8vw, 2.4rem);
	border: 1px solid var(--sc-spur);
	border-radius: var(--sv-radius, var(--lay-radius, 1.6rem));
	background: var(--sv-f-karte, #fff);
}

.orcomai-sc__title {
	margin: 0 0 0.8rem;
}

.orcomai-sc__intro {
	margin: 0 0 1.6rem;
	max-width: var(--sv-lesen, 68ch);
}

.orcomai-sc__grid {
	display: grid;
	gap: 1.6rem;
}

/* ---- Eingaben ---- */

.orcomai-sc__set {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Abstand ueber der Trennlinie und zwischen Linie und Beschriftung bewusst klein:
   oben nur leicht mehr Luft als unter der Beschriftung (1 rem). */
.orcomai-sc__set + .orcomai-sc__set {
	margin-top: 1.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--sc-spur);
}

.orcomai-sc__legend {
	margin: 0 0 var(--sc-luft);
	padding: 0;
	color: var(--sc-leise);
	font-size: var(--fs-eyebrow, 1.3rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

.orcomai-sc__field + .orcomai-sc__field {
	margin-top: var(--sc-luft);
}

.orcomai-sc__field-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.2rem;
}

.orcomai-sc__field-label {
	color: var(--sc-text);
	font-size: var(--fs-klein, 1.4rem);
	line-height: 1.4;
}

.orcomai-sc__field-value {
	color: var(--sc-titel);
	font-size: var(--fs-klein, 1.4rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.orcomai-sc__field-controls {
	display: flex;
	align-items: center;
	gap: 1.2rem;
}

/* ---- Regler: schmale Spur, Lila-Fortschritt, feiner Griff ---- */

.orcomai-sc__range {
	flex: 1;
	width: 100%;
	height: 2.4rem;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.orcomai-sc__range::-webkit-slider-runnable-track {
	height: 0.4rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--sc-lila) var(--sc-p, 50%), var(--sc-spur) var(--sc-p, 50%));
}

.orcomai-sc__range::-webkit-slider-thumb {
	width: 1.8rem;
	height: 1.8rem;
	margin-top: -0.7rem;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--sc-lila);
	box-shadow: 0 1px 4px rgba(18, 11, 56, 0.28);
	-webkit-appearance: none;
	appearance: none;
}

.orcomai-sc__range::-moz-range-track {
	height: 0.4rem;
	border-radius: 999px;
	background: var(--sc-spur);
}

.orcomai-sc__range::-moz-range-progress {
	height: 0.4rem;
	border-radius: 999px;
	background: var(--sc-lila);
}

.orcomai-sc__range::-moz-range-thumb {
	width: 1.8rem;
	height: 1.8rem;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--sc-lila);
	box-shadow: 0 1px 4px rgba(18, 11, 56, 0.28);
}

.orcomai-sc__range:focus-visible {
	outline: 2px solid var(--sc-lila);
	outline-offset: 3px;
	border-radius: 0.4rem;
}

/* ---- Ergebnis ----
   Der Kasten uebernimmt den Stil der Preiskarten (globale Klasse ak-kasten,
   Varianten .ak und .ak--voll). Hier stehen nur die Ergaenzungen, die der
   Rechner braucht - Ziffern in Tabellenbreite und das Rasterverhalten. */

.orcomai-sc__result {
	align-self: start;
}

.orcomai-sc__result output {
	font-variant-numeric: tabular-nums;
}

.orcomai-sc .ak-betrag {
	white-space: nowrap;
}

/* Die Preiskarten-Komponente ist fuer ganze Karten gebaut; im Rechner sitzt sie
   neben den Reglern und darf etwas knapper stehen. */
.orcomai-sc .ak {
	gap: 1.6rem;
	padding: 2.8rem 1.6rem 1.8rem;
}

.orcomai-sc .ak .ak-liste {
	padding-top: 1.4rem;
}

/* ---- Annahmen ---- */

.orcomai-sc__assumptions {
	margin-top: 1.6rem;
	padding-top: 1rem;
	border-top: 1px solid var(--sc-spur);
}

.orcomai-sc__assumptions summary {
	color: var(--sc-text);
	cursor: pointer;
	font-size: var(--fs-klein, 1.4rem);
	font-weight: 600;
	list-style-position: outside;
}

.orcomai-sc__assumptions summary:focus-visible {
	outline: 2px solid var(--sc-lila);
	outline-offset: 3px;
	border-radius: 0.4rem;
}

.orcomai-sc__assumptions ul {
	margin: var(--sc-luft) 0 0;
	padding-left: 1.8rem;
	max-width: var(--sv-lesen, 68ch);
	color: var(--sc-leise);
	font-size: var(--fs-klein, 1.4rem);
	line-height: 1.5;
}

.orcomai-sc__assumptions li + li {
	margin-top: 0.6rem;
}

/* ---- ab Tablet ---- */

@media (min-width: 768px) {

	.orcomai-sc__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
		gap: 2.4rem;
	}

	.orcomai-sc .ak {
		padding: 3rem 2rem 2rem;
	}

}