/* ==========================================================================
   billcreator — Oberflaeche nach dem Designsystem (Dark Mode, Akzent #00D09B)
   Tokens aus tokens/colors.css, typography.css und spacing.css des Systems.
   ========================================================================== */

:root {
	/* base */
	--green-500: #00D09B; --green-400: #39E0B4; --green-600: #00B586; --green-900: #06231B;
	--ink-950: #0A0C0B; --ink-900: #101413; --ink-850: #141A18; --ink-800: #1E2523; --ink-700: #2A332F;
	--gray-400: #8FA09B; --gray-300: #B9C6C2; --gray-100: #F2F5F4;
	--red-400: #F26D6D; --amber-400: #F5B950; --blue-400: #8AA2DB;
	/* semantic */
	--surface-page: var(--ink-950); --surface-card: var(--ink-900); --surface-raised: var(--ink-850);
	--surface-glass: rgba(16,20,19,.30); --blur-glass: blur(9px) saturate(1.15);
	--border-default: var(--ink-800); --border-strong: var(--ink-700);
	--text-primary: var(--gray-100); --text-secondary: var(--gray-300); --text-muted: var(--gray-400);
	--accent: var(--green-500); --accent-hover: var(--green-400); --accent-pressed: var(--green-600); --on-accent: var(--green-900);
	--focus-ring: 0 0 0 2px rgba(var(--accent-rgb),.45);
	--glow-accent: 0 0 18px rgba(var(--accent-rgb),.55);
	--glow-border: 0 0 10px rgba(var(--accent-rgb),.65), 0 0 26px rgba(var(--accent-rgb),.3), inset 0 0 8px rgba(var(--accent-rgb),.22);
	--glow-white: 0 0 10px rgba(var(--secondary-rgb),.5), 0 0 26px rgba(var(--secondary-rgb),.22), inset 0 0 8px rgba(var(--secondary-rgb),.18);
	--success: var(--green-500); --danger: var(--red-400); --warning: var(--amber-400);
	/* type */
	--font-display: 'Space Grotesk', ui-sans-serif, sans-serif;
	--font-body: 'Instrument Sans', ui-sans-serif, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
	--text-display: 600 44px/1.1 var(--font-display); --ls-display: -0.03em;
	--text-h1: 600 28px/1.2 var(--font-display); --ls-h1: -0.02em;
	--text-h2: 600 20px/1.3 var(--font-display); --ls-h2: -0.01em;
	--text-body: 400 15px/1.55 var(--font-body);
	--text-body-strong: 600 15px/1.55 var(--font-body);
	--text-small: 400 13px/1.45 var(--font-body);
	--text-label: 500 12px/1.2 var(--font-body); --ls-label: 0.04em;
	--text-num: 500 15px/1.4 var(--font-body);
	--text-code: 400 13px/1.5 var(--font-mono);
	/* spacing */
	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
	--radius-s: 6px; --radius-m: 10px; --radius-l: 16px; --radius-tile: 22%;
	--shadow-card: 0 8px 30px rgba(0,0,0,.4); --shadow-pop: 0 20px 60px rgba(0,0,0,.5);
	/* abgeleitet, damit beide Modi dieselben Regeln nutzen */
	--accent-rgb: 0,208,155;
	--secondary-rgb: 242,245,244;
	--overlay-rgb: 10,12,11;
	--popover-bg: var(--ink-900);
	--modal-bg: var(--modal-bg);
	--tooltip-bg: rgba(6,35,27,.92);
	--tooltip-text: var(--green-500);
	--scrollbar: var(--ink-700);
	--disabled: var(--ink-700);
	--nav-glass: var(--nav-glass);
	--topbar-glass: var(--topbar-glass);
	--paper: #F5F5F2;
	--wave-alpha: 1;
	--scheme: dark;
	/* layout */
	--nav-width: 236px; --nav-width-collapsed: 74px;
	--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA09B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E");
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA09B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306231B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E");
	--icon-chevron-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300D09B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
	--icon-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='5' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='19' r='1.7'/%3E%3C/svg%3E");
	--icon-cloud-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z'/%3E%3C/svg%3E");
	--icon-paperclip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13'/%3E%3C/svg%3E");
}

/* Heller Modus, geschaltet ueber data-theme="light" auf <html>. Werte aus
   tokens/colors.css des Designsystems. */
[data-theme="light"] {
	--surface-page: #EEF2F1; --surface-card: #FFFFFF; --surface-raised: #F4F7F6;
	--surface-glass: rgba(255,255,255,.55);
	--border-default: #DCE4E1; --border-strong: #C3CFCA;
	--text-primary: #0F1513; --text-secondary: #33403B; --text-muted: #66756F;
	--accent: #00A87D; --accent-hover: #00B586; --accent-pressed: #008F6B; --on-accent: #FFFFFF;
	--focus-ring: 0 0 0 2px rgba(0,168,125,.4); --glow-accent: 0 0 18px rgba(0,168,125,.4);
	--glow-border: 0 0 10px rgba(0,168,125,.5), 0 0 26px rgba(0,168,125,.22), inset 0 0 8px rgba(0,168,125,.16);
	--glow-white: 0 0 10px rgba(15,21,19,.18), 0 0 26px rgba(15,21,19,.08), inset 0 0 8px rgba(15,21,19,.06);
	--success: #00A87D; --danger: #D9534F; --warning: #C98A1B; --blue-400: #5B78C7;
	--shadow-card: 0 8px 30px rgba(15,21,19,.10); --shadow-pop: 0 20px 60px rgba(15,21,19,.18);
	--accent-rgb: 0,168,125;
	--secondary-rgb: 15,21,19;
	--overlay-rgb: 238,242,241;
	--popover-bg: #FFFFFF;
	--modal-bg: rgba(255,255,255,.86);
	--tooltip-bg: rgba(255,255,255,.96);
	--tooltip-text: #008F6B;
	--scrollbar: #C3CFCA;
	--disabled: #C3CFCA;
	--nav-glass: rgba(238,242,241,.94);
	--topbar-glass: rgba(238,242,241,.85);
	--wave-alpha: .55;
	--scheme: light;
	--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366756F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E");
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366756F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E");
	--icon-chevron-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A87D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
}

/* entypo bleibt fuer die wenigen Glyphen, die das Skript noch setzt */
[class*="entypo-"]:before {
	font-family: 'entypo', sans-serif;
}

/* --------------------------------------------------------------------------
   Grundgeruest
   -------------------------------------------------------------------------- */

html {
	height: 100%;
	min-width: 320px;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	color-scheme: var(--scheme);
}
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	min-width: 320px;
	background: var(--surface-page);
	color: var(--text-primary);
	font: var(--text-body);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	overflow-x: hidden;
}
body * {
	box-sizing: border-box;
}
/* Breakpoints laufen ueber Media Queries: bis 770px Handy, bis 1179px Tablet.
   body:not(.static) in den Media Queries haelt die Spezifitaet der frueheren
   Klassen body.mobile und body.tablet, die JavaScript gesetzt hat. */
/* Keine sichtbaren Bildlaufleisten (Designsystem), gescrollt wird trotzdem */
::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}
* {
	scrollbar-width: none;
}
::selection {
	background: rgba(var(--accent-rgb),.35);
	color: var(--text-primary);
}
#bg-waves {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
}
h1 {
	font: var(--text-h1);
	letter-spacing: var(--ls-h1);
}
h2 {
	font: var(--text-h2);
	letter-spacing: var(--ls-h2);
}
h3 {
	font: 600 16px/1.3 var(--font-display);
	letter-spacing: -0.01em;
}
h4 {
	font: 600 14px/1.3 var(--font-display);
}
p {
	margin: 0 0 12px 0;
}
p:last-child {
	margin-bottom: 0;
}
strong {
	font-weight: 600;
}
a {
	cursor: pointer;
	text-decoration: none;
	color: var(--accent);
	transition: color .15s;
}
a:hover {
	color: var(--accent-hover);
}
ul, ol {
	padding-left: 24px;
}
.center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.clear {
	clear: both;
}
.inline {
	display: inline-block;
}
.euro:after {
	content: ' €';
}
.icon {
	flex-shrink: 0;
	vertical-align: middle;
}

@keyframes bc-glow-in {
	from { box-shadow: 0 0 0 rgba(var(--accent-rgb),0); }
	to { box-shadow: var(--glow-border); }
}
@keyframes bc-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes bc-pop-in {
	from { opacity: 0; transform: translateY(14px) scale(.97); }
	to { opacity: 1; transform: none; }
}
@keyframes bc-label-in {
	0% { opacity: 0; margin-top: 14px; }
	40% { opacity: 0; }
	100% { opacity: 1; margin-top: 0; }
}
/* Einblenden beim Laden: Widgets von gross nach klein, Seitenleiste von
   links, Titel und Aktionen von oben mit kurzem Versatz. */
@keyframes bc-widget-in {
	from { opacity: 0; transform: scale(1.2); }
	to { opacity: 1; transform: scale(1); }
}
@keyframes bc-slide-in {
	from { opacity: 0; transform: translateX(-32px); }
	to { opacity: 1; transform: none; }
}
@keyframes bc-drop-in {
	from { opacity: 0; transform: translateY(-16px); }
	to { opacity: 1; transform: none; }
}
@keyframes bc-charge {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

/* --------------------------------------------------------------------------
   Seitenleiste
   -------------------------------------------------------------------------- */

aside.nav {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: var(--nav-width);
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 600;
	transition: width .25s ease, transform .25s ease;
}
body.signed_out aside.nav {
	display: none;
}
@media (min-width: 771px) {
	body aside.nav {
		animation: bc-slide-in .5s cubic-bezier(.2,.8,.3,1) both;
	}
}

body.nav-collapsed aside.nav {
	width: var(--nav-width-collapsed);
}
@media (max-width: 1179px) {
	body:not(.static) aside.nav {
		width: var(--nav-width-collapsed);
	}
}

/* Auf dem Handy bleibt die Leiste wie auf dem Tablet als schmale Symbolleiste
   stehen (Designsystem), es gibt keine Kopfzeile mit Menue mehr. */
@media (max-width: 770px) {
	body:not(.static) aside.nav {
		width: var(--nav-width-collapsed);
		transform: none;
	}
}

aside .logo {
	display: flex;
	align-items: center;
	gap: 14px;
	white-space: nowrap;
	cursor: pointer;
	height: 42px;
}
.logo .app_icon {
	width: 42px;
	min-width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-m);
	overflow: hidden;
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
}
.logo .app_icon img {
	display: block;
	width: 100%;
	height: 100%;
}
.wordmark {
	font: 600 26px/1 var(--font-display);
	letter-spacing: -0.03em;
	white-space: nowrap;
}
.wordmark .bill {
	color: var(--text-primary);
}
.wordmark .creator {
	color: var(--accent);
}
body.nav-collapsed aside .wordmark,
body.nav-collapsed aside nav .title {
	display: none;
}
@media (max-width: 1179px) {
	body:not(.static) aside .wordmark,
	body:not(.static) aside nav .title {
		display: none;
	}
}

aside nav {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	margin: 0;
}
aside nav .nav_container {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
}
aside nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
aside nav ul li a {
	display: flex;
	align-items: center;
	gap: 14px;
	white-space: nowrap;
	color: var(--text-secondary);
	font: 500 14px/1 var(--font-body);
	transition: color .15s;
}
aside nav ul li.muted a {
	color: var(--text-muted);
}
aside nav ul li a:hover {
	color: var(--text-primary);
}
aside nav ul li.active a {
	color: var(--accent);
	font-weight: 600;
}
aside nav .nav_icon {
	position: relative;
	width: 42px;
	min-width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-m);
	color: inherit;
	transition: background .15s;
}
aside nav ul li.active .nav_icon {
	background: rgba(var(--accent-rgb),.08);
	color: var(--accent);
	animation: bc-glow-in .3s ease .4s both;
}
aside nav .nav_icon .trace {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}
aside nav .container {
	padding-top: 20px;
}
aside nav li.collapse_nav .icon {
	transition: transform .25s;
}
body.nav-collapsed aside nav li.collapse_nav .icon {
	transform: rotate(180deg);
}
@media (max-width: 1179px) {
	body:not(.static) aside nav li.collapse_nav {
		display: none;
	}
}
@media (max-width: 770px) {
	body:not(.static) aside nav li.collapse_nav {
		display: none;
	}
}

aside nav li.theme_toggle .icon-moon,
[data-theme="light"] aside nav li.theme_toggle .icon-sun {
	display: none;
}
[data-theme="light"] aside nav li.theme_toggle .icon-moon {
	display: block;
}
[data-theme="light"] #bg-waves {
	opacity: var(--wave-alpha);
}

/* --------------------------------------------------------------------------
   Seite, Kopfzeile (mobil und abgemeldet), Fuss
   -------------------------------------------------------------------------- */

.page {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	transition: margin-left .25s ease;
}
body.signed_in .page {
	margin-left: var(--nav-width);
}
body.signed_in.nav-collapsed .page {
	margin-left: var(--nav-width-collapsed);
}
@media (max-width: 1179px) {
	body.signed_in:not(.static) .page {
		margin-left: var(--nav-width-collapsed);
	}
}

@media (max-width: 770px) {
	body.signed_in:not(.static) .page {
		margin-left: var(--nav-width-collapsed);
	}
}

body.signed_out .page {
	margin-left: 0;
}
.page > header {
	display: none;
	position: sticky;
	top: 0;
	z-index: 500;
	padding: 12px 20px;
	background: var(--topbar-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border-bottom: 1px solid var(--border-default);
}
body.signed_out .page > header {
	display: block;
}
body.signed_out .page > header {
	background: transparent;
	border-bottom: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	position: relative;
	padding: 20px 24px;
}
body.signed_out .page > header .logo .app_icon {
	width: 42px;
	min-width: 42px;
	height: 42px;
}
body.signed_out .page > header .wordmark {
	font-size: 20px;
}
body.signed_out .page > section {
	display: flex;
	flex-direction: column;
	padding: 24px;
}
.page > header .wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.page > header .logo {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}
.page > header .logo .app_icon {
	width: 36px;
	min-width: 36px;
	height: 36px;
}
.page > header .wordmark {
	font-size: 22px;
}
header .account .bulb_navi {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 10px;
}
.page > section {
	flex: 1;
	padding: 28px 16px 28px 34px;
	min-height: 60vh;
	/* Raster im Inhalt richten sich nach der Breite dieses Bereichs, nicht
	   nach dem Fenster: mit ausgeklappter Navigation und offenem Agenten
	   bleibt weniger Platz (Container Query, siehe .widgets). */
	container: page / inline-size;
}
@media (max-width: 770px) {
	body:not(.static) .page > section {
		padding: 20px 16px 20px 0;
	}
}

.wrapper {
	position: relative;
	width: 100%;
}
.page footer {
	padding: 16px 36px 20px 24px;
	display: block;
}
@media (max-width: 770px) {
	body:not(.static) .page footer {
		padding: 16px 16px 16px 0;
	}
}

footer .wrapper {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
footer nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 16px;
}
footer nav ul li a,
footer .copyright p {
	font: var(--text-small);
	color: var(--text-muted);
	margin: 0;
}
footer nav ul li a:hover {
	color: var(--text-secondary);
}
footer .copyright {
	margin-left: auto;
}

/* --------------------------------------------------------------------------
   Kopf einer Ansicht: Tabs, Titel, Aktionen
   -------------------------------------------------------------------------- */

.heading {
	margin-bottom: 24px;
}
.slide_navi {
	margin-bottom: 24px;
	border-bottom: 1px solid var(--border-default);
	overflow: hidden;
}
.slide_navi > ul {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 26px;
	width: max-content !important;
	min-width: 100%;
	white-space: nowrap;
}
.slide_navi .user_navi li a {
	display: block;
	padding: 0 2px 11px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--text-muted);
	font: 500 14px/1.2 var(--font-body);
	transition: color .15s, border-color .15s;
}
.slide_navi .user_navi li a:hover {
	color: var(--text-primary);
}
.slide_navi .user_navi li.active a {
	color: var(--accent);
	font-weight: 600;
	border-bottom-color: var(--accent);
	cursor: default;
}
.page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.page-title {
	animation: bc-drop-in .45s cubic-bezier(.2,.8,.3,1) both;
}
.page-actions {
	animation: bc-drop-in .45s cubic-bezier(.2,.8,.3,1) .15s both;
}
.page-title .subline {
	margin: 4px 0 0;
	font: var(--text-small);
	color: var(--text-muted);
}
.page-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Schaltflaechen: nie gefuellt, Ghost mit Rahmen und Leuchten
   -------------------------------------------------------------------------- */

