/* ════════════════════════════════════════════════════════════════════
   Dazzana Control — Design-System
   Tokens entsprechen der Dazzana-CI (dazzana.de).
   ════════════════════════════════════════════════════════════════════ */

@font-face {
	font-family: "Inter";
	src: url("/static/fonts/inter-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #FFFFFF;
	--bg-subtle: #F5F7FA;
	--bg-rail: #FAFBFC;
	--border: #E6E9EE;
	--border-strong: #D4D9E1;
	--text: #1B2230;
	--text-2: #586073;
	--text-3: #8A92A3;
	--brand: #3B6FB5;
	--brand-hover: #2F5A95;
	--brand-tint: #EAF1F9;
	--brand-deep: #244671;
	--blue: #3F5BD9;
	--blue-tint: #EEF0FB;
	--green: #1E9E6A;
	--green-tint: #E4F4ED;
	--amber: #C8881A;
	--amber-tint: #FBF0DC;
	--violet: #7A5BD9;
	--violet-tint: #EFEBFB;
	--red: #D14343;
	--red-tint: #FBE9E9;
	--radius: 8px;
	--radius-sm: 6px;
	--radius-lg: 12px;
	--shadow-sm: 0 1px 2px rgba(20,29,36,.04), 0 1px 3px rgba(20,29,36,.06);
	--shadow-md: 0 4px 12px rgba(20,29,36,.06), 0 2px 4px rgba(20,29,36,.04);
	--shadow-lg: 0 12px 32px rgba(20,29,36,.1), 0 4px 8px rgba(20,29,36,.05);
	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

/* ── Reset (SVG bewusst ausgenommen) ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
	background: var(--bg-subtle);
	font-feature-settings: "tnum" 0;
	-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden], [x-cloak] { display: none !important; }

.ic { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Beträge & Kennziffern laufen überall mit Tabellenziffern */
.num, td.num, .kpi-value, .doc-table td, .sum-row { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: .01em; }

/* ════════════════════════════════════════════════════════════════════
   Shell: Rail + Stage
   ════════════════════════════════════════════════════════════════════ */

.shell { display: flex; min-height: 100vh; }

.rail {
	width: 240px;
	flex: none;
	background: var(--bg-rail);
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
}

.rail-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 18px 6px;
}
.brand-mark { width: 30px; height: 30px; border-radius: 8px; box-shadow: var(--shadow-sm); }
.brand-word { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.brand-word em { font-style: normal; font-weight: 450; color: var(--text-2); }

.rail-client {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 10px 14px 14px;
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-2);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	line-height: 1.35;
}
.rail-client .ic { width: 14px; height: 14px; color: var(--text-3); margin-top: 1px; }
.rail-client-text { display: flex; flex-direction: column; min-width: 0; }

.rail-nav { flex: 1; padding: 0 10px; overflow-y: auto; }
.nav-group { margin-bottom: 18px; }
.nav-label {
	padding: 0 10px 6px;
	font-size: 10.5px;
	font-weight: 650;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-3);
}
.nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	margin-bottom: 1px;
	border-radius: var(--radius);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text-2);
	transition: background .12s, color .12s;
}
.nav-item .ic { color: var(--text-3); transition: color .12s; }
.nav-item:hover { background: rgba(59,111,181,.06); color: var(--text); }
.nav-item.is-active { background: var(--brand-tint); color: var(--brand-deep); font-weight: 600; }
.nav-item.is-active .ic { color: var(--brand); }
.nav-badge {
	margin-left: auto;
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 99px;
	background: var(--brand);
	color: #fff;
	font-size: 11px;
	font-weight: 650;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.nav-badge.is-zero { display: none; }

.rail-foot { padding: 14px; border-top: 1px solid var(--border); }
.server-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	color: var(--text-2);
	padding: 8px 10px;
	background: var(--green-tint);
	border: 1px solid rgba(30,158,106,.18);
	border-radius: var(--radius);
}
.server-chip b { font-weight: 650; color: #16744E; }
/* Ist der Beleg-Leser nicht eingerichtet oder nicht erreichbar, sagt der
   Chip das auch farblich — grün wäre dort ein falsches Versprechen. */
.server-chip.is-aus { background: var(--bg-subtle); border-color: var(--border); }
.server-chip.is-aus b { color: var(--text-2); }
.server-chip.is-aus .pulse-dot { background: var(--text-3); animation: none; }
.server-chip.is-fehler { background: var(--red-tint); border-color: rgba(209,67,67,.25); }
.server-chip.is-fehler b { color: #A33; }
.server-chip.is-fehler .pulse-dot { background: var(--red); animation: none; }
.pulse-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green); animation: pulse 2.4s ease infinite; }
@keyframes pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(30,158,106,.35); }
	50% { box-shadow: 0 0 0 5px rgba(30,158,106,0); }
}
.reset-link {
	margin-top: 10px;
	font-size: 11.5px;
	color: var(--text-3);
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}
.reset-link:hover { color: var(--red); }

/* ── Topbar ──────────────────────────────────────────────────────────── */

