/**
 * Rechner für Zins und Zinseszins – Stylesheet
 *
 * Alle Regeln sind konsequent unter dem Namensraum ".rzz-container"
 * gekapselt, damit weder das aktive Theme noch andere Plugins
 * beeinflusst werden. Gleichzeitig schützen gezielte Resets den
 * Plugin-Bereich vor unerwünschten globalen Theme-Stilen.
 */

.rzz-container {
	/* Design-Tokens, ausschließlich innerhalb des Containers gültig */
	--rzz-primary: #3452ff;
	--rzz-primary-hover: #2a42d6;
	--rzz-primary-contrast: #ffffff;
	--rzz-primary-soft: #eef1ff;
	--rzz-success: #1a9c6e;
	--rzz-success-soft: #e7f7f1;
	--rzz-danger: #d23c3c;
	--rzz-danger-soft: #fdeaea;
	--rzz-text: #1c2130;
	--rzz-text-muted: #5b6474;
	--rzz-border: #dfe3eb;
	--rzz-border-strong: #c6ccd8;
	--rzz-bg: #ffffff;
	--rzz-bg-subtle: #f7f8fb;
	--rzz-radius-sm: 8px;
	--rzz-radius-md: 14px;
	--rzz-radius-lg: 20px;
	--rzz-shadow: 0 8px 28px rgba(28, 33, 48, 0.07);
	--rzz-shadow-modal: 0 20px 50px rgba(28, 33, 48, 0.25);
	--rzz-space-1: 4px;
	--rzz-space-2: 8px;
	--rzz-space-3: 12px;
	--rzz-space-4: 18px;
	--rzz-space-5: 28px;
	--rzz-space-6: 40px;
	--rzz-space-7: 56px;

	position: relative;
	display: block;
	margin: 0 auto;
	color: var(--rzz-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	background: transparent;
	-webkit-font-smoothing: antialiased;
}

/* Robuster Reset innerhalb des Plugin-Namensraums, um Theme-Kollisionen zu vermeiden */
.rzz-container,
.rzz-container *,
.rzz-container *::before,
.rzz-container *::after {
	box-sizing: border-box;
}

.rzz-container ul,
.rzz-container ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rzz-container p {
	margin: 0 0 var(--rzz-space-3) 0;
}

.rzz-container button {
	font-family: inherit;
}

.rzz-container input,
.rzz-container select,
.rzz-container button {
	font-size: 1rem;
	line-height: 1.4;
	color: var(--rzz-text);
}

.rzz-container a {
	color: var(--rzz-primary);
}

.rzz-noscript-hinweis {
	padding: var(--rzz-space-4);
	background: var(--rzz-danger-soft);
	color: var(--rzz-danger);
	border-radius: var(--rzz-radius-md);
}

.rzz-lade-hinweis {
	padding: var(--rzz-space-6);
	text-align: center;
	color: var(--rzz-text-muted);
}

/* ---------- Karte / Grundgerüst ---------- */

.rzz-card {
	background: var(--rzz-bg);
	border: 1px solid var(--rzz-border);
	border-radius: var(--rzz-radius-lg);
	padding: var(--rzz-space-6);
}

.rzz-header {
	margin-bottom: var(--rzz-space-5);
}

.rzz-title-row {
	display: flex;
	align-items: center;
	gap: var(--rzz-space-2);
	margin-bottom: var(--rzz-space-1);
}

.rzz-title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--rzz-text);
}

.rzz-subtitle {
	margin: 0;
	color: var(--rzz-text-muted);
	font-size: 0.95rem;
}

.rzz-info-btn {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--rzz-border-strong);
	background: var(--rzz-bg-subtle);
	color: var(--rzz-primary);
	font-weight: 700;
	font-size: 0.8rem;
	font-style: italic;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	line-height: 1;
	padding: 0;
}

.rzz-info-btn:hover {
	background: var(--rzz-primary-soft);
	border-color: var(--rzz-primary);
}

/* ---------- Formular ---------- */

.rzz-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rzz-space-5) var(--rzz-space-5);
}

.rzz-field {
	display: flex;
	flex-direction: column;
	gap: var(--rzz-space-2);
	min-width: 0;
}

.rzz-field--full {
	grid-column: 1 / -1;
}

.rzz-field[hidden] {
	display: none;
}

.rzz-label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--rzz-text);
}

.rzz-label-optional {
	font-weight: 400;
	color: var(--rzz-text-muted);
}