button,
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
	cursor: pointer;
	vertical-align: top;
	margin: 0;
	padding: 10px 16px;
	border-radius: var(--radius-m);
	border: 1px solid rgba(var(--secondary-rgb),.45);
	background: transparent;
	color: var(--text-secondary);
	font: 600 14px/1.2 var(--font-body);
	text-decoration: none;
	outline: none;
	transition: border-color .15s, color .15s, box-shadow .15s, background .15s;
}
button:hover,
.button:hover {
	border-color: var(--text-primary);
	color: var(--text-primary);
	box-shadow: var(--glow-white);
	text-decoration: none;
}
button.primary,
.button.primary,
.button.good,
#accept .button {
	border: 1px solid var(--accent);
	color: var(--accent);
}
button.primary:hover,
.button.primary:hover,
.button.good:hover,
#accept .button:hover {
	background: rgba(var(--accent-rgb),.08);
	box-shadow: var(--glow-border);
	color: var(--accent);
	border-color: var(--accent);
}
.button.danger {
	border-color: rgba(242,109,109,.55);
	color: var(--danger);
}
.button.danger:hover {
	border-color: var(--danger);
	box-shadow: 0 0 10px rgba(242,109,109,.5), 0 0 26px rgba(242,109,109,.22);
	color: var(--danger);
}
.button .fa,
.button .entypo {
	font-size: 15px;
}
.button.compact {
	padding: 7px 12px;
	font-size: 13px;
}
.mini_btn {
	width: 26px;
	height: 26px;
	display: inline-grid;
	place-items: center;
	cursor: pointer;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	background: transparent;
	transition: color .15s, background .15s;
}
.mini_btn:hover {
	color: var(--text-primary);
	text-decoration: none;
}
.view_switcher {
	display: inline-flex;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	overflow: hidden;
	background: var(--surface-raised);
}
.view_switcher .button {
	border: none;
	border-radius: 0;
	padding: 0 14px;
	height: 38px;
	color: var(--text-muted);
	font-weight: 500;
	font-size: 13px;
	box-shadow: none;
}
.view_switcher .button + .button {
	border-left: 1px solid var(--border-strong);
}
.view_switcher .button.active {
	color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
}
.view_switcher .button:hover {
	box-shadow: none;
	color: var(--text-primary);
}

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

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea {
	-webkit-appearance: none;
	appearance: none;
	height: 40px;
	width: 100%;
	padding: 0 12px;
	margin: 0;
	background: var(--surface-raised);
	color: var(--text-primary);
	font: 400 14px/1.4 var(--font-body);
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	outline: none;
	vertical-align: top;
	transition: border-color .15s, box-shadow .2s;
}
textarea {
	height: auto;
	min-height: 90px;
	padding: 10px 12px;
	resize: vertical;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
input[disabled] {
	color: var(--text-primary);
	opacity: 1;
	-webkit-text-fill-color: var(--text-primary);
}
::placeholder {
	color: var(--text-muted);
	opacity: 1;
}
:focus::placeholder {
	color: var(--disabled);
}
label {
	display: block;
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Haekchen: 15px, Radius 4, gefuellt in Akzentfarbe mit zentriertem Haken,
   selbst gezeichnet, damit es in jedem Browser gleich aussieht. */
input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-grid;
	place-items: center;
	width: 15px;
	height: 15px;
	margin: 0;
	padding: 0;
	border-radius: 4px;
	border: 1px solid var(--text-muted);
	background: transparent;
	cursor: pointer;
	vertical-align: middle;
	flex-shrink: 0;
	transition: background .12s, border-color .12s;
}
input[type="checkbox"]:hover {
	border-color: var(--text-secondary);
}
input[type="checkbox"]:checked {
	background: var(--accent) var(--icon-check) no-repeat center / 10px 10px;
	border-color: var(--accent);
}
input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}
input[type="checkbox"] + label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 10px;
	font: 400 14px/26px var(--font-body);
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-secondary);
	vertical-align: middle;
}
input[type="checkbox"]:checked + label {
	color: var(--text-primary);
}
input[type="checkbox"] + label:empty {
	display: none;
}

/* Umschalter in der Werkzeugleiste (Fordernd / Archiviert): dieselbe
   Checkbox wie in den Listen, nur in eine Kapsel gesetzt. Das Kaestchen
   liegt absolut ueber dem linken Rand des Labels, gezeichnet wird es von der
   allgemeinen Regel oben. */
.toggles {
	display: flex;
	gap: 12px;
}
.toggles .toggle {
	position: relative;
	display: inline-flex;
}
.toggles input[type="checkbox"] {
	position: absolute;
	left: 14px;
	top: 50%;
	margin-top: -7.5px;
	z-index: 1;
	pointer-events: none;
}
.toggles input[type="checkbox"] + label {
	position: relative;
	margin: 0;
	height: 40px;
	padding: 0 14px 0 37px;
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	color: var(--text-muted);
	font: 500 13px/38px var(--font-body);
	transition: all .15s;
}
.toggles input[type="checkbox"]:checked + label {
	background: rgba(var(--accent-rgb),.08);
	border-color: var(--accent);
	box-shadow: inset 0 0 0 .5px var(--accent);
	color: var(--accent);
}

/* Auswahlfelder: Eingabe mit Chevron, dunkles Popover darunter */
.select {
	position: relative;
}
.select:before {
	content: '';
	position: absolute;
	right: 12px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	background: var(--icon-chevron) no-repeat center / contain;
	pointer-events: none;
	z-index: 1;
}
.select > input {
	padding-right: 36px;
	cursor: pointer;
	width: 100%;
}
.select.hover > input,
.select.hover.pill > input {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.select.hover:before {
	background-image: var(--icon-chevron-accent);
}
.select > ul {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	margin: 6px 0 0;
	padding: 6px;
	list-style: none;
	display: none;
	max-height: 260px;
	overflow: auto;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	z-index: 2100;
}
.select ul li {
	position: relative;
	cursor: pointer;
}
.select ul li p {
	margin: 0;
	padding: 8px 10px;
	border-radius: var(--radius-s);
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background .12s, color .12s;
}
.select > ul > li:hover > p {
	background: rgba(var(--accent-rgb),.07);
	color: var(--text-primary);
}
.select ul li.disabled {
	cursor: default;
}
.select ul li.disabled p {
	color: var(--disabled);
}
.select ul li.search p {
	padding: 4px 4px 8px;
	cursor: default;
}
.select ul li.search p input {
	height: 32px;
	font-size: 13px;
}
.select > ul > li.disabled:hover > p,
.select > ul > li.search:hover > p {
	background: transparent;
}
.select > ul > li > ul {
	padding: 0 0 0 10px;
	margin: 0;
	list-style: none;
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s .3s;
}
.select > ul > li > ul > li {
	padding: 6px 10px;
	font: 400 13px/1.3 var(--font-body);
	color: var(--text-muted);
}
.select > ul > li > ul > li:hover {
	color: var(--text-primary);
}
.select > ul > li:hover > ul {
	max-height: 800px;
}

/* Pillen-Variante fuer Werkzeugleisten und Widget-Koepfe */
.pill:not(.select):not(.checkboxes),
.select.pill > input,
.checkboxes.pill .selected {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--surface-raised);
	border: 1px solid var(--border-default);
	color: var(--text-muted);
	font: 500 12px/1 var(--font-body);
	letter-spacing: .02em;
	white-space: nowrap;
	margin: 0;
}
.select.pill > input,
.checkboxes.pill .selected {
	padding-right: 28px;
	width: auto;
	min-width: 110px;
	cursor: pointer;
}
.select.pill > input:focus {
	box-shadow: none;
}
.select.pill:before,
.checkboxes.pill:before {
	width: 11px;
	height: 11px;
	margin-top: -5.5px;
	right: 10px;
}
.select.pill.hover:before,
.checkboxes.pill:hover:before {
	filter: brightness(1.6);
}
.select.pill > ul {
	left: auto;
	right: 0;
	width: auto;
	min-width: 180px;
}

/* Mehrfachauswahl (Projektfilter) */
.list-filter .checkboxes {
	position: relative;
}
.checkboxes.pill {
	position: relative;
}
.checkboxes.pill .selected {
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	line-height: 26px;
}
.checkboxes.pill:before {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	background: var(--icon-chevron) no-repeat center / contain;
	pointer-events: none;
}
.checkboxes.pill ul {
	position: absolute;
	top: 100%;
	right: 0;
	margin: 0;
	padding: 6px;
	list-style: none;
	visibility: hidden;
	opacity: 0;
	max-height: 0;
	overflow: auto;
	min-width: 240px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	z-index: 2100;
	transition: opacity .15s, max-height .2s, visibility 0s .2s;
}
.checkboxes.pill:hover ul {
	visibility: visible;
	opacity: 1;
	max-height: 360px;
	transition: opacity .15s, max-height .2s;
}
.checkboxes.pill ul:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 8px;
}
.checkboxes.pill ul li {
	padding: 0 4px;
}
.checkboxes.pill ul li.search input {
	height: 32px;
	font-size: 13px;
	margin: 2px 0 6px;
}
.checkboxes.pill ul li.reset a {
	display: block;
	padding: 6px 6px 8px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--border-default);
	font: 500 12px/1.3 var(--font-body);
	color: var(--text-muted);
}
.checkboxes.pill ul li.reset a:hover {
	color: var(--accent);
}
.checkboxes.pill ul li:not(.search):not(.reset) {
	display: flex;
	align-items: center;
	padding: 6px 8px;
	border-radius: var(--radius-s);
}
.checkboxes.pill ul li:not(.search):not(.reset):hover {
	background: rgba(var(--accent-rgb),.05);
}
.checkboxes.pill ul li input[type="checkbox"] + label {
	flex: 1;
	min-width: 0;
	line-height: 20px;
	font-size: 13px;
}

/* Tags als Pillen in Listen und Auswahlfeldern */
.tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 10px;
	margin-right: 6px;
	border-radius: 999px;
	background: rgba(var(--accent-rgb),.08);
	border: 1px solid var(--border-strong);
	color: var(--accent);
	font: 600 11px/1 var(--font-body);
	letter-spacing: .02em;
	white-space: nowrap;
	vertical-align: middle;
}
.tag.soft {
	background: var(--surface-raised);
	color: var(--text-secondary);
	font-weight: 500;
	letter-spacing: 0;
}
.list-view li > [data-id='tags'] {
	overflow: visible;
}