.stage { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 56px;
	padding: 0 28px;
	background: rgba(255,255,255,.88);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 40;
}
.globalsearch {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 0 1 460px;
	height: 36px;
	padding: 0 12px;
	background: var(--bg-subtle);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text-3);
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.globalsearch:focus-within { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.globalsearch input { flex: 1; border: 0; outline: 0; background: none; font-size: 13.5px; color: var(--text); }
.globalsearch input::placeholder { color: var(--text-3); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.sync-chip {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--text-2);
	padding: 6px 11px;
	border: 1px solid var(--border);
	border-radius: 99px;
	background: var(--bg);
}
.sync-chip .ic { width: 13px; height: 13px; color: var(--green); }
.sync-chip b { font-weight: 600; }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.user-meta b { font-size: 13px; font-weight: 600; }
.user-meta i { font-style: normal; font-size: 11.5px; color: var(--text-3); }

/* ── Avatare ─────────────────────────────────────────────────────────── */

.avatar {
	width: 30px;
	height: 30px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: .02em;
}
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.av-brand  { background: var(--brand-tint);  color: var(--brand-deep); }
.av-violet { background: var(--violet-tint); color: var(--violet); }
.av-green  { background: var(--green-tint);  color: #16744E; }
.av-amber  { background: var(--amber-tint);  color: #92651A; }
.av-blue   { background: var(--blue-tint);   color: var(--blue); }
.avatar-row { display: flex; }
.avatar-row .avatar { box-shadow: 0 0 0 2px #fff; }
.avatar-row .avatar + .avatar { margin-left: -7px; }

/* ════════════════════════════════════════════════════════════════════
   Seiten-Grundgerüst
   ════════════════════════════════════════════════════════════════════ */

#main { flex: 1; }
.page {
	max-width: 100%;
	margin: 0 auto;
	padding: 26px 28px 64px;
}
/* page-wide bleibt als Klasse bestehen — sie unterscheidet sich nicht
   mehr, seit die Seite die volle Breite nutzt. */
.page.page-wide { max-width: 100%; }
/* Mehrzeilige Zusatzangaben in Tabellen auf zwei Zeilen begrenzen. */
.cell-sub.clamp2 {
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
	-webkit-box-orient: vertical; overflow: hidden;
}

.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.page-head h1 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.page-head .sub { color: var(--text-2); font-size: 13px; margin-top: 3px; }
.page-head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.module-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .04em;
	background: var(--brand-tint);
	color: var(--brand-deep);
	vertical-align: 3px;
}

/* ── Karten ──────────────────────────────────────────────────────────── */

.card {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}
.card-head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--border);
}
.card-head h2 { font-size: 13.5px; font-weight: 650; }
.card-head .ic { color: var(--text-3); }
.card-head .hint { margin-left: auto; font-size: 12px; color: var(--text-3); }
.card-body { padding: 18px; }
.card-body.tight { padding: 0; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 34px;
	padding: 0 14px;
	border-radius: var(--radius);
	border: 1px solid var(--border-strong);
	background: var(--bg);
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	transition: background .12s, border-color .12s, transform .05s;
	white-space: nowrap;
}
.btn:hover { background: var(--bg-subtle); border-color: #C3C9D4; }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 15px; height: 15px; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-ghost { border-color: transparent; background: none; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-subtle); }
/* Quadratischer Umschalter für einen Zustand, der anderswo schon
   beschriftet ist (z. B. Priorität). */
.btn-icon { padding: 0; width: 34px; justify-content: center; font-size: 15px; color: var(--text-3); }
.btn-icon.is-on { color: #C9892F; background: var(--amber-tint); border-color: rgba(200,136,26,.35); }
/* Während der Anfrage tritt der Ladekreis an die Stelle des Zeichens —
   nebeneinander passen beide nicht in den quadratischen Knopf. */
.btn-icon.htmx-request .btn-icon-glyph { display: none; }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: #B83A3A; border-color: #B83A3A; }
.del-wrap { display: inline-flex; align-items: center; }
.del-confirm { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.btn.sm { height: 29px; padding: 0 11px; font-size: 12.5px; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* htmx-Ladezustand: Button zeigt Spinner */
.btn .spinner { display: none; }
/* is-busy setzt app.js auf den Knopf, der abgeschickt hat — htmx markiert
   nur das Formular, der Spinner säße damit nie im gedrückten Knopf. */
.btn.is-busy .spinner, .btn.htmx-request .spinner { display: inline-block; }
.btn.is-busy, .btn.htmx-request { pointer-events: none; opacity: .75; }

.spinner {
	width: 13px; height: 13px; flex: none;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	display: inline-block;
	animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Pills & Status ──────────────────────────────────────────────────── */

.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill .ic { width: 12.5px; height: 12.5px; }
.pill .spinner { width: 11px; height: 11px; border-width: 1.5px; }
.pill-green   { background: var(--green-tint);  color: #16744E; }
.pill-amber   { background: var(--amber-tint);  color: #92651A; }
/* Begleittext zu einem Warnzustand — etwa der Grund, warum eine
   Nachricht im Postausgang liegen bleibt. */
.cell-warn { color: #92651A; margin-top: 3px; }
.pill-red     { background: var(--red-tint);    color: var(--red); }
.pill-blue    { background: var(--blue-tint);   color: var(--blue); }
.pill-violet  { background: var(--violet-tint); color: var(--violet); }
.pill-neutral { background: var(--bg-subtle);   color: var(--text-2); border: 1px solid var(--border); }

/* ── Tabellen ────────────────────────────────────────────────────────── */

.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
	padding: 10px 14px;
	text-align: left;
	font-size: 10.5px;
	font-weight: 650;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-3);
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; }
.tbl th.num { text-align: right; }
.row-link { cursor: pointer; transition: background .1s; }
.row-link:hover { background: var(--bg-subtle); }
.cell-main { font-weight: 600; }
.cell-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.cell-sub.mono { font-size: 11.5px; }

.empty-state { padding: 44px 20px; text-align: center; color: var(--text-3); font-size: 13.5px; }

/* ── Formulare ───────────────────────────────────────────────────────── */

/* Grundform für jedes Eingabefeld im Inhaltsbereich — auch für die, an
   denen jemand die Klasse vergessen hat.
   
   Vorher galt die Form nur für .input/.select/.textarea und für Felder
   in einem .pform. Ein nacktes <input> in einer neuen Vorlage fiel
   dadurch auf die Browser-Vorgabe zurück und stand eckig und grau
   zwischen runden Nachbarn. Das ist keine Frage der Disziplin: Ein
   Feld, das man vergisst zu markieren, soll trotzdem aussehen wie ein
   Feld dieser Anwendung.

   Alles steht in :where(), damit die Regel die Spezifität eines
   Elementselektors hat — jede vorhandene Klassen- oder Kontextregel
   (.searchbox input, .letter-edit, .mono …) sticht sie weiterhin. */
:where(.page, .dokument, .panel, .modal) :where(
	input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]),
	select, textarea) {
	height: 34px;
	padding: 0 11px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--bg);
	font-size: 13px;
	color: var(--text);
	font-family: inherit;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
:where(.page, .dokument, .panel, .modal) :where(textarea) {
	height: auto; padding: 9px 11px; line-height: 1.55; resize: vertical;
}
:where(.page, .dokument, .panel, .modal) :where(input, select, textarea):focus {
	border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint);
}
:where(.page, .dokument, .panel, .modal) :where(input, select, textarea):disabled {
	background: var(--bg-subtle); color: var(--text-3); cursor: not-allowed;
}

/* Ein Eingabefeld, eine Definition. Sie gilt für die Klassen .input,
   .select und .textarea und ebenso für jedes Feld in einem
   Produktformular (.pform) — dort trägt nicht jedes Feld eine Klasse,
   und ein Feld mit Zusatzklasse (etwa .mono für IBANs) darf deswegen
   nicht in die Browser-Vorgabe zurückfallen. Genau das war der Grund,
   warum IBAN- und BIC-Felder eckig neben runden Nachbarn standen.

   Zusatzklassen sind Abwandlungen, keine Ersatzdefinitionen: .mono
   ändert die Schrift, .sm die Größe — die Form bleibt. */
.input, .select, .textarea,
.pform input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
.pform select,
.pform textarea {
	height: 34px;
	padding: 0 11px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--bg);
	font-size: 13px;
	color: var(--text);
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.textarea, .pform textarea {
	height: auto; padding: 9px 11px; line-height: 1.55; resize: vertical;
}
.input:focus, .select:focus, .textarea:focus,
.pform input:focus, .pform select:focus, .pform textarea:focus {
	border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint);
}
.input:disabled, .select:disabled, .pform input:disabled, .pform select:disabled {
	background: var(--bg-subtle); color: var(--text-3); cursor: not-allowed;
}
.pform label:not([class]) { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
/* Die sm-Variante ist für Tabellenzellen gedacht (volle Zellbreite) —
   in den Formularzeilen der Produktseiten zählt die Inhaltsbreite. */
.pform .select.sm, .pform .input.sm { width: auto; }
.pform .select, .pform select { min-width: 150px; }
/* Beschriftetes Feld in einer Formularzeile — für Angaben, die ohne
   Wort nicht verständlich sind (ein leeres Datumsfeld sagt nicht, wofür
   das Datum steht). */
.pfeld { display: inline-flex; flex-direction: column; gap: 2px; }
.pfeld > span { font-size: 11px; color: var(--text-3); }
.searchbox { display: flex; align-items: center; gap: 8px; padding: 0 11px; height: 34px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text-3); }
.searchbox:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.searchbox input { border: 0; outline: 0; background: none; width: 200px; font-size: 13px; color: var(--text); }

/* ════════════════════════════════════════════════════════════════════
   Dashboard
   ════════════════════════════════════════════════════════════════════ */

.dash-head { margin-bottom: 22px; }
.dash-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.dash-head .sub { color: var(--text-2); margin-top: 4px; font-size: 13.5px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.kpi { padding: 16px 18px; }
.kpi-label { font-size: 12px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.kpi-label .ic { width: 14px; height: 14px; color: var(--text-3); }
.kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 7px; line-height: 1.1; }
.kpi-value small { font-size: 15px; font-weight: 600; color: var(--text-2); }
.kpi-sub { font-size: 12px; color: var(--text-3); margin-top: 5px; }
.kpi-sub b { color: #16744E; font-weight: 650; }
.kpi-sub .neg { color: var(--red); font-weight: 650; }
.kpi.warn .kpi-value { color: #92651A; }
.kpi.alert .kpi-value { color: var(--red); }

.dash-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 14px; align-items: start; margin-bottom: 14px; }

.task-list li + li { border-top: 1px solid var(--border); }
.task-item { display: flex; align-items: center; gap: 13px; padding: 13px 18px; transition: background .1s; }
.task-item:hover { background: var(--bg-subtle); }
.task-ic {
	width: 34px; height: 34px; flex: none;
	display: flex; align-items: center; justify-content: center;
	border-radius: var(--radius);
	background: var(--brand-tint); color: var(--brand);
}
.task-ic.amber { background: var(--amber-tint); color: var(--amber); }
.task-ic.red { background: var(--red-tint); color: var(--red); }
.task-body { min-width: 0; }
.task-title { font-size: 13.5px; font-weight: 600; }
.task-meta { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.task-item > .ic { margin-left: auto; color: var(--text-3); }

/* Aktivitätsstrom mit Zeitleiste */
.stream { padding: 6px 0; }
.stream-item { display: flex; gap: 13px; padding: 9px 18px; position: relative; }
.stream-item::before {
	content: "";
	position: absolute;
	left: 33px; top: 36px; bottom: -10px;
	width: 1.5px;
	background: var(--border);
}
.stream-item:last-child::before { display: none; }
.stream-ic {
	width: 30px; height: 30px; flex: none;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--bg-subtle);
	border: 1px solid var(--border);
	color: var(--text-2);
	position: relative; z-index: 1;
}
.stream-ic .ic { width: 14px; height: 14px; }
.stream-ic.k-invoice { background: var(--brand-tint); border-color: transparent; color: var(--brand); }
.stream-ic.k-mail { background: var(--blue-tint); border-color: transparent; color: var(--blue); }
.stream-ic.k-export { background: var(--green-tint); border-color: transparent; color: #16744E; }
.stream-ic.k-dunning { background: var(--amber-tint); border-color: transparent; color: var(--amber); }
.stream-ic.k-delivery { background: var(--violet-tint); border-color: transparent; color: var(--violet); }
.stream-ic.k-kalk { background: var(--brand-tint); border-color: transparent; color: var(--brand); }
.stream-body { min-width: 0; font-size: 13px; }
.stream-meta { font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 7px; margin-bottom: 1px; }
.stream-badge { padding: 0 7px; border-radius: 99px; font-size: 10.5px; font-weight: 650; background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text-2); }
.stream-badge.b-auto { background: var(--green-tint); border-color: transparent; color: #16744E; }
.stream-badge.b-check { background: var(--amber-tint); border-color: transparent; color: #92651A; }
.stream-text a { color: var(--brand); font-weight: 550; }
.stream-text a:hover { text-decoration: underline; }

.auto-card { margin-top: 14px; }
.auto-row { display: flex; align-items: center; gap: 26px; }
.auto-stat b { display: block; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.auto-stat span { font-size: 12px; color: var(--text-3); }
.auto-bar { flex: 1; height: 8px; background: var(--bg-subtle); border-radius: 99px; overflow: hidden; }
.auto-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--green)); }
.auto-note { display: flex; gap: 7px; align-items: center; margin-top: 13px; font-size: 12px; color: var(--text-3); }
.auto-note .ic { width: 13px; height: 13px; color: var(--green); }

/* ════════════════════════════════════════════════════════════════════
   Rechnungseingang
   ════════════════════════════════════════════════════════════════════ */

.tab-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: 99px;
	border: 1px solid var(--border);
	background: var(--bg);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-2);
	cursor: pointer;
	transition: all .12s;
}
.tab:hover { border-color: var(--border-strong); color: var(--text); }
.tab.is-active { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.tab b { font-weight: 650; opacity: .65; font-variant-numeric: tabular-nums; }

.deviation-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #92651A; }
.deviation-chip .ic { width: 13px; height: 13px; }
.ok-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 550; color: #16744E; }
.ok-chip .ic { width: 13px; height: 13px; }
.muted-chip { font-size: 12px; color: var(--text-3); }

tr.is-parsing td { background: repeating-linear-gradient(100deg, transparent 0 96%, rgba(63,91,217,.04) 98%, transparent 100%); }

/* ── Rechnungsdetail ─────────────────────────────────────────────────── */

/* Kopfzone der Detailansicht: Titel, Kennzahlen, Aktionen und
   Prozessstand als ein gerahmter Block. Frei schwebende Zeilen über dem
   Seitenhintergrund lassen die Seite unfertig wirken. */
.detail-header {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 15px 18px 13px;
	margin-bottom: 16px;
}
.detail-header .detail-top { margin-bottom: 0; }
.detail-header .pipeline {
	margin: 13px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}
.detail-header .flag-banner { margin: 13px 0 0; }

/* Jede Detailansicht trägt ihre Kopfzeile als gerahmten Block — auch
   Stundenzettel, Lieferungen und Kontakte, nicht nur Rechnungen. */
.detail-top {
	display: flex; align-items: flex-start; gap: 16px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 15px 18px;
	margin-bottom: 16px;
}
/* In der zusammengesetzten Kopfzone rahmt bereits der Container. */
.detail-header .detail-top {
	background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 0;
}
.back-link {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 12.5px; font-weight: 600; color: var(--text-3);
	margin-bottom: 8px;
}
.back-link:hover { color: var(--brand); }
.back-link .ic { width: 13px; height: 13px; transform: rotate(180deg); }
.detail-title { display: flex; align-items: center; gap: 12px; }
.detail-title h1 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.detail-sub { color: var(--text-2); font-size: 13px; margin-top: 3px; }
.detail-actions { margin-left: auto; display: flex; gap: 9px; align-items: center; flex: none; }

/* Pipeline-Schritte */
.pipeline { display: flex; align-items: center; gap: 0; margin: 14px 0 18px; }
.pl-step { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.pl-dot {
	width: 22px; height: 22px; flex: none;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	border: 1.5px solid var(--border-strong);
	background: var(--bg);
	color: var(--text-3);
	font-size: 10.5px; font-weight: 650;
}
.pl-dot .ic { width: 12px; height: 12px; }
.pl-step.done { color: #16744E; }
.pl-step.done .pl-dot { background: var(--green-tint); border-color: transparent; color: #16744E; }
.pl-step.now { color: var(--brand-deep); }
.pl-step.now .pl-dot { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-tint); }
.pl-line { width: 36px; height: 1.5px; background: var(--border-strong); margin: 0 8px; }
.pl-line.done { background: var(--green); opacity: .45; }

.flag-banner {
	display: flex; gap: 11px;
	padding: 12px 16px;
	border-radius: var(--radius-lg);
	background: var(--amber-tint);
	border: 1px solid rgba(200,136,26,.25);
	margin-bottom: 16px;
	font-size: 13px;
}
.flag-banner .ic { color: var(--amber); margin-top: 1px; }
/* Erledigt: Der Beleg ist durch, die Punkte sind Historie. Sie bleiben
   lesbar, hören aber auf, wie eine offene Aufgabe auszusehen. */
.flag-banner.ist-erledigt,
.flag-banner.ist-erledigt b,
.flag-banner.ist-erledigt li,
.flag-banner.ist-erledigt .ref-hint { background: transparent; color: var(--text-2); }
.flag-banner.ist-erledigt { background: var(--bg-subtle); border-color: var(--border); }
.flag-banner.ist-erledigt .ic { color: var(--green); }
.flag-banner.ist-erledigt b { font-weight: 600; }
.flag-banner b { font-weight: 650; color: #92651A; }
.flag-banner ul { margin-top: 3px; color: #6E5217; }
.flag-banner li { display: flex; gap: 6px; align-items: baseline; }
.flag-banner li::before { content: "·"; font-weight: 700; }

.detail-grid { display: grid; grid-template-columns: minmax(380px, 5fr) 6fr; gap: 16px; align-items: start; }

/* Dritte Spalte für Sperren und Prüfpunkte. Als breite Bänder über dem
   Beleg schoben sie ihn nach unten, während daneben Platz frei blieb.
   Erst ab 1500 px — darunter stehen sie wieder oben über die volle
   Breite, wo sie niemandem den Beleg verengen. */
.detail-grid.mit-hinweisen > .hinweis-spalte { grid-column: 1 / -1; order: -1; }
.hinweis-spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hinweis-spalte > * { margin-bottom: 0; }

@media (min-width: 1500px) {
	.detail-grid.mit-hinweisen { grid-template-columns: minmax(340px, 4fr) minmax(0, 5fr) 340px; }
	/* Alle drei in dieselbe Zeile: Die Hinweisspalte steht im Quelltext
	   zuerst — ohne diese Zuweisung schöbe sie Beleg und Reiter in eine
	   zweite Zeile unter sich. */
	.detail-grid.mit-hinweisen > .hinweis-spalte { grid-column: 3; grid-row: 1; order: 0; }
	.detail-grid.mit-hinweisen > :not(.hinweis-spalte) { grid-row: 1; }
	/* In der schmalen Spalte umbrechen die Formulare, statt zu quetschen. */
	.hinweis-spalte .flag-banner { padding: 12px 14px; font-size: 12.5px; }
	.hinweis-spalte .ref-fix, .hinweis-spalte .stamm-fix,
	.hinweis-spalte .pform { flex-direction: column; align-items: stretch; gap: 8px; }
	.hinweis-spalte .ref-fix input, .hinweis-spalte .pform input,
	.hinweis-spalte .stamm-frei { width: 100%; min-width: 0; }
	.hinweis-spalte .stamm-frei { display: flex; }
	.hinweis-spalte .price-actions { flex-direction: column; align-items: stretch; }
	/* Der Umschalter bleibt so breit wie sein Text — „align-items:
	   stretch" der Spalte hätte ihn über die ganze Breite gezogen. */
	.hinweis-spalte .pk-umlage { align-self: flex-start; }
	/* Beim Blättern durch einen mehrseitigen Beleg soll stehen bleiben,
	   was zu tun ist. */
	.hinweis-spalte { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: hidden auto; }
	/* In der schmalen Spalte muss alles umbrechen dürfen: Eine IBAN in
	   Monospace ist breiter als 340 px und schob sonst den halben
	   Hinweis über den Rand. */
	.hinweis-spalte .flag-banner > div,
	.hinweis-spalte .pricecheck-banner > div { min-width: 0; }
	.hinweis-spalte .mono, .hinweis-spalte code { overflow-wrap: anywhere; }
	.hinweis-spalte .flag-banner b { overflow-wrap: anywhere; }
	/* Feste Feldbreiten aus der breiten Ansicht (min-width, size) passen
	   hier nicht mehr — in der Spalte gilt die Spaltenbreite. */
	.hinweis-spalte input, .hinweis-spalte .btn, .hinweis-spalte button,
	.hinweis-spalte select, .hinweis-spalte form {
		max-width: 100%; min-width: 0; box-sizing: border-box;
	}
	.hinweis-spalte .btn { white-space: normal; text-align: center; }
	/* In der Spalte läuft die Hauptachse senkrecht — dort wäre eine
	   flex-basis von 320 px eine Höhe, kein Feld. */
	.hinweis-spalte .begruendung-feld { flex: 0 0 auto; width: 100%; }
}
/* Steht über dem Detail-Raster eine Kennzahl-Zeile, müssen beide auf
   demselben Raster liegen — gleiche Spaltenzahl, gleiche Fuge. Sonst
   endet die linke Karte irgendwo zwischen zwei Kacheln und die Seite
   sieht verschoben aus. */
.detail-grid.kpi-aligned { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.detail-grid.kpi-aligned > * { grid-column: span 2; min-width: 0; }
.detail-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Tabs der rechten Detail-Spalte */
/* Rechte Spalte ist eine Karte; die Reiter sitzen in ihrer Kopfzeile —
   also unmittelbar über dem Inhalt, den sie steuern. */
.detail-side {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.detail-side > .card {
	border: 0; border-radius: 0; box-shadow: none; background: none;
}
.detail-side > .card + .card { border-top: 0; }
/* Kein sticky mehr: Die Reiter sitzen fest in der Kopfzeile ihrer Karte.
   Innerhalb eines Containers mit overflow:hidden würde sticky ohnehin
   nicht am Viewport kleben, sondern die Leiste nur um ihren Offset nach
   unten schieben — über die Kartenüberschrift hinweg. */
.side-tabs {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	padding: 10px 12px;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
}
.tab-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	border-radius: 99px;
	background: var(--amber);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.tab.is-active .tab-flag { background: rgba(255,255,255,.28); }

/* Der Beleg als Papier */
/* Herkunft des Belegs: Scan (KI-Lesung) vs. PDF mit Textebene */
.src-tag {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 9px; border-radius: 999px;
	font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.src-tag .ic { width: 13px; height: 13px; }
.src-scan { background: var(--violet-tint); color: var(--violet); }
.src-pdf  { background: #EEF1F6; color: var(--text-2); }
/* Quelle und Betrag sollen nicht mitten im Wort umbrechen. */
.src-tag + .cell-sub { white-space: nowrap; }
.tbl td.num > b { white-space: nowrap; }

/* Fristen in der Rechnungsliste: eilig (≤ 2 Tage) vs. verfallen */
.frist-eilig { color: var(--red); font-weight: 700; }
.frist-weg   { color: var(--text-3); font-weight: 600; text-decoration: line-through; }

.paper-wrap { position: sticky; top: 76px; }
/* Echtes Beleg-PDF (Kundenkonvolut + Uploads) */
.paper-pdf { width: 100%; height: calc(100vh - 150px); min-height: 640px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(23, 32, 48, .10); }
.paper-pdf-fallback { margin-top: 8px; text-align: center; }
/* Linke Spalte spiegelt die rechte: Karte mit Kopfzeile, darin der
   Originalbeleg. */
.paper-wrap.as-card {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.paper-wrap.as-card .paper-label {
	margin: 0;
	padding: 10px 14px;
	background: var(--bg-subtle);
	border-bottom: 1px solid var(--border);
	min-height: 42px;
}
/* Ohne Kopfzeile beginnt der Beleg direkt an der Kartenkante. */
.paper-wrap.as-card .paper-pdf { border: 0; border-radius: 0; box-shadow: none; height: calc(100vh - 166px); display: block; }

/* Belegseiten als Bilder: scrollbarer Stapel, jede Seite eine Fläche.
   Kein Rahmen, kein Betrachter-Chrom — das Dokument selbst ist die
   Oberfläche. */
.beleg-pages { max-height: calc(100vh - 166px); overflow-y: auto; background: var(--bg); }
.beleg-page { display: block; width: 100%; height: auto; }
.beleg-page + .beleg-page { border-top: 1px solid var(--border); }
.beleg-foot-hint { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-3); }
.beleg-foot-hint svg { width: 13px; height: 13px; color: var(--green); }
.beleg-foot { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--border); text-align: center; }
.paper-wrap.as-card .paper { margin: 14px; }
.paper-wrap.as-card .paper-pdf-fallback { padding: 0 14px 14px; }

/* Fehlendes Original: kein leerer Rahmen, sondern der Befund. */
.beleg-fehlt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 28px; text-align: center; color: var(--text-2); }
.beleg-fehlt svg { width: 26px; height: 26px; color: var(--amber); }
.beleg-fehlt b { color: var(--text-1); font-size: 14px; }
.beleg-fehlt p { margin: 0; max-width: 46ch; font-size: 12.5px; line-height: 1.55; }
.beleg-fehlt .mono { font-size: 11px; color: var(--text-3); word-break: break-all; }

.paper-label { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }
.paper-label .pdf { padding: 1px 6px; border-radius: 4px; background: var(--red-tint); color: var(--red); font-size: 10px; letter-spacing: .04em; }
.paper {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 4px;
	box-shadow: var(--shadow-lg);
	padding: 34px 36px;
	font-size: 12px;
	line-height: 1.55;
	color: #2A3142;
	max-height: calc(100vh - 150px);
	overflow-y: auto;
}
.paper-head { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.paper-logo {
	width: 38px; height: 38px;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	background: var(--brand-deep);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .02em;
}
.paper-vendor { text-align: right; font-size: 11px; color: var(--text-2); }
.paper-vendor b { display: block; font-size: 12.5px; color: var(--text); }
.paper-addr { font-size: 11px; color: var(--text-2); margin-bottom: 24px; }
.paper-addr .ret { font-size: 9px; text-decoration: underline; color: var(--text-3); margin-bottom: 7px; }
.paper-addr b { color: var(--text); font-size: 12px; }
.paper h3 { font-size: 15px; margin-bottom: 3px; letter-spacing: -.01em; }
.paper-meta { display: flex; gap: 22px; flex-wrap: wrap; margin: 10px 0 18px; font-size: 11px; color: var(--text-2); }
.paper-meta b { display: block; color: var(--text); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.paper table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.paper th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); border-bottom: 1px solid var(--border-strong); padding: 5px 6px; }
.paper td { padding: 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.paper .num { text-align: right; white-space: nowrap; }
.paper-sums { margin: 12px 0 0 auto; width: 240px; font-size: 12px; }
.paper-sums div { display: flex; justify-content: space-between; padding: 3px 6px; font-variant-numeric: tabular-nums; }
.paper-sums .total { border-top: 1.5px solid var(--text); font-weight: 700; margin-top: 4px; padding-top: 6px; font-size: 13px; }
.paper-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 10.5px; color: var(--text-2); }
.paper-foot .mono { font-size: 10px; }

/* Fundstellen-Markierung im Beleg */
.paper mark {
	background: transparent;
	color: inherit;
	border-radius: 3px;
	padding: 0 2px;
	margin: 0 -2px;
	transition: background .15s, box-shadow .15s;
}
.paper mark.is-hl { background: #FFE9B8; box-shadow: 0 0 0 2px #FFE9B8; }

/* Gelesene Felder mit Konfidenz */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.field {
	padding: 11px 18px;
	border-bottom: 1px solid var(--border);
	cursor: default;
	transition: background .12s;
}
.field:nth-child(odd) { border-right: 1px solid var(--border); }
.field:nth-last-child(-n+2) { border-bottom: 0; }
.field:hover { background: var(--brand-tint); }
.field-label { font-size: 11px; color: var(--text-3); font-weight: 600; }
.field-value { font-size: 13.5px; font-weight: 600; margin-top: 1px; font-variant-numeric: tabular-nums; }
.conf { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.conf-bar { flex: 1; max-width: 90px; height: 3px; background: var(--bg-subtle); border-radius: 99px; overflow: hidden; }
.conf-bar i { display: block; height: 100%; border-radius: 99px; background: var(--green); }
.conf.low .conf-bar i { background: var(--amber); }
.conf span { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.conf.low span { color: #92651A; font-weight: 600; }

/* Positionsabgleich */
.match-table td { vertical-align: top; }
.match-state { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; }
.match-state .ic { width: 13px; height: 13px; }
.ms-ok { background: var(--green-tint); color: #16744E; }
.ms-price { background: var(--amber-tint); color: var(--amber); }
.ms-qty { background: var(--red-tint); color: var(--red); }
.ms-noorder { background: var(--violet-tint); color: var(--violet); }
tr.has-issue td { background: #FFFDF6; }
.cmp { font-size: 11.5px; margin-top: 2px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cmp.bad { color: var(--red); font-weight: 600; }
.cmp.warn { color: #92651A; font-weight: 600; }
.match-table tr.no-sep td { border-bottom: 0; padding-bottom: 2px; }
.match-table tr.note-row td { padding-top: 0; }
.item-note {
	display: flex; gap: 8px;
	margin: 7px 0 2px;
	padding: 8px 11px;
	border-radius: var(--radius);
	background: var(--bg-subtle);
	border: 1px solid var(--border);
	font-size: 12px;
	color: var(--text-2);
}
.item-note .ic { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--brand); }

.sum-strip { display: flex; gap: 26px; padding: 13px 18px; border-top: 1px solid var(--border); background: var(--bg-subtle); border-radius: 0 0 var(--radius-lg) var(--radius-lg); font-size: 12.5px; }
.sum-strip div b { display: block; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.sum-strip div span { color: var(--text-3); font-size: 11.5px; }
.sum-strip .grand b { font-size: 16px; }

/* Manuelle Korrektur der gelesenen Zeilen */
.select.sm, .input.sm { height: 29px; font-size: 12.5px; padding: 0 8px; width: 100%; }
.num-input { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.match-table td .select.sm { min-width: 130px; }
.card-head-actions { display: inline-flex; align-items: center; gap: 8px; }
.firma-edit { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 4px; background: var(--brand-tint); border: 1px solid var(--border); border-radius: var(--radius); }
.firma-edit .firma-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.firma-edit .firma-label .ic { width: 15px; height: 15px; }
.firma-edit .select.sm { width: auto; min-width: 240px; }
.firma-manage { margin-left: auto; font-size: 12px; color: var(--brand); font-weight: 600; }
.firma-manage:hover { text-decoration: underline; }
.edit-bar { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-top: 1px solid var(--border); background: var(--bg-subtle); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.edit-bar .btn:last-child { margin-left: 0; }
.edit-hint { margin-right: auto; font-size: 12px; color: var(--brand); font-weight: 600; }
.edit-hint:hover { text-decoration: underline; }

/* Gewerke-Verwaltung */
.gewerk-add { display: flex; gap: 10px; }
.gewerk-add .input { flex: 1; max-width: 360px; }
.gewerk-table { border-top: 1px solid var(--border); }
.gewerk-table td { vertical-align: middle; }
.gewerk-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.gewerk-name .ic { width: 16px; height: 16px; color: var(--text-3); }
.gewerk-rename { display: flex; align-items: center; gap: 8px; }
.gewerk-rename .input.sm { width: 180px; }
.row-actions { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.row-actions form { display: inline; }
.gewerk-del-btn { color: var(--text-3); }
.gewerk-del-btn:hover { background: var(--red-tint); color: var(--red); }
.empty-hint { font-size: 13px; color: var(--text-3); padding: 8px 2px; }

/* Kunden / Firmen-Stammdaten */
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.filter-bar .searchbox { flex: 1; min-width: 240px; }
.filter-bar .searchbox input { width: 100%; }

/* Listen-Werkzeugleiste: Statusreiter links, Feinfilter rechts. Wird es
   zu eng, rutscht die Filtergruppe als Ganzes unter die Reiter — sie
   zerfällt nicht in einzelne Zeilen. */
.list-toolbar {
	display: flex; align-items: center; gap: 14px 20px;
	flex-wrap: wrap; margin-bottom: 14px;
}
.list-toolbar .tab-row { flex: 0 1 auto; }
/* Kein margin-left:auto: Passt die Filtergruppe neben die Reiter, steht
   sie dort; bricht sie um, beginnt sie bündig zur Tabelle darunter — statt
   rechts im Leerraum zu hängen. */
.list-toolbar .filter-bar { margin: 0; flex: 0 1 auto; }
.list-toolbar .filter-bar .searchbox { flex: 0 1 auto; min-width: 235px; }
.kunden-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kunden-count { font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.kunden-table tbody { border-top: 1px solid var(--border); }
.kunden-table tbody:first-of-type { border-top: 0; }
.kunden-table td { vertical-align: middle; }
.kunde-edit-row > td { background: var(--bg-subtle); padding: 0; }
.kind-chip { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--bg-subtle); border: 1px solid var(--border-strong); color: var(--text-2); white-space: nowrap; }
.kind-subunternehmer { background: #EAF1FF; border-color: #C6D9FF; color: #2B5BB0; }
.kind-lieferant { background: #EAF7EE; border-color: #C2E6CE; color: #2E7D46; }
.kind-dienstleister { background: #FBF0E4; border-color: #F0D9BC; color: #9A6212; }
.kind-kunde { background: #F1ECFB; border-color: #DCCEF2; color: #6B43B5; }
.kf-body { padding: 16px 18px 18px; }
.kf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 14px; }
.kf { display: flex; flex-direction: column; gap: 4px; }
.kf.kf-full { grid-column: 1 / -1; }
.kf > span { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.kf .kf-hint { font-weight: 500; color: var(--text-3); opacity: .85; }
.kf .input, .kf .select, .kf .textarea { width: 100%; }
.kf-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.kf-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
@media (max-width: 1100px) { .kf-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Kunden-Detail & Kontakte (CRM) ──────────────────────────────────── */
.kunde-head { display: flex; align-items: center; gap: 14px; }
.kunde-avatar { width: 46px; height: 46px; font-size: 15px; background: var(--brand); }
.kontakt-avatar { width: 46px; height: 46px; font-size: 15px; }
.detail-main { display: flex; flex-direction: column; gap: 14px; }
.detail-main .kpi-grid { margin: 0; }

/* Schlüssel-Wert-Liste */
.kv { display: flex; flex-direction: column; }
.kv-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.kv-row:last-child { border-bottom: 0; }
.kv-row > span { color: var(--text-3); font-weight: 600; font-size: 12px; }
.kv-row > b { font-weight: 600; color: var(--text); word-break: break-word; }
.link { color: var(--brand); font-weight: 600; cursor: pointer; }
.link:hover { text-decoration: underline; }
.kunde-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; background: var(--brand-tint); border-radius: var(--radius); font-size: 12.5px; color: var(--text-2); }
.kunde-note .ic { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--brand); }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
.doc-type { font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--bg-subtle); border: 1px solid var(--border-strong); border-radius: 99px; padding: 2px 9px; }

/* Kommunikations-Zeilen */
.comm-row { display: flex; align-items: flex-start; gap: 11px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.comm-row:last-child { border-bottom: 0; }
.comm-chan { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); background: var(--bg-subtle); border-radius: 5px; padding: 3px 7px; white-space: nowrap; min-width: 64px; text-align: center; }
.comm-prev { font-size: 13px; color: var(--text); }
.comm-meta { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

/* Kontakte-Verzeichnis */
.kontakte-table td { vertical-align: middle; }
.ct-name { display: flex; align-items: center; gap: 10px; }
.ct-name .avatar { width: 30px; height: 30px; font-size: 11px; }
.ct-firma { background: #EAF1FF; border-color: #C6D9FF; color: #2B5BB0; }
.ct-mieter { background: #EAF7EE; border-color: #C2E6CE; color: #2E7D46; }
.ct-interessent { background: #F1ECFB; border-color: #DCCEF2; color: #6B43B5; }
.ct-intern { background: #FBF0E4; border-color: #F0D9BC; color: #9A6212; }

/* ── Auswertungen / Reports ──────────────────────────────────────────── */
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 1100px) { .report-grid { grid-template-columns: 1fr; } }

/* Segment-Umschalter */
.seg { display: inline-flex; background: var(--bg-subtle); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 2px; gap: 2px; }
.seg-btn { border: 0; background: none; padding: 4px 11px; font-size: 12px; font-weight: 600; color: var(--text-2); border-radius: calc(var(--radius) - 2px); cursor: pointer; white-space: nowrap; }
.seg-btn:hover { color: var(--text); }
.seg-btn.is-active { background: var(--bg); color: var(--brand); box-shadow: 0 1px 2px rgba(20,30,55,.08); }

/* Horizontales Balkendiagramm */
.barchart { display: flex; flex-direction: column; gap: 11px; padding: 4px 0; }
.bar-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 12px; }
.bar-label { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-label .bar-sub { display: block; font-size: 11px; font-weight: 500; color: var(--text-3); }
.bar-track { height: 12px; background: var(--bg-subtle); border-radius: 99px; overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: 99px; min-width: 4px; transition: width .5s cubic-bezier(.2,.7,.3,1); }
.bar-val { font-size: 12.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Säulendiagramm */
.colchart { display: flex; align-items: flex-end; gap: 14px; padding: 6px 4px 0; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.col-val { font-size: 11px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-track { width: 100%; max-width: 54px; height: 150px; display: flex; align-items: flex-end; background: var(--bg-subtle); border-radius: var(--radius) var(--radius) 0 0; }
.col-track i { display: block; width: 100%; background: linear-gradient(180deg, var(--brand), var(--brand-hover)); border-radius: var(--radius) var(--radius) 0 0; min-height: 4px; transition: height .5s cubic-bezier(.2,.7,.3,1); }
.col-label { font-size: 11.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; }

/* Firmen-Ranking (Kundengrafik) */
.rank-list { display: flex; flex-direction: column; }
.rank-row { display: grid; grid-template-columns: 36px 1fr 160px; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.rank-row:last-child { border-bottom: 0; }
.rank-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.rank-main { min-width: 0; }
.rank-name { font-size: 13.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rank-track { height: 9px; background: var(--bg-subtle); border-radius: 99px; overflow: hidden; }
.rank-track i { display: block; height: 100%; border-radius: 99px; min-width: 3px; transition: width .5s cubic-bezier(.2,.7,.3,1); }
.rank-stats { text-align: right; }
.rank-vol { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.rank-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }

/* Kontierung */
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.acct div b { display: block; font-size: 13.5px; font-weight: 600; margin-top: 1px; }
.acct div span { font-size: 11px; color: var(--text-3); font-weight: 600; }
.skonto-chip {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: 4px;
	padding: 5px 10px;
	border-radius: var(--radius);
	background: var(--green-tint);
	color: #16744E;
	font-size: 12px; font-weight: 600;
}
.skonto-chip .ic { width: 13px; height: 13px; }
/* Verstrichene Frist: kein Grün. Grün heißt „da ist noch etwas zu
   holen" — bei einer abgelaufenen Skontofrist ist genau das nicht mehr
   der Fall. */
.skonto-chip.skonto-weg { background: var(--bg); color: var(--text-3); }

/* Kontierung: was fehlt, steht da — in gedämpfter Schrift, damit es
   nicht wie eine Angabe aussieht. */
.acct div b.acct-offen { color: var(--text-3); font-weight: 500; }
.acct div b.acct-offen span { font-weight: 500; text-transform: none; }
.acct-ueberfaellig { color: var(--red, #B3261E); font-weight: 600; }

/* Nebenkostenabrechnung: umlagefähig erkannt / bestätigt */
.utility-box {
	display: flex; align-items: center; gap: 12px;
	margin-top: 14px;
	padding: 11px 14px;
	border-radius: var(--radius-lg);
	font-size: 13px;
}
.utility-box .utility-text { display: flex; gap: 9px; align-items: flex-start; flex: 1; }
.utility-box .utility-text > .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.utility-box b { display: block; font-weight: 650; }
.utility-box span { color: var(--text-2); }
.utility-box .btn { flex: none; }
.utility-suggested { background: var(--amber-tint); border: 1px solid rgba(200,136,26,.25); }
.utility-suggested .utility-text > .ic { color: var(--amber); }
.utility-suggested b { color: #92651A; }
.utility-confirmed { background: var(--green-tint); border: 1px solid rgba(46,158,107,.22); }
.utility-confirmed .utility-text > .ic { color: var(--green); }
.utility-confirmed b { color: #16744E; }
.utility-confirmed a { color: var(--brand); font-weight: 600; }

/* Listen-Filter „Nur Nebenkosten" + Listen-Tag */
.filter-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; cursor: pointer; user-select: none; }
.filter-toggle input { cursor: pointer; }
.nk-tag { display: inline-block; padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .02em; background: var(--green-tint); color: #16744E; vertical-align: middle; }
.nk-tag.nk-suggested { background: var(--amber-tint); color: #92651A; }
.prio-tag { color: #C9892F; font-size: 13px; }

/* Rechnungen: Preisvergleich wiederkehrender Rechnungen */
.pricecheck-banner { display: flex; gap: 11px; padding: 11px 16px; border-radius: var(--radius-lg); background: var(--bg-subtle); border: 1px solid var(--border); margin-bottom: 16px; font-size: 13px; }
.pricecheck-banner > .ic { color: var(--brand); margin-top: 1px; flex: none; width: 16px; height: 16px; }
.pricecheck-banner b { font-weight: 650; }
.pricecheck-banner.up { background: var(--amber-tint); border-color: rgba(200,136,26,.25); }
.pricecheck-banner.down { background: var(--green-tint); border-color: rgba(46,158,107,.22); }
.delta-up { color: #92651A; }
.delta-down { color: #16744E; }

/* Freigaben */
.approval-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--border); }
.approval-row:last-child { border-bottom: 0; }
.approval-who { min-width: 0; }
.approval-who b { display: block; font-size: 13px; font-weight: 600; }
.approval-who span { font-size: 11.5px; color: var(--text-3); }
.approval-note { font-size: 12px; color: var(--text-2); font-style: italic; margin-left: 4px; }
.approval-state { margin-left: auto; }

/* Zuweisen-Popover */
.assign-wrap { position: relative; }
.assign-pop {
	position: absolute;
	right: 0; top: calc(100% + 7px);
	width: 295px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	z-index: 60;
	padding: 7px;
	animation: pop-in .14s ease both;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.assign-pop h4 { font-size: 12px; color: var(--text-3); font-weight: 650; padding: 6px 10px 4px; text-transform: uppercase; letter-spacing: .05em; }
.assign-opt {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 10px;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background .1s;
}
.assign-opt:hover { background: var(--bg-subtle); }
.assign-opt input { accent-color: var(--brand); width: 15px; height: 15px; }
.assign-opt .who b { display: block; font-size: 13px; font-weight: 600; }
.assign-opt .who span { font-size: 11px; color: var(--text-3); }
.assign-note { padding: 4px 7px; }
.assign-foot { display: flex; justify-content: flex-end; gap: 7px; padding: 7px; border-top: 1px solid var(--border); margin-top: 5px; }

/* Lesender Beleg (parsing) */
.scan-state { padding: 60px 30px; text-align: center; }
.scan-doc {
	width: 74px; height: 92px;
	margin: 0 auto 22px;
	border: 1.5px solid var(--border-strong);
	border-radius: 6px;
	background:
		linear-gradient(var(--border) 1.5px, transparent 0) 14px 18px / 30px 8px no-repeat,
		linear-gradient(var(--border) 1.5px, transparent 0) 14px 32px / 46px 8px no-repeat,
		linear-gradient(var(--border) 1.5px, transparent 0) 14px 46px / 40px 8px no-repeat,
		linear-gradient(var(--border) 1.5px, transparent 0) 14px 60px / 46px 8px no-repeat,
		#fff;
	position: relative;
	overflow: hidden;
}
.scan-doc::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: -30%;
	height: 30%;
	background: linear-gradient(180deg, transparent, rgba(59,111,181,.22));
	border-bottom: 2px solid var(--brand);
	animation: scanline 1.9s ease-in-out infinite;
}
@keyframes scanline { 55%, 100% { top: 100%; } }
.scan-state h2 { font-size: 16px; font-weight: 650; }
.scan-state p { color: var(--text-2); font-size: 13px; margin-top: 6px; }
.scan-steps { display: inline-flex; flex-direction: column; gap: 7px; margin-top: 18px; text-align: left; font-size: 12.5px; color: var(--text-2); }
.scan-steps > span { display: flex; gap: 8px; align-items: center; transition: opacity .25s; }
.scan-steps .scan-sw { display: inline-flex; }
.scan-steps .ic { width: 13px; height: 13px; color: var(--green); }
.scan-steps .spinner { width: 12px; height: 12px; border-width: 1.5px; color: var(--brand); }
.scan-steps .is-pending { opacity: .45; }
.scan-steps .is-pending .ic { color: var(--text-3); }
/* Fortschritt eines Upload-Stapels: welcher Beleg gerade gelesen wird. */
.lese-stand-zeile { margin-top: 20px; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lese-stand-zeile b { color: var(--text-2); font-weight: 650; }
.lese-bar { width: 220px; height: 5px; margin: 10px auto 0; background: var(--bg-subtle); border-radius: 99px; overflow: hidden; }
.lese-bar i { display: block; height: 100%; border-radius: 99px; background: var(--brand); transition: width .4s cubic-bezier(.2,.7,.3,1); }

/* ════════════════════════════════════════════════════════════════════
   Mahnwesen
   ════════════════════════════════════════════════════════════════════ */

.op-note { display: flex; gap: 7px; align-items: flex-start; margin-top: 6px; font-size: 12px; color: var(--text-2); }
.op-note .ic { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--brand); }
.op-note b { font-weight: 600; }
.stage-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.overdue-days { font-size: 11.5px; font-weight: 650; color: var(--red); }

/* Mahnwesen: Notiz, Wiederholungstäter, Anruf-Task, Bauleiter */
.op-note.user-note .ic { color: var(--text-3); }
.op-note.user-note span { color: var(--text); }
.text-danger { color: var(--red) !important; }
tr.row-repeat > td { background: var(--red-tint); }
.row-actions { display: inline-flex; gap: 4px; }
.task-banner { background: var(--red-tint); border: 1px solid rgba(199,93,93,.25); border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: 16px; }
.task-banner-head { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #9A3B3B; margin-bottom: 8px; }
.task-banner-head .ic { width: 15px; height: 15px; color: var(--red); }
.task-banner-head b { font-weight: 700; }
.task-count { background: var(--red); color: #fff; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 8px; }
.task-hint { font-weight: 500; color: var(--text-2); }
.task-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(199,93,93,.15); }
.task-row .task-text { flex: 1; font-size: 13px; }
.task-row .btn { flex: none; }
.letter-rep { color: var(--text-3); }
.letter-payee { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 11.5px; color: var(--text-2); }
.letter-payee .ic { width: 13px; height: 13px; color: var(--brand); flex: none; }
.due-future { font-size: 11.5px; color: var(--text-3); }

/* Seitenpanel (Mahnentwurf) */
.panel-backdrop {
	position: fixed; inset: 0;
	background: rgba(27,34,48,.32);
	z-index: 90;
	cursor: pointer;
	animation: fade-in .18s ease both;
}
@keyframes fade-in { from { opacity: 0; } }
.panel {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(560px, 94vw);
	background: var(--bg-subtle);
	box-shadow: var(--shadow-lg);
	z-index: 95;
	display: flex;
	flex-direction: column;
	animation: panel-in .24s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes panel-in { from { transform: translateX(40px); opacity: 0; } }
.panel-head {
	display: flex; align-items: center; gap: 12px;
	padding: 16px 22px;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
}
.panel-head h2 { font-size: 15px; font-weight: 700; }
.panel-head .sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.panel-x { margin-left: auto; color: var(--text-3); padding: 6px; border-radius: var(--radius); }
.panel-x:hover { background: var(--bg-subtle); color: var(--text); }
.panel-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.panel-foot {
	display: flex; gap: 9px;
	padding: 14px 22px;
	background: var(--bg);
	border-top: 1px solid var(--border);
}
.panel-foot .right { margin-left: auto; display: flex; gap: 9px; }

.letter {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 4px;
	box-shadow: var(--shadow-md);
	padding: 30px 32px;
	font-size: 12.5px;
	line-height: 1.65;
}
.letter-head { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); margin-bottom: 22px; }
.letter-head b { color: var(--text); font-size: 12px; }
.letter-subject { font-weight: 700; font-size: 13.5px; margin-bottom: 14px; }
.letter-body { white-space: pre-line; color: #2A3142; font-variant-numeric: tabular-nums; }
.letter-edit {
	width: 100%;
	border: 1px dashed transparent;
	border-radius: var(--radius-sm);
	background: transparent;
	font: inherit;
	font-size: 12.5px;
	line-height: 1.65;
	color: #2A3142;
	font-variant-numeric: tabular-nums;
	resize: vertical;
	outline: none;
	padding: 4px 6px;
	margin: 0 -6px;
	transition: border-color .15s, background .15s;
}
.letter-edit:hover { border-color: var(--border-strong); }
.letter-edit:focus { border-color: var(--brand); background: var(--brand-tint); }
.letter-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }

.draft-facts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.draft-fact { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 13px; }
.draft-fact b { display: block; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.draft-fact span { font-size: 11px; color: var(--text-3); font-weight: 600; }
.tone-hint { display: flex; gap: 8px; align-items: center; margin: 14px 2px 0; font-size: 12px; color: var(--text-3); }
.tone-hint .ic { width: 13px; height: 13px; color: var(--brand); }

/* ════════════════════════════════════════════════════════════════════
   Archiv, Aktivität, Sonstiges
   ════════════════════════════════════════════════════════════════════ */

.type-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: var(--radius-sm); }
.t-rechnung { background: var(--brand-tint); color: var(--brand-deep); }
.t-gutschrift { background: var(--green-tint); color: #16744E; }
.t-lieferschein { background: var(--violet-tint); color: var(--violet); }
.t-mahnung { background: var(--amber-tint); color: #92651A; }
.t-vertrag { background: var(--blue-tint); color: var(--blue); }
.tag { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--bg-subtle); border: 1px solid var(--border); font-size: 11px; color: var(--text-2); margin: 1px 3px 1px 0; }

.gobd-banner {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 16px;
	border-radius: var(--radius-lg);
	background: var(--brand-tint);
	border: 1px solid rgba(59,111,181,.2);
	color: var(--brand-deep);
	font-size: 12.5px;
	margin-bottom: 16px;
}
.gobd-banner .ic { color: var(--brand); }
.gobd-banner b { font-weight: 650; }

.day-head { font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 18px 18px 8px; }
.day-head:first-child { padding-top: 6px; }

.history { padding: 4px 0; }
.history-item { display: flex; gap: 12px; padding: 9px 18px; }
.history-ic {
	width: 26px; height: 26px; flex: none;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--bg-subtle); border: 1px solid var(--border);
	color: var(--text-2);
}
.history-ic .ic { width: 13px; height: 13px; }
.history-ic.h-bot { background: var(--brand-tint); border-color: transparent; color: var(--brand); }
.history-ic.h-check { background: var(--green-tint); border-color: transparent; color: #16744E; }
.history-ic.h-export { background: var(--green-tint); border-color: transparent; color: #16744E; }
.history-ic.h-flag { background: var(--amber-tint); border-color: transparent; color: var(--amber); }
.history-ic.h-mail { background: var(--blue-tint); border-color: transparent; color: var(--blue); }
.history-meta { font-size: 11.5px; color: var(--text-3); }
.history-meta b { color: var(--text-2); font-weight: 600; }
.history-text { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }

/* ════════════════════════════════════════════════════════════════════
   Immobilien-Szenario: Firmen, Vermietung, Bauprojekte, Anrufe
   ════════════════════════════════════════════════════════════════════ */

.client-sub { font-size: 10.5px; color: var(--text-3); font-weight: 500; margin-top: 1px; }

.company-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 650;
	white-space: nowrap;
}
/* Farbe je Gesellschaft. Die Kennungen hv/wb/ba gehören der Demo; im
   Produkt heißen die Gesellschaften anders (bb/vv/dl), und ohne eigene
   Regel stand der Chip als nackter Text da. Die Nummern-Klassen f1–f5
   vergibt die Oberfläche nach der Reihenfolge der Gesellschaften — so
   ist die Farbe stabil, ohne die Kennungen zu kennen. */
.company-chip { background: var(--bg-subtle); color: var(--text-2); }
/* Ohne Zuordnung: Der Beleg soll auffallen, nicht mit einem leeren
   grauen Feld dastehen. */
.company-chip.ist-offen { background: var(--amber-tint); color: #92651A; font-weight: 600; }
.company-chip.f1 { background: var(--brand-tint); color: var(--brand-deep); }
.company-chip.f2 { background: var(--violet-tint); color: var(--violet); }
.company-chip.f3 { background: var(--amber-tint); color: #92651A; }
.company-chip.f4 { background: var(--green-tint); color: #146B49; }
.company-chip.f5 { background: var(--blue-tint); color: var(--blue); }
.c-hv { background: var(--brand-tint); color: var(--brand-deep); }
.c-wb { background: var(--violet-tint); color: var(--violet); }
.c-ba { background: var(--amber-tint); color: #92651A; }

/* Automatische Ablage-Benennung */
.file-row {
	display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
	margin-top: 13px;
	padding: 9px 12px;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius);
	background: var(--bg-rail);
	font-size: 12.5px;
	color: var(--text-2);
}
.file-row .ic { width: 13px; height: 13px; color: var(--green); }
.file-row .mono { font-size: 12px; color: var(--text); font-weight: 600; }

/* Objektverteilung in der Kontierung */
.split-list { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.split-head { padding: 7px 12px; background: var(--bg-subtle); font-size: 11px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.split-row { display: flex; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 13px; }
.split-row b { font-variant-numeric: tabular-nums; }

/* Vermietung: Kriterien, Scores, Quellen */
.crit-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 11px 18px; border-bottom: 1px solid var(--border); background: var(--bg-rail); }
.crit-label { font-size: 11.5px; font-weight: 650; color: var(--text-3); }
.crit-chip { padding: 3px 10px; border-radius: 99px; background: var(--bg); border: 1px solid var(--border-strong); font-size: 12px; font-weight: 550; color: var(--text-2); }
.crit-hint { margin-left: auto; font-size: 11.5px; color: var(--text-3); }

.score-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.s-hi  { background: var(--green-tint); color: #16744E; box-shadow: inset 0 0 0 2px rgba(30,158,106,.35); }
.s-mid { background: var(--brand-tint); color: var(--brand-deep); box-shadow: inset 0 0 0 2px rgba(59,111,181,.3); }
.s-low { background: var(--red-tint); color: var(--red); box-shadow: inset 0 0 0 2px rgba(209,67,67,.3); }

.source-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.source-chip .ic { width: 12px; height: 12px; }

/* Vermietung: Erstkontakt-Daten, Übergabefotos, Terminslots */
.applicant-facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.fact-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-2); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.fact-chip .ic { width: 11px; height: 11px; }
.handover-photos { padding: 10px 14px 14px; }
.handover-photos-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.handover-photos-head .ic { width: 13px; height: 13px; color: var(--brand); flex: none; }
.photo-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-thumb { width: 92px; height: 64px; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(135deg, #e8eef5, #d7e0ea); display: flex; align-items: flex-end; padding: 5px 7px; }
.photo-thumb span { font-size: 10.5px; font-weight: 600; color: #5a6b80; }
.slot-label { font-size: 11px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 8px; }
.slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.slot { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; cursor: pointer; }
.slot .ic { width: 13px; height: 13px; color: var(--text-3); }
.slot.is-sel { border-color: var(--brand); background: var(--brand-tint); font-weight: 600; }

/* Einklappbare Karten (Skalierung bei vielen Ausschreibungen/Wechseln) */
.collapse-head { cursor: pointer; user-select: none; }
.collapse-head:hover { background: var(--bg-rail); }
.chev-toggle { display: inline-flex; color: var(--text-3); transition: transform .18s; }
.chev-toggle .ic { width: 15px; height: 15px; }
.chev-toggle.is-open { transform: rotate(90deg); }

/* Mieterwechsel-Checklisten */
.turnover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.turnover { padding: 16px 18px; }
.turnover + .turnover { border-left: 1px solid var(--border); }
.turnover-head { margin-bottom: 12px; }
.check-list { display: flex; flex-direction: column; gap: 2px; }
.check-item { display: flex; gap: 10px; padding: 7px 0; }
.check-ic {
	width: 24px; height: 24px; flex: none;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
}
.check-ic .ic { width: 13px; height: 13px; }
.st-done .check-ic { background: var(--green-tint); color: #16744E; }
.st-auto .check-ic { background: var(--brand-tint); color: var(--brand); }
.st-open .check-ic { background: var(--bg-subtle); border: 1.5px dashed var(--border-strong); }
.check-open { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.check-label { font-size: 13px; font-weight: 550; }
.st-done .check-label { color: var(--text-2); }
.check-note { font-size: 12px; color: var(--text-3); margin-top: 1px; }

/* Bauprojekte */
.project-head { align-items: center; }
.health-dot {
	width: 14px; height: 14px; flex: none;
	border-radius: 50%;
	position: relative;
}
.health-dot.h-green { background: var(--green); box-shadow: 0 0 0 4px var(--green-tint); }
.health-dot.h-amber { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-tint); }
.health-dot.h-red   { background: var(--red); box-shadow: 0 0 0 4px var(--red-tint); }
.project-nums { margin-left: auto; display: flex; gap: 26px; text-align: right; }
.project-nums span { display: block; font-size: 11px; color: var(--text-3); font-weight: 600; }
.project-nums b { font-size: 15px; font-variant-numeric: tabular-nums; }
.project-nums b i { font-style: normal; font-size: 12px; color: var(--text-3); font-weight: 550; }
.project-bar { height: 9px; background: var(--bg-subtle); border-radius: 99px; overflow: hidden; }
.project-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--green)); }
.trade-bar { width: 90px; height: 4px; margin: 4px 0 0 auto; background: var(--bg-subtle); border-radius: 99px; overflow: hidden; }
.trade-bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.project-contacts {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin: 0 0 12px;
}
.project-contacts .btn { border: 1px solid var(--border); }

.own-hours {
	display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
	margin-top: 12px;
	padding: 9px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-rail);
	font-size: 12.5px;
	color: var(--text-2);
}
.own-hours .ic { width: 14px; height: 14px; color: var(--brand); }
.own-hours b { color: var(--text); font-variant-numeric: tabular-nums; }
.own-trades { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.own-link { margin-left: auto; color: var(--brand); font-weight: 600; font-size: 12px; }
.own-link:hover { text-decoration: underline; }

/* ── Lese-Overlay beim Stundenzettel-Upload ──────────────────────────── */
.reading-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 140;
	align-items: center;
	justify-content: center;
	background: rgba(27, 34, 48, .45);
	backdrop-filter: blur(3px);
}
.reading-overlay.htmx-request { display: flex; }
.reading-card {
	display: flex;
	gap: 24px;
	align-items: center;
	max-width: 600px;
	padding: 26px 30px;
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	animation: toast-in .3s cubic-bezier(.2,.9,.3,1.2) both;
}
.rdoc {
	position: relative;
	width: 210px;
	flex: none;
	padding: 12px 14px 14px;
	border-radius: 3px;
	overflow: hidden;
	transform: rotate(-1.2deg);
	color: #2c3e6b;
	background-color: #fdfdf8;
	background-image:
		linear-gradient(rgba(96,140,200,.18) 1px, transparent 1px),
		linear-gradient(90deg, rgba(96,140,200,.18) 1px, transparent 1px);
	background-size: 16px 16px;
	box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.rdoc-title { font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; border: 1.5px solid #2c3e6b; padding: 2px 7px; display: inline-block; margin-bottom: 8px; background: rgba(255,255,255,.7); }
.rrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(96,140,200,.25); }
.rhand { font-family: "Bradley Hand", "Noteworthy", "Marker Felt", "Segoe Print", "Comic Sans MS", cursive; font-size: 11.5px; white-space: nowrap; }
.rchip {
	display: inline-flex; align-items: center; gap: 2px;
	font-size: 9px; font-weight: 700; white-space: nowrap;
	color: #16744E; background: var(--green-tint);
	border-radius: 99px; padding: 1px 6px 1px 4px;
	opacity: 0;
	animation: rpop 2.6s ease infinite;
}
.rchip .ic { width: 9px; height: 9px; }
.rrow:nth-child(2) .rchip { animation-delay: .35s; }
.rrow:nth-child(3) .rchip { animation-delay: .8s; }
.rrow:nth-child(4) .rchip { animation-delay: 1.25s; }
.rrow:nth-child(5) .rchip { animation-delay: 1.7s; }
.rscanbar {
	position: absolute;
	left: 0; right: 0;
	height: 34%;
	top: -34%;
	background: linear-gradient(180deg, transparent, rgba(59,111,181,.22));
	border-bottom: 2px solid var(--brand);
	animation: rsweep 2.6s ease-in-out infinite;
}
@keyframes rsweep { 0% { top: -34%; } 100% { top: 104%; } }
@keyframes rpop {
	0%, 10% { opacity: 0; transform: translateX(7px); }
	24%, 88% { opacity: 1; transform: none; }
	100% { opacity: 0; }
}
.rdoc.is-beleg {
	background-image: none;
	background-color: #fff;
	transform: rotate(-.6deg);
	color: var(--text-2);
}
.rdoc.is-beleg .rdoc-title { border-color: var(--text-3); color: var(--text-2); }
.rfield { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
.rbar { flex: none; height: 6px; border-radius: 99px; background: rgba(96,140,200,.28); margin-left: auto; }
.rdoc.is-beleg .rchip { margin-left: 4px; padding: 1px 4px; }

.reading-body { min-width: 0; }
.reading-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.reading-title .ic { color: var(--brand); }
.reading-sub { margin-top: 7px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.dz-dots { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.dz-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); display: inline-block; animation: dz-bounce 1.2s ease infinite; }
.dz-dots i:nth-child(2) { animation-delay: .15s; }
.dz-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dz-bounce { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.reading-files {
	margin-top: 8px; font-size: 12px; color: var(--text-3);
	font-variant-numeric: tabular-nums;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch;
}
.reading-files:empty { display: none; }
.reading-hint { margin-top: 13px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.reading-hint .ic { width: 13px; height: 13px; color: var(--green); }
@media (max-width: 560px) { .reading-card { flex-direction: column; } }

/* Hochgeladenes Original-Foto */
.photo-real {
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 14px 30px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
}
.upload-form { display: flex; gap: 8px; align-items: center; }
.upload-form .btn { cursor: pointer; }

/* ── Stundenzettel: fotografiertes Papier ────────────────────────────── */

.photo-frame {
	background: linear-gradient(160deg, #4a4f5c, #353a47);
	border-radius: 6px;
	padding: 26px 30px;
	box-shadow: var(--shadow-lg);
}
.tsheet {
	background-color: #fdfdf8;
	background-image:
		linear-gradient(rgba(96, 140, 200, .22) 1px, transparent 1px),
		linear-gradient(90deg, rgba(96, 140, 200, .22) 1px, transparent 1px);
	background-size: 19px 19px;
	border-radius: 2px;
	box-shadow: 0 14px 30px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
	transform: rotate(-.6deg);
	padding: 26px 28px 22px;
	color: #2A3142;
}
.hand {
	font-family: "Bradley Hand", "Noteworthy", "Marker Felt", "Segoe Print", "Comic Sans MS", cursive;
	font-size: 16px;
	color: #2c3e6b;
	letter-spacing: .01em;
}
.hand.smudge { filter: blur(.8px); transform: skewX(-5deg); opacity: .82; display: inline-block; }
.hand.sum { font-size: 18px; border-bottom: 3px double #2c3e6b; padding: 0 6px 1px; }
.hand.sum.is-wrong { text-decoration: underline wavy rgba(209,67,67,.0); } /* Abweichung markiert nur das System, nicht der Zettel */
.form-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 650; margin-right: 6px; }
.tsheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.tsheet-title { font-size: 13px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; border: 1.5px solid #2A3142; padding: 4px 10px; background: rgba(255,255,255,.7); }
.tsheet-fields { text-align: right; display: flex; flex-direction: column; gap: 5px; }
.tsheet-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,.45); }
.tsheet-table th {
	font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
	color: var(--text-2); text-align: left;
	border: 1px solid #9aa6bb; padding: 5px 9px;
	background: rgba(255,255,255,.75);
}
.tsheet-table td { border: 1px solid #9aa6bb; padding: 6px 9px; }
.tsheet-table td:last-child { text-align: right; }
.tsheet-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 16px; }
.tsheet-sign { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.tsheet-sign svg { width: 110px; height: 28px; border-bottom: 1px solid #9aa6bb; }

.tsheet mark { background: transparent; color: inherit; border-radius: 3px; padding: 0 2px; margin: 0 -2px; transition: background .15s, box-shadow .15s; }
.tsheet mark.is-hl { background: #FFE9B8; box-shadow: 0 0 0 2px #FFE9B8; }

/* Nachrichten-Panel */
.msg-label { display: block; font-size: 11px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.msg-textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: #fff;
	font-size: 13.5px;
	line-height: 1.6;
	resize: vertical;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.msg-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.photo-mini { margin-bottom: 14px; }
.photo-mini-label { font-size: 11px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.photo-mini .tsheet.mini { padding: 10px 12px; transform: rotate(-.4deg); max-width: 360px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.photo-mini .hand { font-size: 14px; }

.trade-chip {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 2px 9px;
	border-radius: 99px;
	background: var(--brand-tint);
	color: var(--brand-deep);
	font-size: 11.5px; font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.trade-chip b { font-weight: 700; }

.t-preisliste { background: var(--green-tint); color: #16744E; }
.t-stundenzettel { background: var(--amber-tint); color: #92651A; }
.t-protokoll { background: var(--bg-subtle); color: var(--text-2); }

/* Mieterwechsel: Fortschritt zur „Grün"-Schwelle */
.turnover-progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.turnover-bar { flex: 1; max-width: 220px; height: 7px; background: var(--bg-subtle); border-radius: 99px; overflow: hidden; }
.turnover-bar i { display: block; height: 100%; border-radius: 99px; background: var(--amber); }
.turnover-bar.ready i { background: var(--green); }
.turnover-progress span { font-size: 11.5px; font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ── Nachrichtenzentrale ─────────────────────────────────────────────── */

.dir-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px; height: 24px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
}
.d-in  { background: var(--green-tint); color: #16744E; }
.d-out { background: var(--brand-tint); color: var(--brand); }

/* ── Chat-Verlauf (WhatsApp-Anatomie) ────────────────────────────────── */

.ref-link { color: var(--brand); font-weight: 600; }
.ref-link:hover { text-decoration: underline; }

.panel-chat { flex: 1; display: flex; min-height: 0; }
.panel-chat .chat-thread { flex: 1; }

.chat-thread { display: flex; flex-direction: column; min-height: 0; }
.chat-scroll {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 18px 18px 14px;
	background-color: #EDF1F6;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%233B6FB5' stroke-opacity='.07' stroke-width='1.6'%3E%3Ccircle cx='38' cy='44' r='9'/%3E%3Cpath d='M180 30l9 9m0-9l-9 9'/%3E%3Cpath d='M90 118c8-7 16 7 24 0'/%3E%3Crect x='198' y='150' width='16' height='16' rx='4'/%3E%3Cpath d='M40 200l8-14 8 14z'/%3E%3Ccircle cx='140' cy='225' r='7'/%3E%3Cpath d='M232 86c-6 0-10 4-10 9s4 9 10 9'/%3E%3C/g%3E%3C/svg%3E");
}
.chat-scroll > :first-child { margin-top: auto; } /* wenige Nachrichten docken unten an */

.chat-day { display: flex; justify-content: center; margin: 10px 0 8px; }
.chat-day span {
	padding: 3px 12px;
	border-radius: 99px;
	background: rgba(255,255,255,.85);
	box-shadow: var(--shadow-sm);
	font-size: 11px;
	font-weight: 650;
	color: var(--text-2);
}

.bubble-row { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 5px; }
.bubble-row.b-out { justify-content: flex-end; }
.chat-av {
	width: 26px; height: 26px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--brand-deep);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
}

.bubble {
	position: relative;
	max-width: 78%;
	padding: 8px 12px 7px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 1.5px rgba(20,29,36,.16);
	font-size: 13.5px;
	line-height: 1.45;
}
.bubble::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 11px; height: 11px;
	background: inherit;
}
.b-in .bubble { border-bottom-left-radius: 2px; }
.b-in .bubble::after { left: -6px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.b-out .bubble { background: var(--brand-tint); border-bottom-right-radius: 2px; }
.b-out .bubble::after { right: -6px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.b-out .bubble.ch-whatsapp { background: #D9FDD3; }

.bubble-ref {
	display: block;
	margin: -2px -6px 6px;
	padding: 5px 9px;
	border-left: 3px solid var(--brand);
	border-radius: 6px;
	background: rgba(59,111,181,.08);
	font-size: 11.5px;
	font-weight: 650;
	color: var(--brand-deep);
}
.bubble-ref:hover { background: rgba(59,111,181,.14); }
.bubble-subject { font-weight: 650; font-size: 13px; margin-bottom: 3px; }
.bubble-text { white-space: pre-line; }
.bubble-time {
	float: right;
	margin: 8px -4px -2px 10px;
	font-size: 10.5px;
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.bubble-time i { font-style: normal; color: #53BDEB; letter-spacing: -2px; }
.bubble-time i.grey { color: var(--text-3); }
.bubble-bot {
	display: flex; align-items: center; gap: 5px;
	clear: both;
	margin-top: 6px; padding-top: 5px;
	border-top: 1px dashed rgba(20,29,36,.12);
	font-size: 10.5px;
	color: var(--text-3);
}
.bubble-bot .ic { width: 11px; height: 11px; color: var(--brand); }

.chat-empty {
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	padding: 30px;
	color: var(--text-3);
	font-size: 13px;
	text-align: center;
	max-width: 320px;
}
.chat-empty .ic { width: 26px; height: 26px; opacity: .5; }

/* Tabs + Tab-Flächen im Seitenpanel */
.panel-tabs {
	display: flex;
	gap: 7px;
	padding: 9px 22px;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
}
.panel-tabwrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.panel-tabwrap .panel-chat { flex: 1; min-height: 0; }

.chat-foot {
	display: flex; gap: 9px;
	padding: 12px 16px;
	background: var(--bg);
	border-top: 1px solid var(--border);
}
.chat-input { flex: 1; height: 38px; border-radius: 99px; padding: 0 16px; }

/* Chat als Tab in Vorgangs-Karten */
.chat-card .chat-thread { height: 540px; }
.chat-card .chat-foot { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ── Inbox: Konversationsliste + Verlauf ─────────────────────────────── */

.inbox {
	display: grid;
	grid-template-columns: 330px 1fr;
	height: calc(100vh - 248px);
	min-height: 480px;
	overflow: hidden;
}
.thread-list { border-right: 1px solid var(--border); overflow-y: auto; }
.thread-item {
	display: flex;
	gap: 11px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
	cursor: pointer;
	transition: background .1s;
}
.thread-item:hover { background: var(--bg-subtle); }
.thread-item.is-active { background: var(--brand-tint); }
.thread-item .chat-av { width: 38px; height: 38px; font-size: 13px; margin-top: 2px; }
.thread-body { min-width: 0; flex: 1; }
.thread-top { display: flex; align-items: baseline; gap: 8px; }
.thread-name { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-time { margin-left: auto; font-size: 11px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.thread-preview {
	font-size: 12.5px;
	color: var(--text-2);
	margin-top: 1px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.thread-dir { font-style: normal; color: var(--text-3); }
.thread-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.thread-ref { font-size: 10.5px; color: var(--brand); }

.inbox-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.inbox-chat-head {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 16px;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
}
.inbox-chat-head .chat-av { width: 34px; height: 34px; font-size: 12px; }
.inbox-chat-head b { font-size: 14px; }
.inbox-chat .chat-thread { flex: 1; min-height: 0; }

@media (max-width: 1180px) {
	.inbox { grid-template-columns: 1fr; height: auto; }
	.inbox-chat { height: 70vh; }
	.thread-list { max-height: 300px; border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ── Einstellungen ───────────────────────────────────────────────────── */

.settings-layout { display: grid; grid-template-columns: 215px 1fr; gap: 18px; align-items: start; }
.set-nav {
	position: sticky;
	top: 76px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 8px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}
.set-nav a {
	padding: 7px 11px;
	border-radius: var(--radius);
	font-size: 12.5px;
	font-weight: 550;
	color: var(--text-2);
}
.set-nav a:hover { background: var(--brand-tint); color: var(--brand-deep); }
.set-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.set-card { scroll-margin-top: 76px; }
.set-rows { padding: 4px 0; }
.set-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--border);
}
.set-row:last-child { border-bottom: 0; }
.set-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.set-info b { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.set-info b .ic { width: 14px; height: 14px; color: var(--text-3); }
.set-info > span { font-size: 12px; color: var(--text-3); }
.set-info-row { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.set-info-row:last-child { border-bottom: 0; }
.set-info-row b { font-weight: 600; white-space: nowrap; }
.set-info-row > span:not(.pill) { font-size: 12px; color: var(--text-3); }
.set-value { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.set-chips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 380px; }

.toggle {
	width: 40px; height: 23px; flex: none;
	border-radius: 99px;
	background: var(--border-strong);
	position: relative;
	transition: background .18s;
}
.toggle i {
	position: absolute;
	top: 2.5px; left: 2.5px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--shadow-sm);
	transition: transform .18s;
}
.toggle.is-on { background: var(--green); }
.toggle.is-on i { transform: translateX(17px); }

@media (max-width: 1180px) {
	.settings-layout { grid-template-columns: 1fr; }
	.set-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* ── Toasts ──────────────────────────────────────────────────────────── */

#toaster {
	position: fixed;
	bottom: 22px; right: 22px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	z-index: 120;
	max-width: 380px;
}
.toast {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 13px 15px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	animation: toast-in .25s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.toast.is-leaving { transition: opacity .25s, transform .25s; opacity: 0; transform: translateY(8px); }
.toast-ic {
	width: 28px; height: 28px; flex: none;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
}
.toast-ic .ic { width: 15px; height: 15px; }
.toast-ok .toast-ic { background: var(--green-tint); color: #16744E; }
.toast-warn .toast-ic { background: var(--amber-tint); color: var(--amber); }
.toast-info .toast-ic { background: var(--brand-tint); color: var(--brand); }
.toast-body { min-width: 0; }
.toast-body b { display: block; font-size: 13px; font-weight: 650; }
.toast-body i { font-style: normal; font-size: 12.5px; color: var(--text-2); }
.toast-x { color: var(--text-3); padding: 2px; border-radius: 4px; flex: none; }
.toast-x .ic { width: 13px; height: 13px; }
.toast-x:hover { color: var(--text); background: var(--bg-subtle); }

/* ── Fertigung: Angebotskalkulation + Nachkalkulation ─────────────────── */

/* Zeichnungsblatt (Pendant zum Beleg-„Papier") */
.dwg { background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 14px 14px 0; }
.dwg-svg { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 4px; background: #FDFDFB; }
.dwg-svg .dl { stroke: #33415C; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.dwg-svg .dthin { stroke: #6B7B9E; stroke-width: 0.9; fill: none; }
.dwg-svg .cl { stroke: #9AA8C7; stroke-width: 0.9; fill: none; stroke-dasharray: 14 4 3 4; }
.dwg-svg .hatchrect { fill: url(#hatch); stroke: none; }
.dwg-svg .dsec { stroke: #33415C; stroke-width: 1.5; fill: url(#hatch); stroke-linejoin: round; }
.dwg-svg text { font-family: var(--mono); font-size: 12px; fill: #33415C; transition: fill .15s; }
.dwg-svg .dnote { font-size: 10.5px; fill: #5B6B8C; }
.dwg-svg .dwg-hl, .dwg-svg g.dwg-hl text { fill: #B45309; font-weight: 700; }
.dwg-generic { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 56px 30px; border: 1.5px dashed var(--border-strong); border-radius: 4px; color: var(--text-2); font-size: 12.5px; }
.dwg-generic .ic { width: 26px; height: 26px; color: var(--text-3); }
.dwg-generic b { font-family: var(--mono); font-size: 12px; color: var(--text); }
.dwg-title { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border: 1px solid var(--border-strong); border-radius: 4px; margin: 12px 0 14px; overflow: hidden; }
.dwg-title > div { padding: 7px 10px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dwg-title > div:nth-child(3n) { border-right: 0; }
.dwg-title > div:nth-last-child(-n+3) { border-bottom: 0; }
.dwg-title span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 700; margin-bottom: 2px; }
.dwg-title b { font-size: 12px; font-weight: 600; }
.dwg-title mark { background: transparent; color: inherit; border-radius: 3px; padding: 0 2px; margin: 0 -2px; transition: background .15s, box-shadow .15s; }
.dwg-title mark.is-hl { background: #FFE9B8; box-shadow: 0 0 0 2px #FFE9B8; }

/* Staffelpreise: angefragte Menge hervorheben */
.tier-sel > td { background: var(--brand-tint); }

/* Zeilen-Listen in Karten: horizontales Karten-Padding, Zeilen trennen selbst */
.card-body.list-pad { padding: 4px 18px 10px; }

/* Ähnlichteile */
.sim-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--border); }
.sim-row:last-of-type { border-bottom: 0; }
.sim-main { min-width: 0; }

/* Nachkalkulation: Erkenntnisse */
.learn-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); }
.learn-item:last-child { border-bottom: 0; }
.learn-main { min-width: 0; flex: 1; }
.learn-side { flex: none; padding-top: 2px; }

/* Nachkalkulation: Soll/Ist-Balken im Panel */
.si-step { padding: 11px 0; border-bottom: 1px solid var(--border); }
.si-step:last-of-type { border-bottom: 0; }
.si-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.si-row { display: grid; grid-template-columns: 30px 1fr 76px; align-items: center; gap: 9px; margin-top: 4px; }
.si-row > span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.si-row > b { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.si-track { height: 9px; background: var(--bg-subtle); border-radius: 99px; overflow: hidden; }
.si-track i { display: block; height: 100%; border-radius: 99px; min-width: 3px; }
.si-plan { background: var(--blue); opacity: .45; }
.si-act { background: var(--green); }
.si-act.warn { background: var(--amber); }
.si-act.bad { background: var(--red); }

/* Marge deutlich unter Plan */
.neg-val { color: var(--red); }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
	.detail-grid, .detail-grid.kpi-aligned { grid-template-columns: 1fr; }
	.detail-grid.kpi-aligned > * { grid-column: auto; }
	.paper-wrap { position: static; order: 2; }
	.paper { max-height: none; }
	.dash-grid { grid-template-columns: 1fr; }
	.kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.rail { display: none; }
	.topbar { padding: 0 16px; }
	.page { padding: 18px 16px 48px; }
	.sync-chip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Zahlungsleiste über der Rechnungsliste ───────────────────────────
   Freigabe und Zahlung sind zwei Vorgänge. Die Leiste zeigt, an welchem
   Tag die Demo steht, was heute zur Zahlung ansteht und was die Bank
   noch nicht bestätigt hat — sie ist Statusanzeige und Bedienung zugleich. */
.pay-bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	padding: 10px 14px; margin-bottom: 14px;
	border: 1px solid var(--border); border-radius: 10px;
	background: var(--bg-subtle);
}
.pay-now { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.pay-now svg { width: 16px; height: 16px; opacity: .7; }
.pay-now b { color: var(--text); font-variant-numeric: tabular-nums; }
.pay-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Was heute ansteht — je Angabe ein eigener Punkt, damit „1 Beleg" und
   „1 Zahllauf" nicht als eine Zahl gelesen werden. */
.pay-hinweis { display: inline-flex; align-items: center; }
.pay-hinweis::before { content: "·"; margin: 0 8px; color: var(--text-3); }
.pay-actions form { display: flex; gap: 6px; margin: 0; }
/* E-Rechnung: maschinenlesbar übernommen statt gelesen — eigene Farbe,
   weil es der einzige Weg ohne Rateanteil ist. */
.src-tag.src-erechnung { background: #E8F5EC; color: #1B6B3A; border-color: #BFE3CC; }

/* Nacherfassung im Prüfhinweis: Die fehlende Angabe wird dort eingetragen,
   wo sie beanstandet wird — nicht in einem separaten Dialog. */
.ref-fix { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ref-fix label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.ref-fix input { min-width: 240px; }
.ref-hint { font-size: 11.5px; color: var(--text-3); }
/* Kategorie-Auswahl in der Kontierung: sieht aus wie ein Wert, ist aber
   bearbeitbar — die Korrektur wirkt sofort auf die Auswertung. */
.cat-form { margin: 0; }
.cat-form .select.sm { padding: 3px 26px 3px 8px; font-size: 13px; font-weight: 600;
	border-color: transparent; background-color: transparent; max-width: 100%; }
.cat-form .select.sm:hover { border-color: var(--border); background-color: var(--bg-subtle); }
/* Preisabweichung: die beiden Auswege stehen direkt am Befund. */
.price-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.price-actions .ref-fix { width: 100%; margin-top: 4px; }
/* Begründung der roten Kennzeichnung: die Regel und die konkreten
   Vorgänge — am Telefon erklärbar, kein anonymer Punktwert. */
.repeat-why { color: #B3261E; font-size: 11.5px; margin-top: 2px; }

/* ── Öffentliche Terminbuchung ────────────────────────────────────────
   Eine Seite für Menschen ohne Zugang zum System: ruhig, breit genug fürs
   Handy, ohne alles, was hier nichts zu suchen hat. */
.pub-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
	padding: 24px 16px; background: var(--bg-subtle); }
.pub-card { width: 100%; max-width: 560px; background: #fff; border: 1px solid var(--border);
	border-radius: 14px; padding: 28px 26px 20px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.pub-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pub-head h1 { font-size: 22px; margin: 0; }
.pub-ok svg { width: 24px; height: 24px; color: #1B6B3A; }
.pub-lead { color: var(--text-2); font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; }
.pub-err { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-bottom: 14px;
	border: 1px solid #F0C9C4; background: #FDF3F2; color: #8C1D18; border-radius: 8px; font-size: 13.5px; }
.pub-err svg { width: 17px; height: 17px; flex: none; }
.pub-day { margin-bottom: 16px; }
.pub-day-head { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 7px; }
.pub-slots { display: flex; flex-wrap: wrap; gap: 7px; }
.pub-slot { padding: 9px 15px; border: 1px solid var(--border); border-radius: 8px;
	background: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
	font-variant-numeric: tabular-nums; }
.pub-slot:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
/* Der Terminknopf ist kein .btn — ohne diese Regel drehte sich sein
   Spinner dauerhaft neben der Uhrzeit, auf der Seite, die der
   Interessent zu sehen bekommt. */
.pub-slot { display: inline-flex; align-items: center; gap: 6px; }
.pub-slot .spinner { display: none; }
.pub-slot.htmx-request .spinner, .pub-slot.is-busy .spinner { display: inline-block; }
.pub-slot.htmx-request, .pub-slot.is-busy { pointer-events: none; opacity: .75; }
.pub-slot.is-taken { color: var(--text-3); background: var(--bg-subtle);
	text-decoration: line-through; cursor: default; }
.pub-slot-confirmed { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
	border: 1px solid #BFE3CC; background: #F2F9F5; border-radius: 10px; margin-bottom: 16px; }
.pub-slot-confirmed b { font-size: 16px; }
.pub-slot-confirmed span { font-size: 13.5px; color: var(--text-2); }
.pub-note { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.pub-none { margin-top: 6px; }
.pub-change { margin-top: 14px; font-size: 13.5px; }
.pub-change summary { cursor: pointer; color: var(--text-2); margin-bottom: 10px; }
.pub-foot { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--border);
	font-size: 11.5px; color: var(--text-3); text-align: center; }

/* ── KI-Rückfall in den Einstellungen ─────────────────────────────────
   Der Schalter steht bewusst mit seiner Folge nebeneinander: Wer ihn
   einlegt, sieht daneben, dass Belege das Haus verlassen. */
.ki-fallback { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 14px; }
.fb-head { display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap; margin: 10px 0 6px; }
.fb-switch { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; }
.fb-switch input { width: 16px; height: 16px; }
.fb-note { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 0 0 12px; }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px; margin-bottom: 12px; }
.fb-grid label { display: flex; flex-direction: column; gap: 4px;
	font-size: 12px; font-weight: 600; color: var(--text-2); }
.fb-grid input { font-weight: 400; min-width: 0; }
/* Zusatz in der Beschriftungszeile („Pflicht"): Er gehört neben den
   Text, nicht darunter — in einer Spalten-Flexbox wird sonst jedes Kind
   zur eigenen Zeile und die Felder starten auf verschiedenen Höhen. */
.fb-grid label > span { display: block; }
.fb-grid label i { font-style: normal; font-weight: 400; color: var(--text-3); }
/* Hinweis unter einem Feld — etwa der hinterlegte Schlüssel. Im Feld selbst
   stünde er als Platzhalter und würde am Feldrand abgeschnitten. */
.fb-hint { font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.fb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-result { margin-top: 12px; padding: 9px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.fb-result.ok { background: #F2F9F5; border: 1px solid #BFE3CC; color: #1B6B3A; }
.fb-result.warn { background: #FDF6EC; border: 1px solid #EEDBBB; color: #7A4E00; }

/* ── Datenbestätigung: gelesene Felder ────────────────────────────────
   Der Normalfall ist Lesen: Die Werte stehen da wie Werte. Erst der Klick
   macht einen davon zum Eingabefeld — ein Beleg voller Rahmen sähe aus wie
   ein Formular, das jemand ausfüllen muss, und genau das ist es nicht. */
.field-value.is-editable {
	display: flex; align-items: center; gap: 7px; width: 100%;
	padding: 3px 6px; margin: -3px -6px;
	font: inherit; text-align: left; color: inherit;
	background: none; border: 1px solid transparent; border-radius: 6px;
	cursor: text;
}
.field-value.is-editable svg {
	width: 13px; height: 13px; flex: none; margin-left: auto;
	color: var(--text-3); opacity: 0; transition: opacity .12s ease;
}
.field-value.is-editable:hover {
	background: var(--bg-subtle);
	border-color: var(--border);
}
.field-value.is-editable:hover svg { opacity: .75; }
.field-value.is-editable:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Ein von Hand geänderter Wert bleibt erkennbar, bis er bestätigt ist. */
.was-edited {
	box-shadow: inset 0 -0.5em 0 rgba(255, 214, 79, .45);
	border-radius: 2px;
}

.field-input {
	width: 100%; padding: 3px 6px; margin: -3px -6px;
	font: inherit; color: inherit;
	background: var(--bg);
	border: 1px solid var(--brand); border-radius: 6px;
	outline: none;
}

/* Unsichere Lesewerte laden von sich aus zum Prüfen ein — dezent, sonst
   wäre die halbe Liste markiert. */
.field.is-unsure .field-label::after {
	content: "prüfen";
	margin-left: 7px; padding: 1px 5px;
	font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
	color: #92651A; background: #FDF6EC; border: 1px solid #EEDBBB; border-radius: 3px;
	vertical-align: 1px;
}

.confirm-bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
	margin-top: 4px; padding: 13px 16px; border-top: 1px solid var(--border);
	background: var(--bg-subtle);
}
.confirm-firma { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.confirm-do { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.confirm-hint { font-size: 12px; color: var(--text-3); max-width: 40ch; }
.confirm-bar.is-done { color: var(--text-2); font-size: 13.5px; gap: 9px; justify-content: flex-start; }
.confirm-bar.is-done svg { width: 16px; height: 16px; color: #1B6B3A; flex: none; }

/* ── Fundstellen im Beleg ─────────────────────────────────────────────
   Beim Überfahren eines gelesenen Feldes leuchtet die Stelle, an der der
   Wert im Beleg steht. Unsichtbar, bis sie gebraucht wird — ein Beleg
   voller Rahmen wäre unlesbar. */
.beleg-seite { position: relative; display: block; }
.beleg-seite .beleg-page { display: block; width: 100%; }
.fund {
	position: absolute; pointer-events: none;
	border: 2px solid transparent; border-radius: 3px;
	background: transparent;
	transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.fund.is-on {
	border-color: #C9A227;
	background: rgba(255, 214, 79, .34);
	box-shadow: 0 0 0 3px rgba(255, 214, 79, .22);
}
@media (prefers-reduced-motion: reduce) { .fund { transition: none; } }

/* ── Schmale Fenster ──────────────────────────────────────────────────
   Ein MacBook zeigt rund 1440 Punkte in der Breite; die Seitenleiste
   nimmt davon 240. Eine neunspaltige Liste passt da nur, wenn Zellen
   und Seitenrand etwas enger sitzen. Und falls es doch nicht reicht,
   scrollt die Tabelle in ihrer Karte — nie die ganze Seite. */
.card:has(> table.tbl),
.card-body:has(> table.tbl) { overflow-x: auto; }
/* Die letzte Tabellenzeile folgt der Rundung der Karte, statt eckig
   gegen deren Kante zu stoßen. */
.card > table.tbl tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg); }
.card > table.tbl tr:last-child td:last-child { border-bottom-right-radius: var(--radius-lg); }

@media (max-width: 1500px) {
	.page { padding-left: 20px; padding-right: 20px; }
	.tbl { font-size: 12.5px; }
	.tbl th, .tbl td { padding-left: 10px; padding-right: 10px; }
	.tbl .cell-sub { font-size: 11.5px; }
}

/* Hinweis auf eine gescheiterte Leseabfrage: Die Seite zeigt dann Leere,
   und Leere sieht aus wie „nichts vorhanden". */
.ladefehler {
	display: flex; align-items: flex-start; gap: 9px;
	margin: 12px 24px -4px; padding: 10px 13px;
	border: 1px solid var(--amber); border-radius: var(--radius);
	background: var(--amber-tint); color: var(--text);
	font-size: 12.5px; line-height: 1.5;
}
.ladefehler svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--amber); }

/* Freigabe in Vertretung: Der Knopf steht da, weil jemand anderes
   abwesend ist — das gehört danebengeschrieben. */
.vertretung-hinweis {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 9px; border-radius: 999px;
	background: var(--violet-tint); color: var(--violet);
	font-size: 11.5px; font-weight: 600;
}
.vertretung-hinweis svg { width: 13px; height: 13px; }

/* ── Positionen & Abgleich ────────────────────────────────────────────
   Drei Dinge stehen hier übereinander: was abgerechnet wird, wie es sich
   zur Referenz verhält, und wohin es kontiert wird. Vorher lief das in
   einer Tabelle ineinander — jetzt hat jede Position eine Hauptzeile mit
   ausgerichteten Beträgen und darunter, nur wenn nötig, eine Zeile über
   die volle Breite für Leistung, Abgleich und Kontierung. */

.leistung-zeile {
	display: flex; align-items: flex-start; gap: 10px;
	margin: 0 16px 14px; padding: 11px 13px;
	border: 1px solid var(--border); border-left: 3px solid var(--brand);
	border-radius: var(--radius); background: var(--bg-subtle);
}
.leistung-zeile > svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--brand); }
.leistung-zeile span { display: block; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin-bottom: 3px; }
.leistung-zeile b { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.5; }

/* Alle Positionen gleich kontiert: eine Aussage statt zwanzig. */
.pos-gleich {
	display: flex; align-items: center; gap: 8px;
	margin: 0 16px 12px; padding: 9px 13px;
	border-radius: var(--radius); background: var(--green-tint);
	font-size: 12.5px; color: var(--text-2);
}
.pos-gleich > svg { width: 15px; height: 15px; flex: none; color: var(--green); }
.pos-gleich b { color: var(--text); font-weight: 600; }

/* Die Positionstabelle folgt der Tabelle des Hauses (.tbl) — gleiche
   Innenabstände, gleiche Kopfzeile, gleiche Trennlinien. */
.pos-tabelle tbody.pos-gruppe + tbody.pos-gruppe { border-top: 1px solid var(--border); }
.pos-tabelle tr.pos-haupt td { border-bottom: 0; padding-bottom: 6px; }
.pos-tabelle tr.pos-haupt:only-child td { padding-bottom: 12px; }
.pos-tabelle tr.pos-detail td { border-bottom: 0; padding-top: 0; padding-bottom: 10px; }
.pos-tabelle tr.pos-form-zeile td { border-bottom: 0; padding: 0 14px; }
.pos-tabelle tr.pos-form-zeile:has(form[x-cloak]) td { padding: 0; }
.pos-tabelle .pos-rechnung { white-space: nowrap; color: var(--text-2); }
/* Beträge brechen nicht um — „2.179,68 €" mit dem € in der nächsten
   Zeile ist kein Betrag mehr. */
.pos-tabelle td.num { white-space: nowrap; }
.pos-tabelle td.num b { white-space: nowrap; }
.pos-tabelle .pos-rechnung .mal { color: var(--text-3); padding: 0 2px; }
.pos-tabelle .pos-aktion { width: 96px; }
.pos-tabelle .pos-aktion .btn { white-space: nowrap; }
.pos-tabelle .ms-ok svg, .pos-tabelle .ms-price svg, .pos-tabelle .ms-qty svg { width: 16px; height: 16px; vertical-align: -3px; }
.pos-tabelle .ms-ok { color: var(--green); }
.pos-tabelle .ms-price, .pos-tabelle .ms-qty { color: var(--amber); }
.pos-tabelle .ms-noorder { font-size: 12px; color: var(--text-3); }

/* Was für diese Position getan wurde — die Angabe, nach der ein Prüfer
   als Erstes sucht. */
/* Die Leistungsbeschreibung gehört sichtbar zur Position darüber —
   ohne Einrückung stand sie zwischen zwei Zeilen und konnte zu beiden
   gehören. */
.pd-leistung {
	margin: 0; padding-left: 11px;
	border-left: 2px solid var(--border-strong);
	font-size: 12.5px; color: var(--text-2); line-height: 1.55;
	max-width: 62ch;
}

/* Der Abgleich als Chips statt als Kleingedrucktes in den Zahlenspalten:
   dort drängten sich bis zu drei Werte übereinander. */
.pos-abgleich { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; font-size: 12px; }
.ab-wert {
	padding: 2px 8px; border-radius: 999px;
	background: var(--bg-subtle); border: 1px solid var(--border);
	color: var(--text-2); font-variant-numeric: tabular-nums;
}
.ab-wert.weicht-ab { background: var(--amber-tint); border-color: var(--amber); color: var(--text); font-weight: 600; }
.ab-hinweis { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); line-height: 1.5; }
.ab-hinweis svg { width: 13px; height: 13px; flex: none; color: var(--text-3); }

.pd-kontiert {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: 7px; padding: 3px 10px; border-radius: 999px;
	background: var(--green-tint); font-size: 12px; color: var(--text-2);
}
.pd-kontiert svg { width: 13px; height: 13px; flex: none; color: var(--green); }
.pd-kontiert b { color: var(--text); font-weight: 600; }

/* Kontierung: eigene Fläche, Beschriftungen über den Feldern — ohne sie
   war „Gewerk, z. B. Sanitär" nur ein Platzhalter, der beim Tippen
   verschwand. */
.pos-kontierung {
	display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
	margin: 2px 0 12px; padding: 11px 13px;
	border-radius: var(--radius); background: var(--bg-subtle);
	border: 1px solid var(--border);
}
.pk-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pk-feld:nth-of-type(1) { flex: 1 1 150px; }
.pk-feld:nth-of-type(2) { flex: 1 1 210px; }
.pk-feld > span { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.pk-feld .input { width: 100%; }
.pk-umlage {
	display: inline-flex; align-items: center; gap: 6px;
	height: 29px; padding: 0 10px; border-radius: 999px;
	background: var(--bg); border: 1px solid var(--border-strong);
	font-size: 12.5px; color: var(--text-2); cursor: pointer; user-select: none;
	white-space: nowrap;
}
.pk-umlage input { width: 13px; height: 13px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.pk-umlage:has(input:checked) { background: var(--green-tint); border-color: var(--green); color: var(--text); font-weight: 600; }
.pos-kontierung .btn { height: 29px; }

/* Sammelkontierung: bei zwanzig Positionen derselben Baustelle die eine
   Eingabe statt zwanzig. */
.pos-sammel { margin: 0 16px 12px; }
.ps-felder {
	display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
	margin-top: 9px; padding: 11px 13px;
	border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--bg-subtle);
}
.ps-felder .pk-feld:nth-of-type(1) { flex: 1 1 160px; }
.ps-felder .pk-feld:nth-of-type(2) { flex: 1 1 220px; }
.ps-hinweis { align-self: center; font-size: 11.5px; color: var(--text-3); }

/* Die Summen sitzen im tfoot — dadurch stehen sie exakt unter den
   Beträgen, die sie summieren. */
.pos-summen td { border-bottom: 0; padding: 3px 14px; color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.pos-summen tr:first-child td { padding-top: 14px; border-top: 1px solid var(--border); }
.pos-summen td.num:last-of-type, .pos-summen td:nth-last-child(1) { color: var(--text); }
.pos-summen .ps-brutto td {
	padding-top: 8px; padding-bottom: 14px;
	font-size: 15px; font-weight: 700; color: var(--text);
}
.pos-summen .ps-brutto td:first-child { font-weight: 600; font-size: 13px; color: var(--text-2); }

/* Kreditor-Stammdaten am Prüfhinweis: dieselben zwei Angaben wie in den
   Einstellungen, nur dort, wo der Hinweis steht. */
/* Begründungsfelder in den Hinweisen: breit, wo Platz ist, und
   schrumpfend, wo keiner ist — die Breite gehört ins Stylesheet, nicht
   als fester Wert ins Feld. */
.begruendung-feld { flex: 1 1 320px; min-width: 0; }

.stamm-fix { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
.stamm-frei { display: inline-flex; align-items: center; gap: 8px; }
.stamm-frei .input { width: auto; min-width: 170px; }
.stamm-frei .input[type=date] { min-width: 150px; }

/* Branchenwahl: Was ein Haus betreibt, entscheidet über die Module. */
.branche-wahl { display: flex; flex-direction: column; gap: 9px; }
.branche-opt {
	display: flex; align-items: flex-start; gap: 11px;
	padding: 12px 14px; border: 1px solid var(--border);
	border-radius: var(--radius); cursor: pointer;
	transition: border-color .12s, background .12s;
}
.branche-opt:hover { border-color: var(--border-strong); }
.branche-opt.is-gewaehlt { border-color: var(--brand); background: var(--brand-tint); }
.branche-opt input { margin-top: 3px; accent-color: var(--brand); }
.branche-opt b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.branche-opt i { display: block; font-style: normal; font-size: 12.5px; color: var(--text-2); margin-top: 2px; line-height: 1.5; }
.branche-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* ── Kalkulation ─────────────────────────────────────────────────────────
   Der Arbeitsplan links, die Entscheidungen rechts: Wer kalkuliert,
   arbeitet an den Zeilen und schaut nur zum Abschluss nach rechts. */
.kalk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 1200px) {
	.kalk-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
	.kalk-seite { position: sticky; top: 18px; }
}
.kalk-haupt, .kalk-seite { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Kopfzeile der Anfrage: links die Sache, rechts der Preis. */
.dt-main { min-width: 0; }
.dt-title { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.dt-title h1 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.dt-sub { font-size: 12.5px; color: var(--text-2); margin-top: 4px; line-height: 1.6; }
.dt-zahl { margin-left: auto; text-align: right; flex: none; }
.dt-betrag { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dt-betrag.muted { font-size: 15px; font-weight: 600; color: var(--text-3); }
.dt-betrag-sub { font-size: 12px; color: var(--text-2); margin-top: 3px; }

/* Kalkulationstabelle: zwei Spalten, die zweite trägt Beträge. */
.kalk-tabelle td:last-child, .kalk-tabelle th:last-child { text-align: right; }
.kalk-tabelle .zwischensumme td { border-top: 1px solid var(--border); font-weight: 600; }
.kalk-tabelle tfoot td { font-weight: 600; }
tr.ist-angefragt { background: var(--brand-tint); }
tr.ist-angefragt td { font-weight: 600; }

/* Abweichungen färben, aber nur wo sie etwas bedeuten. */
.ab-schlecht { color: var(--red); }
.ab-gut { color: #16744E; }

/* Erfassungsformulare: ein Raster, das mitwächst. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.form-grid label, .ag-felder label, .stamm-fix label {
	display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.form-grid label span, .ag-felder label span, .stamm-fix label span,
.block-label span {
	font-size: 11.5px; font-weight: 600; color: var(--text-2);
	text-transform: uppercase; letter-spacing: .03em;
}
.form-grid label i, .ag-felder label i { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--text-3); }
.form-grid .f-2 { grid-column: span 2; }
.form-fuss { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.ag-form { border-top: 1px solid var(--border); }
.ag-art { display: flex; gap: 18px; margin-bottom: 12px; }
.ag-art label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.ag-art input { accent-color: var(--brand); }
.ag-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.ag-felder .w-name, .ag-felder .w-notiz { grid-column: span 2; }
.ag-felder .w-platz { grid-column: span 2; }

/* Arbeitsgang ändern: eingeklappt in der Zeile, aufgeklappt dasselbe
   Raster wie das Anlegen-Formular. */
.gang-aendern > summary {
	display: inline-block; margin-top: 5px; cursor: pointer;
	font-size: 11.5px; font-weight: 600; color: var(--text-3);
	list-style: none;
}
.gang-aendern > summary::-webkit-details-marker { display: none; }
.gang-aendern > summary::before { content: "✎ "; }
.gang-aendern > summary:hover { color: var(--brand); }
.gang-aendern[open] > summary { color: var(--brand); }
.gang-aendern form {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px; align-items: end; margin: 9px 0 4px;
	padding: 12px; border: 1px solid var(--border); border-radius: 10px;
	background: var(--bg);
}
.gang-aendern label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gang-aendern label span {
	font-size: 11.5px; font-weight: 600; color: var(--text-2);
	text-transform: uppercase; letter-spacing: .03em;
}
.gang-aendern .w-ag { max-width: 90px; }
.gang-aendern .w-name, .gang-aendern .w-notiz, .gang-aendern .w-platz { grid-column: span 2; }

/* Seitenspalte: gestapelte Formulare, jedes für sich lesbar. */
.kalk-seite .stamm-fix { flex-direction: column; align-items: stretch; gap: 11px; }
.kalk-seite .stamm-fix label { width: 100%; }
.btn.block { display: flex; width: 100%; justify-content: center; }
.schritt-box { display: flex; flex-direction: column; gap: 11px; }
.schritt-box .hint { font-size: 12px; line-height: 1.55; }
.ausgang-form { display: flex; flex-direction: column; gap: 9px; }
.grund-feld { display: flex; flex-direction: column; gap: 5px; }
.grund-feld span { font-size: 11.5px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.block-label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }

/* Vergleichbares: kurze Blöcke, kein Tabellengerüst für drei Zeilen. */
.vgl-zeile { padding: 11px 0; border-bottom: 1px solid var(--border); }
.vgl-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.vgl-zeile:first-child { padding-top: 0; }
.vgl-kopf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13.5px; }
.vgl-preis { font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Termine und ähnliche Wertepaare. */
.kv-liste { display: flex; flex-direction: column; gap: 9px; }
.kv-liste > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.kv-liste span { color: var(--text-2); }

/* Verlauf. */
.timeline { display: flex; flex-direction: column; gap: 11px; }
.tl-row { display: flex; gap: 14px; font-size: 13px; line-height: 1.55; }
.tl-when { flex: none; width: 128px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tl-what { min-width: 0; }

/* Rückfrage direkt im Hinweis beantworten. */
.klaer-form { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.klaer-form input { flex: 1 1 240px; min-width: 0; }

/* Ist-Zeiten der Nachkalkulation: die Eingabe steht bei der Zeile. */
.ist-form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.ist-form input[name="ist_stunden"] { width: 110px; }
.ist-form input[name="notiz"] { flex: 1 1 200px; min-width: 0; }

/* Arbeitsplätze in den Einstellungen. */
.platz-aktionen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.platz-fix { display: inline-flex; gap: 6px; align-items: center; }

/* Fällt eine Karte des Auswertungs-Paares weg (Fertigung hat keine
   Stundenzettel), nimmt die verbliebene die volle Breite — eine halbe
   Karte neben Leerraum sieht nach Fehler aus. */
.report-grid.ist-einspaltig { grid-template-columns: minmax(0, 1fr); }

/* Verworfene Anfragen bleiben lesbar, hören aber auf, wie laufende
   Vorgänge auszusehen — sie zählen in keiner Kennzahl mit. */
tr.ist-verworfen td { color: var(--text-3); }
tr.ist-verworfen b { font-weight: 500; }

/* Einrichtungshinweis auf der Übersicht: Was ein frisches Haus noch
   braucht. Er verschwindet, sobald die Schritte erledigt sind. */
.einrichtung { margin-bottom: 16px; }
.einricht-liste { display: flex; flex-direction: column; gap: 2px; }
.einricht-schritt {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 12px; border-radius: var(--radius);
	transition: background .12s;
}
.einricht-schritt:hover { background: var(--bg-subtle); }
.einricht-text { flex: 1; min-width: 0; }
.einricht-text b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.einricht-text i { display: block; font-style: normal; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.einricht-schritt .ic { color: var(--text-3); flex: none; }

/* ── Angebotsblatt ───────────────────────────────────────────────────────
   Ein Dokument, das zum Kunden geht: ein Blatt auf hellem Grund, ohne
   Navigation. Beim Drucken verschwindet alles, was nur zur Bedienung da
   ist — der Ausdruck soll aussehen wie ein Brief, nicht wie ein
   Bildschirmfoto. */
.dokument { max-width: 900px; margin: 0 auto; padding: 22px 18px 60px; }
.dok-leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.dok-leiste .hint { font-size: 12px; }
.dok-blatt {
	background: #fff; color: #16181d;
	border: 1px solid var(--border); border-radius: var(--radius-lg);
	padding: 46px 52px 40px;
	box-shadow: 0 1px 3px rgba(16,24,40,.06);
}
.dok-kopf { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 34px; }
.dok-absender { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.dok-absender b { font-size: 15px; }
.dok-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; text-align: right; }
.dok-meta div { display: flex; gap: 12px; justify-content: flex-end; }
.dok-meta span { color: #5b6472; }
.dok-empfaenger { display: flex; flex-direction: column; gap: 2px; margin-bottom: 32px; font-size: 13.5px; }
.dok-titel { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.dok-h2 { font-size: 14px; font-weight: 650; margin: 28px 0 10px; }
.dok-text { font-size: 13.5px; line-height: 1.65; margin-bottom: 18px; }
.dok-gruss { font-size: 13.5px; line-height: 1.7; margin-top: 26px; }
.dok-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.dok-tabelle th {
	text-align: left; font-size: 11px; font-weight: 650; text-transform: uppercase;
	letter-spacing: .04em; color: #5b6472;
	padding: 0 10px 7px; border-bottom: 1px solid #d7dbe2;
}
.dok-tabelle td { padding: 11px 10px; border-bottom: 1px solid #eceef2; vertical-align: top; }
.dok-tabelle .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dok-tabelle tfoot td { border-bottom: 0; padding-top: 9px; padding-bottom: 3px; }
.dok-tabelle tfoot tr:first-child td { border-top: 1px solid #d7dbe2; padding-top: 12px; }
.dok-tabelle .dok-brutto td { border-top: 1px solid #d7dbe2; padding-top: 10px; font-size: 14px; }
.dok-tabelle.schmal { max-width: 460px; }
.dok-tabelle tr.ist-angefragt td { background: #f4f7fc; font-weight: 600; }
.dok-sub { font-size: 12px; color: #5b6472; margin-top: 3px; }
.dok-kv { display: grid; grid-template-columns: 190px 1fr; gap: 7px 16px; font-size: 13px; }
.dok-kv dt { color: #5b6472; }
.dok-fuss {
	margin-top: 38px; padding-top: 14px; border-top: 1px solid #eceef2;
	font-size: 11.5px; color: #5b6472;
}

@media print {
	.dok-leiste { display: none; }
	.dokument { padding: 0; max-width: none; }
	.dok-blatt { border: 0; border-radius: 0; box-shadow: none; padding: 0; }
	body { background: #fff; }
	@page { margin: 20mm 18mm; }
}

/* Abgabe eines Buchungsstapels: Wohin die Datei ging, fragt die Zeile
   erst auf Klick — sonst stünde in jeder Zeile ein Formular, das meist
   niemand braucht. <details> statt JavaScript. */
.export-aktionen { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
/* Das Formular klappt in der Zeile auf, nicht als Überlagerung: Die
   Tabelle beschneidet ihren Inhalt (runde Ecken), und eine seltene
   Aktion darf die Zeile ruhig höher machen. */
.abgabe > summary { list-style: none; cursor: pointer; }
.abgabe > summary::-webkit-details-marker { display: none; }
.abgabe[open] > summary { background: var(--bg-subtle); }
.abgabe-form {
	width: min(340px, 100%); margin-top: 10px; margin-left: auto; text-align: left;
	display: flex; flex-direction: column; gap: 9px;
	padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg);
	background: var(--bg-subtle);
}
.abgabe-frage { font-size: 12px; font-weight: 600; color: var(--text-2); }
.abgabe-weg { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; font-size: 13px; }
.abgabe-weg input { margin-top: 3px; accent-color: var(--brand); }
.abgabe-weg b { display: block; font-weight: 600; }
.abgabe-weg i { display: block; font-style: normal; font-size: 12px; color: var(--text-2); margin-top: 1px; line-height: 1.45; }
.abgabe-fuss { display: flex; flex-direction: column; gap: 6px; }
.abgabe-fuss .hint { font-size: 11.5px; line-height: 1.45; }
/* Aufgeklappt hängt das Formular unter seinem Knopf; die übrigen
   Schaltflächen der Zeile bleiben, wo sie waren. */
.abgabe[open] { margin-left: auto; }

/* Gegenüberstellung zweier Werte, zwischen denen entschieden wird:
   „weicht ab" ohne den Wert, von dem es abweicht, ist keine Auskunft. */
.iban-vergleich { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 8px 0 10px; font-size: 13px; }
.iban-vergleich dt { color: var(--text-2); white-space: nowrap; }
.iban-vergleich dd { font-weight: 600; }
.iban-vergleich .ist-abweichend { color: var(--amber); }
/* Ein Wert, der noch nicht bestätigt ist, steht farblich heraus. */
.ist-abweichend { color: var(--amber); }

/* Kreditoren: Wer eine unbestätigte Bankverbindung hat, fällt auf —
   an diese Firma fließt kein Geld, bis jemand geprüft hat. */
tr.hat-offene-iban { background: var(--amber-tint); }
.iban-entscheid { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; max-width: 380px; }
.iban-knoepfe { display: flex; gap: 7px; flex-wrap: wrap; }
.kred-stamm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kred-stamm .input { width: auto; }
.kred-stamm .hint { flex-basis: 100%; font-size: 11.5px; }