/* =====================================================================
   Swisslogistik · Enterprise Brand Layer
   Lädt NACH styles.css und überschreibt die NexLink-Theme-Variablen.
   Palette: Logistik-Blau (Primär) · Swiss-Red (Akzent) · Navy (Headings)
   ===================================================================== */

:root {
	/* --- Markenfarben (SwissLogistik-Rot, vom offiziellen Logo) ---------- */
	--sl-brand:        #d4000a;   /* SwissLogistik-Rot, WCAG AA ≥4.5:1 vs. Weiss */
	--sl-brand-700:    #b0000a;
	--sl-brand-600:    #d4000a;
	--sl-brand-400:    #f9090c;
	--sl-accent:       #d4000a;   /* Marke (Rot)                            */
	--sl-navy:         #1B2430;   /* Anthrazit · Sidebar/Headings-Tiefe     */
	--sl-ink:          #1F2937;

	/* --- Bootstrap-Variablen auf die Marke mappen ----------------------- */
	--bs-primary:            #d4000a;
	--bs-primary-rgb:        212, 0, 10;
	--bs-link-color:         #d4000a;
	--bs-link-color-rgb:     212, 0, 10;
	--bs-link-hover-color:   #b0000a;
	--bs-link-hover-color-rgb: 176, 0, 10;
	--bs-focus-ring-color:   rgba(212, 0, 10, 0.25);

	--bs-info:               #0BA5C0;
	--bs-info-rgb:           11, 165, 192;
	--bs-success:            #0E9F6E;
	--bs-success-rgb:        14, 159, 110;
	--bs-warning:            #F5A70D;
	--bs-warning-rgb:        245, 167, 13;
	--bs-danger:             #E5484D;
	--bs-danger-rgb:         229, 72, 77;

	--bs-primary-bg-subtle:     #FEEAEA;
	--bs-primary-border-subtle: #FBC9C9;
	--bs-primary-text-emphasis: #7A0506;

	--bs-body-bg:            #f5f6f8;   /* neutraler, heller Arbeitsflächen-Ton */
	--bs-heading-color:      #1B2430;

	/* --- Politur -------------------------------------------------------- */
	--sl-card-shadow:   0 1px 2px rgba(12, 36, 60, .04), 0 6px 20px rgba(12, 36, 60, .06);
	--sl-card-radius:   .85rem;
}

[data-bs-theme=dark] {
	--bs-primary:            #FB5052;
	--bs-primary-rgb:        251, 80, 82;
	--bs-link-color:         #FB7173;
	--bs-link-color-rgb:     251, 113, 115;
	--bs-link-hover-color:   #FCA5A6;
	--bs-body-bg:            #0f1420;
	--bs-tertiary-bg:        #161c2b;
	--sl-card-shadow:        0 1px 2px rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.35);
}

/* ---------------------------------------------------------------------
   Layout-Fix · Sticky-Footer (verhindert, dass der Footer den Inhalt
   überlagert, wenn Spalten unterschiedlich hoch sind / nach Live-Updates)
   --------------------------------------------------------------------- */
.page-layout {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
/* Fixierte Elemente (Header/Sidebar) sind aus dem Fluss – Flex ordnet nur
   Inhalt + Footer. Der Inhalt wächst, der Footer bleibt stets darunter. */
.page-layout > .app-wrapper { flex: 1 0 auto; }
.page-layout > .footer-wrapper {
	flex: 0 0 auto;
	position: relative;
	z-index: 1;          /* sicher über evtl. überlaufendem Inhalt */
	background: var(--bs-body-bg);
}

/* ---------------------------------------------------------------------
   Typo / Grundgerüst
   --------------------------------------------------------------------- */
body { background-color: var(--bs-body-bg); }

.app-page-head h4,
.app-page-head .h4 { font-weight: 700; letter-spacing: -.01em; color: var(--bs-heading-color); }

/* ---------------------------------------------------------------------
   Cards – ruhiger, „Enterprise“-Schatten + feine Kante
   --------------------------------------------------------------------- */
.card {
	border: 1px solid rgba(12, 36, 60, .06);
	border-radius: var(--sl-card-radius);
	box-shadow: var(--sl-card-shadow);
}
[data-bs-theme=dark] .card { border-color: rgba(255,255,255,.06); }

.card-header { font-weight: 600; }
.card-header h6, .card-header .h6 { font-weight: 700; letter-spacing: -.01em; }

/* ---------------------------------------------------------------------
   Brand im Sidebar-Kopf
   --------------------------------------------------------------------- */
.app-navbar-brand,
.app-side-brands {
	background: linear-gradient(135deg, var(--sl-navy) 0%, #143258 100%);
}
.sl-brand-wordmark {
	display: flex; align-items: center; gap: .55rem;
	font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em;
	color: #fff; text-decoration: none; line-height: 1;
}
.sl-brand-wordmark .sl-mark {
	display: inline-grid; place-items: center;
	width: 34px; height: 34px; border-radius: 9px;
	background: var(--sl-accent); color: #fff;
	box-shadow: 0 4px 12px rgba(225, 29, 42, .45);
}
.sl-brand-wordmark .sl-mark i { font-size: 1.05rem; line-height: 0; }
.sl-brand-wordmark small {
	display: block; font-size: .58rem; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase; color: #8fb0e6;
}

/* Icon-Rail-Logo (kompakt) */
.navbar-brand-logo.sl-mark-rail {
	display: inline-grid; place-items: center;
	width: 40px; height: 40px; border-radius: 11px;
	background: var(--sl-accent); color: #fff; font-weight: 800; font-size: 1.15rem;
	box-shadow: 0 4px 14px rgba(225, 29, 42, .5);
}

/* ---------------------------------------------------------------------
   Sidebar-Menü Aktiv-/Hover-Zustand
   --------------------------------------------------------------------- */
.side-menubar .menu-item .menu-link.active {
	background: var(--bs-primary-bg-subtle);
	color: var(--bs-primary);
	font-weight: 600;
	border-radius: .5rem;
}
.side-menubar .menu-item .menu-link.active i { color: var(--bs-primary); }
.side-menubar .menu-heading .menu-label {
	text-transform: uppercase; letter-spacing: .12em;
	font-size: .62rem; font-weight: 700; color: var(--bs-tertiary-color);
}

/* ---------------------------------------------------------------------
   KPI-Statistik-Kacheln
   --------------------------------------------------------------------- */
.sl-stat { position: relative; overflow: hidden; }
.sl-stat .sl-stat-icon {
	width: 50px; height: 50px; border-radius: 13px;
	display: inline-grid; place-items: center; font-size: 1.35rem;
}
/* Icon IMMER mittig in der Box – auch ausserhalb von .sl-stat (Mein Tag, Kennzahlen, Fortschritt …) */
.sl-stat-icon { display: inline-grid; place-items: center; line-height: 1; }
.sl-stat-icon > i { line-height: 1; }
.sl-stat .sl-stat-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--bs-heading-color); line-height: 1.1; }
.sl-stat .sl-stat-label { font-size: .8rem; color: var(--bs-secondary-color); }
.sl-trend { font-size: .74rem; font-weight: 700; display: inline-flex; align-items: center; gap: .2rem; }
.sl-trend.up   { color: var(--bs-success); }
.sl-trend.down { color: var(--bs-danger); }

/* dezenter Farbkeil rechts oben in KPI-Karten */
.sl-stat::after {
	content: ""; position: absolute; top: -40px; right: -40px;
	width: 120px; height: 120px; border-radius: 50%;
	background: rgba(var(--bs-primary-rgb), .05);
}

/* ---------------------------------------------------------------------
   Tabellen
   --------------------------------------------------------------------- */
.table > :not(caption) > * > * { padding: .85rem 1rem; }
.table thead th {
	text-transform: uppercase; letter-spacing: .04em;
	font-size: .7rem; font-weight: 700; color: var(--bs-secondary-color);
	background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color);
}
.table-hover > tbody > tr:hover > * { background: rgba(var(--bs-primary-rgb), .035); }
.sl-table-wrap { border-radius: var(--sl-card-radius); overflow: hidden; }
/* Kombiniert mit Bootstrap .table-responsive muss horizontales Scrollen erhalten
   bleiben (sonst werden rechte Spalten auf Mobile abgeschnitten). */
.table-responsive.sl-table-wrap { overflow-x: auto; }

/* ---------------------------------------------------------------------
   Status-Badges (Offerten / Rechnungen / Aufträge)
   --------------------------------------------------------------------- */