/* Mehrfachauswahl (Tags): Feld mit Pillen, dunkles Popover mit Haekchen */
.multiselect {
	position: relative;
	display: inline-flex;
	width: 220px;
}
.multiselect .ms_field {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	height: 40px;
	padding: 0 34px 0 10px;
	overflow: hidden;
	white-space: nowrap;
	cursor: pointer;
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	transition: border-color .15s, box-shadow .15s;
}
.multiselect .ms_field .placeholder {
	font: 400 14px/1 var(--font-body);
	color: var(--text-muted);
}
.multiselect .ms_field .tag {
	height: 24px;
	padding: 0 9px;
	margin: 0;
	flex-shrink: 0;
}
.multiselect .ms_field .tag .remove {
	display: inline-grid;
	place-items: center;
	width: 9px;
	height: 9px;
	opacity: .7;
	cursor: pointer;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
.multiselect .ms_field:after {
	content: '';
	position: absolute;
	right: 12px;
	top: 50%;
	width: 13px;
	height: 13px;
	margin-top: -6.5px;
	background: var(--icon-chevron) no-repeat center / contain;
	transition: transform .15s;
	pointer-events: none;
}
.multiselect.open .ms_field {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.multiselect.open .ms_field:after {
	transform: rotate(180deg);
}
.multiselect .ms_menu {
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	min-width: 100%;
	display: none;
	padding: 6px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	z-index: 2100;
}
.multiselect.open .ms_menu {
	display: block;
}
.multiselect .ms_menu .ms_search {
	height: 32px;
	margin-bottom: 6px;
	font-size: 13px;
}
.multiselect .ms_option {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 8px 10px;
	border-radius: var(--radius-s);
	cursor: pointer;
	font: 500 13px/1.2 var(--font-body);
	color: var(--text-secondary);
	white-space: nowrap;
}
.multiselect .ms_option:hover {
	background: rgba(var(--accent-rgb),.07);
}
.multiselect .ms_option .ms_box {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 1px solid var(--text-muted);
}
.multiselect .ms_option.on {
	color: var(--accent);
}
.multiselect .ms_option.on .ms_box {
	border-color: var(--accent);
	background: var(--accent) var(--icon-check) no-repeat center / 9px 9px;
}
.multiselect .ms_option.create {
	color: var(--accent);
}
.multiselect .ms_option.create .ms_box {
	border: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E") no-repeat center / contain;
}
.multiselect .ms_empty {
	padding: 8px 10px;
	font: var(--text-small);
	color: var(--text-muted);
}
.form .multiselect {
	width: 100%;
}

/* Werkzeugleiste ueber den Listen */
.list-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
.list-filter .spacer {
	flex: 1;
}
.list-filter .hidden_filter {
	display: none;
}
.list-filter .select:not(.pill) {
	width: 220px;
}
.list-filter .search_filter {
	width: 240px;
	flex: 0 0 240px;
	padding-left: 36px;
	background-image: var(--icon-search);
	background-repeat: no-repeat;
	background-size: 15px;
	background-position: 12px center;
}

/* --------------------------------------------------------------------------
   Inhalts-Container (Glasflaeche) und Listen
   -------------------------------------------------------------------------- */

.content-card {
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-l);
	overflow: hidden;
}
/* Listen lassen ihre Zeilenmenues ueber den Rand hinaus, die Rundung
   uebernehmen erste und letzte Zeile. */
.content-card.list-card {
	overflow: visible;
}
.list-card .list-legend {
	border-radius: var(--radius-l) var(--radius-l) 0 0;
}
.list-card .scrollable:last-child .list-view > li:last-child {
	border-radius: 0 0 var(--radius-l) var(--radius-l);
}
.content-card.empty-state {
	padding: 40px 28px;
	text-align: center;
	color: var(--text-secondary);
}
.content-card.empty-state p {
	margin-bottom: 16px;
}
.content-card.text-page {
	padding: 28px;
	max-width: 760px;
}
.text-page .label {
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 22px 0 6px;
}
.text-page .label:first-child {
	margin-top: 0;
}
.text-page p {
	color: var(--text-secondary);
}
.scrollable {
	outline: none;
	width: 100%;
}
.list-legend {
	display: flex;
	align-items: center;
	padding: 0 44px 0 20px;
	border-bottom: 1px solid var(--border-strong);
}
.list-legend p {
	display: none;
	margin: 0;
	padding: 12px 14px;
	width: 25%;
	min-width: 0;
	flex: 0 1 auto;
	font: 600 12px/1.3 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	user-select: none;
}
/* Spaltenkoepfe sortieren die Liste: Links (Sortierung ueber den Server) und
   einfache Koepfe (Sortierung im Browser) sehen gleich aus */
.list-legend p.sortable {
	cursor: pointer;
	user-select: none;
}
.list-legend p.sortable:after {
	content: '▲';
	display: inline-block;
	margin-left: 6px;
	font-size: 9px;
	opacity: .25;
	transition: transform .15s;
}
.list-legend p.sortable:hover {
	color: var(--text-primary);
}
.list-legend p.sortable.active {
	color: var(--accent);
}
.list-legend p.sortable.active:after {
	opacity: 1;
}
.list-legend p.sortable.active.asc:after {
	transform: rotate(180deg);
}
.list-legend p a {
	color: inherit;
	display: inline-block;
}
.list-legend p a:after {
	content: '▲';
	display: inline-block;
	margin-left: 6px;
	font-size: 9px;
	opacity: .25;
	transition: transform .15s;
}
.list-legend p a:hover {
	color: var(--text-primary);
}
.list-legend p a.active {
	color: var(--accent);
}
.list-legend p a.active:after {
	opacity: 1;
}
.list-legend p a.active.asc:after {
	transform: rotate(180deg);
}
/* Gekuerzt wird die Beschriftung, nicht der Kopf als Ganzes: sie steckt in
   einem eigenen Element und laesst rechts Platz fuer das Sortierzeichen.
   Ohne diese Trennung setzte der Browser die drei Punkte hinter den Pfeil,
   weil Beschriftung und Pfeil zusammen ein Textfluss waren. */
.list-legend p > span,
.list-legend p a > span {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}
.list-legend p.sortable > span,
.list-legend p a > span {
	max-width: calc(100% - 16px);
}
/* Der Link fuellt den Kopf, damit die Prozentangabe der Beschriftung eine
   feste Bezugsbreite hat. Die Ausrichtung kommt weiter vom Kopf. */
.list-legend p a {
	display: block;
	overflow: hidden;
}
.list-legend p.sortable:after,
.list-legend p a:after {
	vertical-align: middle;
}
/* Beschriftung und Pfeil als Flex-Zeile: die gemessene Breite (list_layout)
   ist dann genau Text plus Pfeil, und wird der Kopf schmaler, kuerzt sich nur
   die Beschriftung. Die Prozentrechnung fuer den Pfeil entfaellt. */
.list-legend p.sortable.visible,
.list-legend p.visible > a {
	display: flex;
	align-items: center;
	min-width: 0;
}
.list-legend p.sortable > span,
.list-legend p a > span {
	max-width: none;
	flex: 0 1 auto;
	min-width: 0;
}
.list-legend p.sortable:after,
.list-legend p a:after {
	flex: 0 0 auto;
}
.list-legend p[data-id='sum'].sortable.visible,
.list-legend p[data-id='amount'].sortable.visible,
.list-legend p[data-id='cost'].sortable.visible,
.list-legend p[data-id='total'].sortable.visible,
.list-legend p[data-id='receipt'].sortable.visible,
.list-legend p.text-right.sortable.visible,
.list-legend p[data-id='sum'].visible > a,
.list-legend p[data-id='amount'].visible > a,
.list-legend p[data-id='cost'].visible > a,
.list-legend p[data-id='total'].visible > a,
.list-legend p[data-id='receipt'].visible > a,
.list-legend p.text-right.visible > a {
	justify-content: flex-end;
}
.list-view {
	margin: 0;
	padding: 0;
	list-style: none;
	min-height: 120px;
}
.content-card.list-card {
	animation: bc-fade-in .3s ease both;
}
.list-view > li {
	animation: bc-widget-in .4s cubic-bezier(.2,.8,.3,1) backwards;
	animation-delay: calc(.12s + var(--i, 10) * 30ms);
}
.list-view > li:hover {
	z-index: 2;
}
/* --i setzt paginate_card() je sichtbarer Zeile, vorher greift die Reihenfolge
   im Dokument. */
.list-view > li:nth-child(1) { --i: 0; }
.list-view > li:nth-child(2) { --i: 1; }
.list-view > li:nth-child(3) { --i: 2; }
.list-view > li:nth-child(4) { --i: 3; }
.list-view > li:nth-child(5) { --i: 4; }
.list-view > li:nth-child(6) { --i: 5; }
.list-view > li:nth-child(7) { --i: 6; }
.list-view > li:nth-child(8) { --i: 7; }
.list-view > li:nth-child(9) { --i: 8; }
.list-view > li:nth-child(10) { --i: 9; }

.list-view > li {
	position: relative;
	display: flex;
	align-items: center;
	cursor: default;
	width: 100%;
	min-height: 46px;
	padding: 0 44px 0 20px;
	border-bottom: 1px solid var(--border-default);
	transition: background .12s;
}
.list-view > li:last-child {
	border-bottom: none;
}
.list-view > li:hover,
.list-view > li.multi-selected:hover {
	background: rgba(var(--accent-rgb),.04);
}
.list-view > li.multi-selected {
	background: rgba(var(--accent-rgb),.07);
}
.list-view li.force_hide {
	display: none !important;
}
/* Archivierte Zeilen: gedaempft, Text in Muted, grauer Statusbalken. Die
   Daempfung liegt auf den Zellen und dem Balken, nicht auf der Zeile, sonst
   erbt das Zeilenmenue die Transparenz. */
.list-view > li[data-archived='yes'] > [data-id],
.list-view > li[data-archived='yes']:before {
	opacity: .6;
}
.list-view > li[data-archived='yes']:before {
	background: var(--gray-400);
}
.list-view > li[data-archived='yes'] > [data-id],
.list-view > li[data-archived='yes'] > [data-id] a {
	color: var(--text-muted);
	font-weight: 400;
}
.list-view > li[data-archived='yes'] .tag {
	color: var(--text-muted);
	background: transparent;
}
/* Statusbalken am linken Rand */
.list-view > li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 3px;
	border-radius: 2px;
	background: transparent;
}
.list-view li[data-type='service']:before,
.list-view li[data-type='archive']:before,
.list-view.estimates li[data-type='won']:before,
.list-view.bank-receipts li[data-type='credit']:before {
	background: var(--accent);
}
.list-view li[data-type='estimation']:before {
	background: var(--blue-400);
}
.list-view li[data-type='material']:before,
.list-view.estimates li[data-type='lost']:before,
.list-view.bank-receipts li[data-type='debit']:before {
	background: var(--danger);
}
.list-view li[data-type='credit']:before,
.list-view li[data-type='active']:before,
.list-view.estimates li[data-type='valid']:before {
	background: var(--warning);
}
/* Rechnungen faerbt der Geldeingang, nicht das Weglegen: gelb solange offen,
   gruen sobald bezahlt. Archiviert bleibt gedaempft, das steuert die Regel
   fuer data-archived weiter oben. */