.rzz-input-group {
	position: relative;
	display: flex;
	align-items: stretch;
	border: 1px solid var(--rzz-border-strong);
	border-radius: var(--rzz-radius-sm);
	background: var(--rzz-bg);
	overflow: hidden;
}

.rzz-input-group:focus-within {
	border-color: var(--rzz-primary);
}

.rzz-input-group input,
.rzz-input-group select {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	padding: 10px var(--rzz-space-3);
	appearance: none;
	-webkit-appearance: none;
}

.rzz-input-group select {
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--rzz-text-muted) 50%), linear-gradient(135deg, var(--rzz-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: var(--rzz-space-6);
}

.rzz-input-suffix,
.rzz-input-prefix {
	display: flex;
	align-items: center;
	padding: 0 var(--rzz-space-3);
	background: var(--rzz-bg-subtle);
	color: var(--rzz-text-muted);
	font-size: 0.9rem;
	border-left: 1px solid var(--rzz-border);
	white-space: nowrap;
}

.rzz-input-prefix {
	border-left: none;
	border-right: 1px solid var(--rzz-border);
}

.rzz-hint {
	font-size: 0.8rem;
	color: var(--rzz-text-muted);
}

.rzz-error {
	display: none;
	font-size: 0.82rem;
	color: var(--rzz-danger);
	font-weight: 600;
}

.rzz-field.is-invalid .rzz-input-group {
	border-color: var(--rzz-danger);
}

.rzz-field.is-invalid .rzz-error {
	display: block;
}

.rzz-field.is-invalid .rzz-input-group:focus-within {
}

/* Toggle-Schalter für "Sparrate aktivieren" */
.rzz-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rzz-space-4);
	padding: var(--rzz-space-3) var(--rzz-space-4);
	background: var(--rzz-bg-subtle);
	border: 1px solid var(--rzz-border);
	border-radius: var(--rzz-radius-sm);
}

.rzz-switch {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	width: 44px;
	height: 24px;
}

.rzz-switch input {
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 24px;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
	appearance: none;
	-webkit-appearance: none;
}

.rzz-switch-track {
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 24px;
	background: var(--rzz-border-strong);
	border-radius: 999px;
	transition: background 0.15s ease;
	pointer-events: none;
	z-index: 1;
}

.rzz-switch-track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.15s ease;
}

.rzz-switch input:checked + .rzz-switch-track {
	background: var(--rzz-primary);
}

.rzz-switch input:checked + .rzz-switch-track::after {
	transform: translateX(20px);
}

.rzz-switch input:focus-visible + .rzz-switch-track {
}

.rzz-sub-fields {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rzz-space-4);
	padding-top: var(--rzz-space-1);
}

.rzz-sub-fields[hidden] {
	display: none;
}

/* ---------- Radiogruppe (Einzahlungszeitpunkt) ---------- */

.rzz-radio-group {
	display: flex;
	gap: var(--rzz-space-3);
	flex-wrap: wrap;
}

.rzz-radio-option {
	display: flex;
	align-items: center;
	gap: var(--rzz-space-2);
	padding: 8px var(--rzz-space-3);
	border: 1px solid var(--rzz-border-strong);
	border-radius: var(--rzz-radius-sm);
	cursor: pointer;
	font-size: 0.9rem;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.rzz-radio-option:hover {
	border-color: var(--rzz-primary);
}

.rzz-radio-option input {
	accent-color: var(--rzz-primary);
	margin: 0;
}

.rzz-radio-option input:checked ~ span {
	font-weight: 600;
}

.rzz-radio-option:has(input:checked) {
	border-color: var(--rzz-primary);
	background: var(--rzz-primary-soft);
}

/* ---------- Aktionen ---------- */

.rzz-actions {
	grid-column: 1 / -1;
	display: flex;
	gap: var(--rzz-space-3);
	flex-wrap: wrap;
	margin-top: var(--rzz-space-2);
}

.rzz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rzz-space-2);
	padding: 12px 22px;
	border-radius: var(--rzz-radius-sm);
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
	white-space: nowrap;
}

.rzz-btn:active {
	
}

.rzz-btn-primary {
	background: var(--rzz-primary) !important;
	color: var(--rzz-primary-contrast);
}

.rzz-btn-primary:hover {
	background: var(--rzz-primary-hover) !important;
}

.rzz-btn-secondary {
	background: transparent;
	color: var(--rzz-text);
	border-color: var(--rzz-border-strong);
}

.rzz-btn-secondary:hover {
	border-color: var(--rzz-text-muted);
	background: var(--rzz-bg-subtle);
}

