/* ==========================================================================
   TAXLETIC – Frontend
   ========================================================================== */

.taxletic {
	/* Dunkel ist der Standard. Gescannte Belege sind fast immer weiss und
	   leuchten auf dunklem Grund, ausserdem blendet die App nicht, wenn man
	   abends am Kuechentisch Kassenzettel abarbeitet. */
	--txl-bg: #111827;
	--txl-bg-deep: #0b111c;
	--txl-surface: #1a2334;
	--txl-surface-2: #232f44;
	--txl-text: #e9eef7;
	--txl-muted: #93a4bd;
	--txl-line: #2c3a52;

	/* Kontextfarbe. Wird bei Gewerbe ausgetauscht, damit man auf einen Blick
	   sieht, in welchen Topf der naechste Beleg wandert. */
	--txl-brand: #8b5cf6;
	--txl-brand-2: #3b82f6;
	--txl-brand-soft: #26204a;
	--txl-brand-text: #c4b5fd;

	--txl-warn: #fbbf24;
	--txl-warn-soft: #382a10;
	--txl-danger: #f87171;
	--txl-danger-soft: #3a1a1c;
	--txl-radius: 20px;
	--txl-radius-sm: 14px;
	--txl-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
	--txl-shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);

	color: var(--txl-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

/* Gewerbemodus: warme, klare Akzente statt der ruhigen privaten Toene. */
.taxletic[data-scope="business"] {
	--txl-brand: #f97316;
	--txl-brand-2: #f59e0b;
	--txl-brand-soft: #3a2210;
	--txl-brand-text: #fdba74;
}

/* Fest gesetzt, nicht geerbt.
   Vorher stand hier "inherit". Das haelt ueberall - ausser hinter einem
   <details>. Der Browser haengt dessen Inhalt intern an einen eigenen
   Knoten, den kein Selektor von aussen trifft; geerbt wird dann dessen
   Standardwert content-box. Genau darin steckte die Schnellbearbeitung im
   Pruefen-Stapel, und ihre Eingabefelder wurden um Innenabstand und Rahmen
   zu breit: auf einem 390 Pixel breiten Telefon stand die Auswahlliste 15
   Pixel ausserhalb der Karte. */
.taxletic *,
.taxletic *::before,
.taxletic *::after {
	box-sizing: border-box;
}

/* Muss jede display-Regel unten schlagen, sonst bleiben Sheet und
   Formular sichtbar, obwohl sie als hidden markiert sind. */
.taxletic [hidden] {
	display: none !important;
}

/* Wer sein Geraet ausdruecklich auf hell stellt, bekommt hell. Der
   Standard bleibt dunkel. */
@media (prefers-color-scheme: light) {
	.taxletic:where(:not([data-txl-theme="dark"], [data-txl-theme="dark"] *)) {
		--txl-bg: #f4f6fa;
		--txl-bg-deep: #eaeef5;
		--txl-surface: #ffffff;
		--txl-surface-2: #eef1f7;
		--txl-text: #131a26;
		--txl-muted: #5c6b82;
		--txl-line: #dde3ee;
		--txl-brand: #6d3fe0;
		--txl-brand-2: #2563eb;
		--txl-brand-soft: #efe9fe;
		--txl-brand-text: #5b2fd0;
		--txl-warn: #b45309;
		--txl-warn-soft: #fdf3e3;
		--txl-danger: #b42318;
		--txl-danger-soft: #fdeceb;
		--txl-shadow: 0 1px 2px rgba(16, 23, 28, .06), 0 8px 24px rgba(16, 23, 28, .06);
		--txl-shadow-lg: 0 24px 60px rgba(16, 23, 28, .18);
	}

	.taxletic[data-scope="business"]:where(:not([data-txl-theme="dark"], [data-txl-theme="dark"] *)) {
		--txl-brand: #c2410c;
		--txl-brand-2: #ea580c;
		--txl-brand-soft: #fdeee2;
		--txl-brand-text: #9a3412;
	}
}

/* Hell von Hand gewählt (ab 0.47.0), dieselben Werte. */
.taxletic:where([data-txl-theme="light"], [data-txl-theme="light"] *) {
	--txl-bg: #f4f6fa;
	--txl-bg-deep: #eaeef5;
	--txl-surface: #ffffff;
	--txl-surface-2: #eef1f7;
	--txl-text: #131a26;
	--txl-muted: #5c6b82;
	--txl-line: #dde3ee;
	--txl-brand: #6d3fe0;
	--txl-brand-2: #2563eb;
	--txl-brand-soft: #efe9fe;
	--txl-brand-text: #5b2fd0;
	--txl-warn: #b45309;
	--txl-warn-soft: #fdf3e3;
	--txl-danger: #b42318;
	--txl-danger-soft: #fdeceb;
	--txl-shadow: 0 1px 2px rgba(16, 23, 28, .06), 0 8px 24px rgba(16, 23, 28, .06);
	--txl-shadow-lg: 0 24px 60px rgba(16, 23, 28, .18);
}

.taxletic[data-scope="business"]:where([data-txl-theme="light"], [data-txl-theme="light"] *) {
	--txl-brand: #c2410c;
	--txl-brand-2: #ea580c;
	--txl-brand-soft: #fdeee2;
	--txl-brand-text: #9a3412;
}

/* --------------------------------------------------------------------------
   Startseite
   -------------------------------------------------------------------------- */

.txl-landing {
	position: relative;
	min-height: 78vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 20px 64px;
	overflow: hidden;
}

.txl-landing-glow {
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 70vh;
	background:
		radial-gradient(45% 60% at 22% 20%, rgba(13, 139, 125, .28), transparent 70%),
		radial-gradient(40% 55% at 78% 12%, rgba(56, 129, 189, .22), transparent 70%);
	filter: blur(6px);
	pointer-events: none;
}

.txl-landing-inner {
	position: relative;
	width: 100%;
	max-width: 720px;
	text-align: center;
}

.txl-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	font-size: 14px;
}

.txl-brand-mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: var(--txl-brand);
	color: #fff;
}

.txl-brand-mark svg {
	width: 20px;
	height: 20px;
}

.txl-landing-title {
	margin: 26px 0 12px;
	font-size: clamp(30px, 6vw, 46px);
	line-height: 1.12;
	letter-spacing: -.02em;
	font-weight: 700;
}

.txl-landing-sub {
	margin: 0 auto 30px;
	max-width: 34em;
	color: var(--txl-muted);
	font-size: 17px;
}

.txl-landing-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 340px;
	margin: 0 auto 44px;
}

.txl-landing-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	text-align: left;
}

.txl-landing-features li {
	background: var(--txl-surface);
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius);
	padding: 18px;
	box-shadow: var(--txl-shadow);
}

.txl-landing-features strong {
	display: block;
	margin: 12px 0 4px;
	font-size: 15px;
}

.txl-landing-features span:last-child {
	color: var(--txl-muted);
	font-size: 14px;
}

.txl-feature-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
}

.txl-feature-icon svg {
	width: 20px;
	height: 20px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.txl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 12px 20px;
	border: 1px solid var(--txl-brand);
	border-radius: 14px;
	background: var(--txl-brand);
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: transform .08s ease, filter .15s ease;
}

/* Ein gesperrter Knopf muss gesperrt aussehen. Sonst drückt man auf
   "Passt so", nichts geschieht, und der Grund steht woanders. */
.taxletic .txl-btn[disabled],
.taxletic .txl-btn[disabled]:hover {
	opacity: .45;
	cursor: not-allowed;
	filter: none;
	transform: none;
}

.txl-btn:hover {
	filter: brightness(1.06);
	color: #fff;
}

.txl-btn:active {
	transform: translateY(1px);
}

.txl-btn-ghost {
	background: var(--txl-surface);
	border-color: var(--txl-line);
	color: var(--txl-text);
}

.txl-btn-ghost:hover {
	background: var(--txl-surface-2);
	color: var(--txl-text);
}

.txl-btn-google {
	background: #fff;
	color: #26343d;
	border-color: #dadce0;
}

.txl-btn-google:hover {
	background: #f6f8f9;
	color: #26343d;
}

.txl-btn-sm {
	min-height: 40px;
	padding: 8px 14px;
	font-size: 14px;
	border-radius: 11px;
}

.txl-google-g {
	display: inline-grid;
	place-items: center;
}

/* --------------------------------------------------------------------------
   App-Rahmen
   -------------------------------------------------------------------------- */

.txl-app {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 16px calc(96px + env(safe-area-inset-bottom));
}

.txl-topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0 12px;
	background: linear-gradient(var(--txl-bg) 72%, transparent);
	backdrop-filter: saturate(1.2) blur(6px);
}

.txl-topbar-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.txl-cloud {
	font-size: 12px;
	color: var(--txl-muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--txl-surface);
	border: 1px solid var(--txl-line);
	max-width: 46vw;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.txl-cloud::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--txl-brand);
	flex: 0 0 auto;
}

.txl-cloud.is-offline::before {
	background: var(--txl-warn);
}

.txl-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--txl-line);
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
	font-weight: 700;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Umschalter zwischen den Welten (ab 0.45.0)
   Erscheint nur, wenn das Konto mehr als eine Welt sehen darf. Am Handy
   macht er sich Platz: der Schriftzug weicht dem Zeichen, die Anzeige der
   Verbindung wird zum Punkt.
   -------------------------------------------------------------------------- */

.txl-worlds {
	display: inline-flex;
	flex: 0 1 auto;
	min-width: 0;
	gap: 2px;
	padding: 3px;
	border-radius: 999px;
	background: var(--txl-surface);
	border: 1px solid var(--txl-line);
}

.txl-worlds button {
	border: 0;
	background: transparent;
	color: var(--txl-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	padding: 7px 12px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
}

.txl-worlds button[aria-pressed="true"] {
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--txl-brand) 40%, transparent);
}

.txl-worlds button:focus-visible {
	outline: 2px solid var(--txl-brand);
	outline-offset: 1px;
}

@media (max-width: 639px) {
	.txl-app.has-worlds .txl-brand-name {
		display: none;
	}

	.txl-app.has-worlds .txl-cloud {
		font-size: 0;
		gap: 0;
		padding: 6px;
	}
}

.txl-alerts:empty {
	display: none;
}

.txl-greeting h1 {
	margin: 10px 0 2px;
	font-size: clamp(24px, 5vw, 30px);
	letter-spacing: -.02em;
	line-height: 1.2;
}

.txl-greeting p {
	margin: 0 0 18px;
	color: var(--txl-muted);
}

/* --------------------------------------------------------------------------
   Kacheln
   -------------------------------------------------------------------------- */

.txl-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

.txl-stat {
	background: var(--txl-surface);
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	padding: 12px 14px;
	box-shadow: var(--txl-shadow);
}

.txl-stat-label {
	display: block;
	font-size: 12px;
	color: var(--txl-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.txl-stat-value {
	display: block;
	font-size: clamp(17px, 4.4vw, 22px);
	font-weight: 700;
	letter-spacing: -.01em;
	margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Erfassung
   -------------------------------------------------------------------------- */

.txl-capture {
	display: grid;
	gap: 10px;
	margin-bottom: 16px;
}

.txl-capture-primary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px;
	border-radius: var(--txl-radius);
	border: 1px solid transparent;
	background:
		linear-gradient(135deg, var(--txl-brand), #0f6f8c);
	color: #fff;
	cursor: pointer;
	box-shadow: var(--txl-shadow);
}

.txl-capture-primary:active {
	transform: translateY(1px);
}

.txl-capture-icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .18);
	flex: 0 0 auto;
}

.txl-capture-icon svg {
	width: 28px;
	height: 28px;
}

.txl-capture-text strong {
	display: block;
	font-size: 18px;
}

.txl-capture-text span {
	font-size: 14px;
	opacity: .88;
}

.txl-capture-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px;
	border: 1px dashed var(--txl-line);
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface);
	color: var(--txl-muted);
	font-size: 15px;
	cursor: pointer;
}

.txl-capture-secondary svg {
	width: 18px;
	height: 18px;
}

.txl-pages {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.txl-page {
	position: relative;
	width: 88px;
	height: 116px;
	border-radius: var(--txl-radius-sm);
	overflow: hidden;
	border: 1px solid var(--txl-line);
	background: var(--txl-surface-2);
	box-shadow: var(--txl-shadow);
}

.txl-page img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.txl-page-label {
	position: absolute;
	inset: auto 0 0 0;
	padding: 3px 6px;
	font-size: 11px;
	color: #fff;
	background: rgba(9, 14, 18, .72);
}

.txl-page-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 50%;
	background: rgba(9, 14, 18, .72);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.txl-crop {
	margin-bottom: 16px;
}

.txl-crop canvas {
	width: 100%;
	max-height: 58vh;
	border-radius: var(--txl-radius);
	background: #0b1014;
	touch-action: none;
	display: block;
}

.txl-crop-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.txl-hint {
	color: var(--txl-muted);
	font-size: 14px;
	margin: 8px 0 0;
}

/* --------------------------------------------------------------------------
   Karten und Formulare
   -------------------------------------------------------------------------- */

.txl-card {
	background: var(--txl-surface);
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius);
	padding: 18px;
	margin-bottom: 14px;
	box-shadow: var(--txl-shadow);
}

.txl-card-title {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 650;
}

.txl-segment {
	display: inline-flex;
	padding: 4px;
	gap: 4px;
	background: var(--txl-surface-2);
	border-radius: 12px;
	margin-bottom: 16px;
}

.txl-segment button {
	border: 0;
	background: transparent;
	color: var(--txl-muted);
	font: inherit;
	font-weight: 600;
	padding: 8px 18px;
	border-radius: 9px;
	cursor: pointer;
}