.list-view.bills li[data-canceled='no'][data-paid='no']:before {
	background: var(--warning);
}
.list-view.bills li[data-canceled='no'][data-paid='yes']:before {
	background: var(--accent);
}
.list-view.estimates li[data-type='expired']:before,
.list-view > li[data-canceled='yes']:before {
	background: var(--gray-400);
}
.list-view.bank-receipts li[data-type='credit'] p[data-id='amount'] {
	color: var(--accent);
}
.list-view.bank-receipts li[data-type='debit'] p[data-id='amount'] {
	color: var(--danger);
}
.list-view > li > [data-id] {
	display: none;
	margin: 0;
	width: 25%;
	min-width: 0;
	flex: 0 1 auto;
	padding: 13px 14px;
	font: 400 14px/20px var(--font-body);
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.list-view > li > [data-id] > * {
	margin: 0;
}
.list-view:not(.expand) > li > div[data-id] {
	max-height: 46px;
	overflow: hidden;
}
.list-view:not(.expand) > li > div[data-id] > * {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.list-view:not(.expand) > li > div[data-id] > * + * {
	display: none;
}
.list-view li > .visible,
.list-legend p.visible {
	display: block;
}
.list-view li > .visible.show_mobile[data-id='name'],
.list-view li > [data-id='project'],
.list-view li > [data-id='company'],
.list-view li > [data-id='effort'],
.list-view li > [data-id='label'],
.list-view li > [data-id='bank_name'],
.list-view.emails li > [data-id='type'],
.list-view li > [data-id='total'],
.list-view li > [data-id='sum'],
.list-view li > [data-id='sum_total'],
.list-view li > [data-id='amount'].show_mobile {
	color: var(--text-primary);
	font-weight: 500;
}
.list-view li p[data-id='sum'],
.list-view li p[data-id='amount'],
.list-view li p[data-id='cost'],
.list-view li p[data-id='total'],
.list-view li p[data-id='num_invoices'],
.list-view li p[data-id='sum_total'],
.list-view li p.text-right,
.list-legend p[data-id='sum'],
.list-legend p[data-id='amount'],
.list-legend p[data-id='cost'],
.list-legend p[data-id='total'],
.list-legend p[data-id='receipt'],
.list-legend p.text-right {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.list-view li p .none {
	color: var(--text-muted);
}
.list-view li p[data-id='num'],
.list-view li p[data-id='date'],
.list-view li p[data-id='date_from'] {
	color: var(--text-muted);
}
.list-view li a {
	color: var(--accent);
}
.list-view > li[data-canceled='yes'] > [data-id] {
	text-decoration: line-through;
	color: var(--text-muted);
}
.list-view.expand li p {
	height: auto;
	text-overflow: clip;
	white-space: normal;
}
.list-view.efforts-archive li p,
.list-view.efforts li > [data-id],
.list-view.hbcis li p,
.list-legend.for-efforts p,
.list-legend.for-hbcis p {
	width: 20%;
}
p[data-id='bank_pin'] {
	-webkit-text-security: disc;
}
.list-view li [data-id].big,
.list-legend p.big {
	width: 50%;
}
.list-view li [data-id].mini,
.list-legend p.mini {
	width: 5%;
	min-width: 40px;
}
/* Die Rechnungsnummer muss immer vollstaendig lesbar sein. Die 5% der Spalte
   ergaben auf schmalen Karten 48 Pixel, davon gingen 28 fuer den Innenabstand
   ab und die Nummer wurde abgeschnitten. Die Mindestbreite rechnet den Abstand
   mit und laesst Platz fuer fuenf Stellen. Feste Pixel, kein ch: Kopfzeile und
   Zelle haben verschiedene Schriftgroessen und waeren sonst unterschiedlich
   breit. Gilt nur fuer die Nummer, nicht fuer alle schmalen Spalten: die
   Auswahlspalte soll schmal bleiben. */
.list-card .list-view li [data-id='num'],
.list-card .list-legend p[data-id='num'] {
	flex: 0 0 72px;
	width: 72px;
	min-width: 72px;
}
.list-view li [data-id].small,
.list-legend p.small {
	width: 10%;
}
.list-view li [data-id].medium,
.list-legend p.medium {
	width: 15%;
}
.list-view li [data-id].large,
.list-legend p.large {
	width: 40%;
}
.list-view li [data-id].wide,
.list-legend p.wide {
	width: 20%;
}
/* Die Automatik einer Bankverbindung zeigt zwei Marken nebeneinander, Abruf
   und Erkennung. Ohne Abstand stossen sie aneinander. */
.hbcis li [data-id='automation'].visible {
	display: flex;
	align-items: center;
	gap: 6px;
}
/* Nimmt den restlichen Platz der Zeile, die Spalten rechts davon ruecken
   damit an den rechten Rand. */
.list-view li [data-id].fill,
.list-legend p.fill {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}
/* Sammelaktionen fuer markierte Zeilen */
.bulk_actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.bulk_actions[hidden] {
	display: none;
}
.bulk_menu {
	position: relative;
}
/* Der Ausloeser zeigt die Anzahl der gewaehlten Zeilen und oeffnet die Aktionen */
.bulk_menu .bulk_toggle {
	height: 40px;
	gap: 4px;
	color: var(--accent);
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
}
.bulk_menu .bulk_toggle .icon {
	margin-left: 4px;
}
.bulk_menu .bulk_toggle:hover,
.bulk_menu.open .bulk_toggle {
	background: rgba(var(--accent-rgb),.16);
}
.bulk_menu .bulk_toggle .icon {
	transition: transform .15s;
}
.bulk_menu.open .bulk_toggle .icon {
	transform: rotate(180deg);
}
.bulk_popover {
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	display: none;
	width: 220px;
	padding: 6px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	z-index: 200;
}
.bulk_menu.open .bulk_popover {
	display: block;
	animation: bc-fade-in .12s ease both;
}
.bulk_popover a {
	display: block;
	padding: 8px 10px;
	border-radius: var(--radius-s);
	font: 500 13px/1.2 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
}
.bulk_popover a:hover {
	background: rgba(var(--accent-rgb),.07);
	color: var(--text-primary);
}
.bulk_popover a.danger {
	color: var(--danger);
}
.list-view > li > p[data-id='select'],
.list-legend p[data-id='select'] {
	padding-left: 0;
	padding-right: 0;
	text-align: left;
	overflow: visible;
}
.list-view > li > p[data-id='select'] .multi-select,
.list-legend p[data-id='select'] .multi-select {
	display: block;
}
.list-view li .visible .highlight {
	background: rgba(var(--accent-rgb),.25);
	color: var(--text-primary);
	border-radius: 3px;
}
/* Statuskapsel mit Fortschrittsfuellung */
.list-view li p .grace,
.list-view li p .done {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	max-width: 100%;
	height: 24px;
	padding: 0 8px;
	border-radius: var(--radius-s);
	overflow: hidden;
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	vertical-align: middle;
	font: 600 11px/1 var(--font-body);
	letter-spacing: .02em;
	color: var(--warning);
}
.list-view li p .grace .indicator {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: rgba(245,185,80,.22);
}
.list-view li p .days {
	position: relative;
	z-index: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.list-view li p .done {
	color: var(--accent);
	background: rgba(var(--accent-rgb),.12);
	border-color: rgba(var(--accent-rgb),.35);
}
/* Der Zustand steht in der Statusspalte: die gruene Kapsel "Bezahlt am" oder
   die gelbe Kapsel mit der Frist. Die Spalte mit dem Archivdatum bleibt
   ausgeblendet und wird nur fuer den CSV-Export mitgefuehrt. */

.list-view > li[data-canceled='yes'] p .grace,
.list-view > li[data-canceled='yes'] p .done {
	color: var(--text-muted);
	background: var(--surface-raised);
	border-color: var(--border-strong);
	text-decoration: none;
}
.list-view > li[data-canceled='yes'] p .grace .indicator {
	display: none;
}
/* Marken am rechten Rand der Zeile als SVG-Maske in der Akzentfarbe: die
   Klammer steht fuer den hinterlegten Beleg, die Wolke fuer den Versand an
   Datev. Sie liegen auf ::after, damit ::before der Statusbalken bleibt;
   vorher teilten sich beide das Element, und bei archivierten Rechnungen
   faerbte die Balkenfarbe die ganze Marke zu einem gruenen Block. */
.list-view.bank-receipts li.has-receipt:after,
.bills li.in-datev:after {
	content: '';
	position: absolute;
	right: 44px;
	top: 0;
	bottom: 0;
	width: 36px;
	background: var(--accent);
	-webkit-mask: var(--icon-paperclip) no-repeat center / 16px 16px;
	mask: var(--icon-paperclip) no-repeat center / 16px 16px;
	opacity: .9;
	pointer-events: none;
}
.list-view.bank-receipts li.has-receipt.in-datev:after,
.bills li.in-datev:after {
	-webkit-mask-image: var(--icon-cloud-up);
	mask-image: var(--icon-cloud-up);
}
.bills > li,
.list-legend.for-bills {
	padding-right: 80px;
}
/* Optionen der Zeile: erscheint beim Ueberfahren, dunkles Popover */
.list-view li .options {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 160;
	opacity: 0;
	transition: opacity .12s;
}
.list-view li:hover .options,
.list-view li .options:hover {
	opacity: 1;
}
.list-view li .options > .mini_btn.menu span {
	display: none;
}
.list-view li .options > .mini_btn.menu:before {
	content: '';
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--icon-dots) no-repeat center / contain;
	mask: var(--icon-dots) no-repeat center / contain;
}
.list-view li .options:hover > .mini_btn.menu {
	color: var(--accent);
}
.list-view li .options .hidden_menu {
	position: absolute;
	right: 0;
	top: 100%;
	display: none;
	list-style: none;
	margin: 0;
	padding: 6px;
	width: 240px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	z-index: 100;
	animation: bc-fade-in .12s ease both;
}
.list-view li .options:before {
	content: '';
	position: absolute;
	left: -10px;
	right: -10px;
	top: 100%;
	height: 8px;
}
.list-view li:nth-last-child(-n+5):not(:nth-child(-n+5)) .options .hidden_menu {
	top: auto;
	bottom: 100%;
}
.list-view li .options:hover .hidden_menu {
	display: block;
}
.list-view li .options .hidden_menu li {
	margin: 0;
	padding: 0;
}
.list-view li .options .hidden_menu .mini_btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: auto;
	padding: 8px 10px;
	text-align: left;
	white-space: nowrap;
	font: 500 13px/1.2 var(--font-body);
	color: var(--text-secondary);
	border-radius: var(--radius-s);
}
.list-view li .options .hidden_menu .mini_btn:hover {
	background: rgba(var(--accent-rgb),.07);
	color: var(--text-primary);
}
.list-view li .options .hidden_menu .mini_btn span {
	width: 16px;
	display: inline-block;
	text-align: center;
	font-size: 13px;
	color: var(--text-muted);
}
.list-view li .options .hidden_menu .mini_btn:hover span {
	color: var(--accent);
}
.list-view li .options .hidden_menu .mini_btn:after {
	content: attr(title);
	overflow: hidden;
	text-overflow: ellipsis;
}
.list-view li .options .hidden_menu .mini_btn.remove,
.list-view li .options .hidden_menu .mini_btn.cancel {
	color: var(--danger);
}
.list-view li .options .hidden_menu .mini_btn.remove span,
.list-view li .options .hidden_menu .mini_btn.cancel span {
	color: var(--danger);
}
.list-view.estimates li .options .mini_btn.is-set,
.list-view.estimates li .options .mini_btn.is-set span {
	color: var(--accent);
}
/* Hinweis auf gefundenen Geldeingang */
.bills li .bank_match {
	position: absolute;
	right: 48px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 150;
}
.bills li.in-datev .bank_match {
	display: none;
}
.bills li .bank_match .mark {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: var(--radius-s);
	color: var(--warning);
	cursor: help;
}
.bills li .bank_match:hover .mark {
	background: rgba(245,185,80,.12);
}
/* Bei einer bezahlten Rechnung dokumentiert die Marke den Geldeingang, sie
   warnt nicht mehr davor, ihn zu pruefen. Deshalb Akzent statt Gelb. */
.bills li[data-paid='yes'] .bank_match .mark {
	color: var(--accent);
}
.bills li[data-paid='yes'] .bank_match:hover .mark {
	background: rgba(var(--accent-rgb),.12);
}
.bills li .bank_match ul {
	position: absolute;
	display: none;
	right: 0;
	top: 100%;
	margin: 4px 0 0;
	padding: 12px;
	min-width: 300px;
	list-style: none;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	z-index: 100;
}
.bills li .bank_match:hover ul {
	display: block;
}
.bills li .bank_match ul li {
	display: flex;
	gap: 12px;
	padding: 6px 0;
	border-top: 1px solid var(--border-default);
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-secondary);
	white-space: normal;
}
.bills li .bank_match ul li:first-child {
	border-top: none;
	padding-top: 0;
}
.bills li .bank_match ul li .label {
	width: 110px;
	flex-shrink: 0;
	color: var(--text-muted);
}
.bills li .bank_match ul li .value {
	color: var(--text-primary);
	font-weight: 500;
}
.page-title .list-overview .sum,
.page-title .list-overview .count,
.page-title .list-overview .account {
	font-variant-numeric: tabular-nums;
}
/* Seitenaufteilung unter der Liste */
.list-view > li.page_hide {
	display: none !important;
}
.list-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 20px;
}
.list-footer .pagination {
	display: flex;
	align-items: center;
	gap: 6px;
}
.list-footer .pagination button {
	min-width: 30px;
	height: 30px;
	padding: 0 6px;
	display: grid;
	place-items: center;
	border: none;
	border-radius: var(--radius-s);
	background: transparent;
	color: var(--text-muted);
	font: 600 12px/1 var(--font-body);
	box-shadow: none;
}
.list-footer .pagination button.arrow {
	width: 30px;
	padding: 0;
	font-size: 13px;
}
.list-footer .pagination button:hover {
	color: var(--text-primary);
	border: none;
	box-shadow: none;
}
.list-footer .pagination button.active,
.list-footer .pagination button.active:hover {
	background: rgba(var(--accent-rgb),.08);
	border: 1.5px solid var(--accent);
	color: var(--accent);
	box-shadow: 0 0 10px rgba(var(--accent-rgb),.25);
}
.list-footer .pagination button[disabled] {
	color: var(--disabled);
	cursor: default;
}
.list-footer .pagination .ellipsis {
	padding: 0 4px;
	color: var(--text-muted);
	font: 600 12px/1 var(--font-body);
}
.list-footer .per-page {
	display: flex;
	align-items: center;
	gap: 10px;
}
.list-footer .per-page .label {
	font: var(--text-label);
	letter-spacing: .03em;
	text-transform: none;
	color: var(--text-muted);
}
.list-footer .per-page .select.pill > input {
	min-width: 70px;
}
.list-footer .select.pill > ul {
	top: auto;
	bottom: 100%;
	margin: 0 0 6px;
}
.list-legend-colors {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: 14px;
	padding-left: 4px;
}
.list-legend-colors span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: var(--text-small);
	color: var(--text-muted);
}
.list-legend-colors span:before {
	content: '';
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: var(--gray-400);
}
.list-legend-colors .is-paid:before,
.list-legend-colors .is-won:before,
.list-legend-colors .is-service:before,
.list-legend-colors .is-credit:before {
	background: var(--accent);
}
.list-legend-colors .is-open:before,
.list-legend-colors .is-valid:before,
.list-legend-colors .is-credit.effort:before {
	background: var(--warning);
}
.list-legend-colors .is-lost:before,
.list-legend-colors .is-material:before,
.list-legend-colors .is-debit:before {
	background: var(--danger);
}
.list-legend-colors .is-estimation:before {
	background: var(--blue-400);
}
.list-legend-colors .is-canceled {
	text-decoration: line-through;
}
.efforts ~ .list-legend-colors .is-credit:before {
	background: var(--warning);
}
.datev-progress {
	margin: 20px 0 10px 0;
}
.datev-progress .bar {
	width: 100%;
	height: 6px;
	background: var(--surface-raised);
	border-radius: 999px;
	overflow: hidden;
}
.datev-progress .bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--accent);
	box-shadow: 0 0 8px rgba(var(--accent-rgb),.4);
	transition: width .3s ease;
}
.datev-progress .status {
	margin-top: 8px;
	text-align: center;
	font: var(--text-small);
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Kanban (Projekte)
   -------------------------------------------------------------------------- */

.kanban {
	display: flex;
	gap: 12px;
	align-items: stretch;
	height: calc(100vh - 290px);
	min-height: 420px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.kanban::-webkit-scrollbar {
	display: none;
}
.kanban .col {
	flex: 1 0 240px;
	min-width: 240px;
	max-width: 320px;
	display: flex;
	flex-direction: column;
}
.kanban .layer {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 10px;
	border-radius: var(--radius-l);
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
}
.kanban .layer .title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	padding: 4px 2px 0 6px;
	font: 600 13px/1.3 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kanban .layer .title .count {
	color: var(--accent);
	font-size: 12px;
}
.kanban .cards {
	flex: 1;
	min-height: 120px;
	overflow-y: auto;
	scrollbar-width: none;
	list-style: none;
	margin: 0;
	padding: 0;
}
.kanban .cards::-webkit-scrollbar {
	display: none;
}
.kanban .cards > li {
	padding-bottom: 10px;
}
.kanban .cards .sortable-placeholder {
	position: relative;
	visibility: visible !important;
	min-height: 44px;
}
.kanban .cards .sortable-placeholder:after {
	content: '';
	position: absolute;
	inset: 0 0 10px 0;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-m);
}
.kanban .cards .card {
	position: relative;
	margin: 0;
	padding: 12px;
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	border: 1px solid var(--border-default);
	cursor: grab;
	transition: border-color .15s, box-shadow .15s;
}
.kanban .cards .card:hover {
	border-color: var(--accent);
	box-shadow: 0 0 12px rgba(var(--accent-rgb),.18);
}
.kanban .cards .card .title {
	margin: 0;
	font: 600 13px/1.4 var(--font-body);
	color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Pipelines (Kontakte)
   -------------------------------------------------------------------------- */

.pipeline-view .anchor_nav {
	min-width: 160px;
}
.pipeline {
	display: flex;
	gap: 12px;
	align-items: stretch;
	height: calc(100vh - 290px);
	min-height: 420px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.pipeline::-webkit-scrollbar {
	display: none;
}
.pipeline .col {
	position: relative;
	width: 240px;
	min-width: 240px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	border-radius: var(--radius-l);
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
	height: 100%;
}
.pipeline .col-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 2px 0 6px;
}
.pipeline .col-head .title {
	font: 600 13px/1.3 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pipeline .col-head input.rename {
	height: 28px;
	padding: 0 8px;
	font: 600 13px/1.3 var(--font-body);
	border-radius: var(--radius-s);
}
.pipeline .col-head .count {
	flex: 1;
	font: 600 12px/1.3 var(--font-body);
	color: var(--accent);
}
.pipeline .col-menu {
	position: relative;
	flex-shrink: 0;
}
.pipeline .col-menu .menu {
	width: 24px;
	height: 24px;
}
.pipeline .col-menu .menu:before {
	content: '';
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: var(--icon-dots) no-repeat center / contain;
	mask: var(--icon-dots) no-repeat center / contain;
}
.pipeline .col-popover {
	position: absolute;
	right: 0;
	top: 100%;
	display: none;
	width: 170px;
	padding: 6px;
	margin-top: 4px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	z-index: 50;
}
.pipeline .col-popover.open {
	display: block;
	animation: bc-fade-in .12s ease both;
}
.pipeline .col-popover a {
	display: block;
	padding: 8px 10px;
	border-radius: var(--radius-s);
	font: 500 13px/1.2 var(--font-body);
	color: var(--text-secondary);
}
.pipeline .col-popover a:hover {
	background: rgba(var(--accent-rgb),.07);
	color: var(--text-primary);
}
.pipeline .col-popover a.danger {
	color: var(--danger);
}
.pipeline .cards {
	flex: 1;
	min-height: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-y: auto;
	scrollbar-width: none;
}
.pipeline .cards::-webkit-scrollbar {
	display: none;
}
.pipeline .cards:empty + .drop-hint {
	display: block;
}
.pipeline .drop-hint {
	display: none;
	position: absolute;
	left: 10px;
	right: 10px;
	top: 48px;
	padding: 18px 12px;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-m);
	text-align: center;
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-muted);
	pointer-events: none;
}
.pipeline .sortable-placeholder {
	min-height: 60px;
	border: 1px dashed var(--accent);
	border-radius: var(--radius-m);
	background: rgba(var(--accent-rgb),.05);
	box-shadow: 0 0 8px rgba(var(--accent-rgb),.25);
}
.pipe-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 12px 10px;
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	border: 1px solid var(--border-default);
	cursor: grab;
	transition: border-color .15s, box-shadow .15s;
}
.pipe-card:hover {
	border-color: var(--accent);
	box-shadow: 0 0 12px rgba(var(--accent-rgb),.18);
}
.pipe-card.sortable-drag {
	cursor: grabbing;
	box-shadow: var(--shadow-pop);
}
.pipe-card .name {
	font: 600 13px/1.3 var(--font-body);
	color: var(--text-primary);
}
.pipe-card .sub {
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-secondary);
}
.pipe-card .firma {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--border-default);
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-secondary);
	min-width: 0;
}
.pipe-card .firma span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pipe-card .avatar {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: grid;
	place-items: center;
	border-radius: 4px;
	border: 1px solid var(--border-strong);
	font: 700 8px/1 var(--font-display);
	color: var(--accent);
}
/* Typ und Wert (Dealsize oder LinkedIn-Score) in einer Zeile, darunter die
   Wiedervorlage. */
.pipe-card .meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.pipe-card .badge {
	padding: 4px 8px;
	border-radius: var(--radius-s);
	border: 1px solid transparent;
	font: 600 10px/1 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.pipe-card .badge.in {
	background: rgba(var(--accent-rgb),.12);
	border-color: rgba(var(--accent-rgb),.4);
	color: var(--accent);
}
.pipe-card .badge.out {
	background: rgba(242,109,109,.12);
	border-color: rgba(242,109,109,.4);
	color: var(--danger);
}
.pipe-card .value {
	font: 500 12px/1.3 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
	white-space: nowrap;
}
.pipe-card .date {
	font: 400 11px/1.3 var(--font-body);
	color: var(--text-muted);
}
.pipe-card .actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	color: var(--text-muted);
}
.pipe-card .actions a {
	display: inline-flex;
	color: inherit;
}
.pipe-card .actions a:hover {
	color: var(--accent);
}
.pipe-card .actions .remove_card:hover {
	color: var(--danger);
}
/* --------------------------------------------------------------------------
   Avatar (Kopfzeile, Agent-Spalte, Profil)
   -------------------------------------------------------------------------- */
.avatar {
	--size: 32px;
	width: var(--size);
	min-width: var(--size);
	height: var(--size);
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	overflow: hidden;
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	font: 700 calc(var(--size) * .34) / 1 var(--font-display);
	letter-spacing: -.02em;
	vertical-align: middle;
	flex-shrink: 0;
}
.avatar b {
	color: var(--text-primary);
	font-weight: 700;
}
.avatar i {
	color: var(--accent);
	font-style: normal;
}
.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --------------------------------------------------------------------------
   Einstellungen: Profil
   -------------------------------------------------------------------------- */