.rzz-btn:focus-visible {
	outline: 2px solid var(--rzz-primary);
	outline-offset: 2px;
}

/* ---------- Ergebnisbereich ---------- */

.rzz-results {
	margin-top: var(--rzz-space-6);
	padding-top: var(--rzz-space-6);
	border-top: 1px solid var(--rzz-border);
}

.rzz-results[hidden] {
	display: none;
}

.rzz-results-title {
	margin: 0 0 var(--rzz-space-5) 0;
	font-size: 1.15rem;
	font-weight: 700;
}

.rzz-results-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rzz-space-4);
}

/* ---------- Infografik ---------- */

.rzz-infografik {
	margin-top: var(--rzz-space-7);
	padding-top: var(--rzz-space-6);
	border-top: 1px solid var(--rzz-border);
}

.rzz-infografik[hidden] {
	display: none;
}

.rzz-infografik-canvas {
	width: 100%;
	border-radius: var(--rzz-radius-lg);
	overflow: hidden;
	border: 1px solid var(--rzz-border);
	background: var(--rzz-bg);
	line-height: 0;
}

.rzz-infografik-canvas svg {
	display: block;
	width: 100%;
	height: auto;
}

.rzz-infografik-actions {
	display: flex;
	gap: var(--rzz-space-3);
	flex-wrap: wrap;
	margin-top: var(--rzz-space-4);
}

.rzz-infografik-actions .rzz-btn {
	flex: 1 1 auto;
}

.rzz-infografik-fehler {
	margin-top: var(--rzz-space-3);
}

.rzz-result-item {
	padding: var(--rzz-space-4);
	border-radius: var(--rzz-radius-md);
	background: var(--rzz-bg-subtle);
	border: 1px solid var(--rzz-border);
}

.rzz-result-item--accent {
	background: var(--rzz-primary-soft);
	border-color: transparent;
}

.rzz-result-item--positive .rzz-result-value {
	color: var(--rzz-success);
}

.rzz-result-label {
	display: block;
	font-size: 0.82rem;
	color: var(--rzz-text-muted);
	margin-bottom: var(--rzz-space-1);
}

.rzz-result-value {
	display: block;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--rzz-text);
	word-break: break-word;
}

/* Einfaches Balkendiagramm: Verhältnis Einzahlungen zu Zinsertrag */
.rzz-bar {
	margin-top: var(--rzz-space-5);
}

.rzz-bar-label {
	display: flex;
	justify-content: space-between;
	font-size: 0.82rem;
	color: var(--rzz-text-muted);
	margin-bottom: var(--rzz-space-2);
}

.rzz-bar-track {
	display: flex;
	width: 100%;
	height: 14px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--rzz-border);
}

.rzz-bar-segment {
	height: 100%;
	transition: width 0.4s ease;
}

.rzz-bar-segment--einzahlungen {
	background: var(--rzz-border-strong);
}

.rzz-bar-segment--zins {
	background: var(--rzz-primary);
}

.rzz-bar-legend {
	display: flex;
	gap: var(--rzz-space-5);
	margin-top: var(--rzz-space-3);
	flex-wrap: wrap;
}

.rzz-legend-item {
	display: flex;
	align-items: center;
	gap: var(--rzz-space-2);
	font-size: 0.85rem;
	color: var(--rzz-text-muted);
}

.rzz-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.rzz-legend-dot--einzahlungen {
	background: var(--rzz-border-strong);
}

.rzz-legend-dot--zins {
	background: var(--rzz-primary);
}

.rzz-results-actions {
	margin-top: var(--rzz-space-5);
}

/* ---------- Modal (Jahresübersicht) ---------- */
/* Der Backdrop bedeckt ausschließlich den Plugin-Container, nicht die gesamte Seite. */

.rzz-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(28, 33, 48, 0.55);
	border-radius: var(--rzz-radius-lg);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: var(--rzz-space-5);
	z-index: 10;
	animation: rzz-fade-in 0.15s ease;
}

.rzz-modal-backdrop[hidden] {
	display: none;
}

@keyframes rzz-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.rzz-modal {
	position: relative;
	background: var(--rzz-bg);
	border-radius: var(--rzz-radius-md);
	width: min(560px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.rzz-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--rzz-space-4) var(--rzz-space-5);
	border-bottom: 1px solid var(--rzz-border);
}

.rzz-modal-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
}

.rzz-modal-close {
	background: transparent;
	border: none;
	cursor: pointer;
	width: 32px;
	height: 32px;
	border-radius: var(--rzz-radius-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--rzz-text-muted);
	font-size: 1.1rem;
	line-height: 1;
}