.txl-segment button.is-active {
	background: var(--txl-surface);
	color: var(--txl-text);
	box-shadow: 0 1px 2px rgba(16, 23, 28, .12);
}

.txl-segment button[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

.txl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.txl-field {
	display: block;
	min-width: 0;
}

.txl-field-wide {
	grid-column: 1 / -1;
}

.txl-field > span {
	display: block;
	font-size: 13px;
	color: var(--txl-muted);
	margin-bottom: 5px;
}

.taxletic input[type="text"],
.taxletic input[type="date"],
.taxletic input[type="search"],
.taxletic input[type="email"],
.taxletic input[type="number"],
.taxletic select,
.taxletic textarea {
	width: 100%;
	padding: 12px 13px;
	font: inherit;
	color: var(--txl-text);
	background: var(--txl-surface);
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	outline: none;
	appearance: none;
}

.taxletic input:focus,
.taxletic select:focus,
.taxletic textarea:focus {
	border-color: var(--txl-brand);
	box-shadow: 0 0 0 3px var(--txl-brand-soft);
}

.taxletic select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 34px;
}

.txl-form-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 18px;
}

.txl-form-actions .txl-btn {
	flex: 1 1 auto;
}

@media (min-width: 640px) {
	.txl-form-actions .txl-btn {
		flex: 0 0 auto;
	}
}

/* --------------------------------------------------------------------------
   Suche, Filter, Liste
   -------------------------------------------------------------------------- */

.txl-search {
	position: relative;
	margin-bottom: 10px;
}

.txl-search span {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--txl-muted);
	pointer-events: none;
}

.txl-search svg {
	width: 18px;
	height: 18px;
}

.taxletic .txl-search input {
	padding-left: 42px;
}

.txl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.txl-chips select {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	padding: 9px 32px 9px 12px;
	font-size: 14px;
	border-radius: 999px;
	background-color: var(--txl-surface);
}

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

.txl-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 14px;
	background: var(--txl-surface);
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	box-shadow: var(--txl-shadow);
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.txl-item:active {
	transform: translateY(1px);
}

.txl-item-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
	font-weight: 700;
	font-size: 13px;
	flex: 0 0 auto;
}

.txl-item-icon.is-business {
	background: var(--txl-warn-soft);
	color: var(--txl-warn);
}

.txl-item-main {
	min-width: 0;
	flex: 1 1 auto;
}

.txl-item-main strong {
	display: block;
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.txl-item-meta {
	display: block;
	font-size: 13px;
	color: var(--txl-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.txl-item-right {
	text-align: right;
	flex: 0 0 auto;
}

.txl-item-amount {
	display: block;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.txl-badge {
	display: inline-block;
	margin-top: 3px;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
}

.txl-badge.is-warn {
	background: var(--txl-warn-soft);
	color: var(--txl-warn);
}

.txl-badge.is-error {
	background: var(--txl-danger-soft);
	color: var(--txl-danger);
}

.txl-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--txl-muted);
	border: 1px dashed var(--txl-line);
	border-radius: var(--txl-radius);
}

.txl-defs {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	font-size: 14px;
}

.txl-defs dt {
	color: var(--txl-muted);
}

.txl-defs dd {
	margin: 0;
	text-align: right;
}

.txl-account-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Hinweise
   -------------------------------------------------------------------------- */

.txl-message,
.txl-queue {
	padding: 11px 14px;
	border-radius: var(--txl-radius-sm);
	margin-bottom: 10px;
	font-size: 14px;
	border: 1px solid transparent;
	background: var(--txl-warn-soft);
	color: var(--txl-warn);
}

.txl-message.is-error {
	background: var(--txl-danger-soft);
	color: var(--txl-danger);
	border-color: transparent;
}

/* --------------------------------------------------------------------------
   Navigation unten
   -------------------------------------------------------------------------- */

.txl-nav {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(12px + env(safe-area-inset-bottom));
	z-index: 30;
	display: flex;
	gap: 4px;
	padding: 6px;
	width: min(420px, calc(100% - 28px));
	background: var(--txl-surface);
	border: 1px solid var(--txl-line);
	border-radius: 20px;
	box-shadow: var(--txl-shadow-lg);
}

.txl-nav button {
	flex: 1 1 0;
	display: grid;
	justify-items: center;
	gap: 2px;
	padding: 9px 4px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: var(--txl-muted);
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
}

.txl-nav button svg {
	width: 21px;
	height: 21px;
}

.txl-nav button.is-active {
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
}

/* --------------------------------------------------------------------------
   Detailansicht als Sheet
   -------------------------------------------------------------------------- */

.txl-sheet {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.txl-sheet-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 10, 13, .55);
	backdrop-filter: blur(2px);
}

.txl-sheet-inner {
	position: relative;
	width: min(640px, 100%);
	max-height: 88vh;
	overflow: auto;
	background: var(--txl-surface);
	border-radius: 24px 24px 0 0;
	padding: 20px 18px calc(24px + env(safe-area-inset-bottom));
	box-shadow: var(--txl-shadow-lg);
	animation: txl-slide-up .22s ease;
}

@media (min-width: 640px) {
	.txl-sheet {
		align-items: center;
	}

	.txl-sheet-inner {
		border-radius: 22px;
	}
}

@keyframes txl-slide-up {
	from { transform: translateY(24px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.txl-sheet-inner h2 {
	margin: 0 0 4px;
	font-size: 20px;
}

.txl-sheet-sub {
	margin: 0 0 16px;
	color: var(--txl-muted);
	font-size: 14px;
}

.txl-files {
	display: grid;
	gap: 6px;
	margin: 14px 0;
}

.txl-file-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	text-decoration: none;
	color: var(--txl-text);
	font-size: 14px;
	background: var(--txl-surface-2);
}

.txl-history {
	margin-top: 16px;
	border-top: 1px solid var(--txl-line);
	padding-top: 12px;
	font-size: 13px;
	color: var(--txl-muted);
	max-height: 220px;
	overflow: auto;
}

.txl-history div {
	padding: 3px 0;
}

.txl-history time {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Anmeldehinweis im Shortcode
   -------------------------------------------------------------------------- */

.taxletic-login-hint {
	max-width: 380px;
	margin: 40px auto;
	text-align: center;
}

.taxletic-login-hint .txl-btn {
	width: 100%;
	margin-bottom: 8px;
}

/* ==========================================================================
   Pruefen: Kartenstapel und Klaerungs-Chat (ab 0.6.0)
   ========================================================================== */

.txl-nav button {
	position: relative;
}

.txl-navbadge {
	position: absolute;
	top: 4px;
	left: 50%;
	margin-left: 6px;
	min-width: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--txl-brand);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* Keine eigene Höhe: der Stapel ist genau so hoch wie die aktive Karte. */
.txl-stack {
	position: relative;
	margin: 0 0 36px;
}

/* Die aktive Karte steht im Fluss und bestimmt die Höhe des Stapels. Vorher
   lagen alle Karten absolut in einem 320 Pixel hohen Kasten: sobald eine
   Karte einen Hinweis oder eine Warnung trug, wuchs ihr Inhalt über den
   Rahmen hinaus und schob sich über die Karte darunter. */
.txl-stack-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 320px;
	padding: 20px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius);
	background: var(--txl-surface);
	box-shadow: var(--txl-shadow);
	touch-action: pan-y;
	transition: transform .18s ease, box-shadow .18s ease;
}

/* Die Karten dahinter werden kleiner und tiefer gesetzt, damit der Stapel
   als Stapel lesbar ist, ohne zu flackern. Sie liegen absolut hinter der
   aktiven Karte und sind geklammert, damit sie nie höher werden als sie. */
.txl-stack-card[data-depth="1"],
.txl-stack-card[data-depth="2"] {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.txl-stack-card[data-depth="1"] {
	transform: translateY(10px) scale(.97);
	opacity: .7;
}

.txl-stack-card[data-depth="2"] {
	transform: translateY(20px) scale(.94);
	opacity: .4;
}

.txl-stack-ghost {
	margin: 0;
	color: var(--txl-muted);
	font-size: 15px;
	font-weight: 600;
}

.txl-stack-card.is-dragging {
	transition: none;
	box-shadow: var(--txl-shadow-lg);
	cursor: grabbing;
}

.txl-stack-card.is-yes {
	border-color: var(--txl-brand);
}

.txl-stack-card.is-no {
	border-color: var(--txl-warn);
}

.txl-stack-head {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.txl-pill {
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: var(--txl-surface-2);
	color: var(--txl-muted);
}

.txl-pill-business {
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
}

.txl-pill-private {
	background: var(--txl-surface-2);
	color: var(--txl-muted);
}

.txl-pill-tax {
	background: var(--txl-warn-soft);
	color: var(--txl-warn);
}

.txl-stack-vendor {
	margin: 4px 0 0;
	font-size: 20px;
	line-height: 1.25;
}

.txl-stack-amount {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.txl-stack-meta,
.txl-stack-confidence {
	margin: 0;
	color: var(--txl-muted);
	font-size: 13px;
}

.txl-tip {
	margin-top: 6px;
	padding: 10px 12px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
	font-size: 14px;
}

.txl-warn {
	margin-top: 6px;
	padding: 10px 12px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-warn-soft);
	color: var(--txl-warn);
	font-size: 14px;
}

.txl-stack-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
}

.txl-linkish {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--txl-muted);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

/* Fußzeile der Karte: Details links, Zurückstellen rechts. */
.txl-stack-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	padding-top: 10px;
}

/* ----- Schnellbearbeitung auf der Prüfen-Karte (ab 0.13.0) ----- */

.txl-quick {
	margin-top: 4px;
	padding: 10px 12px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
}

.txl-quick > summary {
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.txl-quick > summary::-webkit-details-marker {
	display: none;
}

.txl-quick > summary::after {
	content: " ▾";
	color: var(--txl-muted);
}

.txl-quick[open] > summary::after {
	content: " ▴";
}

.txl-quick-form {
	margin-top: 12px;
}

/* Ein ausgeblendetes Feld muss verschwinden. .txl-field setzt display, und
   das schlägt die Voreinstellung des Browsers für [hidden]. */
.txl-field[hidden] {
	display: none;
}

.txl-quick-switch {
	margin: 12px 0 0;
}

.txl-quick-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}

.txl-pill-later {
	background: var(--txl-surface-2);
	color: var(--txl-muted);
	border: 1px dashed var(--txl-line);
}

/* ----- Chat ----- */

.txl-chat-sheet {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 80vh;
}

.txl-chat-pinned {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 12px 14px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
}

.txl-chat-pinned span {
	color: var(--txl-muted);
	font-size: 13px;
}

.txl-chat-thread {
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-y: auto;
	padding: 4px 0;
}

.txl-bubble {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 16px;
	font-size: 15px;
}

.txl-bubble p {
	margin: 0;
}

.txl-bubble-ai {
	align-self: flex-start;
	border-bottom-left-radius: 4px;
	background: var(--txl-surface-2);
}

.txl-bubble-user {
	align-self: flex-end;
	border-bottom-right-radius: 4px;
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
}

.txl-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.txl-chip {
	padding: 6px 12px;
	border: 1px solid var(--txl-line);
	border-radius: 999px;
	background: var(--txl-surface);
	color: var(--txl-text);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.txl-chip:hover {
	border-color: var(--txl-brand);
	color: var(--txl-brand-text);
}

.txl-chat-form {
	display: flex;
	gap: 8px;
}

.txl-chat-form input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface);
	color: var(--txl-text);
	font: inherit;
}

.txl-chat-confirm {
	width: 100%;
}

/* Aufgeklapptes Foldable oder Tablet: Beleg links, Klärung rechts. */
@media (min-width: 700px) {
	.txl-stack-card {
		min-height: 360px;
		padding: 24px 28px;
	}

	.txl-chat-sheet {
		max-height: 70vh;
	}
}

/* ----- Testmodus (ab 0.7.0) ----- */

.txl-testswitch {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 12px;
	padding: 10px 12px;
	border: 1px dashed var(--txl-line);
	border-radius: var(--txl-radius-sm);
	color: var(--txl-muted);
	font-size: 13px;
	cursor: pointer;
}

.txl-testswitch input {
	margin-top: 2px;
	flex: none;
}

.txl-testbanner {
	margin-bottom: 14px;
	padding: 12px 14px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-warn-soft);
	color: var(--txl-warn);
	font-size: 14px;
	font-weight: 600;
}

.txl-stack-card.is-test,
.txl-item.is-test {
	border-style: dashed;
}

.txl-pill-test {
	background: var(--txl-warn-soft);
	color: var(--txl-warn);
}

/* ----- Aufklappbare Detailfelder (ab 0.8.0) ----- */

.txl-details {
	margin-bottom: 14px;
}