.data > ul > li.full {
	grid-column: 1 / -1;
}
.data > ul > li.actions {
	flex-direction: row;
	justify-content: flex-end;
	margin-top: 6px;
}
.data > ul > li .hint {
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
.data .photo_row {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.data .photo_actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.data .photo_actions .upload {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	padding: 10px 16px;
	border: 1px dashed rgba(var(--secondary-rgb),.35);
	border-radius: var(--radius-m);
	font: 600 13px/1.2 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.data .photo_actions .upload:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.data .photo_actions .upload .icon-up {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Agent-Spalte rechts
   -------------------------------------------------------------------------- */
:root {
	--agent-rail: 91px;
	--agent-width: 364px;
	/* Oberkante von Avatar und Chat-Kopf: buendig mit Titel und
	   Schaltflaechen der Seite (.page-head beginnt bei 12px, Knopf 40px hoch) */
	--agent-top: 28px;
}
body.signed_in .page {
	margin-right: var(--agent-rail);
}
body.signed_in.agent-open .page {
	margin-right: var(--agent-width);
}
aside.agent {
	position: fixed;
	right: 0;
	top: 0;
	height: 100vh;
	width: var(--agent-rail);
	z-index: 550;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	transition: width .25s ease;
}
body.agent-open aside.agent {
	width: var(--agent-width);
}
aside.agent .agent_rail {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	padding: var(--agent-top) 16px 28px 34px;
}
body.agent-open aside.agent .agent_rail {
	display: none;
}
aside.agent .agent_rail a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
/* Account-Indicator unten in der Seitenleiste: Avatar mit Namen, das Menue
   mit Einstellungen und Abmelden klappt nach oben auf. */
aside.nav li.account .account_wrap {
	position: relative;
	display: block;
}
aside.nav li.account .nav_icon .avatar {
	--size: 34px;
}
aside.nav li.account .account_wrap.open > a {
	color: var(--text-primary);
}
.account_menu {
	display: none;
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	width: 170px;
	padding: 6px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--accent);
	box-shadow: var(--glow-border);
	z-index: 60;
}
body.nav-collapsed aside.nav .account_menu {
	left: 50px;
}
/* Die Leiste schneidet sonst das Menue ab (overflow fuer die Breitenanimation) */
aside.nav:has(.account_wrap.open) {
	overflow: visible;
}
.account_wrap.open .account_menu {
	display: block;
	animation: bc-fade-in .12s ease both;
}
.account_menu a {
	display: block;
	padding: 8px 10px;
	border-radius: var(--radius-s);
	font: 500 13px/1.2 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
	white-space: nowrap;
}
.account_menu a:hover {
	background: rgba(var(--accent-rgb),.07);
	color: var(--text-primary);
}
aside.agent .close_agent .icon-collapse {
	transform: rotate(180deg);
}
.agent_icon .icon {
	display: block;
}
.agent_icon {
	width: 26px;
	min-width: 26px;
	height: 26px;
	display: inline-grid !important;
	place-items: center;
	line-height: 0;
	border-radius: 50%;
	background: var(--surface-raised);
	border: 1px solid var(--accent);
	color: var(--accent);
	box-shadow: 0 0 10px rgba(var(--accent-rgb),.25);
	flex-shrink: 0;
}
/* Agent-Symbol mit pulsierendem Punkt (Loader-Motiv) */
.agent_pulse {
	--size: 41px;
	width: var(--size);
	min-width: var(--size);
	height: var(--size);
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	background: var(--surface-raised);
	border: 1px solid var(--accent);
	box-shadow: 0 0 10px rgba(var(--accent-rgb),.25);
	flex-shrink: 0;
}
.agent_pulse svg {
	display: block;
	width: calc(var(--size) - 2px);
	height: calc(var(--size) - 2px);
}
.agent_pulse .dot {
	fill: var(--accent-hover);
}
.agent_pulse .ring {
	fill: var(--accent);
	transform-origin: 60px 60px;
	animation: bc-load-ring 1.5s ease-out infinite;
}
aside.agent .agent_panel {
	display: none;
	flex: 1;
	min-height: 0;
	flex-direction: column;
	gap: 14px;
	padding: var(--agent-top) 16px 20px 34px;
	box-sizing: border-box;
	height: 100vh;
}
body.agent-open aside.agent .agent_panel {
	display: flex;
	animation: bc-fade-in .2s ease both;
}
aside.agent .agent_panel > header {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 36px;
}
aside.agent .agent_name {
	flex: 1;
	font: 600 15px/1.3 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
aside.agent .close_agent {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
	transition: color .15s;
}
aside.agent .close_agent:hover {
	color: var(--text-primary);
}
aside.agent .close_agent .icon-close {
	display: none;
}
aside.agent .full_agent {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
	transition: color .15s;
}
aside.agent .full_agent:hover {
	color: var(--text-primary);
}
aside.agent .full_agent .icon-compress {
	display: none;
}
/* Vollbild: die Spalte legt sich ueber die Seite, rechts neben der Navigation */
body.agent-full aside.agent {
	left: var(--nav-width);
	width: auto;
	background: var(--surface-page);
	animation: bc-fade-in .2s ease both;
}
body.agent-full.nav-collapsed aside.agent {
	left: var(--nav-width-collapsed);
}
body.agent-full aside.agent .agent_panel {
	padding: var(--agent-top) 36px 20px;
}
body.agent-full aside.agent .full_agent,
body.agent-full aside.agent .full_agent:hover {
	color: var(--accent);
}
body.agent-full aside.agent .full_agent .icon-expand {
	display: none;
}
body.agent-full aside.agent .full_agent .icon-compress {
	display: block;
}
@media (max-width: 770px) {
	body:not(.static) aside.agent .full_agent {
		display: none;
	}
}

aside.agent .messages {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-right: 2px;
	position: relative;
	z-index: 1;
}
aside.agent .messages::-webkit-scrollbar {
	display: none;
}
aside.agent .msg {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}
aside.agent .msg.user {
	flex-direction: row-reverse;
}
aside.agent .msg.fresh {
	animation: bc-msg-in .5s cubic-bezier(.3,.9,.35,1) both;
	transform-origin: bottom right;
}
aside.agent .msg .stack {
	max-width: 82%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
aside.agent .msg.user .stack {
	align-items: flex-end;
}
aside.agent .msg .bubble {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
}
aside.agent .msg.user .bubble {
	background: rgba(var(--accent-rgb),.07);
	border-color: rgba(var(--accent-rgb),.3);
}
aside.agent .msg .text {
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-secondary);
	text-align: left;
	word-break: break-word;
}
aside.agent .msg .text p {
	margin: 0 0 8px;
}
aside.agent .msg .text p:last-child,
aside.agent .msg .text ul:last-child {
	margin-bottom: 0;
}
aside.agent .msg .text ul {
	margin: 0 0 8px;
	padding-left: 18px;
}
aside.agent .msg .text li {
	margin: 2px 0;
}
aside.agent .msg .text b {
	font-weight: 600;
	color: var(--text-primary);
}
aside.agent .msg .text .agent_table {
	width: 100%;
	margin: 8px 0;
	border-collapse: collapse;
	font: 400 12px/1.7 var(--font-body);
	color: var(--text-secondary);
}
aside.agent .msg .text .agent_table th,
aside.agent .msg .text .agent_table td {
	padding: 0 10px 0 0;
	text-align: left;
	vertical-align: top;
	border: none;
	word-break: normal;
	overflow-wrap: normal;
}
/* Feine Linie mit Abstand ueber der Tabelle, und unter ihr, wenn noch Text folgt */
aside.agent .msg .text .agent_table tr:first-child th,
aside.agent .msg .text .agent_table tr:first-child td {
	padding-top: 6px;
	border-top: 1px solid var(--border-default);
}
aside.agent .msg .text .agent_table:not(:last-child) tr:last-child td {
	padding-bottom: 6px;
	border-bottom: 1px solid var(--border-default);
}
aside.agent .msg .text .agent_table th:last-child,
aside.agent .msg .text .agent_table td:last-child {
	padding-right: 0;
}
aside.agent .msg .text .agent_table th {
	font-weight: 600;
	color: var(--text-primary);
}
aside.agent .msg .text .agent_table .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
/* Werte bleiben in einer Zeile, ihre Ueberschrift darf umbrechen, sonst
   nimmt sie den Textspalten die Breite */
aside.agent .msg .text .agent_table td.num {
	white-space: nowrap;
}
aside.agent .msg .text .agent_table th.num {
	hyphens: auto;
	-webkit-hyphens: auto;
}
/* Randspalte: breite Tabellen als Datensaetze untereinander, jede Zelle
   mit ihrer Beschriftung. Im Vollbild bleibt die Tabelle eine Tabelle. */
body:not(.agent-full) aside.agent .msg .text .agent_table.stacked,
body:not(.agent-full) aside.agent .msg .text .agent_table.stacked tbody,
body:not(.agent-full) aside.agent .msg .text .agent_table.stacked tr,
body:not(.agent-full) aside.agent .msg .text .agent_table.stacked td {
	display: block;
}
body:not(.agent-full) aside.agent .msg .text .agent_table.stacked tr:first-child {
	display: none;
}
body:not(.agent-full) aside.agent .msg .text .agent_table.stacked tr {
	padding: 6px 0;
	border-bottom: 1px solid var(--border-default);
}
body:not(.agent-full) aside.agent .msg .text .agent_table.stacked tr:nth-child(2) {
	border-top: 1px solid var(--border-default);
}
body:not(.agent-full) aside.agent .msg .text .agent_table.stacked:last-child tr:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
body:not(.agent-full) aside.agent .msg .text .agent_table.stacked td,
body:not(.agent-full) aside.agent .msg .text .agent_table.stacked tr:last-child td {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 0;
	border: none;
	text-align: right;
}
body:not(.agent-full) aside.agent .msg .text .agent_table.stacked td::before {
	content: attr(data-label);
	flex-shrink: 0;
	text-align: left;
	color: var(--text-muted);
}
aside.agent .msg .text code {
	font: 400 12px var(--font-mono, ui-monospace, monospace);
	background: var(--surface-raised);
	border-radius: 4px;
	padding: 0 4px;
}
aside.agent .msg.error .text {
	color: var(--danger);
}
aside.agent .msg .rows {
	margin-top: 8px;
	padding-top: 6px;
	border-top: 1px solid var(--border-default);
}
aside.agent .msg .rows .row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font: 400 12px/1.7 var(--font-body);
	color: var(--text-secondary);
}
aside.agent .msg .rows .row span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
aside.agent .msg .rows .value {
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
aside.agent .msg .file {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border-default);
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-secondary);
}
aside.agent .msg .file span {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
aside.agent .msg .file a {
	font: 600 12px/1.3 var(--font-body);
	color: var(--accent);
}
/* Unter der Sprechblase: Zeitstempel, Antwortzeit, Bewertung */
aside.agent .msg .meta {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-top: 4px;
	font: 400 10px/1.3 var(--font-body);
	color: var(--text-muted);
}
aside.agent .msg .meta .dur {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
aside.agent .msg .meta .rate {
	display: inline-flex;
	gap: 2px;
	margin-left: auto;
}
aside.agent .msg .meta .rate a {
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
	transition: color .15s;
}
aside.agent .msg .meta .rate a:hover {
	color: var(--text-primary);
}
aside.agent .msg .meta .rate a.on,
aside.agent .msg .meta .rate a.on:hover {
	color: var(--accent);
}
aside.agent .msg .meta .rate .rate_down svg {
	transform: scaleY(-1);
}
/* Wartende Antwort: drei pulsierende Punkte */
aside.agent .dots {
	display: inline-flex;
	gap: 4px;
	padding: 4px 0;
}
aside.agent .dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	animation: bc-dot 1.2s ease-in-out infinite;
}
aside.agent .dots i:nth-child(2) { animation-delay: .2s; }
aside.agent .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes bc-dot {
	0%, 80%, 100% { opacity: .25; transform: scale(.8); }
	40% { opacity: 1; transform: scale(1); }
}
@keyframes bc-msg-in {
	from { opacity: 0; transform: translateY(8px) scale(.96); }
	to { opacity: 1; transform: none; }
}
aside.agent .composer {
	position: relative;
	z-index: 2;
}
aside.agent .composer_box {
	position: relative;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
}
aside.agent .composer_box textarea {
	width: 100%;
	min-height: 0;
	padding: 0;
	resize: none;
	background: transparent;
	border: none;
	box-shadow: none;
	outline: none;
	color: var(--text-primary);
	font: 400 13px/1.5 var(--font-body);
}
aside.agent .composer_box textarea:focus {
	border: none;
	box-shadow: none;
}
aside.agent .composer_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 6px;
}
aside.agent .composer_row .badge {
	padding: 3px 8px;
	border-radius: var(--radius-s);
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	font: 600 11px/1.3 var(--font-body);
	color: var(--text-secondary);
}
aside.agent .send_agent {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
	transition: color .15s;
}
aside.agent .send_agent.ready {
	color: var(--accent);
}
aside.agent.busy .send_agent {
	opacity: .4;
	pointer-events: none;
}
.agent_fab {
	display: none;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 580;
	cursor: pointer;
}
/* Ohne Agent-Dienst gibt es die Spalte nicht */
body.no-agent aside.agent,
body.no-agent .agent_fab {
	display: none !important;
}
body.signed_in.no-agent .page {
	margin-right: 0;
}
/* Mobil: kein Schienenplatz, Schaltflaeche unten rechts, Agent als Vollbild */
@media (max-width: 770px) {
	body:not(.static).signed_in .page,
	body:not(.static).signed_in.agent-open .page {
		margin-right: 0;
	}
}

@media (max-width: 770px) {
	body:not(.static) aside.agent {
		display: none;
	}
}

@media (max-width: 770px) {
	body:not(.static) .agent_fab {
		display: grid;
	}
}

@media (max-width: 770px) {
	body:not(.static).agent-open aside.agent {
		display: flex;
		width: 100%;
		z-index: 950;
		background: var(--surface-page);
	}
}

@media (max-width: 770px) {
	body:not(.static).agent-open aside.agent .agent_panel {
		padding: 20px 16px;
	}
}

@media (max-width: 770px) {
	body:not(.static).agent-open .agent_fab {
		display: none;
	}
}

@media (max-width: 770px) {
	body:not(.static) aside.agent .close_agent .icon-collapse {
		display: none;
	}
}

@media (max-width: 770px) {
	body:not(.static) aside.agent .close_agent .icon-close {
		display: block;
	}
}


/* --------------------------------------------------------------------------
   Einstellungen: API-Keys
   -------------------------------------------------------------------------- */
.data.api-keys {
	max-width: 760px;
}
.settings-card {
	padding: 24px;
	border-radius: var(--radius-l);
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
}
.settings-card h2 {
	margin: 0 0 6px;
	font: 600 17px/1.3 var(--font-display);
	letter-spacing: -.01em;
	color: var(--text-primary);
}
.settings-card .hint {
	margin: 0 0 20px;
	font: var(--text-small);
	line-height: 1.5;
	color: var(--text-muted);
}
.api-keys .key_create {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.api-keys .key_create input {
	flex: 1;
	min-width: 200px;
	height: 40px;
}
.api-keys .button.disabled {
	opacity: .45;
	pointer-events: none;
}
.api-keys .new_key {
	margin-bottom: 20px;
	padding: 14px 16px;
	border-radius: var(--radius-m);
	border: 1.5px solid var(--accent);
	box-shadow: var(--glow-border);
	background: rgba(var(--accent-rgb),.05);
}
.api-keys .new_key .title {
	margin-bottom: 6px;
	font: 600 13px/1.4 var(--font-body);
	color: var(--accent);
}
.api-keys .new_key .key_row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.api-keys .new_key code {
	flex: 1;
	min-width: 220px;
	font: var(--text-code);
	color: var(--text-primary);
	word-break: break-all;
	user-select: all;
}
.api-keys .new_key .copy_new_key {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--radius-s);
	border: 1px solid var(--accent);
	font: 600 12px/1.2 var(--font-body);
	color: var(--accent);
	cursor: pointer;
	transition: background .15s;
}
.api-keys .new_key .copy_new_key:hover {
	background: rgba(var(--accent-rgb),.08);
}
.api-keys .list-card {
	margin: 0;
}
.api-keys .list-legend p.medium,
.api-keys .list-view li [data-id].medium {
	width: 27%;
}
.api-keys .list-legend p.small,
.api-keys .list-view li [data-id].small {
	width: 16%;
}
.list-view li > p.code {
	font: var(--text-code);
	color: var(--text-secondary);
	white-space: nowrap;
}
.list-view li > p.muted {
	color: var(--text-muted);
}

/* Dialoge der Pipelines */
#pipeline_box .box {
	width: 420px;
}
#pipeline_box .box.item {
	width: 560px;
}
/* Dialog einer Karte: Tabs, Formular, Zeitstrahl */
#pipeline_box .dlg_tabs {
	display: flex;
	gap: 22px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--border-default);
}
#pipeline_box .dlg_tabs .tab {
	padding: 0 2px 10px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
	transition: color .15s;
}
#pipeline_box .dlg_tabs .tab:hover {
	color: var(--text-primary);
}
#pipeline_box .dlg_tabs .tab.active {
	color: var(--accent);
	font-weight: 600;
	border-bottom-color: var(--accent);
}
#pipeline_box .tab_pane[hidden] {
	display: none;
}
#pipeline_box .form {
	margin-top: 0;
}
#pipeline_box .form input:disabled {
	color: var(--text-secondary);
	cursor: default;
}
#pipeline_box select {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 40px;
	padding: 0 36px 0 12px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-primary);
	font: 400 14px/1.3 var(--font-body);
	outline: none;
	cursor: pointer;
	transition: border-color .15s, box-shadow .2s;
}
#pipeline_box select:focus {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
#pipeline_box select option {
	background: var(--popover-bg);
	color: var(--text-primary);
}
#pipeline_box .select_field:after {
	content: '';
	position: absolute;
	right: 12px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	background: var(--icon-chevron) no-repeat center / contain;
	pointer-events: none;
}
#pipeline_box .note_composer {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 22px;
}
#pipeline_box .note_composer textarea {
	width: 100%;
	min-height: 52px;
	resize: vertical;
}
#pipeline_box .note_composer .row {
	display: flex;
	justify-content: flex-end;
}
#pipeline_box .button.disabled {
	opacity: .45;
	pointer-events: none;
}
#pipeline_box .timeline .empty {
	margin: 0;
	font: var(--text-small);
	color: var(--text-muted);
}
#pipeline_box .tl_month {
	margin: 4px 0 14px;
	font: 600 14px/1.3 var(--font-display);
	color: var(--text-primary);
}
#pipeline_box .tl_item {
	display: flex;
	gap: 14px;
}
#pipeline_box .tl_rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}
#pipeline_box .tl_icon {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-secondary);
}
#pipeline_box .tl_icon.activity {
	color: var(--accent);
}
#pipeline_box .tl_line {
	flex: 1;
	width: 1px;
	margin: 6px 0;
	background: var(--border-strong);
}
#pipeline_box .tl_item.last .tl_line {
	display: none;
}
#pipeline_box .tl_body {
	flex: 1;
	min-width: 0;
	margin-bottom: 14px;
	padding: 12px 14px;
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	border: 1px solid var(--border-default);
}
#pipeline_box .tl_title {
	font: 600 13px/1.3 var(--font-body);
	color: var(--text-primary);
}
#pipeline_box .tl_title span {
	font-weight: 400;
	color: var(--text-secondary);
}
#pipeline_box .tl_ts {
	margin: 4px 0 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-default);
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-muted);
}
#pipeline_box .tl_text {
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-secondary);
	white-space: pre-wrap;
}
#pipeline_box .columns_label {
	margin: 18px 0 8px;
}
#pipeline_box .column_list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#pipeline_box .column_row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px 6px 12px;
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
}
#pipeline_box .column_row .grip {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	cursor: grab;
	background: var(--text-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='9' cy='6' r='1.4'/%3E%3Ccircle cx='15' cy='6' r='1.4'/%3E%3Ccircle cx='9' cy='12' r='1.4'/%3E%3Ccircle cx='15' cy='12' r='1.4'/%3E%3Ccircle cx='9' cy='18' r='1.4'/%3E%3Ccircle cx='15' cy='18' r='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='9' cy='6' r='1.4'/%3E%3Ccircle cx='15' cy='6' r='1.4'/%3E%3Ccircle cx='9' cy='12' r='1.4'/%3E%3Ccircle cx='15' cy='12' r='1.4'/%3E%3Ccircle cx='9' cy='18' r='1.4'/%3E%3Ccircle cx='15' cy='18' r='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
#pipeline_box .column_row input {
	flex: 1;
	height: 32px;
	padding: 0 8px;
	background: transparent;
	border-color: transparent;
	font: 500 14px/1.3 var(--font-body);
}
#pipeline_box .column_row input:focus {
	background: var(--surface-card);
	border-color: var(--accent);
	box-shadow: none;
}
#pipeline_box .column_row .count {
	font: 500 12px/1.3 var(--font-body);
	color: var(--text-muted);
}
#pipeline_box .column_row .remove_row {
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--danger);
	opacity: 0;
	transition: opacity .12s;
	cursor: pointer;
}
#pipeline_box .column_row .remove_row:before {
	content: '';
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
#pipeline_box .column_row:hover .remove_row {
	opacity: 1;
}
#pipeline_box .column_list .sortable-placeholder {
	height: 46px;
	border: 1px dashed var(--accent);
	border-radius: var(--radius-m);
	background: rgba(var(--accent-rgb),.05);
}
#pipeline_box .button.dashed {
	width: 100%;
	border: 1px dashed rgba(var(--secondary-rgb),.35);
	color: var(--text-secondary);
	font-size: 13px;
	padding: 11px 12px;
	box-shadow: none;
}
#pipeline_box .button.dashed:hover {
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: none;
}
#pipeline_box .button.dashed .icon-plus:before,
#pipeline_box .pick .icon-arrow:before {
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E") no-repeat center / contain;
}
#pipeline_box .pick .icon-arrow:before {
	width: 14px;
	height: 14px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3'/%3E%3C/svg%3E");
}
#pipeline_box .pick_list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#pipeline_box .pick {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	font: 500 14px/1.3 var(--font-body);
	color: var(--text-secondary);
	transition: border-color .15s, color .15s, box-shadow .15s;
}
#pipeline_box .pick:hover {
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: var(--glow-border);
}
#pipeline_box .center .spacer {
	flex: 1;
}
.toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translate(-50%, 16px);
	z-index: 1200;
	padding: 10px 16px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--accent);
	box-shadow: var(--glow-border);
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-primary);
	opacity: 0;
	transition: opacity .25s, transform .25s;
	pointer-events: none;
}
.toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}
@media (max-width: 770px) {
	body:not(.static) .pipeline {
		height: auto;
		flex-direction: column;
	}
}