.rzz-modal-close:hover {
	background: var(--rzz-bg-subtle);
	color: var(--rzz-text);
}

.rzz-modal-close:focus-visible {
	outline: 2px solid var(--rzz-primary);
	outline-offset: 2px;
}

.rzz-modal-body {
	padding: var(--rzz-space-4) var(--rzz-space-5) var(--rzz-space-5);
	overflow-y: auto;
}

.rzz-modal-footer {
	display: flex;
	gap: var(--rzz-space-3);
	flex-wrap: wrap;
	padding: var(--rzz-space-4) var(--rzz-space-5);
	border-top: 1px solid var(--rzz-border);
	background: var(--rzz-bg-subtle);
}

.rzz-modal-footer .rzz-btn {
	flex: 1 1 auto;
}

/* ---------- Info-Modal (Erklärung der Berechnungsmethode) ---------- */

.rzz-info-block {
	margin-bottom: var(--rzz-space-4);
}

.rzz-info-block:last-child {
	margin-bottom: 0;
}

.rzz-info-block-title {
	margin: 0 0 var(--rzz-space-1) 0;
	font-size: 0.95rem;
	font-weight: 700;
}

.rzz-info-block-text {
	margin: 0;
	color: var(--rzz-text-muted);
	font-size: 0.9rem;
}

.rzz-info-example {
	margin-top: var(--rzz-space-2);
	padding: var(--rzz-space-3) var(--rzz-space-4);
	background: var(--rzz-bg-subtle);
	border: 1px solid var(--rzz-border);
	border-radius: var(--rzz-radius-sm);
	font-size: 0.85rem;
}

.rzz-info-example p {
	margin: 0 0 var(--rzz-space-2) 0;
	color: var(--rzz-text-muted);
}

.rzz-info-example ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rzz-info-example li {
	display: flex;
	justify-content: space-between;
	gap: var(--rzz-space-3);
}

.rzz-info-example li strong {
	font-weight: 700;
}

.rzz-table-wrapper {
	overflow-x: auto;
	border: 1px solid var(--rzz-border);
	border-radius: var(--rzz-radius-sm);
}

.rzz-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
}

.rzz-table th,
.rzz-table td {
	padding: 10px var(--rzz-space-3);
	text-align: right;
	white-space: nowrap;
	border-bottom: 1px solid var(--rzz-border);
}

.rzz-table th:first-child,
.rzz-table td:first-child {
	text-align: left;
}

.rzz-table thead th {
	background: var(--rzz-bg-subtle);
	font-weight: 700;
	position: sticky;
	top: 0;
}

.rzz-table tbody tr:last-child td {
	border-bottom: none;
}

.rzz-table tbody tr:hover {
	background: var(--rzz-bg-subtle);
}

/* ---------- Sichtbarer Fokus für Tastaturbedienung (Accessibility) ---------- */

.rzz-container :focus-visible {
	outline: 2px solid var(--rzz-primary);
	outline-offset: 2px;
}

/* ---------- Responsive Anpassungen ---------- */

@media (max-width: 720px) {
	.rzz-card {
		padding: var(--rzz-space-4);
		border-radius: var(--rzz-radius-md);
	}

	.rzz-form {
		grid-template-columns: 1fr;
	}

	.rzz-sub-fields {
		grid-template-columns: 1fr;
	}

	.rzz-results-grid {
		grid-template-columns: 1fr;
	}

	.rzz-results {
		margin-top: var(--rzz-space-5);
		padding-top: var(--rzz-space-5);
	}

	.rzz-infografik {
		margin-top: var(--rzz-space-6);
		padding-top: var(--rzz-space-5);
	}

	.rzz-actions {
		flex-direction: column;
	}

	.rzz-actions .rzz-btn,
	.rzz-infografik-actions .rzz-btn {
		width: 100%;
	}

	.rzz-infografik-actions {
		flex-direction: column;
	}

	.rzz-modal-backdrop {
		padding: var(--rzz-space-3);
		align-items: stretch;
	}

	.rzz-modal {
		width: 100%;
		margin: auto 0;
		max-height: 90%;
	}

	.rzz-modal-footer {
		flex-direction: column;
	}

	.rzz-info-example li {
		flex-direction: column;
		gap: 0;
	}
}

@media (max-width: 480px) {
	.rzz-title {
		font-size: 1.2rem;
	}

	.rzz-result-value {
		font-size: 1.1rem;
	}
}