.realfox-tr {
	--realfox-tr-accent: #8F8071;
	--realfox-tr-ink: #000000;
	--realfox-tr-muted: #000000;
	--realfox-tr-line: #ECEAE3;
	--realfox-tr-line-table: #000000;
	--realfox-tr-tint: #F6F1ED;

	/* Bewusst KEINE font-family hier: das Plugin übernimmt die Schrift automatisch
	   vom Theme (Uncode -> Theme Options -> Typography). Titel-Elemente sind unten
	   als echte Überschriften-Tags (h3/h4) ausgezeichnet, damit Uncodes "Headings"-
	   Schrift (z. B. URW Classico) automatisch greift; Fliesstext erbt Uncodes
	   "Body/Paragraph"-Schrift (z. B. Acumin). Ändert ihr die Schrift in Uncode,
	   zieht der Rechner automatisch nach -- ohne Code-Anpassung hier. */
	color: var(--realfox-tr-ink);
	max-width: 1200px;
	margin: 0 auto;
	background: transparent;
	padding: 0;
	box-sizing: border-box;
}
.realfox-tr *, .realfox-tr *::before, .realfox-tr *::after { box-sizing: border-box; }

/* Titel-Elemente sind reale h3/h4-Tags (siehe PHP) und erben damit automatisch
   Uncodes globale Headings-Schrift. Hier nur Grösse/Gewicht zurücksetzen,
   damit Uncodes generische Heading-Styles nicht zu gross/fett hereinfunken. */
.realfox-tr h3, .realfox-tr h4 {
	margin: 0;
	line-height: 1.25;
}

/* --- Felder: untereinander gestapelt --- */
.realfox-tr__grid {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-bottom: 4px;
}
.realfox-tr__field { display: flex; flex-direction: column; }
.realfox-tr__field label {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 12px;
	color: var(--realfox-tr-ink);
	letter-spacing: -0.1px;
}

/* --- Rechenschieber (Range-Slider), moderner Look --- */
.realfox-tr__slider-row {
	display: flex;
	align-items: center;
	gap: 18px;
}
.realfox-tr__slider-value {
	min-width: 118px;
	text-align: right;
	font-weight: 700;
	font-size: 19px;
	color: var(--realfox-tr-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.2px;
}
.realfox-tr__field input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: var(--realfox-tr-line);
	outline: none;
	cursor: pointer;
}
.realfox-tr__field input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--realfox-tr-accent);
	border: 2.5px solid #FFFFFF;
	box-shadow: 0 1px 2px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.12);
	cursor: pointer;
	margin-top: -7px;
	transition: transform 0.12s ease;
}
.realfox-tr__field input[type="range"]:active::-webkit-slider-thumb {
	transform: scale(1.15);
}
.realfox-tr__field input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--realfox-tr-accent);
	border: 2.5px solid #FFFFFF;
	box-shadow: 0 1px 2px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.12);
	cursor: pointer;
}
.realfox-tr__field input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: transparent;
}
.realfox-tr__field input[type="range"]::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: transparent;
}
.realfox-tr__field input[type="range"]::-moz-range-progress {
	height: 4px;
	border-radius: 999px;
	background: var(--realfox-tr-accent);
}
.realfox-tr__field--zins { margin-top: 4px; }

.realfox-tr__disclaimer {
	font-size: 16px;
	font-weight: 400;
	color: var(--realfox-tr-muted);
	margin-top: 28px;
	line-height: 1.55;
}

/* --- Ergebnisbereich --- */
.realfox-tr__results {
	margin-top: 36px;
	padding-top: 32px;
	border-top: 1px solid var(--realfox-tr-line);
}

.realfox-tr__verdict {
	font-size: 18px;
	font-weight: 600;
	padding: 16px 20px;
	border-radius: 0;
	margin-bottom: 28px;
	letter-spacing: -0.1px;
}
.realfox-tr__verdict.is-ok { background: #EEF6EF; color: var(--realfox-tr-ink); }
.realfox-tr__verdict.is-fail { background: #FCEEEC; color: var(--realfox-tr-ink); }
.realfox-tr h4.realfox-tr__verdict { margin-bottom: 28px; }

.realfox-tr__result-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 28px;
}
.realfox-tr__result-card {
	background: var(--realfox-tr-tint);
	border-radius: 0;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
}
.realfox-tr__result-label {
	font-size: 13px;
	letter-spacing: 0.6px;
	color: var(--realfox-tr-muted);
	font-weight: 600;
	margin-bottom: 8px;
}
.realfox-tr__result-value {
	font-size: 30px;
	font-weight: 700;
	color: var(--realfox-tr-ink);
	letter-spacing: -0.5px;
}
.realfox-tr__result-sub {
	font-size: 13px;
	color: var(--realfox-tr-muted);
	margin-top: 6px;
	line-height: 1.4;
}

.realfox-tr__breakdown {
	margin-bottom: 8px;
}
.realfox-tr__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--realfox-tr-line-table);
	font-size: 16px;
}
.realfox-tr__row span:first-child {
	color: var(--realfox-tr-ink);
	font-weight: 400;
}
.realfox-tr__row span:last-child {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.realfox-tr__row--total {
	border-bottom: none;
	border-top: none;
	padding-top: 18px;
	font-size: 19px;
}
.realfox-tr__row--total span:first-child,
.realfox-tr__row--total span:last-child {
	font-weight: 700;
}
.realfox-tr__row--monthly {
	border-bottom: none;
	padding-top: 0;
	padding-bottom: 20px;
	font-size: 15px;
}
.realfox-tr__row--monthly span:first-child,
.realfox-tr__row--monthly span:last-child {
	font-weight: 400;
	color: var(--realfox-tr-muted);
}

.realfox-tr__section-title {
	font-size: 19px;
	font-weight: 700;
	margin: 8px 0 6px;
	color: var(--realfox-tr-ink);
	letter-spacing: -0.2px;
}
.realfox-tr__section-note {
	font-size: 16px;
	color: var(--realfox-tr-muted);
	margin-bottom: 20px;
	line-height: 1.55;
}
.realfox-tr__result-grid--effective .realfox-tr__result-card--effective {
	background: var(--realfox-tr-accent);
}
.realfox-tr__result-grid--effective .realfox-tr__result-card--effective .realfox-tr__result-label {
	color: #FFFFFF;
}
.realfox-tr__result-grid--effective .realfox-tr__result-card--effective .realfox-tr__result-value {
	color: #FFFFFF;
}

@media (max-width: 600px) {
	.realfox-tr__result-grid { grid-template-columns: 1fr; }
	.realfox-tr__slider-row {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.realfox-tr__slider-value {
		min-width: 0;
		text-align: left;
		font-size: 28px;
		font-weight: 700;
		letter-spacing: -0.5px;
	}
	.realfox-tr__field input[type="range"] {
		width: 100%;
	}
}