@media (max-width: 770px) {
	body:not(.static) .pipeline .col {
		width: 100%;
		min-width: 0;
		height: auto;
	}
}

@media (max-width: 770px) {
	body:not(.static) .pipeline .cards {
		max-height: 320px;
	}
}


/* --------------------------------------------------------------------------
   Dashboard: Widgets
   -------------------------------------------------------------------------- */

.widgets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 340px;
	gap: 50px;
}
/* Drei Spalten ab 1000px Inhaltsbreite, zwei ab 600px, sonst eine */
@container page (max-width: 999px) {
	.widgets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}
}
@container page (max-width: 599px) {
	.widgets {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}
.widget {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	overflow: visible;
	animation: bc-widget-in .55s cubic-bezier(.2,.8,.3,1) backwards;
	animation-delay: calc(var(--i, 0) * 70ms);
	border-radius: var(--radius-l);
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
	transition: opacity .15s;
}
.widget:nth-child(1) { --i: 0; } .widget:nth-child(2) { --i: 1; } .widget:nth-child(3) { --i: 2; }
.widget:nth-child(4) { --i: 3; } .widget:nth-child(5) { --i: 4; } .widget:nth-child(6) { --i: 5; }
.widget:nth-child(7) { --i: 6; } .widget:nth-child(8) { --i: 7; } .widget:nth-child(9) { --i: 8; }
.widget:nth-child(n+10) { --i: 9; }
.widget.loading {
	opacity: .55;
	pointer-events: none;
}
.widget > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 28px;
}
.widget > header .select {
	display: flex;
	flex-shrink: 0;
}
.widget > header h3 {
	margin: 0;
	font: 600 16px/1.3 var(--font-display);
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.widget-filter.select.pill > input {
	padding: 0 28px 0 10px;
	min-width: 0;
	width: auto;
	field-sizing: content;
}
.select.pill.hover > input {
	color: var(--accent);
}
.select.pill.hover:before {
	filter: none;
}
.widget-filter.select > ul > li.selected > p {
	color: var(--accent);
}
.widget-body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
/* Wie jeder Button im Designsystem: nie gefuellt, Flaeche bleibt transparent,
   gedaempft weisse Border, die bei Hover mit weissem Glow aufleuchtet. */
.widget-footer {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: transparent;
	border: 1px solid rgba(var(--secondary-rgb),.45);
	font: 500 12px/1.3 var(--font-body);
	color: var(--text-secondary);
	transition: color .15s, border-color .15s, box-shadow .15s;
}
.widget-footer:hover {
	color: var(--text-primary);
	border-color: var(--text-primary);
	box-shadow: var(--glow-white);
}
.chart {
	position: relative;
	flex: 1;
	min-height: 140px;
	width: 100%;
}
.chart canvas {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}
.chart-range {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 6px;
	font: 400 10px/1.3 var(--font-body);
	color: var(--text-muted);
}
.chart-range .total {
	font: 600 12px/1.3 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
.key_facts {
	margin: 0;
	padding: 0;
	list-style: none;
}
.key_facts li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-default);
}
.key_facts li:last-child {
	border-bottom: none;
}
.widget:has(.widget-footer) .key_facts li {
	padding: 6px 0;
}
.key_facts li p {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.key_facts li p.label {
	font: var(--text-small);
	color: var(--text-secondary);
	min-width: 0;
}
.key_facts li p.value {
	font: 600 15px/1.4 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
	flex-shrink: 0;
}
.key_facts li.accent p.value {
	color: var(--accent);
}
.key_facts li.empty p.label {
	color: var(--text-muted);
}
.progress_list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.progress_list .row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 6px;
}
.progress_list .row .label {
	font: var(--text-small);
	color: var(--text-secondary);
}
.progress_list .row .value {
	font: 600 15px/1.4 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
.progress_list .bar {
	height: 5px;
	border-radius: 999px;
	background: var(--surface-raised);
}
.progress_list .bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--accent);
	box-shadow: 0 0 8px rgba(var(--accent-rgb),.4);
}
.stat_grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	height: 100%;
}
.stat_grid li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 12px 14px;
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	border: 1px solid var(--border-default);
	min-width: 0;
}
.stat_grid li .value {
	font: 600 24px/1.2 var(--font-display);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.stat_grid li.accent .value {
	color: var(--accent);
}
.stat_grid li .label {
	font: var(--text-small);
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Formulare in Dialogen
   -------------------------------------------------------------------------- */

.form {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}
.form > li {
	position: relative;
	grid-column: 1 / -1;
	min-width: 0;
}
.form > li.medium {
	grid-column: auto;
}
@media (max-width: 770px) {
	body:not(.static) .form > li.medium {
		grid-column: 1 / -1;
	}
}

.form > li label {
	display: block;
	margin-bottom: 6px;
	height: auto;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.form > li .field {
	position: relative;
}
.form > li .field input,
.form > li .field textarea {
	width: 100%;
}
.form > li .field textarea {
	min-height: 120px;
}
.form > li.calc_net .field {
	display: flex;
	align-items: center;
	gap: 8px;
}
.form > li.calc_net .field input {
	flex: 1;
	min-width: 0;
}
.form > li.calc_net .field .mini_btn {
	width: 32px;
	height: 40px;
	flex-shrink: 0;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-muted);
	border-radius: var(--radius-m);
}
.form > li.calc_net .field .mini_btn:hover {
	color: var(--accent);
	border-color: var(--accent);
}
.form > li .field .file_select {
	width: 100%;
	height: 100px;
	border: 1px dashed rgba(var(--secondary-rgb),.35);
	box-shadow: none;
	color: var(--text-secondary);
	font-weight: 600;
	font-size: 13px;
}
.form > li .field .file_select:hover,
.form > li .field .file_select.highlight {
	border-color: var(--accent);
	color: var(--accent);
	background: rgba(var(--accent-rgb),.05);
	box-shadow: none;
}
.form > li .field .file_select input {
	height: 100%;
}
.form > li .field .upload_progress {
	top: 0;
	left: 0;
	z-index: -1;
	border-radius: var(--radius-m);
	overflow: hidden;
}
.form > li .field .file_preview {
	min-height: 200px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	overflow: hidden;
}
.form > li .field .file_preview embed {
	width: 100%;
	height: 400px;
}
.form > li .field .file_preview img {
	width: 100%;
	display: block;
}
/* Einzelne Checkbox im Formular: das Kaestchen bleibt 15px breit, sonst
   zieht die allgemeine Feldregel (input 100%) einen leeren Rahmen ueber die
   ganze Breite, und das Label steht rechts daneben statt darueber. */
.form > li .field > .checkbox {
	display: flex;
	align-items: center;
	margin-top: 4px;
}
.form > li .field > .checkbox input[type="checkbox"] {
	width: 15px;
}
.form > li .field > .checkbox label {
	display: inline-flex;
	margin: 0 0 0 10px;
	height: auto;
	white-space: normal;
	overflow: visible;
	font: 400 14px/1.4 var(--font-body);
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-secondary);
}
.form > li .field > .checkbox input[type="checkbox"]:checked + label {
	color: var(--text-primary);
}
.form > li.checkbox_row + li.checkbox_row {
	margin-top: -8px;
}
.form > li .field .checkboxes {
	min-height: 120px;
	max-height: 240px;
	overflow: auto;
	padding: 6px 4px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
}
.form > li .field .checkboxes ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.form > li .field .checkboxes ul:empty:after {
	content: 'Keine Einträge vorhanden';
	display: block;
	padding: 10px 10px;
	font: var(--text-small);
	color: var(--text-muted);
}
.form > li .field .checkboxes ul li {
	position: relative;
	display: flex;
	align-items: center;
	padding: 7px 10px;
	border-radius: var(--radius-s);
	transition: background .12s;
}
.form > li .field .checkboxes ul li:hover {
	background: rgba(var(--accent-rgb),.05);
}
/* Die Breitenregel fuer Formularfelder (100%) gilt nicht fuer das Haekchen,
   sonst verdraengt es die Beschriftung auf null Breite */
.form > li .field .checkboxes ul input[type="checkbox"] {
	width: 15px;
	flex: 0 0 15px;
	margin: 0;
	align-self: center;
}
.form > li .field .checkboxes ul input[type="checkbox"] + label {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	line-height: 15px;
	margin: 0 0 0 10px;
}
/* Ein Aufwand kommt als Ueberschrift plus Aufzaehlung der Positionen. In der
   Auswahlliste zaehlt nur die Ueberschrift: eine Zeile je Aufwand, bei
   Ueberlaenge mit Auslassungszeichen. Die Aufzaehlung stand sonst neben der
   Ueberschrift, weil die Beschriftung fuer die Ausrichtung ein Flex-Element
   ist und beide Absaetze damit zu Flex-Elementen wurden. */
.form > li .field .checkboxes ul label > p {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.form > li .field .checkboxes ul label > p ~ p {
	display: none;
}
.form > li .field .checkboxes ul li span {
	display: inline-block;
	vertical-align: top;
}
.form > li .field .checkboxes ul li span.num {
	width: 44px;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
.form > li .field .checkboxes ul li span.name {
	width: calc(100% - 150px);
	overflow: hidden;
	text-overflow: ellipsis;
}
.form > li .field .checkboxes ul li span.total {
	width: 100px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.form .info {
	margin: 0;
	font: var(--text-small);
	color: var(--text-secondary);
}
.form .info span {
	margin-right: 8px;
}
/* Reiter innerhalb eines Dialogs */
.tabs .nav {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	gap: 26px;
	border-bottom: 1px solid var(--border-default);
}
.tabs .nav li {
	padding: 0 2px 11px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font: 500 14px/1.2 var(--font-body);
	color: var(--text-muted);
	transition: color .15s;
}
.tabs .nav li:hover {
	color: var(--text-primary);
}
.tabs .nav li.active {
	color: var(--accent);
	font-weight: 600;
	border-bottom-color: var(--accent);
}
.tabs .contents > div {
	display: none;
}
.tabs .contents > div.active {
	display: block;
}
.pin_box {
	padding: 20px;
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
}
.pin_box p {
	color: var(--text-secondary);
}
.pin_box input {
	width: 100%;
}
.tooltip {
	position: relative;
	display: inline-block;
	max-width: 100%;
}
.tooltip:after {
	content: 'i';
	display: inline-grid;
	place-items: center;
	width: 14px;
	height: 14px;
	margin-left: 6px;
	border-radius: 50%;
	border: 1px solid var(--text-muted);
	font: 600 9px/1 var(--font-body);
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-muted);
	vertical-align: 1px;
	cursor: help;
}
.tooltip .tip,
.tooltip span {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: 6px;
	z-index: 300;
	width: 280px;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	font: 400 12px/1.5 var(--font-body);
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-secondary);
	white-space: normal;
	visibility: hidden;
	opacity: 0;
	transition: opacity .15s;
}
.tooltip:hover .tip,
.tooltip:hover span {
	visibility: visible;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Dialoge
   -------------------------------------------------------------------------- */

.modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
	opacity: 0;
	background: rgba(var(--overlay-rgb),.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: opacity .2s, visibility 0s .2s;
}
.modal.show {
	visibility: visible;
	opacity: 1;
	transition: opacity .2s;
}
.modal .container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 24px;
}
.modal .box {
	position: relative;
	width: 600px;
	max-width: 100%;
	max-height: 90vh;
	overflow: auto;
	padding: 28px;
	border-radius: var(--radius-l);
	background: var(--modal-bg);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	color: var(--text-primary);
}
.modal.show .box {
	animation: bc-pop-in .25s cubic-bezier(.3,.9,.35,1.1) both;
}
@media (max-width: 770px) {
	body:not(.static) .modal .container {
		padding: 12px;
	}
}

@media (max-width: 770px) {
	body:not(.static) .modal .box {
		width: 100%;
		padding: 20px;
	}
}

#signin .box {
	width: 420px;
}
.modal h2 {
	margin: 0 0 4px;
	padding-right: 36px;
	font: 600 19px/1.3 var(--font-display);
	letter-spacing: -0.01em;
}
.modal .subline,
.modal .moderate {
	margin: 0 0 22px;
	font: var(--text-small);
	color: var(--text-muted);
}
.modal p {
	margin: 0 0 8px;
}
/* Eigener Editor (js/editor.js): Rahmen, Werkzeugleiste, Inhalt */
.editor_box {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	overflow: visible;
	background: var(--surface-raised);
	transition: border-color .15s, box-shadow .2s;
}
.editor_box:focus-within {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.editor_toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	padding: 6px 8px;
	border-bottom: 1px solid var(--border-default);
	border-radius: var(--radius-m) var(--radius-m) 0 0;
	background: var(--surface-card);
}
.editor_tool {
	position: relative;
	display: inline-flex;
}
.editor_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
	transition: color .12s, background .12s;
}
.editor_btn svg {
	width: 16px;
	height: 16px;
}
.editor_btn:hover {
	color: var(--accent);
}
.editor_btn.active {
	background: rgba(var(--accent-rgb),.10);
	color: var(--accent);
}
.editor_menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 160px;
	margin-top: 4px;
	padding: 6px;
	border: 1px solid var(--accent);
	border-radius: var(--radius-m);
	background: var(--surface-card);
	box-shadow: var(--glow-border);
}
.editor_tool.open .editor_menu {
	display: block;
}
.editor_menu a {
	display: block;
	padding: 8px 10px;
	border-radius: var(--radius-s);
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
	white-space: nowrap;
}
.editor_menu a:hover {
	background: rgba(var(--accent-rgb),.07);
	color: var(--accent);
	text-decoration: none;
}
.editor_content,
.editor_source {
	min-height: 300px;
	padding: 12px 14px;
	box-sizing: border-box;
	outline: none;
	font: 400 14px/1.55 var(--font-body);
	color: var(--text-primary);
	background: transparent;
}
.editor_source {
	display: none;
	width: 100%;
	border: none;
	resize: vertical;
	font: 400 13px/1.5 var(--font-mono, ui-monospace, monospace);
}
.editor_content p {
	margin: 0 0 8px;
}
.editor_content p.small {
	font-size: .8em;
}
.editor_content ul,
.editor_content ol {
	margin: 20px 0;
	padding-left: 22px;
}
.editor_content b,
.editor_content strong {
	font-weight: 600;
}
.modal .box > .close {
	position: absolute;
	right: 20px;
	top: 20px;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
}
.modal .box > .close:hover {
	color: var(--text-primary);
}
.modal .pack {
	padding-top: 4px;
}
.modal button {
	width: 100%;
	margin-top: 6px;
}
.modal .center {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 26px;
}
.modal .center .button + .button {
	margin: 0;
}
.modal .center .bad {
	order: -1;
}
.modal .box_content > div > .form {
	margin-top: 0;
}
#error_msg {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	background: rgba(242,109,109,.12);
	border: 1px solid rgba(242,109,109,.4);
	color: var(--danger);
	font: var(--text-small);
	text-align: center;
}
/* Rich-Text-Editor (Froala): dunkle Flaeche, Heroicons-Werkzeugleiste,
   Fokus-Glow wie bei den Eingabefeldern. */

