/* ==========================================================================
   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);
}
.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);
}
.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;
}
.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%;
}
/* 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);
}
.bills li[data-type='archive'] p[data-id='date_archived'] {
	display: block;
}
.bills li[data-type='archive'] p[data-id='days_left'] {
	display: none;
}
@media (max-width: 770px) {
	:not(.static) .bills li[data-type='archive'] p[data-id='date_archived'] {
		display: none;
	}
}

.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;
}
/* Beleg-Haekchen und Datev-Marke */
.list-view.bank-receipts li.has-receipt:before,
.bills li.in-datev:before {
	content: "\2713";
	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: 600 16px var(--font-body);
	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 .entypo-alert {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: var(--radius-s);
	color: var(--warning);
	cursor: help;
}
.bills li .bank_match:hover .entypo-alert {
	background: rgba(245,185,80,.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;
}
.widget-footer {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--surface-raised);
	border: 1px solid var(--border-default);
	font: 500 12px/1.3 var(--font-body);
	color: var(--text-secondary);
	transition: color .15s, border-color .15s;
}
.widget-footer:hover {
	color: var(--accent);
	border-color: rgba(var(--accent-rgb),.4);
}
.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;
}
.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
   -------------------------------------------------------------------------- */

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

@media (max-width: 770px) {
	body:not(.static) .list-view li [data-id]:not(.show_mobile) {
		display: none;
	}
}

@media (max-width: 770px) {
	body:not(.static) .list-view li [data-id].show_mobile {
		width: 50%;
	}
}

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

@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;
}