/*
 * Konfliktkostenrechner — alles strikt unter .sinnvoll-kk-app bzw.
 * .sinnvoll-kk-methodology gescopt, damit Elementor-/Theme-Styles nicht
 * kollidieren.
 *
 * Farben und Schrift kommen aus den Elementor-Global-Variablen der Site
 * (--e-global-color-*, --e-global-typography-*), mit den sinnvollFÜHREN-
 * Werten als Fallback. So passt sich der Rechner automatisch an, wenn im
 * Kit nachjustiert wird, und sieht auch außerhalb von Elementor richtig aus.
 */

.sinnvoll-kk-app,
.sinnvoll-kk-methodology {
	--sinnvoll-kk-accent: var(--e-global-color-accent, #85b045);
	--sinnvoll-kk-accent-dark: #6f9639;
	--sinnvoll-kk-ink: var(--e-global-color-primary, #17212a);
	--sinnvoll-kk-muted: var(--e-global-color-secondary, #54595f);
	--sinnvoll-kk-line: rgba(23, 33, 42, 0.14);
	--sinnvoll-kk-line-strong: rgba(23, 33, 42, 0.24);
	--sinnvoll-kk-surface: #fff;
	--sinnvoll-kk-surface-soft: #f7f9f4;
	--sinnvoll-kk-accent-soft: rgba(133, 176, 69, 0.1);
	--sinnvoll-kk-radius: 10px;
	--sinnvoll-kk-radius-sm: 6px;
	--sinnvoll-kk-shadow: 0 1px 2px rgba(23, 33, 42, 0.04), 0 4px 16px rgba(23, 33, 42, 0.06);

	box-sizing: border-box;
	max-width: 46rem;
	margin: 0 auto;
	color: var(--sinnvoll-kk-ink);
	font-family: var(--e-global-typography-text-font-family, "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif);
	font-size: 1rem;
	line-height: 1.6;
}

/* Der Methodenanhang ist Fließtext MIT einer breiten Parametertabelle. Die
   46rem sind für Lesetext richtig, zwangen die vierspaltige Tabelle aber ins
   horizontale Scrollen, obwohl daneben Platz frei war. Der Text bleibt
   deshalb schmal, die Tabelle darf die volle Spaltenbreite nutzen. */
.sinnvoll-kk-methodology {
	max-width: 100%;
}

.sinnvoll-kk-methodology > * {
	max-width: 46rem;
	margin-right: auto;
	margin-left: auto;
}

.sinnvoll-kk-methodology > .sinnvoll-kk-table-scroll {
	max-width: 100%;
}

.sinnvoll-kk-app *,
.sinnvoll-kk-app *::before,
.sinnvoll-kk-app *::after,
.sinnvoll-kk-methodology * {
	box-sizing: inherit;
}

/* --- Formularblöcke --------------------------------------------------- */

.sinnvoll-kk-app .sinnvoll-kk-fieldset {
	border: 1px solid var(--sinnvoll-kk-line);
	border-radius: var(--sinnvoll-kk-radius);
	background: var(--sinnvoll-kk-surface);
	padding: 1.25rem 1.5rem 1.5rem;
	margin: 0 0 1.25rem;
}

.sinnvoll-kk-app .sinnvoll-kk-fieldset legend {
	padding: 0 0.6rem;
	margin-left: -0.6rem;
	color: var(--sinnvoll-kk-ink);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.sinnvoll-kk-app .sinnvoll-kk-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 1.15rem;
}

.sinnvoll-kk-app .sinnvoll-kk-field:last-child {
	margin-bottom: 0;
}

.sinnvoll-kk-app .sinnvoll-kk-field label {
	font-weight: 600;
	line-height: 1.4;
}

.sinnvoll-kk-app .sinnvoll-kk-field input,
.sinnvoll-kk-app .sinnvoll-kk-field select {
	max-width: 16rem;
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--sinnvoll-kk-line-strong);
	border-radius: var(--sinnvoll-kk-radius-sm);
	background: var(--sinnvoll-kk-surface);
	color: inherit;
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sinnvoll-kk-app .sinnvoll-kk-field input:hover,
.sinnvoll-kk-app .sinnvoll-kk-field select:hover {
	border-color: var(--sinnvoll-kk-accent);
}

.sinnvoll-kk-app input:focus-visible,
.sinnvoll-kk-app select:focus-visible,
.sinnvoll-kk-app button:focus-visible,
.sinnvoll-kk-app summary:focus-visible {
	outline: 2px solid var(--sinnvoll-kk-accent-dark);
	outline-offset: 2px;
	border-color: var(--sinnvoll-kk-accent);
}

.sinnvoll-kk-app .sinnvoll-kk-hint {
	color: var(--sinnvoll-kk-muted);
	font-size: 0.85rem;
	line-height: 1.5;
}

/* --- Eskalationsauswahl ----------------------------------------------- */

.sinnvoll-kk-app .sinnvoll-kk-escalation {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.2rem 0.85rem;
	align-items: start;
	padding: 0.85rem 1rem;
	margin: 0 0 0.6rem;
	border: 1px solid var(--sinnvoll-kk-line);
	border-radius: var(--sinnvoll-kk-radius);
	background: var(--sinnvoll-kk-surface);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sinnvoll-kk-app .sinnvoll-kk-escalation:hover {
	border-color: var(--sinnvoll-kk-accent);
	background: var(--sinnvoll-kk-surface-soft);
}

.sinnvoll-kk-app .sinnvoll-kk-escalation:has(input:checked) {
	border-color: var(--sinnvoll-kk-accent);
	background: var(--sinnvoll-kk-accent-soft);
	box-shadow: inset 3px 0 0 var(--sinnvoll-kk-accent);
}

.sinnvoll-kk-app .sinnvoll-kk-escalation input {
	grid-row: span 2;
	margin-top: 0.35rem;
	accent-color: var(--sinnvoll-kk-accent-dark);
}

.sinnvoll-kk-app .sinnvoll-kk-escalation-label {
	font-weight: 600;
}

.sinnvoll-kk-app .sinnvoll-kk-escalation-description {
	grid-column: 2;
	color: var(--sinnvoll-kk-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Der Einstieg muss als Einstieg erkennbar sein. Feedback 14.09.26: Der
   Kasten „Euer Rahmen" sah aus wie Fließtext — gleiche Farbe, gleiche
   Schrift — obwohl die Besucher genau dorthin geführt werden sollen. Nur die
   Schnellcheck-Kästen im Formular werden so gehoben; die zehn Detailblöcke
   weiter unten behalten ihre ruhige Gliederung. Die Legende bleibt dunkel
   auf Weiß (15:1): Weiß auf dem dunklen Markengrün läge bei 3,4:1. */
.sinnvoll-kk-app .sinnvoll-kk-form .sinnvoll-kk-fieldset {
	border: 2px solid var(--sinnvoll-kk-accent);
	background: var(--sinnvoll-kk-surface-soft);
	box-shadow: var(--sinnvoll-kk-shadow);
}

.sinnvoll-kk-app .sinnvoll-kk-form .sinnvoll-kk-fieldset legend {
	padding: 0.2rem 0.85rem;
	margin-left: -0.85rem;
	border: 2px solid var(--sinnvoll-kk-accent);
	border-radius: 999px;
	background: var(--sinnvoll-kk-surface);
	font-size: 1.1rem;
	font-weight: 700;
}

/* --- Ergebnisblock ---------------------------------------------------- */

.sinnvoll-kk-app .sinnvoll-kk-result {
	border: 1px solid var(--sinnvoll-kk-line);
	border-top: 4px solid var(--sinnvoll-kk-accent);
	border-radius: var(--sinnvoll-kk-radius);
	background: var(--sinnvoll-kk-surface);
	box-shadow: var(--sinnvoll-kk-shadow);
	padding: 1.5rem;
	margin-top: 1.75rem;
}

.sinnvoll-kk-app .sinnvoll-kk-result-heading {
	margin: 0 0 1.25rem;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.sinnvoll-kk-app .sinnvoll-kk-ranges {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
	margin: 0 0 1.25rem;
}

.sinnvoll-kk-app .sinnvoll-kk-range {
	padding: 0.9rem 1rem;
	border-radius: var(--sinnvoll-kk-radius-sm);
	background: var(--sinnvoll-kk-surface-soft);
}

.sinnvoll-kk-app .sinnvoll-kk-range dt {
	color: var(--sinnvoll-kk-muted);
	font-size: 0.85rem;
	line-height: 1.4;
}

.sinnvoll-kk-app .sinnvoll-kk-range dd {
	margin: 0.3rem 0 0;
	color: var(--sinnvoll-kk-ink);
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.sinnvoll-kk-app .sinnvoll-kk-method-note {
	color: var(--sinnvoll-kk-muted);
	font-size: 0.82rem;
	line-height: 1.55;
}

.sinnvoll-kk-app .sinnvoll-kk-model-version {
	white-space: nowrap;
}

.sinnvoll-kk-app .sinnvoll-kk-recommendation {
	border-top: 1px solid var(--sinnvoll-kk-line);
	margin-top: 1.25rem;
	padding-top: 1.25rem;
}

.sinnvoll-kk-app .sinnvoll-kk-recommendation p {
	margin: 0 0 0.75rem;
}

.sinnvoll-kk-app .sinnvoll-kk-recommendation a {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	border-radius: 90px;
	background: var(--sinnvoll-kk-accent);
	color: #fff;
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.sinnvoll-kk-app .sinnvoll-kk-recommendation a:hover,
.sinnvoll-kk-app .sinnvoll-kk-recommendation a:focus {
	background: var(--sinnvoll-kk-accent-dark);
	color: #fff;
}

.sinnvoll-kk-app .sinnvoll-kk-noscript {
	border: 1px dashed var(--sinnvoll-kk-line-strong);
	border-radius: var(--sinnvoll-kk-radius);
	padding: 1rem;
}

/* --- Transparenz: Badges, Popover, Annahmen, Methodik ----------------- */

.sinnvoll-kk-app .sinnvoll-kk-source,
.sinnvoll-kk-methodology .sinnvoll-kk-source {
	position: relative;
	display: inline-block;
}

/* Belegen, nicht rufen: die Badges bleiben klickbar und behalten ihre
   Linienart als Konfidenz-Kodierung, treten optisch aber hinter die
   Feldbeschriftung zurück.

   Doppelter Klassen-Selektor mit Rücksetzung von appearance: Die Badges sind
   <button>-Elemente (wegen des Popovers), und Themes stylen Buttons global
   (bei sinnvoll-fuehren.com macht das `.elementor-kit-6 button` — spezifischer
   als eine einzelne Klasse). Ohne diese Spezifität erben die Badges das
   Aussehen der Haupt-Buttons und rufen lauter als die Feldbeschriftung.
   Bewusst kein !important: das würde die Site-Styles pauschal aushebeln. */
.sinnvoll-kk-app .sinnvoll-kk-badge.sinnvoll-kk-badge,
.sinnvoll-kk-methodology .sinnvoll-kk-badge.sinnvoll-kk-badge {
	appearance: none;
	display: inline-block;
	width: auto;
	min-height: 0;
	padding: 0.05rem 0.5rem;
	border: 1px solid var(--sinnvoll-kk-line-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--sinnvoll-kk-muted);
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1.5;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.sinnvoll-kk-app .sinnvoll-kk-badge.sinnvoll-kk-badge:hover,
.sinnvoll-kk-methodology .sinnvoll-kk-badge.sinnvoll-kk-badge:hover {
	border-color: var(--sinnvoll-kk-accent);
	background: transparent;
	color: var(--sinnvoll-kk-ink);
}

span.sinnvoll-kk-badge {
	cursor: default;
}

/* Konfidenzstufen bleiben zusätzlich über die Linienart unterscheidbar,
   damit sie nicht allein über Farbe kodiert sind (Barrierefreiheit). */

/* Dieselbe Spezifitätsstufe wie die Basisregel oben, sonst überschreibt
   deren `border: 1px solid …` die Linienart wieder. */
.sinnvoll-kk-app .sinnvoll-kk-badge.sinnvoll-kk-badge--amtlich,
.sinnvoll-kk-methodology .sinnvoll-kk-badge.sinnvoll-kk-badge--amtlich {
	border-color: var(--sinnvoll-kk-accent-dark);
	color: var(--sinnvoll-kk-accent-dark);
}

.sinnvoll-kk-app .sinnvoll-kk-badge.sinnvoll-kk-badge--studie,
.sinnvoll-kk-methodology .sinnvoll-kk-badge.sinnvoll-kk-badge--studie {
	border-style: solid;
}

.sinnvoll-kk-app .sinnvoll-kk-badge.sinnvoll-kk-badge--praxiswert,
.sinnvoll-kk-methodology .sinnvoll-kk-badge.sinnvoll-kk-badge--praxiswert {
	border-style: dashed;
}

.sinnvoll-kk-app .sinnvoll-kk-badge.sinnvoll-kk-badge--annahme,
.sinnvoll-kk-methodology .sinnvoll-kk-badge.sinnvoll-kk-badge--annahme {
	border-style: dotted;
}

.sinnvoll-kk-popover {
	position: absolute;
	z-index: 10;
	left: 0;
	top: calc(100% + 0.4rem);
	min-width: 16rem;
	max-width: 24rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--sinnvoll-kk-line-strong);
	border-radius: var(--sinnvoll-kk-radius-sm);
	background: var(--sinnvoll-kk-surface);
	color: var(--sinnvoll-kk-ink);
	font-size: 0.82rem;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.5;
	box-shadow: var(--sinnvoll-kk-shadow);
}

.sinnvoll-kk-assumptions {
	margin-top: 1.25rem;
	border: 1px solid var(--sinnvoll-kk-line);
	border-radius: var(--sinnvoll-kk-radius);
	background: var(--sinnvoll-kk-surface-soft);
	padding: 0.9rem 1.15rem;
}

.sinnvoll-kk-assumptions summary {
	cursor: pointer;
	font-weight: 600;
}

/* 20 Parameter untereinander ergeben eine Textwand — ausgerechnet dort, wo
   die Sorgfalt belegt wird. Zweispaltig und als abgesetzte Karten wird der
   Block überfliegbar; auf schmalen Viewports bleibt es eine Spalte. */

/* CSS-Spalten statt Grid: die Einträge sind sehr unterschiedlich lang, und
   im Grid richtet sich jede Zeile nach der höchsten Karte — das erzeugte
   mehr Leerraum, als die zweite Spalte einspart. */
.sinnvoll-kk-assumptions-list {
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
	columns: 2 17rem;
	column-gap: 0.75rem;
}

.sinnvoll-kk-assumptions-list li {
	break-inside: avoid;
	margin: 0 0 0.6rem;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--sinnvoll-kk-line);
	border-radius: var(--sinnvoll-kk-radius-sm);
	background: var(--sinnvoll-kk-surface);
	font-size: 0.85rem;
	line-height: 1.5;
}

.sinnvoll-kk-assumption-label {
	display: block;
	margin-bottom: 0.15rem;
	font-weight: 600;
}

.sinnvoll-kk-assumption-source {
	display: block;
	margin-top: 0.2rem;
	color: var(--sinnvoll-kk-muted);
	font-size: 0.8rem;
}

/* Die Tabelle ist bewusst breiter als der Fließtext daneben. Damit sie als
   gesetzte Abbildung wirkt und nicht als verrutschter Block, bekommt sie
   Rahmen, eigenen Grund und Abstand. */
.sinnvoll-kk-table-scroll {
	overflow-x: auto;
	margin: 1.5rem 0 2rem;
	border: 1px solid var(--sinnvoll-kk-line);
	border-radius: var(--sinnvoll-kk-radius);
	background: var(--sinnvoll-kk-surface);
}

.sinnvoll-kk-param-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
	table-layout: fixed;
}

/* Feste Spaltenbreiten: sonst zieht die Quellenspalte alles an sich und die
   schmalen Spalten stehen halb leer daneben. */
.sinnvoll-kk-param-table th:nth-child(1),
.sinnvoll-kk-param-table td:nth-child(1) {
	width: 26%;
}

.sinnvoll-kk-param-table th:nth-child(2),
.sinnvoll-kk-param-table td:nth-child(2) {
	width: 20%;
}

.sinnvoll-kk-param-table th:nth-child(3),
.sinnvoll-kk-param-table td:nth-child(3) {
	width: 12%;
}

.sinnvoll-kk-param-table th,
.sinnvoll-kk-param-table td {
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--sinnvoll-kk-line);
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
}

.sinnvoll-kk-param-table tbody tr:last-child td {
	border-bottom: 0;
}

.sinnvoll-kk-param-table thead th {
	border-bottom: 2px solid var(--sinnvoll-kk-line-strong);
	background: var(--sinnvoll-kk-surface-soft);
	color: var(--sinnvoll-kk-ink);
	font-weight: 600;
	white-space: nowrap;
}

.sinnvoll-kk-param-table td:nth-child(1) {
	font-weight: 600;
}

/* Quelle und Jahr stehen immer sichtbar, die ausführliche Anmerkung (bis zu
   550 Zeichen) klappt auf. Sonst schwanken die Zeilenhöhen zwischen 62 und
   189 Pixel und die Tabelle wirkt unruhig. */
.sinnvoll-kk-source-note {
	margin-top: 0.35rem;
	color: var(--sinnvoll-kk-muted);
	font-size: 0.92em;
}

.sinnvoll-kk-source-note summary {
	color: var(--sinnvoll-kk-accent-dark);
	cursor: pointer;
	list-style: none;
}

.sinnvoll-kk-source-note summary::-webkit-details-marker {
	display: none;
}

.sinnvoll-kk-source-note summary::before {
	content: "+ ";
	font-weight: 700;
}

.sinnvoll-kk-source-note[open] summary::before {
	content: "– ";
}

.sinnvoll-kk-source-note[open] summary {
	margin-bottom: 0.3rem;
}

.sinnvoll-kk-excluded-list li {
	margin: 0 0 0.75rem;
}

/* --- Detailrechner: Aufriss, Deckel-Hinweis --------------------------- */

.sinnvoll-kk-breakdown {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--sinnvoll-kk-accent);
	border-radius: 0 var(--sinnvoll-kk-radius-sm) var(--sinnvoll-kk-radius-sm) 0;
	background: var(--sinnvoll-kk-surface-soft);
}

.sinnvoll-kk-breakdown-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.3rem 0;
	font-size: 0.9rem;
}

.sinnvoll-kk-breakdown-row + .sinnvoll-kk-breakdown-row {
	border-top: 1px solid var(--sinnvoll-kk-line);
}

/* Die Beschriftung darf umbrechen, der Betrag nie: sonst schiebt ein langer
   Kategoriename den Wert in eine eigene Zeile an den rechten Rand.
   flex-basis bleibt bei 0%, damit die Spalte den Restplatz füllt statt auf
   die Textbreite zu kollabieren. */
.sinnvoll-kk-breakdown-row dt {
	flex: 1 1 0%;
	min-width: 8rem;
	color: var(--sinnvoll-kk-muted);
}

.sinnvoll-kk-breakdown-row dd {
	flex: 0 0 auto;
	margin: 0;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.sinnvoll-kk-cap-hint {
	border: 1px solid var(--sinnvoll-kk-line-strong);
	border-left: 3px solid var(--sinnvoll-kk-muted);
	border-radius: var(--sinnvoll-kk-radius-sm);
	background: var(--sinnvoll-kk-surface-soft);
	padding: 0.7rem 0.9rem;
	color: var(--sinnvoll-kk-muted);
	font-size: 0.85rem;
	line-height: 1.5;
}

.sinnvoll-kk-detail {
	margin-top: 1.5rem;
	border: 1px solid var(--sinnvoll-kk-line);
	border-radius: var(--sinnvoll-kk-radius);
	background: var(--sinnvoll-kk-surface);
	padding: 1rem 1.25rem;
}

.sinnvoll-kk-detail summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--sinnvoll-kk-ink);
}

.sinnvoll-kk-detail[open] summary {
	margin-bottom: 0.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--sinnvoll-kk-line);
}

/* Im Detailrechner stehen zehn Blöcke untereinander. Sie bleiben weiß und
   werden über Luft und eine kräftigere Legende gegliedert — flächiger
   Hintergrund ließe die Gliederung in Person/Team/Organisation verschwimmen. */
.sinnvoll-kk-detail .sinnvoll-kk-fieldset {
	margin-top: 1.75rem;
	background: var(--sinnvoll-kk-surface);
}

/* Die Legende überschreibt eine Gruppe von Feldern und muss deshalb schwerer
   wiegen als deren Beschriftungen (1rem/600) — sonst liest sich jedes Feld
   wie eine eigene Überschrift und die Gruppierung verschwindet. */
.sinnvoll-kk-detail .sinnvoll-kk-fieldset legend {
	padding: 0.15rem 0.7rem;
	margin-left: -0.7rem;
	border-radius: var(--sinnvoll-kk-radius-sm);
	background: var(--sinnvoll-kk-accent-soft);
	color: var(--sinnvoll-kk-accent-dark);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

/* --- Potenzial, Szenarien, Schalter ----------------------------------- */

.sinnvoll-kk-potential {
	margin: 1.25rem 0;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--sinnvoll-kk-accent);
	border-radius: var(--sinnvoll-kk-radius);
	background: var(--sinnvoll-kk-accent-soft);
}

.sinnvoll-kk-potential-heading {
	margin: 0 0 0.9rem;
	font-size: 1.05rem;
	font-weight: 600;
}

.sinnvoll-kk-potential .sinnvoll-kk-range {
	background: var(--sinnvoll-kk-surface);
}

.sinnvoll-kk-scenario-controls {
	display: flex;
	gap: 0.75rem;
	margin: 1rem 0 0.5rem;
}

/* Wie bei den Badges: Theme-Button-Styles sind spezifischer als eine
   einzelne Klasse. „Szenario festhalten" ist ein Werkzeug im Rechner, kein
   Haupt-Call-to-Action — deshalb die zurückhaltende Outline-Form gegen die
   Theme-Vorgabe durchsetzen. */
.sinnvoll-kk-app .sinnvoll-kk-button.sinnvoll-kk-button {
	appearance: none;
	width: auto;
	padding: 0.5rem 1.2rem;
	border: 1px solid var(--sinnvoll-kk-accent);
	border-radius: 90px;
	background: var(--sinnvoll-kk-surface);
	color: var(--sinnvoll-kk-accent-dark);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sinnvoll-kk-app .sinnvoll-kk-button.sinnvoll-kk-button:hover {
	background: var(--sinnvoll-kk-accent);
	color: #fff;
}

.sinnvoll-kk-button[disabled] {
	opacity: 0.55;
	cursor: default;
}

.sinnvoll-kk-button[disabled]:hover {
	background: var(--sinnvoll-kk-surface);
	color: var(--sinnvoll-kk-accent-dark);
}

.sinnvoll-kk-scenarios {
	list-style: none;
	margin: 0.75rem 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.sinnvoll-kk-scenario {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.85rem;
	margin: 0;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--sinnvoll-kk-line);
	border-radius: var(--sinnvoll-kk-radius-sm);
	background: var(--sinnvoll-kk-surface-soft);
	font-size: 0.88rem;
}

.sinnvoll-kk-scenario-delta {
	color: var(--sinnvoll-kk-accent-dark);
	font-size: 0.95rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sinnvoll-kk-app .sinnvoll-kk-scenario-remove.sinnvoll-kk-scenario-remove {
	appearance: none;
	width: 1.6rem;
	height: 1.6rem;
	min-height: 0;
	margin-left: auto;
	padding: 0;
	border: 1px solid var(--sinnvoll-kk-line-strong);
	border-radius: 50%;
	background: var(--sinnvoll-kk-surface);
	color: var(--sinnvoll-kk-muted);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	align-self: center;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.sinnvoll-kk-app .sinnvoll-kk-scenario-remove.sinnvoll-kk-scenario-remove:hover {
	border-color: var(--sinnvoll-kk-ink);
	background: var(--sinnvoll-kk-surface);
	color: var(--sinnvoll-kk-ink);
}

.sinnvoll-kk-detail-summary {
	margin: 1.25rem 0 0;
	padding: 0.85rem 1rem;
	border-radius: var(--sinnvoll-kk-radius-sm);
	background: var(--sinnvoll-kk-surface-soft);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sinnvoll-kk-checkbox {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin: 0 0 1rem;
	cursor: pointer;
	line-height: 1.5;
}

.sinnvoll-kk-checkbox input {
	margin-top: 0.3rem;
	accent-color: var(--sinnvoll-kk-accent-dark);
	flex-shrink: 0;
}

/* --- Einheiten neben den Eingabefeldern ------------------------------- */

.sinnvoll-kk-input-group {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.sinnvoll-kk-unit {
	color: var(--sinnvoll-kk-muted);
	font-size: 0.85rem;
	white-space: nowrap;
}

/* --- Report-Anforderung ----------------------------------------------- */

.sinnvoll-kk-report {
	margin-top: 1.5rem;
	border: 1px solid var(--sinnvoll-kk-line);
	border-radius: var(--sinnvoll-kk-radius);
	background: var(--sinnvoll-kk-surface-soft);
	padding: 1.25rem 1.5rem 1.5rem;
}

.sinnvoll-kk-report-heading {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
	font-weight: 600;
}

.sinnvoll-kk-report .sinnvoll-kk-field input {
	max-width: 22rem;
	background: var(--sinnvoll-kk-surface);
}

/* Der Report-Knopf ist der einzige echte Call-to-Action im Rechner und darf
   deshalb gefüllt auftreten. */
.sinnvoll-kk-app .sinnvoll-kk-report .sinnvoll-kk-button.sinnvoll-kk-button {
	background: var(--sinnvoll-kk-accent);
	color: #fff;
}

.sinnvoll-kk-app .sinnvoll-kk-report .sinnvoll-kk-button.sinnvoll-kk-button:hover {
	background: var(--sinnvoll-kk-accent-dark);
	color: #fff;
}

.sinnvoll-kk-report-status {
	min-height: 1.2em;
	margin-bottom: 0;
	color: var(--sinnvoll-kk-accent-dark);
	font-weight: 600;
	font-size: 0.9rem;
}

/* Honeypot: visuell und für Screenreader unsichtbar, für Bots ein Formularfeld */
.sinnvoll-kk-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Schmale Viewports ------------------------------------------------ */

@media (max-width: 480px) {

	.sinnvoll-kk-app .sinnvoll-kk-fieldset,
	.sinnvoll-kk-app .sinnvoll-kk-result,
	.sinnvoll-kk-report {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.sinnvoll-kk-app .sinnvoll-kk-field input,
	.sinnvoll-kk-app .sinnvoll-kk-field select {
		max-width: 100%;
		width: 100%;
	}

	.sinnvoll-kk-app .sinnvoll-kk-range dd {
		font-size: 1.3rem;
	}

	/* Passen Beschriftung und Betrag nicht nebeneinander, rutscht der Betrag
	   nach links unter den Text statt einsam an den rechten Rand. */
	.sinnvoll-kk-breakdown-row {
		justify-content: flex-start;
		gap: 0.15rem 1rem;
	}

	.sinnvoll-kk-scenario-controls {
		flex-direction: column;
	}
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {

	.sinnvoll-kk-app * {
		transition: none !important;
	}
}

/* Literaturverzeichnis (Methodik-Seite) */

/* Nur margin-block: .sinnvoll-kk-methodology > * zentriert direkte Kinder mit
   margin-inline auto auf 46rem — eine margin-Kurzschreibweise gleicher
   Spezifitaet weiter unten wuerde die Zentrierung loeschen (Live-Befund 14.09.26). */
.sinnvoll-kk-lit-group {
  margin-block: 1.5rem 0.5rem;
  font-size: 1rem;
}

.sinnvoll-kk-lit-list {
  list-style: none;
  margin-block: 0;
  padding: 0;
}

.sinnvoll-kk-lit-list li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--sinnvoll-kk-line, #d6dbd3);
}

.sinnvoll-kk-lit-citation {
  font-weight: 600;
}

.sinnvoll-kk-lit-link,
.sinnvoll-kk-lit-offline,
.sinnvoll-kk-lit-note {
  font-size: 0.92em;
}

.sinnvoll-kk-lit-link {
  align-self: flex-start;
}

.sinnvoll-kk-lit-offline,
.sinnvoll-kk-lit-note {
  color: var(--sinnvoll-kk-muted, #5d6660);
}

/* Ergebnis-Balken (Feedback 14.09.26: zu mathematisch) */
.sinnvoll-kk-app .sinnvoll-kk-bars {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.25rem 0 1.25rem;
}

.sinnvoll-kk-app .sinnvoll-kk-bar-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.75rem;
  align-items: center;
}

.sinnvoll-kk-app .sinnvoll-kk-bar-label {
  font-size: 0.85em;
  font-weight: 600;
}

.sinnvoll-kk-app .sinnvoll-kk-bar-track {
  position: relative;
  display: block;
  height: 1.4rem;
  border-radius: var(--sinnvoll-kk-radius-sm);
  background: var(--sinnvoll-kk-surface-soft);
}

.sinnvoll-kk-app .sinnvoll-kk-bar-max,
.sinnvoll-kk-app .sinnvoll-kk-bar-min {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: var(--sinnvoll-kk-radius-sm);
  transition: width 0.25s ease;
}

.sinnvoll-kk-app .sinnvoll-kk-bar-max {
  background: var(--sinnvoll-kk-accent-soft);
  border: 1px solid var(--sinnvoll-kk-accent);
  box-sizing: border-box;
}

.sinnvoll-kk-app .sinnvoll-kk-bar-min {
  background: var(--sinnvoll-kk-accent);
  border-radius: var(--sinnvoll-kk-radius-sm) 0 0 var(--sinnvoll-kk-radius-sm);
}

.sinnvoll-kk-app .sinnvoll-kk-bar-legend {
  margin: 0;
  font-size: 0.8em;
  color: var(--sinnvoll-kk-muted);
}

@media (prefers-reduced-motion: reduce) {

  .sinnvoll-kk-app .sinnvoll-kk-bar-max,
  .sinnvoll-kk-app .sinnvoll-kk-bar-min {
    transition: none;
  }
}

/* "Was das im Alltag heißt" */
.sinnvoll-kk-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.sinnvoll-kk-facts-heading {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 1rem;
}

.sinnvoll-kk-fact {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--sinnvoll-kk-line);
  border-radius: var(--sinnvoll-kk-radius-sm);
  background: var(--sinnvoll-kk-surface);
}

.sinnvoll-kk-fact--wide {
  grid-column: 1 / -1;
}

.sinnvoll-kk-fact-label {
  font-size: 0.85em;
  color: var(--sinnvoll-kk-muted);
}

.sinnvoll-kk-fact-big {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.15;
  color: var(--sinnvoll-kk-accent-dark);
  font-variant-numeric: tabular-nums;
}

.sinnvoll-kk-fact-note {
  margin: 0;
  font-size: 0.88em;
}

.sinnvoll-kk-people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: flex-end;
}

.sinnvoll-kk-person svg {
  width: 1.5rem;
  height: 2.1rem;
  display: block;
}

.sinnvoll-kk-person--direct svg {
  fill: var(--sinnvoll-kk-accent-dark);
}

.sinnvoll-kk-person--indirect svg {
  fill: var(--sinnvoll-kk-accent-soft);
  stroke: var(--sinnvoll-kk-accent-dark);
  stroke-width: 1.2;
}

.sinnvoll-kk-person-more {
  align-self: center;
  font-weight: 600;
  color: var(--sinnvoll-kk-muted);
}

@media (max-width: 560px) {

  .sinnvoll-kk-facts {
    grid-template-columns: 1fr;
  }

  .sinnvoll-kk-app .sinnvoll-kk-bar-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* "So rechnen wir – mit euren Zahlen" (Scheibe 2) */
.sinnvoll-kk-app .sinnvoll-kk-steps {
  margin: 0 0 1.25rem;
  border: 1px solid var(--sinnvoll-kk-line);
  border-radius: var(--sinnvoll-kk-radius-sm);
  background: var(--sinnvoll-kk-surface);
}

.sinnvoll-kk-app .sinnvoll-kk-steps > summary {
  padding: 0.8rem 1rem;
  font-weight: 600;
  cursor: pointer;
}

.sinnvoll-kk-app .sinnvoll-kk-steps > .sinnvoll-kk-hint {
  padding: 0 1rem;
}

.sinnvoll-kk-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

.sinnvoll-kk-step {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1rem;
  align-items: baseline;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--sinnvoll-kk-line);
}

.sinnvoll-kk-step-what {
  font-weight: 600;
}

.sinnvoll-kk-step-val {
  grid-row: 1 / 3;
  grid-column: 2;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  color: var(--sinnvoll-kk-accent-dark);
}

.sinnvoll-kk-step-calc {
  grid-column: 1;
  font-size: 0.92em;
  color: var(--sinnvoll-kk-muted);
}

.sinnvoll-kk-step-src {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  align-items: center;
  font-size: 0.82em;
  color: var(--sinnvoll-kk-muted);
}

.sinnvoll-kk-step--detail {
  background: var(--sinnvoll-kk-surface-soft);
}

@media (max-width: 560px) {

  .sinnvoll-kk-step {
    grid-template-columns: 1fr;
  }

  .sinnvoll-kk-step-val {
    grid-row: auto;
    grid-column: 1;
    text-align: left;
  }
}

/* Gestapelter Aufriss (Scheibe 3): vier Farben nach Dimension */
.sinnvoll-kk-app {
  --sinnvoll-kk-dim-time: var(--sinnvoll-kk-accent-dark);
  --sinnvoll-kk-dim-person: var(--sinnvoll-kk-accent);
  --sinnvoll-kk-dim-team: #b9cf8f;
  --sinnvoll-kk-dim-org: #e2ebcf;
}

.sinnvoll-kk-stack {
  margin: 0 0 0.75rem;
}

.sinnvoll-kk-stack-bar {
  display: flex;
  height: 1.6rem;
  overflow: hidden;
  border-radius: var(--sinnvoll-kk-radius-sm);
  background: var(--sinnvoll-kk-surface-soft);
}

.sinnvoll-kk-stack-seg {
  display: block;
  height: 100%;
  transition: width 0.25s ease;
}

.sinnvoll-kk-stack-seg--time {
  background: var(--sinnvoll-kk-dim-time);
}

.sinnvoll-kk-stack-seg--person {
  background: var(--sinnvoll-kk-dim-person);
}

.sinnvoll-kk-stack-seg--team {
  background: var(--sinnvoll-kk-dim-team);
}

.sinnvoll-kk-stack-seg--org {
  background: var(--sinnvoll-kk-dim-org);
}

.sinnvoll-kk-stack-caption {
  margin: 0.4rem 0 0;
  font-size: 0.85em;
  color: var(--sinnvoll-kk-muted);
}

/* Die Aufriss-Zeilen werden zur Legende: Farbmarke vor der Beschriftung */
.sinnvoll-kk-breakdown-row[data-sinnvoll-kk-dim] dt::before {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.45rem;
  border-radius: 2px;
  vertical-align: -1px;
  background: var(--sinnvoll-kk-dim-org);
}

.sinnvoll-kk-breakdown-row[data-sinnvoll-kk-dim="time"] dt::before {
  background: var(--sinnvoll-kk-dim-time);
}

.sinnvoll-kk-breakdown-row[data-sinnvoll-kk-dim="person"] dt::before {
  background: var(--sinnvoll-kk-dim-person);
}

.sinnvoll-kk-breakdown-row[data-sinnvoll-kk-dim="team"] dt::before {
  background: var(--sinnvoll-kk-dim-team);
}

@media (prefers-reduced-motion: reduce) {

  .sinnvoll-kk-stack-seg {
    transition: none;
  }
}

/* Eingeklappter Unterblock im Detailrechner (Erstattung der Entgeltfortzahlung) */
.sinnvoll-kk-app .sinnvoll-kk-subdetails {
  margin: 0.75rem 0 0;
  padding: 0 0 0 0.9rem;
  border-left: 3px solid var(--sinnvoll-kk-line-strong);
}

.sinnvoll-kk-app .sinnvoll-kk-subdetails > summary {
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0;
}

.sinnvoll-kk-app .sinnvoll-kk-sickpay-note:empty {
  display: none;
}