/* GEBAUT aus css/src/ mit php css/build.php, nicht von Hand aendern */
/* ==========================================================================
   billcreator — Oberflaeche nach dem Designsystem (Dark Mode, Akzent #00D09B)
   Tokens aus tokens/colors.css, typography.css und spacing.css des Systems.
   ========================================================================== */

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

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

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

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

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

@keyframes bc-glow-in {
	from { box-shadow: 0 0 0 rgba(var(--accent-rgb),0); }
	to { box-shadow: var(--glow-border); }
}
@keyframes bc-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes bc-pop-in {
	from { opacity: 0; transform: translateY(14px) scale(.97); }
	to { opacity: 1; transform: none; }
}
@keyframes bc-label-in {
	0% { opacity: 0; margin-top: 14px; }
	40% { opacity: 0; }
	100% { opacity: 1; margin-top: 0; }
}
/* Einblenden beim Laden: Widgets von gross nach klein, Seitenleiste von
   links, Titel und Aktionen von oben mit kurzem Versatz. */
/* Zeilen einer Liste blenden senkrecht ein. bc-widget-in skaliert von 1.2 auf
   1; die Kopfzeile skaliert nicht mit, also wandern waehrend der Animation
   alle Zellen waagerecht in ihre Endlage. Links laeuft das Haekchen nach
   rechts, rechts laeuft der Betrag nach links, und beides sieht aus wie ein
   Sprung. Senkrecht bewegt sich nur die Zeile, nie die Spalten gegeneinander. */
@keyframes bc-row-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
@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);
}
/* Das Account-Menue liegt im nav, seine Beschriftungen bleiben auch
   eingeklappt stehen, das Menue klappt ja als Fenster auf. */
body.nav-collapsed aside .wordmark,
body.nav-collapsed aside nav .title:not(.account_menu .title) {
	display: none;
}
@media (max-width: 1179px) {
	body:not(.static) aside .wordmark,
	body:not(.static) aside nav .title:not(.account_menu .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;
	}
}

.theme_toggle .icon-moon,
[data-theme="light"] .theme_toggle .icon-sun {
	display: none;
}
[data-theme="light"] .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;
	/* Abstand zum Inhalt links wie rechts 20px: die Randspalte traegt 20px,
	   der Inhalt 4px; rechts endet der Inhalt buendig, die Agent-Spalte haelt
	   die 20px selbst (siehe --agent-rail). */
	padding: 28px 0 28px 4px;
	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%;
}
/* Abstaende wie auf der Startseite (css/landing.css .lp_foot); unten 30px,
   damit die Links mittig zum Account-Knopf unten in der Seitenleiste stehen */
.page footer {
	padding: 28px 0 30px 4px;
	display: block;
}
@media (max-width: 770px) {
	body:not(.static) .page footer {
		padding: 16px 16px 16px 0;
	}
}
/* Abgemeldet ohne Seitenleiste: links und rechts so weit vom Rand wie die
   Kopfzeile (body.signed_out .page > header, 24px) */
body.signed_out .page footer {
	padding-left: 24px;
	padding-right: 24px;
}
@media (max-width: 770px) {
	body.signed_out .page footer {
		padding-left: 16px;
		padding-right: 16px;
	}
}

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;
}
/* Schmal: Navigation und Copyright passen nicht in eine Zeile, beides
   zentriert untereinander */
@media (max-width: 770px) {
	body:not(.static) footer .wrapper {
		flex-direction: column;
		justify-content: center;
		gap: 10px;
		text-align: center;
	}
	body:not(.static) footer nav ul {
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px 16px;
	}
	body:not(.static) footer .copyright {
		margin-left: 0;
	}
}

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

.heading {
	margin-bottom: 24px;
}
/* Reiterleiste (Designsystem sections.jsx, SectionTabs): Reiter brechen nie
   um, die Leiste scrollt waagerecht (Wischen, Trackpad, Shift + Mausrad)
   ohne sichtbaren Scrollbalken. Die Grundlinie liegt am aeusseren Rahmen
   (.tab_bar) und bleibt beim Scrollen stehen, die Unterstreichung des
   aktiven Reiters liegt darauf (margin-bottom -1px). Am Rand, hinter dem
   noch Reiter liegen, laeuft die Leiste auf 32 px weich aus (fade_l,
   fade_r aus js/header.js, slide_navi). */
.tab_bar {
	margin-bottom: 24px;
	min-width: 0;
	border-bottom: 1px solid var(--border-default);
}
.tab_bar > .slide_navi {
	margin-bottom: -1px;
}
.tab_bar > .slide_navi > ul {
	box-shadow: none;
}
.tab_bar > .slide_navi.fade_l {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 100%);
}
.tab_bar > .slide_navi.fade_r {
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
}
.tab_bar > .slide_navi.fade_l.fade_r {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.slide_navi {
	margin-bottom: 24px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	touch-action: pan-x pan-y;
}
.slide_navi::-webkit-scrollbar {
	display: none;
}
.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;
	box-shadow: inset 0 -1px 0 var(--border-default);
}
.slide_navi .user_navi li {
	flex: 0 0 auto;
}
.slide_navi .user_navi li a {
	display: block;
	padding: 0 2px 11px;
	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="tel"],
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="tel"]: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.
   Die Huelle liegt eng am Feld (inline-flex, das Feld fuellt sie mit 100 %),
   damit das Chevron auch bei gestreckten Feldern rechts im Feld sitzt und
   nicht am Rand der Zelle. */
.select {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	vertical-align: top;
}
.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%;
	min-width: 0;
}
.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;
}

/* Kleine Auswahlfelder fuer Werkzeugleisten, Widget-Koepfe und die
   Seitenaufteilung. Gleiche Bauart wie das normale Feld, nur niedriger und
   mit kleinerem Radius; die frueher runde Pillenform ist entfallen.
   Die Klasse pill bleibt als Haken in den Vorlagen bestehen, compact ist
   der neue, sprechende Name. */
.pill:not(.select):not(.checkboxes) {
	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,
.select.compact,
.checkboxes.pill {
	width: auto;
}
/* Die Huelle der Mehrfachauswahl ist nur so breit wie ihre Box (.selected),
   denn der Chevron haengt an der Huelle: streckt ein Flex- oder Grid-Elter
   die Huelle, stand der Chevron rechts neben der Box (Mobil, 25.09.2026). */
.checkboxes.pill {
	width: fit-content;
	max-width: 100%;
}
.select.pill > input,
.select.compact > input,
.checkboxes.pill .selected {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 28px 0 10px;
	border-radius: var(--radius-s);
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	color: var(--text-secondary);
	font: 500 12px/1 var(--font-body);
	letter-spacing: .02em;
	white-space: nowrap;
	margin: 0;
	min-width: 80px;
	field-sizing: content;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, color .15s;
}
/* Nur das echte Eingabefeld fuellt die Huelle; die Mehrfachauswahl traegt
   ihre eigene Breite. */
.select.pill > input,
.select.compact > input {
	width: 100%;
}
.select.pill > input:focus,
.select.compact > input:focus {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.select.pill:before,
.select.compact:before,
.checkboxes.pill:before {
	width: 11px;
	height: 11px;
	margin-top: -5.5px;
	right: 10px;
}
.select.pill > ul,
.select.compact > ul {
	left: auto;
	right: 0;
	width: auto;
	min-width: 180px;
}

/* Mehrfachauswahl (Projektfilter) */
.list-filter .checkboxes {
	position: relative;
}
.checkboxes.pill {
	position: relative;
}
.checkboxes.pill .selected {
	width: max-content;
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	line-height: 28px;
}
.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);
}
/* Rechtstexte: links die Abschnittsnavigation (sticky), rechts die Karte,
   hoechstens 720px, Absaetze hoechstens 70 Zeichen. Nur mit .legal, der
   AVV-Dialog nutzt denselben Text ohne diese Regeln. */
.wrapper.legal {
	display: grid;
	grid-template-columns: 240px minmax(0,720px);
	gap: 40px;
	align-items: start;
}
.wrapper.legal.no_nav {
	grid-template-columns: minmax(0,720px);
}
.wrapper.legal.no_nav .legal_nav {
	display: none;
}
.legal_nav {
	position: sticky;
	top: 24px;
}
.legal_nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.legal_nav a {
	display: block;
	padding: 6px 12px;
	border-left: 2px solid var(--border-default);
	font: 500 13px/1.35 var(--font-body);
	color: var(--text-muted);
}
.legal_nav a:hover {
	color: var(--text-primary);
}
.legal_nav a.active {
	border-left-color: var(--accent);
	color: var(--accent);
}
.legal .content-card.text-page {
	max-width: 720px;
}
.legal .text-page p {
	max-width: 70ch;
	font: 400 15px/1.7 var(--font-body);
}
.legal .text-page .label {
	margin: 0;
	padding-top: 22px;
	border-top: 1px solid var(--border-default);
	font: 600 12px/1.3 var(--font-body);
	letter-spacing: .06em;
	color: var(--accent);
	scroll-margin-top: 24px;
}
.legal .text-page .label:first-child {
	padding-top: 0;
	border-top: none;
}
.legal .text-page .label + p {
	margin-top: 8px;
}
.legal .text-page p:not(.label) + .label {
	margin-top: 26px;
}
.legal .text-page mark {
	background: rgba(245,185,80,.25);
	color: var(--text-primary);
	padding: 0 3px;
	border-radius: 3px;
}
@media (max-width: 959px) {
	.wrapper.legal {
		grid-template-columns: minmax(0,1fr);
	}
	.legal_nav {
		display: none;
	}
}
@media (max-width: 599px) {
	.legal_print {
		display: none !important;
	}
	.legal .content-card.text-page {
		padding: 18px;
	}
}
@media print {
	.legal_nav {
		display: none !important;
	}
	.wrapper.legal {
		display: block;
	}
	.legal .content-card.text-page {
		max-width: none;
		padding: 0;
		border: none;
		background: #fff;
		box-shadow: none;
	}
	.legal .text-page p,
	.legal .text-page .label {
		color: #000;
	}
	.legal .text-page .label {
		border-top-color: #ccc;
		break-after: avoid;
		page-break-after: avoid;
	}
	.legal .text-page p {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}
.scrollable {
	outline: none;
	width: 100%;
}
.list-legend {
	display: flex;
	align-items: center;
	padding: 0 44px 0 20px;
	border-bottom: 1px solid var(--border-strong);
}
.list-legend p {
	display: none;
	margin: 0;
	padding: 12px 14px;
	width: 25%;
	min-width: 0;
	flex: 0 1 auto;
	font: 600 12px/1.3 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	user-select: none;
}
/* Spaltenkoepfe sortieren die Liste: Links (Sortierung ueber den Server) und
   einfache Koepfe (Sortierung im Browser) sehen gleich aus */
.list-legend p.sortable {
	cursor: pointer;
	user-select: none;
}
.list-legend p.sortable:after {
	content: '▲';
	display: inline-block;
	margin-left: 6px;
	font-size: 9px;
	opacity: .25;
	transition: transform .15s;
}
.list-legend p.sortable:hover {
	color: var(--text-primary);
}
.list-legend p.sortable.active {
	color: var(--accent);
}
.list-legend p.sortable.active:after {
	opacity: 1;
}
.list-legend p.sortable.active.asc:after {
	transform: rotate(180deg);
}
.list-legend p a {
	color: inherit;
	display: inline-block;
}
.list-legend p a:after {
	content: '▲';
	display: inline-block;
	margin-left: 6px;
	font-size: 9px;
	opacity: .25;
	transition: transform .15s;
}
.list-legend p a:hover {
	color: var(--text-primary);
}
.list-legend p a.active {
	color: var(--accent);
}
.list-legend p a.active:after {
	opacity: 1;
}
.list-legend p a.active.asc:after {
	transform: rotate(180deg);
}
/* Gekuerzt wird die Beschriftung, nicht der Kopf als Ganzes: sie steckt in
   einem eigenen Element und laesst rechts Platz fuer das Sortierzeichen.
   Ohne diese Trennung setzte der Browser die drei Punkte hinter den Pfeil,
   weil Beschriftung und Pfeil zusammen ein Textfluss waren. */
.list-legend p > span,
.list-legend p a > span {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}
.list-legend p.sortable > span,
.list-legend p a > span {
	max-width: calc(100% - 16px);
}
/* Der Link fuellt den Kopf, damit die Prozentangabe der Beschriftung eine
   feste Bezugsbreite hat. Die Ausrichtung kommt weiter vom Kopf. */
.list-legend p a {
	display: block;
	overflow: hidden;
}
.list-legend p.sortable:after,
.list-legend p a:after {
	vertical-align: middle;
}
/* Beschriftung und Pfeil als Flex-Zeile: die gemessene Breite (list_layout)
   ist dann genau Text plus Pfeil, und wird der Kopf schmaler, kuerzt sich nur
   die Beschriftung. Die Prozentrechnung fuer den Pfeil entfaellt. */
.list-legend p.sortable.visible,
.list-legend p.visible > a {
	display: flex;
	align-items: center;
	min-width: 0;
}
.list-legend p.sortable > span,
.list-legend p a > span {
	max-width: none;
	flex: 0 1 auto;
	min-width: 0;
}
.list-legend p.sortable:after,
.list-legend p a:after {
	flex: 0 0 auto;
}
.list-legend p[data-id='sum'].sortable.visible,
.list-legend p[data-id='amount'].sortable.visible,
.list-legend p[data-id='cost'].sortable.visible,
.list-legend p[data-id='total'].sortable.visible,
.list-legend p[data-id='receipt'].sortable.visible,
.list-legend p.text-right.sortable.visible,
.list-legend p[data-id='sum'].visible > a,
.list-legend p[data-id='amount'].visible > a,
.list-legend p[data-id='cost'].visible > a,
.list-legend p[data-id='total'].visible > a,
.list-legend p[data-id='receipt'].visible > a,
.list-legend p.text-right.visible > a {
	justify-content: flex-end;
}
.list-view {
	margin: 0;
	padding: 0;
	list-style: none;
	min-height: 120px;
}
.content-card.list-card {
	animation: bc-fade-in .3s ease both;
}
.list-view > li {
	animation: bc-row-in .4s cubic-bezier(.2,.8,.3,1) backwards;
	animation-delay: calc(.12s + var(--i, 10) * 30ms);
}
/* Bis ui_bindings() die gemerkte Sortierung und Spaltenreihenfolge
   angewandt hat, bleibt die Zeilenanimation stehen (Klasse setzt ein
   Inline-Skript im Kopf von layout.html). Sonst erscheint erst die
   Reihenfolge des Servers, dann noch einmal die sortierte. */
html.lists-pending .list-view > li {
	animation-play-state: paused;
}
/* Nach dem Einblenden (list_settle_schedule in ui.js) ohne Animation, damit
   eine haengende Animation die Zeilen nicht skaliert stehen laesst. */
.list-view > li.settled {
	animation: none;
}
.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;
}
/* Listen in den Einstellungskarten haben weder Auswahlkaestchen noch
   Statusbalken. Sie brauchen links nicht den vollen Raum dafuer, aber einen
   kleinen Abstand, sonst klebt die erste Spalte am Rahmen der Liste. */
.settings-card .list-legend:not(:has(input[type="checkbox"])),
.settings-card .list-view > li:not(:has(input[type="checkbox"])) {
	padding-left: 14px;
}
.settings-card .list-legend:not(:has(input[type="checkbox"])) > p:first-child,
.settings-card .list-view > li:not(:has(input[type="checkbox"])) > p:first-child {
	padding-left: 0;
}
.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: 6px;
	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.efforts li[data-type='travel']:before {
	background: var(--gray-400);
}
.list-view li[data-type='material']:before,
.list-view.estimates li[data-type='lost']:before,
.list-view.bank-receipts li[data-type='debit']:before {
	background: var(--danger);
}
.list-view li[data-type='credit']:before,
.list-view li[data-type='active']:before,
.list-view.estimates li[data-type='valid']:before {
	background: var(--warning);
}
/* Rechnungen faerbt der Geldeingang, nicht das Weglegen: gelb solange offen,
   gruen sobald bezahlt. Archiviert bleibt gedaempft, das steuert die Regel
   fuer data-archived weiter oben. */
.list-view.bills li[data-canceled='no'][data-paid='no']:before {
	background: var(--warning);
}
.list-view.bills li[data-canceled='no'][data-paid='yes']:before {
	background: var(--accent);
}
/* Teilzahlung: die Rechnung bleibt fordernd, der Balken zeigt aber schon den
   Eingang. Er fuellt sich von unten im Anteil --paid-pct (Zeilenvorlage) im
   vollen Akzentgruen, der Rest darueber steht im selben Gruen mit halber
   Deckung. Ohne --paid-pct bleibt der Balken vollstaendig halbdeckend. */
.list-view.bills li[data-canceled='no'][data-paid='no'][data-partial='yes']:before {
	background: linear-gradient(to top, var(--accent) 0 var(--paid-pct, 0%), rgba(var(--accent-rgb),.5) var(--paid-pct, 0%));
}
/* Gutschriften: gelb bis zum Versand, danach gruen (GoBD: dann gesperrt) */
.list-view.credits li[data-sent='no']:before {
	background: var(--warning);
}
.list-view.credits li[data-sent='yes']:before {
	background: var(--accent);
}
.list-view.credits .send_state {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	font: 500 11px/1.4 var(--font-body);
	color: var(--text-secondary);
	white-space: nowrap;
}
.list-view.credits .send_state.open {
	color: var(--warning);
}
/* Gesperrter Beleg: kleines Schloss hinter der Nummer, Grund im Tooltip */
.list-view > li > [data-id] > .lock_mark {
	display: inline-flex;
	vertical-align: -1px;
	margin-left: 6px;
	color: var(--text-muted);
	cursor: help;
}
.list-view > li[data-canceled='yes'] > p[data-id='num'] {
	text-decoration: none;
}
.lock_hint {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0 0 4px;
	font: var(--text-small);
	color: var(--text-muted);
}
.lock_hint svg {
	flex-shrink: 0;
}
.list-view.estimates li[data-type='expired']:before,
.list-view > li[data-canceled='yes']:before {
	background: var(--gray-400);
}
/* Bruttogesamt einer teilbezahlten Rechnung: "5.000/6.545,00 €" in einer Zeile.
   Der Eingang steht im Akzent, der Schraegstrich gedaempft, der Gesamtbetrag
   behaelt die Farbe der Zeile. Die Zeilenvorlage liefert dafuer die Elemente
   .paid-in (Eingang), .paid-sep (Schraegstrich) und .paid-total, zusammen in
   .partial, das den Titel mit beiden Betraegen traegt. */
.list-view.bills li[data-paid='no'][data-partial='yes'] p[data-id='total'] {
	white-space: nowrap;
}
.list-view.bills li p[data-id='total'] .paid-in {
	color: var(--accent);
}
.list-view.bills li p[data-id='total'] .paid-sep {
	color: var(--text-muted);
}
.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;
}
/* Zelle ohne Kopf: list_columns_guard in js/ui.js findet sie, wenn Zeilen-
   und Seitenvorlage auseinanderlaufen. Sie bekaeme weder Reihenfolge noch
   Sichtbarkeit und wuerde alles dahinter verschieben, deshalb bleibt sie
   verborgen, bis die Vorlage nachgezogen ist. Die Konsole nennt sie. */
.list-view li > .no_head {
	display: none;
}
.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:not([data-id='select']):not(.table-options),
.list-legend.for-efforts p,
.list-legend.for-hbcis p:not([data-id='select']):not(.table-options) {
	width: 20%;
}
p[data-id='bank_pin'] {
	-webkit-text-security: disc;
}
.list-view li [data-id].big,
.list-legend p.big {
	width: 50%;
}
.list-view li [data-id].mini,
.list-legend p.mini {
	width: 5%;
	min-width: 40px;
}
/* Die Rechnungsnummer muss immer vollstaendig lesbar sein. Die 5% der Spalte
   ergaben auf schmalen Karten 48 Pixel, davon gingen 28 fuer den Innenabstand
   ab und die Nummer wurde abgeschnitten. Die Mindestbreite rechnet den Abstand
   mit und laesst Platz fuer fuenf Stellen. Feste Pixel, kein ch: Kopfzeile und
   Zelle haben verschiedene Schriftgroessen und waeren sonst unterschiedlich
   breit. Gilt nur fuer die Nummer, nicht fuer alle schmalen Spalten: die
   Auswahlspalte soll schmal bleiben. */
.list-card .list-view li [data-id='num'],
.list-card .list-legend p[data-id='num'] {
	flex: 0 0 72px;
	width: 72px;
	min-width: 72px;
}
.list-view li [data-id].small,
.list-legend p.small {
	width: 10%;
}
.list-view li [data-id].medium,
.list-legend p.medium {
	width: 15%;
}
.list-view li [data-id].large,
.list-legend p.large {
	width: 40%;
}
.list-view li [data-id].wide,
.list-legend p.wide {
	width: 20%;
}
/* Die Automatik einer Bankverbindung zeigt zwei Marken nebeneinander, Abruf
   und Erkennung. Ohne Abstand stossen sie aneinander. */
.hbcis li [data-id='automation'].visible {
	display: flex;
	align-items: center;
	gap: 6px;
}
/* Nimmt den restlichen Platz der Zeile, die Spalten rechts davon ruecken
   damit an den rechten Rand. */
.list-view li [data-id].fill,
.list-legend p.fill {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}
/* Sammelaktionen fuer markierte Zeilen */
.bulk_actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.bulk_actions[hidden] {
	display: none;
}
.bulk_menu {
	position: relative;
}
/* Der Ausloeser zeigt die Anzahl der gewaehlten Zeilen und oeffnet die Aktionen */
.bulk_menu .bulk_toggle {
	height: 40px;
	gap: 4px;
	color: var(--accent);
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
}
.bulk_menu .bulk_toggle .icon {
	margin-left: 4px;
}
.bulk_menu .bulk_toggle:hover,
.bulk_menu.open .bulk_toggle {
	background: rgba(var(--accent-rgb),.16);
}
.bulk_menu .bulk_toggle .icon {
	transition: transform .15s;
}
.bulk_menu.open .bulk_toggle .icon {
	transform: rotate(180deg);
}
.bulk_popover {
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	display: none;
	width: 220px;
	padding: 6px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	z-index: 200;
}
.bulk_menu.open .bulk_popover {
	display: block;
	animation: bc-fade-in .12s ease both;
}
.bulk_popover a {
	display: block;
	padding: 8px 10px;
	border-radius: var(--radius-s);
	font: 500 13px/1.2 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
}
.bulk_popover a:hover {
	background: rgba(var(--accent-rgb),.07);
	color: var(--text-primary);
}
.bulk_popover a.danger {
	color: var(--danger);
}
.list-view > li > p[data-id='select'],
.list-legend p[data-id='select'] {
	padding-left: 0;
	padding-right: 0;
	text-align: left;
	overflow: visible;
}
.list-view > li > p[data-id='select'] .multi-select,
.list-legend p[data-id='select'] .multi-select {
	display: block;
}
/* In Karten mit .data (API-Keys) zieht ".data input" jedes Feld auf volle
   Breite, das Haekchen der Auswahlspalte bleibt bei 15px */
.data .list-view > li > p[data-id='select'] .multi-select,
.data .list-legend p[data-id='select'] .multi-select {
	width: 15px;
}
.list-view li .visible .highlight {
	background: rgba(var(--accent-rgb),.25);
	color: var(--text-primary);
	border-radius: 3px;
}
/* Statuskapsel mit Fortschrittsfuellung */
.list-view li p .grace,
.list-view li p .done {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	max-width: 100%;
	height: 24px;
	padding: 0 8px;
	border-radius: var(--radius-s);
	overflow: hidden;
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	vertical-align: middle;
	font: 600 11px/1 var(--font-body);
	letter-spacing: .02em;
	color: var(--warning);
}
.list-view li p .grace .indicator {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: rgba(245,185,80,.22);
}
.list-view li p .days {
	position: relative;
	z-index: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.list-view li p .done {
	color: var(--accent);
	background: rgba(var(--accent-rgb),.12);
	border-color: rgba(var(--accent-rgb),.35);
}
/* Der Zustand steht in der Statusspalte: die gruene Kapsel "Bezahlt am" oder
   die gelbe Kapsel mit der Frist. Die Spalte mit dem Archivdatum bleibt
   ausgeblendet und wird nur fuer den CSV-Export mitgefuehrt. */

.list-view > li[data-canceled='yes'] p .grace,
.list-view > li[data-canceled='yes'] p .done {
	color: var(--text-muted);
	background: var(--surface-raised);
	border-color: var(--border-strong);
	text-decoration: none;
}
.list-view > li[data-canceled='yes'] p .grace .indicator {
	display: none;
}
/* Marken am rechten Rand der Zeile als SVG-Maske in der Akzentfarbe: die
   Klammer steht fuer den hinterlegten Beleg, die Wolke fuer den Versand an
   Datev. Sie liegen auf ::after, damit ::before der Statusbalken bleibt;
   vorher teilten sich beide das Element, und bei archivierten Rechnungen
   faerbte die Balkenfarbe die ganze Marke zu einem gruenen Block. */
.list-view.bank-receipts li.has-receipt:after {
	content: '';
	position: absolute;
	right: 44px;
	top: 0;
	bottom: 0;
	width: 36px;
	background: var(--accent);
	-webkit-mask: var(--icon-paperclip) no-repeat center / 16px 16px;
	mask: var(--icon-paperclip) no-repeat center / 16px 16px;
	opacity: .9;
	pointer-events: none;
}
.list-view.bank-receipts li.has-receipt.in-datev:after {
	-webkit-mask-image: var(--icon-cloud-up);
	mask-image: var(--icon-cloud-up);
}
/* Spalte Beleg der Buchfuehrung: Klammer fuer den hinterlegten Beleg,
   Wolke nach der Uebermittlung an Datev. Der Text darin ist nur fuer die
   Sortierung und Vorleser da. */
.list-view li .receipt_mark {
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	background: var(--accent);
	-webkit-mask: var(--icon-paperclip) no-repeat center / 16px 16px;
	mask: var(--icon-paperclip) no-repeat center / 16px 16px;
}
.list-view li .receipt_mark.datev {
	-webkit-mask-image: var(--icon-cloud-up);
	mask-image: var(--icon-cloud-up);
}
/* E-Rechnung als Beleg: kleines "XML" hinter der Marke */
.list-view li .receipt_xml {
	margin-left: 4px;
	vertical-align: middle;
	font: 700 9px/1 var(--font-body);
	letter-spacing: .04em;
	color: var(--text-muted);
}
.list-view li .receipt_mark .sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
/* Solange die Spalte Beleg zu sehen ist, braucht die Zeile die Marke am
   rechten Rand nicht doppelt, auf allen Bildschirmen. Die Marke bleibt nur,
   wenn die Spalte ueber die Tabellenoptionen ausgeblendet ist. */
.list-view.bank-receipts:has(> li > p[data-id='receipt'].visible) li.has-receipt:after {
	display: none;
}
/* Buchfuehrung genauso: die Marke fuer den Beleg braucht ihren Streifen
   rechts, sonst liegt sie auf der letzten sichtbaren Spalte, sobald die
   Belegspalte ausgeblendet ist. */
.bills > li,
.bank-receipts > li,
.list-legend.for-bills,
.list-legend.for-receipts {
	padding-right: 80px;
}
/* Optionen der Zeile: erscheint beim Ueberfahren, dunkles Popover */
/* Die Zeile mit dem aufgeklappten Menue liegt ueber den Nachbarzeilen,
   sonst ueberdeckt deren Geldeingangs-Marke (.bank_match, z-index 150) das
   Menue, das ueber die Zeile hinausragt. */
.list-view > li:has(> .options:hover) {
	z-index: 170;
}
.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;
}
/* Unsichtbare Bruecke zwischen Knopf und Menue, damit der Hover beim Weg
   nach unten nicht abreisst. Rechts endet sie am Knopf: mit right:-10px
   ragte sie 2px ueber die Zeile hinaus, die Liste wurde beim Ueberfahren
   2px breiter als die Karte, und die Randklone blendeten bei jedem Hover
   ein und aus. */
.list-view li .options:before {
	content: '';
	position: absolute;
	left: -10px;
	right: 0;
	top: 100%;
	height: 8px;
}
.list-view li:nth-last-child(-n+5):not(:nth-child(-n+5)) .options .hidden_menu {
	top: auto;
	bottom: 100%;
}
.list-view li .options:hover .hidden_menu {
	display: block;
}
.list-view li .options .hidden_menu li {
	margin: 0;
	padding: 0;
}
.list-view li .options .hidden_menu .mini_btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: auto;
	padding: 8px 10px;
	text-align: left;
	white-space: nowrap;
	font: 500 13px/1.2 var(--font-body);
	color: var(--text-secondary);
	border-radius: var(--radius-s);
}
.list-view li .options .hidden_menu .mini_btn:hover {
	background: rgba(var(--accent-rgb),.07);
	color: var(--text-primary);
}
.list-view li .options .hidden_menu .mini_btn span {
	width: 16px;
	display: inline-block;
	text-align: center;
	font-size: 13px;
	color: var(--text-muted);
}
.list-view li .options .hidden_menu .mini_btn:hover span {
	color: var(--accent);
}
.list-view li .options .hidden_menu .mini_btn:after {
	content: attr(title);
	overflow: hidden;
	text-overflow: ellipsis;
}
.list-view li .options .hidden_menu .mini_btn.remove,
.list-view li .options .hidden_menu .mini_btn.cancel {
	color: var(--danger);
}
.list-view li .options .hidden_menu .mini_btn.remove span,
.list-view li .options .hidden_menu .mini_btn.cancel span {
	color: var(--danger);
}
.list-view.estimates li .options .mini_btn.is-set,
.list-view.estimates li .options .mini_btn.is-set span {
	color: var(--accent);
}
/* Hinweis auf gefundenen Geldeingang */
.bills li .bank_match {
	position: absolute;
	right: 48px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 150;
}
.bills li.in-datev .bank_match {
	display: none;
}
.bills li .bank_match .mark {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: var(--radius-s);
	color: var(--warning);
	cursor: help;
}
.bills li .bank_match:hover .mark {
	background: rgba(245,185,80,.12);
}
/* Bei einer bezahlten Rechnung dokumentiert die Marke den Geldeingang, sie
   warnt nicht mehr davor, ihn zu pruefen. Deshalb Akzent statt Gelb. */
.bills li[data-paid='yes'] .bank_match .mark {
	color: var(--accent);
}
.bills li[data-paid='yes'] .bank_match:hover .mark {
	background: rgba(var(--accent-rgb),.12);
}
.bills li .bank_match ul {
	position: absolute;
	display: none;
	right: 0;
	top: 100%;
	margin: 4px 0 0;
	padding: 12px;
	min-width: 300px;
	list-style: none;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	z-index: 100;
}
.bills li .bank_match:hover ul {
	display: block;
}
.bills li .bank_match ul li {
	display: flex;
	gap: 12px;
	padding: 6px 0;
	border-top: 1px solid var(--border-default);
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-secondary);
	white-space: normal;
}
.bills li .bank_match ul li:first-child {
	border-top: none;
	padding-top: 0;
}
.bills li .bank_match ul li .label {
	width: 110px;
	flex-shrink: 0;
	color: var(--text-muted);
}
.bills li .bank_match ul li .value {
	color: var(--text-primary);
	font-weight: 500;
}
.page-title .list-overview .sum,
.page-title .list-overview .count,
.page-title .list-overview .account {
	font-variant-numeric: tabular-nums;
}
/* Seitenaufteilung unter der Liste */
.list-view > li.page_hide {
	display: none !important;
}
.list-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 20px;
}
.list-footer .pagination {
	display: flex;
	align-items: center;
	gap: 6px;
}
.list-footer .pagination button {
	min-width: 30px;
	height: 30px;
	padding: 0 6px;
	display: grid;
	place-items: center;
	border: none;
	border-radius: var(--radius-s);
	background: transparent;
	color: var(--text-muted);
	font: 600 12px/1 var(--font-body);
	box-shadow: none;
}
.list-footer .pagination button.arrow {
	width: 30px;
	padding: 0;
	font-size: 13px;
}
.list-footer .pagination button:hover {
	color: var(--text-primary);
	border: none;
	box-shadow: none;
}
.list-footer .pagination button.active,
.list-footer .pagination button.active:hover {
	background: rgba(var(--accent-rgb),.08);
	border: 1.5px solid var(--accent);
	color: var(--accent);
	box-shadow: 0 0 10px rgba(var(--accent-rgb),.25);
}
.list-footer .pagination button[disabled] {
	color: var(--disabled);
	cursor: default;
}
.list-footer .pagination .ellipsis {
	padding: 0 4px;
	color: var(--text-muted);
	font: 600 12px/1 var(--font-body);
}
.list-footer .per-page {
	display: flex;
	align-items: center;
	gap: 10px;
}
.list-footer .per-page .label {
	font: var(--text-label);
	letter-spacing: .03em;
	text-transform: none;
	color: var(--text-muted);
}
.list-footer .per-page .select.pill > input {
	min-width: 70px;
}
.list-footer .select.pill > ul {
	top: auto;
	bottom: 100%;
	margin: 0 0 6px;
}
.list-legend-colors {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: 14px;
	padding-left: 4px;
}
.list-legend-colors span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: var(--text-small);
	color: var(--text-muted);
}
.list-legend-colors span:before {
	content: '';
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: var(--gray-400);
}
/* Farblegende unter dem Pipeline-Board: dieselben Streifen wie unter den
   Listen, die Farben kommen aus der Farbleiste der Karten. */
.list-legend-colors.pipeline-legend {
	margin-top: 16px;
}
.list-legend-colors .stripe-accent:before {
	background: var(--accent);
}
.list-legend-colors .stripe-warning:before {
	background: var(--warning);
}
.list-legend-colors .stripe-danger:before {
	background: var(--danger);
}
.list-legend-colors .stripe-gray:before {
	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-travel:before {
	background: var(--gray-400);
}
/* Teilbezahlt: derselbe zweifarbige Balken wie an der Zeile, unten voll, oben
   mit halber Deckung. In der Legende sitzt die Trennung fest bei 60 %. */
.list-legend-colors .is-partial:before {
	background: linear-gradient(to top, var(--accent) 0 60%, rgba(var(--accent-rgb),.5) 60%);
}
.list-legend-colors .is-canceled {
	text-decoration: line-through;
}
.datev-progress {
	margin: 20px 0 10px 0;
}
.datev-progress .bar {
	width: 100%;
	height: 6px;
	background: var(--surface-raised);
	border-radius: 999px;
	overflow: hidden;
}
.datev-progress .bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--accent);
	box-shadow: 0 0 8px rgba(var(--accent-rgb),.4);
	transition: width .3s ease;
}
.datev-progress .status {
	margin-top: 8px;
	text-align: center;
	font: var(--text-small);
	color: var(--text-muted);
}

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

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

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

.pipeline-view .anchor_nav {
	min-width: 160px;
}
.pipeline {
	display: flex;
	gap: 12px;
	align-items: stretch;
	height: calc(100vh - 290px);
	min-height: 420px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.pipeline::-webkit-scrollbar {
	display: none;
}
.pipeline .col {
	position: relative;
	width: 240px;
	min-width: 240px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	border-radius: var(--radius-l);
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
	height: 100%;
}
.pipeline .col-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 2px 0 6px;
}
.pipeline .col-head .title {
	font: 600 13px/1.3 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pipeline .col-head .title.edit_column {
	cursor: pointer;
}
/* Funkeln neben dem Namen: Spalte mit Konfetti (Spalte bearbeiten) */
.pipeline .col-head .confetti_mark {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--accent);
}
#pipeline_box .column_confetti {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 18px 0 4px;
}
#pipeline_box .confetti_hint {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding-left: 44px;
	font: 400 12px/1.4 var(--font-body);
	color: var(--text-muted);
}
#pipeline_box .confetti_hint .confetti_try {
	font: 600 12px var(--font-body);
	color: var(--accent);
	cursor: pointer;
}
.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);
}
/* Plus im Spaltenkopf: neue Karte gleich in dieser Spalte. */
.pipeline .col-head .add_card_here {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}
.pipeline .col-head .add_card_here:hover {
	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 {
	position: relative;
	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 .2s, padding .2s;
}
/* Beim Ueberfahren faerbt sich nur der Rahmen. Kein Schein, kein Schatten,
   kein Verlauf: die Karte bleibt flach. */
.pipe-card:hover {
	border-color: var(--accent);
}
.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;
	min-width: 0;
}
/* Die abgesetzte Zeile bricht nie um: Symbol und Name stehen nebeneinander,
   ein langer Name endet mit Auslassungspunkten. Die allgemeine Regel fuer
   .zone erlaubt Umbruch, hier nicht. */
.pipe-card .zone.firma {
	flex-wrap: nowrap;
}
.pipe-card .firma .haus {
	flex-shrink: 0;
}
.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);
}
/* Zugeordnetes Angebot: Nummer und Projekt in einer Zeile, rechts der
   Zustand des Angebots als Punkt. */
.pipe-card .pipe-offer {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font: 400 11px/1.3 var(--font-body);
	color: var(--text-muted);
}
.pipe-card .pipe-offer svg {
	flex-shrink: 0;
}
.pipe-card .pipe-offer .label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pipe-card .pipe-offer .dot {
	width: 7px;
	height: 7px;
}
/* Zustand eines Angebots, ueberall gleich: Karte, Auswahlfeld und Liste. */
.pipe-card .pipe-offer .dot,
.offer_picker .dot,
#offer_menu .dot {
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--warning);
}
.pipe-card .pipe-offer .dot.won,
.offer_picker .dot.won,
#offer_menu .dot.won {
	background: var(--accent);
}
.pipe-card .pipe-offer .dot.lost,
.offer_picker .dot.lost,
#offer_menu .dot.lost {
	background: var(--danger);
}
.pipe-card .pipe-offer .dot.expired,
.offer_picker .dot.expired,
#offer_menu .dot.expired {
	background: var(--gray-400);
}
.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);
}
/* Kartendarstellung je Pipeline: die sechs Zeilen zeichnet
   pages/templates/row.pipeline_card.html aus dem, was der Reiter
   Kartendarstellung festgelegt hat. Jede Zeile ist eine .zone, die Kopfzeile
   teilt sich die Reihe mit dem Kennwert rechts. */
.pipe-card .row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.pipe-card .zone {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}
.pipe-card .row.head .zone.kopf {
	flex: 1;
}
.pipe-card .row.head .zone.wert {
	flex-shrink: 0;
	justify-content: flex-end;
}
.pipe-card .row.foot .actions {
	margin-left: auto;
}
.pipe-card .zone.kopf {
	font: 600 13px/1.3 var(--font-body);
	color: var(--text-primary);
}
.pipe-card .zone.wert {
	font: 500 12px/1.3 var(--font-body);
	color: var(--text-secondary);
}
.pipe-card .zone.zeile1,
.pipe-card .zone.zeile2,
.pipe-card .zone.fuss {
	font: 400 11px/1.3 var(--font-body);
	color: var(--text-muted);
}
.pipe-card .zone.marke {
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-secondary);
}
/* Die vier Darstellungen einer Angabe: Text, Kapsel, Zahl, Datum. */
.pipe-card .zone .txt {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.pipe-card .zone .num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.pipe-card .zone .day {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.pipe-card .zone .day svg {
	flex-shrink: 0;
}
.pipe-card .zone .chip {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	border-radius: var(--radius-s);
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	font: 600 10px/1 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: inherit;
	white-space: nowrap;
}
.pipe-card .zone .pipe-offer {
	flex: 1;
}
/* Unternehmenszeile: Gebaeudesymbol statt Initial, der Name bricht nicht um
   und endet notfalls mit Auslassungspunkten. */
.pipe-card .firma .haus {
	flex-shrink: 0;
	color: var(--text-muted);
}
/* Farbleiste: schmaler Balken links statt der Kapsel im Inneren. Ist fuer die
   Pipeline eine Regel gesetzt, haelt jede Karte 22 px frei (10 Abstand,
   3 Balken, 9 Luft), auch die ohne Farbe. So bleiben die Texte ueber die
   ganze Spalte buendig. */
.pipe-card.inset {
	padding-left: 22px;
}
.pipe-card[data-stripe]:before {
	content: '';
	position: absolute;
	left: 10px;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-radius: 2px;
}
.pipe-card[data-stripe='accent']:before {
	background: var(--accent);
}
.pipe-card[data-stripe='warning']:before {
	background: var(--warning);
}
.pipe-card[data-stripe='danger']:before {
	background: var(--danger);
}
.pipe-card[data-stripe='gray']:before {
	background: var(--gray-400);
}
/* Beim Ueberfahren faerbt sich der Rahmen in der Farbe des Balkens. */
.pipe-card[data-stripe='accent']:hover {
	border-color: var(--accent);
}
.pipe-card[data-stripe='warning']:hover {
	border-color: var(--warning);
}
.pipe-card[data-stripe='danger']:hover {
	border-color: var(--danger);
}
.pipe-card[data-stripe='gray']:hover {
	border-color: var(--gray-400);
}
/* --------------------------------------------------------------------------
   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;
}
@media (max-width: 770px) {
	/* Knoepfe auf Mobil untereinander, jeder ueber die volle Breite */
	.data > ul > li.actions {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.data > ul > li.actions .button {
		text-align: center;
	}
}
.data > ul > li .hint {
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
/* Fehlerzustand der Formularfelder in den Einstellungen, wie im Dialog
   (#insert_box): roter Rahmen, Hinweis unter dem Feld */
.data > ul > li input.error {
	border: 1.5px solid var(--danger);
	box-shadow: none;
}
.data > ul > li input.error:focus {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.data > ul > li .field_error {
	margin: 0;
	font: 400 12px/1.3 var(--font-body);
	color: var(--danger);
}
.data > ul > li input[readonly] {
	color: var(--text-secondary);
}
/* E-Mail-Adresse aendern: Hinweis auf die ausstehende Bestaetigung */
.data > ul > li.email_pending_row:not(:has(.email_pending:not([hidden]))) {
	display: none;
}
.data .email_pending {
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-secondary);
}
.data .email_pending strong {
	color: var(--text-primary);
	font-weight: 600;
}
.data .email_pending .cancel_email_change {
	margin-left: 4px;
	cursor: pointer;
	color: var(--accent);
}
.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 {
	/* Schiene: 20px Abstand zum Inhalt, 41px Kreis, 16px zum Fensterrand */
	--agent-rail: 77px;
	--agent-width: 364px;
	/* Oberkante von Avatar und Chat-Kopf: buendig mit Titel und
	   Schaltflaechen der Seite (.page-head beginnt bei 12px, Knopf 40px hoch) */
	/* 21 px: der Agent-Kreis steht auf einer Hoehe mit dem App-Icon links
	   und dem Lizenzbanner (ui_kits/app/agent.jsx) */
	--agent-top: 21px;
}
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;
	height: 100dvh; /* iOS: sichtbare Hoehe ohne Browserleiste */
	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 20px;
}
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);
}
/* Offen oder gedrueckt: der Ring des Avatars wird gruen, kein eckiger Rahmen */
aside.nav li.account .account_wrap.open .avatar,
aside.nav li.account .account_toggle:active .avatar {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
	transition: border-color .15s, box-shadow .15s;
}
.account_menu {
	display: none;
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	width: 190px;
	padding: 6px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--accent);
	box-shadow: var(--glow-border);
	z-index: 60;
}
/* Eingeklappt: rechts neben dem Avatar, die Unterkante auf der Unterkante des
   Kreises (34px im 42px-Feld, also 4px ueber dem Rand) */
body.nav-collapsed aside.nav .account_menu {
	left: 50px;
	bottom: 4px;
}
/* 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 .account_name {
	display: block;
	padding: 6px 10px 8px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--border-default);
	font: 600 13px/1.2 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
}
.account_menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	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);
}
.account_menu a .icon {
	color: var(--text-muted);
	flex-shrink: 0;
}
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 20px;
	box-sizing: border-box;
	height: 100vh;
	height: 100dvh; /* iOS: sichtbare Hoehe ohne Browserleiste */
}
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;
}
/* Ton bei Antworten von Bill (js/agent.js, agent_chime) */
aside.agent .sound_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 .sound_agent:hover {
	color: var(--text-primary);
}
aside.agent .sound_agent .icon-sound-off,
aside.agent .sound_agent.off .icon-sound-on {
	display: none;
}
aside.agent .sound_agent.off .icon-sound-off {
	display: block;
}
/* 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);
}
/* Vorgemerkte Aktionen mit Ok und Abbrechen (row.agent_message.html) */
aside.agent .msg .plan {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--border-default);
}
aside.agent .msg .plan_group + .plan_group {
	margin-top: 10px;
}
aside.agent .msg .plan_head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	font: 600 12px/1.4 var(--font-body);
	color: var(--text-primary);
}
aside.agent .msg .plan_head .count {
	min-width: 18px;
	padding: 0 6px;
	border-radius: 9px;
	background: rgba(var(--accent-rgb), .14);
	color: var(--accent);
	font: 600 11px/18px var(--font-body);
	text-align: center;
}
aside.agent .msg .plan_table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font: 400 12px/1.45 var(--font-body);
}
aside.agent .msg .plan_table td {
	padding: 6px 0;
	border-bottom: 1px solid var(--border-default);
	vertical-align: top;
}
aside.agent .msg .plan_table tr:last-child td {
	border-bottom: none;
}
/* Zwei Zeilen je Eintrag: Name oben, Betrag und Datum darunter; so passt es
   auch in die schmale Spalte */
aside.agent .msg .plan_table td.entry span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
aside.agent .msg .plan_table .label {
	color: var(--text-primary);
}
aside.agent .msg .plan_table td.entry span.details {
	margin-top: 1px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--text-muted);
	white-space: normal;
}
aside.agent .msg .plan_table .details.error {
	color: var(--danger);
	white-space: normal;
}
aside.agent .msg .plan_table td.status {
	width: 18px;
	padding-left: 8px;
	text-align: right;
	color: var(--accent);
}
aside.agent .msg .plan_table tr.error td.status {
	color: var(--danger);
	font-weight: 700;
}
aside.agent .msg .plan_table tr.error .label {
	color: var(--danger);
}
aside.agent .msg .plan_more {
	margin-top: 4px;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
aside.agent .msg .plan_actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 12px;
}
aside.agent .msg .plan_actions .button {
	padding: 6px 16px;
}
aside.agent .msg .plan_status {
	margin-top: 10px;
	font: 500 12px var(--font-body);
	color: var(--text-muted);
}
aside.agent .msg .plan_status.error {
	color: var(--danger);
}

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);
}
/* Zeile "Bill arbeitet …": Punkte, Text und Sekunden in einer Glasblase */
aside.agent .msg.waiting .bubble.working {
	width: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}
aside.agent .msg.waiting .bubble.working .dots {
	gap: 3px;
	padding: 0;
}
aside.agent .msg.waiting .bubble.working .dots i {
	width: 5px;
	height: 5px;
	animation-name: bc-bill-punkt;
}
aside.agent .msg.waiting .bubble.working .dots i:nth-child(2) { animation-delay: .15s; }
aside.agent .msg.waiting .bubble.working .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bc-bill-punkt {
	0%, 80%, 100% { opacity: .25; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-2px); }
}
aside.agent .msg.waiting .working_text {
	font: 400 13px var(--font-body);
	color: var(--text-secondary);
	white-space: nowrap;
}
aside.agent .msg.waiting .secs {
	font: 400 11px var(--font-body);
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* Abgebrochene Frage: links in der Meta-Zeile, mit "Neu stellen" */
aside.agent .msg .meta .cancelled {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: auto;
	font: 400 10px var(--font-body);
	color: var(--text-muted);
}
aside.agent .msg .meta .cancelled .requeue {
	font: 600 10px var(--font-body);
	color: var(--accent);
	cursor: pointer;
}
/* 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;
	height: 39px; /* zwei Zeilen à 19,5 px, js/agent.js agent_input_size waechst bis fuenf */
	padding: 0;
	resize: none;
	overflow-y: hidden;
	transition: height .12s ease;
	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_left {
	display: flex;
	align-items: center;
	gap: 4px;
}
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);
}
/* Waehrend Bill arbeitet: Stopp-Knopf, Kreis 22 px mit Quadrat 8 px
   (ui_kits/app/agent.jsx) */
aside.agent .send_agent .stop_icon {
	display: none;
}
aside.agent.busy .send_agent {
	color: var(--accent);
}
aside.agent.busy .send_agent > .icon {
	display: none;
}
aside.agent.busy .send_agent .stop_icon {
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1.5px solid currentColor;
}
/* Nutzungslimit des Agenten (ui_kits/app/agent.jsx): Ring neben dem
   Senden-Knopf mit dem knapperen der beiden Limits, beim Ueberfahren ein
   kleines Popup; darueber Hinweis ab 80 % und Sperre bei 100 %. Basis
   bekommt statt des Eingabefelds die Box zu Pro. */
aside.agent .composer_actions {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
aside.agent .agent_usage {
	position: relative;
	display: inline-flex;
}
aside.agent .agent_usage[hidden] {
	display: none;
}
aside.agent .usage_ring {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	cursor: default;
}
aside.agent .usage_ring svg {
	transform: rotate(-90deg);
}
aside.agent .usage_ring circle {
	fill: none;
	stroke-width: 2;
}
aside.agent .usage_ring .track {
	stroke: var(--border-strong);
}
aside.agent .usage_ring .value {
	stroke: var(--accent);
	stroke-linecap: round;
	transition: stroke-dashoffset .3s, stroke .3s;
}
aside.agent .agent_usage[data-level="warning"] .usage_ring .value { stroke: var(--warning); }
aside.agent .agent_usage[data-level="danger"] .usage_ring .value { stroke: var(--danger); }
aside.agent .usage_pop {
	position: absolute;
	right: -6px;
	bottom: calc(100% + 8px);
	width: 236px;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 14px;
	box-sizing: border-box;
	background: var(--surface-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-pop);
	animation: bc-pop-in .16s ease both;
}
aside.agent .usage_pop[hidden] {
	display: none;
}
aside.agent .usage_pop .pop_title {
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
}
aside.agent .usage_pop .pop_row {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
aside.agent .usage_pop .pop_line {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	white-space: nowrap;
	font: 500 12px var(--font-body);
	color: var(--text-secondary);
}
aside.agent .usage_pop .amount {
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
aside.agent .usage_pop .amount small {
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
aside.agent .usage_pop .pop_row[data-level="warning"] .amount { color: var(--warning); }
aside.agent .usage_pop .pop_row[data-level="danger"] .amount { color: var(--danger); }
aside.agent .usage_pop .bar {
	height: 4px;
	border-radius: 2px;
	background: var(--border-default);
	overflow: hidden;
}
aside.agent .usage_pop .bar > span {
	display: block;
	height: 100%;
	background: var(--accent);
}
aside.agent .usage_pop .pop_row[data-level="warning"] .bar > span { background: var(--warning); }
aside.agent .usage_pop .pop_row[data-level="danger"] .bar > span { background: var(--danger); }
aside.agent .usage_pop .pop_foot {
	font: 400 11px var(--font-body);
	color: var(--text-muted);
}
aside.agent .usage_pop .pop_link,
aside.agent .agent_limit_note a,
aside.agent .agent_pro_box a {
	color: var(--accent);
	font: 600 12px var(--font-body);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
aside.agent .agent_limit_note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding: 8px 12px;
	border-radius: var(--radius-m);
	font: 500 12px/1.4 var(--font-body);
}
aside.agent .agent_limit_note[hidden] {
	display: none;
}
aside.agent .agent_limit_note .text {
	flex: 1;
}
aside.agent .agent_limit_note svg {
	flex-shrink: 0;
}
aside.agent .agent_limit_note.warning {
	border: 1px solid rgba(245,185,80,.45);
	background: rgba(245,185,80,.1);
	color: var(--warning);
}
aside.agent .agent_limit_note.danger {
	flex-wrap: wrap;
	align-items: flex-start;
	border: 1px solid rgba(255,69,58,.45);
	background: rgba(255,69,58,.1);
	color: var(--danger);
}
aside.agent .agent_limit_note.danger a {
	flex-basis: 100%;
	margin-left: 22px;
}
/* Gesperrt: nur das Textfeld blendet ab, der Ring bleibt klar */
aside.agent.limit-reached .composer_box textarea {
	opacity: .5;
	cursor: not-allowed;
}
aside.agent.limit-reached .send_agent {
	cursor: not-allowed;
	color: var(--text-muted);
}
aside.agent .agent_pro_box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 14px 12px;
	border-radius: var(--radius-m);
	border: 1px solid rgba(var(--accent-rgb),.35);
	background: rgba(var(--accent-rgb),.06);
}
aside.agent .agent_pro_box .title {
	font: 600 13px var(--font-body);
	color: var(--text-primary);
}
aside.agent .agent_pro_box .text {
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-secondary);
}
.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;
}
/* Ohne Agent-Spalte fehlt die Flaeche, die sonst den Abstand nach rechts
   haelt (siehe --agent-rail). Dann traegt ihn die Seite selbst, sonst klebt
   der Inhalt am rechten Fensterrand. */
body.signed_in.no-agent .page > section,
body.signed_in.no-agent .page footer {
	padding-right: 20px;
}
/* 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 calc(12px + env(safe-area-inset-bottom, 0px));
	}
}

@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 10px;
	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);
}
/* Lizenzbanner ueber jedem Bereich (ui_kits/app/agent.jsx, LizenzBanner):
   Free in Warnfarbe, Testphase ruhig. Liegt vor dem Inhaltsbereich und
   richtet sich an dessen Kanten aus (links 4 px wie .page > section). */
.license_banner {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 20px 0 0 4px;
	padding: 10px 14px;
	border-radius: var(--radius-m);
	font: 500 13px/1.4 var(--font-body);
}
.license_banner .text {
	flex: 1 1 240px;
}
.license_banner svg {
	flex-shrink: 0;
}
.license_banner.free {
	border: 1px solid rgba(245,185,80,.45);
	background: rgba(245,185,80,.1);
	color: var(--warning);
}
.license_banner .license_banner_button {
	flex-shrink: 0;
	padding: 5px 12px;
	border-radius: var(--radius-s);
	border: 1px solid currentColor;
	background: transparent;
	font: 600 12px var(--font-body);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.license_banner.free .license_banner_button { color: var(--warning); }
@media (max-width: 770px) {
	body:not(.static) .license_banner {
		margin: 16px 16px 0 0;
	}
}
.license_toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 1200;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var(--radius-m);
	border: 1px solid rgba(245,185,80,.6);
	background: var(--surface-card);
	box-shadow: var(--shadow-pop);
	font: 500 13px var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
}
.license_toast[hidden] {
	display: none;
}
.license_toast.show {
	animation: bc-pop-in .25s cubic-bezier(.3,.9,.35,1.1) both;
}
.license_toast a {
	color: var(--accent);
	font: 600 13px var(--font-body);
	text-decoration: none;
}
/* Free: Knoepfe, die anlegen, aendern oder versenden, abgeblendet und ohne
   Hover-Effekt; der Klick zeigt den Hinweis (LICENSE_FREE_BLOCKED in
   js/agent.js, dieselbe Liste) */
body.license-free :is(a[class*="add_"], a[class*="create_"], .cal_new, .cal_account_add, .compose_mail, .csv_import, .check_accounting, .doc_new, .doc_new_template, .manage_pipeline, .manage_task_board, .cd_rule_add, .widget-footer[data-action], #insert_box .good, #settings .save, #email_connect .save, .upload:not(.upload_profile_photo)) {
	opacity: .45;
	cursor: default;
}
body.license-free :is(a[class*="add_"], a[class*="create_"], .cal_new, .cal_account_add, .compose_mail, .csv_import, .check_accounting, .doc_new, .doc_new_template, .manage_pipeline, .manage_task_board, .cd_rule_add, .widget-footer[data-action], #insert_box .good, #settings .save, #email_connect .save, .upload:not(.upload_profile_photo)):hover {
	box-shadow: none !important;
	filter: none !important;
	background-color: transparent !important;
}

/* Einstellungen › Profil › Lizenz: Basis und Pro nebeneinander, die aktive
   mit Akzentrahmen (ui_kits/app/settings.jsx, LizenzKarte) */
#profile .license_hint {
	margin: 0 0 14px;
}
#profile .license_cards {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
#profile .license_card {
	flex: 1 1 240px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
}
#profile .license_card.active {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.05);
}
#profile .license_head {
	display: flex;
	align-items: center;
	gap: 10px;
}
#profile .license_head .name {
	flex: 1;
	font: 600 15px var(--font-display);
	color: var(--text-primary);
}
#profile .license_badge {
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--accent);
	background: rgba(var(--accent-rgb),.12);
	color: var(--accent);
	font: 600 11px/1.3 var(--font-body);
}
#profile .license_card ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
#profile .license_card li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 0;
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-secondary);
}
#profile .license_card li svg {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--accent);
}
#profile .license_card li.without,
#profile .license_card li.without svg {
	color: var(--text-muted);
}
#profile .license_action {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
#profile .license_cards_free {
	margin-bottom: 14px;
}
#profile .license_card.free {
	flex-basis: 100%;
}
#profile .license_card.free ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
#profile .license_badge.trial {
	border-color: var(--warning);
	background: rgba(245,185,80,.12);
	color: var(--warning);
}
#profile .license_trial {
	margin-top: -4px;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
#profile .license_choose_note {
	margin: 12px 0 0;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
#profile .license_upgrade_note {
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}

/* Einstellungen › Agent: Credit, Verbrauch und Verlauf (ui_kits/app/settings.jsx,
   AgentSettings). Nichts davon ist einstellbar ausser dem Hinweis ab 80 %. */
#agent_settings {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 760px;
}
#agent_settings .usage_note {
	margin: 0 0 14px;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
#agent_settings .usage_tiles {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
#agent_settings .usage_tile {
	flex: 1 1 240px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
}
#agent_settings .usage_tile .label {
	font: 500 12px var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
#agent_settings .usage_tile .amount {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
#agent_settings .usage_tile .used {
	font: 600 26px var(--font-display);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
#agent_settings .usage_tile[data-level="warning"] .used { color: var(--warning); }
#agent_settings .usage_tile[data-level="danger"] .used { color: var(--danger); }
#agent_settings .usage_tile .of {
	font: 400 13px var(--font-body);
	color: var(--text-muted);
}
#agent_settings .usage_tile .bar {
	height: 6px;
	border-radius: 3px;
	background: var(--border-default);
	overflow: hidden;
}
#agent_settings .usage_tile .bar > span {
	display: block;
	height: 100%;
	background: var(--accent);
	transition: width .3s, background .3s;
}
#agent_settings .usage_tile[data-level="warning"] .bar > span { background: var(--warning); }
#agent_settings .usage_tile[data-level="danger"] .bar > span { background: var(--danger); }
#agent_settings .usage_tile .foot {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
#agent_settings .usage_tile .count {
	font-variant-numeric: tabular-nums;
}
#agent_settings .usage_alert {
	margin-top: 14px;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	font: 500 13px/1.4 var(--font-body);
}
#agent_settings .usage_alert.warning {
	border: 1px solid rgba(245,185,80,.45);
	background: rgba(245,185,80,.1);
	color: var(--warning);
}
#agent_settings .usage_alert.danger {
	border: 1px solid rgba(255,69,58,.45);
	background: rgba(255,69,58,.1);
	color: var(--danger);
}
#agent_settings .usage_notify {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 20px;
}
#agent_settings .usage_notify .hint {
	margin: 0;
	padding-left: 44px;
	font: 400 12px/1.5 var(--font-body);
}
#agent_settings .agent_notify_toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font: 400 14px/1.3 var(--font-body);
	color: var(--text-secondary);
	user-select: none;
}
#agent_settings .agent_notify_toggle .switch {
	position: relative;
	width: 34px;
	height: 20px;
	flex-shrink: 0;
	box-sizing: border-box;
	border-radius: 10px;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	transition: background .15s, border-color .15s;
}
#agent_settings .agent_notify_toggle .switch:after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--text-muted);
	transition: left .15s, background .15s;
}
#agent_settings .agent_notify_toggle.on .switch {
	background: var(--accent);
	border-color: var(--accent);
}
#agent_settings .agent_notify_toggle.on .switch:after {
	left: 16px;
	background: var(--on-accent);
}
#agent_settings .card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
#agent_settings .history_sum {
	padding-top: 4px;
	white-space: nowrap;
	font: 500 13px var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
}
#agent_settings .history_sum b {
	font-weight: 600;
	color: var(--text-primary);
}
#agent_settings .agent_model_note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 8px;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
#agent_settings .agent_model_note svg {
	flex-shrink: 0;
	margin-top: 2px;
}

.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;
}
/* Pipeline verwalten: drei Reiter, die Feldzeilen brauchen die Breite. */
#pipeline_box .box.manage {
	width: 560px;
}
/* Nur die Kartendarstellung braucht Platz fuer Vorschau und Liste nebeneinander. */
#pipeline_box .box.manage.wide {
	width: 780px;
}
/* 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;
}
/* Auswahlfelder in Dialogen folgen dem Designsystem: 40px hoch, eigener
   Chevron rechts innen, kein Aussehen des Betriebssystems. Die Regel haengt
   an .field.select_field, dem Merkmal, das die Dialoge ohnehin setzen — so
   sieht das Feld im Aufgaben-, Pipeline- und jedem weiteren Dialog gleich
   aus. Vorher galt sie nur fuer #pipeline_box, im Aufgabendialog stand
   deshalb ein nacktes Auswahlfeld des Browsers. */
.field.select_field {
	position: relative;
}
.field.select_field select,
#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;
}
.field.select_field select:focus,
#pipeline_box select:focus {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.field.select_field select option,
#pipeline_box select option {
	background: var(--popover-bg);
	color: var(--text-primary);
}
.field.select_field:after,
#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;
}
/* Auswahl des Angebots: sieht aus wie ein Select, die Liste haengt aber als
   #offer_menu am body, damit der Dialog sie nicht abschneidet. */
.offer_picker .trigger {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 32px 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);
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .15s, box-shadow .2s;
}
.offer_picker .trigger:focus {
	outline: none;
}
.offer_picker.open .trigger,
.offer_picker .trigger:focus {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.offer_picker .trigger.empty {
	color: var(--text-muted);
}
.offer_picker .trigger .dot {
	width: 8px;
	height: 8px;
}
.offer_picker .trigger .label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.offer_picker .trigger .arrow {
	position: absolute;
	right: 12px;
	top: 50%;
	display: flex;
	margin-top: -6px;
	color: var(--text-muted);
	transition: transform .15s;
}
.offer_picker.open .trigger .arrow {
	transform: rotate(180deg);
}
#offer_menu {
	position: fixed;
	/* ueber dem Kartendialog (.modal liegt bei 1000), aber unter der
	   Bestaetigung unten (.toast bei 1200) */
	z-index: 1100;
	padding: 6px;
	border-radius: var(--radius-m);
	border: 1px solid var(--accent);
	background: var(--surface-card);
	box-shadow: var(--glow-border);
	overflow-y: auto;
	animation: bc-fade-in .12s ease both;
}
#offer_menu .group {
	padding: 6px 10px 2px;
	font: 500 11px/1.3 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
#offer_menu .entry {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: var(--radius-s);
	font: 400 13px/1.3 var(--font-body);
	color: var(--text-secondary);
	text-align: left;
	cursor: pointer;
}
#offer_menu .entry.none {
	color: var(--text-muted);
}
#offer_menu .entry:hover,
#offer_menu .entry.active {
	background: var(--surface-raised);
}
#offer_menu .entry.selected {
	background: rgba(var(--accent-rgb),.08);
	color: var(--accent);
}
#offer_menu .entry .dot {
	width: 8px;
	height: 8px;
}
#offer_menu .entry .num {
	flex-shrink: 0;
	font: 600 12px/1.3 var(--font-body);
	font-variant-numeric: tabular-nums;
}
#offer_menu .entry .project {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#offer_menu .entry .net {
	flex-shrink: 0;
	font: 500 12px/1.3 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
}
#offer_menu .entry.selected .net {
	color: var(--accent);
}
/* Kasten unter den Feldern: Werte des Angebots und die optionalen Positionen. */
/* Zusatzfelder der Pipeline im Kartendialog: abgesetzt von den Feldern, die
   jede Karte hat. Beschriftung und Linie stehen nebeneinander, die Linie
   fuellt den Rest der Zeile. So braucht die Beschriftung keine eigene
   Hinterlegung, die auf der Glasflaeche des Dialogs als weisser Kasten
   auffallen wuerde. */
#pipeline_box .extra_fields {
	margin-top: 22px;
}
#pipeline_box .extra_fields .extra_head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
#pipeline_box .extra_fields .extra_label {
	font: 500 10px var(--font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
	flex-shrink: 0;
}
#pipeline_box .extra_fields .extra_rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--border-default);
}
#pipeline_box .extra_fields .form {
	margin: 0;
}
#pipeline_box .offer_box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
	padding: 14px 16px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-default);
	background: var(--surface-raised);
}
#pipeline_box .offer_box[hidden] {
	display: none;
}
#pipeline_box .offer_box .head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
#pipeline_box .offer_box .head .title {
	font: 600 13px/1.3 var(--font-body);
	color: var(--text-primary);
}
#pipeline_box .offer_box .head .date {
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-muted);
}
#pipeline_box .offer_box .state {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 9px;
	border-radius: var(--radius-s);
	border: 1px solid var(--warning);
	color: var(--warning);
	background: rgba(245,185,80,.14);
	font: 600 11px/1 var(--font-body);
}
#pipeline_box .offer_box .state.won {
	border-color: var(--accent);
	color: var(--accent);
	background: rgba(var(--accent-rgb),.12);
}
#pipeline_box .offer_box .state.lost {
	border-color: var(--danger);
	color: var(--danger);
	background: transparent;
}
#pipeline_box .offer_box .state.expired {
	border-color: var(--gray-400);
	color: var(--gray-400);
	background: transparent;
}
#pipeline_box .offer_box .open_estimate {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	color: var(--accent);
	font: 500 12px/1.3 var(--font-body);
	cursor: pointer;
}
#pipeline_box .offer_box .line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--border-default);
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-secondary);
}
#pipeline_box .offer_box .line b {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
#pipeline_box .offer_box .sum .sum_text b {
	color: var(--accent);
}
#pipeline_box .offer_box .sum .hint {
	color: var(--text-muted);
}
#pipeline_box .offer_box .options {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#pipeline_box .offer_box .options_head {
	font: 500 11px/1.3 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
/* Das Element ist ein label, deshalb Grossschreibung und Sperrung der
   allgemeinen Label-Regel hier zuruecknehmen. */
#pipeline_box .offer_box .opt {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 400 13px/1.4 var(--font-body);
	text-transform: none;
	letter-spacing: normal;
	color: var(--text-secondary);
	cursor: pointer;
}
#pipeline_box .offer_box .opt.on {
	color: var(--text-primary);
}
#pipeline_box .offer_box .opt .name {
	flex: 1;
	min-width: 0;
}
#pipeline_box .offer_box .opt .amount {
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
}
#pipeline_box .offer_box .opt.on .amount {
	color: var(--text-primary);
}
#pipeline_box .offer_box .take_dealsize {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border-radius: var(--radius-m);
	border: 1px solid rgba(var(--secondary-rgb),.45);
	color: var(--text-secondary);
	font: 600 12px/1 var(--font-body);
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
#pipeline_box .offer_box .take_dealsize:hover {
	border-color: var(--text-primary);
	color: var(--text-primary);
}
#pipeline_box .offer_box .take_dealsize.disabled {
	opacity: .45;
	cursor: default;
	pointer-events: none;
}
#pipeline_box .offer_box .note {
	display: flex;
	gap: 8px;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
#pipeline_box .offer_box .note svg {
	flex-shrink: 0;
	margin-top: 2px;
}
#pipeline_box .offer_box .note.won svg {
	color: var(--accent);
}
#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;
}
.timeline .empty {
	margin: 0;
	font: var(--text-small);
	color: var(--text-muted);
}
.tl_month {
	margin: 4px 0 14px;
	font: 600 14px/1.3 var(--font-display);
	color: var(--text-primary);
}
.tl_item {
	display: flex;
	gap: 14px;
}
.tl_rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}
.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);
}
.tl_icon.activity,
.tl_icon.estimate {
	color: var(--accent);
}
.tl_line {
	flex: 1;
	width: 1px;
	margin: 6px 0;
	background: var(--border-strong);
}
.tl_item.last .tl_line {
	display: none;
}
.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);
}
.tl_title {
	font: 600 13px/1.3 var(--font-body);
	color: var(--text-primary);
}
.tl_title span {
	font-weight: 400;
	color: var(--text-secondary);
}
.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);
}
.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);
}
/* Reiter Felder im Dialog "Pipeline verwalten": je Zeile Griff, Name, Typ und
   bei einer Auswahl darunter die Zuordnung. Alle Regeln haengen an
   #pipeline_box, damit sie die Listen der Anwendung nicht anfassen. */
#pipeline_box .field_hint {
	margin: 0 0 12px;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
#pipeline_box .field_list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#pipeline_box .field_row {
	padding: 6px 10px 6px 12px;
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
}
#pipeline_box .field_row .field_main {
	display: flex;
	align-items: center;
	gap: 8px;
}
#pipeline_box .field_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 .field_row .field_name {
	flex: 1;
	min-width: 0;
	height: 32px;
	padding: 0 8px;
	background: transparent;
	border-color: transparent;
	font: 500 14px/1.3 var(--font-body);
}
#pipeline_box .field_row .field_name:focus {
	background: var(--surface-card);
	border-color: var(--accent);
	box-shadow: none;
}
#pipeline_box .field_row .field_select {
	position: relative;
	display: block;
	flex-shrink: 0;
}
#pipeline_box .field_row .field_select.type {
	width: 118px;
}
#pipeline_box .field_row select {
	height: 32px;
	padding: 0 28px 0 10px;
	font-size: 13px;
}
#pipeline_box .field_row select:disabled {
	color: var(--text-muted);
	cursor: default;
}
#pipeline_box .field_row .field_select:after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	background: var(--icon-chevron) no-repeat center / contain;
	pointer-events: none;
}
#pipeline_box .field_row .tag {
	flex-shrink: 0;
	padding: 3px 7px;
	border-radius: var(--radius-s);
	background: rgba(var(--secondary-rgb),.12);
	font: 600 10px/1.2 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
#pipeline_box .field_row .remove_row {
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	border-radius: var(--radius-s);
	color: var(--danger);
	opacity: 0;
	transition: opacity .12s;
	cursor: pointer;
}
#pipeline_box .field_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 .field_row:hover .remove_row {
	opacity: 1;
}
#pipeline_box .field_row .field_extra {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
	padding: 8px 0 2px 21px;
	border-top: 1px dashed var(--border-default);
}
#pipeline_box .field_row .field_extra[hidden] {
	display: none;
}
#pipeline_box .field_row .field_options {
	width: 100%;
	min-height: 66px;
	padding: 8px 10px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-card);
	color: var(--text-primary);
	font: 400 13px/1.5 var(--font-body);
	resize: vertical;
	outline: none;
}
#pipeline_box .field_row .field_options:focus {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
#pipeline_box .field_row .field_options:disabled {
	color: var(--text-muted);
	cursor: default;
}
#pipeline_box .field_row .field_options[hidden] {
	display: none;
}
#pipeline_box .field_list .sortable-placeholder {
	height: 46px;
	border: 1px dashed var(--accent);
	border-radius: var(--radius-m);
	background: rgba(var(--accent-rgb),.05);
}
/* Reiter "Kartendarstellung" im Dialog "Pipeline verwalten": links die
   Vorschau der Karte in echter Groesse, rechts Aufbau und Farbleiste. Alle
   Regeln haengen an #pipeline_box, damit sie die Listen der Anwendung nicht
   anfassen. */
#pipeline_box .card_design .cd_split {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}
#pipeline_box .card_design .cd_left {
	width: 252px;
	flex-shrink: 0;
}
#pipeline_box .card_design .cd_right {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
#pipeline_box .card_design .cd_label {
	display: block;
	margin: 0 0 8px;
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
}
#pipeline_box .card_design .cd_hint {
	margin: 0 0 12px;
	font: 400 12px/1.55 var(--font-body);
	color: var(--text-muted);
}
#pipeline_box .card_design .cd_left .cd_hint {
	margin: 10px 0 0;
}
/* Die Karte in echter Groesse (220 px) auf einer ruhigen Flaeche */
#pipeline_box .card_design .cd_stage {
	padding: 16px;
	border-radius: var(--radius-l);
	border: 1px solid var(--border-default);
	background: var(--surface-glass);
}
#pipeline_box .card_design .cd_card {
	position: relative;
	width: 220px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 12px 10px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-default);
	background: var(--surface-raised);
	transition: border-color .2s, padding .2s;
}
/* Ist eine Regel gesetzt, haelt jede Karte links Platz fuer die Leiste frei */
#pipeline_box .card_design .cd_card.with_stripe {
	padding-left: 22px;
}
#pipeline_box .card_design .cd_stripe {
	position: absolute;
	left: 10px;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-radius: 2px;
}
#pipeline_box .card_design .cd_head {
	display: flex;
	align-items: center;
	gap: 8px;
}
#pipeline_box .card_design .cd_head .cd_slot:first-child {
	flex: 1;
	min-width: 0;
}
#pipeline_box .card_design .cd_head .cd_slot.right {
	flex-shrink: 0;
	min-width: 62px;
}
/* Eine Zeile der Karte. Leer zeigt sie gestrichelt ihren Namen. */
#pipeline_box .card_design .cd_slot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 22px;
	margin: 0 -4px;
	padding: 2px 4px;
	border: 1px dashed transparent;
	border-radius: var(--radius-s);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
#pipeline_box .card_design .cd_slot.right {
	justify-content: flex-end;
}
#pipeline_box .card_design .cd_slot.empty {
	border-color: var(--border-strong);
}
#pipeline_box .card_design .cd_slot.hl {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.07);
}
#pipeline_box .card_design .cd_slot[data-zone="marke"] {
	margin-top: 2px;
	padding-top: 8px;
	border-top: 1px solid var(--border-default);
}
#pipeline_box .card_design .cd_slot[data-zone="marke"].hl,
#pipeline_box .card_design .cd_slot[data-zone="marke"].empty {
	border-top-color: transparent;
}
#pipeline_box .card_design .cd_slot[data-zone="fuss"] {
	gap: 10px;
}
#pipeline_box .card_design .cd_slot_name {
	font: 400 10.5px/1.3 var(--font-body);
	color: var(--text-muted);
	opacity: .7;
	pointer-events: none;
}
#pipeline_box .card_design .cd_piece {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	min-width: 0;
	border-radius: 4px;
	outline: 1px solid transparent;
	outline-offset: 2px;
	cursor: pointer;
}
#pipeline_box .card_design .cd_piece:hover {
	outline-color: var(--accent);
}
/* Die Toene der Zeilen, wie auf der Karte im Board */
#pipeline_box .card_design .cd_slot[data-zone="kopf"] .cd_piece {
	font: 600 13px/1.3 var(--font-body);
	color: var(--text-primary);
}
#pipeline_box .card_design .cd_slot[data-zone="wert"] .cd_piece {
	font: 500 12px/1.3 var(--font-body);
	color: var(--text-secondary);
}
#pipeline_box .card_design .cd_slot[data-zone="zeile1"] .cd_piece,
#pipeline_box .card_design .cd_slot[data-zone="zeile2"] .cd_piece,
#pipeline_box .card_design .cd_slot[data-zone="fuss"] .cd_piece {
	font: 400 11px/1.3 var(--font-body);
	color: var(--text-muted);
}
#pipeline_box .card_design .cd_slot[data-zone="marke"] .cd_piece {
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-secondary);
}
#pipeline_box .card_design .cd_text,
#pipeline_box .card_design .cd_unknown {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
#pipeline_box .card_design .cd_unknown {
	font-style: italic;
}
#pipeline_box .card_design .cd_zahl {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
#pipeline_box .card_design .cd_datum {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
#pipeline_box .card_design .cd_kapsel {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	font: 600 10px/1 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
#pipeline_box .card_design .cd_action {
	display: inline-flex;
	color: var(--text-muted);
}
/* Umschalter In Ruhe / Ueberfahren */
#pipeline_box .card_design .cd_switch {
	display: inline-flex;
	margin-top: 10px;
	padding: 3px;
	gap: 2px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
}
#pipeline_box .card_design .cd_switch a {
	padding: 5px 12px;
	border-radius: var(--radius-s);
	font: 500 12px/1.3 var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
	transition: color .15s, background .15s;
}
#pipeline_box .card_design .cd_switch a.on {
	background: rgba(var(--accent-rgb),.12);
	color: var(--accent);
	font-weight: 600;
}
/* Aufbau: die sechs Zeilen als Liste */
#pipeline_box .card_design .cd_zones {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#pipeline_box .card_design .cd_zone {
	padding: 6px 10px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	transition: border-color .15s;
}
#pipeline_box .card_design .cd_zone.hl {
	border-color: var(--accent);
}
#pipeline_box .card_design .cd_zone_main {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 28px;
}
#pipeline_box .card_design .cd_zone_label {
	flex-shrink: 0;
	width: 76px;
	padding-top: 7px;
	font: 500 12px/1.2 var(--font-body);
	color: var(--text-muted);
}
#pipeline_box .card_design .cd_chips {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	padding: 2px 0;
}
#pipeline_box .card_design .cd_chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 6px 0 9px;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-strong);
	background: var(--surface-card);
	font: 500 12px/1.2 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
#pipeline_box .card_design .cd_chip:hover,
#pipeline_box .card_design .cd_chip.on {
	border-color: var(--accent);
	color: var(--text-primary);
}
#pipeline_box .card_design .cd_chip_x {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	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='none' stroke='%23000' stroke-width='2.4' 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.4' stroke-linecap='round'%3E%3Cpath d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
#pipeline_box .card_design .cd_chip_x:hover {
	background: var(--danger);
}
#pipeline_box .card_design .cd_add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 9px;
	border-radius: var(--radius-s);
	border: 1px dashed var(--border-strong);
	font: 500 12px/1.2 var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
#pipeline_box .card_design .cd_add:hover,
#pipeline_box .card_design .cd_add.on {
	border-color: var(--accent);
	color: var(--accent);
}
/* Auswahl und Optionen klappen direkt unter der Zeile auf */
#pipeline_box .card_design .cd_panel {
	margin-top: 8px;
	padding: 10px 0 2px;
	border-top: 1px dashed var(--border-default);
}
#pipeline_box .card_design .cd_panel[hidden] {
	display: none;
}
#pipeline_box .card_design .cd_group + .cd_group {
	margin-top: 12px;
}
#pipeline_box .card_design .cd_group_title {
	display: block;
	margin-bottom: 6px;
	font: 500 11px/1.2 var(--font-body);
	color: var(--text-muted);
}
#pipeline_box .card_design .cd_opts {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
#pipeline_box .card_design .cd_opt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 9px;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-strong);
	background: var(--surface-card);
	font: 500 12px/1.2 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
#pipeline_box .card_design .cd_opt:hover {
	border-color: var(--accent);
	color: var(--text-primary);
}
#pipeline_box .card_design .cd_opt.used {
	border-color: var(--border-default);
	color: var(--text-muted);
	opacity: .45;
	cursor: default;
}
#pipeline_box .card_design .cd_from {
	font: 400 11px/1.2 var(--font-body);
	color: var(--text-muted);
}
#pipeline_box .card_design .cd_options {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
}
#pipeline_box .card_design .cd_toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font: 400 13px/1.3 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
}
#pipeline_box .card_design .cd_sw {
	position: relative;
	width: 34px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 10px;
	border: 1px solid var(--border-strong);
	background: var(--surface-card);
	transition: background .15s, border-color .15s;
}
#pipeline_box .card_design .cd_sw:before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--text-muted);
	transition: left .15s, background .15s;
}
#pipeline_box .card_design .cd_toggle.on .cd_sw {
	border-color: var(--accent);
	background: var(--accent);
}
#pipeline_box .card_design .cd_toggle.on .cd_sw:before {
	left: 16px;
	background: var(--on-accent);
}
#pipeline_box .card_design .cd_take_out {
	margin-left: auto;
	font: 600 12px/1.3 var(--font-body);
	color: var(--danger);
	cursor: pointer;
}
#pipeline_box .card_design .cd_note {
	margin: 0;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
/* Farbleiste: Feldauswahl rechtsbuendig, darunter je Wert eine Zeile */
#pipeline_box .card_design .cd_field_row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 10px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
}
#pipeline_box .card_design .cd_field_label {
	flex: 1;
	min-width: 0;
	font: 400 13px/1.3 var(--font-body);
	color: var(--text-secondary);
}
#pipeline_box .card_design .cd_select {
	position: relative;
	display: block;
	flex-shrink: 0;
	width: 232px;
}
#pipeline_box .card_design .cd_select select {
	height: 32px;
	padding: 0 28px 0 10px;
	font-size: 13px;
}
#pipeline_box .card_design .cd_select:after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	background: var(--icon-chevron) no-repeat center / contain;
	pointer-events: none;
}
#pipeline_box .card_design .cd_rules {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}
#pipeline_box .card_design .cd_rule {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
}
#pipeline_box .card_design .cd_rule.rest {
	border-style: dashed;
	background: transparent;
}
#pipeline_box .card_design .cd_rule_value {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 400 13px/1.3 var(--font-body);
	color: var(--text-secondary);
}
#pipeline_box .card_design .cd_rule.rest .cd_rule_value {
	color: var(--text-muted);
}
#pipeline_box .card_design .cd_rule_ab {
	flex-shrink: 0;
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-muted);
}
#pipeline_box .card_design .cd_rule_input {
	flex: 1;
	min-width: 0;
	height: 30px;
	padding: 0 10px;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-strong);
	background: var(--surface-card);
	color: var(--text-primary);
	font: 500 12px/1.3 var(--font-body);
	outline: none;
}
#pipeline_box .card_design .cd_rule_input:focus {
	border-color: var(--accent);
	box-shadow: none;
}
#pipeline_box .card_design .cd_rule_x {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	background: var(--text-muted);
	opacity: .5;
	cursor: pointer;
	transition: opacity .12s, background .12s;
	-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 .card_design .cd_rule_x:hover {
	background: var(--danger);
	opacity: 1;
}
#pipeline_box .card_design .cd_rule_add {
	margin-top: 2px;
}
/* Die fuenf Farbpunkte. Der gewaehlte traegt einen Ring in seiner Farbe, ohne
   Fokusring des Browsers. */
#pipeline_box .card_design .cd_dots {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
#pipeline_box .card_design .cd_dot {
	position: relative;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	cursor: pointer;
	outline: none;
	transition: box-shadow .15s;
}
#pipeline_box .card_design .cd_dot:focus,
#pipeline_box .card_design .cd_dot:focus-visible {
	outline: none;
}
#pipeline_box .card_design .cd_dot.accent {
	background: var(--accent);
}
#pipeline_box .card_design .cd_dot.warning {
	background: var(--warning);
}
#pipeline_box .card_design .cd_dot.danger {
	background: var(--danger);
}
#pipeline_box .card_design .cd_dot.gray {
	background: var(--gray-400);
}
#pipeline_box .card_design .cd_dot.none {
	background: transparent;
	border: 1px solid var(--border-strong);
}
/* Ohne: durchgestrichener leerer Kreis */
#pipeline_box .card_design .cd_dot.none:before {
	content: '';
	position: absolute;
	left: 50%;
	top: -1px;
	bottom: -1px;
	width: 1px;
	margin-left: -1px;
	background: var(--border-strong);
	transform: rotate(45deg);
}
#pipeline_box .card_design .cd_dot.accent.on {
	box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 3px var(--accent);
}
#pipeline_box .card_design .cd_dot.warning.on {
	box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 3px var(--warning);
}
#pipeline_box .card_design .cd_dot.danger.on {
	box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 3px var(--danger);
}
#pipeline_box .card_design .cd_dot.gray.on {
	box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 3px var(--gray-400);
}
#pipeline_box .card_design .cd_dot.none.on {
	box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 3px var(--text-muted);
}
/* Dialog "Neue Karte": Suche ueber alle Ansprechpartner. */
#pipeline_box .subline.muted {
	color: var(--text-muted);
}
#pipeline_box .contact_search {
	margin-bottom: 18px;
}
#pipeline_box .contact_search input {
	width: 100%;
}
#pipeline_box .contact_list {
	max-height: 208px;
	overflow-y: auto;
	margin-top: 8px;
	padding: 4px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-default);
	background: var(--surface-raised);
}
#pipeline_box .contact_list .empty {
	margin: 0;
	padding: 10px 8px;
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-muted);
}
#pipeline_box .pick_contact {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 7px 10px;
	border-radius: var(--radius-s);
	cursor: pointer;
	transition: background .12s, color .12s;
}
#pipeline_box .pick_contact:hover {
	background: rgba(var(--secondary-rgb),.08);
}
#pipeline_box .pick_contact .name {
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#pipeline_box .pick_contact .company {
	flex: 1;
	text-align: right;
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#pipeline_box .pick_contact.selected {
	background: rgba(var(--accent-rgb),.12);
}
#pipeline_box .pick_contact.selected .name {
	color: var(--accent);
	font-weight: 600;
}
#pipeline_box .dialog_error {
	margin: 12px 0 0;
	font: 500 13px/1.4 var(--font-body);
	color: var(--danger);
}
#pipeline_box .dialog_error[hidden] {
	display: none;
}
#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);
}
/* Bestaetigung mit Haken, etwa wenn ein Angebot als gewonnen markiert wurde */
.toast.with_icon {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	white-space: nowrap;
}
.toast.with_icon .icon {
	display: flex;
	color: var(--accent);
}
@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;
	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: 30px;
	margin-bottom: 14px;
	flex-shrink: 0;
}
.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;
}
.select.pill.hover > input {
	color: var(--accent);
}
.select.pill.hover:before {
	filter: none;
}
.widget-filter.select > ul > li.selected > p {
	color: var(--accent);
}
/* Der Inhalt ist ein eigener Scrollkasten: laeuft er ueber, scrollt er,
   der Fussknopf darunter bleibt stehen. */
.widget-body {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: auto;
	scrollbar-width: thin;
}
/* Kleiner sekundaerer Knopf am Fuss des Widgets: nie gefuellt, gedaempft
   weisse Border, die bei Hover mit weissem Glow aufleuchtet. Keine
   Pillenform, fester Abstand von 20px ueber dem Knopf. */
.widget-footer {
	align-self: flex-start;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	margin-top: 20px;
	padding: 0 12px;
	border-radius: var(--radius-m);
	background: transparent;
	border: 1px solid rgba(var(--secondary-rgb),.45);
	font: 600 12px/1 var(--font-body);
	color: var(--text-secondary);
	transition: color .15s, border-color .15s, box-shadow .15s;
}
.widget-footer:hover {
	color: var(--text-primary);
	border-color: var(--text-primary);
	box-shadow: var(--glow-white);
}

/* Widget mit randbuendigen Zeilen: die Flaeche beim Ueberfahren laeuft bis
   an die Kartenkante, die Trennlinie bleibt auf Inhaltsbreite. Jeder
   Scrollkasten dazwischen braucht dieselben negativen Raender, sonst
   schneidet er die Flaeche ab. */
.widget.bleed {
	overflow: hidden;
}
.widget.bleed .widget-body,
.widget.bleed .widget-scroll {
	margin: 0 -20px;
	padding: 0 20px;
}
.widget.bleed .widget-scroll {
	flex: 1;
	min-height: 0;
	overflow: auto;
	scrollbar-width: thin;
}
.widget.bleed .widget-row {
	display: block;
	margin: 0 -20px;
	padding: 0 20px;
	transition: background .12s;
}
.widget.bleed .widget-row:hover {
	background: rgba(var(--accent-rgb),.05);
}
.widget.bleed .widget-row > .inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--border-default);
}
.widget.bleed .widget-row:last-child > .inner {
	border-bottom: none;
}
.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;
}
/* Sechs Zeilen passen mit Fussknopf in ein Widget (Umsatz bis zur Prognose) */
.key_facts li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 6px 0;
	border-bottom: 1px solid var(--border-default);
}
.key_facts li:last-child {
	border-bottom: none;
}
.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);
	/* Der Text darf schrumpfen und wird dann mit Auslassungspunkten
	   gekuerzt, der Betrag daneben bleibt vollstaendig. */
	flex: 1 1 auto;
	min-width: 0;
}
.key_facts li p.value {
	font: 600 15px/1.3 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);
}
/* Dashboard: Ringe im Widget "Angebote" (gewonnen / verloren), immer zwei
   Spalten, Ring 52 px mit Quote in der Mitte, daneben Wert und Beschriftung */
.widget .ring_caption {
	margin: 0 0 10px;
	font: 400 12px/1.4 var(--font-body);
	color: var(--text-muted);
}
.widget .ring_grid {
	margin: 0;
	padding: 6px 0 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 14px;
}
.widget .ring_grid li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.widget .ring_grid .ring {
	position: relative;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
}
.widget .ring_grid svg {
	display: block;
	transform: rotate(-90deg);
	overflow: visible;
}
.widget .ring_grid circle {
	fill: none;
	stroke-width: 5;
}
.widget .ring_grid .track {
	stroke: var(--surface-raised);
}
.widget .ring_grid .decided .track {
	stroke: var(--danger);
	stroke-opacity: .8;
}
.widget .ring_grid .won {
	stroke: var(--accent);
	stroke-dasharray: 131.95;
	stroke-dashoffset: var(--ring-off);
	animation: ring-fill .9s cubic-bezier(.3,.9,.35,1) .06s backwards;
}
.widget .ring_grid .has_won .won {
	filter: drop-shadow(0 0 4px rgba(var(--accent-rgb),.45));
}
@keyframes ring-fill {
	from { stroke-dashoffset: 131.95; }
	to { stroke-dashoffset: var(--ring-off); }
}
@media (prefers-reduced-motion: reduce) {
	.widget .ring_grid .won {
		animation: none;
	}
}
.widget .ring_grid .pct {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 400 10px/1 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
	white-space: nowrap;
}
.widget .ring_grid .has_won .pct {
	color: var(--text-secondary);
}
.widget .ring_grid .text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.widget .ring_grid .value {
	font: 600 15px/1.2 var(--font-display);
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
	white-space: nowrap;
}
.widget .ring_grid .label {
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.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;
}
/* Fehlerzustand wie Input im Designsystem (validate_insert_box): Rahmen in
   der Danger-Farbe ohne Glow, beim Fokus gewinnt der Akzent, Hinweis
   darunter in 12px. */
#insert_box .form .field input.error,
#insert_box .form .field textarea.error,
#insert_box .form .field .select.error > input,
#insert_box .form .field .editor_box.error,
#insert_box .form .field .checkboxes.error > .selected {
	border: 1.5px solid var(--danger);
	box-shadow: none;
}
#insert_box .form .field input.error:focus,
#insert_box .form .field textarea.error:focus,
#insert_box .form .field .editor_box.error:focus-within {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
#insert_box .form .field .field_error {
	margin: 6px 0 0;
	font: 400 12px/1.3 var(--font-body);
	color: var(--danger);
	text-transform: none;
	letter-spacing: 0;
}
.form > li .field input,
.form > li .field textarea {
	width: 100%;
}
.form > li .field textarea {
	min-height: 120px;
}
.form > li.calc_net .field {
	display: flex;
	align-items: center;
	gap: 8px;
}
.form > li.calc_net .field input {
	flex: 1;
	min-width: 0;
}
.form > li.calc_net .field .mini_btn {
	width: 32px;
	height: 40px;
	flex-shrink: 0;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-muted);
	border-radius: var(--radius-m);
}
.form > li.calc_net .field .mini_btn:hover {
	color: var(--accent);
	border-color: var(--accent);
}
.form > li .field .file_select {
	width: 100%;
	height: 100px;
	border: 1px dashed rgba(var(--secondary-rgb),.35);
	box-shadow: none;
	color: var(--text-secondary);
	font-weight: 600;
	font-size: 13px;
}
.form > li .field .file_select:hover,
.form > li .field .file_select.highlight {
	border-color: var(--accent);
	color: var(--accent);
	background: rgba(var(--accent-rgb),.05);
	box-shadow: none;
}
.form > li .field .file_select input {
	height: 100%;
}
.form > li .field .upload_progress {
	top: 0;
	left: 0;
	z-index: -1;
	border-radius: var(--radius-m);
	overflow: hidden;
}
.form > li .field .file_preview {
	min-height: 200px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	overflow: hidden;
}
.form > li .field .file_preview embed {
	width: 100%;
	height: 400px;
}
.form > li .field .file_preview img {
	width: 100%;
	display: block;
}
/* Einzelne Checkbox im Formular: das Kaestchen bleibt 15px breit, sonst
   zieht die allgemeine Feldregel (input 100%) einen leeren Rahmen ueber die
   ganze Breite, und das Label steht rechts daneben statt darueber. */
.form > li .field > .checkbox {
	display: flex;
	align-items: center;
	margin-top: 4px;
}
.form > li .field > .checkbox input[type="checkbox"] {
	width: 15px;
}
.form > li .field > .checkbox label {
	display: inline-flex;
	margin: 0 0 0 10px;
	height: auto;
	white-space: normal;
	overflow: visible;
	font: 400 14px/1.4 var(--font-body);
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-secondary);
}
.form > li .field > .checkbox input[type="checkbox"]:checked + label {
	color: var(--text-primary);
}
.form > li.checkbox_row + li.checkbox_row {
	margin-top: -8px;
}
.form > li .field .checkboxes {
	min-height: 120px;
	max-height: 240px;
	overflow: auto;
	padding: 6px 4px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
}
.form > li .field .checkboxes ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.form > li .field .checkboxes ul:empty:after {
	content: 'Keine Einträge vorhanden';
	display: block;
	padding: 10px 10px;
	font: var(--text-small);
	color: var(--text-muted);
}
.form > li .field .checkboxes ul li {
	position: relative;
	display: flex;
	align-items: center;
	padding: 7px 10px;
	border-radius: var(--radius-s);
	transition: background .12s;
}
.form > li .field .checkboxes ul li:hover {
	background: rgba(var(--accent-rgb),.05);
}
/* Die Breitenregel fuer Formularfelder (100%) gilt nicht fuer das Haekchen,
   sonst verdraengt es die Beschriftung auf null Breite */
.form > li .field .checkboxes ul input[type="checkbox"] {
	width: 15px;
	flex: 0 0 15px;
	margin: 0;
	align-self: center;
}
.form > li .field .checkboxes ul input[type="checkbox"] + label {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	line-height: 15px;
	margin: 0 0 0 10px;
}
/* Ein Aufwand kommt als Ueberschrift plus Aufzaehlung der Positionen. In der
   Auswahlliste zaehlt nur die Ueberschrift: eine Zeile je Aufwand, bei
   Ueberlaenge mit Auslassungszeichen. Die Aufzaehlung stand sonst neben der
   Ueberschrift, weil die Beschriftung fuer die Ausrichtung ein Flex-Element
   ist und beide Absaetze damit zu Flex-Elementen wurden. */
.form > li .field .checkboxes ul label > p {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.form > li .field .checkboxes ul label > p ~ p {
	display: none;
}
.form > li .field .checkboxes ul li span {
	display: inline-block;
	vertical-align: top;
}
.form > li .field .checkboxes ul li span.num {
	width: 44px;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
.form > li .field .checkboxes ul li span.name {
	width: calc(100% - 150px);
	overflow: hidden;
	text-overflow: ellipsis;
}
.form > li .field .checkboxes ul li span.total {
	width: 100px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.form .info {
	margin: 0;
	font: var(--text-small);
	color: var(--text-secondary);
}
.form .info span {
	margin-right: 8px;
}
/* Reiter innerhalb eines Dialogs */
.tabs .nav {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	gap: 26px;
	border-bottom: 1px solid var(--border-default);
}
.tabs .nav li {
	padding: 0 2px 11px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font: 500 14px/1.2 var(--font-body);
	color: var(--text-muted);
	transition: color .15s;
}
.tabs .nav li:hover {
	color: var(--text-primary);
}
.tabs .nav li.active {
	color: var(--accent);
	font-weight: 600;
	border-bottom-color: var(--accent);
}
.tabs .contents > div {
	display: none;
}
.tabs .contents > div.active {
	display: block;
}
.pin_box {
	padding: 20px;
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
}
.pin_box p {
	color: var(--text-secondary);
}
.pin_box input {
	width: 100%;
}
.tooltip {
	position: relative;
	display: inline-block;
	max-width: 100%;
}
.tooltip:after {
	content: 'i';
	display: inline-grid;
	place-items: center;
	width: 14px;
	height: 14px;
	margin-left: 6px;
	border-radius: 50%;
	border: 1px solid var(--text-muted);
	font: 600 9px/1 var(--font-body);
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-muted);
	vertical-align: 1px;
	cursor: help;
}
.tooltip .tip,
.tooltip span {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: 6px;
	z-index: 300;
	width: 280px;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	font: 400 12px/1.5 var(--font-body);
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-secondary);
	white-space: normal;
	visibility: hidden;
	opacity: 0;
	transition: opacity .15s;
}
.tooltip:hover .tip,
.tooltip:hover span {
	visibility: visible;
	opacity: 1;
}

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

.modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
	opacity: 0;
	background: rgba(var(--overlay-rgb),.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: opacity .2s, visibility 0s .2s;
}
.modal.show {
	visibility: visible;
	opacity: 1;
	transition: opacity .2s;
}
.modal .container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 24px;
}
.modal .box {
	position: relative;
	width: 600px;
	max-width: 100%;
	max-height: 90vh;
	overflow: auto;
	padding: 28px;
	border-radius: var(--radius-l);
	background: var(--modal-bg);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	color: var(--text-primary);
}
/* Einstellungen › Dokumente › Allgemein: Nummernkreise unter den Textfeldern,
   durch eine Linie abgesetzt, drei Felder nebeneinander. "Zuletzt vergeben"
   steht als Tooltip ueber dem Feld (Hover und Fokus) im Stil der
   Diagramm-Tooltips; im Fehlerfall steht die Meldung darunter. */
#numberranges {
	margin-top: 8px;
	padding-top: 22px;
	border-top: 1px solid var(--border-default);
}
#numberranges h4 {
	margin: 0 0 6px;
	font: 600 15px var(--font-display);
	letter-spacing: -.01em;
	color: var(--text-primary);
}
#numberranges .hint {
	margin: 0 0 16px;
	font: var(--text-small);
	color: var(--text-muted);
}
#numberranges .nr_fields {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 16px 20px;
}
#numberranges .nr_field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: auto;
}
#numberranges .nr_field.error > label {
	color: var(--danger);
}
#numberranges .nr_field > label {
	white-space: nowrap;
}
#numberranges .nr_field.error input {
	border-color: var(--danger);
	box-shadow: 0 0 10px rgba(242,109,109,.25);
}
#numberranges .nr_error {
	letter-spacing: 0;
	text-transform: none;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font: 400 12px/1.4 var(--font-body);
	color: var(--danger);
}
#numberranges .nr_error[hidden] {
	display: none;
}
#numberranges .nr_error svg {
	flex-shrink: 0;
	margin-top: 1px;
}
@media (max-width: 770px) {
	body:not(.static) #numberranges .nr_fields {
		grid-template-columns: minmax(0,1fr);
	}
}
/* Nur-lesen-Wert im Formular (Nummer aus dem Nummernkreis): Form und Masse
   wie ein Eingabefeld, aber ohne Flaeche, gestrichelter Rahmen ringsum,
   Schloss davor, nicht fokussierbar, darunter der Hinweis */
.field_readonly {
	height: 40px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	background: transparent;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-m);
	font: 500 14px var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
	cursor: default;
}
.field_readonly svg {
	flex-shrink: 0;
	color: var(--text-muted);
}
.field_hint {
	display: block;
	margin-top: 4px;
	font: 400 12px/1.4 var(--font-body);
	color: var(--text-muted);
}
/* Einstellungen › Profil › Auftragsverarbeitung */
.avv_hint {
	margin: 0 0 12px;
}
.avv_status {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font: var(--text-body);
	color: var(--text-primary);
}
.avv_status .avv_ok {
	display: inline-flex;
	color: var(--accent);
}
.avv_status a {
	margin-left: auto;
	font: 500 13px var(--font-body);
}
/* AVV-Zustimmung (part.modal-avv.html): bleibt offen, bis zugestimmt ist */
.modal.avv_gate {
	visibility: visible;
	opacity: 1;
	z-index: 1100;
}
/* Vertrag im Dialog: Kopf und Fuss stehen, nur der Text scrollt. Der
   Dialog bleibt klein, auf dem Handy hoechstens 90vh hoch. */
#avv .box {
	width: 620px;
	max-height: min(720px, 85vh);
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
#avv .avv_head {
	padding: 24px 28px 14px;
	border-bottom: 1px solid var(--border-default);
}
#avv .avv_shield {
	width: 40px;
	height: 40px;
	margin-bottom: 12px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(var(--accent-rgb),.45);
	background: rgba(var(--accent-rgb),.08);
	color: var(--accent);
}
#avv .avv_head .subline {
	margin-bottom: 10px;
}
#avv .avv_intro {
	margin: 0;
	font: var(--text-small);
	color: var(--text-secondary);
}
#avv .avv_doc {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 28px 20px;
	font: var(--text-small);
	color: var(--text-secondary);
	outline: none;
}
#avv .avv_doc .label:first-child {
	margin-top: 16px;
}
#avv .avv_foot {
	padding: 14px 28px 20px;
	border-top: 1px solid var(--border-default);
}
@media (max-width: 770px) {
	body:not(.static) #avv .box {
		max-height: 90vh;
	}
	body:not(.static) #avv .avv_head,
	body:not(.static) #avv .avv_doc,
	body:not(.static) #avv .avv_foot {
		padding-left: 18px;
		padding-right: 18px;
	}
}
#avv .avv_check {
	display: flex;
	align-items: center;
	margin: 0;
}
#avv .avv_check label {
	white-space: normal;
	color: var(--text-primary);
}
#avv .avv_error {
	margin: 12px 0 0;
	color: var(--danger);
	font: var(--text-small);
}
#avv .avv_actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
}
#avv .avv_actions .logout {
	font: var(--text-small);
	color: var(--text-muted);
}
#avv .avv_accept.disabled {
	opacity: .45;
	pointer-events: none;
}
.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 {
	position: relative;
	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 {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	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;
	flex-shrink: 0;
}
.editor_btn.with_chevron {
	width: auto;
	padding: 0 6px;
}
.editor_btn.with_chevron svg + svg {
	width: 9px;
	height: 9px;
}
/* Hover als graue Flaeche, kein Akzent (D11) */
.editor_btn:hover {
	background: var(--ink-800);
	color: var(--text-secondary);
	text-decoration: none;
}
/* Beschriftung direkt unter dem Symbol in derselben grauen Flaeche;
   bei offenem Flyout keine Beschriftung */
.editor_btn[data-tip]:hover::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	padding: 3px 8px 4px;
	border-radius: 6px;
	background: var(--ink-800);
	box-shadow: 0 6px 16px rgba(0,0,0,.25);
	font: 500 11px/1.3 var(--font-body);
	color: var(--text-secondary);
	white-space: nowrap;
	pointer-events: none;
	z-index: 40;
	animation: bc-fade-in .15s ease both;
}
.editor_toolbar:has(.editor_tool.open) .editor_btn::after {
	display: none;
}
.editor_menu.to_left {
	left: auto;
	right: 0;
}
[data-theme="light"] .editor_btn:hover,
[data-theme="light"] .editor_btn[data-tip]:hover::after {
	background: var(--border-default);
	box-shadow: none;
}
.editor_sep {
	width: 1px;
	height: 18px;
	margin: 0 6px;
	background: var(--border-strong);
}
/* Code-Modus: nur der Knopf <> bleibt bedienbar */
.editor_box.html_mode .editor_btn:not([data-cmd="html"]) {
	opacity: .35;
	cursor: default;
}
.editor_box.html_mode .editor_btn:not([data-cmd="html"]):hover {
	background: transparent;
	color: var(--text-muted);
}
.editor_box.html_mode .editor_btn:not([data-cmd="html"])::after {
	display: none;
}
.editor_btn.active {
	background: rgba(var(--accent-rgb),.10);
	color: var(--accent);
}
.editor_menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 50;
	min-width: 220px;
	max-width: 300px;
	max-height: 340px;
	overflow-y: auto;
	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.variables {
	width: 300px;
}
.editor_menu_title {
	padding: 4px 10px 6px;
	font: 600 11px var(--font-body);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.editor_menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: var(--radius-s);
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-primary);
	cursor: pointer;
	white-space: nowrap;
}
.editor_menu a svg {
	flex-shrink: 0;
	color: var(--text-muted);
}
.editor_menu a .txt {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.editor_menu a .top.mono {
	font: 500 13px var(--font-mono, ui-monospace, monospace);
}
.editor_menu a .note {
	font: 400 12px/1.35 var(--font-body);
	color: var(--text-muted);
	white-space: normal;
}
.editor_menu a:hover {
	background: rgba(var(--accent-rgb),.07);
	text-decoration: none;
}
/* Absatzformat (editor.jsx): das aktuelle Format in Akzentfarbe mit
   Haekchen rechts */
.editor_menu.checked a .txt {
	flex: 1;
}
.editor_menu.checked a .check {
	display: none;
	margin-left: auto;
}
.editor_menu.checked a.on .top {
	color: var(--accent);
}
.editor_menu.checked a.on .check {
	display: inline-flex;
}
.editor_menu.checked a.on .check svg {
	color: var(--accent);
}
/* Link-Popover: liegt als Glasflaeche unter der Werkzeugleiste ueber deren
   volle Breite, sichtbar erst mit der Klasse link_open am Editorrahmen.
   Feld und Knopf setzen ihre Breite ausdruecklich zurueck: in Dialogen gilt
   sonst .modal button { width: 100% } und .form > li .field input
   { width: 100% }, dann nimmt der Knopf die ganze Zeile und das Adressfeld
   schrumpft auf wenige Pixel. Die Auswahl der Regeln ist deshalb enger
   gefasst als die beiden. */
.editor_linkbar {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 8px;
	right: 8px;
	z-index: 20;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	box-shadow: var(--shadow-card);
}
.editor_box.link_open .editor_linkbar {
	display: flex;
}
.editor_linkbar .editor_link_url {
	flex: 1 1 auto;
	min-width: 0;
	height: 34px;
}
.editor_box .editor_linkbar .editor_link_url {
	width: auto;
}
.editor_linkbar .editor_link_url.error {
	border-color: var(--danger);
}
.editor_linkbar .editor_link_apply {
	flex: 0 0 auto;
	width: auto;
	height: 34px;
	padding: 0 14px;
	font-size: 13px;
}
.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 {
	position: relative;
}
/* Mail schreiben, antworten, weiterleiten: der Editor scrollt selbst, statt
   den Dialog mit langen Zitaten endlos zu machen */
#compose_mail_box .editor_content {
	max-height: min(420px, 45vh);
	overflow-y: auto;
}
/* Platzhalter der textarea: nur ein ::before, damit im gespeicherten HTML
   kein Knoten dafuer landet. Der leere Editor traegt einen Absatz und ist
   deshalb nie wirklich :empty, die Klasse empty setzt js/editor.js. */
.editor_content:empty::before,
.editor_content.empty::before {
	content: attr(data-placeholder);
	position: absolute;
	left: 14px;
	top: 12px;
	right: 14px;
	color: var(--text-muted);
	pointer-events: none;
}
.editor_content p {
	margin: 0 0 8px;
}
.editor_content a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* Zitat der Originalnachricht im Antwortdialog */
.editor_content blockquote {
	margin: 0 0 8px;
	padding: 2px 0 2px 12px;
	border-left: 2px solid var(--border-strong);
	color: var(--text-secondary);
}
.editor_content p.small {
	font-size: 12px;
}
.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;
}
/* Handy: drei Knoepfe (Loeschen, Abbrechen, Speichern) passen sonst nicht in
   die Zeile, und rechtsbuendig laeuft der Ueberschuss links aus dem Dialog */
@media (max-width: 770px) {
	body:not(.static) .modal .center {
		justify-content: safe flex-end;
		gap: 8px;
	}
	body:not(.static) .modal .center .button {
		flex: 0 1 auto;
		min-width: 0;
		padding-left: 12px;
		padding-right: 12px;
	}
}
.modal .box_content > div > .form {
	margin-top: 0;
}
#error_msg {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	background: rgba(242,109,109,.12);
	border: 1px solid rgba(242,109,109,.4);
	color: var(--danger);
	font: var(--text-small);
	text-align: center;
}
/* Rich-Text-Editor (Froala): dunkle Flaeche, Heroicons-Werkzeugleiste,
   Fokus-Glow wie bei den Eingabefeldern. */

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

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

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

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

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

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

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

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

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

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

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

/* Auf kleinen Bildschirmen zeigen die Listen alle Spalten wie auf breiten
   und scrollen waagerecht; Haekchen links und Zeilenmenue rechts stehen in
   den Randzellen fest (list_edges in js/ui.js). Frueher blieben hier nur die
   Spalten mit show_mobile stehen. Spalten ziehen geht mit dem Finger nicht. */
@media (max-width: 770px) {
	body:not(.static) .list-legend {
		padding-left: 12px;
	}
	body:not(.static) .col-resize {
		display: none;
	}
}

@media (max-width: 770px) {
	/* Rechts gelten die Abstaende der breiten Ansicht (Randzelle 44px) */
	body:not(.static) .list-view > li {
		padding-left: 12px;
	}
}

@media (max-width: 770px) {
	/* Die Auswahlspalte bleibt aussen vor: sie steht links buendig ohne
	   Polsterung (Regel weiter oben), in der Kopfzeile wie in der Zeile. Ohne
	   die Ausnahme gewinnt diese Regel dort wegen ihrer hoeheren Spezifitaet
	   und rueckt allein die Kaestchen der Zeilen um 6px ein, die der
	   Kopfzeile aber nicht. */
	body:not(.static) .list-view > li > [data-id]:not([data-id='select']) {
		padding: 10px 6px;
	}
	/* Das Kaestchen sitzt wie auf breiten Bildschirmen 20px vom Rand der
	   Karte: 12px Zeilenrand plus 8px hier. Die Randklone (.edge-cell) haben
	   20px fest, ohne diese 8px sprang das Kaestchen um 8px nach rechts,
	   sobald die Klone einblendeten. Die Zelle bleibt 40px breit
	   (border-box), die Spalten daneben ruecken nicht. */
	body:not(.static) .list-view > li > p[data-id='select'],
	body:not(.static) .list-legend p[data-id='select'] {
		padding-left: 8px;
	}
}

@media (max-width: 770px) {
	body:not(.static) .list-filter > * {
		flex: 1 1 calc(50% - 6px);
	}
	/* Die Mehrfachauswahl (Projektfilter) fuellt ihre halbe Spalte wie das
	   Jahr daneben, Huelle und Box gemeinsam, damit der Chevron in der Box
	   bleibt. */
	body:not(.static) .list-filter .checkboxes.pill {
		width: 100%;
	}
	body:not(.static) .list-filter .checkboxes.pill .selected {
		width: 100%;
		max-width: none;
	}
}

@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) {
	/* rechts bis an den Bildschirmrand, damit angeschnittene Reiter
	   zeigen, dass die Leiste weitergeht */
	body:not(.static) .tab_bar {
		margin-right: -16px;
	}
	body:not(.static) .slide_navi > ul {
		padding-right: 16px;
	}
}

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

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

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

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


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

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

@media print {

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   Wiederkehrende Aufwaende (Aufwaende > Wiederkehrend), Produkte und
   Lieferanten (Einstellungen > Produkte), SEPA-Mandate am Unternehmen
   -------------------------------------------------------------------------- */
.list-view.recurring > li[data-state='active']:before {
	background: var(--accent);
}
.list-view.recurring > li[data-state='due']:before {
	background: var(--warning);
}
.list-view.recurring > li[data-state='ended']:before {
	background: var(--gray-400);
}
.list-view.recurring > li[data-state='ended'] {
	opacity: .6;
}
.list-view.recurring > li[data-state='ended'] > [data-id] {
	color: var(--text-muted);
}
.list-view li p .state.ended {
	color: var(--text-muted);
}
.list-view > li > [data-id].profit {
	color: var(--accent);
	font-weight: 500;
}
.list-view > li > [data-id].profit.negative {
	color: var(--danger, #ff6b6b);
}
.list-view > li[data-state='ended'] > [data-id].profit {
	color: var(--text-muted);
}
.list-legend-colors .is-expired.ended {
	text-decoration: none;
}
.sepa_mark {
	display: inline-block;
	margin-left: 6px;
	font: 600 10px/1 var(--font-body);
	letter-spacing: .04em;
	color: var(--accent);
	white-space: nowrap;
	vertical-align: middle;
	cursor: help;
}
.list-view li p .tag.soft + .tag.soft {
	margin-left: 4px;
}
.recurring-kpis .value.negative {
	color: var(--danger, #ff6b6b);
}
.settings-card .card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 6px;
	flex-wrap: wrap;
}
.settings-card .card-head h2 {
	margin: 0;
}
.settings-card .list-filter {
	margin-bottom: 16px;
}
.settings-card .list-card {
	margin-top: 0;
}
#products_page .list-overview .count,
#products_page .list-overview .sum {
	color: var(--text-secondary);
}

/* Positionen aus dem Produktkatalog im Dialog der Vorlage */
.form .rec_items {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	padding: 4px 12px;
}
.form .rec_items .rec_item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 84px 110px 30px;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-default);
	font: 400 13px var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
}
.form .rec_items .rec_item .select {
	min-width: 0;
}
.form .rec_items .rec_item .select > input {
	height: 34px;
	font-size: 13px;
}
.form .rec_items .rec_item input.rec_qty {
	height: 34px;
	text-align: right;
	font-size: 13px;
}
.form .rec_items .rec_item .rec_cost {
	text-align: right;
	white-space: nowrap;
}
.form .rec_items .rec_item .rec_remove {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	cursor: pointer;
	border-radius: var(--radius-s);
	color: var(--text-muted);
}
.form .rec_items .rec_item .rec_remove:hover {
	color: var(--danger, #ff6b6b);
}
.form .rec_items .rec_sum {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	font: 500 13px var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
.form .rec_items .rec_sum .value {
	color: var(--accent);
}
.form .rec_items .rec_sum .value.negative {
	color: var(--danger, #ff6b6b);
}
.form .rec_items .rec_empty {
	padding: 10px 0;
	font: var(--text-small);
	color: var(--text-muted);
}
.form .rec_add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	cursor: pointer;
	font: 600 12px var(--font-body);
	color: var(--accent);
}
.form .rec_hint {
	display: block;
	margin-top: 8px;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
.form .rec_hint code {
	font: var(--text-code);
	color: var(--text-secondary);
}

/* Eigenschaften am Kontakt: freie Liste aus Schluessel und Wert */
.form .property_list {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	overflow: hidden;
	background: var(--surface-raised);
}
.form .property_list .property_row {
	display: grid;
	grid-template-columns: minmax(90px, .8fr) 1.6fr 34px;
	align-items: center;
	gap: 4px;
	padding: 0 4px;
	border-bottom: 1px solid var(--border-default);
}
.form .property_list .property_row:last-child {
	border-bottom: none;
}
.form .property_list .property_row input {
	min-width: 0;
	height: 38px;
	padding: 0 12px;
	background: transparent;
	border: none;
	border-radius: var(--radius-s);
	box-shadow: none;
	color: var(--text-primary);
	font: 400 14px var(--font-body);
}
.form .property_list .property_row input.property_key {
	color: var(--text-secondary);
	font: 500 13px var(--font-body);
}
.form .property_list .property_row input:focus {
	background: transparent;
	box-shadow: none;
}
/* Fokus in einem Feld zeigt die ganze Box wie ein Eingabefeld */
.form .property_list:focus-within {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.form .property_list .property_row a {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	justify-self: center;
	cursor: pointer;
	border-radius: var(--radius-s);
	color: var(--text-muted);
}
.form .property_list .property_row a.property_remove:hover {
	color: var(--danger, #ff6b6b);
}
.form .property_list .property_row a.property_add {
	color: var(--accent);
}

/* Reiter im Dialog: der Reiter Aktivitaet zeigt den Zeitstrahl */
#insert_box .tabs .contents .timeline {
	max-height: 50vh;
	overflow: auto;
	padding-right: 4px;
}
#insert_box .tabs .contents .sepa_head {
	margin: 0 0 16px;
	font: var(--text-small);
	color: var(--text-muted);
}
#insert_box .form > li.disabled_by_mandate {
	opacity: .45;
	pointer-events: none;
}

/* Dialogkopf wie im Designsystem: Name des Datensatzes und Unterzeile */
#insert_box .dlg_head,
#sign_box .dlg_head {
	margin: 0 0 22px;
}
#insert_box .dlg_head h2,
#sign_box .dlg_head h2 {
	margin: 0;
	font: 600 19px/1.3 var(--font-display);
	letter-spacing: -.01em;
	color: var(--text-primary);
}
#insert_box .dlg_head .subline,
#sign_box .dlg_head .subline {
	margin: 4px 0 0;
	font: var(--text-small);
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Mobil: keine Seitenleiste, sondern eine fixierte Leiste am unteren Rand
   mit den fuenf Bereichen und dem Account-Indikator ganz rechts. Hintergrund
   wie die Widgets, Rahmenlinie oben, Platz fuer die Home-Geste. Der
   Startknopf des Agenten wandert nach rechts oben.
   -------------------------------------------------------------------------- */
@media (max-width: 770px) {
	body:not(.static) aside.nav {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: auto;
		/* Puffer fuer die abgerundeten Ecken und die Home-Geste des iPhones:
		   mindestens 20 px, sonst die Sicherheitszone des Geraets */
		padding: 6px 8px calc(6px + max(20px, env(safe-area-inset-bottom, 0px)));
		flex-direction: row;
		align-items: center;
		background: var(--surface-glass);
		backdrop-filter: var(--blur-glass);
		-webkit-backdrop-filter: var(--blur-glass);
		border-top: 1px solid var(--border-default);
		overflow: visible;
		transform: none;
		animation: none;
		transition: none;
	}
	body:not(.static) aside.nav .logo {
		display: none;
	}
	body:not(.static) aside.nav nav {
		flex: 1;
		flex-direction: row;
		align-items: center;
		min-height: 0;
	}
	body:not(.static) aside.nav nav .nav_container {
		flex: 5;
		flex-direction: row;
	}
	body:not(.static) aside.nav nav .container {
		flex: 1;
		padding: 0;
	}
	body:not(.static) aside.nav nav ul {
		flex-direction: row;
		gap: 0;
		width: 100%;
	}
	body:not(.static) aside.nav nav ul li {
		flex: 1;
		display: grid;
		place-items: center;
	}
	body:not(.static) aside.nav nav ul li a {
		gap: 0;
		height: 56px;
		justify-content: center;
	}
	body:not(.static) aside.nav nav .title:not(.account_menu .title),
	body:not(.static) aside.nav nav .nav_icon .trace,
	body:not(.static) aside.nav nav ul.secondary li:not(.account) {
		display: none;
	}
	/* Das Account-Menue bleibt wie am Desktop: Eintraege linksbuendig mit Beschriftung */
	body:not(.static) aside.nav .account_menu a {
		gap: 10px;
		height: auto;
		justify-content: flex-start;
	}
	body:not(.static) aside.nav .account_menu .title {
		display: inline;
	}
	body:not(.static) aside.nav nav .nav_icon {
		border: 1px solid transparent;
		transition: border-color .2s, box-shadow .2s, background .2s;
	}
	body:not(.static) aside.nav nav ul li.active .nav_icon {
		border-color: var(--accent);
		box-shadow: var(--glow-border);
		animation: none;
	}
	body:not(.static) aside.nav li.account .account_wrap {
		display: grid;
		place-items: center;
	}
	body:not(.static) aside.nav li.account .nav_icon,
	body:not(.static) aside.nav li.account .account_wrap.open .nav_icon {
		border: 1px solid transparent;
		box-shadow: none;
		background: transparent;
	}
	body:not(.static) aside.nav .account_menu {
		left: auto;
		right: 0;
		bottom: calc(100% + 12px);
	}
	body.signed_in:not(.static) .page,
	body.signed_in.nav-collapsed:not(.static) .page {
		margin-left: 0;
		padding-bottom: calc(70px + max(20px, env(safe-area-inset-bottom, 0px)));
	}
	body:not(.static) .page > section {
		padding: 20px 16px 20px 16px;
	}
	body:not(.static) .page footer {
		padding: 16px;
	}
	/* 41 px wie auf dem Desktop, mittig auf Hoehe des Logos */
	body:not(.static) .agent_fab {
		right: 16px;
		top: calc(24px + env(safe-area-inset-top, 0px));
		bottom: auto;
	}
	/* Kopf mit Logo auf dem Handy: scrollt mit dem Inhalt weg, nur der
	   Agent-Indikator rechts oben bleibt stehen (position fixed). */
	body.signed_in:not(.static) .page > header {
		display: block;
		position: static;
		padding: calc(24px + env(safe-area-inset-top, 0px)) 74px 0 16px;
		background: transparent;
		border-bottom: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	body.signed_in:not(.static) .page > header .account {
		display: none;
	}
	body.signed_in:not(.static) .page > header .logo .app_icon {
		width: 42px;
		min-width: 42px;
		height: 42px;
	}
	body.signed_in:not(.static) .page > header .wordmark {
		font-size: 22px;
	}
}

/* --------------------------------------------------------------------------
   Organisation > E-Mail: Konten links mit Ordnern als vierte Ebene, Liste
   und Vorschau als Glas-Karten gleicher Hoehe, Schreiben und Buchhaltung
   als Dialoge. Mobil: Konten als Reihe, Ordner als Dropdown, Vorschau
   schiebt sich von rechts ueber die Liste.
   -------------------------------------------------------------------------- */
.mail_split .anchor_nav.mail_accounts {
	min-width: 220px;
	max-width: 220px;
}
.mail_accounts .mail_account {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-left: 2px solid var(--border-default);
}
.mail_accounts .mail_account.active {
	border-left-color: var(--accent);
}
.mail_accounts .mail_account > .anchor {
	border-left: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	overflow: hidden;
}
.mail_accounts .mail_account > .anchor .label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mail_accounts .count,
.mail_folder_pick .pill {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--on-accent, #0A0C0B);
	font: 600 10px/1.3 var(--font-body);
	flex-shrink: 0;
}
.mail_accounts .count[hidden] {
	display: none;
}
/* Papierkorb und Werbung: die Zahl bleibt grau, damit sie nicht leuchtet */
.mail_accounts .count.muted {
	background: var(--border-strong);
	color: var(--text-secondary);
}
/* Vierte Ebene: Baumlinie auf der Flucht des Kontonamens, je Ordner eine Abzweigung */
.mail_accounts .mail_folders {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
/* Baumlinie: jeder Ordner zeichnet sein Stueck der senkrechten Linie selbst
   (von der Luecke ueber ihm bis zur Unterkante), der letzte nur bis zu seiner
   Abzweigung. So bleibt die Linie unabhaengig von Schriftgroesse und
   Zeilenhoehe mit der letzten Abzweigung verbunden. */
.mail_accounts .mail_folders .folder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 12px 6px 30px;
	font: 500 12px/1.3 var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
	white-space: nowrap;
	overflow: visible;
	transition: color .15s;
}
.mail_accounts .mail_folders .folder:before {
	content: '';
	position: absolute;
	left: 12px;
	top: -2px;
	bottom: 0;
	width: 1px;
	background: var(--border-default);
	pointer-events: none;
}
.mail_accounts .mail_folders .folder:last-child:before {
	bottom: 50%;
}
.mail_accounts .mail_folders .folder:after {
	content: '';
	position: absolute;
	left: 12px;
	top: 50%;
	width: 10px;
	height: 1px;
	background: var(--border-default);
	pointer-events: none;
}
.mail_accounts .mail_folders .folder:hover {
	color: var(--text-primary);
}
.mail_accounts .mail_folders .folder.active {
	color: var(--accent);
	font-weight: 600;
}
.mail_accounts .mail_folders .folder .label {
	overflow: hidden;
	text-overflow: ellipsis;
}
.mail_accounts .mail_folder_state {
	display: block;
	padding: 6px 12px 6px 30px;
	font: 400 12px/1.4 var(--font-body);
	color: var(--text-muted);
}
.mail_accounts .mail_folder_state.error {
	color: var(--warning);
	white-space: normal;
}
.mail_accounts .anchor.add {
	margin-top: 4px;
}
.mail_folder_pick {
	display: none;
	margin-bottom: 14px;
}
.mail_folder_pick .select {
	width: 100%;
}
.mail_folder_pick .select > input {
	width: 100%;
}
.mail_grid {
	display: grid;
	grid-template-columns: minmax(300px, 1fr) 2fr;
	gap: 20px;
	align-items: stretch;
}
.mail_list_card,
.mail_preview_card {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 210px);
	min-height: 560px;
	padding: 0;
	overflow: hidden;
}
.mail_list_head {
	padding: 14px 16px 10px;
	border-bottom: 1px solid var(--border-strong);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mail_search {
	position: relative;
	display: flex;
}
.mail_search input {
	width: 100%;
	height: 36px;
	padding: 0 12px 0 34px;
	font-size: 13px;
}
.mail_search .icon {
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	pointer-events: none;
}
.mail_list_tools {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 28px;
}
.mail_list_tools .mail_selected {
	font: 500 12px/1 var(--font-body);
	color: var(--text-muted);
}
.mail_list_tools .spacer {
	flex: 1;
}
.mail_list_tools .mail_bulk {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}
.mail_list_tools .mail_bulk[hidden] {
	display: none;
}
.mail_list_tools .mini_btn,
.mail_attachment .mini_btn {
	width: 28px;
	height: 28px;
	display: inline-grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
}
.mail_list_tools .mini_btn:hover,
.mail_attachment .mini_btn:hover {
	color: var(--accent);
}
.mail_list_tools .mini_btn.danger:hover {
	color: var(--danger, #ff6b6b);
}
.mail_list {
	flex: 1;
	overflow: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mail_list .mail_state {
	padding: 40px 16px;
	text-align: center;
	font: var(--text-body);
	color: var(--text-muted);
}
.mail_list .mail_state.error {
	color: var(--warning);
}
.mail_list .mail_state p {
	margin: 0 0 16px;
}
.mail_list .mail_state .button {
	margin: 0 auto;
}
.mail_row {
	display: grid;
	grid-template-columns: 22px 1fr auto;
	gap: 10px;
	padding: 11px 14px 11px 12px;
	border-bottom: 1px solid var(--border-default);
	border-left: 2px solid transparent;
	cursor: pointer;
	transition: background .12s;
}
.mail_row:hover {
	background: rgba(var(--accent-rgb),.04);
}
.mail_row.current {
	background: rgba(var(--accent-rgb),.07);
	border-left-color: var(--accent);
}
.mail_row .mail_check {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding-top: 3px;
}
.mail_row .mail_check label {
	margin: 0;
}
.mail_row .unread_dot {
	display: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 6px rgba(var(--accent-rgb),.6);
}
.mail_row.unread .unread_dot {
	display: block;
}
.mail_row .mail_body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mail_row .mail_from {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-primary);
}
.mail_row .mail_from .name,
.mail_row .mail_subject,
.mail_row .mail_excerpt {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mail_row .mail_subject {
	font: 400 13px/1.3 var(--font-body);
	color: var(--text-secondary);
}
.mail_row.unread .mail_from,
.mail_row.unread .mail_subject {
	font-weight: 600;
	color: var(--text-primary);
}
.mail_row .mail_excerpt {
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-muted);
}
.flag_dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.mail_row .mail_meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.mail_row .mail_date {
	font: 400 11px/1 var(--font-body);
	color: var(--text-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.mail_row .mail_clip {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font: 500 11px/1 var(--font-body);
	color: var(--text-muted);
}
.mail_row .mail_chevron {
	display: none;
	color: var(--text-muted);
}
.mail_row .mail_chevron .icon {
	transform: rotate(-90deg);
}
.mail_more {
	padding: 10px 16px;
	border-top: 1px solid var(--border-default);
	text-align: center;
}
.mail_more[hidden] {
	display: none;
}
/* Vorschau */
.mail_preview_card .mail_mobile_head {
	display: none;
}
.mail_preview {
	flex: 1;
	min-height: 0;
	overflow: auto;
	display: flex;
	flex-direction: column;
}
.mail_preview .empty {
	flex: 1;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 40px 16px;
	font: var(--text-body);
	color: var(--text-muted);
}
.mail_preview .empty.error {
	color: var(--warning);
}
.mail_head {
	padding: 16px 20px;
	border-bottom: 1px solid var(--border-strong);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.mail_toolbar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.mail_toolbar .spacer {
	flex: 1;
}
.mail_toolbar .tool {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	font: 500 13px/1 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .15s, color .15s, box-shadow .15s;
}
.mail_toolbar .tool:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.mail_toolbar .tool.danger:hover {
	border-color: var(--danger, #ff6b6b);
	color: var(--danger, #ff6b6b);
}
.mail_flag_wrap {
	position: relative;
	display: inline-flex;
}
.mail_flag_menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	width: 180px;
	padding: 6px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	z-index: 70;
}
.mail_flag_menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: var(--radius-s);
	font: 500 13px/1.2 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
}
.mail_flag_menu a:hover {
	background: rgba(var(--accent-rgb),.07);
}
.mail_flag_menu a.on {
	color: var(--text-primary);
}
.mail_flag_menu a .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}
.mail_flag_menu a .check {
	margin-left: auto;
	color: var(--accent);
	display: inline-grid;
}
.mail_flag_menu a.remove {
	margin-top: 4px;
	border-top: 1px solid var(--border-default);
	border-radius: 0;
	color: var(--text-muted);
}
.mail_head_row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.mail_head_text {
	min-width: 0;
}
.mail_head_text h2 {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font: 600 18px/1.3 var(--font-display);
	letter-spacing: -.01em;
	color: var(--text-primary);
	word-break: break-word;
}
.mail_head_text h2 .flag_dot {
	width: 9px;
	height: 9px;
}
.mail_head_text p {
	margin: 6px 0 0;
	font: var(--text-small);
	color: var(--text-secondary);
	line-height: 1.5;
}
.mail_head_text p .from {
	color: var(--text-primary);
	font-weight: 500;
}
.mail_head_text p .to {
	color: var(--text-muted);
}
.mail_head_date {
	font: var(--text-small);
	color: var(--text-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.mail_attachments {
	padding: 14px 20px;
	border-bottom: 1px solid var(--border-default);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mail_attachments .label,
.mail_book .label,
.mail_book_chips .label {
	font: 500 12px/1.2 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.mail_attachment {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
}
.mail_attachment .kind {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-strong);
	font: 700 9px/1 var(--font-body);
	letter-spacing: .04em;
	color: var(--text-muted);
	flex-shrink: 0;
}
.mail_attachment .kind.pdf { color: var(--danger, #ff6b6b); }
.mail_attachment .kind.doc { color: #0A84FF; }
.mail_attachment .kind.xls { color: var(--accent); }
.mail_attachment .kind.img { color: #BF5AF2; }
.mail_attachment .info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.mail_attachment .info .name {
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mail_attachment .info .size {
	font: 400 11px/1.3 var(--font-body);
	color: var(--text-muted);
}
.mail_attachment .mail_book {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-s);
	font: 500 12px/1 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .15s, color .15s;
}
.mail_attachment .mail_book:hover {
	border-color: var(--accent);
	color: var(--accent);
}
/* Anhang haengt schon an einer Buchung */
.mail_attachment .booked {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 10px;
	border-radius: var(--radius-s);
	border: 1px solid var(--accent);
	background: rgba(var(--accent-rgb),.12);
	font: 600 11px/1 var(--font-body);
	letter-spacing: .02em;
	color: var(--accent);
	white-space: nowrap;
	text-decoration: none;
	cursor: help;
}
/* Verschieben per Drag & Drop */
.mail_row[draggable="true"] {
	cursor: default;
}
.mail_row.dragging {
	opacity: .45;
}
.mail_accounts .mail_folders .folder.drop {
	color: var(--accent);
	background: rgba(var(--accent-rgb),.12);
	box-shadow: inset 0 0 0 1px var(--accent);
}
body.mail_dragging .mail_accounts .mail_folders .folder {
	transition: background .1s, box-shadow .1s;
}
.mail_drag_ghost {
	position: fixed;
	top: -100px;
	left: -100px;
	padding: 8px 12px;
	border-radius: var(--radius-s);
	background: var(--surface-raised);
	border: 1px solid var(--accent);
	box-shadow: var(--glow-accent);
	font: 600 12px/1 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	pointer-events: none;
}
.mail_content {
	padding: 20px;
}
/* Nachricht auf weissem Papier mit Rundung, Innenabstand kommt aus dem Rahmen bzw. dem Text */
.mail_frame {
	display: block;
	width: 100%;
	min-height: 120px;
	border: 0;
	border-radius: var(--radius-m);
	background: #fff;
	overflow: hidden;
}
.mail_text {
	margin: 0;
	padding: 24px 28px;
	border-radius: var(--radius-m);
	background: #fff;
	white-space: pre-wrap;
	word-break: break-word;
	font: 400 14px/1.6 var(--font-body);
	color: #1b1f1e;
}
/* Schreiben */
.mail_compose_attachments {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 8px;
}
.mail_compose_attachments:empty {
	display: none;
}
/* Das Feld ist ein label; die Regeln fuer Formularbeschriftungen (Block,
   Grossschrift, abgeschnitten) gelten hier nicht. */
.form > li label.mail_attach_pick,
.mail_attach_pick {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 16px;
	border: 1px dashed rgba(var(--secondary-rgb),.35);
	border-radius: var(--radius-m);
	font: 500 13px/1.2 var(--font-body);
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	overflow: visible;
	color: var(--text-secondary);
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.mail_attach_pick svg {
	display: block;
	width: 15px;
	height: 15px;
	flex: none;
}
.mail_attach_pick:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.mail_attach_pick input[type="file"] {
	display: none;
}
#insert_box .center .mail_save_draft,
#insert_box .center .mail_book_foot {
	margin-right: auto;
	font: 600 14px/1.2 var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
	align-self: center;
}
#insert_box .center .mail_book_foot {
	font-weight: 400;
	font-size: 13px;
	cursor: default;
}
#insert_box .center .mail_save_draft:hover {
	color: var(--accent);
}
.mail_oauth_action {
	display: block;
	margin-top: 12px;
}
.mail_oauth_box {
	margin-top: 4px;
	padding: 14px 16px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.mail_oauth_box p {
	margin: 0;
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-secondary);
}
.mail_oauth_box.done {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.mail_oauth_box.done p,
.mail_oauth_box.error p {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-primary);
}
.mail_oauth_box.done p svg {
	color: var(--accent);
	flex-shrink: 0;
}
.mail_oauth_box.error {
	border-color: var(--warning);
}
.mail_oauth_row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 14px;
	align-items: stretch;
}
/* Der Code sieht aus wie ein Eingabefeld, nicht wie ein Knopf; das Kopier-
   Symbol sitzt rechts mit demselben Abstand wie der Text zum Rand. */
.mail_oauth_code {
	position: relative;
	display: flex;
	align-items: center;
	height: 40px;
	padding: 0 40px 0 12px;
	border-radius: var(--radius-m);
	background: var(--surface-page);
	border: 1px solid var(--border-strong);
	color: var(--text-primary);
	overflow: hidden;
}
.mail_oauth_code code {
	font: 500 15px/1 var(--font-body);
	letter-spacing: .14em;
	white-space: nowrap;
}
.mail_oauth_copy {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	color: var(--text-muted);
	cursor: pointer;
}
.mail_oauth_copy:hover,
.mail_oauth_copy.done {
	color: var(--accent);
}
@media (max-width: 770px) {
	.mail_oauth_row {
		grid-template-columns: 1fr;
	}
}
.mail_oauth_wait {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-muted) !important;
}
.mail_oauth_wait .loader {
	flex-shrink: 0;
}
/* An Buchhaltung senden */
.mail_book_chips {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.mail_book_chips .chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	font: 600 11px/1 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
}
.mail_book_chips .chip.on {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
	color: var(--accent);
}
.mail_book {
	display: flex;
	gap: 24px;
	min-height: 0;
}
.mail_book_accounts {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 190px;
	flex-shrink: 0;
}
.mail_book_accounts .label {
	padding: 0 12px 8px;
}
.mail_book_accounts .acct {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	border-left: 2px solid var(--border-default);
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mail_book_accounts .acct:hover {
	color: var(--text-primary);
}
.mail_book_accounts .acct.active {
	border-left-color: var(--accent);
	color: var(--accent);
	font-weight: 600;
}
.mail_book_main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mail_book_rows {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	overflow: auto;
	max-height: 360px;
}
.mail_book_state {
	padding: 28px 16px;
	text-align: center;
	font: var(--text-small);
	color: var(--text-muted);
}
.mail_book_row {
	display: grid;
	grid-template-columns: 22px 84px 1fr auto 26px;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	border-bottom: 1px solid var(--border-default);
	cursor: pointer;
	font-weight: 400;
}
.mail_book_row:hover {
	background: rgba(var(--accent-rgb),.03);
}
.mail_book_row.on {
	background: rgba(var(--accent-rgb),.06);
}
.mail_book_row input[type="checkbox"] {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--accent);
	cursor: pointer;
}
.mail_book_row .date {
	font: 400 13px/1.3 var(--font-body);
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}
.mail_book_row .text {
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.mail_book_row .text .name,
.mail_book_row .text .desc {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mail_book_row .text .name {
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-primary);
}
.mail_book_row .text .desc {
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-muted);
}
.mail_book_row .amount {
	font: 500 13px/1.3 var(--font-body);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.mail_book_row .amount.pos { color: var(--accent); }
.mail_book_row .amount.neg { color: var(--danger, #ff6b6b); }
.mail_book_row .has {
	display: grid;
	place-items: center;
	color: var(--warning);
}
.mail_book_row .has.yes {
	color: var(--accent);
}
#insert_box .form > li .field .mail_book {
	margin-top: 4px;
}
/* Im Dialog gewinnen sonst die allgemeinen Regeln fuer Felder
   (.form > li .field input { width: 100% }), dadurch stand jede Zeile
   untereinander und das Kaestchen war so breit wie die Zeile. */
#insert_box .form > li .field .mail_book_row {
	display: grid;
	grid-template-columns: 22px 84px 1fr auto 26px;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	width: auto;
}
#insert_box .form > li .field .mail_book_row input[type="checkbox"] {
	width: 15px;
	height: 15px;
	min-width: 15px;
	padding: 0;
	margin: 0;
	border-radius: 4px;
}
#insert_box .form > li .field .mail_book_row .text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
#insert_box .form > li .field .mail_book_accounts .acct {
	width: auto;
}
#insert_box .form > li .field .mail_book_main .mail_search input {
	width: 100%;
}
/* Der Dialog zeigt Konten und Buchungen nebeneinander und braucht mehr
   Platz als die uebliche Dialogbreite. */
#insert_box.wide .box,
body #insert_box .box:has(.mail_book) {
	width: 900px;
}
/* Mobil */
@media (max-width: 770px) {
	body:not(.static) .mail_split {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}
	body:not(.static) .mail_split .anchor_nav.mail_accounts {
		max-width: none;
		flex-direction: row;
	}
	body:not(.static) .mail_accounts .mail_account {
		flex-direction: row;
		flex-shrink: 0;
	}
	body:not(.static) .mail_accounts .mail_folders,
	body:not(.static) .mail_accounts .anchor.add {
		display: none;
	}
	body:not(.static) .mail_folder_pick {
		display: block;
	}
	body:not(.static) .mail_grid {
		display: block;
	}
	body:not(.static) .mail_list_card {
		min-height: 0;
		max-height: none;
	}
	body:not(.static) .mail_row .mail_chevron {
		display: grid;
		place-items: center;
	}
	body:not(.static) .mail_preview_card {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: calc(68px + max(20px, env(safe-area-inset-bottom, 0px)));
		z-index: 590;
		display: none;
		min-height: 0;
		max-height: none;
		border-radius: 0;
		border: none;
		background: var(--surface-page);
	}
	body:not(.static) .mail_preview_card.open {
		display: flex;
		animation: bc-slide-in .26s cubic-bezier(.3,.9,.35,1) both;
	}
	body:not(.static) .mail_preview_card.open.closing {
		animation: bc-slide-out .26s cubic-bezier(.3,.9,.35,1) both;
	}
	body:not(.static) .mail_preview_card .mail_mobile_head {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
		border-bottom: 1px solid var(--border-default);
		background: var(--surface-glass);
		backdrop-filter: var(--blur-glass);
		-webkit-backdrop-filter: var(--blur-glass);
	}
	body:not(.static) .mail_mobile_head .mail_back {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 6px 4px;
		font: 600 14px/1 var(--font-body);
		color: var(--accent);
		cursor: pointer;
	}
	body:not(.static) .mail_mobile_head .mail_back .icon-back {
		transform: rotate(90deg);
	}
	body:not(.static) .mail_mobile_head .mail_mobile_from {
		flex: 1;
		text-align: center;
		font: 600 13px/1.2 var(--font-body);
		color: var(--text-muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	body:not(.static) .mail_mobile_head .mail_mobile_space {
		width: 70px;
	}
	body:not(.static) .mail_head,
	body:not(.static) .mail_attachments,
	body:not(.static) .mail_content {
		padding-left: 16px;
		padding-right: 16px;
	}
	body:not(.static) .mail_book {
		flex-direction: column;
	}
	body:not(.static) .mail_book_accounts {
		flex-direction: row;
		overflow-x: auto;
		gap: 8px;
	}
}

/* Kontoabruf bei Amex: Hinweis auf die Chrome-Erweiterung. Das X sitzt wie
   bei den uebrigen Fenstern oben rechts im Rahmen der Box (.modal .box ist
   der Bezug), die Schritte laufen als nummerierte Kette. */
.amex_dialog p,
.amex_dialog li {
	font: var(--text-body);
	color: var(--text-secondary);
	margin: 0;
}
.dlg_x,
.amex_dialog .amex_x {
	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;
}
.dlg_x:hover,
.amex_dialog .amex_x:hover {
	color: var(--text-primary);
	background: var(--surface-raised);
}
.amex_dialog h3 {
	margin: 22px 0 12px;
	font: 600 12px/1.4 var(--font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.amex_dialog ol {
	list-style: none;
	counter-reset: amex_step;
	margin: 0;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
}
.amex_dialog ol li {
	counter-increment: amex_step;
	position: relative;
	padding: 0 0 30px 40px;
	min-height: 28px;
}
.amex_dialog ol li:last-child {
	padding-bottom: 0;
}
/* Nummer im Kreis */
.amex_dialog ol li:before {
	content: counter(amex_step);
	position: absolute;
	left: 0;
	top: -2px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--accent);
	background: var(--surface-page);
	display: grid;
	place-items: center;
	font: 600 12px/1 var(--font-body);
	color: var(--accent);
}
/* Verbindungslinie zum naechsten Schritt */
.amex_dialog ol li:not(:last-child):after {
	content: '';
	position: absolute;
	left: 13px;
	top: 26px;
	bottom: 2px;
	width: 1px;
	background: var(--border-default);
}
.amex_dialog code {
	font: 400 13px/1.4 var(--font-mono, monospace);
	color: var(--text-primary);
}
.amex_dialog .amex_actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
	margin-top: 24px;
}
.amex_dialog .amex_actions .button {
	width: 100%;
}
@media (max-width: 770px) {
	.amex_dialog .amex_actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Mailkontoverwaltung: Liste wie die Bankverbindungen (fuenf gleich breite
   Spalten, Knopf unter der Liste) in einer Karte. */
.mail-account-settings {
	margin-top: 24px;
}
.mail-account-settings .data,
.settings-connect .data {
	max-width: none;
	gap: 0;
}
.list-view.mail_accounts li p,
.list-legend.for-mail-accounts p {
	width: 24%;
}
.list-view.mail_accounts li p[data-id="email"],
.list-legend.for-mail-accounts p[data-id="email"] {
	width: 32%;
}
.list-view.mail_accounts li p[data-id="name"],
.list-legend.for-mail-accounts p[data-id="name"] {
	width: 22%;
}
.list-view.mail_accounts li p[data-id="outgoing"],
.list-legend.for-mail-accounts p[data-id="outgoing"] {
	width: 16%;
}
.list-view.mail_accounts li p[data-id="select"],
.list-legend.for-mail-accounts p[data-id="select"] {
	width: 40px;
	flex: none;
}
.list-legend.for-mail-accounts p.table-options {
	width: auto;
}
.mail_outgoing {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--accent);
	font-weight: 600;
}
.mail_outgoing_cell .muted {
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Einstellungen > Bank Anbindung (Entwurf "Kontoabruf ueber finAPI",
   ui_kits/app/settings.jsx). Alles auf #bank_settings und .bank_modal
   begrenzt: die Listenregeln der uebrigen Seiten bleiben unberuehrt.
   -------------------------------------------------------------------------- */
#bank_settings {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 760px;
}
#bank_settings .bank_notices {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}
#bank_settings .bank_notices[hidden],
#bank_settings .bank_empty[hidden],
#bank_settings .bank_list[hidden] {
	display: none;
}
.bank_line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 14px;
	border-radius: var(--radius-m);
	border: 1px solid rgba(245,185,80,.45);
	background: rgba(245,185,80,.1);
	font: 500 13px/1.45 var(--font-body);
	color: var(--warning);
}
.bank_line > span {
	flex: 1 1 220px;
}
.bank_line.accent {
	border-color: rgba(var(--accent-rgb),.45);
	background: rgba(var(--accent-rgb),.1);
	color: var(--accent);
}
.bank_line.danger {
	border-color: rgba(255,69,58,.45);
	background: rgba(255,69,58,.1);
	color: var(--danger);
}
.bank_line.quiet {
	margin-bottom: 16px;
	border-color: var(--border-default);
	background: var(--surface-glass);
	font-weight: 400;
	color: var(--text-secondary);
}
.bank_line.quiet > svg {
	color: var(--warning);
}
.bank_line_btn {
	flex-shrink: 0;
	padding: 5px 12px;
	border: 1px solid currentColor;
	border-radius: var(--radius-s);
	font: 600 12px var(--font-body);
	color: inherit;
	white-space: nowrap;
	cursor: pointer;
}
.bank_line_btn:hover {
	text-decoration: none;
	color: inherit;
	background: rgba(255,255,255,.04);
}
#bank_settings .bank_empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 34px 16px;
	text-align: center;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-m);
	font: 500 14px var(--font-body);
	color: var(--text-secondary);
}
#bank_settings .bank_empty_icon {
	color: var(--text-muted);
}
#bank_settings .bank_actions {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}
/* Liste ohne eigenen Rahmen in der Einstellungskarte (DataTable bare im
   Designsystem); Breiten setzt list_layout nach Inhalt */
#bank_settings .bank_card {
	background: none;
	border: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-radius: 0;
}
#bank_settings .list-view.hbcis li p:not([data-id='select']),
#bank_settings .list-legend.for-hbcis p:not([data-id='select']) {
	padding-left: 12px;
	padding-right: 12px;
}
#bank_settings .list-view.hbcis > li {
	min-height: 58px;
}
#bank_settings .list-view.hbcis li p.bank_name_cell {
	display: flex;
	align-items: center;
	gap: 12px;
	height: auto;
	min-width: 0;
}
#bank_settings .bank_name_cell .bank_name_text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-width: 0;
}
#bank_settings .bank_name_cell b {
	font: 600 14px/20px var(--font-body);
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#bank_settings .bank_name_cell .bank_name_text > span {
	font: 400 12px/16px var(--font-body);
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#bank_settings .list-view.hbcis li p.muted {
	color: var(--text-muted);
}
/* Lange Kapseln ("Zustimmung endet in 12 Tagen", "Abruf und Erkennung")
   brechen in der Zelle um, statt abgeschnitten zu werden */
#bank_settings .list-view.hbcis li p[data-id='status'],
#bank_settings .list-view.hbcis li p[data-id='auto'] {
	height: auto;
	white-space: normal;
	overflow: visible;
}
#bank_settings .list-view.hbcis .bank_status,
#bank_settings .list-view.hbcis .bank_pill {
	height: auto;
	min-height: 22px;
	white-space: normal;
	line-height: 1.3;
}
#bank_settings .list-view.hbcis .bank_status {
	padding: 3px 9px;
}
#bank_settings .list-view.hbcis p[data-id='art'] .bank_pill {
	white-space: nowrap;
}
.bank_pill {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	font: 500 11px var(--font-body);
	color: var(--text-secondary);
	white-space: nowrap;
}
.bank_status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	padding: 0 9px;
	border-radius: var(--radius-s);
	border: 1px solid rgba(var(--accent-rgb),.45);
	background: rgba(var(--accent-rgb),.1);
	color: var(--accent);
	font: 600 11px var(--font-body);
	white-space: nowrap;
}
.bank_status[title] {
	cursor: help;
}
.bank_status i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.bank_status.warning {
	border-color: rgba(245,185,80,.45);
	background: rgba(245,185,80,.1);
	color: var(--warning);
}
.bank_status.danger {
	border-color: rgba(255,69,58,.45);
	background: rgba(255,69,58,.1);
	color: var(--danger);
}
.bank_status.neutral {
	border-color: var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-secondary);
}
.bank_next {
	margin: -6px 0 14px;
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-muted);
}
.bank_finapi_note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px 4px;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
/* Platzhalter fuer das offizielle finAPI-Logo (kommt von finAPI) */
.bank_finapi_mark {
	display: inline-flex;
	align-items: center;
	height: 16px;
	padding: 0 6px;
	border-radius: 4px;
	border: 1px dashed var(--border-strong);
	font: 700 9px var(--font-body);
	letter-spacing: .04em;
	color: var(--text-secondary);
}

/* Einstellungen > Datensicherung (Entwurf "Datensicherung" und "AuditLog",
   ui_kits/app/settings.jsx). Alles auf #backup, #audit_log und .audit_modal
   begrenzt. */
#backup,
#audit_log {
	max-width: 760px;
}
#backup .settings-card .hint {
	margin-bottom: 0;
}
#audit_log {
	margin-top: 24px;
}
#audit_log .audit_filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
#audit_log .audit_filter[hidden],
#audit_log .audit_range[hidden],
#audit_log .audit_count[hidden] {
	display: none;
}
#audit_log .audit_search {
	position: relative;
	flex: 1 1 220px;
	min-width: 0;
	display: flex;
	align-items: center;
}
#audit_log .audit_search svg {
	position: absolute;
	left: 12px;
	color: var(--text-muted);
	pointer-events: none;
}
#audit_log .audit_filter input,
#audit_log .audit_filter select {
	height: 36px;
	box-sizing: border-box;
	background: var(--surface-raised);
	color: var(--text-primary);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	font: 500 13px var(--font-body);
	outline: none;
}
#audit_log .audit_search input {
	width: 100%;
	padding: 0 12px 0 36px;
	font-weight: 400;
}
#audit_log .audit_filter select {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	padding: 0 30px 0 12px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A9491' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}
#audit_log .audit_filter input:focus,
#audit_log .audit_filter select:focus {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
#audit_log .audit_range {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text-muted);
}
#audit_log .audit_range input {
	padding: 0 10px;
}
#audit_log .audit_loading {
	padding: 30px;
	display: grid;
	place-items: center;
	color: var(--text-muted);
}
#audit_log .audit_empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 40px 20px;
	text-align: center;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-m);
	font: 500 14px var(--font-body);
	color: var(--text-secondary);
}
#audit_log .audit_empty_icon {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-muted);
}
#audit_log .audit_reset {
	font: 500 13px var(--font-body);
	color: var(--accent);
	cursor: pointer;
}
/* Liste wie die Mailkontoverwaltung (part.settings-list.html), nur die
   Spaltenbreiten und Schriften sind eigen */
#audit_log .audit_list {
	max-width: none;
	gap: 0;
}
#audit_log .list-view.audit_log li p:not([data-id='select']),
#audit_log .list-legend.for-audit p:not([data-id='select']) {
	width: 20%;
}
#audit_log .list-view.audit_log li p[data-id='label'],
#audit_log .list-legend.for-audit p[data-id='label'] {
	width: 32%;
}
#audit_log .list-view.audit_log li p[data-id='action'],
#audit_log .list-legend.for-audit p[data-id='action'] {
	width: 29%;
}
#audit_log .list-view.audit_log li p[data-id='source'],
#audit_log .list-legend.for-audit p[data-id='source'] {
	width: 15%;
	overflow: visible;
}
#audit_log .list-view.audit_log li p[data-id='changes'],
#audit_log .list-legend.for-audit p[data-id='changes'] {
	width: 12%;
}
#audit_log .list-view.audit_log li p:not([data-id='select']),
#audit_log .list-legend.for-audit p:not(.table-options):not([data-id='select']) {
	padding-left: 8px;
	padding-right: 8px;
}
#audit_log .list-legend.for-audit p.table-options {
	width: auto;
}
#audit_log .list-view.audit_log > li {
	cursor: pointer;
}
#audit_log .audit_when {
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}
#audit_log .audit_beleg {
	font: 600 14px var(--font-body);
	color: var(--text-primary);
}
#audit_log .audit_aktion {
	font: 400 13px var(--font-body);
	color: var(--text-secondary);
}
#audit_log .audit_aend {
	font: 500 12px var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
}
#audit_log .audit_footer {
	display: flex;
	justify-content: center;
	margin-top: 12px;
}
#audit_log .audit_count {
	margin: 10px 0 0;
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-muted);
}
#audit_log .audit_error {
	margin: 0;
	color: var(--danger);
}
@media (max-width: 720px) {
	#audit_log .audit_search,
	#audit_log .audit_period,
	#audit_log .audit_range {
		flex: 1 1 100%;
	}
	#audit_log .audit_entity,
	#audit_log .audit_source {
		flex: 1 1 40%;
	}
	#audit_log .list-view.audit_log li p[data-id='when'],
	#audit_log .list-legend.for-audit p[data-id='when'] { width: 30%; }
	#audit_log .list-view.audit_log li p[data-id='label'],
	#audit_log .list-legend.for-audit p[data-id='label'] { width: 34%; }
	#audit_log .list-view.audit_log li p[data-id='action'],
	#audit_log .list-legend.for-audit p[data-id='action'] { width: 36%; white-space: normal; }
	#audit_log .audit_when {
		font-size: 12px;
	}
}

/* Dialog des Aenderungsprotokolls, nur lesen */
.modal.audit_modal .box {
	width: 620px;
}
.audit_dlg {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.audit_lock {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-default);
	background: var(--surface-raised);
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
.audit_table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.audit_table col.c1 { width: 26%; }
.audit_table col.c2 { width: 37%; }
.audit_table.created col.c1 { width: 34%; }
.audit_table th,
.audit_table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-default);
	font: 400 13px/1.5 var(--font-body);
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.audit_table th {
	font: 600 11px var(--font-body);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom-color: var(--border-strong);
}
.audit_table .audit_field {
	font-weight: 500;
	color: var(--text-secondary);
}
.audit_table .audit_old {
	color: var(--text-muted);
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
}
.audit_table .audit_new {
	color: var(--accent);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.audit_table .audit_old.empty,
.audit_table .audit_new.empty {
	text-decoration: none;
	color: var(--text-muted);
	font-weight: 400;
}
.audit_table .audit_value {
	color: var(--text-primary);
}
.audit_zip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-m);
}
.audit_zip_icon {
	color: var(--accent);
}
.audit_zip_text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
.audit_zip_text b {
	font: 500 13px var(--font-body);
	color: var(--text-primary);
	overflow-wrap: anywhere;
}
.audit_scope .lbl {
	display: block;
	margin-bottom: 6px;
	font: 500 12px var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.audit_scope_row {
	display: flex;
	justify-content: space-between;
	padding: 8px 2px;
	border-bottom: 1px solid var(--border-default);
	font: 400 13px var(--font-body);
	color: var(--text-secondary);
}
.audit_scope_row b {
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
.audit_dlg_footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.audit_open {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 13px var(--font-body);
	color: var(--accent);
}
@media (max-width: 720px) {
	body:not(.static) .modal.audit_modal .container {
		padding: 0;
		align-items: stretch;
	}
	.modal.audit_modal .box {
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		padding: 18px 16px 0;
		display: flex;
		flex-direction: column;
	}
	.modal.audit_modal .box_content,
	.modal.audit_modal #audit_box {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
	}
	.modal.audit_modal .audit_dlg {
		flex: 1;
		min-height: 0;
		overflow: auto;
	}
	.modal.audit_modal .audit_dlg_footer {
		position: sticky;
		bottom: 0;
		margin: auto -16px 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: var(--modal-bg);
		border-top: 1px solid var(--border-default);
	}
}

/* Buchfuehrung: Statuspunkt am Konto, leiser Hinweis zur Zustimmung */
/* Konto mit Handlungsbedarf (Buchfuehrung): oranges Ausrufezeichen, der
   Hinweis steht beim Ueberfahren rechts daneben (ui_kits/app/accounting.jsx,
   AccWarnung) */
/* Das Konto schneidet lange Namen ab (overflow hidden); mit Hinweis darf
   der Hinweis darueber hinausragen */
.anchor_nav .anchor.has_warn {
	overflow: visible;
}
/* Ueber der Liste daneben, sonst laege der Hinweis dahinter */
.anchor_nav:has(.has_warn) {
	z-index: 20;
}
.anchor_nav .nav_warn {
	position: relative;
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	margin-left: 2px;
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
	background: var(--warning);
	color: var(--surface-page);
	font: 800 10px/1 var(--font-body);
	cursor: help;
}
.anchor_nav .nav_warn_tip {
	display: none;
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	width: 250px;
	z-index: 30;
	padding: 8px 11px;
	border-radius: var(--radius-m);
	background: var(--surface-card);
	border: 1px solid rgba(245,185,80,.6);
	box-shadow: var(--shadow-pop);
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-secondary);
	text-align: left;
	white-space: normal;
	pointer-events: none;
	animation: bc-fade-in .15s ease both;
}
.anchor_nav .nav_warn:hover .nav_warn_tip {
	display: block;
}
.bank_consent_quiet:empty {
	display: none;
}
.list-overview .bank_sync_note {
	color: var(--accent);
}

/* Dialoge der Bankanbindung */
.modal.bank_modal .box {
	width: var(--bank-dlg-width, 540px);
}
/* Auswahl der Konten: IBAN voll, ohne die Versalien der Label-Regel */
.bank_pick_row .bank_pick_iban {
	text-transform: none;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}
#bank_csv_body,
#bank_finapi_state {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
#bank_finapi_state:empty {
	display: none;
}
.bank_dlg {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.bank_dlg .muted {
	color: var(--text-muted);
}
.bank_dlg .lbl {
	font: 500 12px var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.bank_dlg_footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.bank_dlg_footer .button.disabled {
	opacity: .45;
	cursor: default;
	box-shadow: none;
}
.bank_hint {
	margin: 0;
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-muted);
}
.bank_hint.strong {
	color: var(--text-secondary);
}
.bank_intro {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
}
.bank_intro_icon {
	margin-top: 2px;
	color: var(--accent);
}
.bank_intro > div {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font: 400 13px/1.55 var(--font-body);
	color: var(--text-secondary);
}
.bank_wait {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 26px 16px;
	text-align: center;
	border-radius: var(--radius-m);
	border: 1px dashed var(--border-strong);
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-muted);
}
.bank_wait b {
	font: 500 14px var(--font-body);
	color: var(--text-primary);
}
.bank_wait span {
	max-width: 380px;
}
.bank_pick {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bank_pick_row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	cursor: pointer;
}
.bank_pick_row.on {
	border-color: rgba(var(--accent-rgb),.45);
	background: rgba(var(--accent-rgb),.05);
}
.bank_pick_row.done {
	opacity: .5;
	cursor: default;
}
.bank_pick_row input[type=checkbox] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--accent);
}
.bank_pick_text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font: 400 12px var(--font-body);
}
.bank_pick_text b {
	font: 600 13px var(--font-body);
	color: var(--text-primary);
}
.bank_dlg input[type=text],
.bank_dlg select {
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	padding: 0 12px;
	background: var(--surface-raised);
	color: var(--text-primary);
	font: 400 14px var(--font-body);
	border-radius: var(--radius-m);
	outline: none;
	border: 1px solid var(--border-strong);
	transition: border-color .15s, box-shadow .2s;
}
.bank_dlg input[type=text]:focus,
.bank_dlg select:focus {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.bank_pick_text input.bank_pick_name {
	height: 34px;
	font: 500 13px var(--font-body);
}
.bank_pick_amount {
	flex-shrink: 0;
	font: 500 13px var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
}
.bank_toggles {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bank_toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font: 400 14px/1.3 var(--font-body);
	color: var(--text-secondary);
	user-select: none;
}
.bank_toggle:hover {
	text-decoration: none;
	color: var(--text-primary);
}
.bank_toggle .switch {
	position: relative;
	width: 34px;
	height: 20px;
	flex-shrink: 0;
	box-sizing: border-box;
	border-radius: 10px;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	transition: background .15s, border-color .15s;
}
.bank_toggle .switch:after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--text-muted);
	transition: left .15s, background .15s;
}
.bank_toggle.on .switch {
	background: var(--accent);
	border-color: var(--accent);
}
.bank_toggle.on .switch:after {
	left: 16px;
	background: var(--on-accent);
}
.bank_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
	gap: 16px 20px;
}
.bank_field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bank_field.wide {
	grid-column: 1 / -1;
}
.bank_field_hint,
.bank_dlg label .bank_field_hint {
	font: 400 12px/1.4 var(--font-body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--text-muted);
}
.bank_select {
	position: relative;
	display: flex;
}
.bank_select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 34px;
	cursor: pointer;
}
.bank_select svg {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--text-muted);
}
.bank_select.small select {
	height: 30px;
	padding-right: 26px;
	font: 600 12px var(--font-body);
	color: var(--accent);
}
.bank_select.small select.skip {
	color: var(--text-muted);
}
.bank_select.small svg {
	right: 9px;
}
.bank_drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 28px 16px;
	text-align: center;
	border: 1px dashed rgba(242,245,244,.35);
	border-radius: var(--radius-m);
	font: 400 12px var(--font-body);
	color: var(--accent);
	cursor: pointer;
	transition: border-color .15s;
}
.bank_drop:hover {
	border-color: var(--accent);
}
.bank_drop b {
	font: 600 14px var(--font-body);
	color: var(--text-primary);
}
.bank_csv_file_row {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 500 13px var(--font-body);
	color: var(--text-secondary);
}
.bank_csv_file_row svg {
	color: var(--accent);
}
.bank_csv_file_row span {
	flex: 1;
}
.bank_csv_file_row a {
	font: 500 12px var(--font-body);
	cursor: pointer;
}
.bank_csv_table {
	overflow-x: auto;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
}
.bank_csv_table table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font: 400 12px var(--font-body);
	color: var(--text-secondary);
}
.bank_csv_table th {
	min-width: 128px;
	padding: 8px;
	border-bottom: 1px solid var(--border-strong);
	background: var(--surface-raised);
	text-align: left;
	vertical-align: top;
}
.bank_csv_head {
	display: block;
	margin-top: 6px;
	font: 400 11px var(--font-body);
	color: var(--text-muted);
}
.bank_csv_table td {
	padding: 7px 8px;
	border-top: 1px solid var(--border-default);
	white-space: nowrap;
}
.bank_csv_table tr:first-child td {
	border-top: none;
}
.bank_csv_table td.skip {
	opacity: .4;
}
.bank_csv_table td.neg {
	color: var(--danger);
	font-variant-numeric: tabular-nums;
}
.bank_csv_table td.pos {
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}
@media (max-width: 770px) {
	#bank_settings .bank_actions {
		justify-content: stretch;
	}
	#bank_settings .bank_actions .button {
		flex: 1 1 auto;
	}
}

/* --------------------------------------------------------------------------
   Organisation: Dokumente (Vertraege und Schreiben, Unterschrift per Link)
   -------------------------------------------------------------------------- */
.anchor_nav .anchor .nav_count {
	margin-left: auto;
	font: 500 11px/1 var(--font-body);
	color: var(--text-muted);
}
.list-view.docs > li[data-status='sent']:before {
	background: var(--warning);
}
.list-view.docs > li[data-status='signed']:before {
	background: var(--accent);
}
.list-view.docs > li[data-status='declined']:before {
	background: var(--danger);
}
.list-view.docs > li[data-status='expired']:before {
	background: var(--gray-400);
}
.list-view.docs > li[data-status='declined'],
.list-view.docs > li[data-status='expired'] {
	opacity: .6;
}
.list-view li p .state.danger {
	color: var(--danger);
	background: rgba(242,109,109,.10);
	border-color: var(--danger);
}
.list-legend-colors .is-active:before {
	background: var(--accent);
}
.list-legend-colors .is-notice:before {
	background: var(--warning);
}
.list-legend-colors .is-danger:before {
	background: var(--danger);
}
.list-legend-colors .is-expired:before {
	background: var(--gray-400);
}

/* Zeile ueber Editor und Ansicht: Zurueck links, Speichern rechts */
.docs_bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

/* Editor und Ansicht: Inhalt plus Randspalte 300px */
.docs_editor_wrap,
.docs_view {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	align-items: start;
	min-width: 0;
}
.docs_side {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: visible;
}
.docs_side .button.full {
	width: 100%;
	justify-content: center;
}
.docs_side_block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.docs_side_block + .docs_side_block {
	border-top: 1px solid var(--border-default);
	padding-top: 14px;
}
.docs_side_label {
	font: 500 12px/1.4 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.docs_side .hint {
	margin: 0;
	font: var(--text-small);
	color: var(--text-muted);
	line-height: 1.5;
}
.docs_side .state {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	height: 24px;
	padding: 0 10px;
	border-radius: var(--radius-s);
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	font: 600 11px/1 var(--font-body);
	letter-spacing: .02em;
	color: var(--text-muted);
	white-space: nowrap;
}
.docs_side .state.active { color: var(--accent); background: rgba(var(--accent-rgb),.12); border-color: var(--accent); }
.docs_side .state.notice { color: var(--warning); background: rgba(245,185,80,.14); border-color: var(--warning); }
.docs_side .state.danger { color: var(--danger); background: rgba(242,109,109,.10); border-color: var(--danger); }
.docs_side_status {
	display: flex;
	align-items: center;
	gap: 10px;
	font: var(--text-small);
	color: var(--text-muted);
}
.docs_side input[type="text"] {
	width: 100%;
}

/* Liste der Felder in der Randspalte */
/* Personen in der Randspalte des Editors */
.docs_people_rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.docs_people_dialog {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.docs_people_dialog > p {
	margin: 0;
	font: var(--text-small);
	color: var(--text-muted);
	line-height: 1.5;
}
/* Liste wie die Eigenschaften im Kontaktdialog: ein Rahmen, Zeilen mit
   rahmenlosen Feldern, letzte Zeile leer mit Plus */
.docs_people_list {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	overflow: hidden;
	background: var(--surface-raised);
}
.docs_people_list:focus-within {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.docs_people_row {
	display: grid;
	grid-template-columns: 30px 1.1fr 1fr 1fr 1.4fr 34px;
	align-items: center;
	gap: 4px;
	padding: 0 4px;
	border-bottom: 1px solid var(--border-default);
}
.docs_people_row:last-child {
	border-bottom: none;
}
.docs_people_row .num {
	width: 18px;
	height: 18px;
	margin-left: 6px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--accent);
	color: var(--on-accent);
	font: 700 10px/1 var(--font-body);
}
.docs_people_row.new .num {
	background: transparent;
}
#insert_box .docs_people_row input {
	min-width: 0;
	height: 38px;
	padding: 0 10px;
	background: transparent;
	border: none;
	border-radius: var(--radius-s);
	box-shadow: none;
	color: var(--text-primary);
	font: 400 14px var(--font-body);
}
#insert_box .docs_people_row input.p_role {
	color: var(--text-secondary);
	font: 500 13px var(--font-body);
}
#insert_box .docs_people_row input:focus {
	background: transparent;
	box-shadow: none;
	border: none;
}
.docs_people_row a {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	justify-self: center;
	cursor: pointer;
	border-radius: var(--radius-s);
	color: var(--text-muted);
}
.docs_people_row a.remove:hover {
	color: var(--danger);
}
.docs_people_row a.add {
	color: var(--accent);
}
.docs_people .docs_people_rows {
	gap: 8px;
	margin-bottom: 12px;
}
.docs_people_row .remove:hover {
	color: var(--danger);
}
.docs_people_actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
@media (max-width: 700px) {
	.docs_people_row {
		grid-template-columns: 30px 1fr 1fr 34px;
	}
	.docs_people_row .p_role,
	.docs_people_row .p_mail {
		grid-column: 2 / 4;
	}
}
.docs_people_actions .docs_people_add {
	font: 500 12px/1.2 var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
	white-space: nowrap;
}
.docs_people_actions .docs_people_add:hover {
	color: var(--accent);
}
.docs_side .hint.warn {
	color: var(--warning);
}
/* Dialog "Aus Kontakten einfuegen" */
.docs_pick .docs_pick_search {
	width: 100%;
	height: 40px;
	margin-bottom: 10px;
}
.docs_pick .docs_pick_rows {
	max-height: 50vh;
	overflow: auto;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	padding: 6px;
}
.docs_pick .docs_pick_row {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr) 16px;
	gap: 14px;
	align-items: center;
	padding: 8px 10px;
	border-radius: var(--radius-s);
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
}
.docs_pick .docs_pick_row:hover {
	background: rgba(var(--accent-rgb),.07);
	color: var(--text-primary);
}
.docs_pick .docs_pick_row > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.docs_pick .docs_pick_row .c_company {
	color: var(--text-muted);
}
.docs_pick .docs_pick_row .c_mail {
	display: flex;
	justify-content: center;
	color: var(--accent);
}
.docs_pick .docs_pick_row .highlight {
	background: rgba(var(--accent-rgb),.25);
	color: var(--text-primary);
	border-radius: 3px;
}
/* Personen im Dialog "Unterschrift einholen" als Tabelle */
.docs_sign_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	overflow: hidden;
	background: var(--surface-raised);
}
.docs_sign_table th,
.docs_sign_table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--border-default);
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-secondary);
	vertical-align: middle;
}
.docs_sign_table th {
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border-strong);
}
.docs_sign_table tbody tr:last-child td {
	border-bottom: 0;
}
.docs_sign_table td:first-child,
.docs_sign_table th:first-child {
	width: 18px;
	padding-right: 0;
}
.docs_sign_table td:nth-child(2) {
	color: var(--text-primary);
	font-weight: 500;
}
.docs_sign_table .num {
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--border-strong);
	color: var(--text-primary);
	font: 700 10px/1 var(--font-body);
}
.docs_sign_table tr.incomplete td {
	color: var(--danger);
}
.docs_sign_table .none {
	color: var(--text-muted);
}
.docs_person .name small {
	display: block;
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.docs_person.incomplete .name,
.docs_person.incomplete .mail {
	color: var(--danger);
}
.docs_fields_list .row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-secondary);
}
.docs_fields_list .row .ico {
	display: inline-flex;
	color: var(--accent);
}
.docs_fields_list .row .name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.docs_fields_list .row .remove {
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
	opacity: 0;
	transition: opacity .12s, color .12s;
}
.docs_fields_list .row:hover .remove {
	opacity: 1;
}
.docs_fields_list .row .remove:hover {
	color: var(--danger);
}

/* Der Editor selbst: Leiste wie der kleine Editor, darunter die Bloecke */
.doc_editor {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	min-width: 0;
}
.doc_editor .editor_toolbar {
	gap: 2px;
}
.doc_editor .editor_sep {
	width: 1px;
	height: 20px;
	background: var(--border-default);
	margin: 0 6px;
}
.doc_editor .editor_btn {
	width: 28px;
	height: 28px;
}
.doc_editor .editor_btn svg {
	width: 15px;
	height: 15px;
}
.doc_editor .doc_fmt,
.doc_editor .doc_fieldbtn,
.doc_editor .doc_snippetbtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 10px;
	box-sizing: border-box;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-strong);
	background: transparent;
	color: var(--text-secondary);
	font: 600 12px/1 var(--font-body);
	cursor: pointer;
	white-space: nowrap;
}
.doc_editor .doc_fmt {
	width: 128px;
}
.doc_editor .doc_fmt > span:first-child {
	flex: 1;
	text-align: left;
}
.doc_editor .editor_tool.open > .doc_fmt,
.doc_editor .editor_tool.open > .doc_fieldbtn,
.doc_editor .editor_tool.open > .doc_snippetbtn {
	border-color: var(--accent);
	color: var(--accent);
}
.doc_editor .editor_menu.fmt {
	min-width: 170px;
}
.doc_editor .editor_menu.fmt a[data-value="h1"] { font: 600 16px/1.3 var(--font-display); }
.doc_editor .editor_menu.fmt a[data-value="h2"] { font: 600 14px/1.3 var(--font-display); }
.doc_editor .editor_menu.fmt a[data-value="h3"] { font: 600 13px/1.3 var(--font-display); }
.doc_editor .editor_menu.fields,
.doc_editor .editor_menu.snippets {
	width: 280px;
	padding: 6px;
}
.doc_editor .editor_menu.fields .head,
.doc_editor .editor_menu.snippets .head {
	font: 600 11px/1.4 var(--font-body);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 4px 10px 6px;
}
.doc_editor .editor_menu.fields .kind,
.doc_editor .editor_menu.snippets .kind {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--radius-s);
	cursor: grab;
}
.doc_editor .editor_menu.fields .kind:hover,
.doc_editor .editor_menu.snippets .kind:hover {
	background: rgba(var(--accent-rgb),.07);
}
.doc_editor .editor_menu.fields .kind .ico,
.doc_editor .editor_menu.snippets .kind .ico {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-strong);
	color: var(--accent);
	flex-shrink: 0;
}
.doc_editor .editor_menu.fields .kind .text,
.doc_editor .editor_menu.snippets .kind .text {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.doc_editor .editor_menu.fields .kind .text b,
.doc_editor .editor_menu.snippets .kind .text b {
	font: 500 13px/1.4 var(--font-body);
	color: var(--text-primary);
}
.doc_editor .editor_menu.fields .kind .text small,
.doc_editor .editor_menu.snippets .kind .text small {
	font: 400 11px/1.4 var(--font-body);
	color: var(--text-muted);
}
.doc_editor .editor_menu.snippets .kind {
	cursor: pointer;
}
.doc_editor .editor_menu.fields .kind .grip {
	color: var(--text-muted);
	display: inline-flex;
}
.doc_editor .editor_toolbar .spacer {
	flex: 1;
}
.doc_blocks {
	padding: 12px 14px;
	min-height: 300px;
}
.doc_block {
	outline: none;
	padding: 4px 10px;
	margin: 2px 0;
	border-radius: var(--radius-s);
	font: 400 14px/1.6 var(--font-body);
	color: var(--text-secondary);
	min-height: 22px;
	white-space: pre-wrap;
	word-break: break-word;
}
.doc_block:empty:before {
	content: attr(data-placeholder);
	color: var(--text-muted);
}
.doc_block.h1 { font: 600 22px/1.3 var(--font-display); color: var(--text-primary); }
.doc_block.h2 { font: 600 17px/1.4 var(--font-display); color: var(--text-primary); }
.doc_block.h3 { font: 600 14px/1.5 var(--font-display); color: var(--text-primary); }
.doc_list {
	padding: 4px 10px;
	margin: 2px 0;
}
.doc_list ul,
.doc_list ol {
	margin: 0;
	padding-left: 15px;
	font: 400 14px/1.6 var(--font-body);
	color: var(--text-secondary);
}
.doc_list li {
	outline: none;
	min-height: 22px;
}
/* Baustein Seitenumbruch im Editor: Linie mit freigestelltem Wort. Nicht
   beschreibbar, aber auswaehlbar und loeschbar wie die anderen Bloecke. */
.doc_pagebreak {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	margin: 6px 0;
	border-radius: var(--radius-m);
	border: 1px solid transparent;
	outline: none;
	cursor: default;
	user-select: none;
}
.doc_pagebreak:before {
	content: '';
	position: absolute;
	left: 10px;
	right: 10px;
	top: 50%;
	border-top: 1px dashed var(--border-strong);
}
.doc_pagebreak .tag {
	position: relative;
	padding: 0 10px;
	background: var(--surface-card);
	font: 500 10px/1.6 var(--font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.doc_pagebreak.focused {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.05);
}
.doc_pagebreak.focused .tag {
	background: transparent;
	color: var(--accent);
}
.doc_pagebreak .pbremove {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	opacity: 0;
	color: var(--text-muted);
	cursor: pointer;
	transition: opacity .12s, color .12s;
}
.doc_pagebreak:hover .pbremove,
.doc_pagebreak.focused .pbremove {
	opacity: 1;
}
.doc_pagebreak .pbremove:hover {
	color: var(--danger);
}
/* Baustein Tabelle im Editor: Zellen sind direkt beschreibbar */
.doc_tableblock {
	position: relative;
	padding: 6px 10px;
	margin: 4px 0;
	border-radius: var(--radius-m);
	border: 1px solid transparent;
}
.doc_tableblock.focused {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.05);
}
.doc_tableblock table {
	width: 100%;
	border-collapse: collapse;
	font: 400 14px/1.6 var(--font-body);
	color: var(--text-secondary);
}
.doc_tableblock td,
.doc_tableblock th {
	border: 1px solid var(--border-default);
	padding: 5px 8px;
	text-align: left;
	vertical-align: top;
	outline: none;
	word-break: break-word;
}
.doc_tableblock td:first-child,
.doc_tableblock th {
	font-weight: 600;
	color: var(--text-primary);
}
.doc_tableblock td[data-cell]:focus,
.doc_tableblock th[data-cell]:focus {
	background: rgba(var(--accent-rgb),.06);
}
.doc_tableblock td.tbtools {
	width: 0;
	padding: 0;
	border: none;
	position: relative;
}
.doc_tableblock .trremove {
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	opacity: 0;
	color: var(--text-muted);
	cursor: pointer;
	transition: opacity .12s, color .12s;
}
.doc_tableblock tr:hover .trremove {
	opacity: 1;
}
.doc_tableblock .trremove:hover {
	color: var(--danger);
}
.doc_tableblock .tbaddrow {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	font: 500 11px/1.4 var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
}
.doc_tableblock .tbaddrow:hover {
	color: var(--accent);
}
.doc_fieldblock {
	position: relative;
	padding: 8px 10px;
	margin: 4px 0;
	border-radius: var(--radius-m);
	border: 1px solid transparent;
}
.doc_fieldblock.focused {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.05);
}
.doc_fieldblock .flabel {
	outline: none;
	font: 500 12px/1.4 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
	min-width: 40px;
	display: inline-block;
}
.doc_fieldblock .fbox {
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-s);
	background: rgba(var(--accent-rgb),.04);
	margin-top: 5px;
}
.doc_fieldblock .fbox.line { height: 34px; }
.doc_fieldblock .fbox.multi { height: 72px; }
.doc_fieldblock .fbox.sign {
	height: 64px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 0 10px 6px;
	box-sizing: border-box;
	font: 400 11px/1 var(--font-body);
	color: var(--text-muted);
}
.doc_fieldblock .fcheck {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* Zuordnung des Felds zu einer unterzeichnenden Person (Editor) */
.doc_fieldblock .fsigner_wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font: 400 11px/1.2 var(--font-body);
	color: var(--text-muted);
}
.doc_fieldblock .fsigner_wrap span {
	white-space: nowrap;
}
.doc_fieldblock .fsigner_wrap .fsigner {
	min-width: 0;
	flex: 1;
}
.doc_fieldblock .fsigner {
	height: 26px;
	padding: 0 30px 0 10px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-s);
	background: var(--surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9591' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 12px 12px;
	color: var(--text-secondary);
	font: 400 11px/1.2 var(--font-body);
	-webkit-appearance: none;
	appearance: none;
	text-overflow: ellipsis;
}
/* Mehrere Briefpapier-Seiten (docpage_paginate) mit Abstand wie der Rand */
.doc_page_wrap .doc_page.letterhead + .doc_page.letterhead {
	margin-top: 24px;
}
.doc_fieldblock .fcheck .fbox {
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
}
.doc_fieldblock .fcheck .flabel {
	text-transform: none;
	letter-spacing: 0;
	font: 400 14px/1.5 var(--font-body);
	color: var(--text-primary);
}
/* Umschalter halbe Breite links vom X; zwei halbe Felder nacheinander
   stehen im Editor und auf der Seite nebeneinander */
.doc_fieldblock .flabel {
	max-width: calc(100% - 64px);
}
.doc_fieldblock .fhalf {
	position: absolute;
	right: 36px;
	top: 6px;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
}
.doc_fieldblock .fhalf {
	opacity: 0;
	transition: opacity .12s, color .12s;
}
.doc_fieldblock:hover .fhalf,
.doc_fieldblock.focused .fhalf {
	opacity: 1;
}
.doc_fieldblock .fhalf:hover,
.doc_fieldblock .fhalf.on {
	color: var(--accent);
}
.doc_blocks {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}
.doc_blocks > * {
	flex: 0 0 100%;
	min-width: 0;
	box-sizing: border-box;
}
.doc_blocks > .doc_fieldblock.half {
	flex: 0 0 calc(50% - 6px);
}
.doc_blocks > .doc_drop.between {
	flex: 0 0 12px;
	min-width: 0;
	overflow: hidden;
	height: auto;
	align-self: stretch;
}
/* Zwei halbe Felder als Zeile: gleiche Breite, unten buendig (Linien von
   Feld und Unterschrift auf einer Hoehe); ein einzelnes halbes Feld bleibt
   halb so breit */
.doc_page .doc_row {
	display: flex;
	align-items: flex-end;
	gap: 16px;
}
.doc_page .doc_row > .doc_field,
.doc_page .doc_row > .doc_sign,
.doc_page .doc_row > .doc_check {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	display: block;
	margin-right: 0;
	margin-bottom: 0;
}
/* In der Zeile enden Linie des Felds und Linie der Unterschrift auf gleicher
   Hoehe: Beschriftung unter dem Feld so hoch wie Name und Rolle unter der
   Unterschrift, Aussenabstaende unten weg (auch auf dem Briefpapier) */
.doc_page.letterhead .doc_row > .doc_field,
.doc_page.letterhead .doc_row > .doc_sign,
.doc_page.letterhead .doc_row > .doc_check {
	margin-bottom: 0;
	margin-right: 0;
}
.doc_page .doc_field.half,
.doc_page .doc_check.half {
	width: calc(50% - 8px);
}
.doc_page .doc_sign.half {
	width: calc(50% - 8px);
	margin-right: 0;
}
.doc_fieldblock .fremove {
	position: absolute;
	right: 10px;
	top: 6px;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
	opacity: 0;
	transition: opacity .12s, color .12s;
}
.doc_fieldblock:hover .fremove,
.doc_fieldblock.focused .fremove {
	opacity: 1;
}
.doc_fieldblock .fremove:hover {
	color: var(--danger);
}
.doc_drop {
	height: 6px;
	border-radius: var(--radius-s);
	border: 1px dashed transparent;
	display: grid;
	place-items: center;
	font: 500 11px/1 var(--font-body);
	color: var(--accent);
	transition: height .12s;
}
.doc_drop.over {
	height: 34px;
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
}
.doc_editor_foot {
	padding: 8px 14px;
	border-top: 1px solid var(--border-default);
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
.doc_twig {
	margin: 0;
	padding: 14px 16px;
	min-height: 300px;
	font: var(--text-code);
	color: var(--text-secondary);
	white-space: pre-wrap;
	word-break: break-word;
}

/* Die Seite: A4 auf Briefpapier, in Vorschau, Ansicht und beim Unterschreiben */
.docs_paper_card {
	padding: 24px;
	display: flex;
	justify-content: center;
	min-width: 0;
}
/* PDF-Ansicht des Dokuments, so hoch wie der Platz unter der Kopfzeile */
.docs_paper_card .docs_view_pdf {
	width: 100%;
	min-height: 400px;
}
.docs_paper_card .docs_view_pdf embed {
	display: block;
	width: 100%;
	height: max(600px, calc(100vh - 300px));
	border-radius: var(--radius-m);
}
.docs_paper_card .docs_view_pdf .docs_loading {
	margin: 0;
	padding: 60px 20px;
	text-align: center;
	color: var(--text-secondary);
}
.doc_page_wrap {
	width: 100%;
	max-width: 595px;
	min-width: 0;
	overflow: hidden;
}
.doc_page {
	position: relative;
	width: 100%;
	max-width: 595px;
	min-height: 842px;
	box-sizing: border-box;
	padding: 110px 56px 90px;
	border-radius: 4px;
	border: 1px solid var(--border-strong);
	background: #F5F5F2;
	color: #101413;
	font: 400 11px/1.55 var(--font-body);
}
.doc_page .doc_mark {
	position: absolute;
	top: 34px;
	left: 56px;
	font: 700 16px/1 var(--font-display);
	letter-spacing: -.02em;
}
.doc_page .doc_bar {
	position: absolute;
	top: 40px;
	right: 56px;
	width: 110px;
	height: 6px;
	border-radius: 2px;
	background: #D8D8D2;
}
.doc_page .doc_sender {
	position: absolute;
	top: 78px;
	left: 56px;
	right: 56px;
	font: 400 8px/1.3 var(--font-body);
	color: #777;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.doc_page h1 { margin: 0 0 12px; font: 600 17px/1.3 var(--font-display); color: #101413; }
.doc_page h2 { margin: 14px 0 6px; font: 600 13px/1.35 var(--font-display); color: #101413; }
.doc_page h3 { margin: 10px 0 4px; font: 600 11px/1.4 var(--font-display); color: #101413; }
.doc_page p { margin: 0 0 8px; white-space: pre-wrap; color: #101413; }
/* Aufzaehlungszeichen stehen buendig mit dem Text darueber, der Einzug
   ist nur so breit wie das Zeichen. */
.doc_page ul,
.doc_page ol { margin: 0 0 8px; padding-left: 15px; color: #101413; }
/* Ab zehn Punkten braucht die Nummer mehr Platz, sonst ragt sie links heraus */
.doc_page ol:has(li:nth-child(10)),
.doc_list ol:has(li:nth-child(10)),
.doc_page.letterhead ol:has(li:nth-child(10)) { padding-left: 23px; }
/* Tabelle auf der Seite (Vorschau und Unterschriftsseite) wie im PDF:
   volle Breite, duenne Linien, erste Spalte und Kopfzeile fett */
.doc_page .doc_table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 8px;
	color: #101413;
}
.doc_page .doc_table td,
.doc_page .doc_table th {
	border: 1px solid #ccc;
	padding: 3px 6px;
	text-align: left;
	vertical-align: top;
	font: 400 11px/1.5 var(--font-body);
}
.doc_page .doc_table td:first-child,
.doc_page .doc_table th {
	font-weight: 600;
}
.doc_page .doc_table.with_head th {
	border-bottom: 1px solid #999;
}
/* Seitenumbruch: wirkt im PDF, hier zeigt eine Linie die Stelle */
.doc_page .doc_pagebreak_mark {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 10px 0;
}
.doc_page .doc_pagebreak_mark:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-top: 1px dashed #bbb;
}
.doc_page .doc_pagebreak_mark .tag {
	position: relative;
	padding: 0 8px;
	background: #F5F5F2;
	font: 500 8px/1.6 var(--font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #777;
}
.doc_page.letterhead .doc_pagebreak_mark .tag { background: #fff; }
.doc_page .doc_field { margin: 6px 0; }
.doc_page .doc_field .label {
	display: block;
	font: 400 9px/1.3 var(--font-body);
	color: #555;
}
.doc_page .doc_field .value {
	display: block;
	border: 1px solid #bbb;
	min-height: 16px;
	border-radius: 2px;
	background: #fafaf8;
	padding: 1px 4px;
	font: 400 10px/1.4 var(--font-body);
	color: #101413;
	box-sizing: border-box;
	white-space: pre-wrap;
}
.doc_page .doc_field.multi .value { min-height: 44px; }
.doc_page .doc_field.line .label { margin-top: 3px; }
.doc_page .doc_field .value.input {
	width: 100%;
	height: auto;
	min-height: 22px;
	border: 1px solid var(--accent);
	background: #fff;
	outline: none;
	resize: vertical;
	font: 400 10px/1.4 var(--font-body);
	color: #101413;
	margin: 0;
}
.doc_page .doc_field.multi .value.input { min-height: 56px; }
.doc_page .doc_field .value.input.missing { border-color: #D9534F; background: #fff4f3; }
.doc_page .doc_check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0;
	color: #101413;
}
.doc_page .doc_check .cbox {
	width: 12px;
	height: 12px;
	border: 1px solid #333;
	border-radius: 2px;
	display: grid;
	place-items: center;
	font: 700 9px/1 var(--font-body);
	flex-shrink: 0;
	background: #fff;
}
.doc_page .doc_check.editable {
	cursor: pointer;
	font: 400 11px/1.55 var(--font-body);
	text-transform: none;
	letter-spacing: 0;
	color: #101413;
	margin: 6px 0;
}
.doc_page .doc_check.editable input { position: absolute; opacity: 0; width: 0; height: 0; }
.doc_page .doc_check.editable .cbox { border-color: var(--accent); }
.doc_page .doc_check.editable input:checked + .cbox:after { content: '✓'; }
.doc_page .doc_sign {
	display: inline-block;
	vertical-align: bottom;
	width: 220px;
	margin: 22px 20px 0 0;
}
.doc_page .doc_sign .pad {
	position: relative;
	height: 44px;
	border-bottom: 1px solid #333;
}
.doc_page .doc_sign .pad img {
	position: absolute;
	left: 0;
	bottom: 2px;
	height: 40px;
}
.doc_page .doc_sign.mine .pad {
	border: 1px dashed var(--accent);
	border-radius: 3px;
	background: rgba(0,208,155,.06);
	display: grid;
	place-items: center;
}
.doc_page .doc_sign .pad_hint {
	font: 500 9px/1 var(--font-body);
	color: var(--accent);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.doc_page .doc_sign .who {
	margin-top: 3px;
	font: 400 9px/1.3 var(--font-body);
	color: #555;
}
.doc_page .doc_sign .who .name {
	font: 600 10px/1.3 var(--font-display);
	color: #101413;
}
.doc_page .doc_rule {
	position: absolute;
	bottom: 40px;
	left: 56px;
	right: 56px;
	height: 1px;
	background: #D8D8D2;
}
.doc_page .doc_foot_left,
.doc_page .doc_foot_right {
	position: absolute;
	bottom: 24px;
	font: 400 7px/1.3 var(--font-body);
	color: #888;
}
.doc_page .doc_foot_left { left: 56px; right: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc_page .doc_foot_right { right: 56px; }

/* Vorschau-Dialog */
#insert_box .docs_preview {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
#insert_box .docs_preview .docs_preview_actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}
#insert_box .docs_preview .doc_page_wrap {
	margin: 0 auto;
	max-height: 70vh;
	overflow: auto;
}
#insert_box .docs_preview .docs_preview_pdf {
	min-height: 200px;
	max-height: 72vh;
	padding: 24px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	overflow: auto;
}
/* Seiten aus pdf.js (docs_pdf_pages): Abstand zwischen den Seiten wie der
   Rand links und rechts */
.pdf_pages {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.pdf_pages .pdf_page {
	display: block;
	width: 100%;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.18);
}
.pdf_pages .docs_loading {
	margin: 0;
	padding: 60px 20px;
	text-align: center;
	color: var(--text-secondary);
}
#insert_box .docs_preview .docs_preview_pdf embed {
	display: block;
	width: 100%;
	height: 72vh;
}
#insert_box .docs_preview .docs_preview_pdf .docs_loading {
	margin: 0;
	padding: 60px 20px;
	text-align: center;
	color: var(--text-secondary);
}

/* Verlauf, Unterzeichnende, Dateien in der Randspalte */
.docs_timeline .step {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 10px;
	align-items: start;
}
.docs_timeline .step .dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin-top: 1px;
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	color: var(--on-accent);
}
.docs_timeline .step.done .dot { background: var(--accent); border-color: var(--accent); }
.docs_timeline .step.bad .dot { background: var(--danger); border-color: var(--danger); color: #fff; }
.docs_timeline .step .text {
	display: flex;
	flex-direction: column;
}
.docs_timeline .step .text .t {
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-muted);
}
.docs_timeline .step.done .text .t,
.docs_timeline .step.bad .text .t {
	color: var(--text-primary);
}
.docs_timeline .step .text .d {
	font: 400 11px/1.4 var(--font-body);
	color: var(--text-muted);
}
.docs_person {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-secondary);
}
.docs_person .num {
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--border-strong);
	color: var(--text-primary);
	font: 700 10px/1 var(--font-body);
	flex-shrink: 0;
}
.docs_person .num.done {
	background: var(--accent);
	color: var(--on-accent);
}
.docs_person .name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.docs_person .when,
.docs_person .mail {
	font: 400 12px/1.4 var(--font-body);
	color: var(--text-muted);
	white-space: nowrap;
}
.docs_file {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	color: var(--text-primary);
	text-decoration: none;
}
.docs_file:hover {
	border-color: var(--accent);
	text-decoration: none;
}
.docs_file .kind {
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-strong);
	color: var(--danger);
	font: 700 8px/1 var(--font-body);
	flex-shrink: 0;
}
.docs_file .name {
	flex: 1;
	min-width: 0;
	font: 500 13px/1.3 var(--font-body);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.docs_file .name small {
	display: block;
	font: 400 11px/1.4 var(--font-body);
	color: var(--text-muted);
}
.docs_file svg {
	color: var(--text-muted);
	flex-shrink: 0;
}
.docs_file:hover svg {
	color: var(--accent);
}

/* Dialog Unterschrift einholen */
.docs_sign_dialog {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.docs_sign_dialog > p {
	margin: 0;
	font: var(--text-small);
	color: var(--text-muted);
	line-height: 1.5;
}
.docs_signer_card {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.docs_signer_card .head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.docs_signer_card .head .num {
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--accent);
	color: var(--on-accent);
	font: 700 11px/1 var(--font-body);
}
.docs_signer_card .head .title {
	font: 600 13px/1.3 var(--font-body);
	color: var(--text-primary);
}
.docs_signer_card .head .spacer {
	flex: 1;
}
.docs_signer_card .head .select {
	width: 240px;
}
.docs_signer_card .inputs {
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 10px;
}
/* Kontaktliste im Unterschriftendialog: zwei Fluchten, Name und
   Unternehmen; Breite und Lage setzt docs_sign_dialog (js/documents.js). */
.docs_contact_select > ul > li:not(.search) > p {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr) 16px;
	align-items: center;
	gap: 14px;
}
/* Dritte Spalte: Briefumschlag, wenn eine E-Mail hinterlegt ist */
.docs_contact_select > ul > li > p > .c_mail {
	display: flex;
	justify-content: center;
	color: var(--accent);
}
.docs_contact_select > ul > li > p > .c_mail svg {
	display: block;
}
.docs_contact_select > ul > li > p > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.docs_contact_select > ul > li > p > .c_company {
	color: var(--text-muted);
}
.select ul li p .highlight {
	background: rgba(var(--accent-rgb),.25);
	color: var(--text-primary);
	border-radius: 3px;
}
.docs_signer_card .inputs input {
	height: 38px;
}
/* Fehlerzustand wie Input im Designsystem: 1,5px Danger-Rahmen ohne Glow,
   beim Fokus gewinnt der Akzent, darunter der Hinweis in 12px Danger. */
#insert_box .docs_signer_card .inputs input.error {
	border: 1.5px solid var(--danger);
	box-shadow: none;
}
#insert_box .docs_signer_card .inputs input.error:focus {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.docs_signer_card .s_error {
	margin: -2px 0 0;
	font: 400 12px var(--font-body);
	color: var(--danger);
}
.docs_sign_dialog .grid2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px 20px;
}
.docs_sign_dialog label.lbl {
	display: block;
	margin-bottom: 6px;
	font: 500 12px/1.4 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.docs_sign_dialog textarea {
	min-height: 120px;
}
.docs_error_box {
	border: 1px solid var(--danger);
	border-radius: var(--radius-m);
	background: rgba(242,109,109,.08);
	padding: 14px 16px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.docs_error_box .mark {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--danger);
	color: var(--danger);
	font: 700 14px/1 var(--font-body);
	flex-shrink: 0;
}
.docs_error_box b {
	display: block;
	font: 600 14px/1.4 var(--font-body);
	color: var(--danger);
}
.docs_error_box span {
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-secondary);
}
.docs_dialog_footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 8px;
}

/* Unterschriftsseite */
.sign_view .docs_side .button.full {
	width: 100%;
	justify-content: center;
}
.sign_pad_wrap {
	position: relative;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-page);
	height: 160px;
	overflow: hidden;
}
.sign_pad_wrap canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	cursor: crosshair;
}
.sign_pad_wrap .sign_pad_hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	text-align: center;
	font: 500 11px/1 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
	pointer-events: none;
}
.sign_pad_wrap.has_ink .sign_pad_hint {
	display: none;
}
.sign_pad_wrap .sign_pad_clear {
	position: absolute;
	right: 8px;
	top: 8px;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
}
.sign_pad_wrap .sign_pad_clear:hover {
	color: var(--text-primary);
	background: var(--surface-raised);
}
.sign_consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font: var(--text-small);
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-secondary);
	line-height: 1.5;
	cursor: pointer;
}
.sign_consent input {
	margin-top: 3px;
	accent-color: var(--accent);
}
.sign_error {
	margin: 0;
	font: var(--text-small);
	color: var(--danger);
}
.sign_message {
	margin: 0;
	font: var(--text-small);
	color: var(--text-secondary);
	line-height: 1.5;
}
#sign_decline textarea {
	margin-bottom: 8px;
}
body.signed_out #sign_page {
	max-width: 1100px;
	margin: 0 auto;
}

@media (max-width: 770px) {
	.docs_editor_wrap,
	.docs_view {
		grid-template-columns: minmax(0, 1fr);
	}
	.docs_signer_card .inputs {
		grid-template-columns: 1fr;
	}
	.docs_signer_card .head .select {
		width: 100%;
	}
	.doc_page {
		padding: 80px 24px 70px;
		min-height: 0;
	}
	.doc_page .doc_mark,
	.doc_page .doc_sender,
	.doc_page .doc_rule,
	.doc_page .doc_foot_left { left: 24px; }
	.doc_page .doc_bar,
	.doc_page .doc_rule,
	.doc_page .doc_foot_right { right: 24px; }
	.doc_page .doc_sender { right: 24px; }
}

/* Seitenansicht mit echtem Briefpapier: dieselben Schriften und Masse wie das
   PDF (Roboto Condensed, 10pt auf 13pt, Raender aus den Einstellungen). */
@font-face {
	font-family: 'roboto_condensedlight';
	src: url('fonts/RobotoCondensed-Light.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'roboto_condensedbold';
	src: url('fonts/RobotoCondensed-Bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
.doc_page.letterhead {
	width: 595px;
	max-width: none;
	min-height: 842px;
	background-color: #fff;
	background-size: 100% auto;
	background-position: center top;
	background-repeat: no-repeat;
	border: 1px solid var(--border-strong);
	border-radius: 2px;
	color: #111;
	font: 400 10px/13px 'roboto_condensedlight', sans-serif;
}
.doc_page.letterhead h1,
.doc_page.letterhead h2,
.doc_page.letterhead h3,
.doc_page.letterhead b,
.doc_page.letterhead strong {
	font-family: 'roboto_condensedbold', sans-serif;
	font-weight: normal;
	color: #111;
}
.doc_page.letterhead h1 { font-size: 16px; line-height: 20px; margin: 0 0 14px; }
.doc_page.letterhead h2 { font-size: 12px; line-height: 15px; margin: 14px 0 6px; }
.doc_page.letterhead h3 { font-size: 10.5px; line-height: 13px; margin: 11px 0 4px; }
.doc_page.letterhead p { margin: 0 0 7px; color: #111; }
.doc_page.letterhead ul,
.doc_page.letterhead ol { margin: 0 0 7px; padding-left: 15px; color: #111; }
.doc_page.letterhead li { margin: 0 0 2px; }
.doc_page.letterhead .doc_sender_line {
	font-size: 8px;
	line-height: 10px;
	text-decoration: underline;
	margin: 0 0 23px;
}
.doc_page.letterhead .doc_field { margin: 6px 0 10px; }
.doc_page.letterhead .doc_field .label {
	font: 400 7.5px/9px 'roboto_condensedlight', sans-serif;
	color: #555;
	margin-bottom: 2px;
}
.doc_page.letterhead .doc_field.line .label {
	margin: 2px 0 0;
}
.doc_page.letterhead .doc_field .value {
	border: 0;
	border-bottom: 1px solid #333;
	border-radius: 0;
	background: transparent;
	min-height: 14px;
	padding: 0 0 1px;
	font: 400 10px/13px 'roboto_condensedlight', sans-serif;
	color: #111;
}
.doc_page.letterhead .doc_field.multi .value {
	border: 1px solid #999;
	min-height: 45px;
	padding: 3px 4px;
}
.doc_page.letterhead .doc_field .value.input {
	border: 1px solid var(--accent);
	background: #fff;
	padding: 2px 4px;
}
.doc_page.letterhead .doc_check {
	margin: 6px 0;
	color: #111;
	font: 400 10px/13px 'roboto_condensedlight', sans-serif;
}
.doc_page.letterhead .doc_check .cbox {
	width: 9px;
	height: 9px;
	font-size: 7px;
	border-color: #333;
	margin-right: 0;
}
.doc_page.letterhead .doc_check.editable {
	font: 400 10px/13px 'roboto_condensedlight', sans-serif;
}
.doc_page.letterhead .doc_sign {
	width: 198px;
	margin: 23px 23px 0 0;
}
.doc_page.letterhead .doc_sign .pad {
	height: 54px;
	border-bottom: 1px solid #333;
}
.doc_page.letterhead .doc_sign .pad img {
	height: 48px;
	bottom: 1px;
}
.doc_page.letterhead .doc_sign .who {
	font: 400 7.5px/10px 'roboto_condensedlight', sans-serif;
	color: #444;
	margin-top: 2px;
}
.doc_page.letterhead .doc_sign .who .name {
	font: 400 9px/12px 'roboto_condensedbold', sans-serif;
	color: #111;
}
.doc_page.letterhead .doc_foot_left,
.doc_page.letterhead .doc_foot_right {
	bottom: 10px;
	font: 400 6.5px/8px 'roboto_condensedlight', sans-serif;
	color: #999;
}
.doc_page.letterhead .doc_foot_left { left: 57px; right: auto; max-width: 60%; }
.doc_page.letterhead .doc_foot_right { right: 57px; }

/* Unterschriftsseite: das eigene Feld im Dokument oeffnet das Zeichenfeld */
.doc_page .doc_sign.mine .pad {
	cursor: pointer;
	transition: box-shadow .15s, background .15s;
}
.doc_page .doc_sign.mine .pad:hover {
	background: rgba(0,208,155,.12);
	box-shadow: 0 0 0 2px rgba(0,208,155,.25);
}
.doc_page .doc_sign.mine.has_sig .pad {
	display: block;
	border: 1px dashed transparent;
	border-bottom: 1px solid #333;
	border-radius: 0;
	background: transparent;
}
.doc_page .doc_sign.mine.has_sig .pad:hover {
	border-color: var(--accent);
	background: rgba(0,208,155,.06);
}
.doc_page .doc_sign .pad .pad_change {
	position: absolute;
	right: 4px;
	top: 3px;
	font: 500 8px/1 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--accent);
	opacity: 0;
	transition: opacity .12s;
}
.doc_page .doc_sign.mine.has_sig .pad:hover .pad_change {
	opacity: 1;
}
#sign_box .box {
	width: 640px;
}
#sign_box .sign_pad_wrap {
	height: 240px;
	background: #fff;
	border-color: var(--border-strong);
}
#sign_box .sign_pad_wrap .sign_pad_hint {
	color: #9aa;
}
#sign_box .sign_pad_wrap .sign_pad_clear {
	color: #667;
}
#sign_box .sign_pad_wrap .sign_pad_clear:hover {
	background: #eef2f1;
	color: #111;
}
#sign_box .docs_dialog_footer {
	margin-top: 18px;
}

/* --------------------------------------------------------------------------
   Organisation > Kalender (js/calendar.js): Kopf, Randspalte, Woche, Monat,
   Jahr, Termin-Dialog. Farbe des Kalenders kommt als --cal ans Element.
   -------------------------------------------------------------------------- */
.cal_arrows {
	display: inline-flex;
	height: 40px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	overflow: hidden;
	background: var(--surface-raised);
	box-sizing: border-box;
}
.cal_arrows a {
	width: 38px;
	display: grid;
	place-items: center;
	color: var(--text-muted);
	cursor: pointer;
}
.cal_arrows a + a {
	border-left: 1px solid var(--border-strong);
}
.cal_arrows a:hover {
	color: var(--text-primary);
}
.cal_arrows .icon.left {
	transform: rotate(90deg);
}
.cal_arrows .icon.right {
	transform: rotate(-90deg);
}
.cal_views .button {
	height: 40px;
}
.cal_empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.cal_empty .badge {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-m);
	border: 1px solid var(--accent);
	color: var(--accent);
	box-shadow: var(--glow-border);
}
.cal_empty h2 {
	margin: 0;
	font: var(--text-h2);
	letter-spacing: var(--ls-h2);
	color: var(--text-primary);
}
.cal_empty p {
	max-width: 460px;
	color: var(--text-muted);
}
.cal_loading {
	display: grid;
	place-items: center;
	padding: 60px 0;
}

/* Randspalte: Konten als Ueberschrift, Kalender mit farbigem Haekchen */
.cal_nav {
	gap: 10px;
	min-width: 200px;
	max-width: 200px;
}
.cal_nav_account {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-left: 2px solid var(--border-default);
}
.cal_nav_name {
	padding: 6px 12px 2px;
	font: 500 11px/1.4 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cal_nav_cal {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 6px 12px 6px 14px;
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cal_nav_cal.on {
	color: var(--text-secondary);
}
.cal_nav_cal:hover {
	color: var(--text-primary);
	text-decoration: none;
}
.cal_nav_cal .cal_check {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	border-radius: 4px;
	border: 1.5px solid var(--cal);
	background: transparent;
	display: grid;
	place-items: center;
	color: #0B0F0E;
}
.cal_nav_cal .cal_check svg {
	visibility: hidden;
	stroke-width: 4;
}
.cal_nav_cal.on .cal_check {
	background: var(--cal);
}
.cal_nav_cal.on .cal_check svg {
	visibility: visible;
}
.cal_nav_label {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Wochenansicht */
.cal_week {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.cal_week_scroll {
	overflow-x: auto;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 250px);
	min-height: 420px;
}
.cal_grid {
	display: grid;
	grid-template-columns: 56px repeat(7, minmax(0, 1fr));
}
.cal_week_head {
	border-bottom: 1px solid var(--border-strong);
	flex-shrink: 0;
}
.cal_kw {
	padding: 10px 0 6px;
	text-align: center;
	font: 500 10px/1.4 var(--font-body);
	color: var(--text-muted);
}
.cal_day_head {
	padding: 10px 8px 8px;
	border-left: 1px solid var(--border-default);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
}
.cal_day_head .wd {
	font: 500 12px/1 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.cal_day_head .num {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--text-primary);
	font: 600 14px/1 var(--font-body);
}
.cal_day_head.today .wd {
	color: var(--accent);
}
.cal_day_head.today .num {
	background: var(--accent);
	color: var(--on-accent);
}
.cal_allday_row {
	border-bottom: 1px solid var(--border-strong);
	flex-shrink: 0;
}
.cal_allday_label {
	padding: 6px 0;
	text-align: center;
	font: 400 10px/1.4 var(--font-body);
	color: var(--text-muted);
}
.cal_allday_cell {
	border-left: 1px solid var(--border-default);
	padding: 4px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 28px;
	min-width: 0;
}
.cal_allday_block {
	position: relative;
	padding: 3px 8px 3px 13px;
	background: color-mix(in srgb, var(--cal) 18%, transparent);
	font: 600 11px/1.4 var(--font-body);
	color: var(--cal);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cal_bar {
	position: absolute;
	left: 3px;
	top: 4px;
	bottom: 4px;
	width: 3px;
	border-radius: 2px;
	background: var(--cal);
}
.cal_allday_block .cal_bar {
	top: 3px;
	bottom: 3px;
}
.cal_week_body {
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}
.cal_hours {
	position: relative;
}
.cal_time_col {
	position: relative;
}
.cal_time_col span {
	position: absolute;
	right: 8px;
	font: 400 10px/1.4 var(--font-body);
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
.cal_day_col {
	position: relative;
	border-left: 1px solid var(--border-default);
	background-image: repeating-linear-gradient(to bottom, var(--border-default) 0 1px, transparent 1px 48px);
	cursor: crosshair;
	user-select: none;
}
.cal_day_col.today {
	background-color: rgba(var(--accent-rgb),.025);
}
.cal_block {
	position: absolute;
	overflow: hidden;
	box-sizing: border-box;
	padding: 4px 8px 4px 13px;
	background: color-mix(in srgb, var(--cal) 18%, transparent);
	cursor: pointer;
	z-index: 2;
	transition: filter .12s;
	color: var(--cal);
}
.cal_block.compact {
	padding: 2px 6px 2px 12px;
}
.cal_block:hover {
	filter: brightness(1.25);
}
.cal_block_head {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}
.cal_block_title {
	flex: 1;
	min-width: 0;
	font: 600 12px/1.3 var(--font-body);
	overflow: hidden;
	text-overflow: ellipsis;
}
.cal_block_title.nowrap {
	white-space: nowrap;
}
.cal_block_time_inline {
	font-weight: 400;
	opacity: .8;
}
.cal_block_icons {
	display: flex;
	gap: 4px;
	opacity: .8;
	flex-shrink: 0;
}
.cal_block_line {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 2px;
	font: 400 11px/1.3 var(--font-body);
	opacity: .85;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cal_block_line span {
	overflow: hidden;
	text-overflow: ellipsis;
}
.cal_block_line svg {
	flex-shrink: 0;
}
.cal_now {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--danger);
	z-index: 4;
	pointer-events: none;
}
.cal_now span {
	position: absolute;
	left: -5px;
	top: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--danger);
}
.cal_ghost {
	position: absolute;
	left: 2px;
	right: 3px;
	box-sizing: border-box;
	padding: 4px 8px 4px 10px;
	background: rgba(var(--accent-rgb),.22);
	border-left: 3px solid var(--accent);
	font: 600 12px/1.3 var(--font-body);
	color: var(--accent);
	pointer-events: none;
	z-index: 3;
	overflow: hidden;
}
.cal_ghost b {
	font-weight: 600;
}
.cal_ghost span {
	display: block;
	font: 400 11px/1.3 var(--font-body);
	opacity: .85;
}

/* Monatsansicht */
.cal_month {
	padding: 0;
	overflow: hidden;
}
.cal_month_scroll {
	overflow-x: auto;
}
.cal_month_inner {
	min-width: 700px;
}
.cal_month_head {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	border-bottom: 1px solid var(--border-strong);
}
.cal_month_head div {
	padding: 10px;
	font: 500 12px/1.4 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-secondary);
}
.cal_month_head div + div {
	border-left: 1px solid var(--border-default);
}
.cal_month_head div.weekend {
	color: var(--text-muted);
}
.cal_month_grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	grid-auto-rows: minmax(104px, auto);
}
.cal_month_cell {
	padding: 6px 6px 8px;
	border-top: 1px solid var(--border-default);
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	cursor: pointer;
}
.cal_month_cell:nth-child(-n+7) {
	border-top: none;
}
.cal_month_cell:not(:nth-child(7n+1)) {
	border-left: 1px solid var(--border-default);
}
.cal_month_cell.weekend {
	background: rgba(255,255,255,.015);
}
.cal_month_cell.today {
	background: rgba(var(--accent-rgb),.04);
}
.cal_month_cell.outside {
	opacity: .45;
}
.cal_month_day {
	align-self: flex-start;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--text-primary);
	font: 600 13px/1 var(--font-body);
	cursor: pointer;
}
.cal_month_day:hover {
	background: var(--surface-raised);
	text-decoration: none;
}
.cal_month_cell.today .cal_month_day {
	background: var(--accent);
	color: var(--on-accent);
}
.cal_month_ev {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 2px 6px;
	font: 500 11px/1.4 var(--font-body);
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.cal_month_ev .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cal);
	flex-shrink: 0;
}
.cal_month_ev .t {
	color: var(--text-muted);
	flex-shrink: 0;
}
.cal_month_ev .title {
	overflow: hidden;
	text-overflow: ellipsis;
}
.cal_month_ev:hover,
.cal_month_ev.allday {
	background: color-mix(in srgb, var(--cal) 18%, transparent);
}
.cal_month_ev.allday {
	color: var(--cal);
}
.cal_month_more {
	align-self: flex-start;
	padding: 1px 6px;
	font: 500 11px/1.4 var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
}
.cal_month_more:hover {
	color: var(--text-primary);
	text-decoration: none;
}

/* Jahresansicht */
.cal_year {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
}
.cal_mini {
	padding: 14px;
}
.cal_mini_name {
	display: inline-block;
	padding: 0 0 8px;
	font: 600 14px/1.3 var(--font-display);
	color: var(--text-primary);
	cursor: pointer;
}
.cal_mini_name.current,
.cal_mini_name:hover {
	color: var(--accent);
	text-decoration: none;
}
.cal_mini_grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
.cal_mini_grid .wd {
	text-align: center;
	font: 500 9px/1.4 var(--font-body);
	color: var(--text-muted);
	padding-bottom: 2px;
}
.cal_mini_day {
	height: 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	border-radius: 6px;
	font: 500 11px/1 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
}
.cal_mini_day.outside {
	color: transparent;
	cursor: default;
	pointer-events: none;
}
.cal_mini_day:hover {
	background: var(--surface-raised);
	text-decoration: none;
}
.cal_mini_day.today {
	background: var(--accent);
	color: var(--on-accent);
}
.cal_mini_day .dots {
	display: flex;
	gap: 2px;
	height: 3px;
}
.cal_mini_day .dots span {
	width: 3px;
	height: 3px;
	border-radius: 50%;
}

/* Termin-Dialog */
.cal_modal .box {
	width: 560px;
}
/* Rueckfrage "Konto entfernen?" unter Einstellungen > Kalender */
.cal_modal.cal_remove_modal .box {
	width: 460px;
}
.cal_remove_dialog .cal_remove_text {
	margin: 0;
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-secondary);
}
.cal_modal .dlg_head h2 {
	margin-bottom: 14px;
}
.cal_modal .dlg_head .subline {
	margin-bottom: 18px;
}
.cal_dialog {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cal_dialog_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.cal_kind .button {
	height: 38px;
}
.cal_dialog_title {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 190px;
	gap: 12px;
}
.cal_dialog_title input {
	height: 44px;
	font: 600 17px/1.3 var(--font-display);
	letter-spacing: -.01em;
}
.cal_picker {
	position: relative;
	display: flex;
}
.cal_picker_btn {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	width: 100%;
	padding: 0 32px 0 12px;
	box-sizing: border-box;
	cursor: pointer;
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	color: var(--text-primary);
	font: 400 14px/1.3 var(--font-body);
	white-space: nowrap;
	position: relative;
}
.cal_picker_btn:hover {
	text-decoration: none;
}
.cal_picker.open .cal_picker_btn {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.cal_picker_btn > svg {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	transition: transform .15s;
}
.cal_picker.open .cal_picker_btn > svg {
	transform: translateY(-50%) rotate(180deg);
}
.cal_picker_name {
	overflow: hidden;
	text-overflow: ellipsis;
}
.cal_dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	display: inline-block;
}
.cal_picker_menu {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	width: auto;
	box-sizing: border-box;
	background: var(--surface-card);
	border: 1px solid var(--accent);
	border-radius: var(--radius-m);
	box-shadow: var(--glow-border);
	padding: 6px;
	z-index: 60;
	max-height: 320px;
	overflow-y: auto;
}
.cal_picker.open .cal_picker_menu {
	display: block;
}
.cal_picker_group {
	padding: 6px 10px 2px;
	font: 500 11px/1.4 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cal_picker_item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 7px 10px;
	border-radius: var(--radius-s);
	color: var(--text-secondary);
	font: 400 13px/1.3 var(--font-body);
	cursor: pointer;
	box-sizing: border-box;
}
.cal_picker_item svg {
	margin-left: auto;
	color: var(--text-muted);
}
.cal_picker_item:hover {
	background: var(--surface-raised);
	text-decoration: none;
}
.cal_picker_item.active {
	background: rgba(var(--accent-rgb),.08);
	color: var(--accent);
}
.cal_dialog_place {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
}
.cal_video_btn {
	height: 40px;
	width: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	color: var(--text-muted);
	cursor: pointer;
}
.cal_video_btn.on {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
	color: var(--accent);
}
.cal_dialog_when {
	background: var(--surface-raised);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-m);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cal_when_line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font: 500 14px/1.3 var(--font-body);
	color: var(--text-primary);
}
.cal_when_line b {
	font-weight: 500;
}
.cal_when_line span span {
	color: var(--text-secondary);
}
.cal_when_grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 10px;
}
.cal_when_grid.allday {
	grid-template-columns: 1fr;
}
.cal_when_grid.allday .time {
	display: none;
}
.cal_when_grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.cal_dialog label.lbl,
.cal_add_dialog label.lbl,
.data .cal_dialog label.lbl {
	display: block;
	margin-bottom: 6px;
	font: 500 12px/1.4 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.cal_dialog input[type="date"],
.cal_dialog input[type="time"] {
	color-scheme: dark;
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	padding: 0 12px;
	background: var(--surface-card);
	color: var(--text-primary);
	font: 400 14px/1.3 var(--font-body);
	border-radius: var(--radius-m);
	outline: none;
	border: 1px solid var(--border-strong);
}
[data-theme="light"] .cal_dialog input[type="date"],
[data-theme="light"] .cal_dialog input[type="time"] {
	color-scheme: light;
}
.cal_select {
	position: relative;
	display: flex;
}
.cal_select select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 40px;
	padding: 0 36px 0 12px;
	background: var(--surface-card);
	color: var(--text-primary);
	font: 400 14px/1.3 var(--font-body);
	border-radius: var(--radius-m);
	outline: none;
	cursor: pointer;
	border: 1px solid var(--border-strong);
}
.cal_select select:disabled {
	opacity: .6;
	cursor: default;
}
.cal_select > svg {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--text-muted);
}
.cal_field_hint {
	display: block;
	margin-top: 4px;
	font: 400 11px/1.4 var(--font-body);
	color: var(--text-muted);
}
.cal_dialog_guests {
	position: relative;
}
.cal_dialog_guests input {
	padding-left: 38px;
}
.cal_dialog_guests > svg {
	position: absolute;
	left: 12px;
	top: 12px;
	color: var(--text-muted);
}
.cal_dialog textarea {
	min-height: 80px;
}
.cal_dialog_note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: var(--text-small);
	color: var(--text-muted);
}
/* Slot einer Aufgabe: Verweis zurueck zur Karte */
.cal_dialog_task {
	margin: 0;
}
.cal_dialog_task a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 12px/1.3 var(--font-body);
	color: var(--accent);
}
.cal_dialog_error {
	margin: 0;
	font: var(--text-small);
	color: var(--danger);
}
.cal_dialog_footer {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 4px;
}
.cal_dialog_footer .right {
	display: flex;
	gap: 12px;
}
.cal_dialog_footer .button.busy {
	pointer-events: none;
	min-width: 90px;
}
.cal_dialog.readonly input,
.cal_dialog.readonly textarea,
.cal_dialog.readonly select,
.cal_dialog.readonly .cal_toggle,
.cal_dialog.readonly .cal_video_btn,
.cal_dialog.readonly .cal_kind,
.cal_dialog.readonly .cal_picker {
	pointer-events: none;
	opacity: .7;
}

/* Umschalter mit Knopf (Ganztaegig, Anzeigen) */
.cal_toggle,
.data .cal_toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	flex: 0 0 auto;
	cursor: pointer;
	user-select: none;
	margin: 0;
	font: 500 13px/1.3 var(--font-body);
	line-height: 1.3;
	color: var(--text-muted);
	text-transform: none;
	letter-spacing: 0;
}
.cal_toggle_track {
	position: relative;
	width: 34px;
	height: 20px;
	border-radius: 999px;
	background: var(--border-strong);
	transition: background .15s;
	flex-shrink: 0;
}
.cal_toggle_knob {
	position: absolute;
	left: 2px;
	top: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--text-primary);
	transition: left .15s;
}
.cal_toggle.on .cal_toggle_track {
	background: var(--accent);
}
.cal_toggle.on .cal_toggle_knob {
	left: 16px;
	background: var(--on-accent);
}
.cal_toggle.on {
	color: var(--text-primary);
}

/* Kurze Meldung */
.cal_toast {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1200;
	max-width: 420px;
	padding: 12px 16px;
	border-radius: var(--radius-m);
	background: var(--surface-card);
	border: 1px solid var(--accent);
	box-shadow: var(--shadow-pop);
	color: var(--text-primary);
	font: var(--text-small);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s, transform .25s;
}
.cal_toast.show {
	opacity: 1;
	transform: none;
}
.cal_toast.warn {
	border-color: var(--warning);
}

/* Einstellungen > Kalender */
.cal_settings {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 760px;
}
.cal_card_head .hint {
	margin-bottom: 0;
}
.cal_card_head {
	margin-bottom: 18px;
	align-items: flex-start;
}
.cal_card_head > div {
	flex: 1 1 260px;
	min-width: 0;
}
.cal_card_head > .button {
	flex-shrink: 0;
}
.cal_accounts {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cal_none {
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-muted);
}
.cal_account_card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	flex-wrap: wrap;
	transition: border-color .15s;
}
.cal_logo {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-primary);
	font: 700 16px/1 var(--font-display);
	flex-shrink: 0;
}
.cal_account_text {
	flex: 1;
	min-width: 180px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cal_account_name {
	font: 600 14px/1.3 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cal_account_state {
	display: flex;
	align-items: center;
	gap: 6px;
	font: 400 12px/1.4 var(--font-body);
	color: var(--text-muted);
}
.cal_account_state .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	flex-shrink: 0;
}
.cal_account_state .dot.off {
	background: var(--text-muted);
}
.cal_account_state .dot.warn {
	background: var(--warning);
}
.cal_account_error {
	font: 400 12px/1.4 var(--font-body);
	color: var(--warning);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 420px;
}
.cal_account_actions {
	display: flex;
	gap: 2px;
}
.cal_account_actions .mini_btn {
	width: 30px;
	height: 30px;
}
.cal_account_actions .mini_btn:hover {
	color: var(--accent);
}
.cal_account_actions .mini_btn.danger:hover,
.cal_account_actions .mini_btn.confirm {
	color: var(--danger);
}
.cal_account_actions .mini_btn.spin svg {
	animation: cal_spin 1s linear infinite;
}
@keyframes cal_spin {
	to { transform: rotate(360deg); }
}
.cal_oauth_message {
	margin: 14px 0 0;
	font: var(--text-small);
	color: var(--warning);
}
.cal_groups {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.cal_group_name {
	margin-bottom: 6px;
	font: 500 11px/1.4 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.cal_group_list {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	overflow: visible;
}
.cal_row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	background: var(--surface-raised);
	position: relative;
}
.cal_row:first-child {
	border-radius: var(--radius-m) var(--radius-m) 0 0;
}
.cal_row:last-child {
	border-radius: 0 0 var(--radius-m) var(--radius-m);
}
.cal_row:only-child {
	border-radius: var(--radius-m);
}
.cal_row + .cal_row {
	border-top: 1px solid var(--border-default);
}
.cal_row_empty {
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-muted);
}
.cal_color_wrap {
	position: relative;
	display: inline-flex;
}
.cal_color_btn {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-s);
	background: var(--surface-raised);
	cursor: pointer;
}
.cal_color_btn .cal_dot {
	width: 14px;
	height: 14px;
}
.cal_palette {
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	display: grid;
	grid-template-columns: repeat(6, 26px);
	gap: 6px;
	padding: 8px;
	background: var(--surface-card);
	border: 1px solid var(--accent);
	border-radius: var(--radius-m);
	box-shadow: var(--glow-border);
	z-index: 60;
}
.cal_swatch {
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	cursor: pointer;
}
.cal_swatch span {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--c);
}
.cal_swatch.active span {
	box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 3.5px var(--c);
}
.cal_row_name {
	flex: 1;
	min-width: 0;
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cal_row_name.editable {
	cursor: text;
}
.cal_row_name.editing {
	overflow: visible;
}
.cal_row_name.saving {
	opacity: .6;
}
.cal_row_name .cal_rename,
.data .cal_row_name .cal_rename {
	width: 100%;
	max-width: 320px;
	height: 28px;
	padding: 0 8px;
	margin: -2px 0;
	font: 500 13px/1.3 var(--font-body);
}
.cal_ro {
	font: 400 11px/1 var(--font-body);
	color: var(--text-muted);
	margin-left: 6px;
}
.cal_std {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--text-muted);
	font: 500 11px/1 var(--font-body);
	white-space: nowrap;
	cursor: pointer;
}
.cal_std:hover {
	color: var(--text-primary);
	text-decoration: none;
}
.cal_std.is_std {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
	color: var(--accent);
	cursor: default;
}

/* Dialog "Kalender verbinden" */
.cal_add_dialog {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cal_provider_list {
	display: grid;
	gap: 10px;
}
.cal_provider_btn {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	cursor: pointer;
	text-align: left;
	color: var(--text-muted);
	transition: border-color .15s, box-shadow .15s;
}
.cal_provider_btn:hover {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
	text-decoration: none;
}
.cal_provider_btn .cal_logo {
	width: 34px;
	height: 34px;
	font-size: 15px;
}
.cal_provider_btn .text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cal_provider_btn .name {
	font: 600 14px/1.3 var(--font-body);
	color: var(--text-primary);
}
.cal_provider_btn .hint {
	font: 400 12px/1.4 var(--font-body);
	color: var(--text-muted);
	margin: 0;
}
.cal_add_head {
	display: flex;
	align-items: center;
	gap: 12px;
}
.cal_add_head .cal_logo {
	width: 34px;
	height: 34px;
	font-size: 15px;
}
.cal_add_head .name {
	font: 600 14px/1.3 var(--font-body);
	color: var(--text-primary);
}
.cal_add_switch {
	margin-left: auto;
	font: 500 12px/1.3 var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
}
.cal_add_switch:hover {
	color: var(--text-primary);
	text-decoration: none;
}
.cal_add_field input {
	width: 100%;
	box-sizing: border-box;
}
.cal_add_hint {
	margin: 0;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
.cal_add_hint a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cal_add_hint a:hover {
	color: var(--accent-hover);
}
#cal_add_state .mail_oauth_box {
	margin-top: 4px;
}

@media (max-width: 770px) {
	body:not(.static) .cal_nav {
		flex-direction: row;
		max-width: none;
		min-width: 0;
		gap: 2px;
	}
	body:not(.static) .cal_nav_account {
		flex-direction: row;
		border-left: none;
	}
	body:not(.static) .cal_nav_name {
		display: none;
	}
	body:not(.static) .cal_grid {
		grid-template-columns: 56px repeat(7, 150px);
		min-width: 1106px;
	}
	/* Kopf und Raster scrollen gemeinsam seitwaerts: der Rumpf wird so breit
	   wie sein Raster, damit er nicht fuer sich allein scrollt */
	body:not(.static) .cal_week_body {
		width: max-content;
		min-width: 100%;
		overflow-x: hidden;
	}
	body:not(.static) .cal_dialog_title,
	body:not(.static) .cal_when_grid,
	body:not(.static) .cal_when_grid2 {
		grid-template-columns: 1fr;
	}
}

/* Editor verlassen mit ungespeicherten Aenderungen */
.docs_leave_dialog p {
	margin: 0 0 18px;
	font: var(--text-body);
	color: var(--text-secondary);
}

/* Ein offenes Zeilenmenue liegt ueber den Auswahlfeldern der Filterzeile:
   die Karte hebt sich, solange das Menue schwebt */
.content-card.list-card:has(.options:hover) {
	position: relative;
	z-index: 150;
}

/* Dasselbe fuer Einstellungskarten: backdrop-filter macht jede Karte zu
   einer eigenen Ebene, die naechste Karte laege sonst ueber dem Menue
   (E-Mail-Vorlagen ueber der Mailkontoverwaltung, 17.10.2026) */
.settings-card:has(.options:hover) {
	position: relative;
	z-index: 150;
}

/* Postfach-Dialog: ermittelte Server als Hinweiszeile, Link zum Ausklappen */
#insert_box .center .mail_servers_toggle {
	margin-right: auto;
}
#insert_box .info .mail_servers_hint {
	color: var(--text-muted);
}

/* Vorschlag der Belegerkennung am Anhang */
.mail_attachment .suggested {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--warning);
	color: var(--warning);
	font: 600 11px/1.3 var(--font-body);
	cursor: pointer;
	white-space: nowrap;
}

/* Hinweis des Mail-Anbieters im Postfach-Dialog (App-Passwort) */
#insert_box .mail_provider_hint .mail_hint_box {
	margin: 0;
	padding: 12px 14px;
	border-radius: var(--radius-m);
	border: 1px solid var(--warning);
	background: rgba(201,138,27,.08);
	font: var(--text-small);
	line-height: 1.5;
	color: var(--text-secondary);
}
#insert_box .mail_provider_hint .mail_hint_box a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}
.mail_list .mail_state a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-all;
}

/* --------------------------------------------------------------------------
   Beleg-Dialog der Buchfuehrung: Kopf mit Buchungskarte, Reiter Dateiupload
   mit Ablageflaeche, Scanner und Dateiliste, Reiter Rechnung mit Auswahl und
   Summenvergleich (js/user.js).
   -------------------------------------------------------------------------- */

/* Meldung im Beleg-Dialog, ersetzt blockierende Fenster */
#receipt_box .receipt_error {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: 400 13px/1.4 var(--font-body);
	color: var(--danger);
}
#receipt_box .receipt_error[hidden] {
	display: none;
}
#receipt_box .receipt_error .icon {
	flex-shrink: 0;
}
/* Falsche Datei: Ablagefeld mit rotem gestricheltem Rahmen */
.receipt_drop.error,
.receipt_drop.error:hover {
	border-color: var(--danger);
}
/* E-Rechnung als Beleg: Code-Symbol mit "XML" statt Vorschaubild */
.receipt_file .thumb.xml {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	color: var(--accent);
}
.receipt_file .thumb.xml b {
	font: 700 8px/1 var(--font-body);
	letter-spacing: .04em;
	color: var(--accent);
}
/* Fruehere Fassungen unter den Dateien, nur lesen */
.receipt_versions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 2px 2px 0;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
.receipt_versions a {
	font: 500 12px var(--font-body);
}
#receipt_box .box {
	width: 600px;
}
#receipt_box .close {
	position: absolute;
	top: 20px;
	right: 20px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
	transition: color .15s;
}
#receipt_box .close:hover {
	color: var(--text-primary);
}
#receipt_box h2 {
	margin: 0;
	padding-right: 36px;
	font: 600 19px/1.3 var(--font-display);
	letter-spacing: -.01em;
	color: var(--text-primary);
}
#receipt_box .subline {
	margin: 4px 0 0;
	font: var(--text-small);
	color: var(--text-muted);
}

/* Die Buchung selbst, aufgebaut wie eine Zeile der Liste */
.receipt_booking {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 18px 0 20px;
	padding: 12px 16px 12px 20px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	overflow: hidden;
}
.receipt_booking:before {
	content: '';
	position: absolute;
	left: 6px;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-radius: 2px;
	background: var(--accent);
}
.receipt_booking.debit:before {
	background: var(--danger);
}
.receipt_booking .who {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.receipt_booking .who .name {
	font: 600 14px/1.3 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.receipt_booking .who .purpose {
	margin-top: 2px;
	font: 400 12px/1.4 var(--font-body);
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.receipt_booking .sum {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.receipt_booking .sum .amount {
	font: 600 17px/1.2 var(--font-display);
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
.receipt_booking.debit .sum .amount {
	color: var(--danger);
}
.receipt_booking .sum .date {
	margin-top: 2px;
	font: 400 12px/1.4 var(--font-body);
	color: var(--text-muted);
}

/* Reiter wie in den uebrigen Dialogen */
#receipt_box .dlg_tabs {
	display: flex;
	gap: 22px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--border-default);
}
#receipt_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;
}
#receipt_box .dlg_tabs .tab:hover {
	color: var(--text-primary);
}
#receipt_box .dlg_tabs .tab.active {
	color: var(--accent);
	font-weight: 600;
	border-bottom-color: var(--accent);
}
#receipt_box .tab_pane[hidden] {
	display: none;
}
#receipt_box .tab_pane {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
#receipt_box .receipt_hint {
	margin: 0;
	font: var(--text-small);
	color: var(--text-muted);
}
#receipt_box .receipt_label {
	margin: 0 0 8px;
	font: 500 12px/1.3 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
#receipt_box .receipt_foot {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
}
#receipt_box .button.disabled {
	opacity: .45;
	cursor: default;
	pointer-events: none;
}
#receipt_box .button.full {
	width: 100%;
	justify-content: center;
}

/* Ablageflaeche fuer Dateien */
.receipt_drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 26px 16px;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-m);
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.receipt_drop:hover,
.receipt_drop.over {
	border-color: var(--accent);
}
.receipt_drop.over {
	box-shadow: var(--glow-border);
}
.receipt_drop.busy {
	opacity: .5;
	pointer-events: none;
}
.receipt_drop .icon {
	color: var(--accent);
}
.receipt_drop .title {
	font: 600 14px/1.3 var(--font-body);
	color: var(--text-primary);
}
.receipt_drop .note {
	font: 400 12px/1.4 var(--font-body);
	color: var(--text-muted);
}
.receipt_or {
	display: flex;
	align-items: center;
	gap: 12px;
}
.receipt_or .line {
	flex: 1;
	height: 1px;
	background: var(--border-default);
}
.receipt_or em {
	font: 400 12px/1 var(--font-body);
	font-style: normal;
	color: var(--text-muted);
}

/* Liste der hinterlegten Dateien */
.receipt_files {
	display: flex;
	flex-direction: column;
}
.receipt_files .receipt_label {
	margin-bottom: 8px;
}
.receipt_file {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
}
.receipt_file + .receipt_file {
	margin-top: 8px;
}
.receipt_file .thumb {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 34px;
	height: 44px;
	border-radius: 4px;
	border: 1px solid var(--border-strong);
	background: #fff;
	overflow: hidden;
}
.receipt_file .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.receipt_file .thumb.empty {
	background: var(--surface-card);
}
.receipt_file .thumb b {
	font: 700 9px/1 var(--font-body);
	color: var(--danger);
}
.receipt_file .thumb .icon {
	color: var(--accent);
}
.receipt_file .meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.receipt_file .meta .name {
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.receipt_file .meta .sub {
	font: 400 11px/1.4 var(--font-body);
	color: var(--text-muted);
}
.receipt_file .mini {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
	transition: color .15s;
}
.receipt_file .receipt_file_open:hover {
	color: var(--accent);
}
.receipt_file .receipt_file_remove:hover {
	color: var(--danger);
}

/* Scanner */
.receipt_scanner {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.receipt_scanner .cam {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: #000;
	overflow: hidden;
}
/* Handykameras liefern Hochformat; ein querer Sucher schnitte den Beleg
   oben und unten ab und wirkte herangezoomt */
@media (orientation: portrait) and (max-width: 700px) {
	.receipt_scanner .cam {
		aspect-ratio: 3 / 4;
		max-height: 60vh;
	}
}
.receipt_scanner .cam video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
}
.receipt_scanner .cam.live video {
	display: block;
}
.receipt_scanner .cam_hint {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 24px;
	text-align: center;
	background: var(--surface-raised);
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-muted);
}
.receipt_scanner .cam_hint .icon {
	color: var(--text-secondary);
}
.receipt_scanner .cam.live .cam_hint {
	display: none;
}
.receipt_scanner .corner {
	position: absolute;
	width: 28px;
	height: 28px;
	opacity: .9;
	pointer-events: none;
}
.receipt_scanner .corner.tl {
	top: 18px;
	left: 18px;
	border-top: 2px solid var(--accent);
	border-left: 2px solid var(--accent);
}
.receipt_scanner .corner.tr {
	top: 18px;
	right: 18px;
	border-top: 2px solid var(--accent);
	border-right: 2px solid var(--accent);
}
.receipt_scanner .corner.bl {
	bottom: 18px;
	left: 18px;
	border-bottom: 2px solid var(--accent);
	border-left: 2px solid var(--accent);
}
.receipt_scanner .corner.br {
	bottom: 18px;
	right: 18px;
	border-bottom: 2px solid var(--accent);
	border-right: 2px solid var(--accent);
}
.receipt_scanner .count {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(0,0,0,.55);
	color: #fff;
	font: 600 11px/1.3 var(--font-body);
}
.receipt_scanner .shot {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 3px solid #fff;
	background: rgba(255,255,255,.25);
	box-shadow: 0 0 0 3px rgba(0,0,0,.35);
	cursor: pointer;
}
.receipt_scanner .shot span {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
}
.receipt_pages .empty {
	margin: 0;
	padding: 16px;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-m);
	text-align: center;
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-muted);
}
.receipt_pages .tiles {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
}
.receipt_pages .tile {
	position: relative;
	flex-shrink: 0;
	width: 84px;
	height: 112px;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-strong);
	background: #fff;
	overflow: hidden;
}
.receipt_pages .tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.receipt_pages .tile .num {
	position: absolute;
	left: 6px;
	bottom: 6px;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(0,0,0,.6);
	color: #fff;
	font: 600 10px/1.4 var(--font-body);
}
.receipt_pages .tile .drop {
	position: absolute;
	top: 4px;
	right: 4px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(0,0,0,.6);
	color: #fff;
	cursor: pointer;
}

/* Reiter Rechnung */
#receipt_box .receipt_search {
	width: 100%;
}
.receipt_bills {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	max-height: 300px;
	overflow-y: auto;
}
.receipt_bill {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	background: var(--surface-raised);
	cursor: pointer;
	/* Formular-Labels laufen in Grossbuchstaben, eine Rechnungszeile nicht */
	text-transform: none;
	letter-spacing: normal;
}
.receipt_bill + .receipt_bill {
	border-top: 1px solid var(--border-default);
}
.receipt_bill.on {
	background: rgba(var(--accent-rgb),.06);
}
.receipt_bill input[type="checkbox"] {
	flex-shrink: 0;
}
.receipt_bill .num {
	flex-shrink: 0;
	font: 600 13px/1.3 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
.receipt_bill.on .num {
	color: var(--accent);
}
.receipt_bill .who {
	flex: 1;
	min-width: 0;
	font: 400 13px/1.3 var(--font-body);
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.receipt_bill .who em {
	font-style: normal;
	color: var(--text-muted);
}
.receipt_bill .date {
	flex-shrink: 0;
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-muted);
}
.receipt_bill .total {
	flex-shrink: 0;
	min-width: 86px;
	text-align: right;
	font: 500 13px/1.3 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
.receipt_bill .total.match {
	color: var(--accent);
}
.receipt_bills .empty {
	margin: 0;
	padding: 20px;
	text-align: center;
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-muted);
}
.receipt_sum {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-secondary);
}
.receipt_sum .icon {
	flex-shrink: 0;
	color: var(--text-muted);
}
.receipt_sum b {
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}
.receipt_sum i {
	font-style: normal;
	color: var(--warning);
}
.receipt_sum.match {
	border-color: var(--accent);
}
.receipt_sum.match .icon {
	color: var(--accent);
}
.receipt_sum.diff {
	border-color: var(--warning);
}
.receipt_sum.diff .icon {
	color: var(--warning);
}

/* Knopf in der Spalte Beleg: nur bei Buchungen ohne Beleg */
.list-view.bank-receipts li p[data-id='receipt'] .receipt_add {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-s);
	color: var(--warning);
	cursor: pointer;
	transition: background .12s;
}
.list-view.bank-receipts li p[data-id='receipt'] .receipt_add:hover {
	background: color-mix(in srgb, var(--warning) 12%, transparent);
}

/* --------------------------------------------------------------------------
   Aufgaben: Boards mit Spalten und Karten. Aufbau wie die Pipelines, nur mit
   Fortschritt und Deadline an der Karte.
   -------------------------------------------------------------------------- */

.task-view .anchor_nav {
	min-width: 180px;
}
.task-search {
	margin-bottom: 14px;
}
.task-search .task_search {
	width: 100%;
	max-width: 320px;
}
.task-board {
	display: flex;
	gap: 12px;
	align-items: stretch;
	height: calc(100vh - 330px);
	min-height: 420px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.task-board::-webkit-scrollbar {
	display: none;
}
.task-board .col {
	position: relative;
	width: 250px;
	min-width: 250px;
	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%;
}
.task-board .col-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 2px 0 6px;
}
.task-board .col-head .title {
	font: 600 13px/1.3 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.task-board .col-head .count {
	flex: 1;
	font: 600 12px/1.3 var(--font-body);
	color: var(--accent);
}
.task-board .col-head .add_card_here {
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
	transition: color .12s;
}
.task-board .col-head .add_card_here:hover {
	color: var(--accent);
}
.task-board .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;
}
.task-board .cards::-webkit-scrollbar {
	display: none;
}
.task-board .cards:empty + .drop-hint {
	display: block;
}
.task-board .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;
}
/* Einfuegelinie beim Ziehen: ein Strich in Akzentfarbe, kein Kasten */
.task-board .sortable-placeholder {
	height: 2px;
	min-height: 2px;
	margin: -4px 2px;
	padding: 0;
	border: none;
	border-radius: 1px;
	background: var(--accent);
	box-shadow: 0 0 8px rgba(var(--accent-rgb),.7);
	overflow: hidden;
}
.task-board .add_card {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 10px;
	border: 1px dashed rgba(var(--secondary-rgb),.25);
	border-radius: var(--radius-m);
	font: 500 12px/1.2 var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
	transition: border-color .12s, color .12s;
}
.task-board .add_card:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.task-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 .12s, box-shadow .12s;
}
.task-card:hover {
	border-color: var(--accent);
	box-shadow: 0 0 12px rgba(var(--accent-rgb),.18);
}
.task-card .title {
	font: 600 13px/1.35 var(--font-body);
	color: var(--text-primary);
}
.task-card .progress {
	display: flex;
	align-items: center;
	gap: 8px;
}
.task-card .progress .bar {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var(--border-default);
	overflow: hidden;
}
.task-card .progress .fill {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--accent-hover), var(--accent));
	transition: width .25s;
}
.task-card .progress .fill.full {
	background: var(--accent);
}
.task-card .progress .pct {
	font: 600 11px/1 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
}
.task-card .progress .pct.full {
	color: var(--accent);
}
.task-card .foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
	font: 500 11px/1 var(--font-body);
	color: var(--text-muted);
}
.task-card .foot .spacer {
	flex: 1;
}
.task-card .deadline,
.task-card .slot {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 20px;
	padding: 0 7px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	color: var(--text-muted);
	white-space: nowrap;
	flex-shrink: 0;
}
/* Kalenderslot neben der Deadline, solange er bevorsteht */
.task-card .slot {
	border-color: rgba(var(--accent-rgb),.4);
	color: var(--accent);
}
.task-card .deadline.overdue {
	border-color: var(--danger);
	color: var(--danger);
	background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.task-card .deadline.today,
.task-card .deadline.tomorrow,
.task-card .deadline.soon {
	border-color: var(--warning);
	color: var(--warning);
	background: color-mix(in srgb, var(--warning) 12%, transparent);
}
.task-card .deadline.done {
	border-color: transparent;
	padding: 0;
	color: var(--text-muted);
}
.task-card .checks,
.task-card .has_text {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

/* Aufgabendialog: Titel, Deadline mit Schnellwahl, Checklisten */
#task_box .box.task_card {
	width: 640px;
	max-width: 100%;
}
/* Der Titel steht in einem h2, und .modal h2 haelt rechts 36px fuer das
   Schliessen-Kreuz frei. Im Aufgabendialog steckt dort aber das Eingabefeld
   und kein Kreuz — ohne diese Zeile bliebe es 36px zu schmal. */
#task_box .task_title_row {
	margin: 0;
	padding-right: 0;
}
#task_box #task_title {
	width: 100%;
	height: 46px;
	padding: 0 12px;
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	font: 600 18px/1.3 var(--font-display);
	letter-spacing: -.01em;
	color: var(--text-primary);
}
#task_box .task_subline {
	margin: 6px 0 4px;
}
#task_box #task_deadline.overdue {
	border-color: var(--danger);
}
#task_box .task_quick {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 8px;
}
#task_box .task_quick .quick {
	height: 24px;
	padding: 0 9px;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	font: 500 11px/1 var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
	transition: border-color .12s, color .12s;
}
#task_box .task_quick .quick:hover {
	border-color: var(--accent);
	color: var(--accent);
}
#task_box .task_quick .quick_label {
	font: 500 11px/1 var(--font-body);
	color: var(--text-muted);
}
#task_box .task_quick .quick_label.overdue {
	color: var(--danger);
}
#task_box .task_quick .quick_label.today,
#task_box .task_quick .quick_label.soon {
	color: var(--warning);
}
/* Im Kalender: Knopf, Slot als Zeile oder der Planer an derselben Stelle */
#task_box .task_slot_head {
	margin: 18px 0 10px;
}
#task_box .task_slot_head .label,
#task_box .slot_label {
	font: 500 12px/1 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
#task_box .slot_label {
	font-size: 11px;
	letter-spacing: .05em;
	margin-right: 6px;
}
#task_box .task_slot {
	margin-bottom: 18px;
}
#task_box .slot_plan {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-m);
	cursor: pointer;
	transition: border-color .12s;
}
#task_box .slot_plan:hover {
	border-color: var(--accent);
	text-decoration: none;
}
#task_box .slot_plan .icon {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	border-radius: var(--radius-s);
	background: rgba(var(--accent-rgb),.1);
	color: var(--accent);
}
#task_box .slot_plan .text,
#task_box .slot_row .text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
#task_box .slot_plan .head {
	font: 600 13px/1.3 var(--font-body);
	color: var(--text-primary);
}
#task_box .slot_plan .sub,
#task_box .slot_row .sub {
	font: 400 12px/1.3 var(--font-body);
	color: var(--text-muted);
}
#task_box .slot_plan .go {
	font: 600 12px/1 var(--font-body);
	color: var(--accent);
	flex-shrink: 0;
}
#task_box .slot_row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px 9px 18px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
}
#task_box .slot_row.past {
	opacity: .6;
}
#task_box .slot_row .stripe {
	position: absolute;
	left: 7px;
	top: 9px;
	bottom: 9px;
	width: 3px;
	border-radius: 2px;
	background: var(--cal);
}
#task_box .slot_row .when {
	font: 600 13px/1.3 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
#task_box .slot_row .sub {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#task_box .slot_row .late {
	color: var(--warning);
}
#task_box .slot_row .actions {
	display: flex;
	gap: 2px;
	opacity: .55;
	transition: opacity .12s;
}
#task_box .slot_row:hover .actions {
	opacity: 1;
}
#task_box .slot_row .slot_edit {
	height: 28px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius-s);
	font: 600 12px/1 var(--font-body);
	color: var(--accent);
	cursor: pointer;
}
#task_box .slot_row .slot_remove {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
}
#task_box .slot_row .slot_remove:hover {
	color: var(--danger);
}
#task_box .slot_planner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--accent);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	box-shadow: var(--glow-border);
}
#task_box .slot_days {
	display: flex;
	align-items: center;
	gap: 4px;
}
#task_box .slot_days .days {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
#task_box .slot_arrow {
	width: 28px;
	height: 52px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
}
#task_box .slot_arrow:hover {
	color: var(--text-primary);
}
#task_box .slot_day {
	position: relative;
	height: 52px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	padding-bottom: 4px;
	box-sizing: border-box;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-s);
	cursor: pointer;
}
#task_box .slot_day:hover {
	text-decoration: none;
	border-color: var(--border-strong);
}
#task_box .slot_day.weekend:not(.on) {
	opacity: .6;
}
#task_box .slot_day.on {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.1);
}
#task_box .slot_day .wd {
	font: 500 11px/1.2 var(--font-body);
	color: var(--text-muted);
}
#task_box .slot_day.late .wd {
	color: var(--warning);
}
#task_box .slot_day .num {
	font: 600 14px/1.2 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
#task_box .slot_day.on .wd,
#task_box .slot_day.on .num {
	color: var(--accent);
}
#task_box .slot_day .load {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 5px;
	height: 2px;
	border-radius: 1px;
	background: var(--border-default);
	overflow: hidden;
}
#task_box .slot_day .load span {
	display: block;
	height: 100%;
	background: var(--text-muted);
	opacity: .7;
}
#task_box .slot_day.on .load span {
	background: var(--accent);
}
#task_box .slot_day .dl {
	position: absolute;
	top: 4px;
	right: 5px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--danger);
}
#task_box .slot_line {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
#task_box .slot_chip {
	height: 28px;
	padding: 0 11px;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	font: 500 12px/1 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
	white-space: nowrap;
	cursor: pointer;
}
#task_box .slot_chip:hover {
	text-decoration: none;
	border-color: var(--accent);
}
#task_box .slot_chip.on {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.1);
	color: var(--accent);
}
#task_box .slot_none {
	font: 400 12px/1.4 var(--font-body);
	color: var(--text-muted);
}
#task_box .slot_grid {
	max-height: 300px;
	overflow-y: auto;
	scrollbar-width: none;
	border-radius: var(--radius-s);
	background: var(--surface-card);
	border: 1px solid var(--border-default);
}
#task_box .slot_grid::-webkit-scrollbar {
	display: none;
}
#task_box .slot_hours {
	position: relative;
	margin: 6px 0;
	cursor: crosshair;
}
#task_box .slot_hours .hour {
	position: absolute;
	left: 0;
	width: 44px;
	text-align: right;
	font: 400 10px/1.2 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
	pointer-events: none;
}
#task_box .slot_hours .line {
	position: absolute;
	left: 52px;
	right: 0;
	height: 1px;
	background: var(--border-default);
	pointer-events: none;
}
#task_box .slot_hours .line.half {
	height: 0;
	background: none;
	border-top: 1px dashed var(--border-default);
	opacity: .5;
}
#task_box .slot_hours .busy {
	position: absolute;
	box-sizing: border-box;
	padding: 3px 6px;
	overflow: hidden;
	border-left: 3px solid var(--cal);
	border-radius: 3px;
	background: color-mix(in srgb, var(--cal) 15%, transparent);
	color: var(--cal);
	pointer-events: none;
}
#task_box .slot_hours .busy .t {
	display: block;
	font: 600 11px/1.3 var(--font-body);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#task_box .slot_hours .busy .tm {
	font: 400 10px/1.3 var(--font-body);
	opacity: .8;
	white-space: nowrap;
}
#task_box .slot_hours .busy > .tm {
	display: block;
}
#task_box .slot_hours .ghost,
#task_box .slot_hours .pick {
	position: absolute;
	left: 56px;
	right: 4px;
	box-sizing: border-box;
	border-radius: 4px;
	padding: 3px 8px;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
}
#task_box .slot_hours .ghost {
	border: 1px dashed var(--accent);
	background: rgba(var(--accent-rgb),.05);
	font: 500 11px/1.3 var(--font-body);
	color: var(--accent);
}
#task_box .slot_hours .pick {
	padding: 4px 8px;
	border: 1.5px solid var(--accent);
	background: rgba(var(--accent-rgb),.2);
	box-shadow: 0 0 12px rgba(var(--accent-rgb),.35);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	font: 600 12px/1.3 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
#task_box .slot_hours .pick.clash {
	border-color: var(--warning);
	background: color-mix(in srgb, var(--warning) 20%, transparent);
	color: var(--warning);
}
#task_box .slot_clash {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 400 12px/1.4 var(--font-body);
	color: var(--warning);
}
#task_box .slot_foot {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 14px;
	border-top: 1px solid var(--border-default);
}
#task_box .slot_cal {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#task_box .slot_foot .buttons {
	display: flex;
	gap: 10px;
}
#task_box .save.busy {
	pointer-events: none;
	min-width: 110px;
	justify-content: center;
}
#task_box .slot_foot .take_slot.disabled {
	opacity: .45;
	cursor: default;
}
/* Picker am Fuss des Planers klappt nach oben auf */
#task_box .cal_picker.up .cal_picker_menu {
	top: auto;
	bottom: calc(100% + 6px);
}
#task_box .slot_cal .cal_picker_btn {
	height: 40px;
}
#task_box .task_lists_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 18px 0 8px;
}
#task_box .task_lists_head .label {
	font: 500 12px/1 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
#task_box .task_lists_head .add_checklist {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 12px/1 var(--font-body);
	color: var(--accent);
	cursor: pointer;
}
#task_box .task_lists {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#task_box .task_lists_empty {
	padding: 14px;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-m);
	text-align: center;
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-muted);
}
#task_box .checklist {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
}
#task_box .checklist .head {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--accent);
}
#task_box .checklist .list_name {
	flex: 1;
	height: 28px;
	padding: 0 6px;
	background: transparent;
	border-color: transparent;
	font: 600 14px/1.3 var(--font-body);
	color: var(--text-primary);
}
#task_box .checklist .list_name:focus {
	background: var(--surface-card);
	border-color: var(--accent);
	box-shadow: none;
}
#task_box .checklist .state {
	font: 500 12px/1 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
	flex-shrink: 0;
}
#task_box .checklist .state.full {
	color: var(--accent);
}
#task_box .checklist .remove_list {
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
	flex-shrink: 0;
	transition: color .12s;
}
#task_box .checklist .remove_list:hover {
	color: var(--danger);
}
#task_box .checklist > .bar {
	height: 4px;
	border-radius: 2px;
	background: var(--border-default);
	overflow: hidden;
}
#task_box .checklist > .bar .fill {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--accent-hover), var(--accent));
	transition: width .25s;
}
#task_box .checklist > .bar .fill.full {
	background: var(--accent);
}
#task_box .checklist .items {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
#task_box .check_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 4px;
	border-radius: var(--radius-s);
}
#task_box .check_item:hover {
	background: rgba(var(--accent-rgb),.05);
}
#task_box .check_item .tick {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 4px;
	border: 1px solid var(--text-muted);
	color: var(--on-accent);
	cursor: pointer;
}
#task_box .check_item .tick.on {
	background: var(--accent);
	border-color: var(--accent);
}
#task_box .check_item .tick.empty {
	border-style: dashed;
	cursor: default;
}
#task_box .check_item .item_text,
#task_box .check_item .new_item {
	flex: 1;
	height: 28px;
	padding: 0 6px;
	background: transparent;
	border-color: transparent;
	font: 400 14px/1.3 var(--font-body);
	color: var(--text-primary);
}
#task_box .check_item .item_text:focus,
#task_box .check_item .new_item:focus {
	background: var(--surface-card);
	border-color: var(--accent);
	box-shadow: none;
}
#task_box .check_item.done .item_text {
	color: var(--text-muted);
	text-decoration: line-through;
}
#task_box .check_item .remove_item {
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	opacity: 0;
	cursor: pointer;
	transition: opacity .12s, color .12s;
}
#task_box .check_item:hover .remove_item {
	opacity: 1;
}
#task_box .check_item .remove_item:hover {
	color: var(--danger);
}
#task_box .check_item .take {
	font: 600 12px/1 var(--font-body);
	color: var(--accent);
	cursor: pointer;
	flex-shrink: 0;
}

/* Dialog "Board verwalten": Spaltenliste mit Griff, Zahl und Entfernen */
#task_box .columns_label {
	display: block;
	margin: 18px 0 8px;
}
#task_box .column_list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#task_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);
}
#task_box .column_row .grip {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	color: var(--text-muted);
	cursor: grab;
}
#task_box .column_row input {
	flex: 1;
	height: 32px;
	padding: 0 8px;
	background: transparent;
	border-color: transparent;
	font: 500 14px/1.3 var(--font-body);
}
#task_box .column_row input:focus {
	background: var(--surface-card);
	border-color: var(--accent);
	box-shadow: none;
}
#task_box .column_row .count {
	font: 500 12px/1.3 var(--font-body);
	color: var(--text-muted);
}
#task_box .column_row .remove_row {
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--danger);
	opacity: 0;
	cursor: pointer;
	transition: opacity .12s;
}
#task_box .column_row:hover .remove_row {
	opacity: 1;
}
#task_box .column_list .sortable-placeholder {
	height: 46px;
	border: 1px dashed var(--accent);
	border-radius: var(--radius-m);
	background: rgba(var(--accent-rgb),.05);
}
#task_box .button.dashed {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px dashed rgba(var(--secondary-rgb),.35);
	color: var(--text-secondary);
	font-size: 13px;
	padding: 11px 12px;
	box-shadow: none;
}
#task_box .button.dashed:hover {
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: none;
}

@media (max-width: 770px) {
	body:not(.static) .task-board {
		height: auto;
		min-height: 0;
	}
	body:not(.static) .task-board .col {
		height: auto;
		min-height: 220px;
	}
	body:not(.static) .task-search .task_search {
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   Dashboard: Widget "Offene Aufgaben"
   -------------------------------------------------------------------------- */

.widget[data-widget='open_tasks'] .widget-row {
	cursor: pointer;
}
.widget[data-widget='open_tasks'] .widget-row .title {
	flex: 1;
	min-width: 0;
	font: 500 13px/1.35 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.widget[data-widget='open_tasks'] .widget-row .mini {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.widget[data-widget='open_tasks'] .widget-row .mini .bar {
	display: block;
	width: 44px;
	height: 4px;
	border-radius: 2px;
	background: var(--border-default);
	overflow: hidden;
}
.widget[data-widget='open_tasks'] .widget-row .mini .fill {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: var(--accent);
}
.widget[data-widget='open_tasks'] .widget-row > .inner {
	gap: 10px;
}
.widget[data-widget='open_tasks'] .widget-row .due {
	flex-shrink: 0;
	white-space: nowrap;
	text-align: right;
	font: 500 12px/1 var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
}
.widget[data-widget='open_tasks'] .widget-row .due.overdue {
	color: var(--danger);
}
.widget[data-widget='open_tasks'] .widget-row .due.today,
.widget[data-widget='open_tasks'] .widget-row .due.tomorrow,
.widget[data-widget='open_tasks'] .widget-row .due.soon {
	color: var(--warning);
}
.widget .widget-empty {
	margin: 0;
	padding: 20px 0;
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Automatisierung: Flowliste und Flow-Editor

   Alle Regeln haengen an #flows_page, #flow_editor, .flow-modal oder der
   Listenklasse .flows. Nichts davon greift in die allgemeine Listenmechanik
   ein, damit die Listen mit Mehrfachauswahl (Rechnungen, Buchfuehrung,
   Vertraege, Aufwaende, Einstellungen) unberuehrt bleiben.
   -------------------------------------------------------------------------- */

/* Wandernde Striche auf den Kanten waehrend eines Laufs */
@keyframes bc-flow-dash {
	to { stroke-dashoffset: -12; }
}
/* Pulsierender Punkt im Knoten, der gerade laeuft */
@keyframes bc-load-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .35; transform: scale(.7); }
}

/* --- Liste --- */

#flows_page .list-filter {
	margin-bottom: 20px;
}
.list-view.flows > li[data-status='active']:before {
	background: var(--accent);
}
.list-view.flows > li[data-status='paused']:before {
	background: var(--warning);
}
.list-view.flows > li[data-status='draft']:before {
	background: var(--gray-400);
}
.list-view.flows > li > p[data-id='name'] a {
	color: var(--text-primary);
	text-decoration: none;
}
.list-view.flows > li > p[data-id='name'] a:hover {
	color: var(--accent);
}
.list-view.flows li p .state.active {
	color: var(--accent);
	background: rgba(var(--accent-rgb),.12);
	border-color: var(--accent);
}
.list-view.flows li p .state.paused {
	color: var(--warning);
	background: rgba(245,185,80,.14);
	border-color: var(--warning);
}
.list-view.flows li p .state.draft {
	color: var(--text-muted);
	background: transparent;
	border-color: var(--border-strong);
}
#flows_page .list-legend-colors .is-active:before {
	background: var(--accent);
}
#flows_page .list-legend-colors .is-paused:before {
	background: var(--warning);
}
#flows_page .list-legend-colors .is-draft:before {
	background: var(--gray-400);
}

/* --- Editor: Geruest --- */

#flow_editor {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: calc(100vh - 140px);
	min-height: 520px;
}
#flow_editor .flow-head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
#flow_editor .flow-spacer {
	flex: 1;
}
#flow_editor .flow-head .button[hidden],
#flow_editor .flow-empty[hidden] {
	display: none;
}
#flow_editor .flow-head .button {
	padding: 8px 14px;
	font: 600 13px/1.2 var(--font-body);
}
#flow_editor .flow-head .button.is-off {
	opacity: .45;
	cursor: default;
}
#flow_editor .flow-name {
	width: auto;
	flex: 0 1 320px;
	min-width: 220px;
	height: auto;
	padding: 4px 8px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-s);
	outline: none;
	color: var(--text-primary);
	font: 600 18px var(--font-display);
	letter-spacing: -.01em;
}
#flow_editor .flow-name:focus {
	border-color: var(--border-strong);
}
#flow_editor .flow-state {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: var(--radius-s);
	border: 1px solid var(--text-muted);
	color: var(--text-muted);
	font: 600 11px/1 var(--font-body);
	white-space: nowrap;
}
#flow_editor .flow-state.active {
	border-color: var(--accent);
	color: var(--accent);
	background: rgba(var(--accent-rgb),.12);
}
#flow_editor .flow-state.paused {
	border-color: var(--warning);
	color: var(--warning);
	background: rgba(245,185,80,.14);
}
#flow_editor .flow-saved {
	font: 400 12px var(--font-body);
	color: var(--text-muted);
	white-space: nowrap;
}
#flow_editor .flow-work {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 16px;
	flex: 1;
	min-height: 0;
}

/* --- Editor: Palette --- */

#flow_editor .flow-palette {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 0;
	padding: 16px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-l);
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
}
#flow_editor .flow-palette-head {
	display: flex;
	align-items: center;
	gap: 10px;
}
#flow_editor .flow-palette-head .tile {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: rgba(var(--accent-rgb),.13);
	border: 1px solid rgba(var(--accent-rgb),.28);
	color: var(--accent);
}
#flow_editor .flow-palette-head .title {
	font: 600 15px var(--font-display);
	letter-spacing: -.01em;
	color: var(--text-primary);
}
#flow_editor .flow-palette-head .count {
	margin-left: auto;
	font: 400 11px var(--font-body);
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
#flow_editor .flow-palette-search {
	position: relative;
	display: flex;
}
#flow_editor .flow-search {
	width: 100%;
	height: 40px;
	flex: 1;
	padding: 0 12px 0 36px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised) var(--icon-search) no-repeat 12px 50%;
	background-size: 15px 15px;
	outline: none;
	color: var(--text-primary);
	font: 400 13px var(--font-body);
}
#flow_editor .flow-search:focus {
	border-color: var(--accent);
}
#flow_editor .flow-groups {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 -4px;
	padding: 0 4px;
}
#flow_editor .flow-groups::-webkit-scrollbar {
	display: none;
}
#flow_editor .flow-group-head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 8px;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--text-muted);
	font: 500 11px var(--font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
}
#flow_editor .flow-group-head .num {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}
#flow_editor .flow-group-head svg {
	transition: transform .15s;
}
#flow_editor .flow-group.open .flow-group-head svg {
	transform: rotate(90deg);
}
#flow_editor .flow-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
#flow_editor .flow-tile {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 60px;
	padding: 9px 10px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	cursor: grab;
	transition: border-color .15s, background .15s;
}
#flow_editor .flow-tile:hover {
	border-color: rgba(var(--krgb),.5);
	background: var(--surface-card);
}
#flow_editor .flow-tile.blocked {
	opacity: .4;
	cursor: not-allowed;
}
#flow_editor .flow-tile .tile {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: rgba(var(--krgb),.13);
	border: 1px solid rgba(var(--krgb),.28);
	color: var(--kc);
}
#flow_editor .flow-tile .names {
	min-width: 0;
}
#flow_editor .flow-tile .name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font: 600 12px/1.25 var(--font-body);
	color: var(--text-primary);
}
#flow_editor .flow-tile .kind {
	display: block;
	margin-top: 2px;
	font: 400 11px var(--font-body);
	color: var(--text-muted);
}

/* --- Editor: Buehne --- */

#flow_editor .flow-stage {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-l);
	background-color: var(--surface-page);
	background-image: radial-gradient(rgba(143,160,155,.22) 1px, transparent 1px);
	background-size: 22px 22px;
	background-position: 40px 40px;
}
#flow_editor .flow-canvas {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 0 0;
}
#flow_editor .flow-edges {
	position: absolute;
	left: 0;
	top: 0;
	overflow: visible;
	pointer-events: none;
}
#flow_editor .flow-edge .hit {
	pointer-events: stroke;
	cursor: pointer;
}
#flow_editor .flow-edge .label {
	font: 600 10px var(--font-body);
	fill: var(--text-muted);
}
#flow_editor .flow-edge.bad .label {
	fill: var(--danger);
}
#flow_editor.running .flow-edge .line {
	stroke-dasharray: 6 6;
	animation: bc-flow-dash 1s linear infinite;
}
#flow_editor .flow-guides line {
	stroke: var(--accent);
	stroke-width: 1;
	stroke-dasharray: 4 4;
	opacity: .7;
}
#flow_editor .flow-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	text-align: center;
	font: 400 14px/1.6 var(--font-body);
	color: var(--text-muted);
}
#flow_editor .flow-hint {
	position: absolute;
	right: 12px;
	bottom: 12px;
	font: 400 11px var(--font-body);
	color: var(--text-muted);
}
#flow_editor .flow-zoom {
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: inline-flex;
	overflow: hidden;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-card);
}
#flow_editor .flow-zoom > a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 32px;
	border-left: 1px solid var(--border-strong);
	cursor: pointer;
	color: var(--text-muted);
}
#flow_editor .flow-zoom > a:first-child {
	border-left: none;
}
#flow_editor .flow-zoom > a:hover {
	color: var(--text-primary);
}
#flow_editor .flow-zoom .zoom-value {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	padding: 0 10px;
	border-left: 1px solid var(--border-strong);
	white-space: nowrap;
	font: 500 11px var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
}
#flow_editor .flow-zoom .zoom-snap {
	width: auto;
	gap: 8px;
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	font: 500 11px var(--font-body);
}
#flow_editor .flow-zoom .zoom-snap.on {
	color: var(--text-primary);
}
#flow_editor .flow-zoom .zoom-snap .switch,
.flow-modal .flow-switch .switch {
	position: relative;
	width: 26px;
	height: 14px;
	flex-shrink: 0;
	border-radius: 7px;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	transition: background .15s, border-color .15s;
}
#flow_editor .flow-zoom .zoom-snap .switch:after,
.flow-modal .flow-switch .switch:after {
	content: '';
	position: absolute;
	top: 1px;
	left: 1px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--text-muted);
	transition: left .15s, background .15s;
}
#flow_editor .flow-zoom .zoom-snap.on .switch,
.flow-modal .flow-switch.on .switch {
	background: var(--accent);
	border-color: var(--accent);
}
#flow_editor .flow-zoom .zoom-snap.on .switch:after,
.flow-modal .flow-switch.on .switch:after {
	left: 13px;
	background: var(--on-accent);
}
#flow_editor .flow-note {
	position: absolute;
	left: 50%;
	bottom: 56px;
	transform: translate(-50%, 8px);
	max-width: 70%;
	padding: 10px 14px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-card);
	box-shadow: var(--shadow-card);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-secondary);
}
#flow_editor .flow-note.show {
	opacity: 1;
	transform: translate(-50%, 0);
}
#flow_editor .flow-note.bad {
	border-color: var(--danger);
	color: var(--danger);
}

/* --- Editor: Knoten --- */

#flow_editor .flow-node {
	position: absolute;
	display: flex;
	flex-direction: column;
	width: 280px;
	height: 152px;
	padding: 14px 16px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-l);
	background: var(--surface-card);
	cursor: grab;
	user-select: none;
	transition: border-color .15s;
}
#flow_editor .flow-node.selected,
#flow_editor .flow-node.running {
	border-color: var(--kc);
}
#flow_editor .flow-node .node-glow {
	position: absolute;
	left: -1px;
	top: -1px;
	overflow: visible;
	pointer-events: none;
}
#flow_editor .flow-node .node-head {
	display: flex;
	align-items: center;
	gap: 11px;
}
#flow_editor .flow-node .node-head .tile {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(var(--krgb),.13);
	border: 1px solid rgba(var(--krgb),.28);
	color: var(--kc);
}
#flow_editor .flow-node .node-head .names {
	flex: 1;
	min-width: 0;
}
#flow_editor .flow-node .node-head .kind {
	display: block;
	font: 400 11px var(--font-body);
	color: var(--text-muted);
}
#flow_editor .flow-node .node-head .name {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font: 600 15px var(--font-display);
	letter-spacing: -.01em;
	color: var(--text-primary);
}
#flow_editor .flow-node .node-head .live {
	display: none;
	align-self: flex-start;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--kc);
}
#flow_editor .flow-node.running .node-head .live {
	display: block;
}
#flow_editor .flow-node .node-sum {
	flex-shrink: 0;
	height: 22px;
	margin-top: 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font: 400 12.5px/22px var(--font-body);
	color: var(--text-secondary);
}
#flow_editor .flow-node .node-foot {
	display: flex;
	align-items: center;
	flex: 1;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--border-default);
}
#flow_editor .flow-node .node-foot .run {
	display: none;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}
#flow_editor .flow-node.running .node-foot .run {
	display: flex;
}
#flow_editor .flow-node.running .node-foot .rest {
	display: none;
}
#flow_editor .flow-node .node-foot .run-time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	height: 22px;
	padding: 0 9px;
	border-radius: var(--radius-s);
	background: rgba(var(--krgb),.14);
	color: var(--kc);
	font: 600 11px var(--font-body);
}
#flow_editor .flow-node .node-foot .run-time:before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--kc);
	animation: bc-load-pulse 1s ease-in-out infinite;
}
#flow_editor .flow-node .node-foot .bar {
	position: relative;
	display: block;
	height: 2px;
	border-radius: 1px;
	background: rgba(var(--krgb),.2);
}
#flow_editor .flow-node .node-foot .bar > span {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 58%;
	border-radius: 1px;
	background: var(--kc);
}
#flow_editor .flow-node .node-foot .ends {
	font: 400 11px var(--font-body);
	color: var(--text-muted);
}
#flow_editor .flow-node .node-foot .pill.soft {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 9px;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-default);
	background: var(--surface-raised);
	font: 400 11px var(--font-body);
	color: var(--text-muted);
}
#flow_editor .flow-node .node-foot .ports {
	display: flex;
	gap: 8px;
}
#flow_editor .flow-node .port-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 22px;
	padding: 0 9px;
	border-radius: var(--radius-s);
	border: 1px solid rgba(var(--accent-rgb),.3);
	background: rgba(var(--accent-rgb),.12);
	color: var(--accent);
	font: 600 10px var(--font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: crosshair;
}
#flow_editor .flow-node .port-pill.bad {
	border-color: rgba(255,69,58,.35);
	background: rgba(255,69,58,.12);
	color: var(--danger);
}
#flow_editor .flow-node .dot {
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	cursor: crosshair;
}
#flow_editor .flow-node .dot.in {
	left: -7px;
	top: 69px;
	background: var(--surface-card);
	border: 2px solid var(--border-strong);
}
#flow_editor .flow-node .dot.out {
	right: -7px;
	background: var(--kc);
	border: 2px solid var(--surface-card);
}
#flow_editor .flow-node .dot.out.bad {
	background: var(--danger);
}

/* --- Daten-Chips (Karte und Popup) --- */

#flow_editor .flow-chip,
.flow-modal .flow-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 20px;
	margin: 0 2px;
	padding: 0 7px;
	border-radius: var(--radius-s);
	border: 1px solid rgba(var(--accent-rgb),.25);
	background: rgba(var(--accent-rgb),.1);
	color: var(--accent);
	font: 500 11px var(--font-mono);
	vertical-align: middle;
}
#flow_editor .flow-chip .dot {
	position: static;
	width: 5px;
	height: 5px;
	border: none;
	border-radius: 50%;
	background: var(--accent);
	cursor: inherit;
}
.flow-modal .flow-chip.pick {
	height: 22px;
	padding: 0 8px;
	border-color: var(--border-strong);
	background: rgba(var(--accent-rgb),.08);
	cursor: copy;
}
.flow-modal .flow-chip.pick:hover {
	border-color: var(--accent);
}

/* --- Dialoge der Automatisierung --- */

.flow-modal .box {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.flow-modal .box_content {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.flow-modal .flow-dialog-head {
	display: flex;
	align-items: center;
	gap: 12px;
}
.flow-modal .flow-dialog-head .tile {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-s);
	background: rgba(var(--krgb),.14);
	color: var(--kc);
}
.flow-modal .flow-dialog-head .names {
	flex: 1;
	min-width: 0;
}
.flow-modal .flow-dialog-head .name {
	display: block;
	font: 600 19px var(--font-display);
	letter-spacing: -.01em;
	color: var(--text-primary);
}
.flow-modal .flow-dialog-head .kind {
	display: block;
	font: var(--text-small);
	color: var(--kc);
}
.flow-modal .flow-dialog-head .kind.muted {
	color: var(--text-muted);
}
.flow-modal .flow-dialog-head .close {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-s);
	cursor: pointer;
	color: var(--text-muted);
}
.flow-modal .flow-dialog-head .close:hover {
	color: var(--text-primary);
}
.flow-modal h2 {
	margin: 0;
}
.flow-modal .moderate {
	margin: -12px 0 0;
}
.flow-modal .flow-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px 20px;
}
.flow-modal .flow-fields.wide {
	grid-template-columns: 1fr;
}
.flow-modal .flow-field {
	min-width: 0;
}
.flow-modal .flow-field.wide {
	grid-column: 1 / -1;
}
.flow-modal .flow-field > label {
	display: block;
	margin-bottom: 6px;
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	color: var(--text-muted);
}
.flow-modal .flow-field input,
.flow-modal .flow-field select {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	outline: none;
	color: var(--text-primary);
	font: 400 14px var(--font-body);
}
.flow-modal .flow-field input:focus,
.flow-modal .flow-field select:focus {
	border-color: var(--accent);
}
.flow-modal .flow-select {
	position: relative;
	display: flex;
}
.flow-modal .flow-select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 36px;
	cursor: pointer;
	background-image: var(--icon-chevron);
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px 14px;
}
.flow-modal .flow-select select.mono {
	font: 400 13px var(--font-mono);
}
.flow-modal .flow-field .editor_box {
	min-height: 150px;
}
.flow-modal .flow-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	cursor: pointer;
	color: var(--text-secondary);
	font: 400 14px var(--font-body);
}
.flow-modal .flow-switch.on {
	color: var(--text-primary);
}
.flow-modal .flow-data {
	padding-top: 14px;
	border-top: 1px solid var(--border-default);
}
.flow-modal .flow-data .title {
	margin-bottom: 8px;
	font: 500 12px var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.flow-modal .flow-data .chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.flow-modal .flow-data .note {
	margin: 6px 0 0;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
.flow-modal .flow-empty-note {
	margin: 0;
	font: 400 13px var(--font-body);
	color: var(--text-muted);
}
.flow-modal .center {
	margin-top: 4px;
	align-items: center;
}
.flow-modal .flow-node-foot-bar {
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 8px;
}
.flow-modal .flow-node-foot-bar .button {
	padding: 9px 12px;
	font: 600 13px/1.2 var(--font-body);
}
.flow-modal .flow-node-foot-bar .flow-spacer {
	flex: 1;
}
.flow-modal .center .button {
	white-space: nowrap;
}
.flow-modal .center .button.bad {
	order: 0;
	color: var(--danger);
	border-color: rgba(255,69,58,.5);
}

/* --- Dialog: Laeufe --- */

.flow-modal .flow-runs {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-height: 60vh;
	overflow-y: auto;
}
.flow-modal .flow-run {
	padding: 12px 14px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
}
.flow-modal .flow-run .head {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
.flow-modal .flow-run .head .state {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 9px;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-strong);
	font: 600 11px/1 var(--font-body);
	color: var(--text-muted);
}
.flow-modal .flow-run .head .state.ok {
	border-color: var(--accent);
	color: var(--accent);
	background: rgba(var(--accent-rgb),.12);
}
.flow-modal .flow-run .head .state.error {
	border-color: var(--danger);
	color: var(--danger);
	background: rgba(255,69,58,.12);
}
.flow-modal .flow-run .head .state.waiting,
.flow-modal .flow-run .head .state.running {
	border-color: var(--warning);
	color: var(--warning);
	background: rgba(245,185,80,.14);
}
.flow-modal .flow-run .head .trigger {
	margin-left: auto;
	font: 400 11px var(--font-mono);
}
.flow-modal .flow-run .message {
	margin: 8px 0 0;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-secondary);
}
.flow-modal .flow-run .steps {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.flow-modal .flow-run .steps li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 4px 0;
	border-top: 1px solid var(--border-default);
	font: 400 12px var(--font-body);
	color: var(--text-secondary);
}
.flow-modal .flow-run .steps li.error {
	color: var(--danger);
}
.flow-modal .flow-run .steps li.skipped {
	color: var(--text-muted);
}
.flow-modal .flow-run .steps .name {
	min-width: 140px;
	font-weight: 500;
	color: var(--text-primary);
}
.flow-modal .flow-run .steps li.error .name {
	color: var(--danger);
}
.flow-modal .flow-run .steps .port {
	min-width: 48px;
	font: 600 10px var(--font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.flow-modal .flow-run .steps .ms {
	min-width: 56px;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
}
.flow-modal .flow-run .steps .msg {
	flex: 1;
	min-width: 0;
	color: var(--text-muted);
}

/* Schmale Fenster: die Palette wandert ueber die Buehne */
@media (max-width: 1179px) {
	body:not(.static) #flow_editor .flow-work {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(320px, 1fr);
	}
	body:not(.static) #flow_editor .flow-palette {
		max-height: 260px;
	}
}

/* ------------------------------------------------------------------
   Adminpanel (/admin, js/admin.js, ui_kits/app/admin.jsx)
   ------------------------------------------------------------------ */
.admin_page {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.admin_page .data {
	margin: 0;
}
.admin_loading,
.admin_empty {
	padding: 24px 4px;
	font: var(--text-small);
	color: var(--text-muted);
}
.admin_empty {
	padding: 28px 20px;
	text-align: center;
}
.admin_tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
	gap: 12px;
}
.admin_tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 14px 16px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-default);
	background: var(--surface-glass);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
}
.admin_tile .lbl {
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
}
.admin_tile .val {
	font: 600 22px var(--font-display);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
.admin_tile .sub {
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
/* Meldungen (AdminHinweis): mit Aktion als Ganzes klickbar */
.admin_attention,
.admin_notices {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.admin_notice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-default);
	background: var(--surface-raised);
	font: 500 13px/1.4 var(--font-body);
	color: var(--text-secondary);
	transition: background .15s, border-color .15s;
}
.admin_notice svg {
	flex-shrink: 0;
}
.admin_notice .txt {
	flex: 1;
	min-width: 0;
}
.admin_notice .act {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	font: 600 12px var(--font-body);
	white-space: nowrap;
	opacity: .85;
}
.admin_notice.clickable {
	cursor: pointer;
}
.admin_notice.clickable:hover {
	border-color: var(--border-strong);
	background: rgba(242,245,244,.04);
}
.admin_notice.clickable:hover .act {
	opacity: 1;
}
.admin_notice.danger {
	border-color: rgba(255,69,58,.45);
	background: rgba(255,69,58,.08);
	color: var(--danger);
}
.admin_notice.danger.clickable:hover {
	border-color: rgba(255,69,58,.7);
	background: rgba(255,69,58,.13);
}
.admin_notice.warning {
	border-color: rgba(245,185,80,.45);
	background: rgba(245,185,80,.08);
	color: var(--warning);
}
.admin_notice.warning.clickable:hover {
	border-color: rgba(245,185,80,.7);
	background: rgba(245,185,80,.13);
}
/* Accounts: Filterzeile, Tabelle, Legende */
.admin_filter {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.admin_filter .spacer {
	flex: 1;
}
.admin_search input {
	width: 280px;
	max-width: 100%;
}
.admin_select {
	position: relative;
	display: inline-grid;
}
.admin_select select {
	height: 40px;
	padding: 0 32px 0 12px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-primary);
	font: 400 14px var(--font-body);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	outline: none;
}
.admin_select select:focus {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.admin_select:after {
	content: '';
	position: absolute;
	right: 12px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	background: var(--icon-chevron) no-repeat center / contain;
	pointer-events: none;
}
.admin_field .admin_select,
.admin_field .admin_select select {
	width: 100%;
}
/* Statusbalken der Accounts (li:before wie in allen Listen) */
.list-view.admin_accounts_list li[data-type='admin_active']:before {
	background: var(--accent);
}
.list-view.admin_accounts_list li[data-type='admin_notice']:before {
	background: var(--warning);
}
.list-view.admin_accounts_list li[data-type='admin_error']:before {
	background: var(--danger);
}
.list-view.admin_accounts_list li[data-type='admin_muted']:before {
	background: var(--gray-400);
}
.list-view.admin_click > li {
	cursor: pointer;
}
.admin_list .muted,
.admin_list_card .muted {
	color: var(--text-muted);
}
.admin_list .warn {
	color: var(--warning);
}
.admin_list .err {
	color: var(--danger);
}
.admin_who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.admin_who .n {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-primary);
	font-weight: 500;
}
.admin_who .f {
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
.admin_who .f.mono {
	font: 400 12px var(--font-mono, ui-monospace, monospace);
}
.admin_shield {
	display: inline-flex;
	color: var(--accent);
}
.admin_tarif {
	font: 600 13px var(--font-body);
	color: var(--text-secondary);
}
.admin_tarif.pro,
.admin_tarif.max {
	color: var(--accent);
}
.admin_badge {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	font: 600 11px var(--font-body);
	white-space: nowrap;
	color: var(--text-muted);
}
.admin_badge.active {
	border-color: rgba(var(--accent-rgb),.5);
	color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
}
.admin_badge.notice {
	border-color: rgba(245,185,80,.5);
	color: var(--warning);
	background: rgba(245,185,80,.08);
}
.admin_badge.error {
	border-color: rgba(255,69,58,.5);
	color: var(--danger);
	background: rgba(255,69,58,.08);
}
/* Betrieb */
.admin_dot_name {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--text-primary);
}
.admin_dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--danger);
}
.admin_dot.ok {
	background: var(--accent);
	box-shadow: 0 0 6px rgba(var(--accent-rgb),.6);
}
.admin_dot.warn {
	background: var(--warning);
}
/* Fehlerprotokoll: Meldung einzeilig mit Auslassungspunkten (D3) */
.admin_errors_list p.admin_ellipsis span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.admin_pre {
	margin: 0;
	max-height: 60vh;
	overflow: auto;
	padding: 12px 14px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-default);
	background: var(--surface-raised);
	font: 400 12px/1.55 var(--font-mono, ui-monospace, monospace);
	color: var(--text-secondary);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
/* Rechtstexte: Zustimmung als Balken */
.admin_progress {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-variant-numeric: tabular-nums;
}
.admin_progress .bar {
	width: 70px;
	height: 4px;
	border-radius: 2px;
	overflow: hidden;
	background: var(--border-default);
}
.admin_progress .bar i {
	display: block;
	height: 100%;
	background: var(--accent);
}
/* Dialoge */
.admin_modal .box {
	max-width: 680px;
}
.admin_dlg {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.admin_dlg_footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 22px;
}
.admin_dlg_footer .button {
	width: auto;
}
.admin_kv_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
	gap: 0 28px;
}
.admin_kv {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-default);
	font: 400 13px var(--font-body);
}
.admin_kv span:first-child {
	color: var(--text-muted);
}
.admin_kv span:last-child {
	color: var(--text-primary);
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.admin_label,
.admin_field > span {
	margin: 0;
	font: 500 12px var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.admin_actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.admin_action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	font: 500 13px var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
}
.admin_action:hover {
	border-color: var(--accent);
	color: var(--text-primary);
	text-decoration: none;
}
.admin_action.danger {
	border-color: rgba(255,69,58,.5);
	color: var(--danger);
}
.admin_action.danger:hover {
	border-color: var(--danger);
	color: var(--danger);
}
.admin_action_title {
	margin: 0;
	font: 600 15px var(--font-body);
	color: var(--text-primary);
}
.admin_action_form,
.admin_form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.admin_field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.admin_field input,
.admin_field textarea {
	width: 100%;
}
.admin_field textarea {
	height: auto;
	padding: 10px 12px;
	resize: vertical;
}
.admin_field small {
	font: 400 12px/1.45 var(--font-body);
	letter-spacing: 0;
	text-transform: none;
	color: var(--text-muted);
}
.admin_text {
	margin: 0;
	font: 400 13px/1.55 var(--font-body);
	color: var(--text-secondary);
}
.admin_error {
	margin: 0;
	font: 400 12px/1.45 var(--font-body);
	color: var(--danger);
}
.admin_dlg_footer .button.disabled {
	opacity: .45;
	cursor: default;
	pointer-events: none;
}
/* Mailvorlagen */
.admin_mails {
	align-items: flex-start;
}
.admin_mail_nav {
	min-width: 200px;
}
.admin_mail_nav .anchor {
	cursor: pointer;
}
.admin_mail_edit {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 760px;
	min-width: 0;
}
.admin_grid2 {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
	gap: 18px 24px;
}
.admin_form_footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
}
.admin_form_footer .button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
}
.admin_form_footer .button.disabled {
	opacity: .45;
	pointer-events: none;
}
.admin_sent {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 13px var(--font-body);
	color: var(--accent);
}
.admin_segments {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.admin_segment {
	display: inline-flex;
	padding: 3px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
}
.admin_segment a {
	padding: 5px 12px;
	border-radius: var(--radius-s);
	font: 600 12px var(--font-body);
	color: var(--text-muted);
	cursor: pointer;
}
.admin_segment a:hover {
	color: var(--text-primary);
	text-decoration: none;
}
.admin_segment a.on {
	background: rgba(var(--accent-rgb),.12);
	color: var(--accent);
}
.admin_preview_wrap {
	display: flex;
	justify-content: center;
	padding: 4px 0;
}
.admin_preview {
	display: block;
	width: 100%;
	max-width: 660px;
	height: 680px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: #EEF2F1;
}
.admin_preview.handy {
	width: 375px;
	height: 720px;
	border-radius: 28px;
}
.admin_preview.dunkel {
	background: #0A0C0B;
}
/* Einstellungen */
.admin_settings .admin_nr.error input {
	border-color: var(--danger);
	box-shadow: 0 0 0 3px rgba(255,69,58,.12);
}
.admin_settings .admin_nr.error label,
.admin_settings .admin_nr_error {
	color: var(--danger);
}
/* Ansicht als Nutzer: gelber Balken oben */
.view_as_bar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 20px 16px 0 4px;
	padding: 8px 14px;
	border-radius: var(--radius-m);
	border: 1px solid rgba(245,185,80,.55);
	background: rgba(245,185,80,.12);
	font: 500 13px/1.4 var(--font-body);
	color: var(--warning);
}
.view_as_bar span {
	flex: 1 1 240px;
}
.view_as_bar .view_as_end {
	flex-shrink: 0;
	padding: 5px 12px;
	border-radius: var(--radius-s);
	border: 1px solid var(--warning);
	font: 600 12px var(--font-body);
	color: var(--warning);
	cursor: pointer;
}
.view_as_bar .view_as_end:hover {
	background: rgba(245,185,80,.12);
	text-decoration: none;
}
@media (max-width: 720px) {
	.admin_mails {
		flex-direction: column;
	}
	.admin_search input {
		width: 100%;
	}
}
.data.admin_list {
	display: block;
	max-width: none;
}
.admin_page > .data,
.admin_page .admin_mail_edit > .data {
	max-width: none;
}

/* ------------------------------------------------------------------
   Einstellungen › Abrechnung (js/billing.js, ui_kits/app/settings.jsx)
   ------------------------------------------------------------------ */
.billing_license {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px;
	border-radius: var(--radius-m);
	border: 1px solid var(--accent);
	background: rgba(var(--accent-rgb),.05);
}
.billing_license.muted {
	border-color: var(--border-strong);
	background: var(--surface-raised);
}
.billing_license_head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.billing_license_head .name {
	font: 600 17px var(--font-display);
	color: var(--text-primary);
}
.billing_license_head .spacer {
	flex: 1;
}
.billing_price {
	font: 500 14px var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
}
.billing_price span {
	font-weight: 400;
	color: var(--text-muted);
}
.billing_line {
	margin: 0;
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-secondary);
}
.billing_line.notice {
	color: var(--warning);
}
.billing_line a {
	font-weight: 600;
	cursor: pointer;
}
/* Leistungen zweispaltig, Haken auf einer Flucht */
.billing_points {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 7px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.billing_points li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-muted);
}
.billing_points li svg {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--accent);
}
.billing_points li.no svg {
	color: var(--text-muted);
}
@media (max-width: 480px) {
	.billing_points {
		grid-template-columns: minmax(0,1fr);
	}
}
.billing_badge {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	font: 600 11px var(--font-body);
	white-space: nowrap;
	color: var(--text-muted);
}
.billing_badge.active {
	border-color: rgba(var(--accent-rgb),.5);
	color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
}
.billing_badge.notice {
	border-color: rgba(245,185,80,.5);
	color: var(--warning);
	background: rgba(245,185,80,.08);
}
.billing_badge.error {
	border-color: rgba(255,69,58,.5);
	color: var(--danger);
	background: rgba(255,69,58,.08);
}
.billing_empty {
	margin: 0;
	font: var(--text-small);
	color: var(--text-muted);
}
.billing_method {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-default);
	background: var(--surface-raised);
}
.billing_method img {
	display: block;
	flex-shrink: 0;
}
.billing_method strong {
	display: block;
	font: 600 14px var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
.billing_method span {
	display: block;
	margin-top: 2px;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
.billing_logos {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
}
.billing_logos img {
	display: block;
}
.billing_alert {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	border: 1px solid rgba(255,69,58,.45);
	background: rgba(255,69,58,.1);
	font: 500 13px/1.4 var(--font-body);
	color: var(--danger);
}
.list-view.billing_invoice_list li[data-type='billing_bezahlt']:before {
	background: var(--accent);
}
.list-view.billing_invoice_list li[data-type='billing_offen']:before {
	background: var(--warning);
}
.list-view.billing_invoice_list li[data-type='billing_fehlgeschlagen']:before {
	background: var(--danger);
}
.list-view.billing_invoice_list li[data-type='billing_erstattet']:before {
	background: var(--gray-400);
}
/* Popup Tarif aendern */
.billing_modal .box {
	max-width: 640px;
}
/* Drei Pakete nebeneinander, auf schmalen Bildschirmen brechen sie um */
.cal_modal.billing_modal.billing_wide .box {
	width: 860px;
	max-width: calc(100vw - 32px);
}
.billing_dlg {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.billing_dlg_footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 22px;
}
.billing_dlg_footer:empty {
	display: none;
}
.billing_dlg_footer .button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
}
.billing_dlg_footer .button.disabled {
	opacity: .45;
	pointer-events: none;
}
/* Zahlweise im Tarif-Popup als Dropdown (div.select aus header.js) */
.billing_iv {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 220px;
	max-width: 100%;
}
.billing_cards {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.billing_card {
	flex: 1 1 220px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
}
.billing_card.on {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.05);
}
.billing_card .name {
	font: 600 16px var(--font-display);
	color: var(--text-primary);
}
.billing_card .price {
	font: 400 13px var(--font-body);
	color: var(--text-muted);
}
.billing_card .price b {
	font: 600 24px var(--font-display);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
.billing_card ul {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.billing_card li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-secondary);
}
.billing_card li svg {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--accent);
}
.billing_card li.no {
	color: var(--text-muted);
}
.billing_card li.no svg {
	color: var(--text-muted);
}
.billing_card .pick {
	display: flex;
	margin-top: auto;
	padding-top: 4px;
}
.billing_card .pick .button {
	width: 100%;
	justify-content: center;
	text-align: center;
}
.billing_text {
	margin: 0;
	font: 400 14px/1.6 var(--font-body);
	color: var(--text-secondary);
}
.billing_small {
	margin: 0;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
.billing_error {
	margin: 0;
	font: 400 12px/1.45 var(--font-body);
	color: var(--danger);
}
/* Rechnungen unter Abrechnung: Leistung nimmt den Rest, Datum, Nummer,
   Betrag und Status behalten ihre Breite */
.billing_invoices .list-legend p[data-id='date'],
.billing_invoices .list-view > li > p[data-id='date'] {
	width: 100px;
	min-width: 100px;
}
.billing_invoices .list-legend p[data-id='number'],
.billing_invoices .list-view > li > p[data-id='number'] {
	width: 130px;
	min-width: 130px;
}
.billing_invoices .list-legend p[data-id='gross'],
.billing_invoices .list-view > li > p[data-id='gross'] {
	width: 100px;
	min-width: 100px;
}
.billing_invoices .list-legend p[data-id='status'],
.billing_invoices .list-view > li > p[data-id='status'] {
	width: 120px;
	min-width: 120px;
}
.billing_invoices .list-legend p[data-id='text'],
.billing_invoices .list-view > li > p[data-id='text'] {
	flex: 1 1 auto;
	width: auto;
	min-width: 180px;
}
.list-view.admin_fin_invoice_list li[data-type='billing_bezahlt']:before {
	background: var(--accent);
}
.list-view.admin_fin_invoice_list li[data-type='billing_offen']:before {
	background: var(--warning);
}
.list-view.admin_fin_invoice_list li[data-type='billing_fehlgeschlagen']:before {
	background: var(--danger);
}
.admin_finance .data.sections .data.admin_list {
	max-width: none;
}

/* Admin-Listen in Karten: feste Breiten fuer kurze Spalten, Text fuellt den Rest */
.list-legend.admin_fin_invoice_list p[data-id='number'],
.list-view.admin_fin_invoice_list > li > p[data-id='number'] {
	width: 130px;
	min-width: 130px;
	flex: 0 0 auto;
}
.list-legend.admin_fin_invoice_list p[data-id='date'],
.list-view.admin_fin_invoice_list > li > p[data-id='date'] {
	width: 100px;
	min-width: 100px;
	flex: 0 0 auto;
}
.list-legend.admin_fin_invoice_list p[data-id='gross'],
.list-view.admin_fin_invoice_list > li > p[data-id='gross'] {
	width: 100px;
	min-width: 100px;
	flex: 0 0 auto;
}
.list-legend.admin_fin_invoice_list p[data-id='status'],
.list-view.admin_fin_invoice_list > li > p[data-id='status'] {
	width: 120px;
	min-width: 120px;
	flex: 0 0 auto;
}
.list-legend.admin_fin_invoice_list p[data-id='konto'],
.list-view.admin_fin_invoice_list > li > p[data-id='konto'] {
	flex: 1 1 0;
	width: auto;
	min-width: 120px;
}
.list-legend.admin_fin_invoice_list p[data-id='text'],
.list-view.admin_fin_invoice_list > li > p[data-id='text'] {
	flex: 1 1 0;
	width: auto;
	min-width: 120px;
}
.list-legend.admin_fin_agent_list p[data-id='konto'],
.list-view.admin_fin_agent_list > li > p[data-id='konto'] {
	flex: 1 1 0;
	width: auto;
	min-width: 120px;
}
.list-legend.admin_fin_agent_list p[data-id='anfragen'],
.list-view.admin_fin_agent_list > li > p[data-id='anfragen'] {
	width: 100px;
	min-width: 100px;
	flex: 0 0 auto;
}
.list-legend.admin_fin_agent_list p[data-id='kosten'],
.list-view.admin_fin_agent_list > li > p[data-id='kosten'] {
	width: 130px;
	min-width: 130px;
	flex: 0 0 auto;
}
.list-legend.admin_fin_agent_list p[data-id='auslastung'],
.list-view.admin_fin_agent_list > li > p[data-id='auslastung'] {
	width: 150px;
	min-width: 150px;
	flex: 0 0 auto;
}
.list-legend.admin_legal_list p[data-id='name'],
.list-view.admin_legal_list > li > p[data-id='name'] {
	flex: 1 1 0;
	width: auto;
	min-width: 120px;
}
.list-legend.admin_legal_list p[data-id='version'],
.list-view.admin_legal_list > li > p[data-id='version'] {
	width: 100px;
	min-width: 100px;
	flex: 0 0 auto;
}
.list-legend.admin_legal_list p[data-id='stand'],
.list-view.admin_legal_list > li > p[data-id='stand'] {
	width: 110px;
	min-width: 110px;
	flex: 0 0 auto;
}
.list-legend.admin_legal_list p[data-id='zustimmung'],
.list-view.admin_legal_list > li > p[data-id='zustimmung'] {
	width: 170px;
	min-width: 170px;
	flex: 0 0 auto;
}
.list-legend.admin_system_list p[data-id='name'],
.list-view.admin_system_list > li > p[data-id='name'] {
	flex: 1 1 0;
	width: auto;
	min-width: 120px;
}
.list-legend.admin_system_list p[data-id='takt'],
.list-view.admin_system_list > li > p[data-id='takt'] {
	width: 100px;
	min-width: 100px;
	flex: 0 0 auto;
}
.list-legend.admin_system_list p[data-id='letzter'],
.list-view.admin_system_list > li > p[data-id='letzter'] {
	width: 140px;
	min-width: 140px;
	flex: 0 0 auto;
}
.list-legend.admin_system_list p[data-id='meldung'],
.list-view.admin_system_list > li > p[data-id='meldung'] {
	flex: 1 1 0;
	width: auto;
	min-width: 120px;
}
.list-legend.admin_errors_list p[data-id='zeit'],
.list-view.admin_errors_list > li > p[data-id='zeit'] {
	width: 140px;
	min-width: 140px;
	flex: 0 0 auto;
}
.list-legend.admin_errors_list p[data-id='bereich'],
.list-view.admin_errors_list > li > p[data-id='bereich'] {
	width: 110px;
	min-width: 110px;
	flex: 0 0 auto;
}
.list-legend.admin_errors_list p[data-id='meldung'],
.list-view.admin_errors_list > li > p[data-id='meldung'] {
	flex: 1 1 0;
	width: auto;
	min-width: 120px;
}
.list-legend.admin_errors_list p[data-id='konto'],
.list-view.admin_errors_list > li > p[data-id='konto'] {
	width: 110px;
	min-width: 110px;
	flex: 0 0 auto;
}
.list-legend.admin_errors_list p[data-id='anzahl'],
.list-view.admin_errors_list > li > p[data-id='anzahl'] {
	width: 80px;
	min-width: 80px;
	flex: 0 0 auto;
}
.list-legend.admin_log_list p[data-id='zeit'],
.list-view.admin_log_list > li > p[data-id='zeit'] {
	width: 140px;
	min-width: 140px;
	flex: 0 0 auto;
}
.list-legend.admin_log_list p[data-id='aktion'],
.list-view.admin_log_list > li > p[data-id='aktion'] {
	flex: 1 1 0;
	width: auto;
	min-width: 120px;
}
.list-legend.admin_log_list p[data-id='konto'],
.list-view.admin_log_list > li > p[data-id='konto'] {
	width: 150px;
	min-width: 150px;
	flex: 0 0 auto;
}
.list-legend.admin_log_list p[data-id='grund'],
.list-view.admin_log_list > li > p[data-id='grund'] {
	flex: 1 1 0;
	width: auto;
	min-width: 120px;
}
/* Seiten ohne Reiter (Dashboard): Titel und Knoepfe mittig auf einer Linie
   mit App-Icon (20-62 px) und Agent-Kreis (21-62 px) */
@media (min-width: 771px) {
	.heading > .page-head:first-child {
		margin-top: -6px;
	}
	.heading > .page-head:first-child .page-title h1 {
		margin-top: 2px;
	}
}

/* ------------------------------------------------------------------
   Admin › Agent (js/admin.js, ui_kits/app/admin-agent.jsx). Alle
   Listenregeln nur auf die eigenen Listenklassen (admin_agent_*).
   ------------------------------------------------------------------ */
.admin_agent {
	align-items: flex-start;
}
.admin_agent_nav .nav_count.danger {
	color: var(--danger);
}
.admin_agent_stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}
.admin_agent .data,
.admin_agent .data.admin_agent_card {
	max-width: none;
}
.admin_card_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.admin_card_head h2 {
	margin: 0;
}
.admin_card_head .button {
	width: auto;
}
.admin_agent_chart {
	height: 170px;
}
.admin_agent_chart .chart {
	height: 100%;
}
.admin_agent .mono {
	font: 500 13px var(--font-mono, ui-monospace, monospace);
}
.admin_agent .mono.sel {
	color: var(--accent);
	font-weight: 600;
}
.admin_agent .ag_session_link {
	font: 500 13px var(--font-mono, ui-monospace, monospace);
	color: var(--accent);
	cursor: pointer;
	text-decoration: none;
}
.admin_agent .ag_session_link:hover {
	text-decoration: underline;
}
.admin_agent .ag_flag {
	display: inline-flex;
	color: var(--warning);
}
.ag_session_bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	font: 500 13px var(--font-body);
	color: var(--text-secondary);
}
.ag_session_bar b {
	color: var(--text-primary);
}
.ag_session_bar .spacer {
	flex: 1;
}
.ag_session_bar .ag_session_clear {
	font: 600 12px var(--font-body);
	cursor: pointer;
}
.ag_session_bar_wrap:empty {
	display: none;
}

/* Statusbalken: grau unbewertet, gruen Daumen hoch, rot Daumen runter */
.list-view.admin_agent_msgs_list li[data-type='agent_none']:before,
.list-view.admin_agent_sessions_list li[data-type='agent_none']:before,
.list-view.admin_agent_tests_list li[data-type='agent_none']:before,
.list-view.admin_agent_prompts_list li[data-type='agent_none']:before {
	background: var(--gray-400);
}
.list-view.admin_agent_msgs_list li[data-type='agent_up']:before,
.list-view.admin_agent_tests_list li[data-type='agent_up']:before,
.list-view.admin_agent_prompts_list li[data-type='agent_up']:before {
	background: var(--accent);
}
.list-view.admin_agent_msgs_list li[data-type='agent_down']:before,
.list-view.admin_agent_sessions_list li[data-type='agent_down']:before,
.list-view.admin_agent_tests_list li[data-type='agent_down']:before {
	background: var(--danger);
}

/* Spaltenbreiten der Nachrichten: Frage und Antwort fuellen den Rest */
.list-legend.admin_agent_msgs_list p:not([data-id='select']):not(.table-options),
.list-view.admin_agent_msgs_list > li > p:not([data-id='select']):not(.table-options) {
	flex: 0 0 auto;
}
.list-legend.admin_agent_msgs_list p[data-id='session'],
.list-view.admin_agent_msgs_list > li > p[data-id='session'] { width: 90px; min-width: 90px; }
.list-legend.admin_agent_msgs_list p[data-id='frage'],
.list-view.admin_agent_msgs_list > li > p[data-id='frage'] { flex: 1 1 0; width: auto; min-width: 220px; }
.list-legend.admin_agent_msgs_list p[data-id='antwort'],
.list-view.admin_agent_msgs_list > li > p[data-id='antwort'] { flex: 1.25 1 0; width: auto; min-width: 260px; }
.list-legend.admin_agent_msgs_list p[data-id='status'],
.list-view.admin_agent_msgs_list > li > p[data-id='status'] { width: 100px; min-width: 100px; }
.list-legend.admin_agent_msgs_list p[data-id='zeit'],
.list-view.admin_agent_msgs_list > li > p[data-id='zeit'] { width: 140px; min-width: 140px; }
.list-legend.admin_agent_msgs_list p[data-id='konto'],
.list-view.admin_agent_msgs_list > li > p[data-id='konto'] { width: 150px; min-width: 150px; }
.list-legend.admin_agent_msgs_list p[data-id='dauer'],
.list-view.admin_agent_msgs_list > li > p[data-id='dauer'] { width: 80px; min-width: 80px; }
.list-legend.admin_agent_msgs_list p[data-id='kosten'],
.list-view.admin_agent_msgs_list > li > p[data-id='kosten'] { width: 100px; min-width: 100px; }
.list-legend.admin_agent_msgs_list p[data-id='fehler'],
.list-view.admin_agent_msgs_list > li > p[data-id='fehler'] { width: 150px; min-width: 150px; }
.list-legend.admin_agent_msgs_list p[data-id='testfall'],
.list-view.admin_agent_msgs_list > li > p[data-id='testfall'] { width: 80px; min-width: 80px; }
.list-view.admin_agent_msgs_list > li > p[data-id='antwort'] {
	color: var(--text-primary);
}

/* Frage und Antwort einzeilig mit …, mit "Texte in voller Laenge" mehrzeilig */
.admin_agent .list-view > li > p.ag_txt {
	overflow: hidden;
}
.admin_agent .ag_text {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.admin_agent_stack.voll .list-view.admin_agent_msgs_list > li {
	height: auto;
	min-height: 52px;
	align-items: flex-start;
	padding-top: 12px;
	padding-bottom: 12px;
}
.admin_agent_stack.voll .list-view.admin_agent_msgs_list > li > p {
	height: auto;
	white-space: normal;
}
.admin_agent_stack.voll .admin_agent_msgs_list .ag_text {
	white-space: pre-wrap;
	line-height: 1.55;
}
.admin_agent_msgs_list .hidden_menu,
.admin_agent_sessions_list .hidden_menu,
.admin_agent_prompts_list .hidden_menu {
	min-width: 260px;
}

/* Sessions, Testfaelle, Versionen */
.list-legend.admin_agent_sessions_list p:not([data-id='select']):not(.table-options),
.list-view.admin_agent_sessions_list > li > p:not([data-id='select']):not(.table-options) {
	flex: 0 0 auto;
	width: 120px;
	min-width: 120px;
}
.list-legend.admin_agent_sessions_list p[data-id='konto'],
.list-view.admin_agent_sessions_list > li > p[data-id='konto'] { flex: 1 1 0; width: auto; min-width: 160px; }
.list-legend.admin_agent_sessions_list p[data-id='beginn'],
.list-view.admin_agent_sessions_list > li > p[data-id='beginn'] { width: 150px; min-width: 150px; }
.list-legend.admin_agent_tests_list p:not([data-id='select']):not(.table-options),
.list-view.admin_agent_tests_list > li > p:not([data-id='select']):not(.table-options) {
	flex: 0 0 auto;
	width: 100px;
	min-width: 100px;
}
.list-legend.admin_agent_tests_list p[data-id='konto'],
.list-view.admin_agent_tests_list > li > p[data-id='konto'] { width: 150px; min-width: 150px; }
.list-legend.admin_agent_tests_list p[data-id='frage'],
.list-view.admin_agent_tests_list > li > p[data-id='frage'],
.list-legend.admin_agent_tests_list p[data-id='antwort'],
.list-view.admin_agent_tests_list > li > p[data-id='antwort'] { flex: 1 1 0; width: auto; min-width: 160px; }
.list-legend.admin_agent_prompts_list p:not([data-id='select']):not(.table-options),
.list-view.admin_agent_prompts_list > li > p:not([data-id='select']):not(.table-options) {
	flex: 1 1 0;
	width: auto;
	min-width: 100px;
}
.ag_prompt_text {
	width: 100%;
	min-height: 260px;
	padding: 12px 14px;
	resize: vertical;
	font: 400 13px/1.6 var(--font-mono, ui-monospace, monospace);
}
.ag_diff:empty {
	display: none;
}
.ag_diff {
	margin-top: 14px;
}
.ag_diff_lines {
	border: 1px solid var(--border-default);
	border-radius: var(--radius-m);
	overflow: hidden;
	font: 400 13px/1.6 var(--font-mono, ui-monospace, monospace);
	color: var(--text-secondary);
}
.ag_diff_lines > div {
	display: flex;
	gap: 10px;
	padding: 2px 12px;
}
.ag_diff_lines .sign {
	width: 10px;
	flex-shrink: 0;
}
.ag_diff_lines .line {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.ag_diff_lines .add {
	background: rgba(0,208,155,.08);
	color: var(--accent);
}
.ag_diff_lines .del {
	background: rgba(255,69,58,.08);
	color: var(--danger);
}

/* Detail einer Nachricht (780 px) */
.cal_modal.admin_agent_modal .box {
	width: 780px;
	max-width: calc(100vw - 32px);
}
.ag_label,
.ag_blase .lbl {
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
}
.ag_label {
	display: block;
	margin-bottom: 8px;
}
.ag_hint {
	margin: 0;
	font: 400 13px var(--font-body);
	color: var(--text-muted);
}
.ag_blase {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.ag_blase.agent {
	align-items: flex-start;
}
.ag_blase.agent .lbl {
	color: var(--accent);
}
.ag_blase .txt {
	max-width: 92%;
	padding: 10px 14px;
	border-radius: var(--radius-m);
	border: 1px solid rgba(0,208,155,.3);
	background: rgba(0,208,155,.07);
	font: 400 14px/1.6 var(--font-body);
	color: var(--text-secondary);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.ag_blase.agent .txt {
	border-color: var(--border-default);
	background: var(--surface-raised);
}
.ag_bewertung {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-default);
	background: var(--surface-raised);
	font: 500 13px/1.45 var(--font-body);
	color: var(--gray-400);
}
.ag_bewertung.up {
	border-color: rgba(0,208,155,.45);
	background: rgba(0,208,155,.06);
	color: var(--accent);
}
.ag_bewertung.down {
	border-color: rgba(255,69,58,.45);
	background: rgba(255,69,58,.08);
	color: var(--danger);
}
.ag_bewertung .kommentar {
	color: var(--text-secondary);
}
.ag_daumen {
	display: inline-flex;
	flex-shrink: 0;
}
.ag_daumen.down svg {
	transform: scaleY(-1);
}
.ag_daumen_leer {
	width: 14px;
	flex-shrink: 0;
}
.ag_tools {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ag_tool {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-default);
	background: var(--surface-raised);
}
.ag_tool.error {
	border-color: rgba(255,69,58,.45);
}
.ag_tool .head {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-muted);
}
.ag_tool .name {
	font: 600 13px var(--font-mono, ui-monospace, monospace);
	color: var(--text-primary);
}
.ag_tool .spacer {
	flex: 1;
}
.ag_tool .dauer {
	font: 400 12px var(--font-body);
}
.ag_tool code {
	font: 400 12px/1.5 var(--font-mono, ui-monospace, monospace);
	color: var(--text-secondary);
	overflow-wrap: anywhere;
	white-space: pre-wrap;
	max-height: 160px;
	overflow: auto;
}
.ag_tool .res {
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
	overflow-wrap: anywhere;
	max-height: 120px;
	overflow: auto;
}
.ag_tool.error .res {
	color: var(--danger);
}
.ag_dlg_test {
	display: flex;
	align-items: center;
	padding-top: 24px;
}
.admin_agent_modal .ag_dlg_session {
	margin-right: auto;
	align-self: center;
	font: 600 13px var(--font-body);
	cursor: pointer;
}
.admin_agent .err {
	color: var(--danger);
}
.admin_agent .muted {
	color: var(--text-muted);
}

/* Grund zum Daumen runter unter der Antwort (js/agent.js, agent_rate_note) */
aside.agent .msg .rate_note {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin-top: 6px;
}
aside.agent .msg .rate_note input {
	flex: 1;
	min-width: 0;
	height: 30px;
	padding: 0 10px;
	box-sizing: border-box;
	font: 400 12px var(--font-body);
	border-radius: var(--radius-s);
}
aside.agent .msg .rate_note .rate_send {
	font: 600 12px var(--font-body);
	color: var(--accent);
	cursor: pointer;
	white-space: nowrap;
}
aside.agent .msg .rate_note.sending {
	opacity: .5;
	pointer-events: none;
}
aside.agent .msg .rate_note .rate_thanks {
	font: 400 11px var(--font-body);
	color: var(--text-muted);
}

/* Live-Aktualisierung (js/live.js) */
/* Pipeline: die Karte gleitet als Geist in die neue Spalte */
.pipe-card.live_ghost {
	position: absolute;
	margin: 0;
	pointer-events: none;
	border-color: rgba(var(--accent-rgb), .55);
	box-shadow: 0 18px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--accent-rgb), .25), 0 0 28px rgba(var(--accent-rgb), .22);
	will-change: transform, opacity, filter;
}
.pipe-card.live_arriving {
	opacity: 0;
}
.pipe-card.live_landed {
	animation: live_landed 1.6s ease-out;
}
@keyframes live_landed {
	0%   { opacity: .4; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .7), 0 0 26px rgba(var(--accent-rgb), .35); }
	25%  { opacity: 1; }
	100% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0), 0 0 0 rgba(var(--accent-rgb), 0); }
}
/* Neue und geaenderte Zeilen und Karten leuchten kurz auf */
.live_new,
.live_changed {
	animation: live_flash 2.2s ease-out;
}
.live_new {
	animation-name: live_flash_new;
}
@keyframes live_flash {
	0%   { background-color: rgba(var(--accent-rgb), .14); }
	100% { background-color: transparent; }
}
@keyframes live_flash_new {
	0%   { background-color: rgba(var(--accent-rgb), .18); opacity: 0; }
	15%  { opacity: 1; }
	100% { background-color: transparent; }
}
.pipe-card.live_new,
.pipe-card.live_changed {
	animation-name: live_card_flash;
}
@keyframes live_card_flash {
	0%   { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .7), 0 0 22px rgba(var(--accent-rgb), .3); }
	100% { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0), 0 0 0 rgba(var(--accent-rgb), 0); }
}
/* Hinweis, solange ein Dialog offen ist und die Aktualisierung wartet */
.live_hint {
	position: fixed;
	left: 50%;
	top: 18px;
	transform: translate(-50%, -12px);
	z-index: 1200;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 14px;
	border-radius: var(--radius-m);
	background: var(--popover-bg);
	border: 1px solid var(--border-default);
	box-shadow: 0 12px 32px rgba(0,0,0,.35);
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	opacity: 0;
	transition: opacity .25s, transform .25s;
}
.live_hint.show {
	opacity: 1;
	transform: translate(-50%, 0);
}
.live_hint .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 10px rgba(var(--accent-rgb), .6);
}
.live_hint .button {
	padding: 6px 12px;
}
@media (prefers-reduced-motion: reduce) {
	.live_new, .live_changed, .pipe-card.live_landed { animation: none; }
}
.live_ghost_clip {
	position: fixed;
	z-index: 1100;
	overflow: hidden;
	pointer-events: none;
}
/* Wiederkehrende Aufwaende: Zahlungsart fest gewaehlt statt nach SEPA-Mandat */
.recurring .pay_fixed {
	margin-left: 4px;
	padding: 1px 6px;
	border-radius: 8px;
	border: 1px solid var(--border-default);
	font: 500 10px/1.4 var(--font-body);
	color: var(--text-muted);
	vertical-align: 1px;
}

/* Bill: Marke von /clear und /compact (row.agent_message.html) */
aside.agent .msg.context {
	display: block;
	margin: 6px 0;
}
aside.agent .msg.context .context_line {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 500 11px/1.4 var(--font-body);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}
aside.agent .msg.context .context_line::before,
aside.agent .msg.context .context_line::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border-default);
}
aside.agent .msg.context .context_summary {
	margin-top: 6px;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-secondary);
	text-align: center;
}
aside.agent .msg.context .context_summary summary {
	cursor: pointer;
	color: var(--text-muted);
}
aside.agent .msg.context .context_summary .text {
	margin-top: 6px;
	text-align: left;
}

/* Bill: Hinweis bei behaupteter, aber nicht ausgefuehrter Aenderung */
aside.agent .msg .claim_warning {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-top: 10px;
	padding: 8px 10px;
	border-radius: var(--radius-s);
	border: 1px solid rgba(242,109,109,.45);
	background: rgba(242,109,109,.08);
	font: 500 12px/1.45 var(--font-body);
	color: var(--text-primary);
}
aside.agent .msg .claim_warning .icon {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--danger);
}

/* Buchfuehrung, Spalte Beleg (row.bank_receipt.html): Haekchen fuer Beleg
   zugeordnet und "Kein Beleg notwendig", Wolke mit Haekchen fuer Datev */
.list-view.bank-receipts li .receipt_state {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	color: var(--accent);
	vertical-align: middle;
}
.list-view.bank-receipts li .receipt_state .sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.list-view.bank-receipts li p[data-id='receipt'] .none {
	color: var(--text-muted);
}
/* Kein Beleg notwendig: grauer Statusbalken (Legende "Ohne Beleg-Pflicht") */
.list-view.bank-receipts li[data-no-receipt='yes']:before {
	background: var(--gray-400);
}
/* Beleg-Dialog, Reiter Sonstiges: Kein Beleg notwendig (js/user.js receipt_other_html) */
#receipt_box .receipt_none {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 4px 0 16px;
	padding: 14px 16px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-default);
	background: var(--surface-raised);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
#receipt_box .receipt_none.on {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb), .08);
}
#receipt_box .receipt_none .text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
#receipt_box .receipt_none .text b {
	font: 600 14px/1.3 var(--font-body);
	color: var(--text-primary);
}
#receipt_box .receipt_none .text span {
	font: 400 12px/1.4 var(--font-body);
	color: var(--text-muted);
}
#receipt_box .receipt_none .toggle {
	position: relative;
	flex-shrink: 0;
	width: 38px;
	height: 22px;
}
#receipt_box .receipt_none .toggle input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}
#receipt_box .receipt_none .toggle .track {
	position: absolute;
	inset: 0;
	border-radius: 11px;
	background: var(--border-strong);
	transition: background .15s;
	pointer-events: none;
}
#receipt_box .receipt_none .toggle .track:after {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform .15s;
}
#receipt_box .receipt_none .toggle input:checked + .track {
	background: var(--accent);
}
#receipt_box .receipt_none .toggle input:checked + .track:after {
	transform: translateX(16px);
}
#receipt_box .receipt_reason {
	width: 100%;
}
#receipt_box .receipt_reasons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
#receipt_box .receipt_reasons .chip {
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid var(--border-default);
	background: var(--surface-raised);
	font: 500 12px/1.3 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
#receipt_box .receipt_reasons .chip:hover {
	color: var(--text-primary);
}
#receipt_box .receipt_reasons .chip.active {
	border-color: var(--accent);
	color: var(--accent);
}
#receipt_box .receipt_note {
	margin: 10px 0 0;
	font: 400 12px/1.45 var(--font-body);
	color: var(--text-muted);
}

/* Testsystem (dev.billcreator, Twig-Global testsystem): fixierter roter Balken oben */
.testsystem_bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #D63B3B;
	color: #fff;
	font: 700 11px/1 "Instrument Sans", system-ui, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	pointer-events: none;
}
/* Testsystem: Platz fuer den Balken, alles oben Fixierte rueckt um die
   Balkenhoehe nach unten, volle Hoehen werden entsprechend kuerzer */
body.testsystem {
	--testbar: 22px;
	padding-top: var(--testbar);
}
body.testsystem aside.nav {
	top: var(--testbar);
	height: calc(100% - var(--testbar));
}
body.testsystem aside.agent {
	top: var(--testbar);
}
/* Das Panel liegt relativ in der Spalte: nur kuerzer, nicht noch einmal
   nach unten (sonst steht Bill offen 22 px tiefer als eingeklappt) */
body.testsystem aside.agent,
body.testsystem aside.agent .agent_panel {
	height: calc(100vh - var(--testbar));
	height: calc(100dvh - var(--testbar));
}
body.testsystem .page > header {
	top: var(--testbar);
}
body.testsystem .anchor_nav {
	top: calc(20px + var(--testbar));
}
body.testsystem .legal_nav {
	top: calc(24px + var(--testbar));
}
body.testsystem .live_hint {
	top: calc(18px + var(--testbar));
}
@media (max-width: 770px) {
	/* Auf dem Handy ist die Leiste unten, der Balken oben betrifft sie nicht */
	body.testsystem:not(.static) aside.nav {
		top: auto;
		height: auto;
	}
	body.testsystem:not(.static) .agent_fab {
		top: calc(24px + var(--testbar) + env(safe-area-inset-top, 0px));
	}
	body.testsystem:not(.static) .mail_preview_card {
		top: var(--testbar);
	}
}

/* Rechnungen: an Datev uebermittelt, hinter Nummer und Schloss (Vorlage invoices.jsx, DatevMark) */
/* Mitte der Wolke auf der Mitte des Schlosses: die Wolke fuellt ihr Feld
   nur unten (y 7,5 bis 19,5 von 24), mit -3px laege sie 1 px tiefer */
.list-view.bills .datev_mark {
	display: inline-flex;
	margin-left: 6px;
	vertical-align: -2px;
	color: var(--accent);
	cursor: help;
}
.list-view > li > [data-id] > .lock_mark .icon {
	stroke-width: 1.9;
}
.list-view.bills .datev_mark .icon {
	stroke-width: 1.7;
}

/* Aufgaben: Menue an der Karte (js/tasks.js, task_menu_open; Vorlage tasks.jsx) */
.task-board .task-card {
	position: relative;
}
.task-board .task-card .title {
	padding-right: 18px;
}
.task-board .task-card .card_menu_btn {
	position: absolute;
	top: 6px;
	right: 4px;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	opacity: 0;
	cursor: pointer;
	transition: opacity .12s, color .12s;
}
.task-board .task-card:hover .card_menu_btn,
.task-board .task-card.menu-open .card_menu_btn {
	opacity: 1;
}
.task-board .task-card .card_menu_btn:hover {
	color: var(--text-primary);
}
.task-board .task-card.menu-open .card_menu_btn {
	color: var(--accent);
}
.task-board .task-card.menu-open {
	border-color: var(--accent);
}
@media (hover: none) {
	.task-board .task-card .card_menu_btn {
		opacity: 1;
	}
}
body > .task_menu {
	position: fixed;
	z-index: 1200;
	width: 200px;
	padding: 6px;
	box-sizing: border-box;
	border-radius: var(--radius-m);
	background: var(--surface-card);
	border: 1px solid var(--accent);
	box-shadow: var(--glow-border);
}
body > .task_menu .task_menu_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--radius-s);
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-primary);
	cursor: pointer;
}
body > .task_menu .task_menu_item:hover {
	background: var(--surface-raised);
}
body > .task_menu .task_menu_item .icon {
	color: var(--text-muted);
}
body > .task_menu .task_menu_item.danger,
body > .task_menu .task_menu_item.danger .icon {
	color: var(--danger);
}
body > .task_menu .task_menu_item.danger:hover {
	background: rgba(242,109,109,.1);
}

/* Rechnungen: Nummer, Schloss und Datev-Wolke brauchen mehr Platz als 72 px */
.list-card .list-view.bills li [data-id='num'],
.list-card:has(.list-view.bills) .list-legend p[data-id='num'] {
	flex: 0 0 104px;
	width: 104px;
	min-width: 104px;
	white-space: nowrap;
}

/* Dateien im Chat mit Bill (ui_kits/app/agent.jsx, js/agent.js agent_files_*) */
aside.agent .attach_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 .attach_agent:hover {
	color: var(--text-primary);
}
aside.agent .attach_agent.has {
	color: var(--accent);
}
aside.agent .agent_files {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin: -2px -4px 8px;
	padding: 2px 4px 4px;
	scrollbar-width: thin;
}
/* Ohne Anhaenge keine Reihe: display flex hob hidden auf, das Textfeld rutschte 12 px nach unten */
aside.agent .agent_files[hidden] {
	display: none;
}
aside.agent .file_card {
	position: relative;
	flex: 0 0 176px;
	width: 176px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 22px 6px 6px;
	border-radius: var(--radius-s);
	background: var(--surface-raised);
	border: 1px solid var(--border-default);
	overflow: hidden;
}
aside.agent .file_card .preview {
	flex: 0 0 32px;
	width: 32px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 4px;
	overflow: hidden;
}
aside.agent .file_card .preview.image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
aside.agent .file_card .info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
aside.agent .file_card .name {
	font: 500 12px/1.3 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
aside.agent .file_card .size {
	font: 400 11px/1.3 var(--font-body);
	color: var(--text-muted);
}
aside.agent .file_card .file_remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 16px;
	height: 16px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--text-muted);
	cursor: pointer;
}
aside.agent .file_card .file_remove:hover {
	color: var(--text-primary);
	background: var(--surface-glass);
}
aside.agent .file_card .bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	background: var(--accent);
	transition: width .2s;
}
aside.agent .composer_box:has(.file_card.loading) .send_agent {
	opacity: .4;
	pointer-events: none;
}
/* Dokumentzeichen mit Typkuerzel: PDF rot, Tabellen gruen, Daten gelb */
.file_mark {
	--w: 26px;
	--tone: var(--text-muted);
	position: relative;
	display: inline-block;
	flex: 0 0 var(--w);
	width: var(--w);
	height: calc(var(--w) * 1.23);
	border-radius: 3px;
	border: 1.5px solid var(--tone);
	clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%);
	background: color-mix(in srgb, var(--tone) 10%, transparent);
}
.file_mark:before {
	content: '';
	position: absolute;
	top: -1.5px;
	right: -1.5px;
	width: 34%;
	height: 28%;
	background: color-mix(in srgb, var(--tone) 45%, transparent);
	border-bottom-left-radius: 2px;
}
.file_mark span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14%;
	text-align: center;
	font: 700 calc(var(--w) * .27)/1 var(--font-body);
	letter-spacing: -.02em;
	color: var(--tone);
}
.file_mark.pdf { --tone: var(--danger); }
.file_mark.table { --tone: var(--success); }
.file_mark.data { --tone: var(--warning); }
/* Fehler beim Anhaengen ueber dem Eingabefeld */
aside.agent .agent_file_error {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 8px;
	font: 400 12px/1.45 var(--font-body);
	color: var(--danger);
}
aside.agent .agent_file_error[hidden] {
	display: none;
}
aside.agent .agent_file_error .text {
	flex: 1;
}
aside.agent .agent_file_error .file_error_ok {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--danger);
	cursor: pointer;
}
/* Ablageflaeche beim Ziehen */
aside.agent .agent_drop {
	position: absolute;
	inset: 10px;
	z-index: 20;
	display: grid;
	place-items: center;
	border-radius: var(--radius-l);
	border: 1.5px dashed var(--accent);
	box-shadow: var(--glow-border);
	background: rgba(6, 10, 12, .62);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	pointer-events: none;
}
aside.agent .agent_drop[hidden] {
	display: none;
}
aside.agent .agent_drop .drop_inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 260px;
	text-align: center;
	color: var(--accent);
}
aside.agent .agent_drop .drop_title {
	font: 600 14px/1.3 var(--font-body);
	color: #fff;
}
aside.agent .agent_drop .drop_text {
	font: 400 12px/1.45 var(--font-body);
	color: rgba(255,255,255,.72);
}
/* Dateien in der gesendeten Nachricht */
aside.agent .msg_files {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
aside.agent .msg_files + .text {
	margin-top: 8px;
}
aside.agent .msg_file {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 5px 8px 5px 5px;
	border-radius: var(--radius-s);
	background: var(--surface-raised);
	border: 1px solid var(--border-default);
	text-decoration: none;
}
aside.agent .msg_file .name {
	flex: 1;
	min-width: 0;
	font: 500 12px/1.3 var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
aside.agent .msg_file .size {
	flex: 0 0 auto;
	font: 400 11px/1.3 var(--font-body);
	color: var(--text-muted);
}
aside.agent .agent_panel {
	position: relative;
}
.ag_dateien {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 6px 0 12px;
}
.ag_datei {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 500 12px/1.3 var(--font-body);
	color: var(--text-primary);
}
.ag_datei .size {
	color: var(--text-muted);
	font-weight: 400;
}
aside.agent .msg_file .file_thumb {
	flex: 0 0 26px;
	width: 26px;
	height: 32px;
	border-radius: 4px;
	border: 1px solid var(--border-strong);
	background: #fff;
	overflow: hidden;
	box-sizing: border-box;
}
aside.agent .msg_file .file_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Nummernspalte mit Ziffern gleicher Breite wie in datatable.jsx (num: tabular-nums):
   Schloss und Datev-Wolke stehen dann in allen Zeilen genau untereinander */
.list-view.bills li p[data-id='num'],
.list-view.credits li p[data-id='num'] {
	font-variant-numeric: tabular-nums;
}

/* Kontaktdialog, Reiter Unternehmen (js/user-addresses.js, contact_firms_*;
   Vorlage contacts.jsx, PersonFirmen). Kopf wie die Checklisten im
   Aufgaben-Dialog, darunter eine kompakte Liste mit Auswahl und Zeilenmenue.
   Eingaben in der Tabelle sehen aus wie Zelltext. */
#insert_box .contact_firms {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#insert_box .contact_firms .firms_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
#insert_box .contact_firms .firms_head .label {
	font: 500 12px/1 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
#insert_box .contact_firms .firms_head .actions {
	display: inline-flex;
	align-items: center;
	gap: 18px;
}
#insert_box .contact_firms .firms_head a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 12px/1 var(--font-body);
	color: var(--accent);
	cursor: pointer;
}
#insert_box .contact_firms .firms_head a.firms_remove_selected {
	color: var(--danger);
}
#insert_box .contact_firms .firms_table {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	overflow: hidden;
}
#insert_box .contact_firms .firms_legend,
#insert_box .contact_firms .firms_row {
	display: grid;
	grid-template-columns: 36px minmax(0,1.2fr) minmax(0,1fr) 36px;
	align-items: center;
	min-height: 40px;
}
#insert_box .contact_firms .firms_legend {
	min-height: 34px;
	border-bottom: 1px solid var(--border-default);
	font: 500 11px/1 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
#insert_box .contact_firms .firms_row + .firms_row {
	border-top: 1px solid var(--border-default);
}
#insert_box .contact_firms .firms_row:hover {
	background: rgba(var(--accent-rgb),.04);
}
#insert_box .contact_firms .sel {
	display: grid;
	place-items: center;
}
#insert_box .contact_firms .sel input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--accent);
	cursor: pointer;
}
#insert_box .contact_firms .cell {
	min-width: 0;
	padding-right: 12px;
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-secondary);
}
#insert_box .contact_firms .firms_legend .cell {
	font: inherit;
	color: inherit;
}
#insert_box .contact_firms .cell.company {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-primary);
}
#insert_box .contact_firms .cell .name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#insert_box .contact_firms .firms_main {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	height: 20px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(var(--accent-rgb),.08);
	border: 1px solid var(--border-strong);
	font: 600 10px/1 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--accent);
}
#insert_box .contact_firms input.cell_input,
#insert_box .contact_firms input.cell_input:focus {
	max-width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	font: inherit;
	line-height: inherit;
	color: inherit;
}
#insert_box .contact_firms .menu {
	display: grid;
	place-items: center;
}
#insert_box .contact_firms .firms_menu_btn {
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
}
#insert_box .contact_firms .firms_menu_btn:hover {
	color: var(--text-primary);
}
#insert_box .contact_firms .firms_empty {
	padding: 14px;
	text-align: center;
	font: 400 13px/1.4 var(--font-body);
	color: var(--text-muted);
}
#insert_box .contact_firms .firms_hint,
#insert_box .contact_firms_note {
	margin: 8px 0 0;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
#insert_box .contact_firms_note a {
	cursor: pointer;
}
body > .cell_suggest {
	position: fixed;
	z-index: 1300;
	max-height: 240px;
	overflow: auto;
	box-sizing: border-box;
	padding: 6px;
	border-radius: var(--radius-m);
	background: var(--surface-card);
	border: 1px solid var(--accent);
	box-shadow: var(--glow-border);
}
body > .cell_suggest .hit {
	display: block;
	padding: 8px 10px;
	border-radius: var(--radius-s);
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-secondary);
	cursor: pointer;
}
body > .cell_suggest .hit.on,
body > .cell_suggest .hit:hover {
	background: rgba(var(--accent-rgb),.07);
	color: var(--accent);
	text-decoration: none;
}
body > .cell_suggest .none {
	padding: 8px 10px;
	font: 400 13px/1.3 var(--font-body);
	color: var(--text-muted);
}
body > .firm_menu {
	position: fixed;
	z-index: 1300;
	width: 220px;
	padding: 6px;
	box-sizing: border-box;
	border-radius: var(--radius-m);
	background: var(--surface-card);
	border: 1px solid var(--accent);
	box-shadow: var(--glow-border);
}
body > .firm_menu .firm_menu_item {
	display: block;
	padding: 8px 10px;
	border-radius: var(--radius-s);
	font: 500 13px/1.3 var(--font-body);
	color: var(--text-primary);
	cursor: pointer;
}
body > .firm_menu .firm_menu_item:hover {
	background: var(--surface-raised);
	text-decoration: none;
}
body > .firm_menu .firm_menu_item.danger {
	color: var(--danger);
}
body > .firm_menu .firm_menu_item.danger:hover {
	background: rgba(242,109,109,.1);
}

/* Kontaktliste: Hauptunternehmen, weitere Zuordnungen als graue Kapsel */
.contacts.list-view li [data-id='company'] .company_more {
	display: inline-flex;
	align-items: center;
	height: 20px;
	margin-left: 8px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	font: 600 11px/1 var(--font-body);
	color: var(--text-secondary);
	vertical-align: middle;
}

/* Kapsel "Du" hinter dem Nachnamen (Uebergabe 17.10.2026 (2), contacts.jsx
   PersonList): gedaempft, Hoehe 20 */
.contacts.list-view li [data-id='lastname'] .contact_du {
	display: inline-flex;
	align-items: center;
	height: 20px;
	margin-left: 8px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--surface-raised);
	border: 1px solid var(--border-strong);
	font: 600 10px/1 var(--font-body);
	letter-spacing: .04em;
	color: var(--text-muted);
	vertical-align: middle;
}

/* Kontaktdialog: Anrede, Titel und Ansprache in einer Zeile ueber den
   Namen, darunter der Hinweis "Mails beginnen mit" */
#insert_box #contact_info .form {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
#insert_box #contact_info .form > li.medium {
	grid-column: span 3;
}
#insert_box #contact_info .form > li.third {
	grid-column: span 2;
}
#insert_box #contact_info .form > li.contact_hint_row {
	margin-top: -8px;
}
#insert_box #contact_info .form > li.contact_hint_row > label {
	display: none;
}
@media (max-width: 770px) {
	body:not(.static) #insert_box #contact_info .form > li.medium,
	body:not(.static) #insert_box #contact_info .form > li.third {
		grid-column: 1 / -1;
	}
}
#insert_box .contact_anrede_hint {
	margin: 0;
	font: 400 12px/1.45 var(--font-body);
	color: var(--text-muted);
}
#insert_box .contact_anrede_hint span {
	color: var(--text-secondary);
}
#insert_box .contact_ansprache {
	display: flex;
	gap: 6px;
}
#insert_box .contact_ansprache a {
	flex: 1;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-secondary);
	font: 600 13px var(--font-body);
	cursor: pointer;
	user-select: none;
}
#insert_box .contact_ansprache a.on {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
	color: var(--accent);
}

/* --------------------------------------------------------------------------
   Benachrichtigungen (Designsystem ui_kits/app/notifications.jsx,
   js/notifications.js): Glocke mit Zaehler in der Seitenleiste und mobil im
   Kopf, Zentrale als Panel neben der Seitenleiste (mobil ganze Flaeche),
   Einstellungen › Benachrichtigungen.
   -------------------------------------------------------------------------- */
aside nav ul li.notif_toggle a {
	cursor: pointer;
}
aside nav ul li.notif_toggle.open a {
	color: var(--accent);
}
aside nav ul li.notif_toggle.open .nav_icon {
	background: rgba(var(--accent-rgb),.08);
}
/* Zaehler: gruene Kapsel oben rechts am Symbol, ab 10 "9+", Ring in der
   Seitenfarbe */
.notif_toggle .notif_count {
	position: absolute;
	top: 5px;
	right: 3px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 8px;
	display: grid;
	place-items: center;
	background: var(--accent);
	color: var(--on-accent);
	font: 700 10px/1 var(--font-body);
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 2px var(--surface-page);
	pointer-events: none;
}
.notif_toggle .notif_count[hidden] {
	display: none;
}
/* Mobil und in der PWA: Glocke rechts im Kopf, links neben dem Agenten;
   die Leiste unten bleibt, wie sie ist */
.notif_fab {
	display: none;
}
@media (max-width: 770px) {
	body:not(.static) aside.nav li.notif_toggle {
		display: none;
	}
	body:not(.static) .notif_fab {
		position: fixed;
		z-index: 580;
		top: calc(24px + env(safe-area-inset-top, 0px));
		right: 16px;
		width: 42px;
		height: 42px;
		display: grid;
		place-items: center;
		border-radius: var(--radius-m);
		color: var(--text-secondary);
		cursor: pointer;
	}
	body:not(.static) .notif_fab.with_agent {
		right: 65px;
	}
	body.no-agent:not(.static) .notif_fab.with_agent {
		right: 16px;
	}
	body:not(.static) .notif_fab.open {
		background: rgba(var(--accent-rgb),.08);
		color: var(--accent);
	}
	body:not(.static) .notif_fab .notif_count {
		top: 3px;
		right: 1px;
	}
	body.testsystem:not(.static) .notif_fab {
		top: calc(24px + var(--testbar) + env(safe-area-inset-top, 0px));
	}
	body:not(.static).agent-open .notif_fab {
		display: none;
	}
	/* Platz fuer Glocke und Agent rechts neben dem Logo */
	body.signed_in:not(.static) .page > header {
		padding-right: 122px;
	}
}

/* Panel. Desktop: fest neben der Seitenleiste (left aus JS), unten 20 px,
   400 px breit, hoechstens Fensterhoehe minus 40 px, Aussehen und
   Animation wie die Popups. Mobil: ganze Flaeche wie die Agent-Spalte. */
.notif_panel {
	position: fixed;
	left: 82px;
	bottom: 20px;
	z-index: 960;
	width: 400px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background: var(--surface-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-pop);
	transform-origin: bottom left;
	animation: bc-pop-in .2s cubic-bezier(.3,.9,.35,1.1) both;
}
.notif_panel.mobile {
	inset: 0;
	width: auto;
	max-width: none;
	max-height: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: var(--surface-page);
	padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
	animation: bc-fade-in .2s ease both;
}
.notif_panel .notif_head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 12px 12px 18px;
}
.notif_panel.mobile .notif_head {
	padding: 0 0 14px;
}
.notif_panel .notif_title {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.notif_panel .notif_title h2 {
	margin: 0;
	font: 600 17px var(--font-display);
	letter-spacing: -.01em;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.notif_panel .notif_sub {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
.notif_panel .notif_read_all {
	cursor: pointer;
	color: var(--accent);
	font: 600 12px var(--font-body);
	white-space: nowrap;
}
.notif_panel .notif_icon_btn {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-s);
	color: var(--text-muted);
	cursor: pointer;
}
.notif_panel .notif_icon_btn:hover {
	color: var(--text-primary);
}
.notif_panel .notif_filters {
	padding: 0 18px 12px;
	border-bottom: 1px solid var(--border-default);
}
.notif_panel.mobile .notif_filters {
	padding: 0 0 12px;
}
.notif_panel .notif_filters[hidden],
.notif_panel .notif_foot[hidden] {
	display: none;
}
.notif_panel .notif_chips {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
}
.notif_panel .notif_chips::-webkit-scrollbar {
	display: none;
}
.notif_panel .notif_chips.fade_l {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 100%);
}
.notif_panel .notif_chips.fade_r {
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
}
.notif_panel .notif_chips.fade_l.fade_r {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.notif_chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 11px;
	box-sizing: border-box;
	border-radius: 999px;
	cursor: pointer;
	border: 1px solid var(--border-strong);
	background: transparent;
	color: var(--text-secondary);
	font: 500 12px var(--font-body);
	white-space: nowrap;
}
.notif_chip .num {
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
}
.notif_chip.on {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
	color: var(--accent);
	font-weight: 600;
}
.notif_chip.on .num {
	color: var(--accent);
}
.notif_panel .notif_list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 8px 8px 8px 6px;
}
.notif_panel.mobile .notif_list {
	padding: 8px 0;
}
.notif_panel .notif_loading,
.notif_panel .notif_empty_filter {
	padding: 36px 24px;
	text-align: center;
	font: 400 13px var(--font-body);
	color: var(--text-muted);
}
.notif_panel .notif_empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	padding: 48px 24px;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
.notif_panel .notif_empty strong {
	font: 600 14px var(--font-body);
	color: var(--text-primary);
}
.notif_panel .notif_empty > span:last-child {
	max-width: 280px;
}
.notif_panel .notif_empty_icon {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-muted);
}
.notif_panel .notif_day {
	padding: 10px 14px 6px 22px;
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
}
.notif_panel .notif_entry {
	position: relative;
	display: flex;
	gap: 12px;
	padding: 12px 14px 12px 22px;
	border-radius: var(--radius-m);
	cursor: pointer;
	transition: background .12s;
}
.notif_panel .notif_entry.unread {
	background: rgba(var(--accent-rgb),.04);
}
.notif_panel .notif_entry:hover,
.notif_panel .notif_entry:focus-visible {
	background: rgba(var(--accent-rgb),.07);
	outline: none;
}
.notif_panel .notif_dot {
	position: absolute;
	left: 4px;
	top: 12px;
	width: 14px;
	height: 32px;
	display: grid;
	place-items: center;
	cursor: pointer;
}
.notif_panel .notif_dot span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: transparent;
	transition: background .12s;
}
.notif_panel .notif_entry.unread .notif_dot span {
	background: var(--accent);
	box-shadow: 0 0 6px rgba(var(--accent-rgb),.6);
}
.notif_panel .notif_entry:not(.unread):hover .notif_dot span {
	background: var(--border-strong);
}
.notif_tile {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-default);
	background: var(--surface-raised);
	color: var(--accent);
}
.notif_tile.grp_agent,
.notif_group_head.grp_agent .icon {
	color: var(--warning);
}
.notif_tile.grp_ablauf,
.notif_group_head.grp_ablauf .icon {
	color: var(--text-secondary);
}
.notif_panel .notif_body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.notif_panel .notif_line {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.notif_panel .notif_t {
	flex: 1;
	min-width: 0;
	font: 600 13px/1.35 var(--font-body);
	color: var(--text-secondary);
}
.notif_panel .notif_entry.unread .notif_t {
	color: var(--text-primary);
}
.notif_panel .notif_time {
	flex-shrink: 0;
	font: 400 11px var(--font-body);
	color: var(--text-muted);
	white-space: nowrap;
}
.notif_panel .notif_text {
	font: 400 12px/1.45 var(--font-body);
	color: var(--text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.notif_panel .notif_foot {
	padding: 10px 18px 14px;
	border-top: 1px solid var(--border-default);
	font: 400 11px/1.5 var(--font-body);
	color: var(--text-muted);
}
.notif_panel.mobile .notif_foot {
	padding: 12px 0 0;
}

/* Einstellungen › Benachrichtigungen */
.notif_settings {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 760px;
}
.notif_settings .notif_test_all,
.notif_settings .notif_digest_preview {
	cursor: pointer;
	color: var(--accent);
	font: 600 12px var(--font-body);
	white-space: nowrap;
}
.notif_settings .notif_test_all {
	padding-top: 4px;
}
.notif_settings .notif_test_all[hidden],
.notif_settings .notif_here[hidden],
.notif_settings .notif_push_off[hidden] {
	display: none;
}
.notif_settings .notif_here {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
}
.notif_settings .notif_here.danger {
	border-color: rgba(255,69,58,.45);
	background: rgba(255,69,58,.08);
}
.notif_settings .notif_here_icon {
	display: grid;
	color: var(--text-muted);
}
.notif_settings .notif_here.danger .notif_here_icon {
	color: var(--danger);
}
.notif_settings .notif_here_text {
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
.notif_settings .notif_here_text strong {
	font: 600 13px var(--font-body);
	color: var(--text-primary);
}
/* Geraete: Liste wie alle Listen in Karten (js/notifications.js), ohne
   eigenen Rahmen; das Geraetesymbol steht ohne Kaestchen vor dem Namen,
   beim eigenen Geraet in Akzentfarbe */
.notif_settings .list-view.notif_dev_list li p.notif_dev_name {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font: 500 13px var(--font-body);
	color: var(--text-primary);
}
.notif_settings .notif_dev_label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.notif_settings .notif_dev_icon {
	width: 18px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	color: var(--text-muted);
}
.notif_settings .notif_dev_list li.self .notif_dev_icon {
	color: var(--accent);
}
.notif_settings .list-view.notif_dev_list li p[data-id='since'] {
	font-variant-numeric: tabular-nums;
}
.notif_settings .list-view.notif_dev_list .muted {
	color: var(--text-muted);
}
.notif_settings .notif_dev_empty {
	padding: 14px;
	font: 400 13px var(--font-body);
	color: var(--text-muted);
}
.notif_badge {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	box-sizing: border-box;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	color: var(--text-muted);
	font: 600 11px var(--font-body);
	white-space: nowrap;
}
.notif_badge.active {
	border-color: rgba(var(--accent-rgb),.45);
	background: rgba(var(--accent-rgb),.1);
	color: var(--accent);
}
.notif_settings .notif_push_off {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-secondary);
}
.notif_settings .notif_push_off .notif_here_icon {
	margin-top: 1px;
}
.notif_settings .notif_cols {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 8px;
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
}
.notif_settings .notif_cols .spacer {
	flex: 1;
}
.notif_settings .notif_col {
	width: 64px;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
}
.notif_settings .notif_group + .notif_group {
	margin-top: 14px;
}
.notif_settings .notif_group_head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 8px;
	font: 600 12px var(--font-body);
	color: var(--text-secondary);
}
.notif_settings .notif_group_head .icon {
	color: var(--accent);
}
.notif_settings .notif_row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--border-default);
}
.notif_settings .notif_digest_row {
	align-items: flex-start;
	padding: 0;
	border-top: none;
}
.notif_settings .notif_row_text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.notif_settings .notif_digest_row .notif_row_text {
	gap: 4px;
}
.notif_settings .notif_digest_preview {
	margin-top: 4px;
	align-self: flex-start;
}
.notif_settings .notif_row_name {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 600 13px var(--font-body);
	color: var(--text-primary);
}
.notif_settings .notif_row_info,
.notif_settings .notif_note {
	font: 400 12px/1.45 var(--font-body);
	color: var(--text-muted);
}
.notif_settings .notif_note {
	margin: 16px 0 0;
}
.notif_settings .notif_switch {
	display: inline-flex;
	cursor: pointer;
}
.notif_settings .notif_switch .switch {
	position: relative;
	width: 34px;
	height: 20px;
	flex-shrink: 0;
	box-sizing: border-box;
	border-radius: 10px;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	transition: background .15s, border-color .15s;
}
.notif_settings .notif_switch .switch:after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--text-muted);
	transition: left .15s, background .15s;
}
.notif_settings .notif_switch.on .switch {
	background: var(--accent);
	border-color: var(--accent);
}
.notif_settings .notif_switch.on .switch:after {
	left: 16px;
	background: var(--on-accent);
}
.notif_settings .notif_switch.locked {
	opacity: .4;
	cursor: default;
}
.notif_settings .notif_footer_hint {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 8px;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
.notif_settings .notif_footer_hint .icon {
	flex-shrink: 0;
	margin-top: 2px;
}
@media (max-width: 600px) {
	.notif_settings .notif_col {
		width: 52px;
	}
}
.notif_settings .notif_digest_row {
	margin-top: 16px;
}
.notif_toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 1200;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--surface-card);
	border: 1px solid var(--accent);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-pop);
	font: 500 13px var(--font-body);
	color: var(--text-primary);
	white-space: nowrap;
	max-width: calc(100vw - 32px);
	animation: bc-fade-in .25s ease both;
}
.notif_toast .ok {
	display: grid;
	color: var(--accent);
}
/* Beispiel der Zusammenfassung */
.cal_modal.notif_modal .box {
	width: 700px;
}
.notif_modal .notif_digest_frame {
	display: block;
	width: 100%;
	height: 560px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: #fff;
}
.notif_modal .notif_digest_none {
	margin: 0;
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-muted);
}
.notif_modal .notif_digest_schema {
	display: flex;
	gap: 6px;
	margin-top: 14px;
}
/* Agent-Reiter: Verweis auf die Schalter unter Benachrichtigungen */
#agent_settings .usage_notify_link {
	margin: 14px 0 0;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
#agent_settings .usage_notify_link a {
	color: var(--accent);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Einstellungen › Datensicherung: Speicher (SpeicherKarte) und Konto loeschen
   (KontoLoeschenKarte, KontoLoeschenDialog), ui_kits/app/settings.jsx,
   php/storage.php, js/account.js. Alles auf #storage_card, #account_delete
   und .account_delete_modal begrenzt.
   -------------------------------------------------------------------------- */
#storage_card,
#account_delete {
	max-width: 760px;
}
#storage_card {
	margin-bottom: 24px;
}
#account_delete {
	margin-top: 24px;
}
#account_delete .settings-card .hint {
	margin-bottom: 0;
}
#storage_card .storage_head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
#storage_card .storage_used {
	font: 600 28px var(--font-display);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
#storage_card .storage_used.knapp {
	color: var(--warning);
}
#storage_card .storage_used.voll {
	color: var(--danger);
}
#storage_card .storage_of {
	font: 400 13px var(--font-body);
	color: var(--text-muted);
}
#storage_card .storage_bar {
	display: flex;
	height: 10px;
	border-radius: 5px;
	overflow: hidden;
	background: var(--border-default);
}
#storage_card .art_dokumente { background: var(--accent); }
#storage_card .art_belege { background: rgba(var(--accent-rgb),.45); }
#storage_card .art_vertraege { background: var(--text-secondary); }
#storage_card .art_agent { background: var(--warning); }
#storage_card .art_backups { background: var(--text-muted); }
#storage_card .art_sonstige { background: var(--border-strong); }
#storage_card .storage_legend {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
	gap: 8px 20px;
	margin-top: 14px;
}
#storage_card .storage_legend > span {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font: 400 12px var(--font-body);
	color: var(--text-secondary);
}
#storage_card .storage_legend .dot {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	flex-shrink: 0;
}
#storage_card .storage_legend .label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#storage_card .storage_legend .size {
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}
#storage_card .storage_alert,
.account_delete_modal .account_delete_warn {
	margin-top: 16px;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	border: 1px solid rgba(245,185,80,.45);
	background: rgba(245,185,80,.1);
	font: 500 13px/1.45 var(--font-body);
	color: var(--warning);
}
#storage_card .storage_alert.voll {
	border-color: rgba(255,69,58,.45);
	background: rgba(255,69,58,.1);
	color: var(--danger);
}
#storage_card .storage_years {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--border-default);
}
#storage_card .storage_years_head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
#storage_card .storage_years_head .label {
	font: var(--text-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
}
#storage_card .storage_years_info {
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
#storage_card .storage_cols {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 110px;
}
#storage_card .storage_col {
	flex: 1;
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	cursor: default;
}
#storage_card .storage_col.frei {
	opacity: .45;
}
#storage_card .storage_stack {
	min-height: 2px;
	display: flex;
	flex-direction: column;
	border-radius: 3px 3px 0 0;
	overflow: hidden;
}
#storage_card .storage_col.on .storage_stack {
	box-shadow: 0 0 0 1px var(--accent);
}
#storage_card .storage_stack .dok {
	background: var(--accent);
}
#storage_card .storage_stack .bel {
	background: rgba(var(--accent-rgb),.45);
}
#storage_card .storage_col.frei .storage_stack span {
	background: var(--text-muted);
}
#storage_card .storage_axis {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}
#storage_card .storage_axis span {
	flex: 1;
	min-width: 0;
	text-align: center;
	font: 400 10px var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
}
#storage_card .storage_note {
	margin: 14px 0 0;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
/* Dialog "Konto endgültig löschen" */
.cal_modal.account_delete_modal .box {
	width: 540px;
}
.account_delete_modal .account_delete_body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.account_delete_modal .account_delete_body p {
	margin: 0;
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-secondary);
}
.account_delete_modal .account_delete_body ul {
	margin: -4px 0 0;
	padding-left: 20px;
	font: 400 13px/1.6 var(--font-body);
	color: var(--text-secondary);
}
.account_delete_modal .account_delete_warn {
	margin-top: 0;
}
.account_delete_modal .account_delete_check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font: 400 13px/1.45 var(--font-body);
	color: var(--text-secondary);
}
#insert_box.account_delete_modal label.account_delete_check,
#insert_box.account_delete_modal label.account_delete_check span {
	text-transform: none;
	letter-spacing: 0;
	font: 400 13px/1.45 var(--font-body);
	color: var(--text-secondary);
}
.account_delete_modal .account_delete_check input {
	margin-top: 2px;
	accent-color: var(--accent);
}
.account_delete_modal .account_delete_field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.account_delete_modal .account_delete_field span {
	font: 500 12px var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.account_delete_modal .account_delete_error {
	font: 500 13px/1.45 var(--font-body);
	color: var(--danger);
}
.account_delete_modal .account_delete_error[hidden] {
	display: none;
}
.account_delete_modal .account_delete_foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 22px;
}
.account_delete_modal .account_delete_go {
	border-color: var(--danger);
	background: var(--danger);
	color: #fff;
}
.account_delete_modal .account_delete_go:hover {
	border-color: var(--danger);
	background: var(--danger);
	color: #fff;
	box-shadow: 0 0 10px rgba(242,109,109,.5);
}
.account_delete_modal .account_delete_go.disabled {
	background: transparent;
	color: var(--danger);
	opacity: .5;
	cursor: not-allowed;
	box-shadow: none;
}

/* Rechtstext eingebettet (pages/templates/legal-embed.html, /avv?eingebettet=1):
   nur der Text, durchsichtig, schmale sichtbare Scrollleiste. Der Rahmen
   dazu steht im Profil (.avv_frame). */
html.legal_embed {
	min-width: 0;
	height: auto;
	background: transparent;
	scrollbar-width: thin;
	scrollbar-color: var(--border-strong) transparent;
}
html.legal_embed::-webkit-scrollbar {
	width: 8px;
}
html.legal_embed::-webkit-scrollbar-track {
	background: transparent;
}
html.legal_embed::-webkit-scrollbar-thumb {
	background: var(--border-strong);
	border-radius: 4px;
}
body.legal_embed {
	min-width: 0;
	min-height: 0;
	background: transparent;
}
.legal_embed_text {
	padding: 18px 20px 22px;
}
.legal_embed_text p {
	margin: 0;
	font: 400 13px/1.65 var(--font-body);
	color: var(--text-secondary);
}
.legal_embed_text p + p {
	margin-top: 8px;
}
.legal_embed_text .label {
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--border-default);
	font: 600 12px/1.3 var(--font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--accent);
}
.legal_embed_text .label:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}
.legal_embed_text .label + p {
	margin-top: 8px;
}
.legal_embed_text a {
	color: var(--accent);
}
.legal_embed_text mark {
	background: rgba(245,185,80,.25);
	color: var(--text-primary);
	padding: 0 3px;
	border-radius: 3px;
}
/* Profil › Auftragsverarbeitung: der Vertrag im Rahmen */
.avv_status a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.avv_frame {
	display: block;
	width: 100%;
	height: 360px;
	margin-top: 12px;
	box-sizing: border-box;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
}

/* --------------------------------------------------------------------------
   Vorlagen fuer Rechnung, Angebot und Gutschrift (js/billtemplates.js,
   Designsystem ui_kits/app/doc-editor.jsx). Alles mit Praefix bt_ oder auf
   die Vorlagenliste beschraenkt, keine allgemeinen Listenregeln.
   -------------------------------------------------------------------------- */

.billtemplates_block .bt_head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.billtemplates_block .bt_head .hint {
	flex: 1 1 320px;
	margin: 0;
}
/* Einstellungen setzen .data input auf 100 % Breite; die Kaestchen der
   Liste und ihrer Randklone (list_edges im schmalen Layout) bleiben 15 px */
.billtemplates_block input[type="checkbox"] {
	width: 15px;
	min-width: 15px;
}
.billtemplates.list-view .bt_default {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 12px var(--font-body);
	color: var(--accent);
}
.billtemplates.list-view .none {
	color: var(--text-muted);
}
#settings .bt_jump,
#settings .bt_open_stamm {
	font: 600 13px var(--font-body);
	cursor: pointer;
}

/* Einheit hinter der Anzahl in der Aufwandsliste: per CSS, damit der
   Zellentext eine Zahl bleibt (Sortierung, Dialog) */
.efforts.list-view p[data-id="amount"][data-unit]::after {
	content: " " attr(data-unit);
}

/* Felder in den Dialogen: Vorlage, Einheit mit Zahnrad */
#insert_box .bt_vorlage_feld,
#insert_box .bt_einheit {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}
/* Zahnrad auf Linie mit dem Feld: das Auswahlfeld ist 46 px hoch, das
   Eingabefeld darin 40 px mittig; die Formularregel gibt Knoepfen oben
   6 px Abstand */
#insert_box .bt_vorlage_feld .select,
#insert_box .bt_einheit .select {
	flex: 1;
	min-width: 0;
}
#insert_box .bt_einheiten_knopf {
	width: 40px;
	height: 40px;
	margin: 0;
	align-self: center;
	padding: 0;
	flex-shrink: 0;
	border-color: var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-secondary);
}
#insert_box .bt_einheiten_knopf:hover {
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: none;
}
#insert_box .bt_rechenzeile {
	display: block;
	width: 100%;
	margin-top: 6px;
	font: 400 13px var(--font-body);
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
#insert_box .bt_rechenzeile b {
	color: var(--text-primary);
	font-weight: 600;
}

/* Editor */
body.bt_offen {
	overflow: hidden;
}
.bt_overlay {
	position: fixed;
	inset: 0;
	z-index: 1500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	background: rgba(var(--overlay-rgb),.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.bt_editor {
	width: min(1480px, 100%);
	height: min(94vh, 1100px);
	display: flex;
	flex-direction: column;
	background: var(--modal-bg);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-pop);
	overflow: hidden;
	color: var(--text-primary);
}
.bt_kopf {
	padding: 22px 28px 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.bt_titel {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.bt_titel > div {
	flex: 1;
	min-width: 0;
}
.bt_titel h2 {
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font: 600 19px var(--font-display);
	letter-spacing: -.01em;
	color: var(--text-primary);
}
.bt_titel p {
	margin: 4px 0 0;
	font: var(--text-small);
	color: var(--text-muted);
}
.bt_typ {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	font: 500 11px var(--font-body);
	color: var(--text-secondary);
	white-space: nowrap;
}
.bt_x {
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	flex-shrink: 0;
	color: var(--text-muted);
}
.bt_x:hover {
	box-shadow: none;
	color: var(--text-primary);
}
.bt_frage {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 14px;
	border-radius: var(--radius-m);
	border: 1px solid rgba(245,185,80,.45);
	background: rgba(245,185,80,.1);
	font: 500 13px/1.45 var(--font-body);
	color: var(--warning);
}
.bt_frage[hidden] {
	display: none;
}
.bt_frage > span {
	flex: 1 1 220px;
}
.bt_tabs {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--border-default);
}
.bt_tabs::-webkit-scrollbar {
	display: none;
}
.bt_tabs a {
	padding: 0 0 12px;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font: 500 14px var(--font-body);
	color: var(--text-muted);
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
}
.bt_tabs a:hover {
	color: var(--text-primary);
}
.bt_tabs a.active {
	color: var(--accent);
	border-bottom-color: var(--accent);
	font-weight: 600;
}
.bt_ansicht {
	display: none;
}
.bt_inhalt {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0,2fr) minmax(360px,1fr);
}

/* Vorschau */
.bt_vorschau {
	position: relative;
	min-width: 0;
	min-height: 0;
	background: rgba(0,0,0,.18);
	border-right: 1px solid var(--border-default);
}
.bt_vorschau_flaeche {
	position: absolute;
	inset: 0;
	overflow: auto;
}
.bt_seiten {
	padding: 32px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	min-width: min-content;
}
.bt_seite_wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.bt_seite_wrap > span {
	font: 500 11px var(--font-body);
	color: var(--text-muted);
}
.bt_seite {
	position: relative;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 10px 34px rgba(0,0,0,.35);
	overflow: hidden;
	flex-shrink: 0;
}
.bt_seite img {
	display: block;
	width: 100%;
	height: 100%;
}
/* Klickflaechen ueber den Seiten: Rahmen beim Ueberfahren, Klick
   springt in den Reiter */
.bt_zone {
	position: absolute;
	cursor: pointer;
	outline: 1.5px dashed transparent;
	outline-offset: 3px;
	border-radius: 2px;
	text-decoration: none;
}
.bt_zone span {
	display: none;
	position: absolute;
	right: 0;
	bottom: calc(100% + 5px);
	padding: 1px 6px;
	border-radius: 3px;
	background: #00B386;
	color: #fff;
	font: 600 11px/16px var(--font-body);
	white-space: nowrap;
	pointer-events: none;
}
.bt_zone:hover {
	outline-color: #00B386;
}
.bt_zone:hover span {
	display: block;
}
.bt_zone.ganz {
	outline-offset: -6px;
}
.bt_zone.ganz span {
	top: 10px;
	right: 10px;
	bottom: auto;
}
.bt_raender {
	position: absolute;
	outline: 1px dashed rgba(0,179,134,.85);
	background: rgba(0,208,155,.04);
	pointer-events: none;
}
.bt_raender[hidden] {
	display: none;
}
.bt_pdf {
	width: 100%;
	height: 80vh;
}
.bt_vorschau_fehler {
	margin: 40px 0;
	font: var(--text-small);
	color: var(--text-muted);
}
.bt_zoom {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.bt_zoom_wert {
	padding: 2px 0 4px;
	font: 500 12px var(--font-body);
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
.bt_zoom button {
	width: 36px;
	height: 36px;
	padding: 0;
	border-color: var(--border-strong);
	background: var(--surface-card);
	color: var(--text-secondary);
}
.bt_zoom button.on {
	border-color: var(--accent);
	color: var(--accent);
}
.bt_laedt {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	overflow: hidden;
	opacity: 0;
	transition: opacity .2s;
}
.bt_vorschau.laedt .bt_laedt {
	opacity: 1;
}
.bt_laedt:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 30%;
	background: var(--accent);
	animation: bt_laedt 1s linear infinite;
}
@keyframes bt_laedt {
	from { left: -30%; }
	to { left: 100%; }
}

/* Randspalte */
.bt_spalte_rechts {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}
.bt_panel {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.bt_fuss {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 24px;
	border-top: 1px solid var(--border-default);
}
.bt_stand {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	font: 500 12px var(--font-body);
	color: var(--text-muted);
}
.bt_stand.offen {
	color: var(--warning);
}
.bt_stand.offen i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--warning);
}
.bt_stand.ok {
	color: var(--accent);
}
.bt_stand.fehler {
	color: var(--danger);
}
.bt_speichern:disabled {
	opacity: .45;
	cursor: default;
	box-shadow: none;
	background: transparent;
}
.bt_abschnitt {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bt_abschnitt_kopf {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 500 12px var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
}
.bt_abschnitt_kopf i {
	flex: 1;
	height: 1px;
	background: var(--border-default);
}
.bt_check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font: 400 14px/1.4 var(--font-body);
	color: var(--text-secondary);
}
.bt_check input[type="checkbox"] {
	margin-top: 2px;
}
/* Die allgemeine Regel fuer label setzt Versalien, hier nicht */
.bt_check,
.bt_check small,
.bt_feld {
	text-transform: none;
	letter-spacing: normal;
}
.bt_check small,
.bt_karussell_text small,
.bt_feld > small {
	display: block;
	margin-top: 2px;
	font: 400 12px/1.45 var(--font-body);
	color: var(--text-muted);
}
.bt_toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font: 500 14px var(--font-body);
	color: var(--text-primary);
	text-decoration: none;
}
.bt_toggle .switch {
	position: relative;
	width: 34px;
	height: 20px;
	flex-shrink: 0;
	box-sizing: border-box;
	border-radius: 10px;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	transition: background .15s, border-color .15s;
}
.bt_toggle .switch:after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--text-muted);
	transition: left .15s, background .15s;
}
.bt_toggle.on .switch {
	background: var(--accent);
	border-color: var(--accent);
}
.bt_toggle.on .switch:after {
	left: 16px;
	background: var(--on-accent);
}
.bt_gruppe {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.bt_gruppe.aus {
	opacity: .5;
	pointer-events: none;
}
.bt_abschnitt .bt_gruppe {
	gap: 12px;
}
.bt_feld {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.bt_label {
	font: 500 12px var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.bt_input {
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	padding: 0 12px;
	background: var(--surface-raised);
	color: var(--text-primary);
	font: 400 14px var(--font-body);
	border-radius: var(--radius-m);
	outline: none;
	border: 1px solid var(--border-strong);
	transition: border-color .15s, box-shadow .2s;
}
.bt_input:focus {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.bt_paar {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	gap: 12px;
}
.bt_plz {
	display: grid;
	grid-template-columns: 110px minmax(0,1fr);
	gap: 12px;
}
.bt_gr {
	display: grid;
	grid-template-columns: minmax(0,1fr) 40px;
	gap: 10px;
	align-items: end;
}
.bt_textschrift {
	display: grid;
	grid-template-columns: minmax(0,1fr) 110px;
	gap: 10px;
	align-items: end;
}
.bt_stil {
	width: 40px;
	height: 40px;
	padding: 0;
	border-color: var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-secondary);
	font: 15px var(--font-body);
}
.bt_stil.on {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
	color: var(--accent);
}
.bt_stepper {
	display: flex;
	align-items: center;
	height: 40px;
	box-sizing: border-box;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
	overflow: hidden;
}
.bt_stepper .bt_step {
	width: 34px;
	height: 38px;
	padding: 0;
	border: none;
	border-radius: 0;
	color: var(--text-secondary);
	flex-shrink: 0;
}
.bt_stepper .bt_step:hover {
	box-shadow: none;
	color: var(--accent);
}
.bt_stepper input {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: 100%;
	border: none;
	border-left: 1px solid var(--border-default);
	border-right: 1px solid var(--border-default);
	background: transparent;
	color: var(--text-primary);
	font: 500 14px var(--font-body);
	font-variant-numeric: tabular-nums;
	text-align: center;
	outline: none;
}
.bt_farbe {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 12px 0 6px;
	box-sizing: border-box;
	background: var(--surface-raised);
	border-radius: var(--radius-m);
	border: 1px solid var(--border-strong);
	transition: border-color .15s, box-shadow .2s;
}
.bt_farbe:focus-within {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.bt_farbe.falsch,
.bt_farbe.falsch:focus-within {
	border-color: var(--danger);
	box-shadow: none;
}
.bt_swatch {
	position: relative;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-strong);
	flex-shrink: 0;
	overflow: hidden;
	cursor: pointer;
}
.bt_swatch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	border: none;
	padding: 0;
}
.bt_hex {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: none;
	outline: none;
	background: transparent;
	color: var(--text-primary);
	font: 500 14px var(--font-body);
	font-variant-numeric: tabular-nums;
	letter-spacing: .03em;
}
.bt_reset {
	font: 600 12px var(--font-body);
	white-space: nowrap;
	cursor: pointer;
}
.bt_karussell {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: center;
}
.bt_karussell_text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bt_karussell_text strong {
	font: 600 14px var(--font-body);
	color: var(--text-primary);
}
.bt_karussell_nav {
	display: flex;
	align-items: center;
	gap: 12px;
}
.bt_karussell_nav span {
	flex: 1;
	font: 500 11px var(--font-body);
	letter-spacing: .04em;
	color: var(--text-muted);
}
.bt_pfeil {
	width: 36px;
	height: 36px;
	padding: 0;
	flex-shrink: 0;
	border-color: var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-primary);
}
.bt_pfeil:hover:not(:disabled) {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
	color: var(--text-primary);
}
.bt_pfeil:disabled {
	opacity: .45;
	cursor: default;
	border-color: var(--border-default);
	color: var(--text-muted);
}
.bt_skizze_seite {
	display: grid;
	place-items: center;
	padding: 16px 0;
	border-radius: var(--radius-m);
	background: rgba(242,245,244,.06);
	border: 1px solid var(--border-default);
}
.bt_skizze_seite svg {
	display: block;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.bt_skizze_breit {
	display: block;
	width: 100%;
	height: auto;
	background: #fff;
	border-radius: var(--radius-m);
}
.bt_hinweis {
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--radius-m);
	background: rgba(var(--accent-rgb),.06);
	border: 1px solid rgba(var(--accent-rgb),.25);
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-secondary);
}
.bt_hinweis a,
.bt_klein a {
	font-weight: 600;
	cursor: pointer;
}
.bt_klein {
	margin: 0;
	font: 400 12px/1.45 var(--font-body);
	color: var(--text-muted);
}
.bt_knopf {
	height: 36px;
	padding: 0 14px;
	font-size: 13px;
	min-width: 0;
	border-color: var(--accent);
	color: var(--accent);
}
.bt_knopf.voll {
	width: 100%;
}
.bt_knopf.leise {
	border-color: rgba(var(--secondary-rgb),.35);
	color: var(--text-secondary);
}
.bt_knopf.gefahr {
	border-color: rgba(242,109,109,.5);
	color: var(--danger);
}
.bt_knopf.gefahr:hover {
	box-shadow: 0 0 12px rgba(242,109,109,.3);
	color: var(--danger);
	border-color: var(--danger);
}
.bt_paar > .bt_knopf {
	width: 100%;
}
.bt_briefpapier_bild,
.bt_logo {
	border-radius: var(--radius-m);
	overflow: hidden;
	border: 1px solid var(--border-strong);
	background: #fff;
}
.bt_briefpapier_bild img {
	display: block;
	width: 100%;
}
.bt_briefpapier_bild.leer {
	padding: 40px 16px;
	text-align: center;
	font: var(--text-small);
	color: #66756F;
}
.bt_logo {
	height: 110px;
	display: grid;
	place-items: center;
	background: repeating-conic-gradient(#f2f2f0 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}
.bt_logo img {
	max-height: 80px;
	max-width: 80%;
}
.bt_upload_feld {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 22px 16px;
	white-space: normal;
	border: 1px dashed rgba(var(--secondary-rgb),.35);
	color: var(--text-secondary);
}
.bt_upload_feld small {
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
.bt_upload_feld:hover {
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: none;
}
.bt_banken {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bt_bank {
	border: 1px solid var(--border-default);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
}
.bt_bank.auf {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.bt_bank_kopf {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	color: var(--text-muted);
}
.bt_bank_kopf > div {
	flex: 1;
	min-width: 0;
}
.bt_bank_kopf strong {
	display: block;
	font: 600 13px var(--font-body);
	color: var(--text-primary);
}
.bt_bank_kopf em {
	margin-left: 8px;
	font: 500 11px var(--font-body);
	font-style: normal;
	color: var(--accent);
}
.bt_bank_kopf small {
	display: block;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bt_bank_stift {
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	color: var(--text-muted);
}
.bt_bank.auf .bt_bank_stift {
	color: var(--accent);
}
.bt_bank_felder {
	padding: 4px 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bt_bank_aktionen {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.bt_spalten {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bt_spalte {
	display: flex;
	align-items: center;
	gap: 8px;
}
.bt_spalte.aus {
	opacity: .55;
}
.bt_spalte .bt_input {
	height: 34px;
	font-size: 13px;
}
.bt_spalte_label {
	flex: 1;
	min-width: 0;
}
.bt_spalte .bt_spalte_breite {
	width: 48px;
	flex-shrink: 0;
	padding: 0 6px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.bt_spalte_ausr {
	width: 34px;
	height: 34px;
	padding: 0;
	flex-shrink: 0;
	border-color: var(--border-strong);
	background: var(--surface-raised);
	border-radius: var(--radius-s);
	color: var(--text-secondary);
}
.bt_spalte_schieb {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}
.bt_spalte_schieb button {
	width: 24px;
	height: 17px;
	padding: 0;
	border: none;
	color: var(--text-secondary);
}
.bt_spalte_schieb button:hover {
	box-shadow: none;
	color: var(--accent);
}

/* Einheiten verwalten */
.bt_overlay.bt_einheiten {
	z-index: 1600;
}
.bt_einheiten_box {
	width: 460px;
	max-width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	box-sizing: border-box;
	background: var(--modal-bg);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-pop);
	color: var(--text-primary);
}
.bt_einheiten_box header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.bt_einheiten_box header > div {
	flex: 1;
}
.bt_einheiten_box h2 {
	margin: 0;
	font: 600 19px var(--font-display);
}
.bt_einheiten_box header p {
	margin: 4px 0 0;
	font: var(--text-small);
	color: var(--text-muted);
}
.bt_einheiten_suche {
	display: flex;
	gap: 10px;
}
.bt_einheiten_suche > span {
	position: relative;
	flex: 1;
	display: flex;
}
.bt_einheiten_suche > span svg {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
}
.bt_einheiten_suche input {
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	padding: 0 12px 0 36px;
	background: var(--surface-raised);
	color: var(--text-primary);
	font: 400 14px var(--font-body);
	border-radius: var(--radius-m);
	outline: none;
	border: 1px solid var(--border-strong);
}
.bt_einheiten_suche input:focus {
	border-color: var(--accent);
	box-shadow: var(--glow-border);
}
.bt_einheit_anlegen {
	height: 40px;
	padding: 0 14px;
	font-size: 13px;
	border-color: var(--accent);
	color: var(--accent);
}
.bt_einheit_anlegen:disabled {
	border-color: var(--border-strong);
	color: var(--text-muted);
	cursor: default;
	box-shadow: none;
}
.bt_einheiten_hinweis {
	margin: -8px 0 0;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
.bt_einheiten_liste {
	max-height: 340px;
	overflow: auto;
	margin: 0 -10px;
	display: flex;
	flex-direction: column;
}
.bt_einheiten_titel {
	padding: 12px 10px 4px;
	font: 500 11px var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.bt_einheiten_titel:first-child {
	padding-top: 4px;
}
.bt_einheit_zeile {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: var(--radius-s);
	cursor: pointer;
}
.bt_einheit_zeile:hover {
	background: rgba(var(--accent-rgb),.05);
}
.bt_einheit_zeile > span {
	flex: 1;
	font: 400 14px var(--font-body);
	color: var(--text-primary);
}
.bt_einheit_zeile em {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 11px var(--font-body);
	font-style: normal;
	color: var(--text-muted);
}
.bt_einheit_weg {
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	color: var(--text-muted);
}
.bt_einheit_weg:hover {
	box-shadow: none;
	color: var(--danger);
}
.bt_einheiten_box footer {
	display: flex;
	justify-content: flex-end;
}

/* Handy: Vollbild mit Umschalter Einstellungen | Vorschau */
@media (max-width: 770px) {
	.bt_overlay {
		padding: 0;
	}
	.bt_editor {
		width: 100%;
		height: 100%;
		border: none;
		border-radius: 0;
	}
	.bt_kopf {
		padding: calc(14px + env(safe-area-inset-top)) 16px 0;
	}
	.bt_tabs {
		gap: 20px;
	}
	.bt_ansicht {
		display: flex;
		gap: 6px;
		margin: 0 -16px;
		padding: 10px 16px;
		border-bottom: 1px solid var(--border-default);
	}
	.bt_ansicht button {
		flex: 1;
		height: 34px;
		padding: 0;
		font-size: 13px;
		border-color: var(--border-strong);
		color: var(--text-secondary);
	}
	.bt_ansicht button.on {
		border-color: var(--accent);
		background: rgba(var(--accent-rgb),.08);
		color: var(--accent);
	}
	.bt_inhalt {
		display: block;
		position: relative;
	}
	.bt_inhalt > .bt_vorschau,
	.bt_inhalt > .bt_spalte_rechts {
		position: absolute;
		inset: 0;
	}
	.bt_inhalt[data-ansicht="einstellungen"] > .bt_vorschau,
	.bt_inhalt[data-ansicht="vorschau"] > .bt_spalte_rechts {
		display: none;
	}
	.bt_vorschau {
		border-right: none;
	}
	.bt_seiten {
		padding: 16px;
	}
	.bt_zoom {
		display: none;
	}
	.bt_panel {
		padding: 18px 16px;
	}
	.bt_fuss {
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	}
	#insert_box .bt_vorlage_feld {
		flex-wrap: wrap;
	}
}
.bt_farbe input.bt_hex,
.bt_stepper input[type="text"] {
	border-top: none;
	border-bottom: none;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	padding: 0;
	height: 100%;
}
.bt_farbe input.bt_hex {
	border-left: none;
	border-right: none;
}

/* ------------------------------------------------------------------
   Feedback aus der Fusszeile (ui_kits/app/feedback.jsx, js/feedback.js,
   pages/templates/part.feedback.html). Laeuft auch auf der Startseite und
   den Rechtstexten, deshalb nur mit eigenen fb_-Klassen.
   ------------------------------------------------------------------ */
html.fb_open { overflow: hidden; }
.fb_overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(var(--overlay-rgb), .55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	animation: bc-fade-in .2s ease both;
}
.fb_dialog {
	width: 600px;
	max-width: 100%;
	max-height: 92vh;
	overflow: auto;
	box-sizing: border-box;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: left;
	background: var(--surface-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-pop);
	color: var(--text-primary);
	font-family: var(--font-body);
	animation: bc-pop-in .25s cubic-bezier(.3,.9,.35,1.1) both;
}
.fb_head { display: flex; align-items: flex-start; gap: 16px; }
.fb_head > div { flex: 1; min-width: 0; }
.fb_head h2 { margin: 0; font: 600 19px var(--font-display); letter-spacing: -.01em; color: var(--text-primary); text-transform: none; }
.fb_head p { margin: 4px 0 0; font: var(--text-small); line-height: 1.5; color: var(--text-muted); }
.fb_x {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: none;
	border-radius: var(--radius-s);
	color: var(--text-muted);
}
.fb_x:hover { color: var(--text-primary); }
.fb_form, .fb_shots, .fb_contact { display: flex; flex-direction: column; }
.fb_form { gap: 20px; }
.fb_shots { gap: 8px; }
.fb_field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.fb_label { font: 500 12px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.fb_label i { font-style: normal; color: var(--accent); }
.fb_dialog input[type=text],
.fb_dialog input[type=email],
.fb_dialog input[type=tel],
.fb_dialog textarea {
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	background: var(--surface-raised);
	color: var(--text-primary);
	font: 400 14px var(--font-body);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	outline: none;
	box-shadow: none;
}
.fb_dialog textarea { height: auto; min-height: 132px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.fb_dialog input:focus, .fb_dialog textarea:focus { border-color: var(--accent); box-shadow: var(--glow-border); }
.fb_field.invalid input, .fb_field.invalid textarea { border-color: var(--danger); }
.fb_error { display: none; font: 400 12px var(--font-body); letter-spacing: normal; text-transform: none; color: var(--danger); }
.fb_field.invalid .fb_error { display: block; }
.fb_drop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 14px;
	cursor: pointer;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-m);
	color: var(--text-secondary);
	font: 500 13px/1.45 var(--font-body);
	text-align: center;
	transition: border-color .15s, background .15s;
}
.fb_drop em { font-style: normal; color: var(--accent); }
.fb_drop svg { flex-shrink: 0; }
.fb_drop:hover, .fb_drop:focus-visible { border-color: var(--accent); outline: none; }
.fb_drop.over { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); color: var(--accent); }
.fb_hint { font: 400 12px var(--font-body); color: var(--text-muted); }
.fb_hint.warn { color: var(--warning); }
.fb_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.fb_grid:empty { display: none; }
.fb_tile {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-s);
	background: var(--surface-raised);
}
.fb_tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb_tile_x {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	padding: 0;
	display: grid;
	place-items: center;
	cursor: pointer;
	border: none;
	border-radius: 50%;
	background: rgba(0,0,0,.6);
	color: #fff;
}
.fb_contact { gap: 12px; padding-top: 16px; border-top: 1px solid var(--border-default); }
.fb_contact_head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fb_contact_head > span:first-child { font: 600 14px var(--font-body); color: var(--text-primary); }
.fb_source { display: none; font: 400 12px var(--font-body); color: var(--text-muted); }
.fb_dialog.prefilled .fb_source { display: inline; }
.fb_row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.fb_note { font: 400 12px/1.5 var(--font-body); color: var(--text-muted); }
.fb_hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.fb_alert {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid rgba(255,69,58,.45);
	border-radius: var(--radius-m);
	background: rgba(255,69,58,.1);
	font: 500 13px/1.45 var(--font-body);
	color: var(--danger);
}
.fb_alert.show { display: flex; }
.fb_alert svg { flex-shrink: 0; }
.fb_foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }
.fb_foot .button { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.fb_foot .button[disabled] { opacity: .6; pointer-events: none; }
.fb_done { display: none; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0 6px; text-align: center; }
.fb_done > svg { color: var(--accent); }
.fb_done > b { font: 600 16px var(--font-display); color: var(--text-primary); }
.fb_done > span { max-width: 420px; font: 400 14px/1.5 var(--font-body); color: var(--text-muted); }
.fb_done .fb_foot { align-self: stretch; margin-top: 8px; }
.fb_dialog.done .fb_form { display: none; }
.fb_dialog.done .fb_done { display: flex; }
@media (max-width: 600px) {
	.fb_dialog { padding: 22px 18px; max-height: calc(100vh - 32px); }
	.fb_row { grid-template-columns: 1fr; }
}

/* Adminpanel › Feedback */
.admin_fb_text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.45; }
.admin_fb_thumbs { display: inline-flex; gap: 6px; }
.admin_fb_thumb { display: block; width: 44px; height: 33px; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-s); background: var(--surface-raised); }
.admin_fb_thumb img, .admin_fb_shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin_fb_comment { white-space: pre-wrap; word-break: break-word; margin-top: 14px; }
.admin_fb_shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.admin_fb_shot { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-s); background: var(--surface-raised); }

/* Registrierung ueber den Einladungslink (part.register.html), Glaskarte
   mittig wie der abgemeldete Zustand (ui_kits/app/loggedout.html) */
.reg_wrap { display: flex; justify-content: center; padding: 40px 16px 64px; }
.reg_card {
	width: 520px;
	max-width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 36px 32px;
	background: var(--surface-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-l);
	text-align: left;
}
.reg_card h1 { margin: 0; font: 600 22px var(--font-display); letter-spacing: -.01em; color: var(--text-primary); }
.reg_sub { margin: -6px 0 4px; font: var(--text-body); color: var(--text-muted); }
/* Absaetze auf oeffentlichen Seiten haben sonst padding 0 (.landing .lp p) */
.reg_wrap .reg_card p.reg_coupon { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border: 1px solid rgba(var(--accent-rgb),.45); border-radius: var(--radius-m); background: rgba(var(--accent-rgb),.08); font: 500 13px var(--font-body); color: var(--text-secondary); }
.reg_coupon svg { color: var(--accent); flex-shrink: 0; }
.reg_coupon b { color: var(--text-primary); }
.reg_row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.reg_field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.reg_field > span { font: 500 12px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.reg_field > span i { font-style: normal; color: var(--accent); }
.reg_card input[type=text],
.reg_card input[type=email],
.reg_card input[type=password] {
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	background: var(--surface-raised);
	color: var(--text-primary);
	font: 400 14px var(--font-body);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	outline: none;
}
.reg_card input:focus { border-color: var(--accent); box-shadow: var(--glow-border); }
.reg_field em, .reg_terms em { display: none; font: 400 12px var(--font-body); font-style: normal; color: var(--danger); }
.reg_field.invalid input { border-color: var(--danger); }
.reg_field.invalid em { display: block; }
.reg_terms { display: flex; align-items: flex-start; gap: 10px; margin: 0; font: 400 13px/1.5 var(--font-body); color: var(--text-secondary); text-transform: none; letter-spacing: normal; cursor: pointer; }
.reg_terms input { accent-color: var(--accent); width: 15px; height: 15px; margin: 3px 0 0; flex-shrink: 0; }
.reg_terms.invalid span { color: var(--danger); }
.reg_hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.reg_wrap .reg_card p.reg_alert { margin: 0; padding: 10px 14px; border: 1px solid rgba(255,69,58,.45); border-radius: var(--radius-m); background: rgba(255,69,58,.1); font: 500 13px/1.45 var(--font-body); color: var(--danger); }
.reg_card .reg_send { align-self: stretch; justify-content: center; margin: 4px 0 0; }
.reg_card .reg_send[disabled] { opacity: .6; pointer-events: none; }
.reg_gone { text-align: center; align-items: center; }
@media (max-width: 600px) { .reg_card { padding: 28px 20px; } }

/* Adminpanel › Gutscheine und Einladungen */
.admin_invitations_card { margin-top: 28px; }
.admin_who .n.mono, .admin_page .mono { font: var(--text-code); letter-spacing: .02em; }
.admin_coupon_form, .admin_invite_form { display: flex; flex-direction: column; gap: 16px; }
.admin_coupon_form .cp_code { font: 600 14px var(--font-mono, var(--font-body)); letter-spacing: .04em; text-transform: uppercase; }
.admin_coupon_form .cp_code[disabled] { opacity: .6; }
.admin_unit { position: relative; display: flex; align-items: center; }
.admin_unit input { padding-right: 40px; font-variant-numeric: tabular-nums; }
.admin_unit i { position: absolute; right: 12px; font: 500 14px var(--font-body); font-style: normal; color: var(--text-muted); pointer-events: none; }
.admin_copy_row { display: flex; gap: 10px; align-items: stretch; margin-top: 14px; }
.admin_copy_row input { flex: 1; min-width: 0; height: 40px; box-sizing: border-box; font: 500 13px var(--font-body); }
.admin_copy_row .button { margin: 0; height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; }

/* ==================================================================
   Einrichtungsassistent (ui_kits/app/onboarding.jsx, js/onboarding.js)
   Unter den Dialogen der App (#insert_box, z-index 1000)
   ================================================================== */
html.ob_open { overflow: hidden; }
.ob_overlay {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(var(--overlay-rgb), .55);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	animation: bc-fade-in .2s ease both;
}
.ob_dialog {
	width: 1000px;
	max-width: 100%;
	height: min(760px, 94vh);
	display: flex;
	background: var(--surface-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-pop);
	overflow: hidden;
	color: var(--text-primary);
	font-family: var(--font-body);
	animation: bc-pop-in .25s cubic-bezier(.3,.9,.35,1.1) both;
}
.ob_nav {
	width: 228px;
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 28px 16px 20px 20px;
	border-right: 1px solid var(--border-default);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ob_brand { display: flex; align-items: center; gap: 10px; height: 32px; margin: 0 0 24px 4px; }
.ob_brand img { width: 30px; height: 30px; border-radius: 8px; }
.ob_brand .wordmark { font: 600 20px/1 var(--font-display); letter-spacing: -.03em; }
.ob_nav_step { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: var(--radius-m); cursor: default; text-decoration: none; }
.ob_nav_step.geht { cursor: pointer; }
.ob_nav_step.aktiv { background: rgba(var(--accent-rgb), .08); }
.ob_nav_step .dot, .ob_card_step .dot {
	width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
	display: grid; place-items: center;
	font: 600 11px var(--font-body);
	border: 1.5px solid var(--border-strong); color: var(--text-muted);
}
.ob_nav_step.aktiv .dot { border-color: var(--accent); color: var(--accent); }
.ob_nav_step.ok .dot { border-color: var(--accent); background: var(--accent); color: var(--surface-page); }
.ob_nav_step .txt b { display: block; font: 600 13px var(--font-body); color: var(--text-muted); }
.ob_nav_step.geht .txt b { color: var(--text-secondary); }
.ob_nav_step.aktiv .txt b { color: var(--text-primary); }
.ob_nav_step .txt small { display: block; margin-top: 1px; font: 400 11px/1.4 var(--font-body); color: var(--text-muted); }
.ob_spacer { flex: 1; }
.ob_nav .ob_later { width: 100%; justify-content: center; margin: 0; box-sizing: border-box; text-align: center; }
.ob_mobile { display: none; }
.ob_main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ob_top { box-sizing: content-box; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 32px; padding: 28px 28px 18px; border-bottom: 1px solid var(--border-default); }
.ob_top h1 { margin: 0; font: 600 20px/1 var(--font-display); letter-spacing: -.01em; color: var(--text-primary); text-transform: none; }
.ob_top_r { display: flex; align-items: center; gap: 12px; font: 500 12px var(--font-body); color: var(--text-muted); white-space: nowrap; }
.ob_segs { display: flex; gap: 3px; width: 120px; }
.ob_segs i { flex: 1; height: 4px; border-radius: 2px; background: var(--border-strong); }
.ob_segs i.on { background: var(--accent); }
.ob_segs i.cur { background: rgba(var(--accent-rgb), .45); }
.ob_head { flex-shrink: 0; padding: 22px 28px 0; }
.ob_kennzeile { font: 500 12px var(--font-body); letter-spacing: .04em; color: var(--accent); }
.ob_head h2 { margin: 4px 0 0; font: 600 22px var(--font-display); letter-spacing: -.01em; color: var(--text-primary); text-transform: none; }
.ob_sub { display: flex; gap: 6px; margin-top: 12px; }
.ob_sub_page { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 4px 0; cursor: pointer; text-decoration: none; }
.ob_sub_page span { height: 3px; border-radius: 2px; background: var(--border-strong); }
.ob_sub_page.on span { background: var(--accent); }
.ob_sub_page small { font: 500 11px var(--font-body); color: var(--text-muted); }
.ob_sub_page.cur small { color: var(--text-primary); }
.ob_body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 22px 28px 28px; }
.ob_body::-webkit-scrollbar { display: none; }
.ob_foot { flex-shrink: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 28px; border-top: 1px solid var(--border-default); }
.ob_foot .button { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.ob_foot .button.disabled { opacity: .45; pointer-events: none; }
.ob_foot .button.busy { opacity: .6; pointer-events: none; }
.ob_skip { padding: 8px 0; cursor: pointer; font: 500 13px var(--font-body); color: var(--text-muted); text-decoration: none; }
.ob_skip:hover { color: var(--text-primary); }
.ob_avv_check { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; font: 500 14px/1.4 var(--font-body); color: var(--text-primary); text-transform: none; letter-spacing: normal; }
.ob_avv_check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; flex-shrink: 0; }

/* Inhalt */
.ob_stack { display: flex; flex-direction: column; gap: 18px; }
.ob_text { margin: 0; font: 400 14px/1.6 var(--font-body); color: var(--text-secondary); }
.ob_body > .ob_text { margin-bottom: 16px; }
.ob_klein { margin: 0; font: 400 12px/1.5 var(--font-body); color: var(--text-muted); }
.ob_center { text-align: center; margin: 0; font: 400 12px var(--font-body); color: var(--text-muted); }
.ob_link, .ob_ext { font: 600 13px var(--font-body); color: var(--accent); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ob_section { display: flex; flex-direction: column; gap: 12px; }
.ob_section_head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ob_section_head > b { font: 600 15px var(--font-display); color: var(--text-primary); }
.ob_section > .ob_klein { margin-top: -6px; }
.ob_avv_frame { display: block; width: 100%; height: 360px; border: 1px solid var(--border-default); border-radius: var(--radius-m); background: var(--surface-raised); color-scheme: normal; box-sizing: border-box; }
.ob_grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ob_grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 16px; }
.ob_grid_plz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; }
.ob_field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; text-transform: none; letter-spacing: normal; }
.ob_field.breit { grid-column: 1 / -1; }
.ob_label { font: 500 12px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.ob_label i { font-style: normal; color: var(--accent); }
.ob_dialog input[type=text], .ob_dialog input[type=email], .ob_dialog input[type=number], .ob_mini input[type=text], .ob_mini input[type=email] {
	width: 100%; box-sizing: border-box; height: 40px; margin: 0; padding: 0 12px;
	background: var(--surface-raised); color: var(--text-primary); font: 400 14px var(--font-body);
	border: 1px solid var(--border-strong); border-radius: var(--radius-m); outline: none; box-shadow: none;
}
.ob_dialog input.mono { font-variant-numeric: tabular-nums; }
.ob_dialog input:focus, .ob_mini input:focus { border-color: var(--accent); box-shadow: var(--glow-border); }
.ob_field.invalid input { border-color: var(--danger); }
.ob_field em, .ob_code em, .ob_mini_err { font: 400 12px var(--font-body); font-style: normal; color: var(--danger); }
.ob_field small { font: 400 12px/1.5 var(--font-body); color: var(--text-muted); }
.ob_switch { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-m); font: 500 14px var(--font-body); color: var(--text-primary); text-decoration: none; }
.ob_switch .txt { flex: 1; min-width: 0; }
.ob_switch .txt small { display: block; margin-top: 2px; font: 400 12px/1.5 var(--font-body); color: var(--text-muted); }
.ob_switch .knob { position: relative; width: 36px; height: 20px; flex-shrink: 0; border-radius: 10px; background: var(--border-strong); transition: background .15s; }
.ob_switch .knob i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.ob_switch.on .knob { background: var(--accent); }
.ob_switch.on .knob i { left: 18px; }
.ob_note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--radius-m); font: 400 13px/1.5 var(--font-body); }
.ob_note svg { flex-shrink: 0; margin-top: 2px; }
.ob_note b { color: var(--text-primary); }
.ob_note.accent { border: 1px solid rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .08); color: var(--text-secondary); }
.ob_note.accent svg { color: var(--accent); }
.ob_note.warning { border: 1px solid rgba(245,185,80,.4); background: rgba(245,185,80,.08); color: var(--warning); }
.ob_note.danger { border: 1px solid rgba(255,69,58,.4); background: rgba(255,69,58,.08); color: var(--danger); }
.ob_wait { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 0 14px; text-align: center; }
.ob_wait b { font: 600 15px var(--font-body); color: var(--text-primary); }
.ob_wait span:last-child { max-width: 380px; font: 400 12px/1.5 var(--font-body); color: var(--text-muted); }
.ob_spin { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--border-strong); border-top-color: var(--accent); animation: ob-dreh .9s linear infinite; box-sizing: border-box; }
@keyframes ob-dreh { to { transform: rotate(360deg); } }

/* Pill-Schalter wie auf der Startseite (nur hier und auf der Marketingseite) */
.pill_switch {
	position: relative; display: inline-flex; align-self: flex-start; padding: 4px; gap: 0;
	border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface-raised);
}
.pill_switch a {
	position: relative; z-index: 1; width: 120px; height: 36px; display: grid; place-items: center;
	font: 600 14px var(--font-body); color: var(--text-secondary); cursor: pointer; text-decoration: none; transition: color .2s;
}
.pill_switch a.on { color: var(--on-accent); }
.pill_switch i {
	position: absolute; top: 4px; left: 4px; width: 120px; height: 36px; border-radius: 999px;
	background: var(--accent); box-shadow: 0 0 14px rgba(0,208,155,.35);
	transition: left .32s cubic-bezier(.3,.9,.3,1), width .32s cubic-bezier(.3,.9,.3,1);
}
.pill_switch[data-value=jahr] i { left: 124px; }
.pill_switch[data-value=monat]:has(a[data-v=jahr]:hover) i { width: 134px; }
.pill_switch[data-value=jahr]:has(a[data-v=monat]:hover) i { left: 110px; width: 134px; }

.ob_plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ob_plan {
	display: flex; flex-direction: column; gap: 10px; padding: 16px; cursor: pointer; text-decoration: none;
	border: 1px solid var(--border-strong); border-radius: var(--radius-m); background: var(--surface-raised);
	transition: border-color .15s, box-shadow .15s;
}
.ob_plan.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); box-shadow: var(--glow-border); }
.ob_plan_head { display: flex; align-items: center; gap: 8px; }
.ob_plan_head b { flex: 1; font: 600 16px var(--font-display); color: var(--text-primary); }
.ob_plan .radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex-shrink: 0; box-sizing: border-box; }
.ob_plan.on .radio { border-color: var(--accent); }
.ob_plan.on .radio i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ob_plan_price { font: 400 12px var(--font-body); color: var(--text-muted); }
.ob_plan_price b { font: 600 22px var(--font-display); letter-spacing: -.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ob_plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ob_plan li { display: flex; align-items: flex-start; gap: 8px; font: 400 12px/1.4 var(--font-body); color: var(--text-secondary); }
.ob_plan li svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.ob_plan li.no { color: var(--text-muted); }
.ob_plan li.no svg { color: var(--text-muted); }
.ob_code { display: flex; flex-direction: column; gap: 6px; max-width: 440px; }
.ob_code_row { display: flex; gap: 10px; align-items: stretch; }
.ob_code_row input { flex: 1; min-width: 0; }
.ob_code_row .button { margin: 0; height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; flex-shrink: 0; }

/* Aussehen */
.ob_look { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; align-items: start; }
.ob_look_page { position: sticky; top: 0; display: grid; place-items: center; min-height: 300px; }
.ob_look_page img { width: 100%; max-width: 340px; border-radius: 4px; box-shadow: var(--shadow-card); background: #fff; }
.ob_look_side { display: flex; flex-direction: column; gap: 22px; }
.ob_logo_box { height: 110px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-m); background: repeating-conic-gradient(#f2f2f0 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.ob_logo_box img { max-height: 80px; max-width: 80%; }
.ob_pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob_pair .button { margin: 0; justify-content: center; display: inline-flex; align-items: center; gap: 6px; }
.ob_logo_drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px; cursor: pointer; text-decoration: none; text-align: center; border: 1px dashed rgba(242,245,244,.35); border-radius: var(--radius-m); color: var(--text-secondary); transition: border-color .15s, color .15s; }
.ob_logo_drop:hover { border-color: var(--accent); color: var(--accent); }
.ob_logo_drop b { font: 600 13px var(--font-body); }
.ob_logo_drop small { font: 400 12px var(--font-body); color: var(--text-muted); }
.ob_color { display: flex; gap: 10px; align-items: center; }
.ob_color input[type=color] { width: 40px; height: 40px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-m); background: var(--surface-raised); cursor: pointer; flex-shrink: 0; }

/* Listen der Verbindungen */
.ob_table { border-top: 1px solid var(--border-strong); }
.ob_tr { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) 32px; align-items: center; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--border-default); font: 400 13px var(--font-body); color: var(--text-secondary); }
.ob_tr.head { font: 600 11px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); border-bottom-color: var(--border-strong); }
.ob_tr .main b { display: block; font: 500 14px var(--font-body); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob_tr .main small { display: block; font: 400 12px var(--font-body); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob_tr .menu { text-align: right; }
.ob_row_del { color: var(--text-muted); cursor: pointer; display: inline-grid; place-items: center; }
.ob_row_del:hover { color: var(--danger); }
.ob_pill_tag { display: inline-block; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-raised); font: 500 11px var(--font-body); color: var(--text-secondary); white-space: nowrap; }
.ob_badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 600 11px var(--font-body); white-space: nowrap; }
.ob_badge.active { background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.ob_ok { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font: 600 13px var(--font-body); }
.ob_none { color: var(--text-muted); }
.ob_empty { padding: 28px 16px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-m); font: 400 13px var(--font-body); color: var(--text-muted); }
.ob_list_actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.ob_list_actions .button { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.ob_list_actions .button.disabled { opacity: .45; pointer-events: none; }

/* Daten mitbringen */
.ob_import { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-m); background: var(--surface-raised); }
.ob_import.over { border-style: dashed; border-color: var(--accent); }
.ob_import.done { border-color: var(--accent); background: rgba(var(--accent-rgb), .05); }
.ob_import .txt { flex: 1 1 240px; min-width: 0; }
.ob_import .txt b { display: flex; align-items: center; gap: 8px; font: 600 14px var(--font-body); color: var(--text-primary); }
.ob_import .txt b svg { color: var(--accent); }
.ob_import .txt small { display: block; margin-top: 2px; font: 400 12px/1.5 var(--font-body); color: var(--text-muted); }
.ob_import .acts { display: flex; gap: 20px; align-items: center; }
.ob_import .acts .button { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.ob_progress { display: block; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--border-default); overflow: hidden; }
.ob_progress i { display: block; height: 100%; background: var(--accent); transition: width .15s linear; }
.ob_map { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 14px; }

/* Kleine Dialoge ueber dem Assistenten (Datev, Spalten zuordnen) */
.ob_mini_overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(var(--overlay-rgb), .45); }
.ob_mini { width: 460px; max-width: 100%; max-height: 90vh; overflow: auto; box-sizing: border-box; padding: 24px; display: flex; flex-direction: column; gap: 14px; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-l); box-shadow: var(--shadow-pop); }
.ob_mini.wide { width: 620px; }
.ob_mini header { display: flex; align-items: center; justify-content: space-between; }
.ob_mini header b { font: 600 17px var(--font-display); color: var(--text-primary); }
.ob_mini header .ob_mini_x { color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.ob_mini footer { display: flex; justify-content: flex-end; gap: 12px; }
.ob_mini footer .button { margin: 0; }

/* Abschluss */
.ob_app { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-m); background: var(--surface-raised); font: 400 13px/1.5 var(--font-body); color: var(--text-secondary); }
.ob_app svg { flex-shrink: 0; }
.ob_chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob_chips span { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(0,208,155,.35); background: rgba(0,208,155,.06); font: 400 13px var(--font-body); color: var(--text-secondary); }
.ob_done { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border-default); }
.ob_done b { font: 600 15px var(--font-display); color: var(--text-primary); }

/* Dashboard-Karte "Einrichtung abschliessen" */
.ob_card { margin-bottom: 24px; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; border: 1px solid rgba(0,208,155,.35); border-radius: var(--radius-l); background: var(--surface-glass); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass); }
.ob_card_head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ob_card_head > div { flex: 1 1 240px; min-width: 0; }
.ob_card_head b { display: block; font: 600 16px var(--font-display); color: var(--text-primary); }
.ob_card_head span { display: block; margin-top: 2px; font: var(--text-small); color: var(--text-muted); }
.ob_card_head .button { margin: 0; }
.ob_card_x { width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; color: var(--text-muted); border-radius: var(--radius-s); }
.ob_card_steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .ob_card_steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; } }
@media (max-width: 560px) { .ob_card_steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ob_card_step { display: flex; flex-direction: column; gap: 10px; cursor: pointer; text-decoration: none; }
.ob_card_step.ok { cursor: default; }
.ob_card_step .bar { display: block; height: 3px; border-radius: 2px; background: var(--border-strong); }
.ob_card_step.ok .bar { background: var(--accent); }
.ob_card_step.pflicht .bar { background: var(--warning); }
.ob_card_step .row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ob_card_step .dot { font-weight: 700; }
.ob_card_step.ok .dot { border-color: var(--accent); background: var(--accent); color: var(--surface-page); }
.ob_card_step.pflicht .dot { border-color: var(--warning); background: var(--warning); color: var(--surface-page); }
.ob_card_step .txt { min-width: 0; }
.ob_card_step .txt b { display: block; font: 600 13px var(--font-body); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.ob_card_step.ok .txt b { color: var(--text-muted); }
.ob_card_step:not(.ok):hover .txt b { color: var(--text-primary); }
.ob_card_step .txt small { display: block; margin-top: 1px; font: 400 11px var(--font-body); color: var(--text-muted); white-space: nowrap; }
.ob_card_step.pflicht .txt small { color: var(--warning); }

/* Hinweis am Avatar und Kachel im Account-Menue */
.account_toggle .nav_icon.ob_warn { position: relative; }
.account_toggle .nav_icon.ob_warn::after {
	content: '!'; position: absolute; top: -3px; right: -3px; width: 15px; height: 15px; border-radius: 50%;
	display: grid; place-items: center; background: var(--warning); color: var(--surface-page);
	font: 800 10px/1 var(--font-body); box-shadow: 0 0 0 2px var(--surface-page);
}
.account_menu:has(.ob_tile) { width: 250px; }
.account_menu a.ob_tile { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 2px 0 6px; padding: 10px 12px; white-space: normal; height: auto; border: 1px solid var(--border-default); border-radius: var(--radius-m); background: var(--surface-raised); cursor: pointer; text-decoration: none; }
.account_menu a.ob_tile:hover { background: var(--surface-raised); }
.account_menu a.ob_tile.pflicht:hover { background: rgba(245,185,80,.12); }
.account_menu .ob_tile.pflicht { border-color: rgba(245,185,80,.55); background: rgba(245,185,80,.08); }
.account_menu .ob_tile_head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 600 13px var(--font-body); color: var(--text-primary); }
.account_menu .ob_tile_head b { font: 600 12px var(--font-body); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.account_menu .ob_tile_bar { display: block; height: 3px; border-radius: 2px; background: var(--border-strong); overflow: hidden; }
.account_menu .ob_tile_bar i { display: block; height: 100%; background: var(--accent); }
.account_menu .ob_tile.pflicht .ob_tile_bar i { background: var(--warning); }
.account_menu .ob_tile_text { font: 400 12px/1.4 var(--font-body); color: var(--text-muted); }
.account_menu .ob_tile.pflicht .ob_tile_text { color: var(--warning); }

@media (max-width: 720px) {
	.ob_overlay { padding: 0; align-items: stretch; }
	.ob_dialog { width: 100%; height: 100%; flex-direction: column; border: none; border-radius: 0; background: var(--surface-card); }
	.ob_nav { display: none; }
	.ob_mobile { display: block; padding: calc(16px + env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--border-default); }
	.ob_top { display: none; }
	.ob_mobile_row { display: flex; align-items: center; gap: 10px; font: 500 12px var(--font-body); color: var(--text-muted); }
	.ob_mobile_row img { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; }
	.ob_mobile_row b { font: 600 15px var(--font-display); color: var(--text-primary); }
	.ob_mobile_row span { flex: 1; }
	.ob_mobile_row a { cursor: pointer; color: var(--text-muted); }
	.ob_mobile_bars { display: flex; gap: 4px; margin-top: 8px; }
	.ob_mobile_bars span { flex: 1; height: 3px; border-radius: 2px; background: var(--border-strong); }
	.ob_mobile_bars span.on { background: var(--accent); }
	.ob_head { padding: 16px 16px 0; }
	.ob_body { padding: 18px 16px 24px; }
	.ob_foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
	.ob_grid2, .ob_grid_plz { grid-template-columns: 1fr; }
	.pill_switch a, .pill_switch i { width: 110px; }
	.pill_switch[data-value=jahr] i { left: 114px; }
	.ob_tr { grid-template-columns: minmax(0, 1fr) auto 32px; }
	.ob_tr > span:nth-child(2), .ob_tr > span:nth-child(3) { display: none; }
}
.ob_nav .ob_logout { align-self: flex-start; margin: 0 0 4px 8px; padding: 8px 0; cursor: pointer; font: 500 13px var(--font-body); color: var(--text-muted); text-decoration: none; }
.ob_nav .ob_logout:hover { color: var(--text-primary); }

/* ==========================================================================
   Kartenkopf mit Knopf (Uebergabe 16.10.2026): Headline und Hinweis bilden
   links eine Spalte bis vor den Knopf, 32 px Luft, der Text laeuft nie unter
   den Knopf. Nur Einstellungskarten mit .card-title im Kopf.
   ========================================================================== */
.settings-card .card-head {
	gap: 16px 32px;
}
.settings-card .card-head > .card-title {
	flex: 1 1 320px;
	min-width: 0;
}
.settings-card .card-head > .card-title > h2 {
	margin: 0;
}
.settings-card .card-head > .card-title > .hint {
	margin: 10px 0 0;
}
.settings-card .card-head > .card-title ~ * {
	flex-shrink: 0;
}
.settings-card .card-head:has(> .card-title > .hint) {
	margin-bottom: 20px;
}
.settings-card .card-head:has(> .card-title):last-child {
	margin-bottom: 0;
}
.billtemplates_block .bt_head {
	gap: 16px 32px;
}

/* ==========================================================================
   Katalog (js/catalog.js, ui_kits/app/aufwand.jsx): Suchfeld "Aus Katalog
   waehlen" in Aufwand und Wiederkehrend, Hinweis zur Herkunft, Kosten aus
   dem Einkauf im Artikel, Marge in der Liste
   ========================================================================== */
.form .cat_pick {
	position: relative;
	display: flex;
}
.form .cat_pick .cat_pick_icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: var(--text-muted);
	pointer-events: none;
}
.form .cat_pick:focus-within .cat_pick_icon {
	color: var(--accent);
}
.form .cat_pick input.cat_pick_input {
	width: 100%;
	padding-left: 36px;
}
.form .cat_pick .cat_pick_menu {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 20;
	max-height: 300px;
	overflow: auto;
	padding: 6px;
	background: var(--surface-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-pop);
}
.form .cat_pick .cat_hit {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: var(--radius-s);
	cursor: pointer;
}
.form .cat_pick .cat_hit.active {
	background: rgba(var(--accent-rgb),.08);
}
.form .cat_pick .cat_hit_nr {
	min-width: 34px;
	font: 500 11px var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
}
.form .cat_pick .cat_hit_main {
	flex: 1;
	min-width: 0;
}
.form .cat_pick .cat_hit_main b,
.form .cat_pick .cat_hit_main em {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.form .cat_pick .cat_hit_main b {
	font: 500 14px var(--font-body);
	color: var(--text-primary);
}
.form .cat_pick .cat_hit_main em {
	font: 400 12px var(--font-body);
	font-style: normal;
	color: var(--text-muted);
}
.form .cat_pick .cat_hit_price {
	white-space: nowrap;
	font: 500 13px var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
}
.form .cat_pick .cat_none {
	margin: 0;
	padding: 8px 10px;
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-muted);
}
.form .cat_origin {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
.form .cat_origin[hidden] {
	display: none;
}
.form .cat_origin .cat_origin_icon {
	display: inline-flex;
	color: var(--accent);
}
.form .cat_origin .cat_origin_text {
	flex: 1;
	min-width: 0;
}
.form .cat_origin b {
	font-weight: 600;
	color: var(--text-secondary);
}
.form .cat_origin .cat_origin_hide {
	cursor: pointer;
	font: 500 12px var(--font-body);
	color: var(--text-muted);
}
.form .cat_origin .cat_origin_hide:hover {
	color: var(--text-primary);
}
.form li[hidden] {
	display: none;
}
.form .art_cost_add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	cursor: pointer;
	font: 600 12px var(--font-body);
	color: var(--accent);
}
.list-view.articles .article_margin {
	color: var(--accent);
}
.list-view.articles .article_margin.negative {
	color: var(--danger);
}
#articles_card .article_empty {
	margin: 16px 0 0;
	font: var(--text-small);
	color: var(--text-muted);
}
#articles_card .article_empty[hidden] {
	display: none;
}

/* ==========================================================================
   Banklogo (part.banklogo.html, ui_kits/app/settings.jsx BankLogo): weisse
   Kachel, Ecken 26 % der Groesse, innen 1 px Linie; das Zeichen mittig mit
   18 % Luft. full: das Zeichen ist selbst eine Kachel (Sparkasse).
   ========================================================================== */
.bank_logo {
	--bl: 32px;
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--bl);
	height: var(--bl);
	padding: calc(var(--bl) * .18);
	border-radius: calc(var(--bl) * .26);
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
	overflow: hidden;
	vertical-align: middle;
}
.bank_logo img,
.bank_logo svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.bank_logo.full {
	padding: 0;
}
.bank_logo.is-letter,
.bank_logo.is-cash {
	background: var(--surface-raised);
	box-shadow: inset 0 0 0 1px var(--border-strong);
	color: var(--text-secondary);
	font: 600 calc(var(--bl) * .44)/1 var(--font-display);
}
.bank_logo.is-cash {
	padding: calc(var(--bl) * .2);
}
.anchor_nav .anchor .bank_logo {
	margin-right: 2px;
}
.anchor_nav .anchor .anchor_label {
	overflow: hidden;
	text-overflow: ellipsis;
}
.ob_tr .main:has(> .bank_logo) { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ob_tr .main .ob_bank_name { min-width: 0; }
/* Artikelliste einzeilig: feste Spalten, der Name nimmt den Rest */
#articles_card .list-view.articles li > [data-id='nr'], #articles_card .list-legend p[data-id='nr'] { flex: 0 0 72px; width: 72px; }
#articles_card .list-view.articles li > [data-id='name'], #articles_card .list-legend p[data-id='name'] { min-width: 160px; }
#articles_card .list-view.articles li > [data-id='type'], #articles_card .list-legend p[data-id='type'] { flex: 0 0 130px; width: 130px; }
#articles_card .list-view.articles li > [data-id='unit'], #articles_card .list-legend p[data-id='unit'] { flex: 0 0 90px; width: 90px; }
#articles_card .list-view.articles li > [data-id='price'], #articles_card .list-legend p[data-id='price'] { flex: 0 0 110px; width: 110px; }
#articles_card .list-view.articles li > [data-id='cost_sum'], #articles_card .list-legend p[data-id='cost_sum'] { flex: 0 0 96px; width: 96px; }
#articles_card .list-view.articles li > [data-id='margin'], #articles_card .list-legend p[data-id='margin'] { flex: 0 0 76px; width: 76px; }

/* --------------------------------------------------------------------------
   Dialoge Rechnung, Angebot, Gutschrift erstellen: rechts die Vorschau
   (js/billtemplates.js, dp_attach; ui_kits/app/invoice-dialog.jsx). 1060 px,
   Seiten so breit wie die Kopfzeile, Blattkanten buendig mit "Vorschau"
   und dem Vorlagennamen,
   links das Formular mit 560 px, beide Spalten scrollen fuer sich. Unter
   1000 px Fensterbreite einspaltig wie bisher.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {

	#insert_box.doc_preview_modal .box {
		width: 1060px;
		height: min(90vh, 900px);
		padding: 0;
		display: flex;
		overflow: hidden;
	}
	#insert_box.doc_preview_modal .box > .box_content {
		width: 560px;
		flex-shrink: 0;
		overflow-y: auto;
		padding: 28px;
		box-sizing: border-box;
		scrollbar-width: thin;
	}
}
#insert_box.doc_preview_modal .doc_preview {
	flex: 1;
	min-width: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	padding: 28px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	background: rgba(0,0,0,.18);
	border-left: 1px solid var(--border-default);
}
[data-theme="light"] #insert_box.doc_preview_modal .doc_preview {
	background: rgba(0,0,0,.04);
}
@media (max-width: 999px) {

	#insert_box.doc_preview_modal .doc_preview {
		display: none;
	}
}
.doc_preview .doc_preview_head {
	align-self: stretch;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.doc_preview .doc_preview_head .lbl {
	font: 500 12px var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.doc_preview .doc_preview_head .name {
	font: 400 12px var(--font-body);
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.doc_preview .doc_preview_pages {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 32px;
	transition: opacity .2s;
}
.doc_preview.laedt .doc_preview_pages {
	opacity: .55;
}
.doc_preview .doc_preview_page {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.doc_preview .doc_preview_page img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 210 / 297;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 6px 24px rgba(0,0,0,.28);
}
.doc_preview .doc_preview_page figcaption {
	font: 500 11px var(--font-body);
	color: var(--text-muted);
}
.doc_preview .doc_preview_pdf {
	width: 100%;
	aspect-ratio: 210 / 297;
	border: 0;
}
.doc_preview .doc_preview_hint {
	margin: 40px 0 0;
	max-width: 280px;
	text-align: center;
	font: 400 13px/1.5 var(--font-body);
	color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Listen in Karten (17.10.2026, ui_kits/app/datatable.jsx, DataTable bare):
   Listen in Einstellungs- und Admin-Karten laufen links und rechts bis an
   den Kartenrand, wie die eigenstaendigen Listen. Kopf- und Zeilenlinien
   gehen ueber die volle Kartenbreite, das Kaestchen sitzt 20 px vom Rand,
   die Punkte 14 px. Karten sind .settings-card und die Abschnitte aus
   part.form-fields.html (.data > ul), beide mit 24 px Innenabstand. Nur in
   diesem Kontext, die Listenregeln selbst bleiben unberuehrt.
   -------------------------------------------------------------------------- */
.settings-card,
.data > ul {
	--card-pad: 24px;
}
:is(.settings-card, .data > ul) :is(.list-card, .data:has(> .scrollable > .list-legend)) {
	width: auto;
	max-width: none;
	margin-left: calc(-1 * var(--card-pad));
	margin-right: calc(-1 * var(--card-pad));
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
:is(.settings-card, .data > ul) .list-card .list-legend,
:is(.settings-card, .data > ul) .list-card .scrollable:last-child .list-view > li:last-child {
	border-radius: 0;
}
/* Knopf unter der Liste (part.settings-list.html) bleibt im Innenabstand */
:is(.settings-card, .data > ul) .data:has(> .scrollable > .list-legend) > .options {
	padding-left: var(--card-pad);
	padding-right: var(--card-pad);
}
/* Punkte im Kopf und in den Zeilen 14 px vom Kartenrand, auf einer Flucht */
:is(.settings-card, .data > ul) .list-legend p.table-options,
:is(.settings-card, .data > ul) .list-view li .options {
	right: 14px;
}
:is(.settings-card, .data > ul) .list-edge.right .edge-cell {
	padding-right: 14px;
}
/* Die Leiste der Sammelaktion steht nur da, solange etwas markiert ist;
   ohne sichtbaren Inhalt nimmt ihre Zeile keinen Platz weg */
:is(.settings-card, .data > ul) .list-filter:not(:has(> :not([hidden]):not(.spacer))) {
	display: none;
}
/* Mit Seitenaufteilung behaelt die letzte Zeile ihre Linie */
:is(.settings-card, .data > ul) :is(.list-card, .data):has(+ .list-footer) .list-view > li:last-child {
	border-bottom: 1px solid var(--border-default);
}

/* Kopien der Kaestchen am linken Rand: ".data input" zieht sie sonst auf
   volle Breite (Einstellungskarten sind .data) */
.data .list-edge.left .edge-cell .multi-select {
	width: 15px;
	height: 15px;
}

/* Zeilen, die sich nicht waehlen lassen: ausgegrautes Kaestchen, Grund im title */
.list-view > li > p[data-id='select'] .multi-select:disabled,
.list-edge.left .edge-cell .multi-select:disabled {
	opacity: .35;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   E-Mail-Vorlagen (js/mailtemplates.js, ui_kits/app/mail-vorlagen.jsx):
   Liste unter Einstellungen › E-Mails, Editor mit WYSIWYG im iframe, Dialog
   "Per E-Mail senden". Overlay, Titel, Rueckfrage und Fusszeile teilen sich
   die Klassen mit dem Vorlagen-Editor der Dokumente (bt_*).
   --------------------------------------------------------------------------- */
.mt_kapsel {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	font: 500 11px/1.2 var(--font-body);
	letter-spacing: normal;
	text-transform: none;
	color: var(--text-secondary);
	white-space: nowrap;
	vertical-align: middle;
}
.mt_kapsel.akzent {
	margin: 0 6px 0 0;
	border-color: rgba(var(--accent-rgb),.45);
	background: rgba(var(--accent-rgb),.08);
	font-weight: 600;
	color: var(--accent);
}
.mail_templates.list-view > li p[data-id="betreff"] {
	font: 400 12px var(--font-mono, ui-monospace, Menlo, monospace);
	color: var(--text-muted);
}
.mail_templates.list-view > li p[data-id="standard"] .none,
.mail_templates.list-view > li p[data-id="updated"] {
	color: var(--text-muted);
}
.mail_templates.list-view > li p[data-id="name"],
.mail_templates.list-view > li p[data-id="standard"] {
	gap: 6px;
}
.mail_templates.list-view > li .mt_kapsel {
	margin: 0;
}
/* Datum und Kopf "Geändert" nie anschneiden, schmal wird der Betreff */
.mail_templates.list-view > li p[data-id="updated"],
.list-card:has(.mail_templates) .list-legend p[data-id="updated"] {
	flex-shrink: 0;
	min-width: 116px;
	white-space: nowrap;
}
.mail_templates.list-view > li p[data-id="betreff"] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mail_templates.list-view > li p[data-id="name"] .mt_name {
	overflow: hidden;
	text-overflow: ellipsis;
}
.mail_templates.list-view > li p[data-id="select"] input:disabled + label {
	opacity: .35;
	cursor: not-allowed;
}

/* Editor und Versand-Dialog */
.mt_editor,
.mt_send {
	width: min(820px, 100%);
	height: min(90vh, 900px);
	display: flex;
	flex-direction: column;
	background: var(--modal-bg);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-pop);
	overflow: hidden;
	color: var(--text-primary);
	animation: bc-pop-in .25s cubic-bezier(.3,.9,.35,1.1) both;
}
.mt_send {
	width: min(720px, 100%);
	height: auto;
	max-height: 90vh;
}
.mt_kopf {
	padding: 28px 28px 18px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.mt_kopf h2 .mt_kapsel {
	margin-left: 0;
}
.mt_felder {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	gap: 14px;
	align-items: start;
}
.mt_feld {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
}
.mt_feld.voll {
	grid-column: 1 / -1;
}
.mt_label {
	font: 500 12px var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.mt_feld input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	height: 40px;
}
.mt_feld .multiselect {
	width: 100%;
}
/* Mit offenem Bereich Anrede waechst der Kopf; der Editor behaelt dann
   mindestens 320 px und der Dialog scrollt */
.mt_editor:has(.mt_anrede.offen) {
	overflow-y: auto;
}
.mt_editor:has(.mt_anrede.offen) .mt_inhalt {
	flex: none;
	height: 420px;
}
.mt_editor:has(.mt_anrede.offen) .bt_fuss {
	position: sticky;
	bottom: 0;
	z-index: 2;
	background: var(--surface-card);
}
.mt_inhalt {
	flex: 1;
	min-height: 0;
	padding: 0 28px 20px;
	display: flex;
	flex-direction: column;
}
.mt_wysiwyg {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.mt_wysiwyg:focus-within {
	border-color: var(--border-strong);
	box-shadow: none;
}
.mt_wysiwyg .editor_toolbar {
	overflow: visible;
}
.mt_flaeche {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	justify-content: center;
	overflow: hidden;
	border-radius: 0 0 var(--radius-m) var(--radius-m);
	background: rgba(0,0,0,.18);
}
.mt_speichern:disabled {
	opacity: .45;
	cursor: default;
	box-shadow: none;
	background: transparent;
}
.mt_flaeche[hidden],
.mt_quelle[hidden] {
	display: none;
}
.mt_frame {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
	background: #fff;
}
.mt_quelle {
	flex: 1;
	min-height: 0;
	resize: none;
	box-sizing: border-box;
	padding: 12px 14px;
	border: none;
	border-radius: 0 0 var(--radius-m) var(--radius-m);
	outline: none;
	background: rgba(0,0,0,.25);
	color: var(--text-primary);
	font: 400 12.5px/1.6 var(--font-mono, ui-monospace, Menlo, monospace);
	white-space: pre;
	overflow: auto;
}
.mt_wysiwyg.html_mode .editor_btn:not([data-mt="code"]),
.mt_wysiwyg.html_mode .mt_drop {
	opacity: .35;
	pointer-events: none;
}
/* Textfarbe: A mit Akzentstrich, das Farbfeld liegt unsichtbar darin */
.mt_farbe {
	position: relative;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
}
.mt_farbe_a {
	font: 700 14px/1 var(--font-body);
	padding-bottom: 1px;
	border-bottom: 3px solid var(--accent);
}
.mt_farbe_wahl {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	border: none;
	padding: 0;
}
/* Platzhalter und Medien: Knopf mit Text und Dropdown */
.mt_drop {
	position: relative;
	display: inline-flex;
	margin-right: 6px;
}
.mt_drop_knopf {
	height: 32px;
	padding: 0 11px;
	gap: 7px;
	border-radius: var(--radius-s);
	border: 1px solid var(--border-strong);
	background: var(--surface-raised);
	color: var(--text-secondary);
	font: 600 12px var(--font-body);
}
.mt_drop_knopf:hover {
	box-shadow: none;
}
.mt_drop.open .mt_drop_knopf {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
	color: var(--accent);
}
.mt_drop_menu {
	display: none;
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	z-index: 60;
	width: 310px;
	max-height: 380px;
	overflow: auto;
	box-sizing: border-box;
	padding: 6px;
	border-radius: var(--radius-m);
	background: var(--surface-card);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-pop);
	animation: bc-fade-in .12s ease both;
}
.mt_drop.rechts .mt_drop_menu {
	left: auto;
	right: 0;
	width: 330px;
}
.mt_drop.open .mt_drop_menu {
	display: block;
}
.mt_platzhalter a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: var(--radius-s);
	cursor: pointer;
	text-decoration: none;
}
.mt_platzhalter a:hover {
	background: rgba(var(--accent-rgb),.07);
	text-decoration: none;
}
.mt_platzhalter a .txt {
	flex: 1;
	font: 500 13px var(--font-body);
	color: var(--text-secondary);
}
.mt_platzhalter a code {
	font: 400 11px var(--font-mono, ui-monospace, Menlo, monospace);
	color: var(--text-muted);
	background: none;
	padding: 0;
}
.mt_drop_titel {
	padding: 4px 6px;
	font: 600 11px var(--font-body);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.mt_medien_upload {
	padding: 4px 4px 8px;
}
.mt_upload {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	gap: 6px;
	border-radius: var(--radius-s);
	border: 1px dashed var(--accent);
	background: rgba(var(--accent-rgb),.05);
	color: var(--accent);
	font: 600 12px var(--font-body);
}
.mt_upload:hover {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.1);
	color: var(--accent);
	box-shadow: none;
}
.mt_upload_fehler {
	margin: 8px 2px 0;
	font: 500 12px/1.4 var(--font-body);
	color: var(--danger);
}
.mt_upload_fehler[hidden] {
	display: none;
}
.mt_leer {
	display: block;
	margin: 6px 6px 10px;
	font: 400 12px/1.5 var(--font-body);
	color: var(--text-muted);
}
.mt_medium {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 6px;
	border-radius: var(--radius-s);
	cursor: pointer;
}
.mt_medium:hover {
	background: rgba(var(--accent-rgb),.07);
}
.mt_medium.aktiv {
	box-shadow: inset 0 0 0 1px var(--accent);
}
.mt_medium_bild {
	width: 44px;
	height: 36px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 6px;
	background: #F4F4F1;
	border: 1px solid var(--border-default);
}
.mt_medium_bild img {
	max-width: 38px;
	max-height: 30px;
	object-fit: contain;
}
.mt_medium_text {
	flex: 1;
	min-width: 0;
}
.mt_medium_name,
.mt_medium_info {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mt_medium_name {
	font: 500 13px var(--font-body);
	color: var(--text-primary);
}
.mt_medium_info {
	font: 400 11px var(--font-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
}
.mt_medium_weg {
	width: 28px;
	height: 28px;
	padding: 0;
	flex-shrink: 0;
	border: none;
	border-radius: var(--radius-s);
	color: var(--text-muted);
}
.mt_medium_weg:hover {
	color: var(--danger);
	box-shadow: none;
}
.mt_medium_frage {
	margin: 2px 0;
	padding: 10px;
	border-radius: var(--radius-s);
	background: rgba(255,69,58,.08);
	border: 1px solid rgba(255,69,58,.35);
}
.mt_frage_titel {
	margin-bottom: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 600 13px var(--font-body);
	color: var(--text-primary);
}
.mt_frage_text {
	margin-bottom: 10px;
	font: 400 12px/1.45 var(--font-body);
	color: var(--text-muted);
}
.mt_frage_knoepfe {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.mt_frage_knoepfe button {
	height: 28px;
	padding: 0 10px;
	border-radius: var(--radius-s);
	font: 600 12px var(--font-body);
}
.mt_frage_ja {
	border-color: var(--danger);
	color: var(--danger);
}
.mt_frage_ja:hover {
	border-color: var(--danger);
	color: var(--danger);
	box-shadow: 0 0 12px rgba(242,109,109,.3);
}
/* Bild-Leiste unter dem angeklickten Bild, bleibt in der Editorflaeche */
.mt_bildleiste {
	position: absolute;
	z-index: 40;
	box-sizing: border-box;
	max-width: calc(100% - 16px);
	background: var(--surface-card);
	border: 1px solid var(--accent);
	border-radius: var(--radius-m);
	box-shadow: var(--glow-border);
	animation: bc-fade-in .12s ease both;
}
.mt_bildleiste.offen {
	width: 336px;
}
.mt_bild_knoepfe {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
}
.mt_bild_knoepfe button {
	height: 30px;
	padding: 0 10px;
	gap: 6px;
	border: none;
	border-radius: var(--radius-s);
	color: var(--text-secondary);
	font: 600 12px var(--font-body);
}
.mt_bild_knoepfe button:hover {
	box-shadow: none;
	background: var(--ink-800);
}
.mt_bild_knoepfe button.on {
	background: rgba(var(--accent-rgb),.10);
	color: var(--accent);
}
.mt_bild_knoepfe .mt_bild_loeschen {
	color: var(--danger);
}
.mt_bild_knoepfe .mt_bild_loeschen:hover {
	color: var(--danger);
}
.mt_bild_sep {
	width: 1px;
	height: 18px;
	margin: 0 4px;
	background: var(--border-strong);
}
.mt_bild_panel {
	padding: 8px;
	border-top: 1px solid var(--border-default);
}
.mt_bild_panel .mt_drop_titel {
	padding: 12px 4px 4px;
}
.mt_medienliste {
	max-height: 220px;
	overflow-y: auto;
}
.mt_alt_panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mt_alt_panel input[type="text"] {
	height: 34px;
}
.mt_hinweis {
	font: 400 11px/1.4 var(--font-body);
	color: var(--text-muted);
}
.mt_alt_ok {
	align-self: flex-end;
	height: 30px;
	padding: 0 12px;
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
	color: var(--accent);
	font: 600 12px var(--font-body);
	border-radius: var(--radius-s);
}

/* Versand-Dialog */
.mt_send_inhalt {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 0 28px 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.mt_send .mt_kopf {
	padding-bottom: 14px;
}
.mt_send .select {
	width: 100%;
}
.mt_nachricht_kopf {
	display: flex;
	align-items: center;
	gap: 10px;
}
.mt_nachricht_kopf .mt_label {
	flex: 1;
}
.mt_angepasst {
	font: 500 12px var(--font-body);
	color: var(--text-muted);
}
.mt_angepasst[hidden] {
	display: none;
}
.mt_angepasst a {
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
/* Nachricht im selben WYSIWYG wie die Vorlagen, 400 px hoch */
.mt_send .mt_send_editor {
	flex: none;
	height: 400px;
}
.mt_send_info {
	font: 400 12px/1.45 var(--font-body);
	color: var(--text-muted);
}
/* Feld "An" mit Auswahl aus den Kontakten der Firma */
.mt_an_wrap {
	position: relative;
	display: block;
}
.mt_send .mt_an_wrap .mt_an {
	padding-right: 36px;
}
.mt_an_pfeil {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	color: var(--text-muted);
	cursor: pointer;
}
.mt_an_menu {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 60;
	max-height: 260px;
	overflow-y: auto;
	padding: 6px;
	background: var(--surface-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-pop);
}
.mt_an_menu[hidden] {
	display: none;
}
.mt_send .mt_an_menu .mt_an_wahl {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	height: auto;
	min-width: 0;
	box-sizing: border-box;
	font: inherit;
	gap: 2px;
	width: 100%;
	padding: 8px 10px;
	border: none;
	border-radius: var(--radius-s);
	background: transparent;
	text-align: left;
	cursor: pointer;
}
.mt_send .mt_an_menu .mt_an_wahl:hover {
	background: rgba(var(--accent-rgb),.05);
}
.mt_send .mt_an_menu .mt_an_wahl.on {
	background: rgba(var(--accent-rgb),.08);
}
.mt_an_name {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	gap: 8px;
	font: 500 13px var(--font-body);
	color: var(--text-primary);
}
.mt_an_name .mt_kapsel {
	margin: 0;
}
.mt_an_zeile {
	display: block;
	max-width: 100%;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
.mt_an_hinweis {
	font: 400 12px/1.4 var(--font-body);
	color: var(--text-muted);
}
.mt_an_hinweis[hidden] {
	display: none;
}
.mt_an_hinweis.warnung {
	color: var(--warning);
}
.mt_an_hinweis a {
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
/* Kontakt bearbeiten im Dialog: Anrede, Titel, Ansprache */
.mt_kontakt_edit {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
}
.mt_kontakt_edit[hidden] {
	display: none;
}
.mt_ke_zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.mt_ke_pillen {
	display: inline-flex;
	gap: 4px;
}
.mt_ke_pillen a {
	height: 32px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	color: var(--text-secondary);
	font: 600 12px var(--font-body);
	cursor: pointer;
	text-decoration: none;
	user-select: none;
}
.mt_ke_pillen a.on {
	border-color: var(--accent);
	background: rgba(var(--accent-rgb),.08);
	color: var(--accent);
}
.mt_send .mt_kontakt_edit .mt_ke_titel {
	width: 130px;
	height: 32px;
}
.mt_ke_fuss {
	display: flex;
	align-items: center;
	gap: 10px;
}
.mt_ke_vorschau {
	flex: 1;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
.mt_anhaenge {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.mt_check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	font: 500 13px var(--font-body);
	color: var(--text-secondary);
}
.mt_check input {
	width: 15px;
	height: 15px;
	accent-color: var(--accent);
}
.mt_send_fehler {
	margin: 0;
	font: 500 13px/1.4 var(--font-body);
	color: var(--danger);
}
.mt_send_fehler[hidden] {
	display: none;
}
.mt_send_hinweis {
	flex: 1;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}

@media (max-width: 770px) {
	.mt_overlay {
		padding: 0;
	}
	.mt_editor,
	.mt_send {
		width: 100%;
		height: 100%;
		max-height: none;
		border: none;
		border-radius: 0;
	}
	.mt_kopf {
		padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
	}
	.mt_felder {
		grid-template-columns: minmax(0,1fr);
	}
	.mt_inhalt {
		min-height: 520px;
		padding: 0 16px 16px;
	}
	.mt_editor {
		overflow-y: auto;
	}
	.mt_send_inhalt {
		padding: 0 16px 16px;
	}
	.mt_editor .bt_fuss,
	.mt_send .bt_fuss {
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	}
	.mt_send_hinweis {
		display: none;
	}
}
[data-theme="light"] .mt_quelle {
	background: var(--surface-raised);
}

/* Platzhalter-Menue in Gruppen, die Anrede oben hervorgehoben */
.mt_platzhalter .mt_drop_titel {
	margin-top: 6px;
}
.mt_platzhalter a.haupt .txt {
	font-weight: 600;
	color: var(--text-primary);
}

/* Vorlagen-Editor: Bereich Anrede, einklappbar */
.mt_anrede {
	border: 1px solid var(--border-default);
	border-radius: var(--radius-m);
	background: var(--surface-raised);
}
.mt_anrede_kopf {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 14px;
	border: none;
	background: transparent;
	cursor: pointer;
	text-align: left;
	color: var(--text-muted);
}
.mt_anrede_kopf .mt_label {
	color: var(--text-secondary);
}
.mt_anrede_info {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
.mt_anrede_kopf svg {
	transition: transform .15s;
}
.mt_anrede.offen .mt_anrede_kopf svg {
	transform: rotate(180deg);
}
.mt_anrede_inhalt {
	padding: 4px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mt_anrede_inhalt[hidden] {
	display: none;
}
.mt_formel {
	display: grid;
	grid-template-columns: 150px minmax(0,1fr) 64px;
	gap: 10px;
	align-items: center;
}
.mt_formel_name {
	font: 500 12px var(--font-body);
	color: var(--text-secondary);
}
.mt_formel .mt_formel_feld {
	width: 100%;
	height: 34px;
	box-sizing: border-box;
	font: 400 13px var(--font-body);
}
.mt_formel_vorgabe {
	font: 600 12px var(--font-body);
	cursor: pointer;
	text-decoration: none;
}
.mt_formel_vorgabe[hidden] {
	display: none;
}
.mt_formel_fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}
.mt_formel_einfuegen {
	margin-right: 2px;
	font: 500 12px var(--font-body);
	color: var(--text-muted);
}
.mt_formel_kapsel {
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: transparent;
	color: var(--text-secondary);
	font: 500 12px var(--font-body);
	cursor: pointer;
}
.mt_formel_kapsel:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.mt_formel_beispiel {
	flex: 1;
	text-align: right;
	font: 400 12px var(--font-body);
	color: var(--text-muted);
}
@media (max-width: 770px) {
	.mt_formel {
		grid-template-columns: minmax(0,1fr);
		gap: 4px;
	}
	.mt_formel_beispiel {
		flex-basis: 100%;
		text-align: left;
	}
}