.sl-badge {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .3rem .6rem; border-radius: 50rem;
	font-size: .72rem; font-weight: 700; line-height: 1;
}
.sl-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sl-badge.is-open      { color: #B26A00; background: #FEF3E2; }
.sl-badge.is-sent      { color: #1A41B3; background: #eef2fe; }
.sl-badge.is-won       { color: #0E7A55; background: #E6F6EF; }
.sl-badge.is-lost      { color: #C23A3F; background: #FDEBEC; }
.sl-badge.is-paid      { color: #0E7A55; background: #E6F6EF; }
.sl-badge.is-pending   { color: #B26A00; background: #FEF3E2; }
.sl-badge.is-overdue   { color: #C23A3F; background: #FDEBEC; }
.sl-badge.is-draft     { color: #5A6679; background: #EEF0F4; }
.sl-badge.is-active    { color: #0E7A55; background: #E6F6EF; }
.sl-badge.is-scheduled { color: #1A41B3; background: #eef2fe; }

/* ---------------------------------------------------------------------
   Buttons – Markenakzent
   --------------------------------------------------------------------- */
.btn-primary {
	--bs-btn-bg: var(--sl-brand); --bs-btn-border-color: var(--sl-brand);
	--bs-btn-hover-bg: var(--sl-brand-700); --bs-btn-hover-border-color: var(--sl-brand-700);
	--bs-btn-active-bg: var(--sl-brand-700); --bs-btn-active-border-color: var(--sl-brand-700);
}
.btn-accent {
	--bs-btn-color:#fff; --bs-btn-bg: var(--sl-accent); --bs-btn-border-color: var(--sl-accent);
	--bs-btn-hover-color:#fff; --bs-btn-hover-bg:#c11825; --bs-btn-hover-border-color:#c11825;
}
.text-accent { color: var(--sl-accent) !important; }
.bg-accent-subtle { background: #FDEBEC !important; }

/* ---------------------------------------------------------------------
   Dashboard-Hero
   --------------------------------------------------------------------- */
.sl-hero {
	border: 0; color: #fff; border-radius: var(--sl-card-radius);
	background: radial-gradient(120% 140% at 0% 0%, #FB3B3D 0%, #E30613 55%, #A30406 100%);
	box-shadow: 0 10px 30px rgba(227, 6, 19, .35);
}
.sl-hero h3 { color: #fff; font-weight: 800; letter-spacing: -.02em; }
.sl-hero .sl-hero-sub { color: #FAD2D3; }

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */
.sl-auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; }
.sl-auth-aside {
	position: relative; color: #fff; padding: 3rem;
	display: flex; flex-direction: column; justify-content: space-between;
	background: radial-gradient(120% 120% at 100% 0%, #FB3B3D 0%, #E30613 50%, #7A0506 100%);
	overflow: hidden;
}
.sl-auth-aside::after {
	content: ""; position: absolute; inset: auto -60px -80px auto;
	width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.06);
}
.sl-auth-form { display: grid; place-items: center; padding: 2rem; }
@media (max-width: 991.98px) { .sl-auth { grid-template-columns: 1fr; } .sl-auth-aside { display: none; } }

/* ---------------------------------------------------------------------
   Kleinteiliges
   --------------------------------------------------------------------- */
.sl-avatar-txt {
	display: inline-grid; place-items: center; width: 36px; height: 36px;
	border-radius: 50%; font-weight: 700; font-size: .8rem; color: #fff;
}
.sl-muted-num { font-variant-numeric: tabular-nums; }
.timeline-dot {
	width: 10px; height: 10px; border-radius: 50%; background: var(--bs-primary);
	box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .15);
}
.cursor-pointer { cursor: pointer; }

/* =====================================================================
   ENTERPRISE-AUSBAU · wiederverwendbare Komponenten (Pipeline, Funnel,
   Scoring, Mobile-Mockup, Chat, Maps, Upsell, Audit, KI-Panels)
   ===================================================================== */

/* --- Kanban / Sales-Pipeline ---------------------------------------- */
.sl-kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.sl-kanban-col { flex: 0 0 300px; max-width: 300px; }
.sl-kanban-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: .6rem .85rem; border-radius: .6rem .6rem 0 0;
	font-weight: 700; font-size: .82rem; color: var(--bs-heading-color);
	background: var(--bs-tertiary-bg); border-bottom: 3px solid var(--col, var(--bs-primary));
}
.sl-kanban-head .badge { font-variant-numeric: tabular-nums; }
.sl-kanban-body {
	background: var(--bs-tertiary-bg); border-radius: 0 0 .6rem .6rem;
	padding: .6rem; min-height: 120px; display: flex; flex-direction: column; gap: .6rem;
}
.sl-card-lead {
	background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
	border-radius: .6rem; padding: .75rem .85rem; box-shadow: 0 1px 2px rgba(12,36,60,.04);
	cursor: grab; transition: box-shadow .15s, transform .15s; border-left: 3px solid var(--age, transparent);
}
.sl-card-lead:hover { box-shadow: var(--sl-card-shadow); transform: translateY(-1px); }
.sl-card-lead.age-fresh    { --age: #0E9F6E; }
.sl-card-lead.age-warn     { --age: #F5A70D; }
.sl-card-lead.age-urgent   { --age: #E5484D; }
.sl-card-lead.age-archived { --age: #9CA3AF; opacity: .58; }
.sl-card-lead.age-archived .sl-deal-name { font-style: italic; }
.sl-card-lead.age-archived:hover { opacity: .82; }
.sl-avatar-unassigned { background: #F59E0B !important; }
.sl-chip { display:inline-flex; align-items:center; gap:.25rem; font-size:.68rem; font-weight:600;
	padding:.15rem .45rem; border-radius:50rem; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); max-width:100%; overflow:hidden; }
.sl-chip > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.sl-kanban .sl-chip { max-width:180px; }
.sl-drag-ghost { opacity: .45; border: 2px dashed var(--sl-brand) !important; background: rgba(var(--bs-primary-rgb), .06) !important; }

/* --- Lead-Score-Gauge / Ring ---------------------------------------- */
.sl-score {
	--val: 0; --col: var(--bs-primary);
	width: 46px; height: 46px; border-radius: 50%; display: inline-grid; place-items: center;
	background: conic-gradient(var(--col) calc(var(--val) * 1%), var(--bs-tertiary-bg) 0);
	font-size: .78rem; font-weight: 800; color: var(--bs-heading-color);
	position: relative;
}
.sl-score::before { content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; background: var(--bs-body-bg); }
.sl-score span { position: relative; z-index: 1; }
.sl-score.hot  { --col: #E5484D; } .sl-score.warm { --col: #F5A70D; } .sl-score.cold { --col: #0BA5C0; }

/* --- Conversion-Funnel ---------------------------------------------- */
.sl-funnel { display: flex; flex-direction: column; gap: .5rem; }
.sl-funnel-row { display: flex; align-items: center; gap: .75rem; }
.sl-funnel-bar { height: 38px; border-radius: .5rem; display: flex; align-items: center; padding: 0 .85rem;
	color: #fff; font-weight: 700; font-size: .82rem; min-width: 60px;
	background: linear-gradient(90deg, var(--sl-brand) 0%, var(--sl-brand-400) 100%); }
.sl-funnel-row:nth-child(2) .sl-funnel-bar { background: linear-gradient(90deg, #FB3B3D, #FB5052); }
.sl-funnel-row:nth-child(3) .sl-funnel-bar { background: linear-gradient(90deg, #0BA5C0, #59c7d8); }
.sl-funnel-row:nth-child(4) .sl-funnel-bar { background: linear-gradient(90deg, #0E9F6E, #46c79b); }
.sl-funnel-label { min-width: 150px; font-size: .82rem; }

/* --- Telefon-Mockup (Mobile-App / Kundenportal) --------------------- */
.sl-phone { width: 300px; max-width: 100%; margin: 0 auto; background: #0C243C; border-radius: 2.2rem;
	padding: .7rem; box-shadow: 0 24px 60px rgba(12,36,60,.35); }
.sl-phone-screen { background: var(--bs-body-bg); border-radius: 1.7rem; overflow: hidden; height: 600px; display:flex; flex-direction:column; }
.sl-phone-notch { height: 24px; display:flex; justify-content:center; }
.sl-phone-notch::after { content:""; width: 110px; height: 18px; background:#0C243C; border-radius: 0 0 14px 14px; }
.sl-phone-body { flex: 1; overflow-y: auto; }

/* --- Chat-/Sequenz-Bubbles ------------------------------------------ */
.sl-bubble { max-width: 80%; padding: .6rem .85rem; border-radius: 1rem; font-size: .85rem; position: relative; }
.sl-bubble.out { background: var(--sl-brand); color:#fff; border-bottom-right-radius:.25rem; margin-left:auto; }
.sl-bubble.in  { background: var(--bs-tertiary-bg); color: var(--bs-heading-color); border-bottom-left-radius:.25rem; }
.sl-seq-step { display:flex; gap:.85rem; }
.sl-seq-rail { display:flex; flex-direction:column; align-items:center; }
.sl-seq-rail .dot { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; flex:0 0 auto; }
.sl-seq-rail .line { flex:1; width:2px; background: var(--bs-border-color); margin-top:4px; }

/* --- Map-Platzhalter / Leaflet-Rahmen ------------------------------- */
.sl-map { width: 100%; height: 320px; border-radius: var(--sl-card-radius); overflow: hidden; z-index: 0; }
.sl-map-sm { height: 220px; }

/* --- Upsell-/KI-Vorschlagskarte ------------------------------------- */
.sl-ai-panel { border: 1px dashed rgba(var(--bs-primary-rgb), .4); background: rgba(var(--bs-primary-rgb), .04);
	border-radius: var(--sl-card-radius); padding: 1rem 1.1rem; }
.sl-ai-panel .sl-ai-icon { width: 38px; height: 38px; border-radius: 10px; display:grid; place-items:center;
	background: var(--sl-brand); color:#fff; box-shadow: 0 6px 16px rgba(249,9,12,.35); }
.sl-upsell { display:flex; align-items:center; gap:.75rem; padding:.65rem .8rem; border:1px solid var(--bs-border-color);
	border-radius:.6rem; transition: border-color .15s, background .15s; }
.sl-upsell:hover { border-color: var(--sl-brand); background: rgba(var(--bs-primary-rgb), .03); }

/* --- Signatur-Pad-Look ---------------------------------------------- */
.sl-sign { border: 2px dashed var(--bs-border-color); border-radius: .6rem; height: 120px;
	display:grid; place-items:center; color: var(--bs-tertiary-color); font-style: italic; }

/* --- Audit-/Status-Timeline (kompakt) ------------------------------- */
.sl-audit { list-style:none; margin:0; padding:0; }
.sl-audit li { display:flex; gap:.75rem; padding:.5rem 0; border-bottom:1px solid var(--bs-border-color); }
.sl-audit li:last-child { border-bottom:0; }
.sl-audit .t { font-variant-numeric: tabular-nums; color: var(--bs-tertiary-color); min-width:130px; font-size:.78rem; }

/* --- Sterne-Rating --------------------------------------------------- */
.sl-stars { color:#F5A70D; letter-spacing:1px; }
.sl-stars .empty { color: var(--bs-border-color); }

/* --- KPI-Pillen / Mini-Trend ---------------------------------------- */
.sl-pill { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .55rem; border-radius:50rem;
	font-size:.72rem; font-weight:700; background: var(--bs-tertiary-bg); }

/* --- responsive ----------------------------------------------------- */
@media (max-width: 575.98px) { .sl-kanban-col { flex-basis: 86vw; max-width: 86vw; } }

/* =====================================================================
   FINALE POLITUR · Accessibility, Mikrointeraktionen, Druck
   ===================================================================== */

/* --- Fokus-Ringe (Tastatur-Navigation, A11y) ------------------------ */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible,
.menu-link:focus-visible, .nav-link:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--sl-brand) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .18) !important;
	border-radius: .35rem;
}
[data-bs-theme=dark] a:focus-visible,
[data-bs-theme=dark] .btn:focus-visible { outline-color: var(--sl-brand-400) !important; }

/* --- Mikrointeraktionen: sanftes Karten-Heben & Übergänge ----------- */
.card { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.card.sl-stat:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(12,36,60,.06), 0 14px 34px rgba(12,36,60,.10); }
[data-bs-theme=dark] .card.sl-stat:hover { box-shadow: 0 4px 12px rgba(0,0,0,.35), 0 14px 36px rgba(0,0,0,.45); }
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease, box-shadow .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary:hover, .btn-accent:hover { box-shadow: 0 6px 16px rgba(249,9,12,.28); }
.table-hover > tbody > tr { transition: background-color .12s ease; }
.sl-badge, .sl-chip, .sl-pill { transition: background-color .15s ease, color .15s ease; }
.list-group-item, .dropdown-item, .search-item { transition: background-color .12s ease, color .12s ease; }

/* sanftes Einblenden des Hauptinhalts (nur Opacity – KEIN transform,
   da ein Transform auf dem Content-Container die Layout-/Footer-Höhe
   verfälscht und den Footer in den Inhalt schieben kann) */
.app-wrapper > .container-fluid { animation: sl-fade-in .28s ease both; }
@keyframes sl-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --- prefers-reduced-motion: alle Bewegungen respektvoll abschalten -- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* --- Dezente, markenkonforme Scrollbars ----------------------------- */
.app-navbar-tabs, .app-navbar, [data-simplebar], .sl-kanban, .table-responsive { scrollbar-width: thin; scrollbar-color: rgba(var(--bs-primary-rgb), .35) transparent; }
.sl-kanban::-webkit-scrollbar, .table-responsive::-webkit-scrollbar { height: 8px; width: 8px; }
.sl-kanban::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb { background: rgba(var(--bs-primary-rgb), .3); border-radius: 50rem; }
.sl-kanban::-webkit-scrollbar-thumb:hover, .table-responsive::-webkit-scrollbar-thumb:hover { background: rgba(var(--bs-primary-rgb), .5); }

/* --- Status-Badges im Dark-Mode: Lesbarkeit feinjustieren ------------ */
[data-bs-theme=dark] .sl-badge.is-open      { color:#F6C177; background: rgba(245,167,13,.16); }
[data-bs-theme=dark] .sl-badge.is-pending   { color:#F6C177; background: rgba(245,167,13,.16); }
[data-bs-theme=dark] .sl-badge.is-sent,
[data-bs-theme=dark] .sl-badge.is-scheduled { color:#9DB7F7; background: rgba(249,9,12,.22); }
[data-bs-theme=dark] .sl-badge.is-won,
[data-bs-theme=dark] .sl-badge.is-paid,
[data-bs-theme=dark] .sl-badge.is-active    { color:#67D6A8; background: rgba(14,159,110,.18); }
[data-bs-theme=dark] .sl-badge.is-lost,
[data-bs-theme=dark] .sl-badge.is-overdue   { color:#F4948A; background: rgba(229,72,77,.18); }
[data-bs-theme=dark] .sl-badge.is-draft     { color:#9aa5b8; background: rgba(255,255,255,.07); }
[data-bs-theme=dark] code { color:#9DB7F7; }
[data-bs-theme=dark] .badge.bg-light { background: rgba(255,255,255,.08) !important; color: var(--bs-body-color) !important; border-color: rgba(255,255,255,.12) !important; }
/* Sekundär-Buttons (Export/PDF/Ghost) im Dark-Mode sichtbar halten – sonst dunkler Text auf dunklem Grund */
[data-bs-theme=dark] .btn-light {
	color: var(--bs-body-color) !important;
	background-color: rgba(255,255,255,.09) !important;
	border-color: rgba(255,255,255,.15) !important;
}
[data-bs-theme=dark] .btn-light:hover,
[data-bs-theme=dark] .btn-light:focus-visible { background-color: rgba(255,255,255,.16) !important; }
[data-bs-theme=dark] .btn-light i { color: inherit !important; }

/* --- Druck-Stylesheet: saubere Dokumente (Offerte/Rechnung/Quittung) - */
@media print {
	.app-header, .app-menubar-tabs, .footer-wrapper, .app-page-head .breadcrumb,
	.theme-btn, .app-toggler, #searchResultsModal, .btn, .dropdown { display: none !important; }
	body, .page-layout, .app-wrapper { background: #fff !important; display: block !important; }
	.app-wrapper { margin: 0 !important; padding: 0 !important; width: 100% !important; }
	.container-fluid { max-width: 100% !important; }
	.card { box-shadow: none !important; border: 1px solid #e5e7eb !important; break-inside: avoid; }
	.app-page-head h4 { font-size: 1.1rem; }
	a { color: inherit !important; text-decoration: none !important; }
	.d-print-none { display: none !important; }
	/* Beleg-Dokument füllt die Seite, wenn die Aktions-Spalte ausgeblendet ist */
	.col-xxl-8, .col-lg-7 { flex: 0 0 100% !important; max-width: 100% !important; }
	@page { margin: 1.4cm; }
}

/* ===================================================================
   Enterprise-Bausteine: Confirm-Dialog, Spinner, klickbare Zeilen, A11y
   =================================================================== */
.sl-modal-overlay {
	position: fixed; inset: 0; z-index: 1080;
	display: flex; align-items: center; justify-content: center; padding: 1rem;
	background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px);
	opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.sl-modal-overlay.show { opacity: 1; pointer-events: auto; }
.sl-modal {
	width: 100%; max-width: 440px; border-radius: 16px !important;
	transform: translateY(10px) scale(.98); transition: transform .18s ease;
}
.sl-modal-overlay.show .sl-modal { transform: none; }

.sl-spinner {
	display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
	border: 2px solid currentColor; border-right-color: transparent;
	border-radius: 50%; animation: sl-spin .6s linear infinite;
}
@keyframes sl-spin { to { transform: rotate(360deg); } }
.btn.sl-busy { pointer-events: none; opacity: .85; }

/* Aktiver Filter: gesetztes Steuerelement hervorheben */
.sl-filter-active {
	border-color: var(--bs-primary) !important;
	background-color: var(--bs-primary-bg-subtle) !important;
	color: var(--bs-primary-text-emphasis) !important;
	font-weight: 600;
}

/* Klickbare Tabellenzeilen */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover > td { background: var(--bs-primary-bg-subtle, #eef2ff); }

/* Sidebar-Rail: Gruppen-Icons mit permanentem Mini-Label + klarer Aktiv-Indikator */
.sl-rail-link {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: .5rem .25rem !important;
	border-radius: 10px;
	height: auto !important;
	position: relative;
}
.sl-rail-label {
	font-size: .58rem;
	font-weight: 600;
	line-height: 1.05;
	text-align: center;
	letter-spacing: .01em;
	max-width: 100%;
}
.app-navbar-tabs .sl-rail-link.active {
	background: var(--bs-primary-bg-subtle, #FEEAEA);
	color: var(--sl-brand, #f9090c) !important;
}
.app-navbar-tabs .sl-rail-link.active::before {
	content: "";
	position: absolute;
	left: -6px; top: 50%; transform: translateY(-50%);
	width: 3px; height: 60%;
	border-radius: 0 3px 3px 0;
	background: var(--sl-brand, #f9090c);
}
/* Rail-Labels: nicht mehr abschneiden – umbrechen statt clippen */
.sl-rail-label { white-space: normal; word-break: break-word; hyphens: auto; }

/* Toggler-Pfeil dreht mit dem Sidebar-Zustand (zeigt die Aktionsrichtung):
   Panel offen → Pfeil nach links (einklappen); Panel zu → Pfeil nach rechts (ausklappen). */
.app-toggler svg { transition: transform .25s ease; }
@media (min-width: 1481px) {
	html[data-app-sidebar="mini"] .app-toggler svg { transform: scaleX(-1); }
}
@media (max-width: 1480px) {
	.app-toggler svg { transform: scaleX(-1); }
	body:has(.app-menubar-tabs.open) .app-toggler svg { transform: none; }
}

/* Eingeklapptes Panel KOMPLETT ausblenden – sonst „bluten" Labels/Badges (KI, NEU, 5)
   am Content-Rand durch (Panel-Box reicht bis x=80 und überlappt die Icon-Rail). */
[data-app-sidebar="mini"] .app-tab-content { visibility: hidden; }
/* Hover über die eingeklappte Rail klappt das Panel als sauberes Overlay ein (Premium-Touch) */
[data-app-sidebar="mini-hover"] .app-tab-content {
	visibility: visible;
	left: 80px;
	box-shadow: .5rem 0 2rem rgba(15, 23, 42, .18);
	z-index: 1050;
}
@media (max-width: 1480px) {
	.app-menubar-tabs .app-tab-content { visibility: hidden; }
	.app-menubar-tabs.open .app-tab-content { visibility: visible; }
}

/* =====================================================================
   Sidebar-Panel · Layout-Fix + Hierarchie-Feinschliff
   ===================================================================== */
/* Vertikaler Fluss statt fixer Höhen → beseitigt die grosse Leerfläche
   (Template gibt JEDER .app-navbar height:calc(100vh-285px); der Schnellzugriff
   mit nur 5 Items wurde dadurch ~615px hoch). */
.app-menubar-tabs .app-tab-content { display: flex; flex-direction: column; }
.app-menubar-tabs .app-side-brands { flex: 0 0 auto; }
.app-menubar-tabs .app-content-inner {
	flex: 1 1 auto; min-height: 0;
	display: flex; flex-direction: column; overflow: hidden;
}
.app-menubar-tabs .app-tab-content .app-quick-access {
	flex: 0 0 auto; height: auto !important;
	padding-top: 10px; padding-bottom: 8px;
}
.app-menubar-tabs .app-tab-content .tab-content {
	flex: 1 1 auto; min-height: 0; height: auto; display: flex;
}
.app-menubar-tabs .tab-content > .tab-pane.active {
	width: 100%; display: flex; flex-direction: column; min-height: 0;
}
.app-menubar-tabs .tab-content .app-navbar {
	flex: 1 1 auto; min-height: 0; height: auto !important;
	overflow-y: auto; padding-top: 4px;
}

/* Schnellzugriff = sekundär (Shortcuts), Bereichsnavigation = primär.
   Nur EINE auffällige Aktiv-Markierung: der Pill bleibt der Bereichsnav vorbehalten. */
.app-quick-access .menu-link { padding: 6px 0 !important; }
.app-quick-access .menu-link.active {
	background: transparent !important;
	font-weight: 600;
}
.app-quick-access .menu-heading .menu-label { opacity: .75; }

/* Aktiver Bereich: Panel-Überschrift präsenter + Icon (Kopplung zur Rail-Auswahl) */
.app-menubar-tabs .tab-content .menu-heading .menu-label { font-weight: 700; font-size: 12px; }
.app-menubar-tabs .tab-content .menu-heading i { font-size: 13px; margin-right: 6px; vertical-align: -1px; }

/* Scroll-Schatten: dezenter Hinweis am rechten/linken Rand, wenn horizontal scrollbar.
   Funktioniert per background-attachment (Schatten nur sichtbar bei Überlauf). */
.sl-scroll-x {
	overflow-x: auto;
	background:
		linear-gradient(90deg, var(--bs-card-bg, #fff) 30%, rgba(255,255,255,0)) 0 0,
		linear-gradient(90deg, rgba(255,255,255,0), var(--bs-card-bg, #fff) 70%) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgba(27,36,48,.13), rgba(27,36,48,0)) 0 0,
		radial-gradient(farthest-side at 100% 50%, rgba(27,36,48,.13), rgba(27,36,48,0)) 100% 0;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

/* Pipeline-Kartentitel: bis zu 2 Zeilen umbrechen statt hart abschneiden */
.sl-deal-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
	line-height: 1.25;
}

/* Klickbare Karten (stretched-link): dezentes Anheben beim Hover */
.sl-card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.sl-card-hover:hover {
	transform: translateY(-2px);
	box-shadow: 0 .5rem 1.25rem rgba(27, 36, 48, .12);
}

/* Sichtbarer Tastatur-Fokus (WCAG) – nur bei Tastaturnavigation */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.menu-link:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--bs-primary, #f9090c);
	outline-offset: 2px; border-radius: 4px;
}

/* Leerer Tabellen-/Listenzustand (wiederverwendbar) */
.sl-empty {
	text-align: center; padding: 2.5rem 1rem; color: var(--bs-secondary-color, #6b7280);
}
.sl-empty .sl-empty-icon {
	width: 56px; height: 56px; border-radius: 16px; display: inline-flex;
	align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: .75rem;
	background: var(--bs-primary-bg-subtle, #eef2ff); color: var(--bs-primary, #f9090c);
}

/* =====================================================================
   QA-Fixes · Juni 2026
   ===================================================================== */

/* --- Signature-Pad Canvas (KP-02 / OO-01) --------------------------- */
.sl-sign canvas {
	width: 100%;
	height: 100%;
	display: block;
	cursor: crosshair;
	touch-action: none;
	border-radius: inherit;
}
.sl-sign.has-signature {
	border-color: var(--bs-primary);
	background: rgba(var(--bs-primary-rgb), .03);
}

/* --- Dark Mode: ApexCharts Texte (ST-05) ----------------------------- */
[data-bs-theme=dark] .apexcharts-canvas text,
[data-bs-theme=dark] .apexcharts-text tspan {
	fill: rgba(255, 255, 255, .75) !important;
}
[data-bs-theme=dark] .apexcharts-legend-text {
	color: rgba(255, 255, 255, .75) !important;
}
[data-bs-theme=dark] .apexcharts-tooltip {
	background: var(--bs-tertiary-bg) !important;
	border-color: var(--bs-border-color) !important;
	color: var(--bs-body-color) !important;
}
[data-bs-theme=dark] .apexcharts-tooltip-title {
	background: rgba(255, 255, 255, .05) !important;
	border-color: var(--bs-border-color) !important;
}
/* Card-Header Titel im Dark Mode explizit aufhellen */
[data-bs-theme=dark] .card-header h6,
[data-bs-theme=dark] .card-header .h6,
[data-bs-theme=dark] .card-header small {
	color: var(--bs-body-color) !important;
}

/* --- Dark Mode: Sidebar Rail-Labels (ST-05) ------------------------- */
[data-bs-theme=dark] .sl-rail-link {
	color: rgba(255, 255, 255, .7);
}
[data-bs-theme=dark] .sl-rail-label {
	color: rgba(255, 255, 255, .65);
}
[data-bs-theme=dark] .app-navbar-tabs .sl-rail-link.active {
	color: var(--sl-brand-400, #FB5052) !important;
}
[data-bs-theme=dark] .app-navbar-tabs .sl-rail-link.active .sl-rail-label {
	color: var(--sl-brand-400, #FB5052);
}

/* --- DataTables ARIA-Labels deutsch (LA-01) ------------------------- */
/* Wird per JS in foot.php gesetzt; diese Regel entfernt das englische
   title-Attribut-Tooltip falls DataTables es noch selbst setzt. */
.sorting::before, .sorting::after,
.sorting_asc::before, .sorting_asc::after,
.sorting_desc::before, .sorting_desc::after { font-size: .7em; }

/* --- Responsive: Mobile ≤575px (KP-09) ----------------------------- */
@media (max-width: 575.98px) {
	/* Seitenkopf stapeln */
	.app-page-head {
		flex-direction: column;
		align-items: flex-start !important;
		gap: .75rem !important;
	}
	.app-page-head > div:last-child {
		width: 100%;
	}
	.app-page-head > div:last-child .btn {
		width: 100%;
		justify-content: center;
	}
	/* Karte/Kacheln: volle Breite */
	.sl-map { height: 220px; }
	.sl-phone { width: 100%; max-width: 320px; }
	/* Zweispaltige Cards auf Mobile gestapelt */
	.col-xxl-8.col-lg-7,
	.col-xxl-4.col-lg-5 {
		min-width: 100%;
	}
	/* Filter-Leiste umbrechen */
	.sl-filters { flex-direction: column; align-items: stretch !important; }
	.sl-filters .form-select { width: 100% !important; }
}

/* =====================================================================
   A-01 · Klickbare Tabellenzeilen — Hover-Feedback
   ===================================================================== */
table.dataTable tbody tr[data-href],
table.dataTable tbody tr[data-fk-idx] {
	cursor: pointer;
	transition: background-color .1s;
}
table.dataTable tbody tr[data-href]:hover td,
table.dataTable tbody tr[data-fk-idx]:hover td {
	background-color: rgba(212, 0, 10, .03) !important;
}
table.dataTable tbody tr.sl-row-active td {
	background-color: rgba(212, 0, 10, .06) !important;
	box-shadow: inset 3px 0 0 var(--sl-brand);
}

/* =====================================================================
   B-01 · Skeleton Loader / Shimmer
   ===================================================================== */
@keyframes sl-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.sl-skeleton {
	display: block;
	height: 13px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--bs-border-color) 25%, rgba(255,255,255,.6) 50%, var(--bs-border-color) 75%);
	background-size: 200% 100%;
	animation: sl-shimmer 1.4s infinite linear;
}
.sl-skeleton-row td { padding-top: .65rem !important; padding-bottom: .65rem !important; }

/* =====================================================================
   B-04 · slCelebrate / Konfetti (bereits in JS)
   ===================================================================== */
.sl-confetti {
	position: fixed;
	pointer-events: none;
	border-radius: 2px;
	animation: sl-confetti-fall .9s cubic-bezier(.25,.46,.45,.94) forwards;
	z-index: 9999;
}
@keyframes sl-confetti-fall {
	to { transform: translateY(100vh) translateX(var(--sl-dx, 0)) rotate(var(--sl-rot, 0)); opacity: 0; }
}

/* =====================================================================
   B-06 · Timeline-Dots farbcodiert
   ===================================================================== */
.timeline-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--bs-secondary-color); flex-shrink: 0; }
li[data-actor="system"]  .timeline-dot { background: var(--bs-secondary-color); }
li[data-actor="user"]    .timeline-dot { background: var(--sl-brand); }
li[data-actor="ki"]      .timeline-dot { background: var(--bs-info); }
li[data-actor="success"] .timeline-dot { background: var(--bs-success); }

/* =====================================================================
   QA-Sprint 2 · Juni 2026
   ===================================================================== */

/* DM-01 · Dark Mode: sl-stat-value unsichtbar (WCAG-Kontrast-Fix) ------ */
[data-bs-theme=dark] .sl-stat-value,
[data-bs-theme=dark] .sl-stat-value * {
    color: var(--bs-body-color) !important;
}

/* DM-02 · Dark Mode: Sidebar-Schnellzugriff-Links kaum lesbar ---------- */
[data-bs-theme=dark] .side-menubar .menu-link,
[data-bs-theme=dark] .app-quick-access .menu-link,
[data-bs-theme=dark] .app-sidebar .nav-link,
[data-bs-theme=dark] .app-sidebar .sidebar-menu-item > a {
    color: rgba(255, 255, 255, .75) !important;
}
[data-bs-theme=dark] .side-menubar .menu-link:hover,
[data-bs-theme=dark] .app-quick-access .menu-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .07);
}

/* LA-01 · "Bald verfügbar"-Buttons — visuell als Platzhalter ----------- */
.sl-coming-soon {
    position: relative;
    opacity: .72;
}
.sl-coming-soon::after {
    content: 'Bald verfügbar';
    display: block;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    text-align: center;
    margin-top: .3rem;
    line-height: 1;
}
.sl-coming-soon:hover { opacity: .85; }

/* UX-01 · Konfidenz-Legende Farbpunkte --------------------------------- */
.sl-konf-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: .3rem;
    vertical-align: middle;
    flex-shrink: 0;
}

/* =====================================================================
   C-01 · Empty States in DataTables
   ===================================================================== */
.sl-empty-state { padding: 2.5rem 1rem; }
.sl-empty-state .sl-empty-icon { font-size: 2.25rem; opacity: .22; display: block; margin-bottom: .75rem; }

/* =====================================================================
   Sprint 4 · UX-Fixes (Touch-Targets, Transitionen, Toggler-ARIA)
   ===================================================================== */

/* #24 – Hamburger-Toggle: WCAG 44×44 px Touch-Target */
.app-toggler {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* #29 – Sidebar Rail-Icons: Touch-Target ≥ 56 px (8 px Puffer) */
.sl-rail-link {
	min-height: 56px;
	transition: background-color .15s ease, color .15s ease; /* #32 */
}

/* #30 – Sidebar Sub-Navigation: Touch-Target ≥ 44 px */
.app-menubar-tabs .side-menubar .menu-item .menu-link {
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* #25 – Mobile: Suche-Icon im Header sichtbar (öffnet Modal) */
.sl-mobile-search {
	display: none;
}
@media (max-width: 767.98px) {
	.sl-mobile-search { display: inline-flex; }
}

/* Unsaved-Changes-Marker: Tab-Label bekommt orangenen Punkt */
.nav-link.sl-tab-dirty::after {
	content: '●';
	font-size: .5rem;
	color: var(--bs-warning);
	vertical-align: super;
	margin-left: .2rem;
}

/* =====================================================================
   F-01 · Mini Process Bar (Anfrage-Flow)
   ===================================================================== */
.sl-flow-step {
	font-size: .72rem;
	font-weight: 500;
	padding: .22rem .65rem;
	border-radius: 50rem;
	background: var(--bs-border-color);
	color: var(--bs-secondary-color);
	white-space: nowrap;
	user-select: none;
}
.sl-flow-step.is-done {
	background: rgba(14, 159, 110, .12);
	color: var(--bs-success);
}
.sl-flow-step.is-done::before { content: '✓ '; }
.sl-flow-step.is-active {
	background: rgba(212, 0, 10, .1);
	color: var(--sl-brand);
	font-weight: 700;
}
.sl-flow-arrow { color: var(--bs-border-color); font-size: .8rem; }

/* =====================================================================
   F-02 · Mahnung-Eskalation — Button-Farben
   ===================================================================== */
.btn-mahnung-1 { --bs-btn-bg: #fff3cd; --bs-btn-color: #664d03; --bs-btn-border-color: #ffe69c; --bs-btn-hover-bg: #ffe69c; }
.btn-mahnung-2 { --bs-btn-bg: #ffe5d0; --bs-btn-color: #6c2e00; --bs-btn-border-color: #ffcba4; --bs-btn-hover-bg: #ffcba4; }
.btn-mahnung-3 { --bs-btn-bg: #f8d7da; --bs-btn-color: #58151c; --bs-btn-border-color: #f5c2c7; --bs-btn-hover-bg: #f5c2c7; font-weight: 600; }

/* =====================================================================
   D-05 · Filter-Labels (Statistik)
   ===================================================================== */
.sl-filter-group { display: flex; flex-direction: column; gap: .2rem; }
.sl-filter-group .sl-filter-label { font-size: .7rem; color: var(--bs-secondary-color); line-height: 1; }

/* =====================================================================
   E-02 · KPI-Kacheln bereits ab 576px zweispaltig
   ===================================================================== */
@media (min-width: 576px) {
	.sl-kpi-col { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 1400px) {
	.sl-kpi-col { flex: 0 0 25%; max-width: 25%; }
}

/* =====================================================================
   Chart Skeleton Loader (#21)
   ===================================================================== */
.sl-chart-skeleton {
	border-radius: .5rem;
	background: linear-gradient(90deg, var(--bs-border-color) 25%, var(--bs-secondary-bg) 50%, var(--bs-border-color) 75%);
	background-size: 200% 100%;
	animation: sl-shimmer 1.4s infinite;
	min-height: 280px;
}
@keyframes sl-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* =====================================================================
   ENTERPRISE SIDEBAR  ·  Helle Premium-Rail (Atlassian/Notion-Stil)
   ---------------------------------------------------------------------
   Helle, ruhige Rail + weisses Panel. Signatur-Detail: Icon-Chips
   (jedes Icon in einer Kachel, die bei Hover/Aktiv in Markenrot füllt).
   Weiche Schatten, klare Hierarchie, dezente Glow-Akzente.
   ===================================================================== */

/* ---- 1 · Rahmen, Rail- & Panel-Flächen (feine Tontrennung) -------- */
.app-menubar-tabs {
	box-shadow: 1px 0 0 rgba(12,36,60,.06), 6px 0 28px rgba(12,36,60,.05);
}
.app-navbar-tabs {
	background: linear-gradient(180deg, #FBFCFE 0%, #F2F5F9 100%);
	border-right: 1px solid rgba(12,36,60,.07);
}
.app-menubar-tabs .app-tab-content {
	background: #fff;
	border-right: 1px solid rgba(12,36,60,.08);
}
/* Brand-Band oben bleibt Navy (Kontrast-Anker), feine Unterkante */
.app-menubar-tabs .app-navbar-brand {
	display: flex; align-items: center; justify-content: center;
	box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}
.app-menubar-tabs .app-side-brands { box-shadow: inset 0 -1px 0 rgba(255,255,255,.06); }

/* ---- 2 · Brand-Mark „S" — Premium-Verlauf + Glow + Shine ----------- */
.navbar-brand-logo.sl-mark-rail {
	width: 44px; height: 44px; border-radius: 13px;
	background: linear-gradient(145deg, #f9090c 0%, #d4000a 55%, #b0000a 100%);
	box-shadow: 0 6px 18px rgba(212,0,10,.45), inset 0 1px 0 rgba(255,255,255,.25);
	font-size: 1.25rem; letter-spacing: -.02em;
	position: relative; overflow: hidden;
	transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.navbar-brand-logo.sl-mark-rail::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,.4), transparent 46%);
}
.navbar-brand-logo.sl-mark-rail:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 10px 26px rgba(212,0,10,.55), inset 0 1px 0 rgba(255,255,255,.3);
}

/* ---- 3 · Rail-Icons: Bereichswahl mit Icon-Chips ------------------ */
.app-navbar-tabs .nav { gap: 4px; padding: 8px; }
.sl-rail-link {
	color: var(--bs-secondary-color) !important;
	border-radius: 12px;
	transition: color .18s ease, transform .18s ease;
}
.sl-rail-link i {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 13px;
	line-height: 1 !important;
	background: transparent;
	transition: background-color .18s ease, color .18s ease, transform .2s ease, box-shadow .2s ease;
}
/* Glyph exakt zentrieren – überschreibt evtl. Inline line-height:0 am <i> */
.sl-rail-link i::before { line-height: 1; display: block; }
.sl-rail-link:hover { color: var(--sl-navy) !important; }
.sl-rail-link:hover i { background: rgba(12,36,60,.06); transform: translateY(-1px); }
.sl-rail-label { color: inherit; font-weight: 600; letter-spacing: .015em; }

/* Aktiver Bereich: roter Icon-Chip + roter Text + Glow-Akzentbalken */
.app-navbar-tabs .sl-rail-link.active { background: transparent !important; color: var(--sl-brand) !important; }
.app-navbar-tabs .sl-rail-link.active i {
	background: linear-gradient(145deg, #f9090c, #d4000a);
	color: #fff;
	box-shadow: 0 3px 9px rgba(212,0,10,.26);
}
.app-navbar-tabs .sl-rail-link.active .sl-rail-label { color: var(--sl-brand); font-weight: 700; }
.app-navbar-tabs .sl-rail-link.active::before {
	left: 0 !important; width: 3px !important; height: 60% !important;
	background: linear-gradient(180deg, #f9090c, #d4000a) !important;
	box-shadow: 0 0 10px rgba(249,9,12,.6);
	border-radius: 0 3px 3px 0 !important;
}

/* ---- 4 · FAB (Neue Offerte) + Logout am Rail-Fuss ----------------- */
.app-navbar-tabs .btn-accent {
	background: linear-gradient(145deg, #f9090c, #d4000a);
	border: none; border-radius: 13px;
	box-shadow: 0 6px 16px rgba(212,0,10,.4), inset 0 1px 0 rgba(255,255,255,.2);
	transition: transform .2s ease, box-shadow .2s ease;
}
.app-navbar-tabs .btn-accent:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(212,0,10,.52);
}
.app-navbar-tabs .menu-link.text-danger {
	border-radius: 11px;
	transition: background-color .18s ease, color .18s ease;
}
.app-navbar-tabs .menu-link.text-danger:hover { background: rgba(229,72,77,.12); }

/* ---- 5 · Panel-Header (Section-Labels) ---------------------------- */
.app-menubar-tabs .tab-content .app-navbar,
.app-menubar-tabs .app-quick-access { padding-left: 10px !important; padding-right: 10px !important; }

.app-menubar-tabs .side-menubar .menu-heading { padding: 14px 12px 6px !important; }
.app-menubar-tabs .side-menubar .menu-heading .menu-label {
	color: var(--bs-tertiary-color);
	text-transform: uppercase; letter-spacing: .14em;
	font-size: .64rem; font-weight: 700;
}

/* ---- 6 · Panel-Items mit Icon-Chips (Signatur-Detail) ------------- */
.app-menubar-tabs .side-menubar .menu-item .menu-link {
	border-radius: 10px;
	padding: 7px 10px !important;
	gap: 11px;
	color: var(--sl-ink);
	font-weight: 500;
	position: relative;
	transition: background-color .16s ease, color .16s ease;
}
.app-menubar-tabs .side-menubar .menu-item .menu-link > i {
	display: inline-grid; place-items: center; flex: 0 0 auto;
	width: 30px; height: 30px; border-radius: 8px;
	font-size: 15px;
	background: var(--bs-tertiary-bg, #f1f3f6);
	color: var(--bs-secondary-color);
	transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.app-menubar-tabs .side-menubar .menu-item .menu-link:hover {
	background: var(--bs-tertiary-bg, #f4f6fa);
	color: var(--sl-navy);
}
.app-menubar-tabs .side-menubar .menu-item .menu-link:hover > i {
	background: #fff; color: var(--sl-navy);
	box-shadow: 0 1px 3px rgba(12,36,60,.1);
}

/* Aktiv: roter Icon-Chip + rotes Pill + Akzentbalken */
.app-menubar-tabs .side-menubar .menu-item .menu-link.active {
	background: linear-gradient(135deg, var(--bs-primary-bg-subtle), rgba(254,234,234,.4));
	color: var(--sl-brand);
	font-weight: 700;
}
.app-menubar-tabs .side-menubar .menu-item .menu-link.active > i {
	background: linear-gradient(145deg, #f9090c, #d4000a);
	color: #fff;
	box-shadow: 0 3px 9px rgba(212,0,10,.35);
}
.app-menubar-tabs .side-menubar .menu-item .menu-link.active::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 3px; height: 60%; border-radius: 0 3px 3px 0;
	background: var(--sl-brand);
}

/* ---- 7 · Badges in der Panel-Navigation: kompakter & edler -------- */
.app-menubar-tabs .side-menubar .menu-item .menu-link .badge {
	font-size: .58rem; font-weight: 700; letter-spacing: .03em;
	padding: .2rem .45rem; border-radius: 50rem;
}

/* ---- 8 · Schnellzugriff = sekundäre Ebene ------------------------- */
.app-quick-access .menu-link { padding: 6px 10px !important; border-radius: 9px; }
.app-quick-access .menu-link:hover { background: var(--bs-tertiary-bg, #f4f6fa) !important; }

/* ---- 9 · Premium-Scrollbar im Panel ------------------------------- */
.app-menubar-tabs .app-navbar .simplebar-scrollbar::before { background: rgba(12,36,60,.22); }

/* ---- 10 · Dark-Mode-Abstimmung ------------------------------------ */
[data-bs-theme=dark] .app-navbar-tabs { background: linear-gradient(180deg,#141b27,#10151f); border-color: rgba(255,255,255,.06); }
[data-bs-theme=dark] .sl-rail-link { color: rgba(255,255,255,.62) !important; }
[data-bs-theme=dark] .sl-rail-link:hover { color: #fff !important; }
[data-bs-theme=dark] .sl-rail-link:hover i { background: rgba(255,255,255,.08); }
[data-bs-theme=dark] .app-menubar-tabs .app-tab-content { background: #141b27; border-color: rgba(255,255,255,.06); }
[data-bs-theme=dark] .app-menubar-tabs .side-menubar .menu-item .menu-link { color: rgba(255,255,255,.82); }
[data-bs-theme=dark] .app-menubar-tabs .side-menubar .menu-item .menu-link > i { background: rgba(255,255,255,.06); color: rgba(255,255,255,.6); }
[data-bs-theme=dark] .app-menubar-tabs .side-menubar .menu-item .menu-link:hover { background: rgba(255,255,255,.05); color: #fff; }
[data-bs-theme=dark] .app-menubar-tabs .side-menubar .menu-item .menu-link:hover > i { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
[data-bs-theme=dark] .app-menubar-tabs .side-menubar .menu-item .menu-link.active { background: linear-gradient(135deg, rgba(251,80,82,.16), transparent); color: #FB5052; }
[data-bs-theme=dark] .app-menubar-tabs .side-menubar .menu-item .menu-link.active > i { background: linear-gradient(145deg,#FB5052,#d4000a); color: #fff; }

/* =====================================================================
   Sidebar · Schärfe- & Performance-Feinschliff
   Behebt „matschiges/laggy" Gefühl: knackiger Bereichswechsel ohne
   Cross-Fade, scharfe Glyphen, einheitliche kurze Übergänge,
   pixel-scharfer Aktiv-Balken, ruhiges Scrollen.
   ===================================================================== */
/* 1) Saubere Kantenglättung – kein verwaschenes Text/Icon-Rendering */
.app-menubar-tabs,
.app-menubar-tabs .menu-link,
.app-menubar-tabs .sl-rail-label,
.app-menubar-tabs .menu-label {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* 2) Bereichswechsel SOFORT statt mulmiger Cross-Fade-Animation */
.app-menubar-tabs .tab-content > .tab-pane.fade { transition: none !important; }
.app-menubar-tabs .tab-content > .tab-pane.active { opacity: 1 !important; }

/* 3) Scharfe Rail-Icons: ganze Pixelgröße statt 1.2rem (=19.2px → unscharf) */
.app-navbar-tabs .sl-rail-link > i { font-size: 20px !important; }

/* 4) Einheitliche, knackige Übergänge (kurz, ease-out, GPU-stabil) */
.sl-rail-link, .sl-rail-link i,
.app-menubar-tabs .side-menubar .menu-item .menu-link,
.app-menubar-tabs .side-menubar .menu-item .menu-link > i {
	transition-duration: .12s !important;
	transition-timing-function: ease-out !important;
}
.sl-rail-link i,
.app-menubar-tabs .side-menubar .menu-item .menu-link > i { backface-visibility: hidden; }

/* 5) Pixel-scharfer Aktiv-Balken (kein halber Pixel durch translateY(-50%)) */
.app-menubar-tabs .side-menubar .menu-item .menu-link.active::before {
	top: 18% !important; height: 64% !important; transform: none !important;
}

/* 6) Ruhiges, natürliches Scrollen – kein „Durchrutschen" in den Content */
.app-navbar-tabs, .app-menubar-tabs .app-navbar { overscroll-behavior: contain; }

/* 7) Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
	.sl-rail-link, .sl-rail-link i,
	.app-menubar-tabs .side-menubar .menu-item .menu-link,
	.app-menubar-tabs .side-menubar .menu-item .menu-link > i { transition: none !important; }
}

/* =====================================================================
   Sprint 4 · DS-03 · KI-Feature-Chip
   ===================================================================== */
.sl-ai-chip {
	display: inline-flex; align-items: center; gap: .3rem;
	padding: .18rem .5rem; border-radius: 50rem;
	font-size: .68rem; font-weight: 700; letter-spacing: .02em;
	background: linear-gradient(90deg, #6366f1, #8b5cf6); color: #fff;
}
.sl-ai-chip i { font-size: .7rem; }

/* =====================================================================
   Sprint 4 · OO-01 · Upsell-Karte: Checked-State
   ===================================================================== */
.sl-upsell:has(input[type="checkbox"]:checked) {
	border-color: var(--sl-brand) !important;
	background: rgba(var(--bs-primary-rgb), .04) !important;
	box-shadow: 0 0 0 1px var(--sl-brand);
}
.sl-upsell:has(input[type="checkbox"]:checked) .sl-muted-num {
	color: var(--sl-brand);
	font-weight: 700;
}

/* =====================================================================
   Sprint 4 · KP-02 · Stepper: Done-Label grün, Active-Label primär
   ===================================================================== */
.sl-step-done .sl-step-label   { color: var(--bs-success) !important; font-weight: 600; }
.sl-step-active .sl-step-label { color: var(--sl-brand) !important; font-weight: 600; }

/* =====================================================================
   Sprint 4 · MOB-01 · Kundenportal: Mobile Spaltenreihenfolge
   ===================================================================== */
@media (max-width: 991.98px) {
	.kp-sidebar  { order: -1; }
	.kp-map-col  { order:  1; }
}

/* =====================================================================
   Sprint 4 · MOB-03 · Online-Offerte: Mobile Sticky-CTA
   ===================================================================== */
.oo-sticky-cta {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
	background: var(--bs-body-bg);
	border-top: 1px solid var(--bs-border-color);
	padding: .75rem 1rem;
	box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}
[data-bs-theme=dark] .oo-sticky-cta { border-color: rgba(255,255,255,.1); }

/* =====================================================================
   Sprint 4 · MOB-04 · Foto-Inventar: Mobile-Upload-Button
   ===================================================================== */
.fi-mobile-upload { display: none; }
@media (max-width: 767.98px) {
	.fi-mobile-upload { display: block; }
	.fi-dropzone-hint  { display: none; }
}

/* =====================================================================
   Sprint 4 · sl-badge.is-online (fehlender Status)
   ===================================================================== */
.sl-badge.is-online { color: #0E7A55; background: #E6F6EF; }
[data-bs-theme=dark] .sl-badge.is-online { color: #67D6A8; background: rgba(14,159,110,.18); }

/* =====================================================================
   Sprint 5 · Spam-Zeilen, Dark-Mode Toast
   ===================================================================== */
/* P-01 · Spam-Zeilen visuell gedämpft */
tr.sl-row-spam td { opacity: .48; }
tr.sl-row-spam:hover td { opacity: .65; }
tr.sl-row-spam td:nth-child(2) { text-decoration: line-through; }


/* W-08 · Aktiver Status-Filter-Badge */
.sl-badge.sl-badge-filter-active { outline: 2px solid currentColor; outline-offset: 2px; }

/* =====================================================================
   Runde 3 · QA-Sprint (Juni 2026)
   ===================================================================== */

/* QA-29 · Pipeline: visueller Drag-Handle */
.sl-drag-handle {
    text-align: center;
    color: var(--bs-tertiary-color);
    font-size: .75rem;
    margin-bottom: .3rem;
    cursor: grab;
    opacity: .35;
    transition: opacity .15s;
    line-height: 1;
}
.sl-card-lead:hover .sl-drag-handle { opacity: 1; }

/* QA-16 · Pipeline Dark Mode — Kanban-Kopfzeile lesbar halten */
[data-bs-theme=dark] .sl-kanban-head > div > span {
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .sl-kanban-body {
    background: rgba(255,255,255,.04);
}
[data-bs-theme=dark] .sl-card-lead {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.1);
}
[data-bs-theme=dark] .sl-card-lead:hover {
    background: rgba(255,255,255,.08);
}

/* QA-02 · Dark Mode: KPI-Label-Text nicht zu schwach */
[data-bs-theme=dark] .sl-stat-label {
    color: rgba(255,255,255,.62) !important;
}

/* BONUS-04 · Hot-Lead Puls-Animation (Score ≥ 80, score class = hot) */
@keyframes sl-pulse-hot {
    0%   { box-shadow: 0 0 0 0 rgba(229,72,77,.5); }
    70%  { box-shadow: 0 0 0 8px rgba(229,72,77,0); }
    100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); }
}
.sl-score.hot {
    animation: sl-pulse-hot 1.9s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .sl-score.hot { animation: none; }
}

/* =====================================================================
   Sprint 6 – UX-Refinements
   ===================================================================== */

/* #04/#05 · Filter-Selects: 44 px Touch-Target, mobile Stapelung */
.sl-filter-group select,
.sl-filter-group .form-select {
    min-height: 44px;
}
@media (max-width: 575.98px) {
    .sl-filter-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .5rem !important;
    }
    .sl-filter-group select,
    .sl-filter-group .form-select,
    .sl-filter-group .btn {
        width: 100%;
    }
}

/* #19 · Rechte-Matrix Subtext kleiner + lesbar */
.sl-matrix-sub {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    line-height: 1.4;
}

/* #22 · Allgemeine kleine Texte: Zeilenhöhe erhöhen */
small, .small, .form-text {
    line-height: 1.5;
}

/* #28/#29 · Integrations-Status-Puls-Indikator */
@keyframes sl-pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.5); opacity: .6; }
}
.sl-pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-success);
    animation: sl-pulse-dot 2s ease-in-out infinite;
    vertical-align: middle;
}
.sl-pulse-dot.inactive {
    background: var(--bs-secondary-color);
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    .sl-pulse-dot { animation: none; }
}

/* Print-Styles: Charts sauber drucken, Sidebar/Header ausblenden */
@media print {
    .app-sidebar,
    .app-header,
    .sl-filter-group,
    .btn,
    [data-sl-toast] { display: none !important; }
    .app-content { margin: 0 !important; padding: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
    body { background: #fff !important; color: #000 !important; }
}

/* =====================================================================
   Enterprise-Sidebar · Brand-Header + Rail-Lesbarkeit
   ===================================================================== */
/* Rail-Icons: mehr Label-Breite, sauberes Wrapping (kein Mitten-im-Wort-Bruch) */
.app-navbar-tabs .nav { gap: 6px; padding: 10px 4px; }
.sl-rail-link { padding: .55rem .15rem !important; gap: 4px; }
.sl-rail-label {
	font-size: .64rem !important;
	font-weight: 600 !important;
	line-height: 1.18 !important;
	letter-spacing: 0 !important;
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	max-width: 100%;
}
.app-navbar-tabs .sl-rail-link.active .sl-rail-label { font-weight: 700 !important; }

/* Enterprise-Brand-Band: tiefere Navy-Tiefe + feine rote Signaturlinie */
.app-menubar-tabs .app-navbar-brand,
.app-menubar-tabs .app-side-brands {
	background: linear-gradient(140deg, #0b1f38 0%, var(--sl-navy, #0c243c) 45%, #143258 100%);
	position: relative;
}
.app-menubar-tabs .app-navbar-brand::after,
.app-menubar-tabs .app-side-brands::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: linear-gradient(90deg, var(--sl-accent, #f9090c), rgba(249,9,12,0) 78%);
}
/* Wordmark-Lockup ruhiger & hochwertiger */
.app-side-brands .sl-brand-wordmark img { height: 30px !important; }
.app-side-brands .sl-brand-wordmark small {
	font-size: .6rem !important;
	font-weight: 700 !important;
	letter-spacing: .24em !important;
	text-transform: uppercase;
	color: #a9c4ee !important;
	margin-top: 1px;
}
[data-bs-theme=dark] .app-menubar-tabs .app-navbar-brand,
[data-bs-theme=dark] .app-menubar-tabs .app-side-brands {
	background: linear-gradient(140deg, #0a1422 0%, #0e1726 60%, #131f30 100%);
}

/* =====================================================================
   Enterprise-Sidebar v2 · breitere Rail + gestaltete Wortmarke
   ===================================================================== */
/* Rail 80px -> 96px + entschärftes Padding (deutlich mehr Platz fürs Label) */
.app-menubar-tabs .app-navbar-brand { width: 96px !important; min-width: 96px !important; }
.app-navbar-tabs { width: 96px !important; padding: 12px 6px 16px !important; }
@media (min-width: 992px) {
	.app-menubar-tabs .app-tab-content {
		left: 96px !important;
		width: calc(var(--app-menubar-tabs) - 96px) !important;
	}
}
@media (max-width: 991.98px) {
	.app-menubar-tabs.open .app-tab-content { left: 96px !important; }
}
.sl-rail-label { font-size: .66rem !important; line-height: 1.15 !important; }

/* Gestaltete Wortmarke im Panel (ersetzt das generische Raster-Logo) */
.app-side-brands .sl-brand-lockup {
	display: flex; flex-direction: column; gap: 5px;
	padding-left: 15px; position: relative;
	text-decoration: none; line-height: 1;
}
.app-side-brands .sl-brand-lockup::before {
	content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
	width: 3px; border-radius: 3px;
	background: linear-gradient(180deg, #f9090c, #d4000a);
	box-shadow: 0 0 10px rgba(249,9,12,.6);
}
.app-side-brands .sl-brand-name { font-size: 1.45rem; font-weight: 800; letter-spacing: -.025em; color: #fff; }
.app-side-brands .sl-brand-tag { font-size: .65rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #9db8e6; }

/* Brand-Band mit etwas mehr Tiefe (radialer Lichtakzent) */
.app-menubar-tabs .app-navbar-brand,
.app-menubar-tabs .app-side-brands {
	background:
		radial-gradient(120% 130% at 0% 0%, rgba(255,255,255,.07), transparent 55%),
		linear-gradient(140deg, #0b1f38 0%, var(--sl-navy, #0c243c) 45%, #163a63 100%) !important;
}

/* =====================================================================
   DARK MODE · Enterprise-Politur  (Append-Schicht – gewinnt per Cascade)
   Ziel: ruhiges, premium „Black" mit klarer Flächen-Hierarchie.
   Stufen:  Hintergrund (tiefstes)  <  Karte  <  erhöht (Modal/Dropdown).
   Trennung über Haarlinien statt harter Schatten.
   ===================================================================== */
[data-bs-theme=dark] {
	--bs-body-bg:                  #0b0f17;   /* tiefes, neutrales Near-Black (Blaustich) */
	--bs-body-color:               #e7ebf2;   /* primärer Text – AA */
	--bs-secondary-color:          #97a3b6;   /* gedämpfter Text */
	--bs-tertiary-color:           #7e8a9c;
	--bs-emphasis-color:           #f4f7fb;
	--bs-heading-color:            #f1f4f9;
	--bs-tertiary-bg:              #161c27;
	--bs-secondary-bg:             #19212e;
	--bs-border-color:             rgba(255,255,255,.08);
	--bs-border-color-translucent: rgba(255,255,255,.08);

	/* Flächen-Skala + Komponenten-Hintergründe */
	--sl-bg:               #0b0f17;
	--sl-surface-1:        #121823;   /* Karten */
	--sl-surface-2:        #19212e;   /* Dropdown · Modal · Hover · Input-Elevated */
	--sl-hairline:         rgba(255,255,255,.08);
	--sl-hairline-strong:  rgba(255,255,255,.14);
	--bs-card-bg:          #121823;
	--bs-card-cap-bg:      transparent;
	--bs-dropdown-bg:      #19212e;
	--bs-dropdown-border-color: rgba(255,255,255,.10);
	--bs-modal-bg:         #141b27;
	--bs-modal-border-color: rgba(255,255,255,.10);
}

/* Grundflächen */
[data-bs-theme=dark] body,
[data-bs-theme=dark] .app-wrapper,
[data-bs-theme=dark] .app-content { background-color: var(--sl-bg); }
[data-bs-theme=dark] .app-header {
	background: #0d1119;
	border-bottom: 1px solid var(--sl-hairline);
}

/* Karten: klare Stufe über dem Hintergrund, Haarlinie, kein muddy Schatten */
[data-bs-theme=dark] .card,
[data-bs-theme=dark] .sl-stat {
	background: var(--sl-surface-1);
	border: 1px solid var(--sl-hairline);
	box-shadow: none;
}
[data-bs-theme=dark] .card-header,
[data-bs-theme=dark] .card-footer { background: transparent; border-color: var(--sl-hairline); }

/* Erhöhte Flächen: Dropdown · Modal · Offcanvas · Popover · eigene Overlays */
[data-bs-theme=dark] .dropdown-menu,
[data-bs-theme=dark] .modal-content,
[data-bs-theme=dark] .offcanvas,
[data-bs-theme=dark] .popover,
[data-bs-theme=dark] .sl-modal,
[data-bs-theme=dark] .sl-modal-overlay .card {
	background: var(--sl-surface-2);
	border: 1px solid rgba(255,255,255,.10);
	box-shadow: 0 18px 48px rgba(0,0,0,.55);
}
[data-bs-theme=dark] .dropdown-divider { border-color: var(--sl-hairline); }
[data-bs-theme=dark] .dropdown-item { color: var(--bs-body-color); }
[data-bs-theme=dark] .dropdown-item:hover,
[data-bs-theme=dark] .dropdown-item:focus { background: rgba(255,255,255,.06); color: #fff; }

/* Formularfelder: ruhige, dunkle Felder + sichtbarer Marken-Fokus */
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select,
[data-bs-theme=dark] .form-control-fill,
[data-bs-theme=dark] .input-group-text {
	background-color: #0e131c !important;
	border-color: var(--sl-hairline);
	color: var(--bs-body-color);
}
[data-bs-theme=dark] .form-control::placeholder { color: rgba(255,255,255,.34); }
[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
	border-color: var(--sl-brand-400, #f9090c);
	box-shadow: 0 0 0 .2rem rgba(249,9,12,.22);
}

/* Tabellen: Haarlinien + dezenter Hover */
[data-bs-theme=dark] .table { color: var(--bs-body-color); }
[data-bs-theme=dark] .table > :not(caption) > * > * { border-bottom-color: var(--sl-hairline); }
[data-bs-theme=dark] .table thead th { color: var(--bs-secondary-color); border-bottom-color: var(--sl-hairline-strong); }
[data-bs-theme=dark] .table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,.045); }
[data-bs-theme=dark] tr[data-href]:hover > td { background: rgba(255,255,255,.05); }

/* Rahmen / Trennlinien vereinheitlichen */
[data-bs-theme=dark] hr,
[data-bs-theme=dark] .border,
[data-bs-theme=dark] .border-top,
[data-bs-theme=dark] .border-bottom,
[data-bs-theme=dark] .border-start,
[data-bs-theme=dark] .border-end { border-color: var(--sl-hairline) !important; }

/* Gedämpfte Texte gut lesbar; „Light"-Hilfsflächen neutralisieren */
[data-bs-theme=dark] .text-muted,
[data-bs-theme=dark] .text-body-secondary { color: var(--bs-secondary-color) !important; }
[data-bs-theme=dark] .sl-muted-num { color: #f1f4f9; }
[data-bs-theme=dark] .bg-light,
[data-bs-theme=dark] .bg-body-tertiary,
[data-bs-theme=dark] .bg-body-secondary { background-color: var(--sl-surface-2) !important; }

/* Icon-Chips: subtile Farbflächen edel abdunkeln */
[data-bs-theme=dark] .bg-primary-subtle { background-color: rgba(249,9,12,.15) !important; }
[data-bs-theme=dark] .bg-success-subtle { background-color: rgba(14,159,110,.15) !important; }
[data-bs-theme=dark] .bg-info-subtle    { background-color: rgba(11,165,192,.15) !important; }
[data-bs-theme=dark] .bg-warning-subtle { background-color: rgba(245,167,13,.15) !important; }
[data-bs-theme=dark] .bg-danger-subtle  { background-color: rgba(229,72,77,.15)  !important; }

/* Scrollbars + Auswahl dezent */
[data-bs-theme=dark] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
[data-bs-theme=dark] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }
[data-bs-theme=dark] ::selection { background: rgba(249,9,12,.35); color: #fff; }

/* =====================================================================
   PIPELINE · Drag-&-Drop-UX + Politur
   Spalten gleich hoch (Body = immer gültige Drop-Fläche), klares
   Drop-Zonen-Feedback beim Ziehen, sauberer Karten-Lift.
   ===================================================================== */
.sl-kanban-col { display: flex; flex-direction: column; }
.sl-kanban-body { flex: 1 1 auto; }
.sl-card-lead { cursor: grab; }
.sl-card-lead:active { cursor: grabbing; }

/* Aktiv gezogene Karte: leicht angehoben/gekippt */
.sl-drag-chosen {
	box-shadow: 0 14px 34px rgba(12,36,60,.20) !important;
	transform: rotate(.4deg) scale(1.012);
}
/* Während eines Drags: alle Spalten als Drop-Zonen markieren */
.sl-kanban-dragging .sl-kanban-body {
	outline: 2px dashed rgba(var(--bs-primary-rgb), .30);
	outline-offset: -5px;
	transition: outline-color .15s ease, background-color .15s ease;
}
.sl-kanban-dragging .sl-kanban-body:hover {
	outline-color: var(--sl-brand, #d4000a);
	background: rgba(var(--bs-primary-rgb), .06);
}
[data-bs-theme=dark] .sl-kanban-dragging .sl-kanban-body:hover { background: rgba(var(--bs-primary-rgb), .14); }
/* === Globaler Swisslogistik-Druck-Briefkopf (alle window.print()-Ausgaben) === */
.sl-print-letterhead, .sl-print-footer { display: none; }
@media print {
  .sl-print-letterhead { display: block !important; position: fixed; top: 0; left: 0; right: 0; text-align: center; padding: 6px 0 4px; }
  .sl-print-letterhead img { height: 44px; width: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sl-print-footer { display: block !important; position: fixed; bottom: 0; left: 0; right: 0; text-align: center; font-size: 7.5px; color: #555; padding: 5px 0; border-top: 1px solid #ddd; }
  @page { margin: 24mm 14mm 16mm 14mm !important; }
}

/* =====================================================================
   ENTERPRISE-TIEFE · Design-Politur — Loop-Iteration 1 (global)
   Gleiche Designsprache (Rot/Navy/helle Flächen). Mehr Elevation,
   Hierarchie, weichere Kanten & Übergänge — nimmt den flachen
   „Baustein/MVP"-Look. Gekapselt am Dateiende, leicht revertierbar.
   ===================================================================== */
:root {
	--sl-elev-1: 0 1px 2px rgba(16,42,67,.04), 0 2px 6px rgba(16,42,67,.05);
	--sl-elev-2: 0 1px 2px rgba(16,42,67,.04), 0 8px 24px -6px rgba(16,42,67,.10);
	--sl-elev-3: 0 2px 4px rgba(16,42,67,.05), 0 18px 40px -12px rgba(16,42,67,.16);
	--sl-hair:   rgba(16,42,67,.08);
}
[data-bs-theme=dark] {
	--sl-elev-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.30);
	--sl-elev-2: 0 1px 2px rgba(0,0,0,.40), 0 10px 26px -6px rgba(0,0,0,.55);
	--sl-elev-3: 0 2px 4px rgba(0,0,0,.45), 0 20px 44px -12px rgba(0,0,0,.65);
	--sl-hair:   rgba(255,255,255,.08);
}

/* Karten: Hairline + weiche Tiefe + feiner oberer Lichtkamm (respektiert Radius) */
.card {
	border: 1px solid var(--sl-hair);
	box-shadow: var(--sl-elev-2), inset 0 1px 0 rgba(255,255,255,.55);
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
[data-bs-theme=dark] .card { box-shadow: var(--sl-elev-2), inset 0 1px 0 rgba(255,255,255,.04); }

/* Karten-Kopf: ruhige Trennung statt harter Kante */
.card > .card-header {
	background: transparent;
	border-bottom: 1px solid var(--sl-hair);
	padding-top: .9rem; padding-bottom: .9rem;
}

/* Interaktive Karten heben sich sanft */
a.card:hover, .sl-card-hover:hover, .card.sl-stat:hover {
	box-shadow: var(--sl-elev-3), inset 0 1px 0 rgba(255,255,255,.6);
	transform: translateY(-2px); border-color: rgba(16,42,67,.12);
}

/* KPI-Kacheln: Icon mit feiner Tiefe, Zahlen tabellarisch ausgerichtet */
.sl-stat .sl-stat-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 6px 14px -6px rgba(16,42,67,.28); }
.sl-stat .sl-stat-value, .sl-muted-num { font-variant-numeric: tabular-nums; }

/* Tabellen: ruhigere Trennlinien + weicher Hover */
.table { --bs-table-border-color: var(--sl-hair); }
.table > :not(caption) > * > * { border-bottom-color: var(--sl-hair); }
.table-hover > tbody > tr { transition: background-color .12s ease; }

/* Buttons & Eingaben: feine Tiefe statt flacher Kästen */
.btn { border-radius: .55rem; }
.btn:active { transform: translateY(1px); }
.btn-light, .btn-outline-secondary { border-color: var(--sl-hair); box-shadow: var(--sl-elev-1); }
.btn-primary, .btn-accent { box-shadow: 0 6px 16px -6px rgba(212,0,10,.5); }
.form-control, .form-select {
	border-color: var(--sl-hair);
	box-shadow: inset 0 1px 2px rgba(16,42,67,.04);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus { box-shadow: inset 0 1px 2px rgba(16,42,67,.05), 0 0 0 4px rgba(var(--bs-primary-rgb), .12); }

/* Sidebar-Untermenü: aktiver Eintrag mit feinem Akzentbalken (mehr Hierarchie) */
.side-menubar .menu-item .menu-link { position: relative; transition: background-color .14s ease, color .14s ease; }
.side-menubar .menu-item .menu-link.active::before {
	content: ""; position: absolute; left: -.3rem; top: 50%; transform: translateY(-50%);
	width: 3px; height: 1.1rem; border-radius: 3px; background: var(--sl-brand);
}
.side-menubar .menu-item .menu-link:not(.active):hover { background: rgba(16,42,67,.045); border-radius: .5rem; }
[data-bs-theme=dark] .side-menubar .menu-item .menu-link:not(.active):hover { background: rgba(255,255,255,.05); }

/* Schlanke, dezente Scrollbars — wirkt aufgeräumter */
* { scrollbar-width: thin; scrollbar-color: rgba(16,42,67,.22) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(16,42,67,.18); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(16,42,67,.30); background-clip: content-box; }
[data-bs-theme=dark] * { scrollbar-color: rgba(255,255,255,.20) transparent; }
[data-bs-theme=dark] *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); background-clip: content-box; }

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 2 — Detail-Komponenten
   Timeline, Avatare, Chips, Listen, Hero, Overlays, Segment-Toggle
   ===================================================================== */

/* Timeline/Verlauf: Punkte „durchstoßen" die Verbindungslinie (Halo) */
.timeline-dot {
	width: 11px; height: 11px;
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--sl-hair);
}
[data-bs-theme=dark] .timeline-dot { box-shadow: 0 0 0 3px var(--bs-tertiary-bg), 0 0 0 4px var(--sl-hair); }

/* Avatar-Initialen: feiner Ring + Tiefe, Zahlen/Buchstaben mittig-ruhig */
.avatar-txt {
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 4px 10px -4px rgba(16,42,67,.30);
	letter-spacing: -.01em;
}

/* Chips: Hairline + minimal Tiefe statt flacher Fläche */
.sl-chip { border: 1px solid var(--sl-hair); box-shadow: 0 1px 1px rgba(16,42,67,.03); }

/* Listengruppen: ruhige Trennlinien + weicher Hover */
.list-group-item { border-color: var(--sl-hair); }
.list-group-item-action { transition: background-color .12s ease; }
.list-group-item-action:hover { background: rgba(16,42,67,.035); }
[data-bs-theme=dark] .list-group-item-action:hover { background: rgba(255,255,255,.04); }

/* Hero: tiefere Elevation + dezenter Licht-Sheen oben rechts */
.sl-hero { position: relative; overflow: hidden; box-shadow: var(--sl-elev-3); }
.sl-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.14), transparent 58%);
}

/* Overlays: gehören sichtbar „über" die Fläche → höchste Elevation */
.dropdown-menu {
	border: 1px solid var(--sl-hair); border-radius: .7rem;
	box-shadow: var(--sl-elev-3); padding: .35rem;
}
.dropdown-item { border-radius: .45rem; }
.modal-content {
	border: 1px solid var(--sl-hair); border-radius: var(--sl-card-radius);
	box-shadow: var(--sl-elev-3);
}
.offcanvas { box-shadow: var(--sl-elev-3); }

/* Segment-/Pill-Umschalter (z. B. Innen-/Außendienst): aktiver Zustand mit Tiefe */
.nav-pills .nav-link { transition: background-color .14s ease, color .14s ease, box-shadow .14s ease; }
.nav-pills .nav-link.active { box-shadow: 0 6px 16px -8px rgba(212,0,10,.55); }
.btn-group > .btn.active, .btn-group > .btn-check:checked + .btn {
	box-shadow: inset 0 1px 2px rgba(0,0,0,.08), 0 4px 12px -6px rgba(16,42,67,.25);
}

/* Progress: schlanker, mit feiner Innenkante */
.progress { box-shadow: inset 0 1px 2px rgba(16,42,67,.06); border-radius: 50rem; }
.progress-bar { border-radius: 50rem; }

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 3 — Kopfzeile, Formulare, Tabs, Leerzustände
   ===================================================================== */

/* Seiten-Kopf & Breadcrumb: ruhig, klare Hierarchie, Chevron-Trenner */
.app-page-head h4, .app-page-head .h4 { letter-spacing: -.02em; }
.breadcrumb { font-size: .8rem; margin-bottom: .15rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "\203A"; font-weight: 600; opacity: .55; }
.breadcrumb-item a { color: var(--bs-secondary-color); text-decoration: none; transition: color .14s ease; }
.breadcrumb-item a:hover { color: var(--bs-primary); }

/* Formular-Labels: feine, ruhige Mikro-Hierarchie */
.form-label { font-weight: 600; font-size: .82rem; color: var(--bs-secondary-color); letter-spacing: .005em; margin-bottom: .35rem; }

/* Eingabe-Gruppen: Addon nahtlos auf Feld-Tiefe */
.input-group-text { background: var(--bs-tertiary-bg); border-color: var(--sl-hair); color: var(--bs-secondary-color); }

/* Tabs: klare Unterstrich-Aktivierung in Markenfarbe statt Kasten-Look */
.nav-tabs { border-bottom: 1px solid var(--sl-hair); }
.nav-tabs .nav-link {
	border: 0; border-bottom: 2px solid transparent; color: var(--bs-secondary-color);
	font-weight: 600; padding: .55rem .9rem;
	transition: color .14s ease, border-color .14s ease;
}
.nav-tabs .nav-link:hover { color: var(--bs-body-color); border-bottom-color: var(--sl-hair); }
.nav-tabs .nav-link.active { color: var(--bs-primary); background: transparent; border-bottom-color: var(--sl-brand); }

/* Leerzustand: Icon in weichem Ring mit Tiefe */
.sl-empty .sl-empty-icon { box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .12), 0 8px 18px -8px rgba(var(--bs-primary-rgb), .25); }

/* Filter-/Toolbar-Leiste: liest sich als zusammengehörige Einheit */
.sl-filters { gap: .5rem; }
.sl-filter-active { border-color: var(--sl-brand) !important; box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .12) !important; }

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 4 — Dashboard-spezifische Tiefe
   ===================================================================== */

/* Alle Icon-Kacheln (Mein Tag, Kennzahlen, Status …) bekommen feine Tiefe */
.sl-stat-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.30), 0 4px 10px -5px rgba(16,42,67,.22); }
[data-bs-theme=dark] .sl-stat-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 4px 10px -5px rgba(0,0,0,.5); }

/* Mein-Tag-Aktionszeilen: Hover hebt mit Fläche + Chevron-Bewegung */
.list-group-flush .list-group-item-action { border-radius: .6rem; position: relative; transition: background-color .14s ease, transform .14s ease; }
.list-group-flush .list-group-item-action:not(.opacity-50):hover { background: rgba(var(--bs-primary-rgb), .05); transform: translateX(2px); }
.list-group-flush .list-group-item-action .fi-rr-angle-right { transition: transform .14s ease, color .14s ease; }
.list-group-flush .list-group-item-action:not(.opacity-50):hover .fi-rr-angle-right { transform: translateX(3px); color: var(--bs-primary) !important; }

/* Kennzahlen-Mini-Kacheln: flach/grau → Hairline + Elevation + Hover-Lift */
.sl-card-hover.rounded-3 {
	border: 1px solid var(--sl-hair);
	box-shadow: var(--sl-elev-1);
	transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.sl-card-hover.rounded-3:hover {
	box-shadow: var(--sl-elev-2); transform: translateY(-2px);
	border-color: rgba(16,42,67,.12);
}

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 5 — Sidebar-Tiefe
   ===================================================================== */

/* Sidebar als eigene, leicht erhöhte Ebene über dem Inhalt */
.app-menubar-tabs { box-shadow: 1px 0 0 var(--sl-hair), 8px 0 28px -14px rgba(16,42,67,.20); }
[data-bs-theme=dark] .app-menubar-tabs { box-shadow: 1px 0 0 var(--sl-hair), 8px 0 28px -14px rgba(0,0,0,.6); }

/* Feiner Trenner zwischen Icon-Rail und Bereichs-Panel */
.app-navbar-tabs { box-shadow: inset -1px 0 0 var(--sl-hair); }

/* Icon-Rail: weiche Hover-Kachel + aktives Icon als angehobene rote Kachel */
.sl-rail-link { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.app-navbar-tabs .sl-rail-link:not(.active):hover { background: rgba(16,42,67,.05); }
[data-bs-theme=dark] .app-navbar-tabs .sl-rail-link:not(.active):hover { background: rgba(255,255,255,.06); }
.app-navbar-tabs .sl-rail-link.active {
	box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .15), 0 6px 14px -8px rgba(var(--bs-primary-rgb), .45);
}

/* Aktiver Bereichs-Eintrag im Panel: angehobene Kachel mit feiner Tiefe */
.side-menubar .menu-item .menu-link { margin: 1px .15rem; }
.side-menubar .menu-item .menu-link.active {
	box-shadow: 0 5px 14px -7px rgba(var(--bs-primary-rgb), .45), inset 0 0 0 1px rgba(var(--bs-primary-rgb), .10);
}

/* Brand-Kopf: dezente untere Tiefe, hebt sich vom Menü ab */
.app-navbar-brand, .app-side-brands { position: relative; z-index: 1; box-shadow: 0 8px 18px -12px rgba(16,42,67,.55); }

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 6 — Detail-Seiten & Daten-Kacheln
   ===================================================================== */

/* Generische Daten-Kacheln (border rounded) in Karten: weiche Inset-Optik
   statt harter grauer Box — nimmt den „Baustein"-Look der Eckdaten-Felder */
.card .border.rounded, .card .border.rounded-3, .card .border.rounded-2 {
	border-color: var(--sl-hair) !important;
	background: rgba(16,42,67,.018);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.card a.border.rounded:hover, .card a.border.rounded-3:hover,
.card .sl-card-hover.border.rounded:hover {
	border-color: rgba(var(--bs-primary-rgb), .25) !important;
	background: rgba(var(--bs-primary-rgb), .03);
}
[data-bs-theme=dark] .card .border.rounded,
[data-bs-theme=dark] .card .border.rounded-3,
[data-bs-theme=dark] .card .border.rounded-2 {
	background: rgba(255,255,255,.02);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

/* Lead-Score-Gauge & Kreis-Indikatoren: feine Tiefe */
.sl-score { box-shadow: 0 6px 16px -8px rgba(16,42,67,.30); }

/* „Original-Anfrage"/Info-Flächen (bg-light Blöcke) in Karten: weicher Tint */
.card .bg-light, .card [class*="bg-"][class*="-subtle"].rounded { box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 7 — Pipeline-Kanban & Listen
   ===================================================================== */

/* Kanban-Spalte als zusammenhängendes Panel mit Tiefe */
.sl-kanban-head { border: 1px solid var(--sl-hair); border-bottom-width: 3px; box-shadow: var(--sl-elev-1); }
.sl-kanban-body { border: 1px solid var(--sl-hair); border-top: 0; box-shadow: inset 0 2px 6px -3px rgba(16,42,67,.10); }
[data-bs-theme=dark] .sl-kanban-body { box-shadow: inset 0 2px 6px -3px rgba(0,0,0,.5); }

/* Lead-Karten: Hairline + weiche Tiefe + spürbarer Lift */
.sl-card-lead { border-color: var(--sl-hair); box-shadow: var(--sl-elev-1), inset 0 1px 0 rgba(255,255,255,.5); }
.sl-card-lead:hover { box-shadow: var(--sl-elev-2), inset 0 1px 0 rgba(255,255,255,.6); transform: translateY(-2px); }
[data-bs-theme=dark] .sl-card-lead { box-shadow: var(--sl-elev-1), inset 0 1px 0 rgba(255,255,255,.04); }
[data-bs-theme=dark] .sl-card-lead:hover { box-shadow: var(--sl-elev-2), inset 0 1px 0 rgba(255,255,255,.05); }

/* Listen-/Tabellen-Zeilen: optionale Aktions-Buttons erscheinen weich beim Hover */
.table-hover tbody tr .sl-row-actions { opacity: .4; transition: opacity .14s ease; }
.table-hover tbody tr:hover .sl-row-actions { opacity: 1; }

/* Tabellenraster: erste/letzte Zelle mit etwas mehr Luft */
.table > :not(caption) > * > *:first-child { padding-left: 1.1rem; }
.table > :not(caption) > * > *:last-child { padding-right: 1.1rem; }

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 8 — Top-Header
   ===================================================================== */

/* Header als ruhige, leicht erhöhte Leiste über dem Inhalt */
.app-header { box-shadow: 0 1px 0 var(--sl-hair), 0 6px 18px -12px rgba(16,42,67,.18); }
[data-bs-theme=dark] .app-header { box-shadow: 0 1px 0 var(--sl-hair), 0 6px 18px -12px rgba(0,0,0,.6); }

/* Globales Suchfeld: weiche Inset-Tiefe + sanfter Fokus */
.app-header .form-control-fill, .app-header input[type="search"] {
	border: 1px solid var(--sl-hair);
	box-shadow: inset 0 1px 2px rgba(16,42,67,.05);
	transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.app-header .form-control-fill:focus, .app-header input[type="search"]:focus {
	border-color: rgba(var(--bs-primary-rgb), .4);
	box-shadow: inset 0 1px 2px rgba(16,42,67,.05), 0 0 0 4px rgba(var(--bs-primary-rgb), .10);
}

/* „Heute importiert"-Chip: Hairline + minimale Tiefe */
.badge-standard {
	border: 1px solid var(--sl-hair); box-shadow: var(--sl-elev-1);
	border-radius: 50rem; padding: .35rem .7rem;
	transition: border-color .14s ease, box-shadow .14s ease;
}
.badge-standard:hover { border-color: rgba(var(--bs-primary-rgb), .3); box-shadow: var(--sl-elev-2); }

/* Header-Aktions-Buttons (Suche, Theme, Glocke, Kalender): weiche Hover-Kachel */
.app-header .btn-icon, .app-header .theme-btn, .app-header .btn-action-gray {
	transition: background-color .14s ease, box-shadow .14s ease, transform .08s ease;
}
.app-header .btn-icon:hover, .app-header .theme-btn:hover, .app-header .btn-action-gray:hover {
	background: rgba(16,42,67,.05); box-shadow: var(--sl-elev-1);
}
[data-bs-theme=dark] .app-header .btn-icon:hover,
[data-bs-theme=dark] .app-header .theme-btn:hover,
[data-bs-theme=dark] .app-header .btn-action-gray:hover { background: rgba(255,255,255,.06); }

/* „+ Neu"-Hauptaktion: markante, aber ruhige Tiefe */
.app-header .btn-primary { box-shadow: 0 6px 16px -7px rgba(212,0,10,.55); }
.app-header .btn-primary:hover { box-shadow: 0 8px 20px -7px rgba(212,0,10,.60); }

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 9 — Login & Benachrichtigungen
   ===================================================================== */

/* Login-Aside: mehr Tiefe — Lichtblase, Vignette, Innenschatten zur Form */
.sl-auth-aside { box-shadow: inset -18px 0 40px -28px rgba(0,0,0,.55); }
.sl-auth-aside::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(60% 50% at 12% 90%, rgba(255,255,255,.10), transparent 60%),
		radial-gradient(80% 60% at 50% 125%, rgba(0,0,0,.30), transparent 60%);
}
.sl-auth-aside > * { position: relative; z-index: 1; }

/* Login-Form-Seite: ruhiger heller Grund mit feinem oberen Verlauf */
.sl-auth-form { background: linear-gradient(180deg, #fff 0%, var(--bs-body-bg) 100%); }
[data-bs-theme=dark] .sl-auth-form { background: linear-gradient(180deg, var(--bs-tertiary-bg) 0%, var(--bs-body-bg) 100%); }

/* Alerts: ruhige Optik mit farbigem Akzentbalken statt flacher Box */
.alert { border: 1px solid var(--sl-hair); border-left-width: 3px; box-shadow: var(--sl-elev-1); border-radius: .6rem; }
.alert-success { border-left-color: var(--bs-success); }
.alert-danger  { border-left-color: var(--bs-danger); }
.alert-warning { border-left-color: var(--bs-warning); }
.alert-info    { border-left-color: var(--bs-info); }
.alert-primary { border-left-color: var(--sl-brand); }

/* Toasts: schweben klar über dem Inhalt (höchste Elevation) */
.toast, .sl-toast { border: 1px solid var(--sl-hair); border-radius: .7rem; box-shadow: var(--sl-elev-3); }

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 10 — Kalender (FullCalendar) & Charts
   ===================================================================== */

/* FullCalendar an die Designsprache angleichen + Tiefe */
.fc { --fc-border-color: var(--sl-hair); --fc-today-bg-color: rgba(var(--bs-primary-rgb), .05); }
.fc .fc-toolbar-title { font-weight: 700; letter-spacing: -.01em; color: var(--bs-heading-color); }
.fc .fc-button {
	background: var(--bs-body-bg); border: 1px solid var(--sl-hair); color: var(--bs-body-color);
	box-shadow: var(--sl-elev-1); text-transform: none; font-weight: 600; border-radius: .5rem !important;
	transition: background-color .14s ease, box-shadow .14s ease, color .14s ease;
}
.fc .fc-button:hover { background: rgba(16,42,67,.05); color: var(--bs-body-color); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
	background: var(--sl-brand); border-color: var(--sl-brand); color: #fff;
	box-shadow: 0 6px 14px -7px rgba(212,0,10,.5);
}
.fc .fc-col-header-cell-cushion {
	font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
	color: var(--bs-secondary-color); font-weight: 700; padding: .5rem;
}
.fc .fc-daygrid-day.fc-day-today { box-shadow: inset 0 0 0 2px rgba(var(--bs-primary-rgb), .25); }
.fc .fc-daygrid-day-number { font-variant-numeric: tabular-nums; }
.fc .fc-event {
	border: 0; border-radius: .4rem; padding: 1px 4px; font-weight: 600;
	box-shadow: 0 2px 6px -2px rgba(16,42,67,.3);
}
.fc .fc-event:hover { filter: brightness(1.03); }
.fc-theme-standard td, .fc-theme-standard th { border-color: var(--sl-hair); }
.fc-theme-standard .fc-scrollgrid { border-color: var(--sl-hair); border-radius: var(--sl-card-radius); overflow: hidden; }

/* ApexCharts: Tooltip mit Elevation, ruhige Legende/Gitterlinien */
.apexcharts-tooltip { box-shadow: var(--sl-elev-3) !important; border: 1px solid var(--sl-hair) !important; border-radius: .6rem !important; }
.apexcharts-gridline { stroke: var(--sl-hair); }
.apexcharts-legend-text { font-weight: 600; }

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 11 — Modals, Formular-Sektionen, Detail-Politur
   ===================================================================== */

/* Modals: ruhige Kopf-/Fußzeilen-Trennung + Titel-Gewicht (respektiert .border-0) */
.modal-header { border-bottom: 1px solid var(--sl-hair); }
.modal-footer { border-top: 1px solid var(--sl-hair); gap: .5rem; }
.modal-title { font-weight: 700; letter-spacing: -.01em; }
.modal-backdrop.show { opacity: .42; }

/* Verschachtelte Karten (Formular-Sektionen) als ruhige Inset-Sektionen */
.card .card { box-shadow: var(--sl-elev-1); border-color: var(--sl-hair); }

/* Detail-Politur: Trennlinien, Tasten, Überschriften, Dropdown-Header */
hr { border-color: var(--sl-hair); opacity: 1; }
kbd {
	background: var(--bs-tertiary-bg); border: 1px solid var(--sl-hair);
	box-shadow: 0 1px 0 var(--sl-hair); color: var(--bs-secondary-color);
	border-radius: .35rem; padding: .1rem .35rem;
}
.card-title { font-weight: 700; letter-spacing: -.01em; }
.dropdown-header { letter-spacing: .04em; }

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 12 — Typo-Feinschliff & Zahlen-Ausrichtung
   ===================================================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { letter-spacing: -.015em; }
.table td.text-end, .table .sl-muted-num { font-variant-numeric: tabular-nums; }
.dropdown-item .scale-1x { opacity: .92; }

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 14 — Atmosphäre & Premium-Politur
   ===================================================================== */

/* Arbeitsfläche: ruhiger Verlauf + zarter Marken-Schimmer oben statt flachem Grau */
body {
	background:
		radial-gradient(1100px 360px at 100% -140px, rgba(212,0,10,.04), transparent 70%),
		linear-gradient(180deg, #f7f8fa 0%, var(--bs-body-bg) 60%);
	background-attachment: fixed;
}
[data-bs-theme=dark] body {
	background:
		radial-gradient(1100px 360px at 100% -140px, rgba(251,80,82,.06), transparent 70%),
		linear-gradient(180deg, #101626 0%, var(--bs-body-bg) 60%);
	background-attachment: fixed;
}

/* Markenfarbene Textauswahl – kleiner Premium-Akzent */
::selection { background: rgba(212,0,10,.16); }

/* Sanfter, einmaliger Auftritt des Seiteninhalts (ruhig, schnell, a11y-fest) */
@media (prefers-reduced-motion: no-preference) {
	main > .container-fluid { animation: sl-rise .36s cubic-bezier(.2,.7,.2,1) both; }
	@keyframes sl-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
}

/* Zahlen-Hervorhebung in KPI-Kacheln: minimaler Tiefen-Schliff */
.sl-stat .sl-stat-value { text-shadow: 0 1px 0 rgba(255,255,255,.5); }
[data-bs-theme=dark] .sl-stat .sl-stat-value { text-shadow: none; }

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 15 — Display-Typografie (Poppins)
   Nur Schau-Elemente; Body/Tabellen/Labels bleiben gut lesbar.
   ===================================================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.card-header h6, .card-header .h6, .card-title,
.app-page-head h4, .app-page-head .h4,
.sl-stat .sl-stat-value, .sl-brand-name, .sl-hero h3,
.fc .fc-toolbar-title, .modal-title, .sl-empty {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	letter-spacing: -.02em;
}
.sl-stat .sl-stat-value { font-weight: 700; }

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 16 — Konsistenz & Dark-Mode-Feinschliff
   ===================================================================== */
a, .btn, .menu-link, .nav-link, .form-control, .form-select,
.list-group-item-action, .sl-rail-link, .card {
	transition-timing-function: cubic-bezier(.2,.7,.2,1);
}
[data-bs-theme=dark] ::selection { background: rgba(251,80,82,.28); }

/* =====================================================================
   ENTERPRISE-TIEFE · Iteration 17 — Hinweis-Banner entschärfen
   Gestrichelter Rahmen wirkt MVP → ruhige Fläche + Marken-Akzentbalken.
   (Dropzones/Signature-Pad bleiben bewusst gestrichelt.)
   ===================================================================== */
.sl-ai-panel {
	border: 1px solid rgba(var(--bs-primary-rgb), .14);
	border-left: 3px solid var(--sl-brand);
	background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), .06), rgba(var(--bs-primary-rgb), .02));
	box-shadow: var(--sl-elev-1);
}