/* ==========================================================================
   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");
}

/* 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;
}
.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, beide aus entypo: die Klammer steht fuer
   den hinterlegten Beleg, die Wolke fuer den Versand an Datev. */
.list-view.bank-receipts li.has-receipt:before,
.bills li.in-datev:before {
	content: "\1F4CE";
	left: auto;
	right: 44px;
	top: 0;
	bottom: 0;
	width: 60px;
	height: auto;
	border-radius: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 400 16px 'entypo', sans-serif;
	color: var(--accent);
	pointer-events: none;
}
.list-view.bank-receipts li.has-receipt.in-datev:before,
.bills li.in-datev:before {
	content: "\e711";
	font-family: 'entypo', sans-serif;
	font-size: 15px;
}
.bills > li,
.list-legend.for-bills {
	padding-right: 80px;
}
.bills li.in-datev:before {
	right: 44px;
	width: 36px;
}
/* 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,
.address-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 {
	width: 150px;
	min-height: 200px;
	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;
		width: auto;
		min-width: 0;
	}
}

@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:before,
	body:not(.static) .list-view.bills li.in-datev:before {
		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;
}