/* --------------------------------------------------------------------------
   Einstellungen und Datenformulare (.data)
   -------------------------------------------------------------------------- */

.split {
	display: flex;
	gap: 36px;
	align-items: flex-start;
}
.split-content {
	flex: 1;
	min-width: 0;
}
.anchor_nav {
	position: sticky;
	top: 20px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 190px;
	max-width: 220px;
	flex-shrink: 0;
}
.anchor_nav .anchor {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-left: 2px solid var(--border-default);
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-muted);
	transition: color .15s, border-color .15s;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.anchor_nav .anchor:hover {
	color: var(--text-primary);
}
.anchor_nav .anchor.active {
	color: var(--accent);
	font-weight: 600;
	border-left-color: var(--accent);
}
.anchor_nav .anchor.add {
	border-left-color: transparent;
}
.anchor_nav .anchor.add:hover {
	color: var(--accent);
}
@media (max-width: 770px) {
	body:not(.static) .split {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
}

/* Mobil wird die Sprungmarken-Navigation zur waagerecht scrollbaren Zeile,
   die Eintraege behalten ihre linke Linie (Designsystem). */
@media (max-width: 770px) {
	body:not(.static) .anchor_nav {
		position: static;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		max-width: none;
		min-width: 0;
		gap: 2px;
		padding-bottom: 2px;
	}
}

@media (max-width: 770px) {
	body:not(.static) .anchor_nav::-webkit-scrollbar {
		display: none;
	}
}

@media (max-width: 770px) {
	body:not(.static) .anchor_nav .anchor {
		flex-shrink: 0;
	}
}

.data {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 760px;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	text-align: left;
}
.data > ul {
	list-style: none;
	margin: 0;
	padding: 24px;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px 24px;
	border-radius: var(--radius-l);
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
	scroll-margin-top: 20px;
}
.data > ul > li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
}
.data > ul > li:first-child:has(h3),
.data > ul > li:has(textarea) {
	grid-column: 1 / -1;
}
.data > ul > li h3 {
	font: 600 17px/1.3 var(--font-display);
	letter-spacing: -0.01em;
	margin-bottom: 2px;
}
.data > ul > li:has(h3) + li:not(:has(label)) {
	grid-column: 1 / -1;
	color: var(--text-secondary);
}
.data label {
	width: 100%;
	float: none;
	line-height: 1.2;
}
.data .select,
.data input,
.data textarea,
.data .no-image,
.data label + * {
	width: 100%;
	float: none;
}
.data textarea {
	min-height: 120px;
}
.data > .options {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	padding: 0 0 8px;
	background: transparent;
}
.data h2,
.data h3,
.data p {
	margin: 0;
}
.data > ul > li .upload {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
	padding: 14px 16px;
	border-radius: var(--radius-m);
	border: 1px dashed rgba(var(--secondary-rgb),.35);
	background: transparent;
	color: var(--text-secondary);
	font: 600 13px/1.3 var(--font-body);
	cursor: pointer;
	text-align: center;
	transition: border-color .15s, color .15s;
}
.data > ul > li .upload:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.data > ul > li .upload input {
	width: 100%;
}
.data > ul > li .preview {
	display: block;
	width: 150px;
	min-height: 200px;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	border: 1px solid var(--border-strong);
	background: var(--paper);
}
.data > ul > li .preview[src=""] {
	display: none;
}
.data > ul > li .preview + .no-image,
.data > ul > li .no-image {
	display: none;
	padding: 14px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	text-align: center;
	font: var(--text-small);
	color: var(--text-muted);
}
.data > ul > li .preview[src=""] + .no-image {
	display: block;
}
.data > ul > li .mail_logo_container {
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-m);
	background: var(--paper);
	border: 1px solid var(--border-strong);
}
.data > ul > li .mail_logo_container img {
	max-width: 80%;
	max-height: 160px;
	object-fit: contain;
	object-position: center;
}
.data > ul > li .mail_logo_container:has(img[src=""]) {
	display: none;
}
.upload_progress {
	position: absolute;
	width: 100%;
	height: 100%;
}
.upload_bar {
	background: rgba(var(--accent-rgb),.25);
	height: 100%;
	position: absolute;
}
/* Listen innerhalb der Einstellungen (Bankkonten, Datev-Adressen) */
.data:has(> .list-legend) {
	display: block;
	max-width: none;
	border-radius: var(--radius-l);
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
	overflow: hidden;
}
.data:has(> .list-legend) > .options {
	padding: 14px 20px;
	border-top: 1px solid var(--border-default);
	justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   Startseite (abgemeldet)
   -------------------------------------------------------------------------- */

.landing {
	flex: 1;
	min-height: calc(100vh - 200px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.landing-card {
	width: 420px;
	max-width: 100%;
	padding: 36px 32px;
	text-align: center;
	border-radius: var(--radius-l);
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
}
.landing-card h1 {
	margin: 0;
	font: 600 22px/1.3 var(--font-display);
	letter-spacing: -0.01em;
	color: var(--text-primary);
}
.landing-card h1.wordmark {
	font-size: 34px;
	letter-spacing: -0.03em;
}
.landing-card p {
	margin: 10px 0 24px;
	font: var(--text-body);
	color: var(--text-muted);
}
.landing-card .button {
	padding: 10px 18px;
}
.fullscreen {
	min-height: 60vh;
}
.alert {
	padding: 16px 16px 16px 48px;
	position: relative;
	border-radius: var(--radius-m);
	border: 1px solid rgba(242,109,109,.4);
	background: rgba(242,109,109,.08);
	color: var(--text-secondary);
}
.alert:before {
	content: "\26a0";
	font-family: 'entypo', sans-serif;
	position: absolute;
	left: 16px;
	top: 14px;
	font-size: 20px;
	color: var(--danger);
}
.cookies {
	position: relative;
	background: var(--popover-bg);
	border-bottom: 1px solid var(--border-default);
	color: var(--text-secondary);
	font: var(--text-small);
}
.cookies .wrapper {
	padding: 14px 60px 14px 20px;
}
.cookies .close {
	position: absolute;
	right: 20px;
	top: 12px;
}
.cookies .wrapper p a {
	color: var(--accent);
}
#forgotten_email {
	margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Wartezustand
   -------------------------------------------------------------------------- */

.waiter {
	display: flex;
	justify-content: center;
	padding: 24px 0;
	position: relative;
	z-index: 500;
}
section .waiter {
	padding-top: 140px;
}
/* Seitenwechsel: Loader mittig ueber der Seite, ohne Abdunkeln */
.page > .waiter {
	position: fixed;
	inset: 0;
	z-index: 900;
	padding: 0;
	align-items: center;
	pointer-events: none;
}
.loader {
	display: block;
}
.loader .ring {
	fill: var(--accent);
	transform-origin: 60px 60px;
	animation: bc-load-ring 1.5s ease-out infinite;
}
.loader .blink {
	fill: var(--accent-hover);
	transform-origin: 60px 60px;
	animation: bc-load-blink 1.5s ease-in-out infinite;
}
@keyframes bc-load-ring {
	0% { opacity: .7; transform: scale(1); }
	100% { opacity: 0; transform: scale(3.2); }
}
@keyframes bc-load-blink {
	0% { opacity: 0; transform: scale(1.2); }
	12% { opacity: 1; transform: scale(1); }
	55% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}
/* Kleiner Loader in Schaltflaechen ("Bitte warten") */
.button .loader,
button .loader {
	flex-shrink: 0;
}
/* Waehrend die Schaltflaeche arbeitet, dreht sich nur ihr Symbol; jQuery kann
   an SVG-Elementen keine Klassen setzen, deshalb liegt busy auf dem Button */
.button.busy > svg {
	animation: bc-spin 1s linear infinite;
}
@keyframes bc-spin {
	to { transform: rotate(360deg); }
}
.browser_nav {
	display: none;
}

/* --------------------------------------------------------------------------
   Kleine Bildschirme
   -------------------------------------------------------------------------- */

/* Auf kleinen Bildschirmen bleiben nur die Spalten mit show_mobile stehen,
   dazu die Auswahlspalte. Die Kopfzeile bleibt sichtbar und zeigt dieselben
   Spalten, damit man weiss, was in der Liste steht und wonach sortiert wird.
   Ihr Innenabstand folgt dem der Zeilen, sonst stehen die Spalten versetzt. */
@media (max-width: 770px) {
	body:not(.static) .list-legend {
		padding: 0 36px 0 12px;
	}

	body:not(.static) .list-legend p:not(.show_mobile):not([data-id='select']),
	body:not(.static) .list-view li [data-id]:not(.show_mobile):not([data-id='select']) {
		display: none;
	}

	/* Die beiden verbleibenden Spalten teilen sich den Platz neben dem
	   Haekchen. Feste Prozente gingen mit der Auswahlspalte nicht auf. */
	body:not(.static) .list-legend p.show_mobile,
	body:not(.static) .list-view li [data-id].show_mobile {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
	}

	/* Die auf dem grossen Bildschirm gemessenen Breiten (list_layout) gelten
	   hier nicht, die Zeile fuellt wieder die Karte. */
	body:not(.static) .list-card .list-legend,
	body:not(.static) .list-card .list-view > li {
		width: 100%;
		min-width: 0;
	}
	body:not(.static) .col-resize {
		display: none;
	}
}

@media (max-width: 770px) {
	body:not(.static) .list-view > li {
		padding-left: 12px;
		padding-right: 36px;
	}

	/* Rechts steht in jeder Liste das Zeilenmenue. Buchfuehrung und
	   Rechnungen zeigen daneben die Marke fuer den hinterlegten Beleg, auf
	   breiten Bildschirmen sitzt sie in der Belegspalte. Auf schmalen faellt
	   die Spalte weg, deshalb halten nur diese zwei Listen rechts mehr frei
	   und die Marke bekommt ihren eigenen Streifen neben dem Menue. */
	body:not(.static) .list-legend.for-receipts,
	body:not(.static) .list-legend.for-bills {
		padding-right: 68px;
	}

	body:not(.static) .list-view.bank-receipts > li,
	body:not(.static) .list-view.bills > li {
		padding-right: 68px;
	}

	body:not(.static) .list-view.bank-receipts li.has-receipt:after,
	body:not(.static) .list-view.bills li.in-datev:after {
		right: 32px;
		width: 32px;
	}
}

@media (max-width: 770px) {
	body:not(.static) .list-view > li > [data-id] {
		padding: 10px 6px;
	}
}

@media (max-width: 770px) {
	body:not(.static) .list-filter > * {
		flex: 1 1 calc(50% - 6px);
	}
}

@media (max-width: 770px) {
	body:not(.static) .list-filter .spacer {
		display: none;
	}
}

@media (max-width: 770px) {
	body:not(.static) .list-filter .search_filter {
		width: 100%;
		flex-basis: 100%;
	}
}

@media (max-width: 770px) {
	body:not(.static) .page-actions {
		width: 100%;
	}
}

@media (max-width: 770px) {
	body:not(.static) .page-actions .button {
		flex: 1;
	}
}

@media (max-width: 770px) {
	body:not(.static) .slide_navi {
		overflow: visible;
	}
}

@media (max-width: 770px) {
	body:not(.static) .kanban {
		height: auto;
		flex-direction: column;
	}
}

@media (max-width: 770px) {
	body:not(.static) .kanban .col {
		max-width: none;
		flex-basis: auto;
	}
}

@media (max-width: 770px) {
	body:not(.static) .kanban .cards {
		max-height: 320px;
	}
}

@media (max-width: 770px) {
	body:not(.static) h1 {
		font-size: 24px;
	}
}


@media (prefers-reduced-motion: reduce) {
	.widget, aside.nav, .page-title, .page-actions, aside nav ul li.active .nav_icon,
	.content-card.list-card, .list-view > li {
		animation: none !important;
	}
}

/* --------------------------------------------------------------------------
   Druck
   -------------------------------------------------------------------------- */

@media print {

	body {
		background: #fff;
		color: #000;
		font-size: 12px;
	}
	#bg-waves,
	aside.nav,
	.page > header,
	footer,
	.page-actions,
	.list-filter,
	.slide_navi .user_navi li:not(.active),
	.list-legend-colors,
	.list-view li .options {
		display: none !important;
	}
	body.signed_in .page {
		margin-left: 0 !important;
	}
	.page > section {
		padding: 0;
	}
	h1, h2, h3,
	.list-view > li > [data-id],
	.list-legend p,
	.key_facts li p {
		color: #000 !important;
	}
	.content-card,
	.widget,
	.data > ul {
		background: none;
		border-color: #ccc;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.list-view > li,
	.list-legend {
		border-color: #ddd;
	}
	.list-view li {
		page-break-inside: avoid;
	}
	input[type='text'],
	input[type='password'],
	textarea {
		border: 1px solid #000;
		box-shadow: none;
		background: #fff;
		color: #000;
	}
}

/* Dialog ruckelt bei einer abgelehnten Eingabe (modal_shake in header.js) */
@keyframes bc-shake {
	0% { left: 0; }
	20% { left: -20px; }
	40% { left: 20px; }
	60% { left: -20px; }
	80% { left: 20px; }
	100% { left: 0; }
}
.modal .box.shake {
	animation: bc-shake .4s ease-in-out;
}
.modal.show .box.shake {
	animation: bc-pop-in .25s cubic-bezier(.3,.9,.35,1.1) both, bc-shake .4s ease-in-out;
}

/* Platzhalter eines Bereichs, der verlinkt, aber noch nicht gestaltet ist
   (Designsystem: ComingSoon). Schraubenschluessel in leuchtendem Rahmen. */
.content-card.coming-soon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 40px 20px;
	text-align: center;
}
.coming-soon .badge {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-m);
	border: 1px solid var(--accent);
	color: var(--accent);
	box-shadow: var(--glow-border);
}
.coming-soon h2 {
	margin: 0;
	font: var(--text-h2);
	letter-spacing: var(--ls-h2);
	color: var(--text-primary);
}
.coming-soon p {
	margin: 0;
	max-width: 420px;
	font: var(--text-body);
	color: var(--text-muted);
}

/* ---------------------------------------------------------------------------
   Vertraege: Zustandskapsel, Abweichungszeichen, Kategoriekarten
   --------------------------------------------------------------------------- */
.list-view > li > [data-id].strong {
	font-weight: 500;
	color: var(--text-primary);
}
.list-view > li > [data-id].warn {
	color: var(--warning);
}
.list-view li p .state {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	height: 24px;
	padding: 0 10px;
	border-radius: var(--radius-s);
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	vertical-align: middle;
	font: 600 11px/1 var(--font-body);
	letter-spacing: .02em;
	color: var(--text-muted);
	white-space: nowrap;
	text-decoration: none;
}
.list-view li p .state.active {
	color: var(--accent);
	background: rgba(var(--accent-rgb),.12);
	border-color: var(--accent);
}
.list-view li p .state.notice {
	color: var(--warning);
	background: rgba(245,185,80,.14);
	border-color: var(--warning);
}
.list-view.contracts > li[data-state='active']:before {
	background: var(--accent);
}
.list-view.contracts > li[data-state='notice']:before {
	background: var(--warning);
}
.list-view.contracts > li[data-state='cancelled']:before,
.list-view.contracts > li[data-state='expired']:before {
	background: var(--gray-400);
}
.list-view.contracts > li[data-state='cancelled'],
.list-view.contracts > li[data-state='expired'] {
	opacity: .6;
}
.list-view.contracts > li[data-state='cancelled'] > [data-id],
.list-view.contracts > li[data-state='expired'] > [data-id] {
	color: var(--text-muted);
}
.list-view.contracts > li[data-state='expired'] > [data-id]:not([data-id='select']):not([data-id='status']) {
	text-decoration: line-through;
}
/* Weicht die letzte Belastung um mehr als zwei Prozent ab: kleines Zeichen
   in der Warnfarbe, der Tooltip nennt beide Werte. */
.list-view li p .deviation {
	display: inline-grid;
	place-items: center;
	width: 16px;
	height: 16px;
	margin-left: 4px;
	border-radius: 50%;
	border: 1px solid var(--warning);
	color: var(--warning);
	font: 700 10px/1 var(--font-body);
	vertical-align: middle;
	cursor: help;
}
.list-legend-colors .is-active:before,
.list-legend-colors .is-notice:before {
	background: var(--accent);
}
.list-legend-colors .is-notice:before {
	background: var(--warning);
}
.list-legend-colors .is-expired {
	text-decoration: line-through;
}
.category-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}
.category-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-m);
	min-width: 0;
}
.category-card .label {
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.category-card .value {
	font: 600 20px/1.2 var(--font-display);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
.category-card .bar {
	display: block;
	height: 3px;
	margin-top: 6px;
	border-radius: 2px;
	background: var(--border-default);
	overflow: hidden;
}
.category-card .bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--accent-hover), var(--accent));
}
@media (max-width: 770px) {
	body:not(.static) .category-cards {
		grid-template-columns: 1fr 1fr;
	}
}
/* Letzte Belastungen im Vertragsdialog */
.form .info.charges_info {
	display: block;
}
.form .charges_info .label {
	display: block;
	margin-bottom: 8px;
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
}
.form .charges {
	list-style: none;
	margin: 0;
	padding: 4px 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
}
.form .charges li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-default);
	font: 400 13px/1.3 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
}
.form .charges li:last-child {
	border-bottom: none;
}
.form .charges li span:last-child {
	font-weight: 500;
	color: var(--text-primary);
}
.form .charges li.warn span:last-child {
	color: var(--warning);
}
.modal .center .contract-cancel-dialog {
	margin-right: auto;
	order: -2;
	align-self: center;
	font: 600 14px var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
	transition: color .15s;
}
.modal .center .contract-cancel-dialog:hover {
	color: var(--danger);
}