.txl-details > summary {
	padding: 8px 0;
	color: var(--txl-brand-text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.txl-details > summary::-webkit-details-marker {
	display: none;
}

.txl-details > summary::before {
	content: "+ ";
	font-weight: 700;
}

.txl-details[open] > summary::before {
	content: "– ";
}

.txl-hint-warn {
	color: var(--txl-warn);
	font-weight: 600;
}

.txl-testresult {
	margin-top: 10px;
	padding: 12px 14px;
	border-left: 4px solid var(--txl-brand);
	background: var(--txl-surface-2);
	font-family: Consolas, Monaco, monospace;
	font-size: 13px;
	white-space: pre-wrap;
}

.txl-testresult.is-error {
	border-left-color: var(--txl-danger);
}

/* ==========================================================================
   Eigenstaendige App-Seite (ab 0.9.0)
   ========================================================================== */

html.taxletic-standalone,
html.taxletic-standalone body.taxletic-body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	background: var(--txl-bg-deep, #0b111c);
	overscroll-behavior-y: none;
}

/* Die Farbtoken haengen an .taxletic. Auf der eigenstaendigen Seite braucht
   der Body sie auch, sonst blitzt beim Laden Weiss durch. */
html.taxletic-standalone,
html.taxletic-standalone body.taxletic-body {
	--txl-bg-deep: #0b111c;
	color-scheme: dark light;
}

@media (prefers-color-scheme: light) {
	html.taxletic-standalone:where(:not([data-txl-theme="dark"])),
	html.taxletic-standalone body.taxletic-body:where(:not([data-txl-theme="dark"], [data-txl-theme="dark"] *)) {
		--txl-bg-deep: #eaeef5;
	}
}

/* Hell von Hand gewählt (ab 0.47.0), dieselben Werte. */
html.taxletic-standalone[data-txl-theme="light"],
html.taxletic-standalone body.taxletic-body:where([data-txl-theme="light"], [data-txl-theme="light"] *) {
	--txl-bg-deep: #eaeef5;
}

/* Von Hand gewählt (ab 0.47.0): auch Datumsfelder, Auswahllisten und
   Scrollleisten folgen der Wahl, nicht dem Gerät. */
[data-txl-theme="light"],
html.taxletic-standalone[data-txl-theme="light"],
html.taxletic-standalone[data-txl-theme="light"] body.taxletic-body {
	color-scheme: light;
}

[data-txl-theme="dark"],
html.taxletic-standalone[data-txl-theme="dark"],
html.taxletic-standalone[data-txl-theme="dark"] body.taxletic-body {
	color-scheme: dark;
}

/* Die Wahl selbst, in der Karte „App“ unter Konto (ab 0.47.0). */
.txl-theme {
	display: grid;
	gap: 6px;
	margin: 4px 0 14px;
}

.txl-theme-label {
	color: var(--txl-muted);
	font-size: 14px;
	font-weight: 600;
}

.txl-theme-choice {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 420px;
	margin-bottom: 0;
}

.txl-theme-hint {
	margin: 0;
	font-size: 13px;
}

.txl-theme-choice button {
	padding: 8px 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.taxletic-body .taxletic {
	min-height: 100vh;
	min-height: 100dvh;
	background:
		radial-gradient(1100px 520px at 50% -10%, var(--txl-brand-soft), transparent 70%),
		var(--txl-bg);
	transition: background .35s ease;
}

/* Ein Theme, das doch noch etwas ausgibt, soll die App nicht verschieben. */
body.taxletic-body > header,
body.taxletic-body > footer,
body.taxletic-body > nav,
body.taxletic-body .site-header,
body.taxletic-body .site-footer,
body.taxletic-body .entry-title,
body.taxletic-body .page-title {
	display: none !important;
}

/* ==========================================================================
   Feinschliff Oberflaeche (ab 0.9.0)
   ========================================================================== */

.txl-app {
	max-width: 560px;
	padding-top: env(safe-area-inset-top);
}

.txl-topbar {
	background: linear-gradient(var(--txl-bg) 66%, transparent);
}

/* Glaseffekt in der Navigation, wie im Konzept. Wo backdrop-filter fehlt,
   greift die deckende Flaeche darunter. */
.txl-nav {
	background: color-mix(in srgb, var(--txl-surface) 78%, transparent);
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	border-color: color-mix(in srgb, var(--txl-line) 80%, transparent);
}

@supports not (backdrop-filter: blur(1px)) {
	.txl-nav {
		background: var(--txl-surface);
	}
}

.txl-nav button.is-active {
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--txl-brand) 40%, transparent);
}

/* Der Aufnahmeknopf ist die wichtigste Flaeche der App und darf das auch
   zeigen. */
.txl-capture-primary {
	padding: 26px 22px;
	background: linear-gradient(135deg, var(--txl-brand), var(--txl-brand-2));
	box-shadow: 0 12px 30px color-mix(in srgb, var(--txl-brand) 35%, transparent);
}

.txl-greeting h1 {
	font-size: clamp(26px, 6.5vw, 34px);
	font-weight: 700;
	letter-spacing: -.03em;
}

/* Zahlen gross und fett, Beiwerk abgedimmt. */
.txl-stat-value {
	font-size: clamp(20px, 5.6vw, 26px);
	letter-spacing: -.02em;
}

.txl-stat-label {
	font-size: 11px;
	opacity: .8;
}

.txl-stat {
	background: color-mix(in srgb, var(--txl-surface) 92%, transparent);
}

/* Der Bereichsumschalter traegt jetzt die Kontextfarbe. */
.txl-segment button.is-active {
	background: var(--txl-brand);
	color: #fff;
}

.txl-testbanner {
	border: 1px solid color-mix(in srgb, var(--txl-warn) 35%, transparent);
}

/* ----- Korrekturen nach der Sichtpruefung (0.9.0) ----- */

/* Vier Kacheln sollen ein sauberes Raster ergeben, nicht drei plus eine
   einsame. Zwei Spalten, gleiche Hoehe. */
.txl-stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
}

.txl-stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
}

/* Betraege duerfen nicht umbrechen, sonst steht das Eurozeichen allein
   in der naechsten Zeile. */
.txl-stat-value {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: clamp(18px, 5.2vw, 24px);
}

.txl-stat-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (min-width: 520px) {
	.txl-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Das Abzeichen sass mitten auf dem Symbol. Es gehoert in die Ecke. */
.txl-navbadge {
	top: 2px;
	left: auto;
	right: 8px;
	margin-left: 0;
	box-shadow: 0 0 0 2px var(--txl-surface);
}

/* Der Erfassen-Bildschirm soll den freien Platz nutzen statt unten
   auszufransen. */
/* Der Aufnahmeknopf gehoert in Daumenreichweite. Die Ansicht fuellt die
   Hoehe, damit der Block nach unten rutscht statt oben zu kleben. Ist
   viel Inhalt da (Zuschnitt, Formular), waechst sie einfach mit. */
.txl-view[data-view="capture"] {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 220px);
	min-height: calc(100dvh - 220px);
}

.txl-capture {
	margin-top: auto;
}

/* Sobald zugeschnitten oder ausgefuellt wird, ist die Verankerung unten
   nur noch hinderlich. */
.txl-view[data-view="capture"]:has(.txl-crop:not([hidden])),
.txl-view[data-view="capture"]:has(.txl-form:not([hidden])) {
	min-height: 0;
}

.txl-view[data-view="capture"]:has(.txl-crop:not([hidden])) .txl-capture,
.txl-view[data-view="capture"]:has(.txl-form:not([hidden])) .txl-capture {
	margin-top: 0;
}

/* ----- Zustaende in Liste und Stapel (ab 0.9.1) ----- */

.txl-item-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}

.txl-item-tags .txl-pill {
	padding: 2px 8px;
	font-size: 11px;
}

.txl-item-amount.is-muted {
	color: var(--txl-muted);
	font-weight: 500;
}

.txl-badge.is-done {
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
}

.txl-badge.is-busy {
	background: var(--txl-surface-2);
	color: var(--txl-muted);
}

/* Wartezustand: ruhig, aber erkennbar lebendig. */
.txl-busy {
	margin-top: 8px;
	padding: 12px 14px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
	color: var(--txl-muted);
	font-size: 14px;
	position: relative;
	overflow: hidden;
}

.txl-busy::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--txl-brand) 18%, transparent), transparent);
	transform: translateX(-100%);
	animation: txl-sweep 1.6s ease-in-out infinite;
}

@keyframes txl-sweep {
	to {
		transform: translateX(100%);
	}
}

/* Drei Punkte im Chat. Der Laufbalken allein sagt "es passiert etwas",
   die Punkte sagen "es wird gerade getippt", und genau das ist gemeint. */
.txl-busy-dots {
	display: inline-flex;
	gap: 4px;
	margin-right: 8px;
	vertical-align: middle;
}

.txl-busy-dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	animation: txl-dot 1.2s ease-in-out infinite;
}

.txl-busy-dots i:nth-child(2) {
	animation-delay: 0.2s;
}

.txl-busy-dots i:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes txl-dot {
	30% {
		opacity: 1;
		transform: translateY(-2px);
	}
}

/* Eine noch nicht bestaetigte Nachricht sieht anders aus als eine
   angekommene. Sonst glaubt man, sie sei schon durch. */
.txl-bubble.is-pending {
	opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
	.txl-busy::after,
	.txl-busy-dots i {
		animation: none;
	}
}

/* Diagnosezeilen duerfen umbrechen, Fehlermeldungen sind lang. */
.txl-defs dd {
	overflow-wrap: anywhere;
}

.txl-stack-amount.is-muted {
	color: var(--txl-muted);
	font-size: 20px;
	font-weight: 600;
}

/* ----- Belegdiagnose (ab 0.9.2) ----- */

.txl-diag {
	margin-top: 12px;
	display: grid;
	gap: 8px;
}

.txl-diag-row {
	display: grid;
	gap: 2px;
	padding: 10px 12px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
	font-size: 13px;
}

.txl-diag-row span {
	color: var(--txl-muted);
}

.txl-diag-row em {
	color: var(--txl-warn);
	font-style: normal;
}

.txl-diag-row.has-note {
	box-shadow: inset 3px 0 0 var(--txl-warn);
}

/* ----- Rechtematrix (ab 0.9.5) ----- */

.txl-capgrid {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 10px 0;
}

.txl-cap {
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.txl-cap.is-on {
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
}

.txl-cap.is-off {
	background: var(--txl-danger-soft);
	color: var(--txl-danger);
}

.txl-chat-tools {
	display: flex;
	justify-content: flex-end;
}

/* Familie: Personenmerkmal und Verwaltungsliste im Konto. */

.txl-pill-person {
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
}

.txl-members {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 10px 0 0;
}

.txl-member {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--txl-surface-2);
}

.txl-member.is-off {
	opacity: 0.55;
}

.txl-member-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.txl-member-meta {
	font-size: 12px;
	color: var(--txl-muted);
	overflow-wrap: anywhere;
}

.txl-btn-danger {
	color: var(--txl-danger);
	border-color: var(--txl-danger);
}

/* --------------------------------------------------------------------- */
/* Erstattungen                                                           */
/* --------------------------------------------------------------------- */

.txl-refund-note {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-warn-soft);
	color: var(--txl-warn);
}

.txl-refund-head {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
}

.txl-refund-line {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 8px 10px;
	margin-bottom: 6px;
	border: 0;
	border-radius: 10px;
	background: color-mix(in srgb, var(--txl-warn) 12%, transparent);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.txl-refund-line:last-child {
	margin-bottom: 0;
}

.txl-refund-line span {
	font-size: 13px;
	opacity: .85;
}

.txl-refund-rest {
	margin: 6px 0 0;
	font-size: 13px;
	opacity: .85;
}

.txl-stack-refund {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--txl-muted);
}

.txl-pill-refund {
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
}

.txl-pill-refund.is-overdue {
	background: var(--txl-warn-soft);
	color: var(--txl-warn);
}

.txl-refund-edit {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
}

.txl-refund-edit > summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
}

.txl-refund-edit .txl-grid {
	margin-top: 10px;
}

.txl-pill-noai {
	background: var(--txl-danger-soft);
	color: var(--txl-danger);
}

.txl-aiswitch {
	margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Vertraege und Versicherungen (ab 0.14.0)
   -------------------------------------------------------------------------- */

/* Fuenf Ziele statt vier: die Beschriftung muss schrumpfen duerfen, sonst
   bricht die Leiste auf schmalen Geraeten um. */
.txl-nav button {
	min-width: 0;
}

.txl-nav button span:not([class]) {
	line-height: 1;
}

@media (max-width: 380px) {
	.txl-nav button {
		font-size: 10px;
	}
}

.txl-contract {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	margin-bottom: 10px;
	padding: 14px 16px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius);
	background: var(--txl-surface);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.txl-contract.is-off {
	opacity: .6;
}

.txl-contract-head {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 4px;
}

.txl-contract-title {
	font-size: 16px;
}

.txl-contract-meta {
	margin: 0;
	color: var(--txl-muted);
	font-size: 13px;
}

.txl-contract-notice {
	margin: 4px 0 0;
	color: var(--txl-warn);
	font-size: 13px;
	font-weight: 600;
}

.txl-due-note {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
}

.txl-due-head {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
}

.txl-due-line {
	margin: 0 0 2px;
	font-size: 13px;
}

/* Befunde der Pruefung. Warnung und Hinweis muessen sich auf einen Blick
   unterscheiden, sonst liest man die Liste nicht zu Ende. */
.txl-finding {
	margin-bottom: 10px;
	padding: 12px 14px;
	border-left: 3px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
}

.txl-finding.is-warn {
	border-left-color: var(--txl-warn);
	background: var(--txl-warn-soft);
	color: var(--txl-warn);
}

.txl-finding.is-ok {
	border-left-color: var(--txl-brand);
}

.txl-finding strong {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
}

.txl-finding p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}

.txl-finding-source {
	margin-top: 6px !important;
	opacity: .75;
	font-size: 12px !important;
}

.txl-findings {
	margin-top: 18px;
}

.txl-findings-head,
.txl-gaps-head {
	margin: 0 0 10px;
	font-size: 15px;
}

/* Ab 0.54.1: Ueberschriften der Themen in der Vertragsliste, ueber die
   ganze Breite des Rasters. */
.txl-list > .txl-contract-group {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: 10px;
	font-size: 15px;
}