/* ---------------------------------------------------------------------------
   Listenansicht nach dem Designsystem: Spaltenmenue im Kopf, fixierte
   Randzellen ueber Clip-Path und Klone (list_columns, list_edges in ui.js)
   --------------------------------------------------------------------------- */

/* Der Kopf teilt sich den Scroller mit den Zeilen. Ist die Liste breiter
   als die Karte, scrollt der Scroller waagerecht, seine Leiste bleibt
   unsichtbar. Die Mindestbreite haelt die Spalten lesbar, darunter wird
   gescrollt statt gequetscht. */
.content-card.list-card {
	position: relative;
	--list-min: 820px;
}
.content-card.list-card.wide {
	--list-min: 1000px;
}
.list-card .list-legend,
.list-card .list-view > li {
	min-width: var(--list-min);
}
.list-card .scrollable.scroll-x {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}
.list-card .scrollable.scroll-x::-webkit-scrollbar {
	display: none;
}
/* Die Randzonen des Scrollers werden weggeschnitten, die Klone in den
   Randebenen zeichnen sie ausserhalb. Harte Kante, kein Verlauf. */
.list-card.edged .scrollable.scroll-x {
	clip-path: inset(0 var(--rw, 0px) 0 var(--lw, 0px));
}
.list-legend {
	position: relative;
}
.list-legend p.table-options {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: auto;
	min-width: 0;
	padding: 0;
	overflow: visible;
	flex: none;
}
.mini_btn.table-menu {
	width: 26px;
	height: 26px;
	display: inline-grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
	transition: color .15s;
}
.mini_btn.table-menu:before {
	content: '';
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--icon-dots) no-repeat center / contain;
	mask: var(--icon-dots) no-repeat center / contain;
}
.mini_btn.table-menu:hover {
	color: var(--text-primary);
}
.mini_btn.table-menu.open {
	color: var(--accent);
}
/* Spaltenmenue: dunkles Popover mit Schalter je Spalte */
#column_menu {
	position: fixed;
	z-index: 220;
	width: 230px;
	padding: 8px 6px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	animation: bc-fade-in .12s ease both;
}
#column_menu .title {
	padding: 4px 10px 8px;
	font: 600 11px/1.2 var(--font-body);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-muted);
}
#column_menu .entry {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: var(--radius-s);
	cursor: pointer;
	font: 500 13px/1.2 var(--font-body);
	color: var(--text-secondary);
}
#column_menu .entry:hover {
	background: rgba(var(--accent-rgb),.05);
}
#column_menu .entry .label {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#column_menu .switch {
	position: relative;
	flex-shrink: 0;
	width: 28px;
	height: 16px;
	border-radius: 999px;
	background: var(--ink-700);
	transition: background .15s;
}
#column_menu .switch:after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gray-300);
	transition: left .15s, background .15s;
}
#column_menu .entry.on .switch {
	background: var(--accent);
}
#column_menu .entry.on .switch:after {
	left: 14px;
	background: var(--green-900);
}
/* Randebenen: je Zeile ein Klon der ersten und der letzten Zelle. Sie
   liegen ueber der Karte, zeichnen Linie, Farbbalken, Haekchen, Menue und
   den Hover der Zeile in derselben Toenung. */
.list-edge {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 3;
	pointer-events: none;
	display: none;
}
.list-card.edged .list-edge {
	display: block;
}
.list-edge.left {
	left: 0;
}
.list-edge.right {
	right: 0;
}
.edge-cell {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	pointer-events: auto;
	transition: background .12s;
}
.edge-cell:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--bb, var(--border-default));
}
.edge-cell.no-border:after {
	display: none;
}
.edge-cell.head {
	cursor: default;
}
.edge-cell.hover {
	background: rgba(var(--accent-rgb),.04);
}
.edge-cell.selected {
	background: rgba(var(--accent-rgb),.07);
}
.edge-cell .stripe {
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 3px;
	border-radius: 2px;
	background: var(--stripe, transparent);
}
.list-edge.left .edge-cell {
	padding-left: 20px;
}
.list-edge.left .edge-cell .multi-select {
	display: block;
}
.list-edge.right .edge-cell {
	justify-content: flex-end;
	padding-right: 8px;
}
.list-edge.right .edge-cell .options {
	position: relative;
	opacity: 0;
	transition: opacity .12s;
}
.list-edge.right .edge-cell.hover .options,
.list-edge.right .edge-cell .options:hover,
.list-edge.right .edge-cell.head .options {
	opacity: 1;
}
.list-edge.right .edge-cell .options > .mini_btn.menu span {
	display: none;
}
.list-edge.right .edge-cell .options > .mini_btn.menu:before {
	content: '';
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--icon-dots) no-repeat center / contain;
	mask: var(--icon-dots) no-repeat center / contain;
}
.list-edge.right .edge-cell .options:hover > .mini_btn.menu {
	color: var(--accent);
}
.list-edge.right .edge-cell .options:before {
	content: '';
	position: absolute;
	left: -10px;
	right: -10px;
	top: 100%;
	height: 8px;
}
.list-edge.right .edge-cell .options .hidden_menu {
	position: absolute;
	right: 0;
	top: 100%;
	display: none;
	list-style: none;
	margin: 0;
	padding: 6px;
	width: 240px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	z-index: 100;
	animation: bc-fade-in .12s ease both;
}
.list-edge.right .edge-cell.up .options .hidden_menu {
	top: auto;
	bottom: 100%;
}
.list-edge.right .edge-cell .options:hover .hidden_menu:not(:empty) {
	display: block;
}
.list-edge.right .edge-cell .options .hidden_menu li {
	margin: 0;
	padding: 0;
}
.list-edge.right .edge-cell .options .hidden_menu .mini_btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: auto;
	padding: 8px 10px;
	text-align: left;
	white-space: nowrap;
	font: 500 13px/1.2 var(--font-body);
	color: var(--text-secondary);
	border-radius: var(--radius-s);
	cursor: pointer;
}
.list-edge.right .edge-cell .options .hidden_menu .mini_btn:hover {
	background: rgba(var(--accent-rgb),.07);
	color: var(--text-primary);
}
.list-edge.right .edge-cell .options .hidden_menu .mini_btn span {
	width: 16px;
	display: inline-block;
	text-align: center;
	font-size: 13px;
	color: var(--text-muted);
}
.list-edge.right .edge-cell .options .hidden_menu .mini_btn:hover span {
	color: var(--accent);
}
.list-edge.right .edge-cell .options .hidden_menu .mini_btn:after {
	content: attr(title);
	overflow: hidden;
	text-overflow: ellipsis;
}
.list-edge.right .edge-cell .options .hidden_menu .mini_btn.remove,
.list-edge.right .edge-cell .options .hidden_menu .mini_btn.cancel,
.list-edge.right .edge-cell .options .hidden_menu .mini_btn.remove span,
.list-edge.right .edge-cell .options .hidden_menu .mini_btn.cancel span {
	color: var(--danger);
}
/* Die Zeile toent sich auch, wenn der Zeiger auf ihrem Klon steht */
.list-view > li.edge-hover {
	background: rgba(var(--accent-rgb),.04);
}
@media (max-width: 770px) {
	body:not(.static) .content-card.list-card {
		--list-min: 0px;
	}
}

/* --------------------------------------------------------------------------
   Spaltenbreiten und Breitenregler (list_layout, list_resizers in ui.js)
   -------------------------------------------------------------------------- */

/* Mit gemessenen Breiten schrumpft keine Spalte mehr: Kopf und Zeilen sind so
   breit wie ihre Spalten zusammen, mindestens so breit wie die Karte. Ist die
   Summe groesser, scrollt der Scroller waagerecht (scroll-x). */
.list-card.sized .list-legend,
.list-card.sized .list-view > li {
	width: max-content;
	min-width: 100%;
}
.list-card.sized .list-legend p[data-id='select'],
.list-card.sized .list-view > li > [data-id='select'] {
	flex: 0 0 40px;
	width: 40px;
	min-width: 40px;
}
/* Messzustand: alle Zellen auf die Breite ihres Inhalts */
.list-card.measure .list-legend p,
.list-card.measure .list-view > li > [data-id] {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}
/* Die Reihenfolge der Spalten setzt list_columns_apply ueber order; alles,
   was keine Spalte ist (Zeilenmenue, Kopfmenue), bleibt hinten. */
.list-legend p.table-options,
.list-view > li > :not([data-id]) {
	order: 9999;
}
.list-legend p {
	position: relative;
}
/* Breitenregler am rechten Rand des Spaltenkopfs, nur beim Ueberfahren */
.col-resize {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 10px;
	cursor: col-resize;
	opacity: 0;
	transition: opacity .12s;
	z-index: 2;
	touch-action: none;
}
.col-resize:after {
	content: '';
	position: absolute;
	left: 4px;
	top: 9px;
	bottom: 9px;
	width: 2px;
	border-radius: 1px;
	background: var(--accent);
}
.list-legend p:hover > .col-resize,
.col-resize.active {
	opacity: 1;
}
.list-card.resizing,
.list-card.resizing * {
	cursor: col-resize !important;
	user-select: none;
}
.list-card.resizing .col-resize:not(.active) {
	opacity: 0;
}
/* Griff im Spaltenmenue zum Verschieben */
#column_menu .grip {
	flex-shrink: 0;
	width: 13px;
	height: 13px;
	cursor: grab;
	color: var(--text-muted);
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='9' cy='6' r='1.4'/%3E%3Ccircle cx='15' cy='6' r='1.4'/%3E%3Ccircle cx='9' cy='12' r='1.4'/%3E%3Ccircle cx='15' cy='12' r='1.4'/%3E%3Ccircle cx='9' cy='18' r='1.4'/%3E%3Ccircle cx='15' cy='18' r='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='9' cy='6' r='1.4'/%3E%3Ccircle cx='15' cy='6' r='1.4'/%3E%3Ccircle cx='9' cy='12' r='1.4'/%3E%3Ccircle cx='15' cy='12' r='1.4'/%3E%3Ccircle cx='9' cy='18' r='1.4'/%3E%3Ccircle cx='15' cy='18' r='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
#column_menu .entry:hover .grip {
	color: var(--text-primary);
}
#column_menu .entry.sortable-placeholder {
	opacity: .35;
}

/* Selects in der Werkzeugleiste ueber den Listen in Eingabegroesse, wie
   PillSelect size="input" im Designsystem (ui_kits/app/widgets.jsx): so hoch
   wie das Suchfeld und die Umschalter daneben. Die kleinen Pillen bleiben
   den Widget-Koepfen und der Seitenwahl im Listenfuss vorbehalten. */
.list-filter .select.pill > input,
.list-filter .checkboxes.pill .selected {
	height: 40px;
	padding: 0 36px 0 12px;
	border-radius: var(--radius-m);
	border-color: var(--border-strong);
	color: var(--text-primary);
	font: 400 14px/1 var(--font-body);
	letter-spacing: 0;
}
/* Die Mehrfachauswahl ist ein Block mit Ellipse, der Text steht ueber die
   Zeilenhoehe mittig */
.list-filter .checkboxes.pill .selected {
	line-height: 40px;
}
.list-filter .select.pill:before,
.list-filter .checkboxes.pill:before {
	width: 14px;
	height: 14px;
	margin-top: -7px;
	right: 12px;
}
.list-filter .select.pill.hover > input {
	color: var(--text-primary);
	border-color: var(--accent);
}
.list-filter .select.pill > ul {
	left: 0;
	right: auto;
	min-width: 100%;
}
/* Das Spaltenmenue im Kopf ist ein Knopf, kein Sortierlink: kein Dreieck */
.list-legend p.table-options a:after {
	display: none;
}