.txl-list > .txl-contract-group:first-child {
	padding-top: 0;
}

/* Ab 0.54.1: die Beitragsgeschichte im Vertragsblatt. */
.txl-premium-history {
	margin-top: 16px;
}

.txl-premium-entry {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 6px 0;
}

/* Ab 0.55.0: Vertragsuebersicht. Zwei Spalten am PC (links Abrechnungen,
   Fristen, Kosten; rechts die Zahlungen), am Handy untereinander. Jede
   Zeile oeffnet den Vertrag. */
.txl-overview {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 14px;
	align-items: start;
}

@media (min-width: 1024px) {
	.txl-overview {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.txl-overview-col {
	min-width: 0;
}

.txl-overview > .txl-warn {
	grid-column: 1 / -1;
	margin-bottom: 14px;
}

.txl-ov-sums {
	display: grid;
	gap: 6px;
	margin-bottom: 12px;
}

.txl-ov-sum {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	margin: 0;
	font-size: 14px;
}

.txl-ov-sum-label {
	flex: 0 0 auto;
	min-width: 84px;
	color: var(--txl-muted);
}

.txl-ov-sum-text {
	flex: 1 1 180px;
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.txl-ov-list,
.txl-ov-payments-list {
	display: grid;
	gap: 6px;
}

.txl-ov-row,
.txl-ov-payment {
	display: flex;
	width: 100%;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
	color: var(--txl-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.txl-ov-row {
	flex-direction: column;
	gap: 4px;
}

.txl-ov-row-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 12px;
}

.txl-ov-title {
	min-width: 0;
	font-size: 14px;
	overflow-wrap: anywhere;
}

.txl-ov-amount {
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.txl-ov-row:not(.is-firm) .txl-ov-amount {
	color: var(--txl-muted);
}

.txl-ov-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.txl-ov-detail,
.txl-ov-payment-text span {
	color: var(--txl-muted);
	font-size: 12px;
	overflow-wrap: anywhere;
}

.txl-ov-advice {
	align-self: flex-start;
	padding: 4px 8px;
	border-radius: 8px;
	background: var(--txl-warn-soft);
	color: var(--txl-warn);
	font-size: 13px;
	font-weight: 600;
}

.txl-ov-month {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 12px 0 6px;
	font-size: 14px;
}

.txl-dash-head + .txl-ov-month {
	margin-top: 0;
}

.txl-ov-month strong {
	font-variant-numeric: tabular-nums;
}

.txl-ov-payment {
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
}

.txl-ov-payment-date {
	flex: 0 0 48px;
	font-weight: 650;
	font-size: 14px;
}

.txl-ov-payment-text {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	line-height: 1.3;
}

.txl-ov-payment-text strong {
	font-size: 14px;
	overflow-wrap: anywhere;
}

.txl-ov-payment-amount {
	flex: 0 0 auto;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.txl-dash-figures.txl-ov-costs {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.txl-gaps {
	margin-top: 24px;
}

.txl-features {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 14px 0;
}

.txl-feature {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	color: var(--txl-muted);
}

.txl-feature input {
	margin-top: 2px;
}

/* ==========================================================================
   Belegbild (ab 0.18.0)
   ========================================================================== */

/* Der Knopf traegt das Bild. Ein <div> waere hier falsch: der Stapel wertet
   jeden Zeigerdruck ausserhalb eines Bedienelements als Wischbeginn, und dann
   wischt man die Karte weg, waehrend man das Bild ansehen will. */
.txl-preview {
	position: relative;
	display: block;
	width: 100%;
	margin: 2px 0 4px;
	padding: 0;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	background: var(--txl-bg-deep);
	overflow: hidden;
	cursor: zoom-in;
	-webkit-appearance: none;
	appearance: none;
}

.txl-preview:disabled {
	cursor: default;
}

.txl-preview img {
	display: block;
	width: 100%;
	/* Oben ausgerichtet: Kopfzeile, Haendler und Datum stehen auf fast jedem
	   Beleg oben. Mittig zugeschnitten sieht man die Mitte des Kassenzettels
	   und damit meist nichts Entscheidendes. */
	object-fit: cover;
	object-position: top center;
	background: #fff;
}

.txl-preview-card img {
	height: 150px;
}

.txl-preview-detail img {
	height: 190px;
}

.txl-preview-hint {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(11, 17, 28, .78);
	color: #e9eef7;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .01em;
}

.txl-preview-note {
	display: block;
	padding: 22px 14px;
	color: var(--txl-muted);
	font-size: 13px;
	text-align: center;
}

.txl-preview.is-empty {
	border-style: dashed;
}

/* Lupe.
   Feste Hoehe statt "so hoch wie der Inhalt": der Rahmen ist eine Spalte aus
   Kopf, Buehne, Bedienung und Fusszeile, und nur die Buehne darf sich
   dehnen. Vorher richtete sich die Hoehe nach dem Bild, und auf dem Telefon
   rutschten Bedienung und Fusszeile unter den unteren Bildschirmrand - ohne
   dass man dorthin scrollen konnte, weil die Buehne jede Wischgeste fuer das
   Verschieben des Bildes einbehielt. */
.txl-photo-sheet {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: min(900px, 100%);
	height: 92dvh;
	max-height: 92dvh;
	overflow: hidden;
}

/* dvh kennt nicht jeder Browser. vh ist der Rueckfall, auch wenn es die
   Adressleiste des Telefons mitzaehlt. */
@supports not (height: 92dvh) {
	.txl-photo-sheet {
		height: 88vh;
		max-height: 88vh;
	}
}

.txl-photo-sheet > h2,
.txl-photo-sheet > .txl-sheet-sub,
.txl-photo-actions,
.txl-photo-pager,
.txl-photo-foot {
	flex: 0 0 auto;
}

.txl-photo-stage {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	margin: 4px 0 12px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	background: var(--txl-bg-deep);
	overflow: hidden;
	/* Erst beim Zoomen faengt die Buehne die Geste ab. Bei 100 Prozent gibt
	   es nichts zu verschieben, und die Geste gehoert dem Blaettern und dem
	   Scrollen. */
	touch-action: pan-y;
}

.txl-photo-stage.is-zoomed {
	cursor: grab;
	touch-action: none;
}

.txl-photo-frame {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	transform-origin: center center;
	transition: transform .12s ease-out;
}

.txl-photo-img,
.txl-photo-canvas {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

.txl-photo-note {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0 16px;
	color: var(--txl-muted);
	font-size: 14px;
	text-align: center;
}

.txl-photo-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.txl-photo-zoom {
	min-width: 56px;
	color: var(--txl-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.txl-photo-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 10px;
}

.txl-photo-page {
	min-width: 120px;
	color: var(--txl-text);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.txl-photo-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding-top: 10px;
	border-top: 1px solid var(--txl-line);
}

@media (prefers-color-scheme: light) {
	.txl-preview-hint:where(:not([data-txl-theme="dark"], [data-txl-theme="dark"] *)) {
		background: rgba(17, 24, 39, .82);
	}
}

/* Hell von Hand gewählt (ab 0.47.0), dieselben Werte. */
.txl-preview-hint:where([data-txl-theme="light"], [data-txl-theme="light"] *) {
	background: rgba(17, 24, 39, .82);
}

/* ==========================================================================
   Vertragszuordnung, Nachtrag und Aufteilung (ab 0.20.0)
   ========================================================================== */

/* Zugeordneter Vertrag auf der Pruefen-Karte. Ruhig, weil es eine Auskunft
   ist und keine Frage. */
.txl-contract-link {
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
	font-size: 14px;
}

.txl-contract-link-line {
	margin: 0 0 4px;
	overflow-wrap: anywhere;
}

.txl-contract-link-why {
	margin: 0 0 6px;
	color: var(--txl-muted);
	font-size: 13px;
}

/* ----- Erstattungsschreiben verrechnen (ab 0.57.0) ----- */

.txl-refund-letter {
	margin-top: 10px;
	padding: 10px 12px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
	font-size: 14px;
	min-width: 0;
}

.txl-refund-letter-title {
	margin: 0 0 4px;
	font-size: 15px;
}

.txl-refund-letter-sum {
	margin: 0 0 8px;
	overflow-wrap: anywhere;
}

.txl-refund-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 8px 0;
	border-top: 1px solid var(--txl-line);
	min-width: 0;
}

.txl-refund-row-text {
	flex: 1 1 180px;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.txl-refund-row-why {
	flex: 1 1 100%;
	margin: 0;
	color: var(--txl-muted);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.txl-refund-row-controls {
	display: flex;
	gap: 8px;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
}

.txl-refund-cents {
	width: 7.5em;
	max-width: 100%;
	min-width: 0;
}

.txl-refund-search {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	margin-top: 8px;
}

.txl-refund-search .txl-field {
	flex: 1 1 200px;
	min-width: 0;
}

.txl-refund-from {
	display: block;
	margin-top: 4px;
	text-align: left;
}

.txl-item-amount.is-refund {
	color: var(--txl-brand-text);
}

.txl-premium-hint {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-top: 10px;
}

.txl-premium-hint p {
	margin: 0;
}

.txl-premium-hint .txl-btn {
	white-space: normal;
	text-align: left;
}

/* Vorschlag: das ist eine Frage, sie bekommt die Markenfarbe. */
.txl-contract-suggest {
	margin-top: 6px;
	padding: 10px 12px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
}

.txl-contract-suggest-head {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
}

.txl-contract-option {
	padding: 8px 0 0;
	border-top: 1px solid color-mix(in srgb, var(--txl-brand-text) 20%, transparent);
}

.txl-contract-option + .txl-contract-option {
	margin-top: 8px;
}

.txl-contract-option strong {
	display: block;
	font-size: 14px;
	overflow-wrap: anywhere;
}

.txl-contract-option p {
	margin: 2px 0 0;
	font-size: 13px;
	opacity: .9;
}

.txl-contract-option-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 8px;
}

.txl-policy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px dashed color-mix(in srgb, var(--txl-brand) 45%, transparent);
	border-radius: var(--txl-radius-sm);
	font-size: 14px;
}

.txl-policy-head {
	margin: 0;
	font-weight: 600;
}

.txl-policy-text {
	margin: 0;
	color: var(--txl-muted);
	font-size: 13px;
}

.txl-policy .txl-btn {
	max-width: 100%;
	white-space: normal;
}

.txl-policy-amend {
	display: block;
	margin-top: 4px;
	text-align: left;
	overflow-wrap: anywhere;
}

.txl-stack-split {
	overflow-wrap: anywhere;
}

.txl-quick-split {
	margin-top: 10px;
}

/* ----- Nachtrag ----- */

.txl-existing {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-left: 3px solid var(--txl-brand);
	border-radius: var(--txl-radius-sm);
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
}

.txl-existing-head {
	display: block;
	font-size: 15px;
}

.txl-existing-text {
	margin: 4px 0 0;
	font-size: 13px;
}

.txl-existing-row {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid color-mix(in srgb, var(--txl-brand-text) 20%, transparent);
}

.txl-existing-row strong {
	display: block;
	overflow-wrap: anywhere;
}

.txl-existing-row p {
	margin: 2px 0 8px;
	font-size: 13px;
}

.txl-existing-new,
.txl-contract-amend-link {
	display: block;
	margin: 0 0 14px;
}

.txl-contract-amend-link {
	margin: 14px 0 8px;
}

.txl-amend {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.txl-amend-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
	cursor: pointer;
}

.txl-amend-row input {
	flex: none;
	margin-top: 3px;
}

.txl-amend-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 14px;
}

.txl-amend-values {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	color: var(--txl-muted);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.txl-amend-old {
	text-decoration: line-through;
	text-decoration-color: color-mix(in srgb, var(--txl-muted) 60%, transparent);
}

.txl-contract-option .txl-contract-yes {
	color: var(--txl-brand-text);
	border-color: color-mix(in srgb, var(--txl-brand) 45%, transparent);
}

.txl-amend-new {
	color: var(--txl-text);
	font-weight: 600;
}

.txl-amend-issues {
	margin-top: 14px;
}

/* ----- Aufteilung ----- */

.txl-split-edit {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
}

.txl-split-edit > summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
}

.txl-split-edit > .txl-field {
	margin-top: 10px;
}

.txl-split-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}

/* Eine Zeile je Person: Haken, Name, Prozent, Betrag. Das Raster haelt die
   Spalten auch auf 390 Pixeln untereinander buendig. */
.txl-split-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 4.6em auto 5.6em;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 14px;
}

.txl-split-row.is-fixed {
	grid-template-columns: minmax(0, 1fr) auto 5.6em;
}

.txl-split-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.taxletic input.txl-split-input {
	padding: 8px 8px;
	text-align: right;
}

.txl-split-unit {
	color: var(--txl-muted);
}

.txl-split-amount,
.txl-split-percent {
	color: var(--txl-muted);
	font-size: 13px;
	text-align: right;
	white-space: nowrap;
}

.txl-split-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	margin-top: 6px;
}

.txl-split-foot[hidden] {
	display: none;
}

.txl-split-sum {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
}

.txl-split-sum.is-off {
	color: var(--txl-warn);
}

.txl-amend-empty {
	font-style: italic;
}

/* ==========================================================================
   Startseite (ab 0.21.0): Fristen, Ausgabenring, Verrechnung, Umsatzgrenze
   ========================================================================== */

/* Farbplätze für den Ring. Feste Reihenfolge, geprüft auf Farbfehlsichtigkeit
   gegen die Kartenfläche beider Themen (Dunkel #1a2334, Hell #ffffff). Die
   Farbe hängt an der Kostenstelle, nicht am Rang. Platz 0 ist "Übrige" und
   bekommt bewusst keine Buntfarbe. Im hellen Thema liegen drei Plätze unter
   3:1 Kontrast; deshalb nennt die Legende immer Betrag und Anteil. */
.taxletic {
	--txl-slot-0: #6b7a92;
	--txl-slot-1: #3987e5;
	--txl-slot-2: #d95926;
	--txl-slot-3: #199e70;
	--txl-slot-4: #c98500;
	--txl-slot-5: #d55181;
	--txl-slot-6: #008300;
}

@media (prefers-color-scheme: light) {
	.taxletic:where(:not([data-txl-theme="dark"], [data-txl-theme="dark"] *)) {
		--txl-slot-0: #9aa6b8;
		--txl-slot-1: #2a78d6;
		--txl-slot-2: #eb6834;
		--txl-slot-3: #1baf7a;
		--txl-slot-4: #eda100;
		--txl-slot-5: #e87ba4;
		--txl-slot-6: #008300;
	}
}

/* Hell von Hand gewählt (ab 0.47.0), dieselben Werte. */
.taxletic:where([data-txl-theme="light"], [data-txl-theme="light"] *) {
	--txl-slot-0: #9aa6b8;
	--txl-slot-1: #2a78d6;
	--txl-slot-2: #eb6834;
	--txl-slot-3: #1baf7a;
	--txl-slot-4: #eda100;
	--txl-slot-5: #e87ba4;
	--txl-slot-6: #008300;
}

.txl-dash {
	margin-top: 22px;
}

.txl-dash-filters select {
	flex: 0 1 auto;
}

.txl-dash-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin-bottom: 12px;
}

.txl-dash-head .txl-card-title {
	margin: 0;
}

.txl-dash-sub {
	color: var(--txl-muted);
	font-size: 13px;
}

.txl-dash-card .txl-hint {
	margin: 10px 0 0;
}

.txl-dash-month {
	max-width: 100%;
	padding: 6px 30px 6px 10px;
	font-size: 13px;
	border-radius: 999px;
}

/* ----- Fristen ----- */

.txl-deadline-list {
	display: grid;
	gap: 6px;
}

.txl-deadline {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
	color: var(--txl-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.txl-deadline + .txl-deadline,
.txl-deadline + .txl-deadline-list {
	margin-top: 6px;
}

.txl-deadline.is-urgent {
	border-color: color-mix(in srgb, var(--txl-warn) 55%, transparent);
	background: var(--txl-warn-soft);
}

.txl-deadline-date {
	display: flex;
	flex: 0 0 56px;
	flex-direction: column;
	align-items: center;
	line-height: 1.15;
}

.txl-deadline-date strong {
	font-size: 15px;
}

.txl-deadline-date span {
	color: var(--txl-muted);
	font-size: 11px;
}

.txl-deadline-text {
	display: flex;
	min-width: 0;
	flex-direction: column;
	line-height: 1.3;
}

.txl-deadline-text strong {
	font-size: 14px;
	overflow-wrap: anywhere;
}

.txl-deadline-text span {
	color: var(--txl-muted);
	font-size: 12px;
}

.txl-dash-deadlines > .txl-linkish {
	margin-top: 8px;
}

/* ----- Ausgabenring ----- */

.txl-ring {
	display: grid;
	grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
	align-items: center;
	gap: 16px;
}

@media (max-width: 420px) {
	.txl-ring {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}
}

.txl-ring-figure {
	position: relative;
	width: 100%;
	max-width: 150px;
	aspect-ratio: 1;
}

.txl-ring-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.txl-ring-track {
	fill: none;
	stroke: var(--txl-surface-2);
}

.txl-ring-arc {
	fill: none;
	transition: opacity .15s ease;
	cursor: pointer;
}

.txl-ring-arc.is-dim {
	opacity: .3;
}

.txl-ring-center {
	position: absolute;
	inset: 22%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.15;
	pointer-events: none;
}

.txl-ring-center strong {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.txl-ring-center span {
	color: var(--txl-muted);
	font-size: 11px;
	overflow-wrap: anywhere;
}

.txl-ring-legend {
	display: grid;
	width: 100%;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.txl-ring-item {
	display: grid;
	grid-template-columns: 10px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px;
	padding: 4px 6px;
	border-radius: 8px;
	font-size: 13px;
	cursor: default;
}

.txl-ring-item.is-active,
.txl-ring-item:focus-visible {
	background: var(--txl-surface-2);
	outline: none;
}

.txl-ring-swatch {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--txl-slot-0);
}

.txl-ring-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.txl-ring-value {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.txl-ring-share {
	min-width: 44px;
	color: var(--txl-muted);
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.txl-ring-arc.txl-slot-0 { stroke: var(--txl-slot-0); }
.txl-ring-arc.txl-slot-1 { stroke: var(--txl-slot-1); }
.txl-ring-arc.txl-slot-2 { stroke: var(--txl-slot-2); }
.txl-ring-arc.txl-slot-3 { stroke: var(--txl-slot-3); }
.txl-ring-arc.txl-slot-4 { stroke: var(--txl-slot-4); }
.txl-ring-arc.txl-slot-5 { stroke: var(--txl-slot-5); }
.txl-ring-arc.txl-slot-6 { stroke: var(--txl-slot-6); }

.txl-ring-swatch.txl-slot-1 { background: var(--txl-slot-1); }
.txl-ring-swatch.txl-slot-2 { background: var(--txl-slot-2); }
.txl-ring-swatch.txl-slot-3 { background: var(--txl-slot-3); }
.txl-ring-swatch.txl-slot-4 { background: var(--txl-slot-4); }
.txl-ring-swatch.txl-slot-5 { background: var(--txl-slot-5); }
.txl-ring-swatch.txl-slot-6 { background: var(--txl-slot-6); }

.txl-dash-figures {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 12px;
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--txl-line);
	font-size: 14px;
}

.txl-dash-figures dt {
	color: var(--txl-muted);
}

.txl-dash-figures dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/* ----- Verrechnungskonto ----- */

.txl-settle {
	display: grid;
	gap: 6px;
}

.txl-settle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
}

.txl-settle-who,
.txl-settle-balance {
	display: flex;
	min-width: 0;
	flex-direction: column;
	line-height: 1.3;
}

.txl-settle-who strong {
	overflow-wrap: anywhere;
}

.txl-settle-who span,
.txl-settle-balance span {
	color: var(--txl-muted);
	font-size: 12px;
}

.txl-settle-balance {
	align-items: flex-end;
	text-align: right;
}

.txl-settle-balance strong {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.txl-settle-result {
	margin: 10px 0 0;
	font-weight: 600;
}

/* Ausgleich buchen (ab 0.26.0) */

.txl-settle-open {
	margin-top: 10px;
}

.txl-settle-open .txl-settle-result {
	margin-top: 0;
}

.txl-settle-book {
	margin-top: 8px;
}

.txl-settle-form {
	display: grid;
	gap: 8px;
	margin-top: 8px;
	padding: 10px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
}

.txl-settle-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.txl-settle-fields input {
	min-width: 0;
	flex: 1 1 130px;
}

.txl-settle-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.txl-settle-error {
	margin: 8px 0 0;
	color: var(--txl-danger);
	font-size: 13px;
}

.txl-settle-booked {
	margin-top: 14px;
}

.txl-settle-booked h3 {
	margin: 0 0 6px;
	color: var(--txl-muted);
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
}

.txl-settle-booked-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
}

.txl-settle-booked-row + .txl-settle-booked-row {
	margin-top: 6px;
}

.txl-settle-booked-row .txl-settle-who strong {
	font-size: 14px;
	font-weight: 600;
}

.txl-settle-booked-row button {
	flex: 0 0 auto;
}

/* ----- Umsatzgrenze ----- */

.txl-meter + .txl-meter {
	margin-top: 12px;
}

.txl-meter-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 10px;
	font-size: 13px;
}

.txl-meter-state {
	color: var(--txl-muted);
	font-variant-numeric: tabular-nums;
}

.txl-meter-track {
	height: 8px;
	margin-top: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--txl-surface-2);
}

.txl-meter-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--txl-brand);
}

.txl-meter.is-near .txl-meter-fill,
.txl-meter.is-close .txl-meter-fill {
	background: var(--txl-warn);
}

.txl-meter.is-near .txl-meter-state,
.txl-meter.is-close .txl-meter-state {
	color: var(--txl-warn);
	font-weight: 600;
}

.txl-meter.is-over .txl-meter-fill {
	background: var(--txl-danger);
}

.txl-meter.is-over .txl-meter-state {
	color: var(--txl-danger);
	font-weight: 600;
}

/* ==========================================================================
   Grosse Bildschirme (ab 0.24.0)

   Die App war bis 0.23.0 eine Handy-Spalte, auch am PC. Ab 1024 Pixel
   Breite wird die Navigation zur Leiste am linken Rand, der Inhalt darf
   breiter werden, und die Startseite stellt Erfassen und Uebersicht
   nebeneinander. Am Handy aendert sich nichts.
   ========================================================================== */

@media (min-width: 1024px) {
	.txl-app {
		max-width: 1360px;
		padding-left: 124px;
		padding-right: 32px;
		padding-bottom: 48px;
	}

	.txl-nav {
		left: 20px;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		flex-direction: column;
		width: 84px;
		gap: 6px;
		padding: 8px;
		border-radius: 22px;
	}

	.txl-nav button {
		padding: 12px 4px;
		font-size: 11px;
	}

	.txl-nav button svg {
		width: 23px;
		height: 23px;
	}

	.txl-navbadge {
		left: auto;
		right: 8px;
		margin-left: 0;
	}

	.txl-topbar {
		padding-top: 18px;
	}

	.txl-greeting h1 {
		font-size: 34px;
	}

	/* Startseite: links Erfassen, rechts die Uebersicht. */
	.txl-view[data-view="capture"] {
		display: grid;
		grid-template-columns: minmax(340px, 440px) minmax(0, 1fr);
		/* Ab 0.56.0: „Zu tun“ fliesst links unter das Erfassen (und unter den
		   Testbanner, wenn er da ist). Die Uebersicht rechts reicht ueber
		   drei Zeilen, die letzte dehnbar - sonst schoebe ihre Hoehe eine
		   Luecke zwischen Erfassen und „Zu tun“. Eine feste Flaeche fuer
		   „Zu tun“ gibt es bewusst nicht: mit Testbanner rutschte das
		   Erfassen eine Zeile tiefer, und „Zu tun“ laege darueber. */
		grid-template-areas:
			"greeting greeting"
			"stats stats"
			"capture dash"
			". dash"
			". dash";
		grid-template-rows: auto auto auto auto 1fr;
		column-gap: 28px;
		align-items: start;
		min-height: 0;
	}


	.txl-view[data-view="capture"] > .txl-greeting { grid-area: greeting; }
	.txl-view[data-view="capture"] > .txl-stats { grid-area: stats; }
	.txl-view[data-view="capture"] > .txl-testbanner,
	.txl-view[data-view="capture"] > .txl-capture,
	.txl-view[data-view="capture"] > .txl-pages,
	.txl-view[data-view="capture"] > .txl-crop,
	.txl-view[data-view="capture"] > .txl-form { grid-column: capture; }
	.txl-view[data-view="capture"] > .txl-dash {
		grid-area: dash;
		margin-top: 0;
	}

	/* Am Handy klebt der Aufnahmeblock unten (Daumen); am PC steht er oben. */
	.txl-view[data-view="capture"] > .txl-capture {
		margin-top: 0;
	}

	.txl-view[data-view="capture"] {
		min-height: 0;
	}

	/* Sichtbare Kacheln fuellen die Breite; ausgeblendete lassen keine Luecke. */
	.txl-stats {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 12px;
	}

	.txl-stat-value {
		font-size: 26px;
	}

	/* Uebersichtskarten der Startseite zu zweit nebeneinander. */
	.txl-dash {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		align-items: start;
	}

	.txl-dash > .txl-dash-filters,
	.txl-dash > .txl-chips {
		grid-column: 1 / -1;
	}

	.txl-dash > .txl-dash-card {
		margin: 0;
		container-type: inline-size;
	}

	/* In einer schmalen Karte stapelt sich der Ausgabenring wie am Handy. */
	@container (max-width: 440px) {
		.txl-ring {
			grid-template-columns: minmax(0, 1fr);
			justify-items: center;
		}
	}

	/* Listen zu zweit, damit die Breite nicht leer bleibt. */
	.txl-view[data-view="list"] .txl-list,
	.txl-view[data-view="contracts"] .txl-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.txl-view[data-view="list"] .txl-list > *,
	.txl-view[data-view="contracts"] .txl-list > * {
		margin: 0;
	}

	/* Pruefen-Stapel und Konto bleiben lesbar schmal. */
	.txl-view[data-view="review"] > *,
	.txl-view[data-view="account"] > * {
		max-width: 760px;
	}

	.txl-sheet {
		align-items: center;
	}

	.txl-sheet-inner {
		width: min(760px, 100%);
		border-radius: 24px;
	}
}

@media (min-width: 1400px) {
	.txl-view[data-view="capture"] {
		grid-template-columns: minmax(380px, 480px) minmax(0, 1fr);
	}
}

/* ==========================================================================
   Rechnungen (ab 0.24.0)
   ========================================================================== */

.txl-inv-entry {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-color: var(--txl-brand-soft);
	background:
		radial-gradient(60% 120% at 100% 0%, rgba(139, 92, 246, .16), transparent 70%),
		var(--txl-surface);
}

.txl-inv-entry .txl-card-title {
	margin-bottom: 4px;
}

.txl-inv-entry .txl-hint {
	margin: 0;
}

.txl-inv-entry-text {
	flex: 1 1 240px;
}

.txl-inv {
	position: relative;
}

.txl-inv.is-busy::after {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 16px;
	background: rgba(0, 0, 0, .04);
	pointer-events: none;
}

.txl-inv-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	font-size: 12px;
	color: var(--txl-muted);
}

.txl-inv-crumb {
	border: 0;
	background: transparent;
	color: var(--txl-muted);
	font: inherit;
	font-size: 12px;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.txl-inv-crumb.is-current {
	color: var(--txl-text);
	text-decoration: none;
	cursor: default;
}

.txl-inv-head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 20px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.txl-inv-head-row .txl-greeting {
	margin-bottom: 0;
}

.txl-inv-head-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.txl-inv-head-actions .txl-btn {
	width: auto;
}

.txl-inv-warn {
	margin-bottom: 14px;
}

.txl-inv-warn ul {
	margin: 6px 0 0 18px;
	padding: 0;
}

.txl-inv-link {
	border: 0;
	background: transparent;
	color: var(--txl-brand-text);
	font: inherit;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.txl-inv-subline {
	margin: -4px 0 14px;
}

/* Kennzahlen */

.txl-inv-kpis {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

.txl-inv-kpi {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface);
	border: 1px solid var(--txl-line);
	min-width: 0;
}

.txl-inv-kpi > * {
	min-width: 0;
}

.txl-inv-kpi-label {
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--txl-muted);
	overflow-wrap: anywhere;
	hyphens: auto;
}

.txl-inv-kpi-value {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.txl-inv-kpi-sub {
	font-size: 12px;
	color: var(--txl-muted);
	overflow-wrap: anywhere;
}

.txl-inv-kpi.is-open .txl-inv-kpi-value { color: var(--txl-brand-text); }
.txl-inv-kpi.is-danger { border-color: rgba(248, 113, 113, .45); }
.txl-inv-kpi.is-danger .txl-inv-kpi-value { color: var(--txl-danger); }
.txl-inv-kpi.is-warn .txl-inv-kpi-value { color: var(--txl-warn); }

/* Entwuerfe (ab 0.50.0) */

.txl-inv-drafts {
	margin-bottom: 16px;
}

.txl-inv-drafts-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.txl-inv-drafts-head .txl-card-title {
	margin: 0;
}

.txl-inv-drafts-head .txl-btn {
	width: auto;
}

.txl-inv-draftlist {
	display: grid;
	gap: 8px;
	margin-top: 10px;
}

.txl-inv-draft {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
	padding: 10px 10px 10px 14px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface);
	border: 1px dashed var(--txl-line);
	min-width: 0;
}

.txl-inv-draft.is-test {
	border-color: var(--txl-warn);
}

.txl-inv-draft-open.is-static {
	cursor: default;
}

.txl-inv-drafts-more {
	justify-self: start;
	font-size: 13px;
}

.txl-inv-draft-open {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"customer amount"
		"meta meta"
		"missing missing";
	gap: 2px 10px;
	border: 0;
	background: transparent;
	color: var(--txl-text);
	font: inherit;
	text-align: left;
	padding: 0;
	cursor: pointer;
	min-width: 0;
}

.txl-inv-draft-open:hover .txl-inv-draft-customer {
	color: var(--txl-brand-text);
}

.txl-inv-draft-customer {
	grid-area: customer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.txl-inv-draft-amount {
	grid-area: amount;
	font-weight: 600;
	white-space: nowrap;
}

.txl-inv-draft-meta {
	grid-area: meta;
	font-size: 12px;
	color: var(--txl-muted);
	overflow-wrap: anywhere;
}

.txl-inv-draft-missing {
	grid-area: missing;
	font-size: 12px;
}

.txl-inv-draft-missing.is-missing { color: var(--txl-warn); }
.txl-inv-draft-missing.is-ready { color: var(--txl-brand-text); }

.txl-inv-draft-delete.txl-btn {
	width: auto;
}

.txl-inv-draft-confirm {
	grid-column: 1 / -1;
	padding-top: 8px;
	border-top: 1px solid var(--txl-line);
	font-size: 13px;
}

.txl-inv-draft-confirm p {
	margin: 0 0 8px;
}

.txl-inv-leave .txl-inv-actions {
	margin-top: 10px;
}

@media (max-width: 639px) {
	.txl-inv-draft {
		grid-template-columns: minmax(0, 1fr);
	}

	.txl-inv-draft-customer {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.txl-inv-draft-delete.txl-btn {
		justify-self: start;
	}
}

/* Filter */

.txl-inv-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.txl-inv-filters .txl-search {
	flex: 1 1 220px;
	margin: 0;
}

.txl-inv-filters .txl-chips {
	margin: 0;
}

.txl-inv-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--txl-muted);
	cursor: pointer;
}

/* Liste als Tabelle (gross) oder Karten (klein) */

.txl-inv-table {
	display: grid;
	gap: 8px;
}

.txl-inv-table .txl-inv-th {
	display: none;
}

.txl-inv-tr {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"no amount"
		"customer state"
		"period due";
	gap: 4px 12px;
	align-items: center;
	padding: 12px 14px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface);
	border: 1px solid var(--txl-line);
	color: var(--txl-text);
	text-align: left;
	font: inherit;
	cursor: pointer;
	min-width: 0;
}

.txl-inv-row:hover {
	border-color: var(--txl-brand);
}

.txl-inv-row.is-static {
	cursor: default;
}

.txl-inv-row.is-static:hover {
	border-color: var(--txl-line);
}

.txl-inv-row.is-test {
	opacity: .65;
}

.txl-inv-tr > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.txl-inv-no { grid-area: no; }
.txl-inv-customer { grid-area: customer; color: var(--txl-muted); font-size: 13px; }
.txl-inv-date { display: none; }
.txl-inv-period { grid-area: period; color: var(--txl-muted); font-size: 12px; }
.txl-inv-amount { grid-area: amount; font-weight: 700; text-align: right; }
.txl-inv-state { grid-area: state; text-align: right; }
.txl-inv-due { grid-area: due; text-align: right; font-size: 12px; color: var(--txl-muted); }

.txl-inv-kind {
	font-style: normal;
	font-size: 11px;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 8px;
	background: var(--txl-danger-soft);
	color: var(--txl-danger);
}

.txl-inv-status {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	background: var(--txl-surface-2);
	color: var(--txl-muted);
	white-space: nowrap;
}

.txl-inv-status.is-issued,
.txl-inv-status.is-sent { background: var(--txl-brand-soft); color: var(--txl-brand-text); }
.txl-inv-status.is-paid { background: rgba(52, 211, 153, .18); color: #6ee7b7; }
.txl-inv-status.is-cancelled { background: var(--txl-danger-soft); color: var(--txl-danger); text-decoration: line-through; }
.txl-inv-status.is-overdue { background: var(--txl-danger-soft); color: var(--txl-danger); }
.txl-inv-status.is-template { background: var(--txl-warn-soft); color: var(--txl-warn); }

@media (prefers-color-scheme: light) {
	.txl-inv-status.is-paid:where(:not([data-txl-theme="dark"], [data-txl-theme="dark"] *)) { background: #d1fae5; color: #047857; }
}

/* Hell von Hand gewählt (ab 0.47.0), dieselben Werte. */
.txl-inv-status.is-paid:where([data-txl-theme="light"], [data-txl-theme="light"] *) { background: #d1fae5; color: #047857; }

@media (min-width: 900px) {
	.txl-inv-table {
		gap: 0;
		border: 1px solid var(--txl-line);
		border-radius: var(--txl-radius-sm);
		overflow: hidden;
		background: var(--txl-surface);
	}

	.txl-inv-table .txl-inv-th {
		display: grid;
		font-size: 11px;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--txl-muted);
		background: var(--txl-surface-2);
		cursor: default;
	}

	.txl-inv-tr {
		grid-template-columns: 1.1fr 1.6fr .8fr 1.5fr 1fr 1fr .9fr;
		grid-template-areas: none;
		gap: 12px;
		padding: 12px 16px;
		border: 0;
		border-bottom: 1px solid var(--txl-line);
		border-radius: 0;
		background: transparent;
	}

	.txl-inv-tr:last-child {
		border-bottom: 0;
	}

	.txl-inv-row:hover {
		background: var(--txl-surface-2);
	}

	.txl-inv-tr > span {
		grid-area: auto !important;
		display: block;
		text-align: left;
	}

	.txl-inv-tr > span.num,
	.txl-inv-amount {
		text-align: right !important;
	}

	.txl-inv-date {
		display: block;
	}

	.txl-inv-customer,
	.txl-inv-period,
	.txl-inv-due {
		font-size: 13px;
		color: var(--txl-text);
	}

	.txl-inv-state {
		text-align: left !important;
	}

	.txl-inv-table-items .txl-inv-tr {
		grid-template-columns: 44px 1fr 110px 130px 130px;
		cursor: default;
	}
}

/* Positionen in der Detailansicht */

.txl-inv-table-items .txl-inv-tr {
	cursor: default;
}

.txl-inv-table-items .txl-inv-pos { color: var(--txl-muted); }
.txl-inv-table-items .txl-inv-desc { white-space: normal; }
.txl-inv-table-items .txl-inv-desc small { display: block; color: var(--txl-muted); white-space: pre-line; }
.txl-inv-table-items .txl-inv-tr > span.num:last-child { font-weight: 700; }

@media (max-width: 899px) {
	.txl-inv-table-items .txl-inv-tr {
		grid-template-columns: 28px minmax(0, 1fr);
		grid-template-areas: none;
		gap: 2px 10px;
		align-items: start;
	}

	.txl-inv-table-items .txl-inv-pos {
		grid-row: 1 / span 4;
	}

	.txl-inv-table-items .txl-inv-desc,
	.txl-inv-table-items .txl-inv-tr > span.num {
		grid-column: 2;
		text-align: left;
	}

	.txl-inv-table-items .txl-inv-tr > span.num {
		font-size: 13px;
		color: var(--txl-muted);
	}

	.txl-inv-table-items .txl-inv-tr > span.num:last-child {
		color: var(--txl-text);
	}

	.txl-inv-table-items .txl-inv-tr > span.num:nth-child(3)::before { content: "Menge: "; }
	.txl-inv-table-items .txl-inv-tr > span.num:nth-child(4)::before { content: "Einzelpreis: "; }
	.txl-inv-table-items .txl-inv-tr > span.num:nth-child(5)::before { content: "Gesamt: "; }
}

/* Spalten Formular / Detail */

.txl-inv-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.txl-inv-main {
	display: grid;
	gap: 16px;
	min-width: 0;
}

.txl-inv-side {
	display: grid;
	gap: 16px;
	min-width: 0;
}

.txl-inv-card {
	margin: 0;
}

/* Unter 1024px stapeln die Karten in einer Spalte; das Protokoll
   rutscht dabei ans Ende, damit die Aktionen vor dem Kleingedruckten kommen. */
@media (max-width: 1023px) {
	.txl-inv-main,
	.txl-inv-side {
		display: contents;
	}

	.txl-inv-card.is-log {
		order: 10;
	}
}

@media (min-width: 1024px) {
	.txl-inv-columns {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 20px;
	}

	.txl-inv-kpis {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.txl-inv-kpi-value {
		font-size: 26px;
	}
}

.txl-inv-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 14px;
}

@media (max-width: 560px) {
	.txl-inv-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.txl-inv-grid .txl-field-wide {
	grid-column: 1 / -1;
}

.txl-inv-fieldhint {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--txl-muted);
}

.txl-inv-stack {
	display: grid;
	gap: 10px;
}

.txl-inv-actions {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.txl-inv-actions .txl-btn {
	width: 100%;
}

.txl-inv-actions.is-row {
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	margin-top: 4px;
}

.txl-inv-actions.is-secondary {
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

/* Die kurze Beschriftung gilt nur in der Speicherleiste am Handy. */
.txl-inv-label-short {
	display: none;
}

/* ----- Speicherleiste am Handy (ab 0.24.0) -----
   Im Formular liegen Speichern und Festschreiben in der Seitenleiste, und
   die steht am Handy unter Kopf, Positionen und Bausteinen — man scrollt
   also an der ganzen Rechnung vorbei, um sie zu speichern. Unter 1024
   Pixel wandern die beiden Knoepfe deshalb in eine feste Leiste knapp
   ueber der Navigation. Es sind dieselben Knoepfe, nur woanders: gesperrt
   waehrend des Speicherns bleiben sie damit von selbst. */

@media (max-width: 1023px) {
	.txl-inv-form {
		padding-bottom: 76px;
	}

	.txl-inv-savebar {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: calc(94px + env(safe-area-inset-bottom));
		z-index: 25;
		display: flex;
		gap: 8px;
		width: min(560px, calc(100% - 28px));
		margin: 0;
		padding: 8px;
		border-radius: 20px;
		background: color-mix(in srgb, var(--txl-surface) 94%, transparent);
		border: 1px solid var(--txl-line);
		box-shadow: var(--txl-shadow-lg);
		backdrop-filter: blur(14px);
	}

	.txl-inv-savebar .txl-btn {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		min-height: 46px;
		padding: 10px 12px;
	}

	.txl-inv-savebar .txl-inv-label-long {
		display: none;
	}

	.txl-inv-savebar .txl-inv-label-short {
		display: inline;
	}

	/* Der zweite Knopf ist ausgeblendet, solange eine Vorlage bearbeitet
	   wird. Dann fuellt der erste die Leiste allein. */
	.txl-inv-savebar .txl-btn[hidden] {
		display: none;
	}
}

.txl-inv-action {
	padding-top: 10px;
	border-top: 1px solid var(--txl-line);
}

.txl-inv-action summary {
	cursor: pointer;
	font-weight: 600;
	margin-bottom: 8px;
}

.txl-inv-inline {
	display: grid;
	gap: 8px;
}

/* Positionen im Formular */

.txl-inv-items {
	display: grid;
	gap: 10px;
}

.txl-inv-item {
	padding: 12px;
	border-radius: var(--txl-radius-sm);
	border: 1px solid var(--txl-line);
	background: var(--txl-bg-deep);
}

@media (prefers-color-scheme: light) {
	.txl-inv-item:where(:not([data-txl-theme="dark"], [data-txl-theme="dark"] *)) {
		background: var(--txl-surface-2);
	}
}

/* Hell von Hand gewählt (ab 0.47.0), dieselben Werte. */
.txl-inv-item:where([data-txl-theme="light"], [data-txl-theme="light"] *) {
	background: var(--txl-surface-2);
}

.txl-inv-item-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.txl-inv-item-head select {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
}

.txl-inv-item-pos {
	flex: 0 0 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--txl-brand-soft);
	color: var(--txl-brand-text);
	font-size: 12px;
	font-weight: 700;
}

.txl-inv-item-remove {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--txl-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.txl-inv-item-remove:hover {
	background: var(--txl-danger-soft);
	color: var(--txl-danger);
}

.txl-inv-item-body {
	display: grid;
	gap: 10px;
}

.txl-inv-item-desc {
	display: grid;
	gap: 8px;
}

.txl-inv-item-desc input {
	font-weight: 600;
}

.txl-inv-item-nums {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 10px;
}

.txl-inv-item-nums input {
	text-align: right;
}

.txl-inv-item-sum strong {
	display: block;
	padding: 10px 0 0;
	text-align: right;
	font-size: 16px;
}

@media (min-width: 900px) {
	.txl-inv-item-body {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}

	.txl-inv-item-nums {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.txl-inv-totals {
	margin: 14px 0 0 auto;
	max-width: 360px;
	padding-top: 10px;
	border-top: 2px solid var(--txl-brand);
}

.txl-inv-totals > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
}

.txl-inv-totals .is-gross {
	font-size: 17px;
	font-weight: 700;
}

.txl-inv-totals small {
	display: block;
	color: var(--txl-muted);
	margin-top: 4px;
}

/* Bausteine */

.txl-inv-blocks {
	display: grid;
	gap: 8px;
}

.txl-inv-block {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 12px;
	border-radius: var(--txl-radius-sm);
	border: 1px solid var(--txl-line);
	cursor: pointer;
}

.txl-inv-block.is-on {
	border-color: var(--txl-brand);
	background: var(--txl-brand-soft);
}

.txl-inv-block input {
	margin-top: 3px;
}

.txl-inv-block-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.txl-inv-block-text em {
	font-style: normal;
	color: var(--txl-muted);
	font-size: 12px;
}

.txl-inv-block-text > span {
	font-size: 13px;
	color: var(--txl-muted);
}

.txl-inv-blocktext {
	margin: 0 0 10px;
	font-size: 14px;
}

/* Detail */

.txl-inv-detail-status {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: -8px 0 14px;
}

.txl-inv-defs {
	margin: 0;
}

.txl-inv-log {
	display: grid;
	gap: 6px;
	font-size: 12px;
}

.txl-inv-log-row {
	display: grid;
	grid-template-columns: 78px 1fr;
	gap: 2px 10px;
}

.txl-inv-log-at { color: var(--txl-muted); }
.txl-inv-log-action { font-weight: 600; }
.txl-inv-log-text { grid-column: 2; color: var(--txl-muted); }

@media (min-width: 900px) {
	.txl-inv-log-row {
		grid-template-columns: 78px 150px 1fr;
	}

	.txl-inv-log-text {
		grid-column: auto;
	}
}

/* Stammdaten */

.txl-inv-tabs {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
	margin-bottom: 14px;
}

.txl-inv-tabs > button {
	white-space: nowrap;
	flex: 1 1 auto;
}

@media (min-width: 600px) {
	.txl-inv-tabs {
		display: inline-flex;
	}

	.txl-inv-tabs > button {
		flex: 0 0 auto;
		padding-left: 22px;
		padding-right: 22px;
	}
}

.txl-inv-masterlist {
	gap: 8px;
}

.txl-inv-masteritem {
	cursor: pointer;
}

.txl-inv-masteritem.is-editing {
	border-color: var(--txl-brand);
}

.txl-inv-masteritem.is-inactive {
	opacity: .55;
}

.txl-inv-masteritem .txl-item-meta {
	white-space: pre-line;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Vorschau im Blatt */

.txl-inv-sheet .txl-inv-preview {
	width: 100%;
	height: min(70vh, 1100px);
	border: 1px solid var(--txl-line);
	border-radius: 10px;
	background: #fff;
}

.txl-inv-sheet {
	width: min(900px, 100%);
}

/* ===================================================================== */
/* EÜR und Anlagenverzeichnis (ab 0.27.0)                                */
/* ===================================================================== */

.txl-euer-shell {
	display: grid;
	/* Ohne minmax(0, 1fr) waechst die Spalte mit ihrem breitesten Kind,
	   und lange Positionsbezeichnungen schieben die ganze Ansicht ueber
	   den Rand. Am Handy ist das eine waagerechte Scrollleiste. */
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.txl-euer-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.txl-euer-head h1 {
	margin: 0;
	font-size: 22px;
}

.txl-euer-year {
	flex: 0 0 auto;
	min-width: 110px;
}

/* Drei Reiter passen am Handy nicht in eine Zeile mit dem Innenabstand
   des Segments. Sie duerfen deshalb schrumpfen und notfalls umbrechen. */
.txl-euer-tabs {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
}

.txl-euer-tabs button {
	min-width: 0;
	flex: 1 1 auto;
	padding-left: 12px;
	padding-right: 12px;
}

.txl-euer-report,
.txl-euer-assets {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

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

.txl-euer-sum {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.txl-euer-sum strong {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.txl-euer-sum.is-result {
	padding-top: 8px;
	border-top: 1px solid var(--txl-line);
	font-size: 17px;
}

.txl-euer-actions {
	margin-top: 10px;
}

.txl-euer-table {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
}

.txl-euer-pos {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
}

/* Steuererklärung (ab 0.35.0): dieselbe Bauart wie der EÜR-Bereich. */
.txl-tax-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.txl-tax-year {
	min-width: 96px;
}

/* Hinweise und Chat (ab 0.36.0) */
.txl-tax-hint {
	padding: 10px 0;
	border-top: 1px solid var(--txl-border);
}

.txl-tax-hint:first-child {
	border-top: 0;
	padding-top: 0;
}

.txl-hint-title {
	margin: 0 0 4px;
	font-size: 15px;
}

.txl-tax-hint p {
	margin: 0 0 4px;
}

.txl-hint-practice {
	font-style: italic;
}

.txl-tax-turn {
	padding: 8px 10px;
	margin-bottom: 8px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
}

.txl-tax-turn p {
	margin: 2px 0 0;
	white-space: pre-wrap;
}

.txl-tax-turn.is-you {
	background: transparent;
	border: 1px solid var(--txl-border);
}

.txl-tax-turn.is-wait {
	opacity: 0.6;
}

.txl-tax-turn.is-error {
	background: var(--txl-danger-soft, var(--txl-surface-2));
}

.txl-tax-chat-form {
	margin-top: 10px;
}

/* Sammelbeleg (ab 0.33.0) */
.txl-collective-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.txl-collective-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
	margin: 12px 0;
}

.txl-collective-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
	cursor: pointer;
}

/* Schon gebucht: sichtbar, aber ohne Anspruch auf Aufmerksamkeit. */
.txl-collective-row.is-done {
	opacity: .55;
	cursor: default;
}

.txl-collective-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

.txl-collective-sum {
	flex: 0 0 auto;
	white-space: nowrap;
}

.txl-euer-pos.is-empty {
	opacity: .55;
}

/* Unterposition: gehört in die Zeile darüber und ist dort schon enthalten.
   Eingerückt und ruhiger, damit niemand sie für eine eigene Summe hält.
   Die Einrückung bleibt klein, damit am Handy nichts hinausläuft. */
.txl-euer-pos.is-sub {
	margin-left: 12px;
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--txl-line);
	font-size: .95em;
}

.txl-euer-pos.is-sub .txl-euer-line {
	font-style: italic;
	opacity: .8;
}

.txl-euer-pos.is-clickable {
	cursor: pointer;
}

.txl-euer-pos.is-clickable:hover,
.txl-euer-pos.is-clickable:focus-visible {
	background: var(--txl-surface-3, var(--txl-surface-2));
	outline: none;
	box-shadow: inset 0 0 0 1px var(--txl-line);
}

.txl-euer-line {
	flex: 0 0 auto;
	min-width: 62px;
	color: var(--txl-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.txl-euer-pos-main {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	line-height: 1.3;
}

.txl-euer-pos-main strong {
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.txl-euer-amount {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.txl-euer-asset-figures {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.3;
}

.txl-euer-asset-figures strong {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.txl-euer-notes ul {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 6px;
	font-size: 13px;
	color: var(--txl-muted);
}

.txl-euer-detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
	margin-top: 10px;
}

.txl-euer-detail-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
}

.txl-euer-detail-row strong {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Ab 0.52.0: Nutzungsdauer eines Arbeitsmittels unter seinem Beleg. */
.txl-tax-life {
	margin: -2px 0 8px;
	padding: 8px 10px;
}

/* Ab 0.52.0: der Satz, warum ein Beleg anders zählt, wird ganz gelesen.
   Ab 0.53.0 auch die Zeile einer Position: dort stehen die Teile je
   Person und der Höchstbetrag je Kind. */
.txl-item-meta.txl-tax-entry-hint,
.txl-item-meta.txl-tax-meta {
	white-space: normal;
	overflow: visible;
	overflow-wrap: anywhere;
}

.txl-euer-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.txl-euer-form select,
.txl-euer-form input,
.txl-euer-form textarea {
	max-width: 100%;
}

.txl-euer-plan-title {
	margin: 6px 0 0;
	font-size: 14px;
}

.txl-euer-plan {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4px;
}

.txl-euer-plan-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 10px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
	font-variant-numeric: tabular-nums;
}

.txl-euer-plan-row.is-current {
	box-shadow: inset 0 0 0 1px var(--txl-brand);
}

.txl-euer-lines {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.txl-euer-line-field input {
	max-width: 120px;
}

.txl-euer-remove[data-state="ask"] {
	color: var(--txl-danger);
}

@media (min-width: 1024px) {
	.txl-euer-shell {
		max-width: 900px;
	}
}

/* ===================================================================== */
/* Stapel-Erfassung (ab 0.28.0)                                          */
/* ===================================================================== */

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

.txl-batch-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
	max-height: 320px;
	overflow-y: auto;
}

.txl-batch-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
}

.txl-batch-row .txl-item-main strong {
	overflow-wrap: anywhere;
}

.txl-batch-row.is-done {
	opacity: .6;
}

.txl-batch-row.is-failed {
	box-shadow: inset 0 0 0 1px var(--txl-danger);
}

.txl-batch-row button {
	flex: 0 0 auto;
}

.txl-batch-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------------------------------------------------------------------- */
/* Kontoumsätze (ab 0.40.0)                                                 */
/*                                                                          */
/* Eine Buchung ist kein Beleg. Damit das auch beim Durchblättern klar      */
/* bleibt, tragen die Zeilen links einen Streifen in der Farbe ihres        */
/* Zustands: offen fällt auf, zugeordnet und erledigt treten zurück.        */
/* ---------------------------------------------------------------------- */

.txl-bank-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.txl-bank-row {
	border-left: 4px solid var(--txl-line);
}

.txl-bank-row.is-open {
	border-left-color: var(--txl-warn);
}

.txl-bank-row.is-matched {
	border-left-color: var(--txl-brand);
}

.txl-bank-row.is-ignored {
	border-left-color: var(--txl-line);
	opacity: 0.7;
}

.txl-bank-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.txl-bank-head > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.txl-bank-head strong {
	overflow-wrap: anywhere;
}

.txl-bank-amount {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.txl-bank-row.is-open .txl-bank-amount {
	color: var(--txl-warn);
}

.txl-bank-row.is-twin {
	box-shadow: inset 0 0 0 1px var(--txl-warn);
}

.txl-bank-picks {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 10px 0 0;
	max-height: 46vh;
	overflow-y: auto;
}

.txl-bank-pick {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-left: 3px solid transparent;
	border-radius: 12px;
	background: var(--txl-surface-2);
	color: var(--txl-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.txl-bank-pick.is-fit {
	border-left-color: var(--txl-brand);
}

.txl-bank-pick strong {
	overflow-wrap: anywhere;
}

.txl-bank-preview {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
	max-height: 40vh;
	overflow-y: auto;
}

.txl-bank-preview .txl-hint {
	margin: 0;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------- */
/* Drucken (ab 0.38.0)                                                      */
/*                                                                          */
/* Wer in Elster abtippt, hat das Fenster schon voll. Gedruckt wird         */
/* deshalb nur der Bogen selbst: keine Navigation, keine Knöpfe, keine      */
/* Farbflächen, die eine halbe Patrone kosten. Umgebrochen wird nicht       */
/* mitten in einer Anlage.                                                  */
/* ---------------------------------------------------------------------- */
@media print {
	.txl-nav,
	.txl-topbar,
	.txl-inv-head-actions,
	.txl-sheet,
	.txl-sheet-backdrop,
	[data-txl="modal"],
	.txl-btn {
		display: none !important;
	}

	body,
	.taxletic-body {
		background: #fff;
		color: #000;
	}

	.txl-card {
		background: #fff;
		border: 1px solid #999;
		box-shadow: none;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.txl-euer-pos {
		background: transparent;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* Leere Positionen braucht auf Papier niemand. */
	.txl-euer-pos.is-empty {
		display: none;
	}

	.txl-hint,
	.txl-item-meta {
		color: #333;
	}

	a[href]::after {
		content: "";
	}
}

/* ------------------------------------------------------------------ */
/* Zähler, Preise und Abschlag (ab 0.44.0)                             */
/* ------------------------------------------------------------------ */

.txl-supply {
	margin-top: 18px;
	min-width: 0;
}

.txl-forecast {
	margin-bottom: 12px;
	padding: 12px 14px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
}

.txl-forecast:empty {
	display: none;
}

.txl-forecast .txl-hint {
	margin: 0 0 8px;
}

.txl-forecast-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 0;
	border-top: 1px solid var(--txl-line);
	font-size: 13px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.txl-forecast-row strong {
	font-size: 14px;
}

.txl-meter {
	margin-bottom: 10px;
	padding: 10px 12px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	min-width: 0;
}

.txl-meter.is-off {
	opacity: 0.7;
}

/* Abwasser (ab 0.54.0): die Zaehler des Wasservertrags, nur zum Ansehen. */
.txl-meter-source {
	margin-bottom: 10px;
	padding: 10px 12px;
	border: 1px dashed var(--txl-line);
	border-radius: var(--txl-radius-sm);
	min-width: 0;
	overflow-wrap: anywhere;
}

.txl-meter-source .txl-hint {
	margin-top: 0;
}

.txl-meter-source .txl-btn {
	max-width: 100%;
	white-space: normal;
	text-align: left;
}

.txl-meter > strong {
	display: block;
	font-size: 14px;
	overflow-wrap: anywhere;
}

.txl-supply-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--txl-line);
	font-size: 13px;
	min-width: 0;
}

.txl-supply-line > span {
	flex: 1 1 200px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.txl-supply-form {
	margin: 8px 0 12px;
	padding: 10px 12px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
}

.txl-reading-entry .txl-btn {
	margin-top: 4px;
}

/* Vorschlag aus dem Familienkalender unter „Angaben“ (ab 0.48.0). */
.txl-tax-suggestion {
	display: grid;
	gap: 6px;
	justify-items: start;
	margin: 4px 0 14px;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--txl-brand) 40%, var(--txl-line));
	border-radius: var(--txl-radius-sm);
	background: var(--txl-brand-soft);
}

.txl-tax-suggestion p {
	margin: 0;
}

/* Prüfen-Karte: gelesen und bitte prüfen statt eines Prozentwerts (ab 0.56.0). */
.txl-stack-checks {
	display: grid;
	gap: 6px;
	margin: 2px 0 0;
}

.txl-stack-read {
	margin: 0;
	color: var(--txl-muted);
	font-size: 13px;
}

.txl-stack-check {
	margin: 0;
	padding: 8px 10px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-warn-soft);
	color: var(--txl-warn);
	font-size: 13px;
	line-height: 1.4;
}

.txl-stack-check.is-note {
	padding: 0;
	background: transparent;
	color: var(--txl-muted);
}

/* EÜR: offene Rechnungen und Übergaben an die Steuerberatung (ab 0.56.0). */
.txl-euer-open,
.txl-euer-handovers {
	display: grid;
	gap: 8px;
}

.txl-euer-open .txl-hint,
.txl-euer-handovers .txl-hint,
.txl-euer-handover-last {
	margin: 0;
}

.txl-euer-pos.is-overdue .txl-euer-line {
	color: var(--txl-warn);
	font-weight: 600;
}

.txl-euer-changes {
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	overflow-wrap: anywhere;
}

.txl-euer-handover-older summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--txl-muted);
}

.txl-euer-open .txl-btn,
.txl-euer-handovers .txl-btn {
	justify-self: start;
}

/* Startseite: was zu tun ist, vor den Auswertungen (ab 0.56.0). */
.txl-todo-list {
	display: grid;
	gap: 6px;
}

.txl-todo {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
	color: var(--txl-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.txl-todo.is-urgent {
	border-color: color-mix(in srgb, var(--txl-warn) 55%, transparent);
	background: var(--txl-warn-soft);
}

.txl-todo-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}

.txl-todo-text strong {
	overflow-wrap: anywhere;
}

.txl-todo-text small {
	color: var(--txl-muted);
	font-size: 12px;
}

.txl-todo-go {
	flex: 0 0 auto;
	color: var(--txl-muted);
	font-size: 20px;
	line-height: 1;
}

.txl-todo-slot > .txl-dash-card {
	margin-top: 14px;
}

/* Steuererklärung: zwei Hauptansichten, der Rest unter „Mehr“ (ab 0.56.0). */
.txl-tax-more > summary {
	list-style: none;
	cursor: pointer;
}

.txl-tax-more > summary::-webkit-details-marker {
	display: none;
}

/* Geschlossen ohne jede Ausdehnung - auch für Messungen. */
.txl-tax-more:not([open]) > .txl-tax-more-list {
	display: none;
}

/* Am Handy klappt die Liste als eigene Zeile auf; so kann sie nie über den
   Rand ragen, gleich wo der Knopf nach dem Umbruch steht. */
.txl-tax-more[open] {
	flex-basis: 100%;
}

.txl-tax-more-list {
	display: grid;
	margin-top: 6px;
	padding: 6px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface);
}

.txl-tax-more-item {
	padding: 10px 12px;
	border: 0;
	border-radius: var(--txl-radius-sm);
	background: transparent;
	color: var(--txl-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.txl-tax-more-item:hover,
.txl-tax-more-item:focus-visible,
.txl-tax-more-item.is-active {
	background: var(--txl-surface-2);
}

@media (min-width: 1024px) {
	.txl-tax-more {
		position: relative;
	}

	.txl-tax-more[open] {
		flex-basis: auto;
	}

	.txl-tax-more-list {
		position: absolute;
		z-index: 20;
		top: 100%;
		right: 0;
		min-width: 240px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	}
}

@media print {
	.txl-tax-more {
		display: none;
	}
}

/* --------------------------------------------------------------------- */
/* Korrigieren und löschen (ab 0.59.0)                                    */
/* --------------------------------------------------------------------- */

.txl-receipt-fix {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--txl-line);
}

.txl-receipt-fix .txl-hint {
	flex: 1 1 100%;
	margin: 0;
}

.txl-btn-danger-text {
	color: var(--txl-danger);
}

.txl-check {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 8px 0;
	cursor: pointer;
}

.txl-check input {
	width: 20px;
	height: 20px;
	margin: 0;
	flex: 0 0 auto;
}

fieldset.txl-field {
	border: 0;
	padding: 0;
	margin: 8px 0 0;
	min-width: 0;
}

fieldset.txl-field legend {
	font-size: 13px;
	color: var(--txl-muted);
	margin-bottom: 4px;
	padding: 0;
}

/* --------------------------------------------------------------------- */
/* Assistent (ab 0.60.0)                                                  */
/* --------------------------------------------------------------------- */

.txl-assistant-log {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 8px 0 12px;
}

.txl-assistant-msg {
	max-width: 92%;
	padding: 10px 12px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-surface-2);
	overflow-wrap: anywhere;
}

.txl-assistant-msg.is-user {
	align-self: flex-end;
	border: 1px solid var(--txl-line);
	background: transparent;
}

.txl-assistant-text {
	margin: 0;
	white-space: pre-wrap;
}

.txl-assistant-sources {
	margin: 8px 0 0;
	padding-left: 18px;
	font-size: 13px;
}

.txl-proposal {
	margin-top: 10px;
	padding: 10px 12px;
	border: 1px solid var(--txl-line);
	border-radius: var(--txl-radius-sm);
}

.txl-proposal ul {
	margin: 6px 0;
	padding-left: 18px;
}

.txl-proposal-source {
	display: block;
	font-size: 13px;
	overflow-wrap: anywhere;
}

.txl-proposal-state {
	margin: 6px 0 0;
	font-weight: 600;
}

.txl-assistant-note {
	margin-top: 10px;
}

.txl-assistant-sources a,
.txl-proposal-source {
	color: var(--txl-brand-text);
}

.txl-assistant-error {
	margin: 8px 0;
	padding: 10px 12px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-danger-soft);
	color: var(--txl-danger);
}

/* ==========================================================================
   Geldmonat (ab 0.61.0)
   Nur mit den Farbwerten der App, deshalb ohne eigene Regeln fuer hell und
   dunkel: die Werte wechseln mit.
   ========================================================================== */

.txl-budget-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin-bottom: 14px;
}

.txl-budget-period {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.txl-budget-step {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border: 1px solid var(--txl-line);
	border-radius: 12px;
	background: var(--txl-surface);
	color: var(--txl-text);
	font: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.txl-budget-period-label {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0 4px;
}

.txl-budget-period-label strong {
	font-size: 17px;
	white-space: nowrap;
}

.txl-budget-period-label span {
	color: var(--txl-muted);
	font-size: 13px;
}

.txl-budget-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.txl-budget-tools .txl-segment {
	margin-bottom: 0;
	max-width: 100%;
	flex-wrap: wrap;
}

.txl-budget-tools .txl-segment button {
	padding: 7px 14px;
}

.txl-budget-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 14px;
	align-items: start;
}

@media (min-width: 1024px) {
	.txl-budget-cols {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
}

.txl-budget-col {
	min-width: 0;
}

.txl-budget-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 140% at 100% 0%, var(--txl-brand-soft) 0%, transparent 60%),
		var(--txl-surface);
}

.txl-budget-kicker {
	margin: 0;
	color: var(--txl-muted);
	font-size: 14px;
	font-weight: 600;
}

.txl-budget-big {
	margin: 2px 0 14px;
	font-size: clamp(34px, 9vw, 46px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.txl-budget-bar {
	height: 10px;
	border-radius: 999px;
	background: var(--txl-surface-2);
	overflow: hidden;
}

.txl-budget-bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--txl-brand), var(--txl-brand-2));
	transition: width .4s ease;
}

.txl-budget-figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 16px;
	margin: 14px 0 0;
}

.txl-budget-figures div {
	min-width: 0;
}

.txl-budget-figures dt {
	color: var(--txl-muted);
	font-size: 13px;
}

.txl-budget-figures dd {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.txl-budget-figures [data-budget-sum="in"] {
	color: var(--txl-brand-text);
}

.txl-budget-variable {
	margin: 14px 0 0;
	padding: 10px 12px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-warn-soft);
	color: var(--txl-text);
	font-size: 14px;
}

.txl-budget-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.txl-budget-entry button,
.txl-budget-shared-row,
.txl-budget-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 4px;
	border: 0;
	border-bottom: 1px solid var(--txl-line);
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.txl-budget-shared-row,
.txl-budget-item {
	grid-template-columns: minmax(0, 1fr) auto;
}

.txl-budget-entry:last-child button,
.txl-budget-shared-row:last-child,
.txl-budget-item:last-child {
	border-bottom: 0;
}

.txl-budget-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 52px;
	padding: 4px 0;
	border-radius: 12px;
	background: var(--txl-surface-2);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.txl-budget-date strong {
	font-size: 14px;
}

.txl-budget-date span {
	color: var(--txl-muted);
	font-size: 12px;
}

.txl-budget-date.is-same {
	visibility: hidden;
}

.txl-budget-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.txl-budget-text strong {
	overflow-wrap: anywhere;
}

.txl-budget-text span {
	color: var(--txl-muted);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.txl-budget-amount {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.txl-budget-amount em {
	color: var(--txl-muted);
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
}

.txl-budget-entry.is-done button {
	opacity: .55;
}

.txl-budget-entry.is-in .txl-budget-amount {
	color: var(--txl-brand-text);
}

.txl-budget-entry.is-open .txl-budget-amount {
	color: var(--txl-warn);
}

.txl-budget-today {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0;
	color: var(--txl-brand-text);
	font-size: 13px;
	font-weight: 700;
}

.txl-budget-today::before,
.txl-budget-today::after {
	content: "";
	flex: 1 1 auto;
	height: 2px;
	border-radius: 2px;
	background: var(--txl-brand);
}

.txl-budget-today::before {
	flex: 0 0 12px;
}

.txl-budget-settle {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 12px;
	padding: 14px 16px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-brand-soft);
}

.txl-budget-settle span {
	color: var(--txl-brand-text);
	font-weight: 600;
}

.txl-budget-settle strong {
	font-size: 28px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.txl-budget-item.is-over {
	opacity: .5;
}

.txl-budget-items .txl-chips {
	margin-bottom: 8px;
}

.txl-budget-form .txl-grid {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.txl-budget-delete {
	margin-top: 14px;
}

.txl-budget-confirm {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border-radius: var(--txl-radius-sm);
	background: var(--txl-danger-soft);
}

.txl-budget-confirm p {
	flex: 1 1 100%;
	margin: 0;
	font-size: 14px;
}

.txl-dash-budget-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.txl-dash-budget-link > span:first-child {
	color: var(--txl-muted);
	font-size: 14px;
}

.txl-dash-budget-link strong {
	font-size: 30px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	margin-bottom: 4px;
}

.txl-dash-budget-line {
	color: var(--txl-muted);
	font-size: 14px;
}